@charset "UTF-8";
/*==========================================
mainViewのスタイル（初期設定 最大：767px）
===========================================*/
.mainView {
  position: relative;
  background-attachment: fixed; /* 背景を固定 */
}
.mainView:before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
  width: 100%;
  height: 100vh;
  background-image: url("../img/bg-body-sp.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.bg-slider {
  width: 100vw;
  height: 100vh;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 100;
}
.bg-slider .box {
  margin-top: 15vh;
}
/* -----メイン画像ロゴ----- */
.bg-slider .pc {
  display: none;
}
/* -----共通----- */
.subtitle1, .subtitle2 {
  padding-bottom: 0.5em;
}
.subtitle1 img, .subtitle2 img {
  width: 95%;
  height: auto;
}
img {
  border-radius: 5px;
}
.shadow {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); /* アルファ値を 0.5 に設定 */
}
/* -----accent（クーポン）----- */
.accent {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.accent img {
  width: 90%;
  border-radius: 5px;
  max-width: 806px;
  margin-top: 1em;
  margin-bottom: 1em;
}
/* -----memo---- */
.memo {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  border: thin solid #FECA4E;
  padding: 10px;
  background-color: hsla(0, 0%, 100%, 0.75);
  text-align: center;
}
.memo h3 img {
  max-width: 26px;
  margin-bottom: 5px;
}
.memo p {
  text-align: justify;
}
.memo dl {
  text-align: left;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 1em;
  margin-bottom: 1em;
}
.memo dl dt {
  background-color: #000000;
  padding: 5px;
  color: #FFFFFF;
  margin-bottom: 0.5em;
}
.memo dl dd {
  margin-bottom: 0.5em;
}
/*==========================================
greetingのスタイル（初期設定 最大：767px）
===========================================*/
#greeting {
  margin-top: 7.5em;
  margin-bottom: 3em;
}
#greeting .greeting-inner {
	width: 95%;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 2em;
	padding-top: 2em;
	border-radius: 5px;
	padding-left: 20px;
	padding-right: 20px;
}
.content1 .textWrap {
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-bottom: 2em;
}
.textWrap .text1.move_left2 p {
	line-height: 1.9;
	margin-bottom: 0.5em;
	color: #F3EEDC;
	font-size: 1.1em;
}
.textWrap .text1.move_left2 h2 img {
  display: block;
  max-width: 100%; /* 親要素の幅を超えない */
  height: auto;
  margin: 0 auto; /* 中央寄せ */
}
.textWrap .text1.move_left2 h2 {
  text-align: center;
}
/* SNS 全体のブロック */
.sns {
  margin: 2rem auto 0; /* 上に少し余白、中央寄せ */
  text-align: center;
}
/* リストのリセット & 横並び設定 */
/* SNS 全体のブロック */
.sns {
  position: relative;
  max-width: 360px;
  margin: 2.5rem auto 0;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;

  /* ▼ ブラウン背景に合う #006888 上品ブルー */
  background: linear-gradient(
    180deg,
    #0a5f73 0%,   /* 上：#006888を少し明るく */
    #064d5e 50%,  /* 中央：深みのある青 */
    #043b47 100%  /* 下：ブラウンに馴染む暗青 */
  );

  /* ▼ 浮きすぎない、今のトーンに合う影 */
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.32),
    inset 0 0 10px rgba(255, 255, 255, 0.04);

  display: flex;
  align-items: center;
  justify-content: center;
}

