@charset "utf-8";

/* ==========================================================================
Base
========================================================================== */
/* iPhone 320px */
@media only screen and (min-width:320px){html{font-size: 77%;}}
/* Android 360px 1.125 */
@media only screen and (min-width:360px){html{font-size: 85%;}}
/* iPhone6 375px 117.1875 */
@media only screen and (min-width:375px){html{font-size: 80%;}}
/* iPhone6 plus 414px 1.29375 */
@media only screen and (min-width:412px){html{font-size: 96%;}}
/* md */
@media(min-width: 768px){html{font-size: 88%;}}
/* lg */
@media(min-width: 992px){html{font-size: 90%;}}
/*xl*/
@media(min-width:1200px){html{font-size: 88%;}}
/*xxxl*/
@media(min-width:1600px){html{font-size: 96%;}}
html,html a{text-shadow: 1px 1px 1px rgba(0,0,0,0.004); }
html,body{overflow-x: hidden;height: 100%;}
body{position: relative;background-color: #fff;min-height: 100%;height: auto; color: #25463f;font-family:'Gothic MB101 Medium JIS2004,游ゴシック体,Yu Gothic,YuGothic,\\30D2\30E9\30AE\30CE\89D2\30B4\30B7\30C3\30AF Pro,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,Osaka,"\FF2D\FF33   \FF30\30B4\30B7\30C3\30AF",MS PGothic,sans-serif', sans-serif;letter-spacing: .01rem;background: none;font-weight: 300;}

p{line-height: 1.8;}
h1,h2,h3,h4,h5,h6{line-height: 1.6;}

.font-MidashiGo{font-family: 'Midashi Go MB31';}
.font-Oswald{font-family: 'Oswald';}
.font-MediumGo{font-family: 'Gothic Medium BBB';}

.box-entry h1,.box-entry h2,.box-entry h3,.box-entry h4,.box-entry h5{font-size: 1rem;margin-bottom: 1.4rem;/*font-family: Gothic MB101 Medium JIS2004;*/font-family: 'Hiragino UD Sans F W6 JIS2004';}
.box-entry strong{font-family: 'Hiragino UD Sans F W6 JIS2004';}
a:hover,a:active,a:focus,.hvr-clr-pink:hover{color: #e42485 !important;text-decoration: none;}
a:hover span.bbsd.d-inline-block.text-left{border-bottom-color: #e42485 !important;}

.trs-all-1 {transition: all 1s;}
.trs-all-2 {transition: all 2s;}
.ovv{overflow: visible !important;}

.mt-5025{margin-top: 3.5rem;}

.mh-100vh{min-height: 100vh;}
.mah-100vh{max-height: 100vh;}
.mah-100{max-height: 100;}
.h-1305rem{height: 13.5rem;}
.lh-5{line-height: 5;}
.lh-6{line-height: 6;}
.lh-10{line-height: 10;}

.op-025{opacity: .025;}
.op-05{opacity: .05;}
.op-1{opacity: .1;}
.op-3{opacity: .3;}

.bg-blk-op05{background: rgba(0,0,0,.5);}
.bg-blk-op07{background: rgba(0,0,0,.7);}
.bg-blk-op075{background: rgba(0,0,0,.75);}
.bg-blk-op08{background: rgba(0,0,0,.8);}
.bg-blk-op085{background: rgba(0,0,0,.85);}
.bg-blk-op095{background: rgba(0,0,0,.95);}
.bg-grn-light{background-color: #80dc2d;}
.bg-blue-light{background-color: #91deea;}
.bg-yellow{background-color: yellow;}
.bg-blue{background-color: #a3ccff !important}
.bg-pink{background-color: #ff85c3 !important}
.bg-gray-light{background-color: #f1f1f1 !important}
.hvr-bg-gray-light:hover{background-color: #f8f8f8 !important;}

.bc-gray{border-color: #ccc !important}
.bc-gray-dark{border-color: #333 !important}
.bw-1px{border-width: 1px !important;}

.clr-navy{color: #043269 !important;}
.clr-purple{color: #b145de !important;}
.clr-blueGrn{color: #2dd7e2 !important;}
.clr-brown{color: #a2850e !important;}
.clr-slv{color: #deddda !important;}
.clr-gold{color: #cecc91 !important;}
.clr-pink{color: #e42485 !important;}
.clr-lgrn{color: #80dc2d !important;}
.clr-grn{color: #3eb55d !important;}
.clr-gray-dark.clr-blk{color: #191919 !important;}
.clr-gray-light{color: #ccc !important;}

.skew-kooki{transform: skew(-3deg, 0deg);}

.btn.focus, .btn:focus{box-shadow: none;}
.btn-arrowRight{border: .19rem solid #191919;border-right-color: #fff !important;display: inline-block;height: 3.5em;line-height: 3.2em;min-width: 6em;mix-blend-mode: normal;padding-left: 1em;transform: skew(-3deg, 0deg);}
  .btn-arrowRight:before,.btn-arrowRight:after{background: #fff;content: '';display: block;height: .19rem;position: absolute;right: calc( -1 * (2.35em - .19rem));top: calc(.84em - .19rem);transform: rotate(66deg);width: 1.88em;}
  .btn-arrowRight:after{bottom: calc(.84em - .19rem);top: auto;transform: rotate(-66deg);}

.btn-arrowRight.text-center{padding-left: .4em;}
  .btn-arrowRight.text-center:before,.btn-arrowRight.text-center:after{right: calc( -1 * (1.45em - .1rem));}

.btn-arrowRight.clr-wht{border-color: #fff;}
  .btn-arrowRight.clr-wht:before,.btn-arrowRight.clr-wht:after{background: #fff;}
  .btn-arrowRight.clr-wht a{color: #fff;}

.btn-arrowRight.clr-gray-dark{border-color: #666;}
  .btn-arrowRight.clr-gray-dark:before,.btn-arrowRight.clr-gray-dark:after{background: #666;}
  .btn-arrowRight.clr-gray-dark a{color: #666;}

.btn-arrowRight.clr-blk{border-color: #191919;}
  .btn-arrowRight.clr-blk:before,.btn-arrowRight.clr-blk:after{background: #191919;}
  .btn-arrowRight.clr-blk a{color: #191919;}

.btn-12em{width: 14.2em;}
.btn-6em{width: 7.9em;}
.btn-605em{width: 9em;}
.btn-7em{width: 9.6em;}
.btn-705em{width: 10em;}
.btn-8em{width: 11.1em;}
.btn-805em{width: 9.48em;}
.btn-9em{width: 12.1em;}

.topRight{top: 0;right: 0;}
.bottomRight{bottom: 0;right: 0;}
.centerLeft{top: 50%;left:2rem;transform: translate(-50%,-2rem);}
.centerLeftTop{top: 45%;left:2rem;transform: translate(-50%,-2rem);}
.centerLeftBottom{top: 68%;left:2rem;transform: translate(-50%,-2.3rem);}
.centerRight{top: 50%;right:-2.5rem;transform: translate(-50%,-3rem);}

/*== menu ==*/
.nav-right{right: .3rem;top:.7rem}
.bf-hyphen:before{content:"";width: 1.75rem;height: .075rem;background-color: #000;display: inline-block;margin-right: .25rem;}

/*navi-trigger*/
.navi-trigger{text-indent:100%;white-space:nowrap;transition:transform .5s;}
  .navi-trigger .navi-icon{right:50%;transform:translateX(50%);height:.2rem;background-color:#191919}
  .navi-trigger svg{left:0;top:0}
    .navi-trigger .navi-icon::before,.navi-trigger .navi-icon:after{content:'';position:absolute;top:0;width:100%;height:100%;background-color:#191919;transform:translateZ(0);transition:transform .5s,width .5s,top .3s}
    .navi-trigger .navi-icon::before{right: -.06rem;transform-origin:right top;transform:translateY(-.5rem)}
    .navi-trigger .navi-icon::after{right: .06rem;transform-origin:right bottom;transform:translateY(.5rem)}
    .navigation-is-open .navi-trigger{transform:rotate(180deg); margin-left:.4rem;}
      .navigation-is-open .navi-trigger .navi-icon {background-color:#000;}
      .navigation-is-open .navi-trigger .navi-icon::after,.navigation-is-open .navi-trigger .navi-icon::before{width:50%;transition:transform .5s,width .5s;right: 0rem; background-color:#000;}
    .navigation-is-open .navi-trigger .navi-icon::before{transform:rotate(45deg);}
    .navigation-is-open .navi-trigger .navi-icon::after{transform:rotate(-45deg);}
/*navi*/
.navi{z-index: -1;transition:opacity 0s .2s;opacity: .8;visibility: hidden;}
  .navi .navigation-wrapper{-webkit-overflow-scrolling:touch;transform:translateZ(0);backface-visibility:hidden;transform:translateX(-13%);transition:transform .5s;transition-timing-function:cubic-bezier(.86,.01,.77,.78)}
  .navigation-wrapper nav{transition:opacity .1s;opacity: .04;}
  /*opend*/
  .navigation-is-open .navi{opacity: 1;z-index: 11;top: 0;left: 0;visibility: visible;}
    .navigation-is-open .navigation-wrapper{transform:translateX(0);transition:transform .1s;transition-timing-function:cubic-bezier(.1,.01,.77,.78); }
    .navigation-is-open .navigation-wrapper nav{opacity: 1;}
    .navigation-is-open .nav-right a {color:#fff;}
    .navi a.selected{color:#191919}

  .liComment{padding-left: 1rem;}
    .liComment>li{position: relative;padding-left: .25rem;}
      .liComment>li::before{position: absolute;content: "*";top:0;left:-1.15rem;color: #191919;vertical-align: middle;font-size: 1em;}

  .liMenuWorks .nowShown{background-color: #fff !important;color: #191919 !important;}
  .arrow_box { line-height:3.4em;height: 3.4em;background: #fff;transform: skew(-3deg, 0deg);}
    .arrow_box:after {left: calc(100% + .1rem);top: 50%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;border-left-color: #fff;border-left-width: .8em;border-top-width: 1.733em;border-bottom-width: 1.733em;margin-top: -1.725em;}
/* ==========================================================================
main
========================================================================== */
:not(.chrome).ios.mobile #box-mv .h-100vh{height: 88.2vh;}

#main{padding-bottom: 3rem;}
#box-mv .w-100{width: calc(100% + 1px)}
#box-mv .topLeft{left: -1px;}
.liWorks .box-comment{background: #f1f1f1;}
.liWorks > li:nth-child(even){background: #f1f1f1;}
  .liWorks > li:nth-child(even) .box-comment{background: #fff;}
.listDl dt:after{content:":";padding-right: .5rem;padding-left: .5rem;}
.liMenuSub li a{border-color: #191919 !important;color: #191919 !important;}
#box-mv:not(.mv-wht) .liMenuSub li a{border-color: #fff !important;color: #fff !important;}
#box-mv .liMenuSub li a.nowShown{border-color: #000 !important;color: #000 !important;}

.w-iframeFull{width: calc(100% + .15rem + 8.333333vw);}
.muteOff{opacity: .1 !important;}

.btnPlay{display: none;}
.nowPause .btnPlay{display: block;}

.fill-wht{fill:#fff;}

.mv-blk header a,.mv-blk .nav-right a,.mv-blk .mv h1{color: #f9f9f9 !important;border-color: #f9f9f9;}
  .mv-blk .navi-trigger .navi-icon,.mv-blk .navi-trigger .navi-icon::before,.mv-blk .navi-trigger .navi-icon:after,.plyr--video .plyr__controls{background-color: #f9f9f9;}
  .fixed .nav-right a{color: #191919 !important;}
  .mv-blk .mv,.fixed .navi-trigger .navi-icon,.fixed .navi-trigger .navi-icon::before,.fixed .navi-trigger .navi-icon:after,.mv-blk #wrap-videoBg{background-color: #191919;}

.mv-blk header .navigation-wrapper a,.navigation-is-open .nav-right a{color: #333 !important;}
.mv-blk.navigation-is-open .navi-trigger .navi-icon,.mv-blk.navigation-is-open .navi-trigger .navi-icon::before,.mv-blk.navigation-is-open .navi-trigger .navi-icon:after{background-color: #000;}

.arrow-right{position: relative;}
  .arrow-right:before,.arrow-right:after {content: '';position: absolute;z-index: 10;right:calc(-.4rem +(.1rem / 2));height: calc(50% + .1rem);width: .1rem;background: #666;}
  .arrow-right:before {top:calc((100% - 50% * 2 )/2);transform: rotate(-20deg);}
  .arrow-right:after {top: calc(50% +((100% - 50% * 2 )/2) -(.1rem * 1.5));transform: rotate(20deg);}​

/* ==========================================================================
works
========================================================================== */
.liWorksDir .clr-dir{color: #f9f9f9 !important;}
.liWorksDir li:nth-child(even) .bg-dir{background-color: #f1f1f1;}
.liWorksDir li:nth-child(even) .clr-dir{color: #191919 !important;}

.mah-100vh{max-height: 100vh !important;}
.maw-100vh-16by9{max-width: calc(100vh / 9 * 16 ) !important;}
.h-16by9{height: calc((58.333333vw - 2rem) / 16 * 9) !important;}

#wrap-videoBg{transition: all .3s linear;padding-top: 4rem;}
.ani-play #wrap-video{z-index: 100; position: relative;}

/* === Topics == */
.box-entry p,.box-entry picture{margin-bottom: 1.4rem !important;}





  #nav-rec .nuxt-link-exact-active{background-color: #80dc2d;}
  #nav-rec .nuxt-link-exact-active:hover{background-color: #80dc2d;color: #fff;}



 /*pagetop*/
 #pagetop{position:fixed;right:4%;bottom:1rem;z-index:500;display: none;}
   #pagetop:hover{opacity:1;cursor: pointer;}



/* ==========================================================================
Topics
========================================================================== */


#sidemenu .link-fa-wrap i{
    position: absolute;
    right: .2rem;
    top: 50%;
    transform: translateY(-50%);
}

.box-entry p {
    font-family:Hiragino UD Sans F W3 JIS2004,游ゴシック体,Yu Gothic,YuGothic,ヒラギノ角ゴシック Pro,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,Osaka,ＭＳ Ｐゴシック,MS PGothic,sans-serif;
}


.box-entry a, .font-MidashiGo {
    font-family: Midashi Go MB31 JIS2004;
}


.box-entry a{
    color: #000080;
     border-bottom: .01rem solid;
    padding-bottom: .1rem;
}




/* ==========================================================================
Responsive
========================================================================== */
/* sm */
@media(min-width: 576px){
  #wrap-videoBg {padding-top: 2rem;}
}
/* md */
@media(min-width: 768px){
  .rounded-md-xs{border-radius: .25rem!important;}
  .nav-right{top:.65rem}
  #wrap-videoBg {padding-top: 4.1rem;}
  .ani-play #wrap-video{z-index: 1;}
  .fixed #header a{line-height: 1.5!important;}
  .scrolled .side-topLeft{top: 4.5rem;}
  .btn-img img{top: -.15rem;}
  .position-md-fixed{position: fixed;}
   #pagetop{bottom: .3rem;}
}
/* lg */
@media(min-width: 992px){
  .font-weight-lg-bold {font-weight: bold;}
  .lh-lg-6{line-height: 6;}
  .mh-lg-100vh{min-height: 100vh;}
  .ml-lg--405{margin-left: -2rem !important;}
  .btn-img img{top: .55rem;}
  .skew-lg-kooki{transform: skew(-3deg, 0deg);}
  #main:not(.page-worksDetail) .plyr{border-right: .1rem solid #ccc;}
  #wrap-videoBg{background-color: #191919;transition: all .5s linear;padding-top: 0;}
  .ani-play .plyr__video-embed iframe {animation: ani-play .2s ease-in-out .5s forwards;}
  .h-lg-16by9{height: calc(100vw / 16 * 9) !important;}
  .nowPause .btnPlay{display: none;}
   /*pagetop*/
   #pagetop{right:1rem;}
  /* === Topics == */
  .navSide{position: fixed;top: 14.45rem;right: calc((16.666667vw * (1 - 0.83333333) / 2));width: calc(16.666667vw * 0.83333333);}
  .fixed .navSide{top: 10.6rem;}
  #main.page-topics{padding-bottom: 0;}
  /*.box-entry,.box-entry p{font-size: .85rem;}
}
*//* iPad landscape iPad Pro */
@media(min-width:1024px) and (max-width : 1366px) {
}
/*xl*/
@media(min-width:1200px){
  .font-weight-xl-bold {font-weight: bold;}
  .skew-xl-kooki{transform: skew(-3deg, 0deg);}
  .btn-img img{top: -.4rem;}
  .liWorksDir li:nth-child(3) .bg-dir,.liWorksDir li:nth-child(4) .bg-dir,.liWorksDir li:nth-child(7) .bg-dir,.liWorksDir li:nth-child(8) .bg-dir{background-color: #f1f1f1;}
  .liWorksDir li:nth-child(3) .clr-dir,.liWorksDir li:nth-child(4) .clr-dir,.liWorksDir li:nth-child(7) .clr-dir,.liWorksDir li:nth-child(8) .clr-dir{color: #191919 !important;}
  .liWorksDir li:nth-child(2) .bg-dir,.liWorksDir li:nth-child(6) .bg-dir{background-color: #191919;}
  .liWorksDir li:nth-child(2) .clr-dir,.liWorksDir li:nth-child(6) .clr-dir{color: #fff !important;}
  .navSide{top: 12.3rem;}
  .pl-xl-5, .px-xl-5 {padding-left: 3rem!important;}
  .pr-xl-5, .px-xl-5 {padding-right: 3rem!important;}
  .lh-xl-305{line-height: 3.5 !important;}
}
/*xxl*/
@media(min-width:1366px){
  .lh-xxl-305{line-height: 3.5 !important;}
}
/*xxxl*/
@media(min-width:1600px){
}
@media(min-width:1800px){
  .fz-xxxxl-xxxl{font-size: 3.25rem !important;}
}



.page-topics .box-entry iframe[src*="youtube.com/embed"],
.page-topics .box-entry iframe[src*="youtu.be/"],
.page-topics .box-entry iframe[src*="youtube-nocookie.com/embed"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  border: 0 !important;
}

.page-topics .box-entry p iframe[src*="youtube"] {
  vertical-align: top !important;
}



/* ==========================================================================
PLUGIN css
========================================================================== */
/* === FA5 == */
.wrap-fa{display: inline-block;position: relative;padding-left: 1.28em}
.wrap-fa > *{display: inline-block;}
  .wrap-fa > svg{top: .2em;}
.btn-fa-wrap a,.btn-fa-wrap button{padding-left: 1rem;padding-right: 2rem;}
.btn-fa-wrap svg{position: absolute;right: 1rem;top: 50%;transform:translateY(-50%)}
.btn-fa-wrap.btn-fa-before a,.btn-fa-wrap.btn-fa-before button{padding-left: 2rem;padding-right: 1rem;}
  .btn-fa-wrap.btn-fa-before svg{left: 1rem;}
.link-fa-wrap{position: relative;}
  .link-fa-wrap svg{position: absolute;right: .2rem;top: 50%;transform:translateY(-50%)}
  .wrap-fa > svg.fa-calendar-alt{top: .15em;}

/*plyr*/
.plyr__control--overlaid {border-radius: 19%;padding:15px 25px;}
.plyr__control--overlaid,.plyr--audio .plyr__control.plyr__tab-focus,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true].plyr__control--overlaid:focus,.plyr__control--overlaid:hover.plyr--video .plyr__controls .plyr__control.plyr__tab-focus,.plyr--video .plyr__controls .plyr__control:hover,.plyr--video .plyr__controls .plyr__control[aria-expanded=true],.plyr__control--overlaid:hover,.page-item.active .page-link,.liWorksDir .bg-dir{background-color:#191919;}
.plyr--full-ui input[type=range],.plyr__control--overlaid:hover{color:#f9f9f9}
#main:not(.page-worksDetail) .plyr__poster{background-color: #fff;}
.plyr--video .plyr__controls{background:linear-gradient(transparent,rgba(25,25,25,.7));}