@charset "UTF-8";

/**************************************************************************************************
    Media ALL (共通)
***************************************************************************************************/

    #warabi {
        color: #333333;
        font-family: "Source Han Serif JP", "Noto Serif CJK JP", "游明朝体", "Yu Mincho", YuMincho, serif;
        font-weight: 600;
    }

    #warabi_insta_banner .warabi_insta_banner_text {
        color: #333333;
        font-family: "Noto Sans JP", sans-serif;
        font-weight: 600;
    }

    #warabi a {
        color: #000;
        text-decoration: none;
        transition: 0.4s;
    }

    #warabi a:hover {
        opacity: 0.6;
    }

    #warabi {
        font-size: 20px;
        font-weight: 500;
        margin: 0;
        padding: 0;
        line-height: 1.5;
        overflow-wrap: break-word;
        word-break: break-all;
    }

    #warabi h1,
    #warabi h2,
    #warabi h3,
    #warabi h4,
    #warabi h5 {
        margin: 0;
        padding: 0;
    }

    #warabi ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #warabi .edoya-inner {
        padding: 0;
    }

    #warabi .warabi-buy-link {
        text-align: center;
        margin: min(10vw, 50px) auto;
    }

    #warabi .warabi-buy-link ul {
        text-align: left;
        width: 510px;
        margin: 1em auto;
        font-size: 18px;
        list-style: disc;
    }

    #warabi .warabi-buy-link ul b {
        color: #CA2D1E;
    }

    #warabi .warabi-buy-link a {
        display: inline-block;
        font-size: 30px;
        padding: 0.5em 2em;
        background: #69484E;
        color: #fff;
        border-radius: 100vw;
    }

    .warabi-buy-link a span {
        display: block;
        font-size: 18px;
        color: #fff;
    }

    #warabi header {
        background: url(../img/warabi/img_top.webp) center top no-repeat;
        height: 900px;
        text-align: right;
        position: relative;
    }

    #warabi header h1 {
        position: absolute;
        bottom: 30px;
        left: 160px;
        font-family: 'ten-mincho', serif;
        text-align: left;
        font-size: 110px;
        color: #000;
        text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;
        margin: 0;
    }

    #warabi header h1 span {
        display: block;
        color: #CD2D1F;
        font-size: 50px;
        margin-left: -20px;
        line-height: 2.0;
    }

    #warabi header h1 strong {
        display: block;
        padding-left: 1em;
        font-size: 110px;
        font-weight: normal;
    }

    #warabi_insta_banner {
        text-align: center;
    }

    #warabi_insta_banner h3 {
        font-size: 2.5em;
        margin: 1em 0 0.5em;
    }

    #warabi_insta_banner img {
        width: 40%;
    }

    #warabi_insta_banner .warabi_insta_banner_text {
        font-size: 1.2em;
        margin-top: 1em;
    }

    #warabi-topic1 {
        background: url(../img/warabi/bg_1.webp) 7% 10% no-repeat, url(../img/warabi/bg_2.webp) 62% 48% no-repeat, url(../img/warabi/bg_3.webp) 8% 82% no-repeat;
    }

    #warabi-topic1 h2 {
        background: url(../img/warabi/bg_midashi.webp) center top no-repeat;
        height: 110px;
        font-size: 36px;
        padding: 20px 0 0 150px;
        margin: 5px 0 40px;
        letter-spacing: 2px;
    }

    #warabi-topic1 h2 span {
        display: block;
        font-size: 24px;
    }

    #warabi-topic1 .point1 {
        background: url(../img/warabi/img_1.webp) right top no-repeat;
        width: 90%;
        margin: 0 auto 60px;
    }

    #warabi-topic1 h3 {
        font-size: 56px;
        line-height: 1.2;
        margin-bottom: 40px;
    }

    #warabi-topic1 .point1 h3 {
        width: 50%;
    }

    #warabi-topic1 h3 .p-label {
        display: block;
        font-size: 28px;
        letter-spacing: 4px;
    }

    #warabi-topic1 h3 .p-number {
        display: block;
        font-size: 80px;
        line-height: 1.0;
        padding-left: 23px;
        margin-bottom: 40px;
    }

    #warabi-topic1 p {
        line-height: 1.8;
        font-size: 22px;
    }

    #warabi-topic1 .appeal {
        color: #CE2E20;
    }

    #warabi-topic1 .point1 p {
        width: 40%;
    }

    #warabi-topic1 .point2 {
        background: url(../img/warabi/img_2.webp) left top no-repeat;
        width: 90%;
        margin: 0 auto 60px;
    }

    #warabi-topic1 .point2 h3 {
        width: 60%;
        margin: 0 0 40px auto;
    }

    #warabi-topic1 .point2 p {
        width: 60%;
        margin: 0 0 0 auto;
    }

    #warabi-topic1 .point3 {
        background: url(../img/warabi/img_3.webp) right top no-repeat;
        width: 90%;
        margin: 0 auto 90px;
    }

    #warabi-topic1 .point3 h3 {
        width: 50%;
        margin: 0 0 60px 50px;
    }

    #warabi-topic1 .point3 h3 .p-number {
        float: left;
        margin-right: 80px;
    }

    #warabi-topic1 .point3 p {
        width: 50%;
    }

    #warabi-topic2 {
        margin-bottom: 100px;
    }

    #warabi-topic2 .itutuboshi {
        background: url(../img/warabi/bg_4.webp) center top no-repeat;
        height: 950px;
        padding: 120px 10% 60px 35%;
        margin-bottom: 80px;
    }

    #warabi-topic2 .itutuboshi h3 {
        font-size: 50px;
        margin-bottom: 45px;
        letter-spacing: 2px;
    }

    #warabi-topic2 .itutuboshi h3 span {
        display: block;
        font-size: 30px;
        letter-spacing: 6px;
    }

    #warabi-topic2 .itutuboshi h4 {
        color: #742B71;
        font-size: 22px;
        margin-bottom: 25px;
        font-weight: 700;
    }

    #warabi-topic2 .itutuboshi p {
        font-size: 18px;
        margin-bottom: 50px;
        line-height: 2.0;
    }

    #warabi-topic2 .itutuboshi p .appeal {
        font-size: 18px;
        color: #742B71;
        font-weight: 700;
    }

    #warabi-cart-area {
        margin-bottom: 100px;
    }

    #warabi-cart-area h2 {
        text-align: center;
        font-size: 45px;
        letter-spacing: 3px;
        color: #69484E;
        position: relative;
        padding: 0.25em 0;
        width: 40%;
        margin: 0 auto 40px;
    }

    #warabi-cart-area h2::after {
        content: "";
        display: block;
        height: 4px;
        background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
        background: linear-gradient(to right, rgb(230, 90, 90), transparent);
        border-radius: 10px;
    }

    #warabi-cart-area p.product-appeal {
        margin: 1em auto;
        font-size: 1.1em;
        line-height: 2.0;
        text-align: center;
    }

    #warabi-cart-area p.product-appeal b {
        color: #CA2D1E;
    }

    #warabi-cart-area .cart-text {
        max-width: 700px;
        margin: auto;
        font-size: 18px;
        text-align: left;
    }

    #warabi-cart-area .cart-text b {
        color: #CA2D1E;
    }

    #warabi-cart-area .warabi-blend-pr {
        font-size: 24px;
        margin-top: 3em;
        line-height: 2.0;
        font-weight: bold;
        text-align: center;
    }

    #warabi-cart-area .warabi-blend-pr img {
        width: 100%;
    }

    #warabi-topic4 {
        margin-bottom: 100px;
    }

    #warabi-topic4 .review {
        background: url(../img/warabi/bg_5.webp) center top no-repeat;
        margin-bottom: 80px;
    }

    #warabi-topic4 .review h3 {
        font-size: 70px;
        padding: 40px 0 40px 80px;
        letter-spacing: 2px;
        font-family: 'ten-mincho', serif;
        text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;
    }

    #warabi-topic4 .review ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        background: rgba(172, 114, 35, 0.6);
        padding: 40px;
    }

    #warabi-topic4 .review ul li {
        background: #fff url(../img/warabi/bg_voice.webp) left top no-repeat;
        width: 580px;
        padding: 35px;
        margin: 10px;
    }

    #warabi-topic4 .review h4 {
        color: #CF2D1D;
        font-size: 35px;
        margin-bottom: 15px;
        font-weight: 700;
    }

    #warabi-topic4 .review p {
        font-size: 18px;
        line-height: 2.0;
    }

    #warabi-topic4 .review p .appeal {
        color: #CF2D1D;
        font-weight: 700;
    }



