@charset "utf-8";
/*forthのみ透明度設定80を挿入すること*/

:root {
	--firstColor: #fee64a;
	--secondColor: #fff;
	--thirdColor: #383214;
	--forthColor: #714a3380;
	--fifthColor: #383214;
}



/*全端末（PC・タブレット・スマホ）共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*メインメニュー
---------------------------------------------------------------------------*/
/*スマホ用メニューを表示させない*/
#menubar-s {
	display: none;
}

/*３本バーアイコンを表示させない*/
#menubar_hdr {
	display: none;
}

/*各メニューごとの設定（および、#menu1〜#menu5までのアニメーションの共通設定）*/
#menubar li {
	width: 25%;
	/*メニュー幅*/
	max-width: 500px;
	/*最大のメニュー幅。これ以上大きくならない。*/
	animation-duration: 1.5S;
	/*アニメーションの実行時間。秒。*/
	animation-fill-mode: both;
	/*アニメーションの待機中は最初のキーフレームを、完了後は最後のキーフレームを維持する*/
	animation-timing-function: ease-in-out;
	border: 10px solid #fff;
	/*写真の縁取り。縁取りの幅、線種、色*/
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	/*写真の影。0,0,0は黒の事で、0.3は色が30%ついた状態の事。*/
	position: absolute;
	background: rgb(0, 0, 0);
	/*背景色。下の「@keyframes photo」でのopacityの指定で出る背景色です。#000(黒)でなく#fff(白)にしておけば白っぽく薄く出ます。*/
	text-align: center;
	/*文字をセンタリング*/
	transition: 0.2s;
}

/*マウスオン時に写真メニューを少しだけ大きくする*/
#menubar li:hover {
	width: 26%;
	/*メニュー幅*/
}

/*マウスオン時に出てくるメニュー名　。※下のアニメーション設定にも同じ「#menubar a span」があります。*/
#menubar a span {
	position: absolute;
	bottom: 0px;
	/*写真の下部に配置*/
	left: 0px;
	width: 100%;
	/*幅*/
	font-size: 10px;
	/*文字サイズ*/
	color: #fff;
	/*文字色*/
	background: #000;
	/*背景色。（古いブラウザ用）*/
	/* background: rgba(0, 0, 0, 0.6); */
	background:
		/* rgba(247, 168, 203, 0.5) */
		var(--forthColor);
	/*背景色。0,0,0は黒の事で0.6は60%色がついた状態の事。*/
}

/*マウスオン時に出てくるメニュー名（１行目への追加設定）*/
#menubar a span::first-line {
	font-size: 20px;
	/*文字サイズを大きく*/
}

/*「photo」のアニメーション設定。写真が少しくらい状態から始まって、最後に明るくなるアニメーション。
---------------------------------------------------------------------------*/
#menubar li a {
	animation-name: photo;
	/*アニメーションのキーフレームの名前（photo）*/
	animation-delay: 5.5s;
	/*アニメーションを遅れて実行する指定。「s」は秒の事。*/
	animation-duration: 1S;
	/*アニメーションの実行時間。秒。*/
	animation-fill-mode: both;
	/*アニメーションの待機中は最初のキーフレームを、完了後は最後のキーフレームを維持する*/
}

/*アニメーション設定------------------------*/
@keyframes photo {

	/*0コマ目*/
	0% {
		opacity: 0.6;
		/*60%写真に色がついた状態。ここでの背景色は上の「#menubar li」の「background: #000;」の黒となるので暗くなります。*/
	}

	/*100コマ目*/
	100% {
		opacity: 1;
		/*100%色がでた状態*/
	}
}

/*「menu-title」のアニメーション設定。※上の一般のcss設定にも同じ「#menubar a span」があります。
---------------------------------------------------------------------------*/
/*マウスオン時に出てくるメニュー名*/
#menubar a span {
	animation-name: menu-title;
	/*アニメーションのキーフレームの名前（menu-title）*/
	animation-delay: 6.5s;
	/*アニメーションを遅れて実行する指定。「s」は秒の事。*/
	animation-duration: 0.5S;
	/*アニメーションの実行時間。秒。*/
	animation-fill-mode: both;
	/*アニメーションの待機中は最初のキーフレームを、完了後は最後のキーフレームを維持する*/
}

/*アニメーション設定------------------------*/
@keyframes menu-title {

	/*0コマ目*/
	0% {
		opacity: 0;
		/*0%色がついた状態。つまり全く見えない状態の事。*/
	}

	/*100コマ目*/
	100% {
		opacity: 1;
		/*100%色がでた状態*/
	}
}

