@charset "utf-8";
/*
詳細ページ用 画像切替設定 CSS
*/
  :root {
    --easing: cubic-bezier(.2, 1, .2, 1);
    --transition: .8s var(--easing);
  }

  figure {
    margin: 0;
  }
  .l-inner {
    position: relative;
    box-sizing: content-box;
    max-width: 1200px;
    margin: 0 auto 0;
    padding: 0 10px 0
  }

.swiper-wrapper{ margin:0; padding:0;}

/*スライダー上下のすき間*/
  .l-section .l-inner {
    padding-top: 1px;
    padding-bottom: 1px;
  }

  [class*=swiper]:focus {
    outline: none;
  }

  .slide-media,
  .thumb-media {
    position: relative;
    overflow: hidden;
  }
  .slide-media img,
  .thumb-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
       object-fit: cover;
  }

/*画像表示延滞*/
.slide-media img, .slide-title{display:none;} 

/*   < > ボタンサイズ */
  .swiper-button-prev, .swiper-button-next {
    display: grid;
    place-content: center;
    width: 50px;
    height: 60px;
    cursor: pointer;
    transition: var(--transition);
  }
  .swiper-button-prev::before, .swiper-button-next::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
     border-top:1px solid #95a7b0; border-bottom:1px solid #95a7b0;

  }
/*  < 枠 */
.swiper-button-prev::before{
    border-radius: 0 10px 10px 0 / 0 10px  10px 0;
   border-right:1px solid #95a7b0; 
background-color:#ffffff;opacity: 0.7; 
}
/* > 枠 */
.swiper-button-next::before{
border-radius: 10px 0 0 10px / 10px 0 0 10px;
   border-left:1px solid #95a7b0;
background-color:#ffffff;opacity: 0.7; 
}
.swiper-button-prev:hover{ 
border-radius: 0 11px 11px 0 / 0 11px  11px 0;
background-color:#a1bbc9;opacity: 0.5; 
}
 .swiper-button-next:hover{ 
border-radius: 11px 0 0 11px / 11px 0 0 11px;
background-color:#a1bbc9;opacity: 0.5; 

}
/*   < > 文字サイズ 色*/
  .swiper-button-prev::after, .swiper-button-next::after {
    width: 12px;
    height: 12px;
    content: "";
    border:1px solid #879292;
    border-width: 3px 3px 0 0;
  }
  .swiper-button-prev::after {
    margin-left: 0.4rem;
            transform: rotate(-135deg);
  }
  .swiper-button-next::after {
    margin-right: 0.4rem;
            transform: rotate(45deg);
  }
/*端まで行ったら矢印非表示*/
  .swiper-button-disabled {
    pointer-events: none;
    opacity: 0;
  }

  .gallery02 {
    overflow: hidden;
  }

/*スライド画像(大)の横幅は bkd.css にて指定*/
  .gallery02 .swiper,
  .gallery02 .thumb-wrapper {
    margin: 2px auto 0;
  }
  .gallery02 .swiper {
    overflow: visible;
  }
/*フェードイン*/
  .gallery02 .swiper-fade .swiper-slide {
    transition-property: opacity, transform !important;
    pointer-events: none;
  }
  .gallery02 .swiper-fade .swiper-slide-active {
    pointer-events: auto;
  }
  .gallery02 .swiper-controller {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
padding: 50% 0 7%;
  }
  .gallery02 .swiper-button-prev, .gallery02 .swiper-button-next {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .gallery02 .swiper-button-prev {
    right: calc(100% - 50px);
  }
  .gallery02 .swiper-button-next {
    left: calc(100% - 50px);
  }
  .gallery02 .slide {
    display: block;
    overflow: hidden;
  }
  .gallery02 .slide-media {
    display: block;
  /*  padding-top: 62.5%; */
padding: 50% 0 7%;
    border-radius: 4px;
  }
  .gallery02 .slide-media img {
       object-fit: contain;
  }
/* コメント */
  .gallery02 .slide-title {
    padding: 2px; background-color:#eaf0f0; text-align:center;
  }
/*サムネイル画像設定  1行に表示するサムの数は yoyaku.css にて指定*/
  .gallery02 .thumb-wrapper {
    display: grid;
    gap: 3px; /*すき間*/
  }
  .gallery02 .thumb-media {
    padding-top: 100%;
    cursor: pointer;
    transition: var(--transition);
    border-radius: 4px;
  }
  .gallery02 .thumb-media img {
    transition: var(--transition);
  }
	/*選択サム*/
  .gallery02 .thumb-media-active {
            transform: scale(0.9);
    opacity: 0.3;
  }
  .gallery02 .thumb-media-active img {
            transform: scale(1.1);
  }

/**************** レスポンシブ ******************/

  @media only screen and (max-width: 900px) {
    .gallery02 .swiper-button-prev {
      width: 30px;     height: 60px;
    right: calc(100% - 30px);
    }
    .gallery02 .swiper-button-next {
      width: 30px;     height: 60px;
    left: calc(100% - 30px);
    }
  }

  @media only screen and (max-width: 599px) {
    .pc-tab {
      display: none !important;
    }
    .gallery02 .thumb-wrapper {
      grid-template-columns: repeat(5, 1fr);
    }
  }