/*========================================================================================
基本設定
==========================================================================================*/

:root {
    /* サイト幅 */
    --site-width: 1275px;

    /* カラー */
    --color-red1: #fa000f;
    --color-red2: #c00;
    --color-white: #fff;
    --color-gray1: #f4f4f4;
    --color-gray2: #d9d9d9;
    --color-gray3: #b3b3b3;
    --color-gray4: #737373;
    --color-gray5: #4d4d4d;
    --color-gray6: #222;
    --color-black: #0c0c0c;
    --color-orange1: #fdc796;
    --color-orange2: #fa6900;
    --color-orange3: #c85400;
    --color-yellow1: #fdec96;
    --color-yellow2: #fad200;
    --color-yellow3: #967e00;
    --color-pink1: #fd96d4;
    --color-pink2: #fa00a5;
    --color-pink3: #96005a;
    --color-purple1: #d096fd;
    --color-purple2: #9b00fa;
    --color-purple3: #540096;
    --color-blue1: #96c5fd;
    --color-blue2: #0064fa;
    --color-blue3: #004596;
    --color-teal1: #96f0fd;
    --color-teal2: #00dcfa;
    --color-teal3: #008496;
    --color-green1: #96fdcc;
    --color-green2: #00fa82;
    --color-green3: #00964e;
    --color-red1-tint1: #ffcbce;
    --color-red1-tint2: #ff979d;
    --color-red1-tint3: #ff636c;
    --color-red1-dark1: #bb000b;
    --color-red1-dark2: #7d0008;
}

/*========================================================================================
リセット関連
==========================================================================================*/

h1,
h2,
h3,
h4,
h5,
.JS h1,
.JS h2,
.JS h3,
.JS h4,
.JS h5 {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

#Contents {
    font-family: "Hitachi Sans", "Noto Sans JP", "Yu Gothic UI", "Noto Sans" ,sans-serif;
    font-weight: 400;
    color: var(--color-black);
}

/*-----------------------
H2
-------------------------*/
h2 {
    margin: 0;
    padding: 0;
    background: none;
}

/*-----------------------
ページトップボタン
-------------------------*/
#Controler button.pagetop {
    background-image: url(/-/media/image/jp/top/icon_control_pagetop.png);
    width: 50px;
    height: 160px;
}
#Controler button.pagetop:hover {
    background-image: url(/-/media/image/jp/top/icon_control_pagetop.png);
    
    opacity: .8;
}

/* color */
.color-red1 { color: var(--color-red1)!important }
.color-red2 { color: var(--color-red2)!important }
.color-white { color: var(--color-white)!important }
.color-gray1 { color: var(--color-gray1)!important }
.color-gray2 { color: var(--color-gray2)!important }
.color-gray3 { color: var(--color-gray3)!important }
.color-gray4 { color: var(--color-gray4)!important }
.color-gray5 { color: var(--color-gray5)!important }
.color-gray6 { color: var(--color-gray6)!important }
.color-black { color: var(--color-black)!important }
.color-orange1 { color: var(--color-orange1)!important }
.color-orange2 { color: var(--color-orange2)!important }
.color-orange3 { color: var(--color-orange3)!important }
.color-yellow1 { color: var(--color-yellow1)!important }
.color-yellow2 { color: var(--color-yellow2)!important }
.color-yellow3 { color: var(--color-yellow3)!important }
.color-pink1 { color: var(--color-pink1)!important }
.color-pink2 { color: var(--color-pink2)!important }
.color-pink3 { color: var(--color-pink3)!important }
.color-purple1 { color: var(--color-purple1)!important }
.color-purple2 { color: var(--color-purple2)!important }
.color-purple3 { color: var(--color-purple3)!important }
.color-blue1 { color: var(--color-blue1)!important }
.color-blue2 { color: var(--color-blue2)!important }
.color-blue3 { color: var(--color-blue3)!important }
.color-teal1 { color: var(--color-teal1)!important }
.color-teal2 { color: var(--color-teal2)!important }
.color-teal3 { color: var(--color-teal3)!important }
.color-green1 { color: var(--color-green1)!important }
.color-green2 { color: var(--color-green2)!important }
.color-green3 { color: var(--color-green3)!important }
.color-red1-tint1 { color: var(--color-red1-tint1)!important }
.color-red1-tint2 { color: var(--color-red1-tint2)!important }
.color-red1-tint3 { color: var(--color-red1-tint3)!important }
.color-red1-dark1 { color: var(--color-red1-dark1)!important }
.color-red1-dark2 { color: var(--color-red1-dark2)!important }

/* width */
.w-10 { width: 10px!important }
.w-20 { width: 20px!important }
.w-30 { width: 30px!important }
.w-40 { width: 40px!important }
.w-50 { width: 50px!important }
.w-60 { width: 60px!important }
.w-70 { width: 70px!important }
.w-80 { width: 80px!important }
.w-90 { width: 90px!important }
.w-100 { width: 100px!important }
.w-110 { width: 110px!important }
.w-120 { width: 120px!important }
.w-130 { width: 130px!important }
.w-140 { width: 140px!important }
.w-150 { width: 150px!important }
.w-160 { width: 160px!important }
.w-170 { width: 170px!important }
.w-180 { width: 180px!important }
.w-190 { width: 190px!important }
.w-200 { width: 200px!important }
.w-210 { width: 210px!important }
.w-220 { width: 220px!important }
.w-230 { width: 230px!important }
.w-240 { width: 240px!important }
.w-250 { width: 250px!important }
.w-260 { width: 260px!important }
.w-270 { width: 270px!important }
.w-280 { width: 280px!important }
.w-290 { width: 290px!important }
.w-300 { width: 300px!important }
.w-310 { width: 310px!important }
.w-320 { width: 320px!important }
.w-330 { width: 330px!important }
.w-340 { width: 340px!important }
.w-350 { width: 350px!important }
.w-360 { width: 360px!important }
.w-370 { width: 370px!important }
.w-380 { width: 380px!important }
.w-390 { width: 390px!important }
.w-400 { width: 400px!important }
.w-410 { width: 410px!important }
.w-420 { width: 420px!important }
.w-430 { width: 430px!important }
.w-440 { width: 440px!important }
.w-450 { width: 450px!important }
.w-460 { width: 460px!important }
.w-470 { width: 470px!important }
.w-480 { width: 480px!important }
.w-490 { width: 490px!important }
.w-500 { width: 500px!important }

/* max-width */
.mw-300 { max-width: 300px !important }
.mw-320 { max-width: 320px !important }
.mw-400 { max-width: 400px !important }
.mw-500 { max-width: 500px !important }

/* margin */
.m-0  { margin: 0px!important; }
.m-1  { margin: 1px!important; }
.m-2  { margin: 2px!important; }
.m-3  { margin: 3px!important; }
.m-4  { margin: 4px!important; }
.m-5  { margin: 5px!important; }
.m-6  { margin: 6px!important; }
.m-7  { margin: 7px!important; }
.m-8  { margin: 8px!important; }
.m-9  { margin: 9px!important; }
.m-10 { margin: 10px!important; }
.m-20 { margin: 20px!important; }

/* margin-top */
.mt-0  { margin-top: 0px!important; }
.mt-1  { margin-top: 1px!important; }
.mt-2  { margin-top: 2px!important; }
.mt-3  { margin-top: 3px!important; }
.mt-4  { margin-top: 4px!important; }
.mt-5  { margin-top: 5px!important; }
.mt-6  { margin-top: 6px!important; }
.mt-7  { margin-top: 7px!important; }
.mt-8  { margin-top: 8px!important; }
.mt-9  { margin-top: 9px!important; }
.mt-10 { margin-top: 10px!important; }
.mt-20 { margin-top: 20px!important; }
.mt-30 { margin-top: 30px!important; }
.mt-40 { margin-top: 40px!important; }

/* margin-right */
.mr-0  { margin-right: 0px!important; }
.mr-1  { margin-right: 1px!important; }
.mr-2  { margin-right: 2px!important; }
.mr-3  { margin-right: 3px!important; }
.mr-4  { margin-right: 4px!important; }
.mr-5  { margin-right: 5px!important; }
.mr-6  { margin-right: 6px!important; }
.mr-7  { margin-right: 7px!important; }
.mr-8  { margin-right: 8px!important; }
.mr-9  { margin-right: 9px!important; }
.mr-10 { margin-right: 10px!important; }
.mr-20 { margin-right: 20px!important; }

