@charset "utf-8";



/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   import
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");


/* ======================================================== 
   全体の設定
========================================================= */
*, *::before, *::after {
	box-sizing: border-box;
}


html, body {
	font-size: 17px;
}

body {
  margin: 0; padding: 0;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  -webkit-text-size-adjust: none;
  background: #fff;
  color: #333;
  line-height: 1.8;
}


/* スマホ用768px以下 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (max-width: 767px) {

	html, body {
		font-size: 15px;
	}

} /* END */






/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   リセット
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
figure {margin: 0;}
dd {margin: 0;}
nav,ul,li,ol {margin: 0;padding: 0;}
nav ul {list-style: none;}


table {border-collapse:collapse;}


img {border: none;max-width: 100%;height: auto;vertical-align: middle;}


video {max-width: 100%;}


iframe {width: 100%;}


input {font-size: 1rem;}
section > ol,section > ul {margin-left: 2rem;}



/* ======================================================== 
   section
========================================================= */

section {
	padding: 0 5vw;
	margin: 5vw 0;
}


/* スマホ用768px以下 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (max-width: 767px) {

	section {
		padding: 0 10px;
	}

} /* END */



/* a　a:hover
========================================================= */
a {
	color: #ffffff !important;
}

a:hover {
	text-decoration: none;
}

/* *****************************************************
   Base STYLE
********************************************************* 

*/
/* ======================================================== 
   container
========================================================= */
#container {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;  /* 古いブラウザ用フォールバック */
	min-height: 100dvh; /* スマホのアドレスバーを含めた画面ぴったりに合わせる設定 */
}

/* メインコンテンツエリアを縦いっぱいに広げる */
#contents {
	flex: 1;
}

/* メイン内のセクション子要素をすべて中央寄せにする */
main > section > * {
	margin-left: auto;
	margin-right: auto;
}


/* ======================================================== 
  header
========================================================= */

header.site-header {
	position: fixed;  
	z-index: 100;
	width: 100%;
	height: 70px;   
	padding: 0 70px 0 2rem; 
	background: #2a2922;    /* bark */
	color: #fff;            /* white */
	
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;
	line-height: 1.5;
	
	transition: transform 0.5s ease, opacity 0.5s ease;
}

.logo-link {
	margin: 0;
	flex-shrink: 0;
}

.logo-img {
	display: block;
	width: 60%; 
}

#logo-text {
	margin: 0;
	margin-left: 15px;      /* ロゴとの間に少し隙間を作る */
	font-size: 4px;        /* フォントサイズを小さく */
	color: #333;            /* white */
	font-weight: normal;    /* 太字を解除してさらに目立たせなくする */
}

.site-header.is-hide {
	opacity: 0;
	transform: translateY(-100%); /* 真上に隠す */
	pointer-events: none;         /* 消えている間はクリックを無効化 */
}


/* スマホ用768px以下 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (max-width: 767px) {

	header.site-header {
		position: absolute;
		width: 100%; 
		left: 0; 
		top: 0;
		display: flex;  
		align-items: center; 
		justify-content: space-between; 
		padding: 0 10px; 
		box-sizing: border-box;
	}

	#logo-text {
		display: none;
	}

	.logo-img {
		width: auto;    
		height: 45px;           /* ?? 追加：ヘッダーの高さに合わせて適度なサイズに固定（35px?45pxでお好みで調整） */
		max-width: 70%;  
		display: block;
		margin: 0;              /* ?? 追加：余計な中央寄せマージンなどをリセット */
	}

} /* END */


/* =========================================================
   下層ページ専用 メインビジュアル（画面端まで完全ぴったり化）
========================================================= */
.sub-hero-wrap {
	width: 100%;
	padding: 0 !important;
	margin: 70px 0 0 !important; /* ヘッダーの高さ(70px)分の余白 */
	overflow: hidden;
}

.sub-hero-container {
  width: 100% !important;
  max-width: 100% !important;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ??? 画像コントロール */
.sub-hero-picture {
  display: block;
  width: 100% !important;
}

.sub-hero-picture img {
  width: 100% !important;  /* 画像を横幅ぴったりに */
  height: auto !important; /* 比率を維持 */
  display: block;
}

/* ?? テキストレイヤー */
.sub-hero-text-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  padding: 0 20px;
  box-sizing: border-box;
}

/* ?? 半透明の黒帯（座布団） */
.sub-hero-bg {
  width: min(90%, 960px); 
  background: rgba(0, 0, 0, 0.60) !important; 
  padding: 2.2rem 3rem; 
  text-align: center;
  border-radius: 6px; 
  box-sizing: border-box;
  backdrop-filter: blur(3px); 
}

/* キャッチコピー H2 */
.sub-hero-bg h2 {
  color: #ffffff !important; 
  font-size: 2.0rem; 
  font-weight: 700;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

/* 補足説明テキスト P */
.sub-hero-bg p {
  color: #ffffff !important;
  font-size: 1.05rem;
  font-weight: 500;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.6;
  letter-spacing: 0.03em;
  opacity: 0.95; 
}

/* ?? スマホ専用（画面幅800px以下） */
/* ========================================================= */
@media (max-width: 768px) {
  .sub-hero-bg {
    width: 94%; 
    padding: 1.8rem 1.2rem; 
  }
  .sub-hero-bg h2 {
    font-size: 1.4rem; 
    margin-bottom: 8px !important;
  }
  .sub-hero-bg p {
    font-size: 0.9rem; 
    line-height: 1.5;
  }
}

/* 業務提携ページだけ、黒帯を一番下に配置する設定 */
.sub-hero-text-layer.tie-up-page {
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 中身を一番下に寄せる */
  align-items: center;
  height: 100%; /* 親要素の高さに合わせる */
  padding-bottom: 40px; /* 下すぎる場合のクッション（微調整してね） */
  box-sizing: border-box;
}

/* スマホ用：下部固定ボタンを避けるために位置を上に調整 */
@media (max-width: 768px) {
  .sub-hero-text-layer.tie-up-page {
    /* 
       下からの余白を「100px」に広げることで、
       固定ボタン（約60?70px）を確実に回避して上に持ち上げます
    */
    padding-bottom: 100px !important; 
  }
  
  .sub-hero-text-layer.tie-up-page .sub-hero-bg {
    width: 95%; /* スマホの画面幅に合わせて横幅を少し広く */
    padding: 1.2rem 0.8rem; /* 文字が綺麗に収まるよう、黒帯内の余白を微調整 */
  }
  
  /* 文字が小さすぎて潰れないための微調整 */
  .sub-hero-text-layer.tie-up-page .sub-hero-bg h2 {
    font-size: 1.3rem !important;
    margin-bottom: 0.3rem;
  }
  .sub-hero-text-layer.tie-up-page .sub-hero-bg p {
    font-size: 0.8rem !important;
    line-height: 1.4;
  }
}

/* =========================================================
   業務提携ページ専用：提携内容カードレイアウト
========================================================= */
.tieup-content-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
}

/* リード文 */
.tieup-content-lead {
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.8;
  color: #444;
  margin-bottom: 3.5rem;
  font-weight: 500;
}

/* カードを並べるグリッド（PC時は2列） */
.tieup-content-grid {
  display: grid;
  grid-template-columns: repeat(2, 11fr);
  gap: 2.5rem 2rem;
  width: 100%;
  box-sizing: border-box;
}

/* 個別のカードデザイン */
.tieup-content-card {
  background: #d6e9ca;
  border: 1px solid #e0e5df; /* ほんのり緑がかった上品なグレー */
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  box-sizing: border-box;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* マウスホバーで少し浮き上がる演出 */
.tieup-content-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

/* カード内のヘッダー部分 */
.tieup-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
  border-bottom: 2px solid #506d2f; /* アイメモリア様のイメージカラー（深緑） */
  padding-bottom: 0.8rem;
}

/* ナンバリングラベル */
.tieup-card-label {
  font-size: 1.4rem;
  font-weight: 800;
  color: #506d2f;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  line-height: 1;
}

/* 各項目のタイトル */
.tieup-card-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #222;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3;
}

/* 各項目の説明文 */
.tieup-card-text {
  font-size: 0.98rem;
  line-height: 1.7;
  color: #555;
  margin: 0 !important;
  padding: 0 !important;
  text-align: justify;
}

/* 改行コントロール用 */
.pc-only { display: inline; }

/* =========================================================
   スマホ専用設定（画面幅768px以下）
========================================================= */
@media (max-width: 768px) {
  .tieup-content-section {
    padding: 2.5rem 1rem;
  }
  
  .tieup-content-lead {
    text-align: left; /* スマホでは左寄せが見やすい */
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 2rem;
  }
  
  .pc-only { display: none; } /* スマホでは変な位置での改行を防ぐ */

  /* スマホでは縦1列に切り替え */
  .tieup-content-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .tieup-content-card {
    padding: 1.5rem 1.2rem;
  }

  .tieup-card-header h3 {
    font-size: 1.1rem;
  }
  
  .tieup-card-text {
    font-size: 0.92rem;
    line-height: 1.6;
  }
}


/* =================================================
   現場写真 4枚グリッド
================================================= */
.partner-photo-section{
  width: min(94%, 1100px);
  margin: 0 auto 70px;
}

.partner-photo-lead{
  text-align: center;
  font-size: 1rem;
  line-height: 1.9;
  color: #444;
  margin: 0 auto 32px;
}

.partner-photo-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.partner-photo-card{
  background: #fff;
  border: 1px solid #d8e3ef;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.partner-photo-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.10);
}

.partner-photo-card figure{
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f3f6fa;
}

.partner-photo-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.partner-photo-text{
  padding: 18px 18px 20px;
}

.partner-photo-text h3{
  margin: 0 0 10px;
  font-size: 1.2rem;
  color: #0f4c81;
  line-height: 1.4;
}

.partner-photo-text p{
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.8;
  color: #555;
}

/* スマホ1列 */
@media (max-width: 768px){
  .partner-photo-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .partner-photo-lead{
    text-align: left;
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 24px;
  }

  .partner-photo-text{
    padding: 16px;
  }

  .partner-photo-text h3{
    font-size: 1.08rem;
  }

  .partner-photo-text p{
    font-size: 0.93rem;
  }
}

/* =========================================================
   メールフォーム専用：メインビジュアル（黒帯コンパクト版）
========================================================= */
.sub-hero-wrap-mailform {
	width: 100%;
	padding: 0 !important;
	margin: 70px 0 0 !important; /* ヘッダーの高さ分の余白 */
	overflow: hidden;
}

.sub-hero-container-mailform {
  width: 100% !important;
  max-width: 100% !important;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 画像コントロール */
.sub-hero-image-box-mailform {
  display: block;
  width: 100% !important;
}

.sub-hero-image-box-mailform img {
  width: 100% !important;  
  height: auto !important; 
  display: block;
}

/* テキストレイヤー */
.sub-hero-text-layer-mailform {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  padding: 0 20px;
  box-sizing: border-box;
}

/* 半透明の黒帯（文字に合わせて小さく調整） */
.sub-hero-bg-mailform {
  width: 100%;
  max-width: 320px; /* 黒帯が広がりすぎないように上限を制限 */
  background: rgba(0, 0, 0, 0.65) !important; 
  padding: 1.0rem 2.0rem; /* 上下の余白を大幅に小さく変更 */
  text-align: center;
  border-radius: 4px; 
  box-sizing: border-box;
  backdrop-filter: blur(3px); 
}

/* タイトル H2 */
.sub-hero-bg-mailform h2 {
  color: #ffffff !important; 
  font-size: 1.8rem; /* PCでの見栄えの良いサイズ */
  font-weight: 700;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2;
  letter-spacing: 0.1em;
}

/* =========================================================
   スマホ専用設定（画面幅768px以下）
========================================================= */
@media (max-width: 768px) {
  .sub-hero-bg-mailform {
    max-width: 240px; /* スマホ画面に合わせてさらに横幅をコンパクトに */
    padding: 0.8rem 1.2rem; /* スマホ用の隙間調整 */
  }
  .sub-hero-bg-mailform h2 {
    font-size: 1.4rem; /* screenshot.303.jpgの画面でも1行にすっきり収まるサイズ */
    letter-spacing: 0.05em;
  }
}

/* ======================================================== 
   ハンバーガーメニュー
========================================================= */
.nav-icon {
    display: block; /* スマホ画面で表示 */
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 2000;

    /* ★一回り大きく、綺麗な正方形（70px×70px）に調整 */
    width: 70px;         
    height: 70px;        
    padding: 0;          /* 位置計算を正確にするためパディングを0にリセット */
    box-sizing: border-box;

    background: #fd688f; /* 元の色をそのまま維持 */
    transition: .5s ease-in-out;
    border-radius: 3px;
    cursor: pointer;
}

/* 3本線の共通設定 */
.nav-icon span {
    height: 3px;
    width: 50px;         /* 線の長さ（50px） */
    background: #ffffff; /* 元の色をそのまま維持 */
    border-radius: 9px;
    opacity: 1;
    left: 10px;          /* ★横幅70px、線50pxに対して完全に左右中央になるよう計算 (70-50)/2 */
    transition: .25s ease-in-out;
    display: block;
    position: absolute;
}

/* ★正方形にあわせて、3本バーの縦位置（top）を均等に中央配置 */
.nav-icon span:nth-child(1) {
    top: 16px;           /* 上部バーの縦位置 */
}
.nav-icon span:nth-child(2) {
    top: 25px;           /* 中央バーの縦位置（ここを中心にクロスします） */
}
.nav-icon span:nth-child(3) {
    top: 34px;           /* 下部バーの縦位置 */
}

/* ×印に変化したときの縦位置補正（中央の25pxの位置で綺麗に交差させます） */
.nav-icon.open span:nth-child(1) {
    top: 25px;           
    transform: rotate(45deg);
}
.nav-icon.open span:nth-child(2) {
    opacity: 0;
}
.nav-icon.open span:nth-child(3) {
    top: 25px;           
    transform: rotate(-45deg);
}

/* 「menu」の文字位置調整 */
p.nav-text {
    color: #ffffff;
    font-size: 14px;     /* 元のサイズを維持 */
    margin: 0;           /* 余計なマージンをリセット */
    padding: 0;
    text-align: center;
    position: absolute;  /* 絶対配置にして大きなボタンの底面に配置 */
    bottom: 8px;         /* ★正方形の高さに合わせて下からの位置を調整 */
    left: 0;
    width: 100%;
    line-height: 1;
}

/* -----------------------------------------------------
   ナビゲーションメニュー（開く中身側）
----------------------------------------------------- */
.nav-menu {
    background-color: #000000; 
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    width: 70%;
    max-height: 100vh;
    overflow-y: auto;
    z-index: 1000;
}

.nav-menu .gnavi {
    display: none;
}

.nav-menu .gnavi li {
    float: left;
    text-align: center;
    border-bottom: 1px solid #eeeeee;
    padding: 0;
    width: 100%;
    display: block;
}

.nav-menu .gnavi li a {
    color: #ffffff;      /* 文字色は「白」を維持 */
    font-size: 15px;
    font-weight: bold;
    padding: 20px 20px;
    display: block;
    text-decoration: none;
}

.nav-menu .gnavi ul {
    margin: 0;
    padding: 0;
}




#menubar_hdr {
	display: block; 
	cursor: pointer;
	position: fixed;
	z-index: 101;
	right: 0;
	top: 0;
	width: 70px;
	height: 70px;
	background: #006400; /* ボタン背景色（深緑） */
	border-bottom-left-radius: 1rem; 
}


#menubar_hdr span {
	display: block;
	transition: 0.3s;
	position: absolute;
	left: 18px;
	width: 35px;
	height: 2px;
	background: #fff;
}

/* 線の初期配置 */
#menubar_hdr span:nth-of-type(1) { top: 24px; }
#menubar_hdr span:nth-of-type(2) { top: 34px; }
#menubar_hdr span:nth-of-type(3) { top: 44px; }

/* --- 3階層：ボタンが「バツ印（.hamがついた状態）」のスタイル ---- */
#menubar_hdr.ham {
	background: #ff0000; /* バツの時は背景を赤に */
}
#menubar_hdr.ham span {
	background: #fff;
}
#menubar_hdr.ham span:nth-of-type(1) { transform: translateY(10px) rotate(-45deg); }
#menubar_hdr.ham span:nth-of-type(2) { opacity: 0; }
#menubar_hdr.ham span:nth-of-type(3) { transform: translateY(-10px) rotate(45deg); }


/* --- 2階層：メニューブロック本体（共通ベース設定） ------------- */
#menubar {
	display: none;      /* 初期状態は非表示（JSで開閉を制御） */
	position: fixed;
	top: 0;
	right: 0;
	z-index: 100;
	width: 100%;
	height: 100%;
	overflow: auto;
	padding: 80px 8.33vw 50px;
	background: #25331a; /* メニューの背景色 */
	color: #fff;
	font-weight: 500;
	font-size: 1.1rem;
}

/* メニュー内のロゴ（もし使う場合） */
#menubar .logo {
	max-width: 300px;
	margin: 0 auto 3rem;
}

