@charset "UTF-8";

/* ========================================================
   ベース設定
======================================================== */
:root {
    /* カラーパレット */
    --text-color: #333333; /* 上品な濃いグレー */
    --text-light: #666666; /* 少し薄いグレー（補足説明など） */
    --bg-color: #ffffff;   /* ベースの白 */
    --silver-light: #f5f5f7; /* 極めて薄いシルバー（背景アクセント） */
    --silver-line: #e0e0e0;  /* 区切り線用のシルバー */
    
    /* フォント設定（明朝体） */
    --font-mincho: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif;
}

/* ========================================================
   全体設定（スムーススクロールと位置調整）
======================================================== */
html {
    /* クリックした際に滑らかにスクロールさせる */
    scroll-behavior: smooth;
    /* 固定ヘッダーの高さ分、ジャンプした先の停止位置を下にずらす */
    scroll-padding-top: 80px; 
}

body {
    font-family: var(--font-mincho);
    color: var(--text-color);
    background-color: var(--bg-color);
    line-height: 1.8;
    letter-spacing: 0.08em; /* 文字間隔を広げて高級感を演出 */
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased; /* フォントを滑らかに表示 */
}

a {
    color: var(--text-color);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

a:hover {
    opacity: 0.6;
}

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

/* ========================================================
   共通パーツ
======================================================== */
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-padding {
    padding: 100px 0;
}

.section-title {
    font-size: 24px;
    text-align: center;
    font-weight: normal;
    letter-spacing: 0.15em;
    margin-bottom: 50px;
    position: relative;
}

/* タイトルの下にシルバーの細い線を引く装飾 */
.section-title::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background-color: var(--text-color);
    margin: 20px auto 0;
}

/* ========================================================
   アノウンスメントバー（トップお知らせ帯）
======================================================== */
.announcement-bar {
    background-color: #111111; /* 引き締まる黒 */
    color: #FFF;
    text-align: center;
    padding: 8px 10px;
    position: relative;
    z-index: 1001;
}

.announcement-bar p {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.15em;
    font-family: var(--font-mincho);
}

/* フッター内の公式表示用 */
.official-notice {
    font-size: 12px;
    color: var(--text-color);
    letter-spacing: 0.1em;
    margin: 0 0 15px 0;
}

/* スマホ用調整（@media (max-width: 768px) の中に追加） */
@media (max-width: 768px) {
    .announcement-bar p {
        font-size: 9px; /* スマホでは1行に収まるように少し小さく */
        letter-spacing: 0.05em;
    }
}

/* ========================================================
   ヘッダー
======================================================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid var(--silver-line);
    z-index: 1000;
	transform:translateY(-100%);
	transition: transform 0.5s ease;
}

.header.is-active {
    transform: translateY(0);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 30px;
}

.logo {
    font-size: 22px;
    font-weight: normal;
    letter-spacing: 0.1em;
    margin: 0;
}

.global-nav ul {
    display: flex;
    gap: 30px;
}

.global-nav a {
    font-size: 14px;
    letter-spacing: 0.1em;
}

/* ========================================================
   ヒーローエリア（メインビジュアル）
======================================================== */
.hero-section {
   position: relative;
	width:100%;
}

.hero-section img{
	width:100%;
	margin-top:-6rem;
}

.hero-content {
    position: absolute;
    top: 40%;
    left: 10%;
    text-align: left;
}

.hero-logo {
    font-family: "Didot", "Bodoni MT", "Times New Roman", serif;
    font-size: 64px; /* 少し大きさを抑えて上品に */
    font-weight: normal;
    letter-spacing: 0.02em;
    margin: 0 0 30px 0; /* 下のテキストとの余白を広げる */
    color: var(--text-color);
    line-height: 1;
}

.hero-catchphrase-main {
    font-size: 18px; /* 28pxから大幅に縮小し、ラグジュアリー感を演出 */
    font-weight: normal;
    line-height: 2.2; /* 行間を広めに取ってゆったりと */
    letter-spacing: 0.15em; /* 文字と文字の間隔を広げる */
    margin: 0;
    color: var(--text-color);
    border-left: 2px solid #bfa87a; /* クライアント指定の左ボーダー */
    padding-left: 24px; /* ボーダーとテキストの間に十分な余白を設ける */
}

