@charset "utf-8";



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

/*トップページの上部の３つのふきだしメニュー
---------------------------------------------------------------------------*/
/*３つのふきだしメニュー（共通設定）*/
#menu1,#menu2,#menu3 {
	position: fixed;	/*画面に対して固定表示*/
	width: 12%;			/*メニュー幅*/
	max-width: 200px;	/*最大のメニュー幅。これ以上大きくならない。*/
	animation-duration: 0.6S;	/*アニメーションの実行時間。0.6秒。*/
	animation-fill-mode: both;	/*アニメーションの待機中は最初のキーフレームを、完了後は最後のキーフレームを維持する*/
	animation-timing-function: ease-out;
}
/*menu1（一番左のふきだし）*/
#menu1 {
	animation-name: menu1;	/*アニメーションのキーフレームの名前（menu1）*/
	animation-delay: 1.5s;	/*アニメーションを1.5秒遅れてスタートさせる*/
}
/*menu2（中央のふきだし）*/
#menu2 {
	animation-name: menu2;	/*アニメーションのキーフレームの名前（menu2）*/
	animation-delay: 1.7s;	/*アニメーションを1.7秒遅れてスタートさせる*/
}
/*menu3（一番右のふきだし）*/
#menu3 {
	animation-name: menu3;	/*アニメーションのキーフレームの名前（menu3）*/
	animation-delay: 1.9s;	/*アニメーションを1.9秒遅れてスタートさせる*/
}
/*３つのふきだしメニューのマウスオン時設定*/
#menu1 a:hover img,#menu2 a:hover img,#menu3 a:hover img {
	animation-name: menuon;		/*アニメーションのキーフレームの名前（menuon）*/
	animation-duration: 0.3S;	/*アニメーションの実行時間*/
	animation-fill-mode: both;	/*アニメーションの待機中は最初のキーフレームを、完了後は最後のキーフレームを維持する*/
}

/*トップページの上部の３つのふきだしメニューのアニメーションのキーフレーム設定。
フレームが100コマ（0%〜100%）あると思って下さい。
---------------------------------------------------------------------------*/
/*一番左のメニュー（menu1）*/
@keyframes menu1 {
/*0コマ目*/
0% {
	opacity: 0;			/*透明度100%（透明の状態）*/
	margin-left: 45%;	/*左に空けるスペース*/
	margin-top: 25%;	/*上に空けるスペース*/
}
/*40コマ目*/
40% {opacity: 0;}
/*80コマ目*/
80% {
	opacity: 1;			/*透明度0%（色が100%出た状態）*/
	margin-left: 21%;	/*左に空けるスペース*/
	margin-top: 15%;	/*上に空けるスペース*/
	transform: rotate(-30deg);	/*左に30度回転*/
}
/*100コマ目*/
100% {
	margin-left: 22%;	/*左に空けるスペース*/
	margin-top: 15%;	/*上に空けるスペース*/
	transform: rotate(-30deg);
}
}

/*中央のメニュー（menu2）*/
@keyframes menu2 {
/*0コマ目*/
0% {
	opacity: 0;			/*透明度100%（透明の状態）*/
	margin-left: 45%;	/*左に空けるスペース*/
	margin-top: 25%;	/*上に空けるスペース*/
}
/*40コマ目*/
40% {opacity: 0;}
/*80コマ目*/
80% {
	opacity: 1;			/*透明度0%（色が100%出た状態）*/
	margin-left: 45%;	/*左に空けるスペース*/
	margin-top: 3%;		/*上に空けるスペース*/
}
/*100コマ目*/
100% {
	margin-left: 45%;	/*左に空けるスペース*/
	margin-top: 4%;		/*上に空けるスペース*/
}
}

/*一番右のメニュー（menu3）*/
@keyframes menu3 {
/*0コマ目*/
0% {
	opacity: 0;			/*透明度100%（透明の状態）*/
	margin-left: 45%;	/*左に空けるスペース*/
	margin-top: 25%;	/*上に空けるスペース*/
}
/*40コマ目*/
40% {opacity: 0;}
/*80コマ目*/
80% {
	opacity: 1;			/*透明度0%（色が100%出た状態）*/
	margin-left: 69%;	/*左に空けるスペース*/
	margin-top: 17%;	/*上に空けるスペース*/
	transform: rotate(35deg);	/*右に35度回転*/
}
/*100コマ目*/
100% {
	margin-left: 68%;	/*左に空けるスペース*/
	margin-top: 17%;	/*上に空けるスペース*/
	transform: rotate(35deg);
}
}

/*３つのふきだしメニューにマウスオンした際*/
@keyframes menuon {
/*0コマ目*/
0% {
	transform: scale(1);	/*原寸大（100%）*/
}
/*50コマ目*/
50% {
	transform: scale(1.07);	/*107%に拡大*/
}
/*100コマ目*/
100% {
	transform: scale(1.05);	/*105%に少し縮小*/
}
}



/*画面を「縦向き」にした場合の「幅」が「1024px以下」の場合の設定。主にタブレット環境。
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation: portrait) and (max-width:1024px){

/*トップページの上部の３つのふきだしメニュー
---------------------------------------------------------------------------*/
/*３つのふきだしメニュー（共通設定）*/
#menu1,#menu2,#menu3 {
	width: 20%;			/*メニュー幅*/
	max-width: none;
}

