@charset "utf-8";
body{font-size:2.6vmin; line-height:2; 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;}

ruby{position: relative;}
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{width: 100%; height: calc(100% - 5em); max-width:133vh; max-width:133dvh; max-height:calc(75vw - 5em); position: relative; border-radius: 20px 20px 0 0; padding: 0.5em 1em; box-sizing: border-box; padding-bottom: 13vh; margin-top: 5em;}
header{display:flex; justify-content:space-between; 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; }
footer{display:block; position: absolute; left: 0; bottom:0; width: 100%; background-color: orange; height: 12vh; text-align: center;}

#scene01,#scene02,#scene03,#scene04,#scene05,#scene06{height: 100%;}

/*タイトル*/
h1{font-size: 1.7em;}
h1 br{display: none;}
h1 ruby rt,h2 ruby rt,h3 ruby rt{font-size: 0.8em; text-shadow:none; background-color: transparent;}
h1 span,h1 b{display: inline;}
h1 span.bg_white{padding: 0 0.5em; border-radius: 0.2em; margin-right: 0.5em; display: inline-block; margin-bottom: 6px;}
h1 span b.num{font-family: "Helvetica Neue",Arial,sans-serif; font-size: 1.2em;}
h1 span b.chapter{font-size: 0.7em;}
.chapterspan{display: inline-block; white-space: nowrap;}
.h1{background-image: url("../img/common/h1.webp"); background-size: 208px 6px; background-repeat: repeat-x; background-position: left bottom; padding-bottom: 6px; display: inline;}
h1 span.nowrap{white-space: nowrap;}
h2{font-size: 1.4em; background-size: 2.4em auto; background-repeat: no-repeat; background-position: left center; padding-left: 2.8em; min-height: 2.8em; display:flex; justify-content:flex-start; align-items:center; line-height: 1.5em;}

/****ヘッダー****/
/*文字色ボタン*/
#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; background-color: #ffffff; }
.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.2em;}
.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;}
@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);}

/*フッター*/
footer nav{font-size: 1.6em; width: 100%; height: 100%; display:flex; justify-content:space-between; align-items:center; position: absolute; left: 0; top: 0; padding: 0 2em;}
footer nav ruby rt{font-size: 0.8em;}
.bt_next,.bt_back,.bt_last{font-weight: normal; background-size: 1.4em auto; background-repeat: no-repeat; cursor: pointer;}
.bt_next{background-position: right center; padding-right: 4rem; display: none;}
.bt_back{background-position: left center; padding-left: 4rem;}
.bt_last{background-position: right center; padding-right: 4rem;}
.copyright{font-size: 0.8em; position: absolute; bottom: 0; width: 100%; text-align: center; font-weight: normal;}

/*モーダルウィンドウ*/
.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.colummodal article{width: 96%; }
.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;}
.modalvoice{display:flex; justify-content:center; align-items:center; flex-wrap: wrap;}
.modalvoice p{padding: 0.5em 0.5em 0.2em 0.5em; border-radius: 0.3em; margin-left: 1em; position: relative; font-size: 0.8em;}
.modalvoice p::before{content: ""; margin: 0; position: absolute; left: -0.9em; top: calc(50% - 0.5em); width:1em; height:1em; clip-path: polygon(100% 0, 100% 100%, 0% 50%); }

.modalvoice img{width:5em; margin-top: 0.4em;}
.bt_close{font-size: 2.6em; position: absolute; top: 1rem; right: 1rem; 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;}


