@charset "UTF-8";
/* ===========================================================================
*   clamp関数 ... 特筆がない限り、viewport:375-1280px として作成しています。
=========================================================================== */
:root {
    --primary:#3A6059;
    --secondary:#A00000;

    /* font */
    --font-hina:"Hina Mincho", serif;
    --font-ibm:"IBM Plex Sans JP", sans-serif;
    --font-shippori:"Shippori Mincho", serif;

    --content-inline-space:clamp(2rem, calc(-24.812rem + 29.792vw), 10.938rem);/* viewport:1440-1920px 32-175px */
    --content-width:calc(100cqw - var(--content-inline-space) * 2);

    /* transition */
    --trans:0.5s ease;
}
*,*:before,*:after { margin:0px; padding:0px;}
body {
    --fv-height:calc(100vw / 1985px * 829px);/* fvの高さ（:beforeにて使用） */

    position:relative;
    min-width:960px;
    font-family:var(--font-ibm);
    font-size:16px;
    line-height:1.6;
}
.container { container:container / inline-size; overflow-y:clip;}
a { color:inherit;}
a, a:hover { text-decoration:none;}
:where(h1, h2, h3, h4, h5, h6) {
    margin:0px;
    padding:0px;
    font-size:1em;
    font-weight:normal;
}
img { max-width:100%; height:auto; vertical-align:middle;}
:where(ul, ol) { list-style:none;}
/* .red { color:var(--secondary);} */

.bg {
    position:fixed;
    width:100%;
    height:100vh;
    object-fit:cover;
    object-position:top left;
    z-index:-1;
}
.contentsWrap {
    display:flex;
    gap:clamp(2rem, calc(-42rem + 55vw), 7.5rem);/* viewport:1280-1440px 32-120px */
    margin-inline:var(--content-inline-space);

    & > * { padding-bottom:10rem;}
}
.contentBody {
    position:relative;
    counter-reset:details 0;
    flex:1;
    z-index:0;

    &:after {
        content:"";
        position:absolute;
        display:block;
        width:min(969px, 50.46875vw);
        aspect-ratio:969/2273;
        background:url(../img/bg_deco2.webp) no-repeat center / contain;
        inset:0px calc(var(--content-inline-space) * -1) auto auto;
        opacity:0.28;
        z-index:-1;
    }
}

@media(width < 1280px){
    .contentsWrap { flex-direction:column;}
    .contentsWrap > * { padding-bottom:0px;}
    .contentBody { padding-bottom:7.5rem;}
}
@media(width < 768px){
    :root {
        --content-inline-space:16px;
    }
    body {
        height:auto;
        /* background-image:url(../img/bg_sp.webp); */
        min-width:unset;
        font-size:14px;
    }
    .contentBody:after { content:none; background:none;}
}

h2 {
    margin-bottom:1em;
    padding-bottom:0.25em;
    font-family:var(--font-hina);
    font-size:clamp(1.563rem, calc(1.174rem + 1.657vw), 2.5rem);/* viewport:375-1280px 25-40px */
    border-bottom:solid 1px;
    word-break:keep-all;
}
h3 {
    padding-left:0.3em;
    font-family:var(--font-shippori);
    font-weight:600;
    font-size:clamp(1.25rem, calc(1.043rem + 0.884vw), 1.75rem);/* viewport:20-28px */
    line-height:1.1;
    border-left:solid round(0.2em, 1px) var(--primary);
}


.details {
    display:grid;
    grid-template-columns:270px 1fr;
    align-items:baseline;
    gap:1.5em;
    margin-top:1.25em;

    & + .details {
        padding-top:1.25em;
        border-top:dotted 1px;
    }
    & :is(dt, strong) {
        font-size:1.25em;
        font-weight:bold;
    }
    & .label {
        counter-increment:details;
        display:flex;
        height:fit-content;
        padding:0.5em 0.75em;
        color:#fff;
        font-size:1.125em;
        background-color:var(--primary);
        border-radius:5px;

        &:before {
            content:counter(details);
            display:block;
            width:1.5em;
            text-align:center;
            order:-2;
        }
        &:after {
            content:"｜";
            order:-1;
        }
    }
}
@media(width < 768px){
    .details {
        grid-template-columns:1fr;
        gap:0.5em;

        & + .details { border:none;}
    }
}

