@charset "utf-8";
/* リセットCSS */

#vdbanner {
    width: 0;
    height: 0;
}

*,
::before,
::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

img {
    vertical-align: bottom;
}

/* ====== カラー変数 ====== */
:root {
    --tokusa: #3b7960;
    /* 木賊色 */
    --kurenai: #e95464;
    /* 韓紅 */
    --murasaki: #9d5b8b;
    /* 京紫 */
    --bg-light: #fbfaf5;
    /* 生成り色 */
    --text-dark: #010f01;
    /* 濃い緑文字 */
}

/* =======================================
   左右縦グラデーション帯
======================================= */
.left-band,
.right-band {
    position: fixed;
    /* 常時表示（画面に固定） */
    top: 0;
    height: 100vh;
    /* ビューポート全高に追従 */
    width: calc(100vw / 8);
    /* 1/8 を自動算出 */
    z-index: 0;
    /* コンテンツより奥に */
    pointer-events: none;
    /* クリックを邪魔しない */
    opacity: 0.3;
    /* 透明度30% */
}

.left-band {
    left: 0;
    background: linear-gradient(to bottom, var(--tokusa), var(--kurenai));
}

.right-band {
    right: 0;
    background: linear-gradient(to bottom, var(--tokusa), var(--kurenai));
}

/* =======================================
   全体・中央コンテンツ
======================================= */
body {
    font-family: "游明朝", "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: #fbfaf5;
}

.page {
    width: calc(100vw * 6 / 8);
    /* 中央6/8 = 75% の幅 */
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    /* グラデーションより手前 */
    box-sizing: border-box;
    /* 横にはみ出さないように内側に余白 */
    padding: 0 7.5px;
}

.content {
    padding: 0 20px;
    /* hero以外の中央コンテンツに内側余白 */
}

/* =======================================
   ヘッダー
======================================= */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    /* 初期高さ */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    z-index: 10;
    font-size: 20px;

    /*　動いた時の背景半透明 + ぼかし */
    background-color: rgba(251, 250, 245, 0.6);
    /* 生成り色30%透過 */
    backdrop-filter: blur(6px);
    /* 背景ぼかし */
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.site-header {
    transition: height 0.3s ease;
}

.site-header nav {
    margin-top: 50px;
    /* 上から20px下げる */
    width: calc(4.5/ 7.5);
}


.site-header .logo img {
    width: 90px;
    /* 初期サイズ */
    height: 90px;
    transition: all 0.3s ease;
    /* 0.3秒かけて変化 */
}

.site-header .logo img {
    display: block;
    width: 90px;
    height: 90px;
    object-fit: contain;
}

.site-header nav ul.primary {
    display: flex;
    gap: 16px;
}


/* ヘッダー・フッターのナビに点を追加 */
.site-header nav ul.primary li::before,
footer nav ul.primary li::before {
    content: "●";
    display: inline-block;
    /* li内に表示 */
    width: 0.2em;
    /* 点の幅を確保 */
    margin-right: 8px;
    /* 点とテキストの間隔 */
    font-size: 0.3em;
    /*点のサイズ調整*/
    vertical-align: middle;
    /* 文字の中心に揃える */
}

.site-header nav a.current {
    background: linear-gradient(to bottom, var(--kurenai), var(--murasaki));
    /* border-radius: 15px 15px 0 0; */
    color: #fff;
    display: inline-flex;
    /* 高さを制御しやすくする */
    align-items: center;
    /* 文字を縦中央に */
    justify-content: center;
    /* 横中央揃え */
    height: 30px;
    /* ヘッダーの高さに合わせる */
    padding: 0 30px;
    /* 横余白 */
    box-sizing: border-box;
    /* 高さをpadding込みで調整 */
}



/* =======================================
   HERO
======================================= */
.hero {
    position: relative;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    color: var(--bg-light);
    overflow: hidden;
    background: url("./image/HERO.png") no-repeat center center;
    background-size: cover;
    /* 余白なく全体を埋める */
    margin-bottom: 40px;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2));
    z-index: 1;
}

.hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px;
}


.hero-inner .line-top {
    align-self: flex-start;
    /* 左寄せ */
    padding-right: 300px;
}

.hero-inner .line-bottom {
    align-self: flex-end;
    /* 右寄せ */
    padding-left: 200px;
}


.hero h1 {
    font-family: "Cormorant Garamond", serif;
    font-size: 46px;
    line-height: 1.15;
    margin-bottom: 12px;
    text-shadow:
        0 0 6px #3b7960,
        0 0 12px #010f01;
}

