@charset "utf-8";


#voice-list { background: #ebebeb;}
#voice-list .inner-sct { padding: 40px 0 120px;}
#voice-list .ctn-flex { display: flex; justify-content: space-between; flex-wrap: wrap; width: 88%; max-width: 1280px; margin: 0 auto 60px;}
#voice-list .box { position: relative; width: 30%; max-width: 420px; padding: 30px 0;}
#voice-list .box .inner { position: relative; display: block; height: 100%; background: #fff; border: solid 3px #FFB300; border-radius: 20px; box-shadow: 10px 10px 0 #FFB300;}
#voice-list .box .inner:after { content: ''; display: block; width: 42px; height: 36px;
/*background: url('/img/fukidashi2.svg') no-repeat 50% 100% / 100% auto;*/
 position: absolute; right: 40px; bottom: -35px;
 background-image: url( 'data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47 60"><path d="M582.975,6596.009s22.121,18.529,0,35.4,42.343,3.731,42.343-35.4S582.975,6596.009,582.975,6596.009Z" transform="translate(-578.353 -6578.617)" fill="%23ffffff"/></svg>' );
 background-size: 100% auto; background-position: 50% 100%; background-repeat: no-repeat;
}
#voice-list .box a { position: relative; display: block; padding: 30px 25px; height: 100%; background: #fff; border-radius: 16px; color: #003C88; text-decoration: none;}
#voice-list .box figure { position: relative; width: 100%; padding-top: 76%; margin-bottom: 20px; text-align: center; overflow: hidden;}
#voice-list .box figure img { position: absolute; left: 50%; top: 50%; width: 112%; transform: translate(-50%,-50%); transition: 0.3s linear;}
#voice-list .box p { display: block; letter-spacing: 0.05rem;}
#voice-list .box p.tit { position: relative; margin-bottom: 8px; padding-left: 45px; font-size: 21px; font-size: min(1.35vw,21px); font-weight: 700; letter-spacing: 0.1rem;}
#voice-list .box p.tit:before { content: ''; display: block; width: 32px; height: 100%;
/*background: url('/img/icn-heart.svg') no-repeat 50% 20% / 100% auto;*/
 position: absolute; left: 0; top: 0;
  background-image: url( 'data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 44"><path d="M36.9,0c-5.229.1-8.323,3.189-10.4,6.235A1.964,1.964,0,0,1,25,7.18a1.962,1.962,0,0,1-1.507-.942C21.419,3.191,18.326.1,13.1,0,6.233-.138,0,4.856,0,15.88c0,10.867,9.344,18.577,15.107,22.5a51.146,51.146,0,0,0,8.543,4.491A6.311,6.311,0,0,0,25,43.141a6.281,6.281,0,0,0,1.349-.267,51.182,51.182,0,0,0,8.544-4.491C40.656,34.457,50,26.746,50,15.88,50,4.856,43.766-.138,36.9,0M11.4,26.728a1.572,1.572,0,0,1-2.192-.366,14.675,14.675,0,0,1-2.615-6.084,20.481,20.481,0,0,1-.308-3.368,11.608,11.608,0,0,1,.341-2.92,1.571,1.571,0,0,1,3.039.794,8.459,8.459,0,0,0-.239,2.126,17.174,17.174,0,0,0,.265,2.845,11.523,11.523,0,0,0,2.075,4.782,1.571,1.571,0,0,1-.366,2.191M13.525,7.944A4.243,4.243,0,0,0,12.4,8.89,1.57,1.57,0,1,1,9.964,6.906,7.416,7.416,0,0,1,11.9,5.257a1.57,1.57,0,0,1,1.626,2.687" fill="%23ffb300"/></svg>' );
 background-size: 100% auto; background-position: 50% 20%; background-repeat: no-repeat;
}
#voice-list .box p.txt {}
#voice-list .box a:hover figure img {  transform: translate(-50%,-50%) scale(1.05);}
#voice-list .box a:hover { background: #FFB300;}
#voice-list .box a:hover figure img {  transform: translate(-50%,-50%) scale(1.05);}
#voice-list .box .inner:hover { box-shadow: 12px 12px 0 #FFF;}
#voice-list .box .inner:hover:after {
 background-image: url( 'data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47 60"><path d="M582.975,6596.009s22.121,18.529,0,35.4,42.343,3.731,42.343-35.4S582.975,6596.009,582.975,6596.009Z" transform="translate(-578.353 -6578.617)" fill="%23FFB300"/></svg>' );
 background-size: 100% auto; background-position: 50% 100%; background-repeat: no-repeat;
}
#voice-list .box .inner:hover p.tit:before { 
  background-image: url( 'data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 44"><path d="M36.9,0c-5.229.1-8.323,3.189-10.4,6.235A1.964,1.964,0,0,1,25,7.18a1.962,1.962,0,0,1-1.507-.942C21.419,3.191,18.326.1,13.1,0,6.233-.138,0,4.856,0,15.88c0,10.867,9.344,18.577,15.107,22.5a51.146,51.146,0,0,0,8.543,4.491A6.311,6.311,0,0,0,25,43.141a6.281,6.281,0,0,0,1.349-.267,51.182,51.182,0,0,0,8.544-4.491C40.656,34.457,50,26.746,50,15.88,50,4.856,43.766-.138,36.9,0M11.4,26.728a1.572,1.572,0,0,1-2.192-.366,14.675,14.675,0,0,1-2.615-6.084,20.481,20.481,0,0,1-.308-3.368,11.608,11.608,0,0,1,.341-2.92,1.571,1.571,0,0,1,3.039.794,8.459,8.459,0,0,0-.239,2.126,17.174,17.174,0,0,0,.265,2.845,11.523,11.523,0,0,0,2.075,4.782,1.571,1.571,0,0,1-.366,2.191M13.525,7.944A4.243,4.243,0,0,0,12.4,8.89,1.57,1.57,0,1,1,9.964,6.906,7.416,7.416,0,0,1,11.9,5.257a1.57,1.57,0,0,1,1.626,2.687" fill="%23ffffff"/></svg>' );
 background-size: 100% auto; background-position: 50% 20%; background-repeat: no-repeat;
}

