@charset "UTF-8";

/* トップページ ==================================================================================================== */
/* トップイントロ セクション ================================================== */
/* ================================================== */


/* スライダー ============================== */
.top_intro {
  position: relative;
  width: 100%;
  height: 100vh;          /* 元のまま（天地の余白は作らない） */
  overflow: hidden;       /* 既存のまま */
}

.top_slider {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  overflow: hidden;       /* ← 追加：拡大ぶんをここで確実に裁断 */
  contain: paint;         /* ← 追加：描画のはみ出しを外に影響させない（対応ブラウザで有効） */
}

.top_slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1);
  transition: opacity 1s ease, transform 10s ease;

  /* ← 追加：合成の端数で横スクロールを誘発しないための安定化 */
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: opacity, transform;
}

.top_slide.active {
  opacity: 1;
  transform: scale(1.08);  /* ズーム演出は維持 */
}

.overlay-content {
  position: relative;
  z-index: 1;
  color: #fff;
  text-align: center;
  padding: 2em;
}

.catchcopy {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .catchcopy {
    font-size: 1.8rem;
  }
}


/* ロゴマーク 羽ばたき ============================== */
.bird-logo {
  position: absolute;
  top: 25px;
  left: 20px;
  width: 150px;
  height: 150px;
  z-index: 10;
  opacity: 0;
  transform: translate(-50%, -50%) scale(2.0) rotate(20deg);
  transform-origin: center center;
}

/* .start 発火はfront-page.php 下部の script ============================== */
.bird-logo.start {
  animation:
    fadeZoomOutMoveIn 1.0s ease-out forwards,
    sway 8s ease-in-out infinite 1.0s; /* swayは1.2秒後に開始 */
}

/* ズームアウト＋左上から中央へ移動＋フェードイン */
@keyframes fadeZoomOutMoveIn {
  0% {
    opacity: 0;
    transform: translate(-100%, -20%) scale(2.2) rotate(20deg);
  }
  30% {
    transform: translate(-30%, -12%) rotate(15deg);
  }
  60% {
    transform: translate(-15%, -15%) rotate(20deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(20deg);
  }
}

/* ゆらゆら回転アニメーション（scale, translateは触らない） */
@keyframes sway {
  0%   { transform: translate(0, 0) rotate(20deg); }
  25%  { transform: translate(3%, 0) rotate(25deg); }
  50%  { transform: translate(-6%, -3%) rotate(40deg); }
  75%  { transform: translate(6%, 0) rotate(45deg); }
  100% { transform: translate(0, 0) rotate(20deg); }
}

@media (max-width: 499px) {
	.bird-logo {
  width: 120px;
  height: auto;
}
}

/* フロントページのみメニュー ============================== */
.frontpage-menu {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
	padding: 30px 30px 0px 8%;
	background: linear-gradient(to left, rgba(8,44,72,0.25) 75%, rgba(0,0,0,0));
  /* フェードインの初期状態 */
  opacity: 0;
  transform: translateY(-15px);
  animation: fadeInMenu 1s ease-out 2s forwards;
}

@keyframes fadeInMenu {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.frontpage-contact {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 0 5px 15px 5px;
border-bottom: solid 1px  #fff;
}

.frontpage-contact .phone {
	color: #fff;
  font-size: 1.8rem;
	letter-spacing: .05em;
  text-decoration: none;
  font-weight: 300;
  text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4);
}
.frontpage-contact .phone .tel{
  font-size: 1.4rem;
}

.frontpage-contact .btn-contact {
  display: inline-block;
  padding: 0.5em 1.0em;
  color: #fff;
  font-size: 1.2rem;
  letter-spacing: .1rem;
  text-decoration: none;
  background-color: rgba(0,0,0,0.20);
  border: solid 1px #fff;
  border-radius: 4px;
  font-weight: 400;
  text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.6);
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.frontpage-contact .btn-contact:hover {
background-color: var(--cch);
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.frontpage-link {
padding: 2px 0 0 0;
}
.frontpage-link ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  gap: 6px;
}

.frontpage-link li {
  margin: 0;
}

.frontpage-link a {
  position: relative;
  display: inline-block;
  color: #fff;
  font-size: 1.0rem;
  letter-spacing: .05em;
  font-weight: 400;
  text-decoration: none;
  border-radius: 4px 4px 0 0;
  padding: 0.5em 0.5em 0.8em 0.5em;
  overflow: visible; /* ← 念のため明示 */
}

.frontpage-link a:hover {
color: var(--5cc);
font-weight: 500;
background-color: rgba(255,255,255,0.9);
transition: color 0.3s ease, background-color 0.6s ease;
}
.frontpage-link a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 4px;
  background-color: var(--5cc);
  transition: width 0.3s ease;
}

/* ホバー時に下線が伸びる */
.frontpage-link a:hover::after {
  width: 100%;
}


@media (max-width: 799px) {
/* ▼799px以下：アイコンだけにする時の“中央寄せ・ズレ防止” */
  .frontpage-contact .menu-reserve2,
  .frontpage-contact .menu-access2{
    display: inline-flex;        /* flexで中央寄せ */
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 4px;
    font-size: 0;                /* テキストを消す */
    letter-spacing: 0;           /* ← 既存の .btn-contact の字間を無効化 */
    text-indent: 0;              /* 念のためリセット */
    text-align: center;          /* 念のため */
  }

  .frontpage-contact .menu-reserve2::before,
  .frontpage-contact .menu-access2::before{
    display: block;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: 0;           /* 疑似要素側も字間0 */
    width: 1em;                  /* 1文字分の箱を作る */
    text-align: center;          /* その箱の中で中央 */
    -webkit-font-smoothing: antialiased;
  }
	/* アイコン表示（Font Awesome） */
  .frontpage-contact .menu-reserve2::before { content: "\f073"; } /* calendar */
  .frontpage-contact .menu-access2::before { content: "\f3c5"; }  /* map-marker */

.frontpage-link ul {
  gap: 2px;
}
.frontpage-link a {
  font-size: 0.9rem;
  letter-spacing: .02;
  padding: 0.3em 0.2em 0.6em 0.2em;
}	
	
}/* max-width: 799px */

