/* XXBase サイト共通の鉄瓶ゴシック（/fonts/ を自前配信。Google Fonts は使わない＝厳しい CSP のまま） */
@font-face {
  font-family: "Tetsubin Gothic";
  src: url("/fonts/TetsubinGothic-full.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  /* 記号・漢字など。サブセットに無い文字が出てきたときだけダウンロードされる */
  unicode-range: U+100-2FFF, U+3000-9FFF, U+F900-FFEF;
}
@font-face {
  font-family: "Tetsubin Gothic";
  src: url("/fonts/TetsubinGothic-subset.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+A, U+20-7E, U+A1-FF, U+2010-2016, U+2018-201A, U+201C-201E, U+2020-2022, U+2025-2026, U+2030, U+2032-2033, U+2039-203B, U+2190-2193, U+2197, U+2460-2473, U+25A0-25A2, U+25AA-25AB, U+25B2-25B3, U+25B6-25B7, U+25BC-25BD, U+25C0-25C1, U+25C6-25C7, U+25C9, U+25CB-25CC, U+25CE-25CF, U+3000-3015, U+301C-301D, U+301F-3020, U+3030, U+3033-3036, U+3041-3094, U+309B-309E, U+30A1-30FE, U+4E00, U+4E07-4E0B, U+4E0D, U+4E16, U+4E26, U+4E2D, U+4E88, U+4E8B, U+4E94, U+4EBA, U+4ECA-4ECB, U+4ED5, U+4ED8, U+4EE5, U+4EF6, U+4EFB, U+4F1A, U+4F1D, U+4F34, U+4F3C, U+4F4E-4F4F, U+4F53, U+4F55, U+4F5C, U+4F7F, U+4F8B, U+4F9D, U+4FA1, U+4FDD, U+4FE1, U+500B, U+500D, U+5024, U+5074, U+5099, U+50D5, U+512A, U+5143, U+5148, U+5165, U+5168, U+516C, U+5171, U+5178, U+5185-5186, U+518D, U+51FA, U+5206-5207, U+5217, U+521D, U+5225, U+5230, U+5236, U+5238, U+524D, U+5272, U+529B, U+52A0, U+52A9, U+52B9, U+52D5, U+52D9, U+52DD, U+52E7, U+5316, U+5375, U+53CD, U+53D6-53D7, U+53EF-53F0, U+53F3, U+53F7, U+5408, U+540C-540D, U+5411, U+541B, U+542B, U+544A, U+5473, U+547C-547D, U+54C1, U+54E1, U+5546, U+554F, U+5584, U+55AB, U+55B6, U+56DB, U+56DE, U+56F0, U+56F3, U+571F, U+5728, U+5730, U+578B, U+57DF, U+57F7, U+57FA, U+5802, U+5831, U+5834, U+5897, U+58C1, U+58F0, U+5909, U+5916, U+591A, U+5927, U+592B, U+5951, U+597D, U+59CB, U+5B50, U+5B57-5B58, U+5B88-5B89, U+5B9A-5B9B, U+5B9F, U+5BA2-5BA3, U+5BB6, U+5BB9, U+5BFE, U+5C04, U+5C06, U+5C0E-5C0F, U+5C11, U+5C4A-5C4B, U+5CF6, U+5DE5, U+5DEE, U+5DF1, U+5E02, U+5E0C, U+5E83, U+5E95, U+5E97, U+5EA6-5EA7, U+5F0F, U+5F15, U+5F53, U+5F62, U+5F85, U+5F8C, U+5F97, U+5FAA, U+5FC5, U+5FDC, U+601D, U+6027, U+60AA, U+60F3, U+610F, U+614B, U+6210, U+623B, U+6240, U+624B, U+6253, U+6271, U+6280, U+629C, U+629E, U+62BC, U+62C5, U+62FE, U+6301, U+632F, U+639B, U+63A2, U+63CF, U+63DB, U+63FA, U+6539, U+653F, U+6559, U+6570, U+6574, U+6587, U+6599, U+65AD, U+65B0, U+65B9, U+65E5, U+65E7, U+6607, U+660E, U+6613, U+6620, U+6642, U+6687, U+66F4, U+66F8, U+66FF-6700, U+6708, U+671B, U+6728, U+672A-672C, U+675F, U+6761, U+6765, U+676F, U+679C, U+67A0, U+67B6, U+67F1, U+682A, U+683C, U+6848, U+691C, U+696D, U+697D, U+6982, U+69CB, U+69D8, U+6A19, U+6A5F, U+6B21, U+6B62-6B63, U+6B69, U+6B8B, U+6BB5, U+6BBA, U+6BCE, U+6C17, U+6C7A, U+6CBB, U+6CD5, U+6CE8, U+6D3B, U+6D3E, U+6D41, U+6D6E, U+6D77, U+6DFB, U+6E1B, U+6E21, U+6E96, U+7119, U+7121, U+713C, U+714E, U+7248, U+7269, U+72B6, U+73FE, U+74B0, U+751F, U+7528, U+7531, U+7533, U+753A-753B, U+754C, U+7565, U+756A, U+7570, U+767A-767B, U+767D, U+7684, U+76E3-76E4, U+76EE, U+76F4, U+76F8, U+7701, U+771F, U+7763, U+77E5, U+77ED, U+77F3, U+78BA, U+793A, U+793E, U+795E, U+796D, U+79CB, U+79D2, U+79FB, U+7A0E, U+7A2E, U+7A4D, U+7A7A, U+7AF6, U+7B2C, U+7B54, U+7B97, U+7BB1, U+7CBE, U+7D04, U+7D0D, U+7D19, U+7D20, U+7D22, U+7D39, U+7D42, U+7D44, U+7D4C, U+7D5E, U+7D61, U+7D79, U+7D9A, U+7DBF, U+7DD2, U+7DDA, U+7E3E, U+7E70, U+7F6E, U+7F72, U+7FA9, U+7FFB, U+8003, U+8005, U+805E, U+80A2, U+80B2, U+80FD, U+8150, U+81A8, U+81EA, U+8272, U+82F1, U+8336, U+83D3, U+843D, U+8449, U+884C, U+8853, U+8857, U+8868, U+88C5, U+88CF, U+88DC, U+8981, U+898B, U+898F, U+89A7, U+89B3, U+89D2, U+89E3, U+89E6, U+8A00, U+8A08, U+8A17-8A18, U+8A2A, U+8A2D, U+8A33, U+8A3A, U+8A66, U+8A71, U+8A73, U+8A8D, U+8A98, U+8A9E, U+8AAC-8AAD, U+8AC7, U+8B1B, U+8B58, U+8B70, U+8C46, U+8CBB, U+8CC7, U+8CDE, U+8CEA, U+8CFC, U+8D70, U+8D77, U+8D85, U+8DB3, U+8DEF, U+8DF5, U+8EAB, U+8EE2, U+8EFD, U+8F09, U+8F9E, U+8FBC, U+8FD1, U+8FD4, U+8FF7, U+8FFD, U+9001, U+901A, U+9023, U+9031-9032, U+904A-904B, U+9053, U+9069, U+9078, U+90E8, U+914D, U+91CD, U+91D1, U+9577, U+9589, U+958B, U+9593, U+95A2, U+964D, U+9662, U+967D, U+968E, U+969B, U+96C6, U+96E3, U+96FB, U+9762, U+97F3, U+9806, U+9808, U+982D, U+983C, U+984C, U+9854, U+9858, U+985E, U+98A8, U+98DB, U+98DF, U+98F2, U+99AC, U+9A13, U+9AA8, U+9AD8, U+9B45, U+9CE5, U+9ED2, U+FF01-FF5E, U+FF61-FF9F;
}
:root{
  --charcoal:#2A2F38; --stone:#ECE6DB; --sage:#8DA48C; --gray:#7A7C80;
  --sage-dark:#6F8A6E; --card:#F7F3EC; --line:#D9D1C3;
  --radius:20px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Tetsubin Gothic","Hiragino Kaku Gothic ProN","Noto Sans CJK JP",sans-serif;
  color:var(--charcoal);background:var(--stone);line-height:1.85;font-size:16px;
  -webkit-font-smoothing:antialiased;letter-spacing:.02em}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* header */
.site-header{padding:20px 0}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between}
.logo img{height:44px;width:auto}
.header-tag{font-size:13px;color:var(--gray)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:56px;padding:14px 32px;border-radius:999px;font-weight:700;font-size:16px;
  text-decoration:none;transition:background .2s,transform .2s,box-shadow .2s;text-align:center}
.btn-line{background:var(--sage);color:#fff;box-shadow:0 6px 18px rgba(111,138,110,.28)}
.btn-line:hover{background:var(--sage-dark);transform:translateY(-1px)}
.btn-ig{background:transparent;color:var(--charcoal);border:1.5px solid var(--charcoal)}
.btn-ig:hover{background:var(--charcoal);color:var(--stone)}
.btn-ig.on-dark{color:var(--stone);border-color:var(--stone)}
.btn-ig.on-dark:hover{background:var(--stone);color:var(--charcoal)}

/* hero */
.hero{padding:24px 0 72px}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;color:var(--sage-dark);
  background:rgba(141,164,140,.16);padding:6px 14px;border-radius:999px;margin-bottom:20px}
.nb{display:inline-block}
.hero h1{font-size:38px;line-height:1.5;font-weight:700;letter-spacing:.04em;margin-bottom:20px}
.hero .sub{font-size:18px;color:var(--charcoal);margin-bottom:12px;font-weight:500}
.hero .note{font-size:14px;color:var(--gray);margin-bottom:32px}
.hero-visual{width:100%;max-width:480px;margin-left:auto;background:#ECE6DB;border-radius:var(--radius);
  overflow:hidden;isolation:isolate}
.hero-visual picture{display:block}
.hero-visual img{width:100%;height:auto;mix-blend-mode:multiply}

/* sections */
section.block{padding:72px 0}
.sec-label{font-size:12px;letter-spacing:.24em;color:var(--sage-dark);font-weight:700;margin-bottom:8px}
.sec-title{font-size:28px;font-weight:700;line-height:1.5;margin-bottom:28px}
.lead{font-size:17px;max-width:720px}
.card{background:var(--card);border-radius:var(--radius);padding:32px;border:1px solid var(--line)}
.alt{background:var(--card)}
.alt .card{background:#fff}

/* about */
.about{display:grid;grid-template-columns:1fr;gap:40px}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:820px;margin:0 auto}
.phone{background:var(--charcoal);border-radius:34px;padding:10px;box-shadow:0 14px 34px rgba(42,47,56,.18)}
.phone img{border-radius:26px;width:100%;height:auto}
.shot-cap{text-align:center;font-size:13px;color:var(--gray);margin-top:12px}
.shots-note{text-align:center;font-size:13px;color:var(--gray);margin-top:20px}

/* lists */
.checklist{list-style:none;display:grid;gap:14px}
.checklist li{position:relative;padding-left:34px;font-size:16px}
.checklist li::before{content:"";position:absolute;left:0;top:.42em;width:20px;height:20px;border-radius:50%;
  background:var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.request{max-width:720px}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.two-col .card h3{font-size:20px;margin-bottom:20px;display:flex;align-items:center;gap:10px}
.two-col .card h3::before{content:"";width:6px;height:22px;border-radius:3px;background:var(--sage)}
.price{font-size:15px}
.price strong{white-space:nowrap;font-size:22px;color:var(--charcoal)}

/* usage */
.usage{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.usage .card{text-align:center;padding:28px 20px;font-weight:700;font-size:17px}
.usage .num{display:block;font-size:12px;letter-spacing:.2em;color:var(--sage-dark);margin-bottom:6px}

/* flow */
.flow{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step}
.flow li{position:relative;background:#fff;border-radius:var(--radius);padding:28px 20px 24px;border:1px solid var(--line);text-align:center;font-weight:500}
.flow li .step{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 auto 14px;
  border-radius:50%;background:var(--charcoal);color:var(--stone);font-weight:700;font-size:18px}
.flow li:not(:last-child)::after{content:"";position:absolute;right:-14px;top:50%;width:8px;height:8px;
  border-top:2px solid var(--sage);border-right:2px solid var(--sage);transform:translateY(-50%) rotate(45deg)}

/* faq */
.faq{display:grid;gap:16px;max-width:820px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 28px}
.faq summary{list-style:none;cursor:pointer;font-weight:700;display:flex;gap:14px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq .q,.faq .a{flex:none;display:inline-flex;width:30px;height:30px;border-radius:50%;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.faq .q{background:var(--charcoal);color:var(--stone)}
.faq .a{background:var(--sage);color:#fff}
.faq .answer{display:flex;gap:14px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}

/* cta */
.cta{background:var(--charcoal);color:var(--stone);text-align:center;padding:80px 0}
.cta h2{font-size:28px;margin-bottom:32px;line-height:1.5}
.cta p{color:#BFC1C4;margin-bottom:32px}
.cta .btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* footer */
footer{background:#22262E;color:#BFC1C4;font-size:13px;padding:36px 0;line-height:2}
footer .org{color:var(--stone);font-weight:700;font-size:14px;margin-bottom:8px}

@media (max-width:860px){
  .hero .wrap,.two-col{grid-template-columns:1fr}
  .hero{padding:8px 0 56px}
  .hero h1{font-size:28px}
  .hero .sub{font-size:16px}
  .hero-visual{max-width:420px;margin:0 auto;order:-1}
  .hero .btn{width:100%}
  section.block{padding:56px 0}
  .sec-title{font-size:23px}
  .card{padding:24px}
  .shots{grid-template-columns:repeat(3,1fr);gap:12px}
  .phone{border-radius:20px;padding:5px}.phone img{border-radius:16px}
  .shot-cap{font-size:11px}
  .usage{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr 1fr;gap:16px}
  .flow li:not(:last-child)::after{display:none}
  .cta{padding:64px 0}.cta h2{font-size:22px}
  .cta .btn{width:100%}
  .header-tag{display:none}
  .logo img{height:36px}
  .faq details{padding:18px 20px}
}

/* --- XXBase への組み込み用の追加（文面は変えない） --- */
footer .copy{margin-top:16px;font-size:12px;color:#7A7C80}
.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none}