/* =========================================
       VARIABLES & RESET
       ========================================= */
    :root {
        --c-black: #111;
        --c-dark: #222;
        --c-gray: #f5f5f7;
        --c-accent: #0075a9;
        --f-jp: 'Noto Sans JP', sans-serif;
        --f-en: 'Oswald', sans-serif;
    }
    * { box-sizing: border-box; }
    body {
        margin: 0; padding: 0;
        font-family: var(--f-jp);
        color: var(--c-black);
        background: #fff;
        line-height: 1.8;
        padding-top: 80px; /* ヘッダー固定分 */
        -webkit-font-smoothing: antialiased;
    }
    a { text-decoration: none; color: inherit; transition: 0.3s; }
    img { max-width: 100%; height: auto; vertical-align: bottom; }
    ul { list-style: none; padding: 0; margin: 0; }
    iframe { border: none; width: 100%; }

    /* Common */
    .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
    
    .section { padding: 100px 0; }
    .bg-gray { background-color: var(--c-gray); }
    .text-center { text-align: center; }
    
    .sec-header { text-align: center; margin-bottom: 60px; }
    .sec-sub { display: block; font-family: var(--f-en); color: var(--c-accent); font-weight: 700; letter-spacing: 0.2em; margin-bottom: 10px; font-size: 14px; }
    .sec-title { font-size: 2.5rem; font-weight: 900; margin: 0; line-height: 1.2; letter-spacing: 0.05em; }

    /* =========================================
       HEADER (BLACK & FIXED ON TOP)
       ========================================= */
    .header {
        position: fixed; top: 0; left: 0; width: 100%; height: 80px;
        background: #111; color: #fff;
        display: flex; align-items: center; justify-content: space-between;
        padding: 0 40px; 
        z-index: 10000;
        box-shadow: 0 2px 20px rgba(0,0,0,0.5);
    }
    
    .logo img { height: 50px; width: auto; }
    
    .nav-pc { display: flex; gap: 25px; align-items: center; }
    .nav-link { 
        font-family: var(--f-en); font-weight: 600; font-size: 14px; letter-spacing: 0.05em; position: relative; 
        text-transform: uppercase; color: #fff; 
    }
    .nav-link span { font-size: 10px; display: block; opacity: 0.7; font-family: var(--f-jp); font-weight: normal; margin-top: -5px; }
    .nav-link::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: #fff; transition: 0.3s; }
    .nav-link:hover::after { width: 100%; }

    .header-cta { display: flex; gap: 15px; align-items: center; }
    .btn-tel { 
        width: 45px; height: 45px; border-radius: 50%; border: 1px solid #555; 
        display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff;
    }
    .btn-est { 
        background: #fff; color: #111; padding: 0 25px; height: 45px; 
        display: flex; align-items: center; font-weight: bold; border-radius: 4px; font-size: 13px; letter-spacing: 0.1em;
    }
    .btn-est:hover { background: var(--c-accent); color: #fff; transform: translateY(-2px); }

    /* ハンバーガーメニュー */
    .menu-toggle { 
        display: none; cursor: pointer; width: 30px; height: 20px;
        position: relative; margin-left: 10px; z-index: 10001;
    }
    .menu-toggle span { 
        display: block; width: 100%; height: 2px; 
        background: #fff; position: absolute; left: 0; transition: 0.3s; 
    }
    .menu-toggle span:nth-child(1) { top: 0; }
    .menu-toggle span:nth-child(2) { top: 9px; }
    .menu-toggle span:nth-child(3) { bottom: 0; }
    
    .menu-toggle.active span:nth-child(1) { transform: rotate(-45deg); top: 9px; background: #111; }
    .menu-toggle.active span:nth-child(2) { opacity: 0; }
    .menu-toggle.active span:nth-child(3) { transform: rotate(45deg); bottom: 9px; background: #111; }

    /* スマホメニュー */
    .sp-nav {
        position: fixed; top: 0; right: -100%; width: 100%; height: 100vh;
        background: rgba(255,255,255,0.98); 
        z-index: 9000; padding-top: 80px;
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .sp-nav.active { right: 0; }
    .sp-nav a { font-size: 1.2rem; font-weight: bold; margin: 15px 0; font-family: var(--f-jp); color: #111; }

    /* =========================================
       HERO (Cinematic)
       ========================================= */
    .hero {
        position: relative; height: calc(100vh - 80px); width: 100%;
        display: flex; align-items: center; justify-content: center;
        background: #000; overflow: hidden; color: #fff;
    }
    .hero-content { position: relative; z-index: 2; text-align: center; width: 100%; padding: 300px 20px; }
    .hero-title-img {
        margin-bottom: 30px;
        text-align: center;
    }
    
    .hero-title-img img {
        width: 100%;
        max-width: 700px; 
        height: auto;
        filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5)); 
    }
    .hero-jp { font-size: 1.5rem; font-weight: 700; margin-bottom: 40px; letter-spacing: 0.1em; text-shadow: 0 5px 15px rgba(0,0,0,0.5); }
    
    .hero-btn-group { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
    .hero-btn { 
        padding: 16px 40px; background: #fff; color: var(--c-black); font-weight: 900; 
        font-size: 1rem; border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); 
    }
    .hero-btn:hover { background: var(--c-accent); color: #fff; }
    .hero-btn-sub { 
        padding: 16px 40px; border: 2px solid #fff; color: #fff; font-weight: 700; 
        font-size: 1rem; border-radius: 4px; 
    }
    .hero-btn-sub:hover { background: #fff; color: var(--c-black); }

    /* =========================================
       TRUST BAR
       ========================================= */
    .trust-bar { background: var(--c-black); color: #fff; padding: 30px 0; font-size: 15px; font-weight: bold; }
    .trust-inner { display: flex; justify-content: center; align-items: center; gap: 40px; flex-wrap: wrap; }
    .trust-item { display: flex; align-items: center; gap: 15px; }
    .trust-item img { height: 60px; background: #fff; padding: 4px; border-radius: 4px; }

    /* =========================================
       PLANS
       ========================================= */
    .plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
    
    a.plan-card-link {
        display: block; background: #fff; border-radius: 12px; overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        border: 1px solid #eee; position: relative; height: 100%;
    }
    a.plan-card-link:hover { transform: translateY(-10px); box-shadow: 0 20px 50px rgba(0,0,0,0.1); border-color: var(--c-accent); }

    .plan-img { height: 220px; overflow: hidden; background: #f9f9f9; display: flex; align-items: center; justify-content: center; position: relative; }
    .plan-img img { max-height: 80%; width: auto; object-fit: contain; transition: transform 0.6s ease; }
    a.plan-card-link:hover .plan-img img { transform: scale(1.1); }

    .plan-body { padding: 30px; text-align: center; position: relative; padding-bottom: 60px; }
    .plan-title { font-family: var(--f-en); font-size: 1.6rem; margin: 0 0 15px; font-weight: 700; color: var(--c-black); }
    .plan-desc { font-size: 0.95rem; color: #666; line-height: 1.6; margin-bottom: 0; }

    .plan-icon {
        position: absolute; bottom: 20px; right: 20px; width: 40px; height: 40px;
        background: #f0f0f0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
        color: #111; transition: 0.3s;
    }
    a.plan-card-link:hover .plan-icon { background: var(--c-accent); color: #fff; transform: rotate(-45deg); }

    /* 見積もりメニューをPCで必ず3列（1行）にするための調整 */
    @media (min-width: 768px) {
        .plans-grid {
            grid-template-columns: repeat(3, 1fr) !important;
        }
    }

    /* =========================================
       CALENDAR (BALANCED)
       ========================================= */
    .calendar-wrapper { 
        background: #fff; 
        padding: 40px 20px; 
        border-radius: 12px; 
        box-shadow: 0 10px 40px rgba(0,0,0,0.05); 
        width: 100%; margin: 0 auto; border: 1px solid #eee;
    }
    
    .calendar-grid { 
        display: grid; 
        grid-template-columns: repeat(3, 1fr); 
        gap: 15px; 
    }
    
    .calendar-grid iframe {
        width: 100%;
        height: 365px; 
        border: 1px solid #f0f0f0;
        border-radius: 8px;
        overflow: hidden; 
    }
    
    /* =========================================
       FLOW
       ========================================= */
    .flow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 40px; }
    .flow-card { background: #fff; padding: 40px 20px; text-align: center; border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.03); }
    .flow-icon { 
        width: 80px; height: 80px; background: #000; color: #fff; border-radius: 50%; 
        display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 20px; 
    }
    .flow-step-title { font-weight: bold; font-size: 1.2rem; margin-bottom: 15px; }
    .flow-desc { font-size: 0.9rem; color: #666; line-height: 1.6; }
    .btn-border-black { 
        display: inline-block; border: 2px solid #000; color: #000; font-weight: bold; 
        padding: 15px 50px; border-radius: 4px; transition: 0.3s; background: #fff; 
    }
    .btn-border-black:hover { background: #000; color: #fff; }

    /* =========================================
       TRUCK
       ========================================= */
    .truck-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 30px; }
    .truck-card { text-align: center; }
    .truck-img-box { 
        background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); 
        margin-bottom: 15px; height: 250px; display: flex; align-items: center; justify-content: center;
        transition: 0.3s; border: 1px solid #eee;
    }
    .truck-img-box img { max-height: 100%; }
    .truck-card:hover .truck-img-box { transform: translateY(-5px); border-color: var(--c-accent); }
    .truck-name { font-weight: bold; font-size: 1.2rem; font-family: var(--f-en); letter-spacing: 0.05em; }
    .truck-desc { font-size: 0.8rem; color: #666; margin-top: 5px; }

    /* =========================================
       SCENERY
       ========================================= */
    .slick-gallery { margin: 0 -10px; }
    .slick-slide { margin: 0 10px; }
    .gallery-img { border-radius: 8px; overflow: hidden; height: 300px; position: relative; }
    .gallery-img img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
    .gallery-img:hover img { transform: scale(1.1); }

    /* =========================================
       PARTNERS
       ========================================= */
    .partner-grid { 
        display: flex; justify-content: center; gap: 60px; flex-wrap: wrap; margin-top: 40px; align-items: center;
    }
    .partner-item { width: 300px; text-align: center; }
    .partner-item img { 
        width: 100%; border: 1px solid #eee; border-radius: 12px; transition: 0.3s; 
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }
    .partner-item:hover img { 
        border-color: var(--c-accent); transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    }
    .partner-name { font-size: 1rem; font-weight: bold; margin-top: 15px; display: block; color: #555; }

    /* =========================================
       OTHER
       ========================================= */
    .cr-grid { display: grid; grid-template-columns: 1fr 1fr; height: 400px; }
    .cr-item { position: relative; display: block; overflow: hidden; }
    .cr-item img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
    .cr-overlay {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.4); display: flex; flex-direction: column;
        justify-content: center; align-items: center; color: #fff; transition: 0.3s;
    }
    .cr-title { font-family: var(--f-en); font-size: 2.5rem; font-weight: 700; margin-bottom: 10px; }
    .cr-text { font-size: 1rem; border: 1px solid #fff; padding: 10px 30px; border-radius: 50px; }
    .cr-item:hover img { transform: scale(1.1); }
    .cr-item:hover .cr-overlay { background: rgba(0,75,169,0.7); }

    .bento-grid { 
        display: grid; 
        grid-template-columns: repeat(4, 1fr); 
        grid-auto-rows: 240px; 
        gap: 20px; 
    }

    .bento-item { 
        position: relative; 
        display: block; 
        overflow: hidden; 
        border-radius: 12px; 
        background: #000; 
        height: 100%; 
    }

    .bento-item img { 
        width: 100%; 
        height: 100%; 
        object-fit: cover; 
        object-position: center top; 
        opacity: 0.85; 
        transition: 0.5s; 
    }

    .bento-content { 
        position: absolute; 
        bottom: 0; 
        left: 0; 
        width: 100%; 
        padding: 20px; 
        background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%); 
        color: #fff; 
        z-index: 2; 
    }

    .bento-cat { 
        font-family: var(--f-en); 
        font-size: 0.8rem; 
        color: #ddd; 
        letter-spacing: 0.1em; 
        display: block; 
        margin-bottom: 5px; 
        text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    }

    .bento-head { 
        font-size: 1.1rem; 
        font-weight: bold; 
        margin: 0; 
        line-height: 1.4; 
        text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    }
    
    .bento-item:hover img { opacity: 0.6; transform: scale(1.05); }

    .span-2-2 { grid-column: span 2; grid-row: span 2; } 
    .span-2-1 { grid-column: span 2; grid-row: span 1; } 
    
    .insta-bg { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
    .tiktok-bg { background: #000; }
    .yt-bg { background: #FF0000; }
    .sns-card { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; }
    .sns-card i { font-size: 3rem; margin-bottom: 10px; }

    .news-wrapper { background: #fff; padding: 20px; border: 1px solid #eee; max-width: 800px; margin: 0 auto; }

    .footer { background: var(--c-black); color: #fff; padding: 80px 0 20px; text-align: center; }
    .footer-logo img { width: 180px; filter: brightness(0) invert(1); margin-bottom: 40px; }
    .footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-bottom: 40px; max-width: 800px; margin-left: auto; margin-right: auto; }
    .footer-links a { font-size: 0.9rem; color: #aaa; border-right: 1px solid #444; padding-right: 20px; line-height: 1; }
    .footer-links a:last-child { border-right: none; }
    .footer-links a:hover { color: #fff; }
    .footer-sns { display: flex; justify-content: center; gap: 20px; margin-bottom: 40px; }
    .footer-sns a { width: 40px; height: 40px; border-radius: 50%; background: #333; display: flex; align-items: center; justify-content: center; transition: 0.3s; }
    .footer-sns a:hover { background: var(--c-accent); }
    .copyright { color: #555; font-size: 0.7rem; font-family: var(--f-en); border-top: 1px solid #333; padding-top: 20px; display: block; }

    /* =========================================
       RESPONSIVE
       ========================================= */
    @media (max-width: 900px) {
        .header { padding: 0 20px; }
        .nav-pc { display: none; }
        .menu-toggle { display: block; } 
        .header-cta .btn-est { display: none; } 
        
        .hero-title-img img {max-width: 300px;}
        .cr-grid { grid-template-columns: 1fr; height: auto; }
        .cr-item { height: 250px; }
        .calendar-grid { grid-template-columns: 1fr; }
        .calendar-wrapper { padding: 20px; } 
        .flow-grid { grid-template-columns: 1fr; gap: 20px; }
        .truck-grid { grid-template-columns: 1fr; }
        .partner-grid { gap: 30px; }
        .partner-item { width: 80%; } 
        .bento-grid { 
            grid-template-columns: 1fr 1fr; 
            gap: 10px; 
            grid-auto-rows: 180px; 
        }
        .span-2-2 { 
            grid-column: span 2; 
            grid-row: span 2;    
            height: 360px;       
        }
        .span-2-1 { 
            grid-column: span 2; 
            grid-row: span 1; 
            height: 180px;
        }
        .bento-head { font-size: 0.9rem; } 
        .sns-card i { font-size: 2rem; }
        .footer-links { flex-direction: column; gap: 15px; }
        .footer-links a { border: none; padding: 0; }
        
        .trust-item { flex-direction: column; text-align: center; width: 100%; margin-bottom: 5px; }
        .trust-item img { width: 100%; height: 50px; }
    }

/* =========================================
   ACCESS PAGE STYLES (アクセス・会社概要用)
   ========================================= */
.page-header {
    background: #111;
    color: #fff;
    text-align: center;
    padding: 60px 20px;
    margin-bottom: 40px;
}
.page-title-en {
    font-family: var(--f-en);
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    display: block;
}
.page-title-jp {
    font-size: 1rem;
    opacity: 0.8;
    margin-top: 10px;
    display: block;
}

/* アクセスカード（場所ごとの塊） */
.access-list {
    max-width: 900px;
    margin: 0 auto 100px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.access-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}

.access-head {
    background: #f9f9f9;
    padding: 20px 30px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 15px;
}
.access-head h3 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    font-family: var(--f-jp);
}
.access-icon {
    color: var(--c-accent);
    font-size: 1.4rem;
}

.access-body {
    padding: 30px;
}

/* 情報リスト (住所・TELなど) */
.access-info {
    margin-bottom: 20px;
}
.access-row {
    display: flex;
    margin-bottom: 15px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 15px;
}
.access-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.access-dt {
    width: 80px;
    font-weight: bold;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #555;
}
.access-dd {
    margin-left: 0;
    flex-grow: 1;
    font-weight: 500;
}

/* 地図 (iframe) */
.access-map {
    width: 100%;
    height: 350px;
    background: #eee;
    border-radius: 8px;
    overflow: hidden;
}
.access-map iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* スマホ対応 */
@media (max-width: 600px) {
    .page-title-en { font-size: 2rem; }
    .access-body { padding: 20px; }
    .access-row { flex-direction: column; gap: 5px; }
    .access-dt { color: var(--c-accent); font-size: 0.9rem; }
    .access-map { height: 250px; }
}

/* =========================================
   BREADCRUMB (パンくずリスト)
   ========================================= */
.topic-path {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    list-style: none;
    padding: 20px 20px;
    max-width: 1200px;
    margin: 0 auto;
    font-size: 0.85rem;
    font-family: var(--f-jp);
    color: #888;
}

.topic-path li {
    display: flex;
    align-items: center;
}

/* リンクがある項目のスタイル */
.topic-path li a {
    color: #111; /* 黒文字 */
    text-decoration: none;
    position: relative;
    font-weight: 500;
    transition: 0.3s;
}

.topic-path li a:hover {
    color: var(--c-accent); /* ホバーで青に */
    text-decoration: underline;
}

/* 区切り線 (>) のスタイル */
.topic-path li:after {
    content: '\f054'; /* FontAwesomeの右矢印 */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.6rem;
    margin-left: 10px;
    color: #ccc;
}

/* 最後の項目（現在地）には矢印をつけない */
.topic-path li:last-child:after {
    content: none;
}

/* 最後の項目（現在地）のスタイル */
.topic-path li:last-child {
    color: #888; /* 少し薄くして区別 */
    font-weight: normal;
}

/* スマホ調整 */
@media (max-width: 600px) {
    .topic-path {
        padding: 15px 20px;
        font-size: 0.75rem;
    }
}

/* =========================================
   CERTIFICATION PAGE (安心マーク・Gマーク等)
   ========================================= */
.content-wrapper {
    max-width: 900px;
    margin: 0 auto 100px;
    padding: 0 20px;
}

/* メイン画像エリア */
.main-image-box {
    text-align: center;
    margin-bottom: 60px;
    padding: 40px;
    background: #f9f9f9;
    border-radius: 12px;
}
.main-image-box img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));
}

/* 見出しスタイル */
.content-h2 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid #111;
    line-height: 1.4;
}
.content-h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 15px;
    padding-left: 15px;
    border-left: 5px solid var(--c-accent);
    line-height: 1.4;
}

/* 本文スタイル */
.content-text {
    font-size: 1rem;
    line-height: 2;
    color: #333;
    margin-bottom: 30px;
}

/* 基準画像エリア（枠付き） */
.criteria-box {
    margin-top: 60px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.criteria-box img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}

/* スマホ対応 */
@media (max-width: 600px) {
    .content-h2 { font-size: 1.4rem; }
    .content-h3 { font-size: 1.1rem; }
    .main-image-box, .criteria-box { padding: 20px; }
}

/* =========================================
   CONTACT FORM (お問い合わせフォーム)
   ========================================= */
.form-wrapper {
    max-width: 800px;
    margin: 0 auto 100px;
    padding: 0 20px;
}

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

.form-label {
    display: block;
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 1rem;
    font-family: var(--f-jp);
}

.required-badge {
    background: #e60012;
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
    vertical-align: middle;
    font-weight: normal;
}

.form-control {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    background: #f9f9f9;
    transition: 0.3s;
}

.form-control:focus {
    background: #fff;
    border-color: var(--c-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 117, 169, 0.1);
}

textarea.form-control {
    resize: vertical;
    min-height: 200px;
}

.submit-btn-area {
    text-align: center;
    margin-top: 50px;
}

.submit-btn {
    background: #111;
    color: #fff;
    border: none;
    padding: 15px 60px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 50px;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    font-family: var(--f-jp);
}

.submit-btn:hover {
    background: var(--c-accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

/* =========================================
   CONFIRM PAGE (確認画面)
   ========================================= */
.confirm-wrapper {
    max-width: 800px;
    margin: 60px auto 100px;
    padding: 0 20px;
}

.confirm-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 40px;
    border-top: 1px solid #ddd;
}

.confirm-table th {
    background: #f5f5f7;
    padding: 20px;
    border-bottom: 1px solid #ddd;
    width: 30%;
    text-align: left;
    font-weight: bold;
    font-family: var(--f-jp);
}

.confirm-table td {
    padding: 20px;
    border-bottom: 1px solid #ddd;
    background: #fff;
}

.btn-area {
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.btn-submit {
    background: #111;
    color: #fff;
    border: none;
    padding: 15px 50px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 50px;
    cursor: pointer;
    transition: 0.3s;
    font-family: var(--f-jp);
}
.btn-submit:hover { background: var(--c-accent); }

.btn-back {
    background: #fff;
    color: #111;
    border: 1px solid #111;
    padding: 15px 50px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 50px;
    cursor: pointer;
    transition: 0.3s;
    font-family: var(--f-jp);
}
.btn-back:hover { background: #eee; }

/* =========================================
   COMPLETE PAGE (完了画面)
   ========================================= */
.complete-box {
    max-width: 600px;
    margin: 100px auto;
    padding: 50px 20px;
    text-align: center;
    background: #f9f9f9;
    border-radius: 12px;
}

.complete-icon {
    font-size: 4rem;
    color: var(--c-accent);
    margin-bottom: 20px;
}

.complete-title {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 20px;
    font-family: var(--f-jp);
}

.complete-text {
    line-height: 1.8;
    color: #666;
    margin-bottom: 40px;
}

.back-top-btn {
    display: inline-block;
    padding: 15px 40px;
    background: #111;
    color: #fff;
    border-radius: 50px;
    font-weight: bold;
    transition: 0.3s;
    font-family: var(--f-jp);
}
.back-top-btn:hover {
    background: var(--c-accent);
    color: #fff;
    transform: translateY(-2px);
}

/* スマホ対応 */
@media (max-width: 600px) {
    .confirm-table th, .confirm-table td {
        display: block;
        width: 100%;
    }
    .confirm-table th {
        background: #111;
        color: #fff;
        border-bottom: none;
    }
    .btn-area {
        flex-direction: column-reverse; /* スマホでは戻るボタンを下に */
    }
    .btn-submit, .btn-back {
        width: 100%;
    }
}

/* =========================================
   FLOW PAGE (お引越しの流れ)
   ========================================= */
.flow-nav-list {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}
.flow-nav-item {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50px;
    padding: 10px 25px;
    font-weight: bold;
    color: #111;
    transition: 0.3s;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}
.flow-nav-item:hover {
    background: #111;
    color: #fff;
    border-color: #111;
    transform: translateY(-2px);
}

/* タイムラインスタイル */
.flow-section-title {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 900;
    margin-bottom: 40px;
    padding-top: 40px;
    border-top: 1px dashed #ddd;
}
.flow-section-title:first-of-type {
    border-top: none;
    padding-top: 0;
}

/* タイムラインスタイル（位置調整） */
.flow-timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto 60px;
    padding-left: 50px; /* ★余白を広げて大きな丸が入るスペースを確保 */
}
/* 縦線の位置（太くなった丸の中心に合わせる） */
.flow-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 27px; /* ★丸の中心(54pxの半分)を通るように調整 */
    width: 2px;
    background: #ddd;
}

.flow-step {
    position: relative;
    margin-bottom: 40px;
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}

/* ステップ番号の丸（大型化！） */
.flow-num {
    position: absolute;
    top: 20px;
    left: -77px; /* ★カードとの距離を調整 */
    width: 54px;  /* ★サイズUP！ (30px -> 54px) */
    height: 54px; /* ★サイズUP！ */
    background: #111;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 54px; /* ★高さに合わせて中央揃え */
    font-size: 1.6rem; /* ★数字を大きく、見やすく！ */
    font-weight: 900;  /* ★極太フォントで強調 */
    font-family: var(--f-en);
    z-index: 2;
    box-shadow: 0 0 0 5px #fff; /* 白フチで線を綺麗に隠す */
}

.flow-head {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--c-accent);
    display: inline-block;
    padding-bottom: 5px;
}

.flow-content {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #333;
}

.flow-img {
    margin-top: 20px;
    border-radius: 8px;
    overflow: hidden;
}
.flow-img img {
    width: 100%;
    height: auto;
    transition: 0.3s;
}
.flow-img:hover img {
    transform: scale(1.05);
}

/* リスト形式（手続きなど） */
.flow-list {
    list-style: none;
    margin-top: 15px;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
}
.flow-list li {
    position: relative;
    padding-left: 15px;
    margin-bottom: 8px;
    font-size: 0.9rem;
}
.flow-list li::before {
    content: '\f00c'; /* Font Awesomeのチェックマーク */
    font-family: "Font Awesome 5 Free"; /* アイコンフォントを指定 */
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--c-accent); /* アクセントカラー（青） */
}
.flow-sub-head {
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 5px;
    color: #111;
}

/* スマホ対応 */
@media (max-width: 600px) {
    .flow-timeline {
        padding-left: 0;
    }
    .flow-timeline::before {
        display: none; /* スマホでは縦線を消す */
    }
    .flow-num {
        position: static; /* 中に配置 */
        font-size: 1.2rem;
        display: inline-block;
        margin-right: 10px;
        margin-bottom: 10px;
    line-height: 40px;
    width: 40px;
    height: 40px;
    }
    .flow-step {
        padding: 20px;
    }
}

    /* 養生風景ギャラリー */
    .yojo-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-bottom: 60px;
    }
    .yojo-item {
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        transition: 0.3s;
    }
    .yojo-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    }
    .yojo-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* 信頼の証ボックス */
    .cert-box {
        text-align: center;
        background: #f9f9f9;
        padding: 40px;
        border-radius: 12px;
        margin-top: 60px;
    }
    .cert-icons {
        display: flex;
        justify-content: center;
        gap: 30px;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }
    .cert-icons img {
        height: 90px;
        background: #fff;
        padding: 5px;
        border-radius: 4px;
        box-shadow: 0 3px 10px rgba(0,0,0,0.05);
    }
    .cert-text {
        font-weight: bold;
        color: #111;
        font-size: 1.1rem;
    }

    /* スマホ対応 */
    @media (max-width: 768px) {
        .yojo-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 500px) {
        .yojo-grid { grid-template-columns: 1fr; }
    }

/* パートナーシップ専用の調整 */
    .partner-page-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 40px;
        margin-bottom: 80px;
    }
    .partner-card {
        text-align: center;
        transition: 0.3s;
    }
    .partner-card:hover {
        transform: translateY(-10px);
    }
    .partner-card img {
        width: 100%;
        height: auto;
        border: 1px solid #eee;
        border-radius: 12px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        transition: 0.3s;
    }
    .partner-card:hover img {
        box-shadow: 0 15px 30px rgba(0,0,0,0.15);
        border-color: var(--c-accent);
    }
    .partner-name {
        display: block;
        font-weight: 700;
        font-size: 1.2rem;
        margin-top: 15px;
        color: #111;
    }

    /* メッセージエリア */
    .message-box {
        background: #f9f9f9;
        padding: 50px 30px;
        border-radius: 12px;
        text-align: center;
    }
    .message-title {
        font-size: 1.6rem;
        font-weight: 900;
        margin-bottom: 20px;
        line-height: 1.4;
    }
    .message-text {
        font-size: 1rem;
        line-height: 2;
        color: #333;
        text-align: left;
        max-width: 800px;
        margin: 0 auto;
    }
    
    @media (max-width: 600px) {
        .message-title { font-size: 1.3rem; }
        .message-text { text-align: left; }
    }

/* =========================================
   PARTNER DETAIL (Kanoa Laulea's etc)
   ========================================= */

/* 本文エリア（既存の .content-text とは別に、少し太字で強調したい場合） */
.intro-text {
    font-size: 1rem;
    line-height: 2;
    margin-bottom: 60px;
    font-weight: 500;
}

/* 応援リンク集セクション */
.support-section {
    background: #f9f9f9;
    padding: 60px 20px;
    margin-top: 60px;
    border-radius: 12px; /* 角丸を追加して柔らかく */
}

.support-title {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 900;
    margin-bottom: 40px;
}

/* 応援リンクカード（グリッドは既存の .partner-page-grid を流用せず、専用に定義） */
.support-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.support-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: 0.3s;
    text-align: center;
    border: 1px solid #eee;
}

.support-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--c-accent);
}

.support-card a {
    display: block;
    padding-bottom: 20px;
    text-decoration: none;
    color: #111;
}

/* カード内画像 */
.support-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 1px solid #eee;
}

/* カード内テキスト */
.support-name {
    display: block;
    margin-top: 15px;
    font-weight: bold;
    font-size: 1.1rem;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .support-grid { grid-template-columns: 1fr; }
    .support-img { height: auto; aspect-ratio: 16/9; /* スマホで見やすい比率に */ }
}

/* =========================================
   PLAN PAGE (Plan & Option)
   ========================================= */

/* プラン詳細画像エリア */
.plan-detail-img {
    text-align: center;
    margin-bottom: 60px;
}
.plan-detail-img img {
    max-width: 100%;
    height: auto;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-radius: 8px;
}

/* オプション・サービス画像グリッド */
.option-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px; /* 間隔を少し広げて見やすく */
    margin-top: 40px;
}

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

.option-item h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--c-accent);
    display: inline-block;
    font-family: var(--f-jp);
}

.option-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: 0.3s;
}

.option-item:hover img {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* 本文内のリンク装飾（強調） */
.intro-text a {
    color: var(--c-accent);
    text-decoration: underline;
    font-weight: bold;
    transition: 0.3s;
}
.intro-text a:hover {
    color: #111;
    text-decoration: none;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .option-grid { 
        grid-template-columns: 1fr; 
        gap: 30px;
    }
}

/* =========================================
   REAL ESTATE PAGE (不動産会社様へ - FINAL V2)
   ========================================= */

/* --- お客様への特典（完全復元 & 微調整） --- */
.benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 80px;
}
.benefit-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* 画像エリア（余白なし・背景なし） */
.benefit-img-area {
    width: 100%;
    height: auto; /* 高さは画像なりに */
    padding: 0;   /* 余白なし */
    background-color: transparent; /* 背景色なし */
    line-height: 0; /* 画像下の隙間を消す */
}

/* 画像本体（幅100%） */
.benefit-img {
    width: 100%;
    height: auto;
    object-fit: cover; /* 枠に合わせて埋める */
    transition: 0.3s;
}

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

.benefit-body {
    padding: 25px 20px;
    flex-grow: 1;
    background: #fff;
}

.benefit-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #111; 
    font-family: var(--f-jp);
}

