/* デザイン案C: 空色一色・白い雲・巨大な社名・黒の小さな文字 */
:root {
  --sky: #24a8fe;
  --sky-pale: #e8f5ff;
  --white: #ffffff;
  --ink: #0b0b0c;
  --ink-mute: #3a4450;
  --max: 1480px;
  --gut: clamp(18px, 3.4vw, 56px);
  --display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--sky); }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--jp);
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .02em;
  word-break: auto-phrase;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
.en { font-family: var(--display); letter-spacing: -.01em; }
.spaced { font-family: var(--display); font-size: 12px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; line-height: 1.6; }

/* ---------- header ---------- */
.header { position: absolute; inset: 0 0 auto 0; z-index: 30; }
.header > .wrap { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.logo { font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -.04em; }
.nav { display: flex; gap: clamp(24px, 3.2vw, 56px); font-size: 14px; font-weight: 500; }
.nav a { position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
/* スマホ用メニュー: <details> の開閉だけで動く（JavaScript不要） */
.menu-box { display: none; }
.menu-btn { position: relative; z-index: 2; list-style: none; padding: 8px 0; font: 600 16px var(--display); cursor: pointer; }
.menu-btn::-webkit-details-marker { display: none; }
.menu-box .when-open, .menu-box[open] .when-closed { display: none; }
.menu-box[open] .when-open { display: inline; }
.menu { position: fixed; inset: 0; z-index: 1; background: var(--sky); padding-top: 100px; overflow-y: auto; }
.menu nav { display: grid; border-top: 2px solid var(--ink); }
.menu nav a { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 2px solid var(--ink); font-size: 19px; font-weight: 700; }
.menu nav small { font: 500 14px var(--display); }
.menu-mail { margin: 24px 0; font: 600 17px var(--display); }
.header:has(.menu-box[open]) { position: fixed; }
.header .logo { position: relative; z-index: 2; }

/* ---------- clouds ---------- */
.cloud { position: absolute; display: block; aspect-ratio: 220 / 120; background: url("cloud.svg") center / contain no-repeat; pointer-events: none; }

/* ---------- hero (home) ---------- */
/* 雲は「ロゴの上の帯」「ロゴの下の帯」に分けて置き、白いロゴと重ねない */
.hero { position: relative; background: var(--sky); min-height: max(680px, min(100svh, 1000px)); overflow: hidden; display: flex; flex-direction: column; }
.hero-sky { position: relative; flex: 1 1 0; width: 100%; max-width: var(--max); margin: 0 auto; }
.hero-sky.top { min-height: 340px; }
.hero-sky.bottom { min-height: 270px; }
.hero .c1 { width: min(30vw, 44vh, 470px); left: 12%; bottom: 10px; }
.hero .c2 { width: min(13.5vw, 20vh, 210px); left: calc(12% + min(31vw, 46vh, 490px)); bottom: 24px; }
.hero .c3 { width: min(12.5vw, 18vh, 190px); right: 4%; top: 24px; }
.hero .c4 { width: min(36vw, 52vh, 560px); left: 53%; bottom: max(-11vh, -90px); }
.hero-copy { position: absolute; right: var(--gut); top: 128px; width: min(250px, 30vw); z-index: 2; }
.hero-copy h1 { margin: 0; font: 700 clamp(22px, 2vw, 30px)/1.12 var(--display); letter-spacing: -.01em; }
.hero-copy p { margin: 18px 0 0; font-size: 14px; line-height: 1.8; }
.hero > .wrap { width: 100%; }
.hero-mark { position: relative; z-index: 1; }
.hero-mark, .footer .wrap { container-type: inline-size; }
.wordmark { margin: 0; font-family: var(--display); font-weight: 800; color: var(--white); font-size: 26.9cqi; line-height: .8; letter-spacing: -.055em; white-space: nowrap; margin-left: -.03em; overflow: hidden; }
.hero-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 40px; }
.hero-foot .rule { display: block; width: 40px; height: 1px; background: var(--ink); margin: 26px 0; }
.scroll { text-align: center; }
.scroll::after { content: ""; display: block; width: 1px; height: 48px; background: var(--ink); margin: 10px auto 0; }

/* ---------- page hero ---------- */
.phero { position: relative; background: var(--sky); overflow: hidden; padding: clamp(200px, 17vw, 250px) 0 clamp(56px, 6vw, 96px); }
/* 雲は見出しより上の帯にだけ置き、白い文字と重ねない */
.phero .c1 { width: min(17%, 240px); right: 5%; top: 92px; }
.phero .c2 { width: min(8%, 110px); right: calc(5% + min(19%, 270px)); top: 140px; }
.phero .wrap { position: relative; z-index: 1; }
.phero h1 { margin: 12px 0 0; font-size: clamp(30px, 4.4vw, 68px); line-height: 1.2; font-weight: 700; letter-spacing: .01em; color: var(--white); }
.phero .lead { margin: 22px 0 0; max-width: 36em; font-size: 15px; font-weight: 500; }
.crumbs { font-size: 13px; margin-bottom: 6px; }
.crumbs a { border-bottom: 1px solid currentColor; }
.crumbs span { margin: 0 8px; }

/* ---------- sections ---------- */
.sec { padding: clamp(72px, 8vw, 128px) 0; }
.sec.sky { background: var(--sky); }
.sec.pale { background: var(--sky-pale); }
.sec.flush { padding-top: 0; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-bottom: 18px; border-bottom: 2px solid var(--ink); }
.sec-head h2 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .04em; }
.big { margin: clamp(32px, 4vw, 56px) 0 0; font-size: clamp(22px, 2.8vw, 42px); line-height: 1.45; font-weight: 700; letter-spacing: .01em; }
.big .w { color: var(--sky); }
.sky .big .w { color: var(--white); }
.body-text { max-width: 38em; margin: clamp(20px, 2.4vw, 32px) 0 0; font-size: 15px; color: var(--ink-mute); }
.sky .body-text { color: var(--ink); }
.btn { display: inline-flex; align-items: center; gap: 12px; margin-top: 36px; padding: 8px 0; border-bottom: 2px solid var(--ink); font-weight: 700; font-size: 14px; }
.btn i { font-style: normal; font-family: var(--display); transition: transform .35s var(--ease); }
.btn:hover i, a:hover .btn i { transform: translateX(6px); }

