/* ============================================
   共通設定
   デザイン基準幅:1080px(イラレのアートボード幅)
   px指定は clamp(0px, px÷1080×100vw, px) に変換して使用する
============================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  background-color: #ffffff;
}

/* position:fixedの要素(下部バー・モーダル)を正しく画面に固定するため、
   overflow-x:hiddenはbodyではなく、通常コンテンツを包むこちらに設定する */
.page-wrapper {
  width: 100%;
  overflow-x: hidden;
}

/* 画像は幅のみ指定し、高さは本来の比率のまま自動で決まる */
img {
  display: block;
  height: auto;
}

.lp-section {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
}

/* ============================================
   共通スペース(空白専用の要素)
============================================ */
.space-10 {
  width: 100%;
  height: clamp(0px, 0.93vw, 10px);
}

.space-20 {
  width: 100%;
  height: clamp(0px, 1.85vw, 20px);
}

.space-70 {
  width: 100%;
  height: clamp(0px, 6.48vw, 70px);
}

.space-200 {
  width: 100%;
  height: clamp(0px, 18.52vw, 200px);
}

/* ============================================
   画像の幅指定(プレースホルダー・本番画像 共通で使用)
   高さは指定しない(imgタグ側の height:auto に任せる)
============================================ */
.img-box {
  width: 90%;
  margin: 0 auto;
}

.img-box--full {
  width: 100%;
}

/* 会社ロゴ(DO-S_016・017用・中央寄せ) */
.logo-image {
  width: 30%;
  margin: 0 auto;
}

/* 会社ロゴ(DO-S_011専用・016/017とは別サイズで管理) */
.logo-image-main {
  width: 13%;
  margin: 0 auto;
}

/* ============================================
   画面幅いっぱいの領域内で使う画像サイズ指定
   (lp-sectionの1080px制限を受けない、実際の画面幅に対する割合)
============================================ */
.w-full {
  width: 100%;
  display: block;
}

.w-95 {
  width: 95%;
  margin: 0 auto;
  display: block;
}

.w-80 {
  width: 80%;
  margin: 0 auto;
  display: block;
}

/* ============================================
   画像の上に、サイズ・位置を自由に調整できる
   クリック範囲(透明)を重ねるための仕組み
============================================ */
.click-zone-wrap {
  position: relative;
}

.click-zone {
  position: absolute;
  display: block;
  /* 下記のtop/left/width/heightで範囲を調整してください(単位は%推奨) */
  top: 81%;
  left: 5%;
  width: 90%;
  height: 15%;
}

.click-zone2 {
  position: absolute;
  display: block;
  /* 下記のtop/left/width/heightで範囲を調整してください(単位は%推奨) */
  top: 48%;
  left: 5%;
  width: 90%;
  height: 45%;
}

/* 画面の一番下に常に固定表示(ボタン機能は後で追加) */
.fixed-bottom-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 1000;
}

/* 下部固定バー:3分割のクリックゾーン */
.bottom-bar-zone {
  position: absolute;
  top: 0;
  height: 100%;
  width: 33.333%;
}

.bottom-bar-zone--left {
  left: 0;
}

.bottom-bar-zone--center {
  left: 33.333%;
}

.bottom-bar-zone--right {
  right: 0;
}

/* パソコン(目安として1024px以上)ではDO-S_025(下部固定バー)を非表示にする */
@media (min-width: 1024px) {
  .fixed-bottom-bar {
    display: none;
  }
}

/* ============================================
   モーダル(購入先を選択)
============================================ */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 3000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.modal-overlay.is-open {
  display: flex;
}