.benefit-desc {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}


/* --- スタイルと提携のメリット（数字位置の修正） --- */
.merit-section {
    background: #f5f5f7;
    padding: 100px 0;
    margin-top: 60px;
}
.merit-list {
    display: flex;
    flex-direction: column;
    gap: 60px; /* 間隔調整 */
    max-width: 1000px;
    margin: 0 auto;
}
.merit-item {
    display: flex;
    align-items: stretch; /* 高さを合わせる */
    justify-content: space-between;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    min-height: 320px; /* 高さを確保 */
}
.merit-item:nth-child(even) {
    flex-direction: row-reverse;
}

.merit-img-box {
    width: 45%;
    position: relative;
    overflow: hidden;
}
.merit-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}
.merit-item:hover .merit-img-box img { transform: scale(1.1); }

.merit-content {
    width: 55%;
    padding: 50px 50px 40px; /* 上下左右の余白 */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直中央寄せ */
}

/* 背景の数字（位置を絶対指定で調整） */
.merit-num-bg {
    position: absolute;
    top: 0px;      /* ★ここを調整して上にスペースを作る */
    left: 30px;
    font-family: var(--f-en);
    font-size: 7rem; /* サイズ調整 */
    font-weight: 900;
    color: #f0f0f0;  /* 薄いグレー */
    z-index: 0;
    line-height: 1;
    pointer-events: none;
}

