@charset "utf-8";
#wrapper { background: #c2e9fb;}
.bg-sct { background: url('../img/search/bg-kv.jpg') no-repeat 50% 0% / 2000px auto;}

.btn { width: 55%; max-width: 360px; margin: 0 auto;}
.btn div,
.btn a { position: relative; display: block; width: 100%; padding: 16px 0;
 background: #0f2b6c; border-radius: 50px; box-shadow: 0 4px 10px #7e98b8;
 color: #fff; font-size: 24px; font-weight: 700; text-align: center; text-decoration: none;
}
.btn div:hover,
.btn a:hover { opacity: 0.8;}
@media (max-width: 801px) {
	.btn div,
	.btn a { padding: 12px 0; font-size: 3.0vw;}
}
@media (max-width: 481px) {
	.btn div,
	.btn a { padding: 8px 0; font-size: 16px;}
}


#kv { position: relative;}
#kv .inner-kv { padding: 150px 0 80px;}
#kv h1 { margin-bottom: 30px; text-align: center;}
#kv h1 img { display: block; width: 72%; max-width: 560px; margin: 0 auto;}
#kv h1 img.logo { width: 52%; max-width: 450px; margin-bottom: 30px;}
#kv p { font-size: 21px; font-weight: 700; text-align: center;}
#kv .btn { max-width: 400px;}
#kv .btn p { margin-top: 10px; font-size: 14px; font-weight: 400;}
@media (min-width: 641px) {
}
@media (max-width: 1201px) {
}
@media (max-width: 1001px) {
	#kv .inner-kv { padding: 120px 0 80px;}
}
@media (max-width: 801px) {
	.bg-sct { background: url('../img/search/bg-kv-sp.jpg') no-repeat 50% 0% / 100% auto;}
	#kv { margin-bottom: 0px;}
	#kv .inner-kv { padding: 32vw 0 8vw;}
	#kv h1 { margin-bottom: 6vw;}
	#kv h1 img.logo { margin-bottom: 12px;}
	#kv p { font-size: 2.8vw;}
	#kv p span { display: block;}
}
@media (max-width: 641px) {
}

@media (max-width: 481px) {
	#kv .inner-kv { padding: 32vw 0 8vw;}
	#kv h1 { margin-bottom: 5vw;}
	#kv p { font-size: 12px;}
	#kv .btn { width: 60%;}
	#kv .btn p { font-size: 10px;}
}





#guide { position: relative; background: url('../img/search/bg-illust.png') no-repeat 50% 100px / 1800px auto;}
#guide .inner-sct { position: relative; width: 90%; max-width: 1200px; margin: 0 auto; padding-bottom: 40px;}
#guide h2 { text-align: center;}
#guide h2 img { width: 80%; max-width: 900px;}
#guide h2 img.sp { display: none;}
#guide p.read { margin-bottom: 80px; font-size: 22px; font-weight: 700; text-align: center;}
#guide .ttl h2 span { color: #000;}
#guide .category { margin: 0 auto;}
#guide .category .ttl { margin-bottom: 20px;}
#guide .category ul { width: 100%; max-width: 1200px; margin: 0 auto; font-size: 0; text-align: center;}
#guide .category ul li { display: inline-block; width: 33%; padding: 20px 0;}
#guide .category ul li a { position: relative; display: block; width: 92%; margin: 0 auto;
 background: #fff; border-radius: 10px; box-shadow: 0px 4px 12px #becbdb; color: #000; text-decoration: none; overflow: hidden;
}
#guide .category ul li a:before,
#guide .category ul li a:after { content: ''; display: block; position: absolute;}
#guide .category ul li a:before { right: 0px; bottom: 0px; border: solid 26px transparent;}
#guide .category ul li:nth-child(1) a:before { border-bottom: solid 26px #6b6b6b; border-right: solid 26px #6b6b6b;}
#guide .category ul li:nth-child(2) a:before { border-bottom: solid 26px #4aa3d5; border-right: solid 26px #4aa3d5;}
#guide .category ul li:nth-child(3) a:before { border-bottom: solid 26px #cdaf81; border-right: solid 26px #cdaf81;}
#guide .category ul li:nth-child(4) a:before { border-bottom: solid 26px #fce952; border-right: solid 26px #fce952;}
#guide .category ul li:nth-child(5) a:before { border-bottom: solid 26px #a4cced; border-right: solid 26px #a4cced;}
#guide .category ul li a:after{ right: 8px; bottom: 8px; border: solid 7px transparent; border-left: solid 12px #fff; border-right: 0px;}
#guide .category ul li dl { display: table; width: 100%;}
#guide .category ul li dl dt,
#guide .category ul li dl dd { display: table-cell; padding: 20px 0; vertical-align: middle;}
#guide .category ul li dl dt { width: 120px;}
#guide .category ul li dl dd { font-size: 21px; font-weight: 700; text-align: left;}
#guide .category ul li dl dt img { width: 85px;}
#guide .category ul li a:hover { opacity: 0.8;}

