@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

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

/* ローディング画像サイズ変更 */
#wptime-plugin-preloader{
-moz-background-size: 50%;
-o-background-size: 50%;
-webkit-background-size: 50%;
background-size: 50%;
}


/* Contact Form 7 */

/* テキストを太字 */
.wpcf7-form label {
font-weight: bold;
}
/* フォームの下に余白 */
.wpcf7-form p {
margin-bottom: 30px;
}
/* フォームのカスタマイズ */
.wpcf7-text, .wpcf7-email, .wpcf7-tel, .wpcf7-textarea {
width: 100%;
background-color: #fff;
margin-top: 5px;
}
/* ラジオボタンの左の余白 */
.wpcf7-radio span {
margin-left: 0;
}
/* ボタンのカスタマイズ */
.wpcf7-submit, .wpcf7-previous {
display: inline-block;
width: 240px;
padding: 1.2em 1em;
border-radius: 50px;
background: #D53633;/* ここにメインカラー */
font-size: 16px;
font-weight: 700;
letter-spacing: 0.2em;
line-height: 1;
color: #fff!important;
}
/* 必須マーク */
.required {
color: #fff;
background: #D53633;/* ここにメインカラー */
font-size: 0.8em;
padding: 0.3em;
border-radius: 0.5em;
}

/* =============================================================================
   11PAINT Custom CSS
   WordPress追加CSSにコピペして使用
   ============================================================================= */


/* -----------------------------------------------------------------------------
   共通カスタムプロパティ
   ----------------------------------------------------------------------------- */
:root {
  --c11-main: #746e59;
  --c11-bg-dark: rgb(59, 82, 73);
}


/* =============================================================================
   1. メインビジュアル (ファーストビュー)
   ============================================================================= */

/* --- 斜め背景カバー (clip-path) --- */
body .p-mainVisual .p-mainVisual__inner .p-mainVisual__slide.c-filterLayer.-texture-dot::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: var(--c11-bg-dark) !important;
  background-image: none !important;
  z-index: 2 !important;
  opacity: 1 !important;
  clip-path: polygon(0 0, 65% 0, 45% 100%, 0 100%) !important;
}

body .p-mainVisual .p-mainVisual__inner .p-mainVisual__slide.c-filterLayer.-texture-dot::after {
  display: none !important;
}

/* --- バッジ (チェックリスト -> タグ風) --- */
.p-mainVisual .is-style-check_list {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  justify-content: flex-start !important;
  max-width: 500px !important;
}

.p-mainVisual .is-style-check_list li {
  background: var(--c11-main) !important;
  color: #fff !important;
  padding: 5px 16px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
}

.p-mainVisual .is-style-check_list li::before,
.p-mainVisual .is-style-check_list li::marker {
  display: none !important;
  content: none !important;
}

/* --- グループブロック: テキストを下の要素に中央揃え --- */
.p-mainVisual .p-blogParts > .wp-block-group {
  width: fit-content !important;
  text-align: center !important;
}

.p-mainVisual .p-blogParts > .wp-block-group .swell-block-button__link {
  min-width: 380px !important;
}

/* --- 白丸 (3つの安心) --- */
.p-mainVisual .is-style-num_circle {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  list-style: none !important;
  padding: 0 !important;
}

.p-mainVisual .is-style-num_circle li {
  background: #fff !important;
  color: var(--c11-main) !important;
  border: 3px solid var(--c11-main) !important;
  width: 110px !important;
  height: 110px !important;
  min-width: 110px !important;
  min-height: 110px !important;
  max-width: 110px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  flex: 0 0 110px !important;
}

.p-mainVisual .is-style-num_circle li::before,
.p-mainVisual .is-style-num_circle li::marker {
  display: none !important;
  content: none !important;
}


/* =============================================================================
   2. 画像ブロック (.image-blocks)
   - テキストラベルを画像上辺に被せて表示 (ピル型・白背景+枠線)
   ============================================================================= */

.image-blocks .swell-block-column {
  position: relative;
  overflow: visible;
  padding-top: 15px;
}

