/*
Theme Name: Lightning Child
Theme URI: 
Template: lightning
Description: 
Author: 
Tags: 
Version: 0.6.0
*/
/* サイト全体上下の余白を無くす */	
html, body {	
margin: 0 !important;	
padding: 0 !important;	
}	
	
html {	
margin-top: 0 !important;	
}	
	
/* コピーライト非表示 */	
.site-footer .site-footer-copyright p:nth-of-type(2) {	
display: none !important;	
}	
	
/* テキスト要素 > 装飾をオフに */	
h2,	
h3,	
h4,	
h5,	
h3:before,	
h3:after {	
border: none;	
background: none;	
padding-left: 0;		
padding-top: 0;	
margin-bottom:0;
}	
	
/* ヘッダーメニュー横並び・右寄せ・「・」削除・モバイル非表示 */	
.custom-header-menu {	
list-style: none;	
display: flex;	
justify-content: flex-end;	
gap: 20px;	
margin: 0;	
padding: 0;	
}	
	
.custom-header-menu li {	
font-weight: bold;	
font-size: 1.2vw;	
 color: #333;	
cursor: pointer;	
}	
.custom-header-menu li a {	
color: #333; /* 通常時：落ち着いた黒 */	
text-decoration: none;	
transition: color 0.3s ease-in-out;	
}	
	
.custom-header-menu li a:hover {	
color: #6baed6; /* ホバー時：優しい青（スモーキーなブルー） */	
}	
	
/* モバイルでは非表示 */	
@media (max-width: 768px) {	
.custom-header-menu {	
display: none !important;	
}	
}	
	
.custom-header-menu li a {	
text-decoration: none;	
color: inherit;	
}	
	
/* 電話番号をモバイル閲覧時は左寄せ寄せ、かつ少し下にずらす */	
@media screen and (max-width: 768px) {	
.has-text-align-right {	
text-align: left !important;	
margin-top: 8vh !important; /* ← スマホ画面の20%下にずらす */	
}	
}	
	
	
/* 電話番号に角丸背景色をつける */	
.has-text-align-right  {	
display: block;	
text-align: right; /* デフォルト：右寄せ */	
margin: 0;	
}	
	
.has-text-align-right strong {	
display: inline-block;	
background-color: #F26419;	
color: white !important; /* ← 追加 */	
padding: 0.4em 0.8em;	
border-radius: 12px;	
 font-size: 1vw;	
}	
	
.has-text-align-right strong a {	
color: white !important;	
text-decoration: none; /* 任意：下線を消す場合 */	
}	
	
/* モバイルのハンバーガーメニュー非表示 */	
@media (max-width: 991px) {	
#vk-mobile-nav-menu-btn {	
display: none !important;	
visibility: hidden !important;	
opacity: 0 !important;	
pointer-events: none !important;	
}	
}	
	
/* サイトの見出し（画面上だけ）を非表示にする */	
.site-header-logo {	
display: none !important;	
}	

/* メインビジュアル */	
.image-cover {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
}

.image-cover__img {
  width: 100%;
  height: auto;
  display: block;
}

.cover-text-group {
  position: absolute;
  top: 22vh;
  left: 10%;
  z-index: 10;
  max-width: 600px;
  line-height: 1.6;
}

.cover-text {
  font-size: 2.5vw;
  color: #333;
  margin: 0 0 1em 0;
}

.cover-subtext {
  font-size: 1.2vw;
  color: #F26419;
  margin: 0;
}

/* スマホ用（SP） */
@media screen and (max-width: 768px) {
  .image-cover.sp-only {
    position: relative;
  }

  .sp-only .cover-text-group {
    position: absolute;
    top: 10vh;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 10;
    width: 90%;
  }

  .sp-only .cover-text {
    font-size: 6vw;
    color: #333;
    margin-bottom: 1em;
  }

  .sp-only .cover-subtext {
    font-size: 4.0vw;
    color: #F26419;
    margin: 0;
  }
}

/* 表示切り替え */
.pc-only { display: block; }
.sp-only { display: none; }

@media screen and (max-width: 768px) {
  .pc-only { display: none !important; }
  .sp-only { display: block !important; }
}

