@charset "UTF-8";

/* font */
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');

@font-face {
    font-family: "LINESeedJP OTF";
    font-weight: 100;
    src: url("../font/LINESeedJP_OTF_Th.woff") format("woff");
    font-display: swap;
}

@font-face {
    font-family: "LINESeedJP OTF";
    font-weight: 300;
    src: url("../font/LINESeedJP_OTF_Rg.woff") format("woff");
    font-display: swap;
}

@font-face {
    font-family: "LINESeedJP OTF";
    font-weight: 700;
    src: url("../font/LINESeedJP_OTF_Bd.woff") format("woff");
    font-display: swap;
}

@font-face {
    font-family: "LINESeedJP OTF";
    font-weight: 800;
    src: url("../font/LINESeedJP_OTF_Eb.woff") format("woff");
    font-display: swap;
}

/*--------------------------------
	　変数
--------------------------------*/

:root {
    --header-bg-color: #39d887;
    --header-text-color: #fff;
    --bg-color: #fff;
    --text-color: #07391c;
    --ttl-color: #39d887;
    --link-color: #39d887;
    --bg-color-second: #ffffd2;
    --btn-bg-color: #39d887;
    --btn-text-color: #09371a;
    --btn-shadow-color: #26905a;
    --btn-shadow-color-second:#fffdd3;
    --btn-top-bg-color: #ff6945;
    --btn-top-arrow-color: #ffffd2;
    --index-arrow-color: #07391c;
    --coupon-ttl-text-color:#07391c;
    --coupon-ttl-bg-color: #39d887;
    --coupon-number-text-color: #fff;
    --coupon-number-bg-color: #07391c;
    --point-color: #ff6945;
    --content-width: 1400px;
    --webfont-clean: rotate(0.03deg);
}

/*--------------------------------
	　ページ全体
--------------------------------*/
html {
    scroll-behavior: smooth;
    font-size: clamp(14px, 4vw, 18px);
    color: var(--text-color);
}

body {
    font-family: 'LINESeedJP OTF', sans-serif;
}

a {
    color: var(--link-color);
    font-weight: bold;
}

a:hover {
    opacity: .7;
}

/*--------------------------------
	　ベース
--------------------------------*/
.base {
    background-color: var(--bg-color);
}

.content_section:nth-last-of-type(2n) {
    background-color: var(--bg-color-second);
}

.content_inner {
    max-width: var(--content-width);
    margin: auto;
    padding: 5% 3%;
}

/*共通--------------------------------*/

.ttl {
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: 0.05em;
    transform: var(--webfont-clean);
    font-size: 1.5rem;
    text-align: center;
}

h2.ttl {
    font-size: 1.5rem;
    margin: 1em auto;
}

h2[class="ttl"] {
    position: relative;
    padding-bottom: 1em;
}

h2[class="ttl"]::before {
    content: "";
    display: block;
    width: min(20%, 60px);
    height: 5px;
    background-color: var(--ttl-color);
    bottom: 0;
    left: calc(calc(100% - min(20%, 60px))/2);
    position: absolute;
    border-radius: 999px;
}

h3[class="ttl"] {
    width: fit-content;
    margin: 1.5em auto;
    background: linear-gradient(0deg, var(--ttl-color) 0.3em, transparent 0.3em, transparent);
}

.text {
    transform: var(--webfont-clean);
    text-align: center;
    padding: 1.5em;
    line-height: 1.8;
    letter-spacing: 0.05em;
}

.text_break-keep {
    word-break: keep-all;
}

.text_emphasis {
    color: var(--point-color);
}

.text_large {
    font-size: 1.5em;
}

.text_xlarge {
    font-size: 1.8em;
}

.text_small {
    font-size: 0.8em;
}

.text_bold{
    font-weight: bold;
}

.clause {
    display: inline-block;
}

.btn {
    display: block;
    width: fit-content;
    padding: 0.5em 1em;
    background-color: var(--btn-bg-color);
    color: var(--btn-text-color);
    margin: 1.5em auto;
    letter-spacing: 0.05em;
    transform: var(--webfont-clean);
    font-weight: normal;
    border-radius: min(0.9vw, 8px);
    box-shadow: 0 3px var(--btn-shadow-color);
}

.btn_large {
    font-size: min(1.2rem, 36px);
}

.btn_left{
    margin: 1.5em 0;    
}

.banner{
    display: block;
    width: fit-content;  
    max-width: 90%;  
    margin: 1.2rem auto;    
}

.banner img{
    width: 100%;
}

a.disabled {
    pointer-events: none;
}

.img_center {
    text-align: center;
    padding: 0 0 1.5rem;
}

.img_100 {
    max-width: 100%;
}

