@charset "utf-8";
/* --------------------------------------------------
	reset
-------------------------------------------------- */
*,
::before,
::after { box-sizing: border-box;}

html { line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;}
body { margin: 0;}
main { display: block;}
p, table, blockquote, address, pre, iframe, form, figure, dl { margin: 0;}
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0;}
ul, ol { margin: 0; padding: 0; list-style: none;}
dd { margin-left: 0;}
hr { box-sizing: content-box; height: 0; overflow: visible; border-top-width: 1px; margin: 0; clear: both; color: inherit;}
pre { font-family: monospace, monospace; font-size: inherit;}
address { font-style: inherit;}
a { background-color: transparent; text-decoration: none; color: inherit;}
abbr[title] { text-decoration: underline dotted;}
code, kbd, samp { font-family: monospace, monospace; font-size: inherit;}
small { font-size: 80%;}
sub,
sup { line-height: 0; position: relative; vertical-align: baseline;}

svg, img, embed, object, iframe { vertical-align: bottom;}

/* Forms */
/* ============================================ */
/*
button, input, optgroup, select, textarea { -webkit-appearance: none; appearance: none; background: transparent; padding: 0; margin: 0; border-radius: 0;
 color: inherit; font: inherit; text-align: inherit; text-transform: inherit; vertical-align: middle;
}
*/
button, [type="button"], [type="reset"], [type="submit"] { cursor: pointer;}
button:disabled, [type="button"]:disabled, [type="reset"]:disabled, [type="submit"]:disabled { cursor: default;}
:-moz-focusring { outline: auto;}
select:disabled { opacity: inherit;}
option { padding: 0;}
fieldset { margin: 0; padding: 0; min-width: 0;}
legend { padding: 0;}

progress { vertical-align: baseline;}
textarea { overflow: auto;}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button { height: auto;}
[type="search"] { outline-offset: -2px;}
[type="search"]::-webkit-search-decoration { -webkit-appearance: none;}

::-webkit-file-upload-button { -webkit-appearance: button; font: inherit;}
[type="number"] { -moz-appearance: textfield;}
label[for] { cursor: pointer;}
details { display: block;}
summary { display: list-item;}
[contenteditable]:focus { outline: auto;}

table { border-color: inherit; border-collapse: collapse;}
td,
th { vertical-align: top; padding: 0;}

@media (max-width: 481px) {
}