/* margin-bottom */
.mb-0  { margin-bottom: 0px!important; }
.mb-1  { margin-bottom: 1px!important; }
.mb-2  { margin-bottom: 2px!important; }
.mb-3  { margin-bottom: 3px!important; }
.mb-4  { margin-bottom: 4px!important; }
.mb-5  { margin-bottom: 5px!important; }
.mb-6  { margin-bottom: 6px!important; }
.mb-7  { margin-bottom: 7px!important; }
.mb-8  { margin-bottom: 8px!important; }
.mb-9  { margin-bottom: 9px!important; }
.mb-10 { margin-bottom: 10px!important; }
.mb-20 { margin-bottom: 20px!important; }
.mb-30 { margin-bottom: 30px!important; }
.mb-40 { margin-bottom: 40px!important; }
.mb-50 { margin-bottom: 50px!important; }
.mb-60 { margin-bottom: 60px!important; }
.mb-70 { margin-bottom: 70px!important; }
.mb-80 { margin-bottom: 80px!important; }
.mb-90 { margin-bottom: 90px!important; }

/* margin-left */
.ml-0  { margin-left: 0px!important; }
.ml-1  { margin-left: 1px!important; }
.ml-2  { margin-left: 2px!important; }
.ml-3  { margin-left: 3px!important; }
.ml-4  { margin-left: 4px!important; }
.ml-5  { margin-left: 5px!important; }
.ml-6  { margin-left: 6px!important; }
.ml-7  { margin-left: 7px!important; }
.ml-8  { margin-left: 8px!important; }
.ml-9  { margin-left: 9px!important; }
.ml-10 { margin-left: 10px!important; }
.ml-20 { margin-left: 20px!important; }

/* padding */
.p-0  { padding: 0px!important; }
.p-1  { padding: 1px!important; }
.p-2  { padding: 2px!important; }
.p-3  { padding: 3px!important; }
.p-4  { padding: 4px!important; }
.p-5  { padding: 5px!important; }
.p-6  { padding: 6px!important; }
.p-7  { padding: 7px!important; }
.p-8  { padding: 8px!important; }
.p-9  { padding: 9px!important; }
.p-10 { padding: 10px!important; }
.p-20 { padding: 20px!important; }
.p-30 { padding: 30px!important; }
.p-40 { padding: 40px!important; }
.p-50 { padding: 50px!important; }

/* padding-top */
.pt-0  { padding-top: 0px!important; }
.pt-1  { padding-top: 1px!important; }
.pt-2  { padding-top: 2px!important; }
.pt-3  { padding-top: 3px!important; }
.pt-4  { padding-top: 4px!important; }
.pt-5  { padding-top: 5px!important; }
.pt-6  { padding-top: 6px!important; }
.pt-7  { padding-top: 7px!important; }
.pt-8  { padding-top: 8px!important; }
.pt-9  { padding-top: 9px!important; }
.pt-10 { padding-top: 10px!important; }
.pt-20 { padding-top: 20px!important; }
.pt-30 { padding-top: 30px!important; }
.pt-40 { padding-top: 40px!important; }
.pt-50 { padding-top: 50px!important; }

/* padding-right */
.pr-0  { padding-right: 0px!important; }
.pr-1  { padding-right: 1px!important; }
.pr-2  { padding-right: 2px!important; }
.pr-3  { padding-right: 3px!important; }
.pr-4  { padding-right: 4px!important; }
.pr-5  { padding-right: 5px!important; }
.pr-6  { padding-right: 6px!important; }
.pr-7  { padding-right: 7px!important; }
.pr-8  { padding-right: 8px!important; }
.pr-9  { padding-right: 9px!important; }
.pr-10 { padding-right: 10px!important; }
.pr-20 { padding-right: 20px!important; }
.pr-30 { padding-right: 30px!important; }
.pr-40 { padding-right: 40px!important; }
.pr-50 { padding-right: 50px!important; }

/* padding-bottom */
.pb-0  { padding-bottom: 0px!important; }
.pb-1  { padding-bottom: 1px!important; }
.pb-2  { padding-bottom: 2px!important; }
.pb-3  { padding-bottom: 3px!important; }
.pb-4  { padding-bottom: 4px!important; }
.pb-5  { padding-bottom: 5px!important; }
.pb-6  { padding-bottom: 6px!important; }
.pb-7  { padding-bottom: 7px!important; }
.pb-8  { padding-bottom: 8px!important; }
.pb-9  { padding-bottom: 9px!important; }
.pb-10 { padding-bottom: 10px!important; }
.pb-20 { padding-bottom: 20px!important; }
.pb-30 { padding-bottom: 30px!important; }
.pb-40 { padding-bottom: 40px!important; }
.pb-50 { padding-bottom: 50px!important; }

/* padding-left */
.pl-0  { padding-left: 0px!important; }
.pl-1  { padding-left: 1px!important; }
.pl-2  { padding-left: 2px!important; }
.pl-3  { padding-left: 3px!important; }
.pl-4  { padding-left: 4px!important; }
.pl-5  { padding-left: 5px!important; }
.pl-6  { padding-left: 6px!important; }
.pl-7  { padding-left: 7px!important; }
.pl-8  { padding-left: 8px!important; }
.pl-9  { padding-left: 9px!important; }
.pl-10 { padding-left: 10px!important; }
.pl-20 { padding-left: 20px!important; }
.pl-30 { padding-left: 30px!important; }
.pl-40 { padding-left: 40px!important; }
.pl-50 { padding-left: 50px!important; }

.bg-gray1 { background-color: var(--color-gray1)!important; }
.bg-gray2 { background-color: var(--color-gray2)!important; }
.bg-gray3 { background-color: var(--color-gray3)!important; }
.bg-gray4 { background-color: var(--color-gray4)!important; }
.bg-gray5 { background-color: var(--color-gray5)!important; }
.bg-gray6 { background-color: var(--color-gray6)!important; }


/* flex */
.flex { display: flex!important; }
.item-center { align-items: center!important; }
.item-top { align-items: top!important; }
.justify-center { justify-content: center!important; }
.justify-left { justify-content: left!important; }
.direction-column { flex-direction: column!important; }
.direction-column-reverse { flex-direction: column-reverse!important; }
.wrap { flex-wrap: wrap!important; }
.gap-0 { gap: 0!important; }
.gap-10 { gap: 10px!important; }
.gap-20 { gap: 20px!important; }
.gap-30 { gap: 30px!important; }
.gap-40 { gap: 40px!important; }
.gap-50 { gap: 50px!important; }
.row-gap-0 { row-gap: 0!important; }
.row-gap-10 { row-gap: 10px!important; }
.row-gap-20 { row-gap: 20px!important; }
.row-gap-30 { row-gap: 30px!important; }
.row-gap-40 { row-gap: 40px!important; }
.row-gap-50 { row-gap: 50px!important; }

/* grid */
.grid { display: grid!important; }
.grid-cols-1 { grid-template-columns: 1fr!important; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr)!important; }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr)!important; }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr)!important; }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr)!important; }
@media screen and (max-width: 767px) {
    .sp-grid-cols-1 { grid-template-columns: 1fr!important; }
    .sp-grid-cols-2 { grid-template-columns: repeat(2, 1fr)!important; }
    .sp-grid-cols-3 { grid-template-columns: repeat(3, 1fr)!important; }
    .sp-grid-cols-4 { grid-template-columns: repeat(4, 1fr)!important; }
    .sp-grid-cols-5 { grid-template-columns: repeat(5, 1fr)!important; }
}

/* font-size */
.fs-10 { font-size: 10px!important; }
.fs-12 { font-size: 12px!important; }
.fs-14 { font-size: 14px!important; }
.fs-16 { font-size: 16px!important; }
.fs-18 { font-size: 18px!important; }
.fs-20 { font-size: 20px!important; }
.fs-24 { font-size: 24px!important; }
.fs-28 { font-size: 28px!important; }
@media screen and (max-width: 767px) {
    .sp-fs-10 { font-size: 10px!important; }
    .sp-fs-12 { font-size: 12px!important; }
    .sp-fs-14 { font-size: 14px!important; }
    .sp-fs-16 { font-size: 16px!important; }
    .sp-fs-18 { font-size: 18px!important; }
    .sp-fs-20 { font-size: 20px!important; }
    .sp-fs-24 { font-size: 24px!important; }
    .sp-fs-28 { font-size: 28px!important; }
}

