:root {
  --shadow:           0 4px 20px rgba(0,0,0,0.08);
  --shadow-hover:     0 8px 32px rgba(0,0,0,0.14);
  --transition:       0.3s ease;
}

.mv_area {
  width: 100%;
  position: relative;
}
.mv_area img {
  width: 100%;
  max-height: 600px;
  object-fit: cover;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.mv_area h1 {
  position: absolute;
  top: 50px;
  left: 45px;
  color: #fff;
  background: #363650;
  padding: 20px;
  font-size: 1.6rem;
  letter-spacing: 0.2rem;
}

section {
  margin: 80px auto;
  max-width: 1250px;
  width: 90%;
}
h3 {
  font-size: 1.7rem;
  letter-spacing: 0.2rem;
  line-height: 2.7rem;
  margin: 20px auto;
  text-align: center;
}
h3.blue_title span {
  color: #3b899d;
}
p {
  letter-spacing: 0.1rem;
  line-height: 1.7rem;
}

.container {
  margin: 80px auto 20px;
}

.section-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px auto 20px;
}
.section-cta a.btn {
  background: #3b899d;
  padding: 20px 30px;
  border-radius: 50px;
  color: #fff;
  transition: box-shadow var(--transition), transform var(--transition);
}
.section-cta a.btn:hover {
   box-shadow: var(--shadow-hover); transform: translateY(-3px);
 }
/* ============================================================
   REASONS
   ============================================================ */
.reason_box {
  gap: 20px;
  margin: 50px auto;
}
.reason_box .clm {
  border: 1px solid #8f8f8f;
  padding: 30px 20px;
  border-radius: 15px;
}
.reason_box .reason_subTitle {
  text-align: center;
  margin: 15px auto;
  font-size: 1.3rem;
  font-weight: 600;
}
.reason_box .reason_subTitle.first span {
  color: #39b1c4;
}
.reason_box .reason_subTitle.second span {
  color: #e16129;
}
.reason_box .reason_subTitle.third span {
  color: #56bf91;
}
.reason_box .label {
  display: flex;
  justify-content: center;
  align-items: center;

}
.reason_box .label span {
  color: #fff;
  border-radius: 50px;
  padding: 3px 15px;
  margin: 0 auto 15px;
  font-size: 1rem;
}
.reason_box .label.first span {
  background: #39b1c4;
}
.reason_box .label.second span {
  background: #e16129;
}
.reason_box .label.third span {
  background: #56bf91;
}
.reason_box p {
  font-size: 1rem;
}

/* ============================================================
   PRODUCTS
   ============================================================ */
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.product-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition), transform var(--transition);
  position: relative;
}
.product-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }

.product-card--new .product-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #E8524A;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  border-radius: 50px;
  z-index: 1;
}

.product-img {
  height: 200px;
  overflow: hidden;
}
.product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.product-card:hover .product-img img { transform: scale(1.05); }

.product-info { padding: 20px 20px 24px; }

.product-name {
  font-family: var(--tcd-font-type1);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: 0.04em;
}
.product-name span.en {
  font-family: serif;
}
.product-name-ja {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-sub);
}

.product-price {
  color: var(--color-teal-dark);
  font-weight: 700;
  font-size: 0.8rem;
  margin-bottom: 8px;
  text-align: right;
}

.product-text {
  font-size: 0.8rem;
  letter-spacing: 0.01rem;
}



section.equipment.section,
section.stories.section{
  max-width: 100%;
  width: 100%;
}
.equipment-gridArea {
  background: #f7f7f7;
  margin: 50px auto;
}
section.equipment.section .equipment-grid {
  max-width: 1400px;
  display: grid;
  grid-template-columns: repeat(auto-fill, 130px);
  gap: 15px;
  justify-content: center;
  padding: 50px;
  margin: auto;
}

.equipment-item {
  background: #fff;
  padding: 10px;
  width: 110px;
  height: 110px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}
.equipment-box img {
  max-width: 50px;
}
.equipment-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.equipment-box p {
  font-size: 0.8rem;
  letter-spacing: 0;
  font-weight: 600;
  white-space: nowrap;
 }



/* ============================================================
   CTA BLOCKS (Model House + Reservation)
   ============================================================ */
.cta-grid {
  display: flex;
  gap: 24px;
  width: 100%;
}

