@charset "UTF-8";

/* ==========================================
   共通スタイル（全ページ）
   ========================================== */
:root {
  --navy: #1a2045;
  --navy-deep: #0e1228;
  --navy-foot: #222952;
  --brown: #743e27;
  --cream: #e7e5d8;
  --charcoal: #1f212b;
  --charcoal-2: #383839;
  --gold: #C48F3B;
  --gold-light: #c9a35e;
  --wine: #5a1a10;
  --ink: #2b2b2b;
  --white-28: rgba(255, 255, 255, .28);
  /* フォント
     --mincho  … 基本（Zen Old Mincho）。body に指定しているので、何も書かなければこれになる
     --serif-en … 欧文のイタリック（手順の番号など）
     --didone   … 「選ばれる理由」カードの番号・英字
     --cond    … 「Born in NOTO, JAPAN」の大きな英字（DIN Condensed。入っていない環境は Oswald で表示） */
  --mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --serif-en: "Cormorant Garamond", "Zen Old Mincho", serif;
  --didone: "Bodoni Moda", "Zen Old Mincho", serif;
  --cond: "DIN Condensed", "Oswald", "Zen Kaku Gothic New", sans-serif;
  box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth
}

body {
  background: var(--navy-deep);
  color: #fff;
  font-family: var(--mincho);
  font-size: 14px;
  line-height: 2;
  -webkit-font-smoothing: antialiased
}

img {
  max-width: 100%;
  display: block
}

a {
  color: inherit
}

:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px
}

/* ---------- Loading ---------- */
.loading {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--navy);
  display: grid;
  place-items: center;
  transition: opacity .8s ease .2s, visibility 0s 1s
}

.loading img {
  width: 120px
}

.is-loaded .loading {
  opacity: 0;
  visibility: hidden
}

/* ---------- Split layout ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh
}

/* 左：固定の写真 */
.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #6f8fc4
}

.stage>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 写真ごとに見せる位置を --pos で指定（左右% 上下%）。指定なしは中央
     横長の写真なので、実際に効くのは左右の値だけ */
  object-position: var(--pos, 50% 50%);
  /* スライドショー：表示中の写真（.is-show）をフェードイン＋ゆっくり拡大 */
  opacity: 0;
  transition: opacity 1.6s ease
}

/* 写真ごとの見せたい位置（PC）
   ファイル名で指定しているので、HTMLで順番を入れ替えてもそのまま効きます
   写真を差し替えたときは、ここの数値を調整してください */
.stage>img[src*="main-01"] { --pos: 50% 50%; }  /* 器の牡蠣：グラスと器が入るように */
.stage>img[src*="main-02"] { --pos: 35% 50%; }  /* 船の上の2人：2人とも入るように */
.stage>img[src*="main-03"] { --pos: 50% 50%; }  /* 牡蠣2つ */
.stage>img[src*="main-04"] { --pos: 58% 50%; }  /* 牡蠣2つ：2つが中央にくるように */
.stage>img[src*="main-05"] { --pos: 45% 50%; }  /* 養殖バスケット */

.stage>img.is-show,
.stage>img.is-prev {
  animation: stage-zoom 8s linear both
}

.stage>img.is-show {
  opacity: 1
}

/* 写真の上のロゴ・英字（stage_logo.png / stage_copy.png は紺色の画像）
   写真に data-tone="white" があるときは白に切り替え（main.js が .stage に data-tone / data-tone-copy を付ける）
   切り替えの速さは写真のフェード（1.6s）に合わせている */
.stage-over {
  position: absolute;
  inset: 0;
  pointer-events: none
}

/* 文字のまわりにうっすら光（紺の時は白い光、白の時は暗い影）を付けて、
   写真の暗い部分・ごちゃっとした部分にかかっても読めるようにする
   濃さは rgba の最後の数字、広がりは px で調整 */
.stage-over img {
  filter: brightness(1) invert(0) drop-shadow(0 0 3px rgba(255, 255, 255, .7)) drop-shadow(0 0 14px rgba(255, 255, 255, .5));
  transition: filter 1.6s ease
}

/* ロゴは data-tone、英字は data-tone-copy（指定なしはロゴと同じ）で白に */
.stage[data-tone="white"] .stage-logo img,
.stage[data-tone-copy="white"] .stage-copy {
  filter: brightness(0) invert(1) drop-shadow(0 0 3px rgba(0, 0, 0, .5)) drop-shadow(0 0 14px rgba(0, 0, 0, .35))
}

