/* ---------------------------------------------
*   Custom Properties
--------------------------------------------- */
:root {
    --design-width: 1400;
    --contents-width: 1200;
    --contents-width-small: 1000;
    --contents-side-padding: 27;
    --minwidth: 320;
    --fixed-header-height: 124;
    --root-fz: 16;
    --line-height: 1.5;
    --hover-opacity-ratio: 0.6;
    --hover-duration: .3s;
    --color-base-1: #595757;
    --color-base-1-rgb: 89, 87, 87;
    --color-black-1: #000;
    --color-black-1-rgb: 0, 0, 0;
    --color-gray-1: #d4d4d4;
    --color-gray-1-rgb: 212, 212, 212;
    --color-gray-2: #cccccc;
    --color-gray-2-rgb: 204, 204, 204;
    --color-gray-3: #4f4f4f;
    --color-gray-3-rgb: 79, 79, 79;
    --color-gray-4: #eaeaea;
    --color-gray-4-rgb: 234, 234, 234;
    --color-gray-5: #f6f6f6;
    --color-gray-5-rgb: 246, 246, 246;
    --color-gray-6: #dedede;
    --color-gray-6-rgb: 222, 222, 222;
    --color-gray-7: #999999;
    --color-gray-7-rgb: 153, 153, 153;
    --color-white-1: #fff;
    --color-white-1-rgb: 255, 255, 255;
    --color-white-2: #fdeeec;
    --color-white-2-rgb: 253, 238, 236;
    --color-pink-1: #f5bad4;
    --color-pink-1-rgb: 245, 186, 212;
    --color-pink-2: #ff6c8f;
    --color-pink-2-rgb: 255, 108, 143;
    --color-pink-3: #ff4872;
    --color-pink-3-rgb: 255, 72, 114;
    --color-pink-4: #ff84a0;
    --color-pink-4-rgb: 255, 132, 160;
    --color-pink-5: #e799ba;
    --color-pink-5-rgb: 231, 153, 186;
    --color-pink-6: #f195be;
    --color-pink-6-rgb: 241, 149, 190;
    --color-pink-7: #fef5f9;
    --color-pink-7-rgb: 254, 245, 249;
    --color-pink-8: #e96da0;
    --color-pink-8-rgb: 233, 109, 160;
    --color-pink-9: #ffbbca;
    --color-pink-9-rgb: 255, 187, 202;
    --color-pink-10: #ff7e9f;
    --color-pink-10-rgb: 255, 126, 159;
    --color-pink-11: #f5b8d4;
    --color-pink-11-rgb: 245, 184, 212;
    --color-pink-12: #ed82b1;
    --color-pink-12-rgb: 237, 130, 177;
    --color-red-1: #ff6868;
    --color-red-1-rgb: 255, 104, 104;
    --color-red-2: #ed9b97;
    --color-red-2-rgb: 237, 155, 151;
    --color-green-1: #40c6a3;
    --color-green-1-rgb: 64, 198, 163;
    --color-green-2: #e3ffde;
    --color-green-2-rgb: 227, 255, 222;
    --color-green-3: #bcf5b1;
    --color-green-3-rgb: 188, 245, 177;
    --color-green-4: #23ac38;
    --color-green-4-rgb: 35, 172, 56;
    --color-green-5: #eeffeb;
    --color-green-5-rgb: 238, 255, 235;
    --color-yellow-1: #ffffd1;
    --color-yellow-1-rgb: 255, 255, 209;
    --color-yellow-2: #fff9e2;
    --color-yellow-2-rgb: 255, 249, 226;
    --color-orange-1: #ffa364;
    --color-orange-1-rgb: 255, 163, 100;
    --color-orange-2: #fef1ee;
    --color-orange-2-rgb: 254, 241, 238;
    --color-orange-3: #ff9600;
    --color-orange-3-rgb: 255, 150, 0;
    --color-orange-4: #fff3e6;
    --color-orange-4-rgb: 255, 243, 230;
    --color-orange-5: #fde8d0;
    --color-orange-5-rgb: 253, 232, 208;
    --color-orange-6: #fffaf4;
    --color-orange-6-rgb: 255, 250, 244;
    --color-orange-7: #ffedd4;
    --color-orange-7-rgb: 255, 237, 212;
    --color-blue-1: #417be5;
    --color-blue-1-rgb: 65, 123, 229;
    --color-blue-2: #7ac7f0;
    --color-blue-2-rgb: 122, 199, 240;
    --color-blue-3: #0091a7;
    --color-blue-3-rgb: 0, 145, 167;
    --color-blue-4: #e8f7ff;
    --color-blue-4-rgb: 232, 247, 255;
    --color-blue-5: #f6fcff;
    --color-blue-5-rgb: 246, 252, 255;
    --color-blue-6: #008EAB;
    --color-blue-6-rgb: 0, 142, 171;
    --color-purple-1: #b56dcf;
    --color-purple-1-rgb: 181, 109, 207;
    --color-purple-2: #b378ca;
    --color-purple-2-rgb: 179, 120, 202;
    --color-purple-3: #f9ebff;
    --color-purple-3-rgb: 249, 235, 255;
    --color-purple-4: #f1ddfb;
    --color-purple-4-rgb: 241, 221, 251;
    --color-purple-5: #f8ecff;
    --color-purple-5-rgb: 248, 236, 255;
    --color-purple-6: #fdf9ff;
    --color-purple-6-rgb: 253, 249, 255;
    --color-brown-1: #d2ccb3;
    --color-brown-1-rgb: 210, 204, 179;
    --color-brown-2: #faf8f5;
    --color-brown-2-rgb: 250, 248, 245;
    --color-brown-3: #8e5301;
    --color-brown-3-rgb: 142, 83, 1;
    --color-haikai-1: #ff8fbf;
    --color-haikai-1-rgb: 255, 143, 191;
    --color-haikai-2: #fedcde;
    --color-haikai-2-rgb: 254, 220, 222;
    --color-haikai-3: #fff8a0;
    --color-haikai-3-rgb: 255, 248, 160;
    --color-haikai-4: #fee7e8;
    --color-haikai-4-rgb: 254, 231, 232;
    --color-haikai-5: #a69ed3;
    --color-haikai-5-rgb: 166, 158, 211;
    --color-haikai-6: #262626;
    --color-haikai-6-rgb: 38, 38, 38;
    --ff-root: "Zen Maru Gothic", sans-serif;
    --ff-m: "M PLUS 1p", sans-serif;
    --ff-Rounded: "M PLUS Rounded 1c", sans-serif;
}
@media screen and (max-width: 1024px) {
    :root {
        --fixed-header-height: 62;
    }
}
@media screen and (max-width: 767px) {
    :root {
        --design-width: 750;
        --contents-width: 720;
        --contents-side-padding: 15;
        --minwidth: 320;
        --root-fz: 16;
        --line-height: 1.5;
    }
}

