/* ===================================
   統合版
   明るいピンク×水色パステルテーマ
   =================================== */

:root {
    /* カラーパレット（夜空ルナベース） */
    --primary: #f472b6;
    --primary-light: #f9a8d4;
    --primary-dark: #ec4899;
    --secondary: #ddb7b0;
    --secondary-light: #ddb7b0;
    --accent: #d2c7ff;
    --accent-light: #d3b1c2;

    /* 背景色 */
    --bg-white: #ffffff;
    --bg-light: #fdf2f8;
    --bg-gradient: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 50%, #f0fdfa 100%);
    --bg-card: rgba(244, 114, 182, 0.08);
    --bg-card-hover: rgba(244, 114, 182, 0.15);

    /* テキスト */
    --text-dark: #831843;
    --text-main: #9d174d;
    --text-muted: #6b7280;
    --text-pink: #db2777;

    /* その他 */
    --radius: 12px;
    --radius-lg: 20px;
    --shadow: 0 4px 20px rgba(244, 114, 182, 0.2);
    --shadow-lg: 0 8px 40px rgba(244, 114, 182, 0.25);
    --transition: all 0.3s ease;
}

/* ===================================
   リセット & 共通設定
   =================================== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif; /* 元の可愛い丸ゴシックに戻します */
    background: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.7;
    overflow-x: hidden;
}

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

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

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

ul {
    list-style: none;
}

/* ===================================
   セクション共通
   =================================== */
section {
    padding: 80px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-label {
    font-size: 12px;
    letter-spacing: 0.3em;
    color: var(--secondary);
    margin-bottom: 8px;
}

/* Starlight側の2連ラベルにも対応 */
.section-label-en {
    font-size: 12px;
    letter-spacing: 0.3em;
    color: var(--primary);
    display: block;
}

.section-label-ja {
    font-size: 12px;
    letter-spacing: 0.3em;
    color: var(--text-muted);
    display: block;
    margin-bottom: 10px;
}

.section-title, .section-header h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-pink);
    letter-spacing: 0.1em;
}

/* ===================================
   ヘッダー
   =================================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid rgba(244, 114, 182, 0.2);
    box-shadow: 0 2px 15px rgba(244, 114, 182, 0.1);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.logo img {
    height: 40px;
}

.nav {
    display: flex;
    gap: 35px;
    align-items: center;
}

.nav a {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--text-main);
    position: relative;
    padding: 5px 0;
}

.nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    transition: width 0.3s ease;
}

.nav a:hover::after {
    width: 100%;
}

.nav a:hover {
    color: var(--primary);
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-link {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border-radius: 50%;
    color: var(--text-main);
    transition: var(--transition);
}

.social-link:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-2px);
}

.template-credit {
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0.7;
    white-space: nowrap;
}

.template-credit:hover {
    opacity: 1;
    color: var(--primary);
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: var(--text-dark);
    border-radius: 2px;
    transition: var(--transition);
}

/* ===================================
   ヒーローセクション
   =================================== */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    
    /* 黒いベール＋画像 */
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('https://crystalwisdom44444.com/wp-content/uploads/2026/05/b7b486ac27e094edba3d297c82610de6.jpg');
    background-size: cover;      /* 画像を画面いっぱいに綺麗に引き伸ばす設定 */
    background-position: center;  /* 画像の中心がいつも画面の真ん中にくる設定 */
    
    padding-top: 60px;
    overflow: hidden;
    margin-bottom: 0 !important; /* 💡 下のセクションと隙間なくピタッとくっつけるお守り */
}

/* 星を降らせる魔法 */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    /* fill="%23ffffff" の後ろにある opacity の数字を「0.2」に下げて薄くします */
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text x="50" y="55" text-anchor="middle" font-size="20" fill="%23ffffff" opacity="0.2">★</text></svg>');
    background-size: 80px 80px;
    animation: starFloat 200s linear infinite;
    z-index: 0; /* 背景のすぐ上に星を配置 */
}

/* 💡 【新規追加】下から白い霧を発生させる魔法 */
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 35%; /* 💡 霧の高さ。もっと上まで霧を出したい時は 50% などに増やしてね */
    /* 上（透明）から下（白）へのグラデーション */
    background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 1; /* 星（0）より上、文字（2）より下に配置して遠近感を出す */
    pointer-events: none; /* 霧がリンククリックの邪魔をしないようにする */
}

@keyframes starFloat {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-100px) rotate(360deg); }
}

/* Starlight側の複数画像配置（使う場合用、透過パステル調にアレンジ） */
.hero-images {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    padding: 80px 20px 20px;
    opacity: 0.25;
    z-index: 0;
}

.hero-img {
    overflow: hidden;
    border-radius: var(--radius);
    position: relative;
}

.hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.hero-img:nth-child(2) img,
.hero-img:nth-child(4) img,
.hero-img:nth-child(6) img {
    object-fit: contain;
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.2), rgba(34, 211, 238, 0.2));
}

.hero-img.img-main {
    grid-column: 2;
    grid-row: 1 / 3;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
}

/* 💡 文字が霧に埋もれないように一番手前（z-index: 2）に引き上げる */
.hero-content {
    text-align: center;
    position: relative;
    z-index: 2; /* 霧（1）より上に配置してクッキリ見せる！ */
    padding: 20px;
    
    /* 👇 ここを追加！文字全体を下に押し下げる魔法 👇 */
    margin-top: 120px !important; 
}

.hero-subtitle {
    font-size: 14px;
    letter-spacing: 0.3em;
    color: var(--text-main);
    margin-bottom: 35px;
    background: rgba(255, 255, 255, 0.8);
    padding: 8px 25px;
    border-radius: 30px;
    display: inline-block;
}

.hero-title, .hero-content h1 {
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 700;
    color: white;
    letter-spacing: 0.15em;
    text-shadow: 0px 0px 10px #cb5174;
    margin-bottom: 40px;
    line-height: 1.5;
}

