.gol{color: #000;}

.font10px{font-size: 10px;}
.font12px{font-size: 12px;}
.font-1em{font-size: 1em;}
.font-15em{font-size: 1.5em;}

.mg-5p{margin: 5%;}
.mg-top5{margin-top: 5%;}
.mg-top10{margin-top: 10%;}
.mg-bt5{margin-bottom: 5%;}
.mg-bt10{margin-bottom: 10%;}

.pd0{padding: 0;}
.pd-3p{padding: 3%;}
.pd-5p{padding: 5%;}

.ulclear{padding: 0;}
.ulclear li{list-style: none;}

.text-ct{text-align: center;}

.title100{
    background: linear-gradient(to bottom, #EBEBEB, #ffffff);
    font-weight: normal;
    padding: 3% 0;
    text-align: center;
}
.title101{
  color: #333;
  font-weight: normal;
  font-size: 2em;
  text-align: center;
  width: 50%;
  margin: 3% auto;
  padding: 30px 0;
}

/*上下左右アニメーション*/
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s ease-out forwards;
}

.fade-in-down {
  opacity: 0;
  transform: translateY(-30px);
  animation: fadeInDown 0.8s ease-out forwards;
}

.fade-in-left {
  opacity: 0;
  transform: translateX(-30px);
  animation: fadeInLeft 0.8s ease-out forwards;
}

.fade-in-right {
  opacity: 0;
  transform: translateX(30px);
  animation: fadeInRight 0.8s ease-out forwards;
}

@keyframes fadeInUp {
  to {opacity: 1; transform: translateY(0);}
}

@keyframes fadeInDown {
  to {opacity: 1; transform: translateY(0);}
}

@keyframes fadeInLeft {
  to {opacity: 1; transform: translateX(0);}
}

@keyframes fadeInRight {
  to {opacity: 1; transform: translateX(0);}
}


/* 2カラム共通 */
.two-col {display: flex; gap: 20px; flex-wrap: wrap;}
.two-col .col {flex: 1; min-width: 300px;}

/* スマホで縦並び */
@media (max-width: 768px) {
  .two-col {
    flex-direction: column;
  }
}

/* ボタン各種 */
.ct-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  padding: 20px 30px;
  background-color: #5a5a5a;
  color: #ffffff;
  border: none;
  border-radius: 0px;
  text-decoration: none;
  font-size: 13px;
  transition: all 0.3s ease;
}
.ct-btn:hover {
  opacity: 0.85;
  transform: scale(1.03);
}

/*== 01. パンくず section ===================/////////////////==-*/
.sub-title {
  /*background: url("img/sub-bg.jpg") center/cover no-repeat;  背景画像 */
  background-color: #333;
  padding: 200px 0 5% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  color: #fff;
  margin-bottom: 8%;
}
.sub-title02 {
  /*background: url("img/sub-bg.jpg") center/cover no-repeat;  背景画像 */
  background-color: #333;
  padding: 200px 0 5% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  color: #fff;
}

/* 半透明のオーバーレイ */
.sub-title::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}
.sub-title02::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}

/* 中身 */
.sub-title__inner {
  position: relative;
  z-index: 1;
}

.sub-title__text {
  margin: 0;
  font-size: 32px;
  letter-spacing: 0.05em;
  font-weight: 600;
  font-weight: normal;
}

/* スマホ調整 */
@media (max-width: 600px) {
  .sub-title {padding: 80px 0 5% 0;}
  .sub-title02{padding: 80px 0 5% 0;}
  .sub-title__text {font-size: 16px;}
}



/*== 02. CONCEPT ===================/////////////////==-*/
/* ===== Concept Hero ===== */
.concept{
  position: relative;
  padding: 150px 0 8% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background: url("img/concept/cpbg02.jpg") center bottom/cover no-repeat;
  overflow: hidden;
}

