/* ベース設定 -------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    color: #79303b;
    background-color: #fde2c9;
    line-height: 1.7;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

.section-inner {
    max-width: 1060px;
    margin: 0 auto;
    padding: 80px 20px;
}

/* ナビ（上の赤いバー） ---------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #ee5752;
}

.nav-inner {
  max-width: 2000px;
  margin: 0 auto;
  padding: 18px 55px;
  display: flex;
  justify-content: space-between; /* ロゴ左 / リンク右 */
  align-items: center;
  color: #fffcfd;
  font-size: 13px;
  letter-spacing: 0.12em;
}

.nav-logo {
  font-family: 'KodomoRounded', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
}

.nav-links {
  display: flex;
  gap: 32px;
  font-size: 13px;
  justify-content: flex-end; /* 右寄せ */
  align-items: center;
}

.nav-links a:hover {
    opacity: 0.7;
}

/* =========================
   SP HAMBURGER MENU
========================= */
.nav-toggle{
  display: none; /* PCは非表示 */
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 8px;
  border-radius: 999px;
}

.nav-toggle:focus-visible{
  outline: 2px solid rgba(255,252,253,.9);
  outline-offset: 3px;
}

.nav-toggle .nav-toggle__bars{
  width: 26px;
  height: 18px;
  position: relative;
  display: block;
}

.nav-toggle .nav-toggle__bars::before,
.nav-toggle .nav-toggle__bars::after,
.nav-toggle .nav-toggle__bars span{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #fffcfd;
  border-radius: 999px;
  transition: transform .25s ease, top .25s ease, opacity .2s ease;
}

.nav-toggle .nav-toggle__bars::before{ top: 0; }
.nav-toggle .nav-toggle__bars span{ top: 8px; }
.nav-toggle .nav-toggle__bars::after{ top: 16px; }

/* OPEN状態（bodyに .is-menu-open が付く） */
body.is-menu-open .nav-toggle .nav-toggle__bars::before{ top: 8px; transform: rotate(45deg); }
body.is-menu-open .nav-toggle .nav-toggle__bars span{ opacity: 0; }
body.is-menu-open .nav-toggle .nav-toggle__bars::after{ top: 8px; transform: rotate(-45deg); }