/* ポップアップ */	
/* CTA本体 */	
/* 全体ボックス */	
.cta-box {	
position: fixed;	
bottom: 20px;	
right: 20px;	
background: white;	
border-radius: 12px;	
box-shadow: 0 4px 20px rgba(0,0,0,0.2);	
padding: 20px;	
max-width: 300px;	
z-index: 9999;	
	
/* アニメーション */	
opacity: 0;	
 transform: translateY(-60px);	
animation: fadeSlideIn 1.0s ease-out forwards;	
}	
	
/* 閉じるボタン */	
.cta-close {	
position: absolute;	
top: 8px;	
right: 10px;	
background: transparent;	
border: none;	
font-size: 20px;	
font-weight: bold;	
color: #666;	
cursor: pointer;	
}	
	
/* フェードイン + スライド */	
@keyframes fadeSlideIn {	
0% {	
opacity: 0;	
transform: translateY(-60px);	
}	
100% {	
opacity: 1;	
transform: translateY(0);	
}	
}	
	
/* 内容 */	
.cta-content {	
display: flex;	
flex-direction: column;	
gap: 16px;	
margin-top: 10px;	
}	
	
.cta-image-text {	
text-align: center;	
}	
	
.cta-image-text img {	
width: 100%;	
height: auto;	
background: transparent;	
margin-bottom: 8px;	
}	
	
.cta-image-text p {	
font-size: 16px;	
font-weight: bold;	
line-height: 1.4;	
color: #333;	
margin: 0;	
}	
	
/* モバイル対応 */	
@media (max-width: 768px) {	
.cta-box {	
right: 10px;	
bottom: 10px;	
max-width: 50%;	
}	
}	
	
/* フェードイン */	
.fade-in {	
opacity: 0;	
transform: translateY(25px);	
transition: all 0.8s ease;	
}	
	
.fade-in.show {	
opacity: 1;	
transform: translateY(0);	
}	
	


/* ヒーローセクションの箇条書き部分 */	
.hero {	
list-style: none;		
}	
	
.hero li {		
font-size: 1.1rem;	
color: #fff;	
}	

/* ▼1. 「こんなお悩みありませんか？」背景の下を斜めにカット */	
.trouble-section {	
position: relative;	
background: #f8f8f7; /* 任意の色 */	
padding: 60px 20px;	
z-index: 1;	
overflow: hidden;	
}	
	
.trouble-section::after {	
content: "";	
position: absolute;	
bottom: 0;	
left: 0;	
width: 100%;	
height: 80px;	
background:  #fff;	
clip-path: polygon(0 0, 50% 100%, 100% 0, 100% 100%, 0 100%);	
z-index: 2;	
}	

/* ▼2. 「もやもや」背景の下を斜めにカット */	
.moya {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  height: 120px;
  z-index: 1;
  overflow: hidden;
}
	
.moya::after {	
content: "";	
position: absolute;	
bottom: 0;	
left: 0;	
width: 100vw;	
height: 120px;	
background: #b3e0f2;	
clip-path: polygon(0 0, 50% 100%, 100% 0, 100% 100%, 0 100%);	
z-index: 2;	
}	
	
/* ▼3. 『書類通過パス』セクションの背景を上へこみ型に */	
.solution-section {	
position: relative;	
background: #b3e0f2; /* セクション全体の色 */	
padding: 100px 20px 60px;	
overflow: hidden;	
z-index: 1;	
}	
	
.solution-section::before {	
content: "";	
position: absolute;	
top: 0;	
left: 0;	
width: 100%;	
height: 80px;	
background:  #b3e0f2; /* 背景色と合うよう調整（親の下にある背景色） */	
clip-path: polygon(0 100%, 50% 0, 100% 100%, 100% 0, 0 0);	
z-index: 0;	
}	
	
	
/* ▼3. 特徴ボックスのデザイン（カード＋番号＋画像） */	
.feature-section {	
display: flex;	
gap: 20px;	
justify-content: center;	
flex-wrap: wrap;	
position: relative;	
z-index: 2;	
}	
.feature-box {	
background: #fff;	
border: 1px solid #ddd;	
border-radius: 12px;	
padding: 20px;	
width: 350px;	
text-align: center;	
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);	
position: relative;	
}	
	
