@charset "UTF-8";
html {
    scroll-behavior: smooth;
}
.johnniewalker-top,
.johnniewalker-menu,
#history,
#howto,
#scotch,
.redryefinish {
    margin: 0;
    padding: 0;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #fcf5df;
}
/* ーーーー　トップページ ーーーー　*/
.johnniewalker-top {
    background-image: url(/img/liquor/johnniewalker/bg-img01.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    width: 100%;
}
.top-item {
    margin-top: 50px;
    margin-bottom: 50px;
}
/* --- スマホのみ表示　画像を消しておく --- */
.item-sp-top {
    display: none;
}
/* トップの横並び */
.top-wrapper {
    display: flex;
    justify-content: center;
    /* 中央に寄せる */
    align-items: flex-end;
    gap: 20px;
    /* 要素間のスキマ */
}
.top-item img {
    width: 100%;
    height: auto;
    display: block;
}
.item-warker {
    width: 20%;
    /* キープウォーキングイラストのサイズ */
}
.item-redyrefinish {
    width: 13%;
    /* 商品画像のサイズ */
}
.item-tilte {
    width: 35%;
    /* 商品名（ボタン付き）のサイズ */
    margin-top: 200px;
}
.item-tilte img {
    margin-bottom: 20px;
}
.top-item picture img {
    width: 100%;
    height: auto;
    display: block;
}
/* 購入ボタンの装飾 */
.buy_button a {
    background: linear-gradient(to right, #060606 50%, #dc0000 50%);
    background-size: 200% 100%;
    background-position: left;
    color: #ffffff;
    border-radius: 6px;
    text-decoration: none;
    transition: background-position 0.4s ease, color 0.4s ease;
    width: 200px;
    text-align: center;
    font-size: 20px;
    justify-content: center;
    display: inline-block;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    margin-top: 10px;
}
.buy_button a:hover {
    background-position: right;
}
/* トップの横並び　ここまで */
/* ーーーー　メニューボタン　ーーーー */
.johnniewalker-menu {
    background: linear-gradient(180deg, #a90000 0%, #000000 100%);
}
.menu-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 150px;
    display: flex;
    justify-content: space-between;
    gap: 50px;
}
.menu-item {
    flex: 1;
    /* 3つの幅を完全に均等にする */
    text-align: center;
}
.menu-item img {
    width: 100%;
    /* 親の menu-item の幅いっぱいに広げる */
    height: auto;
    max-width: 320px;
    /* 画像が大きくなりすぎないよう制限（任意） */
    transition: transform 0.3s;
    /* マウスを乗せた時の動き用 */
}
.menu-item img:hover {
    transform: translateY(-5px);
    /* マウスを乗せた時に少し浮く */
    opacity: 0.8;
}
/* メニューボタンここまで*/
/* ーーーー　ジョニーウォーカーの歴史　ーーーー　*/
#history {
    background-color: #000000;
}
.johnniewalker-h1 {
    color: #fcf5df;
    border: 1px solid #fcf5df;
    text-align: center;
    margin: 0 auto 50px;
    font-size: 35px;
    padding: 10px 50px;
    width: fit-content;
    /* 中身の幅（文字数）に合わせる */
}
#history .hightlight {
    display: inline-block;
    background: linear-gradient(transparent 60%, #a22128 50%);
    font-weight: 500;
    font-size: 130%;
    margin-bottom: 10px;
}
.history-content {
    /* 全体のコンテナ */
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 20px;
}
.history-block {
    /* 各ブロックの基本設定 */
    display: flex;
    gap: 60px;
    margin-bottom: 80px;
    align-items: flex-start;
    /* 上揃え */
}
/* --- Block 01 (創業と品質) の調整 --- */
.block-01 .history-img {
    width: 30%;
    /* 画像を小さく */
}
.block-01 .history-text {
    width: 70%;
    /* 文章の幅を広げる */
}
/* --- Block 02 (世界への拡大) の調整 --- */
.block-02 .history-img {
    width: 60%;
    /* 画像を大きく */
    margin-top: -30px;
    /* 画像を上に上げる（マイナスマージン） */
}
.block-02 .history-text {
    width: 40%;
    /* 文章の幅を狭める */
    margin-top: 50px;
}
/* --- Block 03 (ブランドの確立) の調整 --- */
.block-03 .history-img {
    width: 40%;
    /* 画像を大きく */
    margin-top: 70px;
    /* 画像を上に上げる（マイナスマージン） */
}
.block-03 .history-text {
    width: 60%;
    /* 文章の幅を狭める */
    margin-top: 150px;
}
/* 画像が親要素に追従するように */
.history-img img {
    width: 100%;
    height: auto;
}
/* 右側に写真が来るスタイル（反転設定） */
.right-style {
    flex-direction: row-reverse;
}
#history .text {
    line-height: 1.8;
    /* テキストの装飾 */
    margin-bottom: 20px;
    font-size: 18px;
    text-align: justify;
}
/* ジョニーウォーカーの歴史ここまで*/
/* ーーーー世界一のスコッチを製造する　ウイスキーの製造工程ーーーー */
.howto-wrapper {
    background-color: #42210b;
}
.howto-main-img {
    max-width: 1200px;
    padding-top: 100px;
    padding-bottom: 50px;
    margin: auto;
}
#howto .johnniewalker-h2 {
    font-size: 30px;
    text-align: center;
    padding-bottom: 20px;
}
#howto .text {
    max-width: 800px;
    margin: auto;
    font-size: 18px;
    padding-top: 20px;
    padding-bottom: 80px;
    text-align: justify;
}
.howto-wrapper-process {
    background-color: #f0666c;
    padding-top: 80px;
    padding-bottom: 80px;
}
.howto-wrapper-process .johnniewalker-h1 {
    color: #000;
    border: 1px solid #000;
}
/* ウイスキーの製造工程　横スクロール */
.scroll-container {
    display: flex;
    /* 横並びにする */
    overflow-x: auto;
    /* 横方向にスクロール可能にする */
    gap: 80px;
    padding: 20px;
    scroll-snap-type: x mandatory;
    /* スナップ機能（カチッと止まる） */
    -webkit-overflow-scrolling: touch;
    /* iOSでのスクロールを滑らかに */
    margin-left: 100px;
    padding-right: 100px;
    padding-bottom: 50px;
}
/* スクロールバーの通り道 */
.scroll-container::-webkit-scrollbar {
    height: 8px;
    /* 横スクロールバーの高さ */
}
/* スクロールバーの背景（レール部分） */
.scroll-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    /* ほとんど見えないくらいの薄いグレー */
    border-radius: 10px;
}
/* 動くつまみ部分 */
.scroll-container::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    /* 薄い黒 */
    border-radius: 10px;
}
.scroll-item {
    flex: 0 0 350px;
    /* 幅固定（縮ませない） */
    scroll-snap-align: start;
    /* スクロールした時に先頭で止まる */
    overflow: hidden;
}
.scroll-item img.process-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 30px;
    object-fit: cover;
    /* 画像の歪み防止 */
    padding-bottom: 10px;
}
.scroll-item h3 {
    margin: 0 0 10px;
    font-size: 20px;
    color: #000;
}
.scroll-item p {
    font-size: 15px;
    line-height: 1.6;
    color: #000;
    text-align: justify;
}
/* ウイスキーの製造工程　横スクロール　ここまで */
/* ーーーー　スコッチウイスキーとは　ここから　ーーーー*/
#scotch {
    background-image: url(/img/liquor/johnniewalker/bg-img02.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    padding-top: 80px;
    padding-bottom: 80px;
    width: 100%;
}
/* スコッチウイスキーの紹介文 */
#scotch .scotch-text {
    max-width: 800px;
    margin: auto;
    font-size: 18px;
    padding-top: 20px;
    padding-bottom: 10px;
    text-align: justify;
    line-height: 1.8;
}
/* スコッチウイスキーとはのコンテナ */
.scotch-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 20px;
    color: #fcf5df;
    /* 文字色（これまでの流れに合わせる場合） */
}
/* スコッチウイスキーのひとつめのテキスト */
.scotch-first {
    width: 600px;
    margin-top: -250px;
}
.scotch-first h4 {
    text-align: left;
}
/* --- 縦並びセクションの微調整 --- */
.scotch-img-08,
.scotch-img-09 {
    display: block;
    margin: 0 auto;
    /* 基本は中央 */
}
.scotch-img-08 {
    width: 500px;
    margin-left: 100px;
}
.scotch-img-09 {
    width: 350px;
    margin-top: -200px;
    margin-bottom: 50px;
    margin-right: 100px;
}
.scotch-first {
    text-align: center;
    margin-bottom: 100px;
}
/* --- 横並びセクションの共通設定 --- */
.scotch-second {
    display: flex;
    align-items: center;
    /* 上下中央揃え */
    gap: 60px;
    margin-bottom: 80px;
}
.scotch-third {
    display: flex;
    align-items: center;
    /* 上下中央揃え */
    gap: 120px;
    margin-bottom: 80px;
}
.scotch-second img {
    width: 45%;
    /* 画像の幅 */
    height: auto;
}
.scotch-third img {
    width: 35%;
    /* 画像の幅 */
    height: auto;
}
.scotch-second .text-box {
    width: 55%;
    /* 文字の幅 */
}
.scotch-third .text-box {
    width: 65%;
}
/* --- scotch-third だけ左右を入れ替える --- */
.scotch-third {
    flex-direction: row-reverse;
    /* これで画像が右、文字が左になります */
}
.scotch-container h4 {
    font-size: 24px;
    line-height: 1.5;
    margin-bottom: 20px;
}
.scotch-container p {
    font-size: 18px;
    line-height: 1.8;
    text-align: justify;
}
.scotch-keeprogo {
    width: 800px;
    margin-left: 100px;
    margin-bottom: -150px;
}
/* ---------レッドライフィニッシュの購入----------- */
.redryefinish {
    background-color: #fcf5df;
}
.product-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 30px;
    padding-top: 80px;
    padding-bottom: 100px;
}
.product-item img {
    width: 100%;
    height: auto;
    display: block;
}
.item-limited {
    width: 10%;
    transform: rotate(-10deg);
    /* 「数量限定」画像のサイズ */
    align-self: flex-start;
    margin-top: 30px;
}
.item-redrye {
    width: 15%;   /* 商品画像のサイズ */
}
.item-main {
    width: 30%;   /* 商品名（ボタン付き）のサイズ */
    margin-top: 0;
}
.item-main img {
    margin-bottom: 20px;
}
/* 最終ページ ここまで*/
.sp-br {
    display: none;
    /* PCは改行しない */
}
/* ----------------------------------
スマートフォンここから
---------------------------------- */
@media screen and (max-width: 768px) {
    .sp-br {
        display: inline;
        /* spは改行する */
    }
    /* ーーーー　トップページ ーーーー　*/
    .top-wrapper {
        flex-direction: column;
        /* 縦並びにする */
        align-items: center;
        /* 基本はセンター揃え */
        gap: 0;
        /* 隙間は各アイテムのmarginで調整 */
    }
    .top-item {
        margin: 0;
        /* 一旦リセット */
        width: 80%;
        /* 基本の幅 */
    }
    .johnniewalker-top {
        height: auto;
        /* スマホでは縦に伸びるため */
        padding-bottom: 50px;
    }
    .johnniewalker-top .top-wrapper .item-sp-top {
        display: block;
        order: 1;
        /* 順番の入れ替え（orderプロパティ） */
        width: 55%;
        margin-top: 50px;
    }
    .johnniewalker-top .top-wrapper .item-redyrefinish {
        width: 27%;
        order: 2;
        margin-top: 20px;
    }
    .johnniewalker-top .top-wrapper .item-warker {
        width: 37%;
        margin-top: -190px;
        margin-left: 10px;
        order: 3;
        align-self: flex-start;
        /* これで左寄せ */
    }
    .johnniewalker-top .top-wrapper .item-tilte {
        order: 4;
        width: 70%;
        text-align: center;
    }
    /* ーーーー　トップページ ここまで　ーーーー　*/
    /* ーーーー　メニューボタン　ーーーー　*/
    .menu-container {
        width: 90%;
        padding-top: 20px;
        padding-bottom: 50px;
        gap: 10px;
    }
    /* ーーーー　ジョニーウォーカーの歴史　ーーーー　*/
    /* 1. 全体のコンテナの余白を調整 */
    .history-content {
        padding: 40px 10px;
    }
    /* 2. 各ブロックを縦並びにする */
    .history-block {
        flex-direction: column !important;
        /* 強制的に縦並びにする */
        gap: 20px;
        /* 画像と文字の間隔を狭める */
        margin-bottom: 60px;
        /* ブロックごとの間隔 */
        align-items: center;
        /* 中央揃え */
    }
    /* 3. 画像とテキストの幅を100%にリセット */
    .block-01 .history-text,
    .block-02 .history-img,
    .block-02 .history-text,
    .block-03 .history-text {
        width: 90%;
        margin: 0 auto;
        text-align: left;
    }
    .block-01 .history-img,
    .block-03 .history-img {
        width: 60%;
        margin: 0 auto;
    }
    .johnniewalker-h1 {
        width: 80%;
        font-size: 21px;
        padding: 10px 20px;
    }
    #history .hightlight {
        font-size: 110%;
        /* スマホで見ると大きすぎることがあるため微調整 */
    }
    #history .text {
        line-height: 1.8;
        /* テキストの装飾 */
        margin-bottom: 10px;
        font-size: 15px;
    }
    /* --------- 世界一のスコッチを製造する・ウイスキーの製造工程-------　*/
    .howto-main-img {
        width: 100%;
        padding-top: 0;
        padding-bottom: 20px;
    }
    #howto .johnniewalker-h2 {
        font-size: 22px;
        padding: 0 20px 10px;
    }
    #howto .text {
        width: 90%;
        font-size: 15px;
        line-height: 1.8;
        padding-bottom: 40px;
        /* 下のセクションとの間隔 */
    }
    .howto-wrapper-process {
        /* 背景色にイラスト画像の位置調整 */
        background-size: 40%;
        background-position: right 10px bottom 20px;
        padding-top: 50px;
        padding-bottom: 90px;
    }
    /* 横スクロール */
    .scroll-container {
        scrollbar-width: none;
        /* バーを消す */
        gap: 50px;
        /* アイテム間の隙間 */
        padding: 20px;
        margin-left: 10px;
        padding-right: 20px;
        padding-bottom: 10px;
    }
    .scroll-container::-webkit-scrollbar {
        display: none;
        /* バーを消す */
    }
    .scroll-item {
        flex: 0 0 200px;
    }
    /* ---------ブレンデッドスコッチウイスキーとは----------- */
    #scotch {
        background-attachment: scroll;
    }
    .scotch-container h4 {
        font-size: 20px;
        line-height: 1.5;
        margin-bottom: 10px;
    }
    .scotch-container p {
        font-size: 15px;
    }
    #scotch .scotch-text {
        font-size: 15px;
        width: 90%;
        padding-top: 0;
        padding-bottom: 0;
    }
    .scotch-second,
    .scotch-third {
        flex-direction: column;
        /* スマホでは縦に並べる */
        gap: 20px;
    }
    .scotch-second img,
    .scotch-second .text-box,
    .scotch-third .text-box {
        width: 90%;
        /* 幅をいっぱいにする */
    }
    .scotch-third img {
        width: 60%;
    }
    .scotch-img-08 {
        width: 60%;
        margin-left: 10px;
    }
    .scotch-img-09 {
        width: 50%;
        margin-top: -80px;
        margin-bottom: 50px;
        margin-right: 10px;
    }
    .scotch-first {
        width: 90%;
        margin: 0 auto 50px;
        /* PC版の-250pxをリセット */
        text-align: left;
    }
    .scotch-keeprogo {
        width: 90%;
        margin: auto;
        margin-bottom: -120px;
    }
    /* ---------レッドライフィニッシュの購入----------- */
    /* 1. コンテナを縦並びにする */
    .product-wrapper {
        flex-direction: column;
        align-items: center;
        /* 中央揃え */
        gap: 40px;
        /* 各アイテム間の隙間 */
        padding-top: 50px;
        padding-bottom: 50px;
    }
    /* 2. 各アイテムの幅と余白をリセット */
    .product-item {
        width: 80% !important;
        /* 基本の幅 */
        margin: 0 auto !important;
        /* PC版の大きなマージンをリセット */
    }
    .item-limited {
        width: 25% !important;
        /* 少しサイズを調整 */
        margin-bottom: -250px !important;
        /* 下の画像(ボトル)を上に引き寄せる */
        margin-left: 30px !important;
        /* 左に突き出させる */
        align-self: center;
        /* 一旦センターに置いてからmarginでズラす */
        z-index: 2;
        /* ボトルの上に重なるようにする */
        transform: rotate(-10deg);
        /* 10度左に傾ける */
    }
    .item-redrye {
        padding-top: 120px;
        width: 40% !important;
        position: relative;
        z-index: 1;
    }
    .item-main {
        width: 80% !important;
        /* 商品名とボタンは少し大きく */
        text-align: center;
    }
    /* ボタンをスマホで押しやすく */
    .item-main .buy_button a {
        width: 100%;
        max-width: 250px;
        box-sizing: border-box;
    }
    /* ----------全体の幅を90％に調整---------- */
    /* 1. 各セクションの余白と幅を統一リセット */
    #history,
    .howto-wrapper,
    #scotch {
        width: 100%;
        /* 背景は端まで */
        padding-left: 0;
        /* 外側のパディングを一旦ゼロに */
        padding-right: 0;
    }
    /* 2. 中身のテキストコンテナを 90% に統一 */
    .history-content,
    .howto-wrapper .text,
    #howto .johnniewalker-h2,
    #scotch .scotch-text,
    .scotch-container {
        width: 90% !important;
        max-width: none !important;
        /* PC版の800px制限などを解除 */
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* 3. 個別要素の微調整 */
    /* 歴史セクション：中身のブロックも幅100%にする */
    .history-block {
        width: 100% !important;
    }
    .history-text {
        width: 100% !important;
        /* コンテナ(90%)内での幅 */
    }
    /* スコッチセクション：画像やテキストボックスの幅を揃える */
    .scotch-first,
    .scotch-second .text-box,
    .scotch-third .text-box {
        width: 100% !important;
        /* 親(90%)に対して一杯に広げる */
    }
    /* 画像：左右にはみ出さないように調整 */
    .history-img,
    .scotch-second img,
    .scotch-third img {
        max-width: 100%;
    }
}