/* Starlight風のグラデーションテキスト効果 */
.hero-content h1 span {
    display: block;
    background: linear-gradient(90deg, #ffffff, var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-logo {
    max-width: 300px;
    margin: 0 auto;
}

.hero-scroll {
    font-size: 12px;
    letter-spacing: 0.5em;
    color: var(--text-main);
    margin-bottom: 20px;
}

.hero-arrow {
    animation: bounce 2s infinite;
}

.hero-arrow svg {
    color: var(--primary);
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

.hero-character {
    position: absolute;
    bottom: 0;
    right: 5%;
    height: 85%;
    z-index: 0;
    opacity: 0.9;
    pointer-events: none;
    filter: drop-shadow(0 0 30px rgba(244, 114, 182, 0.3));
}

.hero-character img {
    height: 100%;
    object-fit: contain;
}

/* ===================================
   PICKUP（ショートお知らせ欄）
   =================================== */
.pickup {
    background: rgba(244, 114, 182, 0.1);
    padding: 30px 0;
}

.pickup .container {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.pickup .section-label {
    margin-bottom: 0;
    white-space: nowrap;
}

.pickup-item {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    min-width: 300px;
}

.pickup-date {
    font-size: 14px;
    color: var(--text-pink);
    font-weight: 600;
    white-space: nowrap;
}

.pickup-text {
    font-size: 15px;
    color: var(--text-dark);
}

.pickup-item:hover .pickup-text {
    color: var(--primary);
}

/* ===================================
   ニュース & SNS セクション
   =================================== */
.news, .news-sns {
    background: var(--bg-white);
}

/* グリッドレイアウト（双方対応可能） */
.news-grid, .news-sns .container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    align-items: start;
}

.news-list {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 30px;
    border: 1px solid rgba(244, 114, 182, 0.15);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 1つ目ベースのシンプルアイテム */
.news-item {
    display: flex;
    gap: 20px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: var(--radius);
    border-bottom: 1px dashed rgba(244, 114, 182, 0.2);
    transition: var(--transition);
}

.news-item:last-child {
    border-bottom: none;
}

.news-item:hover {
    background: var(--bg-white);
    transform: translateX(5px);
    box-shadow: var(--shadow);
}

/* 2つ目のリッチなニュース用スタイル */
.news-image {
    width: 120px;
    flex-shrink: 0;
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
}

.news-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.news-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 8px;
}

.news-category {
    font-size: 12px;
    color: var(--secondary);
    font-weight: 600;
}

.news-date {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 600;
    min-width: 90px;
}

.news-text, .news-title {
    font-size: 14px;
    color: var(--text-dark);
    font-weight: 500;
}

/* もっと見るボタン */
.view-more {
    align-self: center;
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--text-main);
    padding: 12px 40px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    margin-top: 15px;
}

.view-more:hover {
    background: var(--primary);
    color: white;
}

/* SNSサイドバー（パステルグラデーション） */
.sns-links {
    background: linear-gradient(135deg, var(--primary-light) 0%, #cffafe 100%);
    border-radius: var(--radius-lg);
    padding: 25px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sns-title {
    font-size: 16px;
    color: var(--text-dark);
    margin-bottom: 10px;
    font-weight: 700;
}

.sns-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sns-btn, .sns-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 20px;
    background: white;
    border-radius: var(--radius);
    color: var(--text-dark);
    font-size: 14px;
    font-weight: 600;
    border: 1px solid rgba(244, 114, 182, 0.1);
    transition: var(--transition);
}

.sns-btn:hover, .sns-link:hover {
    transform: translateY(-2px) translateX(5px);
    box-shadow: var(--shadow);
}

.sns-btn svg, .sns-link svg {
    color: var(--primary);
}

.sns-btn.youtube:hover { background: #ff0000; color: white; }
.sns-btn.x:hover { background: #000000; color: white; }
.sns-btn.tiktok:hover { background: #000000; color: white; }

/* ===================================
   MEMBER（所属紹介・複数カード）
   =================================== */
.member {
    background: var(--bg-white);
}

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

.member-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition);
    border: 2px solid rgba(244, 114, 182, 0.15);
}

.member-card:hover {
    transform: translateY(-10px);
    background: var(--bg-card-hover);
    box-shadow: var(--shadow-lg);
}

.member-image {
    position: relative;
    padding-bottom: 120%;
    overflow: hidden;
    background: var(--bg-light);
}

.member-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.member-card:hover .member-image img {
    transform: scale(1.05);
}

.member-info {
    padding: 20px;
    text-align: center;
}

.member-info h3 {
    font-size: 18px;
    color: var(--text-pink);
    margin-bottom: 5px;
}

.member-name-en {
    font-size: 12px;
    color: var(--secondary);
    letter-spacing: 0.1em;
    font-weight: 600;
}

.member-social {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 0 20px 20px;
}

.member-social a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    transition: var(--transition);
}

.member-social a:hover {
    background: var(--secondary);
    transform: scale(1.1);
}

/* ===================================
   動画 / YOUTUBE セクション
   =================================== */
.video, .youtube {
    background: var(--bg-gradient);
}

.video-content {
    text-align: center;
}

.video-embed {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 56.25%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 4px solid white;
}

.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-link, .youtube-channel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 25px;
    padding: 14px 35px;
    background: white;
    border: 2px solid var(--primary);
    border-radius: 30px;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 600;
}

.video-link:hover, .youtube-channel:hover {
    background: var(--primary);
    color: white;
}

/* 3並びの動画配置用スタイル */
.youtube-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

.youtube-item {
    text-align: center;
}

.youtube-item iframe {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--radius);
    border: 3px solid white;
    box-shadow: var(--shadow);
    margin-bottom: 15px;
}

.youtube-item p {
    font-size: 14px;
    color: var(--text-dark);
    font-weight: 500;
}

/* ===================================
   プロフィール（ABOUT）セクション
   =================================== */
.about {
    background: var(--bg-white);
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-name {
    margin-bottom: 25px;
}

.name-ja, .about-lead {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-pink);
    margin-bottom: 5px;
    line-height: 1.5;
}

.name-en {
    font-size: 16px;
    color: var(--secondary);
    letter-spacing: 0.1em;
    font-weight: 600;
}

.about-text, .about-text p {
    font-size: 15px;
    color: var(--text-dark);
    line-height: 2;
    margin-bottom: 30px;
}

.profile-list {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 25px;
    border: 1px solid rgba(244, 114, 182, 0.1);
}

.profile-list li {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid rgba(244, 114, 182, 0.1);
}

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

.profile-list .label {
    color: var(--text-pink);
    font-size: 13px;
    min-width: 120px;
    font-weight: 600;
}

.profile-list .value {
    color: var(--text-dark);
    font-size: 14px;
}

.about-image {
    text-align: center;
}

.about-image img {
    max-height: 500px;
    filter: drop-shadow(0 10px 30px rgba(244, 114, 182, 0.3));
}

