/*
Theme Name: Lightning Child
Theme URI: 
Template: lightning
Description: 
Author: 
Tags: 
Version: 0.6.0
*/
h1.top-message{
margin-bottom:10px!important;	
}

/******************************
 * レスポンシブ表示切り替え
 ******************************/

/* ===== デフォルト（PC） ===== */
.pc-only {
  display: block;
}

.sp-only {
  display: none;
}

/* ===== スマホ（767px以下） ===== */
@media screen and (max-width: 767px) {
  .pc-only {
    display: none;
  }

  .sp-only {
    display: block;
  }
}

/* ===== PC時：sp-only を含むカラムごと非表示 ===== */
/*
@media screen and (min-width: 768px) {
  .wp-block-column:has(.sp-only) {
    display: none;
  }
}
*/

/* PC（デフォルト） → センター */
.txt-title {
  text-align: center;
}

/* スマホ用 */
@media screen and (max-width: 767px) {
  .txt-title {
    text-align: left;
  }
	.txt-sz{font-size:14px;}
}


@media screen and (max-width: 767px) {
  ul.wp-block-list.list-koma {
    padding-left: 34px !important;
  }
}

ul.wp-block-list.list-koma li {
  padding-left: 0.8em;
}


/*　サービス紹介　ボタン　*/
.btn {
  position: relative; 
  display: flex;
  align-items: center;
  justify-content: center; /* 文字を中央へ */

  width: 100%;
  max-width: 600px;

  background-color: #ffa000;
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;

  border-radius: 14px;
  transition: background-color 0.3s ease;
}

.h-service{
padding: 18px 30px;
}


