/* カスタム変数の定義: サイト全体で使用するテーマカラーとスタイル */
:root {
    --main_color: #346702; /* メインのアクセントカラー（緑系） */
    --sub_color01: #f4f1e6; /* サブカラー1（淡いベージュ系） */
    --sub_color02: #a2c9a8; /* サブカラー2（淡い緑系） */
    --color_white: #fff; /* 白色 */
    --color_black: #333; /* 黒色（暗めのグレー） */
    --highlight_yellow: #ffd700; /* 強調用の黄色 */
    --highlight_red: #ff4500; /* 強調用の赤色 */
    --max-width-standard: 1200px; /* コンテナの最大幅 */
    --centered_margin: 0 auto; /* コンテンツの中央寄せ */
    --container_margin_bottom: 24px; /* コンテナの下部マージン */
    --container_padding: 16px; /* コンテナ内のパディング */
    --border_primary: 2px solid #346702; /* 主要なボーダースタイル（緑系） */
}


/* 一部のデフォルトのマージンとパディングをリセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* styles.css */
body {
    font-family: "Noto Serif JP", serif;
    color: var(--color_black);
    background-color: var(--sub_color01);
    font-optical-sizing: auto;
    font-style: normal;;
}

/* ハンバーガーメニューのスタイル */
#hamburger_menu {
    display: none; /* デフォルトでは非表示 */
    flex-direction: column; /* 縦並びに配置 */
    cursor: pointer; /* カーソルをポインターに変更 */
    padding: 16px; /* パディングを設定 */
    z-index: 1100; /* ナビゲーションメニューより前面に表示 */
}

#hamburger_menu .bar {
    background-color: var(--main_color); /* ハンバーガーメニューの線の色 */
    height: 3px; /* 高さを指定 */
    width: 30px; /* 幅を指定 */
    margin: 4px 0; /* 上下のマージンを設定 */
    transition: 0.3s; /* トランジションの設定 */
}

/* ハンバーガーメニューが開いたとき */
#hamburger_menu.open .bar:nth-child(1) {
    transform: rotate(-45deg) translate(-7px, 8px); /* 1本目のバーを回転 */
}

#hamburger_menu.open .bar:nth-child(2) {
    opacity: 0; /* 2本目のバーを非表示 */
}

#hamburger_menu.open .bar:nth-child(3) {
    transform: rotate(45deg) translate(-7px, -8px); /* 3本目のバーを回転 */
}

/* メインナビゲーションのスタイル */
#main_nav {
    max-width: var(--max-width-standard); /* 最大幅を1200pxに設定 */
    margin: var(--centered_margin); /* 水平方向に中央揃え */
    background-color: var(--color_white); /* ナビゲーションバーの背景色を白に */
    padding: 16px 0; /* 上下のパディングを設定 */
    display: flex; /* フレックスボックスを使用して子要素を並べる */
    align-items: center; /* 縦方向に子要素を中央揃え */
    justify-content: space-between; /* 左右に要素を配置 */
    width: 100%; /* 幅を全体に広げる */
    box-sizing: border-box; /* パディングを含めて幅を計算 */
}

/* ナビゲーションバーのタイトル */
#main_nav h1 {
    color: var(--main_color); /* タイトルのテキストカラーをメインカラーに */
    padding-left: 16px; /* 左側のパディングを設定 */
}

/* ナビゲーションメニューのスタイル */
#main_nav ul {
    list-style: none; /* リストの箇条書きをなしに */
    display: flex; /* フレックスボックスを使用してリストアイテムを横に並べる */
    align-items: center; /* 縦方向に中央揃え */
}

/* ナビゲーションメニューの各アイテム */
#main_nav ul li {
    border-left: 1px solid #346702; /* 左側にボーダーを追加 */
}

/* 最後のナビゲーションメニューアイテムに右側のボーダーを追加 */
#main_nav ul li:last-child {
    border-right: 1px solid #346702;
}

/* ナビゲーションメニューのリンク */
#main_nav ul li a {
    display: block; /* リンクをブロック要素に */
    color: var(--main_color); /* リンクのテキストカラーをメインカラーに */
    text-decoration: none; /* 下線を削除 */
    font-weight: bold; /* 文字を太字に */
    padding: 8px 16px; /* 内側の余白を設定 */
    transition: background-color 0.3s; /* 背景色変更時のアニメーションを追加 */
}

/* ナビゲーションメニューのリンクのホバー時 */
#main_nav ul li a:hover {
    background-color: var(--main_color); /* 背景色をメインカラーに */
    color: var(--color_white); /* テキストカラーを白に */
}