/* 全画面メニュー */
.sp-menu{
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: #ee5752;
  color: #fffcfd;

  display: grid;
  place-items: center;

  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

/* SP menu close (X) button */
.sp-menu__close{
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #fffcfd;
}

.sp-menu__close::before,
.sp-menu__close::after{
  content: "";
  position: absolute;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
}

.sp-menu__close::before{ transform: rotate(45deg); }
.sp-menu__close::after{ transform: rotate(-45deg); }

.sp-menu__close:focus-visible{
  outline: 2px solid rgba(255,252,253,.9);
  outline-offset: 4px;
}

body.is-menu-open .sp-menu{
  opacity: 1;
  pointer-events: auto;
}

.sp-menu__inner{
  width: min(520px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
}

.sp-menu__inner a{
  font-family: 'KodomoRounded', 'Inter', sans-serif;
  letter-spacing: .18em;
  font-size: 26px;
  padding: 10px 18px;
  border-radius: 14px;
}

.sp-menu__inner a:focus-visible{
  outline: 2px solid rgba(255,252,253,.9);
  outline-offset: 4px;
}

/* メニュー開いてる間はスクロール停止（SPのトップジャンプ対策の土台） */
body.is-menu-open{
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: contain;
}

/* iOS/Safariで fixed レイヤー開閉時に位置がズレるのを抑える */
html.is-menu-open,
body.is-menu-open{
  height: 100%;
}

/* 共通見出し -------------------------------------------------- */
.section-title {
    font-family: 'KodomoRounded', 'Inter', sans-serif;
    font-size: 30px;
    letter-spacing: 0.18em;
    color: #ee5752;
    text-align: center;
    margin-bottom: 40px;
    line-height: 35px;
}


.section-title.small {
    font-size: 20px;
    text-align: left;
}

/* Worksタイトルだけ下の余白を増やす（カードとの間） */
.work-section .section-title{
  margin-bottom: 64px; /* 40→広げる：48〜90で調整OK */
}

/* =========================
   HERO / FIRST VIEW（整理版）
   ・文字は常にど真ん中
   ・BGはカニ式（--x --y --w --r）
   ・CTAは右下固定（SPは小さく）
   ・SPは文字が2行OK + BGは外周寄せ
========================= */

/* HERO本体 */
.hero{
  position: relative;
  overflow: hidden;
  background: #fde2c9;
  min-height: 90svh;
}

/* 背景パーツ置き場 */
.hero-bg-layer{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* 文字レイヤー（中央固定） */
.hero-inner{
  position: relative;
  z-index: 2;

  display: grid;
  place-items: center;

  width: 100%;
  min-height: 90svh;

  /* navがfixedならこれで被り回避（必要なら調整） */
  padding-top: 84px;
  padding-bottom: 60px;
}

/* 3行の文字ブロック */
.hero-text-block{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  max-width: 820px;
  gap: 10px;
}

/* タイトル・サブタイトル（同じ拡大縮小） */
.hero-title,
.hero-subtitle{
  font-family: 'KodomoRounded', 'Inter', sans-serif;
  font-size: clamp(32px, 6vw, 96px);
  line-height: 1.05;
  letter-spacing: 0.12em;
  color: #79303b;
  white-space: nowrap; /* PCは基本1行 */
}

/* タグライン（同じノリで拡大縮小） */
.hero-tagline{
  font-family: 'Inter', sans-serif;
  font-size: clamp(12px, 1.6vw, 22px);
  line-height: 1.4;
  letter-spacing: 0.12em;
  color: #79303b;
  white-space: nowrap;
}

/* =========================
   HERO BG ITEM SYSTEM（全員カニ式）
========================= */

/* サイズの基準（PC） */
:root{
  --w-base: clamp(90px, 10vw, 160px);
  --w-small: clamp(40px, 4vw, 70px);
  --w-line: clamp(26px, 3vw, 44px);
}

/* 全パーツ共通（中央基準で--x,--y移動） */
.bg-item{
  position: absolute;
  height: auto;
  object-fit: contain;

  width: var(--w, var(--w-base));

  left: 50%;
  top: 50%;
  transform:
    translate(
      calc(-50% + (var(--x, 0px) * var(--xmul, 1)) + var(--xoff, 0px)),
      calc(-50% + var(--y, 0px) + var(--yoff, 0px))
    )
    translate(0, var(--introDY, 0px))
    scale(var(--introS, 1))
    rotate(var(--r, 0deg));

  z-index: 0;
  /* intro (最初は透明→ポンっと出る) */
  opacity: 0;
  --introDY: 14px;
  --introS: 0.96;
  transition:
    opacity 0.5s ease var(--introDelay, 0s),
    transform 0.9s cubic-bezier(.22,1.2,.36,1) var(--introDelay, 0s);
  will-change: transform, opacity;
}

/* =========================
   HERO intro：
   1) 文字（group1）
   2) パン（group2）
   3) line（group3）
   ※ html に is-loaded が付いたら順に出す
========================= */

/* group delay（HTMLで class を付けるだけ） */
.bg-g2{ --introDelay: 0.7s; } /* パン */
.bg-g3{ --introDelay: 1.4s; } /* line */

/* 表示スタート（JSで html.is-loaded を付ける） */
html.is-loaded .bg-item{
  opacity: 1;
  --introDY: 0px;
  --introS: 1;
}

/* --- 文字（group1）--- */
.hero-title,
.hero-subtitle,
.hero-tagline,
.hero-cta{
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition:
    opacity 0.6s ease,
    transform 0.9s cubic-bezier(.22,1.2,.36,1);
  will-change: transform, opacity;
  overflow: visible;
}

/* 文字は軽く段差で（好みで） */
.hero-title{ transition-delay: 0.08s; }
.hero-subtitle{ transition-delay: 0.18s; }
.hero-tagline{ transition-delay: 0.28s; }
.hero-cta{ transition-delay: 0.36s; }

html.is-loaded .hero-title,
html.is-loaded .hero-subtitle,
html.is-loaded .hero-tagline,
html.is-loaded .hero-cta{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 動き苦手な人向け */
@media (prefers-reduced-motion: reduce){
  .bg-item,
  .hero-title,
  .hero-subtitle,
  .hero-tagline,
  .hero-cta{
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================
   配置（PC）
   ※右へ→ --x を増やす / 左へ→ --x を減らす（マイナスOK）
   ※下へ→ --y を増やす / 上へ→ --y を減らす（マイナスOK）
========================= */

/* ---- items ---- */
.bg-hana{
  --w: var(--w-small);
  --x: clamp(-700px, -40vw, -120px);
  --y: clamp(-320px, -18vw, -150px);
  --r: -8deg;
}
.bg-hana2{
  --w: var(--w-small);
  --x: clamp(260px, 26vw, 520px);
  --y: clamp(240px, 24vw, 520px);
  --r: 10deg;
}
.bg-hana2-1{
  --w: var(--w-small);
  --x: clamp(-620px, -34vw, -220px);
  --y: clamp(130px, 1vw, 240px); 
  --r: -6deg;
}
.bg-hottodog2{
  --w: var(--w-base);
  --x: clamp(200px, 27vw, 540px);
  --y: clamp(-420px, calc(-16vw - 130px), -200px);
  --r: -6deg;
}
.bg-chokokorone{
  --w: var(--w-base);
  --x: clamp(220px, 34vw, 620px);
  --y: clamp(-200px, -12vw, -60px);
  --r: 6deg;
}
.bg-donatu{
  --w: var(--w-base);
  --x: clamp(-620px, -34vw, -220px);
  --y: clamp(-200px, -12vw, -60px);
  --r: -6deg;
}
.bg-kuri-mupan{
  --w: var(--w-base);
  --x: clamp(-720px, -38vw, -320px);
  --y: clamp(20px, 2vw, 200px);
  --r: -6deg;
}

.bg-hottodog{
  --w: var(--w-base);
  --x: clamp(-700px, -30vw, -220px);
  --y: clamp(150px, 18vw, 420px);
  --r: 0deg;
}
.bg-ha-to{
  --w: var(--w-base);
  --x: clamp(-120px, -10vw, 60px);
  --y: clamp(-260px, -16vw, -120px);
  --r: 8deg;
}
 /* meronpan2：ha-to と同じ“動き” + 位置だけ左にオフセット */
 .bg-meronpan2{
   --w: var(--w-base);

   /* 動きは ha-to と完全に同じ */
   --x: clamp(-500px, -24vw, 180px);
   --y: clamp(-420px, calc(-16vw - 100px), -100px);
   --r: 8deg;
 }
.bg-huransupan{
  --w: var(--w-base);
  --x: clamp(200px, 27vw, 540px);
  --y: clamp(80px, 15vw, 260px);
  --r: 6deg;
}
.bg-koppepan2{
  --w: var(--w-base);
  --x: clamp(-780px, -44vw, -300px);
  --y: clamp(80px, 15vw, 260px);
  --r: 6deg;
}
.bg-kani{
  --w: var(--w-base);
  --x: clamp(320px, 38vw, 600px);
  --y: clamp(-40px, 2vw, 140px);
  --r: -8deg;
}
.bg-koppepan{
  --w: var(--w-base);
  --x: clamp(320px, 38vw, 600px);
  --y: clamp(200px, 22vw, 420px);
  --r: 8deg;
}
.bg-syokupan2{
  --w: var(--w-base);
  --x: clamp(460px, calc(35vw + 120px), 740px);
  --y: clamp(-420px, calc(-16vw - 130px), -200px);
  --r: 8deg;
}
.bg-sinamon3{
  --w: var(--w-base);
 --x: clamp(-780px, -44vw, -420px);
  --y: clamp(-420px, calc(-16vw - 130px), -200px);
  --r: 8deg;
}
.bg-kurowassan{
  --w: var(--w-base);
  --x: clamp(-780px, -44vw, -420px);
  --y: clamp(200px, 30vw, 420px);
  --r: -6deg;
}
.bg-sinamon2{
  --w: var(--w-base);
  --x: clamp(80px, calc(10vw - 20px), 140px);
  --y: clamp(220px, calc(10vw + 120px), 300px);
  --r: 10deg;
}
.bg-meronpan{
  --w: var(--w-base);
  --x: clamp(250px, calc(18vw + 50px), 430px);
  --y: clamp(340px, 30vw, 560px);
  --r: 6deg;
}
.bg-ha-to2{
  --w: var(--w-base);
  --x: clamp(-500px, -24vw, 180px);
  --y: clamp(220px, 30vw, 580px);
  --r: 6deg;
}
.bg-syokupan{
  --w: var(--w-base);
  /* 食パン：まだキモい＝動き過多。vwを弱めて滑らか＆落ち着かせる */
  --x: clamp(-140px, calc(-6vw - 40px), -60px);
  --y: clamp(200px, calc(8vw + 150px), 300px);
  --r: 0deg;
}
.bg-chokouzumaki{
  --w: var(--w-base);
  --x: clamp(90px, 14vw, 260px);
  --y: clamp(-270px, -18vw, -130px);
  --r: -10deg;
}
.bg-tyoko{
  --w: var(--w-base);
  /* ha-to と同じ動き方（vw + clamp幅も一致）／位置だけ右に+100px */
  --x: clamp(10px, -10vw, 190px);
  /* ha-to と同じyの動き（-16vw）に戻しつつ、今の位置感（-280付近）へ下げる */
  --y: clamp(-420px, calc(-16vw - 130px), -200px);
  --r: 12deg;
}
.bg-huransupan2{ 
  --w: var(--w-base);
  --x: clamp(-800px, -46vw, -300px);
  --y: clamp(-100px, -8vw, 70px); 
  --r: -8deg;
}
.bg-kuri-mupan2{
  --w: var(--w-base);
  --x: clamp(400px, calc(39vw + 120px), 800px);
  --y: clamp(40px, 12vw, 200px);
  --r: 6deg;
}

/* ---- lines ---- */
.line1{ --w: var(--w-line); --x: clamp(-260px, -18vw, -120px); --y: clamp(-220px, -14vw, -120px); --r: -6deg; }
.line2{ --w: var(--w-line); --x: clamp(40px, 8vw, 140px); --y: clamp(-340px, -22vw, -180px); --r: 8deg; }
.line3{
  --w: var(--w-line);
  --x: clamp(250px, 40vw, 700px);
  --y: clamp(-200px, -12vw, -60px);
  --r: -10deg;
}
.line3-1{
  --w: var(--w-line);
  --x: clamp(-120px, -10vw, 60px);
  --y: clamp(-420px, calc(-16vw - 130px), -200px);
  --r: -80deg;
}
.line4{ 
  --w: var(--w-line);
  --x: clamp(-260px, -19vw, -150px);
  --y: clamp(160px, calc(6vw + 120px), 300px);
  --r: 10deg; 
}
.line5{ --w: var(--w-line); --x: clamp(160px, 16vw, 300px); --y: clamp(170px, 14vw, 320px); --r: -8deg; }
.line6{ 
  --w: var(--w-line); 
  --x: clamp(-40px, -6vw, 40px); 
  --y: clamp(300px, 22vw, 520px); 
  --r: 6deg;
}
.line7{ 
  --w: var(--w-line);
  --x: clamp(320px, 38vw, 760px); 
  --y: clamp(130px, 1vw, 240px); 
  --r: -6deg;
}
.line8{
  --w: var(--w-line);
  --x: clamp(-480px, -29vw, -80px);
  --y: clamp(-200px, -12vw, -60px);
  --r: 8deg;
}
.line9{
  /* line9だけ見た目が大きいので少し小さくする */
  --w: calc(var(--w-line) * 0.75);
  --x: clamp(520px, 44vw, 820px);
  --y: clamp(-80px, -4vw, 40px);
  --r: -8deg;
}
.line9-1{
  /* line9だけ見た目が大きいので少し小さくする */
  --w: calc(var(--w-line) * 0.75);
  --x: clamp(520px, 44vw, 820px);
  --y: clamp(240px, 24vw, 520px);
  --r: -8deg;
}
.line9-2{
  /* line9だけ見た目が大きいので少し小さくする */
  --w: calc(var(--w-line) * 0.75);
  --x: clamp(-720px, -38vw, -320px);
  --y: clamp(240px, 24vw, 520px);
  --r: -8deg;
}
.line10{ --w: var(--w-line); --x: clamp(-40px, -2vw, 80px); --y: clamp(360px, 32vw, 620px); --r: 10deg; }

.hero-cta{
  position: fixed;
  right: 34px;
  bottom: 25px;
  z-index: 2147483647;

  /* ★ サイズUP */
  width: 155px;
  height: 155px;

  display: grid;
  place-items: center;
  overflow: visible; /* ★Lottieのはみ出しで切れない */

  pointer-events: auto;
  isolation: isolate;
  transform: translateZ(0);
  will-change: transform;
}

/* HERO CTA：Lottieが左で切れる対策（CTA内だけに適用） */
.hero-cta lottie-player{
  /* lottie-player 自体の表示領域を広げて、左の見切れをなくす */
  width: 200%;
  height: 200%;
  display: block;
  max-width: none;

  /* クリップされやすいので念のため */
  overflow: visible !important;

  /* アートボードが左寄りでも見切れないように右へ寄せる（必要なら数値だけ調整） */
  transform: translateX(38%);
  transform-origin: center;

  pointer-events: none; /* クリックはa( .hero-cta )に通す */
}

.hero-cta-img{
  width: 100%;
  height: 100%;
  display: block;

  /* 影つけたいなら */
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.18));
}

.hero-cta-text{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;

  font-family: 'KodomoRounded','Inter',sans-serif;
  font-size: 14px;
  letter-spacing: .12em;
  line-height: 1.15;
  color: #fffcfd;

  pointer-events: none; /* クリックはaに通す */
}

.hero-cta:hover{
  transform: translateY(-2px);
  opacity: .9;
}


/* ヒーロー本体：画面いっぱい */

.hero-bottom-bar{
    display: none;
}


/* セクションの波線（画像） ------------------------------------ */

/* PROFILE ----------------------------------------------------- */
.profile-section {
    background-color: #ee5752;
    padding: 0px 20px 30px;
    color: #fffcfd;

    /* ★下のwave等に負けて消えるのを防ぐ */
    position: relative;
    z-index: 2;
}

.profile-section .section-title{
  color: #fffcfd;
}

.About-bg-title {
    max-width: 1060px;
    margin: 0 auto 12px;
    font-family: 'KodomoRounded', 'Inter', sans-serif;
    font-size: 12px;
    letter-spacing: 0.18em;
}

.profile-card {
    max-width: 900px;
    padding: 40px 100px;
    height: 545px;
    margin: 0 auto;
    margin-top: -25px;
    background-color: #fffcfd;
    border-radius: 50px;
    display: grid;
    grid-template-columns: 0.6fr 1.5fr;
    gap: 70px;
    color: #ee5752;
    align-items: center ;
    justify-content: center;
    position: relative;
    overflow: visible;
}

/* ゆらゆら（右下の子） */
@keyframes yuraYura {
  0%   { transform: rotate(-4deg) translateY(0); }
  50%  { transform: rotate(3deg)  translateY(4px); }
  100% { transform: rotate(-4deg) translateY(0); }
}

.about-kurowassan{
  position: absolute;
  right: 24px;
  bottom: -20px;
  width: 120px;
  height: auto;
  z-index: 20;
  pointer-events: none;

  transform-origin: 70% 85%; /* 揺れる支点（ここがコツ） */
  animation: yuraYura 2.6s ease-in-out infinite;
  display: block;
}

.profile-photo {
    width: 140px;     /* ← 写真の大きさをここで変更！ */
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 30px;
}

.profile-subname{
    font-size: 16px;
    margin: 6px 0;
}

.profile-name {
    font-size: 24px;
    font-weight: 600;
    margin: 0.5px 0;
    margin-bottom: 20px;
}

.profile-sub {
    font-size: 16px;
    margin-top: 0px;
}

.profile-right p {
    font-size: 16px;
    margin-bottom: 6px;
}

/* 年表レイアウト ---------------------------------- */
.profile-right {
    font-size: 16px;
}

/* 1行分（年＋文章）の枠 */
.profile-row {
    display: flex;
    align-items: baseline;   /* ★ 文字の線（ベースライン）でそろえる */
    column-gap: 16px;        /* 年と文章の間の距離 */
    margin-bottom: 18px;     /* 行と行の間隔 */
}

.profile-year {
    width: 80px;             /* 左の年の幅を固定する */
    font-weight: 400;        /* 細字 */
    font-size: 14px;
}

.profile-detail {
    flex: 1;                 /* 右側が残りの幅を全部取るように */
}

.profile-detail p {
    margin-bottom: 4px;
    font-size: 16px;
}

.bold-line {
    font-weight: 750; /* または 600, 800 などお好みで */
}

.profile-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 上下中央 */
    align-items: center;     /* 左右中央 */
}

/* PHILOSOPHY -------------------------------------------------- */
/* PHILOSOPHY：流れる背景 */
.philosophy-section {
  position: relative;
  z-index: 0;
  background-color: #fffcfd;

  /* 背景画像 */
  background-image: url("img/Design-Philosophy_bg.png");
  background-repeat: repeat; /* ← 縦にも横にもリピート */
  background-position: 0 0;
  background-size: auto 700px; /* 高さだけ指定（好みで調整） */

  animation: philosophy-bg-scroll 50s linear infinite;
  padding-bottom: 100px;/* ← 下を広げる */
}


/* 右に流れるアニメーション */
@keyframes philosophy-bg-scroll {
  from { background-position: 0 0; }
  to   { background-position: 1000px 0; }
}

.philosophy-inner {
    position: relative;
    z-index: 1;
}

.philosophy-card {
    background-color: #fde2c9;
    border-radius: 20px;
    padding: 65px 50px;
    color: #ee5752;
    text-align: left;
    max-width: 500px;
    margin: 0 auto;   /* ← これを追加！中央寄せになる */
}

/* 見出しの白フチ（Design Philosophy など） */
.philosophy-section .section-title,
.section-title-line{
  color: #ee5752;                 /* 文字色（赤） */
  -webkit-text-stroke: 6px #fffcfd; /* 白フチ（太さは 4〜8pxで好み調整） */
  paint-order: stroke fill;

  /* ★タイトルとカードの間を広げる（ここで調整） */
  margin-bottom: 64px;

  /* Firefox等の保険（疑似フチ） */
  text-shadow:
    0 1px 0 #fffcfd,
    0 -1px 0 #fffcfd,
    1px 0 0 #fffcfd,
    -1px 0 0 #fffcfd,
    1px 1px 0 #fffcfd,
    -1px 1px 0 #fffcfd,
    1px -1px 0 #fffcfd,
    -1px -1px 0 #fffcfd;
}

.philosophy-heading {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 34px;  /* タイトル下を大きめに */
    line-height: 1.9;     /* タイトルの行間 */
    text-align: center;
}

/* 本文：行間を広げる + 段落ごとにしっかり間を空ける */
.philosophy-card p {
    text-align: center;
    font-size: 16px;
    line-height: 2;     /* ← 文章の行間 */
    margin: 0;            /* pのデフォ余白を一旦ゼロに */
}

.philosophy-card p + p {
    margin-top: 26px;     /* ← 段落間の空き */
}

/* SKILLS ------------------------------------------------------ */
.skills-section {
    background-color: #fde2c9;
    padding-bottom: 60px;
}

.skills-grid {
    max-width: 820px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
}

.skill-card {
    background-color: #fffcfd;
    border-radius: 12px;
    padding: 22px 22px 26px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.skill-card h3 {
    font-size: 12px;
    color: #ee5752;
    margin-bottom: 10px;
    font-weight: 600;
}

.skill-card li {
    font-size: 10px;
    color: #79303b;
    margin-bottom: 4px;
}
/* TOOLS_WAVE ------------------------------------------------------- */


/* TOOLS ------------------------------------------------------- */

/* Toolsの中だけ section-inner の上下paddingを調整 */
.tools-section .section-inner{
  padding-top: 30px;
  padding-bottom: 80px; /* ★下が切れないように余白を戻す */
}

/* ついでにTools→Worksの間を詰めたいならWorks側も */
.work-section .section-inner{
  padding-top: 80px;  /* Works見出しの上の余白を広げる（80〜160で調整OK） */
}

.tools-section{
  /* 背景画像をこのセクションだけに敷く */
  position: relative;
  overflow: visible; /* ★カード下が切れない */

  background-color: #fde2c9;
  padding-top: 80px;
  padding-bottom: 60px; /* ★下の余白を確保 */
}

/* 背景画像（中身は薄くならない） */
.tools-section::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  /* ★ここを好きな画像に変える */
  background-image: url(img/grid_bg.png);
  background-repeat: repeat;
  background-position: center -220px; /* ★背景をもう少し上に */
  background-size: cover;
  pointer-events: none;
}

/* 中身を背景より手前に */
.tools-section > .section-inner{
  position: relative;
  z-index: 1;
}

/* Tools見出しだけを上にずらす（レイアウトは動かさない） */
.tools-section .section-title{
  position: relative;
  top: -90px; /* 好みで -20〜-60px で調整 */
}

/* ★ 3つを横並びにする親 */
.tools-grid {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
}

/* ★ 1個分のカードの“当たり判定”をここで固定 */
.tool-pill {
    width: 280px;
    height: 280px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

/* 画像サイズ：カードにぴったり */

.tool-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ===== Tools: 画像を2枚重ねる（下：アニメ / 上：メイン） ===== */

/* カードからはみ出し防止（念のため） */
.tool-card{
  overflow: visible;
}

/* 前面/背面（.tool-face）を重ねの基準にする */
/* tool-face をボタンや重ね画像の基準にする */
.tool-face{
  position: relative;
  overflow: visible;
}

/* 下で動かす画像（アニメ用）
   → hoverで動かしたいのはこっち */
.tool-icon.tool-anim{
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  object-fit: contain;

  /* 初期：位置はそのまま + スケール */
  transform: translateY(0) scale(1.2);
  transform-origin: center;
  transition: transform .3s ease; /* ← ここを大きくするとめっちゃ遅くなる（例：1.2〜3s） */
}

/* hover：tool-anim だけ少し上に動かす */
.tool-pill:hover .tool-icon.tool-anim,
.tool-pill:focus-within .tool-icon.tool-anim{
  transform: translateY(-130px) scale(1.20);
}


/* 上に乗せる画像（メイン用） */
.tool-icon.tool-main{
  position: relative;
  top: 50px;
  z-index: 2;
  object-fit: contain;

  /* ★メイン画像だけ少し大きく */
  transform: scale(1.20);
  transform-origin: center;
}

/* ボタン画像（いちばん手前） */

.tool-btn{
  position: absolute;       /* ← z-index を効かせる */
  z-index: 3;               /* ← tool-main(2) / tool-anim(0) より前 */
  /* 置きたい位置：右下に配置（好みで数値調整） */
  right: -30px;
  bottom: -20px;
  width: 80px;              /* 大きさ（好みで調整） */
  height: auto;
  pointer-events: none;     /* 画像がクリックを邪魔しない */
}

/* ===== Tools: hover（main + btn だけ動かす）===== */
.tool-pill{
  cursor: pointer;
}

/* ボタン：消さずに、hoverで“ふわっ”と上がる */
.tool-btn{
  opacity: 1;                      /* 常に表示 */
  transform: translateY(0);
  transition: transform .3s ease; /* ← ここを大きくするとめっちゃ遅くなる */
}

.tool-pill:hover .tool-btn,
.tool-pill:focus-within .tool-btn{
  transform: translateY(-100px);     /* 上がる量（-6〜-14で調整） */
}


/* 動き苦手な人向け */
@media (prefers-reduced-motion: reduce){
  .tool-card,
  .tool-btn,
  .tool-icon.tool-main,
  .tool-icon.tool-anim{
    transition: none;
  }
  .tool-pill:hover .tool-card,
  .tool-pill:focus-within .tool-card{
    transform: none;
    filter: none;
  }
}


/* WORK_chokokorone  ------------------------------------------------------ */
/* WORKカード内の飾り（チョココロネ）を右端にくっつける */
.work-thumb-wrapper{
  position: relative; /* ← これが基準になる */
}

.work-chokokorone{
  position: absolute;
  right: -24px;     /* 右端から少しはみ出させて埋め込み感を出す */
  top: 0px;        /* 上に移動（80px → 20px） */
  width: 120px;
  height: auto;
  z-index: 1;
  pointer-events: none;

  /* 初期状態：非表示で右にずらす */
  opacity: 0;
  transform: translateX(60px);

  /* 出し入れ演出を後で使うなら残してOK */
  transition:
    transform 1.5s cubic-bezier(.22,1.2,.36,1),
    opacity 0.45s ease;
}

/* 後でスクロール演出を戻すなら：初期を opacity:0 / translateX(60px) に戻して、この .is-show を使う */
.work-chokokorone.is-show{
  opacity: 1;
  transform: translateX(0);
}

/* WORK全体  ------------------------------------------------------ */

.work-title-heading {
    text-align: left;
    font-size: 40px;
}

.work-section {
    background-color: #fde2c9;
    padding-bottom: 0%;
    position: relative;
    overflow: hidden; /* 背景画像がはみ出してもOK */
}

/* WORKの背景画像レイヤー（いちばん奥） */
.work-section::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0; /* ★ここが“いちばん奥” */

    /* ▼Toolsで使ってるgrid背景をWorksにも（下にwork-bgも重ねる） */
    background-image: url("img/grid_bg.png"), url("img/work-bg.png");
    background-repeat: repeat, repeat;
    background-position: center -220px, center;
    background-size: cover, auto;

    opacity: 80%;            /* うるさかったら 0.12〜0.25 */
    pointer-events: none;
}

/* WORK内の中身は背景より前に */
.work-section .section-inner,
.work-section .work-more{
    position: relative;
}

/* グリッドレイアウト */
.work-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px;
}

/* カード（背景なしのフラットデザイン） */
.work-card {
    display: block;
    text-decoration: none;  /* 文字の下線なくす */
    color: inherit;         /* 色を保つ */
}

/* 画像枠（ズーム＋丸角） */
.work-thumb-wrapper {
    width: 100%;
    height: 210px;
    overflow: hidden;
    border-radius: 5px;
}

/* 画像：初期状態（少しだけ縮小） */
.work-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.0);
    transform-origin: center;
    transition: transform 0.45s ease;  /* ← ふわっとアニメ */
}

