/* トップページだけで使う節のスタイル。共通部分は assets/site.css にある。 */
/* ---------- ヒーロー：左に大見出し・3行・ボタン2つ、右に大きな絵、下に波の帯 ---------- */
.hero{background:var(--sora);position:relative;overflow:hidden}
.hero-wave{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;pointer-events:none}
.hero .ring{position:absolute;border-radius:50%;border:7px solid var(--sakura);pointer-events:none}
.hero .ring.r1{width:46px;height:46px;left:3%;top:76%}
.hero .ring.r2{width:28px;height:28px;left:46%;top:16%;border-color:var(--tamago);border-width:6px}
.hero .ring.r3{width:60px;height:60px;right:3%;top:58%;border-color:var(--midori);border-width:8px;opacity:.55}
.hero-grid{position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:2.5rem 2rem;align-items:center;padding:3.5rem 0 2rem}
.hero-title{font-size:clamp(2rem,1.3rem + 3.2vw,3.3rem);line-height:1.3;letter-spacing:.06em}
@media (max-width:480px){.hero-title{font-size:min(2rem,7.4vw);letter-spacing:.02em}}
.nowrap{display:inline-block;white-space:nowrap}
.hero-lead{max-width:30em;margin-top:1.4rem;font-size:clamp(.95rem,.88rem + .3vw,1.06rem);font-weight:500}
.hero-cta{margin-top:1.6rem}
.hero-cta .btn{min-width:150px}
.hero-art{position:relative;width:min(560px,100%);margin-inline:auto}
.hero-art svg{width:100%;height:auto}
.bubble{position:absolute;left:0;top:0;z-index:2;max-width:22em;background:var(--kami);border:2px solid var(--fuka);border-radius:18px;padding:.55em 1em;font-size:.92rem;font-weight:700;line-height:1.5}
.bubble::before,.bubble::after{content:"";position:absolute;width:0;height:0;border-style:solid}
.bubble::before{right:-14px;bottom:14px;border-width:8px 0 8px 14px;border-color:transparent transparent transparent var(--fuka)}
.bubble::after{right:-9px;bottom:16px;border-width:6px 0 6px 11px;border-color:transparent transparent transparent var(--kami)}
.hero-plat{display:flex;justify-content:flex-end;align-items:center;gap:.8rem;margin-top:.4rem;padding-right:.5rem}
.hero-plat img{height:22px;width:auto}
.hero-ask{position:relative}
.hero-ask .wrap{padding-bottom:3.2rem}
.ask{display:flex;align-items:center;gap:.5rem;width:min(760px,100%);margin:0 auto;padding:.45rem .45rem .45rem 1.3rem;background:var(--kami);border:2px solid var(--fuka);border-radius:999px}
.ask-q{flex:1;min-width:0;border:0;background:transparent;padding:.6em 0;outline:none;font-size:1rem}
.ask-q::placeholder{color:#7b8a83}
.ask-q:focus-visible{outline:none}
.ask:focus-within{outline:3px solid var(--midori);outline-offset:3px}
.ask .btn{flex:none}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;padding-top:2.5rem}
  .hero-art{width:min(440px,100%);margin-top:.5rem}
  .bubble{position:relative;left:auto;top:auto;display:inline-block;margin-bottom:1rem}
  .bubble::before{right:auto;left:22px;bottom:-15px;border-width:14px 8px 0 8px;border-color:var(--fuka) transparent transparent transparent}
  .bubble::after{right:auto;left:24px;bottom:-10px;border-width:11px 6px 0 6px;border-color:var(--kami) transparent transparent transparent}
  .hero-plat{justify-content:center}
  .hero .ring{display:none}
}
@media (max-width:720px){
  .ask{flex-direction:column;align-items:stretch;border-radius:24px;padding:.8rem}
  .ask-q{padding:.4em .4em}
  .ask .btn{width:100%}
}

/* ---------- ロゴ帯（ハックルベリーの導入企業ロゴ帯の位置に、パートナーのロゴ） ---------- */
.logos{background:var(--shiro);padding:1.6rem 0}
.logos ul{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.2rem 4rem}
.logos li{display:flex;align-items:center;gap:.9rem;min-height:64px;padding:.4rem 1rem}
.logos img{height:auto}
.logos .lg-inc{width:112px}
.logos .lg-shopline{width:150px}
.logos .logos-note{font-size:.8rem;color:var(--muted)}
@media (max-width:360px){.logos li{flex-wrap:wrap;justify-content:center;padding:.4rem 0}}

