@charset "utf-8";

/**
* Variable
*/
:root {
    /* Colors
    ------------------------ */
    --color-dark-green: #589e6e;
    --color-dark-green--rgb: 88 158 110;
    --color-green: #93be54;
    --color-light-green: #eaf5e9;
    --color-yellow: #f0d91f;
    --color-beige: #f5f4e9;
    --color-dark-beige: #edebdc;
    --color-light-beige: #fffef7;
    --color-light-blue: #e9f3f5;
    --color-white: #ffffff;
    --color-white--rgb: 255 255 255;
    --color-black: #4d4d4d;
    --color-black--rgb: 77 77 77;
    --color-dark-black: #1f1f1f;
    --color-grey: #f1f1f1;
    --color-dark-grey: #d5d5d5;
    --color-red: #ca4242;

    /* Font Size
    ------------------------ */
    --fSize--8: 0.5rem;
    --fSize--9: 0.562rem;
    --fSize--10: 0.625rem;
    --fSize--11: 0.687rem;
    --fSize--12: 0.75rem;
    --fSize--13: 0.812rem;
    --fSize--14: 0.875rem;
    --fSize--15: 0.9375rem;
    --fSize--16: 1rem;
    --fSize--17: 1.062rem;
    --fSize--18: 1.125rem;
    --fSize--20: 1.25rem;
    --fSize--22: 1.375rem;
    --fSize--23: 1.437rem;
    --fSize--24: 1.5rem;
    --fSize--25: 1.562rem;
    --fSize--26: 1.625rem;
    --fSize--28: 1.75rem;
    --fSize--30: 1.875rem;
    --fSize--32: 2rem;
    --fSize--35: 2.187rem;
    --fSize--38: 2.375rem;
    --fSize--40: 2.5rem;
    --fSize--50: 3.125rem;
    --fSize--60: 3.75rem;
    --fSize--200: 12.5rem;

    /* Font Family
    ------------------------ */
    --font-family-base: 'Noto Sans JP', sans-serif;
    --font-family-heading: 'Zen Kaku Gothic Antique', sans-serif;

    /* Font weight
    ------------------------ */
    --font-family-base-normal: 400;
    --font-family-base-bold: 700;
    --font-family-heading-normal: 500;
    --font-family-heading-bold: 700;

    /* Effects
    ------------------------ */
    --shadow--light-black: rgb(0 0 0 / 5%); /* カスタムプロパティとして定義 */
}

/**
* Web Font
*/
/* noto-sans-jp - japanese
------------------------ */
/* noto-sans-jp-regular */
@font-face {
    font-family: 'Noto Sans JP';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/noto-sans-jp-v55-japanese-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
}
/* noto-sans-jp-700 */
@font-face {
    font-family: 'Noto Sans JP';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/noto-sans-jp-v55-japanese-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
}

/* zen-kaku-gothic-antique - japanese
------------------------ */
/* zen-kaku-gothic-antique-500 */
@font-face {
    font-family: 'Zen Kaku Gothic Antique';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/zen-kaku-gothic-antique-v18-japanese-500.woff2')
        format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
}
/* zen-kaku-gothic-antique-700 */
@font-face {
    font-family: 'Zen Kaku Gothic Antique';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/zen-kaku-gothic-antique-v18-japanese-700.woff2')
        format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
}

.font-family-base {
    font-family: 'Noto Sans JP', sans-serif;
    font-style: normal;
    font-optical-sizing: auto;
}
.font-family-base-bold {
    font-family: 'Noto Sans JP', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-optical-sizing: auto;
}
.font-family-heading {
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-style: normal;
}
.font-family-heading-bold {
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-style: normal;
    font-weight: 700;
}

/**
* Reset & Base Styles
*/
html {
    scroll-behavior: smooth;
}
body {
    position: relative;
    font-family: var(--font-family-base);
    font-size: var(--fSize--16);
    font-feature-settings: 'pkna';
    color: var(--color-black);
    background-color: var(--color-white);
    /* line-height: 1.6;
  margin: 0;
  padding: 0; */
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}
.main {
}

/**
* Fonts, Txt
*/
/* Weight
------------------------ */
.fw--bold {
    font-weight: 700;
}

/* Align
------------------------ */
.ta--center {
    text-align: center;
}

.ta--left {
    text-align: left;
}

.ta--right {
    text-align: right;
}

/* Color
------------------------ */
.fc--black {
    color: var(--color-black);
}
.fc--dark-black {
    color: var(--color-dark-black);
}
.fc--green {
    color: var(--color-dark-green);
}
.fc--yellow {
    color: var(--color-yellow);
}
.fc--red {
    color: var(--color-red);
}

/* Line Spacing
------------------------ */
.text__body {
    line-height: 2;
}
.text__body--p {
    & p {
        &:not(:last-child) {
            margin-bottom: 1rem;
        }
    }
}

/**
* Common Components
*/
/* container
------------------------ */
.container {
    position: relative;
    padding: 0 20px;
    margin-inline: auto;
    @media print, screen and (width >= 992px) {
        max-width: 900px;
        padding: 0;
    }
    /* 992pxとそれ以上 */
    @media print, screen and (width >= 1200px) {
        max-width: 1200px;
    }
    /* 1200pxとそれ以上 */
}
.container__inner {
    position: relative;
    margin-inline: auto;
    @media print, screen and (width >= 1200px) {
        max-width: 850px;
    }
    /* 1200pxとそれ以上 */
}
.container__inner--indent {
    margin-left: clamp(1.5rem, 4.17vw, 3.125rem);
}
.container__bottom {
    position: relative;
    &:not(:last-child) {
        margin-bottom: clamp(6.25rem, 5.096rem + 3.21vw, 7.5rem);
        /* 100 ~ 120 */
    }
}
.container__bottom--in {
    position: relative;
    &:not(:last-child) {
        margin-bottom: clamp(2.5rem, 1.346rem + 3.21vw, 3.75rem);
        /* 40 ~ 60 */
    }
}
.container__bottom--in--in {
    position: relative;
    &:not(:last-child) {
        margin-bottom: clamp(1.563rem, 0.697rem + 2.4vw, 2.5rem);
        /* 25 ~ 40 */
    }
}