/* ---------------------------------------------
*   Universal selector
--------------------------------------------- */
/* ---------------------------------------------
*   header, footer
--------------------------------------------- */
header,
footer {
    color: var(--color-base-1);
    font-size: calc(var(--root-fz) * 1px);
    font-family: var(--ff-root);
    -webkit-text-size-adjust: 100%;
    line-height: var(--line-height);
    /* ---------------------------------------------
    *   <a> tag
    --------------------------------------------- */
    /* ---------------------------------------------
    *   <img> tag
    --------------------------------------------- */
    /* ---------------------------------------------
    *   <hr> tag as anchor target
    --------------------------------------------- */
    /* ---------------------------------------------
    *   base reset style
    --------------------------------------------- */
}
header *, header *::before, header *::after,
footer *,
footer *::before,
footer *::after {
    box-sizing: border-box;
}
header a,
footer a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
header img,
footer img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}
header hr[id^=anchor-],
footer hr[id^=anchor-] {
    display: block;
    width: auto;
    height: 0;
    padding: calc(var(--fixed-header-height) * 1px) 0 0 0;
    border: 0;
    margin: calc(var(--fixed-header-height) * -1px) 0 0 0;
    background: 0;
    pointer-events: none;
}
header ol, header ul,
footer ol,
footer ul {
    list-style: none;
}
header a img,
footer a img {
    border: none;
}
header article, header aside, header details, header figcaption, header figure, header footer, header header, header hgroup, header main, header menu, header nav, header section, header summary,
footer article,
footer aside,
footer details,
footer figcaption,
footer figure,
footer footer,
footer header,
footer hgroup,
footer main,
footer menu,
footer nav,
footer section,
footer summary {
    display: block;
}

body {
    margin: 0;
}

