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

#ditail .houto_w { 
	padding: 80px 0 0!important;
}
.houto_w .text {
	color:#333;
	line-height: 1.6!important;
}
#ditail .houto_w h4 { color: #fff; margin-bottom: 56px;}
#ditail .houto_w h4 span { color: #fff;}
/* #ditail .houto_w .use { margin-bottom: 160px;} */
#ditail .houto_w .flex { display: flex; justify-content: space-between; align-items: start; padding: 0 0 50px;}
#ditail .houto_w .flex_r { flex-flow: row-reverse;}

#ditail .houto_w .flex_block { display: block;}
#ditail .houto_w .flex .houimg { width: 50%; height: auto;}
#ditail .houto_w .flex .txtbox { width: 480px; color: #fff; letter-spacing: 0.06em;}
#ditail .houto_w .flex_block .txtbox { width: 100%; margin-bottom: 24px;}
#ditail .houto_w .flex .txtbox .bold { font-size: 36px; line-height: 1.333; font-weight: 700; margin-bottom: 24px;}
#ditail .houto_w .flex .txtbox .middle { font-size: 26px; line-height: 1.333; font-weight: 500; margin-bottom: 20px;}
#ditail .houto_w .flex .txtbox .text { font-size: 16px; line-height: 2; letter-spacing: 0.06em; word-break: break-word;}

#ditail .houto_w .flex_column { display: flex; flex-direction: column;}

#ditail .houto_w .flex .fourimg { width: 40%;}
#ditail .houto_w .clear {clear: both;}

#ditail .houto_w .flex_cr {flex-direction: column-reverse;}
#ditail .houto_w .flex_cr .houimg{width: 100%;}
#ditail .houto_w .flex_cr .txtbox{width: 100%; margin-bottom: 24px;}
#ditail .houto_w .flex_cr .imgbox { display: flex; justify-content: center;}
#ditail .houto_w .flex_cr .imgbox img{ width: calc(100% / 3); aspect-ratio: 1/1;}

#ditail .houto_w .flex_cr .imgbox .aspectimg{ aspect-ratio: initial;}

#ditail .houto_w .flex_cr .clm-2 { width: 100% }
#ditail .houto_w .flex_cr .clm-2 img{ width: calc(100% / 2); aspect-ratio: initial;}

#ditail .houto_w .flot {display: block; clear: both;}
#ditail .houto_w .flot .houimg{ float: right; padding-left: 20px; padding-bottom: 20px;}
#ditail .houto_w .flot-left { float: left !important; padding-left: 0px !important; padding-right: 20px;}
 .sp-img{ display: none;}
 .pc-img{display: block;}
#ditail .houto_w .flot .txtbox{ width: 100%;}


#ditail .houto_w .comment { position: relative; width: 900px; padding: 40px; background: #fff; border-radius: 10px; display: flex; justify-content: space-between; align-items: flex-start; margin: 160px auto 0;}
#ditail .houto_w .comment .balloon { position: absolute; left: 50%; top: -135px; transform: translateX(-50%); -webkit-transform: translateX(-50%); width: 266px; padding: 14px 0; text-align: center; background: #fec901; font-size: 40px; font-weight: 700; border-radius: 10px;}
#ditail .houto_w .comment .balloon:after { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); -webkit-transform: translateX(-50%); content: ""; display: block; height: calc(20px / 2 * tan(60deg)); width: 20px; clip-path: polygon(0 0, 100% 0, 50% 100%); background: #fec901;}

#ditail .houto_w .comment .balloon span {display: block; font-size: 16px; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 6px;}

#ditail .houto_w .comment .left { width: 140px;}
#ditail .houto_w .comment .left .icn { display: block; margin-bottom: 14px;}
#ditail .houto_w .comment .left small { display: block; font-size: 16px; letter-spacing: 0.06em; text-align: center;}
#ditail .houto_w .comment .right { width: 100%;;}
#ditail .houto_w .comment .right .bold { font-size: 24px; font-weight: 700; line-height: 1.5; padding: 0 0 20px; text-align: center; }
#ditail .houto_w .comment .right .text { font-size: 16px; line-height: 2; letter-spacing: 0.06em; font-feature-settings: "palt";}