/*--------------------------------
	　ヘッダー
--------------------------------*/

.header {
    width: 100%;
    background-color: var(--header-bg-color);
}

.header_inner {
    width: 100%;
    /* max-width: var(--content-width); */
    max-width: 100vw;    
    margin: auto;
    position: relative;
    overflow: hidden;
}

.header img {
    width: 100%;
}


/*--------------------------------
	　INDEX
--------------------------------*/

.ttl_index {
    text-align: left;
    border-left: 12px solid var(--ttl-color);
    padding-left: 0.5em;
}

.step ul {
    display: flex;
    flex-wrap: wrap;
}

.btn_step {
    text-align: center;
    width: calc(calc(100% - calc(5% * 3)) / 4);
}

.step_detail {
    width: 100%;
    display: flex;
    aspect-ratio: 2/1;
    justify-content: center;
    align-items: center;
    margin-top: 5%;
    background: var(--btn-bg-color);
    color: var(--btn-text-color);
    font-size: min(1.5vw, 24px);
    position: relative;
    transform: var(--webfont-clean);
}

.step_twin {
    aspect-ratio: 4 / 0.89;
}

.btn_step:not(.step_first) .step_detail::after {
    content: "";
    display: block;
    border-style: solid;
    border-color: transparent transparent transparent var(--index-arrow-color);
    border-width: min(1vw, 14px) 0 min(1vw, 14px) min(1.8vw, 25px);
    position: absolute;
    top: calc(50% - min(1vw, 14px));
}

@media screen and (min-width:769px) {
    .btn_step:not(:last-of-type) {
        margin: 0 5% 0 0;
    }

    .btn_step:not(.step_first) .step_detail::after {
        right: calc(100% + 6.8%);
    }
}

@media screen and (max-width:768px) {

    .btn_step {
        width: calc(calc(100% - calc(8% * 2)) / 2);
        margin: 0 0 8% 8%;
    }

    .step_detail {
        font-size: min(3.8vw, 24px);
    }

    .btn_step:not(.step_first) .step_detail::after {
        border-width: min(1.5vw, 14px) 0 min(1.5vw, 14px) min(2.2vw, 25px);
        top: calc(50% - min(1.5vw, 14px));
        right: calc(100% + 6.8%);
    }
}

/*--------------------------------
	　キャンペーン
--------------------------------*/

.campaign {
    display: flex;
    flex-wrap: wrap;
    padding: 1rem;
    background-color: var(--bg-color);
    margin: 3% auto 5%;
}

.campaign img {
    width: 100%;
}

.campaign_img {
    width: min(50%, 632px);
}

.campaign_overview {
    width: calc(100% - min(50%, 632px));
    padding-left: 1rem;
    letter-spacing: 0.05;
    transform: var(--webfont-clean);
}

.campaign_ttl {
    font-weight: bold;
    line-height: 1.2;
    font-size: 1.8rem;
    padding-bottom: 1rem;
}

.campaign_date {
    font-weight: bold;
    padding-bottom: 1rem;
}

.campaign_text {
    line-height: 1.5;
}

.campaign_text p {
    padding-bottom: 1em;
}

.campaign_btn {
    display: block;
    position: relative;
    color: var(--btn-text-color);
    background-color: var(--btn-bg-color);
    padding: 0.5em 2.5em 0.5em 1em;
    width: fit-content;
    margin-left: auto;
}

.campaign_btn::before {
    position: absolute;
    top: 50%;
    right: 0.8125rem;
    width: 0.9375rem;
    height: 0.125rem;
    background-color: currentColor;
    color: var(--c-02-con);
    content: "";
    transform: translateY(-50%);
}

.campaign_btn::after {
    position: absolute;
    top: 50%;
    right: 0.8125rem;
    width: 0.8125rem;
    height: 0.8125rem;
    border-top: solid 0.125rem currentColor;
    border-right: solid 0.125rem currentColor;
    content: "";
    transform: translateY(-50%) rotate(45deg);
}

@media screen and (max-width:768px) {
    
    .campaign_img {
        width: 100%;
    }
    
    .campaign_overview {
        width: 100%;        
    }

    .campaign_overview{
        padding-left: 0;
        padding-top: 1em;
    }
}

/*--------------------------------
	　アプリ
--------------------------------*/
.appli {
    margin: 3% auto;
    padding: 3%;
    background: #eee;
    display: flex;
    flex-wrap: wrap;
}

.appli_icon {
    width: min(30%, 220px);
}

.appli_icon img {
    width: 100%;
}

.appli_overview {
    width: calc(100% - min(30%, 220px));
    padding-left: 1.5rem;
}