.dl_def {
    & * + dt { margin-top:2em;}
    & dt span.red { margin-left:0.75em;}
}

.dl_column {
    display:grid;
    grid-template-columns:9em 1fr;

    & :is(dt, dd):not(:first-of-type) {
        margin-top:1rem;
        padding-top:1rem;
        border-top:solid 1px #949494;
    }
    & dt { padding-right:1em;}
    & .hasQR {
        --qr-space:1.75em;
        container:hasQR / inline-size;

        & .container_wrap {
            display:grid;
            grid-template:
                "strong qr" auto
                "linkBtn qr" 1fr / auto 1fr;
            align-items:start;
        }
        & strong { grid-area:strong;}
        & .linkBtn { grid-area:linkBtn;}
        & .QR { grid-area:qr; margin-left:var(--qr-space); border:solid 1px;}

        @container hasQR (max-width:500px){
            & .container_wrap {
                grid-template:
                    "strong" auto
                    "linkBtn" auto
                    "qr" 1fr / 1fr;
            }
            & .QR { margin:var(--qr-space) 0 0;}
        }
    }
}
@media(width < 768px){
    .dl_column {
        grid-template-columns:1fr;
        margin-top:1em;

        & dd:not(:first-of-type) { margin-top:0px; padding-top:0px; border-top:none;}
        & .QR { display:none;}
    }
}
.dl_circle {
    padding-left:1em;

    & > dt { position:relative;}
    & > dt:before {
        content:"";
        position:absolute;
        inset:0.5lh calc(100% + 0.125em) auto auto;
        translate:0 -50%;
        display:block;
        width:0.625em;
        aspect-ratio:1;
        background-color:currentColor;
        border-radius:100%;
    }
}
.dl_num {
    --indent:40px;
    counter-reset:dl_num;

    & > dt {
        --gap:14px;
        counter-increment:dl_num;
        display:flex;
        align-items:baseline;
        gap:var(--gap);

        &:before {
            content:counter(dl_num);
            flex-shrink:0;
            display:grid;
            place-items:center;
            width:calc(var(--indent) - var(--gap));
            aspect-ratio:1;
            background-color:#000;
            color:#fff;
            font-size:0.8em;
            font-weight:normal;
            line-height:1;
            border-radius:5px;
        }
    }
    & > * + dt { margin-top:1rem;}
    & > dd { padding-left:var(--indent);}
    & span.red { font-weight:bold;}
    & ul {
        display:grid;
        grid-template-columns:auto 1fr;
        gap:0 1.5em;

        & li {
            position:relative;
            display:grid;
            grid-template-columns:subgrid;
            grid-column:span 2;
            padding-left:1em;
        }
        & li:before {
            content:"";
            position:absolute;
            display:block;
            width:0.75em;
            aspect-ratio:1;
            background-color:currentColor;
            border-radius:100%;
            inset:0.5lh auto auto 0;
            translate:0 -50%;
        }
    }
}


/* ==================================================
    header
================================================== */
header {
    position:absolute;
    inset:50px auto auto 57px;
    z-index:1;
    
    & .logo {
        display:flex;
        align-items:center;
        gap:clamp(1rem, calc(0.404rem + 2.545vw), 1.625rem);/* viewport:375-768px 16-26px */
    }
    & .logo img:nth-of-type(1) { width:min(215px, 30vw);}
    & .logo img:nth-of-type(2) { width:min(300px, 40vw);}
    & a {
        display:flex;
        align-items:center;
        gap:0.25em;
        margin-top:2em;
        padding:0.5em 1em;
        width:fit-content;
        color:#fff;
        font-size:1.0625em;
        font-weight:500;
        line-height:1;
        background-color:#004229;
        border-radius:10px;
        transition:opacity var(--trans);
    
        &:before {
            content:"";
            display:block;
            height:1em;
            aspect-ratio:1;
            background-color:currentColor;
            mask:url(../img/icon_home.svg) no-repeat center / contain;
            translate:0 -0.1em;
        }
        &:focus { opacity:0.75;}
        @media(any-hover:hover){ &:hover { opacity:0.75;}}
        @media(any-hover:none){ &:active { opacity:0.75;}}
    }
}
@media(width < 768px){
    header {
        inset:min(31px, 7.75vw) auto auto min(29px, 7.25vw);

        & a { margin-top:0.75em; font-size:0.9375em;}
    }
}