.feature-box p {	
	text-align: left;
}	
	
.feature-box img {	
width: 80px;	
height: 80px;	
object-fit: contain;	
margin-bottom: 10px;	
}	
.feature-number {	
position: absolute;	
top: 10px;	
left: 10px;	
background: #ffc107;	
color: #fff;	
font-weight: bold;	
padding: 4px 10px;	
border-radius: 3px;	
font-size: 20px;	
}	
	
.trouble-section {	
/* このグループブロック内でのみ vk-margin-md を 0 に設定 */	
--vk-margin-md: 0 !important;	
}	

/* テーブルを横スクロール対応にするためのラッパーを使用 */	
.compare-table-wrapper {	
overflow-x: auto;	
-webkit-overflow-scrolling: touch;
}	
	
/* テーブル自体のスタイルは保持 */
.wp-block-table.compare-table {	
width: 100%;	
border-collapse: collapse;	
text-align: center;	
font-size: 16px;	
font-weight: bold;	
min-width: 600px; /* モバイルでも崩れないように最低幅を確保 */	
}	
	
/* セル */	
.wp-block-table.compare-table th,	
.wp-block-table.compare-table td {	
border: 1px solid #ccc;	
padding: 12px 8px;	
word-break: break-word; /* 改行対応 */	
}	
	
/* ヘッダー背景 */	
.wp-block-table.compare-table thead th {	
background-color: #38b6ff;	
color: #fff;	
}	
	
/* 偶数行背景 */	
.wp-block-table.compare-table tbody tr:nth-child(even) {	
background-color: #f8f8f8;	
}	
	
/* 書類通過パス列の強調（2列目） */	
.compare-table td:nth-child(2),	
.compare-table th:nth-child(2) {	
border-left: 3px solid #38b6ff !important;	
border-right: 3px solid #38b6ff !important;	
	
font-weight: bold;	
}	
	
/* 上下の青枠 */	
.compare-table tr:first-child td:nth-child(2) {	
border-top: 3px solid #38b6ff !important;	
}	
.compare-table tr:last-child td:nth-child(2) {	
border-bottom: 3px solid #38b6ff !important;	
}	
	
/* モバイル時のフォント調整（崩さず可読性確保） */	
@media (max-width: 768px) {	
.wp-block-table.compare-table {	
font-size: 14px;	
}	
}	
	
@media (max-width: 768px) {	
/* テーブル自体の文字サイズや余白を調整 */	
.wp-block-table.compare-table {	
font-size: 13px; /* 通常16px→13pxに */	
min-width: 560px; /* 横スクロール幅を少し縮小 */	
}	
	
.wp-block-table.compare-table th,	
.wp-block-table.compare-table td {	
padding: 8px 6px; /* 上下左右の余白を縮小 */	
}	
	
/* 表の周囲に少し余白を追加（スクロールしやすく） */	
.compare-table-wrapper {	
padding: 0 10px;	
}	
}	

/* === サービスの流れ（ステップ5まで／オレンジ基調） === */

/* STEPアイコンの丸 */
.step-icon-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: white;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 50px;
  position: relative;
  z-index: 1;
  margin-right: 16px;
  flex-shrink: 0;
}

/* 点線（下） */
.step-icon-circle::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 150px;
  background-image: repeating-linear-gradient(
    to bottom,
    #ffa552,
    #ffa552 4px,
    transparent 4px,
    transparent 8px
  );
  z-index: 0;
}

/* STEP5で終了 → 点線非表示 */
.step-block:nth-child(5) .step-icon-circle::after {
  content: none;
}

