@charset "UTF-8";

/* * ==========================================
 * アニメーション設定 (Fade In)
 * ==========================================
 */
/* アニメーションの初期状態：透明＆少し下に配置 */
.fade-in-target {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.0s ease-out, transform 1.0s ease-out;
    will-change: opacity, transform;
}

/* 画面に入った時の状態：不透明＆元の位置 */
.fade-in-target.visible {
    opacity: 1;
    transform: translateY(0);
}

/* * ==========================================
 * レイアウト設定エリア
 * ==========================================
 */
body {
    background-color: rgb(83, 0, 0);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    /* ページ全体のフォントを統一 */
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
}

.content-wrapper {
    max-width: 480px; 
    width: 100%;
    margin: 0 auto; 
    background-color: white;
    min-height: 100vh;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); 
}

/* * ==========================================
 * ユーザー設定エリア (User Settings) - セクション1
 * ==========================================
 */
.section-1-container {
    width: 100%;
    padding: 0;
    margin: 0;
    line-height: 0; /* 画像下の微妙な隙間を削除 */
    background-color: white;
}

.s1-banner-img {
    width: 100%;
    height: auto;
    display: block; /* インライン要素特有の隙間を削除 */
}

/* * ==========================================
 * ユーザー設定エリア (User Settings) - セクション2
 * ==========================================
 */
.section-2-container {
    background-color: white; 
    padding: 30px 20px;
    width: 100%;
    box-sizing: border-box;
}

.lead-text {
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    color: rgb(83, 0, 0);
    font-size: 18px;
    line-height: 2.0;
    text-align: center;
}

/* ★追加: セクション2 リード文の強調スタイル */
.lead-text .highlight-text {
    font-weight: bold;
    font-size: 1.6em; /* 親要素(18px)の1.6倍の大きさ */
    display: block;   /* 改行させるためにブロック要素化（<br>不要になる場合も） */
    margin-bottom: 3px; /* 下に少し余白を追加 */
}


/* * ==========================================
 * ユーザー設定エリア (User Settings) - セクション3
 * ==========================================
 */
.section-3-container {
    background-color: white;
    /* 上下10px, 左右30pxの余白を設定 */
    padding: 10px 60px; 
    box-sizing: border-box; 
    width: 100%;
}

.button-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0px; 
}

.menu-btn {
    display: block; 
    text-decoration: none;
    width: 100%; 
    position: relative; 
    line-height: 0;
}

.menu-btn img {
    width: 100%;
    height: auto;
    display: block; 
}

.menu-btn:hover {
    opacity: 0.8;
    transition: opacity 0.3s;
}

/* * ==========================================
 * ユーザー設定エリア (User Settings) - セクション4
 * ==========================================
 */

.section-4-container {
    /* 指定のグリーン */
    background-color: rgb(43, 183, 179);
    
    /* 上下30px, 左右0px */
    padding: 30px 0px;
    
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    
    /* フレックスボックスで縦並び配置 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* セクション4内のテキストやタイトル画像のラッパー（左右余白30px確保用） */
.s4-inner-wrapper {
    padding: 0 30px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* タイトル画像 */
.s4-title-img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px; /* テキストとの間隔 */
}

/* セクション4のテキスト */
.s4-text {
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    color: white; /* 背景が濃いので白文字が見やすいですが、指定がなければ茶色に変更も可 */
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 5px;
    
    /* フォントサイズ調整: スマホ幅に応じて可変 */
    /* 最小 18px, 推奨 5vw, 最大 24px */
    font-size: clamp(18px, 5vw, 24px); 
}

/* 追加: ALL ITEMボタン (セクション4用) */
.s4-allitem-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    
    /* ★ALL ITEMボタンの上下余白 (30px) */
    margin-top: 30px;
    margin-bottom: 30px;
}

.s4-allitem-btn {
    width: 40%;
    max-width: 200px;
    height: auto;
    transition: opacity 0.3s;
}

.s4-allitem-btn:hover {
    opacity: 0.8;
}

/* 商品画像（横いっぱい） */
.s4-product-img {
    width: 100%;
    height: auto;
    margin: 20px 0; /* 上下の間隔 */
    display: block;
}

/* CHECKボタン (角丸四角) */
.s4-check-btn {
    display: inline-block;
    background-color: rgb(238, 143, 154); /* ピンク */
    color: rgb(83, 0, 0); /* 文字色：茶色 */
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: bold;
    text-decoration: none;
    
    /* 枠線：茶色 */
    border: 2px solid rgb(83, 0, 0);
    
    /* ドロップシャドウ：下向き、茶色 */
    box-shadow: 0px 4px 0px rgb(83, 0, 0);
    
    /* サイズと余白 */
    padding: 10px 40px;
    font-size: clamp(16px, 4vw, 20px);
    border-radius: 50px; /* 丸みをつける */
    
    transition: transform 0.1s, box-shadow 0.1s;
}