/* ロゴ：左上（位置は left / top、大きさは width で調整） */
.stage-logo {
  position: absolute;
  left: 4.5%;
  top: 36px;
  width: clamp(110px, 17%, 180px);
  pointer-events: auto;
  transition: opacity .3s
}

.stage-logo:hover {
  opacity: .7
}

.stage-logo img {
  width: 100%
}

/* 英字：写真の幅いっぱい。下端が少し切れる位置（切れる量は translateY の % で調整） */
.stage-copy {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  transform: translateY(17%)
}

@keyframes stage-zoom {
  from {
    transform: scale(1)
  }

  to {
    transform: scale(1.1)
  }
}

/* SP用：拡大を控えめに */
@keyframes stage-zoom-sp {
  from {
    transform: scale(1)
  }

  to {
    transform: scale(1.04)
  }
}

/* 右：スクロールするコンテンツ */
.content {
  position: relative;
  overflow: hidden;
  background: var(--navy-deep)
}

/* 左右の余白は右カラム幅の約8% */
.inner {
  width: 84%;
  margin: 0 auto
}

.sec {
  position: relative;
  padding: 160px 0
}

/* 見出し：下に筆の波線（wave-01.png） */
.ttl {
  font-family: "Shippori Mincho", var(--mincho);
  text-align: center;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.5
}

.ttl small {
  display: block;
  position: relative;
  font-size: 14px;
  font-weight: 400;
  color: var(--white-28);
  margin-top: 4px
}

.ttl small::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -18px;
  width: 210px;
  height: 48px;
  transform: translateX(-50%);
  background: url(../img/wave-01.png) center/contain no-repeat;
  opacity: .5;
  pointer-events: none
}

/* ボタン（白線） */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(100%, 300px);
  margin: 0 auto;
  padding: 12px 24px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  line-height: 1.4;
  background: none;
  cursor: pointer;
  font-family: inherit;
  transition: background .3s, color .3s
}

.btn:hover {
  background: #fff;
  color: var(--navy)
}

/* ボタン（ゴールド・オンラインストア） */
/* フォントは Hina Mincho */
.btn-gold {
  font-family: "Hina Mincho", var(--mincho);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 30px;
  border-radius: 999px;
  background: var(--gold);
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  line-height: 1.4;
  transition: background .3s, color .3s
}

.btn-gold img {
  width: 20px;
  flex: none
}

.btn-gold:hover {
  background: #fff;
  color: var(--gold)
}

/* ホバーで白背景になるのでアイコンをゴールドに */
.btn-gold:hover img {
  filter: brightness(0) saturate(100%) invert(62%) sepia(32%) saturate(640%) hue-rotate(358deg) brightness(88%)
}

/* ---------- Menu ---------- */
.menu-btn {
  position: fixed;
  z-index: 60;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  right: 14px;
  width: 60px;
  height: 64px;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px
}

/* 牡蠣殻の成長線をイメージした3本の弧 → 開くと × */
.menu-btn svg {
  width: 40px;
  height: 40px;
  overflow: visible
}

.menu-btn svg * {
  transition: transform .45s cubic-bezier(.4, 0, .2, 1), opacity .35s;
  transform-box: view-box;
  transform-origin: 20px 20px
}

.menu-btn .x {
  opacity: 0;
  transform: scaleX(.2)
}

.nav-open .menu-btn .arc {
  opacity: 0;
  transform: scale(.4)
}

.nav-open .menu-btn .x {
  opacity: 1
}

.nav-open .menu-btn .x1 {
  transform: rotate(45deg)
}

.nav-open .menu-btn .x2 {
  transform: rotate(-45deg)
}

.menu-btn span {
  font-size: 11px;
  line-height: 1
}