/* メニューボタン（1個あたり） */
#menubar a {
	display: block;
	text-decoration: none;
	background: #fff;
	color: #333;
	margin-bottom: 1rem;
	padding: 1rem 2rem;
	border-radius: 5px;
}

/* ボタン内の小文字（英語表記など） */
#menubar span {
	display: block;
	font-weight: normal;
	opacity: 0.7;
	font-size: 0.6em;
}

/* --- 3階層：ドロップダウン（子メニュー）設定 ----------------- */
#menubar ul ul {
	display: none; /* デフォルトで非表示（チラつき防止） */
}

#menubar ul ul a {
	border: none;
	margin-left: 2rem;
	padding: 0.5rem 1.5rem;
	font-size: 0.9rem;
}


/* スマホ用768px以下 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (max-width: 767px) {

	#menubar {
		padding: 80px 10px 50px;
	}

} /* END */



/* ======================================================== 
   TOP SLIDER（1階層：トップ画面スライダー全体）
========================================================= */

/* --- ベース設定（PC・タブレット用：768px以上） --------------- */
.top-slider-wrap {
	width: 100%;
	padding: 0 !important;
	margin: 70px 0 0 !important; /* ヘッダーの高さ(70px)分の余白 */
	overflow: hidden;
	background: #fff;
}

.top-slider {
	width: 100%;
}

.slide-item {
	position: relative;
	width: 100%;
}

/* PC/SPの画像表示切り替え */
.pc-view { display: block; }
.sp-view { display: none; }


/* --- 2階層：スライダー内のリンクエリア（PC版：1920×1000基準） --- */
.slide-link-area {
	position: relative;
}

.link-box {
	position: absolute;
	display: block;
	z-index: 10;
}

/* リンク位置確認モード（調整時にコメントアウトを外す） */
/*
.link-box {
	background: rgba(255, 0, 0, 0.3);
	border: 3px solid #ff0000;
	box-sizing: border-box;
}
*/


/* 1枚目 1段目（PC） */
.box1 { left: 4%;  top: 26%; width: 16%; height: 30%; }
.box2 { left: 23%; top: 26%; width: 16%; height: 30%; }
.box3 { left: 42%; top: 26%; width: 16%; height: 30%; }
.box4 { left: 60%; top: 26%; width: 16%; height: 30%; }
.box5 { left: 78%; top: 26%; width: 16%; height: 30%; }

/* 1枚目 2段目（PC） */
.box6 { left: 4%;  top: 62%; width: 16%; height: 30%; }
.box7 { left: 23%; top: 62%; width: 16%; height: 30%; }
.box8 { left: 42%; top: 62%; width: 16%; height: 30%; }

/* 3枚目 1段目（PC） */
.box9  { left: 3%;  top: 23%; width: 22%; height: 41%; }
.box10 { left: 27%; top: 23%; width: 22%; height: 41%; }
.box11 { left: 52%; top: 23%; width: 22%; height: 41%; }
.box12 { left: 76%; top: 23%; width: 22%; height: 41%; }



/* --- 2階層：Slickプラグイン関連のカスタマイズ ---------------- */
.slick-list {
	overflow: hidden;
}

.slick-track {
	display: flex;
}

/* ドットナビゲーションの見た目調整 */
ul.slick-dots {
	margin: 0; padding: 0;
	line-height: 1;
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: 10px;
	z-index: 10;
}

ul.slick-dots li {
	display: inline-block;
	margin: 0 8px;
}

ul.slick-dots li button {
	border: none; padding: 0;
	text-indent: -9999px;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
}

ul.slick-dots li.slick-active button {
	background: #ff0000; /* アクティブなドットを赤に */
}


/* スマホ用768px以下 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (max-width: 767px) {

	/* 画像の切り替え */
	.pc-view { display: none; }
	.sp-view { display: block; }

	/* 1段目（スマホ） */
	.box1 { left: 4%;  top: 42%; width: 30%; height: 15%; }
	.box2 { left: 38%; top: 42%; width: 30%; height: 15%; }
	.box3 { left: 70%; top: 42%; width: 30%; height: 15%; }

	/* 2段目（スマホ） */
	.box4 { left: 4%;  top: 61%; width: 30%; height: 15%; }
	.box5 { left: 38%; top: 61%; width: 30%; height: 15%; }
	.box6 { left: 70%; top: 61%; width: 30%; height: 15%; }

	/* 3段目（スマホ） */
	.box7 { left: 4%;  top: 81%; width: 30%; height: 15%; }
	.box8 { left: 38%; top: 81%; width: 30%; height: 15%; }

        /* 3枚目 1段目（PC） */
        .box9  { left: 3%;  top: 18%; width: 43%; height: 23%; }
        .box10 { left: 52%; top: 18%; width: 43%; height: 23%; }
        .box11 { left: 5%; top: 42%; width: 43%; height: 23%; }
        .box12 { left: 52%; top: 42%; width: 43%; height: 23%; }


} /* END */





/* ========================================================
   既存の共通CSSの邪魔を完全にリセットする最外枠
   ======================================================== */
.custom-hero-wrap {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  display: block !important;
  float: none !important;
  clear: both !important;

  /* ??【重要】PC時はここだけで上の黒バナーとの隙間（70px）を作ります */
  margin: 70px 0 0 0 !important; 
}

/* ========================================================
   既存の共通CSSの邪魔を完全にリセットする最外枠
   ======================================================== */
.custom-hero-wrap {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  display: block !important;
  float: none !important;
  clear: both !important;
  
  /* PCの時は最上段の黒バナーとの間に70pxの隙間を作る */
  margin: 70px 0 0 0 !important; 
}

/* ========================================================
   PC・スマホ共通：メイン画像
   ======================================================== */
.custom-hero {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;

  /* 1920:1000の比率を維持 */
  aspect-ratio: 1920 / 1000;
  height: auto !important; 

  /* 背景画像の表示ルール */
  background-size: cover !important; 
  background-position: center top;   
  background-repeat: no-repeat;
}

/* 中央の文字コンテナを囲むインナー */
.custom-hero-inner {
  display: flex;
  justify-content: center;
  align-items: center; 
  width: 100%;
  height: 100%;
}

/* テキストレイヤー（黒帯）の装飾と文字の中央配置 */
.custom-hero-content {
  background-color: rgba(0, 0, 0, 0.7); 
  color: #fff;
  text-align: center;
  border-radius: 8px;
  
  width: fit-content !important; 
  max-width: 65% !important; 
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  padding: 35px 50px !important; 
  box-sizing: border-box !important;
}

.custom-hero-content h2 {
  font-size: 28px;
  font-weight: bold;
  margin: 0 0 15px 0 !important; 
  padding: 0 !important;
  line-height: 1.4;
}

.custom-hero-content p {
  font-size: 16px;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.6;
}

/* ========================================================
   スマホ用（画面幅 768px 以下）
   ======================================================== */
@media screen and (max-width: 768px) {
  
  /* ??最外枠：スマホでも上の黒バナーとの間にしっかり隙間（30px）を作ります */
  .custom-hero-wrap {
    margin: 60px 0 0 0 !important; 
    display: block !important;
    clear: both !important;
  }

  /* ??メイン画像：ご指定通り高さを500pxにし、画像の中央部分だけを贅沢に使います */
  .custom-hero {
    aspect-ratio: auto !important; /* PC版の比率固定を解除 */
    height: 600px !important;      /* 高さを500pxにしっかり固定 */
    
    /* 画像を縮めず、中央部分を基準にして全体をカバーする設定 */
    background-size: cover !important; 
    background-position: center center !important; /* ??これで画像の中央がくり抜かれます */
    
    margin: 0 !important;
    position: relative !important;
  }
  
  /* 黒帯：500pxの高さに対して、上下左右中央に綺麗に配置されます */
  .custom-hero-content {
    width: auto !important;
    max-width: 85% !important; 
    padding: 25px 20px !important; 
  }
  
  /* 黒帯の中の文字サイズ（スマホで見やすい元のバランスに戻しました） */
  .custom-hero-content h2 {
    font-size: 18px !important;
    margin-bottom: 10px !important;
  }
  .custom-hero-content p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
}



/* =================================================
   無料見積 フローティングCTA
================================================= */

.floating-cta{
  position:fixed;
  right:0;
  top:20vh;
  z-index:9999;
}

.btn-mitsumori{
  display:block;

  background:#ff9800;
  color:#fff;

  padding:1.2rem 0.8rem;

  font-weight:700;
  text-align:center;

  writing-mode:vertical-rl;
  text-orientation:upright;

  border-radius:8px 0 0 8px;

  box-shadow:0 4px 10px rgba(0,0,0,.18);

  text-decoration:none;

  animation:yurayura 2s ease-in-out infinite;
}

/* ホバー */

.btn-mitsumori:hover{
  opacity:.9;
}

/* ゆらゆら */

@keyframes yurayura{

  0%{
    transform:translateX(0);
  }

  20%{
    transform:translateX(-6px);
  }

  40%{
    transform:translateX(0);
  }

  60%{
    transform:translateX(-6px);
  }

  80%{
    transform:translateX(0);
  }

  100%{
    transform:translateX(0);
  }

}

/* ==============================
   スマホ
============================== */

@media screen and (max-width:768px){

  .floating-cta{
    top:30vh;
  }

  .btn-mitsumori{
    padding:1rem 0.7rem;
    font-size:14px;
  }

}


/* =================================================
   スマホ下固定CTA
================================================= */

.sp-cta {
	display: none; /* PCファーストの基本ルールに基づき、PCではまず隠す */
}


/* スマホ用768px以下 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (max-width: 767px) {

	/* 画面下に固定する枠 */
	.sp-cta {
		display: flex; /* スマホ幅になったら表示 */
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 9999;
		box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.18);
	}

	/* 各ボタン（電話・LINE共通） */
	.sp-cta a {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		height: 58px;
		text-decoration: none;
		color: #fff;
		font-size: 16px;
		font-weight: 700;
		line-height: 1;
		transition: opacity 0.25s ease;
	}

	.sp-cta a:hover {
		opacity: 0.92;
	}

	/* アイコンフォントのサイズ */
	.sp-cta a i {
		font-size: 18px;
	}

	/* 各ボタンの固有背景色 */
	.sp-cta-tel { background: #d63b3b; }
	.sp-cta-line { background: #06c755; }

	/* CTAの高さ(58px)の分だけ、コンテンツ最下部に余白を作って被りを防ぐ */
	body {
		padding-bottom: 58px;
	}

} /* END */

/* ======================================================== 
   FOOTER（1階層：フッター全体）
========================================================= */

/* --- ベース設定（PC・タブレット用：768px以上共通） ------------- */
footer {
	background: #2a2922 !important; /* bark */
	color: #ffffff !important;      /* 文字色 */
	padding: 4rem 2rem;
	width: 100%;
}

footer * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* リンク全体の共通設定 */
footer a {
	color: #fff;
	text-decoration: none;
	transition: color 0.25s ease; /* 変化をなめらかに */
}

/* ★ご要望：マウスオン（ホバー）のとき、文字色をパッと明るい薄黄色に変える */
footer a:hover {
	color: #ff69b4; /* マウスを当てたときの色（お好みで変更可能） */
}

/* 見出しスタイル（メニュー・アクセス） */
footer h3 {
	font-size: 1.1rem;
	margin-bottom: 1.2rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}


/* --- 2階層：3分割レイアウト設定（PC向け） ------------------- */
@media screen and (min-width: 768px) {
	footer {
		display: flex;
		justify-content: space-between;
		gap: 4rem; /* ブロック間のゆとり */
	}

	footer .footer1,
	footer .footer2,
	footer .footer3 {
		flex: 1;
		width: 33.333%;
		max-width: 360px; /* 広がりすぎ防止 */
	}
	
	footer .footer1 { margin-left: auto; }
	footer .footer3 { margin-right: auto; }
}


/* --- 2階層：各ブロックのテキストバランス微調整 -------------- */

/* 【1つ目：会社情報＆各種メニュー】 */
footer .logo {
	font-size: 1.5rem;
	color: #ffa500;
	font-weight: bold;
	margin-bottom: 1.2rem;
}

footer .address {
	line-height: 1.8;
	font-size: 1.0rem;
	opacity: 0.85;
	margin-bottom: 1.5rem; /* HTMLの<br>を廃止し、CSSでリストとの間隔を確保 */
}

/* ★改善：左側のリスト（お見積り・ご相談など）のバランス調整 */
footer .footer1 ul {
	list-style: none; /* 無駄な黒丸（?）を完全に消す */
}

footer .footer1 li {
	margin-bottom: 0.1rem; /* 箇条書き同士の縦の隙間をあけて見やすく */
	font-size: 0.95rem;
}

/* リストの先頭に「・」を自動付与して右側（footer2）のメニューと見た目を揃える */
footer .footer1 li a::before {
	content: "・";
	margin-right: 0.3em;
	color: rgba(255, 255, 255, 0.6);
}


/* 【2つ目：メニュー（右側）】 */
footer .footer2 ul {
	list-style: none;
}

footer .footer2 li {
	margin-bottom: 0.1rem;
	font-size: 0.95rem;
}

footer .footer2 li a::before {
	content: "・";
	margin-right: 0.3em;
	color: rgba(255, 255, 255, 0.6);
}


/* 【3つ目：Google Map】 */
.iframe-box1 {
	width: 100%;
	aspect-ratio: 4 / 3;
	position: relative;
	overflow: hidden;
	border-radius: 4px;
}

.iframe-box1 iframe {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}


/* --- 2階層：最下部コピーライトエリア ------------------------- */
.footer-copy {
	background: #7d5642 !important;
	text-align: center;
	padding-bottom: 2rem;
	width: 100%;
}

.footer-copy small {
	display: block;
	font-size: 0.8rem;
	color: #fff;
}


/* スマホ用768px以下 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (max-width: 767px) {
	footer {
		display: flex;
		flex-direction: column;
		gap: 2.5rem;
		padding: 3rem 1.5rem;
	}
	footer .footer1,
	footer .footer2,
	footer .footer3 {
		width: 100%;
		max-width: none;
		margin: 0;
	}

} /* END */



/* ======================================================== 
   main 
========================================================= */
main {
	width: 70%;           /* ★目的達成：PCではトップ画像に対して70%の幅にする */
	max-width: 1200px;    /* 画面が大きすぎるPCで横に広がりすぎないための安全弁 */
	margin-left: auto;    /* 左右オートマージンで */
	margin-right: auto;   /* 画面のど真ん中に中央配置 */
	
	overflow-x: hidden;   /* 横スクロールバーの発生を防ぐ安全設定 */
	min-width: 0;        
}

/* スマホ用（768px以下）の時に、70%の制限を解除して横幅いっぱいに広げる */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media (max-width: 767px) {
  main {
    width: 100%;        /* スマホ画面では横幅を100%に広げる */
    padding-left: 0;    /* 必要に応じて調整してください */
    padding-right: 0;   /* 必要に応じて調整してください */
  }

} /* END */


/* --- 2階層：ロゴと文字を横並びにして中央寄せにする見出し -------- */
h2.ai_logo {
	position: relative;
	display: flex;          /* ロゴと文字を横並びにする */
	justify-content: center; /* 横方向の中央配置 */
	align-items: center;     /* 縦方向の中央配置 */
	gap: 0.4em;             /* ロゴと文字の間の隙間 */
	
	padding: 0.6em 1.0em;
	line-height: 1.4;
	color: #506d2f;                   /* leaves */
	border-top: solid 2px #506d2f;    /* leaves */
	border-bottom: solid 2px #506d2f; /* leaves */
	background: #f5f9f1;              /* Light grayish green */
	
	font-size: 2em;                   /* 見出し全体のサイズ（PC版） */

	/* ★完全解決：親要素(mainの70%)を無視して、画面全体に対して大きく広げる魔法の設定 */
	width: 85vw;              /* 1つ目のスクショ（お客様の声）と同じ大きさに合わせるため、親より大きく広げる */
	max-width: 1200px;        /* 広がりすぎ防止の安全弁 */
	
	/* 親要素の枠から外に均等にはみ出させて、完全に画面の中央に固定する設定 */
	margin-left: 50% !important;
	transform: translateX(-50%);
	margin-bottom: 2rem;
}

/* 疑似要素（::before）で文字の左側に丸いロゴマークを合成 */
h2.ai_logo::before {
	content: "";
	display: inline-block;
	flex-shrink: 0;                   /* 画面が狭くなってもロゴが絶対に潰れないように固定 */
	
	/* 画像の指定 */
	background-image: url("../head_img/ai_logo110.png");
	background-repeat: no-repeat;
	background-size: contain;         /* 枠内に画像を綺麗に収める */
	
	width: 1.4em;
	height: 1.4em;
}


/* スマホ用768px以下 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (max-width: 767px) {

	/* スマホ画面でははみ出しを解除し、画面幅（92%）にぴったり合わせる */
	h2.ai_logo {
		width: 100%;
		max-width: none;
		margin-left: 0 !important;
		transform: none;
		font-size: 1.4em; /* スマホ用に文字とロゴのサイズをバランスよく縮小 */
	}

} /* END */




