@charset "utf-8";

#voice-list .inner-sct { padding: 90px 0 150px;}
#voice-list .ctn { display: flex; flex-wrap: wrap; width: 92%; max-width: 1200px; margin: 0 auto 80px;}
#voice-list .box { width: 33.333334%; padding: 20px;}
#voice-list .box a { position: relative; display: block; width: 100%; max-width: 480px; border: solid 0.5px #969696; text-decoration: none;}
#voice-list .box a span.sp-no { display: none; width: 24px; height: 24px;
 position: absolute; right: 20px; top: 20px; background: #00b4a5; border-radius: 50%;
 color: #fff; font-size: 20px; line-height: 24px; text-align: center; text-indent: -0.1em;
}
#voice-list .box a figure { position: relative; width: auto; height: 100%; padding-top: 104%; overflow: hidden;}
#voice-list .box a figure img { position: absolute; left: 50%; top: 50%; min-width: 100%; height: 100%; transition: 0.3s ease; transform: translate(-50%,-50%);}
#voice-list .box a figure img.none { min-width: 80%; height: auto;}
#voice-list .box a dl { position: relative; width: 100%; padding: 20px 40px 30px;}
#voice-list .box a dl dt { min-height: 6.5em; font-size: clamp(14px,1.2vw,18px); line-height: 1.8; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px;}
#voice-list .box a dl dd.city { position: relative; margin-bottom: 10px; padding-left: 28px; font-size: clamp(12px,1.4vw,14px);}
#voice-list .box a dl dd.city:before { content: ''; display: block; width: 20px; height: 20px; border-radius: 50%;
	border: solid 5px #006e78; position: absolute; left: 0; top: 0.15em;
}
#voice-list .box a dl dd.aside { position: relative; padding-left: 16px; font-size: clamp(12px,1.2vw,16px); line-height: 1;}
#voice-list .box a dl dd.aside span.no { display: block; width: 20px; height: 20px; background: #00b4a5; border-radius: 50%;
 position: absolute; left: 0; top: 0;
 color: #fff; font-size: clamp(10px,1.6vw,16px); line-height: 20px; text-align: center; text-indent: -0.1em;
}
#voice-list .box a dl dd.aside span.tag,
#voice-list .box a dl dd.aside time { display: inline-block; padding: 0 15px; font-size: clamp(12px,1.2vw,16px);}
#voice-list .box a dl dd.aside span.tag { border-right: solid 1px #969696;}

#voice-list .box a:hover figure img { opacity: 0.8; transform: translate(-50%,-50%) scale(1.08)}
#voice-list .box a:hover dl dt { text-decoration: none;}
@media (max-width: 1281px) {
	#voice-list .box { padding: 12px;}
	#voice-list .box a dl { padding: 20px 30px 30px;}
	#voice-list .box a dl dt { margin-bottom: 10px;}
}
@media (max-width: 801px) {
	#voice-list .inner-sct { padding: 50px 0px 60px;}
	#voice-list .ctn { margin-bottom: 50px;}
	#voice-list .box { width: 50%;}
	#voice-list .box a dl dt { min-height: 5.8em; font-size: 2.0vw;}
	#voice-list .box a dl dd.city { margin-bottom: 20px;}
}
@media (max-width: 481px) {
	#voice-list .inner-sct { padding: 40px 0px 60px;}
	#voice-list .ctn { margin-bottom: 30px;}
	#voice-list .box { padding: 6px;}
	#voice-list .box a dl { padding: 8px 12px 15px;}
	#voice-list .box a dl dt { font-size: 11px; text-underline-offset: 3px; text-decoration-thickness: 1px;}
	#voice-list .box a dl dt br { display: none;}
	#voice-list .box a dl dd.city { margin-bottom: 6px; padding-left: 16px; font-size: 10px;}
	#voice-list .box a dl dd.city:before { width: 12px; height: 12px; border-width: 3px; top: 0.15em;}
	#voice-list .box a dl dd.aside { padding-left: 18px; font-size: 10px;}
	#voice-list .box a dl dd.aside span.no { width: 12px; height: 12px; font-size: 10px; line-height: 12px;}
	#voice-list .box a dl dd.aside span.tag { padding: 0; padding-right: 6px;}
	#voice-list .box a dl dd.aside time { padding: 0; padding-left: 6px; font-size: 10px;}
}




#voice .inner-sct { padding: 80px 0 0px;}
#voice .article-hd { width: 88%; max-width: 900px; margin: 0 auto 20px;}
#voice .article-hd h1 { margin-bottom: 30px; font-size: clamp(24px,3.6vw,36px); letter-spacing: 0.15rem; line-height: 1.4;}
#voice .article-hd h1 span { display: block; margin-bottom: 15px; font-size: 18px;}

