@charset "utf-8";
/*= 4-2-6 =========================*/
/*= loading --------===============*/
#splash {position: fixed; width: 100%; height: 100%; background:#317bae; 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: 1.2rem;}
/*= 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:#317bae;/*伸びる背景色の設定*/
}

@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:#317bae;/*伸びる背景色の設定*/
}

@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-21 max-wigth1300px=======================================*/
@media screen and (max-width:1000px) {
    #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: #727171;
    transform: scale(0);/*scale0*/
    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: bolder;
    }
    #g-nav ul li a span{font-size: 0.7em; 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:1000px) {
    .openbtn{
    display: block;
	position:fixed;
	top:0;
	left:0;
	z-index: 9999;/*ボタンを最前面に*/
	cursor: pointer;
    width: 94px;
    height:94px;
    background:#727171;
    }
	
/*×に変化*/	
    .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:#ffffff;
transition: all 0.2s linear;
transition-delay: 0.2s;
}

@media screen and (max-width:1000px) {
.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: #ffffff;
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 {font-size:0.88em; margin:auto; padding:0;}
.timeline i{color:#7a808e; margin:0px 4px; padding:0; font-size: 1.8em;}
.border-line {position: absolute; left:0.5em; top:0;
width:2px;/*線の太さ*/
height:0;/*はじめは高さを0に*/
background: #28a452;
}

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

/*== 7-1-5 ===================================*/
/*== 共通設定 */
.btnauto001{width: auto;
position: relative;
overflow: hidden;
text-decoration: none;
display: inline-block;
font-size: 1.08em;
border: 1px solid #333333;
padding: 8px 38px;
text-align: center;
outline: none;
transition: ease .2s;}
.btnauto001 span {position: relative; z-index: 3; color:#333333; font-size: 0.88em; }
.btnauto001:hover span{color:#ffffff;}
/*
.btnauto001.bgcenterout{border: 1px solid #ffffff; margin:18px auto; padding: 8px 40px; }
.btnauto001.bgcenterout span{color:#333333;}
.btnauto001.bgcenterout:hover span{color:#333333;}
*/
/*== btn bgcenterout7-1-5 ===================================*/
.btn{position: relative;
overflow: hidden;
text-decoration: none;
display: inline-block;
border: 1px solid #333333;
padding: 40px 8px;
text-align: center;
outline: none;
transition: ease .2s;}
.btn.bgcenterout{border: 1px solid #ffffff; margin:18px auto; 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;}

/*== btn-black bgcenterout7-1-5 ===================================*/
.btn-black{position: relative; overflow: hidden; text-decoration: none; display: inline-block;
width: 100%;
border: 1px solid #333333; background:#ffffff;
/*padding: 40px 18px;*/
text-align: center;
outline: none;
transition: ease .2s;}
.btn-black span {position: relative; z-index: 2; color:#333333;}
.btn-black i{font-size:1.3em; padding: 0 4px 0 0; color:#727171;}
.btn-black:hover span{color:#ffffff;}
.btn-black:hover i{color:#ffffff;}
.btn-black.bgcenterx{border: 1px solid #cccccc; margin:18px auto; padding: 8px 40px; }

/*== 中央から横全体 */
.bgcenterx:before {content: '';
position: absolute;
top: 0; left: 0; z-index: 2;
background: #727171;
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: #ffffff;
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; border:1px solid #888888;  background:#ffffff; padding:18px 0 0; display:inline-block; text-decoration: none; outline: none; transition:all 0.3s ease-in-out;}
.btnlinestretches:hover{background:#28a452; color: #ffffff; border-color:transparent;}
.btnlinestretches::before,
.btnlinestretches::after {content:''; position:absolute; border:solid #28a452; 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:#28a452;}

.btnlinestretches-sub{width: 80%; position:relative; color:#ffffff; border:1px solid #13948f; background:#13948f; margin: 20px auto; padding:8px 2px; display:inline-block; text-decoration: none; outline: none; transition:all 0.3s ease-in-out; text-align:center;}
.btnlinestretches-sub:link {text-decoration: none; color:#ffffff;}
.btnlinestretches-sub:visited {text-decoration: none; color:#ffffff;}
.btnlinestretches-sub:hover{background:#13948f; color: #ffffff; border-color:transparent;}
.btnlinestretches-sub::before,
.btnlinestretches-sub::after {content:''; position:absolute; border:solid #13948f; width:10px; height:10px; transition:all 0.3s ease-in-out;}
.btnlinestretches-sub::before{top:-6px; left:-6px; border-width:1px 0 0 1px;}
.btnlinestretches-sub::after{bottom:-6px; right:-6px; border-width:0 1px 1px 0;}
.btnlinestretches-sub:hover::before,
.btnlinestretches-sub:hover::after{width:calc(100% + 11px); height:calc(100% + 11px); border-color:#13948f;}

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

.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

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

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

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

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


/* 4-7 にゅーん（滑らかに変形して出現） */
.smooth{
	animation-name: smoothAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
  　transform-origin: left;
	opacity:0;
}

@keyframes smoothAnime{
  from {
  transform: translate3d(0, 100%, 0) skewY(12deg);
  opacity:0;
  }

  to {
  transform: translate3d(0, 0, 0) skewY(0);
  opacity:1;
  }
}

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


/*= 7-2 ==========================================================*/
.zoomOut img{transform: scale(1.1);
transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.zoomOut:hover img{/*hoverした時の変化*/
transform: scale(1);/*拡大の値を変更したい場合はこの数値を変更*/
}

.zoomOut .mask{display: block; height: 11vw; overflow: hidden;}
/*
@media screen and (max-width:960px) {.zoomOut .mask{height: 25vw;}    }
@media screen and (max-width:500px) {.zoomOut .mask{height: 25vw;}     }
*/

/*=アニメーション設定 ===================================*/
/* アニメーションスタートタイム*/
.delay-time01{animation-delay: 0.1s;}
.delay-time02{animation-delay: 0.2s;}
.delay-time03{animation-delay: 0.3s;}
.delay-time04{animation-delay: 0.4s;}
.delay-time05{animation-delay: 0.5s;}
.delay-time06{animation-delay: 0.6s;}
.delay-time07{animation-delay: 0.7s;}
.delay-time08{animation-delay: 0.8s;}
.delay-time09{animation-delay: 0.9s;}
.delay-time10{animation-delay: 1s;}
.delay-time11{animation-delay: 1.1s;}
.delay-time12{animation-delay: 1.2s;}
.delay-time13{animation-delay: 1.3s;}
.delay-time14{animation-delay: 1.4s;}
.delay-time15{animation-delay: 1.5s;}


/*= 9-6-3モーダル表示のための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{display: flex;}
.info-list dt{margin:0 10px 0 0;}
.gallery-list{columns: 4;/*段組みの数*/ padding:0 15px;}
.gallery-list li {margin-bottom: 20px;}
.gallery-list img{width:100%; height:auto; vertical-align: bottom;/*画像の下にできる余白を削除*/}

/*=6-1-8スライダーのためのcss ==========================*/
.slider img { width:100%; height:auto;}
.slider .slick-slide {margin:0 10px;}