@charset "UTF-8";
@font-face {
  font-family: "sm";
  src: url("./ShipporiMinchoB1-Regular.woff2") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "sm";
  src: url("./ShipporiMinchoB1-Medium.woff2") format("woff");
  font-weight: 500;
  font-display: swap;
}
section {
  position: relative;
  z-index: 5;
}
section .inner {
  margin: auto;
  padding: 0 10rem;
  width: 100%;
  max-width: 144rem;
}

/*--------------------------------------------------------------
mv
--------------------------------------------------------------*/
header.on .logo img {
  filter: invert(1000%);
}

/*--------------------------------------------------------------
mv
--------------------------------------------------------------*/
#mv {
  margin-bottom: 43rem;
}
#mv .mvph {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 67rem;
  overflow: hidden; /* 画像のはみ出しをマスク */
}
#mv .mvph img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center 75%;
     object-position: center 75%;
}
#mv .upper {
  background: #fff;
  position: relative;
  z-index: 2;
  padding: 0 8rem 4rem;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  height: 24rem;
}
#mv .upper hgroup {
  display: flex;
  gap: 7rem;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
}
#mv .upper hgroup h1 {
  font-size: 4rem;
}

/*--------------------------------------------------------------
lead
--------------------------------------------------------------*/
#lead {
  padding-top: 15rem;
  padding-bottom: 5rem;
  background: #fff;
}
#lead h2 {
  font-size: 2.8rem;
  margin-bottom: 5rem;
  letter-spacing: 0.15em;
}
#lead .body {
  display: flex;
  gap: 6rem;
}
#lead .body .txt p {
  white-space: nowrap;
}
#lead .body .txt p + p {
  margin-top: 1.5em;
}

/*--------------------------------------------------------------

--------------------------------------------------------------*/
#product {
  z-index: 10;
  padding: 1rem 0 15rem;
  overflow: clip;
  background: #fff;
}
#product .products {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 10rem 5%;
  padding-right: 1rem;
  max-width: 1420px;
  margin: 10rem auto 0;
}
#product .products .product {
  width: 30%;
}
#product .products .product a {
  width: 38rem;
  height: 100%;
  display: flex;
  gap: 2rem;
  background: rgba(255, 255, 255, 0);
  transition: background 0.2s ease-in-out;
  border-radius: 1.2rem;
  padding: 3rem 5rem 3rem 3rem;
}
#product .products .product a .left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 26rem;
}
#product .products .product a .left .scene {
  width: 16rem;
  height: auto;
  aspect-ratio: 1/1;
  margin: 0;
  position: relative;
  overflow: hidden;
  transition: width 0.3s;
}
#product .products .product a .left .scene img {
  width: 100%;
  height: 200%;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}
#product .products .product a .left .name {
  margin: 1rem auto 1.5rem;
}
#product .products .product a .left .name img {
  height: 2.5rem;
}
#product .products .product a .left p {
  margin: 0;
  font-size: 1.6rem;
  text-align: center;
  line-height: 1.8;
  letter-spacing: 0.1em;
  min-height: 3.5em;
}
#product .products .product a .item {
  width: 10rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
#product .products .product a .item img {
  width: auto;
  height: 40rem;
}
#product .products .product a .item img.iroshizuku {
  width: 150%;
  max-width: unset;
  height: auto;
}
#product .products .product a:hover {
  background: #fff;
}
/*--------------------------------------------------------------

--------------------------------------------------------------*/
/* ============================================================
   lineup-responsive.scss（新規追加ファイル）
   ラインアップ一覧ページ（lineup/index.html）専用のスマートフォン対応。
   lineup.css は変更せず、後から読み込んで上書きします。
   ============================================================ */
/* PC・スマホ共通の不具合修正：
   style.scss側の .noise クラスは、用紙の質感を出すための ::before
   （position:absolute; z-index:1;）を重ねる仕組みになっているが、
   本来その上に子要素を表示するための「.noise > * { position:relative;
   z-index:2; }」がコメントアウトされたまま残っている。
   そのため .noise が付いた要素の直下の子（position指定なし＝static）は
   position:static のままとなり、position:absoluteでz-index指定のある
   ::beforeの方が手前に描画されてしまい、#product内の各製品リンクが
   クリックできなくなっていた（#leadも同じ構造のため合わせて対応）。
   lineup.scss側は変更せず、ここで子要素を position:relative; z-index:2;
   にして手前に出すことで解決している。 */