/* ヒーローセクションのスタイル */
.hero_section {
    position: relative;
    background-image: url('../images/nature_background.jpg'); /* 自然系の背景画像 */
    background-size: cover; /* 画像を要素にフィットさせる */
    background-position: center; /* 画像を中央に配置 */
    background-repeat: no-repeat; /* 画像を繰り返さない */
    height: 400px; /* 高さを指定 */
    color: var(--color_white); /* テキストの色を白に */
    display: flex;
    justify-content: center; /* 水平中央揃え */
    align-items: center; /* 垂直中央揃え */
    overflow: hidden; /* オーバーフローを隠す */
    padding: 0 20px; /* 左右の余白 */
    max-width: var(--max-width-standard); /* 最大幅を1200pxに制限 */
    margin: var(--centered_margin); /* 水平中央揃え */
    margin-bottom: var(--container_margin_bottom);
}

/* ヒーローセクションの画像コンテナ */
.hero_images {
    width: 100%; /* 幅を100%に設定 */
    height: 100%; /* 高さを100%に設定 */
    pointer-events: none; /* 画像の上にある要素のクリックを妨げないようにする */
}

/* 注目の商品画像 */
.featured_product_image {
    height: 52%; /* 高さをコンテナの48%に設定 */
    width: auto; /* 幅を自動調整 */
    pointer-events: auto; /* クリック可能にする */
    position: absolute;
    left: 5%;
    bottom: 0;
    z-index: 2;
}

/* 女性の画像 */
.woman_image {
    height: 124%; /* 高さを親要素に合わせる */
    width: auto; /* 幅を自動調整 */
    object-fit: cover; /* 画像を要素の高さにフィットするように調整 */
    pointer-events: auto; /* クリック可能にする */
    position: absolute;
    right: 4%;
    bottom: -108px;
    z-index: 3;
}

/* ヒーローテキストのスタイル */
.hero_text {
    position: absolute; /* 絶対位置に設定 */
    top: 20px; /* 上から20pxの位置に配置 */
    right: 32%;
    text-align: left; /* 左揃え */
    font-size: 2.25rem; /* フォントサイズを設定 */
    font-weight: bold; /* 文字を太字に */
    padding: 10px 20px; /* 内側の余白を設定 */
    color: var(--color_white); /* テキストの色を白に */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 1); /* テキストに影を付ける */
    z-index: 1; /* 前面に表示 */
    max-width: 600px; /* 最大幅を600pxに設定 */
    pointer-events: auto; /* クリック可能にする */
    line-height: 1.3; /* 行間を設定 */
}

/* ヒーローテキストの強調部分 */
.hero_text .emphasis {
    color: var(--highlight_yellow); /* 強調テキストの色を金色に */
    font-size: 3rem; /* フォントサイズを大きく */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 1); /* テキストに影を付ける */
}

/* サブテキストのスタイル */
.hero_text .sub_text {
    margin-left: 1em; /* 左に余白を追加 */
}

/* 強調テキストのスタイル */
.hero_text strong {
    color: var(--highlight_red); /* テキストの色をオレンジレッドに */
    font-weight: bold; /* 文字を太字に */
    font-size: 2.8rem; /* フォントサイズをやや大きく */
}

/* コンテナのスタイル設定 */
.product_container {
    max-width: var(--max-width-standard); /* コンテナの最大幅を1200pxに設定 */
    margin: var(--centered_margin); /* コンテナを中央に配置 */
    border: var(--border_primary); /* メインカラーでボーダーを追加 */
    border-radius: 16px; /* 角を16pxの半径で丸くする */
    background-color: var(--color_white); /* 背景色を白に設定 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
    text-align: center; /* テキストを中央揃え */
    margin-bottom: var(--container_margin_bottom);
}


/* セクションタイトルのスタイル設定 */
.product_container h2 {
    background-color: var(--main_color); /* メインカラーを背景色として設定 */
    color: var(--color_white); /* 文字色を白に設定 */
    padding: var(--container_padding); /* 内側の余白を16pxに設定 */
    border-radius: 8px 8px 0 0; /* 上部の角を丸くする */
    position: relative; /* 親要素に対して相対的な位置指定 */
    top: 0; /* トップ位置を0に設定 */
    width: 100%; /* 幅を100%に設定 */
    box-sizing: border-box; /* paddingとborderを含むボックスサイズを指定 */
}

/* 特典情報のスタイル設定 */
.special_offer {
    margin-bottom: 16px; /* 下の余白を16pxに設定 */
}

/* 特典情報リストのスタイル設定 */
.special_offer ul {
    list-style-type: none; /* 箇条書きのスタイルを削除 */
    display: flex; /* フレックスコンテナに設定 */
    flex-wrap: wrap; /* 項目を折り返す */
    gap: 16px; /* 項目間の隙間を16pxに設定 */
    justify-content: center; /* 項目を中央揃え */
    margin-top: 16px;
}


/* 特典情報リストの各項目のスタイル設定 */
.special_offer li {
    font-size: 1rem; /* フォントサイズを1remに設定 */
    background-color: var(--sub_color01); /* 背景色をクリーム色に設定 */
    padding: 12px; /* 内側の余白を設定 (12pxに設定) */
    border-radius: 8px; /* 角を8pxの半径で丸くする */
    width: calc(33.33% - 16px); /* 3列にするための幅設定 (16pxはgap) */
    max-width: 300px; /* 最大横幅を300pxに設定 */
    box-sizing: border-box; /* paddingとborderを含むボックスサイズを指定 */
    border: 1px solid #ccc; /* 柔らかい境界線を追加 */
}

