/* ============================================================
   FOREST Hunting One  style.css
   配色：ベースは「白とティール」、目立たせたい所だけ「赤」
   ============================================================ */

/* ---- 色と字体（ここを変えると全体が変わります） ---- */
:root {
  --tiff: #86dfd2;        /* ティール（メイン） */
  --tiff-light: #c5efe7;  /* 薄いティール */
  --tiff-pale: #e8f9f6;   /* とても薄いティール（背景用） */
  --tiff-deep: #1a9c8d;   /* 濃いティール（アクセント・文字用） */
  --tiff-text: #0d6f66;   /* 小さな文字に使う濃いティール */
  --ink: #1d2b2e;         /* 文字の色 */
  --red: #c8262d;         /* 挿し色の赤 */
  --blue: #3f6fe0;        /* WORKSカードの角（小） */
  --yellow: #f2b632;      /* WORKSカードの角（横長） */
  --orange: #f7941d;      /* ショップへ ボタン */
  --gray: #5c6b6e;
  --hair: rgba(29, 43, 46, .12);   /* 細い区切り線 */
  --radius: 16px;
  --font-display: "Dela Gothic One", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Meiryo", sans-serif;
  --font-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Meiryo", sans-serif;
}

/* ---- 基本 ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body); color: var(--ink); background: #fff; line-height: 1.8; }
img { max-width: 100%; display: block; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, dl, dd { margin: 0; }
.container { width: min(1120px, 100% - 40px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: .6em 1em; z-index: 300; }
.skip:focus { left: 8px; top: 8px; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

/* ---- 社名ロゴ（画像がないときは、ロゴと同じ色の文字で表示） ---- */
.brand { display: inline-flex; align-items: center; }
.brand__img { display: block; height: 26px; width: auto; max-width: none; }
.brand__text { display: none; font-family: var(--font-display); white-space: nowrap; line-height: 1.2; }
.brand__text span:nth-child(1) { color: #c52127; }
.brand__text span:nth-child(2) { color: #9b7250; }
.brand__text span:nth-child(3) { color: #579b32; }
.brand.no-img .brand__img { display: none; }
.brand.no-img .brand__text { display: inline; }

/* ============================================================
   ヘッダー（白地。FOREST LAB は右端の赤いタブ）
   ============================================================ */
.site-header { position: sticky; top: 0; z-index: 200; background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink); border-bottom: 3px solid var(--tiff); transition: box-shadow .3s; }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(29,43,46,.1); }
.site-header__inner { width: 100%; height: 68px; padding-left: clamp(16px, 3vw, 48px); display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; text-decoration: none; }
.logo .brand__img { height: 26px; }
.logo .brand__text { font-size: 1.15rem; }

.gnav { height: 100%; }
.gnav ul { display: flex; align-items: stretch; gap: 2px; height: 100%; }
.gnav li { display: flex; align-items: center; }
.gnav a { position: relative; display: block; padding: .5em .95em; color: var(--ink); font-weight: 700; font-size: .88rem; letter-spacing: .1em; text-decoration: none; }
.gnav a::after { content: ""; position: absolute; left: .95em; right: .95em; bottom: .15em; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.gnav a:hover::after { transform: scaleX(1); }
.gnav__lab-item { align-items: stretch !important; margin-left: 10px; }
.gnav .gnav__lab { display: flex; align-items: center; padding: 0 clamp(20px, 3vw, 44px); background: var(--red); color: #fff; transition: background .25s, color .25s; }
.gnav .gnav__lab::after { display: none; }
.gnav .gnav__lab:hover { background: var(--tiff); color: var(--ink); }

.menu-btn { display: none; width: 44px; height: 44px; margin-right: 16px; border: 0; background: var(--tiff); border-radius: 12px; cursor: pointer; padding: 0; position: relative; }
.menu-btn__bar { position: absolute; left: 12px; right: 12px; height: 3px; background: var(--ink); border-radius: 2px; transition: transform .3s, opacity .3s; }
.menu-btn__bar:nth-child(1) { top: 14px; }
.menu-btn__bar:nth-child(2) { top: 21px; }
.menu-btn__bar:nth-child(3) { top: 28px; }
.menu-btn.is-open .menu-btn__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn.is-open .menu-btn__bar:nth-child(2) { opacity: 0; }
.menu-btn.is-open .menu-btn__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   ヒーロー（ファーストビュー）
   下から順に：①背景（デモリール動画）→ ②左側の斜めの四角（大きなりんごマーク入り）→ ③人物・雑誌
   ============================================================ */
.hero { --hx: clamp(24px, 6vw, 96px); --hy: clamp(56px, 9vw, 130px); position: relative; min-height: clamp(620px, 88vh, 800px); background: var(--tiff-pale); color: var(--ink); overflow: hidden; isolation: isolate; }

/* ① 背景（動画）。動画の枠は画面の右側56%。中心が、見えている右側の中心に来ます */
.hero__bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(135deg, var(--tiff-pale) 0%, var(--tiff-light) 100%); }
.hero__video { position: absolute; top: 0; bottom: 0; left: 44%; width: 56%; height: 100%; object-fit: cover; }
.reel-note { position: absolute; left: 64%; right: 6%; top: 50%; transform: translateY(-50%); text-align: center; font-weight: 700; font-size: .9rem; color: var(--tiff-text); background: rgba(255,255,255,.7); border: 2px dashed var(--tiff-deep); border-radius: var(--radius); padding: 1.6em 1em; }
.reel-note small { display: block; font-weight: 400; opacity: .8; margin-top: .4em; }
.hero__shapes { position: absolute; inset: 0; pointer-events: none; }
.shape { position: absolute; display: block; }
.shape--ring { right: -70px; top: 18%; width: 260px; height: 260px; border: 12px solid var(--tiff); border-radius: 50%; opacity: .7; animation: bob 7s ease-in-out infinite; }
.shape--tri { right: 28%; bottom: -36px; width: 130px; height: 130px; background: var(--red); clip-path: polygon(50% 0, 100% 100%, 0 100%); opacity: .9; animation: sway 6s ease-in-out infinite; }
.shape--sq { left: 70%; top: 66%; width: 56px; height: 56px; border: 6px solid var(--tiff-deep); opacity: .45; animation: spin 24s linear infinite; }

/* ② 左側の斜めの四角（重ねた紙のように見せて、右の動画に影を落とす） */
.hero__panel-wrap {
  position: absolute; inset: 0; z-index: 2;
  /* 影：大きくやわらかい影 ＋ ふちに沿った細い影。濃さは .34 / .28 の数字で調整 */
  filter: drop-shadow(14px 8px 22px rgba(10,38,36,.34)) drop-shadow(3px 1px 3px rgba(10,38,36,.28));
}
.hero__panel-back, .hero__panel { position: absolute; inset: 0; }
.hero__panel-back { background: var(--tiff-deep); clip-path: polygon(0 0, 61.6% 0, 49.6% 100%, 0 100%); }
.hero__panel {
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.025) 0 1px, transparent 1px 4px),   /* 紙のようなごく細かい質感 */
    linear-gradient(100deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 55%),     /* 左上のやわらかい光 */
    linear-gradient(170deg, #8fe6d9 0%, #7bd9cb 45%, #56bdb0 100%);                  /* 下に向かって少し深く */
  clip-path: polygon(0 0, 60% 0, 48% 100%, 0 100%);
}

/* りんごマーク：画面より大きく、ティールの面の一部としてあしらう。
   ・濃さ        → opacity（大きいほど濃い。.3 が目安）
   ・大きさ      → width（%）／ 位置 → left・top
   ・カラーにしたい場合 → mix-blend-mode: normal; filter: none; opacity: 1; にする */
.hero__apple {
  position: absolute; left: -9%; top: 50%; width: 86%; max-width: none; height: auto;
  transform: translateY(-47%) rotate(-6deg);
  mix-blend-mode: multiply; opacity: .3; filter: grayscale(1) contrast(1.05);
  pointer-events: none; user-select: none;
}

/* 大きなコピー（ふちどりなし） */
.hero__head { position: absolute; left: var(--hx); top: var(--hy); z-index: 1; }
.hero__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.6rem, 6.7vw, 8.8rem); line-height: 1.1; letter-spacing: -.015em; color: #14272a; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.hero__title .line { display: block; white-space: nowrap; }
.hero__title .dot { color: var(--red); }
.hero__rule { display: flex; align-items: center; gap: 14px; margin-top: 1.6em; }
.hero__rule::before { content: ""; width: 56px; height: 6px; background: var(--red); }
.hero__rule::after { content: ""; width: min(220px, 30%); height: 1px; background: rgba(29,43,46,.4); }
.hero__lead { margin-top: 1.1em; max-width: 24em; font-size: clamp(.95rem, 1.3vw, 1.1rem); font-weight: 500; line-height: 1.9; }