#guide .choice { margin-bottom: 120px;}
#guide .choice .ttl { margin-bottom: 20px;}
.p-search__choice-selects {position: relative; width: 80%; max-width: 320px; margin: 0 auto 50px;}
.p-search__choice-selects-label { position: relative; border-radius: 50px; background: #0f2b6c; padding: 8px 24px;
 color: #fff;
}
.p-search__choice-selects-label::after {content: 'â¼'; position: absolute; right: 24px; top: 50%; transform: translateY(-50%);}
.p-search__choice-select { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0;}
#guide .choice .ctn { display: flex; flex-wrap: wrap; width: 100%; margin: 0 auto 30px;}
#guide .choice .box { width: 33.33333%; padding: 20px 0;}
#guide .choice .box .inner-box { position: relative; width: 94%; margin: 0 auto; padding-top: 20px;}
#guide .choice .box .days { position: absolute; left: 0; top: 0; width: 100%; padding-left: 160px; padding-right: 40px; z-index: 2;}
#guide .choice .box .days div { position: relative; width: 100%; margin: 0 auto; padding: 6px 0 10px; background: #0c66a5; border-radius: 50px;
 color: #fff; font-size: 21px; font-weight: 700; line-height: 1; text-align: center;
}
#guide .choice .box .days div[data-days="0"],
#guide .choice .box .days div[data-days="1"],
#guide .choice .box .days div[data-days="2"],
#guide .choice .box .days div[data-days="3"] { background: #985858;}
#guide .choice .box .days div:after { content: ''; display: block; width: 0px; height: 0px;
 border: solid 8px transparent; border-top: solid 8px #0c66a5; border-left: solid 8px #0c66a5;
 position: absolute; left: 60%; bottom: -12px;
}
#guide .choice .box .days div[data-days="0"]:after,
#guide .choice .box .days div[data-days="1"]:after,
#guide .choice .box .days div[data-days="2"]:after,
#guide .choice .box .days div[data-days="3"]:after { border-top: solid 8px #985858; border-left: solid 8px #985858;}

#guide .choice .box .days div span { font-size: 30px;}
#guide .choice .box a { display: block; background: #fff; border-radius: 15px; box-shadow: 0px 4px 12px #becbdb;
 color: #000; text-decoration: none;}
#guide .choice .box a dl {}
#guide .choice .box a dl dt { position: relative; min-height: 6.0em; font-size: 22px; font-weight: 700; line-height: 1.4;}
#guide .choice .box a dl dt:before { content: ''; display: block; width: 180px; height: 180px; position: absolute; left: -10px; bottom: -10px;}
#guide .choice .box a dl dt[data-category="ã©ã¤ãã£ã³ã°ã»ãã¼ãã³ã°"]:before { background: url('../img/search/icn-1.png') no-repeat 50% 50% / 72% auto;}
#guide .choice .box a dl dt[data-category="åçã»åç»ã»ãã¬ã¼ã·ã§ã³"]:before { background: url('../img/search/icn-2.png') no-repeat 50% 50% / 72% auto;}
#guide .choice .box a dl dt[data-category="äºåã»ã³ã³ãµã«ã»å°éè·ã»ãã®ä»"]:before { background: url('../img/search/icn-3.png') no-repeat 50% 50% / 72% auto;}
#guide .choice .box a dl dt[data-category="å¶æ¥­ã»ãã¼ã±ãã£ã³ã°ã»ä¼ç»ã»åºå ±"]:before { background: url('../img/search/icn-4.png') no-repeat 50% 50% / 72% auto;}
#guide .choice .box a dl dt[data-category="ã¿ã¹ã¯ã»ä½æ¥­"]:before { background: url('../img/search/icn-5.png') no-repeat 50% 50% / 72% auto;}
#guide .choice .box a dl dt span { display: block; position: absolute; left: 0; top: 50%; transform: translateY(-32%);
 width: 100%; padding-left: 160px; padding-right: 40px;
}

#guide .choice .box a dl dd { position: relative; border-top: dashed 2px #c9caca; font-size: 20px;}
#guide .choice .box a dl dd span { display: block; min-height: 6.5em; padding: 20px 30px; font-weight: 700; line-height: 1.4;}


