@charset "utf-8";

*{ box-sizing: border-box;}

:root {
  --keyc:#ffd800;
  --keyc2:#fff;
  --keyred:#cb000b;
  --keybl:#00a4c3;
  --font1:'Noto Sans JP', sans-serif;
  --font2:'Oswald', 'Noto Sans JP', sans-serif;
}


/* =base
------------------------------------------------------------------------------------------*/
body {
	text-align: center;
	font-family: var(--font1);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.8em;
	color: #000;
	margin: 0;
	min-height:100%;
	overflow-x: hidden;
	background-color:#fff;
	/*
    -webkit-touch-callout:none; 
    -webkit-user-select:none; 	
	*/
}
body:before{
	content: "";
	display: block;
	position: fixed;
	height: 100lvh;
	width: 100%;
	background-image: url("../images/bg_pattern.png");
	background-repeat: repeat;
	background-position: center;
	background-size: 50px;
	z-index: -1;
	opacity: 0.3;
	}

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

@media only screen and (max-width: 768px){
	body{font-size: 14px; line-height: 1.7em;}
    body:before{ background-size: 30px; }
    
	.pc_only{ display:none!important;}
	.sp_only{ display: inherit!important;}
}

html {overflow-y:scroll; height:100%;scroll-behavior: smooth;}
a {text-decoration: none;cursor: pointer;color:var(--keyred);outline:none;transition: 0.2s ease;}
a:link { text-decoration: none;}
a:hover {opacity: 0.7; text-decoration: none;transition: 0.2s ease;}
a:active { text-decoration: none;}
a img { outline:none;}



.btn{    display: block;
    padding: 1em;
    border: 3px solid var(--keyred);
    color: var(--keyred);
    font-weight: bold;}