/* Starlight側のプロフィール動画横並び用 */
.about-video {
    position: relative;
    padding-bottom: 56.25%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 4px solid white;
}

.about-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ===================================
   ギャラリーセクション
   =================================== */
.gallery {
    background: var(--bg-gradient);
}

.gallery-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.gallery-item {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: var(--transition);
}

.gallery-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.3), rgba(34, 211, 238, 0.3));
    opacity: 0;
    transition: var(--transition);
}

.gallery-item:hover::before {
    opacity: 1;
}

.gallery-item:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: var(--shadow-lg);
}

.gallery-item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

/* ===================================
   FAQ（アコーディオン）
   =================================== */
.faq {
    background: var(--bg-white);
}

.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    margin-bottom: 15px;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid rgba(244, 114, 182, 0.15);
    overflow: hidden;
    transition: var(--transition);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: transparent;
    border: none;
    color: var(--text-dark);
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.faq-question svg:first-child {
    color: var(--primary);
    flex-shrink: 0;
}

.faq-question span {
    flex: 1;
}

.faq-icon {
    transition: var(--transition);
    color: var(--text-pink);
}

.faq-item.active {
    background: var(--bg-white);
    box-shadow: var(--shadow);
}

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

.faq-answer {
    display: none;
    padding: 0 20px 20px 60px;
}

.faq-item.active .faq-answer {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.faq-answer svg {
    color: var(--secondary);
    flex-shrink: 0;
    margin-top: 3px;
}

.faq-answer p {
    color: var(--text-dark);
    font-size: 14px;
    line-height: 1.8;
}

/* ===================================
   お問い合わせ（CONTACT）セクション
   =================================== */
.contact {
    background: var(--bg-white);
}

.contact-content, .contact-form-wrapper {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.contact-text, .contact-desc {
    font-size: 15px;
    color: var(--text-dark);
    margin-bottom: 20px;
    line-height: 2;
}

.contact-email {
    margin-bottom: 25px;
}

.contact-email h3 {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.contact-email p {
    font-size: 18px;
    color: var(--primary);
    font-weight: 600;
}

.contact-sns {
    margin-bottom: 40px;
}

.contact-sns .sns-btn {
    display: inline-flex;
    padding: 14px 40px;
}

/* 詳細フォーム（Starlight側機能をパステル化） */
.contact-form {
    background: var(--bg-card);
    padding: 30px;
    border-radius: var(--radius-lg);
    border: 2px solid rgba(244, 114, 182, 0.15);
    text-align: left;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-dark);
}

.form-group .required {
    color: var(--primary-dark);
    font-size: 12px;
    margin-left: 5px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 15px;
    background: white;
    border: 1px solid rgba(244, 114, 182, 0.3);
    border-radius: var(--radius);
    color: var(--text-dark);
    font-family: inherit;
    font-size: 14px;
    transition: var(--transition);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 10px rgba(244, 114, 182, 0.2);
}

.form-group textarea {
    min-height: 150px;
    resize: vertical;
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.form-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

.form-checkbox label {
    font-size: 14px;
    cursor: pointer;
    color: var(--text-dark);
}

.submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px;
    background: var(--primary);
    border: none;
    border-radius: var(--radius);
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.submit-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.form-note, .privacy-link, .form-privacy-note p, .form-privacy-note li {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
}

.form-privacy-note {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(244, 114, 182, 0.2);
}

/* プライバシーポリシー折りたたみ（1つ目用） */
.privacy-toggle {
    text-align: left;
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px;
    margin-top: 30px;
}

.privacy-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    font-size: 14px;
    color: var(--text-main);
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    font-weight: 600;
}

.privacy-btn svg {
    transition: transform 0.3s ease;
}

.privacy-btn.active svg {
    transform: rotate(180deg);
}

.privacy-text {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(244, 114, 182, 0.15);
    display: none;
    line-height: 1.8;
}

.privacy-text.active {
    display: block;
}

/* ===================================
   トップに戻るボタン
   =================================== */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: var(--shadow);
    z-index: 100;
    transition: var(--transition);
}

.back-to-top:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.back-to-top svg {
    width: 100%;
    height: 100%;
    padding: 13px;
}

/* ===================================
   フッター
   =================================== */
.footer {
    background: linear-gradient(135deg, #fce7f3 0%, #f9a8d4 50%, #67e8f9 100%);
    padding: 60px 0 30px;
}

.footer-inner, .footer-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-logo {
    height: 50px;
    margin-bottom: 20px;
}

.footer-nav, .footer-links {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 30px;
}

.footer-sub {
    display: none; /* シンプルにまとめるため片方に統一 */
}

.footer-nav a, .footer-links a {
    font-size: 14px;
    color: var(--text-main);
    font-weight: 600;
}

.footer-nav a:hover, .footer-links a:hover {
    color: var(--primary-dark);
}

.footer-sns {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

.footer-sns a {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 50%;
    color: var(--text-main);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.footer-sns a:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-3px);
}

.copyright {
    font-size: 13px;
    color: var(--text-main);
    margin-bottom: 10px;
    font-weight: 500;
}

.footer-credit {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0.7;
}

.footer-credit:hover {
    opacity: 1;
    color: var(--primary-dark);
}

/* ===================================
   レスポンシブ（画面幅ごとの調整）
   =================================== */
@media (max-width: 1024px) {
    .news-grid, .news-sns .container {
        grid-template-columns: 1fr;
    }

    .sns-links {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .sns-title {
        margin-bottom: 0;
    }

    .sns-buttons {
        flex-direction: row;
    }

    .hero-character {
        opacity: 0.5;
    }

    .member-grid, .youtube-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .header-inner {
        padding: 12px 15px;
    }

    .nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background: white;
        padding: 20px;
        gap: 15px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }

    .nav.active {
        display: flex;
    }

    .template-credit, .social-links {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }

    .about-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-image {
        order: -1;
    }

    .about-image img {
        max-height: 350px;
    }

    .gallery-list, .member-grid, .youtube-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .member-grid {
        max-width: 400px;
        margin: 0 auto;
    }

    .news-item {
        flex-direction: column;
    }

    .news-image {
        width: 100%;
        aspect-ratio: 16/9;
    }

    .footer-nav, .footer-links {
        flex-wrap: wrap;
        gap: 20px;
    }

    .hero-character {
        display: none;
    }

    section {
        padding: 60px 0;
    }
}

@media (max-width: 480px) {
    .gallery-list, .member-grid, .youtube-grid {
        grid-template-columns: 1fr;
    }

    .hero-title, .hero-content h1 {
        font-size: 24px;
    }

    .section-title {
        font-size: 22px;
    }

    .sns-buttons {
        flex-direction: column;
    }

    .contact-form {
        padding: 20px;
    }
}

/* ===================================
   セキュリティ：選択・コピー禁止
   =================================== */
* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* ==========================================================
   【MESSAGE】大切なあなたへ セクションの最終調整（完全版）
   ========================================================== */

/* 1. YouTubeボタンの赤色設定をクリア（閉じカッコを修正しました！） */
.sns-btn.youtube {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #A55166 !important;
} /* 👈 ここに閉じカッコを補強しました！ */

/* 2. 【PC表示の時】横並びにして、上下の真ん中で綺麗に揃える */
#vision .news-grid {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important; /* これで上下中央になります */
    justify-content: space-between !important;
    width: 100% !important;
    gap: 50px !important;
}

/* 3. 【PC表示の時】文字の箱を縦いっぱいに広げて、完全に上下中央にする */
#vision .message-text-box {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* 縦の真ん中へ寄せます */
    line-height: 2 !important;
    font-size: 15px !important;
    color: var(--text-dark) !important;
}

