/* ================================================

SERVICE 事業紹介ページ 5ページ

================================================ */

/* ········ PARTS:SERVICE ········ */

.service {
    --min-size: 40;
    --max-size: 47;
    padding-top: var(--clamp-size);
}

.service__head {
    margin-bottom: var(--space-5xl);
}

.service__type {
    width: fit-content;
    display: block;
    padding: 1em 2.25em;
    text-align: center;
    line-height: 1;
    border: 1px solid currentColor;
    border-radius: 999px;
    background-color: #fff;
    background-color: var(--color-main);
    color: #fff;
    border: var(--color-main);
    margin-bottom: 1em;
    margin-left: 0.1em;

    position: absolute;
    --min-size: 40;
    --max-size: 47;
    top: calc(-1 * var(--clamp-size));
    translate: 0 -50%;
}

/* 放課後等デイサービスさくらんぼの色：グリーン */
.page-sakuranbo .service__type {
    background-color: var(--color-green) !important;
    border-color: var(--color-green);
}

/* クランクBのページは色を茶色にする */
.page-crank-b .service__type {
    background-color: var(--color-brown);
    border-color: var(--color-brown);
}

/* クランクのページは色をオレンジにする */
.page-crank .service__type {
    background-color: var(--color-orange);
    border-color: var(--color-orange);
}

.service__title>strong {
    --min-size: 24;
    --max-size: 42;
    font-size: var(--clamp-size);
    font-weight: var(--fontWeight-medium);
    line-height: 1.3;
    letter-spacing: var(--letterSpacing-16);
    display: inline-block;
}

.service__place {
    font-size: var(--fontSize-md);
    margin-top: 0.25em;
    margin-left: 0.2em;
}

.service__body {
    display: flex;
    gap: clamp(24px, 5.27vw, 96px);
}

.service__content {
    flex: 5.5;
    max-width: 560px;
}

.service__images {
    flex: 4.5;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.service__img {
    aspect-ratio: 380/266;
    /* border-radius: 2.15cqi; */
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}

.service__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (width < 768px) {
    .service__body {
        flex-direction: column;
    }

    .service__content {
        flex: 1;
        max-width: unset;
    }
}

/* ········ イラスト ········ */
/* さくらホーム */
.service__content p::after {
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    width: clamp(200px, 0%, 460px);
    margin-top: var(--space-lg);
    margin-left: auto;
}

.page-sakurahome .service__content p::after {
    content: "";
    background-image: url(../../img/common/illust_8.webp);
    width: clamp(200px, 90%, 460px);
    aspect-ratio: 300/180;
}

.page-oonoya .service__content p::after {
    content: "";
    background-image: url(../../img/common/illust_9.webp);
    width: clamp(200px, 70%, 330px);
    aspect-ratio: 5/3;
}

.page-sakuranbo .service__content p::after {
    content: "";
    background-image: url(../../img/common/illust_3.webp);
    width: clamp(200px, 75%, 400px);
    aspect-ratio: 230/140;
}

.page-crank-b .service__content p::after {
    content: "";
    background-image: url(../../img/common/illust_10.webp);
    width: clamp(200px, 60%, 280px);
    aspect-ratio: 1709/1428;
}

.page-crank .service__content p::after {
    content: "";
    background-image: url(../../img/common/illust_11.webp);
    width: clamp(200px, 70%, 320px);
    aspect-ratio: 2113/1221;
}

@media (width < 768px) {

    /* さくらホーム */
    .page-sakurahome .service__content p::after {
        width: clamp(200px, 90%, 420px);
    }
}

/* ----------------------------------------
FEATURE さくらホーム/おおの家
---------------------------------------- */
.feature {
    background-color: var(--color-bg-l-pink);
}

.feature__img {
    width: 100%;
    height: auto;
    /* １枚の場合の角丸 */
    border-radius: 3.75cqi;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-xl);
}

/* 複数枚の場合の角丸 */
.feature__grid .feature__img {
    /* border-radius: 2.5cqi; */
    border-radius: var(--border-radius-sm);
}

.feature__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* おおの家,クランクb */
.feature__wrap:not(:first-of-type) {
    padding-top: var(--space-7xl);
    border-top: 1px solid var(--color-border-brown);
}

.feature__wrap:not(:last-of-type) .feature__text {
    margin-bottom: var(--space-6xl);
}

.page-crank-b .feature__wrap:not(:first-of-type) {
    padding-top: 0;
    border-top: none;
}