.appli_overview p {
    line-height: 1.8;
    letter-spacing: 0.05em;
    padding-bottom: 1em;
    transform: var(--webfont-clean);
}

.appli_btm_wrap {
    display: flex;
    flex-wrap: wrap;
}

.appli_btm_wrap img {
    height: 100%;
    width: auto;
}

.appli_btn {
    display: block;
    height: 3rem;
    margin-right: 1rem;
}

.ttl_apppoint {
    background-color: var(--ttl-color);
    text-align: left;
    color: #fff;
    padding: 0.2em;
    letter-spacing: 0.08em;
}

.apppoint_list {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 5%;
}

.apppoint_item {
    width: 50%;
    padding: 3%;
    display: grid;
    gap: 1em;
    grid: max-content auto / 3fr 1fr;
}

.apppoint_ttl {
    border-left: 12px solid var(--ttl-color);
    font-size: 1.2rem;
    padding-left: 0.5em;
    grid-column: 1/3;
    transform: var(--webfont-clean);
}

.apppoint_text {
    line-height: 1.5;
    letter-spacing: 0.05em;
    font-size: 0.9rem;
    transform: var(--webfont-clean);
}


.apppoint_img img {
    max-width: 100%;
}

@media screen and (max-width:768px) {
    .appli {
        justify-content: center;
    }

    .appli_icon {
        width: min(100%, 220px);
    }

    .appli_overview {
        width: 100%;
        padding-left: 0;
        padding-top: 1.5rem;
    }

    .apppoint_item {
        width: 100%;
        margin-bottom: 1rem;
    }
}

@media screen and (max-width:425px) {


    .apppoint_item {
        display: block;
    }

    .apppoint_ttl {
        margin-bottom: 0.5em;
    }

    .apppoint_text {
        padding-bottom: 0.5em;
    }

    .apppoint_img {
        width: 50%;
        margin: 5% auto;
    }
}

/*--------------------------------
	　クーポン
--------------------------------*/

.coupon_wrap {
    counter-reset: number 0;
    padding-top: 5%;
    display: flex;
        flex-direction: column;
}

.coupon {
    display: grid;
    grid: auto / 1fr 1fr;
    gap: 1em;
    margin-bottom: 2em;
    background: var( --coupon-number-bg-color);
    position: relative;
    align-items: center;
}

.coupon:has(.coupon_img_double){
    grid: auto / 4fr 3fr;
}

.content_section:nth-last-of-type(2n) .coupon:not(.coupon_small) {
    background: var(--bg-color);
}

/* .coupon.end{
    order: 1;
} */

.coupon.end::before {
    content: "終了しました";
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsl(0deg 0% 0% / 70%);
    color: #fff;
    justify-content: center;
    align-items: center;
    z-index: 1;
    font-size: clamp(14px, 6vw, 85px);
    font-weight: bold;
}

h3.ttl_coupon {
    grid-column: 1/3;
    background: var(--coupon-number-bg-color);
    display: flex;
    font-size: min(1.5rem, 33px);
    align-items: center;
}

