/**
 * page-location.css
 * Location Page Styles
 */

/* ==========================================================================
   Variables
   ========================================================================== */
:root {
    --color-primary: #2d5c4f;
    --color-primary-dark: #1e4038;
    --color-accent: #c9a84c;
    --color-accent-light: #e8d59a;
    --color-text: #333;
    --color-text-light: #666;
    --color-bg-beige: #f7f4ef;
    --color-bg-gray: #f5f5f5;
    --color-white: #fff;
    --color-blue-opacity: rgba(48, 113, 185, 0.8);
}

/* ==========================================================================
   Base / Common
   ========================================================================== */
.page-location {
    font-family: "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
    color: var(--color-text);
    line-height: 1.8;
}

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

/*.page-location section {
    padding: 60px 0;
}*/

/* Section Headers */
.section-header {
    text-align: center;
    margin-bottom: 40px;
}

section .container {
    max-width:1430px;
}


.section-title {
    font-size: 45px;
    font-family: 'Barlow Condensed', 'DIN Condensed', sans-serif;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--color-primary);
    margin: 0;
    padding: 10px;
}

.section-subtitle {
    font-size: 28px;
    font-family: 'Noto Serif JP', serif;
    color: var(--color-text-light);
    letter-spacing: 0.1em;
    padding-bottom: 30px !important;
}

.section-lead {
    font-size: 28px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
}

.section-title-bar {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-white);
    padding: 15px 40px;
    font-size: 18px;
    letter-spacing: 0.1em;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.location-hero {
    position: relative;
    height: 400px;
    margin-top: 105px;
    background-image: url('../images/location/mv-location.jpg');
    background-size: cover;
    background-position: center 70%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

@media (max-width: 1199px) {
    .location-hero {
        margin-top:23px;
    }
}

.location-hero .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
}

.location-hero .hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: var(--color-white);
}

.location-hero .hero-num {
    font-size: 72px;
    font-weight: 300;
    letter-spacing: 0.1em;
    line-height: 1;
    margin-bottom: 5px;
}

.location-hero .hero-label {
    font-size: 14px;
    letter-spacing: 0.2em;
    margin-bottom: 5px;
}

.location-hero .hero-title {
    font-size: 48px;
    font-weight: 600;
    letter-spacing: 0.2em;
}

.location-hero .location-title {
    width: 265px;
    height: auto;
}

.header-a-location {
    background-color: #4b7f86;
}
.title-a-location {
    color: #c7d9dd;
}
.subtitle-a-location {
    color: #ffffff;
}

@media (max-width: 1199px) {
    .location-h1 {
        margin-top: 15px !important;
    }
}

@media (min-width: 1200px) {
    .location-h1 {
        margin-top: 0px !important;
    }
}
.location-title {
    width: 90%;
    height: auto;
}

/* ==========================================================================
   Intro Section
   ========================================================================== */
.location-intro {
    font-family: 'Noto Serif JP', serif;
    background-color: #f8f7f0;
    padding: 60px 0 70px;
}

.location-intro .intro-text {
    max-width: 800px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 2;
    color: var(--color-text-light);
}

/* SP: Introセクション */
@media (max-width: 767px) {
    .location-intro {
        padding: 40px 20px 50px;
    }
    .location-intro .intro-text {
        font-size: 12px;
    }
}

/* ==========================================================================
   ACCESS Section
   ========================================================================== */
.location-access {
    background-color: #f8f7f0;
    padding-bottom: 60px;
}

.location-access .section-header {
    margin-bottom: 50px;
}

    .location-access .access-content {
        font-family: 'Noto Serif JP', serif;
        padding: 0 20px;
    }

/* SP: ACCESSセクション */
@media (max-width: 767px) {
    .location-access {
        padding-bottom: 50px;
    }

    .location-access .section-header {
        margin-bottom: 30px;
    }

    .location-access .access-content {
        padding: 0;
    }
}

.access-images .area-label {
    font-size: 12px;
    color: var(--color-text-light);
    margin-top: 5px;
    letter-spacing: 0.1em;
}

.access-info .time-label {
    font-size: 14px;
    line-height: 1.8;
    background: var(--color-primary);
    color: var(--color-white);
    padding: 15px 20px;
    border-radius: 5px;
}

.access-detail {
    display: flex;
    gap: 20px;
}

.access-detail .detail-item {
    flex: 1;
    text-align: center;
    background: var(--color-white);
    padding: 15px;
    border-radius: 5px;
}

.access-detail .detail-icon {
    font-size: 24px;
    display: block;
    margin-bottom: 5px;
}

.access-detail .detail-item p {
    font-size: 12px;
    margin: 0;
}

.access-detail .detail-item .time {
    font-size: 14px;
    color: var(--color-primary);
    font-weight: 600;
    margin-top: 5px;
}

