@charset "utf-8";

.summer_campaign{
    background-color: rgba(255, 255, 64, .1);
    margin: 2em auto;
    padding: 1.25em;
    text-align: center;
}
.summer_campaign .txt_s{ font-size: 12px;}
.summer_campaign .ttl{
    color: #1c2569;
    font-size: 20px;
    font-weight: normal;
    margin-bottom: .65em;
    display: flex;
    justify-content: center;
    align-items: baseline;
}
.summer_campaign.fudo .ttl{ color: #44a1c5;}
.summer_campaign.kabu .ttl{ color: #5e76a7;}

.summer_campaign .ttl .first-letter{ font-size: 30px;}
.summer_campaign .ttl::before,
.summer_campaign .ttl::after{
    content: "";
    border-left: 1px solid;
    padding-left: 1em;
    padding-top: 1em;
    transform: rotate(-35deg);
    align-self: stretch;
}
.summer_campaign .ttl::after{ transform: scaleX(-1) rotate(-35deg);}

@media screen and (max-width: 599px) {
    .summer_campaign .ttl{ font-size: 18px;}
    .summer_campaign .ttl .first-letter{ font-size: 28px;}
}


/* .mv .icn_notice */
.mv .icn_notice.summer{
    border: 0;
    background-color: rgba(236, 236, 0, .91);
}
.mv .icn_notice.summer:hover{
    opacity: .8;
}
.mv .icn_notice.summer:hover *{
    text-decoration: none;
}
.mv .icn_notice.summer p::after{
    content: "";
    border-top: 14px solid;
    border-right: 12px solid transparent;
    border-left: 12px solid transparent;
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
}
.mv .icn_notice.summer .ttl{
    letter-spacing: .1em;
    line-height: 1.3;
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin-bottom: 1em;
}
.mv .icn_notice.summer .ttl .first-letter{
    font-size: 1.5em;
}
.mv .icn_notice.summer .ttl::before,
.mv .icn_notice.summer .ttl::after{
    content: "";
    border-left: 1px solid;
    padding-left: .5em;
    margin-top: 1em;
    transform: rotate(-25deg);
    align-self: stretch;
}
.mv .icn_notice.summer .ttl::after{ transform: scaleX(-1) rotate(-25deg);}
.mv .icn_notice.summer .ttl_inner{
    display: flex;
    flex-direction: column;
}
.mv .icn_notice strong{
    color: #000;
}
@media screen and (max-width: 599px) {
    .mv .icn_notice.summer p::after {
        border-top-width: 8px;
        border-right-width: 6px;
        border-left-width: 6px;
        bottom: 10px;
    }
}
