@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/**
 * カラー設定 - SOLOS風デザイン
 * ゴールド × ミニマル × エレガント
 */
:root {
    /* ブランドカラー */
    --color-gold: #D4AF37;
    --color-champagne: #F0E68C;
    --color-deep-brown: #3E2723;
    --color-warm-gray: #8D6E63;
    --color-warm-orange: #FF6B35;
    --color-light-bg: #FAF9F6;

    /* SWELLのカラー変数をオーバーライド */
    --swl-color-main: #D4AF37;
    --swl-color-sub: #8D6E63;
    --swl-color-text: #3E2723;
    --swl-color-bg: #FAF9F6;
}

/* SWELLのボタンカラーをカスタマイズ */
.swell-button,
.wp-block-button__link {
    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-champagne) 100%) !important;
    border-color: var(--color-gold) !important;
}

.swell-button:hover,
.wp-block-button__link:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* リンクカラー */
a {
    color: var(--color-gold);
}

a:hover {
    color: var(--color-deep-brown);
}

/* 見出しのカラー */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-deep-brown);
}

/* ヘッダーのカスタマイズ */
.l-header {
    background: var(--color-light-bg);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

/* ========================================
   カスタムフッター - 旅館風高級デザイン
   ======================================== */
.luxury-footer-section {
    position: relative;
    padding: 100px 20px 80px;
    overflow: hidden;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
}

.luxury-footer-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/wp-content/uploads/2025/12/_A__8339_opt.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.luxury-footer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg,
        rgba(20, 15, 10, 0.92) 0%,
        rgba(10, 8, 5, 0.95) 100%
    );
}

.luxury-footer-content {
    position: relative;
    z-index: 1;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

/* ブランドセクション */
.footer-brand {
    margin-bottom: 60px;
}

.footer-logo-img {
    max-width: 280px;
    height: auto;
    margin: 0 auto 20px;
    display: block;
}

@media (max-width: 768px) {
    .footer-logo-img {
        max-width: 200px;
    }
}

.footer-brand-jp {
    display: block;
    font-size: 0.85rem;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 15px;
}

.footer-brand-name {
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(4rem, 12vw, 7rem);
    font-weight: 400;
    color: #D4AF37;
    margin: 0;
    line-height: 1;
    text-shadow: 0 0 60px rgba(212, 175, 55, 0.3);
}

.footer-brand-en {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    letter-spacing: 0.4em;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 15px;
}

.footer-tagline {
    font-size: 0.95rem;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 25px;
    font-weight: 300;
}

/* 情報グリッド */
.footer-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 50px;
    padding: 50px 0;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.footer-info-item {
    text-align: center;
}

.footer-info-icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 50%;
    color: #D4AF37;
    font-size: 1.2rem;
}

.footer-info-item h3 {
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    color: #D4AF37;
    margin: 0 0 15px 0;
    font-weight: 400;
}