.access-detail .detail-item .time .num {
    font-size: 24px;
    font-family: 'Noto Serif JP', serif;
}

.access-box-group {
    display: flex;
    gap: 15px;
}

.access-box {
    flex: 1;
    background: var(--color-primary);
    color: var(--color-white);
    padding: 15px;
    border-radius: 5px;
    text-align: center;
}

.access-box .box-title {
    font-size: 12px;
    margin-bottom: 5px;
}

.access-box .box-time {
    font-size: 14px;
}

.access-box .box-time .num {
    font-size: 32px;
    font-family: 'Noto Serif JP', serif;
    font-weight: 600;
}

.access-box .box-time .note {
    font-size: 10px;
    display: block;
}
.access-time-box {
    background-color: var(--color-blue-opacity);
    color: #ffffff;
    border-radius: 10px;
    padding: 20px 25px;
    text-align: left;
}

.access-time-box .time-label {
    font-size: 16px;
    font-family: "Noto Serif JP", serif;
    line-height: 1.8;
    margin: 0;
}
@media (min-width: 768px) {
    .access-time-box .time-label {
        font-size:24px;
    }
}

/* PC: ACCESSセクション flexboxレイアウト（左右高さ揃え） */
@media (min-width: 768px) {
    .access-pc-wrap {
        display: flex;
        gap: 40px;
        align-items: stretch;
    }

    /* 左カラム: 写真エリア */
    .access-left-col {
        flex: 0 0 50.8%;
        display: flex;
        flex-direction: column;
    }

    .access-photo-main-wrap {
        margin-bottom: 10px;
    }

    .access-photo-main-wrap img {
        width: 100%;
        height: auto;
        display: block;
    }

    .access-photo-sub-wrap {
        flex: 1;
        display: flex;
    }

    .access-photo-sub-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* 右カラム: 路線図 */
    .access-right-col {
        flex: 1;
        display: flex;
        flex-direction: column;
        position: relative;
    }

        .access-right-col .access-time-box {
            position: absolute;
            top: 0;
            right: 0;
            width: 260px;
            z-index: 10;
            margin-right: -10px;
            margin-top: -30px;
        }
        @media(min-width:788px) {
            .access-right-col .access-time-box {
                width: 390px;
            }
        }

    .access-right-col .access-route-map {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: top right;
    }

    /* 欄外テキスト（左カラム幅に合わせる） */
    .access-photo-note {
        width: 50.8%;
        margin-top: 5px;
        font-size: 12px;
        color: #666;
    }
}

/* SP: 青ボックスを上下の画像にまたがらせる */
@media (max-width: 767px) {
    .access-photo-wrap {
        position: relative;
        margin-bottom: 0;
    }

    .access-photo-wrap .access-time-box {
        position: absolute;
        bottom: -00px;
        right: 0;
        width: 60%;
        padding: 5px 16px;
        z-index: 10;
        text-align: left;
    }

    .access-time-box .time-label {
        font-size: 14px;
        line-height: 1.6;
    }

    .access-route-img {
        margin-top: -30px;
        position: relative;
        z-index: 1;
    }

    .access-route-img img {
        position: relative;
        z-index: 1;
    }
}

/* Route Map */
.route-map {
    /*padding: 30px;*/
    border-radius: 10px;
}

.route-map-label {
    display: inline-block;
    padding: 10px 30px;
    border-radius: 25px;
    background-color: var(--color-blue-opacity);
    color: #ffffff;
    border-radius: 10px;
    position:relative;
    z-index:10;
}

.route-map-label p {
    margin: 0;
    font-size: 14px;
}
@media(min-width:788px) {
    .route-map-label p {
        font-size:24px;
    }
}

.route-map img {
    display: block;
    margin: auto;
    margin-top: -20px;
    width: 100%;
    max-width: 841px !important;
}

.route-time-display,
.route-map .d-flex {
    display: flex;
    justify-content: center;
    gap: 3%;
    margin-top: 30px;
}

.route-time-item {
    text-align: center;
    white-space: nowrap;
}

.route-time-item .dest {
    font-size: 37px;
    font-family: "Noto Serif JP", serif;
    letter-spacing: 0.03em;
}

.route-time-item .time {
    font-size: 41px;
    font-family: "Noto Serif JP", serif;
    letter-spacing: 0.03em;
    color: #000000;
    white-space: nowrap;
}