/*menu1About
---------------------------------------------------------------------------*/
#menu1 {
	animation-name: menu1;
	/*アニメーションのキーフレームの名前（menu1）*/
	animation-delay: 2s;
	/*アニメーションを遅れて実行する指定。「s」は秒の事。*/
	z-index: 5;
	/*重なりの順番。数字が大きい方が上に配置されます。*/
}

/*アニメーション設定------------------------*/
@keyframes menu1 {

	/*0コマ目*/
	0% {
		transform: rotate(130deg);
		/*回転の角度*/
		left: 20%;
		/*ウィンドウの左からの配置指定*/
		top: 23%;
		/*ウィンドウの上からの配置指定*/
	}

	/*70コマ目*/
	70% {
		transform: rotate(-30deg);
		/*回転の角度*/
		left: 10%;
		/*ウィンドウの左からの配置指定*/
		top: 20%;
		/*ウィンドウの上からの配置指定*/
	}

	/*100コマ目*/
	100% {
		transform: rotate(-20deg);
		/*回転の角度*/
		left: 5%;
		/*ウィンドウの左からの配置指定*/
		top: 9%;
		/*ウィンドウの上からの配置指定*/
	}
}

/*menu2Works
---------------------------------------------------------------------------*/
#menu2 {
	animation-name: menu2;
	/*アニメーションのキーフレームの名前（menu2）*/
	animation-delay: 2.4s;
	/*アニメーションを遅れて実行する指定。「s」は秒の事。*/
	z-index: 4;
	/*重なりの順番。数字が大きい方が上に配置されます。*/
}

/*アニメーション設定------------------------*/
@keyframes menu2 {

	/*0コマ目*/
	0% {
		transform: rotate(170deg);
		/*回転の角度*/
		left: 42%;
		/*ウィンドウの左からの配置指定*/
		top: 24%;
		/*ウィンドウの上からの配置指定*/
	}

	/*70コマ目*/
	70% {
		transform: rotate(-20deg);
		/*回転の角度*/
		left: 37%;
		/*ウィンドウの左からの配置指定*/
		top: 12%;
		/*ウィンドウの上からの配置指定*/
	}

	/*100コマ目*/
	100% {
		transform: rotate(-10deg);
		/*回転の角度*/
		left: 37%;
		/*ウィンドウの左からの配置指定*/
		top: 0%;
		/*ウィンドウの上からの配置指定*/
	}
}

/*menu3Member
---------------------------------------------------------------------------*/
#menu3 {
	animation-name: menu3;
	/*アニメーションのキーフレームの名前（menu3）*/
	animation-delay: 2.8s;
	/*アニメーションを遅れて実行する指定。「s」は秒の事。*/
	z-index: 3;
	/*重なりの順番。数字が大きい方が上に配置されます。*/
}

/*アニメーション設定------------------------*/
@keyframes menu3 {

	/*0コマ目*/
	0% {
		transform: rotate(-140deg);
		/*回転の角度*/
		right: 18%;
		/*ウィンドウの右からの配置指定*/
		top: 28%;
		/*ウィンドウの上からの配置指定*/
	}

	/*70コマ目*/
	70% {
		transform: rotate(30deg);
		/*回転の角度*/
		right: 10%;
		/*ウィンドウの右からの配置指定*/
		top: 22%;
		/*ウィンドウの上からの配置指定*/
	}

	/*100コマ目*/
	100% {
		transform: rotate(20deg);
		/*回転の角度*/
		right: 5%;
		/*ウィンドウの右からの配置指定*/
		top: 17%;
		/*ウィンドウの上からの配置指定*/
	}
}

/*menu4
---------------------------------------------------------------------------*/
#menu4 {
	animation-name: menu4;
	/*アニメーションのキーフレームの名前（menu4）*/
	animation-delay: 3.2s;
	/*アニメーションを遅れて実行する指定。「s」は秒の事。*/
	z-index: 2;
	/*重なりの順番。数字が大きい方が上に配置されます。*/
}

/*アニメーション設定------------------------*/
@keyframes menu4 {

	/*0コマ目*/
	0% {
		transform: rotate(160deg);
		/*回転の角度*/
		left: 25%;
		/*ウィンドウの左からの配置指定*/
		bottom: 30%;
		/*ウィンドウの下からの配置指定*/
	}

	/*70コマ目*/
	70% {
		transform: rotate(10deg);
		/*回転の角度*/
		left: 11%;
		/*ウィンドウの左からの配置指定*/
		bottom: 11%;
		/*ウィンドウの下からの配置指定*/
	}

	/*100コマ目*/
	100% {
		transform: rotate(20deg);
		/*回転の角度*/
		left: 9%;
		/*ウィンドウの左からの配置指定*/
		bottom: 8%;
		/*ウィンドウの下からの配置指定*/
	}
}

