/* =========================================================
   Urban Kurooka - Gallery styles

   添付ラフイメージに合わせたレイアウト
   PC     : 3列
   Mobile : 2列
   キャプションは各画像の下に中央表示

   Photo Gallery by 10Web:
   gallery_id = 1
   ========================================================= */


/* ---------------------------------------------------------
   PCナビゲーション
   「ギャラリー」追加後も1行に収める
   --------------------------------------------------------- */
@media (min-width: 876px) {

  nav.pc-menu ul {
    padding-right: 1rem;
  }

  nav.pc-menu ul li:not(:first-child) {
    padding-left: .85rem;
    padding-right: .85rem;
    white-space: nowrap;
  }

  nav.pc-menu ul li:first-child {
    flex-basis: 34%;
  }
}


/* ---------------------------------------------------------
   ギャラリーページ上部
   他の固定ページと同じ header 背景方式
   --------------------------------------------------------- */
.gallery-page header {
  background-image: url('img/gallery_top-PC.png');
  background-repeat: no-repeat;
  background-position: left top;
}


/* ---------------------------------------------------------
   ギャラリー本文

   ラフイメージと同じく、一覧をページ中央に配置。
   PCでは必要以上に横へ広げない。
   --------------------------------------------------------- */
.gallery-10web-content {
  box-sizing: border-box;

  width: 64%;
  max-width: 760px;

  margin: 4.5rem auto 5.5rem;
  padding: 0;
}

.gallery-10web-section {
  width: 100%;
  margin: 0;
  padding: 0;
}


/* =========================================================
   Photo Gallery by 10Web
   ========================================================= */


/* ---------------------------------------------------------
   一覧コンテナ
   PC = 3列
   --------------------------------------------------------- */
.gallery-10web-section
#bwg_container1_0
#bwg_container2_0
.bwg-container-0.bwg-standard-thumbnails {
  box-sizing: border-box !important;

  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

  column-gap: 16px !important;
  row-gap: 18px !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 auto !important;
  padding: 0 !important;

  justify-content: stretch !important;
  align-content: start !important;
  align-items: start !important;
}


/* ---------------------------------------------------------
   各サムネイル
   10Web側の固定幅・max-width・float を完全に解除

   重要:
   10Webは画像ごとに .bwg-item の内側構造が変わる場合があるため、
   「直下の .bwg-item」に限定せず全 .bwg-item を対象にします。
   --------------------------------------------------------- */
.gallery-10web-section
#bwg_container1_0
#bwg_container2_0
.bwg-container-0.bwg-standard-thumbnails .bwg-item {
  box-sizing: border-box !important;

  display: block !important;
  float: none !important;

  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  justify-content: stretch !important;

  border: 0 !important;
  background: #fff !important;
}


/*
 * 10Web内部の画像ラッパーもすべて列幅いっぱいにします。
 * 一部の写真だけ小さくなる原因になる固定幅をここで解除します。
 */
.gallery-10web-section
#bwg_container1_0
#bwg_container2_0
.bwg-container-0.bwg-standard-thumbnails .bwg-item > a,
.gallery-10web-section
#bwg_container1_0
#bwg_container2_0
.bwg-container-0.bwg-standard-thumbnails .bwg-item0,
.gallery-10web-section
#bwg_container1_0
#bwg_container2_0
.bwg-container-0.bwg-standard-thumbnails .bwg-item1,
.gallery-10web-section
#bwg_container1_0
#bwg_container2_0
.bwg-container-0.bwg-standard-thumbnails .bwg-item2 {
  box-sizing: border-box !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  border: 0 !important;
  background-color: #fff !important;
}

/* ---------------------------------------------------------
   画像領域
   ラフのような横長サムネイルに統一。

   縦写真を切り取らないよう object-fit: contain を使用。
   余白部分は白背景にする。
   --------------------------------------------------------- */
.gallery-10web-section
#bwg_container1_0
#bwg_container2_0
.bwg-container-0.bwg-standard-thumbnails .bwg-item > a {
  box-sizing: border-box !important;

  display: block !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;

  aspect-ratio: 3 / 2;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  border: 0 !important;
  background: #fff !important;
  text-decoration: none !important;
}


/*
 * aタグの内側を3:2領域いっぱいに広げます。
 */
.gallery-10web-section
#bwg_container1_0
#bwg_container2_0
.bwg-container-0.bwg-standard-thumbnails .bwg-item > a .bwg-item0,
.gallery-10web-section
#bwg_container1_0
#bwg_container2_0
.bwg-container-0.bwg-standard-thumbnails .bwg-item > a .bwg-item1,
.gallery-10web-section
#bwg_container1_0
#bwg_container2_0
.bwg-container-0.bwg-standard-thumbnails .bwg-item > a .bwg-item2 {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;

  height: 100% !important;
  max-height: 100% !important;
  min-height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
}

