@charset "utf-8";
/* CSS Document */
/* =========================================
   Product page styles (companyに準拠)
   ========================================= */
:root{
  --company-wrap: min(1200px, 92vw);
  --company-ink: #141414;
  --company-blue: #0e5fbe;
}

/* セクション余白 */
.main{
  padding: clamp(48px, 7vw, 100px) 0 clamp(36px, 5vw, 80px);
}

/* 見出しボックス（今回はh1のみ） */
.main .box{
  width: var(--company-wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  gap: clamp(20px, 4vw, 64px);
}

/* 見出し（companyと統一） */
.main h1{
  margin: 0;
  font-family: "Times New Roman","Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  font-weight: 500;
  font-size: clamp(48px, 14vw, 162px);
  line-height: 1;
  letter-spacing: .06em;
  color: var(--company-ink);
}

/* リード文（companyと統一） */
.main > p{
  width: var(--company-wrap);
  margin: clamp(18px, 3vw, 36px) auto 0;
  font-size: clamp(18px, 2.4vw, 30px);
  line-height: 1.75;
  font-weight: bold;
  letter-spacing: .05em;
  color: var(--company-ink);
}
.main > p span{ color: var(--company-blue); }

/* =========================================
   見出し下：2枚画像の“段差＋重なり（フルブリード）”
   ========================================= */
.main .grid{
  /* 調整ノブ */
  --pair-gap: clamp(12px, 2.5vw, 32px);   /* 2枚の基本間隔 */
  --y-shift: clamp(14px, 2.5vw, 48px);    /* 上下段差＆<p>頭合わせ量 */
  --overlap-x: clamp(32px, 4vw, 80px);     /* 横方向の重なり（右→左） */

  /* フルブリード */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
    overflow-x: clip;

  display: grid;
  grid-template-columns: 1.25fr 1.45fr;      /* 左をやや細く */
  column-gap: var(--pair-gap);
  align-items: start;

  /* 右画像の上端を <p> の“頭”に寄せるために全体を少し引き上げ */
  margin-top: calc(-1 * var(--y-shift));
}

/* svw/dvw が使える環境ではこちらを優先 */
@supports (width: 100svw){
  .main .grid{
    width: 100svw;
    margin-left: calc(50% - 50svw);
    margin-right: calc(50% - 50svw);
  }
}
@supports (width: 100dvw){
  .main .grid{
    width: 100dvw;
    margin-left: calc(50% - 50dvw);
    margin-right: calc(50% - 50dvw);
  }
}

@supports (width: 100dvw){
  .main .grid{
    width: 100dvw;
    margin-left: calc(50% - 50dvw);
    margin-right: calc(50% - 50dvw);
  }
}

.main .grid > div{ position: relative; }
.main .grid img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}

/* 左：少し下げる（下レイヤー） */
.main .grid > div:first-child{
  transform: translateY(calc(var(--y-shift) * 3.0));
  z-index: 1;
}

/* 右：少し上げて左へ被せる（上レイヤー） */
.main .grid > div:last-child{
  transform: translateY(calc(-1 * var(--y-shift) * .3));
  margin-left: calc(-1 * var(--overlap-x));
  z-index: 2;
}

/* =========================================
   Responsive
   ========================================= */
@media (max-width: 1024px){
  .main h1{ font-size: clamp(44px, 12vw, 86px); }
  .main > p{ font-size: clamp(15px, 4vw, 20px); }
}

@media (max-width: 768px){
  .main .grid{
    grid-template-columns: 1fr;
    row-gap: var(--pair-gap);
    margin-top: .5rem;           /* 引き上げ解除：pの直下に素直に配置 */
  }
  .main .grid > div:first-child,
  .main .grid > div:last-child{
    transform: none;
    margin-left: 0;
  }
}




/* ===== Contents block ===== */
.contents{
  /* 調整ノブ */
  --overlap-y: clamp(24px, 8vw, 160px); /* 右写真のせり上げ量（+で上へ） */
  --gap: clamp(20px, 4vw, 64px);

  padding: clamp(56px, 8vw, 120px) 0 clamp(48px, 7vw, 96px);
  color: var(--company-ink);
}

