@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ — MintSparkコーポレートサイト用
    Version: 1.2.0
    Author: 株式会社MintSpark
    Author URI: https://mintspark.co.jp/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html

    【管理ガイド】
    - カラー変更: 外観 > カスタマイズ > サイト全体設定 > 基本カラー
    - ヘッダー/フッター色: 外観 > カスタマイズ > ヘッダー / フッター
    - このCSS変数は SWELLカスタマイザーで上書き可能
*/

/* ============================================================
   MintSpark コーポレートカラー
   SWELLカスタマイザーの「基本カラー」で変更可能
   ここではカスタム変数のみ定義（SWELL変数は上書きしない）
   ============================================================ */
:root {
  --ms-color-main: #0F9B8E;
  --ms-color-text: #2B2D42;
  --ms-color-bg: #F8F9FA;
  --ms-color-dark: #2B2D42;
}

/* ============================================================
   SWELLのh2セクション見出し: 背景付きの場合のみ白文字
   ※ ブロックエディタで個別に色を設定した場合はそちらが優先
   ============================================================ */
.post_content h2.is-style-section_ttl,
.post_content h2[style*="background"] {
  color: #fff;
}

/* カラム内カード: 高さ揃え + ボタン位置固定 */
.wp-block-columns > .wp-block-column {
  display: flex;
  flex-direction: column;
}
.wp-block-columns > .wp-block-column > .wp-block-buttons:last-child,
.wp-block-columns > .wp-block-column > :last-child {
  margin-top: auto;
}

/* 事例アーカイブ: フィルタータブの余白 */
.ms-case-filter {
  margin-top: 24px;
  margin-bottom: 32px;
}

/* ============================================================
   サイドバーなし時のコンテンツ中央寄せ
   ============================================================ */
