/* =========================================================
   ベース
   ========================================================= */
body {
    margin: 0; /* 余白をリセット */
    font-family: "Noto Sans JP", sans-serif;
    line-height: 190%;
    color: #fff;
    background: #1F1F1F;
}

/*メニュー開閉時の処理*/
body.is-fixed {
  position: fixed;
  width: 100%;
  overflow: hidden;
}


/* =========================================================
   レイアウト
   ========================================================= */
.hero,
.section,
.footer {
    width: 100%; /* 左寄せの基本：幅100% */
}

.hero {
    padding: 0; /* 不要な余白を排除 */
}

.section {
    padding: 0rem; /* 左の余白が出ないように0指定 */
}



/*modifire蒸留所を訪ねるに使用*/
.section--bg-visitDistillery{ 
  background-image: url("../img/top/bg-visit.webp");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: auto;
    min-height: 100svh;
}

.footer__inner{
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 8rem 2rem 5rem 2rem;
  box-sizing: border-box;
}


.section__inner {

  width: 100%;
  margin: 0 auto;
  padding: 10rem 1rem;
  box-sizing: border-box;
}

/*特徴の特殊レイアウト用*/
.section__inner--fature {
  padding:0 0 20rem 0rem;
}
.section__inner--cta{
    padding: 4rem 1rem 0 1rem;

}

.section__inner--small{
    padding: 1rem 1rem;

}
.section__inner--middle{
    padding: 5rem 1rem;

}
.section__inner--large{
    padding: 15rem 1rem;

}



/*蒸留所を訪ねるの特殊レイアウト用*/
.section__visitDistillery {
  width: 100%;

  max-width: 1440px;
  background-image: url("../img/top/img-okinawaMap.webp");
  background-repeat: no-repeat;
  background-position: right top;
  margin: 0 auto;
  padding:  7.25rem 1rem;
  box-sizing: border-box;


    background-size: contain;

}



.section__inner--mt{
  margin-top:2rem;
}



/*modifire(横幅定義)*/
.section__inner--w1000 {
  max-width: 1000px;
}

.section__inner--w1100 {
  max-width: 1100px;
}


.section__inner--w1200 {
  max-width: 1200px;
}

.section__inner--w1250 {
  max-width: 1250px;
}

.section__inner--w960 {
  max-width: 960px;
}
.section__inner--w1440 {
  max-width: 1440px;
}

.section__inner--w1920 {
  max-width: 1920px;
}





.section--pink-round {
  background: #FDF1F4;
  padding-top: 4.375rem;   /* 70px → 4.375rem */
  padding-bottom: 4.375rem;/* 70px → 4.375rem */
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 3.75rem 3.75rem 0 0; /* 上辺だけ丸み 60px → 3.75rem */
}



/* =========================================================
   ユーティリティ
   ========================================================= */
.font-sans {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
}

.font-serif {
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
}


.bg-gray{
background: #F0F0F0
}
.bg-pink{
  background: #FDF1F4;
}
.bg-white{
  background: #ffffff;
}
.bg-red{
  background: red;
}

/*共通　セクションタイトル*/
.sectionTitle {
  text-align: left; /* デフォルトは左寄せ */
  margin-bottom:3rem;
}

/* モディファイア：中央寄せ */
.sectionTitle--center
 {
  text-align: center; /* デフォルトは左寄せ */
  margin-bottom:3.75rem;/*60px*/
}

.pc-none{
  display: none;
}

.sp-none{
  display: block;
}

/* =========================================================
   コンポーネント
   ========================================================= */

/* ------------------------------
   onlineshopボタン
   ------------------------------ */

.c-storeBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #000;
  color: #fff;
  padding: 13px 33px;
  font-size: 12px;
  font-weight: 600;

  height: 45px;
  line-height: 1;
  text-decoration: none;
  transition: .4s;
}

.c-storeBtn:hover{
  background: #606060;
}

.c-storeBtn__icon {
  width: 18px;
  height: 18px;
}


  /* 白背景バージョン */
