@charset "utf-8";

/*===========================================================*/
/*プログレスバー＋数字カウントアップ＋画面が開く*/
/*===========================================================*/

/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 99999;
	text-align:center;
	color:#fff;
}

/* Loading画像中央配置　*/
#splash_text {
	position: absolute;
	top: 50%;
	left: 50%;
    z-index: 999;
	transform: translate(-50%, -50%);
	color: #fff;
	width: 100%;
}

/*IE11対策用バーの線の高さ※対応しなければ削除してください*/
#splash_text svg{
    height: 2px;
}

/*割れる画面のアニメーション*/
.loader_cover {
    width: 100%;
    height: 50%;
	background-color: #F4D03F;
background-image: linear-gradient(132deg, #F4D03F 0%, #94bcb4 59%);

    /*background:#017490;*/
    transition: all .2s cubic-bezier(.04, .435, .315, .9);
    transform: scaleY(1);
}
/*上の画面*/
.loader_cover-up {
    transform-origin: center top;
}

/*下の画面*/
.loader_cover-down {
    position: absolute;
    bottom: 0;
    transform-origin: center bottom;
}
/*クラス名がついたらY軸方向に0*/
.coveranime {
    transform: scaleY(0);
}

/*===========================================================*/
/*グラデーション線から塗に変化する*/
/*===========================================================*/

.gradient4{
    /*ボタンの形状*/
    display: inline-block;
    padding: 10px 60px;
    margin: 20px 0 0 0;
    border-radius:30px;
    text-decoration: none;
    border:1px solid #fff;
    color: #fff;
    /*アニメーションの指定*/ 
    transition: all 0.4s ease-out;
}

#box3 .gradient4{
    color: #925410;
    border-color: #925410;
}

/*hoverした際、グラデーションと影を付ける*/
.gradient4:hover,
#box3 .gradient4:hover{
    /*ボタンの形状*/
    border-color:transparent;
    color: #fff;
    /*背景の色と形状*/
    /*background: linear-gradient(270deg,#3bade3 0%, #9844b7 50%, #44ea76 100%);*/
	background-color: #e5f43f;
background-image: linear-gradient(132deg, #e5f43f 0%, #94bcb4 59%);
    background-size: 200% auto;
    background-position: right center;
    /*ボックスの影*/   
    box-shadow: 0 5px 10px rgb(250,108,159,0.4);
}


/*.gradient5 {
    font-size: 0.8em;
    display: inline-block;
    padding: 5px 30px;
    margin-bottom: 20px;
    border-radius: 30px;
    text-decoration: none;
    border: 1px solid #585d41;
    color: #585e41;
    transition: all 0.4s ease-out;
}

.gradient5{
	color: #333333;
	border-color: #333333;
}

.gradient5:hover {
    border-color:transparent;
    color: #fff;
	background-color: #e5f43f;
background-image: linear-gradient(132deg, #e5f43f 0%, #94bcb4 59%);
    background-size: 200% auto;
    background-position: right center;
    box-shadow: 0 5px 10px rgb(250,108,159,0.4);
}*/


/*===========================================================*/
/*ゆっくりズームアウトさせながら全画面で見せる*/
/*===========================================================*/
#slider {
    width: 100%;
    height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}

/*===========================================================*/
/*リンクをクリックすると、背景が暗くなり動画や画像やテキストを表示*/
/*===========================================================*/

.modaal-overlay{
     background: linear-gradient(45deg,rgba(88,182,211,.9),rgba(229,93,135,.9))!important;
}


/*===========================================================*/
/*サムネイルをクリックするとグループ化された画像一覧を表示する*/
/*===========================================================*/

/*===モーダル表示のためのcss　*/

.hide-area{/*モーダル表示をする場所をあらかじめ隠す*/
	display: none;
}

