/* ==========================================================================
   ▼▼▼▼ 【修正版】左右から「ぬっ」と出てくるアニメーション ▼▼▼▼
   ========================================================================== */

/* 1. アニメーションの初期状態（透明＆少し左右にズラす） */
.choice_wrap .choice_item {
    opacity: 0 !important;
    /* はみ出しすぎて横スクロールが出ないよう、ズラす幅を50pxに微調整 */
    transition: opacity 1.2s ease-out, transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* 奇数番目は左にズラす */
.choice_wrap .choice_item:nth-of-type(odd) {
    transform: translateX(-50px) !important;
}

/* 偶数番目は右にズラす */
.choice_wrap .choice_item:nth-of-type(even) {
    transform: translateX(50px) !important;
}

/* 2. JSがセンサーで感知して .is-animated が付いた時の状態 */
.choice_wrap .choice_item.is-animated {
    opacity: 1 !important;           /* 完全に表示！ */
    transform: translateX(0) !important; /* 定位置にピタッと戻る！ */
}
/* 丸ゴシック体（M PLUS Rounded 1c）の読み込み */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700&display=swap');
@charset "UTF-8";

/* ==========================================================================
   Theme Name: Tococa
   Description: Cleaned & Refactored Version
   ========================================================================== */

/* --- Fonts & Imports --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;700;900&display=swap');
@import "css/sanitize.css";

/* ==========================================================================
   1. RESET & BASE STYLES
   ========================================================================== */
body, div, p, ul, ol, dl, form, table, fieldset, img, h1, h2, h3, h4, h5, h6 { margin: 0; border: 0; padding: 0; }
em, address { font-style: normal; }
li { list-style: none; }
table { border-collapse: collapse; }
img { vertical-align: bottom; width: 100%; }
audio, canvas, iframe, img, svg, video { vertical-align: middle; }
fieldset { border: 0; margin: 0; padding: 0; }
textarea { resize: vertical; }
html { scroll-behavior: revert; }

/* --- Typography & Base Colors (Merged with JANE Style) --- */
body {
    font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif !important;
    font-weight: normal;
    color: #444444 !important; /* 洗練されたダークグレー */
    line-height: 2.2;
    font-size: 13px;
    letter-spacing: 0.08em;
}

@media (min-width: 1280px) {
    body { font-size: 14px; line-height: 2.4; }
}

/* Font Classes */
.yumin, .yumindb, .yuminl, .optima, .lb, .pd, .scrolldown span, .fixed-bnr .fixed-bnr-inner a span {
    font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif !important;
}

/* Link Styles */
a { outline: 0; color: #000000; text-decoration: none; transition: 0.5s; }
a:hover { text-decoration: none; opacity: 0.75; }
a[href^="tel:"] { pointer-events: initial; }

/* Utility Classes */
.clear { clear: both; }
.block { display: block; }
.inline { display: inline; }
.clearfix { *zoom: 1; }
.clearfix:after { content: ""; display: block; visibility: hidden; clear: both; height: 0.1px; font-size: 0.1em; line-height: 0; }
.hidden { display: none !important; visibility: hidden; }
.left { float: left; }
.right { float: right; }
.align-right { text-align: right; }
.align-left { text-align: left; }
.align-center { text-align: center; }

/* Layout Utilities */
.pc-area { display: none; }
@media (min-width: 768px) { .pc-area { display: block; } }
.sp-area { display: block; }
@media (min-width: 768px) { .sp-area { display: none; } }
.new-line { display: block; }
@media (min-width: 768px) { .new-line { display: none; } }

.inner { padding: 0 15px; position: relative; max-width: 1200px; margin-left: auto; margin-right: auto; }
@media (min-width: 768px) { .inner { padding: 0 25px; } }
@media (min-width: 1280px) { .inner { padding: 0; } }

.flex { display: flex; justify-content: space-evenly; align-items: center; flex-wrap: wrap; }

/* Color & Background Utilities */
.light { font-weight: 300; }
.medium { font-weight: 500; }
.bold { font-weight: 700; }
.white { color: #666363; }
.black { color: #474a4d; }
.blue { color: #adadad; }
.bg-white { background-color: #ffffff; }
.bg-black { background-color: #474a4d; }
/* Modified to match JANE style */
.bg-beige, .bg-gray { background-color: #e1d5e1 !important; } 
.shadow { box-shadow: none !important; }
.sepia { position: relative; filter: contrast(50%) brightness(120%) saturate(100%) sepia(35%); }

/* Image Effects */
.zoomIn img { transform: scale(1); transition: 0.3s ease-in-out; }
.zoomIn a:hover img { transform: scale(1.1); }


/* ==========================================================================
   2. ANIMATIONS
   ========================================================================== */
.animate__animated.fadeup { animation-name: fadeup; animation-duration: 2s; opacity: 0; }
@keyframes fadeup { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } }

.animate__animated.fadedown { animation-name: fadedown; animation-duration: 2s; opacity: 0; }
@keyframes fadedown { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } }

.animate__animated.fadeleft { animation-name: fadeleft; animation-duration: 2s; opacity: 0; }
@keyframes fadeleft { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } }

.animate__animated.faderight { animation-name: faderight; animation-duration: 2s; opacity: 0; }
@keyframes faderight { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } }

@keyframes PageAnimeAppear { 0% { opacity: 0; } 100% { opacity: 1; } }

/* Opening Animation (Letter by Letter) */
#opening-mask {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #ffffff; z-index: 99999;
    display: flex; justify-content: center; align-items: center; pointer-events: none;
}
.opening-logo { overflow: hidden; }
.opening-text {
    display: flex; font-family: "Noto Serif JP", serif; font-size: 32px;
    letter-spacing: 0.1em; color: #222222; margin: 0;
}
.opening-text span {
    display: inline-block; opacity: 0; transform: translateY(30px);
    animation: openingLetter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: calc(0.1s * var(--i));
}
@keyframes openingLetter {
    0% { opacity: 0; transform: translateY(30px); filter: blur(3px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
#opening-mask.is-loaded { animation: maskOut 0.8s ease forwards; animation-delay: 2.4s; }
@keyframes maskOut { 0% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }


/* ==========================================================================
   3. HEADER & NAVIGATION
   ========================================================================== */
.header-container { position: relative; z-index: 3; }

/* Transparent to White Header Logic (Applied to All Pages) */
.header-container header .site-header {
    display: flex; justify-content: flex-start; align-items: center;
    min-height: 60px; padding: 0 15px; position: fixed; top: 0; left: 0; width: 100%;
    background: transparent !important; transition: all 0.3s ease !important;
}
.header-container header .site-header.is-scrolled {
    background-color: #ffffff !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12) !important;
}

/* Logo */
.header-container header .site-header .site-logo { margin-right: 1rem; }
.header-container header .site-header .site-logo img { width: 62px; width: 16.5333vw; }
@media (min-width: 768px) { .header-container header .site-header .site-logo img { width: 76px; width: 9.8958vw; } }
@media (min-width: 1280px) { .header-container header .site-header .site-logo img { width: 90px; } }

/* Site Title */
.header-container header .site-header .title { position: relative; line-height: 1; z-index: 2; }
.header-container header .site-header .title a { letter-spacing: 0.05em; font-weight: normal; font-size: 25px; font-size: 6.666vw; color: #ffffff; } /* Default white */
@media (min-width: 768px) { .header-container header .site-header .title a { font-size: 30px; font-size: 3.906vw; } }
@media (min-width: 1280px) { .header-container header .site-header .title a { font-size: 36px; } }
/* Scrolled Title Color */
.header-container header .site-header.is-scrolled .title a { color: #666363 !important; }
/* Scrolled Logo Image: 白ロゴ→暗色に切り替え */
.header-container header .site-header .title a img {
    transition: filter 0.3s ease;
}
.header-container header .site-header.is-scrolled .title a img {
    filter: brightness(0) !important;
}

/* Burger Menu */
.header-container header .site-header .menu-box .navToggle {
    display: block; position: fixed; right: 10px; top: 10px;
    width: 44px; height: 38px; cursor: pointer; z-index: 10001; text-align: center;
}
.header-container header .site-header .menu-box .navToggle span {
    display: block; position: absolute; width: 35px;
    border-bottom: solid 2px #ffffff; transition: 0.35s ease-in-out; left: 5px;
}
.header-container header .site-header.is-scrolled .menu-box .navToggle span { border-color: #666363 !important; }
.header-container header .site-header .menu-box .navToggle span:nth-child(1) { top: 8px; }
.header-container header .site-header .menu-box .navToggle span:nth-child(2) { top: 18px; width: 18px; left: 13px; }
.header-container header .site-header .menu-box .navToggle span:nth-child(3) { top: 28px; }
.header-container header .site-header .menu-box .navToggle.active span:nth-child(1) { top: 18px; left: 5px; transform: rotate(-45deg); }
.header-container header .site-header .menu-box .navToggle.active span:nth-child(2),
.header-container header .site-header .menu-box .navToggle.active span:nth-child(3) { top: 18px; transform: rotate(45deg); }

/* Global Navigation */
.header-container header .site-header .globalMenu {
    position: fixed; z-index: 10000; top: 0; right: 0;
    background: #f8f4e6; color: #666363; text-align: left;
    transform: translateX(100%); transition: all 0.6s;
    width: 100%; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch;
}
@media (min-width: 768px) { .header-container header .site-header .globalMenu { width: 375px; } }
.header-container header .site-header .globalMenu ul { background: rgba(255, 255, 255, 0.75); margin: 0 auto; padding: 60px 15px 15px; }
.header-container header .site-header .globalMenu ul li { list-style-type: none; padding: 0; width: 100%; border-bottom: 1px solid #474a4d; }
.header-container header .site-header .globalMenu ul li:first-child { border-top: 1px solid #474a4d; }
.header-container header .site-header .globalMenu ul li:last-child { padding-bottom: 0; }
.header-container header .site-header .globalMenu ul li a {
    position: relative; display: block; width: 100%; height: 100%;
    color: #666363; padding: 1em 0; font-size: 15px;
}
.header-container header .site-header .globalMenu ul li a::after {
    content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px;
    background: #adadad; transition: all 0.3s; transform: scale(0, 1); transform-origin: center top;
}
.header-container header .site-header .globalMenu ul li a span { margin-left: 1em; font-size: 11px; }
.header-container header .site-header .globalMenu ul li a i { margin-right: 8px; }
.header-container header .site-header .globalMenu ul li:hover a { color: #adadad; }
.header-container header .site-header .globalMenu.active { transform: translateX(0%); }


/* ==========================================================================
   4. MAIN VISUAL (MV) & HERO AREA
   ========================================================================== */
/* Common MV Settings */
.mv { margin-top: 0 !important; margin-bottom: 0; } /* Removed top margin for full screen effect */
@media (min-width: 768px) { .mv { margin-bottom: 2rem; } }
@media (min-width: 1280px) { .mv { margin-bottom: 5rem; } }

.mv #header { position: relative; text-align: center; color: #ffffff; }
.mv #header #loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: bold; }
.mv #header #loading.disappear { display: none; }

/* MV Title */
.mv #header .mv_title {
    position: absolute; z-index: 2; top: 50%; left: 50%;
    transform: translateY(-50%) translateX(-50%); color: #ffffff;
    text-shadow: 0 0 15px #666; line-height: 2; font-weight: normal; letter-spacing: 0.05em;
    width: 100%; font-size: 22px; font-size: 5.866vw;
}
@media (min-width: 768px) { .mv #header .mv_title { font-size: 29px; font-size: 3.776vw; } }
@media (min-width: 1280px) { .mv #header .mv_title { font-size: 36px; } }
.mv #header .mv_title span {
    display: inline-block; background-color: rgb(177 177 177 / 60%);
    line-height: 1; padding: 10px; letter-spacing: 0.2em; opacity: 0;
}

/* Top Page Specific MV (Fullscreen & Parallax) */
body.home .mv { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 0; margin: 0; }
body.home .mv #header { height: 100%; width: 100%; }
body.home .mv #header::after {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4); z-index: 1; pointer-events: none;
}
body.home .mv #header .mv_title { z-index: 2; }
body.home .mv #header .mv_title span { background-color: transparent; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6); }

/* Main Slide / Video */
body.home .mv #header .main-slide,
body.home .mv #header .main-slide .slider-top,
body.home .mv #header .main-slide .slider-top div,
body.home .mv #header .main-slide .slider-top li { height: 100vh; }
body.home .mv #header .main-slide picture img { height: 100vh; width: 100%; object-fit: cover; }
/* Zoom Animation */
body.home .mv #header .main-slide { overflow: hidden; }
@keyframes slowZoomOut { 0% { transform: scale(1.15); } 100% { transform: scale(1); } }
body.home .mv #header .main-slide .slick-active img { animation: slowZoomOut 6s ease-out forwards; }

.mv #header #video-area { z-index: -1; width: 100%; overflow: hidden; aspect-ratio: 1/1; }
@media (min-width: 768px) { .mv #header #video-area { aspect-ratio: 16/9; } }
.mv #header #video-area #video { position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; }
body.home .mv #header #video-area { height: 100vh; aspect-ratio: auto; }
body.home .mv #header #video-area #video { width: 100%; height: 100%; object-fit: cover; }

.mv #header .main-slide { width: 100%; max-width: 100%; margin: auto 0; position: relative; z-index: 1; }
.mv #header .main-slide img { width: 100%; margin: 0 auto; }
.mv #header .main-slide .slick-dots { bottom: -56px; }
.mv #header.appear { animation-name: PageAnimeAppear; animation-duration: 0.5s; animation-fill-mode: forwards; }

/* Lower Page Headers */
.page:not(.home) .mv #header .mv_title span,
.archive .mv #header .mv_title span,
.single .mv #header .mv_title span { background: none; }
.page .mv #header .main-img { position: relative; }
.page .mv #header .main-img .mv_title span { background: none; }

/* Lower Page Header Image Sizing & Overlay */
.page:not(.home) .mv #header .main-img::after,
.archive .mv #header .main-img::after,
.single .mv #header .main-img::after {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.2); pointer-events: none;
}
.page:not(.home) .mv #header .main-img img,
.archive .mv #header .main-img img,
.single .mv #header .main-img img,
.post-type-archive .mv #header .main-img img {
    width: 100% !important; height: auto !important;
    aspect-ratio: 500 / 250 !important; /* 2:1 Ratio */
    object-fit: cover !important;
}

/* Scroll Down Indicator */
.scrolldown { position: absolute; bottom: 20px; left: 5%; z-index: 1; animation: arrowmove 1s ease-in-out infinite; }
@media (min-width: 768px) { .scrolldown { bottom: 5%; left: 5%; } }
@keyframes arrowmove { 0% { bottom: 1%; } 50% { bottom: 3%; } 100% { bottom: 1%; } }
.scrolldown span {
    position: absolute; left: 0; top: -94px; color: #ffffff;
    font-size: 10px; letter-spacing: 0.25em; writing-mode: vertical-lr;
    font-family: "Noto Serif JP", serif;
}
@media (min-width: 768px) { .scrolldown span { top: -150px; } }
.scrolldown::before {
    content: ""; position: absolute; bottom: 0; left: 5px; width: 1px; height: 15px;
    background: #ffffff; transform: skewX(-31deg);
}
.scrolldown:after { content: ""; position: absolute; bottom: 0; left: 0; width: 1px; height: 94px; background: #ffffff; }
@media (min-width: 768px) { .scrolldown:after { height: 150px; } }


/* ==========================================================================
   5. GLOBAL COMPONENTS
   ========================================================================== */
/* Fixed Reservation Button (Refined) */
.fixed-bnr { display: block; }
.fixed-bnr .fixed-bnr-inner { position: fixed; top: 0; right: 60px; z-index: 4; }

.fixed-bnr .fixed-bnr-inner a {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 18px; height: 60px; margin: 0 auto; line-height: 1; width: 140px; font-size: 12px;
    /* Default State (Transparent White) */
    background: rgba(255, 255, 255, 0.15); /* ← 後ろの同値で上書きされる */
    border: 1px solid #ffffff; /* ← 後ろの同値で上書きされる */
    color: #ffffff; /* ← 後ろの同値で上書きされる */
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease; /* ← 後ろの同値で上書きされる */
    border-radius: 0 !important; /* Square corners */
}
@media (min-width: 768px) { .fixed-bnr .fixed-bnr-inner a { padding: 18px 22px; width: 210px; font-size: 16px; } }
@media (min-width: 1280px) { .fixed-bnr .fixed-bnr-inner a { width: 280px; padding: 20px 25px; font-size: 17px; } }

/* Scrolled State (Grey) */
.fixed-bnr.is-scrolled .fixed-bnr-inner a {
    background: rgba(255, 255, 255, 0.4); /* ← 後ろの 0.7 で上書きされる */
    border-color: #474a4d; /* ← 後ろの #444444 で上書きされる */
    color: #474a4d; /* ← 後ろの #444444 で上書きされる */
}
/* Hover State */
.fixed-bnr .fixed-bnr-inner a:hover {
    background: #ffffff; /* ← 後ろの #444444 で上書きされる */ color: #474a4d; /* ← 後ろの #ffffff で上書きされる */ opacity: 1; /* ← 後ろの同値で上書きされる */
}
.fixed-bnr.is-scrolled .fixed-bnr-inner a:hover {
    background: #474a4d !important; color: #ffffff !important;
}
.fixed-bnr .fixed-bnr-inner a span { float: right; font-size: 10px; font-size: 2.666vw; }
@media (min-width: 768px) { .fixed-bnr .fixed-bnr-inner a span { font-size: 12px; font-size: 1.692vw; } }
@media (min-width: 1280px) { .fixed-bnr .fixed-bnr-inner a span { font-size: 15px; } }

/* Section Titles (Refined) */
article section .title {
    position: relative; opacity: 0; letter-spacing: 0.2em; line-height: 1; font-weight: normal;
    width: 90%; padding-bottom: 15px; margin: 0 auto 3rem !important;
    font-size: 45px; font-size: 11vw;
    text-align: center; /* ← 後ろの center で上書きされる */ color: #222222 !important;
}
@media (min-width: 768px) {
    article section .title { width: 100%; margin-bottom: 4rem; /* ← 後ろの 2rem で上書きされる */ font-size: 52px; font-size: 6.77vw; }
}
@media (min-width: 1280px) { article section .title { font-size: 60px; } }
article section .title::first-letter { color: inherit !important; }
article section .title::after { display: none !important; } /* Removed underline */
article section .title .sub-title {
    display: block; margin-top: 1rem; letter-spacing: 0.05em; text-align: left;
    font-size: 11px; font-size: 3.2vw;
}
@media (min-width: 768px) { article section .title .sub-title { font-size: 14px; font-size: 1.953vw; } }
@media (min-width: 1280px) { article section .title .sub-title { font-size: 16px; } }

/* Button (Link Btn) - Minimalist Style */
.link-btn {
    display: block; text-align: center; margin: 2rem auto; line-height: 1;
    background: transparent !important;
    color: #333333 !important;
    border: 1px solid #cccccc !important;
    border-radius: 0 !important;
    box-sizing: border-box; letter-spacing: 0.05em;
    width: 225px; width: 60vw;
    font-size: 12px !important;
    padding: 15px 20px !important;
    transition: all 0.4s ease !important;
    box-shadow: none !important;
}
@media (min-width: 768px) {
    .link-btn { margin: 1rem auto; width: 262px; width: 34.114vw; }
}
@media (min-width: 1280px) {
    .link-btn { margin: 3rem auto; width: 300px; }
}
.link-btn:hover {
    background: #222222 !important; border-color: #222222 !important; color: #ffffff !important;
}


/* ==========================================================================
   6. TOP PAGE CONTENT SECTIONS
   ========================================================================== */
body.home .main-container { margin-top: 100vh; position: relative; z-index: 2; background: #ffffff; }
body.home article section { padding: 60px 0 !important; }
@media (min-width: 768px) { body.home article section { padding: 100px 0 !important; } }

/* --- #message --- */
#message .title { opacity: 1; }
#message .message_wrap { display: flex; justify-content: space-around; align-items: flex-start; flex-wrap: wrap; }
#message .info { width: 100%; }
@media (min-width: 768px) { #message .info { width: 50%; } }
#message .info .link-btn { margin: 3rem auto; }
@media (min-width: 768px) { #message .info .link-btn { margin: 3rem auto; } }
#message .img { width: 100%; opacity: 0; }
@media (min-width: 768px) { #message .img { width: 50%; } }
@media (min-width: 1280px) { #message .img { width: 38%; margin: 0; } }

/* --- #trouble (Refined Layout) --- */
#trouble { background-color: #ffffff; position: relative; z-index: 1; }
#trouble .trouble_wrap { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
@media (min-width: 768px) {
    #trouble .trouble_wrap {
        justify-content: space-around; align-items: center;
        padding-left: 10px; padding-right: 10px;
    }
}
@media (min-width: 1280px) { #trouble .trouble_wrap { padding: 0 170px; } }

/* Title (Feature) */
#trouble .title2 {
    position: relative; z-index: 10; padding: 0; /* ← 後ろの line 1416 で上書きされる */ margin-bottom: 4rem; /* ← 後ろのブロックで上書きされる */
    text-align: center; color: #222222; background: transparent; /* ← 後ろの #message .title, #trouble .title2 ブロックで再設定 */
    box-shadow: none !important; opacity: 0;
}
@media (min-width: 768px) { #trouble .title2 { width: 500px; width: 65.104vw; margin: 0 auto 3rem; } }
@media (min-width: 1280px) { #trouble .title2 { width: 700px; } }
#trouble .title2::before { display: none !important; } /* Removed triangle */
#trouble .title2 span { font-size: 21px; font-size: 6.133vw; color: #666363; }
@media (min-width: 768px) { #trouble .title2 span { font-size: 30px; font-size: 4.296vw; } }
@media (min-width: 1280px) { #trouble .title2 span { font-size: 38px; } }

/* List (Timeline Style) */
#trouble .trouble_list {
    width: 100%; position: relative; counter-reset: feature-num; z-index: 1; opacity: 0;
    /* Mobile styles */
    padding: 2rem 0 1rem 2rem; /* ← 後ろの mobile block 3rem 2rem / PC block 4rem 3rem で上書きされる */ margin-bottom: 2rem; /* ← 後ろの 6rem (mobile) / margin:0 (PC) で上書きされる */
}
@media (min-width: 768px) {
    #trouble .trouble_list { max-width: 50%; padding: 1rem 0 1rem 2.5rem; /* ← 後ろの PC block 4rem 3rem で上書きされる */ margin-bottom: 0; /* ← 後ろの margin:0 で上書きされる */ }
}

/* List Items */
#trouble .trouble_list li {
    position: relative; border: none !important; font-weight: normal; color: #444444 !important;
    letter-spacing: 0.1em; padding: 0 0 1.5rem 1.2rem; /* ← 後ろの mobile/PC ルールで上書きされる */ line-height: 1.6 !important; font-size: 13px;
}
@media (min-width: 768px) {
    #trouble .trouble_list li { padding: 0 0 3rem 1.5rem; /* ← 後ろの 1.5rem 0 で上書きされる */ line-height: 2 !important; }
}
@media (min-width: 1280px) { #trouble .trouble_list li { font-size: 14px !important; } }
#trouble .trouble_list li:last-child { padding-bottom: 0 !important; }

#trouble .img { width: 100%; opacity: 0; position: relative; z-index: 2; }
@media (min-width: 768px) { #trouble .img { width: 50%; } }
#trouble .img img { box-shadow: none; /* ← 後ろの box-shadow: none で上書きされる */ }
#trouble .link-btn { margin-bottom: 0; }

/* --- #style --- */
#style .title span { text-align: center; }
#style .style_list { display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; margin-bottom: 5rem; }
@media (min-width: 768px) { #style .style_list { padding: 0; } }
#style .style_list li { width: 47.5%; margin-bottom: 1rem; margin-right: 5%; }
@media (min-width: 768px) { #style .style_list li { width: 23%; margin-right: 2.5%; } }
#style .style_list li a { display: block; width: 100%; height: 100%; }
#style .style_list li a img { width: 100%; }
#style .style_list li:nth-of-type(2) { margin-top: 2rem; }
#style .style_list li:nth-of-type(2n) { margin-top: 3rem; margin-bottom: -2rem; margin-right: 0; }
@media (min-width: 768px) { #style .style_list li:nth-of-type(2n) { margin-right: 2.5%; } }
#style .style_list li:nth-of-type(4n) { margin-right: 0; }

/* --- #salon (Refined Slide-in) --- */
#salon { background-size: 160%; background-position: top center; background-repeat: no-repeat; }
@media (min-width: 768px) { #salon { background-size: contain; } }
#salon .title { color: #666363; padding-top: 10px; }
@media (min-width: 768px) { #salon .title { padding-top: 35px; } }
@media (min-width: 1280px) { #salon .title { padding-top: 70px; margin-bottom: 100px; } }
#salon .title::after { background-color: #474a4d; }
#salon span { text-align: center; }

#salon .salon_list {
    display: flex !important; justify-content: space-between !important; align-items: flex-start !important;
    flex-wrap: wrap !important; position: relative !important; padding: 2rem 0 6rem 0 !important;
    width: 90%; margin: 30px auto 2rem; opacity: 0; /* Hidden initially */
}
@media (min-width: 768px) { #salon .salon_list { margin-top: 20px; } }
@media (min-width: 1280px) { #salon .salon_list { margin-top: 80px; } }

#salon .salon_list li {
    position: relative !important; opacity: 0;
    box-shadow: 15px 20px 40px rgba(0, 0, 0, 0.08) !important; width: 30%;
}
#salon .salon_list li img { width: 100%; }

/* Random Layout (PC) */
#salon .salon_list li:nth-child(1) { width: 45% !important; margin-top: 0 !important; z-index: 2 !important; }
#salon .salon_list li:nth-child(2) { width: 35% !important; margin-top: 25% !important; z-index: 1 !important; }
#salon .salon_list li:nth-child(3) { width: 40% !important; margin-top: -10% !important; margin-left: 10% !important; z-index: 3 !important; }

/* Random Layout (Mobile) */
@media (max-width: 767px) {
    #salon .salon_list { display: block !important; padding: 1rem 0 3rem 0 !important; }
    #salon .salon_list li { width: 75% !important; margin-bottom: -15% !important; }
    #salon .salon_list li:nth-child(1) { margin-left: 0 !important; }
    #salon .salon_list li:nth-child(2) { margin-left: auto !important; margin-right: 0 !important; margin-top: -20% !important; width: 65% !important; }
    #salon .salon_list li:nth-child(3) { margin-left: 10% !important; margin-top: 0 !important; }
}

/* Animations */
@keyframes slideInFromLeft { 0% { opacity: 0; transform: translateX(-100px) translateY(30px); } 100% { opacity: 1; transform: translateX(0) translateY(0); } }
@keyframes slideInFromRight { 0% { opacity: 0; transform: translateX(100px) translateY(30px); } 100% { opacity: 1; transform: translateX(0) translateY(0); } }

/* Animation Triggers (PC) */
#salon .salon_list.is-show li:nth-child(1) { animation: slideInFromLeft 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important; animation-delay: 0.2s !important; }
#salon .salon_list.is-show li:nth-child(2) { animation: slideInFromRight 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important; animation-delay: 0.4s !important; }
#salon .salon_list.is-show li:nth-child(3) { animation: slideInFromLeft 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important; animation-delay: 0.6s !important; }
/* Animation Triggers (Mobile) */
@media (max-width: 767px) {
    #salon .salon_list.is-show li:nth-child(1) { animation: slideInFromLeft 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important; animation-delay: 0.1s !important; }
    #salon .salon_list.is-show li:nth-child(2) { animation: slideInFromRight 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important; animation-delay: 0.3s !important; }
    #salon .salon_list.is-show li:nth-child(3) { animation: slideInFromLeft 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important; animation-delay: 0.5s !important; }
}
#salon p { text-align: left; }
@media (min-width: 768px) { #salon p { text-align: center; } }

/* --- #staff --- */
#staff .title { opacity: 1; }
#staff .title::after { left: 0; transform: none; }
#staff .staff_list { display: flex; justify-content: space-around; align-items: flex-start; flex-wrap: wrap; }
#staff .staff_list .txt { width: 100%; margin-bottom: 2rem; }
@media (min-width: 768px) { #staff .staff_list .txt { width: 50%; margin-bottom: 0; } }
@media (min-width: 1280px) { #staff .staff_list .txt { width: 47.5%; margin-right: 2.5%; } }
#staff .staff_list .txt .link-btn { margin: 3rem 0; }
#staff .staff_list .img { padding: 0 4rem; opacity: 0; }
@media (min-width: 768px) { #staff .staff_list .img { padding: 0 2rem; width: 50%; } }
@media (min-width: 1280px) { #staff .staff_list .img { width: 47.5%; padding: 0 6rem; } }
#staff .staff_list .img p { position: relative; }
#staff .staff_list .img p::after {
    content: ""; position: absolute; top: 10px; left: 10px; width: 100%; height: 100%;
    display: block; border: 1px solid #adadad;
}
#staff .staff_list .img p::after img { width: 100%; }

/* --- #faq --- */
#faq .title { text-align: center; }
#faq .title span { text-align: center; }
#faq .faq_list { display: flex; justify-content: space-evenly; align-items: flex-start; flex-wrap: wrap; }
#faq .faq_list li { width: 100%; background-color: #ffffff; padding: 1rem; margin-bottom: 2rem; }
@media (min-width: 768px) { #faq .faq_list li { width: 45%; } }
#faq .faq_list li .faq_ttl { padding: 1rem; border-bottom: solid 1px #666363; line-height: 2; font-size: 15px; }
#faq .faq_list li .faq_txt { padding: 1rem; font-size: 13px; }
#faq .link-btn { margin: 1rem auto; }

/* --- #blog --- */
#blog .title::after { left: 0; transform: none; }
#blog .blog_list { display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; margin-bottom: 5rem; }
#blog .blog_list .blog_item { width: 47.5%; margin-bottom: 2rem; margin-right: 5%; }
@media (min-width: 768px) { #blog .blog_list .blog_item { width: 23%; margin-right: 2.5%; } }
#blog .blog_list .blog_item > a { display: block; width: 100%; height: 100%; }
#blog .blog_list .blog_item .img { width: 100%; margin-bottom: 0.5rem; }
#blog .blog_list .blog_item .img img { width: 100%; }
#blog .blog_list .blog_item .post-categories {
    line-height: 1; margin-bottom: 0.5rem; display: inline-block; background-color: #adadad;
    color: #ffffff; text-align: center; padding: 5px 10px; font-size: 11px; pointer-events: none;
}
#blog .blog_list .blog_item .blog_title { margin-bottom: 0.5rem; font-weight: bold; font-size: 15px; line-height: 1.25; }
#blog .blog_list .blog_item .date { line-height: 1; font-size: 13px; }
#blog .blog_list .blog_item:nth-of-type(2) { margin-top: 2rem; }
#blog .blog_list .blog_item:nth-of-type(2n) { margin-top: 3rem; margin-bottom: -2rem; margin-right: 0; }
@media (min-width: 768px) { #blog .blog_list .blog_item:nth-of-type(2n) { margin-right: 2.5%; } }
#blog .blog_list .blog_item:nth-of-type(4n) { margin-right: 0; }


/* ==========================================================================
   7. LOWER PAGES (Concept, Menu, Archives)
   ========================================================================== */
/* Concept - Intro (Editorial Style) */
.page:not(.home) .concept #intro { padding: 3rem 0 5rem; }
.page:not(.home) .concept #intro .intro_wrap {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
}
@media (min-width: 768px) {
    .page:not(.home) .concept #intro .intro_wrap {
        flex-direction: row-reverse; /* Image right, Text left */
    }
}
.page:not(.home) .concept #intro .intro_wrap .info_item { width: 100%; margin-bottom: 2rem; }
@media (min-width: 768px) { .page:not(.home) .concept #intro .intro_wrap .info_item { width: 45%; margin-bottom: 0; padding-right: 2rem; } }
.page:not(.home) .concept #intro .intro_wrap .img { width: 100%; }
.page:not(.home) .concept #intro .intro_wrap .img.inner { padding: 0 15px; }
@media (min-width: 768px) { .page:not(.home) .concept #intro .intro_wrap .img { width: 50%; } }

/* Concept - Choice (Z-Pattern Layout) */
.page:not(.home) .concept #choice .title2 {
    position: relative; padding: 15px; margin-bottom: 2rem; line-height: 1; font-size: 15px;
}
@media (min-width: 768px) { .page:not(.home) .concept #choice .title2 { width: 500px; margin: 0 auto 3rem; font-size: 21px; } }
@media (min-width: 1280px) { .page:not(.home) .concept #choice .title2 { width: 700px; font-size: 28px; } }
.page:not(.home) .concept #choice .title2 span { font-size: 21px; color: #666363; }
@media (min-width: 768px) { .page:not(.home) .concept #choice .title2 span { font-size: 30px; } }
@media (min-width: 1280px) { .page:not(.home) .concept #choice .title2 span { font-size: 38px; } }

.page:not(.home) .concept #choice .choice_wrap { margin-top: 3rem; }
.page:not(.home) .concept #choice .choice_wrap .choice_item::before { display: none !important; } /* Reset numbers */
.page:not(.home) .concept #choice .choice_wrap .choice_item {
    background-color: transparent !important; padding: 0 !important; margin-bottom: 6rem !important;
}

/* PC Z-Pattern */
@media (min-width: 768px) {
    .page:not(.home) .concept #choice .choice_wrap .choice_item {
        display: flex; align-items: center; justify-content: space-between;
    }
    .page:not(.home) .concept #choice .choice_item .img { width: 55%; position: relative; z-index: 1; }
    .page:not(.home) .concept #choice .choice_item .img img { aspect-ratio: 4 / 5; object-fit: cover; }
    .page:not(.home) .concept #choice .choice_item .txt {
        width: 50%; margin-left: -10%; background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        padding: 4rem 3rem; position: relative; z-index: 2; margin-bottom: 0; margin-right: 0;
    }
    .page:not(.home) .concept #choice .choice_item:nth-of-type(even) { flex-direction: row-reverse; }
    .page:not(.home) .concept #choice .choice_item:nth-of-type(even) .txt { margin-left: 0; margin-right: -10%; }
}

/* Mobile Z-Pattern */
@media (max-width: 767px) {
    .page:not(.home) .concept #choice .choice_wrap .choice_item {
        display: flex; /* ← 後ろの line 2076 で同値上書き */ flex-direction: row; /* ← 後ろの column で上書きされる */ align-items: center; /* ← 後ろの stretch で上書きされる */
        justify-content: space-between !important; margin-bottom: 4rem; /* ← 後ろの 3rem で上書きされる */
    }
    .page:not(.home) .concept #choice .choice_item .img {
        width: 48%; /* ← 後ろの 100% で上書きされる */ margin: 0; /* ← 後ろの同値で上書きされる */ z-index: 1; /* ← 後ろの z-index:5 で上書きされる */
    }
    .page:not(.home) .concept #choice .choice_item .img img { aspect-ratio: 4 / 5; /* ← 後ろの 4/3 で上書きされる */ object-fit: cover; /* ← 後ろの同値で上書きされる */ }
    .page:not(.home) .concept #choice .choice_item .txt {
        width: 48%; /* ← 後ろの 100% で上書きされる */ margin: 0; /* ← 後ろの同値で上書きされる */ padding: 0; /* ← 後ろの 1.5rem で上書きされる */
        background: transparent !important; z-index: 2 !important;
    }
    .page:not(.home) .concept #choice .choice_item:nth-of-type(even) { flex-direction: row-reverse; /* ← 後ろの column で上書きされる */ }
    .page:not(.home) .concept #choice .choice_item .txt h3 {
        font-size: 15px; /* ← 後ろの line 2125 で同値上書き */ margin-bottom: 0.8rem; /* ← 後ろの line 2124 で同値上書き */
        letter-spacing: 0.1em !important; line-height: 1.4; /* ← 後ろの line 2126 で同値上書き */
    }
    .page:not(.home) .concept #choice .choice_item .txt p {
        font-size: 11px; /* ← 後ろの line 2129 で同値上書き */ line-height: 1.8; /* ← 後ろの line 2130 で同値上書き */
    }
}

/* Text Styling */
.page:not(.home) .concept #choice .choice_item .txt h3,
.page:not(.home) .concept #choice .choice_wrap .choice_item .txt h2 {
    font-size: 20px; color: #222222; margin-bottom: 1.5rem; letter-spacing: 0.15em; line-height: 1.5;
}
.page:not(.home) .concept #choice .choice_item .txt p {
    font-size: 13px; color: #444444; line-height: 2.2;
}

/* Menu Page */
.page:not(.home) #menu .inner { max-width: 1000px; }
.page:not(.home) #menu .top_txt { margin-bottom: 5rem; }
.page:not(.home) #menu .menu_wrap { padding: 1.5rem; margin-bottom: 2rem; }
@media (min-width: 768px) { .page:not(.home) #menu .menu_wrap { padding: 3rem; } }
.page:not(.home) #menu .menu_wrap .menu_title { text-align: center; margin-bottom: 2rem; line-height: 1; color: #666363; font-size: 20px; }
.page:not(.home) #menu .menu_wrap .menu_div { text-align: center; margin-bottom: 1rem; line-height: 1; color: #666363; font-size: 11px; }
.page:not(.home) #menu .menu_wrap .menu_wrap_inner { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.page:not(.home) #menu .menu_wrap .menu_list { width: 100%; }
.page:not(.home) #menu .menu_wrap .menu_list:last-child li:first-child { border-top: none; }
@media (min-width: 768px) { .page:not(.home) #menu .menu_wrap .menu_list:last-child li:first-child { border-top: dotted 2px #cccccc; } }
.page:not(.home) #menu .menu_wrap .menu_list li {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
    width: 100%; border-bottom: dotted 2px #cccccc; line-height: 2;
}
.page:not(.home) #menu .menu_wrap .menu_list li .menu_ttl {
    display: block; width: 70%; padding: 10px 0; text-align: left; font-weight: normal; font-size: 16px;
}
@media (min-width: 768px) { .page:not(.home) #menu .menu_wrap .menu_list li .menu_ttl { padding: 15px 0; } }
.page:not(.home) #menu .menu_wrap .menu_list li .menu_ttl span { display: block; font-size: 11px; }
.page:not(.home) #menu .menu_wrap .menu_list li .menu_ div { display: block; font-size: 11px; text-align: center; }
.page:not(.home) #menu .menu_wrap .menu_list li .menu_price {
    display: block; width: 30%; padding: 10px 0; text-align: right; font-size: 15px;
}
@media (min-width: 768px) { .page:not(.home) #menu .menu_wrap .menu_list li .menu_price { padding: 15px 0; } }
.page:not(.home) #menu .menu_wrap .menu_list li:first-child { border-top: dotted 2px #cccccc; }
.page:not(.home) #menu .menu_wrap .menu_list li:nth-of-type(2n) { border-top: none; }
@media (min-width: 768px) { .page:not(.home) #menu .menu_wrap .menu_list li:last-child { border-bottom: dotted 2px #cccccc; } }
.page:not(.home) #menu .menu_wrap .attention { text-align: right; width: 100%; margin-top: 2rem; font-size: 11px; }

/* メニューページ：スマホレイアウト調整 */
@media (max-width: 767px) {
    .page:not(.home) #menu .menu_wrap .menu_title { font-size: 17px !important; }
    /* liを縦積みにして名前と価格を上下に並べる */
    .page:not(.home) #menu .menu_wrap .menu_list li {
        flex-direction: column !important;
        align-items: flex-start !important;
        line-height: 1.6 !important;
        padding: 8px 0 !important;
    }
    .page:not(.home) #menu .menu_wrap .menu_list li .menu_ttl {
        width: 100% !important;
        font-size: 13px !important;
        line-height: 1.6 !important;
        padding: 0 !important;
    }
    .page:not(.home) #menu .menu_wrap .menu_list li .menu_price {
        width: 100% !important;
        font-size: 13px !important;
        text-align: left !important;
        padding: 2px 0 4px !important;
        color: #888 !important;
    }
}

/* Lower Page #salon Section */
.page:not(.home) #salon .title { font-size: 36px; font-size: 9.6vw; color: black; }
@media (min-width: 768px) { .page:not(.home) #salon .title { font-size: 41px; font-size: 5.338vw; } }
@media (min-width: 1280px) { .page:not(.home) #salon .title { font-size: 46px; } }
.page:not(.home) #salon .title::after { display: none; }
#salon { padding-top: 4rem; }
#salon .salon_inner { padding: 0 15px; max-width: 700px; margin: 0 auto 3rem; }
#salon .salon_inner .thumbnail { margin: 2rem 0; }
#salon .salon_inner .thumbnail .slick-track { transform: unset !important; }
#salon .salon_inner .thumbnail .thumbnail-img { opacity: 0.3; transition: opacity 0.3s linear; margin: 0 0.5rem !important; }
@media (min-width: 768px) { #salon .salon_inner .thumbnail .thumbnail-img { margin: 0 1rem !important; } }
#salon .salon_inner .thumbnail .slick-current { opacity: 1; }
#salon .map { margin: 0 auto; position: relative; width: 100%; aspect-ratio: 16/9; margin-bottom: 3rem; }
@media (min-width: 768px) { #salon .map { aspect-ratio: 16/5.5; } }
#salon .map iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%; }
#salon .address { width: 100%; max-width: 480px; border-bottom: solid 1px #E0DBDB; margin: 0 auto; }
#salon .address tr { border-top: solid 1px #E0DBDB; font-size: 11px; }
#salon .address tr th { font-weight: normal; text-align: left; padding: 15px 10px 15px 20px; }
@media (min-width: 768px) { #salon .address tr th { padding: 15px 30px; } }
#salon .address tr td { line-height: 2.5; padding: 15px 20px 15px 10px; }
@media (min-width: 768px) { #salon .address tr td { padding: 15px 30px; } }
#salon .address tr td span { padding-right: 60px; }
#salon .address tr td a { color: #000000; }

/* Archive Blog */
#archive-blog .blog_inner { max-width: 810px; padding: 0 15px; margin: 0 auto; }
@media (min-width: 768px) { #archive-blog .blog_inner { padding: 0 25px; } }
@media (min-width: 1280px) { #archive-blog .blog_inner { padding: 0; } }
#archive-blog .blog_list { margin-bottom: 5rem; }
#archive-blog .blog_list .blog_item { display: flex; justify-content: space-evenly; align-items: flex-start; flex-wrap: wrap; margin-bottom: 5rem; }
#archive-blog .blog_list .blog_item .img { width: 100%; margin-bottom: 1rem; }
@media (min-width: 768px) { #archive-blog .blog_list .blog_item .img { width: 47.5%; margin-bottom: 0; margin-right: 5%; } }
#archive-blog .blog_list .blog_item .img a { display: block; width: 100%; height: 100%; }
#archive-blog .blog_list .blog_item .img a img { width: 100%; }
#archive-blog .blog_list .blog_item .info { width: 100%; }
@media (min-width: 768px) { #archive-blog .blog_list .blog_item .info { width: 47.5%; } }
#archive-blog .blog_list .blog_item .info .post-categories {
    line-height: 1; margin-bottom: 1rem; margin-right: 10px; display: inline-block;
    background-color: #adadad; text-align: center; padding: 5px 10px; font-size: 11px; color: #ffffff;
}
#archive-blog .blog_list .blog_item .info .blog_title { margin-bottom: 1rem; font-weight: bold; font-size: 15px; line-height: 1.25; }
#archive-blog .blog_list .blog_item .info .date { margin-bottom: 1.5rem; line-height: 1; font-size: 11px; }
#archive-blog .blog_list .blog_item .info .blog_content { line-height: 2; }
#archive-blog .blog_list .blog_item .info .blog_content a { display: inline-block; float: right; color: #adadad; }
#archive-blog .blog_list .blog_item .info .blog_content a:hover { text-decoration: underline; }

/* Single Blog */
#single-blog .inner { max-width: 860px; padding: 0 15px; margin: 0 auto; }
#single-blog .blog_inner { max-width: 810px; margin: 3rem auto; }
@media (min-width: 768px) { #single-blog .blog_inner { padding: 0 25px; } }
@media (min-width: 1280px) { #single-blog .blog_inner { padding: 0; } }
#single-blog .post-categories {
    line-height: 1; margin-bottom: 1rem; margin-right: 10px; display: inline-block;
    background-color: #adadad; color: #ffffff; text-align: center; padding: 2px 4px; font-size: 11px;
}
#single-blog .blog_title { margin-bottom: 1rem; font-weight: bold; font-size: 15px; line-height: 1.25; }
#single-blog .date { margin-bottom: 1.5rem; line-height: 1; font-size: 11px; }
#single-blog .blog_content { line-height: 2; }
#single-blog .blog_content p { margin: 1rem 0; }
@media (min-width: 768px) { #single-blog .blog_content p { margin: 2rem 0; } }
#single-blog .blog_content img { max-width: 100%; margin: 1rem 0; }
@media (min-width: 768px) { #single-blog .blog_content img { margin: 2rem 0; } }

/* Hairstyle Archive */
.post-type-archive-hairstyle .style_list { display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; }
.post-type-archive-hairstyle .style_list .style_item { width: 47.5%; margin-bottom: 5%; margin-right: 5%; }
@media (min-width: 768px) { .post-type-archive-hairstyle .style_list .style_item { width: 23.1%; margin-right: 2.5%; } }
.post-type-archive-hairstyle .style_list .style_item a { display: block; width: 100%; height: 100%; }
.post-type-archive-hairstyle .style_list .style_item a img { width: 100%; }
.post-type-archive-hairstyle .style_list .style_item:nth-of-type(2) { margin-top: 0; }
.post-type-archive-hairstyle .style_list .style_item:nth-of-type(2n) { margin-top: 0; margin-bottom: 0; margin-right: 0; }
@media (min-width: 768px) { .post-type-archive-hairstyle .style_list .style_item:nth-of-type(2n) { margin-right: 2.5%; } }
.post-type-archive-hairstyle .style_list .style_item:nth-of-type(4n) { margin-right: 0; }

/* Single Hairstyle */
.single-hairstyle .style_wrap {
    display: flex; justify-content: space-evenly; align-items: flex-start; flex-wrap: wrap;
    max-width: 1000px; margin: 0 auto 5rem;
}
.single-hairstyle .style_wrap .img { width: 100%; }
@media (min-width: 768px) { .single-hairstyle .style_wrap .img { width: 47.5%; margin-right: 2.5%; } }
.single-hairstyle .style_wrap .img img { width: 100%; margin-bottom: 2rem; }
@media (min-width: 768px) { .single-hairstyle .style_wrap .img img { margin-bottom: 0; } }
.single-hairstyle .style_wrap .img .style_title { line-height: 1.5; margin-bottom: 1rem; font-size: 24px; font-size: 6.4vw; }
@media (min-width: 768px) { .single-hairstyle .style_wrap .img .style_title { font-size: 26px; font-size: 3.385vw; } }
@media (min-width: 1280px) { .single-hairstyle .style_wrap .img .style_title { font-size: 30px; } }
.single-hairstyle .style_wrap .style_info { width: 100%; }
@media (min-width: 768px) { .single-hairstyle .style_wrap .style_info { width: 47.5%; } }
.single-hairstyle .style_wrap .style_info .style_title { line-height: 1.5; margin-bottom: 2rem; font-size: 24px; font-size: 6.4vw; }
@media (min-width: 768px) { .single-hairstyle .style_wrap .style_info .style_title { font-size: 26px; font-size: 3.385vw; } }
@media (min-width: 1280px) { .single-hairstyle .style_wrap .style_info .style_title { font-size: 30px; } }
.single-hairstyle .style_wrap .style_info .style_comment { line-height: 2; margin-bottom: 2rem; font-size: 14px; }
.single-hairstyle .style_wrap .style_info .style_menu_wrap { background-color: rgba(224, 219, 219, 0.2); padding: 1rem; }
.single-hairstyle .style_wrap .style_info .style_menu_wrap .style_menu_title { line-height: 1; font-size: 18px; margin-bottom: 1rem; color: #adadad; }
.single-hairstyle .style_wrap .style_info .style_menu_wrap .style_menu { line-height: 2; font-size: 18px; }

/* Staff Archive */
.post-type-archive-staff .inner { max-width: 1000px; margin: 0 auto; }
.post-type-archive-staff .staff_list {
    display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; margin-bottom: 5rem;
}
.post-type-archive-staff .staff_list .staff_info { width: 100%; padding: 0 2rem; order: 2; }
@media (min-width: 768px) { .post-type-archive-staff .staff_list .staff_info { padding: 0; width: 48%; margin-right: 4%; } }
.post-type-archive-staff .staff_list .staff_info .staff_name { line-height: 1; margin-bottom: 1.5rem; font-size: 24px; font-size: 6.4vw; }
@media (min-width: 768px) { .post-type-archive-staff .staff_list .staff_info .staff_name { margin-bottom: 3rem; font-size: 26px; font-size: 3.385vw; } }
@media (min-width: 1280px) { .post-type-archive-staff .staff_list .staff_info .staff_name { font-size: 30px; } }
.post-type-archive-staff .staff_list .staff_info .staff_name span { line-height: 1; display: block; margin-top: 1rem; color: #adadad; font-size: 14px; font-size: 4.266vw; }
@media (min-width: 768px) { .post-type-archive-staff .staff_list .staff_info .staff_name span { font-size: 16px; font-size: 2.343vw; } }
@media (min-width: 768px) and (min-width: 1280px) { .post-type-archive-staff .staff_list .staff_info .staff_name span { font-size: 20px; } }
.post-type-archive-staff .staff_list .staff_info .staff_message { line-height: 2.5; }
.post-type-archive-staff .staff_list .staff_img { width: 100%; order: 1; padding: 0 2rem; margin-bottom: 2rem; }
@media (min-width: 768px) { .post-type-archive-staff .staff_list .staff_img { width: 48%; padding: 0 3rem; margin-bottom: 0; order: 2; } }
.post-type-archive-staff .staff_list .staff_img p { position: relative; }
.post-type-archive-staff .staff_list .staff_img p::after {
    content: ""; position: absolute; top: 10px; left: 10px; width: 100%; height: 100%;
    display: block; border: 1px solid #C5AC73;
}

/* FAQ Archive */
.post-type-archive-faq .faq_wrap .tab_container { padding-bottom: 1em; background-color: #ffffff; padding: 3rem 2rem; margin: 0 auto; }
.post-type-archive-faq .faq_wrap .tab_container .tab_item {
    padding: 0 15px; text-align: center; display: block; float: left;
    font-weight: bold; transition: all 0.3s ease; width: 60%; margin: 1rem 20%;
}
@media (min-width: 768px) { .post-type-archive-faq .faq_wrap .tab_container .tab_item { width: 25%; margin: 0; } }
@media (min-width: 1280px) { .post-type-archive-faq .faq_wrap .tab_container .tab_item { width: 15%; margin: 0 5%; } }
@media (max-width: 767px) {
    .post-type-archive-faq .faq_wrap .tab_container .tab_item { padding: 0 5px; width: 25%; line-height: 1.2; margin: 0 0; }
}
.post-type-archive-faq .faq_wrap .tab_container .tab_item:hover { opacity: 0.75; }
.post-type-archive-faq .faq_wrap .tab_container input[name=tab_item] { display: none; }
.post-type-archive-faq .faq_wrap .tab_container .tab_content { display: none; padding: 1em 1em 0; clear: both; overflow: hidden; }
.post-type-archive-faq .faq_wrap .tab_container .tab_content .tab_content_description { margin-bottom: 2rem; }
.post-type-archive-faq .faq_wrap .tab_container .tab_content .tab_content_description h2 {
    padding: 1rem 0; font-size: 16px; border-bottom: #000000 solid 1px;
}
.post-type-archive-faq .faq_wrap .tab_container .tab_content .tab_content_description p { padding: 1rem 0; font-size: 13px; }
.post-type-archive-faq .faq_wrap .tab_container #tab1:checked ~ #tab1_content,
.post-type-archive-faq .faq_wrap .tab_container #tab2:checked ~ #tab2_content,
.post-type-archive-faq .faq_wrap .tab_container #tab3:checked ~ #tab3_content,
.post-type-archive-faq .faq_wrap .tab_container #tab4:checked ~ #tab4_content { display: block; }
.post-type-archive-faq .faq_wrap .tab_container input:checked + .tab_item { border-bottom: #000000 solid 2px; }

/* WP Page Navi */
.wp-pagenavi { text-align: center; font-size: 11px; font-weight: 500; margin: 2rem 0; }
.wp-pagenavi span, .wp-pagenavi .pages {
    background: #ffffff; color: #474a4d; border: solid 1px #474a4d; padding: 5px 10px; margin: 2px;
}
.wp-pagenavi .current { background: #474a4d; color: #ffffff; border: solid 1px #474a4d; padding: 5px 10px; }
.wp-pagenavi .page, .wp-pagenavi .previouspostslink, .wp-pagenavi .nextpostslink {
    color: #474a4d; border: solid 1px #474a4d; padding: 5px 10px; margin: 2px;
}

/* Accordion Helpers */
input[type=submit], input[type=button] {
    border-radius: 0; -webkit-box-sizing: content-box; -webkit-appearance: button;
    -moz-appearance: button; appearance: button; border: none; box-sizing: border-box; cursor: pointer;
}
input[type=submit]::-webkit-search-decoration, input[type=button]::-webkit-search-decoration { display: none; }
input[type=submit]::focus, input[type=button]::focus { outline-offset: -2px; }


/* ==========================================================================
   8. FOOTER
   ========================================================================== */
.footer-container { position: relative; z-index: 1; overflow: hidden; color: #444444; /* ← 後ろの color: #444 で上書きされる */ }

/* Footer Background Video */
.footer-container .foot-wrap, address { background: transparent; /* ← 後ろの #ffffff で上書きされる */ color: #444444 !important; }
.footer-video-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.footer-video-wrap video { width: 100%; height: 100%; object-fit: cover; }
.footer-video-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(255, 255, 255, 0.85); /* Overlay opacity */
}
.footer-video-pc { display: block; }
.footer-video-sp { display: none; }
@media (max-width: 767px) {
    .footer-video-pc { display: none; }
    .footer-video-sp { display: block; }
}

.footer-container .foot-wrap {
    display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;
    position: relative;
}
.footer-container .foot-wrap .shop_info {
    display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; padding-top: 20px;
}
@media (min-width: 768px) { .footer-container .foot-wrap .shop_info { padding-top: 15px; width: 50%; } }
@media (min-width: 1280px) { .footer-container .foot-wrap .shop_info { padding-top: 30px; } }
.footer-container .foot-wrap .shop_info .info { width: 100%; }
@media (max-width: 767px) { .footer-container .foot-wrap .shop_info .info { padding-bottom: 3.5rem; } }
@media (min-width: 1280px) { .footer-container .foot-wrap .shop_info .info { padding-left: 76px; padding-right: 76px; } }

.footer-container .foot-wrap .shop_info .info .logo {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
}
@media (min-width: 768px) { .footer-container .foot-wrap .shop_info .info .logo { margin-bottom: 1rem; } }
.footer-container .foot-wrap .shop_info .info .to-contact { margin-top: 5vh; }
@media (max-width: 767px) { .footer-container .foot-wrap .shop_info .info .to-contact { margin-top: 2rem; } }
@media (min-width: 768px) { .footer-container .foot-wrap .shop_info .info .to-contact { margin-top: 0; } }
@media (min-width: 1280px) { .footer-container .foot-wrap .shop_info .info .to-contact { margin-top: 5vh; } }

.footer-container .foot-wrap .shop_info .info .site-logo { margin-right: 1rem; }
.footer-container .foot-wrap .shop_info .info .site-logo img { width: 62px; width: 16.5333vw; }
@media (min-width: 768px) { .footer-container .foot-wrap .shop_info .info .site-logo img { width: 76px; width: 9.8958vw; } }
@media (min-width: 1280px) { .footer-container .foot-wrap .shop_info .info .site-logo img { width: 90px; } }

.footer-container .foot-wrap .shop_info .info .title { position: relative; line-height: 1; z-index: 2; }
.footer-container .foot-wrap .shop_info .info .title a {
    letter-spacing: 0.05em; font-weight: normal; color: #444444 !important; font-size: 25px; font-size: 6.666vw;
}
@media (min-width: 768px) { .footer-container .foot-wrap .shop_info .info .title a { font-size: 30px; font-size: 3.906vw; } }
@media (min-width: 1280px) { .footer-container .foot-wrap .shop_info .info .title a { font-size: 36px; } }

.footer-container .foot-wrap .shop_info .info .sns {
    display: flex; justify-content: space-evenly; align-items: center; flex-wrap: wrap;
}
.footer-container .foot-wrap .shop_info .info .sns li { margin-left: 10px; }
/* FontAwesome Icons */
.footer-container .foot-wrap .shop_info .info .sns li a i {
    font-size: 32px; color: rgb(225, 213, 225) !important; transition: all 0.3s ease;
}
.footer-container .foot-wrap .shop_info .info .sns li a i:hover {
    color: #444444 !important; transform: translateY(-2px);
}

.footer-container .foot-wrap .shop_info .info .link-btn {
    display: block; text-align: center; padding: 14px 15px; margin: 2rem auto; line-height: 1;
    color: #444444 !important; background: transparent !important;
    border: solid 1px #444444 !important; box-sizing: border-box; letter-spacing: 0.05em;
    width: 225px; width: 60vw; font-size: 12px;
}
@media (min-width: 768px) {
    .footer-container .foot-wrap .shop_info .info .link-btn {
        margin: 1rem auto; padding: 18px 15px; width: 262px; width: 34.114vw; font-size: 15px;
    }
}
@media (min-width: 1280px) {
    .footer-container .foot-wrap .shop_info .info .link-btn {
        margin: 3rem auto; padding: 21px 15px; width: 480px; font-size: 16px;
    }
}
.footer-container .foot-wrap .shop_info .info .link-btn:hover {
    background: #444444 !important; color: #ffffff !important; opacity: 1 !important;
}

.footer-container .foot-wrap .shop_info .address { width: 100%; border-bottom: solid 1px #cccccc !important; }
@media (min-width: 768px) { .footer-container .foot-wrap .shop_info .address { width: 50%; position: absolute; bottom: 0; left: 0; } }
.footer-container .foot-wrap .shop_info .address tr { border-top: solid 1px #cccccc !important; font-size: 13px; }
.footer-container .foot-wrap .shop_info .address tr th { font-weight: normal; text-align: left; padding: 15px; color: #444444 !important; }
.footer-container .foot-wrap .shop_info .address tr td { padding: 15px; color: #444444 !important; }
.footer-container .foot-wrap .shop_info .address tr td span { padding-right: 60px; }
.footer-container .foot-wrap .shop_info .address tr td a { color: #444444 !important; }

.footer-container .foot-wrap .map { margin: 0 auto; position: relative; width: 100%; aspect-ratio: 16/9; }
@media (min-width: 768px) { .footer-container .foot-wrap .map { width: 50%; aspect-ratio: 2/1; } }
/* aspect-ratio は 2/1 に統一（L979）*/
.footer-container .foot-wrap .map iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%; position: relative; }

address { font-size: 13px; text-align: center; padding: 18px; margin-bottom: 0; }

/* Page Top Button */
#page-top { position: fixed; z-index: 2; opacity: 0; right: 0; bottom: 0; transform: translateY(100px); }
#page-top.UpMove { animation: UpAnime 0.5s forwards; }
#page-top.DownMove { animation: DownAnime 0.5s forwards; }
@keyframes UpAnime { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0); } }
@keyframes DownAnime { from { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(100px); } }
#page-top a {
    display: flex; justify-content: center; align-items: center; background: #c1a3b5;
    width: 55px; height: 55px; color: #ffffff; text-align: center; text-transform: uppercase;
    text-decoration: none; font-size: 10px; line-height: 1.5; transition: all 0.3s;
}
@media (max-width: 767px) { #page-top { bottom: 0; } }
@media (min-width: 768px) { #page-top a { width: 48px; height: 48px; } }
@media (min-width: 1280px) { #page-top a { width: 69px; height: 69px; } }

/* Fixed Background Video (Top Page) */
.fixed-background-video { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: -1; overflow: hidden; }
.fixed-background-video video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; }
.fixed-background-video .video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.85); }
.video-pc { display: block; }
.video-sp { display: none; }
@media (max-width: 767px) { .video-pc { display: none; } .video-sp { display: block; } }

/* Lower Pages Styles (Kept Minimal) */
.page:not(.home) .concept #intro { padding: 3rem 0 5rem; }
.page:not(.home) .concept #intro .intro_wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
@media (min-width: 768px) { .page:not(.home) .concept #intro .intro_wrap { flex-direction: row-reverse; } }
.page:not(.home) .concept #intro .intro_wrap .info_item { width: 100%; margin-bottom: 2rem; }
@media (min-width: 768px) { .page:not(.home) .concept #intro .intro_wrap .info_item { width: 45%; margin-bottom: 0; padding-right: 2rem; } }
.page:not(.home) .concept #intro .intro_wrap .img { width: 100%; }
.page:not(.home) .concept #intro .intro_wrap .img.inner { padding: 0 15px; }
@media (min-width: 768px) { .page:not(.home) .concept #intro .intro_wrap .img { width: 50%; } }

/* --------------- Tococa文字設定 --------------- */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&family=Zen+Maru+Gothic:wght@300&display=swap');

.slide-text-tococa {
    font-family: 'Quicksand', 'Zen Maru Gothic', sans-serif;
    font-weight: 300;
    
    /* 色を白に変更 */
    color: #ffffff;
    
    letter-spacing: 0.2em; 
    font-size: 48px; 
    position: absolute;
    
    /* 位置をもっと上へ */
    top: 10%; 
    
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 10;
    
    /* 万が一の重複防止（最初の1つ以外隠すなどCSSでは限界がありますが、念のため） */
    display: block;
}
/* =========================================================
   ▼▼▼▼ 追加修正コード：ここから下をstyle.cssの末尾に貼る ▼▼▼▼
   ========================================================= */

/* 1. フォント読み込み（おしゃれな丸文字など） */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&family=Zen+Maru+Gothic:wght@300&display=swap');

/* 2. 全体の文字サイズを小さく統一（11px） */
html, body {
    font-size: 11px;
    line-height: 2.6;
    letter-spacing: 0.08em;
}
p, li, dl, dt, dd, th, td, address, .link-btn {
    font-size: 11px;
}
/* PCでは少しだけ読みやすく(12px) */
@media (min-width: 768px) {
    body, p, li, dl, dt, dd, th, td, address, .link-btn { font-size: 12px !important; }
}

/* 3. トップページ中央の「Tococa」と文章のデザイン */
.mv-centered-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* ど真ん中配置 */
    text-align: center;
    width: 90%;
    z-index: 20;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.mv-centered-content .main-logo-text {
    font-family: 'Quicksand', 'Zen Maru Gothic', sans-serif;
    font-weight: 300;
    font-size: 60px; /* ロゴサイズ */
    letter-spacing: 0.2em;
    margin-bottom: 20px;
    line-height: 1;
    color: #ffffff;
}
.mv-centered-content .main-concept-text {
    font-family: "Noto Serif JP", serif;
    font-size: 13px; /* 文章サイズ */
    letter-spacing: 0.1em;
    line-height: 2.2;
    font-weight: normal;
    color: #ffffff;
}
@media (max-width: 767px) {
    .mv-centered-content .main-logo-text { font-size: 42px; margin-bottom: 15px; }
    .mv-centered-content .main-concept-text { font-size: 11px; }
}
/* 元のタイトルを非表示 */
/* 4. 背景の交互切り替え（透明＝動画 ／ 白背景） */
/* 基本は透明にして奥の動画を見せる */
body.home .main-container, body.home article section, #message, #style, #faq {
    background: transparent;
}
/* Trouble, Salon, Blog は白背景にする */
#trouble, #salon, #blog {
    background-color: #ffffff;
    position: relative; z-index: 1;
}

/* 5. 特徴エリア（Trouble）のおしゃれレイアウト */
#trouble { padding: 8rem 0; /* ← 後ろの padding-top/bottom: 5rem で上書きされる */ }
@media (min-width: 768px) {
    #trouble .trouble_wrap { display: flex; align-items: center; justify-content: flex-end; position: relative; }
    /* 画像左 */
    #trouble .img { width: 60%; position: relative; z-index: 1; box-shadow: 20px 20px 0px rgba(255,255,255,0.5); opacity: 1; }
    /* 文字右（重なる） */
    #trouble .trouble_list {
        width: 50%; margin-left: -10%; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(15px);
        padding: 4rem; z-index: 2; border: 1px solid rgba(255, 255, 255, 0.8); opacity: 1;
    }
}
@media (max-width: 767px) {
    #trouble .trouble_list { width: 90%; margin: -2rem auto 0; background: rgba(255,255,255,0.9); padding: 2rem; position: relative; z-index: 2; }
}
#trouble .trouble_list li { padding: 1rem 0; border-bottom: 1px solid rgba(0,0,0,0.1); font-size: 13px; }
#trouble .trouble_list li::before { content: "0" counter(feature-num); margin-right: 1rem; color: #c1a3b5; font-family: "Optima"; }
#trouble .trouble_list { counter-reset: feature-num; }
#trouble .trouble_list li { counter-increment: feature-num; }


/* 7. 背景固定動画の設定 */
.fixed-background-video { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: -1; }
.fixed-background-video video { width: 100%; height: 100%; object-fit: cover; }
.fixed-background-video .video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.85); }
/* 2. 背景の固定動画エリア設定 */
.fixed-background-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1; /* 一番奥に配置 */
    background-color: #f0f0f0; /* 動画がない時の仮の色 */
}
.fixed-background-video video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fixed-background-video .video-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(255, 255, 255, 0.75); /* 白いフィルターをかけて文字を読みやすく */
}


/* 3. 背景の出し分け（指定の場所だけ透明にして動画を見せる） */

/* --- A. 動画を見せるセクション（透明にする） --- */
/* Message, Customer(#trouble), FAQ, Footer */
#message,
#trouble,
#faq,
.footer-container {
    background: transparent;
    position: relative;
    z-index: 10;
}

/* --- B. 動画を隠すセクション（白背景にする） --- */
/* Style, Salon, Staff, Blog は白くする */
#style,
#salon,
#staff,
#blog,
.main-container { /* 基本は白 */
    background-color: #ffffff;
    position: relative;
    z-index: 10;
}


/* 4. トップページ中央の文字（Tococa） */
.mv-centered-content {
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    text-align: center; width: 90%; z-index: 20; color: #ffffff;
    text-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.mv-centered-content .main-logo-text {
    font-family: 'Quicksand', 'Zen Maru Gothic', sans-serif;
    font-weight: 300; font-size: 60px; letter-spacing: 0.2em;
    margin-bottom: 20px; line-height: 1; color: #ffffff;
}
.mv-centered-content .main-concept-text {
    font-family: "Noto Serif JP", serif;
    font-size: 13px; letter-spacing: 0.1em; line-height: 2.2;
    font-weight: normal; color: #ffffff;
}
@media (max-width: 767px) {
    .mv-centered-content .main-logo-text { font-size: 42px; margin-bottom: 15px; }
    .mv-centered-content .main-concept-text { font-size: 11px; }
}
/* 5. 特徴（Customer/Trouble）エリアのデザイン調整 */

/* PCレイアウト：画像を左、文字を右に重ねる */
@media (min-width: 768px) {
    #trouble .trouble_wrap { display: flex; align-items: center; justify-content: flex-end; position: relative; }
    #trouble .img {
        width: 60%; position: relative; z-index: 1;
        box-shadow: 20px 20px 0px rgba(255,255,255,0.5); opacity: 1;
    }
    #trouble .trouble_list {
        width: 50%; margin-left: -10%;
        background: rgba(255, 255, 255, 0.7); /* すりガラス風 */
        backdrop-filter: blur(15px);
        padding: 4rem; z-index: 2;
        border: 1px solid rgba(255, 255, 255, 0.8); opacity: 1;
    }
}
/* スマホレイアウト */
@media (max-width: 767px) {
    #trouble .trouble_list {
        width: 90%; margin: -2rem auto 0;
        background: rgba(255,255,255,0.9); padding: 2rem;
        position: relative; z-index: 2;
    }
}
/* リスト装飾 */
#trouble .trouble_list li { padding: 1rem 0; border-bottom: 1px solid rgba(0,0,0,0.1); font-size: 13px; }
#trouble .trouble_list li::before { content: "0" counter(feature-num); margin-right: 1rem; color: #c1a3b5; font-family: "Optima"; }
#trouble .trouble_list { counter-reset: feature-num; }
#trouble .trouble_list li { counter-increment: feature-num; }


/* 3. 背景の固定動画エリア設定（画面いっぱいに広げる） */
.fixed-background-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1; /* 一番奥に配置 */
    background-color: #f0f0f0;
}
.fixed-background-video video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fixed-background-video .video-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(255, 255, 255, 0.75); /* 白いフィルター */
}

/* 4. 背景の出し分け（透明にして動画を見せる vs 白背景） */

/* A. 動画を見せる場所（透明にする） */
#message,
#trouble,
#faq,
.footer-container {
    background: transparent;
    position: relative;
    z-index: 10;
}

/* B. 動画を隠す場所（白背景にする） */
#style,
#salon,
#staff,
#blog,
.main-container {
    background-color: #ffffff;
    position: relative;
    z-index: 10;
}

/* 5. トップページ中央の文字（Tococa） */
.mv-centered-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 90%;
    z-index: 20;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.mv-centered-content .main-logo-text {
    font-family: 'Quicksand', 'Zen Maru Gothic', sans-serif;
    font-weight: 300;
    font-size: 60px;
    letter-spacing: 0.2em;
    margin-bottom: 20px;
    line-height: 1;
    color: #ffffff;
}
.mv-centered-content .main-concept-text {
    font-family: "Noto Serif JP", serif;
    font-size: 13px;
    letter-spacing: 0.1em;
    line-height: 2.2;
    font-weight: normal;
    color: #ffffff;
}
@media (max-width: 767px) {
    .mv-centered-content .main-logo-text { font-size: 42px; margin-bottom: 15px; }
    .mv-centered-content .main-concept-text { font-size: 11px; }
}

/* 3. 背景の固定動画エリア設定 */
.fixed-background-video {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    z-index: -1; /* 一番奥に配置 */
    background-color: #f0f0f0;
}
.fixed-background-video video {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 100%; height: 100%; object-fit: cover;
    display: none; /* デフォルト非表示（JSで制御するケースも考慮） */
}
/* PC用動画表示 */
.fixed-background-video video.video-pc { display: block; }
@media (max-width: 767px) {
    .fixed-background-video video.video-pc { display: none; }
    .fixed-background-video video.video-sp { display: block; }
}
/* 動画フィルター（白くする） */
.fixed-background-video .video-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(255, 255, 255, 0.75);
}

/* 4. 背景の出し分け（透明 vs 白） */

/* ▼ 動画を見せる場所（透明にする） */
#message,
#trouble, /* ←ここが特徴(Customer)エリアです */
#faq,
.footer-container {
    background: transparent;
    position: relative;
    z-index: 10;
}

/* ▼ 白背景にする場所（動画を隠す） */
#style,
#salon,
#staff,
#blog,
.main-container {
    background-color: #ffffff;
    position: relative;
    z-index: 10;
}

/* 5. トップページ中央の文字（Tococa） */
.mv-centered-content {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    text-align: center; width: 90%; z-index: 20; color: #ffffff;
    text-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.mv-centered-content .main-logo-text {
    font-family: 'Quicksand', 'Zen Maru Gothic', sans-serif;
    font-weight: 300; font-size: 60px; letter-spacing: 0.2em;
    margin-bottom: 20px; line-height: 1; color: #ffffff;
}
/* 7. タイトルを全て小さく・中央揃えに */
article section .title, #salon .title, #faq .title, #blog .title, #trouble .title2 {
    font-size: 24px !important;
    letter-spacing: 0.15em !important;
    text-align: center !important;
    margin-bottom: 2rem !important;
    width: 100%; display: block !important; padding: 0 !important;
}
article section .title .sub-title, #salon .title .sub-title, #faq .title .sub-title, #blog .title .sub-title, #trouble .title2 span {
    font-size: 11px !important;
    text-align: center !important;
    margin-top: 8px !important;
    width: 100%; display: block !important;
}
/* =========================================================
   ▼▼▼▼ 背景動画対応・透明化CSS：ここから下をstyle.cssの末尾に貼る ▼▼▼▼
   ========================================================= */

/* 1. フォント読み込み */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&family=Zen+Maru+Gothic:wght@300&display=swap');

/* 2. 背景の固定動画エリア設定 */
.fixed-background-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -10; /* 最背面に配置 */
    background-color: #f0f0f0; /* 動画読み込み前の仮色 */
}
.fixed-background-video video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none; /* デフォルト非表示 */
}
/* PC/スマホ用動画の出し分け */
.fixed-background-video video.video-pc { display: block; }
@media (max-width: 767px) {
    .fixed-background-video video.video-pc { display: none; }
    .fixed-background-video video.video-sp { display: block; }
}
/* 動画上の薄いフィルター（文字を見やすくする） */
.fixed-background-video .video-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    /* 濃さは最後の数値(0.5)で調整：0で透明、1で真っ白 */
    background-color: rgba(255, 255, 255, 0.5); 
}


/* 3. トップページメインビジュアル (MV) の設定 */
/* MVは動画や画像があるので、その背景が透けないように白指定 */
.mv {
    background-color: #ffffff; 
    position: relative;
    z-index: 10;
}


/* 4. MV以下のセクションを透明化して、奥の動画を見せる */

/* 親コンテナ、各セクション、フッターを透明に */
.main-container,
#message,
#trouble,
#style,
#salon,
#faq,
#staff,
#blog,
.footer-container,
.bg-beige, /* 元々の背景色クラスを無効化 */
article section {
    background: transparent !important;
}

/* サロンなどのインラインスタイル背景画像も消す場合 */
#salon {
    background-image: none; /* ← 後ろの background: #f7f7f7 で上書きされる */
}


/* 5. 文字の視認性を確保するための調整 */
/* 動画の上でも文字が読めるよう、各アイテムに薄い白背景を入れる */

/* トラブル(Customer)リスト */
#trouble .trouble_list {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px);
    border-radius: 4px;
    padding: 2rem;
}

/* スタイル、ブログ、サロンの写真リストなど */
.style_list li, .blog_list li, .salon_list li {
    background: rgba(255, 255, 255, 0.6);
}
/* FAQリスト */
#faq .faq_list li {
    background: rgba(255, 255, 255, 0.8); /* ← 後ろの rgba(0.85) で上書きされる */
}

/* フッターの文字色調整（背景が動画になるため） */
.footer-container {
    color: #444 !important;
}
/* フッター情報エリアに薄い背景 */
.footer-container .shop_info {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(5px);
}


/* 6. トップページ中央文字（Tococa）のスタイル */
.mv-centered-content {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 90%;
    z-index: 20;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0,0,0,0.3);
    pointer-events: none; /* クリックを邪魔しない */
}
.mv-centered-content .main-logo-text {
    font-family: 'Quicksand', 'Zen Maru Gothic', sans-serif;
    font-weight: 300;
    font-size: 60px;
    letter-spacing: 0.2em;
    margin-bottom: 20px;
    line-height: 1;
    color: #ffffff;
}
.mv-centered-content .main-concept-text {
    font-family: "Noto Serif JP", serif;
    font-size: 13px !important;
    letter-spacing: 0.1em;
    line-height: 2.2;
    font-weight: normal;
    color: #ffffff;
}
/* スマホ調整 */
@media (max-width: 767px) {
    .mv-centered-content .main-logo-text { font-size: 42px; margin-bottom: 15px; }
    .mv-centered-content .main-concept-text { font-size: 11px !important; }
}
/* 元のタイトルは非表示 */
.mv #header .mv_title { display: none !important; }
/* ==========================================================================
   ▼▼▼▼ 背景修正用コード：style.cssの「一番最後」に貼り付けてください ▼▼▼▼
   ========================================================================== */

/* 1. コンテンツ全体の背景を「白」に戻す */
/* これにより、スクロールするとスライド画像の上に白背景が被さるようになります */
body.home .main-container {
    background-color: #ffffff;
    margin-top: 100vh; /* スライドの高さ分空ける */
    position: relative;
    z-index: 20; /* スライドより手前に表示 */
}

/* 2. 各セクションの透明化を解除して白背景にする */
/* 以前のコードで transparent 強制指定されていた部分を打ち消します */
#message,
#trouble,
#style,
#salon,
#faq,
#staff,
#blog,
.footer-container,
article section {
    background-color: #ffffff;
    background: #ffffff;
}

/* 3. 特徴（Customer/Trouble）エリアの見た目調整 */
/* 白背景になるため、すりガラス風の半透明ボックスを解除してシンプルにします */
#trouble .trouble_list {
    background: transparent; /* 親が白なのでここは透明でOK */
    backdrop-filter: none; /* ← 後ろの PC ルールと同値 */
    border: none; /* ← 後ろの border: none で上書きされる */
    padding: 0; /* 余白調整（お好みで） */
}

/* PC表示時のレイアウト微調整（白背景用） */
@media (min-width: 768px) {
    #trouble .trouble_list {
        background: transparent;
        border: none; /* ← 後ろの border: none で上書きされる */
        box-shadow: none;
    }
}

/* 4. フッター背景の調整 */
/* フッターも白背景で見やすくします */
.footer-container .foot-wrap,
.footer-container .shop_info {
    background-color: #f8f8f8 !important; /* 少し色を変えるなら薄いグレー、白なら#ffffff */
    backdrop-filter: none;
}
/* ==========================================================================
   ▼▼▼▼ フッターの透明化・修正コード ▼▼▼▼
   ここをstyle.cssの一番最後に追記してください
   ========================================================================== */

/* 1. フッター全体と、その中の枠組みを強制的に透明にする */
footer,
.footer-container,
.footer-container .foot-wrap,
address {
    background: transparent;
    background-color: transparent;
}

/* 2. もしフッター内に古い動画エリアや背景画像があれば非表示にする */
.footer-video-wrap,
.footer-video-overlay {
    display: none !important;
}

/* 3. フッター内の情報エリア（店舗情報など）だけ「うっすら白」にする */
/* これがないと文字が動画に重なって読みにくくなるため */
.footer-container .shop_info {
    background: rgba(255, 255, 255, 0.6); /* 透明度0.6の白 */
    backdrop-filter: blur(5px);
    border-radius: 8px;
    padding: 2rem;
    margin-top: 2rem; /* 上に少し隙間を空ける */
}

/* 4. マップ（Google Map）周りの調整 */
/* マップの周りが白くなっている場合は透明に */
.footer-container .foot-wrap .map {
    background: transparent;
}

/* 5. 最下部のコピーライト部分があれば調整 */
#copyright, .copyright {
    background: rgba(255, 255, 255, 0.6) !important;
}
/* ==========================================================================
   ▼▼▼▼ 【最終調整版】背景の交互切り替え＆フッター調整 ▼▼▼▼
   style.cssの一番最後に貼り付けてください（以前の追加コードは削除してください）
   ========================================================================== */

/* ----------------------------------------------------------
   1. 背景の固定動画エリア設定（一番奥に配置）
---------------------------------------------------------- */
.fixed-background-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -999; /* 最背面 */
    background-color: #f0f0f0;
}
.fixed-background-video video {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 100%; height: 100%; object-fit: cover;
}
/* PC/スマホ切り替え */
.video-pc { display: block; }
.video-sp { display: none; }
@media (max-width: 767px) {
    .video-pc { display: none; } .video-sp { display: block; }
}
/* 動画の上のフィルター（0.6くらいでうっすら白く） */
.fixed-background-video .video-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(255, 255, 255, 0.6);
}

/* ----------------------------------------------------------
   2. メインビジュアル（スライド画像）の設定
---------------------------------------------------------- */
/* スライド画像は固定せず、スクロールで流れるようにする */
body.home .mv {
    position: relative !important;
    background-color: #ffffff;
    z-index: 20;
    margin-bottom: 0 !important; /* 下の隙間をなくす */
}

/* メインコンテナの余白リセット */
body.home .main-container {
    margin-top: 0 !important;
    background-color: transparent;
}

/* ----------------------------------------------------------
   3. 背景の振り分け（白 vs 動画）
---------------------------------------------------------- */

/* 【グループA】背景を「動画（透明）」にするセクション */
/* Message, Style, FAQ, Footer */
#message,
#style,
#faq,
.footer-container {
    position: relative;
    z-index: 10;
    padding-top: 5rem !important;
    padding-bottom: 0 !important;
}
.footer-container {
    padding-top: 0 !important;
}

/* 【グループB】背景を「白」にするセクション */
/* Trouble, Salon, Blog */
#trouble,
#salon,
#blog {
    background-color: #ffffff;
    position: relative;
    z-index: 10;
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}
/* スタッフは非表示とのことですが、念のため透明にしておく */
#staff {
    background: transparent; /* ← 後ろの background: #f7f7f7 で上書きされる */
    display: none; /* 非表示指定 */
}


/* ----------------------------------------------------------
   4. 動画背景エリアの文字を読みやすくする装飾
---------------------------------------------------------- */

/* --- #message (Concept) --- */
/* 文字がある右側エリアに薄い白背景を入れる */
#message .info {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px);
    padding: 2rem;
    border-radius: 8px;
}

/* --- #style (Style) --- */
/* 写真のキャプション等があれば見やすく */
#style .style_list li a {
    background: rgba(255, 255, 255, 0.6);
    display: block;
}

/* --- #faq (Q&A) --- */
/* 質問リストに白背景を入れて読みやすく */
#faq .faq_list li {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-radius: 8px;
}

/* --- Footer (フッター) --- */
/* 店舗情報（アドレス部分）に白いカバーをかける */
.footer-container .foot-wrap .shop_info {
    background: rgba(255, 255, 255, 0.8); /* 濃いめの半透明白 */
    backdrop-filter: blur(8px); /* すりガラス効果 */
    border-radius: 10px;
    padding: 3rem; /* 余白を広めにとって上品に */
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    margin-bottom: 2rem;
}
/* マップ周りは透明でOK */
.footer-container .foot-wrap .map {
    background: transparent !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1); /* マップ自体を少し浮かせる */
}

/* 動画背景エリアのタイトル文字に影をつけて読みやすく */
#message .title, 
#style .title, 
#faq .title,
.footer-container .title a {
    text-shadow: 2px 2px 8px rgba(255, 255, 255, 1);
}
/* フッターの白い枠・背景を削除するコード */
.footer-container .foot-wrap .shop_info {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
}
/* ==========================================================================
   ヘッダーを最前面に固定する設定
   ========================================================================== */
.header-container,
.site-header {
    position: relative; /* 必要に応じてfixedが効くように親を調整 */
    z-index: 99999; /* ← 後の z-index: 9000 強制指定で上書きされる */
}

/* 固定ヘッダー部分 */
.header-container header .site-header {
    z-index: 99999 !important;
}
/* ==========================================================================
   【最終修正版】予約ボタンの設定
   （既存のfooter.phpのスクリプトと連動して色を切り替えます）
   ========================================================================== */

/* 1. ボタンの基本位置設定 */
.fixed-bnr,
.fixed-bnr .fixed-bnr-inner {
    position: fixed;
    z-index: 9998;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    top: 0;
    right: 60px;
}

/* 2. 【トップ（スライド画像の上）】にいる時のデザイン */
/* 白文字・透明背景 */
.fixed-bnr .fixed-bnr-inner a {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease !important;
}
/* 矢印アイコンも白 */
.fixed-bnr .fixed-bnr-inner a span {
    color: #ffffff !important;
}

/* 3. 【スクロールして下に行った時】のデザイン */
/* footer.phpのJSが .fixed-bnr に "is-scrolled" をつけた時に発動 */
.fixed-bnr.is-scrolled .fixed-bnr-inner a {
    background: rgba(255, 255, 255, 0.9); /* ← 後の rgba(0.7) 強制指定で上書きされる */
    border: 1px solid #444444 !important;            /* グレー枠 */
    color: #444444 !important;                       /* グレー文字 */
}
/* スクロール時の矢印アイコンはグレー */
.fixed-bnr.is-scrolled .fixed-bnr-inner a span {
    color: #444444 !important;
}

/* 4. マウスを乗せた時の動き */
.fixed-bnr .fixed-bnr-inner a:hover {
    background: #444444 !important;
    color: #ffffff !important;
    border-color: #444444 !important;
    opacity: 1 !important;
}
.fixed-bnr .fixed-bnr-inner a:hover span {
    color: #ffffff !important;
}
/* ==========================================================================
   ▼▼▼▼ 重なり順（z-index）の修正コード ▼▼▼▼
   ※ヘッダーの白背景がボタンの上に被らないように順序を入れ替えます
   style.cssの一番最後に追加してください
   ========================================================================== */

/* 1. ヘッダーを少し奥に下げる */
/* 予約ボタン(9998)より小さい数字にします */
.header-container,
.site-header {
    z-index: 9000 !important; 
}

/* 2. 予約ボタンをヘッダーより手前に出す */
/* ヘッダー(9000)より大きく、メニュー(10000)より小さい数字にします */
.fixed-bnr,
.fixed-bnr .fixed-bnr-inner {
    z-index: 9998;
}

/* 3. メニュー（開いた時）は一番手前のまま維持 */
/* これでメニューを開いた時だけボタンが隠れます */
.navToggle,
.globalMenu {
    z-index: 10000 !important;
}
/* ==========================================================================
   ▼▼▼▼ 最終仕上げ：ボタン透明度＆Salon画像復活 ▼▼▼▼
   style.cssの一番最後に追加してください
   ========================================================================== */

/* 1. 予約ボタンの背景を「軽く薄く」する */
.fixed-bnr.is-scrolled .fixed-bnr-inner a {
    /* 0.95(ほぼ真っ白) から 0.7(ほどよい半透明) に変更 */
    background: rgba(255, 255, 255, 0.7) !important;
    
    /* 読みやすさ確保のため、すりガラス効果を少し強める */
    backdrop-filter: blur(8px) !important;
}
/* ----------------------------------------------------------
   4. 消えてしまったSalon画像の復活
---------------------------------------------------------- */
/* アニメーション待ちで透明になっているのを強制表示 */
#salon .salon_list,
#salon .salon_list li,
.fadeup {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}
/* ==========================================================================
   ▼▼▼▼ 【最終・完成版】スマホ専用：角丸なし・壁ピタ・同系色ボタン ▼▼▼▼
   ※直前のコードを削除して、これを一番最後に貼り付けてください
   ========================================================================== */

@media (max-width: 767px) {

    /* ==========================================================
       1. トップページ：Message & Features (Trouble)
       ========================================================== */
    
    /* --- 共通リセット --- */
    #message .img, #message .info,
    #trouble .img, #trouble .trouble_list {
        transform: none; /* ← 後ろの mobile translateX (line 3106-3121) で上書き */
        opacity: 1; /* ← 後ろの opacity: 0 (line 3054) で上書き */
        box-shadow: none !important;
        border: none !important;
        margin: 0 !important;
    }

    /* 古い飾りを消す */
    #trouble .trouble_list::before,
    #trouble .trouble_list::after,
    #trouble .title2::before {
        display: none !important;
    }

    /* セクション余白 */
    #message, #trouble {
        padding: 4rem 0 !important;
        overflow: hidden; 
    }

    /* タイトル（Features）の修正 */
    /* ↓ 以下は後ろの #message .title, #trouble .title2 ブロックで全て上書きされる */
    #trouble .title2 {
        font-size: 24px; /* ← @media(max-width:767px) 内の後ろで 20px に変更 */
        letter-spacing: 0.15em;
        text-align: center;
        margin-bottom: 2rem;
        color: #222222;
        width: 100%;
        display: block;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }
    #trouble .title2 span {
        display: block;
        font-size: 11px;
        margin-top: 10px;
        color: #444444;
        text-align: center;
    }

    /* ★ボタン修正：同系色（半透明の白を重ねて少し明るいベージュにする） */
    #message .link-btn, #trouble .link-btn {
        /* 背景色：真っ白をやめて、うっすら透ける白（＝明るいベージュに見える） */
        background-color: rgba(255, 255, 255, 0.3); /* ← 後ろの all-sizes rgba(0.3) で上書きされる */

        /* 枠線：細い線に戻す */
        border: 1px solid #444444; /* ← 後ろの all-sizes #cccccc で上書きされる */

        /* 文字色：グレー */
        color: #444444; /* ← 後ろの all-sizes #333333 で上書きされる */

        margin: 2rem auto 0 !important;
        border-radius: 0; /* ← 後ろの all-sizes border-radius: 0 で上書きされる */
        font-weight: normal !important; /* 文字の太さも上品に戻す */
    }

    /* --- Message (Concept) エリア --- */
    #message .message_wrap { display: flex; flex-direction: column; }

    /* 文章：左の壁から（角丸なし） */
    #message .info {
        width: calc(100% + 15px); /* ← 後ろの 85% で上書きされる */
        margin-left: -15px; /* ← 後ろの auto で上書きされる */
        margin-right: 20px; /* ← 後ろの 0 で上書きされる */
        margin-bottom: 3rem; /* ← 後ろの 4rem で上書きされる */

        background: #e1d5e1; /* ← 後ろの同値で上書きされる */
        color: #444444 !important;
        padding: 2.5rem 2rem; /* ← 後ろの 3rem 2rem で上書きされる */
        box-shadow: 5px 5px 15px rgba(0,0,0,0.05); 
        
        border-radius: 0 !important; /* 角丸なし */
        
        position: relative;
        z-index: 2;
    }

    /* 写真：右の壁から（角丸なし） */
    #message .img {
        width: calc(100% + 15px); /* ← 後ろの 85% で上書きされる */
        margin-right: -15px; /* ← 後ろの auto で上書きされる */
        margin-left: 20px; /* ← 後ろの 0 で上書きされる */
        position: relative;
        z-index: 1;
    }
    #message .img img {
        width: 100%; /* ← 後ろの 100% で上書きされる */
        border-radius: 0 !important; /* 角丸なし */
        box-shadow: -5px 5px 15px rgba(0,0,0,0.1);
    }

    /* --- Features (Trouble) エリア --- */
    #trouble .trouble_wrap { display: flex; flex-direction: column; margin-top: 2rem; }

    /* 文章：右の壁から（角丸なし） */
    #trouble .trouble_list {
        width: calc(100% + 15px); /* ← 後ろの 85% で上書きされる */
        margin-right: -15px; /* ← 後ろの auto で上書きされる */
        margin-left: 20px; /* ← 後ろの 0 で上書きされる */
        margin-bottom: 3rem; /* ← 後ろの 6rem で上書きされる */

        background: #e1d5e1; /* ← 後ろの同値で上書きされる */
        color: #444444 !important;
        padding: 2.5rem 2rem; /* ← 後ろの 3rem 2rem で上書きされる */
        box-shadow: -5px 5px 15px rgba(0,0,0,0.05);
        
        border-radius: 0 !important; /* 角丸なし */
        
        position: relative;
        z-index: 2;
    }

    /* 写真：左の壁から（角丸なし） */
    #trouble .img {
        width: calc(100% + 15px); /* ← 後ろの 85% で上書きされる */
        margin-left: -15px; /* ← 後ろの auto で上書きされる */
        margin-right: 20px; /* ← 後ろの 0 で上書きされる */
        position: relative;
        z-index: 1;
    }
    #trouble .img img {
        width: 100%; /* ← 後ろの 100% で上書きされる */
        border-radius: 0 !important; /* 角丸なし */
        box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
    }


    /* ==========================================================
       2. コンセプトページ：リスト (Choice)
       ========================================================== */
    
    .page:not(.home) .concept #choice .choice_wrap {
        overflow: visible !important;
        padding: 0 !important;
    }

    /* 共通枠設定（角丸なし） */
    .page:not(.home) .concept #choice .choice_wrap .choice_item {
        display: flex !important;
        align-items: stretch !important;
        width: calc(100% - 20px); /* ← 後ろの 100% で上書きされる */

        background: #e1d5e1 !important;
        padding: 0; /* ← 後ろの同値で上書きされる */
        margin-bottom: 3rem; /* ← 後ろの同値で上書きされる */
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);

        position: relative;
        z-index: 1;
        overflow: hidden; /* ← 後ろの同値で上書きされる */

        border-radius: 0 !important; /* 角丸なし */
    }

    /* 写真エリア */
    .page:not(.home) .concept #choice .choice_item .img {
        width: 45%; /* ← 後ろの 100% で上書きされる */
        flex-shrink: 0 !important;
        margin: 0; /* ← 後ろの同値で上書きされる */
        position: relative;
    }
    .page:not(.home) .concept #choice .choice_item .img img {
        width: 100%; /* ← 後ろの同値で上書きされる */
        height: 100% !important;
        aspect-ratio: unset; /* ← 後ろの 4/3 で上書きされる */
        object-fit: cover; /* ← 後ろの同値で上書きされる */
        object-position: center center !important;
        vertical-align: bottom;
        box-shadow: none; /* ← 後ろの同値で上書きされる */

        border-radius: 0 !important; /* 角丸なし */
    }

    /* 文章エリア */
    .page:not(.home) .concept #choice .choice_item .txt {
        width: 55%; /* ← 後ろの 100% で上書きされる */
        padding: 1.5rem; /* ← 後ろの同値で上書きされる */
        background: transparent; /* ← 後ろの mobile #e1d5e1 (line 2791) で上書き */
        margin: 0; /* ← 後ろの同値で上書きされる */
        color: #444444 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    .page:not(.home) .concept #choice .choice_item .txt h3 {
        margin-top: 0 !important;
        margin-bottom: 0.8rem !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
    }
    .page:not(.home) .concept #choice .choice_item .txt p {
        font-size: 11px !important;
        line-height: 1.8 !important;
    }

    /* 奇数番目（写真→文章）：左壁ピタ */
    .page:not(.home) .concept #choice .choice_wrap .choice_item:nth-of-type(odd) {
        flex-direction: row; /* ← 後ろの column で上書きされる */
        margin-left: -15px; /* ← 後ろの 0 で上書きされる */
        margin-right: auto; /* ← 後ろの 0 で上書きされる */
    }

    /* 偶数番目（文章←写真）：右壁ピタ */
    .page:not(.home) .concept #choice .choice_wrap .choice_item:nth-of-type(even) {
        flex-direction: row-reverse; /* ← 後ろの column で上書きされる */
        margin-right: -15px; /* ← 後ろの 0 で上書きされる */
        margin-left: auto; /* ← 後ろの 0 で上書きされる */
    }
}
/* ==========================================================================
   ▼▼▼▼ Features（Trouble）リスト修正：数字削除＆区切り線 ▼▼▼▼
   style.cssの一番最後に追加してください
   ========================================================================== */

