/*
Theme Name: sakekkoken
Theme URI: https://sakekokken.co.jp
Author: Reo Honjoya
Author URI: http://countercolor.tokyo
Description: 酒 国権
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sakekkokken
*/

/* common */
body {
    margin: 0;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: #333;
    background: #fff;
    position: relative;
}

.page-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;  /* 透かしを絶対配置するための基準 */
}

.watermark {
    position: fixed;
    bottom: 100px;       /* 画面下からの距離 */
    right: calc(50% - 700px);
    /*   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
         50%（画面中央） - コンテンツ半幅
         → コンテンツ右端になる仕組み
    */
    width: 364px;         /* サイズ調整自由 */
    opacity: 1.00;        /* 透かしっぽく */
    pointer-events: none; /* クリック無効で安全 */
    z-index: -2;
}

.noto-sans-jp {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  /* font-weight: <weight>; /* 100 to 900 */
}

.noto-serif-jp {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
  /* font-weight: <weight>; /* 200 to 900 */
}

a {
    position: relative;
    color: #525252;
    text-decoration: none;
}
a:not(.no-style)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0%;
    height: 1px;
    background: #525252;
    transition: 0.3s;
}
a:not(.no-style):hover::after {
    width: 100%;
}

.midashi {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 800; /* 200 to 900 */  
  font-size: clamp(24px, 2.2vw, 32px);
  display: inline-block;
  z-index: 1;
  margin-bottom: 0;
}

.midashi::before {
    content: "";
    position: absolute;
    left: -25px;
    top: 12px;
    width: 60px;
    height: 60px;
    background-color: #eee5de;  /* 色 */
    border-radius: 50%;         /* 丸になる */
    z-index: -1;
}

/* ---------- HEADER ---------- */
.header {
    padding: 10px 40px;
}

.header-inner {
    max-width: 1400px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav ul {
    display: flex;
    gap: 30px;
    list-style: none;
    font-size: clamp(18px, 1.6vw, 24px);
    font-weight: 800;
    padding: 0;
}

.nav a {
    text-decoration: none;
    color: #333;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

#google_translate_element a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0%;
    height: 0px;
    background: #525252;
    transition: 0.3s;
}
#google_translate_element a:hover::after {
    width: 100%;
}

.lang-btn {
    padding: 4px 12px;
    border: 1px solid #aaa;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    color: #333;
}

.menu-btn{
    font-size: clamp(24px, 1.8vw, 28px);
}

/* ---------- 幅に応じて調整 ---------- */
@media (max-width: 1024px) {
    .header-inner {
        flex-direction: column;
        gap: 16px;
    }

    .nav ul {
        gap: 12px;
        text-align: center;
        justify-content: center;
        flex-wrap: wrap;
    }

    .header-right {
        justify-content: center;
    }
}
/* ---------- HERO ---------- */
.hero {
    position: relative;
    width: 100%;
    height: clamp(300px, 46vw, 644px);
    overflow: hidden;
    margin: 0 auto;
}
.hero > img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;   /* 画像を綺麗にトリミング */
    top: 0;
    left: 0;
    opacity: 0;
    animation: fade 30s infinite;
}

/* ▼ 6枚分の開始タイミングをずらす */
.hero > img:nth-of-type(1) { animation-delay: 0s; }
.hero > img:nth-of-type(2) { animation-delay: 6s; }
.hero > img:nth-of-type(3) { animation-delay: 12s; }
.hero > img:nth-of-type(4) { animation-delay: 18s; }
.hero > img:nth-of-type(5) { animation-delay: 24s; }

/* ▼ フェードアニメーション */
@keyframes fade {
    0%   { opacity: 0; }
    5%   { opacity: 1; }   /* フェードイン */
    25%  { opacity: 1; }   /* 表示維持 */
    30%  { opacity: 0; }   /* フェードアウト */
    100% { opacity: 0; }
}

.hero-title {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-title img {
    height: 95%;
    width: auto;
}


/* ---------- NEWS ---------- */
.news {
    max-width: 1000px;
    margin: 30px auto 5px auto;
    position: relative;
    font-size: 16px;
    color: #525252;
}

.news-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: nowrap;
}

.news-date {
    white-space: nowrap;
}

/* ---------- 幅に応じて調整 ---------- */
@media (max-width: 600px) {
    .news-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
        margin-bottom: 12px;
    }
}


/* ---------- SNS ---------- */
.sns {
    max-width: 1000px;
    margin: 40px auto;
}

.sns-profile {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap; /* 幅に応じて折り返す */
}

.sns-name{
    font-size: clamp(22px, 1.8vw, 24px);
}

.sns-info {
    color: #525252;
    flex: 1; /* 残り幅を使って綺麗に伸びる */
}