/* ③ 下部：人物（足元は下の帯に隠れていて、マウスを乗せると飛び出す） */
.hero__people { position: absolute; left: clamp(16px, 4vw, 64px); bottom: 0; z-index: 3; display: flex; align-items: flex-end; gap: 1.5em; font-size: clamp(7px, 1.07vw, 13.75px); }
.person { --hide: calc(var(--h) * .3em); position: relative; display: flex; flex-direction: column; align-items: center; cursor: pointer; }   /* .3 を大きくすると、もっと深く隠れる */
.person__fig { display: flex; flex-direction: column; align-items: center; transform: translateY(var(--hide)); transition: transform .55s cubic-bezier(.2, 1.1, .3, 1.35); }
.person__head { display: block; width: calc(var(--h) * .3em); height: calc(var(--h) * .3em); border-radius: 50%; background: var(--c, #fff); }
.person__body { display: block; width: calc(var(--h) * .52em); height: calc(var(--h) * .7em); margin-top: .35em; border-radius: 999px 999px 6px 6px; background: var(--c, #fff); }
.person__img { display: block; height: calc(var(--h) * 1.2em); width: auto; max-width: none; filter: drop-shadow(0 4px 6px rgba(10,38,36,.25)); }
.person__fig.has-img .person__head, .person__fig.has-img .person__body { display: none; }
.person__bubble { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(var(--hide)); margin-bottom: .6rem; background: #fff; color: var(--ink); border-radius: 999px; padding: .15em .9em; font-size: .72rem; font-weight: 700; white-space: nowrap; filter: drop-shadow(0 2px 0 rgba(29,43,46,.18)); transition: transform .55s cubic-bezier(.2, 1.1, .3, 1.35); }
.person__bubble::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: #fff; transform: translateX(-50%) rotate(45deg); }
.person:hover .person__fig, .person:focus .person__fig { transform: translateY(0); }
.person:hover .person__bubble, .person:focus .person__bubble { transform: translateX(-50%) translateY(0) scale(1.08); }
.person:focus:not(:focus-visible) { outline: none; }

/* 右下：雑誌（クリックでリンクへ） */
.mag { position: absolute; right: clamp(16px, 4vw, 64px); bottom: clamp(26px, 3.4vw, 46px); z-index: 3; width: clamp(120px, 13vw, 190px); text-decoration: none; transform: rotate(-4deg); transition: transform .4s cubic-bezier(.2, .9, .3, 1.3); }
.mag:hover, .mag:focus-visible { transform: translateY(-8px) rotate(0deg) scale(1.05); }
.mag__cover { position: relative; display: grid; place-items: center; aspect-ratio: 148 / 210; border-radius: 6px; overflow: hidden; background: var(--red); color: #fff; font-family: var(--font-display); font-size: 1.2rem; box-shadow: 0 12px 26px rgba(10,38,36,.45), 0 2px 4px rgba(10,38,36,.3); }
.mag__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mag__cover.has-img .mag__label { display: none; }
.mag__tag { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); background: var(--ink); color: #fff; border-radius: 999px; padding: .25em 1.1em; font-size: .72rem; font-weight: 700; letter-spacing: .1em; white-space: nowrap; transition: background .25s; }
.mag:hover .mag__tag, .mag:focus-visible .mag__tag { background: var(--red); }

/* ---- ファーストビューの下：ページ内メニュー ---- */
.quick-nav { background: #fff; border-bottom: 1px solid var(--hair); }
.quick-nav ul { display: grid; grid-template-columns: repeat(4, 1fr); width: min(1240px, 100%); margin-inline: auto; }
.quick-nav a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0 14px; padding: 22px clamp(16px, 2.4vw, 32px); text-decoration: none; border-left: 1px solid var(--hair); transition: background .3s; }
.quick-nav li:first-child a { border-left: 0; }
.quick-nav__num { grid-row: 1 / 3; font-family: var(--font-display); color: var(--red); font-size: .9rem; }
.quick-nav__en { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .06em; line-height: 1.4; }
.quick-nav__ja { grid-column: 2; font-size: .78rem; color: var(--gray); line-height: 1.4; }
.quick-nav__arrow { grid-row: 1 / 3; grid-column: 3; color: var(--tiff-deep); transition: transform .3s, color .3s; }
.quick-nav a:hover { background: var(--tiff-pale); }
.quick-nav a:hover .quick-nav__arrow { transform: translateY(5px); color: var(--red); }

/* ---- セクション共通 ---- */
.section { padding: clamp(72px, 10vw, 136px) 0; }
.section-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3em 1.1em; margin-bottom: clamp(32px, 5vw, 60px); }
.section-title::after { content: ""; flex: 1 1 60px; align-self: center; height: 1px; background: var(--hair); }
.section-title__en { font-family: var(--font-display); font-size: clamp(2.2rem, 5.4vw, 4rem); line-height: 1.1; }
.section-title__en::before { content: ""; display: inline-block; width: .2em; height: .2em; background: var(--red); margin-right: .28em; vertical-align: .2em; }
.section-title__ja { font-weight: 700; font-size: .95rem; color: var(--gray); letter-spacing: .1em; }
.section-title__ja--lg { font-family: var(--font-display); font-weight: 400; color: var(--ink); font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.3; letter-spacing: 0; }
.section-title--light::after { background: rgba(255,255,255,.3); }
.section-title--light .section-title__ja { color: var(--tiff-light); }
.section-title--light .section-title__en::before { background: var(--tiff); }

.btn { display: inline-flex; align-items: center; padding: .9em 1.9em; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; text-decoration: none; transition: background .25s, color .25s, transform .25s; }
.btn:hover { background: var(--tiff); color: var(--ink); transform: translateY(-3px); }
.btn--accent { background: var(--red); }
.btn--accent:hover { background: var(--ink); color: #fff; }
.btn--sm { padding: .7em 1.5em; font-size: .9rem; }
.btn--ghost { background: transparent; border: 2px solid var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--tiff); border-color: var(--tiff); color: var(--ink); }

.more-wrap { margin-top: clamp(28px, 4vw, 48px); text-align: right; }
.more { font-family: var(--font-display); font-size: 1.5rem; text-decoration: none; display: inline-block; }
.more span { color: var(--red); display: inline-block; transition: transform .25s; }
.more:hover span { transform: translateX(8px); }
.more__sub { display: block; font-size: .85rem; color: var(--gray); }
.more-wrap--light .more span { color: var(--tiff); }
.more-wrap--light .more__sub { color: var(--tiff-light); }

/* ---- 画像の置き場所（画像がないときは薄い色の枠が出ます） ---- */
.ph { position: relative; overflow: hidden; display: grid; place-items: center; background: var(--tiff-light) repeating-linear-gradient(135deg, rgba(255,255,255,.4) 0 14px, transparent 14px 28px); }
.ph::after { content: "画像を入れる場所\A images/" attr(data-file); white-space: pre-line; text-align: center; font-size: .75rem; font-weight: 700; color: rgba(29,43,46,.55); padding: 1em; }
.ph__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .4s; }
.ph__img--hover { opacity: 0; z-index: 2; }
.ph__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }

/* ---- ABOUT ---- */
.about { overflow-x: clip; }
.about-lead { max-width: 760px; margin: 0 0 clamp(28px, 4vw, 48px); }
.about-lead__tag { font-family: var(--font-display); color: var(--red); font-size: .85rem; letter-spacing: .16em; margin-bottom: .6em; }
.about-lead__text { font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 700; line-height: 1.9; }
.about-lead__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.4em; }

.about__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; }
.about-card-wrap { display: flex; }
.about-card { flex: 1; display: grid; grid-template-columns: minmax(130px, 200px) 1fr; gap: 28px; background: var(--tiff-pale); border-radius: 28px; padding: clamp(20px, 3.4vw, 40px); align-content: start; box-shadow: 0 2px 3px rgba(29,43,46,.2), 0 1px 1px rgba(29,43,46,.16); }
.about-card__photo { aspect-ratio: 3 / 4; border-radius: 14px; }
.about-card__text h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; margin: 1.2em 0 .3em; }
.about-card__text h3:first-child { margin-top: 0; }
.about-brand { grid-column: 1 / -1; }
.about-brand .brand__img { height: clamp(26px, 3.4vw, 40px); }
.about-brand .brand__text { font-size: clamp(1.5rem, 4vw, 2.4rem); }

