/* ========================================================================= */
/* --- 1. 基本設定（Root Variables, Reset, Typography）--- */
/* ========================================================================= */
html {
  scroll-behavior: smooth;
}
:root {
    --main-color: #0077b6; /* 主要な青色 (Blue) */
    --accent-color: #00b4d8; /* アクセントのシアン色 (Cyan) */
    --text-color: #333333;
    --light-bg: #f4f7f9; /* 明るい背景色 */
    --card-background: #ffffff;
    --shadow-light: 0 4px 12px rgba(255, 255, 255, 0.08);
    --phone-color: #e63946; /* 電話の赤色 */
    --line-color: #00c300; /* LINEの緑色 */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--text-color);
    background-color: var(--light-bg);
    line-height: 1.6;
    scroll-behavior: smooth; 
}

a {
    text-decoration: none;
    color: var(--main-color);
    transition: color 0.2s;
}

a:hover {
    color: var(--accent-color);
}

img {
    max-width: 100%;
    height: auto;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.content-section {
    padding: 60px 0;
    scroll-margin-top: 120px; 
}

.content-section h2 {
    font-size: 2.2rem;
    font-weight: 300;
    text-align: center;
    color: var(--main-color);
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 10px;
}

.content-section h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--accent-color);
    margin: 0 auto;
    border-radius: 2px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.content-section p {
    margin-bottom: 15px;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}


/* ========================================================================= */
/* --- 2. ヘッダー (Header) --- */
/* ========================================================================= */

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: rgba(255, 255, 255, 0.9); 
    backdrop-filter: blur(5px); 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); 
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-left {
    display: flex;
    align-items: center;
}

.logo-layout {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--text-color);
}

.site-logo {
    height: 60px; 
    margin-right: 10px;
}

.site-title-text-group {
    display: flex;
    flex-direction: column;
}

.subtitle {
    font-size: 0.8rem;
    font-weight: 200;
    color: var(--accent-color);
}

.main-title {
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--main-color);
    line-height: 1;

}
.subtitle2 {
    font-size: 1.0rem;
    font-weight: 200;
    color: var(--main-color);
}

.header-right {
    display: flex;
    gap: 10px;
}

.icon-link {
    color: var(--main-color);
    font-size: 1.1rem;
    transition: transform 0.2s;
}

.glass-icon {
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.icon-link:hover {
    transform: scale(1.1);
}



/* --- News & Topics --- */
.news-section {
    background-color: #ffffff; /* お悩みセクション（背景あり）の前に置くので、ここは白で区切る */
}

.news-list {
    max-width: 900px;
    margin: 0 auto 30px auto;
}

.news-item {
    display: flex;
    align-items: baseline;
    padding: 15px 10px;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s;
}

.news-item:hover {
    background-color: #fcfdfe;
}

.news-date {
    font-size: 0.9rem;
    color: #888;
    width: 100px;
    flex-shrink: 0;
}

.news-category {
    background-color: var(--accent-color); /* 基本はシアン */
    color: white;
    display: inline-block; /* ブロックとして扱う */
    white-space: nowrap;   /* ★絶対に改行させない */
    min-width: 80px;      /* ★1行で収まる最低限の幅を確保 */
    padding: 2px 12px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 4px;
    flex-shrink: 0;        /* ★親要素が狭くなってもこの要素を縮ませない */
}

/* カテゴリーごとの色分け（お好みで） */
.tag-report { 
    background-color: #f39c12;  /* グレー */
    color: white;
    display: inline-block; /* ブロックとして扱う */
    white-space: nowrap;   /* ★絶対に改行させない */
    min-width: 80px;      /* ★1行で収まる最低限の幅を確保 */
    padding: 2px 12px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 4px;
    flex-shrink: 0;        /* ★親要素が狭くなってもこの要素を縮ませない */
}

.news-text {
    font-size: 0.95rem;
    color: var(--text-color);
    text-align: left !important; /* 全体設定を上書き */
    margin: 0 10px !important;
}

/* 下部ボタン */
/* --- ニュース下部ボタンエリア --- */
.news-footer-btns {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
}

/* LINEボタン（既存の緑ボタンをより洗練） */
.news-btn-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 700;
    color: white !important;
    background-color: var(--line-color);
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0, 195, 0, 0.3);
    transition: all 0.3s ease;
}

.news-btn-line i {
    font-size: 1.5rem;
    margin-right: 10px;
}

.news-btn-line:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 195, 0, 0.4);
    background-color: #00b300;
}

/* モバイル対応：ボタンを縦に並べる */
@media (max-width: 767px) {
    .news-footer-btns {
        flex-direction: column; /* LINEを上にしたい場合は column-reverse */
        gap: 15px;
        width: 100%;
        padding: 0 20px;
    }
    .news-btn-archive, .news-btn-line {
        width: 100%; /* スマホでは押しやすいようフルサイズに */
        max-width: 300px;
    }
}

