@charset "utf-8";

.button-container {
        text-align: center; 
        margin:0px auto 30px auto;
        width: 100%
    }
.details {
        overflow: hidden;
        max-height: 0; 
        transition: max-height 0.5s ease; 
    }

.detail-button {
        width: 100%; 
        height: auto;
        padding: 0 5% 30px 5%;
        margin:0px auto 0px auto;  cursor: pointer; 
        border: 0px;
        background-color: #F4F4F4; 

    }
    
    .close-button {
    background-color: #256534;
    color: #ffffff;
    padding: 5px 10px; 
    border: none; 
    border-radius: 3px; 
    cursor: pointer; 
    transition: background-color 0.3s ease;
   font-weight:400
}

.close-button:hover {
    background-color: #ccc; 
}
    
.details.active {
        height: max-content; 
	max-height: 1600px;
    }
.details.details_lg.active {
	max-height: 1720px;
    }
@media screen and (max-width: 767px) {
img{margin:0px;padding:0px;max-width: 100%;}
.interviewbg{width: 100%;height: 180px;padding:20px auto 100px auto;background:#85b027;}

.interview{margin:0px auto 0px auto;max-width: 860px;width:80%;padding:0px auto 30px auto;height:auto;position: relative; }
.machi{
    width:100px;
    height: 100px;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 20
}
.photo{margin:0px auto 0px auto;width:100%;padding:0px auto 30px auto;height:auto;}
.hito{
    width:100px;
    height: 100px;
    position: absolute;
    top: 150px;
    left: 0px;z-index: 20
}

.center{display: block;margin-left: auto;margin-right: auto;}

.t70{padding-top:70px;}
.t40{padding-top:20px;}
.t20{padding-top:20px;}

.title1{width:96%;height: auto;}
.title2{width:94%;height: auto;}
    
.interviewbg2{width:100%;height:auto;padding:30px auto 0px auto;background: url("../images/interview/bg.jpg") repeat;}
        
dl {
  display: flex;
  flex-wrap: wrap;
}
dl dt {
  width: 20%;
}
dl dd {
  width: 79%;
}
dl {
	margin: 0px 0px 20px 0px;
	padding: 0px 0px 0px 0px;
	text-align:left;
	color:#000;
	
}
dl dt {
	padding: 0px 0px ;
	font-weight: bold;
	line-height: 150%;
	color:#000;margin: 0px 0px 0px 0px;
}
dl dd {
	padding: 0px 0px 0px 0;
	line-height: 150%;
	text-align:left;
	color:#85b027;margin: 0px 0px 0px 0px;font-size:110%
}
    
.circle {
color: #fff;
background-color:#256534;
padding: 0;
margin: 0 0 0 0;
width: 50px;
height: 30px;
line-height: 25px;
text-align: center;
display: inline-block;
border-radius: 20%;
}
    
.textbg{max-width: 1060px;width:86%;height: auto;padding:30px 5% 10px 5%;border-radius: 20px 20px 20px 20px;margin:30px auto 0px auto; background:#fff;box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .1);font-weight: 600;}
    
.clearfix::after {content: “”;display: block;lear: both;}
.text1{width:100%;padding:0px 0px 0px 0px;margin:0px auto 0px auto;}
.text1-left{width:100%;padding:0px 0px 0px 0px;margin:0px auto 0px auto;}
.text1-right{ width:100%;padding:20px 0px 0px 0px;margin:0px auto 15px auto;text-align: center;}
    

.text2{width:100%;padding:0px 0 30px 0;margin:0px auto 0px auto;}
.text2-left{width:100%;padding:0px 0px 30px;margin:50px auto 0px auto;border-bottom: 2px dotted #000;line-height:160%;text-align: justify;text-justify: inter-ideograph; }
.text2-right{width:100%;padding:0px 0px 0px 0px;margin:30px auto 0px auto;line-height:160%;text-align: justify;text-justify: inter-ideograph;  }
.textbg2{max-width: 1060px;width:90%;text-align: left; padding:30px 5% 10px 5%;border-radius: 20px 20px 20px 20px;margin:10px auto 20px auto; background:#256534;box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .1);font-size:100%;font-weight: 600;color:#fff;line-height:170%}
.textbg2-right{width:100%;padding:30px 0px 0px 0px;margin:0px auto 0px auto;text-align:center}
.interviewcap{width:90%;text-align:left; padding:10px 0px 50px 0px;margin:0px auto 0px auto; font-size:70%;font-weight: 400;color:#000}
.yellow{color:#faee00}
.text11{width:200px;padding:5px 5px 5px 5px;border-radius: 10px 10px 10px 10px;margin:20px auto 20px auto; background:#000;box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .1);font-weight: 400;color:#fff;text-align:center;border: 1px solid #fff;}
.gfont{color:#85b027}
}

.clearfix:after{
	content: "";
	clear: both;
	display: block;
}
@media screen and (min-width: 767px) {

img{margin:0px;padding:0px;}
.interviewbg{width: 100%;height: 280px;padding:20px auto 100px auto;background:#85b027;}
    
.gfont{color:#85b027}
.interview{margin:0px auto 0px auto;max-width: 860px;width:80%;padding:0px auto 30px auto;height:auto;position: relative; z-index:20}
.machi{
    max-width:13vw;
    width:13vw;
    height: auto;
    position: absolute;
    top: 0px;
    right: -100px; 
}
.photo{margin:0px auto 0px auto;width:100%;padding:0px auto 30px auto;height:auto;}
.hito{
    max-width:13vw;
    width: 13vw;
    height: auto;
    position: absolute;
    top: 220px;
    left: -100px;
}

.center{display: block;margin-left: auto;margin-right: auto;}
    
.t70{padding-top:70px;}
.t40{padding-top:40px;}
.title1{width:87%;height: auto;}
.title2{width:77%;height: auto;}
    
.t10{padding-top:10px;}
.t20{padding-top:20px;}


    
.interviewbg2{width:100%;height:auto;ppadding:30px auto 30px auto;background: url("../images/interview/bg.jpg") repeat;}
    
.textbg{max-width: 1060px;width:80%;padding:40px 30px 10px 30px;border-radius: 20px 20px 20px 20px;margin:50px auto 0px auto; background:#fff;box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .1);font-weight: 600;;height:auto;}
    
.clearfix::after {content: “”;display: block;clear: both;}
.text1{width:96%;padding:0px 2% 0px 2%;margin:0px auto 10px auto;height:auto;}
.text1-left{float:left; width:35%;padding:20px 0px 0px 1%;margin:0px auto 0px auto;}
.text1-right{float:right; width:55%;padding:20px 2% 0px 0px;margin:0px auto 0px auto;text-align:right }
    

.text2{width:90%;padding:0px 0% 30px 0%;margin:20px auto 0px auto;height:auto;}
.text2-left{float:left;width:calc( 48% - 2px );padding:0px 6% 0px 0px;margin:20px auto 0px auto;border-right: 2px dotted #000;font-size:100%;line-height:190%;text-align: justify;text-justify: inter-ideograph;}
.text2-right{float:right;width:calc( 46% - 2px );padding:0px 0px 0px 0%;margin:20px auto 0px auto;font-size:100%;line-height:190%;text-align: justify;text-justify: inter-ideograph;}
    
.textbg2{max-width: 1050px;width:90%;text-align: left; padding:20px 30px 30px 30px;border-radius: 20px 20px 20px 20px;margin:50px auto 20px auto; background:#256534;box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .1);font-size:100%;font-weight: 600;color:#fff}
    
.textbg22{width:100%;min-height:190px;height:auto;}
    
.textbg2-left{float:left;width:65%;padding:0px 1% 0px 1%;margin:0px auto 0px auto;line-height:190%;text-align: justify;text-justify: inter-ideograph;}
.textbg2-right{float:right;width:34%;padding:70px 0px 0px 0px;margin:0px auto 0px auto;text-align:right }
    
.interviewcap{max-width: 1080px;width:80%;text-align:right; padding:10px 0% 70px 0%;margin:0px auto 0px auto; font-size:80%;font-weight: 400;color:#000}
    
.text11{width:200px;padding:5px 5px 5px 5px;border-radius: 10px 10px 10px 10px;margin:25px 0 10px 0; background:#000;box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .1);font-weight: ４00;color:#fff;text-align:center;border: 1px solid #fff;}
    
dl {
  display: flex;
  flex-wrap: wrap;
}
dl dt {
  width: 15%;
}
dl dd {
  width: 80%;
}
dl {
	margin: 0px 0px 20px 0px;
	padding: 0px 0px 0px 0px;
	text-align:left;
	color:#000;
	
}
dl dt {
	padding: 0px 0px ;
	font-weight: bold;
	line-height: 150%;
	color:#000;margin: 0px 0px 0px 0px;
}
dl dd {
	padding: 0px 0px 0px 0;
	line-height: 150%;
	text-align:left;
	color:#85b027;margin: 0px 0px 0px 0px;font-size:110%
}
    
.circle {
color: #fff;
background-color:#256534;
padding: 0 0 0px 0;
margin: 0 0 0 0;
width: 50px;
height: 30px;
line-height: 25px;
text-align: center;
display: inline-block;
border-radius: 20%;font-size:100%
}
    
    
}
    

 @media only screen and (min-width:768px) and (max-width:1000px) {
     

    .clearfix::after {content: “”;display: block;clear: both;}
.textbg{width:80%;height:auto;padding:30px 5% 10px 5%x;border-radius: 20px 20px 20px 20px;margin:50px auto 0px auto; background:#fff;box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .1);font-weight: 600;}
.text2{width:94%;padding:30px 2% 30px 2%;margin:30px auto 0px auto;}
     
.text2-left{float:left;width:49%;padding:0px 3.5% 0px 0px;margin:50px auto 0px auto;border-right: 2px dotted #000;font-size:90%;line-height:170% }
.text2-right{float:right;width:47%;padding:0px 0px 0px 0px;margin:50px auto 0px auto;font-size:90%;line-height:170% }
     
.textbg2{width:80%;text-align: left; padding:30px 5% 30px 5%;border-radius: 20px 20px 20px 20px;margin:50px auto 10px auto; background:#256534;box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .1);font-size:90%;font-weight: 600;color:#fff}
 .text11{width:200px;padding:5px 5px 5px 5px;border-radius: 10px 10px 10px 10px;margin:0px 0 20px 0; background:#000;box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .1);font-weight: 400;color:#fff;text-align:center;}
    

.textbg22{width:100%;height:auto;}
.textbg2-left{float:left;width:58%;padding:0px  0px 40px 10px;margin:0px auto 0px auto;}
.textbg2-right{float:right;width:40%;padding:40px 0px 40px 0px;margin:0px auto 0px auto;text-align:right }
     
.interviewcap{max-width: 1060px;width:90%;text-align:left; padding:10px 0px 70px 0px;margin:0px auto 0px auto; font-size:80%;font-weight: 400;color:#000}

.text2-left{font-size:90%}
.text2-right{font-size:90%}
.textbg{height: 840px;}
.t40{padding-top:20px;}
.machi{
    width:14vw;
    height: auto;
    position: absolute;
    top: 20px;
    right: 0px; 
}
.photo{margin:0px auto 0px auto;width:100%;padding:0px auto 30px auto;height:auto;}
.hito{
    width: 15vw;
    height: auto;
    position: absolute;
    top: 220px;
    left: 0px;
}

}
   

/*===プロモ追加＝＝＝＝*/

#corpo {
	display: none;
}

#result {
	margin-top: 150px;
	padding-bottom: 80px;
}

.inter11 {
	display: block!important;
}
@media screen and (min-width:768px) and ( max-width:1024px)  { 

	#result {
		padding-top: 50px;
		padding-bottom: 50px;
	}	
}




@media screen and (min-width: 767px) {

    .voice_p .details.active{
        max-height: 2000px;
    }
    .voice_p .leftcopy{
        margin-right: -22%;
    }
    .voice_p .text2-left{
        width: calc(393% / 9);
        padding: 0px 6% 0px 0px;
        box-sizing: content-box;
    }
    .voice_p .text2-right{
        width: calc(393% / 9);
    }

    .voice_p .text2-left .adjust01{
        letter-spacing: -0.01em;
    }
    .voice_p .text2-left .adjust02{
        letter-spacing: -0.02em;
    }
    .voice_p .text2-left .adjust03{
        letter-spacing: -0.03em;
    }
    
    
    .voice_p .txt_flex {
        display: flex;
        justify-content: space-between;
        max-width: 393px;
    }
    .voice_p .txt_flex .flex_txt{
        width: calc(152% / 3.93);
    }
    .voice_p .txt_flex .flex_img{
        width: calc(221% / 3.93);
    }
    
}
@media screen and (max-width: 766px) {
	.border_bottom_sp{
		padding-bottom: 30px;
        border-bottom: 2px dotted #000;
	}
    .voice_p .details.active{
        max-height: 4500px;
    }
    .voice_p .txt_flex {
        padding-top: 20px;
    }
    .voice_p .txt_flex .flex_img{
        max-width: 221px;
        padding-top: 20px;
        margin: 0 auto;
    }
    
}