/* ========================================================
   コンセプトエリア (リニューアル版)
======================================================== */
.concept-section {
    width: 100%;
    overflow: hidden;
	margin-top:-10px;
}

/* 黒帯の特徴バー */
.feature-bar {
    background-color: #111111;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 30px 20px;
    gap: 40px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* アイコンのプレースホルダー（後で画像に差し替え可能） */
.feature-icon {
    font-size: 18px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: lighter;
}

.feature-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.feature-text strong {
    font-size: 13px;
    font-weight: normal;
    letter-spacing: 0.1em;
    margin-bottom: 2px;
}

.feature-text span {
    font-family: "Didot", "Bodoni MT", "Times New Roman", serif;
    font-size: 10px;
    color: #999999;
    letter-spacing: 0.05em;
}

/* コンセプトブロック（画像とテキストの2カラム） */
.concept-block {
    display: flex;
    width: 100%;
    background-color: var(--bg-color);
}

.concept-block.block-reverse {
    flex-direction: row; /* テキスト左・画像右（PC時） */
}

.concept-image,
.concept-text-box {
    flex: 1; /* 50%ずつ均等割 */
    width: 50%;
}

.concept-image{
	background:#aaa;
}

.concept-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* テキストエリアの余白と背景色 */
.concept-text-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 100px 12%; /* 上下100px、左右12%に変更して内側に寄せる */
    box-sizing: border-box;
}

.concept-text-box.bg-silver {
    background-color: var(--silver-light); /* うっすらグレーの背景 */
}

/* テキスト装飾 */
.concept-subtitle {
    font-family: "Didot", "Bodoni MT", "Times New Roman", serif;
    font-size: 13px;
    color: var(--text-light);
    letter-spacing: 0.15em;
    margin: 0 0 20px 0;
}

.concept-title {
    font-size: 26px;
    font-weight: normal;
    line-height: 1.6;
    letter-spacing: 0.1em;
    margin: 0 0 30px 0;
    color: var(--text-color);
}

.concept-desc {
    font-size: 15px;
    line-height: 2;
    letter-spacing: 0.1em;
    margin: 0;
    color: var(--text-color);
}

.concept-list {
    margin: 0 0 30px 0;
}

.concept-list li {
    margin-bottom: 20px;
}

.concept-list li:last-child {
    margin-bottom: 0;
}

.concept-list li strong {
    display: block;
    font-size: 15px;
    font-weight: normal;
    letter-spacing: 0.1em;
    margin-bottom: 5px;
}

.concept-list li span {
    display: block;
    font-size: 13px;
    color: var(--text-light);
    padding-left: 20px; /* ◆マークからの字下げ */
}

.concept-annotation {
    font-size: 11px;
    color: var(--text-light);
    margin: 0;
}

/* ========================================================
   メッセージエリア
======================================================== */
.message-section {
    background-color: var(--bg-color);
}

.message-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    max-width: 800px;
    margin: 0 auto;
}

.message-en {
    font-family: "Didot", "Bodoni MT", "Times New Roman", serif;
    font-size: 28px;
    font-weight: normal;
    line-height: 1.4;
    letter-spacing: 0.05em;
    margin: 0;
    text-align: left;
}

.message-divider {
    width: 1px;
    height: 90px;
    background-color: #cccccc;
}

.message-ja {
    font-size: 15px;
    line-height: 2;
    letter-spacing: 0.1em;
    margin: 0;
    text-align: left;
}

/* ========================================================
   プロダクトエリア (ラグジュアリー拡大版)
======================================================== */
.section-header {
    text-align: center;
    margin-bottom: 80px; /* 余白を広げて優雅に */
}

.section-title-en {
    font-family: "Didot", "Bodoni MT", "Times New Roman", serif;
    font-size: 32px; /* 少し大きく */
    font-weight: normal;
    letter-spacing: 0.15em;
    margin: 0 0 15px 0;
}

.section-subtitle {
    font-size: 13px;
    color: var(--text-light);
    letter-spacing: 0.15em;
    margin: 0;
}

.products-wrapper {
    display: flex;
    flex-direction: column; /* 横並びをやめ、縦並びに変更して1つずつを大きく */
    gap: 120px; /* 商品間の余白を大胆に大きく取る */
}