/* さくらホーム,クランクbのイラストの配置 */
.feature__illust {
    display: flex;
    gap: var(--space-lg);
    align-items: flex-end;
}

/* さくらホーム */
.page-sakurahome .feature__illust .feature__img {
    flex: 6;
    margin-bottom: 0;
    /* border: 1px solid var(--color-base); */
}

.feature__illust .feature__content {
    flex: 4;
}

/* クランクB */
.page-crank-b .feature__illust .feature__img {
    flex: 7;
    margin-bottom: 0;
}

.page-crank-b .feature__illust .feature__content {
    flex: 3;
}

@media (width < 768px) {
    .feature__illust {
        flex-direction: column;
    }

    .feature__illust .feature__img,
    .feature__illust .feature__content {
        flex: unset;
    }
}

/* ········ おおの家の画像グリッド ········ */
.feature__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(10px, 3.25cqi, 26px);
    margin-bottom: var(--space-lg);
}

.feature__grid .feature__img--large {
    grid-column: 1 / 3;
    grid-row: 1;
    border-radius: var(--border-radius-lg);
}

.feature__grid .feature__img {
    margin-bottom: 0;
}

/* ········ さくらホームの画像グリッド表示 ········ */
.feature__gallery {
    margin-top: var(--space-6xl);
}

.photo-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 2fr 1fr 1.6fr;
    gap: clamp(10px, 2cqi, 20px);

    margin: 0 auto;
    aspect-ratio: 1000/600;
}

.photo-item {
    position: relative;
    overflow: hidden;
    /* border-radius: 2.35cqi; */
    border-radius: var(--border-radius-sm);
}

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

/* 大きな写真（左上から左中央まで2行分） */
.photo-large {
    grid-column: 1;
    grid-row: 1 / 3;
}

/* 右上の写真 */
.photo-top-right {
    grid-column: 2;
    grid-row: 1;
}

/* 右中央の写真（海辺の画像に重なって下まで伸びる） */
.photo-middle-right {
    grid-column: 2;
    grid-row: 2 / 4;
}

/* 左下の2つの写真（サイズ比率を調整） */
.photo-grid-bottom {
    grid-column: 1;
    grid-row: 3;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: clamp(10px, 2cqi, 20px);
}

/* 右下は空のスペース（高齢者の写真が占有するため削除） */

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .photo-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        height: auto;
        aspect-ratio: unset;
        /* aspect-ratioを無効化 */
    }

    .photo-large {
        grid-column: 1;
        grid-row: 1;
        aspect-ratio: 612/380;
    }

    .photo-grid-bottom {
        grid-column: 1;
        grid-row: 4;
        grid-template-columns: 1.5fr 1fr;
    }


    .photo-top-right {
        grid-column: 1;
        grid-row: 2;
        aspect-ratio: 360/230;
    }

    .photo-middle-right {
        grid-column: 1;
        grid-row: 3;
        aspect-ratio: 1/1;
    }
}

/* ----------------------------------------
CRANK クランク
---------------------------------------- */
.crank {
    background-color: var(--color-bg-l-pink);
    padding-bottom: var(--space-7xl);
}

.crank__box {
    background-color: #fff;
    --min-size: 20;
    --max-size: 48;
    padding: var(--space-6xl) var(--clamp-size);
    /* border-radius: 3.78cqi; */
    border-radius: var(--border-radius-lg);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-7xl);
}

.crank__wrap {
    width: min(700px, 95%);
    margin: 0 auto;
}

.crank__box .heading02 {
    margin-bottom: var(--space-3xl);
}

/* イラスト */
.crank__img {
    margin-bottom: var(--space-lg);
    max-width: 520px;
    margin-inline: auto;
}

