@charset "UTF-8";
/*
Theme Name: NOMOCA×AI
Description: NOMOCA×AIのLPオリジナルテーマ
Author: https://www.cwj.jp/
Version: 2.0.0
*/





/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * RESET...............リセット
 * GLOBAL-VARIABLES....グローバル変数
 * ELEMENTS............要素
 * VARIABLE-HIDE.......可変幅による表示非表示
 * COMMON..............顧問パーツ
 * HEADER..............ヘッダー
 * FOOTER..............フッター
 * CONTENTS............コンテンツ
 */





/*------------------------------------*\
    $RESET
\*------------------------------------*/
*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
    all: unset;
    display: revert;
}

*,
*::before,
*::after { box-sizing: border-box }

ol, ul { list-style: none }

table { border-collapse: collapse }

textarea { white-space: revert }

:focus { outline: none }

a, button, select { cursor: pointer }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--white) inset !important;
    -webkit-text-fill-color: inherit !important;
}

input { -webkit-tap-highlight-color: rgba(0, 0, 0, 0) }

input:where(:not([type=datetime]):not([type=date]):not([type=month]):not([type=week]):not([type=time]):not([type=datetime-local]))::-webkit-calendar-picker-indicator {
    display: none !important;
}




/*------------------------------------*\
    $GLOBAL-VARIABLES
\*------------------------------------*/
:root {
    /**
     * Color set
     */
    --primaryColor100: #edf7fa;
    --primaryColor200: #32add5;
    --primaryColor300: #007cc4;
    --neutralColor100: #f7f7f7;
    --neutralColor200: #4d4d4d;

    /**
     * Font set
     */
    --font : 'Noto Sans JP', sans-serif;

    /**
     * Types of easing
     */
    --linear        : cubic-bezier(0.250, 0.250, 0.750, 0.750);
    --easeInSine    : cubic-bezier(0.47,  0,     0.745, 0.715);
    --easeOutSine   : cubic-bezier(0.39,  0.575, 0.565, 1    );
    --easeInOutSine : cubic-bezier(0.445, 0.05,  0.55,  0.95 );
    --easeInQuad    : cubic-bezier(0.55,  0.085, 0.68,  0.53 );
    --easeOutQuad   : cubic-bezier(0.25,  0.46,  0.45,  0.94 );
    --easeInOutQuad : cubic-bezier(0.455, 0.03,  0.515, 0.955);
    --easeInCubic   : cubic-bezier(0.55,  0.055, 0.675, 0.19 );
    --easeOutCubic  : cubic-bezier(0.215, 0.61,  0.355, 1    );
    --easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1    );
    --easeInQuart   : cubic-bezier(0.895, 0.03,  0.685, 0.22 );
    --easeOutQuart  : cubic-bezier(0.165, 0.84,  0.44,  1    );
    --easeInOutQuart: cubic-bezier(0.77,  0,     0.175, 1    );
    --easeInQuint   : cubic-bezier(0.755, 0.05,  0.855, 0.06 );
    --easeOutQuint  : cubic-bezier(0.23,  1,     0.32,  1    );
    --easeInOutQuint: cubic-bezier(0.86,  0,     0.07,  1    );
    --easeInExpo    : cubic-bezier(0.95,  0.05,  0.795, 0.035);
    --easeOutExpo   : cubic-bezier(0.19,  1,     0.22,  1    );
    --easeInOutExpo : cubic-bezier(1,     0,     0,     1    );
    --easeInCirc    : cubic-bezier(0.6,   0.04,  0.98,  0.335);
    --easeOutCirc   : cubic-bezier(0.075, 0.82,  0.165, 1    );
    --easeInOutCirc : cubic-bezier(0.785, 0.135, 0.15,  0.86 );
    --easeInBack    : cubic-bezier(0.6,  -0.28,  0.735, 0.045);
    --easeOutBack   : cubic-bezier(0.175, 0.885, 0.32,  1.275);
    --easeInOutBack : cubic-bezier(0.68, -0.55,  0.265, 1.55 );

}