#guide .choice .box a:hover { opacity: 0.8;}
@media (max-width: 1401px) {
	#guide .category ul li dl dd { font-size: 1.35vw;}
}
@media (max-width: 1201px) {
	#guide .category ul li dl dt { width: 100px;}
	#guide .choice .box a dl dt { min-height: 6.5em; font-size: 2.0vw;}
	#guide .choice .box a dl dd { font-size: 1.5vw;}
	#guide .choice .box a dl dd span { padding: 20px;}
}
@media (max-width: 1001px) {
	#guide .choice .box { width: 50%; padding: 12px 0;}
	#guide .choice .box a dl { padding-top: 20px;}
}
@media (max-width: 801px) {
	#guide { background: none;}
	#guide .inner-sct { padding-bottom: 60px;}
	#guide p.read span { display: block;}

	#guide .choice { margin: 0 auto 100px;}
	#guide .choice .box .days { padding-left: 120px;}
	#guide .choice .box .days div { font-size: 18px;}
	#guide .choice .box .days div span { font-size: 24px;}
	#guide .choice .box a dl { padding-top: 12px;}
	#guide .choice .box a dl dt { min-height: 5.0em; font-size: 18px;}
	#guide .choice .box a dl dd { font-size: 14px;}
	#guide .choice .box a dl dt:before { width: 120px; height: 120px; left: 0;}
	#guide .choice .box a dl dt span { padding-left: 120px; transform: translateY(-40%);}
	#guide .choice .box a dl dd.icn-4 span { padding-right: 0px;}
	#guide .choice .box a dl dd { font-size: 16px;}
	#guide .choice .box a dl dd span { min-height: 5.2em; padding: 12px 15px;}

	#guide .category ul li { width: 50%; padding: 15px 0;}
	#guide .category ul li dl dt,
	#guide .category ul li dl dd { padding: 12px 0;}
	#guide .category ul li dl dd { font-size: 15px;}
}
@media (max-width: 641px) {
	#guide h2 img.pc { display: none;}
	#guide h2 img.sp { display: block; margin: 0 auto;}
	#guide p.read { font-size: 3.0vw;}
	#guide p.read span { display: block;}

	#guide .choice .box { width: 100%; padding: 8px 0;}
	#guide .choice .box .inner-box { padding-top: 18px;}
	#guide .choice .box a dl dd span { min-height: auto; padding: 20px;}

	#guide .category ul li { padding: 10px 0;}
}
@media (max-width: 481px) {
	#guide .inner-sct { padding-bottom: 20px;}
	#guide p.read { margin-bottom: 40px; font-size: 14px;}
	.p-search__choice-selects { margin: 0 auto 30px;}
	.p-search__choice-selects-label { padding: 6px 18px; font-size: 13px;}
	.p-search__choice-selects-label::after { right: 12px;}

	#guide .choice { margin: 0 auto 60px;}
	#guide .choice .ttl { margin-bottom: 10px;}
	#guide .choice .ctn { display: block; margin: 0 auto 20px;}
	#guide .choice .box .days { padding-left: 60%; padding-right: 20px;}
	#guide .choice .box .days div { padding: 4px 0 6px; font-size: 15px;}
	#guide .choice .box .days div span { font-size: 20px;}
	#guide .choice .box a { border-radius: 10px; box-shadow: 0px 2px 8px #becbdb;}
	#guide .choice .box a dl dt { min-height: 2.8em; font-size: 14px;}
	#guide .choice .box a dl dd { border-top: dashed 1px #c9caca; font-size: 14px;}
	#guide .choice .box a dl dt:before { width: 76px; height: 76px; bottom: -5px;}
	#guide .choice .box a dl dt span { padding-left: 80px; padding-right: 12px; transform: translateY(-75%);}

	#guide .category .ttl { margin-bottom: 8px;}
	#guide .category ul li { display: block; width: 100%; padding: 8px 0;}
	#guide .category ul li a { border-radius: 6px; box-shadow: 0px 2px 6px #becbdb;}
	#guide .category ul li a:before { border: solid 20px transparent;}
	#guide .category ul li:nth-child(1) a:before { border-bottom: solid 20px #6b6b6b; border-right: solid 20px #6b6b6b;}
	#guide .category ul li:nth-child(2) a:before { border-bottom: solid 20px #4aa3d5; border-right: solid 20px #4aa3d5;}
	#guide .category ul li:nth-child(3) a:before { border-bottom: solid 20px #cdaf81; border-right: solid 20px #cdaf81;}
	#guide .category ul li:nth-child(4) a:before { border-bottom: solid 20px #fce952; border-right: solid 20px #fce952;}
	#guide .category ul li:nth-child(5) a:before { border-bottom: solid 20px #a4cced; border-right: solid 20px #a4cced;}
	#guide .category ul li a:after{ right: 5px; bottom: 5px; border: solid 5px transparent; border-left: solid 10px #fff; border-right: 0px;}
	#guide .category ul li dl dt,
	#guide .category ul li dl dd { padding: 8px 0;}
	#guide .category ul li dl dt img { width: 60px;}
	#guide .category ul li dl dd { font-size: 16px;}

}


#select {}
#select .inner-sct { position: relative; padding: 60px 0px 240px; }
#select .inner-sct:after { content: ''; display: block; width: 100%; padding-top: 360px; position: absolute; left: 0; bottom: -60px; z-index: 1;
 background: url('../img/bg/wave-top-wh.svg') no-repeat 50% 0% / 2000px auto;}

