@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
*/

/* ================================
   問題提起：リッチカラムのカード外観のみ調整
   - 白背景
   - 薄い枠線
   - 角丸
   - 影
   - カード内余白
================================ */
.problem-cards .swell-block-column {
  padding: 26px 22px 30px !important;
  background: #ffffff !important;
  border: 1px solid #dce8f4 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 30px rgba(8, 43, 95, 0.07) !important;
}

/* ================================
   口コミ獲得の仕組み：ステップ番号
   - 各カード左上に 01〜04 の丸番号を表示
================================ */
.flow-cards .swell-block-column {
  position: relative;
}

/* 丸番号の共通デザイン */
.flow-cards .swell-block-column::before {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #1478d4;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  z-index: 2;
}

/* 各カードの番号 */
.flow-cards .swell-block-column:nth-child(1)::before {
  content: "01";
}

.flow-cards .swell-block-column:nth-child(2)::before {
  content: "02";
}

.flow-cards .swell-block-column:nth-child(3)::before {
  content: "03";
}

.flow-cards .swell-block-column:nth-child(4)::before {
  content: "04";
}

/* カード外観も整える */
.flow-cards .swell-block-column {
  padding: 28px 20px 24px !important;
  background: #ffffff !important;
  border: 1px solid #dce8f4 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 30px rgba(8, 43, 95, 0.07) !important;
}

/* ================================
   Contact Form 7：お問い合わせフォーム
   - サンプルサイト風の白カードデザイン
   - 全項目を1カラム表示
================================ */
.k365-contact-form {
  max-width: 820px;
  margin: 0 auto;
  padding: 32px;
  background: #ffffff;
  border: 1px solid #dce8f4;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(8, 43, 95, 0.07);
}

.k365-contact-form label {
  display: block;
  margin-bottom: 16px;
  color: #082b5f;
  font-size: 13px;
  font-weight: 900;
}

.k365-contact-form .required {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #ff7a1a;
  color: #ffffff;
  font-size: 11px;
  line-height: 1.3;
}

.k365-contact-form input,
.k365-contact-form textarea {
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border: 1px solid #cfddea;
  border-radius: 6px;
  background: #ffffff;
  color: #18304f;
  font-size: 15px;
}

.k365-contact-form textarea {
  min-height: 160px;
  resize: vertical;
}

.k365-contact-form .wpcf7-submit {
  width: 100%;
  min-height: 52px;
  margin-top: 6px;
  border: none;
  border-radius: 8px;
  background: #ff7a1a;
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(255, 122, 26, 0.24);
}

.k365-contact-form .wpcf7-submit:hover {
  opacity: 0.9;
}

/* エラー表示 */
.k365-contact-form .wpcf7-not-valid-tip {
  margin-top: 4px;
  color: #d93025;
  font-size: 13px;
}

.k365-contact-form .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 12px 16px;
  border-radius: 6px;
}

/* Contact Form 7：プライバシーポリシー同意チェック */
.k365-form-privacy {
  margin: 18px 0 22px;
  font-size: 14px;
  font-weight: 700;
  color: #082b5f;
}

.k365-form-privacy .wpcf7-list-item {
  margin: 0;
}

.k365-form-privacy label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.k365-form-privacy input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #1684d8;
}

.k365-form-privacy a {
  color: #082b5f;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ================================
   成果が出る4つの理由：写真付きカード
   - 白背景
   - 薄い枠線
   - 角丸
   - 影
   - 写真だけ上部いっぱいに表示
================================ */
/* 成果が出る4つの理由：写真付きカード */
.reason-photo-cards .swell-block-column {
  padding: 0 0 26px !important; /* 上左右は0、下だけ余白 */
  overflow: hidden;
  background: #ffffff !important;
  border: 1px solid #dce8f4 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 30px rgba(8, 43, 95, 0.07) !important;
}

/* カード上部の写真 */
.reason-photo-cards .swell-block-column > .wp-block-image:first-child {
  margin: 0 0 22px !important;
  width: 100%;
}

/* 写真をカード幅いっぱいに表示 */
.reason-photo-cards .swell-block-column > .wp-block-image:first-child img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
}

/* 写真以外のテキスト部分だけ左右余白を付ける */
.reason-photo-cards .swell-block-column > :not(.wp-block-image) {
  margin-left: 22px;
  margin-right: 22px;
}

/* 最後の要素に余計な下マージンが出る場合の調整 */
.reason-photo-cards .swell-block-column > :last-child {
  margin-bottom: 0 !important;
}

/* ================================
	30分無料診断：説明カード
================================ */
.diagnosis-lead-card {
  padding: 28px 30px;
  background: #ffffff;
  border-left: 5px solid #1684d8;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(8, 43, 95, 0.06);
}

/* 右側の画像 */
.diagnosis-lead-card .wp-block-image {
  margin: 0;
}

.diagnosis-lead-card .wp-block-image img {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* スマホでは縦積み */
@media (max-width: 767px) {
  .diagnosis-lead-card {
    padding: 24px 20px;
  }

  .diagnosis-lead-card .wp-block-image {
    margin-top: 20px;
  }
}

/* ================================
   診断の流れ：ステップブロック背景調整
   - ステップ全体を白背景に
   - 薄い枠線・角丸・影を追加
================================ */
.diagnosis-step {
  padding: 28px 30px;
  background: #ffffff !important;
  border: 1px solid #dce8f4;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(8, 43, 95, 0.07);
}

/* ステップ各項目の背景も白に固定 */
.diagnosis-step .swell-block-step__item {
  background: #ffffff !important;
}

/* スマホ時の余白調整 */
@media (max-width: 767px) {
  .diagnosis-step {
    padding: 24px 20px;
  }
}