/* トップページのうち、build/ に HTML が無いブロック(TOP-PAGE.md の「the PNG」)。
   値は tokens.css のものだけ。PNG から寸法は拾っていない(GENERAL-RULES §0)。 */

/* 02 HERO — 動画 + 40% の膜 + Find Your Path(画像)+ 日本語の行・リード・ボタン2つ */
.o-kv > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero__title{width:min(506px,80%);height:auto;margin:0 auto var(--sp-sm);display:block}
.hero__ja{font-family:var(--font-mincho);font-weight:600;font-size:var(--t-h1);
  line-height:var(--lh-title);letter-spacing:.04em;margin:0 0 var(--sp-md)}
.hero__lead{font-size:var(--t-lead);line-height:var(--lh-body);margin:0 0 var(--sp-lg)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-sm);justify-content:center}

/* 共通の見出しの組(eyebrow → title → lead) */
.sec-head{text-align:center;margin-bottom:var(--sp-lg)}
.sec-head .o-title{margin-top:var(--sp-xs)}
.sec-head .o-lead,.sec-head .o-body{margin-top:var(--sp-md)}
.sec-foot{text-align:center;margin-top:var(--sp-xl)}

/* 03 ABOUT — 若苔の帯(紙の質感つき)から、白いカードが立ち上がる */
.about{padding-top:var(--sp-2xl);text-align:center}
.about__body p{margin:0}
.about__mark{width:50px;height:auto;margin:var(--sp-lg) auto 0;display:block}
.about__card{position:relative;max-width:var(--content);margin:var(--sp-xl) auto 0;
  background:var(--white);border-radius:var(--radius) var(--radius) 0 0;
  padding:var(--sp-xl) var(--sp-lg) var(--sp-lg)}   /* 見出しと写真の間 40px(2026-11-04 ナターシャ指摘 #4) */
.about__after{background:var(--white);padding-bottom:var(--sp-2xl)}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-lg);
  max-width:var(--content);margin:0 auto;padding:0 var(--sp-lg)}
.feature img.ph{width:100%;aspect-ratio:8/5;object-fit:cover;border-radius:var(--radius)}
.feature .lotus{width:40px;height:auto;margin:var(--sp-sm) auto;display:block}
.feature h3{font-family:var(--font-mincho);font-weight:600;font-size:var(--t-h4);
  line-height:var(--lh-title);margin:0 0 var(--sp-sm)}
.feature p{font-size:var(--t-note);line-height:var(--lh-body);margin:0}

/* 07 HOW IT WORKS — 丸い写真4つと矢印。1列のときは矢印を下へ(TOP-PAGE.md 07) */
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:start;
  gap:var(--sp-sm);max-width:var(--content);margin:0 auto}
.flow__step{text-align:center}
.flow__step img{width:min(184px,100%);aspect-ratio:1;object-fit:cover;border-radius:50%;
  display:block;margin:0 auto var(--sp-md)}
.flow__step h3{font-family:var(--font-mincho);font-weight:600;font-size:var(--t-h4);margin:0 0 var(--sp-sm)}
.flow__step p{font-size:var(--t-note);line-height:var(--lh-body);margin:0}
.flow__arrow{width:20px;height:auto;margin-top:calc(var(--sp-2xl) + var(--sp-sm))}
.o-link-text{display:inline-flex;align-items:center;gap:var(--sp-xs);margin-top:var(--sp-sm);
  color:var(--kakishibu);font-size:var(--t-note);text-decoration:none}
.o-link-text:hover{text-decoration:underline}

/* 09 読みもの — カード3枚。カードのタイトルだけがリンク(TOP-PAGE.md 09) */
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-sm)}
.blog-card img{width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;display:block}
.blog-card .meta{display:flex;justify-content:space-between;align-items:center;
  padding:var(--sp-sm) var(--sp-sm) 0;font-size:var(--t-note);font-family:var(--font-latin)}
.tag{display:inline-block;border:1px solid currentColor;border-radius:var(--radius-pill);
  padding:0 var(--sp-xs);font-family:var(--font-ja);font-size:var(--t-micro);line-height:2}
.blog-card h3{font-size:var(--t-h4);font-weight:500;line-height:var(--lh-title);
  margin:0;padding:var(--sp-sm) var(--sp-sm) var(--sp-md)}