/* ---------------------------------------------
*   l-header
--------------------------------------------- */
.l-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0 calc(var(--contents-side-padding) * 1px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background: var(--color-white-1);
    height: calc(var(--fixed-header-height) * 1px);
    border-bottom: 4px solid var(--color-pink-5);
}
@media screen and (max-width: 1024px) {
    .l-header {
        border-width: calc(4 / 2 * 1px);
    }
}
.l-header-logo {
    display: flex;
    width: 170px;
    margin-left: min(46 / var(--design-width) * 100vw, 46px);
}
@media (hover: hover) and (pointer: fine) {
    .l-header-logo {
        transition: opacity var(--hover-duration);
    }
    .l-header-logo:hover {
        opacity: var(--hover-opacity-ratio);
    }
}
@media screen and (max-width: 1250px) {
    .l-header-logo {
        margin-left: 0;
    }
}
@media screen and (max-width: 1024px) {
    .l-header-logo {
        width: calc(188 / 2 * 1px);
        margin-top: -2px;
    }
}
.l-header-logo:focus {
    outline-color: transparent;
}
.l-header-menu-wrap {
    align-self: stretch;
    transition: all ease 0.7s;
}
@media screen and (max-width: 1024px) {
    .l-header-menu-wrap {
        align-items: center;
        background: rgba(var(--color-pink-4-rgb), 0.9);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        max-height: 0;
        overflow: hidden;
        padding: 0 21px;
        position: fixed;
        top: calc(var(--fixed-header-height) * 1px);
        left: 0;
        right: 0;
        bottom: 0;
    }
    .l-header-menu-wrap[aria-hidden=false] {
        max-height: 1000px;
        overflow-y: scroll;
        padding-bottom: 48px;
    }
}
.l-header-menu {
    display: flex;
    align-self: stretch;
    align-items: center;
    gap: min(53 / var(--design-width) * 100vw, 53px);
    height: 100%;
    margin: 0;
}
@media screen and (max-width: 1200px) {
    .l-header-menu {
        gap: calc(20 / var(--design-width) * 100vw);
    }
}
@media screen and (max-width: 1024px) {
    .l-header-menu {
        padding: 0;
        display: block;
        height: auto;
        position: relative;
    }
}
@media screen and (max-width: 1024px) {
    .l-header-close {
        margin-top: 24px;
    }
}
@media screen and (min-width: 1025px) {
    .l-header-buttons {
        flex-shrink: 0;
    }
}
@media screen and (max-width: 1024px) {
    .l-header-buttons {
        display: flex;
        gap: 9px;
        width: auto;
    }
}
@media screen and (min-width: 1025px) {
    .l-header__side {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: min(42 / var(--design-width) * 100vw, 42px);
        height: 100%;
    }
}

