@charset "utf-8";

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input,
select {
  vertical-align: middle;
}

/*以上がリセットCSS*/

/* ───────── COMMON ───────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  min-height: 100%;
  color: #fff;
  background: #34343d;                /* 画面背景色 */
  line-height: 1.6;
  font-family: "Times New Roman", serif;
  overflow-x:hidden; 
}
a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* ───────── GLOBAL NAVIGATION ───────── */
/* ─────────────────────────────────────────
   1) 基本レイアウトを grid に変更（ロゴ | メニュー | SNS）
   2) gap / フォント / アイコンを clamp で可変
   ───────────────────────────────────────── */
.global-nav {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 95px;
  z-index: 10;
  background: transparent;
  transition: background-color 0.3s ease;
}
.global-nav.fixed-top {
  position: fixed;
  top: 0;
  bottom: auto;
  background: rgba(30,30,30,0.4);
}

/* ★ grid化：auto | 1fr | auto で中央だけ伸縮可能に */
.nav__container{
  width: 95%;                     /* 中央寄せと最大幅の上限 */
  height: 100%;
  margin: 0 auto;
  padding: 0 clamp(12px, 0.2vw, 20px);
  display: grid;
  grid-template-columns: auto 1fr auto;        /* 左:ロゴ / 中:メニュー / 右:SNS */
  align-items: center;
  column-gap: clamp(8px, 1.4vw, 24px);
}

/* ロゴサイズも可変で少しだけ縮む余地 */
.nav__logo{
  display: flex;
  align-items: center;
  height: 100%;
}
.nav__logo img{
  height: clamp(32px, 2.6vw, 40px);            /* 40px→タブレットで〜32pxまで縮む */
}

/* メニューは中央で “縮んで耐える” 役 */
.nav__menu{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 5vw, 90px);               /* px固定→clampへ（超ワイドで広がりすぎ防止） */
  font-size: clamp(14px, 1.15vw, 18px);        /* 可読性維持しつつ可変 */
  letter-spacing: 0.08em;
  flex-wrap: nowrap;
  min-width: 0;                                /* ← 中央カラムをちゃんと縮められるキー */
}
.nav__menu li{ position: relative; }
.nav__menu a:hover{ color:#7d7d7d; }

/* SNSは右端・可変アイコンで圧縮余地を確保 */
.nav__sns{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4vw, 45px);
  height: 100%;
  margin-top: 0;                                /* 押し出しの原因になる上下余白は抑える */
}
.nav__sns img{
  height: clamp(16px, 1.6vw, 20px);            /* アイコンも少しだけ縮む */
}

/* アンダーラインはそのまま（必要なら幅もclampで可変に可） */
.nav__underline{
  position: absolute;
  bottom: 20px;
  left: 50%;
  width: calc(100% - 5%);                       /* ＝左右2.5%パディング相当 */
  max-width: min(1400px, 95%);
  height: 1px;
  background: #ffffff;
  transform: translateX(-50%);
}
.global-nav.fixed-top .nav__underline{ display:none; }

/* ▼▼ ギャラリー矢印／ドロップダウン（既存のまま） ▼▼ */
.nav__gallery > a{ display:inline-flex; align-items:center; }
.nav__gallery > a::after{
  content:'';
  display:inline-block;
  margin-left:6px;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:4px solid currentColor;
  transition:transform .4s;
}
.nav__gallery:hover > a::after{ transform: rotate(180deg); }
.global-nav.fixed-top .nav__gallery > a::after{ transform: rotate(180deg); }
.global-nav.fixed-top .nav__gallery:hover > a::after{ transform: rotate(0deg); }

.global-nav:not(.fixed-top) .nav__dropdown{
  bottom: calc(100% + 10px);
  top:auto;
  width:auto;                                   /* typoの s を修正 */
}
.global-nav.fixed-top .nav__dropdown{
  top: calc(100% + 10px);
  bottom:auto;
}
.nav__dropdown{
  position:absolute;
  top: calc(100% + 10px);
  left:50%;
  transform: translateX(-50%);
  display:none;
  flex-direction:column;
  gap:10px;
  padding:0 10px;
  background: rgba(30,30,30,0.4);
  border-radius:1px;
  font-size: clamp(14px, 1.1vw, 18px);          /* ドロップも可変 */
  white-space: nowrap;
}
.nav__dropdown.open{ display:flex; }
.nav__dropdown a{
  position:relative;
  display:block;
  padding:10px 0;
  text-align:center;
  z-index:1;
  color:#fff;
}
.nav__dropdown a::before{
  content:"";
  position:absolute; inset:0 -10px;
  background:#606074;
  opacity:0; transition:opacity .15s ease;
  border-radius:1px; z-index:-1;
}
.nav__dropdown a:hover::before{ opacity:1; }
.nav__dropdown a:hover{ background:#606074; color:#fff; }

/* ─────────────────────────────────────────
   1280px〜769px：タブレット帯 “押し出し防止コンパクト”
   - gap さらに圧縮
   - フォント小さめ
   - アイコン縮小 & 余白圧縮
   ───────────────────────────────────────── */
@media (max-width:1280px) and (min-width:769px){
  .global-nav{ height: 88px; }                  /* 少し低くして行間圧縮 */

  .nav__menu{
    gap: clamp(10px, 5vw, 70px);              /* さらに詰める */
    font-size: clamp(13px, 1.3vw, 24px);       /* ほんの少し小さく */
    letter-spacing: 0.06em;
  }

  .nav__logo img{ height: clamp(30px, 3.2vw, 36px); }
  .nav__sns{ gap: clamp(8px, 2.4vw, 38px); }
  .nav__sns img{ height: clamp(14px, 1.6vw, 22px); }
}

/* ─────────────────────────────────────────
   1024px〜769px：さらにタイト（2段折り回避の最後の一押し）
   ───────────────────────────────────────── */
@media (max-width:1024px) and (min-width:769px){
  .nav__menu{
    gap: clamp(8px, 3.8vw, 40px);
    font-size: clamp(12px, 1.6vw, 18px);
  }
  .nav__container{
    column-gap: clamp(6px, 1vw, 16px);
    padding: 0 clamp(10px, 1.6vw, 16px);
  }
}

/* ─────────────────────────────────────────
   “最終保険”：
   もし上でも押し出すなら、SNSだけもう一段縮める
   ───────────────────────────────────────── */
@media (max-width:980px) and (min-width:769px){
  .nav__sns img{ height: 16px; }
  .nav__sns{ gap: 22px; }
}



/* ───────── Footer ───────── */
/* もとの footer 定義 */
.site-footer{
  position:relative;
  width:100%;
  height:48vh;
  background:#34343d;
  color:#fff;
  /* overflow:hidden; ← これが原因で影が切れる */
  overflow: visible;
  z-index: 5;              /* 本文より手前に置きたいなら調整 */

   /* ↓―― ここがポイント ――↓ */
  filter: drop-shadow(0 -5px 10px rgba(0,0,0,.45));
  /*     └─↑   ↑   ↑
          X   Y   Blur   color   */
}


.footer__inner{
  width:100%;
  height:100%;
  margin:0 0;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:40px 0;
  box-sizing:border-box;
   
}


.footer__middle {
  /* this middle block sits in the middle and will shrink to fit its contents */
  display: flex;
  flex-direction: column;
  gap: 40px;                         /* or use margin-bottom on nav/ margin-top on legal */
  margin-top: 60px;
}

/* ── ① 上段 ── */
.footer__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-left: 6%;
  margin-right: 6%;
  margin-bottom: 60px;
}