.footer-info-item p {
    font-size: 0.9rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.footer-station {
    margin-top: 10px !important;
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

.footer-phone {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: #D4AF37;
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

.footer-phone:hover {
    color: #fff;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

/* CTAボタン */
.footer-cta {
    margin-bottom: 50px;
}

.footer-reserve-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 18px 50px;
    background: transparent;
    border: 1px solid #D4AF37;
    color: #D4AF37;
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 0.15em;
    transition: all 0.4s ease;
}

.footer-reserve-btn:hover {
    background: #D4AF37;
    color: #1a1a1a;
}

.footer-reserve-btn i {
    transition: transform 0.3s ease;
}

.footer-reserve-btn:hover i {
    transform: translateX(5px);
}

/* ゴールドライン */
.footer-gold-line {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #D4AF37, transparent);
    margin: 0 auto;
}

/* カスタムフッターとの間の余白削除 */
.luxury-footer-section {
    margin-bottom: 0 !important;
}

/* SWELLデフォルト余白削除（フッター周り） */
#content.l-content {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#body_wrap {
    padding-bottom: 0 !important;
}

main {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.l-mainContent {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}


/* デフォルトSWELLフッター調整 */
.l-footer {
    background: #0a0a0a;
    padding: 30px 0;
    margin-top: 0 !important;
}

/* SWELLのフッター前の余白を削除 */
.l-footer__inner {
    padding-top: 0;
}

.l-footer__foot {
    margin-top: 0;
    padding-top: 0;
}

.l-footer__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px 25px;
    margin-bottom: 20px;
}

.l-footer__nav li a {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    text-decoration: none;
    letter-spacing: 0.05em;
}

.l-footer__nav li a:hover {
    color: #D4AF37;
}

.l-footer .copyright {
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.7rem;
}

/* レスポンシブ */
@media (max-width: 768px) {
    .luxury-footer-section {
        padding: 70px 20px 50px;
    }

    .footer-brand-name {
        font-size: 4rem;
    }

    .footer-info-grid {
        grid-template-columns: 1fr;
        gap: 35px;
        padding: 40px 0;
    }

    .footer-reserve-btn {
        padding: 15px 35px;
    }
}

/* ====================================
   320px幅対応 モバイルCSS
   ==================================== */

/* 基本設定 - 横スクロール防止 */
@media (max-width: 375px) {
    body {
        overflow-x: hidden;
    }

    .l-container,
    .l-article {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* ヘッダー調整 - かぶり防止 */
    .l-header {
        position: relative;
        z-index: 9999;
    }

    .l-header__inner {
        padding: 10px 15px;
    }

    /* メインコンテンツのtop padding調整 */
    .l-mainContent {
        padding-top: 0 !important;
    }

    /* 見出しのフォントサイズ調整 - 改行防止 */
    h1 {
        font-size: 1.75rem !important;
        line-height: 1.4 !important;
        word-break: keep-all;
        overflow-wrap: break-word;
    }

    h2 {
        font-size: 1.5rem !important;
        line-height: 1.4 !important;
        word-break: keep-all;
        overflow-wrap: break-word;
    }

    h3 {
        font-size: 1.25rem !important;
        line-height: 1.4 !important;
    }

    h4 {
        font-size: 1.1rem !important;
        line-height: 1.4 !important;
    }

    /* カバーブロックのタイトル調整 */
    .wp-block-cover h1 {
        font-size: 1.6rem !important;
        padding: 0 10px;
    }

    .wp-block-cover p {
        font-size: 0.9rem !important;
        padding: 0 10px;
    }

    /* 画像のはみ出し防止 */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    .wp-block-image img {
        width: 100% !important;
    }

    /* カラムレイアウト調整 */
    .wp-block-columns {
        flex-direction: column;
    }

    .wp-block-column {
        flex-basis: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ボタン調整 */
    .wp-block-button__link {
        font-size: 0.9rem !important;
        padding: 12px 20px !important;
    }

    /* Full Wideブロックのパディング調整 */
    .swell-block-fullWide.sp-py-80 {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .swell-block-fullWide.sp-py-60 {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    /* テーブルの横スクロール対応 */
    table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }

    /* リストの調整 */
    ul, ol {
        padding-left: 20px;
    }

    /* スペーサーの高さ調整 */
    .wp-block-spacer {
        height: 30px !important;
    }
}

/* 320px幅での特別な調整 */
@media (max-width: 320px) {
    .l-container,
    .l-article {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    h1 {
        font-size: 1.5rem !important;
    }

    h2 {
        font-size: 1.3rem !important;
    }

    h3 {
        font-size: 1.15rem !important;
    }

    .wp-block-cover h1 {
        font-size: 1.4rem !important;
    }

    /* ボタンのパディング縮小 */
    .wp-block-button__link {
        padding: 10px 15px !important;
        font-size: 0.85rem !important;
    }
}

/* ========================================
   モバイル固定ボトムメニュー - 非表示（ヘッダーメニュー使用）
   ======================================== */

#fix_bottom_menu {
    display: none !important;
}

/* ========================================
   全幅ブロックの修正
   ======================================== */

/* 理由カードなどの見切れ防止（特定要素のみ） */
.page-about-template .amaterasu-intro-section {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

.page-about-template .amaterasu-reasons-grid {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

.page-about-template .amaterasu-reason-card {
    overflow: hidden !important;
    max-width: 100% !important;
}

.page-about-template .sauna-vs-ganban {
    overflow-x: hidden !important;
}

/* About ページ全体のoverflow防止 */
.page-about-template {
    overflow-x: hidden !important;
}

/* 岩盤浴ページのコンテナを全幅に */
.page-template-page-templatespage-about-php #content.l-container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.page-template-page-templatespage-about-php .l-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* ========================================
   FAQページ セクション画像の高さ制限
   ======================================== */
figure.wp-block-image.section-image {
  margin: 1.5rem 0 !important;
  overflow: hidden;
  border-radius: 12px;
}

figure.wp-block-image.section-image img {
  height: 300px !important;
  width: 100% !important;
  object-fit: cover !important;
  border-radius: 12px;
}

@media (max-width: 768px) {
  figure.wp-block-image.section-image img {
    height: 200px !important;
  }
}

@media (max-width: 480px) {
  figure.wp-block-image.section-image img {
    height: 180px !important;
  }
}