@charset "UTF-8";
@import url("../common/common.css");
@import url("../common/base.css");

@import url('https://fonts.googleapis.com/css2?family=Reem+Kufi&display=swap');


/*----- GALLERY 設定 ----------------------------------------------------*/

/*----- 共通 設定 ----------------------------------------------------*/
section.sectionWrap{ width:100%; padding:20px 0; float:left; }
div.sectionArea{ width:100%; float:left; }

div.sectionHeader{ width:100%; padding:20px 0; float:left; }

h2.sectionHeader_tit{ margin:0 10px; border-left:10px solid #0283e6; font-size:2.2em; text-indent:0.5em; float:left; }
div.sectionHeader_text{  }



/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){
    
    h2.sectionHeader_tit{ width:100%; margin:0; font-size:1.6em; }
    div.sectionHeader_text{ width:100%; padding:10px 0; float:left; }

}


/*----- GALLERY詳細 設定 ----------------------------------------------------*/
div.gallery_detailArea{ width:100%; float:left; }

.gallery_detailArea_textBox{ width:90%; padding:20px 5%; float:left; }

div.gallery_detailArea_imgArea{ display:flex; justify-content:flex-start; flex-wrap:wrap; gap:5px; width:100%; float:left; }
div.gallery_detailArea_imgBox{ width:33%; aspect-ratio:4/3; text-align:center; }
div.gallery_detailArea_imgArea::after{ content:""; display:block; width:33%; aspect-ratio:4/3; visibility:hidden; }

/*div.gallery_detailArea_imgBox a{ width:100%; height:100%; position:relative; overflow:hidden; background-color:white; display:flex; justify-content:center; align-items:center; }
div.gallery_detailArea_imgBox img{ width:auto; height:100%; object-fit:contain; max-width:100%; max-height:100%; }*/

/*比率違いはトリミング*/
div.gallery_detailArea_imgBox a{ display:block; width:100%; height:100%; position:relative; overflow:hidden; }
div.gallery_detailArea_imgBox img{ width:100%; height:100%; object-fit:cover; }

/* 一覧に戻るボタンのスタイル */
div.back_to_gallery { width:100%; margin:20px 0; text-align:center; float:left; }
div.back_to_gallery a {
    display:inline-block; padding:8px 20px; text-decoration:none;
    background-color:#0283e6; color:#fff; border-radius:5px;
    transition:background-color 0.3s;
}
div.back_to_gallery a:hover { background-color:#026bbd; }

div.pageNavArea{ display:flex; gap:0 20px; flex-wrap:wrap; justify-content:center; width:100%; padding:30px 0; font-size:1.2em; font-weigh:bold; float:left; }
div.pageNavArea a{ text-decoration:none; }
div.pageNavArea a:hover{ text-decoration:underline; }

/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){
    
    div.gallery_detailArea_imgArea{ justify-content:space-between; gap:12px 0; }
    div.gallery_detailArea_imgBox{ width:48%; }
    
    div.back_to_gallery { margin:15px 0; }
    div.back_to_gallery a { padding:10px 25px; font-size:1em; }
    
}