/* 見出し（SVG）：中央寄せ＆前面に */
.contents .section-title{
  width: var(--company-wrap);
  margin: 0 auto;
  position: relative;
  z-index: 5;                /* ← 写真より手前に */
  pointer-events: none;      /* クリックを邪魔しない（任意） */
}
/* h2(svg) を最大 50vw に */
.contents .section-title img{
  display:block;
  /* 最小～最大を気持ちよく：最小320px、最大50vw（ただし900pxを上限目安に） */
  width: clamp(320px, 50vw, 900px);
  height:auto;
    margin: auto;
}


/* 2カラム本体 */
.contents .grid{
  width: var(--company-wrap);
  margin: clamp(12px, 3vw, 28px) auto 0;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;  /* 右写真を少し細めに */
  align-items: start;
  gap: var(--gap);
}

/* 右写真：上へ被せる（h2の下に潜る） */
.contents .ph{
  position: relative;
  transform: translateY(calc(-0.7 * var(--overlap-y)));
  z-index: 1;                /* ← 見出しの下側（背面） */
  margin: 0;
}
.contents .ph img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 左テキスト */
.contents .copy{ max-width: 56ch; }
.contents .copy h3{
  margin: clamp(1.6rem, 1.8vw, 3rem) 0 clamp(.6rem, 1.2vw, 1rem);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: .02em;
  /* 画面幅で気持ちよく拡大 */
  font-size: clamp(26px, 3.8vw, 48px);
}
.contents .copy h3 span{ color: var(--company-blue); }

.contents .copy table {
	border-collapse: collapse;
	margin: 30px 0 0;
	width: 100%;
}

.contents .copy table tr td{
	padding: 10px;
	text-align: center;
	width: 50%;
	font-size: 24px;
	color: #00479d;
	font-weight: bold;
	line-height: 120%;
	border: solid 1px #00479d;
}


/* ===== Responsive ===== */
@media (max-width: 900px){
  .contents .grid{
    grid-template-columns: 1fr;
  }
  .contents .ph{
    transform: none;   /* 被り解除 */
    margin-top: clamp(10px, 2vw, 16px);
  }
  .contents .copy{ max-width: none; }
	.contents .copy table tr td{
		font-size: 18px;
	}
}




/* ===== LINE UP（見出し=画像、下の画像群はフルブリード） ===== */
.lineup{
  --bg:#444;
  --row-gap:10px;          /* 画像の上下余白（行間） */
  background:var(--bg);
  color:#fff;
  padding: clamp(40px,8vw,90px) 0;
}

/* 見出し（h2は画像）＋「取扱商品」テキスト */
.lineup__head{
  width: var(--company-wrap);
  margin: 0 auto;
}
.lineup__head h2{ margin:0; line-height:0; }
.lineup__head h2 img{
  display:block;
  width: clamp(260px, 30vw, 620px); /* ←ご指定どおり最大約30vw */
  height:auto;
}
.lineup__head p{
  margin: 10px 0;                       /* h2画像との縦余白を約10px */
  font-weight:800; letter-spacing:.12em;
  font-size: clamp(16px,1.8vw,22px);
}

/* ===== 画像グリッド（横は余白ゼロで画面端まで） ===== */
.lineup .grid4,
.lineup .grid5{
  /* フルブリード（横いっぱい） */
  width: 100svw;
  margin-left:  calc(50% - 50svw);
  margin-right: calc(50% - 50svw);
  overflow-x: clip; /* 横スクロール防止の保険 */

  display:grid;
  column-gap: 1px;             /* 左右の余白なし */
  row-gap: var(--row-gap);   /* 上下だけ10px */
  margin-top:40px;/* 見出しとの間も10px */
}
@supports (width: 100dvw){
  .lineup .grid4, .lineup .grid5{
    width: 100dvw;
    margin-left:  calc(50% - 50dvw);
    margin-right: calc(50% - 50dvw);
  }
}

.lineup .grid4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.lineup .grid5{ grid-template-columns: repeat(5, minmax(0,1fr)); }

