/* top-page.html から抜き出したヘッダー・フッター。
   直接書き換えず、top-page.html を直して tools/apply-chrome.py を流し直す。
   並び順は top-page.html のまま。入れ替えるとカスケードが変わる。 */

:root{--c-ink:      #1F1F1F;   
  --c-ink-sub:  #6B6764;
  --c-accent:   #CE1433;
  --c-accent-h: #A80F29;
  --c-soft:     #F8DBDD;
  
  --c-mist:     #FBF1F2;
  
  --c-gold:     #F9A600;
  --c-gold-pale:#F4DFC0;   
  --c-sumi-l:   #F3DEE0;   
  --c-paper:    #FDFDFD;
  --c-on-accent:#FDFDFD;
  --c-divider:  #EBD9DA;
  --c-sumi:     #EFC9CD;   
  --c-mute:     #6B6764;

  
  --f-display: "Noto Sans JP", sans-serif;   
  --f-body:    "Noto Sans JP", sans-serif;
  
  --f-yzs:     "Playfair Display","Noto Serif JP",Georgia,serif;

  
  --fs-xl:   clamp(28px, 2.2vw + 13px, 40px);  
  --fs-lg:   31.5px;                            
  
  --fs-md:   20px;                              
  --fs-base: 16px;                              
  --fs-xs:   13px;                              

  
  --sp-xxs:4px; --sp-xs:8px; --sp-sm:12px; --sp-md:16px;
  --sp-lg:24px; --sp-xl:40px; --sp-xxl:56px; --sp-xxxl:80px;
  --pad-sm:24px; --pad-md:40px; --pad-lg:60px; --pad-xlg:120px;

  
  --r-field:8px; --r-card:16px; --r-card-sm:12px; --r-pill:200px; --r-nl:24px;

  
  --header-h:72px;
  --header-max:1360px;
  --footer-max:1440px;

  
  
  --shippou:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23CE1433' stroke-width='1' opacity='.22'%3E%3Ccircle cx='0' cy='0' r='22'/%3E%3Ccircle cx='44' cy='0' r='22'/%3E%3Ccircle cx='0' cy='44' r='22'/%3E%3Ccircle cx='44' cy='44' r='22'/%3E%3Ccircle cx='22' cy='22' r='22'/%3E%3C/g%3E%3C/svg%3E");
  
  --kikkou:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='60' viewBox='0 0 34.64 60'%3E%3Cg fill='none' stroke='%23CE1433' stroke-width='1' opacity='.2'%3E%3Cpath d='M17.32 0 34.64 10 34.64 30 17.32 40 0 30 0 10Z'/%3E%3Cpath d='M0 30 17.32 40 17.32 60 0 70 -17.32 60 -17.32 40Z'/%3E%3Cpath d='M34.64 30 51.96 40 51.96 60 34.64 70 17.32 60 17.32 40Z'/%3E%3C/g%3E%3C/svg%3E");
  
  --kikkou-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='60' viewBox='0 0 34.64 60'%3E%3Cg fill='none' stroke='%23FDFDFD' stroke-width='1' opacity='.16'%3E%3Cpath d='M17.32 0 34.64 10 34.64 30 17.32 40 0 30 0 10Z'/%3E%3Cpath d='M0 30 17.32 40 17.32 60 0 70 -17.32 60 -17.32 40Z'/%3E%3Cpath d='M34.64 30 51.96 40 51.96 60 34.64 70 17.32 60 17.32 40Z'/%3E%3C/g%3E%3C/svg%3E");
  
  --kumo-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 150'%3E%3Cg fill='%23F3F1F0'%3E%3Crect x='0' y='8' width='150' height='30' rx='15'/%3E%3Crect x='166' y='8' width='54' height='30' rx='15'/%3E%3Crect x='30' y='50' width='196' height='30' rx='15'/%3E%3Crect x='0' y='92' width='112' height='30' rx='15'/%3E%3Crect x='128' y='92' width='40' height='30' rx='15'/%3E%3C/g%3E%3C/svg%3E");
  --kumo-r:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 150'%3E%3Cg fill='%23F3F1F0'%3E%3Crect x='80' y='8' width='190' height='30' rx='15'/%3E%3Crect x='150' y='50' width='150' height='30' rx='15'/%3E%3Crect x='96' y='50' width='40' height='30' rx='15'/%3E%3Crect x='186' y='92' width='114' height='30' rx='15'/%3E%3C/g%3E%3C/svg%3E");
  --ryusui:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 150' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23F3F1F0' stroke-width='9' stroke-linecap='round'%3E%3Cpath d='M0 132C150 132 250 60 430 66 580 71 660 124 840 118 990 113 1090 66 1200 70'/%3E%3Cpath d='M0 110C150 110 250 38 430 44 580 49 660 102 840 96 990 91 1090 44 1200 48'/%3E%3Cpath d='M0 88C150 88 250 16 430 22 580 27 660 80 840 74 990 69 1090 22 1200 26'/%3E%3C/g%3E%3C/svg%3E");}
@media (min-width:1024px){
  :root{--header-h:112px}
}
:root{--w-max:1600px;
  --gut:20px;}
@media (min-width:1024px){
  :root{--gut:80px}
}
@media (min-width:1280px){
  :root{--gut:max(min(calc(50% - 640px), 120px), calc(50% - 800px))}
}
.t-ui{font-size:var(--fs-base); line-height:1.4; font-weight:500}
.t-ui-b{font-size:var(--fs-base); line-height:1.4; font-weight:700}
.t-ui-s{font-size:var(--fs-xs); line-height:1.4; font-weight:500}
@media (max-width:1023px){
  :root{--fs-lg:26px}
}
:root{--sakura:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cg%20fill%3D'%23000'%3E%3Cpath%20d%3D'M12%2012%20C9.2%2012%207.6%209.6%208.2%207.2%20C8.6%205.6%209.8%204.4%2011.0%203.6%20L12%205.1%20L13.0%203.6%20C14.2%204.4%2015.4%205.6%2015.8%207.2%20C16.4%209.6%2014.8%2012%2012%2012%20Z'%20transform%3D'rotate(0%2012%2012)'%2F%3E%3Cpath%20d%3D'M12%2012%20C9.2%2012%207.6%209.6%208.2%207.2%20C8.6%205.6%209.8%204.4%2011.0%203.6%20L12%205.1%20L13.0%203.6%20C14.2%204.4%2015.4%205.6%2015.8%207.2%20C16.4%209.6%2014.8%2012%2012%2012%20Z'%20transform%3D'rotate(72%2012%2012)'%2F%3E%3Cpath%20d%3D'M12%2012%20C9.2%2012%207.6%209.6%208.2%207.2%20C8.6%205.6%209.8%204.4%2011.0%203.6%20L12%205.1%20L13.0%203.6%20C14.2%204.4%2015.4%205.6%2015.8%207.2%20C16.4%209.6%2014.8%2012%2012%2012%20Z'%20transform%3D'rotate(144%2012%2012)'%2F%3E%3Cpath%20d%3D'M12%2012%20C9.2%2012%207.6%209.6%208.2%207.2%20C8.6%205.6%209.8%204.4%2011.0%203.6%20L12%205.1%20L13.0%203.6%20C14.2%204.4%2015.4%205.6%2015.8%207.2%20C16.4%209.6%2014.8%2012%2012%2012%20Z'%20transform%3D'rotate(216%2012%2012)'%2F%3E%3Cpath%20d%3D'M12%2012%20C9.2%2012%207.6%209.6%208.2%207.2%20C8.6%205.6%209.8%204.4%2011.0%203.6%20L12%205.1%20L13.0%203.6%20C14.2%204.4%2015.4%205.6%2015.8%207.2%20C16.4%209.6%2014.8%2012%2012%2012%20Z'%20transform%3D'rotate(288%2012%2012)'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'1.5'%20fill%3D'%23fff'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");}
.btn{display:inline-flex; align-items:center; justify-content:center;
  padding:16px 28px;
  border:1px solid var(--c-ink); border-radius:var(--r-pill);
  background:transparent; color:var(--c-ink);
  font-family:var(--f-body); font-size:var(--fs-base); line-height:1.2; font-weight:700;
  letter-spacing:normal; text-transform:none; text-decoration:none; white-space:nowrap;
  position:relative; overflow:hidden; z-index:0; cursor:pointer;
  transition:color .5s, transform .25s;}
.btn--sm{padding:12px 24px}
.btn--lg{padding:20px 24px}
.btn::before{content:""; position:absolute; z-index:-1;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:110%; aspect-ratio:1/1;
  background:var(--c-accent);
  clip-path:circle(0 at 50% 50%);
  transition:all .25s .25s, clip-path .5s;}
.btn:hover{color:var(--c-paper)}
.btn:hover::before{clip-path:circle(52% at 50% 50%)}
.btn--primary{background:var(--c-accent); border-color:var(--c-accent); color:var(--c-on-accent)}
.btn--primary::before{background:var(--c-accent-h)}
.btn--white{background:var(--c-paper); border-color:var(--c-ink); color:var(--c-ink)}
.btn--wa{gap:10px}
.btn--wa i{font-size:1.2em; line-height:1}
html.js .js-reveal > *{clip-path:inset(0 100% 0 0);
  opacity:0;}
html.js .js-reveal.is-shown > *{clip-path:inset(0 -2% 0 0);
  opacity:1;
  
  transition:clip-path .95s cubic-bezier(.33,.9,.35,1), opacity .45s ease;}
html.js .js-reveal.is-shown > *:nth-child(1){transition-delay:0s,    0s}
html.js .js-reveal.is-shown > *:nth-child(2){transition-delay:.10s, .10s}
html.js .js-reveal.is-shown > *:nth-child(3){transition-delay:.20s, .20s}
html.js .js-reveal.is-shown > *:nth-child(4){transition-delay:.30s, .30s}
html.js .js-reveal.is-shown > *:nth-child(5){transition-delay:.40s, .40s}
html.js .js-reveal.is-shown > *:nth-child(6){transition-delay:.50s, .50s}
@media (prefers-reduced-motion: reduce){
  html.js .js-reveal > *, html.js .js-reveal.is-shown > *{clip-path:none !important; opacity:1 !important; transition:none !important}
}
.topbar{position:relative; z-index:100000;
  background:var(--c-accent); color:var(--c-paper);
  height:40px; padding:8px 20px;}
@media (min-width:1024px){
  .topbar{padding:8px 40px}
}
.topbar__inner{display:flex; align-items:center; justify-content:flex-end; gap:16px;
  
  width:100%; margin-inline:auto; height:100%;}
.topbar__note{margin-right:auto; font-size:13px; font-weight:400; line-height:1.3;
  opacity:.85; white-space:nowrap;}
@media (max-width:1159px){
  .topbar__note{display:none}
}
@media (min-width:768px){
  .topbar__inner{gap:24px}
}
.topbar a{display:inline-flex; align-items:center; gap:6px;
  color:var(--c-paper); text-decoration:none;
  font-size:13px; font-weight:700; line-height:1.3; white-space:nowrap;
  transition:opacity .2s;}
.topbar a:hover{opacity:.75}
.topbar i{font-size:14px}
@media (max-width:767px){
  .topbar{padding:8px 16px}
  .topbar a[href*="#"]{display:none}
}
.sh{position:absolute; top:40px; left:0; width:100%; z-index:99999;
  height:var(--header-h); background:transparent; color:var(--c-paper);}
.sh::before{content:""; position:absolute; inset:0 0 auto 0; height:calc(100% + 40px); z-index:-1;
  background:linear-gradient(to bottom, rgba(31,31,31,.5), rgba(31,31,31,0));
  transition:opacity .25s ease;}
.sh__inner{display:flex; align-items:center; justify-content:space-between; gap:24px;
  height:100%; width:100%; padding-inline:20px;}
@media (min-width:1024px){
  .sh__inner{padding-inline:48px}
}
.sh__logo{display:block; flex:0 0 auto; width:150px}
@media (min-width:1024px){
  .sh__logo{width:222px}
}
.sh__logo img{width:100%; height:auto}
.sh__nav{display:none}
@media (min-width:1320px){
  .sh__nav{display:block}
}
.sh__nav, .sh__nav ul, .sh__nav li{height:100%}
.sh__nav ul{display:flex; align-items:stretch; gap:0}
.sh__nav li{display:flex}
@media (max-width:1399px){
  .sh__nav a{padding:0 8px}
  .sh__nav i{display:none}
}
.sh__nav a{display:inline-flex; align-items:center; gap:4px; height:100%;
  color:var(--c-paper); text-decoration:none; white-space:nowrap;
  font-size:14px; font-weight:700; line-height:14px; letter-spacing:.42px;
  padding:0 12px; opacity:1; transition:opacity .2s;}
.sh__nav a{position:relative}
.sh__nav a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:0;
  background:currentColor;
  transition:transform .25s, width .25s, height .25s;}
.sh__nav a:hover{opacity:1}
.sh__nav a:hover::after{height:6px}
.sh__nav i{font-size:14px; line-height:14px}
.fixh{position:fixed; top:0; left:0; width:100%; height:64px; z-index:101;
  color:var(--c-paper); background:transparent;
  box-shadow:0 1px 10px rgba(31,31,31,.10);
  transform:translateY(-100%); opacity:0; pointer-events:none;
  transition:transform .5s ease, opacity .3s ease;}
.fixh::before{content:""; position:absolute; inset:0; z-index:0;
  background:var(--c-accent); opacity:.6;}
.fixh__inner{position:relative; z-index:1}
html.-fixh .fixh{transform:translateY(0); opacity:1; pointer-events:auto}
.fixh__inner{display:flex; align-items:center; justify-content:space-between; gap:24px;
  height:100%; width:100%; max-width:var(--w-max); margin-inline:auto; padding-inline:20px;}
@media (min-width:1024px){
  .fixh__inner{padding-inline:40px}
}
.fixh__logo{display:block; flex:0 0 auto; width:126px}
.fixh__logo img{width:100%; height:auto}
.fixh__nav{display:none}
@media (min-width:1160px){
  .fixh__nav{display:block}
}
.fixh__nav, .fixh__nav ul, .fixh__nav li{height:100%}
.fixh__nav ul{display:flex; align-items:stretch; gap:0}
.fixh__nav li{display:flex}
.fixh__nav a{display:inline-flex; align-items:center; gap:4px;
  color:var(--c-paper); text-decoration:none; white-space:nowrap;
  font-size:14px; font-weight:700; line-height:14px; letter-spacing:.42px;
  position:relative; padding:0 12px; height:100%;}
.fixh__nav a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:0;
  background:currentColor; transition:height .25s;}