.modaal-fullscreen .modaal-content-container{/*full画面の色設定*/
     /*background: linear-gradient(45deg,rgba(88,182,211,.9),rgba(229,93,135,.9));*/
    background-color: #e5f43f;
background-image: linear-gradient(132deg, #e5f43f 0%, #94bcb4 59%);
	/*color: #fff;*/
	color: #004b2d;
	text-align: center;
}

.modaal-fullscreen .modaal-close{/*ボタンの色、位置*/
	background:none;
	right:20px;
}

/*クローズボタンの×の色変更*/
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}

/*キャプション*/
.caption{
    display: block;
    padding: 10px 0;
}

/*画像の横幅を100%にしてレスポンシブ化*/
.modaal-content-container img{
    border: 5px solid #fff;
    width:100%;
	max-width:700px;
	height:auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/
}


/*== じわっ（ぼかしから出現） ==*/

.blur{
	animation-name: blurAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.02);
	opacity: 0;
  }

  to {
	filter: blur(0);
	transform: scale(1);
	opacity: 1;
  }
}

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



/*===========================================================*/
/* テキストが1文字づつ出現*/
/*===========================================================*/

.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
	0% {opacity:0;}
	100% {opacity:1;}
}

/*===========================================================*/
/* スクロールすると1画面移動*/
/*===========================================================*/
.box{
    padding: 40px;
	display:flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

#box1{
    background:url("../img/bg_02.jpg") no-repeat center;
    background-size: cover;
}

#box1.box{
 justify-content: flex-start;
}

@media screen and (max-width:768px) { 
    #box1.box{
     justify-content: center;
    } 
}

#box2{
    background:url("../img/bg_03.jpg") no-repeat center;
    background-size: cover;
}

#box3{
    background:url("../img/bg_04.jpg") no-repeat center;
    background-size: cover;
}

#box4{
    background:url("../img/bg_05.jpg") no-repeat center;
    background-size: cover;
}

#box5{
    background:url("../img/bg_06.jpg") no-repeat center;
    background-size: cover;
}

#box7{
    background:url("../img/bg_07.jpg") no-repeat center;
    background-size: cover;
}

/*========= ページネーションCSS ===============*/

.pagination {
	position:fixed;
	right:20px;
	top: 50%;
  	transform: translateY(-50%);
	font-size:1em;
	z-index: 10;
	list-style: none;
}

.pagination a {
	display:block;
	height:20px;
	margin-bottom:5px;
	color:#fff;
	position:relative;
	padding:4px;
}

.pagination a.active:after {
	box-shadow:inset 0 0 0 5px;
}

.pagination a .hover-text {
	position:absolute;
	right:15px;
	top:0;
	opacity:0;
	-webkit-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
	padding-right: 15px;
}

.pagination a:hover .hover-text {
	opacity: 1;
}

.pagination a:after {
	-webkit-transition:box-shadow 0.5s ease;
	transition:box-shadow 0.5s ease;
	width:10px;
	height:10px;
	display: block;
	border:1px solid;
	border-radius:50%;
	content:'';
	position: absolute;
	margin:auto;
	top:0;
	right:3px;
	bottom:0;
}

@media screen and (max-width:768px) { 
	.pagination a .hover-text{
		display: none;
	}	
}


.size120 {font-size: 120%;}
.size130 {font-size: 130%;}
.size140 {font-size: 140%;}
.size150 {font-size: 150%;}
.size160 {font-size: 160%;}
.size170 {font-size: 170%;}
.size180 {font-size: 180%;}
.size190 {font-size: 190%;}
.size200 {font-size: 200%;}

.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 30px;}
.mt40 {margin-top: 40px;}
.mt50 {margin-top: 50px;}
.mt60 {margin-top: 60px;}
.mt70 {margin-top: 70px;}
.mt80 {margin-top: 80px;}
.mt90 {margin-top: 90px;}
.mt100 {margin-top: 100px;}

.mb10 {margin-bottom: 10px;}
.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom: 30px;}
.mb40 {margin-bottom: 40px;}
.mb50 {margin-bottom: 50px;}
.mb60 {margin-bottom: 60px;}
.mb70 {margin-bottom: 70px;}
.mb80 {margin-bottom: 80px;}
.mb90 {margin-bottom: 90px;}
.mb100 {margin-bottom: 100px;}

