@charset "UTF-8";

/* ========================================
   Google Fonts
======================================== */

@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700&display=swap");

/* ========================================
   CSS Variables
======================================== */

:root{

    --color-primary:#ff6b8b;
    --color-primary-light:#ff8fab;
    --color-primary-pale:#fff0f4;

    --color-accent:#ffd6e0;

    --color-text:#3f342c;
    --color-sub:#6f635a;

    --color-bg:#faf8f6;
    --color-white:#ffffff;

    --shadow-small:0 2px 8px rgba(0,0,0,.05);
    --shadow-medium:0 8px 20px rgba(0,0,0,.08);

    --radius-small:10px;
    --radius-medium:20px;
    --radius-large:40px;

    --transition:.3s ease;

    --max-width:1200px;

}

/* ========================================
   Reset
======================================== */

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"M PLUS Rounded 1c",sans-serif;

    background:var(--color-bg);

    color:var(--color-text);

    line-height:1.7;

    -webkit-font-smoothing:antialiased;

}

img{

    display:block;

    width:100%;
    height:auto;

}

ul{

    list-style:none;

}

a{

    color:inherit;
    text-decoration:none;

}

button{

    font-family:inherit;
    cursor:pointer;

}

/* ========================================
   Common
======================================== */

.container{

    width:min(100% - 2rem,var(--max-width));

    margin:auto;

}

.section-heading{

    font-size:2.2rem;

    font-weight:700;

    text-align:center;

    color:var(--color-text);

    margin-bottom:1rem;

}

.section-subtitle{

    text-align:center;

    color:var(--color-sub);

    margin-bottom:3rem;

}

/* ========================================
   Header
======================================== */

.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:999;

    background:rgba(255,255,255,.88);

    backdrop-filter:blur(14px);

    box-shadow:var(--shadow-small);

}

.header-container{

    max-width:var(--max-width);

    margin:auto;

    height:72px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 1rem;

}

.header-logo{

    font-size:1.6rem;

    font-weight:700;

    color:var(--color-primary);

    transition:var(--transition);

}

.header-logo:hover{

    transform:scale(1.05);

}

.header-nav{

    display:none;

}

.header-menu{

    display:flex;

    gap:2rem;

    align-items:center;

}

.header-menu a{

    position:relative;

    font-weight:500;

    transition:var(--transition);

}

.header-menu a:hover{

    color:var(--color-primary);

}

.header-menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--color-primary);

    transition:var(--transition);

}

.header-menu a:hover::after{

    width:100%;

}

.header-border{

    height:5px;

    background:linear-gradient(
        90deg,
        #ffd6e0,
        #ffe9ef,
        #e6f8ff,
        #eefdf6
    );

}

/* ========================================
   Header Responsive
======================================== */

@media(min-width:768px){

    .header-nav{

        display:block;

    }

}

@media(max-width:767px){

    .header{

        position:fixed;

    }

    .header-logo{

        font-size:1.3rem;

    }

    .section-heading{

        font-size:1.8rem;

    }

}
/* ========================================
   Hero（Background Image Slider）
======================================== */

.main-visual{

    position:relative;

    overflow:hidden;

    padding:0;

    background:var(--color-bg); /* 背景をサイト全体のベースカラーに変更、または transparent にする */

}

/* ========================================
   Slick
======================================== */

.mv-container{

    width:100%;

    margin:0;

}

.mv-container .slick-list{

    overflow:hidden;

}

.mv-container .slick-track{

    display:flex;

}

.mv-container .slick-slide{

    height:700px;

}

.mv-container .slick-slide>div{

    height:100%;

}

/* ========================================
   Slide
======================================== */

.mv-slide {
    position: relative;
    /* 背景が黒く抜けるのを防ぐため、スライド自体の背景にベースカラーを敷く場合 */
    background-color: #fce7f3; /* やや明るいパステル系など */
}

.mv-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 黒の透明度を少し下げて明るくする（例: 0.4 から 0.2 へ） */
    background: rgba(0, 0, 0, 0.2); 
    z-index: 1;
}

/* ========================================
   Background Image
======================================== */

.mv-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.mv-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像が歪まずにエリアを埋める */
    transition:transform 8s ease;
}

