@charset "utf-8";
/*= 4-2-6 =========================*/
/*= loading --------===============*/
#splash {position: fixed;
width: 100%;
height: 100%;
background:#192e5f;
z-index: 9999999;
text-align:center;
color:#ffffff;
}

#splash-logo {position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.8rem;
letter-spacing: 0.2em;
}
#splash-logo span{font-size: 1rem; display: block;}

/*= splashbg ======================*/
.splashbg1,
.splashbg2{display: none;}
body.appear .splashbg1,
body.appear .splashbg2{display:block;}
body.appear .splashbg1{
animation-name:PageAnime;
animation-duration:1.4s;
animation-timing-function:ease-in-out;
animation-fill-mode:forwards;
content: "";
position:fixed;
z-index: 999;
width: 100%;
height: 100vh;
bottom:50%;
left:0;
transform: scaleY(1);
background-color:#192e5f;
}

@keyframes PageAnime{
0% {
transform-origin:top;
transform:scaleY(1);
}

100% {
transform-origin:top;
transform:scaleY(0);
}
}

body.appear .splashbg2{
animation-name:PageAnime2;
animation-duration:1.4s;
animation-timing-function:ease-in-out;
animation-fill-mode:forwards;
content: "";
position:fixed;
z-index: 999;
width: 100%;
height: 100vh;
top: 50%;
left:0;
transform: scaleY(1);
background-color:#192e5f;
}

@keyframes PageAnime2{
0% {
transform-origin:bottom;
transform:scaleY(1);
}
100% {
transform-origin:bottom;
transform:scaleY(0);
}
}

#container{
opacity: 0;/*透過0に*/
position: relative;
z-index: 1;
}

/*bodyにappearクラスがついたら出現*/
body.appear #container{
animation-name:PageAnimeAppear;
animation-duration:1s;
animation-delay:0.2s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes PageAnimeAppear{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}


/*= 5-1-9 ===========================================================*/
#header{position: fixed;
width:100%;
height: 94px;
z-index: 99; /*以下はレイアウトのためのCSS*/
display: flex;
justify-content: space-between;
align-items: center;
}

@media screen and (max-width:768px) {#header{height:70px;}}
/*　上に上がる動き　*/
#header.UpMove{animation: UpAnime 0.5s forwards;}
@keyframes UpAnime{
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-100px);
}
}

#header.DownMove{animation: DownAnime 0.5s forwards;}
@keyframes DownAnime{
from {
opacity: 0;
transform: translateY(-100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* 5-1-21 max-wigth1300px=======================================*/
@media screen and (max-width:1300px) {
#g-nav.panelactive{position:fixed;
z-index: 999;
top: 0;
width:100%;
height: 100vh;
}

.circle-bg{position: fixed;
z-index:3;
width: 100px;
height: 100px;
border-radius: 50%;
background: #192e5f;
transform: scale(0);/*scaleをはじめは0に*/
right:-50px;
bottom:-50px;
transition: all .6s;/*0.6秒かけてアニメーション*/
}

.circle-bg.circleactive{transform: scale(50);}

/*= g-nav-list ======================*/
#g-nav-list{display: none;/*start none*/
position: fixed;
z-index: 999; 
width: 100%;
height: 100vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
}

#g-nav.panelactive #g-nav-list{display: block;}
#g-nav ul {opacity: 0;/*start 0*/
position: absolute;
z-index: 999;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}

#g-nav.panelactive ul {opacity:1;}
#g-nav.panelactive ul li{
animation-name:gnaviAnime;
animation-duration:1s;
animation-delay:.2s;/*0.2 秒遅らせて出現*/
animation-fill-mode:forwards;
opacity:0;
}

#g-nav li{text-align: center; list-style: none; margin: 0 0 10px 0;}
#g-nav li a{color: #ffffff;
text-decoration: none;
padding:10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: normal;
}
}/* 5-1-21 max-wigth1300px=======================================*/

@keyframes gnaviAnime{
0% {opacity: 0;}
100% {opacity: 1;}
}


/*=  5-2-1　===================================================*/
.openbtn{display: none;}

