@charset "utf-8";

body {
  font-family: "minion-minion-3", serif !important;
  font-weight: 400;
  font-style: normal;
}

img {
  max-width: 100%;
  height: auto;
}
.mt1em {
  margin-top: 1.5em;
}
.sp-only {
  display: block;
}
.pc-only {
  display: none;
}

.wrapper {
  width: 100%;
}
.en-header {
  background-color: transparent;
  height: 250px;
  padding: 0 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* border-bottom: 1px solid #eee; */
}

.en-header-left {
  display: flex;
  align-items: center;
}

.en-head-logo {
  width: 133px;
  height: auto;
}

.en-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
}

.en-select-box {
  position: relative;
  width: 100px;
}

/* 言語ドロップダウン */
.language-dropdown {
  position: relative;
  display: inline-block;
}

/* ドロップダウンボタン */
.language-dropdown-btn {
  background-color: white;
  color: #666;
  font-family: "minion-3", serif;
  padding: 8px 12px;
  font-size: 1.25rem;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 100px;
}

.language-dropdown-btn:hover {
  background-color: #f8f8f8;
}

/* 下向き矢印アイコン */
.language-dropdown-btn .fa-chevron-down {
  margin-left: auto;
  font-size: 10px;
  color: #666;
}

/* ドロップダウンの内容 */
.language-dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 100px;
  box-shadow: 0px 2px 6px -2px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  overflow: hidden;
  margin-top: 2px;
  border: 1px solid #eee;
}

/* ドロップダウンリンク */
.language-dropdown .language-dropdown-content a {
  color: #333;
  padding: 3px 12px 3px;
  text-decoration: none;
  display: block;
  font-size: 1.25rem;
  transition: background-color 0.2s;
}

.language-dropdown .language-dropdown-content a:hover {
  background-color: #333;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

/* 表示クラス */
.show-dropdown {
  display: block;
}

/* 地球アイコン */
.language-dropdown-btn .fa-globe {
  color: #333;
  margin-top: 2px;
}

.section-dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
  min-width: 100px;
}

/* ドロップダウンボタン */
.section-dropdown-btn {
  background-color: white;
  color: #333;
  padding: 8px 16px;
  font-size: 1.25rem;
  border: 1px solid #ccc;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-align: left;
}

.section-dropdown-btn:hover {
  background-color: #f8f8f8;
}

/* 下向き矢印アイコン */
.section-dropdown-btn .fa-chevron-down {
  margin-left: 3px;
  font-size: 10px;
  color: #666;
}

/* ドロップダウンの内容 */
.section-dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  width: 100%;
  box-shadow: 0px 2px 6px -2px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  overflow: hidden;
  margin-top: 2px;
  border: 1px solid #eee;
}

/* ドロップダウンリンク */
.section-dropdown-content a {
  color: #333;
  padding: 3px 12px 3px;
  text-decoration: none;
  display: block;
  font-size: 1.25rem;
  transition: background-color 0.2s, color 0.2s;
}

.section-dropdown-content a:hover {
  background-color: #333;
  color: #fff;
  text-decoration: none;
}

/* 表示クラス */
.show-section-dropdown {
  display: block;
}

.en-footer img {
  width: auto;
  max-height: 120px;
  height: 100%;
  object-fit: cover;
}

/*---- MAIN CONTENTS ----*/

/* Main Visual */
.main-visual {
  display: flex;
  width: 100%;
  height: 284px;
  overflow: hidden;
  flex-wrap: wrap; /* スマホ表示時の折り返し用 */
  position: relative; /* 位置指定のための基準点 */
}

.main-visual-text {
  width: 40%;
  padding: 5%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 上下中央配置（既に設定済み） */
  align-items: center; /* 左右中央配置を追加 */
  z-index: 2;
}

.main-visual-text h1 {
  font-size: clamp(2.125rem, 3.54vw + 1.42rem, 4.25rem);
  font-weight: 500;
  line-height: 1.1;
  font-family: "minion-3", serif;
  white-space: nowrap;
  text-align: justify;
  text-align-last: justify;
}
.main-visual-text h1 .line1 {
  letter-spacing: 0.14em; /* SAKAGURAの文字間隔 */
  display: block;
}

