@media (min-width: 981px) {
    .pc{
        display: block !important;
    }
    .sp{
        display: none !important;
    }
html{
    scroll-padding-top: 73px;   /* ヘッダー高さ分 */
    scroll-behavior: smooth;    /* スムーススクロールもここで */
    min-width: 1280px;
    background-color: #f8f8f8;
    /* モーダル表示中にスクロールバーが消えても本文が右にずれないようにする */
    scrollbar-gutter: stable;
}
body{
    width: 100%;
    height: 100vh;
    padding-top: 73.75px;
    position: relative;
}
header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 1280px;
    height: 72.75px;
    background-color: #f8f8f8;
    z-index: 200;
}

header ul{
 display: block;
 height: 72.75px;   
 position: absolute;
 top: 0;
 right: 0;
 padding-right: 24px;
 padding-top: 15.5px;
}

header ul li{
    display: inline-block;
    vertical-align: middle;
    margin-left: 20px;
}

header li a{
    font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Meiryo", sans-serif;
    font-size: 15px;
    line-height: 35px;
    letter-spacing: 0.75px;
    color: #0B0B0B;
    transition: color .15s ease;
}

header ul.pc > li > a:not(.nav-pill):hover{
    color: #8a8a8a;
}

/* ヘッダー右端の2つの丸ピルボタン（お問い合わせ／オフィス向けはこちら） */
header .nav-pill{
    display: inline-block;
    line-height: 1;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid #0b0b0b;
    font-size: 13px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: background-color .15s, color .15s;
}
header .nav-pill--green{
    border-color: #3c9f3a;
    color: #2c5f2d;
}
header .nav-pill--green:hover{
    background-color: #3c9f3a;
    color: #ffffff;
}
header .nav-pill--dark{
    border-color: #0b0b0b;
    color: #0b0b0b;
}
header .nav-pill--dark:hover{
    background-color: #0b0b0b;
    color: #ffffff;
}

header img{
    width: auto;
    height: 41px;
    position: absolute;
    top: 15px;
    left: 30px;
}

footer{
    background-color: #f8f8f8;
    width: 100%;
    text-align: center;   
    padding-top: 40px;
    padding-bottom: 40px;
}

footer img{
    width: 180px;
    height: auto;
    display: block;
    margin: 0 auto;
    margin-bottom: 10PX;
}

footer p, small{
    font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Meiryo", sans-serif;
    font-size: 11px;
    line-height: 18px;
    letter-spacing: 0.55px;
    color: #0B0B0B;
}

footer p{
    margin-bottom: 20px;
}

footer .footer-legal{
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 20px;
}

footer .footer-legal a{
    font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Meiryo", sans-serif;
    font-size: 12px;
    letter-spacing: 0.6px;
    color: #0b0b0b;
    text-decoration: underline;
}

main section#top{
    width: 100%;
    position: relative;
    z-index: 100;
}

/* KV = 動画（ロゴ・タグラインは動画に焼き込み済み） */
main section#top .hero-media{
    width: 100%;
    height: 720px;
    position: relative;
    overflow: hidden;
    /* 動画の左右に余った幅は差し替え素材のぼかし画像で埋める */
    background-image: url(../images/top-blur.jpg);
    background-size: cover;
    background-position: center;
}

main section#top .hero-media > video.hero-video{
    /* 動画自体の幅・高さは変更せず、中央1280px幅に固定する */
    position: absolute;
    top: 0;
    left: 50%;
    width: 1280px;
    height: 100%;
    transform: translateX(-50%);
    object-fit: cover;
    z-index: 0;
}

/* KV直下のリード文 */
main section#top .hero-lead{
    text-align: center;
    font-family: Georgia, "Hiragino Mincho ProN", "Hiragino Mincho Pro",
               "Noto Serif JP", "Yu Mincho", "YuMincho",
               "MS PMincho", "MS Mincho", serif;
    font-size: 38px;
    line-height: 58px;
    letter-spacing: 2px;
    color: #0b0b0b;
    background-color: #f4f3f0;
    background-image: url(../images/bg-washi.jpg);
    background-size: cover;
    background-position: center;
    padding: 72px 0 80px;
    margin: 0;
}

/* KAORIBAロゴ・見出しは背景動画に焼き込み済みのため、視覚的には非表示（SEO/読み上げ用に残す） */
.hero-hidden{
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

main section#top .wrapper h2{
    font-size: 46px;
    line-height: 46px;
    letter-spacing: 4.6px;
    color: #0b0b0b;
    text-align: center;
    font-family: Georgia, "Hiragino Mincho ProN", "Hiragino Mincho Pro",
               "Noto Serif JP", "Yu Mincho", "YuMincho",
               "MS PMincho", "MS Mincho", serif;
    margin-bottom: 20px;
}