/*トップページの上部の３つのふきだしメニューのアニメーションのキーフレーム設定。
フレームが100コマ（0%〜100%）あると思って下さい。
---------------------------------------------------------------------------*/
/*一番左のメニュー（menu1）*/
@keyframes menu1 {
/*0コマ目*/
0% {
	opacity: 0;			/*透明度100%（透明の状態）*/
	margin-left: 40%;	/*左に空けるスペース*/
	margin-top: 25%;	/*上に空けるスペース*/
}
/*40コマ目*/
40% {opacity: 0;}
/*80コマ目*/
80% {
	opacity: 1;			/*透明度0%（色が100%出た状態）*/
	margin-left: 5%;	/*左に空けるスペース*/
	margin-top: 30%;	/*上に空けるスペース*/
	transform: rotate(-30deg);	/*左に30度回転*/
}
/*100コマ目*/
100% {
	margin-left: 6%;	/*左に空けるスペース*/
	margin-top: 30%;	/*上に空けるスペース*/
	transform: rotate(-30deg);
}
}

/*中央のメニュー（menu2）*/
@keyframes menu2 {
/*0コマ目*/
0% {
	opacity: 0;			/*透明度100%（透明の状態）*/
	margin-left: 40%;	/*左に空けるスペース*/
	margin-top: 25%;	/*上に空けるスペース*/
}
/*40コマ目*/
40% {opacity: 0;}
/*80コマ目*/
80% {
	opacity: 1;			/*透明度0%（色が100%出た状態）*/
	margin-left: 40%;	/*左に空けるスペース*/
	margin-top: 13%;	/*上に空けるスペース*/
}
/*100コマ目*/
100% {
	margin-left: 40%;	/*左に空けるスペース*/
	margin-top: 14%;	/*上に空けるスペース*/
}
}

/*一番右のメニュー（menu3）*/
@keyframes menu3 {
/*0コマ目*/
0% {
	opacity: 0;			/*透明度100%（透明の状態）*/
	margin-left: 40%;	/*左に空けるスペース*/
	margin-top: 25%;	/*上に空けるスペース*/
}
/*40コマ目*/
40% {opacity: 0;}
/*80コマ目*/
80% {
	opacity: 1;			/*透明度0%（色が100%出た状態）*/
	margin-left: 76%;	/*左に空けるスペース*/
	margin-top: 28%;	/*上に空けるスペース*/
	transform: rotate(35deg);	/*右に35度回転*/
}
/*100コマ目*/
100% {
	margin-left: 75%;	/*左に空けるスペース*/
	margin-top: 28%;	/*上に空けるスペース*/
	transform: rotate(35deg);
}
}

}



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

/*トップページの上部の３つのふきだしメニュー
---------------------------------------------------------------------------*/
/*３つのふきだしメニュー（共通設定）*/
#menu1,#menu2,#menu3 {
	width: 30%;			/*メニュー幅*/
	max-width: none;
}

/*トップページの上部の３つのふきだしメニューのアニメーションのキーフレーム設定。
フレームが100コマ（0%〜100%）あると思って下さい。
---------------------------------------------------------------------------*/
/*一番左のメニュー（menu1）*/
@keyframes menu1 {
/*0コマ目*/
0% {
	opacity: 0;			/*透明度100%（透明の状態）*/
	margin-left: 35%;	/*左に空けるスペース*/
	margin-top: 25%;	/*上に空けるスペース*/
}
/*40コマ目*/
40% {opacity: 0;}
/*80コマ目*/
80% {
	opacity: 1;			/*透明度0%（色が100%出た状態）*/
	margin-left: 0%;	/*左に空けるスペース*/
	margin-top: 30%;	/*上に空けるスペース*/
	transform: rotate(-30deg);	/*左に30度回転*/
}
/*100コマ目*/
100% {
	margin-left: 1%;	/*左に空けるスペース*/
	margin-top: 30%;	/*上に空けるスペース*/
	transform: rotate(-30deg);
}
}

/*中央のメニュー（menu2）*/
@keyframes menu2 {
/*0コマ目*/
0% {
	opacity: 0;			/*透明度100%（透明の状態）*/
	margin-left: 35%;	/*左に空けるスペース*/
	margin-top: 25%;	/*上に空けるスペース*/
}
/*40コマ目*/
40% {opacity: 0;}
/*80コマ目*/
80% {
	opacity: 1;			/*透明度0%（色が100%出た状態）*/
	margin-left: 35%;	/*左に空けるスペース*/
	margin-top: 13%;	/*上に空けるスペース*/
}
/*100コマ目*/
100% {
	margin-left: 35%;	/*左に空けるスペース*/
	margin-top: 14%;	/*上に空けるスペース*/
}
}

/*一番右のメニュー（menu3）*/
@keyframes menu3 {
/*0コマ目*/
0% {
	opacity: 0;			/*透明度100%（透明の状態）*/
	margin-left: 47%;	/*左に空けるスペース*/
	margin-top: 25%;	/*上に空けるスペース*/
}
/*40コマ目*/
40% {opacity: 0;}
/*80コマ目*/
80% {
	opacity: 1;			/*透明度0%（色が100%出た状態）*/
	margin-left: 70%;	/*左に空けるスペース*/
	margin-top: 28%;	/*上に空けるスペース*/
	transform: rotate(35deg);	/*右に35度回転*/
}
/*100コマ目*/
100% {
	margin-left: 69%;	/*左に空けるスペース*/
	margin-top: 28%;	/*上に空けるスペース*/
	transform: rotate(35deg);
}
}