.merit-head {
    position: relative;
    z-index: 1;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #111;
    margin-top: 30px; /* 数字との被りを防ぐ */
}
.merit-text {
    position: relative;
    z-index: 1;
    font-size: 0.95rem;
    line-height: 1.8;
    color: #555;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .benefit-grid { grid-template-columns: 1fr; }
    
    .merit-item, .merit-item:nth-child(even) {
        flex-direction: column;
        height: auto;
    }
    .merit-img-box {
        width: 100%;
        height: 200px;
    }
    .merit-content {
        width: 100%;
        padding: 40px 20px 30px;
    }
    .merit-num-bg {
        font-size: 5rem;
        top: 0;
        left: 20px;
    }
    .merit-head { margin-top: 20px; }
}

/* =========================================
   SITEMAP PAGE (サイトマップ)
   ========================================= */

/* サイトマップ全体レイアウト */
.sitemap-wrapper {
    max-width: 1000px;
    margin: 0 auto 100px;
    padding: 0 20px;
}

/* カテゴリごとのグリッド配置 */
.sitemap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

/* 個別のカテゴリボックス */
.sitemap-box {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
    transition: 0.3s;
}
.sitemap-box:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    border-color: #ddd;
}

/* カテゴリタイトル */
.sitemap-head {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--c-accent);
    display: block;
}
.sitemap-head a {
    color: #111;
    text-decoration: none;
    transition: 0.3s;
}
.sitemap-head a:hover {
    color: var(--c-accent);
}

