@charset "UTF-8";
:root {
    --header-height: 100px;
    --footer-height: 0; /* 高さ固定でないため、0 */
    
    --blue:#21588A;
    --blue-light:#9AB3C9;
    --gray:#9FA0A0;

    --content-width:min(1000px, 90vw);
    --content-width-large:min(1400px, 90vw);

    --trans:0.5s ease;

    --noto-sans:"Noto Sans JP", serif;
    --noto-serif:"Noto Serif JP", serif;

    --translate-tab-height:56px;    /* Google翻訳時のヘッダー高さ */
}
html {
    font-size: 16px;
    line-height: 1.8;
    font-family:var(--noto-serif);
    color: #000;
    scroll-behavior:smooth;
    overscroll-behavior:none;
}
body { overscroll-behavior:none;}
*,*:before,*:after { margin:0; padding:0; box-sizing:border-box;}

a { text-decoration: none;}
a:is(:link, :visited) { color:inherit;}
address { font-style:normal;}
:where(ol, ul) { list-style: none;}
img { height: auto; max-width: 100%; vertical-align: bottom;}
section {
    /* viewport:768-1000px  60-120px */
    padding-block:clamp(3.75rem, calc(-8.664rem + 25.862vw), 7.5rem);
}
:is(h1, h2, h3, h4, h5, h6) { margin:0; padding:0; font-size:1rem; font-weight:normal;}
br.pc { display:block;}
br.sp { display:none;}

li:is(.cation, .circle) {
    --indent:1em;

    padding-left:var(--indent);
    text-indent:calc(var(--indent) * -1);
}
li:is(.cation, .circle):before { font-size:1em;}
li.cation:before { content:"※";}
li.circle:before {
    --w:0.375em;

    content:"";
    display:inline-block;
    margin-inline:calc((1em - var(--w)) / 2);
    width:var(--w);
    aspect-ratio:1;
    border-radius:50%;
    background:currentColor;
    vertical-align:middle;
    translate:0 -50%;
}


h2 {
    text-align:center;
    /* viewport:768-1000px  22.5-30px */
    font-size:clamp(1.406rem, calc(0.573rem + 1.736vw), 1.875rem);
    font-weight:bold;
    letter-spacing:0.25em;

    & small {
        display:block;
        margin-top:1em;
        padding-top:1em;
        font-family:var(--noto-sans);
        font-size:0.6666em;
        font-weight:normal;
        border-top:solid 2px var(--blue);
    }
}

a.btn {
    position:relative;
    display:block;
    width:min(300px, 100%);
    padding:0.5em 1em;
    border:solid 2px var(--gray);
    text-align:center;
    letter-spacing:0.25em;
    font-family:var(--noto-sans);
    z-index:0;

    &:after {
        content:"";
        position:absolute;
        display:block;
        inset:50% 1em auto auto;
        translate:0 -50%;
        width:auto;
        height:1em;
        aspect-ratio:1/2;
        background-color:var(--gray);
        mask:url(../../img/icon_arrow.svg) no-repeat center / contain;
        -webkit-mask:url(../../img/icon_arrow.svg) no-repeat center / contain;
        z-index:1;
    }
}

.abs_before, .abs_after { position:relative;}
.abs_before:before,
.abs_after:after { content:""; position:absolute; display:block;}



@media (any-hover: hover) {
    a:hover { opacity: 0.75;}
}
@media (any-hover: none) {
    a:active { opacity: 0.75;}
}

@media (width < 768px){
    :root {
        --header-height:75px;
    }
    br.pc { display:none;}
    br.sp { display:block;}
}