.main-visual-text h1 .line2 {
  letter-spacing: 0.01em; /* DAISHINSHUの文字間隔 */
  display: block;
}
.main-visual-text h1 .line3 {
  letter-spacing: 0.12em; /* PRODUCTSの文字間隔 */
  display: block;
}
.main-visual-image {
  width: 60%;
  overflow: hidden;
  position: absolute; /* 絶対位置指定 */
  right: 0; /* 右端に配置 */
  top: 0;
  height: 100%; /* 親要素と同じ高さ */
}

.main-visual-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.en-main {
  margin: 100px auto 0;
  max-width: calc(1200px - 100px);
}

.en-main h2 {
  font-size: 2.375rem;
  margin-bottom: 0.875rem;
  text-align: left;
  letter-spacing: 0.05em;
}

.innerlink {
  display: flex;
  justify-content: center;
  margin: 3em 0;
}
.innerlink > li {
  text-align: center;
}
.innerlink > li + li {
  margin-left: 3em;
}
.innerlink a {
  display: block;
  line-height: 150%;
  font-size: 16px;
}
.innerlink a:after {
  content: "";
  width: 0.8em;
  height: 0.8em;
  display: block;
  margin: 1em auto 3rem;
  border-right: 1px solid;
  border-bottom: 1px solid;
  -ms-transform: translateY(-0.5em) rotate(45deg);
  -webkit-transform: translateY(-0.5em) rotate(45deg);
  transform: translateY(-0.5em) rotate(45deg);
  -ms-transition: transform 0.3s;
  -webkit-transition: transform 0.3s;
  transition: transform 0.3s;
}

.innerlink a:hover:after {
  -ms-transform: translateY(0) rotate(45deg);
  -webkit-transform: translateY(0) rotate(45deg);
  transform: translateY(0) rotate(45deg);
}

@media screen and (max-width: 900px) {
  .innerlink > li + li {
    margin-left: 2em;
  }
  .list-product-info {
    padding: 0.5em;
  }
}
@media screen and (max-width: 600px) {
  .innerlink > li {
    width: 50%;
    position: relative;
  }
  .innerlink > li + li {
    margin-left: 0;
    border-left: 1px solid #ccc;
  }
  .innerlink a {
    padding: 0 0.5em 2em 0.5em;
  }
  .innerlink a:after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.5em;
    margin: auto;
  }
}

.list-product-info {
  text-align: center;
  display: table;
  margin: 0 auto 5em;
  padding: 0.5em 1.5em;
  border: 1px solid #b3b3b3;
  counter-reset: listnum;
}
.list-product-info > li {
  display: inline-block;
  vertical-align: middle;
  font-size: 12px;
  counter-increment: listnum;
}
.list-product-info > li + li {
  margin-left: 1em;
  line-height: 100%;
}

.list-product-info > li:nth-child(1):before {
  content: "\02460";
}
.list-product-info > li:nth-child(2):before {
  content: "\02461";
}
.list-product-info > li:nth-child(3):before {
  content: "\02462";
}
.list-product-info > li:nth-child(4):before {
  content: "\02463";
}
.list-product-info > li:nth-child(5):before {
  content: "\02464";
}
.list-product-info > li:nth-child(6):before {
  content: "\02465";
}
.list-product-info > li:nth-child(7):before {
  content: "\02466";
}
.list-product-info > li:nth-child(8):before {
  content: "\02467";
}
.list-product-info > li:nth-child(9):before {
  content: "\02468";
}
.list-product-info > li:nth-child(10):before {
  content: "\02469";
}