/* タイル共通 */
.lineup .tile{
  position:relative;
  margin:0;                 /* figure の既定余白を消す */
  aspect-ratio: 4 / 3;      /* 高さそろえ（必要に応じ調整） */
  background:#0d0d0d;
  overflow:hidden;
}
.lineup .tile img{ width:100%; height:100%; object-fit:cover; display:block; }



/* レスポンシブ：列数のみ可変（横の余白は常にゼロ） */
@media (max-width: 1024px){
  .lineup .grid4{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .lineup .grid5{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 680px){
  .lineup .grid4, .lineup .grid5{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lineup .tile{ aspect-ratio: 1 / 1; } /* スマホは正方形に */
}
@media (max-width: 420px){
  .lineup .grid4, .lineup .grid5{ grid-template-columns: 1fr; }
}

/* ===== LINE UP：SPで黒帯が出ないよう“正方形固定”を解除 ===== */
@media (max-width: 680px){
  /* タイルの固定比/固定高/疑似要素をリセット */
  .lineup .tile{
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible;                 /* 念のため */
  }
  /* 正方形化に使っている before ハックがあれば無効化 */
  .lineup .tile::before,
  .lineup .tile a::before{ content: none !important; }

  /* 内側のリンクやラッパにも固定高があれば解除 */
  .lineup .tile a,
  .lineup .tile .ph{
    display: block;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* 画像は比率維持でそのまま表示（左右が切れない） */
  .lineup .tile img{
    display: block;
    width: 100%;
    height: auto !important;           /* ここが肝 */
    object-fit: initial !important;    /* cover/containの上書きを無効化 */
  }
}


@media (max-width: 680px){
  /* タイルの正方形固定を解除（高さは画像に合わせて可変） */
	.lineup .grid4,.lineup .grid5 {
		margin-top: 10px;
	}
  .lineup .tile{ aspect-ratio: auto; }

  /* 画像は幅100%・高さ自動。はみ出しを防ぐため cover→contain に */
  .lineup .tile img{
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

/* ========== SYSTEM（左：写真グリッド／右：見出し+本文） ========== */
.system{
  --bg:#f2f2f2;
  --gap: clamp(24px, 4.5vw, 80px);
  --photo-gap: clamp(0px, 0, 0px);
  padding: clamp(56px, 8vw, 100px) 0;
  background: var(--bg);
  color: var(--company-ink);
}

.system .wrap{
  width: var(--company-wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: clamp(320px, 36vw, 480px) 1fr; /* 左=写真列 */
  column-gap: var(--gap);
  align-items: start;
}

/* ================================
   SYSTEM — Photos（PC/SP共通）
   1枚目=全幅、2〜5枚目=半幅×2列
   余白0・角丸0
   ================================ */
.system .photos{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* 2列固定 */
  gap: 0 !important;                                           /* 隙間なし */
}
.system .photos > div{
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border-radius: 0;
  width: auto !important;
  height: auto !important;
  float: none !important;        /* 古いfloat指定があっても無効化 */
}
.system .photos > div img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;             /* タイルいっぱいに見せる */
  border-radius: 0;
}

/* 1枚目：2列ぶち抜き（全幅） */
.system .photos > div:nth-child(1){
  grid-column: 1 / -1 !important;
  aspect-ratio: 16 / 9;          /* 必要なら 3/2 などに変更可 */
}

/* 2〜5枚目：半幅2列 */
.system .photos > div:nth-child(n+2):nth-child(-n+5){
  aspect-ratio: 1 / 1;           /* 正方形。4/3 等もOK */
}

/* 6枚目以降は非表示（使う場合は削除） */
.system .photos > div:nth-child(n+6){
  display: none !important;
}

/* 念のためSPでもこのレイアウトを強制（他のSP用CSSを無効化） */
@media (max-width: 768px){
  .system .photos{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }
  .system .photos > div:nth-child(1){ grid-column: 1 / -1 !important; }
}


/* 右カラム：テキストをひとまとめ（1セル内で縦に並べる） */
.system .text{ grid-column: 2; }
.system .text h2{ margin:0; line-height:0; }
.system .text h2 img{ display:block; width: clamp(300px, 34vw, 620px); height:auto; }
.system .text .subtitle{
  margin: 10px 0 clamp(14px, 2vw, 24px);
  font-weight:800; letter-spacing:.1em; font-size: clamp(18px, 2.2vw, 26px);
}

/* SYSTEM：タイトル画像＆サブタイトルだけ右寄せ */
.system .text h2{
  display: flex;                 /* 子のimgを右端へ */
  justify-content: flex-end;
	max-width: 360px;
	text-align: right;
	margin: 0 0 0 auto;
}
.system .text .subtitle{
  text-align: right;             /* テキストを右揃え */
}


.system .text h3{
  margin: 0 0 .6em; font-size: clamp(24px, 3vw, 40px);
  font-weight:800; line-height:1.5; letter-spacing:.02em;
}
.system .text p{
  margin: 0 0 clamp(12px, 2vw, 20px);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 2;
}

/* SP：1カラムに */
@media (max-width: 840px){
  .system .wrap{ grid-template-columns: 1fr; row-gap: var(--gap); }
  .system .text{ grid-column: 1; }
  .system .photos{
    grid-template-columns: repeat(3, 1fr); /* きれいに均等配置へ切替 */
  }
  .system .photos > div:nth-child(n){ grid-column:auto; grid-row:auto; }
}



/* ================================
   REQUEST（左：h2画像＋サブ／右：1枚画像）
   ================================ */
.request{
  --bg: #444;                                /* 背景ダーク */
  --gap: clamp(24px, 5vw, 72px);             /* 左右カラム間 */
  padding: clamp(60px, 9vw, 120px) 0;
  background: rgba(0,0,0,1.0);
  color: #fff;
}

.request .wrap{
  width: var(--company-wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: clamp(240px, 28vw, 380px) 0.8fr; /* 左カラムの幅 */
  column-gap: var(--gap);
  align-items: center;                        /* 2カラムの縦位置 */
    justify-content: center;
}

/* 左の見出し（画像h2）＋サブタイトル */
.request .head h2{ margin: 0; line-height: 0; }
.request .head h2 img{
  display: block;
  width: clamp(220px, 26vw, 420px);           /* デザイン寄りの伸縮 */
  height: auto;
}
.request .head .subtitle{
  margin: clamp(8px, 1.2vw, 14px) 0 0;        /* h2画像との間隔 */
  font-weight: 800;
  letter-spacing: .12em;
  font-size: clamp(16px, 1.8vw, 22px);
}

/* 右のイラスト（1枚のSVG画像） */
.request .illust{
	margin: 0;
}
.request .illust div{ margin: 10px 0 0; }
.request .illust div img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ------- Responsive ------- */
@media (max-width: 900px){
  .request .wrap{
    grid-template-columns: 1fr;
    row-gap: clamp(16px, 4vw, 32px);
    align-items: start;
  }
  /* SPは中央寄せが見栄え良い場合 */
  .request .head h2{ display: flex; justify-content: center; }
  .request .head .subtitle{ text-align: center; }
}


/* =========================================
   Product — スマホ調整（mainの2枚重ね／LINE UPを2列）
   ========================================= */
@media (max-width: 768px){
  /* ── main：2枚を「左上・右下」で重ねる（各60vw） ── */
  .main .grid{
    width: 94vw;              /* 端に当たらない程度に中央寄せ */
    margin: 12px auto 0;
    display: block;           /* 既存のgridを解除して縦流しベースに */
  }
  .main .grid > div{
    width: 60vw;              /* ご指定の6割 */
  }
  .main .grid > div:first-child{
    margin: 0;                /* 左上（既定で左寄せ） */
  }
  .main .grid > div:last-child{
    margin: -18vw 0 0 auto;   /* 右下に配置＆約“縦半分”重なり */
  }
  .main .grid img{
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

/* ── LINE UP：スマホ最小幅でも必ず2列に ── */
@media (max-width: 680px){
  .lineup .grid4, .lineup .grid5{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lineup .tile{ aspect-ratio: 1 / 1; } /* 正方形で見栄えを揃える */
}
/* 既存の“420px以下は1列”を上書きして常に2列を維持 */
@media (max-width: 420px){
  .lineup .grid4, .lineup .grid5{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}