@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');
}

/* bodyのフォント指定を修正 */
main#main {
    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';
}

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

/*
#main 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;
    }
}


#main a.buy-button {
    background: #000;
    color: #fff;
    font-family: 'NotoSansJp-SemiBold';
    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;
}
/*============================
 KVセクション 
============================*/
.hero {
    position: relative;
    width: 100%;
    height: 100vh; /* 画面全体の高さ */
    background: url('../img/hero.png') no-repeat center center;
    background-size: cover;
    
    display: flex;
    /* パターンC：下寄せ・左寄せの設定 */
    flex-direction: column;   /* 縦方向に並べる */
    justify-content: flex-end; /* 中身を下端に寄せる */
    align-items: flex-start;   /* 中身を左端に寄せる */
    
    /* 【数値で操作】テキストエリア全体を画面の端からどれだけ離すか */
    padding-bottom: 40px; /* ★ここの数値で上下位置を調整（大きくすると上に上がる） */
    padding-left: 60px;    /* ★ここの数値で左右位置を調整 */
}

/* テキストエリア */
.hero-content {
    /* ここでの余白は不要になったのでリセット、または微調整用に */
    padding: 0;
}

.hero-title {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 10px;
	font-family: 'BoseText-SemiBold', 'NotoSansJp-Bold', sans-serif;
}

.hero-subtitle {
    font-size: 1.8rem;
    font-weight: 300;
    letter-spacing: 0.2em;
    margin:30px 0 30px;
	font-family: 'BoseText-SemiBold', 'NotoSansJp-Bold', sans-serif;
}

/* モバイル対応 */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2rem;
    }
    .hero-subtitle {
        font-size: 1.1rem;
    }
}