.text-normal { font-weight: 400!important; }
.text-bold { font-weight: 700!important; }

.text-left { text-align: left!important; }
.text-center { text-align: center!important; }
.text-right { text-align: right!important; }

/* pc-only */
@media screen and (max-width: 1024px) {
    .pc-only {
        display: none;
    }
}

/* tb-only */
.tb-only {
    display: none;
}
@media screen and (max-width: 1024px) {
    .tb-only {
        display: unset;
    }
}
@media screen and (max-width: 767px) {
    .tb-only {
        display: none;
    }
}

/* sp-only */
.sp-only {
    display: none;
}
@media screen and (max-width: 767px) {
    .sp-only {
        display: unset;
    }
}

/*========================================================================================
共通設定
==========================================================================================*/

section {
    padding: 70px 0;
}
@media screen and (max-width: 767px) {
    section {
        padding: 2rem 0;
    }
}

.inner {
    max-width: var(--site-width);
    margin: 0 auto;
}
/* 1275px + 15px + 15px = 1305px */
@media screen and (max-width: 1305px) {
    .inner {
        padding-right: 15px;
        padding-left: 15px;
    }
}
@media screen and (max-width: 767px) {
    .inner {
        padding: 0;
    }
}

/*========================================================================================
汎用パーツ
==========================================================================================*/

/*-----------------------
テキスト外部リンク
-------------------------*/
a[target="_blank"]:not(:has(img)):not(.ot-cookie-policy-link):not(.button-white):not(.button-red) {
    position: relative;
}

a[target="_blank"]:not(:has(img)):not(.ot-cookie-policy-link):not(.button-white):not(.button-red)::after {
    content: "";
    position: relative;
    display: inline-block;
    bottom: -5px;
    right: 0;
    width: 18px;
    height: 18px;
    padding-left: 4px;
    background: url(/-/media/image/jp/r1/icon/icon_new_window_hd.gif) no-repeat center / contain;
}

/*-----------------------
関連商品ページ
-------------------------*/
.recommend-item {
    width: 100vw;
    margin: 0 0 0 calc(-50vw + 50%);
    background: var(--color-gray1);
}
@media screen and (max-width: 767px) {
    .recommend-item .inner {
        padding: 0 15px;
    }
}

/*-----------------------
注意書き
-------------------------*/
p.note {
    padding-left: 20px;
    position: relative;
    font-size: 14px;
}

p.note::before {
    content: "※";
    position: absolute;
    top: 0;
    left: 0;
}

/*-----------------------
脚注
-------------------------*/
ul.footnote {
    margin: 0;
    padding: 0;
}

ul.footnote>li {
    padding-left: 1rem;
    position: relative;
    font-size: .8rem;
}

ul.footnote>li::before {
    content: "※";
    position: absolute;
    top: 1px;
    left: 0;
    font-size: .8rem;
    line-height: 1.4;
}

/*-----------------------
image-box
-------------------------*/
.image-box {
    width: fit-content;
    margin: 0 auto;
}
.image-box > img {
    margin: 0 auto;
    display: block;
    max-width: 100%;
    height: auto;
}

/*-----------------------
FirstView
-------------------------*/
.first-view {
    width: 100vw;
    margin: 0 0 0 calc(-50vw + 50%);
    padding: 60px 0;
    background: url(/-/media/healthcare/image/care_first_view_bg.png) no-repeat center / cover;
}
.first-view .target {
    display: inline-block;
    padding: 10px 20px;
    background: var(--color-white);
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 1.25px;
}
.first-view .target.small {
    font-size: 22px;
}
.first-view .content .catch-copy {
    margin-top: 40px;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.29;
    letter-spacing: 1.2px;
}
.first-view .content > h1 {
    margin-top: 20px;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1.6px;
}
.first-view .button-area {
    margin-top: 40px;
    display: flex;
    align-items: center;
    gap: 30px;
}
@media screen and (max-width: 1305px) {
    .first-view .inner {
        max-width: 900px;
        padding: 0 15px;
    }
}
@media screen and (max-width: 1024px) {
    .first-view {
        background-position: 80% center;
    }
    .first-view .target {
        font-size: 1.2rem;
    }
    .first-view .content {
        margin-top: 1rem;
        padding: 1rem;
        background: rgb(255, 255, 255, .8);
        border-radius: 20px;
    }
    .first-view .content .catch-copy {
        margin: 0;
        font-size: 1rem;
        font-weight: 400;
    }
    .first-view .button-area {
        justify-content: center;
    }
}
@media screen and (max-width: 767px) {
    .first-view {
        padding: 2rem 0;
        background: var(--color-gray1)!important;
    }
    .first-view .content {
        padding: 0;
        margin: 0;
        background: none;
    }
    .first-view .target {
        font-size: .8rem;
    }
    .first-view .target.small {
        font-size: .7rem;
    }
    .first-view .content .catch-copy {
        margin-top: 1.2rem;
    }
    .first-view .content > h1 {
        font-size: 1.58rem;
    }
    .first-view .image-box {
        display: block;
        margin-top: 23px;
    }
    .first-view .button-area {
        margin-top: 23px;
        flex-direction: column;
        gap: 1rem;
    }
}

/*-----------------------
見出しブロック（赤下線）
-------------------------*/
.headding-block {
    margin-bottom: 50px;
    padding-bottom: 40px;
    position: relative;
}
.headding-block::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 108px;
    height: 2px;
    background: var(--color-red1);
}
.headding-block h2 {
    text-align: center;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1.8px;
}
.headding-block > p {
    margin-top: 30px;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.77;
    letter-spacing: 1.44px;
}
@media screen and (max-width: 767px) {
    .headding-block h2 {
        font-size: 1.6rem;
    }
}

/*-----------------------
ボタン（赤）
-------------------------*/
a.button-red {
    width: 286px;
    height: 62px;
    padding-right: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-red2);
    border: 2px solid var(--color-red2);
    border-radius: 200px;
    position: relative;
    transition: all .3s;

    color: var(--color-white);
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.33;
    letter-spacing: 0.9px;
}
a.button-red::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--color-white);
    border-right: 2px solid var(--color-white);
    transition: all .3s;
}
a.button-red:hover {
    background: var(--color-white);
    color: var(--color-black);
}
a.button-red:hover::after {
    border-top: 2px solid var(--color-black);
    border-right: 2px solid var(--color-black);
}

/*-----------------------
ボタン（白）
-------------------------*/
a.button-white {
    width: 286px;
    height: 62px;
    padding-right: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-white);
    border: 2px solid var(--color-red2);
    border-radius: 200px;
    position: relative;
    transition: all .3s;

    color: var(--color-black);
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.33;
    letter-spacing: 0.9px;
}
a.button-white::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--color-black);
    border-right: 2px solid var(--color-black);
    transition: all .3s;
}
a.button-white:hover {
    background: var(--color-red2);
    color: var(--color-white);
}
a.button-white:hover::after {
    border-top: 2px solid var(--color-white);
    border-right: 2px solid var(--color-white);
}

