@charset "UTF-8";
/* reset */
html,body,header,h1,h2,h3,div,ul,li,ol,p{margin:0;padding:0;}
*,*::before,*::after{box-sizing:border-box;}

/* base */
*{color:#333333;font-size:4vw;}
#wrapper{max-width:100%;overflow:hidden;margin:auto;}

/* common */
img{vertical-align:bottom;max-width:100%;}
.red{color:#e50012;}
.yellow{color:#ffff00;}
.emph{font-weight:bold;font-size:1.4rem;}
.large{font-size:7vw;}
.huge{font-size:5.0rem;margin:-10% 0;}
a{color:#0000aa;}

/* header CSS */
header{padding:1% 2%;background:#ffffff;position:relative;z-index:10;max-width:100%;margin:0 auto;}
header *{background:#ffffff;}
header ul{display:flex;flex-flow:row wrap;max-width:100%;align-items:center;justify-content:space-between;list-style:none;}
header li a{margin:0 1%;}
header li.he_fl{display:flex;margin:10px 0;justify-content:space-around;}
header li.he_fl a{width:48%;}

/*for Mobile Browser only */
#comment{margin:4% 2%;max-width:96%;align-items:center;}
#comment img{max-width:35%;}
#comment div.message{background:#ffffff;position:relative;box-shadow:0 0 0 3px #ffffff;border-radius:10px;margin:3% 0;}
#comment div.message::before{content:"";display:block;width:50px;height:40px;position:absolute;top:7px;left:140px;border:6px solid #00135d;border-bottom:none;border-right:none;background:#ffffff;transform:translateY(-50%)rotate(-25deg)skewY(45deg);box-shadow:-2px -3px 0 2px #ffffff;z-index:99;}
div.background{border:4px solid #00135d;border-radius:10px;background:#ffffff;margin:0;padding:1%;position:relative;width:100%;height:100%;z-index:999;}
#comment div.background::before{content:"";display:block;width:50px;height:40px;position:absolute;top:9px;left:143px;background:#ffffff;transform:translateY(-50%)rotate(-25deg)skewY(45deg);}
#comment div.background p{z-index:9999;position:relative;background:#ffffff;color:#333333;}
#comment div.background p a{color:#0000aa;text-decoration:underline;background:#ffffff;}
#key_visual{display:flex;padding:1%;flex-flow:row wrap;}
#key_visual img,#key_visual .inner-explane{background:#ffffff;}
.inner-explane{position:relative;padding:1.5%;border-radius:10px 10px 0 0;border:1px solid #333333;margin:1% 0;}
#key_visual h1{background:#e50012;color:#ffffff;font-size:7vw;padding:1%;margin:1% auto;width:98%;height:30%;text-align:center;border-radius:10px 10px 0 0;}
.h1-supplement,.h1-supplement span,.term{color:#ffffff;}
.supplement{border:3px solid #e50012;max-width:80%;margin:0 auto;background:#ffffff;border-radius:10px;text-align:center;color:#333333;position:relative;z-index:9999;}
.supplement::before{content:"";border:3px solid #e50012;border-right:none;border-bottom:none;background:#ffffff;position:absolute;top:-5px;left:50%;width:20px;height:20px;transform:rotate(45deg)translateY(-50%);}
.supplement span{z-index:9999;position:relative;}
.visual{display:flex;flex-flow:row wrap;align-items:center;justify-content:space-around;width:98%;margin:1%;}
.capacity{background:#ffff00;border-radius:50px;padding:6% 0 0;margin:1% 1% 2%;font-weight:bold;display:flex;align-items:baseline;justify-content:center;width:100%;}
.capacity p{color:#333333;font-size:7vw;}
.capacity span{font-size:7vw;}
.capacity span.huge{font-size:5rem;}
.vr{writing-mode:vertical-rl;}
.inner-explane img{max-width:95%;}
.explane,.explane span{color:#e50012;font-weight:bold;}
.explane{font-size:9vw;width:98%;margin:2% 0 0;text-align:center;}
.term{width:96%;margin:3% auto;padding:2%;background:#00135d;border:3px solid #ffffff;font-size:1.4rem;}
.rule{width:98%;margin:auto;}
.rule dt{display:flex;align-items:center;margin:5% 0 0;}
.rule dt::before{content:"";display:block;background:#333333;width:0.8em;height:0.8em;margin:auto 1% auto;}
.rule dd{margin:0;padding:1%;display:flex;flex-flow:row wrap;align-items:center;justify-content:space-around;}
.rule dd a{color:#0000aa;}
.rule dd a.button{display:block;width:90%;height:100%;background:#1da1f2;border:1px solid #ffffff;box-shadow:0 0 0 3px #1da1f2;padding:2%;margin:4% auto 1%;border-radius:20px;text-decoration:none;text-align:center;font-weight:bold;color:#ffffff;}
.rule dd ol{margin:0;padding:0 0 0 1.5em;width:100%}
.rule dd ul{list-style:none;margin:0;width:100%;}
.rule dd ul li{text-indent:-1em;padding:0 0 0 1em;}
.rule dd li.note_a::before{content:"\30fb";}
.rule dd li.note_b::before{content:"\203b";}
footer{width:100%;margin:3% 0;}
#footer{background:#00135d;text-align:center;}
#footer img{max-width:100%;}
footer p{text-align:center;margin:0 auto 5%;font-size:3vw;}

/* only Hash Tag campaign */
.step_content{max-width:98%;margin:1% auto 40px;position:relative;}
.step_content::after{content:"";position:absolute;left:45%;bottom:-5%;width:50px;height:50px;background:linear-gradient(to top left,transparent 50%,#fed52b 50%,#e60012 60%) no-repeat top right / 50% 100%,linear-gradient(to top right,transparent 50%,#fed52b 50%,#e60012 60%) no-repeat top left / 50% 100%;}
.step_content:last-of-type{margin-bottom:1%;}
.step_content:last-of-type::after{content:none;}
.step img,.step svg{width:100%;}

.pc{display:none;}