@charset "UTF-8";

/* ==========================================
   Variables
========================================== */

:root {

    /* Color */
    --color-cta-green: #1AB8B8;
    --color-cta-orange: #FF7A45;
    --color-cta-green--hover: #0F9DAA;
    --color-cta-orange--hover: #FF5E1F;
    --color-white: #ffffff;
    --color-ultra-light-gray: #F6F6F6;
    --color-bg-ac-beige: #FBF3EE;
    --color-accent-blue: #1CA6D4;
    --color-deep-blue: #1C7BD4;
    --color-light-blue: #E0F3FB;
    --color-ultra-light-blue: #F5FCFF;
    --color-accent-yellow: #FFCF5C;
    --color-light-yellow: #FFF8E0;
    --color-ultra-light-yellow: #FFFDF5;
    --color-light-green: #DCF4F4;
    --color-light-gray: #F6F6F6;
    --color-text-base: #333333;
    --color-text-regular: #555555;
    --color-text-medium: #888888;
    --color-text-light: #666666;
    --color-line: #DEDEDE;
    --color-bg: #ffffff;
    --color-border: #e5e5e5;
    --color-section-border: #E1EBF7;

    /* Font */
    --font-base: "Zen Kaku Gothic New", sans-serif !important;

    /* Width */
    --container-main: 1060px;
    --container-narrow: 900px;
    --container-sm: 710px;

    /* Radius */
    --radius-xs: 3px;
    --radius-sm: 5px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 30px;

    /* Shadow */
    --shadow-sm: 0 2px 12px rgba(0, 0, 0, .05);
    --shadow-md: 4px 4px 4px rgba(51, 51, 51, .04);
    --shadow-lg: 4px 4px 10px rgba(0, 0, 0, .25);

    /* gradation */
    --gra-blue: linear-gradient(135deg, #F3FBFF 0%, #C8E5F0 100%);

    /* Transition */
    --transition: all .3s ease;

    /* Z-index */
    --z-header: 800;
    --z-menu: 900;
    --z-modal: 1000;

    /* Space */
    --space-xs: 8px;
    --space-base: 30px;
    --space-md: 24px;
    --space-lg: 60px;
    --space-xl: 80px;
    --space-xxl: 120px;

    /* Break Point*/
    --bp-md: 1024px;
    --bp-tab: 768px;
    --bp-sp: 600px;
}

body {
    margin: 0;
    color: var(--color-text-regular) !important;
    background: var(--color-bg);
    font-family: var(--font-base) !important;
    font-size: 16px !important;
    line-height: 1.85 !important;
    letter-spacing: 0.05em !important;
}

button {
    appearance: none;
    font-family: var(--font-base) !important;
    border: none;
}

/* ==========================================
   layout
========================================== */

.l-containerW {
    width: calc(100% - 3%);
    margin-inline: auto;
}

.l-contentWrap {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.l-mainContent {
    flex: 1;
    min-width: 0;
}

.l-sidebar {
    width: 340px;
    flex-shrink: 0;
    position: sticky;
    align-self: flex-start;
    top: 89px;
    height: auto;
    overflow: visible;
    background: var(--color-bg);
    z-index: 600;
}

.c-sidebarInner {
    max-height: calc(100vh - 90px);
    overflow-y: auto;
}

.l-containerW-md {
    max-width: var(--container-main);
    margin-inline: auto;
}

.l-containerW-narrow {
    max-width: var(--container-narrow);
    margin-inline: auto;
}

.l-containerW-sm {
    max-width: var(--container-sm);
    margin-inline: auto;
}

.l-wideContainer {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
}

.l-secContainer {
    margin-bottom: 130px;
}

.l-sec-radius {
    padding: var(--space-xl);
    border-radius: var(--radius-xl);
}


/* ==========================================
   Utility
========================================== */

.u-flex {
    display: flex;
}

.u-flex-center-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.u-align-end {
    align-items: flex-end;
}

.u-align-center {
    align-items: center;
}

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

.u-ac-txt-blue {
    color: var(--color-accent-blue);
}

.u-ac-txt-deep-blue {
    color: var(--color-deep-blue);
}

.u-ac-txt-white {
    color: var(--color-white);
}

.u-ac-txt-yellow {
    color: var(--color-accent-yellow);
}

.u-ac-txt-base {
    color: var(--color-text-base);
}

/* 数字強調 */

.u-number-lg20 {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 2px;
    padding: 0.1em;
}

.u-number-lg24 {
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 2px;
    padding: 0.1em;
}

.u-number-lg28 {
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 2px;

}

.u-number-lg32 {
    font-size: 3.2rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 2px;
}


.u-number-xl38 {
    font-size: 3.8rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 2px;
}

.u-number-xl40 {
    font-size: 4rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 2px;

}

.u-number-xxl50 {
    font-size: 5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 2px;

}

.u-number-3xl52 {
    font-size: 5.2rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 2px;

}

.u-number-4xl54 {
    font-size: 5.4rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 2px;

}

.u-number-xxl {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 2px;
}

/*todo textsize 修正*/
.u-txt-xs {
    font-size: 1.2rem;
}

.u-txt-s {
    font-size: 1.4rem;
}

.u-txt-md {
    font-size: 2rem;
}

.u-txt-lg {
    font-size: 2.8rem;
}

.u-xl-txt {
    font-size: 2.1em;
}


.u-bold-txt {
    font-weight: 600;
}

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

.u-bg-color-light-gray {
    background: var(--color-ultra-light-gray);
}

.u-bg-color-blue {
    background: var(--color-accent-blue);
}

.u-bg-color-white {
    background: var(--color-white);
}

.u-t-align-center {
    text-align: center;
}

.u-t-align-left {
    text-align: left;
}

.u-gap-xs {
    gap: 8px;
}

.u-gap-lg {
    gap: 30px;
}

.u-sp--only {
    display: none;
}

.u-pc--only {
    display: block;
}

.u-md-pc--only {
    display: none;
}


/* ==========================================
   Header
========================================== */

#Header-Wrapper {
    position: fixed;
    top: 30px;
    z-index: var(--z-modal);
    transition: top .25s ease;
    padding-block: 15px;
    width: 100vw;
}

#Header-Wrapper.is-scrolled {
    top: 0;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}