.product-box {
    display: flex;
    align-items: center;
    width: 100%; /* 横幅いっぱいに使う */
    background-color: var(--bg-color); /* 背景は白でスッキリと */
    gap: 60px; /* 画像とテキストの隙間 */
}

/* 偶数番目の商品は画像を右、テキストを左に（ジグザグ配置で雑誌風に） */
.product-box:nth-child(even) {
    flex-direction: row-reverse;
}

.product-box-image {
    width: 50%;
    background-color: var(--silver-light); /* 画像背景に極めて薄いグレーを敷いて舞台を作る */
    padding: 80px 40px;
    text-align: center;
    box-sizing: border-box;
}

.product-box-image img {
    width: 100%;
    max-width: 360px; /* 画像が大きくなりすぎないよう上限を設定 */
    height: auto;
    display: block;
    margin: 0 auto;
    /* 商品画像にほんの少し影をつけて立体感と高級感を出す */
    filter: drop-shadow(0px 15px 20px rgba(0,0,0,0.06));
}

.product-box-text {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 30px;
}

.product-brand {
    font-family: "Didot", "Bodoni MT", "Times New Roman", serif;
    font-size: 16px;
    color: #bfa87a; /* ブランド名をゴールドにして特別感を */
    letter-spacing: 0.15em;
    margin-bottom: 15px;
}

.product-name-en {
    font-family: "Didot", "Bodoni MT", "Times New Roman", serif;
    font-size: 42px; /* 英語の商品名を大胆に大きく（24px→42px） */
    font-weight: normal;
    margin: 0 0 20px 0;
    line-height: 1.2;
}

.product-name-ja {
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0.15em;
    margin: 0 0 30px 0;
    color: var(--text-color);
}

.product-volume {
    font-family: "Didot", "Bodoni MT", "Times New Roman", serif;
    font-size: 13px;
    color: var(--text-light);
    margin: 0;
    letter-spacing: 0.1em;
}

/* ========================================================
   コアテクノロジーエリア (リニューアル版)
======================================================== */
.core-tech-section {
    background-color: #111111; /* プロダクトの白背景とのコントラストを作る黒背景 */
    color: #ffffff;
}

.core-tech-header {
    text-align: center;
    margin-bottom: 60px;
}

.tech-label-gold {
    display: block;
    font-family: "Didot", "Bodoni MT", "Times New Roman", serif;
    font-size: 14px;
    color: #bfa87a;
    letter-spacing: 0.15em;
    margin-bottom: 15px;
}

.tech-title-jp {
    font-size: 32px;
    font-weight: normal;
    line-height: 1.6;
    letter-spacing: 0.1em;
    margin: 0;
}

.core-tech-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
}

.tech-text-area {
    flex: 1;
}

.tech-lead {
    font-size: 20px;
    color: #bfa87a;
    line-height: 1.8;
    letter-spacing: 0.1em;
    margin: 0 0 30px 0;
}

.tech-desc-main {
    font-size: 15px;
    line-height: 2.2;
    letter-spacing: 0.1em;
    color: #dddddd;
    margin: 0 0 15px 0;
}

.tech-annotation {
    font-size: 11px;
    color: #888888;
    margin: 0;
}