.l-header-sub-menu {
    align-items: stretch;
    height: 100%;
}
@media screen and (min-width: 1025px) {
    .l-header-sub-menu:focus-within .l-header-sub-menu__opener {
        border-color: var(--color-pink-3);
        color: var(--color-pink-2);
    }
    .l-header-sub-menu:focus-within .l-header-sub-menu__opener::after {
        transform: translateY(calc(-50% + 2px)) rotate(180deg);
    }
}
.l-header-sub-menu:focus-within .l-header-sub-menu__drawer {
    max-height: 1000px;
}
@media screen and (min-width: 1025px) {
    .l-header-sub-menu:hover .l-header-sub-menu__opener {
        border-color: var(--color-pink-3);
        color: var(--color-pink-2);
    }
    .l-header-sub-menu:hover .l-header-sub-menu__opener::after {
        transform: translateY(calc(-50% + 2px)) rotate(180deg);
    }
}
.l-header-sub-menu:hover .l-header-sub-menu__drawer {
    max-height: 1000px;
}
.l-header-sub-menu__opener {
    border: none;
    border-bottom: 4px solid transparent;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--color-base-1);
    font-family: var(--ff-root);
    font-size: 20px;
    font-weight: 500;
    height: 100%;
    line-height: 1;
    position: relative;
    padding: 4px 32px 0 0;
    width: 100%;
    transition: all ease 0.3s;
    white-space: nowrap;
    background-color: transparent;
}
@media screen and (max-width: 1200px) {
    .l-header-sub-menu__opener {
        padding-right: 23px;
    }
}
.l-header-sub-menu__opener::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    width: 19px;
    aspect-ratio: 19/12;
    background: url("../img/common/icon/ico_arrow.png") center center no-repeat;
    background-size: contain;
    transform: translateY(calc(-50% + 2px));
}
.l-header-sub-menu__opener:not(.l-header-sub-menu__opener.js-sub-menu__trigger)::after {
    transform: translateY(calc(-50% + 2px)) rotate(-90deg);
}
.l-header-sub-menu__drawer {
    background: rgba(var(--color-pink-4-rgb), 0.9);
    max-height: 0;
    overflow: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    transition: all ease 0.7s;
}
.l-header-sub-menu__drawer-inner {
    padding: 0 calc(var(--contents-side-padding) * 1px);
    width: calc(997px + var(--contents-side-padding) * 2px);
    margin: 35px auto;
}
.l-header-sub-menu__title {
    position: relative;
    color: var(--color-white-1);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    width: -moz-fit-content;
    width: fit-content;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.6;
}
@media (hover: hover) and (pointer: fine) {
    .l-header-sub-menu__title:hover {
        text-decoration: underline;
    }
}
.l-header-sub-menu__title::before {
    content: "";
    display: block;
    width: 10px;
    aspect-ratio: 39/63;
    background: url("../img/common/icon/ico_arrow_ltr_wn.png") 0 0 no-repeat;
    background-size: 100% auto;
    margin-top: 3px;
}
.l-header-sub-menu__sub-title {
    color: var(--color-white-1);
    cursor: initial;
    font-size: 20px;
    font-weight: 500;
    line-height: 2;
    margin-top: 24px;
}
.l-header-sub-menu__sub-title + .l-header-sub-menu__list {
    margin-top: 12px;
}
.l-header-sub-menu__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-top: 25px;
    padding-inline: 0;
    margin-inline: auto;
    max-width: 875px;
}
.l-header-sub-menu__list:first-child {
    margin-top: 0;
}
.l-header-sub-menu__list li {
    width: calc((100% - 20px) / 2);
}
.l-header-sub-menu__list a {
    color: var(--color-white-1);
    display: block;
    font-size: 20px;
    font-weight: 500;
    padding-left: 17px;
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
}
@media (hover: hover) and (pointer: fine) {
    .l-header-sub-menu__list a:hover {
        text-decoration: underline;
    }
}
.l-header-sub-menu__list a::before {
    content: "";
    background: var(--color-white-1);
    width: 7px;
    height: 3px;
    position: absolute;
    left: 0;
    top: calc(50% + 1px);
}
.l-header-sub-menu__list__sub-title + .l-header-sub-menu__list__list {
    margin-top: 16px;
}
@media screen and (max-width: 1024px) {
    .l-header-sub-menu {
        cursor: inherit;
        display: block;
        height: auto;
        margin-top: 15px;
    }
    .l-header-sub-menu:first-child {
        margin-top: 30px;
    }
    .l-header-sub-menu .l-header-sub-menu__opener[aria-expanded=true]::after {
        transform: translateY(-50%) rotate(-90deg);
    }
    .l-header-sub-menu:hover .l-header-sub-menu__drawer, .l-header-sub-menu:focus-within .l-header-sub-menu__drawer {
        max-height: 0;
    }
    .l-header-sub-menu:hover .l-header-sub-menu__drawer[aria-hidden=false], .l-header-sub-menu:focus-within .l-header-sub-menu__drawer[aria-hidden=false] {
        max-height: 1000px;
    }
    .l-header-sub-menu__opener {
        position: relative;
        border-bottom: calc(4 / 2 * 1px) solid var(--color-white-1);
        color: var(--color-white-1);
        font-size: calc(32 / 2 * 1px);
        padding: 17px 0;
        text-align: left;
        background: none;
    }
}
@media screen and (max-width: 1024px) and (hover: hover) and (pointer: fine) {
    .l-header-sub-menu__opener {
        transition: opacity var(--hover-duration);
    }
    .l-header-sub-menu__opener:hover {
        opacity: var(--hover-opacity-ratio);
    }
}
@media screen and (max-width: 1024px) {
    .l-header-sub-menu__opener::after {
        content: "";
        position: absolute;
        top: 60%;
        right: 4px;
        display: block;
        width: 10px;
        aspect-ratio: 39/63;
        background: url("../img/common/icon/ico_arrow_ltr_wn.png") 0 0 no-repeat;
        background-size: 100% auto;
        transform: translateY(-50%) rotate(90deg);
    }
    .l-header-sub-menu__opener[aria-expanded=true]::after {
        transform: translateY(-50%) rotate(-90deg);
    }
    .l-header-sub-menu__opener:not(.l-header-sub-menu__opener.js-sub-menu__trigger)::after {
        transform: translateY(-50%);
    }
    .l-header-sub-menu__drawer {
        background-color: initial;
        position: inherit;
    }
    .l-header-sub-menu__drawer[aria-hidden=false] {
        max-height: 1000px;
    }
    .l-header-sub-menu__drawer-inner {
        margin: 24px 0 0;
        width: 100%;
    }
    .l-header-sub-menu__title {
        font-size: 20.8px;
    }
    .l-header-sub-menu__sub-title {
        color: var(--color-white-1);
        font-size: 13px;
        margin-top: 20px;
    }
    .l-header-sub-menu__sub-title + .l-header-sub-menu__list {
        margin-top: 12px;
    }
    .l-header-sub-menu__list {
        display: block;
        margin-top: 16px;
    }
    .l-header-sub-menu__list:first-child {
        margin-top: 0;
    }
    .l-header-sub-menu__list li {
        width: 100%;
    }
    .l-header-sub-menu__list a {
        color: var(--color-white-1);
        font-size: 13px;
        padding-left: 8px;
        position: relative;
    }
    .l-header-sub-menu__list a::before {
        background: var(--color-white-1);
        width: 4px;
        height: 2px;
    }
}