/* ========================================================================= */
/* --- 3. メインビジュアル (Main Visual) --- */
/* ========================================================================= */

.main-visual {
    position: relative;
    height: 450px; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-image-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #cccccc; 
    background-image: url('images/hero.jpg'); 
    background-size: cover;
    background-position: center;
    z-index: 1;
}
.hero-image-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.07);
}

.hero-text-area {
    position: relative;
    z-index: 5;
    text-align: center;
    color: white;
    max-width: 90%;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.catchphrase {
    font-size: 1.5rem;
    font-weight: 200;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.sub-catchphrase {
    font-size: 2.8rem;
    font-weight: 200;
    margin-bottom: 30px;
    line-height: 1.4;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    background-color: var(--accent-color);
    color: white;
    padding: 15px 30px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    transition: background-color 0.2s, transform 0.2s;
    box-shadow: 0 5px 15px rgb(255, 255, 255, 0.5);
    margin-top: 15px;
}

.cta-button:hover {
    background-color: rgb(255, 255, 255);
    transform: translateY(-2px);
}

.cta-button i {
    font-size: 1.5rem;
    margin-right: 10px;
}

.cta-text-group {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.2;
}

.cta-sub-text {
    font-size: 0.9rem;
    font-weight: 200;
}


/* ========================================================================= */
/* --- 4. ナビゲーション (Navigation Row) --- */
/* ========================================================================= */

.nav-row {
    display: flex;
    justify-content: space-around;
    padding: 20px 0;
    background-color: rgba(255, 255, 255, 0.7); 
    backdrop-filter: blur(8px); 
    position: sticky;
    top: 75px; 
    z-index: 50; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); 
    margin-top: -30px; 
    border-radius: 10px;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--text-color);
    font-size: 0.9rem;
    font-weight: 300;
    padding: 0 5px; 
    flex-grow: 1; 
    text-shadow: 0 2px 4px rgb(215, 215, 215, 0.5);
}

.nav-item span {
    margin-top: 5px;
    transition: color 0.2s;
}

.nav-item:hover span {
    color: var(--accent-color);
}

.glass-icon-large {
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: rgba(0, 119, 182, 0.1);
    color: var(--main-color);
    font-size: 1.5rem;
    border: 1px solid rgba(0, 119, 182, 0.2);
    transition: background-color 0.2s;
}

.nav-item:hover .glass-icon-large {
    background-color: rgba(0, 180, 216, 0.2);
    color: var(--accent-color);
}


/* ========================================================================= */
/* --- 5. カード共通スタイル (Service Cards) --- */
/* ========================================================================= */

.service-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 30px;
}

.service-card {
    background-color: var(--card-background);
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); 
    border-left: 5px solid var(--main-color);
    transition: box-shadow 0.3s;
}

.service-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.service-card i:not(.feature-icon, .card-icon) {
    color: var(--accent-color);
    font-size: 1.1rem;
    margin-right: 8px;
}

h3 {
        font-weight: 400;
}

.service-card h3 {
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--main-color);
    margin-bottom: 15px;
    text-align: center;
}

.service-card p {
    text-align: left;
    margin-bottom: 10px;
    font-size: 1rem;
    line-height: 1.6;
}


/* ========================================================================= */
/* --- 6. 各セクション固有のスタイル --- */
/* ========================================================================= */

/* --- 選ばれる理由 --- */
.reason-cards .service-card{
    text-align: center;
    border-left: none;
    border-top: 5px solid var(--accent-color);
}
.card-icon {
    font-size: 2rem;
    color: var(--accent-color);
    margin-bottom: 10px;
}
.reason-cards .service-card p {
    text-align: justify;
}

/* --- 料金プラン --- */

#price-content .service-card h3 {
    display: block; 
    line-height: 1.2;
    margin-bottom: 5px;
    font-weight: 400 !important;
}

.session-time {
    display: block; 
    font-size: 0.9em; 
    font-weight: 150; 
    color: #666; 
    margin-top: 5px; 
}

#price-content .service-card .plan-price { 
    font-size: 1.8rem !important; 
    font-weight: 300;
    color: var(--main-color);
    text-align: center !important;
    margin: 15px 0 10px 0 !important;
}

#price-content .service-card .plan-price.accent {
    color: var(--main-color) !important; 
}

.plan-note {
    font-size: 0.85rem !important;
    color: #666666;
    text-align: left !important;
}

.card-icon-small {
    display: block;
    text-align: center;
    font-size: 1.5rem; 
    margin-bottom: 10px;
    color: var(--main-color); 
}