#voice .article-ctn {}

#voice .main { width: 88%; max-width: 900px; margin: 0 auto; padding-bottom: 60px;}
#voice .main figure { margin-bottom: 20px;}
#voice .main figure img { width: 100%;}
#voice .main p { margin-bottom: 20px; font-size: 18px; letter-spacing: 0.1rem; line-height: 1.8;}
#voice .main ul { width: 100%; max-width: 720px; margin: 0 auto; padding: 20px 0; font-size: 0; text-align: center;}
#voice .main ul li { display: inline-block; width: 50%; padding: 18px; font-size: 20px;}
#voice .main ul li a { display: block; width: 100%; margin: 0 auto; padding: 20px 0; border: solid 1px #191919;
 color: #373737; letter-spacing: 0.15rem; line-height: 1; text-decoration: none; transition: 0.3s ease;
}
#voice .main ul li a:hover { background: #373737; color: #fff;}

#voice .stl {}
#voice .stl h3 { font-weight: 400; text-align: center;}
#voice .stl h3 span { display: inline-block; line-height: 1; vertical-align: baseline;}
#voice .stl h3 span.eng { margin-right: 20px; color: #00b4a5; font-size: clamp(30px,6.0vw,50px); letter-spacing: 0.08rem;}
#voice .stl h3 span.jp { font-size: clamp(20px,3.0vw,30px); letter-spacing: 0.15rem;}


#voice .story { background: #f5fcfb;}
#voice .story .ctn { width: 88%; max-width: 900px; margin: 0 auto; padding: 80px 0;}
#voice .story .stl { margin-bottom: 30px;}
#voice .story .tit { padding: 12px 0; border-bottom: dashed 1px #969696;}
#voice .story .tit h3 { font-size: clamp(18px,2.4vw,24px); letter-spacing: 0.15rem; line-height: 1.4;}
#voice .story .txt { padding: 20px 0;}
#voice .story .txt.mb { margin-bottom: 40px;}
#voice .story .txt figure { margin-bottom: 12px;}
#voice .story .txt figure img { width: 100%;}
#voice .story .txt p { font-size: 18px; letter-spacing: 0.1rem; line-height: 1.8;}
#voice .story .txt p.descript { font-size: 16px; letter-spacing: 0.05rem;}


#voice .housing .ctn { width: 88%; max-width: 900px; margin: 0 auto; padding: 80px 0;}
#voice .housing .stl { margin-bottom: 30px;}
#voice .housing .data { display: flex; justify-content: space-between;}
#voice .housing .data ul { width: 48.5%; border-top: solid 0.5px #969696;}
#voice .housing .data ul li { padding: 10px; border-bottom: solid 0.5px #969696; font-size: 16px;}
#voice .housing .data ul li dl { display: table; width: 100%;}
#voice .housing .data ul li dl dt,
#voice .housing .data ul li dl dd { display: table-cell; }
#voice .housing .data ul li dl dt { width: 180px;}
#voice .housing .data ul li dl dd { width: auto;}
#voice .housing .data ul li dl dd sup { font-size: 10px; vertical-align: super;}

#voice .pager-nav { background: #efefef;}
#voice .pager-nav .inner { position: relative; width: 88%; max-width: 1040px; margin: 0 auto; padding: 100px 200px;}
#voice .pager-nav .prev,
#voice .pager-nav .next { position: absolute; width: 180px; top: 50%; transform: translateY(-50%);}
#voice .pager-nav .prev { left: 0;}
#voice .pager-nav .next { right: 0;}
#voice .pager-nav .prev a,
#voice .pager-nav .next a { position: relative; width: 180px; text-decoration: none;}
#voice .pager-nav .prev a:before,
#voice .pager-nav .next a:after { content: ''; display: block; width: 12px; height: 24px; position: absolute; top: 30%;}
#voice .pager-nav .prev a:before{ left: -20px; background: url('/img/arw-L-s.svg') no-repeat 50% 50% / 100% auto;}
#voice .pager-nav .next a:after { right: -20px; background: url('/img/arw-R-s.svg') no-repeat 50% 50% / 100% auto;}
#voice .pager-nav .prev a img,
#voice .pager-nav .next a img{ display: block; width: 100%; margin-bottom: 8px;}
#voice .pager-nav .prev a span,
#voice .pager-nav .next a span{ display: block; text-align: center;}
#voice .pager-nav .prev a:hover,
#voice .pager-nav .next a:hover { opacity: 0.8}