.tech-features-grid {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tech-feature-card {
    background-color: rgba(255, 255, 255, 0.05); /* うっすら透ける黒 */
    border: 1px solid rgba(191, 168, 122, 0.3); /* 薄いゴールドの枠 */
    padding: 30px;
    position: relative;
    padding-left: 80px;
}

.tech-feature-num {
    position: absolute;
    left: 25px;
    top: 30px;
    font-family: "Didot", "Bodoni MT", "Times New Roman", serif;
    font-size: 24px;
    color: #bfa87a;
    line-height: 1;
}

.tech-feature-title {
    font-size: 16px;
    font-weight: normal;
    color: #ffffff;
    letter-spacing: 0.1em;
    margin: 0 0 10px 0;
}

.tech-feature-text {
    font-size: 13px;
    line-height: 1.8;
    color: #cccccc;
    margin: 0;
}

/* ========================================================
   おすすめターゲットエリア
======================================================== */
.recommend-section {
    background-color: var(--bg-color);
}

.recommend-container {
    max-width: 800px; /* 少し幅を絞って上品にまとめる */
}

.recommend-header {
    text-align: center;
    margin-bottom: 50px;
}

.recommend-heading {
    font-size: 26px;
    font-weight: normal;
    letter-spacing: 0.1em;
    margin: 0 0 20px 0;
    color: var(--text-color);
}

/* タイトル下の短い線 */
.recommend-heading::after {
    content: '';
    display: block;
    width: 30px;
    height: 1px;
    background-color: var(--text-color);
    margin: 20px auto 0;
}

.recommend-lead {
    font-size: 15px;
    line-height: 2;
    letter-spacing: 0.1em;
    color: var(--text-color);
}

/* 共通の枠デザイン */
.recommend-box {
    background-color: #ffffff;
    border: 1px solid #e0d5c1; /* 上品なシャンパンゴールド系の細枠 */
    padding: 40px;
    margin-bottom: 30px;
}

/* 全ての肌タイプ向け (上段) */
.recommend-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.recommend-icon {
    width: 70px;
    height: 70px;
    background-color: #faf8f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.recommend-icon img {
    width: 35px;
    height: 35px;
}

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

.recommend-all-title {
    font-size: 18px;
    font-weight: normal;
    line-height: 1.6;
    letter-spacing: 0.1em;
    margin: 0 0 15px 0;
}

.recommend-all-desc {
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-light);
    margin: 0;
}

/* 肌タイプ別 2カラム (下段) */
.recommend-grid {
    display: flex;
    gap: 20px;
}

.recommend-type {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 30px;
    margin-bottom: 0;
}

.type-header {
    text-align: center;
    margin-bottom: 25px;
}

.type-initial {
    display: block;
    font-family: "Didot", "Bodoni MT", "Times New Roman", serif;
    font-size: 42px;
    color: #bfa87a; /* ゴールドの文字色 */
    line-height: 1;
    margin-bottom: 5px;
}

.type-target {
    display: block;
    font-size: 12px;
    color: var(--text-light);
    letter-spacing: 0.05em;
}

.type-catch {
    font-size: 15px;
    color: var(--text-color);
    letter-spacing: 0.1em;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 15px;
}

/* キャッチコピー下のゴールドの線 */
.type-catch::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background-color: #e0d5c1;
}

.type-checklist {
    width: 100%;
}

.type-checklist li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 20px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-color);
    letter-spacing: 0.05em;
}

.type-checklist li:last-child {
    margin-bottom: 0;
}

/* チェックマーク付きの四角いボックスをCSSで描画 */
.type-checklist li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 14px;
    height: 14px;
    border: 1px solid #bfa87a; /* ゴールドの枠線 */
    /* チェックマークのSVGを背景として設定 */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23bfa87a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>');
    background-size: 10px;
    background-repeat: no-repeat;
    background-position: center;
}

/* ========================================================
   HOW TO USE エリア
======================================================== */
.how-to-intro {
    background-color: #f5f2eb; /* 上品なベージュ系背景。画像があればbackground-imageに差し替え */
    padding: 80px 10%;
    margin-top: 50px;
}

.how-to-intro-content {
    max-width: 800px;
    margin: 0 auto;
}

.intro-title {
    font-size: 22px;
    font-weight: normal;
    line-height: 1.6;
    letter-spacing: 0.1em;
    color: var(--text-color);
    margin: 0 0 20px 0;
}

.intro-desc {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-color);
    letter-spacing: 0.05em;
    margin: 0;
}

.how-to-use-container {
    max-width: 700px; /* ステップカードが間延びしないよう幅を絞る */
}

/* タイトルと左右の線 */
.section-subtitle-lines {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    font-size: 12px;
    color: var(--text-light);
    letter-spacing: 0.1em;
}

.section-subtitle-lines::before,
.section-subtitle-lines::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background-color: #dcdcdc;
}

/* ステップカード */
.step-card {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #e0d5c1; /* ゴールド系の細枠 */
    padding: 35px 40px;
    margin-bottom: 20px;
    gap: 30px;
}