main section#top .wrapper h3{
    font-size: 17px;
    line-height: 26px;
    letter-spacing: 0.85px;
    color: #0b0b0b;
    text-align: center;
    font-family: Georgia, "Hiragino Mincho ProN", "Hiragino Mincho Pro",
               "Noto Serif JP", "Yu Mincho", "YuMincho",
               "MS PMincho", "MS Mincho", serif;
    margin-bottom: 212px;
}

main section#top .wrapper img{
    width: 188px;
    height: auto;
    display: block;
    margin: 0 auto;
    margin-bottom: 12px;
}

main section#top .wrapper p{
    font-size: 15px;
    line-height: 15px;
    letter-spacing: 0.75px;
    color: #0b0b0b;
    text-align: center;
    font-family: Georgia, "Hiragino Mincho ProN", "Hiragino Mincho Pro",
               "Noto Serif JP", "Yu Mincho", "YuMincho",
               "MS PMincho", "MS Mincho", serif;
    margin-bottom: 22px;
}

main section#top .wrapper img.mp{
    width: 152px;
    height: 27px;
    display: block;
    margin: 0 auto;
    margin-bottom: 2px;
}

main section#top .wrapper p.notice{
    font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Meiryo", sans-serif;
    font-size: 11px;
    line-height: 11px;
    letter-spacing: 0.55px;
    color: #0B0B0B;
}

.shindan-button{
width: 267px;
margin: 0 auto;
cursor: pointer;
margin-bottom: 87px;
}

.shindan-button > a{
    display: flex;
    gap: 5px;
    width: 100%;
    height: 45px;
    text-decoration: none;
}

.shindan-button .left{
    flex: 1;
    height: 45px;
    border-radius: 5px;
    border: solid 1px #0b0b0b;
    box-sizing: border-box;
    text-align: center;
    font-weight: bold;
    overflow: hidden;
    background-color: #f8f8f8;
    transition: background-color .3s ease, border-color .3s ease;
}


.shindan-button .left span.before{
    font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Meiryo", sans-serif;
    font-size: 13px;
    line-height: 43px;
    letter-spacing: 1.3px;
    color: #0B0B0B;
    text-align: center;
    font-weight: bold;
    display: block;
    position: relative;
    margin-top: 0;
        transition: margin-top .4s ease, padding-left .4s ease, color .3s ease;
}

.shindan-button:hover .left{
    background-color: #2C5F2D;
    border-color: #2C5F2D;
}


.shindan-button:hover .left span.before{
    margin-top: 1px;
    color: white;
    padding-left: 2px;
}


.shindan-button .right{
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    border-radius: 5px;
    background-color: #0b0b0b;
    background-image: url(../images/bg-arrow.png);
    background-size: 50px;
    background-position-x: center;
    background-position-y: center;
    background-repeat: repeat;
    transition: background-color .3s ease, background-position .3s ease;
}

.shindan-button:hover .right{
    background-color: #2C5F2D;
    background-position-x: 47px;
    background-position-y: -52px;
    transition: background-color .3s ease, background-position .3s ease;
}

.shindan-button .right img{
    width: 18px !important;
    height: auto !important;
    margin: 12px auto !important;

}

main section#top .wrapper h4{
    font-size: 34px;
    line-height: 46px;
    letter-spacing: 3.4px;
    color: #0b0b0b;
    text-align: center;
    font-family: Georgia, "Hiragino Mincho ProN", "Hiragino Mincho Pro",
               "Noto Serif JP", "Yu Mincho", "YuMincho",
               "MS PMincho", "MS Mincho", serif;
}

#hero-lead{
    width: 100%;
    height: 500px;
    background-image: url(../images/bg-washi.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 100;
    overflow: hidden;
    box-sizing: border-box;
}

#hero-lead p{
    font-family: Georgia, "Hiragino Mincho ProN", "Hiragino Mincho Pro",
               "Noto Serif JP", "Yu Mincho", "YuMincho",
               "MS PMincho", "MS Mincho", serif;
    font-size: 38px;
    line-height: 60px;
    letter-spacing: 2px;
    color: #0b0b0b;
    background-color: #f4f3f0;
    background-image: url(../images/bg-washi.jpg);
    background-size: cover;
    background-position: center;
    padding: 190px 0 0px;
    margin: 0;
    text-align: center;
}

#message{
    width: 100%;
    height: 487px;
    background-image: url(../images/bg-message-forest.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 100;
    overflow: hidden;
}

