@charset "utf-8";
/* ==============================
* コンポーネント
* ==============================*/
.components {
	padding: 0 0 72px;
}

.components h2 {
	margin-bottom: 0;
	padding-bottom: 8px;
	border-bottom: 1px solid;
	font-size: 32px;
}

.components h3 {
	margin-top: 40px;
	padding-bottom: 8px;
	border-bottom: 1px solid;
	font-size: 20px;
}

.components h3:first-child {
	margin-top: 0;
}

/* ==============================
* 共通CSS（origin）
* ==============================*/
#conts {
	padding: 0 0 24px;
	font-family: メイリオ,"Meiryo",MS PGothic,"ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3";
	position: relative;
}

.mainTtl {
	margin-bottom: 56px;
}

#gFooter, .level1 {
	margin-top: 0;
}

/* ==============================
* 共通CSS（新規）
* ==============================*/
/* レイアウト */
.container01 {
	margin-top: 96px;
	padding: 56px 80px 72px;
	background: #fff;
	border-radius: 5px;
	position: relative;
	box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.1);
}

.container01::before {
	width: 80px;
	height: 20px;
	background: url(/assets/img/pc/jobchange/deco01.png) no-repeat center /cover;
	display: block;
	position: absolute;
	top: -56px;
	left: 50%;
	transform: translateX(-50%);
	content: "";
}

.container01:first-child {
	margin-top: 0;
}

.container01:first-child::before {
	content: none;
}

.container02 {
	margin-top: 56px;
}

.container02:first-child {
	margin-top: 0;
}

.container03 {
	margin-top: 56px;
	padding: 0 56px;
}

.container04 {
	margin-top: 32px;
}

/* 段落 */
.paragraph {
	margin-top: 32px;
}

.paragraph:first-child {
	margin-top: 0;
}

.paragraph + .paragraph {
	margin-top: 24px;
}

.jobChangeHdg01 + .paragraph {
	margin-top: 56px;
}

.jobChangeHdg02 + .paragraph {
	margin-top: 40px;
}

.jobChangeHdg03 + .paragraph,
.box03 + .paragraph,
.text01 + .box03,
.paragraph + .box03 {
	margin-top: 16px;
}

.jobChangeHdg03 + .box03 {
	margin: 16px 0;
}

.jobChangeFigure + .paragraph,
.jobChangeFigureCaption + .paragraph {
	margin-top: 56px;
}

.paragraph .bold {
	color: #006B30;
	font-style: normal;
	font-weight: bold;
}

/* 見出し */
.jobChangeHdg01 {
	text-align: center;
}

.jobChangeHdg01 img {
	max-width: 100%;
	width: auto;
	height: 30px;
}

.jobChangeHdg01.hasLine {
	margin-bottom: 120px;
	position: relative;
}

.jobChangeHdg01.hasLine::after {
	width: 672px;
	height: 22px;
	background: url(/assets/img/pc/jobchange/dot02.png) no-repeat center /cover;
	display: block;
	position: absolute;
	bottom: -60px;
	left: -60px;
	content: "";
}

.jobChangeHdg02 {
	margin-top: 56px;
	padding: 16px;
	background: #006B30;
	border-radius: 5px;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
}

.jobChangeHdg02:first-child {
	margin-top: 0;
}

.jobChangeHdg03 {
	margin-top: 64px;
	color: #006B30;
	font-size: 18px;
	font-weight: bold;
	position: relative;
}

.jobChangeHdg03:first-child {
	margin-top: 0;
}

/* 画像 */
.jobChangeFigure {
	margin: 56px 0 0;
	position: relative;
}

.jobChangeFigure:first-child {
	margin-top: 0;
}

.jobChangeFigure::before,
.jobChangeFigure::after {
	width: 52px;
	height: calc(100% - 60px);
	background: url(/assets/img/pc/jobchange/dot01.png) repeat-y center/100% auto;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	content: "";
}

.jobChangeFigure::before {
	left: -58px;
}

.jobChangeFigure::after {
	right: -58px;
}

.jobChangeFigure img {
	max-width: 100%;
}

.jobChangeFigure + .jobChangeFigureCaption {
	margin-top: 16px;
	text-align: center;
}

.box01 .jobChangeFigure::before,
.box01 .jobChangeFigure::after {
	content: none;
}

/* 目次へボタン */
#pageTop {
	margin: 0px 0 0 410px;
	width: 58px;
	height: 58px;
	background: #fff;
	border-radius: 50%;
	text-align: center;
	text-decoration: none;
	position: fixed;
	bottom: 20px;
	left: 50%;
	z-index: 1;
	box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.1);
	transition: .3s;
	opacity: 0;
}

#pageTop:hover {
	background: #4A5F53;
}

#pageTop:hover > .topText{
	color: #fff;
}

.topArrow {
	margin-top: 8px;
}

.topText {
	color: #4A5F53;
	font-size: 13px;
	font-weight: bold;
	line-height: 2;
	display: block;
}