.step-number {
    font-family: "Didot", "Bodoni MT", "Times New Roman", serif;
    font-size: 60px;
    color: #bfa87a;
    line-height: 1;
    width: 60px;
    text-align: center;
    flex-shrink: 0;
}

.step-content {
    flex: 1;
}

.step-title {
    font-family: "Didot", "Bodoni MT", "Times New Roman", serif;
    font-size: 22px;
    font-weight: normal;
    color: #bfa87a;
    margin: 0 0 10px 0;
    letter-spacing: 0.05em;
}

.step-desc {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-color);
    margin: 0 0 15px 0;
}

.step-guide {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e0d5c1;
    padding: 8px 15px;
    font-size: 12px;
    color: var(--text-color);
}

.guide-icon {
    width: 16px;
    height: 16px;
}

/* 画像プレースホルダー（円形） */
.step-image-circle {
    width: 110px;
    height: 110px;
    background-color: #faf8f5; /* 極めて薄いベージュ */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

/* 画像が入った場合は円いっぱいに表示 */
.step-image-circle img {
    width: 80%;
    height: auto;
    object-fit: contain;
}

/* アドバイスカード */
.advice-card {
    background-color: #faf8f5;
    padding: 30px 40px;
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 20px;
}

.advice-icon-circle {
    width: 60px;
    height: 60px;
    background-color: #ffffff;
    border: 1px solid #e0d5c1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.advice-icon-circle img {
    width: 70%;
}

.advice-text {
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-color);
    margin: 0;
}

/* 3つの特徴ボックス */
.features-box {
    display: flex;
    border: 1px solid #e0d5c1;
    background-color: #ffffff;
    margin-top: 20px;
}

.feature-col {
    flex: 1;
    padding: 30px 20px;
    text-align: center;
    border-right: 1px solid #e0d5c1;
}

.feature-col:last-child {
    border-right: none; /* 最後の列は右線なし */
}

.feature-icon-svg {
  	width:40px;
	height:40px;
	margin:0 auto;
    margin-bottom: 15px;
}

.feature-icon-svg img{
	width:100%;
	height:100%;
}

.feature-title {
    font-size: 12px;
    font-weight: normal;
    color: var(--text-color);
    margin: 0 0 10px 0;
    letter-spacing: 0.05em;
}

.feature-desc {
    font-size: 10px;
    line-height: 1.6;
    color: var(--text-light);
    margin: 0;
}

/* ========================================================
   テクノロジー＆成分エリア
======================================================== */
.ingredients-section {
    background-color: var(--bg-color);
}

/* 1. リポソーム技術 */
.tech-summary-box {
    background: linear-gradient(135deg, #fcfbf9 0%, #f5f2eb 100%);
    border: 1px solid #e0d5c1;
    padding: 50px 40px;
    text-align: center;
    margin-bottom: 60px;
}

.tech-sub-en {
    font-family: "Didot", "Bodoni MT", "Times New Roman", serif;
    font-size: 16px;
    color: #bfa87a;
    letter-spacing: 0.15em;
    margin: 0 0 10px 0;
}

.tech-main-title {
    font-size: 22px;
    font-weight: normal;
    letter-spacing: 0.1em;
    margin: 0 0 25px 0;
}

.tech-desc {
    font-size: 14px;
    line-height: 2;
    color: var(--text-color);
    margin: 0;
}

/* 2. 3つのキー成分 */
.key-ingredients-title {
    text-align: center;
    font-size: 20px;
    font-weight: normal;
    letter-spacing: 0.1em;
    margin: 0 0 40px 0;
}

.ingredients-grid {
    display: flex;
    gap: 20px;
    margin-bottom: 60px;
}

.ingredient-card {
    flex: 1;
    background-color: #ffffff;
    border: 1px solid #e0d5c1;
    padding: 40px 30px;
    text-align: center;
}

.ing-number {
    display: block;
    font-family: "Didot", "Bodoni MT", "Times New Roman", serif;
    font-size: 24px;
    color: #bfa87a;
    margin-bottom: 15px;
}

.ing-number::after {
    content: '';
    display: block;
    width: 20px;
    height: 1px;
    background-color: #bfa87a;
    margin: 10px auto 0;
}

.ing-name-en {
    font-family: "Didot", "Bodoni MT", "Times New Roman", serif;
    font-size: 24px;
    font-weight: normal;
    margin: 0 0 5px 0;
}

.ing-name-ja {
    font-size: 10px;
    color: var(--text-light);
    letter-spacing: 0.05em;
    margin: 0 0 20px 0;
}

.ing-desc {
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-color);
    margin: 0;
}