.fixh__nav a:hover::after{height:6px}
@media (max-width:1399px){
  .fixh__nav a{padding:0 8px}
  .fixh__nav i{display:none}
}
.fixh .sh__burger{display:grid}
@media (min-width:1160px){
  .fixh .sh__burger{display:none}
}
body.-mobile-menu-open .sh{position:fixed; z-index:100000}
.sh__burger{display:grid; place-items:center;
  width:40px; height:40px; border:0; background:none; cursor:pointer; padding:0;
  flex:0 0 auto; color:inherit; font-size:20px; line-height:1;}
@media (min-width:1160px){
  .sh__burger{display:none}
}
.sh__mobile{position:fixed; top:0; left:0; width:100%;
  height:100vh;
  height:100svh;
  background:var(--c-paper); color:var(--c-ink);
  padding:0 0 40px; z-index:8;
  transform:translateX(100%); transition:transform .4s ease; overflow-y:auto;}
@media (min-width:1160px){
  .sh__mobile{display:none}
}
body.-mobile-menu-open .sh__mobile{transform:translateX(0)}
.sh__close{position:absolute; top:calc(var(--header-h) - 44px); right:12px;
  display:grid; place-items:center; width:40px; height:40px;
  border:0; background:none; color:var(--c-ink); cursor:pointer; padding:0;
  font-size:20px; line-height:1; z-index:2;}