/* ダミー項目のスタイル設定 */
.special_offer li:last-child {
    visibility: hidden; /* 最後のリストアイテムを見えなくする */
}

/* 強調テキストのスタイル設定 */
.highlight {
    color: var(--highlight_red); /* 強調カラーをオレンジレッドに設定 */
    font-weight: bold; /* 太字にして目立たせる */
    font-size: 1.25rem; /* フォントサイズを1.25remに設定 */
}

/* 商品情報セクションのスタイル */ 
.product_content {
    display: flex; /* フレックスコンテナに設定 */
    align-items: center; /* 要素を縦方向に中央揃え */
    justify-content: space-between; /* 要素間のスペースを均等にする */
    text-align: left; /* テキストを左揃え */
    padding: var(--container_padding); /* 内側の余白を16pxに設定 */
}

/* 商品画像のスタイル設定 */
.product_content img {
    width: 100%; /* 画像をコンテナに合わせてサイズ調整 */
    max-width: 480px; /* 最大幅を480pxに設定 */
    height: auto; /* 高さを自動調整 */
    display: block; /* 画像をブロック要素として表示 */
    margin-right: 16px; /* 右側の余白を16pxに設定 */
    flex: 1; /* 画像が余分なスペースを占める */
}

/* 商品情報のスタイル設定 */
.product_info {
    flex: 2; /* 商品情報が余分なスペースを占める */
    text-align: left; /* テキストを左揃え */
}

.product_info a{
    display: block;  /* 要素全体をブロックレベル要素に変更*/
    text-align: center;  /* テキストを中央揃えにする */
}

/* 商品タイトルのスタイル設定 */
.product_info h3.product_title {
    font-size: 2rem; /* フォントサイズを2remに設定 */
    color: var(--main_color); /* メインカラーを文字色として設定 */
    margin: 12px 0; /* 上下の余白を12pxに設定 */
}

/* 商品説明のスタイル設定 */
.product_info p.product_description {
    font-size: 1rem; /* フォントサイズを1remに設定 */
    color:var(--color_black); /* テキストカラーを暗いグレーに設定 */
    line-height: 1.6; /* 行の高さを1.6に設定 */
    max-width: 800px; /* 最大幅を800pxに設定 */
    margin: var(--centered_margin); /* コンテナ内で中央に配置 */
    text-align: left;/* 左揃えに */
}

/* 価格表示のスタイル設定 */
.product_price {
    text-align: center; /* テキストを中央揃え */
    margin: 16px 0; /* 上下の余白を16pxに設定 */
}

/* 価格表示のテキストスタイル設定 */
.product_price p {
    font-size: 1.5rem; /* フォントサイズを1.5remに設定 */
    font-weight: bold; /* 文字を太くする */
}

/* 割引価格のスタイル設定 */
.discounted_price {
    font-size: 3rem; /* フォントサイズを3remに設定 */
    color: var(--highlight_red); /* 割引価格の文字色をオレンジレッドに設定 */
    font-weight: bold; /* 文字を太くする */
}

/* 購入ボタンのスタイル設定 */
.purchase_button {
    display: inline-block; /* インラインブロックに設定 */
    background-color: var(--highlight_red); /* メインカラーを背景色として設定 */
    color: var(--color_white); /* 文字色を白に設定 */
    padding: 16px 32px; /* 内側の余白を12px (上下)、24px (左右) に設定 */
    border-radius: 8px; /* 角を8pxの半径で丸くする */
    font-size: 1.5rem; /* フォントサイズを1.2remに設定 */
    font-weight: bold; /* 文字を太くする */
    text-align: center; /* テキストを中央揃え */
    text-decoration: none; /* 下線を削除 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8); /* 軽い影を追加 */
    transition: background-color 0.3s, box-shadow 0.3s, transform 0.1s; /* 背景色、影、変形の変化をスムーズにする */
    width: 80%; /* ボタンの幅を親要素の80%に設定 */
    box-sizing: border-box; /* パディングとボーダーを幅に含める */
    margin-top: 12px; /* 上の余白を12pxに設定 */
    border: 2px solid #cc3700; /* 白の2pxボーダーを追加 */
}

/* 購入ボタン内のアイコンのスタイル設定 */
.purchase_button span {
    display: inline-block; /* インラインブロックに設定 */
    margin-left: 4px; /* アイコンとテキストの間隔を4pxに設定 */
    transition: transform 0.3s ease; /* トランジションを設定 */
}

/* 購入ボタンのホバー時のスタイル設定 */
.purchase_button:hover span {
    transform: translateX(5px); /* ホバー時にアイコンが右に移動する */
}

.purchase_button:hover {
    background-color: #e03d00; /* ホバー時の背景色 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* ホバー時の影を強くする */
    border-color: #b33b00; /* ホバー時の枠線色 */
}