/*menu5
---------------------------------------------------------------------------*/
#menu5 {
	animation-name: menu5;
	/*アニメーションのキーフレームの名前（menu5）*/
	animation-delay: 3.6s;
	/*アニメーションを遅れて実行する指定。「s」は秒の事。*/
	z-index: 1;
	/*重なりの順番。数字が大きい方が上に配置されます。*/
}

/*アニメーション設定------------------------*/
@keyframes menu5 {

	/*0コマ目*/
	0% {
		transform: rotate(-150deg);
		/*回転の角度*/
		right: 27%;
		/*ウィンドウの右からの配置指定*/
		bottom: 22%;
		/*ウィンドウの下からの配置指定*/
	}

	/*70コマ目*/
	70% {
		transform: rotate(-10deg);
		/*回転の角度*/
		right: 9%;
		/*ウィンドウの右からの配置指定*/
		bottom: 14%;
		/*ウィンドウの下からの配置指定*/
	}

	/*100コマ目*/
	100% {
		transform: rotate(-20deg);
		/*回転の角度*/
		right: 10%;
		/*ウィンドウの右からの配置指定*/
		bottom: 13%;
		/*ウィンドウの下からの配置指定*/
	}
}



/*画面を「縦向き」にした場合
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	.image-text-container {
		display: block;
		/* 写真と文字を縦並びにする */
		text-align: center;
		/* テキストを中央揃え */
	}

	.section-image {
		width: 100%;
		/* 写真を画面幅いっぱいに広げる */
		height: auto;
		/* 比率を保つ */
		margin-bottom: 10px;
		/* 写真の下に少しスペースを作る */
	}

	.text-container {
		padding: 10px;
		/* 文字部分に余白を追加して見やすくする */
	}
}

/*menu1
---------------------------------------------------------------------------*/
@keyframes menu1 {

	/*0コマ目*/
	0% {
		transform: rotate(160deg);
		left: 6%;
		top: 38%;
	}

	/*70コマ目*/
	70% {
		transform: rotate(-30deg);
		left: 0%;
		top: 3%;
	}

	/*100コマ目*/
	100% {
		transform: rotate(-20deg);
		left: 1%;
		top: 4%;
	}
}

/*menu2
---------------------------------------------------------------------------*/
@keyframes menu2 {

	/*0コマ目*/
	0% {
		transform: rotate(100deg);
		left: 35%;
		top: 36%;
	}

	/*70コマ目*/
	70% {
		transform: rotate(-20deg);
		left: 37%;
		top: -3%;
	}

	/*100コマ目*/
	100% {
		transform: rotate(-10deg);
		left: 37%;
		top: -2%;
	}
}

/*menu3
---------------------------------------------------------------------------*/
@keyframes menu3 {

	/*0コマ目*/
	0% {
		transform: rotate(-160deg);
		right: 10%;
		top: 40%;
	}

	/*70コマ目*/
	70% {
		transform: rotate(30deg);
		right: 0%;
		top: 6%;
	}

	/*100コマ目*/
	100% {
		transform: rotate(20deg);
		right: 1%;
		top: 7%;
	}
}

/*menu4
---------------------------------------------------------------------------*/
@keyframes menu4 {

	/*0コマ目*/
	0% {
		transform: rotate(160deg);
		left: 25%;
		bottom: 38%;
	}

	/*70コマ目*/
	70% {
		transform: rotate(10deg);
		left: 11%;
		bottom: 11%;
	}

	/*100コマ目*/
	100% {
		transform: rotate(20deg);
		left: 10%;
		bottom: 12%;
	}
}

/*menu5
---------------------------------------------------------------------------*/
@keyframes menu5 {

	/*0コマ目*/
	0% {
		transform: rotate(-120deg);
		right: 27%;
		bottom: 38%;
	}

	/*70コマ目*/
	70% {
		transform: rotate(-10deg);
		right: 9%;
		bottom: 7%;
	}

	/*100コマ目*/
	100% {
		transform: rotate(-20deg);
		right: 10%;
		bottom: 8%;
	}
}




