@charset "UTF-8";


:root {
  --red: #a40c0c;
  --yellow: #9d962c;
}



section.main_visual {
  position: relative;
  background: url(../images/top_bg.jpg) no-repeat center center / cover;
  background-size:cover;
  overflow: hidden;
  height: 100vh;
}
section.main_visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5); /* ← 黒の濃さはここで調整 */
  z-index: 1;
}
section.main_visual img.logo,
section.main_visual div.center,
section.main_visual div.center img,
section.main_visual div.center h1,
section.main_visual div.center h1 span.sta,
section.main_visual div.center h1 span.sta b {
  position: relative;
  z-index: 2;
}

section.main_visual img.logo {padding: 1em;}
section.main_visual div.center {
  display: flex;
  flex-direction: column;   /* ← これが無いのが横並びの原因 */
  align-items: center;      /* 横センター */
  justify-content: center; /* 縦センター */
  text-align: center;
}

section.main_visual div.center img {
  display: block;     /* inline回り込み防止 */
  float: none;        /* 万が一どこかでfloat当たってても無効化 */
  margin-bottom: 16px;
  width: 15vw;
}
section.main_visual div.center h1 {
  margin: 0;
  line-height: 1.3;
  color: #fff;
}
section.main_visual div.center h1 span.sta {font-size: 146px;font-weight: 200;}
section.main_visual div.center h1 span.sta b {color: var(--yellow);}


section.catch {
  background: var(--yellow);
  padding: 2em;
}
section.catch ul {
  display: flex;
  justify-content: center; /* ← 横方向センター揃え */
  align-items: center;     /* ← 縦方向センター揃え（高さが違ってもズレない） */
}
section.catch ul li {
  border-left: 1px solid #000;   /* ← 全部 左に｜ */
  padding: 0 1em;               /* ← 文字と｜の余白 */
  font-size: var(--fs-6);
  font-weight: 700;
  text-align: center;
}

section.catch ul li:last-child {
  border-right: 1px solid #000;  /* ← 最後だけ 右にも｜ */
}
section.catch ul li span {
  color:var(--red);
}


section.reservation {
}
section.reservation a {
  background: #a40c0c;
  color: #fff;
  border-radius: 300px;
  padding: 0.5em 2em;
  margin: 2em auto;
  display: block;
  text-align: center;
  width: 30%;
  font-size: var(--fs-7);

  transition: 
    background 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

/* ✅ hover */
section.reservation a:hover {
  background: #c01616;              /* 少し明るく */
  transform: translateY(-3px);      /* ふわっと浮く */
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

section.service {width: 80%;margin: 0 auto;max-width: 1500px;}


/* 見出しブロック全体 */
.sec-heading {
  text-align: center;
  margin: 60px 0 40px;
}

/* 上段：SERVICE + 左右ライン */
.sec-heading__line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px; /* 文字と線の間 */
}

/* 左右ライン */
.sec-heading__line::before,
.sec-heading__line::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #999; /* 線の色 */
}

/* 英字（SERVICE） */
.sec-heading__en {
  letter-spacing: 0.1em;
  padding: 0 0.5em; /* 線との余白 */
  font-size: var(--fs-12);
  line-height: normal;
}
.sec-heading__en b{
    font-weight: 300;
    color: var(--yellow);
}

/* 下の日本語 h2 */
.sec-heading__ja {
  font-size: var(--fs-5);
  color: #c00; /* 画像みたいな赤にしたければここで調整 */
}


section.service ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* ← 3列 */
  gap: 24px;  /* ← li同士の余白（お好みで） */
}
section.service ul li {
}
section.service ul li img {object-fit: cover;aspect-ratio: 16/10;}
section.service ul li h3 {color: var(--yellow);font-size: var(--fs-5);}
section.service ul li p {font-size: var(--fs-4);}