/* リンクりスト */
.sitemap-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sitemap-list li {
    margin-bottom: 12px;
}
.sitemap-list li a {
    color: #555;
    font-size: 0.95rem;
    text-decoration: none;
    transition: 0.3s;
    display: block;
    position: relative;
    padding-left: 15px;
}
.sitemap-list li a::before {
    content: '\f054'; /* FontAwesome 右矢印 */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    color: #ccc;
    transition: 0.3s;
}
.sitemap-list li a:hover {
    color: var(--c-accent);
    transform: translateX(5px);
}
.sitemap-list li a:hover::before {
    color: var(--c-accent);
}

/* スマホ対応 */
@media (max-width: 600px) {
    .sitemap-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* =========================================
   LEGAL PAGE (特定商取引法)
   ========================================= */

/* 法的情報のテーブル */
.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 40px;
    border: 1px solid #ddd;
}

.legal-table th {
    background: #f9f9f9;
    padding: 20px;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    width: 25%;
    text-align: left;
    font-weight: 700;
    font-family: var(--f-jp);
    color: #111;
    vertical-align: top;
}

.legal-table td {
    padding: 20px;
    border-bottom: 1px solid #ddd;
    background: #fff;
    color: #333;
    line-height: 1.8;
}

/* テーブル内の区切り線（<hr>の代わり） */
.legal-divider {
    border-top: 1px dashed #ccc;
    margin: 15px 0;
    display: block;
    width: 100%;
    height: 1px;
}