/* **************************************************
   Part
*************************************************** */


/* waku_box
========================================================= */
.waku_box{
  width: 100%;
  margin: 0 auto;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 14px;
  padding: 24px 20px;
  background: #f5f5f5;
  box-shadow: #fffff0;
}

.waku_box p{
  margin: 0 0 1em;
  color: #800000;
  font-size: 20px;
  font-weight: 700;
}

.waku_box p:last-child{
  margin-bottom: 0;
}

.waku_box img{
  display: block;
  margin: 0 auto;
}

/* スマホ用768px以下 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media (max-width: 767px) {
  .waku_box {
    width: 100%;
    padding: 24px 16px; /* 左右の余白を少し広げて、窮屈感を解消 */
    box-sizing: border-box; /* パディングによるはみ出しを防止 */
  }

  /* 上下の説明文（pタグ）の調整 */
  .waku_box p {
    font-size: 16px; /* スマホで一番読みやすい標準サイズ */
    line-height: 1.8;
    text-align: center; /* 「皆様から?」や「アイメモリアでは?」を中央寄せで綺麗に整列 */
    margin-bottom: 20px;
  }

  /* ★もし青文字・赤文字がスマホで大きすぎる場合のセーフティ（不要なら消してOK） */
  .waku_box p span {
    font-size: 16px;
  }
  
  /* 画像もスマホ幅からはみ出さないようにガード */
  .waku_box p img {
    max-width: 100%;
    height: auto;
    display: block;    /* ★画像の中央寄せを確実にするための追加 */
    margin: 0 auto;    /* ★画像の中央寄せを確実にするための追加 */
  }

} /* END */


/* =========================================================
   Google口コミ リストスタイル（google_pink）
========================================================= */

/* ?? 【共通・PC用】基本設定 */
.google_pink {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 600px;
}

.google_pink li {
  display: flex;
  align-items: center; /* PCではチェックと文字を中央揃え */
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 20px; /* PCでの見栄えを重視した大きめサイズ */
  font-weight: 700;
  line-height: 1.7;
  text-align: left;
}

/* チェックアイコン */
.google_pink li::before {
  content: "";
  width: 20px;
  height: 20px;
  background: url("../pict/pink_check.png") no-repeat center / contain;
  flex-shrink: 0;
}


/* ?? 【スマホ用】768px以下での上書き調整 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media (max-width: 767px) {
  
  .google_pink {
    margin: 0 auto 24px auto;
    padding: 0 4px; /* 画面端に文字がくっつきすぎるのを防ぐ */
  }

  .google_pink li {
    font-size: 15px; /* スマホ画面に合わせて文字サイズを最適化 */
    line-height: 1.6;
    margin-bottom: 14px; /* スマホでの読みやすさのために間隔を少し広げる */
    align-items: flex-start; /* 2行になってもチェックマークを「1行目の頭」に固定 */
    gap: 8px;
  }

  /* チェックアイコンのスマホ微調整 */
  .google_pink li::before {
    width: 18px; /* 文字サイズに合わせて少し縮小 */
    height: 18px;
    margin-top: 3px; /* 1行目の文字の高さと綺麗に並ぶように調整 */
  }

} /* END */



/* review_style 口コミエリア
========================================================= */
.review_style {
	background: #f9f9f6; /* 温かみのある背景色でカードを引き立てる */
	padding: 4rem 0;
	font-family: sans-serif;
}

/* ★バグ修正：PCでも勝手に2列にならず、スクショ通り美しい1列で並ぶように修正
--------------------------------------------------------- */
.review_style ul {
	max-width: 1100px;  /* ここがカード全体の最大横幅になります */
	list-style: none;
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex;      /* グリッドからフレックスに変更し、縦一列に統一 */
	flex-direction: column;
	gap: 2rem;          /* カードとカードの間の上下の隙間 */
}

/* カード風の枠線と立体感 */
.review_style li {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 6px 16px rgba(0,0,0,0.04);
	border: 1px solid #eef0ee;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	overflow: hidden;
	width: 100%;        /* 横幅いっぱいに引き伸ばす */
	box-sizing: border-box;
}

/* マウスホバーでカードが少し浮き上がる演出 */
.review_style li:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}

.review-card-inner {
	padding: 1.8rem;
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
}

/* ユーザー情報ヘッダー */
.user-meta {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.2rem;
}

.review_style .user {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #fff;
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	flex-shrink: 0;
}

.user-info {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.user-info .name {
	font-size: 1.1rem;
	font-weight: 700;
	color: #222;
	margin: 0;
}

.category {
	font-size: 0.9rem;
	color: #666;
	font-weight: normal;
	display: inline-block;
	margin-left: 4px;
}

/* 星5つ評価（ゴールドグラデーション） */
.user-info .star5 {
	margin: 0;
}

.user-info .star5:before {
	content: "★★★★★";
	font-size: 1.2rem;
	background: linear-gradient(45deg, #b8860b, #e6b422);
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	display: block;
}

/* コメント全文表示 */
.review-card-inner .comment {
	font-size: 1rem;
	line-height: 1.8;
	color: #444;
	font-weight: 500;
	text-align: justify;
	margin: 0 0 1.5rem 0;
	flex-grow: 1; /* バナーの位置をカード下部に綺麗に揃える */
}

/* >>>>> 口コミ内 サービス別バナー >>>>> */
.review-banner-link {
	display: block;
	width: 100%;
	margin-top: auto; /* コメントの長さに依らず、常にカードの最下部に固定 */
	line-height: 0;
	text-decoration: none;
	transition: opacity 0.2s;
}

.review-banner-link img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

.review-banner-link:hover {
	opacity: 0.85;
}

/* ボタンレイアウト */
.btn-center {
	text-align: center;
	margin-top: 3rem;
}

.btn_14 {
	display: inline-block;
	padding: 15px 40px;
	background: #506d2f; /* leaves */
	color: #fff;
	width: min(94%, 420px);
	text-decoration: none;
	border-radius: 999px;
	font-weight: 700;
	transition: 0.2s;
}

.btn_14:hover {
	background: #fff;
	border: 2px solid #506d2f; /* leaves */
	color: #506d2f !important; /* leaves */
}


/* スマホ用768px以下
+++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media (max-width: 767px) {
	.review_style {
		padding: 2.5rem 0;
	}

	.review_style ul {
		/* ★1列表示に統一したため、スマホでのgrid解除用の複雑な記述も不要になりました */
		gap: 1.2rem;
		padding: 0 1rem;
	}

	.review-card-inner {
		padding: 1.2rem;
	}

	.review_style .user {
		width: 50px;
		height: 50px;
	}

	.user-info .name {
		font-size: 1rem;
	}
	
	.category {
		display: block;
		margin-left: 0;
		margin-top: 2px;
		font-size: 0.85rem;
	}

	.review-card-inner .comment {
		font-size: 0.92rem;
		line-height: 1.7;
		margin-bottom: 1.2rem;
	}

} /* END */

/* =========================================================
   口コミエリア：表示崩れ強制修正リセット
========================================================= */
/* 1. カード全体の中央寄せを解除し、元の左揃えベースに戻す */
.review-card-inner {
	text-align: left !important;
	align-items: stretch !important;
}

/* 2. アイコンと名前・星を確実に【左から右への横並び】にする */
.review-card-inner .user-meta {
	display: flex !important;
	flex-direction: row !important; /* 縦並びを阻止して横並びに固定 */
	align-items: center !important;
	justify-content: flex-start !important; /* 左寄せ */
	gap: 1.2rem !important;
	margin-bottom: 1.2rem !important;
}

/* 3. 名前と【不用品回収】などのカテゴリを横並びに固定する */
.review-card-inner .user-info {
	display: flex !important;
	flex-direction: column !important; /* 名前と星は上下に並べる */
	align-items: flex-start !important; /* 左寄せ */
	text-align: left !important;
}

/* 4. コメント文も確実に左寄せにする */
.review-card-inner .comment {
	text-align: justify !important; /* 両端揃え（またはleft） */
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* 5. スマホ（767px以下）での微調整 */
@media (max-width: 767px) {
	.review-card-inner .user-meta {
		gap: 0.8rem !important;
	}
}

/* ==========================================
   CTA全体の共通レイアウト・装飾
   ========================================== */
.custom-cta-section {
  padding: 40px 20px;
  background-color: #f9f9f9; /* 背景に薄いグレーを敷いて境界を明確に */
  text-align: center;
}

.ai_logo {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
  font-weight: bold;
}

.cta-container {
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
  border: 3px solid #dddddd;
  border-radius: 8px;
  padding: 30px 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.cta-header {
  margin-bottom: 25px;
}

.badge {
  display: inline-block;
  background-color: #555555;
  color: #fff;
  padding: 5px 15px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 4px;
  margin-bottom: 10px;
  letter-spacing: 1px;
}

.cta-lead-red {
  color: #d9383a;
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}

/* ボタンの基本スタイル（全共通） */
.cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.cta-btn {
  display: block;
  text-decoration: none;
  border-radius: 6px;
  color: #fff;
  transition: transform 0.2s, opacity 0.2s;
  box-shadow: 0 4px 6px rgba(0,0,0,0.15);
}

.cta-btn:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* 下段（LINE・SMS）を横並びにするグループ */
.cta-sub-group {
  display: flex;
  gap: 15px;
}

.cta-sub-group .cta-btn {
  flex: 1;
}

/* 内部レイアウト（電話用：横並び） */
.btn-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 20px;
}

.btn-inner i {
  font-size: 32px;
  margin-right: 15px;
}

.btn-text-wrap {
  text-align: left;
}

.btn-sub-text {
  display: block;
  font-size: 13px;
  font-weight: bold;
  opacity: 0.9;
}

.btn-main-text {
  display: block;
  font-size: 30px;
  font-weight: bold;
  line-height: 1.1;
  letter-spacing: 1px;
}

/* 内部レイアウト（LINE・SMS用：縦並び） */
.btn-inner-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 10px;
  text-align: center;
}

.btn-inner-column i {
  font-size: 28px;
  margin-bottom: 5px;
}

.btn-title {
  font-size: 18px;
  font-weight: bold;
  display: block;
  margin-bottom: 2px;
}

.btn-desc {
  font-size: 13px;
  display: block;
  opacity: 0.95;
  font-weight: 500;
}

.btn-note {
  font-size: 10px;
  display: block;
  opacity: 0.8;
  margin-top: 4px;
}

/* ==========================================
   各ボタン固有のカラー設定
   ========================================== */
/* ① 電話：情熱・緊急の赤/オレンジ系 */
.btn-tel {
  background: linear-gradient(135deg, #f39c12, #e67e22);
  border-bottom: 5px solid #d35400;
}

/* ② LINE：公式のグリーン */
.btn-line {
  background: linear-gradient(135deg, #06c755, #05b04b);
  border-bottom: 5px solid #048d3c;
}

/* ③ 【新設】SMS：信頼感とメッセージの青 */
.btn-sms {
  background: linear-gradient(135deg, #2575fc, #1a62d6);
  border-bottom: 5px solid #124eb3;
}


/* ==========================================
   表示切り替え（PC / スマホ）およびレスポンシブ
   ========================================== */
/* デフォルトではPC表示を想定 */
.sp-only {
  display: none !important;
}
.pc-only {
  display: block;
}

/* 画面幅が767px以下（スマホ）の場合のスタイル切り替え */
@media (max-width: 767px) {
  .pc-only {
    display: none !important;
  }
  .sp-only {
    display: block;
  }
  
  /* スマホでは下段のLINEとSMSも縦1列に並べる */
  .cta-sub-group {
    flex-direction: column;
    gap: 15px;
  }
  
  .btn-main-text {
    font-size: 24px;
  }
  
  .btn-inner i {
    font-size: 26px;
  }
}

/* ==========================================
   コンパクト横並びCTA（完全新規クラス）
   ========================================== */
.comp-cta-area {
  padding: 30px 10px;
  background-color: #f6f5f1; /* スクショに近い上品な薄いベージュ背景 */
  font-family: sans-serif;
}

.comp-cta-wrap {
  max-width: 850px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e2e0d9;
  border-radius: 12px;
  padding: 25px 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
  text-align: center;
}

/* ヘッダー装飾 */
.comp-cta-head {
  margin-bottom: 20px;
}

.comp-badge {
  display: inline-block;
  background-color: #c49a2a; /* スクショの落ち着いたゴールド系 */
  color: #fff;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: bold;
  border-radius: 20px;
  margin-bottom: 8px;
}

.comp-lead {
  color: #d9383a;
  font-size: 14px;
  font-weight: bold;
  margin: 0;
  line-height: 1.4;
}

/* 3カラム横並びの土台（PC・スマホ共通） */
.comp-btn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 常に3等分横並び */
  gap: 10px; /* ボタン同士の間隔 */
}

/* ボタン共通スタイル */
.comp-btn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  border-radius: 8px;
  padding: 12px 5px;
  transition: opacity 0.2s, transform 0.2s;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
  box-sizing: border-box;
}

.comp-btn-item:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* 各ボタン内のテキスト階層 */
.comp-btn-item i {
  font-size: 20px;
  margin-bottom: 4px;
}

.comp-btn-label {
  font-size: 14px;
  display: block;
}

.comp-btn-val {
  font-size: 16px;
  font-weight: bold;
  display: block;
  margin: 2px 0;
  white-space: nowrap; /* 文字の意図しない改行を防ぐ */
}

.comp-btn-sub {
  font-size: 12px;
  display: block;
}

/* 各ボタンの固有カラー（スクショ準拠） */
/* ① 電話：赤（グラデーションで立体感をプラス） */
.comp-btn-phone {
  background: linear-gradient(135deg, #dd0000, #b30000);
  border-bottom: 3px solid #8a0000;
}

/* ② LINE：緑 */
.comp-btn-line {
  background: linear-gradient(135deg, #06c755, #05b04b);
  border-bottom: 3px solid #048d3c;
}

/* ③ SMS：青 */
.comp-btn-sms {
  background: linear-gradient(135deg, #2575fc, #1a62d6);
  border-bottom: 3px solid #124eb3;
}

/* ==========================================
   レスポンシブ（スマホ用の文字サイズ微調整）
   ========================================== */
@media (max-width: 767px) {
  .comp-cta-wrap {
    padding: 15px 10px;
  }
  
  .comp-badge {
    font-size: 11px;
    padding: 3px 10px;
  }
  
  .comp-lead {
    font-size: 12px;
  }

  .comp-btn-grid {
    gap: 6px; /* スマホでは間隔を少し狭くして横幅を確保 */
  }

  .comp-btn-item {
    padding: 10px 2px;
  }

  .comp-btn-item i {
    font-size: 16px;
  }

  .comp-btn-label {
    font-size: 9px;
  }

  /* 電話番号などのメイン文字がスマホでギリギリ収まるサイズに調整 */
  .comp-btn-val {
    font-size: 11px; 
  }

  .comp-btn-sub {
    font-size: 8px;
  }
}


/* =================================================
   CTA 上下2列（2×2）レイアウト設計
================================================= */
.tworow-cta-container {
  background: #f5f2eb; /* Warm Beige */
  border-radius: 24px;
  padding: 3rem 2rem;
  max-width: 850px;
  margin: 3rem auto;
  box-sizing: border-box;
  font-family: sans-serif;
  text-align: center;
}

.tworow-cta-header {
  margin-bottom: 2rem;
}

.tworow-cta-header .tworow-badge {
  display: inline-block;
  background: #c59b27; /* Gold */
  color: #fff;
  padding: 6px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.tworow-lead-red {
  color: #d32f2f;
  font-weight: 700;
  font-size: 1.2rem;
  margin: 0;
}

/* 4つのボタンを2列×2段に強制ロック */
.tworow-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 常に横2列 */
  gap: 1.2rem;
  max-width: 750px;
  margin: 0 auto;
}

/* ボタン共通の土台 */
.tworow-cta-btn {
  display: block;
  text-decoration: none;
  color: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
  box-sizing: border-box;
}

.tworow-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.15);
  opacity: 0.95;
}

/* ボタン内部のテキスト配置構造 */
.tworow-btn-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  height: 100%;
  box-sizing: border-box;
}

.tworow-btn-inner i {
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
}

.tworow-btn-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
  letter-spacing: 0.05rem;
}

.tworow-btn-desc {
  font-size: 1.35rem; /* 電話番号等が見えやすいサイズ */
  font-weight: 700;
  line-height: 1.2;
}

/* 各種注記テキスト */
.tworow-btn-note {
  font-size: 0.78rem;
  margin-top: 0.4rem;
  opacity: 0.8;
}