#message h2{
    position: relative;
    z-index: 1;
    font-size: 38px;
    line-height: 60px;
    letter-spacing: 2px;
    color: #f4f3f0;
    text-align: center;
    font-family: Georgia, "Hiragino Mincho ProN", "Hiragino Mincho Pro",
               "Noto Serif JP", "Yu Mincho", "YuMincho",
               "MS PMincho", "MS Mincho", serif;
    margin-bottom: 24px;
    padding-top: 167px;
}

#message p{
    position: relative;
    z-index: 1;
    font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Meiryo", sans-serif;
    font-size: 17px;
    line-height: 28px;
    letter-spacing: 0.5px;
    color: #f4f3f0;
    text-align: center;
}

#howto{
    width: 100%;
    height: 650px;
    /* 縦は必ず全面カバーし、横は画像が足りない分だけグラデーションを見せる */
    background-image: url(../images/bg-kaoriba_L.jpg), linear-gradient(135deg, #eef1e9 0%, #f4f3f0 45%, #eaf0e6 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center top;
    background-size: auto 100%, cover;
    padding-top: 60px;
    padding-bottom: 90px;
    box-sizing: border-box;
}
#howto img.logo{
    width: 264px;
    display: block;
    margin: 0 auto;
    margin-bottom: 10px;
}

#howto .howto-title{
    font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Meiryo", sans-serif;
    font-size: 21px;
    line-height: 37px;
    letter-spacing: 1.05px;
    color: #0b0b0b;
    text-align: center;
    margin-top: 224px;
    margin-bottom: 6px;
}

#howto p{
    font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Meiryo", sans-serif;
    font-size: 17px;
    line-height: 28px;
    letter-spacing: 0.85px;
    color: #0b0b0b;
    text-align: center;
    margin-bottom: 20px;
}
.label-howto{
    background-color: #2c5f2d;
    width: 128px;
    height: 32px;
    border-radius: 20px;
    display: block;
    margin: 0 auto;
    color: #f8f8f8;
    font-size: 16px;
    font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Meiryo", sans-serif;
    font-weight: bold;
    letter-spacing: 0.8px;
    line-height: 32px;
    text-align: center;
    margin-bottom: 18px;
}

/* 月額価格の行（はじめかた / 料金プラン共通） */
.price-row{
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    font-family: Georgia, "Hiragino Mincho ProN", "Hiragino Mincho Pro",
    "Noto Serif JP", "Yu Mincho", "YuMincho",
    "MS PMincho", "MS Mincho", serif;
    color: #0b0b0b;
    margin-bottom: 14px;
}
.price-row img{
    width: 321px;
}
.price-row .unit{
    font-size: 20px;
    letter-spacing: 1px;
}
.price-row .amount{
    font-size: 40px;
    font-weight: bold;
    letter-spacing: 2px;
}

#howto .mp{
    width: 300px;
    display: block;
    margin: 0 auto;
    padding-left: 15px;
    margin-bottom: 20px;
}
#howto p.notice{
    font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Meiryo", sans-serif;
    font-size: 12px;
    line-height: 19px;
    letter-spacing: 0.6px;
    color: #0b0b0b;
    text-align: center;
    width: 320px;
    margin: 0 auto;
    margin-bottom: 32px;
}

/* CTAボタン2つ（香りを選んではじめる／香り診断からはじめる） */
#howto .cta-row{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
.cta-textlink{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Meiryo", sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    color: #0b0b0b;
    text-decoration: none;
    border-bottom: solid 1px #0b0b0b;
    padding-bottom: 3px;
    transition: opacity .15s;
}
.cta-textlink:hover{ opacity: .6; }
.cta-textlink .tl-arrow{
    width: 12px;
    height: 12px;
    background-image: url(../images/bg-arrow.png);
    background-size: 14px;
    background-position: center;
    filter: invert(1);
}
.cta-button{
    display: flex;
    align-items: stretch;
    gap: 5px;
    width: 267px;
    height: 45px;
    text-decoration: none;
    box-sizing: border-box;
}
.cta-button .label{
    flex: 1;
    background-color: #f8f8f8;
    height: 45px;
    line-height: 45px;
    text-align: center;
    border-radius: 5px;
    border: solid 1px #0b0b0b;
    box-sizing: border-box;
    font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Meiryo", sans-serif;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1.3px;
    color: #0b0b0b;
    transition: .15s;
}
.cta-button .arrow{
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    border-radius: 5px;
    background-color: #0b0b0b;
    background-image: url(../images/bg-arrow.png);
    background-size: 50px;
    background-position: center;
    background-repeat: repeat;
    transition: .15s;
}
.cta-button:hover .label{
    background-color: #30912e;
    border-color: #30912e;
    color: #ffffff;
}
.cta-button:hover .arrow{
    background-color: #30912e;
}
.cta-button--green .label{
    color: #0d590a;
}
.cta-button--green:hover .label{
    color: #ffffff;
}