.cta-block {
  position: relative;
  width: 50%;
}
.cta-block img {
  width: 100%;
}
.cta-block-body {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}
.cta-block-body h3 {
  color: #fff;
  text-shadow: 3px 3px 10px #333;
  font-size: 2rem;
}
.cta-block-body p {
  color: #fff;
}
.cta-block-body p span {
  padding: 10px 20px;
  position: relative;
  font-weight: 600;
}
.cta-block-body p span:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  background: #fff;
  height: 1px;
  width: 100%;
}
.cta-block-body p span:after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  background: #fff;
  height: 1px;
  width: 100%;
}
.cta-block-body a {
  background: #f1e04e;
  padding: 8px 40px;
  font-weight: 600;
      transition: box-shadow var(--transition), transform var(--transition);
}
.cta-block-body a:hover {
  color: #333;
  background: #f1e04e;
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

/* ============================================================
   column
   ============================================================ */
section.column.section {
  max-width: 100%;
  background: #f7f7f7;
  padding: 80px 0;
  width: 100%;
}
section.column.section .container {
  margin: 0 auto;
}

.column-inner {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  max-width: 900px;
  margin: auto;
  width: 90%;
}

.column-heading-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 200px;
}

.column-heading {
  flex-shrink: 0;
  position: relative;
  padding-left: 20px;
}
.column-heading:before {
  content: "";
  height: 100%;
  width: 10px;
  position: absolute;
  background: #26899c;
  left: 0;
}
.column-label {
  display: block;
  font-family: var(--font-en);
  font-size: 28px;
  font-weight: 700;
  color: var(--color-teal);
  letter-spacing: 0.1em;
  line-height: 1;
}
.column-subtitle {
  display: block;
  font-size: 12px;
  color: var(--color-text-sub);
  margin-top: 4px;
}

.column-list { flex: 1; border-top: 1px solid var(--color-border); }

.column-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
  position: relative;
}
.column-item:first-child:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  width: 100%;
  background: #aaaaaa;
}
.column-item:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 100%;
  background: #aaaaaa;
}

.column-date {
  font-family: var(--font-en);
  font-size: 13px;
  color: var(--color-text-sub);
  flex-shrink: 0;
  letter-spacing: 0.05em;
}

.column-link {
  font-size: 14px;
  color: var(--color-text);
  transition: color var(--transition);
  letter-spacing: 0.1rem;
  line-height: 1.2rem;
}
.column-link:hover { color: var(--color-teal); }

.column-more {
      background: #3b899d;
      padding: 10px 20px;
      border-radius: 50px;
      color: #fff;
      transition: box-shadow var(--transition), transform var(--transition);
      text-align: center;
}
.column-more:hover {
  box-shadow: var(--shadow-hover); transform: translateY(-3px);
  color: #fff;
}


/* ============================================================
   PICKUP
   ============================================================ */
.pickup-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 50px auto;
}
.pickup-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition), transform var(--transition);
}
.pickup-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }

.pickup-img { height: 200px; overflow: hidden; }
.pickup-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.pickup-card:hover .pickup-img img { transform: scale(1.05); }

.pickup-body { padding: 20px; }

.pickup-tag {
  display: inline-block;
  background: #26899c;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 7px 15px;
  border-radius: 50px;
  margin-bottom: 10px;
}

.pickup-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
}

.ifSp {
  display: none;
}
.ifPc {
  display: block;
}

@media screen and (max-width:768px) {
  .ifSp {
    display: block;
  }
  .ifPc {
    display: none;
  }
  .mv_area img {
    height: calc(100vh - 55px);
    width: auto;
    max-height: 100%;
  }
  .mv_area h1 {
    top: 55px;
    left: 20px;
    /* top: auto; */
    font-size: 1.2rem;
  }
  h3 {
    font-size: 1.2rem;
    letter-spacing: 0.1rem;
    line-height: 2rem;
  }
  p {
    letter-spacing: 0;
    font-size: 0.9rem;
  }
  .container {
    margin: 20px auto;
  }
  .products-grid {
    grid-template-columns: repeat(1, 1fr);
  }
  .product-card a {
    display: flex;
  }
  .product-img {
    height: auto;
    min-width: 100px;
    width: 100px;
  }
  .product-info {
    padding: 10px;
  }
  .product-name {
    letter-spacing: 0;
  }
  section.equipment.section .equipment-grid {
    padding: 50px 10px;
    gap: 5px;
    grid-template-columns: repeat(auto-fill, 100px);
    width: 90%;
  }
  .equipment-item {
    width: 80px;
    height: 80px;
  }
  .equipment-box p {
    font-size: 0.6rem;
  }
  .cta-grid {
    flex-direction: column;
  }
  .cta-block {
    width: 100%;
  }
  .pickup-grid {
    grid-template-columns: repeat(1, 1fr);
    margin: 20px auto;
  }
  .column-inner {
    flex-direction: column;
  }
  .column-heading-box {
    height: auto;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: auto;
  }
  .reason_box,
  .equipment-gridArea {
    margin: 20px auto;
  }
  #main p,
  section.products p.has-text-align-center {
    text-align: left;
  }
  .column-more.ifSp {
    display: flex;
    justify-content: center;
    width: 100px;
    margin: 20px auto;
    text-align: center;
  }
}