.header__inner {
    display: grid;
    gap: 15px;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 0 30px;
    font-family: var(--font-base);
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-base);
    width: calc(100% - 3%);
    margin-inline: auto;
}


.header__logo img {
    display: block;
    width: 265px;
    height: auto;
    justify-self: start;

}

.header__nav {
    background: var(--color-bg);
    padding: 15px 32px;
    border-radius: 50px;
    border: 1px #EEEEEE solid;
    justify-self: center;
    box-shadow: var(--shadow-sm);
}

.header__navList {
    align-items: center;
    gap: 36px;
}

.header__navItem {
    position: relative;
}

.header__navItem > a {
    display: flex;
    align-items: center;
}

.header__navItem--hasChild > a::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-3px);
    transition: var(--transition);
}

.header__navItem--hasChild:hover > a::after {
    transform: rotate(-135deg) translateY(1px);
}


.header__subList {
    position: absolute;
    bottom: -25px;
    left: 0;
    z-index: var(--z-header);
    min-width: 220px;
    padding: 30px 32px;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
}

.header__navItem:hover > .header__subList {
    opacity: 1;
    visibility: visible;
}

.header__subItem a {
    display: block;
    padding: 13px 18px;
    color: var(--color-text-base);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.header__subItem a:hover {
    background: var(--color-bg);
}

.header__menuBtn, .header__spMenu {
    display: none;
}

/* ==========================================
   SideBar
========================================== */
/*todo class名からc-削除*/
.c-sidebarInner {
    padding: 0 25px 20px 25px;
}

.c-sideForm__form {
    margin-bottom: 20px;
}

.c-sideForm__form .c-sideForm__field + .c-sideForm__field {
    margin-top: 4px;
}

.c-sideForm--heading {
    padding: 16px 0;
}

.c-sideForm__title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--color-text-base);
}