/* Title
------------------------ */
.t1 {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: baseline;
    justify-content: center;
    margin: 0 auto auto;
    font-family: var(--font-family-heading);
    font-size: clamp(var(--fSize--32), 1.899rem + 0.8vw, var(--fSize--40));
    font-weight: var(--font-family-heading-bold);
    line-height: 1;
    letter-spacing: clamp(0rem, -0.231rem + 0.64vw, 0.25rem);
    text-box: trim-both cap alphabetic;
    @media print, screen and (width >= 768px) {
        justify-content: flex-start;
        margin-top: -25px;
    }
    /* 768pxとそれ以上 */
    &::before {
        display: inline-block;
        flex-shrink: 0;
        width: 30px;
        height: 30px;
        content: '';
        background: url('../images/loop/icon-logo-black.svg') center / contain
            no-repeat;
    }
}

.t2 {
    /* 30 ~ 80 */
    margin-bottom: clamp(1.875rem, -1.01rem + 8.01vw, 5rem);
    font-family: var(--font-family-heading);
    line-height: 1;
    text-edge: trim-both cap alphabetic;
    .t2__txt--en {
        /* 10 ~ 25  */
        margin-bottom: clamp(0.625rem, -0.24rem + 2.4vw, 1.563rem);
        font-size: var(--fSize--18);
        font-weight: var(--font-family-heading-bold);
        color: var(--color-dark-green);
        letter-spacing: 1.8px;
        &::before {
            display: inline-block;
            flex-shrink: 0;
            width: 26px;
            height: 27px;
            margin-right: 8px;
            content: '';
            background: url('../images/loop/icon--t2.svg') center / contain
                no-repeat;
        }
    }
    .t2__txt--ja {
        font-size: clamp(var(--fSize--26), 1.394rem + 0.64vw, var(--fSize--30));
        line-height: 1.5;
        @media print, screen and (width >= 992px) {
            line-height: 1;
            letter-spacing: 0.9px;
        }
        /* 992pxとそれ以上 */
        &::after {
            display: block;
            flex-shrink: 0;
            width: 50px;
            height: 2px;
            /* 15 ~ 25  */
            margin-top: clamp(0.938rem, 0.361rem + 1.6vw, 1.563rem);
            content: '';
            background: linear-gradient(220deg, #74d292 0.12%, #589e6e 99.56%);
        }
    }
}

.t2-home {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: baseline;
    justify-content: center;
    font-family: var(--font-family-heading);
    font-size: var(--fSize--30);
    line-height: 1.3;
    color: var(--color-dark-black);
    letter-spacing: 0.9px;
    text-box: trim-both cap alphabetic;
    &::before {
        flex-shrink: 0;
        width: 30px;
        height: 27px;
        content: '';
        background: url('../images/loop/icon-logo-black.svg') center / contain
            no-repeat;
    }
}

.t3 {
    display: flex;
    -moz-column-gap: 20px;
    margin-bottom: 20px;
    font-size: clamp(var(--fSize--20), 1.019rem + 0.64vw, var(--fSize--24));
    font-weight: var(--font-family-base-bold);
    line-height: clamp(1.8rem, 2.538rem + -2.05vw, 1rem);
    text-edge: trim-both cap alphabetic;
    @media print, screen and (width >= 992px) {
        margin-bottom: 30px;
        letter-spacing: 0.72px;
    }
    /* 992pxとそれ以上 */
    &::before {
        display: inline-block;
        width: 5px;
        height: 25px;
        margin: 2px 20px 0 0;
        vertical-align: bottom;
        content: '';
        background-color: var(--color-dark-green);
        @media print, screen and (width >= 992px) {
            margin-top: 0;
        }
    }
}

.t4 {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 20px;
    /* font-size: var(--fSize--22); */
    font-size: clamp(1.125rem, 1.01rem + 0.32vw, 1.25rem);
    font-weight: var(--font-family-base-bold);
    letter-spacing: 2.2px;
    text-edge: trim-both cap alphabetic;
    &::before {
        display: inline-block;
        width: 12px;
        height: 12px;
        content: '';
        background-color: var(--color-dark-green);
        border-radius: 50%;
    }
}

/* Flex Box
------------------------ */
.flex {
    display: flex;
    flex-direction: column;
    @media print, screen and (width >= 576px) {
        flex-direction: row;
    }
    /* 576pxとそれ以上 */
    .flex__images {
        margin-top: 20px;
        @media print, screen and (width >= 576px) {
        }
        /* 576pxとそれ以上 */

        @media print, screen and (width >= 768px) {
            margin-top: 0;
            margin-left: 30px;
        }
        /* 768pxとそれ以上 */
    }
}
.flex--justify--between {
    justify-content: space-between;
}

/* Grid Layout
------------------------ */
.grid__center {
    display: grid;
    place-content: center;
    place-items: center;
}

.grid__center--text-left {
    display: grid;
    place-content: center;
    /* place-items: center; */
}

/* Space
------------------------ */
.mb0 {
    margin-bottom: 0 !important;
}
.mb1 {
    margin-bottom: 1rem;
}
.mb2 {
    margin-bottom: 2rem;
}

/* List
------------------------ */
.list--circle,
.list--disc,
.list--square,
.list--decimal,
.list--check {
    margin-left: 20px;
    line-height: 1.8;
    @media print, screen and (width >= 768px) {
        margin-left: 30px;
    }
    /* 768pxとそれ以上 */
}
/* [class*='box'][class*='list--'] {
    ul {
        margin-left: 30px;
    }
} */
/* リスト：前頭白丸
------------------------ */
.list--circle {
    > li {
        list-style-type: circle;
    }
}
/* リスト：前頭黒丸
------------------------ */
.list--disc {
    > li {
        list-style-type: disc;
    }
}
/* リスト：先頭ブロック
------------------------ */
.list--square {
    > li {
        list-style-type: square;
    }
}
/* リスト：数字
------------------------ */
.list--decimal {
    > li {
        list-style-type: decimal;
    }
}
/* リスト：チェックマーク
------------------------ */
.list--check {
    margin-left: 0;
    > li {
        padding-left: 20px;
        background: url(../images/loop/icon--check.svg) left 7px no-repeat;
    }
}
/* 定義リスト：水平
------------------------ */
.dl--horizontal {
    display: flex;
    flex-direction: column;
    gap: 20px;
    @media print, screen and (min-width: 576px) {
        flex-direction: row;
    }
    /* 576pxとそれ以上 */
}

/* Table
------------------------ */
.tb--scroll {
    overflow-x: auto;
}

.table {
    width: auto;
    table-layout: fixed;
}
.table th {
    /* background: #f5f5f5; */
}
.table th,
.table td {
    display: block;
    padding: 15px 8px;
    font-size: var(--fSize--16);
    /* font-weight: 700; */
    font-weight: normal;
    border-bottom: 1px solid rgb(var(--color-black--rgb) / 0.5);
    @media print, screen and (min-width: 768px) {
        padding: 15px 20px;
    }
    /* 768pxとそれ以上 */
}

@media print, screen and (min-width: 768px) {
    .table th,
    .table td {
        display: table-cell;
        font-size: 1rem;
    }
}
.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
}
.table tbody + tbody {
    border-top: 2px solid #dee2e6;
}