/*		font-style
-------------------------------------------------- */
body {
	font-family: "Noto Sans JP","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;
	font-size: 16px;
	*font-size:small;
	*font:x-small;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
input, textarea {font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;}

.min {font-family: "Noto Serif JP","游明朝", "Yu Mincho", "YuMincho", serif;}

::selection{ background: #feffaf; color: #000;}
::-moz-selection{ background: #feffaf; color: #000;}


a { color:#002159; text-decoration: underline;}
a:link   { color:#002159;}
a:visited{ color:#002159;}
a:hover  { color:#002159;}
a:active { color:#002159;}

em{ font-style: normal;}


/*		utility
-------------------------------------------------- */
.cf{ clear: both;}
.cf:after{ content: ''; display: block; clear: both;}

@media (max-width: 641px) {
}


#contact ul li label.error {
	position: absolute; top: -30px; left: -10px;
	padding: 5px 8px;
	background: #d00; border-radius: 5px;
	color: #fff; font-size: 12px;
	opacity: 0;
	animation: .5s showError linear forwards .2s;
}
#contact ul li label.error:before{ content: ''; display: block; width: 8px; height: 8px; background: #d00;
	transform: rotate(45deg);
	position: absolute; bottom: -4px; left: 20px;
}
@keyframes showError{
	100%{ opacity: 1;}
}



#hd { position: relative; left: 0; top: 0; width: 100%; background: #fff;}
#hd .inner-hd { position: relative; width: 94%; margin: 0 auto; padding: 14px 0 16px;}
#hd .hd-ctn { display: flex; width: 100%; justify-content: space-between; align-items: center;}
#hd .hd-logo { width: 40%; }
#hd .hd-logo h1 { width: 100%; max-width: 240px;}
#hd .hd-logo h1 a { display: block;}
#hd .hd-logo h1 a img { width: 100%;}
#hd .hd-btn { width: 50%;}
#hd .hd-btn ul { font-size: 0; text-align: right;}
#hd .hd-btn ul li { display: inline-block; width: 50%; max-width: 290px; padding: 0 8px;}
#hd .hd-btn ul li a { display: block; width: 100%; border-radius: 10px; overflow: hidden;}
#hd .hd-btn ul li a img { width: 100%;}
#hd .hd-btn ul li:nth-child(1) a { box-shadow: 0 3px 0 #811122;}
#hd .hd-btn ul li:nth-child(2) a { box-shadow: 0 3px 0 #3f8531;}
#hd .hd-btn ul li a:hover { opacity: 0.8;}
@media (max-width: 641px) {
	#hd .inner-hd { padding: 8px 0;}
	#hd .hd-btn { display: none;}
}

.pagetop { position: fixed; bottom: 2rem; right: 1rem; width: 3rem; height: 3rem; z-index: 100;}
.pagetop a { display: block; background: rgba(119, 119, 119, 0.1);
 font-size: 1rem; text-align: center; text-decoration: none; line-height: 3rem;
}
.pagetop a:hover { color: #00a5d4;}

.fix-bnr { position: fixed; left: 0; bottom: 0; width: 100%; background: rgba(255,255,255,0.9);}
.fix-bnr .inner { width: 94%; max-width: 1000px; margin: 0 auto; padding: 20px 0;}
.fix-bnr ul { font-size: 0; text-align: center;}
.fix-bnr ul li { width: 50%; padding: 0 15px}
.fix-bnr ul li a { display: block; width: 100%; max-width: 460px; margin: 0 auto; border-radius: 16px; overflow: hidden;}
.fix-bnr ul li a img { width: 100%;}
.fix-bnr ul li:nth-child(1) a { box-shadow: 0 6px 0 #811122;}
.fix-bnr ul li:nth-child(2) a { box-shadow: 0 6px 0 #3f8531;}
.fix-bnr ul li a:hover { opacity: 0.8;}
/* PC時は画像ボタン表示、テキストボタン非表示 */
.pc-btn { display: inline-block; }
.sp-btn { display: none; }
@media (max-width: 481px) {
	.fix-bnr .inner { width: 100%;padding: 10px 0 0;}
	.fix-bnr ul li { padding: 0;}
	.fix-bnr ul li a { border-radius: 0;}
	.fix-bnr ul li:nth-child(1) a { box-shadow: 0 4px 0 #811122;}
	.fix-bnr ul li:nth-child(2) a { box-shadow: 0 4px 0 #3f8531;}
/* モバイル時は逆にする */
  .pc-btn { display: none; }
  .sp-btn { display: inline-block; width: 50%; padding: 0; }
  .sp-btn a {
    display: flex;                  /* アイコンと文字を横並び */
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 20px 0;
    border-radius: 0;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    background: #fff;
  }
  .sp-btn a img.icon {
    width: 20px;
    height: auto;
  }
  /* 電話ボタンの色 */
  .sp-btn:nth-of-type(3) a { 
    background: #ba031f; 
    color: #fff; 
  }
  /* メールボタンの色 */
  .sp-btn:nth-of-type(4)  a { 
    background: #53a843; 
    color: #fff; 
  }
}
/* アニメでスッと下に逃がす */
.fix-bnr { transition: transform .2s ease; will-change: transform; }
.kbd-open .fix-bnr { transform: translateY(120%); pointer-events: none; }


#ft { background: #3e62a9;}
#ft .inner-ft { padding: 12px 0 140px;}
#ft .ft-ctn { width: 92%; max-width: 1000px; margin: 0 auto; padding: 12px 0;}
#ft .ft-ctn h3 { color: #fff; font-size: 18px; text-align: center;}
#ft .ft-ctn h3 a { display: block; width: 60%; max-width: 250px; margin: 0 auto;}
#ft .ft-ctn h3 a img { width: 100%;}
#ft .ft-ctn p { color: #fff; font-size: 16px; text-align: center;}
#ft .privacy { padding: 25px 0; font-size: 12px; text-align: center;}
#ft .privacy a { color: #fff; text-decoration:none; }
#ft .copyright { padding: 25px 0;}
#ft .copyright p { color: #fff; font-size: 12px; text-align: center;}
@media (max-width: 481px) {
	#ft .inner-ft { padding: 12px 0 60px;}
	#ft.none .inner-ft { padding: 12px 0 20px;}
	#ft .privacy { padding: 18px 0;}
	#ft .copyright { padding: 18px 0;}
	#ft .ft-ctn p { font-size: 13px;}
}


#kv {
	background: #4973de url('./img/bg-kv.jpg') no-repeat 50% 50% / auto 100%;	
}
#kv .inner-kv { width: 100%;}
#kv h1 { text-align: center;}
#kv h1 img { width: 60%; max-width: 640px;}
#kv h1 img.sp { display: none;}
@media (max-width: 641px) {
	#kv h1 img { width: 100%; max-width: 100%;}
	#kv h1 img.pc { display: none;}
	#kv h1 img.sp { display: block;}
}



.ttl { text-align: center;}
.ttl h2 { font-size: 32px; font-weight: 700;}
.ttl h2 span { display: inline-block; color: #3d61a9; font-size: 44px; line-height: 1.4; border-bottom: solid 3px #3d61a9;}
@media (max-width: 801px) {
	.ttl h2 { font-size: 4.8vw;}
	.ttl h2 span { font-size: 6.0vw;}
}
@media (max-width: 481px) {
}



#problem { background: #f7f7f7;}
#problem .inner-sct { padding: 60px 0; background: #f7f7f7;}
#problem .ttl { margin-bottom: 50px;}
#problem .ctn { position: relative; width: 100%; max-width: 1160px; margin: 0 auto;}
#problem .ctn:after { content: ''; display: block; width: 100%; height: 460px; background: url('./img/bg-1.jpg') no-repeat 50% 100% / auto 380px;}
#problem .ctn ul { position: absolute; width: 100%; height: 100%;}
#problem .ctn ul li { position: absolute; display: inline-block; padding: 18px 20px; background: #fff; border-radius: 16px; box-shadow: 0 2px 8px #ccc; font-size: 20px; font-weight: 700;}
#problem .ctn ul li span.marker{ background: linear-gradient(transparent 50%, #f8e250 50%);}
#problem .ctn ul li:nth-child(1) { width: 320px; left: 30px; top: 90px;}
#problem .ctn ul li:nth-child(2) { width: 420px; left: 50%; top: 0; transform: translateX(-48%);}
#problem .ctn ul li:nth-child(3) { width: 300px; right: 30px; top: 90px;}
#problem .ctn ul li:nth-child(4) { width: 330px; left: 10px; bottom: 90px;}
#problem .ctn ul li:nth-child(5) { width: 300px; right: 10px; bottom: 90px;}
#problem .ctn ul li br.sp { display: none;}

#problem .arw:before { content: ''; display: block; width: 0px; height: 0px; margin: 0 auto 20px;
 border: solid 150px transparent; border-top: solid 25px #134987; border-bottom: 0px;
}
#problem .arw p { font-size: 38px; font-weight: 700; line-height: 1.4; text-align: center;}
@media (max-width: 1201px) {
	#problem .ctn:after { height: 480px;}
	#problem .ctn ul li { font-size: 1.6vw;}
	#problem .ctn ul li:nth-child(1) { top: 120px; width: 280px;}
	#problem .ctn ul li:nth-child(3) { top: 120px; width: 260px;}
}
@media (max-width: 1001px) {
	#problem .ctn:after { height: 360px;}
	#problem .ctn ul { position: relative; width: 86%; max-width: 500px; margin: 0 auto; height: auto; }
	#problem .ctn ul li { position: relative; display: block; font-size: 18px;}
	#problem .ctn ul li:nth-child(1) { width: 65%; max-width: 300px; left: auto; top: auto; margin: 0 0 20px;}
	#problem .ctn ul li:nth-child(2) { width: 85%; max-width: 400px; left: auto; top: auto; transform: translateX(0%); margin: 0 0 20px auto;}
	#problem .ctn ul li:nth-child(3) { width: 60%; max-width: 280px; right: auto; top: auto; margin: 0 0 20px;}
	#problem .ctn ul li:nth-child(4) { width: 90%; max-width: 440px; left: auto; bottom: auto; margin: 0 0 20px auto;}
	#problem .ctn ul li:nth-child(5) { width: 92%; max-width: 420px; right: auto; bottom: auto; margin: 0 auto;}
	#problem .ctn ul li br.pc { display: none;}
	#problem .ctn ul li br.sp { display: block;}
}
@media (max-width: 801px) {
	#problem .ctn ul li { font-size: 16px;}
	#problem .arw:before { margin: 0 auto 12px; border: solid 80px transparent; border-top: solid 50px #134987; border-bottom: 0px;}
	#problem .arw p { font-size: 4.6vw;}
}
@media (max-width: 481px) {
	#problem .inner-sct { padding: 40px 0 30px;}
	#problem .ttl { margin-bottom: 20px;}
	#problem .ctn:after { height: 200px; background-size: auto 200px;}
	#problem .ctn ul li { padding: 12px 15px; border-radius: 10px; box-shadow: 0 1px 4px #ccc; font-size: 13px;}
	#problem .ctn ul li:nth-child(1) { margin: 0 0 12px;}
	#problem .ctn ul li:nth-child(2) { margin: 0 0 12px auto;}
	#problem .ctn ul li:nth-child(3) { margin: 0 0 12px;}
	#problem .ctn ul li:nth-child(4) { margin: 0 0 12px auto;}
	#problem .arw:before { margin: 0 auto 8px; border: solid 60px transparent; border-top: solid 12px #134987; border-bottom: 0px;}
	#problem .arw p { font-size: 18px;}
}


#merit {}
#merit .inner-sct { padding: 80px 0;}
#merit .ttl { margin-bottom: 30px;}
#merit .ctn { width: 92%; max-width: 1100px; margin: 0 auto 40px;}
#merit .ctn ul { font-size: 0; text-align: center;}
#merit .ctn ul li { position: relative; display: inline-block; width: 33.333334%; padding: 30px 12px 0; vertical-align: top;}
#merit .ctn ul li img.icn { width: 20%; max-width: 82px; position: absolute; left: 10%; top: 0;}
#merit .ctn ul li dl { width: 100%; min-height: 370px; padding: 50px 40px 0; background: #fff; border-radius: 16px; box-shadow: 0 2px 8px #ccc;}
#merit .ctn ul li dl dt { margin-bottom: 18px; font-size: 26px; font-weight: 700; text-align: center;}
#merit .ctn ul li dl dt img { display: block; width: 40%; max-width: 130px; margin: 0 auto 8px;}
#merit .ctn ul li dl dt span { background: linear-gradient(transparent 50%, #f8e250 50%);}
#merit .ctn ul li dl dd { font-size: 22px; font-weight: 700; text-align: justify;}
#merit .ctn ul li dl dd sup { font-size: 14px; vertical-align: super;}
#merit p { color: #b9001b; font-size: 32px; font-weight: 700; letter-spacing: 0.025rem; text-align: center;}
@media (max-width: 1201px) {
	#merit .ctn ul li dl { min-height: 350px; padding: 40px 25px 0;}
	#merit .ctn ul li dl dt { font-size: 2.3vw;}
	#merit .ctn ul li dl dd { font-size: 2.0vw;}
}
@media (max-width: 801px) {
	#merit .ctn { width: 80%; max-width: 420px;}
	#merit .ctn ul li { display: block; width: 100%; padding: 30px 0px 20px;}
	#merit .ctn ul li dl { min-height: auto; padding: 40px 30px 30px;}
	#merit .ctn ul li dl dt { font-size: 3.0vw;}
	#merit .ctn ul li dl dd { font-size: 2.4vw;}
	#merit p { font-size: 3.8vw;}
}
@media (max-width: 481px) {
	#merit .inner-sct { padding: 40px 0;}
	#merit .ttl { margin-bottom: 10px;}
	#merit .ctn { margin: 0 auto 12px;}
	#merit .ctn ul li { padding: 20px 0px 12px;}
	#merit .ctn ul li img.icn { left: 6%;}
	#merit .ctn ul li dl { padding: 30px 30px 20px; border-radius: 10px; box-shadow: 0 1px 4px #ccc;}
	#merit .ctn ul li dl dt { margin-bottom: 8px; font-size: 20px;}
	#merit .ctn ul li dl dd { font-size: 15px;}
	#merit p { font-size: 20px;}
	#merit p span { display: block;}
}



#cost { background: #f7f7f7;}
#cost .inner-sct { padding: 60px 0;}
#cost .ttl { margin-bottom: 30px;}
#cost .ctn { width: 90%; max-width: 1000px; margin: 0 auto; padding: 0 20px; padding-right: 30%; background: url('./img/bg-cost.png') no-repeat 100% 0% / 34% auto;}
#cost .ctn figure { margin-bottom: 20px;}
#cost .ctn figure img { width: 100%; max-width: 640px;}
#cost .ctn ul {}
#cost .ctn ul li { font-size: 24px; font-weight: 700;}
#cost .ctn p { font-size: 18px;}
@media (min-width: 1401px) {
}
@media (min-width: 1201px) {
	#cost .ctn { padding-right: 360px; background-size: auto 100%;}
}
@media (max-width: 801px) {
	#cost .ctn { padding: 0 20px 300px; background-position: 50% 100%; background-size: auto 300px;}
	#cost .ctn figure { margin-bottom: 12px;}
}
@media (max-width: 641px) {
	#cost .ctn ul li { font-size: 20px;}
	#cost .ctn p { font-size: 16px;}
}
@media (max-width: 481px) {
	#cost .inner-sct { padding: 40px 0;}
	#cost .ttl { margin-bottom: 12px;}
	#cost .ctn { padding: 0 6px 180px; background-size: auto 180px;}
	#cost .ctn ul li { font-size: 13px;}
	#cost .ctn p { font-size: 11px;}
}



#card .inner-sct { padding: 60px 0;}
#card .ttl { margin-bottom: 50px;}
#card .ctn-flex { display: flex; justify-content: space-between; width: 88%; max-width: 980px; margin: 0 auto 30px;}
#card .card { width: 48.5%;}
#card .card .inner { position: relative; padding: 10px; border-radius: 10px; box-shadow: 0 2px 8px #ccc; overflow: hidden;}
#card .card .inner:before { content: ''; display: block; width: 0px; height: 0px;
 border: solid 32px transparent; border-top: solid 32px #3d61a9; border-left: solid 32px #3d61a9;
 position: absolute; left: 0; top: 0;
}
#card .card figure img { width: 100%;}
#card .card dl { width: 100%; min-height: 170px; padding-top: 30px; text-align: center;}
#card .card dl dt { margin-bottom: 10px; font-size: 32px; font-weight: 700; line-height: 1;}
#card .card dl dd { font-size: 20px; line-height: 1.4;}
#card .card dl dd span { display: block; margin-bottom: 10px; font-size: 24px; font-weight: 700;}
#card .card dl dd br { display: none;}
#card .aside { width: 88%; max-width: 980px; margin: 0 auto;}
#card .aside ul { display: flex; justify-content: space-between;}
#card .aside ul li { width: 30%; font-size: 32px; font-weight: 700; line-height: 1.2;}
#card .aside ul li span { position: relative; display: block; padding: 45px 0; border-radius: 10px; box-shadow: 0 2px 8px #ccc; overflow: hidden;
 letter-spacing: 0.05rem; text-align: center;
}
#card .aside ul li span:before { content: ''; display: block; width: 0px; height: 0px;
 border: solid 32px transparent; border-top: solid 32px #3d61a9; border-left: solid 32px #3d61a9;
 position: absolute; left: 0; top: 0;
}
@media (max-width: 801px) {
	#card .card dl dt { margin-bottom: 8px; font-size: 4.2vw;}
	#card .card dl dd { font-size: 2.0vw;}
	#card .card dl dd span { font-size: 3.2vw;}
	#card .card dl dd br { display: block;}
	#card .aside ul li { font-size: 4.0vw;}
	#card .aside ul li span { padding: 30px 0;}
}
@media (max-width: 641px) {
	#card .ttl { margin-bottom: 30px;}
	#card .ctn-flex { display: block; margin: 0 auto;}
	#card .card { width: 100%; padding: 10px 0;}
	#card .card .inner { padding: 12px;}
	#card .card .inner:before { border: solid 20px transparent; border-top: solid 20px #3d61a9; border-left: solid 20px #3d61a9;}
	#card .card dl { min-height: auto; padding: 16px 0 6px;}
	#card .card dl dt { margin-bottom: 6px; font-size: 24px;}
	#card .card dl dd { font-size: 14px;}
	#card .card dl dd span { margin-bottom: 4px; font-size: 18px;}
	#card .card dl dd br { display: none;}
	#card .aside ul { display: block;}
	#card .aside ul li { width: 100%; padding: 10px 0; font-size: 20px;}
	#card .aside ul li span:before { border: solid 20px transparent; border-top: solid 20px #3d61a9; border-left: solid 20px #3d61a9;}
}
@media (max-width: 481px) {
	#card .inner-sct { padding: 30px 0;}
	#card .ttl { margin-bottom: 12px;}
	#card .card .inner { border-radius: 8px; box-shadow: 0 1px 4px #ccc;}
	#card .card dl { padding: 12px 0 0px;}
	#card .card dl dt { margin-bottom: 4px; font-size: 20px;}
	#card .card dl dd { font-size: 13px;}
	#card .card dl dd span { margin-bottom: 4px; font-size: 14px;}
	#card .aside ul li { padding: 6px 0; font-size: 18px;}
	#card .aside ul li span { padding: 16px 0; box-shadow: 0 1px 4px #ccc;}
}


#flow { background: #f7f7f7;}
#flow .inner-sct { padding: 60px 0;}
#flow .ttl { margin-bottom: 40px;}
#flow .ctn { width: 92%; max-width: 780px; margin: 0 auto;}
#flow .ctn ul li { padding-bottom: 16px;}
#flow .ctn ul li:after { content: ''; display: block; width: 0px; height: 0px; margin: 20px auto 0;
 border: solid 80px transparent; border-top: solid 18px #f8e250; border-bottom: 0px;
}
#flow .ctn ul li:last-child:after { content: none;}
#flow .ctn ul li dl { position: relative; width: 100%; height: 150px; background: #fff; border-radius: 10px; box-shadow: 0 2px 8px #ccc;}
#flow .ctn ul li dl:after { content: ''; display: block; width: 210px; height: 100%; position: absolute; right: 0; top: 0;
 border-top-right-radius: 10px; border-bottom-right-radius: 10px;
}
#flow .ctn ul li:nth-child(1) dl:after { background: url('./img/step-1.jpg') no-repeat 50% 50% / cover;}
#flow .ctn ul li:nth-child(2) dl:after { background: url('./img/step-2.jpg') no-repeat 50% 50% / cover;}
#flow .ctn ul li:nth-child(3) dl:after { background: url('./img/step-3.jpg') no-repeat 50% 50% / cover;}
#flow .ctn ul li:nth-child(4) dl:after { background: url('./img/step-4.jpg') no-repeat 50% 50% / cover;}
#flow .ctn ul li dl dt { position: absolute; left: -30px; top: -25px; width: 90px;}
#flow .ctn ul li dl dt img { width: 100%; border-radius: 50%;}
#flow .ctn ul li dl dd { position: absolute; left: 0; top: 50%; transform: translateY(-50%); padding: 0px 230px 0 70px; font-size: 26px; font-weight: 700;}
#flow .ctn ul li dl dd span { display: inline-block; padding-left: 20px; font-size: 20px; vertical-align: middle;}
#flow .ctn ul li dl dd span.note { display: block; padding-left: 0px; font-size: 18px; font-weight: 400;}
#flow .ctn ul li dl dd br.sp { display: none;}
@media (max-width: 801px) {
	#flow .ctn { width: 86%;}
	#flow .ctn ul li dl dt { width: 60px;}
	#flow .ctn ul li dl dd { padding: 0px 200px 0 50px; font-size: 2.8vw;}
	#flow .ctn ul li dl dd span { padding-left: 12px; font-size: 2.0vw;}
	#flow .ctn ul li dl dd span.note { padding-left: 0px; font-size: 12px;}
}
@media (max-width: 641px) {
	#flow .ctn ul li dl { height: 120px;}
	#flow .ctn ul li dl:after { width: 180px;}
	#flow .ctn ul li dl dt { left: -10px; top: -20px;}
	#flow .ctn ul li dl dd { padding: 0px 200px 0 60px; font-size: 20px;}
	#flow .ctn ul li dl dd span { display: block; padding-left: 0px; font-size: 16px;}
	#flow .ctn ul li dl dd br.pc { display: none;}
	#flow .ctn ul li dl dd br.sp { display: block;}
}
@media (max-width: 481px) {
	#flow .inner-sct { padding: 30px 0;}
	#flow .ttl { margin-bottom: 20px;}
	#flow .ctn ul li { padding-bottom: 10px;}
	#flow .ctn ul li:after { margin: 12px auto 0; border: solid 50px transparent; border-top: solid 12px #f8e250; border-bottom: 0px;}
	#flow .ctn ul li dl { height: 90px; border-radius: 6px; box-shadow: 0 1px 4px #ccc;}
	#flow .ctn ul li dl:after { width: 108px; border-top-right-radius: 6px; border-bottom-right-radius: 6px;}
	#flow .ctn ul li dl dt { width: 45px; }
	#flow .ctn ul li dl dd { padding: 0px 110px 0 30px; font-size: 15px;}
	#flow .ctn ul li dl dd span { font-size: 12px;}
	#flow .ctn ul li dl dd span.note { font-size: 10px;}
}

/* ===== 信用・実績セクション ===== */
#trust { padding: 48px 0; }
#trust .ttl { margin-bottom: 40px;}
/*#trust .ttl h2 { line-height:1.4; }*/
#trust .ctn { width: 92%; max-width: 780px; margin: 0 auto;}

.trust-points {
  list-style:none; 
  padding:0; 
  margin:0;
}
@media (min-width: 768px) {
  .trust-points {  }
}
@media (min-width: 1024px) {
  .trust-points {  }
}

.trust-kumi {
  background:#fff; 
  border:1px solid #e5e7eb; 
  border-radius:16px; 
  padding:15px; 
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.trust-kumi h3 {
  font-size:1.1rem; 
  margin: 8px 0 8px; 
  font-weight:700;
}
.trust-kumi p { margin:0 0 8px; }
.trust-kumi .note { color:#6b7280; font-size:.9rem; }


.faq { 
  margin-top: 28px; 
  border:1px solid #e5e7eb; 
  border-radius:16px; 
  padding:16px;
  overflow: hidden;           /* ← 角丸外へのはみ出しを防止 */
}

.faq-ttl { font-size:1.05rem; margin:4px 0 8px; }

.faq details {               /* ここには余白や罫線を付けない */
  margin:0;
}

/* ← 点線は details 自体に。つまり“次の質問の上”に表示される */
.faq details{
  border-top:1px dashed #e5e7eb;  /* 区切り線 */
  padding:12px 0;                 /* 上下の余白 */
  margin:0;
}


.faq summary { 
  cursor:pointer; 
  font-weight:600; 
  list-style:none;
  padding:12px 0;            /* ← 余白はsummaryに */
  position: relative;
}
.faq summary::-webkit-details-marker { display:none; }

/* 質問(summary)の先頭にQを付与 */
.faq summary::before {
  content: "Q. ";
  font-weight: bold;
  color: #F00;
  margin-right: .25em;
}

/* 疑似要素で矢印を追加 */
.faq summary::after {
  content: "＞";                /* 初期状態（右向き） */
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);  /* ＞を下向きに（90度回転） */
  transform-origin: center;
  transition: transform 0.3s ease;
  font-weight: bold;
}
/* 開いたときに矢印を上向きに */
.faq details[open] summary::after {
  transform: translateY(-50%) rotate(-90deg); /* ＞を上向きに */
}



/* 本文は閉じたら非表示 */
.faq .faq-body { 
  padding:0 0 12px;          /* ← 余白は本文側に */
}
/*.faq details:not([open]) .faq-body { display:none; }*/

/* スムーズな開閉（max-heightトランジション） */
.faq .faq-body {
  max-height: 0;
  overflow: hidden;
  padding: 0;                 /* 閉じ状態は余白ゼロ */
  opacity: 0;
  transition: max-height .28s ease, opacity .2s ease, padding .28s ease;
}
/* 答え(faq-body)の先頭にAを付与 */
.faq .faq-body::before {
  content: "A. ";
  font-weight: bold;
  color: #007acc;   /* 色を変えても良い */
  margin-right: .25em;
}

.faq details[open] .faq-body {
  max-height: 500px;          /* 充分に大きい値にしておく */
  padding: 8px 0 12px 5px;        /* 開いた時だけ余白を付与 */
  opacity: 1;
}

/* 開いた項目の下に余白を作って詰まりを回避 */
.faq details[open]{margin-bottom:12px;}


.trust-cta { 
  margin-top: 28px; 
  text-align:center; 
  background:linear-gradient(180deg, #eff6ff 0%, #ffffff 100%); 
  border:1px solid #dbeafe; 
  border-radius:16px; 
  padding:20px;
}
.trust-cta p { margin:0 0 12px; font-weight:600; }
.trust-cta ul { 
  display:flex; 
  gap:12px; 
  justify-content:center; 
  flex-wrap:wrap; 
  list-style:none; 
  padding:0; 
  margin:0;
}
.trust-cta .btn {
  display: inline-flex;       /* アイコンと文字を横並びに */
  padding:12px 18px; 
  border-radius:999px; 
  text-decoration:none; 
  font-weight:700; 
  transition: all .2s ease;
  align-items: center;        /* 垂直中央揃え */
  gap: 8px;                   /* アイコンと文字の余白 */
}
.trust-cta .btn .icon {
  width: 18px;                /* アイコンサイズ調整 */
  height: auto;
  flex-shrink: 0;             /* アイコンが縮まないよう固定 */
}
.trust-cta .btn-outline { 
  background:#fff; 
  color:#1f2937; 
  border:1px solid #cbd5e1;
}
.trust-cta .btn-outline:hover { 
  background:#f8fafc; 
  transform: translateY(-1px);
}

#contact {}
#contact .inner-sct { padding: 80px 0;}
#contact .ttl { margin-bottom: 50px;}
#contact .ctn { width: 92%; max-width: 850px; margin: 0 auto 40px;}
#contact .box { width: 100%; padding: 10px 50px; background: #fff; border-radius: 16px; box-shadow: 0 2px 8px #ccc;}
#contact .box ul { padding: 10px 0;}
#contact .box ul li { border-top: dotted 1px #333;}
#contact .box ul li.none { border-top: none;}
#contact .box ul li:last-child { border-bottom: dotted 1px #333;}
#contact .box ul li dl { display: table; width: 100%;}
#contact .box ul li dl dt,
#contact .box ul li dl dd { display: table-cell; vertical-align: top;}
#contact .box ul li dl dt { width: 250px; padding: 16px 0 0; padding-left: 12px; font-size: 18px; font-weight: 700; line-height: 1.2;}
#contact .box ul li dl dt.row { padding: 6px 0 0; padding-left: 12px;}
#contact .box ul li dl dt span.tit { display: inline-block; vertical-align: middle;}
#contact .box ul li dl dt span.must { display: inline-block; margin-left: 15px; padding: 0 8px 1px; background: #b9001b; color: #fff; font-size: 14px; line-height: 1.4; vertical-align: middle;}
#contact .box ul li dl dd { position: relative; width: auto; padding: 12px 0; padding-right: 30px; font-size: 14px;}
#contact .box ul li dl dd.pr25 { padding-right: 220px;}
#contact .box ul li dl dd input[type="text"],
#contact .box ul li dl dd input[type="tel"],
#contact .box ul li dl dd input[type="email"] { display: inline-block; width: 100%; padding: 6px; border: solid 1px #bfbfbf; background: #f7f7f7; vertical-align: middle;}
#contact .box ul li dl dd input[type="text"].zip { max-width: 160px;}
#contact .box ul li dl dd input.w30 { max-width: 160px;}
#contact .box ul li dl dd input.w50 { max-width: 280px;}
#contact .box ul li dl dd textarea { display: inline-block; width: 100%; height: 100px; padding: 6px; border: solid 1px #bfbfbf; background: #f7f7f7; vertical-align: middle;}
#contact .box ul li dl dd span.row { position: relative; display: block; padding: 4px 0;}
#contact .box ul li dl dd span.row.pl { padding-left: 130px;}
#contact .box ul li dl dd span.row span.tit { position: absolute; left: 0; top: 9px; font-size: 17px;}
#contact .box ul li dl dd span.post { margin-right: 15px;}
#contact .box ul li dl dd span.note { display: block; padding-top: 6px; font-size: 14px;}
#contact .box ul li dl dd span.note_25 { display: block; width: 200px; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 14px; line-height: 1.2;}
#contact .box ul li dl dd span.unit { margin-left: 10px;}
#contact .box ul li dl dd label.radio { position: relative; display: block; padding: 0px; padding-left:30px;}
/*
#contact .box ul li dl dd label.radio::before,
#contact .box ul li dl dd label.radio::after { content: ""; display: block; border-radius: 50%; position: absolute; transform: translateY(-50%); top: 50%;}
#contact .box ul li dl dd label.radio::before { background-color: #f7f7f7; border: 1px solid #bfbfbf;	width: 20px; height: 20px; left: 5px;}
#contact .box ul li dl dd label.radio::after { background-color: #3d61a9; opacity: 0; width: 12px; height: 12px; left: 9px;}
*/
#contact .box ul li dl dd input.radio { position: absolute; left: 0px; top: 7px; margin: 0; width: 18px; height: 18px;}
#contact .box ul li dl dd input:checked + label::after { opacity: 1;}
#contact .box h4 { margin-bottom: 10px; font-size: 21px;}
#contact .box h4.note { position: relative; margin-bottom: 0px; padding-top: 20px; padding-left: 30px; font-size: 18px; font-weight: 700; line-height: 1.2;}
#contact .box h4.note:before { content: '※'; position: absolute; left: 10px; }
#contact .box .mfp_buttons { padding: 20px 0;}
#contact .box .mfp_buttons button { display: block; width: 80%; max-width: 240px; margin: 0 auto; padding: 10px 0;
 background: #56a646; border-radius: 16px; border: none; box-shadow: 0 4px 0 #3f8531;
 color: #fff; font-size: 22px; font-weight: 700; text-align: center;
}
#contact .box .mfp_buttons button:hover { opacity: 0.8;}

#contact .box .formError { position: absolute; top: 300px; left: 300px; display: block; cursor: pointer; text-align: left;}
#contact .box .formError .formErrorContent { position: relative; width: 100%; min-width: 120px; padding: 4px 10px 4px 10px; background: #ee0101; border-radius: 6px;
 color: #fff; font-size: 11px;
}
#contact .box .formError .formErrorArrow { width: 15px; margin: -2px 0 0 13px; position: relative;}
#contact .box .formError .formErrorArrow div { display: block; height: 1px; margin: 0 auto; background: #ee0101; font-size: 0px; line-height: 0;}
#contact .box .formError .formErrorArrow .line10{ width: 15px; border: none;}
#contact .box .formError .formErrorArrow .line9 { width: 13px; border: none;}
#contact .box .formError .formErrorArrow .line8 { width: 11px;}
#contact .box .formError .formErrorArrow .line7 { width: 9px;}
#contact .box .formError .formErrorArrow .line6 { width: 7px;}
#contact .box .formError .formErrorArrow .line5 { width: 5px;}
#contact .box .formError .formErrorArrow .line4 { width: 3px;}
#contact .box .formError .formErrorArrow .line3 { width: 1px;}
#contact .box .formError .formErrorArrow .line2 { width: 0px; height: 0;}
#contact .box .formError .formErrorArrow .line1 { width: 0px; height: 0;}
#contact .caution { width: 92%; max-width: 850px; margin: 0 auto;}
#contact .caution div { width: 100%; padding: 30px; border: solid 4px #dcdcdc;}
#contact .caution h4 { margin-bottom: 20px; font-size: 18px; font-weight: 700;}
#contact .caution ul { margin-bottom: 10px;}
#contact .caution ul li { position: relative; padding: 5px 0; padding-left: 1.6rem; font-size: 16px;}
#contact .caution ul li:before { content: ''; display: block; width: 10px; height: 10px; background: #000; border-radius: 50%;
 position: absolute; left: 6px; top: 0.8em;}
#contact .caution ul li span { display: block; font-weight: 700;}
#contact .caution p { font-size: 16px;}
@media (max-width: 1001px) {
	#contact .box { padding: 10px 30px;}
}
@media (max-width: 801px) {
	#contact .box ul li dl dt,
	#contact .box ul li dl dd { display: block;}
	#contact .box ul li dl dt { width: 100%; padding: 8px 0 6px;}
	#contact .box ul li dl dt.row { padding: 8px 0 4px;}
	#contact .box ul li dl dt br { display: none;}
	#contact .box ul li dl dd { width: 100%; padding: 0px 0px 10px; font-size: 14px;}
	#contact .box ul li dl dd.pr25 { padding-right: 0px;}
	#contact .box ul li dl dd span.note_25 { width: 100%; position: relative; right: auto; top: auto; transform: translateY(0%); padding-top: 4px; font-size: 11px;}
}
@media (max-width: 481px) {
  #contact input, textarea, select, label {
    font-size: 16px;           /* これでズームしない */
  }
  html { -webkit-text-size-adjust: 100%; }

	#contact .inner-sct { padding: 40px 0;}
	#contact .ttl { margin-bottom: 20px;}
	#contact .box { padding: 10px 18px; border-radius: 10px; box-shadow: 0 1px 4px #ccc;}

	#contact .box ul li dl dt { font-size: 16px;}
	#contact .box ul li dl dt span.must { font-size: 11px;}

	#contact .box ul li dl dd { padding-right: 0px; font-size: 13px;}
	#contact .box ul li dl dd.pr25 { padding-right: 0px;}

	#contact .box ul li dl dd input[type="text"],
	#contact .box ul li dl dd input[type="tel"],
	#contact .box ul li dl dd input[type="email"] { padding: 4px;}
	#contact .box ul li dl dd input[type="text"].zip { max-width: 120px;}
	#contact .box ul li dl dd input.w30 { max-width: 160px;}
	#contact .box ul li dl dd input.w50 { max-width: 240px;}

	#contact .box ul li dl dd span.row.pl { padding-left: 85px;}
	#contact .box ul li dl dd span.row span.tit { top: 9px; font-size: 12px;}
	#contact .box ul li dl dd span.note { padding-top: 4px; font-size: 11px;}
	#contact .box ul li dl dd span.post { margin-right: 8px;}
	#contact .box h4 { font-size: 16px;}
	#contact .box h4.note { padding-left: 16px; font-size: 13px;}
	#contact .box h4.note:before { left: 0;}
	#contact .box .mfp_buttons { padding: 12px 0;}
	#contact .box .mfp_buttons button { padding: 8px 0; border-radius: 10px; border: none; box-shadow: 0 3px 0 #3f8531; font-size: 16px;}

	#contact .caution div { padding: 15px; border-width: 3px;}
	#contact .caution h4 { margin-bottom: 5px; font-size: 15px;}
	#contact .caution ul li { padding: 4px 0; padding-left: 1.4rem; font-size: 13px;}
	#contact .caution ul li:before { width: 8px; height: 8px;}
	#contact .caution p { font-size: 13px;}

}


/* サンクスページ */
#thanks .inner{ padding: 180px 0 240px;}
#thanks p { font-size: 20px; font-weight: 700; letter-spacing: 0.05rem; line-height: 1.8; text-align: center;}
#thanks .btn-back { padding-top: 80px; text-align: center;}
#thanks .btn-back:before { content: ''; display: inline-block; width: 10px; height: 10px; border-top: solid 1px #000; border-right: solid 1px #000;
 position: relative; transform: rotate(45deg); vertical-align: middle;
}
#thanks .btn-back a { display: inline-block; margin-left: 8px; color: #000; font-size: 18px; font-weight: 700; vertical-align: middle}
#thanks .btn-back a:hover { text-decoration: none;}
@media (max-width: 641px) {
	#thanks p span { display: block;}
}
@media (max-width: 481px) {
	#thanks .inner{ padding: 24vw 0 50vw;}
	#thanks p { font-size: 16px;}
	#thanks .btn-back { padding-top: 40px;}
	#thanks .btn-back a { font-size: 14px;}
}

/* ETCを閉じれるように */
.etc-block {
  /*display: flex;
  align-items: center;
  gap: 8px;*/
  display: block;
  margin: 1em 0;
}
.etc-block input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #004aad;
}

/* チェックONで開く（クラス名を一致） */
#apply-etc:checked + label + .etc-fields { display: block; }

/* ↓閉じている時にも下余白確保 */
.etc-fields {
  display: none;
  border: 1px solid #ccc;
  /*border-top: none;*/
  border-radius: 0 0 8px 8px;
  padding: 8px 16px;
  background: #fff;
  margin-bottom: 1.5em;
}
/* ▲ ETCを閉じれるように（追記ここまで） */