body {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP", sans-serif!important;
  letter-spacing: 0.004em;
  color: #333333;
}

/* ベースリセットとフォント設定 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

h1,h2,h3 {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}


/* ヘッダー全体のコンテナ */
.site-header {
  width: 100%;
  margin: 0 auto; /* 中央寄せ */
  background-color: transparent;
  font-family: 'Noto Sans JP', sans-serif;
  position: fixed;
  z-index: 10;
}

/* コンテンツ幅を制御するインナーコンテナ */
.header-inner {
  width: 100%;
  margin: 0 auto;
  /* コンテンツ幅1160pxにするため、左右に60pxのpaddingを設定 */
  /* (1280px - 120px = 1160px) */
  padding: 15px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-image: url(../img/headerback.png);
  background-size: cover;
  background-position: top;
}

.head_inner {
  max-width: 1280px;
  margin: 0 auto;
}

/* ロゴ設定 */
.header-logo img {
  height: 57px;
  width: auto;
  vertical-align: bottom;
}

/* 右側エリア（言語と言語下のナビ・ボタンを縦に並べる） */
.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* 右寄せ */
  gap: 10px; /* 言語バーとナビ行の間隔 */
}

/* 言語切り替え部分 */
.lang-switch {
  font-size: 14px;
  color: #ccc;
  /* 画像の配置に合わせて少し右寄せ調整が必要ならここでpadding-right等を調整 */
}

.lang-switch a {
  text-decoration: none;
  color: #ccc;
  transition: color 0.3s;
}

.lang-switch a:hover {
  color: #66404b;
}

.lang-switch .current {
  color: #66404b; /* 現在の言語は黒 */
  font-weight: 500;
}

.lang-switch .divider {
  margin: 0 5px;
  color: #ddd;
}

/* ナビとボタンを横並びにするコンテナ */
.nav-container {
  display: flex;
  align-items: center;
  gap: 30px; /* メニューとボタン群の間隔 */
}

/* メインナビゲーション */
.main-nav ul {
  display: flex;
  list-style: none;
  gap: 25px; /* メニュー項目間の間隔 */
}

.main-nav a {
  text-decoration: none;
  color: #333333;
  font-size: 16px;
  letter-spacing: 0.05em;
  font-weight: 500;
  transition: opacity 0.3s;
}

.main-nav a:hover {
  opacity: 0.7;
}

/* ボタンエリア */
.cta-buttons {
  display: flex;
  gap: 10px; /* ボタン同士の間隔 */
}

/* 共通ボタンスタイル */
.btn {
  display: flex;
  justify-content: center;
  width: 125px;
  height: 34px;
  background-color: #A28A83; /* 画像から抽出した小豆色/ブラウン系の色 */
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  border-radius: 20px; /* 高さの半分で丸める */
  transition: background-color 0.3s;
  line-height: 32px;
  overflow: hidden;
  white-space: nowrap;
}