@media (max-width: 599px) {
  /* ▼電話番号も予約・アクセスと同じデザインでアイコン化 */
  .frontpage-contact .phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 4px;
    font-size: 0;                /* テキスト消す */
    letter-spacing: 0;
    text-indent: 0;
    text-align: center;
    border: solid 1px #fff;      /* ← 白枠線 */
    background-color: rgba(0,0,0,0.20);
    text-shadow: 1px 1px 8px rgba(0,0,0,0.6);
    box-shadow: 1px 1px 6px rgba(0,0,0,0.3);
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  /* アイコン化（Font Awesome） */
  .frontpage-contact .phone::before {
    content: "\f095"; /* 電話アイコン */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.6rem;
    line-height: 1;
    width: 1em;
    text-align: center;
    color: #fff;
    -webkit-font-smoothing: antialiased;
  }

  /* Tel. span を隠す */
  .frontpage-contact .phone .tel {
    display: none;
  }

  /* ホバー時の効果：予約・アクセスと合わせる */
  .frontpage-contact .phone:hover {
    background-color: var(--cch); /* ← 他のボタンと同じホバー色 */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  }
	
  /* 縦1列レイアウト */
  .frontpage-link ul{
    flex-direction: column;
    align-items: stretch;     /* 幅いっぱい */
    gap: 6px;
  }

  /* li の下地色は消す（予約・アクセスと統一のため） */
  .frontpage-link li{
    width: 100%;
    background: transparent;  /* ← ここで上書き */
  }

  /* ボタン化（予約・アクセスと同デザインに揃える） */
  .frontpage-link a{
    display: block;
    width: 100%;
    color: #fff;
    font-size: 1rem;
    letter-spacing: .1rem;
    padding: .6em .9em;
    border: 1px solid #fff;
    border-radius: 4px;
    background-color: rgba(0,0,0,.20);
    text-decoration: none;
    text-shadow: 1px 1px 8px rgba(0,0,0,.6);
    box-shadow: 1px 1px 6px rgba(0,0,0,.3);
    transition: background-color .3s ease, color .3s ease;
    position: relative;
    overflow: hidden;         /* 既存と一貫性 */
  }

  /* PC用の下線アニメをモバイルでは無効化（デザイン崩れ防止） */
  .frontpage-link a::after{ display: none; }

  /* ホバー（予約・アクセスと同じ） */
  .frontpage-link a:hover{
    background-color: var(--cch);
    color: #fff;  /* 白のまま */
    font-weight: 400;
    text-shadow: 1px 1px 3px rgba(0,0,0,.8);
  }

  /* アクセシビリティ：キーボードフォーカス */
  .frontpage-link a:focus-visible{
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  /* メニュー背面のグラデは消す指定でOK */
  .frontpage-menu{
	  background: none;
	  padding: 30px 15px 0px 0;
	}
	
.frontpage-contact {
    padding: 0 5px 0 5px;
    border-bottom: none;
}
	
}/* max-width: 599px */



/* キャッチコピー ============================== */
.catchcopy-vertical {
  position: absolute;
  bottom: 60px;
  left: 80px;
  z-index: 2;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: clamp(2.40rem, 0.97vw + 2.22rem, 3.20rem);
  line-height: 1.5em;
  letter-spacing: .1em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: #fff;
}

.catchcopy-vertical span {
  display: block;
  opacity: 0;
  transform: translateY(-20px);
  animation: dropIn 1s ease-out forwards;
	font-weight: 500;
  text-shadow:
	  2px 2px 10px rgba(0, 0, 0, 0.2),
	  0 0 14px rgba(0, 0, 0, 0.1);
}

.catchcopy-vertical span:nth-child(1) { animation-delay: 1.5s; }
.catchcopy-vertical span:nth-child(2) { animation-delay: 3.0s; }
.catchcopy-vertical span:nth-child(3) { animation-delay: 4.5s; }
.catchcopy-vertical span:nth-child(4) { animation-delay: 7.0s; }

.catchcopy-vertical span:last-child {
  font-weight: 600;
  text-shadow:
	  2px 2px 10px rgba(0, 0, 0, 0.3),
	  0 0 14px rgba(0, 0, 0, 0.2);
}

@keyframes dropIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 799px以下：縦書き4行を小さく＋中央寄せ */
@media (max-width: 799px){
  .catchcopy-vertical {
    position: absolute;
    top: 48%;                   /* 上下中央 */
    left: 8%;                 /* 左に寄せる（調整値） */
    transform: translateY(-50%);/* 真ん中基準に補正 */
    font-size: clamp(1.8rem, 4.5vw, 2.2rem); /* 文字サイズを縮小 */
    line-height: 1.4em;          /* 行間も少し詰める */
    letter-spacing: .05em;       /* 字間も軽めに */
    writing-mode: vertical-rl;
    text-orientation: mixed;
    z-index: 2;
  }

  .catchcopy-vertical span {
    text-shadow: 1px 1px 4px rgba(0,0,0,0.4),
                 0 0 6px rgba(0,0,0,0.3); /* モバイル用に少し軽く */
  }
}

/* ロゴ ============================== */
.law-office_name {
  position: absolute;
  right: 1.5em;
	width: 48vw;
  bottom: calc(300px - 2.5vw);
  z-index: 100;
  opacity: 0;
  transform: translateX(-300px);
  transition: opacity 0.6s ease, transform 1.5s ease;
  margin: 0;  /* ← margin-bottomは不要 */
  will-change: transform, opacity;
}

.law-office_name.active {
  opacity: 1;
  transform: translateX(0);
}
.law-office_name h1 {
  max-width: 95%;
}

.law-office_name h1 img {
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.9))
    drop-shadow(0 0 4px rgba(255, 255, 255, 0.8))
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.7))
    drop-shadow(0 0 20px rgba(255, 255, 255, 0.5))
    drop-shadow(0 0 30px rgba(255, 255, 255, 0.3))
    drop-shadow(0 0 40px rgba(255, 255, 255, 0.2))
    drop-shadow(0 0 60px rgba(255, 255, 255, 0.1));
}

/* 白影
.law-office_name h1 img {
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.9))
    drop-shadow(0 0 4px rgba(255, 255, 255, 0.8))
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.7))
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.5))
    drop-shadow(0 0 20px rgba(255, 255, 255, 0.3))
    drop-shadow(0 0 30px rgba(255, 255, 255, 0.2))
    drop-shadow(0 0 40px rgba(255, 255, 255, 0.1));
}
*/

/* 黒影
.law-office_name h1 img {
  width: 100%;
  height: auto;
  filter:
      drop-shadow(0 0 6px rgba(0, 0, 0, 0.3))
      drop-shadow(0 0 12px rgba(0, 0, 0, 0.15));
}
*/



/* トップトピック ============================== */
.top-topic-wrap {
  position: absolute;
  bottom: 30px;
  right: 30px;
  width: 50vw;
  z-index: 100;
  padding: 1em;
}

/* トピックボックス */
.top-topic-link {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 1.5em;
  text-decoration: none;
  color: inherit;
  background: rgba(251,197,30,0.80);
  border-radius: 6px;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateX(100px);
  transition: background 0.8s ease, opacity 1.2s ease, transform 0.4s ease;
}
.top-topic-link.active {
  opacity: 1;
  transform: translateX(0);
}
.top-topic-link:hover {
  background: rgba(251,197,30,1.0);
}

/* 見出し */
.top-topic-title {
  width: 100%;
  flex: 0 0 auto;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--5cc);
  padding: 0 0 2px 0;
  border-bottom: solid 1px var(--5cc);
  margin-bottom: 0.5em;
}

/* サムネイル */
.top-topic-thumbnail {
  width: 25%;
  height: auto;
	border-radius: 4px;
  overflow: hidden;
}
.top-topic-thumbnail img {
  width: 100%;
  height: auto;
  object-fit: cover;
  flex-shrink: 0;
  transition: transform 0.8s ease;
}
.top-topic-link:hover .top-topic-thumbnail img {
  transform: scale(1.2);
}

/* 本文 */
.topic-content {
  flex: 1;
}
.topic-title {
  font-size: 1.2rem;
  margin: 0 0 0.4em;
  font-weight: 700;

/* タイトル文字数を2行で収めるため */
display: -webkit-box;        /* flexboxの旧仕様を利用する必要がある */
-webkit-box-orient: vertical;/* 縦方向にボックスを積む指定 */
-webkit-line-clamp: 2;       /* “2行で切る” の本体 */
overflow: hidden;            /* はみ出した部分を隠す */
text-overflow: ellipsis;     /* 1行用の省略記号。multi-lineでは挙動が安定しないが慣例的に付ける */
word-break: break-word;      /* 長い単語やURLで行崩れするのを防ぐ。必要な時だけ */	
}
.topic-excerpt {
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  color: #444;
}

@media (min-width: 1600px) {
	.law-office_name {
  bottom: calc(300px - 2vw);
}
	.top-topic-thumbnail {
		max-height: 120px;
	}
}
@media (max-width: 899px) {
	.law-office_name {
		width: 48vw;
  bottom: calc(270px + 4vw);
}
}
@media (max-width: 799px) {
	.law-office_name {
	width: 70vw;
  bottom: calc(220px + 3vw);
}
	.top-topic-wrap {
  right: 0;
  width: 100vw;
  padding: 0 2em;
}
}
@media (max-width: 599px) {
	.law-office_name {
	width: 85vw;
  bottom: calc(250px + 3vw);
}
}



