/* --- 大浴場・岩盤浴共通レイアウト (spa-layout.css) --- */

.spa-section {
    padding: 80px 0;
    background-color: #fff;
}

/* 偶数番目のセクションに薄い背景色をつける場合 */
.spa-section:nth-of-type(even) {
    background-color: #fafafa;
}

.spa-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* タイトルエリア */
.spa-header {
    text-align: center;
    margin-bottom: 40px;
}

/* 性別バッジ（カプセル型） */
.spa-gender-badge {
    display: inline-block;
    padding: 4px 20px;
    font-size: 13px;
    font-weight: 700;
    color: #fff !important; /* 白文字固定 */
    border-radius: 50px; /* カプセル型 */
    margin-bottom: 15px;
    letter-spacing: 0.1em;
}

.spa-title-ja {
    display: block;
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 10px 0;
    letter-spacing: 0.1em;
    line-height: 1.2;
}

.spa-title-en {
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding-bottom: 5px;
    border-bottom: 1px solid;
}

/* 画像エリア */
.spa-visual {
    width: 100%;
    margin-bottom: 40px;
}

.spa-visual img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    object-fit: cover;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* 情報グリッド */
.spa-info-grid {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 40px;
}

.spa-info-item {
    flex: 1;
}

.info-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    border-left: 4px solid;
    padding-left: 15px;
    line-height: 1.4;
}

.info-text {
    font-size: 15px;
    line-height: 1.8;
    color: #333; /* 黒文字維持 */
}

.info-table {
    border-top: 1px solid #eee;
    margin: 0;
}

.info-row {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

.info-row dt {
    width: 100px;
    font-weight: 700;
    flex-shrink: 0;
}

.info-row dd {
    margin: 0;
    color: #333; /* 黒文字維持 */
    line-height: 1.6;
}

.info-note {
    font-size: 13px;
    color: #666;
    margin-top: 15px;
    line-height: 1.6;
    padding-left: 1em;
    text-indent: -1em;
}

.text-red {
    color: #d32f2f !important; /* 赤文字維持 */
}

/* --- 効能エリア：枠線アイコン＋テキスト並列形式 --- */
.spa-efficacy-box {
    margin: 30px 0 50px;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background-color: #fcfcfc;
    border-radius: 4px;
    border: 1px solid #eee;
}

.efficacy-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 85px;
    height: 52px;
    flex-shrink: 0;
    background-color: transparent; /* 背景透明 */
    border: 1px solid; /* 各セクションの色で枠線をつける */
    border-radius: 2px;
}

.efficacy-title-ja {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.efficacy-title-en {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
    margin: 0;
}

.efficacy-content {
    font-size: 15px;
    color: #444;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.02em;
}

/* 特徴エリア */
.spa-features {
    margin: 70px 0 0;
    text-align: center;
}

.features-main-title {
    margin-bottom: 50px;
    display: inline-block;
    position: relative;
}

.features-heading {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 10px 0;
    letter-spacing: 0.15em;
}

.features-subheading {
    font-size: 14px;
    letter-spacing: 0.2em;
    margin: 0;
}

.features-main-title::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    margin: 10px auto 0;
}

.features-grid {
    display: flex;
    justify-content: center;
    gap: 60px;
    max-width: 800px;
    margin: 0 auto;
}

