@charset "UTF-8";
body {
  background-color: #fbf9f6;
}
/*//////////PCサイズ///////////*/
/*//////////PCサイズ///////////*/
@media screen and (min-width: 768px) {

/** ==============================
 * ファーストビュー start
 * ============================== **/
.MainVisualSection {
  position: relative;
  width: 100vw;
  /*height: calc(var(--vh, 1vh) * 100);
  height: 100vh;
   min-height: 600px; ← 任意で残してもOK */
  aspect-ratio: 16 / 12;
  overflow: hidden;
  background-color: #333;
}
/* ===== 動画背景 ===== */
.MainVisualSection__video-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.MainVisualSection__video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ★ 黒オーバーレイ */
.MainVisualSection__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3); /* 黒＋透明30% */
  z-index: 2;
  pointer-events: none; /* 下の動画ボタンなどの操作を邪魔しない */
}
/* ===== ブランドMOVIEリンク・コピー配置 ===== */
.MainVisualSection__content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}
.MainVisualSection__brand-movie {
  align-self: flex-start;
  margin: 0 0 40px 40px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  pointer-events: auto;
}
/* ブランドムービーボタン */
.MainVisualSection__brand-link img {
  width: 10vw;
  height: auto;
}
/* ライトボックスのスタイル */
.VideoLightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999; /* 必ずヘッダーより前に */
  align-items: center;
  justify-content: center;
}
.VideoLightbox.is-active {
  display: flex;
}
.VideoLightbox__inner {
  position: relative;
  max-width: 90%;
  max-height: 80%;
}
.VideoLightbox__inner video {
  width: 100%;
  max-width: 1280px;
  height: auto;
  display: block;
}
.VideoLightbox__close {
  position: absolute;
  top: -2.5rem;
  right: -2.5rem;
  font-size: 2rem;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10000; /* 念のためボタンも強く */
}
.MainVisualSection__brand-link:hover {
  opacity: 0.8;
}
.MainVisualSection__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: absolute;
  left: 10vw;
  top: 41%;
  margin: 0 0 0 0;
  z-index: 2;
  pointer-events: auto;
}
.MainVisualSection__en.serif {
  font-family: 'Noto Serif JP', serif;
  font-size: 2.7rem;
  font-weight: 100;
  color: #fff;
  letter-spacing: 0.2rem;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
  line-height: 190%
}
.HeaderSection {
  position: relative;
}
/* ヘッダーは画像の前面（オーバーレイ） */
/* 旧：
.MainVisualHeader{
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  z-index: 10;
  background: transparent;
}
*/
.MainVisualHeader {
  /* fixed は common.css に従う */
  background: transparent;
  z-index: 1000; /* 念のため強めておく（任意） */
}
/* 画像コンテナ：100vw × 28vw */
.MainVisualSection__content {
  width: 100vw;
  height: 28vw;
  overflow: hidden;
}
/* 画像は等倍でトリミング（cover） */
.mv-img, .mv-img img {
  width: 100%;
  height: 100%;
  display: block;
}
.mv-img img {
  object-fit: cover;
}
/** ==============================
 * ファーストビュー end
 * ============================== **/
/* ==============================
 * 汎用リボンヒーロー（PCのみ）
 * ============================== */
.RibbonHeroSection {
  position: relative;
  height: calc(18vw + 70px);
  padding-top: 70px
}
/* セクション内インナー（ラベル整列用） */
.rhero-in {
  width: 100vw; /* TB規約v1：sec-in=85vw */
  margin: 0 auto;
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center; /* ← 高さが付くので効くようになる */
  height: 18vw; /* ← 追加：親と同じ高さを持たせる */
}
/* 白帯ラベル */
.rhero-label {
  display: inline-block;
  background: #fff;
  padding: 0.5vw 1.4vw;
  margin: 0 5vw;
  position: relative; /* z-index を効かせるため */
  z-index: 3;
}
.RibbonHeroSection .ttl {
  color: #947847;
  margin: 0;
  z-index: 1;
}
/* 右側の画像（絶対配置） */
.rhero-figure {
  position: absolute;
  right: 0;
  top: 0;
  width: 60vw;
  height: 18vw;
  z-index: 2;
  overflow: hidden;
}
/* 最背面の帯（生成り） */
.RibbonHeroSection .obi {
  position: absolute;
  left: 0;
  top: 1.6vw;
  width: 100%;
  height: 15vw;
  background: #e3daca;
  z-index: 0;
}
.rhero-figure img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
/** ==============================
 汎用リボンヒーロー end
============================== **/