/* Instagram枠（特定の投稿を1つ埋め込む） */
.sns-box { background: var(--tiff); color: var(--ink); border-radius: 28px; padding: clamp(20px, 3vw, 32px); min-height: 280px; display: flex; flex-direction: column; }
.sns-box__title { font-family: var(--font-display); font-size: 1.05rem; display: flex; align-items: baseline; gap: .8em; }
.sns-box__title span { font-size: .72rem; letter-spacing: .16em; color: var(--red); }
.sns-box__embed { flex: 1; display: grid; place-items: center; min-height: 200px; margin-top: 12px; overflow: auto; border-radius: 14px; }
.sns-box__embed .instagram-media { min-width: 0 !important; max-width: 100% !important; margin: 0 auto !important; }   /* Instagramの埋め込みを、枠に収める */
.sns-box__embed iframe { max-width: 100%; border: 0; }
.sns-box__note { text-align: center; font-size: .85rem; opacity: .75; padding: 1em; }
.sns-box__link { align-self: flex-start; margin-top: 14px; background: var(--ink); color: #fff; font-weight: 700; border-radius: 999px; padding: .55em 1.3em; text-decoration: none; transition: background .25s; }
.sns-box__link:hover { background: var(--red); }

/* 名刺カード：紙が舞い落ちるアニメーション（枠そのものは動かさず、中のカードだけ動かす） */
.js .about-card-wrap.reveal { opacity: 1; transform: none; transition: none; }
.js .about-card-wrap .about-card { opacity: 0; transform: translateX(-120vw) rotate(-8deg); transition: none; }
.js .about-card-wrap.is-visible .about-card { opacity: 1; transform: none; animation: card-drop 2.4s; }  /* 2.4s が動く時間 */

/* ---- WORKS（赤い背景。カードの角の色は、赤・青・黄色） ---- */
.works { position: relative; z-index: 1; background: #a8212a; color: #fff; padding-top: calc(5vw + 72px); padding-bottom: calc(5vw + 72px); clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%); }
.works-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.is-lg { grid-column: span 4; }
.is-sm { grid-column: span 3; }
.is-wide { grid-column: span 6; }
.works-grid__item { display: flex; }
.card { --accent: var(--red); position: relative; display: flex; flex-direction: column; width: 100%; background: #fff; color: var(--ink); border-radius: var(--radius); overflow: hidden; text-decoration: none; box-shadow: 0 4px 8px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.2); transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
.card--small { --accent: var(--blue); }
.card--wide { --accent: var(--yellow); }
.card:hover, .card:focus-visible { transform: translateY(-8px); box-shadow: 0 24px 36px rgba(0,0,0,.4), 0 4px 8px rgba(0,0,0,.25); }
.card::after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 52px; height: 52px; background: var(--accent); clip-path: polygon(100% 0, 100% 100%, 0 100%); transition: width .3s, height .3s; }   /* ふちから10px内側に置いて、赤い背景と同化しないようにする */
.card:hover::after { width: 88px; height: 88px; }
.card:hover .ph__img { transform: scale(1.06); }
.card:hover .ph__img--hover { opacity: 1; }
.card .ph { aspect-ratio: 4 / 3; }
.card--small .ph, .card--wide .ph { aspect-ratio: 16 / 9; }
.card__body { padding: 16px 20px 24px; }
.tag { display: inline-block; background: var(--tiff-pale); color: var(--tiff-text); font-size: .72rem; font-weight: 700; letter-spacing: .08em; padding: .1em .9em; border-radius: 999px; }
.card__title { font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; line-height: 1.4; margin-top: .5em; padding-right: 36px; }
.card__text { font-size: .88rem; color: var(--gray); margin-top: .4em; padding-right: 36px; }

/* ---- SHOP（ECサイトへの誘導） ---- */
.shop { position: relative; background: #fff; margin-top: -5vw; padding-top: calc(5vw + clamp(72px, 10vw, 136px)); }
.shop .section-title { margin-bottom: 16px; }
.shop__lead { max-width: 640px; font-weight: 700; margin-bottom: clamp(28px, 4vw, 48px); }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 350px)); gap: 28px; justify-content: center; }
.shop-grid__item { display: flex; }
.shop-card { display: flex; flex-direction: column; width: 100%; background: #fff; border: 1px solid var(--hair); border-radius: var(--radius); overflow: hidden; text-decoration: none; box-shadow: 0 2px 6px rgba(29,43,46,.06); transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .4s; }
.shop-card:hover, .shop-card:focus-visible { transform: translateY(-8px); box-shadow: 0 22px 34px rgba(10,38,36,.16); border-color: var(--tiff); }
.shop-card .ph { aspect-ratio: 4 / 3; }
.shop-card:hover .ph__img { transform: scale(1.06); }
.shop-card__body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 22px; }
.shop-card__title { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; line-height: 1.4; }
.shop-card__text { font-size: .88rem; color: var(--gray); margin: .4em 0 1.2em; }
.shop-card__btn { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: .5em; background: var(--orange); color: var(--ink); font-weight: 700; padding: .6em 1.4em; border-radius: 999px; transition: background .25s, color .25s; }
.shop-card:hover .shop-card__btn, .shop-card:focus-visible .shop-card__btn { background: var(--ink); color: #fff; }

/* ---- SERVICE ---- */
.service { position: relative; background: var(--tiff-pale); }
.service__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
/* 会社ロゴのりんごマークの形に切り抜く（中に画像や動画が入る） */
.ph--shape {
  aspect-ratio: 1600 / 1158;
  clip-path: polygon(
    14.4% 6.7%, 25.6% 13.1%, 27.2% 11.1%, 39.5% 1.2%, 42.5% 5.4%, 44.3% 11.7%, 41.3% 20%,
    60.9% 33.2%, 56.8% 59.6%, 72.8% 59.6%, 84.4% 69.5%, 98.8% 57.9%, 93.4% 78.2%, 80.6% 87.7%, 68.8% 76%,
    53.6% 75.7%, 52.2% 84.2%, 31.3% 99.3%, 9.4% 85.1%, 0.9% 34.5%, 19.1% 23.1%, 9.4% 22.6%, 8% 19.2%
  );
}
.service__visual { filter: drop-shadow(6px 8px 0 rgba(29,43,46,.16)); }
.service__visual .ph--shape { max-width: 600px; margin-inline: auto; }
.service__catch { font-family: var(--font-display); font-size: clamp(1.05rem, 2.2vw, 1.4rem); line-height: 1.6; margin: 1em 0; color: var(--tiff-text); }
.service__text p + p { margin-top: 1.2em; }

.consult { margin-top: clamp(56px, 8vw, 96px); text-align: center; }
.consult__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 3vw, 1.9rem); }
.bubbles { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 16px; max-width: 880px; margin: 28px auto; }
.bubbles li { background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: .45em 1.2em; font-weight: 700; font-size: .9rem; animation: bob 4s ease-in-out infinite; }
.bubbles li:nth-child(2n) { animation-delay: -1.2s; }
.bubbles li:nth-child(3n) { animation-delay: -2.4s; border-color: var(--red); }
.consult__note { font-weight: 700; margin-bottom: 1.2em; }