section.simulator {background: #efefe0;padding: 5em 0;margin: 5em 0;}
section.simulator div.wrap{width: 80%;margin: 0 auto;max-width: 1500px;display: flex;justify-content: space-between;}
section.simulator div.left {width: 40%;}
section.simulator div.left img {margin: 0 0 3em 0;}
section.simulator div.right {width: 55%;}
section.simulator div.right span {color: var(--yellow);font-size: var(--fs-6);font-weight: 600;}
section.simulator div.right h4 {font-size: var(--fs-10);line-height: 1.2;color: #313131;margin: 0.5em 0;}
section.simulator div.right p {font-size: var(--fs-4);line-height: 2;}
section.simulator div.right h5 {font-size: var(--fs-7);margin: 0.5em 0;color: #313131;font-weight: 500;}
section.simulator div.right img {margin: 0 0 1em 0;}


section.profile {width: 80%;margin: 0 auto;max-width: 1500px;
}
section.profile div.photo {display: flex;align-items: center;justify-content: space-around;}
section.profile div.photo img {width: 45%;}
section.profile div.photo div.text {width: 50%;}
section.profile div.photo div.text h3 {font-weight: 400;font-size: var(--fs-10);display: flex;align-items: center;}
section.profile div.photo div.text h3 span {margin: 0 0 0 1em;font-size: var(--fs-5);}
section.profile div.photo div.text h4 {font-size: var(--fs-8);color: #373737;font-weight: 700;margin: 0.5em 0;}
section.profile div.photo div.text p {font-size: var(--fs-5);line-height: 2;}
section.profile div.file {border: 4px solid #d1d1d1;border-radius: 30px;padding: 3rem;display: flex;justify-content: space-around;}
section.profile div.file table {
    width: 51%;
}
section.profile div.file table tbody {
}
section.profile div.file table tbody tr {
}
section.profile div.file table tbody tr th {background: #eaeae0;}
section.profile div.file table tbody tr td {
}
section.profile div.file table tbody tr th,section.profile div.file table tbody tr td{
    padding: 0.5em 1em;
    border-bottom: 1px solid #c5c5c5;
    font-size: var(--fs-4);
}
section.profile div.file div.movie {display: flex;width: 41%;}
section.profile div.file div.movie video {width: 46%;border-radius: 14px;margin: 0 1em;}
/* 最初の行だけ上にもボーダー追加 */
section.profile div.file table tbody tr:first-child th,
section.profile div.file table tbody tr:first-child td {
  border-top: 1px solid #c5c5c5;
}


section.price{width: 80%;margin: 0 auto;max-width: 1500px;
}
section.price .entry{
    border: 3px solid #c3c3c3;
    text-align: center;
    padding: 1em;
    font-size: var(--fs-9);
    font-weight: 700;
    color: #212121;
}
section.price .entry span{
    font-size: var(--fs-10);
}

section.price  ul.price-list{
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  gap: 24px;
  margin: 3em 0;
  }

/* カード基本 */
.price-card {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #d0d0d0;
  background: #fff;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* 上の色付きヘッダー */
.price-card .plan-name {
  margin: 0;
  padding: 1rem 0;
  font-weight: 700;
  color: #fff;
  font-size: var(--fs-5);
}

/* プランごとの色（グラデも好きに変えてOK） */
.price-card--vip .plan-name {
  background: linear-gradient(to bottom, #000000, #333333);
}

.price-card--platinum .plan-name {
  background: linear-gradient(to bottom, #0a204b, #6d7b99);
}

.price-card--gold .plan-name {
  background: linear-gradient(to bottom, #675a12, #9f8e21);
}

.price-card--silver .plan-name {
  background: linear-gradient(to bottom, #555555, #888888);
}

/* 価格部分 */
.price-card .plan-price {
  margin: 16px 0;
  font-size: 1.8rem;
  font-weight: 700;
  color: #c00;
}

.price-card .plan-price span {
  font-size: 2.2rem;
}

/* 下の3行ブロック */
.price-card .plan-detail {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 各行のスタイル */
.price-card .plan-detail li {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 0.95rem;
}

/* 行ごとの背景色（画像のニュアンス寄せ） */
.price-card .plan-detail li:nth-child(1) {
  background: #e8f5e4;
}
.price-card .plan-detail li:nth-child(2) {
  background: #e3edf7;
}
.price-card .plan-detail li:nth-child(3) {
  background: #f5e1e1;
}

/* 日本語ラベルと値 */
.price-card .plan-detail li span:first-child {
  text-align: left;
  font-size: var(--fs-4);
}
.price-card .plan-detail li span:last-child {
  text-align: right;
  font-weight: 700;
  font-size: var(--fs-4);
}

section.price ul.option {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

section.price .option-card {
  border: 1px solid #d0d0d0;
  background: #fff;
  padding: 20px 16px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

section.price .option-title {
  margin: 0 0 8px;
  font-size: var(--fs-5);
  font-weight: 700;
}

section.price .option-price {
  margin: 0 0 6px;
  font-size: 1.6rem;
  font-weight: 700;
  color: #c00;
}

section.price .option-price .montserrat {
  font-size: 1.9rem;
}

section.price .option-note {
  margin: 0;
  font-size: 0.9rem;
}
/* 工房料金 全体 */
.workshop {
  margin-top: 40px;
}

/* グレー帯のタイトル */
.workshop-title {
  background: #e6e6e6;
  text-align: center;
  padding: 10px 0;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
  font-size: var(--fs-6);
}

/* 料金リスト */
.workshop-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.workshop-list li {
  white-space: nowrap;
  font-size: var(--fs-5);
}

.workshop-list li span {
  font-weight: 700;
}

section.info {width: 80%;margin: 0 auto;max-width: 1500px;
}
section.info div.shop_info {display: flex;justify-content: space-around;}
section.info div.shop_info iframe {width: 50%;}
section.info div.shop_info div.text {width: 40%;}
section.info div.shop_info div.text h3 {color: #252525;line-height: 1.5em;margin: 0 0 0.5em 0;}
section.info div.shop_info div.text h3 span {font-size: var(--fs-6);}
section.info div.shop_info div.text p {font-size: var(--fs-4);line-height: 2;}
section.info div.shop_info div.text i.fa-brands.fa-instagram {font-size: var(--fs-10);color: gray;margin: 0.1em 0;}
section.info div.shop_info div.text a.reserve {
  background: var(--red);
  color: #fff;
  border-radius: 500px;
  display: block;
  text-align: center;
  width: 50%;
  padding: 1em 0;

  /* hover用の下準備 */
  transition:
    background 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

/* ✅ hover */
section.info div.shop_info div.text a.reserve:hover {
  background: #c01616;               /* 少し明るく（var(--red)より一段上） */
  transform: translateY(-3px);       /* 浮く */
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
p.copyright {text-align: center;padding: 5rem 0;}