.table--wauto {
    width: auto;
}

.table--no-block th,
.table--no-block td {
    display: table-cell;
}

.table-bordered {
    border: 1px solid #dee2e6;
}

.table-bordered th,
.table-bordered td {
    border: 1px solid #dee2e6;
}

.table-bordered thead th,
.table-bordered thead td {
    border-bottom-width: 2px;
}

/* Display
------------------------ */
.sp {
    display: block !important;
    @media print, screen and (width >= 768px) {
        display: none !important;
    }
    /* 768pxとそれ以上 */
}
.pc {
    display: none !important;
    @media print, screen and (width >= 768px) {
        display: block !important;
    }
    /* 768pxとそれ以上 */
}
.d--none {
    display: none !important;
}
.d--block {
    display: block;
}

/* Anchor
------------------------ */
a {
    &:link,
    &:visited,
    &:hover {
        text-decoration: none;
        /* color: var(--cr--green-d); */
        outline: none;
        transition: all 0.3s ease;
    }

    &:hover,
    &:hover span,
    &:hover img {
        opacity: 0.75;
        transition: all 0.3s ease;
    }
    img {
        transition: all 0.3s ease;
    }
}

/* tel:制御 */
@media print, screen and (width >= 576px) {
    a[href*='tel:'] {
        color: var(--cr--black);
        text-decoration: none;
        pointer-events: none;
        cursor: default;
    }
}
/* 576pxとそれ以上 */

/* テキストリンク */
.link--arrow {
    display: inline-block;
    /* margin: 0 3px; */
    font-weight: var(--font-family-base-bold);
    border-bottom: 1px solid var(--color-black);
    &:before {
        display: inline-block;
        width: 12px;
        height: 10px;
        margin-right: 8px;
        content: '';
        background: url(../images/loop/icon-arrow-black.svg) center / contain
            no-repeat;
    }
}
/* 外部リンクにアイコン */
.external-icon:not([href^="https://fukai-ortho.com/"])
{
    &::after {
        display: inline-block;
        width: 15px;
        height: 15px;
        margin-left: 8px;
        vertical-align: middle;
        content: '';
    }
}
.external-icon--white {
    &::after {
        background: url(../images/loop/icon--external-link−white.svg) center /
            cover no-repeat;
    }
}
.external-icon--black {
    &::after {
        background: url(../images/loop/icon--external-link−black.svg) center /
            cover no-repeat;
    }
}
.external-icon--green {
    &::before {
        background: url(../images/loop/icon--external-link−green.svg) center /
            cover no-repeat;
    }
}

/* ヘッダのfixed対応 */
.offset-anker {
    &:before {
        display: block;
        visibility: hidden;
        height: 70px; /* 調整したい高さ（固定ヘッダーの高さ） */
        margin-top: -70px; /* heightと同じ分のネガティブマージン */
        content: '';
    }
}
/* 疑似要素ネストで@mediaが効かない対策 */
@media print, screen and (width >= 768px) {
    .offset-anker {
        &:before {
            display: block;
            visibility: hidden;
            height: 130px; /* 調整したい高さ（固定ヘッダーの高さ） */
            margin-top: -130px; /* heightと同じ分のネガティブマージン */
            content: '';
        }
    }
}
/* 768pxとそれ以上 */

/* Button
------------------------ */
.btn__txt {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 20px 30px;
    margin: 0 auto;
    font-size: var(--fSize--16);
    font-weight: var(--font-family-base-bold);
    color: var(--color-white);
    letter-spacing: 1.6px;
    background-color: var(--color-dark-green);
    border-radius: 5px;
    &::before {
        display: inline-block;
        width: 12px;
        height: 10px;
        content: '';
        background: url(../images/loop/icon-arrow-white.svg) center / contain
            no-repeat;
        transition: all 0.3s ease;
    }

    &:hover {
        color: var(--cr--black);
        background-color: var(--color-yellow);
        opacity: 1;
        &::before {
            content: '';
            background: url(../images/loop/icon-arrow-black.svg) center /
                contain;
        }
    }
}
.btn__txt--vertical {
    flex-direction: row;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    -webkit-text-orientation: mixed;
    text-orientation: mixed;
}
.btn__txt--horizontal {
    flex-direction: row;
}

.btn__arrow--square {
    display: flex;
    gap: 10px;
    align-items: center;
    font-weight: var(--font-family-base-bold);
    line-height: 1;
    text-edge: trim-both cap alphabetic;
    &::after {
        display: inline-block;
        width: 40px;
        height: 40px;
        content: '';
        background: url(../images/loop/icon-arrow-black.svg) center / 12px 10px
            no-repeat;
        border-radius: 5px;
        transition: all 0.3s ease;
    }
    &:hover {
        opacity: 1;
        &::after {
            content: '';
            background-color: var(--color-yellow);
        }
    }
}
.btn__arrow--square--white {
    &::after {
        background-color: var(--color-white);
    }
}
.btn__arrow--square--beige {
    &::after {
        background-color: var(--color-dark-beige);
    }
}