#voice-list .btn-more a { margin: 0 auto;}
@media (max-width: 1281px) {
	#voice-list .ctn-flex { margin-bottom: 40px;}
	#voice-list .box .inner { box-shadow: 8px 8px 0 #FFB300;}
}
@media (max-width: 1001px) {
	#voice-list .box { width: 48.5%; padding: 20px 0;}
	#voice-list .box .inner { border-radius: 12px;}
	#voice-list .box .inner:after { width: 30px; height: 24px; right: 30px; bottom: -24px;}
	#voice-list .box a { padding: 20px 15px; border-radius: 8px;}
	#voice-list .box figure { margin-bottom: 12px;}
	#voice-list .box p.tit { margin-bottom: 6px; padding-left: 30px; font-size: 1.8vw;}
	#voice-list .box p.tit:before { width: 21px;}
	#voice-list .box p.txt { font-size: 13px;}
}
@media (max-width: 801px) {
	#voice-list .ctn-flex { display: block;}
	#voice-list .box { width: 100%; margin: 0 auto;}
	#voice-list .box p.tit { font-size: 2.8vw;}
	#voice-list .box p.txt { font-size: 14px;}
}
@media (max-width: 481px) {
	#voice-list .inner-sct { padding: 40px 0 60px;}
	#voice-list .box a { padding: 20px;}
	#voice-list .box p.tit { font-size: 21px;}
}