/*===========================================================================
*   header
===========================================================================*/
header {
    position:sticky;
    inset:0 auto auto 0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1rem calc((100% - var(--content-width-large)) / 2);
    width:100%;
    height: var(--header-height);
    background-color:#fff;
    z-index:9999;

    & > a {
        /* viewport:768-1000px  50-80px */
        width:clamp(3.125rem, calc(-3.082rem + 12.931vw), 5rem);
    }
    & h1 {
        /* viewport:768-1000px  215-360px */
        width:clamp(13.438rem, calc(-16.562rem + 62.5vw), 22.5rem);
        line-height:1;
    }

    & .h_r { position:relative;}
    & .lang {
        text-wrap:nowrap;
        display:block;
        padding-inline:0.5rem;
        background-color:#fff;
        color:var(--blue);
        border:solid 1px currentColor;
        border-radius:0.25rem;
        transition:
        color var(--trans),
        background var(--trans);
    }
    & .h_r .lang {
        position:absolute;
        inset:50% calc(100% + 2rem) auto auto;
        translate:0 -50%;
    }
    & #menu .lang { display:none;}
    & .lang:hover {
        color:#fff;
        background-color:var(--blue);
    }

    & #menu_btn {
        all:unset;
        cursor:pointer;

        display:flex;
        flex-direction:column;
        justify-content:space-between;
        width:20px;
        aspect-ratio:5/4;
    }
    & #menu_btn span {
        /* アニメーション時の角度 */
        --rotate:46deg;

        width:100%;
        height:2px;
        background-color:var(--blue);
        transition:all var(--trans);
    }

    & #menu {
        position:absolute;
        inset:var(--header-height) auto auto 0;
        width:100%;
        height:calc(100dvh - var(--header-height));
        background-color:var(--blue);
        color:#fff;
        clip-path:polygon(0 0, 100% 0, 100% 0, 0 0);
        transition:clip-path var(--trans);
    }
    & #menu ul {
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:1rem;
        padding:2rem 1rem;
        height:100%;
        overflow-y:auto;
    }


    /* ----- #menu_btn:checked ----- */
    & #menu_btn.active span:nth-of-type(1) { transform-origin:center left; rotate:var(--rotate);}
    & #menu_btn.active span:nth-of-type(2) { background-color:transparent;}
    & #menu_btn.active span:nth-of-type(3) { transform-origin:center left; rotate:calc(var(--rotate) * -1);}
    &:has(#menu_btn.active) #menu {
        clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

@media (width < 768px){
    header {
        & .h_r .lang { display:none;}
        & #menu .lang { display:block;}
        & #menu ul { justify-content:start;}
    }
}


/*===========================================================================
*   footer
===========================================================================*/
footer {
    
    & .f_top {
        --border:solid 1px currentColor;

        container:f_top / inline-size;
        /* viewport:768-1000px  120-160px */
        padding-block:clamp(7.5rem, calc(-0.776rem + 17.241vw), 10rem) 1rem;
        background-color:var(--blue-light);
        color:#fff;
    }
    & .f_top ul {
        display:grid;
        grid-template-columns:repeat(4, auto);
        justify-content:center;
        gap:1rem 0;
        padding-bottom:2rem;
        border-bottom:solid 2px currentColor;
    }
    & .f_top li { border-left:var(--border); padding-inline:2rem;}
    & .f_top li:last-of-type { border-right:var(--border);}

    & .f_bottom {
        display:flex;
        align-items:end;
        justify-content:center;
        gap:1rem 2rem;
        padding-block:4rem 3rem;
        border-bottom:solid 2rem var(--blue);
    }
    & .f_bottom .logo img { width:120px;}
    & .f_bottom .title { width:360px;}
    & .f_bottom .copy { margin-top:1em; font-size:0.8em;}
}
@media (width < 768px){
    footer {

        & .f_bottom { flex-direction:column; align-items:center; padding-inline:1rem;}
        & .f_bottom .title { width:100%;}
        & .f_bottom address { margin-top:1lh; text-align:center;}
        & .f_bottom .copy { text-align:center;}
    }
}
@container f_top (width < 700px) {
    footer .f_top ul { grid-template-columns:repeat(2, auto); gap:1.5rem 0;}
    footer .f_top li { padding-inline:1rem; font-size:14px;}
    footer .f_top li:nth-of-type(even) { border-right:var(--border);}
}


/*===========================================================================
*   main
===========================================================================*/
main {
    display: grid;
    grid-template-columns: auto var(--content-width) auto;
    grid-auto-rows: min-content;
    min-height: calc(100vh - var(--header-height) - var(--footer-height));

    & > * {
        grid-column:2/-2;
    }
    & > .fullsize {
        grid-column:1/-1;
    }
    & > .fullsize_bg {
        grid-column:1/-1;

        display:grid;
        grid-template-columns:auto var(--content-width) auto;

        & > * { grid-column:2/-2;}
    }
    & > .per {
        grid-column:1/-1;

        display:grid;
        place-items:center;
        padding-block:0.5rem;
        min-height:66.5px;
        background-color:var(--blue);
        color:#fff;
        /* viewport:768-1000px  19.5-26px */
        font-size:clamp(1.219rem, calc(-0.126rem + 2.802vw), 1.625rem);
        font-weight:bold;
    }

    &.content-large { grid-template-columns:auto var(--content-width-large) auto;}
    &.content-large > .fullsize_bg { grid-template-columns:auto var(--content-width-large) auto;}
}

@media (max-width: 1000px) {
}
@media (max-width: 768px) {
}



/*==================================================
*   main / access
==================================================*/
section.access {
    padding-bottom:0;

    & p {
        /* viewport:768-1000px  60-80px */
        margin-top:clamp(3.75rem, calc(-0.388rem + 8.621vw), 5rem);
        /* viewport:768-1000px  42-56px */
        margin-bottom:clamp(2.625rem, calc(-0.272rem + 6.034vw), 3.5rem);
        /* viewport:768-1000px  20-22px */
        font-size:clamp(1.25rem, calc(0.836rem + 0.862vw), 1.375rem);
        text-align:center;
    }
    & iframe { grid-column:1/-1;}
}
#sub section.access { 
    /* viewport:768-1000px  150-300px */
    --padding-top:clamp(9.375rem, calc(-21.659rem + 64.655vw), 18.75rem);

    padding-top:var(--padding-top);
    scroll-margin-top:calc(var(--padding-top) * -1 + var(--header-height));
}

@media (max-width: 1000px) {
}
@media (max-width: 768px) {
}



/* 翻訳時 */
.translated-ltr {
    
    & header { top:var(--translate-tab-height);}
    & header #menu { height:calc(100dvh - var(--header-height) - var(--translate-tab-height));}
    & section.fv .catch { text-wrap:wrap;}

}