@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; min-height: calc(100vh - 16em);}.modal article{width: 94%;}}
@media screen and (max-width:120vh) and (orientation: landscape) {.modal article{width: 94%;} section#flame{margin-top: 1em; min-height: calc(100vh - 13em);}}

/*===スマホ横向きメッセージ表示===*/
.sp_landscape{display: none; font-size: 2.5em;}

/*===*ハンバーガーメニュー*===*/
.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; margin-left: 0.5em; 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");}


/*キャラクター*/
.voice{width: 100%; display:flex; justify-content:flex-end; align-items:center; flex-wrap: wrap; padding-right: 6em; position: relative;}
.voice p{border-radius: 0.3em; padding: 0.5em 0.5em 0.2em 0.5em; display: inline-block; position: relative; margin-right: 1em; font-weight: bold;  margin-top: 0em; }
.voice p::before{content: ""; margin: 0; position: absolute; right: -1.1em; top: 0.6em; width:1.2em; height:1em; clip-path: polygon(0 0, 0 100%, 100% 50%); background-color: var(--palered);}
.voiceimg{position: absolute; top:-2.8em; right: 0.5em; width:5em; height:6em; overflow: visible; -webkit-animation: animep 3s 0s infinite; animation:animep 3s 0s infinite;}
.voiceimg img{position: absolute; left: 0; bottom: 0; width: auto; height:6em; -webkit-animation: anime 4s 0s infinite; animation: anime 4s 0s infinite; opacity: 1; }
.voiceimg img.life01 { -webkit-animation-delay: 0s; animation-delay: 0s;}
.voiceimg img.life02 { -webkit-animation-delay: 2s; animation-delay: 2s;}
@keyframes animep {0%,100% {top:-2.8em; right: 0.5em; transform: rotate(-5deg);} 50% {top:-2.5em; right: 0em; transform: rotate(0deg);}}
@-webkit-keyframes animep {0%,100% {top:-2.8em; right: 0.5em; transform: rotate(-5deg);} 50% {top:-2.5em; right: 0em; transform: rotate(0deg);}}

@keyframes anime {0%,100% {opacity: 1; } 49% {opacity: 1; } 50% {opacity: 0; } 99% {opacity: 0; }}
@-webkit-keyframes anime {0%,100% {opacity: 1; } 49% {opacity: 1; } 50% {opacity: 0; } 99% {opacity: 0; }}

/*詳しく見る*/ 
.bt_detail{text-align: right; margin-right: 2%; display: none; margin-bottom: -1em;}
.bt_detail span{position: relative; display: inline-block; border:2px solid #fff; background:linear-gradient(to bottom, #fee8a9,#fff6c4, #fee8a9); padding: 0 0.5em 0 2em; border-radius: 0.2em; line-height: 1em; filter: drop-shadow(2px 2px 2px #666); cursor: pointer; }
.bt_detail span::before{content: ""; margin: 0; position: absolute; left: 0.2em; top: calc(50% - 0.65em); width:1.3em; height:1.3em; background-image: url("../img/common/detail.webp"); background-size:1.3em auto; background-repeat: no-repeat; background-position: center; }

/*QandA*/
.card{font-size: 0.86em; font-weight: bold; width: 100%; display:flex; justify-content:space-around; align-items:center; flex-wrap: wrap; margin-top: 1em; height: calc(100% - 12vh - 3.5em);}
.card li{border-radius: 0.2em; filter: drop-shadow(3px 3px 3px #666); width: 30%; opacity: 0; position: relative;}
.card li.oncard{width: 33%;}
.card li::after{content: ""; margin: 0; position: absolute; right: -1px; bottom: -1px;  width:1.6em; height:1.6em; clip-path: polygon(0 100%, 100% 0,100% 100%);}
.card li:nth-child(1){border: 10px solid #ef8589;}
.card li:nth-child(2){border: 10px solid #8ec31f;}
.card li:nth-child(3){border: 10px solid #618cbf;}
.card li.offcard:nth-child(1){border: 10px solid #ccc; margin: 0.8em 0;}
.card li.offcard:nth-child(2){border: 10px solid #ccc; margin: 0.8em 0;}
.card li.offcard:nth-child(3){border: 10px solid #ccc; margin: 0.8em 0;}
.card li p b.num{margin-top: -1px;}
.card li:nth-child(1) p b.num,.card li:nth-child(1)::after{background-color: #ef8589;}
.card li:nth-child(2) p b.num,.card li:nth-child(2)::after{background-color: #8ec31f;}
.card li:nth-child(3) p b.num,.card li:nth-child(3)::after{background-color: #618cbf;}
.card li.offcard:nth-child(1) p b.num,.card li.offcard:nth-child(1)::after{background-color: #ccc;}
.card li.offcard:nth-child(2) p b.num,.card li.offcard:nth-child(2)::after{background-color: #ccc;}
.card li.offcard:nth-child(3) p b.num,.card li.offcard:nth-child(3)::after{background-color: #ccc;}
.cardbg{background:linear-gradient(to bottom,#fffff0,#f9f8cd); padding:0.5em 0.5em 0 1em; width: 100%; min-height: 7em; display:flex; justify-content:flex-start; align-items:center; flex-wrap: wrap; position: relative; border-radius: 0 0.1em 0 0;}
.card .cardimg{background: radial-gradient(#ffffff,#fffff0,#f9f8cd); padding: 0.5em; position: relative; border-radius: 0 0 0.1em 0.1em;}
.cardillust{max-width: 240px; width: 84%; margin: 0 auto; position: relative;}
.card li.oncard .cardillust{margin:0.5em auto; width: 80%;}
.cardline{width: 96%; height: auto; margin: -0.6em auto 0em auto; position: absolute; top: -0.5em; left:2%;}
.card li p b.num{font-size: 1.6em; position: absolute; top:0; left: -1px; height: 1.8em; width: 1.8em; line-height: 1em; clip-path: polygon(0 0, 0 100%, 100% 0); }
.result{position: absolute; left: 0; top: 0; width: 100%; height: 100%; justify-content:center; align-items:center; display: none;}
.result img{width: 70%; height: auto; display: block;}

.cardon{cursor: pointer;-webkit-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; opacity: 0;
animation-name:cardon; animation-duration:1s; animation-delay: 0s; animation-fill-mode:forwards;}
@keyframes cardon{ 0%{opacity: 0; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 100%{-webkit-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1;}}
.card01{animation-delay: 0.6s;}  .card02{animation-delay: 0.8s;}  .card03{animation-delay: 1s;}

/*コラム*/
.colum{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom: 2em;}
.colum h2{background-image: url("../img/common/colum.svg"); border-radius: 0.2em; display: inline-block; padding: 0.8em 1em 0 3.5em; background-position: left 0.4em center; margin-top: 0.5em;}
.colum .voice{width: 50%; margin-top: 4em;}
.colum .voice p{margin-top: -2em;}
.colum_btn{display:flex; justify-content:center; align-items:center; gap:2em; height: 48dvh; margin-top: -1em; }
.colum_btn01,.colum_btn02{cursor: pointer; border-radius: 0.3em; width: 40%; display:flex; justify-content:space-between; align-items:center; flex-direction: column-reverse; filter: drop-shadow(3px 3px 3px #666); border: 1px solid #fff;}
.colum_btn01 dt,.colum_btn02 dt{width: 100%; min-height: 6em; height: auto; border-radius: 00 0.3em 0.3em; font-weight: bold; padding: 0 1em 0 3.5em; display:flex; justify-content:flex-start; align-items:center; flex-wrap: wrap;}
.colum_btn01 dt{background: linear-gradient(var(--red_bar01) 50%, var(--red_bar02) 51%); text-shadow: -2px -2px 0 var(--red), 2px -2px 0 var(--red), -2px 2px 0 var(--red), 2px 2px 0 var(--red); position: relative;}
.colum_btn02 dt{background: linear-gradient(var(--blue_bar01) 50%, var(--blue_bar02) 51%); text-shadow: -2px -2px 0 var(--blue), 2px -2px 0 var(--blue), -2px 2px 0 var(--blue), 2px 2px 0 var(--blue); position: relative;}
.colum_btn01 dt::before,.colum_btn02 dt::before{content: ""; margin: 0; position: absolute; left: 0.4em; top: calc(50% - 1.4em); width:2.8em; height:2.8em; background-color: #fff; border-radius: 50%; background-size: auto 80%; background-repeat: no-repeat; background-position: center; }
.colum_btn01 dt::before{background-image: url("../img/common/arrow_red.svg");}
.colum_btn02 dt::before{background-image: url("../img/common/arrow_blue.svg");}

.colum_btn01{background-color: var(--red_bar01);}
.colum_btn02{background-color: var(--blue_bar01);}
.colum_btn01 dd,.colum_btn02 dd{width: calc(100% - 2em); background: radial-gradient(#ffffff,#fffff0,#f9f8cd); border-radius: 0.2em; height: 20vh; display:flex; justify-content:center; align-items:center; margin: 1em 1em 0 1em; border: 2px solid #fff;}
.colum_btn01 dd img,.colum_btn02 dd img{height: 19vh; width: auto;}
.gage::before{content: ""; margin: 0; position: absolute; left: -3.5em; top: 0; width:3em; height:3em; background-size:100% auto; background-repeat: no-repeat; background-position: left center;}

/*===スマホ横向きメッセージ表示===*/
.sp_landscape{display: none; font-size: 2.5em;}

/*===*アニメーション*===*/
/*ふわっと表示*/
.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;}


/*** Portrait ***/
@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: 20px 20px 120px 20px; margin: 20px 20px 0; border-radius: 10px; }
header{width: 100%; align-items:flex-end; flex-direction: column-reverse; position: relative; padding: 20px 20px 0 20px;}
h1{font-size: 1.5em; position: relative; left: 0; top:0; width: 100%; }
h2{font-size: 1.2em; background-size: 2em auto; background-position: left 0.2em top 0.2em; padding-left: 2.4em; padding-right: 3em; min-height: 1em;}
h1 br{display: inline;}
h1 span.bg_white{padding: 0.2em 0.5em; border-radius: 5px; line-height: 1em;}
h2 br{display: none;}
footer{position: absolute; height: 120px; margin-top: -120px; bottom: 0!important;}
footer nav{font-size: 1.2em; padding: 0 1em;}
.bt_next,.bt_back,.bt_last{margin-top: 0;}
.bt_next,.bt_last{padding-right: 44px; font-size: 30px;}
.bt_back{padding-left: 44px; font-size: 30px;}
.voice{margin-top: 20px; margin-bottom: 50px;}
	
/*QandA*/
.card{margin-top: 20px; margin-bottom: 40px; display:flex; justify-content:center; align-items:flex-start; flex-wrap: wrap; gap: 16px; height: auto!important;}
.card li{width: 100%; display:flex; justify-content:flex-start; align-items:stretch; margin-bottom: 0;}
.card li br{display: none;}
.card li.oncard{width: 100%;}
.card li.offcard{width: 94%;}
.card li.offcard:nth-child(1){margin: 0;}
.card li.offcard:nth-child(2){margin: 0;}
.card li.offcard:nth-child(3){margin: 0;}	
.cardbg{padding:10px 10px 10px 30px; width: auto; min-height: 8em; flex: 2;}
.card .cardimg{padding: 10px; flex: 1;}
.cardillust{width: 240px; margin: 0 auto; position: relative; max-width: 90%;}
.cardline{display: none;}
.result{position: absolute; left: 0; top: 0; width: 100%; height: 100%; justify-content:center; align-items:center; display: none;}
.result img{width: auto; height: 90%; display: block;}
	
.bt_detail{margin-top: 20px; margin-bottom: 0;}

.modal h3{font-size: 1.5em; padding-right: 0; width: 100%;}
.modal{ padding-top: 1.8em;}	
.modal article{width: 96%; position: relative;}
.modalvoice{flex-direction: column-reverse; margin-top: 1em;}
.modalvoice p{padding: 1em; margin-left: 0; margin-bottom: 1em }
.modalvoice p::before{ left: calc(50% - 0.5em); top:auto; bottom:-0.9em; width:1em; height:1em; clip-path: polygon(0 0, 100% 0 , 50% 100%); }
.bt_close{position: absolute; top: auto; bottom:0.5em; right: 0.5em; width: 46px; height: 46px; line-height: 1em; background-size: 30px auto;}

.colum{flex-wrap: wrap;}
.colum h2{width: 100%; padding: 0.2em 0.5em 0.2em 2.5em; background-size:1.5em auto; display:flex; justify-content:flex-start; align-items:center; flex-wrap: wrap;  }
.colum .voice{width: 100%; margin-top: 4em;}
.colum .voice p{margin-top: -2em;}
.colum_btn{ margin-top: -2em;}
.colum_btn{flex-wrap: wrap; justify-content:flex-start; align-items:flex-start; gap:0; height: auto!important; margin-top: 0em;}
.colum_btn01,.colum_btn02{ width: 96%; margin: 0 auto 2em auto; }
.gage::before{width:2.4em; height:2.4em; left: -3em;}
}

/*** Portrait ***/
@media screen and (max-width:480px) and (orientation: portrait) {
body{font-size: 18px;}
h2{padding-right: 0; align-items:flex-start;}
.colum h2{min-height:auto!important; }
.bt_next,.bt_last{padding-right: 34px; font-size: 19px;}
.bt_back{padding-left: 34px; font-size: 19px;}
section#flame{ padding: 20px 20px 150px 20px;}
footer{ height: 150px; margin-top: -150px; }
.bt_next,.bt_back,.bt_last{margin-top: 10px;}
.card li{display:block;}
.cardbg{min-height: 1em; padding:20px 10px 20px 30px;}
.cardillust{width: 160px;}
.voiceimg{top:0em;}
@keyframes animep {0%,100% {top:0em; right: 0.5em; transform: rotate(-5deg);} 50% {top:-0.5em; right: 0em; transform: rotate(0deg);}}
@-webkit-keyframes animep {0%,100% {top:0em; right: 0.5em; transform: rotate(-5deg);} 50% {top:-0.5em; right: 0em; transform: rotate(0deg);}}
.colum .voiceimg{top:-2.5em;-webkit-animation: columanime 3s 0s infinite; animation:columanime 3s 0s infinite;}
@keyframes columanime {0%,100% {top:-2.5em; right: 0.5em; transform: rotate(-5deg);} 50% {top:-2em; right: 0em; transform: rotate(0deg);}}
@-webkit-keyframes columanime {0%,100% {top:-2.5em; right: 0.5em; transform: rotate(-5deg);} 50% {top:-2em; right: 0em; transform: rotate(0deg);}}
.gage::before{content: ""; left: calc(50% - 1.2em); top: auto; bottom:-2.8em; width:2.4em; height:2.4em; background-position: center;}
}

/***スマホ横向きの注意 ***/
@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%;}}