/*-----------------------
ボタン（赤矢印）
-------------------------*/
a.button-arrow {
    padding: 25px 82.5px 25px 50px;
    border-radius: 20px;
    border: 1px solid var(--color-gray2);
    background: var(--color-white);
    position: relative;
    text-decoration: none;
    color: var(--color-black);
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.9px;
    transform: all .3s;
}
a.button-arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 23.5px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'%3E%3Ccircle cx='15' cy='15' r='15' fill='%23FA000E'/%3E%3Cpath d='M18.7047 14.2897L13.713 9.29385C13.6199 9.20069 13.5094 9.12679 13.3877 9.07637C13.2661 9.02595 13.1358 9 13.0041 9C12.7383 9 12.4833 9.1057 12.2953 9.29385C12.2022 9.38701 12.1284 9.49761 12.078 9.61933C12.0276 9.74105 12.0017 9.87151 12.0017 10.0033C12.0017 10.2693 12.1073 10.5245 12.2953 10.7127L16.5882 14.9991L12.2953 19.2856C12.2017 19.3785 12.1275 19.489 12.0768 19.6108C12.0261 19.7325 12 19.8631 12 19.995C12 20.1269 12.0261 20.2575 12.0768 20.3793C12.1275 20.501 12.2017 20.6116 12.2953 20.7044C12.3881 20.7981 12.4985 20.8724 12.6202 20.9232C12.7419 20.9739 12.8723 21 13.0041 21C13.1359 21 13.2664 20.9739 13.3881 20.9232C13.5097 20.8724 13.6202 20.7981 13.713 20.7044L18.7047 15.7086C18.7983 15.6157 18.8725 15.5052 18.9232 15.3834C18.9739 15.2616 19 15.1311 19 14.9991C19 14.8672 18.9739 14.7366 18.9232 14.6149C18.8725 14.4931 18.7983 14.3826 18.7047 14.2897Z' fill='white'/%3E%3C/svg%3E") no-repeat center / contain;
    transform: all .3s;
}
a.button-arrow:hover {
    opacity: .8;
}
a.button-arrow:hover::after {
    right: 21.5px;
}
@media screen and (max-width: 767px) {
    a.button-arrow {
        padding: 1rem 3rem 1rem 1rem;
        font-size: 1rem;
    }
    a.button-arrow::after {
        right: 1rem;
        width: 20px;
        height: 20px;
    }
}

/*-----------------------
お悩みリスト
-------------------------*/
.problem-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 37px;
}
.problem-list > li {
    display: flex;
}
.problem-list > li > a {
    display: block;
    width: 400px;
    padding: 22px;
    border-radius: 20px;
    background: var(--color-white);
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.10);
    text-decoration: none;
    position: relative;
    transition: all .3s;
}
.problem-list > li > a .label {
    display: inline-block;
    padding: 4px 30px;
    margin-bottom: 20px;
    border-radius: 4px;
    background: var(--color-red1-tint3);
    color: var(--color-white);
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; 
}
.problem-list > li > a > p {
    margin-bottom: 30px;
    color: var(--color-black);
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.9px;
}
.problem-list > li > a .link-area {
    text-align: right;
}
.problem-list > li > a .link-area .link {
    padding-right: 16px;
    color: var(--color-red1);
    text-decoration: underline;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    position: relative;
}
.problem-list > li > a .link-area .link::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) rotate(45deg);
    width: 6px;
    height: 6px;
    border-top: 1px solid var(--color-red1);
    border-right: 1px solid var(--color-red1);
}
.problem-list > li > a:hover {
    opacity: .5;
}
@media screen and (max-width: 1024px) {
    .problem-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: stretch;
        gap: 1rem;
    }
    .problem-list > li > a {
        width: 100%;
    }
}
@media screen and (max-width: 767px) {
    .problem-list {
        grid-template-columns: 1fr;
    }
    .problem-list > li {
        width: 100%;
    }
    .problem-list > li > a {
        width: 100%;
    }
}

/*-----------------------
サービスリスト
-------------------------*/
.service-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 37px;
}
.service-list > li {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.service-list > li > a {
    height: 100%;
    border-radius: 20px;
    background: var(--color-white);
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.10);
    text-decoration: none;
    color: var(--color-black);
    transition: all .3s;
}
.service-list > li > a .image-box {
    border-radius: 20px 20px 0 0;
    border-bottom: 1px solid var(--color-gray1);
    overflow: hidden;
}
.service-list > li > a .image-box > img {
    transition: all .3s;
}
.service-list > li > a .text-box {
    padding: 20px;
}
.service-list > li > a .text-box > h3 {
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.9px;
}
.service-list > li > a .text-box > p {
    margin-top: 20px;
    margin-bottom: 40px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.7px;
}
.service-list > li > a .text-box .link-area {
    position: absolute;
    bottom: 20px;
    right: 20px;
}
.service-list > li > a .text-box .link-area >  .link {
    padding-right: 16px;
    color: var(--color-red1);
    text-decoration: underline;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    position: relative;
}
.service-list > li > a .text-box .link-area .link::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) rotate(45deg);
    width: 6px;
    height: 6px;
    border-top: 1px solid var(--color-red1);
    border-right: 1px solid var(--color-red1);
}
.service-list > li > a:hover {
    opacity: .8;
}
.service-list > li > a:hover .image-box > img {
    scale: 1.05;
}
@media screen and (max-width: 1024px) {
    .service-list {
        gap: 1rem;
    }
}
@media screen and (max-width: 767px) {
    .service-list {
        grid-template-columns: 1fr;
    }
}

/*-----------------------
下層ページの「最新のお問い合わせはこちら」部分
-------------------------*/
#Topics {
    padding: 70px 0;
}
@media screen and (max-width: 767px) {
    #Topics {
        padding: 2rem 0;
    }
}

/*-----------------------
note
-------------------------*/

.footnote-block {
    padding: 0 0 60px;
}


/*========================================================================================
共通パーツ（JSで読み込み）
==========================================================================================*/

/*-----------------------
ローカルナビ
-------------------------*/

.includeLocalNavi.bg-gray {
    background: var(--color-gray1);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.localnavi ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.localnavi ul > li {
    display: flex;
    align-content: stretch;
    width: 100%;
}
.localnavi ul > li > a {
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    border-radius: 20px;
    border: 1px solid var(--color-red1);
    background: var(--White, var(--color-white));
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.12);
    text-decoration: none;
    color: var(--color-black);
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1.2px;
    transition: all .3s;
}
.localnavi ul > li > a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--color-red1);
    border-right: 2px solid var(--color-red1);
}
.localnavi ul > li > a:hover {
    top: -2px;
    opacity: .5;
}
.localnavi ul > li > a .sub {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.7px;
}
@media screen and (max-width: 1199px) {
    .localnavi ul {
        grid-template-columns: repeat(2, 1fr);
    }
    .localnavi ul > li > a {
        min-height: 56px;
    }
}
@media screen and (max-width: 767px) {
    .localnavi .inner {
        padding: 0 15px;
    }
    .localnavi ul {
        gap: .5rem;
    }
    .localnavi ul > li > a {
        max-width: 340px;
        min-height: unset;
        height: 50px;
        margin: 0 auto;
        padding: 1rem;
        font-size: .8rem;
    }
    .localnavi ul > li > a::after {
        right: .5rem;
        width: .4rem;
        height: .4rem;
    }
    .localnavi ul > li > a .sub {
        text-align: center;
        font-size: .6rem;
    }
}

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

.cta {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: url(/-/media/healthcare/image/cta_bg.png) no-repeat center / cover;
}
.cta h2 {
    color: var(--color-black);
    text-align: center;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.56;
    letter-spacing: 1.5px;
}
.cta h2::before,
.cta h2::after {
    display: none;
}
.cta p {
    margin-top: 30px;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.7px;
}
.cta .button-area {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}
@media screen and (max-width: 767px) {
    .cta .inner {
        padding: 0 15px;
    }
    .cta h2 {
        font-size: 1.4rem;
    }
    .cta .button-area {
        flex-direction: column;
        gap: 1rem;
    }
}

/*-----------------------
追従フッター
-------------------------*/
.sticky-footer {
    width: 100vw;
    margin: 0 0 0 calc(-50vw + 50%);
    position: fixed;
    left: 0;
    bottom: 0;
    background: var(--color-white);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10;
}
.sticky-footer .inner {
    padding: .5rem;
}
.sticky-footer .inner .button-area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}
.sticky-footer .inner .button-area .button-white,
.sticky-footer .inner .button-area .button-red {
    height: 54px;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.8px;
}
@media screen and (max-width: 767px) {
    .sticky-footer .inner .button-area {
        gap: 1rem;
    }
    .sticky-footer .inner .button-area .button-white,
    .sticky-footer .inner .button-area .button-red {
        padding-right: unset;
        height: 45px;
        font-size: .9rem;
    }
    .sticky-footer .inner .button-area .button-white::after,
    .sticky-footer .inner .button-area .button-red::after {
        display: none;
    }
}

/*========================================================================================
TOP
==========================================================================================*/