.white {color: #fff;}
.brown {color: #723f08;}

.left {text-align: left;}
.right {text-align: right;}

.outline {
  /*display        : inline-block;*/
  color          : #ffffff;            /* 文字の色 */
  font-size      : 26pt;                /*文字のサイズ*/ 
  letter-spacing : 4px;                /* 文字間 */
 text-shadow    : 
       1px  1px 1px rgba(0, 51, 0, 0.71),
      -1px  1px 1px rgba(0, 51, 0, 0.71),
       1px -1px 1px rgba(0, 51, 0, 0.71),
      -1px -1px 1px rgba(0, 51, 0, 0.71),
       1px  0px 1px rgba(0, 51, 0, 0.71),
       0px  1px 1px rgba(0, 51, 0, 0.71),
      -1px  0px 1px rgba(0, 51, 0, 0.71),
       0px -1px 1px rgba(0, 51, 0, 0.71);        /* 文字の影 */
}


*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

/*html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
}*/

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 30px;
}

@media screen and (max-width:768px) { 
	.btn,
a.btn,
button.btn {

  font-size: 1rem;
}
}

a.btn-gradient {
	display: inline-block;
    padding: 10px 60px;
    margin: 20px 0 0 0;
    border-radius: 30px;
    text-decoration: none;
    border: 1px solid #fff;
    color: #fff;
    transition: all 0.4s ease-out;
}

a.btn-gradient:after {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  content: "";
  -webkit-transition: all 0.5s;
  transition: all 0.5s;	
}

a.btn-gradient span {
  position: relative;
  z-index: 1;
}

a.btn-gradient:hover {
  color: #fff;
	 /*ボタンの形状*/
    border-color:transparent;
    color: #fff;
    /*背景の色と形状*/
    /*background: linear-gradient(270deg,#3bade3 0%, #9844b7 50%, #44ea76 100%);*/
	background-color: #e5f43f;
background-image: linear-gradient(132deg, #e5f43f 0%, #94bcb4 59%);
    background-size: 200% auto;
    background-position: right center;
    /*ボックスの影*/   
    box-shadow: 0 5px 10px rgb(250,108,159,0.4);
}

a.btn-gradient:hover:after {
  opacity: 0;
}


a.btn-gradient01 {
    font-size: 0.9em;
    display: inline-block;
    padding: 8px 30px;
    /* margin: 20px 0 0 0; */
    margin-bottom: 20px;
    border-radius: 30px;
    text-decoration: none;
    border: 1px solid #585d41;
    color: #585e41;
    transition: all 0.4s ease-out;
}

@media screen and (max-width:768px) { 
	a.btn-gradient01 {
		font-size: 1.4em;
		display: inline-block;
		padding: 10px 17px;
		/* margin: 20px 0 0 0; */
		margin-bottom: 20px;
		border-radius: 30px;
		text-decoration: none;
		border: 1px solid #585d41;
		color: #585e41;
		transition: all 0.4s ease-out;
	}
}


a.btn-gradient01:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  -webkit-transition: all 0.5s;
  transition: all 0.5s;	
}

a.btn-gradient01 span {
  position: relative;
  z-index: 1;
}

a.btn-gradient01:hover {
  color: #fff;
	 /*ボタンの形状*/
    border-color:transparent;
    color: #fff;
    /*背景の色と形状*/
    /*background: linear-gradient(270deg,#3bade3 0%, #9844b7 50%, #44ea76 100%);*/
	background-color: #e5f43f;
background-image: linear-gradient(132deg, #e5f43f 0%, #94bcb4 59%);
    background-size: 200% auto;
    background-position: right center;
    /*ボックスの影*/   
    box-shadow: 0 5px 10px rgb(250,108,159,0.4);
}

a.btn-gradient01:hover:after {
  opacity: 0;
}