/* 左ブランド塊 */
.footer__branding{
  display:flex;
  align-items:flex-start;
  gap:30px;
  align-items: center;
  padding-left: 0;
  padding-top: 2%;
}
.footer__logo-right{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    gap: 10px;
    margin-top: 5px;
}
.footer__logo{
  height:12vh;
  width: auto;
}
.footer__logotype{
  height:2vh;
}
.footer__catch{
  margin:0;
  font-family:"Hiragino Mincho ProN",serif;
  font-weight:300;
  font-size:1.4vw;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
}



/* ── ② 仕切り線 ── */
.footer__divider{
  display:block;
  width:95%;
  height:1px;
  background:#fff;
  margin:0 auto;
}

/* ---------- Footer Nav ---------- */
.footer__nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 6%;
}

.footer__menu,
.footer__dropdown { list-style: none; margin: 0; padding: 0; }

.footer__menu {
  display: flex;
  gap: 80px;
  font: 1vw/1 "Times New Roman", serif;
  letter-spacing: .08em;
}
.footer__menu a:hover { color: #7d7d7d; }

/* 基点 */
.footer__gallery { position: relative; }

/* ───────── Footer Dropdown (Global Nav と同じパターン) ───────── */
/* ───────── Footer Dropdown ───────── */
.footer__gallery {
  position: relative;
}

.footer__gallery .footer__dropdown {
  display: none;
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 10px;
  background: rgba(131, 131, 131, 0.3);
  border-radius: 2px;
  z-index: 9999;
  color: #fff;
}



/* 矢印 ▲/▼ */
.footer__gallery .footer__gallery-head {
  display: inline-flex;
  align-items: center;
}
.footer__gallery .footer__gallery-head::after {
 content: '';
  display: inline-block;
  margin-left: 6px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform 0.4s ease;
  transform-origin: center; /* 中心回転を保証 */
  transform: rotate(0deg);  /* 初期：上向き */
}
/* ホバー OR .open で矢印 ▼ */
.footer__gallery:hover  .footer__gallery-head::after,
.footer__gallery.open   .footer__gallery-head::after {
  transform: rotate(180deg);
}


/* open クラスで展開 */
/* ホバー OR .open でドロップダウン表示 */

.footer__gallery.open   .footer__dropdown {
  display: flex;
}

.footer__gallery:hover > .footer__dropdown {
  display: flex;
}



/* --- SNS --- */
.footer__sns{display:flex;gap:50px;}
.footer__sns img{height:20px;}

/* --- Legal Row (少し上げる・クリックは有効) --- */
.footer__legal-row{
  display:flex;align-items:center;gap:60px;
  font-size:.9vw;flex-wrap:wrap;
  margin:10px 6% 10px;              /* 上方向 10px だけ詰める */
}

.footer__legal-link:hover{color:#cba135;}

/* =========================================================
   FOOTER ≥768px：項目間の間隔とclampでのサイズ調整のみ（配置は不変）
   ========================================================= */
@media (min-width: 768px){

  /* ── 上段ロゴ群：サイズだけ可変（配置はそのまま） ── */
  .footer__branding{
    gap: clamp(10px, 1.2vw, 24px) !important;
  }
  .footer__logo{
    height: clamp(44px, 7.6vh, 80px) !important;
    width: auto !important;
  }
  .footer__logotype{
    height: clamp(14px, 1.8vh, 24px) !important;
    width: auto !important;
  }
  .footer__catch{
    font-size: clamp(16px, 1vw, 28px) !important;
    letter-spacing: .08em !important;
  }

  /* ── メニュー：gapとフォントのみ上書き ── */
  .footer__menu{
    /* 既存の `font: 1vw/1 ...` を確実に上書き */
    font: normal clamp(16px, 1.1vw, 20px)/1 "Times New Roman", serif !important;
    letter-spacing: .06em !important;
    gap: clamp(15px, 4.2vw, 70px) !important;  /* 目安10px前後 */
    white-space: nowrap !important;           /* まずは1行死守 */
  }

  /* ── SNS：gapとアイコンサイズのみ上書き（はみ出し防止） ── */
  .footer__sns{
    gap: clamp(12px, 5.2vw, 55px) !important;  /* 目安10px前後 */
    white-space: nowrap !important;
  }
  .footer__sns img{
    height: clamp(14px, 1.6vw, 22px) !important; /* 幅不足時は縮む */
    width: auto !important;
  }

  /* ── legal-row：行の崩れを抑えるため数値だけ調整 ── */
  .footer__legal-row{
    flex-wrap: wrap !important;                            /* 必要なら2段OK */
    gap: clamp(14px, 4.6vw, 50px) !important;              /* 目安10px前後 */
    font-size: clamp(12px, 1.1vw, 14px) !important;
    row-gap: 6px !important;                               /* 2段時の行間を詰める */
  }
  .footer__copyright,
  .footer__legal-link{
    white-space: nowrap !important;                        /* 文言は折り返さない */
  }
}

/* ── タブレット帯で“さらにタイト”にする最終保険（配置は不変） ── */
@media (min-width: 768px) and (max-width: 1100px){
  .footer__menu{
    font-size: clamp(11px, 2vw, 14px) !important;
    gap: clamp(12px, 4vw, 30px) !important;
  }
  .footer__sns{
    gap: clamp(6px, 3vw, 22px) !important;
  }
  .footer__sns img{
    height: 18px !important;
  }
}



/* =========================================================
   Footer  ──  Mobile layout (≤768px)
   ========================================================= */
@media (max-width: 768px){


  /* ── パーツの並び順を明示 ─────────────────── */
  .footer__top        { order: 0; }   /* Branding */
  .footer__menu       { order: 1; }   /* メニュー */
  .footer__divider    { order: 2; }   /* 白線 ←★メニューの直後 */
  .footer__sns        { order: 3; }   /* SNS アイコン列 */
  .footer__legal-row  { order: 4; }   /* Legal ＆ Copyright */


  /* 全体を縦積みにして高さ自動化 */
  .site-footer{
    height: auto;
    padding: 40px 0 20px;      /* 上 40px / 下 20px */
  }
  .footer__inner{ padding: 0 5vw; }        /* 左右 5vw */

  /* ── ① Branding ─────────────────────────── */
  .footer__top{
    flex-direction: column;
    align-items: flex-start;                         /* 左寄せ */
    margin: 0 0 32px;
  }
  .footer__branding{ gap: 20px; margin-top: 15px;margin-left: 15px;}
  .footer__logo{     width: 55px;  height: auto; }
  .footer__logotype{ height: 15px; width: auto; }
  .footer__catch{    font-size: 14px; letter-spacing: 0.14em;}
  .footer__logo-right{margin-top: 5px;}

 .footer__nav-row{
    flex-direction: column;              /* ← 横並び→縦並び */
    align-items: flex-start;
    gap: 35px;
    margin: 0;                           /* Branding と左揃え */
  }

  /* ── ② メニュー ─────────────────────────── */
  .footer__menu{
 display: flex;
    flex-direction: column;
    gap: 30px;
    font: 16px/1 "Times New Roman", serif;
    padding: 0;
    margin: 0;
    margin-left: 25px;
    margin-bottom: 20px;
  }
  .footer__menu a{ display: block; }

 /* ── ②-1  GALLERY タップ展開 ────────────────── */
  .footer__gallery .footer__dropdown{
    position: static;          /* ボタン直下に */
    display: none;             /* 初期閉じ */
    flex-direction: column;
    gap: 12px;
  
    background: none;
     align-items: flex-start;   /* 左寄せで並べる          */
    padding-left: 0;          /* 余分なインデントを削除   */
    margin-left: 50px;           /* 〃                      */
    margin-top: 20px;
    gap: 20px;                /* メニューと同じ行間 (=20) */
  }
  .footer__gallery.open .footer__dropdown{ display: flex; }

  /* 矢印アイコン少し小さく */
  .footer__gallery .footer__gallery-head::after{
    border-left-width: 3px;
    border-right-width: 3px;
    border-top-width: 5px;
  }


  /* ── ③ 区切り線 ─────────────────────────── */
 .footer__divider{ display: none; }

/* ── ④ SNS アイコン列 ─────────────────────── */
  .footer__sns{
    order: 2;                              /* メニューの次 */
    display: flex;
    gap: 50px;
justify-content: center;
    margin: 0 auto;
    padding-top: 45px;
    border-top: 1px solid #fff;            /* ← 白線はここ */
    width: 90vw;
  }
  .footer__sns img{ height: 22px; width: auto;  }

  /* ── ⑤ Legal リンク + Copyright ────────────── */
  .footer__legal-row{
    order: 3;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 11px;
    margin-top: 24px;
  }
  .footer__copyright{
    order: 2;            /* リンク３つの下へ */
    flex-basis: 100%;    /* 折り返して左揃え */
    margin-top: 6px;
  }
  .footer__legal-link{
    margin-right: 5px;
  } 
  
  .footer__gallery .footer__dropdown{ display:none; }
  .footer__gallery.open .footer__dropdown{ display:flex; }
}





:root{
  --accent:#CBA135;
  --bg:#34343d;
  --white:#fff;
  --font-mincho:"Hiragino Mincho ProN","Georgia",serif;
  --font-gothic:"Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
}

/* ========== セクション全体 ========== */
.collab-section{
  background:none;
  color:var(--white);
  font-family:var(--font-mincho);
  padding:100px 0 120px;
  overflow:hidden;
  margin-top: 10px;
   overflow-x: clip; 
}
.collab-inner{
  max-width:90vw;
  padding-left: 20px ;
  padding-right: 20px;
  margin:0 auto;
  position:relative;
}

/* タイトル & ゴールドライン */

/* ========== タイトル行 ========== */
.collab-title-wrap{
  margin-bottom:60px;
  /* もう線は描かない */
}
.collab-title{
  position:relative;                /* ← 疑似要素の基準 */
  font-family:"EB Garamond","Times New Roman",serif;
  font-size:40px;
  font-weight:300;
  margin:0 0 0 60px;                          /* 好みで左右マージン調整可 */
 letter-spacing: 0.04em;}

/* ★ ビューポート左端から線を引き、タイトルとの間隔を 30px とる ★ */
.collab-title::before{
  content:'';
  position:absolute;
  top:50%;
  right:calc(100% + 30px);          /* タイトル左から 30px 隙間 */
  height:3px;
  width:100vw;                      /* 十分大きい幅を左方向に取る */
  background:var(--accent);
  transform:translateY(-50%);
  pointer-events:none;
 
}


/* ========== スライダーの骨格 ========== */
.collab-slider{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;          /* ← 左矢印 | 中央 | 右矢印 */
  align-items: center;
  column-gap: clamp(16px, 6vw, 100px);           /* ← 画面幅に応じてギャップ縮む */
  /* justify-content/ gap は不要（削除） */
  margin-right: 20px ;
}

/* ---- ナビゲーション矢印 ---- */
.arrow-btn{
  flex:0 0 80px;
  width:80px;height:80px;
  border:1px solid var(--white);
  border-radius:50%;
  background:transparent;
  color:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.3s;
  z-index: 10;                /* スライドより前面へ */
  margin-bottom: 80px;
  
}
.arrow-btn:hover{background:#fff;border-color:#fff;color:var(--bg);}
.arrow-btn svg{width:22px;height:22px;stroke:currentColor;stroke-width:1px;fill:none;}
.arrow-btn.hidden{visibility:hidden;opacity:0;pointer-events:none;}

/* ─── アニメーション用クラス ─── */
.collab-slide.enter-from-right{animation:slideInFromRight .6s ease forwards;}
.collab-slide.enter-from-left {animation:slideInFromLeft  .6s ease forwards;}
.collab-slide.exit-to-left   {animation:slideOutToLeft   .6s ease forwards;}
.collab-slide.exit-to-right  {animation:slideOutToRight  .6s ease forwards;}

@media (min-width: 769px) and (max-width: 1460px){
  .arrow-btn{
    width: clamp(48px, 6vw, 72px);
    height: clamp(48px, 6vw, 72px);
    flex: 0 0 auto;     /* grid でも安全側で固定 */
  }
}

/* ---- スライド全体（1 枚） ---- */
.collab-slide{
  width:70vw;
  max-width:1000px;
  height:70vh;
  max-height:650px;
  display:flex;
  flex-direction:column;
  opacity:0;
  transform:translateX(120%);
  transition:.6s ease;
  position:absolute;                 /* スライド重ねる */
  inset:0;
  margin:auto;
  z-index: 1;                        /* スライドの重なり順 */
}
.collab-slide.active{
  opacity:1;
  transform:translateX(0);
  position:relative;
}

/* これで差し替え */
.slides-wrapper{
  position: relative;
  width: 100%;
  max-width: 70vw;            /* ← これ以上広がらない */
  margin-inline: auto;        /* ← 常に中央 */
  /* height はJSで同期のままでOK */
}


/* ========== 上：画像エリア ========== */
.slide-images{
  flex:0 0 65%;
  display:flex;
  gap:10px;
  height:100%;
}
.slide-main{
  flex:6;
  position:relative;
  overflow:hidden;
}
.slide-thumb-list{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.slide-thumb{
  flex:1;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:.3s;
}
.slide-thumb:hover{opacity:.9;}
.slide-thumb.active{opacity:.6;}     /* 選択中のサムネイル */

.slide-main img,
.slide-thumb img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:.4s;
}
.slide-main iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  /* もし黒帯を避けたくて拡大フィットしたい場合は↓を追加
     object-fit:cover; object-position:center; 
     （iframeには効かないが、親のアスペクトで見た目は揃う） */
}
/* ========== 下：テキストエリア ========== */
/* ─ slide-text 全体を左右 50%/50% ─*/
.slide-text{
  flex:0 0 35%;
  display:flex;
  height:100%;
  margin-top:15px;
}


/* 右半分：本文 */
.slide-desc{
  flex:1;
  padding-left:28px;           /* 右列に少し余白 */
  font-size:18px;
  line-height:1.7;
  position:relative;
  margin-top: 15px;
  letter-spacing: 0.03em;
  
}

/* 左半分：info */
.slide-info{
  flex:1;
  display:flex;
  flex-direction:column;
  position:relative;
  padding-right:28px;
}
.slide-info::after{                 /* 縦区切り線 (右側) */
  content:'';
  position:absolute;
  right:-12px;
  top:0;
  width:2px;height:85%;
  background:var(--accent);
}

/* 名前リスト */
.name-block{
  flex:1;
  display:flex;
gap: 80px;
  justify-content:left;
  margin-top: 10px;
  font-family:var(--font-mincho);
}
.name-block .pair{
  display:flex;
  flex-direction:column;
  gap:2px;
}


/* ===== 名前エリアのフォント ===== */
.pair-title{font-size:18px;margin:0;}
.pair-name {font-size:28px;margin:0;}

/* 下ボタン＆SNS */
.action-block{
  flex:0 0 auto;
  flex:1;
  display:flex;
 align-items: center;
 margin-bottom: 20px;
 gap: 50px;
}

/* ─ 横区切り線 ─ */
.action-block::before{
  content:'';
  position:absolute;
  top:45%;
  left:0;
  width:100%;
  height:2px;
  background:var(--accent);
}

.action-buttons{
  display:flex;
  gap:20px;
  margin-bottom:16px;
}
.action-btn{
  width:120px;height:40px;
  border:2px solid #CBA135;
  background:#fff;
  color:#34343d;
  font-size:18px;
  font-family:var(--font-mincho);
  cursor:pointer;
  position:relative;
  overflow:hidden;
  text-decoration: underline ;
 
}

.action-btn:hover::before{transform:translateY(100%);}
.action-btn span{
  position:relative;
  z-index:1;
  color:var(--bg);
}
.action-btn:hover span{color:var(--white);}

 .collab-section .action-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;  /* インライン要素内の整列も担保 */
    line-height: 1;      /* ベースラインのズレ防止 */
  }
  .collab-section .action-btn > span{
    display: inline-block; /* 下線・高さの安定化 */
  }

.sns-line{
  display:flex;
  align-items:center;
  gap:15px;
  font-size:18px;
  margin-bottom: 12px;
  margin-left: 5px;
}
.sns-icon{
  width:22px;height:22px;
  cursor:pointer;
  margin-right: 10px;
  max-width: 22px;
  max-height: 22px;
}

/* アイコンに触れている間と、ツールチップ自体に乗っている間は表示 */
.sns-wrapper{
  position:relative;
  display:inline-block;
  cursor:pointer;
 margin-right: 15px;
margin-top: 5px;
}

.sns-wrapper:hover .sns-tooltip{opacity:1;transform:none;}


/* ───── 吹き出し本体 ───── */
.sns-tooltip{
  position:absolute;
  width: 150px;                 /* ← 全部この幅に統一（必要なら数値調整） */
  max-width: 20vw;              /* 画面が狭い時の上限（必要なら調整） */
  max-height: 140px;            /* 画面が狭い時の上限（必要なら調整） */
  bottom:160%;      /* アイコンとの距離調整 */
    text-align:left;        /* ← これを追加 */
  padding:5px 12px;
  font:14px "Times New Roman",serif;
  color:var(--white);
  background:var(--bg);
  border:2px solid var(--accent);
  line-height:1.4;
  white-space:pre;
  opacity:0;
  transform:translateY(-8px);

  transition:.25s;
  z-index:100;
  pointer-events:auto;      /* ← クリックを受け取る */
}

.sns-tooltip a{
  color:var(--white);
  text-decoration:none;
  pointer-events:auto;
display:block;          /* ← 1 行ずつ左揃え */
}



.sns-tooltip a:hover{text-decoration:underline;}
/* ★ 奇数番（1,3…）＝アイコンの **左側** に表示 ★ */
.sns-wrapper:nth-child(odd) .sns-tooltip{
  right:-90px;       /* アイコンの左へ 20px 離す */
}
.sns-wrapper:nth-child(odd) .sns-tooltip::before
{
  left:auto; right:96px;        /* 三角を右端に付け直す */
  transform:none;
}

.sns-wrapper:nth-child(odd) .sns-tooltip::after{
  left:auto; right:97px;        /* 三角を右端に付け直す */
  transform:none;
}


/* ★ 偶数番（2,4…）＝アイコンの **右側** に表示 ★ */
.sns-wrapper:nth-child(even) .sns-tooltip{
  left:-100px;        /* アイコンの右へ 120px 離す */
}
.sns-wrapper:nth-child(even) .sns-tooltip::before{
  right:20px; left:auto;        /* 三角を左端に付け直す */
  transform:none;
}
.sns-wrapper:nth-child(even) .sns-tooltip::after{
  right:22px; left:auto;        /* 三角を左端に付け直す */
  transform:none;
}
/* ───── 三角（枠＋塗り） ───── */
/* 枠だけゴールド */
.sns-tooltip::before{
  content:'';
  position:absolute;
  bottom:-28px;          /* 枠線 2px を加味して 8px */
  right:9px;           /* 右端から 20px に配置（お好みで） */
  border:14px solid transparent;
  border-top-color:var(--accent);
}
/* 内側を背景色で塗りつぶし */
.sns-tooltip::after{
  content:'';
  position:absolute;
  bottom:-23px;          /* ::before より 2px 上 */
  right:16px;           /* 枠内に 1px ずらす */
  border:12px solid transparent;
  border-top-color:var(--bg);
}

/* ───── 表示トリガー ───── */
.sns-icon:hover + .sns-tooltip{
  opacity:1;
  transform:translateY(0);
}

.sns-icon:hover + .sns-tooltip{opacity:1;transform:translateY(0);}

/* ========== キーフレーム: スライド移動 (左右) ========= */
@keyframes slideInFromLeft{from{opacity:0;transform:translateX(-120%);}to{opacity:1;transform:translateX(0);}}
@keyframes slideOutToLeft{from{opacity:1;transform:translateX(0);}to{opacity:0;transform:translateX(-120%);}}
@keyframes slideInFromRight{from{opacity:0;transform:translateX(120%);}to{opacity:1;transform:translateX(0);}}
@keyframes slideOutToRight{from{opacity:1;transform:translateX(0);}to{opacity:0;transform:translateX(120%);}}


/* =====================================================
   画像ボタン8個のナビグリッド
   - PC: 4列×2行（最大幅で綺麗に揃う）
   - タブレット以下で自動リフロー
   - スマホ: 3列
   - ホバーで 1.2倍（ふわっと）
   ===================================================== */

/* グリッド：行間・列間は gap で確保（被り防止） */
.collab-navgrid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 4.5vw, 45px);
  margin: 30px 20px 40px;
  align-items: start;
  margin-bottom: 120px;
}

