@charset "utf-8";
/* かんたき「までっこ」 ------------------------------------------------ */

:root{
  --ink:#26221e;
  --ink2:#5d564e;
  --ink3:#8a8178;
  --cream:#fbf7f1;
  --white:#ffffff;
  --line:#e6ded3;

  --blue:#1a6ba8;
  --blue-d:#12507f;
  --blue-l:#e9f2f9;
  --blue-l2:#d6e8f4;

  --coral:#d9694f;
  --coral-d:#b8503a;
  --coral-l:#fdefe9;

  --green:#4a8560;
  --green-l:#eaf4ed;

  --gold:#b8862b;
  --gold-l:#fbf1dc;

  --r:16px;
  --r-lg:24px;
  --shadow:0 2px 4px rgba(60,45,30,.05), 0 8px 24px rgba(60,45,30,.07);
  --wrap:1040px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:"Hiragino Maru Gothic ProN","ヒラギノ丸ゴ ProN W4","Hiragino Sans","Yu Gothic Medium","游ゴシック Medium",YuGothic,"Noto Sans JP",Meiryo,sans-serif;
  font-size:17px; line-height:1.9; letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--blue-d)}
a:hover{color:var(--coral-d)}
h1,h2,h3,h4{line-height:1.45; text-wrap:balance; letter-spacing:.01em; margin:0}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em; padding-left:1.4em}
li{margin:.3em 0}
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:8px; top:8px; z-index:999; background:#fff; padding:8px 14px; border-radius:8px}