.concept .lead{font-size: 1.3em; color: #FFF; line-height: 100%; margin: 10% 0 0 0;}
/* リード文の白文字をクッキリ表示 */
.concept .lead p{
  color:#fff;
  /* アウトライン風（4方向）＋外側ぼかし */
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
}


/* スマホ微調整 */
@media (max-width: 600px){
  .concept{padding: 100px 0 30% 0;}
  .concept .cap::before, .concept .cap::after{ width: 18vw; }
  .concept .lead{ font-size: 0.9em; line-height: 130%;}
}


/*== 03. LOCATION ===================/////////////////==-*/
.loc {background: url("img/location/hed01.jpg") no-repeat center center/cover;}
.loc01 h2{
  font-weight: normal;
  text-align: center;
  margin: 5% auto 2% auto;
  position: relative;
  display: table;     /* テキストの塊にだけ背景を当てる */
  padding: 16px 24px;        /* ふわっと広げたい余白 */
  line-height: 1.5;
  color: #152D62;            /* 文字色はお好みで */
  z-index: 0;
  width: 50%;
}

.loc01 h2::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  z-index: -1;
  /* 中央は白、外側に行くほど透明になるフェード */
  background-color: #FFF;
  pointer-events: none;
}
/* セクション共通 */
.city {padding: 3% 0;}


/* メイン画像 */
.hero {margin: 0 auto 16px;}

.hero img {
  width: 100%;
  height: auto;
  display: block;
}

/* リード文 */
.lead {
  max-width: 980px;
  margin: 0 auto 28px;
  line-height: 1.9;
  color: #333;
}

/* --- 2カラム（前回の .two-col を踏襲） --- */
.two-col {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 0 auto;
}

.two-col .col {flex: 1; min-width: 300px;}

/* 小見出し＋本文 */
.desc {line-height: 1.9; color: #444;}

/* SPで1カラム */
@media (max-width: 768px) {
  .two-col { flex-direction: column; }
  .city{font-size: 12px;}
  .loc01 h2{font-size: 1em; width: auto;}
  .loc01 h2::before{inset: 0;}
  .title-bar h2 { font-size: 1.3em; }
}

/***************/
/* セクション全体 */
.points {
  padding: 24px 0;
}

/* リスト本体（番号リセット） */
.points__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: num;
}

/* 各項目：左に番号スクエア、右に本文。下線で区切る */
.points__item {
  grid-template-columns: 40px 1fr; /* 左:番号 / 右:テキスト */
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid #1f1f1f;
  position: relative;
}

/* 先頭に上罫線を付けたい場合は以下を有効化 */
/* .points__item:first-child { border-top: 1px solid #1f1f1f; } */

/* 番号スクエア（黒地×金文字） */
.points__item::before {
  counter-increment: num;
  content: counter(num);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #333;
  color: #c3a35a;          /* 金色寄り */
  font-weight: 700;
  border: 1px solid #6d5a2a;
  border-radius: 4px;      /* 角丸が不要なら 0 に */
  margin-top: 2px;         /* タイトルとの視覚揃え */
  position: absolute;
}

/* タイトル・本文 */
.points__title {
  margin: 3px 0 6px 50px;
  font-weight: normal;
  line-height: 1.6;
}

.points__desc {
  margin: 0;
  color: #444;
  line-height: 1.9;
}

/* SPで読みやすく */
@media (max-width: 768px) {
  .points__item {
    grid-template-columns: 32px 1fr;
    gap: 10px;
    padding: 14px 0;
  }
  .points__item::before { width: 30px; height: 30px; }
  .points__desc{margin-top: 20px;}
}