/* リスト */
.crank__list {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.crank__item {
    --min-size: 16;
    --max-size: 20;
    font-size: var(--clamp-size);
    display: flex;
    align-items: flex-start;
    line-height: 2;
}

.crank__item::before {
    content: "";
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    background-color: var(--color-orange);
    border-radius: 999px;
    margin-right: 0.5em;
    margin-top: 0.55em;
    aspect-ratio: 1;
}


/* ----------------------------------------
SAKURANBO さくらんぼ/WORK クランク仕事内容
同様のスタイル
---------------------------------------- */
.sakuranbo {
    background-color: var(--color-bg-l-pink);
}

.sakuranbo__wrap,
.work__wrap {
    display: flex;
    gap: var(--space-2xl);
}

.sakuranbo__wrap:not(:last-of-type),
.work__wrap:not(:last-of-type) {
    margin-bottom: var(--space-7xl);
}

.sakuranbo__img,
.work__img {
    flex: 5.25;
    width: 100%;
    height: auto;
    /* border-radius: 2.5cqi; */
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    aspect-ratio: 410/300;
    max-height: 390px;
}

.sakuranbo__img img,
.work__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sakuranbo__content,
.work__content {
    flex: 4.75;
}

/* CRANK Bの仕事内容 */
.work__wrap {
    gap: var(--space-5xl);
}

.work__img {
    flex: 4.7;
    width: 100%;
    height: auto;
    /* border-radius: 2.5cqi; */
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    aspect-ratio: 410/300;
    max-height: 390px;
}

.work__content {
    flex: 5.3;
}

.work__content .heading03 {
    font-feature-settings: "palt";
}

.work__wrap:not(:last-of-type) {
    margin-bottom: var(--space-3xl);
}

@media (width < 768px) {

    .sakuranbo__wrap,
    .work__wrap {
        flex-direction: column;
        gap: var(--space-2xl);
    }

    .sakuranbo__img,
    .work__img {
        max-height: unset;
    }

    .work__wrap:not(:last-of-type) {
        margin-bottom: var(--space-7xl);
    }
}

/* ----------------------------------------
PLAY さくらんぼでの遊び / WORK クランク仕事内容
---------------------------------------- */

/* flexを逆に配置 */

.play {
    padding-bottom: var(--space-7xl);

}

.play .sakuranbo__wrap,
.work .work__wrap {
    flex-direction: row-reverse;
}

@media (width < 768px) {

    .play .sakuranbo__wrap,
    .work .work__wrap {
        flex-direction: column;
    }
}

/* ----------------------------------------
FLOW 1日の流れ さくらんぼ
EXAMPLE クランク-B 勤務例
---------------------------------------- */

.flow,
.example {
    background-color: var(--color-bg-beige);
}

.example {
    background-color: var(--color-bg-l-pink);
}

.example__desc {
    max-width: 804px;
    margin: 0 auto var(--space-3xl);
}

.flow__wrap,
.example__wrap {
    /* --min-size: 20;
    --max-size: 56;
    padding: var(--clamp-size) var(--clamp-size) var(--clamp-size); */
    --min-sie: 20;
    --max-size: 90;
    padding: var(--space-4xl) var(--clamp-size);
    background-color: #fff;
    /* border-radius: 2.7cqi; */
    border-radius: var(--border-radius-lg);
}

.flow__wrap:not(:last-of-type),
.example__wrap:not(:last-of-type) {
    margin-bottom: var(--space-2xl);
}

.flow__head,
.example__head {
    font-weight: var(--fontWeight-medium);
    background-color: var(--color-green);
    color: #fff;
    padding: 1em 1.5em;
    text-align: center;
    /* border-radius: 2.2cqi; */
    border-radius: 999px;
    margin-bottom: var(--space-lg);
}

.example__head {
    background-color: var(--color-brown);
}

.flow__head h3,
.example__head h3 {
    font-size: var(--fontSize-xl);
    line-height: 1.3;
}

.flow__body,
.example__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3em clamp(24px, 5.2vw, 72px);
}


.flow__row,
.example__row {
    padding: 15px 0;
    border-top: 1px solid var(--color-border-brown);
}

.flow__list .flow__row:last-of-type,
.example__list .example__row:last-of-type {
    border-bottom: 1px solid var(--color-border-brown);
}

.flow__weekday h4,
.flow__holiday h4 {
    font-size: var(--fontSize-lg);
    font-weight: var(--fontWeight-medium);
    line-height: 1.3;
    text-align: center;
}

.flow__row p {
    font-size: 13px;
    line-height: 1.6;
    /* 行の高さを合わせるために追加 */
    height: calc(3.5em);
    margin-top: 0.75em;
}

.flow__holiday .flow__row p {
    display: grid;
    place-items: center;
}

.flow__list .flow__row,
.example__list .example__row {
    display: flex;
    gap: var(--space-lg);
}

.flow__list .flow__row dt,
.example__list .example__row dt {
    width: 3em;
}

.flow__list .flow__row dd,
.example__list .example__row dd {
    flex: 1;
}

.flow__note {
    font-size: 13px;
    line-height: 1.6;
    margin-top: 2em;
}