@media (max-width: 767px) {

    /* リスト項目のデザイン変更 */
    #trouble .trouble_list li {
        border-bottom: 1px solid #ffffff !important; /* 白い区切り線を追加 */
        padding: 1.2rem 0 !important; /* 上下の間隔を少し広げて見やすく */
        list-style: none !important;
    }

    /* 最初の項目の上余白を削除（コンテナpadding-topと揃える） */
    #trouble .trouble_list li:first-child {
        padding-top: 0 !important;
    }

    /* 最後の項目の線と下余白を消す */
    #trouble .trouble_list li:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    /* 数字（01, 02...）を完全に消す */
    #trouble .trouble_list li::before {
        content: none !important;
    }
}
/* ==========================================================================
   ▼▼▼▼ セクションタイトルの文字サイズ縮小 ▼▼▼▼
   style.cssの一番最後に追加してください
   ========================================================================== */

@media (max-width: 767px) {

    /* メインタイトル（英語部分）を小さくする */
    article section .title,
    #message .title,
    #trouble .title2,
    #style .title,
    #salon .title,
    #faq .title,
    #blog .title {
        font-size: 20px !important; /* 24px → 20px に変更 */
        margin-bottom: 1.5rem !important; /* 下の余白も少し詰める */
    }

    /* サブタイトル（日本語部分）もバランスを見て少し小さく */
    article section .title .sub-title,
    #trouble .title2 span,
    #salon .title .sub-title,
    #faq .title .sub-title,
    #blog .title .sub-title {
        font-size: 10px !important; /* 11px → 10px に変更 */
        margin-top: 5px !important;
    }
}
/* ==========================================================================
   ▼▼▼▼ PC専用：Message & Features 統一レイアウト（写真が上・左右交互） ▼▼▼▼
   style.cssの一番最後に追加してください
   ========================================================================== */