/*フルウインドウより小さくしたときの設定*/
@media screen and (max-width:1200px) {
	#menu1 {
		animation-name: menu1;
		/*アニメーションのキーフレームの名前（menu1）*/
		animation-delay: 2s;
		/*アニメーションを遅れて実行する指定。「s」は秒の事。*/
		z-index: 5;
		/*重なりの順番。数字が大きい方が上に配置されます。*/
	}

	/*アニメーション設定------------------------*/
	@keyframes menu1 {

		/*0コマ目*/
		0% {
			transform: rotate(130deg);
			/*回転の角度*/
			left: 20%;
			/*ウィンドウの左からの配置指定*/
			top: 23%;
			/*ウィンドウの上からの配置指定*/
		}

		/*70コマ目*/
		70% {
			transform: rotate(-30deg);
			/*回転の角度*/
			left: 10%;
			/*ウィンドウの左からの配置指定*/
			top: 15%;
			/*ウィンドウの上からの配置指定*/
		}

		/*100コマ目*/
		100% {
			transform: rotate(-20deg);
			/*回転の角度*/
			left: 5%;
			/*ウィンドウの左からの配置指定*/
			top: 10%;
			/*ウィンドウの上からの配置指定*/
		}
	}

	/*menu2Works
	---------------------------------------------------------------------------*/
	#menu2 {
		animation-name: menu2;
		/*アニメーションのキーフレームの名前（menu2）*/
		animation-delay: 2.4s;
		/*アニメーションを遅れて実行する指定。「s」は秒の事。*/
		z-index: 4;
		/*重なりの順番。数字が大きい方が上に配置されます。*/
	}

	/*アニメーション設定------------------------*/
	@keyframes menu2 {

		/*0コマ目*/
		0% {
			transform: rotate(170deg);
			/*回転の角度*/
			left: 42%;
			/*ウィンドウの左からの配置指定*/
			top: 24%;
			/*ウィンドウの上からの配置指定*/
		}

		/*70コマ目*/
		70% {
			transform: rotate(-20deg);
			/*回転の角度*/
			left: 37%;
			/*ウィンドウの左からの配置指定*/
			top: 15%;
			/*ウィンドウの上からの配置指定*/
		}

		/*100コマ目*/
		100% {
			transform: rotate(-10deg);
			/*回転の角度*/
			left: 37%;
			/*ウィンドウの左からの配置指定*/
			top: 5%;
			/*ウィンドウの上からの配置指定*/
		}
	}

	/*menu3Member
	---------------------------------------------------------------------------*/
	#menu3 {
		animation-name: menu3;
		/*アニメーションのキーフレームの名前（menu3）*/
		animation-delay: 2.8s;
		/*アニメーションを遅れて実行する指定。「s」は秒の事。*/
		z-index: 3;
		/*重なりの順番。数字が大きい方が上に配置されます。*/
	}

	/*アニメーション設定------------------------*/
	@keyframes menu3 {

		/*0コマ目*/
		0% {
			transform: rotate(-140deg);
			/*回転の角度*/
			right: 18%;
			/*ウィンドウの右からの配置指定*/
			top: 28%;
			/*ウィンドウの上からの配置指定*/
		}

		/*70コマ目*/
		70% {
			transform: rotate(30deg);
			/*回転の角度*/
			right: 0%;
			/*ウィンドウの右からの配置指定*/
			top: 20%;
			/*ウィンドウの上からの配置指定*/
		}

		/*100コマ目*/
		100% {
			transform: rotate(20deg);
			/*回転の角度*/
			right: 1%;
			/*ウィンドウの右からの配置指定*/
			top: 17%;
			/*ウィンドウの上からの配置指定*/
		}
	}

	/*menu4
	---------------------------------------------------------------------------*/
	#menu4 {
		animation-name: menu4;
		/*アニメーションのキーフレームの名前（menu4）*/
		animation-delay: 3.2s;
		/*アニメーションを遅れて実行する指定。「s」は秒の事。*/
		z-index: 2;
		/*重なりの順番。数字が大きい方が上に配置されます。*/
	}

	/*アニメーション設定------------------------*/
	@keyframes menu4 {

		/*0コマ目*/
		0% {
			transform: rotate(160deg);
			/*回転の角度*/
			left: 25%;
			/*ウィンドウの左からの配置指定*/
			bottom: 30%;
			/*ウィンドウの下からの配置指定*/
		}

		/*70コマ目*/
		70% {
			transform: rotate(10deg);
			/*回転の角度*/
			left: 11%;
			/*ウィンドウの左からの配置指定*/
			bottom: 11%;
			/*ウィンドウの下からの配置指定*/
		}

		/*100コマ目*/
		100% {
			transform: rotate(20deg);
			/*回転の角度*/
			left: 9%;
			/*ウィンドウの左からの配置指定*/
			bottom: 8%;
			/*ウィンドウの下からの配置指定*/
		}
	}

	/*menu5
	---------------------------------------------------------------------------*/
	#menu5 {
		animation-name: menu5;
		/*アニメーションのキーフレームの名前（menu5）*/
		animation-delay: 3.6s;
		/*アニメーションを遅れて実行する指定。「s」は秒の事。*/
		z-index: 1;
		/*重なりの順番。数字が大きい方が上に配置されます。*/
	}

	/*アニメーション設定------------------------*/
	@keyframes menu5 {

		/*0コマ目*/
		0% {
			transform: rotate(-150deg);
			/*回転の角度*/
			right: 27%;
			/*ウィンドウの右からの配置指定*/
			bottom: 22%;
			/*ウィンドウの下からの配置指定*/
		}

		/*70コマ目*/
		70% {
			transform: rotate(-10deg);
			/*回転の角度*/
			right: 9%;
			/*ウィンドウの右からの配置指定*/
			bottom: 14%;
			/*ウィンドウの下からの配置指定*/
		}

		/*100コマ目*/
		100% {
			transform: rotate(-20deg);
			/*回転の角度*/
			right: 10%;
			/*ウィンドウの右からの配置指定*/
			bottom: 13%;
			/*ウィンドウの下からの配置指定*/
		}
	}


}