/* ==================================================
    fv
================================================== */
/* .fv img { width:100%;} */
.fv {
    position:relative;
    padding-top:clamp(12.5rem, calc(3.125rem + 15.625vw), 21.875rem);/* viewport:960-1920px 200-350px */
    padding-bottom:clamp(7.188rem, calc(1.875rem + 8.854vw), 12.5rem);/* viewport:960-1920px 115-200px */
    z-index:-1;

    & h1 {
        padding:0px 0px 0px var(--content-inline-space);
        font-size:clamp(2.5rem, calc(1.878rem + 2.652vw), 4rem);/* viewport:375-1280px 40-64px */
        font-family:var(--font-hina);
    }
    & img {
        position:absolute;
        inset:0px 0px auto auto;
        width:100%;
        pointer-events:none;
        z-index:-1;
    }
}
@media(width < 1280px){
    .fv h1 { padding-left:0px; text-align:center;}
}
@media(width < 768px){
    .fv {
        position:static;
        padding-block:0px;

        & img { position:static;}
        & h1 { margin-block:0 1em;}
    }
}

/* ==================================================
    sidenav
================================================== */
.sidenav {
    font-family:var(--font-shippori);
    overflow-y:clip;

    & nav {
        position:sticky;
        top:10rem;

        &:before {
            content:"";
            position:absolute;
            display:block;
            width:min(662px, 34.4791vw);/* viewport:1920px 662px */
            aspect-ratio:662/1257;
            background:url(../img/bg_deco1.webp) no-repeat center / contain;
            inset:0 auto auto calc(var(--content-inline-space) * -1);
            opacity:0.28;
            z-index:-1;
        }
    }
    & label {
        & input[type="checkbox"] {
            display:none;
    
        }
        &:has(input[type="checkbox"]:checked) + .accordionWrap { grid-template-rows:1fr;}
    }
    & .accordionWrap {
        display:grid;
        grid-template-rows:0fr;
        transition:grid-template-rows var(--trans);

        & > div { overflow-y:hidden;}
        & a { padding-left:1em;}
    }
    & li + li { margin-top:1.25em;}
    & a {
        display:flex;
        align-items:baseline;
        gap:0.25em;
        width:fit-content;
        font-size:clamp(0.938rem, calc(0.759rem + 0.763vw), 1.125rem);/* viewport:375-768px 15-18px */

        &:is(:focus, .active) { text-decoration:underline;}
        &.active span { background-color:var(--secondary);}
    }
    & span {
        position:relative;
        display:inline-grid;
        place-items:center;
        border-radius:100%;
        width:1.25rem;
        aspect-ratio:1;
        background-color:var(--primary);
        transition:background-color var(--trans);

        &.triangle { translate:0 -0.1em;}
        &.triangle:before {
            --h:0.5em;
            content:"";
            display:block;
            background-color:#fff;
            translate:calc(var(--h) / 6) 0;
            width:calc(tan(60deg) * var(--h) / 2);
            height:var(--h);
            clip-path:polygon(0% 0%, 100% 50%, 0% 100%);
        }
        &.toggle {
            &:before, &:after {
                content:"";
                display:block;
                position:absolute;
                inset:50% auto auto 50%;
                translate:-50% -50%;
                width:0.6em;
                height:2px;
                background-color:#fff;
            }
            &:after { rotate:90deg; transition:rotate var(--trans);}
        }
        &.toggle:has(+ input[type="checkbox"]:checked):after { rotate:180deg;}
    }
    & label {
        display:flex;
        align-items:center;
        gap:0.25em;
        width:fit-content;
        margin-block:1em;
        font-size:1.25em;
        font-weight:bold;

    }

    @media(any-hover:hover){
        & a:hover {
            text-decoration:underline;
            & span { background-color:var(--secondary);}
        }
    }
    @media(any-hover:none){
        & a:active {
            text-decoration:underline;
            & span { background-color:var(--secondary);}
        }
    }
}
@media(width < 768px){
    .sidenav nav:before { content:none; background:none;}
}