.blog-card h3 a{color:var(--fukamidori);text-decoration:none;transition:color var(--t-fast) var(--ease-fade)}
.blog-card h3 a:hover,.blog-card h3 a:focus-visible{color:var(--kakishibu)}
.more{text-align:right;margin-top:var(--sp-md)}

/* 10 お知らせ — リンクのある行だけ柿渋(GENERAL-RULES §4) */
.news{display:grid;grid-template-columns:1fr 2fr;gap:var(--sp-xl);align-items:start}
.news .o-title{margin-top:var(--sp-xs)}
.news ul{list-style:none;margin:0;padding:0}
.news li{display:flex;gap:var(--sp-sm);align-items:baseline;padding:var(--sp-sm) 0;
  border-bottom:1px solid var(--kawaishi);font-size:var(--t-body)}
.news time{font-family:var(--font-latin);font-size:var(--t-note);flex:0 0 auto}
.news li a{color:var(--kakishibu);text-decoration:none}
.news li a:hover{text-decoration:underline}

/* 11 法人・団体・パートナー — 写真が横のカード2枚。写真はホバーで少し寄る(TOP-PAGE.md 11) */
.biz-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-sm)}
.biz-card{display:grid;grid-template-columns:2fr 5fr;min-height:100%}
.biz-card .ph{overflow:hidden}
.biz-card .ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--t-slow) var(--ease-move)}
.biz-card:hover .ph img{transform:scale(1.06)}
.biz-card .tx{display:flex;flex-direction:column;padding:var(--sp-lg) 0 0 var(--sp-sm)}
.biz-card h3{font-family:var(--font-mincho);font-weight:600;font-size:var(--t-h3);margin:var(--sp-xs) 0 var(--sp-sm)}
.biz-card p{font-size:var(--t-note);line-height:var(--lh-body);margin:0 var(--sp-sm) var(--sp-sm) 0}
.biz-card .o-link-panel{align-self:flex-end;margin-top:auto}

/* 12 CTA */
.cta{text-align:center}
.cta .btn-row{margin-top:var(--sp-lg)}
.cta .o-note{margin-top:var(--sp-sm)}

/* プレビュー専用(公開物には出さない) */
.pv-bar{position:fixed;left:var(--sp-sm);bottom:var(--sp-sm);z-index:60;display:flex;gap:var(--sp-xs);
  align-items:center;background:var(--white);border:1px solid var(--kawaishi);border-radius:var(--radius-pill);
  padding:var(--sp-xs) var(--sp-sm);font-size:var(--t-note)}
.pv-bar a{color:var(--kakishibu)}
.pv-note{display:block;text-align:center;font-size:var(--t-micro);margin-top:var(--sp-sm);opacity:.8}

@media (max-width:1024px){
  .feature-grid,.blog-grid,.biz-grid{grid-template-columns:minmax(0,1fr)}
  .news{grid-template-columns:minmax(0,1fr);gap:var(--sp-lg)}
}
@media (max-width:768px){
  .flow{grid-template-columns:minmax(0,1fr)}
  .flow__arrow{transform:rotate(90deg);margin:0 auto}
  .biz-card{grid-template-columns:minmax(0,1fr)}
  .biz-card .ph{aspect-ratio:8/5}
  .about__card{padding-inline:var(--sp-sm)}
  .feature-grid{padding:0}
}

/* 05 体験は白の帯(build/experience-section.html は body の白に乗っている)。和紙・白の交互を保つ */
.exp{background:var(--white)}
/* フッター — エリアガイド等を載せる版は1列増える */
.o-footer--wide .inner{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1024px){.o-footer--wide .inner{grid-template-columns:minmax(0,1fr)}}
@media (max-width:768px){
  /* 中央見出しの左右の線は、狭い画面では見出しを押しつぶすので短くする */
  .about__card .o-title--center::before,.about__card .o-title--center::after{width:var(--sp-md)}
  .about__card{margin-top:var(--sp-lg);padding-top:var(--sp-lg)}
  .pv-bar{left:var(--sp-xs);right:var(--sp-xs);bottom:var(--sp-xs);justify-content:center}
}
.feature{text-align:center}

/* 四つの出会いが画面に貼り付いている間は、AIサポートのボタンを隠す(スマホで4枚目のカードに重なるため・2026-11-04 #5) */
html.is-enc-pinned .rc-toggle:not(.rc-open){opacity:0;pointer-events:none}
.rc-toggle{transition:opacity .2s}