@charset "utf-8";

/*=====================================================
COMMON-LAYOUT
======================================================*/

.work_tab{
	max-width:910px;
	margin:0 auto;
	display: flex;
	justify-content: space-between;
	padding:60px 20px;
	position: relative;
}

.work_tab li{
	width:24%;
	transition:0.3s all ease-in-out 0s;
}

.work_tab li a{
	display: block;
	font-size:14px;
	color:#FFF;
	padding:10px 5px;
	padding:10px 5px 3px\0;
	text-align: center;
	border:1px solid #FFF;
	position: relative;
	background:#e15e15;
	transition:0.3s all ease-in-out 0s;
}

.work_tab li a:after{
	content: "";
    position: absolute;
    width: 0;
    height: 0;
    right: 4px;
    bottom: 4px;
    border: 4px solid transparent;
    border-bottom: 4px solid #FFF;
    border-right: 4px solid #FFF;
	transition:0.3s all ease-in-out 0s;
}

.work_tab li a.cr,
body:not(.mobile) .work_tab li:hover a{
	border:1px solid #e15e15;
	background:#FFF;
	color:#e15e15;
	transition:0.3s all ease-in-out 0s;
}

body:not(.mobile) .work_tab li a.cr,
body:not(.mobile) .work_tab li:hover a{
	transform:translateY(-10px);
}


.work_tab li a.cr:after,
body:not(.mobile) .work_tab li:hover a:after{
	border-bottom: 4px solid #e15e15;
    border-right: 4px solid #e15e15;	
}



@media screen and (max-width: 900px){

	.work_tab li a{
		font-size:12px;
	}
	
}

@media screen and (max-width: 480px){

	.work_tab{
		flex-wrap:wrap;
		padding:40px 20px;
	}
	
	.work_tab li{
		width:49%;
	}
	
	.work_tab li:nth-child(-n+2){
		margin-bottom:2%;
	}
	
	.work_tab li a{
		font-size:12px;
	}
	
}

@media screen and (max-width: 375px){

	
	.work_tab li a{
		font-size:11px;
		padding:8px 5px;
		letter-spacing: normal;
	}
	
}





.main_cont{
	position: relative;
	overflow: hidden;
}

.main_wrap{
	max-width:910px;
	margin:0 auto;
    padding: 20px 20px 80px;
    box-sizing: content-box;
    position: relative;
	display: flex;
	justify-content: center;
	
}

.main_wrap .main01{
	margin-top:-20px;
}


.ttl{
	font-size:32px;
	color:#e15e15;
	line-height:1.4; 
	position: relative;
	z-index:1;
}

.txt{
	font-size:13px;
	position: relative;
	z-index:1;
	line-height: 2;
}

.txt02{
	font-size:20px;
	position: relative;
	z-index:1;
	line-height: 2;
}

.sec01 .colm2{
	max-width:760px;
	margin:0 auto 150px;
	position: relative;
}

.sec01 .colm2.c2{
	margin:0 auto 60px;
	flex-wrap:wrap;
}



.sec01 .colm2.c2 li:nth-child(2){
	margin-bottom:0;
}

.sec01 .colm2.c3{
	margin:0 auto 60px;
}

.sec01 .colm2 li .txt_wrap{
	float:left;
	width:60%;
	position: absolute;
	left:2%;
	top:40%;
	transform:translateY(-50%);
	padding:30px 0 0 10px;
	z-index:1000;
}

.sec01 .colm2.no_ab li:nth-child(1){
	margin-bottom:60px;
}

.sec01 .colm2.no_ab li .txt_wrap{
	float:none;
	position: relative;
	transform:none;
	margin-bottom:0;
	width:100%;
}

.sec01 .colm2.c2 li .txt_wrap{
	float:none;
	position: relative;
	transform:none;
	
	width:100%;
	margin-bottom:60px;
}	


.sec01 .colm2 li .txt_wrap:after {
    content: url(../images/work/ttl_bg01.png);
	position: absolute;
    left:-10px;
    top:0;
	bottom:0;
    z-index:0;
	height:auto;
	visibility:visible;
}

.sec01 .colm2 li:nth-child(2){
	float:right;
	width:47.64%;
}

.sec01 .colm2.no_ab li:nth-child(2){
	float:none;
	width:100%;
}


.sec01 .colm2.c2 li:nth-child(2){
	width:100%;
}

.sec01 .colm2 li:nth-child(2).bg_white{
	background:rgba(2555,255,255,0.6);
	padding:20px 10px;
	box-sizing:border-box;
	position: relative;
}

.sec01 .colm2 li .icon{
	position: absolute;
	right:105%;
	bottom:0%;
	width: 24.31%;
	
}

.sec01 .colm2 li .icon p{
	margin-bottom:10px;
}


.sec01 .colm2 li:nth-child(2).tp_pad{
	padding-top:10%;
}

.sec01 .colm2.c3 li:nth-child(1) .txt_wrap{
	width:100%;
}

.sec01 .colm2.c3 li:nth-child(2).tp_pad{
	width:26.32%;
	padding-top:20%;
}