/* セオリー（暗い全面写真＋見出しのみ） */
#point{
    position: relative;
    width: 100%;
    height: 370px;
    background-image: url(../images/bg-point.jpg);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

#point::before{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.5);
}

#point h2{
    position: relative;
    z-index: 1;
    font-size: 46px;
    line-height: 55px;
    letter-spacing: 4.6px;
    color: #f4f3f0;
    text-align: center;
    font-family: Georgia, "Hiragino Mincho ProN", "Hiragino Mincho Pro",
               "Noto Serif JP", "Yu Mincho", "YuMincho",
               "MS PMincho", "MS Mincho", serif;
    padding-top: 161px;
}

#about2{
    width: 100%;
    height: auto;
    min-height: 688px;
    background-color: #f4f3f0;
    background-image: url(../images/bg-washi.jpg);
    background-size: cover;
    background-position: center;
    padding-top: 126px;
    padding-bottom: 60px;
    box-sizing: border-box;
}

#about2 h2{
    font-size: 34px;
    line-height: 43px;
    letter-spacing: 3.4px;
    color: #0b0b0b;
    text-align: center;
    font-family: Georgia, "Hiragino Mincho ProN", "Hiragino Mincho Pro",
               "Noto Serif JP", "Yu Mincho", "YuMincho",
               "MS PMincho", "MS Mincho", serif;
    margin-bottom: 15px;
}

#about2 p{
    font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Meiryo", sans-serif;
    font-size: 17px;
    line-height: 27px;
    letter-spacing: 0.85px;
    color: #0b0b0b;
    text-align: center;
    margin-bottom: 52px;
}

#about2 .wrapper{
    width: 860px;
    display: block;
    margin: 0 auto;
    overflow: hidden;
}

#about2 .wrapper div{
    width: 260px;
    float: left;
}

#about2 .wrapper div:nth-of-type(2){
    margin: 0 40px;
}

#about2 .wrapper div img{
    width: 100%;
    margin-bottom: 19px;
}

#about2 .wrapper div p{
    font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Meiryo", sans-serif;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0px;
    color: #0b0b0b;
    text-align: center;
}

#balance{
    width: 100%;
    height: 864px;
    background-image: url(../images/bg-balance.jpg);
    background-size: cover;
    background-position: center;
    padding-top: 112px;
    box-sizing: border-box;
    position: relative;
}

#balance::before{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.66);
    z-index: 0;
}

#balance h2{
    position: relative;
    z-index: 1;
    font-size: 34px;
    line-height: 43px;
    letter-spacing: 3.4px;
    color: #f4f3f0;
    text-align: center;
    text-shadow: 0 2px 14px rgba(0,0,0,.6), 0 0 4px rgba(0,0,0,.4);
    font-family: Georgia, "Hiragino Mincho ProN", "Hiragino Mincho Pro",
               "Noto Serif JP", "Yu Mincho", "YuMincho",
               "MS PMincho", "MS Mincho", serif;
    margin-bottom: 48px;
}

#balance .wrapper{
    position: relative;
    z-index: 1;
    width: 898px;
    height: 389px;
    margin: 0 auto;
    overflow: hidden;
}

#balance .wrapper .left{
    width: 318px;
    height: 390px;
    float: left;
    background-image: url(../images/img-balance.jpg);
    background-size: cover;
    background-position: center;
}

#balance .wrapper .right{
    width: 578px;
    height: 390px;
    float: left;
    padding: 83px 41.8px 0 44.9px;
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.7);
}

#balance .wrapper .right h3{
    font-size: 27px;
    line-height: 27px;
    letter-spacing: 2.7px;
    color: #ffffff;
    text-align: left;
    font-family: Georgia, "Hiragino Mincho ProN", "Hiragino Mincho Pro",
               "Noto Serif JP", "Yu Mincho", "YuMincho",
               "MS PMincho", "MS Mincho", serif;
    margin-bottom: 42.5px;
}

#balance .wrapper .right p{
    font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Meiryo", sans-serif;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0.7px;
    color: #ffffff;
    text-align: left;
    margin-bottom: 14px;
}

#balance h4{
    position: relative;
    z-index: 1;
    font-size: 28px;
    line-height: 38px;
    letter-spacing: 2.8px;
    color: #f4f3f0;
    text-align: center;
    text-shadow: 0 2px 14px rgba(0,0,0,.6), 0 0 4px rgba(0,0,0,.4);
    font-family: Georgia, "Hiragino Mincho ProN", "Hiragino Mincho Pro",
               "Noto Serif JP", "Yu Mincho", "YuMincho",
               "MS PMincho", "MS Mincho", serif;
    margin-top: 55.8px;
}



