@charset "UTF-8";
/*
Theme Name: Emanon Premium child
Theme URI: https://wp-emanon.jp/emanon-premium/
Author: 株式会社イノ・コード
Author URI: https://innocord.co.jp/
Description: Emanon Premiumnの子テーマです。
Template: emanon-premium
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags:one-column, two-columns, three-columns, left-sidebar, right-sidebar, theme-options
*/

/* Works: Before / After */
.works-ba{
  margin: 24px 0 40px;
}

.works-ba__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.works-ba__item{
  margin: 0;
}

.works-ba__item img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.works-ba__cap{
  margin-top: 10px;
  line-height: 1.4;
}

.works-ba__label{
  display: block;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8B7457;
  margin-bottom: 6px;
}

.works-ba__text{
  display: block;
  font-size: 14px;
  color: #555;
}

/* SP：縦並び */
@media (max-width: 768px){
  .works-ba__grid{
    grid-template-columns: 1fr;
  }
}

/* Works: Gallery（最大3列） */
.works-gallery{
  margin: 0 0 56px;
}

/* ① WPギャラリー（.wp-block-gallery）がある場合 */
.works-gallery .wp-block-gallery{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* ② 画像を1枚ずつ貼ってる場合（figure/wp-block-image）にも効かせる */
.works-gallery > .wp-block-image,
.works-gallery > figure,
.works-gallery .wp-block-image{
  margin: 0 0 16px;
}

.works-gallery img{
  width: 100% !important;
  height: auto !important;
  display: block;
  border-radius: 8px;
}

.works-gallery figcaption{
  margin-top: 8px;
  font-size: 13px;
  color: #555;
  line-height: 1.5;
}

/* タブレットは2列 */
@media (max-width: 900px){
  .works-gallery .wp-block-gallery{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* スマホは1列 */
@media (max-width: 600px){
  .works-gallery .wp-block-gallery{
    grid-template-columns: 1fr;
  }
}

/* ===================================
   Works Gallery (ACF WYSIWYG / Classic)
   画像を1枚ずつ貼る運用でも最大3列にする
=================================== */
.works-gallery{
  margin: 0 0 56px;
}

/* WYSIWYG内の画像（wp-caption含む）をカード化してグリッドに載せる */
.works-gallery{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: start;
}

/* 画像＋キャプションのラッパー（よく出る） */
.works-gallery .wp-caption,
.works-gallery figure,
.works-gallery p{
  margin: 0 !important;
}

/* 画像は幅100% */
.works-gallery img{
  width: 100% !important;
  height: auto !important;
  display: block;
  border-radius: 8px;
}

/* キャプション（画像の下のコメント） */
.works-gallery .wp-caption-text,
.works-gallery figcaption{
  margin-top: 8px;
  font-size: 13px;
  color: #555;
  line-height: 1.5;
}

/* テキストだけの段落が混ざった時の見た目を崩さない */
.works-gallery > p:not(:has(img)){
  grid-column: 1 / -1;
  margin: 0 !important;
  padding: 8px 0;
}

/* タブレットは2列 */
@media (max-width: 900px){
  .works-gallery{ grid-template-columns: repeat(2, 1fr); }
}

/* スマホは1列 */
@media (max-width: 600px){
  .works-gallery{ grid-template-columns: 1fr; }
}

/* Works: Before/After 強制2カラム */
.works-ba__grid{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
}

@media (max-width: 768px){
  .works-ba__grid{
    grid-template-columns: 1fr !important;
  }
}

/* Works Gallery：画像サイズを統一（トリミング） */
.works-gallery figure,
.works-gallery .wp-caption{
  overflow: hidden;
  border-radius: 8px;
}

/* 画像の高さを固定して揃える */
.works-gallery img{
  width: 100% !important;
  height: 220px !important;     /* ←ここで高さ調整（例） */
  object-fit: cover;
  display: block;
}

.works-ba__item img{
  width: 100%;
  height: 290px;      /* 例：BAは少し大きめが映える */
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
/* ===================================
   Works spacing（余白調整）
=================================== */

/* 見出し下〜各ブロックの間 */
.works-lead{
  margin: 18px 0 34px;
}

/* Before/After ブロックの余白 */
.works-ba{
  margin: 0 0 44px;
}

/* ギャラリー前後の余白 */
.works-gallery{
  margin: 0 0 52px;
}

/* 実例概要の上に少し間を作る */
.works-meta{
  margin-top: 10px;
}
/* Works gallery：センタリング・左右余白を安定させる */
.works-gallery{
  width: 100%;
  justify-content: center; /* gridの並び基準 */
}

/* グリッドの時は中央に寄せる */
.works-gallery{
  justify-items: stretch;  /* 各セルを幅いっぱいに */
}

/* SP時：1列で左右余白を揃える */
@media (max-width: 600px){
  .works-gallery{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
/* 画像が変に小さくならないように */
.works-gallery img{
  max-width: 100% !important;
}

.works-gallery figcaption,
.works-gallery .wp-caption-text{
  min-height: 2.8em; /* 2行分くらい確保して段差を減らす */
}
/* ===== SP：ギャラリーの寄りを解消（カード幅を100%に） ===== */
@media (max-width: 600px){
  .works-gallery{
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
  }

  /* 画像＋キャプションのカード（ACF WYSIWYGがよく吐く） */
  .works-gallery .wp-caption,
  .works-gallery figure{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* imgだけ細くならないように */
  .works-gallery img{
    width: 100% !important;
  }

  /* キャプションもカード幅いっぱいに揃える */
  .works-gallery .wp-caption-text,
  .works-gallery figcaption{
    width: 100% !important;
  }
}
/* ===== SP：各ブロックの余白を少し増やす ===== */
@media (max-width: 600px){
  .works-lead{ margin: 16px 0 28px; }
  .works-ba{ margin: 0 0 34px; }
  .works-gallery{ margin: 0 0 40px; }
}
/* ===== サービス一覧のレイアウト調整 ===== */
.service-card-link{
  display:block;
  width:100%;
  color:inherit;
  text-decoration:none;
}
.service-card-link *{
  color:inherit;
  text-decoration:none;
}

/* =========================
   MW WP Form 共通デザイン（イベント/来場/相談など）
========================= */
.mw_wp_form .notes{
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.8;
}

.mw_wp_form dl.form{
  margin: 0;
}

.mw_wp_form dl.form dt{
  margin-top: 14px;
  font-weight: 700;
}

.mw_wp_form dl.form dd{
  margin: 8px 0 0;
}

.mw_wp_form .must,
.mw_wp_form .notmust{
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 4px;
  line-height: 1.4;
}

.mw_wp_form .must{
  border: 1px solid #E4A067;
  background: #F5DFAF;
}

.mw_wp_form .notmust{
  border: 1px solid #ccc;
  background: #f5f5f5;
}

.mw_wp_form input[type="text"],
.mw_wp_form input[type="email"],
.mw_wp_form input[type="tel"],
.mw_wp_form select,
.mw_wp_form textarea{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
}

.mw_wp_form textarea{
  min-height: 200px;
}

.mw_wp_form .harf_wrap{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 680px){
  .mw_wp_form .harf_wrap{
    grid-template-columns: 1fr;
  }
}

/* 送信ボタン（イベントと同じ雰囲気に） */
.mw_wp_form .form_btn{
  margin-top: 20px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.mw_wp_form .form_btn .btn_a,
.mw_wp_form .form_btn .btn_b{
  border-radius: 999px;
  padding: 14px 22px;
  font-weight: 700;
}

.mw_wp_form .form_btn .btn_a{
  background: #E4A067;
  border: none;
  color: #fff;
}

.mw_wp_form .form_btn .btn_b{
  background: #fff;
  border: 1px solid #E4A067;
  color: #E4A067;
}