.sec01 .anno{
	text-align: center;
	font-size:12px;
	color:#6A5051;
	margin-bottom:80px;
}

.sec01 .anno span{
	display:block;
	font-size:10px;
}
	


.interview_wrap{
	/*
	padding-top:60px;
	margin-top:-60px;
	*/
	position: relative;
	padding-bottom:100px;
}


.interview_wrap .interview{
	text-align: center;
	position: relative;
}

.inter_bg{
	position: relative;
    margin-top: 60px;
	margin-bottom:130px;
}

.inter_bg:before{
	content:"";
	position: absolute;
	left:50%;
	top:0;
	right:0;
	bottom:0;
	display:block;
	background:#e3e0dd;
}

.inter_bg.ex:before{
	content:"";
	display:block;
	background:url("../images/work/p1/img06_bg.jpg") right bottom no-repeat;
}

.inter_wrap{
	max-width:960px;
	margin:0 auto;
	position: relative;
}

.inter_wrap .intro{
	display:flex;
	justify-content: flex-start;
	align-items: center;
}

.inter_wrap .intro li:nth-child(1){
	margin-left:90px;
}

.inter_wrap .intro li:nth-child(1) p{
	position: relative;;
}

.inter_wrap .intro li:nth-child(1) p:after{
	content: url(../images/work/ttl_bg02.png);
    position: absolute;
	left: -80px;
    top: -80px;
	z-index: 5;
}



.inter_wrap .intro li:nth-child(2){
	position: absolute;
	left:390px;
	top:50%;
	transform:translateY(-50%);
}

.inter_wrap .intro .i_txt01{
	font-size:30px;
	color:#e15e15;
	line-height: 1.4;
}

.inter_wrap .intro .inblo{
	letter-spacing: -.40em;
}

.inter_wrap .intro .i_txt02{
	display:inline-block;
	letter-spacing: normal;
	font-size:15px;
	line-height: 1.4;
	color:#6A5051;
	margin-right:10px;
}

.inter_wrap .intro .i_txt03{
	display:inline-block;
	letter-spacing: normal;
	font-size:38px;
	color:#6A5051;
	line-height: 1;
}

.ques_wrap{
	padding:0 20px;
}

.ques{
	max-width:736px;
	margin:0 auto;
}

.ques .ttl02{
    font-size: 30px;
    color: #e15e15;
    line-height: 1.6;
}

.ques .ttl03{
    font-size: 19px;
    color: #e15e15;
    line-height: 1.6;
}

.ques .illust_wrap{
	position: relative;
}

.ques .illust_wrap .txt{
	position: absolute;
	left:0;
	top:8%;
}
	

.ques .illust_cap{
	max-width:590px;
	margin:0 auto;
}

.ques sup{
	font-size:22px;
	vertical-align: top;
}

.ques .txt{
	font-size:12px;
	color:#231815;
	line-height: 1.8;
	position: relative;
}

.ques .u_line{
	display:inline-block;
	position: relative;
}

.ques .u_line:after{
	content:"";
	position: absolute;
	left:0;
	right:0;
	bottom:0;
	background:#231815;
	height:1px;
}
	
/*
.ques .u_line{
	text-decoration:underline;
}
*/
	

.blue_line{
	margin-bottom:50px;
	padding-bottom:50px;
	border-bottom:10px solid #F7B635;
}

.ques .txt02{
	font-size:15px;
}

.ques .txt03{
	font-size:11px;
	line-height: 2;
}



.ques02{
	max-width:830px;
	margin:0 auto;
	padding-left:140px;
}

.ques02 li:nth-child(1){
	float:left;
	width:50%;
}

.ques02.inter02 li:nth-child(1){
	float:none;
	width:auto;
}

.ques02 li:nth-child(2){
	float:right;
	width:46.24%;
}



@media screen and (max-width: 960px){
	
	.inter_wrap{
		/*margin-left:60px;*/
	}
	
	.inter_wrap .intro li:nth-child(2){
		left:360px;
	}
	
	.inter_wrap .intro .i_txt01{
		font-size:20px;
	}
	
	.inter_wrap .intro .i_txt02{
		font-size:12px;
	}
	
	.inter_wrap .intro .i_txt03{
		font-size:26px;
	}
	
	.ques_wrap{
		margin-left:20px;
	}
	
	.ques li p{
		font-size:18px;
	}
	
	
}