/* 左のアイコン */
.icon-wrap {
  position: absolute;
  left: 24px; /* ← ボタン左からの距離 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* アイコン画像 */
.arrow-img {
  width: 15px;
  height: auto;
  display: block;
}

/* 中央テキスト */
.btn-text {
  pointer-events: none; /* ← クリック判定を邪魔しない */
}

/* hover */
.btn:hover {
	color:#665959;
  background-color: #ffd19a;
}
@media (max-width: 768px) {
  .btn {
    max-width: 320px;
  }
}

/* ===============================
   TOPコンタクトボタン（完成版）
=============================== */

.contact-btn-mail {
  position: relative;               /* ← アイコン固定用 */
  display: flex;
  align-items: center;
  justify-content: center;          /* 文字は中央 */
  height: 84px;
  padding: 0 40px;                  /* 余白やや広め */
  background-color: #ffa000;
  color: #ffffff;
  font-size: 26px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 20px;
  line-height: 1;
  overflow: hidden;                 /* はみ出し防止 */
  transition: 
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* 少し浮かせる */
.contact-btn-mail:hover {
  background-color: #ffb52e;
  color: #665959;
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.15);
}

/* 押した時 */
.contact-btn-mail:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* ===============================
   アイコン＋文字
=============================== */

.btn-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* アイコン固定（左寄り） */
.btn-icon {
  position: absolute;
  left: 30px;        /* ← ここで微調整 */
  width: 30px;       /* ← 26px文字に対してバランス良 */
  height: auto;
}

/* 文字 */
.btn-text {
  pointer-events: none;
}

@media (max-width: 768px) {

  .contact-btn-mail {
    height: 68px;        /* 少しコンパクトに */
    font-size: 18px;     /* 文字小さく */
    padding: 0 20px;
  }

  .btn-icon {
    width: 18px;         /* アイコンも比例縮小 */
    left: 18px;          /* 位置も微調整 */
  }

}


/******************************************
           小さめボタン①　緑色#218748 #8adeaa
******************************************/
.svp-btn {
  width: 200px;
  height: 34px;
  background-color: #218748;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 22px;
  position: relative;
  transition: background-color 0.3s, color 0.3s;
}

/* 左のアイコン */
.svp-btn-icon {
  width: 14px;
  height: 14px;
  background-image: url("https://toru-koumuten.com/wp-content/uploads/2026/01/button-icon2.png");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 14px;
}

/* テキスト */
.svp-btn-text {
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
}

/* ホバー時 */
.svp-btn:hover {
  background-color: #8adeaa;
  color: #000000;
}

.svp-btn-wrap {
  display: flex;
  justify-content: center;
padding-bottom:0px;
}

/*テキストボックスを中央へ*/
.wp-block-group.text-center-box {
max-width:1000px;
  margin: 0 auto !important;
  padding: 24px;
}


/******************************************
           小さめボタン②　オレンジ #ffa500
******************************************/
.svp-btn-02 {
  width: 200px;
  height: 34px;
  background-color: #ffa500;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 22px;
  position: relative;
  transition: background-color 0.3s, color 0.3s;
}

/* 左のアイコン */
.svp-btn-icon-02 {
  width: 14px;
  height: 14px;
  background-image: url("https://toru-koumuten.com/wp-content/uploads/2026/01/button-icon-1.png");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 14px;
}

/* テキスト */
.svp-btn-text-02 {
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
}

/* ホバー時 */
.svp-btn-02:hover {
  background-color: #ffb52e;
  color: #665959;
}

.svp-btn-wrap-02 {
  display: flex;
  justify-content: center;
padding-bottom:0px;
}


/* ==========================
   サービス一覧へ戻るボタン
========================== */
.return-svp {
 display: flex;          /* ← inline-flex → flex に変更 */
  margin: 0 auto;         /* ← これで中央 */
  align-items: center;
  justify-content: center;
font-weight:bold;
font-size:16px;
gap: 14px;
width:300px;
height:40px;
  background-color: #218748;
  color: #ffffff;
  text-decoration: none;
  border-radius: 24px;
  transition: background-color 0.3s, color 0.3s;
}

/* 左の ●＞ アイコン */
.return-svp-icon {
  width: 20px;
  height: 20px;
  background-image: url("https://toru-koumuten.com/wp-content/uploads/2026/01/button-icon2.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ホバー */
.return-svp:hover {
  background-color: #8ADEAA;
  color: #000000;
}


/******************************************
       TOPスライダー部分のボタン
******************************************/
.tops-btn {
  width: 200px;
  height: 40px;
  background-color: #ffa500;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 20px;
  position: relative;
  transition: background-color 0.3s, color 0.3s;
}

/* 左のアイコン */
.tops-btn-icon {
  width: 20px;
  height: 20px;
  background-image: url("https://toru-koumuten.com/wp-content/uploads/2026/01/button-icon-1.png");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 14px;
}

/* テキスト */
.tops-btn-text {
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
}

/* ホバー時 */
.tops-btn:hover {
  background-color: #ffb52e;
  color: #665959;
}


/* ==========================
   アイコン付き見出し（完成版）
========================== */

/* 見出し全体 */
.svp-heading-box {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto 40px;
  padding: 0 16px; /* スマホ端のはみ出し防止 */
}

/* 左の丸アイコン枠 */
.svp-heading-icon {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
	
	  position: relative;
  top: 2px;
}


/* アイコン画像 */
.svp-heading-icon img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  display: block;
}

/* 見出し文字 */
.svp-heading-text {
  font-size: 34px;
  font-weight: 700;
  color: #00338d;
  line-height: 1.4;
  margin: 0;
  padding-bottom: 4px;
  border-bottom: 2px solid #00338d;
}

/* ==========================
   スマホ対応
========================== */
@media (max-width: 768px) {
  .svp-heading-box {
    gap: 12px;
    margin-bottom: 28px;
  }

  .svp-heading-icon {
    width: 40px;
    height: 40px;
  }

  .svp-heading-icon img {
    width: 20px;
    height: 20px;
  }

  .svp-heading-text {
    font-size: 20px;
    border-bottom-width: 1.5px;
  }
}

/*****************************
サービス内のBOX
*****************************/
.flow-box-wrap {
  display: flex;
  justify-content: center;
  margin: 40px 0;
padding:10px;
}

.flow-box {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  max-width: 800px;
  width: 100%;
  padding: 18px 18px;
  background-color: #FFF1E1;
  border-radius: 16px;
}

.flow-gray-box{
	background-color: #c3c3c3;
max-width: 600px;
width: 100%;
}

/* アイコン（画像そのまま） */
.flow-icon {
  flex-shrink: 0;
}

.flow-icon img {
  width: 70px;   /* ← ここでサイズ調整 */
  height: auto;
  display: block;
}

.reimg{
width:150px;
height:auto;
align-items: center;      /* 全体を中央 */
align-self: flex-end;   /* ← これ追加 */
}


@media (max-width: 600px) {
  .flow-box {
    flex-direction: column;   /* 縦並び */
    align-items: center;      /* 全体を中央 */
    text-align: left;         /* 文章は左寄せのまま */
  }

  .flow-icon {
    margin-bottom: 12px;
  }

  .flow-text {
    width: 100%;
  }
}
/*******************************
    吹き出し画像のサイズ変更
 * ****************************/
/*吹き出しブロック画像サイズ*/
.vk_balloon_icon,
.vk_balloon_icon_image{
	max-width:300px;
	width:100px;
	height:auto;
}
/*吹き出しブロック画像横の余白*/
.vk_balloon-position-left.vk_balloon-type-speech .vk_balloon_icon{
    margin-right: 32px;
}
.vk_balloon-position-right.vk_balloon-type-think .vk_balloon_icon{
margin-left: 32px;
}

/**/
@media (max-width: 768px) {
  .long-aw img {
min-height:440px;
  }
}

/*******************************
    テキストボックスのセンター
 * ****************************/

.text-box {
  display: flex;
 flex-direction: column; /* ← 縦並びにする */
  align-items: flex-start;
  gap: 1px;
  max-width: 800px;
  width: 100%;
  padding: 18px 18px;
		text-align:left;
}

.text-box-02 {
  display: flex;
 flex-direction: column; /* ← 縦並びにする */
  align-items: flex-start;
  gap: 1px;
  max-width: 600px;
  width: 100%;
  padding: 18px 18px;
		text-align:left;
}

.text-box-03 {
  display: flex;
 flex-direction: column; /* ← 縦並びにする */
  align-items: flex-start;
  gap: 1px;
  max-width: 500px;
  width: 100%;
  padding: 18px 18px;
		text-align:left;
}

.text-box-04 {
  display: flex;
 flex-direction: column; /* ← 縦並びにする */
  align-items: flex-start;
  gap: 1px;
  max-width: 800px;
  width: 100%;
  padding: 18px 18px;
		text-align:left;
}

.text-box-05 {
  display: flex;
 flex-direction: column; /* ← 縦並びにする */
  align-items: flex-start;
  gap: 1px;
  max-width: 700px;
  width: 100%;
  padding: 18px 18px;
		text-align:left;
}

.text-box-06 {
  display: flex;
 flex-direction: column; /* ← 縦並びにする */
  align-items: flex-start;
  gap: 1px;
  max-width: 560px;
  width: 100%;
  padding: 18px 18px;
		text-align:left;
}

.text-box-section {
  display: flex;
 flex-direction: column; /* ← 縦並びにする */
  align-items: flex-start;
  gap: 1px;
  max-width: 1040px;
  width: 100%;
  padding: 18px 18px;
text-align:left;
}
@media (max-width: 768px) {
  .target-image img {
    width: 40%;
    height: auto;
  }
	
}

.bg-column-01 {
  background-image: url("https://toru-koumuten.com/wp-content/uploads/2026/01/top-image-family03-e1769065087178.png");
background-size: contain;
background-position: right bottom;
  background-repeat: no-repeat;
  padding: 5px; /* 中の余白 */
	background-size:30% auto;
}

/* ======================================
   TOPページ サービスアイコン
====================================== */

.top-servis-menu-item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
	text-align:center;
}

.top-servis-icon {
  position: relative;
  width: 100px;
  height: 100px;
  display: block;
  margin-bottom: 10px;
}

.top-servis-icon img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  object-fit: contain;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.top-img-normal {
  opacity: 1;
  z-index: 1;
}

.top-img-hover {
  opacity: 0;
  z-index: 2;
}

/* ホバー時 */
@media (hover: hover) {

  .top-servis-menu-item:hover .top-img-normal {
    opacity: 0;
    transform: translateX(-50%) translateY(-6px);
  }

  .top-servis-menu-item:hover .top-img-hover {
    opacity: 1;
    transform: translateX(-50%) translateY(-6px);
  }

  .top-servis-menu-item:hover .top-servis-title {
    color: #002e8a;
    font-weight: 700;
  }
}


/*************************************
   アコーディオン部分　カスタマイズ
**************************************/

/* アコーディオンタイトルの前に画像 */
.wp-block-accordion-heading {
  display: flex;
  align-items: center;
  gap: 8px;
padding-left: 10px; /* ← ここ追加 */
border-bottom: none !important;
box-shadow: none !important;
}

.wp-block-accordion-heading::before {
  content: "";
  display: inline-block;
  width: 18px;     /* サイズ調整 */
  height: 18px;
  background-image: url("https://toru-koumuten.com/wp-content/uploads/2026/01/button-icon-1.png");
  background-size: contain;
  background-repeat: no-repeat;
}
.wp-block-accordion-heading::after {
  display: none !important;
}

/*********************************
サービス個別ページのタイトル
***********************************/
.center-icon-text {
  display: flex;
  align-items: center;   /* 縦中央揃え */
  gap: 12px;             /* アイコンと文字の間 */
}

.center-icon {
  width: 80px;           /* サイズ調整 */
  height: auto;
  position: static;      /* 念のため absolute解除 */
  transform: none;
}

.center-title {
  margin: 0;             /* h1の余白リセット */
  font-size: 28px;       /* 好きなサイズに */
}

.center-icon-text {
  justify-content: center;
}

/*********************************
  サービス個別ページ（SP用）
*********************************/

.center-icon-text-sp {
  display: flex;
  flex-direction: column;   /* ← 縦並び */
  align-items: center;      /* ← 中央揃え */
  justify-content: center;
  gap: 14px;
  text-align: center;
  margin-bottom: 20px;
}

/* アイコン */
.center-icon-sp {
  width: 100px;
  height: auto;
}

/* タイトル */
.center-title-sp {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
}



/**************************************
   お問い合わせボタン
**************************************/

.gocontpage-wrap {
  display: flex;
  justify-content: center;
  margin: 40px 0;
}

.gocontpage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 300px;
  height: 60px;

  background-color: #FE9D00;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;

  border-radius: 60px;

  /* 色だけ変化させる */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 左の ●＞ 画像 */
.gocont-icon {
  position: absolute;
  left: 28px;
  width: 20px;
  height: auto;
}

/* テキスト */
.gocont-text {
  pointer-events: none;
}

/* hover（色だけ変更） */
.gocontpage:hover {
  background-color: #FFCB92;
  color: #665959;
}

/* スマホ */
@media (max-width: 768px) {

  .gocontpage {
    height: 64px;
    font-size: 16px;
    max-width: 300px;
  }

  .gocont-icon {
    width: 20px;
    left: 18px;
  }
}