@charset "utf-8";
/* CSS Document */
#scene01{display: black;}
#scene02,#scene03,#scene04,#scene05,#scene06{display: none;}
#detail01.modal,#detail02.modal,#detail03.modal,#detail04.modal,#detail05.modal,#detail0601.modal,#detail0602.modal{display: none; position: fixed;}
#nav01_02,#nav01_03,#nav01_04,#nav01_05,#nav01_06{display: none;}

.modalvoice{flex-wrap: nowrap; }
.modalvoice p::before{ background-color: var(--paleorange);}

body.content01{background : repeating-linear-gradient(315deg,#f9dabb,#f9dabb 8px,#fde9c6 0,#fde9c6 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/content01/question.svg");}

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

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

.gage{width:11em; height: 2.42em; background-image: url("../img/content01/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; position: relative;}
.gage::before{background-image: url("../img/content01/icon.webp"); }
.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(6){margin-top: 0.3em;}
.gage li:nth-child(2),.gage li:nth-child(5){margin-top: -0.2em;}
.gage li:nth-child(3),.gage li:nth-child(4){margin-top: -0.4em; }

.flex{display:flex; justify-content:space-between; align-items:center; flex-wrap: wrap;}

.flex p{width: 70%;}
.flex img{margin: 0 1%; max-width: 300px; width: 28%; display: block;}

.trade{border-radius: 0.4em; padding: 0.5em; margin-top: 0.5em; display:flex; justify-content:space-between; align-items:center; flex-wrap: wrap;}
.abouttrade{flex: 1.7;}
.trade ul li{padding-left: 1em; position: relative;}
.trade ul li::before{content: "●"; margin: 0; position: absolute; left: 0px; top:0.2em; width:1em; height:1em; color: var(--blue);}

.tradevoice{font-size:0.8em; flex:1.3;}
.tradevoice p{margin: 1em; border-radius: 0.4em; padding: 0.5em; position: relative;}
.tradevoice p::before{content: ""; margin: 0; position: absolute; left: calc(50% - 0.5em); bottom: -0.9em; width:1em; height:1em; clip-path: polygon(0 0, 50% 100%, 100% 0); background-color: #fff; }
.tradevoice img{width: 5em; display: block; margin: 0 auto;}


/*** Portrait ***/
@media screen and (orientation: portrait) {
.modalvoice p::before{flex-wrap: wrap;}
.flex{display:block;}
.flex p{width: 100%;}
.flex img{margin: 10px auto; width: 300px; max-width: 50%; }

.trade{display: block; padding: 20px 10px;}
.abouttrade{flex: auto;}
.tradevoice{font-size:0.9em; flex:auto;}
.tradevoice img{width: 150px;}
}
@media screen and (max-width:480px) and (orientation: portrait) {.flex img{ width: 200px; max-width: 60%;  }.tradevoice img{width: 100px;}}