/* ---------- service rows ---------- */
.rows { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; border-top: 2px solid var(--ink); }
.rows a { display: grid; grid-template-columns: 1fr minmax(0, 34em) 44px; gap: clamp(16px, 3vw, 48px); align-items: center; padding: clamp(20px, 2.2vw, 30px) 0; border-bottom: 2px solid var(--ink); transition: background-color .3s, padding .4s var(--ease); }
.rows h3 { margin: 0; font-size: clamp(18px, 1.8vw, 26px); line-height: 1.4; font-weight: 700; }
.rows h3 small { display: block; margin-bottom: 8px; }
.rows p { margin: 0; font-size: 14px; color: var(--ink-mute); }
.rows .arrow { justify-self: end; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; font-family: var(--display); font-size: 20px; transition: background-color .3s, color .3s; }
.rows a:hover { background: var(--sky); padding-left: 20px; padding-right: 20px; }
.rows a:hover p { color: var(--ink); }
.rows a:hover .arrow { background: var(--ink); color: var(--white); }

/* ---------- cloud band ---------- */
.band { position: relative; background: var(--sky); overflow: hidden; padding: clamp(100px, 11vw, 170px) 0; text-align: center; }
.band .c1 { width: 15%; left: 3%; top: 8%; }
.band .c2 { width: 8%; left: 8%; bottom: 10%; }
.band .c3 { width: 18%; right: 2%; bottom: -8%; }
.band .wrap { position: relative; z-index: 1; }
.band h2 { margin: 0; font: 800 clamp(30px, 4.6vw, 76px)/1.05 var(--display); letter-spacing: -.045em; color: var(--white); }
.band p { margin: 22px 0 0; font-size: 15px; font-weight: 500; }

/* ---------- principles / steps ---------- */
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); margin-top: clamp(40px, 5vw, 72px); }
.col { background: var(--white); border: 2px solid var(--ink); border-radius: 24px; padding: clamp(24px, 2.6vw, 40px); }
.col h3 { margin: 14px 0 10px; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5; font-weight: 700; }
.col p { margin: 0; font-size: 14px; color: var(--ink-mute); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px); margin-top: clamp(40px, 5vw, 72px); }
.step { border-top: 3px solid var(--ink); padding-top: 18px; }
.step h3 { margin: 0 0 8px; font-size: clamp(16px, 1.3vw, 19px); font-weight: 700; }
.step p { margin: 0; font-size: 14px; color: var(--ink-mute); }