/*============================
 イントロセクション 
============================*/
.intro {
    width: 100%;
    /* padding-bottomで「画像が1920pxの時の高さ」を計算して確保します */
    /* 例: 画像が 1920x1080 なら 1080/1920 = 56.25%。少し余裕を持って 60%?など */
    padding: 80px 0 50%; 
    
    background-color: #fff; /* 画像の外側は白背景 */
    background-image: url('../img/intro.png');
    background-repeat: no-repeat;
    background-position: center 100px; /* 上端から100pxの位置に固定 */
    
    /* ここがポイント！ 
       基本は 1920px 固定。
       ただし、画面が1920pxより小さい場合は画面幅(100%)に合わせる 
    */
    background-size: min(1200px, 100%) auto;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* PCの大画面でpadding-bottomが伸びすぎるのを防ぐ */
@media (min-width: 1920px) {
    .intro {
        /* 画像が1920pxで固定されたら、高さも固定値（px）にすると安定します */
        /* 数値は実際の画像の下端が見え切る高さに合わせて調整してください */
        padding-bottom: 1100px; 
    }
}

/* インナーコンテナ：テキストの幅を制限 */
.intro-inner {
    max-width: 900px;
    width: 90%;
    text-align: center;
    margin-bottom: 50px; /* テキストと画像（背景）の重なり具合を調整 */
}

/* 見出し：大きく、太字、中央揃え */
.intro-heading {
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 15px;
}

/* サブタイトル：少し小さい、太字、中央揃え */
.intro-subheading {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.5;
    margin: 30px 0 20px;
}

/* テキスト：やや小さめ、左揃え */
.intro-description {
    font-size: 0.95rem;
    font-weight: 400;
    text-align: left;
    line-height: 1.8;
    max-width: 760px;
    margin: 0 auto;
}

/* モバイル対応：背景画像の表示を調整 */
@media (max-width: 768px) {
    .intro {
        min-height: auto;
        padding-bottom: 300px; /* 画像を表示するためのスペースを下に確保 */
        background-size: 150%; /* モバイルでは画像を少し大きく見せる */
    }
    .intro-heading {
        font-size: 1.8rem;
    }
    .intro-subheading {
        font-size: 1.1rem;
    }
}

/*============================
  商品紹介セクション
============================*/
/*全体の余白 */
.products {
    width: 100%;
    padding: 0 0 100px;
    background-color: #fff;
}

/* カードを横並びにするコンテナ */
.products-container {
    max-width: 1100px; /* 全体の幅 */
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between; /* 均等に配置 */
    gap: 20px; /* カード間の溝 */
}

/* 個別のカード設定 */
.product-card {
    flex: 1; /* 3つのカードを同じ幅に */
    display: flex;
    flex-direction: column;
    align-items: center; /* 中身を中央揃え */
    text-align: center;
	background-color: #f8f7f6; /* 背景カラー */
    padding: 40px 20px;       /* 内側の余白 */
}

/* 商品名：上部、太字、中央配置 */
.product-card-title {
    font-size: 1.2rem;
    font-weight: 700;
    min-height: 3em; /* 2行になっても高さが揃うように確保 */
    display: flex;
    align-items: center; /* タイトルが1行でも中央にくるように */
}

/* 商品画像：適宜なサイズに調整 */
.product-card-image {
    width: 100%;
    margin-bottom: 30px;
}

.product-card-image img {
    width: 100%;
    height: auto;
    object-fit: contain; /* アスペクト比を保つ */
}

/* テキストリンク：下部、アンダーライン付き、中央配置 */
.product-card-link {
    font-size: 1rem;
    color: #000;
    text-decoration: underline; /* アンダーライン */
    font-weight: 500;
    transition: opacity 0.3s ease;
}

.product-card-link:hover {
    opacity: 0.6; /* ホバー時に少し薄くする演出 */
}

/* モバイル対応：縦並びにする */
@media (max-width: 768px) {
    .products-container {
        flex-direction: column;
        align-items: center;
        gap: 60px;
    }
    .product-card {
        width: 100%;
        max-width: 350px;
    }
    .product-card-title {
        min-height: auto;
        margin-bottom: 20px;
    }
}

/*============================
  BOSEアプリセクション
============================*/
/* アプリセクション全体の余白 */
.app-section {
    background-color: #fff;
}

/* コンテナ */
.app-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 囲み枠（カード） */
.app-card {
    display: flex;
    align-items: center; /* 垂直方向の中央揃え */
    border: 1px solid #dcdcdc; /* 細めのグレー線 */
    border-radius: 10px; /* 角丸 10px */
    overflow: hidden; /* 画像が角丸からはみ出ないように */
    padding: 20px;
    gap: 40px;
}

/* 左側：画像エリア */
.app-image {
    flex: 1;
}

.app-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* 右側：テキストエリア */
.app-content {
    flex: 1;
    text-align: left; /* テキストエリア全体を左揃え */
}

/* 見出し */
.app-title {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 20px;
    color: #000;
	font-family: 'BoseText-SemiBold', 'NotoSansJp-Bold', sans-serif;
}

/* 本文：右揃え */
.app-text {
    font-size: 0.9rem;
    line-height: 1.8;
    color: #333;
}

/* モバイル対応（スマホでは縦に並べる） */
@media (max-width: 768px) {
    .app-card {
        flex-direction: column;
        padding: 20px;
        text-align: center; /* スマホでは中央揃えの方が見やすいため */
    }
    
    .app-content {
        text-align: center; /* スマホでは中央揃えに切り替え */
    }

    .app-title {
        font-size: 1.4rem;
    }

    .app-image {
        width: 100%;
        margin-bottom: 20px;
    }
}

/*============================
  商品詳細セクション
============================*/
/* 商品詳細共通コンテナ */
.product-detail {
    padding: 0 0 80px;
    background-color: #fff;
    scroll-margin-top: 50px;
	max-width: 1000px;
	margin: 0 auto;
}

.detail-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.detail-img {
    flex: 1;
}

.detail-img img {
    width: 100%;
    height: auto;
    transition: opacity 0.3s ease; /* 切り替えを滑らかに */
}

.detail-info {
    flex: 1;
}

.detail-name {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.detail-desc {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 40px;
}

/* ★サムネとリンクを下端で揃える設定 */
.detail-actions {
    display: flex;
    align-items: flex-end; /* ここで下端を揃える */
    justify-content: space-between; /* 左右に振り分け */
    gap: 20px;
}

.color-variants {
    display: flex;
    gap: 12px;
}

.color-thumb {
    width: 80px;
    height: auto;
    cursor: pointer;
    background-color: #f8f7f6;
    padding: 5px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.color-thumb.active {
    border: 1px solid #000; /* 選択中を黒枠で示す */
}

.buy-link-wrap {
    padding-bottom: 5px; /* 下枠との視覚的な微調整 */
}

.buy-link {
    font-size: 1.4rem;
    font-weight: 500;
    color: #000;
    text-decoration: underline;
    white-space: nowrap;
}

/* 特長エリア：グリッド */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.feature-item {
    background-color: #f8f7f6;
    padding: 30px;
}

.feature-item h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.feature-item p {
    font-size: 0.9rem;
    line-height: 1.7;
    color: #444;
}

/* モバイル対応 */
@media (max-width: 768px) {
    .detail-top {
        flex-direction: column;
    }
    .detail-actions {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    .feature-grid {
        grid-template-columns: 1fr;
    }
}

/*============================
  バンドルセクション
============================*/
/* 導入部 */
.bundle-hero-img img {
    width: 100%;
    height: auto;
    display: block;
}

.bundle-intro-text {
    padding: 80px 20px;
    text-align: center;
}

.bundle-main-heading {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 40px;
    letter-spacing: 0.05em;
	font-family: 'BoseText-SemiBold', 'NotoSansJp-Bold', sans-serif;
}

.bundle-main-desc {
    font-size: 0.95rem;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
    text-align: justify;
}

.bundle-list {
    max-width: 1000px;	
	margin: 0 auto;
}

/* 各バンドルアイテム */
.bundle-item {
    display: flex;
    align-items: flex-start;
    gap: 80px;
    padding: 100px 0;
    border-top: 1px solid #ddd;
}

.bundle-left {
    flex: 1.4;
}

.bundle-right {
    flex: 1;
}

.bundle-title {
    font-size: 2.2rem;
    font-weight: 400;
    margin-bottom: 30px;
    border-bottom: 1px solid #000;
    display: inline-block;
    padding-bottom: 10px;
    font-family: 'BoseText-SemiBold', 'NotoSansJp-Bold', sans-serif;
}

.bundle-text {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* 商品構成 (左下エリア) */
.bundle-composition {
    display: flex;
    align-items: center; /* 縦方向の中央揃え */
    gap: 20px;
}

.comp-product {
    width: 130px;
    text-align: center;
}

.comp-product img {
    width: 100%;
}

.comp-name {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.4;
}

/* プラスマークのデザイン */
.plus-container {
    width: 40px; 
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.plus-mark {
    width: 30px;
    height: 30px;
    position: relative;
}

.plus-mark::before,
.plus-mark::after {
    content: "";
    position: absolute;
    background-color: #000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.plus-mark::before {
    width: 100%;
    height: 6px;
}

.plus-mark::after {
    width: 6px;
    height: 100%;
}

.bundle-illust {
    width: 100%;
    height: auto;
}

/* レスポンシブ */
@media (max-width: 992px) {
    .bundle-item {
        flex-direction: column;
        gap: 50px;
    }
    .bundle-composition {
        justify-content: center;
    }
}


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


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

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

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

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

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

.header_logo img {
    width: 150px;
}