.list-products {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.list-products > li {
  width: 48%;
  margin-bottom: 4.8rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.list-products .img {
  width: 40%;
  text-align: center;
}
.list-products .text {
  width: 55%;
}

.list-products .name {
  font-size: 1.6rem;
  line-height: 145%;
  font-weight: 400;
  margin: 1.375em 0;
}
.list-products .name span {
  display: block;
  font-size: 12px;
  line-height: 150%;
  font-weight: 400;
}

/* .product-detail {
  display: flex;
  flex-wrap: wrap;
}
.product-detail dt,
.product-detail dd {
  font-size: 12px;
  line-height: 170%;
}
.product-detail dt {
  width: 1.5em;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}
.product-detail dd {
  width: calc(100% - 1.5rem);
  white-space: inherit;
} */

.product-detail {
  display: flex;
  flex-wrap: wrap;
}

/* 共通 */
.product-detail dt,
.product-detail dd {
  font-size: 12px;
  line-height: 170%;
  margin: 0; /* dl のデフォルトマージンを消す */
}

/* 用語 */
.product-detail dt {
  width: 1.5rem;
  white-space: nowrap;
  overflow: hidden;
}

/* 説明文 */
.product-detail dd {
  width: calc(100% - 1.5rem);
  white-space: inherit;
}

.title-products {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 48px !important;
  text-align: center !important;
  line-height: 150%;
  letter-spacing: 0.2em;
}
.product-detail dt:before {
  width: 1.5em;
  margin-right: 1em;
  display: inline-block;
}
.product-detail dt:nth-of-type(1):before {
  content: "\02460";
}
.product-detail dt:nth-of-type(2):before {
  content: "\02461";
}
.product-detail dt:nth-of-type(3):before {
  content: "\02462";
}
.product-detail dt:nth-of-type(4):before {
  content: "\02463";
}
.product-detail dt:nth-of-type(5):before {
  content: "\02464";
}
.product-detail dt:nth-of-type(6):before {
  content: "\02465";
}
.product-detail dt:nth-of-type(7):before {
  content: "\02466";
}
.product-detail dt:nth-of-type(8):before {
  content: "\02465";
}
.product-detail dt:nth-of-type(9):before {
  content: "\02468";
}
.product-detail dt:nth-of-type(10):before {
  content: "\02469";
}

@media screen and (max-width: 600px) {
  .list-products > li {
    width: 100%;
  }

  .title-products {
    font-size: 16px;
    margin-bottom: 36px;
  }
  .list-products .name {
    font-size: 14px;
  }
}

/* CONTENTS */
.prologue {
  width: 70%;
  font-size: 1.625rem;
  line-height: 1.8;
  color: #444;
}

.brewing-content {
  display: flex;
  flex-direction: column;
  gap: 100px; /* 行間余白 */
  margin: 0 auto;
  padding-bottom: 100px; /* hoken */
}

.story-content,
.company-content {
  display: flex;
  gap: 100px; /* 行間余白 */
  margin: 0 auto;
  padding-bottom: 100px; /* hoken */
}

.brewing-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
}

.brewing-item .text,
.story-content .text,
.company-content .text {
  width: 60%;
  font-size: 1.625rem;
  line-height: 1.8;
  color: #444;
}
.brewing-item .text h3,
.story-content .text h3,
.company-content .text h3 {
  font-size: 2.25rem;
  font-weight: 500;
  margin-bottom: 1.875rem;
  color: #000;
}
.brewing-item .image,
.story-content .image,
.company-content .image {
  width: 40%;
}

.en-main .pb-30 {
  padding-bottom: 30px;
}

.brewing-item .image img,
.story-content .image img,
.company-content .image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
.company-content p a {
  color: #000;
  text-decoration: underline;
  transition: color 0.3s ease-in-out;
}
.company-content p a:hover {
  color: #666;
  text-decoration: none;
}
/* スクロール時フェードイン - */
.fadein {
  opacity: 0;
  transform: translate3d(0, 50px, 0); /* translateY から translate3d に変更 */
  transition: opacity 1.5s cubic-bezier(0.33, 1, 0.68, 1),
    transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* イージング調整でふわっと感を強調 */
  will-change: transform, opacity; /* ブラウザに変更を事前通知 */
  backface-visibility: hidden; /* さらなる最適化 */
}

/* リサイズ中はアニメーションを制御 */
.resize-animation-stopper .fadein {
  transition: none !important;
}

.fadein.in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0); /* translate3d に変更 */
}

.headline-line {
  display: block;
  margin-bottom: 30px;
}

.headline-line line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: drawLine 1s forwards;
}