/* 3. フォーミュラ（処方）ボックス */
.formula-box {
    background-color: #faf8f5;
    border: 1px solid #e0d5c1;
    padding: 50px;
}

/* NMN x NAD+ */
.formula-synergy {
    text-align: center;
    border-bottom: 1px solid #e0d5c1;
    padding-bottom: 40px;
    margin-bottom: 40px;
}

.synergy-label {
    display: inline-block;
    background-color: #bfa87a;
    color: #ffffff;
    font-size: 11px;
    padding: 4px 15px;
    border-radius: 20px;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
}

.synergy-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-bottom: 15px;
}

.synergy-item strong {
    display: block;
    font-family: "Didot", "Bodoni MT", "Times New Roman", serif;
    font-size: 28px;
    font-weight: normal;
    color: var(--text-color);
}

.synergy-item span {
    display: block;
    font-size: 10px;
    color: #bfa87a;
    letter-spacing: 0.05em;
}

.synergy-cross {
    font-size: 24px;
    color: #bfa87a;
}

.synergy-note {
    font-size: 10px;
    color: var(--text-light);
}

/* 5つのフリー */
.free-policy-title {
    text-align: center;
    font-size: 14px;
    letter-spacing: 0.1em;
    margin: 0 0 30px 0;
}

.free-list {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.free-list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 11px;
    color: var(--text-color);
    text-align: center;
    line-height: 1.4;
    letter-spacing: 0.05em;
}

/* CSSで描く斜め線入りの丸アイコン（フリーマーク） */
.free-icon {
    width: 36px;
    height: 36px;
    border: 1px solid #bfa87a;
    border-radius: 50%;
    position: relative;
    margin-bottom: 10px;
}

.free-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 15%;
    width: 70%;
    height: 1px;
    background-color: #bfa87a;
    transform: rotate(-45deg);
}

/* ========================================================
   フッター
======================================================== */
.footer {
    background-color: var(--bg-color);
    border-top: 1px solid var(--silver-line);
    padding: 40px 0;
    text-align: center;
}

.copyright {
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--text-light);
}

/* ========================================================
   ラグジュアリー・アニメーション（スクロール連動）
======================================================== */
/* 下から上へゆっくり浮かび上がる */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    /* cubic-bezierで「最初は少し早く、最後はゆっくり止まる」高級な動きを表現 */
    transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 単純にゆっくり浮き出る（画像など用） */
.fade-in {
    opacity: 0;
    transition: opacity 1.5s ease-out;
}

/* 順番に表示させるための遅延（ディレイ）クラス */
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }
.delay-3 { transition-delay: 0.6s; }

/* JSで付与されるクラス（画面に入ったら発火） */
.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.fade-in.is-visible {
    opacity: 1;
}

/* ========================================================
   FAQエリア (アコーディオン)
======================================================== */
.faq-section {
    background-color: var(--bg-color);
}

.faq-container {
    max-width: 800px; /* 横幅を広げすぎないことで文字を読みやすく、上品に */
}

.faq-accordion {
    border-top: 1px solid var(--silver-line);
}

.faq-item {
    border-bottom: 1px solid var(--silver-line);
}

/* 質問部分のボタンデザイン */
.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-mincho);
    color: var(--text-color);
    text-align: left;
    transition: background-color 0.4s ease;
}

.faq-question:hover {
    background-color: #faf8f5; /* ホバー時にうっすらベージュに */
}

.faq-q-mark {
    font-family: "Didot", "Bodoni MT", "Times New Roman", serif;
    font-size: 22px;
    color: #bfa87a; /* ゴールド */
    margin-right: 20px;
}

.faq-q-text {
    flex: 1;
    font-size: 15px;
    letter-spacing: 0.1em;
    line-height: 1.6;
}

/* 開閉アイコン（＋と－）をCSSのみで描画 */
.faq-toggle-icon {
    position: relative;
    width: 16px;
    height: 16px;
    margin-left: 20px;
    flex-shrink: 0;
}