.cta-mini-button {
    display: block;
    width: fit-content;
    margin: 30px auto 0 auto;
    background-color: var(--main-color);
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: 500;
    transition: background-color 0.2s;
}
.cta-mini-button:hover {
    background-color: var(--accent-color);
    color: white;
}
.cta-mini-button i {
    margin-right: 8px;
}

/* 料金プランカードの背景透かしアイコン */
#price-content .service-card {
    position: relative; 
    overflow: hidden; 
}

#price-content .service-card::before {
    content: ''; 
    font-family: "Font Awesome 6 Free"; 
    font-weight: 600; 
    position: absolute;
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    font-size: 15rem; 
    color: var(--main-color); 
    opacity: 0.08; 
    z-index: 1; 
    pointer-events: none; 
    transition: opacity 0.3s;
}

#price-content .service-card:hover::before {
    opacity: 0.12;
}

#price-content .service-card h3,
#price-content .service-card .plan-price,
#price-content .service-card .plan-note,
#price-content .service-card .card-icon-small,
#price-content .service-card p {
    position: relative;
    z-index: 2; 
}

/* --- 各メニューに合わせた背景アイコンの指定 --- */
#price-content .service-cards div.service-card:nth-child(1)::before {
    content: "\f4d8"; /* fas fa-hand-holding-medical */
}
#price-content .service-cards div.service-card:nth-child(2)::before {
    content: "\f70c"; /* fas fa-running */
}
#price-content .service-cards div.service-card:nth-child(3)::before {
    content: "\f015"; /* fas fa-home */
}


/* --- 施術者紹介 (Staff) --- */
.staff-details {
    display: flex;
    gap: 30px;
    max-width: 900px;
    margin: 30px auto 0 auto;
    background-color: var(--card-background);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}



/* 枠のデザイン（staff-photo-placeholder） */
.staff-photo-placeholder {
    width: 150px; /* 枠の幅を200pxに設定（ここが枠のサイズになります） */
    height: 180px; /* 枠の高さを200pxに設定 */
    border: 1px solid #ebebeb; /* 枠線 */
    border-radius: 10px; /* 枠の角丸 */
    margin-right: 30px; /* 右側の文字との隙間 */
    flex-shrink: 0;
    display: flex; /* 写真を中央に配置するためにflexboxを使う */
    justify-content: center; /* 写真を水平方向の中央に配置 */
    align-items: center; /* 写真を垂直方向の中央に配置 */
    overflow: hidden; /* 枠からはみ出る部分を隠す（念のため） */
}

/* 枠の中の写真のデザイン（staff-photo） */
.staff-photo {
    width: 100%; /* 枠の80%の幅に設定（写真本体のサイズ） */
    height: 100%; /* 枠の80%の高さに設定 */
    object-fit: cover; /* 写真が歪まないようにトリミング */
    border-radius: 10px; /* 写真自体の角丸（枠とは別に設定） */
    /* ここでは枠線は不要 */
    /* margin-rightも枠で設定したので不要 */
}

/* スマホで見た時の調整（既存のメディアクエリに追加または変更） */
@media (max-width: 768px) {
    .staff-photo-placeholder {
        margin-right: 0;
        margin-bottom: 20px; /* スマホでは枠の下に隙間を作る */
    }
}

.staff-info h3 {
    font-size: 1.5rem;
    color: var(--main-color);
    margin-bottom: 10px;
    text-align: left;
}

.staff-info p {
    text-align: left;
    margin-bottom: 10px;
    font-size: 1rem;
}

.staff-info .qualifications {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
    white-space: pre-wrap;
}


/* --- モーション・ケア整体の特徴 (Feature Cards) --- */
#service-content .service-intro-text {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 25px;
    font-weight: 300;
    text-align: center;
}

.feature-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

.feature-card {
    border: 1px solid var(--main-color);
    background-color: var(--card-background);
    padding: 20px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.feature-icon {
    font-size: 2.5rem; 
    color: var(--accent-color); 
    margin-bottom: 10px;
    display: block; 
}

.feature-card h3 {
    color: var(--main-color);
    font-size: 1.15rem;
    font-weight: 300;
    margin-top: 0;
    margin-bottom: 10px;
}

.feature-card p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #4a4a4a;
}

.long-text-description {
    margin: 20px auto 0 auto;
    max-width: 900px;
    padding: 25px;
    background-color: #fffde7;
    border-radius: 10px;
    border-left: 5px solid var(--accent-color);
    line-height: 1.8;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    text-align: left;
}

.session-flow-title {
    font-size: 1.8rem; 
    font-weight: 300;
    color: var(--main-color); 
    text-align: center; 
    margin-top: 40px;
    margin-bottom: 20px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--accent-color); 
    display: block; 
}