/* ---------- 帯のバナー（ハックルベリーの受賞バナーの位置に、パートナーシップの帯） ---------- */
.banner{padding:1rem 0 0}
.banner-box{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.5rem 2.5rem;width:min(760px,100%);margin:0 auto;padding:1.6rem 2.2rem;background:var(--fuka);color:#fff;border-radius:var(--r-lg)}
.banner-box img{width:120px;height:auto}
.banner-box p{font-size:.95rem;font-weight:700;line-height:1.6}
.banner-box small{display:block;font-weight:500;font-size:.8rem;opacity:.85;margin-top:.2rem}
.banner-box .btn{border-color:#fff;background:#fff;color:var(--fuka)}
@media (max-width:720px){.banner-box{grid-template-columns:1fr;text-align:center;justify-items:center;padding:1.4rem}}

/* ---------- サービス導入（中央寄せの文章＋図） ---------- */
.intro-copy{max-width:44em;margin:0 auto;text-align:center}
.intro-copy p + p{margin-top:1rem}
.diagram{margin-top:3.5rem}
.dg-top{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;justify-items:center;max-width:720px;margin:0 auto;isolation:isolate}
.dg-top::before{content:"";position:absolute;left:18%;right:18%;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:linear-gradient(90deg,#a9c9b6,var(--midori) 50%,#a9c9b6);z-index:-1}
.dg-node{display:grid;justify-items:center;gap:.2rem;width:140px;height:140px;border-radius:50%;background:var(--kami);border:2px solid #a9c9b6;align-content:center;font-weight:700;font-size:.95rem}
.dg-node .ic{background:transparent;width:56px;height:56px;padding:4px}
.dg-cloud{width:240px;height:240px;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--scallop) no-repeat center/contain;font-weight:700;font-size:1.02rem;line-height:1.7;padding:2.4rem}
.dg-cloud mark{background:linear-gradient(transparent 62%,var(--tamago) 62%);color:inherit}
.dg-dots{display:grid;justify-items:center;gap:6px;margin:.6rem auto .8rem}
.dg-dots i{width:6px;height:6px;border-radius:50%;background:var(--midori)}
.dg-pill{display:block;width:max-content;max-width:100%;margin:0 auto;padding:.5em 1.8em;background:var(--midori);color:#fff;border-radius:999px;font-weight:700;font-size:clamp(1rem,.9rem + .5vw,1.2rem);text-align:center}
.dg-bar{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.3rem .2rem;max-width:880px;margin:1.6rem auto 0;padding:1rem 1.4rem;background:var(--kami);border:2px solid #a9c9b6;border-radius:var(--r-lg);font-size:.88rem;font-weight:700;text-align:center}
.dg-bar li{padding:.2em .7em;line-height:1.5}
.dg-bar li + li::before{content:"";display:inline-block;width:12px;height:12px;margin:0 1em 0 0;background:var(--chev) no-repeat center/contain;vertical-align:-1px}
@media (max-width:760px){
  .dg-top{grid-template-columns:1fr;gap:.8rem}
  .dg-top::before{left:50%;right:auto;top:10%;bottom:10%;width:4px;height:auto;margin:0 0 0 -2px;background:#a9c9b6}
  .dg-node{width:120px;height:120px}
  .dg-bar{flex-direction:column;align-items:stretch}
  .dg-bar li + li::before{transform:rotate(90deg);margin:0 0 .2em}
  .dg-bar li + li{display:grid;justify-items:center;gap:0}
}

/* ---------- アプリ：左に花形の札、右に淡い帯とカード、札を縦の線でつなぐ ---------- */
.app-rows{position:relative;display:grid;gap:1.4rem;max-width:960px;margin:2.6rem auto 0}
.app-rows::before{content:"";position:absolute;left:69px;top:60px;bottom:60px;border-left:2px solid #8fb9a1;z-index:0}
.app-row{display:grid;grid-template-columns:140px 1fr;gap:2rem;align-items:center;position:relative}
.cat{position:relative;z-index:1;width:140px;height:140px;display:grid;place-items:center;align-content:center;gap:.1rem;text-align:center;background:var(--scallop) no-repeat center/contain;font-size:.86rem;font-weight:700;line-height:1.35;padding:1.4rem}
.cat svg{width:34px;height:34px}
.app-panel{position:relative;background:var(--wakaba-2);border-radius:var(--r-lg);padding:1rem;display:grid;gap:1rem}
.app-panel::before{content:"";position:absolute;left:-9px;top:50%;width:18px;height:18px;transform:translateY(-50%) rotate(45deg);background:var(--wakaba-2);border-radius:3px}
.app{display:grid;grid-template-columns:auto 1fr;gap:1rem 1.2rem;padding:1.2rem 1.3rem;border:0}
.app h3{font-size:1.12rem}
.app .for{font-size:.8rem;font-weight:700;color:var(--midori);margin-top:-.2rem}
.app p{font-size:.9rem}
.app .desc{margin-top:.3rem}
.app-foot{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;justify-content:space-between;font-size:.8rem;color:var(--muted);border-top:2px dashed var(--line);padding-top:.7rem}
.app-foot .btn{font-size:.86rem;min-height:38px;padding:.3em 1.2em}
@media (max-width:760px){
  .app-rows::before{display:none}
  .app-row{grid-template-columns:1fr;justify-items:center;gap:.6rem}
  .app-panel{width:100%}
  .app-panel::before{left:50%;top:-9px;transform:translateX(-50%) rotate(45deg)}
  .app{grid-template-columns:1fr}
}

/* ---------- グロース：4つの丸を輪に並べ、横にふきだし。下に白い箱で料金3つ、中央にボタン ---------- */
.cycle{position:relative;max-width:1040px;margin:3rem auto 0}
.cycle-list{display:grid;grid-template-columns:1fr 180px 1fr;grid-template-rows:auto auto;gap:4.5rem 0;align-items:center;counter-reset:cyc}
.cycle-ring{position:absolute;left:50%;top:50%;width:440px;height:440px;transform:translate(-50%,-50%);pointer-events:none;z-index:0}
.cyc{position:relative;z-index:1;display:grid;grid-template-columns:1fr 170px;gap:1rem;align-items:center;counter-increment:cyc}
.cyc.is-r{grid-template-columns:170px 1fr}
.cyc.is-r .cyc-circle{order:-1}
.cyc:nth-child(1){grid-column:1;grid-row:1}
.cyc:nth-child(2){grid-column:3;grid-row:1}
.cyc:nth-child(3){grid-column:3;grid-row:2}
.cyc:nth-child(4){grid-column:1;grid-row:2}
.cyc-center{grid-column:2;grid-row:1 / 3;z-index:1;text-align:center;font-weight:700;font-size:1.02rem;line-height:1.6;align-self:center;padding:0 .2rem}
.cyc-center mark{background:linear-gradient(transparent 62%,var(--tamago) 62%);color:inherit}
.cyc-circle{position:relative;width:170px;height:170px;border-radius:50%;background:var(--kami);border:2px solid #a9c9b6;display:grid;place-items:center;align-content:center;gap:.2rem;text-align:center;font-weight:700;font-size:.92rem;line-height:1.4;padding:1rem}
.cyc-circle::before{content:counter(cyc);position:absolute;top:-6px;left:-6px;width:36px;height:36px;border-radius:50%;background:var(--midori);color:#fff;font-family:var(--font-en);font-weight:800;font-size:1.05rem;display:grid;place-items:center;border:2px solid var(--kami)}
.cyc-circle svg{width:40px;height:40px}
.cyc-bubble{background:var(--wakaba);border-radius:var(--r-md);padding:.9rem 1.1rem;font-size:.84rem;line-height:1.7;position:relative}
.cyc-bubble::before{content:"";position:absolute;top:50%;width:14px;height:14px;background:var(--wakaba);transform:translateY(-50%) rotate(45deg);border-radius:2px}
.cyc:not(.is-r) .cyc-bubble::before{right:-6px}
.cyc.is-r .cyc-bubble::before{left:-6px}
@media (max-width:900px){
  .cycle{max-width:560px}
  .cycle-list{grid-template-columns:1fr;grid-template-rows:none;gap:1.2rem}
  .cycle-ring{display:none}
  .cycle-list .cyc,.cycle-list .cyc.is-r{grid-template-columns:120px 1fr;grid-column:1;grid-row:auto}
  .cyc .cyc-circle{order:-1;width:120px;height:120px;font-size:.82rem;padding:.6rem}
  .cyc-circle svg{width:30px;height:30px}
  .cyc:not(.is-r) .cyc-bubble::before{right:auto;left:-6px}
  .cycle-list .cyc-center{grid-column:1;grid-row:auto;order:-1;margin-bottom:.6rem}
}
@media (max-width:480px){.cycle-list .cyc,.cycle-list .cyc.is-r{grid-template-columns:1fr;justify-items:start}.cyc .cyc-circle{width:132px;height:132px;font-size:.78rem;padding:.5rem}.cyc-bubble::before{display:none}}

/* ---------- 課題：4列のカード、アイコンは上に中央、右下に行き先 ---------- */
.issue-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem 1rem}
.issue{position:relative;padding:1.5rem 1.2rem 1.2rem;display:flex;flex-direction:column;gap:.5rem;text-align:center}
.issue::before,.issue::after{content:"";position:absolute;left:50%;margin-left:-8px;width:16px;height:16px;transform:rotate(45deg)}
.issue::before{bottom:-10px;background:var(--line)}
.issue::after{bottom:-7px;background:var(--kami)}
.issue .ic{margin:0 auto .3rem;width:60px;height:60px;border-radius:50%}
.issue h3{font-size:1.02rem}
.issue .q{font-size:.9rem;font-weight:500;text-align:left;flex:1}
.issue .to{align-self:flex-end;margin-top:.4rem}
@media (max-width:1000px){.issue-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.issue-grid{grid-template-columns:1fr}}

/* ---------- キーワード ---------- */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem .5rem;max-width:860px;margin:0 auto}
.chips a{display:inline-block;font-size:.84rem;font-weight:700;color:var(--midori);border:2px solid #cfe3d6;border-radius:999px;padding:.15em 1em;background:var(--kami);text-decoration:none}
.chips a::before{content:"#"}
.chips a:hover{border-color:var(--midori)}