/*-----------------------
first-view
-------------------------*/
.top .first-view {
    background: url(/-/media/healthcare/image/top/first_view_bg.png) no-repeat center / cover;
}
.top .first-view .inner {
    max-width: var(--site-width);
}
.top .first-view .content {
    max-width: 580px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.top .first-view .content > h2 {
    color: var(--color-gray6);
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.29;
    letter-spacing: 1.2px;
}
.top .first-view .content > p {
    color: var(--color-gray6);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.72;
    letter-spacing: 0.9px;
}
@media screen and (max-width: 1305px) {
    .top .first-view .inner {
        padding: 0 15px;
    }
}
@media screen and (max-width: 1024px) {
    .top .first-view {
        padding: 2rem 0;
        background-position: 80% center;
    }
    .top .first-view .content {
        max-width: unset;
    }
}
@media screen and (max-width: 767px) {
    .top .first-view .content > p {
        font-size: 1rem;
    }
}

/*-----------------------
info
-------------------------*/
.top .info .inner {
    max-width: 865px;
    margin: 0 auto;
}
.top .info ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: 37px;
}
.top .info ul > li > a {
    text-decoration: none;
    transition: all .3s;
}
.top .info ul > li > a::after {
    display: none!important;
}
.top .info ul > li > a .head {
    display: flex;
    align-items: center;
    gap: 14px;
}
.top .info ul > li > a .head .label {
    padding: 4px 28px;
    height: 28.214px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-white);
    border-radius: 4px;
    background: var(--color-red1-dark1);
}
.top .info ul > li > a .head .label.event {
    background: var(--color-red1-dark1);
}
.top .info ul > li > a .head .label.news {
    background: var(--color-red1-tint2);
}
.top .info ul > li > a .head .label.info {
    background: var(--color-red1-tint3);
}
.top .info ul > li > a .head .label.article {
    background: var(--color-orange2);
}
.top .info ul > li > a .head .date {
    color: var(--color-gray4);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.92;
    letter-spacing: 0.7px;
}
.top .info ul > li > a > p {
    margin-top: 20px;
    color: var(--color-gray6);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.77;
    letter-spacing: 1.44px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    transition: all .3s;
}
.top .info ul > li > a:hover {
    opacity: .8;
}
.top .info ul > li > a:hover > p {
    text-decoration: none;
}

.top .info .link-box {
    margin-top: 20px;
    text-align: right;
}
.top .info .link-box .more {
    padding-right: 12px;
    position: relative;
    color: var(--color-red1);
}
.top .info .link-box .more::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) rotate(45deg);
    width: 6px;
    height: 6px;
    border-top: 1px solid var(--color-red1);
    border-right: 1px solid var(--color-red1);
}

/*-----------------------
why
-------------------------*/
.top .why {
    width: 100vw;
    margin: 0 0 0 calc(-50vw + 50%);
    background: var(--color-gray1);
}
@media screen and (max-width: 1305px) {
    .top .why .inner {
        padding: 0 15px;
    }
}

.top .why .content-block > ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
}
.top .why .content-block > ul > li {
    padding: 37px;
    background: var(--color-white);
    border-radius: 20px;
    border: 1px solid var(--color-gray2);
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.10);
}
.top .why .content-block > ul > li .image-box {
    max-width: 92px;
}
.top .why .content-block > ul > li > h3 {
    margin-top: 30px;
    color: var(--color-gray6);
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1.2px;
}
.top .why .content-block > ul > li > p {
    margin-top: 16px;
    color: var(--color-gray6);
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.77;
    letter-spacing: 1.44px;
}

@media screen and (max-width: 1024px) {
    .top .why .content-block > ul {
        gap: 1rem;
    }
}
@media screen and (max-width: 767px) {
    .top .why .content-block > ul {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/*-----------------------
future
-------------------------*/

.top .future .content-block .image-text {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 50px;
}
.top .future .content-block .image-text .image-scale-box {
    max-width: 560px;
}
.top .future .content-block .image-text .text-box > h3 {
    color: var(--color-gray6);
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.56;
    letter-spacing: 1.5px;
}
.top .future .content-block .image-text .text-box > p {
    margin-top: 30px;
    color: var(--color-gray6);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 1.44px;
}
.top .future .content-block .image-text .text-box .button-white {
    margin: 60px 0 0 auto;
}

.top .future .content-block .value {
    margin-top: 50px;
}
.top .future .content-block .value > h3 {
    width: 444px;
    margin: 0 auto;
    padding-bottom: 40px;
    position: relative;
    border-bottom: 2px solid var(--color-red1);
    color: var(--color-gray6);
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.56;
    letter-spacing: 1.5px;
}
.top .future .content-block .value > h3::after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
    height: 32px;
    background: url(/-/media/healthcare/image/top/value_h3_after.png) no-repeat center / contain;
}
.top .future .content-block .value > ul {
    max-width: 915px;
    margin: 60px auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
}
.top .future .content-block .value > ul > li .image-box {
    max-width: 156px;
}
.top .future .content-block .value > ul > li > h4 {
    margin-top: 30px;
    color: var(--color-gray6);
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.9px;
}
.top .future .content-block .value > ul > li > p {
    margin-top: 30px;
    color: var(--color-gray6);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.92;
    letter-spacing: 0.7px;
}

@media screen and (max-width: 1024px) {
    .top .future .content-block .image-text {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .top .future .content-block .value > ul {
        gap: 1rem;
    }
    .top .future .content-block .value > ul > li > h4 {
        height: 54px;
    }
}
@media screen and (max-width: 767px) {
    .top .future .content-block .image-text {
        gap: 1rem;
    }
    .top .future .content-block .image-text .text-box > h3 {
        margin-top: 2rem;
        font-size: 1.4rem;
    }
    .top .future .content-block .image-text .text-box .button-white {
        margin: 2rem auto 0;
    }

    .top .future .content-block .value > h3 {
        width: 230px;
        padding-bottom: 1rem;
        font-size: 1.6rem;
        text-align: center;
    }
    .top .future .content-block .value > ul {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .top .future .content-block .value > ul > li > h4 {
        height: unset;
    }
    .top .future .content-block .value > ul > li > p {
        margin-top: 1rem;
    }
}

/*-----------------------
feature
-------------------------*/
.top .feature {
    width: 100vw;
    margin: 0 0 0 calc(-50vw + 50%);
    background: var(--color-gray1);
}
@media screen and (max-width: 1305px) {
    .top .feature .inner {
        padding: 0 15px;
    }
}

.top .feature .content-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
}

.top .feature .content-block .image-text {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 50px;
}
.top .feature .content-block .image-text .image-box {
    max-width: 560px;
}

.top .feature .content-block .text-image {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 50px;
}
.top .feature .content-block .text-image .image-box {
    max-width: 560px;
}

.top .feature .content-block .text-box > h3 {
    color: var(--color-gray6);
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.56;
    letter-spacing: 1.5px;
}
.top .feature .content-block .text-box > p {
    color: var(--color-gray6);
    margin-top: 20px;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 1.44px;
}
.top .feature .content-block .text-box > h4 {
    color: var(--color-gray6);
    margin-top: 40px;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: 1.44px;
}
.top .feature .content-block .text-box > ul > li {
    color: var(--color-gray6);
    padding-left: 18px;
    position: relative;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 1.44px;
}
.top .feature .content-block .text-box > ul > li::before {
    content: "・";
    position: absolute;
    top: 0;
    left: 0;
}
.top .feature .content-block .text-box .button-white {
    margin: 40px 0 0 auto;
}

@media screen and (max-width: 1024px) {
    .top .feature .content-block .image-text {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .top .feature .content-block .text-image {
        display: flex;
        flex-direction: column-reverse;
        gap: 1rem;
    }
}

@media screen and (max-width: 767px) {
    .top .feature .content-block {
        gap: 5rem;
    }
    .top .feature .content-block .text-box > h3 {
        margin-top: 1rem;
        font-size: 1.6rem;
    }
    .top .feature .content-block .text-box .button-white {
        margin: 2rem auto 0;
    }
}

/*-----------------------
case-study
-------------------------*/
.top .case-study .content-block .card-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 37px;
}
.top .case-study .content-block .card-list > li {
    overflow: hidden;
    border-radius: 20px;
    background: var(--color-white);
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.10);
    position: relative;
}
.top .case-study .content-block .card-list > li .text-box {
    padding: 23px 23px 46px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.top .case-study .content-block .card-list > li .text-box > h3 {
    color: var(--color-gray6);
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.9px;
}
.top .case-study .content-block .card-list > li .text-box > h4 {
    color: var(--color-gray6);
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.4;
}
.top .case-study .content-block .card-list > li .text-box > p {
    color: var(--color-gray6);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.92;
    letter-spacing: 0.7px;
}
.top .case-study .content-block .card-list > li > .link-box {
    position: absolute;
    bottom: 23px;
    right: 23px;
}
.top .case-study .content-block .card-list > li > .link-box > a {
    padding-right: 10px;
    position: relative;
}
.top .case-study .content-block .card-list > li > .link-box > a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) rotate(45deg);
    width: 6px;
    height: 6px;
    border-top: 1px solid var(--color-red1);
    border-right: 1px solid var(--color-red1);
}

