/******************************************
 * PHOTO GALLERY 共通
 ******************************************/

/* 背景 */
#idPhotogallery {
  background-image:url(/img/photogallery/photo_back.jpg);
  background-repeat:repeat-y;
  background-position:left;
}
#idPhotogallery #idPhotogallery_bk{
  padding-top:1%;
  background-image:url(/img/photogallery/photo_back.jpg);
  background-repeat:repeat-y;
  background-position:right;
}

/* ギャラリー全体の箱 ーーーーーーーーーーー */
#idPhotogallery_box{
  padding-top:10px;
  margin:0 auto;         /* 中央寄せ */
  padding-right:0;
  clear:both;
  max-width:1300px;      /* ★ PC での横幅上限：ここが効いている限り横に伸びすぎない */
}

/* リスト共通 */
#idPhotogallery_box ul{
  list-style:none;
  margin:0;
  padding:0;
}

/******************************************
 * PC 用レイアウト（幅1081px以上）
 * 添付スクショのレイアウトを再現
 ******************************************/
@media screen and (min-width:1081px){

  /* ベースのサムネ枠（右側の小さい写真たち） */
  #idPhotogallery_box li{
    float:left;
    margin-right:1%;
    margin-bottom:8px;
    width:23.5%;      /* 4カラムベース */
    height:220px;     /* 小さめ横長 */
    transition:all 0.3s ease-in-out;
  }

  #idPhotogallery_box li:hover{
    transform:scale(1.03);
    z-index:10;
  }

  /* 一番左の大きい写真（縦長2枚ぶん） */
  #idPhotogallery_box li.clPhoto01{
    width:48%;        /* 左側を2カラム分使う */
    height:364px;     /* 大きめに縦を確保 → スクショの感じに近づける */
  }
	/* 下段右側の少し大きい写真（3枚並び） */
  #idPhotogallery_box li.clPhoto02,
	#idPhotogallery_box li.clPhoto03,
	#idPhotogallery_box li.clPhoto04,
  #idPhotogallery_box li.clPhoto05{
    height:178px;     /* 小さいのより少し高め */
  }
  /* 下段右側の少し大きい写真（3枚並び） */
  #idPhotogallery_box li.clPhoto06,
  #idPhotogallery_box li.clPhoto07,
  #idPhotogallery_box li.clPhoto08{
    width:31.6%;      /* 3カラム */
    height:260px;     /* 小さいのより少し高め */
  }

  /* ズーム枠は li に合わせてぴったり */
  #idPhotogallery_box li .clZoom{
    width:100%;
    height:100%;
    overflow:hidden;
    border-radius:12px;
  }
}

/******************************************
 * 共通：画像の見せ方（縦横比固定）
 ******************************************/

/* 画像は枠いっぱい＋トリミングで表示 */
.clZoom{
  overflow:hidden;
}
.clZoom img{
  width:100%;
  height:100%;
  object-fit:cover;       /* 枠に合わせてトリミング */
  object-position:center; /* 中央寄せ */
  display:block;
}
/* 縦写真を少し上にずらして見せたい場合（任意） */
.clVertical .clZoom img{
  object-position:50% 20%;
}

/******************************************
 * SNS パーツ
 ******************************************/
#idPhotogallery .clFacebook_sns{
  left:5%;
  top:5%;
  position:absolute;
  z-index:9999999;
  padding:10px;
}
#idPhotogallery .clFacebook_sns .fb-like,
#idPhotogallery .clFacebook_sns .fb-share-button{
  height:21px;
  overflow:hidden;
}
#idPhotogallery p.clFont18{
  padding-left:5%;
  padding-right:5%;
}

/******************************************
 * タブレット（1080px以下）は「2カラム」で崩れ防止
 ******************************************/
@media screen and (max-width:1080px){

  #idPhotogallery_box{
    max-width:760px;     /* 2カラム時のベスト幅 */
    margin:0 auto;
  }

  #idPhotogallery_box li,
  #idPhotogallery_box li.clPhoto01,
  #idPhotogallery_box li.clPhoto02,
  #idPhotogallery_box li.clPhoto03,
  #idPhotogallery_box li.clPhoto04,
  #idPhotogallery_box li.clPhoto05,
  #idPhotogallery_box li.clPhoto06,
  #idPhotogallery_box li.clPhoto07,
  #idPhotogallery_box li.clPhoto08{
    float:left;
    width:48%;
    margin-right:2%;
    margin-bottom:10px;
    height:220px;
  }

  #idPhotogallery_box li:nth-child(2n){
    margin-right:0;
  }

  #idPhotogallery_box li .clZoom{
    height:100%;
		border-radius:12px;
  }
}

/******************************************
 * スマホ（640px以下）は小さめ2カラム
 ******************************************/
@media screen and (max-width:640px){

  #idPhotogallery_box{
    max-width:100%;
    margin:0 auto;
  }

  #idPhotogallery_box li,
  #idPhotogallery_box li.clPhoto01,
  #idPhotogallery_box li.clPhoto02,
  #idPhotogallery_box li.clPhoto03,
  #idPhotogallery_box li.clPhoto04,
  #idPhotogallery_box li.clPhoto05,
  #idPhotogallery_box li.clPhoto06,
  #idPhotogallery_box li.clPhoto07,
  #idPhotogallery_box li.clPhoto08{
    width:49%;
    margin-right:2%;
    margin-bottom:6px;
    height:160px;
  }

  #idPhotogallery_box li:nth-child(2n){
    margin-right:0;
  }
}