/**************************************************************************************************
    Media Query (横幅1366px以下)
***************************************************************************************************/
@media (max-width: 1366px) {

    #warabi .warabi-buy-link a {
        font-size: min(3.3vw, 30px);
    }

    #warabi header {
        background-size: 100%;
        height: 65vw;
    }

    #warabi header h1 {
        left: 12vw;
        bottom: 5vw;
        font-size: min(7vw, 110px);
    }

    #warabi header h1 span {
        font-size: min(3.5vw, 50px);
    }

    #warabi header h1 strong {
        font-size: min(7vw, 110px);
    }

    #warabi-topic1 .point1 {
        background-size: 55%;
    }

    #warabi-topic1 .point1 h3 {
        width: 100%;
    }

    #warabi-topic1 .point1 p {
        width: 80%;
    }

    #warabi-topic1 .point2 {
        background-size: 38%;
    }

    #warabi-topic1 .point3 {
        background-size: 60%;
    }

    #warabi-topic1 .point3 h3 {
        width: 100%;
    }

    #warabi-topic1 .point3 p {
        width: 60%;
    }

}



/**************************************************************************************************
    Media Query (横幅1280px以下)
***************************************************************************************************/
@media (max-width: 1280px) {

}



/**************************************************************************************************
    Media Query (横幅1024px以下)
***************************************************************************************************/
@media (max-width: 1024px) {

    #warabi_insta_banner h3 {
        font-size: 2em;
    }

    #warabi_insta_banner img {
        width: 50%;
    }

    #warabi_insta_banner {
        margin-bottom: min(10vw, 100px);
    }

    #warabi-topic1 .inner {
        background: url("../img/warabi/bg_1.webp") 7% 10% no-repeat,
                    url("../img/warabi/bg_2.webp") 62% 48% no-repeat,
                    url("../img/warabi/bg_3.webp") 8% 82% no-repeat;
    }

    #warabi-topic1 h2 {
        background-position: left top;
    }

    #warabi-topic1 .point1 {
        background-size: 60%;
        width: 90%;
    }

    #warabi-topic1 p {
        font-size: 2.5vw;
    }

    #warabi-topic1 p .appeal {
        font-size: 2.5vw;
    }

    #warabi-topic1 h3 {
        font-size: 5.5vw;
    }

    #warabi-topic1 h3 .p-number {
        font-size: 10vw;
        margin-bottom: 1vw;
    }

    #warabi-topic1 .point1 h3 {
        width: 70%;
    }

    #warabi-topic1 .point1 p {
        width: 100%;
    }

    #warabi-topic1 .point2 {
        background-size: 30%;
        width: 90%;
    }

    #warabi-topic1 .point2 h3 {
        width: 68%;
    }

    #warabi-topic1 .point2 p {
        width: 100%;
    }

    #warabi-topic1 .point3 {
        background-size: 60%;
        width: 90%;
    }

    #warabi-topic1 .point3 h3 {
        width: 70%;
        padding: 30px 0 0 0;
    }

    #warabi-topic1 .point3 h3 .p-number {
        margin-right: 5vw;
    }

    #warabi-topic1 .point3 p {
        width: 100%;
    }

    #warabi-topic2 .itutuboshi {
        background-size: 100%;
        height: auto;
        padding: 15vw 1em 0;
    }

    #warabi-topic2 .itutuboshi h3 {
        font-size: 8vw;
        margin: 0 0 1em 35vw;
    }

    #warabi-topic2 .itutuboshi h3 span {
        font-size: 3.2vw;
    }

    #warabi-topic2 .itutuboshi h4 {
        font-size: 3.3vw;
        margin-bottom: 1.5em;
    }

    #warabi-topic2 .itutuboshi p {
        font-size: 2.4vw;
    }

    #warabi-topic2 .itutuboshi p .appeal {
        font-size: 2.4vw;
    }

    #warabi-topic2 .itutuboshi h4:first-of-type {
        margin-left: 35vw;
    }

    #warabi-cart-area h2 {
        width: 60%;
    }

    #warabi-cart-area p.product-appeal {
        width: 95%;
    }

    #warabi-topic4 .review {
        background-size: 100%;
    }

    #warabi-topic4 .review h3 {
        font-size: 8vw;
        padding: 30px 0 30px 1em;
    }

    #warabi-topic4 .review ul {
        padding: 40px 0;
    }

    #warabi-topic4 .review ul li {
        width: 47vw;
        padding: 1em;
        background-size: 100%;
    }

    #warabi-topic4 .review h4 {
        font-size: 3vw;
    }

    #warabi-topic4 .review p {
        font-size: 2.4vw;
    }

    #warabi-topic4 .review p .appeal {
        font-size: 2.4vw;
    }

}