/* 4. 【Connect with Me】のカードを麻里菜のお気に入りグラデーションにする */
#vision .sns-links {
    background: linear-gradient(135deg, #fdf8fb 0%, #fdf2f8 33%, #f7a3b1 100%
) !important;
    padding: 30px !important;
    border-radius: 20px !important;
    color: white !important;
    width: 100% !important;
    max-width: 360px !important;
}

/* 段落の隙間をお洒落に整えるお守り */
.message-text-box .msg-p-top {
    margin-bottom: 15px !important;
    font-weight: 500 !important;
    margin-top: 0 !important;
}
.message-text-box .msg-p-bottom {
    margin: 0 !important;
}

/* 5. 【スマホ・画面が狭い時】のレスポンシブ設定 */
@media (max-width: 768px) {
    #vision .news-grid {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 30px !important;
    }
    #vision .message-text-box {
        text-align: left !important;
        margin-bottom: 10px !important;
    }
    #vision .sns-links {
        max-width: 100% !important;
    }
}

/* 💡 消えちゃった左側の枠を、愛らしい薄ピンク半透明で完全に復活させる魔法 */
#vision .message-text-box {
    /* 👇 ここを薄ピンク（パステルピンク）の半透明に変更しました！ */
    background: rgba(253, 230, 237, 0.6) !important;
    
    padding: 30px !important;                          
    border-radius: 20px !important;                     
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important; 
    
    /* PCの時に右のグラデーションカードと同じ高さに見えるようにするお守り */
    align-self: stretch !important; 
}

/* スマホの時に文字の枠がカードとくっつきすぎないようにする優しさ */
@media (max-width: 768px) {
    #vision .message-text-box {
        margin-bottom: 20px !important;
    }
}

/* 💡 白いボタンの中の文字を、読みやすい濃いベリー色に復活させる魔法 */
#vision .sns-btn {
    color: #A55166 !important;
    font-weight: 600 !important; /* 文字を少し太くしてさらに読みやすくします */
    background-color: rgba(255, 255, 255, 0.9) !important; /* ボタン自体も綺麗な白に固定 */
}

/* カーソルが乗った（ホバーした）時も文字色をしっかりキープするお守り */
#vision .sns-btn:hover {
    background-color: #E2B4C1 !important;
    color: #A55166 !important;
}

/* ==========================================================
   ✨ ふわっとアニメーションの魔法（CSS編）
   ========================================================== */

/* 1. 動き出す前の姿（最初は透明で、少し下に下げて待機させておきます） */
.fade-in-target {
    opacity: 0;
    transform: translateY(60px); /* 💡 30pxから60pxに広げて、動きを2倍大きくしました */
    transition: opacity 1.5s ease, transform 1.5s ease; /* 💡 1秒から1.5秒にのばして、よりなめらかにしました */
}

/* 2. JavaScriptから合図（activeというクラス）をもらった後の姿 */
.fade-in-target.active {
    opacity: 1; /* くっきり表示 */
    transform: translateY(0); /* 元の正しい位置にスルッと浮き上がる */
}

/* ==========================================================
   背景色だけが横にビヨーンと伸びる魔法
   ========================================================== */

/* 1. 背景が伸びる土台（ここ自体は透明にしておきます） */
.slide-bg-only {
    position: relative; /* 内側に絶対配置を使うための準備 */
    background: transparent !important; 
}

/* 2. 【魔法の本体】ニセモノの背景（擬似要素）を作って、最初は横幅を0にしておきます */
.slide-bg-only::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;          /* 💡 最初は横幅をゼロにして隠しておく */
    height: 100%;
    /* 麻里菜のお気に入りのグラデーションを設定 */
    background: linear-gradient(135deg, #F7DAE7 0%, #E2B4C1 33%, #D38C9D 66%, #A55166 100%);
    border-radius: 20px;
    z-index: 1;        /* 文字の後ろに回り込ませる設定 */
    transition: width 1.0s ease-in-out; /* 1秒かけて横に伸びるお守り */
}

/* 3. JavaScriptから合図（active）をもらったら、横幅を100%に伸ばす！ */
.slide-bg-only.active::before {
    width: 100%;       /* 💡 合図がきたら一気に右まで伸ばす！ */
}

/* 4. 中身の文字や画像が、伸びてきた背景に消されないようにするお守り */
.slide-bg-only > * {
    position: relative;
    z-index: 2;        /* 背景よりも手前に表示させます */
}

/* ==========================================================
   ✨ メンバー紹介：文字エリアだけをピンポイントで白くする魔法
   ========================================================== */

/* 1. カード全体は透明にして、イラストの背景をピンクに馴染ませます */
.member-card {
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden; /* 角丸を綺麗にくり抜くお守り */
}

/* 2. 【ここが本命！】下半分の文字が入るエリアだけを真っ白にします */
.member-info {
    background: #ffffff !important; /* 💡 ここだけをホワイトに塗る */
    padding: 20px 15px !important;  /* 💡 文字の周りに心地よい余白を作るお守り */
    border-radius: 0 0 15px 15px;   /* 💡 下側の角だけを優しく丸める設定 */
    text-align: center;
}