@media (min-width: 768px) {
    /* Featuresリストの見た目調整 */
    #trouble .trouble_list {
        backdrop-filter: none !important;
    }
    #trouble .trouble_list::before,
    #trouble .trouble_list::after {
        display: none !important;
    }
    #trouble .trouble_list li {
        border-bottom: 1px solid #ffffff !important;
        padding: 1.5rem 0 !important;
        font-size: 14px !important;
    }
    #trouble .trouble_list li:last-child {
        border-bottom: none !important;
    }
    #trouble .trouble_list li::before {
        display: none !important;
    }
}
/* ==========================================================================
   ▼▼▼▼ 「投稿はありません」などのメッセージを中央揃え（PC/スマホ共通） ▼▼▼▼
   style.cssの一番最後に追加してください
   ========================================================================== */

/* 各セクションのリスト内で、記事がない場合に表示されるPタグ（文章）を中央寄せ */
#faq .faq_list p,
#blog .blog_list p,
#style .style_list p,
#staff .staff_list p,
#salon .salon_list p,
#trouble .trouble_list p,
.no-post,
.not-found {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    margin: 3rem auto !important; /* 上下に余白を持たせる */
    color: #444444 !important;
}

/* Flexボックスの影響で左に寄るのを防ぐため、コンテナ自体も中央寄せ設定にしておく */
#faq .faq_list,
#blog .blog_list,
#style .style_list,
#staff .staff_list {
    justify-content: center !important;
}
/* ==========================================================================
   ▼▼▼▼ Message & Features ボタン枠線の修正（共通） ▼▼▼▼
   style.cssの一番最後に追加してください
   ========================================================================== */