.image-blocks .swell-block-column .is-style-balloon_box2 {
  position: absolute;
  z-index: 2;
  top: 15px;
  left: 15px;
  transform: translateY(-50%);
  border-radius: 50px;
  padding: 0.2em 0.8em;
  white-space: nowrap;
  background: #fff;
  border: 2px solid var(--c11-main);
  margin: 0;
}

.image-blocks .swell-block-column .is-style-balloon_box2::before,
.image-blocks .swell-block-column .is-style-balloon_box2::after {
  display: none !important;
}

.image-blocks .swell-block-column .wp-block-image,
.image-blocks .swell-block-column .wp-block-image img {
  border-radius: 8px;
  overflow: hidden;
}


/* =============================================================================
   3. カスタム見出し (.ace-heading)
   - ショートコード: [custom_h2 top="上段" bottom="下段"]
   ============================================================================= */

/* --- コンテナ --- */
.ace-heading {
  position: relative;
  text-align: left;
  overflow: visible;
  padding: 1rem 1.4rem;
  margin-bottom: 2.8rem;
  border-top: 1px solid var(--color_main, #746e59);
  border-bottom: 1px solid var(--color_main, #746e59);
}

/* --- 上段テキスト (白フチ付き) --- */
.ace-heading__top {
  display: block;
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--c11-main);
  line-height: 1.5;
  letter-spacing: 0.05em;
  -webkit-text-stroke: 2px #fff;
  paint-order: stroke fill;
  text-shadow:
     2px  2px 0 #fff,
    -2px -2px 0 #fff,
     2px -2px 0 #fff,
    -2px  2px 0 #fff,
     3px  0   0 #fff,
    -3px  0   0 #fff,
     0    3px 0 #fff,
     0   -3px 0 #fff;
  margin-bottom: 0.75rem;
  position: relative;
  z-index: 2;
}

/* --- 下段テキスト (丸角バー) --- */
.ace-heading__bar {
  display: inline-block;
  background: var(--color_main, #746e59);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.6rem 1.875rem;
  margin-left: calc(-1rem - 14px);
  border-radius: 999px;
  line-height: 1.5;
  position: relative;
  z-index: 2;
}

/* --- pattern: light (濃い背景セクション用) --- */
.ace-heading--light {
  border-top-color: #fff;
  border-bottom-color: #fff;
}

.ace-heading--light .ace-heading__bar {
  background: #fff;
  color: var(--c11-main);
}

/* --- 人物画像 (::after) --- */
.ace-heading::after {
  content: "";
  position: absolute;
  right: -1.25rem;
  bottom: -0.625rem;
  width: 15rem;
  height: 11.25rem;
  background: var(--ace-heading-img) no-repeat center / contain;
  z-index: 0;
  pointer-events: none;
}


/* =============================================================================
   4. ステップブロック カード化 (.custom-point)
   - 2カラムグリッド (スマホ1カラム)
   - POINTバッジ + 画像 + 見出し + テキスト
   ============================================================================= */

/* --- コンテナ: 2カラムグリッド --- */
.swell-block-step.custom-point {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1.5rem !important;
}

/* --- SWELL縦線コネクタ非表示 --- */
.swell-block-step.custom-point::before,
.swell-block-step.custom-point .swell-block-step__item::before,
.swell-block-step.custom-point .swell-block-step__item::after {
  display: none !important;
}

/* --- 各カード --- */
.swell-block-step.custom-point .swell-block-step__item {
  position: relative !important;
  background: #fff !important;
  border: 4px solid var(--color_main, #746e59) !important;
  border-radius: 0.5rem !important;
  padding: 0 !important;
  padding-left: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-content: start !important;
}

/* --- POINTバッジ --- */
.swell-block-step.custom-point .swell-block-step__number {
  position: absolute !important;
  top: -1.1rem !important;
  left: 1.25rem !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  background: var(--color_main, #746e59) !important;
  border-radius: 999px !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.3rem !important;
  padding: 0.35rem 1rem !important;
  white-space: nowrap !important;
}

.swell-block-step.custom-point .swell-block-step__number .__label {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: #fff !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.swell-block-step.custom-point .swell-block-step__number::after {
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  line-height: 1 !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  flex-shrink: 0 !important;
  margin-top: -2px !important;
}

/* --- body: contents展開 --- */
.swell-block-step.custom-point .swell-block-step__body {
  display: contents !important;
}

/* --- カード内: 画像 (1行目) --- */
.swell-block-step.custom-point .swell-block-step__body .wp-block-image {
  grid-row: 1 !important;
  grid-column: 1 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 0.3rem 0.3rem 0 0 !important;
}

.swell-block-step.custom-point .swell-block-step__body .wp-block-image img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  display: block !important;
}

/* --- カード内: 見出し (2行目) + 下線 --- */
.swell-block-step.custom-point .swell-block-step__title {
  grid-row: 2 !important;
  grid-column: 1 !important;
  font-size: 1.1rem !important;
  font-weight: 900 !important;
  text-align: center !important;
  padding: 0.75rem 1rem 0.5rem !important;
  margin: 0 0.75rem !important;
  border: none !important;
  border-bottom: 2px solid var(--color_main, #746e59) !important;
}

/* --- カード内: テキスト (3行目以降) --- */
.swell-block-step.custom-point .swell-block-step__body > p {
  grid-column: 1 !important;
  padding: 0 1rem !important;
  font-size: inherit !important;
  line-height: 1.6 !important;
  margin: 0.25rem 0 !important;
}

.swell-block-step.custom-point .swell-block-step__body > p:last-child {
  padding-bottom: 1rem !important;
}


/* =============================================================================
   5. レスポンシブ (max-width: 600px)
   ============================================================================= */
@media (max-width: 600px) {

  /* --- 1. メインビジュアル: 斜めカバー --- */
  body .p-mainVisual .p-mainVisual__inner .p-mainVisual__slide.c-filterLayer.-texture-dot::before {
    clip-path: polygon(0 0, 100% 0, 100% 5%, 5% 100%, 0 100%) !important;
  }

  /* --- 1. メインビジュアル: バッジ --- */
  body .p-mainVisual .p-blogParts ul.wp-block-list.is-style-check_list {
    flex-wrap: nowrap !important;
    gap: 4px !important;
    justify-content: center !important;
    max-width: none !important;
  }

  body .p-mainVisual .p-blogParts ul.is-style-check_list > li {
    flex: 1 1 0 !important;
    padding: 4px 3px !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
  }

  /* --- 1. メインビジュアル: 白丸 --- */
  body .p-mainVisual .p-blogParts ul.is-style-num_circle {
    flex-wrap: nowrap !important;
    gap: 10px !important;
    justify-content: center !important;
  }

  body .p-mainVisual .p-blogParts ul.is-style-num_circle > li {
    flex: 0 0 100px !important;
    width: 100px !important;
    height: 100px !important;
    min-width: 100px !important;
    min-height: 100px !important;
    max-width: 100px !important;
    font-size: 11px !important;
    padding: 8px !important;
  }

  /* --- 1. メインビジュアル: グループブロック中央揃え --- */
  .p-mainVisual .p-blogParts > .wp-block-group {
    width: 100% !important;
    text-align: center !important;
  }

  .p-mainVisual .p-blogParts > .wp-block-group .swell-block-button__link {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* --- 2. 画像ブロック --- */
  .image-blocks .swell-block-column {
    padding-top: 12px;
  }

  .image-blocks .swell-block-column .is-style-balloon_box2 {
    top: 12px;
    left: 10px;
    padding: 0.15em 0.6em;
  }

  /* --- 3. カスタム見出し --- */
  .ace-heading {
    text-align: center;
    padding: 1rem;
  }

  .ace-heading__top {
    font-size: inherit;
    -webkit-text-stroke: 1.5px #fff;
  }

  .ace-heading__bar {
    margin-left: 0;
    padding: 0.6rem 1.5rem;
    font-size: inherit;
    min-width: 90%;
    text-align: center;
    box-sizing: border-box;
  }

  .ace-heading::after {
    right: -0.625rem;
    bottom: auto;
    width: 12.5rem;
    height: 9.375rem;
    transform: translateY(-90%);
  }

  /* --- 4. ステップブロック --- */
  .swell-block-step.custom-point {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
}