/* ==============================
* 新コンポーネント
* ==============================*/
/* box01 */
.box01 {
	border: 2px solid #4A5F53;
	border-radius: 5px;
	background: #FFF;
	position: relative;
}

.box01.bg01 {
	background-color: #F2F7F3;
}

.box01.bg02 {
	background-color: #FFFFEF;
}

.box01 .box01Catch {
	padding: 32px 40px;
	background: #F7F7F7;
	color: #006B30;
	font-size: 20px;
	font-weight: bold;
}

.box01 .box01Header {
	margin-bottom: 0;
	padding: 18px 16px 14px;
	background: #006B30;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
}

.box01 .box01Body {
	padding: 40px;
}

.box01 .box01Catch + .box01Body {
	border-top: 1px solid #006B30;
}

/* border */
.box01.border01 {
	border-width: 1px;
}

.box01.border01 > :last-child {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.box01.border01 > :only-child {
	border-radius: 5px;
}

/* text */
.box01 .box01Txt {
	margin-top: 32px;
}

.box01 .box01Txt:first-child {
	margin-top: 0;
}

/* balloon */
.box01.hasBalloon {
	margin-top: 48px;
	text-align: center;
}

.box01 .box01Balloon {
	box-sizing: border-box;
	padding: 6px 40px 4px;
	max-width: 75%;
	min-width: 150px;
	background: #4A5F53;
	border-radius: 36px;
	display: inline-block;
	transform: translateY(-50%);
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.6;
	text-align: center;
	word-break: keep-all;
}

.box01 .box01Balloon.bg01 {
	background-color: #006B30;
}

.box01.hasBalloon.border01 > :nth-child(2) {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.box01.hasBalloon .box01Body {
	padding-top: 10px;
	text-align: left;
}

/* step */
.box01.step {
	margin-bottom: 64px;
}

.box01.step::after {
	width: 0;
	height: 0;
	border-top: 10px solid #006B30;
	border-right: 12px solid transparent;
	border-left: 12px solid transparent;
	display: block;
	position: absolute;
	left: 50%;
	content: "";
	transform: translateX(-50%);
}

.box01:last-of-type {
	margin-bottom: 0;
}

.box01.step:last-of-type::after {
	content: none;
}

.box01.step .box01Body {
	padding: 40px 40px 32px;
}

.box01.step .box03 {
	margin-bottom: 24px;
}

.box01.step .box01Balloon {
	padding: 2px 40px 0;
	background: #006B30;
	font-size: 14px;
	line-height: 1.5;
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
}

.box01.step.box01.hasBalloon {
	text-align: left;
}

/* box03 */
.box03 {
	margin-bottom: 8px;
	padding: 32px;
	background: #F2F7F3;
	border-radius: 5px;
}

.box03 .decoration01 {
	padding: 1px 12px 0;
	font-size: 14px;
}

/* list */
/* list01 */
.list01 .list01Item {
	margin-top: 8px;
	padding-left: 24px;
	color: #4A5F53;
	line-height: 1.9;
	position: relative;
}

.list01 .list01Item:first-child {
	margin-top: 0;
}

.list01 .list01Item::before {
	width: 4px;
	height: 4px;
	background: #4A5F53;
	border-radius: 50%;
	position: absolute;
	top: 10px;
	left: 8px;
	content: "";
}

/* list02 */
.list02 .list02Item {
	margin-top: 16px;
	padding-left: 24px;
	color:#4A5F53;
	line-height: 1.7;
	position: relative;
}

.list02 .list02Item:first-child {
	margin-top: 0;
}

.list02 .list02Item::before {
	width: 16px;
	height: 16px;
	background: url(/assets/img/pc/jobchange/check.png) no-repeat center /cover;
	display: block;
	position: absolute;
	top: 3px;
	left: 0;
	content: "";
}

/* list03 */
.list03 .list03Item {
	margin-top: 8px;
	padding-left: 16px;
	text-align: left;
	position: relative;
	display: flex;
	align-items: center;
}

.list03 .list03Item:first-child {
	margin-top: 0;
}

.list03 .list03Item::before {
	width: 5px;
	height: 5px;
	background: #4A5F53;
	border-radius: 50%;
	position: absolute;
	top: 12px;
	left: 5px;
	content: "";
}

.list03 .list03Item:hover > a {
	text-decoration: underline;
	text-decoration-color: #4A5F53;
}

.list03 .list03Item a {
	min-width: 250px;
	color: #4A5F53;
	font-size: 20px;
	font-weight: bold;
	display: inline-block;
	text-decoration: none;
}

.list03 .list03Item img {
	margin: 4px 0 0 8px;
}

.list03Description {
	padding-left: 16px;
	color: #4A5F53;
	font-size: 14px;
	position: relative;
}

.list03Description:before {
	width: 25px;
	height: 2px;
	background: url(/assets/img/pc/jobchange/dashed.png) no-repeat center/cover;
	display: block;
	position: absolute;
	top: 10px;
	left: -18px;
	content: "";
}

/* list04 */
.list04 .list04 {
	margin-top: 8px;
	padding: 32px;
	background: #F2F7F3;
	border-radius: 5px;
}

.list04 .list04Item {
	margin-top: 16px;
	color: #4A5F53;
}

.list04 .list04Item:first-child {
	margin-top: 0;
}

.list04 .list04Item dl {
	display: flex;
	align-items: flex-start;
}

.list04 .list04Item dt,
.list04 .list04Item dd {
	display: inline-block;
}

.list04 .list04Item dt {
	margin-right: 24px;
	min-width: 3em;
	font-weight: bold;
	position: relative;
}

.list04 .list04Item dt::after {
	margin: auto;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 6px solid #006B30;
	display: block;
	position: absolute;
	top: -2px;
	bottom: 0;
	right: -10px;
	content: "";
}

.list04 .list04Item dd {
	flex: 1 0;
}

/* marker */
.marker01 {
	background: linear-gradient(to top, #D6F5DC 10px, transparent 5px);
	color: #4A5F53;
	display: inline;
}

.marker02 {
	background: linear-gradient(to top, #EFEB8D 10px,  transparent 5px);
	color: #4A5F53;
	display: inline;
}

/* text */
.text01 {
	color: #006B30;
	font-size: 18px;
	font-weight: bold;
}

.text02 {
	font-size: 16px;
	font-weight: bold;
}

/* decoration01 */
.decoration01 {
	margin-right: 8px;
	padding: 2px 12px 0;
	background: #4A5F53;
	border-radius: 25px;
	display: inline-block;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	vertical-align: middle;
}

/* accordion01 */
.accordion01Ttl {
	padding: 16px 48px 16px 40px;
	color: #006B30;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.89;
	position: relative;
	cursor: pointer;
}

.accordion01Ttl:before {
	width: 20px;
	height: 20px;
	background: url(/assets/img/pc/jobchange/deco02.png) no-repeat center /cover;
	display: block;
	position: absolute;
	top: 23px;
	left: 0;
	content: "";
	transition: .3s;
}

.accordion01Ttl:after {
	width: 34px;
	height: 34px;
	background: url(/assets/img/pc/jobchange/plus.png) no-repeat center/100%;
	display: block;
	position: absolute;
	top: 14px;
	right: 0;
	content: "";
}

.accordion01Ttl:hover {
	color: #4A5F53;
}

.accordion01Ttl:hover:before,
.accordion01Ttl.open:before {
	transform: rotate(45deg);
}

.accordion01Ttl:hover:after {
	background-image: url(/assets/img/pc/jobchange/plus-hover.png);
}

.accordion01Ttl.open::after {
	background: url(/assets/img/pc/jobchange/minus.png) no-repeat center/100%;
}

.accordion01Cont {
	padding: 40px;
	display: none;
}

.accordion01Ttl.open + .accordion01Cont {
	border-top: 2px solid #EFEFEF;
	border-bottom: 2px solid #EFEFEF;
}

/*------------------------------------------------------------
	施工管理の志望動機
------------------------------------------------------------*/
#jobchange-motive #conts {
	color:#4A5F53;
	font-size: 15px;
}

#jobchange-motive .box03 .decoration01 {
	margin-bottom: 8px;
}

#jobchange-motive #conts p {
	line-height: 2;
}

#jobchange-motive .jobChangeHdg01 img {
	height: auto;
}