.legal-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
}
.legal-list li {
    position: relative;
    padding-left: 15px; /* 点の後ろの余白 */
    margin-bottom: 5px; /* 行間 */
}
.legal-list li::before {
    content: '';
    position: absolute;
    top: 10px; /* 位置調整 */
    left: 0;
    width: 6px;  /* 点の大きさ */
    height: 6px;
    background-color: var(--c-accent); /* アクセントカラー（青） */
    border-radius: 50%; /* 丸くする */
}

/* スマホ対応 */
@media (max-width: 768px) {
    .legal-table th, .legal-table td {
        display: block;
        width: 100%;
        border-right: none;
    }
    .legal-table th {
        background: #111;
        color: #fff;
        padding: 10px 15px;
        border-bottom: none;
    }
    .legal-table td {
        padding: 15px;
        border-bottom: 1px solid #ddd;
    }
}

/* =========================================
   PICKUP PAGE (ピックアップ一覧)
   ========================================= */

/* グリッドレイアウト */
.pickup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 80px;
}

/* カードスタイル */
.pickup-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    transition: 0.3s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
    height: 100%; /* 高さを揃える */
    display: flex;
    flex-direction: column;
}

.pickup-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--c-accent);
}

.pickup-card a {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

/* サムネイル画像エリア */
.pickup-img {
    height: 200px;
    overflow: hidden;
    position: relative;
    background: #f9f9f9;
}

.pickup-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}

