/* Base Styles */
:root{
  --shadow:0 4px 8px 0 rgba(74,85,99,.2);
  --mainAnime:all .3s ease;
  --RED:#E50012;
  --DRED:#60141F;
  --LRED:#ffebee;
  --WHT:#ffffff;
  --BLK:#000;
  --GRY:#757575;
  --GRN:#00892E;
  --BLU:#1077CF;
  --bgLBLU:#E7F0F2;
  --spaceS:min(4vw,16px);
  --spaceM:min(8vw,32px);
  --spaceL:min(12vw,48px);
  --spaceXL:min(16vw,64px);
  --textShadow:0 2px 0 #E50012, 2px 0 0 #E50012, 0 -2px 0 #E50012, -2px 0 0 #E50012, -2px -2px 0 #E50012, 2px -2px 0 #E50012, -2px 2px 0 #E50012, 2px 2px 0 #E50012
}
/*----------------------------------------------- */
@font-face{font-family:'icomoon';src:url('../fonts/icomoon.eot?avaq3d');src:url('../fonts/icomoon.eot?avaq3d#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?avaq3d') format('truetype'),url('../fonts/icomoon.woff?avaq3d') format('woff'),url('../fonts/icomoon.svg?avaq3d#icomoon') format('svg');font-weight:normal;font-style:normal}
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
html{
  height:100%;
  scroll-behavior:smooth;
  line-height:1;
  -ms-text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
  font-size:62.5%;
}
body{
  padding:0;
  margin:0;
	font-family:"Helvetica Neue", "Helvetica", "Hiragino Sans", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-size:16px;
  font-size:1.6rem;
  line-height:1.6;
  color:var(--BLK);
  background-color:var(--WHT);
}
[class^="icon-"]::after, [class*="icon-"]::after,
#navToggle::before,.btn > span a::after{
  font-family:'icomoon' !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.icon-twitter::after,
