@charset "UTF-8";

/* ==================================================
    header
================================================== */
header {

    & :where(input[type="checkbox"], label){ display:none;}
    & nav { position:fixed; inset:auto auto -6.25em 0; margin-left:min(4em, 3.75vw); z-index:var(--header-z);}
    & ul { display:flex; flex-direction:row-reverse; gap:1em; width:fit-content;}
    & li { display:contents;}
    & a {
        display:flex;
        align-items:center;
        gap:0.5em;
        padding:0.7894em 0.5em;
        /* viewport:768-960px  255-361px */
        inline-size:clamp(15.938rem, calc(-10.562rem + 55.208vw), 22.563rem);
        writing-mode:vertical-lr;
        text-decoration:none;
        color:inherit;
        /* viewport:768-960px  17-19px */
        font-size:clamp(1.063rem, calc(0.563rem + 1.042vw), 1.188rem);
        font-weight:bold;
        border:solid 1px currentColor;
        border-radius:100vmax;
        background-color:#fff;
    }
    & a:before {
        content:"";
        display:block;
        width:.625em;
        height:auto;
        aspect-ratio:1;
        border:inherit;
        border-radius:100%;
        background-color:var(--blue);
    }

    /* 表示・非表示処理 */
    & nav { opacity:0; pointer-events:none; transition:opacity var(--trans);}
    &.active nav { opacity:1; pointer-events:auto;}
}
@media (any-hover:hover) {
    header a:hover { opacity:1!important; filter:brightness(0.9);}
}
@media (any-hover:none) {
    header a:active { opacity:1!important; filter:brightness(0.9);}
}
@media (width < 960px) {
    body:has(#sp_btn:checked) { overflow-y:hidden;}
    header {
        & label {
            --btn-size:50px;

            position:fixed;
            inset:0.5em 0.5em auto auto;
            display:flex;
            flex-direction:column;
            justify-content:center;
            align-items:center;
            gap:5px;
            width:var(--btn-size);
            height:var(--btn-size);
            font-size:13px;
            font-weight:bold;
            color:var(--navy);
            cursor:pointer;
            z-index:calc(var(--header-z) + 1);

            & .span_wrap {
                --rotate:45deg;

                position:relative;
                width:70%;
                height:16px;
            }
            & span {
                position:absolute;
                left:0;
                display:block;
                width:100%;
                height:2px;
                background-color:currentColor;
                transition:all var(--trans);
            }
            & span:nth-of-type(1) { top:0%;}
            & span:nth-of-type(2) { top:50%; translate:0 -50%;}
            & span:nth-of-type(3) { bottom:0%;}
            & .t {
                display:grid;
                font-size:13px;
                font-weight:bold;
                text-align:center;
            }
            & .t p { grid-area:1/-1; transition:all var(--trans);}
            & .t p:nth-of-type(1) { opacity:1;}
            & .t p:nth-of-type(2) { opacity:0;}
        }

        & nav {
            inset:0 auto auto 0;
            display:grid;
            place-items:center;
            width:100dvw;
            height:100dvh;
            margin:auto;
            background-color:var(--blue);
            translate:100% 0;
            transition:translate var(--trans);

            opacity:1;
            pointer-events:auto;
        }
        & ul { flex-direction:column;}
        & a { position:relative; justify-content:center; writing-mode:unset; text-align:center;}
        & a:before { position:absolute; inset:50% auto auto 0; translate:100% -50%;}

        /* checkあり */
        & #sp_btn:checked + label {
            color:#fff;

            & .t p:nth-of-type(1) { opacity:0;}
            & .t p:nth-of-type(2) { opacity:1;}
            & span:nth-of-type(1) { top:50%; translate:0 -50%; rotate:var(--rotate);}
            & span:nth-of-type(2) { opacity:0;}
            & span:nth-of-type(3) { bottom:50%; translate:0 50%; rotate:calc(var(--rotate) * -1);}
        }
        & #sp_btn:checked ~ nav { translate:0% 0;}
    }
}


