@charset "utf-8";
/* CSS Document */
/* ====================== Color Variables ================================= */
:root {
--color-primary: #1a3a5c;
--color-accent:  #3299f6;
--color-white:   #fff;
--color-bg:      #f5f5f5;
--color-text:    #333;
--color-english: #3299f6;
/* --- order.html 用 追加変数 --- */
--navy:     #1a4472;
--accent:   #2d7dd2;
--accent-lt:#e8f2fb;
--bg:       #f5f5f2;
--surface:  #ffffff;
--text:     #1a1a1a;
--muted:    #666;
--border:   #d8d4ce;
--red:      #c0392b;
--radius:   6px;
--shadow:   0 2px 16px rgba(0,0,0,.07);
}

/* ====================== Base ================================= */
address { font-style: normal }

/* ====================== testi クラス共通 ================================= */
.testi #contents4{background:#fff;}
.testi #contents4 .english{color: var(--color-english);}
.testi #contents4 h2,.testi #contents4 h3{color: var(--color-primary);}
.testi #contents4 .sign{display:block;text-align:center;margin:2em 0 0 auto;}
.testi #contents4 .sign p{font-size:.9em;}
/* ====================== unei クラス共通 ================================= */
.unei #contents3 { background: rgba(26,68,114,1); }
.unei #contents3 h2 { color: #fff; border-bottom-color: rgba(255,255,255,.3); }
.unei #contents3 h3 { color: #9fcfff; }
.unei #contents3 p { color: rgba(255,255,255,.9); }
.unei .svg-wrap { width: 100%; overflow-x: auto; margin: 1.5em 0; }
.unei .svg-wrap img { width: 100%; height: auto; display: block; }
.unei .note { font-size: .82em; color: #888; margin-top: .3em; padding-left: 2.2em; }
/* ====================== legal クラス共通（特商法・プライバシーポリシー）=============== */
.legal #legal-contents { background:#fff; }
.legal #legal-contents h2 { font-size: 1.1em; color: #1a3a5c; border-left: 3px solid #2d7dd2; padding-left: .6em; margin: 2em 0 .8em; }
.legal #legal-contents p { color: #333; font-size: .95em; }
.legal .privacy-list { margin: .5em 0 1.5em 1em; }
.legal .privacy-list li { position: relative; padding-left: 1.2em; font-size: .93em; color: #333; line-height: 1.8; margin-bottom: .3em; }
.legal .privacy-list li::before { content: '・'; position: absolute; left: 0; color: #2d7dd2; }
.legal .contact-box { background: #e8f2fb; border-left: 3px solid #2d7dd2; padding: 1.2em 1.5em; border-radius: 0 4px 4px 0; margin: 1em 0 1.5em; font-size: .93em; color: #333; line-height: 2; }
.legal .contact-box a { color: #2d7dd2; }
.legal .established { font-size: .82em; color: #888; text-align: right; margin-top: 2em; }
.legal .legal-table { width: 100%; border-collapse: collapse; font-size: .93em; }
.legal .legal-table th, .legal .legal-table td { padding: 1em; border-bottom: 1px solid #ddd; vertical-align: top; line-height: 1.8; color: #333; text-align: left; }
.legal .legal-table th { white-space: nowrap; color: #1a3a5c; font-weight: 500; width: 10em; background: #e8f2fb; }
.legal .legal-table a { color: #2d7dd2; }
.legal .legal-table small { font-size: .82em; color: #888; display: block; margin-top: .3em; }
/* ============ order.html 共通スタイル（メディアクエリ非依存）======================== */
/* ページタイトル */
.page-title { text-align: center; margin-bottom: 32px; padding-top: 20px; }
.page-title .en { display: block; font-size: .72rem; letter-spacing: .2em; color: var(--accent); margin-bottom: 6px; text-transform: uppercase; font-family: 'Noto Sans JP', sans-serif; }
.page-title h1 { font-family: 'Noto Serif JP', serif; font-size: clamp(1.3rem, 3.5vw, 1.9rem); color: var(--navy); letter-spacing: .08em; }

/* 申込内容による表示切替 */
#section-purchase, #section-rental { display: none; margin-top: 14px; }

/* 郵便番号入力行 */
.zip-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;}
.zip-row input { max-width: 160px; flex-shrink: 0; font-size:16px;}
.btn-zip {
background: var(--accent); color: #fff; border: none; border-radius: 20px;
padding: 12px 14px; font-size:.85rem; font-family: 'Noto Sans JP', sans-serif;cursor: pointer; letter-spacing: .06em; white-space: nowrap; transition: opacity .2s; flex-shrink: 0;-webkit-tap-highlight-color: rgba(0,0,0,0);
min-height: 44px;}
.btn-zip:hover { opacity: .8; }
.zip-msg { font-size: .75rem; margin-top: 4px; min-height: 1.2em; font-family: 'Noto Sans JP', sans-serif; }
.zip-msg.ok  { color: var(--accent); }
.zip-msg.err { color: var(--red); }

/* 同上ボタン */
.same-btn-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.same-btn-wrap p { font-size: .8rem; color: var(--muted); font-family: 'Noto Sans JP', sans-serif; }
.btn-same { background: var(--navy); color: #fff; border: none; border-radius: 20px; padding: 7px 20px; font-size: .8rem; font-family: 'Noto Sans JP', sans-serif; cursor: pointer; letter-spacing: .06em; transition: opacity .2s; white-space: nowrap; }
.btn-same:hover { opacity: .8; }

/* 振込先ボックス */
.bank-box { background: var(--accent-lt); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; padding: 14px 18px; font-size: .88rem; }
.bank-box h3 { font-size: .85rem; color: var(--navy); font-weight: 500; margin-bottom: 10px; letter-spacing: .06em; font-family: 'Noto Sans JP', sans-serif; }
.bank-table { width: 100%; border-collapse: collapse; }
.bank-table td { padding: 3px 0; vertical-align: top; font-size: .85rem; font-family: 'Noto Sans JP', sans-serif; }
.bank-table td:first-child { width: 7em; color: var(--muted); white-space: nowrap; font-size: .8rem; }

/* 領収書宛名 */
#receipt-name-wrap { display: none; margin-top: 12px; }

/* 送信ボタン */
.submit-wrap { text-align: center; margin-top: 8px; max-width: 740px; margin-left: auto; margin-right: auto; }
.btn-submit { background: var(--navy); color: #fff; border: none; border-radius: var(--radius); padding: 15px 64px; font-size: 1rem; font-family: 'Noto Sans JP', sans-serif; font-weight: 500; letter-spacing: .1em; cursor: pointer; transition: opacity .2s, transform .15s; }
.btn-submit:hover { opacity: .85; }
.btn-submit:active { transform: scale(.98); }

/* 完了メッセージ */
#thanks { display: none; max-width: 740px; margin: 0 auto; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 56px 32px; text-align: center; }
#thanks .icon { font-size: 2.6rem; margin-bottom: 16px; }
#thanks h2 { font-family: 'Noto Serif JP', serif; color: var(--navy); font-size: 1.3rem; margin-bottom: 12px; }
#thanks p { font-size: .88rem; color: var(--muted); line-height: 2; font-family: 'Noto Sans JP', sans-serif; }

#page_top{width:50px;height:50px;position:fixed;right:10px;bottom:10px;background:rgba(4,149,248,.8);border-radius:50%;z-index:100;}
#page_top a{position:relative;display:block;color:#fff;width:50px;height:50px}
#page_top a::before{content:'';width:13px;height:13px;display:block;border-top:solid 2px;border-right:solid 2px;transform:rotate(-45deg);position:absolute;top:7.5px;bottom:0;left:0;right:0;margin:auto}

/* ====================== SP ================================= */
@media screen and (max-width: 767px) {

/* ---------- Contents1 ---------- */
#contents1 { background: url(../images/contents1back_sp.webp) no-repeat center / cover;}
#contents1 article{margin:1.5em 0}
#contents1 .item{margin-bottom:1.5em}
#contents1 .item img{width:100%;height:auto;border-radius:4px}
#contents1 .item>p{font-size:.85em;margin-top:.5em;margin-bottom:.3em;color:#555}
#contents1 .item a{color:var(--color-accent);font-size:.85em;text-decoration:underline}
#contents1 .description{position:relative; padding-bottom:20%; z-index:0;}
#contents1 .description .box{position:absolute; right:0; bottom:0;width:40%;}
#contents1 .description dl{display:grid;grid-template-columns:5em 1fr;gap:.3em .5em;font-size:.88em;border:1px solid #ddd;border-radius:4px;padding:1em;background:#fafafa}
#contents1 .description dt{color:var(--color-primary)}
#contents1 .description dd { color: var(--color-text) }
#contents1 .description>p{font-size:.8em;color:#888;margin-top:.8em}
#contents1 ol{counter-reset:ol-counter}
#contents1 ol li{counter-increment:ol-counter;display:flex;align-items:baseline;gap:.5em;margin:1em 0}
#contents1 ol li::before{content:counter(ol-counter) ".";flex-shrink:0;color:var(--color-accent)}

/* ---------- Contents2 ---------- */
#contents2{background:#1b4472 url(../images/contents2back_sp.webp) no-repeat right bottom / 100%;color:var(--color-white)}
#contents2 .english { color: #7ab8e8 }
#contents2 h2{color:var(--color-white);border-bottom-color:#7ab8e8}
#contents2 h3 { color: #9fcfff }
#contents2 p { color:#fff; }
#contents2 .flex { margin-bottom:15%;}
#contents2 .flex p.pfoto{width:80%;margin:2.5% auto;}
#contents2>.inner>p:last-of-type img{border-radius:8px;margin-bottom:.3em}
#contents2 ul{display:grid;grid-template-columns:repeat(3,1fr);gap:1em;margin-top:1em}
#contents2 ul li{text-align:center;font-size:.8em;color:rgba(255,255,255,.8)}
#contents2 ul li img{border-radius:4px;margin-bottom:.4em}

/* ---------- Contents3 ---------- */
#contents3 { background: var(--color-bg) }
#contents3 h3{font-family:Montserrat,sans-serif;font-size:1.1em;color:#1a4472;border-left:3px solid #1a4472;padding-left:.6em;margin:1.5em 0 .5em}

/* ---------- Footer ---------- */
footer{background:rgba(0,0,0,.3);padding:5em 5% .5em;color:#fff}
footer .footer-logo {margin-bottom: 1.5em;}
footer .footer-logo img{width:140px;height:auto;margin-bottom:.5em}
footer .footer-logo>p{font-size:.9em;margin-bottom:.3em;line-height:1.6}
footer address p{font-size:.9em;margin-bottom:.2em;line-height:1.6}
footer address a { color:#3299f6}
footer ul{display:flex;flex-wrap:nowrap;align-items:center;padding-top:1.5em;margin-bottom:.5em}
footer ul:nth-of-type(1) li {text-align:center}
footer ul:nth-of-type(2){align-items:flex-end;padding-top:0;text-align:right}
footer ul li{font-size:.78em;flex:auto;color:#fff}
footer ul li a{color:#fff}
footer>p:last-child{font-size:.72em;text-align:right;margin-bottom:0}

/* ---------- testi Contents ---------- */
.testi #contents1 { color:#fff;background:url(../testimonial/images/con1back_sp.webp) no-repeat center / cover;}
.testi main h3{font-size:1.1em;margin-bottom:1em;}
.testi #contents2 { color:#fff;background:url(../testimonial/images/con2back_sp.webp) no-repeat center / cover;}
.testi #contents3 { color:#fff;background:url(../testimonial/images/con3back_sp.webp) no-repeat center / cover;}
.testi #contents4 { background:url(../testimonial/images/con4back_sp.webp) no-repeat center / cover;}
.testi #contents4 .sign{width:70%;}

/* ---------- order.html SP ---------- */
#form-wrap { padding-top: 70px; }
.card-body { padding: 20px 18px; }
.row-2 { grid-template-columns: 1fr; }

/* ---------- unei SP ---------- */
.unei #contents1 { background:#fff; }
.unei main h2 { color: var(--color-primary); border-bottom-color: var(--color-accent); }
.unei main h3 { color: var(--color-primary); border: none; font-family: 'Noto Serif JP', serif; }
.unei #contents3 h2 { color: #fff; border-bottom-color: rgba(255,255,255,.3); }
.unei #contents3 h3 { font-family:'Noto Serif JP',serif;color: #9fcfff; border: none; font-size:1.2em; }
.unei .step-list { counter-reset: step; }
.unei .step-list li { counter-increment: step; display: flex; align-items: baseline; gap: .8em; margin: .8em 0; font-size: .95em; line-height: 1.8; }
.unei .step-list li::before { content: counter(step); flex-shrink: 0; background: #1a4472; color: #fff; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: .8em; font-family: Montserrat; }
.unei .merit-list { margin-top: 1em; }
.unei .merit-list li { display: flex; align-items: baseline; gap: .8em; margin: 1em 0; font-size: .95em; line-height: 1.8; color: rgba(255,255,255,.9); }
.unei .merit-list li::before { content: '✓'; flex-shrink: 0; color: #7ab8e8; font-weight: bold; font-size: 1.1em; }
/* ---------- legal SP ---------- */
.legal #legal-contents .inner { width: 90%; margin: 0 auto; padding: 3em 0; }
.legal .legal-table { display: block; overflow-x: auto; }
.legal .legal-table th { width: 7em; }
} 
/* end SP */
/* ====================== PC ================================= */
@media screen and (min-width: 768px) {
/* ---------- Contents1 ---------- */
#contents1 {background:url(../images/contents1back_pc.webp) no-repeat center / cover; }
#contents1 article{display:flex;gap:3em;margin:2em 0;align-items:flex-start}
#contents1 .item{width:35%;flex-shrink:0}
#contents1 .item img{width:100%;height:auto;border-radius:4px}
#contents1 .item>p{font-size:.85em;margin-top:.5em;margin-bottom:.3em;color:#555}
#contents1 .item a{color:var(--color-accent);font-size:.85em;text-decoration:underline}
#contents1 .description { flex: 1; position:relative; padding-bottom:9%; z-index:0;}
#contents1 .description .box{position:absolute; right:2.5%; bottom:0;width:32%;}
#contents1 .description dl{display:grid;grid-template-columns:5.5em 1fr;gap:.4em .5em;font-size:.9em;border:1px solid #ddd;border-radius:4px;padding:1.2em;background:#fafafa}
#contents1 .description dt {color: var(--color-primary);}
#contents1 .description>p{font-size:.82em;color:#888;margin:1em}
#contents1 ol {list-style: decimal inside;margin-top: 1em;}
#contents1 ol li{font-size:.95em;padding:.4em 0 .4em .5em;border-bottom:1px solid #fff;color:var(--color-text);margin:1em 0}
#contents1 ol li:last-child { border-bottom: none }

/* ---------- Contents2 ---------- */
#contents2{background:#1b4472 url(../images/contents2back_pc.webp) no-repeat right bottom / 64%;color:var(--color-white)}
#contents2 .english { color: #7ab8e8 }
#contents2 h2{color:var(--color-white);border-bottom-color:#7ab8e8}
#contents2 .flex{display:flex; margin-bottom:10%;}
#contents2 .flex p{width:100%;}
#contents2 .flex p span{ display:block;margin-top:1.2em;}
#contents2 .flex p.pfoto{width:35%;margin:2.5% 5% 0 15%;}
#contents2 h3 { color: #9fcfff }
#contents2 p { color:#fff; }
#contents2 .english { grid-column: 1 / -1 }
#contents2 h2 { grid-column: 1 / -1 }
#contents2 h3 { grid-column: 1 / -1 }
#contents2 ul{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5em;margin-top:1em}
#contents2 ul li{text-align:center;font-size:.88em;color:rgba(255,255,255,.8)}
#contents2 ul li img{border-radius:6px;margin-bottom:.5em}

/* ---------- Contents3 ---------- */
#contents3 { background: var(--color-bg) }
#contents3 h3{font-family:Montserrat,sans-serif;font-size:1.15em;color:var(--color-accent);border-left:3px solid var(--color-accent);padding-left:.6em;margin:2em 0 .6em}

/* ---------- Footer ---------- */
footer{background:rgba(0,0,0,.3);color:#fff;padding:10em 0 2em}
footer .inner-footer{width:80%;max-width:980px;margin:0 auto 2em;display:flex;gap:4em;align-items:flex-start;justify-content:space-between}
footer .footer-logo { flex-shrink: 0 }
footer .footer-logo img{width:160px;height:auto;margin-bottom:.6em}
footer .footer-logo>p{font-size:1em;color:#fff;margin-bottom:.3em;line-height:1.6}
footer address p{font-size:.9em;margin-bottom:.2em;line-height:1.6}
footer address a{color:#7ab8e8;transition:opacity .8s}
footer address a:hover { opacity: .75 }
footer ul{width:100%;display:flex;flex-wrap:nowrap;align-items:flex-end;padding-top:1.5em;margin-bottom:.5em;justify-content:center}
footer ul:nth-of-type(1){ margin-top:7em;}
footer ul:nth-of-type(2){align-items:flex-end;padding-top:0;justify-content:flex-end}
footer ul li{font-size:.85em;padding-left:3em;}
footer ul li a{color:rgba(255,255,255,.7)}
footer ul li a:hover { color: var(--color-white) }
footer>p:last-child{font-size:.75em;text-align:right;margin-bottom:0;margin:0 2em;padding-top:1em;border-top:1px solid rgba(255,255,255,.1)}

/* ---------- testi Contents ---------- */
.testi #contents1 {color:#fff;background:url(../testimonial/images/con1back_pc.webp) no-repeat center / cover;}
.testi main h3{font-size:1.2em;margin-bottom:1em;}
.testi #contents2 {color:#fff;background:url(../testimonial/images/con2back_pc.webp) no-repeat center / cover;}
.testi #contents3 { color:#fff;background:url(../testimonial/images/con3back_pc.webp) no-repeat center / cover;}
.testi #contents4 {background:url(../testimonial/images/con4back_pc.webp) no-repeat center / cover;}
.testi #contents4 .sign{width:28%; max-width:420px;}

/* ---------- order.html PC ---------- */
#form-wrap { padding-top: 90px; }
.card { width: 80%; }

/* ---------- unei PC ---------- */
.unei #contents1 { background:#fff; }
.unei #contents1 .flex{ display:flex;flex-wrap:nowrap;justify-content:space-between;}
.unei #contents1 .chart{width:48%;}
.unei main h2 { color: var(--color-primary); border-bottom-color: var(--color-accent); }
.unei main h3 { color: var(--color-primary); border: none; font-family: 'Noto Serif JP', serif; }
.unei #contents3 h2 { color: #fff; border-bottom-color: rgba(255,255,255,.3); }
.unei #contents3 h3 { font-family:'Noto Serif JP',serif;color: #9fcfff; border: none; }
.unei .step-list { counter-reset: step; max-width: 820px; }
.unei .step-list li { counter-increment: step; display: flex; align-items: baseline; gap: 1em; margin: 1em 0; font-size: .95em; line-height: 1.8; }
.unei .step-list li::before { content: counter(step); flex-shrink: 0; background: #1a4472; color: #fff; border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: .8em; font-family: Montserrat; }
.unei .merit-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em; margin-top: 1.5em; }
.unei .merit-list li { display: flex; align-items: baseline; gap: .8em; font-size: .95em; line-height: 1.8; color: rgba(255,255,255,.9); }
.unei .merit-list li::before { content: '✓'; flex-shrink: 0; color: #7ab8e8; font-weight: bold; font-size: 1.1em; }
.unei .svg-wrap { margin: 2em 0; }
/* ---------- legal PC ---------- */
.legal #legal-contents .inner { width: 80%; max-width: 980px; margin: 0 auto; padding: 5em 0; }
.legal #legal-contents h2 { font-size: 1.15em; }
.legal .legal-table th { width: 12em; }
} /* end PC */