.c-sideForm__link--dl {
    text-decoration: underline;
}

.c-sideForm--contact .c-sideForm__title span {
    color: var(--color-cta-orange);
}

.c-sideForm--download .c-sideForm__title span {
    color: var(--color-cta-green);
}

.c-sideForm__lead {
    font-size: 11px;
    color: var(--color-text-base);
}

.c-sideForm__label {
    color: var(--color-text-base);
    font-weight: 500;
    font-size: 14px;
}

.c-sideForm__labelInner.u-flex-column {
    align-items: flex-start;
}

input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea, select {
    padding: 8px 10px !important;
    border: 1px solid #D0D0D0 !important;
    background: #F8F8F8 !important;

}

input::placeholder,
textarea::placeholder, select {
    color: var(--color-text-medium);
    font-weight: 300 !important;
    font-size: 14px;
}

.c-form__check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 14px;
    color: var(--color-text-medium);
}

.c-form__check input {
    width: 14px;
    height: 14px;
    margin: 0;
}

.c-form__privacy {
    padding: 16px 7px;
}

.c-form__privacy--text {
    font-size: 12px;
    color: var(--color-text-base);
    margin-bottom: 16px;
}

.c-form__privacy--text a {
    text-decoration: underline;
}

.c-form__agreementLabel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    line-height: 1.8;
    font-size: 14px;
    color: var(--color-text-base);
}

.c-sideTel {
    padding: 20px 15px;
    text-align: center;
}

.c-sideTel__title {
    font-size: 16px;
    color: var(--color-text-base);
    font-weight: 500;
    margin-bottom: 8px;
}

.c-sideTel__number, .c-sideTel__number a {
    color: var(--color-accent-blue);
    font-size: 24px;
    font-weight: 600;
}

.sideTel__time {
    margin-top: 8px;
    font-size: 14px;
}

.c-required {
    position: relative;
    color: #FF0000;
    top: -0.3em;
    font-size: 0.8em;
}

/* ==========================================
   Footer
========================================== */

.l-footer {
    background: var(--color-bg);
    padding-bottom: 0;
}

.l-footer__outer {
    background: var(--color-bg-ac-beige);
    border-radius: var(--radius-xl);
    padding: 72px 80px 60px;
}


.l-footer__inner {
    max-width: 1400px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 60px;
    /*color: var(--color-text-base);*/
}

.l-footer__logo img {
    width: 273px;
}

.l-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.l-footer__text {
    font-size: 13px;
    line-height: 1.8;
    color: #777777;
}

.l-footer__nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
    align-items: start;
}

.l-footer__navList {
    display: grid;
    gap: 18px;
}

.l-footer__navItem {
    font-weight: 600;
    color: var(--color-text-base);
    font-size: 18px;
    position: relative;
    padding-left: 20px;
    display: inline-block;
}

.l-footer__navItem::before {
    content: '';
    top: 50%;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-accent-yellow);
    display: inline-block;
    position: absolute;
    transform: translateY(-50%);
}

.l-footer__subList {
    display: grid;
    gap: 11px;
    margin-top: 18px;
    margin-left: 20px;
}

.l-footer__subItem a {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-base);
    position: relative;
    padding-left: 20px;
}

.l-footer__subItem a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--color-accent-blue);
    border-right: 2px solid var(--color-accent-blue);
}


.l-footer__copy {
    padding: 12px;
    text-align: center;
    color: var(--color-white);
    background: var(--color-accent-blue);
    font-size: 13px;
    font-weight: 600;
}