#jobchange-motive .container02 .jobChangeHdg03 {
	margin-bottom: 16px;
}

#jobchange-motive .accordion01 .box03 {
	padding: 24px;
}

#jobchange-motive .accordion01Cont dl:not(:last-child) .box03 {
	margin-bottom: 24px;
}

#jobchange-motive .marker02 {
	font-weight: bold;
}

#jobchange-motive .box01Txt {
	margin-bottom: 8px;
}

#jobchange-motive .text02 + .box03 {
	margin-top: 32px;
}

#jobchange-motive #conts #cta {
	margin-top: 30px;
	margin-bottom: 120px;
}

/* ==============================
* 施工管理 きつい
* ==============================*/
#jobchange-hard01 #conts,
#jobchange-component #conts {
	color:#4A5F53;
	font-size: 15px;
}

#jobchange-hard01 .index p,
#jobchange-component .components p {
	line-height: 2;
}

#jobchange-hard01 #top {
	text-align: left;
}

#jobchange-hard01 .mainTtl {
	margin-bottom: 0;
}

#jobchange-hard01 #table {
	margin-top: -5px;
	padding-top: 10px;
}

/* ==============================
* 施工管理 未経験
* ==============================*/
#jobchange-inexperience01 #conts {
	color:#4A5F53;
	font-size: 15px;
}

#jobchange-inexperience01 .container04 .list01,
#jobchange-inexperience01 .jobChangeHdg03 + .box03 {
	margin-top: 24px;
}

#jobchange-inexperience01 .box03 {
	padding: 32px 24px;
}

#jobchange-inexperience01 .box03 .paragraph {
	margin-top: 16px;
}

#jobchange-inexperience01 #conts #cta {
	margin-top: 30px;
	margin-bottom: 120px;
}