/* ---------- header ---------- */
.site-head{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.head-inner{display:flex; align-items:center; gap:16px; padding-block:10px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; flex:0 0 auto}
.brand img{height:60px; width:auto}
.brand-sub{font-size:11px; line-height:1.5; color:var(--ink2); display:none}
.brand-sub b{font-size:13px; color:var(--ink)}
.nav{margin-left:auto; display:flex; align-items:center; gap:18px}
.nav ul{display:flex; gap:2px; list-style:none; margin:0; padding:0}
.nav a{display:block; padding:10px 13px; text-decoration:none; color:var(--ink); font-size:15px; font-weight:700; border-radius:10px; white-space:nowrap}
.nav a:hover{background:var(--blue-l); color:var(--blue-d)}
.nav .is-here a{color:var(--blue-d); background:var(--blue-l)}
.nav li.contact a{background:var(--coral); color:#fff}
.nav li.contact a:hover{background:var(--coral-d); color:#fff}
.nav-tel{display:none}
.nav-tel a{text-decoration:none; color:var(--ink); text-align:right; display:block; line-height:1.25}
.nav-tel b{font-size:19px; color:var(--blue-d); letter-spacing:.03em}
.nav-tel small{display:block; font-size:11px; color:var(--ink3)}
.navtoggle{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; margin-left:auto; width:56px; height:46px; background:var(--blue-l); border:0; border-radius:12px; cursor:pointer; color:var(--blue-d)}
.navtoggle span{display:block; width:22px; height:2px; background:currentColor; border-radius:2px; transition:.2s}
.navtoggle em{font-size:9px; font-style:normal; font-weight:700; letter-spacing:.05em}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:960px){
  .site-head{position:sticky}
  .head-inner{position:relative}
  .nav{position:absolute; top:100%; left:0; right:0; margin:0; background:#fff; flex-direction:column; align-items:stretch; gap:0;
       border-bottom:1px solid var(--line); box-shadow:var(--shadow); padding:8px 16px 20px; display:none; max-height:calc(100vh - 90px); overflow-y:auto}
  .nav.open{display:flex}
  .nav ul{flex-direction:column}
  .nav a{padding:14px 12px; font-size:17px; border-bottom:1px solid var(--line); border-radius:0}
  .nav li.contact a{border-radius:12px; text-align:center; margin-top:10px; border:0}
  .nav-tel{display:block; margin-top:14px; text-align:center}
  .nav-tel a{text-align:center}
}
@media (min-width:961px){
  .navtoggle{display:none}
  .brand-sub{display:block}
  .brand img{height:70px}
}
@media (min-width:1420px){ .nav-tel{display:block} }

/* ---------- hero ---------- */
.hero{position:relative; background:#0d3f63; overflow:hidden}
.hero-img{position:absolute; inset:0}
.hero-img img{width:100%; height:100%; object-fit:cover; opacity:.42}
.hero-inner{position:relative; padding:72px 20px 64px; max-width:var(--wrap); margin-inline:auto; color:#fff}
.hero h1{font-size:clamp(26px,5.4vw,44px); text-shadow:0 2px 18px rgba(0,0,0,.45); margin-bottom:.4em}
.hero h1 small{display:block; font-size:clamp(13px,2.4vw,17px); font-weight:700; letter-spacing:.18em; opacity:.92; margin-bottom:.9em}
.hero p{font-size:clamp(15px,2.4vw,19px); max-width:41em; text-wrap:pretty; text-shadow:0 1px 12px rgba(0,0,0,.5)}
.hero-tags{display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:22px 0 0}
.hero-tags li{background:rgba(255,255,255,.94); color:var(--blue-d); font-size:14px; font-weight:700; padding:7px 14px; border-radius:999px}

/* ---------- page head ---------- */
.phead{background:linear-gradient(180deg,var(--blue-l) 0%, var(--cream) 100%); padding:40px 0 34px; border-bottom:1px solid var(--line)}
.phead h1{font-size:clamp(24px,4.6vw,36px)}
.phead .lead{margin:.7em 0 0; color:var(--ink2); max-width:44em; text-wrap:pretty}
.crumb{font-size:13px; color:var(--ink3); margin:0 0 .8em}
.crumb a{color:var(--ink3)}

/* ---------- sections ---------- */
section.band{padding:64px 0}
section.band.tint{background:var(--white)}
section.band.tint-blue{background:var(--blue-l)}
section.band.tint-cream{background:#f6efe4}
.sec-h{text-align:center; margin-bottom:36px}
.sec-h .eyebrow{display:inline-block; font-size:12px; font-weight:800; letter-spacing:.2em; color:var(--coral); margin-bottom:.5em}
.sec-h h2{font-size:clamp(22px,4vw,31px)}
.sec-h p{margin:.8em auto 0; max-width:44em; color:var(--ink2); text-wrap:pretty}
h2.plain{font-size:clamp(21px,3.6vw,28px); margin:0 0 .7em}
h3.sub{font-size:clamp(18px,3vw,22px); margin:2em 0 .6em; padding-left:.6em; border-left:5px solid var(--blue); line-height:1.5}
h4.mini{font-size:17px; margin:1.6em 0 .4em; color:var(--blue-d)}

/* ---------- cards ---------- */
.grid{display:grid; gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px; box-shadow:var(--shadow)}
.card h3{font-size:19px; margin-bottom:.5em}
.card p:last-child{margin-bottom:0}
.card .num{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--blue); color:#fff; font-weight:800; font-size:16px; margin-bottom:.6em}
.card.pic{padding:0; overflow:hidden}
.card.pic img{width:100%; aspect-ratio:4/3; object-fit:cover}
.card.pic .body{padding:18px 20px}
.card.pic .body h3{font-size:17px}
.card.pic .body p{font-size:14.5px; color:var(--ink2)}

/* service cards */
.svc{background:#fff; border-radius:var(--r); padding:24px; border:1px solid var(--line); box-shadow:var(--shadow); border-top:5px solid var(--blue)}
.svc.c2{border-top-color:var(--gold)}
.svc.c3{border-top-color:var(--green)}
.svc.c4{border-top-color:var(--coral)}
.svc h3{font-size:20px; margin-bottom:.35em}
.svc .tag{display:inline-block; font-size:12px; font-weight:800; letter-spacing:.08em; color:var(--blue-d); background:var(--blue-l); padding:3px 10px; border-radius:999px; margin-bottom:.7em}
.svc.c2 .tag{color:var(--gold); background:var(--gold-l)}
.svc.c3 .tag{color:var(--green); background:var(--green-l)}
.svc.c4 .tag{color:var(--coral-d); background:var(--coral-l)}
.svc p{font-size:15.5px; color:var(--ink2); margin-bottom:0}

/* ---------- worry / answer ---------- */
.worry{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px 24px 22px; box-shadow:var(--shadow)}
.worry .q{display:flex; gap:12px; align-items:flex-start; font-weight:800; font-size:17px; color:var(--coral-d); margin-bottom:.8em}
.worry .q::before{content:"？"; flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:var(--coral-l); color:var(--coral-d); display:grid; place-items:center; font-size:15px}
.worry .a{display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color:var(--ink2)}
.worry .a::before{content:"→"; flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:var(--blue-l); color:var(--blue-d); display:grid; place-items:center; font-size:15px; font-weight:800}
.worry .a p{margin:0}
.worry .a p + p{margin-top:.6em}

/* ---------- callouts ---------- */
.note{border-radius:var(--r); padding:20px 22px; margin:1.6em 0; border:1px solid var(--line); background:#fff}
.note.blue{background:var(--blue-l); border-color:var(--blue-l2)}
.note.coral{background:var(--coral-l); border-color:#f5d6cb}
.note.green{background:var(--green-l); border-color:#cfe4d6}
.note.gold{background:var(--gold-l); border-color:#ecdcb6}
.note h3,.note h4{margin:0 0 .5em; font-size:17px}
.note p:last-child{margin-bottom:0}
.note ul:last-child{margin-bottom:0}

.keypoint{background:#fff; border-left:6px solid var(--coral); border-radius:0 var(--r) var(--r) 0; padding:22px 24px; margin:1.6em 0; box-shadow:var(--shadow)}
.keypoint b{color:var(--coral-d)}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1.2em 0 .6em; border-radius:var(--r); border:1px solid var(--line); background:#fff}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:15.5px}
th,td{padding:13px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle}
thead th{background:var(--blue); color:#fff; font-weight:700; white-space:nowrap; border-bottom:0}
tbody th{background:var(--blue-l); font-weight:700; white-space:nowrap; width:1%}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
table.compare thead th:first-child{background:var(--blue-d)}
table.compare tbody th{background:#f4f0e9}
table.compare td{font-size:14.5px}
table.compare .yes{color:var(--green); font-weight:800}
table.compare .no{color:var(--ink3)}
.tablenote{font-size:13.5px; color:var(--ink3); margin:.2em 0 0}
.scrollhint{display:none; font-size:12.5px; color:var(--ink3); margin:.2em 0 1.4em}
@media (max-width:700px){ .scrollhint{display:block} }

/* ---------- steps ---------- */
.steps{list-style:none; padding:0; margin:1.4em 0 0; counter-reset:s}
.steps li{position:relative; padding:0 0 30px 62px; counter-increment:s}
.steps li::before{content:"STEP " counter(s); position:absolute; left:0; top:2px; width:46px; font-size:9.5px; font-weight:800; letter-spacing:.02em; color:#fff; background:var(--blue); border-radius:999px; text-align:center; padding:14px 0; line-height:1}
.steps li::after{content:""; position:absolute; left:22.5px; top:34px; bottom:6px; width:2px; background:var(--blue-l2)}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}
.steps h3{font-size:18px; margin-bottom:.25em}
.steps p{font-size:15.5px; color:var(--ink2); margin:0}

/* ---------- timeline (1日の流れ) ---------- */
.tl{list-style:none; padding:0; margin:1.2em 0 0}
.tl li{display:grid; grid-template-columns:96px 1fr; gap:18px; padding-bottom:26px; position:relative}
.tl li::after{content:""; position:absolute; left:104px; top:30px; bottom:0; width:2px; background:var(--blue-l2)}
.tl li:last-child{padding-bottom:0}
.tl li:last-child::after{display:none}
.tl .t{font-weight:800; color:var(--blue-d); font-size:15px; text-align:right; padding-top:2px; position:relative}
.tl .t::after{content:""; position:absolute; right:-19px; top:9px; width:12px; height:12px; border-radius:50%; background:var(--blue); border:3px solid #fff; box-shadow:0 0 0 2px var(--blue-l2)}
.tl .c h3{font-size:17.5px; margin-bottom:.3em}
.tl .c p,.tl .c ul{font-size:15px; color:var(--ink2); margin-bottom:0}
@media (max-width:560px){
  .tl li{grid-template-columns:1fr; gap:4px}
  .tl li::after{display:none}
  .tl .t{text-align:left}
  .tl .t::after{display:none}
  .tl .c{border-left:3px solid var(--blue-l2); padding-left:14px}
}

/* ---------- faq ---------- */
.faq{margin:1.2em 0 0}
.faq details{background:#fff; border:1px solid var(--line); border-radius:var(--r); margin-bottom:12px; box-shadow:var(--shadow)}
.faq summary{list-style:none; cursor:pointer; padding:18px 52px 18px 54px; font-weight:800; font-size:16.5px; position:relative; line-height:1.6}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q"; position:absolute; left:18px; top:16px; width:26px; height:26px; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; font-size:14px}
.faq summary::after{content:""; position:absolute; right:22px; top:26px; width:10px; height:10px; border-right:2.5px solid var(--ink3); border-bottom:2.5px solid var(--ink3); transform:rotate(45deg); transition:.2s}
.faq details[open] summary::after{transform:rotate(-135deg); top:30px}
.faq .ans{padding:0 24px 20px 54px; position:relative; color:var(--ink2); font-size:15.5px}
.faq .ans::before{content:"A"; position:absolute; left:18px; top:0; width:26px; height:26px; border-radius:50%; background:var(--coral-l); color:var(--coral-d); display:grid; place-items:center; font-size:14px; font-weight:800}
.faq .ans p:last-child,.faq .ans ul:last-child{margin-bottom:0}

/* ---------- news ---------- */
.newslist{list-style:none; padding:0; margin:0}
.newslist li{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:22px 24px; margin-bottom:14px; box-shadow:var(--shadow)}
.newsmeta{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink3); margin-bottom:.4em}
.newsmeta .cat{background:var(--blue-l); color:var(--blue-d); font-weight:800; padding:2px 10px; border-radius:999px; font-size:12px}
.newsmeta .cat.gyoji{background:var(--coral-l); color:var(--coral-d)}
.newslist h3{font-size:18.5px; margin-bottom:.35em}
.newslist p{font-size:15.5px; color:var(--ink2); margin-bottom:0}
.newslist img{border-radius:12px; margin-top:14px; max-height:340px; width:100%; object-fit:cover}

/* ---------- gallery ---------- */
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px}
.gallery figure{margin:0; background:#fff; border-radius:14px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow)}
.gallery img{aspect-ratio:4/3; object-fit:cover; width:100%}
.gallery figcaption{font-size:13.5px; padding:10px 12px; color:var(--ink2); text-align:center}

/* ---------- buttons / cta ---------- */
.btn{display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
     text-decoration:none; font-weight:800; padding:16px 30px; border-radius:999px; transition:.15s; line-height:1.35}
.btn-tel{background:var(--coral); color:#fff; box-shadow:0 6px 18px rgba(217,105,79,.35)}
.btn-tel:hover{background:var(--coral-d); color:#fff}
.btn-tel b{font-size:26px; letter-spacing:.04em}
.btn-tel small{font-size:12px; letter-spacing:.15em; opacity:.9}
.btn-ghost{border:2px solid #fff; color:#fff}
.btn-ghost:hover{background:#fff; color:var(--blue-d)}
.btn-line{display:inline-block; background:var(--blue); color:#fff; padding:13px 26px; border-radius:999px; text-decoration:none; font-weight:800; font-size:15.5px}
.btn-line:hover{background:var(--blue-d); color:#fff}
.btn-line.ol{background:#fff; color:var(--blue-d); border:2px solid var(--blue-l2)}
.btn-line.ol:hover{background:var(--blue-l); color:var(--blue-d)}

.cta{background:linear-gradient(135deg,#1a6ba8 0%,#0f4d7d 100%); color:#fff; padding:56px 0; text-align:center}
.cta h2{font-size:clamp(21px,3.8vw,28px); margin-bottom:.5em}
.cta p{color:rgba(255,255,255,.92); max-width:36em; margin-inline:auto}
.cta-row{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin:26px 0 16px}
.cta-note{font-size:13.5px; color:rgba(255,255,255,.78)}

/* ---------- footer ---------- */
.site-foot{background:#26221e; color:#cfc7bd; padding:52px 0 20px; font-size:14.5px}
.foot-grid{display:grid; gap:32px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.foot-name{color:#fff; font-size:13px; line-height:1.6; margin-bottom:.8em}
.foot-name b{font-size:18px}
.foot-addr{font-size:13.5px; line-height:1.85; color:#a9a097; margin-bottom:.7em}
.foot-h{color:#fff; font-weight:800; font-size:14px; margin-bottom:.6em}
.foot-links{list-style:none; padding:0; margin:0}
.foot-links li{margin:.35em 0}
.foot-links a{color:#cfc7bd; text-decoration:none}
.foot-links a:hover{color:#fff; text-decoration:underline}
.copy{text-align:center; font-size:12.5px; color:#7d746b; margin:40px 0 0; padding-top:18px; border-top:1px solid #3a342e}

/* ---------- sticky tel bar (mobile) ---------- */
.telbar{display:none}
@media (max-width:760px){
  .telbar{display:grid; grid-template-columns:1.6fr 1fr; gap:8px; position:fixed; left:0; right:0; bottom:0; z-index:60;
          padding:8px 12px calc(8px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.97); border-top:1px solid var(--line);
          box-shadow:0 -4px 16px rgba(60,45,30,.1)}
  .telbar a{display:grid; place-items:center; padding:13px 8px; border-radius:12px; text-decoration:none; font-weight:800; font-size:15px}
  .telbar-call{background:var(--coral); color:#fff}
  .telbar-sub{background:var(--blue-l); color:var(--blue-d)}
  body{padding-bottom:74px}
  .site-foot{padding-bottom:20px}
}

/* ---------- misc ---------- */
.split{display:grid; gap:32px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); align-items:center}
.split img{border-radius:var(--r); box-shadow:var(--shadow)}
.figframe{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:16px; box-shadow:var(--shadow)}
.figframe img{border-radius:8px; margin-inline:auto}
.figframe figcaption{font-size:13.5px; color:var(--ink3); text-align:center; margin-top:10px}
.chips{display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:1em 0}
.chips li{background:#fff; border:1px solid var(--blue-l2); color:var(--blue-d); font-size:14px; font-weight:700; padding:6px 14px; border-radius:999px}
.chips.coral li{border-color:#f0cfc4; color:var(--coral-d)}
.deflist{margin:0}
.deflist div{display:grid; grid-template-columns:minmax(120px,180px) 1fr; gap:0; border-bottom:1px solid var(--line)}
.deflist dt{padding:14px 16px; background:var(--blue-l); font-weight:700; font-size:15px}
.deflist dd{padding:14px 16px; margin:0; font-size:15.5px}
.deflist div:last-child{border-bottom:0}
@media (max-width:560px){ .deflist div{grid-template-columns:1fr} .deflist dt{padding-bottom:6px} .deflist dd{padding-top:6px} }
.center{text-align:center}
.mt0{margin-top:0}
.lead-lg{font-size:clamp(17px,2.6vw,20px); line-height:1.95}

/* 幅の狭い場所に置く小さめの表 */
.tablewrap.mini table{min-width:0; font-size:14.5px}
.tablewrap.mini th,.tablewrap.mini td{padding:11px 12px}

/* ---------- オンライン利用申し込み ---------- */
.apply-wrap{max-width:800px}
.policy h2{font-size:clamp(20px,3.4vw,24px); padding-bottom:.4em; border-bottom:3px solid var(--blue); margin-bottom:.8em}
.policy-list{list-style:none; padding:0; margin:1.4em 0 0}
.policy-list > li{margin-bottom:1.4em}
.policy-list > li:last-child{margin-bottom:0}
.policy-list h3{font-size:16.5px; color:var(--blue-d); margin:0 0 .3em}
.policy-list p{margin:0 0 .4em}
.policy-list ul{margin:.3em 0 .4em; padding-left:1.3em}
.consent{margin-top:1.8em; background:var(--blue-l); border:1px solid var(--blue-l2); border-radius:var(--r); padding:24px 20px}
.consent-check{display:flex; gap:12px; align-items:flex-start; justify-content:center; font-weight:800; font-size:17px; cursor:pointer; margin-bottom:1.2em}
.consent-check input{width:24px; height:24px; margin:2px 0 0; flex:0 0 auto; accent-color:var(--blue)}
.btn-apply{display:inline-block; background:var(--coral); color:#fff; padding:16px 34px; border-radius:999px; text-decoration:none; font-weight:800; font-size:17px; box-shadow:0 6px 18px rgba(217,105,79,.3)}
.btn-apply:hover{background:var(--coral-d); color:#fff}
.btn-apply.is-off{background:#cfc8bf; color:#fff; box-shadow:none; cursor:not-allowed; pointer-events:none}
@media (max-width:560px){ .btn-apply{display:block; padding:16px 12px; font-size:16.5px} .consent-check{justify-content:flex-start} }