@charset "UTF-8";
:root { }
html {
    font-size: 16px;
    line-height: 1.8;
    font-family:"Noto Sans JP", serif;
    color: #000;
    scroll-behavior:smooth;
    overscroll-behavior:none;
    position:relative;
    z-index:0;
}
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;}
:is(h1, h2, h3, h4, h5, h6) { margin:0; padding:0; font-size:1rem; font-weight:normal;}
.pc { display:block;}
.sp { display:none;}

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

p.indention { height:2rem;}

@media (width < 1200px) { }
@media (width < 768px){
    .pc { display:none;}
    .sp { display:block;}
}



/*===========================================================================
*   bg
===========================================================================*/
#bg {
    position:absolute;
    width:100%;
    height:100%;
    min-height:100dvh;
    inset:0 auto auto 0;
    z-index:-1;
}
#bg img { width:100%; height:100%; pointer-events:none;}


/*===========================================================================
*   chirashi
===========================================================================*/
#imgs { margin:2rem auto 135px; width:90%; max-width:1200px;}
#imgs .img_set :is(.pc, .sp) { text-align:center;}
#imgs :is(.pc, .sp):has(input[name="openWin"]) { display:block!important; background:url() no-repeat top left / 200px auto;}
#imgs .pc:has(input[name="openWin"]) { background-image:url(../img/bg_pc.png);}
#imgs .sp:has(input[name="openWin"]) { background-image:url(../img/bg_sp.png);}

@media (width < 768px){
    #imgs { margin-block:5% calc(70px + 2rem);}
}



/*===========================================================================
*   links
===========================================================================*/
#links {
    position:fixed;
    inset:auto auto 2rem 2rem;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1rem;
    width:calc(100% - 4rem);

    & a {
        display:grid;
        place-items:center;
        height:calc(135px - 4rem);
        background:linear-gradient(135deg, var(--start-color, #DF4425), var(--end-color, #9E1A00));
        border-radius:10px;
        border:solid 3px #fff;
        color:#fff;
        /* viewport:768-1200px  16-28px */
        font-size:clamp(1rem, calc(-0.333rem + 2.778vw), 1.75rem);
        font-weight:bold;
        line-height:1.25;
        text-align:center;
    }
    & a:nth-of-type(1) { --start-color:#DF4425; --end-color:#9E1A00;}
    & a:nth-of-type(2) { --start-color:#016FA6; --end-color:#00488A;}
    & a:nth-of-type(3) { --start-color:#0C866B; --end-color:#204A60;}
}
@media (width < 768px){
    #links {
        inset:auto auto 1rem 1rem;
        gap:0.5rem;
        width:calc(100% - 2rem);
    }
}
@media (any-hover:hover) {
    #links a:hover { filter:brightness(0.9);}
}
@media (any-hover:none) {
    #links a:active { filter:brightness(0.9);}
}