.pickup-card:hover .pickup-img img {
    transform: scale(1.1);
}

/* SNSアイコンオーバーレイ（右上に表示） */
.pickup-icon-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    z-index: 2;
}

/* テキストエリア */
.pickup-body {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.pickup-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
    transition: 0.3s;
    font-family: var(--f-jp);
    line-height: 1.4;
}

.pickup-card:hover .pickup-title {
    border-color: var(--c-accent);
    color: var(--c-accent);
}

.pickup-text {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 0;
}

/* =========================================
   VOICE PAGE (お客様の声)
   ========================================= */

/* 口コミリスト */
.voice-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 60px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* 口コミアイテム（吹き出し風） */
.voice-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* アイコンエリア */
.voice-icon {
    width: 80px;
    flex-shrink: 0;
    text-align: center;
}
.voice-img {
    width: 60px;
    height: 60px;
    background: #eee;
    border-radius: 50%;
    margin: 0 auto 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #999;
}
.voice-attr {
    font-size: 0.75rem;
    color: #666;
    font-weight: bold;
    line-height: 1.2;
}

/* 吹き出し本体 */
.voice-content {
    background: #f9f9f9;
    border-radius: 12px;
    padding: 20px;
    position: relative;
    flex-grow: 1;
    box-shadow: 0 3px 10px rgba(0,0,0,0.03);
}
/* 吹き出しの三角 */
.voice-content::before {
    content: '';
    position: absolute;
    top: 20px;
    left: -10px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #f9f9f9;
}

.voice-text {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #333;
    margin: 0;
}

/* ページ送りナビ */
.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 40px 0 60px;
}
.page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background: #fff;
    border: 1px solid #ddd;
    color: #111;
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px;
    transition: 0.3s;
    font-size: 0.9rem;
}
.page-btn:hover {
    background: #111;
    color: #fff;
    border-color: #111;
}
.page-btn i {
    margin: 0 5px;
}