/* 購入ボタンのクリック時のスタイル設定 */
.purchase_button:active {
    background-color: #cc3700; /* クリック時の背景色を変更 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* クリック時の影を軽くする */
    transform: translateY(2px); /* クリック時にボタンが少し沈むようにする */
    border-color: #993000; /* クリック時の枠線色 */
}

/* 特徴セクションのスタイル */
.features_container {
    max-width: var(--max-width-standard); /* 最大幅を設定 */
    margin: var(--centered_margin); /* コンテナを中央に配置 */
    position: relative; /* 子要素の絶対配置を可能にする */
    padding: var(--container_padding); /* 内側の余白を設定 */
    background-image: url('../images/texture.jpg'); /* 背景にテクスチャ画像 */
    background-size: cover; /* 背景画像を全体にカバー */
    background-repeat: no-repeat; /* 背景画像の繰り返しを無効 */
    background-position: center; /* 背景画像を中央に配置 */
    margin-bottom: 12px; /* 下の余白を設定 */
    border-radius: 12px; /* 角を丸くする */
    text-align: center; /* セクション内のテキストを中央揃え */
}

.features_container:last-child{
    margin-bottom: var(--container_margin_bottom);
}

/* 各特徴コンテナの前景に半透明の背景色を追加 */
.features_container::before {
    content: "";
    position: absolute; /* 絶対配置 */
    top: 0;
    left: 0;
    width: 100%; /* 幅を100%に設定 */
    height: 100%; /* 高さを100%に設定 */
    background-color: rgba(162, 201, 168, 0.5); /* 半透明のサブカラー1 */
    pointer-events: none; /* このオーバーレイがクリックや操作の対象とならないように */
    z-index: 1; /* 背景画像の上に表示 */
    border-radius: 12px; /* 角を丸くする */
}

/* コンテナ内のコンテンツとタイトルをオーバーレイの上に表示 */
.features_container .features_content,
.features_container .features_title {
    position: relative;
    z-index: 2; /* オーバーレイの上に表示 */
}

/* 特徴タイトルのスタイル */
.features_title {
    display: flex;
    flex-direction: column; /* 縦方向に並べる */
    align-items: center; /* 中央揃え */
    text-align: center; /* テキストを中央揃え */
    margin: 12px 0; /* 上下に余白を追加 */
}

/* 円形ラベルのスタイル */
.circle_label {
    background-color: var(--main_color); /* 背景色 */
    color: var(--color_white); /* 文字色 */
    width: 96px;
    height: 96px;
    border-radius: 50%; /* 円形にする */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 16px; /* タイトルとの間にスペースを追加 */
}

.title_text {
    font-size: 1.5rem; /* テキストのフォントサイズ */
    font-weight: bold;
    line-height: 1.4; /* 行の高さ */
}

/* 特徴コンテンツのスタイル */
.features_content {
    display: flex; /* フレックスコンテナにする */
    justify-content: space-between; /* 要素間のスペースを均等に配置 */
    align-items: center; /* 垂直方向に中央揃え */
    flex-direction: row; /* デフォルトでは横並び */
    gap: 12px; /* 要素間の隙間を設定 */
    background-color: rgba(255, 255, 255, 0.5); /* 半透明の背景色 */
}

/* 特徴コンテンツの逆順表示 */
.features_content.reverse {
    flex-direction: row-reverse; /* 逆順に表示 */
}

/* テキスト情報のスタイル */
.text_info {
    flex: 1; /* フレックスアイテムとしての拡張 */
    text-align: left; /* テキストを左揃え */
}

/* テキスト情報のパラグラフスタイル */
.text_info p {
    padding: 12px; /* 内側の余白を設定 */
}

/* 画像情報のスタイル */
.image_info {
    flex: 1; /* フレックスアイテムとしての拡張 */
    text-align: right; /* 画像を右揃え */
}

/* 画像のスタイル */
.image_info img {
    max-width: 100%; /* 最大幅を設定 */
    height: auto; /* 高さを自動調整 */
    display: block; /* 画像の下に隙間ができないように */
}

/* ギャラリーのスタイル */
.features_gallery {
    display: flex; /* フレックスコンテナにする */
    flex-wrap: wrap; /* アイテムを折り返す */
    gap: 16px; /* 画像間の隙間を設定 */
    justify-content: center; /* 中央揃え */
    margin-top: 20px; /* 上の余白を設定 */
    position: relative; /* 相対位置 */
    z-index: 2; /* オーバーレイの上に表示 */
    background-color: rgba(255, 255, 255, 0.5); /* 半透明の背景色 */
    padding: 12px; /* 内側の余白を設定 */
}

/* ギャラリー説明文のスタイル */
.features_description {
    font-size: 1rem; /* フォントサイズ */
    line-height: 1.5; /* 行の高さ */
    text-align: left; /* テキストを左揃え */
    margin: 12px 0; /* 上下の余白を設定 */
}

