@charset "UTF-8";

/* -------------------------------------------------------
    service-detail.html タブレット版（768px〜1439px）
    css/service-detail.css（PC版）の px 指定を 1440px 基準で vw に変換
    計算式：px ÷ 1440 × 100 = vw（小数点4桁まで）
    セレクタ・レイアウト構成はPC版から変更していません
------------------------------------------------------- */

@media screen and (min-width: 768px) and (max-width: 1439px) {

    /* -------------------------
        このファイルは service-detail.html（08_サービスを探す_下層1）と
        lecture-detail.html（08_サービスを探す_下層2）で共用するスタイルです。
        サービス詳細系ページ（.service-hero, .service-intro, .service-cta 等）の
        共通部分をここに集約し、ページ固有のセクションはファイル末尾に追記しています。
        ヘッダー・フッター・共通ボタン・共通見出し（.c-heading）・
        ヒーロー波形マスク（.c-photo-wave-mask）は css/common.css を参照しています
        （common.cssはこの作業では編集していません）。
        施設カード（.facility-card）は facilities.html（05_施設を探す）の実装をそのまま再利用しています。
    ------------------------- */

    .l-main {
        min-width: 69.4444vw;
        background: var(--color-cream);
    }


    /* -------------------------
        ページタイトル（ヒーロー）
    ------------------------- */

    .service-hero {
        position: relative;
        width: 100%;
        height: 44.0972vw;
        background: var(--color-cream);
        overflow: hidden;
    }

    .service-hero__photo {
        position: absolute;
        inset: 0;
        overflow: hidden;
    }

    .service-hero__photo-inner {
        position: absolute;
        top: -10%;
        right: 0;
        bottom: -10%;
        left: 0;
        background: url("../images/service-detail/hero_photo.webp") center 25% / cover no-repeat;
    }

    .service-hero__inner {
        position: relative;
        max-width: 100vw;
        height: 100%;
        margin: 0 auto;
    }

    .service-hero__title {
        position: absolute;
        left: 11.1111vw;
        top: 18.4722vw;
        display: inline-flex;
        align-items: center;
        height: 5.9028vw;
        padding: 0 4.1667vw;
        margin: 0;
        background: var(--color-orange);
        border-radius: 13.8889vw;
        color: #fff;
        font-size: 2.9861vw;
        font-weight: 700;
        letter-spacing: 4.3px;
    }


    /* -------------------------
        高齢者/入居について
    ------------------------- */

    .service-intro {
        position: relative;
        padding: 8.0556vw 0 2.7778vw;
        overflow: visible;
    }

    .service-intro__inner {
        position: relative;
        max-width: 78.4722vw;
        margin: 0 auto;
        padding: 0 1.3889vw;
    }

    .service-intro__title {
        margin: 0 0 1.6667vw;
        font-size: 2.2917vw;
        font-weight: 700;
        line-height: 4.1667vw;
        letter-spacing: 1.65px;
    }

    .service-intro__lead {
        max-width: 67.3611vw;
        margin: 0;
        font-size: 1.3889vw;
        line-height: 1.75;
    }

    .service-intro__illust {
        position: absolute;
        top: -18.75vw;
        right: -6.9444vw;
        width: 15.2778vw;
        height: auto;
    }


    /* -------------------------
        入居が可能な施設
    ------------------------- */

    .service-facilities {
        position: relative;
        padding: 2.7778vw 0 13.8889vw;
        overflow: visible;
    }

    .service-facilities__inner {
        position: relative;
        max-width: 78.4722vw;
        margin: 0 auto;
        padding: 0 1.3889vw;
    }

    .service-facilities__heading {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.9722vw;
        width: 25.8333vw;
        margin: 0 auto 2.7778vw;
    }

    .service-facilities__heading::before,
    .service-facilities__heading::after {
        content: "";
        display: block;
        width: 100%;
        height: 0.2083vw;
        border-radius: 0.1389vw;
        background: var(--color-orange);
    }

    .service-facilities__title {
        margin: 0;
        font-size: 2.0833vw;
        font-weight: 900;
        color: var(--color-orange);
        letter-spacing: 1.5px;
        white-space: nowrap;
    }

    .service-facilities__grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2.7778vw;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .service-facilities__grid > .facility-card {
        width: min(24.3056vw, calc((100% - 5.5556vw) / 3));
    }

    .service-facilities__slider.js-card-slider .service-facilities__viewport {
        padding: 0.3472vw 0 0.6944vw;
    }

    .service-facilities__prev,
    .service-facilities__next {
        width: 4.2361vw;
        height: 4.2361vw;
    }

    .service-facilities__prev {
        left: -2.0833vw;
    }

    .service-facilities__next {
        right: -2.0833vw;
    }

    .service-facilities__dots {
        gap: 1.3889vw;
        margin-top: 3.4722vw;
    }

    .service-facilities__dot {
        width: 0.8333vw;
        height: 0.8333vw;
    }


    .facility-card {
        background: #fff;
        border-radius: 2.0833vw;
        box-shadow: 0 4px 5px rgba(152, 124, 82, 0.1);
        overflow: hidden;
    }

    .facility-card a {
        display: block;
        position: relative;
        padding: 0.6944vw;
        color: inherit;
        text-decoration: none;
    }

    .facility-card__photo-wrap {
        display: block;
        overflow: hidden;
        border-radius: 1.6667vw 1.6667vw 0 0;
    }

    .facility-card__photo {
        display: block;
        width: 100%;
        margin: 0;
        aspect-ratio: 350 / 280;
        object-fit: cover;
    }

    .facility-card__category {
        margin: 0.6944vw 0.6944vw 0.3472vw;
        overflow: hidden;
        color: #000;
        font-size: 0.8333vw;
        font-weight: 500;
        letter-spacing: -0.6px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .facility-card__name {
        margin: 0.6944vw 0.6944vw 0.3472vw;
        overflow: hidden;
        color: #000;
        font-size: 1.5278vw;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .facility-card__name-sub {
        font-size: 1.3194vw;
    }

    .facility-card__area-row {
        display: flex;
        align-items: center;
        gap: 1.3889vw;
        margin: 1.0417vw 0.6944vw 1.3889vw;
    }

    .facility-card__area-tag {
        height: 1.6667vw;
        padding: 0 0.5556vw;
        border-radius: 0.4167vw;
        font-size: 0.9722vw;
    }

    .facility-card__area {
        margin: 0;
        color: #000;
        font-size: 0.9722vw;
        font-weight: 400;
    }

    .facility-card__arrow {
        position: absolute;
        right: 1.6667vw;
        bottom: 1.6667vw;
        width: 2.0833vw;
        height: 2.0833vw;
    }

    .service-facilities__staff {
        position: absolute;
        left: -6.25vw;
        bottom: -33.3333vw;
        width: 21.5278vw;
        height: auto;
        z-index: 5;
    }


    /* -------------------------
        ご利用者さまの声
    ------------------------- */

    .service-voice {
        position: relative;
        padding: 10.4167vw 0 13.8889vw;
        background: var(--color-cream);
        overflow: visible;
    }

    .service-voice__bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        object-fit: fill;
        pointer-events: none;
    }

    .service-voice__inner {
        position: relative;
        z-index: 1;
        max-width: 78.4722vw;
        margin: 0 auto;
        padding: 0 1.3889vw;
    }

    .service-voice__deco-photo {
        position: absolute;
        z-index: 1;
        top: -12.3611vw;
        right: 0vw;
        width: 15.3472vw;
        height: auto;
    }

    .service-voice__slider {
        position: relative;
    }

    .service-voice__viewport {
        overflow: hidden;
        z-index: 1;
        position: relative;
    }

    .service-voice__list {
        display: flex;
        gap: 1.3889vw;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .service-voice__item {
        flex: 0 0 auto;
        background: #fff;
        border-radius: 2.0833vw;
        padding: 3.4722vw;
        text-align: center;
    }

    .service-voice__slider:not(.js-card-slider) .service-voice__list {
        flex-wrap: wrap;
        justify-content: center;
    }

    .service-voice__slider:not(.js-card-slider) .service-voice__item {
        width: calc((100% - 2.7778vw) / 3);
    }

    .service-voice__prev,
    .service-voice__next {
        position: absolute;
        top: 50%;
        z-index: 2;
        width: 4.2361vw;
        height: 4.2361vw;
        padding: 0;
        background: none;
        border: none;
        cursor: pointer;
        transform: translateY(-50%);
        transition: opacity 0.3s;
    }

    .service-voice__prev {
        left: -2.0833vw;
    }

    .service-voice__next {
        right: -2.0833vw;
    }

    .service-voice__prev:hover,
    .service-voice__next:hover {
        opacity: 0.8;
    }

    .service-voice__prev-icon,
    .service-voice__next-icon {
        display: block;
        width: 100%;
        height: 100%;
    }

    .service-voice__prev-icon {
        transform: scaleX(-1);
    }

    .service-voice__avatar {
        display: block;
        width: 8.3333vw;
        height: 8.3333vw;
        margin: 0 auto 0.8333vw;
    }

    .service-voice__name {
        margin: 0 0 2.7778vw;
        font-size: 1.0417vw;
        letter-spacing: 0.75px;
    }

    .service-voice__text {
        margin: 0;
        font-size: 1.25vw;
        line-height: 1.7;
        letter-spacing: -0.9px;
        text-align: left;
    }


    /* -------------------------
        CTA
    ------------------------- */

    .service-cta {
        padding: 6.9444vw 0 27.7778vw;
    }

    .service-cta__inner {
        display: flex;
        justify-content: center;
        gap: 6.25vw;
    }

    .service-cta__btn--multiline {
        font-size: 1.3889vw;
        letter-spacing: 2px;
        line-height: 1.7361vw;
    }

    .service-cta__btn--multiline span {
        display: block;
    }


    /* =========================================================
        lecture-detail.html（08_サービスを探す_下層2）専用の追加スタイル
        ヒーロー・見出し・CTA等の共通部分は上記のservice-detail.html用スタイルを
        そのまま再利用し、このページ固有のセクションのみ以下に追記する。
    ========================================================= */

    .service-hero__photo--lecture .service-hero__photo-inner {
        background-image: url("../images/lecture-detail/hero_photo.webp");
    }



    /* -------------------------
        開催の様子（写真ギャラリー）
        facility-detail.html（06_施設を探す_下層）の.facility-galleryと同じ
        円形prev/nextナビの実装パターンを踏襲
    ------------------------- */

    .lecture-gallery {
        padding: 2.7778vw 0 6.9444vw;
    }

    .lecture-gallery__inner {
        max-width: 78.4722vw;
        margin: 0 auto;
        padding: 0 1.3889vw;
    }

    .lecture-gallery__main {
        position: relative;
    }

    .lecture-gallery__frame {
        position: relative;
        width: 100%;
        aspect-ratio: 1130 / 636;
        overflow: hidden;
        border-radius: 2.0833vw;
    }

    .lecture-gallery__photo {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 0.5s;
    }

    .lecture-gallery__photo.is-active {
        opacity: 1;
    }

    .lecture-gallery__nav {
        position: absolute;
        top: 50%;
        z-index: 2;
        width: 4.2361vw;
        height: 4.2361vw;
        padding: 0;
        background: none;
        border: none;
        cursor: pointer;
        transform: translateY(-50%);
        transition: opacity 0.3s;
    }

    .lecture-gallery__nav:hover {
        opacity: 0.8;
    }

    .lecture-gallery__nav--prev {
        left: -2.0833vw;
    }

    .lecture-gallery__nav--next {
        right: -2.0833vw;
    }

    .lecture-gallery__nav-icon {
        display: block;
        width: 100%;
        height: 100%;
    }

    .lecture-gallery__nav--prev .lecture-gallery__nav-icon {
        transform: rotate(180deg);
    }

    .lecture-gallery__thumbs {
        width: 45.8333vw;
        max-width: 100%;
        margin: 1.3889vw auto 0;
        display: flex;
        gap: 1.3889vw;
        padding: 0;
        list-style: none;
    }

    .lecture-gallery__thumbs li {
        width: 25%;
    }

    .lecture-gallery__thumb-btn {
        display: block;
        width: 100%;
        padding: 0;
        background: none;
        border: 3px solid transparent;
        border-radius: 0.9028vw;
        cursor: pointer;
        transition: border-color 0.3s;
    }

    .lecture-gallery__thumb-btn.is-active {
        border-color: var(--color-orange);
    }

    .lecture-gallery__thumb-btn img {
        display: block;
        width: 100%;
        aspect-ratio: 150 / 84;
        object-fit: cover;
        border-radius: 0.6944vw;
    }


    /* -------------------------
        講座一覧
    ------------------------- */

    .lecture-list {
        padding: 2.7778vw 0 6.9444vw;
    }

    .lecture-list__inner {
        position: relative;
        max-width: 78.4722vw;
        margin: 0 auto;
        padding: 0 1.3889vw;
    }

    .service-hero__deco-drawing {
        position: absolute;
        right: 11.1111vw;
        bottom: 0;
        width: 15.9722vw;
        height: auto;
        pointer-events: none;
    }

    .lecture-list__card {
        max-width: 71.3889vw;
        margin: 0 auto;
        padding: 6.9444vw 8.3333vw 5.5556vw 8.2639vw;
        background: #fff;
        border-radius: 2.0833vw;
    }

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

    .lecture-list__item + .lecture-list__item {
        border-top: 1px solid #DBDBB0;
    }

    .lecture-list__accordion {
        padding: 1.3889vw 0;
    }

    .lecture-list__summary {
        display: flex;
        align-items: center;
        gap: 1.1111vw;
        cursor: pointer;
        list-style: none;
    }

    .lecture-list__summary::-webkit-details-marker {
        display: none;
    }

    .lecture-list__num {
        flex-shrink: 0;
        width: 3.75vw;
        color: var(--color-green);
        font-size: 1.9444vw;
        font-weight: 700;
    }

    .lecture-list__question {
        flex: 1;
        color: #000;
        font-size: 1.5278vw;
        font-weight: 500;
        letter-spacing: -1.1px;
        line-height: 1.36;
    }

    .lecture-list__toggle {
        flex-shrink: 0;
        width: 1.3194vw;
        height: 1.3194vw;
        background-image: url("../images/lecture-detail/icon_accordion_closed.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }

    .lecture-list__accordion[open] .lecture-list__toggle {
        background-image: url("../images/lecture-detail/icon_accordion_open.svg");
    }

    .lecture-list__body {
        display: flex;
        align-items: flex-start;
        gap: 0.8333vw;
        margin-top: 1.1111vw;
        overflow: hidden;
        transition: height 0.3s ease;
    }

    .lecture-list__answer {
        margin: 0;
        color: #000;
        font-size: 1.25vw;
        line-height: 1.56;
    }

    .lecture-list__card-btn {
        width: 48.125vw;
        margin: 4.1667vw auto 0;
    }

}