/* 高さが低い時は、固定高さを解除して2段分の高さを持たせる */
@media (max-height: 700px) {
  .top_intro {
    display: grid;
    /* 1段目=ヒーロー、2段目=News */
    grid-template-rows: 100svh auto;
    height: auto;          /* ← これが必須！ 100vh固定を解除 */
    min-height: 100svh;    /* 見栄え確保（vhでも可） */
    overflow: visible;
	  background-color: var(--5cc);
  }

  /* スライダーは1段目を相対配置で占有 */
  .top_slider {
    position: relative;    /* ← absolute をやめる */
    grid-row: 1 / 2;
    width: 100%;
    height: 100%;
  }
  .top_slide { position: absolute; inset: 0; }

  /* Newsは2段目へ“流す”（絶対配置を解除） */
  .top-topic-wrap {
    position: static;
    grid-row: 2 / 3;
    width: 95%;
    margin: 14px auto 0;
    padding: 1em 1em 1.5em;
    opacity: 1;
    transform: none;
    z-index: 1;   /* 過度に高くしない */
  }
	.top-topic-link {
    background: rgba(251, 197, 30, 1.0);
    border-radius: 6px;
    padding: 25px;
}
	.top-topic-thumbnail {
    width: 20%;
}
	
  /* キャッチコピー位置調整 */
	  .catchcopy-vertical {
    position: absolute;
    top: 46%;                   /* 上下中央 */
    left: 5%;                 /* 左に寄せる（調整値） */
    transform: translateY(-50%);/* 真ん中基準に補正 */
    font-size: clamp(1.8rem, 4.5vw, 2.2rem); /* 文字サイズを縮小 */
    line-height: 1.4em;          /* 行間も少し詰める */
    letter-spacing: 0.03em;       /* 0.05em 字間も軽めに */
    writing-mode: vertical-rl;
    text-orientation: mixed;
    z-index: 2;
  }
}

/* ===== 499px 以下：ヒーロー → News の2段レイアウト ===== */
@media (max-width: 499px) {
  .top_intro{
    display: grid;
    grid-template-rows: 100svh auto;   /* 1=ヒーロー, 2=News */
    grid-template-areas:
      "hero"
      "news";
    height: auto;
    min-height: 100svh;
    /* overflow: visible;  ← sticky親なので触らない */
    background-color: var(--5cc);
  }

  /* ヒーロー面（背景）は低い重なり */
  .top_slider { 
    grid-area: hero;
    position: relative;
    z-index: 1;
  }
  .top_slide { position: absolute; inset: 0; z-index: 1; }

/* ★ ロゴをヒーロー下端・キャッチコピーの下に揃える */
.law-office_name {
  grid-area: hero;
  position: absolute;     /* ← relative ではなく absolute にして基準は .top_intro */
  bottom: 50px;            /* ← 下からの位置。好みで % or px に調整（例: 10% / 40px） */
  left: 0;              /* 中央寄せ */
	right: 0;
  z-index: 30;            /* キャッチコピーより前 */
  width: min(90vw, 440px);
  text-align: center;
  margin: 0 auto;
}
.law-office_name h1 {
	max-width: 95%;
	margin: 0 auto; }
.law-office_name .logo-type {
  display: block;
  max-width: 100%;
  height: auto;
}

/* キャッチコピーはロゴより上に */
.catchcopy-vertical {
  grid-area: hero;
  position: absolute;
  top: 38%;
  left: 8%;
  transform: none;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: clamp(1.8rem, 4.5vw, 2.2rem);
  line-height: 1.4em;
  letter-spacing: .05em;
  z-index: 20; /* ロゴ=30 より下 */
}

  /* ★ News ラッパー：横の膨張と外部影響を遮断 */
  .top-topic-wrap {
    grid-area: news;
    position: static;
    width: 95%;
    margin: -48px auto 0;
    padding: 1em 1em 2em;

    min-width: 0;               /* グリッド子の既定min-width:autoを0へ */
    contain: layout paint;      /* これでヒーロー側レイアウトに波及しない */
  }

  /* ★ リンク本体：flex明示＋横方向のはみ出し抑制 */
  .top-topic-link {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    column-gap: 0;
    row-gap: .8em;
    padding: 12px;
    background: rgba(251, 197, 30, 1.0);

    min-width: 0;               /* タイトル/抜粋の長文での横溢れ防止 */
    overflow-wrap: anywhere;    /* 長い英単語/URLも折り返す */
    transition: opacity .3s, transform .3s; /* 横方向を使わない */
    will-change: opacity, transform;
  }
  .top-topic-link.active { transform: translateY(0); }

  /* ★ サムネ：読み込み前から高さを確保してCLS防止 */
  .top-topic-thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9;       /* 4/3にしたければ変更可 */
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: .6em;
  }
  .top-topic-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;               /* コンテナに完全フィット */
    object-fit: cover;
  }

  .topic-content { flex: 0 0 auto; width: 100%; min-width: 0; }
  .topic-title   { font-size: 1rem;  margin-bottom: .4em; }
  .topic-excerpt { font-size: .9rem; line-height: 1.5; }
}

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



/* トップ弁護士メッセージ セクション ================================================== */

/* =========================
   トップメッセージ（簡潔版）
   ========================= */

/* 全体 */
.top-message-wrapper{
  position: relative;
  height: 100svh;       /* モバイルの正確なvh */
  height: 100vh;        /* フォールバック */
  z-index: 10;
}