/* ご利用の流れ（バナー見出し） */
#start{
    position: relative;
    width: 100%;
    height: 370px;
    background-image: url(../images/bg-start.jpg);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}



#start h2{
    position: relative;
    z-index: 1;
    font-size: 46px;
    line-height: 46px;
    letter-spacing: 4.6px;
    color: #f4f3f0;
    text-align: center;
    font-family: Georgia, "Hiragino Mincho ProN", "Hiragino Mincho Pro",
               "Noto Serif JP", "Yu Mincho", "YuMincho",
               "MS PMincho", "MS Mincho", serif;
    padding-top: 162px;
}


/* #start2〜#faqsは.washi-groupで和紙背景を1枚共有するため、個別の背景は持たない。
   高さはFAQのアコーディオン開閉で変わるため、background-size:coverだと
   その都度スケールが再計算されて背景が動いて見える。
   リピート（repeat-y）だと素材の継ぎ目に境界線が出てしまうため、
   実際に必要な最大の高さ（現状 約2086px）より十分大きい固定値を
   1枚だけ敷き、リピートさせないことで継ぎ目もスケール変化もなくす。 */
.washi-group{
    width: 100%;
    background-color: #f4f3f0;
    background-image: url(../images/bg-washi.jpg);
    background-size: 100% 2200px;
    background-repeat: no-repeat;
    background-position: center top;
}

#start2{
    width: 100%;
    height: auto;
    min-height: 618px;
    padding-bottom: 90px;
    box-sizing: border-box;
}


#start2 h2{
    font-size: 34px;
    line-height: 46px;
    letter-spacing: 3.4px;
    color: #0b0b0b;
    text-align: center;
    font-family: Georgia, "Hiragino Mincho ProN", "Hiragino Mincho Pro",
               "Noto Serif JP", "Yu Mincho", "YuMincho",
               "MS PMincho", "MS Mincho", serif;
    padding-top: 118px;
    margin-bottom: 68px;
}

/* 4ステップ図 */
#start2 .steps{
    position: relative;
    width: auto;
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

#start2 .step{
    position: relative;
    width: 194px;
}

#start2 .step__arrow{
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background-image: url(../images/icon-step-arrow.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#start2 .step__card{
    position: relative;
    width: 194px;
    min-height: 256px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
    padding-top: 44px;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
}

#start2 .step__card.mousikomi{
    padding-top: 27.5px;
}

#start2 .step__card.track{
    padding-top: 42.4px;
}

#start2 .step__card.set{
    padding-top: 17px;
}

#start2 .step__card.calendar{
    padding-top: 35.5px;
}

#start2 .step__card::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12px;
    background-color: #3c9f3a;
}

#start2 .step__icon{
    display: block;
    height: 65px;
    width: auto;
    margin: 0 auto 15px;
}

#start2 .step__icon.track{
    display: block;
    height: 50px;
    width: auto;
    margin: 0 auto 15px;
}

#start2 .step__icon.set{
    display: block;
    height: 78.9px;
    width: auto;
    margin: 0 auto 11px;
}

#start2 .step__icon.calendar{
    display: block;
    height: 51.4px;
    width: auto;
    margin: 0 auto 17px;
}


#start2 .step__title{
    font-size: 17px;
    font-weight: bold;
    line-height: 28px;
    letter-spacing: 0.85px;
    color: #0b0b0b;
    text-align: center;
    ffont-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Meiryo", sans-serif;
    margin: 0 0 10px;
}

#start2 .step__text{
    font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Meiryo", sans-serif;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0px;
    color: #0b0b0b;
    text-align: left;
    padding: 0 18px 20px;
    margin: 0;
}

/* 料金プラン（カード＋送料無料バッジ） */
#plan{
    width: 100%;
    height: auto;
    padding: 80px 0;
    box-sizing: border-box;
}

#plan .plan-card{
    width: 914px;
    min-height: 587px;
    margin: 0 auto;
    background-color: #f8f8f8;
    border-radius: 35px;
    box-shadow: 0 10px 40px rgba(0,0,0,.08);
    box-sizing: border-box;
    padding: 89.8px 60px 50px;
    text-align: center;
}

#plan h2{
    font-size: 34px;
    line-height: 34px;
    letter-spacing: 3.4px;
    color: #0b0b0b;
    text-align: center;
    font-family: Georgia, "Hiragino Mincho ProN", "Hiragino Mincho Pro",
               "Noto Serif JP", "Yu Mincho", "YuMincho",
               "MS PMincho", "MS Mincho", serif;
    padding-top: 0;
    margin: 0 0 56.2px;
}

#plan .plan-price-card{
    display: block;
    width: 314px;
    height: auto;
    margin: 0 auto 34px;
}