#select .ttl { margin-bottom: 30px;}
#select .ctn { position: relative; width: 90%; margin: 0 auto; z-index: 2;}
#select .ctn-flex { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 1100px; margin: 0 auto;}
#select .box { width: 50%; padding: 14px;}
#select .box a { position: relative; display: block; width: 100%; height: 100%; margin: 0 auto; background: #fff; border-radius: 15px; overflow: hidden; box-shadow: 0px 4px 12px #becbdb;
 color: #000; text-decoration: none;
}
#select .box dl { position: relative; display: table; width: 100%; margin: 0 auto;}
#select .box dl dt,
#select .box dl dd { display: table-cell; vertical-align: middle;}
#select .box dl dt { width: calc(100% - 300px); text-align: center;}
#select .box dl dd { width: 300px; padding: 20px 30px; padding-left: 0px; font-size: clamp(13px,1.6vw,18px);}
#select .box dl dt img { width: 100%;}
#select .box dl dd span { display: block;}
#select .box dl dd span.tit { margin-bottom: 8px; font-size: clamp(16px,2.4vw,24px); font-weight: 900; line-height: 1.4;}
#select .box dl dd span.note{ margin-top: 6px; font-size: 14px; line-height: 1.4;}

#select .box a:before,
#select .box a:after { content: ''; display: block; width: 0px; height: 0px; position: absolute;}
#select .box a:before{ border: solid 30px transparent; bottom: 0px; right: 0px;}
#select .box a:after { border: solid 8px transparent; border-left: solid 12px #fff; border-right: 0px; bottom: 10px; right: 10px;}
#select .box a.type-1:before { border-bottom: solid 30px #0c66a5; border-right: solid 30px #0c66a5;}
#select .box a.type-2:before { border-bottom: solid 30px #e6c229; border-right: solid 30px #e6c229;}
#select .box a.type-3:before { border-bottom: solid 30px #74a57f; border-right: solid 30px #74a57f;}
#select .box a.type-4:before { border-bottom: solid 30px #0f2b6c; border-right: solid 30px #0f2b6c;}
#select .box a.type-1 dl dd span.tit { color: #0c66a5;}
#select .box a.type-2 dl dd span.tit { color: #e6c229;}
#select .box a.type-3 dl dd span.tit { color: #74a57f;}
#select .box a.type-4 dl dd span.tit { color: #0f2b6c;}
#select .box a:hover { opacity: 0.8;}
#select .note-sp { display: none;}
@media (max-width: 1001px) {
	#select .box { padding: 10px;}
	#select .box dl {}
	#select .box dl dt { width: calc(100% - 250px);}
	#select .box dl dd { width: 250px;}
}
@media (max-width: 801px) {
	#select .inner-sct { padding: 40px 0 160px;}
	#select .inner-sct:after{ padding-top: 18%; bottom: -5vw; background: url('../img/bg/wave-top-wh-sp.svg') no-repeat 50% 0% / 100% auto;}
	#select .ttl { margin-bottom: 20px;}
	#select .ctn-flex { display: block;}
	#select .box { width: 100%;}
	#select .box dl dt { width: 40%;}
	#select .box dl dd { width: 60%;}
	#select .box dl dt img { width: 80%;}
	#select .box dl dd { padding: 15px; padding-left: 0px;}
	#select .box dl dd span.note{ font-size: 12px;}
	#select .box a:before{ border: solid 26px transparent}
	#select .box a:after { border: solid 6px transparent; border-left: solid 10px #fff; border-right: 0px; bottom: 8px; right: 8px;}
	#select .box a.type-1:before { border-bottom: solid 26px #0c66a5; border-right: solid 26px #0c66a5;}
	#select .box a.type-2:before { border-bottom: solid 26px #e6c229; border-right: solid 26px #e6c229;}
	#select .box a.type-3:before { border-bottom: solid 26px #74a57f; border-right: solid 26px #74a57f;}
	#select .box a.type-4:before { border-bottom: solid 26px #0f2b6c; border-right: solid 26px #0f2b6c;}
}
@media (max-width: 641px) {
	#select .box dl dd span.note{ font-size: 12px;}
	#select .note-sp { display: block; font-size: 12px; text-align: center;}
}
@media (max-width: 481px) {
	#select .inner-sct { padding: 40px 0 80px;}
	#select .ttl { margin-bottom: 10px;}
	#select .box { padding: 8px 0;}
	#select .box a { border-radius: 10px; box-shadow: 0px 2px 8px #becbdb;}
	#select .box a:before{ border: solid 20px transparent}
	#select .box a:after { border: solid 5px transparent; border-left: solid 8px #fff; border-right: 0px; bottom: 7px; right: 7px;}
	#select .box a.type-1:before { border-bottom: solid 20px #0c66a5; border-right: solid 20px #0c66a5;}
	#select .box a.type-2:before { border-bottom: solid 20px #e6c229; border-right: solid 20px #e6c229;}
	#select .box a.type-3:before { border-bottom: solid 20px #74a57f; border-right: solid 20px #74a57f;}
	#select .box a.type-4:before { border-bottom: solid 20px #0f2b6c; border-right: solid 20px #0f2b6c;}
	#select .box dl { min-height: auto;}
	#select .box dl dt { width: 35%;}
	#select .box dl dd { width: 65%; padding: 12px; padding-left: 0px; font-size: 12px;}
	#select .box dl dd span.tit { font-size: 18px; line-height: 1.25;}
	#select .box dl dd span.note{ font-size: 10px;}
	#select .note-sp { font-size: 10px;}
}





