/*! sanitize.css v5.0.0 | CC0 License | github.com/jonathantneal/sanitize.css */
*,:before,:after{background-repeat:no-repeat;box-sizing:inherit}:before,:after{text-decoration:inherit;vertical-align:inherit}html{box-sizing:border-box;cursor:default;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,footer,header,nav,section{display:block}body{margin:0}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}nav ol,nav ul{list-style:none}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg{fill:currentColor}svg:not(:root){overflow:hidden}table{border-collapse:collapse}button,input,optgroup,select,textarea{margin:0}button,input,select,textarea{background-color:transparent;color:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto;resize:vertical}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}a,area,button,input,label,select,summary,textarea,[tabindex]{-ms-touch-action:manipulation;touch-action:manipulation}[hidden]{display:none}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);display:inherit;position:absolute}[aria-disabled]{cursor:default}@keyframes show{0%{opacity:0}100%{opacity:1}}@keyframes hide{0%{opacity:1}100%{opacity:0}}
/* ===============================================================================
Body Setting
=============================================================================== */  
html {
    font-size: 62.5%;
    width: 100%
}
body {
    position: relative;
    width: 100%
}
html, body {
    min-width: 100%;
    height: 100%;
}
a {
    text-decoration: none;
    word-break: break-all;
}
a:hover {
    opacity: .7;
}
h1, h2, h3, h4, h5, h6, div, p, ul, ol, li, dd, small {
    margin: 0;
    padding: 0;
    font-size: 1.6rem;
    line-height: 2;
    letter-spacing: .1em;
    color: #000;
    font-family: Koburina Gothic W3 JIS2004, sans-serif;
    list-style-type: none;
}
h1, h2, h3, h4, h5, h6 {
    font-family: Koburina Gothic W6 JIS2004, sans-serif;
}
#bg_v{
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
  z-index: -2;
}
#bg_v iframe{
  box-sizing: border-box;
  height: 56.25vw;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 177.77777778vh;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}
#bg{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
 /*   background-image: url(../img/bg_pre.jpg); */
    background-size: cover;
    background-position: center center;
    z-index: 0;
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    opacity: 0;
}
#bg.bg_sp{ background-image: url(../img/bg_pre.jpg);}
#bg.bg2{ background-image: url(../img/bg_org.jpg);}
#bg.bg3{ background-image: url(../img/bg_org2.jpg);}
#bg.bg4{ background-image: url(../img/bg_t.jpg);}
#bg.bg5{ background-image: url(../img/bg_w.jpg);}
#bg.bg6{ background-image: url(../img/bg_f.jpg);}
#bg.bg7{ background-image: url(../img/bg_m.jpg);}
.active{ opacity: 1 !important; }
.js_isTablet #bg_v{
  display: none;
}
.js_isTablet #bg.bg_sp{
  background-image: url(../img/bg_pre.jpg);
  opacity: 1;
  z-index: -2;
}
@media screen and (max-width: 640px){
  #bg_v{
    display: none;
  }
  #bg.bg_sp{
    background-image: url(../img/bg_pre_sp.jpg);
    opacity: 1;
    z-index: -2;
  }
  #bg.bg2{ background-image: url(../img/bg_org_sp.jpg);}
  #bg.bg3{ background-image: url(../img/bg_org2_sp.jpg);}
  #bg.bg4{ background-image: url(../img/bg_t_sp.jpg);}
  #bg.bg5{ background-image: url(../img/bg_w_sp.jpg);}
  #bg.bg6{ background-image: url(../img/bg_f_sp.jpg);}
  #bg.bg7{ background-image: url(../img/bg_m_sp.jpg);}
}