/* ==========================================
SP
========================================== */
@media screen and (max-width: 1024px) {
    .u-md-pc--only {
        display: block;
    }


    .header__nav, .header__ctaWrapper {
        display: none;
    }

    #Header-Wrapper {
        top: 0;
    }

    .header__inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 60px;
        padding: 0 10px;
        border-radius: 999px;
        background: var(--color-white);
        box-shadow: 0 0 40px rgba(125, 135, 140, .1);
        width: calc(100% - 30px);

    }

    .header__logo img {
        width: 200px;
        height: auto;
    }

    .header__nav,
    .header__ctaWrapper {
        display: none;
    }

    .header__menuBtn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 40px;
        height: 40px;
        padding: 0;
        border: none;
        background: transparent;
        cursor: pointer;
        align-items: center;
    }

    .header__menuBtn span {
        width: 20px;
        height: 2px;
        border-radius: 999px;
        background: var(--color-text-medium);
        transition: .3s;
        display: block;
        transform-origin: center;
    }

    .header__menuBtn.is-open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .header__menuBtn.is-open span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .header__menuBtn.is-open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .header__spMenu {
        position: fixed;
        inset: 0;
        display: block;
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s ease;
        z-index: calc(var(--z-modal) - 1);
    }

    .header__spMenu.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    .spMenu__overlay {
        position: absolute;
        inset: 0;
        background: var(--color-white);
        height: 100vh;
    }

    .spMenu__panel {
        overflow-y: auto;
        padding: 150px 16px 35px;
        text-align: center;
        background: var(--color-white);
        transition: transform .3s ease;
        height: 100vh;
    }

    .header__spMenu.is-open .spMenu__panel {
        transform: translateY(0);
    }

    .spMenu__list {
        display: grid;
        gap: 35px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .spMenu__item > a {
        display: block;
        color: var(--color-text-base);
        font-size: 18px;
        font-weight: 700;
        text-decoration: none;
    }

    .spMenu__list > a:hover {
        color: var(--color-text-base) !important;
    }

    .spMenu__parent > a {
        color: var(--color-text-base);
        font-size: 18px;
        font-weight: 700;
        text-decoration: none;
    }

    .spMenu__subList {
        display: grid;
        gap: 10px;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        margin-top: 0;
        padding-left: 16px;
        list-style: none;
        transition: max-height .35s ease, opacity .25s ease, margin-top .35s ease;
    }

    .spMenu__item.is-open .spMenu__subList {
        max-height: 300px;
        opacity: 1;
        margin-top: 12px;
    }

    .spMenu__parent {
        display: flex;
        align-items: center;
        gap: 6px;
        justify-content: center;
    }

    .spMenu__toggle {
        width: 16px;
        height: 16px;
        background: transparent;
        cursor: pointer;
        position: relative;
        appearance: none;
    }

    .spMenu__toggle::before {
        content: "";
        position: absolute;
        inset: 3px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
    }

    .spMenu__subList a {
        font-size: 14px;
        text-decoration: none;
    }

    .spMenu__cta {
        display: flex;
        gap: 20px;
        margin-top: 35px;
        justify-content: center;
    }


    body.is-menu-open {
        overflow: hidden;
    }

    .l-mainContent {
        width: 100%;
    }

    .l-contentWrap {
        flex-direction: column;
    }

    .l-sidebar {
        width: 50%;
        position: static;
        height: auto;
        overflow-y: auto;
        margin-inline: auto;
    }

    .c-sidebarInner {
        max-height: none;
    }


}

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


    .l-containerW {
        width: calc(100% - 16px);
        margin-inline: 8px;
    }



    .l-sidebar {
        width: 100%;
    }

    .l-secContainer {
        margin-bottom: 80px;
    }


    .l-sec-radius {
        padding: 40px 20px;
        border-radius: var(--radius-xl);
    }

    .l-footer__brand {
        margin-bottom: 30px;
    }

    .l-footer__outer {
        padding: 30px 20px 50px;
        margin-bottom: 30px;
    }

    .l-footer__inner {
        grid-template-columns: 1fr;
        gap: 0;

    }

    .l-footer__nav {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .u-sp--only {
        display: block;
    }

    .u-pc--only {
        display: none;
    }


}