@media screen and (max-width: 1024px) {
    .top .case-study .content-block .card-list {
        gap: 1rem;
    }
    .top .case-study .content-block .card-list > li .text-box {
        padding-bottom: 60px;
    }
}

@media screen and (max-width: 767px) {
    .top .case-study .content-block .card-list {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.top .case-study .content-block > h2 {
    margin-top: 60px;
    margin-bottom: 50px;
    color: var(--color-gray6);
    text-align: center;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.56;
    letter-spacing: 1.5px;
}

.top .case-study .content-block .download-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}
.top .case-study .content-block .download-list > li {
    display: grid;
    grid-template-columns: 186px 1fr;
    border-radius: 20px;
    background: var(--color-white);
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.12);
    overflow: hidden;
}
.top .case-study .content-block .download-list > li .image-box {
    width: 100%;
    height: 100%;
    background: var(--color-gray1);
}
.top .case-study .content-block .download-list > li .text-box {
    padding: 30px 30px 80px;
    position: relative;
}
.top .case-study .content-block .download-list > li .text-box .content .label {
    display: inline-block;
    padding: 0 24px;
    border: 1px solid var(--color-red1);
    color: var(--color-gray6);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 2.25;
    letter-spacing: 0.6px;
}
.top .case-study .content-block .download-list > li .text-box .content > h3 {
    margin-top: 20px;
    color: var(--color-gray6);
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.9px;
}
.top .case-study .content-block .download-list > li .text-box .content .text {
    margin-top: 10px;
    color: var(--color-gray6);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.92;
    letter-spacing: 0.7px;
}
.top .case-study .content-block .download-list > li .text-box .link-box {
    position: absolute;
    bottom: 30px;
    right: 30px;
}
.top .case-study .content-block .download-list > li .text-box .link-box > a {
    padding-right: 10px;
    position: relative;
}
.top .case-study .content-block .download-list > li .text-box .link-box > a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) rotate(45deg);
    width: 6px;
    height: 6px;
    border-top: 1px solid var(--color-red1);
    border-right: 1px solid var(--color-red1);
}

@media screen and (max-width: 1024px) {
    .top .case-study .content-block .download-list {
        max-width: 500px;
        margin: 0 auto;
        grid-template-columns: 1fr;
    }
    .top .case-study .content-block .download-list > li {
        grid-template-columns: 1fr;
    }
    .top .case-study .content-block .download-list > li .image-box {
        height: 150px;
    }
}

/*========================================================================================
VISION
==========================================================================================*/

.vision .first-view {
    background: url(/-/media/healthcare/image/vision_first_view_bg.png) no-repeat center / cover;
}
.vision .first-view .inner {
    max-width: var(--site-width);
}
@media screen and (max-width: 1024px) {
    .vision .first-view {
        background-position: 80% center;
    }
}

.vision .content-block p {
    color: var(--color-gray6);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 1.44px;
}

/* section02~04 */
.vision #section02,
.vision #section04 {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: var(--color-gray1);
}
.vision #section02 .content-block,
.vision #section03 .content-block,
.vision #section04 .content-block {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 50px;
}
.vision #section02 .content-block .text-box,
.vision #section03 .content-block .text-box,
.vision #section04 .content-block .text-box {
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
}
.vision #section02 .content-block .text-box > h2,
.vision #section03 .content-block .text-box > h2,
.vision #section04 .content-block .text-box > h2 {
    color: var(--color-gray6);
    font-size: 34px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.44;
    letter-spacing: 1.6px;
}
.vision #section02 .content-block .text-box > div > h3,
.vision #section03 .content-block .text-box > div > h3,
.vision #section04 .content-block .text-box > div > h3 {
    color: var(--color-gray6);
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.56;
    letter-spacing: 1.5px;
}
.vision #section02 .content-block .text-box > div > p,
.vision #section03 .content-block .text-box > div > p,
.vision #section04 .content-block .text-box > div > p {
    margin-top: 20px;
    color: var(--color-gray6);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 1.44px;
}
.vision #section04 .content-block .text-box > div > h4 {
    margin-top: 20px;
    color: var(--color-gray6);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 1.44px;
}
.vision #section04 .content-block .text-box > div > ul > li {
    margin-left: 18px;
    position: relative;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 1.44px;
}
.vision #section04 .content-block .text-box > div > ul > li::before {
    content: "・";
    position: absolute;
    top: 0;
    left: -18px;
}

.vision #section02 .content-block .image-box,
.vision #section03 .content-block .image-box,
.vision #section04 .content-block .image-box {
    max-width: 583px;
}

.vision #section04 .content-block .image-scale-box {
    max-width: 583px;
}

.vision #section02 .image-block,
.vision #section03 .image-block,
.vision #section04 .image-block {
    margin-top: 60px;
}
.vision #section02 .image-block .image-box,
.vision #section03 .image-block .image-box,
.vision #section04 .image-block .image-box {
    max-width: 843px;
}

@media screen and (max-width: 1305px) {
    .vision #section02 .inner,
    .vision #section04 .inner {
        padding: 0 15px;
    }
}
@media screen and (max-width: 1024px) {
    .vision #section02 .content-block,
    .vision #section03 .content-block,
    .vision #section04 .content-block {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}
@media screen and (max-width: 767px) {
    .vision #section02 .image-block,
    .vision #section03 .image-block,
    .vision #section04 .image-block {
        margin-top: 2rem;
    }
    .vision #section02 .content-block .text-box > h2,
    .vision #section03 .content-block .text-box > h2,
    .vision #section04 .content-block .text-box > h2 {
        font-size: 1.8rem;
    }
    .vision #section02 .content-block .text-box > div > h3,
    .vision #section03 .content-block .text-box > div > h3,
    .vision #section04 .content-block .text-box > div > h3 {
        font-size: 1.6rem;
    }
}

/* section05 */
.vision #section05 .content-block {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr auto;
    gap: 50px;
}
.vision #section05 .content-block .image-box {
    max-width: 583px;
}
.vision #section05 .content-block .text-box > h2 {
    margin-bottom: 50px;
    color: var(--color-gray6);
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.56;
    letter-spacing: 1.5px;
}
.vision #section05 .content-block .text-box > p {
    color: var(--color-gray6);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.77;
    letter-spacing: 1.44px;
}
@media screen and (max-width: 1024px) {
    .vision #section05 .content-block {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .vision #section05 .content-block .text-box > h2 {
        margin-bottom: 1rem;
    };
}

/* section06 */
.vision #section06 .inner > h2 {
    margin-bottom: 50px;
    color: var(--color-gray6);
    text-align: center;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.56;
    letter-spacing: 1.5px;
}
.vision #section06 .button-white-red {
    margin: 0 auto;
    padding: .5rem 2rem .5rem 1rem;
    max-width: 669px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 200px;
    border: 1px solid var(--color-red2);
    background: var(--color-white);
    position: relative;
    text-decoration: none;
    color: var(--color-gray6);
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.9px;
    transition: all .3s;
}
.vision #section06 .button-white-red::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.5rem;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--color-gray6);
    border-right: 2px solid var(--color-gray6);
    transition: all .3s;
}
.vision #section06 .button-white-red:hover {
    background: var(--color-red2);
    color: var(--color-white);
}
.vision #section06 .button-white-red:hover::after {
    border-top: 2px solid var(--color-white);
    border-right: 2px solid var(--color-white);
}