.top-message{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* =========================
   イラスト（下部固定）
   ========================= */
.top-message_illust{
  position: absolute;
  left: 50%;
  bottom: 0;                     /* ←要件：下から30px */
  transform: translateX(-50%);
  width: min(80%, 960px);
  aspect-ratio: 18 / 9; /*イラスト画像下の余白調整も兼ねてる アスペクト比で左の数値を増やすと余白が減る（縦が浅くなるから）*/
  pointer-events: none;
  z-index: 1;                        /* テキストより後ろ */
}

.top-message_illust .people-illust{
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(12px) scale(0.98);
  transition: opacity 1.2s ease-in-out, filter 1.2s ease-in-out, transform 1.2s ease-in-out; /* 画像切り替え調整 */
}

.top-message_illust .people-illust.is-active{
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}

/* =========================
   コピー（上下中央）
   - JSが --tm-copy-top に安全な中央値を入れる
   ========================= */
.top-message_copy{
  position: absolute;
  left: 50%;
  top: var(--tm-copy-top, 50%);
  transform: translate(-50%, -50%);
  width: min(90%, 900px);
  z-index: 2;                        /* イラストより前面 */
  display: flex;
  justify-content: center;
}

.tm-line{
  position: absolute;                /* 同じ座標で差し替え表示 */
  inset: 0 auto auto 0;
  margin: 0;
  width: 100%;
  text-align: center;
  font-family: "Zen Maru Gothic", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.0rem, 1.4vw + 2.1rem, 4.0rem);
  line-height: 1.5;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(10px);
  transition: opacity 1.2s ease-in-out,
              filter 1.2s ease-in-out,
              transform 1.2s ease-in-out; /* コピー切り替え調整 */
  will-change: opacity, transform, filter;
}
.tm-line.is-active{
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* =========================
レスポンシブ対応
   ========================= */

@media screen and (min-width: 900px) and (max-height: 700px) {
  .top-message_illust {
    width: 65%;
  }
}


/* ====== 499px以下（縦書き・flex中央寄せに切替） ====== */
@media screen and (max-width: 499px) {
.top-message-wrapper{
  height: 85svh;       /* モバイルの正確なvh */
  height: 85vh;        /* フォールバック */
}
  /* ここは今のまま（もっちゃんの動いてる縦書き＋flex中央寄せ） */
  .top-message_copy{
    writing-mode: vertical-rl;
    /* text-orientation: mixed; ←必要なら戻してOK */
    display: flex;
    align-items: center;
    justify-content: center;
    /* position/left/top/transform いじらない */
  }

  /* ★重ね用コンテナ：同じセルに重ねる */
  .tm-copy-inner{
    display: grid;
    place-items: center;      /* 中央に揃える */
    /* grid は内包コンテンツの最大サイズで箱を作るので、縦書きでも崩れない */
  }

  /* ★2行とも同じグリッドセルに置く＝重なる */
  .tm-line{
    grid-area: 1 / 1;          /* 同じセルに重ねる */
    position: static;          /* absolute不要。静的配置のままOK */
    margin: 0;
    width: auto;
    text-align: center;        /* 縦書きでも中央に */
    white-space: normal;

    opacity: 0;
    filter: blur(8px);
    transition: opacity 1.2s ease-in-out, filter 1.2s ease-in-out;
  }
  .tm-line.is-active{
    opacity: 1;
    filter: blur(0);
  }
.top-message_illust{
  aspect-ratio: 16 / 9; /*イラスト画像下の余白調整も兼ねてる アスペクト比で左の数値を増やすと余白が減る（縦が浅くなるから）*/
}
}


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


/* トップ弁護士メッセージ セクション2 簡易 ================================================== */
/* ================================================== */







/* 法律相談ノート セクション ================================================== */
/* ================================================== */

.top-lawyers-notebook {
width: 100%;
height: auto;
background-color: var(--3cc);
padding: 0 0 60px 0;
}
.notebook-info {
position: relative;
width: 100%;
height: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
	padding: 60px 0 30px 0;
}
.notebook-info .notebook-title_en {
color: var(--3cc70);
font-size: clamp(4.00rem, 4.85vw + 2.12rem, 8.00rem);
font-weight: 800;
width: 100%;
height: auto;
padding: 10px 0 0 30px;
}
@media (max-width: 499px) {
.notebook-info .notebook-title_en {
padding: 0 0 0 0;
}
}
.notebook-info .notebook-img {
position: absolute;
right: 25px;
max-width: 160px;
	margin-top: -95px;
transform: rotate(5deg);
}
@media (max-width: 779px){
.notebook-info .notebook-img  {
  max-width: 120px;
}
}
.notebook-info .notebook-img img {
width: 100%;
height: auto;
animation: sway5deg 1.5s ease-in-out infinite alternate;
}
.notebook-info .notebook-title {
margin-left: auto;
}
.notebook-info .notebook-title h2 {
color: #fff;
font-size: clamp(2.0rem, 0.73vw + 2.02rem, 2.80rem);
font-weight: 600;
	line-height: 1;
}
.notebook-info .notebook-explain {
text-align: left;
border-left: dotted 1px var(--3cc30);
padding: 0 0 0 15px;
max-width: 340px;
margin-left: 10px;
margin-right: 16%; /* イラストと被らないように */
}
.notebook-info .notebook-explain p {
color: #fff;
font-size: clamp(0.9rem, 3vw, 1rem);
line-height: 1.4em;
	text-align: left;
}


/* 弁護士ブロックとノートブロックの囲い */
.lawyers-notebook_wrapper {
width: 100%;
height: auto;
display: flex;
gap: 2%;
padding: 0 3%;
margin-bottom: 50px;
}
.lawyers-notebook_wrapper .lawyer {
  flex: 0 0 25%;
  display: flex;
  flex-direction: column;
}
.lawyer-inner {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.lawyers-notebook_wrapper .lawyer .lawyer_photo {
width: 100%;
height: auto;
margin-top: -100px;
z-index: 1;
}
.lawyers-notebook_wrapper .lawyer .lawyer_photo img {
width: 100%;
height: auto;
}
.lawyers-notebook_wrapper .lawyer .lawyer_info {
background-color: var(--5cc);
border-radius: 0 0 10px 10px;
padding: 20px 25px 10px 25px;
}
.lawyer_info .lawyer_name h3 {
  display: flex;
  flex-direction: column; /* ←縦並び！ */
  gap: .4em;              /* ←行間を詰めるならここ調整 */
  margin: 0;
  padding: 0;
  margin-bottom: 30px;
  color: #fff;
}

.lawyer_info .lawyer_name h3 .title-name {
  font-size:1.1rem;
  font-weight: 400;
    line-height: 1em;
    letter-spacing: .2em
}

.lawyer_info .lawyer_name h3 .name-jp {
  font-size: clamp(1.50rem, 1.09vw + 0.93rem, 2.40rem);
  font-weight: 500;
  letter-spacing: .3em;
    line-height: 1.2em;
}

.lawyer_info .lawyer_name h3 .name-en {
  font-size: 0.9rem;
  font-weight: 200;
  line-height: 1em;
  letter-spacing: .2em
}





/* ノート ============================== */
/* 見開きノート全体 */
.notebook-container {
  flex: 0 0 73%;
  position: relative;
  background: #fff;
  border-radius: 10px;
  padding: 0px 2px 0px 2px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

.notebook-pages {
  position: relative;
}

/* 1ページあたり2件ずつ */
.notebook-page-group {
  display: none;
}

.notebook-page-group.current {
  display: block;
}

.notebook-open {
  display: flex;
  justify-content: space-between;
  position: relative;
  border-left: 3px double #ccc;
  border-right: 3px double #ccc;
  border-radius: 10px;
  padding: 0 1px;
}

/* 真ん中の縦線 */
.notebook-open::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 1px dashed #ccc;
  transform: translateX(-50%);
  z-index: 1;
  box-shadow: 
    -4px 0 8px rgba(0, 0, 0, 0.2),
     4px 0 8px rgba(0, 0, 0, 0.2);
}

.notebook-post {
  background: #fff;
  border-radius: 10px;
  padding: 20px 20px 35px 20px;
  width: 49%;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 右ページ用ホバー */
.notebook-post.right {
  transform-origin: left center;
}
.notebook-post.right:hover {
  transform: perspective(800px) rotateY(-8deg) translateX(-5px) scaleX(0.97);
  box-shadow: 8px 0 12px -4px rgba(0, 0, 0, 0.2);
}

/* 左ページ用ホバー */
.notebook-post.left {
  transform-origin: right center;
}
.notebook-post.left:hover {
  transform: perspective(800px) rotateY(8deg) translateX(5px) scaleX(0.97);
  box-shadow: -8px 0 12px -4px rgba(0, 0, 0, 0.2);
}

.notebook-thumb {
  margin-bottom: 15px;
  overflow: hidden;
}

.notebook-thumb img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

.notebook-post .notebook-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  transition: color 0.3s;
	margin-bottom: 8px;
}
.notebook-post:hover .notebook-title {
  color: var(--3cc);
}

.notebook-post .notebook-date {
  font-size: 0.8rem;
  color: var(--bcg9);
	letter-spacing: .1em;
	text-align: right;
	padding-right: 5px;
  margin-bottom: 8px;
}

.notebook-excerpt p {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.6em;
}

/* ページ送りボタン */
.notebook-prev,
.notebook-next {
  position: absolute;
  bottom: 2px;
  font-size: 1.6rem;
  font-weight: 900;
  background: none;
  border: none;
  color: var(--cg04);
  cursor: pointer;
  z-index: 10;
  transition: color 0.3s;
}
.notebook-prev:hover,
.notebook-next:hover {
  color: var(--3cc);
}
.notebook-prev {
  left: 4px;
  transform: rotate(-60deg);
}
.notebook-next {
  right: 4px;
  transform: rotate(60deg);
}

/* めくるアニメーション */
.page-turn-out-right {
  transform-origin: left center;
  transform: perspective(1200px) rotateY(0);
  animation: turnOutRight 0.6s forwards ease;
}

.page-turn-out-left {
  transform-origin: right center;
  transform: perspective(1200px) rotateY(0);
  animation: turnOutLeft 0.6s forwards ease;
}

@keyframes turnOutRight {
  0% { transform: rotateY(0); opacity: 1; }
  100% { transform: perspective(1200px) rotateY(-90deg) translateX(-5px) scaleX(0.97); opacity: 0; }
}

@keyframes turnOutLeft {
  0% { transform: rotateY(0); opacity: 1; }
  100% { transform: perspective(1200px) rotateY(90deg) translateX(5px) scaleX(0.97); opacity: 0; }
}

/* 次ページのフェードイン */
.page-fade-in {
  animation: fadeInPage 0.3s forwards ease;
}

@keyframes fadeInPage {
  0% { opacity: 0; }
  100% { opacity: 1; }
}



/* インデックス ============================== */
.notebook-index {
position: relative;
width: 100%;
height: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border-bottom: dashed 2px var(--3cc70);
}
.notebook-index .notebook-index-title_en {
color: var(--3cc70);
font-size: clamp(3rem, 3vw, 5rem);
font-weight: 800;
line-height: 1em;
width: auto;
height: auto;
padding: 10px 0 0 30px;
}
.notebook-index .notebook-index-title {
	width: 100%;
	height: auto;
}
.notebook-index .notebook-index-title h3 {
	width: 100%;
color: var(--3cc20);
font-size: clamp(1.2rem, 3vw, 1.5rem);
font-weight: 400;
padding: 0 5% 0 3%;;
margin: 0 0 0 0;
}

/* 4列ベースで可変 */
.notebook-index-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  column-gap: 20px;
  row-gap: 4px;           /* 行間は気持ち詰める */
  margin-top: 15px;
  padding: 0 3% 40px 3%;
}

/* 各アイテムの枠は使わない */
.notebook-index-item {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
}

/* ドット下線のみのシンプル表示 */
.notebook-index-item {
  display: block;          /* 全幅クリック */
  text-decoration: none;   /* 既定の下線は消す */
  padding: 2px 0 1px 0;          /* ちょい余白だけ */
  color: #fff;
  border: none;
  background: none;
  box-shadow: none;
  outline: none;
  /* ドット下線 */
  border-bottom: 1px dotted var(--3cc30);
  margin-bottom: 3px;    /* マウスホバーで下線を太くした時上下するのを防ぐため */
  transition: all 0.2s ease;
}

/* タイトル（1行まで） */
.notebook-index-link h3.notebook-index-title {
  display: -webkit-box;
  -webkit-line-clamp: 1;   /* 1行で切る */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  line-height: 1.4;
  font-size: 0.95rem;
  font-weight: 400;
  margin: 0;
  transition: all 0.2s ease;
}
.notebook-index-link h3.notebook-index-title i {
  font-size: 1.05rem;
  margin-right: 5px;
  color: var(--5cc);
}

.notebook-index-item:hover {
  color: var(--5cc);
  border-bottom: 3px dotted var(--5cc);
  margin-bottom: 1px;    /* マウスホバーで下線を太くした時上下するのを防ぐため 元にmargin-bottom: 3px;加えることで対応 */
}
.notebook-index-link:hover h3.notebook-index-title,
.notebook-index-link:visited:hover h3.notebook-index-title {
color: var(--5cc);
}

/* visited色を固定したいなら（任意） */
.notebook-index-link:visited h3.notebook-index-title { color: var(--3cc30); }



/* ===== レスポンシブ ===== */

/* ====== 999px以下：左30%を空けて本文を右カラムで縦積み ====== */
@media (max-width: 999px) {
  .notebook-info {
    display: grid;
    grid-template-columns: 29% 1fr; /* 左30%を空ける */
    grid-auto-rows: auto;
    align-items: start;
    justify-items: start;
	  padding: 40px 0 15px;
  }
.notebook-info .notebook-img {
    margin-top: -20px;
}
  .notebook-info .notebook-title {
    grid-column: 2;
    grid-row: 1;
    margin-left: 0; /* PC時のautoを打ち消し */
    width: 100%;
	  padding: 0 0 10px 0;
  }

  .notebook-info .notebook-explain {
    grid-column: 2;
    grid-row: 2;
    margin-left: 0;
    margin-right: 0;
    max-width: none; /* スマホ時は幅制限を解除 */
    width: 100%;
	  border-left: none;
	  padding: 0 160px 0 0;
  }
}/* max-width: 999px */




/* ===== 699px 以下：弁護士カード→ノート を縦積み ===== */
@media (max-width: 699px){
	.lawyer-inner {
		background-color: var(--3cc5);
	}
  /* セクションを縦フレックス化 */
  .top-lawyers-notebook {
    display: flex;
    flex-direction: column;
	      padding: 0 3% 60px;
  }

  /* ラッパーを“透過”して孫要素をフレックス子として扱う */
  .top-lawyers-notebook > .lawyers-notebook_wrapper {
    display: contents;
  }

  /* 並び順：.lawyer → .notebook-info → .notebook-container → そのほか */
  .top-lawyers-notebook .lawyer { order: 1; }
  .top-lawyers-notebook > .notebook-info { order: 2; }
  .top-lawyers-notebook .notebook-container { order: 3; }

  /* ここがポイント：上に来てしまった子を後ろへ送る */
  .top-lawyers-notebook > .notebook-index { order: 4; }
  .top-lawyers-notebook > .notebook-index-list { order: 5; }
  .top-lawyers-notebook > .button-center { order: 6; }

  /* 余白の微調整（必要なら調整して） */
  .top-lawyers-notebook .lawyer { margin-bottom: 20px; }
  .top-lawyers-notebook > .notebook-info {
	  grid-template-columns: 3% 1fr;
	  margin-bottom: 20px;
}
	.notebook-info .notebook-img {
		margin-top: 20px;
	}
	
  /* 親を縦並びに */
.lawyers-notebook_wrapper{
	flex-direction: column;
    gap: 16px;
    padding: 0 4%;
}
.notebook-info {
	margin-bottom: 110px; 	/* タイトル情報と写真との間 */
}
	.lawyers-notebook_wrapper .lawyer {
		margin-top: -30px;
	}
.lawyers-notebook_wrapper .lawyer .lawyer_photo {
	width: 60%;	 			/* 写真のサイズ */
	padding: 20px 0 0 0;
	margin: 0 auto 0;	/* 写真の飛び出しと配置 */
}
		.lawyer_info .lawyer_name h3 {
  margin-bottom: 0;
}
	.lawyers-notebook_wrapper .lawyer .lawyer_info {
padding: 40px 40px 10px 40px;
}
	.lawyer_info .lawyer_name h3 .title-name {
  font-size:1.4rem;
}

.lawyer_info .lawyer_name h3 .name-jp {
  font-size: 2.2rem;
  font-weight: 500;
  letter-spacing: .3em;
    line-height: 1.2em;
}

.lawyer_info .lawyer_name h3 .name-en {
  font-size: 1.2rem;
}
	.top-lawyers-notebook .notebook-container {
		margin-bottom: 40px;
	}
}/* ax-width: 699px */


@media (max-width: 559px) {
  .notebook-info .notebook-explain {
	  padding-right: 28%;
}
.notebook-info .notebook-title_en {
    color: var(--3cc80);
}
.notebook-index .notebook-index-title_en {
    color: var(--3cc80);
}
.notebook-index-title {
	-webkit-line-clamp: 3; /* スマホは3行まで許容 */
  }
.notebook-index .notebook-index-title h3 {
	max-width: 100%;
	color: #fff;
	font-weight: 600;
}

/* 弁護士カードは全幅 */
.lawyers-notebook_wrapper .lawyer{
	flex: 1 0 auto;
	width: 100%;
  }
  .lawyer-inner{
    border-radius: 12px;
  }
.notebook-info {
	margin-bottom: 70px; 	/* タイトル情報と写真との間 */
}
.lawyers-notebook_wrapper .lawyer .lawyer_photo {
	width: 70%;	 			/* 写真のサイズ */
}
  /* ノートはカードの下に全幅で続く */
  .notebook-container{
    flex: 1 0 auto;
    width: 100%;
    padding: 6px 8px 10px;
  }

  /* 2ページ見開きをやめて1カラムに */
  .notebook-open{
    display: block;          /* ← 縦積み */
    border-left: none;
    border-right: none;
    padding: 0;
  }
  .notebook-open::after{      /* 中央の点線も消す */
    display: none;
  }

  /* 記事カードは全幅・縦積み */
  .notebook-post{
    width: 100%;
    padding: 16px 16px 22px;
    margin: 0 0 0 0;
    transform: none !important;
    box-shadow: none;
  }
	.notebook-post.left {
		margin-bottom: 40px;
	}
  .notebook-post.left,
  .notebook-post.right{
    transform-origin: center;
  }
  .notebook-post.left:hover,
  .notebook-post.right:hover{
    transform: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.06); /* ちょいだけ */
  }

  /* サムネ・テキストの余白少し詰める（好みで微調整） */
  .notebook-thumb{ margin-bottom: 10px; }
  .notebook-post .notebook-title{ font-size: 1.05rem; }
  .notebook-date{  margin-bottom: 6px; }
  .notebook-excerpt p{ line-height: 1.55; }

  /* ページ送り：下中央寄せに */
  .notebook-prev,
  .notebook-next{
    position: static;        /* 抜く */
    transform: none;
    font-size: 1.4rem;
    margin: 6px 8px 0 0;
  }
  /* 矢印を載せる土台を相対配置に（既にrelativeなら不要） */
  .notebook-container{
    position: relative;
  }

  /* ラッパは全面を覆うけどクリックは子だけに通す */
  .notebook-arrows{
    position: absolute;
    inset: 0;
    pointer-events: none;   /* ← 子のボタンだけ反応させる */
    z-index: 10;
  }

  .notebook-prev,
  .notebook-next{
    position: absolute;
    top: 49%;
    transform: translateY(-49%);  /* 縦中央 */
    pointer-events: auto;         /* ← クリック有効化 */
    font-size: 1.4rem;
    margin: 0;                    /* 以前の余白リセット */
    background: var(--3cc50);  /* 視認性UP（好みで） */
    color: #fff;
    width: 44px; height: 44px;    /* タップターゲット */
    border-radius: 50%;
    display: grid; place-items: center;
  }

  .notebook-prev{ left: 12px;  transform: translateY(-50%) rotate(-70deg); }
  .notebook-next{ right: 12px; transform: translateY(-50%) rotate( 70deg); }
	
.notebook-info .notebook-img {
	margin-top: 40px;
}
	
}/* max-width: 560px */