.inquiry__buttons {
    display: none;
    @media print, screen and (width >= 1200px) {
        display: block;
    }
    /* 1200pxとそれ以上 */
}
.inquiry__buttons--sp {
    @media print, screen and (width >= 1200px) {
        display: none;
    }
    /* 1200pxとそれ以上 */
}
.inquiry__buttons,
.inquiry__buttons--sp {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    @media print, screen and (width >= 576px) {
        flex-direction: row;
    }
    /* 576pxとそれ以上 */
    @media print, screen and (width >= 768px) {
        gap: 30px;
    }
    /* 768pxとそれ以上 */
    .inquiry__buttons__item {
        flex-grow: 0;
        width: 320px;
        .inquiry__buttons__txt--small {
            font-size: var(--fSize--13);
            font-weight: var(--font-family-base-bold);
            line-height: 1;
            text-edge: trim-both cap alphabetic;
        }
    }
    .inquiry__buttons--web {
        position: relative;
        justify-content: flex-start;
        padding-top: 40px;
        padding-bottom: 25px;
        margin: 0;
        @media print, screen and (width >= 576px) {
            padding-bottom: 12px;
        }
        /* 576pxとそれ以上 */
        .inquiry__buttons__txt--small {
            position: absolute;
            inset: 20px auto auto 30px;
        }
        .inquiry__buttons__txt--large {
            font-size: var(--fSize--18);
            font-weight: var(--font-family-base-bold);
            line-height: 1;
            text-edge: trim-both cap alphabetic;
        }
    }
    .inquiry__buttons--tel {
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
        padding: 20px 30px;
        background: var(--color-white);
        border-radius: 5px;
        .inquiry__buttons__txt--large {
            font-size: var(--fSize--18);
            font-weight: var(--font-family-base-bold);
            line-height: 1;
            letter-spacing: 1.8px;
            text-edge: trim-both cap alphabetic;
            strong {
                font-size: var(--fSize--25);
                font-weight: var(--font-family-base-bold);
                line-height: 1;
                letter-spacing: 2.5px;
                text-edge: trim-both cap alphabetic;
            }
        }
    }
}

/**
* Page Navigation
*/
.nav-page {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-content: flex-start;
    justify-content: center;
    /* margin-bottom: 20px; */
    margin-bottom: clamp(1.25rem, -2.212rem + 9.62vw, 5rem);
    @media print, screen and (width >= 992px) {
        gap: 30px;
        /* margin-bottom: 50px; */
    }
    /* 992pxとそれ以上 */
    /* @media print, screen and (width >= 1200px) {
        margin-bottom: 80px;
    } */
    /* 1200pxとそれ以上 */
    .nav-page__item {
        display: flex;
        flex-grow: 1;
        flex-basis: 7rem;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 15px 10px;
        font-size: clamp(var(--fSize--14), 0.76rem + 0.32vw, var(--fSize--16));
        color: var(--color-white);
        background: var(--color-dark-green);
        border-radius: 5px;
        transition: all 0.3s ease;
        @media print, screen and (width >= 768px) {
            flex-grow: 0;
            flex-basis: 14.5rem;
            padding: 20px 10px;
        }
        /* 768pxとそれ以上 */
        @media print, screen and (width >= 992px) {
            flex-basis: 16rem;
            padding: 25px 20px;
        }
        /* 992pxとそれ以上 */
        &::before {
            display: inline-block;
            flex-shrink: 0;
            width: 10px;
            height: 6px;
            content: '';
            background: url(../images/loop/icon-bracket-down-white.svg) center /
                contain no-repeat;
        }
        &:hover {
            color: var(--color-black);
            background-color: var(--color-yellow);
            opacity: 1;
            transform: translateY(10px);
            &::before {
                background: url(../images/loop/icon-bracket-down-black.svg)
                    center / contain no-repeat;
            }
        }
    }
    .nav-page__item.active {
        color: var(--color-black);
        background-color: var(--color-yellow);
        &::before {
            background: url(../images/loop/icon-bracket-down-black.svg) center /
                contain no-repeat;
        }
    }
}
.nav-page--return {
    margin: 50px 50px;
    @media print, screen and (width >= 768px) {
        margin: 50px auto;
    }
    /* 768pxとそれ以上 */
    .nav-page__item {
        &::before {
            transform: rotate(-180deg);
        }
        &:hover {
            transform: translateY(-10px);
        }
    }
}

/**
* Decoration
*/
/* Text
------------------------ */
.marker {
    padding-inline: 3px;
    /* background: linear-gradient(90deg, #e6ee60 0.12%, #fbffd5 99.56%) left
        bottom / 100% 50% no-repeat; */
    background: linear-gradient(90deg, #f8fcaa 0.12%, #e8ec9d 99.56%) left
        bottom / 100% 50% no-repeat;
}

/* Box
------------------------ */
.box,
.box--white,
.box--gray,
.box--green {
    padding: 20px;
    border-radius: 5px;
    box-shadow: 7.66px 6.428px 20px 0px rgb(213 213 213 / 25%);
    @media print, screen and (min-width: 576px) {
        padding: 30px;
    }
}
.box--white {
    outline: 1px solid rgb(var(--color-black--rgb) / 5%);
    background-color: var(--color-white);
}
.box--gray {
    outline: 1px solid rgb(var(--color-black--rgb) / 12%);
    background-color: rgb(var(--color-black--rgb) / 5%);
}
.box--green {
    outline: 1px solid rgb(var(--color-dark-green--rgb) / 30%);
    background-color: rgb(var(--color-dark-green--rgb) / 5%);
}

/* Images
------------------------ */
.img__body--shadow {
    border-radius: 5px;
    -webkit-filter: drop-shadow(0 0 30px var(--shadow--light-black));
    filter: drop-shadow(0 0 30px var(--shadow--light-black));
}

/**
* Overall Structure
*/
/**
* Hero Section
*/
#hero {
    position: relative;
    width: calc(100% - 40px);
    /* margin: 0 auto 20px; */
    margin: 0 auto clamp(1.25rem, -2.212rem + 9.62vw, 5rem);
    overflow: hidden;
    background-color: var(--color-dark-beige);
    border-radius: 10px;
    /* @media print, screen and (width >= 1200px) {
        margin-bottom: 80px;
    } */
    /* 1200pxとそれ以上 */
    &::after {
        position: absolute;
        top: 0;
        z-index: 1;
        display: inline-block;
        width: 100%;
        height: 100%;
        content: '';
        background-color: var(--color-beige);
        border-radius: 10px 300px 0 10px;
        @media print, screen and (width >= 992px) {
            right: 40px;
        }
        /* 992pxとそれ以上 */
        @media print, screen and (width >= 1200px) {
            right: 140px;
        }
        /* 1200pxとそれ以上 */
        @media print, screen and (width >= 1500px) {
            right: 240px;
        }
        /* 1500pxとそれ以上 */
        @media print, screen and (width >= 1800px) {
            right: 340px;
        }
        /* 1800pxとそれ以上 */
    }
    .hero__content {
        position: relative;
        z-index: 10;
        padding: 40px 20px 65px;
        @media print, screen and (width >= 992px) {
            padding: 100px 0;
        }
        /* 992pxとそれ以上 */
        @media print, screen and (width >= 1200px) {
            padding: 150px 0;
        }
        /* 1200pxとそれ以上 */
    }
    /* Hero Title */
    .hero__title {
        position: relative;
        .hero__title--ja {
            line-height: 1.2;
        }
        .hero__title--en {
            display: block;
        }
    }
    /* Breadcrumbs */
    .breadcrumbs {
        position: absolute;
        bottom: 20px;
        font-size: var(--fSize--14);
        line-height: 1;
        letter-spacing: 1.2px;
        .breadcrumbs__item {
            &:not(:last-child) {
                &::after {
                    z-index: 1;
                    display: inline-block;
                    width: 20px;
                    height: 1px;
                    margin: 0 10px;
                    vertical-align: middle;
                    content: '';
                    background-color: var(--color-black);
                }
            }
        }
    }
} /* #hero */