#plan .plan-shipping-badge{
    display: block;
    width: 462px;
    height: auto;
    margin: 0 auto;
}

#plan .ship-note{
    font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Meiryo", sans-serif;
    font-size: 10px;
    line-height: 16px;
    letter-spacing: 0.5px;
    color: #0b0b0b;
    text-align: center;
    margin: 0 auto;
}

#faqs{
    width: 100%;
    min-height: 591px;
    height: auto;
    padding-bottom: 90px;
}

#faqs h2{
    font-size: 34px;
    line-height: 34px;
    letter-spacing: 3.4px;
    color: #0b0b0b;
    text-align: center;
    font-family: Georgia, "Hiragino Mincho ProN", "Hiragino Mincho Pro",
               "Noto Serif JP", "Yu Mincho", "YuMincho",
               "MS PMincho", "MS Mincho", serif;
    padding-top: 100px;
    margin-bottom: 48.5px;
}

.faq{
    max-width: 760px;
    margin: 0 auto;
  }

  .faq-item{
    border:1px solid #0b0b0b;
    border-radius: 5.2px;
    overflow:hidden;
    background:#fff;
    margin: 10px 0;
  }

  /* Question button */
  .faq-question{
    width:100%;
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 16px;
    border:0;
    background:#f8f8f8;
    cursor:pointer;
    text-align:left;
    

    /* QとAのフォント指定 */
    font-weight:600;
  }

  .faq-question:focus-visible{
    outline:3px solid rgba(26,166,74,.35);
    outline-offset:2px;
    border-radius: calc(var(--radius) - 2px);
  }

  .qa-badge{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    user-select:none;
  }

  /* 緑の○にQ */
  .qa-badge.q{
    width: 25px;
    height: 30px;
    font-family: "Century Gothic Pro", "Century Gothic", CenturyGothic, "AppleGothic", Arial, sans-serif;
  font-weight: 700; /* Bold */
    font-size:30px;
    letter-spacing:.02em;
    color: #30912e
  }

  .faq-question .text{
    flex:1 1 auto;
    font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Meiryo", sans-serif;
    font-size: 15px;
    line-height: 15px;
    letter-spacing: 0.75px;
    color: #0b0b0b;
    text-align: left;
   }

  /* 右側の矢印 */
  .chevron{
    flex:0 0 auto;
    width:22px;
    height:22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition: transform .18s ease;
  }
  .chevron svg{
    width:18px;
    height:18px;
    stroke: #333;
    stroke-width: 2.6;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Answer panel */
  .faq-answer{
    background: #f8f8f8;
    border-top:2px solid var(--border);

    /* アニメ用（JSで高さを入れる） */
    height:0;
    overflow:hidden;
    transition: height .22s ease;
  }

  .answer-inner{
    display:flex;
    gap:14px;
    padding:0 16px 16px;
    align-items:flex-start;

    /* QとAのフォント指定 */
    font-family: "Century Gothic", CenturyGothic, "AppleGothic", "Futura", sans-serif;
    font-size:15px;
    line-height:1.75;
    font-weight:500;
    color:#2b2b2b;
  }

  /* Aは緑の文字だけ（スクショっぽく） */
  .qa-badge.a{
    width: 22px;
    height: 30px;
  }

  .answer-inner p{
    margin:0;
    font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Meiryo", sans-serif;
    font-size: 15px;
    line-height: 25px;
    letter-spacing: 0.75px;
    color: #0b0b0b;
    text-align: left;
  }

  /* Open state */
  .faq-item.is-open .chevron{
    transform: rotate(180deg);
  }

  .faq-item.is-open .faq-question{
  }

  /* 少しだけスクショ感のある余白 */
  .faq-wrap{
    border: 1px solid rgba(0,0,0,.08);
    padding: 12px;
    border-radius: 10px;
    background:#fafafa;
  }

  /* 追従お申し込みボタン（右下） */
  .fixed-cta{
    width: 164px;
    height: 164px;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 110;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 14px 20px;
    box-sizing: border-box;
    background-color: rgba(242, 242, 242, 0.92);
    border-radius: 30px 0 0 0;
    text-decoration: none;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    transition: background-color .2s;
  }
  .fixed-cta:hover{ background-color: rgba(236,236,236,0.98); }
  .fixed-cta__product{
    width: auto;
    height: 74px;
    display: block;
    margin: 0 auto 11.4px ;
  }
  .fixed-cta__body{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-bottom: 4px;
  }
  .fixed-cta__logo{ width: 96px; height: auto; display: block;
    margin: 0 auto;
 }
  .fixed-cta__label{
    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-size: 12px;
    letter-spacing: 0px;
    color: #0b0b0b;
  }
  .fixed-cta__arrow{
    align-self: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #0b0b0b;
    background-image: url(../images/bg-arrow.png);
    background-size: 30px;
    background-position: center;
    margin-bottom: 6px;
    flex: 0 0 30px;
  }


  #detail{
    width: 100%;
    height: auto;
    background-color: #f4f3f0;
    background-image: url(../images/bg-washi.jpg);
    background-size: cover;
    background-position: center;
    padding-top: 138px;
    padding-bottom: 110px;
}