@media (max-width: 499px) {
	    .top-lawyers-notebook > .notebook-info {
			padding-top: 60px;
        margin-bottom: 0px;
    }
	.notebook-info .notebook-img {
		max-width: 100px;
	margin-top: 20px;
		margin-right: 0px;
}
	.notebook-info .notebook-title h2 {
		font-size: 1.8em;
	}
	    .notebook-info .notebook-explain {
        padding: 0 28% 0 0;
    }
}/* max-width: 419px */

@media (max-width: 429px) {
		.notebook-info .notebook-img {
			max-width: 100px;
	margin-top: 0px;
			margin-right: -5px;
}
		    .notebook-info .notebook-explain {
        padding: 0 0 0 0;
    }
}



/* 主な取扱分野 セクション ================================================== */
/* ================================================== */
/* ===== Stack base ===== */
.stack-section{
  /* カスタムプロパティ（セクション単位で上書き可） */
  --stack-left-width: 300px;             /* 左カラム幅 */
  --stack-gap: 40px;                     /* カラム間隔 */
  --stack-shadow: 0 4px 12px rgba(0,0,0,0.10);

  /* 左固定ボックス */
  --stack-bg-left: var(--5cc);
  --stack-title-color: #fff;
  --stack-text-color: #fff;

  /* 右（本文） */
  --stack-bg-right: #fff;                /* 本文面の色（白） */
  --stack-head-color: var(--2cc);        /* 見出し帯の色 */
  --stack-card-border: 1px solid rgba(0,0,0,0.7);
  --stack-headtext-color: #fff;

  --stack-peek: 70px;                    /* 見出し帯の最低高 */
  --sticky-top: 120px;                   /* 左の固定開始位置（必要なら調整） */

  position: relative;
  width: 100%;
}