/* ギャラリーアイテムのスタイル */
.gallery_item {
    width: calc(50% - 16px); /* 2列配置で隙間を考慮 */
    position: relative; /* 相対位置 */
    text-align: center; /* テキストを中央揃え */
}

/* ギャラリーアイテムの画像スタイル */
.gallery_item img {
    width: 100%; /* 最大幅を100%に設定 */
    height: auto; /* 高さを自動調整 */
    display: block; /* 画像の下に隙間ができないように */
    border-radius: 50%; /* 円形にする */
    overflow: hidden; /* 画像が円からはみ出ないようにする */
}

/* ギャラリーキャプションのスタイル */
.gallery_caption {
    margin-top: 8px; /* 画像とテキストの間隔を設定 */
    font-size: 1rem; /* フォントサイズ */
    color: var(--color_black); /* テキストの色 */
    font-weight: bold; /* 文字を太くする */
}

/* お客様の声セクションのスタイル */
.testimonials_container {
    max-width: var(--max-width-standard); /* コンテナの最大幅を設定 */
    margin: var(--centered_margin); /* コンテナを中央に配置 */
    padding: var(--container_padding); /* 内側の余白を設定 */
    text-align: center; /* セクション内のテキストを中央揃え */
    margin-bottom: var(--container_margin_bottom); /* セクション下の余白 */
}

/* セクションタイトルのスタイル */
.section_title {
    font-size: 2rem; /* フォントサイズを設定 */
    font-weight: bold; /* 文字を太くする */
    margin-bottom: 16px; /* 下の余白を設定 */
    border-bottom: var(--border_primary); /* 下にボーダーを追加 */
    display: inline-block; /* インラインブロックにして幅を調整 */
    position: relative; /* 擬似要素の位置を相対的にする */
    padding-left: 44px; /* 左の余白を追加して画像を表示するスペースを作る */
}

/* セクションタイトルの葉っぱ画像のスタイル */
.section_title::before {
    content: ''; /* 擬似要素に内容を持たせる */
    position: absolute; /* 絶対位置にする */
    left: 0; /* 左側に配置 */
    top: 50%; /* 垂直中央に配置 */
    transform: translateY(-50%); /* 垂直方向に中央揃え */
    width: 36px; /* 葉っぱの画像の幅 */
    height: 36px; /* 葉っぱの画像の高さ */
    background-image: url('../images/leaf.png'); /* 葉っぱの画像を指定 */
    background-size: cover; /* 画像がコンテナに合わせて縮小・拡大される */
}

/* お客様の声リストのスタイル */
.testimonials_list {
    list-style: none; /* リストのマーカーを削除 */
    display: flex; /* フレックスボックスで横並びにする */
    gap: 16px; /* アイテム間の間隔を設定 */
    justify-content: space-around; /* アイテムを均等に配置 */
}

/* お客様の声アイテムのスタイル */
.testimonial_item {
    display: flex; /* フレックスボックスで左右に並べる */
    align-items: center; /* 垂直方向に中央揃え */
    justify-content: center; /* 水平方向に中央揃え */
    width: 100%; /* 幅を100%に設定 */
    max-width: 600px; /* 最大幅を設定 */
}

/* お客様の声画像のスタイル */
.testimonial_image {
    flex: 0 0 auto; /* 画像の幅を固定 */
    width: 100px; /* 画像の幅を設定 */
    height: 100px; /* 画像の高さを設定 */
    border-radius: 50%; /* 画像を円形にする */
    overflow: hidden; /* はみ出した部分を隠す */
    margin: 0 16px; /* 画像とテキストの間隔を設定 */
    border: var(--border_primary); /* ボーダーを追加 */
}

/* お客様の声画像の画像サイズ */
.testimonial_image img {
    width: 100%; /* 画像の幅を親要素に合わせる */
    height: 100%; /* 画像の高さを親要素に合わせる */
    object-fit: cover; /* 画像が円形内に収まるように調整 */
}

/* お客様の声テキストコンテンツのスタイル */
.testimonial_content {
    text-align: left; /* テキストを左揃え */
}

/* お客様の声吹き出しのスタイル */
.testimonial_text {
    display: inline-block; /* 吹き出しを文字幅に合わせる */
    position: relative; /* 吹き出しの位置を相対的にする */
    padding: var(--container_padding); /* 吹き出しの内側の余白を設定 */
    background-color: var(--color_white); /* 吹き出しの背景色 */
    border-radius: 8px; /* 吹き出しの角を丸くする */
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); /* 吹き出しに影を追加 */
    max-width: 400px; /* 吹き出しの最大幅を設定 */
    border: var(--border_primary); /* 吹き出しにボーダーを追加 */
}

/* お客様情報のスタイル */
.testimonial_info {
    font-size: 0.9rem; /* フォントサイズを設定 */
    color: var(--color_black); /* テキストの色を設定 */
    text-align: right; /* 文字を右揃え */
}