/* 各セル：高さをしっかり確保（ここを上げる） */
.collab-navbtn{
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;         /* 透過そのまま */
  cursor: pointer;
  width: 90%;
  height: clamp(100px, 34vw, 460px);  /* ★ 高さUP：縦全部表示でも小さく見えない */
  display: grid;
  place-items: center;
  overflow: hidden;                /* ホバー拡大のはみ出し防止（通常表示は切れない） */
}
.collab-navbtn:focus{ outline: none; }

/* 画像：入れ物に対して“高さ100%”で合わせ、切り抜き無し（contain） */
.collab-navbtn img{
  display: block;
  width: 100%;                     /* 幅いっぱい（横長も見やすく） */
  height: 100%;                    /* ★ 縦は常にコンテナの100% */
  object-fit: contain;             /* ★ 切れない（全体表示） */
  object-position: center;
  background: transparent;
  transition: transform .25s ease;
  will-change: transform;
}

/* ホバー：画像のみ 1.2 倍（行は崩れない） */
.collab-navbtn:hover img{ transform: scale(1.2); }



/* タブレット：3列 + 高さはやや控えめにしつつ“100%表示”維持 */
@media (max-width: 1200px){
  .collab-navgrid{
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 4vw, 40px);
  }
  .collab-navbtn{
    height: clamp(230px, 38vw, 420px); /* ★ 端末幅に応じて十分な高さを確保 */
  }
}

