/* リセット */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light}@supports not (min-block-size:100dvb){:where(html){block-size:100%}}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){block-size:100%;block-size:100dvb;line-height:1.5;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(button){border-style:solid}:where(a){text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(h1,h2,h3){line-height:calc(1em + 0.5rem)}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(:focus-visible){outline:2px solid var(--focus-color,Highlight);outline-offset:2px}:where(.visually-hidden:not(:focus,:active,:focus-within,.not-visually-hidden)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}

h2, h3, h4, h5, h6, p, a {font-family: 'Noto Sans JP', sans-serif;}

header {
    position: fixed;
    z-index: 99;
    width: 100%;
    padding: 7px;
}

body#InterRegion {
    animation-name: fvanime;
    animation-duration: 3s;
    animation-timing-function: ease-in;
    opacity: 0;
    animation-fill-mode: forwards;
}
@keyframes fvanime {
    0%{ opacity: 0;}
    70%{ opacity: 0;}
    100%{ opacity: 1;}
}

header .h-logo { width: 15%;}

header .h-logo img { filter: drop-shadow(1px 1px 2px #999);}

article#Region {
    width: 100%;
    position: relative;
}
article#Region::before {
    position: fixed;
    content: '';
    display: block;
    width: 100%;
    height: calc(var(--vh, 1vh) * 100);
    background-image: url(../../img/region/elementary/ele_fv_sp.webp);
    background-size: cover;
    background-position: center;
}


    /* PC用 */
    @media print,
    screen and (min-width: 1024px) {
        article#Region::before {
            background-image: url(../../img/region/elementary/ele_fv_pc02.webp);
            background-position: top;
            background-size: cover;
        }
    }

#Region section.contents {
    background-image: url(../../img/region/international/bg.webp);
    padding: 50px 0 10px;
}
article#Region #main {
    z-index: 5;
    position: relative;
}


article#Region #fv{
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    background:none;
    text-align: center;
    position: relative;
    background: #ffffff0f;
}

article#Region #fv h1{
    font-size: 15vw;
    font-family: 'Zen Maru Gothic', sans-serif;
    position: relative;
    top: 48%;
    transform: translateY(-50%);
    font-style: italic;
    color: #fff;
    /* color: transparent; */
    font-weight: 400;
    /* text-shadow: 0 0 20px #fff;
    animation-name: blurAnime;
    animation-duration:2s;
    animation-fill-mode:forwards; */   
    
    text-shadow: 1px 1px 2px #535353;

}



article#Region #fv h1 span {
    display: block;
    font-size: 38%;
    font-style: normal;
}

/* @keyframes blurAnime{
    from {
        text-shadow: 0 0 50px #fff;
    }
  
    to {
        text-shadow: 0 0 0px #fff;
    }
} */

article#Region #fv h1 small{
    font-size: 80%;
    display: block;
}

article#Region #fv h1 small {
    font-size: 55%;
    display: block;
    position: relative;
    top: 0.3em;
}

#Region #fv .links {    
    display: block;
    width: fit-content;
    position: absolute;
    right: 3vw;
    bottom: 3vh;
}
#Region #fv .links li{
    margin: 5px 0;
    text-align: left;
    text-shadow: 1px 1px 2px #000000, 0 0 1px #000; 
    backdrop-filter: blur(2px);
}

#Region #fv .links a {
    color: #fff;
    text-decoration: none;
    font-size: 0.8em;
    font-family: 'Zen Maru Gothic', sans-serif;
    opacity: 0.9;
}


#Region section.contents .content-head{
    margin: 30px auto 80px;
    width: max-content;
}
/* 
.box19 {
    position: relative;
    padding:0.25em 1em;
}
.box19:before,.box19:after{ 
    content:'';
    width: 20px;
    height: 30px;
    position: absolute;
    display: inline-block;
}
.box19:before{
    border-left: solid 1px #5767bf;
    border-top: solid 1px #5767bf;
    top:0;
    left: 0;
}
.box19:after{
    border-right: solid 1px #5767bf;
    border-bottom: solid 1px #5767bf;
    bottom:0;
    right: 0;
} */

