/* 202204250000 */
/* template original css (style.css) fixed*/

.menu {
    height: 60px;
}
.menu.menu-open {
    height: 100%;
}


/* for this site */
.ratio.carousel-inner div.item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ratio.carousel-inner div.item.left > div,
.ratio.carousel-inner div.item.active > div {
  display: flex;
  justify-content: center;
  align-items: center;
}

a {
    color:#337ab7; 
    font-weight: bold;
}
a:hover {
    color:#286090; 
}

body#top {
  background: #1a1a1a;
}

body > #f {
  background: none;
}
.ct-bg {
    background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0),rgba(26,26,26,0.7),rgba(26,26,26,1)), url(../img/header-bg.jpg) repeat-x center top!important;
    background-size: cover;
    background-position-x: center;
    top:0px;
    width: 100%;
    height: 850px;
    position: absolute;
    z-index: -2;
}
.ct-bg2 {
    position: absolute;
    top:0px;
    width: 100%;
    min-height: 100vh;
    background-color:black;
    overflow: hidden;
}
.ct-bg2 img {
    max-width: calc(1250 * 100vw / 880);
    max-height: 80vh;
    min-height: 400px;
    margin-left: calc((100vw - (1250 * 100vw / 880)) / 2);
    margin-right: calc((100vw - (1250 * 100vw / 880)) / 2);
}
@media (min-width: 880px) {
    .ct-bg2 img {
        max-width: 1250px;
        margin-left: calc((100vw - 1250px) / 2);
        margin-right: calc((100vw - 1250px) / 2);
    }
}
.ct-bg2-cover img {
    max-width: calc(1250 * 100vw / 880);
    max-height: 65vh;
    min-height: 320px; /* 400 * 750 / 938 */
    margin-left: calc((100vw - (1250 * 100vw / 880)) / 2);
    margin-right: calc((100vw - (1250 * 100vw / 880)) / 2);
}
#headerwrap .ct-part-top {
    margin:0;
    overflow: hidden;
}
#headerwrap .ct-part-bottom {
    height: calc(35vh + (768px - 100vw) / 4);
}
@media (min-width: 880px) {
    .ct-bg2-cover img {
        max-width: 1250px;
        margin-left: calc((100vw - 1250px) / 2);
        margin-right: calc((100vw - 1250px) / 2);
    }
}
@media (min-width: 576px) {
    .ct-bg2 img {
        min-height: 530px;
    }
    .ct-bg2-cover img {
        min-height: 430px;
    }
    #headerwrap .ct-part-bottom {
        height: 35vh;
    }
}
@media (min-width: 768px) {
    .ct-bg2 img {
        min-height: 530px;
    }
    .ct-bg2-cover img {
        min-height: 440px;
    }
}
@media (min-width: 992px) {
    .ct-bg2 img {
        min-height: 700px;
    }
    .ct-bg2-cover img {
        min-height: 530px;
    }
}
@media (min-width: 1200px) {
    .ct-bg2 img {
        min-height: 711px;
    }
    .ct-bg2-cover img {
        min-height: 560px;
    }
}


#headerwrap {
  background: black;
}

#headerwrap h1 {
  margin-top:0px;
  margin-bottom:0px;
}

#f div.container div.row div {
    text-align: left;
}
#f div.container div.row.text-center div {
    text-align: center;
}

#f img.img-responsive {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.menu div.logo {
    margin-top: 20px;
    margin-bottom: 10px;
}
.menu div.logo a {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 40px;
    text-transform: uppercase;
    color: #ffffff;
    margin-top: 20px;
}
.menu div.logo a:hover {
  color: #f85c37;
}
img.img-responsive {
    width: 100%;
}

.social a {
    text-align: center;
    height: 4.6rem;
    width: 4.6rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 100%;
    line-height: 4.6rem;
    color: #F2F2F2;
    font-size: 17px;
    display: inline-block;
    margin-left: 0.8rem;
    margin-right: 0.8rem;
}
.social a:hover {
    color: rgba(255, 255, 255, 0.5);
}

#copyrights .credits{
    height: 1px;
    overflow: hidden;
}
#copyrights > div a {
    color: inherit;
    font-weight: normal;
}