#active { position: relative; z-index: 4;}
#active .bg { position: relative; background: #fff;}
#active .bg:after{ content: ''; display: block; width: 100%; padding-top: 360px; position: absolute; left: 0; bottom: -40px; z-index: 1;
 background: url('../img/bg/wave-top.svg') no-repeat 50% 0% / 2000px auto;}
/*
#active .bg:before{ content: ''; display: block; width: 100%; padding-top: 360px; position: absolute; left: 0; top: -300px;
 background: url('../img/bg/wave-top-wh.svg') no-repeat 50% 0% / 2000px auto;}
*/
#active .inner-sct { position: relative; padding: 40px 0 240px; z-index: 2;}
#active .ttl { margin-bottom: 30px;}
#active .ctn { display: flex; justify-content: space-between; flex-wrap: wrap; width: 90%; max-width: 1100px; margin: 0 auto;}
#active .ctn .box { width: 50%; padding: 15px 18px;}
#active .ctn .box .flex { position: relative; display: flex; width: 100%; height: 100%; background: #fff; border: solid 4px #a4cced; border-radius: 20px; box-shadow: 4px 4px 10px #e5eaf1;}
#active .ctn .box .prof { width: 40%; padding: 20px 0;}
#active .ctn .box .txt { width: 60%; padding: 20px; padding-left: 0px;}
#active .ctn .box .prof figure { margin-bottom: 8px; text-align: center;}
#active .ctn .box .prof figure img { width: 60%; max-width: 140px; border-radius: 50%;}
#active .ctn .box .prof dl { text-align: center;}
#active .ctn .box .prof dl dt { font-size: clamp(10px,1.4vw,16px); font-weight: 700; line-height: 1.4;}
#active .ctn .box .prof dl dt span { display: block; font-size: clamp(14px,2.2vw,24px);}
#active .ctn .box .prof dl dd { font-size: 18px;}
#active .ctn .box .prof dl dd:before {
 content: ''; display: inline-block; width: 14px; height: 20px; margin-right: 8px; vertical-align: middle;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 29"><path d="M10,0C4.48,0,0,4.48,0,10s10,18.38,10,18.38c0,0,10-12.86,10-18.38S15.52,0,10,0ZM10,14.55c-2.51,0-4.55-2.04-4.55-4.55s2.04-4.55,4.55-4.55,4.55,2.04,4.55,4.55-2.04,4.55-4.55,4.55Z" fill="%23a4cced" /></svg>');
 background-size: 100% auto; background-repeat: no-repeat; background-position: 50% 50%;

}
#active .ctn .box .prof dl dd span{ display: inline-block; vertical-align: middle;}
#active .ctn .box .txt p { margin-bottom: 20px; font-size: 15px;}
#active .ctn .box .txt .link { width: 100%; max-width: 230px;}
#active .ctn .box .txt .link a { position: relative; display: block; width: 100%; padding: 5px; padding-left: 40px;
 background: #0f2b6c; border-radius: 50px;
 color: #fff; font-size: clamp(12px,1.4vw,14px); font-weight: 700; text-decoration: none;
}
#active .ctn .box .txt .link a:before { content: ''; display: block; width: 0px; height: 0px;
 border: solid 5px transparent; border-left: solid 10px #fff;
 position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
}
#active .ctn .box .txt .link a:hover { opacity: 0.8;}
@media (max-width: 801px) {
/*	#active .bg:before{ padding-top: 40%; top: -12vw; background: url('../img/bg/wave-top-wh-sp.svg') no-repeat 50% 0% / 100% auto;}*/
	#active .bg:after{ padding-top: 15%; bottom: -4vw; background: url('../img/bg/wave-top-sp.svg') no-repeat 50% 0% / 100% auto;}
	#active .inner-sct { padding: 60px 0 180px;}
	#active .ctn { display: block;}
	#active .ctn .box { width: 100%; padding: 12px 0;}
	#active .ctn .box .flex { align-items: center;}
	#active .ctn .box .prof dl dd { font-size: 16px;}
}
@media (max-width: 481px) {
	#active .inner-sct { padding: 20px 0 80px;}
	#active .ttl { margin-bottom: 12px;}
	#active .ctn .box { padding: 8px 0;}
	#active .ctn .box .flex { border-width: 2px; border-radius: 12px;}
	#active .ctn .box .prof { width: 38%;}
	#active .ctn .box .txt { width: 62%;}
	#active .ctn .box .prof dl dd { font-size: 11px;}
	#active .ctn .box .prof dl dd:before { width: 10px; height: 14px; margin-right: 5px;}
	#active .ctn .box .txt { padding: 12px; padding-left: 0px;}
	#active .ctn .box .txt p { margin-bottom: 12px; font-size: 12px;}
	#active .ctn .box .txt .link a { padding-left: 25px; font-size: 12px;}
	#active .ctn .box .txt .link a:before { left: 10px; border: solid 4px transparent; border-left: solid 7px #fff;}
}