h3.ttl_coupon .ttl_number {
    width: 2.5em;
    aspect-ratio: 1/1;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

h3.ttl_coupon .ttl_number::before {
    counter-increment: number 1;
    content: counter(number);
    color: var(--coupon-number-text-color);
}

h3.ttl_coupon .ttl_text {
    padding: 0.5em;
    background: var(--coupon-ttl-bg-color);
    color: var(--coupon-ttl-text-color);
    min-height: 2.5em;
    width: 100%;
    display: flex;
    align-items: center;
    text-align: left;
    word-break: break-all;
}

.coupon_img {
    padding: 0 0 1em 1em;
}

.coupon_img img {
    width: 100%;
    height: auto;
}

.coupon_img.coupon_img_double{
    display: flex;    
    gap: 1em;
}

.coupon_img_double img{
    width: calc(50% - 0.5em);
}

.coupon_overview {
    padding: 0 1em 1em 0;
    transform: var(--webfont-clean);
    line-height: 1.5;
    letter-spacing: 0.05em;
    word-break: keep-all;
}

.dl_btn_weap {
    display: flex;
    flex-wrap: wrap;
    padding: 0.5em 0;
}

.dl_btn_weap a {
    height: min(11.2vw, 64px);
    display: block;
    padding-right: 0.5em;
}

.dl_btn_weap a img {
    height: 100%;
    width: auto;
}

.text.coupon_text{
    padding-bottom: 5%;
}

@media screen and (max-width:768px) {

    .coupon_img,
    .coupon_overview {
        grid-column: 1/3;
    }

    .coupon_img {
        padding: 0 1em;
    }

    .coupon_overview {
        padding: 0 1em 1em;
    }
}

.coupon.coupon_small {
    background: transparent;
    width: fit-content;
    margin: 3% auto;
    align-items: center;
    grid: 1fr/ min(30%, 300px) auto;
    justify-content: center;
}

/*--------------------------------
	サイトリンク一覧
--------------------------------*/

.sitelink_wrap {
    padding: 1.5rem 0;
}

.btn_sitelink {
    display: flex;
    margin: 0 0.5rem 2.5rem;
    border: 2px solid;
    align-items: center;
    background: var( --bg-color);
    color: var(--btn-bg-color);
    border-radius: 0.5em;
    box-shadow: 0.5rem 0.5rem var(--btn-shadow-color-second);
    font-size: min(2vw, 1.6rem);
    position: relative;
    padding-right: 3.5rem;
}

.sitelink_img {
    width: min(12%, 200px);
    aspect-ratio: 1/1;
    padding: 1%;
    flex: 0 0 auto;
}

.btn_sitelink::after {
    content: "";
    display: block;
    width: 0.8em;
    height: 0.8em;
    border-style: solid;
    border-width: 3px;
    border-color: var(--btn-bg-color) var(--btn-bg-color) transparent transparent;
    transform: rotate(45deg);
    position: absolute;
    right: 1.5rem;
}

.sitelink_img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sitelink_text {
    width: 100%;
    text-align: center;
}

@media screen and (max-width:768px) {
    .sitelink_img {
        width: min(50%, 200px);
    }

    .btn_sitelink {
        justify-content: center;
        flex-direction: column;
        padding: 1.5rem 2.5rem 1.5rem 1.5rem;
        font-size: min(4.9vw, 1.5rem);
    }

    .sitelink_text {
        padding: 1.5em 0 0;
    }

    .btn_sitelink::after {
        right: 1rem;
    }

}


/*--------------------------------
	　フッター
--------------------------------*/
.footer {
    background-color: var(--header-bg-color);
    color: var(--header-text-color);
    padding: 4%;
    text-align: center;
}

.footer_logo {
    display: block;
    width: 50%;
    max-width: 230px;
    margin: auto;
    padding-bottom: 1rem;
}

.copyright {
    font-size: 0.8rem;
    transform: var(--webfont-clean);
}

/*--------------------------------
	　トップに戻るボタン
--------------------------------*/
#btn_top {
    display: block;
    width: 60px;
    aspect-ratio: 1/1;
    border-radius: 999px;
    background-color: var(--btn-top-bg-color);
    position: fixed;
    bottom: min(3vw, 30px);
    right: min(3vw, 30px);
    z-index: 10;
    transition: all 0.5s;
}

#btn_top::after {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 13px 18px 13px;
    border-color: transparent transparent var(--btn-top-arrow-color) transparent;
    top: calc(50% - 11px);
    left: calc(50% - 13px);
}

#btn_top.hidden {
    opacity: 0;
    bottom: 0;
}

/*--------------------------------
	　モーダル
--------------------------------*/

[data-micromodal-trigger] {
    cursor: pointer;
}

[data-micromodal-trigger]:hover {
    opacity: 0.7;
}

.modal_base {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
    width: 100%;
    height: 100%;
    transition: all .5s;
}

.modal_base.is-open {
    visibility: visible;
    opacity: 1;
}

.modal_bg {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000a0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal_bg.modal_next {
    background-color: transparent;
}

.modal_content {
    position: relative;
    /* top: 50%; */
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
    width: fit-content;
    max-width: 90vw;
    max-height: 90dvh;
    box-sizing: border-box;
    background-color: #eceadd;
    cursor: auto;
    /* overflow-y: auto; */
}

.modal_store-pop_content img {
    object-fit: contain;
    max-width: 90vw;
    max-height: 90dvh;
}

.modalclose_btn {
    display: block;
    position: absolute;
    top: 3px;
    right: 3px;
    width: max(2vw, 16px);
    height: max(2vw, 16px);
    cursor: pointer;
}

.modalclose_btn::before,
.modalclose_btn::after {
    display: block;
    position: absolute;
    top: calc(50% - 1.5px);
    left: 10%;
    width: 80%;
    height: 3px;
    border-radius: 10px;
    background-color: #26000b;
    content: "";
    transform-origin: center;
}

.modalclose_btn::before {
    transform: rotateZ(45deg);
}

.modalclose_btn::after {
    transform: rotateZ(-45deg);
}

/*--------------------------------
	　レスポンシブ
--------------------------------*/

    

@media screen and (min-width:600px) {
    .sp {
        display: none;
    }

    .pc {
        display: block;
    }
}

@media screen and (max-width:600px) {
    .pc {
        display: none;
    }
    .sp {
        display: block;
    }

}