.step-number {
    font-size: 1.8rem;
    font-weight: 400;
    color: var(--accent-color);
    display: block;
    margin-bottom: 10px;
}


/* --- 予約・問い合わせ (Contact) --- */
.contact-info-block {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 40px;
}

.contact-card {
    background-color: var(--card-background);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    flex-basis: 45%; 
    text-align: center;
}

.contact-card h3 {
    font-size: 1.3rem;
    color: var(--main-color);
    margin-bottom: 20px;
}

.tel-number {
    font-size: 1.8rem;
    font-weight: 300;
    color: var(--phone-color);
    display: block;
    margin-bottom: 10px;
}
.tel-number i {
    color: var(--phone-color);
}
.reception-time {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #555;
}

/* --- Web予約エリア（メール/LINE） --- */

.line-contact-group {
    display: flex; 
    justify-content: center; 
    gap: 25px; 
    margin: 40px auto 10px auto; /* 上部のマージンを調整 */
    max-width: 400px; 
}

/* 1. メールアイコンボタン (正方形・グラスモーフィズム) */
.email-icon-cta {
    width: 130px; 
    height: 130px;
    min-width: 130px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    
    background-color: rgba(0, 119, 182, 0.15); 
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 119, 182, 0.3);
    
    color: var(--main-color);
    border-radius: 10px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.email-icon-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    background-color: rgba(0, 119, 182, 0.25); 
    color: var(--accent-color);
}

.email-icon-cta i {
    font-size: 2.5rem; 
    margin-bottom: 5px;
    color: var(--main-color);
}

.email-icon-cta span {
    font-size: 0.9rem;
    line-height: 1.2;
}

/* 2. QRコードエリア (メールアイコンと揃える) - ★★★ 修正済み ★★★ */
.qr-code-link-area {
    text-decoration: none !important;
    display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 130px; 
    height: 130px; 
    min-width: 130px;
    
    background-color: rgba(0, 195, 0, 0.15); /* LINEカラーの半透明 */
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 195, 0, 0.3);
    
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.qr-code-link-area:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    background-color: rgba(0, 195, 0, 0.25); 
}

/* QRコード画像をボタン内で中央に配置し、サイズを調整 */
.qr-code-link-area .qr-code-img {
    width: 70%; 
    height: auto;
    border: none; 
    border-radius: 5px;
    margin: 0; 
}

/* QRコード下部のテキストを非表示にする */
.qr-code-area-simple p {
    display: none !important; 
}


/* --- Q&A (FAQ) --- */
.faq-list {
    max-width: 800px;
    margin: 30px auto 0 auto;
}

.faq-item {
    background-color: var(--card-background);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-bottom: 15px;
    overflow: hidden;
}

.faq-item .question {
    padding: 15px 20px;
    font-weight: 400;
    cursor: pointer;
    background-color: #f7f7fa;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    border-bottom: 1px solid #eeeeee;
    transition: background-color 0.2s;
}

.faq-item.active .question {
    background-color: var(--main-color);
    color: white;
    border-bottom: none;
}

.faq-item.active .question .faq-q-text,
.faq-item.active .question .faq-toggle-icon {
    color: white;
}

.faq-toggle-icon {
    font-size: 0.8rem;
    margin-left: 10px;
    transition: transform 0.3s ease-in-out;
}

.faq-item.active .faq-toggle-icon {
    transform: rotate(180deg);
}

.faq-item .answer {
    padding: 0 20px;
    background-color: var(--card-background);
    line-height: 1.7;
    font-size: 0.95rem;
    color: #555;
    text-align: left; 
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, margin 0.3s ease-in-out, padding 0.3s ease-in-out, visibility 0.3s;
    overflow: hidden; 
}

/* --- 出張サポートのご案内 (Access) --- */
.access-info-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.notice-card {
    border-left: 5px solid var(--accent-color);
    text-align: center;
    padding: 20px;
}
.notice-card i {
    font-size: 2rem;
    margin-bottom: 10px;
    color: var(--accent-color) !important;
}
.notice-card h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}
.notice-card p {
    text-align: left;
    font-size: 0.95rem;
}

.disclaimer-block {
    max-width: 900px;
    margin: 40px auto;
    padding: 30px;
    background-color: #f8f8f8;
    border: 1px dashed var(--phone-color);
    border-radius: 10px;
    text-align: left;
    font-family: 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, 'MS PMincho', serif;
}

.disclaimer-block h3 {
    color: var(--phone-color);
    font-size: 1.4rem;
    margin-bottom: 20px;
    text-align: center;
}

.disclaimer-block p {
    text-align: left; 
    margin-bottom: 15px;
}

.disclaimer-block hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 15px 0;
}

.disclaimer-block ul {
    list-style: none;
    padding-left: 0;
}