ul,
ol,
ul > li,
ol > li {
    color: #f2f2f2!important;
    font-size: 20px!important;
}
ul {
    padding-left: 2rem;
}
ol,
ol > li {
    padding-left: 0px;
}
ol {
  counter-reset:num;
  list-style-type: none!important;
  padding:0;
  margin:0;
}
ol li {
  position: relative;
  padding-left: 30px;
  line-height: 1.5em;
}
ol li:before {
    position: absolute;
    counter-increment: num;
    content: counter(num);
    display: inline-block;
    background: transparent;
    border: #f2f2f2 0.5px solid;
    color: #f2f2f2;
    font-family: 'EB Garamond', serif;
    font-size: 16px;
    border-radius: 50%;
    left: 0;
    width: 21px;
    height: 21px;
    line-height: 17px;
    text-align: center;
    top: 4px;
}

@media all and (-ms-high-contrast: none) {
  #headerwrap > div.container {
    height: 10px;
  }
  wbr:after {
    content: "\00200B";
  }
  .ratio-16x9 {
    width: 80vw!important;
    max-width: 945px!important;
    height: calc(80vw * 9 / 16)!important;
    max-height: 532px!important;
  }
}

.twitter-tweet {
    margin-left:auto;
    margin-right:auto;
}

@media (min-width: 1px) {
  #f.ct-f-wide .container {
    width: 100%;
  }
  #f.ct-f-wide .container .img-responsive{
    width: auto;
    height: auto;
    min-width: 100%;
    max-width: unset;
    min-height: calc(100vw * 12 / 17 - 11px); /* 3400x2400 - margin*/
    max-height: 450px; /* 500min-height * 0.9*/
  }
  .ct-diagram {
    padding-right:0px;
    padding-left: 0px;
  }
}
@media (min-height: 500px) {
  #f.ct-f-wide .container .img-responsive{
    max-height: 90vh;
  }
}
@media (min-height: 700px) {
  #f.ct-f-wide .container .img-responsive{
    max-height: 663px; /* diagram.jpg disp height*/
  }
}
@media (min-width: 992px) {
  #f.ct-f-wide .container {
    width: 970px;
  }
  #f.ct-f-wide .container .img-responsive{
    width: 100%;
    height: auto;
    max-width: 100%;
    min-height: unset;
    max-height: unset;
  }
  .ct-diagram {
    padding-right:15px;
    padding-left: 15px;
  }
}
@media (min-width: 1200px) {
  #f.ct-f-wide .container {
    width: 1170px;
  }
}

.modal.fade {
    padding: 0px!important;
}
.modal-body {
    padding:0;
}
div.ratio.ratio-16x9 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: -1px;
}
.ct-ratio-9x16 {
  --bs-aspect-ratio: calc(16 / 9 * 100%);
}
.ct-ratio-950x633 {
  --bs-aspect-ratio: calc(633 / 950 * 100%);
}
.ct-ratio-674x952 {
  --bs-aspect-ratio: calc(952 / 674 * 100%);
}
.ct-ratio-430x908 {
  --bs-aspect-ratio: calc(909 / 430 * 100%); /* 908+1 for fraction error */
}
span.ct-img-frame-h {
    display: block;
    overflow: hidden;
}
span.ct-img-frame-h > img {
    width: 100%;
    height: auto;
}
.modal-content {
    background-color: transparent;
    border:0;
    margin-top:70px;
    margin-bottom:70px;
}
.modal.fade .modal-dialog {
    width: 100%;
    height: 100%;
    background-color: rgba(20,20,20,0.7);
}
.modal.fade .modal-dialog div.ct-img-frame {
    margin: auto;
}
.modal.fade .modal-dialog div.ct-img-frame img {
    max-height: calc(100vh - 140px);
    max-width: calc(100vw - 30px);
}
.dialog-close {
    cursor: pointer;
    display: block;
    position: absolute;
    font-size: 50px;
    color: #ffffff;
    width: 40px;
    height: 40px;
    line-height: 40px;
    top: 20px;
    right: 5px;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}
.dialog-close:hover {
  color: #ffffff;
  -webkit-transition: all .1s ease-in-out;
  -moz-transition: all .1s ease-in-out;
  -ms-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
}

#f div .d-flex > span.ct-menu {
    margin:auto;
}

.ct-menu button {
   font-family: 'Oswald', sans-serif;
   font-size: large;
   margin-top: 0.5rem;
}

