@charset "Shift_JIS";

/*==============================================
共通 ここから
================================================*/

/* パンくず削除 */
#pankuzu {
    display: none;
}
#app-campaign img {
    width: 100%;
    height: auto;
    display: block;
}
#app-campaign svg {
    width: 100%;
}
.header-info-red {
    display: none !important;
}
a {
    display: block;
}
.smp-none {
    display: none;
}
footer {
    margin-top: 0 !important;
}
footer .bottom {
    margin-top: 0 !important;
}

/* 価格プロ */
.buy_price>ol, .buy_price>ul {
    margin: 0;
}
span.marker {
    background: linear-gradient(transparent 60%, #ffe4d2 40%);
    font-weight: bold;
    color: #ff3500;
    line-height: 1;
    font-size: 1em;
}
.buy_price>ol .spesicalprice, .buy_price>ul .spesicalprice,.buy_price>ul .intax {
    display: none;
}

.smp_none {
    display: none;
}

/* 変数指定 */
:root {
    --font-size-text: 3.74cqw;
    --box-shadow:  0px 1px 3px 1px rgba(0, 0, 0, 0.1);
    --color-black: #252525;
    --color-active: #0090ff;
    --margin-space-beside: 1em;
    --margin-space-vertical: 1em;
}
/*==============================================
共通 END
================================================*/

/*==============================================
#app-campaign 共通 STR
================================================*/
#app-campaign {
    font-size: var(--font-size-text);
}

#app-campaign * {
    box-sizing: border-box;
    font-size: var(--font-size-text);
}
#app-campaign a {
    display: block;
}
#app-campaign span {
    font-size: 1.5em;
    line-height: 1;
}

#app-campaign .back {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    overflow: hidden;

    /* コンテナクエリを指定 */
    container-type: inline-size;  /* または size */
}

#app-campaign .v-point-section {
    width: 100%;
    position: relative;
    padding: var(--margin-space-vertical) 0 calc(var(--margin-space-vertical) * 1.5);
    overflow: hidden;
}

/*==============================================
#app-campaign 共通 END
================================================*/

/*==============================================
全体 STR
================================================*/
#app-campaign {
    display: block;
    position: relative;
    width: 100%;
    background: #d5c0ee;
}

#app-campaign .app-campaign__inner {
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
    background: #9f81c1;

    /* コンテナクエリを指定 */
    container-type: inline-size;  /* または size */
}

/* タイトル */
#app-campaign h2 {
    color: #ffffff;
    text-align: center;
    font-size: 1.5em;
}

/* 背景色 */
#app-campaign .app-campaign-wrapper.mission{
    background: #22a29b;
}
#app-campaign .app-campaign-event{
    background: #f17886;
}
/*==============================================
全体 END
================================================*/

/*==============================================
看板 STR
================================================*/
#app-campaign .top {
    display: block;
    position: relative;
}
#app-campaign .top .top-title{
    position: absolute;
    width: 95%;
    top: .3em;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
#app-campaign .top .top-title.coupon{
    width: 80%;
    top: 1em;
}
/*==============================================
看板 END
================================================*/

/*==============================================
app-campaign_entry エントリーボタン STR
================================================*/
#app-campaign form,
#app-campaign .login_btn,
#app-campaign .clear{
    position: relative;
    width: 100%;
    max-width: 22em;
    margin: 0 auto .5em;
}
#app-campaign .app-campaign-wrapper .clear{
    margin: auto;
}
#app-campaign input[type="submit"],
#app-campaign .clear p{
    color: #fff;
    background: #e21700;
    width: 100%;
    border-radius: 100vw;
    padding: 1em 2.2em 1em 1.2em;
    display: inline-block;
    text-align: center;
    line-height: 1.2;
    font-size: 1em;
    border: 0;
    appearance: none;
    box-shadow: 0 5px 0 #931203;
}

/* 親要素に矢印を重ねる */
#app-campaign form::after{
    font-family: 'fontPlazaIcon';
    content: '\e955';
    position: absolute;
    right: .8em;/* 右端から少し内側 */
    top: 50%;
    transform: translateY(-50%);
    color: #fff;/* テキスト色と合わせる */
    font-size: 1.2em;
    pointer-events: none; /* クリックの邪魔をしない */
}