.c-storeBtn--white {
  background: #fff;
  color: #000;
}
.c-storeBtn--white:hover{
  color: #ffffff;
}


/* 白背景ボタン */
.c-storeBtn--white .c-storeBtn__icon {
  filter: brightness(0); /* アイコンを黒にする */
    transition: .4s;
}
/* ホバー時：アイコン白に戻す */
.c-storeBtn--white:hover .c-storeBtn__icon {
  filter: none;
}

/* 透明背景＋白枠バージョン */
.c-storeBtn--outline {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
}



/* ------------------------------
   カード
   ------------------------------ */

.c-featureCard {
  max-width: 1190px;

  display: flex;
  align-items: center; /* ← 画像の中央にテキストを揃える */
  gap: 108px;
}

/* 画像エリア */
.c-featureCard__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* テキストエリア */
.c-featureCard__body {
  flex: 1;
}

/* タイトルブロック全体 */

.c-featureCard__head {
  display: flex;
  align-items: center; /* ← これで左右の高さを中央揃え */
  gap: 26px;
  margin-bottom: 32px;
}

/* 左：タイトル */
.c-featureCard__headLeft {
  flex-shrink: 0;
}

/* 右：英語＋サブタイトル */
.c-featureCard__headRight {
  display: flex;
  flex-direction: column;
  padding-top: .5rem;
  gap: 8px;

}












/* タイトル（日本語） */
.c-featureCard__title {
  line-height: 100%;
  font-size: 96px;
  font-family: "Noto Serif JP", serif;
}

/* 英語テキスト */
.c-featureCard__en {
 line-height: 1; 
  font-size: 14px;
  color: #606060;
 
}

/* サブタイトル（日本語） */
.c-featureCard__subtitle {
  line-height: 100%;
  font-size: 36px;
  font-family: "Noto Serif JP", serif;
}

/* サブタイトル（日本語） */
.c-featureCard__text {
  line-height: 200%;
  padding-left: 3rem;
  font-size: 1rem;
}



/* 左右反転モディファイア（PCのみ） */
.c-featureCard--reverse {
  flex-direction: row-reverse;
}









/* ------------------------------
   read more button
   ------------------------------ */

.c-readMore {
  display: inline-flex;
  align-items: center;
  gap: 6px; /* アイコンと文字の間 */
  color: #ffffff;
  text-decoration: none;
  font-family: "Noto Serif JP", serif;
  font-size: 12px;
  letter-spacing: 0.05em;

}

.c-readMore{
  color: #000000;
}

.c-readMore:hover .c-readMore__icon {
  transition: .4s;
}
.c-readMore:hover .c-readMore__icon {
  padding-right: .4rem;
}

/* ----- icon ----- */
.c-readMore__icon {
  font-size: 12px;
  line-height: 1;
}




/* ------------------------------
   section title
   ------------------------------ */

.c-sectionTitle {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #fff;
  margin: 0;
}

.c-sectionTitle--black {
  color: #000000;
}

