/* ========================================================
   shinya-kiregawa.com 共通スタイル（2026-09 リニューアル）
   旧ページの変数名（--navy 等）も新しい色に置き換える
   ======================================================== */
:root{
  color-scheme:light only;
  --green:#1F5C46;      /* 深緑：見出し・ボタン */
  --green-deep:#164235;
  --green-pale:#E6EFE9;
  --ochre:#B8892B;      /* からし色：強調の一点 */
  --ochre-pale:#F6EFDC;
  --paper:#EDE6DA;      /* 写真の背景に合わせた生成り */
  --paper-soft:#F7F4EE;
  --ink:#1E2A26;
  --ink-soft:#4B5753;
  --line:#DCD6CB;
  --bg:#FFFFFF;
  --serif:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP","Noto Serif CJK JP",serif;
  --sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo","Noto Sans JP","Noto Sans CJK JP",sans-serif;
  /* 旧テンプレートの変数を新色へ */
  --navy:#1F5C46;--navy-deep:#164235;--teal:#B8892B;--teal-dark:#8F6A1E;
  --bg-soft:#F7F4EE;
  --shu:#A8432C;--keisen:#DCD6CB;--sumi:#1E2A26;--kinari:#F7F4EE;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:90px;}
body{margin:0;font-family:var(--sans);color:var(--ink);line-height:1.9;background:var(--bg);-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--ochre);outline-offset:2px;}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
.narrow{max-width:760px;margin:0 auto;}

/* ---------- ヘッダー ---------- */
header.site-head{position:sticky;top:0;left:0;width:100%;z-index:1000;background:#fff;border-bottom:1px solid var(--line);padding:0;}
.sh-in{max-width:1180px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.sh-logo{display:flex;flex-direction:column;line-height:1.25;color:var(--ink);}
.sh-logo-sub{font-size:11px;color:var(--ink-soft);letter-spacing:.04em;}
.sh-logo-main{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--green);white-space:nowrap;}
.sh-nav{display:flex;align-items:center;gap:18px;}
.sh-nav a{font-size:13.5px;white-space:nowrap;color:var(--ink);padding:6px 0;border-bottom:2px solid transparent;}
.sh-nav a:hover,.sh-nav a[aria-current="page"]{border-bottom-color:var(--ochre);}
.sh-cta{display:flex;align-items:center;gap:14px;}
.sh-tel{font-size:13px;color:var(--ink-soft);line-height:1.3;text-align:right;}
.sh-tel b{display:block;white-space:nowrap;font-size:17px;color:var(--ink);font-family:var(--serif);letter-spacing:.02em;}
.sh-btn{background:var(--green);color:#fff;font-weight:700;font-size:14px;padding:11px 22px;border-radius:4px;white-space:nowrap;}
.sh-btn:hover{background:var(--green-deep);}
.sh-burger{display:none;background:none;border:1px solid var(--line);border-radius:4px;width:44px;height:44px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;}
.sh-burger span{display:block;width:20px;height:2px;background:var(--ink);}
.sh-drawer{display:none;}
@media(max-width:1340px){.sh-tel{display:none;}}
@media(max-width:1200px){.sh-logo-sub{display:none;}.sh-logo-main{font-size:17px;}}
@media(max-width:960px){
  .sh-nav,.sh-tel{display:none;}
  .sh-burger{display:flex;}
  .sh-btn{padding:10px 14px;font-size:13px;}
  .sh-drawer{display:none;position:fixed;inset:69px 0 0 0;background:#fff;z-index:999;padding:20px 24px 100px;overflow:auto;}
  .sh-drawer.open{display:block;}
  .sh-drawer a{display:block;padding:14px 0;border-bottom:1px solid var(--line);font-size:16px;}
  .sh-drawer .sub{padding-left:18px;font-size:14px;color:var(--ink-soft);}
  .sh-drawer .drawer-tel{margin-top:22px;font-size:14px;color:var(--ink-soft);}
  .sh-drawer .drawer-tel b{display:block;font-size:22px;font-family:var(--serif);color:var(--ink);}
}
@media(max-width:480px){.sh-logo-main{font-size:14px;white-space:normal;}.sh-in{padding:10px 16px;gap:8px;}.sh-btn{padding:9px 10px;font-size:12px;}}

/* ---------- 見出しと本文 ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.45;color:var(--ink);margin:0;letter-spacing:.02em;}
.sec{padding:84px 0;position:relative;}
.sec:nth-of-type(even){padding:104px 0;}
.sec.has-label > .wrap{padding-left:96px;}
.slabel{position:absolute;left:max(24px,calc(50% - 540px));top:86px;writing-mode:vertical-rl;font-family:var(--serif);font-size:15px;letter-spacing:.34em;color:var(--ink-soft);opacity:.78;}
.slabel::after{content:"";display:block;width:1px;height:46px;background:var(--line);margin:14px auto 0;}
@media(max-width:1000px){.sec.has-label > .wrap{padding-left:24px;}.slabel{position:static;writing-mode:horizontal-tb;display:block;font-size:12px;letter-spacing:.3em;color:var(--ochre);margin:0 24px 6px;}.slabel::after{display:none;}}
.sec-paper{background:var(--paper-soft);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");}
.sec-title{font-size:clamp(26px,3.6vw,36px);margin-bottom:16px;position:relative;letter-spacing:.04em;}
.sec-title .ul{display:block;width:clamp(120px,22vw,230px);height:9px;margin-top:10px;color:var(--ochre);}
.sec-title .ul path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:400;stroke-dashoffset:0;}
.sec-lead{font-size:16px;color:var(--ink-soft);max-width:680px;margin:0 0 40px;}
.sec-head{margin-bottom:40px;}
p{margin:0 0 1.2em;}
.mincho{font-family:var(--serif);}
.num{font-family:var(--serif);font-size:1.5em;color:var(--green);font-weight:700;line-height:1;}
.more{display:inline-block;margin-top:14px;color:var(--green);font-weight:700;border-bottom:1px solid var(--green);padding-bottom:1px;}
.more:hover{color:var(--ochre);border-bottom-color:var(--ochre);}
.btn{display:inline-block;background:var(--green);color:#fff;font-weight:700;font-size:16px;padding:16px 34px;border-radius:4px;text-align:center;border:2px solid var(--green);}
.btn:hover{background:var(--green-deep);border-color:var(--green-deep);}
.btn-ghost{background:#fff;color:var(--green);}
.btn-ghost:hover{background:var(--green-pale);}
.note{font-size:13px;color:var(--ink-soft);}

/* ---------- 汎用パーツ ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
@media(max-width:820px){.two-col{grid-template-columns:1fr;gap:36px;}}
.rule-list{list-style:none;padding:0;margin:0;}
.rule-list li{padding:18px 0;border-top:1px solid var(--line);}
.rule-list li:last-child{border-bottom:1px solid var(--line);}
.ico{width:48px;height:48px;flex:none;color:var(--green);}
.ico svg{filter:url(#rough);}
.ico svg{width:100%;height:100%;}
.svc-row{display:flex;gap:20px;align-items:flex-start;}
.svc-row h3{font-size:19px;margin-bottom:6px;}
.svc-row p{margin:0;color:var(--ink-soft);font-size:15px;}
.svc-row .tag{display:inline-block;font-size:12px;color:var(--ochre);border:1px solid var(--ochre);padding:1px 8px;border-radius:2px;margin-left:8px;vertical-align:middle;font-family:var(--sans);font-weight:400;}

/* 引用（お客様の声） */
.voice{border-top:1px solid var(--line);padding:32px 0;}
.voice-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin-bottom:10px;}
.voice-result{font-family:var(--serif);font-size:22px;color:var(--green);font-weight:700;}
.voice-attr{font-size:13px;color:var(--ink-soft);}
.voice-body p{font-size:15px;}
.voice-quote{margin:18px 0 0;padding:16px 20px;background:var(--paper-soft);border-left:3px solid var(--ochre);font-family:var(--serif);font-size:16px;}
.voice-quote small{display:block;font-family:var(--sans);font-size:12px;color:var(--ink-soft);margin-bottom:4px;}

/* FAQ */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font-weight:700;font-size:16px;position:relative;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;border-right:2px solid var(--green);border-bottom:2px solid var(--green);transform:translateY(-70%) rotate(45deg);transition:transform .25s;}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.faq .ans{padding:0 0 22px;color:var(--ink-soft);font-size:15px;}
.faq .ans a{color:var(--green);text-decoration:underline;}

/* 流れ */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:step;}
.flow li{list-style:none;padding:0 18px 0 0;position:relative;}
.flow li .stp{font-family:var(--serif);color:var(--ochre);font-size:22px;line-height:1;}
.flow li h3{font-size:17px;margin:4px 0 8px;}
.flow li p{font-size:14px;color:var(--ink-soft);margin:0;}
.flow li::before{content:"";display:block;height:2px;background:var(--line);margin-bottom:16px;}
.flow li:first-child::before{background:var(--green);}
@media(max-width:820px){.flow{grid-template-columns:1fr;gap:18px;}.flow li::before{display:none;}.flow li{padding:0 0 0 18px;border-left:2px solid var(--line);}.flow li:first-child{border-left-color:var(--green);}}

/* 料金表 */
.price-table{width:100%;border-collapse:collapse;font-size:15px;}
.price-table th,.price-table td{text-align:left;padding:16px 12px;border-bottom:1px solid var(--line);vertical-align:top;}
.price-table th{font-weight:700;width:34%;font-family:var(--serif);font-size:16px;}
.price-table .amt{font-family:var(--serif);font-size:20px;color:var(--green);white-space:nowrap;}
.price-table .amt small{font-family:var(--sans);font-size:12px;color:var(--ink-soft);display:block;}
.price-table ul{margin:6px 0 0;padding-left:1.2em;color:var(--ink-soft);font-size:14px;}
@media(max-width:640px){.price-table,.price-table tbody,.price-table tr,.price-table th,.price-table td{display:block;width:100%;}.price-table th{border-bottom:none;padding-bottom:4px;}.price-table td{padding-top:4px;}.price-table tr{border-bottom:1px solid var(--line);padding:10px 0;}}

/* 会社情報テーブル */
.def{width:100%;border-collapse:collapse;font-size:15px;}
.def th{width:160px;text-align:left;font-weight:700;padding:14px 8px;border-bottom:1px solid var(--line);vertical-align:top;white-space:nowrap;}
.def td{padding:14px 8px;border-bottom:1px solid var(--line);}
@media(max-width:560px){.def th,.def td{display:block;width:100%;}.def th{border-bottom:none;padding-bottom:2px;}.def td{padding-top:2px;}}

/* ブログカード */
.blog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.bcard{display:block;}
.bcard .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--paper);border-radius:3px;}
.bcard .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.bcard:hover .thumb img{transform:scale(1.03);}
.bcard .cat{display:inline-block;font-size:12px;color:var(--ochre);margin:12px 0 4px;}
.bcard h4{font-family:var(--sans);font-size:15px;font-weight:700;line-height:1.6;}
@media(max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.blog-grid{grid-template-columns:1fr;}}

/* ページ先頭（下層ページ） */
.page-head{background:var(--paper);padding:56px 0 48px;}
.page-head .crumb{font-size:13px;color:var(--ink-soft);margin-bottom:14px;}
.page-head .crumb a{border-bottom:1px solid var(--line);}
.page-head h1{font-size:clamp(26px,3.6vw,38px);}
.page-head .lead{margin:16px 0 0;max-width:720px;font-size:16px;color:var(--ink-soft);}