/* =================================================
   各ボタンのグラデーションカラー設定
================================================= */
/* ① 電話：赤 */
.tworow-btn-tel {
  background: linear-gradient(135deg, #e50000, #b70000);
}

/* ② LINE：緑 */
.tworow-btn-line {
  background: linear-gradient(135deg, #06c755, #05b04b);
}
.tworow-btn-line .tworow-btn-desc {
  font-size: 1.1rem; /* LINEの文言に合わせた微調整 */
}

/* ③ SMS：青 */
.tworow-btn-sms {
  background: linear-gradient(135deg, #2575fc, #1a62d6);
}
.tworow-btn-sms .tworow-btn-desc {
  font-size: 1.1rem;
}

/* ④ メールフォーム：茶 */
.tworow-btn-mail {
  background: linear-gradient(135deg, #916f3d, #735427);
}
.tworow-btn-mail .tworow-btn-desc {
  font-size: 1.1rem;
}

/* 出し分け初期値 */
.tworow-sp-only { display: none !important; }


/* =================================================
   スマホ用レスポンシブ（768px以下でも2列を維持）
================================================= */
@media (max-width: 768px) {
  .tworow-cta-container {
    padding: 2rem 1rem;
    margin: 2rem 1rem;
    border-radius: 16px;
  }

  .tworow-cta-header .tworow-badge {
    font-size: 0.9rem;
    padding: 4px 16px;
  }

  .tworow-lead-red { 
    font-size: 1.05rem; 
  }

  /* スマホでも縦並びに落とさずギャップだけ調整 */
  .tworow-cta-grid {
    gap: 0.8rem;
  }

  .tworow-btn-inner {
    padding: 1.2rem 0.5rem;
  }

  .tworow-btn-inner i {
    font-size: 1.8rem;
  }

  .tworow-btn-title { 
    font-size: 0.95rem; 
  }

  /* 2列の中で「0120-00-6975」がはみ出さないように自動縮小 */
  .tworow-btn-desc { 
    font-size: 0.95rem; 
  }
  
  /* 電話番号の枠だけフォントをわずかに強調調整 */
  .tworow-btn-tel .tworow-btn-desc {
    font-size: 1.05rem;
  }

  .tworow-btn-note { 
    font-size: 0.7rem; 
  }

  /* スマホ用文言の切り替え */
  .tworow-pc-only { display: none !important; }
  .tworow-sp-only { display: block !important; }
}


/* =================================================
   CTA  ご相談・お見積りはこちら
================================================= */
.cta-container {
  background: #f5f2eb; /* Warm Beige */
  border-radius: 24px;
  padding: 3rem 2rem;
  max-width: 850px;
  margin: 3rem auto;
  box-sizing: border-box;
  font-family: sans-serif;
  text-align: center;
}


.cta-header {
  margin-bottom: 2rem;
}

.cta-header .badge {
  display: inline-block;
  background: #c59b27;
  color: #fff;
  padding: 6px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.cta-lead-red {
  color: #d32f2f;
  font-weight: 700;
  font-size: 1.2rem;
  margin: 0 0 0.4rem 0;
}

.cta-lead-blue {
  color: #0f4c81;
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0;
}

/* ボタンレイアウト */
.cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  max-width: 700px;
  margin: 0 auto;
}

.cta-btn {
  display: block;
  text-decoration: none;
  color: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.15);
  opacity: 0.95;
}

/* 電話ボタン（赤） */
.btn-tel {
  background: linear-gradient(135deg, #e50000, #b70000);
  padding: 1.2rem;
}

.btn-tel .btn-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.btn-tel i {
  font-size: 2.5rem;
}

.btn-text-wrap {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.btn-tel .btn-sub-text {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.05rem;
}

.btn-tel .btn-main-text {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.1;
}

/* 下段2コラム配置 */
.cta-sub-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}

/* LINE・メール共通子要素 */
.btn-inner-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  height: 100%;
  box-sizing: border-box;
}

.btn-inner-column i {
  font-size: 2rem;
  margin-bottom: 0.4rem;
}

.btn-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.btn-desc {
  font-size: 0.95rem;
  font-weight: 600;
  opacity: 0.9;
}

.btn-note {
  font-size: 0.75rem;
  margin-top: 0.4rem;
  opacity: 0.8;
}

/* LINEボタン（緑） */
.btn-line {
  background: linear-gradient(135deg, #06c755, #05b04b);
}

/* メールボタン（茶） */
.btn-mail {
  background: linear-gradient(135deg, #916f3d, #735427);
}

/* PC/SP 出し分け初期設定 */
.sp-only { display: none; }


/* スマホ用768px以下 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media (max-width: 768px) {
  .cta-container {
    padding: 2rem 1rem;
    margin: 2rem 1rem;
    border-radius: 16px;
  }

  .cta-header .badge {
    font-size: 0.9rem;
    padding: 4px 16px;
  }

  .cta-lead-red { font-size: 1.05rem; }
  .cta-lead-blue { font-size: 0.95rem; }

  .btn-tel { padding: 1rem; }
  .btn-tel .btn-inner { gap: 0.8rem; }
  .btn-tel i { font-size: 1.8rem; }
  .btn-tel .btn-sub-text { font-size: 0.9rem; }
  .btn-tel .btn-main-text { font-size: 1.65rem; }

  /* スマホ時は2列を縦1列に落とす */
  .cta-sub-group {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .btn-inner-column {
    padding: 1.2rem 1rem;
  }

  .btn-title { font-size: 1.15rem; }
  .btn-desc { font-size: 0.88rem; }

  /* 出し分け切り替え */
  .pc-only { display: none; }
  .sp-only { display: block; }

} /* END */




/* ======================================================== 
   ul li List
========================================================= */

/* nayami List 悩み
========================================================= */
.parent{
  width: 100%;
  display: flex;
  justify-content: center;
}

ul.nayami{
  width: min(94%, 900px);
  font-size: 1.15rem;
  font-weight: 700;
  border: 2px solid #506d2f; /* leaves */
  background: #fbf9f5;
  padding: 14px 18px;
  margin: 0 auto;
  border-radius: 12px;
}

ul.nayami li{
  position: relative;
  line-height: 1.7;
  padding: .75em 0 .75em 2em;
  list-style: none;
  border-bottom: 1px dashed #c8decb;
}

ul.nayami li:last-child{
  border-bottom: none;
}

ul.nayami li::before{
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f1b0";
  color: #506d2f;
  position: absolute;
  left: 0;
  top: .85em;
}


/* スマホ 768px以下 */
/* ========================================== */
@media (max-width: 768px){
  .parent{
    display: block;
  }

  ul.nayami{
    width: 100%;
    font-size: 1.05rem;
    padding: 10px 12px;
  }
}


/* =================================================
   空き家データリスト（肉球先頭固定・中央揃え対応版）
================================================= */

ul.akiya_list {
  width: min(94%, 900px);
  font-size: 1.15rem;
  font-weight: 700;
  border: 1px dashed #506d2f; /* leaves */
  background: #fbf9f5;
  padding: 14px 24px; /* 左右の余白を少しだけ最適化 */
  margin: 0 auto;
  border-radius: 12px;
  list-style: none; /* 親要素側で一括でリストマーカーを消去 */
}

ul.akiya_list li {
  line-height: 1.7;
  padding: 0.75em 0; /* ★左側の余白（2em）を削除してスッキリ */
  border-bottom: 1px dashed #c8decb;
  text-align: center; /* ★画像通りにテキストを中央揃えにします */
}

ul.akiya_list li:last-child {
  border-bottom: none;
}

/* ★肉球を文字の直前にくっつける指定 */
ul.akiya_list li::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f1b0";
  color: #506d2f;
  
  /* 固定配置をやめ、文字の一部として扱う */
  display: inline-block;
  position: static; 
  
  /* 文字との間にちょうどいい隙間を作る */
  margin-right: 12px; 
  
  /* 縦方向の位置を文字の中心に微調整 */
  vertical-align: middle; 
}


/* スマホ 768px以下 */
/* ========================================== */
@media (max-width: 768px){
  ul.akiya_list{
    width: 100%;
    font-size: 1.05rem;
    padding: 10px 12px;
  }
}


/* =================================================
   numbered list
================================================= */
ol.gomi_ul{
  width: min(94%, 720px);
  counter-reset: list;
  list-style: none;
  padding: 0;
  margin: 18px auto;
}

ol.gomi_ul li{
  position: relative;
  line-height: 1.7;
  margin: 0 0 12px 40px;
  padding: 0 0 10px 12px;
  font-weight: 700;
}

ol.gomi_ul li::before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -40px;
  top: 0;
  width: 30px;
  height: 30px;
  background: #8b0000;
  color: #fff;
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  font-size: .95rem;
}


/* スマホ用768px以下 */
/* +++++++++++++++++++++++++++++++++++++++ */
@media (max-width: 767px){
  ol.gomi_ul{
    width: calc(100% - 10px);
  }

  ol.gomi_ul li{
    font-size: 1rem;
  }
}


/* =================================================
   孤独死コラム：手順フロー（完全新規クラス）
================================================= */
.flow-column-area {
  padding: 40px 20px;
  background: #fff;
  font-family: sans-serif;
}

.flow-main-logo {
  font-size: 24px;
  color: #333;
  margin-bottom: 25px;
  font-weight: bold;
  text-align: center;
}

/* スクショの枠線を再現 */
.flow-step-box {
  max-width: 850px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #333333; /* カチッとした黒系の細い枠線 */
  border-radius: 12px;
  padding: 40px 30px;
  box-sizing: border-box;
}

/* タイトル部分（h2を使わないルールに変更） */
.flow-step-title {
  font-size: 22px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 35px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

/* タイトルの左右にある金色の飾り線を再現 */
.flow-step-title::before,
.flow-step-title::after {
  content: "";
  display: inline-block;
  width: 60px;
  height: 2px;
  background-color: #c59b27; /* スクショのゴールドカラー */
}

/* リスト全体のコンテナ */
.flow-step-list {
  list-style: none; /* デフォルトの数字をリセット */
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px; /* リスト同士の縦の隙間 */
}

/* 各リストアイテム（擬似要素の土台） */
.flow-step-list li {
  position: relative;
  padding-left: 50px; /* 左側に数字と矢印のスペースを確保 */
  line-height: 1.7;
  font-size: 16px;
  color: #222;
  text-align: left;
  min-height: 32px;
  display: flex;
  align-items: center; /* 数字とテキストの縦ベースラインを中央に揃える */
}

/* 1. 自動カウンタで数字の丸を作る（スクショ通りの濃い赤茶） */
.flow-step-list {
  counter-reset: flow-counter; /* カウンタを初期化 */
}

.flow-step-list li::before {
  counter-increment: flow-counter; /* 1ずつカウントアップ */
  content: counter(flow-counter); /* 数字を表示 */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* 縦中央配置 */
  width: 30px;
  height: 30px;
  background-color: #800000; /* スクショの深い赤 */
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* 2. 下に向かって伸びる縦ラインと「↓」矢印の設計 */
.flow-step-list li:not(:last-child)::after {
  content: "↓";
  position: absolute;
  left: 8px; /* 丸の中心（30pxの半分付近）に合わせる調整 */
  top: 100%; /* 丸のすぐ下からスタート */
  font-size: 14px;
  color: #800000; /* 線と矢印のカラーを統一 */
  font-weight: bold;
  height: 24px; /* 次のリストまでの隙間（gapと同じ値） */
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 1;
  margin-top: -2px; /* 少し上に食い込ませて隙間を無くす */
}


/* =================================================
   スマホ用レスポンシブ（768px以下）
================================================= */
@media (max-width: 768px) {
  .flow-step-box {
    padding: 30px 15px;
    margin: 0 10px;
    border-radius: 8px;
  }

  .flow-step-title {
    font-size: 18px;
    margin-bottom: 25px;
    gap: 8px;
  }

  .flow-step-title::before,
  .flow-step-title::after {
    width: 30px; /* スマホでは線を少し短く */
  }

  .flow-step-list {
    gap: 28px; /* スマホでは矢印の余白を少しだけ広げる */
  }

  .flow-step-list li {
    padding-left: 42px; /* スペースを微調整 */
    font-size: 14px; /* スマホで見やすい文字サイズ */
  }

  .flow-step-list li::before {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }

  .flow-step-list li:not(:last-child)::after {
    left: 6px;
    height: 28px;
    font-size: 12px;
  }
}

/* =================================================
   explanation box
================================================= */
.waku-4{
  width: 90%;
  margin: 0 auto;
  border: 2px solid #2a2922;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.waku-4 > div{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 14px;
  color: #fff;
  font-weight: 800;
  text-align: center;
  line-height: 1.6;
}

.waku-4 p{
  font-size: 1rem;
  line-height: 1.9;
  color: #333;
  text-align: center;
  padding: 0 18px;
}

.waku-4 p:first-of-type{
  padding-top: 18px;
}

.waku-4 p:last-child{
  padding-bottom: 18px;
  margin-bottom: 0;
}

@media (max-width: 767px){
  .waku-4{
    width: 100%;
  }

  .waku-4 p{
    text-align: left;
    padding-left: 14px;
    padding-right: 14px;
  }
}

.heading03{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  font-size: clamp(1.15rem, 1.8vw, 1.6rem);
  line-height: 1.5;
  text-align: center;
  margin: 0 0 18px;
  padding: 20px 0 0;
  color: var(--text);
}

.heading03::before,
.heading03::after{
  content: "";
  width: 60px;
  height: 3px;
  background-color: #ff6a00;
  border-radius: 999px;
}


/* =================================================
    新発想：一本軸タイムライン（PC・スマホ統合版）
================================================= */
.reason-timeline {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 20px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #07162c 0%, #0b2545 40%, #134074 100%);
  color: #ffffff;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  border-radius: 24px;
}

/* ヘッダーデザイン */
.timeline-header {
  text-align: center;
  margin-bottom: 80px;
}

.timeline-header .subtitle {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 700;
  color: #64ffda;
  letter-spacing: 0.2em;
  margin-bottom: 12px;
}

.timeline-header .main-title {
  font-size: clamp(1.5rem, 2.5vw, 1.8rem);
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 20px;
}

.timeline-header .lead-text {
  font-size: 1.1rem;
  color: #8da2bb;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* タイムライン全体のコンテナ（PCでも中央ではなく左寄りに軸を固定） */
.timeline-wrapper {
  position: relative;
  max-width: 800px; /* PCでの読みやすさを考慮した幅 */
  margin: 0 auto;
  padding: 40px 0 40px 40px; /* 左側にラインが走るスペースを確保 */
}

/* 常に左側を通る繊細な光のライン */
.timeline-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px; /* バッジ（44px）の真ん中に合わせて調整 */
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, rgba(100, 255, 218, 0.1), #64ffda, rgba(100, 255, 218, 0.1));
}

/* 各アイテムの並び（左右交互を廃止し、すべて左基準に統一） */
.timeline-item {
  position: relative;
  width: 100%;
  margin-bottom: 50px;
  padding-left: 40px; /* ライン・バッジからの余白 */
  box-sizing: border-box;
  text-align: left !important; /* 常に左揃え */
}

.timeline-item:last-child {
  margin-bottom: 0;
}

/* タイムライン上の光るドット（常に左側に固定） */
.time-badge {
  position: absolute;
  top: 0;
  left: 0; /* 左端に固定 */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #07162c;
  border: 2px solid #64ffda;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 0 15px rgba(100, 255, 218, 0.4);
}

.time-badge span {
  font-size: 0.95rem;
  font-weight: 800;
  color: #64ffda;
  font-family: 'Courier New', Courier, monospace;
}

/* コンテンツエリア：ガラス質感のカード */
.timeline-content {
  background: rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 35px;
  border-radius: 16px;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.timeline-item:hover .timeline-content {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(100, 255, 218, 0.3);
  transform: translateX(5px); /* 上ではなく、視線の流れに合わせて「右」に微細にスライド */
}

.timeline-content h3 {
  margin: 0 0 14px;
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.4;
}

.timeline-content p {
  margin: 0;
  font-size: 1rem;
  color: #b0c4de;
  line-height: 1.85;
  text-align: justify;
}

/* =================================================
    レスポンシブ（スマホ・タブレット調整）
================================================= */
@media (max-width: 768px) {
  .reason-timeline {
    padding: 60px 15px;
    border-radius: 0;
  }

  .timeline-header {
    margin-bottom: 40px;
  }

  .timeline-wrapper {
    padding: 20px 0 20px 30px; /* スマホ用に左のスペースを少しタイトに */
  }

  .timeline-wrapper::before {
    left: 16px; /* スマホ用バッジ（36px）の中心に合わせる */
  }

  .timeline-item {
    padding-left: 25px;
    margin-bottom: 35px;
  }

  /* スマホ時はバッジを少しコンパクトにして文字とのバランスを取る */
  .time-badge {
    width: 34px;
    height: 34px;
  }
  
  .time-badge span {
    font-size: 0.85rem;
  }

  .timeline-content {
    padding: 22px 20px;
  }

  .timeline-content h3 {
    font-size: 1.15rem;
    margin-bottom: 10px;
  }

  .timeline-content p {
    font-size: 0.95rem;
    line-height: 1.75;
  }
}


/* ==========================================================================
   選ばれる理由セクション（アイメモリア）- 縦並び1列バージョン
   ========================================================================== */

/* 全体のラッパー */
.reason-section-wrapper {
    max-width: 800px; /* 1列で見やすいように少し横幅をスリムに調整 */
    margin: 0 auto;
    padding: 40px 20px;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #333;
}

/* タイトル（非表示にする場合は display: none; にしてください） */
.ai_logo {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
    color: #4a3b32;
}

/* メイン画像エリア */
.waku_box {
    text-align: center;
    margin-bottom: 40px;
}
.waku_box img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* 理由カードのコンテナ（PC・スマホ共通で縦並び） */
.reason-container {
    display: flex;
    flex-direction: column;
    gap: 32px; /* カードとカードの間隔を少し広げて見やすく */
}

/* 各カードのスタイル */
.reason-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

/* カードのヘッダー部分 */
.reason-header {
    margin-bottom: 12px;
}

/* 数字（01, 02, 03） */
.reason-num {
    display: block;
    font-size: 28px;
    font-weight: bold;
    color: #506d2f; /* 柔らかいグリーン系 */
    line-height: 1;
    margin-bottom: 6px;
}

/* 見出し（H3） */
.reason-card h3 {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.4;
    color: #2d3748;
    margin: 0;
}

/* カードの本文 */
.reason-body {
    font-size: 15px;
    line-height: 1.7;
    color: #4a5568;
}
.reason-body p {
    margin: 0;
}

/* テキスト強調 */
.highlight-red {
    color: #e53e3e;
    font-weight: bold;
}
.highlight-bold {
    font-weight: bold;
}

/* --------------------------------------------------------------------------
   理由3：料金の数式ビジュアル（formula-box）
   -------------------------------------------------------------------------- */
.formula-box {
    margin-top: 20px;
    padding: 14px;
    background-color: #f7fafc;
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* 数式の各ブロック */
.f-block {
    display: inline-block;
    padding: 8px 12px;
    background: #edf2f7;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}

/* 記号（＋、－、＝） */
.f-sign {
    font-size: 18px;
    font-weight: bold;
    color: #718096;
}

/* 買取金額（赤） */
.red-block {
    background-color: #fed7d7;
    color: #c53030;
}

/* 合計金額（目立つ色） */
.total-block {
    background-color: #cbd5e0;
    color: #1a202c;
    border: 2px solid #4a5568;
}

/* スマホでの数式折り返し微調整 */
@media (max-width: 480px) {
    .formula-box {
        gap: 4px;
    }
    .f-block {
        font-size: 12px;
        padding: 6px 8px;
    }
    .f-sign {
        font-size: 14px;
    }
}

/* ======================================================== 
   grid Layout
========================================================= */


/* =================================================
   新サービスカード（バナーボタン専用設計）
================================================= */
.sv-block {
  width: 100%;
}

/* グリッドコンテナ（PC用：3列） */
.sv-grid {
  width: min(94%, 1100px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* 各カードのベース（高さを自動で揃え、バナーを下部に固定） */
.sv-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow, 0 4px 12px rgba(0,0,0,0.08)); /* 変数がない場合のフォールバック付き */
  display: flex;
  flex-direction: column;
}

.sv-card figure {
  margin: 0;
}

.sv-card figure img {
  width: 100%;
  display: block;
}

/* テキストエリア */
.sv-text {
  padding: 18px 16px 8px;
  flex: 1; /* 解説文の長さが違ってもバナー位置を揃える */
}

.sv-text h4 {
  margin: 0 0 10px;
  font-size: 1.2rem;
  color: #8b0000;
  line-height: 1.5;
}

/* 肉球アイコン（新規クラス名） */
.sv-icon-paw::before {
  content: "\f1b0";
  font-family: "Font Awesome 6 Free";
  font-weight: 700;
  color: #663300;
  margin-right: 6px;
  font-size: 1.1rem;
  display: inline-block;
}

.sv-text p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.8;
  color: #333;
}

/* ★画像バナーボタンのラッパー */
.sv-banner-btn {
  padding: 0 16px 18px;
  margin: 0;
  text-align: center;
}

.sv-banner-btn a {
  display: inline-block;
  width: 100%;
  max-width: 100%;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

/* ★バナー画像が綺麗にカードに収まるようにする指定 */
.sv-banner-btn a img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;

}

/* ホバー時にバナーをふわっと明るく/薄くしてクリック感を出す */
.sv-banner-btn a:hover {
  opacity: 0.4;
}

/* =================================================
   レスポンス対応（スマホ用：1列）
================================================= */
@media (max-width: 767px) {
  .sv-grid {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 0 15px; /* スマホ時の左右の余白を確保 */
    box-sizing: border-box;
  }
}


/* =================================================
   grid_free サービス一覧ブロック（何個でも対応可能）
================================================= */
.grid_free_wrapper {
  background: #fff;
  padding: 1rem 0;
  width: 100%;
}

.grid_free_wrapper .service-lead {
  max-width: 900px;
  margin: 0 auto 3.5rem;
  padding: 0 1rem;
  font-size: 1.1rem; /* リード文もわずかに大きく */
  line-height: 1.9;
  color: #800000;
  text-align: justify;
  box-sizing: border-box;
}

/* 全体を囲むグリッドコンテナ */
.grid_free {
  max-width: 1200px; /* ★3列が美しく収まる標準的な最大幅に調整 */
  margin: 0 auto;
  padding: 0 0.5rem; /* ★コンテナ左右の余白を最小に */
  box-sizing: border-box;
  
  display: grid;
  /* ★修正：auto-fitをやめ、PC時は確実に「固定3列」で等分割する設定に変更 */
  grid-template-columns: repeat(3, 1fr); 
  gap: 2.5rem 1rem; /* ★縦の隙間はゆったり、横の隙間(gap)は最小限に */
}

/* 各要素の余白リセット */
.grid_free .list * {
  margin: 0;
  padding: 0;
}

/* ボックス1個あたり */
.grid_free .list {
  display: flex;
  flex-direction: column; 
  background: #fff;
  color: #333;
  border: 1px solid #e2e8f0;
  border-radius: 12px; /* 角丸を少し滑らかに */
  padding: 0.5rem; /* ★ご指定通り、内側の余白を最小限にキープ */
  line-height: 1.7;
  box-shadow: 0 6px 16px rgba(0,0,0,0.04); /* 影をほんの少しハッキリさせて立体感を */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.grid_free .list:hover {
  transform: translateY(-5px); /* ホバー時の浮き上がりを少し強調 */
  box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}

/* ボックス内の画像エリア */
.grid_free .list figure {
  margin-bottom: 1.2rem;
  overflow: hidden;
  border-radius: 6px;
}

.grid_free .list figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* テキストエリア */
.grid_free .list .text {
  flex-grow: 1; 
  display: flex;
  flex-direction: column;
  gap: 0.8rem; /* 見出しと本文の間隔を少し広げました */
  margin-bottom: 1.5rem;
}

/* 各サービスの見出し(h4) ★大きく変更 */
.grid_free h4 {
  font-size: 1.4rem; /* 1.2rem から拡大 */
  font-weight: 700;
  color: #800000;
  text-align: center;
  padding-bottom: 0.4rem;
  position: relative;
}

/* ボックス内の説明文(p) ★大きく変更 */
.grid_free .list .text p {
  font-weight: normal;
  font-size: 1.05rem; /* 0.92rem から拡大 */
  color: #444; /* 文字色を少し濃くして視認性アップ */
  line-height: 1.2;
  text-align: justify;
}

/* 詳しくみるボタン ★大きく変更 */
.grid_free .list .btn a {
  display: block;
  text-decoration: none;
  background: #5b824a; 
  color: #ffffff;
  text-align: center;
  padding: 0.9rem 1rem; /* 上下のパディングを増やして太らせました */
  font-weight: 700;
  font-size: 1.05rem; /* 0.95rem から拡大 */
  border-radius: 6px;
  transition: background 0.2s;
}

.grid_free .list .btn a:hover {
  background: #466539;
}


/* スマホ用768px以下 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media (max-width: 767px) {
  .grid_free_wrapper {
    padding: 2.5rem 0;
  }

  .grid_free_wrapper .service-lead {
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 2rem;
  }

  .grid_free {
    grid-template-columns: 1fr; /* スマホ時は1列にスッキリ並べる */
    gap: 1.8rem;
    padding: 0 1.2rem;
  }

  .grid_free .list {
    padding: 1.2rem; /* スマホでは見やすさのために適度な余白を持たせる */
  }
  
  .grid_free h4 {
    font-size: 1.25rem; /* スマホでは適度なサイズに微調整 */
  }
  
  .grid_free .list .text p {
    font-size: 0.98rem;
  }

} /* END */


/* =================================================
   許可証・資格3点ブロック
================================================= */
.cert-clean-wrapper {
  background: #fff;
  padding: 3rem 0;
  width: 100%; /* 画面幅ではなく、親要素（main）の幅に100%合わせる */
  box-sizing: border-box;
}

/* 3枚のカードを囲むコンテナ */
.cert-clean-grid {
  width: 100%; /* 親要素の幅いっぱいに広げる */
  max-width: 1500px !important; /* mainの標準幅にカチッと合わせる */
  margin: 0 auto; /* 確実に真ん中に寄せる */
  padding: 0; /* 左右の余白をリセットして横幅を最大限に使う */
  box-sizing: border-box;
  
  display: flex;
  justify-content: space-between; /* 3枚を綺麗に並べる */
  gap: 1rem; /* カード同士の隙間を狭くし、その分画像を大きく見せる */
}

/* カード1個あたりの設計 */
.cert-clean-card {
  flex: 1; /* 3枚の幅を完全に均等（等分割）にする */
  max-width: calc((100% - 2rem) / 3); /* 隙間（gap）を引いた上で絶対に3等分からはみ出させないための縛り */
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #333;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 4px; /* ★外枠と画像の間の隙間を極限まで小さくして画像を大きく */
  box-shadow: 0 6px 16px rgba(0,0,0,0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.cert-clean-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}

/* カード内の画像エリア（最上部固定） */
.cert-clean-img {
  margin: 0 0 1.2rem 0;
  padding: 0;
  overflow: hidden;
  border-radius: 10px;
}

.cert-clean-img img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* サービスの見出し(h4) */
.cert-clean-card .cert-title {
  font-size: 1.0rem; /* 枠線からはみ出さない適正サイズ */
  font-weight: 700;
  color: #800000;
  text-align: center;
  margin: 0 0 12px 0;
  padding: 0 0.5rem;
  line-height: 1.4;
  white-space: normal; 
  word-break: break-all;
}

/* ボックス内の説明文(p) */
.cert-clean-card p {
  font-weight: normal;
  font-size: 1rem;
  color: #444;
  line-height: 1.6;
  text-align: center;
  margin: 0;
  padding: 0 0.5rem 1.2rem;
}


/* =================================================
   スマホ用レスポンシブ（767px以下）
================================================= */
@media (max-width: 767px) {
  .cert-clean-wrapper {
    padding: 2rem 0;
  }

  .cert-clean-grid {
    flex-direction: column; /* スマホ時は縦1列 */
    gap: 1.5rem;
    padding: 0 1rem;
  }

  .cert-clean-card {
    max-width: 100%; /* スマホ時は横幅いっぱい */
    padding: 4px;
  }

  .cert-clean-img {
    margin-bottom: 1rem;
  }
  
  .cert-clean-card .cert-title {
    font-size: 1.1rem;
    margin: 0 0 10px 0;
  }
  
  .cert-clean-card p {
    font-size: 0.95rem;
    padding: 0 0.4rem 0.8rem;
  }
}

/* =================================================
   特殊清掃3点ブロック（完全新規設計）
================================================= */
.sp-clean-wrapper {
  background: #fff;
  padding: 2rem 0;
  width: 100%;
  box-sizing: border-box;
}

/* 全体を横に3つ並べるコンテナ */
.sp-clean-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
  
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
}

/* カード1個あたり */
.sp-clean-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #333;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0.6rem;
  box-shadow: 0 6px 16px rgba(0,0,0,0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.sp-clean-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}

/* 画像エリア */
.sp-clean-img {
  margin: 0 0 1.2rem 0;
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
}

.sp-clean-img img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* サービスの見出し(h4) */
.sp-clean-card h4 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #800000;
  text-align: center;
  margin: 0 0 12px 0;
  padding: 0;
  line-height: 1.4;
  white-space: nowrap;
}

/* ★変更：::before疑似要素でFont Awesome 6.5.2の肉球を呼び出す */


/* ボックス内の説明文(p) */
.sp-clean-card p {
  font-weight: normal;
  font-size: 1.02rem;
  color: #444;
  line-height: 1.6;
  text-align: justify;
  margin: 0;
  padding: 0 0.4rem 1rem;
}


/* =================================================
   スマホ用レスポンシブ（767px以下）
================================================= */
@media (max-width: 767px) {
  .sp-clean-wrapper {
    padding: 1.5rem 0;
  }

  .sp-clean-grid {
    flex-direction: column;
    gap: 1.5rem;
    padding: 0 1rem;
  }

  .sp-clean-card {
    padding: 1rem;
  }

  .sp-clean-img {
    margin-bottom: 1rem;
  }
  
  .sp-clean-card h4 {
    font-size: 1.1rem;
    margin: 0 0 10px 0;
    white-space: normal;
  }
  
  .sp-clean-card p {
    font-size: 0.95rem;
    padding: 0 0 0.5rem;
  }
}


/* =================================================
   grid multi
================================================= */
.grid_multi{
  width: min(94%, 1100px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.clmn-list{
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
  font-weight: 800;
  text-align: center;
  padding-bottom: 14px;
}

.clmn-list img{
  display: block;
  width: 100%;
  margin-bottom: 10px;
}


/* スマホ用768px以下 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media (max-width: 767px){
  .grid_multi{
    width: 100%;
    grid-template-columns: 1fr;
    gap: 16px;
  }

} /* END */


/* ==========================================================================
   料金プランセクション（div統一版）
   ========================================================================== */

.plan-block {
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px 10px;
}

/* プランコンテナ（基本はスマホ用：縦1列） */
.plan-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 30px;
}

/* 各プランカード */
.plan-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
}

/* 画像エリア（上が画像になるよう100%幅） */
.plan-image {
    width: 100%;
}
.plan-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* テキストエリア */
.plan-text {
    padding: 20px;
    flex-grow: 1; /* テキスト量が変わってもボタンの位置を揃える設定 */
}
.plan-text h4 {
    font-size: 18px;
    font-weight: bold;
    color: #800000;
    margin: 0 0 10px 0;
}

/* 肉球アイコン（新規クラス名） */
.pl-icon-paw::before {
  content: "\f1b0";
  font-family: "Font Awesome 6 Free";
  font-weight: 700;
  color: #663300;
  margin-right: 6px;
  font-size: 1.1rem;
  display: inline-block;
}

.plan-text p {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin: 0;
}

/* ボタンの親要素 */
.plan-btn-wrap {
    padding: 0 20px 20px 20px;
    text-align: center;
}

.plan-btn {
    display: block;
    background-color: #5b844f; /* 安心感のある緑 */
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    padding: 14px 20px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}
.plan-btn:hover {
    background-color: #47683d;
}

/* ==========================================================================
   PC用のメディアクエリ（画面横幅が768px以上のとき横3個に並べる）
   ========================================================================== */
@media (min-width: 768px) {
    .plan-container {
        flex-direction: row; /* 横並びにする */
        align-items: stretch; /* カードの高さを揃える */
        gap: 20px;
    }
    
    .plan-card {
        flex: 1; /* 3つのカードを均等な幅にする */
    }
}


/* =================================================
   会社概要（上に見出しラベル・下にテキストの統合版）
================================================= */

/* 会社概要全体のコンテナ */
.company-section {
  width: min(92%, 800px); /* 横幅を適度に絞ることで、縦並びが美しく中央に収まります */
  margin: 0 auto;
  padding: 40px 0;
}

/* リスト全体のコンテナ */
.company-minimal-list {
  display: flex;
  flex-direction: column;
}

/* 各項目の外枠（縦並び・下線区切り） */
.company-row {
  display: flex;
  flex-direction: column; /* 上が見出し、下にテキストの縦並び */
  gap: 12px;             /* 見出しラベルと下のテキストの隙間 */
  padding: 24px 0;       /* 上下のゆったりとした余白 */
  border-bottom: 1px dashed #506d2f; /* leaves */
}

/* 上側の見出しラベル（外枠の幅いっぱいに広げる深緑背景） */
.company-label {
  display: block;        /* ★ inline-block から block に変更（これで横幅いっぱいに広がります） */
  width: 100%;           /* ★ 念のため横幅100%を明示 */
  background-color: #506d2f; /* ご指定の落ち着いた深緑色 */
  color: #fff;           /* 文字色は白 */
  font-weight: 700;
  font-size: 0.95rem;    /* ラベルらしくスマートで上品なサイズ感 */
  padding: 8px 16px;     /* 横幅いっぱいに広がるので、内側の上下左右余白を少しだけ広げて安定感をプラス */
  border-radius: 4px;    /* 角をほんの少し丸めてモダンに */
  letter-spacing: 0.05em;
  box-sizing: border-box; /* ★ 余白（padding）を含めて綺麗に100%の幅に収めるための設定 */
}

/* 下側のテキスト（視認性の高いダークグレー） */
.company-content {
  color: #2b2b2b;
  font-weight: 700;      /* 本文もしっかりと存在感のある太さに設定 */
  font-size: 1.1rem;
  line-height: 1.75;
  word-break: break-word;
  padding-left: 4px;     /* ラベルの左端と文字の始まりの縦ラインを綺麗に揃える微調整 */
}

/* リンクテキスト（Tel、メール、URLなど）の色と装飾 */
.company-content a {
  color: #2b2b2b!important;
  text-decoration: underline;
}

.company-content a:hover {
  color: #506d2f;        /* マウスを乗せたときに、見出しラベルと同じ深緑にふわっと変わります */
}

/* 業務内容・許認可・保有資格などの長文項目をすっきり見せる調整 */
.company-row:nth-last-child(-n+5) .company-content {
  font-size: 1rem;
  font-weight: 500;      /* 文字数が多い項目は少しだけ細めにして圧迫感を減らします */
}

/* 許認可などの文字強調（赤字） */
.company-accent,
.company-content .red {
  color: #ba2620;        /* 白背景ベースにハッキリと映える上品な赤色 */
  font-weight: 700;
}

/* =================================================
   Googleマップのレスポンシブ自動フィット設定
================================================= */
.company-map-container {
  position: relative;
  width: 100%;
  padding-top: 50%;      /* 2:1の美しい比率でマップの土台を確保 */
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #eceff1;
  margin-top: 5px;
}

/* HTML側の width="600" などの絶対数値を無視して、親要素に100%自動追従させます */
.company-map-container iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

/* =================================================
   ?? スマホ環境用の微調整（画面幅500px以下）
================================================= */
@media (max-width: 500px) {
  .company-section {
    padding: 20px 0;
  }

  .company-row {
    padding: 18px 0;     /* スマホでは上下の間隔を少しだけタイトに */
  }

  .company-label {
    font-size: 0.88rem;
    padding: 5px 12px;   /* スマホの画面幅に合わせてラベルも少しコンパクトに */
  }

  .company-content {
    font-size: 1rem;     /* モバイルデバイスで読みやすい文字サイズに自動縮小 */
  }
  
  .company-map-container {
    padding-top: 65%;    /* スマホ画面でも地図が見やすくなるよう、少しだけ縦幅を広げます */
  }
}


/* =========================================================
   table-container
========================================================= */
/* =======================================
   すべての環境に共通するベース（バグ防止）
======================================= */
.additional_table,
.additional_table * {
  box-sizing: border-box; /* 余白によるサイズ崩れを完全に防ぐ */
}

/* =======================================
   PC用スタイル（画面幅 769px 以上）
======================================= */
@media screen and (min-width: 769px) {
  .additional_table {
    border-collapse: collapse;
    margin: 0 auto;
    padding: 0;
    width: 900px; /* PC時はご指定の900pxで固定 */
    background-color: #fff;
  }

  .additional_table tr {
    background-color: #fff;
    border-bottom: 2px solid #fff;
  }

  /* 縞々（ストライプ）背景：PC時のみ適用 */
  .additional_table tbody tr:nth-child(even) {
    background-color: #eee;
  }

  .additional_table th,
  .additional_table td {
    padding: .75em 1em;
    vertical-align: middle;
  }

  /* ヘッダー行 */
  .additional_table thead tr {
    background-color: #506d2f;
    color: #fff;
  }

  .additional_table thead th {
    font-size: .85em;
    padding: 1em;
    font-weight: bold;
  }

  /* ヘッダーの配置をデータの配置と同期 */
  .additional_table thead th:nth-child(1) { text-align: left; }
  .additional_table thead th:nth-child(2) { text-align: left; }
  .additional_table thead th:nth-child(3) { text-align: right; }

  /* ボディの左側見出し（品物名） */
  .additional_table tbody th {
    text-align: left;
    font-size: .85em;
    color: #333;
  }

  /* 各データの配置 */
  .additional_table .txt {
    text-align: left;
    font-size: .8em;
    color: #555;
  }

  .additional_table .price {
    text-align: right;
    color: #FF7043;
    font-weight: bold;
    font-size: .9em;
  }
}

/* =======================================
   スマホ用スタイル（画面幅 768px 以下）
======================================= */
@media screen and (max-width: 768px) {
  .additional_table {
    border: 0;
    width: 100% !important; /* 何が何でも画面幅いっぱいに広げる */
    display: block;
    margin: 0 auto;
  }
  
  /* PC用のヘッダー行を完全に非表示にする */
  .additional_table thead {
    display: none;
  }
  
  .additional_table tbody {
    display: block;
    width: 100%;
  }

  /* 1件のデータを1つの独立したカードに見せる */
  .additional_table tr {
    display: block;
    width: 100% !important; /* 確実に100% */
    margin-bottom: 1.5em; /* カード同士の間隔 */
    border: 1px solid #506d2f;
    background-color: #fff !important;
  }
  
  /* カードのタイトル（品物名：冷蔵庫など） */
  .additional_table tbody th {
    display: block;
    width: 100% !important;
    background-color: #506d2f;
    color: #fff;
    padding: 1em;
    font-size: .95em;
    font-weight: bold;
    border-right: none;
    text-align: left;
  }
  
  /* 内容・価格のデータ行を縦並びに */
  .additional_table td {
    border-bottom: 1px dotted #bbb;
    display: block;
    width: 100% !important; /* 確実に100% */
    font-size: .85em;
    position: relative;
    /* 左側にdata-label（内容・追加料金）が入るスペース(6.5em)を確保、文字は右寄せ */
    padding: 1.2em 1em 1.2em 6.5em; 
    border-right: none;
    text-align: right; 
  }
  
  /* data-label（内容・価格）を左側に絶対配置 */
  .additional_table td::before {
    content: attr(data-label);
    font-weight: bold;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%); /* 縦方向の中央揃え */
    color: #555;
  }
  
  /* 最後の境界線（追加料金の下の点線）は不要なので消去 */
  .additional_table td:last-child {
    border-bottom: 0;
  }
  
  /* スマホ時、テキストも価格も右寄せ */
  .additional_table .txt {
    text-align: right !important;
    color: #333;
  }
  
  .additional_table .price {
    text-align: right !important;
    color: #FF7043;
    font-weight: bold;
    font-size: 1em;
  }
}



/* 口コミ レビュー */
/* ======================================= */
/* 全体の共通設定 */
.review-container,
.review-container * {
  box-sizing: border-box;
}

.review-container {
  max-width: 850px;
  margin: 0 auto;
  font-family: sans-serif;
  padding: 15px;
}

/* 口コミカード（外枠） */
.review-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s ease;
}

/* アコーディオンのヘッダー */
.review-summary {
  display: block;
  padding: 20px 20px 15px 20px;
  cursor: pointer;
  outline: none;
  position: relative;
}
.review-summary::-webkit-details-marker {
  display: none;
}

/* ヘッダー内部の配置 */
.review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px; /* 星とテキストの距離を適度にキープ */
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 投稿者アイコン（画像用） */
.user-icon-img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  background-color: #f0f0f0;
  display: block;
}

.user-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.user-name {
  font-weight: bold;
  color: #2d3748;
  font-size: 15px;
  line-height: 1.2;
}

/* 星5個 */
.star-rating {
  color: #ffb703;
  font-size: 13px;
  letter-spacing: 1px;
  line-height: 1.2;
}

/* カテゴリタグ */
.category-badge {
  background-color: #edf2f7;
  color: #4a5568;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: bold;
}

/* ＋とーのアコーディオンアイコン */
.toggle-icon {
  position: relative;
  width: 28px;
  height: 28px;
  margin-left: auto;
}
.toggle-icon::before,
.toggle-icon::after {
  content: "";
  position: absolute;
  background-color: #1a202c;
  transition: transform 0.25s ease;
}
/* 横線 */
.toggle-icon::before {
  top: 13px; left: 4px; width: 20px; height: 3px;
}
/* 縦線 */
.toggle-icon::after {
  top: 4px; left: 13px; width: 3px; height: 20px;
}

/* アコーディオンが開いているとき（縦線を消してマイナスにする） */
.review-card[open] .toggle-icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

/* ★閉じている時：頭から3行分だけ表示し、末尾に「...」を自動付与する設定 */
.review-card .review-text {
  font-size: 14px;
  line-height: 1.6;
  color: #4a5568;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* ★ここで3行に制限 */
  overflow: hidden;      /* はみ出た分を隠す */
  text-overflow: ellipsis; /* これが「...」を出す魔法のプロパティ */
}

/* ★開いた（open）時：制限を解除して全行をきれいに見せる */
.review-card[open] .review-text {
  display: block;
  overflow: visible;
  color: #2d3748;
}

/* 開いたときの下側コンテナ */
.review-content-body {
  padding: 0 20px 20px 20px;
}

/* 返信エリア */
.reply-box {
  background-color: #f8fafc;
  border-left: 4px solid #fd6767;
  padding: 15px 20px;
  border-radius: 0 8px 8px 0;
  animation: fadeIn 0.3s ease;
}

.reply-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

/* 返信の「店」マークアイコン（画像向けに修正） */
.reply-staff-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: block;
  object-fit: cover; /* 画像が歪まないように調整 */
}

.reply-owner {
  font-weight: bold;
  color: #fd6767;
  font-size: 14px;
}

.reply-text {
  font-size: 13.5px;
  line-height: 1.6;
  color: #4a5568;
  margin: 0;
}


/* スマホ用768px以下 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (max-width: 768px) {
  .review-header {
    display: grid;
    grid-template-columns: 1fr auto;
  }
  .category-badge {
    grid-column: 1 / -1;
    width: max-content;
    margin-top: 4px;
  }
}

/* =========================================================
   flex style
========================================================= */

/* flex_l 画像左 文字右 */
/* ======================================= */
.flex_l  {
    width: 100%;
    margin: 0 auto;
}

.flex_l .list {
  padding: 0;
  border: none;
}

.flex_l .list figure {
  margin-bottom: 1rem;
  width: 100%;
  margin: 0 auto 1rem; /* 中央寄せ */

}

.flex_l .list figure img {
  width: 100%;
  height: auto;
  display: block;
}

.flex_l .list h4 {
  margin: 0 0 0.5em;
  padding: 0 10px;
  font-size: 26px;
  line-height: 1.5;
  color: #8b0000; /* darkred */
  font-weight: 600;
}

.flex_l .list p {
  color: #333;
  margin: 0;
  padding: 0 10px;
  line-height: 1.5;
}

.flex_l .list p,
.flex_l .list h4 {
    padding-left: 1rem;
    padding-right: 1rem;
}


/* PC 768px以上 */
/* +++++++++++++++++++++++++++++++++++++++ */
@media screen and (min-width: 768px) {
  .flex_l {
    width: min(94%, 1000px);
    margin: 0 auto;
  }

  .flex_l .list {
    display: flex;
    align-items: flex-start;
  box-shadow: var(--shadow);
  border-radius: 12px;
  }

  .flex_l .list figure {
    width: 40%;
    margin-right: 2rem;
    margin-bottom: 0;
  }

  .flex_l .list figure img {
    width: 100%;
    height: auto;
    display: block;
  }

  .flex_l .list div {
    flex: 1;
  }

  .flex_l .list h4 {
    font-size: 22px;
    padding: 0;
  }
}



.flow_design03 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 20px;
}

