@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%
  }
  /** ==============================
 * ファーストビュー end
 * ============================== **/
  .HeaderSection {
    position: relative;
    padding-top: 28vw;
  }
  /* ヘッダーは画像の前面（オーバーレイ） */
  /* 旧：
.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
 * ============================== **/
  /* ==============================
 * ページタイトル（Strengths Head） style start
 * ============================== */
  .StrengthsHead {
    padding: 6vw 0;
    border-bottom: 1px solid rgba(148, 120, 71, 0.5);
  }
  .str-in {
    width: 90vw; /* TB規約v1：基本はsec-in=85vw */
    margin: 0 auto;
  }
  /* 小見出し（私たちの強み） */
  .str-tag {
    font-size: 1.5rem;
    letter-spacing: 0.1rem;
    color: #93815f;
    margin: 0 0 1vw;
    font-weight: 700;
    font-family: 'Noto Serif JP', serif;
  }
  /* タイトル（選ばれる理由） */
  .str-ttl {
    font-size: 3.8vw; /* 見本に合わせ大きめ。SPは後段で調整予定 */
    line-height: 1.2;
    letter-spacing: 0.15rem;
    color: #93815f;
    margin: 0 0 0.8vw;
    font-weight: 500;
    font-family: 'Noto Serif JP', serif;
  }
  /* リード（コスト・性能・安心〜） */
  .str-lead {
    line-height: 2;
    font-size: 2rem;
    text-align: justify;
    font-weight: 400;
    letter-spacing: 0.1rem;
    color: #93815f;
    margin: 0;
    font-family: 'Noto Serif JP', serif;
  }
  /* ==============================
 * ページタイトル（Strengths Head） style end
 * ============================== */
  /* ==============================
 * 強みセクション 共通 style start
 * ============================== */
  .StrSplitSec {
    padding: 6vw 0;
  }
  .str-split-in {
    width: 100vw;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 45vw; /* 左：1fr / 右：45vw（指定） */
    grid-template-areas: "words imgs"; /* 順序をエリアで管理 */
    column-gap: 0vw;
    align-items: center; /* 上下センター */
  }
  /* 反転（左右入れ替え） */
  .StrSplitSec.is-reverse .str-split-in {
    grid-template-columns: 45vw 1fr;
    grid-template-areas: "imgs words";
  }
  /* テキスト枠：セル内で上下左右センター配置、ただしテキストは左揃え */
  .str-split__words {
    grid-area: words;
    justify-self: center; /* 左右センター */
    align-self: center; /* 上下センター */
    text-align: left; /* テキストは左揃え */
    width: 80%;
  }
  /* 画像コンテナ（縦積み） */
  .str-split__imgs {
    grid-area: imgs;
    width: 45vw; /* ご指定の枠幅 */
    display: grid;
    row-gap: 0vw;
  }
  /* 画像は比率固定＋coverでトリミング（TB規約v1） */
  .str-split__img {
    width: 100%;
    aspect-ratio: 16 / 10; /* 参考。必要に応じて変更可 */
    overflow: hidden;
  }
  .str-split__img {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
  }
  .str-split__img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
  /* タイトル＆本文（共通クラスを活用） */
  .StrSplitSec .ttl {
    color: #947847;
    margin: 0 0 1.6vw;
  }
  .StrSplitSec .lead {
    color: #6f624d;
    margin: 0;
  }
  /*グッドデザイン受賞*/
  .str-note {
    margin: 2.5rem 0 0 0; /* lead 直下の上余白 */
  }
  .str-note__inner {
    padding: 1.3rem 1.5rem;
    border: .1rem solid #b7aa98; /* 枠線色（仮：生成り系） */
  }
  /* 見出し（小見出し用。page用 .ttl は使わない） */
  .str-note__ttl {
    /* サイズ系はcommon.cssに依存させないため独立定義 */
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1;
    letter-spacing: .03rem;
    color: #947847;
    margin: 0 0 1rem;
  }
  /* 本文：サイズ・行間はleadに準拠させたいが、ここは別要素なので個別指定 */
  .str-note__text {
    font-size: 1.05rem; /* commonのleadと同値だが、ここは .lead を使っていないため付与 */
    line-height: 2;
    letter-spacing: .1rem;
    font-weight: 400;
    text-align: justify;
    color: #3e3a37; /* 読みやすい濃度。必要に応じ #6f624d に変更可 */
    margin: 0;
  }
  /* ==============================
 * 強みセクション 共通 style end
 * ============================== */
  /* ==============================
 * グループ価値訴求セクション layout
 * ============================== */
  .GroupSec {
    /* 左上→左下のグラデーション（ご指定色） */
    background: linear-gradient(180deg, #5a9e86 0%, #3d7e67 50%, #3e6460 100%);
    padding: 6vw 0;
  }
  .group-in {
    width: 90vw;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 40vw 1fr; /* 左=文字群 / 右=図 */
    grid-template-areas: "words fig";
    column-gap: 3vw;
    align-items: center;
  }
  .group-words {
    grid-area: words;
  }
  .group-figure {
    grid-area: fig;
  }
  /* ==============================
 * タイポ（common.cssの .ttl/.lead は再定義しない）
 * ============================== */
  .grp-eyebrow {
    font-family: 'Jost', sans-serif; /* Jost想定（Adobe Fonts等で読み込み前提） */
    font-weight: 300;
    font-size: 3rem;
    letter-spacing: .08rem;
    color: #d4caba;
    margin: 0 0 1.2vw;
  }
  .GroupSec .ttl {
    color: #fff;
    margin: 0 0 1.6vw;
  }
  .GroupSec .lead {
    color: #fff;
    margin: 0 0 2.2vw;
  }
  /* ==============================
 * 右：図（img34.webp）＋右上ロゴ
 * ============================== */
  .group-diagram {
    position: relative;
    width: 100%;
    /* 高さは画像依存。カンプに合わせたい場合は比率指定も可：aspect-ratio */
  }
  .group-diagram > img {
    width: 100%;
    height: auto;
    display: block;
  }
  .group-diagram__logo {
    position: absolute;
    top: 0;
    right: 0;
    width: 8vw;
    height: auto;
    transform: translate(15%, -15%); /* 右上に少しはみ出す配置 */
    pointer-events: none;
  }
  /* ==============================
 * 枠ボックス（タイトル＋ロゴ／本文／リンク）
 * ============================== */
  .grp-card {
    border: .1rem solid rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .06);
    padding: 2.2vw;
  }
  .grp-card__head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 2vw;
    margin: 0 0 1.2vw;
  }
  .grp-card__ttl {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .05rem;
    font-family: 'Noto Serif JP', serif;
  }
  .grp-card__logo img {
    display: block;
    width: 9vw; /* ロゴの見た目サイズ。必要に応じ調整可 */
    height: auto;
  }
  .grp-card__text .lead {
    color: #fff; /* サイズ・行間は .lead に委譲し、色のみ上書き */
    margin: 0;
    font-size: 0.9rem;
  }
  .grp-card__link {
    width: 100%;
    text-align: right;
    display: inline-block;
    margin-top: 0.5rem;
    color: #fff;
    text-decoration: none;
    letter-spacing: .05rem;
  }
  .grp-card__link:hover {
    opacity: .9;
  }
}
/*//////////SPサイズ///////////*/
/*//////////SPサイズ///////////*/
@media screen and (max-width:767px) {
  /** ==============================
 * ファーストビュー (SP)
 * ============================== **/
  .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;
    z-index: 2;
    background: rgba(0, 0, 0, .3);
    pointer-events: none;
  }
  /* 画像/動画コンテナ（比率運用） */
  .MainVisualSection__content {
    position: static; /* absolute → static（SPは自然フロー） */
    width: 100vw;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    z-index: 3;
  }
  /* ロゴ等（画像） */
  .mv-img, .mv-img img {
    width: 100%;
    height: 100%;
    display: block;
  }
  .mv-img img {
    object-fit: cover;
  }
  /* ブランドムービー */
  .MainVisualSection__brand-movie {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 4;
    margin: 0 0 4vw 4vw; /* 40px → 4vw */
    pointer-events: auto;
  }
  .MainVisualSection__brand-link img {
    width: 24vw;
    height: auto;
  }
  .MainVisualSection__brand-link:hover {
    opacity: .8;
  }
  /* コピー */
  .MainVisualSection__copy {
    position: absolute;
    left: 6.5vw;
    right: 6.5vw; /* 安全域 */
    bottom: 10vw; /* 下部UIと干渉しない位置 */
    margin: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    pointer-events: auto;
  }
  .MainVisualSection__en.serif {
    font-family: 'Noto Serif JP', serif;
    font-size: 1.8rem; /* ビルドSP：役割文字はやや大きめ */
    font-weight: 100;
    color: #fff;
    letter-spacing: .12rem;
    line-height: 1.8; /* ビルドSP */
    text-shadow: 0 .125rem 1.125rem rgba(0, 0, 0, .18);
  }
  /* ライトボックス（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;
  }
  /* ヘッダー重なり調整 */
  .HeaderSection {
    position: relative;
    padding-top: 0;
  } /* 28vw → 0（比率運用に移行） */
  .MainVisualHeader {
    background: transparent;
    z-index: 1000;
  }
  /** ==============================
 * ページタイトル（Strengths Head） (SP)
 * ============================== */
  .StrengthsHead {
    padding: 2.4rem 0;
    border-bottom: 1px solid rgba(148, 120, 71, .5);
  }
  .str-in {
    width: 87vw;
    margin: 0 auto;
  }
  .str-tag {
    font-size: 1.2rem;
    letter-spacing: .1rem;
    color: #93815f;
    margin: 0 0 .6rem;
    font-weight: 700;
    font-family: 'Noto Serif JP', serif;
  }
  .str-ttl {
    font-size: 1.6rem; /* ビルドSP：見出し */
    line-height: 1.4;
    letter-spacing: .12rem;
    color: #93815f;
    margin: 0 0 .6rem;
    font-weight: 500;
    font-family: 'Noto Serif JP', serif;
  }
  .str-lead {
    font-size: 1.0rem; /* ビルドSP：本文 */
    line-height: 1.8; /* ビルドSP：行間 */
    text-align: justify;
    letter-spacing: .06rem;
    color: #93815f;
    margin: 0;
    font-family: 'Noto Serif JP', serif;
  }
  /** ==============================
 * 強みセクション 共通 (SP)
 * ============================== */
  .StrSplitSec {
    padding: 2.4rem 0;
  }
  .str-split-in {
    width: 87vw;
    margin: 0 auto;
    display: grid;
    row-gap: 1.2rem;
    column-gap: 0;
    grid-template-columns: 1fr; /* 1カラム化 */
    grid-template-areas:
      "words"
      "imgs";
    align-items: start;
  }
  /* 反転時も1カラム（順序は同じに） */
  .StrSplitSec.is-reverse .str-split-in {
    grid-template-columns: 1fr;
    grid-template-areas:
      "words"
      "imgs";
  }
  .str-split__words {
    grid-area: words;
    justify-self: stretch;
    align-self: start;
    text-align: left;
    width: 100%;
  }
  .str-split__imgs {
    grid-area: imgs;
    width: 100%;
    display: grid;
    row-gap: .8rem;
  }
  /* 画像比率維持 */
  .str-split__img {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
  }
  .str-split__img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
  /* タイトル/本文（ビルドSP） */
  .StrSplitSec .ttl {
    color: #947847;
    margin: 0 0 1rem;
    font-size: 1.5rem;
    line-height: 1.75;
  }
  .StrSplitSec .lead {
    color: #6f624d;
    margin: 0 0 2rem 0;
    font-size: 1.0rem;
    line-height: 1.8;
    letter-spacing: .04rem;
  }
  /* グッドデザイン受賞ノート */
  .str-note {
    margin: 1.6rem 0 0;
  }
  .str-note__inner {
    padding: 1rem 1rem;
    border: .1rem solid #b7aa98;
    background: transparent;
  }
  .str-note__ttl {
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.2;
    letter-spacing: .03rem;
    color: #947847;
    margin: 0 0 .6rem;
  }
  .str-note__text {
    font-size: 1.0rem;
    line-height: 1.8;
    letter-spacing: .06rem;
    font-weight: 400;
    text-align: justify;
    color: #3e3a37;
    margin: 0;
  }
  /** ==============================
 * グループ価値訴求セクション (SP)
 * ============================== */
  .GroupSec {
    background: linear-gradient(180deg, #5a9e86 0%, #3d7e67 50%, #3e6460 100%);
    padding: 2.4rem 0;
  }
  .group-in {
    width: 87vw;
    margin: 0 auto;
    display: grid;
    row-gap: 1.6rem;
    column-gap: 0;
    grid-template-columns: 1fr;
    grid-template-areas:
      "words"
      "fig";
    align-items: start;
  }
  .group-words {
    grid-area: words;
  }
  .group-figure {
    grid-area: fig;
  }
  /* タイポ */
  .grp-eyebrow {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 1.4rem; /* 3rem → SP縮小 */
    letter-spacing: .06rem;
    color: #d4caba;
    margin: 0 0 .6rem;
  }
  .GroupSec .ttl {
    color: #fff;
    margin: 0 0 1rem;
    font-size: 1.6rem;
    line-height: 1.4;
  }
  .GroupSec .lead {
    color: #fff;
    margin: 0 0 1.2rem;
    font-size: 1.0rem;
    line-height: 1.8;
    letter-spacing: .04rem;
  }
  /* 図＋ロゴ */
  .group-diagram {
    position: relative;
    width: 100%;
  }
  .group-diagram > img {
    width: 100%;
    height: auto;
    display: block;
  }
  .group-diagram__logo {
    position: absolute;
    top: 0;
    right: 0;
    width: 24vw;
    height: auto;
    transform: translate(10%, -10%);
    pointer-events: none;
  }
  /* 枠カード */
  .grp-card {
    border: .1rem solid rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .06);
    padding: 1rem;
  }
  .grp-card__head {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    column-gap: 1rem;
    margin: 0 0 .8rem;
  }
  .grp-card__ttl {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .04rem;
    font-family: 'Noto Serif JP', serif;
    margin: 0;	  text-align: center;
  }
  .grp-card__logo{
      width: 100%;
	  text-align: center;
	  margin: 01rem 0 0 0  ;
	  }
  .grp-card__logo img {
    display: block;
    width: 28vw;
    height: auto;
	margin: auto;
  }
  .grp-card__text .lead {
    color: #fff;
    margin: 0;
    font-size: 1.0rem;
    line-height: 1.8;
  }
  .grp-card__link {
    width: 100%;
    display: inline-block;
    text-align: right;
    margin-top: .5rem;
	font-size: 3.3vw;
    color: #fff;
    text-decoration: none;
    letter-spacing: .04rem;
  }
  .grp-card__link:hover {
    opacity: .9;
  }
}