@font-face {
    font-family: 'BoseText-Regular';
    src: url('../fonts/BoseText/BoseText-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'BoseText-SemiBold';
    src: url('../fonts/BoseText/BoseText-SemiBold.otf') format('opentype');
}

@font-face {
    font-family: 'NotoSansJp-Regular';
    src: url('../fonts/NotoSansJp/NotoSansJP-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'NotoSansJp-Bold';
    src: url('../fonts/NotoSansJp/NotoSansJP-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'NotoSansJp-SemiBold';
    src: url('../fonts/NotoSansJp/NotoSansJP-SemiBold.ttf') format('truetype');
}


@scope (.bose_create) { /*これで囲ったところだけ適用させる*/

    /* bodyのフォント指定を修正 */
    body {
        margin: 0;
        /* 欧文を先に、日本語を後に指定 */
        font-family: 'BoseText-Regular', 'NotoSansJp-Regular', sans-serif;
        font-size: 14px;
        line-height: 170%;
        color: #000000;
    }

    /* 太字部分も同様に優先順位を整理 */
    .catchphrase, .intro-heading, .product-card-title, .detail-name, .feature-item h3 {
        font-family: 'BoseText-SemiBold', 'NotoSansJp-Bold', sans-serif;
        font-weight: normal; /* Webフォント自体が太いので、ブラウザの二重太字を防止 */
    }

    .buy-button {
        font-family: 'BoseText-SemiBold', 'NotoSansJp-SemiBold', sans-serif;
    }

    @media screen and (min-width: 769px) {
        body {
            font-size: 16px;
        }
    }

    img {
        width: 100%;
    }

    .catchphrase {
        font-size: 24px;
        line-height: 32px;
        margin: 0 0 20px 0;
        font-family: 'NotoSansJp-Bold', serif;
    }

    @media screen and (min-width: 769px) {
        .catchphrase {
            font-size: 32px;
            line-height: 56px;
            margin: 0 0 40px 0;
        }
    }

    @media screen and (min-width: 1024px) {
        .catchphrase {
            font-size: 48px;
            line-height: 56px;
        }
    }


    .buy-button {
        background: #000;
        color: #fff;
        font-family: 'NotoSansJp-SemiBold', serif;
        width: 150px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
        margin-top: 1rem;
        transition-duration: 500ms;
        text-decoration: none;
    }

    .buy-button:hover {
        color: #fff;
        opacity: 0.7;
    }

    .product {
        /*max-width: 900px;*/
        margin: 4rem auto 0;
        display: flex;
        flex-direction: column-reverse;
    }

    @media screen and (min-width: 769px) {
        .buy-button {
            width: 200px;
            height: 62px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 9999px;
            margin-top: 2rem;
            transition-duration: 500ms;
            text-decoration: none;
        }

        .buy-button:hover {
            color: #fff;
            opacity: 0.7;
        }

        .product {
            /*max-width: 900px;*/
            margin: 4rem auto 0;
            display: flex;
            flex-direction: column-reverse;
        }
    }

    @media screen and (min-width: 1024px) {
        .product {
            max-width: 900px;
            margin: 4rem auto 0;
            display: flex;
            flex-direction: row;
        }
    }

    /* 基本リセット */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* -----------------------------------------------------------
    Hero セクション
    ----------------------------------------------------------- */
    .hero {
        position: relative;
        width: 100%;
        aspect-ratio: 1920 / 1039;
        max-height: 75vh;
        background-image: url('../img/hero.png'); /* モデルのみの背景画像 */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        align-items: center; /* 縦中央揃え */
        overflow: hidden;
    }

    /* コンテンツコンテナ（グリッド幅を意識したインナー） */
    .hero__inner {
        max-width: 1440px; /* LPの最大幅 */
        width: 100%;
        margin: 0 auto;
        padding: 0 14%; /* 左右のマージン */
        display: flex;
        justify-content: flex-start; /* 左寄せ */
        position: relative; /* 子要素の絶対配置基準 */
    }

    /* 左側テキストコンテンツ */
    .hero__content {
        color: #ffffff; /* 白文字に変更 */
        z-index: 10;
        width: 50%; /* 左側50%を占める */
    }

    /* キャッチフレーズ */
    .catchphrase {
        font-size: 58px;
        line-height: 1.2;
        margin: 0 0 4rem 0; /* 余白 */
    }

    /* 製品情報ブロック */
    .hero__product-info {
        margin-top: 2rem;
    }

    /* 見出し全体：通常のフォントを指定 */
    .hero-heading {
        font-family: 'BoseText-Regular', 'NotoSansJp-Regular', sans-serif;
        font-size: 28px;
        line-height: 1.1;
        margin: 0;
        letter-spacing: 0.03rem;
    }

    /* NEWラベルのみ：太字フォントを指定 */
    .hero__new-label {
        font-family: 'BoseText-SemiBold', 'NotoSansJp-Bold', sans-serif;
        font-weight: normal; /* ブラウザによる二重太字を防止 */
    }

    /* （第2世代）：フォントサイズを少し小さく設定 */
    .detail-name-gen {
        font-size: 0.7em; /* 親要素（24px）に対して約20px程度に縮小 */
    }

    @media screen and (max-width: 769px) {
        .hero__content {width:70%;}
        .hero__inner { padding-left:7%; }
        .catchphrase { font-size: 24px; margin-bottom: 2rem;}
        .hero-heading { font-size: 18px; }
    }

    /* -----------------------------------------------------------
    右側垂直ロゴ
    ----------------------------------------------------------- */
    .hero__logo-wrapper {
        position: absolute;
        right: 4%; /* 右端のマージン */
        top: 50%;
        transform: translateY(-50%); /* 縦中央 */
        z-index: 5;
        height: 100%;
        display: flex;
        align-items: center;
    }

    /* 垂直ロゴ画像自体 */
    .hero__logo-img {
        height: 75vh;
        width: auto;
    }

    @media screen and (max-width: 769px) {
        .hero__logo-img {height: 35vh;}
    }

    /* -----------------------------------------------------------
    Intro セクション
    ----------------------------------------------------------- */
    .intro {
        width: 100%;
        padding: 60px 4%; /* 上下のゆったりとした余白 */
        background-color: #ffffff;
        box-sizing: border-box;
    }

    .intro__inner {
        max-width: 1200px; /* 全体の最大幅 */
        margin: 0 auto;
        text-align: center; /* テキスト・画像を中央揃え */
    }

    /* 見出し（フォント設定は既存の .intro-heading をそのまま継承） */
    .intro-heading {
        font-size: 40px;
        line-height: 1.4;
        color: #000000;
        margin: 0;
        letter-spacing: 0.02em;
    }

    /* 画像エリア */
    .intro__image-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .intro__image {
        max-width: 100%;
        height: auto;
        display: block;
    }

    @media screen and (max-width: 769px) {
    .intro-heading {font-size: 24px;}
    }

    /* -----------------------------------------------------------
    特長（Features）セクション
    ----------------------------------------------------------- */
    .features {
        width: 100%;
        padding: 60px 4%; /* セクション上下の大きな余白 */
        background-color: #ffffff;
        box-sizing: border-box;
    }

    .features__inner {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 60px; /* ブロック同士の垂直間隔 */
        padding: 0 60px;
    }

    /* 個別ブロック（デフォルト：左テキスト / 右画像） */
    .feature-item {
        display: flex;
        align-items: center; /* 垂直方向中央揃え */
        justify-content: space-between;
        gap: 3%; /* テキストと画像の間の隙間 */
    }

    /* 偶数番目のブロック（2, 4, 6番目）：左右反転（左画像 / 右テキスト） */
    .feature-item:nth-child(even) {
        flex-direction: row-reverse;
    }

    /* テキスト領域 */
    .feature-item__text {
        flex: 1; /* 均等な幅を確保 */
    }

    /* 見出し（初期フォント設定 .feature-item h3 が自動適用されます） */
    .feature-item h3 {
        font-size: 24px;
        line-height: 1.3;
        margin: 0 0 20px 0;
        color: #000000;
        letter-spacing: -0.01em;
    }

    /* 本文 */
    .feature-item p {
        font-size: 15px;
        line-height: 1.75;
        margin: 0;
        color: #000000;
    }

    /* 画像領域 */
    .feature-item__img {
        flex: 1; /* 均等な幅を確保 */
    }

    .feature-item__img img {
        width: 100%;
        height: auto;
        display: block;
    }

    @media screen and (max-width: 769px) {
        .features__inner {padding:0;}
        .feature-item {display:block;}
    }

    /* -----------------------------------------------------------
    製品購入（Products）セクション
    ----------------------------------------------------------- */
    .products {
        width: 100%;
        padding: 60px 10% 0;
        background-color: #ffffff;
        box-sizing: border-box;
    }

    .products__inner {
        max-width: 1280px;
        margin: 0 auto;
    }

    /* 5列レイアウト */
    .product-list {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 30px;
    }

    /* 各製品カード */
    .product-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* 製品画像 */
    .product-card__img {
        width: 100%;
    }

    .product-card__img img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
    }

    /* 製品名（定義済みの .product-card-title スタイルが適用されます） */
    .product-card-title {
        font-size: 15px;
        line-height: 1.4;
        color: #000000;
        margin: 0 0 16px 0;
        min-height: 42px; /* 2行になってもボタン位置が揃うよう高さを確保 */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    @media screen and (max-width: 769px) {
        .product-list {  display: block; }
    }

    /* -----------------------------------------------------------
    ご購入ボタン（既存スタイルを継承しサイズ・カラー調整）
    ----------------------------------------------------------- */
    .buy-link-wrap {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: auto; /* カード最下部に配置を固定 */
    }

    /* ベースボタン（スマホ・PC共通） */
    .buy-button {
        background-color: #000000;
        color: #ffffff;
        font-size: 13px;
        letter-spacing: 0.03em;
        box-sizing: border-box;
    }

    .buy-button:hover {
        color: #ffffff;
        opacity: 0.7;
    }

    /* PC（769px以上）：5列カードの中に美しく収まるサイズに上書き調整 */
    @media screen and (min-width: 769px) {
        .buy-button {
            width: 100%;
            max-width: 160px; /* 5列用に幅を200pxから160pxへ微調整 */
            height: 50px; 
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 9999px;
            margin-top: 0;     /* カード内の余白は margin-bottom等で制御するため0に */
            transition-duration: 500ms;
            text-decoration: none;
        }
    }



    /* スムーズスクロールを有効にする（ページ全体用） */
    html {
        scroll-behavior: smooth;
    }


    .footer-logo {
        background: #000;
        margin-top: 4rem;
        padding-top: 3rem;
    }

    @media screen and (min-width: 769px) {
        .footer-logo {
            margin-top: 9rem;
            padding-top: 5rem;
        }
    }

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

    .text-left {
        text-align: left;
    }

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

    .header_logo img {
        width: 150px;
    }

}