.l-header-close {
    display: none;
}
@media screen and (max-width: 1024px) {
    .l-header-close {
        position: relative;
        cursor: pointer;
        border: none;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        background-color: transparent;
        font-family: var(--ff-root);
        color: var(--color-white-1);
        font-size: calc(32 / 2 * 1px);
        font-weight: 500;
    }
}
@media screen and (max-width: 1024px) and (hover: hover) and (pointer: fine) {
    .l-header-close {
        transition: opacity var(--hover-duration);
    }
    .l-header-close:hover {
        opacity: var(--hover-opacity-ratio);
    }
}
@media screen and (max-width: 1024px) {
    .l-header-close::before {
        content: "";
        display: block;
        width: calc(46 / 2 * 1px);
        aspect-ratio: 1/1;
        background: url("../img/common/icon/ico_close.png") 0 0 no-repeat;
        background-size: 100% auto;
    }
}

.l-header-menu-button {
    display: none;
}
@media screen and (max-width: 1024px) {
    .l-header-menu-button {
        padding: 0;
        align-items: center;
        background: var(--color-pink-4);
        border: none;
        border-radius: calc(10 / 2 * 1px);
        box-shadow: calc(3 / 2 * 1px) calc(5 / 2 * 1px) calc(6 / 2 * 1px) rgba(var(--color-base-1-rgb), 0.35);
        color: var(--color-white-1);
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        font-family: var(--ff-root);
        font-size: calc(16 / 2 * 1px);
        font-weight: 500;
        position: relative;
        height: calc(75 / 2 * 1px);
        width: calc(100 / 2 * 1px);
    }
}
@media screen and (max-width: 1024px) and (hover: hover) and (pointer: fine) {
    .l-header-menu-button {
        transition: opacity var(--hover-duration);
    }
    .l-header-menu-button:hover {
        opacity: var(--hover-opacity-ratio);
    }
}
@media screen and (max-width: 1024px) {
    .l-header-menu-button::before {
        content: "";
        background: url(../img/common/icon/ico_menu.png) 50% 50% no-repeat;
        background-size: contain;
        display: inline-block;
        width: 100%;
        margin: 10px 0 2px;
        height: 11px;
    }
}

.l-header-contact {
    position: relative;
    padding: 20px min(40 / var(--design-width) * 100vw, 40px);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 500;
    border-radius: 5px;
    box-shadow: 2px 8px 9px rgba(var(--color-base-1-rgb), 0.25);
    background-color: var(--color-pink-1);
    flex-shrink: 0;
}
@media (hover: hover) and (pointer: fine) {
    .l-header-contact {
        transition: background-color var(--hover-duration), color var(--hover-duration);
    }
    .l-header-contact:hover {
        background-color: var(--color-pink-2);
        color: var(--color-white-1);
    }
}
@media screen and (max-width: 1200px) {
    .l-header-contact {
        padding-inline: calc(20 / var(--design-width) * 100vw);
    }
}
@media screen and (max-width: 1024px) {
    .l-header-contact {
        padding: 8px 0 0;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 1px;
        width: calc(100 / 2 * 1px);
        height: calc(75 / 2 * 1px);
        font-size: calc(16 / 2 * 1px);
        letter-spacing: -0.04em;
        border-radius: calc(10 / 2 * 1px);
        box-shadow: calc(3 / 2 * 1px) calc(5 / 2 * 1px) calc(6 / 2 * 1px) rgba(var(--color-base-1-rgb), 0.35);
    }
}
.l-header-contact::before {
    content: "";
    display: block;
    width: 46px;
    aspect-ratio: 46/36;
    flex-shrink: 0;
    background: url(../img/common/icon/ico_contact.png) center center no-repeat;
    background-size: 100% auto;
}
@media screen and (max-width: 1024px) {
    .l-header-contact::before {
        width: calc(36 / 2 * 1px);
    }
}