.route-time-item .time .num {
    font-size: 62px;
    font-family: 'Noto Serif JP', serif;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.route-time-item .time .note-num {
    font-size: 14px;
    font-family: "Noto Sans JP", sans-serif;
    vertical-align: super;
    margin-left: 2px;
}
@media (max-width: 767px) {
    .route-time-item .time .note-num {
        font-size: 8px;
    }
}

/* 注釈 */
.route-map > div:last-child {
    width: fit-content;
    margin: 20px auto 0;
}

.route-map > div:last-child p {
    font-size: 12px;
    font-family: "Noto Sans JP", sans-serif;
    color: #666;
    line-height: 1.8;
    margin: 0 0 5px;
    text-align: left;
}
.route-map .access-note {
    max-width: 841px;
}

/* ==========================================================================
   DAILY LIFE Section
   ========================================================================== */
.location-daily {
    font-family: 'Noto Serif JP', serif;
    background-color: #f8f7f0;
    padding:60px 0;
}

.daily-box {
    padding: 5px 30px;
    border-radius: 10px;
}

.sub-box-label {
    text-align: center;
    font-size: 24px;
    color: #ffffff;
    margin: auto;
    margin-bottom: 20px;
    background: #cd5e2c;
    padding: 10px 5px;
    border-radius: 5px;
    max-width: 470px;
}

/* 施設名・距離 */
.facility-name {
    font-size: 16px;
    font-family: "Noto Serif JP", serif;
    color: #231815;
    margin: 10px 0 5px;
    line-height: 1.4;
}

.facility-distance {
    font-size: 16px;
    font-family: "Noto Serif JP", serif;
    color: #231815;
    margin: 0;
    line-height: 1.4;
}

/* ==========================================================================
   RESORT & LEISURE Section
   ========================================================================== */
.location-resort {
    font-family: 'Noto Serif JP', serif;
    background-color: #f8f7f0;
    padding: 60px 0;
}

.resort-item {
    margin-bottom: 20px;
}

.resort-label {
    font-size: 13px;
    color: #ffffff;
    background: #cd5e2c;
    padding: 10px 15px;
    margin-bottom: 15px;
    border-radius: 5px;
}

/* ==========================================================================
   AREA NETWORK Section
   ========================================================================== */
.location-area {
    font-family: 'Noto Serif JP', serif;
    background-color: #f8f7f0;
    padding:60px 0;
}

.area-label {
    font-size: 13px;
    color: #ffffff;
    background: #cd5e2c;
    padding: 10px 15px;
    margin-bottom: 15px;
    border-radius: 5px;
}

.area-icon-row {
    position: relative;
    z-index: 2;
    margin-bottom: 10px;
    align-items: flex-start;
}

.area-photo-row {
    position: relative;
    z-index: 1;
    gap: 10px;
}

.area-icon {
    width: 80px;
    flex-shrink: 0;
    margin-bottom: -30px;
}

.area-icon img {
    width: 100%;
    height: auto;
}

.area-description {
    font-size: 18px;
    font-family: "Noto Serif JP", serif;
    line-height: 1.5;
    color: #231815;
    display: flex;
    align-items: flex-start;
    margin-left: 15px;
    padding-top: 5px;
}

.area-spot {
    margin-bottom: 20px;
    width: calc(50% - 5px);
}

.area-spot .spot-text {
    font-size: 12px;
    color: var(--color-text-light);
    margin-bottom: 10px;
}

.area-map-img {
    border-radius: 10px;
}

.area-map-section,
.area-chiba-navi {
    width: 100%;
    text-align: center;
}

.area-map-section img,
.area-chiba-navi img {
    max-width: 100%;
    height: auto;
}

.chiba-navi-link {
    display: block;
    text-decoration: none;
}

.chiba-navi-link .navi-label {
    font-size: 18px;
    color: var(--color-accent);
    margin-top: 5px;
}
@media (max-width: 767px) {
    .navi-label {
        font-size: 12px;
        text-align: center;
    }
}

@media (min-width: 768px) {
    .navi-label {
    }
}

/* ==========================================================================
   GOURMET Section
   ========================================================================== */
.location-gourmet {
    font-family: 'Noto Serif JP', serif;
    background-color: #f8f7f0;
}

.location-gourmet .section-header {
    text-align: center;
}

.location-gourmet .sub-box-label {
    font-size: 30px;
    font-family: "Noto Serif JP", serif;
    letter-spacing: 0.15em;
    line-height: 1.6;
    padding: 18px 20px;
    max-width: 520px;
    border-radius: 8px;
    margin-bottom: 40px;
}
.gourmet-icon {
    width: 80px;
    position: relative;
    z-index: 2;
    margin-bottom: -70px;
    margin-left: -10px;
}
.gourmet-label {
    font-size: 13px;
    color: #ffffff;
    background: #cd5e2c;
    padding: 10px 15px;
    margin-bottom: 15px;
    border-radius: 5px;
}
.gourmet-box {
    background-color: #ffffff;
    border: 2px solid #bf8400;
    position: relative;
    z-index: 1;
}
.gourmet-text{
    margin-top : 45px;
}
.gourmet-item {
    background: var(--color-white);
    padding: 20px;
    border-radius: 10px;
}
@media (max-width: 767px) {
    .gourmet-item {
        display: flex;
        gap: 3%;
    }
    .gourmet-item .gourmet-pic {
        flex: 0 0 48%;
    }
}



.gourmet-item img {
    border-radius: 0;
    margin-bottom: 15px;
}

.gourmet-name {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 5px;
}

.gourmet-sub {
    font-size: 16px;
    color: #000000;
    margin-bottom: 10px;
}

.gourmet-desc {
    font-size: 12px;
    line-height: 1.8;
}
@media (min-width: 768px) {
    .gourmet-desc {
        font-size: 18px;
        text-align: left;
    }
}

/* ==========================================================================
   COMPANIES Section
   ========================================================================== */
.location-companies {
    background: var(--color-bg-beige);
    padding: 40px 0;
}

.companies-label {
    text-align: center;
    font-size: 14px;
    margin-bottom: 30px;
    color: var(--color-text-light);
}

.company-logo {
    max-height: 40px;
    margin-bottom: 10px;
}

.company-tel {
    font-size: 14px;
    color: var(--color-text);
    margin: 0;
}

.location-notice {
    font-size: 12px;
}

/* ==========================================================================
   Responsive - Tablet
   ========================================================================== */
@media (max-width: 991px) {
    .location-hero {
        height: 300px;
    }

    .location-hero .hero-num {
        font-size: 56px;
    }

    .location-hero .hero-title {
        font-size: 36px;
    }

    .location-hero .location-title {
        width: 195px;
        height: auto;
    }

    .route-time-display {
        gap: 30px;
    }

    .route-time-item .time .num {
        font-size: 36px;
    }
}

/* ==========================================================================
   Responsive - Mobile
   ========================================================================== */
@media (max-width: 767px) {
    .page-location section {
        padding: 10px 0;
    }

    .section-title {
        font-size: 25px;
    }
    .section-subtitle {
        font-size: 16px;
        line-height: 1.3;
    }

    .section-lead {
        font-size: 17px;
        line-height: 1.8;
    }

    /* Section Headers */
    .section-header {
        margin-bottom: 18px;
    }

    /* Hero */
    .location-hero {
        height: 250px;
    }

    .location-hero .hero-num {
        font-size: 42px;
    }

    .location-hero .hero-title {
        font-size: 28px;
    }

    .location-hero .location-title {
        width: 140px;
        height: auto;
    }

    /* Access */
    .access-detail {
        flex-direction: column;
        gap: 10px;
    }

    .access-box-group {
        flex-direction: column;
        gap: 10px;
    }

    .route-map {
        /*padding: 20px 15px;*/
    }

    .route-time-display {
        flex-direction: row;
        gap: 30px;
    }

    .route-time-item .dest {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .route-time-item .time {
        font-size: 19px;
    }

    .route-time-item .time .num {
        font-size: 28px;
    }

    .route-map > div:last-child p {
        font-size: 10px;
        line-height: 1.6;
    }

    /* Daily */
    .daily-box {
        padding: 15px;
    }
    .sub-box-label {
        font-size: 13px;
        max-width: 235px;
    }

    .facility-name {
        font-size: 10px;
        margin: 8px 0 3px;
    }

    .facility-distance {
        font-size: 10px;
    }

    /* Area Network */
    .area-icon-row {
        margin-bottom: 5px;
    }

    .area-icon {
        width: 60px;
        margin-bottom: -20px;
    }

    .area-description {
        font-size: 12px;
        line-height: 1.4;
        margin-left: 10px;
        padding-top: 3px;
    }

    .area-spot {
        width: calc(50% - 5px);
    }

    /* Gourmet */
    .location-gourmet .sub-box-label {
        font-size: 16px;
        letter-spacing: 0.1em;
        padding: 12px 20px;
        max-width: 280px;
        margin-bottom: 25px;
    }
    .gourmet-name {
        font-size: 13px;
        padding-top:10px !important;
    }

    .gourmet-sub {
        font-size: 10px;
    }
    .gourmet-icon {
        width: 60px;
        margin-bottom: -55px;
        margin-left: -10px;
    }
    .gourmet-text {
        margin-top: 15px;
    }
    .gourmet-item {
        padding: 15px 15px 5px;
        margin-bottom: 5px;
    }
    .gourmet-box {
        margin-bottom: 20px;
    }

    .section-title-bar {
        padding: 12px 25px;
        font-size: 14px;
    }

    /* Companies */
    .location-companies .row > div {
        margin-bottom: 20px;
    }

    .location-notice {
        font-size: 9px;
    }
}