:root{
  --concrete:#e4e5e0;
  --concrete-2:#d5d7d0;
  --ink:#1b211e;
  --ink-dim:#4c554e;
  --moss:#1f2a22;
  --on-moss:#eceee6;
  --on-moss-dim:#a9b3a6;
  --sprout:#a4cf3a;
  --sprout-ink:#3f5f10;
  --sprout-wash:#dbe8bd;
  --ume:#e8548f;

  --mincho:
    'Shippori Mincho',
    'Hiragino Mincho ProN',
    'Yu Mincho',
    'Noto Serif JP',
    'Noto Serif CJK JP',
    serif;

  --gothic:
    'Zen Kaku Gothic New',
    'Hiragino Sans',
    'Yu Gothic',
    'Noto Sans JP',
    'Noto Sans CJK JP',
    sans-serif;

  --gutter:clamp(22px,6vw,48px);
  --obi:78px;
}

@media (min-width:720px){
  :root{
    --obi:158px;
  }
}


/* =========================================================
   RESET / BASE
   ========================================================= */

*{
  box-sizing:border-box;
}

html{
  -webkit-text-size-adjust:100%;
  /* 100cqw = 縦スクロールバーを除いた表示幅。
     100vwはスクロールバーを含むため、FILMSが横にはみ出していた */
  container-type:inline-size;
}

body{
  margin:0;
  background:var(--concrete);
  color:var(--ink);
  font-family:var(--gothic);
  font-weight:400;
  font-size:clamp(15.5px,1.6vw,16.5px);
  line-height:2;
  line-break:strict;
  word-break:auto-phrase;
  overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased;
}

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

::selection{
  background:var(--ume);
  color:#fff;
}

a{
  color:inherit;
  text-decoration-thickness:2px;
  text-underline-offset:.28em;
  text-decoration-color:var(--sprout);
}

a:hover{
  color:var(--sprout-ink);
  text-decoration-color:var(--ume);
}

a:focus-visible,
button:focus-visible{
  outline:3px solid var(--sprout-ink);
  outline-offset:3px;
}


/* =========================================================
   SKIP LINK
   ========================================================= */

/* インラインSVGスプライトが行ボックスを作り、
   ページ最上部に余白ができるのを防ぐ */
body > svg[aria-hidden="true"]{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
  pointer-events:none;
}

.skip{
  position:absolute;
  left:12px;
  top:-60px;
  z-index:100;
  background:var(--ink);
  color:#fff;
  padding:8px 14px;
  font-size:14px;
}

.skip:focus{
  top:12px;
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 560px;
  max-height: 1200px;
  background: var(--moss);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero__photo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero__photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 44% 30%;
  filter: grayscale(15%) contrast(1.05) brightness(0.95);
}

@media (max-width:719px){
  .hero__photo img{
    object-position: 56% 30%;
  }
}

/* グラデーションオーバーレイ */
.hero__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(27, 33, 30, 0.82) 0%,
    rgba(27, 33, 30, 0.15) 60%
  );
  pointer-events: none;
}

/* コンテンツ部分 */
.hero__content{
  position: relative;
  z-index: 3;
  width: 100%;
  padding-bottom: clamp(40px, 8vw, 80px);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.hero__content .hero__in{
  max-width: 1040px;
  margin: 0 auto;
}

.hero__tagline{
  margin: 0 0 12px;
  font-family: var(--gothic);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  color: var(--sprout);
  text-transform: uppercase;
}

.hero__title{
  margin: 0;
  font-family: var(--mincho);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.8vw, 2.4rem);
  line-height: 1.25;
  color: #fff;
  letter-spacing: 0.04em;
}
/* =========================================================
   SECTION
   ========================================================= */

.sec{
  padding:clamp(80px,13vw,152px) var(--gutter);
}

.sec--alt{
  background:var(--concrete-2);
}

.sec--dark{
  background:var(--moss);
  color:var(--on-moss);
}

.sec__in{
  max-width:1040px;
  margin:0 auto;
  display:block;
}

.sec__h{
  margin:0 0 44px;
  font-family:var(--mincho);
  font-weight:700;
  font-size:clamp(26px,3.4vw,30px);
  line-height:1.4;
  letter-spacing:.12em;
}