.flow_design03 ul {
  padding: 0;
}

.flow_design03 li {
  list-style-type: none;
}

.flow_design03 dd {
  margin-left: 0;
}

.flow03 {
  position: relative;
}

.flow03::before {
  content: "";
  width: 15px;
  height: 100%;
  background: #eee;
  margin-left: -129px;
  display: block;
  position: absolute;
  top: 0;
  left: 120px;
  border-radius: 20px;
}

.flow03 > li {
  position: relative;
}

.flow03 > li:not(:last-child) {
  margin-bottom: 60px;
}

.flow03 > li .icon03 {
  font-size: 0.8em;
  width: 2em;
  height: 2em;
  line-height: 2;
  text-align: center;
  font-weight: bold;
  border-radius: 100vh;
  color: #fff;
  background: #8EB83C;
  display: inline-block;
  margin-right: 0.3em;
}

.flow03 > li dl {
  padding-left: 70px;
  position: relative;
}

.flow03 > li dl::before,
.flow03 > li dl::after {
  content: "";
  display: block;
  position: absolute;
  top: 15px;
}

.flow03 > li dl::before {
  width: 7px;
  height: 7px;
  margin-top: -3px;
  background: #8EB83C;
  border-radius: 50%;
  left: -4px;
}

.flow03 > li dl::after {
  width: 50px;
  border-bottom: 1px dashed #999;
  position: absolute;
  left: 5px;
}