.sns {
  flex-direction: column; /* ← 追加：縦並びにする */
  gap: 0.6rem; /* 見出しとアイコンの間に余白 */
}
/* ▼金縁を強めて高級感アップ */
.sns::before {
  content: "";
  position: absolute;
  inset: -2px; /* 太めの金縁（-3 → -4px） */
  border-radius: inherit;
  background: linear-gradient(90deg, #C8A74A 0%, /* 落ち着いた金 */ #EEDFA8 30%, /* 明るめの金のハイライト */ #C8A74A 100% /* 元の金色に戻す */
    );
  opacity: 0.85; /* 金縁をしっかり見せる */
  filter: blur(1px);
  z-index: -1;
}
/* リストのリセット & 横並び設定 */
.sns ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}
/* 各アイコン */
.sns li {
  flex: 0 0 auto;
}
/* タップしやすいサイズ（スマホ基準） */
.sns li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  position: relative;
  overflow: visible;
  background: linear-gradient(145deg, #0F2F29, #0B241F);
}
sns li a::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(rgba(255, 240, 200, 0.35), rgba(255, 220, 160, 0));
  z-index: -1;
}
/* アイコン画像 */
.sns li img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  filter: saturate(0.9) brightness(0.95);
}
/* ホバー・フォーカス時：ふわっと持ち上がる */
.sns li a:hover, .sns li a:focus-visible {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  filter: brightness(1.07);
}
.sns-label {
  margin: 0 1.2rem 0 0;
  color: #DCCBA2; /* ← 指定の色 */
  white-space: nowrap;
  letter-spacing: 0.5px; /* 少し上品に */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  font-size: 1rem;
  font-weight: 600;
}
/* ラベル + アイコンを横並びにしたい場合 */
.sns {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sns ul {
  gap: 1.2rem;
}
/*==========================================
galleryのスタイル（初期設定 最大：767px）
===========================================*/
.gallery {
  margin-bottom: 0em;
  margin-top: 5.5em;
}
#gallery .gallery-inner {
	width: 95%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 4em;
	padding: 2em 0.8em;
	border-radius: 5px;
	background-color: rgba(38, 24, 14, 0.68);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(9px);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-align: center;
}

.gallery-inner ul {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  /* スマホサイズでのみ横スクロール */
  overflow-x: auto; /* 横スクロールを有効化 */
  white-space: nowrap; /* li要素を折り返さない */
}
.gallery-inner ul li {
  margin-bottom: 1em;
  display: inline-block; /* 横並びにする */
  margin-right: 0.5em; /* li要素間の余白 */
  margin-left: 0.5em; /* li要素間の余白 */
}
.gallery-title {
  font-size: 1.4em;
  margin: 30px 0 15px;
  text-align: center;
  font-family: 'Georgia', 'Times New Roman', serif;
  color: #F3EEDC; /* ← 変更しました */
  letter-spacing: 1px;
  position: relative;
}
.gallery-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px; /* 少し太くすると丸みが目立ちやすい */
  background: #F3EEDC;
  margin: 8px auto 0;
  border-radius: 5px; /* ← ここを大きくすると丸みが出ます */
  opacity: 0.7;
}
/*==========================================
priceのスタイル（初期設定 最大：767px）
===========================================*/
.price {
  margin-bottom: 5.5em;
  margin-top: 0em;
}
#price .price-inner {
	width: 95%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 4em;
	padding: 2em 0.8em;
	border-radius: 5px;
	background-color: rgba(38, 24, 14, 0.68);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(9px);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-align: center;
}