#ditail .houto_w .surround .flex .txtbox .bold{
    font-size: 30px;
}

#ditail .houto_w .surround .flex .txtbox .text{
  font-size: 14px;
}

.mt-gd {
	margin-top: 100px;
}

.question{
	padding: 2em 0;
}

.question p {
	font-size:1.2em!important;
	font-weight: 600;
	margin-left: 1em;
	text-indent:-1em;
	line-height: 1.5!important;
}

.ct_img {
	margin: 0.5em 1em 0 0;
	text-align: center;
	width:10%!important;
	height: auto;
}
.ct_img2 {
	margin: 0.5em 1em 0 0;
	width:22%!important;
	height: auto;
	
}
.ct_img img {
	width: 100%;
	height: auto;
}
.ct_img2 img {
	width: 100%;
	height: auto;
}


.crosstalk {
margin: 0 0 -16px 0!important;
width:100%;
}
.crosstalk .text {
	width: 90%!important;
	text-align: justify;
	margin-top: 0.5em;
	line-height: 1.5!important;
}
.caption_click14{
  line-height: 1.6;
    color: #ffffff !important;
    font-size: 13px;
	padding:0 0 3em 0;
		text-align: justify;
}

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

#ditail .houto_w { 
	padding: 40px 0 0!important;
}	  
	  
  #ditail .houto_w .surround .flex .txtbox .bold{
    font-size: 16px;
  }

  #ditail .houto_w .surround .flex .txtbox .text{
  font-size: 11px;
  }	  
#ditail .houto_w { padding: 90px 0 50px; overflow: hidden;}
#ditail .houto_w h4 { color: #fff; margin-bottom: 30px;}
#ditail .houto_w .flex { display: block;}
#ditail .houto_w .flex:last-child { margin-bottom: 0;}
#ditail .houto_w .flex_r { flex-flow: row-reverse;}
#ditail .houto_w .flex_block { display: block;}
#ditail .houto_w .flex_block .txtbox { width: 100%;}
#ditail .houto_w .flex .houimg { width: 100%; height: auto; margin-bottom: 20px;}
#ditail .houto_w .flex .txtbox { width: 100%; color: #fff; letter-spacing: 0.06em;}
#ditail .houto_w .flex .txtbox .bold { font-size: 20px; margin-bottom: 15px;}
#ditail .houto_w .flex .txtbox .middle { font-size: 16px; margin-bottom: 12px;}
#ditail .houto_w .flex .txtbox .text { font-size: 13px; line-height: 1.9;}

#ditail .houto_w .comment { width: 100%; padding: 20px; display: block; margin: 110px auto 0;}
#ditail .houto_w .comment .balloon { position: absolute; left: 50%; top: -110px; width: 200px; padding: 12px 0; text-align: center; background: #fec901; font-size: 30px;}
#ditail .houto_w .comment .balloon:after { bottom: -16px; height: calc(20px / 2 * tan(60deg)); width: 20px;}

#ditail .houto_w .comment .balloon span {font-size: 13px; margin-bottom: 7px;}

#ditail .houto_w .comment .left { width: 140px; margin: 0 auto 10px;}
#ditail .houto_w .comment .left .icn { display: block; margin-bottom: 14px;}
#ditail .houto_w .comment .left small { font-size: 13px;}
#ditail .houto_w .comment .right { width: 100%;}
#ditail .houto_w .comment .right .bold { font-size: 18px; line-height: 1.5; margin-bottom: 5px;}
#ditail .houto_w .comment .right .text { font-size: 13px; line-height: 1.9;}
	  
.mt-gd {
	margin-top: 50px;
}	  
.question{
	padding: 1.5em 0 0 0!important;
}	  
.question p{
	font-size:1.0em!important;
	font-weight: 600;
	  }
.ct_img {
	margin: 0.5em 1em 0 0;
	width:50px!important;
	height: auto;
	
}	
.ct_img2 {
	margin: 0.5em 1em 0 0;
	width:100px!important;
	height: auto;
	}
	  
.crosstalk {
margin: 0 0 -40px 0!important;
width:100%;
}	  
	  
.crosstalk .text {
	width: 100%!important;
}
.caption_click14{
 line-height: 1.5;
 font-size: 11px;
padding:0 0 3em 0;

  }
}