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

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

/*= 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:#00913a;}

@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:#00913a;
}

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

#container{opacity: 0; position: relative; z-index: 1;}
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;
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: #d38d48;
transform: scale(0);
right:-50px;
bottom:-50px;
transition: all .6s;
}

.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;
}
}/* 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:#d38d48;/*3d85b8;*/
}
	
/*×に変化*/	
.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:2px;
background:#cccccc;
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: #cccccc;
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:1.2em; margin:auto; padding:0 18px 0 0;}
.timeline dd {margin:auto; padding:0.2em 0 0 0;}
.border-line {position: absolute;
left:0.2em;
top:0;
width:2px;/*線の太さ*/
height:0;/*はじめは高さを0に*/
background: #999999;
}


.timeline li::after{
content:'';
position: absolute;
top:0;
left:0;
width:10px; height: 10px;
background:#999999;
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; border: 1px solid #333333;/* width:100%; */
/*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:8px auto 0; padding: 8px 0; width:48%;}

/*== 中央から横全体 */
.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 #333333;
    padding:18px 0 0;
	display:inline-block;
    text-decoration: none;
    outline: none;
    /*アニメーションの指定*/
	transition:all 0.3s ease-in-out;
}

.btnlinestretches:hover{
	background:#d38d48;
	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:#777777;
}


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

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


/*==================================================
アニメーション設定
===================================*/
.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;
}