/* ホバー中にズーム */
.work-card:hover .work-thumb-img {
    transform: scale(1.12);  /* ← 好きに調整：1.12〜1.25が自然 */
}

/* タイトル */
.work-title {
    font-size: 16px;
    font-weight: 700;
    color: #79303b;
    margin-top: 16px;
    margin-bottom: 4px;
}

/* クライアント名 */
.work-client {
    font-size: 16px;
    font-weight: 600;
    color: #79303b;
    margin-bottom: 4px;
}

/* 説明文 */
.work-text {
    font-size: 12px;
    color: #79303b;
    line-height: 1.7;
}

/* レスポンシブ */
@media (max-width: 900px) {
    .work-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}


.work-more {
    width: fit-content;          /* 要素の幅を中身だけにする */
    margin-left: auto;           /* 右に寄せる（グリッドと揃う） */
    margin-top: 50px;
    margin-bottom: 10px;
    padding-right: 40px;            /* 不要な余白を消す */
    position: relative;
    z-index: 0;
}

/* =========================
   WORK MORE：ハート矢印ボタン（narahigashi風）
   使い方：.work-more の中に
   <a class="work-more-heart" ...> ... </a>
   を入れる
========================= */

/* work-more の右側に被せる（PC） */
/* work-more の右側に被せる（PC） */
.work-more-heart{
  /* ★サイズはここだけ触ればOK */
  --heart-w: 50px;
  --heart-h: 50px;

  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);

  width: var(--heart-w);
  height: var(--heart-h);

  display: block;
  z-index: 5;
  pointer-events: auto;
  cursor: pointer;

  /* hoverで矢印+ハート画像を一緒に少し拡大 */
  transform-origin: center;
  transition: transform .35s ease;
}