.-sidebar-off .l-mainContent__inner,
.-sidebar-off .l-article {
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   メインビジュアル
   ※ ボタンはSWELLブログパーツ(ID:236)で管理
     管理画面 > ブログパーツ > 「MVボタン」を編集
   ============================================================ */

/* ============================================================
   LP（ランディングページ）デザイン
   ============================================================ */
.post_type-lp .l-content {
  background: #fff;
}
.post_type-lp .l-article {
  max-width: 100%;
  padding: 0;
}

/* LP: coverブロック内は白文字 */
.post_type-lp .wp-block-cover {
  padding: 80px 0;
}
.post_type-lp .wp-block-cover h1,
.post_type-lp .wp-block-cover h2,
.post_type-lp .wp-block-cover h3,
.post_type-lp .wp-block-cover p,
.post_type-lp .wp-block-cover li,
.post_type-lp .wp-block-cover strong {
  color: #fff !important;
}

/* LP: coverブロック外のセクション */
.post_type-lp .post_content > .wp-block-group,
.post_type-lp .post_content > .wp-block-columns {
  padding: 60px 5%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* LP: 見出しスタイル */
.post_type-lp .post_content h2:where(:not([class^="swell-block-"])) {
  background: none;
  color: var(--ms-color-text);
  padding: 0 0 0.5em 0;
  border-bottom: 2px solid var(--ms-color-main);
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  letter-spacing: 0.02em;
}
.post_type-lp .post_content h2::before {
  display: none;
}
.post_type-lp .wp-block-cover h2 {
  color: #fff !important;
  border-bottom-color: rgba(255,255,255,0.3);
}

.post_type-lp .post_content h3:where(:not([class^="swell-block-"])) {
  color: var(--ms-color-text);
  background: none;
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
}
.post_type-lp .post_content h3::before {
  display: none;
}

/* LP: キャンペーンボックス */
.post_type-lp .wp-block-cover .wp-block-group {
  color: #fff;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  padding: 2em;
}
.post_type-lp .wp-block-cover .wp-block-group p,
.post_type-lp .wp-block-cover .wp-block-group li {
  color: #fff !important;
}

/* LP: テーブル */
.post_type-lp table {
  border-collapse: collapse;
  width: 100%;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.post_type-lp table th {
  background: var(--ms-color-text);
  color: #fff;
  padding: 14px 16px;
  font-weight: 700;
  font-size: 14px;
}
.post_type-lp table td {
  padding: 14px 16px;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
  color: var(--ms-color-text);
  font-size: 14px;
}
.post_type-lp table tr:last-child td {
  border-bottom: none;
}

/* LP: ボタンホバー */
.post_type-lp .wp-block-button__link {
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 14px 36px;
  transition: opacity 0.2s, transform 0.2s;
}
.post_type-lp .wp-block-button__link:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

/* ============================================================
   TOPページ 投稿リスト（グリッド）
   ============================================================ */
.home .wp-block-latest-posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  padding: 0;
}
.home .wp-block-latest-posts li {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.home .wp-block-latest-posts li:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.home .wp-block-latest-posts__featured-image {
  margin: 0;
}
.home .wp-block-latest-posts__featured-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.home .wp-block-latest-posts__post-title {
  display: block;
  padding: 12px 16px 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ms-color-text);
  text-decoration: none;
  line-height: 1.5;
}
.home .wp-block-latest-posts__post-date {
  display: block;
  padding: 0 16px 12px;
  font-size: 13px;
  color: #999;
}

@media (max-width: 767px) {
  .home .wp-block-latest-posts {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   事例ページ カテゴリフィルター
   ============================================================ */
.ms-case-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding: 0;
  list-style: none;
}
.ms-case-filter__btn {
  display: inline-block;
  padding: 8px 20px;
  border: 1px solid #e0e0e0;
  border-radius: 24px;
  background: #fff;
  color: var(--ms-color-text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.ms-case-filter__btn:hover,
.ms-case-filter__btn.is-active {
  background: var(--ms-color-main);
  color: #fff;
  border-color: var(--ms-color-main);
}

/* ============================================================
   事例カードグリッド（ショートコード用）
   ============================================================ */
.ms-case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ms-case-grid__item {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}
.ms-case-grid__item:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transform: translateY(-4px);
}
.ms-case-grid__thumb img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.ms-case-grid__noimg {
  width: 100%;
  aspect-ratio: 16/9;
  background: #f0f0f0;
}
.ms-case-grid__body {
  padding: 16px;
}
.ms-case-grid__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ms-color-text);
  line-height: 1.5;
  margin-bottom: 4px;
}
.ms-case-grid__date {
  font-size: 13px;
  color: #999;
}
@media (max-width: 767px) {
  .ms-case-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   ブログ記事内コンテンツスタイル
   ============================================================ */
.post_content .section-image,
.post_content figure.section-image {
  display: block;
  margin: 2em auto;
  text-align: center;
}
.post_content .section-image img {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
}
.post_content .point-box {
  background: rgba(15, 155, 142, 0.08);
  border-left: 4px solid var(--ms-color-main);
  border-radius: 8px;
  padding: 1.2em 1.5em;
  margin: 1.5em 0;
}
.post_content .note-box {
  background: #FFF9E6;
  border-left: 4px solid #E6A817;
  border-radius: 8px;
  padding: 1.2em 1.5em;
  margin: 1.5em 0;
}
.post_content .summary-box {
  background: linear-gradient(135deg, var(--ms-color-main) 0%, #0a786e 100%);
  color: #fff;
  border-radius: 12px;
  padding: 1.5em 2em;
  margin: 2em 0;
}
.post_content .summary-box ul { list-style: none; padding: 0; }
.post_content .summary-box li {
  padding-left: 1.5em;
  position: relative;
  line-height: 1.8;
}
.post_content .summary-box li::before {
  content: '\2714';
  position: absolute;
  left: 0;
  color: rgba(255,255,255,0.8);
}
.post_content .summary-box__title {
  color: #fff;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.5em;
}
.post_content .post-cta {
  background: linear-gradient(135deg, var(--ms-color-main) 0%, #0a786e 100%);
  border: none;
  border-radius: 12px;
  padding: 2em;
  text-align: center;
  margin: 2em 0;
}
.post_content .post-cta__title {
  color: #fff;
  font-size: 1.2em;
  font-weight: 700;
  margin-bottom: 0.5em;
}
.post_content .post-cta__text {
  color: rgba(255,255,255,0.9);
  margin-bottom: 1em;
}
.post_content .post-cta__btn {
  display: inline-block;
  background: #fff;
  color: var(--ms-color-main);
  padding: 12px 32px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
}
.post_content .post-author-bio {
  display: flex;
  gap: 1em;
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 1.5em;
  margin: 2em 0;
}
.post_content .post-author-bio__photo img {
  min-width: 80px;
  max-width: 80px;
  aspect-ratio: 1/1;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}
.post_content .checklist { list-style: none; padding-left: 0; }
.post_content .checklist li {
  position: relative;
  padding-left: 2em;
  margin-bottom: 0.5em;
}
.post_content .checklist li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--ms-color-main);
  color: #fff;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
}
.post_content .step-list {
  counter-reset: step-counter;
  list-style: none;
  padding-left: 0;
}
.post_content .step-list li {
  counter-increment: step-counter;
  position: relative;
  padding-left: 3em;
  margin-bottom: 1.5em;
}
.post_content .step-list li::before {
  content: counter(step-counter);
  position: absolute;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--ms-color-main);
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
}
.post_content .icon-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1em;
  margin: 1.5em 0;
}
.post_content .icon-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 1.5em;
  text-align: center;
}
.post_content .icon-card__icon svg {
  width: 28px;
  height: 28px;
}

/* ============================================================
   料金テーブルのバッジ表示用
   ============================================================ */
.wp-block-table,
.wp-block-table table,
.wp-block-table thead {
  overflow: visible;
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 599px) {
  .post_content .post-author-bio {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}