/* スマホ：3列 + 高さをしっかり確保（縦長でも100%表示） */
@media (max-width: 768px){
  .collab-navgrid{
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(10px, 3vw, 16px);
    margin: 10px 0 18px;
    margin-left: 10px;
    margin-bottom: 80px;
    margin-top: 40px;
  }
  .collab-navbtn{
    height: clamp(200px, 32vw, 420px); /* ★ 小さくならない高さ */
  }
}



/* =====================================================
   Collaborations（スマホ専用レイアウト）
   ※ 既存マークアップは変更不要
   ===================================================== */
/* ========== モバイル専用 ========== */
@media (max-width: 768px) {

  /* セクション骨格 */
  .collab-section{ margin-top:0; padding:60px 0 20px;   min-height: 350px;   /* 下に余裕を持たせる */
  position: relative;
  overflow: visible;   /* 吹き出しがはみ出しても見えるように */}
  .collab-inner{ max-width:100vw; padding:0 12px; }

  .collab-title-wrap{ margin-bottom:18px; }
  .collab-title{
    font-size:26px; margin:0 0 0 35px; letter-spacing:.04em; position:relative;
  }
  .collab-title::before{
    content:""; position:absolute; width:40px; height:1px; right:calc(100% + 8px);
    top:50%; transform:translateY(-50%); background:var(--accent, #CBA135);
  }

  .collab-slider{    position: relative;
    display: block;               /* ← grid/flexの影響を打ち消す */
margin-right: 0;
    padding-bottom: 64px;         /* ← 矢印ぶんの余白 */ 
    padding-top:28px; }

  /* 矢印 */
  .arrow-btn{
    position:absolute; top:0; width:30px; height:30px; display:grid; place-items:center;
    border:1px solid #fff; background:transparent; z-index:5;
  }
  .arrow-btn svg{ width:16px; height:16px; stroke-width:1px; fill:none; stroke: currentColor; }
  #prevBtn{ left:0; } #nextBtn{ right:0; }

  /* ラッパーは relative、高さはJSで同期 */
  .slides-wrapper{
    position: relative;
    width: 100%;
    margin-top: 32px;
    overflow: visible; /* ツールチップがはみ出せるように */
     max-width: none;              /* ← 70vwなどの上限をリセット */
    margin-inline: 0;
  }

  /* 全スライドを同座標に重ねる（下に押し出されない） */
  .collab-slide{
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    opacity: 0;
    transform: translateX(120%);
    pointer-events: none;
  }
  .collab-slide.active{
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }
  .collab-slide.exit-to-left{ transform: translateX(-120%); opacity:0; }
  .collab-slide.exit-to-right{ transform: translateX(120%); opacity:0; }

  /* 画像 */
  .slide-images{ display:flex; flex-direction:column; gap:8px; width:100%; }
  .slide-main{ position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; }
  .slide-main img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }

  /* thumbs 横並び（1行/スクロール可） */
  .slide-thumb-list{
    display:flex; flex-direction:row; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:6px; scroll-snap-type:x mandatory;
  }
  .slide-thumb{
    position:relative; flex:0 0 calc((100% - 4 * 6px) / 5); height:56px; overflow:hidden;
    border:1px solid rgba(255,255,255,.15); scroll-snap-align:start;
  }
  .slide-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .slide-thumb.active{ outline:2px solid var(--accent, #CBA135); outline-offset:-2px; }

  /* ===== Slide text 2-column (pair 配置維持) ===== */
/* ===== Slide text 2-column（pair 配置維持） ===== */
.slide-text{
  width:95%;
  margin:16px auto 0;
  display:flex;
  align-items:stretch;
  gap:0;
  overflow:visible;
}
.slide-info,.slide-desc{ 
  flex: 0 0 50%;
    width: 50%;
    box-sizing: border-box; /* パディング込みで幅計算 */
    min-width: 0;           /* 長文でのはみ出し防止（Flexのお約束） */
}

.slide-info{
  position:relative;
  padding-right:14px;
  overflow:visible;
    box-sizing: border-box;
}
/* 中央の縦線（既存） */
.slide-info::after{
  content:"";
  position:absolute;
  top:0; right:-1px;
  width:1px; height:100%;
  background:var(--accent, #CBA135);
}

.slide-desc{
  padding-left:14px;
  margin-top:0;
  font-size:12px;
  line-height:1.8;
  letter-spacing:.2em;
  word-break:break-word;
  overflow-wrap: anywhere;
}

/* ===== pair の文字サイズ ===== */

.pair-title{ font-size:2.8vw; line-height:1.2;  flex: 0 0 auto;}
.pair-name { font-size:4.2vw; line-height:1.2; flex: 1 1 auto; min-width: 0; }

/* ===== 横線を “pair の直下” に配置（ここで引く） ===== */
.name-block{
 display: inline-flex;           /* ← 親幅いっぱいにしない */
position: relative; 
  align-items: flex-start;
  width: 100% !important;             /* 内容幅に縮む */
    min-width: 100% !important;
  max-width: 100%;                /* はみ出し防止上限 */
  gap: 25px;                       /* 各 pair の縦間隔をさらに圧縮 */
  margin: 0 0 6px 0;              /* 横線との距離を詰める */
  padding-bottom: 20px;            /* 横線直上の余白を極小に */
  position: relative;             /* 擬似要素の基準 */
   box-sizing: border-box;
   padding-top: 25px;
}
.name-block::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;                    /* 内容幅ぶんだけの線 */
  height: 1px;
  background: var(--accent, #CBA135);
}
.pair-title,
.pair-name{
  white-space: nowrap;
  word-break: keep-all;
}

.name-block .pair:last-child{ margin-bottom:0 !important; }

/* ===== Action（ボタン横並び・狭幅 / SNSは下に） ===== */
.action-block{
   position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch; 
  gap: 12px;
  margin: 0 0 8px 0;
  width: 100%;                  /* ← 列幅いっぱい */
  box-sizing: border-box;
}
/* “ボタンの下”の線を出していた実装があれば殺す */
.action-block::before,
.action-block::after{ content:none !important; }

.action-buttons{
  display:flex;
  flex-direction:row;      /* ← 横並び */
  gap:10px;
  width:100%;
  flex-wrap:nowrap;
  margin-top: 10px;
  flex-direction: column; /* ← 縦並び */
}

/* ===== ボタン指定：白背景 / 文字 #34343d / 常時アンダーライン / ホバー変化なし ===== */
/* =========================
   Action Button（固定見た目・リンク常時有効）
   ========================= */
.action-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 100%;                 /* 狭め */
  min-height: 34px;
  padding: 6px 8px;
  background: #fff;             /* 塗り：白 */
  color: #34343d;               /* 文字：#34343d */
  border: 1px solid #cba135;    /* 枠線 */
  box-shadow: none;
  outline: none;
  cursor: pointer;
  transition: none;             /* ホバー状態なし */
  font-size: 14px;
  white-space: nowrap;
  word-break: keep-all;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;         /* 常にクリック可 */
  position: relative;
  z-index: 2;                   /* 低い層に負けないよう前面へ */
}
.action-btn > span{
  color: inherit !important;
  text-decoration: underline !important;
  text-decoration-color: #34343d !important;
  text-underline-offset: 1px;
}

/* どの状態でも見た目固定（ホバー/フォーカス/アクティブ/ビジテッド禁止） */
.collab-section .action-btn:hover,
.collab-section .action-btn:focus,
.collab-section .action-btn:active,
.collab-section .action-btn:visited{
  background: #fff !important;
  color: #34343d !important;
  border-color: #cba135 !important;  /* 枠色固定 */
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;  /* 本体は装飾なし（下線は内側span） */
}

/* a要素で実装している場合の固定 */
.collab-section a.action-btn,
.collab-section a.action-btn:hover,
.collab-section a.action-btn:focus,
.collab-section a.action-btn:active,
.collab-section a.action-btn:visited{
  background: #fff !important;
  color: #34343d !important;
  border-color: #cba135 !important;  /* 枠色固定 */
  text-decoration: none !important;  /* 本体はなし、下線は内側spanで */
}

/* 内部要素の色は継承を強制 */
.collab-section .action-btn *{
  color: inherit !important;
}

/* =========================
   SNS（行レイアウト / 吹き出しは右側固定）
   ========================= */
.sns-line{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  font-size: 16px;
  flex-wrap: wrap;
  overflow: visible;
}

.sns-icon{
  display: inline-block;
  width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
  margin: 0;
  margin-bottom: 8px;
}
.sns-wrapper{ position: relative;display: inline-flex; min-height: 30px;       /* 任意：アイコンの並び方に合わせてOK */
  align-items: center; }
 /* ── 吹き出し本体（PC見た目を維持） ── */
   /* ─ 吹き出し本体：上寄せ＋十分なパディング＋幅クランプ ─ */
  /* ───── 吹き出し本体 ───── */
.sns-tooltip{
  position:absolute;
  bottom:155%;      /* アイコンとの距離調整 */
    text-align:left;        /* ← これを追加 */
  padding:2px 10px;
  font:14px "Times New Roman",serif;
  color:var(--white);
  background:var(--bg);
  border:2px solid var(--accent);
  line-height:1.4;
  white-space:pre;
  opacity:0;
  transform:translateY(-8px);
gap: 9px;
  transition:.25s;
  z-index:100;
  pointer-events:auto;      /* ← クリックを受け取る */
}

.sns-tooltip a{
  color:var(--white);
  text-decoration:none;
  pointer-events:auto;
display:block;          /* ← 1 行ずつ左揃え */
}

.sns-tooltip::before,
.sns-tooltip::after{
  content: "";
  position: absolute;
  width: 0; height: 0;        /* ← これが無いと変形することがある */
  pointer-events: none;
}

.sns-tooltip a:hover{text-decoration:underline;}
/* ★ 奇数番（1,3…）＝アイコンの **左側** に表示 ★ */
.sns-wrapper:nth-child(odd) .sns-tooltip{
  right:-140px;       /* アイコンの左へ 20px 離す */
  width: 220px;                 /* ← 全部この幅に統一（必要なら数値調整） */
  max-width: 38vw;              /* 画面が狭い時の上限（必要なら調整） */
  max-height: 60px;            /* 画面が狭い時の上限（必要なら調整） */
  padding-bottom: 120px;
  padding-top: 0;
}
.sns-wrapper:nth-child(odd) .sns-tooltip::before
{
  left:auto; right:133px;        /* 三角を右端に付け直す */
  transform:none;
}

.sns-wrapper:nth-child(odd) .sns-tooltip::after{
  left:auto; right:135px;        /* 三角を右端に付け直す */
  transform:none;
}


/* ★ 偶数番（2,4…）＝アイコンの **右側** に表示 ★ */
/* 偶数番：吹き出しをアイコンの左寄りで下に表示 */
.sns-wrapper:nth-child(even) .sns-tooltip {
  top: 100%;               /* アイコンの真下 */
  left: -20px;              /* 左寄りに調整 */
  transform: none;          /* 中央寄せ解除 */
  margin-top: 10px;         /* アイコンとの隙間 */
  padding: 12px 16px;     /* 上下12px 左右16px 余白 */
  min-height: 50px;       /* 最低でも50px確保（好みに応じて調整） */
  display: flex;          /* 中身の縦方向センタリング */
  align-items: center;
  width: 420px;                 /* ← 全部この幅に統一（必要なら数値調整） */
  max-width: 58vw;              /* 画面が狭い時の上限（必要なら調整） */
  max-height: 140px;            /* 画面が狭い時の上限（必要なら調整） */
}

/* 上向きの矢印：枠線（ゴールド） */
.sns-wrapper:nth-child(even) .sns-tooltip::before {
  content: '';
  position: absolute;
  top: -28px;               /* 吹き出しの上に出す */
  left: 13px;               /* 左寄せ位置 */
  border: 14px solid transparent;
  border-bottom-color: var(--accent); /* 下方向に色を付ける＝上向き三角枠 */
}

/* 上向きの矢印：塗り（背景色） */
.sns-wrapper:nth-child(even) .sns-tooltip::after {
  content: '';
  position: absolute;
  top: -23px;               /* ::beforeより少し下 */
  left: 15px;               /* 枠より1px右 */
  border: 12px solid transparent;
  border-bottom-color: var(--bg); /* 下方向に色を付ける＝上向き三角塗り */
}

/* ───── 三角（枠＋塗り） ───── */
/* 枠だけゴールド */
.sns-tooltip::before{
  content:'';
  position:absolute;
  bottom:-28px;          /* 枠線 2px を加味して 8px */
  right:9px;           /* 右端から 20px に配置（お好みで） */
  border:14px solid transparent;
  border-top-color:var(--accent);
}
/* 内側を背景色で塗りつぶし */
.sns-tooltip::after{
  content:'';
  position:absolute;
  bottom:-23px;          /* ::before より 2px 上 */
  right:16px;           /* 枠内に 1px ずらす */
  border:12px solid transparent;
  border-top-color:var(--bg);
}

/* ───── 表示トリガー ───── */
.sns-icon:hover + .sns-tooltip{
  opacity:1;
  transform:translateY(0);
}

.sns-icon:hover + .sns-tooltip{opacity:1;transform:translateY(0);}
}


/* ========== ここから Photo / Movie Coverflow 専用 ========== */

/* --- セクション余白だけ統一（他レイアウトは JS が制御） --- */
#photoSection, #movieSection{
  padding:40px 0 0;
 max-height: auto;
  max-width:90vw;
  padding-left: 20px ;
  padding-right: 20px;
  margin:0 auto;
  position:relative;
  margin-bottom: 100px;
}

.photo-title-wrap,
.movie-title-wrap{
  margin-bottom:60px;
  /* もう線は描かない */
}
.photo-title,.movie-title{
  position:relative;                /* ← 疑似要素の基準 */
  font-family:"EB Garamond","Times New Roman",serif;
  font-size:40px;
  font-weight:300;
  margin:0 0 0 60px;                          /* 好みで左右マージン調整可 */
 letter-spacing: 0.04em;}

/* ★ ビューポート左端から線を引き、タイトルとの間隔を 30px とる ★ */
.photo-title::before,
.movie-title::before{
  content:'';
  position:absolute;
  top:50%;
  right:calc(100% + 30px);          /* タイトル左から 30px 隙間 */
  height:3px;
  width:100vw;                      /* 十分大きい幅を左方向に取る */
  background:var(--accent);
  transform:translateY(-50%);
  pointer-events:none;
 
}

/* =====================================================
   ■  MOBILE (max-width: 768px) 置き換え用
   Photo / Movie スマホ版スタイル
   ===================================================== */
@media (max-width: 768px) {

  /* ---- セクション外枠：左右20px余白は維持、縦の間隔を詰める ---- */
    /* ---- セクション共通外枠 ---- */
  #photoSection,
  #movieSection{
    max-width: 90vw;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto;
    position: relative;
  }

  /* Photo：縦の余白を詰める */
  #photoSection{
    padding-top: 20px !important;     /* 120px → 40px */
    margin-bottom: 60px;   /* 100px → 60px（Movieとの間隔を狭く） */
  }

  /* Movie：さらに詰める */
  #movieSection{
    padding-top: 60px;     /* 120px → 60px */
    margin-bottom: 100px;
  }

  /* ---- タイトル＆横線（共通） ---- */
  .photo-title-wrap,
  .movie-title-wrap{
    margin-bottom: 10px  !important;   /* タイトル下の間隔を狭く */
  }
