@charset "UTF-8";

/*=====================================================================
　PC
=====================================================================*/
/* header+mv
----------------------------------------------*/
/* header
-----------------------*/
header{
    border-bottom: 1px solid #d6d6d6;
    background: var(--secondary-color)!important;
    height: 75px;
    width: 100%;
    z-index: 10;
    
    display: flex;/* nav中央寄せ用 */
}

header nav{
    align-items: center;
    display: flex;
    padding: 0 var(--space-20);
}
header nav .logo{
    height: auto;
    width: 159px;
}

/* mv_area
-----------------------*/
.mv_area{
    height: 350px;
    max-width: 100%;
    width: 100%;
    
    overflow: hidden;
    position: relative;
    
    /* 仮置き */
    background-image: linear-gradient(-45deg, #FCCF17 25%, #FFD514 25%, #FFD514 50%, #FCCF17 50%, #FCCF17 75%, #FFD514 75%, #FFD514);
    background-size: 100px 100px;

}

/* ロゴ */
.mv_area .box__mv{
    /* シン・中央寄せ */
    position: absolute;
    place-self: center;
    inset: 0;
}
.mv_area .box__mv img{
    width: 600px;
}

/* ドンペン */
.img__mv_area{
    width: 350px;
    z-index: 0;
    
    /* 位置 */
    position: absolute;
    bottom: -20%;
    right: 5%;
}


/* アンカーリンク集
----------------------------------------------*/
.anchor_area{
    
}
.anchor_area .li__anchor{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

/* ボタン */
.btn__anchor{
    background: var(--primary-color);
    border-radius: 500px;
    color: var(--secondary-color);
    font-size: 0.95rem;
    font-weight: bold;
    height: 80px;
    line-height: 1.2;
    text-align: center;
    position: relative;
    
    /* テキスト中央寄せ */
    align-items: center;
    display: flex;
    justify-content: center;
    
    /* 動き */
    transition: all 0.15s;
}
.btn__anchor:hover{
    background: #0071c7;
}

.btn__anchor i{
    position: absolute;
    right: 7%;
}


/* 株主サイトへのアクセス方法
----------------------------------------------*/
.cont_area__01{
    margin-top: var(--space-60);
}

/* 株主優待クーポンコード登録方法
-----------------------*/


/* 株主サイトで出来ること
----------------------------------------------*/


/* デジタルスタンプについて
----------------------------------------------*/
/* デジタルスタンプカードとは？ */
.li__notes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: var(--space-20);
}
.li__notes .txt {
    grid-column: span 2 / span 2;
}
.li__notes .txt p:nth-child(n+2){
    margin-top: var(--space-15);
}
.li__notes .img {
    grid-column-start: 3;
    
    /* サイズ調整、斜め置き、中央寄せ */
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    transform: rotate(10deg);
}
.li__notes .img img{
    filter: drop-shadow(15px 10px 4px #ddd);
    width: 65%;
}

/* クーポン発券方法 */
.cont_area__03 .li__flow_img{
    grid-template-columns: repeat(3, 1fr);
}

.cont_area__03 .li__coupon_note{
    font-size: 90%;
    list-style: disc;
    list-style-position: outside;
    margin-left: var(--space-30);
    margin-top: var(--space-10);
}
.cont_area__03 .li__coupon_note li{
    display: list-item;
}
.cont_area__03 .li__coupon_note li::after{
    content: none;
}

.cont_area__03 .box__cont:nth-of-type(2) .li__flow_img li .num {
    display: flex;
}

/* クーポン発券方法_注釈 */
.box__notes{
    font-size: 90%;
    margin-top: var(--space-30);
}

/* 店舗での商品交換方法 */
.cont_area__03 .box__cont:nth-of-type(3) .li__flow_img img{
   /* width: 100%;*/
}


/* 体験型イベントについて
----------------------------------------------*/
/* 体験型イベントとは？*/


/* デジタルPOP風メッセージカードについて
----------------------------------------------*/


/* 有効期限について
----------------------------------------------*/
/* リスト */
.li__expiry{
    list-style: disc;
    list-style-position: outside;
    margin-left: var(--space-30);
}
.li__expiry li{
    display: list-item;
}
.li__expiry li:nth-child(n+2){
    margin-top: var(--space-10);
} 
.li__expiry li .ttl__blue{
    margin-bottom: 0;
}

/* 表 */
.table__expiry{
    width: 100%;
}
.table__expiry th{
    background: var(--primary-color);
    color: var(--secondary-color);
    height: 50px;
}
.table__expiry td{
    background: #ebfaff;
    padding: var(--space-10);
}
.table__expiry tr:nth-child(odd) td {
    background: var(--secondary-color);
}

/* お問い合わせ */
.dl__expiry{
    align-items: baseline;
    display: flex;
    justify-content: flex-start;
}
.dl__expiry .num__tel{
    font-size: 2rem;
}


/* footer
----------------------------------------------*/
footer{
    background: var(--text-color);
    color: var(--secondary-color);
    padding: var(--space-20) 0;
}

footer .footer__top, footer .footer__bottom{
    font-size: 12px;
    margin: 0 auto;
    max-width: 1200px;
    width: var(--inner-w);
}

footer .footer__top{
    display: flex;
}
footer .li__footer{
    display: flex;
}
footer .li__footer li:nth-child(n+2){
    margin-left: var(--space-15);
}
footer .li__footer li a{
    background-image: linear-gradient(#fff, #fff);
    background-repeat: no-repeat;
    background-position: bottom right; /* 下線の初期位置 */
    background-size: 0 1px; /* 下線のサイズ（横幅、高さ） */
    padding-bottom: 3px; /* テキストと下線の間隔 */
    transition: background-size 0.3s;
}
footer .li__footer li a:hover{
    background-position: bottom left; /* 下線のホバー時位置 */
    background-size: 100% 1px; /* 下線の横幅を100%にする */
}

footer .footer__bottom{
    margin-top: var(--space-10);
}


/* ページTOP
----------------------------------------------*/
.pagetop {
    background: var(--secondary-color);
    border: solid 2px var(--primary-color);
    border-radius: 50%;
    height: 50px;
    width: 50px;
    z-index: 2;
    
    /* 中央寄せ */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 位置 */
    position: fixed;
    right: 30px;
    bottom: 30px;
}
.pagetop__arrow {
    border-top: 3px solid var(--primary-color);
    border-right: 3px solid var(--primary-color);
    height: 10px;
    width: 10px;
    transform: translateY(20%) rotate(-45deg);
}


/*=====================================================================
　850px以下
=====================================================================*/
@media screen and (max-width: 850px) {
    /* header+mv
    ----------------------------------------------*/
    header{
        height: 65px;
    }
    
    .mv_area{
        height: 250px;
    }
    .img__mv_area{
        width: 215px;
        right: 0;
    }
    
    .mv_area .box__mv img{
        padding: 0 var(--space-20);
    }
    
    
    /* アンカーリンク集
    ----------------------------------------------*/
    .anchor_area .li__anchor{
        grid-template-columns: repeat(2, 1fr);
    }
    
    .btn__anchor{
        height: 60px;
    }
    
    
    /* デジタルスタンプについて
    ----------------------------------------------*/
    /* クーポン発券方法 */
    .cont_area__03 .li__flow_img{
        grid-template-columns: repeat(5, 1fr);
    }
    
}


/*=====================================================================
　580px以下
=====================================================================*/
@media screen and (max-width: 580px) {
    /* header+mv
    ----------------------------------------------*/
    header{
        height: 50px;
    }
    header nav .logo{
        width: 100px;
    }
    
    
    /* アンカーリンク集
    ----------------------------------------------*/
    /* ボタン */
    .btn__anchor{
        border-radius: 10px;
        font-size: 90%;
        height: 65px;
    }
    
    
    /* デジタルスタンプについて
    ----------------------------------------------*/
    /* デジタルスタンプカードとは？ */
    .li__notes {
        grid-template-columns: repeat(1, 1fr);
    }
    .li__notes .img{
        display: none;
    }
    
    
    /* 有効期限について
    ----------------------------------------------*/
    /* お問い合わせ */
    .dl__expiry{ 
        display: block;
        line-height: 1.4;
        
        margin-bottom: var(--space-20);
    }
}


/*=====================================================================
　260319_修正
=====================================================================*/
/* 有効期限について
----------------------------------------------*/
/* 注釈 */
.cont_area__06 .box__cont:nth-of-type(1) .notes, .li__expiry_notes{
    font-size: 90%;
    margin-top: var(--space-10);
}

/* 注意事項 */
.li__cont6_notes{
    font-size: 90%;
    margin-top: var(--space-10);
    
    /* listの指定・調整 */
    list-style-position: outside;
    margin-left: 45px;
    text-indent: -45px;
}
.li__cont6_notes li::before{
    content: "例："
}

/* お問い合わせボタン */
.btn__contact{
    background: var(--primary-color);
    border-radius: 500px;
    color: var(--secondary-color);
    font-size: 0.95rem;
    font-weight: bold;
    height: 50px;
    line-height: 1.2;
    text-align: center;
    position: relative;
    width: 40%;
    
    /* テキスト中央寄せ */
    align-items: center;
    display: flex;
    justify-content: center;
}
.btn__contact:hover{
    background: #0071c7;
}

.btn__contact i{
    position: absolute;
    right: 5%;
}

.txt__contact{
    margin-top: var(--space-15);
}

@media screen and (max-width: 850px) {
    .btn__contact{
        width: 100%;
    }
}