/* 背景カラーのグラデーション（薄〜濃オレンジ） */
.step-color-1 { background-color: #ffe1c2; }
.step-color-2 { background-color: #ffd2a1; }
.step-color-3 { background-color: #ffc47f; }
.step-color-4 { background-color: #ffb65d; }
.step-color-5 { background-color: #ffa552; }

/* ステップ全体ブロック */
.step-block {
  display: flex;
  align-items: flex-start;
  position: relative;
  margin-bottom: 80px;
}

/* step6と下のCTAの余白を無くす */
.step5 {
margin-bottom: 0px;
padding-bottom:80px;
}

/* テキスト部分 */
.step-text {
  flex: 1;
}

.step-title {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 8px 0;
}

.step-desc {
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  color: #333;
}

.step-desc .highlight {
  color: #e27f1c;
  font-weight: bold;
}

/* === レスポンシブ対応（ステップ5まで） === */
@media (max-width: 768px) {
  .step-block:nth-child(1) .step-icon-circle::after {
    height: 200px;
  }
  .step-block:nth-child(2) .step-icon-circle::after {
    height: 220px;
  }
  .step-block:nth-child(3) .step-icon-circle::after {
    height: 200px;
  }
  .step-block:nth-child(4) .step-icon-circle::after {
    height: 200px;
  }
  .step-block:nth-child(5) .step-icon-circle::after {
    height: 0; /* 表示しないので0でOK */
  }
}

/* 方眼紙背景 */
.grid-background {
background-color: #fff;
background-image:
linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
background-size: 15px 15px;
}

/* お支払い方法 */	
.payment-section {	
max-width: 800px;	
margin: 0 auto;	
padding: 2rem 1rem;	
font-family: "Helvetica", sans-serif;	
}	
	
.payment-row {	
display: flex;	
flex-wrap: wrap;	
border-top: 1px solid #ddd;	
padding: 1.5rem 0;	
gap: 1rem;	
}	
	
/* デスクトップ時の横並び */	
.payment-label {	
flex: 0 0 200px;	
background-color: #f0f0f0;	
border-radius: 8px;	
font-weight: bold;	
color: #333;	
padding: 0.5rem 1rem;	
	
/* ▼ 中央揃えのための追加 */	
display: flex;	
align-items: center;  /* 上下中央揃え */	
justify-content: center; /* 左右中央揃え */	
text-align: center;	
}	
	
/* 説明文 */	
.payment-detail {	
flex: 1;	
color: #555;	
line-height: 1.6;	
}	
	
/* ▼ モバイル表示用：横並びを縦並びに切り替える */	
@media screen and (max-width: 768px) {	
.payment-row {	
display: block; /* ← flex自体をやめる */	
padding: 1rem 0;	
}	
	
.payment-label {	
display: inline-block;     /* ← ラベルサイズに合わせて表示 */	
background-color: #f0f0f0;	
border-radius: 6px;	
padding: 0.3rem 0.8rem;	
font-weight: bold;	
text-align: left;	
margin-bottom: 0.5rem;	
}	
	
.payment-detail {	
display: block;	
color: #555;	
line-height: 1.6;	
}	
}	

/* フォーム全体の見た目を整える */
.wpcf7 {
background: #fff;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
font-family: "Helvetica Neue", "Noto Sans JP", sans-serif;
max-width: 700px;
margin: 0 auto;
}

/* ラベル */
.form-group label {
font-weight: 600;
font-size: 15px;
color: #333;
display: block;
margin-bottom: px;
}

/* テキスト/メール/電話/年齢/テキストエリア */
.form-control {
width: 100%;
padding: 10px 14px;
font-size: 15px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 6px;
transition: border-color 0.3s ease;
}

.form-control:focus {
border-color: #007bff;
outline: none;
}

/* ラジオボタンのスタイル */
.form-radio label {
display: inline-block;
margin-right: 15px;
font-weight: normal;
cursor: pointer;
font-size: 15px;
}

input[type="radio"] {
margin-right: 5px;
}

/* テキストエリア専用調整 */
textarea.form-control {
height: 120px;
resize: vertical;
}

/* 各フォームの間隔 */
.form-group {
margin-bottom: 20px;
}

/* 送信ボタン */
.btn-submit {
display: inline-block;
background-color: #007bff;
color: #fff;
padding: 12px 30px;
border: none;
border-radius: 6px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease;
}

.btn-submit:hover {
background-color: #0056b3;
}

/* レスポンシブ調整 */
@media (max-width: 576px) {
.form-radio label {
display: block;
margin-bottom: 8px;
}

.btn-submit {
width: 100%;
text-align: center;
}
}

.wpcf7 form label > .wpcf7-form-control {
margin-top: 2px;
display: block;
}

.required-note {
color: red !important;
font-weight: normal !important; /* 通常より軽いフォントウェイト */
font-size: 85% !important;   /* より小さめ */
}

.wpcf7 input[type="submit"] {
width: 100%;
max-width: 300px;   /* 必要に応じて調整可能 */
padding: 15px 20px;
font-size: 18px;
background-color: #0073aa; /* ワードプレスの青を参考 */
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease;
display: block;
margin: 20px auto 0;

 font-weight: bold;
}

.wpcf7 input[type="submit"]:hover {
background-color: #005a8c;
}

/* フォーム入力確認文字装飾 */
.required-confirmation {
 font-weight: bold !important;

}

/* フォーム入力確認位置 */
.form-confirmation {
width: 100%;
max-width: 300px;   /* 必要に応じて調整可能 */
 font-size: 15px;
cursor: pointer;
display: block;
margin: 20px auto 0;

 font-weight: bold;
}

/* Q部分のデザイン（#ffa552ベース＋白文字） */
.wp-block-themeisle-blocks-accordion-item summary {
  background-color: #ffa552; /* オレンジ */
  color: #fff;
  padding: 16px 48px 16px 16px;
  font-weight: bold;
  font-size: 18px;
  border: 1px solid #e38f3c; /* 濃いめのオレンジ系で枠 */
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  list-style: none;
  margin-bottom: 8px;
}

/* 開閉アイコンを右に表示（白アイコン） */
.wp-block-themeisle-blocks-accordion-item summary::after {
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  transition: 0.3s;
  pointer-events: none;
}

/* 回答部分（白背景＋オレンジ枠＋文字色をダークグレーに） */
.wp-block-themeisle-blocks-accordion-item__content {
  padding: 16px;
  border: 1px solid #ffc991;
  border-top: none;
  border-radius: 0 0 6px 6px;
  background-color: #fff;
  font-size: 17px;
  color: #333;
  margin-bottom: 16px;
}

/* Safariなどで marker を消す（補助） */
.wp-block-themeisle-blocks-accordion-item summary::-webkit-details-marker {
  display: none;
}

/* リストエリアの背景色と装飾をオレンジトーンに */
.list-area {
  background-color: #ffa552;
  padding: 24px;
}

/* リストスタイル（オレンジ背景＋白文字） */
.list-area .wp-block-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.list-area .wp-block-list li {
  background-color: #ffa552;
  color: #fff;
  font-weight: bold;
  padding: 10px 16px;
  border-radius: 6px;
  margin-bottom: 0;
  transition: background-color 0.3s;
}

/* ホバー時に少し濃いめのオレンジへ */
.list-area .wp-block-list li:hover {
  background-color: #e38f3c;
}

/* リンク文字の白保持 */
.list-area .wp-block-list li a {
  color: #fff;
  text-decoration: none;
  display: block;
}

.wp-block-themeisle-blocks-accordion-item summary:hover {
  background-color: #f9912c;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* プライバシーポリシー */
.privacy-h {
	font-size:1rem;
}

/* 利用規約 */
.term-h {
	font-size:1rem;
}

/* 特定商取引ページ */
.commerce-info table {
width: 100%;
border-collapse: collapse;
margin-top: 1em;
}
.commerce-info th, .commerce-info td {
border: 1px solid #ccc;
padding: 10px;
vertical-align: top;
text-align: left;
}
.commerce-info th {
background-color: #f5f5f5;
width: 25%;
}

/* 散歩道の記事スライド */
.swiper-title {
	font-weight:bold;
	font-size:1.1rem;
}

.article-swiper {
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden; /* ←追加 */
}

.article-swiper-pagination {
    text-align: center;
    margin-top: 20px; /* ページネーションとスライドの間に余白を追加 */
}

/* カードのスタイル（任意で調整） */
.navi-entry-card {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  text-decoration: none;
  color: inherit;
  display: block;
}

.navi-entry-card-thumb {
  margin: 0;
  overflow: hidden;
}

.navi-entry-card-thumb img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.navi-entry-card:hover .navi-entry-card-thumb img {
  transform: scale(1.05);
}

.navi-entry-card-title {
  padding: 10px;
}

/* モバイル（画面幅768px以下）のみ適用 */
@media screen and (max-width: 768px) {
  .navi-entry-card-title {
    font-size: 0.8rem;
  }
}