.photo-title-wrap{
  transform: translateY(30px);
}
  .photo-title,
  .movie-title{
    position: relative;
    font-family: "EB Garamond","Times New Roman",serif;
    font-size: 32px;       /* 指定 */
    font-weight: 300;
    margin: 0 0 0 48px  !important;
    letter-spacing: 0.04em;
  }

  .photo-title::before,
  .movie-title::before{
    content: '';
    position: absolute;
    top: 50%;
    right: calc(100% + 16px);
    height: 1px;           /* ★ 1px 線 */
    width: 100vw;
    background: var(--accent);
    transform: translateY(-50%);
    pointer-events: none;
  }

  /* ---- Photo テキスト ---- */
  #photoSection .photoTxt{

    margin-top: 30px   !important;
  }
  #photoSection .photoTxt h3{
    font-size: 18px !important;   /* 指定：見出し16px */
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
  }
  #photoSection .photoTxt p{
    font-size: 11px !important;   /* 指定：本文11px */
    line-height: 1.7 !important;
    letter-spacing: 0.05em !important;
  }
  #photoSection .photoTxt,
  #photoSection .photoTxt *{
    font-size: inherit;
  }

  /* ---- CoverFlowまわり（幅のみ整える） ---- */
  #photoCoverflow,
  #coverflow{
    width: 100%;
    box-sizing: border-box;
   
  }

  /* ---- 前後ボタン位置調整 ---- */
  /* Photo：今の位置から20px上へ */
  #photoControls{
    position: relative;
    top: -20px;                /* ★ 20px 上げる */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    pointer-events: none;
   
  }
  #photoControls img{
    pointer-events: auto;
    width: 35px !important;
    height: auto;
  }

  /* Movie：今の位置から40px上へ */
  #controls{
    position: relative;
    top: -60px;                /* ★ 40px 上げる */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    pointer-events: none;
  }
  #controls img{
    pointer-events: auto;
    width: 35px !important;
    height: auto;
  }

  /* ---- Movie overlay（必要なら） ---- */
  #overlay{
    margin-top: 8px;
  }

  /* ---- Movie info：左右パーツは横並びのまま中央寄せ、
         各パーツ内は box→txt 縦並び、txtは16px、boxの角丸なし ---- */
  .info{
    display: flex;
    justify-content: center;          /* ★ 中央寄せ */
    align-items: flex-start;
    gap: 25px !important;
    margin-top: 100px  !important;
    text-align: center;
  }
  .info-left,
  .info-right{
    display: flex;
    flex-direction: column;           /* ★ 縦並び */
    align-items: center;
    gap: 25px  !important;
    min-width: 90px;
  }
  .info .box{
    font-size: 12px;
    line-height: 1.2;
    padding: 8px 8px  !important;
  
    border-radius: 0;                 /* ★ 角丸なし */
    box-sizing: border-box;
  }
  .info .txt{
    font-size: 18px  !important;                  /* ★ 指定：16px */
    line-height: 1.5;
    letter-spacing: 0.02em;
  }

  /* さらに小さくしたい場合（微調整プリセット）
  .info .box{ font-size: 11px; padding: 5px 8px; }
  .info .txt{ font-size: 11px; }
  */

}