/* ---- フッター（白地＋ティールの上線。ロゴに白い縁取りは付けない） ---- */
.site-footer { background: #fff; color: var(--ink); border-top: 6px solid var(--tiff); padding: 64px 0 28px; }
.site-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.footer-brand .brand__img { height: 32px; }
.footer-brand .brand__text { font-size: 1.4rem; }
.company { margin-top: 1.2em; font-size: .88rem; }
.company div { display: flex; gap: 1em; }
.company dt { min-width: 4em; color: var(--gray); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; align-content: flex-start; font-weight: 700; letter-spacing: .08em; font-size: .9rem; }
.footer-nav a { text-decoration: none; }
.footer-nav a:hover { color: var(--red); }
.copyright { text-align: center; font-size: .78rem; color: var(--gray); margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--hair); }

/* ---- 「ここ面白いよ」吹き出し（FOREST LABを指す／約30秒後に出現／画面に追従） ---- */
.lab-bubble {
  position: fixed; top: 88px; right: 12px; z-index: 150;
  display: flex; flex-direction: column; align-items: center;
  background: var(--red); color: #fff; font-weight: 700; font-size: .9rem; line-height: 1.4;
  padding: .65em 1.4em; border-radius: 18px; text-decoration: none;
  box-shadow: 0 3px 6px rgba(29,43,46,.25);
  opacity: 0; visibility: hidden; transform-origin: 85% 0;
  /* 30s が「出現するまでの秒数」。20s や 45s などに変えられます */
  animation: lab-in .8s cubic-bezier(.2, .8, .2, 1.2) 30s forwards, lab-bob 3s ease-in-out 31s infinite;
  transition: background .25s;
}
.lab-bubble small { font-size: .72rem; font-weight: 500; opacity: .9; }
.lab-bubble::before { content: ""; position: absolute; top: -9px; right: calc(clamp(20px, 3vw, 44px) + 32px); width: 18px; height: 18px; background: var(--red); border-radius: 3px 0 0 0; transform: rotate(45deg); transition: background .25s; }
.lab-bubble:hover, .lab-bubble:focus-visible { background: var(--ink); }
.lab-bubble:hover::before, .lab-bubble:focus-visible::before { background: var(--ink); }