/* FAQセクションのスタイル */
.faq_container {
    max-width: var(--max-width-standard); /* コンテナの最大幅を1200pxに設定 */
    margin: var(--centered_margin); /* 横方向に中央揃え */
    padding: var(--container_padding); /* 内側に16pxの余白を設定 */
    text-align: center; /* テキストを中央揃え */
    margin-bottom: var(--container_margin_bottom); /* 下部に24pxの余白を設定 */
}

/* FAQ項目リストのスタイル */
.faq_list {
    list-style: none; /* デフォルトのリストマーカーを削除 */
}

/* 各FAQ項目のスタイル */
.faq_item {
    margin-bottom: 16px; /* FAQ項目間の下部余白を16pxに設定 */
}

/* チェックボックスを非表示に設定 */
.faq_checkbox {
    display: none; /* チェックボックスを非表示に設定 */
}

/* 質問部分のスタイル */
.faq_question {
    width: 100%; /* 幅を親要素に合わせる */
    padding: var(--container_padding); /* 内側に16pxの余白を設定 */
    background-color: var(--main_color); /* 背景色をダークグリーンに設定 */
    color: var(--color_white); /* 文字色を白に設定 */
    border: none; /* ボーダーをなしに設定 */
    border-radius: 8px 8px 0 0; /* 上部の角を丸くする */
    text-align: left; /* テキストを左揃え */
    font-size: 1.1rem; /* フォントサイズを1.1remに設定 */
    cursor: pointer; /* カーソルをポインターに設定 */
    position: relative; /* 相対位置に設定 */
    display: block; /* ブロック要素として表示 */
}

/* 回答部分のスタイル */
.faq_answer {
    width: 100%; /* 幅を親要素に合わせる */
    display: none; /* デフォルトで非表示 */
    padding: var(--container_padding); /* 内側に16pxの余白を設定 */
    background-color: var(--color_white); /* 背景色を白に設定 */
    border-radius: 0 0 8px 8px; /* 下部の角を丸くする */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影を追加 */
    text-align: left; /* テキストを左揃え */
}

/* チェックボックスが選択されているときに回答を表示 */
.faq_checkbox:checked + .faq_question + .faq_answer {
    display: block; /* 回答を表示 */
}

/* FAQテーブルのスタイル */
.faq_table {
    width: 100%; /* テーブルの幅を親要素に合わせる */
    border-collapse: collapse; /* セルのボーダーを重ねる */
    margin-top: 16px; /* 上部に16pxの余白を設定 */
}

/* テーブルのセルのスタイル */
.faq_table th, .faq_table td {
    border: 1px solid #ccc; /* セルのボーダーを設定 */
    padding: 8px; /* 内側に8pxの余白を設定 */
}

/* テーブルヘッダーのスタイル */
.faq_table th {
    background-color: #f4f4f4; /* ヘッダー部分の背景色を設定 */
    font-weight: bold; /* ヘッダーのフォントを太く設定 */
    text-align: center; /* ヘッダーのテキストを中央揃え */
}

/* テーブルデータセルのスタイル */
.faq_table td {
    text-align: left; /* データセルのテキストを左揃え */
    max-width: 200px; /* データセルの最大幅を200pxに設定 */
    word-wrap: break-word; /* 長い単語を折り返して表示 */
    overflow-wrap: break-word; /* 長い単語を折り返して表示（互換性のために追加） */
}

/* トップに戻るボタンの基本スタイル */
#back_to_top {
    position: fixed; /* スクロールしても画面の位置が固定される */
    bottom: 20px; /* 画面下から20pxの位置 */
    right: 20px; /* 画面右から20pxの位置 */
    width: 50px; /* ボタンの幅を50pxに設定 */
    height: 50px; /* ボタンの高さを50pxに設定（幅と高さを同じにして円形にする） */
    padding: 0; /* ボタン内の余白を0にする */
    background-color: var(--main_color); /* 背景色を黒に設定 */
    color: var(--color_white); /* 文字色を白に設定 */
    text-align: center;
    border: 1px solid #fff;
    font-size: 16px; /* 文字サイズを20pxに設定 */
    border-radius: 50%; /* ボタンを円形にするために半径50%を設定 */
    display: flex; /* 内容を中央に揃えるための設定 */
    align-items: center; /* 内容を縦中央に揃える */
    justify-content: center; /* 内容を横中央に揃える */
    cursor: pointer; /* マウスオーバー時にポインターを表示 */
    z-index: 1000; /* 他の要素よりも前面に表示する */
    opacity: 0; /* 初期状態では透明にする */
    transition: opacity 0.5s ease, transform 0.5s ease; /* 透明度と位置の変更をスムーズにする */
    transform: translateY(50px); /* ボタンを下に50px移動させて隠す */
}

/* ボタンが表示されるときのスタイル */
#back_to_top.show {
    opacity: 1; /* 完全に不透明にする */
    transform: translateY(0); /* ボタンを元の位置に戻す */
}