.ct-fmenu .logo a {
    font-size: 16px;
    font-weight: 700;
    font-family: 'Oswald', sans-serif;
    margin-top: -2px;
}
.ct-fmenu .logo a:hover {
    color: #f85c37;
}

.ct-fmenu a {
    margin-left: 16px;
    color: #808080;
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
#f.ct-fmenu a > i {
    color: #808080;
    font-size: 14px;
}
#f.ct-fmenu a:hover > i,
.ct-fmenu a:hover {
    color: #f2f2f2;
}
.ct-fmenu .ct-route a {
    margin-left: 30px;
}
.ct-fmenu .ct-route .logo a {
    margin-left: 16px;
}
.ct-fmenu .ct-route > div > span {
    margin-left: 30px;
    color: #808080;
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.ct-fmenu .ct-route > div:nth-child(n+2):before {
    display: block;
    position: absolute;
/*    top: 50%;*/
    margin-top: 0px;
    margin-left: 12px;
    font-size: 18px;
    line-height: 18px;
    color: #808080;
    content: "\f105";
    font-family: "FontAwesome";
}
.ct-fmenu hr {
    border-color: #333;
    clear:left;
}
.ct-fmenu .ct-menu-list hr {
    margin-top:5px;
    margin-bottom:5px;
}

.ct-img-responsive-h,
.thumbnail > img,
.thumbnail a > img,
.ct-slider-x > .item > img,
.ct-slider-x > .item > a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-height: 100%;
  width: auto;
}

#f img.ct-img-left-50,
#f img.ct-img-left {
    width: 50%;
    float:left;
    margin-right: 3rem;
}
#f img.ct-img-right-50,
#f img.ct-img-right {
    width: 50%;
    float:right;
    margin-left: 3rem;
}
#f img.ct-img-left-45 {
    width: 45%;
    float:left;
    margin-right: 3rem;
}
#f img.ct-img-right-45{
    width: 45%;
    float:right;
    margin-left: 3rem;
}
#f img.ct-img-left-40 {
    width: 40%;
    float:left;
    margin-right: 3rem;
}
#f img.ct-img-right-40{
    width: 40%;
    float:right;
    margin-left: 3rem;
}
#f img.ct-img-left-35 {
    width: 35%;
    float:left;
    margin-right: 3rem;
}
#f img.ct-img-right-35{
    width: 35%;
    float:right;
    margin-left: 3rem;
}
#f img.ct-img-left-30 {
    width: 30%;
    float:left;
    margin-right: 3rem;
}
#f img.ct-img-right-30{
    width: 30%;
    float:right;
    margin-left: 3rem;
}
#headerwrap div.ct-more,
#f div.ct-more {
    text-align: right!important;
    margin-top: 5px;
}
#headerwrap div.ct-more > a,
#f div.ct-more > a {
    font-size: 18px;
    color:#337ab7;
}
#headerwrap div.ct-more > a:hover,
#f div.ct-more > a:hover {
    color:#286090;
}
#headerwrap div.ct-more > a > span.arrow,
#f div.ct-more > a > span.arrow {
    font-size:14px;
    display:inline-block;
    vertical-align:top;
    margin-top:4px;
}

#headerwrap a.ct-top-fv-link {
    line-height:22px;
    font-weight: 300;
    color: white;
}
#headerwrap a:hover.ct-top-fv-link {
    color: #ccc;
}
a.ct-top-link {
    line-height:28px;
    font-weight: 300;
    color: white;
}
a:hover.ct-top-link {
    color: #ccc;
}

.ct-news a.ct-news-link {
    line-height:22px;
    font-weight: 300;
    color: white;
}
.ct-news a:hover.ct-news-link {
    color: #ccc;
}

.ct-youtube-frame,
.ct-special-frame > a {
    display: block;
    border: solid 1px #888;
    border-radius: 10px;
    overflow: hidden;
    padding-bottom: 10px;
}

.ct-youtube-frame,
.ct-photo-frame {
    cursor: pointer;
}
.ct-youtube-frame:hover,
.ct-photo-frame:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    opacity: 0.8;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
}
.ct-youtube:hover  {
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
}
.ct-youtube-frame:hover > img,
.ct-photo .ct-photo-frame:hover img,
a:hover > span.ct-img-frame-h > img,
a:hover > img {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    opacity: 0.8;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
}
.ct-name {
    font-weight: normal;
}
#f.ct-tail-list h3 {
    font-size: 24px;
}
.ct-tail-list .ct-name {
    font-size: 17px;
    line-height: 18px;
}