/* ハート背景 */
.work-more-heart .cHeartArrow__heart{
  position: absolute;
  inset: 0;
}

.work-more-heart .cHeartArrow__heart img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  aspect-ratio: 1 / 1;

  /* ★画像だけホバーでちょいデカく */
  transform: scale(1);
  transform-origin: center;
  transition: transform .1s ease;
}

.work-more-heart .heart-bg{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  aspect-ratio: 1 / 1;
}

/* 矢印（中でスライド） */
.work-more-heart .cHeartArrow__arrow{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-45%, -50%); /* ちょい右寄せ（好みで -50%〜-25%） */

  width: calc(var(--heart-w) * 0.65);
  height: calc(var(--heart-h) * 0.28);
  overflow: hidden;
}

.work-more-heart .cHeartArrow__arrow_inner{
  display: flex;
  width: 200%;
  height: 100%;

  /* ★初期位置を左に寄せておく（2本目を見せる） */
  transform: translateX(-50%);

  transition: transform .2s ease; /* 速さ：遅くしたいなら 1.2s〜2s */
}

.work-more-heart .cHeartArrow__arrow_image{
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
}

.work-more-heart .cHeartArrow__arrow_image svg{
  width: 100%;
  height: 100%;
  display: block;
}

/* hover / focus で矢印が流れる */
.work-more-heart:hover .cHeartArrow__arrow_inner,
.work-more-heart:focus-visible .cHeartArrow__arrow_inner{
  transform: translateX(0);
}