/**************************************************************************************************
    Media Query (横幅768px以下)
***************************************************************************************************/
@media (max-width: 768px) {

    #warabi .warabi-buy-link ul {
        width: 85%;
        font-size: clamp(14px, 2.4vw, 18px);
    }

    #warabi .warabi-buy-link a {
        font-size: min(4.5vw, 35px);
    }

    #warabi .warabi-buy-link a span {
        font-size: min(3vw, 23px);
    }

    #warabi header {
        background: url("../img/warabi/sp_img_top.webp") center top /contain no-repeat;
        height: 85vw;
    }

    #warabi header h1 {
        left: 10vw;
        bottom: 11vw;
        font-size: min(7.5vw, 58px);
    }

    #warabi header h1 span {
        font-size: min(4.5vw, 37px);
    }

    #warabi header h1 strong {
        font-size: min(7.5vw, 58px);
        padding-left: 0.5em;
    }

    #warabi_insta_banner h3 {
        font-size: 6vw;
        margin: 1em 0 0.5em;
    }

    #warabi_insta_banner img {
        width: 80%;
    }

    #warabi_insta_banner .warabi_insta_banner_text {
        font-size: 3.5vw;
    }

    #warabi-topic1 .inner {
        background: url("../img/warabi/sp_bg_1.webp") 2% 3% no-repeat,
                    url("../img/warabi/sp_bg_2.webp") 90% 39% no-repeat,
                    url("../img/warabi/sp_bg_3.webp") 2% 69% no-repeat;
    }

    #warabi-topic1 h2 {
        background: url("../img/warabi/sp_midashi_1.webp") center top /100% no-repeat;
        width: 100%;
        height: auto;
        font-size: max(5vw, 17px);
        padding: 4px 0 5px 30px;
        margin: 10px 0 10px 0;
    }

    #warabi-topic1 h2 span {
        font-size: max(3vw, 13px);
    }

    #warabi #warabi-topic1 h3 {
        font-size: min(8.3vw, 45px);
        margin: 0.5em 0;
        text-shadow: 1px 1px 4px #fff;
    }

    #warabi #warabi-topic1 h3 .p-label {
        font-size: 22px;
    }

    #warabi #warabi-topic1 h3 .p-number {
        font-size: 60px;
        padding-left: 20px;
        margin-bottom: 40px;
        float: none;
    }

    #warabi #warabi-topic1 p {
        line-height: 1.5;
        font-size: clamp(14px, 3vw, 18px);
        width: 90%;
        background-color: rgba(255, 255, 255, 0.45);
        padding: 1em;
        margin: 0 auto 4vw;
    }

    #warabi-topic1 p .appeal {
        font-size: clamp(14px, 3vw, 18px);
    }

    #warabi-topic1 .point1 {
        width: 100%;
        background: url("../img/warabi/sp_img_1.webp") no-repeat;
        background-position: 44vw 8vw;
        background-size: 60%;
    }

    #warabi-topic1 .point1 h3 {
        width: 100%;
        padding: 0.5em;
    }

    #warabi-topic1 .point2 {
        width: 100%;
        background: url("../img/warabi/sp_img_2.webp") no-repeat;
        background-position: 44vw 8vw;
        background-size: 60%;
    }

    #warabi-topic1 .point2 h3 {
        width: 100%;
        padding: 0.5em;
    }

    #warabi-topic1 .point3 {
        width: 100%;
        background: url("../img/warabi/sp_img_3.webp") no-repeat;
        background-position: 44vw 8vw;
        background-size: 60%;
        margin-bottom: 0;
    }

    #warabi-topic1 .point3 h3 {
        width: 100%;
        padding: 0.5em;
    }

    #warabi-topic2 {
        margin-bottom: 40px;
    }

    #warabi-topic2 .itutuboshi {
        background: url("../img/warabi/sp_bg_star.webp") 99% top /40% no-repeat;
        height: auto;
        padding: 0;
        margin-bottom: 40px;
    }

    #warabi-topic2 .itutuboshi h3 {
        background: url("../img/warabi/sp_bg_4.webp") center 120px /contain no-repeat;
        height: 85vw;
        font-size: 27px;
        margin-bottom: 0;
        letter-spacing: 0;
        padding: 40px 10px 0;
        font-weight: 700;
    }

    #warabi #warabi-topic2 .itutuboshi h3,
    #warabi #warabi-topic2 .itutuboshi h4 {
        margin: 0;
    }

    #warabi-topic2 .itutuboshi h3 span {
        font-size: 18px;
        letter-spacing: 2px;
    }

    #warabi-topic2 .itutuboshi h4 {
        font-size: 18px;
        padding: 10px;
        margin-bottom: 10px;
    }

    #warabi-topic2 .itutuboshi p {
        font-size: clamp(13px, 3vw, 16px);
        margin-bottom: 40px;
        padding: 0 10px;
    }

    #warabi-topic2 .itutuboshi p .appeal {
        font-size: clamp(13px, 3vw, 16px);
    }

    #warabi-cart-area {
        margin-bottom: 50px;
    }

    #warabi-cart-area h2 {
        font-size: 30px;
        margin-bottom: 30px;
        width: 80%;
    }

    #warabi-cart-area p.product-appeal {
        width: 95%;
        margin: 0 auto;
        font-size: clamp(13px, 3vw, 18px);
        line-height: 2;
    }

    #warabi-cart-area .cart-text {
        width: 95%;
        font-size: clamp(13px, 3vw, 16px);
    }

    #warabi-cart-area .warabi-blend-pr {
        font-size: 18px;
    }

    #warabi-topic4 {
        margin-bottom: 40px;
    }

    #warabi-topic4 h2 {
        font-size: 26px;
        margin-bottom: 20px;
        letter-spacing: 4px;
    }

    #warabi-topic4 h2 span {
        font-size: 20px;
    }

    #warabi-topic4 .review {
        background: url("../img/warabi/sp_bg_5.webp") no-repeat;
        background-size: 100%;
        margin-bottom: 40px;
    }

    #warabi-topic4 .review h3 {
        font-size: 36px;
        padding: 20px 10px 10px;
    }

    #warabi-topic4 .review ul {
        display: block;
        background: linear-gradient(transparent, #907047, #907047);
        padding: 10px;
    }

    #warabi-topic4 .review ul li {
        background: #fff url("../img/warabi/bg_voice.webp") left top /contain no-repeat;
        width: 100%;
        padding: 10px;
        margin: 10px 0;
    }

    #warabi-topic4 .review h4 {
        font-size: 24px;
        margin-bottom: 10px;
    }

    #warabi-topic4 .review p {
        font-size: clamp(13px, 3vw, 16px);
        line-height: 1.5;
    }

    #warabi-topic4 .review p .appeal {
        font-size: clamp(13px, 3vw, 16px);
    }

}