/* ボタン(エントリー済み) */
#app-campaign .clear p{
    background: #727272;
    box-shadow: none;
    border:none;
    color: #fff;
    line-height: unset;
    pointer-events: none;
    border: .2em solid #f1f9f8;
}

/* 会員登録はこちら */
#app-campaign .entry-btn {
    color: #fff;
    background: #252525;
    width: 100%;
    border-radius: 100vw;
    padding: 1em 1em 1em 1.2em;
    display: inline-block;
    text-align: center;
    line-height: 1.2;
    font-size: 1.1em;
    border: 0;
    appearance: none;
    box-shadow: 0 5px 0 #000000;
    cursor: pointer;
}
#app-campaign .entry-btn i {
    font-weight: bold;
}
#app-campaign .login_btn p{
    margin-top: 1em;
}

/* アプリダウンロード */
#app-campaign .app-campaign_entry .app_dl{
    margin: auto 1em .5em;
}
#app-campaign .app-campaign_entry .app_dl p{
    font-size: 1.1em;
    margin-bottom: .3em;
    margin-top: -.5em;
    z-index: 3;
    position: relative;
}
#app-campaign .app-campaign_step .app_dl p{
    font-size: 1em;
    margin-bottom: .5em;
}
/*==============================================
app-campaign_entry エントリーボタン END
================================================*/

/*==============================================
app-campaign-wrapper 枠 STR
================================================*/
#app-campaign .app-campaign-wrapper{
    padding: var(--margin-space-beside)
}
#app-campaign .app-campaign-wrapper.coupon{
    padding-top: 0;
}
/* 左上タイトル付きボックス */
#app-campaign .app-campaign-wrapper .cstm-box-title-top{
    margin: 2em auto; /* 外側余白 */
    position: relative; /* タイトル基準 */
    border-radius: 1em; /* 角丸 */
    max-width: 800px; /* 最大幅 */
}

#app-campaign .app-campaign-wrapper.coupon .cstm-box-title-top:last-of-type{
    margin: 2em auto 0;
}
#app-campaign .app-campaign-wrapper.mission .cstm-box-title-top:last-of-type{
    margin: 2em auto 0;
}

#app-campaign .app-campaign-wrapper .cstm-box-title-top .box-title {
    background: #00a4a4;
    color: #fff;
    padding: 0.2em 1.5em;
    position: absolute;
    top: -1em;
    left: 0;
    right: 0;
    display: inline-table;
    font-weight: bold;
    border-radius: 10em;
    max-width: calc(100% - 2em);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 auto;
}

#app-campaign .app-campaign-wrapper.mission .cstm-box-title-top .box-title {
    background: #f24a5d;
}

#app-campaign .app-campaign-wrapper .cstm-box-title-top .box-content {
    padding: 2em 2em 1em; /* タイトル分の余白 */
    text-align: center;
    color: var(--color-black);
    background: #f1f9f8;
    border-radius: 1em;
}

/* 文字 */
#app-campaign .app-campaign-wrapper .cstm-box-title-top .box-text { 
    margin-bottom: .5em;
    line-height: normal;
    letter-spacing: normal;
}
#app-campaign .app-campaign-wrapper .cstm-box-title-top .box-text-title { 
    margin-bottom: .3em;
    font-weight: 800;
    line-height: normal;
    letter-spacing: normal;
    font-size: 1.3em;
}

/* ポイント */
#app-campaign .app-campaign-wrapper .cstm-box-title-top .box-text-point{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: .5em;
    color: #f24a5d;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-bottom: .5em;
}
#app-campaign .app-campaign-wrapper .cstm-box-title-top .box-text-point .box-text-left{
    width: 15%;
}
#app-campaign .app-campaign-wrapper .cstm-box-title-top .box-text-point .box-text-right{
    width: 85%;
}

/* 画像 */
#app-campaign .app-campaign-wrapper .box-img {
    margin: 0 auto 1em;
    width: 100%;
}
#app-campaign .app-campaign-wrapper .box-img.min{
    width: 10em;
}