/* product_containerクラス内でのボタンの非表示 */
.product_container #back_to_top {
    display: none; /* product_container内ではボタンを非表示にする */
}

/* フッターのスタイル */
#footer {
    background-color: var(--main_color); /* フッターの背景色を設定。メインカラーのグリーンを使用 */
    color: var(--color_white); /* フッター内のテキストの色を白に設定 */
    padding: 16px 0; /* フッターの上下に16pxのパディングを設定 */
    text-align: center; /* フッター内のテキストを中央揃え */
}



/* タブレットサイズの画面（最大1024px） */
@media (max-width: 1024px) {
    /* ヒーローセクションのレスポンシブスタイル(1024px)*/
    .woman_image {
        right: -8%; /* 画像の右位置を調整 */
        left: 68%; /* 商品画像の左位置を調整 */
    }

    .featured_product_image {
        height: 47%; /* 商品画像の高さを47%に設定 */
        left: 3%; /* 商品画像の左位置を調整 */
    }

    /* 商品情報のレスポンシブスタイル(1024px) */
    .product_content {
        flex-direction: column; /* 縦並びに変更 */
        align-items: center; /* 中央揃え */
        text-align: center; /* テキストを中央揃え */
    }

    .product_content img {
        margin-right: 0; /* 右側の余白を削除 */
        margin-bottom: 16px; /* 下の余白を16pxに設定 */
        max-width: 100%; /* 画像をコンテナに合わせてサイズ調整 */
    }

    .product_info {
        text-align: center; /* テキストを中央揃え */
        flex: none; /* flexプロパティをリセット */
        width: 100%; /* 幅を100%に設定 */
    }

    /* 特徴セクションのレスポンシブスタイル(1024px) */
    .features_content {
        flex-direction: column; /* 縦並びにする */
        gap: 20px; /* 縦の隙間を設定 */
    }
    
    .features_content.reverse {
        flex-direction: column; /* 逆順も縦並びにする */
    }

    .gallery_item {
        width: calc(50% - 16px); /* 2列配置を維持 */
    }

    .features_description {
        font-size: 0.9rem; /* フォントサイズを少し小さくする */
    }

    /* お客様の声セクションのレスポンシブスタイル(1024px) */
    .testimonials_list {
        flex-direction: column; /* 縦並びにする */
        align-items: center; /* テキストと画像を中央揃え */
        gap: 20px; /* アイテム間の間隔を設定 */
    }

    .testimonial_item {
        width: 100%; /* 幅を100%に設定 */
    }

    .testimonial_item:nth-of-type(2) {
        flex-direction: row-reverse; /* 2人目のアイテムは画像と吹き出しの位置を逆にする */
    }

    .testimonial_image {
        width: 80px; /* 画像の幅を調整 */
        height: 80px; /* 画像の高さを調整 */
    }

    /* FAQセクションのレスポンシブスタイル(1024px) */
    .faq_question {
        font-size: 1.05rem; /* タブレットデバイスではフォントサイズを少し小さくする */
        padding: 12px; /* 内側余白を12pxに設定 */
    }

    .faq_answer {
        padding: 12px; /* 内側余白を12pxに設定 */
    }

    .faq_table th, .faq_table td {
        font-size: 1rem; /* テーブルのフォントサイズを少し小さくする */
        padding: 8px; /* 内側余白を8pxに設定 */
    }
}