/* ---- スクロールで出てくる動き ---- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: var(--delay, 0s); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .about-card-wrap.reveal { opacity: 1; transform: none; transition: none; }

@keyframes bob { 50% { transform: translateY(-8px); } }
@keyframes sway { 50% { transform: rotate(10deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes lab-in {
  from { opacity: 0; visibility: visible; transform: translateY(-10px) scale(.5); }
  to   { opacity: 1; visibility: visible; transform: none; }
}
@keyframes lab-bob { 50% { transform: translateY(5px); } }
@keyframes lab-show { to { opacity: 1; visibility: visible; } }

/* 名刺カード：高い所から落とした紙が、空気抵抗を受けて左右に揺れながら収まる動き。
   落ちている最中は影が大きくぼけ、机に近づくほど小さく締まります。 */
@keyframes card-drop {
  0% {
    opacity: 0;
    transform: perspective(1400px) translate3d(-115vw, -26vh, 0) rotateZ(-28deg) rotateY(50deg);
    box-shadow: 0 36px 44px -6px rgba(29,43,46,.16), 0 18px 20px -4px rgba(29,43,46,.10);
    animation-timing-function: cubic-bezier(.33, .1, .25, 1);
  }
  8% { opacity: 1; }
  18% {
    transform: perspective(1400px) translate3d(-70vw, -6vh, 0) rotateZ(16deg) rotateY(-32deg);
    box-shadow: 0 26px 32px -6px rgba(29,43,46,.15), 0 12px 14px -4px rgba(29,43,46,.10);
    animation-timing-function: cubic-bezier(.33, .1, .25, 1);
  }
  38% {
    transform: perspective(1400px) translate3d(-30vw, 4vh, 0) rotateZ(-11deg) rotateY(20deg);
    box-shadow: 0 16px 22px -4px rgba(29,43,46,.16), 0 8px 10px -2px rgba(29,43,46,.12);
    animation-timing-function: ease-in-out;
  }
  58% {
    transform: perspective(1400px) translate3d(-6vw, -1.5vh, 0) rotateZ(6deg) rotateY(-9deg);
    box-shadow: 0 8px 12px -2px rgba(29,43,46,.17), 0 4px 5px -1px rgba(29,43,46,.13);
    animation-timing-function: ease-in-out;
  }
  76% {
    transform: perspective(1400px) translate3d(2vw, .8vh, 0) rotateZ(-2.5deg) rotateY(4deg);
    box-shadow: 0 4px 6px rgba(29,43,46,.18), 0 2px 3px rgba(29,43,46,.14);
    animation-timing-function: ease-in-out;
  }
  90% {
    transform: perspective(1400px) translate3d(-.5vw, 0, 0) rotateZ(1deg) rotateY(-1deg);
    box-shadow: 0 2px 4px rgba(29,43,46,.19), 0 1px 2px rgba(29,43,46,.15);
    animation-timing-function: ease-out;
  }
  100% {
    opacity: 1;
    transform: perspective(1400px) translate3d(0, 0, 0) rotateZ(0) rotateY(0);
    box-shadow: 0 2px 3px rgba(29,43,46,.2), 0 1px 1px rgba(29,43,46,.16);
  }
}