#supporter { position: relative; z-index: 3;}
#supporter .bg { position: relative; background: #99cbf7;}
#supporter .bg:after { content: ''; display: block; width: 100%; padding-top: 360px; position: absolute; left: 0; bottom: -40px; z-index: 1;
 background: url('../img/bg/wave-top-wh.svg') no-repeat 50% 0% / 2000px auto;}

/*
#supporter .bg:before{ content: ''; display: block; width: 100%; padding-top: 360px; position: absolute; left: 0; top: -300px; z-index: 1;
 background: url('../img/bg/wave-top.svg') no-repeat 50% 0% / 2000px auto;}
*/
#supporter .inner-sct { position: relative; padding: 40px 0 240px; z-index: 2;}
#supporter .ttl { margin-bottom: 30px;}
#supporter .ctn { display: flex; justify-content: center; flex-wrap: wrap;  width: 90%; max-width: 1100px; margin: 0 auto;}
#supporter .ctn .box { position: relative; width: 50%; padding: 16px 18px;}
#supporter .ctn .box .tag { position: absolute; left: 0; top: 0; padding-left: 18px; z-index: 2;}
#supporter .ctn .box .tag span { display: inline-block; padding: 8px 14px; padding-right: 24px; font-size: 18px; font-weight: 700; line-height: 1;}
#supporter .ctn .box .tag span.tag-1 { color: #fff;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 40"><polygon points="0 40 300 40 290 20 300 0 0 0 0 40" fill="%23cdaf81" /></svg>');
 background-size: auto 100%; background-repeat: no-repeat; background-position: 100% 50%;
}
#supporter .ctn .box .tag span.tag-2 { color: #000;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 40"><polygon points="0 40 300 40 290 20 300 0 0 0 0 40" fill="%23fce952" /></svg>');
 background-size: auto 100%; background-repeat: no-repeat; background-position: 100% 50%;
}
#supporter .ctn .box .flex { position: relative; display: flex; width: 100%; height: 100%; background: #fff; border-radius: 20px; box-shadow: 2px 2px 8px #98adc6;}
#supporter .ctn .box .prof { width: 40%; padding: 30px 0;}
#supporter .ctn .box .txt { width: 60%; padding: 30px 20px; padding-left: 0px;}
#supporter .ctn .box .prof figure { margin-bottom: 8px; text-align: center;}
#supporter .ctn .box .prof figure img { width: 60%; max-width: 140px; border-radius: 50%;}
#supporter .ctn .box .prof dl { text-align: center;}
#supporter .ctn .box .prof dl dt { font-size: clamp(12px,1.4vw,16px); font-weight: 700; line-height: 1.4;}
#supporter .ctn .box .prof dl dt span { display: block; font-size: clamp(14px,2.4vw,24px);}
#supporter .ctn .box .prof dl dd { font-size: 18px;}
#supporter .ctn .box .prof dl dd:before { content: ''; display: inline-block; width: 14px; height: 20px; margin-right: 8px; vertical-align: middle;}
#supporter .ctn .box .prof dl dd.pin1:before {
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 29"><path d="M10,0C4.48,0,0,4.48,0,10s10,18.38,10,18.38c0,0,10-12.86,10-18.38S15.52,0,10,0ZM10,14.55c-2.51,0-4.55-2.04-4.55-4.55s2.04-4.55,4.55-4.55,4.55,2.04,4.55,4.55-2.04,4.55-4.55,4.55Z" fill="%23cdaf81" /></svg>');
 background-size: 100% auto; background-repeat: no-repeat; background-position: 50% 50%;
}
#supporter .ctn .box .prof dl dd.pin2:before {
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 29"><path d="M10,0C4.48,0,0,4.48,0,10s10,18.38,10,18.38c0,0,10-12.86,10-18.38S15.52,0,10,0ZM10,14.55c-2.51,0-4.55-2.04-4.55-4.55s2.04-4.55,4.55-4.55,4.55,2.04,4.55,4.55-2.04,4.55-4.55,4.55Z" fill="%23fce952" /></svg>');
 background-size: 100% auto; background-repeat: no-repeat; background-position: 50% 50%;
}
#supporter .ctn .box .prof dl dd span{ display: inline-block; vertical-align: middle;}
#supporter .ctn .box .txt p { margin-bottom: 20px; font-size: 15px;}
#supporter .ctn .box .txt .link { width: 100%; max-width: 230px;}
#supporter .ctn .box .txt .link a { position: relative; display: block; width: 100%; padding: 5px; padding-left: 40px;
 background: #0f2b6c; border-radius: 50px;
 color: #fff; font-size: clamp(12px,1.4vw,14px); font-weight: 700; text-decoration: none;
}
#supporter .ctn .box .txt .link a:before { content: ''; display: block; width: 0px; height: 0px;
 border: solid 5px transparent; border-left: solid 10px #fff;
 position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
}
#supporter .ctn .box .txt .link a:hover { opacity: 0.8;}
@media (max-width: 801px) {
/*	#supporter .bg:before{ padding-top: 50%; top: -12vw; background: url('../img/bg/wave-top-sp.svg') no-repeat 50% 0% / 100% auto;}*/
	#supporter .bg:after{ padding-top: 15%; bottom: -3vw; background: url('../img/bg/wave-top-wh-sp.svg') no-repeat 50% 0% / 100% auto;}
	#supporter .inner-sct { padding: 60px 0 180px;}
	#supporter .ctn { display: block;}
	#supporter .ctn .box { width: 100%; padding: 16px 0;}
	#supporter .ctn .box .tag span { font-size: 14px;}
	#supporter .ctn .box .tag { padding-left: 0px;}
	#supporter .ctn .box .flex { align-items: center;}
	#supporter .ctn .box .prof dl dd { font-size: 16px;}
}
@media (max-width: 481px) {
	#supporter .inner-sct { padding: 20px 0 80px;}
	#supporter .ttl { margin-bottom: 20px;}
	#supporter .ctn .box { padding: 15px 0;}
	#supporter .ctn .box .tag span { font-size: 12px;}
	#supporter .ctn .box .flex { border-width: 2px; border-radius: 12px;}
	#supporter .ctn .box .prof { width: 38%;}
	#supporter .ctn .box .txt { width: 62%;}
	#supporter .ctn .box .prof dl dd { font-size: 12px;}
	#supporter .ctn .box .prof dl dd:before { width: 10px; height: 14px; margin-right: 5px;}
	#supporter .ctn .box .txt { padding: 25px 12px 12px; padding-left: 0px;}
	#supporter .ctn .box .txt p { margin-bottom: 12px; font-size: 12px;}
	#supporter .ctn .box .txt .link a { padding-left: 25px; font-size: 12px;}
	#supporter .ctn .box .txt .link a:before { left: 10px; border: solid 4px transparent; border-left: solid 7px #fff;}
}