/* 現在表示中のスライドだけズーム */

.slick-current .mv-bg img{

    transform:scale(1.08);

}

/* ========================================
   Overlay
======================================== */

.mv-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(

        rgba(0,0,0,.55),

        rgba(0,0,0,.35)

    );

    z-index:2;

}

/* ========================================
   Hero Content
======================================== */

.mv-content{

    position:relative;

    z-index:3;

    width:min(1200px,90%);

    height:100%;

    margin:auto;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;

}

/* ========================================
   Title
======================================== */

.main-product-title{

    font-size:4.5rem;

    font-weight:700;

    color:#ffffff;

    line-height:1.2;

    margin-bottom:1.5rem;

}

.main-product-title span{

    display:block;

    margin-top:15px;

    font-size:1.6rem;

    font-weight:500;

    color:#ffffff;

}

/* ========================================
   Text
======================================== */

.main-product-text{

    max-width:600px;

    color:#ffffff;

    font-size:1.15rem;

    line-height:2;

    margin-bottom:2.5rem;

}

/* ========================================
   Button
======================================== */

.btn-purchase{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:220px;

    height:58px;

    border-radius:999px;

    background:var(--color-primary);

    color:#ffffff;

    font-weight:700;

    transition:.3s;

    box-shadow:

    0 10px 30px rgba(0,0,0,.25);

}

.btn-purchase:hover{

    transform:translateY(-4px);

    background:#ff4f77;

}

/* ========================================
   Arrow
======================================== */

.mv-container .slick-prev,

.mv-container .slick-next{

    width:54px;

    height:54px;

    border-radius:50%;

    background:rgba(255,255,255,.9);

    z-index:20;

}

.mv-container .slick-prev{

    left:35px;

}

.mv-container .slick-next{

    right:35px;

}

.mv-container .slick-prev:before,

.mv-container .slick-next:before{

    color:var(--color-primary);

    font-size:24px;

}

/* ========================================
   Dots
======================================== */

.mv-container .slick-dots{

    bottom:35px;

}

.mv-container .slick-dots li button:before{

    font-size:13px;

    color:#ffffff;

    opacity:.6;

}

.mv-container .slick-dots li.slick-active button:before{

    opacity:1;

    color:#ffffff;

}

/* ========================================
   Responsive
======================================== */

@media(max-width:768px){

    .mv-slide{

        height:520px;

    }

    .mv-container .slick-slide{

        height:520px;

    }

    .mv-content{

        width:90%;

        align-items:center;

        text-align:center;

    }

    .main-product-title{

        font-size:2.4rem;

    }

    .main-product-title span{

        font-size:1.1rem;

    }

    .main-product-text{

        font-size:1rem;

    }

    .btn-purchase{

        width:220px;

    }

    .mv-container .slick-prev{

        left:10px;

    }

    .mv-container .slick-next{

        right:10px;

    }

}
<!-- ==========================
        Main Visual
=========================== -->

<section class="main-visual">

    <div class="mv-container">

        <!-- ==========================
                Slide 1
        =========================== -->

        <div class="mv-slide">

            <div class="mv-bg">

                <img
                    src="img/main01.jpg"
                    alt="Aromastick メインビジュアル">

            </div>

            <div class="mv-overlay"></div>

            <div class="mv-content">

                <h1 class="main-product-title">

                    Aromastick

                    <span>

                        毎日をさわやかに、
                        もっとかわいく。

                    </span>

                </h1>

                <p class="main-product-text">

                    学校でも、放課後でも。

                    <br>

                    あなたの毎日に寄り添う
                    新しいロールオンアロマ。

                </p>

                <a
                    href="#purchase"
                    class="btn-purchase">

                    今すぐ購入

                </a>

            </div>

        </div>

        <!-- ==========================
                Slide 2
        =========================== -->

        <div class="mv-slide">

            <div class="mv-bg">

                <img
                    src="img/main02.jpg"
                    alt="放課後イメージ">

            </div>

            <div class="mv-overlay"></div>

            <div class="mv-content">

                <h2 class="main-product-title">

                    Refresh

                    <span>

                        香りで気持ちを
                        リセットしよう。

                    </span>

                </h2>

                <p class="main-product-text">

                    部活のあと。

                    <br>

                    勉強の休憩時間。

                    <br>

                    気分転換したい
                    すべての瞬間に。

                </p>

                <a
                    href="#shop"
                    class="btn-purchase">

                    商品を見る

                </a>

            </div>

        </div>

        <!-- ==========================
                Slide 3
        =========================== -->

        <div class="mv-slide">

            <div class="mv-bg">

                <img
                    src="img/main03.jpg"
                    alt="商品イメージ">

            </div>

            <div class="mv-overlay"></div>

            <div class="mv-content">

                <h2 class="main-product-title">

                    Pocket Size

                    <span>

                        いつでも、
                        どこでも。

                    </span>

                </h2>

                <p class="main-product-text">

                    ポケットにも、
                    ポーチにも。

                    <br>

                    小さくて可愛い、
                    あなた専用の香り。

                </p>

                <a
                    href="#contact"
                    class="btn-purchase">

                    お問い合わせ

                </a>

            </div>

        </div>

    </div>