/* ---------------------------------------------
*   l-footer
--------------------------------------------- */
.l-footer {
    color: var(--color-white-1);
}
.l-footer__bg {
    background-color: var(--color-pink-5);
}
.l-footer__container {
    padding-block: 28px 64px;
    padding-inline: calc(var(--contents-side-padding) * 1px);
    max-width: calc(var(--contents-side-padding) * 2px + var(--contents-width) * 1px);
    margin-inline: auto;
}
@media screen and (max-width: 767px) {
    .l-footer__container {
        padding-block: 13px 22px;
    }
}
.l-footer__copyright {
    padding: 17px 20px 20px;
    background-color: var(--color-white-1);
    color: var(--color-black-1);
    font-size: 18px;
    font-weight: 500;
    text-align: center;
}
@media screen and (max-width: 767px) {
    .l-footer__copyright {
        padding: 11px 11px 13px;
        font-size: calc(24 / 2 * 1px);
    }
}
@media screen and (max-width: 767px) {
    .l-footer--product {
        padding-bottom: 70px;
    }
}

/* ---------------------------------------------
*   l-footer-nav
--------------------------------------------- */
.l-footer-nav__list {
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 23px calc(60 / var(--contents-width) * 100%);
    margin: 0;
}
@media screen and (max-width: 767px) {
    .l-footer-nav__list {
        grid-template-columns: repeat(1, 1fr);
        gap: 11px;
    }
}
.l-footer-nav__link {
    position: relative;
    padding-block: 15px;
    padding-left: 20px;
    display: block;
    font-size: 20px;
    font-weight: 500;
    border-bottom: 3px solid var(--color-white-1);
}
@media (hover: hover) and (pointer: fine) {
    .l-footer-nav__link {
        transition: opacity var(--hover-duration);
    }
    .l-footer-nav__link:hover {
        opacity: var(--hover-opacity-ratio);
    }
}
@media screen and (max-width: 767px) {
    .l-footer-nav__link {
        padding: 10px 14px;
        font-size: calc(30 / 2 * 1px);
        border-width: calc(4 / 2 * 1px);
    }
}
.l-footer-nav__link::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 3px;
    display: block;
    width: 10px;
    aspect-ratio: 39/63;
    background: url("../img/common/icon/ico_arrow_ltr_wn.png") 0 0 no-repeat;
    background-size: 100% auto;
    transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
    .l-footer-nav__link::after {
        left: 1px;
        width: calc(13 / 2 * 1px);
        aspect-ratio: 13/22;
        background: url("../img/common/icon/ico_arrow_wh_thin.png") 0 0 no-repeat;
        background-size: 100% auto;
    }
}
.l-footer-nav__lv1-list {
    padding: 0;
    margin-top: 13px;
    margin-left: -8px;
}
@media screen and (max-width: 767px) {
    .l-footer-nav__lv1-list {
        margin-top: 10px;
        margin-left: -10px;
    }
}
.l-footer-nav__lv1-list-item {
    position: relative;
    padding-left: 11px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 7px;
}
@media screen and (max-width: 767px) {
    .l-footer-nav__lv1-list-item {
        margin-top: 4px;
    }
}
.l-footer-nav__lv1-list-item::before {
    content: "";
    position: relative;
    top: 0.8em;
    left: -0.25em;
    display: block;
    width: 4px;
    aspect-ratio: 1/1;
    background-color: var(--color-white-1);
    border-radius: 50%;
    flex-shrink: 0;
}
@media screen and (max-width: 767px) {
    .l-footer-nav__lv1-list-item::before {
        top: 0.5em;
        left: -0.11em;
        width: 3px;
    }
}
.l-footer-nav__lv1-list-link {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    font-size: 18px;
    font-weight: 500;
}
@media (hover: hover) and (pointer: fine) {
    .l-footer-nav__lv1-list-link:hover {
        text-decoration: underline;
    }
}
@media screen and (max-width: 767px) {
    .l-footer-nav__lv1-list-link {
        font-size: calc(24 / 2 * 1px);
    }
}

