/* CSS Document */

body{
/*
    max-width: 1100px;
    margin: 0 auto;
*/
    background-color: #FEEAB8;
}

img{
    display: block;
    width: 100%;
}

.pc { 
    display: block!important; 
    max-width: 1100px;
    margin: 0 auto;
}
.sp { 
    display: none !important; 
}

/*ヘッダー*/
header{
    background-image: url("../images/kv-bg.png");
}


/*TOPへ戻るボタン*/
.top-btn{
    display: block;
    position: fixed;
    bottom: 3vw;
    right: 2vw;
    z-index: 98;
    max-width: 110px;
    max-height: 110px;
    width: 30%;
}

.top-btn img{
/*
    max-width: 300px;
    width: 135px;
*/
    width: 100%;
    height: 100%;
}

/*セクション背景*/
.sec-bg{
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

/*セクション内インナー*/
.inner{
    max-width: 900px;
    width: 81.9%;
    margin: 0 auto;
    position: relative;
}

/*スペシャルイベント*/
#sp-event{
    background-image: url("../images/sp-event_bg00.jpg");
    
}
#sp-event .inner{
    padding-bottom: 125%;
}

.sp-event_img{
    width: 60%;
    position: absolute;
    display: block;
}
.sp-event_img:first-of-type{
    top: 16%;
    left: 0;
}
.sp-event_img:last-of-type{
    bottom: 5%;
    right: -8%;
    width: 67%;
}

/*シェアグルメ*/
#share-gour{
    background-image: url("../images/share-gour_bg.jpg");
}
#share-gour .inner{
    padding-bottom: 112%;
}
.share-gour_img{
    width: 45%;
    position: absolute;
    display: block;
}
.share-gour_img:first-of-type{
    top: 20%;
    left: 0;
}
.share-gour_img:nth-of-type(2){
    top: 20%;
    right: -47px;
    width: 64%;
}
.share-gour_img:nth-of-type(3){
    top: 61.3%;
    left: -160px;
    width: 76%;
}
.share-gour_img:last-of-type{
    top: 64.5%;
    right: -53px;
    width: 51%;
}

/*ハピネスギフト*/
#hp-gift{
    background-image: url("../images/hp-gift_bg.jpg");
}
#hp-gift .inner{
    padding-bottom: 175%;
}
.hp-gift_img{
    width: 45%;
    position: absolute;
    display: block;
}
.hp-gift_img:first-of-type{
    top: 14%;
    left: 0;
}
.hp-gift_img:nth-of-type(2){
    top: 29%;
    right: 8%;
    width: 24.5%;
}
.hp-gift_img:nth-of-type(3){
    top: 35%;
    left: -25px;
    width: 97%;
}
.hp-gift_img:nth-of-type(4){
    top: 64%;
    left: 50%;
/*    transform: translateX(-50%);*/
    width: 76%;
}
.hp-gift_img:last-of-type{
    bottom: -8%;
    left: 50%;
/*    transform: translateX(-50%);*/
    width: 77%;
}

/*ホリデイコレクション*/
#hd-coll{
    background-image: url("../images/hd-coll_bg.jpg");
}
#hd-coll .inner{
    padding-bottom: 206%;
}
.hd-coll_img{
    width: 50%;
    position: absolute;
    display: block
}
.hd-coll_img:first-of-type{
    top: 11%;
    left: 0;
}
.hd-coll_img:nth-of-type(2){
    top: 11%;
    right: 0;
    width: 41.5%;
}
.hd-coll_img:nth-of-type(3){
    top: 39%;
    left: 0;
    width: 71.5%;
}
.hd-coll_img:nth-of-type(3):hover{
   z-index: 10;
}

.hd-coll_img:nth-of-type(4){
    top: 36%;
    right: -69px;
    width: 54.5%;
}
.hd-coll_img:nth-of-type(5){
    top: 62%;
    left: 0;
    width: 77%;
}
.hd-coll_img:nth-of-type(6){
    top: 65%;
    right: 5px;
    width: 41%;
    z-index: 10;
}
.hd-coll_img:last-of-type{
    bottom: 2%;
    left: 5%;
    width: 85%;
}

/*フッター*/
.footer-hover{
    transition: all ease .3s;
}
.footer-hover:hover{
    opacity: 0.6;
}
.footer-logo{
    background-color: #fff;
    padding: 0.8% 0;
}
.footer-logo img{
    width: 18.8%;
    max-width: 198px;
    margin: 0 auto;
}
.copyright{
    background-image: url("../images/copy-bg.png");
    padding: 15px 0;
}
.copyright img{
    width: 18%;
    max-width: 165px;
    margin: 0 auto;
}

/*モーダルウィンドウ*/
.modal{
    width: 100vw;
    height: 100vh;
/*    background-color: rgba(0, 0, 0, 0.6);*/
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: none;
}
.modal-overlay{
     background-color: rgba(0, 0, 0, 0.6);
     width: 100%;
     height: 100%;
}
.modal-img__box{
    width: 57vw;
    height: 70.1%;
    max-width: 570px;
    max-height: 877px;
    min-height: 550px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    z-index: 500;
/*    追記*/
    overflow-y: auto; 
    overflow-x: hidden; /* 横方向のスクロールは不要なため非表示に固定 */
    /* スクロールバーのスペースを考慮しないように、画像を調整する場合は
       padding/box-sizingの調整が必要ですが、今回は不要として進めます */
}
/*
.modal-img__box::-webkit-scrollbar {
    display: none;
}
*/
.modal-img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: none;
/*    追記*/
    
    width: 100%; /* 親要素の幅いっぱいに広げる */
    /* height: 100%; <- 削除または変更 */
    height: auto; /* 画像の元の縦横比を維持 */
    /* object-fit: contain; <- 削除 */
}

/*モーダル展開*/
.modal-active{
    display: block;
}
.img-active{
    display: block;
}

/*モーダル要素関係*/
.modal-select{
    transition: all ease .3s;
}
.modal-select:hover{
    opacity: 0.6;
}

/*クローズボタン*/
.close-btn{
   width: 30px;
    height: 30px;
    position: absolute;
    top: 2%;
    right: 4%;
    cursor: pointer;
}
.btn-box{
    position: relative;
    width: 100%;
    height: 100%;
}
.btn-box span{
    width: 100%;
    height: 2px;
    display: block;
    background-color: #333;
    position: absolute;
    
}
.btn-box span:first-child{
    transform: rotate(43deg) translate(-50%, -50%);
    top: 80%;
    left: 37%;
}
.btn-box span:last-child{
    transform: rotate(317deg) translate(-50%, -50%);
    top: 12%;
    left: 40%;
}

/*アニメーション*/

/*フェードアップ*/
.fade-up{
    opacity: 0;
    transform: translateY(30px);
    transition: all ease 0.8s;
}
.fade-active{
    opacity: 1;
    transform: translateY(0);
}
.fade-up__ex{
    opacity: 0;
    transform: translate(-50% , 30px);
    transition: all ease 0.8s;
}
.fade-active__ex{
    opacity: 1;
    transform: translate(-50% , 0);
}