.hero .lead,
.hero .welcome {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* =======================================
   about
======================================= */

.col {
    display: flex;
    gap: 40px;
    /* 2つの要素の間隔 */
    text-align: center;
    /* テキストを中央寄せ */
    margin-bottom: 20px;
    padding: 0 10px;
}

.col h4,
.topic h1 {
    position: relative;
    /* 疑似要素の基準にする */
    display: inline-block;
}

.col h4::before,
.topic h1::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 60%;
    /* テキストのやや下に配置 */
    height: 12px;
    /* 背景の高さ */
    background: #64cca299;
    z-index: -1;
    /* テキストの背面に */
    border-radius: 4px;
    /* 好みで角丸 */
}

.col p {
    font-size: 14px;
    margin-top: 15px;
    line-height: 1.8;
    /* 行幅の調整 */

}

.topic {
    text-align: center;
    margin: 30px 0;
}

.topic p {
    margin-top: 20px;
    line-height: 1.8;
    /* 行幅の調整 */

}

/* =======================================
   商品カード
======================================= */
.products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2列表示 */
    gap: 10px 20px;
    /* カード間の行と列の余白 */
    max-width: 1100px;
    /* 左右のグラデにかからない用に調整 */
    margin: 0 auto;
    /* 中央寄せ */
}

.product-card {
    display: flex;
    /* 中の画像とテキストを横並び */
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    background: #fff;
    min-height: 320px;
    box-sizing: border-box;
}

.product-card img {
    width: 45%;
    /* 左側を画像 */
    height: auto;
    object-fit: cover;

}

.product-card .meta {
    padding: 16px;
    flex: 1;
    /* 画像以外の残りスペースをテキスト */
    position: relative;
    z-index: 2;
    /* テキストは常に前面 */
    display: flex;
    flex-direction: column;
    /* 縦並び */
    gap: 14px;
    /* 上下の間隔 */
    justify-content: space-between;

}

.product-card .meta::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 中心基準に移動 */
    height: 260px;
    width: 240px;
    border-radius: 30px;
    background: linear-gradient(rgba(59, 121, 96, 0.2), rgba(233, 84, 100, 0.3));
    z-index: -1;
    /* テキストの背面に配置 */
}

.divider {
    display: block;
    width: 100%;
    /* .meta の幅いっぱい */
    border-bottom: 3.5px dotted #3b7960;
    /* 軽い点線 */
    margin: -10px 0;
    /* 上下余白で間隔を調整 */
}

/* 商品カード内テキスト調整 */
.product-card .meta h4,
.price {
    text-align: center;
    /* テキストを中央寄せ */
}

.product-title .line-top {
    align-self: flex-start;
    /* 左寄せ */
    padding-right: 150px;
}

.product-title .line-bottom {
    align-self: flex-end;
    /* 右寄せ */
    padding-left: 0px;
}

.product-card .meta-text {
    font-size: 14.5px;
    /* 基本は16px */
    line-height: 1.6;
    /* 行幅の調整 */
    max-width: 85%;
    margin: 0 auto;
}

.product-card .meta h4 {
    font-weight: 700;
    /* 最大限太く */
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
    /* 軽く影をつけて太く見せる */
}

.product-card .meta .price {
    font-weight: bold;
}

.btn-large {
    display: inline-block;
    padding: 30px 40px;
    background-color: var(--kurenai);
    color: #fff;
    font-weight: bold;
    font-size: 26px;
    border-radius: 90px;
    text-align: center;
    text-decoration: none;
    transition: all 0.5s ease;
}

.card-btm .cta {
    display: flex;
    justify-content: center;
    margin: 40px 0;
    /* 上下スペース */
}