.sh__mtitle{margin:0 0 24px; padding:8px 12px;
  background:var(--c-accent); color:var(--c-paper);
  font-size:var(--fs-base); font-weight:700; line-height:1.6; text-align:left;}
.sh__mobile ul{display:flex; flex-direction:column}
.sh__mobile a{display:flex; align-items:center; gap:10px;
  padding:12px 16px 12px 24px; color:var(--c-ink); text-decoration:none;
  font-size:var(--fs-base); font-weight:400;
  border-bottom:.75px solid rgba(199,199,199,.5);}
.sh__mobile i{width:20px; text-align:center}
.sh__mhead{position:relative; padding-top:calc(var(--header-h) + 8px)}
html.js .js-anim-title .ch{opacity:0; transform:translateY(18px)}
html.js .js-anim-title.is-in .ch{opacity:1; transform:none;
  transition:opacity .55s cubic-bezier(.215,.61,.355,1), transform .55s cubic-bezier(.215,.61,.355,1);
  transition-delay:calc(var(--i) * .018s);}
html.js .js-anim-copy{opacity:0; transform:translateY(20px)}
html.js .js-anim-copy.is-in{opacity:1; transform:none;
  transition:opacity .8s cubic-bezier(.33,1,.68,1), transform .8s cubic-bezier(.33,1,.68,1);}