/* Header
------------------------ */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    margin: 0 auto;
    @media print, screen and (width >= 1200px) {
        padding: 40px 50px;
    }
    /* 1200pxとそれ以上 */
    @media print, screen and (width >= 576px) {
    }
    /* 576pxとそれ以上 */

    @media print, screen and (width >= 768px) {
    }
    /* 768pxとそれ以上 */

    @media print, screen and (width >= 992px) {
    }
    /* 992pxとそれ以上 */

    @media print, screen and (width >= 1200px) {
        padding-right: 50px;
        padding-left: 50px;
    }
    /* 1200pxとそれ以上 */

    @media print, screen and (width >= 1500px) {
        padding-right: 100px;
        padding-left: 100px;
    }
    /* 1500pxとそれ以上 */

    @media print, screen and (width >= 1800px) {
    }
    /* 1800pxとそれ以上 */

    @media print, screen and (width >= 1800px) {
        padding-right: 100px;
        padding-left: 100px;
    }
    /* 1800pxとそれ以上 */
}

.site-logo {
    display: flex;
    gap: 10px;
    align-items: center;
    .logo__img {
        width: 45px;
        @media print, screen and (width >= 576px) {
            width: auto;
        }
        /* 576pxとそれ以上 */
    }
    .logo-txt {
        display: flex;
        flex-direction: column;
        gap: 10px;
        @media print, screen and (width >= 1200px) {
            gap: 13px;
        }
        /* 1200pxとそれ以上 */
        .logo-txt__main {
            font-family: var(--font-family-heading);
            font-size: var(--fSize--14);
            font-weight: var(--font-family-heading-bold);
            line-height: 1;
            color: var(--color-dark-green);
            @media print, screen and (width >= 1200px) {
                font-size: var(--fSize--18);
                letter-spacing: 0.9px;
            }
            /* 1200pxとそれ以上 */
        }
        .logo-txt__sub {
            font-size: var(--fSize--9);
            color: var(--color-black);
            letter-spacing: 0.5px;
            @media print, screen and (width >= 1200px) {
                font-size: var(--fSize--11);
                letter-spacing: 0.9px;
            }
            /* 1200pxとそれ以上 */
        }
    }
}

.header__info {
    display: none;
    @media print, screen and (width >= 1200px) {
        display: flex;
        flex-direction: column;
        gap: 11px;
        font-size: var(--fSize--15);
        line-height: 1;
        text-align: right;
        letter-spacing: 0.16px;
        text-edge: trim-both cap alphabetic;
    }
    /* 1200pxとそれ以上 */
    .header__info-tel {
        font-size: var(--fSize--18);
        font-weight: var(--font-family-base-bold);
        letter-spacing: 1.8px;
    }
    .header__info-tel--main {
        font-size: var(--fSize--25);
        font-weight: var(--font-family-base-bold);
        letter-spacing: 2.5px;
    }
}

/* Navigation Global
------------------------ */
#menuButton {
    position: fixed;
    top: 10px;
    right: 20px;
    z-index: 10000;
    display: block;
    width: 50px;
    height: 50px;
    background-color: var(--color-dark-green);
    border-radius: 50%;
    @media print, screen and (width >= 576px) {
        top: 17px;
    }
    /* 576pxとそれ以上 */
    @media print, screen and (width >= 1200px) {
        display: none;
    }
    /* 1200pxとそれ以上 */
    .menuButton--wrap {
    }
    &:hover {
        opacity: 1;
    }
    & span {
        position: absolute;
        left: 15px;
        display: block;
        width: 20px;
        height: 1px;
        background: var(--color-white);
        transition: all 0.4s;
        &:first-child {
            top: 21px;
        }
        &:last-child {
            bottom: 21px;
        }
    }
    &.active {
        & span {
            &:first-child {
                top: 16px;
                transform: translateY(8px) rotate(45deg);
            }
            &:last-child {
                top: 32px;
                transform: translateY(-8px) rotate(-45deg);
            }
        }
    }
}

.nav-global {
    display: none;
    @media print, screen and (width >= 1200px) {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 999;
        display: block;
        margin-right: 80px;
        @media print, screen and (width >= 1500px) {
            margin-right: 130px;
        }
        /* 1500pxとそれ以上 */
    }
    /* 1200pxとそれ以上 */
    .nav-global__items {
        position: fixed;
        inset: 0 0 auto auto;
        z-index: 100;
        display: flex;
        flex-direction: column;
        gap: 40px;
        align-items: flex-end;
        /* width: calc(100svw - 70px); */
        width: 100svw;
        height: 100vh;
        padding: 110px 50px 0 0;
        background-color: var(--color-beige);
        /* border-radius: 40px 0 0 0; */
        -webkit-filter: drop-shadow(0 0 30px var(--shadow--light-black));
        filter: drop-shadow(0 0 30px var(--shadow--light-black));
        @media print, screen and (width >= 1200px) {
            position: absolute;
            gap: 25px;
            width: auto;
            height: auto;
            padding: 50px 0 0 0;
            background: none;
            border-radius: 0 0 10px 10px;
        }
        /* 1200pxとそれ以上 */
        &::after {
            position: absolute;
            inset: 40px 20px auto auto;
            width: 2px;
            height: 380px;
            content: '';
            background: linear-gradient(
                180deg,
                var(--color-dark-green) 19%,
                var(--color-white) 19%
            );
            @media print, screen and (width >= 1200px) {
                top: 0;
                right: -30px;
                height: 100%;
                background: linear-gradient(
                    180deg,
                    var(--color-dark-green) 14%,
                    var(--color-white) 14%
                );
            }
            /* 1200pxとそれ以上 */
        }
    }
    .current-menu-item {
        font-weight: var(--font-family-base-bold);
        color: var(--color-dark-green);
    }
    .menu-item {
        a {
            &:hover {
                font-weight: var(--font-family-base-bold);
                color: var(--color-dark-green);
                opacity: 1;
            }
        }
    }
    /* カレント表示 */
    .nav-global__items--active {
        li {
            @media print, screen and (width >= 1200px) {
                /* padding: 3px 0px 4px 6px;
                background-color: var(--color-white) !important;
                transition: all 0.3s ease; */
                padding: 3px 5px 5px 5px;
                line-height: 1;
                background-color: var(--color-white) !important;
                border-radius: 2px;
                transition: all 0.3s ease;
            }
            /* 1200pxとそれ以上 */
        }
    }
}

