@charset "UTF-8";

@media screen and (min-width: 978px){
    .inner{ width: 980px; margin: 0 auto;}
    
}
/* ipad iphone横 Document */
@media screen and (min-width: 768px){
    body{ font-size: 15px;}
    .sp-view{ display: none;}
    .pc-view{ display: inline;}
    img{ width: auto;}
  
  .pd_top{ padding-top: 60px;}

    /*header*/
    #site-header-inner {height: 90px;}
    header h1{ width: 130px;}
    
    /*nav*/
    
    #sp-menu-block{ top:90px; left: auto; right: 0; width: auto;}
    #sp-menu-block-inner{ padding-left: 1em;}
    .g-nav-inner ul li a .fa{ padding-left: 1em;}

    /*container*/
    #container{ padding-bottom: 150px;}
    section + section{ padding: 150px 0 0;} 
    
    /*keyvisual*/
    .keyvis p.logo{ padding: 90px 0;}
    .keyvis p.cmnt,.index .sec01 .bd-box p{ font-size: 1em;}
    .keyvis p.cmnt{ text-align: center;}
    /*sec01*/
    .index .sec01{ padding: 90px 0 0;}
    .index .sec01 .bd-box{ padding: 2em 4em;}
    
    /*nav*/
    .sec-nav{ flex-wrap: nowrap; padding-top: 85px; justify-content: space-between;}
    .sec-nav::after{content: none;}
    .sec-nav > .nav a{ display: flex; align-items: center; font-size: 1.24em; padding: .5em 1em; line-height: 1.6;}
    .sec-nav > .nav a p.inttl{ padding-left: 2.44em;}
    /*pickup*/
    
    h2 span{ font-size: 15px;}
    .sec-pick .in a{ font-size: 1.25em; line-height: 2;}
    .sec-pick p.txt{ font-size: 15px; padding: 60px 0; text-align: center;}
    

    /*movie*/
    .movie{ width: 100%; margin: 0 auto;}
    .slick-dotted.slick-slider{ padding: 0;}
    
    .item {width: 560px; height: 300px; margin: 0 80px; text-align: center; background: #eee;}
    .item img {width: 100%;height: auto;}
    
    .slick-arrow{ overflow: hidden; z-index: 50; width: auto;}
    .slick-arrow:hover{ cursor: pointer;}
    .prev.slick-arrow{ left: 50%; margin-left: -340px;}
    .next.slick-arrow{ right: 50%; margin-right: -340px;}
    .slick-dots {width: 100%;}
    .slick-list{ padding: 0!important;}
    
    /*link*/
    .sec-link.inner{ width: 720px;}
    .sec-link > .in-flex{ flex-wrap: nowrap;}
    .sec-link > .in-flex a,.sec-link > .in-flex > p{ width: 30%; margin-bottom: 0;}
    .sec-link > .in-flex::after{ content: none;}
    
    /*footer*/
    footer p{ padding: 40px 0;}
    
/*===================
　UNDER
====================*/

    body.under{ padding-top: 50px;}
    .under section + section{ padding: 50px 0 0;}
    
    .min-w{ min-width: 87%;}
    
    .sec-udnav{ width: 100%; margin-left: 0; padding-left: 5px;}
    
    body.under h2 p.fs{ align-items: center;}
    body.under h2 span{ font-size: 1.55em;}
    body.under h2 span.num, body.under h2 span.en{ font-size: 2.4em;}
    
    body.under h3 span:nth-child(2){ font-size: 1.55em; line-height: 1.2;}
    body.under h3 span.number{ font-size: 2.5em;}
    
    .under #container{ margin:50px 0 0;}
    .under #container.page-movie{ margin-top: 0;}
    .under h3.va-top span:nth-child(2){ margin-top: -.25em; line-height: 1.6;}
    
    .sec-udnav a {display: inline-block; font-size: 1.05em; padding-bottom: 1.88em; letter-spacing: normal;}
    .sec-udnav a span{ border-bottom: none; border-left: 1px solid; border-right: 1px solid; padding: 0 1em; margin-left: -1px;}
    .sec-udnav a:nth-child(even) span{ border-right: 1px solid;}
    
    .gry-box{ border: 12px solid #d7d7d7; padding: 4em 3.2em 5em;}
    
    .rt-tag{font-size: .75em; top: 2em; right: 2em;}
    .answer{ padding-top: 65px;}
    .answer-head{padding-bottom: 65px;}
    .answer-head p:nth-child(2){ padding-left: 1.2em; font-size: 1em; letter-spacing: normal; line-height: 2.5;}
    .answer-head p.flx { display: flex;}
    .answer .cmnt, .answer .hikaku{ font-size: 1em;}
    span.inflx{ display: flex; margin-bottom: 0;}
    span.inflx > span:nth-child(1){ width: 4em;}
    
    body.p03 #q07 span.inflx > span:nth-child(1),body.p03 #q08 span.inflx > span:nth-child(1)
    ,body.p03 #q11 span.inflx > span:nth-child(1){ width: auto;}

    .graph{ background: none; padding: 0;}
     
   .answer-head p.inflex span{ display: block; width: auto;}
    .graph p + p, .graph02 p + p{ padding-top: 50px;}
    
    
    /*ranking*/
    
    .rankin{ padding: 60px 0 0;}
    body.under h3.rk{ font-size: 1.55em;}
    .rankin h4{ text-align: left;}
    .rankin > p:not(:last-child){ width: auto; margin-bottom: 80px;}
    .rankin > p:not(:last-child) img{ margin: -5% auto 0;}
  
  p.rank-cmnt{ font-size: 1em;}
    
    /*Pickup*/
    body.under .pickin h3{ font-size: 1.55em;}
    .top-cmnt{font-size: 1em; padding-bottom: 2em;}
    .pickin{padding: 3em 3.2em 3em;}
    
    /*movie*/
    .movie-key > h2{ width: auto;}
    .movie-key > h2 p{ margin: 40px 0 10px;}
    
    .page-movie h3{ padding-bottom: 1em;}
    .page-movie p.top-cmnt{ text-align: center; padding: 2em 0 3em;}
    .page-movie .gry-box{ width: 90%; margin: 0 auto;}
    

}