/* ============================================================
   rivol Inc. corporate site
   ============================================================ */
:root{
  --pink:#f2aac6;
  --violet:#a9b4ec;
  --blue:#4aa7f3;
  --grad:linear-gradient(120deg,#f2aac6 0%,#a9b4ec 46%,#4aa7f3 100%);
  --grad-soft:linear-gradient(135deg,#fdf2f7 0%,#eef5fe 100%);
  --ink:#17181d;
  --ink-2:#5c6470;
  /* 補助テキスト。白地で 4.83:1、#f7f9fc 地で 4.58:1（WCAG AA の 4.5:1 を満たす）。
     以前の #9aa1ac は 2.60:1 でスマホでは読み取りづらかった */
  --ink-3:#6b7280;
  --line:#e8ebf0;
  /* --accent は罫線・フォーカスリング・ホバー枠などの「面や線」用。
     小さな文字に使うとコントラストが 2.91:1 しかないため、
     文字には必ず --accent-text（白地 5.20:1）を使うこと */
  --accent:#3f9cf0;
  --accent-text:#2170b4;
  --font-jp:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --font-en:"Outfit","Noto Sans JP",sans-serif;
  --header-h:88px;
  --logo:url("../img/logo.png");
  --mark:url("../img/mark.png");
  --logo-ratio:2.6759;
  --mark-ratio:0.9912;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-jp);
  color:var(--ink);
  background:#fff;
  line-height:1.9;
  letter-spacing:.03em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit}
.en{font-family:var(--font-en)}
.container{width:min(1120px,90%);margin-inline:auto}
::selection{background:#dcecfd}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.pc{display:inline}.sp{display:none}

/* gradient text */
.grad-text{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* brand edge line */
.edge-line{position:fixed;top:0;left:0;bottom:0;width:3px;background:var(--grad);z-index:140;pointer-events:none}

/* logo (background-image so the base64 is embedded only once) */
.logo-img{background:var(--logo) center/contain no-repeat;display:block}

/* ============ header ============ */
.header{position:fixed;top:0;left:0;right:0;z-index:120;transition:background .4s ease,box-shadow .4s ease}
.header-inner{width:min(1440px,94%);margin-inline:auto;height:var(--header-h);display:flex;align-items:center;justify-content:space-between}
.header.is-scrolled{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(23,24,29,.06)}
.logo{display:flex;align-items:center}
.logo .logo-img{height:34px;aspect-ratio:var(--logo-ratio)}
.gnav ul{display:flex;align-items:center;gap:34px}
.gnav li:last-child{margin-left:21px}   /* 34 + 21 = 55 ≒ 34×φ でボタンだけを離す */
.gnav a{font-family:var(--font-en);font-size:13px;font-weight:600;letter-spacing:.14em;position:relative;padding:6px 0;display:inline-block}
.gnav a:not(.gnav-contact)::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--grad);border-radius:2px;
  transform:scaleX(0);transform-origin:right center;transition:transform .35s ease;
}
.gnav a:not(.gnav-contact):hover::after{transform:scaleX(1);transform-origin:left center}
.gnav a.gnav-contact{
  display:inline-flex;align-items:center;justify-content:center;
  height:54px;                 /* 88 ÷ φ ≒ 54（ロゴ34 × φ ≒ 54 とも一致）*/
  padding:0 29px 0 32px;       /* 幅141 ÷ 高さ54 ≒ 2.61 ≒ φ²。右は字間ぶん詰めて光学的に中央へ */
  border-radius:999px;color:var(--ink);
  font-size:13.5px;font-weight:700;letter-spacing:.16em;line-height:1;
  background-image:var(--grad);background-size:200% 100%;background-position:0 50%;
  box-shadow:0 8px 20px -12px rgba(110,150,220,.9);
  transition:background-position .6s ease,box-shadow .35s ease,transform .35s ease;
}
.gnav a.gnav-contact:hover{background-position:100% 50%;box-shadow:0 16px 30px -12px rgba(110,150,220,.95);transform:translateY(-2px)}

/* hamburger */
/* padding は指で押せる 44px を確保するための値（26+2+2+6+6 の中身 ＋ 上下13px）。
   縮めるとタップ領域が Apple HIG の 44px を割る */
.menu-btn{display:none;flex-direction:column;gap:6px;background:none;border:none;cursor:pointer;padding:13px 9px}
.menu-btn span{width:26px;height:2px;background:var(--ink);border-radius:2px;transition:transform .35s,opacity .35s}
body.menu-open .menu-btn span:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.menu-open .menu-btn span:nth-child(2){opacity:0}
body.menu-open .menu-btn span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* mobile menu */
/* ▼ z-index は必ずヘッダー(120)より下に保つこと ▼
   .header は z-index:120 で積み重ねコンテキストを作るため、その中にある
   .menu-btn は何を指定してもヘッダーの 120 より上へ出られない。
   ここを 125 にするとメニューがヘッダーごと覆い、閉じるボタンが押せなくなる。 */
.mobile-menu{
  position:fixed;inset:0;background:#fff;z-index:110;
  display:flex;flex-direction:column;justify-content:center;padding:var(--header-h) 9% 0;
  opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s ease;overflow:hidden;
}
.mobile-menu::after{
  content:"";position:absolute;right:-70px;bottom:-70px;width:300px;aspect-ratio:var(--mark-ratio);
  background:var(--mark) center/contain no-repeat;opacity:.14;pointer-events:none;
}
body.menu-open .mobile-menu{opacity:1;visibility:visible}
body.menu-open{overflow:hidden}
.mobile-menu ul{display:grid;gap:4px;position:relative;z-index:1}
.mobile-menu a{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:16px 4px;border-bottom:1px solid var(--line);
}
.mobile-menu a>span{font-family:var(--font-en);font-size:22px;font-weight:700;letter-spacing:.14em}
.mobile-menu small{font-family:var(--font-jp);font-size:12px;font-weight:500;letter-spacing:.08em;color:var(--ink-3)}
.mobile-menu .is-contact>span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ============ buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:space-between;gap:16px;
  min-width:238px;padding:13px 15px 13px 26px;
  border:1.5px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);
  font-family:var(--font-en);font-size:13px;font-weight:600;letter-spacing:.16em;
  cursor:pointer;transition:background .35s,color .35s,border-color .35s;
}
.btn .icon{
  width:28px;height:28px;flex:none;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;transition:background .35s,color .35s,transform .35s;
}
.btn .icon svg{width:13px;height:13px}
.btn:hover{background:var(--ink);color:#fff}
.btn:hover .icon{background:var(--grad);color:#fff;transform:translateX(3px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark .icon{background:#fff;color:var(--ink)}
.btn-dark:hover{background:#fff;color:var(--ink)}
.btn-dark:hover .icon{background:var(--grad);color:#fff}

/* ============ hero ============ */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;background:#fff}
/* 画面を貫く水平線（ヒーローの基準線） */
.hero-rule{position:absolute;left:0;right:0;top:50%;height:1px;background:#dee2ea;z-index:1}
.hero-glow{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-glow::before{
  content:"";position:absolute;width:60vw;height:60vw;max-width:880px;max-height:880px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,170,198,.22),transparent 66%);top:-24%;right:2%;
}
.hero-glow::after{
  content:"";position:absolute;width:54vw;height:54vw;max-width:800px;max-height:800px;border-radius:50%;
  background:radial-gradient(circle,rgba(74,167,243,.18),transparent 66%);bottom:-26%;left:-6%;
}
/* キャッチの箱のぶんだけ線を抜く。--gap-l / --gap-r は main.js が実測して入れる。
   白で覆う方式だと、背景のグロー（淡い青）との差が白い矩形として見えてしまう。
   JSが動く前は下の .hero-catch の白背景が従来どおり線を隠すので、線が文字を横切ることはない。 */
.hero-rule{
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 var(--gap-l,0px),
    transparent var(--gap-l,0px),transparent var(--gap-r,0px),#000 var(--gap-r,0px),#000 100%);
  mask-image:linear-gradient(to right,#000 0,#000 var(--gap-l,0px),
    transparent var(--gap-l,0px),transparent var(--gap-r,0px),#000 var(--gap-r,0px),#000 100%);
}
/* 中央の円とロゴマーク */
.hero-stage{
  position:absolute;top:50%;left:53%;transform:translate(-50%,-50%);
  width:min(52vh,34vw,460px);aspect-ratio:1;z-index:2;
}
.hero-mark{
  position:absolute;inset:2%;
  background:var(--mark) center/contain no-repeat;
  filter:drop-shadow(0 30px 56px rgba(120,150,220,.26));
  animation:heroFloat 9s ease-in-out infinite;
}
@keyframes heroFloat{
  0%,100%{transform:translateY(-10px) rotate(-2deg)}
  50%{transform:translateY(10px) rotate(2deg)}
}
/* 左：基準線上に載るキャッチコピー */
.hero-copy{position:absolute;left:max(5%,calc(50% - 700px));top:50%;transform:translateY(-50%);z-index:4;max-width:min(50vw,600px)}
.hero-catch{
  display:inline-block;background:#fff;padding:4px 24px 4px 0;
  font-size:clamp(26px,3.4vw,44px);font-weight:900;line-height:1.5;letter-spacing:.06em;
}
/* main.js が線を抜き終えたら白背景は不要になる。padding-right は
   線が再開するまでの間隔として引き続き効いている */
.hero-cut .hero-catch{background:transparent}
.hero-catch .arrow{
  display:inline-block;margin:0 .06em;font-weight:700;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:arrowNudge 3s ease-in-out infinite;
}
@keyframes arrowNudge{0%,74%,100%{transform:translateX(0)}84%{transform:translateX(.1em)}}
.hero-catch-en{
  display:block;margin-top:.3em;
  font-size:.52em;font-weight:600;letter-spacing:.12em;color:var(--ink-2);
}
.hero-under{position:absolute;top:100%;left:0;width:max-content;max-width:min(46vw,520px);margin-top:32px}
.hero-sub{font-size:14.5px;line-height:2.15;color:var(--ink-2)}
.hero-btns{margin-top:32px}
/* 右：1語ずつ入れ替わるキーワード列 */
.hero-words{
  position:absolute;top:50%;right:max(4%,calc(50% - 700px));transform:translateY(-50%);z-index:3;
  font-size:clamp(17px,2vw,30px);
  height:20.3em;overflow:hidden;text-align:right;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 30%,#000 70%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 30%,#000 70%,transparent 100%);
}
/* 階調は「窓」ではなく、動くリスト自身に持たせる。
   窓（.hero-words）側に background-clip:text を置くと、Chrome / Safari は
   中の要素が動いても切り抜き結果を再描画せず、止まって見える（Firefoxは動く）。
   そのぶん階調がリストと一緒に動いてしまうので、1語送るたびに背景を
   同じ量だけ下げて相殺し、画面上では階調が静止しているように見せている。 */
.hero-words ul{
  background-image:linear-gradient(to bottom,var(--pink) 0%,var(--violet) 32%,var(--ink) 50%,var(--blue) 68%,var(--violet) 100%);
  background-size:100% 20.3em;   /* 窓と同じ高さ＝7語ぶん。リストは2周なのでちょうど2枚ぶん敷かれる */
  background-repeat:repeat-y;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:wordStep 17.5s cubic-bezier(.72,0,.18,1) infinite;
}
.hero-words li{
  font-family:var(--font-en);font-size:1em;font-weight:400;
  letter-spacing:.24em;line-height:1;white-space:nowrap;
  height:2.9em;display:flex;align-items:center;justify-content:flex-end;
}
/* 1語ぶん送って静止、を7語ぶん繰り返す（-20.3em＝リストの半分で継ぎ目なくループ）。
   background-position は translateY と必ず同じ量・逆向きにすること。
   ずれると階調がリストに引きずられ、中央の語が黒く締まらなくなる。 */
@keyframes wordStep{
  0%,10%{transform:translateY(0);background-position:0 0}
  14.2857%,24.2857%{transform:translateY(-2.9em);background-position:0 2.9em}
  28.5714%,38.5714%{transform:translateY(-5.8em);background-position:0 5.8em}
  42.8571%,52.8571%{transform:translateY(-8.7em);background-position:0 8.7em}
  57.1429%,67.1429%{transform:translateY(-11.6em);background-position:0 11.6em}
  71.4286%,81.4286%{transform:translateY(-14.5em);background-position:0 14.5em}
  85.7143%,95.7143%{transform:translateY(-17.4em);background-position:0 17.4em}
  100%{transform:translateY(-20.3em);background-position:0 20.3em}
}
/* スクロールサイン */
.scroll-sign{position:absolute;bottom:0;left:max(5%,calc(50% - 700px));z-index:4;display:flex;flex-direction:column;align-items:center;gap:12px}
.scroll-sign span{font-size:10px;font-weight:500;letter-spacing:.3em;color:var(--ink-3);writing-mode:vertical-rl}
.scroll-sign i{display:block;width:1px;height:64px;background:var(--line);position:relative;overflow:hidden}
.scroll-sign i::after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;background:var(--grad);animation:scrollLine 2.2s ease-in-out infinite}
@keyframes scrollLine{0%{top:-100%}55%{top:0}100%{top:100%}}

/* ============ sections (common) ============ */
.sec{padding:140px 0;scroll-margin-top:var(--header-h);position:relative}
.sec-alt{background:#f7f9fc}
.sec-num{width:32px;margin-bottom:28px}
.sec-num hr{border:0;height:2px;background:var(--accent);margin:0 0 6px}
.sec-num span{font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--accent-text)}
.sec-title{
  font-family:var(--font-en);font-weight:800;line-height:1.1;
  font-size:clamp(34px,4.8vw,56px);letter-spacing:.05em;margin-bottom:48px;
}
.sec-catch{font-size:clamp(23px,3vw,34px);font-weight:700;line-height:1.75;letter-spacing:.06em}
.sec-lead{margin-top:22px;font-size:15px;line-height:2.2;color:var(--ink-2);max-width:660px}
/* 短いリード文・見出しは行長を揃える。これが無いとスマホで最終行に
   「す。」の2文字だけが残る。未対応のブラウザでは単に無視される */
/* .hero-sub は入れない。br で切る位置が決まっているため、balance を足すと
   かえって「WEBマーケティン／グ」のように語の途中で割れる（実測） */
.sec-catch,.sec-lead,.contact-catch,.contact-text,.biz-title,
.about-body p,.biz-card>p{text-wrap:balance}

/* ============ about ============ */
.about-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:7%;align-items:start;margin-top:6px}
.about-deco{
  width:96px;aspect-ratio:var(--mark-ratio);margin-top:38px;
  background:var(--mark) center/contain no-repeat;
  animation:spinSlow 28s linear infinite;
}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.about-body p{font-size:15.5px;line-height:2.35;color:#2a2e36}
.about-body p+p{margin-top:30px}

/* ============ business ============ */
.biz-head{margin-bottom:60px}
.biz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.biz-card{
  position:relative;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:26px;
  padding:46px 34px 38px;display:flex;flex-direction:column;gap:18px;
  transition:transform .45s cubic-bezier(.22,.65,.3,1),box-shadow .45s ease;
}
.biz-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:var(--grad)}
.biz-card:hover{transform:translateY(-8px);box-shadow:0 26px 48px -22px rgba(90,120,190,.3)}
.biz-num{font-family:var(--font-en);font-size:36px;font-weight:700;letter-spacing:.06em;line-height:1}
.biz-title{font-size:21px;font-weight:700;letter-spacing:.04em;line-height:1.5}
.biz-title small{display:block;margin-top:8px;font-family:var(--font-en);font-size:12px;font-weight:600;letter-spacing:.22em;color:var(--ink-2)}
.biz-card>p{font-size:14.5px;line-height:2.15;color:#3a3f47;flex:1}
.biz-tags{display:flex;flex-wrap:wrap;gap:8px}
.biz-tags li,
.sitemap-sub li{
  font-size:12px;letter-spacing:.03em;color:#4a5160;
  padding:7px 14px;border-radius:999px;border:1px solid #eceff6;background:var(--grad-soft);
}

/* ============ news ============ */
.news-filter{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px}
.filter-btn{
  font-size:13px;letter-spacing:.03em;color:var(--ink-2);
  padding:9px 20px;border-radius:999px;border:1px solid var(--line);background:#fff;
  cursor:pointer;transition:border-color .3s,color .3s,background .3s;
}
.filter-btn:hover{border-color:var(--accent);color:var(--accent-text)}
.filter-btn.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
.news-list{border-top:1px solid var(--line)}
.news-item.is-hidden{display:none}
/* 詳細ページがある記事は <a>、無い記事は <div class="news-body">。
   どちらも同じ行に見えるようレイアウトを共有する */
.news-item>a,
.news-item>.news-body{
  display:grid;grid-template-columns:118px 148px 1fr 34px;gap:20px;align-items:center;
  padding:28px 8px;border-bottom:1px solid var(--line);transition:background .3s;
}
.news-item time{font-family:var(--font-en);font-size:14px;font-weight:500;letter-spacing:.08em;color:var(--ink-2)}
.news-cat{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2)}
.news-cat i{width:6px;height:6px;border-radius:50%;background:var(--grad);flex:none}
.news-item p{font-size:15px;font-weight:500;line-height:1.9;transition:color .3s}
.news-arrow{
  width:30px;height:30px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;color:var(--ink);transition:background .3s,color .3s,border-color .3s;
}
.news-arrow svg{width:12px;height:12px}
.news-item>a:hover{background:#fafbfe}
.news-item>a:hover p{color:var(--accent-text)}
.news-item>a:hover .news-arrow{background:var(--ink);border-color:var(--ink);color:#fff}
/* 絞り込みで1件も残らなかったときの表示。無いと空欄になり壊れて見える */
.news-empty{
  padding:34px 8px;font-size:14.5px;color:var(--ink-2);
  border-bottom:1px solid var(--line);
}
.news-more{margin-top:44px;display:flex;justify-content:flex-end}

/* ============ company ============ */
.profile{margin-top:10px;border-top:1px solid var(--line);max-width:880px}
.profile>div{display:grid;grid-template-columns:200px 1fr;gap:20px;padding:26px 8px;border-bottom:1px solid var(--line)}
.profile dt{font-size:14px;font-weight:600;letter-spacing:.08em;color:var(--ink-2);padding-top:3px}
.profile dd{font-size:15px;line-height:2.05}
.profile .note{display:block;font-size:12px;color:var(--ink-3);margin-top:4px}

/* ============ contact ============ */
.contact-box{
  position:relative;overflow:hidden;text-align:center;
  background:var(--grad-soft);border:1px solid #f0f2f8;border-radius:36px;
  padding:clamp(56px,8vw,96px) 8%;
}
.contact-box::before{
  content:"";position:absolute;right:-110px;bottom:-140px;width:420px;aspect-ratio:var(--mark-ratio);
  background:var(--mark) center/contain no-repeat;opacity:.13;transform:rotate(14deg);pointer-events:none;
}
.contact-inner{position:relative;z-index:1}
.contact-catch{font-size:clamp(24px,3.4vw,36px);font-weight:700;letter-spacing:.06em;line-height:1.7}
.contact-text{margin-top:18px;font-size:14.5px;line-height:2.25;color:var(--ink-2)}
.contact-box .btn{margin-top:42px}

/* ============ footer ============ */
.footer{border-top:1px solid var(--line);padding-top:72px;background:#fff}
.footer-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:48px;flex-wrap:wrap;padding-bottom:60px}
.footer-brand .logo-img{height:46px;aspect-ratio:var(--logo-ratio)}
.footer-brand p{margin-top:20px;font-size:13px;letter-spacing:.1em;color:var(--ink-2)}
.footer-nav{display:flex;flex-wrap:wrap;gap:14px 30px}
.footer-nav a{font-size:13.5px;font-weight:500;transition:color .3s}
.footer-nav a:hover{color:var(--accent-text)}
.footer-small{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:28px}
.footer-small a{font-size:12px;color:var(--ink-2);transition:color .3s}
.footer-small a:hover{color:var(--accent-text)}
.copyright{border-top:1px solid var(--line);padding:22px 0;text-align:center;font-size:12px;letter-spacing:.14em;color:var(--ink-3)}

/* ============ sitemap page ============ */
/* 下層ページはヒーローを持たないので、固定ヘッダーのぶんだけ上を空ける */
.page{padding:calc(var(--header-h) + 92px) 0 130px}
.page .sec-title{margin-bottom:16px}
.page-lead{font-size:14.5px;line-height:2.15;color:var(--ink-2);margin-bottom:58px}
.sitemap-list{border-top:1px solid var(--line);max-width:880px}
.sitemap-list>li{border-bottom:1px solid var(--line)}
.sitemap-list>li>a{
  display:grid;grid-template-columns:1fr 30px;gap:20px;align-items:center;
  padding:24px 8px;transition:background .3s;
}
.sitemap-label .ja{display:block;font-size:16px;font-weight:600;letter-spacing:.04em;transition:color .3s}
.sitemap-label .lb{
  display:block;margin-top:4px;
  font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--ink-3);
}
.sm-arrow{
  width:30px;height:30px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;color:var(--ink);transition:background .3s,color .3s,border-color .3s;
}
.sm-arrow svg{width:12px;height:12px}
.sitemap-list>li>a:hover{background:#fafbfe}
.sitemap-list>li>a:hover .ja{color:var(--accent-text)}
.sitemap-list>li>a:hover .sm-arrow{background:var(--ink);border-color:var(--ink);color:#fff}
/* 事業の内訳。リンク先は同じ #business なので、あえてリンクにしない */
.sitemap-sub{display:flex;flex-wrap:wrap;gap:8px;margin-top:-4px;padding:0 8px 24px}
.sitemap-other-title{
  margin:64px 0 20px;
  font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--accent-text);
}
.sitemap-list-sm .sitemap-label .ja{font-size:14.5px;font-weight:500}
.sitemap-list-sm>li>a{padding:19px 8px}

/* ============ 規約・ポリシー本文 ============ */
.legal{max-width:820px}
.legal>p{font-size:14.5px;line-height:2.15;color:#2a2e36}
.legal>p+p{margin-top:14px}
.legal h2{
  font-size:16.5px;font-weight:700;letter-spacing:.04em;line-height:1.7;
  margin:52px 0 16px;padding-top:30px;border-top:1px solid var(--line);
}
.legal h2:first-of-type{margin-top:44px}
/* 条文の項目。「（1）」のぶんだけぶら下げて、折り返しても頭が揃うようにする */
.legal-list{margin:12px 0 0;display:grid;gap:11px}
.legal-list li{
  font-size:14.5px;line-height:2.05;color:#2a2e36;
  padding-left:2.7em;text-indent:-2.7em;
}
.legal-dl{margin:16px 0 0;border-top:1px solid var(--line)}
.legal-dl>div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:16px 4px;border-bottom:1px solid var(--line)}
.legal-dl dt{font-size:13.5px;font-weight:600;letter-spacing:.06em;color:var(--ink-2)}
.legal-dl dd{font-size:14.5px;line-height:1.95}
.legal-dl .note{display:block;font-size:12px;color:var(--ink-3);margin-top:4px}
/* 表の下端の罫線と、次の条の見出しの罫線が二重に見えるのを防ぐ */
.legal-dl + h2{border-top:0;padding-top:0}
/* リストや表のすぐ後に続く項（「3　お客様は…」など）が詰まって見えないように */
.legal-list + p,
.legal-dl + p{margin-top:16px}
.legal-dl dt{white-space:nowrap}
.legal-date{margin-top:52px;padding-top:26px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--ink-2)}

/* ============ 準備中・送信完了 ============ */
.prep{
  max-width:820px;margin-top:8px;
  background:var(--grad-soft);border:1px solid #f0f2f8;border-radius:26px;
  padding:clamp(38px,6vw,62px) clamp(24px,5vw,54px);
}
.prep-title{font-size:clamp(19px,2.6vw,24px);font-weight:700;letter-spacing:.05em;line-height:1.7}
.prep p:not(.prep-title){margin-top:16px;font-size:14.5px;line-height:2.15;color:var(--ink-2)}
.prep .btn{margin-top:34px}

/* ============ フォーム ============ */
.form{max-width:640px;margin-top:8px}
.form-row{margin-bottom:30px}
.form-label{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:14px;font-weight:600;letter-spacing:.04em}
.req,.opt{
  font-size:11px;font-weight:700;letter-spacing:.08em;line-height:1;
  padding:5px 8px;border-radius:4px;
}
.req{background:#fdeaf1;color:#b03a68}      /* 白地 4.72:1 */
.opt{background:#eef1f6;color:var(--ink-2)}
.form input,
.form select,
.form textarea{
  width:100%;font-family:inherit;font-size:16px;   /* iOS で自動ズームさせないため16px */
  line-height:1.7;color:var(--ink);
  padding:14px 16px;min-height:52px;               /* タップ領域44px以上 */
  background:#fff;border:1px solid #d9dee7;border-radius:12px;
  transition:border-color .3s,box-shadow .3s;
}
.form textarea{min-height:180px;resize:vertical}
.form select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:44px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),
                   linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 21px) 50%,calc(100% - 15px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.form input:hover,.form select:hover,.form textarea:hover{border-color:#b9c2d0}
.form input:focus,.form select:focus,.form textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(63,156,240,.14);outline:none;
}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.form ::placeholder{color:#98a1af}    /* 白地 3.24:1。装飾的な例示なので本文色とは別扱い */
.form-help{margin-top:8px;font-size:12.5px;line-height:1.8;color:var(--ink-2)}
.form-note{
  margin-top:6px;padding:18px 20px;border-radius:14px;background:#f7f9fc;
  font-size:13px;line-height:2;color:var(--ink-2);
}
.form-submit{margin-top:34px}
.form-submit .btn{border:1.5px solid var(--ink)}

@media (max-width:760px){
  .form-row{margin-bottom:24px}
  .prep .btn{margin-top:28px}
}

/* ============ reveal ============ */
.js .reveal{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.22,.65,.3,1),transform .9s cubic-bezier(.22,.65,.3,1)}
.js .reveal.is-visible{opacity:1;transform:none}
.js .biz-card.reveal:nth-child(2){transition-delay:.12s}
.js .biz-card.reveal:nth-child(3){transition-delay:.24s}

/* ============ responsive ============ */
@media (max-width:1280px){
  .hero-copy{left:5%}
  .hero-stage{left:55%;width:min(44vh,30vw,390px)}
  .hero-words{right:3.5%}
  .scroll-sign{left:5%}
}
@media (max-width:900px){
  .hero-words{display:none}
  .hero-stage{left:auto;right:-8%;transform:translateY(-50%);width:min(62vw,420px)}
  .hero-copy{max-width:min(74vw,560px)}
}
@media (max-width:900px){
  :root{--header-h:72px}
  .gnav{display:none}
  .menu-btn{display:flex}
  .logo .logo-img{height:30px}
  .about-grid{grid-template-columns:1fr;gap:40px}
  .about-deco{display:none}
}
@media (max-width:960px){
  .biz-grid{grid-template-columns:1fr}
}

/* ▼ タップ領域を44px以上に保つための余白（Apple HIG）。指で操作する範囲＝
   グローバルナビが隠れる900px以下に合わせている。横向きスマホもここに入る。
   余白を足したぶん行間が開くので、gap 側で相殺している ▼ */
@media (max-width:900px){
  .footer-nav{gap:0 30px}
  .footer-nav a{display:inline-block;padding:12px 0}
  .footer-small{gap:0 24px;margin-top:16px}
  .footer-small a{display:inline-block;padding:13px 0}
  .filter-btn{padding:12px 20px}
  .logo{padding:7px 0}
}
@media (max-width:760px){
  .pc{display:none}.sp{display:inline}
  .sec{padding:96px 0}
  .sec-title{margin-bottom:36px}
  .hero{min-height:560px}
  .hero-stage{top:27%;right:-20%;width:60vw}
  .hero-copy{left:6%;max-width:88%}
  .hero-catch{padding-right:16px}
  .hero-under{margin-top:26px;max-width:82vw}
  .hero-sub{font-size:13.5px;line-height:2.05}
  .hero-btns{margin-top:26px}
  .btn{min-width:210px}
  .scroll-sign{display:none}
  .news-item>a,.news-item>.news-body{display:flex;flex-wrap:wrap;gap:6px 18px;padding:22px 4px}
  .news-empty{padding:26px 4px;font-size:14px}
  .news-item p{width:100%;font-size:14.5px;margin-top:2px}
  .news-arrow{display:none}
  .profile>div{grid-template-columns:1fr;gap:6px;padding:20px 4px}
  .profile dt{padding-top:0}
  /* 中央揃えの長文はスマホだと両端が不揃いで読みづらいので左揃えにする */
  .contact-box{border-radius:26px;text-align:left}
  .contact-box::before{width:240px;right:-80px;bottom:-90px}
  .footer-inner{flex-direction:column;gap:40px}
  .news-more{justify-content:flex-start}
  .page{padding:calc(var(--header-h) + 60px) 0 96px}
  .page-lead{margin-bottom:44px}
  .sitemap-list>li>a{padding:20px 4px}
  .sitemap-sub{padding:0 4px 20px}
  .sitemap-list-sm>li>a{padding:17px 4px}
  .sitemap-other-title{margin-top:52px}
  .legal h2{font-size:15.5px;margin:40px 0 14px;padding-top:24px}
  .legal>p,.legal-list li{font-size:14px}
  .legal-list li{padding-left:2.5em;text-indent:-2.5em}
  .legal-dl>div{grid-template-columns:1fr;gap:4px;padding:14px 2px}
  .legal-date{margin-top:40px}
}

@media (max-width:400px){
  .hero-stage{top:23%;width:56vw}
}

/* 縦に余裕のあるスマホ（iPhone 14 以降など）では、ボタンの下に200px近い空白が
   残って間延びするので SCROLL を出す。760px 前後の短い端末で出すと
   ボタンと重なるため、min-height で条件を付けている（実測で確認済み） */
@media (max-width:760px) and (min-height:780px){
  .scroll-sign{display:flex;gap:8px}
  .scroll-sign i{height:44px}
}

/* 横向きのスマホ。min-height:640px のままだとキャッチが画面下端に来て、
   リード文とボタンが画面外に押し出されるため、ヒーローを詰める */
@media (max-height:540px) and (orientation:landscape){
  .hero{min-height:0}          /* 100svh ちょうどに収め、リード文とボタンを画面内に残す */
  .hero-catch{font-size:clamp(24px,4.2vh,34px)}
  .hero-under{margin-top:18px}
  .hero-btns{margin-top:18px}
  .hero-stage{width:min(42vw,300px)}
  .scroll-sign{display:none}
}

/* ============ reduced motion ============ */
/* OSの「視差効果を減らす」設定に配慮しつつ、キーワードの巡回だけは
   “滑らかな移動”をやめて瞬時の切り替えにすることで内容を伝え続ける */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .reveal{opacity:1;transform:none}
  .hero-words ul{animation:wordStep 17.5s steps(1,end) infinite!important}
}