@charset "UTF-8";

/* 固定ページ ==================================================================================================== */
/* ================================================== */

/* パンクズ調整 */
.page-services .breadcrumb-wrapper {
	margin: 0 4% 20px;
}

/* 投稿部分 ================================================== */
.page-services .page_body {
    width: 90%;
    height: auto;
    padding: 40px 4% 40px 4%;
    margin: 0 auto 100px auto;
    border: solid 2px var(--cg08);
    background-color: var(--cg10);
    border-radius: 10px;
    box-shadow: var(--page-shadow);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
}

/* リンク下線あり */
.page_body .ppage_body-contents a {
	color: var(--2cc);
	transition: color 0.3s ease;
}
.page_body .ppage_body-contents a:hover {
	color: var(--2cch);
	text-decoration: underline;
}


/* 全体 ================================================== */
/* リンク下線なし */
.page-services a {
	text-decoration: none;
}
.page-services a:hover {
	text-decoration: none;
}
.page-services .page_title-box .title_en {
	color: var(--5cc10)
}
.page-services .page_title {
    padding: 20px 0 0 0;
}
.page-services .page_title .page_title-box h1 {
	color: var(--5cc);
    font-size: clamp(1.80rem, 08vw + 1.5rem, 2.40rem);
    font-weight: 600;
	letter-spacing: .1em;
}

@media (max-width: 499px) {
.page-services .page_title {
    padding: 20px 0 15px 0;
}
}

/* 各主な取扱分野ページ ================================================== */
/* ================================================== */

/* ========= [CSS START] service-catch 基本と重なり制御 ========= */

/* 親：予約スペース付与のため */
.service-body { position: relative; }

/* 通常時（フロー） */
.service-catch {
  position: static;
  z-index: 1; /* 既定は低め - clip-path等に干渉しない */
  background: #fff;
  padding: 20px 0;
  box-shadow:
    0 3px 9px rgba(0,0,0,.06),
    0 -3px 9px rgba(0,0,0,.04);
	isolation: isolate;
}

/* 固定中（JSが付与） */
.service-catch.is-fixed {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--snap-top, 0px);
	top: calc(var(--snap-top, 0px) + var(--follow-up, 0px));
}

/* 終端で親内に貼り付け（JSが付与） */
.service-catch.is-stuck-end {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--abs-top, 0px);
}

/* 固定中だけ、親に元の占有分を確保（ガタつき防止） */
.service-body.sticky-reserve {
  padding-top: var(--reserve-h, 0px);
}


/* clip-path 側は “自分の積層を0に固定” しておく（前面に出過ぎない保険） */
.service-example {
  position: relative;
  z-index: 0;
}


/* ===== ノートPC：幅>=900px && 高さ<=700px のときだけ ===== */
@media (min-width: 900px) and (max-height: 700px) {
  .service-example::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12px;
    pointer-events: none;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;

    /* 最初は透明 */
    opacity: 0;

    /* アニメーション設定 */
    animation: fadeInShadow 0.4s ease forwards;
    animation-delay: 1s; /* ← 1秒後に開始 */
    box-shadow: inset 0 8px 9px -9px rgba(0,0,0,.15);
  }
}

@keyframes fadeInShadow {
  to {
    opacity: 1;
  }
}


.service-catch h2 {
  font-family: "BIZ UDPMincho", serif;
  font-weight: 400;
  font-size: clamp(1.2rem, 1.82vw + 1.0rem, 3.0rem);
  line-height: 1.6;
  letter-spacing: .02em;
  color: #222;
  text-align: center;
  margin: 0;
}

.service-catch h2 .line {
  display: block;
  opacity: 0;
  filter: blur(10px);
}

.service-catch h2 .line1 {
  transform: translateY(-70px) scale(2.0); /* 上から */
  animation: lineUp 0.5s ease-out forwards;
	  animation-delay: 1.3s;
}

.service-catch h2 .line2 {
  transform: translateY(70px) scale(2.0);  /* 下から */
  animation: lineDown 0.5s ease-out forwards;
  animation-delay: 1.8s; /* ちょっと遅れて */
}