/* ==========================================================
   💖 ここから下は「麻里菜の世界観」を完成させる最終魔法
   ========================================================== */

/* -------------------------------------------
   ✨ トップ画面：SCROLL文字＆矢印
   ------------------------------------------- */
.hero-scroll, .scroll-text, [class*="scroll"] {
    color: #ffffff !important;
    font-weight: 600 !important;
    letter-spacing: 0.2em !important;
    margin-bottom: 30px !important;
    text-shadow: -0.6px -0.6px 0 #cb5174, 0.6px -0.6px 0 #cb5174, -0.6px 0.6px 0 #cb5174, 0.6px 0.6px 0 #cb5174, -0.6px 0px 0 #cb5174, 0.6px 0px 0 #cb5174, 0px -0.6px 0 #cb5174, 0px 0.6px 0 #cb5174 !important;
}
.hero-arrow svg, .hero-arrow path, .scroll-arrow, [class*="arrow"] svg {
    color: #ffffff !important;
    filter: drop-shadow(-0.6px -0.6px 0 #cb5174) drop-shadow(0.6px -0.6px 0 #cb5174) drop-shadow(-0.6px 0.6px 0 #cb5174) drop-shadow(0.6px 0.6px 0 #cb5174) !important;
}

/* -------------------------------------------
   ✨ 2つのSNSカード（メッセージ横＆公式SNSの共通デザイン）
   ------------------------------------------- */
/* 「Connect with Me」の文字色 */
.sns-title, .sns-section .sns-title {
    color: #cb5174 !important;
    font-size: 20px !important;
    font-weight: bold !important;
    text-align: center !important;
    margin-bottom: 25px !important;
}
/* 白いボタンたちのデザインと動き */
.sns-links .sns-buttons, .sns-section .sns-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}
.sns-links .sns-btn, .sns-section .sns-btn {
    color: #cb5174 !important;
    background: #ffffff !important;
    text-align: center !important;
    padding: 12px 20px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important;
    transition: transform 0.3s ease !important;
}
.sns-links .sns-btn:hover, .sns-section .sns-btn:hover {
    transform: translateY(-2px) !important;
}

/* -------------------------------------------
   👑 公式SNSカード（完全独立・型崩れ防止）
   ------------------------------------------- */
.sns-section .sns-links {
    max-width: 400px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 40px 24px !important;
    box-sizing: border-box !important;
    background: linear-gradient(135deg, #fdf8fb 0%, #fdf2f8 33%, #f7a3b1 100%) !important;
    border-radius: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
.sns-section .sns-buttons {
    align-items: center !important;
    width: 100% !important;
}
.sns-section .sns-btn {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 280px !important;
    margin: 0 auto !important;
}
/* スマホサイズの時のレイアウト */
@media (max-width: 991px) {
    .sns-section .sns-links { max-width: 100% !important; }
    .news-sns .container { display: flex !important; flex-direction: column !important; gap: 50px !important; }
    .news-section, .sns-section { width: 100% !important; max-width: 100% !important; }
}

/* -------------------------------------------
   ✨ フッター＆FAQ
   ------------------------------------------- */
/* フッターの背景をピンクグラデーションに */
footer, .footer, #footer {
    background: linear-gradient(135deg, #fdf8fb 0%, #fdf2f8 33%, #f7a3b1 100%) !important;
}
.footer-inner, #footer .footer-inner, footer .container {
    background: transparent !important;
    background-image: none !important;
}
/* FAQの白いボタン化と丸み */
.faq-question {
    background: #ffffff !important;
    color: #cb5174 !important;
    padding: 20px 25px !important;
    border-radius: 15px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02) !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    text-align: left !important;
}
.faq-question svg, .faq-icon {
    color: #cb5174 !important;
    flex-shrink: 0 !important;
}
.faq-question svg { margin-right: 15px !important; }
.faq-icon { margin-left: auto !important; }

/* ==========================================================
   💖 大切なあなたへ（VISION）エリアの完全復活＆シンクロ魔法
   ========================================================== */

/* 1. PC表示の時の「横並びレイアウト」を綺麗に復活させます */
#vision .news-grid {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 50px !important;
}

/* 2. 左側のメッセージ枠（薄ピンク半透明）の優しいデザインを復活させます */
#vision .message-text-box {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    background: rgba(253, 230, 237, 0.6) !important;
    padding: 40px 30px !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    line-height: 2 !important;
    font-size: 15px !important;
    color: var(--text-dark) !important;
    align-self: stretch !important;
}
#vision .message-text-box .msg-p-top {
    margin-bottom: 15px !important;
    font-weight: 500 !important;
    margin-top: 0 !important;
}

/* 3. 右側のSNSカードを、下の「公式SNS」と完全に同じデザインにシンクロさせます */
/* まず、邪魔をしていた古い背景アニメーションを強制終了！ */
#vision .sns-links.slide-bg-only {
    background: transparent !important;
}
#vision .sns-links.slide-bg-only::before {
    display: none !important; 
}

/* 下のカードと全く同じ「お気に入りグラデーション」と「形」を適用します */
#vision .sns-links {
    max-width: 400px !important;
    width: 100% !important;
    padding: 40px 24px !important;
    box-sizing: border-box !important;
    background: linear-gradient(135deg, #fdf8fb 0%, #fdf2f8 33%, #f7a3b1 100%) !important;
    border-radius: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
    z-index: 2 !important;
}

/* 💡 ボタンにカーソルを合わせた時の「薄いピンク」の魔法を追加！ */
#vision .sns-btn:hover {
    background: #fff5f7 !important; /* 💡 ふんわり可愛い薄いピンク色に染める */
    color: #cb5174 !important;      /* 💡 文字色はディープピンクのまま綺麗に保つ */
    transform: translateY(-2px) !important; /* 💡 ついでに少しだけフワッと浮き上がらせるよ */
}

#vision .sns-btn {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 280px !important;
    margin: 0 auto !important;
    
    /* 下のカードと同じベリー色の文字＆白いボタンを強制上書き！ */
    color: #cb5174 !important;
    background: #ffffff !important;
    padding: 12px 20px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important;
}

/* 5. スマホで見たときも綺麗に縦に並ぶようにするお守り */
@media (max-width: 768px) {
    #vision .news-grid {
        flex-direction: column !important;
        gap: 30px !important;
    }
    #vision .message-text-box {
        margin-bottom: 20px !important;
    }
    #vision .sns-links {
        max-width: 100% !important;
    }
}