.feature-item {
    flex: 0 1 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.feature-circle {
    width: 140px;
    height: 140px;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.feature-circle::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%;
}

.feature-circle span {
    position: relative;
    z-index: 1;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
}

.feature-text {
    font-size: 14px;
    line-height: 1.6;
    color: #333; /* 黒文字維持 */
    margin: 0;
    font-weight: 600;
}

/* ========================================================================== 
   個別カラー：皇貴 KOUKI (Blue)
   ========================================================================== */
.spa-kouki .spa-title-ja,
.spa-kouki .spa-title-en,
.spa-kouki .info-title,
.spa-kouki .info-row dt,
.spa-kouki .features-heading,
.spa-kouki .features-subheading,
.spa-kouki .efficacy-label,
.spa-kouki .efficacy-title-ja,
.spa-kouki .efficacy-title-en {
    color: #0054a6;
    border-color: #0054a6;
}

.spa-kouki .spa-gender-badge { background-color: #0054a6; } /* バッジ塗りつぶし */
.spa-kouki .spa-title-en { border-bottom-color: #0054a6; }
.spa-kouki .info-title { border-left-color: #0054a6; }
.spa-kouki .features-main-title::after { background-color: #0054a6; }
.spa-kouki .feature-circle { background-color: #0054a6; box-shadow: 0 8px 15px rgba(0,84,166,0.15); }

/* ========================================================================== 
   個別カラー：妃の癒 HINOYU (Deep Gold)
   ========================================================================== */
/* ここにマージンを追加してスライダーから下げます */
.spa-hinoyu {
    margin-top: 100px;
}

.spa-hinoyu .spa-title-ja,
.spa-hinoyu .spa-title-en,
.spa-hinoyu .info-title,
.spa-hinoyu .info-row dt,
.spa-hinoyu .features-heading,
.spa-hinoyu .features-subheading,
.spa-hinoyu .efficacy-label,
.spa-hinoyu .efficacy-title-ja,
.spa-hinoyu .efficacy-title-en {
    color: #94793d; /* 視認性を重視した深いゴールド */
    border-color: #94793d;
}

.spa-hinoyu .spa-gender-badge { background-color: #94793d; } /* バッジ塗りつぶし */
.spa-hinoyu .spa-title-en { border-bottom-color: #94793d; }
.spa-hinoyu .info-title { border-left-color: #94793d; }
.spa-hinoyu .features-main-title::after { background-color: #94793d; }
.spa-hinoyu .feature-circle { background-color: #94793d; box-shadow: 0 8px 15px rgba(148,121,61,0.25); }

/* ========================================================================== 
   日帰り入浴：dayuse-section (New Adjustment)
   ========================================================================== */
.dayuse-section {
    margin-top: 100px; /* PC版：上部との間隔を空ける */
    padding: 80px 0;
    background-color: #fff;
}

.dayuse-title-ja {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 10px;
}

.dayuse-title-en {
    text-align: center;
    font-size: 14px;
    letter-spacing: 0.2em;
    margin-bottom: 40px;
}

/* -------------------------------------------------------------------------- 
   レスポンシブ 
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .spa-section { padding: 50px 0; }
    
    /* スマホ時の各セクションのマージン調整 */
    .spa-hinoyu,
    .dayuse-section { 
        margin-top: 60px; 
    }

    .spa-title-ja { font-size: 26px; }
    .spa-info-grid { flex-direction: column; gap: 30px; }
    .spa-info-item { background-color: #f9f9f9; padding: 20px; border-radius: 8px; }

    /* SP：効能エリア */
    .spa-efficacy-box { flex-direction: column; align-items: flex-start; gap: 12px; padding: 15px; }
    .efficacy-label { width: 100%; height: 36px; flex-direction: row; gap: 8px; }
    .efficacy-title-en { font-size: 11px; }
    .efficacy-content { font-size: 14px; }

    .features-grid { gap: 10px; max-width: none; }
    .feature-item { flex: 1; }
    .feature-circle { width: 100px; height: 100px; margin-bottom: 12px; }
    .feature-circle span { font-size: 13px; line-height: 1.3; }
    .feature-text { font-size: 11px; font-weight: 700; line-height: 1.3; display: block; min-height: 2.6em; }
}

@media (max-width: 374px) {
    .features-grid { gap: 5px; }
    .feature-circle { width: 85px; height: 85px; }
    .feature-circle span { font-size: 11px; }
    .feature-text { font-size: 10px; }
}