/* 左右レイアウト：sticky演出は内側（左だけ）に限定 */
.stack-inner {
  position: relative;            /* ← stickyを解除 */
  top: auto;
  height: auto;                  /* ← 100vhを解除 */
  display: grid;
  grid-template-columns: minmax(240px, var(--stack-left-width)) 1fr;
  gap: var(--stack-gap);
  align-items: start;
  padding: 140px 3% 30px 3%;
  background: var(--bgc01);
  overflow: visible;
}

/* 左：固定表示（常に見えている） */
.stack-left {
  position: sticky;              /* ← 左のみsticky */
  top: var(--sticky-top);
  align-self: start;
  padding: 35px 25px 25px 25px;
  background: var(--stack-bg-left);
  border-radius: 10px;
  box-shadow: var(--stack-shadow);
}
p.stack-lead {
  color: var(--5cc70);
  font-size: clamp(1.0rem, 3vw, 1.2rem);
  font-weight: 700;
  line-height: 1;
  margin: 0 0 10px 0;
}
.stack-title {
  color: var(--stack-title-color);
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .1em;
  margin: 0 0 20px 0;
}
.stack-sub {
  color: var(--stack-text-color);
  font-size: clamp(0.9rem, 3vw, 1.0rem);
  font-weight: 300;
  line-height: 1.6;
  margin: 0 0 15px 0;
}

/* 右：アコーディオンの親 */
.stack-right{
  position: relative;
  overflow: visible;             /* ← 隠さない */
  border-radius: var(--stack-radius);
  isolation: isolate;
	margin-top: 12px; /*タブを重ねているから */
}
/* 外枠は不要（各カードに枠を持たせる） */
.stack-right::after{ content: none; }

/* ===== アコーディオン項目（カード） ===== */
.stack-card {
  position: relative;            /* ← 絶対配置を解除 */
  inset: auto;
  display: block;
  background: var(--stack-bg-right);
  border: var(--stack-card-border);
  border-radius: 10px 10px 0 0;
  box-shadow: var(--stack-shadow);
  overflow: hidden;
  margin: -12px 0 0 0;
	transition: all 0.2s ease;
}
/* 旧レイヤー下地は不要 */
.stack-card::before { content: none; }

.stack-card:last-child {
	  border-radius: 10px;
}

/* 閉じているカードだけホバーで上に上がる */
.stack-card[aria-expanded="false"]:hover,
.stack-card:not(.is-open):hover {
  transform: translateY(-5px);
}

/* 開いているカードはホバーしても動かさない（保険） */
.stack-card.is-open:hover,
.stack-card[aria-expanded="true"]:hover {
  transform: none !important;
}

/* 見出し帯（クリックターゲット） */
.stack-head {
  position: relative;
  min-height: var(--stack-peek);
  background: var(--stack-head-color);
  padding: 0 24px;
  display: flex;
  align-items: center;
  border-bottom: none;
  cursor: pointer;
  user-select: none;
	transition: all 0.2s ease;
}