@media screen and (max-width:1300px) {
.openbtn{
    display: block;
	position:fixed;
	top:0;
	left:0;
	z-index: 9999;/*ボタンを最前面に*/
	cursor: pointer;
    width: 94px;
    height:94px;
    background:#192e5f;
}
/*×に変化*/	
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 23px;
    height: 3px;
    border-radius: 2px;
	background-color: #fff;
  	width: 45%;
  }

.openbtn span:nth-of-type(1) {
	top:33px;	
}

.openbtn span:nth-of-type(2) {
	top:46px;
}

.openbtn span:nth-of-type(3) {
	top:58px;
}

.openbtn.active span:nth-of-type(1) {
    top: 41px;
    left: 28px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 52px;
    left: 28px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}
}

@media screen and (max-width:768px) {
    .openbtn{
        width:70px;
        height: 70px;
    }
/*×に変化*/	
.openbtn span{
    left: 17px;
 }

.openbtn span:nth-of-type(1) {
	top:20px;	
}

.openbtn span:nth-of-type(2) {
	top:33px;
}

.openbtn span:nth-of-type(3) {
	top:45px;
}

.openbtn.active span:nth-of-type(1) {
    top: 28px;
    left: 22px;
}

.openbtn.active span:nth-of-type(3){
    top: 40px;
    left: 22px;
}
    
}


/* 5-3-11 ==========================*/
.nav05b li{position: relative; margin: 0 5px;}
.nav05b li::before,
.nav05b li::after{content:"";
position: absolute;
width: 0;
height:1px;
background:#192e5f;
transition: all 0.2s linear;
transition-delay: 0.2s;
}