#detail h2{
    font-size: 34px;
    line-height: 34px;
    letter-spacing: 3.4px;
    color: #0b0b0b;
    text-align: center;
    font-family: Georgia, "Hiragino Mincho ProN", "Hiragino Mincho Pro",
               "Noto Serif JP", "Yu Mincho", "YuMincho",
               "MS PMincho", "MS Mincho", serif;
    margin-bottom: 48px;
}

#detail .wrapper{
    width: 1010px;
    margin: 0 auto;
    height: 337px;
    margin-top: 45.5px;
    margin-bottom: 55.7px;
    overflow: hidden;
}

/* 香りカードの見出し（縦長カード下部） */
#detail .wrapper .d-name{
    font-family: Georgia, "Hiragino Mincho ProN", "Hiragino Mincho Pro",
               "Noto Serif JP", "Yu Mincho", "YuMincho",
               "MS PMincho", "MS Mincho", serif;
    font-size: 26px;
    line-height: 30px;
    letter-spacing: 2px;
    color: #f8f8f8;
    text-align: left;
    margin-bottom: 8px;
    line-height: 33px;
}
#detail .wrapper .d-name span{
    font-size: 25px;
    letter-spacing: 2px;
    line-height: 33px;
    margin-left: 0;
    margin-top: 4px;
    font-family: "Noto Sans JP", sans-serif;
    opacity: .85;
}

/* No.バッジ（カード上部） */
#detail .wrapper .scent-no{
    position: absolute;
    top: 18px;
    left: 26px;
    z-index: 12;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 25px;
    letter-spacing: 1.5px;
    color: #f8f8f8;
    width: auto;
    height: auto;
    float: none;
    padding: 0;
}
#detailModal .popup .right .scent-lead{
    font-size: 19px;
    line-height: 1.6;
    letter-spacing: .8px;
    color: #0b0b0b;
    margin-bottom: 28px;
}
.popup .right h4 .en{
    font-size: 25px;
    letter-spacing: 1px;
    margin-left: 10px;
    opacity: .7;
    font-family: "Noto Sans JP", sans-serif;
}

#detail .wrapper div{
    width: 328px;
    height: 337px;
    display: block;
    float: left;
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 13px;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}

#detail .wrapper .d-wrap{
    position: absolute;
    left: 26px;
    bottom: 30px;
    padding: 0;
    z-index: 11;
    width: auto;
    height: auto;
}

#detail .wrapper .poptap:nth-of-type(2){
    margin: 0 13px;
}
#detail .wrapper .poptap:nth-of-type(5){
    margin: 0 13px;
}

#detail p.detail-message{
    font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Meiryo", sans-serif;
    font-size: 17px;
    line-height: 30px;
    letter-spacing: 0.85px;
    color: #0b0b0b;
    text-align: center;
    margin-bottom: 36px;
}

#detail p{
    font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Meiryo", sans-serif;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0.75px;
    color: #f8f8f8;
    text-align: left;
}

.poptap {
    background-size: 100%;
    background-position: center center;
    position: relative;
    transition: background-size 0.3s ease;
}

.poptap:hover {
    background-size: 112%;
    transition: background-size 0.3s ease;
}

.poptap .overlay{
    float: none;
    border-radius: 10px;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.65) 100%);
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    width: 328px;
    height: 337px;
    display: block;
    transition: .3s;
}

.poptap:hover .overlay{
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.5) 100%);
    transition: .3s;
}