/* hover / focus で全体を少し拡大（矢印+ハート画像まとめて） */
.work-more-heart:hover,
.work-more-heart:focus-visible{
  transform: translateY(-50%) scale(1.08);
}

/* 画像（ハート）も少しだけ拡大 */
.work-more-heart:hover .cHeartArrow__heart img,
.work-more-heart:focus-visible .cHeartArrow__heart img{
  transform: scale(1.06);
}

/* work-more全体ホバーでも同じ反応（取りこぼし防止） */
.work-more:hover .work-more-heart .cHeartArrow__heart img,
.work-more:focus-within .work-more-heart .cHeartArrow__heart img{
  transform: scale(1.06);
}


/* クリック/hoverを取りこぼさないように前面に */
.work-more{ z-index: 2; }
.work-more-heart{ z-index: 5; pointer-events: auto; cursor: pointer; }

/* 文字じゃなく、右側のハートUIに合わせて反応させたい時用：
   work-more全体にマウスが乗っても同じ反応にする */
.work-more:hover .work-more-heart .cHeartArrow__arrow_inner,
.work-more:focus-within .work-more-heart .cHeartArrow__arrow_inner{
  transform: translateX(0);
}

.work-more:hover .work-more-heart,
.work-more:focus-within .work-more-heart{
  transform: translateY(-50%) scale(1.08);
}

.work-more-btn {
    position: relative;          /* ★z-indexを効かせる */
    z-index: 1;               /* ★最前面 */
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'KodomoRounded', 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #ee5752;           /* 赤のままで強さも残る */
    letter-spacing: 0.08em;
    padding: 4px 0;           /* 背景を消した時の縦バランス調整 */
    transition: 0.2s ease;
}

.work-more-btn:hover {
  opacity: 1;
  transform: none;
}

.work-more-btn .arrow {
    font-size: 14px;
    line-height: 1;
}

.work-more-btn-img{
  width: 40px;
}

/* 旧workmore画像を残しててもレイアウト崩れないように（不要ならHTMLから消してOK） */
.work-more-btn-img{ display: none; }

/* WORK DETAIL ------------------------------------------------- */

.work-detail-page {
    background-color: #fde2c9; /* 全体クリーム */
}

.work-detail-section {
    background-color: #fde2c9;
}

.work-detail-inner {
    max-width: 1060px;
    margin: 0 auto;
    padding: 80px 20px 100px;
}

/* 上段：タイトル＋メイン画像 */
.work-detail-header {
    display: grid;
    grid-template-columns: 1.1fr 1.3fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 56px;
}

.work-detail-tag {
    font-size: 11px;
    letter-spacing: 0.16em;
    color: #ee5752;
    margin-bottom: 10px;
}

.work-detail-title {
    font-family: 'KodomoRounded', 'Inter', sans-serif;
    font-size: 24px;
    line-height: 1.5;
    letter-spacing: 0.08em;
    color: #ee5752;
    margin-bottom: 24px;
}

.work-detail-meta dl {
    display: grid;
    row-gap: 8px;
}

.work-detail-meta dt {
    font-size: 10px;
    letter-spacing: 0.16em;
    color: #ee5752;
    margin-bottom: 2px;
}

.work-detail-meta dd {
    font-size: 13px;
    color: #79303b;
    margin: 0 0 4px;
}

/* メイン画像 */
.work-detail-main-image img {
    width: 100%;
    border-radius: 18px;
    display: block;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    background-color: #fffcfd;
}

/* 下段：テキストブロック */
.work-detail-body {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.work-detail-block {
    border-radius: 16px;
    padding: 24px 30px;
}

.work-detail-block-title {
    font-family: 'KodomoRounded', 'Inter', sans-serif;
    font-size: 16px;
    letter-spacing: 0.12em;
    color: #ee5752;
    margin-bottom: 12px;
}

.work-detail-paragraph {
    font-size: 12px;
    line-height: 1.9;
}

/* サブビジュアル3枚 */
.work-detail-subgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 16px;
    margin-top: 8px;
}

.work-detail-subitem img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    background-color: #fffcfd;
}

/* 戻るリンク */
.work-detail-back-link {
    margin-top: 40px;
    text-align: right;
}

.work-detail-back-link a {
    font-size: 11px;
    letter-spacing: 0.16em;
    color: #ee5752;
}

.work-detail-back-link a:hover {
    opacity: 0.75;
}

/* レスポンシブ：詳細ページ */
@media (max-width: 900px) {
    .work-detail-header {
        grid-template-columns: 1fr;
    }
    .work-detail-main-image {
        order: -1; /* 上に画像、下にテキスト とか変えたいならここ調整 */
    }
    .work-detail-subgrid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .work-detail-inner {
        padding: 60px 16px 80px;
    }
    .work-detail-subgrid {
        grid-template-columns: 1fr;
    }
}

/* フッター ---------------------------------------------------- */
/* =========================
   FOOTER（赤 + 専用wave）
========================= */
.footer{
  position: relative;
  background-color: #ee5752; /* フッターは赤 */
  color: #fffcfd;
  /* 上はwave分あける（被せ量を増やすときはここも少し調整） */
  padding: 110px 20px 24px;
  margin-top: auto;
  overflow: visible;        /* waveを上に被せるため表示 */
}