/*== 04. ACCESS ===================/////////////////==-*/
.acc {background: url("img/access/hed04.jpg") no-repeat center center/cover;}
.acc10{background-color: #333; padding: 50px 0;}
.acc11{margin-bottom: -5%;}
.loca55 {
    grid-template-columns: repeat(4, 4fr);
    display: grid;
    gap: 0;
    width: 100%;
    margin: 0 auto;
}
.loca55 dl {margin: 5% 2%;}
.loca55 dd {
    font-size: 13px;
    margin: 5px 0 0 0;
    text-align: left;
    color: #FFF;
}
@media (max-width: 768px) {
  .loca55 {grid-template-columns: repeat(2, 2fr);}
  .loca55 dd {font-size: 10px;}
  .acc11{margin-bottom: -15%;}
}

/****************/
.loca51 {
    grid-template-columns: repeat(2, 1fr);
    display: grid;
    gap: 10px;
    margin: 0 auto;
    text-align: left;
    background-color: #f0f0f0;
    padding: 5%;
}
.loca51 h4 {margin: 15px 0 5px 0;}
.loca51 table {font-size: 14px; width: 100%;}
.loca51 th {
    position: relative;
    height: 1.5em;
    font-weight: 400;
    width: 60%;
}
.loca51 th::before {
    content: "";
    display: block;
    width: 80%;
    left: 20%;
    position: absolute;
    margin-top: 0.7em;
    border-top: 2px dotted silver;
}
.loca51 th span {
    background-color: #f0f0f0;
    position: relative;
    padding-right: 1ex;
}


@media (max-width: 768px) {
    .loca55, .loca51 {
        grid-template-columns: repeat(1, 1fr);
        display: grid;
        gap: 0;
		width: auto !important;
    }
    .loca51 th {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    .loca51 th::before {
        content: "";
        display: block;
        width: 100%;
        left: 0;
        position: absolute;
        margin-top: 0.7em;
        border-top: 2px dotted silver;
    }
    .loca51 td {
        display: inline-block;
        width: auto;
        box-sizing: border-box;
        text-align: center;
    }
}

/*== 05. DESIGN ===================/////////////////==-*/
.scroll-section {
  position: relative;
  height: 700px;          /* セクションの高さ */
  overflow: hidden;       /* はみ出し隠す */
}
.scroll-img {
  width: 100%;
  display: block;
  transform: translateY(-50%); /* 最初は上の外 */
  transition: transform linear; /* 時間はJSで制御 */
}

/* 枠：高さ700px、はみ出し隠す */
.parascroll .ps-window{
  position: relative;
  height: 700px;          /* ←要件 */
  overflow: hidden;       /* 枠外を隠す */
}

/* 画像：横幅100%・下から上に移動するアニメーション（初期は一時停止） */
.parascroll img{
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(0);
  will-change: transform;
  animation: panUp var(--duration, 10s) linear forwards;
  animation-play-state: paused;           /* セクションが見えるまで停止 */
}

/* 画面に入ったら再生 */
.parascroll.play img{animation-play-state: running;}

/* 画像の最終位置は「移動量（--travel）」だけ上へ */
@keyframes panUp{
  to{ transform: translateY(calc(-1 * var(--travel, 0px))); }
}

/* モバイルで高さを少し低くしたい場合（任意） */
@media (max-width: 600px){
  .parascroll .ps-window{ height: 500px; }
  .scroll-section{ height: 250px;}
}

/****************/
/* 画像は全て横幅フィット */
.design-split img { width: 100%; height: auto; display: block; }

/* 2カラム（PC）/ 1カラム（SP） */
.two-col {
  display: flex;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: flex-start;
}

/* 左右の比率：左45% / 右55%（必要に応じて調整） */
.two-col .left  { flex: 0 0 50%; }
.two-col .right { flex: 1; align-items: center;}
.design-split .right{
  display:flex;
  flex-direction:column;
  justify-content:center;  /* ←縦中央 */
  gap:20px;                /* 余白はお好みで */
}

/* 余白・文字 */
.copy { line-height: 1.9; color: #333; }
.copy h2 { margin: 0 0 5% 0; font-size: 1.6rem; font-weight: normal; line-height: 150%;}
.copy h3 { margin: 16px 0 0 0; font-size: 1.1rem; font-weight: 700; }
.copy p{line-height: 150%; margin: 0;}

.tall  { margin: 0; }
.wide  { margin: 0; }

/* スマホ：1カラムに縦積み */
@media (max-width: 768px) {
  .two-col { flex-direction: column; gap: 16px; }
  .two-col .left, .two-col .right { flex: 1 1 auto; }
  .copy h2 { font-size: 1.2rem; text-align: center;}
  .copy p{font-size: 12px;}
}
/* ===== 右カラムの中身を縦中央にするための上書き ===== */
@media (min-width: 769px) {
  /* 行の高さを揃える（左の縦長画像の高さに右を合わせる） */
  .design-split .two-col {
    align-items: stretch;  /* ← ここがポイント */
  }

  /* 右カラムは縦並びのフレックスで中央寄せ */
  .design-split .right {
    display: flex;
    flex-direction: column;
    justify-content: center; /* 縦中央 */
    gap: 20px;
  }

  /* 横方向センターを解除（テキストが中央寄せにならないように） */
  .two-col .right { 
    flex: 1;               /* 既存のまま */
    align-items: initial;  /* もしくは unset; */
  }
}

/* SPは通常の縦積みに戻す */
@media (max-width: 768px) {
  .design-split .two-col { flex-direction: column; gap: 16px; align-items: initial; }
  .design-split .right { justify-content: flex-start; }
}

/**********************/


/*== 06. PLAN ======================/////////////////==-*/
.plan-grid { 
  padding: clamp(20px, 4vw, 40px) 0;
  background-image: url("img/bg02.jpg");
  background-position: center center;
  background-size: cover;
  margin-bottom: -5%;
}
.plan-grid .wrap { 
  max-width: 1200px; 
  margin: 0 auto; 
  padding: 5% 16px; 
}
.plan-grid .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* PC: 3カラム */
  gap: 24px;
}
.plan-grid .item img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.pltype img{margin: 0 auto;}

@media (max-width: 768px) {
  .plan-grid .grid { 
    grid-template-columns: 1fr; /* SP: 1カラム */
  }
}


/*== 07. QUALITY ===================/////////////////==-*/
/* gallery layout */
.gallery { padding: 0; }
.gallery-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2カラム */
  gap: 14px;
}
.gallery-list a{ display:block; text-decoration:none; color:inherit; }
.gallery-list figure{ margin:0; position:relative; overflow:hidden; }
.gallery-list img{
  display:block;
  width:100%;
  height:auto;              /* 画像そのまま。必要なら height:100%; object-fit:cover; */
}

/* caption（右下固定／ホバーで左へ少しスライド） */
.gallery-list figcaption{
  position:absolute;
  right: 12px;
  bottom: 12px;
  padding: 6px 20px;
  font-size: 16px;
  letter-spacing:.08em;
  color:#fff;
  background: rgba(0,0,0,.35);
  transition: transform .25s ease, background-color .25s ease;
  transform: translateX(0);
  pointer-events:none;      /* クリックは画像（a）に通す */
}
.gallery-list a:hover figcaption{
  transform: translateX(-8px);
  background: rgba(0,0,0,.45);
}

/* SPは1カラム */
@media (max-width: 600px){
  .gallery-list{ grid-template-columns: 1fr; gap: 10px; }
  .gallery-list figcaption{ right:10px; bottom:10px; font-size:14px; }
}

/* モーション配慮 */
@media (prefers-reduced-motion: reduce){
  .gallery-list figcaption{ transition: none; }
}

/*///////////////////////////////////*/
.catnav{ text-align:center; margin:20px auto; max-width:100%; }

.catrow{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:0;
}

/* すべて同じ幅で揃える（PC） */
.catrow li{
  flex:0 0 160px;         /* ← ボックス幅。必要なら調整 */
  text-align:center;
  box-sizing:border-box;
  margin: 0 0 20px 0;
}

.catrow a{
  display:block;
  padding:15px 0;
  font-size:14px; line-height:1.6;
  color:#333; text-decoration:none; transition:opacity .2s;
  border-left:1px solid #666;     /* 左だけ 1px（細線） */
  box-sizing:border-box;
  background-color: #EBEBEB;
}
.catrow a:hover{background-color: #EBEBEB;}

/* 行末だけ右線（JSで付与） */
.catrow a.row-end{ border-right:1px solid #666; }

/* PC: 4列 / SP: 2列 */
.catrow{
  display: grid;
  gap: 10px 0;
  grid-template-columns: repeat(4, 1fr);
}
.catrow li{ margin:0; }
.catrow a{display:block; padding:15px 0; text-align:center;}


@media (max-width:600px){
  .catrow{ grid-template-columns: repeat(2, 1fr); }
  .catrow a{ padding:10px 0; }
}


/* SPでも1列にしない（2列にする） */
@media (max-width:600px){
  .catrow li{ flex:0 0 45%; margin: 2px;}     /* ← 常に2列 */
  .catrow a{ font-size:13px; padding:6px 0; border: 1px solid #666;}
}

/* セクション */
.feat{ padding: clamp(28px, 6vw, 64px) 0; color:#222; background:#fff; }

/* 2カラム */
.f-wrap{
  max-width:1100px; margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(18px,4vw,48px);
  align-items:center;
  background-color: #f5f5f5;
}

/* 左：画像 */
.f-media{ margin:0; }
.f-media img{ display:block; width:100%; height:auto; }

/* 右：テキスト */
.f-body{ }
.f-title{ margin:0 0 18px; font-size:clamp(24px,3.2vw,34px); letter-spacing:.12em; font-weight:normal; }
.f-rule{ display:inline-block; width:60px; height:2px; background:#222; margin-bottom:18px; }
.f-text{ margin:0; font-size:15px; line-height:2; }
.f-body {padding: 0 10% 0 0;}

/* スマホ：縦並び */
@media (max-width:768px){
  .f-wrap{ grid-template-columns:1fr; }
  .f-body{padding: 0 0 30px 0;}
  .f-title{margin: 0 0 5px 0;}
  .f-rule{margin: 0 40% 18px 40%;}
  .f-body h2{text-align: center;}
  .f-body p{text-align: center;}
}

/* 左右入替えしたい時は .feat.rev を section に付与 */
.feat.rev .f-wrap{ grid-template-columns:1fr 1.6fr; }
.feat.rev .f-media{ order:2; }
.feat.rev .f-body{ order:1; }

/*///////////////////////////////////*/
.sel{ padding:clamp(32px,6vw,72px) 0; color:#222; background:#fff; }
.sel-h{ margin-bottom:32px; text-align:center; }
.sel-label{
  display:inline-block; padding:5px 50px; font-size:13px;
  background:#a00; color:#fff; border-radius:3px; margin-bottom:8px;
}
.sel-title{ margin:0 0 8px; font-size:clamp(22px,3.2vw,30px); font-weight:600; }
.sel-sub{ margin:0; font-size:14px; color:#555; }
.sel-sub h3{margin: 3% 0 0 0;}

/* 2カラムの親 */
.sel-grid{
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(20px,3vw,32px); align-items:start;
}

/* 左（テキスト） */
.sel-body{ font-size:15px; line-height:2; }
.sel-lead{ font-size:clamp(18px,2.5vw,22px); color:#a00; font-weight:normal; }

/* 右（画像：横並び） */
.sel-img{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(12px,2vw,20px);
}
.sel-img figure{ margin:0; text-align:center; }
.sel-img img{ display:block; width:100%; height:auto; border:1px solid #ddd; }
.sel-img figcaption{ margin-top:8px; font-size:14px; }

/* スマホでも横並びを維持（上書き不要） */
@media (max-width:768px){
    .sel-grid{display: block;}
    .sel-sub{font-size: 12px;}
    .sel-lead{font-size: 16px;}
    .sel-body p{font-size: 12px;}
}

/*///////////////////////////////////*/
/* ===== 基本配色・余白 ===== */
.cook2{
  color:#222;
  font-feature-settings:"palt";
}
.cook2-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 18px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(20px,3vw,32px);
}
@media (max-width:960px){
  .cook2-wrap{ grid-template-columns:1fr; }
}

/* ===== カラム共通 ===== */
.cook2-hero{margin: 0;}
/* 大きいトップ写真 */
.cook2-hero img{ width:100%; height:auto; display:block; }

/* タイトル周り（左列） */
.cook2-txt{ margin:10px 0 16px; line-height:130%; font-size:15px; }

/* ボックス見出し（左列の小見出し） */
.cook2-box{padding:12px; margin:12px 0; }
.cook2-box-h{ display:flex; align-items:center; gap:10px; margin:0 0 10px; }
.cook2-badge{ width:54px; height:auto; }
.cook2-box-txt{ margin:.2em 0 .6em; font-size:14px; }



/* 区切り線 */
.cook2-hr{
  border:0; border-top:1px solid #bfcfd6;
  margin:14px 0;
}

/* ===== 右列 ===== */

/* 上段：2枚横並び（IH天板 / ラクッキンググリル横長） */
.cook2-topgrid{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  margin:0 0 14px;
}
.cook2-topph{ margin:0; }
.cook2-topph img{ width:100%; height:auto; display:block; }

/* 紫強調見出し（焼き物アシスト・オールメタル対応 IH） */

.cook2-strip{ margin:8px 0 0; }
.cook2-strip img{ width:100%; height:auto; display:block; }


/* 小さな注意 */
.cook2-note-s{ margin:.4em 0 0; font-size:12px; color:#666; }

@media (max-width:768px){
    .cook2-txt, .cook2-box-txt{font-size: 12px;}
}

/*///////////////////////////////////*/
/* fluid grid（アイテム数に応じて自動で列数が決まる） */
.grid-fluid {
  --card-min: 260px;              /* 各カードの最小幅（お好みで） */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
  gap: clamp(16px, 2.5vw, 28px);
}

/* 既存のequipに適用してOK */
.equip { padding: clamp(28px, 5vw, 25px) 0; background:#fff; color:#222; }
.equip .wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* カード中身（前回と同じ） */
.feat-item { text-align: left; }
.thumb { margin: 0 0 14px; }
.thumb img { width: 100%; height: auto; display: block; }
.feat-title {
  margin: 0 0 10px; padding-bottom: 6px;
  font-size: clamp(16px, 1.6vw, 18px); font-weight: normal; text-align: center;
  border-bottom: 1px solid #cfcfcf;
  font-size: 16px;
}
.feat-text { margin: 0 0 8px; line-height: 1.9; font-size: 14px; }
.note { margin: 0; font-size: 12px; color: #666; text-indent: -1em; padding-left: 1em; }

@media (max-width:768px){
    .feat-title{font-size: 14px;}
    .feat-text{font-size: 12px; line-height: 130%;}
}





/*//bath/////////////////////////////////*/
/* セクション */
.bath-app { padding: 12px 0; color: #333; }

/* 上段：テキスト＋イメージ */
.bath-app .row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.bath-app .txt { flex: 1; }
.bath-app .lead { margin: 0 0 6px; line-height: 1.8; }

/* 赤い丸付きの強調行 */
.bath-app .em {
  position: relative;
  margin: 0 0 6px;
  padding-left: 18px;
  font-weight: 700;
}
.bath-app .em::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #c40000;
}


/* 機能ボタン群 */
.bath-app .feat {
  list-style: none;
  padding: 10px 0 0;
  margin: 10px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}
.bath-app .feat li {
  border: 1px solid #bfa670;          /* 金色寄り */
  padding: 10px 12px;
  background: #fff;
}
.bath-app .feat li span { display: block;}
.bath-app .feat li small { display: block; font-size: 12px; color: #666; margin-top: 2px; }

/* 注意書き */
.bath-app .note { margin: 8px 0 0; font-size: 12px; color: #666; }

/* SP：縦積み */
@media (max-width: 768px){
  .bath-app .row { flex-direction: column; }
}

/************/
.mbu{background-color: #dbeff4; margin-bottom: 5%;}
/* 画像共通 */
.mbu img { max-width: 100%; height: auto; display: block; }

/* 2カラム本体 */
.mbu .two-col{
  display: flex;
  gap: 20px;
  align-items: flex-start;
  max-width: 900px;   /* 必要に応じて調整 */
  margin: 0 auto;
}

.mbu .left  { flex: 1 1 52%; }
.mbu .right { flex: 1 1 48%; display: flex; flex-direction: column; gap: 12px; }

/* タイポ */
.mbu .en{
  font-size: 1.25rem;
  letter-spacing: .12em;
  font-weight: 600;
  margin: 0 0 4px;
}
.mbu .jp{ color:#666; margin: 0; line-height: 1.7; }
.mbu .lead{ font-weight: 700; margin: 0 0 8px; line-height: 1.9; }
.mbu p{ line-height: 1.9; margin: 0 0 8px; font-size: 14px;}

/* 右カラムのロゴと画像 */
.mbu .brand{ width: 90px; margin:0 0 20px 0; }
.mbu .photo{ margin: 0;}
.mbu .cap{ color:#888; font-size: 12px; }

/* SP：1カラム */
@media (max-width: 768px){
  .mbu .two-col{ flex-direction: column; }
  .mbu .brand{ margin-left: 0; } /* SPは左寄せに戻す */
  .mbu p{font-size: 12px;}
}






/*== 08. MAP ===================/////////////////==-*/
.map01{text-align: center;}
.map01 .title100{font-size: 1.5em;}
.mgallery img{margin: 0 auto;}
.map01 h3{font-weight: normal; font-size: 1.5em;}
.mapadd{font-size: 1.3em; border: 1px solid #CCC; background-color: #f7f7f7; padding: 2% 0; width: 83%; margin: 0 auto;}

@media (max-width: 600px) {
    .map01 .title100{font-size: 1em;}
    .map01 h3{font-size: 0.8em;}
    .mapadd{font-size: 1em; width: 90%; padding: 3%;}
}


/*== 09. OUTLINE ===================/////////////////==-*/
/* タブボタン */
.tabs {display: flex;}
.tab {
  border: 1px solid #ccc;
  background: #f9f9f9;
  cursor: pointer;
  font-size: 1em;
  font-family: "Zen Old Mincho", serif;
  width: 25%;
  padding: 20px 0;
}
.tab.active {
  background: #333;
  color: #fff;
  border-color: #333;
}

.table-appear{ padding: 4% 2%; width: 100%;}
.outline-table th, .outline-table td{font-weight: normal; font-size: 18px;}
.outline-table th{
    width: 30%;
    padding: 15px 20px;
    text-align: left;
    font-weight: normal;
    vertical-align: top;
    background-color: #fff;
    border-bottom: 2px solid #C9B78B;
    font-size: 16px;
    position: relative;
    overflow: hidden;
}
.outline-table td{
    width: 70%;
    padding: 15px 20px;
    vertical-align: top;
    line-height: 1.6;
    font-size: 16px;
    border-bottom: 1px solid #C9B78B;
}

/* パネル */
.panel {
  display: none;
  padding: 5%;
  border: 1px solid #ccc;
  background: #fff;
}
.panel.active {
  display: block;
}
@media (max-width: 768px) {
  .tabs{flex-wrap: wrap;}
  .tab {width: 50%; font-size: 13px; padding: 10px 0;}
  .outline-table,
  .outline-table tr,
  .outline-table th,
  .outline-table td {
    display: block;
    width: auto;
    box-sizing: border-box;
  }
  .outline-table th, .outline-table td{font-weight: normal; font-size: 14px;}
  .outline-table th {
        border-bottom: 1px dotted #C9B78B;
        padding: 12px 10px 8px;
        font-size: 14px;
        background-color: rgba(201, 183, 139, 0.1);
  }
   .outline-table td {
        padding: 10px;
        font-size: 14px;
        border-bottom: none;
  }
}



/*== 10. LOGIN ===================/////////////////==-*/
.bg100{ background-image: url(img/bg01.jpg); background-size: cover;}
/** LOGIN form *********/
.login01{padding: 10px; width: 226px;}
.loginbt{width: 100px; padding: 10px; border-radius: 0; background: linear-gradient(to bottom, #333, #666); color: #FFF;}
.loginbt:hover,
.loginbt:focus-visible{
  background: linear-gradient(to bottom, #CCC, #FFF);
  color: #333;
}

.loinpt{color: #333;}

@media (max-width: 768px) {
  .loginct h2{font-size: 1em;}
  .loinpt{text-align: center;}
  .loginbt{margin: 20px auto; width: 200px;}
}

.coming{background-color: #CCC; padding: 100px 0;}

/*== 11. ENTRY ===================/////////////////==-*/



/*== 21. LIMITED ===================/////////////////==-*/
.limited{background-color: #414141; color: #FFF; font-weight: normal; padding: 5%; margin-bottom: -5%;}
.loc01cl{ text-align: center;}
.limited .wrap{background-color: rgb(235, 225, 201); padding: 130px 5% 80px 5%; margin-top: -50px;}
.limited .test{background-color: rgba(180, 153, 90, 1);}
.limited .two-col .col{text-align: center;}

@media (max-width: 768px) {
  .limited{margin: 0 0 -10% 0;}
  .limited .wrap{padding: 80px 5% 50px 5%; font-size: 12px;}
  .limited .wrap h2{font-size: 1.5em;}
  .limited .two-col .col{min-width: auto;}
}