.sns-buttons {
    align-self: flex-end;
}

@media (max-width: 975px) {

    .sns-profile {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .sns-buttons {
        align-self: flex-start;
    }
}


.sns-gallery {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
}

.sns-gallery img {
    width: 100%;
    height: auto;
}

/* ---------- BANNERS ---------- */
.banner-section {
    max-width: 1000px;
    margin: 60px auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* 幅に応じて折り返す */
}

.banner img {
    width: 100%;
}

/* ---------- VIDEO ---------- */
.video-section {
    position: relative;
    width: 100%;
    max-width: 1000px;
    aspect-ratio: 16 / 9; /* 縦横比が固定される */
    overflow: hidden;
    margin: 0 auto 60px;
}

.video-section video {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; 
    inset: 0;
}


/* ---------- FOOTER ---------- */
.footer {
    background: #6b4978;
    color: #f2d1ff;
    font-weight: 100; /* 100 to 900 */
    font-size: 16px;
    padding: 40px 0;
}

.footer-inner {
    max-width: 1000px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;    
}

.footer-nav ul {
    list-style: none;
    padding: 0;
}

.footer-nav a {
    position: relative;
    color: #f2d1ff;
    text-decoration: none;
}

.footer-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0%;
    height: 1px;
    background: #f2d1ff;
    transition: 0.3s;
}
.footer-nav a:hover::after {
    width: 100%;
}

.footer-inner img.logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.footer-right .sns-logo{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f2d1ff;
}

.sns-logo img{
    margin-top: 5px;
}

.footer-right h2{
    font-weight: 100;
    margin: 0;
}

.footer-right p{
    margin-top: 5px;
}

.copy {
    background: #301e44;
    color: #d0cbc7;
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400; /* 200 to 900 */
    text-align: center;
    font-size: 20px;
    height: 20px;
    padding: 50px 0;
}

@media (max-width: 1024px) {
    .footer-inner {
        flex-direction: column;
        gap: 30px;
        align-items: center;
        text-align: center;
    }

    /* ロゴの absolute を解除 */
    .footer-inner img.logo {
        position: static;
        transform: none;
    }

    .footer-nav ul {
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .footer-right .sns-logo {
        justify-content: center;
        gap: 20px;
        border-bottom: 1px solid #f2d1ff;
    }
}


/* -------------------------
   共通：コンテナ／ベース
   ------------------------- */

.container {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}

.container .midashi{
    font-size: clamp(24px, 2.2vw, 32px);
    margin-bottom: 10px;
}

/* 国権酒造と南会津 */
/* -------------------------
   セクション共通
   ------------------------- */
.about-section {
  margin: 40px 0;
}

/* 画像とテキストの横並び */
.about-row {
  display: flex;
  gap: 28px;
}

/* 画像部分 */
.about-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}

/* テキスト部分 */
.about-text {
  flex: 1 1 0;
  color: #261a17;
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 600; /* 200 to 900 */
  line-height: 1.4;
  font-size: 18px;
  margin: 0;
}

/* alt（入れ替え）クラスで左右反転 */
.about-section.alt .about-row {
  flex-direction: row-reverse;
}

@media (max-width: 768px) {
  .about-row {
    flex-direction: column;
    gap: 5px;
  }

  /* altでも縦並び時は順序を戻す */
  .about-section.alt .about-row {
    flex-direction: column;
  }
}

/* ギャラリー（3カラム） */
.gallery .three-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.gallery .three-grid img {
  width: 100%;
  aspect-ratio: 321 / 231;
  object-fit: cover;
  border-radius: 3px;
}

@media (max-width: 768px) {
  .gallery .three-grid {
    gap: 6px;
  }
  .gallery .three-grid figure{
    margin: 0;
  }
}
/* GI セクション */
.gi-row {
  display: flex;
  gap: 20px;
}
.gi-left {
  flex: 0 0 338px;
}
.gi-left img {
  display: block;
  width: 100%;
  height: auto;
}

.gi-right {
  flex: 1 1 0;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .gi-row {
    flex-direction: column;
    gap: 5px;
    }
}


/* 酒造り */
.page-sakagura {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 0;
    box-sizing: border-box;
}

.page-sakagura {
    background-image: url('images/process/01_Chart-BG_Sake-zukuri.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* 醸造工程のビジュアル */
.process-visual {
    max-width: 1000px;
    margin: 40px auto;
}

.process-visual img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 60px;
}

@media (max-width: 768px) {
  .process-visual {
    margin: 0 auto;
  }
  .process-visual img{
    margin-bottom: 0;
  }
}

/* ブロックレイアウト */
.topic-block {
    display: flex;
    align-items: stretch;
    max-width: 1000px;
    margin: 30px auto;
}

.topic-img{
    overflow: hidden;
}

.topic-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 3px;
}