.disclaimer-block li {
    margin-bottom: 10px;
    padding-left: 1.2em;
    position: relative;
    text-align: left; 
}

.disclaimer-block li::before {
    content: '‣';
    color: var(--phone-color);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

.caution-point {
    font-weight: 700;
}


/* ========================================================================= */
/* --- 7. フッター (Footer) --- */
/* ========================================================================= */

.footer {
    background-color: var(--main-color);
    color: white;
    text-align: center;
    padding: 20px 0;
    font-size: 0.9rem;
}

/* ========================================================================= */
/* --- 8. 固定 CTA バー (Fixed CTA Bar) --- ★★★ 修正済み ★★★ */
/* ========================================================================= */

.fixed-cta-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    
    background-color: rgba(255, 255, 255, 0.1); 
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px);
    
    border-top: 1px solid rgba(255, 255, 255, 0.6); 
    display: none; 
    justify-content: space-around;
    z-index: 99;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15); 
}

.fixed-cta-bar a {
    /* 均等幅を強制 */
    flex-grow: 1;
    flex-basis: 0; 
    
    text-align: center;
    padding: 10px 0;
    color: var(--main-color);
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
    transition: background-color 0.2s; 
}

/* 非予約系のボタン（料金）のスタイル */
.fixed-cta-bar a:not(.cta-tel, .cta-reserve, .cta-line) {
    background-color: rgba(0, 119, 182, 0.1) !important; 
    color: var(--main-color) !important; 
}
.fixed-cta-bar a:not(.cta-tel, .cta-reserve, .cta-line):hover {
    background-color: rgba(0, 119, 182, 0.2) !important; 
}


.fixed-cta-bar i {
    font-size: 1.2rem;
    margin-bottom: 3px;
}

/* 電話予約 (赤) */
.cta-tel {
    background-color: rgba(230, 57, 70, 0.6) !important; 
    color: white !important;
    font-weight: 700;
}
.cta-tel:hover {
    background-color: rgba(230, 57, 70, 0.85) !important;
}

/* Web予約 (シアン) */
.cta-reserve {
    background-color: rgba(0, 180, 216, 0.6) !important; 
    color: white !important;
    font-weight: 700;
}
.cta-reserve:hover {
    background-color: rgba(0, 180, 216, 0.85) !important;
}

/* LINE相談 (緑) */
.cta-line {
    background-color: rgba(0, 195, 0, 0.6) !important; 
    color: white !important;
    font-weight: 700;
}

.cta-line:hover {
    background-color: rgba(0, 170, 0, 0.85) !important; 
}


/* ========================================================================= */
/* --- 9. レスポンシブ対応 (Media Queries) --- ★★★ 最終置き換えコード (正方形・横並び) ★★★ */
/* ========================================================================= */