#interview { position: relative; z-index: 2;}
#interview .bg { background: #fff;}
/*
#interview .bg:before{ content: ''; display: block; width: 100%; padding-top: 360px; position: absolute; left: 0; top: -300px; z-index: 1;
 background: url('../img/bg/wave-top-wh.svg') no-repeat 50% 0% / 2000px auto;}
*/
#interview .inner-sct { position: relative; padding: 40px 0 80px; z-index: 2;}
#interview .ttl { margin-bottom: 30px;}
#interview .ctn-flex { display: flex; justify-content: center; flex-wrap: wrap; width: 90%; max-width: 1200px; margin: 0 auto 80px;}
#interview .box-voice{ width: 33.33334%; padding: 16px;}
#interview .box-voice a { position: relative; display: block; width: 100%;
 background: #fff; border-radius: 10px; box-shadow: 0px 2px 12px rgba(126,152,184,0.4); overflow: hidden;
 color: #000; text-align: left; text-decoration: none;
}
#interview .box-voice a:before,
#interview .box-voice a:after { content: ''; display: block; width: 0px; height: 0px; position: absolute; }
#interview .box-voice a:before{ right: 0; bottom: 0; border: solid 28px transparent;}
#interview .box-voice a:after { border: solid 8px transparent; border-left: solid 12px #fff; border-right: 0; right: 10px; bottom: 10px;}
#interview .box-voice:nth-child(1) a:before,
#interview .box-voice:nth-child(6) a:before,
#interview .box-voice:nth-child(7) a:before { border-bottom: solid 28px #cdaf81; border-right: solid 28px #cdaf81;}
#interview .box-voice:nth-child(2) a:before,
#interview .box-voice:nth-child(4) a:before,
#interview .box-voice:nth-child(8) a:before { border-bottom: solid 28px #fce952; border-right: solid 28px #fce952;}
#interview .box-voice:nth-child(3) a:before,
#interview .box-voice:nth-child(5) a:before { border-bottom: solid 28px #a4cced; border-right: solid 28px #a4cced;}