@media (min-width:900px){

  .sec__in{
    display:grid;
    grid-template-columns:120px minmax(0,1fr);
    column-gap:24px;
  }

  /* PHILOSOPHY: 本文(.lead)の1行目の上端に見出しを揃える
     = 印章(22px)+余白(26px)+ .leadの行間ぶん(文字サイズの半分) */
  #h-concept{
    margin-top:calc(clamp(19px,2.5vw,24px) / 2);
  }

  .sec__h{
    writing-mode:vertical-rl;
    margin:0;
    letter-spacing:.28em;
    align-self:start;
    position:sticky;
    top:56px;
  }
  
  /* FILMSだけsticky解除 */
  .sec--dark .sec__h{
    position:static;
  }
  
  /* FILMS: タイトルの右側に短いメッセージを置き、
     動画はその下でグリッド全幅に展開する */
  .sec--dark .sec__in{
    row-gap:clamp(56px,6vw,88px);
  }

  .sec--dark .films__intro{
    grid-column:2;
    align-self:start;
    padding-top:2px;
  }

  .sec--dark .movies-scroll-container{
    grid-column:1 / -1;
  }

  .sec--dark .col--wide{
    grid-column:2;
  }

}

.col{
  max-width:660px;
  min-width:0;
}

.col--wide{
  max-width:none;
}


/* =========================================================
   BRAND
   ========================================================= */

.sec.brand{
  padding-bottom:0;
}

.brand + .sec{
  padding-top:clamp(56px,8vw,96px);
}

.brand__logo{
  display:block;
  margin:0 auto;
  width:min(100%,480px);
  height:auto;
}


/* =========================================================
   PHILOSOPHY
   ========================================================= */

.lead{
  margin:0 0 44px;
  font-family:var(--mincho);
  font-weight:500;
  font-size:clamp(19px,2.5vw,24px);
  line-height:2;
  letter-spacing:.03em;
}

.body{
  margin:0;
  color:var(--ink-dim);
}


/* =========================================================
   STORY
   ========================================================= */

.sec.story{
  padding-top:0;
  padding-bottom:54px;
}

.story p{
  margin:0 0 1.8em;
  max-width:34em;
}

.story .fig{
  margin:56px 0;
}

.story .fig img{
  width:100%;
}

/* ---------------------------------------------------------
   FIG : click to reveal (photo <-> ukiyo-e)
   190年前の浮世絵と、いまの写真を静かに重ねる仕掛け。
   誘導は最小限に。気づいた人だけが体験できればいい。
   --------------------------------------------------------- */

.fig--reveal .fig__toggle{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  margin:0;
  padding:0;
  border:0;
  background:var(--moss);
  overflow:hidden;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}

.fig--reveal .fig__img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity 2.2s ease;
}

.fig--reveal .fig__img--ukiyoe{
  opacity:0;
}

.fig--reveal .fig__toggle.is-flipped .fig__img--photo{
  opacity:0;
}

.fig--reveal .fig__toggle.is-flipped .fig__img--ukiyoe{
  opacity:1;
}