/* ---------------------------------------------
*   l-footer-nav-bottom
--------------------------------------------- */
.l-footer-nav-bottom {
    margin-top: 40px;
}
@media screen and (max-width: 767px) {
    .l-footer-nav-bottom {
        margin-top: 17px;
    }
}
.l-footer-nav-bottom__list {
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 36px;
    margin: 0;
}
@media screen and (max-width: 767px) {
    .l-footer-nav-bottom__list {
        display: block;
    }
}
@media screen and (max-width: 767px) {
    .l-footer-nav-bottom__item {
        margin-top: 4px;
    }
}
.l-footer-nav-bottom__link {
    position: relative;
    padding-left: 12px;
    display: block;
    font-size: 16px;
    font-weight: 500;
}
@media (hover: hover) and (pointer: fine) {
    .l-footer-nav-bottom__link:hover {
        text-decoration: underline;
    }
}
@media screen and (max-width: 767px) {
    .l-footer-nav-bottom__link {
        padding-left: 9px;
        font-size: calc(22 / 2 * 1px);
    }
}
.l-footer-nav-bottom__link::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 7px;
    aspect-ratio: 39/63;
    background: url("../img/common/icon/ico_arrow_ltr_wn.png") 0 0 no-repeat;
    background-size: 100% auto;
    transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
    .l-footer-nav-bottom__link::after {
        left: 1px;
        width: calc(9 / 2 * 1px);
        aspect-ratio: 13/22;
        background: url("../img/common/icon/ico_arrow_wh_thin.png") 0 0 no-repeat;
        background-size: 100% auto;
    }
}