.vision #section06 .inner > ul {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.vision #section06 .inner > ul > li {
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid var(--color-gray2);
    background: var(--color-white);
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.12);
    position: relative;
}
.vision #section06 .inner > ul > li .text-box {
    padding: 48px;
}
.vision #section06 .inner > ul > li .text-box > h3 {
    color: var(--color-gray6);
    text-align: center;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.56;
    letter-spacing: 1.5px;
}
.vision #section06 .inner > ul > li .text-box > p {
    margin-top: 30px;
    padding-bottom: 100px;
    color: var(--color-gray6);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.77;
    letter-spacing: 1.44px;
}
.vision #section06 .inner > ul > li .text-box .button-white-red {
    position: absolute;
    bottom: 48px;;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - calc(48px * 2));
    height: 2.2rem;
}
.vision #section06 .inner > ul > li .text-box .button-white-red::after {
    right: 20px;
}
@media screen and (max-width: 1024px) {
    .vision #section06 .inner > ul {
        max-width: 540px;
        margin: 50px auto 0;
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}
@media screen and (max-width: 767px) {
    .vision #section06 .inner > ul > li .text-box {
        padding: 1rem;
    }
    .vision #section06 .inner > ul > li .text-box > h3 {
        font-size: 1.8rem;
    }
}

/*========================================================================================
VISION詳細ページ
==========================================================================================*/

.vision-detail .inner {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
}

.vision-detail h1 {
    padding-left: 40px;
    position: relative;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1.8px;
}
.vision-detail h1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    border-radius: 50px;
    background: var(--color-red1);
}

.vision-detail h2 {
    padding-bottom: 40px;
    position: relative;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.56;
    letter-spacing: 1.5px;
}
.vision-detail h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 108px;
    height: 2px;
    border-radius: 50px;
    background: var(--color-red1);
}

.vision-detail h3 {
    color: var(--color-red1-dark1);
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.7;
}

.vision-detail p {
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 1.44px;
}

.vision-detail p.note {
    padding-left: 16px;
    font-size: 14px;
}

.vision-detail a {
    overflow-wrap: break-word;
    word-break: break-word;
}

.vision-detail .name {
    font-weight: 700;
}

.vision-detail .image-box > p {
    margin-top: 10px;
    text-align: center;
    font-size: .9rem;
    line-height: 1.4;
}
.vision-detail .text-image {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
}
.vision-detail .image-text {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
}

@media screen and (max-width: 767px) {
    .vision-detail h1 {
        padding-left: 1rem;
        font-size: 1.4rem;
    }
    .vision-detail h2 {
        font-size: 1.2rem;
        padding-bottom: 1rem;
    }
    .vision-detail h2::after {
        width: 4rem;
    }
    .vision-detail h3 {
        font-size: 1rem;
    }
    .vision-detail p {
        font-size: 1rem;
    }
    .vision-detail .note {
        font-size: .9rem;
    }
    .vision-detail .image-box > p {
        font-size: .8rem;
    }
    .vision-detail .text-image {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 1rem;
    }
    .vision-detail .image-text {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column-reverse;
        gap: 1rem;
    }
}

/*========================================================================================
企業ページ
==========================================================================================*/

.business .first-view {
    background: url(/-/media/healthcare/image/business_first_view_bg.png) no-repeat center / cover;
}
@media screen and (max-width: 1024px) {
    .business .first-view {
        background-position: 80% center;
    }
}

/*========================================================================================
ライフサイエンス関連ページ
==========================================================================================*/

.life-science .first-view {
    background: url(/-/media/healthcare/image/life_science_first_view_bg.png) no-repeat center / cover;
}
@media screen and (max-width: 1024px) {
    .life-science .first-view {
        background-position: 80% center;
    }
}

/*========================================================================================
介護・障がい・医療・保育ページ
==========================================================================================*/

.topics {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: var(--color-gray1);
}
.topics ul {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.topics ul > li {
    padding: 24px;
    border-radius: 20px;
    background: var(--color-white);
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.10);
}
.topics ul > li .head {
    display: flex;
    align-items: center;
    gap: 14px;
}
.topics ul > li .head .label {
    padding: 4px 30px;
    border-radius: 4px;
    background: var(--color-red1-tint3);
    color: var(--color-white);
}
.topics ul > li .head .date {
    color: var(--color-gray4);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: 0.7px;
}
.topics ul > li .body {
    margin-top: 20px;
}
.topics ul > li .body > a {
    color: var(--color-black);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.77;
    letter-spacing: 1.44px;
}
.topics ul > li .link-area {
    margin-top: 60px;
    text-align: right;
}
.topics ul > li .link-area > a {
    padding-right: 8px;
    position: relative;
}
.topics ul > li .link-area > a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-top: 1px solid var(--color-red1);
    border-right: 1px solid var(--color-red1);
}

/*========================================================================================
自治体ページ
==========================================================================================*/

.local-government .first-view {
    background: url(/-/media/healthcare/image/local_government_first_view_bg.png) no-repeat center / cover;
}
@media screen and (max-width: 1024px) {
    .local-government .first-view {
        background-position: 80% center;
    }
}

/*========================================================================================
導入事例ページ（ほぼリセット）
==========================================================================================*/

.case .CasePanel {
    margin-top: 30px;
}

.case div.PageTitleStyle1 h1 {
    color: var(--color-black);
}

.case h2 {
    padding: 0;
    color: var(--color-black);
}
.case h2::before,
.case h2::after {
    background: none;
}

.case p {
    color: var(--color-black);
}

.case .CasePanel li {
    background: var(--color-white);
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.10);
}

.case .CasePanel li:after {
    content: '';
    background: url(/-/media/healthcare/image/icon/icon_arrow_right.png) no-repeat center / contain;
}

.case .InnerLink li {
    border: 2px solid var(--color-black);
}

.case .InnerLink li a {
    color: var(--color-black);
    background: url(/-/media/healthcare/image/icon/icon_arrow_down.png) no-repeat right 6px center;
}

#Contents .case a:link *,
#Contents .case a:visited * {
    color: var(--color-black);
}

/*========================================================================================
TOPICSページ（ほぼリセット）
==========================================================================================*/

.topics-list .PageTitleStyle1 .Inner {
    max-width: var(--site-width);
    margin: 0 auto;
}

.topics-list .topicsList .Inner {
    max-width: 700px;
    margin: 0 auto;
}

.topics-list div.PageTitleStyle1 h1 {
    color: var(--color-black);
    text-align: left;
}

.topics-list h1::before,
.topics-list h1::after {
    background: none;
}

.topics-list h2 {
    padding: 15px 0;
    margin-bottom: 30px;
    color: var(--color-black);
}
.topics-list h2::before,
.topics-list h2::after {
    background-color: var(--color-black);
}

.topics-list .InnerLink li {
    margin-right: 15px;
    margin-bottom: 10px;
    border: 2px solid var(--color-black);
}

.topics-list .InnerLink li a {
    min-width: 121px;
    color: var(--color-black);
    background: url(/-/media/healthcare/image/icon/icon_arrow_down.png) no-repeat right 6px center;
}

.topics-list .TopicsList dt {
    color: var(--color-black);
}

.topics-list .TopicsList dd ul li a:link,
.topics-list .TopicsList dd ul li a:visited {
    color: var(--color-black);
    font-weight: 400;
}

.topics-list .TopicsList dt.Event:before {
    background-color: var(--color-red2);
}

.topics-list .TopicsList dt.Info:before {
    background-color: var(--color-black);
}

.topics-list .TopicsList dt.News:before {
    background-color: var(--color-blue3);
}

.topics-list.  .TopicsList dt.Special:befor{
    background-color: var(--color-orange1);
}

/*========================================================================================
TOPICS詳細ページ（テンプレート）
==========================================================================================*/

.topics-detail .inner {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 80px;
}

.topics-detail h1 {
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.42;
    letter-spacing: 2.1px;
}

.topics-detail h2 {
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.44;
    letter-spacing: 1.8px;
}

.topics-detail h3 {
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.56;
    letter-spacing: 1.5px;
}

.topics-detail h4 {
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.41;
    letter-spacing: 1.2px;
}

.topics-detail p {
    color: var(--color-gray6);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 1.44px;
}