/* ===============================================================================
HeaderArea
=============================================================================== */
/*
.head {
    width: 100%;
    height: 100%;
    background: #756E52;    
}
.head__contents {
    background: #fff;
}
.head__contents div{
    width: 95%;
    max-width: 1000px;
    height: 90px;
    margin: 0 auto;
    position: relative;
}
.head__contents h1.logo-o2{
    position: absolute;
    top: 8px;
    left: 0;
    background-image: url(../img/logo-o2.png);
    background-size: contain;
    background-position: center center;
    width: 45.622px;
    height: 70px;
    text-indent: -9999px;
}
.head__contents p{
    position: absolute;
    top: 11px;
    right: 0;
}
.head .video{
    max-width: 1000px;
    margin: 0 auto;
}*/
/* ===============================================================================
ItemArea
=============================================================================== */
.hide{
  opacity: 0;
}
.arrow {
  display: block;
  width: 6.0765191297824vh;
  max-width: 81px;
  height: 6.0765191297824vh;
  max-height: 81px;
  position: absolute;
  bottom: 0;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
}
.arrow img {
  width: 100%
} 
.spOnly{
  display: none;
}
.item {
    width: 100%;
    padding-top: 0;
    position: relative
}
.item h3{
    font-size: 2.8rem;
    line-height: 1.4;
    font-feature-settings: "palt";
    padding-bottom: 30px;
}
.item h3 span{
    font-size: 1.8rem;
}
.item-0 {
  height: 100%;
  padding-top: 0;
}
.logo-o2 {
  position: absolute;
  left: 50%;
  top: 50%;
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  background-image: url(../img/logo-o2.png);
  background-size: contain;
  background-position: center center;
  width: 39.2vw;
  height: 62vh;
}
.item-v{
  height: 100%;
}
iframe{
/*  position: absolute;
  left: 50%;
  top: 50%;
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);*/
  width: 100%;
  height: 100%;
}
.item h2{
  text-align: center;
  padding: 90px 0 130px;
}
.item-1,
.item-4{
    height: 100%;
}
.item-1 p,
.item-2 p,
.item-3 p,
.item-4 p{
  font-family: Koburina Gothic W6 JIS2004, sans-serif;
  font-size: 1.8rem;
  letter-spacing: .09rem;
}
.item-1 div,
.item-4 div{
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 500px;
    height: auto;
    font-size: 1.8rem;
    line-height: 2.2777777778;
    font-family: Koburina Gothic W6 JIS2004, sans-serif;
}
.item-4 div{
  width: 540px;
}
.item-1 h2,.item-4 h2{
  text-align: center;
  padding: 0 0 60px !important;
}
.item-4 h3,
.item-5 h3,
.item-6 h3,
.item-7 h3,
.item-8 h3{
    text-align: center;
}
.item-4 .genre__item,
.item-5 .genre__item,
.item-6 .genre__item,
.item-7 .genre__item,
.item-8 .genre__item {
    padding-top: 50px;
    padding-right: 20px;
}
.item-8 {
    margin-bottom: 260px;
}
.item-2 h2,
.item-3 h2,
.item-5 h2,
.item-6 h2,
.item-7 h2,
.item-8 h2{
  position: fixed;
  top: 0;
  width: 100%;
  opacity: 0;
  z-index: 0;
}
.item-2 .genre,
.item-5 .genre{
  padding-top: 50vh;  
}
.genre{
  padding-top: 80vh;
}
.genre__contents {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: block;
    padding: 100px 0 80px;
    background-color: rgba(255, 255, 255, .9);
    z-index: 2;
    position: relative;
}
.genre__container {
    max-width: 1000px;
    width: 95%;
    margin: 0 auto;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}