.fig--reveal .fig__toggle:focus-visible{
  outline:3px solid var(--sprout);
  outline-offset:3px;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.story p.fig--after{
  margin-bottom:0;
}

@media (max-width:719px){

  .story br{
    display:none;
  }

}


/* =========================================================
   BLEED IMAGE
   ========================================================= */

.bleed{
  margin:0;
  background:var(--moss);
}

.bleed__frame{
  height:clamp(240px,46vw,560px);
  overflow:hidden;
}

.bleed img{
  position:relative;
  top:0; /* 写真の上端をframeの上端に揃える。下へ余るぶんをJSで動かす */
  width:100%;
  height:auto;      /* 写真本来の縦横比の高さ。広い画面でも上下を切り取らない */
  min-height:120%;  /* 写真をなるべく残しつつ、パララックス用の余白を確保 */
  object-fit:cover;
  object-position:30% 60%;
  will-change:transform;
}

/* スクロール連動アニメーションに対応したブラウザ用。
   スクロールと同じスレッドで動くので、JSで動かすよりガタつかない。
   （非対応ブラウザでは、このブロックは無視され、script.js が代わりに動かす）
   動き:  フレームの下端が画面の下端に着く → 上端が画面の上端に着く
          （画面が低くてフレームが収まらない場合は、frame高さの0.5倍以上かけて動かす）
          写真の下寄り(余白×0.60) → 写真の上端ぴったり
   ※ script.js の TRAVEL(0.60) / MIN_SPAN(0.5) と同じ値にしてある */
@supports (animation-timeline: view()){
  .bleed__frame{
    container-type:size;          /* 100cqh = frameの高さ（写真をずらす量の計算に使う） */
    view-timeline-name:--bleed;
    view-timeline-axis:block;
  }

  .bleed img{
    animation:bleed-pan auto linear both;
    animation-timeline:--bleed;
    animation-range:cover 100cqh cover max(calc(100% - 100cqh), 120cqh);
  }

  @keyframes bleed-pan{
    from{ transform:translateY(calc((-100% + 100cqh) * .60)); } /* -余白×0.60 */
    to  { transform:translateY(0); }
  }
}

@media (prefers-reduced-motion:reduce){
  .bleed img{
    animation:none !important;
    transform:none !important;
    top:0;
    height:100%;     /* 動かさない場合は、frameにぴったり収めて静止表示 */
    min-height:0;
  }
}


/* =========================================================
   PULL QUOTE
   ========================================================= */

.pull{
  background:var(--sprout-wash);
}

.nb{
  white-space:nowrap;
}

.pull p{
  margin:0;
  padding-left:22px;
  border-left:4px solid var(--sprout-ink);
  font-family:var(--mincho);
  font-weight:700;
  font-size:clamp(21px,3vw,30px);
  line-height:1.8;
  letter-spacing:.04em;
  max-width:22em;
}


/* =========================================================
   WORKS
   ========================================================= */

.work{
  display:grid;
  gap:28px;
  margin-bottom:clamp(88px,12vw,136px);
  align-items:start;
}

.work:last-child{
  margin-bottom:0;
}


/* ---------------------------------------------------------
   WORKS : desktop
   --------------------------------------------------------- */

@media (min-width:720px){

  .work{
    grid-template-columns:
      minmax(0,1.05fr)
      minmax(0,1fr);

    gap:clamp(36px,5vw,64px);
  }

  /*
   * 002は画像と本文を左右反転
   */
  .work--flip .work__media{
    order:2;
  }

  .work--flip .work__body{
    order:1;
  }

}


/* ---------------------------------------------------------
   WORKS : media
   --------------------------------------------------------- */

.work__media{
  min-width:0;
}

.work__media img{
  display:block;
  width:100%;
  height:auto;
}


/* ---------------------------------------------------------
   WORKS : body
   --------------------------------------------------------- */

.work__body{
  min-width:0;
  align-self:center;
}

.plate{
  margin:0 0 12px;
  font-size:11px;
  line-height:1.5;
  letter-spacing:.22em;
  color:var(--ink-dim);
  font-variant-numeric:tabular-nums;
}

.work__type{
  margin:0 0 6px;
  font-size:13px;
  line-height:1.6;
  letter-spacing:.12em;
  color:var(--sprout-ink);
  font-weight:500;
}

.work__title{
  margin:0 0 16px;
  font-family:var(--mincho);
  font-weight:700;
  font-size:clamp(24px,3.4vw,32px);
  line-height:1.4;
  letter-spacing:.06em;
}

.work__desc{
  margin:0 0 22px;
  font-size:15px;
  line-height:2;
  color:var(--ink-dim);
}

.work__link{
  font-weight:500;
  font-size:15px;
}


/* ---------------------------------------------------------
   WORKS : zoomable
   --------------------------------------------------------- */

.zoomable{
  display:block;
  width:100%;
  padding:0;
  margin:0;
  border:0;
  background:none;
  cursor:zoom-in;
}

.zoomable:hover img{
  opacity:.86;
}

.zoomable:focus-visible{
  outline:3px solid var(--sprout-ink);
  outline-offset:2px;
}


/* ---------------------------------------------------------
   WORKS : gallery
   --------------------------------------------------------- */

.gallery{
  grid-column:1 / -1;
  order:3;
  margin-top:4px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.gallery__item{
  display:block;
  width:100%;
  aspect-ratio:3 / 4;
  overflow:hidden;
  padding:0;
  border:0;
  background:none;
  cursor:zoom-in;
}

.gallery__item img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}


/* ---------------------------------------------------------
   WORKS : mobile
   --------------------------------------------------------- */

@media (max-width:719px){

  .work{
    display:block;
    margin-bottom:88px;
  }

  .work__body{
    margin-top:32px;
  }

  .work--flip .work__media,
  .work--flip .work__body{
    order:initial;
  }

  .gallery{
    margin-top:10px;
    grid-template-columns:
      repeat(2,minmax(0,1fr));
    gap:8px;
  }

}


/* =========================================================
   FILMS INTRO
   ========================================================= */

.films__intro{
  min-width:0;
}

.films__en{
  margin:0;
  font-family:var(--mincho);
  font-weight:700;
  font-size:clamp(18px,2.2vw,25px);
  line-height:1.45;
  letter-spacing:.08em;
}

.films__ja{
  margin:8px 0 0;
  font-size:13px;
  line-height:1.8;
  letter-spacing:.12em;
}

@media (max-width:899px){
  .films__intro{
    margin:-20px 0 0;
  }

  .films__en{
    font-size:18px;
  }

  .films__ja{
    font-size:12px;
  }
  
  .movies-scroll-container{
    margin-top:32px;
  }
}


/* =========================================================
   FILMS
   transformによる横スクロール + 継ぎ目のない無限ループ。
   自動スクロールなし / CSSアニメーションなし / スナップなし。
   ========================================================= */

.movies-scroll-container{
  --film-h:min(380px,60svh);
  --film-gap:16px;
  width:100cqw;
  margin-left:calc(50% - 50cqw);
  box-sizing:border-box;

  /* .sec__inのグリッド（見出し列＋本文列）に関係なく
     必ずグリッド全幅を使う。これがずれると
     100vw方式の左右揃えの計算が崩れる。 */
  grid-column:1 / -1;

  /* JSのtransformで動かすのでネイティブスクロールは使わない */
  overflow:hidden;

  /* 縦スワイプはページのスクロールに任せ、横だけJSが受け取る */
  touch-action:pan-y;

  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
}

.movies-scroll-container.is-dragging{
  cursor:grabbing;
}

.movies{
  display:flex;
  gap:var(--film-gap);
  width:max-content;
  padding-bottom:8px;
  will-change:transform;
}

.movies-loop-group{
  display:flex;
  gap:var(--film-gap);
  width:max-content;
  flex:0 0 auto;
}

.movies-loop-group > .yt-wrap,
.movies-loop-group > .tt-wrap{
  flex:0 0 auto;
}

.movies img,
.movies a{
  -webkit-user-drag:none;
  user-drag:none;
}

.yt{
  position:relative;
  display:block;
  width:calc(var(--film-h) * 16 / 9);
  height:var(--film-h);
  aspect-ratio:16 / 9;
  overflow:hidden;
  flex:0 0 auto;
  background:#111;
  border-radius:4px;
}

.yt img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.yt__play{
  position:absolute;
  left:50%;
  top:50%;
  width:64px;
  height:64px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(27,33,30,.82);
}

.yt__play::after{
  content:'';
  position:absolute;
  left:25px;
  top:20px;
  border-left:20px solid #fff;
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
}

.tt{
  position:relative;
  display:block;
  width:calc(var(--film-h) * 16 / 9);
  height:var(--film-h);
  aspect-ratio:16 / 9;
  overflow:hidden;
  flex:0 0 auto;
  background:#111;
  border-radius:4px;
}

.tt__thumb{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
}

.tt__shade{
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.12),
    rgba(0,0,0,.28)
  );
  pointer-events:none;
}