@media screen and (max-width:1300px) {
.nav05b li::before,
.nav05b li::after{background:#ffffff;}
}

.nav05b li::before{right: 0; top: 0;}
.nav05b li::after{left: 0; bottom: 0;}
.nav05b li span{display: block;}

.nav05b li span::before,
.nav05b li span::after{content:"";
position: absolute;
width:1px;
height:0;
background: #192e5f;
transition: all 0.2s linear;
}

.nav05b li span::before{left: 0; top: 0;}
.nav05b li span::after{right: 0; bottom: 0;}

.nav05b li.current::before,
.nav05b li.current::after,
.nav05b li:hover::before,
.nav05b li:hover::after{width: 100%;}

.nav05b li.current span::before,
.nav05b li.current span::after,
.nav05b li:hover span::before,
.nav05b li:hover span::after{height: 100%;}


/*= 9-1-5 ===================================*/
.timeline li{position: relative; list-style: none; padding:0 0 20px 0;}
.timeline dl{margin:0 0 20px 3em;}
.timeline dt {font-size:1em; margin:auto; padding:0 18px 0 0;}
.timeline dd {margin:auto; padding:0.2em 0 0 0; font-size:1.08em;}
.border-line {position: absolute;
left:0.2em;
top:0;
width:2px;
height:0;
background: #999999;}

.timeline li::after{content:'';
position: absolute;
top:0;
left:0;
width:10px; height: 10px;
background:#999999;
border-radius: 50%;}

/*= 9-1-5 ===================================*/
.timeline-sub li{position: relative; list-style: none; padding:0 0 20px 0;}
.timeline-sub dl{margin:0 0 20px 3em;}
.timeline-sub dt {font-size:1.2em; margin:auto; padding:0 18px 0 0;}
.timeline-sub dd {margin:auto; padding:0.2em 0 0 0;}
.border-line-sub {position: absolute;
left:0.5em;
top:0;
width:2px;/*線の太さ*/
height:100%;/*はじめは高さを0に*/
background: #999999;
}

.timeline-sub li::after{content:'';
position: absolute;
top:0;
left:0;
width:20px; height: 20px;
background:#999999;
border-radius: 50%;}



/*== 7-1-5 ===================================*/
/*== 共通設定 */
.btnauto001{width: auto; position: relative; overflow: hidden; text-decoration: none; display: inline-block;
font-size:1.2em;
border: 1px solid #333333;
margin:18px auto;
padding: 8px 48px;
text-align: center;
outline: none;
transition: ease .2s;}
.btnauto001.bgcenterout{border: 1px solid #ffffff; margin:18px auto; padding: 8px 40px; }
.btnauto001 span {position: relative; z-index: 3; color:#333333;}
.btnauto001:hover span{color:#ffffff;}
.btnauto001.bgcenterout span{color:#333333;}
.btnauto001.bgcenterout:hover span{color:#333333;}
/*== 7-1-5 ===================================*/
.btn{position: relative; overflow: hidden; text-decoration: none; display: inline-block;
border: 1px solid #333333;
background: #ffffff;
padding: 40px 8px;
text-align: center;
outline: none;
transition: ease .2s;}
.btn.bgcenterout{border: 1px solid #ffffff; margin:8px auto 0; padding: 8px 40px; }
.btn i{font-size:1.2em; padding: 0 2px 0 0;}
.btn span {position: relative; z-index: 2; color:#333333;}
.btn:hover span{color:#ffffff;}
.btn.bgcenterout span{color:#333333;}
.btn.bgcenterout:hover span{color:#333333;}




/*== 中央から横全体 */
.bgcenterx:before {content: '';
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: #333333;
width: 100%;
height: 100%;
transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(0, 1);
transform-origin: top;
}
.bgcenterx:hover:before{transform:scale(1, 1);}


/*== 中央から外 */
.bgcenterout:before {content: '';
position: absolute;
top: 0; left: 0; z-index: 2;
background: #ebe8df;
width: 100%; height: 100%;
transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(0, 0);
transform-origin:center;
}
.bgcenterout:hover:before{transform:scale(1, 1);}


/*= 7-1-33       ===================================*/
.btnlinestretches{position:relative;
color:#333333;
font-size:1.1rem;
border:1px solid #333333;
padding:10px 0;
display:inline-block;
text-decoration: none;
outline: none;
transition:all 0.3s ease-in-out;
}

.btnlinestretches:hover{
background:#7fc7a8;
color: #ffffff;
border-color:transparent;
}

.btnlinestretches::before,
.btnlinestretches::after {content:'';
position:absolute;
border:solid #333333;
width:10px;
height:10px;
transition:all 0.3s ease-in-out;
}

.btnlinestretches::before{
top:-6px;
left:-6px;
border-width:1px 0 0 1px;
}

.btnlinestretches::after{
bottom:-6px;
right:-6px;
border-width:0 1px 1px 0;
}

.btnlinestretches:hover::before,
.btnlinestretches:hover::after{
width:calc(100% + 11px);
height:calc(100% + 11px);
border-color:#666666;
}


/*= 4 ===================================*/
/* 4-2*/
.flipDown{
animation-name: flipDownAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipDownAnime{
  from {
    transform: perspective(2500px) rotateX(100deg);
 	opacity: 0;
  }

  to {
    transform: perspective(2500px) rotateX(0);
	opacity: 1;
  }
}

/* 4-1 */

.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}


/* 4-1*/
.fadeLeft{
animation-name: fadeLeftAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
	transform: translateX(-100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/* 4-1 */
.fadeRight{
animation-name: fadeRightAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}

.smoothTrigger{
    opacity: 0;
}


/*==================================================
アニメーション設定
===================================*/
/* アニメーションスタートの遅延時間を決めるCSS*/
.delay-time05{  
	animation-delay: 0.5s;
}

.delay-time10{  
	animation-delay: 1s;
}

.delay-time15{  
	animation-delay: 1.5s;
}

.delay-time20{  
	animation-delay: 2s;
}

.delay-time25{  
	animation-delay: 2.5s;
}

/*========= モーダルCSS ===============*/
.hide-area{display: none;}
.modaal-close:after, 
.modaal-close:before{background:#cccccc;}
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{background:#666666;}
#modaal-title{font-size:1.2rem; text-align: center; margin: 0 0 20px 0;}
.modaal-video .modaal-inner-wrapper{padding:0;}
.info-list dl,
.gallery-list{display: flex;}
.info-list dt{margin:0 10px 0 0;}
.gallery-list li{margin:0 10px 0 0;}