/* ==================================================
    linkBtn
================================================== */
.linkBtn {
    display:flex;
    align-items:center;
    gap:0.75em;
    padding:0.5em 2.3em;
    width:fit-content;
    color:var(--primary);
    font-size:clamp(0.938rem, calc(0.759rem + 0.763vw), 1.125rem);/* viewport:375-768px 15-18px */
    font-weight:600;
    border-radius:100vmax;
    border:solid 1px currentColor;
    background-color:rgb(255 255 255 / 0.3);
    transition:filter var(--trans);

    & span {
        display:grid;
        place-items:center;
        width:1.55em;
        aspect-ratio:1;
        background-color:currentColor;
        border-radius:100%;
        transition:translate var(--trans);
    }
    &.in_dd { margin-top:0.625em;}
    &.in_d_title {
        width:100%;
        margin-top:1em;
        padding-inline:1em;
        justify-content:center;
    }

    &:focus {
        filter:brightness(1.25);
        & span { translate:50% 0;}
    }
    @media(any-hover:hover){
        &:hover {
            filter:brightness(1.25);
            & span { translate:50% 0;}
        }
    }
    @media(any-hover:none){
        &:active {
            filter:brightness(1.25);
            & span { translate:50% 0;}
        }
    }
}
@media(width < 768px){
    .linkBtn {
        padding-inline:1em;

        &.in_d_title { width:fit-content;}
    }
}

/* ==================================================
    popover
================================================== */
[popover] {
    --radius:5px;
    --arrow-space:clamp(1.875rem, calc(1.1rem + 3.308vw), 2.688rem);/* viewport:375-768px 30-43px */

    inset:50% auto auto 50%;
    translate:-50% -50%;
    width:min(600px, 90%);
    padding-block:clamp(1.563rem, calc(0.668rem + 3.817vw), 2.5rem);/* viewport:375-768px 25-40px */
    padding-inline:clamp(1.563rem, calc(0.072rem + 6.361vw), 3.125rem);/* viewport:375-768px 25-50px */
    background-color:#fff;
    border-radius:var(--radius);
    overflow:hidden;
    opacity:0;
    transition:var(--trans);
    transition-behavior:allow-discrete;

    &::backdrop { background-color:rgb(0 0 0 / 0.25);}
    &:popover-open {
        opacity:1;

        @starting-style{ opacity:0;}
    }
    & dl {
        display:grid;
        grid-template-columns:300px 1fr;
        align-items:center;
        gap:var(--arrow-space) 1em;
        padding-top:clamp(1.188rem, calc(0.651rem + 2.29vw), 1.75rem);/* viewport:375-768px 19-28px */
    }
    & dt {
        padding:0.25em 0.75em;
        background-color:var(--primary);
        border-radius:var(--radius);
        color:#fff;
        font-size:1.125em;
        text-align:center;
    }
    & dt:not(:first-of-type) {
        position:relative;
        
        &:before {
            content:"";
            position:absolute;
            inset:auto auto calc(100% + var(--arrow-space) / 2) 50%;
            translate:-50% 50%;
            display:block;
            width:1em;
            aspect-ratio:15/12;
            background-color:var(--secondary);
            mask:url(../img/icon_arrow.svg) no-repeat center / contain;
            rotate:90deg;
        }
    }
    & dd { font-size:1.25em;}
    & button {
        position:absolute;
        inset:-1px -1px auto auto;
        width:clamp(2rem, calc(1.523rem + 2.036vw), 2.5rem);/* viewport:375-768px 32-40px */
        aspect-ratio:1;
        background-color:#000;
        border-end-start-radius:var(--radius);
        cursor:pointer;

        &:before, &:after {
            content:"";
            position:absolute;
            display:block;
            width:75%;
            height:2px;
            background-color:#fff;
            inset:50% auto auto 50%;
            translate:-50% -50%;
        }
        &:before { rotate:45deg;}
        &:after { rotate:135deg;}
        
        &:focus { opacity:0.6;}
        @media(any-hover:hover){ &:hover { opacity:0.6;}}
        @media(any-hover:none){ &:active { opacity:0.6;}}
    }
}
@media(width < 768px){
    [popover]{

        & dl { grid-template-columns:1fr; gap:0;}
        & dt:not(:first-of-type) { margin-top:var(--arrow-space);}
        & :is(dt, dd) { font-size:1.125em;}
        & dd { margin-top:0.25em; text-align:center;}
    }
}

/* ==================================================
    footer
================================================== */
#footer { line-height:1.3;}