@charset "utf-8";
*{ box-sizing: border-box;}

/* =custom style
------------------------------------------------------------------------------------------*/
:root {
  --keyc:#fe8aad;
  --keyc2:#646464;
  --font1:'Noto Sans JP',"游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体",  sans-serif;
  --font2:"Roboto Slab",'Noto Sans JP', sans-serif;
}

/* =base
------------------------------------------------------------------------------------------*/
body {
	text-align: center;
	font-family:var(--font1);
    font-weight: 500;
	font-size: 16px;
	line-height: 1.5em;
    /*font-feature-settings : "palt";*/ 
	color: var(--keyc2);
	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: #e65087;text-decoration: none; outline:none; transition: 0.5s;}
a:hover {color: #e6739d; opacity: 0.8;}
a.active{color: #e6739d; }

.pc_only{ display:block;}
.sp_only{ display:none !important;}

#container{ position:relative;}

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

.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{text-align:left;position:fixed;z-index:99;top:0;width:100%;}
header .head_logo{ float: left; margin: 12px 0 0 20px; width: 120px;}
header .head_logo img{ width:100%;}

.toggle_nav{ float:right;}
.nav ul{ width: 100%; margin-right:1.5vw;}
.nav li {display:inline-block;float: left;margin: 0 3px;}
.nav li a{display:block;line-height:1em;font-size: 16px;letter-spacing:0.1em;color: var(--keyc2);text-align:center;transition: 0.3s ease;padding:20px 18px 15px;font-weight: bold;position:relative;font-family: var(--font2);}
.nav li:nth-child(4n - 3) a{ color: #e65087;}
.nav li:nth-child(4n - 2) a{ color: #fabe00;}
.nav li:nth-child(4n - 1) a{ color: #f0824b;}
.nav li:nth-child(4n) a{ color: #1eafe6;}
.nav li a.active:after{width:100%;}
.nav li a:after{content: "";position: absolute;width:0;height: 4px;background-color: var(--keyc2);bottom: 0;right: 0; transition: 0.3s ease;}
.nav li:nth-child(4n - 3) a:after{ background-color: #e65087;}
.nav li:nth-child(4n - 2) a:after{ background-color: #fabe00;}
.nav li:nth-child(4n - 1) a:after{ background-color: #f0824b;}
.nav li:nth-child(4n) a:after{ background-color: #1eafe6;}
.nav li a:hover:after{ width:100%; right: inherit; left: 0; transition: 0.3s ease;}

.nav li.twittr{ margin-top: 6px;}
.nav li.twittr img{width: 20px;}
.nav li.twittr a{padding: 12px !important;}
.nav li.twittr a:after{ display:none;}

.nav li.twittr a:hover,
.nav li.twittr a.active{ background:none; opacity:0.8;}

.nav_trigger{display: none;}

header.in_head{ background-image:url(../images/in_nav_bg.png); background-repeat:repeat-x; padding-bottom:30px; }
header.in_head .head_wrap{ width:95%; max-width:1000px; margin:0 auto; position:relative;}
header.in_head .nav li a{ color:#fff;}
header.in_head h1{padding: 12px 0 0 0;position: absolute; top: 0px; left: 0; width: 260px;}
header.in_head h1 img{width: 100%;}
header.in_head .nav{}
header.in_head .nav ul{ margin-right:0;}
header.in_head .nav li a{ font-size:18px; padding:15px 12px 12px; }
header.in_head .nav li.twittr a{ padding:5px 0px 10px 7px!important;}

@media only screen and (max-width: 768px){
header {/* top:0; *//* height:46px; */}
header .head_logo{width: 120px;}

header.in_head{ background-image:none;  }
header.in_head .head_wrap{ width:100%;}
header.in_head .nav li a{ color:#279abf;}
header.in_head h1{padding: 6px 0 0 2vw;;position: inherit;}
header.in_head h1 img{    width: 80px;}
header.in_head .nav li a{ font-size:18px; padding: 6vw 0; }
header.in_head .nav li a:hover,header.in_head .nav li a.active { background-color: rgba(44,171,212,0.9); color: #fff;}

.nav li a span.btm{ display:none;}

.global{width:100%;position:fixed;z-index:10;top:0;left:0;overflow-y: hidden;padding-top:0;height:0;background-color: #fff;box-sizing: border-box;-webkit-transition: 1s ease;-moz-transition: 0.5s ease;-o-transition: 0.5s ease;-ms-transition: 0.5s ease;transition:0.5s ease;}
.global li{width: 100%;display:inherit;}
.nav-active .global{height:100vh;padding-top: 51px;}
.nav li.sp_top{ display: inherit;}

.toggle_nav{ -webkit-transition: 0.2s ease;  -moz-transition: 0.2s ease;  -o-transition: 0.2s ease;  -ms-transition: 0.2s ease;  transition: 0.2s ease;}
.nav{ margin-bottom:0; width:100%; height:inherit;}
.nav li{padding-right: 0;}
.nav li:first-child{}
.nav li a:hover,nav li a.at{  border-bottom: none;}
.nav li a{ width:100%; max-width:inherit; text-align:center; padding:6vw 0; color:#fff; font-weight:bold;}
.nav li a strong{ font-size:5vw; line-height:1em; margin-bottom:2vw; }
.nav li a.on{ border-bottom:none;}

.nav li a.active{ color:#fff;}
.nav li:nth-child(4n - 3) a.active{ background-color: #e65087;}
.nav li:nth-child(4n - 2) a.active{ background-color: #fabe00;}
.nav li:nth-child(4n - 1) a.active{ background-color: #1eafe6;}
.nav li:nth-child(4n) a.active{ background-color: #f0824b;}
.nav li a:after{ display: none;}

.nav .twittr{ width:100%; margin-top:0;}
.nav .twittr img{ width:10%;}
.nav li.twittr a{padding: 15px 12px !important;}

/* Default navigation icon */
.nav_trigger {display: block;position: fixed;width: 30px;height: 25px;right:3vw;top: 15px;z-index: 200;line-height:1;}
.nav-active .nav_trigger { opacity: 0.7;}
.nav_icon {display: inline-block;position: relative;width: 30px;height: 2px;background-color: #1eafe6;-webkit-transition-property: background-color, -webkit-transform;transition-property: background-color, -webkit-transform;transition-property: background-color, transform;transition-property: background-color, transform, -webkit-transform;-webkit-transition-duration: 300ms;transition-duration: 300ms;}
.nav_trigger:before,
.nav_icon:before,
.nav_icon:after {content: '';display: block;width: 30px;height: 2px;position: absolute;background: var(--keyc2);-webkit-transition-property: margin, -webkit-transform;transition-property: margin, -webkit-transform;transition-property: margin, transform;transition-property: margin, transform, -webkit-transform;-webkit-transition-duration: 300ms;transition-duration: 300ms;}
.nav_trigger:before{margin-top: 7px;background: #fabe00;}
.nav_icon:before {margin-top: -12px;background: #e65087;}
.nav_icon:after {margin-top: 6px;background: #f0824b;}
.nav-active .nav_icon {background: rgba(0, 0, 0, 0);transform: rotate(90deg);}
.nav-active .nav_trigger:before{margin-top: 0;background: rgba(0, 0, 0, 0);transform: rotate(-135deg);}
.nav-active .nav_icon:before {margin-top: 0;-webkit-transform: rotate(135deg);transform: rotate(135deg);background: #cccc;}
.nav-active .nav_icon:after {margin-top: 0;-webkit-transform: rotate(-135deg);transform: rotate(-135deg);background: #ccc;}

.nav li a:hover span.btm,
.nav li a.active span.btm{ display:none;}
.nav li a span.jp{ font-size:3vw;}
}


/* =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;}
}


/* =ページトップ
------------------------------------------------------------------------------------------*/
.page_top{text-align: right;margin: 0;  width:80px;  text-align:center;position:fixed; right:30px; bottom:40px;  z-index:10}
.page_top a{background-color:var(--keyc2); display:block;border-radius: 50%;height:80px; width:80px; line-height:80px; color:#fff; font-family: var(--font2);font-size:12px;}
.page_top a:hover{background-color:#cc0000; text-decoration:none;}


@media only screen and (max-width: 768px){
.page_top{ display:none;}
}


/* =見出し
------------------------------------------------------------------------------------------*/
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%;}
}



/************* ANIMATIONS ***************/

.anime{ position:relative; overflow:hidden; opacity:0;}

@keyframes imageAnimation { 
  0% { opacity: 0; animation-timing-function: ease-in; }
  10% { opacity: 1; animation-timing-function: ease-out; }
  25% { opacity: 1; }
  37% { opacity: 0; }
  100% { opacity: 0; }
}

/* SLIDE BOX ANIMATION */
@keyframes play {
  from {transform: translateX(-100%);opacity: 0;}
  to {transform: translateX(0);opacity: 1;}
}
@keyframes maskOut {
  from {transform: translateX(0); }  
  to {transform: translateX(101%); }
}

.play.blkin { animation-name: play; animation-duration: .4s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.8,0,.5,1); position: relative;}
.play.blkin:before { animation-name: maskOut; animation-duration: .4s; animation-delay: .4s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.8,0,.5,1); content: ''; position: absolute; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; background: #fe8aad;}

.play.fade_up {animation-fill-mode:both; animation-duration:1.5s; 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_in { animation-fill-mode:both; animation-duration:1.5s; animation-name: fadeIn; visibility: visible !important;}
@-webkit-keyframes fadeIn {
 0% { opacity: 0;}
 100% { opacity: 1;}
}
@keyframes fadeIn {
 0% { opacity: 0;}
 100% { opacity: 1;}
}

/* =404
-----------------------------------------------------------------------------------------*/
#error_404{ padding: 100px 0; text-align: center;}
#error_404 .container_s{padding: 50px 0;}
#error_404 .text{ font-size: 20px; line-height: 1.5em; margin: 3em 0;}
#error_404 .btn_01{max-width: 500px;}

@media only screen and (max-width: 768px){
    #error_404 .text{ font-size: 16px; line-height: 1.5em;}
    #error_404 .btn_01{max-width: 300px;}
}