.faq-toggle-icon::before,
.faq-toggle-icon::after {
    content: '';
    position: absolute;
    background-color: #999999;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

/* 横線 */
.faq-toggle-icon::before {
    top: 7px;
    left: 0;
    width: 16px;
    height: 1px;
}
/* 縦線 */
.faq-toggle-icon::after {
    top: 0;
    left: 7px;
    width: 1px;
    height: 16px;
}

/* 開いた状態（is-open）の時は縦線を回転・透明にして「－」にする */
.faq-item.is-open .faq-toggle-icon::after {
    transform: rotate(90deg);
    opacity: 0;
}

.faq-item.is-open .faq-question {
    background-color: #faf8f5; /* 開いている間は背景色をキープ */
}

/* 回答部分のラッパー（高さのアニメーション用） */
.faq-answer-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* 上品に滑らかに開く */
}

.faq-answer {
    display: flex;
    padding: 0 20px 40px 20px;
    background-color: #faf8f5;
}

.faq-a-mark {
    font-family: "Didot", "Bodoni MT", "Times New Roman", serif;
    font-size: 22px;
    color: var(--text-light);
    margin-right: 20px;
}

.faq-a-text {
    flex: 1;
    font-size: 14px;
    line-height: 2;
    color: var(--text-color);
    letter-spacing: 0.08em;
    margin: 0;
}