/* ===== PCだけ：actionボタンのホバーで白くならないよう完全固定 ===== */
/* スタイルシートの一番最後に貼ること */
@media (min-width: 769px){
  .collab-section .action-btn,
  .collab-section a.action-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff !important;
    color: #34343d !important;
    border: 1px solid #cba135 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
    transition: none !important;
    pointer-events: auto !important;
    text-align: center;
    line-height: 1;
  }
  .collab-section .action-btn > span,
  .collab-section a.action-btn > span{
    color: inherit !important;
    text-decoration: underline !important;
    text-decoration-color: #34343d !important;
    text-underline-offset: 1px;
  }

  /* すべての状態で見た目を固定（hover/focus/active/visited） */
  .collab-section .action-btn:is(:hover,:focus,:active,:visited),
  .collab-section a.action-btn:is(:hover,:focus,:active,:visited){
    background: #fff !important;
    color: #34343d !important;
    border-color: #cba135 !important;
    text-decoration: none !important; /* 本体は装飾なし（下線はspan側） */
    box-shadow: none !important;
    outline: none !important;
  }
  .collab-section .action-btn:is(:hover,:focus,:active,:visited) > span,
  .collab-section a.action-btn:is(:hover,:focus,:active,:visited) > span{
    color: inherit !important;
    text-decoration: underline !important;
    text-decoration-color: #34343d !important;
    text-underline-offset: 1px;
  }

  /* 子要素にも色継承を強制（外部の a:hover * などを無効化） */
  .collab-section .action-btn *,
  .collab-section a.action-btn *{
    color: inherit !important;
  }
}