@media (max-width:767px){
  .movies-scroll-container{
    --film-h:clamp(170px,50vw,240px);
    --film-gap:12px;
    touch-action:pan-y;
  }
}

.ico{
  width: 1em;
  height: 1em;
  display: inline-block;
  fill: currentColor;
  vertical-align: -.12em;
}

.tt__logo{
  position: absolute;
  top: 14px;
  left: 14px;
  width: 26px;
  height: 26px;
  color: #fff;
}

.sns{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.sns a{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
}

/* =========================================================
   MEMBERS
   ========================================================= */

.member{
  display:grid;
  grid-template-columns:144px minmax(0,1fr);
  gap:28px;
  margin-bottom:72px;
  align-items:start;
}

.member:last-child{
  margin-bottom:0;
}

.member__photo{
  width:144px;
  height:144px;
  object-fit:cover;
}

.member__body{
  min-width:0;
}

.member__name{
  margin:0 0 14px;
  font-family:var(--mincho);
  font-weight:700;
  font-size:22px;
  line-height:1.5;
  letter-spacing:.04em;
}

.member__role{
  display:block;
  margin-bottom:4px;
  font-family:var(--gothic);
  font-size:11px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:.16em;
  color:var(--sprout-ink);
}

.member__bio{
  margin:0;
  color:var(--ink-dim);
  font-size:14px;
  line-height:2;
}

.member__sns{
  margin-top:18px;
}

@media (max-width:719px){

  .member{
    grid-template-columns:1fr;
    gap:22px;
    margin-bottom:64px;
  }

  .member__photo{
    width:120px;
    height:120px;
  }

}


/* =========================================================
   CLOSING (むすびのことば)
   ========================================================= */

.sec.closing{
  padding-top: clamp(96px, 14vw, 168px);
  padding-bottom: 0;
}

/* 主役となる日本語メッセージ */
.closing__ja-main{
  margin: 0;
  padding-left: 22px;
  border-left: 4px solid var(--sprout);
  font-family: var(--mincho);
  font-weight: 700;
  font-size: clamp(20px, 2.8vw, 28px);
  line-height: 1.8;
  letter-spacing: .06em;
  color: var(--on-moss);
}

/* パソコン等の広い画面のときは一行にする */
@media (min-width: 720px) {
  .closing__nowrap {
    white-space: nowrap;
  }
}

/* かっこよく洗練された英語メッセージ */
.closing__en-sub{
  margin: 24px 0 0 22px; /* 日本語との距離を少し詰めて一体感を出す */
  font-family: var(--mincho);
  font-weight: 500;
  font-size: clamp(13px, 1.5vw, 15px);
  line-height: 1.4;
  letter-spacing: 0.12em; /* 字間を少し広げてシャープな印象に */
  color: var(--on-moss); /* 色を少し起こして存在感をプラス */
  opacity: 0.85; /* べた塗りではなく少し透過させることで上品に馴染ませる */
  font-style: italic; /* 少しだけ斜体（イタリック）にすることで、デザインのアクセントと情緒をプラス */
}
/* =========================================================
   FOOTER
   ========================================================= */

.foot{
  padding:
    clamp(56px,9vw,100px)
    var(--gutter)
    40px;

  background:var(--moss);
  color:var(--on-moss);
}

.foot__in{
  max-width:1040px;
  margin:0 auto;

  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
}

.foot__logo{
  width:min(280px,55vw);
  height:auto;
}

.foot p{
  margin:0;
  color:var(--on-moss-dim);
  font-size:12px;
  line-height:1.8;
}

.foot a{
  color:var(--on-moss);
}

@media (max-width:719px){

  .foot__in{
    display:block;
  }

  .foot__logo{
    width:min(260px,100%);
    margin-bottom:28px;
  }

}


/* =========================================================
   VIDEO PLAYER
   ========================================================= */

.player{
  /* 横幅は画面の約88%。ただし高さが画面に収まり、上に閉じるボタンの余白が残るよう制限 */
  width:min(88vw,1100px,calc((100vh - 144px) * 16 / 9));
  width:min(88vw,1100px,calc((100dvh - 144px) * 16 / 9));
  max-width:none;
  padding:0;
  border:0;
  background:transparent;
  color:#fff;
  overflow:visible; /* 上に飛び出す閉じるボタンが切れないように */
}

.player::backdrop{
  background:rgba(0,0,0,.82);
}

.player__box{
  position:relative;
  width:100%;
  padding-top:56.25%;
  background:#000;
}

.player__frame{
  position:absolute;
  inset:0;
}

.player__frame iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}