/* ==========================================================
   ✨ 【最終奥義】左右の枠を物理的に全く同じサイズにする魔法
   ========================================================== */

/* 1. 左の「新着情報」の枠（土台）と右の「公式SNS」の枠を同じサイズに */
.news-section, 
.sns-section {
    width: 400px !important;
    max-width: 400px !important;
    padding: 0 !important; /* 💡 余計な余白をゼロにします */
    margin: 0 !important;
}

/* 2. 中身の「ピンクの枠」自体にも、左と右で共通のサイズルールを強制 */
.news-list, 
.sns-links {
    width: 400px !important; /* 💡 中身も絶対に400px！ */
    max-width: 400px !important;
    margin: 0 auto !important;
    padding: 30px !important; /* 左右の余白を統一 */
    box-sizing: border-box !important;
}

/* 3. 左右を中央寄せでピッタリ並べる */
.news-sns .container {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 40px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* ==========================================================
   ✨ 3つのカテゴリー別記事を美しく横並びにする魔法
   ========================================================== */

/* 1. 全体を綺麗に3等分の横並びにするグリッド命令 */
.category-posts-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 💡 これで3つの箱が完全に同じ幅で並びます */
    gap: 30px !important; /* 箱同士の心地よいすき間 */
    align-items: start !important;
    width: 100% !important;
}

/* 2. それぞれのニュースリストの幅を自動で馴染ませるお守り */
.category-posts-grid .news-section {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
}
.category-posts-grid .news-list {
    width: 100% !important;
    max-width: 100% !important;
}

/* 3. 切り離して下に置いた「公式SNS」を、これまで通り中央に可愛く配置する設定 */
.sns-independent-section .sns-section {
    max-width: 400px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* 📱 【スマホ表示】の時は、窮屈にならないように自動で綺麗な1列の縦並びに切り替えます */
@media (max-width: 991px) {
    .category-posts-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
}

/* ==========================================================
   ✨ 3つのカテゴリーエリアの背景をホワイトにする魔法
   ========================================================== */

/* 1. 3つのカテゴリーの記事を包む枠（座布団）を真っ白にします */
.category-posts-grid .news-list {
    background: #ffffff !important;
    border: 1px solid rgba(244, 114, 182, 0.2) !important; 
    box-shadow: 0 4px 15px rgba(244, 114, 182, 0.05) !important; 
}

/* 2. 【おまけ】もし3並びのセクション全体の背景も白くしたい場合は、ここが発動します */
.category-news-section {
    background: #ffffff !important;
}

.sns-independent-section {
    background: #ffffff !important;
}

/* ==========================================================
   ✨ 今日の1枚占いをスマホで綺麗に「1列」に並べる魔法
   ========================================================== */

/* 📱 スマホ（画面が狭いとき）専用のルール */
@media (max-width: 768px) {
    .member-grid {
        grid-template-columns: 1fr !important; /* 💡 1列（1つずつ）に並べるという強力な指示！ */
        max-width: 320px !important;           /* 💡 カードが画面いっぱいに広がりすぎないよう、上品なサイズに固定します */
        margin: 0 auto !important;             /* 画面の真ん中に美しく配置します */
        gap: 25px !important;                  /* カードとカードの間の隙間を少し整えます */
    }
}



/* ==========================================================
   ✨ スマホの時に記事の画像を「横長」に美しく見せる魔法
   ========================================================== */

/* 📱 スマホ（画面幅が狭いとき）専用のルール */
@media (max-width: 768px) {
    /* 1. 画像と文字を「縦並び」に切り替えます */
    .category-posts-grid .news-item {
        display: flex !important;
        flex-direction: column !important; /* 💡 ここが縦並びにする魔法！ */
        padding: 15px !important;
    }

    /* 2. 画像を横幅いっぱい（100%）に広げて、綺麗な横長（16:9）にします */
    .category-posts-grid .news-image {
        width: 100% !important;           /* 💡 横幅いっぱいにドーンと広げる */
        aspect-ratio: 16 / 9 !important;  /* 💡 映画みたいな綺麗な横長の比率 */
        margin-bottom: 15px !important;   /* 下の文字との間に心地よい隙間を */
    }

    /* 3. 画像が枠の中で歪まないように、綺麗に切り抜いて収めるお守り */
    .category-posts-grid .news-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;     /* 💡 歪ませずに綺麗に枠を埋める */
    }

    /* 4. 文字も左端からしっかり読めるように整えます */
    .category-posts-grid .news-content {
        width: 100% !important;
    }
}

/* ==========================================================
   ✨ 記事カードに「ふわっと浮かび上がる」魔法を復活させる
   ========================================================== */

/* 1. なめらかに動くための準備 */
.category-posts-grid .news-item {
    transition: all 0.3s ease !important; /* 0.3秒かけて優しく動くお守り */
}

/* 2. カーソルが乗ったとき（ホバー時）の動き */
.category-posts-grid .news-item:hover {
    transform: translateY(-8px) !important; /* 上に8pxふわっと浮く */
    box-shadow: 0 10px 25px rgba(244, 114, 182, 0.15) !important; /* ピンクの優しい影を落とす */
    background: #ffffff !important; /* 背景の白さをキープ */
}

/* ==========================================================
   ✨ フッターメニューを綺麗に並べる魔法
   ========================================================== */
.footer-nav {
    display: flex !important;
    justify-content: center !important; /* 真ん中に寄せます */
    gap: 30px !important;               /* メニュー同士の心地よい隙間 */
    margin-bottom: 20px !important;     /* コピーライトとの間の隙間 */
    flex-wrap: wrap !important;         /* 📱 スマホの画面が狭いときは自動で綺麗に折り返すお守り */
}

.footer-nav a {
    color: #cb5174 !important;          /* 文字色はお気に入りのディープピンク */
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: opacity 0.3s ease !important; /* ふわっとした動きの準備 */
}

/* マウスが乗ったとき（タップしたとき）にフワッと優しく光る設定 */
.footer-nav a:hover {
    opacity: 0.6 !important;
}

/* ==========================================================
   ✨ フッターをプロ仕様にする魔法
   ========================================================== */

.custom-footer-content {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 40px 20px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    color: #695853 !important; /* 麻里菜好みの落ち着いた色 */
    font-family: 'Shippori Mincho B1', serif !important;
}