.nav-links { position: relative; width: 90%; max-width: 460px; margin: 0 auto; padding: 0 60px; }
.nav-links ul { font-size: 0; text-align: center;}
.nav-links ul li { display: inline-block; width: 42px; margin: 0 6px; font-size: 16px; vertical-align: middle;}
.nav-links ul li a { position: relative; display: block; width: 100%; height: 40px; height: 40px; line-height: 38px;
 color: #333; font-weight: 700; text-align: center; text-decoration: none;}
.nav-links ul li a.page-numbers { border: solid 1px #333; border-radius: 50%;}
.nav-links ul li a.prev,
.nav-links ul li a.next { border: none;}
.nav-links ul li a.prev:before,
.nav-links ul li a.next:before { content: ''; display: block; width: 20px; height: 20px; position: absolute; top: 50%;}
.nav-links ul li a.prev:before { left: 15px; border-bottom: solid 3px #333; border-left: solid 3px #333; transform: translateY(-50%) rotate(45deg);}
.nav-links ul li a.next:before { right: 15px; border-top: solid 3px #333; border-right: solid 3px #333; transform: translateY(-50%) rotate(45deg);}
.nav-links ul li span.current { display: block; width: 100%; height: 40px; height: 40px; line-height: 38px;
 background: #333; border: solid 1px #333; border-radius: 50%;
 color: #fff; font-weight: 700; text-align: center; text-decoration: none;
}

.pager { position: relative; width: 90%; max-width: 460px; margin: 0 auto; padding: 0 60px; }
.pager .prev,
.pager .next { position: absolute; width: 50px; height: 40px; top: 50%; transform: translateY(-50%);}
.pager .prev { left: 0;}
.pager .next { right: 0;}
.pager .prev a,
.pager .next a{ position: relative; display: block; width: 100%; height: 100%;}
.pager .prev a:before,
.pager .next a:before { content: ''; display: block; width: 20px; height: 20px; position: absolute; top: 50%;}
.pager .prev a:before { left: 15px; border-bottom: solid 3px #333; border-left: solid 3px #333; transform: translateY(-50%) rotate(45deg);}
.pager .next a:before { right: 15px; border-top: solid 3px #333; border-right: solid 3px #333; transform: translateY(-50%) rotate(45deg);}
.pager .no ul { text-align: center;}
.pager .no ul li { display: inline-block; width: 42px; margin: 0 6px; vertical-align: middle;}
.pager .no ul li a { display: block; width: 100%; height: 40px; height: 40px; line-height: 38px; border: solid 1px #333; border-radius: 50%;
 color: #333; font-weight: 700; text-align: center; text-decoration: none;
}
.pager .no ul li span.now { display: block; width: 100%; height: 40px; height: 40px; line-height: 38px;
 background: #333; border: solid 1px #333; border-radius: 50%;
 color: #fff; font-weight: 700; text-align: center; text-decoration: none;
}
.pager .btn-back { width: 100%; max-width: 240px; margin: 0 auto;}
.pager .btn-back a { display: block; padding: 12px 0; background: #606060; box-shadow: 5px 5px 0 #333;
 color: #fff; font-size: 21px; font-size: min(1.45vw,21px); line-height: 1; text-align: center; text-decoration: none;
}
.pager .btn-back a:hover { background: #ffb300;}
@media (max-width: 801px) {
	.pager .btn-back a { font-size: 2.1vw;}
}
@media (max-width: 481px) {
	.pager .btn-back a { font-size: 13px;}
}

#voice-article {}
#voice-article .inner-sct { padding: 80px 0 150px;}
#voice-article .article-ctn { width: 92%; max-width: 1000px; margin: 0 auto 80px;}
#voice-article .article-hd { margin-bottom: 40px; text-align: center;}
#voice-article .article-hd h2 { margin-bottom: 20px; color: #003C88; font-size: 42px; font-size: min(3.0vw,42px); font-weight: 700; letter-spacing: 0.05rem; text-align: center;}
#voice-article .article-hd .case { position: relative; width: 100%;}
#voice-article .article-hd .case:after { content: ''; display: block; width: 100%; height: 1px; background: #000; position: absolute; left: 0; top: 50%; z-index: 1;}
#voice-article .article-hd .case span { position: relative; display: inline-block; padding: 0 30px; background: #fff; z-index: 2;
 font-size: 24px; font-size: min(1.45vw,24px); font-weight: 700;
}
#voice-article .article-ctn figure { margin-bottom: 60px; text-align: center;}
#voice-article .article-ctn figure img { width: 100%;}
#voice-article .article-ctn .ctn h3{ margin-bottom: 20px; padding-bottom: 30px; border-bottom: dashed 1px #333; color: #003C88;
 font-size: 42px; font-size: min(3.0vw,42px); font-weight: 700; letter-spacing: 0.05rem; line-height: 1.4;
}
#voice-article .article-ctn .ctn p { margin-bottom: 60px; font-size: 21px; font-size: min(1.45vw,21px); letter-spacing: 0.05rem; line-height: 1.8;}
#voice-article .article-ctn .ctn hr { width: 100%; height: 1px; border: 0px; margin: 0 auto 40px;}

#voice-article .owner { width: 92%; max-width: 1000px; margin: 0 auto 80px; background: url('/img/voice/bg-owner.jpg') no-repeat 50% 100% / cover;}
#voice-article .owner .ctn-flex { display: flex; align-items: center;}
#voice-article .owner .pht { width: 45%; padding: 30px 0;}
#voice-article .owner .txt { width: 55%; padding-right: 20px;}
#voice-article .owner .pht figure { text-align: center;}
#voice-article .owner .pht figure img { width: 78%; max-width: 400px;}
#voice-article .owner .txt h4{ margin-bottom: 12px; font-size: 32px; font-size: min(2.2vw,32px); font-weight: 700;}
#voice-article .owner .txt p { margin-bottom: 12px; font-size: 18px; font-size: min(1.25vw,18px); letter-spacing: 0.1rem;}
#voice-article .owner .txt .btn { width: 80%; max-width: 240px;}
#voice-article .owner .txt .btn a { display: block; padding: 8px 0; background: #FFB300; box-shadow: 4px 4px 0 #333;
 color: #333; font-size: 18px; font-size: min(1.25vw,18px); font-weight: 700; text-align: center; text-decoration: none;
}
#voice-article .owner .txt .btn a:hover { opacity: 0.8;}
@media (max-width: 801px) {
	#voice-article .article-hd h2 { font-size: 4.2vw;}
	#voice-article .article-hd .case span { font-size: 2.4vw;}
	#voice-article .article-ctn .ctn h3{ font-size: 4.2vw;}
	#voice-article .article-ctn .ctn p { font-size: 2.1vw;}
	#voice-article .owner .txt h4{ font-size: 3.2vw;}
	#voice-article .owner .txt p { font-size: 16px;}
	#voice-article .owner .txt .btn { width: 80%; max-width: 240px;}
	#voice-article .owner .txt .btn a { font-size: 14px;}
}
@media (max-width: 641px) {
	#voice-article .owner { background: #F0F0F0 url('/img/voice/bg-owner-sp.jpg') no-repeat 50% 100% / 100% auto;}
	#voice-article .owner .ctn-flex { display: block;}
	#voice-article .owner .pht { width: 100%; padding: 30px 0 20px;}
	#voice-article .owner .txt { width: 100%; padding: 0 20px 30px;}
	#voice-article .owner .pht figure img { width: 90%;}
}
@media (max-width: 481px) {
	#voice-article .inner-sct { padding: 40px 0 80px;}
	#voice-article .article-hd { margin-bottom: 20px;}
	#voice-article .article-hd h2 { margin-bottom: 12px; font-size: 21px;}
	#voice-article .article-hd .case span { padding: 0 24px; font-size: 14px;}
	#voice-article .article-ctn figure { margin-bottom: 30px;}
	#voice-article .article-ctn .ctn h3{ margin-bottom: 12px; padding-bottom: 12px; font-size: 18px;}
	#voice-article .article-ctn .ctn p { margin-bottom: 30px; font-size: 13px;}
	#voice-article .article-ctn .ctn hr { margin: 0 auto 20px;}

	#voice-article .owner .txt h4{ font-size: 18px;}
	#voice-article .owner .txt p { font-size: 14px;}

}