</section>
/* ========================================
   About
======================================== */

.section-about{

    padding:6rem 1rem;

    background:#ffffff;

}

.about-container{

    width:min(900px,90%);

    margin:auto;

    text-align:center;

}

.about-text{

    font-size:1.1rem;

    color:var(--color-sub);

    line-height:2.2;

    margin-bottom:1.5rem;

}

/* ========================================
   Shop
======================================== */

.section-shop{

    padding:6rem 1rem;

    background:linear-gradient(
        180deg,
        #faf8f6 0%,
        #fffdfd 100%
    );

}

.section-title-wrapper{

    text-align:center;

    margin-bottom:4rem;

}

.section-title-wrapper .section-heading{

    margin-bottom:1rem;

}

.section-title-wrapper .section-subtitle{

    font-size:1rem;

    color:var(--color-sub);

}

/* ========================================
   Slider
======================================== */

.slider-container{

    width:min(1200px,92%);

    margin:auto;

    position:relative;

}

.slider-items{

    margin:0 -15px;

}

.slider-items .slick-track{

    display:flex;

    align-items:stretch;

}

.slider-items .slick-slide{

    padding:15px;

    height:inherit;

}

.slider-items .slick-slide>div{

    height:100%;

    display:flex;

}

/* ========================================
   Product Card
======================================== */

.product-card{

    width:100%;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    border-radius:24px;

    background:#ffffff;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

}

.product-card:hover{

    transform:translateY(-10px);

    box-shadow:0 18px 40px rgba(0,0,0,.15);

}

/* ========================================
   Badge
======================================== */

.card-badge{

    display:inline-block;

    margin:1.2rem;

    padding:.5rem 1.2rem;

    border-radius:999px;

    color:#ffffff;

    font-size:.8rem;

    font-weight:700;

}

.card-badge-pink{

    background:#ff7fa6;

}

.card-badge-orange{

    background:#ff9d5a;

}

.card-badge-green{

    background:#47c89f;

}

.card-badge-blue{

    background:#6baeff;

}


.card-badge-purple {
    background: #c084fc; /* やや明るめのラベンダー */
}
/* ========================================
   Product Image
======================================== */