/* 左側エリア */
.footer-left { width: 60% !important; }
.footer-logo { width: 200px !important; margin-bottom: 20px !important; }
.footer-menu a { margin-right: 20px !important; color: #695853 !important; text-decoration: none !important; }

/* 右側エリア（縦線付き） */
.footer-right {
    width: 35% !important;
    padding-left: 30px !important;
    border-left: 1px solid #695853 !important; /* 💡 これが中央の縦線！ */
    font-size: 12px !important;
    line-height: 1.6 !important;
}

/* 📱 スマホの時は縦並びにする */
@media (max-width: 768px) {
    .custom-footer-content { flex-direction: column !important; }
    .footer-left, .footer-right { width: 100% !important; border: none !important; padding: 0 !important; }
}

/* ==========================================================
   ✨ 画像とフッターを完璧に一体化させる最強の魔法
   ========================================================== */
.full-width-image {
    width: 100% !important;
    margin-bottom: -200px !important; 
    position: relative !important;
    z-index: 2 !important;
    pointer-events: none !important; 
}

.full-width-image img {
    width: 100% !important;
    display: block !important;
    /* 💡 40%を「70%」に変更！これで霧が下の方にだけかかるようになるよ */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%) !important;
            mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%) !important;
}

/* --- フッターのグラデーション方向を上から下に変更 --- */
.footer {
  /* 💡 whiteの後ろに「30%」を足す！これで上部30%が真っ白になるよ */
  background-image: linear-gradient(to bottom, white 55%, #f6c7c7 100%) !important;
}

/* ==========================================================
   ✨ お店の画像とフッター文字の間の空間を広げる魔法
   ========================================================== */
.custom-footer-content {
    padding-top: 150px !important; /* 💡 この数字を大きくするほど、文字が下がって空間が広がるよ */
}

/* ==========================================================
   ✨ フッターの縦線を消す魔法
   ========================================================= */
.footer-left {
    border-right: none !important; /* もし、border-right で作られていた場合さ */
}
.footer-right {
    border-left: none !important; /* もし、border-left で作られていた場合さ */
}

/* ==========================================================
   ✨ ページ全体の横の余白（マージン）を少し広げる魔法
   ========================================================= */
.container, /* Cocoonなど、多くのテーマで使われているコンテナクラスさ */
.wrapper    /* 全体を囲むwrapperクラスさ */
{
    padding-left: 40px !important;  /* 💡 40px（左）と */
    padding-right: 40px !important; /* 40px（右）の余白を足すよ！ */
}

/* ==========================================================
   ✨ 一番下の権利表記（コピーライト）の縦の空間を広げる魔法
   ========================================================== */
.footer-right {
    margin-top: 30px !important; /* 💡 上のメニューたちとの空間を広げる */
}

.copyright-text {
    margin-bottom: 15px !important; /* 💡 「当サイトの〜」と「©CRYSTAL WISDOM」の間の空間を広げる */
    line-height: 1.8 !important; /* 💡 ついでに文字の行間も少しフワッと読みやすくしておくね */
}

/* ==========================================================
   ✨ 文字全体をさらに下へ下げる魔法
   ========================================================== */
.custom-footer-content {
    padding-top: 250px !important; /* 💡 この数字を大きくするほど、文字全体が下に移動するよ */
}

/* ==========================================================
   ✨ ① ヒーローセクションに白い霧のレイヤーを追加
   ========================================================== */
.ヒーローセクションのクラス名 {
    position: relative !important; /* 💡 魔法をかける場所を確定させるお守り */
    margin-bottom: 0 !important;   /* 💡 下のサロンカード（2枚目）との隙間をピシッと埋める */
}

.ヒーローセクションのクラス名::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important; /* 💡 下から霧を発生させる */
    left: 0 !important;
    width: 100% !important;
    height: 30% !important; /* 💡 下からどれくらいの高さを霧で覆うか（例：30%） */
    /* 💡 上（透明）から下（白）に向かって、霧のように溶け込むグラデーション */
    background: linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0) 100%) !important;
    z-index: 1 !important; /* 💡 霧を背景の上に、文字の下に配置する */
}

/* ==========================================================
   ✨ ② 残したい文字と星を霧の上に配置してくっきり見せる
   ========================================================== */
/* 💡 ここに「Find below...」の文字や星を囲んでいるクラス名を指定する */
.ヒーロー内のコンテンツクラス,
.回転する星のクラス
{
    position: relative !important;
    z-index: 2 !important; /* 💡 霧（z-index: 1）よりも上に配置して、くっきり見せる */
}

/* ==========================================================
   ✨ 今度こそ完全浄化！背景と隙間をすべて真っ白にする魔法
   ========================================================== */
/* 1. サイトの大元の床（裏側）のピンクを白に上書き */
body,
#content,
#content-in,
#main,
.main {
    background-color: #ffffff !important;
}

/* 2. MESSAGEセクションと、その中にある見えない箱をすべて白に */
section#vision,
section#vision.news,
section#vision .container,
section#vision .news-in {
    background: #ffffff !important;
    background-color: #ffffff !important;
    margin-top: 0 !important; /* 💡 上のヒーローセクションとの隙間を消滅させる */
}

/* 3. 念のため、ヒーローセクションの下の隙間もゼロに */
.hero {
    margin-bottom: 0 !important;
}

/* ==========================================================
   ✨ どこでも使える！シンプル枠線ボタン（#cb5174）
   ========================================================== */

.crystal-simple-btn {
    display: inline-block !important;
    /* 💡 paddingを小さくして、ボタン自体をキュッとコンパクトに */
    padding: 8px 30px !important; 
    border: 2px solid #cb5174 !important;
    border-radius: 50px !important;
    color: #cb5174 !important;
    background: transparent !important;
    font-weight: bold !important;
    text-decoration: none !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    font-family: 'Shippori Mincho B1', serif !important;
    
    /* 💡 ボタンを中央に配置するお守り */
    margin: 10px auto !important; 
}

/* 💡 ボタンの位置 */
.btn-wrapper {
    text-align: center !important;
}


/* マウスを乗せた時の変化 */
.crystal-simple-btn:hover {
    background: #cb5174 !important;       /* 背景がほんのりピンクに */
    color: #ffffff !important;            /* 文字は白抜きに */
    transform: translateY(-2px) !important;
}

/* ==========================================================
   ✨ 完璧なバランス！「セミボールド」の洗練された魔法
   ========================================================== */