@media (max-width: 900px) {
    /* 900px以下のタブレット向けスタイル */
    .staff-details {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .staff-info h3 {
        text-align: center;
    }
    .staff-info p {
        text-align: left;
    }
}

@media (max-width: 767px) {
    /* 767px以下のモバイル向けスタイル */
    
    /* 共通設定 */
    .content-section {
        padding: 40px 0;
        scroll-margin-top: 60px;
    }
    .content-section h2 {
        font-size: 1.8rem;
    }

    /* ヘッダー、ナビゲーション、カードレイアウト等の省略スタイル */
    .header {
        position: static; 
        box-shadow: none;
    }
    .header-right {
        display: none; 
    }
    .sub-catchphrase {
        font-size: 2rem;
    }
    .cta-button {
        padding: 12px 20px;
        font-size: 1rem;
    }
    .hide-on-mobile {
        display: none; 
    }
    .nav-row {
        padding: 10px 0; 
        flex-wrap: nowrap;
        justify-content: space-between; 
        margin-top: -20px;
        gap: 0;
        top: 0; 
        z-index: 90;
        border-radius: 5px;
    }
    .nav-row .nav-item { 
        flex-basis: 25%;
        flex-grow: 1; 
        flex-shrink: 0; 
        text-align: center; 
        font-size: 0.75rem; 
        padding-left: 0;
        padding-right: 0;
        line-height: 1.5; 
    }
    .nav-row .nav-item span {
        display: block; 
        margin-top: 3px; 
        white-space: nowrap; 
        overflow: hidden;
        text-overflow: ellipsis; 
    }
    .nav-row .glass-icon-large {
        width: 38px;
        height: 38px;
        font-size: 1.3rem;
        min-width: 38px;
    }
    .service-cards {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .feature-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    /* 問い合わせ */
    .contact-info-block {
        flex-direction: column;
        gap: 20px;
    }
    .contact-card {
        flex-basis: 100%;
    }

    /* --- LINE/メールボタンのモバイルレイアウト（正方形・横並び） --- */
    .line-contact-group {
        flex-direction: row; /* 横並びに戻す */
        gap: 20px; /* PC版と同じ間隔を維持 */
        justify-content: center;
        margin: 20px auto 30px auto; 
    }
    
    /* 2. メールアイコンボタン (正方形) */
    .email-icon-cta {
        /* PC版と同じ正方形のサイズと配置を維持 */
        width: 130px; 
        height: 130px; 
        max-width: 130px;
        min-width: 130px;
        flex-direction: column; 
        font-size: 0.9rem;
        justify-content: center; 
        align-items: center;
    }
    .email-icon-cta i {
        font-size: 2.5rem; 
        margin-right: 0;
        margin-bottom: 5px; 
    }
    .email-icon-cta span {
        font-size: 0.9rem;
    }

    /* 1. QRコードエリア (正方形) */
    .qr-code-link-area {
        /* PC版と同じ正方形のサイズと配置を維持 */
        display: flex !important; 
        width: 130px; 
        height: 130px; 
        max-width: 130px;
        min-width: 130px;
        flex-direction: column; 
        padding: 10px; 
        justify-content: center;
        align-items: center;
    }

    .qr-code-link-area .qr-code-img {
        /* 正方形ボタン内で画像サイズを調整 */
        width: 70%; 
        height: auto; 
        max-width: none; 
        margin: 0 auto;
        border: none; 
        border-radius: 5px;
    }

    /* タップでLINEに移動のテキストは非表示のまま */
    .qr-code-link-area::after {
        content: none; 
        display: none;
    }
    
    /* アクセス情報カード */
    .access-info-cards {
        grid-template-columns: 1fr;
    }
    
    /* 固定 CTA バー表示 */
    .fixed-cta-bar {
        display: flex;
    }
    
    /* 固定CTAバー内のアイコンサイズ調整 */
    .fixed-cta-bar i {
        font-size: 1.1rem; 
        margin-bottom: 3px;
        width: 100%; 
        text-align: center;
    }
    .fixed-cta-bar a {
            padding: 8px 0;
    }
}
/* ============================= */
/* 料金プラン画像表示のための追加CSS */
/* ============================= */

/* 画像ラッパー (既存のアイコンスペースを置き換え、画像がはみ出さないように) */
.service-card .card-image-wrapper {
    /* 既存のアイコン（fas fa-*）の高さとマージンを考慮し、画像を上部に配置 */
    margin: -10px -10px 20px -10px; /* カードのパディングを相殺 */
    width: calc(100% + 20px); /* カード幅に合わせる */
    aspect-ratio:4/3;
    overflow: hidden; /* はみ出す部分を隠す */
    border-radius: 8px 8px 0 0; /* カード上部にだけ角丸を適用 */
    position: relative;
}

/* 料金プラン画像 */
.service-card .price-card-img {
    width: 100%;
    height: 100%;
    /* 視認性を確保する最も重要な設定 */
    object-fit: cover; /* アスペクト比を維持しつつ、ラッパー全体を覆う */
    display: block;
    transition: transform 0.3s ease; /* ホバー時のアニメーション準備 */
}

/* ホバーエフェクト（洗練されたデザインの向上） */
.service-card:hover .price-card-img {
    transform: scale(1.05); /* 画像を少し拡大し、動きを付ける */
}

/* カード内のアイコンや画像のラッパーに、丸い枠が適用されていた場合（既存のCSSによっては影響を受ける可能性があるため） */
/* アイコンを画像で置き換えたため、既存の.card-icon のスタイルは料金プランセクションでは不要になりますが、念のため競合回避 */
#price-content .service-card .card-icon {
    display: none; /* 既存のカードアイコンを非表示にする（もし残っていた場合） */
}

/* --- 料金プラン（#price-content）のフォントサイズを流動的に変更 --- */
#price-content .service-card h3 {
    /* 1. clamp関数を使用して流動的なフォントサイズを設定 */
    /* 最小値: 1rem, 流動値: 2vw, 最大値: 1.5rem */
    font-size: clamp(1.2rem, 2vw, 1.8rem); 
    
    display: block; 
    line-height: 1.2;
    margin-bottom: 5px; 
    
    /* PC版のスタイルを保持 */
    font-weight: 700;
    color: var(--main-color);
    text-align: center;
}

/* スマホでの調整（必要に応じて） */
@media (max-width: 768px) {
    #price-content h3 {
    font-size: clamp(1.3rem, 4vw, 1.8rem);
    }
}
/* --- 出張料金テーブルのスタイル --- */
.travel-fee-table {
    width: 90%; /* 幅を少し狭くして見やすく */
    max-width: 400px; /* モバイルでも見やすいように最大幅を設定 */
    margin: 20px auto; /* 上下余白と中央寄せ */
    border-collapse: collapse; /* ボーダーを重ねる */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-size: 0.95em;
}