/* ---------------------------------------------
*   l-contact
--------------------------------------------- */
.l-contact {
    position: relative;
    color: var(--color-base-1);
    overflow: hidden;
}
.l-contact::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: url("../img/common/bg_contact.png") 0 0 no-repeat;
    background-size: cover;
}
.l-contact::after {
    content: "";
    position: absolute;
    bottom: -5px;
    display: block;
    width: 100%;
    height: 65px;
    background: url(../img/common/illust_footer.png) bottom left repeat-x;
    background-size: 368px 100%;
}
@media screen and (max-width: 767px) {
    .l-contact::after {
        bottom: -3px;
        height: calc(82 / 2 * 1px);
        background-size: calc(474 / 2 * 1px) 100%;
    }
}
.l-contact__container {
    position: relative;
    padding: 67px calc(var(--contents-side-padding) * 1px) 86px;
    max-width: calc(var(--contents-side-padding) * 2px + var(--contents-width) * 1px);
    margin-inline: auto;
}
@media screen and (max-width: 767px) {
    .l-contact__container {
        padding-block: 17px 63px;
    }
}
@media screen and (min-width: 768px) {
    .l-contact__container::before, .l-contact__container::after {
        content: "";
        position: absolute;
        bottom: 108px;
    }
    .l-contact__container::before {
        left: 120px;
        width: 186.75px;
        aspect-ratio: 747/243;
        background: url("../img/common/illust_cloud_01.png") 0 0 no-repeat;
        background-size: cover;
    }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .l-contact__container::before {
        left: calc(var(--contents-side-padding) * 1px);
    }
}
@media screen and (min-width: 768px) {
    .l-contact__container::after {
        right: 133px;
        width: 192.25px;
        aspect-ratio: 769/232;
        background: url("../img/common/illust_cloud_02.png") 0 0 no-repeat;
        background-size: cover;
    }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .l-contact__container::after {
        right: calc(var(--contents-side-padding) * 1px);
    }
}
.l-contact__ttl {
    display: block;
    font-size: 28px;
    font-weight: 500;
    letter-spacing: 0.025em;
    line-height: 1.3;
    text-align: center;
}
@media screen and (max-width: 767px) {
    .l-contact__ttl {
        font-size: calc(32 / 2 * 1px);
        line-height: 1.5;
    }
}
.l-contact__link {
    position: relative;
    padding: 12px 126px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: var(--color-base-1);
    font-size: 28px;
    font-weight: 500;
    line-height: 1;
    background-color: var(--color-pink-1);
    border-radius: 999px;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
    margin-top: 19px;
}
@media (hover: hover) and (pointer: fine) {
    .l-contact__link {
        transition: background-color var(--hover-duration), color var(--hover-duration);
    }
    .l-contact__link:hover {
        background-color: var(--color-pink-2);
        color: var(--color-white-1);
    }
}
@media screen and (max-width: 767px) {
    .l-contact__link {
        padding: 9px 78px 10px;
        gap: 4px;
        font-size: calc(35 / 2 * 1px);
        margin-top: 27px;
    }
}
.l-contact__link::before {
    content: "";
    position: relative;
    top: 2px;
    display: block;
    width: 38px;
    aspect-ratio: 46/36;
    flex-shrink: 0;
    background: url(../img/common/icon/ico_contact.png) center center no-repeat;
    background-size: 100% auto;
}
@media screen and (max-width: 1024px) {
    .l-contact__link::before {
        top: 1px;
        width: calc(50 / 2 * 1px);
    }
}
.l-contact__company {
    display: block;
    width: 325px;
    margin-inline: auto;
    margin-block: 56px 16px;
}
@media screen and (max-width: 767px) {
    .l-contact__company {
        width: 205px;
        margin-block: 34px 10px;
    }
}
.l-contact__company img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.l-contact__logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 31px;
    margin-block: 0;
}
@media screen and (max-width: 767px) {
    .l-contact__logos {
        gap: 20px;
    }
}
.l-contact__logo {
    display: block;
    margin: 0;
    flex-shrink: 0;
}
.l-contact__logo img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.l-contact__logo--hakaru {
    width: 147px;
}
@media screen and (max-width: 767px) {
    .l-contact__logo--hakaru {
        width: 92px;
    }
}
.l-contact__logo--careai {
    width: 143px;
}
@media screen and (max-width: 767px) {
    .l-contact__logo--careai {
        width: 89px;
    }
}
.l-contact__tel {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: var(--color-base-1);
    font-size: 28px;
    font-weight: 500;
    letter-spacing: 0.07em;
    width: -moz-fit-content;
    width: fit-content;
    margin-top: 8px;
    margin-inline: auto;
}
@media (hover: hover) and (pointer: fine) {
    .l-contact__tel {
        transition: opacity var(--hover-duration);
    }
    .l-contact__tel:hover {
        opacity: var(--hover-opacity-ratio);
    }
}
@media screen and (max-width: 767px) {
    .l-contact__tel {
        font-size: calc(33 / 2 * 1px);
        gap: 5px;
        margin-top: 5px;
    }
}
.l-contact__tel::before {
    content: "";
    display: block;
    width: 34px;
    aspect-ratio: 136/88;
    flex-shrink: 0;
    background: url(../img/common/icon/ico_tel.png) center center no-repeat;
    background-size: 100% auto;
}
@media screen and (max-width: 1024px) {
    .l-contact__tel::before {
        width: calc(42 / 2 * 1px);
    }
}
.l-contact__tel-note {
    display: block;
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    margin-top: -4px;
}
@media screen and (max-width: 767px) {
    .l-contact__tel-note {
        font-size: calc(28 / 2 * 1px);
        margin-top: -2px;
    }
}
.l-contact__tel-note span {
    margin-left: -9px;
}
@media screen and (max-width: 767px) {
    .l-contact__tel-note span {
        margin-left: -6px;
    }
}

/* ---------------------------------------------
*   js-tel-disabled
--------------------------------------------- */
.js-tel-disabled {
    pointer-events: none;
}

/*  .js-pagetop-threshold
--------------------------------------------- */
.js-pagetop-threshold {
    position: absolute;
    top: 0;
    height: 300px;
}

/*  l-footer-pagetop
--------------------------------------------- */
.l-footer-pagetop {
    position: sticky;
    bottom: 0;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
}
.l-footer-pagetop__link {
    position: absolute;
    bottom: 95px;
    right: 48px;
    z-index: 9;
    display: block;
    width: 56.25px;
    border-radius: 50%;
    box-shadow: 4px 4px 2px rgba(var(--color-base-1-rgb), 0.19);
}
@media (hover: hover) and (pointer: fine) {
    .l-footer-pagetop__link {
        transition: opacity var(--hover-duration);
    }
    .l-footer-pagetop__link:hover {
        opacity: var(--hover-opacity-ratio);
    }
}
@media screen and (max-width: 767px) {
    .l-footer-pagetop__link {
        bottom: 42px;
        right: 17px;
        width: calc(92 / 2 * 1px);
        box-shadow: calc(3 / 2 * 1px) calc(3 / 2 * 1px) calc(4 / 2 * 1px) rgba(var(--color-base-1-rgb), 0.19);
    }
}
.l-footer-pagetop__link img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.l-footer-pagetop.is-show {
    opacity: 1;
    visibility: visible;
}