.btn:hover {
  opacity: 0.8;
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.fv_inner {
  background-image: url(../img/amuse_fv.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom center;
  padding-top: 94px;
}

.fv_inner2 {
  position: relative;
}

.fv_txt {
  top: -70px;
  left: 130px;
  position: absolute;
  z-index: 2;
}

.fv_txt h2 {
  font-family: "Shippori Mincho", serif;
  font-size: 36px;
  font-weight: 500;
  letter-spacing: 0.09em;
  padding-left: 4px;
  padding-bottom: 25px;
}

/*
.fv_txt h2 {
  font-family: "Shippori Mincho", serif;
  font-size: 50px;
  color: #DBDBDB;
  -webkit-text-stroke: 2px #333333;
  text-stroke: 2px #333333;
  paint-order: stroke;
  line-height: 1;
  font-size: 50px;
  text-shadow: 0px 0px 8px rgba(0, 0, 0, 1);
}
*/
.fv_txt h3 {
  font-family: "Shippori Mincho", serif;
  font-size: 72px;
  color: #DBDBDB;
  -webkit-text-stroke: 2px #333333;
  text-stroke: 2px #333333;
  paint-order: stroke;
  line-height: 1;
  font-size: 50px;
  text-shadow: 0px 0px 8px rgba(0, 0, 0, 1);
}

.fv_txt img {
  height: 160px;
  width: auto;
}

.fv_img {
    display: block;
    width: 100%;
    padding: 0 0 0 260px;
    position: relative;
    z-index: 1;
    margin-top: 180px;
}

.fv_img img {
  width: 100%;
}

.lower_head {
  background-image: url(../img/kasofv.png);
}

.lower_txt {
  max-width: 1160px;
  margin: 0 auto;
  padding-top: 160px;
  padding-bottom: 80px;
}

.lower_txt h2 {
  font-family: "Shippori Mincho", serif;
  font-size: 48px;
  color: #797979;
  padding-bottom: 20px;
  letter-spacing: 0.06em;
}

.lower_txt h3 {
  font-family: "Shippori Mincho", serif;
  font-size: 16px;
  letter-spacing: 0.06em;
}

.about {
  background: #F3F3F3;
  padding-top: 100px;
  padding-bottom: 80px;
}

.about_inner {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  gap: 120px;
  flex-wrap: wrap;
}

.about_left {
  width: calc(42% - 0px);
}

.about_right {
  width: calc(58% - 120px);
}

.about_left img {
  width: 100%;
}

.about_right h2 {
  font-family: "Shippori Mincho", serif;
  font-size: 34px;
  line-height: 1.5;
  font-weight: 600;
}

.about_right h3 {
  font-family: "Shippori Mincho", serif;
  font-size: 30px;
  padding-top: 25px;
  font-weight: 500;
  padding-bottom: 25px;
}

.news_inner {
  max-width: 1040px;
  margin: 0 auto;
  margin-top: 60px;
  margin-bottom: 120px;
}

.news_detail {
  max-width: 920px;
  margin: 0 auto;
  margin-top: 60px;
  margin-bottom: 120px;
}

.news_data {
  font-size: 16px;
  color: #797979;
  letter-spacing: 0.04em;
  margin: 0;
  padding: 0;
}

.news_bigttl {
  font-size: 24px;
  letter-spacing: 0.04em;
  margin: 0;
  padding: 0;
  padding-top: 20px;
  padding-bottom: 40px;
}

.news_detail_img {
  line-height: 0;
}

.news_detail_img img {
  width: 100%;
}

.news_detail_txt {
  font-size: 16px;
  letter-spacing: 0.04em;
  margin: 0;
  padding: 0;
  padding-top: 40px;
  padding-bottom: 20px;
  line-height: 1.8;
}

.news_inner h2 {
  font-family: "Shippori Mincho", serif;
  font-size: 34px;
  line-height: 1.5;
  font-weight: 600;
}

.about_right p {
  font-size: 18px;
  line-height: 1.9;
  padding-bottom: 60px;
}

.underabout .about_right h2 {
  color: #797979;
  font-size: 16px;
  /* 縦中央をきれいに合わせるためのベースライン調整 */
  display: flex;
  align-items: center;
  letter-spacing: 0.045em;
}

.underabout .about_right h2::before {
  content: "";
  display: inline-block;
  width: 30px;           /* 長さ */
  height: 1.5px;         /* 太さ */
  background-color: #797979; /* 色 */
  margin-right: 10px;    /* 文字との間隔 */
}

.underabout .about_right p {
  padding-bottom: 20px;
}

.mt60 {
  margin-top: 60px;
}

.tabbtn_area {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  padding-top: 60px;
}

.tabbtn_area button {
  width: calc((100% - 60px) / 3);
  background: #F1F1F1;
  border-radius: 10px;
  color: #333333;
  font-size: 18px;
  text-decoration: none;
  font-family: "Shippori Mincho", serif;
  border: none;
}

/* --- ここからボタンのCSS --- */
  .btn_area {
    float: right;
  }

  .btn_area a {
    font-size: 16px;
    letter-spacing: 0.04em;
    color: #333;
  }

  .btn_area2 {
    display: block;
  }

  .btn_area2 a {
    font-size: 16px;
    letter-spacing: 0.04em;
    color: #333;
  }

  .arrow-btn {
    display: inline-flex; /* 横並びにする */
    align-items: center;  /* 上下中央揃え */
    cursor: pointer;
    padding: 10px;        /* クリックしやすく余白確保 */
    padding-left: 0;
  }

  .arrow-btn-news {
    padding-left: 15px;
  }

  /* 1. 左側の長い線 */
  .arrow-btn .line {
    width: 32px;          /* 線の長さ（お好みで調整） */
    height: 1px;          /* 線の太さ */
    background-color: #333;
    margin-right: -18px;  /* 円の中に線を食い込ませるためのネガティブマージン */
    z-index: 2;           /* 円より上に表示 */
    transition: transform 0.3s ease; /* アニメーション設定 */
  }

  /* 2. 右側の円 */
  .arrow-btn .circle {
    width: 35px;          /* 円の幅 */
    height: 35px;         /* 円の高さ */
    background-color: rgb(222 181 100 / 0.4);
    border-radius: 50%;   /* 完全な丸にする */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;           /* 線より下に表示 */
  }

  /* 3. 円の中の矢印の先端（CSSで作図） */
  .arrow-btn .circle::after {
    content: '';
    display: block;
    width:5px;          /* 矢印のサイズ */
    height: 5px;
    border-top: 1px solid #000;  /* 上の線 */
    border-right: 1px solid #000;/* 右の線 */
    transform: rotate(45deg);    /* 45度回転させて矢印にする */
    margin-left: -4px;    /* 視覚的な位置微調整 */
    transition: transform 0.3s ease; /* アニメーション設定 */
  }

  /* --- マウスオーバー時の動き --- */

  /* 線を少し右へ */
  .arrow-btn:hover .line {
    transform: translateX(5px);
  }

  .txtspan {
    padding-right: 10px;
  }

  /* 矢印の先端も一緒に右へ */
  .arrow-btn:hover .circle::after {
    transform: translateX(5px) rotate(45deg); /* 回転を維持したまま移動 */
  }

  .pankuzu {
    max-width: 1160px;
    padding-top: 20px;
    margin: 0 auto;
    color: #333333;
    font-size: 16px;
  }

  .pankuzu a {
    color: #333333;
    font-size: 16px;
    text-decoration: none;
  }

  a.now {
    color: #8E8E8E!important;
  }

  .underabout {
    padding-top: 60px;
    background-image: url(../img/profuunder.png);
    padding-bottom: 80px;
  }

.news_list {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
}

.news_list a {
  display: block;
  width: calc((100% - 50px) / 3);
  color: #000;
}

.news_list a img {
  width: 100%;
}

.news_list a p {
  font-size: 18px;
  margin: 0;
  padding: 0;
  letter-spacing: 0.04em;
  padding-top: 7px;
}

.news_list a p.data {
  color: #797979;
  font-size: 16px;
  padding-top: 10px;
  letter-spacing: 0.04em;
}

.btn_area2 {
  margin-top: 10px;
  margin-bottom: 20px;
}

.news_list a:hover {
  opacity: 0.8;
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

footer {
  position: relative;
}

.bgfoot {
  line-height:0;
}

.bgfoot img {
  width: 100%;
  height: 760px;
  object-position: top;
  object-fit: cover;
}

.contentfoot {
  position: absolute;
  width: 100%;
  max-width: 1040px;
  left: 50%;
  transform: translateX(-50%);
  top: 100px;
}

.contentfoot h2 {
  color: #fff;
  font-family: "Shippori Mincho", serif;
  font-size: 60px;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-align: center;
}

.reservebtn {
  padding-top: 40px;
  display: flex;
  justify-content: center;
  gap: 40px;
  padding-bottom: 60px;
}

.reservebtn a {
  width: 180px;
  border: solid 1.5px #A28A83;
  height: 54px;
  line-height: 52px;
  font-size: 18px;
  color: #A28A83;
  text-align: center;
  background: #fff;
  border-radius: 30px;
  display: block;
}

.reservebtn a:hover {
  -moz-opacity: 0.8;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  background: #A28A83;
  color: #fff;
  border: solid 1.5px #A28A83;
}

.reservecontents {
  display: flex;
  align-items: center;
  gap: 80px;
}

.reserve_left {
  width: calc(50% - 80px);
}

.reserve_right {
  width: 50%;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.reserve_inner_border {
  border-bottom: 1px solid #fff;
}

.reserve_left iframe {
  width: 100%;
  height: 340px;
  filter: grayscale(100%);
}

.reserve_inner {
  padding: 20px 0;
  display: flex;
}

.reserve_inner_left {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.03em;
  width: 130px;
}

.reserve_inner_right {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  width: calc(100% - 130px);
  letter-spacing: 0.03em;
}

.foot {
  background: #F1F1F1;
  padding-top: 60px;
  padding-bottom: 80px;
}

.foot_link a img {
  height: 36px;
  width: auto;
}

.sns {
  display: flex;
  gap: 15px;
}

.sns img {
  width: 50px;
  height: 50px;
}

.foot_inner {
  display: flex;
  max-width: 1160px;
  margin: 0 auto;
}

.foot_right {
  max-width: 400px;
  margin-left: auto;
}

.menu {
  display: flex;
  line-height: 2;
  flex-wrap: wrap;
}

.sns {
  padding-top: 20px;
}

.menu a {
  display: block;
  width: 50%;
  font-size: 18px;
  color: #000;
  letter-spacing: 0.06em;
}

.menu a:hover {
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  color: #6A493F;
}

.copy {
  background: #6A493F;
  color: #fff;
  text-align: center;
  font-size: 12px;
  left: 0.06em;
  padding: 10px 0 12px;
}

.dashed-circle {
    display: inline-flex;
    justify-content: center;
    line-height: 28px;
    color: #745F5F;
    width: 33px;
    height: 33px;
    border: 1px dashed #745F5F;
    border-radius: 50%;
    margin-right: 10px;
}

.nonecircle {
  color: #000000;
}

.btn_area_news {
  float: none;
  margin: 0 auto;
  text-align: center;
  padding-top: 40px;
}

.about_container {
  max-width: 920px;
  margin: 0 auto;
  padding-top: 80px;
}

.about_sectionmt {
  margin-top: 80px;
  margin-bottom: 100px;
}

.about_section h3 {
  font-size: 16px;
  color: #8E8E8E;
  margin: 0;
  padding: 0;
  text-align: center;
  padding-bottom: 20px;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.about_section h4 {
  font-size: 34px;
  color: #333333;
  line-height: 1.8;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: "Shippori Mincho", serif;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.about_section p {
  margin: 0;
  font-size: 18px;
  line-height: 1.9;
  padding: 60px 0;
  letter-spacing: 0.06em;
}

.mission_img img {
  width: 100%;
}

table.about_table {
  width: 100%;
	font-size: 18px;
  letter-spacing: 0.06em;
	border-top: 1px solid #707070;
  border-collapse: collapse;
  margin-top: 40px;
  margin-bottom: 10px;
}

.about_table th,.about_table td {
	padding: 16px;
	font-weight: normal;
	text-align: left;
	border-bottom: 1px solid #707070;
}

.table_chui {
  font-size: 18px;
  letter-spacing: 0.06em;
}

.profile {
  max-width: 920px;
  margin: 0 auto;
  margin-top: 60px;
  margin-bottom: 120px;
}

.pt0 {
  padding-top: 0!important;
}

.profile_collections {
  max-width: 920px;
  margin: 0 auto;
  margin-top: 0px;
  margin-bottom: 120px;
}

.collections {
  max-width: 1040px;
  margin: 0 auto;
  margin-top: 60px;
  margin-bottom: 60px;
}

.profile_detail h2 {
  color: #8E8E8E;
  font-size: 16px;
  font-family: "Shippori Mincho", serif;
  padding: 0;
  margin: 0;
  letter-spacing: 0.06em;
  text-align: center;
}

.profile_detail h3 {
  font-size: 34px;
  font-family: "Shippori Mincho", serif;
  padding: 0;
  margin: 0;
  letter-spacing: 0.06em;
  padding-top: 30px;
  padding-bottom: 60px;
  font-weight: 400;
  text-align: center;
}

.profile_img {
  text-align: center;
}

.profile_img img {
  width: 312px;
  height: auto;
  /* 画像の下に隙間が空くのを防ぐ（任意） */
  display: block;
  margin: 0 auto;
}

.profile_img_txt {
  /* 画像の幅と合わせる */
  width: 312px;
  /* 親要素(profile_img)の中でこのブロック自体を中央に寄せる */
  margin: 0 auto;
}

.profile_img_txt p {
  /* テキストを右寄せにする */
  text-align: right;
  font-size: 14px;
  letter-spacing: 0.045em;
  margin: 0;
  padding: 0;
  padding-top: 10px;
}

.profile_bigtxt {
  font-size: 34px;
  text-align: center;
  line-height: 1.8;
  margin: 0;
  padding: 0;
  padding-top: 30px;
}

.profile_minitxt {
  font-size: 18px;
  padding-top: 6px;
  margin: 0;
  padding: 0;
  padding-bottom: 40px;
  text-align: center;
}

.profile_txt p {
  line-height: 1.8;
  font-size: 18px;
  margin: 0;
  padding: 0;
}

.collections_img {
  display: flex;
  flex-wrap: wrap;
  gap: 80px;
  align-items: center;
}

.collections_left {
  width: calc(50% - 40px);
  line-height: 0;
}

.collections_left img {
  width: 100%;
}

.collections_right {
  width: calc(50% - 40px);
}

.collections_right p {
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: 0.06em;
  margin: 0;
  padding: 0;
}


.tabbtn_area .arrow-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F1F1F1;
    border-radius: 10px;
    color: #333333;
    font-size: 18px;
    text-decoration: none;
    font-family: "Shippori Mincho", serif;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    height: 70px;
    box-sizing: border-box;
}

.tabbtn_area .txtspan {
    flex-grow: 1;
    padding-left: 20px;
    line-height: 1.4;
    text-align: left;
}

.tabbtn_area .arrow-btn .line {
    width: 32px;
    height: 1px;
    background-color: #333;
    z-index: 2;
    transition: transform 0.3s ease;
    margin-right: 0;
}

.tabbtn_area .arrow-btn .circle {
    width: 35px;
    height: 35px;
    background-color: rgb(222 181 100 / 0.4);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    margin-left: -20px;
}

.contact_inner {
  max-width: 920px;
  margin: 0 auto;
  margin-top:40px;
  margin-bottom: 120px;
}

.form_area {
  background: #F1F1F1;
  padding: 50px 60px 60px;
}

.about_left3 {
  position: relative;
}


@media (min-width: 767.1px) {
  .pc_none {
    display: none;
  }
}

.vis {
  display: none!important;
}

@media (max-width: 767px) {
  .header-logo img {
    height: 36px;
  }

  .fv_txt h2 {
    font-size: 24px;
  }

  .sp_none {
    display: none;
  }

  .header-right {
    display: none;
  }

  .fv_img {
    padding: 0 0 0 60px;
    margin-top: 80px;
  }

  .fv_txt img {
    height: 130px;
  }

  .fv_txt {
    top: -50px;
    left: 20px;
  }

  .contentfoot h2 {
    font-size: 32px;
  }

  .about {
    padding-top: 60px;
    padding-bottom: 80px;
  }

  .about_inner {
    gap: 40px;
  }

  .about_left {
    width: 100%;
    order: 2;
    padding-left: 20px;
    padding-right: 20px;
  }

  .about_left2 {
    padding-left: 20px;
    padding-right: 20px;
  }

  .about_left3 {
    padding-right: 20px;
  }

  .about_right {
    width: 100%;
    padding: 0 20px;
    order: 1;
  }

  .about_right h2 {
    font-size: 24px;
  }

  .about_right h3 {
    font-size: 22px;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .about_right p {
    font-size: 16px;
    padding-bottom: 40px;
  }

  .news_inner h2 {
    font-size: 24px;
  }

  .news_inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  .news_inner .btn_area2 .arrow-btn {
    padding-left: 0;
  }

  .news_list a {
    width: 100%;
  }

  .news_list a p {
    font-size: 16px;
    padding-top: 5px;
  }

  .news_list a p.data {
    color: #797979;
    font-size: 14px;
    padding-top: 3px;
  }

  .news_list {
    gap: 30px;
  }

  .header-inner {
    padding: 10px 20px;
  }

  .reservebtn {
    padding-left: 20px;
    padding-right: 20px;
    gap: 20px;
    padding-top: 30px;
    padding-bottom: 40px;
  }

  .reservebtn a {
    width: 50%;
    font-size: 16px;
    height: 46px;
    line-height: 44px;
  }

  .contentfoot {
    top: 60px;
  }

  .reserve_inner {
    padding: 15px 0;
  }

  .reservecontents {
    flex-wrap: wrap;
    padding-left: 20px;
    padding-right: 20px;
    gap: 40px;
  }

  .reserve_inner_left {
    font-size: 14px;
  }

  .reserve_inner_right {
    font-size: 14px;
  }

  .reserve_left {
    width: 100%;
  }

  .reserve_left iframe {
    height: 180px;
  }

  .reserve_right {
    width: 100%;
  }

  .foot_inner {
    flex-wrap: wrap;
  }

  .foot_left {
    width: 100%;
  }

  .foot_right {
    width: 100%;
  }

  .foot_link {
    text-align: center;
  }

  .foot {
    padding-top: 40px;
    padding-bottom: 60px;
  }

  .foot_link a img {
    height: 34px;
  }

  .lower_txt {
    padding-left: 20px;
  }

  .lower_txt h2 {
    font-size: 24px;
  }

  .lower_txt h3 {
    font-size: 14px;
    letter-spacing: 0.06em;
  }

  .pankuzu {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .sns {
    justify-content: center;
    margin-bottom: 20px;
  }

  .foot_right {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .menu a {
    font-size: 16px;
  }

  .lower_txt {
    padding-top: 120px;
  }

  .btn-trigger {
    position: relative;
    width: 40px;
    height: 24px;
    cursor: pointer;
  }
  .btn-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    background-color: #212121;
    border-radius: 4px;
  }
  .btn-trigger, .btn-trigger span {
    display: inline-block;
    transition: all .5s;
    box-sizing: border-box;
  }
  .btn-trigger span:nth-of-type(1) {
    top: 0;
  }
  .btn-trigger span:nth-of-type(2) {
    top: 11px;
  }
  .btn-trigger span:nth-of-type(3) {
    bottom: 0;
  }

  #btn01.active2 span:nth-of-type(1) {
    -webkit-transform: translateY(12px) rotate(-45deg);
    transform: translateY(12px) rotate(-45deg);
  }
  #btn01.active2 span:nth-of-type(2) {
    opacity: 0;
  }
  #btn01.active2 span:nth-of-type(3) {
    -webkit-transform: translateY(-10px) rotate(45deg);
    transform: translateY(-10px) rotate(45deg);
  }

  /* ヘッダーの高さ */
  :root {
    --header-height: 0px;
  }

  .btn-trigger {
    position: relative;
    z-index: 1002;
  }


  /* ナビ（初期状態：右に隠しておく） */
  #g-nav {
    position: fixed;
    top: var(--header-height);
    right: 0; /* 左ではなく右に固定 */
    width: 85%; /* ここで幅を調整。15%分が左側の余白になります */
    height: calc(100vh - var(--header-height));
    background: #F3F3F3;
    z-index: 1001; /* btn-trigger(1002)より少し下に設定 */

    /* スライドとフェードのアニメーション設定 */
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%); /* 画面の右外側に押し出す */
    transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
  }

  /* 表示状態（左に戻ってくる） */
  #g-nav.panelactive {
    opacity: 1;
    visibility: visible;
    transform: translateX(0); /* 定位置（右端）に戻る */
  }

  /* 中央寄せ（任意） */
  #g-nav ul {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #g-nav .f-nav .flex {
    padding: 0 20px;
    margin-top: 40px;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: flex-start;
  }

  #g-nav .f-nav .navcon {
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 0px;
  }

  #g-nav .f-nav .li {
    border-top: solid 1px #FFFFFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    padding: 18px 15px;
    letter-spacing: 0.8px;
    transition: 0.5s;
    width: 100%;
  }

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

  .hamburger_menu {
    width: 100%;
    margin-top: 40px;
    text-align: center;
  }

  .hamburger_menu .cta-buttons {
    justify-content: center;
    gap: 20px!important;
  }

  .hamburger_menu .cta-buttons .btn {
    width: 135px!important;
    line-height: 34px!important;
    height: 36px!important;
  }

  #g-nav .f-nav .li a {
    font-size: 14px;
    font-weight: 500;
    color: #333333;
  }

  .honyaku .lang-switch {
    text-align: right;
    padding-right: 20px;
    margin-top: 80px;
  }

  .about_container {
    padding-top: 60px;
  }

  .about_section {
    padding-left: 20px;
    padding-right: 20px;
  }

  .about_section h3 {
  font-size: 14px;
  }

  .about_section h4 {
    font-size: 24px;
  }

  .about_section p {
      margin: 0;
      font-size: 16px;
      line-height: 1.9;
      padding: 30px 0 40px;
      letter-spacing: 0.06em;
  }

  .about_table th {
    width: 30%;
    padding-left: 0;
    margin-left: 0;
  }

  .about_table td {
    margin-right: 0;
    padding-right: 0;
  }

  .fv_img img {
    height: 220px;
    object-fit: cover;
  }

  .news_detail {
    max-width: 100%;
    margin: 0 auto;
    margin-top: 40px;
    margin-bottom: 100px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .news_data {
    font-size: 16px;
  }

  .news_bigttl {
    font-size: 18px;
    letter-spacing: 0.04em;
    margin: 0;
    padding: 0;
    padding-top: 10px;
    padding-bottom: 20px;
  }

  .news_detail_img {
    line-height: 0;
  }

  .news_detail_img img {
    width: 100%;
  }

  .news_detail_txt {
    font-size: 16px;
    letter-spacing: 0.04em;
    margin: 0;
    padding: 0;
    padding-top: 20px;
    padding-bottom: 10px;
    line-height: 1.8;
  }

  .profile {
    max-width: 100%;
    margin: 0 auto;
    margin-top:40px;
    margin-bottom: 100px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .profile_collections {
    max-width: 100%;
    margin: 0 auto;
    padding-top: 0;
    margin-bottom: 100px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .profile_detail h2 {
    font-size: 14px;
  }

  .profile_detail h3 {
    font-size: 24px;
    font-family: "Shippori Mincho", serif;
    padding: 0;
    margin: 0;
    letter-spacing: 0.06em;
    line-height: 1.5;
    padding-top: 20px;
    padding-bottom: 30px;
    font-weight: 400;
    text-align: center;
  }

  .profile_bigtxt {
    font-size: 24px;
    text-align: center;
    line-height: 1.8;
    margin: 0;
    padding: 0;
    padding-top: 20px;
  }

  .profile_img_txt p {
    font-size: 12px;
  }

  .profile_minitxt {
    font-size: 16px;
    padding-top: 5px;
    margin: 0;
    padding: 0;
    padding-bottom: 40px;
    text-align: center;
  }

  .profile_txt p {
    line-height: 1.8;
    font-size: 16px;
    margin: 0;
    padding: 0;
  }

  .collections {
    max-width: 100%;
    margin: 0 auto;
    margin-top: 40px;
    margin-bottom: 40px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .collections_img {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
  }

  .collections_left {
    width: 100%;
    line-height: 0;
  }

  .collections_left img {
    width: 100%;
  }

  .collections_right {
    width: 100%;
  }

  .collections_right p {
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0.06em;
    margin: 0;
    padding: 0;
  }

  table.about_table {
    font-size: 16px;
  }

  .table_chui {
    font-size: 16px;
  }

  .tabbtn_area {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      padding-top: 40px;
  }

  .tabbtn_area .arrow-btn {
      font-size: 14px;
      height: 60px;
  }

  .tabbtn_area .txtspan {
    padding-left: 15px;
    line-height: 1.2;
  }

  .tabbtn_area button {
      width: calc((100% - 20px) / 2);
      font-size: 14px;
  }

  .tabbtn_area .arrow-btn .circle {
    width: 28px;
    height: 28px;
    margin-left: -12px;
  }

  .tabbtn_area .arrow-btn .line {
      width: 26px;
      height: 1px;
      background-color: #333;
      z-index: 2;
      transition: transform 0.3s ease;
      margin-right: 0;
  }

}

@media (max-width: 767px) {
  .txtspan {
    padding-right: 5px;
  }

  .tabbtn_area .arrow-btn {
      font-size: 13px;
      height: 60px;
  }
}

/* フォームの各行 */
.form-group {
  display: flex;
  margin-bottom: 24px;
  align-items: center;
}

/* ラベルのカラム（左側） */
.label-column {
  width: 280px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.label-column label {
  font-weight: bold;
  font-size: 15px;
}

.label-column2 label {
  width: 100%;
}


/* 必須バッジ */
.badge-required {
  background-color: #b89136; /* 画像に近いゴールド系 */
  color: #fff;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 10px;
}

.badge-required2 {
  margin-left: 0;
  margin-top: 10px;
}

/* 入力項目のカラム（右側） */
.input-column {
  flex-grow: 1;
}

/* テキスト入力・エリアの共通設定 */
.input-text, .input-textarea {
  width: 100%;
  padding: 12px;
  border: 1.5px solid #D7DDE4;
  border-radius: 6px;
  box-sizing: border-box;
  font-size: 16px;
  background-color: #fcfcfc;
  line-height: 1.6;
}

.input-textarea {
  height: 200px;
  resize: vertical;
}

/* ラジオボタン */
.radio-label {
  margin-right: 25px;
  cursor: pointer;
  font-size: 15px;
}

.radio-label input[type="radio"] {
  margin-right: 8px;
  transform: scale(1.2);
}

/* お問い合わせ内容のようにラベルを上に合わせる場合 */
.align-start {
  align-items: flex-start;
}
.align-start .label-column {
  padding-top: 10px;
  flex-wrap: wrap;
}

/* 送信ボタン部分 */
.submit-container {
  text-align: center;
  margin-top: 60px;
}

.submit-button {
  background-color: #a48e84; /* 画像に近いグレーブラウン */
  color: #fff;
  border: none;
  padding: 20px 80px;
  font-size: 20px;
  border-radius: 50px; /* 角丸を大きく */
  cursor: pointer;
  transition: opacity 0.3s;
}

.submit-button:hover {
  opacity: 0.8;
}

/* モーダル全体（最初は非表示） */
.modalArea {
  display: none;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 背景の暗幕 */
.modalBg {
  width: 100%;
  height: 100%;
  background-color: rgba(121, 121, 121, 0.9);
}

/* モーダルの箱 */
.modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;          /* スマホを考慮して90% */
  max-width: 800px;    /* 最大幅 */
  background-color: #fff;
  padding: 60px 20px 40px;
  box-sizing: border-box; /* パディングを含めて幅を計算 */
}

/* 中身のスクロール制御 */
.modalContents {
  max-height: 70vh;    /* 画面の高さの70%までに制限 */
  overflow-y: auto;    /* 中身が多ければスクロール */
  -webkit-overflow-scrolling: touch; /* iOSのスクロールを滑らかに */
  padding-left: 60px;
  padding-right: 60px;
}

.modalContents2 {
  padding-left: 00px;
  padding-right: 00px;
}


/* タイトル */
.modalWrapper h2 {
  font-family: "Shippori Mincho", serif;
  margin-bottom: 27px;
  text-align: center;
  font-size: 30px;
  color: #000;
  letter-spacing: 0.06em;
  font-weight: normal;
}

/* 本文テキスト */
.modalContents p {
  font-size: 16px;
  line-height: 2;
  color: #000;
  letter-spacing: 0.06em;
  margin: 0;
  padding-bottom: 60px;
}

/* 閉じるボタン（×） */
.closeModal {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 24px;
  text-align: center;
  font-weight: 500;
  width: 34px;
  height: 34px;
  line-height: 32px;
  cursor: pointer;
  color: #fff;
  background: #DEB564;
  border-radius: 50px;
}

.modalimg {
  text-align: center;
}

.modalimg img {
  width: 300px;
  height: auto;
  object-fit: cover;
}

.closeModal:hover {
  opacity: 0.8;
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.minitxt {
  font-size: 12px;
  right: 20px;
  bottom: 15px;
  position: absolute;
  letter-spacing: 0.06em;
  /* 1. まず、文字の周りにしっかりした「白い縁」を作る */
    -webkit-text-stroke: 2px white;

    /* 2. その白い縁を外側にじわーっと広げて「ぼかす」 */
    text-shadow:
      0 0 4px white,
      0 0 8px white,
      0 0 12px white;

    /* 縁と中身を綺麗に重ねる設定 */
    paint-order: stroke fill;
}

.modal_img_flex {
  display: flex;
  flex-wrap: wrap;
  gap: 55px;
  margin-top: 20px;
}

.modal_img_flex2 {
  gap: 10px;
}

.modalimgone {
  width: calc((100% - 110px) / 3);
}

.modalimgone2 {
  width: calc((100% - 20px) * 175 / 619)!important;
}

.modalimgone3 {
  width: calc((100% - 20px) * 259 / 619)!important;
}

.modalimgone4 {
  width: calc((100% - 20px) * 185 / 619)!important;
}

.modalimgone img {
  width: 100%;
}

.modalimgone2 img, .modalimgone3 img, .modalimgone4 img, {
  width: 100%!important;
  height: auto!important;
  display: block!important;
}

.modalimgone p {
  font-size: 12px;
  font-weight: 500;
  padding-bottom: 30px;
  line-height: 1.5;
}

.demo_height {
    height: 400px;
    overflow: scroll;
    padding-left: 60px;
    padding-right: 60px;
}

#demo {
  margin-top: 20px;
}

#demo table {
    width: 100%;
    border-collapse: collapse;
    border: solid #CCC;
    border-width: 1px;
    font-size: 14px;
    color: #000;
    font-weight: normal;
    font-family: 'Noto Sans JP', sans-serif;
}

#demo table tr th, #demo table tr td {
    padding: 20px 15px;
    text-align: left;
    vertical-align: top;
    border: solid #DEDBD2;
    border-width: 1px;
    font-size: 14px;
    color: #000;
    font-weight: normal;
}

#demo table tr th {
    width: 25%;
    background: #F2F0E9;
    font-size: 14px;
    color: #000;
    font-weight: normal;
}

.demo_height table tr th, .demo_height table tr td {
    font-size: 16px;
}
.demo_height table tr th {
    width: 25%;
}

.tabletxt {
  font-size: 16px;
  padding-top: 10px;
  line-height: 2;
}

.syogai {
    font-size: 12px;
    left: 20px;
    top: 284px;
    position: absolute;
    letter-spacing: 0.06em;
    -webkit-text-stroke: 2px white;
    text-shadow: 0 0 4px white, 0 0 8px white, 0 0 12px white;
    paint-order: stroke fill;
}

@media (max-width: 767px) {
  .minitxt {
    font-size: 10px;
    right: 10px;
    bottom: 10px;
  }

  .syogai {
    font-size: 10px;
    left: 30px;
    top: auto;
    bottom: 15px;
  }

  .modalWrapper {
    width: 85%;
    max-width: calc(100% - 40px);
    padding: 50px 10px;
  }
  .modalContents h1 {
    font-size: 22px;
    margin-bottom: 25px;
  }
  .modalContents p {
    font-size: 14px;
    line-height: 1.8;
    padding-bottom: 40px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .closeModal {
      position: absolute;
      top: 15px;
      right: 15px;
      font-size: 20px;
      text-align: center;
      font-weight: 500;
      width: 28px;
      height: 28px;
      line-height: 26px;
      cursor: pointer;
      color: #fff;
      background: #DEB564;
      border-radius: 50px;
  }

  .modalimg img {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .form-group {
    flex-direction: column;
    align-items: flex-start;
  }
  .label-column {
    width: 100%;
    margin-bottom: 8px;
  }
  .submit-button {
    width: 80%;
    padding: 15px 20px;
    font-size: 18px;
  }

  .contact_inner {
    margin-top: 20px;
  }

  .form_area {
      background: #F1F1F1;
      padding: 40px 20px 50px;
  }

  .input-column {
    width: 100%;
  }

  .label-column2 label {
    width: auto;
  }

  .badge-required2 {
      margin-left: 10px;
      margin-top: 0px;
  }

  .submit-container {
    margin-top: 40px;
  }

  .contact_inner {
    margin-bottom: 100px;
  }

  #demo table tr th, #demo table tr td {
      padding: 18px 10px;
      font-size: 14px !important;
  }

  .modalContents {
      padding-left: 0px;
      padding-right: 0px;
  }

  .modal_img_flex {
    padding-left: 20px;
    padding-right: 20px;
    gap: 10px;
  }

  .modalimgone {
    width: calc((100% - 20px) / 3);
  }

  .modalWrapper h2 {
    font-size: 22px;
    padding-left: 20px;
    padding-right: 20px;
    line-height: 1.6;
  }

  .modalimgone p {
      font-size: 10px;
      font-weight: 500;
      padding-bottom: 30px;
      line-height: 1.4;
      padding-left: 0!important;
      padding-right: 0!important;
  }

  .demo_height {
      height: 400px;
      overflow: scroll;
      padding-left: 20px;
      padding-right: 20px;
  }

  .tabbtn_area .arrow-btn .circle2 {
    margin-left: -14px;
  }

}

/* フェードインの初期状態 */
.fadein {
  opacity: 0;
  transform: translateY(30px); /* 30px下に下げておく */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform; /* ブラウザの描画を最適化 */
}

/* クラス「active」がついた時の状態 */
.fadein.active {
  opacity: 1;
  transform: translateY(0);
}

/* 翻訳ボタン本体は隠すが、display:noneは避ける */
#google_translate_element {
    position: absolute;
    top: -9999px;
    left: -9999px;
    height: 0;
    width: 0;
    overflow: hidden;
}

/* ページ上部の翻訳バーを強制的に消す */
.goog-te-banner-frame {
    display: none !important;
}