.topic-text {
    flex: 1;
    background: rgba(255, 255, 255, 0.6); /* 白 + 60%の不透明度 */
    padding: 10px;                        /* 文字に余白 */
    display: flex;
    flex-direction: column; /* テキストの高さ調整 */
    justify-content: center;
    border-radius: 3px;
}

.topic-text h2 {
    font-size: clamp(22px, 2.1vw, 30px);
}

@media (max-width: 768px) {
  .topic-block {
    flex-direction: column;
    gap: 0px;
    margin: 20px auto;
  }
  .topic-text h2 {
    margin: 5px 0;
  }
}

/* 酒の分類表 */
.sake-table {
    width: 100%;
    margin: 30px auto;
    border-collapse: collapse;
    font-family: "Noto Serif JP", serif;
    font-size: 16px;
    color: #261A17;
}

.sake-table th {
    background: #818181;
    color: #fff;
    font-weight: 400;
    padding: 5px;
    text-align: left;
}

.sake-table td {
    padding: 5px;
    vertical-align: middle;
}

/* 偶数行に薄い背景色を付ける（画像に近い色） */
.sake-table tbody tr:nth-child(even) td {
    background: #eee5de;
}

/* 縦線（白）を入れる */
.sake-table th,
.sake-table td {
    border-right: 2px solid #f6f6f6;
}

/* 最後の列だけ右線を消す */
.sake-table th:last-child,
.sake-table td:last-child {
    border-right: none;
}

/* お燗について */
.temp-wrapper {
    display: flex;
    gap: 15px;
    align-items: flex-start; /* 上揃え */
    margin: 40px auto;
}


/* 燗酒　表 */
.temp-table {
    font-family: "Noto Serif JP", serif;
    font-size: 18px;
    font-weight: 400;
    display: flex;
    border: 1px solid #261A17;
}

.temp-col {
    width: 10%;
    text-align: center;
    border-right: 1px solid #261A17;
}

.temp-col:last-child {
    border-right: none;
}

/* 上段（温度） */
.temp-top {
    padding: 6px;
    border-bottom: 1px solid #261A17;
    color: #261A17;
    text-shadow: 
        1px 1px 1px #fff,
        -1px 1px 1px #fff,
        1px -1px 1px #fff,
        -1px -1px 1px #fff;
}

/* 下段（名称） */
.vertical-wrap {
    display: flex;
    justify-content: center; /* 横方向の中央 */
    align-items: center;     /* 縦方向の中央 */
}

.temp-bottom {
    padding: 10px 0;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    text-orientation: upright;
}