#interview .box-voice a dl {}
#interview .box-voice a dl dt { position: relative; padding-top: 46.5%; overflow: hidden;}
#interview .box-voice a dl dt img { position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(-50%,-50%); transition: 0.2s linear;}
#interview .box-voice a dl dd.tit { padding: 12px 20px 0px; font-size: clamp(14px,1.4vw,20px); font-weight: 700;}
#interview .box-voice a dl dd.name{ padding: 8px 20px 20px; font-size: clamp(12px,1.2vw,16px); font-weight: 700;}
#interview .box-voice a dl dd.name::before { content: ''; display: inline-block; width: 20px; height: 20px;
 margin-right: 8px; vertical-align: middle;
 background-size: 100% auto; background-repeat: no-repeat; background-position: 50% 50%;
}
#interview .box-voice:nth-child(1) a dl dd.name::before,
#interview .box-voice:nth-child(6) a dl dd.name::before,
#interview .box-voice:nth-child(7) a dl dd.name::before {
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100"><g fill="%23cdaf81"><path d="M59.5,54.7c7.7-3.6,13-11.3,13-20.3s-10.1-22.5-22.5-22.5-22.5,10.1-22.5,22.5,5.3,16.8,13,20.3c-14.5,4.1-25.2,17.5-25.2,33.4h69.3c0-15.9-10.7-29.3-25.2-33.4Z"/></g></svg>');
}
#interview .box-voice:nth-child(2) a dl dd.name::before,
#interview .box-voice:nth-child(4) a dl dd.name::before,
#interview .box-voice:nth-child(8) a dl dd.name::before {
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100"><g fill="%23fce952"><path d="M59.5,54.7c7.7-3.6,13-11.3,13-20.3s-10.1-22.5-22.5-22.5-22.5,10.1-22.5,22.5,5.3,16.8,13,20.3c-14.5,4.1-25.2,17.5-25.2,33.4h69.3c0-15.9-10.7-29.3-25.2-33.4Z"/></g></svg>');
}
#interview .box-voice:nth-child(3) a dl dd.name::before,
#interview .box-voice:nth-child(5) a dl dd.name::before {
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100"><g fill="%23a4cced"><path d="M59.5,54.7c7.7-3.6,13-11.3,13-20.3s-10.1-22.5-22.5-22.5-22.5,10.1-22.5,22.5,5.3,16.8,13,20.3c-14.5,4.1-25.2,17.5-25.2,33.4h69.3c0-15.9-10.7-29.3-25.2-33.4Z"/></g></svg>');
}
#interview .box-voice a dl dd.name span { display: inline-block; vertical-align: middle;}
#interview .box-voice a:hover { opacity: 0.85;}
#interview .box-voice a:hover dl dt img { transform: translate(-50%,-50%) scale(1.06);}

@media (max-width: 1001px) {
	#interview .box-voice { width: 50%; padding: 12px;}
	#interview .box-voice a dl dd.tit { font-size: 2.0vw;}
	#interview .box-voice a dl dd.name{ font-size: 1.5vw;}
}
@media (max-width: 801px) {
/*	#interview .bg:before{ padding-top: 50%; top: -12vw; background: url('../img/bg/wave-top-wh-sp.svg') no-repeat 50% 0% / 100% auto;}*/
}
@media (max-width: 641px) {
	#interview .box-voice { width: 100%; padding: 12px 0;}
	#interview .box-voice a dl dd.tit { font-size: 3.0vw;}
	#interview .box-voice a dl dd.name{ font-size: 13px;}
}
@media (max-width: 481px) {
	#interview .inner-sct { padding: 20px 0 60px;}
	#interview .ttl { margin-bottom: 20px;}
	#interview .ctn-flex { margin-bottom: 60px;}
	#interview .box-voice { padding: 8px 0;}
	#interview .box-voice a dl dd.tit { font-size: 16px;}
}


#interview .ctn { width: 90%; max-width: 780px; margin: 0 auto;}
#interview .box-case { display: block; width: 100%; padding: 12px 0;}
#interview .box-case a { position: relative; display: block; width: 100%; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0px 2px 12px rgba(126,152,184,0.4);
 color: #000; text-align: left; text-decoration: none;
}
#interview .box-case a:before,
#interview .box-case a:after { content: ''; display: block; width: 0px; height: 0px; position: absolute; }
#interview .box-case a:before{ border: solid 28px transparent; border-bottom: solid 28px #0c66a5; border-right: solid 28px #0c66a5; right: 0; bottom: 0;}
#interview .box-case a:after { border: solid 8px transparent; border-left: solid 12px #fff; border-right: 0; right: 10px; bottom: 10px;}

#interview .box-case a dl { position: relative; display: table; width: 100%; min-height: 172px; z-index: 1;}
#interview .box-case a dl dt,
#interview .box-case a dl dd { display: table-cell; width: 50%; vertical-align: middle;}
#interview .box-case a dl dt { position: relative; overflow: hidden;}
#interview .box-case a dl dt img { position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(-50%,-50%); transition: 0.2s linear;}
#interview .box-case a dl dd { padding: 30px; font-size: clamp(18px,2.8vw,24px); font-weight: 700;}

#interview .box-case a:hover { opacity: 0.85;}
#interview .box-case a:hover dl dt img { transform: translate(-50%,-50%) scale(1.06);}
@media (max-width: 641px) {
	#interview .box-case a dl dt,
	#interview .box-case a dl dd { display: block; width: 100%;}
	#interview .box-case a dl dt { position: relative; padding-top: 46.5%;}
	#interview .box-case a dl dd { padding: 20px;}
}
@media (max-width: 481px) {
	#interview .box-case { padding: 8px 0;}
	#interview .box-case a dl dd { padding: 12px 20px;}
}





#ft { background: #fff;}
#ft .copyright p { color: #636363;}