.travel-fee-table th, .travel-fee-table td {
    border: 1px solid #e0e0e0;
    padding: 10px 15px;
    text-align: center;
}

.travel-fee-table thead {
    background-color: var(--main-color); /* メインカラーを適用 */
    color: white;
}

.travel-fee-table tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* 交互の行に色を付けて見やすく */
}

/* 削除されたスタイル（以前の3列構成で最初の行を強調していた部分と、結合セルの縦揃え調整） */

/* 補足文のスタイル */
.fee-note {
    font-size: 0.9em;
    text-align: center;
    color: #666;
    margin: 5px 0;
}

/* ハイブリッド方式のテーブル強調 */
.travel-fee-table .zone-highlight {
    background-color: #e6f7e6; /* 薄い緑色で無料エリアを強調 */
    font-weight: bold;
    color: var(--main-color);
}

.travel-fee-table .zone-standard {
    background-color: #f5f5f5;
}

/* --- ご用意いただくもの（洗練版）のスタイル --- */
.preparation-list {
    list-style: none;
    padding: 0;
    margin-top: 30px; /* 上部のマージンを少し増やす */
    max-width: 600px; /* リストの最大幅を制限して中央に集める */
    margin-left: auto;
    margin-right: auto;
}

.preparation-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0; /* マージンを0にして、パディングとボーダーで間隔を制御 */
    padding: 20px 0; /* 上下のパディングを増やし、見やすくする */
    
    /* 区切り線を強化し、よりハッキリと区別 */
    border-bottom: 2px solid #e0e0e0; 
}

.preparation-list li:last-child {
    border-bottom: none;
}

.list-icon {
    font-size: 1.8em; /* アイコンをさらに大きく */
    color: var(--accent-color); /* アイコンの色をアクセントカラーに変更 */
    margin-right: 20px;
    padding-top: 3px; 
    min-width: 40px; /* アイコンの幅を確保 */
    text-align: center;
}

.list-text {
    display: flex;
    flex-direction: column;
    text-align: left;
    flex-grow: 1; /* 残りのスペースを埋める */
}

.list-text strong {
    font-size: 1.15em; /* タイトルを少し大きく */
    font-weight: 700;
    color: var(--main-color); /* タイトルをメインカラーに */
    margin-bottom: 5px;
}

.sub-text {
    font-size: 0.95em; /* 説明文のサイズを微調整 */
    color: #555;
    line-height: 1.6;
}

/* モバイル対応の強化 */

@media (max-width: 767px) {
    body {
        /* 固定バーの高さ（約60px〜70px）分、下に余白を作る */
        padding-bottom: 50px; 
    }
    .news-summary {
        flex-wrap: wrap;   /* 日付とタグで1行、テキストは下へ、と柔軟にする */
    }
    
    .news-category {
        min-width: 100px;  /* スマホでも幅を維持 */
        margin-bottom: 5px;
    }
    .preparation-list {
        margin-top: 20px;
        padding: 0 10px; /* モバイルでは左右に少しパディング */
    }
    .preparation-list li {
        padding: 15px 0;
    }
    .list-icon {
        font-size: 1.6em;
        margin-right: 15px;
        min-width: 30px;
    }
    .list-text strong {
        font-size: 1.1em;
    }
    .sub-text {
        font-size: 0.9em;
    }
}
/* --- 重要な注意書き（Attention Box）のスタイル --- */
.attention-box {
    /* ブロック全体を中央に寄せ、幅を制限 */
    max-width: 700px;
    margin: 30px auto;
    padding: 15px 25px;
    
    /* 背景と枠線のデザイン */
    background-color: #fff8e1; /* 薄い黄色/クリーム色 */
    border: 3px solid #ffcc80; /* オレンジ系の太い枠線 */
    border-radius: 8px;
    
    /* テキストの強調 */
    font-size: 1.05rem; /* 少し大きく */
    font-weight: 700; /* 太字 */
    color: #cc6600; /* テキストを濃いオレンジ色に */
    text-align: left !important; /* テキストを中央寄せ */
    line-height: 1.6;
    
    /* 影をつけて浮き立たせる */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* モバイル対応：パディングを調整 */
@media (max-width: 767px) {
    .attention-box {
        padding: 15px 15px;
        font-size: 1rem;
        margin-left: 10px;
        margin-right: 10px;
    }
}
/* ========================================================================= */
/* --- 料金プラン内の参考スペース（Glassmorphism Box） - 視認性向上版 --- */
/* ========================================================================= */

.plan-space-glass-box {
    /* Glassmorphism Effect: メインカラーの薄い青を透明度を上げて適用 */
    background: rgba(0, 119, 182, 0.1); /* メインカラー（青）を10%の不透明度で */
    backdrop-filter: blur(5px); /* ぼかしを少し強め、ガラス感を強調 */
    -webkit-backdrop-filter: blur(5px);
    
    /* Box Appearance */
    border-radius: 10px; /* 角を少し丸く */
    /* 境界線: メインカラーの薄い線を適用して輪郭を明確に */
    border: 1px solid rgba(0, 119, 182, 0.25); 
    
    /* Shadow: 影を濃く、広くして、背景から浮き出たように見せる */
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1); 
    
    padding: 20px; /* 内側の余白を少し増やす */
    margin-top: 20px; 
}