/* 引越し侍バナー */
.banner-area {
    text-align: center;
    margin-bottom: 60px;
}
.banner-area img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: 0.3s;
}
.banner-area a:hover img {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* スマホ対応 */
@media (max-width: 600px) {
    .voice-item {
        flex-direction: column;
        gap: 10px;
    }
    .voice-icon {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 5px;
    }
    .voice-img {
        margin: 0;
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    .voice-content::before {
        display: none; /* スマホでは三角を消す */
    }
}

/* =========================================
   SHOPPING PAGE (スタイルショッピング)
   ========================================= */

/* ポイント紹介セクション（交互レイアウト） */
/* ※不動産ページの .merit-section と似ていますが、独自のクラス名で管理します */
.point-section {
    display: flex;
    flex-direction: column;
    gap: 60px;
    margin-bottom: 80px;
}

.point-box {
    display: flex;
    align-items: center;
    gap: 50px;
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}

/* 偶数番目は画像を右に */
.point-box:nth-child(even) {
    flex-direction: row-reverse;
}

.point-img {
    width: 45%;
    flex-shrink: 0;
}
.point-img img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.point-content {
    flex-grow: 1;
}

.point-label {
    display: inline-block;
    background: #111;
    color: #fff;
    padding: 5px 15px;
    font-family: var(--f-en);
    font-weight: bold;
    border-radius: 50px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
}

.point-text {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #333;
}

/* ショッピングサイトへのリンクバナー */
.shop-link-area {
    text-align: center;
    margin-bottom: 80px;
    background: #f9f9f9;
    padding: 60px 20px;
    border-radius: 12px;
}

.shop-bnr img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: 0.3s;
}

.shop-bnr a:hover img {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

/* スマホ対応 */
@media (max-width: 768px) {
    .point-box {
        flex-direction: column !important; /* スマホでは常に縦並び */
        padding: 30px;
        gap: 30px;
    }
    .point-img {
        width: 100%;
    }
}

/* =========================================
   PACKING TIPS PAGE (荷造りのコツ)
   ========================================= */

/* 動画カードリスト */
.tips-list {
    display: flex;
    flex-direction: column;
    gap: 60px;
    max-width: 900px;
    margin: 0 auto 80px;
}

/* 動画カード */
.tips-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}

.tips-head {
    background: #f9f9f9;
    padding: 20px 30px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 15px;
}

.tips-icon {
    font-size: 1.5rem;
    color: var(--c-accent);
}

.tips-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
    font-family: var(--f-jp);
}

.tips-body {
    padding: 30px;
}

/* YouTube動画レスポンシブ対応 */
.youtube-responsive {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.youtube-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.tips-text {
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
    font-weight: 500;
}

/* スマホ対応 */
@media (max-width: 600px) {
    .tips-card { border-radius: 8px; }
    .tips-head { padding: 15px 20px; }
    .tips-title { font-size: 1.1rem; }
    .tips-body { padding: 20px; }
}

/* =========================================
   FAQ PAGE (よくある質問)
   ========================================= */

/* FAQリスト */
.faq-list {
    max-width: 900px;
    margin: 0 auto 100px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* FAQアイテム (detailsタグ) */
.faq-item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.03);
    transition: 0.3s;
}
.faq-item[open] {
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    border-color: var(--c-accent);
}

/* 質問部分 (summaryタグ) */
.faq-question {
    padding: 20px 60px 20px 20px;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    position: relative;
    list-style: none; /* デフォルトの矢印を消す */
    display: flex;
    align-items: center;
    color: #111;
    background: #fff;
}
/* デフォルトの矢印を消す（Webkit用） */
.faq-question::-webkit-details-marker {
    display: none;
}

/* Qアイコン */
.faq-question::before {
    content: 'Q.';
    font-family: var(--f-en);
    font-weight: 900;
    color: var(--c-accent);
    margin-right: 15px;
    font-size: 1.3rem;
    flex-shrink: 0;
}

/* 開閉アイコン（＋－） */
.faq-question::after {
    content: '\f067'; /* FontAwesome Plus */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #ccc;
    transition: 0.3s;
}

/* 開いている時のアイコン（－） */
.faq-item[open] .faq-question::after {
    content: '\f068'; /* FontAwesome Minus */
    color: var(--c-accent);
    transform: translateY(-50%) rotate(180deg);
}

/* 回答部分 */
.faq-answer {
    padding: 20px 20px 30px 60px; /* Qのアイコン分インデント */
    border-top: 1px dashed #eee;
    background: #fbfbfb;
    font-size: 0.95rem;
    line-height: 1.8;
    color: #333;
    position: relative;
}
.faq-answer::before {
    content: 'A.';
    font-family: var(--f-en);
    font-weight: 900;
    color: #111;
    position: absolute;
    left: 20px;
    top: 20px;
    font-size: 1.3rem;
}

/* スマホ対応 */
@media (max-width: 600px) {
    .faq-question { padding: 15px 50px 15px 15px; font-size: 1rem; }
    .faq-answer { padding: 15px 15px 20px 15px; }
    .faq-question::before { font-size: 1.1rem; margin-right: 10px; }
    .faq-answer::before { position: static; display: block; margin-bottom: 5px; font-size: 1.1rem; }
}

/* =========================================
   GALLERY PAGE (写真ギャラリー)
   ========================================= */

/* ギャラリー全体レイアウト */
.gallery-wrapper {
    max-width: 1100px;
    margin: 0 auto 100px;
    padding: 0 20px;
}

/* 写真グリッド（Masonry風に詰める） */
.gallery-grid {
    column-count: 3; /* 3列表示 */
    column-gap: 20px; /* 列の間隔 */
}

/* 個別の写真カード */
.gallery-item {
    break-inside: avoid; /* 途中で途切れないように */
    margin-bottom: 20px; /* 下の間隔 */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: 0.3s;
    background: #fff;
    position: relative;
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: 0.5s;
}

/* ホバー時のエフェクト */
.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    z-index: 2;
}
.gallery-item:hover img {
    transform: scale(1.05);
}

/* スマホ対応 */
@media (max-width: 900px) {
    .gallery-grid { column-count: 2; }
}
@media (max-width: 600px) {
    .gallery-grid { column-count: 1; }
}

/* =========================================
   BUYBACK PAGE (買取サービス)
   ========================================= */

/* メリット3点（横並びカード） */
.merit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}
.merit-card {
    background: #fff;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    border: 1px solid #eee;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: 0.3s;
}
.merit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    border-color: var(--c-accent);
}
.merit-num {
    display: inline-block;
    background: #111;
    color: #fff;
    padding: 5px 15px;
    border-radius: 50px;
    font-weight: bold;
    margin-bottom: 15px;
    font-family: var(--f-en);
}
.merit-img {
    width: 100px;
    height: 100px;
    margin: 0 auto 15px;
    object-fit: contain;
}
.merit-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 10px;
}