/* ---- 動きが苦手な方の設定を尊重 ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .about-card-wrap .about-card { opacity: 1; transform: none; }
  .lab-bubble { animation: lab-show .01s 30s forwards !important; }  /* 30秒後に、動かさずに表示 */
}

/* ---- ヘッダーのメニュー（幅960px以下でボタン表示に切り替え） ---- */
@media (max-width: 960px) {
  .menu-btn { display: block; }
  .gnav { position: absolute; top: 100%; left: 0; right: 0; height: auto; background: #fff; padding: 12px 16px 24px; box-shadow: 0 12px 24px rgba(29,43,46,.15); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, transform .25s, visibility .25s; }
  .gnav.is-open { opacity: 1; visibility: visible; transform: none; }
  .gnav ul { flex-direction: column; align-items: stretch; gap: 4px; height: auto; }
  .gnav li { display: block; }
  .gnav a { padding: .9em 1em; font-size: 1rem; }
  .gnav a::after { display: none; }
  .gnav a:hover { background: var(--tiff-pale); }
  .gnav__lab-item { margin-left: 0; }
  .gnav .gnav__lab { display: block; margin-top: 6px; padding: .9em 1em; border-radius: 12px; text-align: center; }
  .gnav .gnav__lab:hover { background: var(--tiff); }
  .lab-bubble::before { right: 17px; }   /* スマホでは、メニューボタンを指す */
}

/* ---- タブレット・スマホ ---- */
@media (max-width: 860px) {
  /* ファーストビュー：上＝ティールの四角、下＝動画 の縦並びにする */
  .hero { display: flex; flex-direction: column; min-height: 0; }
  .hero__panel-wrap { position: relative; inset: auto; order: 1; filter: drop-shadow(0 10px 14px rgba(10,38,36,.3)); }
  .hero__panel-back { display: none; }
  .hero__panel { position: relative; inset: auto; clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%); padding: 56px 22px 96px; }
  .hero__apple { left: -30%; width: 165%; transform: translateY(-48%) rotate(-5deg); }
  .hero__head { position: static; }
  .hero__title { font-size: clamp(2.6rem, 12.5vw, 4.4rem); }
  .hero__bg { position: relative; inset: auto; order: 2; min-height: 440px; margin-top: -40px; }
  .hero__video { left: 0; width: 100%; }
  .reel-note { left: 22px; right: 22px; top: 130px; transform: none; }
  .hero__people { left: 14px; font-size: 9.5px; }
  .mag { width: 108px; right: 14px; bottom: 30px; }
  .shape--ring { right: -90px; top: 8%; width: 220px; height: 220px; }
  .shape--sq { display: none; }

  .quick-nav ul { grid-template-columns: repeat(2, 1fr); }
  .quick-nav li:nth-child(odd) a { border-left: 0; }
  .quick-nav li:nth-child(n+3) a { border-top: 1px solid var(--hair); }

  /* 以降のセクション */
  .about__grid, .service__grid { grid-template-columns: 1fr; }
  .about-card { grid-template-columns: 110px 1fr; gap: 18px; }

  .works-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .is-lg, .is-wide { grid-column: span 2; }
  .is-sm { grid-column: span 1; }
  .card--small .card__title { font-size: .95rem; padding-right: 20px; }
}