.flow__img,
.example__img {
    width: 100%;
    height: auto;
    /* border-radius: 2.2cqi; */
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    aspect-ratio: 355/322;
}

.flow__img img,
.example__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ········ 工賃モデル・サービス ········ */
.example__title {
    font-size: var(--fontSize-xl);
    line-height: 1.3;
    margin-bottom: var(--space-md);
    text-align: center;
}

.example__sub-title {
    --min-size: 18;
    --max-size: 20;
    font-size: var(--clamp-size);
    font-weight: var(--fontWeight-medium);
    margin-bottom: 0.25em;
    display: flex;
    align-items: center;
    gap: 0.25em;
}

.example__sub-title::before {
    content: "";
    width: 0.75em;
    height: 0.75em;
    display: inline-block;
    border-radius: 999px;
    background-color: var(--color-brown);
}

.example__text a {
    text-decoration: underline;
}

.example__text:not(:last-of-type) {
    margin-bottom: var(--space-md);
}


@media (width < 768px) {

    .flow__body,
    .example__body {
        grid-template-columns: 1fr;
    }

    .flow__row p {
        height: unset;
    }
}


/* ----------------------------------------
TARGET 対象者
---------------------------------------- */

.target {
    background-color: var(--color-bg-beige);
}

.target h2 {
    margin-bottom: var(--space-4xl);
}


.target__content {
    background-color: #fff;
    --min-size: 20;
    --max-size: 48;
    padding: var(--space-6xl) var(--clamp-size);
    /* border-radius: 3.78cqi; */
    border-radius: var(--border-radius-lg);
}

.target__content>* {
    max-width: 740px;
    margin: 0 auto;
}


/* クランクページではulに余白追加 */
.page-crank .target ul {
    margin-bottom: 2em;
}


.target ul li {
    list-style: disc;
    margin-left: 1.5em;
}

.target ul li::marker {
    font-size: 0.8em;
}

/* ----------------------------------------
USE 利用の流れ さくらんぼ/クランク-B/クランク
---------------------------------------- */

.use {
    background-color: var(--color-bg-l-pink);
}

.use__item {
    background-color: #fff;
    --min-size: 20;
    --max-size: 48;
    padding: var(--space-lg) var(--clamp-size);
    /* border-radius: 3.78cqi; */
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    position: relative;
}

.use__item:not(:last-of-type)::after {
    content: "";
    background: url(../../img/common/icon_arrow.svg) no-repeat center/contain;
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    z-index: 1;
}

/* クランクBのページは色を茶色にする */
.page-crank-b .use__item:not(:last-of-type)::after {
    background: url('../../img/common/icon_arrow_brown.svg') no-repeat center/contain;
}

/* クランクのページは色をオレンジにする */
.page-crank .use__item:not(:last-of-type)::after {
    background: url('../../img/common/icon_arrow_orange.svg') no-repeat center/contain;
}

.use__item:not(:last-of-type) {
    margin-bottom: 80px;
}

.use__item .use__item-number {
    --min-size: 26;
    --max-size: 32;
    font-size: var(--clamp-size);
    font-weight: 400;
    color: #fff;
    line-height: 1;
    font-family: var(--fontFamily-en);
    position: relative;
    /* 背景の大きさ反映 */
    width: 1.75em;
    height: 1.75em;
    /* 中央配置 */
    display: grid;
    place-items: center;
}

.use__item .use__item-number::before {
    content: "";
    display: inline-block;
    place-items: center;
    width: 1.75em;
    height: 1.75em;
    background-color: var(--color-green);
    border-radius: 999px;
    position: absolute;
    top: 49.5%;
    left: 50%;
    transform: translate(-49%, -51%);
    z-index: -1;
}

/* クランクBのページは色を茶色にする */
.page-crank-b .use__item .use__item-number::before {
    background-color: var(--color-brown);
}

/* クランクページは色をオレンジにする */
.page-crank .use__item .use__item-number::before {
    background-color: var(--color-orange);
}

.use__content {
    flex: 1;
}

.use__title {
    font-size: var(--fontSize-md);
    font-weight: var(--fontWeight-medium);
}

.use__content p {
    margin-top: 0.5em;
}

/* 電話とメールのボタン */
.use .btn-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-sm);
}

.use .btn {
    display: flex;
    gap: 0.5em;
    align-items: center;
    justify-content: center;
    padding: 0.75em 2em;
    width: fit-content;
    height: 50px;
}

.use .btn-tel {
    font-family: var(--fontFamily-number);
    font-weight: 700;
    letter-spacing: 0.04em;
    font-size: 17px;
}