/* ▼ 各色の背景（グラデーション） */
.t5 .temp-top { background: linear-gradient(#4f3f98, #6e5fb5); }
.t10 .temp-top { background: linear-gradient(#1a74b8, #3fa6e0); }
.t15 .temp-top { background: linear-gradient(#3aa87a, #6dd3a5); }
.t20 .temp-top { background: linear-gradient(#79b248, #a9d87a); }
.t30 .temp-top { background: linear-gradient(#dab62c, #f3d872); }
.t35 .temp-top { background: linear-gradient(#e0a640, #f7c975); }
.t40 .temp-top { background: linear-gradient(#df8f2e, #f5b56a); }
.t45 .temp-top { background: linear-gradient(#d4653a, #f08c65); }
.t50 .temp-top { background: linear-gradient(#cd4933, #e87861); }
.t55 .temp-top { background: linear-gradient(#c6312c, #e15f56); }

@media (max-width: 768px) {
    .temp-wrapper {
        flex-direction: column;
        margin: 10px;
    }

    .temp-table {
        width: 100%;
        overflow-x: auto; /* 表がはみ出てもスクロールできる */
    }
}


/* 商品 */
.products {
    font-family: "Noto Serif JP", serif;
    font-size: 18px;
    font-weight: 400;    
    display: flex;
    max-width: 1000px;
    align-items: flex-start; /* 上揃え */
    margin: 40px auto;
}

nav.side ul {
    list-style: none;
    padding-left: 0; /* 左の余白も消したい場合 */
    margin: 0;
}

nav.side ul li{
    margin-bottom: 15px;
}

nav.side ul li.side_h{
    font-size: 20px;
    font-weight: 600;
    padding-top: 5px;
}

.side{
    width: 20%;
}

.index{
    width: 80%;
}

.kokken_series{
    font-size: 20px;
    font-weight: 600;
    padding: 5px 15px;
    background-color: #eee5de;
    position: relative;
}

.kokken_series::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;            /* border-bottom の太さ */
    background: #eee5de;    /* border の色 */
    bottom: -4px;           /* ← 下へずらす距離 */
}

.design_series{
    font-size: 20px;
    font-weight: 600;
    padding: 5px 15px;
    background-color: #ADCDED;
    position: relative;
}

.design_series::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;            /* border-bottom の太さ */
    background: #ADCDED;    /* border の色 */
    bottom: -4px;           /* ← 下へずらす距離 */
}

.index_line{
    display: flex;
    gap: 10px;
}

.bottle_index{
    width: 25%;
    margin: 30px auto;
}

.bottle_index img{
    display: block;
    margin: 0 auto;
    transition: filter 0.3s ease;
}

article.bottle_index a img{
    transition: filter 0.3s ease;
}

article.bottle_index a:hover img{
    filter: brightness(1.2);
}

.bottle_index p{
    text-align: center;
    margin-bottom: 5px;
}

@media (max-width: 768px) {
  .products {
    flex-direction: column;
  }

  .side {
    width: 100%;
    margin-bottom: 30px;
  }

  .index {
    width: 100%;
  }

  nav.side ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  nav.side ul li {
    margin-bottom: 0;
    padding: 6px 10px;
    background: #f5f5f5;
    border-radius: 4px;
    font-size: 14px;
  }

  nav.side ul li.side_h {
    width: 100%;
    background: none;
    font-size: 18px;
    font-weight: 600;
  }
}


/* 商品 　カテゴリー*/
.bottle {
    font-family: "Noto Serif JP", serif;
    font-size: 18px;
    font-weight: 400;
    display: flex;
    max-width: 1000px;
    gap: 50px;
    align-items: flex-start; /* 上揃え */
    margin: 30px auto 75px;
}

.bottle_img{
    margin: 0 auto;
}

.bottle_img img{
    display: block;
    margin: 0 auto;
}

.bottle_info{
    width: 60%;
}

.bottle_info .name{
    display: flex;
    align-items: end;
    gap: 10px;
    border-bottom: 1px solid #261A17;
}

.bottle_info .name h2{
    margin: 0;
}

.bottle_info p{
    font-size: 16px;
}

.bottle_info .price p{
    font-size: 18px;
}

.bottle_info .button{
    display: flex;
    gap: 15px;
}

.bottle_info .label{
    font-size: 12px;
}

@media (max-width: 768px) {
  .bottle_info .name {
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
  }
  .bottle_info .name .bottle_status{
    display: flex;
    gap: 5px;
  }
}

/* 会社概要 */
.about {
    font-family: "Noto Serif JP", serif;
    font-size: 18px;
    font-weight: 400;
    max-width: 1000px;
    margin: 0 auto;    
}

.about-table {
    margin: 20px auto;
    border-collapse: collapse;
    color: #261A17;
}

.about-table td {
    padding: 10px 35px;
    vertical-align: middle;
    border-top: solid 1px #261A17;
    border-bottom: solid 1px #261A17;
}

.access{
    display: flex;
    gap: 50px;
    margin-bottom: 20px;
}

.access img{
    width: 50%;
    height: auto;
    aspect-ratio: 772 / 650;
}

@media (max-width: 768px) {
  .access {
    flex-direction: column;
    gap: 5px;
  }
  .access img{
      width: 100%;
  }
}


.inquiry-w{
    text-align: center;
}

.inquiry{
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 300; /* 100 to 900 */
  display: inline-block;
  margin: 30px auto;
  padding: 20px 60px;
  text-align: center;
  border: solid 3px #ADCDED;
}

.inquiry h1{
    margin: 0;
    color: #ADCDED;
    font-weight: 300;
}

/* 取扱店 */
.shoplist {
    font-family: "Noto Serif JP", serif;
    font-size: clamp(16px, 1.3vw, 20px);
    font-weight: 400;
    max-width: 1000px;
    margin: 0 auto;    
}

.shoplist-table {
    margin: 30px auto;
    border-collapse: collapse;
    color: #261A17;
}

.shoplist-table td {
    padding: 10px 35px;
    vertical-align: middle;
    border-top: solid 1px #261A17;
    border-bottom: solid 1px #261A17;
}


/* お知らせ */
.info {
    font-family: "Noto Serif JP", serif;
    font-size: 18px;
    font-weight: 400;
    max-width: 1000px;
    margin: 0 auto;
}

.info_title{
    display: flex;
    gap: 15px;
    border-bottom: solid 1px #261A17;
    margin-bottom: 30px;
}

.info_content{
    text-align: center;
}

@media (max-width: 768px) {
  .info_title {
    flex-direction: column;
    gap: 0px;
    }

  .info_title h3{
    margin: 10px 0;
  }

  .info_title h5{
    margin: 5px 0;
  }
}