#lead > .inner,
#product > .inner {
  position: relative;
  z-index: 2;
}

/* lineup.scss側の「.products { justify-content: space-between; }」は、
   3個ぴったりで割り切れる行数であれば問題ないが、製品の増減などで
   最終行の製品数が3の倍数に満たない場合（例：最後の行が2製品だけ
   になる場合）、space-betweenは1番目の製品を左端、2番目を右端
   （＝本来3番目が入る位置）まで押し出してしまい、間に大きな空白が
   できてしまう。
   flex-start にしておくと、製品はすべて左（1列目）から順に詰めて
   並ぶようになり、最終行が2製品の場合は1・2列目（＝中央の列）に
   収まるため、RAIZ等が意図せず右端に飛ばされることがなくなる。
   行がぴったり3の倍数のときは余白がそもそも無いため、
   space-between/flex-startのどちらでも見た目は変わらず、
   既存の3列レイアウトに影響はない。 */
#product .products {
  justify-content: flex-start;
}

@media (max-width: 767px) {
  section .inner {
    padding: 0 2rem;
  }
  #mv {
    /* PC版は .mvph が position:fixed でビジュアルを画面に固定し、#mv の
       margin-bottom で疑似的な高さを作る「スクロール演出」構成のため、
       このままではスマホ時に写真がヘッダーの裏に固定表示され続け、
       タイトル(.upper)がヘッダーのロゴ等と重なって見えてしまう。
       スマホでは fixed をやめて通常のフローに戻し、
       ヘッダー→タイトル→画像 の順で並ぶよう flex + order で並び替えている。 */
    margin-bottom: 0;
    /* #header は position:fixed でフローから外れているため、
       タイトルを先頭にするとヘッダーの裏に隠れてしまう分の余白を確保 */
    padding-top: 8rem;
    position: relative;
    display: flex;
    flex-direction: column;
  }
  #mv .mvph {
    order: 2;
    position: relative;
    top: auto;
    left: auto;
    /* 縦長にならないよう、横長の比率に変更 */
    height: auto;
    aspect-ratio: 16/9;
  }
  #mv .upper {
    order: 1;
    height: auto;
    padding: 2.4rem 2rem 3rem;
  }
  #mv .upper hgroup {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }
  #mv .upper hgroup h1 {
    font-size: 2.6rem;
  }
  #lead {
    padding-top: 4rem;
    padding-bottom: 2rem;
  }
  #lead h2 {
    font-size: 2rem;
    margin-bottom: 2.4rem;
  }
  #lead .body {
    flex-direction: column;
    gap: 0;
  }
  #lead .body .txt p {
    white-space: normal;
    font-size: 1.5rem;
    line-height: 1.9;
  }
  #product {
    padding: 4rem 0 6rem;
  }
  #product .products {
    display: block;
    margin-top: 3rem;
  }
  #product .products .product {
    width: 100%;
  }
  #product .products .product + .product {
    margin-top: 3rem;
  }
  #product .products .product a {
    width: 100%;
    height: auto;
    /* 縦積み(写真+名前+説明 → 大きな製品画像)だったのを、
       画像参照どおり左（写真・名前・説明）/右（製品画像）の
       横並びレイアウトに変更。
       一度小さめのサイズで組んだところバランスが悪かったため、
       左右ブロックとも参照画像に近い大きさへ拡大している。 */
    flex-direction: row;
    align-items: center;
    gap: 1.2rem;
    padding: 1rem 0;
  }
  #product .products .product a .left {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }
  #product .products .product a .left .scene {
    width: 75%;
    max-width: 12rem;
  }
  #product .products .product a .left .name {
    font-size: 2.2rem;
    margin: 1.6rem auto 0.8rem;
  }
  #product .products .product a .left p {
    margin: 0;
    font-size: 1.4rem;
    text-align: center;
    line-height: 1.7;
    min-height: 0;
  }
  #product .products .product a .item {
    width: auto;
    flex: 0 0 36%;
    margin-top: 0;
  }
  #product .products .product a .item img {
    width: 100%;
    height: 30rem;
    -o-object-fit: contain;
       object-fit: contain;
  }
  #product .products .product a .item img.iroshizuku {
    height: 16rem;
  }
}
/*# sourceMappingURL=lineup.css.map */