@charset "utf-8";
body{font-size:2.6vmin; line-height:1.7; font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,"Helvetica Neue",Arial,sans-serif; text-size-adjust: 100%; -webkit-text-size-adjust: 100%;/* iphone横向でルビ指定の文字サイズが小さくなるのを回避。モバイルブラウザがテキストのサイズを自動調整するのを制御 */font-smoothing:auto; -webkit-font-smoothing:auto; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: 0; margin: 0; }

@media screen and (max-width:134vh) and (orientation: landscape) {body.appear .wrapper{font-size:1.86vw;}
section#flame{width: calc(100% - 2em); margin-left: 1em; margin-right: 1em;	}}

rt{font-size:100%; zoom:0.6;}
@media screen and (-webkit-min-device-pixel-ratio: 0) { _::-webkit-full-page-media, _:future, :root rt{ font-size:0.4em; zoom:1;}/*safari*/} _:lang(x)::-moz-placeholder, rt {margin-bottom: -0.5em; margin-top: 0em; font-size: 0.66em;}/*Firefox*/

img{display: block;}

/****レイアウト****/
body .wrapper{width: 100%; height: 100vh; height: 100dvh; display:flex; justify-content:center; align-items:center; flex-wrap: wrap; position: relative; opacity: 0; z-index: 1; margin: 0;}
body.appear .wrapper{animation-name:PageAppear; animation-duration:0.8s; animation-delay:0s; animation-fill-mode:forwards; opacity: 0;}
@keyframes PageAppear{0%{opacity: 0; }100%{opacity: 1;}}
.fade-out {opacity: 0; transition: opacity 0.8s ease;}
section#flame{display:flex; justify-content:space-between; align-items:stretch; flex-wrap: wrap; width: 100%; height: 100%; max-width:133vh; max-width:133dvh; max-height:75vw; position: relative; border-radius: 20px; padding: 1em; box-sizing: border-box; }
header{display:flex; justify-content:flex-end; align-items:flex-start; position: absolute; left: 0; top:0; width: 100%; padding: 1rem 1rem 0 1rem; z-index: 10;}
header aside{display:flex; justify-content:flex-end; align-items:flex-start; position: relative; right:0; top:0; z-index: 20; }
#detail01{display: none;}

/*モーダルウィンドウ*/
.modal{position: fixed; width: 100%; height: 100vh; height: 100dvh; justify-content:center; align-items:center; flex-wrap: wrap; background-color: rgba(0,0,0,0.55); z-index: 20;  padding: 1em; overflow-y: auto; }
.modal article{min-height: 50vh; width: 80%; border-radius: 1rem; filter: drop-shadow(2px 2px 2px #000); padding: 2rem; position: relative;}
.modal h3{font-size: 1.7em; background-image: url("../img/common/h1.webp"); background-size: 208px 6px; background-repeat: repeat-x; background-position: left bottom; padding-bottom: 6px; padding-right: 3em; display: block; margin-bottom: 0.5em;}
.bt_close{font-size: 2.6em; position: absolute; top: 0.2em; right: 0.2em; width: 1.4em; height: 1.4em; line-height: 1em; display: flex; align-items:center; justify-content:center; border-radius: 50%; filter: drop-shadow(2px 2px 2px #000); cursor: pointer; background-image: url("../img/common/close.svg"); background-size: 0.8em auto; background-repeat: no-repeat; background-position: center;}
#detail01 h3{margin-bottom: 1em;}#detail01 p{margin-top: 1em; line-height: 1.8em;}

/****ヘッダー****/
/*文字色ボタン*/
#textstyle{background-color:#fff; border: 4px solid var(--lightgreen); outline:solid #006935 3px; border-radius: 6px; padding: 0.2em 0.25em; width:auto; height: auto; text-align: center; font-size:0.6em; overflow: hidden; margin-right: 1rem;}
#textstyle ul{margin: 0px; padding: 0px 0.5em; width: 100%; list-style: none; list-style-position: inside; display: flex; justify-content:center; align-items:center; overflow: hidden;} 
#textstyle ul li{ margin: 0.25em 0em; padding: 0; display: flex; justify-content:center; align-items:center;}
#textstyle ul li span{display: flex; justify-content:center; align-items:center;}
#textstyle ul li span img{width: 2.4em; height: auto; max-width: 45px; margin: 0; cursor: pointer;}
#textstyle ul li.color_bt01{border-right: 3px solid var(--lightgreen); padding-right: 0.2em; margin-right: 0.5em;}
#textstyle ul li.color_bt02 span{padding-right: 0.2em; }
#textstyle ul li.color_bt03 span{padding-right: 0.2em; }
/*もくじボタン*/
#menu{text-align: center; display: inline-table;}
.openbtn{font-size: 0.83em; box-shadow: 3px 3px 3px #666666; cursor: pointer; width: 3em; height: 3em; border-radius: 6px; display: flex; justify-content:space-between; align-items:center; position: relative; top: 0;}
.openbtn span{display:inline-block; transition: all .4s; position: absolute; border-radius: 10px;}
.openbtn span:nth-of-type(1) {left:0.4em; top:0.7em; width:2.2em; height:0.3em;}
.openbtn span:nth-of-type(2) {left:0.4em; top:1.4em; width:2.2em; height:0.3em;}
.openbtn span:nth-of-type(3) {left:0.4em; top:2.1em; width:2.2em; height:0.3em;}
/*activeクラスが付与されると線が回転*/
.openbtn.active span:nth-of-type(1){top:0.7em; left: 0.4em; transform: translateY(0.7em) rotate(-45deg);  width: 2.2em;}
.openbtn.active span:nth-of-type(2){top:1.4em;  left: 0.4em;  transform: translateY(0) rotate(45deg);  width: 2.2em;}
.openbtn.active span:nth-of-type(3) {opacity: 0;}
.menu_tit{opacity: 1; transition:1s; animation: menu_anime 1.5s forwards; font-weight: bold; position: relative; font-size: 0.83em; margin-top: 0.4em; }
.menu_tit.mokuji{display: none; }
.menu_tit02{opacity: 0; display: none; } 
.menu_tit02.tojiru{display:block; transition:1s; animation: menu_anime02 1.5s forwards; font-weight: bold; position: relative; margin-left: 3px; font-size: 0.83em; margin-top: 0.4em; }
@keyframes menu_anime { 0% {opacity: 0; } 100% { opacity: 1; }}
@keyframes menu_anime02{ 0% { opacity: 0; } 100% { opacity: 1;}}
.bt_home{margin-right: 0.6em; width: 2.6em; height: auto; filter: drop-shadow(1px 1px 2px #666);}

/*===TOP===*/
body{background-image: url("../img/top/bg.webp"); background-size: 144px 192px; background-repeat: repeat; background-position: left top;}
@media screen and (-webkit-min-device-pixel-ratio: 2){body.appear{background-image: url("../img/top/bg_sp.webp");}}
@media screen and (-webkit-min-device-pixel-ratio: 3){body.appear{background-image: url("../img/top/bg_sp.webp"); background-size: 72px 96px; }}

main,#flame nav{width:50%; }
main{display:flex; justify-content:center; align-items:center; flex-direction: column;}
h1{margin: 0!important;}
h1 img{width: 98%; height: auto; margin: 0 auto; max-width: 645px;}
.keyvisual{width: 96%; height: auto; margin: 1em auto 0 auto; max-width: 621px;}
main p{font-size: 0.8em; text-align: center;margin:1em 0 3em 0;}
#flame nav ul{margin-top:4em; height: calc(100% - 6em); list-style: none; background-image: url("../img/top/flame.svg"); background-size: 98% auto; background-repeat: no-repeat; background-position: top right; padding: 9% 5% 0 6%; filter: drop-shadow(2px 2px 2px #666); }
#flame nav ul li{margin: 0; height:15.6%; background-size: 16% auto; background-repeat: no-repeat; background-position: left center;}
#flame nav ul li:nth-child(2){background-image: url("../img/top/one.svg"); }
#flame nav ul li:nth-child(3){background-image: url("../img/top/two.svg");}
#flame nav ul li:nth-child(4){background-image: url("../img/top/three.svg");}
#flame nav ul li:nth-child(5){background-image: url("../img/top/four.svg"); }
#flame nav ul li:last-child{height:11%; margin-top: 0.2em;}
#flame nav ul li a{background-size: contain; background-position: left center; background-repeat: no-repeat; margin-left: 15%; display:flex; justify-content:center; align-items:center; border-radius: 0.3em; height: 100%;  }
#flame nav ul li:first-child a{margin-left: 0; width: 100%; background-image: url("../img/top/bt_first.webp"); background-position: center top; animation: firstbt 2.4s ease-in infinite alternate; }
#flame nav ul li:nth-child(2) a{background-image: url("../img/top/bt01.webp"); }
#flame nav ul li:nth-child(3) a{background-image: url("../img/top/bt02.webp");}
#flame nav ul li:nth-child(4) a{background-image: url("../img/top/bt03.webp");}
#flame nav ul li:nth-child(5) a{background-image: url("../img/top/bt04.webp");}
#flame nav ul li:last-child a{width:24vh; width: 24dvh; height: 6vh; height: 6dvh; margin-left: calc(50% - 12vh); margin-left: calc(50% - 12dvh); background-image: url("../img/top/bt_last.webp"); background-position: center top; }


.theme-red #flame nav ul li:first-child a,.theme-orange #flame nav ul li:first-child a,.theme-blue #flame nav ul li:first-child a{ background-image:none;}
.theme-red #flame nav ul li:nth-child(2) a,.theme-orange #flame nav ul li:nth-child(2) a,.theme-blue #flame nav ul li:nth-child(2) a{background-image:none;}
.theme-red #flame nav ul li:nth-child(3) a,.theme-orange #flame nav ul li:nth-child(3) a,.theme-blue #flame nav ul li:nth-child(3) a{background-image:none;}
.theme-red #flame nav ul li:nth-child(4) a,.theme-orange #flame nav ul li:nth-child(4) a,.theme-blue #flame nav ul li:nth-child(4) a{background-image:none;}
.theme-red #flame nav ul li:nth-child(5) a,.theme-orange #flame nav ul li:nth-child(5) a,.theme-blue #flame nav ul li:nth-child(5) a{background-image:none;}
.theme-red #flame nav ul li:last-child a,.theme-orange #flame nav ul li:last-child a,.theme-blue #flame nav ul li:last-child a{background-image:none;}

#flame nav ul li:first-child{position: relative;}
#flame nav ul li:first-child p{position: absolute; left: 0.6em; bottom: -0.5em; width: 4em; height: 5em; overflow: visible; -webkit-animation: animep 3s 0s infinite; animation:animep 3s 0s infinite;}
#flame nav ul li:first-child p img{position: absolute; left: 0; bottom: 0; width: auto; height:5em; -webkit-animation: anime 4s 0s infinite; animation: anime 4s 0s infinite; opacity: 0;}
#flame nav ul li:first-child p img.life01 { -webkit-animation-delay: 0s; animation-delay: 0s;}
#flame nav ul li:first-child p img.life02 { -webkit-animation-delay: 2s; animation-delay: 2s;}
@keyframes animep  {0% {bottom:-0.5em; transform: rotate(5deg); left: 0.6em;} 50% {bottom:0em;transform: rotate(-5deg); left: 0em;}  100% {bottom:-0.5em; transform: rotate(5deg); left: 0.6em;}}
@-webkit-keyframes animep  {0% {bottom:-0.5em; transform: rotate(5deg); left: 0.6em;} 50% {bottom:0em;transform: rotate(-5deg); left: 0em;}  100% {bottom:-0.5em; transform: rotate(5deg); left: 0.6em;}}
@keyframes anime {0%,100% {opacity: 0; } 49% {opacity:0; } 50% {opacity: 1; }  99% {opacity: 1; }}
@-webkit-keyframes anime {0%,100% {opacity: 0; } 49% {opacity:0; } 50% {opacity: 1; }  99% {opacity: 1; }}
@keyframes firstbt{
	0%{background-position: top center;}
	80%{background-position: top center;}
	85%{background-position: top 0.2em center;}
	90%{background-position: top 0.2em center;}
	95%{background-position: top center;}
	100%{background-position: top center;}}

footer{font-size: 0.8em; display:flex; justify-content:flex-end; align-items:center; flex-wrap: wrap;}
.analysis{cursor: pointer; margin-right: 1em;}

/*===*ハンバーガーメニュー*===*/
.globalMenuSp {position:fixed; top: 0; left: 0; color: #000; background:rgba(255,255,255,0.9); text-align: center; width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; display:flex; justify-content:flex-end; align-items:flex-start; transform: translateX(100%); transition: all 0.6s; overflow: hidden; z-index: 10; opacity: 0; }
.globalMenuSp.active {transform: translateX(0%); opacity: 1;}
#globalMenu ul{margin-top: 6em; margin-right: -1em; border-radius: 1em 0 0 1em; padding: 1em 2em 1em 1em; }
#globalMenu ul li{text-align: left; display: block; padding: 0 0 0 3em; background-size: 2.4em auto; background-repeat: no-repeat; background-position: left center; min-height: 3em; font-weight: bold; height: 100%; display: flex; align-items: center; justify-content: flex-start; border-bottom: dashed 1px #999;}
#globalMenu ul li a{display: block; height: 100%; display: flex; align-items: center; justify-content: flex-start; text-decoration: none; width: 100%; }
#globalMenu ul li:nth-child(1){background-image: url("../img/first/star.webp");}
#globalMenu ul li:nth-child(2){background-image: url("../img/common/icon01.webp");}
#globalMenu ul li:nth-child(3){background-image: url("../img/common/icon02.webp");}
#globalMenu ul li:nth-child(4){background-image: url("../img/common/icon03.webp");}
#globalMenu ul li:nth-child(5){background-image: url("../img/common/icon04.webp");}
#globalMenu ul li:nth-child(6){background-image: url("../img/last/star.webp");}

/*===*アニメーション*===*/
/*ふわっと表示*/
.fuwa{animation-name:fuwaanime; animation-duration:0.8s; animation-fill-mode:forwards; opacity: 0; animation-delay: 0.5s;}
@keyframes fuwaanime{  from { opacity: 0; }  to { opacity: 1; }}
.fuwa00{animation-delay: 1s;}.fuwa01{animation-delay: 1.2s;}.fuwa02{animation-delay: 1.4s;}.fuwa03{animation-delay: 1.6s;}.fuwa04{animation-delay: 1.8s;}.fuwa05{animation-delay: 2s;}.fuwa06{animation-delay: 2.2s;}


/*===タブレット縦向き===*/
@media screen and (orientation: portrait) {
body .wrapper{width: 100%; min-height: 100vh; min-height: 100dvh; height: auto!important; display:flex; flex-wrap: wrap; justify-content:flex-start; align-items:flex-start; flex-direction: column; padding: 0;}
section#flame{width: calc(100% - 40px); height:auto!important; min-height:auto!important; max-height:1000vh!important; position: relative; padding: 0 20px 20px 20px; margin: 0 20px 0; }
#content{display: block;}
header{position: relative; right: 0; top:0; margin: 0; display:flex; justify-content:flex-end; align-items:flex-start; width: 100%;}
main,#flame nav{width:100%; }
main p{margin:1em 0;}
h1 img{max-width: 96%; width: 645px;}
.keyvisual{max-width: 94%; width: 621px; }
#flame nav ul{background-color: var(--bg); border-radius: 10px; margin-top:0; height: auto; background-image: url("../img/common/menu/flame01.svg"),url("../img/common/menu/flame03.svg"),url("../img/common/menu/flame02.svg"); background-size: 100% auto; background-repeat:no-repeat,no-repeat,repeat-y; background-position: top right, bottom right, bottom right; padding: 40px 5vw;}
#flame nav ul li{display: block; margin: 0 0 10px 0; height:14vw; background-size: 10vw auto; background-position: left center; }
#flame nav ul li:last-child{height:9vw;}
#flame nav ul li a{width: 65vw; height: 100%; background-size: auto 100%; margin: 0 auto 0 10vw; }
#flame nav ul li:first-child a{width: 73vw; background-size:  auto 100%; margin: 0 auto; background-position: left center;}
#flame nav ul li:last-child a{width:34vw; height: 100%; margin: 0 auto; background-size:  auto 100%;}	
#flame nav ul li:first-child p{left: 5%; bottom:0; width: 12%; height: 100%; }
#flame nav ul li:first-child p img{left: 1em; bottom: 0.5em; width: auto; height:100%; }
@keyframes animep  {0% {transform: rotate(0deg); left: 5%; bottom:0;} 50% {transform: rotate(-5deg); left: 8%; bottom:0.5em;}  100% {transform: rotate(0deg);} left: 5%; bottom:0;}
@-webkit-keyframes animep {0% {transform: rotate(0deg); left: 5%;} 50% {transform: rotate(-5deg); left: 8%;}  100% {transform: rotate(0deg);} left: 5%;}
footer{position: relative; margin-top: 1em;}
.modal h3{font-size: 1.5em; padding-right: 0; width: 100%;}
.modal{ padding-top: 1.8em;}	
.modal article{width: 96%; position: relative;}
.bt_close{position: absolute; top: auto; bottom:-0.2em; right:-0.2em; width: 46px; height: 46px; line-height: 1em; background-size: 30px auto;}
}


/*===スマホ縦向き===*/
@media screen and (max-width:480px) and (orientation: portrait) {
body{font-size: 18px;}
#content{display: block;}
#flame nav ul{background-size: 100% auto; padding: 40px 2% 30px 3%; }
#flame nav ul li a{width: calc(100% - 40px); height: 100%; background-size: 96% auto; margin: 0 auto 0 40px; }
#flame nav ul li:first-child a{width: 100%; background-size: 96% auto ; background-position: center;}
#flame nav ul li{display: block; margin: 0 0 10px 0; height:15vw;  background-size: 40px auto; }
#flame nav ul li:first-child p{left: 0; bottom:0; width: 12%; height: 100%; }
#flame nav ul li:first-child p img{left: 1em; bottom: 0.5em; width: auto; height:100%; }
@keyframes animep  {0% {transform: rotate(0deg); left: 0; bottom:0;} 50% {transform: rotate(-5deg); left: 10px; bottom:0.5em;}  100% {transform: rotate(0deg);} left: 0; bottom:0;}
@-webkit-keyframes animep {0% {transform: rotate(0deg); left: 0;} 50% {transform: rotate(-5deg); left: 10px}  100% {transform: rotate(0deg);} left:0;}
	}

/*===スマホ横向きメッセージ表示===*/
.sp_landscape{display: none; font-size: 2.5em;}
@media screen and (max-height: 480px) and (orientation: landscape){
.sp_landscape{position: fixed; top: 0; left:0; z-index: 30; font-weight: bold; color: red; padding: 0.5em; width: 100%; height: 100vh; height: 100dvh; box-sizing: border-box; background-color: rgba(0,0,0,0.60); display:flex; justify-content:center; align-items:center; gap:20px;}
.sp_landscape span{padding: 0.8em; border-radius: 10px; display: inline-block;}
.sp_landscape img{width: auto; height: 80%;}}