@charset "UTF-8";

.event_summer{
margin: 0 auto;
padding: 0 0 0;
position:relative;
text-align:center;
width: 765px;
}
.event_summer_kv{
margin: 0 auto;
padding: 0 0 0;
position:relative;
text-align:center;
width: 765px;
}
.event_summer_kv h2{
position:absolute;
top:20px;
right:20px;
z-index:1;
}
.event_summer_kv h3{
margin: 0 auto;
padding: 0 0 0;
position:relative;
text-align:center;
}
.event_summer_kv h3 .kv_txt{
position:absolute;
top:30px;
left:0;
right:0;
text-align:center;
margin: auto;
}

.event_summer_inner{
margin: 0 auto;
padding: 50px 0 30px;
position:relative;
text-align:center;
background-image: url(../../images/event_summer/bg_cloud.svg),linear-gradient(to bottom, #fff 0%, #eaedf1 40%,#78def5 100%);
background-repeat: no-repeat;
background-position: center bottom;
background-size: auto;
}
.event_summer_inner p{
margin: 0 auto;
padding: 0 0 0;
position:relative;
text-align:center;
font-family: "Noto Sans JP";
font-weight: 500;
font-size: 18px;
line-height: 1.4;
color: #555;
}

ul.bonus_list{
margin: 0 auto 0;
padding: 0 0 0;
position:relative;
text-align:center;
width: 575px;
display: flex;
align-items:stretch;
justify-content:space-between;
flex-wrap:wrap;
}
ul.bonus_list li{
margin: 0 0 50px;
padding: 0 0 0;
position:relative;
text-align:left;
width: 255px;
}
ul.bonus_list li h4{
margin: 0 0 -20px;
padding: 0 25px;
position:relative;
text-align:left;
font-family: "Noto Sans JP";
font-weight: bold;
font-size: 22px;
line-height: 1.2;
color: #1465b1;
background-color:#ffe893;
height:60px;
width: fit-content;
display: flex;
align-items:center;
justify-content:center;
font-feature-settings: 'palt';
z-index:1;
}
ul.bonus_list li .bonus_p{
margin: 0 0 10px;
padding: 0 0 0;
position:relative;
text-align:center;
}
ul.bonus_list li p{
margin: 0 0;
padding: 0 0;
position:relative;
text-align:left;
font-family: "Noto Sans JP";
font-weight: 500;
font-size: 20px;
line-height: 1.4;
text-align: left;
color: #555;
font-feature-settings: 'palt';
}
ul.bonus_list li .bonus_icon{
position:absolute;
top:-10px;
right:-40px;
z-index:1;
}

ul.bonus_list li:nth-child(3),
ul.bonus_list li:nth-child(4){
text-align:right;
}
ul.bonus_list li:nth-child(3) h4,
ul.bonus_list li:nth-child(4) h4{
margin-left: auto;
margin-right: 0;
}
ul.bonus_list li:nth-child(3) .bonus_icon,
ul.bonus_list li:nth-child(4) .bonus_icon{
position:absolute;
top:-10px;
left:-40px;
right:auto;
z-index:1;
}




.event_summer_bot{
margin: 0 auto;
padding: 40px 70px 40px;
position:relative;
text-align:center;
background-color:#376897
}
.event_summer_bot small.txt_note{
position:absolute;
top:10px;
right:40px;
font-family: "Noto Sans JP";
font-weight: 500;
font-size: 12px;
line-height: 12px;
color: #fff;
}
.event_summer_bot h4{
margin: 0 0 10px;
padding: 5px 10px;
position:relative;
text-align:center;
font-family: "Noto Sans JP";
font-weight: 500;
font-size: 17px;
line-height: 1.4;
color: #555;
background-color:#ffe893;
width: fit-content;
font-feature-settings: 'palt';
}
.event_summer_bot p{
margin: 0 0 20px;
padding: 0 0;
position:relative;
text-align:left;
}
.event_summer_bot p{
margin: 0 0 20px;
padding: 0 0;
position:relative;
text-align:left;
}
.event_summer_bot p span{
margin: 0 0 0 1em;
padding: 0 0;
position:relative;
text-align:left;
font-family: "Noto Sans JP";
font-weight: 500;
font-size: 18px;
line-height: 1.4;
color: #fff;
display:block;
text-indent:-1em;
}
.event_summer_bot p span small{
font-size: 12px;
}
.event_summer_bot h5{
margin: 0 0;
padding: 10px 15px;
position:relative;
text-align:left;
font-family: "Noto Sans JP";
font-weight: 500;
font-size: 18px;
line-height: 1.4;
color: #555;
background-color:#fff;
font-feature-settings: 'palt';
}


/* 拡大写真ポップアップ用指定
=========================================*/

/* 画像エリアを相対配置に */
.bonus_p {
    position: relative;
    cursor: pointer;
}

/* 虫眼鏡アイコン */
.bonus_p::after {
    content: "";
    position: absolute;
    right: 8px;
    bottom: 6px;
    width: 30px;
    height: 30px;
    background: url("/common/images/event/loupe_w.svg") no-repeat center center;
    background-size: contain;
    pointer-events: none; /* クリックを邪魔しない */
}

/* ===== モーダル本体 ===== */
.img_modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

/* 画像 */
.img_modal img {
    max-width: 90vw;
    max-height: 90vh;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

/* 表示状態 */
.img_modal.active {
    display: flex;
}

/* ×ボタン */
.img_modal .close_btn {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 40px;
    color: #fff;
    cursor: pointer;
    line-height: 1;
    font-weight: bold;
    transition: 0.3s;
}

.img_modal .close_btn:hover {
    opacity: 0.6;
}



.center{
text-align:center;
}

.sp_only{
display:none;
}

.img_sp {
display:none;
}