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

  #articleDetail .splide { 
      width: 100%;
      margin-bottom: 5em;
}

  :root{
    --centerW: 770px;
    --arrowSize: 36px;
    --arrowGap: 30px;
  }

#articleDetail .splide a {
    display: block;
}


  #articleDetail .splide__slide img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    box-shadow: none;
    border:solid 1px #c5c5c5; 
  }
/*
#articleDetail .splide.rect02, #articleDetail .splide.sq02 img {
    padding: 1em;
}*/


#articleDetail .splide__slide img.round {
        border-radius: 50%;
        max-height: 390px;
        max-width: 770px;
    }
#articleDetail .splide__slide.is-active{
    opacity: 1;
    filter: none;
  }

#articleDetail .splide__arrow {
    background: rgba(230,230,230,0.6);
    width: var(--arrowSize);
    height: var(--arrowSize);
    border-radius: 999px;
    /*box-shadow: 0 2px 8px rgba(0,0,0,0.8);*/
    opacity: 1;
      top: 50%;
      transform: translateY(-50%);
      z-index: 5;
  }
#articleDetail .splide__arrow svg{
    fill: #999;
    width: 16px;
    height: 16px;
  }

#articleDetail .splide__arrow--prev{
    left: calc(50% - (var(--centerW) / 2) - var(--arrowGap) - (var(--arrowSize) / 2));
  }
#articleDetail .splide__arrow--next{
    left: calc(50% + (var(--centerW) / 2) + var(--arrowGap) - (var(--arrowSize) / 2));
  }

#articleDetail .splide{
    position: relative;
  }

#articleDetail .splide__pagination{
    bottom: -1.5em;
  }

#articleDetail .splide__pagination__page.is-active {
    background: #9E9E9E;
    transform: scale(1);
    z-index: 1
}    
    
#articleDetail .ss-content-area.content-area-html .iframe{
  display:block !important;
  width:94% !important;
  max-width:740px !important;
  margin:50px auto !important;
  height:auto !important;
  min-height:650px !important;
  overflow:visible !important;
  position:relative !important;
  aspect-ratio:auto !important; 
}

#articleDetail .ss-content-area.content-area-html .iframe > iframe{
  display:block !important;
  width:100% !important;
  height:650px !important; 
  min-height:650px !important;
  max-height:none !important;
  position:static !important;
  overflow:visible !important;
  border:0 !important;
}
#articleDetail .content-area-image {
 /* opacity: 0;*/
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

#articleDetail .content-area-image.is-show {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 480px){
  #articleDetail .ss-content-area.content-area-html .iframe,
  #articleDetail .ss-content-area.content-area-html .iframe > iframe{
      height: 320px !important;
      min-height: 320px!important;
  }
}



@media (max-width: 768px){
    :root{
      --centerW: 88vw;
      --arrowSize: 44px;
      --arrowGap: 20px;
    }
    #articleDetail .splide__pagination{
      bottom: -30px;
    }
      #articleDetail .splide__arrow {
          display: none;
      }  
  }

@media (max-width: 540px){
#articleDetail .splide--multi{
    position: relative;
    width: 94%;
    margin: 0 auto;
      }
    
    #articleDetail .splide__pagination {
        display: none;
    }
}


#articleDetail .splide--multi {
    width: 94%;
    margin: 0 auto;
}
#articleDetail .splide.rect02 button,
#articleDetail .splide.rect02 .splide--multi .splide__arrow {
    display:none;
}
#articleDetail .splide--multi .splide__slide {
    padding: 0 3px;
}

#articleDetail .splide--multi.area__midle {
    width: 94%;
    max-width: 1100px;
    margin: 0 auto;
}
#articleDetail .splide--multi.area__midle .splide__track{
    width: 100%;
}
#articleDetail .splide.rect02,
#articleDetail .splide.sq02{
  width: 94%;
  max-width: 1000px;
  margin: 0 auto;
}





#articleDetail #splide02 .splide__arrow,
#articleDetail #splide05 .splide__arrow {
    display: none;
}