.c-sectionTitle__en {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.c-sectionTitle__ja {
  font-family: "Noto Serif JP", serif;
  font-size: 32px;
  line-height: 1.3;
}

/* ------------------------------
   テキスト内のサブタイトル 
   ------------------------------ */
/* テキストサブタイトル */
.c-sub-title {
  font-family: "Noto Serif JP", serif;
  font-size: 24px;
  line-height: 150%;
  margin-bottom: 65px;
}




/* ------------------------------
   journal list
   ------------------------------ */

.c-journalList {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-journalList__item {
  border-bottom: 1px solid #2E2F30;
  padding: 0px 5px;
}

/* ------------------------------
   entry
   ------------------------------ */

.c-journalEntry {
  font-family: "Noto Serif JP", serif;
  display: flex;              /* ← grid から flex に変更 */
  align-items: center;        /* ← これで左右の高さを中央揃え */
  gap: 25px;
  text-decoration: none;
  color: #000000;
  padding: 1.1rem 0;
}
/* ----- meta（上下に並べる） ----- */
.c-journalEntry__meta {
  width: 120px; /* ← ★横幅を固定してタイトル位置を揃える */
  line-height: 1.1;
  display: flex;
  flex-direction: column; 
  gap: 4px;
  font-size: 12px;

  opacity: 0.9;
}

.c-journalEntry__date,
.c-journalEntry__category {
  letter-spacing: 0.05em;
}

/* ----- title ----- */
.c-journalEntry__title {
  font-size: 16px;
  line-height: 1.5;
  flex: 1; /* ← 右側を自然に広げる */
}

/* 記事がない時の文字 */

.c-journalEntry__empty{
 padding: 1.1rem 0;
}


/* ------------------------------
   floating thumbnail
   ------------------------------ */

.c-floatingThumb {
  position: absolute;
  width: 220px;
  aspect-ratio: 16 / 9; /* ← 16:9 固定 */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 1000;
  overflow: hidden; /* はみ出しを隠す */
  border-radius: 4px; /* 任意：見た目が整う */
}

.c-floatingThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ← 画像を枠いっぱいに */
  display: block;
}






/*CMN pageTopBtn*/
.pageTopBtn {
  text-decoration: none;
  color: #8D8D8D;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px; /* 画像と文字の間隔 */
}

.pageTopBtn::before {
  content: "";
  display: inline-block;
  width: 16px;   
  height: 10px;  
  background-image: url("../img/cmn/arrowTop.png");
  background-size: contain;
  background-repeat: no-repeat;
}

.pageTop-position{
  position:fixed;
  right: 2rem;
  bottom:-3rem;
  z-index: 20;
  transition:.4s;
}

#js-pagetop-position.is-active{
  bottom:2rem;
}




/* =========================================================
   CMN　下層メインビジュアル
   ========================================================= */
.lower-hero__bg {
  width: 100%;
  height: 400px;
  background-image: url('../img/cmn/lower-mainVisual-1.webp');
  background-size: cover;      /* 横100%で自然にフィット */
  background-position: center; /* 中央配置 */
  background-repeat: no-repeat;
}



  /* =========================================================
    CMN　パンくずナビ 
    ========================================================= */

  .breadcrumb {
    width: 100%;
    background: #1F1F1F;
    font-size: 14px;
    padding: 1rem;

  }

  .breadcrumb__list {
    display: flex;
    align-items: center;
    gap: 12px; /* 文字の間隔 */
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .breadcrumb__item {
    display: flex;
    align-items: center;
  }


  /* HOME の左にアイコン（23×23px） */
  .breadcrumb__item:first-child .breadcrumb__link {
    position: relative;
    padding-left: 30px; /* アイコン分の余白 */
  }

  .breadcrumb__item:first-child .breadcrumb__link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 23px;
    height: 23px;
    transform: translateY(-50%);
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("../img/cmn/icon-home.svg"); 
    
  }

  /* 区切り（>）を疑似要素で */
  .breadcrumb__item + .breadcrumb__item::before {
    content: ">";
    margin-right: 12px;
    color: #ffffff;
    font-size: 12px;
  }

  /* リンク色 */
  .breadcrumb__link {
    color: #ffffff;
    font-size: 14px;
    text-decoration: none;
    transition:.4s;
  }

  .breadcrumb__link:hover {
    text-decoration: underline;
    color:#606060;
  }


/* PC（デフォルト） */
.breadcrumb__item:last-child {
  flex: 1; /* 最後だけ幅を広げる */
}

.breadcrumb__current {
  color: #ffffff;
  font-size: 14px;
  white-space: normal;
  word-break: break-word;
}





/* =========================================================
  
   ========================================================= */




/* =========================================================
   サイズ調整用のスタイル
   ========================================================= */
@media (max-width: 1200px) {

/*modifire蒸留所を訪ねるに使用*/
.section--bg-visitDistillery{ 
  background-image: url("../img/top/bg-sp-visit.webp");
  background-position: right bottom;
    min-height: 200svh;
}



/*蒸留所を訪ねるの特殊レイアウト用*/
.section__visitDistillery {
  padding:  4.5rem 1rem 2rem 1rem;
  background-position: right bottom;
  min-height: 200svh;
}

}