/*
 * story-slider.css
 * WordPressテーマ TCD 用スライダー（Slick不使用）
 * クラスはすべて ss- プレフィックスでテーマとの衝突を回避
 *
 * enqueue 例（functions.php）:
 *   wp_enqueue_style(
 *     'story-slider',
 *     get_template_directory_uri() . '/assets/css/story-slider.css',
 *     array(), '1.0.0'
 *   );
 */

/* ================================================================
   スコープリセット
   ================================================================ */
.ss-slider-wrap *,
.ss-slider-wrap *::before,
.ss-slider-wrap *::after {
  box-sizing: border-box;
}

/*
 * TCD テーマは img { max-width: 100%; } を持つ場合が多く、
 * 固定幅カード内の画像が縮んでしまうため上書き
 */
.ss-slider-wrap img {
  max-width: none;
}

/* ================================================================
   CSS 変数（ここだけ変えればデザイン変更可能）
   ================================================================ */
.ss-slider-wrap {
  --ss-card-w:    860px;    /* カード幅（固定値）*/
  --ss-card-gap:  24px;     /* カード間隔 */
  --ss-speed:     520ms;    /* スライドアニメーション時間 */
  --ss-accent:    #c8602a;  /* ラベル・プログレスバー色 */
  --ss-bg:        #ffffff;
  --ss-text:      #1a1a1a;
  --ss-muted:     #666666;
  --ss-border:    #e8e4de;
}

/* ================================================================
   ラッパー
   ================================================================ */
.ss-slider-wrap {
  position: relative;
  width: 100%;
  isolation: isolate; /* z-index コンテキストをテーマから独立させる */
}

/* ================================================================
   ビューポート
   左右に隣カードを覗かせるため overflow: hidden で clip する
   ※ 親要素（.section 等）が overflow: hidden の場合は
     その要素に overflow: visible を追加してください
   ================================================================ */
.ss-viewport {
  width: 100%;
  overflow: hidden;
  margin: 50px auto 20px;
}

/* ================================================================
   トラック（横並びフレックス）
   ================================================================ */
.ss-track {
  display: flex;
  align-items: stretch;
  gap: var(--ss-card-gap);
  will-change: transform;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.ss-track.is-dragging {
  cursor: grabbing;
  transition: none !important;
}

/* ================================================================
   カード本体
   ================================================================ */
.story-card {
  flex: 0 0 var(--ss-card-w);
  width: var(--ss-card-w);
  min-width: 0;
  background: var(--ss-bg);
  border: 1px solid var(--ss-border);
  overflow: hidden;
  /* 非アクティブは opacity のみで表現（scale は位置計算のズレ原因になるため使わない） */
  opacity: 0.4;
  transition: opacity var(--ss-speed) ease;
}
.story-card.is-active {
  opacity: 1;
}

/* リンク：下線・色変化を抑制 */
.ss-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.ss-card-link:hover,
.ss-card-link:visited {
  color: inherit;
  text-decoration: none;
}

/* ================================================================
   カード内レイアウト
   左カラム: テキスト＋サブ画像 ／ 右カラム: メイン画像
   grid ではなく flex で実装（グリッド幅の計算ズレを回避）
   ================================================================ */
.ss-card-inner {
  display: flex;
  flex-direction: row;
  height: 480px;
  overflow: hidden;  /* はみ出しを確実にカット */
}

/* ---- メイン画像（右カラム・幅45%固定） ---- */
.ss-main-img {
  flex: 0 0 45%;
  width: 45%;
  overflow: hidden;
  order: 2;
}
.ss-main-img img {
  width: 100%;
  height: 100% !important; /* TCD テーマの height:auto を上書き */
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
  padding: 30px 30px 30px 15px;
}
.story-card.is-active .ss-card-link:hover .ss-main-img img {
  transform: scale(1.04);
}

/* ---- テキスト＋サブ画像（左カラム・残り幅） ---- */
.ss-content {
  flex: 1 1 0;
  min-width: 0;  /* flex アイテムのテキスト溢れ防止 */
  order: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px 15px 30px 30px;
  gap: 24px;
  overflow: hidden;
}

/* ラベル（plan_name）*/
.ss-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ss-accent);
  margin-bottom: 6px;
}

