@charset "utf-8";
/*=============== SVGアニメーション内の指定 =================*/

/*アニメ前にちょい出しないようロゴを最初消しておく*/
#splash_logo svg {
	opacity: 0;
	visibility: hidden;
}

/*アニメーション前の指定*/
#mask path {
	fill-opacity: 0;
	/*最初は透過0で見えない状態*/
	transition: fill-opacity .5s;
	/*カラーがつく際のアニメーション0.5秒で変化*/
	fill: none;
	/*塗りがない状態*/
	stroke: #000;
	/*線の色*/
}

/*アニメーション後に.doneというクラス名がで付与された時の指定*/
#mask.done path {
	fill: #925410;
	/*塗りの色*/
	fill-opacity: 1;
	/*透過1で見える状態*/
	stroke: none;
	/*線の色なし*/
}

/*========= ローディング画面のためのCSS ===============*/
#splash {
	position: fixed;
	width: 100%;
	height: 100%;
	background: #ffff00;
	z-index: 9999999;
	text-align: center;
	color: #fff;
}

#splash-logo,
#mask {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#mask {
	width: 200px;
}

@media (max-width: 575.98px) {

	/* モバイル */
	#mask {
		width: 150px;
	}
}

/*========= 画面遷移のためのCSS ===============*/

body {
	background: #ffff00!important;
	/*遷移アニメーションと同じ色を指定*/
}

body.appear {
	background: #ffff00!important;
	/*画面を開いた後の背景色を指定*/
}

/*画面遷移アニメーション*/
.splashbg1,
.splashbg2 {
	display: none;
}

/*bodyにappearクラスがついたら出現*/
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: #ffff00;
	/*伸びる背景色の設定*/
}

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

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

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

/*画面遷移の後現れるコンテンツ設定*/
#container {
	opacity: 0;
	/*はじめは透過0に*/
}

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

/*===========================================================*/
/*機能編  7-1-32　グラデーション線から塗に変化する*/
/*===========================================================*/

.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;
}

#box1 .gradient4,
#box4 .gradient4 {
	color: #925410;
	border-color: #925410;
}

/*hoverした際、グラデーションと影を付ける*/
.gradient4:hover,
#box1 .gradient4:hover,
#box4 .gradient4:hover {
	/*ボタンの形状*/
	border-color: transparent;
	color: #fff;
	/*背景の色と形状*/
	background: linear-gradient(270deg, #06c755 0%, #ffff00 50%, #06c755 100%);
	background-size: 200% auto;
	background-position: right center;
	/*ボックスの影*/
	box-shadow: 0 5px 10px rgb(34, 139, 34, 0.4);
}

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

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

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


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

/*===モーダル表示のための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));
	color: #fff;
	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;
	/*画像の下にできる余白を削除*/
}

/*===========================================================*/
/* 印象編 4 最低限おぼえておきたい動き*/
/*===========================================================*/

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

.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;
}



/*===========================================================*/
/* 印象編　8-11　テキストが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;
	}
}

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

#box1 {
	background: #ffff00;
	background-size: cover;
}

#box2 {
	background: #06c755;
	background-size: cover;
}

#box3 {
	background: #ffa500;
	background-size: cover;
}

#box4 {
	background: #ffff00;
	background-size: cover;
}

#box5 {
	background: #06c755;
	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;
	}
}

/* トップ斜め装飾 */
@media (max-width: 991.98px) {

	/* タブレット以下 */
	#slider::after {
		display: block;
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 0 30vw 60vw;
		border-color: transparent transparent transparent #ffff00;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 3;
	}

	#slider::before {
		display: block;
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 50vw 100vw 0 0;
		border-color: transparent #06c755 transparent transparent;
		position: absolute;
		bottom: 1px;
		right: 0;
		z-index: 3;
	}
}

@media (min-width: 992px) {

	/* PC */
	#slider::after {
		display: block;
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 0 15vw 40vw;
		border-color: transparent transparent transparent #ffff00;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 3;
	}

	#slider::before {
		display: block;
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 15vw 40vw 0 0;
		border-color: transparent #06c755 transparent transparent;
		position: absolute;
		bottom: 1px;
		right: 0;
		z-index: 3;
	}
}

/*トップ文字エリアの幅*/
.heading-block {
	width: 70%;
}