.btn > span a.icon-twitter::after{content:"\e903";font-size:2em;}
.icon-blank::after{content:"\e904"}
.icon-spNav-open::after{content:"\e905"}
#navToggle::before{content:"\e905";font-size:24px}
.icon-spNav-close::after{content:"\e906"}
.open #navToggle::before{content:"\e906"}
.icon-home::after{content:"\e907"}
.icon-mail::after{content:"\e908"}
.icon-search-l::after{content:"\e909"}
.icon-pdf::after{content:"\e90c";color:#bf3030}
.icon-img::after{content:"\e90d"}
.icon-text::after{content:"\e90e"}
.icon-excel::after{content:"\e90f"}
.icon-word::after{content:"\e910";color:#2354b5}
.icon-access::after{content:"\e912"}
.icon-plus::after{content:"\ea0a"}
.icon-minus::after{content:"\ea0b"}
.icon-arrow-up::after{content:"\ea3a"}
.icon-arrow-right::after,.btn > span a::after{content:"\ea3c"}
.icon-arrow-down::after{content:"\ea3e"}
.icon-arrow-left::after{content:"\ea40"}
*,*:before,*:after{box-sizing:border-box}
.clearfix:before,.clearfix:after,#wrap:before,#wrap:after{display:table;content:""}
.clearfix:after,#wrap:after{clear:both}

/*----------------------------------------------- アクセシビリティ用 */
a{transition:var(--mainAnime)}
a:hover img{opacity:.7;}
.noScript, a.skip{text-align:center}
.skip, a.skip{background-color:#FFF}
.skip{width:1px;color:var(--BLK);font-size:.1%;line-height:.1;position:absolute;left:-3000px;z-index:9999}
a.skip{padding:2px 0;top:auto}
a.skip:active, a.skip:focus,a.skipShow{position:relative;display:block;width:99.99%;left:auto;background:var(--BLK);color:#FFF;font-size:100%;line-height:1.6}
:focus{outline:3px solid var(--DRED);outline-offset:2px;}

/*----------------------------------------------- base*/
.container{
  position:relative;
  margin:0 var(--spaceS);
}
img{
  border-style:none;
  border:0;
  vertical-align:middle;
  max-width:100%;
  height:auto
}
p{margin-bottom:1em;}
.fontS{font-size:.875em;}
.textC{text-align:center;}
.textR{text-align:right;}
.textL{text-align:left;}
.mb0{margin-bottom:0;}
.mb1em{margin-bottom:1em;}
.btn{
  max-width:24em;
  position:relative;
  z-index:1;
  margin:0 auto 1em;
}
.btn::before,.btn::after{
  position:absolute;
  content:"";
  z-index:2;
  width:26px;
  height:26px;
  transition:var(--mainAnime)
}
.btn::before{
  border-left:solid 8px var(--RED);
  border-bottom:solid 8px var(--RED);
  bottom:-4px;
  left:-4px;
}
.btn::after{
  border-right:solid 8px var(--RED);
  border-top:solid 8px var(--RED);
  top:-4px;
  right:-4px;
}
.btn span{
  display:block;
  position:relative;
  width:100%;
}
.btn span::before,.btn span::after{
  position:absolute;
  content:"";
  z-index:2;
  width:26px;
  height:26px;
  transition:var(--mainAnime)
}
.btn span::before{
  border-left:solid 8px var(--RED);
  border-top:solid 8px var(--RED);
  top:-4px;
  left:-4px;
}
.btn span::after{
  border-right:solid 8px var(--RED);
  border-bottom:solid 8px var(--RED);
  bottom:-4px;
  right:-4px;
}
.btn:hover::before,
.btn:hover::after,
.btn > span:hover::before,
.btn > span:hover::after{
  width:40px;
  height:40px;
}
.btn a{
  display:flex;
  flex-wrap:wrap;
  align-content:center;
  position:relative;
  min-height:90px;
  padding:1em 2.8em 1em 2em;
  border:2px solid var(--RED);
  background-color:#FFF;
  color:var(--RED);
  font-weight:bold;
  text-decoration:none;
  transition:var(--mainAnime)
}
.btn > span a::after{
  transition:var(--mainAnime);
  position:absolute;
  top:calc(50% - .5em);
  right:.8em;
}
.btn > span a:hover::after{
  transform:translateX(10px);
}
.btn a::before{
  content:"";
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  bottom:-10px;
  right:-10px;
  z-index:-1;
  background-color:rgba(0,0,0,.1);
}
.btn a:hover img{
  opacity:1;
}
header{
  border-top:6px solid var(--RED);
  min-height:12px;
  background-image:url(../img/bg_stripe.jpg);
  background-repeat:repeat-x;
  background-position:top center;
  background-size:auto 6px;
}
.navWrap ul{
  list-style:none;
  padding:0;
  margin:0;
}
.footer{
  background-color:var(--RED);
  color:var(--WHT);
  padding:0;
}
.footer p{
  margin-bottom:0;
}
.footContent .container{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
}
.footLogo{
  width:calc(100% - 10em);
  max-width:160px;
  margin-bottom:var(--spaceS)
}
.footLink{
  width:10em;
  margin-bottom:var(--spaceS);
  text-align:right;
}
.footLink a{
  display:inline-block;
  padding:.3em .5em;
  border:1px solid var(--WHT);
  color:var(--WHT);
  text-decoration:none;
}
.footLink a::after{
  margin-left:4px;
}
.footLink a:hover{
  background:#970000;
}
.footInfo{
  margin-bottom:var(--spaceS)
}
.footCopyright{
  padding:8px;
  background:#333;
  font-size:.875em;
  text-align:center;
}

/* グリッドレイアウト */
.colGroup{
	position:relative;
	display:flex;
	flex-wrap:wrap
}
[class^="col-"]{
	position:relative;
	min-height:1px;
	overflow:hidden;
}
.col-sp1{width:8.33333%}
.col-sp2{width:16.66667%}
.col-sp3{width:25%}
.col-sp4{width:33.33333%}
.col-sp5{width:41.66667%}
.col-sp6{width:50%}
.col-sp7{width:58.33333%}
.col-sp8{width:66.66667%}
.col-sp9{width:75%}
.col-sp10{width:83.33333%}
.col-sp11{width:91.66667%}
.col-sp12{width:100%}

table{margin-bottom:1em;border-spacing:0;border-collapse:collapse;border:1px #B1B1B1 solid}
td, th{padding:.5em .5em .4em;;vertical-align:top}
td{border:1px #B1B1B1 solid;background:#FFF}
th{border:1px #B1B1B1 solid;background:#EAEAEA;}
.noDeco{border:none;background:none}
.noDeco td,.noDeco th{border:none;background:none;padding:0 .5em .2em 0;text-align:left;font-weight:normal}

/*SP Only*/
@media screen and (max-width:576px){
  .forPC, .forTB, .hiddenSP{display:none}
  .colGroup{margin-right:-5px;margin-left:-5px}
  [class^="col-"]{padding-right:5px;padding-left:5px}
  .tableBlock th,.tableBlock td{display:block;width:100%;border:none;border-bottom:1px #B1B1B1 solid}
	.tableBlock{border-bottom:none}
}
/*TB Only*/
@media screen and (min-width:768px) and (max-width:1023px){
  .forSP, .forPC, .hiddenTB{display:none}
}
/*SP+TB Only*/
@media screen and (max-width:1023px){
  #navToggle{
    display:none;
    position:fixed;top:calc(12px + var(--spaceS));right:10px;
    z-index:1001;
    display:flex;
    flex-wrap:wrap;
    align-content:center;
    justify-content:center;
    width:64px;
    height:calc(64px*104/120);
    background:url(../img/bg_hexagonRED.svg) no-repeat 50% 50%/cover;
    transition:var(--mainAnime);
    color:var(--WHT);
    font-size:.6em;
    text-shadow:var(--textShadow);
  }
  #navToggle span{
    display:block;
    width:4.5em;
    margin-top:3px;
    text-align:center;
    font-weight:bold;
    line-height:1
  }
  .fixed #navToggle{
    height:50px;
    padding:8px 10px;
    background:none;
    box-shadow:none
  }
  .fixed #navToggle span{
    display:none
  }
  #navToggle.active{
    background-image:url(../img/bg_hexagonWHT.svg);
    color:var(--RED)
  }
  .navWrap{
    display:none;
    background-color:var(--RED);
  }
  body.open{
    overflow:hidden;
  }
  .open .navWrap{
    position:relative;
    z-index:1000;
    display:flex;
    flex-wrap:wrap;
    align-content:center;
    justify-content:center;
    position:fixed;
    width:100%;
    height:100%;
    top:0;left:0;right:0;bottom:0;
  }
  .navWrap ul li{
    padding:16px 16px 24px;
    background:url(../img/dotWHT.svg) repeat-x 0 100% /8px auto;
    text-align:center;
  }
  .navWrap ul li a{
    text-decoration:none;
    color:#FFF;
    font-weight:bold;
  }
}
/*TB Over*/
@media screen and (min-width:768px){
  .colGroup{margin-right:-8px;margin-left:-8px}
  [class^="col-"]{padding-right:8px;padding-left:8px}
  .col-tb1{width:8.33333%}
  .col-tb2{width:16.66667%}
  .col-tb3{width:25%}
  .col-tb4{width:33.33333%}
  .col-tb5{width:41.66667%}
  .col-tb6{width:50%}
  .col-tb7{width:58.33333%}
  .col-tb8{width:66.66667%}
  .col-tb9{width:75%}
  .col-tb10{width:83.33333%}
  .col-tb11{width:91.66667%}
  .col-tb12{width:100%}
  .btn a{
    padding-top:.8em;
    padding-bottom:.8em;
  }
  .container{
    width:calc(100% - var(--spaceM)*2);
    max-width:1040px;
    margin:0 auto;
    padding:0
  }
  .homeSiteName .container,.homeBnr .container{
    max-width:1200px;
  }
  .footLogo{
    max-width:200px;
    width:200px;
  }
  .footLink{
    margin-bottom:0;
  }
  .footInfo{
    width:100%;
  }
}
/*PC Over*/
@media screen and (min-width:1024px){
  .forSP, .forTB, .hiddenPC{display:none}
  .colGroup{margin-right:-12px;margin-left:-12px}
  [class^="col-"]{padding-right:12px;padding-left:12px}
  .col-pc1{width:8.33333%}
  .col-pc2{width:16.66667%}
  .col-pc3{width:25%}
  .col-pc4{width:33.33333%}
  .col-pc5{width:41.66667%}
  .col-pc6{width:50%}
  .col-pc7{width:58.33333%}
  .col-pc8{width:66.66667%}
  .col-pc9{width:75%}
  .col-pc10{width:83.33333%}
  .col-pc11{width:91.66667%}
  .col-pc12{width:100%}
  .btn a{
    padding-right:4.5em;
    padding-left:2.5em;
    font-size:1.2em;
  }
  .btn > span a::after{
    right:2em;
  }
  header{
    padding-top:8px;
    padding-bottom:8px;
    border-bottom:8px solid var(--RED);
    min-height:16px;
    background-image:url(../img/bg_stripe.jpg),url(../img/bg_stripe.jpg);
    background-position:top center,bottom;
  }
  #navToggle{display:none;}
  .navWrap ul{
    display:flex;
    justify-content:center;
  }
  .navWrap ul li{
    width:calc(100%/6);
  }
  .navWrap ul li a{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
    padding:10px 5px;
    margin-right:8px;
    border-radius:8px;
    color:var(--RED);
    text-decoration:none;
    font-weight:bold;
    text-align:center;
    line-height:1.3;
    transition:var(--mainAnime)
  }
  .navWrap ul li a::after{
    display:block;
    content:"";
    position:absolute;
    top:calc(50% - 20px);right:-8px;
    width:8px;
    height:40px;
    background:url(../img/dotRED.svg) repeat-y top right/100% auto;
  }
  .navWrap ul li:last-of-type a{
    margin-right:0;
  }
  .navWrap ul li:last-of-type a::after{
    display:none
  }
  .navWrap ul li a:hover{
    animation:var(--mainAnime);
    background:var(--RED);
    color:var(--WHT);
  }
  .about .navWrap ul li.nav01 a,
  .manga .navWrap ul li.nav02 a,
  .zukai .navWrap ul li.nav03 a,
  .check .navWrap ul li.nav04 a,
  .support .navWrap ul li.nav05 a,
  .questionnaire .navWrap ul li.nav06 a{
    background:var(--RED);
    color:var(--WHT);
  }
  .footLogo{
    margin-bottom:0;
  }
  .footLink{
    order:1;
  }
  .footInfo{
    padding-left:var(--spaceM);
    margin-bottom:0;
    width:calc(100% - 200px - 10em);
  }
}

/*----------------------------------------------- home*/
#home main{
  background:var(--bgLBLU);
}
.homeSiteName{
  background:var(--WHT);
  padding-bottom:var(--spaceS);
}
.homeSiteName h1{
  max-width:calc(490px + calc(64px + var(--spaceS)));
  padding:var(--spaceS) calc(64px + var(--spaceS)) var(--spaceS) 0;
}
.homeSiteName h1 a{
  color:var(--RED);
  text-decoration:none;
}
.homeSiteName h1 a span{
  display:block;
  padding:var(--spaceS) 0 0;
  font-size:min(4.6vw,.85em);
  text-align:center;
}
.homeSiteName h1 a:hover span{
  opacity:.7;
}
.homeBnr{
  background:var(--bgLBLU);
  padding:var(--spaceS) 0 var(--spaceM);
}
.homeBnrBalloon{
  max-width:32em;
  padding:0 10px 5px 0;
  text-align:right;
  font-size:min(4vw,1em);
}
.homeBnrBalloon::before,.homeBnrBalloon::after{
  display:inline-block;
  content:"";
  width:2px;
  height:12px;
  background:var(--BLK);
}
.homeBnrBalloon::before{
  margin-right:10px;
  transform:rotate(-30deg);
}
.homeBnrBalloon::after{
  margin-left:10px;
  transform:rotate(30deg);
}
.homeBnr-box .btn{
  max-width:32em;
  margin-left:auto;
  margin-right:auto;
}
.homeBnr-box .btn a{
  padding-left:100px;
}
.homeBnr02 a{
  margin-top:2em;
}
.homeBnr-box .homebnrImg{
  position:absolute;
  z-index:2;
  top:-30px;
  left:0;
}
.homeManga .homeCopyright{
  margin:8px 0 0 ;
  font-size:min(3vw,.75em);
  text-align:right;
}

/*SP Only*/
@media screen and (max-width:576px){}
/*TB Only*/
@media screen and (min-width:768px) and (max-width:1023px){
}
/*TB Over*/
@media screen and (min-width:768px){
  .homeSiteName{
    padding-bottom:0;
  }
  .homeManga{
    position:absolute;
    right:0;
    margin-top:var(--spaceM);
    z-index:1;
    width:48%;
  }
  .homeBnr{
    padding:var(--spaceM) 0;
    margin-top:0;
    min-height:calc(48vw + var(--spaceS) + var(--spaceM))
  }
  .homeBnr .homeBnr-box{
    width:45%;
  }
  .homeBnrBalloon{
    text-align:center
  }
}
/*PC Over*/
@media screen and (min-width:1024px){
  .homeManga{
    top:var(--spaceL);
    margin-top:0
  }  
  .homeSiteName h1{
    width:45%;
    padding:var(--spaceL) 0 var(--spaceM)
  }
  .homeSiteName h1 a img{
    padding:0;
  }
  .homeSiteName h1 a span{
    padding:var(--spaceS) 0 0 0;
  }
  .homeBnr{
    min-height:auto;
  }
  .homeBnr-box .btn a{
    padding-left:120px
  }
  .homeBnr-box .homebnrImg{
    left:10px;
  }
}
/*----------------------------------------------- subapge*/
#subpage h1{
  max-width:calc(320px + calc(64px + var(--spaceS)*2) + var(--spaceS));
  padding:calc(6px + var(--spaceS)) calc(64px + var(--spaceS)*2) var(--spaceS) var(--spaceS);
}
#subpage h1 a{
  color:var(--RED);
  text-decoration:none;
}
#subpage h1 a span{
  display:block;
  padding:min(1vw,8px) 0 0;
  font-size:min(4.6vw,.5em);
  text-align:center;
}
#subpage h1 a:hover span{
  opacity:.7;
}
#subpage main{
  padding:var(--spaceS) 0;
  background:var(--bgLBLU);
}
#subpage main h2{
  margin-bottom:var(--spaceM);
  color:var(--RED);
  text-align:center;
  line-height:1.4;
  font-size:min(7vw,2.5em);
}
#subpage main h2 > span{
  text-decoration:underline;
  text-decoration-thickness:.5em;
  text-decoration-color:rgba(255,200,189,.6);
  text-underline-offset:-.15em;
  text-decoration-skip-ink:none;
}
#subpage main h2 > span .fontS{
  font-size:.625em;
}
#subpage main h3{
  margin-bottom:.2em;
  color:var(--RED);
  font-size:1.3em;
}
#subpage main .container{
  padding:var(--spaceM) var(--spaceS) var(--spaceS);
  background:url(../img/bg_note.svg) repeat #FFF top left/75px auto;
  box-shadow:var(--shadow);
}
#subpage main .box{
  margin-bottom:var(--spaceM);
}
#subpage main ul{
  padding-left:1.5em;
}
/*SP+TB Only*/
@media screen and (max-width:1023px){

}
/*TB Only*/
@media screen and (min-width:768px) and (max-width:1023px){
  #subpage h1{
    padding-left:var(--spaceM);
  }
}
/*TB Over*/
@media screen and (min-width:768px){
  #subpage main{
    padding:var(--spaceM) 0;
  }
  #subpage main .container{
    padding:var(--spaceL) var(--spaceM) var(--spaceM);
  }
}
/*PC Over*/
@media screen and (min-width:1024px){
  #subpage header h1{
    position:absolute;
    top:0;left:8px;
    display:flex;
    align-items:center;
    width:18vw;
    height:9vw;
    max-height:110px;
    padding:20px var(--spaceS);
    background:var(--WHT);
    box-shadow:var(--shadow);
  }
  #subpage h1 img{
    max-width:100%;
  }
  #subpage h1 a span{
    font-size:min(.95vw,.5em);
    
  }
  #subpage main{
    padding:var(--spaceXL) 0;
  }
  #subpage #gNav{
    padding-left:calc(18vw + 16px)
  }
  #subpage main .container{
    padding:var(--spaceL);
  }
}
/*----------------------------------------------- about*/
.aboutCharacter{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  max-width:23em;
  margin-left:auto;
  margin-right:auto;
}
.aboutCharacter dt{
  width:calc(100% - 9.5em)
}
.aboutCharacter dd{
  width:9.5em;
  position:relative;
  display:inline-block;
  padding:.5em;
  background:#FFF;
  border:solid 3px #555;
  border-radius:8px;
  margin-top:30px;
}
.aboutCharacter dd:before{
  content:"";
  position:absolute;
  top:50%;
  left:-12px;
  margin-top:-6px;
  border:6px solid transparent;
  border-right:6px solid #FFF;
  z-index:2;
}
.aboutCharacter dd:after{
  content:"";
  position:absolute;
  top:50%;
  left:-17px;
  margin-top:-7px;
  border:7px solid transparent;
  border-right:7px solid #555;
  z-index:1;
}

