@charset "utf-8";



*{ box-sizing: border-box;}



/* common style */

:root {

  --sitekey:#f08caa;

  --siteblack:#646464;

  --siteyellow:#fac80f;

  --siteorange:#f09664;

  --siteblue:#6eb4e6;

  --fontrobot: 'Roboto Slab','Noto Sans JP',"游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;

}





/* =base

------------------------------------------------------------------------------------------*/

body {

	text-align: center;

	font-family: 'Noto Sans JP',"游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;

    font-weight: 500;

	font-size: 16px;

	line-height: 1.5em;

    /*font-feature-settings : "palt";*/ 

	color: var(--siteblack);

	background-color: #fff;

	background-image: url("../images/bg.png");

	background-size: 100%;

	background-attachment: fixed;

	width: 100%; overflow: hidden;

}



html {overflow-y:scroll; height:100%;}



a {color: var(--sitekey);text-decoration: none; outline:none; transition: 0.2s; cursor: pointer;}

a:hover {color: #ff8aad; opacity:0.7; transition: 0.2s;}

a:hover img{ transition: 0.2s;}

a.active{color: var(--sitekey);}



.pc_only{ display:block;}

.sp_only{ display:none !important;}



main.in{ padding: 80px 0; display: block;}



@media only screen and (max-width: 768px){

  body { background-image: none; 

    font-feature-settings : "palt"; }

  body::before { content: ""; position: fixed; top: 0px; left: 0px; background-image: url("../images/bg_sp.png"); background-position: center center; background-size: 100%; background-repeat: no-repeat; width: 100%; height: 100%; z-index: -1; opacity: 0.7; }

    

main.in{ padding: 70px 0 35px;}

main.loginmain{ padding-top: 60px;}



.pc_only{ display:none;}

.sp_only{ display:block !important;}

}





/* =fade

------------------------------------------------------------------------------------------*/

#js_fade2 {position : fixed;top : 0; left: 0;width: 100%; height : 100%;background-color: #c00;background-image : url( ../images/loader.svg );background-repeat : no-repeat; background-size:80px; background-position : 50% 50%; z-index:100;}



/* =header

------------------------------------------------------------------------------------------*/

header{ position: fixed; top: 0; left: 0; width: 100%; z-index: 10;}



header .site_tit{ width: 140px; position: relative; z-index: 20; left: 1%; top: 6px;}

header .site_tit a {display: block; line-height: 0;}

header .site_tit img{ width: 100%;}



/* ログイン前メニュー */

.loginhead{ position: fixed; top: 12px; right: 1%;}

.loginhead ul{ display: flex;}

.loginhead li{ margin-left: 10px; background-color: #fe8aad;border-radius: 5px; padding: 2px; }

.loginhead li a{ background-color: #fe8aad; color: #fff; padding: 0.6em 0; width: 12em; display: block; line-height: 1em; letter-spacing: 0.1em; border-radius: 5px; font-weight: 400;    font-family: 'Roboto Slab';}

.loginhead li.btn a{background-color: #fff; color: #868686;}



/* メニューtoggle */

.toggle_nav{ transition: 0.3s;}

.nav_trigger { display: block; position: fixed; width: 44px; height: 44px;z-index: 200; background-image: url("../images/menu_btn.png"); background-size: 100%; transition: 0.5s; right: 2%; top: 10px;}

.nav-active .nav_trigger{ background-image: url("../images/menu_btn_close.png");transform: rotate(180deg);}

.nav_trigger:hover{ cursor: pointer;}



/* ログイン後メニュー */

.nav{position:fixed; top:0; left:0; overflow: hidden; padding-top:0; height:0; background-color:#fff; width:100%; transition: 0.5s; background-image: url("../images/bg.png"); background-size: 100%; background-attachment: fixed; }

.nav-active .nav{ height:100vh;padding:100px 0 ;overflow-y: scroll; }

.nav-active .nav::-webkit-scrollbar {display: none;}

.nav-active .nav::-webkit-scrollbar-track {display: none;}



.global{ text-align: left; width: 90%;max-width: 1920px;  margin: 0 auto; display: flex; justify-content: space-between;font-family: 'Roboto Slab','Noto Sans JP',"游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif; letter-spacing: 0.1em; font-size: 1.7vw; line-height: 1.5em;}

.global p{ margin: 0;}

.global a{color: var(--siteblack); display: block; padding: 0.2em 0;}

/* .global span{ font-size: 0.5em; margin-left: 0.6em; } */



.global .main_menu{width: 60%;max-width: 1000px;}

.global .main_menu .top_menu{margin-bottom: 10%;}

.global .main_menu .top_menu ul{display: flex;flex-wrap: wrap;gap: clamp(10px,1vw,20px);}

.global .main_menu .top_menu li{width: calc((100% - clamp(10px,1vw,20px)*2)/3);}

.global .main_menu .top_menu .main_nav a{border: 4px solid #646464; display: flex;justify-content: center;flex-direction: column; align-items: center; text-align: center;background:#fff;height: 100%;color: #646464;padding:10% 4%;font-family: var(--font01);line-height: 1.2em;position: relative;border-radius: 10px;font-size: min(1.35vw,22px);}



.global .main_menu .top_menu li:nth-of-type(1) .main_nav a{ border-color: var(--sitekey);}

.global .main_menu .top_menu li:nth-of-type(2) .main_nav a{ border-color: var(--siteyellow);}

.global .main_menu .top_menu li:nth-of-type(3) .main_nav a{ border-color: var(--siteorange);}

.global .main_menu .top_menu li:nth-of-type(4) .main_nav a{ border-color: var(--siteblue);}

.global .main_menu .top_menu li:nth-of-type(5) .main_nav a{ border-color: #66cc9a;}

.global .main_menu .top_menu li:nth-of-type(6) .main_nav a{ border-color: #9aa4cc;}



.global .main_menu .top_menu .main_nav a .icon{margin-bottom: 4%;}

.global .main_menu .top_menu .main_nav a .icon img{max-height: 50px;height: 4vw;}

.global .main_menu .top_menu .main_nav a:after{content: attr(data-nav-text);font-size: min(.8vw,12px);line-height: 1em;margin-top: .5em;}

.global .main_menu .bottom_menu{}

.global .main_menu .bottom_menu .sub_nav{display: flex;align-items: center;}

.global .main_menu .bottom_menu .sub_nav .nav_text{position: relative;padding-left: min(75px,5.5vw);font-size: min(2vw,24px);line-height: 1.2em;display: flex;flex-direction: column;width: 40%;max-width: 300px;}

.global .main_menu .bottom_menu .sub_nav .nav_text .icon{display: inline-block;position: absolute;left: 0;top: 58%;transform: translateY(-50%);}

.global .main_menu .bottom_menu .sub_nav .nav_text .icon img{max-height: 50px;height: 4vw;max-width: 50px;object-fit: contain;}

.global .main_menu .bottom_menu .sub_nav .nav_text:after{content: attr(data-nav-text);font-size: min(.8vw,12px);line-height: 1em;margin-top: .2em;}

.global .main_menu .bottom_menu .sub_nav a.bnr{width: 44%;max-width: 400px;padding: 0;display: flex;align-items: center;}

.global .main_menu .bottom_menu .sub_nav a.bnr img{width: 100%;}

.global .main_menu .bottom_menu .sub_nav a{}

.global .main_menu .bottom_menu li{}

.global .main_menu .bottom_menu li:not(:last-of-type){margin-bottom: 1em;}

.global .main_menu .bottom_menu{}

.global .main_menu{}

.global .main_menu{}

.global .main_menu{}

.global .main_menu{}



.global .admin_menu{ text-align: center; font-size: 1.5vw; line-height: 1em;width: 34%;max-width: 500px;}

.global .admin_menu span{ display: block; line-height: 1em; padding-top: 0.75em;font-size: 0.5em;}

.global .admin_menu li{ margin-bottom: 0.5em;}

.global .admin_menu a{ padding: 0.6em 1.5em; }

.global .admin_menu .expire{font-size: 1vw; margin-bottom: 1em;}

.global .admin_menu .logout{}

.global .admin_menu .logout a{background-color: #f2f2f2;color: var(--siteblack); font-size: 15px; letter-spacing: 0; border-radius: 5px; padding: 1em 0; }



.global .cs{ font-size:1.4vw; line-height: 1.5em; color: #b5b5b5; background-image: url("../images/menu_lock.svg"); background-repeat: no-repeat; background-position: 0 0.7em;background-size: 0.8em; padding: 0.6em 0 0 1.5em;}



.mainte { position: relative;}

.mainte .over{background-color: rgba(241,140,170,0.8);

    position: absolute;

    color: #fff;

    font-size: 1.3vw;

    line-height: 1em;

    height: 100%;

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;}



@media only screen and (max-width: 768px) {

header .site_tit{ width: 120px;}    

.nav_trigger{top: 5px; width: 38px; height: 38px;}

.nav-active .nav{ padding-top: 80px;}

.nav{ overflow: scroll;}

.global{display: block; font-size: 18px; padding-bottom: 150px;}

/* .global span{ display: block;font-size: 0.5em; margin-left: 0; line-height: 1.5em; } */

.global a{ padding: 0.5em 0;}

.global .cs{ font-size:16px; padding-top: 1em;background-position:left center;} 

.global .main_menu{ margin-bottom: 25px;width: 100%;}

.global .main_menu .top_menu .main_nav a{font-size: 3vw;border-width: 3px;}

.global .main_menu .top_menu .main_nav a:before{border-radius: 10px;}

.global .main_menu .top_menu .main_nav a:after{font-size: 1.8vw;}

.global .main_menu .top_menu .main_nav a .icon img{height: 9vw;}

.global .main_menu .top_menu .main_nav a .sp_lh{display: inline-block;transform: translateY(.5em);}

.global .main_menu .bottom_menu .sub_nav .nav_text{font-size: 3.4vw;padding-left: 10.4vw;width: 48%;}

.global .main_menu .bottom_menu .sub_nav .nav_text:after{font-size: 2vw;}

.global .main_menu .bottom_menu .sub_nav .nav_text .icon img{height: auto;width: 8vw; max-width: 50px;text-align: center;}

.global .main_menu .bottom_menu .sub_nav a.bnr{width: 49vw;left: 40vw;}

.global .main_menu .bottom_menu li:not(:last-of-type){margin-bottom: .7em;}

.global .admin_menu{ font-size: 18px; line-height: 1.5em;width: 100%;}

.global .admin_menu .expire{ font-size: 12px; line-height: 1.5em;}

.global .admin_menu .logout{ margin-top: 10px;}    



    .loginhead{ right: 2%; width: calc(97% - 130px); top: 10px;}

    .loginhead li{ width: 50%; margin-left: 5px;}

    .loginhead li a{ padding: 8px 0 7px; width: auto; font-size: 14px; line-height: 1em; font-weight: bold;}



}



/* =foot

-----------------------------------------------------------------------------------------*/

footer{ background-image: url("../images/line.png"); background-repeat: no-repeat; padding: 2vw 0 5vw 0;}

footer .foot_bnr img{  width: 100%;}

footer .foot_bnr ul{ display: flex; max-width: 1200px; margin: 0 auto 30px; justify-content: center;}

footer .foot_bnr li{ width: 200px; margin: 0 5px; line-height: 0;}

footer small{ font-size: 12px; line-height: 1.5em;}



.foot_nav{ margin-bottom: 30px;}

.foot_nav ul{ display: inline-flex;}

.foot_nav a{ color: var(--siteblack); font-size: 14px; display: inline-block; padding: 1em 1em;}



footer .nocopy{ font-size: 14px; line-height: 1em;}



@media only screen and (max-width: 768px){

    footer{ position: relative; bottom: inherit; padding:20px 0 130px; right: inherit;}



    footer .nocopy{ line-height: 1.5em; padding:0 3%;}

    

    .foot_nav{ margin-bottom: 20px;}

    .foot_nav ul{ display: inherit;}

    .foot_nav a{ color: var(--siteblack); font-size: 14px; display:block; padding: 0.5em 1em;}



    footer .foot_bnr { margin-bottom: 15px;}

    footer .foot_bnr ul{ flex-wrap: wrap; justify-content: space-between; width: 94%; margin: 0 auto;}

    footer .foot_bnr li{ width: 49%; margin: 0; margin-bottom: 10px;}

    footer .foot_bnr li.big{width: 100%;}

    footer small{ font-size: 12px; line-height: 1.5em; width: 94%; margin: 0 auto; display: block;}

}



/********************** pagination *******************************/

#pagination{position: relative; overflow: hidden;  display:flex; margin:30px auto 0; justify-content: center;}

#pagination a{ color:#868686;}

#pagination .page-numbers{ border: 1px solid #ccc; margin-right: 8px; text-decoration: none; height:40px; line-height: 40px; font-size: 14px; width:40px;  padding: 0 8px !important;  text-align:center;}

#pagination .page-numbers:last-child{ margin-right: 0;}

#pagination .page-numbers.current{color: var(--siteblack); background:#eaeaea; border:none;}

#pagination .page-numbers.dots{ padding:0 12px !important;}

#pagination .next.page-numbers,#pagination .prev.page-numbers{ width:75px;}





@media only screen and (max-width: 768px){

    #pagination .page-numbers{ margin-right: 5px;}

}



/* =ページトップ

------------------------------------------------------------------------------------------*/

.page_top{text-align: right;margin: 0;position:fixed;right:2%;bottom: 30px;z-index:10;transition: 1.5s;transition: 1.5s;}

.page_top a{width: 50px;height:150px;display:block;transition: all 0.4s ease;animation: bound .3s ease infinite alternate}

.page_top a img{ max-width: 100%; max-height: 100%;}

@keyframes rotate-anime{

  0% {transform: rotate(0);}

  100% {transform: rotate(-360deg);}

}

@keyframes bound{

  0% {transform: translateY(0px);}

  100% {transform: translateY(-5px);}

}

.page_top a:hover{ opacity:1;}



@media only screen and (max-width: 768px){

.page_top{right:2%;bottom: 10px;}

.page_top a{width: 15px;height:120px;}

	

}





/* =見出し

------------------------------------------------------------------------------------------*/

h1{margin:0;}

h2{margin:0;}

h3{margin:0;}

h4{margin:0;}

h5{margin:0;}



/* =clearfix

------------------------------------------------------------------------------------------*/

.clearfix:after{clear:both;display:block;height:0;line-height:0;visibility:hidden;font-size:0.1em;content:".";}





/********************** ローダー *******************************/

.intro_loader{ overflow:hidden; height:100vh;}

.loader_bg{ background-color:#fff; width:100%; height:100vh; position:fixed; top:0; left:0; z-index: 1000; }

.loader { -webkit-perspective: 500px;perspective: 500px;z-index:10000; position: fixed;width: 100%; height: 100vh;}

.loader img{ top:50%; left:50%; position: fixed; opacity:1; animation: anime_loader 2s infinite;animation-fill-mode: both; width:120px; margin-left:-60px; margin-top:-60px;}

.intro_on .loader{ animation:none; animation-fill-mode: inherit;}



@keyframes anime_loader {

  0% { -webkit-transform: rotateY(0) ;}

  100% { -webkit-transform: rotateY(360deg) ;}

}

 

@media only screen and (max-width: 768px){

.loader img{ width:90px; margin-left:-45px; margin-top:-45px;}

.loader_bg{ background-size: 5%;}

}



/********************** 404 *******************************/

.error_404{ max-width: 470px; width: 94%; margin: 270px auto;}

.error_404 .stit{ font-size: 64px; font-weight: 400; letter-spacing: 0.05em; margin-bottom: 34px; line-height: 1em; text-align: center;}

.error_404 p{ font-size: 14px; line-height: 1.5em; text-align: left;}





@media (max-width: 768px){

.error_404{ margin: 160px auto;}

.error_404 .stit{ font-size: 40px; margin-bottom: 24px;}

.error_404 p{ font-size: 13px; text-align: left;}

}









/* = anime

------------------------------------------------------------------------------------------*/

    @keyframes fade-in {

      0% {display: none;opacity: 0;}

      1% { display: block; opacity: 0; }

      100% {display: block;opacity: 1;}

    }





.play.fade_up {

 -webkit-animation-fill-mode:both;

 -ms-animation-fill-mode:both;

 animation-fill-mode:both;

 -webkit-animation-duration:1.5s;

 -ms-animation-duration:1.5s;

 animation-duration:1.5s;

 -webkit-animation-name: fadeInUp;

 animation-name: fadeInUp;

 visibility: visible !important;

}

@-webkit-keyframes fadeInUp {

 0% { opacity: 0; -webkit-transform: translateY(100px); }

 100% { opacity: 1; -webkit-transform: translateY(0); }

}

@keyframes fadeInUp {

 0% { opacity: 0; -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); }

 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }

}







.play.fade_r {

 -webkit-animation-fill-mode:both;

 -ms-animation-fill-mode:both;

 animation-fill-mode:both;

 -webkit-animation-duration:1.5s;

 -ms-animation-duration:1.5s;

 animation-duration:1.5s;

 -webkit-animation-name: fadeInRight;

 animation-name: fadeInRight;

 visibility: visible !important;

}

@-webkit-keyframes fadeInRight {

 0% { opacity: 0; -webkit-transform: translateX(100px); }

 100% { opacity: 1; -webkit-transform: translateY(0); }

}

@keyframes fadeInRight {

 0% { opacity: 0; -webkit-transform: translateX(100px); -ms-transform: translateX(100px); transform: translateX(100px); }

 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }

}



.play.fade_down {

 -webkit-animation-fill-mode:both;

 -ms-animation-fill-mode:both;

 animation-fill-mode:both;

 -webkit-animation-duration:1.5s;

 -ms-animation-duration:1.5s;

 animation-duration:1.5s;

 -webkit-animation-name: fadeInDown;

 animation-name: fadeInDown;

 visibility: visible !important;

}

@-webkit-keyframes fadeInDown {

 0% { opacity: 0; -webkit-transform: translateY(-50px); }

 100% { opacity: 1; -webkit-transform: translateY(0); }

}

@keyframes fadeInDown {

 0% { opacity: 0; -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); }

 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }

}



.play.fade_l {

 -webkit-animation-fill-mode:both;

 -ms-animation-fill-mode:both;

 animation-fill-mode:both;

 -webkit-animation-duration:1.5s;

 -ms-animation-duration:1.5s;

 animation-duration:1.5s;

 -webkit-animation-name: fadeInLeft;

 animation-name: fadeInLeft;

 visibility: visible !important;

}

@-webkit-keyframes fadeInLeft {

 0% { opacity: 0; -webkit-transform: translateX(-100px); }

 100% { opacity: 1; -webkit-transform: translateY(0); }

}

@keyframes fadeInLeft {

 0% { opacity: 0; -webkit-transform: translateX(-100px); -ms-transform: translateX(-100px); transform: translateX(-100px); }

 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }

}



.fadeIn {

 -webkit-animation-fill-mode:both;

 -ms-animation-fill-mode:both;

 animation-fill-mode:both;

 -webkit-animation-duration:1.5s;

 -ms-animation-duration:1.5s;

 animation-duration:1.5s;

 -webkit-animation-name: fadeI;

 animation-name: fadeIn;

 visibility: visible !important;

}

@-webkit-keyframes fadeIn {

 0% { opacity: 0;}

 100% { opacity: 1;}

}









@function random_range($min, $max) {

  $rand: random();

  $random_range: $min + floor($rand * (($max - $min) + 1));

  @return $random_range;

}



.snow {

  $total: 200;

  position: absolute;

  width: 10px;

  height: 10px;

  background: white;

  border-radius: 50%;



  @for $i from 1 through $total {

    $random-x: random(1000000) * 0.0001vw;

    $random-offset: random_range(-100000, 100000) * 0.0001vw;

    $random-x-end: $random-x + $random-offset;

    $random-x-end-yoyo: $random-x + ($random-offset / 2);

    $random-yoyo-time: random_range(30000, 80000) / 100000;

    $random-yoyo-y: $random-yoyo-time * 100vh;

    $random-scale: random(10000) * 0.0001;

    $fall-duration: random_range(10, 30) * 1s;

    $fall-delay: random(30) * -1s;



    &:nth-child(#{$i}) {

      opacity: random(10000) * 0.0001;

      transform: translate($random-x, -10px) scale($random-scale);

      animation: fall-#{$i} $fall-duration $fall-delay linear infinite;

    }



    @keyframes fall-#{$i} {

      #{percentage($random-yoyo-time)} {

        transform: translate($random-x-end, $random-yoyo-y) scale($random-scale);

      }



      to {

        transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);

      }

    }

  }

}