.poptap .arrow{
    border-radius: 10px;
    z-index: 13;
    opacity: 0.7;
    position: absolute;
    top: 10px;
    right: 0;
    width: 45px !important;
    height: 45px !important;
    display: block !important;
    transition: .3s;
    background-image: url(../images/bg-arrow.png);
    background-size: 45px;
    background-position-x: center;
    background-position-y: center;
    background-repeat: repeat;
    --fade: 16px;                 /* フェード幅 */
    border-radius: 10px;          /* 角丸があるなら合わせる */
    
    /* Safari対応 */
    -webkit-mask-image: 
        linear-gradient(#000, #000),
        linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent),
        linear-gradient(to bottom, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
    -webkit-mask-composite: source-in;
    
    /* Chrome/Edge */
    mask-image:
        linear-gradient(#000, #000),
        linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent),
        linear-gradient(to bottom, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
    mask-composite: intersect;
    }


.poptap:hover .arrow{
    background-position-x: 45px;
    background-position-y: -45px;
    transition: .3s;
}

.detail-1{
    background-image: url(../images/scent-fukamori.jpg);
}
.detail-2{
    background-image: url(../images/scent-asamori.jpg);
}
.detail-3{
    background-image: url(../images/scent-wamori.jpg);
}
.detail-1 img{
    height: 25px;
    width: auto;
    margin-bottom: 15px;
}
.detail-2 img{
    height: 25px;
    width: auto;
    margin-bottom: 15px;
}
.detail-3 img{
    height: 20px;
    width: auto;
    margin-bottom: 20px;
}
.detail-4 img{
    height: 20px;
    width: auto;
    margin-bottom: 20px;
}
.detail-5 img{
    height: 20px;
    width: auto;
    margin-bottom: 20px;
}
.detail-6 img{
    height: 20px;
    width: auto;
    margin-bottom: 20px;
}


/* ===== Modal base ===== */
.modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .35s ease, visibility 0s linear .35s;
  }

  .modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .35s ease, visibility 0s linear 0s;
  }

  .modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6); /* 半透明黒 */
  }

  .modal__window {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1080px;
    height: 337px;
    transform: translate(-50%, -50%) scale(0.94);
    background: #f4f3f0;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    box-sizing: border-box;
    opacity: 0;
    transition: transform .35s cubic-bezier(.22, 1.15, .36, 1), opacity .35s ease;
  }

  .modal.is-open .modal__window {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  .modal__close {
    position: absolute;
    top: 32px;
    right: 32px;
    width: 40px;
    height: 40px;
    border: none;
    cursor: pointer;
    z-index: 2;
  }

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

  .modal__content {
    width: 100%;
    height: 100%;
    overflow: auto;
    box-sizing: border-box
  }

  /* モーダル表示中はスクロール止める */
  body.is-modal-open {
    overflow: hidden;
  }

  .popup{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
    gap: 48px;
    overflow: visible;
    border-radius: 0;
    border: none;
    box-shadow: none;
    box-sizing: border-box;
    padding: 0;
  }

  .popup .left{
   flex: 0 0 42%;
   height: 100%;
   background-size: cover;
   background-position: center center;
   border-radius: 16px 0 0 16px;
  }

  .popup--detail-1 .left{
    background-image: url(../images/scent-fukamori.jpg);
  }
  .popup--detail-2 .left{
    background-image: url(../images/scent-asamori.jpg);
  }
  .popup--detail-3 .left{
    background-image: url(../images/scent-wamori.jpg);
  }

  .popup .right{
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 20px;
    box-sizing: border-box;
   }

   .popup .right h4{
        font-size: 25px;
        line-height: 1.3;
        letter-spacing: 1.5px;
        color: #0b0b0b;
        text-align: left;
        font-family: Georgia, "Hiragino Mincho ProN", "Hiragino Mincho Pro",
                "Noto Serif JP", "Yu Mincho", "YuMincho",
                "MS PMincho", "MS Mincho", serif;
        margin-bottom: 24px;

   }

   .popup .right p span{
    font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Meiryo", sans-serif;
    font-size: 17px;
    line-height: 1.8;
    letter-spacing: 0.75px;
    color: #0B0B0B;
}



   .check{
    --check-color: currentColor; /* ここを変えるだけで色変更できる */
    position: relative;
    padding-left: 1.4em; /* チェック分の余白 */
  }
  
  /* チェック本体（::before） */
  .check::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;              /* 文字の位置に合わせて微調整 */
    width: 24px;
    height: 20px;
    background: var(--check-color);
  
    /* SVGをマスクにする（＝塗りの色は background で決まる） */
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M20%206%20L9%2017%20L4%2012%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%275%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M20%206%20L9%2017%20L4%2012%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%275%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") no-repeat center / contain;
  }
  
  /* 色をCSSで差し替え例 */
  .check.is-1{  --check-color: #ff9acc; }
  .check.is-2{  --check-color: #30912e; }
  .check.is-3{  --check-color: #f4568c; }
  .check.is-4{  --check-color: #8247d4; }
  .check.is-5{  --check-color: #fcba22; }
  .check.is-6{  --check-color: #8cce22; }


  .popup h2{
    margin: 0 0 10px;
    font-size: 18px;
  }
  
  .popup p{
    margin: 0;
    line-height: 1.6;
  }

  .marugo{
    font-family:
  "Hiragino Maru Gothic ProN",
  "ヒラギノ丸ゴ ProN W4",
  "Hiragino Kaku Gothic ProN",
  "Yu Gothic",
  "Meiryo",
  sans-serif;
  }



}