/* ボタンを押したときのアニメーション（沈む動き） */
.s4-check-btn:active {
    transform: translateY(4px);
    box-shadow: 0px 0px 0px rgb(83, 0, 0);
}

/* --- セクション4 追加要素用スタイル --- */

.s4-additional-content {
    width: 100%;
    margin-top: 30px; /* 既存ボタンの下に30px余白 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.s4-text-group {
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px; /* 左右余白20px確保 */
    text-align: center;
    margin-bottom: 20px;
}

/* テキスト1, 2用 (大きいサイズ) */
.s4-text-lg {
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    color: white;
    font-weight: bold;
    line-height: 1.5;
    margin: 0;
    /* フォントサイズ調整 */
    font-size: clamp(18px, 5vw, 24px); 
}

/* テキスト3, 4, 5用 (小さいサイズ) */
.s4-text-sm {
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    color: white;
    font-weight: bold;
    line-height: 1.5;
    margin: 0;
    /* フォントサイズ調整 */
    font-size: clamp(14px, 4vw, 18px); 
}

/* ONLINE限定 商品画像 */
.s4-online-img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 10px;
}


/* ★追加: キャンペーンリンクテキスト用スタイル */
.s4-campaign-link-wrapper {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    /* ★左右余白30px */
    padding: 0 20px;
    /* ★上下余白10px */
    margin: 10px 0;
}

.s4-campaign-link {
    display: inline-block;
    text-decoration: none;
    /* ★文字色：白 */
    color: white;
    /* ★太字 */
    font-weight: bold;
    /* フォントサイズ（必要に応じて調整） */
    font-size: clamp(18px, 4vw, 24px);
    
    transition: opacity 0.3s;
}

.s4-campaign-link:hover {
    opacity: 0.8;
}




/* 追加CHECKボタン(丸画像)用ラッパー */
.s4-check-wrapper-2 {
    width: 100%;
    display: flex;
    justify-content: center;
    /* 上下余白10px */
    margin-top: 10px; 
    margin-bottom: 10px;
}

/* * ==========================================
 * ユーザー設定エリア (User Settings) - セクション5
 * ==========================================
 */
.section-5-container {
    width: 100%;
    padding: 0;
    margin: 0;
    line-height: 0; /* 画像下の微妙な隙間を削除 */
    background-color: white; /* 必要に応じて変更 */
}

.s5-line-img {
    width: 100%;
    height: auto;
    display: block; /* インライン要素特有の隙間を削除 */
    margin: 0;
}

/* * ==========================================
 * ユーザー設定エリア (User Settings) - セクション6
 * ==========================================
 */