.use .btn-mail {
    font-size: 14px;
    font-weight: var(--fontWeight-medium);
    padding: 0.75em 3em;

}

.use .btn-tel::before,
.use .btn-mail::before {
    content: "";
    width: 1.3em;
    height: 1.3em;
    display: inline-block;
    background-image: url(../../img/common/icon_phone.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s ease-in-out;
}

.use .btn-mail::before {
    background-image: url(../../img/common/icon_mail.svg);
}

/* HOVER */
.use .btn-tel:hover::before {
    background-image: url(../../img/common/icon_phone-white.svg);
    transition: all 0.3s ease-in-out;
}

.use .btn-mail:hover::before {
    background-image: url(../../img/common/icon_mail-white.svg);
    transition: all 0.3s ease-in-out;
}

/* ページごとの指定 */
/* スマートフォンの時の指定 */
/* さくらホームのページは色を緑 */
.page-sakuranbo .use .btn-mail:hover,
.page-sakuranbo .use .btn-tel:hover,
.page-sakuranbo .use .btn-tel:active {
    background-color: var(--color-green);
    border: 1px solid var(--color-green) !important;
    color: #fff;
}

/* クランクBのページは色を茶色 */
.page-crank-b .use .btn.btn-mail:hover,
.page-crank-b .use .btn.btn-tel:hover,
.page-crank-b .use .btn.btn-tel:active,
.page-crank-b .use .btn.btn-mail:active {
    background-color: var(--color-brown);
    border: 1px solid var(--color-brown);
    color: #fff;
}

/* クランクのページは色をオレンジ */
.page-crank .use .btn.btn-mail:hover,
.page-crank .use .btn.btn-tel:hover,
.page-crank .use .btn.btn-tel:active,
.page-crank .use .btn.btn-mail:active {
    background-color: var(--color-orange);
    border: 1px solid var(--color-orange);
    color: #fff;
}

@media (width < 768px) {

    .use__item:not(:last-of-type)::after {
        bottom: -45px;
        width: 30px;
        height: 30px;
    }

    .use__item:not(:last-of-type) {
        margin-bottom: 60px;
    }

    .use__item {
        flex-direction: column;
        align-items: center;
    }

    .use__title {
        text-align: center;
    }

    .btn-wrap {
        flex-direction: column;
        align-items: center;
    }

}


/* ----------------------------------------
FACILITY 施設概要
---------------------------------------- */

.facility {
    background-color: var(--color-bg-beige);
}

/* .facility__wrap {
    background-color: #fff;
    border-radius: var(--border-radius-lg);
    --min-size: 20;
    --max-size: 52;
    padding: var(--space-3xl) var(--clamp-size) var(--space-6xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-3xl);
} */

.facility__wrap {

    display: flex;
    flex-direction: column;
    gap: var(--space-3xl);
}

.facility__item {
    background-color: #fff;
    border-radius: var(--border-radius-lg);
    --min-size: 20;
    --max-size: 72;
    padding: var(--space-3xl) var(--clamp-size);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md) clamp(24px, 4.4vw, 60px);
}

/* .page-sakurahome .facility__item:not(:last-child) {
    padding-bottom: var(--space-6xl);
    border-bottom: 1px solid var(--color-border-brown);
} */

.facility__detail {
    display: flex;
}

/* 施設名 */
.facility__name {
    width: 100%;
    font-size: var(--fontSize-xl);
    font-weight: var(--fontWeight-medium);
    line-height: 1.5;
}

/* 施設の詳細ここから */
.facility__content {
    flex: 1;
}

/* 施設の説明文 */
.facility__desc {
    margin-bottom: var(--space-lg);
}

/* 施設の詳細リスト（dl） */
.facility__info {
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding-top: 1em;
    border-top: 1px solid var(--color-border-brown);
}

/* 詳細リストを囲むdiv */
.facility__detail {
    display: flex;
    gap: 0 1em;
    padding-bottom: 1em;
    border-bottom: 1px solid var(--color-border-brown);
    line-height: 1.8;
}


.facility__type .facility__detail {
    border-bottom: none;
    padding-bottom: 0em;
}

.facility__type {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    border-bottom: 1px solid var(--color-border-brown);
    padding-bottom: 1em;
}

/* dt */
.facility__label {
    width: 5.5em;
}

/* dd */
.facility__data {
    flex: 1;
}

/* PDFのリンク */
.facility__program-pdf {
    text-decoration: underline;
}

