@charset "UTF-8";

/* font */
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&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;
}

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

body {
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0;
    background: url(https://www.melonbooks.co.jp/special/b/testtesttesttesttesttesttest/202507-newsystem/images/bg.webp);
    background-size: contain;
}

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

a:hover {
    opacity: .7;
}

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




@media screen and (max-width:600px) {
body {
    background: url(https://www.melonbooks.co.jp/special/b/testtesttesttesttesttesttest/202507-newsystem/images/bg_sp.webp);
    background-size: contain;
}
}


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

header {
    position: relative;
    z-index: 2;
    padding: max(10px, .5%) 0;
    background-color: #ffffff;
    box-shadow: 0 0 10px #0000004d;
    text-align: center;
}

.logoimg {
    display: inline-block;
    margin: 0 auto;
}

/*--------------------------------
	フッター
--------------------------------*/
footer {
    background: #fff;
}

.footer__inner {
    display: grid;
    grid-template-columns: 5fr 2fr;
    grid-template-rows: repeat(1, 1fr);
    gap: 32px 60px;
    max-width: 1120px;
    padding-block: 3rem;
    margin: auto;
}

.footer__inner *{
   font-family:var(--f-font-base);

}

.footer__gnav-wrap {
    grid-row: 1/3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.footer__input {
    display: none;
}

.footer__gnav_ttl {
    display: block;
    margin-bottom: 24px;
}

.footer__ttl,
.footer__gnav_ttl {
    font-size: 14px;
    font-weight: 900;
}

.footer__gnav-list {
    padding-left:0;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.footer__gnav-item {
    list-style:none;
}

.footer__gnav-item a{
   font-size:14px;
   color: #000;
font-weight:400;
}

.footer__link {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-block: 7px;
}

.footer__sns-wrap {
    display: flex;
    gap: 0.5rem;
}

.footer__sns-btn {
    background: #000000;
    color: #fff;
    padding: 0.5em 1.1em 0.5em;
    font-weight: bold;
    font-size: 16px;
    display: flex;
    gap: 0.8em;
    align-items: center;
    text-decoration: none;
    &::before {
        content: "";
        display: block;
        width: 1em;
        height: 1em;
        background: no-repeat center / contain url(https://www.melonbooks.co.jp/special/common/components/images/sns/logo-x-white.svg);
        background-size: contain;
    }
}

.footer__sns,
.footer__appli {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer__appli .footer__appli-wrap {
    width: 80%;
    margin: 0;
    display: flex;
    gap: 0.5rem;
}

.footer__nav {
    grid-column: 1/3;
    display: flex;
    gap: min(1.8vw, 48px);
    align-items: center;
    justify-content: center;
    font-size: min(1vw, 14px);
}

.footer__nav-text {
    display: flex;
    gap: 2rem;
    margin-top: 1.1rem;
    width: fit-content;
}

.footer__nav-text a{
font-size: 14px;
font-weight: 400;
color: #000;
}

.footer__logo {
    height: 3em;
    display: block;

    img {
        height: 100%;
        width: auto;
    }
}
@media (max-width:769px) {
  .footer__logo {
    height: 2em;
}
}

.footer__copyright {
    margin: auto;
    text-align: center;
    padding: 2rem;
    font-size: 14px;
    background: #378A40;
    color: #fff;
    font-weight: 500;
}

@media screen and (max-width:1150px) {
    .footer__inner {
        display: flex;
        flex-direction: column;
        width: 90%;
    }
}

@media screen and (max-width:769px) { 
    .footer__btn-group{
        padding: 4rem;
    }

.footer__btn-wrap {
    display: flex;
    max-width: 1120px;
    margin: auto;
    gap: 1rem;
    justify-content: space-around;
    flex-direction: column;
}

.footer__btn {
    width: 85%;
    text-align: center;
}  

    .footer__gnav {
        border-bottom: 1px solid #000;
    }

    .footer__gnav:first-of-type {
        border-top: 1px solid #000;
    }

    .footer__gnav_ttl {
        margin-bottom: 0;
        padding-right: 1em;
        transition: background 0.5s;
        background: no-repeat center right/2rem url('https://www.melonbooks.co.jp/special/common/components/images/icon/add-line.svg');
    }

    [name="footer-menu"]:checked~.footer__gnav_ttl {
        background: no-repeat center right/2rem url('https://www.melonbooks.co.jp/special/common/components/images/icon/subtract-line.svg');
    }

    .footer__gnav_ttl,
    .footer__gnav-item {
        padding-block: 1.5em;
        margin-inline: 0.5em;
        list-style: none;
    }

    .footer__gnav_accordion {
        display: grid;
        grid-template-rows: 0fr;
        transition: 250ms grid-template-rows ease;
        transition: all 0.5s;
    }

    [name="footer-menu"]:checked~.footer__gnav_accordion {
        grid-template-rows: 1fr;
    }

    .footer__gnav-list {
        gap: 0;
        overflow: hidden;
        margin: 0;
    }

    .footer__gnav-item {
        border-top: 1px solid #0000004d;
        padding-right: 1em;
        list-style: none;
    }

    .footer__link {
        width: 90%;
        margin-inline: auto;
    }

    .footer__appli {
        width: 100%;
    }


    .footer__nav {
        display: flex;
        flex-direction: column;
        gap: 32px;
        font-size: 14px;
    }

    .footer__nav-text {
        display: flex;
        gap: 1rem;
        margin-top: 1.1rem;
        flex-direction: column;
        align-items: center;

    }

    .footer__gnav-wrap {
        display: block;
        width: 90%;
        margin: auto;
    }

    .footer__logo {
        margin-left: -1rem;
    }
}



/*--------------------------------
	クーポンコード
--------------------------------*/


.main img,
                            .main_visual img {
                                width: 100%;
                                height: auto;
                            }

                            .mobile_main,
                            .mobile_main_bg {
                                display: none;
                            }

                            .pc_main_bg,
                            .mobile_main_bg {
                                border-radius: 5px;
                            }

                            .l-coupon {
                                margin: 1% auto 0;
                                outline-offset: -3px;
                                outline: 2px solid #000000;
                                display: flex;
                                justify-content: space-between;
                                padding: 0 2rem;
                                position: relative;
                                width: 40%;
                                align-items: center;
                                max-width: 400px;
                            }

                            .l-coupon__img {
                                width: 5%;
                            }

                            .coupon-end::after {
                                content: "終了しました";
                                position: absolute;
                                width: 100%;
                                height: 100%;
                                color: #fff;
                                display: flex;
                                font-size: 16px;
                                background: #000000a1;
                                align-items: center;
                                justify-content: center;
                                font-weight: 700;
                                margin: -1.1% -4.2%;
                                border-radius: 10vw;
                                cursor: ;
                            }

                            .coupon-end {
                                max-width: 95%;
                                margin: 1% auto 0;
                                border-radius: 100px;
                                outline-offset: -3px;
                                outline: 3px solid #009944;
                                display: flex;
                                justify-content: space-between;
                                padding: 1% 4%;
                                position: relative;
                                width: 95%;
                                align-items: center;
                                cursor: default;
                            }

                            .l-coupon:hover {
                                opacity: 0.6;
                            }

                            .l-coupon p,
                            .coupon-end p {
                                font-size: 24px;
                                font-weight: 600;
                                font-family: font-family: "Noto Sans JP", serif;
                                color: #000;
                            }

                            .coupon_info {
                                padding: 10px 0;
                                color: #000000;
                                font-size: 16px;
                                text-align: center;
                                font-weight: bold;
                                background-color: #f5f5f5;
                            }

                            .success-msg {
                                display: none;
                                position: fixed;
                                width: 40%;
                                height: 48px;
                                line-height: 40px;
                                background-color: #2121a8;
                                color: #ffffff;
                                top: 1rem;
                                left: 0;
                                right: 0;
                                margin: auto;
                                text-align: center;
                                border-radius: 5px;
                            }

                            .success-msg p {
                                font-size: 16px;
                                font-weight: 600;
                                font-family: "Noto Sans JP", serif;
                                color: #ffffff;
                                position: absolute;
                                top: 15%;
                                left: 50%;
                                transform: translate(-50%, -50%);
                                width: 80%;
                            }

                            @media screen and (max-width: 781px) {
                                .success-msg {
                                    width: 300px;
                                    left: 50%;
                                top: 3rem;
                                    transform: translate(-50%, -50%);
                                }

                                .l-coupon {
                                    width: 90%;
                                }
                            }

                            .l-coupon:has() @media screen and (orientation:portrait) {

                                .pc_main,
                                .pc_main_bg {
                                    display: none;
                                }

                                .mobile_main,
                                .mobile_main_bg {
                                    display: block;
                                }

                            }


/*--------------------------------
	共通パーツ
--------------------------------*/

.text,
.text--bold,
.text--s,
.text--ll {
    font-size: clamp(1rem,1vw,1.125rem);
    font-family: 'Noto Sans JP';
    line-height:24px;
    font-weight: 500;
    margin: auto;
} 

.text--bold {
    font-weight: 700;
    line-height: clamp(24px,1.5vw,27px);
}

.text--ll {
    font-size: 1.5rem;
    font-weight: 700;
}

.text--s {
    font-size: clamp(0.875rem,0.87vw,1rem);
    line-height:clamp(21px,1.2vw,24px);
}


.ttl,
.ttl--l,
.ttl--ss,
.ttl--s,
.ttl--s-dec {
    font-size: clamp(1.5rem,5vw, 2.5rem);
    font-family: 'Noto Sans JP';
    line-height: clamp(30px,5vw,40px);
    font-weight: 900;
    margin: auto;
    text-align: center;
}

.ttl--l {
    font-size: 1.5rem;
    line-height:36px;
}

.ttl--ss {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1rem;
}

.ttl--s {
    font-size: 1.125rem;
    line-height:21.6px;
}

.ttl--s-dec {
    line-height:23px;
    font-size: 1rem;
}

.sab-heasing {
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
    padding-block: 0.4rem;
    font-size: 1.6rem;
    font-weight: bold;
    background: #2121a8;
    color: #ffffff;
    padding: 0rem 1rem;
}

.contents,
.contents--white,
.contents--blue {
    max-width: 1300px;
    width: 100%; 
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    padding-block: 4rem;
    gap: 2rem;
}

.contents--white {
    background-color: #fff;
}

.contents--blue {
    background-color: #08387f;
}



.contents__ttl {
    width: 100%;
    text-align: center;
    padding: 1rem 0rem 1.5rem;
}

.contents--blue .contents__ttl {
    color: #fff;
}

.contents__ttl-p,
.contents__ttl-h2 {
   margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
    padding-block: 0.4rem;
}

.contents__ttl-h2 {
    border-bottom: solid #000000 3px;
    padding-bottom: 1rem;
    width: 90%;
}

.contents__ttl-img {
    width: 1.8rem;
}

.contents--blue .contents__ttl-img {
    filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(353deg) brightness(97%) contrast(108%);
}

.contents__attention {
    text-align: center;
}

.attention::before,
.contents__attention::before {
    content: "※";
}

.flex--row {
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: center;
}

.box__ttl {    
    margin: auto;
    border-bottom: solid 3px #000;
    width: 35%;
    text-align: center; 
    padding-block: 0.6rem;
}

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

    .contents, 
    .contents--white, 
    .contents--blue {
    padding-block: 2.5rem;
    gap: 1.5rem;
}

    .contents {
    width: 100%;
    }

    .contents__ttl {
        padding: 0rem 0rem 0.5rem;
    }

    .flex--row {
    flex-direction: column;
}

.box__ttl {
    width: 89%;
}

.sab-heasing {
    font-size: 1rem;
    text-align: center;
}

.contents__attention {
        padding-block: 1rem;
}
}

/*--------------------------------
	MV
--------------------------------*/

.mv {
    width: 100%;
    display: flex;
    justify-content: center;
    background-size: contain;
}

.mv__img {
    max-width: 1300px;
}

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

/*--------------------------------
	トップ
--------------------------------*/
.top__img {
    width: 40%;
}

.top__text {
    text-align: center;
}

@media screen and (max-width:600px) {
.top__img {
    width: 95%; 
}
}

/*--------------------------------
	新機能1
--------------------------------*/

.function-pay {
    background-color: #08387f;
}

.function-pay__box {
    max-width: 950px;
    width: 100%;
}

.function-pay__img {
    background: #ffffff;
    padding: 2rem;
    border-radius: 1rem;
    width: 30%;
    height: auto;
    border: solid #727272 2px;
}

.function-pay__img2 {
    padding: 1rem 1rem;
    background: #ffffff;
    border-radius: 0.5rem;
    width: 75%;
}

.function-pay__a {
    color: #fff;
    text-decoration: none;
}

 .function-pay-box {
    max-width: 820px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #ffffff;
    padding-block: 2rem 36px;
    gap: 2rem;
}

.function-pay__text {
    color: #fff;
}

.function-pay-box .function-pay__text {
    color: #000;
}


@media screen and (max-width:600px) {
.function-pay__img { 
    width: 50%;
}

.function-pay__text {
    text-align: center;
}
}

/*--------------------------------
	新機能2
--------------------------------*/
.buy-now__contents {
    background: #bbf0fb;
}

.buy-now__img {
    padding: 1rem 1rem;
    background: #ffffff;
    border-radius: 0.5rem;
    width: 50%;
    border: solid #000 1px;
}

.buy-now__text {
    text-align: center;
}

.step {
    width: 95%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.step__ttl-group {
    width: 100%;
    margin: auto;
    text-align: center;
}

.step__ttl {
    text-align: center;
    margin: auto;
    background: #fff955;
    padding: 0.5rem;
    border-radius: 0.3rem;
    width: 100%;
    border: solid 1px #858585;
    font-size: 1.8rem;
    font-weight: 900;
}

.step__sub-ttl {
    margin: auto;
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 3rem;
}

.step__title {
    width: 100%;
    margin: auto;
    text-align: center;
}

.step__title-txt {
    margin: auto;
    background: #ffffff;
    width: 20%;
    border-radius: 0.2rem;
    margin-bottom: 0.5rem;
    padding-block: 0.5rem;
}

.step__img-box {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    justify-content: center;
}

.step__arrow {
    width: 3%;
}

.step__a {
    color: red;
}

.step__img,
.step3__img {
    width: 42%;
    padding: 1rem 1rem;
    background: #ffffff;
    border-radius: 0.5rem;
}

.step3__img {
    width: 100%;
}

.step__text {
    text-align: center;
}

.step__btn {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 0.5rem 3rem;
    background: #e23c00;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 50px;
    text-decoration: none;
    position: relative;
    color: #ffffff;
}

.step__btn::after {
    content: "→"; 
    font-size: 1rem;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translate(-50%,-50%);
}

@media screen and (max-width:600px) {
    .buy-now__img {
    width: 80%;
    }

    .step__title-txt {
        width: 50%;
        margin: auto;
    }

    .step__ttl {
        width: 85%;
    }

    .step__sub-ttl {
        font-size: 1.3rem;
    }

    .step__img-box {
    align-items: center;
    flex-direction: column;
    }

    .step__img,
    .step3__img {
    width: 80%;
    }
}

/*--------------------------------
	プレゼント
--------------------------------*/

.present {
    background-color: #fff955;
}

.present__text {
    text-align: center;
    margin-block: 1rem;
    width: 90%;
}

.present__attention {
    display: flex;
    margin-block: 1rem;
    width: 90%;
}

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

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

    .pc {
        display: block;
    }
}

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

}