/* ==================================================
    .fixed_link
================================================== */
.fixed_link {
    position:fixed;
    inset:auto 0 0 auto;
    display:block;
    padding-block:0.8888em;
    padding-inline:4.4444em 1.1851em;
    background-color:var(--red);
    border-radius:1.85em 0 0 0;
    color:#fff;
    font-size:27px;
    font-weight:900;
    line-height:1.25;
    z-index:calc(var(--header-z) + 2);

    & .travel { position:absolute; inset:auto auto 0.875rem 0.875rem;}
    & .plane { display:none;}
    & p { color:#fff;}
    & p:after {
        content:"";
        display:inline-block;
        width:0.75em;
        height:auto;
        aspect-ratio:1;
        background:url(../../image/icon_arrow.svg) no-repeat center / contain;
    }
}
@media (width < 960px) {
    .fixed_link {
        z-index:calc(var(--header-z) - 1);
    }
}
@media (width < 768px){
    .fixed_link {
        width:100%;
        padding:0.8em 0;
        /* viewport:375-768px  20-27px */
        font-size:clamp(1.25rem, calc(0.833rem + 1.781vw), 1.688rem);
        text-align:center;
        border-radius:0;

        & .travel { width:2.2em; inset:auto 1em 0.3em auto;}
        & .plane { display:block; position:absolute; width:3em; inset:50% auto auto 0.575em; translate:0 -50%;}
    }
}

/* ==================================================
    .intro
================================================== */
.intro {
    position:relative;
    /* viewport:768-960px  28.5-60px */
    padding-top:clamp(1.781rem, calc(-6.094rem + 16.406vw), 3.75rem);
    /* viewport:768-960px  91.5-182.5px */
    padding-bottom:clamp(5.719rem, calc(-17.031rem + 47.396vw), 11.406rem);
    background:url(../../image/bg.png) repeat center;

    & :where(.logo, .cp_title, .period) { margin-inline:auto;}
    & .logo {
        /* viewport:768-960px  158-372px */
        width:clamp(9.875rem, calc(-43.625rem + 111.458vw), 23.25rem);
    }
    & .cp_title {
        /* viewport:768-960px  18-33px */
        margin-top:clamp(1.125rem, calc(-2.625rem + 7.813vw), 2.063rem);
        width:min(1200px, 95%);
    }
    & .period {
        /* viewport:768-960px  21-44px */
        margin-top:clamp(1.313rem, calc(-4.437rem + 11.979vw), 2.75rem);
        width:min(745px, 95%);
    }
    & p.center { text-align:center;}
    & .catch {
        position:relative;
        display:flex;
        flex-direction:column;
        align-items:center;
        /* viewport:768-960px  35-72px */
        gap:clamp(2.188rem, calc(-7.062rem + 19.271vw), 4.5rem);
        /* viewport:768-960px  38.5-165px */
        margin-top:clamp(2.406rem, calc(-29.219rem + 65.885vw), 10.313rem);

        & p {
            margin-top:calc((1lh - 1em) / -2);
            color:#fff;
            /* viewport:768-960px  16.5-26px */
            font-size:clamp(1.031rem, calc(-1.344rem + 4.948vw), 1.625rem);
            font-weight:400;
            text-align:center;
            line-height:2.3;
        }
        & .abs { position:absolute;}
        & .abs img { max-width:unset;}
        .family { inset:auto 97% -64px auto;}
        .beach { inset:312px auto auto 92.75%;}
    }
    & .appeal {
        /* viewport:768-960px  46.5-170px */
        margin-top:clamp(2.906rem, calc(-27.969rem + 64.323vw), 10.625rem);
        /* viewport:768-960px  10-60px */
        padding-inline:clamp(0.625rem, calc(-11.875rem + 26.042vw), 3.75rem);
        /* viewport:768-960px  55-95px */
        padding-block:0 clamp(3.438rem, calc(-6.562rem + 20.833vw), 5.938rem);
        background-color:#fff;
        
        & .title {
            display:flex;
            align-items:center;
            width:fit-content;
            margin-inline:auto;
            /* viewport:768-960px  10-22px */
            padding-block:clamp(0.625rem, calc(-2.375rem + 6.25vw), 1.375rem);
            /* viewport:768-960px  24-54px */
            padding-inline:clamp(1.5rem, calc(-6rem + 15.625vw), 3.375rem);
            background-color:var(--navy);
            /* viewport:768-960px  26-50px */
            font-size:clamp(1.625rem, calc(-4.375rem + 12.5vw), 3.125rem);
            font-weight:bold;
            line-height:1.32;
            color:var(--yellow);
            translate:0 -50%;

            & small {
                /* viewport:768-960px  15-26px */
                font-size:clamp(0.938rem, calc(-1.812rem + 5.729vw), 1.625rem);
            }
            & small:first-of-type { margin-left:0.25em;}
        }
        & > p.center {
            /* viewport:768-960px  12-22px */
            margin-top:clamp(0.75rem, calc(-1.75rem + 5.208vw), 1.375rem);
            margin-inline:auto;
            width:90%;
            /* viewport:768-960px  16-17px */
            font-size:clamp(1rem, calc(0.75rem + 0.521vw), 1.063rem);
        }
    }
    & .profile {
        display:grid;
        grid-template:
            "img t1" auto
            "img company" auto
            "img name" auto
            "img t2" 1fr / auto 1fr;
        gap:0 35px;
        /* viewport:768-960px  19.5-36.5px */
        padding-block:clamp(1.219rem, calc(-3.031rem + 8.854vw), 2.281rem) 0;
        /* viewport:768-960px  20-48px */
        padding-inline:clamp(1.25rem, calc(-5.75rem + 14.583vw), 3rem);
        background-color:var(--sky);

        & .img {
            grid-area:img;
            /* viewport:768-960px  158-281px */
            width:clamp(9.875rem, calc(-20.875rem + 64.063vw), 17.563rem);
        }
        & .t1 {
            grid-area:t1;
            width:fit-content;
            padding:0.25em;
            /* viewport:768-960px  14-18px */
            font-size:clamp(0.875rem, calc(-0.125rem + 2.083vw), 1.125rem);
            color:#fff;
            background-color:var(--pink);
        }
        & .company {
            grid-area:company;
            margin-top:1em;
            /* viewport:768-960px  15-20px */
            font-size:clamp(0.938rem, calc(-0.312rem + 2.604vw), 1.25rem);
        }
        & .name {
            grid-area:name;
            /* viewport:768-960px  27-35px */
            font-size:clamp(1.688rem, calc(-0.312rem + 4.167vw), 2.188rem);
        }
        & .name small { font-size:0.85em;}
        & .t2 {
            grid-area:t2;
            margin-block:1em;
            /* viewport:768-960px  14-17px */
            font-size:clamp(0.875rem, calc(0.125rem + 1.563vw), 1.063rem);
            line-height:2;
            text-align:justify;
        }
    }
    & .sec_title {
        /* viewport:768-960px  10-32px */
        --clip-range:clamp(0.625rem, calc(-4.875rem + 11.458vw), 2rem);

        padding:6px;
        background-color:var(--blue);
        text-align:center;
        color:#fff;
        /* viewport:768-960px  25-35px */
        font-size:clamp(1.563rem, calc(-0.937rem + 5.208vw), 2.188rem);
        font-weight:bold;
        clip-path:polygon(
            var(--clip-range) 0,
            calc(100% - var(--clip-range)) 0,
            100% 50%,
            calc(100% - var(--clip-range)) 100%,
            var(--clip-range) 100%,
            0 50%
        );
    }
    & :nth-child(1 of .sec_title) {
        /* viewport:768-960px  35-59px */
        margin-top:clamp(2.188rem, calc(-3.812rem + 12.5vw), 3.688rem);
    }
    & :nth-child(2 of .sec_title) {
        /* viewport:768-960px  53-57px */
        margin-top:clamp(3.313rem, calc(2.313rem + 2.083vw), 3.563rem);        
    }
    & .risk {
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        /* viewport:768-960px  25-34px */
        column-gap:clamp(1.563rem, calc(-0.687rem + 4.688vw), 2.125rem);
        /* viewport:768-960px  48-64px */
        row-gap:clamp(3rem, calc(-1rem + 8.333vw), 4rem);
        /* viewport:768-960px  48-64px */
        margin-top:clamp(3rem, calc(-1rem + 8.333vw), 4rem);
        font-size:1rem;

        & li {
            position:relative;
            display:flex;
            flex-direction:column;
            align-items:center;
            padding:3em 15px 2.25em;
            width:min(337px, 90%);
            background-color:#FFFBCC;
            border-radius:3em;
        }
        & .risk_name {
            position:absolute;
            width:5.3333em;
            padding:0.1666em;
            /* viewport:768-960px  25-30px */
            font-size:clamp(1.563rem, calc(0.313rem + 2.604vw), 1.875rem);
            font-weight:bold;
            color:#fff;
            text-align:center;
            border-radius:100vmax;
            background-color:var(--pink);
            inset:0 auto auto 50%;
            translate:-50% -50%;
        }
        & .risk_img img { border-radius:100vmax;}
        & p.center {
            margin-top:1em;
            /* viewport:768-960px  16-17px */
            font-size:clamp(1rem, calc(0.75rem + 0.521vw), 1.063rem);
            line-height:2;
        }
    }
    & .point {
        display:flex;
        justify-content:center;
        flex-wrap:wrap;
        gap:7.785em 2.125em;
        margin-top:7.785em;

        & li { position:relative; z-index:1;}
        & li:nth-of-type(1) { --str-color:var(--pink);}
        & li:nth-of-type(2) { --str-color:#007EAA;}
        & li:nth-of-type(3) { --str-color:#7C3900;}
        & li:before {
            content:"";
            position:absolute;
            display:block;
            width:190px;
            height:auto;
            aspect-ratio:1;
            background:url(../../image/intro/light.svg) no-repeat center / contain;
            inset:auto auto 100% 50%;
            translate:-50% 50%;
            z-index:-1;
        }
        & .img { position:absolute; inset:auto auto 100% 50%; translate:-50% 30%;}
        & .circle {
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            width:min(337px, 80vw);
            height:auto;
            aspect-ratio:1;
            background-color:#fff;
            border-radius:100vmax;
            border:solid 4px var(--blue);
            z-index:1;
        }
        & .point_title {
            /* viewport:768-960px  20-25px */
            font-size:clamp(1.25rem, calc(0rem + 2.604vw), 1.563rem);
            font-weight:bold;
            text-align:center;
            line-height:1.475;
        }
        & .point_title strong {
            display:block;
            /* viewport:768-960px  35-40px */
            font-size:clamp(2.188rem, calc(0.938rem + 2.604vw), 2.5rem);
            font-weight:bold;
            color:var(--str-color, var(--black));
        }
        & .point_title span { letter-spacing:-0.15em;}
        & p.center {
            margin-top:10px;
            /* viewport:768-960px  16-17px */
            font-size:clamp(1rem, calc(0.75rem + 0.521vw), 1.063rem);
            line-height:2;
        }
    }
    & .flow {
        position:relative;
        /* viewport:768-960px  26-100px */
        margin-top:clamp(1.625rem, calc(-16.875rem + 38.542vw), 6.25rem);
        /* viewport:768-960px  48-100px */
        margin-bottom:clamp(3rem, calc(-10rem + 27.083vw), 6.25rem);
        /* viewport:768-960px  20-45px */
        font-size:clamp(1.25rem, calc(-5rem + 13.021vw), 2.813rem);
        color:var(--yellow);
        font-weight:900;
        text-align:center;
        line-height:1.5;
    }
    & .flow:before {
        content:"";
        position:absolute;
        display:block;
        width:auto;
        height:1em;
        aspect-ratio:55/45;
        background:url(../../image/icon_flow.svg) no-repeat center / contain;
        inset:100% auto auto 50%;
        translate:-50% 50%;
    }
    & .youtube { width:min(955px, 100%); margin-inline:auto;}
    & .youtube img { width:100%; height:auto;}
}
@media (width < 960px){
    .intro { z-index:0;}
}
@media (width < 768px){
    .intro {

        & .catch {
            display:grid;
            grid-template:
                "img img" auto
                "p p" auto
                "family beach" 1fr / 1fr 1fr;
            justify-content:center;
    
            & picture { grid-area:img;}
            & p { grid-area:p; word-break:keep-all; line-height:1.65;}
            & .family { grid-area:family; justify-self:end; width:30.25vw;}
            & .beach { grid-area:beach; justify-self:start; width:29.75vw;}
            & :is(.family, .beach) img { width:100%; height:auto;}
            & .abs { position:static;}
        }
        & .appeal {
            margin-inline:-2.5vw;
    
            & .title { translate:0 -25%;}
            & > p.center { text-align:start;}
        }
        & .profile {
            grid-template:
                "img" auto
                "t1" auto
                "company" auto
                "name" auto
                "t2" 1fr / auto;
            justify-items:center;
            padding-bottom:28px;
    
            & .t1 { margin-top:1em;}
            & .company { margin-top:0.5em;}
            & .t2 { margin-bottom:0;}
        }
    }
}


/* ==================================================
    .overview
================================================== */
.overview {
    /* viewport:768-960px  15-150px */
    padding-top:clamp(0.938rem, calc(-32.812rem + 70.313vw), 9.375rem);
    /* viewport:768-960px  60-200px */
    padding-bottom:clamp(3.75rem, calc(-31.25rem + 72.917vw), 12.5rem);

    & .title_img { width:min(1064px, 95%); margin-inline:auto;}
    & .prize_img {
        /* viewport:768-960px  31.5-100px */
        --clip-size:clamp(1.969rem, calc(-15.156rem + 35.677vw), 6.25rem);
    
        display:grid;
        place-items:center;
        /* viewport:768-960px  12-60px */
        margin-top:clamp(0.75rem, calc(-11.25rem + 25vw), 3.75rem);
        /* viewport:768-960px  50-95px */
        margin-bottom:clamp(3.125rem, calc(-8.125rem + 23.438vw), 5.938rem);
        margin-inline:auto;
        /* viewport:768-960px  20-50px */
        padding-top:clamp(1.25rem, calc(-6.25rem + 15.625vw), 3.125rem);
        /* viewport:768-960px  16-42.5px */
        padding-inline:clamp(1rem, calc(-5.625rem + 13.802vw), 2.656rem);
        /* viewport:768-960px  20-70px */
        padding-bottom:clamp(1.25rem, calc(-11.25rem + 26.042vw), 4.375rem);
        width:min(1200px, 95%);
        background:url(../../image/bg.png) repeat center;
        clip-path:polygon(
            var(--clip-size) 0,
            calc(100% - var(--clip-size)) 0,
            100% var(--clip-size),
            100% calc(100% - var(--clip-size)),
            calc(100% - var(--clip-size)) 100%,
            var(--clip-size) 100%,
            0 calc(100% - var(--clip-size)),
            0 var(--clip-size)
        );
    }
    & table {
        /* viewport:768-960px  27.5-70px */
        margin-top:clamp(1.719rem, calc(-8.906rem + 22.135vw), 4.375rem);
        /* viewport:768-960px  44.5-150px */
        margin-bottom:clamp(2.781rem, calc(-23.594rem + 54.948vw), 9.375rem);
    }
    & tr + tr { border-top:dashed 1px var(--black);}
    & :where(th, td) { padding:24px 12px;}
    & th {
        width:22.5%;
        color:var(--pink);
        /* viewport:768-960px  20-24px */
        font-size:clamp(1.25rem, calc(0.25rem + 2.083vw), 1.5rem);
        vertical-align:top;
        text-align:start;
        line-height:1.6;
    }
    & td {
        width:77.5%;
        /* viewport:768-960px  18-20px */
        font-size:clamp(1.125rem, calc(0.625rem + 1.042vw), 1.25rem);
        font-family:var(--noto);
    }
    & .tr1 dl { display:grid; grid-template-columns:300px 65px;gap:0 1em;}
    & .tr1 dd { text-align:end;}
    & .tr3 dl dt { margin-top:1.3em; padding-left:1em; text-indent:-1em; font-weight:bold;}
    & .tr3 dl dd { margin-left:1em;}
    & .tr4 { font-weight:bold;}
    & .tr5 dt { font-weight:bold;}
    & .tr5 dt:not(:first-of-type) { margin-top:1.3em;}
    & .tr5 dd {
        display:flex;
        flex-wrap:wrap;
        gap:0 1em;
        max-width:35em;
        /* viewport:768-960px  14-17px */
        font-size:clamp(0.875rem, calc(0.125rem + 1.563vw), 1.063rem);
    }
    & .tr6 .indent { font-weight:400;}
    & table .indent {
        margin-top:0.75em;
        /* viewport:768-960px  14-17px */
        font-size:clamp(0.875rem, calc(0.125rem + 1.563vw), 1.063rem);
        font-weight:300;
    }
    
    & .large { font-weight:bold; text-align:center;}
    & :nth-child(1 of .large) {
        /* viewport:768-960px  20-34px */
        margin-top:clamp(1.25rem, calc(-2.25rem + 7.292vw), 2.125rem);
        /* viewport:768-960px  20-26px */
        font-size:clamp(1.25rem, calc(-0.25rem + 3.125vw), 1.625rem);
    }
    & :nth-child(2 of .large) {
        /* viewport:768-960px  17.5-51.5px */
        margin-top:clamp(1.094rem, calc(-7.406rem + 17.708vw), 3.219rem);
        /* viewport:768-960px  18-26px */
        font-size:clamp(1.125rem, calc(-0.875rem + 4.167vw), 1.625rem);
    }
    & .small {
        margin-top:1em;
        /* viewport:768-960px  14-17px */
        font-size:clamp(0.875rem, calc(0.125rem + 1.563vw), 1.063rem);
        text-align:center;
    }
    
    & .products {
        display:flex;
        flex-direction:column;
        align-items:center;
        margin-top:1em;
        /* viewport:768-960px  30-34px */
        padding-top:clamp(1.875rem, calc(0.875rem + 2.083vw), 2.125rem);
        /* viewport:768-960px  20-40px */
        padding-inline:clamp(1.25rem, calc(-3.75rem + 10.417vw), 2.5rem);
        /* viewport:768-960px  52.5-60px */
        padding-bottom:clamp(3.281rem, calc(1.406rem + 3.906vw), 3.75rem);
        background:url(../../image/bg.png) repeat center;
        /* viewport:768-960px  25-40px */
        font-size:clamp(1.563rem, calc(-2.187rem + 7.813vw), 2.5rem);
    
        & .title { color:#fff; font-size:inherit; font-weight:bold; text-align:center;}
        & .feature {
            display:flex;
            justify-content:center;
            gap:0.375em;
            /* viewport:768-960px  10-32px */
            margin-top:clamp(0.625rem, calc(-4.875rem + 11.458vw), 2rem);
        }
        & .feature img {
            /* viewport:768-960px  141-279px */
            width:clamp(8.813rem, calc(-25.687rem + 71.875vw), 17.438rem);
        }
        & .img {
            align-items:end;
            /* viewport:768-960px  24-46px */
            row-gap:clamp(1.5rem, calc(-4rem + 11.458vw), 2.875rem);
            column-gap:25px;
            margin-top:1em;
        }
        & .img a { display:flex; flex-direction:column; align-items:center; gap:17px;}
        & .img a > img {
            width:auto;
            /* viewport:768-960px  18-22.5px */
            height:clamp(1.125rem, calc(0rem + 2.344vw), 1.406rem);
        }
        & .imgs_flex {
            display:flex;
            justify-content:center;
        }
        & .imgs_grid {
            display:grid;
            grid-template:
                ".. .. .. i1 i1 i2 i2 i3 i3 .. .. .." auto
                "i4 i4 i5 i5 i6 i6 i7 i7 i8 i8 i9 i9" auto /
                1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
            
            & > a:nth-of-type(1) { grid-area:i1;}
            & > a:nth-of-type(2) { grid-area:i2;}
            & > a:nth-of-type(3) { grid-area:i3;}
            & > a:nth-of-type(4) { grid-area:i4;}
            & > a:nth-of-type(5) { grid-area:i5;}
            & > a:nth-of-type(6) { grid-area:i6;}
            & > a:nth-of-type(7) { grid-area:i7;}
            & > a:nth-of-type(8) { grid-area:i8;}
            & > a:nth-of-type(9) { grid-area:i9;}
        }
        & p.indent {
            width:fit-content;
            margin:2em auto 0;
            /* viewport:768-960px  14-16px */
            font-size:clamp(0.875rem, calc(0.375rem + 1.042vw), 1rem);
        }
    }
    
    & a.btn {
        margin-block:1.15em 2.75em;
    }
}

@media (any-hover:hover) {
    .overview a.btn:hover { filter:brightness(0.9);}
}
@media (any-hover:none) {
    .overview a.btn:active { filter:brightness(0.9);}
}
@media (width < 768px) {
    .overview {

        & :is(th, td) { display:block; width:100%;}
        & th { padding:16.5px 0 0;}
        & td { padding:9px 0 25.5px;}
    
        & .tr1 dl { grid-template-columns:1fr 3.5em; gap:0;}
        & :nth-child(1 of .large) { text-align:start;}
        & .small { width:fit-content; margin-inline:auto; text-align:start;}
        & .products .img { width:min(300px, 100%);}
        & .products .img a { gap:13px;}
        & .products .img > picture { width:75%; align-self:center; justify-self:end;}
        & .products .imgs_flex { display:grid; grid-template-columns:repeat(2, 1fr); justify-items:center;}
        & .products .imgs_flex a { width:82.5%;}
        & .products .imgs_grid {
            grid-template:
                "i1 i2 i3" auto
                "i4 i5 i6" auto
                "i7 i8 i9" auto / 1fr 1fr 1fr;
        }
        & :nth-last-child(1 of .products) .imgs_flex { grid-template-columns:repeat(3, 1fr);}
        & :nth-last-child(1 of .products) .imgs_flex a { width:100%;;}
        & a.btn { margin-bottom:0;}
    }
}


/* ==================================================
    .method
================================================== */
.method {
    /* viewport:768-960px  62.5-170px */
    padding-top:clamp(3.906rem, calc(-22.969rem + 55.99vw), 10.625rem);
    /* viewport:768-960px  75-137.5px */
    padding-bottom:clamp(4.688rem, calc(-10.937rem + 32.552vw), 8.594rem);
    background-color:var(--sky);

    & p.center {
        /* viewport:768-960px  20-34px */
        margin-top:clamp(1.25rem, calc(-2.25rem + 7.292vw), 2.125rem);
        /* viewport:768-960px  20-64px */
        margin-bottom:clamp(1.25rem, calc(-9.75rem + 22.917vw), 4rem);
        /* viewport:768-960px  20-26px */
        font-size:clamp(1.25rem, calc(-0.25rem + 3.125vw), 1.625rem);
        text-align:center;
        font-weight:bold;
    }
    & :nth-child(1 of p.center) { width:fit-content; margin-inline:auto; text-align:start;}
    & .required_items {
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        /* viewport:768-960px  27-100px */
        gap:clamp(1.688rem, calc(-16.562rem + 38.021vw), 6.25rem);
        /* viewport:768-960px  92.5-170px */
        margin-bottom:clamp(5.781rem, calc(-13.594rem + 40.365vw), 10.625rem);
        counter-reset:no 0;
    
        & li {
            counter-increment:no;
            position:relative;
            display:flex;
            flex-direction:column;
            align-items:center;
            /* viewport:768-960px  10-20px */
            gap:clamp(0.625rem, calc(-1.875rem + 5.208vw), 1.25rem);
            /* viewport:768-960px  15-35px */
            padding-block:clamp(0.938rem, calc(-4.062rem + 10.417vw), 2.188rem);
            /* viewport:768-960px  17-40px */
            padding-inline:clamp(1.063rem, calc(-4.687rem + 11.979vw), 2.5rem);
            background-color:#fff;
            border:solid 0.25em var(--blue);
            border-radius:1em;
            /* viewport:768-960px  16-20px */
            font-size:clamp(1rem, calc(0rem + 2.083vw), 1.25rem);
        }
        & li:before {
            content:counter(no);
            display:grid;
            place-items:center;
            position:absolute;
            inset:-25px auto auto -22px;
            /* viewport:768-960px  47-82px */
            width:clamp(2.938rem, calc(-5.812rem + 18.229vw), 5.125rem);
            height:auto;
            aspect-ratio:1;
            /* viewport:768-960px  33-58px */
            font-size:clamp(2.063rem, calc(-4.187rem + 13.021vw), 3.625rem);
            font-weight:900;
            color:#fff;
            line-height:1;
            background-color:var(--blue);
            border-radius:5px;
        }
        & .title {
            line-height:1.5;
            color:var(--pink);
            /* viewport:768-960px  25-30px */
            font-size:clamp(1.563rem, calc(0.313rem + 2.604vw), 1.875rem);
            font-weight:bold;
            text-align:center;
        }
        & strong { margin-top:-0.56em; font-size:1.25em; font-weight:bold; text-align:center; line-height:1.4;}
        & .indent {
            width:100%;
            /* viewport:768-960px  14-17px */
            font-size:clamp(0.875rem, calc(0.125rem + 1.563vw), 1.063rem);
        }
        & .half_gap { margin-top:-0.5em;}
    }
    & .method_list {
        /* viewport:768-960px  50-100px */
        --num-size:clamp(3.125rem, calc(-9.375rem + 26.042vw), 6.25rem);
        --column-gap:var(--num-size);
        /* viewport:768-960px  13-34.5px */
        --row-gap:clamp(0.813rem, calc(-4.562rem + 11.198vw), 2.156rem);
    
        display:grid;
        grid-template-columns:var(--num-size) 1fr;
        gap:var(--column-gap) var(--row-gap);
        /* viewport:768-960px  20-64px */
        margin-top:clamp(1.25rem, calc(-9.75rem + 22.917vw), 4rem);
        /* viewport:768-960px  0-72.5px */
        margin-bottom:clamp(0rem, calc(-18.125rem + 37.76vw), 4.531rem);
        /* viewport:768-960px  16-20px */
        font-size:clamp(1rem, calc(0rem + 2.083vw), 1.25rem);
    
        counter-reset:no 0;
    
        & > dt {
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            width:var(--num-size);
            height:auto;
            aspect-ratio:1;
            background-color:var(--blue);
            /* viewport:768-960px  10-20px */
            font-size:clamp(0.625rem, calc(-1.875rem + 5.208vw), 1.25rem);
            font-weight:bold;
            color:var(--yellow);
            line-height:1;
            border-radius:5px;
        }
        & > dt span { font-size:3.4em;}
        & > dd { position:relative; z-index:1;}
        & > dd:before {
            content:"";
            position:absolute;
            width:10px;
            height:100%;
            background-color:var(--blue);
            inset:var(--num-size) auto auto calc((var(--row-gap) + var(--num-size) / 2) * -1);
            translate:-50% 0;
            z-index:-1;
        }
        & > dd:last-of-type:before { content:none;}
        & > dd > p { font-weight:bold;}
        & h4 {
            color:var(--blue);
            /* viewport:768-960px  25-35px */
            font-size:clamp(1.563rem, calc(-0.937rem + 5.208vw), 2.188rem);
            word-break:keep-all;
        }
        & .indent {
            /* viewport:768-960px  14-17px */
            font-size:clamp(0.875rem, calc(0.125rem + 1.563vw), 1.063rem);            
        }
        & .frame {
            --border:solid 5px var(--blue);
            margin-top:1.5em;
            
            &:not(.details) {
                display:flex;
                flex-direction:column;
                align-items:center;
                /* viewport:768-960px  24-45px */
                padding-top:clamp(1.5rem, calc(-3.75rem + 10.938vw), 2.813rem);
                /* viewport:768-960px  20-100px */
                padding-inline:clamp(1.25rem, calc(-18.75rem + 41.667vw), 6.25rem);
                /* viewport:768-960px  24-70px */
                padding-bottom:clamp(1.5rem, calc(-10rem + 23.958vw), 4.375rem);
                border:var(--border);
                border-radius:1em;
                background-color:#fff;
            }
            &.noPadding { padding:0px;}
            &.details {
                border-top:none;
                
                & dt {
                    position:relative;
                    background-color:var(--blue);
                    border-radius:0.57em;
                    color:#fff;
                    /* viewport:768-960px  20-35px */
                    font-size:clamp(1.25rem, calc(-2.5rem + 7.813vw), 2.188rem);
                    font-weight:bold;
                    text-align:center;
                    transition:border-radius var(--trans);
                }
                & dt label { display:block; padding-block:0.25em; cursor:pointer;}
                & dt:before,
                & dt:after {
                    content:"";
                    position:absolute;
                    display:block;
                    width:0.8em;
                    height:auto;
                    aspect-ratio:28/4;
                    background:currentColor;
                    inset:50% 0 auto auto;
                    translate:-100% 0;
                }
                & dt:after { rotate:-90deg; transition:rotate var(--trans);}
                & dd { display:grid; grid-template-rows:0fr; overflow-y:clip; transition:all var(--trans);}
                & dd > div {
                    display:flex;
                    flex-direction:column;
                    align-items:center;
                    padding-block:0px;
                    background-color:#fff;
                    border-inline:var(--border);
                    border-bottom:none;
                    border-top:none;
                    border-radius:0 0 1em 1em;
                    overflow:hidden;
                    transition:all var(--trans);
                }
                /* :checked */
                & dt:has(input[type="checkbox"]:checked) { border-radius:0.57em 0.57em 0 0;}
                & dt:has(input[type="checkbox"]:checked):after { rotate:0deg;}
                & dt:has(input[type="checkbox"]:checked) + dd { grid-template-rows:1fr;}
                & dt:has(input[type="checkbox"]:checked) + dd > div { padding-block:1.75em 3.2em; border-bottom:var(--border)}
            }
            &.details input { display:none;}
            & p {
                /* viewport:768-960px  8-20px */
                margin-top:clamp(0.5rem, calc(-2.5rem + 6.25vw), 1.25rem);
                text-align:center;
            }
            & small { margin-top:2em; font-size:0.85em;}
            & .title {
                /* viewport:768-960px  20-30px */
                font-size:clamp(1.25rem, calc(-1.25rem + 5.208vw), 1.875rem);
                color:var(--pink);
                font-weight:bold;
                line-height:1.5;
            }
            & .subTitle {
                /* viewport:768-960px  20-40px */
                margin-top:clamp(1.25rem, calc(-3.75rem + 10.417vw), 2.5rem);
                padding-block:0.25em;
                /* viewport:768-960px  8-35px */
                padding-inline:clamp(0.5rem, calc(-6.25rem + 14.063vw), 2.188rem);
                color:#fff;
                /* viewport:768-960px  15-20px */
                font-size:clamp(0.938rem, calc(-0.312rem + 2.604vw), 1.25rem);
                font-weight:bold;
                background-color:var(--pink);
            }
        }
    }
}

@media (width < 960px){
    .method {

        & .required_items {
            grid-template-columns:min(550px, 90%);
            justify-content:center;
    
            & li:before { inset:-14px auto auto -13px;}
        }
        & .method_list {
    
            & .frame .subTitle { width:90%; margin-inline:auto; text-align:center;}
            & .no02 + dd .frame picture { margin-top:0; padding:1em; text-align:center;}
            & .no02 + dd .frame img { width:min(241px, 100%);}
    
            & .no03 + dd .frame picture { text-align:center;}
            & .no03 + dd .frame:not(.details) img { width:min(223px, 100%);}
            & .no03 + dd .frame.details img { width:min(225px, 100%);}
        }
    }
}


/* ==================================================
    .notice
================================================== */
.notice {

    & .content_wrap {
        /* viewport:768-960px  48.5-140px */
        padding-top:clamp(3.031rem, calc(-19.844rem + 47.656vw), 8.75rem);
        /* viewport:768-960px  64.5-130px */
        padding-bottom:clamp(4.031rem, calc(-12.344rem + 34.115vw), 8.125rem);
    }
    & ul.circle {
        /* viewport:768-960px  17.5-56px */
        margin-top:clamp(1.094rem, calc(-8.531rem + 20.052vw), 3.5rem);
        /* viewport:768-960px  48.5-120px */
        margin-bottom:clamp(3.031rem, calc(-14.844rem + 37.24vw), 7.5rem);
        margin-inline:auto;
        width:min(900px, 100%);
        font-family:var(--noto);
        /* viewport:768-960px  16-20px */
        font-size:clamp(1rem, calc(0rem + 2.083vw), 1.25rem);
        line-height:1.8;
    }
    & ul.circle li { position:relative; padding-left:1.2em;}
    & ul.circle li:before {
        content:"";
        position:absolute;
        display:block;
        width:0.7em;
        height:auto;
        aspect-ratio:1;
        border-radius:100%;
        border:solid 1px var(--black);
        background-color:var(--yellow);
        inset:0.5lh auto auto 0;
        translate:0 -50%;
    }
    & ul.circle li + li {
        /* viewport:768-960px  7-17px */
        margin-top:clamp(0.438rem, calc(-2.062rem + 5.208vw), 1.063rem);
    }
    & .formLink_wrap { margin-top:88.5px;}
}
@media (width < 768px) {
    .notice {

        & dl { max-height:330px;}
        & .formLink_wrap { margin:0;}
        & .ol_list .ul_list { margin-left:0;}
    }
}