@charset "utf-8";
/* ============================================================
   セクション（写真を敷く帯）の見た目
   株式会社RELI.STYLE ／ 2026-10-13 自社で書き起こし
   6サイト共通（旧 plugin/section/section.css の置き換え）

   本文HTMLの `<section class="qhm-section" data-...>` を組み立てる部分。
   **見え方は `data-` 属性で切り替わります。** CSS側はその受け皿です。

     data-background-image    … 背景に写真を敷く（JSが url() を入れる）
     data-background-type     … repeat なら敷き詰め、既定は全面に拡大
     data-background-attachment … fixed なら、スクロールしても写真が動かない
     data-height=page         … 画面の高さいっぱいにする
     data-horizontal-align    … left / center / right
     data-vertical-align      … top / middle / bottom
     data-filter              … blur / dark / light（写真の上に効果をかける）
     data-video               … 背景に動画を流す
     qhm-section-primary 等   … 背景を単色にする（Bootstrapの5色に合わせる）

   ■ 縦横の位置そろえは「表組み」で作っています
     `display:table` ＋ 子を `display:table-cell` にして、
     `vertical-align` で上下の位置を決める、という古い手です。
     flexbox に置き換えたくなりますが、**余白の出方が変わるので触っていません。**
     6サイトが同じCSSを使うため、1サイトの都合で作りを変えないこと。

   ■ 1行も削っていません
     当サイト（ヘッドスパ）では動画・フィルタ・色違いは使っていませんが、
     他サイトが使っている可能性があるため、全ルールを残しています。
   ============================================================ */

/* --- 1. 背景の写真 ----------------------------------------- */
/* url() はJSが入れる。ここでは「どう敷くか」だけを決める。 */
.qhm-section[data-background-image] {
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;      /* 古いSafari向け。消すと一部端末で効かない */
  background-size: cover;
}

/* 敷き詰め指定のときは、拡大せず左上から繰り返す */
.qhm-section[data-background-image][data-background-type="repeat"] {
  background-repeat: repeat;
  background-position: 0 0;
  -webkit-background-size: auto;
  background-size: auto;
}

/* スクロールしても写真が動かない（視差効果） */
.qhm-section[data-background-attachment="fixed"] > div { background-attachment: fixed; }

/* --- 2. 大きさと位置そろえ --------------------------------- */
/* 高さを画面いっぱいにする */
.qhm-section[data-height="page"]       { display: table; width: 100%; height: 100%; }
.qhm-section[data-height="page"] > div { display: table-cell; }

/* 左右のそろえ。属性があるだけで表組みに切り替える */
.qhm-section[data-horizontal-align]       { display: table; width: 100%; height: 100%; }
.qhm-section[data-horizontal-align] > div { display: table-cell; }

.qhm-section[data-horizontal-align="left"]   > div { text-align: left; }
.qhm-section[data-horizontal-align="center"] > div { text-align: center; }
.qhm-section[data-horizontal-align="right"]  > div { text-align: right; }

/* 上下のそろえ。考え方は左右と同じ */
.qhm-section[data-vertical-align]       { display: table; width: 100%; height: 100%; }
.qhm-section[data-vertical-align] > div { display: table-cell; }

.qhm-section[data-vertical-align="top"]    > div { vertical-align: top; }
.qhm-section[data-vertical-align="middle"] > div { vertical-align: middle; height: 100%; }
.qhm-section[data-vertical-align="bottom"] > div { vertical-align: bottom; }

/* --- 3. 背景に流す動画 ------------------------------------- */
/* 動画は帯の裏側（z-index をうんと下げる）に置き、はみ出しは切る。 */
.qhm-section[data-video] {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: transparent;
}

.qhm-section .background-video {
  position: absolute;
  top: 0;
  z-index: -1000;
  width: 100%;
  height: auto;
  overflow: hidden;
  background-position: center right !important;   /* 帯側の指定より強くする */
  -webkit-background-size: cover;
  background-size: cover;
}

/* 動画そのもの。縦横どちらかが足りなくならないよう、最小値で押し広げる */
.qhm-section .background-video .qhm-section-video {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1000;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  overflow: hidden;
}

/* --- 4. 写真の上にかける効果（フィルタ） ------------------- */
/* 置き場所だけ確保する入れ物。見えない。 */
.qhm-section-filter { position: absolute; width: 0; height: 0; }

/* 4-1. ぼかし。背景を子要素に継がせ、その擬似要素だけをぼかす。
        帯そのものをぼかすと、中の文字までぼやけるため。 */
.qhm-section[data-filter="blur"] { position: relative; }

.qhm-section[data-filter="blur"] > div {
  position: relative;
  z-index: 3;
  box-sizing: border-box;
  border: 10px solid rgba(255, 255, 255, .15);
  box-shadow: 1px 1px 4px rgba(0, 0, 0, .15);
  background: inherit;
  background-origin: border-box;
}

.qhm-section[data-filter="blur"] > div:before {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: inherit;
  -webkit-filter: blur(6px);
  -moz-filter: blur(6px);
  -ms-filter: blur(6px);
  -o-filter: blur(6px);
  filter: progid:DXImageTransform.Microsoft.Blur(pixelradius='6');  /* 旧IE向け */
}

/* 4-2. 暗くする／明るくする。帯の上に一枚かぶせる作り。
        かぶせる膜は `.dark-overlay-wrapper` の中。色と濃さはJS側が決める。 */
.qhm-section[data-filter="dark"],
.qhm-section[data-filter="light"] { position: relative; z-index: 1; }

.qhm-section[data-filter="dark"]  .dark-overlay-wrapper,
.qhm-section[data-filter="light"] .dark-overlay-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -900;
}

.qhm-section[data-filter="dark"]  .dark-overlay-wrapper .dark-overlay,
.qhm-section[data-filter="light"] .dark-overlay-wrapper .dark-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* 動画のときは、膜を動画の上に直接かぶせる */
.qhm-section[data-filter="dark"] .background-video .background-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000;
  opacity: .4;
}

/* --- 5. 背景を単色にする ----------------------------------- */
/* Bootstrap の5色に合わせる。文字は白に固定。 */
.qhm-section.qhm-section-primary { background-color: #428bca; color: #fff; }
.qhm-section.qhm-section-success { background-color: #5cb85c; color: #fff; }
.qhm-section.qhm-section-info    { background-color: #5bc0de; color: #fff; }
.qhm-section.qhm-section-warning { background-color: #f0ad4e; color: #fff; }
.qhm-section.qhm-section-danger  { background-color: #d9534f; color: #fff; }

/* 見出しは、親の color を継がないことがあるので明示する */
.qhm-section.qhm-section-primary h1,
.qhm-section.qhm-section-success h1,
.qhm-section.qhm-section-info    h1,
.qhm-section.qhm-section-warning h1,
.qhm-section.qhm-section-danger  h1 { color: #fff; }