@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}
@media (max-width: 1024px) {
  .en-main {
    width: 100%;
    padding: 30px 30px 0;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
}
/* SP表示用 */
@media (max-width: 768px) {
  .main-visual,
  .reverse {
    flex-direction: column;
    height: auto;
  }

  .main-visual-text,
  .main-visual-image {
    width: 100%; /* 全幅表示 */
    position: relative; /* 絶対位置指定を解除 */
    right: auto;
    top: auto;
  }

  /* テキストエリアのパディング調整 */
  .main-visual-text {
    padding: 0 5%;
    text-align: center;
    order: 1; /* テキストを上に配置 */
  }

  /* 画像エリアを下に配置 */
  .main-visual-image {
    order: 2;
    height: auto;
    margin-top: 20px;
  }

  /* 画像のアスペクト比調整 */
  .main-visual-image img {
    height: auto;
  }

  .main-visual-text h1 {
    font-size: 1.6rem;
    text-align: center;
  }
  .en-main h2 {
    font-size: 2rem;
    margin-bottom: 0.75rem;
  }
  .main-visual-image {
    position: relative;
    width: 100%;
    height: auto;
    /* margin-top: 30px; */
  }

  .main-visual-image img {
    position: relative;
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .brewing-content {
    gap: 80px; /* 行間余白 */
    padding-bottom: 80px;
  }
  .story-content,
  .company-content {
    gap: 80px; /* 行間余白 */
    padding-bottom: 80px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  /* .company-content {
    gap: 0;
  } */
  .brewing-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .brewing-item .text,
  .brewing-item .image,
  .story-content .text,
  .story-content .image,
  .company-content .text,
  .company-content .image {
    width: 100%;
  }

  .brewing-item .image img,
  .story-content .image img,
  .company-content .image img {
    width: 100%;
    height: auto;
  }

  .pc-tab {
    display: none;
  }
}
@media (min-width: 1921px) {
  .main-visual-text h1 {
    font-size: 8.5rem;
  }
}
@media (min-width: 769px) {
  .sp-only,
  .sp-tab {
    display: none;
  }
  .pc-only {
    display: flex;
    gap: 3rem;
    align-items: center;
    margin-top: 1.75rem;
  }
  .pc-only a {
    color: #000 !important;
    transition: all 0.3s ease-in-out;
  }
  .pc-only a:hover {
    color: #999 !important;
  }
  .en-menu-links p {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
  }

  .en-menu-links i {
    margin-right: 10px;
  }
  .reverse {
    flex-direction: row-reverse;
  }
  .main-visual-text {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1.2s ease;
  }

  .main-visual-text.in-view {
    opacity: 1;
    transform: translateX(0);
  }
}
@media (max-width: 768px) {
  .en-header {
    height: 160px;
    padding: 0 20px;
  }
  .en-head-logo {
    width: auto;
    height: 100px;
    object-fit: cover;
  }
}

/* トップへ戻るボタンのスタイル */
#scroll-to-top {
  position: fixed;
  bottom: 50px;
  right: 50px;
  width: 50px;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ボタンのホバー効果 */
#scroll-to-top:hover {
  background-color: rgba(0, 0, 0, 0.9);
}

/* スクロール時に表示するクラス */
#scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
}

/* 管理バーがある場合の調整 */
.admin-bar #scroll-to-top {
  bottom: calc(50px + 32px);
}

/* スマートフォン向けレスポンシブ調整 */
@media (max-width: 768px) {
  #scroll-to-top {
    width: 40px;
    height: 40px;
    bottom: 30px;
    right: 30px;
    font-size: 16px;
  }

  .admin-bar #scroll-to-top {
    bottom: calc(30px + 46px);
  }
}

/* さらに小さい画面向け */
@media (max-width: 480px) {
  #scroll-to-top {
    width: 35px;
    height: 35px;
    bottom: 20px;
    right: 20px;
    font-size: 14px;
  }

  .admin-bar #scroll-to-top {
    bottom: calc(20px + 46px);
  }
}

.wrap-url {
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-all;
  max-width: 100%; /* コンテナからはみ出さないようにする */
}