/*
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;
}

/* ヘッダーメニュー横並び・右寄せ・「・」削除・モバイル非表示 */	
.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; }
}

/* 「応募書類の通過力～」をモバイル閲覧時改行させず、文字サイズ最大 */
h2#service {
  white-space: nowrap;         /* 改行を禁止 */
  overflow: hidden;            /* はみ出した文字を非表示にしないために必要 */
  font-size: clamp(18px, 5vw, 36px);  /* 画面幅に応じて可変フォントサイズ */
}

/* ヒーローセクションの箇条書き部分 */
.hero {
list-style: none;
}

.hero li {
font-size: 1.1rem;
color: #fff;
}

/* ポップアップ */		
/* 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);
}

/* ハンバーガーメニューを開いたときにスクロールをロック */
body.menu-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}


/* ▼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:  #b3e0f2;
  clip-path: polygon(0 0, 50% 100%, 100% 0, 100% 100%, 0 100%);
  z-index: 2;
}


/* ▼2. 『書類通過パス』セクションの背景を上へこみ型に */
.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;
}

/* 「そのお悩み～解決します」をモバイル閲覧時改行させず、文字サイズ最大 */
h2#solution {
  white-space: nowrap;         /* 改行を禁止 */
  overflow: hidden;            /* はみ出した文字を非表示にしないために必要 */
  font-size: clamp(18px, 5vw, 36px);  /* 画面幅に応じて可変フォントサイズ */
}


/* ▼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; 
}

/* サービスの流れ　*/		
/* 全体レイアウト */		
/* 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,		
#ccc,		
#ccc 4px,		
transparent 4px,		
transparent 8px		
);		
z-index: 0;		
}		
		
/* STEP6だけ非表示 */		
.step-icon-circle.step-icon-no-line::after {		
content: none;		
}		
		
/* 色段階（お好みで） */		
.step-color-1 { background-color: #e0f3ff; }		
.step-color-2 { background-color: #b3e5fc; }		
.step-color-3 { background-color: #81d4fa; }		
.step-color-4 { background-color: #4fc3f7; }		
.step-color-5 { background-color: #29b6f6; }		
.step-color-6 { background-color: #0288d1; }		
		
/* ステップブロック全体 */		
.step-block {		
display: flex;		
align-items: flex-start;		
position: relative;		
margin-bottom: 80px;		
}		

/* step6と下のCTAの余白を無くす */
.step6 {
	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: #007acc;		
font-weight: bold;		
}		


/* レスポンシブ対応 */		
/* STEP1 モバイル用 */		
@media (max-width: 768px) {		
.step-block:nth-child(1) .step-icon-circle::after {		
height: 220px;		
}		
.step-block:nth-child(2) .step-icon-circle::after {		
height: 220px;		
}		
.step-block:nth-child(3) .step-icon-circle::after {		
height: 180px;		
}		
.step-block:nth-child(4) .step-icon-circle::after {		
height: 310px;		
}		
.step-block:nth-child(5) .step-icon-circle::after {		
height: 250px;		
}	
}	

/* 方眼紙背景 */
.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;
}

/* テーブルを横スクロール対応にするためのラッパーを使用 */
.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;
  }
}


/* お支払い方法 */	
.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;	
	margin-top: 60px;
 font-weight: bold;	
}	
	
.wpcf7 input[type="submit"]:hover {	
background-color: #005a8c;	
}	
	
/* フォーム入力確認文字装飾 */	
.required-confirmation {	
 font-weight: bold !important;	
	font-size: 120% !important;
}	
	
/* フォーム入力確認位置 */	
.form-confirmation {	
width: 100%;	
max-width: 300px;   /* 必要に応じて調整可能 */	
 font-size: 15px;	
cursor: pointer;	
display: block;	
margin: 20px auto 0;	
	margin-top: 60px;
 font-weight: bold;	
}	

/* Q部分のデザイン（グリーン＋白文字） */		
.wp-block-themeisle-blocks-accordion-item summary {		
  background-color: #2ecc71; /* メインのグリーン */		
  color: #fff;		
  padding: 16px 48px 16px 16px;		
  font-weight: bold;		
  font-size: 18px;		
  border: 1px solid #27ae60; /* 少し濃いグリーン */		
  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 #ccc;		
  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;		
}

/* ホバー時に少し濃いグリーン＋影 */		
.wp-block-themeisle-blocks-accordion-item summary:hover {
  background-color: #27ae60; /* 濃いグリーン */
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1); 
}

/* ✅ このリストエリアのカラム背景をグリーンに変更 */		
.list-area {		
  background-color: #27ae60;		
  padding: 24px;		
}		

.list-area .wp-block-list {		
  list-style: none;		
  padding-left: 0;		
  margin: 0;		
}		

.list-area .wp-block-list li {		
  background-color: #27ae60;		
  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: #2ecc71; /* 明るめのグリーンに戻す */		
}		

.list-area .wp-block-list li a {		
  color: #fff;		
  text-decoration: none;		
  display: block;		
}

/* 特定商取引ページ */		
.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%;
}

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