@media screen and (max-width: 768px){

	.main_wrap{
		padding:20px 20px 50px;
	}
	
	
	.ttl{
		font-size:24px;
	}
	
	.txt02{
		font-size:16px;
	}
	
	.sec01 .colm2,
	.sec01 .colm2.c3{
		margin-bottom:80px;
	}
	
	.sec01 .colm2.c2{
		margin-bottom:40px;
	}
	
	.sec01 .anno{
		margin-bottom:60px;
	}

	
	
	.inter_wrap .intro .i_txt01{
		font-size:18px;
		padding-right:20px;
	}
	
	.inter_wrap .intro .i_txt02{
		font-size:12px;
	}
	
	.interview_wrap{
		/*margin-top:40px;*/
	}
	
	.interview_wrap .interview{
		position: relative;
		text-align: center;
		z-index:2;
		width:70%;
		margin:0 auto 20px;
		left:auto;
		top:auto;
		padding:0 30px;
	}
	
	.inter_wrap{
		margin-left:0;
	}
	
	.interview_wrap:before{
		z-index:0;
		top:-40px;
	}
	
	.inter_bg{
		margin-top:30px;
		margin-bottom:50px;
	}
	
	
	.inter_wrap .intro li:nth-child(1){
		margin-left:20px;
	}
	
	.inter_wrap .intro li:nth-child(1) p:after{
		left:-20%;
	}
	
	
	.inter_wrap .intro li:nth-child(2){
		left:40%;
	}
	
	.inter_wrap .intro .i_txt02{
		font-size:12px;
	}
	
	.ques_wrap{
		margin-left:0;
	}
	
	.ques .illust_wrap .txt{
		position: absolute;
		left:0;
		top:-2%;
	}
	
	.ques sup{
		font-size:14px;
	}
	
	.ques .ttl02{
		font-size:20px;
	}
	
	.ques .ttl03{
		font-size:16px;
	}
	
	.blue_line{
		padding-bottom:30px;
		margin-bottom:30px;
	}
	
	
	

}


@media screen and (max-width: 640px){
	
	.ttl{
		font-size:20px;
	}
	
	
	.sec01 .colm2 li:nth-child(1){
		margin-bottom:30px;
	}
	
	.sec01 .colm2 li .txt_wrap{
		float:none;
		width:auto;
		position: static;
		padding:20px 0 0 10px;
		transform:none;
	}
	
	.sec01 .colm2 li:nth-child(2){
		float:none;
		width:auto;
	}
	
	
	.sec01 .colm2 li:nth-child(2).bg_white{
		background:none;
		padding:0;
	}
	
	.sec01 .colm2 li:nth-child(2) .draw{
		max-width:340px;
		margin:0 auto;
		background:rgba(255,255,255,0.6);
		padding:20px;
		margin-bottom:20px;
	}
	
	.sec01 .colm2 li .icon{
		position: static;
		max-width:200px;
		margin:0 auto;
		width:auto;
	}
	
	.sec01 .colm2 li .icon{
		position: static;
		max-width:200px;
		margin:0 auto;
		width:auto;
	}
	
	.sec01 .colm2 li .icon p:nth-child(1){
		float:left;
		width:44%;
	}
	
	.sec01 .colm2 li .icon p:nth-child(2){
		float:right;
	}
	
	
	.sec01 .colm2 li:nth-child(2).tp_pad,
	.sec01 .colm2.c3 li:nth-child(2).tp_pad{
		width:auto;
		padding-top:0;
	}
	

	
	.ques_wrap{
		margin-left:0;
		padding:0 20px;
	}
	
	.ques{
		padding-left:0;
	}
	
	.ques02{
		padding:0;
	}
	
	.ques li p{
		font-size:15px;
	}
	
	.ques li:nth-child(1){
		width:8.75%;
	}
	
	.ques li:nth-child(2) p{
		padding-left:12%;
	}
	
}


@media screen and (max-width: 600px){

	.main_wrap{
		padding:20px 20px 60px;
	}

	
	.inter_bg:before{
		display:none;
	}
	
	.inter_bg.ex:before{
		content:none;
	}
	
	.inter_wrap .intro{
		flex-wrap:wrap;
	}
	
	.inter_wrap .intro li:nth-child(1){
		width:100%;
		text-align: center;
		margin-left:0;
		margin-bottom:20px;
	}
	
	.inter_wrap .intro li:nth-child(2){
		position: static;
		padding:0 20px;
		transform:none;
	}
	
	.inter_wrap .intro .i_txt01{
		padding-right:0;
	}
	
	.ques02 li:nth-child(1){
		float:none;
		width:auto;
		margin-bottom:30px;
	}
	
	.ques02 li:nth-child(2){
		float:none;
		width:auto;
		max-width:319px;
		margin:0 auto;
		
	}
	
	
	
}



@media screen and (max-width: 480px){

	.inter_wrap .intro .i_txt01{
		font-size:18px;
	}
	
	.inter_wrap .intro .i_txt02{
		margin-bottom:10px;
	}
	
	.inter_wrap .intro .i_txt03{
		font-size:24px;
		display:block;
	}
	
	.inter_wrap .intro li:nth-child(1) p:after{
		width:35%;
		overflow:hidden;
	}
	
	.ques .txt{
		font-size:11px;
	}
	
	
	.sec01 .colm2.no_ab li:nth-child(2){
		width:auto;
	}
	
	.sec01 .colm2.no_ab li .txt_wrap{
		width:auto;
	}
	
	
	
}

@media screen and (max-width: 414px){
	
	.inter_wrap .intro .i_txt01{
		font-size:15px;
	}
	

}

@media screen and (max-width: 375px){
	
	
}




.interview_ttl {
    text-align: center;
}

.bnr_inter {
    max-width: 625px;
    margin: 0 auto 120px;
}


@media screen and (max-width: 480px){
	.interview_ttl{
		width:80%;
		margin:0 auto;
	}
}