/* MAPのリンク */
.facility__map.btn[target="_blank"] {
    margin-top: 0.5em;
    width: 84px;
    line-height: 1;
    display: block;
}

.facility__map.btn[target="_blank"]::after {
    content: none;
}

.facility__map-link:hover {
    background-color: var(--color-bg-dark);
}

/* さくらんぼページではマップの色を変える */
.page-sakuranbo .facility__map.btn[target="_blank"]:hover {
    background-color: var(--color-green);
    border: 1px solid var(--color-green);
}

/* クランク-Bの時はマップの色を変える */
.page-crank-b .facility__map.btn[target="_blank"]:hover {
    background-color: var(--color-brown);
    border: 1px solid var(--color-brown);
}

/* クランクの時はマップの色を変える */
.page-crank .facility__map.btn[target="_blank"]:hover {
    background-color: var(--color-orange);
    border: 1px solid var(--color-orange);
}

/* 所在地の詳細が入った時は余白追加 */
.facility__address-desc {
    margin-top: 1em;
}

.facility__images {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.facility__img {
    aspect-ratio: 380/266;
    /* border-radius: 2.3cqi; */
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}

.facility__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.facility__btn .btn {
    margin-inline: auto;
    font-size: var(--fontSize-base);
    padding: 1.5em 2.5em;
    width: fit-content;
    color: #fff !important;

}

.page-crank-b .facility__btn .btn-bg-green {
    background-color: var(--color-brown);
    border: 1px solid var(--color-brown);
    color: #fff;
}

.page-crank-b .facility__btn .btn-bg-green:hover {
    background-color: #fff;
    border: 1px solid var(--color-brown);
    color: var(--color-brown) !important;
}

/* クランク */
.page-crank .facility__btn .btn-bg-green {
    background-color: var(--color-orange);
    border: 1px solid var(--color-orange);
    color: #fff;
}

.page-crank .facility__btn .btn-bg-green:hover {
    background-color: #fff;
    border: 1px solid var(--color-orange);
    color: var(--color-orange) !important;
}




@media (width < 768px) {

    .facility__wrap {
        padding: var(--space-3xl) var(--clamp-size) var(--clamp-size);
    }

    .facility__item {
        flex-direction: column;
        gap: 1em;
    }

    .facility__detail {
        flex-direction: column;
        gap: 0.1em;
    }

    .facility__type .facility__detail {
        padding-bottom: 0.5em;
    }

    .facility__images {
        margin-top: 1.5em;
    }

    .facility__label {
        width: 100%;
        font-weight: var(--fontWeight-medium);
    }

}

/* ----------------------------------------
BANNER スープとおにぎりクランク
---------------------------------------- */

.facility__banner {
    background-color: #745449;
    border-radius: 2.7cqi;
    display: flex;
    margin-top: var(--space-md);
}

.facility__banner .banner__content {
    padding: var(--space-2xl) var(--space-xl);
    color: #fff;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.facility__banner .banner__content p {
    max-width: 340px;
    margin-inline: auto;
}

.facility__banner .btn {
    color: var(--color-brown);
    width: fit-content;
    padding: 1.25em 2.5em;
    gap: 0.5em;
    margin-inline: auto;
}

.facility__banner .btn div {
    display: flex;
    align-items: center;
    gap: 0.5em;
    flex-wrap: wrap;
    justify-content: center;
}

.facility__banner .btn::after {
    background: url(../../img/common/icon_instagram.svg) no-repeat center/contain !important;
    width: 1.5em !important;
    height: 1.5em !important;
}

/* HOVER */
.facility__banner .btn:hover {
    background-color: var(--color-brown);
    color: #fff !important;
    border: 1px solid #fff;
}

.facility__banner .btn:hover::after {
    background: url(../../img/common/icon_instagram-white.svg) no-repeat center/contain !important;
    width: 1.5em !important;
    height: 1.5em !important;
}

.facility__banner .banner__img {
    flex: 1;
    width: 100%;
    height: auto;
    margin-bottom: 0;
    border-radius: 0 2.7cqi 2.7cqi 0;
    overflow: hidden;
}

.facility__banner .banner__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (width < 768px) {
    .facility__banner {
        flex-direction: column-reverse;
    }

    .facility__banner .banner__img {
        width: 100%;
        height: auto;
        border-radius: 2.7cqi 2.7cqi 0 0;
    }

    .facility__banner .banner__content {
        text-align: center;
    }
}