@charset "UTF-8";
/**
 * rem() 関数
 * px値を基準値($base-font-size)に基づいてremに変換します。
 */
/**
 * liquid() 関数
 * 最小値、理想値、最大値を指定し、clamp()を使ったレスポンシブな値を生成します。
 *
 * @param {Number} $min-px     - 最小のpx値（狭い画面向け）
 * @param {Number} $ideal-px   - 理想のpx値（参考値）
 * @param {Number} $max-px     - 最大のpx値（広い画面向け）
 * @param {Number} $min-viewport (optional) - 最小適用画面幅（デフォルト: $liquid-min-viewport）
 * @param {Number} $max-viewport (optional) - 最大適用画面幅（デフォルト: $liquid-max-viewport）
 *
 * @return {String} clamp()関数の文字列（rem単位で出力）
 */
/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* ボックスモデルとボーダーの初期化 */
/* ============================================ */
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  min-width: 0;
}

/* ドキュメント全体に関する調整 */
/* ============================================ */
/**
 * 1. すべてのブラウザで行間を調整。
 * 2. iOSで画面の回転時にフォントサイズが変化するのを防止。
 * 3. iOSでリンクをタップしたときのグレーのオーバーレイを除去。
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -webkit-tap-highlight-color: transparent;
  /* 3 */
}

/* セクションの初期化 */
/* ============================================ */
/**
 * すべてのブラウザでデフォルトのマージンを削除。
 */
body {
  margin: 0;
  animation: loading 1s;
}
@keyframes loading {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/**
 * Internet Explorerで `main` 要素の表示を統一。
 */
main {
  display: block;
}

/* 縦のリズムを整える要素のマージンをリセット */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* 見出しのスタイルをリセット */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/* 番号付き・箇条書きリストのスタイルを削除 */
/* ============================================ */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 定義リストのスタイル調整 */
/* ============================================ */
dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

/* グループ化要素の調整 */
/* ============================================ */
/**
 * 1. Firefoxで正しいbox-sizingを適用。
 * 2. EdgeやIEでoverflowが見えるように調整。
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

/**
 * 1. フォントサイズの継承とスケーリングを調整。
 * 2. `em`単位のサイズが正しく表示されるように調整。
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: inherit;
  /* 2 */
}

address {
  font-style: inherit;
}

/* テキスト関連の要素調整 */
/* ============================================ */
/**
 * IE10でアクティブリンクのグレー背景を削除。
 */
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

/**
 * 1. Chrome 57以前で下線を削除。
 * 2. 各ブラウザで正しい下線装飾を適用。
 */
abbr[title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  /* 2 */
}

/**
 * Chrome、Edge、Safariで太字に。
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. フォントサイズの継承とスケーリングを調整。
 * 2. `em`単位の表示の乱れを修正。
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: inherit;
}

/**
 * smallタグのサイズを縮小。
 */
small {
  font-size: 80%;
}

/**
 * sub/supタグが行の高さに影響しないよう調整。
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* 画像・埋め込み要素などの表示調整 */
/* ============================================ */
/**
 * 縦揃えのズレを防ぐ。
 */
svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

/* フォームの初期化 */
/* ============================================ */
/**
 * フォーム要素の見た目をリセットし、スタイルを当てやすくする。
 * 1. 特にiOSでシステム標準スタイルを排除。
 * 2. テキスト変換の継承。
 */
button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  /* 1 */
  -moz-appearance: none;
       appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit;
  /* 2 */
}

/**
 * ボタンのカーソルスタイルを調整。
 */
button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
}

button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
  cursor: default;
}

/**
 * Firefoxでのoutlineの調整。
 */
:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

/**
 * オプション要素の余白を削除。
 */
option {
  padding: 0;
}

/**
 * フィールドセットの見た目を初期化。
 */
fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

/**
 * 各ブラウザでの進捗バーの縦揃えを統一。
 */
progress {
  vertical-align: baseline;
}

/**
 * IE10以降のtextareaスクロールバーを調整。
 */
textarea {
  overflow: auto;
}

/**
 * Chromeの数値入力用スピンボタンの表示を調整。
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Safariの検索ボックスoutlineスタイルを調整。
 */
[type=search] {
  outline-offset: -2px;
}

/**
 * macOS上のChrome/Safariでの検索装飾を削除。
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. iOS/Safariでのスタイル指定を可能に。
 * 2. フォント継承の修正。
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

/**
 * Firefoxでのnumber型見た目を調整。
 */
[type=number] {
  -moz-appearance: textfield;
}

/**
 * ラベルをクリックできるようにする。
 */
label[for] {
  cursor: pointer;
}

/* インタラクティブ要素 */
/* ============================================ */
/*
 * Edge, IE10+, Firefoxでdetailsの表示を調整。
 */
details {
  display: block;
}

/*
 * summaryの表示を全ブラウザで統一。
 */
summary {
  display: list-item;
}

/*
 * contenteditableのoutlineを調整。
 */
[contenteditable]:focus {
  outline: auto;
}

/* テーブル */
/* ============================================ */
/**
 * ChromeやSafariでのテーブルのボーダーカラー継承を調整。
 */