/* for carousel */
#f.ct-photo .carousel-indicators {
    bottom: -30px;
    width: 100%;
    left: 30%;
}
#f.ct-photo .carousel-control-next-icon,
#f.ct-photo .carousel-control-prev-icon {
    width: 4rem;
    height: 4rem;
}
#f.ct-photo .carousel-control-next,
#f.ct-photo .carousel-control-prev {
    width: 5%;
}
#f.ct-photo .carousel-control-next:hover,
#f.ct-photo .carousel-control-prev:hover {
    opacity: 0.3;
}
#f.ct-photo .carousel-control-next {
    justify-content: right;
    margin-right: -22px;
}
#f.ct-photo .carousel-control-prev {
    justify-content: left;
    margin-left: -22px;
}
#f.ct-photo .ct-slider-x .ct-img-frame-h img.ct-img-responsive-h,
#f.ct-photo .carousel-inner .ct-img-frame-h img.ct-img-responsive-h {
    right: 0;
    margin-right:auto;
    margin-left:auto;
}

@keyframes ct-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
#f.ct-photo .ct-slider-x,
#f.ct-photo .carousel-inner {
    margin-right: auto;
    margin-left: auto;
}
#f.ct-photo .carousel-inner {
    width: 95%;
}
.ct-slider-x {
    position: relative;
    scroll-snap-type: x mandatory;
    width: 100%;
    overflow-x: scroll;
    display: flex;
    opacity: 0;
    animation: 0.5s ct-fadeIn forwards;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}
.ct-slider-x > div{
    scroll-snap-align: center;
    height: 100%;
    width: 100%;
    flex: none;
}
.ct-carousel-frame-fh {
    height: 87vh;
    max-height: calc(87vw * 952 / 674);
}
.ct-carousel-frame-fh .ct-img-responsive-h {
    height: 100%;
}


/* for cast & staff page'*/
.ct-cast h4 {
    color: white;
    font-size: 20px;
    text-align: center;
}
.ct-cast h4.ct-cast-name {
    font-size: 22px;
    font-weight: bold;
}
.ct-cast h4.ct-cast-name span.ct-role-name {
    font-size: 20px;
    font-weight: normal;
}
.ct-cast .ct-cast-frame {
    background: linear-gradient(to top,#181818, #000 30%, #000);
}
.ct-cast div.ct-exp {
    height: 80px;
    margin-top: 0.5rem;
}
.ct-cast div.ct-exp p {
    margin-left: 1rem;
    margin-right: 1rem;
}


/* for gallery page */
.ct-photo .ct-photo-frame {
    background: linear-gradient(to top,#181818, #000 15%, #000);
    border: solid 1px #888;
    border-radius: 10px;
    overflow: hidden;
}
.ct-photo div.ct-exp {
    height: 40px;
    margin-top: 0.5rem;
}
.ct-photo div.ct-exp p {
    margin-left: 1rem;
    margin-right: 1rem;
    text-align: center;
}


/* for special page */
.ct-special .ct-special-frame img {
    background-size: cover;
}
.ct-special div > a {
    color: #f2f2f2;
    font-size: 20px;
}
.ct-special div > a:hover {
    color: #c2c2c2;
    font-size: 20px;
}
.ct-special div > a > span.ct-img-frame-h+span,
.ct-special div > a > img+span {
    display: block;
    margin-top: 0.5rem;
    text-align: center;
}
.ct-iv-jp {
    font-weight: 700;
    color: #e59a6f;
}
.ct-iv01-q {
    font-weight: 300;
}
#f p.ct-iv-q {
    font-weight: 300;
    color: #e59a6f;
}
.ct-iv-credit {
    color: #808080;
}

/* for episode page */
#f.ct-episode.ct-single {
    min-height: calc(100vh - 401px); /* 表示内容が少なすぎるとき用 */
}
#f.ct-episode.ct-single-no-submenu {
    min-height: calc(100vh - 356px); /* 表示内容が少なすぎるとき用 */
}

.ct-episode .ct-bc-info {
    color:white;font-family:'EB Garamond', serif;
    font-size:18px;
    line-height:19px;
}