/*------------------------------------*\
    $ELEMENTS
\*------------------------------------*/
html {
    background-color: white;
    color: var(--neutralColor200);
    font-family: var(--font);
    font-size: 62.5%;
    font-weight: 400;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

picture, img {
    display: block;
    width: 100%;
	/*     max-width: 100%;0614変更*/
    pointer-events: none;
}

@media (any-hover: hover) {
    a {
        transition: opacity .3s var(--easeOutQuart);
    }
    a:hover {
        opacity: .75;
    }
}





/*------------------------------------*\
    $VARIABLE-HIDE
\*------------------------------------*/
.portrait,
.landscape,
.less768,
.over768,
.less1024,
.over1024,
.less1280,
.over1280 { content-visibility: auto }

/* Aspect ratio */
@media screen and (orientation: landscape) {
    .portrait { display: none }
}
@media screen and (orientation: portrait) {
    .landscape { display: none }
}

/* iPad */
@media screen and (min-width: 768px) {
    .less768 { display: none }
}
@media screen and (max-width: 767px) {
    .over768 { display: none }
}

/* iPad Pro */
@media screen and (min-width: 1024px) {
    .less1024 { display: none }
}
@media screen and (max-width: 1023px) {
    .over1024 { display: none }
}

/* laptop */
@media screen and (min-width: 1280px) {
    .less1280 { display: none }
}
@media screen and (max-width: 1279px) {
    .over1280 { display: none }
}





/*------------------------------------*\
    $COMMON
\*------------------------------------*/
.wrap {
    max-width: 1366px;
    margin-inline: auto;
    overflow-y: hidden;
}
@media screen and (min-width: 1024px) {
    .wrap {
        max-width: 1366px;
    }
}
@media screen and (max-width: 1023px) {
    .wrap {
        max-width: 430px;
    }
}





/*------------------------------------*\
    $HEADER
\*------------------------------------*/
.header {
    position: fixed;
	top: 0;
	left: 0;
    z-index: 9999;
    width: 100%;
    background-color: var(--neutralColor100);
}
@media screen and (min-width: 1024px) {
    .header {
        padding-inline: calc(100% * (210 / 1366));
    }
}
@media screen and (max-width: 1023px) {
    .header {
        padding-right: calc(100% * (24 / 750));
        padding-left: calc(100% * (20 / 750));
    }
}

    .header__inner {
        display: flex;
        justify-content: space-between;
    }
    @media screen and (max-width: 1023px) {
        .header__inner {
            align-items: center;
            height: min(86px, 100vw * (150 / 750));
        }
    }

        @media screen and (min-width: 1024px) {
            .header__logo {
                width: calc(100% * (228 / 946));
                padding-top: calc(100% * (12 / 946));
            }
        }
        @media screen and (max-width: 1023px) {
            .header__logo {
                width: calc(100% * (360 / 710));
            }
        }

            .header__logo a {
                display: block;
            }


        @media screen and (min-width: 1024px) {
            .header__nav {
                display: flex;
                align-items: center;
                height: min(85px, 100vw * (85 / 1366));
            }
        }
        @media screen and (max-width: 1023px) {
            .header__nav {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100vh;
                height: 100dvh;
                background-color: rgba(0 0 0 / 0);
                overflow: hidden;
                transition: background-color .15s var(--easeOutQuart);
                pointer-events: none;
            }
            .header__nav.is-active {
                background-color: rgba(0 0 0 / 0.8);
                pointer-events: visible;
            }
        }

            @media screen and (min-width: 1024px) {
                .header__nav__btn {
                    display: none;
                }
            }
            @media screen and (max-width: 1023px) {
                .header__nav__btn {
                    position: absolute;
                    top: min(50px, 100vw * (50 / 750));
                    right: 16px;
                    z-index: 1;
                    display: block;
                    width: 20px;
                    height: 22px;
                    background-image: linear-gradient(#3293bb, #3293bb);
                    background-repeat: no-repeat;
                    background-position: 50% 50%;
                    background-size: 100% 4px;
                    transition: transform .3s var(--linear);
                }
                .header__nav__btn.is-active {
                    transform: translateX(-200px);
                    background-image: none;
                }
                .header__nav__btn::before,
                .header__nav__btn::after {
                    content: "";
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 100%;
                    height: 4px;
                    background-color: #3293bb;
                }
                .header__nav__btn::before {
                    top: 0;
                }
                .header__nav__btn::after {
                    top: 18px;
                }
                .header__nav__btn.is-active::before {
                    top: 50%;
                    transform: translate(-50%, -50%) rotate(45deg);
                }
                .header__nav__btn.is-active::after {
                    top: 50%;
                    transform: translate(-50%, -50%) rotate(-45deg);
                }
            }


            @media screen and (min-width: 1024px) {
                .header__nav__list {
                    display: flex;
                    align-items: center;
                    column-gap: 2em;
                }
            }
            @media screen and (max-width: 1023px) {
                .header__nav__list {
                    position: absolute;
                    top: 0;
                    right: 0;
                    transform: translateX(200px);
                    width: 200px;
                    height: 100%;
                    background-color: white;
                    transition: transform .3s var(--linear);
                }
                .header__nav.is-active .header__nav__list {
                    transform: none;
                }
            }

                @media screen and (min-width: 1024px) {
                    .header__nav__item {
                        position: relative;
                        font-size: min(1.4rem, calc(100vw * (14 / 1366)));
                    }
                    .header__nav__item:not(:last-of-type):before {
                        content: "|";
                        position: absolute;
                        top: 50%;
                        right: -0.75em;
                        transform: translateY(-50%);
                    }
                }
                @media screen and (max-width: 1023px) {
                    .header__nav__item {
                        border-bottom: 1px dotted #707070;
                    }
                }

                    @media screen and (max-width: 1023px) {
                        .header__nav__item a {
                            display: block;
                            color: #707070;
                            padding: 18px 20px;
                            font-size: 1.6rem;
                        }
                    }





/*------------------------------------*\
    $FOOTER
\*------------------------------------*/
.footer {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--neutralColor100);
}
@media screen and (min-width: 1024px) {
    .footer {
        height: min(160px, 100vw * (160 / 1366));
    }
}
@media screen and (max-width: 1023px) {
    .footer {
        height: min(109px, 100vw * (190 / 750));
    }
}

    .footer__logo {}
    @media screen and (min-width: 1024px) {
        .footer__logo {
            width: calc(100% * (240 / 1366));
        }
    }
    @media screen and (max-width: 1023px) {
        .footer__logo {
            width: calc(100% * (320 / 750));
        }
    }





/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
@media screen and (min-width: 1024px) {
    main {
        margin-top: min(85px, 100vw * (85 / 1366));
    }
}
@media screen and (max-width: 1023px) {
    main {
        margin-top: min(86px, 100vw * (150 / 750));
    }
}


section {
    --full: minmax(var(--gap), 1fr);
    --popout: minmax(0, calc(100% * (82.5 / 1366)));

    display: grid;
    grid-template-columns:
        [full-start] var(--full)
        [popout-start] var(--popout)
        [content-start] var(--content) [content-end]
        var(--popout) [popout-end]
        var(--full) [full-end];
}
@media screen and (min-width: 1024px) {
    section {
        --gap: calc(100% * (208 / 1366));
        --content: calc(100% * (785 / 1366));
    }
}
@media screen and (max-width: 1023px) {
    section {
        --gap: calc(100% * (50 / 750));
        --content: calc(100% * (650 / 750));
    }
}

    section > * {
        grid-column: content;
    }

    section > .popout {
        grid-column: popout;
    }

    section > .full {
        grid-column: full;
    }



.inner {
    width: calc(100% * (914 / 1366));
    margin-inline: auto;
}
@media screen and (min-width: 1024px) {
    .inner {
        width: calc(100% * (914 / 1366));
    }
}
@media screen and (max-width: 1023px) {
    .inner {
        width: calc(100% * (650 / 750));
    }
}




.zoom-wrapper {
    position: relative;
}

    .zoom-item {
        position: relative;
        display: block;
        transform: scale(1.2);
        transition: transform 1.8s .15s cubic-bezier(0.33, 0, 0.01, 1)
    }
    .zoom-item.is-active {
        transform: none;
    }



@media screen and (max-width: 1023px) {
    .slider-wrapper {
        position: relative;
    }
    .slider-wrapper .tns-controls button {
        position: absolute;
        top: 50%;
        border: 12px solid transparent;
        text-indent: -9999px;
        width: 0;
        height: 0;
    }
    .slider-wrapper .tns-controls button[data-controls=prev] {
        left: 0;
        transform: translate(-50%, -50%);
        border-right: 16px solid var(--primaryColor200);
        border-left: 0;
    }
    .slider-wrapper .tns-controls button[data-controls=next] {
        right: 0;
        transform: translate(50%, -50%);
        border-right: 0;
        border-left: 16px solid var(--primaryColor200);
    }
}




.kv {
    position: relative;
}

    .kv__btn {
        position: absolute;
        bottom: 0;
        display: block;
    }
    @media screen and (min-width: 1024px) {
        .kv__btn {
            aspect-ratio: 1086 / 204;
            top: min(540px, 100vw * (540 / 1366));
            left: calc(100% * (272 / 1366));
            width: calc(100% * (543 / 1366));
        }
    }
    @media screen and (max-width: 1023px) {
        .kv__btn {
            aspect-ratio: 724 / 203;
            top: calc(100vw * (1091 / 750));
            left: 50%;
            transform: translateX(-50%);
            width: calc(100% * (724 / 750));
        }
    }



@media screen and (min-width: 1024px) {
    .movie {
        padding-top: calc(100% * (120 / 1366));
        margin-bottom: calc(100% * (109 / 1366));
    }
}
@media screen and (max-width: 1023px) {
    .movie {
        padding-top: calc(100% * (135 / 750));
        margin-bottom: calc(100% * (139 / 750));
    }
}

    @media screen and (min-width: 1024px) {
        .movie h2 {
            margin-bottom: calc(100% * (49 / 785));
        }
    }
    @media screen and (max-width: 1023px) {
        .movie h2 {
            margin-bottom: calc(100% * (48 / 650));
        }
    }

        .movie iframe {
            aspect-ratio: 16 / 9;
            display: block;
            width: 100%;
        }
        @media screen and (max-width: 1023px) {
            .movie iframe {
                grid-column: full;
            }
        }



.about {}

    .about__inner {
        display: grid;
    }
    @media screen and (max-width: 1023px) {
        .about__inner {
            margin-bottom: calc(100% * (40 / 650));
        }
    }

        .about__inner h2 {
            grid-area: -1 / 1;
        }

        .about__list {
            grid-area: -1 / 1;
        }
        @media screen and (min-width: 1024px) {
            .about__list {
                margin-top: calc(100% * (199 / 950));
                filter: drop-shadow(5px 10px 10px rgb(6 50 66 / 0.15));
            }
        }
        @media screen and (max-width: 1023px) {
            .about__list {
                margin-top: calc(100% * (278 / 650));
                filter: drop-shadow(2.5px 5px 5px rgb(6 50 66 / 0.15));
            }
        }

            .about__item {
                position: relative;
            }
            @media screen and (min-width: 1024px) {
                .about__item + .about__item {
                    margin-top: calc(100% * (59 / 950));
                }
            }
            @media screen and (max-width: 1023px) {
                .about__item + .about__item {
                    margin-top: calc(100% * (88 / 650));
                }
            }

                .about__item > img {
                    position: absolute;
                }
                @media screen and (min-width: 1024px) {
                    .about__item:nth-of-type(1) > img {
                        top: min(176px, 100vw * (176 / 1366));
                        left: calc(100% * (28 / 950));
                        width: calc(100% * (468.2686 / 950));
                    }
                    .about__item:nth-of-type(2) > img {
                        top: min(173px, 100vw * (173 / 1366));
                        right: calc(100% * (33 / 950));
                        width: calc(100% * (438.171 / 950));
                    }
                    .about__item:nth-of-type(3) > img {
                        top: min(176px, 100vw * (176 / 1366));
                        left: calc(100% * (59 / 950));
                        width: calc(100% * (412.5563 / 950));
                    }
                }
                @media screen and (max-width: 1023px) {
                    .about__item:nth-of-type(1) > img {
                        top: min(339px, 100vw * (339 / 750));
                        left: calc(100% * (29 / 650));
                        width: calc(100% * (601.3164 / 650));
                    }
                    .about__item:nth-of-type(2) > img {
                        top: min(340px, 100vw * (340 / 750));
                        right: calc(100% * (69 / 650));
                        width: calc(100% * (516.9806 / 650));
                    }
                    .about__item:nth-of-type(3) > img {
                        top: min(347px, 100vw * (347 / 750));
                        left: calc(100% * (72 / 650));
                        width: calc(100% * (506.9288 / 650));
                    }
                }


    .about__content {
        position: relative;
        overflow: hidden;
    }

        .about__gif {
            aspect-ratio: 846 / 482;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
        }
        @media screen and (min-width: 1024px) {
            .about__gif {
                width: calc(100% * (846 / 1366));
                margin-top: calc(100% * (105 / 1366));
            }
        }
        @media screen and (max-width: 1023px) {
            .about__gif {
                width: calc(100% * (846 / 750));
                margin-top: calc(100% * (140 / 750));
            }
        }

            .about__gif::before {
                content: "";
                aspect-ratio: 859.46 / 46.91;
                position: absolute;
                top: 100%;
                left: 50%;
                transform: translateX(-50%);
                width: calc(100% * (860 / 846));
                background-image: url(assets/images/about-gif-shadow.png);
                background-repeat: no-repeat;
                background-position: 50% 0;
                background-size: contain;
            }


        .about__btn {
            position: absolute;
        }
        @media screen and (min-width: 1024px) {
            .about__btn {
                aspect-ratio: 1032 / 288;
                top: min(145px, 100vw * (145 / 1366));
                left: calc(100% * (658 / 1366));
                width: calc(100% * (516 / 1366));
            }
        }
        @media screen and (max-width: 1023px) {
            .about__btn {
                aspect-ratio: 696 / 198;
                top: min(496px, 100vw * (496 / 750));
                left: 50%;
                transform: translateX(-50%);
                width: calc(100% * (696 / 750));
            }
        }


        .about__banner {
            position: absolute;
            top: min(202px, calc(100vw * (202 / 750)));
            left: 50%;
            transform: translateX(-50%);
            width: calc(100% * (624 / 750));
            filter: drop-shadow(0 5px 6px rgb(255 255 255 / 0.15));
        }




@media screen and (min-width: 1024px) {
    .merit {
        padding-top: calc(100% * (100 / 1366));
        padding-bottom: calc(100% * (82 / 1366));
    }
}
@media screen and (max-width: 1023px) {
    .merit {
        padding-top: calc(100% * (137 / 750));
        padding-bottom: calc(100% * (99 / 750));
    }
}

    @media screen and (min-width: 1024px) {
        .merit h2 {
            margin-bottom: calc(100% * (37 / 785));
        }
    }
    @media screen and (max-width: 1023px) {
        .merit h2 {
            margin-bottom: calc(100% * (56 / 750));
        }
    }

    .merit__content {
        position: relative;
    }
    @media screen and (min-width: 1024px) {
        .merit__content {
            margin-bottom: calc(100% * (44 / 785));
        }
    }
    @media screen and (max-width: 1023px) {
        .merit__content {
            margin-bottom: calc(100% * (95 / 650));
        }
    }

        .merit__icon01, .merit__icon02, .merit__icon03 {
            position: absolute;
        }
        @media screen and (min-width: 1024px) {
            .merit__icon01, .merit__icon02, .merit__icon03 {
                top: 0;
                width: calc(100% * (171.9595 / 785));
            }
            .merit__icon01 {
                left: calc(100% * (44 / 785));
            }
            .merit__icon02 {
                left: calc(100% * (311 / 785));
            }
            .merit__icon03 {
                left: calc(100% * (578 / 785));
            }
        }
        @media screen and (max-width: 1023px) {
            .merit__icon01, .merit__icon02, .merit__icon03 {
                left: calc(100% * (196 / 650));
                width: calc(100% * (258.6211 / 650));
            }
            .merit__icon01 {
                top: min(53px, calc(100vw * (53 / 750)));
            }
            .merit__icon02 {
                top: min(641px, calc(100vw * (641 / 750)));
            }
            .merit__icon03 {
                top: min(1123px, calc(100vw * (1123 / 750)));
            }
        }

        .merit__slider {
            width: calc(100% * (500 / 650));
            margin-inline: auto;
        }


    .merit__content--sub {
        position: relative;
    }

        .merit__content--sub > img {
            position: absolute;
        }
        @media screen and (min-width: 1024px) {
            .merit__content--sub > img {
                top: min(215px, 100vw * (215 / 1366));
                left: calc(100% * (38 / 785));
                width: calc(100% * (323.6837 / 785));
            }
        }
        @media screen and (max-width: 1023px) {
            .merit__content--sub > img {
                top: min(366px, 100vw * (366 / 750));
                left: calc(100% * (71 / 650));
                width: calc(100% * (507.7828 / 650));
            }
        }
    


.example {
    background-color: #E7F1F4;
}
@media screen and (min-width: 1024px) {
    .example {
        padding-top: calc(100% * (99 / 1366));
        padding-bottom: calc(100% * (64 / 1366));
    }
}
@media screen and (max-width: 1023px) {
    .example {
        padding-top: calc(100% * (117 / 750));
        padding-bottom: calc(100% * (34 / 750));
    }
}

    .example__inner {
        display: grid;
    }

        .example__inner :is(h2, .example__content) {
            grid-area: 1 / -1;
        }

        @media screen and (min-width: 1024px) {
            .example__content {
                margin-top: calc(100% * (153 / 950));
            }
        }
        @media screen and (max-width: 1023px) {
            .example__content {
                margin-top: calc(100% * (158 / 650));
            }
        }

            .example__text {
                margin-inline: auto;
            }
            @media screen and (min-width: 1024px) {
                .example__text {
                    width: calc(100% * (873 / 950));
                    margin-bottom: calc(100% * (40 / 950));
                }
            }
            @media screen and (max-width: 1023px) {
                .example__text {
                    width: calc(100% * (491 / 650));
                    margin-bottom: calc(100% * (48 / 650));
                }
            }

            @media screen and (min-width: 1024px) {
                .example__list {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    grid-column-gap: calc(100% * (24 / 950));
                    margin-bottom: calc(100% * (44 / 950));
                    filter: drop-shadow(5px 10px 10px rgb(9 70 86 / 0.15));
                }
            }

                    .example__item a {
                        display: block;
                    }

                    .example__btn {
                        display: block;
                        margin-inline: auto;
                    }
                    @media screen and (min-width: 1024px) {
                        .example__btn {
                            width: calc(100% * (187 / 950));
                        }
                    }
                    @media screen and (max-width: 1023px) {
                        .example__btn {
                            width: calc(100% * (220 / 650));
                        }
                    }



@media screen and (min-width: 1024px) {
    .comparison {
        padding-top: calc(100% * (97 / 1366));
        margin-bottom: calc(100% * (118 / 1366));
    }
}
@media screen and (max-width: 1023px) {
    .comparison {
        /*padding-top: calc(100% * (120 / 750));*/
        margin-bottom: calc(100% * (138 / 750));
    }
}



@media screen and (min-width: 1024px) {
    .update {
        margin-bottom: calc(100% * (100 / 1366));
    }
}
@media screen and (max-width: 1023px) {
    .update {
        margin-bottom: calc(100% * (120 / 750));
    }
}

    .update__inner {
        position: relative;
    }

        .update__icon01, .update__icon02 {
            position: absolute;
        }
        @media screen and (min-width: 1024px) {
            .update__icon01, .update__icon02 {
                top: min(325px, 100vw * (325 / 1366));
                width: calc(100% * (410.8738 / 950));
            }
            .update__icon01 {
                left: calc(100% * (25 / 950));
            }
            .update__icon02 {
                left: calc(100% * (513 / 950));
            }
        }
        @media screen and (max-width: 1023px) {
            .update__icon01, .update__icon02 {
                left: calc(100% * (36 / 650));
                width: calc(100% * (578.8375 / 650));
            }
            .update__icon01 {
                top: min(358px, 100vw * (358 / 750));
            }
            .update__icon02 {
                top: min(1191px, 100vw * (1191 / 750));
            }
        }




.intro {
    position: relative;
}
@media screen and (min-width: 1024px) {
    .intro {
        margin-bottom: calc(100% * (120 / 1366));
    }
}
@media screen and (max-width: 1023px) {
    .intro {
        margin-bottom: calc(100% * (134 / 1366));
    }
}

    .intro__btn {
        position: absolute;
    }
    @media screen and (min-width: 1024px) {
        .intro__btn {
            aspect-ratio: 1032 / 288;
            top: min(715px, 100vw * (715 / 1366));
            left: calc(100% * (676 / 1366));
            width: calc(100% * (516 / 1366));
        }
    }
    @media screen and (max-width: 1023px) {
        .intro__btn {
            aspect-ratio: 696 / 198;
            top: min(1476px, 100vw * (1476 / 750));
            left: 50%;
            transform: translateX(-50%);
            width: calc(100% * (674 / 750));
        }
    }



@media screen and (min-width: 1024px) {
    .vision {
        margin-bottom: calc(100% * (42 / 1366));
    }
}
@media screen and (max-width: 1023px) {
    .vision {
        margin-bottom: calc(100% * (30 / 750));
    }
}

    .vision__inner {
        position: relative;
    }

        .vision__icon01, .vision__icon02, .vision__icon03, .vision__icon04, .vision__icon05, .vision__icon06 {
            position: absolute;
        }
        .vision__icon01 {
            top: min(197px, 100vw * (197 / 1366));
            left: calc(100% * (167 / 950));
            width: calc(100% * (47.9333 / 950));
        }
        .vision__icon02 {
            top: min(197px, 100vw * (197 / 1366));
            left: calc(100% * (445 / 950));
            width: calc(100% * (59.1254 / 950));
        }
        .vision__icon03 {
            top: min(207px, 100vw * (207 / 1366));
            left: calc(100% * (723 / 950));
            width: calc(100% * (68.0377 / 950));
        }
        .vision__icon04 {
            top: min(622px, 100vw * (622 / 1366));
            left: calc(100% * (151 / 950));
            width: calc(100% * (74.1821 / 950));
        }
        .vision__icon05 {
            top: min(622px, 100vw * (622 / 1366));
            left: calc(100% * (435 / 950));
            width: calc(100% * (73.4794 / 950));
        }
        .vision__icon06 {
            top: min(622px, 100vw * (622 / 1366));
            left: calc(100% * (723 / 950));
            width: calc(100% * (69.7184 / 950));
        }


    .vision__content + .vision__content {
        margin-top: calc(100% * (96 / 650));
    }

        .vision__content h2 {
            margin-bottom: calc(100% * (64 / 650));
        }

        .vision__slider {
            width: calc(100% * (500 / 650));
            margin-inline: auto;
        }




.present {
    position: relative;
}

    .present__banner {
        position: absolute;
        top: min(202px, calc(100vw * (202 / 750)));
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% * (624 / 750));
        filter: drop-shadow(0 5px 6px rgb(255 255 255 / 0.15));
    }

    .present__btn {
        position: absolute;
    }
    @media screen and (min-width: 1024px) {
        .present__btn {
            aspect-ratio: 1032 / 288;
            top: min(146px, 100vw * (146 / 1366));
            left: calc(100% * (658 / 1366));
            width: calc(100% * (516 / 1366));
        }
    }
    @media screen and (max-width: 1023px) {
        .present__btn {
            aspect-ratio: 696 / 198;
            top: min(500px, 100vw * (500 / 750));
            left: 50%;
            transform: translateX(-50%);
            width: calc(100% * (696 / 750));
        }
    }