.modal-window {
  width: 80%;
  max-width: 700px;
  background-color: #ffffff;
  border-radius: clamp(0px, 3.70vw, 40px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  padding: clamp(0px, 6.48vw, 70px);
}

.modal-close {
  cursor: pointer;
}

/* ============================================
   テキストルール(左詰め)
============================================ */
.text-start {
  font-weight: 700;
  text-align: left;
  font-size: clamp(0px, 5.56vw, 60px);
  line-height: 1.6;
  letter-spacing: 0.12em;
  width: 90%;
  margin: 0 auto;
}

/* ============================================
   アコーディオン内専用の本文テキスト
   .descriptionと文字の見た目は同じだが、.text-start同様
   width:90%+auto中央寄せをやめ、親(.accordion-item)の
   幅をそのまま使うことでバーの左端と揃える。
   ※10番目の「美容師だから〜」ブロックの本文、および
   DO-S開発者プロフィール部分(.detail使用)は対象外。
============================================ */
.accordion-description {
  font-weight: 600;
  text-align: left;
  font-size: clamp(0px, 3.89vw, 42px);
  line-height: 1.6;
  width: 100%;
  margin: 0;
}

/* ============================================
   アコーディオン内専用テキスト
   .text-startと文字の見た目(サイズ・太さ・行間・字間)は同じだが、
   位置決めの仕組みだけを変更している。
   .text-startは「90%幅+中央寄せ」を前提にしたクラスのため、
   すでに90%幅になっている.accordion-item内でそのまま使うと、
   90%のさらに90%が中央寄せされてしまい、バーの左端とズレる。
   このクラスは親(.accordion-item)の幅をそのまま使うことで、
   アコーディオンのバー(色のついた部分)の左端とテキストの
   左端を揃える。
   ※10番目の「美容師だから〜」ブロック(画像と並ぶ特殊レイアウト)は
   対象外。従来どおり.text-startのまま。
============================================ */
.accordion-text {
  font-weight: 700;
  text-align: left;
  font-size: clamp(0px, 5.56vw, 60px);
  line-height: 1.6;
  letter-spacing: 0.12em;
  width: 100%;
  margin: 0;
}

.title {
  font-weight: 700;
  text-align: left;
  font-size: clamp(0px, 9.26vw, 100px);
  line-height: 1.4;
  width: 90%;
  margin: 0 auto;
}

.description {
  font-weight: 600;
  text-align: left;
  font-size: clamp(0px, 3.89vw, 42px);
  line-height: 1.6;
  width: 90%;
  margin: 0 auto;
}

/* ============================================
   詳細テキスト(アイコン付き・左詰め・Regular 400)
   アイコンとテキストの間隔・行間は共通20px相当で統一
============================================ */
.detail-list {
  width: 90%;
  margin: 0 auto;
}

.detail-row {
  display: flex;
  align-items: center;
  gap: clamp(0px, 0.93vw, 10px);
  width: 100%;
  margin: 0;
  font-size: clamp(0px, 3.89vw, 42px);
}

.detail-list .detail-row + .detail-row {
  margin-top: clamp(0px, 0.93vw, 10px);
}

/* 本番用アイコン画像:切り抜かず、そのまま使用。幅のみ指定 */
.detail-icon-img {margin-left: 23px;
  flex-shrink: 0;
  width: 1.4em;
}

.detail {
  font-weight: 400;
  text-align: left;
  font-size: clamp(0px, 3.85vw, 42px);
  line-height: 1.7;
  width: 90%;
  margin: 0 auto;
}

/* detail-row内(アイコン付き)で使う場合は、行内の余白計算を優先するため上書き */
.detail-row .detail {
  width: auto;
  margin: 0;
}

/* ============================================
   商品説明(DO-S_002.webpの下に追加)
   Regular 400・中央揃え
============================================ */
.product-info {
  font-weight: 400;
  text-align: center;
  font-size: clamp(0px, 4.63vw, 50px);
  line-height: 1.6;
  width: 90%;
  margin: 0 auto;
}

.product-info-sub {
  font-size: clamp(0px, 3.24vw, 35px); /* ¥7,920(70px)の半分 */
}

.product-info-price {
  font-size: clamp(0px, 6.48vw, 70px);
  font-weight: 500;
}

.product-info-tax {
  font-size: clamp(0px, 3.24vw, 35px); /* ¥7,920(70px)の半分 */
}

/* ============================================
   space-100(セクション内の大きめの区切り)
============================================ */
.space-100 {
  width: 100%;
  height: clamp(0px, 9.26vw, 100px);
}

/* ============================================
   space-40
============================================ */
.space-40 {
  width: 100%;
  height: clamp(0px, 3.70vw, 40px);
}

/* ============================================
   アコーディオン内:テキストの右側に、その高さに
   合わせて画像を並べるレイアウト(幅ではなく高さを合わせる特殊パターン)
============================================ */
.accordion-side-flex {
  display: flex;
  align-items: stretch;
  gap: clamp(0px, 1.85vw, 20px);
  width: 100%;
}

.accordion-side-flex .text-start {
  width: auto;
  margin: 0;
  flex: 1;
}

.accordion-side-image {width: 48%;   
  flex-shrink: 0;
  width: auto;
}

/* ============================================
   角丸のベタ(単色背景ブロック)
   色・角丸の数値は仮。決まり次第差し替え可能
   画像プレースホルダーとは見た目を変えて区別している
============================================ */
.solid-block {
  width: 90%;
  margin: 0 auto;
  border-radius: clamp(0px, 3.70vw, 40px); /* 仮の角丸(40px相当) */
  padding: clamp(0px, 6.48vw, 70px); /* 内側の余白も仮 */
  /* 背景色は使う場所ごとに style="background-color:#xxxxxx" で個別指定 */
}

.solid-block .title,
.solid-block .description,
.solid-block .announce,
.solid-block .detail {
  width: 100%;
}

.solid-block .img-box {
  width: 100%;
}

.solid-block .detail-list {
  width: 100%;
  margin: 0;
}

/* 折り返しを防ぐため、文字間を詰め、文字サイズも少しだけ縮小 */
.title--tight {
  letter-spacing: -0.02em;
  font-size: clamp(0px, 8.15vw, 88px) !important;
}

/* 中央揃えユーティリティ */
.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

/* お客様アイコン(幅22%・中央) */
.customer-icon {
  width: 22%;
  margin: 0 auto;
}

/* アナウンス文言(中央揃え・50px・説明と同じウェイト600) */
.announce {
  font-weight: 600;
  text-align: center;
  font-size: clamp(0px, 4.4vw, 50px);
  line-height: 1.6;
  width: 90%;
  margin: 0 auto;
}

/* ============================================
   space-50
============================================ */
.space-50 {
  width: 100%;
  height: clamp(0px, 4.63vw, 50px);
}

/* ============================================
   全幅ベタ(角丸なし・画面いっぱいに色を敷く)
   角丸のベタ(.solid-block)とは別物として区別
============================================ */
.section-flat-bg {
  width: 100%;
}

/* ============================================
   テキスト_案内(text-startと同じサイズ・ウェイト、色のみ変更)
============================================ */
.text-guide {
  font-weight: 600;
  text-align: left;
  font-size: clamp(0px, 5.56vw, 60px);
  line-height: 1.6;
  letter-spacing: 0.12em;
  width: 90%;
  margin: 0 auto;
  color: #005599;
}

/* ============================================
   アコーディオン
   見出し部分:#0073bdの四角いベタ(角丸なし)
   右端の「v」はクリックで180°回転して開閉を示す
============================================ */
.accordion-item {
  width: 90%;
  margin: 0 auto;
}

.accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #0073bd;
  border: none;
  border-radius: 0;
  cursor: pointer;
  padding: clamp(0px, 1.85vw, 20px); /* 内側の余白は仮の数値 */
  font-family: inherit;
  gap: clamp(0px, 1.85vw, 20px); /* 3つの要素の間隔 */
}

.accordion-icon-spacer {
  width: clamp(0px, 3.89vw, 42px); /* accordion-icon-imgと同じ幅 */
  flex-shrink: 0;
}

.accordion-title {
  color: #ffffff;
  font-weight: 600;
  text-align: center;
  font-size: clamp(0px, 3.5vw, 32px);
  line-height: 1.3;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.accordion-icon {
  color: #ffffff;
  font-size: clamp(0px, 3.89vw, 42px);
  font-weight: 600;
  display: inline-block;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.accordion-icon-img {
  width: clamp(0px, 3.89vw, 42px);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.accordion-header.is-active .accordion-icon-img {
  transform: rotate(180deg);
}

.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.accordion-panel.is-open {
  max-height: 2000px;
}