#voice .pager-nav .btn-back { width: 80%; max-width: 300px; margin: 0 auto;}
#voice .pager-nav .btn-back a { display: block; border: solid 1px #373737;
 color: #373737; font-size: clamp(14px,1.8vw,18px); letter-spacing: 0.15rem; line-height: 1.4; text-align: center; text-decoration: none; transition: 0.3s ease;
}
#voice .pager-nav .btn-back a span { display: block; padding: 12px 0; text-align: center;}
#voice .pager-nav .btn-back a:hover{ background: #373737; color: #fff;}
@media (max-width: 1281px) {
	#voice .main p { font-size: 16px;}

	#voice .story .txt p { font-size: 16px;}
	#voice .story .txt p.descript { font-size: 14px;}

	#voice .housing .data ul li { font-size: 14px;}
	#voice .housing .data ul li dl dt { width: 150px;}
}
@media (max-width: 801px) {
	#voice .inner-sct { padding: 40px 0 0px;}
	#voice .article-hd h1 { margin-bottom: 20px;}
	#voice .article-hd h1 span { margin-bottom: 12px; font-size: 14px;}

	#voice .main { padding-bottom: 40px;}
	#voice .main p { font-size: 14px;}
	#voice .main ul { padding: 12px 0;}
	#voice .main ul li { padding: 10px; font-size: 18px;}
	#voice .main ul li a { padding: 16px 0; letter-spacing: 0.1rem;}

	#voice .stl h3 { text-align: left;}
	#voice .stl h3 span.eng{ margin-right: 12px;}

	#voice .story .ctn { padding: 60px 0;}
	#voice .story .stl { margin-bottom: 12px;}
	#voice .story .txt.mb { margin-bottom: 30px;}
	#voice .story .txt p { font-size: 14px;}
	#voice .story .txt p.descript { font-size: 13px;}

	#voice .housing .ctn { padding: 60px 0;}
	#voice .housing .stl { margin-bottom: 20px;}
	#voice .housing .data { display: block;}
	#voice .housing .data ul { width: 100%;}
	#voice .housing .data ul:nth-child(2) { border-top: none;}

	#voice .pager-nav .inner { padding: 80px 150px;}
	#voice .pager-nav .prev,
	#voice .pager-nav .next { position: absolute; width: 150px;}
	#voice .pager-nav .btn-back a span { padding: 10px 0;}
}
@media (max-width: 481px) {
/*	#works .inner-sct { padding: 40px 0 0px;}*/
	
	#voice .article-hd {}
	#voice .article-hd h1 { margin-bottom: 12px; font-size: 18px; letter-spacing: 0.1rem;}
	#voice .article-hd h1 span { font-size: 12px;}

	#voice .main { padding-bottom: 20px;}
	#voice .main figure { margin-bottom: 12px;}
	#voice .main p { margin-bottom: 12px; letter-spacing: 0.05rem;}
	#voice .main ul li { font-size: 15px;}
	#voice .main ul li a { padding: 12px 0; letter-spacing: 0.05rem;}


	#voice .stl h3 span {}
	#voice .stl h3 span.eng{ font-size: 24px; letter-spacing: 0.05rem;}
	#voice .stl h3 span.jp { font-size: 13px; letter-spacing: 0.1rem;}

	#voice .story .ctn { padding: 40px 0 30px;}
	#voice .story .stl { margin-bottom: 6px;}
	#voice .story .tit { padding: 8px 0;}
	#voice .story .tit h3 { font-size: 16px; letter-spacing: 0.1rem;}
	#voice .story .txt { padding: 15px 0;}
	#voice .story .txt.mb { margin-bottom: 20px;}
	#voice .story .txt figure { margin-bottom: 6px;}
	#voice .story .txt p { font-size: 13px; letter-spacing: 0.05rem;}
	#voice .story .txt p.descript { font-size: 12px; letter-spacing: 0rem;}

	#voice .housing .ctn { padding: 40px 0;}
	#voice .housing .stl { margin-bottom: 12px;}
	#voice .housing .data ul li { padding: 6px; font-size: 12px;}
	#voice .housing .data ul li dl dt { width: 130px;}

	#voice .pager-nav .inner { padding: 40px 100px;}
	#voice .pager-nav .prev,
	#voice .pager-nav .next { position: absolute; width: 90px;}
	#voice .pager-nav .prev a:before,
	#voice .pager-nav .next a:after { width: 8px; height: 18px; top: 26%;}
	#voice .pager-nav .prev a:before{ left: -14px;}
	#voice .pager-nav .next a:after { right: -14px;}
	#voice .pager-nav .prev a img,
	#voice .pager-nav .next a img{ margin-bottom: 4px;}
	#voice .pager-nav .prev a span,
	#voice .pager-nav .next a span{ font-size: 12px;}

	#voice .pager-nav .btn-back a { font-size: 13px; letter-spacing: 0.05rem;}
	#voice .pager-nav .btn-back a span { padding: 6px 0;}

}