table {
  border-color: inherit;
  border-collapse: collapse;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

.inner {
  max-width: 80rem;
  width: 100%;
  margin: 0 auto;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.inner.overflow {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-left: 0rem;
  padding-right: 0rem;
}
@media screen and (max-width: 768px) {
  .inner {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.text {
  font-size: 1rem;
  font-weight: 600;
  font-family: "Zen Kaku Gothic Antique", serif;
  overflow-wrap: break-word;
  word-break: break-word;
  letter-spacing: 0.07em;
}
.text--small {
  font-size: 0.875rem;
  line-height: 1.18;
  letter-spacing: 0.07;
}

.section-title {
  display: inline-block;
  position: relative;
  line-height: 1.12;
}

.section-title--ja {
  font-size: 2rem;
  font-family: "Zen Old Mincho", serif;
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1024px) {
  .section-title--ja {
    font-size: 1.6875rem;
  }
}
@media screen and (max-width: 768px) {
  .section-title--ja {
    font-size: 1.5625rem;
  }
}
@media screen and (max-width: 375px) {
  .section-title--ja {
    font-size: 1.25rem;
  }
}

.section-title--en {
  font-family: "Cormorant Garamond", serif;
  font-size: 0.9375rem;
  position: relative;
  opacity: 0.5;
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  .section-title--en {
    font-size: 0.75rem;
  }
}
@media screen and (max-width: 375px) {
  .section-title--en {
    font-size: 0.625rem;
  }
}

.btn a {
  display: inline-block;
  padding: 1rem 0.9375rem;
  border: 0.0625rem solid #8A2708;
  font-size: 1.25rem;
  border-color: #8A2708;
  color: #FFFFFF;
  background-color: #8A2708;
  font-weight: 600;
  line-height: 1.12;
  font-family: "Zen Old Mincho", serif;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.btn a:hover {
  opacity: 1;
  color: #8A2708;
  background-color: #FFFFFF;
}

.btn--move {
  position: relative;
  background-color: #8A2708;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  padding: 1.125rem;
  text-decoration: none;
  line-height: 1;
  box-shadow: inset 0 -rem(4) 0 0 #3D3D3D;
  overflow: hidden;
  border: solid 1px #8A2708;
  transition: background-color 0.3s ease, color 0.3s ease;
  font-family: "Zen Old Mincho", serif;
}
.btn--move::before, .btn--move::after {
  transition: transform 0.3s ease;
}
.btn--move::before {
  content: "";
  position: absolute;
  top: 27%;
  right: 1.3125rem;
  width: 0.9375rem;
  height: 0.9375rem;
  border-top: 0.125rem solid #FFFFFF;
  transform: rotate(135deg) translate(0, 0);
  transform-origin: center center;
}
.btn--move::after {
  content: "";
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-left: 0.9375rem;
  border-top: 0.125rem solid #FFFFFF;
  border-right: 0.125rem solid #FFFFFF;
  transform: translate(0, 0);
  transform-origin: center center;
}
.btn--move:hover {
  opacity: 1;
  background-color: #FFFFFF;
  color: #8A2708;
  border: solid 1px #8A2708;
}
.btn--move:hover::before {
  transform: rotate(135deg) translate(-0.25rem, 0);
}
.btn--move:hover::after {
  transform: translate(0.25rem, -0.25rem);
}

html {
  font-size: 16px;
}

a[href^="tel:"] {
  pointer-events: none;
}
@media screen and (max-width: 768px) {
  a[href^="tel:"] {
    pointer-events: auto;
  }
}

a {
  transition: opacity 0.3s;
}
a:hover {
  opacity: 1;
}

.sp-show--md {
  display: none;
}
@media screen and (max-width: 768px) {
  .sp-show--md {
    display: block;
  }
}

@media screen and (max-width: 768px) {
  .pc-show--md {
    display: none;
  }
}

.sp-show--lg {
  display: none;
}
@media screen and (max-width: 1024px) {
  .sp-show--lg {
    display: block;
  }
}

@media screen and (max-width: 1024px) {
  .pc-show--lg {
    display: none;
  }
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

.header {
  position: fixed;
  z-index: 1000;
  width: 100%;
  height: 6.25rem;
  display: flex;
  align-items: center;
}

.header__bc {
  background-color: #3D3D3D;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18);
}

.header--reverse {
  background-color: #3D3D3D;
}

.header__inner {
  max-width: 80rem;
  height: inherit;
  width: 100%;
  margin-inline: auto;
  padding-inline: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .header__inner {
    padding-inline: 1rem;
  }
}

.header__logo {
  height: 2.8125rem;
  max-width: 9.8125rem;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .header__logo {
    height: 1.875rem;
    max-width: 7.5rem;
  }
}

.header__logo img {
  width: 100%;
}

.header__inner .pc-show--md {
  height: inherit;
}

.header__inner nav {
  height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.125rem;
}

.header__items {
  height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.125rem;
}

.header__item {
  height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__link {
  height: inherit;
  position: relative;
  display: flex;
  align-items: center;
  font-weight: 500;
  color: #FFFFFF;
  letter-spacing: 0.07em;
}
.header__link::after {
  content: "";
  position: absolute;
  bottom: -0.4375rem;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #FFFFFF;
  transition: width 0.3s ease-out;
}
.header__link:hover::after {
  width: 100%;
}
.header__link:hover {
  color: white;
}

.contact-button {
  height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact__link {
  display: inline-block;
  color: #FFFFFF;
  padding: 0.6875rem 1.5625rem;
  border: solid 2px #FFFFFF;
  border-radius: 3.125rem;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 0.3s ease-out;
}
.contact__link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-out;
  z-index: -1;
}
.contact__link:hover {
  color: #222222;
}
.contact__link:hover::before {
  transform: scaleX(1);
}

.hamburger {
  position: fixed;
  z-index: 9999;
  right: 0.9375rem;
  max-width: 2.5rem;
  width: 100%;
  height: 2.5rem;
  cursor: pointer;
  background-color: #8A2708;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.375rem;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  top: 1.875rem;
}
.hamburger.is-active span {
  animation: steamVanish 0.8s ease-out forwards;
}
.hamburger.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.hamburger span {
  display: inline-block;
  height: 1.1875rem;
  width: inherit;
  background-image: url(../images/namisen.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  animation: steamFloat 2s ease-in-out infinite;
}

@keyframes steamFloat {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(-3px);
    opacity: 0.8;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes steamVanish {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}
.hamburger .is-active {
  display: none;
}

.drawer-menu {
  position: absolute;
  z-index: 5000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  display: none;
  background-color: #3D3D3D;
  opacity: 0.9;
}

.drawer__inner {
  padding-top: 5rem;
  height: inherit;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 90%;
  margin-inline: auto;
}

.drawer__list:first-child {
  border-top: solid 1px #FFFFFF;
}

.drawer__list {
  border-bottom: solid 1px #FFFFFF;
}

.drawer__link {
  padding: 0.875rem 0;
  display: block;
  position: relative;
  font-size: 0.875rem;
  font-weight: 500;
  color: #FFFFFF;
  font-family: "Cormorant Garamond", serif;
  letter-spacing: 0.07em;
}
.drawer__link:hover {
  opacity: 0.7;
}

/* 固定閉じるボタンのスタイル */
.js-fixed-close-button {
  position: fixed;
  z-index: 9999;
  /* ハンバーガーと同じz-index */
  right: 0.9375rem;
  /* ハンバーガーと同じ右からの位置 */
  max-width: 1.875rem;
  /* ハンバーガーと同じ最大幅 */
  width: 100%;
  height: 1.875rem;
  /* ハンバーガーと同じ高さ */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
  /* 「✕」の色 */
  font-size: 1.5625rem;
  /* 「✕」のサイズ */
  background-color: transparent;
  /* 背景なし */
  border: none;
  cursor: pointer;
  opacity: 0;
  /* 初期状態では非表示 */
  visibility: hidden;
  /* 初期状態では非表示 */
  transition: opacity 0.4s ease, visibility 0.4s ease;
  top: 2.25rem;
}
.drawer-title {
  margin-top: 3.75rem;
  margin-inline: auto;
}

.drawer__link::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
  width: 1.25rem;
  height: 1.25rem;
  background-image: url("../images/yajirushi.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.drawer__items {
  margin-top: 3.5rem;
}

.drawer__item {
  text-align: center;
}

.fv {
  width: 100%;
  position: relative;
  aspect-ratio: 1280/800;
  overflow: hidden;
  height: 100vh;
}
@media screen and (max-width: 768px) {
  .fv {
    aspect-ratio: 375/428;
    height: initial;
  }
}

.fv__inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.fv__swiper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.fv__wrapper {
  width: 100%;
  height: 100%;
}

.fv__slide {
  width: 100%;
  height: 100%;
}

.fv__slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 8s ease-out;
  transform: scale(1);
}

.fv__slide img.zoom {
  transform: scale(1.08);
  /* お好みで1.05〜1.15くらい */
}

.fv__catch {
  position: absolute;
  right: 3%;
  bottom: 6%;
  z-index: 2;
  color: #FFFFFF;
  font-size: clamp(1.25rem, 5vw, 2.8125rem);
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.28);
  font-family: "Sawarabi Mincho", serif;
  font-weight: 300;
}
@media screen and (max-width: 768px) {
  .fv__catch {
    right: 4%;
    bottom: 6%;
  }
}

.fv__catch span {
  opacity: 0;
  display: inline-block;
  transform: translateY(10px);
  animation: charFadeIn 0.8s ease-out forwards;
}

/* キーフレームアニメーション */
@keyframes charFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fv__button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.fv__button--prev {
  left: 10px;
}
.fv__button--next {
  right: 10px;
}
.fv__button::after {
  font-size: 20px;
  color: #FFFFFF;
}

.concept {
  padding-top: 6.25rem;
}
@media screen and (max-width: 768px) {
  .concept {
    padding-top: 2.5rem;
  }
}

.concept__inner {
  max-width: 80rem;
  width: 100%;
}

.concept__container {
  display: flex;
  gap: 5.625rem;
}
@media (max-width: 1279px) {
  .concept__container {
    margin-left: calc(50% - 50vw);
  }
}
@media screen and (min-width: 1280px) {
  .concept__container {
    margin-left: 0;
  }
}
@media screen and (max-width: 1024px) {
  .concept__container {
    gap: 1.25rem;
  }
}
@media screen and (max-width: 768px) {
  .concept__container {
    flex-direction: column;
    margin-left: initial;
    gap: 1rem;
  }
}

.concept__img {
  max-width: 34.375rem;
  width: 100%;
  aspect-ratio: 550/370;
}
@media screen and (max-width: 1024px) {
  .concept__img {
    max-width: 28.125rem;
    aspect-ratio: 450/330;
  }
}
@media screen and (max-width: 768px) {
  .concept__img {
    order: 2;
    aspect-ratio: 343/232;
    margin: 0 auto;
  }
}

.concept__img img {
  width: 100%;
  height: 100%;
}

.concept__titleArea {
  order: 1;
}

.concept__title::after {
  content: "";
  position: absolute;
  display: inline-block;
  right: 0.625rem;
  top: 0.3125rem;
  max-width: 12.5rem;
  width: 70%;
  height: 1px;
  background-color: #222222;
}

.concept__content {
  flex: 1 1;
  max-width: 37.5rem;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .concept__content {
    order: 3;
    margin: 0 auto;
  }
}

.concept__wrapper {
  margin-top: 1.25rem;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .concept__wrapper {
    margin-top: 0;
  }
}

.concept__text {
  line-height: 1.4;
  font-weight: 500;
}

.concept__wrapper .concept__text:nth-of-type(even) {
  margin-bottom: 16px;
}

.history {
  margin-top: 6.25rem;
}
@media screen and (max-width: 768px) {
  .history {
    margin-top: 2.5rem;
  }
}

.history__title ::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: 12.5rem;
  width: 60%;
  height: 1px;
  background-color: #222222;
}
@media screen and (max-width: 768px) {
  .history__title ::after {
    left: 0;
    max-width: 6.25rem;
  }
}
@media screen and (max-width: 375px) {
  .history__title ::after {
    left: 0;
    max-width: 4.6875rem;
  }
}

@media screen and (max-width: 768px) {
  .history__title--en {
    text-align: right;
    padding-right: 0.5rem;
  }
}

.history__inner {
  position: relative;
}

.history__inner::after {
  content: "";
  position: absolute;
  bottom: -2.5rem;
  right: 1.875rem;
  width: 3.75rem;
  height: 5.625rem;
  background-image: url("../images/himedaruma.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transform-origin: center center;
  animation: himedaruma-roll 4s linear infinite;
}
@media screen and (max-width: 768px) {
  .history__inner::after {
    top: 0;
  }
}
@media screen and (max-width: 375px) {
  .history__inner::after {
    height: 3.75rem;
    width: 2.5rem;
  }
}

@keyframes himedaruma-roll {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  25% {
    transform: translateX(0.5rem) rotate(15deg);
  }
  50% {
    transform: translateX(0) rotate(0deg);
  }
  75% {
    transform: translateX(-0.5rem) rotate(-15deg);
  }
  100% {
    transform: translateX(0) rotate(0deg);
  }
}
.history__items {
  max-width: 56.25rem;
  width: 100%;
}

.history__item {
  display: flex;
  align-items: center;
  position: relative;
}
@media screen and (max-width: 768px) {
  .history__item {
    display: block;
  }
}

.history__item:first-child {
  padding-top: 2.125rem;
}
@media screen and (max-width: 768px) {
  .history__item:first-child {
    padding-top: 1.4375rem;
  }
}

.history__item + .history__item {
  padding-top: 1.25rem;
}
@media screen and (max-width: 768px) {
  .history__item + .history__item {
    padding-top: 0.625rem;
  }
}

.history__item:last-child {
  padding-bottom: 2.125rem;
}

.history__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8.1875rem;
  width: 0.0625rem;
  height: 100%;
  background-color: #222222;
}
@media screen and (max-width: 768px) {
  .history__item::before {
    left: 2.25rem;
  }
}

.history__item:last-child::after {
  content: "";
  position: absolute;
  top: 92%;
  left: 7.9rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.0625rem solid #222222;
  border-right: 0.0625rem solid #222222;
  transform: rotate(135deg);
  transform-origin: center;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .history__item:last-child::after {
    top: 93%;
    left: 1.96875rem;
  }
}

.history__mission {
  position: relative;
  max-width: 4.6875rem;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .history__mission {
    max-width: 3.125rem;
  }
}

.history__mission::after {
  content: "";
  position: absolute;
  top: 40%;
  left: 8rem;
  width: 0.5rem;
  height: 0.5rem;
  background-color: #222222;
  border-radius: 50%;
}
@media screen and (max-width: 768px) {
  .history__mission::after {
    left: 2.09375rem;
    width: 0.375rem;
    height: 0.375rem;
  }
}

.history__group {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-left: 5.4375rem;
}
@media screen and (max-width: 768px) {
  .history__group {
    margin-left: 4.5625rem;
    display: block;
  }
}

.history__item:last-child .history__group {
  padding-top: 1.875rem;
}
@media screen and (max-width: 768px) {
  .history__item:last-child .history__group {
    padding-top: 0;
  }
}

.history__mission1 {
  width: 100%;
  font-size: 1.875rem;
  line-height: 2;
  color: #8A2708;
  font-weight: 900;
}
@media screen and (max-width: 768px) {
  .history__mission1 {
    font-size: 1.5625rem;
    line-height: 1.12;
    margin-left: 4.5625rem;
  }
}
@media screen and (max-width: 375px) {
  .history__mission1 {
    font-size: 1.25rem;
    line-height: 1.12;
  }
}

.history__mission2 {
  font-size: 1rem;
  line-height: 1.2;
  color: #8A2708;
  font-weight: 900;
  flex: 0 0 auto;
}
@media screen and (max-width: 768px) {
  .history__mission2 {
    margin-top: 0.25rem;
    font-size: 0.75rem;
  }
}

.history__detaile {
  line-height: 1.6;
  font-weight: 500;
  flex: 1;
  min-width: 0;
}
@media screen and (max-width: 768px) {
  .history__detaile {
    margin-top: 0.5rem;
    padding-left: 1rem;
    font-size: 0.75rem;
  }
}

.history__item:first-child .history__detaile {
  margin-left: 2.8125rem;
}
@media screen and (max-width: 768px) {
  .history__item:first-child .history__detaile {
    margin-left: 0;
  }
}

.history__item + .history__item .history__detaile {
  margin-left: 7.8125rem;
}
@media screen and (max-width: 768px) {
  .history__item + .history__item .history__detaile {
    margin-left: 0;
  }
}

.news {
  padding: 1.875rem 0 3.125rem;
  margin-top: 6.25rem;
  background-color: #3D3D3D;
}

.news__sectionContent {
  text-align: center;
}

.news__title {
  text-align: left;
}

.news__title--en,
.news__title--ja {
  color: #FFFFFF;
}

.news__title--en {
  opacity: 1;
}

.news__title--en::after {
  content: "";
  display: block;
  height: 1px;
  width: 50%;
  top: 50%;
  left: 43%;
  background-color: #FFFFFF;
  position: absolute;
  opacity: 1;
}
@media screen and (max-width: 768px) {
  .news__title--en::after {
    top: 1.875rem;
    left: -0.4375rem;
    rotate: 90deg;
    width: 18%;
  }
}
@media screen and (max-width: 375px) {
  .news__title--en::after {
    top: 1.4375rem;
    left: -0.4375rem;
  }
}

@media screen and (max-width: 768px) {
  .news__title--ja {
    padding-left: 0.9375rem;
  }
}

.news__container {
  margin-top: 2.5rem;
  max-width: 900px;
  width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}

.news__content {
  display: flex;
  align-items: center;
  transition: opacity 0.4s;
  border-bottom: dotted 1px #d2d2d2;
  padding-bottom: 0.625rem;
}
.news__content:not(:nth-child(1)) {
  padding-top: 1.25rem;
}
@media screen and (max-width: 768px) {
  .news__content {
    display: block;
  }
}

.news__content + .news__content {
  margin-top: 0.625rem;
}

.news__time {
  font-size: 1.25rem;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.18;
}
@media screen and (max-width: 768px) {
  .news__time {
    font-size: 1rem;
  }
}

.news__text {
  margin-left: 3.125rem;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  color: #FFFFFF;
  line-height: 1.18;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .news__text {
    font-size: 0.875rem;
    margin-top: 0.875rem;
    margin-left: 0;
  }
}

.space {
  margin-top: 6.25rem;
}
@media screen and (max-width: 768px) {
  .space {
    margin-top: 1.5rem;
  }
}

.space__titleArea {
  margin-top: 1.875rem;
}
@media screen and (max-width: 768px) {
  .space__titleArea {
    order: 1;
  }
}

.space__title::after {
  content: "";
  display: block;
  height: 1px;
  width: 52%;
  bottom: 3px;
  right: 10px;
  background-color: #222222;
  position: absolute;
  opacity: 1;
}
@media screen and (max-width: 768px) {
  .space__title::after {
    width: 50%;
    left: 5.625rem;
  }
}
@media screen and (max-width: 375px) {
  .space__title::after {
    width: 50%;
    left: 4.375rem;
  }
}

.space__items {
  display: flex;
  gap: 6.25rem;
  height: auto;
}
@media screen and (max-width: 1024px) {
  .space__items {
    gap: 3.75rem;
  }
}
@media screen and (max-width: 768px) {
  .space__items {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
  }
}

.space__item {
  max-width: 34.375rem;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
  .space__item {
    display: flex;
    flex-direction: column;
  }
}

.space__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin-top: 1.875rem;
  gap: 3.125rem;
}
@media screen and (max-width: 768px) {
  .space__content {
    margin-top: 1.5rem;
    order: 3;
    gap: 1.5rem;
  }
}

.space__img {
  width: 100%;
  aspect-ratio: 550/385;
}
@media screen and (max-width: 768px) {
  .space__img {
    margin-top: 1rem;
    aspect-ratio: 359/241;
    max-width: 22.4375rem;
    width: 100%;
    order: 2;
    max-width: 100vw;
  }
}

.space__img img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.space__text {
  line-height: 1.5;
  font-weight: 500;
  flex-grow: 1;
}

.space__btn {
  margin-top: auto;
}
@media screen and (max-width: 768px) {
  .space__btn {
    text-align: center;
  }
}

.info {
  margin-top: 6.25rem;
  padding: 3.125rem 0;
  background-color: #3D3D3D;
}
@media screen and (max-width: 768px) {
  .info {
    margin-top: 1.5rem;
    padding: 1rem 0 3rem;
  }
}

.info__header {
  display: flex;
}
@media screen and (max-width: 768px) {
  .info__header {
    flex-direction: column;
  }
}

.info__title {
  color: #FFFFFF;
  writing-mode: vertical-lr;
  display: inline-block;
}
@media screen and (max-width: 768px) {
  .info__title {
    writing-mode: horizontal-tb;
  }
}

.info__title--ja {
  text-orientation: upright;
}
@media screen and (max-width: 768px) {
  .info__title--ja {
    text-orientation: initial;
  }
}

.info__title--en {
  text-orientation: sideways;
  position: relative;
}
@media screen and (max-width: 768px) {
  .info__title--en {
    text-orientation: initial;
  }
}

.info__title--en::after {
  text-orientation: sideways;
  content: "";
  display: block;
  width: 0.0625rem;
  height: 30%;
  top: 54%;
  left: 3px;
  background-color: #FFFFFF;
  position: absolute;
  opacity: 1;
}
@media screen and (max-width: 1024px) {
  .info__title--en::after {
    top: 60%;
  }
}
@media screen and (max-width: 768px) {
  .info__title--en::after {
    text-orientation: initial;
    left: initial;
    transform: translateY(-50%);
    right: 0.625rem;
    height: 0.0625rem;
    width: 25%;
  }
}

.info__imgTitle {
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .info__imgTitle {
    margin-top: 2rem;
  }
}

.img-title {
  max-width: 14.625rem;
  width: 100%;
  aspect-ratio: 234/89;
}
@media screen and (max-width: 768px) {
  .img-title {
    max-width: 11.6875rem;
    aspect-ratio: 187/70;
  }
}

.img-title img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.info__contaienr {
  display: flex;
  gap: 3.125rem;
  margin-top: 3.125rem;
}
@media screen and (max-width: 768px) {
  .info__contaienr {
    margin-top: 2.75rem;
    flex-direction: column;
  }
}

@media screen and (max-width: 768px) {
  .info__contaienr-detail {
    margin-left: 0;
  }
}

.detail {
  display: grid;
  grid-template-columns: 6.0625rem 1fr;
  -moz-column-gap: 1.5625rem;
       column-gap: 1.5625rem;
  row-gap: 1.875rem;
}
@media screen and (max-width: 768px) {
  .detail {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 768px) {
  .detail__content {
    padding-left: 0.6875rem;
  }
}

.detail__link {
  color: #FFFFFF;
  text-decoration: none;
  display: block;
}
@media screen and (max-width: 768px) {
  .detail__link {
    text-decoration: underline;
  }
}

.detail__label,
.detail__content,
.detail__content p {
  font-size: 0.9375rem;
  line-height: 1.18;
  font-weight: bold;
  letter-spacing: 0.07rem;
  color: #FFFFFF;
}

.detail__link--map {
  text-decoration: underline;
}
@media screen and (max-width: 375px) {
  .detail__link--map {
    text-align: right;
  }
}

@media screen and (max-width: 768px) {
  .detail__label {
    font-size: 1rem;
  }
}

@media screen and (max-width: 768px) {
  .detail__content,
  .detail__content p {
    font-size: 0.75rem;
    font-weight: normal;
  }
}

.detail__content p + p {
  margin-top: 0.625rem;
}
@media screen and (max-width: 768px) {
  .detail__content p + p {
    margin-top: 0.5rem;
  }
}

.info__iframe {
  margin-top: 3.125rem;
}
@media screen and (max-width: 768px) {
  .info__iframe {
    margin-top: 2.8125rem;
  }
}

.iframe-area {
  max-width: 75rem;
  aspect-ratio: 1200/300;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .iframe-area {
    aspect-ratio: 343/400;
  }
}

.iframe-area iframe {
  width: 100%;
  height: 100%;
}

.info__btn {
  margin-top: 3.125rem;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .info__btn {
    margin-top: 1.5rem;
  }
}

.info__btn a {
  box-shadow: 0 5px 0 #6F1E06;
  transition: all 0.15s ease;
}
.info__btn a:hover {
  color: #FFFFFF;
  background-color: #7A2207;
  box-shadow: 0 2px 0 #5B1805;
  transform: translateY(3px);
}

.footer {
  width: 100%;
  background-color: #3D3D3D;
  padding: 0.625rem 1.0625rem;
  text-align: center;
}

.footer__copyright {
  white-space: normal;
  word-break: break-all;
  overflow-wrap: break-word;
  display: inline-block;
  font-size: 0.75rem;
  text-align: center;
  color: #FFFFFF;
}
@media screen and (max-width: 375px) {
  .footer__copyright {
    font-size: 0.5rem;
  }
}

.cafe {
  background-color: #3D3D3D;
  color: #FFFFFF;
  padding-top: 10rem;
  padding-bottom: 6.25rem;
}
@media screen and (max-width: 768px) {
  .cafe {
    padding-top: 8.125rem;
    padding-bottom: 3.125rem;
  }
}

.cafe__title--en {
  opacity: 1;
}

.cafe__title--en::after {
  content: "";
  display: block;
  height: 1px;
  width: 52%;
  top: 50%;
  right: 10px;
  background-color: #FFFFFF;
  position: absolute;
  opacity: 1;
}
@media screen and (max-width: 768px) {
  .cafe__title--en::after {
    width: 50%;
    left: 5rem;
  }
}
@media screen and (max-width: 375px) {
  .cafe__title--en::after {
    left: 4.0625rem;
  }
}

.cafe__fv {
  margin-top: 2.1875rem;
  display: flex;
  align-items: center;
  aspect-ratio: 1280/800;
  position: relative;
}
@media screen and (max-width: 768px) {
  .cafe__fv {
    aspect-ratio: 375/428;
  }
}

.cafe__description {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 1.5625rem;
  line-height: 1.6;
  font-weight: 600;
  font-family: "Zen Old Mincho", serif;
  letter-spacing: 0.09em;
}
@media screen and (max-width: 1024px) {
  .cafe__description {
    font-size: 1.125rem;
  }
}
@media screen and (max-width: 768px) {
  .cafe__description {
    font-size: 1.0625rem;
  }
}
@media screen and (max-width: 375px) {
  .cafe__description {
    font-size: 0.9375rem;
  }
}

.cafe__slider {
  width: 100vw;
  left: 50%;
  height: 100%;
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  .cafe__slider {
    transform: translateX(-51.5%);
  }
}

.cafe__slider-wrapper {
  display: flex;
  height: 100%;
}

.cafe__slide picture {
  display: block;
  border-radius: 7.25rem 0 0 7.25rem;
  overflow: hidden;
  height: 100%;
}
@media screen and (max-width: 768px) {
  .cafe__slide picture {
    border-radius: 37% 0 0 37%;
  }
}

.cafe__slide picture img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  height: 100%;
}

.cafe__pagination {
  position: absolute;
  bottom: -2.625rem !important;
  top: initial !important;
  left: 3.4375rem !important;
  width: 90% !important;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  z-index: 10;
  padding-left: 6.5625rem;
}
@media screen and (max-width: 768px) {
  .cafe__pagination {
    bottom: -1.5625rem !important;
    left: 2.5rem !important;
    gap: 0.5rem;
  }
}

.cafe__pagination .swiper-pagination-bullet {
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid #FFFFFF !important;
  background-color: transparent !important;
  border-radius: 50%;
  opacity: 1;
  transition: background-color 0.3s ease;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .cafe__pagination .swiper-pagination-bullet {
    width: 0.5rem;
    height: 0.5rem;
  }
}

.cafe__pagination .swiper-pagination-bullet-active {
  background-color: #FFFFFF !important;
  z-index: 10;
}

.menu {
  margin-top: 3.75rem;
  padding-bottom: 4.25rem;
}
@media screen and (max-width: 768px) {
  .menu {
    margin-top: 1rem;
    padding-bottom: 1.375rem;
  }
}

.menu__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.menu__title--en {
  writing-mode: vertical-rl;
}

.menu__items {
  margin-top: 3.125rem;
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
}
@media screen and (max-width: 768px) {
  .menu__items {
    margin-top: 1.25rem;
  }
}

.menu__item {
  padding-top: 3.125rem;
  border-top: 1px solid #222222;
  display: grid;
  grid-template-areas: "img title" "img content";
  grid-template-columns: 1fr 1.26fr;
  row-gap: 2.5rem;
  -moz-column-gap: 3.125rem;
       column-gap: 3.125rem;
}
@media screen and (max-width: 768px) {
  .menu__item {
    padding-top: 0.5rem;
    grid-template-columns: 1fr;
    grid-template-areas: "title" "img" "content";
    flex-direction: column;
    margin: 0 auto;
    row-gap: 0;
  }
}

.menu__item--reverse {
  grid-template-areas: "title img" "content img";
  grid-template-columns: 1.26fr 1fr;
  -moz-column-gap: 3.125rem;
       column-gap: 3.125rem;
}
@media screen and (max-width: 768px) {
  .menu__item--reverse {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "img" "content";
    flex-direction: column;
    margin: 0 auto;
  }
}

.menu__img-area {
  grid-area: img;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}
@media screen and (max-width: 768px) {
  .menu__img-area {
    gap: 0.375rem;
    margin-top: 0.5rem;
  }
}

.menu__img {
  max-width: 31.25rem;
  width: 100%;
}

.menu__img img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.menu__help {
  font-size: 0.625rem;
  color: #656565;
}
@media screen and (max-width: 768px) {
  .menu__help {
    font-size: 0.4375rem;
  }
}

.menu__title-area {
  grid-area: title;
}

.menu__content {
  grid-area: content;
}
@media screen and (max-width: 768px) {
  .menu__content {
    margin-top: 1.5rem;
  }
}

.menu__item--reverse {
  flex-direction: row-reverse;
}
@media screen and (max-width: 768px) {
  .menu__item--reverse {
    flex-direction: column;
  }
}

.menu__description {
  font-size: 1.25rem;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .menu__description {
    font-size: 1rem;
    font-weight: 500;
  }
}

.menu__name {
  margin-top: 2.5rem;
  font-size: 1rem;
}
@media screen and (max-width: 768px) {
  .menu__name {
    margin-top: 1rem;
    font-size: 0.875rem;
  }
}

.menu__text {
  margin-top: 1.25rem;
  font-weight: 400;
}

.menu__name-area .menu__name {
  grid-area: name;
  margin-top: 0;
  padding-top: 1.5625rem;
}
@media screen and (max-width: 768px) {
  .menu__name-area .menu__name {
    grid-row: 1;
    grid-column: 1;
    padding-top: 0;
  }
}

.menu__name-area {
  display: flex;
  margin-top: 2.5rem;
  gap: 1.875rem;
}
@media screen and (max-width: 768px) {
  .menu__name-area {
    gap: 0;
    justify-content: center;
  }
}

.menu__name-area .menu__name {
  flex: 1.7;
  min-width: 0;
}

.menu__drinks {
  flex: 1.25;
  min-width: 0;
}

.menu__foods {
  flex: 1;
  min-width: 0;
}

@media screen and (max-width: 768px) {
  .menu__drinks,
  .menu__foods {
    flex: 1;
  }
}

.menu__drink,
.menu__food {
  border-left: 1px solid #222222;
  padding-left: 1.875rem;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .menu__drink,
  .menu__food {
    font-size: 0.875rem;
  }
}

@media screen and (max-width: 768px) {
  .menu__drink {
    border-left: none;
    padding-left: 0;
  }
}

@media screen and (max-width: 768px) {
  .menu__food {
    padding-left: 1.875rem;
  }
}

.menu__btn {
  margin-top: 6.25rem;
  text-align: right;
}
@media screen and (max-width: 768px) {
  .menu__btn {
    margin-top: 1.5rem;
    text-align: center;
  }
}

.menu__btn--left {
  margin-top: 1.875rem;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .menu__btn--left {
    margin-top: 1.5rem;
    text-align: center;
  }
}

.art {
  padding-top: 10rem;
  max-width: 80rem;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .art {
    padding-top: 8.125rem;
  }
}

.art__title {
  margin-inline: 2.5rem;
}

.art__title::after {
  content: "";
  display: block;
  height: 1px;
  width: 55%;
  right: 10px;
  bottom: 0;
  background-color: #222222;
  position: absolute;
  opacity: 1;
}

.art__fv {
  margin-top: 2.75rem;
  width: 100%;
  position: relative;
}
@media screen and (max-width: 768px) {
  .art__fv {
    margin-top: 1.25rem;
  }
}

.art__img {
  max-width: 80rem;
  width: 100%;
  aspect-ratio: 1280/600;
}
@media screen and (max-width: 768px) {
  .art__img {
    aspect-ratio: 375/249;
  }
}

.art__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.art__phrase {
  padding-inline: 2.5rem;
  margin-top: 4.625rem;
  font-size: 1.5625rem;
  font-family: "Cormorant Garamond", serif;
}
@media screen and (max-width: 768px) {
  .art__phrase {
    margin-top: 2.75rem;
    font-size: 1.125rem;
    line-height: 1.5;
  }
}

.art_slider-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
  margin-top: 4.625rem;
}
@media screen and (max-width: 768px) {
  .art_slider-wrap {
    margin-top: 2rem;
    gap: 0.75rem;
  }
}

.art__slider {
  overflow: hidden;
}

.art__slider-wrapper {
  transition-timing-function: linear;
}

.art__slide {
  max-width: 15.25rem;
  width: 100%;
  flex-shrink: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  aspect-ratio: 242/242;
}
@media screen and (max-width: 768px) {
  .art__slide {
    max-width: 11.375rem;
  }
}

.art__slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.art__pagination {
  position: absolute;
  bottom: -2.5rem !important;
}
@media screen and (max-width: 768px) {
  .art__pagination {
    bottom: -1.5625rem !important;
  }
}

.art__pagination .swiper-pagination-bullet {
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid #3D3D3D !important;
  background-color: transparent !important;
  margin-inline: 0.625rem !important;
}
@media screen and (max-width: 768px) {
  .art__pagination .swiper-pagination-bullet {
    width: 0.375rem;
    height: 0.375rem;
    margin-inline: 0.3125rem !important;
  }
}

.art__pagination .swiper-pagination-bullet-active {
  background-color: #3D3D3D !important;
}

.art__text {
  padding-inline: 2.5rem;
  margin-top: 3.125rem;
  margin-bottom: 2.5rem;
  line-height: 1.5;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .art__text {
    margin-top: 2.5rem;
  }
}

.contact {
  padding-top: 10rem;
  background-color: #3D3D3D;
}
@media screen and (max-width: 768px) {
  .contact {
    padding-top: 8.125rem;
    padding-inline: 1rem;
  }
}

.contact__title {
  color: #FFFFFF;
}

.contact__title--en {
  opacity: 1;
}

.contact__title::after {
  content: "";
  display: block;
  height: 1px;
  width: 55%;
  right: 0.3125rem;
  bottom: 0.25rem;
  background-color: #FFFFFF;
  position: absolute;
  opacity: 1;
}

.contact-items {
  max-width: 50rem;
  width: 100%;
  display: flex;
  align-items: center;
  margin-inline: auto;
  border: solid 3px #FFFFFF;
  margin-top: 3.125rem;
}
@media screen and (max-width: 768px) {
  .contact-items {
    margin-top: 3.5rem;
  }
}

.contact-item {
  flex: 1;
  height: 9.375rem;
}
@media screen and (max-width: 768px) {
  .contact-item {
    height: 3.75rem;
  }
}

.contact-item:first-child {
  background-color: #FFFFFF;
}

.contact-text {
  color: #222222;
  font-size: 1.25rem;
  line-height: 1.12;
  font-weight: 600;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: inherit;
}
@media screen and (max-width: 768px) {
  .contact-text {
    font-size: 0.875rem;
  }
}
@media screen and (max-width: 375px) {
  .contact-text {
    font-size: 0.625rem;
  }
}

.tel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.tel:hover {
  opacity: 0.7;
}

.tel__img {
  height: 1.625rem;
  width: 1.78125rem;
  margin-right: 0.5rem;
}
@media screen and (max-width: 768px) {
  .tel__img {
    height: 1.4375rem;
    width: 1.25rem;
    margin-right: 0.125rem;
  }
}
@media screen and (max-width: 375px) {
  .tel__img {
    height: 0.9375rem;
    width: 1.0625rem;
    margin-right: 0.125rem;
  }
}

.tel__link {
  font-size: 2.03125rem;
  font-weight: 600;
  color: #FFFFFF;
}
@media screen and (max-width: 768px) {
  .tel__link {
    font-size: 0.875rem;
  }
}
@media screen and (max-width: 375px) {
  .tel__link {
    font-size: 0.75rem;
  }
}

.question {
  padding-top: 5.4375rem;
  padding-bottom: 6.25rem;
  background-color: #3D3D3D;
}
@media screen and (max-width: 768px) {
  .question {
    padding-top: 3.5625rem;
    padding-bottom: 3.75rem;
  }
}

.question__titleContent {
  text-align: center;
}

.question__title {
  color: #FFFFFF;
}

.question__title--en {
  -moz-text-align-last: left;
       text-align-last: left;
  opacity: 1;
}

.question__title--ja {
  position: relative;
}

.question__title::after {
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  bottom: -8px;
  background-color: #FFFFFF;
  position: absolute;
  opacity: 1;
}

.modern-accordion {
  max-width: 56.25rem;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  margin-top: 3.75rem;
}
@media screen and (max-width: 768px) {
  .modern-accordion {
    margin-top: 3rem;
  }
}

/* modern-accordion__item 要素 */
.modern-accordion__item {
  border-radius: 3.125rem;
  margin-bottom: 1rem;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s ease;
  position: relative;
}
@media screen and (max-width: 768px) {
  .modern-accordion__item {
    border-radius: 1.25rem;
  }
}

.modern-accordion__item::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 4.375rem;
  transform: translateY(-50%);
  display: block;
  height: 60%;
  width: 0.0625rem;
  background: #222222;
}
@media screen and (max-width: 768px) {
  .modern-accordion__item::after {
    right: 2.5rem;
  }
}

.modern-accordion__item:hover {
  box-shadow: 0 0.625rem 0.9375rem rgba(0, 0, 0, 0.01);
}

/* modern-accordion__header 要素 (ボタン) */
.modern-accordion__header {
  width: 100%;
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s, border-radius 0.3s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
}

.modern-accordion__header--active {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

@media screen and (max-width: 768px) {
  .modern-accordion__header {
    padding: 1rem;
  }
}

/* modern-accordion__header-content 要素 */
.modern-accordion__header-content {
  text-align: left;
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-right: 4.0625rem;
}
@media screen and (max-width: 768px) {
  .modern-accordion__header-content {
    margin-right: 2.1875rem;
  }
}
@media screen and (max-width: 375px) {
  .modern-accordion__header-content {
    margin-right: 1.25rem;
  }
}

/* modern-accordion__title 要素 (質問文) */
.modern-accordion__title {
  font-size: 1.125rem;
  color: #222222;
  margin: 0;
  font-weight: 500;
}

@media screen and (max-width: 768px) {
  .modern-accordion__title {
    font-size: 1rem;
  }
}

/* modern-accordion__icon-wrap 要素 */
.modern-accordion__icon-wrap {
  position: relative;
  width: 1.09375rem;
  height: 1.09375rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

/* modern-accordion__line 要素 (アイコンの線) */
.modern-accordion__line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #222222;
  transition: transform 0.3s ease;
  border-radius: 0.0625rem;
}

.modern-accordion__line:first-child {
  transform: translateY(-50%);
}

.modern-accordion__line:last-child {
  transform: translateY(-50%) rotate(90deg);
}

/* modern-accordion__header--active の中の line 要素の変形アニメーション */
.modern-accordion__header--active .modern-accordion__line:first-child {
  transform: translateY(-50%) rotate(45deg);
}

.modern-accordion__header--active .modern-accordion__line:last-child {
  transform: translateY(-50%) rotate(135deg);
}

/* modern-accordion__qa-indicator 要素 (Q, Aの丸い部分) */
.modern-accordion__qa-indicator {
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 600;
  flex-shrink: 0;
}

@media screen and (max-width: 768px) {
  .modern-accordion__qa-indicator {
    font-size: 0.875rem;
    width: 1.5rem;
    height: 1.5rem;
  }
}

/* modern-accordion__qa-indicator--q モディファイア */
.modern-accordion__qa-indicator--q {
  background-color: #8A2708;
  color: #FFFFFF;
}

/* modern-accordion__qa-indicator--a モディファイア */
.modern-accordion__qa-indicator--a {
  background-color: #FFFFFF;
  color: #8A2708;
  border: solid 1px #8A2708;
}

/* modern-accordion__body 要素 */
.modern-accordion__body {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-out;
  background: #FFFFFF;
  box-sizing: border-box;
}

/* modern-accordion__body-content 要素 */
.modern-accordion__body-content {
  padding: 1.5rem 6.25rem 1.5rem 1.5rem;
  color: #222222;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
@media screen and (max-width: 768px) {
  .modern-accordion__body-content {
    padding: 1rem 5rem 1rem 1rem;
  }
}

/* modern-accordion__body-content 内の p タグ */
.modern-accordion__body-content p {
  margin: 0;
  flex-grow: 1;
}

/* modern-accordion__body-content 内の ul タグ */
.modern-accordion__body-content ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin-top: 0.625rem;
}

/* modern-accordion__body-content 内の li タグ */
.modern-accordion__body-content li {
  margin-bottom: 0.3125rem;
}

.contact-info {
  margin-top: 0;
  padding-top: 6.25rem;
  border-top: 2px solid #FFFFFF;
}
@media screen and (max-width: 768px) {
  .contact-info {
    padding-top: 3.75rem;
  }
}

.contact-info__item {
  flex: 1 1 50%;
}

@media screen and (max-width: 768px) {
  .contact-info__item + .contact-info__item {
    margin-top: 3.75rem;
  }
}

.contact-info__imgTitle {
  margin-inline: auto;
}

@media screen and (max-width: 768px) {
  .contact-info__contaienr .iframe-area {
    margin-top: 0;
  }
}

.contact-info__detail {
  margin-top: 7.5rem;
}
@media screen and (max-width: 768px) {
  .contact-info__detail {
    margin-top: 3.75rem;
  }
}

.js-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.js-scroll.is-show {
  opacity: 1;
  transform: translateY(0);
}

.js-header {
  color: #222222;
  transition: background-color 0.3s ease-out, color 0.6s ease-out;
}

.change-color {
  background-color: #3D3D3D;
  color: #FFFFFF;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18);
}

.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: linear !important;
}

.js-art-swiper-top,
.js-art-swiper-bottom {
  pointer-events: none;
}/*# sourceMappingURL=style.css.map */