.flow03 > li dl dt {
  font-size: 1.3em;
  font-weight: 600;
  color: #8EB83C;
  margin-bottom: 0.5em;
  display: flex;
  align-items: center;
}.flow_design03 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 20px;
}

.flow_design03 ul {
  padding: 0;
}

.flow_design03 li {
  list-style-type: none;
}

.flow_design03 dd {
  margin-left: 0;
}

.flow03 {
  position: relative;
}

.flow03::before {
  content: "";
  width: 15px;
  height: 100%;
  background: #eee;
  margin-left: -129px;
  display: block;
  position: absolute;
  top: 0;
  left: 120px;
  border-radius: 20px;
}

.flow03 > li {
  position: relative;
}

.flow03 > li:not(:last-child) {
  margin-bottom: 60px;
}

.flow03 > li .icon03 {
  font-size: 0.8em;
  width: 2em;
  height: 2em;
  line-height: 2;
  text-align: center;
  font-weight: bold;
  border-radius: 100vh;
  color: #fff;
  background: #506d2f;
  display: inline-block;
  margin-right: 0.3em;
}

.flow03 > li dl {
  padding-left: 70px;
  position: relative;
}

.flow03 > li dl::before,
.flow03 > li dl::after {
  content: "";
  display: block;
  position: absolute;
  top: 15px;
}

.flow03 > li dl::before {
  width: 7px;
  height: 7px;
  margin-top: -3px;
  background: #506d2f;
  border-radius: 50%;
  left: -4px;
}

.flow03 > li dl::after {
  width: 50px;
  border-bottom: 1px dashed #999;
  position: absolute;
  left: 5px;
}

.flow03 > li dl dt {
  font-size: 1.3em;
  font-weight: 600;
  color: #506d2f;
  margin-bottom: 0.5em;
  display: flex;
  align-items: center;
}



/* =========================================================
   インボイス登録店案内バナー セクション（PCメイン最適化版）
========================================================= */

.invoice-banner {
  max-width: 850px; /* ★PCで貧相に見えないよう、横幅を「700px ?? 850px」に拡大 */
  margin: 2.5rem auto; /* 前後の余白を少し広げてゆったりと配置 */
  border: 2px solid #506d2f !important; /* 上品なleavesの緑枠 */
  border-radius: 6px; /* PCの大画面に合わせて角丸を少しシャープに（8px ?? 6px） */
  background-color: #ffffff !important;
  overflow: hidden; 
}

/* 上段：メインメッセージエリア（PCで窮屈にならない余白） */
.invoice-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px; /* アイコンと文字の間隔を少し広げてPC向けに */
  padding: 1.8rem 2rem; /* ★上下左右の余白を広げ、横長の開放感を出します */
  background-color: #fbf9f5 !important; /* 温かみのあるベージュ */
}

/* Font Awesome アイコンの設定 */
.invoice-fa-icon {
  font-size: 2rem; /* ★PC基準の大きくて見やすいサイズに固定 */
  color: #506d2f !important; 
  line-height: 1;
  flex-shrink: 0; 
}

/* メインテキスト（PCでパッと1行で綺麗に読めるサイズ） */
.invoice-title {
  margin: 0;
  font-size: 1.6rem; /* ★PCでダイナミックかつ上品に映える文字サイズ */
  font-weight: 700;   
  color: #2d3824 !important; /* 深いオリーブ黒 */
  line-height: 1.3;
  letter-spacing: 0.03em;
}

/* 下段：登録番号エリア（PCで1行にすっきり収まる帯） */
.invoice-sub {
  background-color: #3b5222 !important; /* 上品なアース深緑 */
  padding: 1rem 2rem; /* 横に引き締まったスマートな帯にします */
  display: flex;
  flex-direction: row; /* ★PCメインなので、最初から「横並び」を基準にします */
  justify-content: center;
  align-items: center;
  gap: 30px; /* 「事業者名」と「登録番号」の間隔を広げてPC向けに */
}