/* Fixed Navigation
------------------------ */
.nav-fixd,
.nav-fixd--sp {
    position: fixed;
    z-index: 999;
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    box-shadow: 0 0 30px var(--shadow--light-black);
    .nav-fixd__item {
        display: flex;
        gap: 8px;
        align-items: center;
        text-edge: trim-both cap alphabetic;
        font-size: var(--fSize--14);
        line-height: 1;
        &::before {
            display: inline-block;
            width: 14px;
            height: 14px;
            content: '';
            background: url(../images/loop/icon-arrow-curve-green.svg) center /
                contain no-repeat;
        }
        &:not(:last-child) {
            border-bottom: 1px solid var(--color-dark-grey);
        }
        a {
            display: block;
            padding: 25px 0;
            &:hover {
                color: var(--color-dark-green);
                opacity: 1;
            }
        }
    }
}
/* タブレット、デスクトップ */
.nav-fixd {
    inset: auto 20px 0 auto;
    padding: 0 25px;
    border-radius: 40px 5px 0 0;
    @media print, screen and (width >= 1200px) {
        right: 50px;
    }
    /* 1200pxとそれ以上 */
    @media print, screen and (width >= 1500px) {
        right: 100px;
    }
    /* 1500pxとそれ以上 */
}
/* スマートフォン */
.nav-fixd--sp {
    inset: auto 5px 5px 5px;
    display: block;
    border-radius: 30px;
    .menu-fixd-navi-container {
        display: flex;
        justify-content: center;
    }
    #menu-fixd-navi {
        display: flex;
        gap: 15px;
    }
    .nav-fixd__item {
        gap: 3px;
        font-size: var(--fSize--13);
        &:not(:last-child) {
            border-bottom: none;
        }
        a {
            padding: 15px 0;
        }
    }
}

/* Scroll Down
------------------------ */
.scrolldown {
    position: fixed;
    left: 20px;
    z-index: 998;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    transition: transform 1s ease;
    @media print, screen and (width >= 1200px) {
        right: 34px;
        left: auto;
    }
    /* 1200pxとそれ以上 */
}

.scrolldown__text {
    font-size: 14px;
    text-align: center;
    letter-spacing: 0.2em;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}

.scrolldown__line {
    width: 1px;
    height: 80px;
    background-color: var(--color-black);
}

/* About Section
------------------------ */
#about {
    position: relative;
    padding: 20px;
    padding-bottom: 60px;
    background-color: var(--color-beige);
    border-radius: 0 150px 0 0;
    @media print, screen and (width >= 768px) {
        border-radius: 0 200px 0 0;
    }
    /* 768pxとそれ以上 */
    @media print, screen and (width >= 1200px) {
        padding: 40px 60px;
    }
    /* 1200pxとそれ以上 */
    @media print, screen and (width >= 1500px) {
        padding: 80px 100px;
    }
    /* 1500pxとそれ以上 */
    .about-title {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 25px;
        align-items: center;
        margin-bottom: 30px;
        .about-title__en {
            display: flex;
            flex-direction: column;
            gap: 25px;
            align-items: center;
            line-height: 1;
            &::after {
                display: inline-block;
                width: 30px;
                height: 1px;
                content: '';
                background-color: var(--color-black);
            }
        }
    }
    /* section-about */
    #section-about {
        .about__items {
            margin-bottom: 40px;
            @media print, screen and (width >= 1200px) {
                display: flex;
                flex-direction: column;
                flex-direction: row;
                justify-content: center;
            }
            /* 1200pxとそれ以上 */
            .about__info,
            .about__map {
                flex-basis: calc(100% / 2);
            }
            .about__info {
                flex-direction: column;
                gap: 25px;
                align-items: flex-start;
                justify-content: center;
                width: 100svw;
                padding: 20px;
                margin-left: -40px;
                background-color: var(--color-white);
                border-radius: 5px 0 0 5px;
                @media print, screen and (width >= 992px) {
                    width: auto;
                    padding: 20px 30px;
                    margin-left: 0;
                }
                /* 992pxとそれ以上 */
                .about__clinic__info {
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                    margin-bottom: 10px;
                    .about__access {
                        display: flex;
                        gap: 10px;
                        align-items: center;
                        .about__access__title {
                            padding: 10px;
                            font-size: var(--fSize--10);
                            font-weight: var(--font-family-base-bold);
                            line-height: 1;
                            color: var(--color-white);
                            background: var(--color-dark-green);
                            border-radius: 2px;
                            text-edge: trim-both cap alphabetic;
                        }
                        .about__access__kuzaha {
                            font-weight: var(--font-family-base-bold);
                            line-height: 1;
                            text-edge: trim-both cap alphabetic;
                        }
                    }
                }
                .about__schedule {
                    .about__schedule__table {
                        margin-bottom: 20px;
                        tr,
                        td {
                            padding-bottom: 20px;
                            margin-bottom: 20px;
                            border-bottom: 1px solid var(--color-dark-grey);
                        }
                    }
                }
            }
            .about__map {
                position: relative;
                height: 500px;
                @media print, screen and (width >= 576px) {
                    height: 400px;
                }
                /* 576pxとそれ以上 */
                @media print, screen and (width >= 1200px) {
                    height: auto;
                }
                /* 1200pxとそれ以上 */
                #googleCustomMap {
                    position: absolute !important;
                    left: -40px;
                    width: 100vw;
                    height: 100%;
                    @media print, screen and (width >= 992px) {
                        position: relative;
                        left: 0;
                        width: 100%;
                        /* width: calc(100% + 40px); */
                    }
                    /* 992pxとそれ以上 */
                }
            }
        }
        .about__schedule--closed {
            color: var(--color-dark-green);
        }
    }
}