.section-6-container {
    background-color: white; /* 背景色：白 */
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.s6-pickup-img {
    width: 100%;     /* スマホビュー横いっぱい */
    height: auto;
    display: block;
    
    /* ★以下の数値でPICKUP画像と丸ボタンの間の隙間を調整してください */
    margin-bottom: 10px; 
}

.s6-check-btn-wrapper {
    width: 100%;
    display: flex;
    justify-content: center; /* センター配置 */
    
    /* ★以下の数値で丸ボタンの下の隙間を調整してください */
    margin-bottom: 10px;
}

.s6-check-btn-img {
    /* スマホの画面サイズに合わせて調整される設定 */
    width: 40%;       /* 画面幅の40%のサイズで表示 */
    max-width: 200px; /* 必要であれば最大幅を制限（不要なら削除可） */
    height: auto;     /* 比率を維持 */
    
    transition: opacity 0.3s;
}

.s6-check-btn-img:hover {
    opacity: 0.8;
}

/* * ==========================================
 * ユーザー設定エリア (User Settings) - セクション10
 * ==========================================
 */
.section-10-container {
    background-color: rgb(43, 183, 179); /* 背景色：グリーン */
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.s10-title-img {
    /* 幅指定を解除し、元のサイズで表示 */
    width: auto;
    max-width: 70%; /* 画面からはみ出さないように制限 */
    height: auto;
    display: block; /* ブロック要素にして中央揃えを効かせる */
    margin-left: auto;
    margin-right: auto;
    
    /* ★タイトル画像上の余白調整 (20px) */
    margin-top: 20px; 
    margin-bottom: 10px; /* テキストとの間隔 */
    
    /* ★画像の左右余白を20px確保 */
    padding: 0 20px;
    box-sizing: border-box; /* paddingを含めた幅計算 */
}

.s10-text-wrapper {
    width: 100%;
    box-sizing: border-box;
    /* ★テキスト部分の左右余白調整 (最低20px確保) */
    padding: 0 20px; 
    text-align: center;
    margin-bottom: 20px; /* 最初の画像との間隔 */
}

.s10-text {
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    color: white;
    font-weight: bold;
    line-height: 1.5;
    margin: 5px 0;
    
    /* ★テキストの文字サイズ調整 */
    font-size: clamp(18px, 5vw, 24px); 
}

.s10-product-img {
    width: 100%; /* スマホビュー横いっぱい */
    height: auto;
    display: block;
    margin: 0;
}

/* CHECKボタンの配置エリア（通常用） */
.s10-check-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    
    /* ★CHECKボタンの上下余白調整 (10px) */
    margin-top: 10px;
    margin-bottom: 10px;
}

/* 一番下のCHECKボタン用（下余白30px） */
.s10-check-wrapper-last {
    margin-bottom: 30px; /* ★ここだけ30px */
}

/* * ==========================================
 * ユーザー設定エリア (User Settings) - セクション12
 * ==========================================
 */
.section-12-container {
    background-color: rgb(251, 216, 172); /* 背景色：クリーム色に変更 */
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.s12-title-img {
    /* 幅指定を解除し、元のサイズで表示 */
    width: auto;
    max-width: 40%; /* 画面からはみ出さないように制限 */
    height: auto;
    display: block; /* ブロック要素にして中央揃えを効かせる */
    margin-left: auto;
    margin-right: auto;
    
    /* ★タイトル画像の上下余白調整 (10px) */
    margin-top: 10px;
    margin-bottom: 10px;
}

.s12-grid {
    display: grid;
    width: 100%;
    box-sizing: border-box;
    
    /* ★2列配置の設定 */
    grid-template-columns: 1fr 1fr;
    
    /* ★ボタン同士の隙間 (5px) */
    gap: 5px;
    
    /* ★白枠左右の余白 (10px) 
       ここの数値を変更すると、画像サイズも自動的に調整されます */
    padding: 0 10px;
    
    margin-bottom: 10px; /* ALL ITEMボタンとの間隔用（予備） */
}

.s12-grid-item-link {
    display: block;
    text-decoration: none;
    line-height: 0; /* 画像下の隙間除去 */
}

.s12-grid-img {
    width: 100%;
    height: auto;
    display: block;
}

.s12-all-item-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    
    /* ★ALL ITEMボタンの上下余白 (10px) */
    margin-top: 10px;
    margin-bottom: 10px;
}

.s12-all-item-btn {
    max-width: 200px; /* 適度なサイズ制限（必要に応じて調整） */
    width: 40%;
    height: auto;
    transition: opacity 0.3s;
}

.s12-all-item-btn:hover {
    opacity: 0.8;
}

/* * ==========================================
 * ユーザー設定エリア (User Settings) - セクション16
 * ==========================================
 */
.section-16-container {
    background-color: white; /* 背景色：白（必要に応じて変更可） */
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.s16-title-img {
    /* 幅指定を解除し、元のサイズで表示 */
    width: auto;
    max-width: 60%; /* 画面からはみ出さないように制限 */
    height: auto;
    display: block; /* ブロック要素にして中央揃えを効かせる */
    margin-left: auto;
    margin-right: auto;
    
    /* ★タイトル画像の上下余白 (10px) */
    margin-top: 10px;
    margin-bottom: 10px;
}

.s16-banner-img {
    width: 100%; /* スマホビュー横いっぱい */
    height: auto;
    display: block;
    /* リンクの下線を消すためにaタグ内でもblock要素として扱う */
}

.s16-banner-link {
    display: block;
    width: 100%;
    text-decoration: none;
}

/* 1枚目のバナー用：下に20pxの余白 */
.s16-banner-first {
    margin-bottom: 20px;
}

/* 2枚目のバナー用（追加）：下に20pxの余白 */
.s16-banner-second {
    margin-bottom: 20px;
}

/* 3枚目のバナー用：下余白はテキストとの間隔調整のため変更 */
.s16-banner-third {
    margin-bottom: 0px; /* テキストのmargin-topで調整するため0 */
}

/* 以前のクラス（不要であれば削除可、残しておいても影響なし） */
.s16-banner-last {
    margin-bottom: 10px;
}

/* --- セクション16 注釈テキスト用スタイル --- */
.s16-note-wrapper {
    width: 100%;
    text-align: center; /* テキストブロックを中央に配置 */
    
    /* ★テキストの上下余白10px (下は100pxの余白を足すため合計110px、またはmarginを分ける) */
    margin-top: 10px;
    margin-bottom: 100px; /* ★元々の100px余白をここに移動 */
    
    padding: 0 20px; /* 左右余白確保 */
    box-sizing: border-box;
}

.s16-note-text {
    display: inline-block; /* ブロックとして扱うが幅は中身に合わせる */
    text-align: left;      /* テキスト自体は左寄せ（折り返し対策） */
    font-family: "hiragino-kaku-gothic-pron", sans-serif; /* 全体フォントに合わせる */
    color: rgb(83, 0, 0);  /* 全体の文字色に合わせる */
    line-height: 1.5;
    
    /* ★文字サイズ（小さめ・調整可能） */
    font-size: clamp(10px, 3.5vw, 14px); 
}