#message .link-btn,
#trouble .link-btn {
    /* 背景はなじむように薄い半透明の白のまま */
    background-color: rgba(255, 255, 255, 0.3) !important;
}

/* ==========================================================================
   ▼▼▼▼ 【強制適用版】タイトル位置・フォント統一＆PCレイアウト修正 ▼▼▼▼
   ※以前の追加コードを削除し、これだけを一番最後に貼り付けてください
   ========================================================================== */

/* ----------------------------------------------------------
   1. Message & Features タイトルの「位置」と「フォント」を強制統一
---------------------------------------------------------- */
/* id指定(#)と強制指定を使って、既存の設定を完全に上書きします */
#message .title,
#trouble .title2 {
    display: block !important;
    position: relative !important; /* 絶対配置を解除して自然な位置に戻す */
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto 3rem auto !important; /* 下に余白 */
    padding-top: 1rem !important;
    
    /* ★フォントを他のタイトルと同じ「明朝体」に統一 */
    font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif !important;
    font-weight: normal !important;
    letter-spacing: 0.15em !important;
    
    color: #222222 !important;
    background: transparent !important;
    z-index: 10 !important;
    opacity: 1 !important; /* アニメーションで見えなくなるのを防ぐ */
}

/* 文字サイズ（スマホ）は L2150 の @media(max-width:767px) で設定済み */
/* 文字サイズ（PC） */
@media (min-width: 768px) {
    #message .title, #trouble .title2 { font-size: 24px !important; }
}