.topics-detail p.bg-gray {
    padding: 30px;
    border-radius: 20px;
    background: var(--color-gray1);
}

.topics-detail .index {
    padding: 30px;
    border: 1px solid var(--color-gray3);
}
.topics-detail .index .title {
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.77;
    letter-spacing: 1.44px;
}
.topics-detail .index > ul {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
}
.topics-detail .index > ul > li > ul {
    padding-left: 20px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
}
.topics-detail .index > ul > li > ul > li > ul {
    padding-left: 40px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
}
.topics-detail .index a {
    color: var(--color-black);
    text-decoration: none;
}
.topics-detail .index a:hover {
    text-decoration: underline;
}

.topics-detail .image-box > p {
    margin-top: 10px;
    font-size: .9rem;
    text-align: center;
}

.topics-detail .image-text {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 30px;
}

.topics-detail .text-image {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 30px;
}

.topics-detail .inner > ul {
    list-style: none;
}
.topics-detail .inner > ul > li {
    padding-left: 22px;
    position: relative;
    color: var(--color-gray6);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 1.44px;
}
.topics-detail .inner > ul > li::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    background: var(--color-gray6);
}

.topics-detail .inner > ol {
    padding: 0;
    margin: 0;
    list-style-position: inside;
}
.topics-detail .inner > ol > li {
    color: var(--color-gray6);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 1.44px;
}

@media screen and (max-width: 767px) {
    .topics-detail h1 {
        font-size: 1.8rem;
    }

    .topics-detail h2 {
        font-size: 1.6rem;
    }

    .topics-detail h3 {
        font-size: 1.4rem;
    }

    .topics-detail h4 {
        font-size: 1.2rem;
    }

    .topics-detail p.bg-gray {
        padding: 1.5rem;
    }

    .topics-detail .index {
        padding: 1rem;
    }

    .topics-detail p {
        font-size: 1rem;
    }

    .topics-detail .image-box > p {
        font-size: .8rem;
    }

    .topics-detail .image-text {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column-reverse;
        gap: 1rem;
    }

    .topics-detail .text-image {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 1rem;
    }
}

/*========================================================================================
画像拡大パーツ
==========================================================================================*/

/* image-scale-box */
.image-scale-box {
    width: fit-content;
    margin: 0 auto;
    padding-bottom: 32px;
    position :relative;
    cursor: pointer;
}
.image-scale-box:hover {
    opacity: .8;
}
.image-scale-box::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(50% - 94px);
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    background-color: var(--color-gray4);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cg%3E%3Cpath d='M332.998 291.918c52.2-71.895 45.941-173.338-18.834-238.123c-71.736-71.728-188.468-71.728-260.195 0c-71.746 71.745-71.746 188.458 0 260.204c64.775 64.775 166.218 71.034 238.104 18.844l14.222 14.203l40.916-40.916L332.998 291.918zM278.488 278.333c-52.144 52.134-136.699 52.144-188.852 0c-52.152-52.153-52.152-136.717 0-188.861c52.154-52.144 136.708-52.144 188.852 0c52.152 52.144 52.152 136.708 0 188.861z'/%3E%3Cpath d='M109.303 119.216c-27.078 34.788-29.324 82.646-6.756 119.614c2.142 3.489 6.709 4.603 10.208 2.46c3.49-2.142 4.594-6.709 2.462-10.198v.008c-19.387-31.7-17.45-72.962 5.782-102.771c2.526-3.228 1.946-7.898-1.292-10.405C116.48 115.399 111.811 115.979 109.303 119.216z'/%3E%3Cpath d='M501.499 438.591L363.341 315.178l-47.98 47.98l123.403 138.168c12.548 16.234 35.144 13.848 55.447-6.456C514.505 474.576 517.743 451.138 501.499 438.591z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cg%3E%3Cpath d='M332.998 291.918c52.2-71.895 45.941-173.338-18.834-238.123c-71.736-71.728-188.468-71.728-260.195 0c-71.746 71.745-71.746 188.458 0 260.204c64.775 64.775 166.218 71.034 238.104 18.844l14.222 14.203l40.916-40.916L332.998 291.918zM278.488 278.333c-52.144 52.134-136.699 52.144-188.852 0c-52.152-52.153-52.152-136.717 0-188.861c52.154-52.144 136.708-52.144 188.852 0c52.152 52.144 52.152 136.708 0 188.861z'/%3E%3Cpath d='M109.303 119.216c-27.078 34.788-29.324 82.646-6.756 119.614c2.142 3.489 6.709 4.603 10.208 2.46c3.49-2.142 4.594-6.709 2.462-10.198v.008c-19.387-31.7-17.45-72.962 5.782-102.771c2.526-3.228 1.946-7.898-1.292-10.405C116.48 115.399 111.811 115.979 109.303 119.216z'/%3E%3Cpath d='M501.499 438.591L363.341 315.178l-47.98 47.98l123.403 138.168c12.548 16.234 35.144 13.848 55.447-6.456C514.505 474.576 517.743 451.138 501.499 438.591z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}
.image-scale-box::after {
    content: "クリックして拡大できます";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 170px;
    font-size: 14px;
    line-height: 1;
    color: var(--color-gray4);
}
.image-scale-box > img {
    margin: 0 auto;
    display: block;
    max-width: 100%;
    height: auto;
}

/* image-scale-modal */
#image-scale-modal {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

#image-scale-modal .inner {
    max-height: 80vh;
    overflow-y: auto;
}

#image-scale-modal.active {
    opacity: 1;
    pointer-events: auto;
}

#image-scale-modal .modal-content {
    padding: 20px;
    position: relative;
    scrollbar-gutter: stable;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10);
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}

#image-scale-modal.active .modal-content {
    transform: translateY(0);
}

#image-scale-modal .modal-content .top-close-box {
    margin-bottom: 30px;
    text-align: right;
}
#image-scale-modal .modal-content .top-right-close {
    padding-right: 25px;
    color: var(--color-gray4);
    font-size: 18px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s;
}

#image-scale-modal .modal-content .top-right-close::after {
    content: "";
    position: absolute;
    top: calc(50% + 1px);
    right: 0;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: var(--color-gray4);

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 29'%3E%3Cpath d='M16.2123 13.7969L22.4209 20.0055L20.3507 22.0757L14.1421 15.8671L7.9335 22.0757L5.86328 20.0055L12.0719 13.7969L6.20855 7.93354L8.27877 5.86332L14.1421 11.7266L20.0054 5.86332L22.0756 7.93354L16.2123 13.7969Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 29'%3E%3Cpath d='M16.2123 13.7969L22.4209 20.0055L20.3507 22.0757L14.1421 15.8671L7.9335 22.0757L5.86328 20.0055L12.0719 13.7969L6.20855 7.93354L8.27877 5.86332L14.1421 11.7266L20.0054 5.86332L22.0756 7.93354L16.2123 13.7969Z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;

    transition: all 0.3s;
}

#image-scale-modal .modal-content .top-right-close:hover {
    text-decoration: none;
    color: var(--color-red1-dark1);
    opacity: .8;
}

#image-scale-modal .modal-content .top-right-close:hover::after {
    background-color: var(--color-red1-dark1);
    opacity: .8;
}

#image-scale-modal .modal-content > img {
    max-width: 100%;
}

#image-scale-modal .modal-content .button-box {
    margin-top: 30px;
}

#image-scale-modal .modal-content .button-box .button-modal-close {
    margin: 0 auto;
    width: 224px;
    height: 50px;
    background: #fff;
    color: #333;
    border: 1px solid #333;
    border-radius: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

#image-scale-modal .modal-content .button-box .button-modal-close:hover {
    background: #efefef;
    text-decoration: none;
    opacity: .8;
}

#image-scale-modal .modal-content .button-box .button-modal-close::after {
    content: "\00D7";
    position: absolute;
    top: calc(50% - 1px);
    right: 24px;
    translate: 0 -50%;
    font-size: 1rem;
    color: #333;
    transition: all 0.3s ease;
}

@media screen and (max-width: 767px) {
    #image-scale-modal .inner {
        width: 100%;
        padding: 0;
    }

    #image-scale-modal .modal-content {
        padding: 1rem;
    }

    #image-scale-modal .modal-content .top-right-close {
        font-size: 1rem;
    }
}