#Region section.contents .content-head h2{
    font-size: 16px;
    line-height: 2em;
    text-align: center;
    color: #be3944;    
    font-weight: 500;
    width: max-content;
    margin: 0 auto;
}


#Region .contents .img-block{
    display: block;
    width: 99%;
    margin: 0.5vw auto;
    aspect-ratio: 3/2;
    height: 66vw;
    background-image: url(../../img/region/elementary/1-04.webp);
    background-size: cover;
    animation: anime1 12s ease 6s infinite alternate;
    opacity: 0;
    transform: translate(0, 25px); /* フェードインで動く高さを指定 */
    transition: all 2000ms; /* フェードインにかかる時間を指定 */
}
#Region .contents .img-block.effect-scroll {
    opacity: 1;
    transform: translate(0, 0);
}

#Region .contents .img-block:nth-child(2){
    background-image: url(../../img/region/elementary/2-01.webp);
    animation: anime2 12s ease 6.2s infinite alternate;
}
#Region .contents .img-block:nth-child(3){
    background-image: url(../../img/region/elementary/3-01.webp);
    animation: anime3 12s ease 6.4s infinite alternate;
}
#Region .contents .img-block:nth-child(4){
    background-image: url(../../img/region/elementary/4-01.webp);
    animation: anime4 12s ease 6.6s infinite alternate;
}
#Region .contents .img-block:nth-child(5){
    background-image: url(../../img/region/elementary/5-01.webp);
    animation: anime5 12s ease 6.8s infinite alternate;
}
#Region .contents .img-block:nth-child(6){
    background-image: url(../../img/region/elementary/6-01.webp);
    animation: anime6 12s ease 7s infinite alternate;
}
#Region .contents .img-block:nth-child(7){
    background-image: url(../../img/region/elementary/7-01.webp);
    animation: anime7 12s ease 7.2s infinite alternate;
}
#Region .contents .img-block:nth-child(8){
    background-image: url(../../img/region/elementary/8-03.webp);
    animation: anime8 12s ease 7.4s infinite alternate;
}
@keyframes anime1 {
    0% {
        background-image: url(../../img/region/elementary/1-04.webp);
    }
    15% {
        background-image: url(../../img/region/elementary/1-04.webp);
    }
    30% {
        background-image: url(../../img/region/elementary/1-01.webp);
    }
    70% {
        background-image: url(../../img/region/elementary/1-01.webp);
    }
    85% {
        background-image: url(../../img/region/elementary/1-04.webp);
    }
    100% {
        background-image: url(../../img/region/elementary/1-04.webp);
    }
}
@keyframes anime2 {
    0% {
        background-image: url(../../img/region/elementary/2-01.webp);
    }
    15% {
        background-image: url(../../img/region/elementary/2-01.webp);
    }
    30% {
        background-image: url(../../img/region/elementary/2-02.webp);
    }
    70% {
        background-image: url(../../img/region/elementary/2-02.webp);
    }
    85% {
        background-image: url(../../img/region/elementary/2-01.webp);
    }
    100% {
        background-image: url(../../img/region/elementary/2-01.webp);
    }
}
@keyframes anime3 {
    0% {
        background-image: url(../../img/region/elementary/3-01.webp);
    }
    15% {
        background-image: url(../../img/region/elementary/3-01.webp);
    }
    30% {
        background-image: url(../../img/region/elementary/3-03.webp);
    }
    70% {
        background-image: url(../../img/region/elementary/3-03.webp);
    }
    85% {
        background-image: url(../../img/region/elementary/3-01.webp);
    }
    100% {
        background-image: url(../../img/region/elementary/3-01.webp);
    }
}
@keyframes anime4 {
    0% {
        background-image: url(../../img/region/elementary/4-01.webp);
    }
    15% {
        background-image: url(../../img/region/elementary/4-01.webp);
    }
    30% {
        background-image: url(../../img/region/elementary/4-02.webp);
    }
    70% {
        background-image: url(../../img/region/elementary/4-02.webp);
    }
    85% {
        background-image: url(../../img/region/elementary/4-01.webp);
    }
    100% {
        background-image: url(../../img/region/elementary/4-01.webp);
    }
}
@keyframes anime5 {
    0% {
        background-image: url(../../img/region/elementary/5-01.webp);
    }
    15% {
        background-image: url(../../img/region/elementary/5-01.webp);
    }
    30% {
        background-image: url(../../img/region/elementary/5-02.webp);
    }
    70% {
        background-image: url(../../img/region/elementary/5-02.webp);
    }
    85% {
        background-image: url(../../img/region/elementary/5-01.webp);
    }
    100% {
        background-image: url(../../img/region/elementary/5-01.webp);
    }
}
@keyframes anime6 {
    0% {
        background-image: url(../../img/region/elementary/6-01.webp);
    }
    15% {
        background-image: url(../../img/region/elementary/6-01.webp);
    }
    30% {
        background-image: url(../../img/region/elementary/6-04.webp);
    }
    70% {
        background-image: url(../../img/region/elementary/6-04.webp);
    }
    85% {
        background-image: url(../../img/region/elementary/6-01.webp);
    }
    100% {
        background-image: url(../../img/region/elementary/6-01.webp);
    }
}
@keyframes anime7 {
    0% {
        background-image: url(../../img/region/elementary/7-01.webp);
    }
    15% {
        background-image: url(../../img/region/elementary/7-01.webp);
    }
    30% {
        background-image: url(../../img/region/elementary/7-02.webp);
    }
    70% {
        background-image: url(../../img/region/elementary/7-02.webp);
    }
    85% {
        background-image: url(../../img/region/elementary/7-01.webp);
    }
    100% {
        background-image: url(../../img/region/elementary/7-01.webp);
    }
}
@keyframes anime8 {
    0% {
        background-image: url(../../img/region/elementary/8-03.webp);
    }
    15% {
        background-image: url(../../img/region/elementary/8-03.webp);
    }
    30% {
        background-image: url(../../img/region/elementary/8-01.webp);
    }
    70% {
        background-image: url(../../img/region/elementary/8-01.webp);
    }
    85% {
        background-image: url(../../img/region/elementary/8-03.webp);
    }
    100% {
        background-image: url(../../img/region/elementary/8-03.webp);
    }
}