.genre__text {
    font-size: 1.8rem;
    margin: 0 auto;
    width: 55%;
}
.genre__ttl {
    font-size: 2.8rem;
    font-family: Koburina Gothic W6 JIS2004, sans-serif;
    padding: 80px 0 25px;
    text-align: center;
}
.genre__ttl::before{
    content: "";
    display: inline-block;
    background-image: url(../img/logo_s.png);
    background-size: cover;
    width: 15.855px;
    height: 44.249px;
    margin-right: 1rem;
}
.genre__item {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto;
}
.col2{
    width: 505px;
}
.col3{
    width: 735px;
}
.genre__item li img{
    width: 225px;
    padding-bottom: 30px;
}
.guest li{
    position: relative;
}
.guest .icon4:after,
.guest .icon5:after {
    content: '';
    width: 40px;
    height: 40px;
    display: block;
    position: absolute;
    top: -20px;
    right: -20px;
    z-index: 1;
}
.guest .icon4:after {
    background-image: url(../img/icon_4.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.guest .icon5:after {
    background-image: url(../img/icon_5.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.preitem {
    background-color: rgba(255, 255, 255, .9);
    padding: 50px 0;
    position: relative;
}
.preitem-profile {
    margin-bottom: 60px
}
.preitem-prenav {
  margin: 55px 0;
}
.preitem-info {
    margin: 120px 0;
    background-color: #fff
}
.prenav {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between
}
.prenav li {
    min-width: 50px
}
.prenav li a {
    color: black;
}
.item-info {
    margin: 120px 0 60px;
    background-color: rgba(255,255,255,.93);
    padding: 60px 0;
}
.info h2 {
    text-align: center;
    font-size: 1.9rem;
    margin-bottom: 40px;
    padding: 0;
}
.info dl {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.info dl dt {
    width: 25%;
    font-size: 1.5rem;
}
.info dl dd {
    width: 75%;
    font-size: 1.5rem;
}
.share {
    padding: 15px 0;
    margin-bottom: 55px;
    background-color: #fff
}
.share__ttl {
    font-size: 1.9rem;
    text-align: center;
    padding: 30px 0;
    letter-spacing: .1em
}
.share__list {
    width: 95%;
    max-width: 500px;
    margin: 0 auto 30px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    list-style-type: none;
    position: relative;
}
.share__list li {
    margin: 0 20px
}
.share__list-foot {
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto 50px
}
.share__list-foot li a {
    border: 1px solid #005AFF;
    border-radius: 18px;
    padding: 0 18px;
    font-size: 1.4rem;
    width: 210px;
    text-align: center;
    display: inline-block;
    color: #005AFF
}
.footer {
    padding: 45px 0;
    background-color: #fff
}
.copyright {
    display: block;
    text-align: center;
    text-indent: -9999px;
    background-image: url(../img/copyright.png);
    width: 255px;
    height: 11px;
    margin: 20px auto;
    background-size: contain
}

@media screen and (max-width:768px) {
  .genre__container{
    width: 82.8125%;
  }
  .item-4 .genre__item, .item-5 .genre__item, .item-6 .genre__item, .item-7 .genre__item, .item-8 .genre__item {
    margin: 0 auto;
    padding-right: 0;
  }
  .genre__text {
    width: 100%;
  }
  .genre__item{
    width: 74%;
  }
  .col3,
  .col2{
    width: 74%;
  }
  .share {
    padding: 15px 0;
    margin-bottom: 55px;
    background-color: #fff
  }
  .share__ttl {
    font-size: 1.9rem;
    text-align: center;
    padding: 30px 0;
    letter-spacing: .1em
  }
  .share__list {
    width: 95%;
    max-width: 500px;
    margin: 0 auto 30px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    list-style-type: none
  }
  .share__list li {
    margin: 0 10px
  }
  .share__list-foot {
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto 50px;
    -ms-flex-direction: column;
    flex-direction: column
  }
  .share__list-foot li {
    margin: 10px 0;
    text-align: center
  }
  .share__list-foot li a {
    padding: 0;
    font-size: 1.4rem;
    width: 100%;
    max-width: 210px;
    text-align: center;
    display: inline-block;
  }
  .footer {
    padding: 45px 0 0;
    background-color: #fff
  }
  .copyright {
    display: block;
    text-align: center;
    text-indent: -9999px;
    background-image: url(../img/copyright.png);
    width: 255px;
    height: auto;
    margin: 20px auto 0;
    background-size: contain
  }
}
@media screen and (max-width: 640px){
  .spOnly{
    display: block;
  }
  .arrow {
    display: block;
    width: 12.5vw;
    max-width: 81px;
    height: 12.5vw;
    max-height: 81px;
    position: absolute;
    bottom: -10px;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
  }
  .item-0 {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    padding-top: 0;
  }
  .logo-o2 {
    height: 66.13756614vh;
    height: calc(var(--vh, 1vh) * 66.13756614);
    width: 61.25vw;
  }
  iframe {
    height: 30%;
  }
  .item-v,.item-1, .item-4 {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
  }
  .item h2.subtitle{
    padding: 0 !important;
  }
  .item-1 h2 img{
    width: 95%;
  }
  .item-1 p, .item-2 p, .item-3 p, .item-4 p{
    font-size: 1.6rem;
    line-height: 1.77;
  }
  .item-1 div{
    margin-top: -10px;
  }
  .item-1 div,
  .item-4 div{
    width: 90%;
    font-size: 1.5rem;
  }
  .item h2{
    padding: 60px 0 130px;
  }
  .item h2 img{
    width: 100%;
  }
/*  .item h2{
    padding: 8vh 0 0 !important;
  }*/
  #org h2 img{
    width: 80%;
  }
  #org1 h2 img,
  .item-3 h2 img
  {
    width: 26.5625%;
  }
  .item h3{
    padding-bottom: 20px;
  }
  .item-4 h2 img{
    width: 90%;
  }
  .item-5 h2 img,
  .item-6 h2 img,
  .item-7 h2 img,
  .item-8 h2 img{
    width: 30%;

  }
  .item-2 .genre, .item-5 .genre{
    padding-top: 50vh;
    padding-top: calc(var(--vh, 1vh) * 50);
  }
  .genre{
    padding-top: 80vh;
    padding-top: calc(var(--vh, 1vh) * 80);
  }
  .genre__container{
    width: 95%;
  }
  .genre__contents{
    margin: 15vh auto 5vh;
    padding: 50px 0;
  }
  .genre__text {
    width: 88%;
  }
  .genre__item li img{
    width: 43.75vw;
    padding-bottom: 15px;
  }
  .genre__item,
  .col3,
  .col2{
    width: 95%;
  }
  .genre__ttl{
    font-size: 2.2rem;
  }
  .guest .icon4:after, .guest .icon5:after{
    width: 30px;
    height: 30px;
    top: -15px;
    right: -15px;
  }
  .preitem nav{
    padding: 0 30px 0 30px;
  }
  .preitem{
    padding: 20px 0;
  }
  .info {
    width: 90%;
    margin: 0 auto;
  }
  .info h2{
    padding: 0;
  }
  .info dl dt {
    width: 100%;
    font-size: 1.4rem;
  }
  .info dl dd {
    width: 100%;
    font-size: 1.4rem;
    margin-bottom: 1em;
    letter-spacing: .1rem;
  }
}
@media screen and (max-width: 320px){
  #org-i a{
    opacity: 0;
  }
  .item-1 p, .item-2 p, .item-3 p, .item-4 p{
    font-size: 1.5rem;
    line-height: 1.5;
  }
}