/* Photo キャプション */
.photoTxt{margin:50px auto 0;max-width:80vw;font-family:var(--font-mincho);text-align: center;}
.photoTxt h3{font-size:24px;margin-bottom:24px;letter-spacing:.15em}
.photoTxt p{font-size:20px;line-height:1.8}

/* -------------- Movie 奥行き -------------- */


/* Movie 情報行 */
.info{display:flex;
  justify-content:center;
  gap:25vw;
  margin:60px auto;
  max-width:1000px;

}

.info-left{
  display:flex;
margin: 0 auto;
   align-items:center;
  justify-content: center;
  gap:20px;
}

.info-right{
  display:flex;
margin: 0 auto;
   align-items:center;
  justify-content: center;
  gap:20px;
}

.box{min-width:140px;
  max-height: 50px  ;
  padding:10px 10px;
  background:#d9d9d9;
  color:#34343d;
  font-family:"EB Garamond","Times New Roman",serif;
  font-size:32px;
 justify-content: center;
  text-align:center;
  align-items: center;
  display:flex;
}
.txt{font-size:22px;
  align-self:center
}



 :root {
      --cover-size: 260px;    /* 各画像のサイズ */
      --offset: 220px;        /* 中央との水平距離 */
      --depth: 180px;         /* 中央画像の奥行き（手前に浮かせる量） */
      --rot: 45deg;           /* 回転角度 */
      --duration: 0.5s;       /* アニメーション時間 */
    }
   
     /* CoverFlow container */
    #coverflow {
      position: relative;
      width: 100%;
      height: 60vh;
      perspective: 1000px;
      overflow: visible;
      transform: translateY(-40px);
    }
    #coverflow section {
      position: absolute;
      top: 50%; left: 50%;
      width: var(--cover-size);
      height: var(--cover-size);
      margin: calc(var(--cover-size)/-2) 0 0 calc(var(--cover-size)/-2);
      transform-style: preserve-3d;
      transition: transform var(--duration) ease,
                  z-index var(--duration) ease;
      cursor: pointer;
    }
    #coverflow section img {
      display: block;
      width: 100%; height: 100%;
      object-fit: cover;
      border: 2px solid #fff;
      border-radius: 6px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.5);
      pointer-events: none;
    }

    /* --- movie セクション: 非 active 要素をぼかす --- */