/* お得な理由（画像＋テキスト） */
.reason-box {
    background: #f9f9f9;
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 60px;
}
.reason-img {
    max-width: 100%;
    height: auto;
    margin-top: 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* 買取品目リスト（アコーディオン風グリッド） */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 40px;
}
.category-item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.02);
}
.category-head {
    font-weight: bold;
    font-size: 1.1rem;
    border-bottom: 2px solid var(--c-accent);
    padding-bottom: 10px;
    margin-bottom: 15px;
    color: #111;
    display: flex;
    align-items: center;
    gap: 10px;
}
.category-head i { color: var(--c-accent); }
.category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.category-list li {
    position: relative;
    padding-left: 15px;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #555;
}
.category-list li::before {
    content: '\f00c'; /* Check icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    color: #ccc;
    font-size: 0.8rem;
}

/* 強化買取品目（画像付き3カラム） */
.pickup-item-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 60px;
}
.pickup-item-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
}
.pickup-item-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: 0.3s;
}
.pickup-item-card:hover .pickup-item-img {
    transform: scale(1.1);
}
.pickup-item-label {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 10px;
    font-weight: bold;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .merit-grid { grid-template-columns: 1fr; }
    .pickup-item-grid { grid-template-columns: 1fr; }
    .category-grid { grid-template-columns: 1fr; }
}

/* =========================================
   INFORMATION PAGE (引越し情報局)
   ========================================= */

/* 記事グリッド */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 80px;
}

/* 記事カード */
.info-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: 0.3s;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--c-accent);
}

.info-card a {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* サムネイル画像 */
.info-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: 0.5s;
}

.info-card:hover .info-img {
    transform: scale(1.05);
}
.info-img-wrap {
    overflow: hidden;
    height: 200px;
}

/* 記事内容 */
.info-body {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.info-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.5;
    font-family: var(--f-jp);
}

.info-text {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
}

/* 続きを読むリンク */
.read-more {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--c-accent);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
}
.read-more::after {
    content: '\f061'; /* FontAwesome Arrow Right */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.8rem;
    transition: 0.3s;
}
.info-card:hover .read-more::after {
    transform: translateX(5px);
}

/* スマホ対応 */
@media (max-width: 768px) {
    .info-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* =========================================
   ARTICLE DETAIL (記事詳細ページ)
   ========================================= */

/* 記事内の見出しスタイル（h3など） */
.article-h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 50px;
    margin-bottom: 20px;
    padding-left: 15px;
    border-left: 5px solid var(--c-accent);
    line-height: 1.4;
    color: #111;
}

/* 記事本文の段落 */
.article-text {
    font-size: 1rem;
    line-height: 1.9;
    color: #333;
    margin-bottom: 30px;
    text-align: justify; /* 両端揃えで読みやすく */
}

/* 記事内の強調ボックス（まとめなど） */
.article-summary-box {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 30px;
    margin-top: 60px;
}
.article-summary-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-align: center;
}

/* 記事下部のナビゲーション */
.article-nav {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #eee;
    text-align: center;
}
.btn-back-list {
    display: inline-block;
    padding: 12px 40px;
    border: 1px solid #111;
    color: #111;
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px;
    transition: 0.3s;
}
.btn-back-list:hover {
    background: #111;
    color: #fff;
}

/* スマホ対応 */
@media (max-width: 600px) {
    .article-h3 { font-size: 1.2rem; margin-top: 40px; }
    .article-summary-box { padding: 20px; }
}

/* =========================================
   AREA PAGE (対応エリア)
   ========================================= */

/* エリアページのレイアウト（地図とリストの横並び） */
.area-container {
    display: flex;
    gap: 50px;
    align-items: flex-start;
    margin-bottom: 80px;
}

/* 地図エリア */
.area-map {
    flex: 1;
    position: sticky; /* スクロールしてもついてくる（PCのみ） */
    top: 100px;
}
.area-map img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 1px solid #eee;
}

/* リストエリア */
.area-list-box {
    flex: 1;
    width: 100%;
}

.area-dl {
    border-top: 2px solid #111;
}

.area-dt {
    background: #f9f9f9;
    padding: 15px 20px;
    font-weight: 700;
    font-family: var(--f-jp);
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    margin: 0;
}
.area-dt::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 20px;
    background: var(--c-accent);
    margin-right: 10px;
    border-radius: 3px;
}

.area-dd {
    padding: 20px;
    margin: 0;
    border-bottom: 1px solid #ddd;
    line-height: 2;
    font-size: 0.95rem;
}

.area-dd a {
    color: #333;
    text-decoration: underline;
    text-decoration-color: #ddd;
    transition: 0.3s;
    margin-right: 5px;
    display: inline-block;
}
.area-dd a:hover {
    color: var(--c-accent);
    text-decoration-color: var(--c-accent);
    background: rgba(0, 117, 169, 0.05);
    border-radius: 3px;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .area-container {
        flex-direction: column-reverse; /* スマホでは地図を上に */
        gap: 30px;
    }
    .area-map {
        position: static;
        width: 100%;
    }
}

/* =========================================
   AREA DETAIL PAGE (各地域ページ)
   ========================================= */

/* 地域ページトップ画像（帯） */
.areatop {
    position: relative;
    margin-bottom: 60px;
    border-radius: 12px;
    overflow: hidden;
}
.areatop img {
    width: 100%;
    height: auto;
    display: block;
}
.areatop p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 2rem;
    font-weight: 900;
    text-shadow: 0 2px 10px rgba(0,0,0,0.7);
    width: 90%;
    text-align: center;
    margin: 0;
}

/* 安心サービス（3カラムカード） */
/* .merit-card と似ていますが、画像とテキストの比率が違うため専用クラスを作成 */
.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.service-box {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: 0.3s;
    display: flex;
    flex-direction: column;
}

.service-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--c-accent);
}

.service-head {
    background: #111;
    color: #fff;
    padding: 15px;
    text-align: center;
    font-weight: bold;
    font-size: 1.1rem;
}

.service-body {
    padding: 20px;
    flex-grow: 1;
}
.service-body p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
}

.service-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-top: 1px solid #eee;
}

/* 地域紹介テキスト */
.area-intro {
    background: #f9f9f9;
    padding: 40px;
    border-radius: 12px;
    margin-bottom: 60px;
    border-left: 5px solid var(--c-accent);
}
.area-intro h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .areatop p { font-size: 1.2rem; }
    .service-grid { grid-template-columns: 1fr; }
    .area-intro { padding: 20px; }
}