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

.mb5p{ margin-bottom: 5% !important;}
.mb10p{ margin-bottom: 10% !important;}
.mb15p{ margin-bottom: 15% !important;}
.mb20p{ margin-bottom: 20% !important;}

  .mb100 { margin-bottom: 100px !important;}
  .mb60 { margin-bottom: 60px !important;}
  .mb30 { margin-bottom: 30px !important;}
  .mb20 { margin-bottom: 20px !important;}
  .mb15 { margin-bottom: 15px !important;}
  .mb10 { margin-bottom: 10px !important;}
  .mb8 { margin-bottom: 8px !important;}
  .mb0 { margin-bottom: 0px !important;}
  .center { text-align: center;}
.left { text-align: left !important;}
.bold{font-weight: 500 !important; font-size: 120%;}

  @media screen and (max-width: 767px) {
    .mb100 { margin-bottom: 20% !important;}
    .mb60 { margin-bottom: 25% !important;}
    .mb30 { margin-bottom: 10% !important;}
    .mb20 { margin-bottom: 8% !important;}
    .mb15 { margin-bottom: 3% !important;}
    .mb10 { margin-bottom: 2% !important;}
    .mb8 { margin-bottom: 1% !important;}
    .sp_mb5 { margin-bottom: 5px !important;}
    .sp_mb10 { margin-bottom: 10px !important;}
	.sp_mb20 { margin-bottom: 20px !important;}
    .sp_mb30 { margin-bottom: 6% !important;}
    .sp_mb60 { margin-bottom: 18% !important;}
	.sp-left { text-align: left !important;}
	  }

  /*col-set*/
  .col-set {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: calc(100% + 30px);
    -webkit-box-lines: multiple;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .col1-2 { width: calc(50% - 30px);}
  .col1-3 { width: calc(33.33333333% - 30px);}
  .col2-3 { width: calc(66.66666666% - 30px);}
  .col1-4 { width: calc(25% - 30px);}
  .col3-4 { width: calc(75% - 30px);}
  .col1-5 { width: calc(20% - 30px);}
  .col1-6 { width: calc(16.66666666% - 30px);}
  .col1000-2618 { width: calc(38.2% - 30px);}
  .col1618-2618 { width: calc(61.8% - 30px);}

  .col1-2,
  .col1-3,
  .col2-3,
  .col1-4,
  .col3-4,
  .col1-5,
  .col1-6,
  .col1000-2618,
  .col1618-2618 {
    margin-right: 30px;
  }

  @media screen and (max-width: 767px) {
    .col-set {
      width: calc(100% + 5px);
    }

    .col1-2,
    .col1-3,
    .col2-3,
    .col1-4,
    .col3-4,
    .col1-5,
    .col1-6,
    .col1000-2618,
    .col1618-2618 {
      width: calc(100% - 5px);
      margin-right: 5px;
    }

    .sp-col1-2 {
      width: calc(50% - 5px);
    }
	  
    .sp-col1-3 {
      width: calc(33.33333333% - 5px);
    }
    .sp-col2-3 {
      width: calc(66.66666666% - 5px);
    }  
  }

.flex{ display: flex;}

div#contents{ color: #000000; min-width: 320px;}
div.cont_b{ max-width: 900px; margin: 0 auto;}
div.video_b{ background: #f1f1f1; padding: 20px 0;}
div.lead{ max-width: 550px; margin: auto;}
div.lead p{ font-family: "Noto Serif JP", serif !important;}

@media (min-width: 991px) {
div.lead p{ line-height: 3;}
}

  .fade-in {
    opacity: 0;
    transform: translateY(10px);
    visibility: hidden;
    transition: opacity 0.6s ease-out, transform 1.2s ease-out;
    will-change: opacity, visibility;
  }

  .fade-in.is-visible {
    opacity: 1;
    transform: none;
    visibility: visible;
  }
  .fade-in.--2 {
    transition-delay: 300ms;
  }
  .fade-in.--3 {
    transition-delay: 500ms;
  }

div#contents * {
    font-family: "Noto Sans JP", sans-serif;
    color: #000000;
	font-weight: 300;
	letter-spacing: 0.2rem;
	word-break: break-all;
  }

div#contents p,
div#contents dl{ font-size: 1.5rem;}

div#contents p.sub_title{ font-size: 80%; padding-left: 40px; margin-left: -5%;}


div#contents h4.title{ max-width: 700px; margin: 0 auto 5% auto;}
div#contents div.staff{ max-width: 700px; margin: auto;}
div#contents div.staff p{font-size: 0.75rem; font-family: "Noto Serif JP", serif !important; font-optical-sizing: auto; font-style: normal; font-weight: 100;}

div#contents p.link_b{ border-top: 1px solid #000000; border-bottom: 1px solid #000000; padding: 5px 10px; width: 100%;}
div#contents p.inst {width: 40px; height: 40px; margin: 0 10px 0 0; display: inline-flex; align-items: center;}

div#contents div.comment{ max-width: 600px; margin: auto;}
div#contents hr{ border-bottom: 1px solid #000000; width: 20%; margin: auto;}

  @media (max-width: 991px) {
	  div.cont_b,
	div#contents span.title_b{ padding: 0 6vw;}
	  div#contents div.comment{ padding: 0 6vw;}
	  div#contents p,
	  div#contents dl {
      font-size: 1.25rem;
    }
	  div.artist p.photo.spOnly{ background: #f1f0f0a3;}
	  div.artist p.photo.spOnly img{ width: 50%; margin-left: 25%;}
	  
    .col2-3 {
      width: calc(100% - 5px);
      margin-right: 5px;
    }
  }

  @media (max-width: 768px) {
.bold{ font-size: 100%;}
div#contents p.sub_title{ font-size: 60%;} 
div#contents p.link_b{ font-size: 68%; display:block; align-items: center; margin: 0; word-break: keep-all;}
div#contents .photo.spOnly img{ padding: 10px;}
  }

  @media (max-width: 991px) {
    .pcOnly{
        display: none !important;
      }
  }
  @media (min-width: 993px) {
    .spOnly{
      display: none !important;
    }
  }

.video {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video iframe {
  width: 100%;
  height: 100%;
  display: block;
}

.half-border {
  position: relative;
  padding-left: 40px;
 margin-left: -5%;
}

.half-border::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 30px;
  height: 1px;
  background-color: #000;
  transform: translateY(-50%);
}