.gallery-10web-section
.bwg-container-0.bwg-standard-thumbnails > .bwg-item img,
.gallery-10web-section [class*="bwg-item"] img,
.gallery-10web-section [class*="bwg_thumb"] img {
  box-sizing: border-box !important;

  display: block !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;

  height: 100% !important;
  max-height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: cover !important;
  object-position: center center !important;

  border: 0 !important;
  background-color: #fff !important;
}


/* ---------------------------------------------------------
   10Web内部ラッパーの固定サイズ・グレー背景を解除
   --------------------------------------------------------- */
.gallery-10web-section .bwg-item,
.gallery-10web-section [class*="bwg-item"],
.gallery-10web-section [class*="bwg_thumb"],
.gallery-10web-section [class*="bwg_img"] {
  box-sizing: border-box !important;

  max-width: 100% !important;

  background-color: #fff !important;
  background-image: none !important;
}

.gallery-10web-section [class*="bwg_thumb"]::before,
.gallery-10web-section [class*="bwg_thumb"]::after {
  background: transparent !important;
}


/* ---------------------------------------------------------
   キャプション
   ラフイメージ同様、写真直下に小さく中央表示
   --------------------------------------------------------- */
.gallery-10web-section .bwg-title1,
.gallery-10web-section .bwg-title2,
.gallery-10web-section [class*="bwg-title"] {
  box-sizing: border-box !important;

  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 5px 0 0 !important;
  padding: 0 2px !important;

  color: #555 !important;

  font-size: 10px !important;
  font-weight: normal !important;
  line-height: 1.35 !important;

  text-align: center !important;
  white-space: normal !important;

  background: transparent !important;
}


/* ---------------------------------------------------------
   不要な枠線・影
   --------------------------------------------------------- */
.gallery-10web-section .bwg-item,
.gallery-10web-section .bwg-item0,
.gallery-10web-section .bwg-item1,
.gallery-10web-section .bwg-item2 {
  border: 0 !important;
  box-shadow: none !important;
}


/* =========================================================
   タブレット
   ========================================================= */
@media (max-width: 1100px) and (min-width: 876px) {

  .gallery-10web-content {
    width: 70%;
    max-width: 720px;

    margin-top: 4rem;
  }
}


/* =========================================================
   スマートフォン
   ========================================================= */
@media (max-width: 875px) {

  /*
   * 他固定ページと同じスマホ用ヘッダー画像
   */
  .gallery-page header {
    background-image: url('img/gallery_top-m.png');
    background-repeat: no-repeat;
    background-position: left top;
  }


  /*
   * ラフイメージのように中央へ少し細めに配置
   */
  .gallery-10web-content {
    width: 78%;
    max-width: 520px;

    margin: 2.7rem auto 3.8rem;
    padding: 0;
  }


  /*
   * Mobile = 2列
   */
  .gallery-10web-section
  #bwg_container1_0
  #bwg_container2_0
  .bwg-container-0.bwg-standard-thumbnails {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    column-gap: 10px !important;
    row-gap: 15px !important;
  }


  /*
   * スマホではキャプションをさらに小さく
   */
  .gallery-10web-section .bwg-title1,
  .gallery-10web-section .bwg-title2,
  .gallery-10web-section [class*="bwg-title"] {
    margin-top: 4px !important;
    font-size: 9px !important;
    line-height: 1.3 !important;
  }
}


/* =========================================================
   小さいスマートフォン
   ========================================================= */
@media (max-width: 480px) {

  .gallery-10web-content {
    width: 80%;
  }

  .gallery-10web-section
  #bwg_container1_0
  #bwg_container2_0
  .bwg-container-0.bwg-standard-thumbnails {
    column-gap: 8px !important;
    row-gap: 13px !important;
  }
}



/* =========================================================
   サムネイル画像のトリミング
   縦写真も横写真と同じ3:2枠いっぱいに表示します。
   はみ出す部分（縦写真では主に上下）はトリミングされます。
   ========================================================= */

.gallery-10web-section
#bwg_container1_0
#bwg_container2_0
.bwg-container-0.bwg-standard-thumbnails .bwg-item img {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;

  height: 100% !important;
  max-height: 100% !important;

  object-fit: cover !important;
  object-position: center center !important;

  background-color: #fff !important;
}

/* =========================================================
   写真下キャプション
   page-gallery.php が 10Web画像の Alt/Title から生成します。
   ========================================================= */

.gallery-10web-section .uk-gallery-caption {
  box-sizing: border-box !important;

  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 5px 0 0 !important;
  padding: 0 2px !important;

  color: #555 !important;
  background: transparent !important;

  font-size: 10px !important;
  font-weight: normal !important;
  line-height: 1.35 !important;

  text-align: center !important;
  white-space: normal !important;
  word-break: break-word;
}


/* 10Web標準タイトルがTheme設定などで出た場合は二重表示を防ぐ */
.gallery-10web-section .bwg-title1,
.gallery-10web-section .bwg-title2,
.gallery-10web-section [class*="bwg-title"] {
  display: none !important;
}


@media (max-width: 875px) {

  .gallery-10web-section .uk-gallery-caption {
    margin-top: 4px !important;
    font-size: 9px !important;
    line-height: 1.3 !important;
  }
}