/* =========================================================
   CLOSE BUTTON (画像ビューアー・動画プレーヤー共通)
   ========================================================= */

.close-btn{
  position:absolute;
  right:0;
  bottom:calc(100% + 12px);   /* 画像・動画の右上、すぐ上に置く */
  z-index:5;

  display:inline-flex;
  align-items:center;
  gap:8px;

  height:44px;
  margin:0;
  padding:0 20px 0 18px;

  border:0;
  border-radius:999px;

  background:#fff;
  color:var(--ink);

  font-family:var(--gothic);
  font-size:15px;
  font-weight:700;
  line-height:1;
  letter-spacing:.08em;
  white-space:nowrap;

  cursor:pointer;
  box-shadow:0 2px 12px rgba(0,0,0,.45);

  -webkit-appearance:none;
  appearance:none;
}

.close-btn__ico{
  display:block;
  flex:none;
  width:14px;
  height:14px;
}

.close-btn:hover{
  background:var(--sprout);
}

.close-btn:focus-visible{
  outline:3px solid var(--sprout);
  outline-offset:3px;
}


/* =========================================================
   LIGHTBOX
   ========================================================= */

.lightbox{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  height:100dvh;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  background:rgba(0,0,0,.9);
  overflow:hidden;
}

.lightbox::backdrop{
  background:rgba(0,0,0,.9);
}

.lightbox__box{
  width:100%;
  height:100%;

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

  /* 上は閉じるボタンの分だけ広く取る */
  padding:72px 24px 24px;
}

.lightbox__viewer{
  position:relative;   /* 閉じるボタンの基準(画像の右上) */
}

.lightbox__viewer img{
  display:block;

  width:auto;
  height:auto;

  max-width:calc(100vw - 48px);
  max-height:calc(100vh - 96px);
  max-height:calc(100dvh - 96px);

  object-fit:contain;
}