.plan-table {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;

  /* 黄みを抑えた上品クリーム（アイボリー→シャンパン） */
  background: linear-gradient(
    135deg,
    #FBF6EA 0%,
    #F1E6D2 55%,
    #E6D5B7 100%
  );

  /* 枠線：ギラつかないシャンパンゴールド */
  border: 1px solid #d6b25e;
  border-image: linear-gradient(90deg, #caa855, #f0deab, #caa855) 1;

  /* 内側の艶 + 外側影（ブラウン背景に馴染む） */
  box-shadow:
    inset 0 0 20px rgba(255, 255, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 14px 30px rgba(25, 12, 5, 0.28);
}

.plan-name {
  background: linear-gradient(180deg, #2f2116 0%, #1e140d 100%);
  color: rgba(255, 245, 220, 0.92);
  border: 1.5px solid rgba(214, 178, 94, 0.85);

  /* ▼ 影を控えめに */
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.22),
    inset 0 0 10px rgba(255, 220, 170, 0.08);
}


.plan-table .plan {
  /*background-color: #FFFBEA;*/
  color: #000000;
  /*border: 2px solid #bfa046;*/
  border-radius: 5px;
  margin-bottom: 1em;
  padding: 1em 0.5em;
  text-align: center;
  font-weight: bold;
}
.plan-name {
  display: block;
  max-width: 600px;
  width: 100%;
  margin: 1.5em auto 1em;
  padding: 12px 24px;

  /* 深緑→ダークブラウン（ゴールド文字が映える） */
  background: linear-gradient(180deg, #3a2616 0%, #26180f 100%);
  color: rgba(255, 245, 220, 0.94);

  border-radius: 40px;
  border: 1.5px solid #d6b25e;
  border-image: none;

 box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 235, 180, 0.25),
    inset 0 0 10px rgba(255, 220, 170, 0.08);

  text-align: center;
	text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.35);
		
}

/* 英語（上段） */
.plan-name .plan-name-en {
  display: block;
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}
/* 日本語（下段） */
.plan-name .plan-name-jp {
  display: block;
  /*font-size: 0.85em;*/
  font-size: 1em;
  opacity: 0.9;
}
.plan-item {
  display: flex;
  flex-wrap: wrap; /* 折り返し可 */
  justify-content: center;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 1.5em;
}
.plan-item:last-child {
  margin-bottom: 0;
}
/* 時間と通常料金の間に「・・・」を挿入（共通では非表示） */
.plan-prices .normal::before {
  content: "・・・・・・";
  margin: 0 0.5em;
}
/* プライマリグループ */
.plan-prices, .plan-campaign {
  display: flex;
  align-items: center;
  gap: 0.25em;
}
.plan-item .arrow {
  font-size: 1em; /* 矢印アイコンのサイズ */
  color: inherit; /* 親の文字色に合わせる */
  display: inline-block;
  vertical-align: middle;
}
.campaign-label {
  background-color: #c62828;
  color: #fffbe6;
  border: 1px solid #ffd700;
  /*padding: 1px 4px;*/
  border-radius: 3px;
  font-size: 0.65em;
  font-weight: bold;
  letter-spacing: 0.5px;
  margin-right: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.5em;
  line-height: 1.2;
  padding: 0 0.4em;
}
.campaign-price {
  color: #ffd700;
}
.extension {
  color: #0000A3;
}
/*==========================================
accessImgのスタイル（初期設定 最大：767px）
===========================================*/
#accessImg {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  clear: both;
  padding-top: 2em;
  display: block !important;
}
.access-title {
  font-size: 1.4em; /* .gallery-title と統一 */
  margin: 30px 0 15px;
  text-align: center;
  font-family: 'Georgia', 'Times New Roman', serif;
  color: #F3EEDC;
  letter-spacing: 1px;
  position: relative;
  display: block;
}
.access-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: #F3EEDC;
  margin: 8px auto 0;
  border-radius: 5px;
  opacity: 0.7;
}
/* セクション全体の中央寄せ（既存と同じ） */
#accessImg .accessTitle {
  text-align: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