.stack-head h3 {
  color: var(--stack-headtext-color);
  font-size: clamp(1.4rem, 3vw, 1.6rem);
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 1.1;
  margin: 0;
}
/* 装飾ライン */
.stack-head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.10),
    rgba(0,0,0,0.18),
    rgba(0,0,0,0.10)
  );
  pointer-events: none;
}
/* 開閉アイコン（＋／−） */
.stack-head::before {
  content: "+";
  position: absolute;
  right: 32px;
  font-weight: 700;
  color: #fff;
  font-size: 1.6rem;
  transform: translateY(-1px);
}
.stack-card.is-open .stack-head::before,
.stack-card[aria-expanded="true"] .stack-head::before {
  content: "−";
}

/* 本文：閉じた状態がデフォルト */
.stack-body {
  --row-gap: 10px;
  --col-gap: 20px;
  box-sizing: border-box;

  height: 0;                     /* JSでheightをアニメーション */
  overflow: hidden;
  padding: 0 24px;               /* 閉時は上下0・左右のみ */
  transition: height .3s ease, padding .2s ease;

  display: flex;
  flex-wrap: wrap;
  gap: var(--row-gap) var(--col-gap);
  background: var(--stack-bg-right);
}

/* 開いたときのパディングだけ付与（heightはJSで制御） */
.stack-card.is-open .stack-body,
.stack-card[aria-expanded="true"] .stack-body {
  padding: 10px 5% 30px;
}

/* 見出しの直下に置くリード */
.stack-body .stack-body-lead{
  flex: 1 1 100%;
  font-size: clamp(1.2rem, 3vw, 1.3rem);
  font-weight: 500;
  line-height: 1;
  padding: 8px 0 4px 0;
}

/* 画像は半分固定（gap考慮） */
.stack-body .stack-body-img{
  flex: 0 0 calc(45% - var(--col-gap));
}
.stack-body .stack-body-img img{
  width: 100%;
  height: auto;
}

/* テキストは残り全て */
.stack-body .stack-body-text{
  flex: 1 1 calc(55% - var(--col-gap));
  min-width: calc(55% - var(--col-gap));
}
.stack-body .stack-body-text:only-child { flex-basis: 100%; }
.stack-body .stack-body-text p { padding: 0 0 15px 0; }

.stack-body .button-left,
.stack-body .button-center,
.stack-body .button-right { flex: 0 0 100%; }



/* 開いたカードの見出しを本文内の基準位置でsticky固定 */
.stack-card.is-open .stack-head,
.stack-card[aria-expanded="true"] .stack-head{
  position: sticky;
  top: var(--head-stick-top, 0px); /* JSで動的に設定 */
  z-index: 3;                      /* 本文より手前に */
}

/* 見出しが本文上で“帯”として見えるように影と境界を補強（任意） */
.stack-card.is-open .stack-head {
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* sticky時に下線が本文に埋もれないように（任意） */
.stack-card.is-open .stack-head::after {
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.12),
    rgba(0,0,0,0.22),
    rgba(0,0,0,0.12)
  );
}


/* ===== レスポンシブ ===== */
@media (max-width: 899px){
p.stack-lead {
    color: var(--5cc90);
}
.stack-title {
}
.stack-inner{
    height: auto;
    position: relative;
    top: auto;
    display: block;
    padding: 40px 20px;
  }
  .stack-left{
    position: relative;  /* モバイルはsticky解除 */
    top: auto;
	      padding: 30px 25px 10px 25px;
    margin-bottom: 30px;
  }
p.stack-lead {
  font-size: clamp(3.00rem, 1.21vw + 2.53rem, 4.00rem);
	font-weight: 800;
}
  .stack-right{ overflow: visible; }
}/* max-width: 899px */

@media (max-width: 499px){
}/* max-width: 499px */



/* アコーディオンの中身 ================================================== */
/* ================================================== */

.service-example {
  width: 100%;
  margin: 0 auto;
  padding: 0 0 0px;
	text-align: center;
}

.example-list-title {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	position: relative;
	z-index: 1;
}

.example-list-title img {
	flex: 0 0 25%;         /* 固定で全体の1/4 */
	width: 100%;
	max-width: 160px;
	height: auto;
	object-fit: contain;   /* アスペクト比維持 */
}

.service-example .eyebrow {
	flex: 1 1 75%;
	display: inline-block;
  margin:  0;
  padding: 0 0 0 5px;
  color: var(--2cc);
  font-weight: 600;
  font-size: clamp(1.25rem, 0.36vw + 1.11rem, 1.55rem);
	text-align: left;
	line-height: 1.5;
	border-bottom: double 3px  var(--2cc);
}
.service-example .eyebrow2 {
	display: inline-block;
  margin:  20px 30px 0px;
  padding: 0;
  color: var(--bcg);
  font-weight: 500;
  font-size: clamp(1.05rem, 0.25vw + 1.04rem, 1.4rem);
	text-align: center;
	line-height: 1.6;
}
.service-example .example-list {
  list-style: none;
  padding: 0 0 0 30px;
  margin: -20px 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; }

/* 拡大 → -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: -45px;
  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;
  }

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

  /* リストの間隔と左右余白を調整 */
  .service-example .example-list {
    padding: 0 0 0 15px;        /* 左のインデントを詰める */
    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; 
  }
}/* max-width: 799px */

@media (max-width: 599px) {
.service-example {
	width: 100%;
	padding: 0;
}
.service-example .eyebrow {
	flex: 1 1 65%;			/* タイトルの割合 */
	line-height: 1.4;
	padding: 4px 0 2px 10px;
}
.example-list-title img {
	width: 35%;
}
.service-example .example-list {
    list-style: none;
    padding: 0 0 0 20px;
    margin: 0 0 20px;
}
.service-example .example-list li {
	line-height: 1.4;
	padding: 10px 6px 10px 1.2em;
}
.service-example .eyebrow2 {
	margin:  20px 0 0px;
	}
}/* max-width: 599px */


/* お知らせ セクション ================================================== */
/* ================================================== */
.top-information {
  position: relative;
  background-color: var(--4cc);
  color: var(--info-text);
  padding: 0 0 0 0;
  overflow: visible; /* 安全策：はみ出し切れ防止 */
}

/* ===== 左カラム（見出し＋イラスト） ===== */
.information-info {
  position: relative;
  z-index: 2; /* ★ 左をデフォで前面（通常時はカードより上） */
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
	padding: 50px 0 0 0;
}
.information-info .information-title_en {
  color: var(--4cc70);
  font-size: clamp(4.00rem, 4.85vw + 2.12rem, 8.00rem);
  font-weight: 800;
  width: 100%;
  height: auto;
  padding: 10px 0 0 30px;
}
@media (max-width: 499px) {
.information-info .information-title_en {
padding: 0 0 0 0;
}
.information-info {
	padding: 60px 0 0 0;
}
}

.information-info .information-img {
  position: absolute;
  z-index: 1;       /* 左ブロック内の相対順位 */
  top: -20px;
  right: 20px;
  max-width: 160px;
  transform: rotate(5deg); /* transformは子のスタックを作るが、親z=2なのでOK */
}
@media (max-width: 779px){
.information-info .information-img  {
  max-width: 120px;
}
}
.information-info .information-img img {
  width: 100%;
  height: auto;
  animation: sway5deg 1.5s ease-in-out infinite alternate;
}

/* 未使用 html情報なし */
.information-info .information-title { margin-left: auto; }
.information-info .information-title h2 {
  color: #fff;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 600;
}
.information-info .information-explain {
  border-left: dotted 1px var(--3cc30);
  padding: 0 0 0 15px;
  max-width: 360px;
  margin-left: 10px;
  margin-right: 180px; /* イラストと被らないように */
}
.information-info .information-explain p {
  color: #fff;
  font-size: clamp(0.9rem, 3vw, 1rem);
  line-height: 1.2em;
}
/* 未使用 html情報なし ここまで */

:root{
  --info-radius: 16px;
  --info-shadow: 0 6px 24px rgba(0,0,0,0.12);
}