.contact {
    position: relative;
    z-index: 1;
    background-image: linear-gradient(transparent 0, transparent 50%, var(--primaryColor200) 90%, var(--primaryColor200) 100%);
}
.contact::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100%;
}
@media screen and (min-width: 1024px) {
    .contact {
        padding-top: min(55px, 100% * (55 / 1366));
        padding-bottom: min(55px, 100% * (55 / 1366));
    }
    .contact::before {
        aspect-ratio: 1366 / 2072;
        top: max(-790px, -100vw * (790 / 1366));
        background-image: url(assets/images/bg-line-pc.svg);
    }
}
@media screen and (max-width: 1023px) {
    .contact {
        margin-top: min(162px, 100% * (162 / 750));
        padding-bottom: min(55.61333px, 100% * (97 / 750));
    }
    .contact::before {
        aspect-ratio: 750 / 2416;
        top: max(-162px, -100vw * (162 / 750));
        background-image: url(assets/images/bg-line-sp.svg);
    }
}

    .contact__inner {
        width: calc(100% * (914 / 1366));
        margin-inline: auto;
    }
    @media screen and (min-width: 1024px) {
        .contact__inner {
            width: calc(100% * (914 / 1366));
        }
    }
    @media screen and (max-width: 1023px) {
        .contact__inner {
            width: calc(100% * (650 / 750));
        }
    }

        .contact__form {
            margin-inline: auto;
            background-color: white;
        }
        @media screen and (min-width: 1024px) {
            .contact__form {
                width: calc(100% * (784 / 914));
                padding-inline: calc(100% * (93 / 914));
                padding-bottom: calc(100% * (44 / 914));
                border-radius: min(30px, calc(100vw * (30 / 1366)));
            }
        }
        @media screen and (max-width: 1023px) {
            .contact__form {
                width: calc(100% * (640 / 650));
                padding-inline: calc(100% * (58 / 650));
                padding-bottom: calc(100% * (90 / 650));
                border-radius: min(30px, calc(100vw * (30 / 750)));
            }
        }

            .contact__form h2 {
                position: relative;
                left: 50%;
                transform: translateX(-50%);
            }
            @media screen and (min-width: 1024px) {
                .contact__form h2 {
                    width: calc(100% * (784 / 598));
                    top: max(-27px, -100vw * (27 / 1366));
                }
            }
            @media screen and (max-width: 1023px) {
                .contact__form h2 {
                    width: calc(100% * (750 / 524));
                    top: max(-15.48px, -100vw * (27 / 750));
                }
            }

            .contact__description {
                line-height: calc(22 / 14);
                text-align: center;
            }
            @media screen and (min-width: 1024px) {
                .contact__description {
                    margin-bottom: calc(100% * (64 / 598));
                    font-size: min(1.4rem, 100vw * (14 / 1366));
                }
            }
            @media screen and (max-width: 1023px) {
                .contact__description {
                    margin-bottom: calc(100% * (60 / 524));
                    font-size: min(1.204rem, 100vw * (21 / 750));
                }
            }


            .contact__content {}
            @media screen and (min-width: 1024px) {
                .contact__content {
                }
            }
            @media screen and (max-width: 1023px) {
                .contact__content {
                }
            }

                @media screen and (min-width: 1024px) {
                    .contact__box {
                        display: grid;
                        grid-template-columns: 1fr calc(100% * (377 / 598));
                    }
                    .contact__box + .contact__box {
                        margin-top: calc(100% * (23 / 598));
                    }
                }
                @media screen and (max-width: 1023px) {
                    .contact__box + .contact__box {
                        margin-top: calc(100% * (30 / 524));
                    }
                }

                    .contact__box dt {
                        line-height: 1.25;
                    }
                    @media screen and (min-width: 1024px) {
                        .contact__box dt {
                            font-size: min(1.9rem, 100vw * (19 / 1366));
                        }
                    }
                    @media screen and (max-width: 1023px) {
                        .contact__box dt {
                            margin-bottom: calc(100% * (12 / 524));
                            font-size: min(1.6426rem, 100vw * (28.65 / 750));
                        }
                    }

                        .contact__box dt.is-required::after {
                            content: "必須";
                            display: inline-flex;
                            justify-content: center;
                            align-items: center;
                            width: 32px;
                            height: 16px;
                            margin-left: 1.176em;
                            background-color: var(--primaryColor100);
                            border-radius: 0.176em;
                            color: var(--primaryColor200);
                            font-size: 1.0rem;
                        }

                        .contact__box dt p {
                            display: inline;
                        }


                    .contact__box dd {}

                        .contact__box dd :is(input[type=text], input[type=tel], input[type=email], select, textarea) {
                            width: 100%;
                            border: 1px solid #666;
                            line-height: 1.5;
                        }
                        .contact__box dd :is(input[type=text], input[type=tel], input[type=email], select) {
                            display: flex;
                            align-items: center;
                            white-space: nowrap;
                        }
                        .contact__box dd textarea {
                            padding-block: 1em;
                            line-height: 1.5;
                        }
                        .contact__box dd ::placeholder {
                            color: #cacaca;
                        }
                        @media screen and (min-width: 1024px) {
                            .contact__box dd :is(input[type=text], input[type=tel], input[type=email], select, textarea) {
                                padding-left: 2.333em;
                                border-radius: .25em;
                                font-size: min(1.2rem, 100vw * (12 / 1366));
                            }
                            .contact__box dd :is(input[type=text], input[type=tel], input[type=email], select) {
                                height: min(36px, 100vw * (36 / 1366));
                            }
                            .contact__box dd textarea {
                                height: min(168px, 100vw * (168 / 1366));
                            }
                        }
                        @media screen and (max-width: 1023px) {
                            .contact__box dd :is(input[type=text], input[type=tel], input[type=email], select, textarea) {
                                padding-left: 1.542em;
                                border-radius: .238em;
                                font-size: min(1.204rem, 100vw * (21 / 750));
                            }
                            .contact__box dd :is(input[type=text], input[type=tel], input[type=email], select) {
                                height: min(35.54667px, 100vw * (62 / 750));
                            }
                        }


                @media screen and (min-width: 1024px) {
                    .contact__term {
                        margin-top: calc(100% * (38 / 598));
                        margin-bottom: calc(100% * (34 / 598));
                    }
                }
                @media screen and (max-width: 1023px) {
                    .contact__term {
                        margin-top: calc(100% * (48 / 524));
                        margin-bottom: calc(100% * (42 / 524));
                    }
                }

                    .contact__term dt {
                        text-align: center;
                    }
                    @media screen and (min-width: 1024px) {
                        .contact__term dt {
                            margin-bottom: .667em;
                            font-size: min(1.8rem, 100vw * (18 / 1366));
                        }
                    }
                    @media screen and (max-width: 1023px) {
                        .contact__term dt {
                            margin-bottom: .462em;
                            font-size: min(1.490667rem, 100vw * (26 / 750));
                        }
                    }

                    .contact__term dd:nth-of-type(1) {
                        color: var(--primaryColor200);
                        font-weight: 300;
                        letter-spacing: .02em;
                        font-feature-settings: "palt";
                    }
                    @media screen and (min-width: 1024px) {
                        .contact__term dd:nth-of-type(1) {
                            margin-bottom: 1.692em;
                            font-size: min(1.3rem, 100vw * (13 / 1366));
                            line-height: 1.692;
                        }
                    }
                    @media screen and (max-width: 1023px) {
                        .contact__term dd:nth-of-type(1) {
                            margin-bottom: 1.524em;
                            font-size: min(1.204rem, 100vw * (21 / 750));
                            line-height: 1.714;
                        }
                    }

                    .contact__term dd:nth-of-type(2) {
                        width: fit-content;
                        margin-inline: auto;
                        color: black;
                        font-weight: 500;
                        letter-spacing: .02em;
                    }
                    @media screen and (min-width: 1024px) {
                        .contact__term dd:nth-of-type(2) {
                            font-size: min(1.6rem, 100vw * (16 / 1366));
                        }
                    }
                    @media screen and (max-width: 1023px) {
                        .contact__term dd:nth-of-type(2) {
                            font-size: min(1.4236rem, 100vw * (24.83 / 750));
                        }
                    }

                        .contact__term dd:nth-of-type(2) input[type=checkbox] {
                            appearance: auto;
                            display: inline-block;
                            cursor: pointer;
                        }
                        @media screen and (min-width: 1024px) {
                            .contact__term dd:nth-of-type(2) input[type=checkbox] {
                                width: 1em;
                                margin-right: .875em;
                            }
                        }
                        @media screen and (max-width: 1023px) {
                            .contact__term dd:nth-of-type(2) input[type=checkbox] {
                                width: 1.083em;
                                margin-right: .725em;
                            }
                        }

                        .contact__term dd a {
                            color: blue;
                        }



                .contact__content input[type=submit] {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-inline: auto;
                    border-radius: 99px;
                    background-color: var(--primaryColor200);
                    color: white;
                    font-weight: 500;
                    cursor: pointer;
                }
                @media screen and (min-width: 1024px) {
                    .contact__content input[type=submit] {
                        width: 14.364em;
                        height: 2.545em;
                        font-size: min(2.2rem, 100vw * (22 / 1366));
                    }
                }
                @media screen and (max-width: 1023px) {
                    .contact__content input[type=submit] {
                        position: relative;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 15.3889em;
                        height: 2.9444em;
                        font-size: min(2.064rem, 100vw * (36 / 750));
                    }
                }



/*フォーム用追記*/
@media screen and (min-width:767px){
.pc-form{
	width:70%; margin: 0 auto; 
	margin-top:7%;
	height:1150px;
}
}
@media screen and (max-width:767px){
.pc-form{
	margin-top:15%;
	height: 1150px;
}
}


@media screen and (min-width:767px){.example__item{
	margin-top:5%;
	}}