@charset "Shift_JIS";

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

/* パンくず削除 */
#pankuzu {
    display: none;
}
#v-point img {
    width: 100%;
    height: auto;
    display: block;
}
#v-point 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;
}



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

/*==============================================
共通 ここまで
================================================*/

/*==============================================
#v-point 共通 STR
================================================*/

#v-point {
    font-size: var(--font-size-text);
}

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

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

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

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

/*==============================================
#v-point 共通 END
================================================*/

#v-point{
    width:100%;
    box-sizing: border-box;
    margin: 0 auto;
    text-align: center;
    position: relative;

}
#v-point #intro,
#v-point #anchor,
#v-point #contents_usesave{
    background-color: #f0f3ff;
}
#v-point #contents_method,
#v-point #contents_about{
    background-color:#bedffc;
}
#v-point #anchor{
    box-sizing: border-box;
    padding: 1em 1em 2em;
}

#v-point .contents_inner{
    padding: 1em;
}

#v-point h2{
    font-size: 2em;
    background-color: #004098;
    padding: .4em;
    color: #fff;
}

/* 冒頭部分 */
#v-point .top{
    padding: 0;
}
#v-point .top .text img{
    width: 65%;
    margin: 0 auto 2%;
}

#v-point .top p{
    font-size: .9em;
    letter-spacing: normal;
}
#v-point .top .bold{
    font-weight: bold;
    font-size: 1.2em;
}

/* ｖポイントを連携するボタン */
#v-point .btn{
    background-color: #eb0012;
    padding: .7em;
    border-radius: 80px;
    margin-top: 1em;
    color: #fff;
    filter: drop-shadow(0 3px 0 #8c1e11);
}
#v-point .btn a{
    position: relative;
}
#v-point .btn a::after{
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    right: 27px;
    width: 10px;
    height: 10px;
    margin: auto;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    box-sizing: border-box;
}

/* アンカー */

#v-point #anchor .anchor-list ul{
    display: flex;
    justify-content: space-around;
    gap: 1em;
    margin: 0 auto;
    width: 100%;
}

#v-point #anchor .anchor-list li{
    position: relative;
    width: 29%;
}
#v-point #anchor .anchor-list li::after{
    content: '';
    position: absolute;
    top: 55%;
    bottom: 0px;
    right: 45%;
    width: 9px;
    height: 9px;
    margin: auto;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(135deg);
    box-sizing: border-box;
}

#v-point #anchor .anchor-list li p{
    color: #fff;
    line-height: 1.3;
}

#v-point #anchor .anchor-list a{
    position: relative;
    background-color: #004098;
    border: solid 2px #fff;
    border-radius: 100vw;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .5em;
}

#v-point #anchor .anchor-list a::after {
    content: "";
    position: absolute;
    border: 4px solid #004098;
    border-radius: 100vw;
    inset: -6px;
}


/* 連携方法 */

#v-point #contents_method h3{
    margin: 0 auto 2%;
    max-width: 10em;
}
/* スパン */
#v-point #contents_method .small{
    font-size: 0.8em;
}
#v-point .base{
    background-color: #fff;
    box-sizing: border-box;
    margin: 0em 0em 1.5em;
    border-radius: 10px;
    padding: 1em;
    box-shadow: 0px 2px 5px #4f4f4f;
}

#v-point #contents_method p{
    margin-bottom: 1em;    
}

/* 「こちら」のリンク */
#v-point .rink{
    color: #0090ff;
    margin-top: .5em;
}
#v-point #contents_method .rink a{
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}
#v-point #contents_method i{
    font-size: 2em;
}

/* ステップ2 */
#v-point #contents_method .min-method{
    margin-bottom: 1.5em;
    border: solid 1px #004098;
    padding: 0 0 1em;
}
#v-point #contents_method .min-method:last-child{
    margin-bottom: 0em;
}

#v-point #contents_method .min-h{
    background-color: #004098;
    color: #fff;
    padding: .3em 0 .5em 0;
    font-size: 1.1em;
}
#v-point #contents_method .min-text{
    margin: .5em;
    line-height: 1.4em;
    font-weight: bold;
    /* letter-spacing: normal; */
}
#v-point #contents_method .image_area{
    width: 75%;
    margin: 0 auto;
}

/* ステップ3 */
#v-point #contents_method .step03{
    width: 50%;
    margin: 0 auto;
}

/* 使える・貯まる */
#v-point #contents_usesave .image_area{
    width: 75%;
    margin: 0 auto;
}
#v-point #contents_usesave h3{
    width: 65%;
    margin: 0 auto;
    line-height: .5;
}
#v-point #contents_usesave h4 {
    color: #e50012;
    font-size: 1.1em;
    letter-spacing: .06em;
    line-height: 1.5em;
    border-bottom: 1px solid #222;
    width: 4em;
    text-align: center;
    margin: .5em auto 0 auto;
}

#v-point #contents_usesave p{
    line-height: 1.4em;
    padding: .6em 0;
}

#v-point #contents_usesave .flex{
    display: flex;
    width: 100%;
    margin: 0 auto;
    /* justify-content: space-between; */
    gap: 6px;
    margin-top: 1em;
}
#v-point #contents_usesave li{
    border-radius: 7px;
    border: solid;
    overflow: hidden;
    margin-bottom: .5em;
}
#v-point #contents_usesave .example{
    margin: 1em auto;
}
#v-point #contents_usesave li.padding{
    padding: .5em .5em;
}
/* スパン */
#v-point #contents_usesave .example_text .big{
    font-size: 1.5em;
}
#v-point #contents_method .small{
    font-size: 0.8em;
}

/* 例えばこんな風に貯まります */
#v-point #contents_usesave .example_text p{
    text-align: start;
    font-size: .9em;
}
#v-point #contents_usesave .example_text .text_03{
    line-height: 2.2;
}
#v-point #contents_usesave .icon{
    position: relative;
}
#v-point #contents_usesave .icon .icon{
    position: absolute;
    width: 21%;
    top: 42%;
    right: 2%;
}

#v-point #contents_usesave .example_text .line{
    padding: 0.2em;
}
#v-point #contents_usesave .example_text .line.plaza{
    background-color: #ffc0cb;
}
#v-point #contents_usesave .example_text .line.v{
    background-color: #80b7f1;
}

/* Vポイントについて */
#v-point #contents_about table{
    margin: 0 auto;
    width: 100%;
    border-spacing: 4px 5px;

}
#v-point #contents_about th{
    background-color: #004098;
    padding: .5em;
    color: #fff;
    width: 31%;
    border-radius: 5px;
    line-height: 1.4;
    font-size: .9em;
}
#v-point #contents_about td{
    background-color: #fff;
    padding: .5em;
    width: 69%;
    text-align: start;
    border-radius: 5px;
}
#v-point #contents_about p {
    line-height: normal;
    letter-spacing: normal;
}
#v-point #contents_about .small{
    font-size: .8em;
}

/* 楽しもう */
#v-point .btn.finish{
    margin-bottom: 3%;
}
#v-point #contents_about .finish img{
    width: 70%;
    margin: 6% auto 0;
}
#v-point .btn.finish{
    margin-top: 0;
}