@charset "utf-8";
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {
    margin:0;
    padding:0;
}
body {
    overflow-x:hidden;
    color: #464646;
    font-size:16px;
    line-height:160%;
    font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","BIZ UDPGothic",Meiryo,sans-serif;
    font-feature-settings:"palt";
    -moz-font-feature-settings:"palt";
    -webkit-font-feature-settings:"palt";
}
ul {
    list-style:none;
}
fieldset,img {
    border:0;
    vertical-align:top;
    overflow:hidden;
}
a {
    color:inherit;
    text-decoration:underline;
    transition:opacity 0.4s;
}
a:hover {
    color:#039dff;
    text-decoration:underline;
}


.clearfix {
    *zoom:1;
}
.clearfix::after {
    visibility:hidden;
    display:block;
    font-size:0;
    content:" ";
    clear:both;
    height:0;
}
.clear {
    clear:both;
    display:block;
    height:0;
    overflow:hidden;
}
img {
    width: 100%;
    max-width:100%;
    max-height:100%;
}

.fs09{
    font-size: 0.9em;
    line-height: 140%;
}

.fs08{
    font-size: 0.8em;
    line-height: 140%;
}

.font_feature {
    font-feature-settings:"palt";
    -moz-font-feature-settings:"palt";
    -webkit-font-feature-settings:"palt";
}
.ytnmob {
    width:750px;
    max-width:100%;
    margin:0.15rem auto;
}
.ytnmob .ytbin {
    position:relative;
    height:0;
    padding-bottom:56.2%;
}
.ytnmob .ytbin iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.sp_none {
    display:block;
}
.pc_none {
    display:none;
}
.align_right {
    text-align:right
}
.align_center {
    text-align:center
}
.an_scl {
    opacity:0;
}
.op05 {
    opacity:0.5;
}
.hvop07 {
    transition:opacity 0.4s;
}
.hvop07:hover {
    opacity:0.7;
}

