@charset "UTF-8";

.event_summer{
margin: 0 auto;
padding: 0 0;
position:relative;
text-align:center;
width: auto;
}
.event_summer_kv{
margin: 0 auto;
padding: 0 0 0;
position:relative;
text-align:center;
}
.event_summer_kv h2{
position:absolute;
top:10px;
right:10px;
z-index:1;
}
.event_summer_kv h2 img {
width:120px;
height:auto;
}
.event_summer_kv h3{
margin: 0 auto;
padding: 0 0 0;
position:relative;
text-align:center;
}
.event_summer_kv h3 img {
width:100%;
height:auto;
}
.event_summer_kv h3 .kv_txt{
position:absolute;
top:6px;
left:0;
right:0;
text-align:center;
margin: auto;
}
.event_summer_kv h3 img.kv_txt {
width:96%;
height:auto;
}

.event_summer_inner{
margin: 0 auto;
padding: 40px 0 15px;
position:relative;
text-align:center;
background-image: url(../../images/event_summer/bg_cloud.svg),linear-gradient(to bottom, #fff 0%, #eaedf1 30%,#78def5 100%);
background-repeat: no-repeat;
background-position: center bottom;
background-size: 100% 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: 14px;
line-height: 1.4;
color: #555;
}

ul.bonus_list{
margin: 0 auto 50px;
padding: 0 0 0;
position:relative;
text-align:center;
}
ul.bonus_list li{
margin: 0 auto 30px;
padding: 0 0 0;
position:relative;
text-align:left;
width: 300px;
}
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 .bonus_p img{
width:100%;
height:auto;
}
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: 18px;
line-height: 1.4;
text-align: left;
color: #555;
font-feature-settings: 'palt';
}
ul.bonus_list li p br{
display:none;
}
ul.bonus_list li .bonus_icon{
position:absolute;
top:-10px;
right:-40px;
z-index:1;
}


.event_summer_bot{
margin: 0 auto;
padding: 30px 30px 30px;
position:relative;
text-align:center;
background-color:#376897
}
.event_summer_bot small.txt_note{
position:absolute;
top:10px;
right:10px;
font-family: "Noto Sans JP";
font-weight: 500;
font-size: 11px;
line-height: 11px;
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: 14px;
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: 15px;
line-height: 1.4;
color: #fff;
display:block;
text-indent:-1em;
}
.event_summer_bot p span small{
font-size: 10px;
}
.event_summer_bot h5{
margin: 0 0;
padding: 10px 10px;
position:relative;
text-align:left;
font-family: "Noto Sans JP";
font-weight: 500;
font-size: 15px;
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: 10px;
    bottom: 10px;
    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: 20px;
    right: 20px;
    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;
}

.pc_only{
	display:none;
}

.img_pc {
	display:none;
}