/* ボックス内のテキストの調整 */
.plan-space-glass-box p {
    margin: 0;
    line-height: 1.6;
    color: #0077b6;
    font-size: 0.95em;
    margin-bottom: 8px;
}


/* --- モーダル全体のスタイル --- */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none; /* 初期状態は非表示 */
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

/* 背景のぼかし・暗転 */
.modal-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px); /* 背景をぼかす（透明感のキモ） */
}

/* ウィンドウ本体 */
.modal-container {
    position: relative;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    background: rgba(255, 255, 255, 0.85); /* 半透明の白 */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(255, 255, 228, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalFadeIn 0.4s ease-out;
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ヘッダー */
.modal-header {
    padding: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--main-color);
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 2rem;
    color: #888;
    cursor: pointer;
    line-height: 1;
}

/* リスト部分 */
/* モーダルのコンテンツエリア */
.modal-body {
    padding: 20px;
    /* スクロールを有効にする設定 */
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; /* iPhoneでのスクロールを滑らかにする */
    
    /* ウィンドウ内での最大高さを指定（ヘッダーとフッター分を引く） */
    max-height: calc(80vh - 120px); 
    
    /* スクロールバーのデザイン（任意：細くしてスッキリさせる） */
}

.modal-body::-webkit-scrollbar {
    width: 6px;
}
.modal-body::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.archive-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.archive-list li {
    padding: 12px 0;
    border-bottom: 1px dotted #ccc;
    font-size: 0.95rem;
    color: var(--text-color);
}

.archive-list li .date {
    display: block;
    font-size: 0.8rem;
    color: #999;
}

/* フッター（閉じるボタン） */
.modal-footer {
    padding: 15px;
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.modal-close-bottom {
    background: var(--main-color);
    color: white;
    border: none;
    padding: 10px 40px;
    border-radius: 50px;
    font-weight: bold;
    cursor: pointer;
}

/* 767px以下のデバイス（スマホ）向けの調整 */
@media (max-width: 767px) {
    .news-item {
        display: flex;
        flex-wrap: wrap; /* 要素を折り返し可能にする */
        align-items: center; /* 日付とタグの上下中央を揃える */
        padding: 15px 10px;
    }

    .news-date {
        width: auto; /* 幅固定を解除 */
        margin-right: 15px; /* カテゴリーとの間に隙間を作る */
        margin-bottom: 5px;
        font-weight: bold;
    }

    .news-category {
        margin-bottom: 5px;
        /* PC用設定（min-width: 80px）は継承されるので、そのままでOK */
    }

    .news-text {
        width: 100%; /* 本文だけを強制的に改行させて横幅いっぱいに使う */
        margin: 8px 0 0 0 !important; /* 上に少し隙間を作る */
        padding-left: 0;
        line-height: 1.5;
    }
}

/* ニュースリストのスタイル調整 */
#news-list {
    list-style: none; /* リストの点を消す */
    padding: 0;
    margin: 0;
}

.news-item {
    display: flex;
    border-bottom: 1px solid #eee;
    padding: 15px 0;
}

/* スマホ表示の崩れ防止（前回の修正分も含む） */
@media (max-width: 767px) {
    .news-item {
        flex-wrap: wrap;
    }
    .news-date {
        margin-right: 15px;
    }
    .news-text {
        width: 100%;
        margin-top: 8px;
    }
}

/* スマホ画面（767px以下）でのニュースの見栄えを強制的に整える */
@media (max-width: 767px) {
    .news-item {
        display: flex;
        flex-wrap: wrap; /* 要素を折り返し可能にする */
        align-items: center;
        padding: 15px 5px;
    }

    .news-date {
        width: auto !important; /* 固定幅を解除 */
        margin-right: 10px;
        font-weight: bold;
    }

    .news-category {
        margin-bottom: 0; /* 日付と横に並べるため */
    }

    .news-text {
        display: block; /* ブロック要素にして強制的に改行させる */
        width: 100%;    /* 横幅いっぱいにして2段目に送る */
        margin: 8px 0 0 0 !important;
        padding-left: 0;
        line-height: 1.5;
    }
}