@charset "UTF-8";
/* CSS Document */

main.subpage_illustration .subpage_main_box{
	max-width: 840px;
	background-image: url("../images/bg_main.png");
	background-size: 247px 280px;
	min-height: 288px;
}


main.subpage .subpage_main_box h2{
	margin-bottom: 8px;
}
main.subpage .subpage_main_box p{
	margin-bottom: 40px;
}

#topics1 .topics_title:after{
	background-image: url("../../../personality/assets/images/topics_01.png");
}
#topics2 .topics_title:after{
	background-image: url("../images/topics_02.png");
}
#topics3 .topics_title:after{
	background-image: url("../../../worthwhile/assets/images/topics_04.png");
}

.topics_box{margin-bottom: 96px;}
.topics_subtitle_box h4{margin-bottom: 24px;}
.diversity_support{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.diversity_support_box{
	width: 216px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.diversity_support_box img{
	width: 168px;
	height: auto;
}
.diversity_support_box h5{
	text-align: center;
	margin-top: 16px;
	margin-bottom: 16px;
}

.step{
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	padding: 24px 24px 32px 32px;
}
.process_box .step:nth-of-type(2n-1){
	background-color: var(--bg-blue);
}
.step>p{
	width: 72px;
}
.step_r p:nth-of-type(1){
	margin-right: 16px;
	width: 136px;
}
.step_r p:nth-of-type(2){
	width: calc(100% - 108px);
}
.step_r{
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	width: calc(100% - 72px);
	margin-top: 16px;
}

/*==================================================
accordion css
===================================*/
/*アコーディオン全体*/
.accordion-area{
    list-style: none;
    width: 100%;
    max-width: 900px;
    margin:40px auto 0;
}

.accordion-area li{
    margin: 0px 0;
}

.accordion-area section {
 	margin-top: 0;
}

/*アコーディオンタイトル*/
.accordion_title {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size:var(--fz120);
    padding: 24px 50px 24px 40px;
    transition: all .4s ease;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0.075em;
}

/*アイコンの＋と×*/
.accordion_title::before,
.accordion_title::after{
    position: absolute;
    content:'';
    width: 30px;
    height: 1px;
    background-color: var(--blue);
    
}
.accordion_title::before{
    top:48%;
    right: 30px;
    transform: rotate(0deg);
    
}
.accordion_title::after{    
    top:48%;
    right: 30px;
    transform: rotate(90deg);
	transition : all 0.4s ease 0s;

}

/*　closeというクラスがついたら形状変化　*/

.accordion_title.close::before{
  transform: rotate(0deg);
}

.accordion_title.close::after{
  transform: rotate(0deg);
	transition : all 0.4s ease 0s;
}


/*アコーディオンで現れるエリア*/
.accordion_box {
    display: none;/*はじめは非表示*/
    padding: 0px 40px 40px;
}
.accordion_box  h4{}
.accordion_box p{
	font-weight: normal;
	letter-spacing: 0.075em;
}
.accordion_box p+div.link_text{
	margin-top: 8px;
}
.accordion_box div.link_text+p{
	margin-top: 16px;
}

ul.accordion-area li:nth-of-type(2n-1){
	
}

ul.accordion-area li{
	border-top: solid 1px var(--blue);
	
}
ul.accordion-area li:nth-of-type(2n){
	background-color: var(--bg-blue);
}
ul.accordion-area li:last-of-type{
	border-bottom: solid 1px var(--blue);
}
ul.accordion-area .interview_topics h4{
	position: relative;	
	padding-left: 34px;
}
ul.accordion-area .interview_topics h4:before{
	position: absolute;
	content: 'Q.';
	top: -6px;
	left:0px;
	display: block;
	font-size: var(--fz135);
	color: var(--black);
	font-family: zeitung-micro, sans-serif;
	font-weight: 300;
	font-style: italic;
}
ul.accordion-area .interview_topics p{
	padding-left: 34px;
	padding-top: 8px;
}
ul.accordion-area .interview_topics+.interview_topics{
	margin-top: 32px;
}
/*==================================================
end accordion css
===================================*/

.topics_subtitle_box_img + .topics_text{margin-top: 24px;}

@media print, screen and (max-width: 767px) {
	.topics_box{margin-bottom: 72px;}
	.diversity_support{
		flex-direction: column;
		align-items: center;
	}
	.diversity_support_box + .diversity_support_box{
		margin-top: 24px;
	}
	
	.step{
		align-items: flex-start;
		padding: 16px 20px 24px;
	}
	.step>p{
		width: 56px;
	}
	.step_r{
		width: calc(100% - 56px);
		flex-direction: column;
		align-items: flex-start;
		margin-top: 0;
	}
	.step_r p:nth-of-type(1){
		margin-right: 0;
		margin-top: 6px;
	}
	.step_r p:nth-of-type(2){
		width: 100%;
		margin-top: 8px;
	}
	
	.accordion_title{
		padding: 24px 28px 24px 24px;
	}
	.accordion_title::before, .accordion_title::after{
		width: 20px;
	}
	.accordion_title::before{
		right: 10px;
	}
	.accordion_title::after{
		right: 10px;
	}
	ul.accordion-area li:before{
		left: 8px;
	}
	.accordion_box{padding: 0px 24px 24px 24px;}
}