/* ========================================================
   レスポンシブ対応（スマートフォン向け）
======================================================== */
@media (max-width: 768px) {
    /* 共通・余白調整 */
    .section-padding {
        padding: 60px 0;
    }
    .section-title {
        font-size: 20px;
        margin-bottom: 40px;
    }

    /* ヘッダー */
    .header-inner {
        flex-direction: column;
        padding: 15px;
        gap: 15px;
    }
    
    /* ヒーローエリア */
    .hero-section {
        height: auto;
        min-height: auto;
        display: flex;
        flex-direction: column; /* 画像の下にテキストを縦並びにする */
        background-image: none;
    }
    .hero-section img {
        width: 100%;
        height: auto;
        margin-top: 0; /* PC用のマイナスマージンをリセット */
        display: block;
    }
    .hero-content {
        position: static; /* 絶対配置を解除して通常配置に戻す */
        width: 100%;
        padding: 50px 20px 60px; /* 上下左右の余白をゆったりとる */
        text-align: center; /* 中央揃えに変更 */
        box-sizing: border-box;
    }
    .hero-logo {
        font-size: 42px;
        margin-bottom: 25px;
    }
    .hero-catchphrase-main {
        font-size: 15px;
        line-height: 2.2;
        border-left: none; /* 中央揃えに合わせるため、左のゴールド線を消す */
        padding-left: 0;
        text-align: center;
        letter-spacing: 0.15em;
    }

    /* コンセプトエリア */
    .feature-bar {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
        padding: 30px;
    }
    .concept-block, 
    .concept-block.block-reverse {
        display: flex;
        flex-direction: column; /* 横並びを縦並びに変更 */
    }

	.concept-block .concept-image {
        order: 1; /* 画像を必ず1番目（上）にする */
    }
    .concept-block .concept-text-box {
        order: 2; /* テキストを必ず2番目（下）にする */
    }
    .concept-image,
    .concept-text-box {
        width: 100%; /* 幅を100%に */
    }
    .concept-text-box {
        padding: 50px 20px; /* スマホ用に余白を調整 */
    }

    /* メッセージエリア */
    .message-container {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    .message-en {
        text-align: center;
        font-size: 24px;
    }
    .message-divider {
        width: 1px;
        height: 50px;
    }
    .message-ja {
        text-align: center;
    }

    /* プロダクトエリア（クラス名修正含む） */
    .products-wrapper {
        flex-direction: column;
        gap: 70px;
    }
    .product-box,
    .product-box:nth-child(even) {
        flex-direction: column; /* スマホではジグザグを解除して全て縦並びに */
        gap: 30px;
        text-align: center;
        padding: 0;
    }
    .product-box-image {
        width: 100%;
        padding: 60px 20px;
        margin: 0;
    }

	.product-box-text {
        width: 100%;
        padding: 0 20px;
        align-items: center; /* テキストも中央寄せ */
    }

	.product-name-en {
        font-size: 32px; /* スマホでも十分なインパクトが出る大きさに */
    }

    /* コアテクノロジーエリア */
    .core-tech-content {
        flex-direction: column;
        gap: 50px;
    }
    .tech-title-jp {
        font-size: 24px;
    }
    .tech-lead {
        font-size: 18px;
    }
    .tech-feature-card {
        padding: 25px 20px 25px 60px;
    }
    .tech-feature-num {
        left: 20px;
        top: 25px;
        font-size: 20px;
    }

    /* おすすめターゲットエリア */
    .recommend-box {
        padding: 30px 20px;
    }
    .recommend-all {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    .recommend-all-text {
        text-align: center;
    }
    .recommend-grid {
        flex-direction: column; /* 2カラムを1カラムに変更 */
    }

    /* HOW TO USE エリア */
    .how-to-intro {
        padding: 60px 20px;
    }
    .step-card {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
        gap: 20px;
    }
    .step-guide {
        justify-content: center;
    }
    .advice-card {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
    }
    .features-box {
        flex-direction: column; /* 3つの特徴を縦並びに */
    }
    .feature-col {
        border-right: none;
        border-bottom: 1px solid #e0d5c1;
    }
    .feature-col:last-child {
        border-bottom: none;
    }

    /* テクノロジー＆成分エリア */
    .tech-summary-box {
        padding: 40px 20px;
    }
    .ingredients-grid {
        flex-direction: column; /* 3つの成分を縦並びに */
    }
    .formula-box {
        padding: 40px 20px;
    }
    .synergy-flex {
        flex-direction: column;
        gap: 15px;
    }
    .free-list {
        gap: 20px;
    }

	/* FAQエリア（スマホ用） */
    .faq-question {
        padding: 25px 15px;
    }
    .faq-q-text {
        font-size: 14px;
    }
    .faq-answer {
        padding: 0 15px 30px 15px;
    }
    .faq-q-mark,
    .faq-a-mark {
        margin-right: 15px;
        font-size: 20px;
    }
}

/* =========================================================
   ローディング画面
========================================================= */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #FFFFFF; /* 白基調をキープ */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  /* 滑らかにフェードアウトさせるための設定 */
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

/* JSで付与される非表示クラス */
#loading-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
}

/* --- ロゴのサイズと配置 --- */
.logo-container {
  position: relative;
  width: 160px;  /* 全体のバランスを見てサイズ調整 */
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-logo {
  width: 55%; /* 六角形の内側に上品に収まるサイズ */
  height: auto;
  z-index: 2;
  /* ほんの少しだけ鼓動するようなエフェクトで高級感を演出 */
  animation: pulseLogo 2.5s infinite alternate ease-in-out; 
}

/* --- SVG六角形のアニメーション --- */
.hex-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hex-base {
  fill: none;
  stroke: rgba(166, 139, 91, 0.15); /* うっすら見えるベースの線（薄いゴールド） */
  stroke-width: 10;
}

.hex-light {
  fill: none;
  stroke: rgb(166, 139, 91); /* 光る部分（ゴールド） */
  stroke-width: 12;
  stroke-linecap: round; /* 光の先端を丸くして上品に */
  /* 線の長さと隙間を指定して光の長さを決定 */
  stroke-dasharray: 400 2400; 
  /* アニメーションの実行 */
  animation: runLight 2.5s linear infinite;
}

@keyframes runLight {
  0% { stroke-dashoffset: 2800; }
  100% { stroke-dashoffset: 0; }
}

@keyframes pulseLogo {
  0% { transform: scale(0.97); opacity: 0.8; }
  100% { transform: scale(1.03); opacity: 1; }
}

@keyframes runLight {
  0% { stroke-dashoffset: 3000; }
  100% { stroke-dashoffset: 0; }
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0; }
  20%, 80% { opacity: 1; filter: blur(0); }
}
        
.en { font-family: 'Playfair Display', serif; }
        
/* ふわっと表示させるアニメーション */
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(20px); }
   to { opacity: 1; transform: translateY(0); }
}

.fade-in {
	animation: fadeIn 1.5s ease-out forwards;
}