/* ===== 2カラムグリッドの土台 ===== */
.top-information__inner{
  position: relative;
  max-width: 1600px;
  padding: 20px 3% 60px 3%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 4.0fr; /* 左：見出し/カテゴリ、右：カード */
  gap: clamp(20px, 4vw, 40px);
  align-items: start;
  overflow: visible; /* 安全策：はみ出し切れ防止 */
}

/* 左カラム（補足） */
.top-information__aside {
	min-width: 180px;
	padding: 0 0 0 20px;
}
.top-information__title-lead {
  color: #fff;
  font-size: clamp(1.1rem, 3vw, 1.2rem);
  font-weight: 500;
  margin-bottom: 5px;
	text-align: left;
}
.top-information__title{
  color: #fff;
  font-size: clamp(1.80rem, 0.48vw + 1.61rem, 2.20rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.2em;
  margin: 0 0 20px 0;
}

/* 左カラムのカテゴリ一覧 */
.top-information__cats{
  padding: 0 0 clamp(20px, 3.90vw + 5.37px, 60px) 0;
  border-bottom: solid 1px var(--4cc50);
  margin: clamp(10px, 3vw, 20px) 0;
}
.top-information__catlist{
  list-style: none;
  margin: 0;
  padding: 0 0 0 10px;
  display: grid;
  grid-auto-rows: min-content;
  gap: 10px;
}
.top-information__catlist > li{
	color: var(--cg08);
	position: relative; }
.top-information__catlist > li > a{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-size: clamp(1.2rem, 3vw, 1.4rem);
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: opacity .2s ease, border-color .2s ease, transform .2s ease;
}
.top-information__catlist > li > a::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900; /* solidは900 */
  content: "\f304"; /* fa-pen */
  display: inline-block;
  margin-right: 0px;
  font-size: 1em;
  transform: translateY(1px);
}
.top-information__catlist > li > a:hover{
  color: var(--cc50);
  border-color: var(--cc50);
  transform: translateX(5px);
}

/* ===== 右カラム：カードの親（grid item） ===== */
/* ★ 右親は通常は下の層に置く（左z=2より低い） */
.top-information__main{
  position: relative;
  z-index: 0;
  overflow: visible; /* はみ出し切れ防止 */
}

/* :has で「右親ごと」前面に上げる（ホバー/フォーカス時だけ） */
.top-information__main:has(.top-information__card:hover),
.top-information__main:has(.top-information__card:focus-visible) {
  z-index: 3; /* 左(=2)より上へ */
}

/* 右カラム：カード一覧 */
.top-information__list{
  position: relative; /* スタックは作るが z:auto のままに */
  z-index: auto;
  list-style: none;
  margin: 0 0 40px 0;
  padding: 0;
  display: grid;
  gap: 25px;
}

/* ===== 投稿カード本体 ===== */
.top-information__card {
  position: relative; /* z-index を効かせる土台 */
  z-index: 0;         /* 通常は低い */
  display: grid;
  grid-template-columns: 260px 1fr; /* サムネ左 / テキスト右 */
  gap: clamp(16px, 2.4vw, 28px);
  padding: clamp(16px, 2.6vw, 24px);
  background: transparent;
  border: 2px solid var(--4cc50);
  border-radius: var(--info-radius);
  text-decoration: none;
  color: inherit;
  box-shadow: none;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease, background-color .25s ease;
}

/* ホバー/フォーカス時：カード自身も一番手前に */
.top-information__card:hover,
.top-information__card:focus-visible{
  z-index: 999; /* 親がz:3に上がった上で、更に最前面へ */
  background: var(--4cch);
  border-color: #fff;
  box-shadow: var(--info-shadow);
  transform: translateY(-4px);
}
/* キーボードフォーカス可視化 */
.top-information__card:focus{
  outline: 5px solid #fff;
  outline-offset: 4px;
}

/* サムネイル枠 */
.top-information__thumb {
  height: 100%;             /* 親グリッド行の高さに合わせる */
  aspect-ratio: auto;       /* 固定比率は解除 */
  display: flex;            /* 中の画像を扱いやすく */
}
/* 中の画像 */
.top-information__thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* はみ出し防止 */
  transition: all 0.3s ease;
	border-radius: calc(var(--info-radius) / 2);
}
/* ホバー時のズーム */
.top-information__card:hover .top-information__thumb > img,
.top-information__card:focus-visible .top-information__thumb > img {
  transform: scale(1.1);
}

/* 投稿カード内テキスト */
.top-information__body {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* 上下中央揃え */
  height: 100%;
  gap: 8px;
}

/* メタ（投稿日・カテゴリ） */
.top-information__meta{
  margin: 0;
  padding: 0;
  display: flex;
  align-items: baseline;
  gap: 15px;
  flex-wrap: wrap;
  letter-spacing: 0.2em;
}
/* カテゴリ */
.top-information__cats-inline .top-information__catname{
  color: #fff;
  display: inline-block;
  border: solid 1px var(--4cc50);
  padding: 3px 8px 2px 8px;
  border-radius: 4px;
  line-height: 1.6;
  font-size: 1.0rem;
}
/* 投稿日 */
.top-information__meta-date {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 300;
}

/* タイトル */
.top-information__heading{
  margin: 0;
  font-size: clamp(18px, 2.6vw, 22px);
  line-height: 1.5;
  font-weight: 700;
  color: #fff;
  letter-spacing: .05em;
  transition: all 0.3s ease;
}
.top-information__heading-text {
display: -webkit-box;        /* flexboxの旧仕様を利用する必要がある */
-webkit-box-orient: vertical;/* 縦方向にボックスを積む指定 */
-webkit-line-clamp: 2;       /* “2行で切る” の本体 */
overflow: hidden;            /* はみ出した部分を隠す */
text-overflow: ellipsis;     /* 1行用の省略記号。multi-lineでは挙動が安定しないが慣例的に付ける */
word-break: break-word;      /* 長い単語やURLで行崩れするのを防ぐ。必要な時だけ */
}
.top-information__excerpt {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.4em;
}
.top-information__card:hover .top-information__heading,
.top-information__card:focus-visible .top-information__heading {
  color: var(--ch3);
  text-shadow: var(--info-shadow);
}

@media (min-width: 880px){
.display-pc {
	display: block;
}
.display-sp {
	display: none;
}
}
@media (max-width: 879px){
.display-pc {
	display: none;
}
.display-sp {
	display: block;
}
}


/* ====== レスポンシブ ====== */
@media (max-width: 879px){
  .top-information__inner{
    grid-template-columns: 1fr; /* 1カラムへ */
	  gap: 10px;
	  z-index: 10;
	  width: 100%;
	 margin-top: 0;
    padding: 0 4% 60px 4%;
}
	.top-information__title {
    margin: 0;
}
.top-information__cats {
    border-bottom: solid 1px var(--4cc50);
	padding: 0 0 0 0;
	border-bottom: none;
    margin: 10px 0 0;
}
  .top-information__aside{
    margin-bottom: 10px;
  }
  .top-information__card{
    grid-template-columns: 220px 1fr;
  }
}
.top-information__aside > .button-right {
	text-align: center;
}

@media (max-width: 720px){
  .top-information{
    padding: 0 0 60px;;
  }
  .top-information__card{
    grid-template-columns: 1fr; /* サムネ→テキストの縦積み */
  }
  .top-information__thumb{
    aspect-ratio: 16 / 9;
  }
  .top-information__meta-row{
    display: flex;
    margin-right: 12px;
  }
  .top-information__heading{
    font-size: 18px;
  }
	.information-info .information-title_en {
    padding: 0 0 0 0;
}
}
@media (max-width: 599px){
.information-info .information-title_en {
  font-size: 3.2rem;
}
	  .top-information__inner{
		  width: 100%;
	 margin-top: -30px;
}
}
@media (max-width: 499px){
	  .top-information{
    padding: 0;
  }
}