/* ---------- service detail ---------- */
.intro { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 5vw, 96px); margin-top: clamp(40px, 5vw, 72px); align-items: start; }
.intro-lead { margin: 0; font-size: clamp(20px, 2.2vw, 32px); line-height: 1.5; font-weight: 700; }
.intro-body p { margin: 0 0 18px; font-size: 15px; color: var(--ink-mute); }
.scope { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.scope li { background: var(--white); border-radius: 999px; padding: 14px 24px; font-weight: 500; font-size: 15px; border: 2px solid var(--ink); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(32px, 4vw, 56px); }
.card { display: flex; flex-direction: column; justify-content: space-between; min-height: 190px; background: var(--sky); border-radius: 24px; padding: 28px; position: relative; overflow: hidden; transition: transform .35s var(--ease); }
.card > div { max-width: 70%; position: relative; z-index: 1; }
.card::after { content: ""; position: absolute; width: 34%; aspect-ratio: 220 / 120; right: -6%; bottom: -12%; background: url("cloud.svg") center / contain no-repeat; }
.card:hover { transform: translateY(-4px); }
.card h3 { margin: 8px 0 0; font-size: clamp(16px, 1.3vw, 19px); font-weight: 700; line-height: 1.4; position: relative; z-index: 1; }
.card .btn { margin-top: 24px; position: relative; z-index: 1; align-self: flex-start; padding: 6px 0; }

/* ---------- prose ---------- */
.prose { max-width: 860px; }
.prose p { font-size: 15px; line-height: 2; margin: 0 0 22px; color: var(--ink-mute); }
.prose h2 { font-size: 17px; font-weight: 700; margin: 48px 0 12px; }
.prose a { border-bottom: 2px solid var(--sky); }

/* ---------- company ---------- */
.profile { margin: 0; border-top: 2px solid var(--ink); }
.profile > div { display: grid; grid-template-columns: minmax(120px, 3fr) 9fr; gap: 24px; padding: 20px 0; border-bottom: 2px solid var(--ink); }
.profile dt { font-weight: 700; font-size: 14px; }
.profile dd { margin: 0; font-size: 15px; line-height: 1.8; }
.profile .note { display: block; font-size: 13px; color: var(--ink-mute); margin-top: 4px; }
.profile a { border-bottom: 2px solid var(--sky); }

/* ---------- footer ---------- */
.footer { position: relative; background: var(--sky); overflow: hidden; padding-top: clamp(150px, 14vw, 220px); }
.footer .c1 { width: min(14%, 200px); right: 5%; top: 28px; }
.footer-top { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; font-size: 13px; }
.footer-top h4 { margin: 0 0 12px; }
.footer-top p { margin: 0; }
.footer-top nav { display: grid; gap: 4px; align-content: start; }
.footer-top a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-mail { font: 700 clamp(19px, 1.8vw, 26px)/1.2 var(--display); letter-spacing: -.02em; }
.footer .wordmark { margin-top: clamp(56px, 7vw, 112px); }
.footer-bottom { display: flex; justify-content: space-between; padding: 22px 0 26px; }

/* ---------- 404 ---------- */
.nf { min-height: 100svh; display: grid; place-items: center; text-align: center; background: var(--sky); padding: 24px; }
.nf h1 { margin: 0 0 16px; font-size: clamp(32px, 5vw, 56px); font-weight: 900; color: var(--white); }
.nf a { border-bottom: 2px solid currentColor; font-weight: 700; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .nav { display: none; }
  .menu-box { display: block; }
}
@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero-sky { flex: none; }
  .hero-foot { position: relative; padding-top: 24px; }
  .hero-foot .scroll { display: none; }
  .hero-sky.top { min-height: 0; padding-bottom: 150px; }
  .hero-sky.bottom { min-height: 0; padding-top: 110px; }
  .hero-copy { position: relative; right: auto; top: auto; width: auto; padding: 110px var(--gut) 0; }
  .hero .c1 { width: 46%; left: auto; right: 6%; bottom: 14px; }
  .hero .c2 { width: 18%; left: 8%; bottom: 20px; }
  .hero .c3 { width: 22%; top: 14px; }
  .hero .c4 { width: 52%; left: 46%; bottom: -46px; }
  .hero .c3 { top: 18px; right: 6%; }
  .rows a { grid-template-columns: 1fr 44px; }
  .rows p { grid-column: 1; }
  .rows .arrow { grid-column: 2; grid-row: 1 / 3; width: 44px; height: 44px; }
  .cols, .cards, .intro { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .scope { grid-template-columns: 1fr; }
  .profile > div { grid-template-columns: 1fr; gap: 4px; padding: 22px 0; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .phero .c2 { display: none; }
  .phero .c1 { width: 34%; right: 4%; top: 84px; }
}
@media (max-width: 560px) {
  .header > .wrap { height: 68px; }
  .logo { font-size: 21px; }
  .hero-foot .rule, .hero-foot .scroll { display: none; }
  .steps { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .band .c2 { display: none; }
  .band .c1 { width: 26%; top: 4%; }
  .band .c3 { width: 30%; bottom: -6%; }
}
.sec-head + .rows { border-top: 0; margin-top: 8px; }

/* ---------- motion ----------
   CSSだけの動き。動きを減らす設定の端末では何も動かさない。
   中身を隠したままにする演出は使わない（開幕の約1.5秒だけ） */
.wordmark .ch { display: inline-block; }
.hero-copy .ln { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
  /* 開幕: 社名が1文字ずつせり上がる */
  .hero .wordmark .ch { animation: rise .95s cubic-bezier(.2, .9, .25, 1.08) both; animation-delay: calc(.12s + var(--i) * .06s); }
  @keyframes rise { from { transform: translateY(130%); } }

  /* 開幕: 右上のコピーが1行ずつ現れる */
  .hero-copy .ln { animation: line-in .7s var(--ease) both; animation-delay: calc(.7s + var(--i) * .08s); }
  @keyframes line-in { from { opacity: 0; transform: translateY(60%); } }

  .hero-foot { animation: fade .8s ease 1.2s both; }
  @keyframes fade { from { opacity: 0; } }

  /* 雲: 流れ込んだあと、ゆっくり漂い続ける（translate は漂い用、transform は登場用で分ける） */
  .cloud { animation: drift var(--dur, 18s) ease-in-out var(--delay, 0s) infinite alternate; }
  .hero .cloud { animation: cloud-in 1.3s var(--ease) both, drift var(--dur, 18s) ease-in-out 1.3s infinite alternate; }
  .hero .c1, .hero .c3 { --from: -60px; }
  .hero .c2, .hero .c4 { --from: 60px; }
  .c1 { --dx: 26px; --dy: -6px; --dur: 17s; }
  .c2 { --dx: -18px; --dy: -4px; --dur: 13s; }
  .c3 { --dx: 14px; --dy: 6px; --dur: 15s; }
  .c4 { --dx: -30px; --dy: 3px; --dur: 21s; }
  @keyframes cloud-in { from { opacity: 0; transform: translateX(var(--from, 0)); } }
  @keyframes drift { from { translate: 0 0; } to { translate: var(--dx, 16px) var(--dy, 0); } }

  /* フッターの社名: マウスを乗せると1文字ずつ跳ねる */
  .footer .wordmark .ch { transition: transform .3s var(--ease); }
  .footer .wordmark:hover .ch { animation: hop .7s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i) * .045s); }
  @keyframes hop { 40% { transform: translateY(-14%); } 100% { transform: none; } }

  /* 小さな反応 */
  .rows .arrow { transition: background-color .3s, color .3s, transform .45s var(--ease); }
  .rows a:hover .arrow { transform: rotate(-45deg); }
  .card::after { transition: translate 1.2s var(--ease); }
  .card:hover::after { translate: -18px -6px; }

  /* スクロール連動（対応ブラウザのPC幅のみ。文字は常に見えたまま、位置だけ動く） */
  @supports (animation-timeline: view()) { @media (min-width: 901px) {
    .band h2 .l1, .band h2 .l2 { display: inline-block; animation: slide-a linear both; animation-timeline: view(); }
    .band h2 .l2 { animation-name: slide-b; }
    @keyframes slide-a { from { transform: translateX(-7%); } to { transform: translateX(7%); } }
    @keyframes slide-b { from { transform: translateX(7%); } to { transform: translateX(-7%); } }
    .band .cloud { animation: drift var(--dur, 18s) ease-in-out infinite alternate, float-up linear both; animation-timeline: auto, view(); }
    .band .c1 { --rise: -60px; }
    .band .c2 { --rise: -120px; }
    .band .c3 { --rise: -40px; }
    @keyframes float-up { from { transform: translateY(calc(var(--rise, -60px) * -1)); } to { transform: translateY(var(--rise, -60px)); } }
  } }
}
.footer .wordmark { overflow: visible; }