@media (max-width: 520px) {
  .person--extra { display: none; }
  .about-card { grid-template-columns: 1fr; }
  .about-card__photo { aspect-ratio: 4 / 3; max-width: 260px; }
  .more-wrap { text-align: left; }
}

/* ============================================================
   追加：りんごを少し小さく／サイト内検索／フッター
   ============================================================ */

/* ファーストビュー左の大きなりんごを、少し小さく（幅 86% → 72%）。
   さらに小さくしたいときは 72% の数字を下げます */
.hero__apple { left: -5%; width: 72%; }
@media (max-width: 860px) { .hero__apple { left: -22%; width: 135%; } }

/* --- ヘッダーの検索 --- */
.site-header__inner { justify-content: flex-start; }
.search-btn { margin-left: auto; margin-right: 6px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: background .25s, color .25s; }
.search-btn:hover, .search-btn[aria-expanded="true"] { background: var(--tiff-pale); color: var(--red); }

.site-search { position: absolute; left: 0; right: 0; top: 100%; margin-top: 3px; background: #fff; border-bottom: 3px solid var(--tiff); box-shadow: 0 16px 30px rgba(29,43,46,.14); }
.site-search__inner { width: min(720px, 100% - 32px); margin-inline: auto; padding: 18px 0 22px; }
.site-search__form { display: flex; gap: 10px; }
.site-search__input { flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: .8em 1.1em; border: 2px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); }
.site-search__input:focus { outline: 3px solid var(--tiff); outline-offset: 2px; border-color: var(--tiff-deep); }
.site-search__close { border: 0; background: var(--ink); color: #fff; font: inherit; font-weight: 700; font-size: .9rem; padding: 0 1.3em; border-radius: 999px; cursor: pointer; transition: background .25s; }
.site-search__close:hover { background: var(--red); }
.site-search__results { max-height: 52vh; overflow-y: auto; margin-top: 14px; }
.site-search__results a { display: block; padding: .8em 1em; border-radius: 12px; text-decoration: none; }
.site-search__results a:hover, .site-search__results a:focus-visible { background: var(--tiff-pale); }
.site-search__title { display: block; font-weight: 700; }
.site-search__desc { display: block; font-size: .85rem; color: var(--gray); }
.site-search__empty { padding: .8em 1em; color: var(--gray); font-size: .9rem; }

/* --- フッター：左＝会社情報、中央＝りんご（Pagetop）、右＝メニュー --- */
.site-footer__inner { display: grid; grid-template-columns: 1.3fr auto 1fr; justify-content: stretch; align-items: start; gap: 32px 48px; }
.company div { margin-top: .5em; }
.company dt { min-width: 6.5em; color: var(--gray); }
.company a { text-decoration: none; border-bottom: 1px solid var(--hair); transition: color .25s, border-color .25s; }
.company a:hover { color: var(--red); border-color: var(--red); }
.footer-nav { flex-direction: column; align-items: flex-end; gap: 10px; }

.pagetop { display: flex; flex-direction: column; align-items: center; gap: 10px; align-self: center; text-decoration: none; }
.pagetop__mark { height: clamp(72px, 9vw, 110px); width: auto; transition: transform .5s cubic-bezier(.2, 1.1, .3, 1.35); }
.pagetop:hover .pagetop__mark { transform: translateY(-8px) rotate(-6deg); }
.pagetop__label { display: inline-flex; align-items: center; gap: .6em; color: var(--red); font-weight: 700; letter-spacing: .06em; }
.pagetop__arrow { display: grid; place-items: center; width: 1.9em; height: 1.9em; border: 2px solid var(--red); border-radius: 50%; line-height: 1; transition: background .25s, color .25s; }
.pagetop:hover .pagetop__arrow { background: var(--red); color: #fff; }

@media (max-width: 860px) {
  .site-footer__inner { grid-template-columns: 1fr; }
  .pagetop { order: -1; }
  .footer-nav { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 8px 24px; }
}