/* ====================================
    基本設定 (ナビゲーション追加に伴う変更)
==================================== */
body {
    font-family: 'Noto Sans JP', sans-serif;;
    margin: 0;
    padding: 0;
    padding-top: 55px;/* 固定ナビゲーションの高さ分を追加 */
    background-color: #ffffff; /* 完全な白背景 */
    color: #1a1a1a; /* ダークなテキストカラー */
    line-height: 1.6;
}
.container {
max-width: 900px; /* 少し幅広に */
margin: 0 auto; /* 中央寄せ */
padding: 40px 20px; /* 上下のパディングを増やす */
background-color: #ffffff;
}

/* ====================================
    ナビゲーション (新規追加 & スタイル強化)
==================================== */
.fixed-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* 背景色をグラデーションに変更し、深みを出す */
    background: linear-gradient(to bottom, #ffffff 90%, #f9f9f9 100%);
    /* 影を柔らかく、わずかに濃くする */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    z-index: 1000;
}
.nav-list {
    display: flex;
    justify-content: space-around;
    max-width: 900px;
    margin: 0 auto;
    padding: 10px 20px;
    list-style: none;
}
.nav-list a {
    /* ナビゲーションを太字・濃い赤にして強調 */
    color: #b71c1c; /* 現在の赤色より少し濃い色 */
    text-decoration: none;
    font-weight: 900; /* さらに太く */
    font-size: 1em; /* 大きめにする */
    padding: 8px 15px; /* パディングを増やしてボタン感を出す */
    border-radius: 25px; /* 完全に丸くする */
    transition: background-color 0.3s ease-in-out, transform 0.1s; /* アニメーション追加 */
}
.nav-list a:hover {
    background-color: #ffebee; /* ホバー時の背景色 */
    transform: translateY(-1px); /* わずかに浮き上がらせる */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* ====================================
    ヘッダー (背景画像とテキスト調整)
==================================== */
header {
text-align: center;
padding: 80px 20px; /* 上下のパディングを大きくして画像を見せる */
margin-bottom: 40px;

/* 背景画像の設定 */
background-image: url('./static/images/r-1_twin.png'); /* ここにR-1の画像パスを指定 */
background-size: cover; /* 全体をカバー */
background-position: center center; /* 中央に配置 */
color: #fff; /* テキストを白に */
position: relative; /* オーバーレイのために必要 */
border-radius: 10; /* 角丸は適用しない */
overflow: hidden; /* 画像がはみ出さないように */
}
header:before {
/* 画像の上に半透明のオーバーレイ */
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10;
background-color: rgba(248, 197, 201, 0.295); /* 暗い半透明 */
z-index: 1;
}
header h1, header p {
position: relative; /* オーバーレイの上に表示 */
z-index: 2;
color: #fff; /* テキストを白に */
text-shadow: 2px 2px 5px rgba(0,0,0,0.7); /* 濃い影で可読性アップ */
}
h1 {
font-size: 3.2em; /* さらに大きく */
font-weight: 900; 
letter-spacing: 0.5px;
line-height: 1.2;
}
header p {
font-size: 1.3em;
font-weight: 700;
margin-top: 15px;
}
h2 {
color: #d32f2f;
border-left: none;
padding-left: 0;
margin-top: 50px;
margin-bottom: 30px;
font-size: 2.2em;
font-weight: 900;
text-align: center;
}

/* ====================================
    価格セクション (シンプルかつ大胆に)
==================================== */
.price-section {
background-color: #fff1f2; 
padding: 40px 20px;
border-radius: 10px;
text-align: center;
margin-top: 30px; 
border: 1px solid #ffcdd2;
}
.price-section .discount-label {
background-color: #d32f2f;
color: #fff;
padding: 6px 15px;
border-radius: 20px;
font-size: 1.1em;
font-weight: 700;
display: inline-block;
margin-bottom: 15px;
}
.price-section .main-price {
font-size: 4.5em; 
color: #d32f2f;
font-weight: 900; 
margin: 5px 0 10px 0;
letter-spacing: -2px;
}
.price-section .main-price small {
font-size: 0.35em;
vertical-align: super;
font-weight: 700;
}
.price-section .original-price {
font-size: 1.1em;
color: #666;
text-decoration: line-through;
margin-bottom: 5px;
}
.discount-text {
font-size: 1.3em; 
color: #d32f2f; 
font-weight: 900;
margin-top: 15px;
}
.savings-detail {
font-size: 1.1em;
color: #333;
margin-top: 5px;
font-weight: 700;
}

/* ====================================
    商品詳細 (画像と特徴)
==================================== */
.product-details, .appeal-details {
display: flex;
align-items: flex-start;
margin: 60px 0; 
gap: 40px;
}
.product-image, .appeal-image {
flex: 1;
text-align: center;
}
.product-image img, .appeal-image img {
max-width: 100%;
height: auto;
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.r1-features, .appeal-features {
flex: 1.5;
padding: 0;
border-left: none;
}
.r1-features h3, .appeal-features h3 {
color: #d32f2f;
margin-top: 0;
font-size: 1.6em;
font-weight: 900;
border-bottom: 2px solid #e0e0e0;
padding-bottom: 10px;
margin-bottom: 20px;
}
.r1-features ul, .appeal-features ul {
list-style: none;
padding-left: 0;
}
.r1-features li, .appeal-features li {
margin-bottom: 20px;
position: relative;
padding-left: 40px; 
font-size: 1.1em;
font-weight: 700;
color: #1a1a1a;
}
.r1-features li:before {
content: '🏠'; 
color: #d32f2f;
font-weight: 900;
position: absolute;
left: 0;
font-size: 1.4em;
line-height: 1;
}
.r1-features li:nth-child(1):before { content: '✨'; } 
.r1-features li:nth-child(2):before { content: '💧'; }
.r1-features li:nth-child(3):before { content: '⏰'; }

/* 価格訴求のアイコンと注釈 */
.appeal-features li:before {
content: '✅'; 
color: #d32f2f;
font-weight: 900;
position: absolute;
left: 0;
font-size: 1.4em;
line-height: 1;
}
.appeal-features li p { /* 注釈の調整 */
font-size: 0.9em;
font-weight: 400;
color: #666;
margin-top: 5px;
margin-bottom: 0;
padding-left: 0;
}


/* ====================================
    お申し込みの流れ (ステップ表示)
==================================== */
.flow-section {
display: flex;
justify-content: space-between;
margin: 40px 0;
padding: 20px 0;
}
.step {
width: 30%;
text-align: center;
padding: 15px;
position: relative;
}
.step-number {
display: block;
width: 50px;
height: 50px;
line-height: 50px;
margin: 0 auto 15px auto;
background-color: #d32f2f;
color: #fff;
border-radius: 50%;
font-size: 2em;
font-weight: 900;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.step h3 {
font-size: 1.1em;
font-weight: 700;
color: #d32f2f;
margin-top: 0;
margin-bottom: 10px;
}
.step:not(:last-child):after {
content: '▶'; 
position: absolute;
top: 25px;
right: -25px;
color: #e0e0e0;
font-size: 1.5em;
font-weight: 400;
}

/* ====================================
    CTAボタン (太く、シンプルに)
==================================== */
.cta-button {
display: block;
width: 70%; 
margin: 30px auto; 
padding: 20px; 
background-color: #d32f2f;
color: #fff;
text-decoration: none;
text-align: center;
font-size: 2.2em; 
font-weight: 900;
border-radius: 50px; 
transition: all 0.2s;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
letter-spacing: 1px;
}
.cta-button:hover {
background-color: #b71c1c;
transform: translateY(-2px); 
box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

/* ====================================
    フッター・お問い合わせ 
==================================== */
.footer-info {
background-color: #f7f7f7;
padding: 30px 20px;
margin-top: 60px;
border-radius: 10px;
text-align: center;
}
.footer-info h3 {
color: #d32f2f;
font-size: 1.5em;
font-weight: 900;
margin-bottom: 15px;
}
.footer-info a {
color: #d32f2f;
font-weight: 700;
text-decoration: underline;
}
.note {
font-size: 0.9em; 
color: #777;
text-align: center;
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #e0e0e0;
}
.note strong {
color: #d32f2f;
font-weight: 700;
}
.note a {
color: #d32f2f;
text-decoration: underline;
}

/* スマートフォン向け調整 */
@media (max-width: 768px) {
body { padding-top: 90px; } /* スマホでナビゲーションが2行になることを考慮 */
.container {
padding: 20px 15px;
}
.nav-list {
    flex-wrap: wrap; /* ナビゲーションを折り返す */
    padding: 5px 10px;
}
.nav-list li {
    width: 45%; /* 2列で表示 */
    text-align: center;
    margin: 5px 0;
}
.nav-list a {
    display: block;
    font-size: 0.8em;
}
header {
    padding: 60px 15px;
}
h1 {
    font-size: 2.5em;
}
header p {
    font-size: 1.1em;
}
.product-details, .appeal-details {
    flex-direction: column;
    margin: 40px 0;
    gap: 20px;
}
.r1-features, .appeal-features {
    margin-top: 10px;
}
.flow-section {
    flex-direction: column;
}
.step {
    width: 100%;
    margin-bottom: 20px;
}
.step:not(:last-child):after {
    display: none; 
}
.cta-button {
    width: 95%;
    font-size: 1.8em;
}
}
/* ====================================
FAQ (よくある質問) スタイル
==================================== */
.faq-section {
margin-top: 60px;
padding: 20px 0;
}
.faq-item {
border-bottom: 1px solid #e0e0e0;
padding: 15px 0;
}
.faq-item:last-child {
border-bottom: none;
}
.faq-question {
font-size: 1.2em;
font-weight: 700;
color: #1a1a1a;
position: relative;
padding-left: 30px;
margin-bottom: 5px;
}
.faq-question:before {
content: 'Q';
color: #d32f2f;
font-size: 1.2em;
font-weight: 900;
position: absolute;
left: 0;
top: 0;
}
.faq-answer {
font-size: 1.0em;
color: #333;
padding-left: 30px;
margin-top: 10px;
margin-bottom: 0;
position: relative; /* Aマークのために必要 */
}
.faq-answer:before {
content: 'A';
color: #4a4a4a;
font-size: 1.2em;
font-weight: 900;
position: absolute;
left: 0;
top: 0;
}

/* ページ内リンクの飛び先調整 (固定ナビゲーションに隠れないように) */
h2:before {
content: "";
display: block;
height: 65px; /* ナビゲーションの高さ+α */
margin-top: -65px;
visibility: hidden;
pointer-events: none;
}