/*画面を「縦向き」にした場合の「幅」が「420px以下」の場合の設定。主にスマホを縦向きで見た場合の設定。
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation: portrait) and (max-width:420px) {

	/*メインメニュー
---------------------------------------------------------------------------*/
	/*各メニューごとの設定*/
	#menubar li {
		width: 35%;
		/*メニュー幅*/
		border: 5px solid #fff;
		/*写真の縁取り。縁取りの幅、線種、色*/
	}

	/*マウスオン時に出てくるメニュー名（１行目への追加設定）*/
	#menubar a span::first-line {
		font-size: 14px;
	}

	/*menu2
---------------------------------------------------------------------------*/
	@keyframes menu2 {

		/*0コマ目*/
		0% {
			transform: rotate(100deg);
			left: 35%;
			top: 36%;
		}

		/*70コマ目*/
		70% {
			transform: rotate(-20deg);
			left: 30%;
			top: 33%;
		}

		/*100コマ目*/
		100% {
			transform: rotate(-10deg);
			left: 30%;
			top: 25%;
		}
	}

	/*menu3
---------------------------------------------------------------------------*/
	@keyframes menu3 {

		/*0コマ目*/
		0% {
			transform: rotate(-160deg);
			right: 10%;
			top: 40%;
		}

		/*70コマ目*/
		70% {
			transform: rotate(30deg);
			right: 4%;
			top: 15%;
		}

		/*100コマ目*/
		100% {
			transform: rotate(20deg);
			right: 1%;
			top: 10%;
		}
	}

	/*menu4
---------------------------------------------------------------------------*/
	@keyframes menu4 {

		/*0コマ目*/
		0% {
			transform: rotate(160deg);
			left: 25%;
			bottom: 38%;
		}

		/*70コマ目*/
		70% {
			transform: rotate(10deg);
			left: 11%;
			bottom: 16%;
		}

		/*100コマ目*/
		100% {
			transform: rotate(20deg);
			left: 10%;
			bottom: 20%;
		}
	}

	/*menu5
---------------------------------------------------------------------------*/
	@keyframes menu5 {

		/*0コマ目*/
		0% {
			transform: rotate(-120deg);
			right: 27%;
			bottom: 38%;
		}

		/*70コマ目*/
		70% {
			transform: rotate(-10deg);
			right: 10%;
			bottom: 10%;
		}

		/*100コマ目*/
		100% {
			transform: rotate(-20deg);
			right: 9%;
			bottom: 11%;
		}
	}

}



/*画面を「横向き」にした場合の「高さ」が「420px以下」の場合の設定。主にスマホを横向きで見た場合の設定。
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation: landscape) and (max-height:420px) {

	/*メインメニュー
---------------------------------------------------------------------------*/
	/*各メニューごとの設定*/
	#menubar li {
		width: 20%;
		/*メニュー幅*/
		border: 5px solid #fff;
		/*写真の縁取り。縁取りの幅、線種、色*/
	}

}