a.crystal-simple-btn,
.btn-wrapper a.crystal-simple-btn,
.crystal-simple-btn span {
    /* 💡 フォントはそのまま！ */
    font-family: "Varela Round", "Quicksand", "Nunito", "Arial Rounded MT Bold", "Hiragino Maru Gothic ProN", sans-serif !important;
    
    /* 💡 【今回の肝】「600」という数字で、太すぎず華奢すぎない洗練されたラインにする */
    font-weight: 500 !important; 
    
    /* 💡 文字の隙間はそのまま！ */
    letter-spacing: 0.15em !important; 
    
    /* 💡 大文字化もそのまま！ */
    text-transform: uppercase !important;
}

/* ==========================================================
   ✨ ヒーロー画像をスマホでも縮ませずダイナミックに魅せる魔法
   ========================================================== */
.hero {
    /* 💡 画像を縮めるのではなく「はみ出た部分を切り抜く」ようにして、常に画面いっぱいに覆い尽くす！ */
    background-size: cover !important;
    
    /* 💡 切り抜かれる時、画像の「ど真ん中」が常に画面のセンターに残るようにする！ */
    background-position: center center !important;
    
    /* 💡 スマホで画面が細くなっても、縦の長さを「最低でもこれくらい」キープしてペチャンコにさせない！ */
    min-height: 450px !important; 
}

/* ==========================================================
   ✨ PCでもスマホでも！ヒーロー画像を完璧にダイナミックに魅せる魔法
   ========================================================== */
.hero {
    /* 💡 画像をペチャンコにせず、はみ出た部分を自動で美しく切り抜く最強の呪文！ */
    background-size: cover !important;
    
    /* 💡 常に画像の「ど真ん中」が画面のセンターにくるようにする */
    background-position: center center !important;
    
    /* 💡 スマホで画面が細くなっても、縦の長さをしっかりキープする！ */
    min-height: 500px !important; 
    
    /* 💡 背景が変に繰り返されないようにするお守り */
    background-repeat: no-repeat !important;
}

/* ==========================================================
   ✨ 特定のページ（no-stars）だけお星様を消し去る魔法
   ========================================================== */
.no-stars::before {
    display: none !important; /* 💡 合言葉がある時だけ、星を完全に非表示にする！ */
}

/* ==========================================================
   ✨ 【完全版】下の白い枠と1ミリも狂わず同じサイズにする魔法
   ========================================================== */

/* 💡 パソコン版：大きな画面でも画像と文字が離れすぎないように中央に寄せる */
.pc-image-right {
    display: flex !important;
    flex-direction: row !important; /* 画像が左、文字が右の順番に固定 */
    align-items: center !important;
    justify-content: center !important;
    max-width: 1100px !important;  /* 💡 下のセクションと同じ、心地よい全体の横幅さ */
    margin: 0 auto !important;
    gap: 50px !important;           /* 画像と文字の間の美しい隙間 */
}

/* 💡 【超重要】白い箱のサイズ制限を「解除」して、下と全く同じ幅に広げる！ */
.pc-image-right .about-image {
    width: 100% !important;
    max-width: 480px !important;    /* 💡 下の白い枠と完全にシンクロする黄金のサイズさ！ */
    flex-shrink: 0 !important;      /* 文字に押されて枠が潰れるのを防ぐお守り */
}

/* 💡 白い箱の中にある「実際の画像」も、枠いっぱいに美しくフィットさせる */
.pc-image-right .about-image img {
    width: 100% !important;
    max-width: 100% !important; 
    height: auto !important;
    display: block !important;
}

/* 💡 右側にある文字の中身を、すべて理想の【右寄せ】にする */
.pc-image-right .about-info,
.pc-image-right .about-name {
    text-align: right !important;
}

/* 💡 ボタンも右側にピタッと美しく引き寄せる */
.pc-image-right .btn-wrapper {
    text-align: right !important;
}

/* 💡 スマホ版：画面が狭い時は、自動で「画像が上、文字が下」の可愛い中央揃えに戻す優しい気配り */
@media (max-width: 768px) {
    .pc-image-right {
        flex-direction: column !important; /* 縦並びに戻す */
    }
    .pc-image-right .about-image {
        max-width: 100% !important;        /* スマホの時は横幅いっぱいに広げる */
    }
    .pc-image-right .about-info,
    .pc-image-right .about-name,
    .pc-image-right .btn-wrapper {
        text-align: center !important;     /* スマホでは中央揃え */
    }
}

/* ==========================================================
   ✨ 「賢く扱う」の文字を、上の写真の左端とピッタリ揃える魔法
   ========================================================== */

/* 💡 セクション全体を中央に寄せる */
#salon .about-content {
    display: flex !important;
    flex-direction: row !important; /* 画像を右、文字を左 */
    align-items: center !important;
    justify-content: center !important;
    max-width: 1100px !important;  /* 上のセクションと合わせた全体の横幅 */
    margin: 0 auto !important;
    gap: 50px !important;           /* 画像と文字の間の美しい隙間 */
}

/* 💡 画像が入っている白い箱のサイズ（上と完全に同じ） */
#salon .about-content .about-image {
    width: 100% !important;
    max-width: 480px !important;   
    flex-shrink: 0 !important;
}

/* 💡 箱の中にあるホテルの画像を美しくフィットさせる */
#salon .about-content .about-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* 💡 セクション全体を中央に寄せつつ、もっとお互いを引き寄せる */
#salon .about-content {
    display: flex !important;
    flex-direction: row !important; /* 画像を右、文字を左 */
    align-items: center !important;
    
    /* 👇 【最大の変更ポイント】全体の横幅を1100pxから「960px」にキュッと絞るさ！ */
    justify-content: center !important;
    max-width: 1300px !important;  
    margin: 0 auto !important;
    
    /* 👇 画像と文字の間の隙間も「30px」に狭めて、もっと近くに寄り添わせるよ */
    gap: 100px !important;           
}

/* 💡 スマホ版：画面が狭い時は、自動でいつもの可愛い縦並びに戻す優しい気配り */
@media (max-width: 768px) {
    #salon .about-content {
        flex-direction: column !important; /* 縦並びに戻す */
    }
    #salon .about-content .about-image {
        max-width: 100% !important;
    }
    #salon .about-content .about-info {
        text-align: center !important;     /* スマホでは中央揃え */
    }
}