#Region .contents .img-block a{
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.75), rgba(50, 50, 50, 0) 20%);
}

#Region .contents .img-block a span{
    position: absolute;
    bottom: 0;
    left: 0.2em;
}

#Region .contents .links {
    padding: 50px 0;
    text-align: center;
}
#Region .contents .links a{
    font-weight: 500;
    display: inline-block;
    color: #be3944;
    font-size: 20px;
    margin: 15px auto;
    text-decoration: none;
}

#Region .modal {
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 100vh;
    top: 0;
    background: #ffffff00;
    padding: 0 2%;
    transition: background 0.3s;
    pointer-events: none;
}
#Region .modal.active {
    background: #7d7d7dd0;;
    pointer-events: all;
}

#Region .modal .box{
    background: #fff;
    padding: 10px 10px 40px;
    width: 100%;
    border-radius: 3px;
    position: relative;
    top: 12vh;
    /* transform: translateY(-50%); */
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 0 5px #adadad;
}

@keyframes showanime {
    0%{
        opacity: 0;
    }
    50%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

#Region .modal.active .box{
    pointer-events: all;
    display: block;
    animation-name: showanime;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    opacity: 1;
}
#Region .modal .box h3{
    font-size: 24px;
    color: #ff7f89;
    margin-bottom: 0.5em;
}

#Region .modal .box a{
    text-decoration: none;
    font-size: 0.85em;
    font-weight: 600;
    color: #E85863;
    display: block;
    margin-top: 0.5em;
}
#Region .modal#modal4 .box a{
    display: inline;
    font-size: 1em;
}

#Region .modal .box div a.a1 { margin-top: 0.8em;}
#Region .modal .slick-slide { height: auto;}
#Region .modal .slick-dotted.slick-slider { margin-bottom: 10px;}
#Region .modal .dots { position: relative;}
#Region .modal .dots .slick-dots {
    position: absolute;
    top: -35px;
}
#Region .modal .slick-dots li button:before {
    opacity: .5;
    color: #fff;
    filter: drop-shadow(0px 2px 2px #666);
}