/* プラン名 */
.ss-plan {
  font-size: 12px;
  font-weight: 600;
  color: var(--ss-muted);
  margin: 0 0 8px;
  letter-spacing: 0;
  font-weight: 100;
}
.ss-plan.plan-papamaru {
  color: #3e6aff;
}
.ss-plan.plan-hiraya {
  color: #ffd300;
}
.ss-plan.plan-sunterrace {
  color: #ea6234;
}
.ss-plan.plan-hapimama {
  color: #ea3499;
}
.ss-plan.plan-colorful {
  color: #a834ea;
}
.ss-plan.plan-smile {
  color: #34e6ea;
}
.ss-plan.plan-highstyle {
  color: #b66e6e;
}
.ss-plan.plan-urban {
  color: #ea6234;
}
.ss-plan.plan-basic {
  color: #9bd39d;
}
.ss-plan.plan-euro {
  color: #71b694;
}
.ss-plan.plan-nisetai {
  color: #678ed7;
}
.ss-plan.plan-papazero {
  color: #dda7d5;
}

/* メインタイトル */
.ss-title {
  font-size: clamp(17px, 1.8vw, 24px);
  font-weight: 700;
  line-height: 1.55;
  color: var(--ss-text);
  margin: 0 0 12px;
  text-align: left;
}

/* サブタイトル・説明文 */
.ss-desc {
  font-size: 13px;
  line-height: 1.75;
  color: var(--ss-muted);
  margin: 0;
}

/* ã‚¿ã‚° */
.ss-tags {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--ss-muted);
  line-height: 1.8;
}
.ss-tags span {
  margin-right: 4px;
}

/* 詳しく見るラベル */
.ss-link-label {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ss-text);
  border-bottom: 1px solid var(--ss-text);
  padding-bottom: 2px;
  margin-top: 4px;
  transition: opacity 0.2s;
}
.ss-card-link:hover .ss-link-label {
  opacity: 0.5;
}

/* サブ画像2枚 */
.ss-sub-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ss-sub-imgs img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* ================================================================
   ドットナビ
   ================================================================ */
.ss-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 20px 0 0;
}
.ss-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #cccccc;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.25s, width 0.25s, border-radius 0.25s;
}
.ss-dot.is-active {
  background: var(--ss-text);
  width: 22px;
  border-radius: 4px;
}

/* ================================================================
   前後ボタン
   ================================================================ */
.ss-arrow {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.92);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333333;
  transition: background 0.2s, border-color 0.2s;
  z-index: 20;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.ss-arrow:hover {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.3);
}
/* カードの左右端付近に配置 */
.ss-arrow--prev {
  left: calc(50% - var(--ss-card-w) / 2 - 22px);
}
.ss-arrow--next {
  right: calc(50% - var(--ss-card-w) / 2 - 22px);
}

/* ================================================================
   プログレスバー（JSで生成・追加）
   ================================================================ */
.ss-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--ss-accent);
  width: 0%;
  pointer-events: none;
}

/* ================================================================
   レスポンシブ
   ================================================================ */

/* タブレット：縦積みレイアウトに切り替え */
@media (max-width: 980px) {
  .ss-slider-wrap {
    --ss-card-w: calc(100vw - 80px);
  }
  .ss-card-inner {
    flex-direction: column;
    height: auto;
  }
  .ss-main-img {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto !important;
    order: 1;
  }
  .ss-main-img img {
    height: 100% !important;
  }
  .ss-content {
    flex: 1 1 auto;
    order: 2;
    padding: 24px 20px 20px;
  }
  .ss-arrow--prev { left: 8px; }
  .ss-arrow--next { right: 8px; }
}

/* スマートフォン */
@media (max-width: 600px) {
  .ss-slider-wrap {
    --ss-card-w: calc(100vw - 40px);
    --ss-card-gap: 12px;
  }
  .ss-sub-imgs  { display: none; }  /* サブ画像は非表示 */
  .ss-title     { font-size: 16px; }
  .ss-content   { padding: 18px 16px 16px; gap: 16px; }
  .ss-arrow     { width: 36px; height: 36px; font-size: 22px; }
}
@media (max-width:768px) {
  .ss-viewport {
    margin: 20px auto;
  }
}