@keyframes lineUp {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(-60px) scale(2.0);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

@keyframes lineDown {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(60px) scale(2.0);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

/*Safariだけ、+方向の translateY × blur （2行目：line2）のテキストが最後滲んで終わるのをなくすため*/
/* Safari系だけ a.k.a. WebKit 系に blur を効かせない */
@supports (-webkit-hyphens: none) {
.service-catch h2 .line,
.service-catch h2 .line2
	{ filter: none !important; }
}


/* 解除時は通常フローに戻す jsにて sticky 解除 */
.service-catch.is-released {
  position: static;
  top: auto;
}

/*  お困りではないですか ---------- */
/* 下に流れていく中身は後面へ */
.service-example {
		position: relative;
	will-change: clip-path, opacity;
	z-index: 0;
  width: 80%;
  margin: 0 auto;
  padding: 40px;
  border: 1px solid var(--cg08);
	border-top: none;
  border-radius: 0 0 16px 16px;
  background: #f9fafb;
  box-shadow: 0 3px 9px rgba(0,0,0,.02);
	text-align: center;
}
.service-example .eyebrow {
	display: inline-block;
  margin:  0 30px 40px;
  padding: 5px 20px 3px;
  color: var(--5cc);
  font-weight: 600;
  font-size: clamp(1.25rem, 0.36vw + 1.11rem, 1.55rem);
	text-align: center;
	line-height: 1.5;
	border-bottom: double 3px var(--5cc);
}
.service-example .example-list {
  list-style: none;
  padding: 0 0 0 30px;
  margin: 0 0 20px;
  display: grid;
  gap: 12px;
}
.service-example .example-list li {
  position: relative;
  font-size: clamp(1.10rem, 0.24vw + 1.01rem, 1.30rem);
  line-height: 1.8;
  color: var(--5cc);
	text-align: left;
	font-weight: 500;
  background: #ffffff;
  border: 1px solid var(--5cc30);
  border-radius: 10px;
  padding: 12px 16px 12px 2em;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.service-example .example-list li::before {
  content: "\f06a";                           
  font-family: "Font Awesome 6 Free";         
  font-weight: 900;                           
  position: absolute;
  left: -28px;
  top: 50%;
  transform: translateY(-50%) rotate(-10deg) scale(1);  /* 最終は -10° & 等倍 */
  transform-origin: 50% 50%;
  font-size: 2.2em;
  color: var(--2cc);
  text-shadow: 2px 2px 6px rgba(0,0,0,.08);
  will-change: transform, opacity;
}

/* .service-example が fadeDown-1s で入場したときだけ発火 */
.service-example.fadeDown-1s .example-list li::before {
  animation-name: scaleTiltInIcon;
  animation-duration: 0.6s;
  animation-delay: 2.0s; /* タイミング調整 */
  animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
  animation-fill-mode: both;
}

/* ステップ遅延（0.2s ずつ） */
.service-example.fadeDown-1s .example-list li:nth-child(2)::before { animation-delay: 2.2s; }
.service-example.fadeDown-1s .example-list li:nth-child(3)::before { animation-delay: 2.4s; }
.service-example.fadeDown-1s .example-list li:nth-child(4)::before { animation-delay: 2.6s; }
.service-example.fadeDown-1s .example-list li:nth-child(5)::before { animation-delay: 2.8s; }
.service-example.fadeDown-1s .example-list li:nth-child(6)::before { animation-delay: 3.0s; }
.service-example.fadeDown-1s .example-list li:nth-child(7)::before { animation-delay: 3.2s; }
.service-example.fadeDown-1s .example-list li:nth-child(8)::before { animation-delay: 3.4s; }
.service-example.fadeDown-1s .example-list li:nth-child(9)::before { animation-delay: 3.6s; }
.service-example.fadeDown-1s .example-list li:nth-child(10)::before { animation-delay: 3.8s; }

/* 拡大 → -10°傾きに収束 */
@keyframes scaleTiltInIcon {
  from {
    transform: translateY(-50%) rotate(-45deg) scale(2.5); /* 最初: 傾きはあるけど1.5倍 */
    opacity: 0;
  }
  to {
    transform: translateY(-50%) rotate(-10deg) scale(1);   /* 最終: -10° & 等倍 */
    opacity: 1;
  }
}

/* li 項目を区切る場合、区切る直後のli <li class="example-divider"> */
.service-example .example-list li.example-divider {
  position: relative;
  margin-top: 50px; /* 線と本文の間隔 */
}

/* デフォルトは線だけ */
.service-example .example-list li.example-divider::after {
  content: "";
  position: absolute;
  top: -30px;     /* liの直前に配置 */
  left: 0;
  width: 100%;
  border-top: 2px dashed var(--5cc30);
  z-index: 0;
}

/* ラベルを表示させる場合は <li class="example-divider"> 内に <span class="divider-label">  */
.example-divider .divider-label {
  position: absolute;
	z-index: 1;
  top: -44px;
  left: 45%;
  transform: translateX(-50%);
  padding: 5px 20px;
  font-size: clamp(1.1rem, 1vw + .78rem, 1.2rem);
  font-weight: 600;
	line-height: 1;
	letter-spacing: .1em;
  color: var(--5cc);
  background: #f9fafb;
  border: 1px solid var(--5cc30);
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  white-space: nowrap;
}


/* =========================
   799px 以下のレスポンシブ
   ========================= */
@media (max-width: 799px) {
  /* ボックスはそのまま小さく・余白控えめに */
  .service-example {
    width: 94%;
    padding: 24px 20px;
    margin: 0 auto 40px;
  }

  /* 見出しは少し小さく、下の余白も軽く */
  .service-example .eyebrow {
    margin: 0 0 24px;
    padding: 4px 14px 2px;
    border-bottom-width: 2px;
  }

  /* リストの間隔と左右余白を調整 */
  .service-example .example-list {
    padding: 0 0 0 15px;        /* 左のインデントを詰める */
    margin: 0 0 16px;
    gap: 10px;
  }

  /* 行間＆内側余白をモバイル寄せに微調整 */
  .service-example .example-list li {
    line-height: 1.5;
    padding: 12px 12px 12px 1.2em;   /* アイコン分の左インデント */
    border-radius: 8px;              /* 角丸はやや控えめに */
  }

  /* アイコンは内側に入れてはみ出し防止（左のマイナス位置をやめる） */
  .service-example .example-list li::before {
    left: -25px; 
  }
}
	


/*  強調コピー ---------- */
.emphasize {
  position: relative;
  overflow: hidden; /* 擬似要素がはみ出さないように */
  width: 100%;
  margin: 100px auto 80px;
  padding: 25px 0;
}

/* 擬似要素で左→右へ背景を走らせる */
.emphasize::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;                /* 最初は幅ゼロ */
  height: 100%;
  background-color: var(--2cc);
  z-index: 0;
  transition: width 1s ease-out;
}

.emphasize.active::before {
  width: 100%;              /* 左から右に伸びる */
}

.emphasize p {
  position: relative;        /* 擬似要素の上に載せる */
  z-index: 1;
  color: #fff;
  font-weight: 500;
  font-size: clamp(1.20rem, 0.36vw + 1.11rem, 1.55rem);
  line-height: 1.6;
  text-align: center;
	padding: 0 2%;
}



/* ---------- Service Blocks (3 columns on wide) ---------- */
/* サービス詳細ブロック ---------- */
.service-block {
  width: 100%;
  margin: 0 auto 80px;
  padding: 0;
	margin: 80px 0 0 0;
}

/* 横並び：画像1/4、テキスト3/4 */
.service-point {
  display: flex;
  gap: 24px;
  align-items: stretch;
  margin-bottom: 60px;
}

.service-point-img {
  flex: 1;              /* 1/4 */
  max-width: 25%;       /* 保険として最大幅を固定 */
	padding: 0 0 0 2%;
	display: flex;         /* ← flex化 */
  align-items: center;   /* ← 上下中央寄せ */
}
.service-point:nth-child(even) .service-point-img {
  flex: 1;
  max-width: 25%;
  padding: 0 2% 0 0;   /* ← 左右の padding 反転 */
  display: flex;
  align-items: center; /* 上下中央寄せ */
}

.service-point-img img {
  display: block;
  width: 100%;
  height: auto;
}

.service-point-text {
  flex: 3;              /* 3/4 */
	border: solid 1px var(--cg08);
	border-radius: 40px 0 0 40px;
	padding: 50px 10% 40px 50px;
	background-color: var(--2cc3);
	box-shadow: 0 3px 15px rgba(0,0,0,.03);
}

.service-point:nth-child(even) .service-point-text {
  flex: 3; /* 3/4 */
  border-radius: 0 40px 40px 0;  /* ← 右側を丸く */
  padding: 50px 50px 40px 10%;  /* ← 左右のpaddingを反転 */
}

/* 見出し・本文 */
.service-point-text h3 {
	color: var(--2cc);
	  font-weight: 500;
  font-size: clamp(1.40rem, 0.36vw + 1.31rem, 1.70rem);
  margin: 0 0 25px;
}
.service-point-text p {
	  color: var(--bcg);
  font-size: clamp(1.00rem, 0.12vw + 0.90rem, 1.10rem);
  line-height: 1.8;
	margin: 0 0 25px 0;
}
.emphasize-text {
	color: var(--5cc);
	font-size: 1.05em;
	font-weight: 600;
}


/* 強調テキスト本体：行ごとに分割されても背面に線を置けるようにする */
/* 行ごと下線（擬似要素は使わない） */
.emphasize-line{
  position: relative;
  display: inline;             /* ← inline に戻す：justify の副作用を出さない */
  padding: 0 0 .15em 0;        /* 左右パディングは 0（座標ずれ防止） */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background: none;            /* 旧グラデ塗りを無効化 */
  z-index: 0;
}

/* JS で差し込む各行の帯 */
.emphasize-line__line{
  position: absolute;
  left: 0;
  height: 0.5em;               /* JS で px に上書きされる */
  background: var(--cc30);
  border-radius: 0.3em;
  pointer-events: none;
  z-index: -1;                 /* 文字の下へ */
  opacity: .95;

  transform: scaleX(0);        /* 左→右へ伸びる */
  transform-origin: left center;
  transition: transform 1.5s cubic-bezier(.25,1,.5,1);
}

/* 右→左から伸ばしたい要素に付ける補助クラス（必要なら） */
.emphasize-line__line.is-from-right {
  transform-origin: right center;
}




/* スマホ：縦積みにする */
@media (max-width: 699px) {
	.emphasize {
    margin: 100px auto 60px;
}
.service-block {
    margin: 20px 0 0 0;
}
  .service-point {
	  position: relative;
	  z-index: 0;
    flex-direction: column;
    gap: 0;
    align-items: flex-end;
    margin-bottom: 10px;
}
	.service-point:nth-child(even) {
flex-direction: column-reverse; /* 上下入れ替え */
}
	.service-point-img {
			  	  position: relative;
	  z-index: 10;
		max-width: 35%;
    padding: 0 4% 0 0;
		margin-bottom: -20px;
    align-items: center;
}
	.service-point:nth-child(even) .service-point-img {
			  	  position: relative;
	  z-index: 10;
		max-width: 35%;
    padding: 0 4% 0 0;
		margin-bottom: -25px;
}
  .service-point-text {
	  	  position: relative;
	  z-index: 0;
    flex: none;
    max-width: 94%;
	  margin: 0 auto;
	  padding: max(6%, 25px) 4% 4%;
	  border-radius: 20px;
  }
	.service-point:nth-child(even) .service-point-text {
	  padding: max(6%, 25px) 4% 4%;
	  border-radius: 20px;
}
	

}
	




/* ---------- Fee Block ---------- */
.service-fee {
  width: 100%;
	max-width: var(--mw2lpx);
  margin: 0 auto 100px;
  padding: 40px;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  background: var(--5cc3);
}
@media (max-width: 1199px) {
	.service-fee {
  border-radius: 0;
}
}
.service-fee h4 {
  margin: 0 0 25px;
  font-size: clamp(1.05rem, 0.35vw + 0.95rem, 1.40rem);
  font-weight: 600;
  color: var(--5cc);
	letter-spacing: .05em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.service-fee h4::before {
  content: "";
  width: 8px;
  height: clamp(1.40rem, 0.97vw + 1.02rem, 2.20rem);
  border-radius: 4px;
  background: var(--5cc);
}


@media (max-width: 499px) {
.service-fee {
    margin: 40px auto 100px;
    padding: 30px 25px 25px;
}
}


/* ---------- Fee Table ---------- */
.fee-table {
  width: 100%;
  border-collapse: collapse;
	color: var(--bcg);
  border-radius: 8px;
  overflow: hidden;
	box-shadow: 0 3px 12px rgba(0,0,0,.06);
}
.fee-table thead th {
  background: var(--5cc80);
  color: #fff;
	font-size: 1.1em;
  text-align: left;
	letter-spacing: .2em;
  padding: 15px 20px;
  font-weight: 600;
  border-bottom: 1px solid #e5e7eb;
}
.fee-table tbody tr:not(.table_note) th[scope="row"],
.fee-table tbody tr:not(.table_note) td {
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  padding: 20px;
	text-align: left;
  vertical-align: middle;
  line-height: 1.8;
	font-weight: 500;
}
.fee-table tbody tr:nth-child(even):not(.table_note) td,
.fee-table tbody tr:nth-child(even):not(.table_note) th[scope="row"] {
  background: var(--cg10);
}
.fee-table .num .fee-main {
  font-weight: 500;
}
.fee-table .table_note .table_note-text1 {
  color: var(--bcg6);
  font-size: 0.9em;
	letter-spacing: .1em;
	text-align: right;
  padding: 14px 16px;
}
.table_note-text2 {
  margin: 0;
  padding: 0;
  font-size: 1em;
  color: var(--5cc);
  text-align: left;
  list-style: none; /* デフォルトの●を消す */
}

.table_note-text2 li {
  position: relative;
  padding-left: 1.1em; /* ◎ぶんの余白を確保 */
  margin: 0 0 0.2em;
	line-height: 1.4;
}

.table_note-text2 li::before {
  content: "◎";          /* 記号を指定 */
  position: absolute;
  left: 0; top: 0;
  color: var(--5cc);      /* 色はテキストと合わせる */
  font-weight: bold;      /* 少し強調してもOK */
}

/* ---------- Fee Table: Responsive (stacked cards) ---------- */
@media (max-width: 699px) {
  .fee-table thead { display: none; }
  .fee-table,
  .fee-table tbody,
  .fee-table tr,
  .fee-table td,
  .fee-table th[scope="row"] {
    display: block;
    width: 100%;
  }
	.fee-table {
		overflow: visible;
		border-radius: 4px;
		box-shadow: none;
	}
  .fee-table tbody tr:not(.table_note) {
    margin-bottom: 12px;
    border: 1px solid var(5cc70);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0,0,0,.06);
  }
.fee-table tbody:not(.table_note) tr th[scope="row"],
.fee-table tbody:not(.table_note) tr td {
    position: relative;
    padding-left: 40%;
    border: none;
    border-bottom: 1px solid #e5e7eb;
  }
.fee-table tbody:not(.table_note) tr th[scope="row"]::before,
.fee-table tbody:not(.table_note) tr td::before {
    content: attr(data-label);
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 36%;
    padding: 16px 15px;
    background: var(--5cc80);
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
  }
  .fee-table tbody tr:not(.table_note) :last-child {
    border-bottom: none;
  }
	
	  /* --- 注釈行はフル幅1列 --- */
  .fee-table .table_note,
  .fee-table .table_note tr,
  .fee-table .table_note td {
    display: block;
    width: 100%;
    border: none;
  }
}


/* ▼ 左1列ぶち抜き＋右2列上下（今回専用） */
.fee-table.fee-table--split tbody tr:not(.table_note) th.rowhead[scope="row"] {
  width: 34%;
	color: #fff;
	font-size: 1.15em;
  font-weight: 600;
  letter-spacing: .05em;
  border-right: 1px solid #e5e7eb;
	background-color: var(--5cc70);
}

.fee-table.fee-table--split .colhead {
  background: var(--5cc80);
  color: #fff;
  font-weight: 700;
  text-align: left;
  letter-spacing: .15em;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
}


/* =========================
   fee-table--split：スマホ修正（～699px）
   既存CSSは変更せず、この上書きだけ追加
   ========================= */
@media (max-width: 699px) {
    .fee-table.fee-table--split tbody tr:not(.table_note) {
        margin-bottom: 0;
		border-radius: 8px 8px 0 0;
    }

  /* 1) 「奇数行＝上段（rowhead＋ミニ見出し）」を定義 */
  /* ミニ見出し（着手金/報酬のcolhead）は隠す */
  .fee-table.fee-table--split tr:nth-child(odd) .colhead { display: none; }

  /* 左の大セル rowhead はカードの見出しバー化（既存のpadding-left:40%等を無効化） */
  .fee-table.fee-table--split tr:nth-child(odd) .rowhead {
    background: var(--5cc80);
    color: #fff;
    font-weight: 700;
    padding: 14px 16px;         /* ← 左帯化なので通常の余白に戻す */
    line-height: 1.6;
    border: 1px solid var(--5cc70);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    display: block;
    width: 100%;
  }

  /* 2) 「偶数行＝下段（本文行）」をカード本体として扱う */
  .fee-table.fee-table--split tr:nth-child(odd) + tr {
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 3px 12px rgba(0,0,0,.06);
    overflow: hidden;
    background: #fff;
    margin: 0 0 14px;
  }

  /* 本文セルは既存の“ラベル帯（data-label）＋内容”形式を利用 */
  .fee-table.fee-table--split tr:nth-child(odd) + tr td {
    position: relative;
    border: none;
    border-top: 1px solid #e5e7eb;
    padding: 14px 16px 14px 42%;  /* 左にラベル帯のぶん余白 */
    background: #fff;
  }
  .fee-table.fee-table--split tr:nth-child(odd) + tr td:first-child {
    border-top: none;             /* 最初のセルは上線なし */
  }

  .fee-table.fee-table--split tr:nth-child(odd) + tr td::before {
    content: attr(data-label);
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 38%;
    padding: 12px 10px;
    background: var(--cg10);
    color: var(--bcg);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
	
}

/* =========================
   fee-table--split：スマホ不具合修正（～699px）
   ========================= */
@media (max-width: 699px) {
	.fee-table.fee-table--split tbody tr:not(.table_note) th.rowhead[scope="row"] {
		width: 100%;
	}
  /* 上段：rowhead から共通の ::before ラベル帯を無効化（重なり防止） */
  .fee-table.fee-table--split tr:nth-child(odd) .rowhead::before {
    content: none !important;
    display: none !important;
  }
  /* rowhead をカード見出しバーとして再定義（既存の padding-left:40% を打ち消し） */
  .fee-table.fee-table--split tr:nth-child(odd) .rowhead {
    background: var(--5cc80);
    color: #fff;
    font-weight: 700;
    padding: 14px 16px;           /* ← 左帯ではなく普通の余白に戻す */
    line-height: 1.6;
    border: 1px solid var(--5cc70);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    display: block;
    width: 100%;
  }

  /* 下段：本文行をカード本体化（奇数行の直後だけに適用） */
  .fee-table.fee-table--split tr:nth-child(odd) + tr {
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 3px 12px rgba(0,0,0,.06);
    overflow: hidden;
    background: #fff;
    margin: 0 0 14px;
  }

  /* 本文セル：ラベル帯を “青地＋白抜き” に上書き */
  .fee-table.fee-table--split tr:nth-child(odd) + tr td {
    position: relative;
    border: none;
    border-top: 1px solid #e5e7eb;
    padding: 14px 16px 14px 42%;
    background: #fff;
  }
  .fee-table.fee-table--split tr:nth-child(odd) + tr td:first-child {
    border-top: none;
	  border-top: 1px solid #e5e7eb;
  }
  .fee-table.fee-table--split tr:nth-child(odd) + tr td::before {
    content: attr(data-label);
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 34%;
    padding: 12px 10px;
    background: var(--5cc80);   /* ← 青に */
    color: #fff;                /* ← 白抜き */
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  /* ミニ見出し（colhead）はスマホでは不要なので非表示 */
  .fee-table.fee-table--split tr:nth-child(odd) .colhead { display: none; }
}


/* ---------- Links & Focus ---------- */
.service-body a {
  color: #2f6fea;
  text-decoration: none;
  border-bottom: 1px solid rgba(47,111,234,.35);
  transition: border-color .2s ease, color .2s ease;
}
.service-body a:hover,
.service-body a:focus-visible {
  color: #1d4ed8;
  border-bottom-color: rgba(29,78,216,.55);
  outline: none;
}
.service-body :where(a, button, [role="button"], input, select, textarea):focus-visible {
  outline: 3px solid rgba(47,111,234,.45);
  outline-offset: 3px;
  border-radius: 8px;
}


/* 法律相談ノート 分野ごとの一覧ページリンクセクション ================================================== */
.service-body .case-link {
  text-align: center;
  margin: 60px 0 80px; /* 上下余白調整 */
}

.service-body .case-button {
  display: inline-block;
  padding: 1em 2em;
  font-size: clamp(1.10rem, 0.55vw + 0.96rem, 1.55rem);
  font-weight: 500;
	letter-spacing: .02em;
	line-height: 1.4;
  color: #fff;
  background: var(--3cc);
  border-radius: 9999px;
	border: solid 1px var(--3cc70);
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .1);
}

.service-body .case-button:hover,
.service-body .case-button:focus {
	color: #fff;
  background: var(--3cch);
	border: solid 1px var(--3cc50);
  transform: translateY(-3px) scale(0.97);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

@media (max-width: 499px) {
	.service-body .case-button {
		padding: 1em 1.2em;
		margin: 0 1em;
	}
}

/* ================================================== */



/* 取扱分野一覧ページ ================================================== */
/* ================================================== */
/* =========================================================
   Service List 全体デザイン（横並び＋押し込み＋全体イージング）
   - 599px以下: 1列 / 600px以上: 2列
   - 各カード内は常に「画像＋テキスト」の横並び
   - 動きはすべて “少しふわっと” なイージング
   ========================================================= */

/* リスト */
.service-box-list {
  list-style: none;
	width: 94%;
	max-width: var(--mwlpx);
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: stretch;
}

@media (min-width: 800px) {
  .service-box-list {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}

.service-box {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* カード全体リンク（←ここが要） */
.service-box-link {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  text-decoration: none;
  color: #111827;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  height: 100%;

  /* 初期は少し浮く */
  box-shadow: 0 4px 10px rgba(0, 0, 0, .06);

  /* ★根本対策：初期transformを数値で固定 */
  transform: translateY(0) scale(1);

  /* ★イージングを常時指定 */
  will-change: transform, box-shadow, border-color, background-color, color;
  transition:
    transform .3s ease-out,
    box-shadow .3s ease-out,
    border-color .3s ease-out,
    background-color .3s ease-out,
    color .3s ease-out;
}

/* 下線は絶対出さない（子要素も含めて） */
.service-box-link,
.service-box-link *,
.service-box-link:hover,
.service-box-link:focus,
.service-box-link:active,
.service-box-link:focus-visible {
  text-decoration: none;
}

/* hover/フォーカス：ゆっくり沈む */
.service-box-link:hover,
.service-box-link:focus-visible {
  transform: translateY(2px) scale(.996);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  border-color: #d1d5db;
}

.service-box-link:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(59, 130, 246, .35),
    0 1px 3px rgba(0, 0, 0, .08);
  border-color: #93c5fd;
}

/* active：短尺でカチッ */
.service-box-link:active {
  transform: translateY(3px) scale(.992);
  box-shadow: 0 .5px 2px rgba(0, 0, 0, .10);
  border-color: #cbd5e1;
  transition:
    transform .18s ease-in,
    box-shadow .18s ease-in,
    border-color .18s ease-in;
}

/* 画像 40%：テキスト 60% */
.service-box-img {
  flex: 0 0 40%;
  position: relative;
  background: #f5f5f5;
  overflow: hidden;
  border-right: 1px solid #e5e7eb;
  display: flex;
}

.service-box-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;

  transform: scale(1.05);
  will-change: transform;
  transition: transform 0.3s ease-out;
}

.service-box-link:hover .service-box-img img {
  transform: scale(1.0);
}

.service-box-link:active .service-box-img img {
  transform: scale(.95);
  transition: transform .18s ease-in;
}

/* テキスト */
.service-box-text {
  flex: 1 1 60%;
  padding: 15px 18px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;   /* 擬似要素の基準 */
  overflow: hidden;
  background: #ffffff;  /* デフォルト背景 */
  z-index: 0;
}

/* 背景アニメーション */
.service-box-text::before {
  content: "";
  position: absolute;
  top: -100%;       /* 初期位置は上 */
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--5cc); /* ホバー時の背景色（お好みで変更） */
  z-index: 0;       /* テキストと同じ階層に */
  transition: top .3s ease-out;
}

/* テキスト要素を前に出す */
.service-box-text > * {
  position: relative;
  z-index: 1;       /* 文字は常に前面 */
}

/* hoverで背景が降りる */
.service-box-link:hover .service-box-text::before,
.service-box-link:focus-visible .service-box-text::before {
  top: 0;
}

.service-box-text h2 {
  font-weight: 600;
  line-height: 1;
  font-size: clamp(1.40rem, 0.48vw + 1.21rem, 1.80rem);
  color: var(--5cc);
	letter-spacing: .1em;
	margin:10px 0 15px;
	  transition: color .3s ease-out;
}

.service-box-text h3 {
  margin: 0 0 15px;
  font-weight: 500;
  line-height: 1.4;
  font-size: clamp(1.05rem, 0.24vw + 0.96rem, 1.25rem);
  color: var(--2cc);
	border-top: solid 1px var(--cg06);
	border-bottom: solid 1px var(--cg06);
	padding: 5px 0 3px;
transition: color .3s ease-out,
            border-color .3s ease-out;
}

.service-box-text p {
  margin: 0;
  line-height: 1.6;
  font-size: clamp(0.85rem, 0.24vw + 0.76rem, 1.05rem);
  color: var(--bcg6);
	transition: color .3s ease-out;
}
.service-box-link:hover .service-box-text h2,
.service-box-link:hover .service-box-text p {
	color: #fff;
}
.service-box-link:hover .service-box-text h3{
	color: var(--ch3);
	border-color: var(--ch3);
}


/* 投稿一覧の各分野が順番位表示されるアニメーション  ここから ================================ */
/* <ul class="service-box-list" role="list"> に fadeIn-seq を付与 <ul class="service-box-list  fadeIn-seq" role="list"> */
/* ================================
   1) 基本：常に見える（デフォルト）
   ================================= */
.service-box-list .service-box {
  opacity: 1;
  transform: none;
}

/* ================================
   2) 出現アニメーション定義
   ================================= */
@keyframes fadeUpInBox {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ================================
   3) 親に .fadeIn-seq が付いたときだけ発火
   （初期は非表示＋下から持ち上げ）
   ================================= */
.service-box-list.fadeIn-seq .service-box {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUpInBox 0.8s ease-out forwards;
}

/* ================================
   4) ディレイ（順番に表示）
   ================================= */
.service-box-list.fadeIn-seq .service-box:nth-child(1)  { animation-delay: 0.3s; }
.service-box-list.fadeIn-seq .service-box:nth-child(2)  { animation-delay: 0.6s; }
.service-box-list.fadeIn-seq .service-box:nth-child(3)  { animation-delay: 0.9s; }
.service-box-list.fadeIn-seq .service-box:nth-child(4)  { animation-delay: 1.2s; }
.service-box-list.fadeIn-seq .service-box:nth-child(5)  { animation-delay: 1.5s; }
.service-box-list.fadeIn-seq .service-box:nth-child(6)  { animation-delay: 1.8s; }
.service-box-list.fadeIn-seq .service-box:nth-child(7)  { animation-delay: 2.1s; }
.service-box-list.fadeIn-seq .service-box:nth-child(8)  { animation-delay: 2.4s; }
.service-box-list.fadeIn-seq .service-box:nth-child(9)  { animation-delay: 2.7s; }
.service-box-list.fadeIn-seq .service-box:nth-child(10) { animation-delay: 3.0s; }

/* ================================
   5) アニメ無効環境の配慮（念のため）
   ================================= */
@media (prefers-reduced-motion: reduce) {
  .service-box-list.fadeIn-seq .service-box {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
/* ここまで ================================================================ */




/* 下部メッセージ */
.service-bottom-message {
	width: 100%;
  margin: 100px 0 100px;
  padding: 0;
  transition:
}

/* 行アニメーション用の基本 */
.service-bottom-message p {
	  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  margin: 0;
  text-align: center;
  line-height: 2.0;
  letter-spacing: .1em;
  font-size: clamp(1.50rem, 1.33vw + 1.13rem, 2.60rem);
  color: var(--bcg);
}

.service-bottom-message p .line {
  display: block;
  opacity: 0;
  filter: blur(30px);
  transform: translateY(-30px);
	letter-spacing: .1em;
}

/* inview が付いたらアニメ開始 */
.service-bottom-message.inview p .line {
  animation: textBlurIn 1.5s ease-out forwards;
}

.service-bottom-message.inview p .line:nth-child(1) { animation-delay: 0.3s; }
.service-bottom-message.inview p .line:nth-child(2) { animation-delay: 0.9s; }
.service-bottom-message.inview p .line:nth-child(3) { animation-delay: 1.5s; }

@keyframes textBlurIn {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@media (max-width: 799px) {
.service-box-img {
    flex: 0 0 25%;
	max-height: 150px;
}
.service-box-text {
	justify-content: center;
}
.service-box-text h3 {
    font-size: 1.2rem;
	padding: 8px 0 5px;
}
}/* max-width: 799px */

@media (max-width: 499px) {
.service-box-img {
    flex: 0 0 35%;
}
}/* max-width: 499px */