@charset "utf-8";
/* CSS Document */
#scene01{display: block;}
#scene02,#scene03,#scene04{display: none;}
#nav01_02,#nav01_03,#nav01_04,#nav01_05,#nav01_06{display: none;}
.bt_next.first{display: block;}

body.first{background : repeating-linear-gradient(315deg,#fff6c4,#fff6c4 8px,#fffdd1 0,#fffdd1 10px);}
h1 span.h1{text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;}
h2{background-image: url("../img/first/question.svg");}

footer{background: linear-gradient(var(--yellow_bar01) 50%, var(--yellow_bar02) 51%); font-weight:bold; border-top:solid 1px #fff;box-shadow: 0px -2px 3px #666666;  }

.bt_next,.bt_last{background-image: url("../img/first/next.webp");}
.bt_back{background-image: url("../img/first/back.webp");}

.gage{width:11em; height: 2.42em; background-image: url("../img/first/gage.svg"); background-size: 100% auto; background-repeat: no-repeat; background-position: center center; margin: 0.5em auto 0 auto; display:flex; justify-content:center; align-items:center; gap:0.6em;}
.gage img{width:0.9em; height: 0.9em;}
.gage img.star{width:1.3em; height:auto; margin-left: -0.2em;}
.gage li:nth-child(1),.gage li:nth-child(4){margin-top: -0.2em;}
.gage li:nth-child(2),.gage li:nth-child(3){margin-top: -0.4em; }

section#flame{padding: 0 0 13vh 0;}
h1 span.bg_white{font-size: 0.7em; padding: 0.5em; border-radius: 1em; margin-right: 0.5em; display: inline-block; margin-bottom: 6px; line-height: 1em;}
#scene01{display: flex; justify-content:center; align-items:center; flex-wrap: wrap; max-width: 100%;}
#scene01 p{border-radius: 0.9em; background-color: rgba(255,255,255,0.60); padding: 0.5em; border: 2px solid #afa384; max-width: 99%; font-size: 0.9em; }
#scene01 p span{display: block; background-image:url("../img/first/f_left.svg"),url("../img/first/f_right.svg"),url("../img/first/f_center.svg"); background-position:left top,right top,center top; background-repeat:no-repeat,no-repeat,repeat-x; background-size: auto 100%,auto 100%,auto 100%; padding: 0.6em 1.6em;}
.scene01_img{ width: 100%; display:flex; justify-content:center; align-items:center; flex-wrap: wrap; gap:2em;}
.scene01_img img{height: 8em; width: auto; margin: 0.5em 0;}

.theme-red #scene01 p span,.theme-orange #scene01 p span,.theme-blue #scene01 p span{background-image:none;}

.coma{background-color: #fee8a9; border: 2px #7a6a56 solid; border-radius:0.3em; }
#scene02{justify-content:center; align-items:center; flex-direction: column; max-width: 100%;}
#scene02 p{width: 100%; position: relative;}
#scene02 p.coma img{margin: 1em auto 0.3em auto; height: 9em; width: auto;}
#scene02 .voice01,#scene02 .voice02{position: absolute; background-size: contain; background-repeat: no-repeat; background-position:center; display:flex; align-items:center;}
#scene02 .voice01{top:-1em; left:2em; background-image: url("../img/first/scene02_03.svg"); padding: 1em 3em 1em 2em; justify-content:flex-end;}
#scene02 .voice02{top:-2em; right:3em; background-image: url("../img/first/scene02_04.svg"); padding: 1.5em 2em 1.5em 3.5em; justify-content:flex-start; background-position:center top 1em;}
.name01,.name02,.name03{line-height: 1em;display: inline-block; position: absolute; font-weight: bold; padding:0 0.5em; border: 4px solid var(--yellow);}
.theme-red .name01,.theme-red .name02,.theme-red .name03,.theme-orange .name01,.theme-orange .name02,.theme-orange .name03,.theme-blue .name01,.theme-blue .name02,.theme-blue .name03{border: none;}

.name01{bottom: 1em; left:  1em;}
.name02{bottom: 1em; right: 1em;}
.name03{bottom: 2.5em; right: 15em; border-top: 6px solid var(--yellow);}
.name01 b,.name02 b,.name03 b{padding: 0 0 0 0.5em; margin: 0 0 0 0.5em; border-left: #fff dashed 2px; display: inline-block; height: 100%;}
.name01 br,.name02 br{display: none;}
#scene02 .life{position: relative; margin: 0; padding-top: 1em; display:flex; justify-content:center; align-items:flex-start; flex-wrap: wrap;}
#scene02 .life img{margin: 0 0 1em 0; height: 12em; width: auto; }
#scene02 .voice03,#scene02 .voice04{position: relative; background-size: contain; background-repeat: no-repeat; background-position:center; display:flex;justify-content:center; align-items:center; animation-name:lifevoice; animation-duration:0.8s; animation-fill-mode:forwards; opacity: 0; transform: scale(1.8);}
#scene02 .voice03{background-image: url("../img/first/scene02_01.svg"); padding: 1.6em; animation-delay: 1.6s; top:0; }
#scene02 .voice04{background-image: url("../img/first/scene02_02.svg"); padding: 2.5em; animation-delay: 1.8s; margin-top: -1em;}
@keyframes lifevoice{from { opacity: 0; transform: scale(1.8); }  to { opacity: 1; transform: scale(1); }}

#scene03{justify-content:center; align-items:center; flex-direction: column; flex-wrap: wrap; max-width: 100%; font-size: 0.9em; text-align: 1.5em; gap:0.5em;}
#scene03 .coma{width: 100%; position: relative; margin: 0!important;}
#scene03 .coma01{display: flex; justify-content:center; align-items:center; flex-wrap: wrap; max-width: 100%;}
.c01_left{width: 38%; position: relative;}
.c01_right{width: 62%; position: relative;}
#scene03 .voice01,#scene03 .voice02,#scene03 .voice05,#scene03 .voice06{position: absolute; background-size: contain; background-repeat: no-repeat; background-position:center; display:flex; align-items:center; justify-content:flex-start;}
#scene03 .voice03,#scene03 .voice04{width: 80%; position: absolute; right: 0; background-size: contain; background-repeat: no-repeat; background-position:center; display:flex; align-items:center; justify-content:center;}
#scene03 .voice01{top:-0.7em; left: 0;background-image: url("../img/first/scene03_01.svg"); padding:1em 1.5em 2em 1.5em;}
#scene03 .voice02{top:-1em; right: 1em;background-image: url("../img/first/scene03_02.svg"); padding:2em 2em;}
#scene03 .voice03{top: -0.8em; background-image: url("../img/first/scene03_03.svg"); padding:0.7em 0.8em 0.5em 3.2em;}
#scene03 .voice04{bottom: 0.3em; background-image: url("../img/first/scene03_04.svg"); padding:0.7em 0.8em 0.5em 2.2em;}
.c01_left img{height: 7em; width: auto; margin: 5em 0 0 1.6em;}
.c01_right img{height: 8.5em; width: auto; margin: 3.5em 0.5em 2.5em 1.5em;}

#scene03 .coma02{display: flex; justify-content:center; align-items:center; flex-wrap: wrap; max-width: 100%;}
.c02_left{width: 35%; position: relative;}
.c02_center{width: 47%;}
.c02_right{width: 18%; padding: 0.5em;}
#scene03 .voice05{top:-0.5em; right: -0.5em; background-image: url("../img/first/scene03_05.svg"); padding:1.5em 1.5em 1.8em 1.5em;}
#scene03 .voice06{top:-0.6em; left: 0.5em; background-image: url("../img/first/scene03_06.svg"); padding:1em 1em 1.5em 1em;}
.c02_left img{height: 7em; width:auto; margin: 4.5em auto -0.5em auto; padding-left: 1em;}
.c02_center img{width:4em; max-width: 150px; height: auto; float: left; margin: 0.2em;}

#scene04{justify-content:center; align-items:center; flex-direction: column; flex-wrap: wrap; max-width: 100%;}
#scene04 .coma{width: 100%; position: relative; margin: 0; padding:1em 2em; display: flex; justify-content:center; align-items:flex-end; flex-wrap: wrap; }
#scene04 .voice01{margin-top: -5.5em; width: 60%; position: relative;}
#scene04 .voice01 b{display: inline-block; z-index: 1; background-size: contain; background-repeat: no-repeat; background-position:center; background-image: url("../img/first/scene04_01.svg"); padding:2.5em 1.7em 3.5em 1.7em; }
#scene04 .voice01 b span{display: inline-block;}
#scene04 .voice01 img{width: 36%; margin: -4em auto 0 auto; z-index: 2; padding-left: 2em;}
.scene04img{width: 39%; padding:0 2em; margin-bottom: -3em;}

/*** Portrait ***/
@media screen and (orientation: portrait) {
section#flame{ padding: 0 0 150px 0;}
h1 span.bg_white{padding: 0.2em 0.5em;}
#scene01 p span{ padding: 1.6em;}
#scene02{flex-direction: column;}
#scene02 p.coma img{margin: 2em auto 0.3em auto; height: auto; width: 50%; max-width:300px;}
#scene02 .voice01{font-size: 0.9em; top:0.5em; left:-0.5em; width:14em; height: auto; padding: 1em 2.5em 1em 1em; justify-content:flex-start; background-position: left center;}
#scene02 .voice02{font-size: 0.9em; top:-0.5em; right:-0.5em; width:13em; height: auto; padding: 1em 0.5em 1em 4.5em;  align-items:flex-start; background-position: center top;}
#scene02 .voice03,#scene02 .voice04{font-size: 0.9em; }
.name01{font-size: 0.9em; bottom: -0.5em; left:  0.5em;}
.name02{font-size: 0.9em; bottom: -0.5em; right: 0.5em;}
.name03{font-size: 0.9em; bottom: 0; left: 50%; right: auto;}
#scene02 .life{margin-top: 2em; width: 100%; align-items:center;}
#scene02 .life img{margin: 0 0 0 0; height: auto; width: 24%; max-width: 210px;}
.c01_right,.c02_center,.c02_right{width: 90%;}
.c01_left,.c02_left{width: 22em; margin: 2em auto;}
#scene03 .voice05{top:-0.5em;}
.c02_right{width: 50%; padding: 1em; margin: 0 auto; min-width: 300px;}

#scene04 .coma{margin-bottom: 2em;}
#scene04 .voice01{width: 100%; margin-top: 1em;}
#scene04 .voice01 b{width: 100%; background-size: 100% auto; padding:4em 2em 4em 2em; }
#scene04 .voice01 img{width: 34%; margin: -4.5em auto 0 auto; z-index: 2; padding-left: 3em; max-width: 225px;}
.scene04img{width: 100%; padding:0 2em; margin-bottom: -3em; margin-top:2em;  max-width:330px;}
}

@media screen and (max-width:480px) and (orientation: portrait) {
#scene01 p{border-radius: 10px; padding: 5px;}
#scene01 p span{background: none; padding: 20px; border: 1px solid #afa384; border-radius:5px; }
.scene01_img{margin: 2em 0; gap:2em;}
.scene01_img img{height: 150px; width: 200px; margin:0 auto;}
#scene02 p.coma img{margin:6em auto 2.5em auto; max-width:200px;}
#scene02 .voice01{background-image: url("../img/first/scene02_03sp.svg");}
#scene02 .voice02{background-image: url("../img/first/scene02_04sp.svg"); justify-content:center; padding: 1em 0.5em 1em 2.5em; background-position: right top;}
.name01 br,.name02 br{display: inline;}
.name01 b,.name02 b{padding: 0; margin: 0; border-left: none; border-top: #fff dashed 1px; }

#scene02 .life{margin-top: 2em; width: 100%; align-items:center;}
#scene02 .life img{margin:3em 2em 2em 0; height: auto; width: 35%; max-width: 210px;}
#scene02 .voice03{position:absolute; top: 2em; left: -0.5em;}
#scene02 .voice04{position:absolute; top: 0; right: -0.5em;}
.name03{bottom: 3em; left: 50%; right: auto;}

#scene03 .coma02 {margin-bottom: 1em!important;}
#scene03 .voice03,#scene03 .voice04{top: 0; bottom: 0; background-image: none; padding:1em; background-color: #fff; border: 2px solid #7a6a56; border-radius: 10px; position: relative; display: block; margin: 0; width: 100%;}
#scene03 .voice03 br,#scene03 .voice04 br{display: none;}
#scene03 .voice04{margin: 1em 0;}

.c01_left,.c02_left{width: 22em; margin: 2em auto;}
.c01_right img{height: auto; width: 100px; margin: 1em auto;}

.c02_right img{min-width: 200px;}

#scene04 .coma{padding: 1em; margin-bottom: 1em;}
#scene04 .voice01 b{width: 100%; background-image: none; padding:1em; background-color: #fff; border: 2px solid #7a6a56; border-radius: 10px; }
#scene04 .voice01 img{margin: -1.5em auto 0 auto; padding-left: 0; width: 150px;}
.scene04img{padding:0; margin:2em auto 1em auto; width:220px;}
.gage::before{display: none;}
}