/* サブタイトル（日本語部分）も明朝体に */
#message .title span,
#message .title .sub-title,
#trouble .title2 span {
    display: block !important;
    font-family: "Noto Serif JP", serif !important;
    font-size: 11px !important;
    margin-top: 10px !important;
    text-align: center !important;
    color: #444444 !important;
    width: 100% !important;
}

/* Messageセクション自体に余白を持たせて、タイトルが被らないようにする */
#message {
    padding-bottom: 4rem !important; /* padding-top は L1687 の 5rem を継承 */
}


/* ==========================================================================
   ▼▼▼▼ 【修正】トップへ戻るボタン：最前面表示＆色統一 ▼▼▼▼
   style.cssの一番最後に追加してください
   ========================================================================== */

/* 1. ボタンを常に最前面に表示（白背景の下に隠れないようにする） */
#page-top {
    z-index: 99999 !important; 
}

/* 2. ボタンの色をメッセージ枠（くすみベージュ）に合わせる */
#page-top a {
    background: #e1d5e1 !important; /* メッセージ枠と同じ色 */
    color: #444444 !important;      /* 矢印は濃いグレーで見やすく */
}

/* マウスを乗せた時の色（少し濃くして反応させる） */
#page-top a:hover {
    background: #d0c0d0 !important;
    opacity: 1 !important;
}
/* ==========================================================================
   ▼▼▼▼ 【修正】トップロゴの表記変更（Tocóca）＆サイズアップ ▼▼▼▼
   style.cssの一番最後に追加してください
   ========================================================================== */