@media (max-width: 767px) {



/* =========================================================
   CMN　下層メインビジュアル
   ========================================================= */
.lower-hero__bg {
  height: 250px;
}







.section__inner {
  padding: 4.5rem 1rem 2.5rem 1rem;
}
/*特徴の特殊レイアウト用*/
.section__inner--fature {
 padding: 1.5rem 0 4.5rem 0;
}

.section__inner--large{
    padding: 4.5rem 1rem;

}




/*modifire蒸留所を訪ねるに使用*/
.section--bg-visitDistillery{ 
  background-position: right top;
    min-height:100svh;
}


/*蒸留所を訪ねるの特殊レイアウト用*/
.section__visitDistillery {
  background-position:0%;
  background-image:none;
 min-height:auto;
}


/* ------------------------------
   onlineshopボタン
   ------------------------------ */

  .c-storeBtn {

    height: 40px;
    padding: 10px 20px; /* 必要なら調整 */
  }  

/* ------------------------------
   カード
   ------------------------------ */
  .c-featureCard {
    flex-direction: column; /* ← 縦並び */
    gap: 40px; /* SP 用の余白は調整 */
  }

/* テキストエリア */
.c-featureCard__body {
  padding-left: 1rem;
  padding-right: 1rem;
}

  .c-featureCard__image {
    padding-right: 2rem;
    padding-left: 0rem;

  }



 .c-featureCard--reverse .c-featureCard__image {
    padding-right: 0rem;
    padding-left: 2rem;
      
  }

  .c-featureCard__image {
    aspect-ratio: 370 / 220; /* ← 指定の比率 */
    overflow: hidden;
  }

  .c-featureCard__image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ← トリミングして比率に合わせる */
  }





  /* タイトル（日本語） */
  .c-featureCard__title {
    font-size: min(64px, 18vw);
  }

  /* 英語テキスト */
  .c-featureCard__en {
    font-size: min(12px, 3.5vw);
  }

  /* サブタイトル（日本語） */
  .c-featureCard__subtitle {
    font-size: min(30px, 8vw);
  }

  /* 本文 */
  .c-featureCard__text {
    font-size: min(16px, 4.5vw);
    line-height: 1.8;
    padding-left:1rem; /* SP では左インデントを消す*/
  }


  .c-featureCard--reverse {
    flex-direction: column; /* ← 通常と同じ縦並びに戻す */
  }



/* ------------------------------
   section title
   ------------------------------ */
  .c-sectionTitle__en {
    font-size: 12px;
  }
  .c-sectionTitle__ja {
    font-size: 24px;
  }




/* ------------------------------
   journal list
   ------------------------------ */


  /* ----- entry（SPは縦並び） ----- */
  .c-journalEntry {
    flex-direction: column; /* ← 1カラム化 */
    align-items: flex-start; /* ← 左揃え */
    gap: 8px; /* ← PCより小さく */
    padding: 1rem 0;
  }

  /* ----- meta（横並びに変更） ----- */
  .c-journalEntry__meta {
    width: auto; /* ← ★120px → auto に戻す */
    flex-direction: row; /* ← 横並び */
    gap: 12px;
    font-size: 12px;
  }

  /* ----- title（下に配置） ----- */
  .c-journalEntry__title {
    font-size: 16px;
    line-height: 1.5;
    width: 100%; /* ← 横幅いっぱい */
  }





/* ------------------------------
   footer
   ------------------------------ */

  .footer__inner{
  padding: 4rem 1rem 4.5rem 1rem;

}

/* =========================================================
  CMN　パンくずナビ 
========================================================= */
  .breadcrumb {
    padding: 0rem;
  }
  
  .breadcrumb__list {
    flex-wrap: wrap; /* SP だけ折り返し許可 */
  }

  /* タイトルだけ次の行へ強制 */
  .breadcrumb__item:last-child {
    flex-basis: 100%; /* ← これで改行が入る */
    display: flex;
    align-items: center;
  }

  .breadcrumb__current {
    white-space: normal;
    word-break: break-word;
  }

}