/* Footer
------------------------ */
.footer {
    position: relative;
    padding: 100px 0;
    color: var(--color-white);
    background-color: var(--color-dark-green);
    @media print, screen and (width >= 992px) {
        padding: 120px 0;
    }
    /* 992pxとそれ以上 */
    .footer__inner {
        .nav-footer {
            display: flex;
            flex-direction: column;
            justify-content: center;
            @media print, screen and (width >= 992px) {
                flex-direction: row;
            }
            /* 992pxとそれ以上 */
            .nav-footer__items {
                &:not(:last-child) {
                    padding-bottom: 40px;
                    margin-bottom: 40px;
                    border-bottom: 1px solid var(--color-white);
                    @media print, screen and (width >= 992px) {
                        padding-right: 30px;
                        padding-bottom: 0;
                        margin-right: 30px;
                        margin-bottom: 0;
                        border-right: 1px solid var(--color-white);
                        border-bottom: 0;
                    }
                    /* 992pxとそれ以上 */
                    @media print, screen and (width >= 1200px) {
                        padding-right: 60px;
                        margin-right: 60px;
                    }
                    /* 1200pxとそれ以上 */
                }
                .nav-footer__items__title {
                    margin-bottom: 35px;
                    line-height: 1;
                    color: var(--color-white);
                    text-edge: trim-both cap alphabetic;
                }
                .nav-footer__items__list {
                    margin-left: 5px;
                    font-size: var(--fSize--14);
                    list-style: disc;
                    list-style-position: inside;
                    text-edge: trim-both cap alphabetic;
                    @media print, screen and (width >= 576px) {
                    }
                    /* 576pxとそれ以上 */

                    @media print, screen and (width >= 768px) {
                        display: flex;
                        flex-wrap: wrap;
                        -moz-column-gap: 50px;
                        column-gap: 50px;
                    }
                    /* 768pxとそれ以上 */

                    @media print, screen and (width >= 1200px) {
                        display: block;
                    }
                    /* 1200pxとそれ以上 */
                    li {
                        line-height: 1;
                        &:not(:last-child) {
                            margin-bottom: 30px;
                        }
                    }
                }
            }
        }
    }
}
.site-logo__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 30px 0;
    .footer__copy {
        margin-top: 30px;
        font-size: var(--fSize--12);
        line-height: 1;
        text-edge: trim-both cap alphabetic;
    }
}

/**
* Site Specific CSS
*/
/* 下層用width100%、ベージュ背景
------------------------ */
.bg__box--beige {
    position: relative;
    z-index: 0;
    padding: 40px 0;
    background: var(--color-light-beige);
    border-top: 1px solid var(--color-dark-beige);
    border-bottom: 1px solid var(--color-dark-beige);
    @media print, screen and (width >= 768px) {
        padding: 60px 0;
    }
    /* 768pxとそれ以上 */
    @media print, screen and (width >= 992px) {
        padding: 120px 0;
    }
    /* 992pxとそれ以上 */
}

/* イエロー枠線、強調ボックス
------------------------ */
.attention {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background: rgb(var(--color-white--rgb) / 0%);
    border: 2px solid var(--color-yellow);
    border-radius: 10px;
    @media print, screen and (width >= 768px) {
        padding: 60px 0;
    }
    /* 768pxとそれ以上 */
    .attention__title {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-edge: trim-both cap alphabetic;
        font-family: var(--font-family-heading);
        font-size: clamp(var(--fSize--24), 1.394rem + 0.64vw, var(--fSize--30));
        line-height: 1.4;
        text-align: center;
        @media print, screen and (width >= 992px) {
            line-height: 1;
            letter-spacing: 3px;
        }
        /* 992pxとそれ以上 */
        &::after {
            display: inline-block;
            width: 100px;
            height: 2px;
            margin: 35px 0 25px;
            content: '';
            background: var(--color-yellow);
            @media print, screen and (width >= 992px) {
                margin: 55px 0 45px;
            }
            /* 992pxとそれ以上 */
        }
    }
    .attention__text {
        text-edge: trim-both cap alphabetic;
        font-weight: var(--font-family-base-bold);
        line-height: 2.5;
    }
}

/* ホワイト背景、強調ボックス
------------------------ */
.lead__copy {
    position: relative;
    padding: clamp(1.25rem, 0.673rem + 1.6vw, 1.875rem);
    line-height: 2.5;
    color: var(--color-dark-black);
    background: rgb(var(--color-white--rgb) / 10%);
    border-radius: 5px;
    box-shadow: 0 0 30px var(--shadow--light-black);
    text-edge: trim-both cap alphabetic;
    @media print, screen and (width >= 1200px) {
        /* padding: 30px; */
    }
    /* 1200pxとそれ以上 */
    .lead__inner {
        position: relative;
        z-index: 10;
    }
}