/* 1. 元の「Tococa」という文字を消す */
.mv-centered-content .main-logo-text {
    font-size: 0 !important; /* 文字サイズを0にして見えなくする */
    line-height: 0 !important;
    color: transparent; /* ← 後ろの rgba(0.92) で上書きされる */
}

/* 2. 新しい「Tocóca」という文字を生成して表示する */
.mv-centered-content .main-logo-text::after {
    content: "Tocóca" !important; /* ここで文字を書き換え */
    
    display: block !important;
    color: #ffffff !important;
    
    /* フォント設定（元のデザインを継承） */
    font-family: 'Quicksand', 'Zen Maru Gothic', sans-serif !important;
    font-weight: 300 !important;
    letter-spacing: 0.2em !important;
    line-height: 1.2 !important;
    
    /* ★サイズを大きくする設定（PC） */
    font-size: 80px !important; /* 元は60pxくらいでした */
    
    /* 影をつけて読みやすく */
    text-shadow: 0 0 15px rgba(0,0,0,0.3) !important;
}

/* 3. スマホ表示時のサイズ調整 */
@media (max-width: 767px) {
    .mv-centered-content .main-logo-text::after {
        /* ★サイズを大きくする設定（スマホ） */
        font-size: 50px !important; /* 元は42pxくらいでした */
        margin-bottom: 10px !important;
    }
}
/* ==========================================================================
   ▼▼▼▼ 【修正】ボタンが二重になる（残像が出る）バグの解消 ▼▼▼▼
   ※他のアニメーションには一切干渉しません
   ========================================================================== */

body.home .main-container .link-btn {
    /* transition: all がフェードアップの動きと喧嘩して二重になるのを防ぐ */
    /* マウスホバー時の変化を「色」と「枠線」だけに限定します */
    transition-property: background-color, color, border-color !important;
    transition-duration: 0.4s !important;
}
/* ==========================================================================
   ▼▼▼▼ メニューの「カテゴリー（グループ）」ごとに半透明の背景を敷く ▼▼▼▼
   ※先ほどのコードは削除して、こちらを追加してください
   ========================================================================== */

/* メニューのカテゴリー全体を囲むよくあるクラス名を指定しています */
#menu .menu_box,
#menu .menu_section,
#menu .menu-category,
#menu .menu_wrap,
.menu-block {
    /* 指定色 #c1a3b5 の半透明（0.25 = 25%の濃さ。透け感を出しています） */
    background-color: rgba(193, 163, 181, 0.25) !important;
    
    /* 枠の内側に余白を作る（文字が枠のギリギリにならないように） */
    padding: 3rem 2.5rem !important;
    
    /* グループ同士の間（定番メニューとカラーメニューの間など）に隙間をあける */
    margin-bottom: 4rem !important;
}

/* スマホ表示時の余白を少し調整 */
@media (max-width: 767px) {
    #menu .menu_box,
    #menu .menu_section,
    #menu .menu-category,
    #menu .menu_wrap,
    .menu-block {
        padding: 2rem 1.5rem !important;
        margin-bottom: 3rem !important;
    }
}
/* ==========================================================================
   ▼▼▼▼ アクセスページの動画背景適用 ＆ スタッフページの表示 ▼▼▼▼
   style.cssの一番最後に追加してください
   ========================================================================== */

/* ----------------------------------------------------------
   1. スタッフページ（セクション）を強制的に表示する
---------------------------------------------------------- */
#staff {
    display: block !important; /* 非表示を解除してブロック要素として表示 */
    opacity: 1 !important;     /* 透明化を解除 */
    visibility: visible !important;
    height: auto !important;
}

/* ----------------------------------------------------------
   2. アクセス（Access）ページに動画背景を反映させる
---------------------------------------------------------- */
/* アクセスセクションの背景を透明にして、後ろの動画を見せる */
#access {
    background-color: transparent; /* ← 後ろの background-color: #f7f7f7 で上書きされる */
    background-image: none; /* ← 後ろの background: #f7f7f7 で上書きされる */
}

/* もしアクセスページ専用の動画コンテナが非表示になっている場合、それを表示する */
#access .video-wrap,
#access .bg-video,
body.page-access .video-bg {
    display: block !important;
    opacity: 1 !important;
    z-index: -1 !important; /* コンテンツの後ろに配置 */
}
/* ==========================================================================
   ▼▼▼▼ 【完全版】メニュー展開時のバツボタン・予約ボタンの表示と操作 ▼▼▼▼
   ※以前のメニュー・予約ボタン関連のコードは消して、これを一番最後に貼ってください
   ========================================================================== */

/* 1. バツボタンと予約ボタンを「透明な壁」よりも確実に手前に出して、クリックできるようにする */
.menu-box,
.navToggle {
    position: relative !important;
    z-index: 2147483647; /* ← 後ろの z-index: 2147483646 強制指定で上書きされる */
    pointer-events: auto !important; /* ★クリック判定を強制的に復活させる */
}
.fixed-bnr {
    z-index: 2147483647; /* ← 後の z-index: 2147483646 強制指定で上書きされる */
    pointer-events: auto !important;
}

/* 2. メニューが開いている時（バツボタンの時）、線を強制的に「黒」にする */
.navToggle.active span {
    background-color: #000000; /* ← 後ろの #ffffff で上書きされる */
}

/* 3. メニューが開いている時、予約ボタンの文字を強制的に「黒」にする */
body:has(.navToggle.active) .fixed-bnr a,
body:has(.navToggle.active) .fixed-bnr a span {
    color: #000000; /* ← 後ろの #ffffff で上書きされる */
}

/* 4. メニューの中の文字（ページ名など）も「黒」にする */
.globalMenu a,
.globalMenu span,
.globalMenu li {
    color: #000000; /* ← 後ろの #ffffff / #cccccc で上書きされる */
}
/* ==========================================================================
   ▼▼▼▼ 【修正】三本線(バツ)を予約ボタンの右側＆同じ高さにピッタリ合わせる ▼▼▼▼
   ========================================================================== */

/* 1. 予約ボタンは元の高さをキープ。右側に三本線を入れる隙間だけ空ける */
.fixed-bnr {
    right: 55px; /* ← 後の right: auto 強制指定で上書きされる */
    left: auto; /* ← 後ろのブロックで同値に上書きされる */
    /* 高さ（topやbottom）は元のままいじりません */
}

/* 2. 三本線（バツ）を「もっと右」で「予約ボタンと同じ高さ」に持っていく */
.menu-box {
    position: fixed !important;
    
    /* ★もっと右に寄せる（0px で画面の右端ギリギリになります。少し内側がいいなら 5px などに） */
    right: 0px !important; 
    
    /* ★高さを合わせる（この数字をいじって、予約ボタンの一番上の線とピッタリ揃えて！） */
    /* ※もし予約ボタンが画面の一番上ギリギリにあるなら、ここを 0px にしてみてください */
    top: 1px !important; 
    
    margin: 0 !important;
}
/* ==========================================================================
   ▼▼▼▼ ヘッダー画像上の「CONCEPT」などの文字を強制的に救出する ▼▼▼▼
   ========================================================================== */

/* 1. タイトル（h1）を画面のど真ん中＆最前面に配置する */
.main-img h1.mv_title {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    /* 画像や黒い膜をぶち抜いて一番手前に出す最強の数字 */
    z-index: 2147483647 !important; 
    
    width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
    
    /* 検証ツールで触れる（選択できる）ようにする */
    pointer-events: auto !important; 
}

/* 2. fadeupの「透明のまま固まるバグ」を完全破壊して強制表示する */
.main-img h1.mv_title span.fadeup {
    opacity: 1 !important; /* 透明マントを剥がす！ */
    visibility: visible !important;
    display: inline-block !important;
    
    /* アニメーション関連をすべて無効化（ここで止まっているのが原因のため） */
    animation: none !important; 
    transition: none !important; 
    transform: none !important; 
    
    /* 黒い膜の上でも目立つように白文字にする */
    color: #ffffff !important; 
}
/* ==========================================================================
   ▼▼▼▼ 全ページの背景を白に統一＆動画背景を無効化するコード ▼▼▼▼
   ========================================================================== */

/* 1. 背景の動画要素を完全に非表示にする */
.fixed-background-video,
.video-wrap,
.bg-video,
.video-bg {
    display: none !important;
}

/* 2. ベースとなる画面全体とメインコンテナの背景を白に固定 */
html, body,
.main-container,
body.home .main-container {
    background-color: #ffffff;
    background-image: none;
}

/* 3. 動画を見せるために透明化していた全セクションを白背景で上書き */
#message,
#trouble,
#style,
#salon,
#faq,
#staff,
#blog,
#access,
#menu,
.page:not(.home) .concept,
.footer-container,
.footer-container .foot-wrap,
address,
article section {
    background: #ffffff;
    background-color: #ffffff;
}

/* 4. メニューページの半透明枠を白背景に馴染ませる */
#menu .menu_box,
#menu .menu_section,
#menu .menu-category,
#menu .menu_wrap,
.menu-block {
    background-color: #ffffff;
    border: 1px solid #e1d5e1 !important;
    box-shadow: none !important;
}

/* 5. フッター情報エリアの「うっすら白（すりガラス）」をリセット */
.footer-container .shop_info {
    background: transparent;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border: 1px solid #e5e0db !important;
}

/* 4. 【修正】メニューページの各カテゴリー枠は色を消さずに維持する */
#menu .menu_box,
#menu .menu_section,
#menu .menu-category,
#menu .menu_wrap,
.menu-block {
    /* 前回の半透明のテーマカラーを上書きして維持します */
    background-color: rgba(193, 163, 181, 0.25);
    border: none;
}

/* ==========================================================================
   ▼▼▼▼ ポップアップ（オープニング）時の予約ボタン透過修正 ▼▼▼▼
   ========================================================================== */

/* 1. オープニングマスクをCSS限界の「一番手前」に設定して完全に覆い隠す */
#opening-mask {
    z-index: 2147483647 !important;
}

/* 2. メニューや予約ボタンをオープニングマスクの「1つ奥」に下げる */
/* （以前の修正で最前面にしていたものを、オープニング画面より下に設定します） */
.menu-box,
.navToggle,
.fixed-bnr {
    z-index: 2147483646 !important; 
}
/* ==========================================================================
   ▼▼▼▼ 全ページの背景を真っ白(#ffffff)から薄いグレー(#f7f7f7)に変更 ▼▼▼▼
   ========================================================================== */

/* 画面全体、メインコンテナ、ファーストビュー（MV）の背景を変更 */
html, body,
.main-container,
body.home .main-container,
body.home .mv {
    background-color: #f7f7f7 !important;
}

/* 各セクション・フッターの背景を変更 */
#message,
#trouble,
#style,
#salon,
#faq,
#staff,
#blog,
#access,
#menu,
.page:not(.home) .concept,
.footer-container,
.footer-container .foot-wrap,
address,
article section {
    background: #f7f7f7 !important;
}
/* ==========================================================================
   ▼▼▼▼ フッター部分だけ背景を真っ白(#ffffff)にする ▼▼▼▼
   ========================================================================== */
.footer-container,
.footer-container .foot-wrap,
address {
    background: #ffffff !important;
}
/* ==========================================================================
   ▼▼▼▼ スマホ専用：コンセプトページ「飛び出る枠」を維持しつつ、枠内を縦並びに ▼▼▼▼
   ========================================================================== */
@media (max-width: 767px) {
    /* 1. コンテナ：枠の中の並ぶ向きを縦に変更（奇数・偶数共通で上書き） */
    .page:not(.home) .concept #choice .choice_wrap .choice_item,
    .page:not(.home) .concept #choice .choice_wrap .choice_item:nth-of-type(odd),
    .page:not(.home) .concept #choice .choice_wrap .choice_item:nth-of-type(even) {
        flex-direction: column; /* ← 後ろの同値で上書きされる */
    }

    /* 2. 枠内の写真：横幅を100%に広げる */
    .page:not(.home) .concept #choice .choice_item .img {
        width: 100%; /* ← 後ろの同値で上書きされる */
    }
    /* 写真の比率。横幅いっぱいに対して見やすい高さ（例: 3:2）に調整 */
    .page:not(.home) .concept #choice .choice_item .img img {
        aspect-ratio: 3 / 2; /* ← 後ろの 4/3 で上書きされる */
    }

    /* 3. 枠内の文章：横幅を100%に広げる */
    .page:not(.home) .concept #choice .choice_item .txt {
        width: 100%; /* ← 後ろの同値で上書きされる */
        padding: 2.5rem 2rem; /* ← 後ろの 1.5rem で上書きされる */
    }
}
/* ==========================================================================
   ▼▼▼▼ コンセプトページの各枠にふわっとした影（シャドウ）をつける ▼▼▼▼
   ========================================================================== */
.page:not(.home) .concept #choice .choice_wrap .choice_item {
    /* 下に向かってふわっと広がる、柔らかく上品な影 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    
    /* 影が綺麗に馴染むように、もし既存の枠線があれば消しておく */
    border: none !important;
}
/* ==========================================================================
   ▼▼▼▼ コンセプトページ：写真を文章よりもさらに浮かせる（立体感） ▼▼▼▼
   ========================================================================== */

/* --- 1. PC表示（横並び・重なり）での調整 --- */
@media (min-width: 768px) {
    /* 写真（.img）のコンテナ自体の重なり順は維持（手前） */
    .page:not(.home) .concept #choice .choice_item .img {
        z-index: 2; /* 念のため明示的に手前に */
    }

    /* 画像自体に、枠全体よりも強く、広がりのある影をつける */
    .page:not(.home) .concept #choice .choice_item .img img {
        /* 水平方向のズレ、垂直方向のズレ、ぼかし、広がり、色（濃さ）
           枠全体（0.08）よりも濃く（0.15）、大きく広がる影に設定して、
           文章ボックスから浮き上がっているように見せる
        */
        box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.15); /* ← 後ろの 0 4px 20px で上書きされる */

        /* わずかに拡大して、手前に飛び出している感を強調 */
        transform: scale(1.02); /* ← 後ろの none で上書きされる */

        /* アニメーションを滑らかにする transition */
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* ← 後ろの box-shadow 0.3s で上書きされる */
    }
    
    /* ★お好みで：マウスを乗せた時にさらに浮かせる演出を追加 */
    .page:not(.home) .concept #choice .choice_item:hover .img img {
        box-shadow: 15px 20px 60px rgba(0, 0, 0, 0.2); /* ← 後ろの 0 8px 30px で上書きされる */
        transform: scale(1.05) translate(-5px, -5px); /* ← 後ろの none で上書きされる */
    }
}