/* ボタン下注釈 */
#app-campaign p.note{
    font-size: 1em;
    margin-bottom: .5em;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
}
#app-campaign p.note.white{
    color: #f1f9f8;
}
#app-campaign .entry_done p.note{
    font-size: .9em;
}

/* ボタン */
#app-campaign .app-campaign-wrapper .box-btn {
    position: relative;
    color: #fff;
    background: #f24a5d;
    width: 100%;
    border-radius: 100vw;
    padding: .6em 2.2em .6em 1.2em;
    display: inline-block;
    text-align: center;
    line-height: 1.2;
    font-size: 1.1em;
    border: 0;
    appearance: none;
    box-shadow: 0 5px 0 #b62435;
    cursor: pointer;
    margin-bottom: .5em;
}
#app-campaign .app-campaign-wrapper .box-btn::after {
    font-family: 'fontPlazaIcon';
    content: '\e955';
    position: absolute;
    right: .8em;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 1.2em;
    pointer-events: none;
}

#app-campaign .app-campaign-wrapper .cstm-box-title-top .box-text-title.muzin {
    margin-top: -2.2em;
}
#app-campaign .app-campaign-wrapper .cstm-box-title-top .box-img.muzin img{
    border-radius: 1em 1em 0 0;
}
/*==============================================
app-campaign-wrapper 枠 END
================================================*/

/*==============================================
vpoint_campaign-top アコーディオン STR
================================================*/
#app-campaign summary{
    text-align: center;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor:pointer;
    outline:none;
    margin: 1em auto 0;
}
#app-campaign .detail_accordion summary::before {
    font-family: 'fontPlazaIcon' !important;
    content: "\e909";
    font-size: 1.2em;
    margin-right: .1em;
}
#app-campaign .detail_accordion dl{
    border: .1em solid #919191;
    padding: var(--margin-space-beside);
    margin-top: var(--margin-space-beside);
    color: #2f2f2f;
    background: #ffffff;
}
#app-campaign .detail_accordion dl dt:not(:first-child){
    border-top: .1em solid #919191;
    margin-top: .5em;
    padding: .5em 0 0;
}
#app-campaign .detail_accordion dl dd {
    letter-spacing: normal;
    font-weight: 300;
}
/*箇条書き*/
#app-campaign .detail_accordion dl dd.list {
    position: relative;
    margin-left: 1.1em;
}
#app-campaign .detail_accordion dl dd.list::before {
    content: "・";
    margin-left: -1.3em;
}
/*リンクテキスト*/
#app-campaign .detail_accordion dl dd a {
    color: #e50012;
    text-decoration: underline;
    display: inline-block;
}

/*サブタイトル*/
#app-campaign .detail_accordion dl dd.subtitle {
    background: #eaeaea;
    font-weight: 500;
    padding: .2em 0;
}
/*==============================================
vpoint_campaign-contents アコーディオン END
================================================*/

/*==============================================
app-campaign-event アプリ見どころ STR
================================================*/
#app-campaign .app-campaign-event .col_2 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5em;
    margin-top: .8em;
}
#app-campaign .app-campaign-event .event_inner {
    width: calc(calc(100% - .5em) / 2);
}
#app-campaign .app-campaign-event .event_inner a{
    border: .2em solid #fff;
}

/*吹き出し*/
#app-campaign .app-campaign-event .event_inner .event_comment {
    position: relative;
    display: inline-block;
    margin-top: 0.5em;
    padding: .5em;
    border-radius: .5em;
    background-color: #ffffff;
    text-align: center;
    font-size: .8em;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-black);
    letter-spacing: normal;
    width: 100%;
}
#app-campaign .app-campaign-event .event_inner .event_comment::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    border-style: solid;
    border-width: 0 .8em 1em .8em;
    border-color: transparent transparent #ffffff;
    translate: -50% -100%;
}
#app-campaign .grayout {
    position: absolute;
    z-index: 100;
    background: #000000b8;
    color: #fff;
    width: 100%;
    border-radius: 100vw;
    padding: 1em 1.2em 1em 1.2em;
    display: flex;
    text-align: center;
    line-height: 1.2;
    font-size: 1em;
    border: 0;
    appearance: none;
    justify-content: center;
    align-items: center;
}