/* font color */
.cl_blu { color: #009cb7; }
.cl_grn { color: #00786e; }
.cl_orn { color: #ff7539; }





/* jp */
.wf_jp {
    font-family: 'Kaisei Opti', serif;
    font-weight: 400;
    font-style: normal;
}


.animated {
    opacity: 1;
    -webkit-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-fill-mode:both!important;
    animation-fill-mode:both!important;
}
/* @media (prefers-reduced-motion:reduce),print {
    .animated {
        -webkit-animation-duration:1ms!important;
        animation-duration:1ms!important;
        -webkit-transition-duration:1ms!important;
        transition-duration:1ms!important;
        -webkit-animation-iteration-count:1!important;
        animation-iteration-count:1!important;
    }
    .animated[class*=Out] {
        opacity:0;
    }
}
*/

@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

.poyoyon{
  animation: poyoyon 1s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
}
 
@keyframes poyoyon {
  0% {
    transform: translateX(140px);
    opacity: 0;
  }
  50% {
    transform: translateX(0);
  }
  65% {
    transform: translateX(30px);
  }
  100% {
    transform: translateX(0);
  }
  20%,100% {
    opacity: 1;
  }
}

.popup{
  animation: popup 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
}
 
@keyframes popup {
  0% {
    transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1.0);
  }
  80%, 100% {
    opacity: 1;
  }
}



:root{
    --htmlfont: 100px;
}


/******************************************************************/
html {
    font-size: var(--htmlfont);
    overflow-x:hidden;
}
body {
    font-size:0.22rem;
    line-height:170%;
    position: relative;
    background-color:#fff;
    background-position: center top;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
body::before{
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: radial-gradient(#ffeba7 20%, transparent 20%),radial-gradient(#ffeba7 20%, transparent 20%);
    background-size: 40px 40px;
    background-position: 0 0, 20px 20px;
    z-index: -1;
}

.noscroll{
    overflow-y:hidden;
}

.header{
    width: 1920px;
    max-width: 83.333%;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.top_tmpl{

}


.ban_menuopen{
    position: absolute;
    top: 0.6rem;
    z-index: 50;
    right: calc(50% - 8.7rem);
    width: 1.66rem;
}

.menumob{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index:300;
    display: none;
}

.menuinners{
    position: relative;
    margin: 5vh 0;
    padding: 1.3rem 0;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 400;
    box-sizing: border-box;
}

.menubg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.9);
    z-index: 300;
}

.ban_menuclose{
    position: absolute;
    top: 1.3rem;
    right: calc(50% - 5.7rem);
    width: 1.12rem;
}

.menulist{
    text-align: center;
    padding-top: 1.8rem;
}

.menulist li{
    padding-bottom: 0.8rem;
    width: 5.9rem;
    margin: 0 auto;
}

.menulist li a{
    transition: opacity 0.4s;
    display: block;
}

.menulist li a:hover{
    opacity: 0.8;
}

.wrap{
    position: relative;
    z-index: 20;
}

.mobtf{
    position: relative;
    top: -0.8rem;
}
.innermob{
    width: 1600px;
    max-width: 83.333%;
    margin: 1.4rem auto 0 auto;
    box-sizing: border-box;
    background-color: #fff;
    padding:0 0.5rem 0.5rem 0.5rem;
}

.innermob h1{ font-size: 0.32rem; line-height: 170%; }
.innermob h2{ font-size: 0.36rem; line-height: 170%; }

.snsmoblist{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0.2rem;
}
.bansnsin{
    padding: 0.45rem;
    width: 0.55rem;
    height: 0.55rem;
    border: 3px solid #009cb7;
    border-radius: 100%;
    margin: 0.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    background-color: #fff;
}

.bansnsin:hover{
    background-color: #ffcf2b;
}

.t_campaign{
    margin-top: 1.2rem;
    position: relative;
}
.innertit{
    text-align: center;
}
.innertit img{
    width: 6.95rem;
    margin-top: -.82rem;
}

.innercon{
    padding-top: 0.3rem;
}
.instit{
    font-size: 1.35em;
    line-height: 160%;
}

.instit_s02{
    font-size: 1.1em;
    line-height: 130%;
    color: #59b0ff;
}

.instit_03{
    font-size: 2em;
    line-height: 130%;
    color: #E60012;
}

.lineindx01{
    padding-left: 1em;
    text-indent: -1em;
}

.incoms{
    text-align: center;
    font-size: 2em;
    color: #00b7b0;
    padding: 0.5rem 0;
}



.cn_tab {
    display:flex;
    flex-wrap:wrap;
    max-width:100%;
    margin:0 auto;
    box-sizing:border-box;
}
.cn_tab .cn_ttn {
    box-sizing:border-box;
    width:50%;
    padding-right: 5%;
}
.cn_tab .cn_ttx {
    box-sizing:border-box;
    width:50%;
}


.ban_inline {
    width:800px;
    max-width: 100%;
    margin: 0 auto;
    padding:0.3rem 0;
    color: #00786e;
    text-align: center;
    font-weight: 700;
    display: flex;
    justify-content: center;
}
.ban_inline .ban_lmob {
    width: 100%;
    max-width:100%;
    padding:0.5em;
    box-sizing: border-box;
    display:block;
    font-size:1.6em;
    line-height:120%;
    border: 1px solid #00786e;
    border-radius: 20px;
    background-color: #fff;
    box-shadow:0.05rem 0.05rem 0 #00786e;
    text-decoration:none;
    position:relative;
    overflow:hidden;
    transition:width 0.6s;
}

.ban_lmob span{
    position: relative;
    z-index: 10;
}
.ban_lmob::before {
    position:absolute;
    top:0;
    left:0;
    z-index:2;
    display:block;
    content:'';
    width:100%;
    height:100%;
    background-color: #ffcf2b;
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.ban_lmob:hover {
    color:#fff;
}

.ban_lmob:hover::before {
    transform: scaleX(1);
}





.pgtp {
    position:fixed;
    bottom:30px;
    right:0.5rem;
    text-align:center;
    text-decoration:none;
    display:none;
    width:3.25rem;
    transition:bottom 0.4s;
    z-index:50;
}

.pgtp:hover {
    opacity:0.7;
}

.footin{
    width: 1600px;
    max-width: 83.333%;
    margin: 0 auto;
    padding:0.6rem 0 0.9rem 0;
    text-align: center;
}


.ban_line{text-align: center;}
.ban_line a{ font-size: 1.1em; line-height: 120%; display: inline-block; padding: 0.4em 1.5em; background:#5bb2e7; border-radius: 999px;color: #fff;transition: all 0.4s; text-decoration: none; }
.ban_line a:hover{  background:#3479be;}



.adinnnerls{
    position: relative;
    z-index: 10;
}
.qrpre01{
    position: absolute;
    bottom: 5%;
    left: 5%;
    width: 15%;
    z-index: 0;
}
.qrpre02{
    position: absolute;
    bottom: 25%;
    right: 10%;
    width: 15%;
    z-index:0;     
}





@media screen and (max-width:1920px) {
    :root{
        --htmlfont: 5.6vw;
    }

    body {
        background-size: 100% 110vh;
    }

    .ban_menuopen{
        right: 4.583%;
    }

}





@media screen and (max-width:768px) {
    :root{
        --htmlfont: 13vw;
    }


    html {
        width:100%;
        overflow-x:hidden;
    }
    body {
        overflow-x:hidden;
        font-size:0.2rem;
        line-height:160%;
    }
    .sp_none {
        display:none;
    }
    .pc_none {
        display:block;
    }


    .header{
        max-width: 100%;
    }


    .top_tmpl{
        width: 108.4%;
        margin-left: -4.2%;
    }

    .ban_menuopen{
        top: 0.3rem;
        width: 0.83rem;
        right: 2.583%;
    }

    .menuinners{
        padding: 0.5rem 0;
    }

    .menulist{
        padding-top: 0.8rem;
    }

    .ban_menuclose {
        position: absolute;
        top: 0.5rem;
        right: 0.3rem;
        width: 0.6rem;
    }

    .menulist li{
        padding-bottom: 0.4rem;
        width: 2.9rem;
    }

    .innermob{
        max-width: 90%;
        margin-top: 1rem;
        padding: 0 0.3rem 0.3rem 0.3rem;
    }
    
    .innermob h1{ font-size: 0.26rem; }
    .innermob h2{ font-size: 0.39rem; }


    .qrpre01{
        position: absolute;
        bottom: 0;
        left: -5%;
        width: 30%;
    }
    .qrpre02{
        position: absolute;
        bottom: 20%;
        right: -2%;
        width: 27%;
    }






    .bansnsin{
        padding: 0.35rem;
        width: 0.5rem;
        height: 0.5rem;
        border: 2px solid #009cb7;
        margin: 0.2rem;
    }

    .t_campaign{
        margin-top: 0.9rem;
        }
    .innertit img{
        width: 5rem;
        margin-top: -0.48rem;
    }

    .innercon{
        padding: 0.1rem 0.25rem;
    }

     .cn_tab {
        justify-content: center;
    }
    .cn_tab .cn_ttn {
        width: 70%;
        padding:0 0 4% 0;
    }
    .cn_tab .cn_ttx {
        width: 100%;
        padding:0 0 0 0;
    }



    
    .pgtp{
        width: 1.62rem;
        bottom: 0.4rem;
        right: 0.2rem;
    }
    .footin {
        width: 1600px;
        max-width: 83.333%;
        margin: 0 auto;
        padding: 0.5rem 0.5rem 0.9rem 0.5rem;
    }





}