/*----------------------------------------------- manga*/
.mangaTop{
  max-width:40em;
  padding:var(--spaceS) var(--spaceS) 8px;
  border:10px solid var(--LRED);
  background-color:#FFF;
  margin-left:auto;
  margin-right:auto;
}
.mangaCont .mangaContImg{
  max-width:700px;
  border:3px solid var(--BLK);
  margin:0 auto;
}
.marker{
  background:linear-gradient(transparent 50%, rgba(255,255,50,.9) 50%);
  display:inline;
  padding:0 0 4px;
  background-repeat:no-repeat;
  background-size:0% 100%;
  transition:background-size 1.5s;
  font-weight:bold;
}
.marker.on{
  background-size:100% 100%;
}
.mangaTaima01 .marker{
  display:inline-block;
  margin-right:1em;
}
.mangaSoudan{
  max-width:50em;
  padding:var(--spaceS) var(--spaceS) 8px;
  border:10px solid var(--LRED);
  background-color:#FFF;
  margin-left:auto;
  margin-right:auto;
}
.mangaContTtl{
  margin-bottom:var(--spaceS);
}
.mangaCTtl-Img{
  width:120px;
  padding:0 16px 10px 0;
}
.mangaCTtl-Img img{
  width:100px;
}
#subpage main .mangaContTtl h3{
  display:flex;
  flex-wrap:wrap;
  position:relative;
  padding:var(--spaceS);
  border-radius:12px;
  background:var(--RED);
  color:#FFF;
  font-size:min(4.3vw,1.2em);
}
.mangaContTtl h3::after{
  content:"";
  position:absolute;
  border:10px solid transparent;
  top:-24px;
  left:50px;
  transform:rotate(-30deg);
  border-bottom:22px solid var(--RED); 
}
.mangaNav{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  margin-top:var(--spaceM);
}
.mangaNav li{
  width:100%;
  max-width:16em;
  margin:0 auto .5em
}
.mangaNav a{
  display:block;
  padding:.5em 1em;
  background-color:var(--RED);
  color:var(--WHT);
  border-radius:5px;
  cursor:pointer;
  text-align:center;
  transition:var(--mainAnime);
  text-decoration:none;
}
.mangaNav a:hover{
  background-color:var(--DRED)
}
/*TB Over*/
@media screen and (min-width:768px){
  .mangaSoudan{
    text-align:center;
  }
  .mangaContTtl{
    display:flex;
    justify-content:flex-start;
    align-items:flex-start;
  }
  .mangaContTtl h3::after{
    top:16px;
    left:-24px;
    transform:rotate(0deg);
    border-bottom:10px solid transparent; 
    border-right:22px solid var(--RED);
  } 
}
/*----------------------------------------------- question*/
.question{
  position:relative;
}
.check .question{
  display:none;
}
.check .question.active{
  display:block
}
.questionnaire dl{
  margin-bottom:1em;
}
.questionnaire .question{
  margin-bottom:1em;
}
.question dt{
  display:flex;
  align-items:center;
  justify-content:center;
  background:url(../img/bg_hexagonRED.svg) no-repeat left center;
  margin-bottom:8px;
  font-weight:bold;
  color:var(--WHT);
  text-align:center
}
.check .question dt{
  width:6rem;
  height:5rem;
  font-size:2em;
  text-shadow:var(--textShadow);
}
.questionnaire .question dt{
  width:3.6rem;
  height:3rem;
  font-size:1.2em;
  text-shadow:var(--textShadow);
}