.card-image{

    height:250px;

    background:#fff7fa;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

.card-image img{

    width:100%;

    height:100%;

    object-fit:contain;

    padding:20px;

    transition:transform .5s ease;

}

.product-card:hover .card-image img{

    transform:scale(1.08);

}

/* ========================================
   Product Text
======================================== */

.card-title{

    margin:1.8rem 1.6rem .8rem;

    font-size:1.3rem;

    font-weight:700;

    color:var(--color-text);

}

.card-desc{

    flex:1;

    margin:0 1.6rem 1.5rem;

    color:var(--color-sub);

    line-height:1.9;

}

.card-price{

    margin:0 1.6rem 2rem;

    color:var(--color-primary);

    font-size:1.5rem;

    font-weight:700;

}

/* ========================================
   Slider Arrow
======================================== */

.slider-container .slick-prev,

.slider-container .slick-next{

    width:52px;

    height:52px;

    border-radius:50%;

    background:#ffffff;

    box-shadow:0 5px 20px rgba(0,0,0,.15);

    z-index:20;

}

.slider-container .slick-prev{

    left:-25px;

}

.slider-container .slick-next{

    right:-25px;

}

.slider-container .slick-prev:before,

.slider-container .slick-next:before{

    color:var(--color-primary);

    font-size:24px;

}

/* ========================================
   Slider Dots
======================================== */

.slider-container .slick-dots{

    bottom:-55px;

}

.slider-container .slick-dots li button:before{

    font-size:13px;

    color:#ffb5ca;

    opacity:1;

}

.slider-container .slick-dots li.slick-active button:before{

    color:var(--color-primary);

}

/* ========================================
   Responsive
======================================== */

@media(max-width:1024px){

    .card-image{

        height:220px;

    }

}

@media(max-width:768px){

    .section-about{

        padding:4rem 1rem;

    }

    .section-shop{

        padding:4rem 1rem 6rem;

    }

    .about-text{

        font-size:1rem;

    }

    .card-title{

        font-size:1.15rem;

    }

    .card-price{

        font-size:1.3rem;

    }

    .card-image{

        height:200px;

    }

    .slider-container .slick-prev{

        left:-8px;

    }

    .slider-container .slick-next{

        right:-8px;

    }

}
/* ========================================
   Purchase
======================================== */

.section-purchase{

    padding:6rem 1rem;

    background:#ffffff;

}

.purchase-container{

    width:min(1100px,90%);

    margin:auto;

}

.purchase-header{

    text-align:center;

    margin-bottom:4rem;

}

.purchase-subtitle{

    color:var(--color-sub);

    margin-top:1rem;

    font-size:1rem;

}

.purchase-action-area{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:4rem;

    padding:3rem;

    border-radius:30px;

    background:linear-gradient(
        135deg,
        #fff6f9,
        #ffffff
    );

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.purchase-image{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

}

.purchase-image img{

    width:100%;

    max-width:420px;

    transition:.5s;

}

.purchase-image img:hover{

    transform:scale(1.05);

}

.purchase-button-area{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

}

/* ========================================
   Contact
======================================== */

.section-contact{

    padding:6rem 1rem;

    background:#faf8f6;

}

.contact-container{

    width:min(850px,90%);

    margin:auto;

}

.contact-header{

    text-align:center;

    margin-bottom:3.5rem;

}

.contact-subtitle{

    color:var(--color-sub);

    margin-top:1rem;

}

/* ========================================
   Form
======================================== */

.contact-form{

    background:#ffffff;

    padding:3.5rem;

    border-radius:30px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.form-group{

    margin-bottom:2rem;

}

.form-group label{

    display:block;

    margin-bottom:.7rem;

    font-weight:700;

    color:var(--color-text);

}

.form-input{

    width:100%;

    padding:1rem 1.2rem;

    font-size:1rem;

    font-family:inherit;

    border:1px solid #e5dfe3;

    border-radius:14px;

    background:#ffffff;

    transition:.3s;

}

.form-input:focus{

    outline:none;

    border-color:var(--color-primary);

    box-shadow:

        0 0 0 5px rgba(255,107,139,.15);

}

textarea.form-input{

    min-height:220px;

    resize:vertical;

}

/* ========================================
   Submit Button
======================================== */

.form-submit-wrapper{

    margin-top:2.5rem;

    text-align:center;

}

.btn-submit{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:260px;

    height:60px;

    border:none;

    border-radius:999px;

    background:var(--color-primary);

    color:#ffffff;

    font-size:1rem;

    font-weight:700;

    transition:.3s;

    box-shadow:

        0 12px 25px rgba(255,107,139,.25);

}

.btn-submit:hover{

    background:#ff4f77;

    transform:translateY(-4px);

}

.btn-submit:active{

    transform:translateY(0);

}

.field-error{

    display:block;

    margin-top:.4rem;

    font-size:.8rem;

    color:#d1435b;

}

.form-input[aria-invalid="true"]{

    border-color:#d1435b;

}

.form-status{

    margin-top:1.5rem;

    text-align:center;

    font-weight:700;

    color:var(--color-primary);

}

.form-status:empty{

    display:none;

}

/* ========================================
   Focus
======================================== */

.form-input:focus-visible,

.btn-submit:focus-visible,

.btn-purchase:focus-visible{

    outline:3px solid #ffc2d3;

    outline-offset:3px;

}

/* ========================================
   Responsive
======================================== */

@media(max-width:900px){

    .purchase-action-area{

        flex-direction:column;

        text-align:center;

    }

    .purchase-image img{

        max-width:320px;

    }

}

@media(max-width:768px){

    .section-purchase{

        padding:4rem 1rem;

    }

    .section-contact{

        padding:4rem 1rem;

    }

    .purchase-action-area{

        padding:2rem;

        gap:2rem;

    }

    .contact-form{

        padding:2rem;

    }

    .btn-submit{

        width:100%;

    }

}
/* ========================================
   Footer
======================================== */

.footer{

    background:#f5f2f4;

    border-top:1px solid #ebe5e8;

    padding:5rem 1rem 3rem;

}

.footer-container{

    width:min(1200px,90%);

    margin:auto;

    text-align:center;

}

.footer-logo{

    font-size:2rem;

    font-weight:700;

    color:var(--color-primary);

    margin-bottom:1rem;

}

.footer-text{

    color:var(--color-sub);

    margin-bottom:1rem;

    font-size:1rem;

}

.footer-contact{

    color:var(--color-sub);

    line-height:2;

    margin-bottom:2rem;

}

.copyright{

    display:block;

    color:#999;

    font-size:.9rem;

}

/* ========================================
   Floating Button
======================================== */

.floating-purchase-banner{

    position:fixed;

    right:25px;

    bottom:25px;

    z-index:999;

    opacity:0;

    pointer-events:none;

    transition:.35s;

}

.floating-btn-purchase{

    display:flex;

    justify-content:center;

    align-items:center;

    width:180px;

    height:60px;

    border-radius:999px;

    background:var(--color-primary);

    color:#ffffff;

    font-weight:700;

    letter-spacing:.05em;

    box-shadow:

        0 15px 35px rgba(255,107,139,.35);

    transition:.3s;

}

.floating-btn-purchase:hover{

    transform:translateY(-4px);

    background:#ff4f77;

}

.floating-btn-purchase:active{

    transform:translateY(0);

}

/* ========================================
   Fade Animation
======================================== */

.fade-up{

    opacity:0;

    transform:translateY(50px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

/* ========================================
   Slick Common
======================================== */

.slick-slider{

    user-select:none;

}

.slick-slide{

    outline:none;

}

.slick-track{

    display:flex;

    align-items:stretch;

}

.slick-slide{

    height:inherit;

}

.slick-slide > div{

    height:100%;

}

/* ========================================
   Utility
======================================== */

.text-center{

    text-align:center;

}

.mt-1{

    margin-top:1rem;

}

.mt-2{

    margin-top:2rem;

}

.mt-3{

    margin-top:3rem;

}

.mb-1{

    margin-bottom:1rem;

}

.mb-2{

    margin-bottom:2rem;

}

.mb-3{

    margin-bottom:3rem;

}

.d-flex{

    display:flex;

}

.align-center{

    align-items:center;

}

.justify-center{

    justify-content:center;

}

/* ========================================
   Responsive
======================================== */

@media(max-width:1024px){

    .footer{

        padding:4rem 1rem;

    }

}

@media(max-width:768px){

    .footer-logo{

        font-size:1.6rem;

    }

    .footer-contact{

        font-size:.95rem;

    }

    .floating-purchase-banner{

        right:15px;

        bottom:15px;

    }

    .floating-btn-purchase{

        width:150px;

        height:54px;

        font-size:.9rem;

    }

}

@media(max-width:480px){

    .footer{

        padding:3rem 1rem;

    }

    .footer-logo{

        font-size:1.4rem;

    }

    .footer-text{

        font-size:.95rem;

    }

    .footer-contact{

        font-size:.85rem;

    }

    .copyright{

        font-size:.8rem;

    }

    .floating-btn-purchase{

        width:130px;

        height:48px;

        font-size:.85rem;

    }

}
.product-link{

    display:block;

    text-decoration:none;

    color:inherit;

}

.product-link:hover{

    color:inherit;

}