/* ==============================
 * ギャラリー一覧（cards） style start（PC）
 * ============================== */

.gal-cards {
width: 90vw;
margin: auto;
padding: 10vw 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4vw;
}

/* カード全体リンク */
.card .card-lk {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* サムネイル */
.ph {
  position: relative;
  aspect-ratio: 16/9.5;
  overflow: hidden;
  background: #ddd;
}
.ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 角飾り（要素方式） */
.ph_tryangle {
  width: 3vw;
  height: 3vw;
  position: absolute;
  top: 0%;
  left: 0%;
  clip-path: polygon(0 0, 0% 100%, 100% 0);
  background: #947847;
}

/* テキスト塊 */
.card .txt {
  padding: 1.2vw 0 .6vw;
}

/* カード見出し（専用見出し） */
.gal-card__ttl {
  font-weight: 700;
  color: #947847;
  line-height: 1.6;
  letter-spacing: .02em;
  font-size: 1.3rem;
  margin: 0 0 .4vw 0;
  font-family: 'Noto Sans JP', sans-serif;
}

/* 補助テキスト（所在地・スペック） */
.gal-card__meta {
  color: #6f6556;
  font-size: .95rem;
  line-height: 1.9;
}

/* ==============================
 * ギャラリー一覧（cards） style end
 * ============================== */

}
/*//////////SPサイズ///////////*/
@media screen and (max-width:767px) {
/** ==============================
 * ファーストビュー (SP) start
 * ============================== **/
.MainVisualSection {
  position: relative;
  width: 100vw;
  aspect-ratio: 16 / 12;
  overflow: hidden;
  background-color: #333;
}
/* ===== 動画背景 ===== */
.MainVisualSection__video-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.MainVisualSection__video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ★ 黒オーバーレイ */
.MainVisualSection__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 2;
  pointer-events: none;
}
/* ===== 画像コンテナ（SP最適化） ===== */
.MainVisualSection__content {
  width: 100vw;
  aspect-ratio: 16 / 11;   /* 100vw×28vw → 比率管理で安定 */
  overflow: hidden;
}
.mv-img, .mv-img img {
  width: 100%;
  height: 100%;
  display: block;
}
.mv-img img { object-fit: cover; }

/* ブランドMOVIEリンク等（必要な場合のみ表示） */
.MainVisualSection__brand-movie {
  align-self: flex-start;
  margin: 0 0 4vw 4vw;     /* 40px → 4vw */
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  pointer-events: auto;
}
.MainVisualSection__brand-link img {
  width: 24vw;             /* 10vw → タップ性確保 */
  height: auto;
}