/* 「適格請求書発行事業者」の文字 */
.invoice-label {
  color: #e2edd5 !important; /* 上品なライトベージュ */
  font-size: 1rem; /* PCで見やすい標準サイズ */
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* 登録番号 */
.invoice-number {
  color: #ffffff !important; 
  font-size: 1.3rem; /* PCで数字がハッキリ視認できるサイズ */
  font-weight: 700;
  letter-spacing: 0.08em; /* 数字を少し間を空けて読みやすく */
}

/* スマホ表示への安全対策 */
/* ========================================================= */
@media (max-width: 768px) {
  .invoice-banner {
    margin: 1.5rem auto;
  }
  .invoice-main {
    padding: 1.2rem 1rem;
    gap: 10px;
  }
  .invoice-fa-icon {
    font-size: 1.5rem;
  }
  .invoice-title {
    font-size: 1.2rem;
  }
  .invoice-sub {
    flex-direction: column; /* スマホの時は自動で縦並びにして崩れを防ぐ */
    gap: 6px;
    padding: 0.8rem 1rem;
  }
  .invoice-label {
    font-size: 0.85rem;
  }
  .invoice-number {
    font-size: 1.1rem;
  }
}


/* =================================================
   作業事例スライドショー（3列・画像拡大・行間詰め版）
================================================= */
.case-slide-wrapper {
  padding: 4rem 0;
  background: #fff;
}

/* スライドショー外枠の背景調整 */
.case-slide-wrapper .bg-light {
  background: #f7f9fa; /* 事例を際立たせるための上品な極薄グレー */
  padding: 3rem 0;
}

/* スライドショー全体を囲むコンテナ */
.slide-thumbnail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem 60px 1.5rem; /* 下部にインジケーター用のスペースをしっかり確保 */
  position: relative;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* カードを横並びにするステージ */
.slide-thumbnail .img {
  display: flex;
  gap: 1.5rem; /* カード同士の間隔 */
}

/* 1枚あたりのカードデザイン設定 ★修正：3列用に計算変更 */
.slide-thumbnail .slide-card {
  /* ★修正：3列（隙間2個分）の計算に合わせて、1枚あたりを約31.6%に拡大 */
  flex: 0 0 calc((100% - 3rem) / 3); 
  max-width: calc((100% - 3rem) / 3);
  background: #fff;
  color: #333;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden; /* 画像の角丸をはみ出させない */
  box-shadow: 0 4px 15px rgba(0,0,0,0.04);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* 写真エリア ★修正：画像を大きく見せるため、比率を4:3から「16:11」に変更（縦幅を少し広く） */
.slide-thumbnail .slide-card figure {
  margin: 0;
  padding: 0;
  background: none;
  width: 100%;
  aspect-ratio: 16 / 11; /* ★横幅に対して縦幅を少し広げて画像を大きくアピール */
  overflow: hidden;
}

.slide-thumbnail .slide-card figure img {
  width: 100% !important; 
  height: 100%;
  object-fit: cover; /* 縦横比を崩さずに綺麗にくり抜く */
  display: block;
}

/* カード内のテキスト余白 */
.slide-thumbnail .card-content {
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* 事例の見出し(h4) ★修正：行間を詰める */
.slide-thumbnail h4 {
  font-size: 1.15rem; 
  font-weight: 700;
  line-height: 1.3; /* ★行間を1.5から1.3に詰めて引き締め */
  color: #111;
  margin-bottom: 0.6rem;
}

/* 事例の説明文章(p) ★修正：行間を少なく */
.slide-thumbnail .desc {
  font-size: 1.02rem; 
  line-height: 1.5; /* ★行間を1.7から1.5に少なく変更し、間伸びを解消 */
  color: #555;
  text-align: justify;
  margin-bottom: 1rem;
  flex-grow: 1; /* テキスト量がバラバラでも、下のユーザー名の位置を綺麗に揃える */
}

/* ユーザー属性・地域表記 */
.slide-thumbnail .name {
  font-size: 0.88rem;
  color: #888;
  text-align: right;
  font-weight: 600;
  margin-top: auto; /* 常に一番下に配置 */
}


/* >>>>> インジケーター（ドットボタン） >>>>> */
.slide-thumbnail .slide-indicators {
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 15px;
  left: 0;
}

.slide-thumbnail .indicator {
  display: inline-block;
  width: 12px; 
  height: 12px;
  background: #cbd5e1;
  border-radius: 50%;
  margin: 0 6px;
  cursor: pointer;
  transition: background 0.3s;
}

.slide-thumbnail .indicator.active {
  background: #5b824a; /* ブランドカラーのグリーンに統一 */
}


/* スマホ用768px以下 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (max-width: 768px) {
  .case-slide-wrapper {
    padding: 2.5rem 0;
  }

  .case-slide-wrapper .ai_logo {
    font-size: 1.45rem;
    margin-bottom: 1.5rem;
  }

  .case-slide-wrapper .bg-light {
    padding: 1.5rem 0;
  }

  .slide-thumbnail {
    padding: 0 1rem 50px 1rem;
  }

  .slide-thumbnail .img {
    gap: 1rem;
  }

  /* スマホでも2列で綺麗に並ぶように調整 */
  .slide-thumbnail .slide-card {
    flex: 0 0 48%; 
    max-width: 48%;
    border-radius: 8px;
  }
  
  .slide-thumbnail .card-content {
    padding: 1rem;
  }

  .slide-thumbnail h4 {
    font-size: 1.1rem;
    line-height: 1.3;
  }

  .slide-thumbnail .desc {
    font-size: 0.98rem;
    line-height: 1.45;
  }

} /* END */




/* ======================================================== 
   FAQ よく頂く質問
========================================================= */
.faq-section{
  width: min(94%, 1000px);
  margin: 0 auto;
}

.faq-lead{
  text-align: center;
  font-size: 1rem;
  line-height: 1.9;
  margin-bottom: 28px;
  color: #333; /* 文字色を少し濃く */
}

.faq-box{
  max-width: 900px;
  margin: 0 auto;
}

.faq-item{
  /* ?? 枠線をはっきりとした濃いめのグレーに変更 */
  border: 2px solid #a0a0a0;
  border-radius: 12px;
  margin-bottom: 14px;
  /* ?? 閉じている時は真っ白にしてスッキリ見せる */
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(0,0,0,0.06); /* 影も少しだけクッキリ */
  transition: background-color 0.3s ease;
}

/* ?? 【追加】質問が開いている時だけ、背景にアイメモリア様らしい上品な淡い緑を敷く */
.faq-item[open] {
  background: #f4faf9; 
  border-color: #005a5a; /* 開いている時は枠線もロゴに合わせた深い色に */
}

.faq-item summary{
  font-weight: 800;
  font-size: 1.1rem;
  padding: 16px 48px 16px 18px;
  cursor: pointer;
  list-style: none;
  position: relative;
  line-height: 1.65;
  color: #222; /* 質問の文字色を真っ黒に近くして視認性アップ */
}

/* ?? 「Q.」の色をロゴに合わせた深く力強いグリーンに変更 */
.faq-item summary::before {
  content: "Q. ";
  color: #005a5a; 
  margin-right: 4px;
}

.faq-item summary::-webkit-details-marker{
  display: none;
}

.faq-item summary::after{
  content: "＋";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  /* ?? プラスボタンの色も濃くして目立たせる */
  color: #005a5a;
  font-weight: bold;
}

/* ?? マイナスボタンの色 */
.faq-item[open] summary::after{
  content: "－";
  color: #005a5a;
}

.faq-item p{
  padding: 0 18px 18px;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.9;
  color: #8b0000; /* 回答の濃い赤はそのまま活かします */
  margin: 0;
}

/* ?? 「A.」の文字 */
.faq-item p::before {
  content: "A. ";
  font-size: 1.2rem;
  margin-right: 4px;
}

/* スマホ用768px以下 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media (max-width: 767px){
  .faq-item summary{
    font-size: 1rem;
    padding: 14px 42px 14px 14px;
  }

  .faq-item p{
    font-size: .95rem;
    padding: 0 14px 16px;
  }

} /* END */


/* =================================================
   service area 営業エリア
================================================= */
.service-area-section{
  width: min(94%, 1100px);
  margin: 0 auto;
  padding: 20px 0 10px;
}

.service-area-lead{
  margin-bottom: 28px;
}

.service-area-catch{
  margin: 0 0 10px;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.7;
  color: #0c4379;
}

.service-area-map{
  width: min(100%, 920px);
  margin: 0 auto 30px;
}

.service-area-map img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid #dde6f0;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}

.service-area-wrap{
  display: grid;
  gap: 22px;
}

.service-area-card{
  background: #fff;
  border: 1px solid #cfdae8;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}

.service-area-card-head{
  padding: 20px 22px;
  background: linear-gradient(135deg, #0c4379 0%, #052a50 100%);
  color: #fff;
}

.service-area-card-head h3{
  margin: 0 0 6px;
  font-size: 1.2rem;
  line-height: 1.5;
  font-weight: 700;
}

.service-area-card-head p{
  margin: 0;
  font-size: 0.92rem;
  color: rgba(255,255,255,.86);
  line-height: 1.6;
}

.service-area-card-body{
  padding: 24px 30px;
  background: #fff;
}

/* 一覧部分：元のクラス名（service-area-list）のまま枠なし多段並びに修正 */
.service-area-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid; /* これで1列から多段並びになります */
  grid-template-columns: repeat(5, minmax(0, 1fr)); /* PC時は綺麗に詰まる5列並び */
  gap: 12px 10px; /* 縦と横の隙間をタイトに制限 */
}

/* 東京都用のリストも共通設定（PC5列）に */
.service-area-list-tokyo{
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.service-area-list li{
  position: relative;
  margin: 0;
  padding: 2px 0 2px 16px; /* 枠がないのでパディングを最小限に */
  background: transparent;  /* 背景を透明に（白枠を消去） */
  border: none;             /* 枠線を完全消去 */
  border-radius: 0;
  font-size: 0.96rem;
  line-height: 1.4;
  color: #333333;
  box-sizing: border-box;
  font-weight: 500;
}

/* 頭のポッチ（・）を綺麗に再配置 */
.service-area-list li::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #0c4379;
  transform: translateY(-50%);
}

.service-area-card-sub .service-area-card-head{
  background: linear-gradient(135deg, #234d78 0%, #163654 100%);
}

.service-area-note{
  margin-top: 18px;
  padding: 14px 16px;
  background: #f5f8fc;
  border-left: 4px solid #0c4379;
  border-radius: 10px;
}

.service-area-note p{
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.8;
  color: #444;
}


/* スマホ用768px以下 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (max-width: 768px){
  .service-area-section{
    width: min(94%, 100%);
  }

  .service-area-map{
    margin-bottom: 22px;
  }

  .service-area-map img{
    border-radius: 12px;
  }

  .service-area-card{
    border-radius: 14px;
  }

  .service-area-card-head{
    padding: 16px;
  }

  .service-area-card-head h3{
    font-size: 1.05rem;
  }

  .service-area-card-head p{
    font-size: 0.86rem;
  }

  .service-area-card-body{
    padding: 20px 16px;
  }

  /* スマホ時は3列にぎゅっと並べる */
  .service-area-list{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 6px;
  }

  .service-area-list-tokyo{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .service-area-list li{
    padding: 2px 0 2px 14px;
    font-size: 0.92rem;
    text-align: left;
  }

} /* END */


/* =================================================
   挨拶ブロック
================================================= */
.flex-aisatsu-container * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 全体を囲むコンテナ */
.flex-aisatsu-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0.5rem;
}

/* 挨拶カードのメイン設定（横並びを維持） */
.flex-aisatsu-container .aisatsu-card {
  display: flex;
  align-items: flex-start; /* ★ center から flex-start に変更：これで画像とh4の上端が揃います */
  gap: 2rem;           /* 画像とテキストの間のスキマ */
  background: #fff;    /* 背景を白に */
  border: none;        /* 外枠を削除 */
  border-radius: 0;    /* 角丸を削除 */
  padding: 0;          /* 内側余白をリセット */
  box-shadow: none;    /* カードの影を削除 */
}

/* PC時の画像エリア（左側：全体の40%を確保） */
.flex-aisatsu-container .aisatsu-card figure {
  flex: 0 0 40%;
  max-width: 40%;
  margin: 0;           
  padding: 0;          
}

.flex-aisatsu-container .aisatsu-card figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* PC時のテキストエリア（右側） */
.flex-aisatsu-container .text-parts {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0 1rem 1rem 0; /* ★上側のpaddingを0にして、h4が一番上にピタッと来るように調整 */
}

/* 見出し */
.flex-aisatsu-container .text-parts h4 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #800000;
  line-height: 1.3;
}

.flex-aisatsu-container .text-parts h4.pl-icon-paw::before {
  content: "\f1b0";
  font-family: "Font Awesome 6 Free";
  font-weight: 700;
  color: #663300;
  margin-right: 6px;
  font-size: 1.1rem;
  display: inline-block;
}

/* 本文文章 */
.flex-aisatsu-container .text-parts p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #444;
  text-align: justify;
}

/* リスト */
.flex-aisatsu-container .text-parts ul {
  padding-left: 20px;
}
.flex-aisatsu-container .text-parts li {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #444;
}


/* スマホ用768px以下（スマホ時のみ縦並びにする設定） */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (max-width: 767px) {
  .flex-aisatsu-container .aisatsu-card {
    flex-direction: column; 
    gap: 1.2rem;
    padding: 0;
  }

  .flex-aisatsu-container .aisatsu-card figure {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .flex-aisatsu-container .text-parts {
    padding: 0 10px 15px 10px; 
  }

  .flex-aisatsu-container .text-parts h4 {
    font-size: 1.15rem;
  }

  .flex-aisatsu-container .text-parts p,
  .flex-aisatsu-container .text-parts li {
    font-size: 0.98rem;
    line-height: 1.6;
  }
}

/* リスト */
.flex-aisatsu-container .text-parts ul {
  padding-left: 20px;
}
.flex-aisatsu-container .text-parts li {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #444;
}







/* =================================================
   info-card
================================================= */
.info-card {
  max-width: 900px;         /* 枠の最大横幅（お好みで調整してください） */
  margin: 20px auto;        /* 画面中央に配置 */
  background-color: #fff;   /* 本文の背景色 */
  border: 2px solid #506d2f;/* leaves */
  border-radius: 12px;      /* 角丸の具合 */
  overflow: hidden;         /* ヘッダーの角丸がはみ出さないようにするマジック */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* ほんのり優しい影（画像に合わせた立体感） */
}

/* 上部の青いヘッダー部分 */
.info-card-header {
  background-color: #506d2f;/* leaves */
  color: #ffffff;           /* 文字色（白） */
  font-weight: bold;        /* 太字 */
  font-size: 1.15rem;       /* 文字の大きさ */
  text-align: center;       /* 文字を中央寄せ */
  padding: 15px 20px;       /* 上下・左右の余白 */
  letter-spacing: 0.05em;   /* 文字の間隔を少し広げて読みやすく */
}

/* 下部の白い本文部分 */
.info-card-body {
  padding: 30px;            /* 内側の余白（画像のようにゆったり広め） */
  color: #333333;           /* 文字色（真っ黒にせず濃いグレーにすると上品になります） */
  font-size: 1.2rem;          /* 本文の文字サイズ */
  line-height: 1.8;         /* 行間（読みやすさ重視） */
}

/* 本文内の段落同士のすき間 */
.info-card-body p {
  margin-bottom: 1.5em;     /* 段落の下にスペースを空ける */
}

/* 最後の段落だけは下に余白を作らない */
.info-card-body p:last-child {
  margin-bottom: 0;
}


/* このh2だけをピンポイントで小さく調整（文字量が多いので1.3rem?1.5remあたりが綺麗です） */
.ai_logo_sub {
  font-size: 1.4rem !important; 
}

/* スマホ用768px以下 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (max-width: 767px) {
  .ai_logo_sub {
    font-size: 1.15rem !important;
  }

} /* END */


/* =================================================
   NAP情報（会社概要）ブロック専用カスタムCSS
================================================= */
.c-nap {
  max-width: 1200px;
  margin: 50px auto 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

/* 上部の中見出し(h3) */
.c-nap h3 {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.4;
  color: #1e3a1a; /* 落ち着きのある深いグリーン */
  margin-bottom: 1.5rem;
  padding-left: 10px;
  border-left: 5px solid #5b824a; /* アクセントの左縦線 */
}

/* テーブル全体の基本設定 */
.c-nap .f_table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  background: #fff;
  border-radius: 8px;
  overflow: hidden; /* 角丸を効かせる */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  border: 1px solid #e2e8f0;
}

/* キャプション（表の上の補足テキスト） */
.c-nap .f_table caption {
  text-align: left;
  font-size: 1.05rem;
  font-weight: 600;
  color: #444;
  margin-bottom: 1rem;
  padding-left: 5px;
}

/* 行・セルの共通設定 */
.c-nap .f_table tr {
  border-bottom: 1px solid #e2e8f0;
}

.c-nap .f_table tr:last-child {
  border-bottom: none; /* 最後の行の線は消す */
}

/* 左側：ヘッダーセル(th) ★スクショの雰囲気をベースに品よく調整 */
.c-nap .f_table th {
  width: 25%; /* 左側の幅をバランスよく固定 */
  background: #f7f9fa; /* 上品な極薄グレー */
  color: #333;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  padding: 1.2rem 1rem;
  vertical-align: middle;
  border-right: 1px solid #e2e8f0;
  white-space: nowrap; /* 勝手に変なところで改行させない */
}

/* 右側：データセル(td) */
.c-nap .f_table td {
  padding: 1.2rem 1.5rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
  text-align: left;
  vertical-align: middle;
}

/* リンク色（電話・メール・URL）の調整 */
.c-nap .f_table td a {
  color: #3165b5;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}

.c-nap .f_table td a:hover {
  color: #5b824a;
  text-decoration: underline;
}

/* Googleマップのレスポンシブコンテナ */
.c-nap .f_table td iframe {
  width: 100% !important; /* テーブルの幅いっぱいに自動フィット */
  max-width: 100%;
  border-radius: 6px;
  display: block;
}

/* =================================================
   レスポンシブ（スマホ・タブレット対応 768px以下）
================================================= */
@media screen and (max-width: 768px) {
  .c-nap h3 {
    font-size: 1.2rem;
  }

  .c-nap .f_table caption {
    font-size: 0.95rem;
  }

  /* スマホ時はthの横幅を少し狭めてテキスト領域を広く */
  .c-nap .f_table th {
    width: 30%;
    padding: 1rem 0.5rem;
    font-size: 0.9rem;
  }

  .c-nap .f_table td {
    padding: 1rem;
    font-size: 0.92rem;
    line-height: 1.5;
  }

  /* 業務内容など長いテキストや番号が潰れないよう自動改行を強化 */
  .c-nap .f_table td {
    word-break: break-all; 
  }
  
  /* スマホで地図が小さくなりすぎないよう縦幅を少しコンパクトに調整 */
  .c-nap .f_table td iframe {
    height: 220px !important;
  }
}


/* 費用相場 */
/* ======================================= */
.g_table{
  table-layout: fixed;
  width: min(94%, 900px);
  margin: 0 auto;
  background: #fff;
  color: #333;
  border-collapse: collapse;
  box-shadow: var(--shadow);
  overflow: hidden;
  border-radius: 12px;
}

.g_table th,
.g_table td{
  border: 1px solid #ccc;
  word-break: break-word;
  padding: 12px 10px;
  line-height: 1.7;
}

.g_table th{
  background: #f5f8fb;
  text-align: center;
  font-weight: 600;
  width: 30%;
}

.g_table td{
  text-align: left;
}

@media (max-width: 767px){
  .g_table{
    width: 100%;
    font-size: .95rem;
  }

  .g_table th,
  .g_table td{
    padding: 10px 8px;
  }
}


/* =================================================
    注意事項セクション（完全リニューアル）
================================================= */
.attention-section {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 60px 20px;
  box-sizing: border-box;
  background-color: #f8fafc; /* 薄いグレーを敷いて白いカードを際立たせる */
  border-radius: 16px;
}

/* 注意事項コンテナ */
.attention-container {
  margin-top: 40px;
}

/* リスト全体の初期化 */
.attention-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px; /* カード同士の間隔 */
}

/* 基本のカードスタイル */
.attention-item, 
.attention-item-alert, 
.attention-item-warn {
  background: #ffffff;
  border-radius: 10px;
  padding: 24px 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  position: relative;
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  border-left: 6px solid #801a1a; /* アイメモリア様のロゴ・既存色に合わせた深みのある赤 */
}

/* 4番（ミルフィーユ）のカードだけ少し警戒を促す配色に */
.attention-item-alert {
  border-left-color: #d97706; /* 警告のオレンジ */
  background: #fffdfa;
}

/* 5・6番（追加料金・不可）のカード */
.attention-item-warn {
  border-left-color: #dc2626; /* 強めの赤 */
  background: #fffafb;
}

/* コンテンツ部分 */
.attention-content {
  width: 100%;
}

/* カード内のミニ見出し */
.attention-content strong {
  display: block;
  font-size: 1.15rem;
  color: #1f2937;
  margin-bottom: 8px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

/* 固有の色付け */
.attention-item-alert .attention-content strong { color: #b45309; }
.attention-item-warn .attention-content strong { color: #b91c1c; }

/* カード内の本文 */
.attention-content p {
  margin: 0;
  font-size: 1rem;
  color: #4b5563;
  line-height: 1.75;
}

/* テキスト装飾（ハイライト） */
.highlight {
  font-weight: 700;
  background: linear-gradient(transparent 60%, #e2e8f0 60%); /* 自然なアンダーライン */
  color: #111827;
}

.highlight-red {
  font-weight: 700;
  color: #dc2626;
  background: linear-gradient(transparent 60%, #fffee0 60%);
}

/* =================================================
    スマートフォン用（767px以下）
================================================= */
@media (max-width: 767px) {
  .attention-section {
    padding: 40px 15px;
    border-radius: 0;
  }

  .attention-item, 
  .attention-item-alert, 
  .attention-item-warn {
    padding: 20px 18px;
    border-left-width: 5px;
  }

  .attention-content strong {
    font-size: 1.05rem;
    margin-bottom: 6px;
  }

  .attention-content p {
    font-size: 0.95rem;
    line-height: 1.65;
  }
}


/* =================================================
    悪徳業者注意喚起：インパクト・レイアウト
================================================= */
/* sectionの直下に配置する全体ラッパー（クラス指定はここに行う） */
.fraud-alert-wrapper {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 20px;
  box-sizing: border-box;
}

/* 全体を包むメインコンテナ */
.alert-container {
  background: #ffffff;
  border: 3px solid #333; /* 警告を促す赤の太枠 */
  border-radius: 20px;
  padding: 50px 40px 40px;
  position: relative;
  box-shadow: 0 15px 40px rgba(220, 38, 38, 0.08);
}

/* 最上部にはみ出す強烈なキャッチコピーバッジ */
.alert-badge {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #ffffff;
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  font-weight: 900;
  padding: 10px 35px;
  border-radius: 50px;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.3);
  margin: 0;
  letter-spacing: 0.05em;
}

/* 悪徳業者の実態エリア */
.dark-reality-box {
  background: #fff5f5; /* 警告を連想させる極めて薄い赤 */
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 35px;
  text-align: center;
}

.dark-reality-box h4 {
  margin: 0 0 20px;
  font-size: 1.2rem;
  color: #991b1b;
  font-weight: 800;
}

/* 強調したい悪徳セリフ */
.danger-text {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 800;
  color: #dc2626;
  margin: 0 0 10px;
  line-height: 1.4;
}
.danger-text:nth-of-type(2) {
  margin-bottom: 25px;
}

/* ダメな業者チェックリスト */
.check-bad-list {
  background: #ffffff;
  border: 1px dashed #f87171;
  border-radius: 8px;
  padding: 20px 25px;
  text-align: left;
  max-width: 550px;
  margin: 0 auto;
}

.check-bad-list h5 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #7f1d1d;
  font-weight: 700;
}

.check-bad-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.check-bad-list li {
  font-size: 0.95rem;
  color: #4b5563;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}
.check-bad-list li:last-child {
  margin-bottom: 0;
}

.check-bad-list li span {
  color: #dc2626;
  font-weight: 900;
  margin-right: 8px;
  font-size: 1.1rem;
}

/* ? アイメモリアの解決エリア */
.solution-box {
  text-align: center;
  padding-top: 10px;
}

.solution-lead {
  font-size: 1.1rem;
  color: #374151;
  margin: 0 0 8px;
  font-weight: 700;
}

/* 会社への誘導を目立たせる */
.brand-call {
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 900;
  color: #1e3a8a;
  margin: 0 0 20px;
  line-height: 1.4;
}

.brand-call span {
  background: linear-gradient(transparent 60%, #fff3b3 60%); /* 黄色マーカー */
  color: #0b3c72;
  padding: 0 4px;
}

/* 最後のメッセージ */
.promise-text {
  font-size: 1rem;
  color: #4b5563;
  line-height: 1.8;
  max-width: 600px;
  margin: 0 auto;
  font-weight: 500;
}

/* =================================================
    レスポンシブ（スマホ対応）
================================================= */
@media (max-width: 767px) {
  .fraud-alert-wrapper {
    padding: 40px 10px;
  }

  .alert-container {
    padding: 45px 20px 30px;
    border-radius: 14px;
  }

  .alert-badge {
    padding: 8px 20px;
    font-size: 1rem;
    top: -18px;
  }

  .dark-reality-box {
    padding: 20px 15px;
    margin-bottom: 25px;
  }

  .dark-reality-box h4 {
    font-size: 1.05rem;
    margin-bottom: 15px;
  }

  .check-bad-list {
    padding: 15px;
  }

  .check-bad-list h5 {
    font-size: 0.95rem;
  }

  .check-bad-list li {
    font-size: 0.88rem;
    align-items: flex-start;
  }
  
  .check-bad-list li span {
    line-height: 1.3;
  }

  .brand-call {
    font-size: 1.3rem;
  }
  
  .promise-text {
    font-size: 0.9rem;
    line-height: 1.7;
    text-align: justify;
  }
}

/* =================================================
   実績・事例カード（行間・余白の微調整版）
================================================= */
.report-card {
  width: min(94%, 980px);
  margin: 0 auto 28px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #d9e3f0;
  border-radius: 14px;
  box-shadow: var(--shadow);
  box-sizing: border-box;
}

.report-title {
  margin: 0 0 18px 0;
  font-size: 1.4rem;
  color: #0b3c72;
  line-height: 1.4;
  font-weight: bold;
}

.report-body {
  display: flex;
  gap: 4%;
  align-items: flex-start;
}

.report-media {
  width: 40%;
  flex-shrink: 0;
}

.report-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

.report-details {
  width: 56%;
  flex-grow: 1;
}

/* ★文章エリアの行間と余白を少し引き締め */
.report-text {
  margin-bottom: 14px;
}

.report-text p {
  margin: 0 0 0.8em 0; /* 1.2em から 0.8em に微調整 */
  font-size: 1rem;
  line-height: 1.6;     /* 1.8 から 1.6 にして縦の伸びを抑制 */
  color: #333333;
}

.report-text p:last-child {
  margin-bottom: 0;
}

/* 料金・作業詳細テーブル */
.report-table {
  width: 100%;
  border-collapse: collapse;
  background: #f8fbff;
  border: 2px solid #2589d0;
  border-radius: 8px;
  overflow: hidden;
}

/* ★テーブルの上下の余白を詰める */
.report-table th,
.report-table td {
  padding: 0.1rem 1rem; /* 上下を 0.6rem から 0.4rem に縮小 */
  border-bottom: 1px solid #cfe2f3;
  font-size: 0.8rem;
}

.report-table th {
  width: 35%;
  background: #e8f4fd;
  color: #004d99;
  text-align: left;
  font-weight: 800;
}

.report-table td {
  background: #ffffff;
  color: #333333;
}

.report-table tr:last-child th,
.report-table tr:last-child td {
  border-bottom: none;
}

/* =================================================
   スマートフォン用レイアウト（767px以下）
================================================= */
@media (max-width: 767px) {
  .report-card {
    width: 100%;
    padding: 16px;
    margin-bottom: 20px;
  }

  .report-title {
    font-size: 1.2rem;
    margin-bottom: 14px;
  }

  .report-body {
    flex-direction: column;
    gap: 16px;
  }

  .report-media,
  .report-details {
    width: 100%;
  }

  .report-text p,
  .report-table th,
  .report-table td {
    font-size: 0.95rem;
  }

  /* スマホ時は文字が詰まりすぎないよう、程よい余白をキープ */
  .report-table th,
  .report-table td {
    padding: 0.6rem 0.75rem; 
  }
}

/* =================================================
   case examples
================================================= */
.case-box{
  width: min(94%, 980px);
  margin: 0 auto 28px;
  padding: 22px;
  background: #fff;
  border: 1px solid #d9e3f0;
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.case-layout{
  display: flex;
  gap: 26px;
  align-items: flex-start;
}

.case-left{
  width: 52%;
}

.case-right{
  width: 48%;
}

.case-image img{
  width: 100%;
  display: block;
  border-radius: 10px;
}

.case-text{
  margin-bottom: 16px;
}

.case-text h3{
  margin: 0 0 .8rem;
  font-size: 1.4rem;
  color: #0b3c72;
  line-height: 1.5;
}

.case-text p{
  margin: 0 0 1em;
  font-size: 1rem;
  line-height: 1.85;
}

.case-table{
  width: 100%;
  border-collapse: collapse;
  background: #f8fbff;
  border: 2px solid #2589d0;
  border-radius: 8px;
  overflow: hidden;
}

.case-table th,
.case-table td{
  padding: .5rem 1rem;
  border-bottom: 1px solid #cfe2f3;
  font-size: 1rem;
}

.case-table th{
  width: 40%;
  background: #e8f4fd;
  color: #004d99;
  text-align: left;
  font-weight: 800;
}

.case-table td{
  background: #fff;
  color: #333;
}

.case-table tr:last-child th,
.case-table tr:last-child td{
  border-bottom: none;
}

@media (max-width: 767px){
  .case-box{
    width: 100%;
    padding: 14px;
    margin-bottom: 20px;
  }

  .case-layout{
    flex-direction: column;
    gap: 14px;
  }

  .case-left,
  .case-right{
    width: 100%;
  }

  .case-text h3{
    font-size: 1.18rem;
  }

  .case-text p,
  .case-table th,
  .case-table td{
    font-size: .95rem;
  }

  .case-table th,
  .case-table td{
    padding: .75rem;
  }
}

/* メールフォーム */
/* ======================================= */
#formWrap {
	width:80%;
	margin:0 auto;
	color:#555;
	line-height:120%;
	font-size:90%;
}
table.formTable{
	width:100%;
	margin:0 auto;
	border-collapse:collapse;
}
table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:10px;
}
table.formTable th{
	width:30%;
	font-weight:normal;
	background:#efefef;
	text-align:left;
}

/* スマホ768px以下
------------------------------------------ */
@media screen and (max-width:768px) {
#formWrap {
	width:90%;
	margin:0 auto;
}
table.formTable th, table.formTable td {
	width:auto;
	display:block;
}
table.formTable th {
	margin-top:5px;
	border-bottom:0;
}
input[type="text"], textarea {
	width:80%;
	padding:5px;
	font-size:110%;
	display:block;
}
input[type="submit"], input[type="reset"], input[type="button"] {
	display:block;
	width:100%;
	height:40px;
}

}


/*bg-primary背景
---------------------------------------------------------------------------*/
.bg-primary {
	background: #2d4625 !important;
	color: #ffffff !important;
}

/*bg-secondary背景
---------------------------------------------------------------------------*/
.bg-secondary {
	background: #5b824a !important;
	color: #ffffff !important;
}

/*bg-light背景
---------------------------------------------------------------------------*/
.bg-light {
	background: #f4f7f2 !important;
	color: #333333 !important;
}

/*bg
---------------------------------------------------------------------------*/
.bg {
	padding-top: 5vw;
	padding-bottom: 5vw;
}
.bg + .bg {
	margin-top: calc(-1 * 5vw) !important;
}


/* =================================================
   pagetop
================================================= */
#pagetop{
  position: fixed;
  right: 14px;
  bottom: 14px;
  margin: 0;
  z-index: 60;
}

#pagetop a{
  display: flex;
  width: 58px;
  height: 58px;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: rgba(255,105,180,0.88);
  text-decoration: none;
  font-size: 24px;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

#pagetop a:hover{
  background: var(--accent);
}

@media (max-width:767px){
  #pagetop{
    right: 10px;
    bottom: 12px;
  }

  #pagetop a{
    width: 46px;
    height: 46px;
    font-size: 20px;
  }
}

/* Font装飾 */
/* ======================================= */
.red {color: #ff4500 !important;font-size: 100%;font-weight: bold;}	/* orangered */
.red_b {color: #ff4500 !important;font-size: 120%;font-weight: bold;}	/* orangered */
.orange_a {color: #ffa500 !important;font-size: 100%;font-weight: bold;}	/* orange */
.blue {color: #0000cd !important;font-size: 100%;font-weight: bold;}	/* mediumblue */
.aqua {color: #00ffff !important;font-size: 100%;font-weight: bold;}	/* cyan */

/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-check, .color-check a {color: #c02340 !important;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mt0 {margin-top: 0px !important;}
.mb0 {margin-bottom: 0px !important;}
.mb3rem {margin-bottom: 3rem !important;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: rgba(0,0,0,0.7); color: #fff; border-radius: 3px;margin: 5px 0; word-break: break-all;}
.look .color-check {color: yellow !important;}
.small {font-size: 0.75em;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.block {display: block !important;}
.marker {background: linear-gradient(transparent 70%, yellow 70%);}
.border-radius1 {border-radius: 30vw 0 30vw 0;}