.footer-dot-flipped{
  height: 700px;
  background-image: url('img/footer_dot.png');
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  transform: scaleY(-1);
  transform-origin: center;
  pointer-events: none;
}


/* フッター中身はwaveより前 */
.footer-inner{
  position: relative;
  z-index: 1;
  max-width: 1600px;
  margin: 0 auto;
  text-align: center;
}

.footer-links{
  display: flex;
  justify-content: center; /* TOP/ABOUT/WORKS を真ん中に */
  align-items: center;
  gap: 48px;
  letter-spacing: 0.18em;
  flex-wrap: nowrap;       /* できるだけ1列 */
}

.footer-links a{
  display: inline-block;
  font-size: 14px;
}

.footer-line{
  height: 1px;
  background-color: #fffcfd;
  opacity: 0.7;

  /* 上 下 / 左右（②：左右に少し余白） */
  margin: 20px 24px 10px;
}

.footer-copy{
  font-size: 10px;
  margin: 0;
}

.site-main {
  flex: 1;
}

html, body {
  overscroll-behavior: none;
}




/* ===== WAVE DIVIDER (under red section) ===== */

/* まず赤セクション側を基準にする */
.profile-section{
  position: relative;
  z-index: 2;
}

/* waveの共通：切れ防止 + レイヤー制御 */
.section-divider-img{
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
  overflow: visible;
  position: relative;
  z-index: 1;            /* ★上に重ねる */
  pointer-events: none;
}

/* 画像タグを使う場合のデフォ（他のdivider用） */
.section-divider-img img{
  width: 100%;
  height: auto;
  display: block;
}

/* --- 赤の下のwaveだけ：両端に“くっつかない”版 ---
   ・画像を引き伸ばさず（背景として表示）
   ・左右に余白を作って端にベタ付きしない
   ・高さ（見た目の太さ）はここで固定
---------------------------------------------- */
.wave-under-red{
  /* ★ここで見た目の太さを決める（変えたくないなら固定値でOK） */
  --wave-h: 80px;
  height: var(--wave-h);

  /* 背景としてwaveを置く（引き伸ばさない） */
  background-image: url("img/wave.png");
  background-repeat: repeat-x;
  background-size: auto var(--wave-h);  /* 高さだけ合わせる：横は等倍 */

  /* 余白の内側だけに描画して“端にベタ付き”を防ぐ */
  background-origin: content-box;
  background-clip: content-box;

  /* 少しだけずらして端の見え方を自然に（好みで0pxでもOK） */
  background-position: 24px top;

  /* 赤に食い込ませたい量 */
  margin-top: -40px;
}

/* wave-under-red の中の img は使わない（背景で出す） */
.wave-under-red > img{
  display: none;
}

/* 直後のセクション（特にPhilosophy）を少しだけwaveに潜らせる */
.wave-under-red + .philosophy-section{
  position: relative;
  z-index: 0;           /* wave(20)の下に */

  /* ★被せたい量：ここを増やすほどPhilosophyがwaveに潜る */
  margin-top: -40px;
  padding-top: 40px;    /* 潜らせた分、内容が上に食い込みすぎないように戻す */
}

 .wave-under-ve-jyu{
  /* ★ここで見た目の太さを決める（変えたくないなら固定値でOK） */
  --wave-h: 80px;
  height: var(--wave-h);
  --wave-offset: -30px; /* ← 少し左にずらす（好みで -12px 〜 -60px など） */

  /* 背景としてwaveを置く（引き伸ばさない） */
  background-image: url("img/wave_ve-jyu.png");
  background-repeat: repeat-x;
  background-size: auto var(--wave-h);  /* 高さだけ合わせる：横は等倍 */

  /* 余白の内側だけに描画して“端にベタ付き”を防ぐ */
  background-origin: content-box;
  background-clip: content-box;

  /* 横にずらしたい時はここ（マイナスで左へ） */
  background-position: var(--wave-offset, 24px) top;

  /* 赤に食い込ませたい量 */
  margin-top: -40px;
}

/* wave-under-red の中の img は使わない（背景で出す） */
.wave-under-red > img{
  display: none;
}

/* 直後のセクション（特にPhilosophy）を少しだけwaveに潜らせる */
.wave-under-red + .philosophy-section{
  position: relative;
  z-index: 0;           /* wave(20)の下に */

  /* ★被せたい量：ここを増やすほどPhilosophyがwaveに潜る */
  margin-top: -40px;
  padding-top: 40px;    /* 潜らせた分、内容が上に食い込みすぎないように戻す */
}

  .philosophy-section .section-title{ margin-bottom: 44px; }