#coverflow section:not(.active) img {
  filter: blur(2px);
  transition: filter var(--duration) ease;
}


    /* Controls */
    #controls img {
      position: absolute;
      top: calc(50% - 25px);
      width: 50px; height: 50px;
      cursor: pointer;
      user-select: none;
    }
    #prev { left: 20px; }
    #next { right: 20px; }
    /* Info panel */
    .info {
      display: flex;
      justify-content: center;
      gap: 25vw;
      margin: 100px auto 0;
      max-width: 1000px;
      transform: translateY(-80px);
    }
    .info-left, .info-right {
      display:flex;
margin: 0 auto;
   align-items:center;
  justify-content: center;
  gap:30px;
  white-space: nowrap;
    }
    .info-left .box,
    .info-right .box {
      background: #d9d9d9;
      padding: 8px 12px;
      font-size: 22px;
      margin-bottom: 6px;
     
    }
    .info-left .txt,
    .info-right .txt {
      font-size: 22px;
      line-height: 1.4;
    }
    /* Overlay */
    #overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      z-index: 999;
    }
    #overlay.active {
      opacity: 1;
      pointer-events: all;
    }
    #overlay iframe {
      width: 80vw;
      height: 45vw;
      max-width: 1280px;
      max-height: 720px;
      border: none;
      border-radius: 6px;
    }


    /* CoverFlow コンテナ（既存の movie 用と同じスタイルを流用） */
#photoCoverflow {
  position: relative;
  width: 100%;
  height: 60vh;
  perspective: 1000px;
  overflow: visible;
}
#photoCoverflow section {
  position: absolute;
  top: 50%; left: 50%;
  width: var(--cover-size);
  height: var(--cover-size);
  margin: calc(var(--cover-size)/-2) 0 0 calc(var(--cover-size)/-2);
  transform-style: preserve-3d;
  transition: transform var(--duration) ease,
              z-index var(--duration) ease;
  cursor: pointer;
}
#photoCoverflow section img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  border: 2px solid #fff;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  pointer-events: none;
}
/* セクションがアクティブ（中央）でない場合の画像をぼかし */
#photoCoverflow section:not(.active) img {
  filter: blur(2px);
  transition: filter var(--duration) ease;
}
/* Controls（既存の movie 用と同じ） */
#photoControls img {
  position: absolute;
  top: calc(50% - 25px);
  width: 50px; height: 50px;
  cursor: pointer;
  user-select: none;
}
#photoPrev { left: 20px; }
#photoNext { right: 20px; }





/* PC では完全に隠す */
@media (max-width:768px){
  .global-nav{ display:none; }

}
@media (min-width:769px){
  #mobileNavToggle{ display:none; }
 #mobileNav{display: none;}
}

/* ===== Mobile Global Nav ===== */
@media (max-width: 768px) {

  /* ハンバーガー開閉ボタン */
 #mobileNavToggle {
 position: fixed !important;
    top: 20px !important;
    right: 0 !important;
    transform: none !important;    /* 親要素の transform 影響を排除 */
    z-index: 2000 !important;       /* fvのwrapper( z-index:5 ) 以上に */
    width: 75px;
    height: 35px;
    background-color: rgba(52, 52, 61, 0.4); /* #34343d 透明度0.3 */
    border: none;
    padding: 5px 20px 5px 8px; /* 上・下・左だけ2px、右は0 */
    cursor: pointer;
  box-sizing: border-box;
  line-height: 0;
  /* 行ボックス由来の隙間を殺す + 子を中央に収める */
  line-height: 0;
  display: grid;
  place-items: center;

  /* 子が大きくても外に出さない */
  overflow: hidden;

  /* タップ装飾のにじみ防止（モバイル） */
  -webkit-tap-highlight-color: transparent;

  }

#mobileNavToggle img {
  display: block;                 /* ベースライン隙間の排除 */
  width: auto;                    /* 縦基準でスケール */
  height: 100%;                   /* ← 内容枠（44-上下2px×2=40px）にフィット */
  max-width: 100%;                /* 横も 100% を上限に */
  object-fit: contain;            /* はみ出さずに収める */
  pointer-events: none;           /* クリックは親で拾う */
  transition: opacity .22s ease;  /* ← スムーズさ（変更OK） */
}


  /* メニュー本体 */
  #mobileNav {
     position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 75%;
    max-width: 300px;
    height: 100%;
    background-color: #fff;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1000;
  }
  #mobileNav.open {
    transform: translateX(0);
  }

/* メニュー内 */
.mobile-nav__inner {
  padding: 20px 20px 5px; /* 上部にロゴ分の余白 */
  height: 100%;
 display: flex;
    flex-direction: column;
}

/* クローズボタン */
  .mobile-nav__head {
    display: flex;
    justify-content: flex-end;  /* 右寄せ */
    align-items: center;        /* 縦中央揃え */
    padding: 10px;              /* 必要に応じ調整 */
    margin-bottom: 30px;
  }
  .mobile-nav__logo {
    width: 55px;
    height: auto;
  }
.mobile-nav__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
  .mobile-nav__logo {
    width: 55px;
    height: auto;
  }
  .mobile-nav__close img {
    width: 16px;
    height: 16px;
    pointer-events: none;
  }

  /* メニュー */
  .mobile-nav__menu {
    list-style: none;
    margin: 20px 0 30px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
  }
  .mobile-nav__menu a,
  .mobile-nav__gallery-head {
    font: 600 20px/1.4 "Times New Roman", serif;
    color: #34343d;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  /* Gallery ドロップダウン */
  .mobile-nav__gallery-dropdown {
    display: none;
    list-style: none;
    margin: 12px 0 0 12px;
    padding: 0;
    flex-direction: column;
    gap: 20px;
  }
  .mobile-nav__gallery.open .mobile-nav__gallery-dropdown {
    display: flex;
  }
.mobile-nav__gallery .mobile-nav__gallery-head {
  display: inline-flex;
  align-items: center;
}
.mobile-nav__gallery .mobile-nav__gallery-head::after {
 content: '';
  display: inline-block;
  margin-left: 6px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform 0.4s ease;
  transform-origin: center; /* 中心回転を保証 */
  transform: rotate(0deg);  /* 初期：上向き */
}
/* ホバー OR .open で矢印 ▼ */
.mobile-nav__gallery:hover  .mobile-nav__gallery-head::after,
.mobile-nav__gallery.open   .mobile-nav__gallery-head::after {
  transform: rotate(180deg);
}
.mobile-nav__gallery-dropdown{
  margin: 0;
  margin-top: 15px;

}

/* open クラスで展開 */
/* ホバー OR .open でドロップダウン表示 */

.mobile-nav__gallery.open   .mobile-nav__gallery-dropdown {
  display: flex;
}

.mobile-nav__gallery:hover > .mobile-nav__gallery-dropdown {
  display: flex;
}
  /* SNS */
  .mobile-nav__sns {
    margin-top: auto;
    display: flex;
    gap: 50px;
     align-items: center; /* 縦中央揃え */
     justify-content: center;
     margin-bottom: 30px;
  }
  .mobile-nav__sns img {
    height: 25px;
  }

  /* Legal */
  .mobile-nav__legal {
    margin-top: 10px;
    font-size: 12px;
    line-height: 2;
    transform: translateY(20px);
  }
  .mobile-nav__legal a {
    color: #34343d;
    text-decoration: none;
  }
  .mobile-nav__copy {
    margin: 8px 0 0;
  }
}


/* W3 = Light → CSSで font-weight:300; のとき使われる */
@font-face {
  font-family: "Hiragino Mincho ProN";   /* 既存CSSが呼ぶ名前 */
  src: local("Hiragino Mincho ProN W3"),
       local("hiragino-mincho-pron");
  font-weight: 300;
  font-style: normal;
}

/* W6 = SemiBold → CSSで font-weight:600; のとき使われる */
@font-face {
  font-family: "Hiragino Mincho ProN";
  src: local("Hiragino Mincho ProN W6"),
       local("hiragino-mincho-pron");
  font-weight: 600;
  font-style: normal;
}