#Region .modal .slick-dots li.slick-active button:before {
    opacity: .85;
    color: #ff7f89;
}

#Region .slick-prev, #Region .slick-next { z-index: 999;}

.slick-prev:before, .slick-next:before { filter: drop-shadow(0 1px 1px #666);}
#Region .slick-prev { left: 0;}
#Region .slick-next { right: 0;}

footer {
    position: relative;
    z-index: 5;
    background-color: #ffc1c6;
    padding-top: 20px;
}

footer p.follow {
    text-align: center;
    font-family: 'Kaisei Decol', serif;
    color: #be3944;
}

footer #SNS {
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
}
footer #SNS li { margin: 15px 7px;}
footer #SNS li a {
    position: relative;
    display: block;
}
footer #SNS li a::before { content: '';}
footer #SNS li a i {
    position: absolute;
    font-size: 30px;
    color: #733a3f;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #b05e65;
}

footer #SNS li a span { padding-left: 28px;}
footer p.cr {
    font-size: 0.7rem;
    text-align: center;
}


/* タブレット用 */
@media print,
screen and (min-width: 768px) {
    header .h-logo { width: 9%;}
    #Region #fv .links a { font-size: 1em;}
    #Region section.contents .content-head h2 br:not(.sp_br) { display: block;}
    #Region section.contents .content-head h2 br.sp_br { display: none;}
    #Region section.contents .content-head h2 { font-size: 20px;}
    #Region section.contents .column {
        display: flex;
        flex-wrap: wrap;
    }

    #Region .contents .img-block {
        width: 48%;
        height: 32vw;
        margin: 0 1% 2% 1%;
    }

    #Region .contents .links a { margin: 15px 30px;}

    #Region .modal .box {
        color: #333;
        padding: 15px 15px 45px;
        top: 40vh;
        transform: translateY(-50%);
    }
    #Region .modal .box p { font-size: 20px;}
    #Region .modal .box a { font-size: 1em;}
    #Region .modal { padding: 0px 8%;}
    #Region .modal .box h3 {
        font-size: 28px;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }

    footer { padding-top: 40px;}
    footer #SNS { padding-bottom: 40px;}

    /* PC用 */
    @media print,
    screen and (min-width: 1024px) {
        header { padding: 15px;}
        header .h-logo { width: 70px;}
        article#Region #fv h1 {
            font-size: 128px;
            text-shadow: 1px 1px 3px #2e2e2e;
        }
        #Region #fv .links a:hover { opacity: 0.6;}

        #Region .modal.active {
            background: #3c3c3c8f;;
            pointer-events: all;
        }
        #Region #fv .links a {
            font-size: 1.5em;
        }

        #Region .contents .img-block {
            width: 33%;
            height: 22vw;
            margin: 0 0.16% 0.32% 0.16%;
            background-position: center;
            background-size: 102%;
        }
        #Region .contents .img-block:hover {
            background-size: 110%;
        }

        #Region .modal .box {
            display: flex !important;
            padding: 5% 5% 4%;
            top: 50vh;
            transform: translateY(-50%);
        }
        #Region .modal.active .box > div:first-child {
            width: 56%;
        }
        #Region .modal.active .box > div:last-child {
            padding: 3% 0% 0% 4%;
        }

        #Region .modal .box h3 {
            font-size: 2.5vw;
            margin-top: 0em;
            margin-bottom: 0.8em;
        }
        #Region .modal .box p {
            font-size: 1.2vw;
        }
        #Region .modal .box a {
            font-size: 16px;
        }
        #Region .modal .box div a.a1 {
            margin-top: 1em;
        }

        #Region .contents .img-block a {
            opacity: 0;
            transition: opacity 0.5s;
        }
        #Region .contents .img-block a:hover {
            opacity: 1;
        }
        #Region .contents .img-block a span {
            font-size: 20px;
        }
    }

}