/* 相談への案内（全ページ末尾） */
.cta-band{background:var(--green);color:#fff;padding:72px 0;}
.cta-band h2{color:#fff;font-size:clamp(22px,3vw,30px);margin-bottom:12px;}
.cta-band p{color:#DCE8E1;max-width:640px;}
.cta-band .cta-row{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;margin-top:24px;}
.cta-band .btn{background:#fff;color:var(--green);border-color:#fff;}
.cta-band .btn:hover{background:var(--ochre-pale);}
.cta-band .tel{font-family:var(--serif);font-size:26px;color:#fff;letter-spacing:.02em;}
.cta-band .tel small{display:block;font-family:var(--sans);font-size:12px;color:#DCE8E1;letter-spacing:0;}

/* 著者ボックス（ブログ・下層） */
.author-box{max-width:760px;margin:34px auto 0;background:var(--paper-soft);border:1px solid var(--line);border-radius:4px;padding:24px 28px;display:flex;gap:20px;align-items:center;}
.author-box img{width:74px;height:74px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.author-box .a-name{font-family:var(--serif);font-weight:700;color:var(--ink);font-size:16px;}
.author-box .a-qual{font-size:12px;color:var(--ochre);margin:3px 0 9px;}
.author-box .a-txt{font-size:13.5px;color:var(--ink-soft);line-height:1.75;}
.author-box .a-txt a{color:var(--green);text-decoration:underline;font-weight:600;white-space:nowrap;}

/* ---------- フッター ---------- */
footer.site-foot{background:var(--paper-soft);border-top:1px solid var(--line);padding:56px 0 100px;color:var(--ink);font-size:14px;}
.sf-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;}
.sf-brand .sh-logo-main{font-size:20px;}
.sf-brand p{margin:12px 0 0;color:var(--ink-soft);font-size:13px;line-height:1.8;}
.sf-col h4{font-family:var(--sans);font-size:13px;color:var(--ochre);margin-bottom:10px;letter-spacing:.06em;}
.sf-col a{display:block;padding:4px 0;color:var(--ink);}
.sf-col a:hover{color:var(--green);}
.sf-col a.sub{padding-left:12px;font-size:13px;color:var(--ink-soft);}
.sf-bottom{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:12px;color:var(--ink-soft);}
.sf-bottom a{text-decoration:underline;}
@media(max-width:820px){.sf-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.sf-grid{grid-template-columns:1fr;}}

/* スマホ下部の固定ボタン */
.mobile-bar{display:none;}
@media(max-width:820px){
  .mobile-bar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:900;background:#fff;border-top:1px solid var(--line);}
  .mobile-bar a{text-align:center;padding:14px 8px;font-weight:700;font-size:14px;}
  .mobile-bar a.tel{color:var(--green);}
  .mobile-bar a.form{background:var(--green);color:#fff;}
}

/* 旧テンプレートのヘッダー用スタイルが残っているページ向けの打ち消し */
body>header:not(.site-head){display:none;}
.hero{background:var(--green-deep);}

/* ---------- 旧ページ（サービス・プロフィール・ガイド・記事）の調整 ---------- */
.bg-en{display:none!important;}
.sub-hero,.pg-hero{padding-top:48px!important;padding-bottom:40px!important;background:var(--paper)!important;color:var(--ink)!important;text-align:left!important;}
.pg-hero h1,.pg-hero p,.pg-hero .lead,.sub-hero h1,.sub-hero p{color:var(--ink)!important;}
.sub-hero .wrap,.pg-hero .wrap{text-align:left;}
.btn-main,.btn-nav,.sub-cta a,.pg-cta a{border-radius:4px!important;}
.sub-body,.card,.svc-card,.fcard,.pcard,.vcard,.bcard{border-radius:4px!important;box-shadow:none!important;}
.sub-body{border:none!important;background:transparent!important;padding:24px 0!important;}
.sub-cta,.pg-cta{border-radius:0!important;}
a.back-link{color:var(--green)!important;}
.pg-hero *:not(a),.sub-hero *:not(a){color:var(--ink)!important;}
.pg-hero .sub-tag,.sub-hero .sub-tag{color:var(--ochre)!important;border:1px solid var(--ochre)!important;background:transparent!important;border-radius:2px!important;}
.sub-hero h1,.sub-hero .sub-title,.sub-hero p{text-align:left!important;}
.ap-badge b{color:var(--green)!important;font-family:var(--serif)!important;}
.pg-body h2,.sub-body h2{font-family:var(--serif)!important;border-left-color:var(--ochre)!important;}
.page-hero{background:var(--paper)!important;color:var(--ink)!important;text-align:left!important;padding:48px 0 40px!important;}
.page-hero h1{font-family:var(--serif)!important;font-weight:700!important;color:var(--ink)!important;}
.page-hero p,.page-hero a{color:var(--ink-soft)!important;}
.turn{border-left-color:var(--ochre)!important;color:var(--green)!important;}
.blog-search .ico{width:20px;height:20px;}
.btn-main{background:var(--green)!important;color:#fff!important;}

/* 比較表とブログのタグ導線 */
.cmp{width:100%;border-collapse:collapse;font-size:15.5px;}
.cmp th{font-family:var(--serif);font-size:16px;text-align:left;padding:10px 14px;border-bottom:2px solid var(--line);}
.cmp th:last-child{border-bottom-color:var(--green);color:var(--green);}
.cmp td{padding:14px;border-bottom:1px solid var(--line);vertical-align:top;}
.cmp td:first-child{color:var(--ink-soft);width:42%;}
.cmp td:last-child{font-weight:700;}
.blog-tags{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px;}
.blog-tags a{border:1px solid var(--line);padding:8px 16px;font-size:14px;border-radius:2px;background:#fff;}
.blog-tags a:hover{border-color:var(--green);color:var(--green);}
@media(max-width:560px){.cmp td:first-child{width:46%;}.cmp td,.cmp th{padding:10px 8px;font-size:14px;}}

.facts-in{gap:10px 34px!important;font-size:14.5px!important;}
@media(max-width:600px){.facts-in{gap:8px 20px!important;font-size:13.5px!important;}.facts-in span b{font-size:22px!important;}}
.voice-list{column-count:2;column-gap:48px;}
.voice-list .voice{break-inside:avoid;}
@media(max-width:820px){.voice-list{column-count:1;}}

/* ========================================================
   スクロール連動アニメーション（2026-09 追加）
   .anim は JS が付けるので、JSが動かない環境では全部そのまま表示される
   ======================================================== */
.anim .rv{opacity:0;will-change:opacity,transform;}
.anim .rv.in{opacity:1;}
/* 下からせり上がる（既定） */
.anim .rv{transform:translateY(22px);transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1);}
.anim .rv.in{transform:none;}
/* 左から入る（箇条書き・ステップ・表の行） */
.anim .rv-left{transform:translateX(-24px);}
/* 拡大しながら出る（図・画像・カード） */
.anim .rv-zoom{transform:scale(.965);}
/* 帯が伸びる（見出しの縦棒） */
.anim .sec-title::before{transform:scaleY(0);transform-origin:top;transition:transform .5s cubic-bezier(.22,.61,.36,1) .1s;}
.anim .sec-head.in .sec-title::before,.anim .sec-title.in::before{transform:scaleY(1);}
@media(prefers-reduced-motion:reduce){
  .anim .rv,.anim .rv.in{opacity:1!important;transform:none!important;transition:none!important;}
  .anim .sec-title::before{transform:none!important;}
}

/* 見出しの下線が伸びる（記事内h2） */
.anim .sub-body h2,.anim .pg-body h2{position:relative;}

/* 図（人手不足の4つの問題）をパワポのように順番に出す */
.anim .cause-fig svg .bx{opacity:0;transform:translateX(-16px);}
.anim .cause-fig.in svg .bx{animation:svgIn .5s cubic-bezier(.22,.61,.36,1) forwards;}
.anim .cause-fig.in svg .bx:nth-of-type(1){animation-delay:.10s;}
.anim .cause-fig.in svg .bx:nth-of-type(2){animation-delay:.26s;}
.anim .cause-fig.in svg .bx:nth-of-type(3){animation-delay:.42s;}
.anim .cause-fig.in svg .bx:nth-of-type(4){animation-delay:.58s;}
.anim .cause-fig svg .arrows{opacity:0;}
.anim .cause-fig.in svg .arrows{animation:svgFade .01s linear .78s forwards;}
@keyframes svgFade{to{opacity:1;}}
.anim .cause-fig svg .arrows path{stroke-dasharray:300;stroke-dashoffset:300;}
.anim .cause-fig.in svg .arrows path{animation:svgDraw .9s ease forwards .8s;}
.anim .cause-fig svg .result{opacity:0;transform:scale(.6);transform-origin:380px 181px;}
.anim .cause-fig.in svg .result{animation:svgPop .55s cubic-bezier(.34,1.4,.64,1) forwards 1.45s;}
@keyframes svgIn{to{opacity:1;transform:none;}}
@keyframes svgDraw{to{stroke-dashoffset:0;}}
@keyframes svgPop{to{opacity:1;transform:scale(1);}}
@media(prefers-reduced-motion:reduce){
  .anim .cause-fig svg .bx,.anim .cause-fig svg .result{opacity:1!important;transform:none!important;animation:none!important;}
  .anim .cause-fig svg .arrows,.anim .cause-fig svg .arrows path{opacity:1!important;stroke-dashoffset:0!important;animation:none!important;}
}

/* ヘッダー：スクロールすると細くなって影がつく */
header.site-head{transition:padding .25s ease,box-shadow .25s ease,background .25s ease;}
header.site-head.shrink{box-shadow:0 2px 14px rgba(30,42,38,.09);}
header.site-head.shrink .sh-in{padding-top:7px;padding-bottom:7px;}
header.site-head.shrink .sh-logo-sub{opacity:0;height:0;overflow:hidden;}
.sh-logo-sub{transition:opacity .2s ease;}

/* 読み進みバー */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--ochre);z-index:1100;transition:width .12s linear;}

/* ページ先頭へ戻るボタン */
.totop{position:fixed;right:20px;bottom:26px;width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--green);display:flex;align-items:center;justify-content:center;z-index:880;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s,transform .3s,background .2s;box-shadow:0 4px 14px rgba(30,42,38,.1);cursor:pointer;}
.totop.show{opacity:1;transform:none;pointer-events:auto;}
.totop:hover{background:var(--green-pale);}
.totop svg{width:18px;height:18px;}
@media(max-width:820px){.totop{bottom:76px;right:14px;}}

/* ホバーの動き */
.bcard,.rcard{transition:transform .3s cubic-bezier(.22,.61,.36,1);}
.bcard:hover,.rcard:hover{transform:translateY(-4px);}
.btn,.sh-btn,.btn-main{transition:transform .2s ease,background .2s ease,box-shadow .2s ease;}
.btn:hover,.sh-btn:hover,.btn-main:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(31,92,70,.22);}
.more{transition:padding .2s ease;}
.more:hover{padding-right:6px;}
.rule-list > li{transition:background .25s ease;}
.rule-list > li:hover{background:rgba(184,137,43,.05);}
.blog-tags a{transition:transform .2s ease,border-color .2s ease,color .2s ease;}
.blog-tags a:hover{transform:translateY(-2px);}

/* よくある質問：開くときにすべり落ちる */
details .ans,details .faq-a{animation:ansOpen .3s cubic-bezier(.22,.61,.36,1);}
@keyframes ansOpen{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

/* チェックの結果バーはCSS側で既にtransition済み */
@media(prefers-reduced-motion:reduce){
  .bcard:hover,.rcard:hover,.btn:hover,.sh-btn:hover{transform:none;}
  details .ans{animation:none;}
  .progress{transition:none;}
}

/* お問い合わせフォーム（トップに統合） */
.cform{max-width:640px;}
.cform label{display:block;font-weight:700;font-size:15px;margin:22px 0 8px;}
.cform label .req{color:var(--shu);font-size:12px;margin-left:8px;font-weight:400;}
.cform input[type=text],.cform input[type=email],.cform input[type=tel],.cform textarea{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--line);border-radius:2px;background:#fff;}
.cform input:focus,.cform textarea:focus{border-color:var(--green);}
.cform textarea{min-height:150px;}
.cform .opts label{font-weight:400;display:flex;gap:10px;align-items:flex-start;margin:0;padding:7px 0;font-size:15px;}
.cform .opts input{width:20px;height:20px;margin-top:4px;accent-color:var(--green);}
.cform .btn{width:100%;margin-top:24px;}
.cform .ok{display:none;background:var(--green-pale);border:1px solid var(--green);padding:18px;margin-top:20px;font-weight:700;}
.side-box{background:#fff;border:1px solid var(--line);padding:28px 30px;}
.side-box .sb-tel{margin:0;font-size:12px;color:var(--ink-soft);}
.side-box .sb-tel a{display:block;font-family:var(--serif);font-size:29px;color:var(--green);letter-spacing:.02em;}
.side-box .sb-mail{margin:6px 0 0;font-size:15px;}
.side-box .sb-mail a{text-decoration:underline;}
.side-box .sb-note{margin:10px 0 0;font-size:13px;color:var(--shu);}
.side-box h3{font-size:16px;margin:24px 0 10px;padding-top:20px;border-top:1px solid var(--line);}
.side-box ul{margin:0;padding-left:1.2em;font-size:15px;}
.side-box li{margin-bottom:6px;}

/* サービスのドロップダウン */
.sh-drop{position:relative;}
.sh-drop-t{display:inline-block;}
.sh-drop-m{position:absolute;left:-16px;top:100%;background:#fff;border:1px solid var(--line);min-width:230px;padding:8px 0;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s;box-shadow:0 8px 24px rgba(30,42,38,.1);}
.sh-drop:hover .sh-drop-m,.sh-drop:focus-within .sh-drop-m{opacity:1;visibility:visible;transform:none;}
.sh-drop-m a{display:block;padding:9px 18px;font-size:14px;border:none;}
.sh-drop-m a:hover{background:var(--paper-soft);color:var(--green);}

/* アイコンは線だけ。手描きのゆらぎを少し足す */
.ico svg,.miniflow .ic svg{color:var(--green);}
.miniflow .ic{width:30px;height:30px;color:var(--green);}
.miniflow .ic svg{filter:url(#rough);}
.miniflow .sep{font-family:var(--serif);}
.svc-row .tag{border-color:var(--line);color:var(--ink-soft);}
.svc-row h3 .tag:first-of-type{color:var(--shu);border-color:var(--shu);}

/* お問い合わせの2段組（スマホでは1列） */
.contact-cols{display:grid;grid-template-columns:1.25fr .95fr;gap:48px;align-items:start;}
@media(max-width:900px){.contact-cols{grid-template-columns:1fr;gap:32px;}.side-box .sb-tel a{font-size:25px;}}

/* ========================================================
   「線が描かれていく」演出（2026-09 追加）
   ======================================================== */
/* 見出しの手描き下線が、左から描かれる */
.anim .sec-title .ul path{stroke-dashoffset:400;}
.anim .sec-head.in .sec-title .ul path,.anim .sec-title.in .ul path{animation:drawLine 1s cubic-bezier(.22,.61,.36,1) .18s forwards;}
@keyframes drawLine{to{stroke-dashoffset:0;}}

/* アイコンの線が描かれる */
.anim .ico svg *,.anim .miniflow .ic svg *{stroke-dasharray:130;stroke-dashoffset:130;}
.anim .rv.in .ico svg *,.anim .in .miniflow .ic svg *,.anim .miniflow .st.in .ic svg *{animation:drawIcon .85s ease forwards;}
@keyframes drawIcon{to{stroke-dashoffset:0;}}

/* 実績の数字の後ろを、蛍光ペンのように塗る */
.anim .badges-in span{background-image:linear-gradient(transparent 62%,rgba(184,137,43,.28) 62%);background-repeat:no-repeat;background-size:0 100%;transition:background-size .9s cubic-bezier(.22,.61,.36,1);}
.anim .badges-in.in span{background-size:100% 100%;}
.anim .badges-in.in span:nth-child(2){transition-delay:.2s;}
.anim .badges-in.in span:nth-child(3){transition-delay:.4s;}

/* お客様の声の見出しも同じ塗り方 */
.anim .voice-result{background-image:linear-gradient(transparent 64%,rgba(31,92,70,.16) 64%);background-repeat:no-repeat;background-size:0 100%;transition:background-size .9s cubic-bezier(.22,.61,.36,1) .25s;display:inline-block;}
.anim .voice.in .voice-result{background-size:100% 100%;}

/* ご相談の流れ：スクロールに合わせて線が伸び、通過した番号に色がつく */
.flow{position:relative;}
.flow li::before{transition:background .4s ease;}
.flow li.done::before{background:var(--green);}
.flow li .stp{transition:color .4s ease,transform .4s ease;}
.flow li.done .stp{color:var(--green);transform:translateY(-2px);}
@media(max-width:820px){.flow li.done{border-left-color:var(--green);}}

/* ヒーロー：見出しに手描きの丸が描かれる */
.hero h1{position:relative;display:inline-block;}
.hero .mark{position:relative;display:inline-block;}
.hero .circ{position:absolute;left:-3%;top:-14%;width:106%;height:128%;pointer-events:none;overflow:visible;}
.hero .circ path{fill:none;stroke:var(--shu);stroke-width:3;stroke-linecap:round;opacity:.72;stroke-dasharray:760;stroke-dashoffset:760;}
.anim .hero .circ path{animation:drawCirc 1.5s cubic-bezier(.3,.7,.4,1) 1s forwards;}
@keyframes drawCirc{to{stroke-dashoffset:0;}}

/* ヒーローの写真がゆっくり動く（視差） */
.hero-pic img{will-change:transform;}

/* 写真・図・カードを見たときの手応え */
.bcard .thumb img{transition:transform .5s cubic-bezier(.22,.61,.36,1);}
.bcard:hover .thumb img{transform:scale(1.06);}
.price-table tbody tr{transition:background .25s ease;}
.price-table tbody tr:hover{background:rgba(184,137,43,.06);}
.voice{transition:transform .35s cubic-bezier(.22,.61,.36,1);}
.voice:hover{transform:translateX(3px);}
.cform input:focus,.cform textarea:focus{box-shadow:0 0 0 3px rgba(31,92,70,.12);}
.chk:hover{background:rgba(184,137,43,.05);}
.chk input{transition:transform .18s cubic-bezier(.34,1.5,.64,1),background .18s ease;}
.chk input:checked{transform:scale(1.1);}
.chk-result .verdict{transition:opacity .3s ease,transform .3s ease;}
.chk-result.pulse .verdict{animation:pulse .5s cubic-bezier(.34,1.4,.64,1);}
@keyframes pulse{0%{opacity:.3;transform:translateY(5px);}100%{opacity:1;transform:none;}}

/* 縦書きラベルはセクションの間ついてくる */
@media(min-width:1001px){.slabel{position:sticky;top:120px;float:left;margin-left:-84px;margin-top:6px;z-index:2;}
.sec.has-label{overflow:visible;}}

@media(prefers-reduced-motion:reduce){
  .anim .sec-title .ul path,.anim .ico svg *,.anim .miniflow .ic svg *{stroke-dashoffset:0!important;animation:none!important;}
  .anim .badges-in span,.anim .voice-result{background-size:100% 100%!important;transition:none!important;}
  .hero .circ path{stroke-dashoffset:0!important;animation:none!important;}
  .voice:hover,.bcard:hover .thumb img{transform:none;}
}

/* ========================================================
   細部の遊び（2026-09 追加）
   派手にせず、触ったところ・見たところが少しずつ楽しい
   ======================================================== */
/* 文字を選択したときの色 */
::selection{background:rgba(184,137,43,.28);}

/* 紙をちぎったような境目 */
.sec-paper{position:relative;}
.sec-paper::before{content:"";position:absolute;top:-9px;left:0;right:0;height:10px;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='10'%3E%3Cpath d='M0 10 C 18 3, 34 9, 52 5 C 70 1, 88 8, 106 4 C 120 1, 132 7, 140 5 L140 10 Z' fill='%23F7F4EE'/%3E%3C/svg%3E");
  background-repeat:repeat-x;}

/* サービスのアイコンは、触るともう一度描き直される */
@media(hover:hover){
  .anim .rule-list > li:hover .ico svg *{animation:drawIcon .7s ease forwards;}
  .anim .miniflow .st:hover .ic svg *{animation:drawIcon .6s ease forwards;}
}

/* チェックは、手で書いたようにレ点が引かれる */
.chk input{position:relative;}
.chk input:checked::after{animation:penCheck .28s cubic-bezier(.3,.8,.4,1) forwards;transform-origin:left bottom;}
@keyframes penCheck{from{height:0;opacity:0;}to{height:12px;opacity:1;}}

/* いちばん濃い原因に、朱色の丸がつく */
.chk-result .bar{position:relative;}
.bar .topcirc{position:absolute;left:-8px;top:-7px;width:102px;height:30px;pointer-events:none;overflow:visible;}
.bar .topcirc path{fill:none;stroke:var(--shu);stroke-width:2.1;stroke-linecap:round;opacity:.8;stroke-dasharray:330;stroke-dashoffset:330;}
.bar.top .topcirc path{animation:drawCirc .9s cubic-bezier(.3,.7,.4,1) forwards;}
.bar:not(.top) .topcirc path{stroke-dashoffset:330;animation:none;}

/* 流れ：通過したステップに小さなレ点 */
.flow li .stp{position:relative;padding-right:20px;}
.flow li.done .stp::after{content:"";position:absolute;right:2px;top:.25em;width:9px;height:5px;border-left:2px solid var(--shu);border-bottom:2px solid var(--shu);transform:rotate(-45deg) scale(0);transform-origin:center;animation:popCheck .35s cubic-bezier(.34,1.5,.64,1) .15s forwards;}
@keyframes popCheck{to{transform:rotate(-45deg) scale(1);}}

/* 図：箱にさわると、その原因の矢印が濃くなる */
.cause-fig svg .bx rect{transition:fill .25s ease,stroke .25s ease;}
.cause-fig svg .bx:hover rect{fill:#FDF8EE;stroke:var(--ochre);}
.cause-fig svg .arrows path{transition:stroke-width .25s ease,stroke .25s ease;}
.cause-fig svg .arrows path.hot{stroke:var(--shu);stroke-width:2.6;}
.cause-fig svg .bx{cursor:default;}

/* ブログカードは、机に置くように少し傾いてから正面を向く */
.anim .blog-grid > .bcard.rv{transform:scale(.965) rotate(-1.1deg);transform-origin:left bottom;}
.anim .blog-grid > .bcard.rv.in{transform:none;}
.anim .blog-grid > .bcard.rv{transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);}

/* お客様の声の引用符が、ぽんと出る */
.voice-quote{position:relative;}
.voice-quote::before{content:"“";position:absolute;left:6px;top:-2px;font-family:var(--serif);font-size:38px;color:var(--ochre);opacity:0;transform:translateY(6px) rotate(-8deg);transition:opacity .4s ease .35s,transform .5s cubic-bezier(.34,1.4,.64,1) .35s;}
.anim .voice.in .voice-quote::before{opacity:.35;transform:none;}

/* 先頭へ戻るボタン：さわると矢印が上に跳ねる */
.totop svg{transition:transform .25s cubic-bezier(.34,1.5,.64,1);}
.totop:hover svg{transform:translateY(-3px);}

/* 読み進みバーの先端を少しだけ丸く */
.progress{border-radius:0 3px 3px 0;}

/* 電話番号やボタンを押した瞬間の手応え */
.btn:active,.sh-btn:active,.mobile-bar a:active{transform:translateY(1px);}

@media(prefers-reduced-motion:reduce){
  .bar .topcirc path{stroke-dashoffset:0!important;animation:none!important;}
  .flow li.done .stp::after{transform:rotate(-45deg) scale(1)!important;animation:none!important;}
  .anim .blog-grid > .bcard.rv{transform:none!important;}
  .voice-quote::before{opacity:.35!important;transform:none!important;}
  .chk input:checked::after{animation:none!important;height:12px;opacity:1;}
}

/* ========================================================
   筆書き・紙の濃淡・手書きの書き込み・CTAの反応（2026-09 追加）
   ======================================================== */
/* 1. 屋号が筆で書かれるように出る */
.brush{display:inline-block;position:relative;clip-path:inset(0 100% 0 0);}
.anim .brush{animation:writeIn .82s cubic-bezier(.32,.72,.35,1) .1s forwards;}
.anim .brush.brush-s{animation-duration:.62s;animation-delay:.05s;}
.brush::after{content:"";position:absolute;top:-6%;bottom:-6%;width:10px;border-radius:50%;
  background:linear-gradient(90deg,rgba(168,67,44,0),rgba(168,67,44,.5),rgba(168,67,44,0));opacity:0;}
.anim .brush::after{animation:brushTip .82s cubic-bezier(.32,.72,.35,1) .1s forwards;}
.anim .brush.brush-s::after{animation-duration:.62s;animation-delay:.05s;}
@keyframes writeIn{from{clip-path:inset(0 100% 0 0);}to{clip-path:inset(0 -2% 0 0);}}
@keyframes brushTip{0%{left:0;opacity:.9;}92%{opacity:.7;}100%{left:100%;opacity:0;}}

/* 2. セクションごとに生成りの濃淡を変える */
.sec.t1{background:#FFFFFF;}
.sec.t2{background:#FBF8F2;}
.sec.t3{background:#FFFDFA;}
.sec.t4{background:#F7F3EB;}
.sec.t5{background:#FEFCF8;}
.sec.t6{background:#F4EFE5;}
.sec.t7{background:#FFFEFB;}
.sec.t8{background:#F9F5EE;}
.sec-paper::before{background-color:inherit;background-image:none;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='10'%3E%3Cpath d='M0 10 C 18 3, 34 9, 52 5 C 70 1, 88 8, 106 4 C 120 1, 132 7, 140 5 L140 10 Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='10'%3E%3Cpath d='M0 10 C 18 3, 34 9, 52 5 C 70 1, 88 8, 106 4 C 120 1, 132 7, 140 5 L140 10 Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;}

/* 3. 数字のよこに、あとから手書きの書き込みが足される */
.memo{display:inline-flex;align-items:center;gap:4px;font-family:"Yomogi","Klee One",var(--sans);font-size:13.5px;color:var(--shu);
  opacity:0;transform:translateY(4px) rotate(-1.4deg);transition:opacity .5s ease,transform .6s cubic-bezier(.34,1.35,.64,1);white-space:nowrap;}
.memo svg{width:26px;height:14px;flex:none;}
.memo svg path{fill:none;stroke:var(--shu);stroke-width:1.7;stroke-linecap:round;stroke-dasharray:60;stroke-dashoffset:60;}
.anim .in .memo,.anim .memo.in{opacity:.92;transform:rotate(-1.4deg);transition-delay:1.15s;}
.anim .in .memo svg path,.anim .memo.in svg path{animation:drawMemo .6s ease 1.1s forwards;}
@keyframes drawMemo{to{stroke-dashoffset:0;}}
.pnums .memo,.badges-in .memo{margin-left:8px;}
@media(max-width:820px){.memo{font-size:12.5px;}.badges-in .memo{margin-left:4px;}}

/* 4. ボタンが画面の下のほうに来たときだけ、少しだけ大きくなる */
.btn,.sh-btn{transform-origin:center;}
.btn.near{transform:scale(1.045);box-shadow:0 10px 22px rgba(31,92,70,.2);}
.btn.near:hover{transform:scale(1.045) translateY(-2px);}
.sh-btn.near{transform:none;}

@media(prefers-reduced-motion:reduce){
  .brush{clip-path:none!important;animation:none!important;}
  .brush::after{display:none;}
  .memo{opacity:.92!important;transform:rotate(-1.4deg)!important;}
  .memo svg path{stroke-dashoffset:0!important;animation:none!important;}
  .btn.near{transform:none!important;}
}

/* ========================================================
   しおり・引き継ぎ・朱印・今日のおすすめ（2026-09 追加）
   ======================================================== */
/* 右側のしおり */
.dotnav{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:850;display:flex;flex-direction:column;gap:0;opacity:0;transition:opacity .4s ease;}
.dotnav.show{opacity:1;}
.dotnav a{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:5px 0;position:relative;}
.dotnav i{display:block;width:7px;height:7px;border-radius:50%;background:var(--line);transition:transform .3s cubic-bezier(.34,1.4,.64,1),background .3s ease;}
.dotnav a::before{content:"";position:absolute;right:3px;top:-6px;width:1px;height:12px;background:var(--line);}
.dotnav a:first-child::before{display:none;}
.dotnav em{font-style:normal;font-size:12px;font-family:var(--serif);color:var(--ink);background:#fff;border:1px solid var(--line);padding:3px 9px;border-radius:2px;opacity:0;transform:translateX(6px);transition:opacity .25s ease,transform .25s ease;white-space:nowrap;pointer-events:none;}
.dotnav a:hover em,.dotnav a:focus-visible em{opacity:1;transform:none;}
.dotnav a.active i{background:var(--shu);transform:scale(1.7);}
.dotnav a.passed i{background:var(--ochre);}
@media(max-width:1180px){.dotnav{display:none;}}

/* チェック結果を相談フォームへ引き継ぐ */
.handoff{display:block;width:100%;margin-top:18px;font:inherit;font-size:14.5px;font-weight:700;color:var(--green);background:#fff;border:1.5px solid var(--green);border-radius:2px;padding:12px 14px;cursor:pointer;transition:background .2s ease,transform .2s ease;}
.handoff:hover{background:var(--green-pale);transform:translateY(-1px);}
.handoff:active{transform:translateY(1px);}
.cform.filled{animation:formFlash 1.1s ease;}
@keyframes formFlash{0%{box-shadow:0 0 0 0 rgba(184,137,43,.55);}100%{box-shadow:0 0 0 22px rgba(184,137,43,0);}}
.cform .fromcheck{background:rgba(184,137,43,.12);}

/* 朱印がぽんと押される */
.seal{position:absolute;right:max(24px,calc(50% - 520px));margin-top:-6px;width:86px;height:86px;border:2.5px solid var(--shu);border-radius:6px;display:flex;align-items:center;justify-content:center;transform:rotate(-7deg) scale(1.8);opacity:0;color:var(--shu);}
.seal span{writing-mode:vertical-rl;font-family:var(--serif);font-weight:700;font-size:20px;letter-spacing:.22em;line-height:1.15;}
.anim .sec.in .seal,.anim .sec-head.in .seal{animation:stampIn .5s cubic-bezier(.3,1.5,.5,1) .25s forwards;}
@keyframes stampIn{0%{opacity:0;transform:rotate(-7deg) scale(1.8);filter:blur(2px);}60%{opacity:.95;transform:rotate(-7deg) scale(.94);filter:blur(0);}100%{opacity:.88;transform:rotate(-7deg) scale(1);}}
@media(max-width:900px){.seal{position:static;margin:0 0 14px;width:70px;height:70px;}.seal span{font-size:16px;}}

/* 今日のおすすめ */
.pick{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 24px;padding:14px 18px;border:1px dashed var(--ochre);border-radius:3px;background:rgba(246,239,220,.45);}
.pick-l{font-family:"Yomogi",var(--serif);font-size:13.5px;color:var(--shu);}
.pick-a{font-weight:700;font-size:15.5px;border-bottom:1px solid var(--line);}
.pick-a:hover{border-bottom-color:var(--green);color:var(--green);}
.pick-b{margin-left:auto;font:inherit;font-size:12.5px;color:var(--ink-soft);background:none;border:1px solid var(--line);border-radius:2px;padding:5px 10px;cursor:pointer;transition:border-color .2s,color .2s;}
.pick-b:hover{border-color:var(--ochre);color:var(--ochre);}
.pick-t{display:inline-block;transition:opacity .25s ease,transform .25s ease;}
.pick.swap .pick-t{opacity:0;transform:translateY(-4px);}

@media(prefers-reduced-motion:reduce){
  .seal{opacity:.88!important;transform:rotate(-7deg)!important;animation:none!important;}
  .cform.filled{animation:none;}
  .dotnav a.active i{transform:scale(1.7);}
}

/* ========================================================
   印刷できる結果シート・従業員数スライダー・関連記事のめくり
   ======================================================== */
/* 結果シート（画面では隠れていて、印刷のときだけ出る） */
#printSheet{display:none;}
.handoff-2{margin-top:10px;border-color:var(--ochre);color:var(--ochre);}
.handoff-2:hover{background:var(--ochre-pale);}
@media print{
  body.printing > *{display:none!important;}
  body.printing #printSheet{display:block!important;}
  #printSheet{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;color:#000;padding:0;}
  #printSheet .ps-head{border-bottom:2px solid #333;padding-bottom:6px;margin-bottom:18px;}
  #printSheet .ps-brand{font-size:15pt;font-weight:700;margin:0;}
  #printSheet .ps-sub{font-size:9pt;margin:3px 0 0;}
  #printSheet h1{font-size:19pt;margin:0 0 4px;}
  #printSheet .ps-date{font-size:9.5pt;margin:0 0 18px;}
  #printSheet h2{font-size:12pt;margin:16px 0 6px;border-left:4px solid #666;padding-left:8px;}
  #printSheet ul{margin:0;padding-left:1.3em;font-size:11pt;line-height:1.9;}
  #printSheet p{font-size:11pt;margin:4px 0;}
  #printSheet .ps-top{font-size:13pt;font-weight:700;margin:10px 0;}
  #printSheet .ps-lines span{display:block;border-bottom:1px solid #bbb;height:30px;}
  #printSheet .ps-foot{margin-top:26px;border-top:1px solid #999;padding-top:8px;font-size:9.5pt;}
  header.site-head,.mobile-bar,.dotnav,.totop,.progress,.sh-drawer,.handoff,.seal,.pick-b{display:none!important;}
  .anim .rv{opacity:1!important;transform:none!important;}
  .sec{padding:16px 0!important;background:#fff!important;}
  .sec-paper::before{display:none;}
  a{text-decoration:none;color:#000;}
}

/* 記事を最後まで読むと、関連記事が紙をめくるように出る */
.anim .related .rcard{opacity:0;transform:perspective(900px) rotateY(-42deg) translateX(-14px);transform-origin:left center;
  transition:opacity .5s ease,transform .75s cubic-bezier(.22,.7,.3,1);}
.anim .related.turned .rcard{opacity:1;transform:none;}
.anim .related.turned .rcard:nth-child(2){transition-delay:.16s;}
.anim .related.turned .rcard:nth-child(3){transition-delay:.32s;}
.anim .related.turned .rcard:nth-child(4){transition-delay:.48s;}
@media(prefers-reduced-motion:reduce){
  .anim .related .rcard{opacity:1!important;transform:none!important;}
}

/* 料金欄の3ステップも、スマホでは1列に */
@media(max-width:820px){.flow[style]{grid-template-columns:1fr!important;}}

/* ========================================================
   さらに遊ぶ（2026-09 追加）
   ======================================================== */
/* 数字がスロットのように回ってから止まる */
.badges-in span b,.pnums span b{display:inline-block;}
.badges-in span b.spin,.pnums span b.spin{filter:blur(.4px);}
.badges-in span b.land,.pnums span b.land{animation:landPop .42s cubic-bezier(.34,1.6,.64,1);}
@keyframes landPop{0%{transform:scale(1.22) translateY(-2px);}100%{transform:none;}}

/* ブログのカテゴリが付箋になる */
.bcard{position:relative;}
.bcard .cat{position:relative;display:inline-block;background:var(--ochre-pale);border:1px solid rgba(184,137,43,.45);padding:2px 9px;border-radius:2px;
  transform:rotate(-1.2deg);transform-origin:left center;transition:transform .28s cubic-bezier(.34,1.4,.64,1),box-shadow .28s ease;}
.bcard:hover .cat{transform:rotate(-4deg) translate(-2px,-3px);box-shadow:2px 3px 6px rgba(30,42,38,.12);}

/* 見出しにさわると、下線が引き直される */
@media(hover:hover){
  .anim .sec-title:hover .ul path{animation:drawLine .8s cubic-bezier(.22,.61,.36,1) forwards;}
}

/* 全部チェックしたときの朱印 */
.chk-result{position:relative;}
.allstamp{position:absolute;right:-16px;top:-20px;width:74px;height:74px;border:2.5px solid var(--shu);border-radius:6px;color:var(--shu);
  display:none;align-items:center;justify-content:center;transform:rotate(9deg) scale(1.7);opacity:0;pointer-events:none;}
.allstamp span{writing-mode:vertical-rl;font-family:var(--serif);font-weight:700;font-size:17px;letter-spacing:.2em;}
.chk-result.all .allstamp{display:flex;animation:stampIn .5s cubic-bezier(.3,1.5,.5,1) forwards;}

/* キーボードで移動できることの小さな案内 */
.keyhint{position:fixed;right:22px;bottom:86px;z-index:840;font-size:11.5px;color:var(--ink-soft);background:#fff;border:1px solid var(--line);
  padding:6px 10px;border-radius:2px;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease;pointer-events:none;line-height:1.7;}
.keyhint.show{opacity:.92;transform:none;}
.keyhint b{font-family:var(--serif);color:var(--green);}
@media(max-width:1180px){.keyhint{display:none;}}

/* セクションのラベルの縦線が、そのセクションを読む間だけ伸びる */
.slabel::after{transition:height .6s cubic-bezier(.22,.61,.36,1);}
.sec.reading .slabel::after{height:96px;}

@media(prefers-reduced-motion:reduce){
  .bcard:hover .cat{transform:rotate(-1.2deg);}
  .chk-result.all .allstamp{animation:none;opacity:.88;transform:rotate(9deg);}
  .badges-in span b.land,.pnums span b.land{animation:none;}
}


/* ========================================================
   夜のファーストビュー：光の粒で見せる「業務の仕分け」（2026-09 追加）
   ======================================================== */
.hero.hero-night{position:relative;isolation:isolate;background:radial-gradient(ellipse 70% 80% at 72% 42%,#17392F 0%,#0D1B17 52%,#070E0C 100%);
  padding:0;min-height:min(calc(100vh - 70px),860px);display:flex;align-items:center;overflow:hidden;color:#F4F0E6;}
.hero-night .hero-gl{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;}
.hero-night::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(7,14,12,.78) 0%,rgba(7,14,12,.45) 38%,rgba(7,14,12,0) 62%);}
.hero-night .wrap{position:relative;z-index:2;width:100%;}
.hero-night .hero-in{display:block;padding:56px 24px 84px;}
.hero-night .hero-txt{max-width:600px;padding:0;}
.hero-night h1,.hero-night h2{color:#F7F3EA;}
.hero-night h2{color:#EDE6D6;}
.hero-night .hero-lead{color:#C5D0CA;}
.hero-night .hero-note{color:#93A69D;}
.hero-night .hero-act .tel{color:#F7F3EA;}
.hero-night .hero-act .tel small{color:#9FB2A9;}
.hero-night .btn{background:#E3B04B;border-color:#E3B04B;color:#14201B;box-shadow:0 0 0 0 rgba(227,176,75,.5);animation:btnGlow 2.8s ease-in-out 3.6s infinite;}
.hero-night .btn:hover{background:#F0C25E;border-color:#F0C25E;}
@keyframes btnGlow{0%,100%{box-shadow:0 0 0 0 rgba(227,176,75,.0),0 6px 18px rgba(227,176,75,.18);}50%{box-shadow:0 0 0 6px rgba(227,176,75,.12),0 8px 26px rgba(227,176,75,.35);}}
.hero-night .hero-who{display:flex;align-items:center;gap:12px;color:#B9C6BF;margin-bottom:26px;}
.hero-night .hero-who b{color:#F4F0E6;}
.hero-face{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:top;border:2px solid rgba(244,240,230,.85);box-shadow:0 0 0 4px rgba(227,176,75,.18);flex:none;}
.hero-night .hl-ai{background-image:linear-gradient(transparent 58%,rgba(63,242,179,.32) 58%);}
.hero-night .hl-hito{background-image:linear-gradient(transparent 58%,rgba(255,107,74,.34) 58%);}
.hero-night .circ path{stroke:#FF6B4A;opacity:.85;}
.nogl .hero-night{background:radial-gradient(ellipse 70% 80% at 72% 42%,#1F5C46 0%,#0D1B17 60%,#070E0C 100%);}

/* 計器のような枠と表示 */
.hero-hud{position:absolute;inset:0;z-index:1;pointer-events:none;font-family:var(--sans);}
.hud-c{position:absolute;width:22px;height:22px;border:1px solid rgba(244,240,230,.35);}
.hud-c.tl{left:18px;top:18px;border-right:none;border-bottom:none;}
.hud-c.tr{right:18px;top:18px;border-left:none;border-bottom:none;}
.hud-c.bl{left:18px;bottom:18px;border-right:none;border-top:none;}
.hud-c.br{right:18px;bottom:18px;border-left:none;border-top:none;}
.hud-status{position:absolute;right:48px;bottom:26px;margin:0;display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:flex-end;font-size:12px;letter-spacing:.08em;color:rgba(244,240,230,.6);}
.hud-status .hud-t{color:rgba(244,240,230,.85);}
.hud-status i{font-style:normal;}
.hud-status b{font-family:var(--serif);font-size:14px;font-weight:700;}
.hud-status .s-nk b{color:#FFC857;}.hud-status .s-ai b{color:#3FF2B3;}.hud-status .s-hito b{color:#FF7A5C;}
.hud-words span{position:absolute;font-size:13px;letter-spacing:.12em;color:rgba(230,245,255,.85);text-shadow:0 0 8px rgba(111,216,255,.7);white-space:nowrap;
  animation:wordFlick 1.6s steps(1) infinite;opacity:0;transition:opacity .6s ease;}
.hud-words span.on{opacity:1;}
@keyframes wordFlick{0%{color:rgba(230,245,255,.9)}8%{color:rgba(230,245,255,.25)}12%{color:rgba(230,245,255,.95)}55%{color:rgba(230,245,255,.8)}60%{color:rgba(230,245,255,.35)}64%{color:rgba(230,245,255,.9)}}
.hud-lb{position:absolute;left:0;top:0;font-size:13px;letter-spacing:.1em;white-space:nowrap;padding:5px 11px;border-radius:2px;opacity:0;
  transform:translate(-50%,-50%) scale(.9);transition:opacity .6s ease,transform .6s cubic-bezier(.34,1.4,.64,1);background:rgba(7,14,12,.55);backdrop-filter:blur(2px);}
.hud-lb.show{opacity:1;transform:translate(-50%,-50%) scale(1);}
.hud-lb.lb-ai{color:#3FF2B3;border:1px solid rgba(63,242,179,.5);}
.hud-lb.lb-hito{color:#FF8A6E;border:1px solid rgba(255,107,74,.5);}
.hud-lb.lb-nk{color:#FFC857;border:1px solid rgba(255,200,87,.5);}
.hud-replay{position:absolute;left:48px;bottom:22px;pointer-events:none;opacity:0;font:inherit;font-size:12px;letter-spacing:.08em;color:rgba(244,240,230,.75);
  background:transparent;border:1px solid rgba(244,240,230,.35);border-radius:2px;padding:5px 12px;cursor:pointer;transition:opacity .5s ease,border-color .2s,color .2s;}
.hud-replay.show{opacity:1;pointer-events:auto;}
.hud-replay:hover{color:#fff;border-color:#fff;}

/* 夜から紙の世界へ：ちぎった紙の縁で切り替える */
.hero-night + .badges{position:relative;}
.hero-night + .badges::before{content:"";position:absolute;top:-10px;left:0;right:0;height:11px;background:#fff;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='11'%3E%3Cpath d='M0 11 C 18 3, 34 10, 52 5 C 70 1, 88 9, 106 4 C 120 1, 132 8, 140 5 L140 11 Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='11'%3E%3Cpath d='M0 11 C 18 3, 34 10, 52 5 C 70 1, 88 9, 106 4 C 120 1, 132 8, 140 5 L140 11 Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;}

@media(max-width:900px){
  .hero.hero-night{min-height:auto;align-items:flex-start;}
  .hero-night .hero-in{padding:30px 20px 360px;}
  .hero-night::before{background:linear-gradient(180deg,rgba(7,14,12,.82) 0%,rgba(7,14,12,.55) 55%,rgba(7,14,12,0) 78%);}
  .hud-status{left:20px;right:20px;bottom:16px;justify-content:flex-start;gap:4px 12px;font-size:11px;}
  .hud-c{display:none;}
  .hud-replay{left:auto;right:20px;top:auto;bottom:62px;}
  .hud-lb{font-size:11.5px;padding:4px 8px;}
}
@media(prefers-reduced-motion:reduce){.hero-night .btn{animation:none;}.hud-words span{animation:none;}}

/* ========================================================
   代表プロフィールの大きな写真（2026-09 追加）
   ======================================================== */
#profile .story.story-big{grid-template-columns:minmax(320px,410px) 1fr;gap:48px;align-items:start;}
.story-photo{margin:0;position:relative;}
.story-photo::before{content:"";position:absolute;left:14px;top:14px;right:-14px;bottom:-14px;border:1px solid var(--ochre);border-radius:220px 220px 0 0;opacity:.7;z-index:0;}
.story-photo img{position:relative;z-index:1;width:100%;aspect-ratio:720/756;object-fit:cover;object-position:top;border-radius:220px 220px 0 0;display:block;background:var(--paper);}
.anim .story-photo img{clip-path:inset(100% 0 0 0);transition:clip-path 1.1s cubic-bezier(.65,0,.25,1) .15s;}
.anim .story-photo.in img{clip-path:inset(0 0 0 0);}
.anim .story-photo::before{transform:translate(-14px,-14px);transition:transform .9s cubic-bezier(.22,.61,.36,1) .9s;}
.anim .story-photo.in::before{transform:none;}
#profile .story-big .tate.tate-float{float:right;height:390px;margin:0 0 18px 28px;font-size:18px;line-height:2;letter-spacing:.1em;}
@media(max-width:1000px){#profile .story.story-big{grid-template-columns:minmax(240px,320px) 1fr;gap:32px;}}
@media(max-width:820px){#profile .story.story-big{grid-template-columns:1fr;gap:28px;}
  .story-photo{max-width:320px;margin:0 auto 6px;}
  #profile .story-big .tate.tate-float{float:none;height:auto;margin:0 0 20px;font-size:inherit;}}
@media(prefers-reduced-motion:reduce){.anim .story-photo img{clip-path:none!important;transition:none;}.anim .story-photo::before{transform:none!important;}}

/* ========================================================
   実績の数字に、目立つ手描きの下線（2026-09 追加）
   ======================================================== */
.badges-in{gap:14px 52px!important;}
.badges-in span{position:relative;padding-bottom:12px;background-image:none!important;}
.badges-in span b{font-size:32px!important;}
.badges-in .uline{position:absolute;left:-4px;bottom:-1px;width:calc(100% + 8px);height:13px;overflow:visible;pointer-events:none;}
.badges-in .uline path{fill:none;stroke:var(--shu);stroke-width:3.4;stroke-linecap:round;stroke-dasharray:260;stroke-dashoffset:0;}
.badges-in .uline path.u2{stroke-width:1.6;opacity:.55;transform:translateY(3.5px);}
.anim .badges-in .uline path{stroke-dashoffset:260;}
.anim .badges-in.in .uline path{animation:drawUline .9s cubic-bezier(.3,.7,.3,1) forwards;}
.anim .badges-in.in .uline path.u2{animation-delay:.15s;}
.anim .badges-in.in span:nth-child(2) .uline path{animation-delay:.25s;}
.anim .badges-in.in span:nth-child(2) .uline path.u2{animation-delay:.4s;}
.anim .badges-in.in span:nth-child(3) .uline path{animation-delay:.5s;}
.anim .badges-in.in span:nth-child(3) .uline path.u2{animation-delay:.65s;}
@keyframes drawUline{to{stroke-dashoffset:0;}}
@media(max-width:600px){.badges-in span b{font-size:26px!important;}.badges-in{gap:12px 26px!important;}}
@media(prefers-reduced-motion:reduce){.anim .badges-in .uline path{stroke-dashoffset:0!important;animation:none!important;}}

/* 実績の下線をもっと目立たせる（2026-09 追加） */
.badges-in{gap:16px 48px!important;padding:32px 0 28px!important;}
.badges-in span{position:relative;isolation:isolate;padding-bottom:12px;font-size:15.5px;}
.badges-in span b{font-size:32px;}
.badges-in .uline path{stroke-width:5.2;}
.badges-in .uline path.u2{stroke-width:2;opacity:.6;transform:translateY(4.5px);}
.badges-in span::after{content:"";position:absolute;left:-6px;right:-6px;bottom:9px;height:44%;background:rgba(227,176,75,.26);border-radius:2px;z-index:-1;
  transform:scaleX(0);transform-origin:left center;transition:transform .9s cubic-bezier(.22,.61,.36,1) .1s;}
.anim .badges-in.in span::after{transform:scaleX(1);}
.anim .badges-in.in span:nth-child(2)::after{transition-delay:.35s;}
.anim .badges-in.in span:nth-child(3)::after{transition-delay:.6s;}
html:not(.anim) .badges-in span::after{transform:none;}
@media(max-width:600px){.badges-in span b{font-size:26px;}.badges-in span{font-size:14px;}}
@media(prefers-reduced-motion:reduce){.badges-in span::after{transform:none!important;transition:none;}}

/* ========================================================
   夜明け：スクロールで夜 → 藍 → 紫 → 日の出 → 朝（2026-09 追加）
   前のセクションの下の色 ＝ 次のセクションの上の色 でつなぐ
   ======================================================== */
/* 夜のあいだの色と文字 */
.hero-night + .badges::before{display:none;}
.hero-night + .badges{background:linear-gradient(180deg,#08110E 0%,#0B1612 100%)!important;border-bottom:1px solid rgba(255,255,255,.07)!important;}
.hero-night + .badges .badges-in span{color:#E9E4D8;}
.hero-night + .badges .badges-in span b{color:#8FE9C8;}
.hero-night + .badges .miniflow{color:#B8C3C9;}
.hero-night + .badges .miniflow .ic{color:#8FE9C8;}
.hero-night + .badges .miniflow .sep{color:#FFC857;}

#symptom.sec{background:linear-gradient(180deg,#0B1612 0%,#0F1B24 55%,#14223A 100%)!important;}
#solution.sec{background:linear-gradient(180deg,#14223A 0%,#1E2044 45%,#2A2450 78%,#33295A 100%)!important;}
#symptom,#solution{color:#E9E4D8;}
#symptom .sec-title,#solution .sec-title,#symptom h3,#solution h3{color:#F7F3EA;}
#symptom .sec-lead,#solution .sec-lead{color:#B8C3C9;}
#symptom .slabel,#solution .slabel{color:rgba(233,228,216,.62);}
#symptom .slabel::after,#solution .slabel::after{background:rgba(255,255,255,.2);}
#symptom .note,#solution .note{color:#A9B5BB;}
#symptom .more,#solution .more{color:#8FE9C8;border-bottom-color:rgba(143,233,200,.7);}
#symptom .more:hover,#solution .more:hover{color:#FFC857;border-bottom-color:#FFC857;}
/* チェックリスト */
#symptom .chk{border-top-color:rgba(255,255,255,.13);color:#EDE8DC;}
#symptom .chk:last-of-type{border-bottom-color:rgba(255,255,255,.13);}
#symptom .chk:hover{background:rgba(255,255,255,.04);}
#symptom .chk input{border-color:#8FE9C8;background:rgba(255,255,255,.04);}
#symptom .chk input:checked{background:#2FAE84;border-color:#2FAE84;}
#symptom .chk-result{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.16);backdrop-filter:blur(3px);}
#symptom .chk-result .verdict{color:#F4F0E6;}
#symptom .chk-result .verdict-sub,#symptom .chk-result .bar span{color:#B8C3C9;}
#symptom .chk-result .bar i{background:rgba(255,255,255,.14);}
#symptom .chk-result .bar i b{background:#3FF2B3;}
#symptom .chk-result .bar.top i b{background:#FFC857;}
#symptom .handoff{background:transparent;color:#8FE9C8;border-color:#8FE9C8;}
#symptom .handoff:hover{background:rgba(143,233,200,.1);}
#symptom .handoff-2{color:#FFC857;border-color:#FFC857;}
#symptom .handoff-2:hover{background:rgba(255,200,87,.1);}
#symptom .allstamp{color:#FF8A6E;border-color:#FF8A6E;}
/* 解き方 */
#solution p{color:#DCD6CC;}
#solution .rule-list li{border-color:rgba(255,255,255,.13)!important;}
#solution .rule-list li:hover{background:rgba(255,255,255,.04);}
#solution .svc-row p{color:#B8C3C9;}
#solution .ico{color:#8FE9C8;}
#solution .cause-fig svg .arrows{stroke:#8FE9C8;}
#solution .cause-fig svg marker path{fill:#8FE9C8;}
#solution .cause-fig svg .result circle{fill:#2FAE84;}
#solution .cause-fig svg .bx rect{fill:#FFFDF8;}

/* 朝：日の出から和紙の色へ */
#profile.sec{background:linear-gradient(180deg,#F8DCC8 0%,#F6D5BE 55%,#F2CFB5 100%)!important;--ink-soft:#3A2F2C;}
#profile .qual{color:#7A3E1D;}
#profile .tate{color:#16392D;}
#profile .tate small{color:#4A3A34;}
#profile .slabel{color:#4A3A34;}
#profile .pnums{border-color:rgba(58,47,44,.25);}
#profile .pnums span b{color:#16392D;}
#profile .more{color:#16392D;border-bottom-color:#16392D;}
#profile .memo{color:#8A2E1C;}
#profile .memo svg path{stroke:#8A2E1C;}
#profile .story-photo::before{border-color:#8A5A2B;}
#service.sec{background:linear-gradient(180deg,#F2CFB5 0%,#F5D9C2 50%,#F7E0CB 100%)!important;}
#service .svc-row p{color:#3F3A36;}
#service .svc-row .tag{border-color:rgba(63,58,54,.35);color:#4A3F39;}
#service .rule-list li{border-color:rgba(63,58,54,.18)!important;}
#flow.sec{background:linear-gradient(180deg,#F7E0CB 0%,#FAEBDA 100%)!important;}
#flow .flow li p{color:#4A4541;}
#why.sec{background:linear-gradient(180deg,#FAEBDA 0%,#FCF4EA 100%)!important;}
#voice.sec{background:linear-gradient(180deg,#FCF4EA 0%,#FFFFFF 38%)!important;}
#service.sec-paper::before,#why.sec-paper::before,#solution.sec-paper::before{display:none;}

/* 蛍 */
.fireflies{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:6;}

/* 夜の中の実績：蛍光ペンを明るい金に、下線を明るい朱に */
.hero-night + .badges .badges-in span::after{background:rgba(255,200,87,.22);}
.hero-night + .badges .badges-in .uline path{stroke:#FF6B4A;}

/* ========================================================
   3Dファンタジー一式（2026-09 追加）
   ======================================================== */
/* --- 夜空の奥行き --- */
.hero-night .hero-stars{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;}

/* --- 光の道（相談の流れ） --- */
.road-scene{position:relative;height:300vh;--p:0;}
.road-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;perspective:1100px;perspective-origin:50% 38%;}
.road-head{position:relative;z-index:30;padding-top:84px;}
.road-head .sec-head{margin-bottom:0;}
.road{position:absolute;left:50%;bottom:-6vh;width:min(44vw,560px);height:200vh;margin-left:calc(min(44vw,560px) / -2);
  transform:rotateX(76deg);transform-origin:50% 100%;
  background:linear-gradient(0deg,rgba(255,255,255,.95) 0%,rgba(255,250,240,.7) 30%,rgba(255,244,225,0) 85%);
  box-shadow:0 0 0 1px rgba(184,137,43,.0);}
.road::before,.road::after{content:"";position:absolute;top:0;bottom:0;width:3px;background:linear-gradient(0deg,rgba(217,164,65,.95),rgba(217,164,65,0) 80%);
  box-shadow:0 0 18px rgba(255,200,110,.8);}
.road::before{left:0;}.road::after{right:0;}
.road-line{position:absolute;left:50%;top:0;bottom:0;width:6px;margin-left:-3px;
  background:repeating-linear-gradient(0deg,rgba(31,92,70,.55) 0 60px,rgba(31,92,70,0) 60px 130px);
  background-position:0 calc(var(--p) * 2600px);
  -webkit-mask-image:linear-gradient(0deg,#000 0%,#000 40%,transparent 88%);mask-image:linear-gradient(0deg,#000 0%,#000 40%,transparent 88%);}
.road-steps{position:absolute!important;inset:0;margin:0;padding:0;display:block!important;transform-style:preserve-3d;}
.road-steps li{position:absolute!important;left:50%;top:58%;width:min(430px,84vw);padding:24px 28px 22px!important;list-style:none;
  background:#FFFDF8;border:1px solid rgba(184,137,43,.35);border-radius:6px;
  box-shadow:0 30px 60px -30px rgba(90,60,30,.45),0 0 40px rgba(255,214,150,.35);
  transform:translate(-50%,-50%);will-change:transform,opacity;}
.road-steps li::before{display:none!important;}
.road-steps li .stp{font-size:46px!important;color:var(--ochre)!important;display:block;margin-bottom:4px;}
.road-steps li h3{font-size:21px!important;margin:0 0 8px!important;}
.road-steps li p{font-size:15px!important;color:#4A4541!important;}
.road-dots{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;gap:10px;z-index:40;}
.road-dots i{width:9px;height:9px;border-radius:50%;background:rgba(58,47,44,.2);transition:background .3s,transform .3s;}
.road-dots i.on{background:var(--ochre);transform:scale(1.35);}
@media(max-width:820px){.road-scene{height:260vh;}.road-head{padding-top:70px;}.road{width:70vw;margin-left:-35vw;}.road-steps li{top:60%;}}
@media(prefers-reduced-motion:reduce){
  .road-scene{height:auto;}
  .road-stage{position:relative;height:auto;perspective:none;overflow:visible;}
  .road,.road-dots{display:none;}
  .road-head{padding-top:0;}
  .road-steps{position:relative!important;display:grid!important;grid-template-columns:1fr;gap:18px;margin-top:36px;}
  .road-steps li{position:relative!important;left:auto;top:auto;width:auto;transform:none!important;opacity:1!important;}
}

/* --- サービス：宙に浮かぶ光のカード --- */
#service .rule-list{display:grid;grid-template-columns:repeat(6,1fr);gap:26px;perspective:1300px;}
#service .rule-list > li{grid-column:span 2;position:relative;border:none!important;padding:26px 24px 22px!important;border-radius:10px;
  background:linear-gradient(160deg,rgba(255,255,255,.88),rgba(255,250,242,.72));
  box-shadow:0 0 0 1px rgba(184,137,43,.3),0 24px 44px -24px rgba(110,70,40,.45),0 0 34px rgba(255,214,150,.3);
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))!important;transform-style:preserve-3d;
  transition:box-shadow .3s ease,translate .9s cubic-bezier(.2,.8,.2,1),scale .9s cubic-bezier(.2,.8,.2,1),opacity .7s ease;}
#service .rule-list > li:nth-child(4){grid-column:2 / span 2;}
#service .rule-list > li:nth-child(5){grid-column:4 / span 2;}
#service .rule-list > li:hover{box-shadow:0 0 0 1px rgba(184,137,43,.55),0 34px 60px -26px rgba(110,70,40,.5),0 0 50px rgba(255,214,150,.55);background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(255,250,242,.82));}
#service .rule-list > li::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.75),rgba(255,255,255,0) 46%);opacity:0;transition:opacity .3s ease;}
#service .rule-list > li:hover::after{opacity:1;}
#service .svc-row{flex-direction:column;gap:12px;transform:translateZ(30px);}
#service .svc-row .ico{width:44px;height:44px;}
.anim #service .rule-list > li.rv{opacity:0;translate:0 70px;scale:.88;}
.anim #service .rule-list > li.rv.in{opacity:1;translate:0 0;scale:1;}
@media(max-width:900px){#service .rule-list{grid-template-columns:1fr;gap:18px;}#service .rule-list > li,#service .rule-list > li:nth-child(4),#service .rule-list > li:nth-child(5){grid-column:auto;}}

/* --- お客様の声：寝かせた手紙が起き上がる --- */
#voice .voice{background:#FFFDF8;border:1px solid rgba(184,137,43,.22)!important;padding:28px 30px 24px!important;margin-bottom:30px;border-radius:3px;
  box-shadow:0 18px 34px -22px rgba(90,60,30,.4);}
#voice .voice:nth-child(1){--tilt:-.7deg;}#voice .voice:nth-child(2){--tilt:.6deg;}#voice .voice:nth-child(3){--tilt:.5deg;}#voice .voice:nth-child(4){--tilt:-.5deg;}
.anim #voice .voice.rv{opacity:0;transform:perspective(1100px) rotateX(64deg) translateY(40px);transform-origin:50% 100%;
  transition:transform 1.1s cubic-bezier(.2,.85,.2,1),opacity .7s ease;}
.anim #voice .voice.rv.in{opacity:1;transform:perspective(1100px) rotateX(0deg) rotate(var(--tilt,0deg));}
#voice .voice:hover{transform:perspective(1100px) rotateX(0deg) rotate(0deg) translateY(-3px)!important;}

/* --- 和紙の花びら・マウスの光 --- */
.petals{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:6;}
.trail{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:7;}

/* --- ページを移るときの光 --- */
.page-light{position:fixed;inset:0;z-index:3000;pointer-events:none;
  background:radial-gradient(circle at var(--x,50%) var(--y,50%),#FFFFFF 0%,#FFF4DF 22%,#F9E3CB 55%,#F4D6BE 100%);
  clip-path:circle(0% at var(--x,50%) var(--y,50%));transition:clip-path .5s cubic-bezier(.7,0,.25,1),opacity .55s ease;}
.page-light.go{clip-path:circle(150% at var(--x,50%) var(--y,50%));}
.page-light.cover{clip-path:circle(150% at 50% 50%);transition:none;}
.page-light.cover.fade{opacity:0;transition:opacity .65s ease;}
@media(prefers-reduced-motion:reduce){.page-light{display:none;}}
/* 光の道：手前のカードを大きく、レ点は出さない */
.road-steps li{width:min(500px,86vw)!important;top:60%!important;}
.road-steps li .stp::after{display:none!important;}
.road-steps li h3{font-size:23px!important;}
.road-steps li p{font-size:16px!important;}

/* ========================================================
   夜明けの空（2026-09 作り直し）
   太陽は描かず、空の色だけで 藍 → 紫 → 朝焼けの桃色 → 朝の和紙色 へ
   色の段階を細かく刻み、画面の約8割の高さをかけて移り変わる
   ======================================================== */
.dawnsky{position:relative;height:clamp(460px,82vh,780px);overflow:hidden;
  background:linear-gradient(180deg,
    #33295A 0%,#3A2B5F 9%,#443066 18%,#52376F 27%,#654078 36%,#7B4B7F 45%,
    #955A84 54%,#B06C88 63%,#C8818C 71%,#DB9A93 79%,#EAB49F 87%,#F3CAB2 94%,#F8DCC8 100%);}
/* 色の段差（縞）が出ないよう、ごく薄い紙の粒子を重ねる */
.dawnsky::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");}
/* 夜の名残の星：上の方だけに残り、下へ行くほど消える */
.dawnsky-stars{position:absolute;left:0;top:0;width:100%;height:55%;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 45%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 45%,transparent 100%);}
.dawnsky-stars circle{animation:skyTwinkle 4s ease-in-out infinite;}
.dawnsky-stars circle:nth-child(3n){animation-delay:-1.3s;animation-duration:5.2s;}
.dawnsky-stars circle:nth-child(3n+1){animation-delay:-2.6s;animation-duration:3.6s;}
@keyframes skyTwinkle{0%,100%{opacity:.85;}50%{opacity:.3;}}
/* 地平線のあたりが、ぼんやり明るくなる（円は描かない） */
.dawnsky-glow{position:absolute;left:-20%;right:-20%;bottom:-18%;height:62%;pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 50% 100%,rgba(255,226,200,.42) 0%,rgba(255,214,190,.18) 45%,rgba(255,214,190,0) 75%);}
@media(prefers-reduced-motion:reduce){.dawnsky-stars circle{animation:none;}}

/* ========================================================
   igloo.incに近づける仕上げ（2026-09 追加）
   ======================================================== */
/* ファーストビュー：「ふれてみて」の案内 */
.hud-hint{position:absolute;left:48px;bottom:60px;display:flex;flex-direction:column;gap:2px;opacity:0;transform:translateY(8px);
  transition:opacity .8s ease,transform .8s ease;pointer-events:none;}
.hud-hint.show{opacity:1;transform:none;}
.hud-hint.done{opacity:0!important;transition:opacity .6s ease;}
.hud-hint b{font-family:"Yomogi",var(--serif);font-weight:400;font-size:15px;color:#FFC857;letter-spacing:.08em;text-shadow:0 0 12px rgba(255,200,87,.55);
  animation:hintPulse 2.2s ease-in-out infinite;}
.hud-hint i{font-style:normal;font-size:11.5px;letter-spacing:.1em;color:rgba(244,240,230,.65);}
.hud-hint .sp{display:none;}
@keyframes hintPulse{0%,100%{opacity:.75;}50%{opacity:1;}}
@media(hover:none),(pointer:coarse){.hud-hint .pc{display:none;}.hud-hint .sp{display:inline;}}
@media(max-width:900px){.hud-hint{left:20px;bottom:62px;}.hud-hint b{font-size:13.5px;}}

/* 夜の旅：光の粒は背景の手前・文字の後ろに */
.night-gl{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;display:block;mix-blend-mode:screen;}
.hero-night + .badges > .wrap,#symptom > .wrap,#solution > .wrap{position:relative;z-index:2;}
#symptom .slabel,#solution .slabel{z-index:2;}

/* 夜の部分にフィルムの粒子感 */
.hero-night .hero-hud::after,#symptom::after,#solution::after{content:"";position:absolute;inset:-12%;pointer-events:none;opacity:.07;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(6) infinite;}
#symptom,#solution{overflow:hidden;}
@keyframes grain{0%{transform:translate(0,0)}17%{transform:translate(-3%,2%)}33%{transform:translate(2%,-3%)}50%{transform:translate(-2%,-1%)}67%{transform:translate(3%,1%)}83%{transform:translate(-1%,3%)}100%{transform:translate(0,0)}}

/* 速くスクロールすると、しなる */
.blog-grid .bcard .thumb,.story-photo,#voice .voice-list,.cause-fig{transform:skewY(var(--skew,0deg));}
.blog-grid .bcard .thumb{transition:transform .08s linear;}

/* 光の輪のカーソル */
.cursor-ring{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid rgba(227,168,59,.85);border-radius:50%;
  pointer-events:none;z-index:2950;opacity:0;box-shadow:0 0 14px rgba(255,200,110,.45),inset 0 0 8px rgba(255,200,110,.25);
  transition:width .25s ease,height .25s ease,margin .25s ease,background-color .25s ease,opacity .3s ease,scale .15s ease;}
.cursor-ring.on{opacity:1;}
.cursor-ring.hot{width:60px;height:60px;margin:-30px 0 0 -30px;background-color:rgba(255,214,150,.14);}
.cursor-ring.down{scale:.78;}
.cursor-dot{position:fixed;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#E3A83B;pointer-events:none;z-index:2951;opacity:0;
  box-shadow:0 0 8px rgba(255,200,110,.9);transition:opacity .3s ease;}
.cursor-dot.on{opacity:1;}
.btn,.sh-btn,.hud-replay{transition:transform .2s ease,background .2s ease,box-shadow .2s ease,translate .35s cubic-bezier(.2,.8,.2,1);}

@media(prefers-reduced-motion:reduce){
  .hud-hint b{animation:none;}
  .hero-night .hero-hud::after,#symptom::after,#solution::after{animation:none;}
  .blog-grid .bcard .thumb,.story-photo,#voice .voice-list,.cause-fig{transform:none;}
  .cursor-ring,.cursor-dot{display:none;}
}

/* ========================================================
   音のボタン（トップページのヘッダー）
   ======================================================== */
.snd{position:relative;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 13px;border-radius:20px;border:1px solid var(--line);
  background:#fff;color:var(--ink);font:inherit;font-size:13px;cursor:pointer;transition:border-color .2s,background .2s;}
.snd:hover{border-color:var(--ochre);}
.snd.on{border-color:var(--green);background:var(--green-pale);}
.snd-eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px;}
.snd-eq i{display:block;width:3px;height:4px;border-radius:1px;background:var(--ink-soft);transition:background .2s;}
.snd.on .snd-eq i{background:var(--green);animation:eq 1s ease-in-out infinite;}
.snd.on .snd-eq i:nth-child(2){animation-delay:-.3s;}.snd.on .snd-eq i:nth-child(3){animation-delay:-.6s;}.snd.on .snd-eq i:nth-child(4){animation-delay:-.15s;}
@keyframes eq{0%,100%{height:4px;}50%{height:14px;}}
.snd-tip{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,-4px);white-space:nowrap;font-family:"Yomogi",var(--serif);font-size:13px;
  color:#fff;background:var(--green);padding:5px 11px;border-radius:3px;opacity:0;pointer-events:none;transition:opacity .4s ease,transform .4s ease;}
.snd-tip::before{content:"";position:absolute;top:-5px;left:50%;margin-left:-5px;border:5px solid transparent;border-top:none;border-bottom-color:var(--green);}
.snd.tip .snd-tip{opacity:1;transform:translate(-50%,0);}
.snd.seen .snd-tip{display:none;}
@media(max-width:960px){.snd{height:36px;padding:0 10px;}.snd-t{display:none;}}
@media(max-width:480px){.snd{height:34px;padding:0 8px;}}
@media(prefers-reduced-motion:reduce){.snd.on .snd-eq i{animation:none;height:10px;}}

/* ========================================================
   読みやすさ：大事なところを目立たせる（2026-09 追加）
   文章は変えず、見せ方だけで強弱をつける
   ======================================================== */
/* 金色の蛍光ペン：スクロールで左から塗られる */
.mk{color:inherit;padding:0 .06em;background-color:transparent;
  background-image:linear-gradient(transparent 54%,rgba(255,212,72,.72) 54%,rgba(255,212,72,.72) 94%,transparent 94%);
  background-repeat:no-repeat;background-size:0% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size 1s cubic-bezier(.22,.61,.36,1);}
.mk.on,html:not(.anim) .mk{background-size:100% 100%;}
#symptom .mk,#solution .mk{background-image:linear-gradient(transparent 56%,rgba(255,200,87,.34) 56%,rgba(255,200,87,.34) 92%,transparent 92%);color:#FFF6E4;}
/* 朱色の手描き下線：安心材料や約束ごと */
.ubr{padding-bottom:3px;background-repeat:no-repeat;background-position:0 100%;background-size:0% 8px;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.2 C 40 2.2, 80 6.8, 120 4 S 180 2.6, 198 4.6' fill='none' stroke='%23C8452B' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  transition:background-size .9s cubic-bezier(.22,.61,.36,1) .1s;font-weight:700;}
.ubr.on,html:not(.anim) .ubr{background-size:100% 8px;}
#solution .ubr{color:#FFE9DF;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.2 C 40 2.2, 80 6.8, 120 4 S 180 2.6, 198 4.6' fill='none' stroke='%23FF7A5C' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");}
/* 数字：実績や効果を大きく */
.en{font-family:var(--serif);font-weight:700;color:var(--green);font-size:1.14em;letter-spacing:.02em;padding:0 .04em;}
#solution .en,#symptom .en{color:#8FE9C8;}
/* 太字 */
main strong{font-weight:700;color:var(--ink);}
#symptom strong,#solution strong{color:#FFFFFF;}
#profile strong{color:#1A1412;}
/* よくある質問：答えの結論 */
.faq .ans .ans-lead{color:var(--green);font-size:1.05em;margin-right:.2em;}
.faq .ans{line-height:1.95;}
/* 囲み：前置きとして大事な一文 */
.callout{position:relative;border-left:4px solid #C8452B;background:rgba(255,255,255,.62);padding:14px 20px 14px 18px!important;border-radius:0 4px 4px 0;
  color:var(--ink)!important;font-weight:500;max-width:720px;box-shadow:0 10px 24px -18px rgba(90,60,30,.45);}
/* 料金表の小さな札 */
.chip{display:inline-block;font-size:12.5px;font-weight:700;color:#fff;background:#C8452B;padding:2px 10px;border-radius:12px;letter-spacing:.04em;}
.chip-g{background:var(--green);}
.price-table ul li{margin-bottom:3px;}
.price-table ul li:first-child{color:var(--ink);font-weight:700;}
/* お問い合わせ：分かることの箇条書きに朱のレ点 */
.side-box ul{list-style:none;padding-left:0;}
.side-box ul li{position:relative;padding-left:24px;}
.side-box ul li::before{content:"";position:absolute;left:4px;top:.45em;width:11px;height:6px;border-left:2.4px solid #C8452B;border-bottom:2.4px solid #C8452B;transform:rotate(-45deg);}
/* お客様の声：本文を少しゆったり */
#voice .voice-body p{line-height:2;}
@media(prefers-reduced-motion:reduce){.mk,.ubr{transition:none;background-size:100% 100%;}.ubr{background-size:100% 8px;}}

/* 花びら・蛍は文章やカードの後ろを舞う（読むのを邪魔しない） */
.petals,.fireflies{z-index:1!important;}
main .sec > .wrap,main .sec > .road-scene{position:relative;z-index:2;}
/* サブページ・ブログ記事：冒頭の一文の強調（もとの下線）を蛍光ペンにそろえる */
.lead-p u{text-decoration:none;padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone;font-weight:700;
  background-image:linear-gradient(transparent 54%,rgba(255,212,72,.72) 54%,rgba(255,212,72,.72) 94%,transparent 94%);}
.sub-body strong,.pg-body strong,.sub-body b,.pg-body b{color:var(--ink);}

/* ========================================================
   昼の世界（2026-09 追加）：lusion.coを参考にした朝の立体表現
   ======================================================== */
/* 朝の光の玉（液体ガラス）：背景の手前・文字の後ろ */
.day-gl{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;display:block;}
/* 軽い表示用：CSSの光の玉 */
.day-orbs{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity .4s ease;}
.day-orbs i{position:absolute;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.95) 0%,rgba(255,236,214,.7) 22%,rgba(255,200,170,.35) 55%,rgba(255,200,170,0) 72%);
  animation:orbFloat 14s ease-in-out infinite;}
.day-orbs i:nth-child(1){width:26vmin;height:26vmin;left:4%;top:14%;}
.day-orbs i:nth-child(2){width:18vmin;height:18vmin;right:6%;top:30%;animation-delay:-4s;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.95),rgba(214,244,232,.7) 24%,rgba(190,240,220,.3) 56%,rgba(190,240,220,0) 72%);}
.day-orbs i:nth-child(3){width:22vmin;height:22vmin;left:70%;top:66%;animation-delay:-8s;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.95),rgba(255,236,190,.7) 24%,rgba(255,214,120,.3) 56%,rgba(255,214,120,0) 72%);}
.day-orbs i:nth-child(4){width:14vmin;height:14vmin;left:18%;top:72%;animation-delay:-2s;}
.day-orbs i:nth-child(5){width:12vmin;height:12vmin;left:46%;top:8%;animation-delay:-10s;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.95),rgba(220,232,255,.7) 24%,rgba(200,222,255,.3) 56%,rgba(200,222,255,0) 72%);}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1);}33%{transform:translate(2vw,-3vh) scale(1.06);}66%{transform:translate(-1.5vw,2vh) scale(.95);}}

/* 写真の波紋 */
.story-photo .photo-fx{position:absolute;left:0;top:0;width:100%;aspect-ratio:720/756;border-radius:220px 220px 0 0;z-index:2;opacity:0;transition:opacity .25s ease;pointer-events:none;}
.story-photo .photo-fx.on{opacity:1;}

/* お客様の声：手紙がマウスに合わせて傾く */
.anim #voice .voice.rv.in{transform:perspective(1100px) rotateX(calc(var(--my,0) * -3deg)) rotateY(calc(var(--mx,0) * 4deg)) rotate(var(--tilt,0deg));
  transition:transform .6s cubic-bezier(.2,.85,.2,1),opacity .7s ease,box-shadow .3s ease;}
#voice .voice:hover{box-shadow:0 26px 44px -24px rgba(90,60,30,.5),0 0 0 1px rgba(184,137,43,.3);}

/* 表やカードに光が走る */
.shine-wrap{position:relative;overflow:hidden;border-radius:6px;}
.shine-wrap::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-45%;width:32%;pointer-events:none;z-index:3;opacity:0;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.65) 50%,rgba(255,255,255,0) 100%);transform:skewX(-18deg);}
.shine-wrap.shine-on::after{animation:sweep 1.5s cubic-bezier(.4,0,.2,1) .15s 1;}
@media(hover:hover){.shine-wrap:hover::after{animation:sweep 1.2s cubic-bezier(.4,0,.2,1) 1;}}
@keyframes sweep{0%{left:-45%;opacity:0;}15%{opacity:1;}100%{left:125%;opacity:0;}}
.shine-wrap.side-box{overflow:visible;}
.shine-wrap .price-table,.shine-wrap .cmp,.shine-wrap .def{margin:0;}

/* ブログのカード：立体的に傾き、光が反射する */
#blog .blog-grid{perspective:900px;}
#blog .blog-grid .bcard{rotate:var(--ax,0) var(--ay,1) 0 var(--ta,0deg);transition:rotate .35s cubic-bezier(.2,.8,.2,1),transform .3s cubic-bezier(.22,.61,.36,1);}
#blog .blog-grid .bcard .thumb{position:relative;}
#blog .blog-grid .bcard .thumb::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,40%),rgba(255,255,255,.55),rgba(255,255,255,0) 50%);}
#blog .blog-grid .bcard:hover .thumb::after{opacity:1;}

/* お問い合わせ：縁を虹色の光が回る */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg;}
#contact .side-box,#contact .cform{position:relative;}
#contact .side-box::before{content:"";position:absolute;inset:-2px;border-radius:4px;padding:2px;pointer-events:none;
  background:conic-gradient(from var(--ang),#FFD37A,#FFB8C6,#BFF0DC,#CFE6FF,#FFD37A);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:spinAng 6s linear infinite;}
#contact .cform .btn{box-shadow:0 0 0 0 rgba(31,92,70,.4);animation:formGlow 2.6s ease-in-out infinite;}
@keyframes spinAng{to{--ang:360deg;}}
@keyframes formGlow{0%,100%{box-shadow:0 0 0 0 rgba(31,92,70,0),0 8px 20px -10px rgba(31,92,70,.4);}50%{box-shadow:0 0 0 6px rgba(31,92,70,.12),0 12px 28px -10px rgba(31,92,70,.5);}}

@media(prefers-reduced-motion:reduce){
  .day-orbs i{animation:none;}
  .shine-wrap::after{display:none;}
  #contact .side-box::before{animation:none;}
  #contact .cform .btn{animation:none;}
}

/* ========================================================
   3Dアイコン（2026-09 追加）：つやのある立体のアイコン
   ======================================================== */
.ico3d{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(90,60,30,.22));
  animation:icoBob 4.6s ease-in-out infinite;will-change:transform;}
.ico,.miniflow .ic{perspective:420px;}
.rule-list > li:nth-child(2) .ico3d,.miniflow .st:nth-child(2) .ico3d{animation-delay:-1.2s;}
.rule-list > li:nth-child(3) .ico3d,.miniflow .st:nth-child(3) .ico3d{animation-delay:-2.4s;}
.rule-list > li:nth-child(4) .ico3d,.miniflow .st:nth-child(4) .ico3d{animation-delay:-3.4s;}
.rule-list > li:nth-child(5) .ico3d{animation-delay:-.6s;}
@keyframes icoBob{0%,100%{transform:translateY(0) rotate(-3deg);}50%{transform:translateY(-5px) rotate(3deg);}}
/* 画面に入るとき：くるっと回って弾む */
.anim .rv:not(.in) .ico3d{opacity:0;transform:scale(.3) rotateY(-160deg);}
.anim .rv.in .ico3d{animation:icoPop 1s cubic-bezier(.34,1.5,.64,1) both,icoBob 4.6s ease-in-out 1s infinite;}
@keyframes icoPop{0%{opacity:0;transform:scale(.3) rotateY(-160deg);}60%{opacity:1;}100%{opacity:1;transform:scale(1) rotateY(0);}}
/* さわると大きく跳ねて光る */
@media(hover:hover){
  .rule-list > li:hover .ico3d,.miniflow .st:hover .ico3d{animation:icoJump .7s cubic-bezier(.34,1.6,.64,1);filter:drop-shadow(0 12px 14px rgba(90,60,30,.28)) drop-shadow(0 0 14px rgba(255,214,150,.75));}
}
@keyframes icoJump{0%{transform:translateY(0) scale(1) rotateY(0);}40%{transform:translateY(-12px) scale(1.14) rotateY(180deg);}100%{transform:translateY(0) scale(1) rotateY(360deg);}}
/* 大きさ */
#service .svc-row .ico{width:72px;height:72px;}
#solution .ico{width:60px;height:60px;}
.miniflow .ic{width:42px;height:42px;}
.ico svg,.miniflow .ic svg{display:none;}
/* 夜の部分では、ほんのり発光 */
#solution .ico3d,.hero-night + .badges .ico3d{filter:drop-shadow(0 6px 10px rgba(0,0,0,.35)) drop-shadow(0 0 12px rgba(255,214,150,.28));}
@media(max-width:900px){#service .svc-row .ico{width:60px;height:60px;}}
@media(prefers-reduced-motion:reduce){.ico3d,.anim .rv.in .ico3d{animation:none!important;opacity:1!important;transform:none!important;}}
#service .svc-row .ico{width:92px;height:92px;margin:-10px 0 -4px -8px;}
#solution .ico{width:66px;height:66px;}
.miniflow .ic{width:48px;height:48px;}
@media(max-width:900px){#service .svc-row .ico{width:72px;height:72px;margin:-6px 0 0 -6px;}}

/* ========================================================
   生きた空（2026-09 追加）：描けたときだけ、各セクションの背景を透明にして空を見せる
   ======================================================== */
.sky-gl{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block;}
html.sky-on .hero.hero-night,
html.sky-on .hero-night + .badges,
html.sky-on #symptom.sec,html.sky-on #solution.sec,
html.sky-on .dawnsky,
html.sky-on #profile.sec,html.sky-on #service.sec,html.sky-on #flow.sec,html.sky-on #why.sec,html.sky-on #voice.sec{background:transparent!important;}
html.sky-on .dawnsky-stars{display:none;}
html.sky-on .dawnsky::after{opacity:.04;}
/* 夜の見出しに、オーロラの照り返し */
html.sky-on #symptom .sec-title,html.sky-on #solution .sec-title{text-shadow:0 0 28px rgba(110,255,200,.16),0 0 2px rgba(0,0,0,.4);}
/* 念のため：どの演出でもページが横にはみ出さないように（縦の貼りつき表示は壊さない書き方） */
html,body{overflow-x:clip;}

/* ========================================================
   修正（2026-09）：読みやすさを優先した調整
   ======================================================== */
/* 見出し：最初から表示。手描きの下線も最初から見える */
.anim .sec-title .ul path{stroke-dashoffset:0!important;animation:none;}
.anim .sec-head,.anim .sec-title{opacity:1!important;transform:none!important;}

/* サービスのカード：傾き・飛来・反射をやめ、落ち着いたカードに */
#service .rule-list > li{transform:none!important;translate:none!important;scale:none!important;}
.anim #service .rule-list > li.rv{opacity:0;translate:none;scale:none;transform:none!important;transition:opacity .6s ease!important;}
.anim #service .rule-list > li.rv.in{opacity:1;}
#service .rule-list > li::after{display:none!important;}
#service .svc-row{transform:none!important;}
#service .rule-list > li:hover{box-shadow:0 0 0 1px rgba(184,137,43,.45),0 22px 40px -24px rgba(110,70,40,.45);}

/* ガラスの玉の名残が残らないように */
.day-gl,.day-orbs,.night-gl{display:none!important;}

/* ========================================================
   ヘッダーの項目：3Dアイコン付きのボタン、光の下地がマウスについて動く
   ======================================================== */
.sh-nav{position:relative;display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,248,238,.88));border:1px solid rgba(184,137,43,.3);
  box-shadow:0 8px 22px -14px rgba(90,60,30,.45),inset 0 1px 0 rgba(255,255,255,.9);}
.sh-nav a.nv{position:relative;z-index:1;display:flex;align-items:center;gap:6px;padding:6px 13px 6px 9px;border-radius:999px;
  font-size:14px;font-weight:700;letter-spacing:.04em;color:var(--ink);border:none!important;text-decoration:none;transition:color .2s ease;white-space:nowrap;}
.sh-nav a.nv::after{display:none!important;}
.nv-ic{width:28px;height:28px;flex:none;filter:drop-shadow(0 3px 4px rgba(90,60,30,.28));transition:transform .45s cubic-bezier(.34,1.7,.64,1);}
.sh-nav a.nv:hover,.sh-nav a.nv:focus-visible{color:var(--green);}
.sh-nav a.nv:hover .nv-ic,.sh-nav a.nv:focus-visible .nv-ic{transform:translateY(-3px) rotate(-10deg) scale(1.18);}
.sh-nav a.nv.is-here{color:var(--green);}
.sh-nav a.nv.is-here::before{content:"";position:absolute;left:50%;bottom:1px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--shu);box-shadow:0 0 6px rgba(200,69,43,.7);}
.nv-glow{position:absolute;left:0;top:4px;bottom:4px;width:0;border-radius:999px;z-index:0;pointer-events:none;opacity:0;
  background:linear-gradient(135deg,#FFF1D2 0%,#FFE0C6 55%,#FFD8D6 100%);box-shadow:0 6px 14px -8px rgba(200,120,60,.55),inset 0 0 0 1px rgba(227,168,59,.45);
  transition:transform .38s cubic-bezier(.34,1.3,.64,1),width .38s cubic-bezier(.34,1.3,.64,1),opacity .25s ease;}
.nv-glow.on{opacity:1;}
.sh-drop .sh-drop-t{display:flex;}
header.site-head.shrink .nv-ic{width:24px;height:24px;}
@media(max-width:1260px){.sh-nav a.nv{padding:6px 9px 6px 7px;font-size:13px;gap:4px;}.nv-ic{width:24px;height:24px;}}
@media(max-width:1040px){.sh-nav a.nv span{display:none;}.sh-nav a.nv{padding:6px 8px;}.nv-ic{width:30px;height:30px;}}
@media(prefers-reduced-motion:reduce){.nv-ic,.nv-glow{transition:none;}}

/* 音のボタン：止まっているときも「音の波形」に見えるように */
.snd .snd-eq i:nth-child(1){height:6px;}.snd .snd-eq i:nth-child(2){height:11px;}.snd .snd-eq i:nth-child(3){height:8px;}.snd .snd-eq i:nth-child(4){height:13px;}
.snd-eq i{background:var(--ink)!important;opacity:.55;}
.snd.on .snd-eq i{background:var(--green)!important;opacity:1;}
/* スマホ・タブレットではヘッダーの項目を隠してメニュー（≡）に入れる */
@media(max-width:960px){.sh-nav{display:none!important;}}
/* 中間の画面幅：ヘッダーを詰めて、右端のボタンが見切れないように */
@media(max-width:1260px){
  .snd .snd-t{display:none;}
  .snd{padding:0 10px;}
  .sh-cta{gap:8px;}
  .sh-cta .sh-btn{padding-left:16px;padding-right:16px;}
  .sh-in{gap:14px;}
  .sh-logo-main{font-size:clamp(15px,1.55vw,19px);}
}
/* アイコンだけになる幅でも、項目名は読み上げソフトに伝わるように（見た目だけ隠す） */
@media(max-width:1040px){
  .sh-nav a.nv span{display:inline!important;position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
}
/* ヘッダーの枠を広げ、項目ボタンが収まるように */
header.site-head .sh-in{max-width:1380px;}
header.site-head .sh-cta .sh-tel{display:none!important;}
@media(max-width:1366px){.sh-nav a.nv{padding:6px 10px 6px 8px;gap:5px;}.nv-ic{width:26px;height:26px;}}
@media(max-width:1260px){.sh-nav a.nv{padding:6px 8px 6px 6px;font-size:13px;gap:4px;}.nv-ic{width:24px;height:24px;}}
@media(max-width:1140px){.sh-nav a.nv{padding:6px 6px 6px 5px;font-size:12.5px;letter-spacing:.02em;}.sh-nav{gap:0;}}

/* 空を描かない範囲では描画面ごと隠す（黒い面が見えないように） */
.sky-gl.off{visibility:hidden;}

/* ========================================================
   修正（2026-09）：お客様の声の見出しの下線／屋号を目立たせる
   ======================================================== */
/* お客様の声の見出し：2行に折り返しても、行ごとに文字の下へ線を引く */
.anim .voice-result,.voice-result{display:inline!important;padding:0 .08em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  background-image:linear-gradient(transparent 62%,rgba(31,92,70,.16) 62%,rgba(31,92,70,.16) 94%,transparent 94%);background-repeat:no-repeat;}
html:not(.anim) .voice-result{background-size:100% 100%;}
.hl-ai,.hl-hito{-webkit-box-decoration-break:clone;box-decoration-break:clone;}

/* ヘッダーの屋号：印＋大きな文字 */
.sh-logo{flex-direction:row!important;align-items:center;gap:10px;text-decoration:none;}
.sh-emblem{width:46px;height:46px;flex:none;filter:drop-shadow(0 4px 6px rgba(20,60,45,.3));transition:transform .55s cubic-bezier(.34,1.6,.64,1);}
.sh-logo:hover .sh-emblem{transform:rotate(-14deg) scale(1.08);}
.sh-logo-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0;}
.sh-logo-main{font-size:23px!important;font-weight:800;letter-spacing:.02em;color:#123D2F!important;white-space:nowrap;}
.sh-logo-main em{font-style:normal;}
.sh-logo-main .k-hito{color:#C8452B;}
.sh-logo-main .k-ai{color:#1F7A5C;}
header.site-head.shrink .sh-emblem{width:38px;height:38px;}
@media(max-width:1440px){.sh-logo-main{font-size:21px!important;}}
@media(max-width:1366px){.sh-logo-main{font-size:19px!important;}.sh-emblem{width:42px;height:42px;}}
@media(max-width:1260px){.sh-logo-main{font-size:17px!important;}.sh-emblem{width:38px;height:38px;}.sh-logo{gap:8px;}}
@media(max-width:1140px){.sh-logo-main{font-size:16px!important;}.sh-emblem{width:34px;height:34px;}}
/* スマホ・タブレット：2行に分けて、読みやすく大きく */
@media(max-width:960px){
  .sh-logo-main{white-space:normal;}
  .sh-logo-main .lg-a{display:block;font-size:12.5px;letter-spacing:.02em;}
  .sh-logo-main .lg-b{display:block;font-size:20px;letter-spacing:.04em;line-height:1.15;}
  .sh-emblem{width:40px;height:40px;}
}
@media(max-width:480px){
  .sh-logo-main .lg-a{font-size:11.5px;}
  .sh-logo-main .lg-b{font-size:18px;}
  .sh-emblem{width:36px;height:36px;}
  .sh-logo{gap:7px;}
}

/* ファーストビューの屋号：大きく、光らせる */
.hero-night .hero-who{gap:16px;margin-bottom:28px;}
.hero-night .hero-face{width:64px;height:64px;}
.hero-night .hero-who b{display:block;font-family:var(--serif);font-size:clamp(20px,2.3vw,30px);font-weight:800;letter-spacing:.04em;line-height:1.3;
  color:#FFF6E4;text-shadow:0 0 22px rgba(255,214,150,.35),0 2px 10px rgba(0,0,0,.55);margin-bottom:4px;}
.hero-night .hero-who b em{font-style:normal;}
.hero-night .hero-who b .k-hito{color:#FF8A6E;}
.hero-night .hero-who b .k-ai{color:#62F2C0;}
@media(max-width:900px){.hero-night .hero-who b{font-size:clamp(19px,5.2vw,24px);}.hero-night .hero-face{width:54px;height:54px;}}
/* お客様の声の見出し：外側を横並びの箱にしない（中の文字を行ごとに扱えるように） */
#voice .voice-head{display:block!important;}
/* スマホのヘッダー：「人手不足解決室」を1行に収める */
@media(max-width:960px){.sh-logo-main .lg-b{white-space:nowrap;}}
@media(max-width:480px){
  .sh-logo-main .lg-b{font-size:17px;letter-spacing:0;}
  .sh-logo-main .lg-a{font-size:11px;letter-spacing:0;}
  .sh-cta{gap:6px!important;}
  .sh-cta .sh-btn{padding:9px 10px!important;font-size:12px;}
  .snd{height:34px;padding:0 7px!important;}
}
@media(max-width:370px){.sh-logo-main .lg-b{font-size:15.5px;}.sh-emblem{width:32px;height:32px;}}
/* お客様の声の見出し：「→」の前後で折り返す（言葉の途中で切れないように） */
.voice-result .nb{display:inline-block;}


/* ========================================================
   始まる前の演出：銀河（2026-09 追加）
   ======================================================== */
.intro{position:fixed;inset:0;z-index:5000;background:#02040A;cursor:pointer;opacity:1;transition:opacity .85s ease;}
.intro canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.intro::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 80% at 72% 42%,#17392F 0%,#0D1B17 52%,#070E0C 100%);opacity:0;transition:opacity .9s ease;}
.intro.dusk::after{opacity:.85;}
.intro.out{opacity:0;pointer-events:none;}
.intro-brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
  opacity:0;filter:blur(8px);transition:opacity 1.1s ease,filter 1.1s ease,transform 1.6s cubic-bezier(.22,.61,.36,1);pointer-events:none;width:90vw;}
.intro-brand.on{opacity:1;filter:blur(0);transform:translate(-50%,-50%) scale(1);}
.intro-brand.off{opacity:0;filter:blur(6px);transform:translate(-50%,-50%) scale(1.08);transition:opacity .6s ease,filter .6s ease,transform .8s ease;}
.intro-brand img{width:78px;height:78px;filter:drop-shadow(0 0 20px rgba(255,214,150,.5));}
.intro-brand p{margin:0;font-family:var(--serif);font-weight:800;font-size:clamp(22px,3.4vw,44px);letter-spacing:.06em;color:#FFF6E4;
  text-shadow:0 0 26px rgba(255,214,150,.55),0 2px 14px rgba(0,0,0,.6);}
.intro-brand em{font-style:normal;}.intro-brand .k-hito{color:#FF8A6E;}.intro-brand .k-ai{color:#62F2C0;}
.intro-skip{position:absolute;right:24px;bottom:24px;z-index:3;font:inherit;font-size:13px;letter-spacing:.12em;color:rgba(244,240,230,.8);background:rgba(255,255,255,.06);
  border:1px solid rgba(244,240,230,.35);border-radius:999px;padding:8px 16px;cursor:pointer;backdrop-filter:blur(4px);transition:color .2s,border-color .2s,background .2s;}
.intro-skip:hover,.intro-skip:focus-visible{color:#fff;border-color:#fff;background:rgba(255,255,255,.12);}
@media(max-width:700px){.intro-brand p{font-size:clamp(18px,5.4vw,26px);}.intro-brand img{width:60px;height:60px;}.intro-skip{right:14px;bottom:18px;}}
/* 中心から金色の光が広がって、ファーストビューへ切り替わる */
.intro-flash{position:absolute;left:50%;top:50%;width:40vmax;height:40vmax;margin:-20vmax 0 0 -20vmax;border-radius:50%;z-index:1;pointer-events:none;opacity:0;transform:scale(.15);
  background:radial-gradient(circle,rgba(255,250,235,1) 0%,rgba(255,226,170,.85) 22%,rgba(255,190,120,.35) 48%,rgba(255,190,120,0) 70%);}
.intro.flash .intro-flash{animation:introFlash 1.05s cubic-bezier(.3,.1,.2,1) forwards;}
@keyframes introFlash{0%{opacity:0;transform:scale(.15);}35%{opacity:.95;}100%{opacity:0;transform:scale(4.2);}}
.intro::after{z-index:2;}
@media(max-width:700px){.intro-brand .ib-a,.intro-brand .ib-b{display:block;}.intro-brand .ib-b{font-size:1.12em;}}
/* 始まる前の演出：流れない理由の表示（?intro=why のときだけ） */
.intro-why{position:fixed;left:16px;bottom:16px;z-index:6000;max-width:min(520px,92vw);background:rgba(10,20,16,.92);color:#F4F0E6;font-size:14px;line-height:1.8;
  padding:14px 18px;border-radius:8px;border:1px solid rgba(255,200,87,.5);box-shadow:0 12px 30px rgba(0,0,0,.4);}
.intro-why b{color:#FFC857;}
.intro-why small{color:#B8C3C9;}
@media(prefers-reduced-motion:reduce){.intro-brand{transition:opacity .9s ease;filter:none;}}
/* スマホのファーストビュー：屋号を言葉の切れ目で2行に */
@media(max-width:600px){.hero-night .hero-who b .hb-a,.hero-night .hero-who b .hb-b{display:block;}}

/* ========================================================
   修正（2026-09）：スマホで文字が大きく設定されていても崩れないように
   ======================================================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
/* ヘッダー：下に常に「無料相談を申し込む」があるので、スマホでは上の「無料相談」を外して屋号の幅を確保 */
@media(max-width:600px){
  header.site-head .sh-cta .sh-btn{display:none!important;}
  .sh-logo{flex:1 1 auto;min-width:0;}
  .sh-logo-main .lg-a,.sh-logo-main .lg-b{white-space:nowrap;word-break:keep-all;}
  .sh-logo-main .lg-b{font-size:min(18px,5.2vw)!important;letter-spacing:0;}
  .sh-logo-main .lg-a{font-size:min(12px,3.3vw)!important;letter-spacing:0;}
}
/* 見出しと屋号：言葉の途中で折り返さない（どうしても入らないときだけ折り返す） */
.hero-night h1,.hero-night h2,.hero-night .hero-who b,.sh-logo-main,.finale-brand,.intro-brand p{word-break:keep-all;overflow-wrap:anywhere;}
/* スマホ：見出しと屋号を画面幅に合わせて縮め、「、」「。」だけが次の行に落ちないように */
@media(max-width:600px){
  .hero-night h1{font-size:min(34px,8.6vw)!important;line-break:strict;}
  .hero-night .hero-who b{font-size:min(22px,5.6vw)!important;}
  .hero-night .hero-who b .hb-a,.hero-night .hero-who b .hb-b{white-space:nowrap;}
}
@media(max-width:600px){.hero-night h1{font-size:min(34px,8.2vw)!important;}}
/* 「もう一度」をなくした分、案内を下へ（本文の注記と離す） */
@media(min-width:901px){.hud-hint{bottom:28px;}}
/* 始まる前の演出：彗星と、中心に入った瞬間の光の輪 */
.intro-comets{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;}
.intro-ring{position:absolute;left:50%;top:50%;width:30vmax;height:30vmax;margin:-15vmax 0 0 -15vmax;border-radius:50%;z-index:1;pointer-events:none;opacity:0;
  border:2px solid rgba(255,236,190,.9);box-shadow:0 0 40px rgba(255,214,150,.8),inset 0 0 40px rgba(170,235,255,.6);transform:scale(.1);}
.intro.flash .intro-ring{animation:introRing 1.2s cubic-bezier(.2,.7,.2,1) forwards;}
@keyframes introRing{0%{opacity:0;transform:scale(.1);}20%{opacity:1;}100%{opacity:0;transform:scale(5);}}
.intro-brand{z-index:3;}
/* 演出が消えていく間も、押した合図は幕で受け止める（下のボタンが押されないように） */
.intro.out{pointer-events:auto!important;}

/* 第3幕：暗闇に灯る金色の光の種（鼓動して、はじける） */
.intro-seed{position:absolute;left:50%;top:50%;width:18vmin;height:18vmin;margin:-9vmin 0 0 -9vmin;border-radius:50%;z-index:1;pointer-events:none;opacity:0;transform:scale(.2);
  background:radial-gradient(circle,rgba(255,252,240,1) 0%,rgba(255,220,150,.9) 14%,rgba(255,180,90,.35) 38%,rgba(255,170,90,0) 68%);}
.intro.seed .intro-seed{animation:seedBeat .75s ease-in-out 0s 2 forwards;}
.intro.burst .intro-seed{animation:seedBurst .9s cubic-bezier(.2,.7,.2,1) forwards;}
@keyframes seedBeat{0%{opacity:0;transform:scale(.2);}40%{opacity:1;transform:scale(.55);}70%{opacity:.8;transform:scale(.38);}100%{opacity:.95;transform:scale(.5);}}
@keyframes seedBurst{0%{opacity:1;transform:scale(.5);}30%{opacity:1;transform:scale(1.6);}100%{opacity:0;transform:scale(6);}}
/* 光がはじける場面でも、屋号が読めるように後ろをほんのり暗く */
.intro-brand::before{content:"";position:absolute;left:50%;top:50%;width:min(760px,96vw);height:260px;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(2,4,10,.62) 0%,rgba(2,4,10,.35) 45%,rgba(2,4,10,0) 72%);}
.intro-brand p{text-shadow:0 0 26px rgba(255,214,150,.55),0 2px 14px rgba(0,0,0,.75),0 0 3px rgba(0,0,0,.6);}

/* 第3幕をど派手に：中心から放射状に回る光の帯、二重目の光の輪、鼓動は2回（各0.5秒） */
.intro-rays{position:absolute;left:50%;top:50%;width:170vmax;height:170vmax;margin:-85vmax 0 0 -85vmax;z-index:1;pointer-events:none;opacity:0;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,236,190,.34) 0deg,rgba(255,236,190,0) 4deg,rgba(255,236,190,0) 11deg,rgba(170,235,255,.22) 13deg,rgba(170,235,255,0) 17deg,rgba(255,236,190,0) 24deg);
  -webkit-mask:radial-gradient(circle,#000 0%,rgba(0,0,0,.6) 22%,rgba(0,0,0,0) 48%);mask:radial-gradient(circle,#000 0%,rgba(0,0,0,.6) 22%,rgba(0,0,0,0) 48%);}
.intro.burst .intro-rays{animation:introRays 3.2s cubic-bezier(.2,.6,.2,1) forwards;}
@keyframes introRays{0%{opacity:0;transform:rotate(0deg) scale(.4);}14%{opacity:1;}70%{opacity:.75;}100%{opacity:0;transform:rotate(40deg) scale(1.05);}}
.intro-ring2{border-color:rgba(170,235,255,.9)!important;box-shadow:0 0 40px rgba(120,220,255,.8),inset 0 0 40px rgba(255,214,150,.5)!important;}
.intro.flash .intro-ring2{animation:introRing 1.5s cubic-bezier(.2,.7,.2,1) .28s forwards;}
.intro.seed .intro-seed{animation:seedBeat .5s ease-in-out 0s 2 forwards;}
/* 超新星爆発の閃光 */
.intro-snflash{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,1) 0%,rgba(255,244,220,.85) 18%,rgba(190,220,255,.35) 45%,rgba(190,220,255,0) 75%);}
.intro.sn .intro-snflash{animation:snFlash 1.1s cubic-bezier(.2,.7,.2,1) forwards;}
@keyframes snFlash{0%{opacity:0;transform:scale(.3);}12%{opacity:1;transform:scale(1);}100%{opacity:0;transform:scale(1.6);}}