/*@charset "UTF-8"*/
/*@charset "UTF-8" これ外すと、かわいいフォント『'Montserrat', sans-serif;』効く 　『』とりあえず、お守り*/
/*ロング用'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Helvetica, Arial, 'ＭＳ Ｐゴシック',"Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ"*/
/*『#』をid、『.』をclass*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

/*ページ全体の構成*/

*{box-sizing:border-box;}
/*画面のフレキシブル効果*/

*{padding: 0;
	margin: 0;
	box-sizing: border-box;
	list-style: none;/*追加　text-decoration: none;*/
	text-decoration: none;/* 文字周りの、アンダー線とか、無しに　*/
	font-family: 'Montserrat', sans-serif;}
/*cursor: pointer;　マウスカーソル　指にする*/
/*cursor:default;/*マウスカーソルを矢印のまま変えない　必要に応じて*/

*,
*::before
*::after{box-sizing:border-box;}

/*CSS本編*/
body{background-color: #F5F5F5;}

.menu/* 1 */
{max-width: 100%;
 width: 100%;
 height: 100%}

.tool/* 2 */
{max-width: 100vw;
 width: 100%;
 height: 66px;/*最上バーの太さ（青色、高さ）*/
 margin: 0 auto;/*中心寄りの、要素*/
 background-color: #9DD29C;}/*ホバーメニューと同じ色　わかみどり*/

.tool .Apex/* 3 */
{width: 100%;
 padding: 0;/*全部くくりの、サイズ感*/
 margin: 0;}/*全部くくりの、外側スペース*/

.tool .Apex .Ceu/* 4 */
{position: relative;
 width: 100%;
 padding: 0;/*各ブロックの、サイズ感*/
 margin: 0;/*各ブロックの、外側スペース*/
 z-index: 8000;}

.tool .Apex.parent > .Ceu/* 7 */
{max-width: 18%;/*上段バーーーに関係、個別の幅*/
 width: 100vw;}/* 〃 max-width:の補助的いる*/

.tool ul li a/* 5 */
{display: inline-block;
 width: 100%;
 color: #004F2E;/*文字の黒っぽい緑*/
 font-size: 1.5rem;/*1.3rem 上段メニューの、文字サイズ*/
 text-overflow: ellipsis;/*文字途切れたら、...の表示*/
 height: 66px;/*文字の下の、幅*/
 text-align: center;/*center;中心確定 （start;左）*/
 padding: 20px 18px 20px 18px;/*上、右、下、左*//*margin: 0 10px;入れると少し離れる*/
 background-color: #9DD29C;/*わかみどり*/
 letter-spacing: 0.2rem;/*letter-spacing: 2px;も可*//*0.23以上で段落。文字個々の間隔　*/
 text-transform: uppercase;}/*アルファベット大文字にする*/
			/*ここまで、全部の、横並び*/

.tool .Status ul li a/* 6 */
{width: 100%;/*文字箱の、幅*//*✅単純な個の幅*//*180px 13vw*/
 background-color: #9DD29C;/*わかみどり*/
 color: #004F2E;/*文字の黒っぽい緑*/
 font-size: 1.35rem;/*1.2rem 下段メニューの、文字サイズ*/
 text-transform: capitalize;}/*頭文字だけ、アルファベット大文字　uppercase;全部大文字*/
				/*センターリングしながら、横と縦に並んだ*/

.tool .Status/* 8 */
{position: absolute;
 max-width: 100%;/*下段バーに関係、個別の幅*/
 width: 100vw;/* 〃 max-width:の補助的いる*/
 top: 66px;}/*（青色、高さ）と同じ高さに調整*/

.tool .Apex.parent/* 9 */
{display: flex;/*元は、display: flex;*/
 justify-content: start;/*左 start;　中心 center;　離す space-between;*/
 flex-wrap: wrap;}/*flex-wrap: wrap; 場合によりwrap-reverse;もあり*/


 /*⤴️マウスホバーの色変化　2パターン⤴️*//* 10 */
.tool .big
{transition: all 3s ease;}/*外したとき、色変化具合*/

.tool .big:hover
{background-color: #BEEDBE;/*変える色*/
 transition: all 1.5s ease;
 opacity: 1;}/*乗ったとき、色変化具合*/

.tool .Ceu.Mode .Apex.child .Ceu .small:hover,/*下段バー、色変化*/
.tool .Ceu.Mode .Apex.child .Ceu .small:active
{background-color: #BEEDBE;/*ホバーで変える色*/
 transition: all 0.8s ease;
 opacity: 1;}/*マウス乗った、色変化具合*/
/*横に広く、並んでいる状態*/

/*✅メインパフォーマンス✅縦からも横からも、メニュー見える、ようになる*/
.Becom/* 11 */
{visibility: visible;
 opacity: 0;/*あとで、0 ゼロにする*/
 transition: all 3s ease-out;}

.Becom a/* 12 */
{visibility: visible;
 opacity: 0.7;
 transition: all 3s ease-out;}

.Ceu:hover .Becom/* 13 */
{visibility: visible;
 opacity: 1;
 transition: all 1.3s ease-out;}


@media screen and (max-width: 836px)/* 14 */
{.tool .Apex.parent > .Ceu
	{max-width: -webkit-calc(100% / 3);}/*きっちり３等分*/
	.tool .Apex.parent > .Ceu.Mode:hover > .Apex.child
	{position: relative;}  }
/*✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅*/



/*dldtの、画面連鎖*/
/*dldtの、画面連鎖*/
#fly-in
{background-size: cover;/*寸法サイズ?（一応）*/
 background-repeat: no-repeat;/*画像繰り返し無し no-repeat;（一応）*/
 background-attachment: fixed;/*背景スクロール関連?（一応）*/
 overflow: hidden;}/*ブロック内収める感じ?（一応）*/

dl.Epic/*やるなら、『#fly-in.ほほ』　※NGパターン「#fly-in .ほほ」中に半角スペースいらない*/
{width:100vw;/* 要る */
 height: 750px;/* 要る */
 position: relative;}/* 要る */
 /*background-color: #CCCCCC;*/

dt.Hero
{display: inline-flex;/*追加 flax; inline-flex;*/
 width:100vw;/* 無くてもいい */
 height: 750px;/*無しにすると、元の画像サイズ（超デカい）*/
 justify-content: center;/*start; center;中央、right;右側*/
 object-fit: cover;}/*別にいらない(一応) cover; contain; none; scale-down;*/

#fly-in dt/*『#fly-in dt』要る　　「#fly-in.サイズ」では無効*/
{position: absolute;/*poの、リラ&アブ　要る */
 opacity: 0;/*1にすると、全部見える*/
 animation: Cool 12s linear infinite;}/*省略版*/

@keyframes Cool
{0%{opacity: 0;
	  transform: scale(1);}/*画像拡大率、基本 1 */

 10%{opacity: 1;
	  transform: scale(1);}/* 2 にすると大きくなる */

24%{opacity: 1;
		transform: scale(1);}

28%{opacity: 0.5;
				transform: scale(1);}

31%{opacity: 0;
		transform: scale(1);}

80%{opacity: 0;
	  transform: scale(1);}

100%{opacity: 0;
     transform: scale(1);}}

#fly-in dt:nth-child(2) {animation-delay: 3s;}
#fly-in dt:nth-child(3) {animation-delay: 6s;}
#fly-in dt:nth-child(4) {animation-delay: 9s;}


/*dldtの、画面連鎖 ☑️✅ ☑️✅ ☑️✅ ☑️✅ ☑️✅ ☑️✅ ☑️✅ ☑️✅ ☑️✅*/

div.Dope{height: 55px;}

/*dldtの、画面連鎖 ☑️✅ ☑️✅ ☑️✅ ☑️✅ ☑️✅ ☑️✅ ☑️✅ ☑️✅ ☑️✅*/



.King
{display: flex;
	width: 100%;}
.Reverse/*画像が右側にくる設定*/
{flex-direction: row-reverse;}

.imaging
{width: 66%;/* 70% ?　　66% ?*/
 background-color: transparent;}/*#E8D78B; 濃いめクリーム色*/

.imaging img
{display: block;
 width: 100%;
 height: 100%;
 object-fit: contain;}

.support/*categoryの、文字部分*/
{width: 34%;/* 30% ?　　34% ?*/
 padding: 60px 0;}/*上下、左右*/
 /*background-color: #FFFFFF;*/

ul.Active
{width: 97%;
margin: 0 auto;}
li.roll
{background-color: #BEEDBE;/*うすい緑　メイングリーン　#BEEDBE　#BCEBBC*/
 font-size: 1.6rem;
 color: #004F2E;/*文字色　濃いめ緑*/
 text-align: center;
 letter-spacing: 0.1em;/*文字横　間隔*/
 padding: 10px;
 white-space: nowrap;/*文字はみ出し。Un, １*/
 overflow: hidden;/*文字はみ出し。deux, ２*/
 text-overflow: ellipsis;}/*文字はみ出し。trois, ３*/

li.arium
{font-size: 1.15rem;
 color: #004F2E;/*文字色　濃いめ緑*/
 text-align: center;
 line-height: 1.8em;/*上と下の行の、間隔*/
 padding: 0.6rem 0.7rem 1.3rem 0.7rem;}/*上、右、下、左*/

li.mart a
{background-color: #00A0A0;/*青緑色*//*透明 background-color: transparent;*/
 text-align: center;}

li.mart a
{display: block;
 width: 77%;
 font-size: 1.4rem;
 color: #FFFFFF;
 padding: 13px;
 margin: 0 auto;/*marginによる、右寄せ*/
 white-space: nowrap;/*文字はみ出し。Un, １*/
 overflow: hidden;/*文字はみ出し。deux, ２*/
 text-overflow: ellipsis;}/*文字はみ出し。trois, ３*/

li.mart a:hover
{background-color: #20B2AA;}




/*✅ ☑️ 🔖 ✅ ☑️ 🔖 ✅ ☑️ 🔖 ✅ ☑️ 🔖 ✅ ☑️ 🔖 ✅ ☑️ 🔖 ✅ ☑️ 🔖 */
/* 🔖　　🔖　　🔖　　つなげ@media　　🔖　　🔖　　🔖　　🔖　　*/
@media(max-width: 1080px)/*1280px以下 　1080px以下*/
{.imaging{width: 66%;}/*比率、60% 40% でもいい*/
 .support{width:calc(34%);}}/*100%☑︎-☑︎270px　いい感じ　☑︎スペース要る */
/**/

@media(max-width: 768px)/*768px以下*/
{.King{display: block;}/* 要る */

.imaging
{width: 100%;
	height: 400px;}/*画像高さ、400px;*/
.support
{width:100%;
	height: 260px;/*✅高さ調整✅　210 〜 270　一段であれば,200px　　二段,550px〜 */
	padding: 0px;}/*上下、左右*/

/*✔️小さい細サイズの*//*✅*/
ul.Active
{width: 87%;
	margin: 0 auto;}
li.roll
{width: 63%;
	font-size: 1.5rem;
	margin: 0 auto 0 0;}/*marginによる、右寄せ*/

li.arium
{padding: 0.6rem 0.7rem 0.9rem 0.7rem;}/*上、右、下、左*/

li.mart a
{display: block;
	width: 53%;
	font-size: 1.3rem;
	padding: 11px;
	margin: 0 0 0 auto;}}/*marginによる、右寄せ*/

/*これにて、@media(max-width: 768px) 〆*/
/*✔️小さい細サイズの*//*☑️*/
/*✅ ☑️ 🔖 ✅ ☑️ 🔖 ✅ ☑️ 🔖 ✅ ☑️ 🔖 ✅ ☑️ 🔖 ✅ ☑️ 🔖 ✅ ☑️ 🔖 */




/* 完全に後半 */
/*☑️ ◆ ✔️ ☑️ ◆ ✔️ ☑️ ◆ ✔️ ☑️ ◆🔵🔵🔵🔵🔵 ✔️ ☑️ ◆ ✔️ ☑️ ◆ ✔️ ☑️ ◆ ✔️ ☑️ ◆ ✔️ */

div.Phat
{max-width: 1280px;/*468×3=1404　３っ並べるには、けっこうwidth要る*/
 width: 100%;
 padding: 55px 0px 88px 0px;/*上、右、下、左*/
 margin: 0 auto;}
/*background-color: #F4F5CB;うすいクリーム色*/
	/*枠の、丸み*/

h3.Real
{text-align: center;
 font-size: 1.7rem;/*1.8rem 〜 @ 1.5rem*/
 color: #004F2E;/*文字色　濃いめ緑*/
 padding: 0px 0px 28px 0px;}/*上、右、下、左*/

aside.Seek ul
{text-align: center;
 font-size: 0;}/* タグ改行時の空白防止 */

aside.Seek ul li
{display: inline-block;
 padding:11px 22px 11px 22px;/*上、右、下、左*/
 font-size: 14px;}/* ulでサイズ0にしたのを戻す */



/*フッター*/
.Yule
{color:#F8F8FF;
 text-align: center;
 background-color: #638068;
 padding: 32px 10px 32px 10px;
 line-height: 1;}

.shrinemaiden
{margin-bottom: 10px;}
/**/

​