.arrow{ position:relative;}
.arrow::after {
    content: "";
    position: absolute;
    top: calc(50% - 3px);
    right: 4%;
    width: 6px;
    height: 6px;
    border: 1px solid;
    border-color: transparent #fff #fff transparent;
    transform: rotate(-45deg);
}
.arrow:hover::after{border-color: transparent #ccc #ccc transparent;}
.arrow.blk::after{ border-color: transparent #000 #000 transparent;}
.arrow.blk:hover::after{border-color: transparent #999 #999 transparent;}

/********************** header *******************************/
header{text-align:left;position:fixed;z-index:99;top:0;width:100%;height: 50px; display: flex; background-color:rgba(255,255,255,0.9); justify-content: space-between; align-items: center;}

header .headlogo{ width: 8%; max-width: 110px;  line-height: 0; margin-left: 1.5%; }
header .headlogo img{ width: 100%;}

.toggle_nav{margin:  0 0;}

.nav .pages ul{  width: 100%;  display: flex;align-content: center;}
.nav .pages li {position:relative;margin-right:1px;}
.nav .pages li a{ display: block; line-height:50px; font-size:14px; text-align:center; min-height: 50px; position:relative; min-width:8em;color:#000;padding:0 1.2em;font-weight: 600;transition: 0.3s;}

.nav li a.active{color: var(--keyred);}
.nav li:hover a,
.nav li:hover a.active{color: #fff; opacity: 1;}

/* sub nav */
.nav .pages li ul{  position:absolute; top:50px; background-color:var(--keyred); width:240px; display:block;}
.nav .pages li ul li{ float:none; display:inherit;  }
.nav .pages li ul li a{ transition:0.25s; overflow:hidden; line-height:0; padding:0 1em;text-align:left;min-height: inherit;}
.nav .pages li ul li a:hover{ background-color:#c9434a;}
.nav .pages li:hover ul li a{ overflow:visible; padding:15px 1em; line-height:1.4em;}
.nav .pages li ul li:before{ display:none;}

.nav_trigger{display: none;}

.nav li a span.btm{ position: absolute; bottom: 0; left:0px; width: 0%; height: 4px; background: var(--keyred);
    -webkit-transition: all 0.3s ease;
       -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
         -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
}
/*.nav li a:hover span.btm,*/
.nav li a.active span.btm{ width: 100%;}
.nav_trigger{display: none;}

.nav .pages li::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; content: ''; background: var(--keyred); transform-origin: left bottom; transform: scale(1, 0); transition: transform .3s;}
.nav .pages li:hover::before { transform-origin: left bottom; transform: scale(1, 1);}

/* opencampus entry */
.nav li.nav_oc{ margin:0 0 0 2px; }
.nav li.nav_oc a{ background-color: var(--keyc); color: var(--keyred); }
.nav li.nav_et a{background-color:var(--keyred); color: #fff; width: 12em; }

.nav li.nav_oc a:hover,
.nav li.nav_et a:hover{ opacity: 0.7;}
.nav .pages li.nav_oc::before,
.nav .pages li.nav_et::before{ display: none;}

@media only screen and (max-width: 920px){
	header{ height: 45px;}
	header .headlogo{ width: 24%; margin-left: 3%;}
	
	.global{width:100%; position:fixed; z-index:10; top:0; left:0; overflow-y: hidden; padding-top:0; height:0; background-color:rgba(255,255,255,0.95); 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:45px;overflow-y: scroll;}

	.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 a{ width:100%; max-width:inherit; text-align:center; padding:6vw 0; color:#fff; height:auto; line-height:1em; font-size:16px; border-top:1px solid #ccc;}

	.nav .pages{ width:100%; margin:0; display:block; padding:0;}
	.nav .pages ul{ display: inherit;}
	.nav .pages li{ margin-right:0;}
	.nav .pages li::before{ display:none;}
	.nav .pages li a{ width:auto; font-size:14px;padding:4.5vw 0;min-height:inherit; line-height: 1em;}
	.nav li:hover a,
	.nav li:hover a.active{color: #000;}
	.nav .pages li a.toggle_btn{}
	.nav .pages li a.toggle_btn:after{ position: absolute; top: calc(50% - 6px); right: 19px; margin: auto; content: ""; vertical-align: middle; width: 6px; height: 6px; border-top: 1px solid #000; border-right: 1px solid #000; -webkit-transform: rotate(135deg); transform: rotate(135deg);}
	.nav .pages li ul{ width:100%; position:inherit; top:0; display: none; background:none;}
	.nav .pages li ul li{ background-color:#000; border-top: 1px solid #333; border-bottom:none;}
	.nav .pages li ul li a{ overflow:visible; line-height:1em;padding:5vw 0; text-align:center;border-top: none; color: #fff;}
	.nav .pages li:hover ul li a{padding:5vw 0; line-height:1;}


	/* Default navigation icon */
	.nav_trigger {display: block;position: fixed;width: 28px;height: 25px;right:3%;top: 5px;z-index: 200;}
	.nav-active .nav_trigger { opacity: 0.7;}
	.nav_icon { display: inline-block; position: relative; width: 28px; height: 2px; background-color:var(--keyred); -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_icon:before,
	.nav_icon:after { content: ''; display: block; width: 28px; height: 2px; position: absolute; background: var(--keyred); -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_icon:before { margin-top: -9px;}
	.nav_icon:after { margin-top: 9px;}
	.nav-active .nav_icon { background: rgba(0, 0, 0, 0);}
	.nav-active .nav_icon:before { margin-top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
	.nav-active .nav_icon:after { margin-top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

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


/* =foot
-----------------------------------------------------------------------------------------*/
.contact_box{display: block;position: fixed;bottom: 0;right: 0;line-height: 0;z-index: 100;width: min(240px,18vw);}
.contact_box img{ width: 100%;}
.contact_box:hover img{opacity: 1;}

footer{padding: 4vw 0 4vw;background-color: #000;color: #fff;}
footer .com_bnr{margin-bottom: 4vw;}
footer .com_bnr p{letter-spacing: 0.2em;font-size: 0.9em;}
footer .com_bnr ul{ display: flex; justify-content: center;}
footer .com_bnr li{ margin: 0 10px; width: 210px;}
footer .com_bnr a{line-height: 0;display: block;}
footer .com_bnr a img{width: 100%; }

footer small{font-family: inherit;font-size: 14px;font-weight: bold;line-height: 1.5em;}

.sns{ margin-bottom:5vw; font-family: var( --font2); }
.sns h2{font-size: 24px; line-height: 1em; margin-bottom: 1em;}
.sns ul{ display: flex; justify-content: center;}
.sns li{ width: 50px; margin: 0 10px;}

@media only screen and (max-width: 768px){
	.contact_box{width: 26vw;}

    footer{ padding: 10vw 0 26vw;}
    footer .com_bnr li{ margin: 0 1%; width: 42%;}
    
	footer small{ font-size: 12px; line-height: 1.5em; width: 94%; margin: 0 auto; display: block;}
	
	.sns{ margin-bottom:50px;}
	.sns h2{font-size: 20px;}
	.sns li{ width: 45px; margin: 0 10px;}
}


/* =video
------------------------------------------------------ */
/* #bgvid {
 position: fixed; bottom: -30vh; left:0; width: 100%; z-index: -1; mix-blend-mode: screen; opacity: 0.7; 
}
@media only screen and (max-width: 768px){
#bgvid { width: auto; height: 100%; bottom: 0;}
}

@media all and (-ms-high-contrast: none) {
#bgvid{ bottom: 0; opacity: 0.06;}
} */


/* =ページトップ
------------------------------------------------------------------------------------------*/

.page_top{text-align: right;margin: 0;text-align:center;position:fixed;right: 30px;bottom:30px;z-index:100;transition: 1s;}
.page_top a{display:block; width:11vw; line-height:0;}
.page_top a img{ width:100%;}
.page_top a:hover img{ opacity:0.9; }

.page_top.in{ bottom:-300px;}


@media only screen and (max-width: 639px){
.page_top{ right:4vw; bottom:4vw;}
.page_top a{ width:25vw;}

.page_top.in{ bottom:-40vw;}
}

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


@media all and (-ms-high-contrast: none) {
.nav li a{ transition:inherit;}
}

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

.anime{ position:relative; overflow:hidden; opacity:0;}
.play.blkin.spring:before{ background-color: #e65087; }
.play.blkin.summer:before{ background-color: #fabe00; }
.play.blkin.autumn:before{ background-color: #f0824b; }
.play.blkin.winter:before{ background-color: #1eafe6; }
@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: #333;}

.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(50px); } 
    100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInUp {
 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_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;}
}