.question dd{
  font-weight:bold;
  font-size:1.3em;
}
.quizFormImg{
  margin-bottom:1em;
  text-align:right;
}
.quizFormImg img{
  width:80%;
  max-width:180px;
}
.question h3{color:#B1B1B1;margin-top:0}
#subpage main .question ul{
  display:flex;
  flex-wrap:wrap;
  list-style:none;
  padding:0;
  margin:0 -8px;
}
.option-label{
  width:100%;
  padding:0 8px;
  margin-bottom:10px;
  cursor:pointer;
}
.option-label > span{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  height:100%;
  padding:.5em 1em;
  background-color:#FFF;
  text-align:center;
  font-weight:bold;
  border:1px solid var(--RED);
}
.check .option-label > span{
  font-size:1.2em;
}
.option-label > span::before{
  margin-right:.5em;
}
.option-label .icon-check-01{
  border:1px solid #ed7000;
  color:#ed7000;
}
.option-label .icon-check-02{
  border:1px solid #3791f4;
  color:#3791f4;
}
.option-label .icon-check-03{
  border:1px solid #666;
  color:#666
}
.option-label:hover .icon-check-01{
  background-color:#FDF1E6
}
.option-label:hover .icon-check-02{
  background-color:#EBF4FE
}
.option-label:hover .icon-check-03{
  background-color:#F0F0F0
}
.option-label.selected .icon-check-01{
  background-color:#ed7000;
}
.option-label.selected > span{
  color:var(--WHT);
  background-color:var(--RED);
}
.option-label.selected .icon-check-02{
  background-color:#3791f4;
}
.option-label.selected .icon-check-03{
  background-color:#666
}
.question .answer{
  display:none;
}
#errorMessage{
  color:var(--RED);
  display:none;
  margin-bottom:1em;
  font-weight:bold;
}
.questionnaire #errorMessage{
}
.nav-buttons{
  display:flex;
  margin-top:var(--spaceM)
}
.check .nav-buttons{
  justify-content:space-between;
}
.questionnaire .nav-buttons{
  justify-content:center
}
.nav-buttons div{
  padding:.5em 1em;
  background-color:var(--RED);
  color:var(--WHT);
  border-radius:5px;
  cursor:pointer;
  text-align:center;
  transition:var(--mainAnime)
}
.nav-buttons div:hover{
  background-color:var(--DRED)
}
.nav-buttons #submitButton{
  font-weight:bold;
}
.nav-buttons #prevButton.hidden{
  visibility:hidden
}
#subpage main h3.quizTtl{
  margin-bottom:0;
  text-align:center;
}
.rank{
  font-size:min(10vw,5em);
  font-weight:bold;
  color:var(--RED);
  text-align:center;
}
#quiz-rank{
  display:block;
}
.stats{
  text-align:center;
}
.correct-answers-area{
  margin:var(--spaceM) 0;
  padding:var(--spaceM);
  background-color:var(--bgLBLU);
}
.correct-answers-area h4{
  text-align:center;
}
#subpage main ul#correct-list{
  list-style:none;
  padding:0;
  margin:0
}
#correct-list .icon-check-01{
  font-weight:bold;
  color:var(--RED);
}
#correct-list .icon-check-02{
  font-weight:bold;
  color:var(--BLU);
}
#correct-list li{margin-bottom:15px;padding-bottom:10px;border-bottom:1px dotted #ccc}
#correct-list li p{margin:5px 0;}
/*SP Only*/
@media screen and (max-width:576px){

}
/*TB Over*/
@media screen and (min-width:768px){
  .question dl{
    display:flex;
    flex-wrap:wrap;
    align-items:center; 
    width:100%;
    margin-bottom:2em;
  }
  .check .question dl{
    width:calc(100% - 170px);
    min-height:140px;
  }
  .question dt{
    background:url(../img/bg_hexagonRED.svg) no-repeat center center;
  }
  .question dd{
    width:calc(100% - 6rem);
    padding-left:1rem;
  }
  .check .question dd{
    font-size:2em;
  }
  .option-label{
    margin-bottom:16px;
  }
  .option-label{
    width:33.333333%;
  }
  .quizFormImg{
    width:280px;
    position:absolute;
    top:-80px;right:-64px;
    text-align:center;
  }
  .quizFormImg img{
    width:100%;
    max-width:100%;
  }
  .rank{
    position:relative;
  }
  #quiz-rankImg{
    position:absolute;
    top:-.2em;left:-80px;
  }
  #errorMessage{
    color:var(--RED);
    text-align:center;
  }
}
/*PC Over*/
@media screen and (min-width:1024px){
  #quiz-rankImg{
    left:0
  }
}

.forBG{display:none}