/* =========================
   MOBILE (<=600px)
   ※ @media はここに集約
========================= */
@media (max-width: 600px){

  /* --- Global safety --- */
  html, body{ overflow-x: clip; }
  img{ max-width: 100%; height: auto; }
  *{ -webkit-tap-highlight-color: transparent; }

  /* --- HERO (SP) --- */
  .hero-title,
  .hero-subtitle,
  .hero-tagline{
    white-space: normal;
  }

  :root{
    --w-base: clamp(80px, 24vw, 140px);
    --w-small: clamp(32px, 10vw, 56px);
    --w-line: clamp(22px, 7vw, 38px);
  }

  /* =========================
     HERO BG: SP 散らばり配置（仮）
     - 中央(文字)は避ける
     - 外周に満遍なく置く
  ========================= */

  /* --- パン・モチーフ --- */
  .bg-chokokorone{ --x:  170px; --y: -250px; --r:  8deg; }
  .bg-donatu      { --x: -160px; --y: -120px; --r: -40deg; }
  .bg-ha-to       { --x:   95px; --y: -170px; --r: 10deg; }
  .bg-meronpan2   { --x: -210px; --y: -250px; --r:  6deg; }
  .bg-huransupan  { --x:  210px; --y:  -20px; --r:  6deg; }
  .bg-kuri-mupan  { --x:  200px; --y: -135px; --r: -8deg; }
  .bg-kuri-mupan2 { --x:  140px; --y:  210px; --r:  50deg; }
  .bg-kani        { --x:  190px; --y:  100px; --r: -8deg; }
  .bg-koppepan    { --x:  70px; --y:  150px; --r:  8deg; }
  .bg-huransupan2 { --x: -80px; --y:  150px; --r: -6deg; }
  .bg-koppepan2   { --x: -230px; --y:  -10px; --r:  6deg; }
  .bg-syokupan2   { --x:  80px; --y: 310px; --r:  8deg; }
  .bg-sinamon2    { --x:   -10px; --y:  240px; --r: 10deg; }
  .bg-sinamon3    { --x: -100px; --y: -290px; --r:  8deg; }
  .bg-ha-to2      { --x: -110px; --y:  320px; --r:  6deg; }
  .bg-hottodog    { --x: -160px; --y:  230px; --r:  0deg; }
  .bg-hottodog2   { --x:  100px; --y: -330px; --r: -6deg; }
  .bg-kurowassan  { --x:  220px; --y:  330px; --r: -6deg; }
  .bg-syokupan    { --x: -170px; --y:   100px; --r:  0deg; }
  .bg-meronpan    { --x:   70px; --y:  470px; --r:  6deg; }
  .bg-chokouzumaki{ --x:  -80px; --y:  -180px; --r: -10deg; }
  .bg-tyoko       { --x:   20px; --y:  -250px; --r: 12deg; }

  /* 花（小物は上端に散らす） */
  .bg-hana        { --x: -20px; --y: -320px; --r: -8deg; }
  .bg-hana2       { --x:  -30px; --y:  130px; --r: 10deg; }
  .bg-hana2-1     { --x: -210px; --y:   300px; --r: -6deg; }

  /* --- ライン（線は“すき間埋め”で外周に） --- */
  .line1{ --x: -140px; --y: -240px; }
  .line2{ --x:   80px; --y: -250px; --r:-20deg; }
  .line3{ --x:  190px; --y: -330px; }
  .line3-1{ --x: -10px; --y: -180px; --r:60deg;}
  .line4{ --x: -220px; --y:   20px; }
  .line5{ --x:  170px; --y:  170px; }
  .line6{ --x:  -90px; --y:  230px; }
  .line7{ --x:  230px; --y:  350px; }
  .line8{ --x: -40px; --y:  300px; }
  .line9{ --x:  210px; --y:   20px; }
  .line9-1{ --x:  150px; --y:   300px; --w: calc(var(--w-line) * 0.6);}
  .line9-2{ --x:  -150px; --y:   -330px; --w: calc(var(--w-line) * 0.6);}
  .line10{
    --w: calc(var(--w-line) * 0.6); /* line10だけ小さく（0.5〜0.8で調整） */
    --x: 45px;
    --y: 200px;
  }

  /* ===== NAV (SP) ===== */
  /* スマホはロゴを消して、ハンバーガーだけ右寄せ */
  .nav-logo{ display: none; }

  .nav-inner{
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 16px;
  }

  /* SPは通常の横リンクを隠して、ハンバーガーを出す */
  .nav-links{ display: none; }


  .sp-menu{ z-index: 999999; }

  .hero{
    padding: 0px 16px 42px;
  }
  /* HERO文字：スマホでもちゃんと大きく */
  .hero-text-block{ max-width: 360px; }

  .hero-title{
    font-size: 40px;
    line-height: 1.06;
  }

  .hero-subtitle{
    font-size: 40px;
    line-height: 1.06;
  }

  .hero-tagline{
    font-size: clamp(12px, 3.8vw, 16px);
    margin-top: 12px;
    line-height: 1.5;
  }

  .hero-cta{
    position: fixed;
    right: 14px;
    bottom: 14px;

    /* ★ SPも大きく */
    width: 120px;
    height: 120px;

    z-index: 999999;
    isolation: isolate;
  }
  .hero-cta-text{ font-size: 12px; }

  /* SP：Lottieの左切れ防止（SPだけ強めに右へ寄せる） */
  .hero-cta lottie-player{
    width: 220%;
    height: 220%;
    max-width: none;
    overflow: visible !important;
    transform: translateX(42%);
    transform-origin: center;
  }

  .profile-card{
    height: auto !important;
    margin-top: 0 !important;

    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;

    padding: 26px 18px;
    border-radius: 28px;

    width: 100%;
    max-width: none;
    margin-left: auto !important;
    margin-right: auto !important;

    position: relative;
  }
  .profile-row{ margin-bottom: 14px; }
  .profile-year{ width: 72px; font-size: 12px; }
  .profile-detail p{ font-size: 13px; }

  .philosophy-card{
    max-width: 100%;
    padding: 46px 18px;
    border-radius: 18px;
  }
  .philosophy-heading{
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 14px;
  }
  .philosophy-card p{
    font-size: 13px;
    line-height: 1.9;
  }

  .profile-section{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    padding-left: 15px;
    padding-right: 15px;
  }
  .profile-section .section-inner{
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  .about-kurowassan{
    width: 78px;
    right: 12px;
    bottom: -20px;
  }

  /* WAVE (under red) */
  .wave-under-red{
    --wave-h: 36px;
    height: var(--wave-h);

    padding-inline: 0;
    background-origin: padding-box;
    background-clip: padding-box;
    background-position: 0 top;

    margin-top: -14px;
    background-size: auto var(--wave-h);
  }
  .wave-under-red + .philosophy-section{
    margin-top: -28px;
    padding-top: 28px;
  }

  /* WAVE (ve-jyu) */
  .wave-under-ve-jyu{
    --wave-h: 36px;
    height: var(--wave-h);

    padding-inline: 0;
    background-origin: padding-box;
    background-clip: padding-box;
    background-position: 0 top;
    background-size: auto var(--wave-h);

    margin-top: -14px;
  }

  /* ===== GRID BACKGROUND: SPでズレないように固定サイズにする ===== */
  .tools-section::before{
    /* coverだとSPで拡大縮小されてグリッドがズレるので固定サイズに。
       ※小さすぎる時はここを大きくする */
    background-size: 700px 700px;
    background-repeat: repeat;
    background-position: center top;
  }

  .work-section::before{
    /* 1枚目(grid)は固定サイズでリピート、2枚目(work-bg)はそのまま */
    background-size: 700px 700px, auto;
    background-repeat: repeat, repeat;
    background-position: center top, center;
  }

  /* WORK: 1列 */
  .work-grid{
    grid-template-columns: 1fr;
  }

  /* WORKS: スマホで見出しを上に詰める */
  .work-section .section-inner{
    padding-top: 32px; /* ← ここを小さくする（今より上に来る） */
  }

  /* WORK MORE: SP layout（スマホだけ）
     ・「work more」テキスト + ハート矢印を横並びで右寄せ
     ・absoluteをやめて“点だけ浮く”のを防ぐ
  */
  .work-more{
    width: 100%;
    margin-top: 18px;          /* 好みで調整 */
    margin-bottom: 0;

    display: flex;
    justify-content: flex-end;
    align-items: center;

    padding-right: 5px;       /* 右端から少し余白 */
    position: relative;
  }

  /* 文字リンク：スマホでもデカくしない（PCと同じサイズ感） */
  .work-more-btn{
    font-size: 20px;          /* ← ここを大きくしない */
    line-height: 1.2;
    padding: 0;
  }

  .work-more-btn .arrow{
    font-size: 14px;
    line-height: 1;
  }

  /* ハート矢印：スマホは“横並びの一員”にする */
  .work-more-heart{
    --heart-w: 32px;
    --heart-h: 32px;

    position: relative;        /* ← absoluteやめる */
    right: auto;
    top: auto;
    transform: none;

    width: var(--heart-w);
    height: var(--heart-h);
    margin: 0;
    flex: 0 0 auto;
  }

  .work-more-heart .cHeartArrow__heart{
    display: block;
    width: 100%;
    height: 100%;
  }

  .work-more-heart .cHeartArrow__heart img,
  .work-more-heart .heart-bg{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    aspect-ratio: 1 / 1;
  }

  /* 矢印は中央（少しだけ右寄せしたいなら -44%→-42%） */
  .work-more-heart .cHeartArrow__arrow{
    left: 50%;
    top: 50%;
    transform: translate(-44%, -50%);
    width: 62%;
    height: 24%;
    overflow: hidden;
  }

  /* SPはhover拡大を抑制（PCはそのまま） */
  .work-more-heart,
  .work-more-heart .cHeartArrow__heart img{
    transition: none !important;
  }
  .work-more-heart:hover,
  .work-more:hover .work-more-heart,
  .work-more:focus-within .work-more-heart{
    transform: none !important;
  }

  /* TOOLS (SP) */
  .tool-pill:hover .tool-icon.tool-anim,
  .tool-pill:focus-within .tool-icon.tool-anim{
    transform: translateY(-130px) scale(1.15);
  }
  .tool-pill:hover .tool-btn,
  .tool-pill:focus-within .tool-btn{
    transform: translateY(-130px);
  }
  .tools-grid{
    flex-direction: column;
    gap: 140px;
  }
  .tool-pill{
    width: min(360px, 96vw);
    height: 360px;
  }
  .tool-icon{
    width: 240px;
    height: 240px;
  }
  .tool-icon.tool-main{
    top: 60px;
    transform: scale(1.50);
  }
  /* === SP HEADER CLEAN === */
  .nav{
    background: transparent;   /* 赤いヘッダーラインを消す */

    /* ★SPはヘッダーを“重ねる”= 余白(段差)を作らない */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 4000;
  }

  .nav-inner{
    padding: 10px 14px;
    justify-content: flex-end; /* 右上にだけ配置 */
  }

  /* ★SP：HERO上の余白を詰める（文字は上げすぎない） */
  .hero{
    min-height: 100svh;
  }

  .hero-inner{
    min-height: 100svh;
    /* PCの 84px は大きすぎるのでSPは控えめに。
       文字の位置を上げない（上に寄りすぎない）ため、0ではなく少し残す */
    padding-top: 56px;
  }

  .nav-logo{
    display: none;             /* ロゴ非表示 */
  }

  /* 丸いハンバーガーボタン */
  .nav-toggle{
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #ee5752;       /* 赤丸 */
    align-items: center;
    justify-content: center;

    /* ★浮いて見えるシャドウ（自然な2段） */
    box-shadow:
      0 12px 28px rgba(0,0,0,0.18),
      0 4px 10px rgba(0,0,0,0.12);

    /* ★触った時の気持ちよさ */
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .nav-toggle:active{
    transform: translateY(1px) scale(0.98);
    box-shadow:
      0 8px 18px rgba(0,0,0,0.16),
      0 3px 8px rgba(0,0,0,0.10);
    filter: brightness(0.98);
  }

  .nav-toggle:focus-visible{
    outline: 2px solid rgba(255,252,253,.95);
    outline-offset: 4px;
  }

  .nav-toggle .nav-toggle__bars{
    width: 22px;
    height: 16px;
    position: relative;
  }

  .nav-toggle .nav-toggle__bars::before,
  .nav-toggle .nav-toggle__bars::after,
  .nav-toggle .nav-toggle__bars span{
    background: #fffcfd;       /* 白い三本線 */
    height: 2px;
    border-radius: 999px;
    transition: transform .22s ease, top .22s ease, opacity .18s ease;
  }

  /* SP: クリックで # に飛ばされるのを避けるため、
     もし nav-toggle / close が a[href="#"] になっていても見た目で判別しやすくする（動作はJS/HTMLで修正が必要） */
  .nav-toggle[href="#"],
  .sp-menu__close[href="#"]{
    -webkit-user-select: none;
    user-select: none;
  }
  .tool-btn{
    right: -60px;
    bottom: -5px;
  }
}


/* =====================================================
   WS-STORY：フッター下ストーリーセクション
   ===================================================== */

.ws-story {
  background: #fde2c9;
}

/* ----- 1. Opening ----- */
.ws-opening {
  position: relative;
  overflow: hidden;
  background: #fde2c9;
  padding-bottom: 20px;
}

/* ハーフトーンドット背景 */
.ws-opening__dots {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 700px;
  background-image: url('img/footer_dot.png');
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  pointer-events: none;
}

.ws-opening__content {
  position: relative;
  z-index: 1;
  padding: 60px 20px 0;
}

.ws-opening__manga-wrap {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
}

.ws-opening__manga-img {
  width: 40%;
  border-radius: 16px;
  display: block;
  margin: 0 auto;
}

.ws-opening__manga-img:first-child {
  margin-top: 400px;
}

.ws-opening__manga-img:last-child {
  width: 90%;
  margin-top: -120px;
}


/* ----- 3. Chat ----- */
.ws-chat {
  background: #fde2c9;
  padding: 0 20px 60px;
}

.ws-chat__inner {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.ws-chat__row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ws-chat__usagi{
  width: 135px;
  flex-shrink: 0;
}

.ws-chat__girl {
  width: 120px;
  flex-shrink: 0;
}

.ws-chat__bubble-wrap {
  width: 500px;
  height: 160px;
  background-image: url('img/hukidasi.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 0 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ws-chat__bubble-wrap--flip {
  transform: scaleX(-1);
}

.ws-chat__bubble-wrap--flip .ws-chat__text {
  transform: scaleX(-1);
}

.ws-chat__text {
  display: block;
  font-size: 1rem;
  line-height: 1.7;
  color: #fff;
}



/* ----- 4. Likes ----- */
.ws-likes {
  background: #fde2c9;
  padding: 30px 0 0;
  min-height: 10px;
}

.ws-likes__title {
  font-family: 'KodomoRounded', 'Inter', sans-serif;
  font-size: 30px;
  color: #ee5752;
  text-align: center;
  letter-spacing: 0.18em;
  margin-bottom: 20px;
}

.ws-likes__text {
  font-size: 16px;
  color: #ee5752;
  text-align: center;
  line-height: 1.8;
  margin-bottom: 120px;
}

.ws-likes__belt {
  background: #fff;
  padding: 100px 0;
  overflow: hidden;
  width: 100%;
  position: relative;
}

.ws-likes__track {
  display: flex;
  gap: 50px;
  width: max-content;
  padding: 0 9px;
  animation: ws-scroll 30s linear infinite;
}

@keyframes ws-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ws-pill {
  height: 200px;
  width: auto;
  flex-shrink: 0;
}

/* ----- 5. 10キロ ----- */
.ws-10kg {
  background: #fde2c9;
  padding: 60px 0 20px;
  position: relative;
  display: flex;
  justify-content: center;
}

.ws-10kg__group {
  position: relative;
  width: 660px;
  flex-shrink: 0;
}

.ws-10kg__panel {
  display: block;
}

.ws-10kg__panel--3 {
  width: 80%;
  margin-top: 90px;
  margin-left: -30px;
}

.ws-10kg__panel--4 {
  position: absolute;
  top: -90px;
  right: -10px;
  width: 240px;
}




/* ----- 6. CTA ----- */
.ws-cta {
  background: #fff;
  width: min(1150px, calc(100% - 200px));
  min-height: 580px;
  margin: 180px auto 0;
  padding: 0 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ws-cta__char {
  position: absolute;
  transform: translateY(-230px);
}

.ws-cta__char--l {
  width: 200px;
  left: 100px;
}

.ws-cta__char--r {
  width: 170px;
  right: 120px;
}

.ws-cta__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  width: 80%;
}

.ws-cta__text {
  font-family: 'KodomoRounded', 'Inter', sans-serif;
  font-size: 48px;
  color: #79303b;
  text-align: center;
  line-height: 1.6;
  margin: 0;
}

.ws-closing__text {
  font-size: 20px;
  color: #ee5752;
  letter-spacing: 0.1em;
  line-height: 1.8;
  text-align: center;
  margin: 0;
}

/* ----- 8. End nav ----- */
.ws-end-nav {
  background: #ee5752;
  padding: 22px 40px;
  display: flex;
  justify-content: center;
  gap: 60px;
  font-family: 'KodomoRounded', 'Inter', sans-serif;
  font-size: 18px;
  letter-spacing: 0.12em;
}

.ws-end-nav a {
  color: #fff;
}

.ws-end-nav a:hover {
  opacity: 0.7;
}

/* ----- SP対応 ----- */
@media (max-width: 768px) {

  .ws-pan__text {
    font-size: 16px;
    padding: 0 20px;
  }

  .ws-pan__char {
    display: none;
  }

  .ws-pan__food--1,
  .ws-pan__food--2 {
    display: none;
  }

  .ws-bubble {
    font-size: 15px;
    max-width: calc(100vw - 110px);
  }

  .ws-chat__icon {
    width: 50px;
    height: 50px;
  }

  .ws-likes__title {
    font-size: 24px;
  }

  .ws-pill {
    font-size: 16px;
    padding: 8px 22px;
  }

  .ws-10kg__inner {
    flex-direction: column;
    gap: 28px;
    align-items: center;
  }

  .ws-10kg__left {
    align-items: center;
    width: 100%;
  }

  .ws-10kg__char {
    max-width: 220px;
  }

  .ws-10kg__num {
    font-size: 64px;
  }

  .ws-10kg__label,
  .ws-10kg__sub {
    font-size: 18px;
  }

  .ws-cta {
    display: flex;
    flex-direction: column;
    width: calc(100% - 32px);
    min-height: auto;
    gap: 20px;
    padding: 44px 28px;
    border-radius: 56px;
  }

  .ws-cta__char {
    width: 120px;
    align-self: center;
  }

  .ws-cta__text {
    font-size: 24px;
  }

  .ws-end-nav {
    gap: 36px;
    font-size: 15px;
  }
}