/* ライトボックス（SP向けサイズ） */
.VideoLightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,.8); z-index:9999; align-items:center; justify-content:center; }
.VideoLightbox.is-active{ display:flex; }
.VideoLightbox__inner{ position:relative; max-width:90vw; max-height:80vh; }
.VideoLightbox__inner video{ width:100%; height:auto; display:block; }
.VideoLightbox__close{ position:absolute; top:.8rem; right:.8rem; font-size:1.6rem; color:#fff; background:none; border:none; cursor:pointer; z-index:10000; }
/** ==============================
 * ファーストビュー (SP) end
 * ============================== **/

/* ==============================
 * 汎用リボンヒーロー (SP) start
 * ============================== */
.RibbonHeroSection{
  position: relative;
  display: grid;                  /* ← 重ね合わせの土台 */
  grid-template-areas: "stack";   /* 1セルを共有させて重ねる */
  padding: 70px 0 0;              /* 画像を上から70px下げて開始（要件） */
}

/* セクション内インナー（ラベル等） */
.rhero-in{
  grid-area: stack;               /* ← 同じセルに重ねる */
  width: 100vw;                   /* 87vw → 100vw（要望） */
  margin: 0 auto;
  position: relative;
  z-index: 3;                     /* 帯や画像より前に */
}

/* 右側の画像（全幅・比率10:3） */
.rhero-figure{
  grid-area: stack;               /* ← 画像も同セル */
  position: relative;
  width: 100%;
  aspect-ratio: 10 / 4;           /* 要望の比率 */
  overflow: hidden;
  z-index: 1;
}
.rhero-figure img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* タイトル：画像の右下固定（right:0,bottom:0 相当） */
.RibbonHeroSection .ttl{
  grid-area: stack;               /* ← 画像と同セルに重ねる */
  align-self: end;                /* 下寄せ */
  justify-self: end;              /* 右寄せ */
  margin: 0;
  margin-right: 0vw;
  margin-bottom: 0.3rem;
  font-size: 1.6rem;              /* ビルドSP：見出し */
  line-height: 1.4;
  color: #947847;
  z-index: 2;
}

/* 白帯ラベル（そのまま使用可） */
.rhero-label{
  display: inline-block;
  background: #fff;
  padding: .6rem 1rem;
  margin: 7vw 0 .8rem 0;
  position: relative;
  z-index: 4;                     /* タイトルより前に出したい場合は 4 */
}

/* 最背面の帯（生成り） */
.RibbonHeroSection .obi{
  position: absolute;
  left: 0;
  top: .8rem;
  width: 100%;
  height: 24vw;
  background: #e3daca;
  z-index: 0;
}
/* ==============================
 * 汎用リボンヒーロー (SP) end
 * ============================== */
/* ==============================
 * ギャラリー一覧（cards） style (SP) start
 * ============================== */
.gal-cards {
  width: 90vw;                 /* 90vw → 既定：87vw */
  margin: 0 auto;
  padding: 3rem 0;             /* 10vw 0 → 2rem 0 */
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* 3 → 2カラム */
  gap: 3rem 1.2rem ;                   /* 4vw → 1rem */
}

/* カード全体リンク */
.card .card-lk {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* サムネイル */
.ph {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #ddd;
}
.ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 角飾り（SP向けに少し大きめに） */
.ph_tryangle {
  width: 6vw;                  /* 3vw → 6vw */
  height: 6vw;
  position: absolute;
  top: 0;
  left: 0;
  clip-path: polygon(0 0, 0% 100%, 100% 0);
  background: #947847;
}

/* テキスト塊 */
.card .txt {
  padding: 0.1rem 0 0 0;      /* 1.2vw 0 .6vw → rem化 */
}

/* カード見出し（カード内見出し） */
.gal-card__ttl {
  font-weight: 700;
  color: #947847;
  line-height: 1.6;
  letter-spacing: .02em;
  font-size: 1rem;           /* 既存どおり */
  margin: 0 0 0 0;
  font-family: 'Noto Sans JP', sans-serif;

  /* ここから追加／変更 */
  height: calc(1.6em * 2);     /* 行間(1.6) × 4行 = 固定高 */
  display: flex;               /* テキストノードを匿名Flexアイテム化 */
  align-items: center;         /* 上下中央揃え */
  overflow: hidden;            /* 5行目以降は非表示（省略記号なし） */
}


/* 補助テキスト（所在地・スペック） */
.gal-card__meta {
  color: #6f6556;
  font-size: 0.9rem;           /* ビルドSP：本文 */
  line-height: 1.8;            /* ビルドSP：行間 */
}
/* ==============================
 * ギャラリー一覧（cards） style (SP) end
 * ============================== */

}