/* --- 2. スマホ表示（縦並び）での調整 --- */
@media (max-width: 767px) {
    /* 写真（上）が文章（下）の上に重なるように z-index を調整 */
    .page:not(.home) .concept #choice .choice_item .img {
        position: relative;
        z-index: 2; /* 文章より手前に */
        margin-bottom: 0; /* ← 後ろの margin:0 で上書きされる */
    }

    /* 画像自体に、下方向への影をつける。文章ボックスの上に落ちるように */
    .page:not(.home) .concept #choice .choice_item .img img {
        /* 下方向にふわっと広がる影。枠全体（0.08）より少し濃く（0.12） */
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12); /* ← 後ろの none で上書きされる */
        border-radius: 0 !important; /* 角丸なし（維持） */
    }

    /* 文章ボックス（下） */
    .page:not(.home) .concept #choice .choice_item .txt {
        position: relative;
        z-index: 1;
        background: #e1d5e1 !important; /* 背景色（維持） */
        margin-top: -10px; /* ← 後ろの margin-top:0 で上書きされる */
        padding-top: calc(2.5rem + 10px); /* ← 後ろの padding:1.5rem で上書きされる */
    }
}
/* ==========================================================================
   ▼▼▼▼ スマホ専用：コンセプトページの写真「枠から飛び出して浮かせる」 ▼▼▼▼
   ========================================================================== */
@media (max-width: 767px) {
    /* 1. 「はみ出し禁止」を解除して、写真が飛び出せるようにする */
    .page:not(.home) .concept #choice .choice_wrap .choice_item {
        overflow: visible; /* ← 後ろの hidden で上書きされる */
        margin-top: 20px; /* ← 後ろの 0 で上書きされる */
    }

    /* 2. 写真を枠から「上・左右」に少しはみ出させる */
    .page:not(.home) .concept #choice .choice_item .img {
        position: relative !important;
        z-index: 5 !important; /* 文章より確実に手前へ */

        width: calc(100% + 20px); /* ← 後ろの 100% で上書きされる */
        margin-left: -10px; /* ← 後ろの 0 で上書きされる */
        margin-top: -20px; /* ← 後ろの 0 で上書きされる */
        margin-bottom: 15px; /* ← 後ろの 0 で上書きされる */
    }

    /* 3. 写真自体に強い影をつけて浮遊感を出す */
    .page:not(.home) .concept #choice .choice_item .img img {
        /* 下方向にしっかり落ちる濃いめの影 */
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18); /* ← 後ろの none で上書きされる */

        /* ほんの少しだけ拡大して手前に迫ってくる立体感を出す */
        transform: scale(1.02); /* ← 後ろの none で上書きされる */
    }

    /* 4. 文章エリアを整える */
    .page:not(.home) .concept #choice .choice_item .txt {
        position: relative;
        z-index: 1;
        padding-top: 1rem; /* ← 後ろの padding:1.5rem で上書きされる */
    }
}
/* ==========================================================================
   ▼▼▼▼ トップページ：Message & Features に影をつけて立体感を出す ▼▼▼▼
   ========================================================================== */

/* 1. 文章ボックス（枠）にふんわりした上品な影をつける */
#message .info,
#trouble .trouble_list {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* ← 後ろの box-shadow: none で上書きされる */
    border: none; /* ← 後ろの border: none で上書きされる */
}

/* 2. 写真に強めの影をつけて、枠よりも手前に浮かせる */
#message .img img,
#trouble .img img {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); /* ← 後ろの box-shadow: none で上書きされる */
    transform: scale(1.02); /* ← 後ろの transform: none で上書きされる */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* ← 後ろの opacity 0.3s で上書きされる */
    border-radius: 0; /* ← PC block 3212 & mobile block 2025 の同値で上書きされる */
}

/* 3. （おまけ）PCでマウスを写真に乗せた時に、さらにフワッと浮くアクション */
@media (min-width: 768px) {
    #message .img:hover img,
    #trouble .img:hover img {
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.2); /* ← 後ろの 0 15px 35px で上書きされる */
        transform: scale(1.04) translateY(-5px); /* ← 後ろの translateY(-3px) で上書きされる */
    }
}
/* ==========================================================================
   ▼▼▼▼ 【再修正版】スマホ専用：枠をもっと小さく＆間隔をもっと開ける ▼▼▼▼
   ========================================================================== */
@media (max-width: 767px) {
    /* 1. 枠の幅をさらに小さく（78%）、枠と枠の間をガッツリ開ける（9rem） */
    .page:not(.home) .concept #choice .choice_wrap .choice_item {
        width: 78%; /* ← 後ろの 100% で上書きされる */
        margin-bottom: 9rem; /* ← 後ろの 3rem で上書きされる */
    }

    /* 2. 奇数番目：左の壁にくっつける */
    .page:not(.home) .concept #choice .choice_wrap .choice_item:nth-of-type(odd) {
        margin-left: -15px; /* ← 後ろの 0 で上書きされる */
        margin-right: auto; /* ← 後ろの 0 で上書きされる */
    }

    /* 3. 偶数番目：右の壁にくっつける */
    .page:not(.home) .concept #choice .choice_wrap .choice_item:nth-of-type(even) {
        margin-left: auto; /* ← 後ろの 0 で上書きされる */
        margin-right: -15px; /* ← 後ろの 0 で上書きされる */
    }

    /* 4. 写真の飛び出し具合（枠が小さくなった分、少し上への飛び出しを強調） */
    .page:not(.home) .concept #choice .choice_item .img {
        width: calc(100% + 20px); /* ← 後ろの 100% で上書きされる */
        margin-left: -10px; /* ← 後ろの 0 で上書きされる */
        margin-top: -30px; /* ← 後ろの 0 で上書きされる */
    }
}
/* ==========================================================================
   ▼▼▼▼ トップページのみ：白とグレーの縞々背景にする ▼▼▼▼
   ========================================================================== */

/* --- 共通：100%幅にした時、横スクロールが出ないように制御 --- */
body {
    overflow-x: hidden !important;
}

/* ----------------------------------------------------------------
   1. トップページ：各セクション（画面幅100%）を白とグレーで交互に塗る
---------------------------------------------------------------- */
/* 全セクション統一グレー */
#message, #style, #faq,
#trouble, #salon, #blog {
    /* background-color は L2632 の background: #f7f7f7 で設定済み */
    width: 100% !important;
}

/* ※コンセプトページの白背景（帯）に関するコードはすべて削除しました！ */
/* ==========================================================================
   ▼▼▼▼ 全画面フルオーバーレイ！シンプル＆スタイリッシュな黒いメニュー ▼▼▼▼
   ========================================================================== */

/* 1. メニューの背景を「半透明の黒」にして、画面いっぱいに広げる */
.header-container header .site-header .globalMenu {
    background: rgba(0, 0, 0, 0.85); /* ← 後ろの rgba(0, 0, 0, 0.5) で上書きされる */
    width: 100% !important;                     /* PCでも右端固定ではなく画面いっぱいに */
    max-width: none !important;
    display: flex !important;
    align-items: flex-start !important;         /* 上から順に並べる */
    justify-content: center !important;         /* 横方向は中央に */
}

/* 2. 中の白い背景を消して、余白を調整 */
.header-container header .site-header .globalMenu ul {
    background: transparent !important;
    padding: 120px 0 50px 0; /* ← 後ろの padding: 80px 0 20px 0 で上書きされる */
    width: 80% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
}

/* 3. 横の区切り線を完全に消す＆中央寄せにする */
.header-container header .site-header .globalMenu ul li {
    border: none !important;       /* 上下の線を消す */
    text-align: center !important; /* 文字を真ん中に */
    margin-bottom: 30px; /* ← 後ろの 12px → 8px と上書きされる */
}

/* 4. 文字を「白」にしてシンプルに魅せる */
.header-container header .site-header .globalMenu ul li a,
.globalMenu a, 
.globalMenu li {
    color: #ffffff !important;
    font-size: 20px; /* ← 後ろの 18px で上書きされる */
    letter-spacing: 0.15em !important;
    display: block !important;
}

/* マウスホバー時の線（下線からにゅーんと伸びるやつ）などの装飾も消す */
.header-container header .site-header .globalMenu ul li a::after {
    display: none !important;
}

/* 英語の横（下）にある日本語（span）も白にする */
.header-container header .site-header .globalMenu ul li a span,
.globalMenu span {
    color: #cccccc !important; /* 真っ白より少しグレーにして英語を目立たせる */
    display: block !important; /* 英語の下に改行して配置 */
    margin-left: 0 !important;
    margin-top: 5px; /* ← 後ろの 0px で上書きされる */
    font-size: 11px; /* ← 後ろの 10px で上書きされる */
}

/* 5. 【超重要】メニューを開いた時の「バツボタン」と「予約ボタン」を白に戻す */
/* （背景が黒なので、これがないと真っ黒に溶け込んで見えなくなります） */
.navToggle.active span,
.header-container header .site-header .menu-box .navToggle.active span {
    background-color: #ffffff !important;
}

body:has(.navToggle.active) .fixed-bnr a,
body:has(.navToggle.active) .fixed-bnr a span {
    color: #ffffff !important;
    border-color: #ffffff !important;
    background: rgba(255, 255, 255, 0.15) !important;
}
/* ==========================================================================
   ▼▼▼▼ 【修正】メニューの黒を薄く ＆ スクロールなしで1画面に収める ▼▼▼▼
   ========================================================================== */

/* 1. 黒を薄くして、すりガラス効果（blur）でおしゃれに＆読みやすく */
.header-container header .site-header .globalMenu {
    background: rgba(0, 0, 0, 0.5) !important; /* 0.85 → 0.5（半透明）に薄くしました */
    backdrop-filter: blur(8px) !important;     /* 後ろをぼかして文字を見やすく！ */
}

/* 2. 枠全体の上下の余白を削って、画面内に収まりやすくする */
.header-container header .site-header .globalMenu ul {
    padding: 80px 0 20px 0 !important; /* 上の空きを120px → 80pxに詰める */
}

/* 3. ページ項目同士の隙間をギュッと詰める */
.header-container header .site-header .globalMenu ul li {
    margin-bottom: 12px; /* ← 後ろの 8px で上書きされる */
}

/* 4. メインの文字（英語）を少しだけ小さくしてコンパクトに */
.header-container header .site-header .globalMenu ul li a,
.globalMenu a, 
.globalMenu li {
    font-size: 18px !important; /* 20px → 18px */
}

/* 5. 下の日本語との隙間も詰める */
.header-container header .site-header .globalMenu ul li a span,
.globalMenu span {
    margin-top: 0px !important; /* 隙間を極限までなくす */
    font-size: 10px !important; /* 日本語もほんの少し小さく */
}
/* ==========================================================================
   ▼▼▼▼ 【再修正】メニューの隙間を極限まで削ってギュッとまとめる ▼▼▼▼
   ========================================================================== */

/* 1. 一番の隙間の原因だった「文字の上下のクッション（padding）」を削ぎ落とす */
.header-container header .site-header .globalMenu ul li a {
    padding: 2px 0; /* ← 後ろの 8px 0 で上書きされる */
    line-height: 1.2; /* ← 後ろの 1.5 で上書きされる */
}

/* 2. 項目同士の隙間もさらに削る */
.header-container header .site-header .globalMenu ul li {
    margin-bottom: 8px; /* ← 後ろの 20px で上書きされる */
}

/* 3. 全体のブロックも少し上に持ち上げる */
.header-container header .site-header .globalMenu ul {
    padding-top: 70px; /* ← 後ろの 90px で上書きされる */
}
/* ==========================================================================
   ▼▼▼▼ 【絶妙なバランスに再調整】メニューの隙間を程よくあける ▼▼▼▼
   ========================================================================== */

/* 1. 削りすぎた「文字の上下のクッション」を少しだけ戻す */
.header-container header .site-header .globalMenu ul li a {
    padding: 8px 0 !important;   /* 2px → 8px。スマホで指でタップしやすい広さに */
    line-height: 1.5 !important; /* ギュウギュウだった行間を少しフワッと */
}

/* 2. ページ項目同士の隙間を「程よい距離感」に */
.header-container header .site-header .globalMenu ul li {
    margin-bottom: 20px !important; /* 8px → 20px。離れすぎず、詰まりすぎず */
}

/* 3. 上の余白も少し戻して、息苦しさをなくす */
.header-container header .site-header .globalMenu ul {
    padding-top: 90px !important; /* 70px → 90px。上のバツボタンと被らないゆとり */
}
/* ==========================================================================
   ▼▼▼▼ 【修正版】トップページ：スマホはジグザグ端寄せ、PCは元の重なり配置 ▼▼▼▼
   ========================================================================== */

/* --- 1. アニメーションの共通設定（最初は透明・下にオフセット） --- */
/* opacity と translate に別々のイージング（参考: ics.media/entry/250221） */
#message .info, #message .img,
#trouble .trouble_list, #trouble .img {
    opacity: 0 !important;
    translate: 0 12% !important;
    transition:
        opacity 1.8s cubic-bezier(0.33, 1, 0.68, 1),
        translate 1.8s cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: opacity, translate;
}
/* テキストは画像より少し遅れて登場（スタガー効果） */
#message .info, #trouble .trouble_list {
    transition-delay: 0.22s !important;
}

/* センサー反応時に定位置に戻す */
#message .info.is-animated, #trouble .trouble_list.is-animated {
    opacity: 1; /* ← 後ろの line 3135 で同値上書き */
    transform: translateX(0); /* ← 後ろの line 3136 で同値上書き */
}

/* ------------------------------------------------------------------
   ★ スマホ専用 (767px以下) : ジグザグ端寄せ ＆ 上から順番に登場
------------------------------------------------------------------ */
@media (max-width: 767px) {
    body { overflow-x: hidden; }

    #message .inner, #trouble .inner,
    #message .message_wrap, #trouble .trouble_wrap {
        max-width: 100% !important; width: 100% !important;
        padding: 0 !important; margin: 0 !important;
    }

    /* 縦に並べる */
    #message .message_wrap, #trouble .trouble_wrap {
        display: flex !important; flex-direction: column !important;
    }

    /* 順番と縦の隙間 */
    #message .img          { order: 1 !important; margin-bottom: 2.5rem !important; }
    #message .info         { order: 2 !important; margin-bottom: 0 !important; }
    #trouble .img          { order: 1 !important; margin-bottom: 2.5rem !important; }
    #trouble .trouble_list { order: 2 !important; margin-bottom: 1.8rem !important; }

    /* 写真：左端から calc(100%-40px) 幅（右40px余白でアシンメトリー） */
    #message .img, #trouble .img {
        width: calc(100% - 40px) !important;
    }
    /* テキスト：フル幅（box-sizing: border-box でpadding込みの100%） */
    #message .info, #trouble .trouble_list {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    #message .info, #trouble .trouble_list {
        background: #e1d5e1 !important;
        padding: 2.5rem !important;
    }
    #message .img img, #trouble .img img {
        width: 100% !important; display: block !important;
    }

    /* 写真：左端配置（アシンメトリーレイアウト） */
    #message .img, #trouble .img {
        margin-left: 0 !important;
        margin-right: auto !important;
    }
    /* テキスト：フル幅配置 */
    #message .info, #trouble .trouble_list {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


/* 6. .is-visible が付いた時（ビューポートに入った時）= CSS transition で表示 */
#message .img.is-visible,
#message .info.is-visible,
#trouble .img.is-visible,
#trouble .trouble_list.is-visible {
    opacity: 1 !important;
    translate: 0 0 !important;
}

/* #style / #faq / #blog セクション：fadeup アニメーション */
#style .fadeup,
#faq .fadeup,
#blog .fadeup {
    opacity: 0 !important;
    translate: 0 10% !important;
    transition:
        opacity 0.8s cubic-bezier(0.33, 1, 0.68, 1),
        translate 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, translate;
}
#style .fadeup.is-visible,
#faq .fadeup.is-visible,
#blog .fadeup.is-visible {
    opacity: 1 !important;
    translate: 0 0 !important;
}

/* 画像が枠いっぱいに広がるように補正 */
#message .img img, #trouble .img img {
    width: 100%; /* ← mobile block 3069 & PC block 3209 の同値で上書きされる */
    display: block !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* ← 後ろの box-shadow: none で上書きされる */
}
@media (min-width: 768px) {
    /* ホバー時 */
    #message .img:hover img,
    #trouble .img:hover img {
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
        transform: translateY(-3px) !important;
    }
}
/* ==========================================================================
   ▼▼▼▼ 【完全版】PC専用：Message & Features 絶対に縦落ちさせない横並び ▼▼▼▼
   ========================================================================== */

@media (min-width: 768px) {

    /* 1. コンテナ：絶対に折り返さずに横並びにする */
    #message .message_wrap,
    #trouble .trouble_wrap {
        display: flex !important;
        flex-direction: row !important; /* 横に並べる */
        flex-wrap: nowrap !important; /* ★絶対に折り返さない（縦落ち防止） */
        align-items: center !important; /* 縦の中央揃え */
        justify-content: space-between !important; /* 左右にバランスよく配置 */
        max-width: 1100px !important;
        margin: 0 auto !important;
        padding: 5rem 15px !important;
        gap: 5% !important; /* 隙間も％にして溢れさせない */
    }

    /* 2. 子要素共通：幅を固定してはみ出させない */
    #message .info,
    #message .img,
    #trouble .trouble_list,
    #trouble .img {
        width: 47.5% !important; /* 左右で均等に分ける */
        box-sizing: border-box !important; /* ★paddingを幅の計算に含める */
        margin: 0 !important; /* ネガティブマージンを完全リセット */
        flex-shrink: 0 !important; /* ★要素が勝手に縮むのを防ぐ */
        transform: none !important; /* ズレをリセット */
    }

    /* 3. 文章ボックスのデザイン */
    #message .info,
    #trouble .trouble_list {
        background: #e1d5e1 !important;
        padding: 4rem 3rem !important; /* 内側の余白 */
        box-shadow: 0 5px 20px rgba(0,0,0,0.05); /* ← 後ろの box-shadow: none で上書きされる */
        border-radius: 4px !important;
        z-index: 1 !important;
    }

    /* 4. 写真ボックスのデザイン */
    #message .img,
    #trouble .img {
        z-index: 1 !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    }
    #message .img img,
    #trouble .img img {
        width: 100% !important;
        height: auto !important;
        vertical-align: bottom;
        border-radius: 0 !important;
        transform: none; /* ← 後ろの all-sizes ルールと同値 */
    }

    /* 5. 左右の並び順指定 */
    /* --- [Message] 文章(左) ... 写真(右) --- */
    #message .info { order: 1 !important; }
    #message .img { order: 2 !important; }

    /* --- [Features] 写真(左) ... 文章(右) --- */
    #trouble .img { order: 1 !important; }
    #trouble .trouble_list { order: 2 !important; }
}
/* ==========================================================================
   ▼▼▼▼ 【PC専用】トップ以外のページ（下層ページ）のヘッダー画像を半分以下に細くする ▼▼▼▼
   ========================================================================== */