/* 治療例
------------------------ */
#case {
    .case__content {
        /* padding: 60px 20px; */
        padding: 60px 20px 15px;
        margin-bottom: clamp(6.25rem, 3.365rem + 8.01vw, 9.375rem);
        background-color: var(--color-white);
        border-radius: 5px;
        -webkit-filter: drop-shadow(0 0 30px var(--shadow--light-black));
        filter: drop-shadow(0 0 30px var(--shadow--light-black));
        @media print, screen and (width >= 1200px) {
            display: grid;
            grid-template-columns: -webkit-max-content 1fr;
            grid-template-columns: max-content 1fr;
            -moz-column-gap: 30px;
            column-gap: 30px;
            padding-inline: 30px;
        }
        /* 1200pxとそれ以上 */
        &:last-child {
            margin-bottom: clamp(2.5rem, -2.115rem + 12.82vw, 7.5rem);
        }
        .case__example--title {
            position: relative;
            z-index: 10;
            display: flex;
            flex-direction: column;
            row-gap: 15px;
            align-items: center;
            justify-content: center;
            margin: -80px 0 30px;
            @media print, screen and (width >= 1200px) {
                grid-row: 1 / 2;
                grid-column: 1 / 3;
                row-gap: 25px;
                margin-bottom: 50px;
                letter-spacing: 0.72px;
            }
            /* 1200pxとそれ以上 */
            .case__example--title--en {
                display: flex;
                gap: 10px;
                align-items: center;
                justify-content: space-between;
                padding: 12px 0;
                font-size: clamp(
                    var(--fSize--18),
                    1.01rem + 0.32vw,
                    var(--fSize--20)
                );
                font-weight: var(--font-family-base-bold);
                line-height: 1;
                color: var(--color-white);
                letter-spacing: 5px;
                background: var(--color-yellow);
                border-radius: 5px;
                text-edge: trim-both cap alphabetic;
                &::before,
                &::after {
                    display: inline-block;
                    width: 30px;
                    height: 1px;
                    content: '';
                    background-color: var(--color-yellow);
                }
            }
            .case__example--title--jp {
                font-size: clamp(
                    var(--fSize--18),
                    0.779rem + 0.96vw,
                    var(--fSize--24)
                );
                font-weight: var(--font-family-base-bold);
                line-height: 1;
                text-edge: trim-both cap alphabetic;
            }
        }
        .case__photos {
            margin-bottom: 20px;
            @media print, screen and (width >= 1200px) {
                grid-row: 2 / 3;
                grid-column: 1 / 2;
                margin-bottom: 0;
            }
            /* 1200pxとそれ以上 */
            .case__item {
                position: relative;
                @media print, screen and (width >= 1200px) {
                    display: grid;
                    grid-template-rows: auto 1fr;
                    grid-template-columns: auto 1fr;
                    -moz-column-gap: 20px;
                    column-gap: 20px;
                    place-items: center;
                }
                /* 1200pxとそれ以上 */
                &:not(:last-child) {
                    padding-bottom: 50px;
                    margin-bottom: 20px;
                    @media print, screen and (width >= 1200px) {
                        padding-bottom: 70px;
                        margin-bottom: 30px;
                    }
                    /* 1200pxとそれ以上 */
                }
                &:not(:last-child) {
                    &:before {
                        position: absolute;
                        inset: auto auto 0 50%;
                        width: 40px;
                        height: 40px;
                        content: '';
                        background: url(../images/loop/arrow-curve-icon-green.svg)
                            center / contain no-repeat;
                        transform: translateX(-50%) rotate(90deg);
                        @media print, screen and (width >= 1200px) {
                            transform: translateX(calc(-50% + 30px))
                                rotate(90deg);
                        }
                        /* 1200pxとそれ以上 */
                    }
                }
                .case__photo--title {
                    width: 100%;
                    padding: 8px 0;
                    margin-bottom: 20px;
                    font-size: var(--fSize--18);
                    color: var(--color-white);
                    text-align: center;
                    letter-spacing: 6px;
                    background-color: var(--color-dark-green);
                    border-radius: 5px;
                    @media print, screen and (width >= 1200px) {
                        grid-row: 1 / 3;
                        grid-column: 1 / 2;
                        width: auto;
                        height: 100%;
                        padding: 0 10px;
                        margin-bottom: 0;
                        -webkit-writing-mode: vertical-rl;
                        -ms-writing-mode: tb-rl;
                        writing-mode: vertical-rl;
                    }
                    /* 1200pxとそれ以上 */
                }
                .case__photo--title--after {
                    color: var(--color-dark-black);
                    background-color: var(--color-yellow);
                }
                .case__item--images {
                    display: block;
                    margin-inline: auto;
                    margin-bottom: 20px;
                }
            }
        }
        .case__details {
            @media print, screen and (width >= 1200px) {
                grid-row: 2 / 3;
                grid-column: 2 / 3;
            }
            /* 1200pxとそれ以上 */
        }
    }
    .case__footer--nav {
        display: grid;
        row-gap: 20px;
        place-content: center;
        @media print, screen and (width >= 768px) {
            grid-template-columns: -webkit-max-content -webkit-max-content;
            grid-template-columns: max-content max-content;
            -moz-column-gap: 30px;
            column-gap: 30px;
        }
        /* 768pxとそれ以上 */
        .btn__txt {
            width: 100%;
        }
        a[href$='#case'] {
            &::before {
                width: 10px;
                height: 6px;
                background-image: url(../images/loop/icon-bracket-down-white.svg);
                transform: rotate(-180deg);
            }
            &:hover {
                transform: translateY(-10px);
                &::before {
                    background: url(../images/loop/icon-bracket-down-black.svg)
                        center / contain;
                }
            }
        }
        a[href*='/case/'] {
            &:hover {
                transform: translateX(10px);
            }
        }
    }
    .tab-content {
        display: none; /* 初期状態では非表示 */
    }
    .tab-content.active {
        display: block; /* アクティブなコンテンツのみ表示 */
    }
    .case__table {
        margin: 0 auto;
        table-layout: auto;
        border-spacing: 0 5px;
        border-collapse: separate;
        .case__table-row {
            line-height: 1;
            .case__table-label,
            .case__table-content {
                position: relative;
                line-height: 2;
                background-color: var(--color-grey);
                border: none;
            }
            .case__table-label {
                padding: 15px 15px 5px 15px;
                white-space: nowrap;
                border-radius: 5px 5px 0 0;
                @media print, screen and (width >= 768px) {
                    padding: 20px;
                    border-radius: 5px 0 0 5px;
                }
                /* 768pxとそれ以上 */
                &::after {
                    @media print, screen and (width >= 576px) {
                        position: absolute;
                        inset: 50% 0 auto auto;
                        display: inline-block;
                        width: 1px;
                        height: calc(100% - 2rem);
                        content: '';
                        background: var(--color-dark-grey);
                        transform: translateY(-50%);
                    }
                    /* 576pxとそれ以上 */
                }
            }
            .case__table-content {
                padding: 0 15px 15px 15px;
                border-radius: 0 0 5px 5px;
                @media print, screen and (width >= 768px) {
                    padding: 20px;
                    border-radius: 0 0 5px 5px;
                }
                /* 768pxとそれ以上 */
            }
        }
    }
}

/* 見出し画像
------------------------ */
.photo--heading {
    display: none;
    @media print, screen and (width >= 768px) {
        position: absolute;
        inset: 0 0 auto auto;
        z-index: 3;
        display: block;
        width: 40%;
        border-radius: 5px 5px 0 150px;
    }
    /* 768pxとそれ以上 */
    @media print, screen and (width >= 1200px) {
        width: auto;
    }
    /* 1200pxとそれ以上 */
}