@media (prefers-reduced-motion: reduce){
  html.js .js-anim-title .ch, html.js .js-anim-copy{opacity:1 !important; transform:none !important; transition:none !important;}
}
.btn-row{display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.ft__col--nl{min-width:0}
.f-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.floatbtns{position:fixed; right:20px; bottom:140px; z-index:99;
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;}
@media (max-width:1159px){
  .floatbtns{right:16px; bottom:calc(103px + env(safe-area-inset-bottom, 0px))}
}
.floatbtn{position:relative;
  display:grid; place-items:center; width:56px; height:56px; border:0; border-radius:50%;
  box-shadow:0 4px 14px rgba(31,31,31,.28); cursor:pointer;
  transition:background-color .2s ease;}
.floatbtn svg{width:30px; height:30px; fill:currentColor}
.floatbtn__tip{display:none}
@media (hover:hover){
  .floatbtn__tip{position:absolute; right:calc(100% + 10px); top:50%; transform:translateY(-50%);
    display:flex; align-items:center; height:34px; padding:0 16px;
    background:#25D366; color:#FFFFFF; border-radius:10px;
    font-family:var(--f-body); font-size:13px; font-weight:400; line-height:1;
    white-space:nowrap; pointer-events:none;
    opacity:0; visibility:hidden;
    transition:opacity .18s ease, visibility .18s ease;}
  .floatbtn:hover .floatbtn__tip, .floatbtn:focus-visible .floatbtn__tip{opacity:1; visibility:visible}
}
.floatbtn--wa{background:#25D366; color:#FFFFFF}
.floatbtn--wa:hover{background:#1FB855}
@media (max-width:767px){
  .floatbtn{width:50px; height:50px}
  .floatbtn svg{width:27px; height:27px}
}
body.-mobile-menu-open .floatbtns{display:none}
.ft{position:relative; overflow-x:hidden;
  background:var(--c-soft); color:var(--c-ink);
  padding-block:72px 0; padding-inline:20px;}
@media (min-width:1024px){
  .ft{padding-block:96px 0; padding-inline:80px}
}
@media (min-width:1280px){
  .ft{padding-inline:var(--gut)}
}
.ft__inner{width:100%; max-width:var(--w-max); margin-inline:auto}
.ft::before, .ft::after{content:""; position:absolute; z-index:0; pointer-events:none;
  
  background:var(--c-sumi);}
.ft::before{left:0; top:0; width:300px; height:330px;
  -webkit-mask:url(ryusui-tl.webp) no-repeat left top / contain;
          mask:url(ryusui-tl.webp) no-repeat left top / contain;}
.ft::after{right:0; bottom:0; width:385px; height:277px;
  -webkit-mask:url(ryusui-br.webp) no-repeat right bottom / contain;
          mask:url(ryusui-br.webp) no-repeat right bottom / contain;}
@media (min-width:1024px){
  .ft::before{width:400px; height:440px}
  .ft::after{width:520px; height:374px}
}
@media (max-width:767px){
  .ft::before{width:200px; height:220px}
  .ft::after{width:250px; height:180px}
}
.ft__deco, .ft__inner, .ft__bar{position:relative; z-index:1}
.ft__deco{position:absolute; left:0; top:-14px; width:100%; height:14px; line-height:0; z-index:2}
.ft__deco svg{display:block; position:absolute; left:50%; transform:translateX(-50%);
  width:100%; min-width:100vw; height:auto; min-height:14px;}
.ft__cols{display:grid; grid-template-columns:1fr; gap:48px}
@media (min-width:768px){
  .ft__cols{grid-template-columns:1fr 1fr}
}
@media (min-width:1024px){
  .ft__cols{grid-template-columns:1fr 1fr 420px; gap:56px}
}
.ft__h{margin:0 0 20px; font-family:var(--f-body);
  font-size:var(--fs-base); font-weight:700; line-height:1.4; color:var(--c-ink);}
.ft__h--rule{padding-bottom:12px; border-bottom:2px solid var(--c-accent)}
.ft__list{display:flex; flex-direction:column; gap:14px}
.ft__list a{display:inline-flex; align-items:center; gap:10px;
  color:var(--c-ink); font-size:var(--fs-base); font-weight:500; line-height:1.4;
  text-decoration:none;
  transition:color .25s ease;}
.ft__list a:hover{color:var(--c-accent)}
.ft__list i{width:18px; text-align:center; flex:0 0 auto; color:var(--c-ink)}
.ft__list a:hover i{color:var(--c-accent)}
.ft__pay{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.ft__pay li{display:grid; place-items:center}
.ft__pay img{width:48px; height:auto; display:block}
.ft__badge{display:flex; gap:8px; align-items:center; margin-top:40px}
.ft__badge-stars{color:var(--c-accent); letter-spacing:2px}
.ft__bar{margin-top:72px; padding-block:24px;
  margin-inline:calc(50% - 50vw);
  background:var(--c-accent); color:var(--c-paper);}
.ft__bar-inner{width:100%; max-width:var(--w-max); margin-inline:auto; padding-inline:20px;
  display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;}
.ft__bar-social{display:flex; gap:18px}
.ft__bar-social a{color:var(--c-paper); font-size:var(--fs-base); text-decoration:none; opacity:.9}
.ft__bar-social a:hover{opacity:1}
.ft__bar-links{display:flex; flex-wrap:wrap; justify-content:center; gap:0}
.ft__bar-links li{padding:0 14px; border-left:1px solid rgba(253,253,253,.45)}
.ft__bar-links li:last-child{border-right:1px solid rgba(253,253,253,.45)}
.ft__bar-links a, .ft__bar-links span{color:var(--c-paper); font-size:var(--fs-xs); text-decoration:none; white-space:nowrap;}
.ft__bar-links a:hover{text-decoration:underline}
.ft__copy{font-size:var(--fs-xs); color:rgba(253,253,253,.9)}
.nl{margin-top:0; padding:28px 24px;
  background:var(--c-paper); border:1px solid var(--c-divider);
  border-radius:var(--r-nl);
  box-shadow:0 10px 30px rgba(31,31,31,.05);}
@media (min-width:1024px){
  .nl{padding:32px 28px}
}
.nl__h{margin:0; font-family:var(--f-yzs); font-weight:700;
  font-size:clamp(22px, 1vw + 16px, 27px); line-height:1.25; color:var(--c-ink);}
.nl__h::after{content:""; display:block; width:44px; height:3px; margin-top:14px;
  background:var(--c-accent);}
.nl__lead{margin:16px 0 0; font-size:var(--fs-xs); line-height:1.8; color:var(--c-mute)}
.nl__grid{display:grid; grid-template-columns:minmax(0,1fr); gap:18px; margin-top:24px}
@media (min-width:480px){
  .nl__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px 16px}
}
.nl__full{grid-column:1 / -1}
.nl__field{display:block; min-width:0}
.nl__label{display:block; margin-bottom:8px;
  font-size:var(--fs-xs); font-weight:700; line-height:1.3; color:var(--c-ink);}
.nl__label em{color:var(--c-accent); font-style:normal}
.nl__input{width:100%; min-height:44px; padding:12px 14px;
  background:var(--c-paper); color:var(--c-ink);
  border:1px solid rgba(31,31,31,.25); border-radius:0;
  font-family:var(--f-body); font-size:var(--fs-base); line-height:1.4;
  transition:border-color .2s ease;}
.nl__input::placeholder{color:var(--c-mute)}
.nl__input:focus{outline:none; box-shadow:none; border-color:var(--c-ink)}
.nl__select{appearance:none; -webkit-appearance:none; cursor:pointer;
  padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%208'%3E%3Cpath%20d%3D'M1%201l5%205%205-5'%20fill%3D'none'%20stroke%3D'%23CE1433'%20stroke-width%3D'1.6'%2F%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:12px 8px;}
.nl__note{margin:0; font-size:var(--fs-xs); color:var(--c-mute); line-height:1.5}
.nl__note a{color:var(--c-accent)}
.nl .btn{justify-self:start}
.fixbar{position:fixed; left:0; bottom:0; width:100%; z-index:98;
  display:flex; align-items:stretch; gap:8px;
  padding:8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  background:rgba(253,253,253,.96); backdrop-filter:blur(6px);
  box-shadow:0 -1px 10px rgba(31,31,31,.12);}
@media (min-width:1160px){
  .fixbar{display:none}
}
.fixbar__link{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-width:56px; padding:4px 2px; color:var(--c-ink); text-decoration:none;}
.fixbar__link i{font-size:17px; line-height:1}
.fixbar__link span{font-size:10px; font-weight:700; letter-spacing:.02em; line-height:1.2}
.fixbar__link:hover{color:var(--c-accent)}
.fixbar__cta{flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--r-pill); background:var(--c-accent); color:var(--c-paper);
  text-decoration:none; font-size:var(--fs-base); font-weight:700; padding:12px 16px;
  transition:background-color .2s;}
.fixbar__cta:active{background:var(--c-accent-h)}
body.-mobile-menu-open .fixbar{display:none}
@media (max-width:767px){
  .fixbar__link{min-width:44px; padding-inline:0}
  .fixbar__cta{white-space:nowrap; font-size:13px; padding-inline:14px; gap:6px}
}
@media (max-width:389px){
  .fixbar__link{min-width:38px}
  .fixbar__link span{font-size:9px}
  .fixbar__cta{font-size:12px; padding-inline:10px}
}
@media (max-width:359px){
  .topbar__inner{gap:10px}
  .topbar__inner a{font-size:12px; min-width:0}
}

/* ---------- 記事ページ向けの調整 ---------- */

/* 画像に width/height 属性を入れた（tools/fix-images.py）。
   属性は「縦横比をブラウザに先に教える」ためのもので、読み込み中に
   本文が飛ぶのを防ぐ。ただし属性の height をそのまま使われると、
   幅が縮んだときに縦だけ元のままになって歪む。それを打ち消す1行。
   詳細度が最低なので、明示的に高さを持つ指定（.jt-fd__card img など）は
   これまでどおり勝つ。 */
img{ height:auto }

/* 記事ページの地の文。SWELLの既定のまま（ヒラギノ角ゴ・純黒 #000）だったため、
   トップページ（Noto Sans JP・#1F1F1F）と書体も濃さも違って見えていた。
   FAQページのように独自クラスで組んだ部分だけ正しく、その外側——
   見出しの余白、注記、リンク——が別の書体で出ていた。
   純黒はこのサイトでは使わない決まりでもある。 */
body{
  font-family:"Noto Sans JP", sans-serif;
  color:var(--c-ink, #1F1F1F);
}

/* ページ見出しと導入文を、トップページの見出し（.t-h2）と
   リード文（.sec__lead）に合わせる。SWELLの既定のままだと、
   同じサイトなのに文字の大きさも太さも別物に見えていた。 */
.c-pageTitle, .c-pageTitle__inner{
  font-family:var(--f-display); font-weight:700; letter-spacing:.2px;
  font-size:var(--fs-lg); line-height:1.45; color:var(--c-ink);
}
.c-pageTitle{ margin:0 0 8px; padding:0; border:0; background:none; text-align:left }
.c-pageTitle::before, .c-pageTitle::after{ content:none }
.jt-page__lead{
  max-width:62ch; margin:20px 0 0;
  font-size:var(--fs-base); line-height:1.9; color:var(--c-ink);
}

/* 特定商取引法の表記。日本語版と英語版を相互に案内する行と、
   電話番号に添える但し書き（2026-10-01）。 */
.jt-altlang{ margin:28px 0 0; padding-top:16px; border-top:1px solid var(--c-line, #E6E4DF);
  font-size:var(--fs-xs); line-height:1.8; color:var(--c-ink-sub) }
.jt-altlang a{ color:var(--c-accent) }
.jt-note{ color:var(--c-ink-sub) }

/* 送信完了・登録完了のページ。見出しと2〜3行だけの簡素な作りにする
   （代表の指示「シンプルで良い」「一番下のカラムは要らない」）。 */
.jt-done__note{ max-width:62ch; margin:20px 0 0;
  font-size:var(--fs-xs); line-height:1.9; color:var(--c-ink-sub) }
.jt-done__fig{ margin:40px 0 0; max-width:560px }
.jt-done__fig img{ width:100%; height:auto; border-radius:16px; display:block }

/* インラインSVGアイコンと日本語フォント。
   top-page.html の <style> にも同じものがあるが、build_css は KEEP で
   絞り込むため拾われない（.ic を KEEP に入れると .icon-btn まで巻き込む）。
   ここで毎回書き出す。直すときは top-page.html と両方直すこと。
   これが無いとスプライトの <svg> が 300x150 の置換要素として扱われ、
   記事の先頭に150pxの空白ができる（2026-09-26に発生）。 */
.ic{height:1em;width:auto;vertical-align:-.125em;fill:currentColor;display:inline-block;overflow:visible}
.ic-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ja{font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",YuGothic,"Meiryo",sans-serif}

/* 記事の中の幅の広い表。SWELLは --table-width:800px を付けて横スクロール
   させる作りだが、390pxの画面では右の列が画面外に出たままで、
   スクロールできることに気づけない（実測で425pxはみ出していた）。
   列は最大3つなので、スマホでは画面内に収める。 */
@media (max-width:767px){
  [data-table-scrollable]{ overflow-x:visible; padding-bottom:0 }
  [data-table-scrollable] table{
    width:100% !important; max-width:100% !important; min-width:0 !important;
    table-layout:auto;
  }
  [data-table-scrollable] th,
  [data-table-scrollable] td{
    padding:8px 10px; font-size:14px; line-height:1.5;
    word-break:normal; overflow-wrap:anywhere;
  }
  /* 収まるので「横にスクロールできます」の案内は出さない */
  .c-scrollHint{ display:none !important }
}

/* トップはヒーロー写真の上に重ねるので透過だが、記事は下が白地なので赤で塗る。
   top:40px はトップページで上帯の下へ絶対配置するための値。
   position:relative にしただけだとこの 40px がそのまま効いて
   上帯とヘッダーの間に白い帯ができるので、ここで打ち消す。 */
.sh{ position:relative; top:auto; background:var(--c-accent) }
.sh::before{ display:none }

/* 上帯は記事ページでは色を反転させる。
   トップは「赤い上帯 ＋ 写真に重なる透過ヘッダー」なので赤は一枚だけだが、
   記事はヘッダーが赤で塗られるため、上帯も赤だと赤が二段重なって主張が強すぎる。
   そこで上帯だけ生成り地に墨文字へ落とし、赤はヘッダーの一枚に集める。
   区切りが分かるよう、下辺に細い線を入れる。 */
.topbar{
  background:var(--c-soft); color:var(--c-ink);
  border-bottom:1px solid rgba(31,31,31,.10);
}
.topbar a{ color:var(--c-ink) }
.topbar a:hover{ opacity:1; color:var(--c-accent) }
.topbar i{ color:var(--c-accent) }
.topbar__note{ opacity:.7 }

/* SWELL 側の指定が效かないように、この2つだけは自前で閉じる */
.sh *, .fixh *, .ft *, .fixbar *{ box-sizing:border-box }
.sh, .fixh, .ft, .fixbar{
  box-sizing:border-box;
  font-family:"Noto Sans JP", sans-serif;
  line-height:1.6;
}
.sh ul, .fixh ul, .ft ul, .sh__mobile ul{ list-style:none; margin:0; padding:0 }
.sh a, .fixh a, .ft a, .fixbar a{ text-decoration:none }
.ft img{ max-width:100% ; height:auto }

/* ロゴは inline 画像なので、ページによってベースライン分の隙間が出て
   ヘッダーの高さが7pxほどずれる。block にして揃える */
.sh__logo, .fixh__logo{ display:flex; align-items:center }
.sh__logo img, .fixh__logo img{ display:block }

/* 記事は本文が続くので、フッター上の波は詰めて出す */
.ft{ margin-top:0 }

/* 下部固定メニューぶんの余白（SWELL の body ではなく #body_wrap に付ける） */
@media (max-width:1159px){ #body_wrap{ padding-bottom:78px } }