/* 開いたメニュー：PCは左にロゴ・右にリンク、SPはリンクのみ */
.gnav {
  position: fixed;
  z-index: 55;
  inset: 0;
  background: linear-gradient(180deg, #1a2045 0%, #0e1228 55%, #222952 100%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s, visibility 0s .35s
}

.nav-open .gnav {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s
}

.gnav a {
  text-decoration: none
}

.gnav-brand {
  text-align: center
}

.gnav-brand a {
  display: block;
  transition: opacity .3s
}

.gnav-brand a:hover {
  opacity: .7
}

.gnav-brand img {
  width: 200px;
  margin: 0 auto
}

.gnav-brand .name {
  font-weight: 600;
  font-size: 22px;
  line-height: 1.4;
  margin-top: 28px
}

/* 幅は一番長い項目に合わせる（どの項目も1行に収める） */
.gnav-body {
  justify-self: center;
  width: max-content;
  min-width: 240px;
  padding: 60px 0
}

.gnav-list {
  list-style: none;
  white-space: nowrap;
  font-size: 15px;
  line-height: 1.6;
  display: grid;
  gap: 20px
}

.gnav-list a:hover {
  opacity: .65
}

.gnav .btn-gold {
  margin-top: 44px
}

/* ---------- 右端の縦タブ「公式オンラインストア」（PCのみ） ---------- */
/* 画像：assets/img/store-tab.png（タブ＋牡蠣を1枚に。表示幅の2倍で書き出し）
   大きさは width、上下の位置は bottom で調整 */
.store-tab {
  position: fixed;
  z-index: 50;
  right: 0;
  bottom: 30px;
  display: block;
  width: 92px;
  transition: opacity .3s
}

.store-tab img {
  width: 100%
}

.store-tab:hover {
  opacity: .7
}

/* ---------- Footer ---------- */
.footer {
  text-align: center;
  padding: 80px 0 60px
}

.footer .logo {
  width: min(280px, 44%);
  margin: 0 auto
}

.footer h2 {
  font-weight: 600;
  font-size: 20px;
  margin-top: 40px;
  line-height: 1.4
}

.footer address {
  font-style: normal;
  font-size: 14px;
  margin-top: 14px;
  line-height: 1.8
}

.footer .tel {
  font-size: 19px;
  margin-top: 14px;
  line-height: 1.6
}

.footer .tel a {
  text-decoration: none
}

.sns {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 20px
}

/* アイコンは画像（icon_facebook / icon_x / icon_instagram.png） */
.sns a {
  display: block;
  width: 33px;
  transition: opacity .3s
}

.sns a:hover {
  opacity: .7
}

.footer .copy {
  font-size: 16px;
  margin-top: 50px
}

/* ---------- 下層ページの背景（トップ以外） ---------- */
.page {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 45%, var(--navy-foot) 100%)
}

/* ---------- SP下部メニュー ---------- */
.sp-bar {
  display: none
}

@media (max-width:900px) {
  .split {
    grid-template-columns: 1fr
  }

  .stage {
    position: relative;
    height: 78svh
  }

  /* SPは縦長の枠になり、PCより左右が大きく切れるので別に指定（--pos-sp）
     指定がない写真はPCと同じ位置 */
  .stage>img {
    object-position: var(--pos-sp, var(--pos, 50% 50%))
  }

  /* SPは枠が狭いので、拡大を控えめにして切れる量を減らす */
  .stage>img.is-show,
  .stage>img.is-prev {
    animation-name: stage-zoom-sp
  }

  .stage>img[src*="main-01"] { --pos-sp: 53% 50%; }  /* 器を中央に */
  .stage>img[src*="main-02"] { --pos-sp: 38% 50%; }  /* 船の上の2人：2人の中間。2人とも顔が入るように */
  .stage>img[src*="main-04"] { --pos-sp: 55% 50%; }  /* 2つの中央。SPでは両端が少し切れる */
  .stage>img[src*="main-05"] { --pos-sp: 46% 50%; }  /* 牡蠣を中央に */

  /* 写真の上のロゴ：SPは小さめ（大きさは width、位置は left / top で調整） */
  .stage-logo {
    left: 16px;
    top: 20px;
    width: 84px
  }

  .store-tab {
    display: none
  }

  .gnav {
    grid-template-columns: 1fr;
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px))
  }

  .gnav-brand {
    display: none
  }

  .gnav-body {
    width: max-content;
    min-width: 0;
    max-width: calc(100% - 40px)
  }

  .gnav-list {
    gap: 24px
  }

  .sec {
    padding: 100px 0
  }

  /* 下部固定メニュー：オンラインストア / Instagram / Menu（3等分） */
  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px))
  }

  .sp-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: fixed;
    z-index: 58;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--navy-deep);
    border-top: 1px solid rgba(255, 255, 255, .2)
  }

  .sp-bar>* {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    text-decoration: none;
    line-height: 1.2
  }

  .sp-bar>*+* {
    border-left: 1px solid rgba(255, 255, 255, .25)
  }

  .sp-bar img {
    width: 18px
  }

  .sp-bar svg {
    width: 20px;
    height: 20px
  }

  /* メニューボタンを下部バーの右枠に重ねる（文字＋弧を横並び） */
  .menu-btn {
    top: auto;
    right: 0;
    bottom: env(safe-area-inset-bottom, 0px);
    width: 33.334%;
    height: 56px;
    flex-direction: row-reverse;
    gap: 8px
  }

  .menu-btn svg {
    width: 32px;
    height: 32px
  }

  .menu-btn span {
    font-size: 12px
  }
}

@media (prefers-reduced-motion:reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important
  }
}