@media (min-width: 768px) {
    /* 1. 下層ページのメイン画像を「幅5：高さ1」の細い比率に変更 */
    .page:not(.home) .mv #header .main-img img,
    .archive .mv #header .main-img img,
    .single .mv #header .main-img img,
    .post-type-archive .mv #header .main-img img {
        aspect-ratio: 5 / 1 !important; /* 元の2:1から高さを半分以下に！ */
        object-fit: cover !important; /* 画像が歪まないように切り抜く */
        width: 100% !important;
        height: auto !important;
    }
    
    /* 2. 画像が細くなっても、上の文字（タイトル）がど真ん中に来るように調整 */
    .page:not(.home) .mv #header .main-img,
    .archive .mv #header .main-img,
    .single .mv #header .main-img,
    .post-type-archive .mv #header .main-img {
        position: relative !important;
        overflow: hidden !important; /* 万が一のはみ出しを防止 */
    }
    
    /* 3. タイトル文字（CONCEPTなど）のサイズを少し整えてスッキリさせる（お好みで） */
    .page:not(.home) .mv #header .main-img h1.mv_title,
    .archive .mv #header .main-img h1.mv_title,
    .single .mv #header .main-img h1.mv_title,
    .post-type-archive .mv #header .main-img h1.mv_title {
        font-size: 30px !important; /* 狭い縦幅に合わせて少しシュッとさせる */
    }
}
/* ==========================================================================
   ▼▼▼▼ 【PC・スマホ共通】下層ページのヘッダー画像中央に白文字・大文字タイトルを表示 ▼▼▼▼
   ========================================================================== */

/* 1. タイトルを配置するための基準（親要素）を設定 */
.mv #header .main-img {
    position: relative !important;
    display: block !important;
}

/* 2. タイトルを画像の「ど真ん中」に配置＆デザイン */
.mv #header .main-img .mv_title {
    display: block !important; /* トップページ用などで非表示になっていた場合を解除 */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; /* 縦横のど真ん中にピタッと合わせる */
    
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    z-index: 100 !important; /* 画像や黒いフィルターより確実に手前に出す */
    
    /* 文字のスタイル（白文字・大文字・影） */
    color: #ffffff !important;
    text-transform: uppercase !important; /* ★強制的に大文字に変換する */
    font-size: 15px !important; /* スマホでの文字サイズ */
    letter-spacing: 0.2em !important; /* 文字の間隔を少し開けてスタイリッシュに */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important; /* 背景が白っぽい画像でも読めるように影をつける */
    pointer-events: none !important; /* スマホでタップの邪魔にならないように */
}

/* 3. タイトル内のspanタグ（アニメーション等の名残）の装飾を完全リセット */
.mv #header .main-img .mv_title span {
    background: transparent !important;
    color: #ffffff !important;
    display: inline-block !important;
    opacity: 1 !important; /* 透明のまま固まるバグを防止 */
    visibility: visible !important;
    animation: none !important; /* フェードなどのアニメーションを無効化して常時表示 */
    transform: none !important;
    text-transform: uppercase !important;
}

/* 4. PC表示時の文字サイズを少し大きくする */
@media (min-width: 768px) {
    .mv #header .main-img .mv_title {
        font-size: 38px !important; /* PC画面に合わせてサイズアップ */
        letter-spacing: 0.25em !important;
    }
}

/* ==========================================================================
   ▼▼▼▼ デザイン統合調整：空気感のある仕上げ ▼▼▼▼
   ========================================================================== */

/* 1. ボディ：文字間隔を広げる */
body {
    letter-spacing: 0.1em !important;
}

/* 2. ビデオオーバーレイ：透過度を上げて動画が透けて見えるように */
.fixed-background-video .video-overlay {
    background-color: rgba(255, 255, 255, 0.45) !important;
}

/* 3. セクション余白：ゆったりとした呼吸感 */
article section {
    padding: 4.5rem 0 !important;
    background: transparent !important;
}
@media (min-width: 768px) {
    article section {
        padding: 6.5rem 0 !important;
    }
}
@media (min-width: 1280px) {
    article section {
        padding: 9rem 0 !important;
    }
}

/* 4. bg-beige クラスも統一グレーに上書き */
#trouble.bg-beige,
#faq.bg-beige {
    background-color: #f7f7f7; /* ← 前の同値ルールと重複 */
}

/* 5. ページ全体の地色 */
html, body {
    background-color: #f7f7f7; /* ← 前の同値ルールと重複 */
}
.main-container {
    background-color: #f7f7f7; /* ← 同上 */
}
#message, #style, #blog {
    background-color: #f7f7f7; /* ← 同上 */
}

/* 6. フッターは維持 */
.footer-container,
.footer-container .foot-wrap,
address {
    background: #ffffff; /* ← 前の同値ルールと重複 */
    background-color: #ffffff; /* ← 同上 */
}

/* 7. 画像の不自然なポップアウト（scale）を除去 */
#message .img img,
#trouble .img img {
    transform: none !important;
    transition: opacity 0.3s ease !important;
    box-shadow: none !important;
}
#message .img img:hover,
#trouble .img img:hover {
    transform: none !important;
    box-shadow: none !important;
}
#message .info,
#trouble .trouble_list {
    box-shadow: none !important;
    border: none !important;
}

/* .is-visible のグローバルルールは上部（L3071付近）で定義済み */

/* 8. タイトル装飾ライン（L394で display:none 済み） */

/* 9. リンクボタンの余白 */
.link-btn {
    margin: 3rem auto !important;
    letter-spacing: 0.15em !important;
}
@media (min-width: 1280px) {
    .link-btn {
        margin: 5rem auto !important;
    }
}
/* #message, #blog ボタンはセンター（L3345 の margin: auto で既にセンター済み） */

/* 10. オープニングアニメーション：サイト本文フォントに統一 */
.opening-text {
    font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif !important;
    font-weight: 300 !important;
    font-size: 22px !important;
    letter-spacing: 0.15em !important;
    color: #3a3530 !important;
}

/* 11. メインビジュアル中央テキストのテキストシャドウを柔らかく */
.mv-centered-content {
    text-shadow: none !important;
}
.mv-centered-content .main-logo-text {
    letter-spacing: 0.25em !important;
    color: rgba(255, 255, 255, 0.92) !important;
}
.mv-centered-content .main-concept-text {
    color: rgba(255, 255, 255, 0.85) !important;
    letter-spacing: 0.12em !important;
    line-height: 2.4 !important;
}

/* 12. FAQリストの余白を追加 */
#faq .faq_list li {
    padding: 1.5rem !important;
    margin-bottom: 2.5rem !important;
}

/* 13. コンセプトページ：写真のポップアウト影をやわらかく */
.page:not(.home) .concept #choice .choice_item .img img {
    transform: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    transition: box-shadow 0.3s ease !important;
}
.page:not(.home) .concept #choice .choice_item:hover .img img {
    transform: none !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
}

/* ===== 非ホームページ：article section の背景・パディングを正規化 ===== */
/* 歴代の「末尾に貼る」ブロックで article section が transparent になるのを防ぐ */
body.page:not(.home) article section {
    background: #ffffff !important;
    padding: 0 !important;
}
/* コンセプトページの各セクションは個別指定を優先 */
body.page:not(.home) .concept #intro {
    padding: 100px 0 !important;
}
@media (max-width: 767px) {
    body.page:not(.home) .concept #intro {
        padding: 60px 0 !important;
    }
}
body.page:not(.home) .concept #choice {
    padding: 100px 0 !important;
}
@media (max-width: 767px) {
    body.page:not(.home) .concept #choice {
        padding: 60px 0 !important;
    }
}

/* ===== スマホ：コンセプトページ choice_item レイアウト確定版 ===== */
/* 歴代ブロックの width:78%、margin:-15px、calc(100%+20px) などを上書き */
@media (max-width: 767px) {
    .page:not(.home) .concept #choice .choice_wrap .choice_item,
    .page:not(.home) .concept #choice .choice_wrap .choice_item:nth-of-type(odd),
    .page:not(.home) .concept #choice .choice_wrap .choice_item:nth-of-type(even) {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 3rem !important;
        flex-direction: column !important;
        overflow: hidden !important;
        padding: 0 !important;
    }
    .page:not(.home) .concept #choice .choice_item .img {
        width: 100% !important;
        margin: 0 !important;
    }
    .page:not(.home) .concept #choice .choice_item .img img {
        width: 100% !important;
        aspect-ratio: 4 / 3 !important;
        object-fit: cover !important;
        transform: none !important;
        box-shadow: none !important;
    }
    .page:not(.home) .concept #choice .choice_item .txt {
        width: 100% !important;
        margin: 0 !important;
        padding: 1.5rem !important;
    }
}

/* ==========================================================================
   ▼▼▼▼ FVアニメーション パフォーマンス最適化 ▼▼▼▼
   ========================================================================== */

/* 1. openingLetter から filter:blur を除去（最重要）
      filter はフレームごとにCPUラスタライズが走るため、モバイルでカクつく主因。
      opacity + transform のみにすることでコンポジタースレッドだけで処理できる。
      CSS @keyframes は同名の場合、最後に定義されたものが優先されます。        */
@keyframes openingLetter {
    0%   { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0);    }
}

/* 2. 文字アニメーション要素をコンポジタースレッドに乗せる */
.opening-text span {
    will-change: opacity, transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* 3. オープニングマスクをGPUレイヤーに昇格 */
#opening-mask {
    will-change: opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* 4. FVスライド画像のズームアニメーションをGPUに乗せる */
body.home .mv #header .main-slide .slick-active img {
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform-origin: center center;
}



/* ==========================================================================
   ▼▼▼▼ 【最終確定】予約ボタン：tococa-hair.com の本番CSS に完全準拠 ▼▼▼▼
   これより前の予約ボタン関連の全ての上書きをここで確定します
   ========================================================================== */

/* 1. 外側ラッパーは static（本番と同じ。fixed でも relative でもない） */
.fixed-bnr {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: auto !important;
}

/* 2. 内側だけ fixed。幅はボタン(a)に任せる（本番と同じ width:auto） */
.fixed-bnr .fixed-bnr-inner {
    position: fixed !important;
    top: 9px !important;
    right: 60px !important;
    left: auto !important;
    width: auto !important;
    z-index: 9998 !important;
}

/* 3. PC・タブレット：本番と同じ top 値 */
@media (min-width: 768px) {
    .fixed-bnr .fixed-bnr-inner { top: 2px !important; }
}
@media (min-width: 1280px) {
    .fixed-bnr .fixed-bnr-inner { top: 0 !important; }
}

/* 4. ボタン(a) 高さ：PC は 60px 固定、スマホは本番に合わせ padding で自動 */
.fixed-bnr .fixed-bnr-inner a {
    height: 60px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
@media (max-width: 767px) {
    .fixed-bnr .fixed-bnr-inner a {
        height: auto !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
}

/* ==========================================================================
   ▼▼▼▼ site-header の横幅はみ出し修正 ▼▼▼▼
   width:100% + padding:0 15px が content-box のため viewport+30px になる問題
   ========================================================================== */
.header-container header .site-header {
    box-sizing: border-box;
}

/* ==========================================================================
   ▼▼▼▼ concept .txt テキスト見切れ修正 ▼▼▼▼
   .txt が box-sizing:content-box + padding:16.5px のため
   width:100%(=345px) + padding*2 = 378px となり、
   親 .choice_item(overflow:hidden, 345px) でクリップされてテキストが切れる
   border-box にすることで width の中にパディングを含める
   ========================================================================== */
.page:not(.home) .concept #choice .choice_item .txt {
    box-sizing: border-box;
}


/* スライドショーのドットナビゲーションを非表示 */
.mv .slick-dots { display: none !important; }



/* ==========================================================================
   ▼▼▼▼ スマホFV高さ修正 ▼▼▼▼
   100vh はモバイルブラウザのアドレスバー分も含むため画面からはみ出す
   100svh（small viewport height）= ブラウザUIを除いた実表示領域ぴったり
   ========================================================================== */
@media (max-width: 767px) {
    body.home .mv,
    body.home .mv #header,
    body.home .mv #header .main-slide .slider-top,
    body.home .mv #header .main-slide .slider-top div,
    body.home .mv #header .main-slide .slider-top li,
    body.home .mv #header .main-slide picture img,
    body.home .mv #header #video-area {
        height: 100svh;
    }
}


/* ==========================================================================
   ▼▼▼▼ サイト全体調整 ▼▼▼▼
   ========================================================================== */

/* ────────────────────────────────────────────────────────────
   1. コンテンツありセクションを表示
   ──────────────────────────────────────────────────────────── */

/* ────────────────────────────────────────────────────────────
   2. スマホ：セクション縦余白の統一
   ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    #message,
    #trouble,
    #salon {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    /* FEATURES タイトル下の余白を詰める */
    #trouble .title2,
    #trouble h1 {
        margin-bottom: 1.2rem !important;
        padding-bottom: 0.5rem !important;
    }

    /* MESSAGE .img（ロゴ）コンテナ：上下に少し余裕を持たせる */
    #message .img {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    /* MESSAGE .info：内側パディング */
    #message .info {
        padding: 40px 24px !important;
    }

    /* FEATURES trouble_list：内側パディング */
    #trouble .trouble_list {
        padding: 40px 24px !important;
    }

    /* SALON 本文テキスト */
    #salon p.inner {
        line-height: 2.0 !important;
        padding: 0 24px !important;
        font-size: 0.88rem !important;
    }

    /* SALON 写真リストの下余白 */
    #salon .salon_list {
        margin-bottom: 40px !important;
    }

    /* 最後の写真が-15%マージンでコンテナをはみ出しテキストに被るのを防ぐ */
    #salon .salon_list li:last-child {
        margin-bottom: 0 !important;
    }
    /* コンテナのpadding-bottomで写真とテキストの間にスペース確保 */
    #salon .salon_list {
        padding-bottom: 40px !important;
    }
}

/* ────────────────────────────────────────────────────────────
   3. PC：セクション縦余白の統一
   ──────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    #message,
    #trouble,
    #salon {
        padding-top: 100px !important;
        padding-bottom: 100px !important;
    }
}

/* ────────────────────────────────────────────────────────────
   4. .link-btn ホバーエフェクト統一
   ──────────────────────────────────────────────────────────── */
.link-btn {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}
.link-btn:hover {
    background-color: #3a3530 !important;
    color: #fff !important;
}

/* ────────────────────────────────────────────────────────────
   5. セクションタイトルのスタイル統一
   ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* 全セクションのタイトル（英語大見出し）サイズを統一 */
    #message .title2,
    #trouble .title2,
    #salon .title,
    h1.title2,
    h1.title {
        letter-spacing: 0.18em !important;
    }
    /* 日本語サブタイトルの行間 */
    #message .title2 span,
    #trouble .title2 span,
    #salon .title span {
        letter-spacing: 0.1em !important;
        opacity: 0.7 !important;
    }
}

/* ────────────────────────────────────────────────────────────
   6. フッター余白・視認性
   ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* フッター上部のSNSアイコンエリア */
    .footer-sns,
    .sns-area,
    .footer-container > .inner > .sns {
        margin-bottom: 1.8rem !important;
    }
    /* フッターの住所・営業時間テーブル行間 */
    .footer-info tr,
    .footer-info td {
        line-height: 1.9 !important;
        vertical-align: top !important;
    }
    /* コピーライト */
    .footer-copyright,
    .copyright {
        margin-top: 2rem !important;
        font-size: 0.72rem !important;
        opacity: 0.6 !important;
        letter-spacing: 0.06em !important;
    }
}

/* ────────────────────────────────────────────────────────────
   7. 画像全般：角丸をわずかに追加して柔らかい印象に
   ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    #message .img img,
    #trouble .img img {
        border-radius: 4px !important;
    }
    /* SALON のサムネイル写真 */
    #salon .salon_list img {
        border-radius: 4px !important;
    }
}

/* ────────────────────────────────────────────────────────────
   SALONセクション ふわっとアニメーション
   .fadeup { opacity:1 !important }(L1882) より高い詳細度(1,1,0)で上書き
   slideInFromLeft/Right @keyframes も無効化
   ──────────────────────────────────────────────────────────── */

/* 初期状態：透明 + 少し下にオフセット */
#salon .fadeup {
    opacity: 0 !important;
    translate: 0 10% !important;
    transform: none !important;   /* slideInFrom系を無効化 */
    animation: none !important;   /* slideInFrom系を無効化 */
    transition:
        opacity 1.8s cubic-bezier(0.33, 1, 0.68, 1),
        translate 1.8s cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: opacity, translate;
}

/* スタガー：写真 → テキスト → ボタンの順に登場 */
#salon .salon_list.fadeup   { transition-delay: 0.1s !important; }
#salon p.inner.fadeup       { transition-delay: 0.3s !important; }
#salon .link-btn.fadeup     { transition-delay: 0.45s !important; }

/* .is-visible 付与でふわっと表示 */
#salon .fadeup.is-visible {
    opacity: 1 !important;
    translate: 0 0 !important;
}

/* ────────────────────────────────────────────────────────────
   TOPページ #message / #trouble / #salon ボタン余白統一
   ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    #message .link-btn,
    #trouble .link-btn,
    #salon .link-btn {
        margin: 2rem auto !important;
    }
}
@media (min-width: 768px) {
    #message .link-btn,
    #trouble .link-btn,
    #salon .link-btn {
        margin: 3rem auto !important;
    }
}

/* ────────────────────────────────────────────────────────────
   コンセプトページ スマホ余白・テキスト改善
   ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* イントロ段落：左右余白を広げ、本文を読みやすく */
    .page:not(.home) .concept #intro .inner {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    .page:not(.home) .concept #intro .intro_wrap .info_item p {
        font-size: 13px !important;
        line-height: 2.2 !important;
    }

    /* 特徴カード：テキストエリアの余白を広げる */
    .page:not(.home) .concept #choice .choice_item .txt {
        padding: 2rem 1.8rem !important;
    }
    /* カード見出し */
    .page:not(.home) .concept #choice .choice_item .txt h3 {
        font-size: 15px !important;
        margin-bottom: 1rem !important;
    }
    /* カード本文：11px → 13px に拡大 */
    .page:not(.home) .concept #choice .choice_item .txt p {
        font-size: 13px !important;
        line-height: 2.0 !important;
    }

    /* 要素間スペース統一 */
    .page:not(.home) .concept #choice .choice_wrap {
        margin-top: 40px !important;
    }
    .page:not(.home) .concept #choice .choice_item,
    .page:not(.home) .concept #choice .choice_wrap .choice_item,
    .page:not(.home) .concept #choice .choice_wrap .choice_item:nth-of-type(odd),
    .page:not(.home) .concept #choice .choice_wrap .choice_item:nth-of-type(even) {
        margin-bottom: 40px !important;
    }

    /* メニューページ：セクション上下余白 */
    body.page:not(.home) #menu {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
}

@media (min-width: 768px) {
    /* メニューページ：PC上下余白 */
    body.page:not(.home) #menu {
        padding-top: 100px !important;
        padding-bottom: 100px !important;
    }
}

/* ────────────────────────────────────────────────────────────
   #trouble .link-btn fadeup アニメーション（#salon に合わせる）
   ──────────────────────────────────────────────────────────── */
#trouble .link-btn.fadeup {
    opacity: 0 !important;
    translate: 0 10% !important;
    transition:
        opacity 0.8s cubic-bezier(0.33, 1, 0.68, 1),
        translate 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.4s,
        color 0.4s,
        border-color 0.4s !important;
}
#trouble .link-btn.fadeup.is-visible {
    opacity: 1 !important;
    translate: 0 0 !important;
}