.btn-large:hover {
    background-color: var(--murasaki);
    /* ホバーで京紫 */
    transform: translateY(-1px);
    /* 少し浮き上がる */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.cta-text {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    margin-top: 20px;
    line-height: 1.6;
}

.cta-text .dashed-line {
    display: block;
    width: 70%;
    /* 線の横幅 */
    margin: 10px auto;
    /* 上下に間隔を作る */
    border-top: 1px dashed #9d5b8b;
    /* 点線 */
}

/* =======================================
   レシピカード
======================================= */
.recipe .card-steps {
    position: relative;
    display: flex;
    max-width: 1100px;
    height: 360px;
    border-radius: 35px;
    overflow: hidden;
    background-color: var(--tokusa);
    margin: 80px auto;
    align-items: stretch;
    box-sizing: border-box;
}

.recipe .card-steps .card-img {
    width: 300px;
    height: 100%;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.recipe .card-steps .card-img img {
    width: auto;
    /* 横幅自動 */
    height: 100%;
    /* 枠の高さに合わせる */
    object-fit: cover;
}

.recipe .card-steps-inner {
    flex: 1;
    margin: 15px 30px 75px 20px;
    /* カード内生成り色のサイズ指定 */
    height: auto;
    /* 縦余白分を引く（外枠の高さに対して内側が収まる） */
    background-color: var(--bg-light);
    box-sizing: border-box;
    border-radius: 10px;
    padding: 2.5px;
    /* 内側のテキスト余白 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 0;
}

.recipe-wrapper {
    display: flex;
    justify-content: center;
    /* 横並びを中央寄せ */
    align-items: flex-start;
    /* 上揃えにする */
    gap: 30px;
    /* 材料と作り方の間隔 */
    margin-top: 20px;
}

.ingredients {
    flex: 0 0 200px;
    /* 親要素の余白、サイズに影響を受けずに基本サイズを固定*/
    text-align: center;
    margin-bottom: 70px;
}

.steps {
    flex: 1;
    /* 作り方部分は広め */
    max-width: 600px;
    text-align: center;
    transform: translateY(-50px);
    /* 上方向に50px移動 */
}

.section-title {
    font-weight: bold;
    margin-bottom: 10px;
}

.card-steps-inner h3,
.card-steps-inner h5 {
    position: relative;
    display: inline-block;
    width: max-content;
    padding-top: 10px;
    font-size: 18px;
}

.card-steps-inner h3::after,
.card-steps-inner h5::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 15px;
    /* ラインの太さ */
    background: rgba(59, 121, 96, 0.2);
    /* 半透明の木賊色 */
    z-index: -1;
}

/* ワンポイント */
.recipe .card-steps-inner .onepoint {
    position: absolute;
    bottom: 1px;
    /* 下部からの距離 */
    left: 50%;
    transform: translateX(-50%);
    background: transparent;
    /* 必要に応じて生成り色と馴染ませる */
    color: var(--text-dark);
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
    z-index: 2;
}


/* 詳しい作り方 */
.recipe-btm {
    position: absolute;
    bottom: 20px;
    /* 木賊色部分の下からの距離 */
    right: 24px;
    /* 右端からの距離 */
    display: inline-flex;
    /* 横方向に並べる＋中央揃え */
    align-items: center;
    /* 縦中央 */
    justify-content: center;
    /* 横中央（文字だけなら不要ですが念のため） */
    gap: 1px;
    /* アイコンとテキストの間隔 */
    padding: 2px 3px 3px 30px;
    /* 内側の余白 */
    color: var(--bg-light);
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 3.5px dotted #fbfaf5;
    /* 軽い点線 */
    background: rgba(255, 255, 255, 0.08);
    /* 背景を少し付ける場合 */
    z-index: 3;
    overflow: hidden;
    position: absolute;
}


.recipe-btm::after {
    content: "";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    /* アイコンサイズ */
    height: 36px;
    background-image: url('./image/link.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    top: -1px;
}

.recipe-btm::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #e954644d;
    transform: translateX(-100%);
    /* 初期状態は左に隠す */
    transition: transform 0.5s ease;
    /* スライドアニメーション */
    z-index: -1;
    /* 背景に置く */
}

/* ---------- ホバー時に韓紅スライドイン ---------- */
.recipe-btm:hover::before {
    transform: translateX(0);
    /* 左から右へスライド */
}


/* =======================================
   フッター
======================================= */

.site-footer {
    background: linear-gradient(90deg, rgba(233, 84, 100, 0.7), rgba(157, 91, 139, 0.7));
    height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.footer-top {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    margin-bottom: 20px;
}

/* ロゴ */
.site-footer .logo img {
    width: 180px;
    height: 180px;
}

/* SNSロゴ */
.SNS {
    display: flex;
    gap: 20px;
}

.SNS img {
    width: auto;
    height: 100px;
}

/* ナビ */
.site-footer nav ul {
    list-style: none;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.site-footer nav a {
    text-decoration: none;
    color: #333;
    font-size: 18px;
    font-weight: bold;
}

/* 下段: 説明文とコピーライト */
.footer-text {
    text-align: center;
    max-width: 800px;
    font-size: 14px;
    line-height: 1.6;
    color: #010f01;
    font-weight: bold;
}

.footer-text small {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: #010f01;
}