#accessImg h3 {
	margin-top: 1em;
	font-size: 1em;
	padding: 0.5em;
	color: #000000;
	border: thin solid #F3EEDC;
	background-color: #F1E6D2;
}
#accessImg ul {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  /* スマホサイズでのみ横スクロール */
  overflow-x: auto; /* 横スクロールを有効化 */
  white-space: nowrap; /* li要素を折り返さない */
}
#accessImg ul li {
  margin-bottom: 1em;
  display: inline-block; /* 横並びにする */
  margin-right: 0.5em; /* li要素間の余白 */
  margin-left: 0.5em; /* li要素間の余白 */
}
/*==========================================
newsのスタイル（初期設定 最大：767px）
===========================================*/
.news {
  margin-bottom: 3em;
  margin-top: 3em;
}
#news .news-inner {
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#news .news-inner h2 {
  text-align: center;
  background-color: #D0A900;
  margin-bottom: 0px;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  font-family: "Libre Baskerville", serif;
  font-weight: 700;
  color: #FFFFFF;
}
#news .news-inner ul {
  max-height: 230px;
  overflow: scroll;
  background-color: #FFFFFF;
}
#news .news-inner ul li {
  border-bottom: 1px dotted #64605f;
  padding-left: 1em;
  padding-top: 0.5em;
  padding-bottom: 0.2em;
  margin: 0.5em;
}
#news .news-inner ul li .day {
  margin-right: 1em;
  font-weight: bold;
  margin-bottom: 0.5em;
  display: block;
}
#news .news-inner ul li:first-child .day:before {
  content: "new";
  background-color: #ff1900;
  color: #FFFFFF;
  font-weight: bold;
  font-size: 80%;
  border-radius: 3px;
  padding: 5px;
  margin-right: 3px;
}
/* ────────── スマホだけ（767px以下） ────────── */
@media screen and (max-width: 767px) {
  .plan-item {
    flex-wrap: wrap; /* スマホでは折り返しOK */
  }
  .plan-campaign {
    flex-basis: 100%; /* 必ず新しい行に */
    align-self: flex-start; /* 上寄せ */
    margin-top: -0.8em; /* 上への詰め */
    justify-content: center;
  }
  .plan-prices {
    gap: 1em; /* デフォルト 0.25em → 1em に拡大 */
  }
  .plan-table {
    position: relative;
    overflow: hidden;
    z-index: 0;
  }
.text1.move_left2 .no-save .greeting-img {
	width: 60%;
}
}
@media screen and (min-width:768px) {
  /*==========================================
mainViewのスタイル（最小：768px）
===========================================*/
  .mainView:before {
    background-image: url("../img/bg-body-tab.webp");
  }
  /* -----メイン画像ロゴ----- */
  .bg-slider .sp {
    display: none;
  }
  .bg-slider .pc {
    display: block;
  }
  /* -----共通----- */
  .subtitle2 img {
    width: 50%;
    height: auto;
  }
  /* -----memo---- */
  .memo {
    width: 70%;
    padding: 20px;
  }
  .bg-slider .box {
    margin-top: 0vh;
  }
  /*==========================================
greetingのスタイル（最小：768px）
===========================================*/
  #greeting .greeting-inner {
    padding: 2em;
  }
  .textWrap .text1.move_left2 h2 img {
    max-width: 250px;
    margin: 0 auto;
    display: block;
  }
  /*==========================================
galleryのスタイル（最小：768px）
===========================================*/
  #gallery .gallery-inner {
    width: 95%;
    padding: 5em 2em;
  }
  #gallery .gallery-inner .subtitle2 {
    margin-bottom: 2em;
  }
  .gallery-inner ul {
    width: 100%;
  }
  .gallery-inner ul li {
    width: 48%;
    margin-bottom: 1.5em;
    display: inline-block;
  }
  /*==========================================
priceのスタイル（最小：768px）
===========================================*/
  #price .price-inner {
    width: 95%;
    padding: 5em 2em;
  }
  .plan-item {
    flex-wrap: nowrap; /* 折り返し禁止 */
  }
  .plan-campaign {
    flex-basis: auto; /* 幅は中身に合わせる */
    align-self: center; /* 中央揃え */
    margin-top: 0; /* マージンもリセット */
  }
  .plan-prices .normal::before {
    display: inline; /* 「・・・」を表示 */
  }
  /* -----.coupon----- */
  .price-inner .flexbox .coupon p {
    width: 55%;
    display: inline-block;
  }
  .coupon p img {
    border-radius: 5px;
    width: 100%;
  }
  /* -----.note----- */
  .flexbox.cf .plan-table.matchHeight .note {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.5em;
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left: 2em;
  }
  .price-inner .accent4 {
    width: 50%;
  }
  .option {
    width: 80%;
  }
  /*==========================================
accessImgのスタイル（最小：768px）
===========================================*/
  /*  #accessImg .shop-accessImg {
    width: 40%;
    margin-left: 0%;
    margin-right: 0%;
    display: inline-block;
  }
  */
  #accessImg .accessTitle {
    width: 50%;
  }
  .accessvideo {
    width: 40%;
  }
  #accessImg h3 {
    padding: 1em;
    display: inline-block;
  }
  #accessImg h3 br {
    display: none;
  }
  #accessImg ul {
    width: 100%;
  }
  #accessImg ul li {
    width: 48%;
    margin-bottom: 1.5em;
    display: inline-block;
  }
  /*==========================================
newsのスタイル（最小：768px）
===========================================*/
  #news .news-inner {
    width: 95%;
    padding: 2em;
  }
}
@media screen and (min-width:1025px) {
  .mainView:before {
    background-image: url("../img/bg-body-pc.webp");
  }
  .accent #coupon {
    padding-top: 3em;
    padding-bottom: 3em;
  }
  /* -----memo---- */
  .memo {
    width: 40%;
    padding: 30px;
  }
  /*==========================================
greetingのスタイル（最小：1025px）
===========================================*/
  #greeting {
    margin-bottom: 4em;
  }
  #greeting .greeting-inner {
    width: 80%;
    border-radius: 8px;
  }
  .content1 {
    display: flex;
    align-items: center; /* 縦方向の中央揃え */
  }
  .content1 .textWrap {
    width: 49%;
    margin-right: auto; /* 右側に配置 */
  }
  .greeting .content1 .photo1 {
    width: 48%;
  }
  .box {
    display: flex;
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 縦方向の中央揃え */
  }
  .textWrap .text1.move_left2 h2 img {
    max-width: 294px;
  }
  .textWrap .text1.move_left2 p {
    font-size: 1.1em;
  }
  .sns li a {
    width: 64px;
    height: 64px;
  }
  /*==========================================
galleryのスタイル（最小：1025px）
===========================================*/
  #gallery .gallery-inner {
    width: 90%;
    padding: 4em 2em;
    border-radius: 8px;
  }
  .gallery-inner ul {
    width: 90%;
    padding: 0.5em 0em;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .gallery-inner ul li {
    width: 30%;
    margin-bottom: 1.5em;
    margin-right: 3.33%;
  }
  /*==========================================
priceのスタイル（最小：1025px）
===========================================*/
  #price .price-inner {
    width: 90%;
    padding: 4em 2em;
    border-radius: 8px;
  }
  .plan-item {
    gap: 1em;
  }
  .option {
    width: 40%;
  }
  /* -----.coupon----- */
  .accent #coupon {
    padding-top: 3em;
    padding-bottom: 3em;
  }
  /* -----.note----- */
  .flexbox.cf .plan-table.matchHeight .note {
    width: 40%;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    padding-left: 2.5em;
  }
  .price-inner .accent4 {
    width: 30%;
  }
  /*==========================================
accessImgのスタイル（最小：1025px）
===========================================*/
  /*  #accessImg .shop-accessImg {
    width: 20%;
    margin-left: 1%;
    margin-right: 1%;
    display: inline-block;
  }*/
  /*  #accessImg img {
    width: 20%;
  }*/
  #accessImg .accessTitle {
    width: 40%;
  }
  #accessImg h3 {
    font-size: 1.2em;
  }
  #accessImg ul {
    width: 90%;
    padding: 0.5em 0em;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  #accessImg ul li {
    width: 20%;
    margin-bottom: 1.5em;
    margin-left: 1%;
    margin-right: 1%;
  }
  /*==========================================
newsのスタイル（最小：1025px）
===========================================*/
  #news .news-inner {
    width: 80%;
    padding: 4em;
    border-radius: 8px;
    background-color: hsla(0, 0%, 100%, 0.00);
  }
  #news .news-inner h2 {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
  }
  #news .news-inner ul {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
  }
  #news .news-inner ul li {
    padding-top: 1em;
    padding-bottom: 1em;
  }
}