@charset "UTF-8";
/* CSS Document */

/*  BASE  */
body{ width: 100%;
    /*font-family: "Noto Sans Japanese",'ヒラギノ角ゴシック','Hiragino Sans','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;*/font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif; font-size: 3.3vw;
    -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}

/*font*/
@font-face {
  font-family: "Hiragino Sans W9";
  src: local(HiraginoSans-W9);
}

@font-face {
  font-family: "Hiragino Sans W6";
  src: local(HiraginoSans-W6);
}

@media all and (min-width:769px) , print {

.sp {
  display: none!important;
}

}

img{ width: 100%; max-width: 100%; display: block;}

a{ color: inherit; text-decoration: none; opacity: 1.0; transition: .3s; cursor: pointer;}
a:hover{ opacity: .7;}

a.pagetop{position: fixed; bottom: 15vh; right: 0; background: #c8102e; color: #fff; width: 40px; height: 40px;
    display: flex; justify-content: center; align-items: center;z-index: 2;}
a.pagetop .fa{font-size: 30px; margin-top: -.1em;}

.sp-view{ display: inline;}
.pc-view{ display: none;}

.inner{ width: 95%; margin: 0 auto;}

h2{ color: #c8102e; text-align: center; font-size: 2.5em; font-family: 'Roboto',sans-serif;}
h2.jp{ font-size: 3em; letter-spacing: .025em;}
h2 span{ display: block; color: #000; font-size: 3.5vw; font-weight: normal; padding: 1em 0 2em; letter-spacing: -.025em; line-height: 2.8; text-align: center;}
body.under h3.rk,body.under h3.pk{font-family: 'Noto Sans JP', sans-serif; color: #c8102e; text-align: center; justify-content: center; font-size: 1.2em; line-height: 1.8; margin-top: -.5em;}

.in-flex{ display: flex;}
.pd_top{ padding-top: 2.5em;}

/*===================
　header
====================*/
header{ position: fixed; background: #fff; width: 100%; z-index: 999; box-shadow: 0 5px 5px rgba(0,0,0,0.1); display: flex; top: 0;}
#site-header-inner{ display: flex; width: 90%; margin: 0 auto; align-items: center; height: 70px;}

header h1{ width: 100px; margin-right: auto;}
header .sns{ display: flex; padding-right: 1em; width: 130px; justify-content: space-around;}
header .sns a{ width: 28%;}
/*nav*/
#sp-menu { width: 32px; height: 35px; cursor: pointer; text-align: center; z-index: 999;}
#sp-menu:hover{ opacity: .7;}
#sp-menu span { width: 100%; display: block; height: 5px; background: #c8102e; position: absolute;
    -webkit-transition: all .1s; transition: all .1s;  -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;}
#sp-menu.open span {  background: #c8102e; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;}

#sp-menu span:nth-child(1) { top: 8px;}
#sp-menu span:nth-child(2) { top: 20px;}

#sp-menu.open span:nth-child(1) { top: 16px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);}
#sp-menu.open span:nth-child(2) { top: 16px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);}

#sp-menu-block {display: none; position: fixed; width: 100%; background: rgba(0, 0, 0, .8);
left: 0; top: 70px; overflow: auto; z-index: 980;}
#sp-menu-block-inner { height: 100%; padding: 0 .88em; color: #fff;}
#sp-menu-block { display: none;}

/*g-nav*/
.g-nav-inner ul{ padding-bottom: 2em;}
.g-nav-inner ul li{ padding: .5em; border-bottom: 1px solid;}
.g-nav-inner ul li a,.g-nav-inner ul li > p{ font-size: 1.2em; padding: .25em 0; display: flex; align-items: center; font-weight: 600; line-height: 1.6;}
.g-nav-inner ul li a .fa{ padding-left: 1em;}
.g-nav-inner ul li a p{ padding-left: 2.5em;}
.g-nav-inner ul li a span{ position: absolute; left: 0;}

/*commingsoon*/
.g-nav-inner ul li > p{ color: #969696;}
.g-nav-inner ul li > p span{ padding-left: 1em;}

/*keyvisual*/
.keyvis p.logo{ display: flex; width: 90%; margin: 0 auto; justify-content: center; padding: 8vh 0;}
.keyvis p.cmnt{ text-align: justify; font-size: 3.6vw; line-height: 3; letter-spacing: -.04em; word-break: break-all;}

/*container*/

#container{ margin: 70px 0;}

section + section{ padding: 8vh 0 0;}
.bd-box{ border: 1px solid #b4b4b4;}

/*===================
　index
====================*/

/*sec01 調査概要*/
.index .sec01{ padding: 8vh 0 0;}
.index .sec01 .bd-box{ padding: 1.5em 1em;}
.index .sec01 .bd-box p{ font-size: .93em;}
.index .sec01 .bd-box h2{ font-size: 1.15em; text-align: left;}
.index .sec01 .bd-box h2 p::before{ content: "<"; padding-right: .5em; display: inline-block;}
.index .sec01 .bd-box h2 p::after{ content: ">"; padding-left: .5em; display: inline-block;}

.index .sec01 dl{ padding-top: 1em;}
.index .sec01 dd{ display: flex; padding: .25em 0; line-height: 2.5;}
.index .sec01 dd p:nth-child(1){ padding-right: 1em;}
.index .sec01 dd p:nth-child(1)::after{ content: ":"; position: absolute; right: 0;}
.index .sec01 dd p:nth-child(2){ width: 80%; padding-left: .5em;}

/*sec-nav*/
.sec-nav{ display: flex; flex-direction: column; justify-content: space-around; align-items: center;}
.sec-nav > .nav{ width: 100%; background: #f5f5f5; border: 10px solid #d7d7d7; margin-bottom: 1.5em;}

.sec-nav > .nav a{ display: flex; align-items: center; padding: 1.5em 1em; line-height: 2; font-weight: bold; font-size: 3.8vw;}
.sec-nav > .nav a p.num{ color: #c8102e; font-family: 'Roboto', sans-serif; font-weight: 900; font-size: 2em; text-align: center; }
.sec-nav > .nav a p.inttl{ padding-left: 1em; font-size: 1.44em; line-height: 1.4;}

/*Pickup*/
.sec-pick .in li:not(:last-child){ padding-bottom: 1em;}
.sec-pick .in a{ color: #c8102e; font-size: 1.08em; letter-spacing: .025em; text-decoration: underline; line-height: 1.6; font-weight: bold;}
.sec-pick p.txt{ font-weight: normal; padding: 4vh 0; text-align: center; line-height: 2.5;}

/*検証動画*/
.movie{ padding-top: 8vh; width: 95%; margin: 0 auto;}
.slick-dotted.slick-slider{ padding: 0 10%;}
.item{ width: 80vw; background: #eee; color: #000; text-align: center;}
.slick-arrow{ width: 5%; position: absolute; top: 50%; transform: translate(0,-50%);}
.prev.slick-arrow{left: 0;}
.next.slick-arrow{ right: 0;}

.slick-dots{ width: 80%; bottom: -40px;}
.slick-dots li button:before{font-size: 15px;}
.slick-dots li.slick-active button:before{ color: #c8102e; opacity: 1;}

/*link*/
.sec-link{ padding-top: 10vh;}
.sec-link > .in-flex{ justify-content: space-around;flex-wrap: wrap;}
.sec-link > .in-flex a,.sec-link > .in-flex p{ width: 45%; margin-bottom: 1.5em;}
.sec-link > .in-flex p > .soon{ position: absolute; width: 100%; height: 100%; display: block; z-index: 1;}
.sec-link > .in-flex::after{ content: ""; display: block; width: 45%;}

/*footer*/
footer{ background: #c8102e;}
footer p{ color: #fff; font-size: .65em; padding: 3em 0; text-align: center;}

/*===================
　UNDER
====================*/

body.under{ padding-top: 7.5vh;}
.under #container{ margin: 0 0 15vh;}
.under section + section{ padding: 6vh 0 0;}

body.under h2 {font-weight: normal; color: #000; font-size: 1em; text-align: left; padding: 2em 0 1em;}
body.under h2 p{display: flex; align-items: center;}
body.under h2 p.fs{ align-items: flex-start;}
body.under h2 span{ font-weight: bold; font-size: 1.25em; line-height: normal; padding: 0; text-align: left;}
body.under h2 span.num{font-family: 'Roboto',sans-serif; font-size: 2em; padding: 0 .5em 0 0; color: #c8102e; font-weight: 800;}
body.under h2 span.en{font-family: 'Roboto',sans-serif; font-size: 1.75em; padding: 0 .5em 0 0; color: #c8102e; font-weight: 800;}

body.under h3{ /*font-weight: 600;*/ display: flex; align-items: center; line-height: 1;}
body.under h3 span.number{ font-family: 'Hiragino Sans W6',sans-serif; font-size: 1.88em; color: #c8102e; padding-right: .35em; border-right: 1px solid #000; align-self: flex-start;}
body.under h3 span.center-red{ width: 100%; text-align: center; color: #c8102e; font-weight: 900; font-size: 1.16em;}

body.under h3 span:nth-child(2){ padding-left: .88em; font-size: 1.18em; line-height: 1.8; margin-top: -.25em;}
h3.va-top span:nth-child(2){ margin-top: -.5em;}

.sec-udnav{ width: 103%; padding: 1em 0 0; margin-left: -.3em;}
.sec-udnav a{ display: block; padding-bottom: 1em; font-weight: 900; color: #c8102e; font-family: 'Noto Sans JP', sans-serif; letter-spacing: -.025em}
.sec-udnav a span{ display: block; padding-bottom: .25em; border-bottom: 1px solid #c8102e; text-align: center; line-height: 1.6;}

.sec-udnav.nav-flex{ display: flex; flex-wrap: wrap;}
.sec-udnav.nav-flex a { width: 50%; margin-left: -1px;}
.sec-udnav.nav-flex a span{ border-bottom: none; border-left: 1px solid #c8102e;border-right: 1px solid #c8102e; letter-spacing: -.05em;}
.sec-udnav.nav-flex a.full{ width: 100%;}


/**/
.under .sec-q01{ padding-top:5vh;}
.gry-box{ background: #f5f5f5; border: 11px solid #d7d7d7; padding: 2.5em .9em 3.5em;}
.rt-tag{ position: absolute; top: 1em; right: 1em; font-size: .5em;}

.answer,.rankin{ padding-top: 4vh;}
p.rank-cmnt{ padding: 2.5em 0 0; font-size: 1.05em;}
p.rank-cmnt a{ color: -webkit-link; text-decoration: underline;}

.answer-head{ display: flex;font-weight: 700; padding-bottom: 4vh;}
.answer-head p:nth-child(1){font-family: 'Hiragino Sans W6',sans-serif; color: #c8102e; border-right: 1px solid #000;align-self: flex-start; padding-right: 1.3em; font-size: 1.15em;}
.answer-head p:nth-child(2){ font-size: .98em; padding-left: 1.1em; letter-spacing: -.025em; line-height: 2em; margin-top: -.5em;}
.answer-head p.flx span{ display: flex; flex-direction: column;}
span.inflx{ display: block; margin-bottom: 1em;}

.under.p03 #q05 .answer-head p.flx{ display: flex; flex-direction: row;}

.graph{ background: #fff; padding: 1.5em 1em;}
.graph p + p{ padding-top: 1em;}
.graph.flx{ display: flex; justify-content: space-between;}

.graph.flx > p{ width: 47%;}

.graph.flx p + p{ padding-top: 0;}
.answer p.inttl { display: flex; justify-content: space-between; align-items: center;}
.answer p.inttl span:first-child{ color: #c8102e; font-weight: 900;}
.answer p.inttl span:first-child::before{ content: "＜"; padding-right: .5em;}
.answer p.inttl span:first-child::after{ content: "＞"; padding-left: .5em;}
.answer p.inttl span:nth-child(2){ padding-right: 1em;}

.graph > dl{ margin: 1.5em 0 2.5em;}
.graph > dl dd{ padding-bottom: .88em; display: flex; align-items: center;}
.graph > dl dd p:nth-child(1){ width: 17%; font-weight: 700; letter-spacing: .05em; padding-right: 1em;}
.graph > dl dd p:nth-child(2){ width: 82%;}

.graph2 > dl{ margin: 1.5em 0 .5em;}
dl dd.list-nav{ flex-wrap: wrap; justify-content: flex-end; text-align: right; line-height: 1.3;}
dl dd.list-nav span{ padding-left: .5em; font-weight: normal; letter-spacing: normal; font-size: .88em;}
dl dd.list-nav span::before{ content: "■"; padding-right: 0;}

dl dd.list-nav span:nth-child(1)::before{ color: #c8102e;}
dl dd.list-nav span:nth-child(2)::before{ color: #00a000;}
dl dd.list-nav span:nth-child(3)::before{ color: #ffc800;}
dl dd.list-nav span:nth-child(4)::before{color: #0096ff;}
dl dd.list-nav span:nth-child(5)::before{color: #ff78c8;}
dl dd.list-nav span:nth-child(6)::before{color: #1455ff;}

dl dd.list-nav span.male::before{ color: #0096ff;}
dl dd.list-nav span.female::before{ color: #c8102e;}

.answer .cmnt,.answer .hikaku{ text-align: justify;line-height: 2; padding-top: 2.5em; font-size: 1.05em;}
.answer .hikaku { padding-top: 3.5em;}
.answer .hikaku span{font-family: 'Noto Sans JP', sans-serif; font-size: 1.1em; font-weight: 900; color: #c8102e; display: block; margin-bottom: 1em;}
.answer .hikaku a{ color: -webkit-link; text-decoration: underline;}


/*ランキング*/

.rankin h4{ text-align: center; font-family: 'Noto Sans JP', sans-serif; font-weight: 900; color: #c8102e; padding-bottom: 1em;}
.rankin h4::before{ content: "＜"; padding-right: .5em;}
.rankin h4::after{ content: "＞"; padding-left: .5em;}

.rankin > p{margin: .5em auto 0;}
.rankin > p:not(:last-child){ width: 75%; margin-bottom: 3em;}

/*ピックアップ*/
.top-cmnt{text-align: justify; font-size: 3.6vw; line-height: 3;}

.pickin{ padding-bottom: 2em;}
body.under .pickin h3{justify-content: center; text-align: center; font-size: 1.4em; font-family: 'Noto Sans JP', sans-serif; font-weight: 900; color: #c8102e; padding-bottom: .5em; line-height: 2;}
.pickin > p{ line-height: 2.5; text-align: center;}
.pickin a{ color: #0000ff; text-align: center; text-decoration: underline;}

/*movie*/
.movie-key{ background: #f5f5f5;display: flex; justify-content: center;}
.movie-key > h2{ width: 75%;}
.movie-key > h2 p{ margin: 2vh 0 1vh;}

p.movie-cmnt{ line-height: 2.5; text-align: center; padding: .88em 0;}

.page-movie p.top-cmnt{ padding: 1.5em 0 0; line-height: 2;}
.page-movie .gry-box{height: 0; overflow: hidden; border: none; padding: 0 0 56.25%;}
.page-movie .gry-box iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.page-movie h3{ justify-content: center; padding: 1em 0 0; font-family: 'Noto Sans JP', sans-serif; font-weight: 900; color: #c8102e;}
.page-movie h3::before{ content: "＜";}
.page-movie h3::after{ content: "＞";}
.page-movie .gry-box > img{
  width: 100%;
  vertical-align: middle;
}
.page-movie #q02 .gry-box,.page-movie #q03 .gry-box{
  background-color: #d7d7d7;
}

p.movie-cmnt > span.red{
  color: #c8102e;
}