@charset "utf-8";
/*
  KEEP STRAIGHT series 専用スタイル
  読み込み元: template/page-straight-creamshampoo.php のみ
  共通CSS（common.css / pc.css / sm.css）は一切変更しない方針のため、
  このページだけの差分をここに集約する。
*/

/* ============================================
   FV 背景（.smooth-back 相当のストレート版）
   ============================================ */
@media screen and (min-width: 769px) {
  .straight-back {
    background-image: url(../img/new/20260728/cocone_straight_fv_pc.webp?v=1);
    position: fixed;
    width: 100%;
    height: auto;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -999;
    aspect-ratio: 16/9;
  }
}

@media screen and (max-width: 768px) {
  .straight-back {
    background-image: url(../img/new/20260728/cocone_straight_fv_sp.webp?v=4);
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -999;
    top: 0px;
    bottom: 0px;
  }
}

/* ============================================
   見出し（items 01 / 02 のリード文）の字間
   pc.css の .line-up-title-4（letter-spacing: 2.5px）を
   このページだけ 1.3px に上書きする
   ============================================ */
@media screen and (min-width: 769px) {
  .straight-page .line-up-title-4 {
    letter-spacing: 1.3px;
  }
}

/* ============================================
   items ブロック 左カラムの幅
   pc.css の .haircare-lineup-left（width: 352px）を
   このページだけ 456px に広げる
   ※ 同クラスは grayshampoo / repair / smooth / haircare 等と共用のため
     必ず .straight-page でスコープする
   ============================================ */
@media screen and (min-width: 769px) {
  .straight-page .haircare-lineup-left {
    width: 456px;
  }
}

/* ============================================
   items 01 の動画（mov1.mp4）を一旦非表示
   .haircare-lineup-right-2 は grayshampoo / repair / smooth と共用のため
   必ず .straight-page でスコープする。戻すときはこのブロックを削除するだけ。
   ============================================ */
.straight-page .haircare-lineup-right-2 {
  display: none;
}

/* ============================================
   SP: items 01 ブロックの背景（緑）を文字の下まで伸ばす
   sm.css の .hair-movie-shirowaku は
     padding-bottom: 0% / margin-bottom: -60%
   で「動画が次の白セクションにはみ出して重なる」前提のレイアウト。
   このページは動画を非表示にしているため、負のマージンぶんだけ
   後続の白セクションが緑の背景を上書きしてしまう。
   動画がない前提に合わせて負のマージンを打ち消し、
   下側の余白を持たせる。合わせて動画のはみ出し用に空けていた
   次セクションの上余白（padding-top: 70%）も詰める。
   動画を戻すときはこのブロックを削除する。
   ============================================ */
@media screen and (max-width: 768px) {
  .straight-page .hair-movie-shirowaku {
    margin-bottom: 0 !important;
    padding-bottom: 12% !important;
  }

  .straight-page .hair-movie-shirowaku-1 {
    padding-top: 15%;
  }

  /* items 02（hair serum）の上に余白を足す
     sm.css の .haircare-lineup-3（padding: 0px !important）を
     このページの SP だけ上書きする。margin-top: -15% はそのまま。 */
  .straight-page .haircare-lineup-3 {
    padding: 50px 0px 0px 0px !important;
  }
}

/* ============================================
   背景色（ピンク系 → ハーバルグリーン系）
   薄い色: #D1DDBB / 濃い色: #A0AC73（ボタン）
   .straight-page で本ページのみにスコープする
   ============================================ */
.straight-page .bg-pink {
  background-color: #D1DDBB !important;
}

.straight-page .osusume-waku {
  background-color: #D1DDBB !important;
}

/* ============================================
   FV の coming soon オーバーレイ（発売前のみ出力）
   管理画面「KEEP STRAIGHT 発売切替」で表示/非表示が切り替わる
   ============================================ */
.straight-page .straight-fv-soon {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(45, 52, 28, 0.34);
}

.straight-page .straight-fv-soon-text {
  color: #ffffff;
  font-size: 64px;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-align: center;
  line-height: 1.2;
  margin: 0;
}

@media screen and (max-width: 768px) {
  .straight-page .straight-fv-soon-text {
    font-size: 30px;
  }
}

/* ============================================
   購入ボタン
   pc.css の .onlin-button（#831515 の赤）を、このページだけ
   ハーバルグリーンの濃い色に統一する。
   coming soon（発売前）と ONLINE STORE（発売中）で同じ色。
   ============================================ */
.straight-page .onlin-button {
  background-color: #A0AC73;
}

/* 発売前の coming soon はクリックさせない */
.straight-page .onlin-button-soon {
  pointer-events: none;
  cursor: default;
}

/* ============================================
   usability 02 の注釈（※レブリン酸）
   本文の「酸熱ケア成分」の頭に上付きの ※ を付け、
   段落の下に 10px の注釈行を出す。
   ============================================ */
.straight-page .straight-kome-sup {
  font-size: 10px;
  vertical-align: super;
  line-height: 1;
}

.straight-page .straight-kome-note {
  font-size: 10px;
  line-height: 1.6;
  margin-top: 10px;
}