/* スマートフォンサイズの画面（最大768px） */
@media (max-width: 768px) {
    /* ハンバーガーメニューを表示 */
    #hamburger_menu {
        display: flex; /* フレックスボックスで表示 */
    }
    
   /* ナビゲーションメニューを非表示 */
    #nav_links {
        opacity: 0; /* 完全に透明 */
        visibility: hidden; /* 非表示 */
        transition: opacity 0.3s ease; /* フェードイン・アウトのアニメーション */
        flex-direction: column; /* 縦並びに変更 */
        width: 100%; /* 幅を100%に設定 */
        position: absolute; /* 絶対位置に設定 */
        top: 96px; /* 上端に配置 */
        left: 0; /* 左端に配置 */
        background-color: var(--color_white); /* 背景色を白に設定 */
        z-index: 1000; /* 他の要素より前面に表示 */
        pointer-events: none; /* 非表示時にクリックを無効化 */
    }

    /* ハンバーガーメニューをタップしたときのナビゲーションメニュー */
    #nav_links.show {
        display: flex; /* 表示する時にフレックスボックスで表示 */
        pointer-events: auto; /* 表示時にクリックを有効化 */
        opacity: 1; /* 完全に表示 */
        visibility: visible; /* メニューを表示する */
        transition-delay: 0.1s; /* visibilityが適用されるまでの時間 */
    }

    #nav_links.show li {
        border-left: 0px; /* 左ボーダーを削除 */
        border-top: 1px solid #346702; /* 上ボーダーを設定 */
        display: block; /* ブロック要素にする */
        width: 100%; /* 幅を100%に設定 */
    }
    
    #nav_links.show li:last-child {
        border-right: 0px; /* 右ボーダーを削除 */
        border-bottom: 1px solid #346702; /* 下ボーダーを設定 */
    }

    #nav_links.hidden li {
        border-left: 0px; /* 左ボーダーを削除 */
    }

    #nav_links.hidden li:last-child {
        border-right: 0px; /* 右ボーダーを削除 */
    }

    #nav_links.show li a {
        padding: var(--container_padding); /* 内側の余白を設定 */
        text-align: center; /* 中央揃え */
    }

    /* ヒーローセクションのレスポンシブスタイル(768px)*/
    .hero_section {
        height: 300px; /* ヒーローセクションの高さを300pxに設定 */
    }

    .woman_image {
        right: -23%; /* 画像の右位置を調整 */
        left: 65%; /* 画像の左位置を調整 */
    }

    .featured_product_image {
        height: 43%; /* 商品画像の高さを45%に設定 */
    }

    .hero_text {
        font-size: 1.75rem; /* フォントサイズを1.75remに設定 */
    }

    .hero_text .sub_text {
        margin-left: 0; /* サブテキストの左余白を削除 */
    }

    .hero_text .emphasis {
        font-size: 2.25rem; /* 強調テキストのフォントサイズを2.25remに設定 */
    }

    .hero_text strong {
        font-size: 2rem; /* 強調されたテキストのフォントサイズを1.5remに設定 */
    }

    /* 商品情報のレスポンシブスタイル(768px) */
    .product_info h3.product_title {
        font-size: 1.5rem; /* フォントサイズを1.5remに設定 */
    }

    .product_info p.product_description {
        font-size: 0.875rem; /* フォントサイズを0.875remに設定 */
        line-height: 1.4; /* 行の高さを1.4に設定 */
    }

    .purchase_button {
        padding: 12px 20px; /* 内側の余白を12px (上下)、20px (左右) に設定 */
    }

    /* 特徴セクションのレスポンシブスタイル(768px) */
    .features_content {
        flex-direction: column; /* 縦並びにする */
        gap: 16px; /* 縦の隙間を設定 */
    }

    .gallery_item {
        width: 100%; /* 1列配置にする */
    }

    .features_description {
        font-size: 0.8rem; /* フォントサイズを小さくする */
    }

    /* お客様の声セクションのレスポンシブスタイル(768px) */
    .testimonials_list {
        gap: 16px; /* アイテム間の間隔を調整 */
    }

    .testimonial_image {
        width: 60px; /* 画像の幅を調整 */
        height: 60px; /* 画像の高さを調整 */
    }

    .testimonial_text {
        padding: 12px; /* 吹き出しの内側の余白を調整 */
        font-size: 0.9rem; /* テキストのフォントサイズを調整 */
    }

    .testimonial_info {
        font-size: 0.8rem; /* お客様情報のフォントサイズを調整 */
    }

    /* FAQセクションのレスポンシブスタイル(768px) */
    .faq_question {
        font-size: 1rem; /* モバイルデバイスではフォントサイズを小さくする */
        padding: 12px; /* 内側余白を12pxに設定 */
    }

    .faq_answer {
        padding: 12px; /* 内側余白を12pxに設定 */
    }

    .faq_table th, .faq_table td {
        font-size: 0.9rem; /* テーブルのフォントサイズを小さくする */
        padding: 4px; /* 内側余白を4pxに設定 */
    }

    #back_to_top{
        bottom: 10px; /* 画面下から20pxの位置 */
        right: 10px; /* 画面右から20pxの位置 */
    }

    /* フッターのレスポンシブスタイル(768px) */
    #footer {
        padding: 12px 0; /* モバイルサイズでのパディングを少し減らす */
        font-size: 0.9rem; /* モバイルサイズでフォントサイズを調整 */
    }
}

@media (max-width: 480px) {
    /* ヒーローセクションのレスポンシブスタイル(480px)*/
    .woman_image{
        right: -12%; /* 画像の右位置を調整 */
        left: 63%; /* 画像の左位置を調整 */
    }

    .featured_product_image{
        height: 36%; /* 商品画像の高さを36%に設定 */
        left: 2px; /* 商品画像の左位置を調整 */
        bottom: 6px; /* 商品画像の下位置を調整 */
    }

    .hero_text{
        top: 12px; /* ヒーローテキストの上位置を調整 */
        right: 32%; /* ヒーローテキストの右位置を調整 */
        font-size: 1.5rem; /* フォントサイズを1.5remに設定 */
    }

    .hero_text .emphasis {
       font-size: 1.75rem; /* 強調テキストのフォントサイズを1.75remに設定 */
    }

    .hero_text strong{
       font-size: 1.75rem; /* 強調されたテキストのフォントサイズを1.75remに設定 */
    }

    /* フッターのレスポンシブスタイル(480px) */
    #footer {
        padding: 8px 0; /* 更にモバイルサイズでのパディングを減らす */
        font-size: 0.8rem; /* フォントサイズをさらに調整 */
    }
}