@charset "UTF-8";
/*
Theme Name: 合同会社はちどり 在宅介護支援事業所
Description: テンプレII(c2-3)ベース ／ ゆるかわ・クローバー×ひとしずくデザイン
Version: 1.0
*/
/* !!! このファイルは style.scss + パーシャル から生成。編集は各 .scss を修正のこと !!! */
/* =========================================================
   _base : カラー変数・リセット・共通タイポグラフィ
   （合同会社はちどり / ゆるかわ・クローバー×ひとしずく）
========================================================= */
:root {
  --green-deep: #5b7a3a;   /* 見出し・メインテキスト */
  --green:      #8cbf5d;   /* アクセント緑 */
  --green-soft: #b6da90;
  --clover:     #d8ecc4;   /* クローバー葉色・タグ */
  --clover-bg:  #f0f7e8;   /* ふんわり緑背景 */
  --cream:      #fcfaf3;   /* ベース背景 */
  --brown:      #b3855a;   /* ふた・菓子ラベル茶 */
  --brown-d:    #9a6f47;
  --pink:       #f3b8c4;   /* 翼ピンク（差し色） */
  --pink-soft:  #fad9e0;
  --blue:       #a9cfe8;   /* 翼ブルー（差し色） */
  --blue-soft:  #d6e8f4;
  --yellow:     #f6d98a;   /* ひとしずく黄 */
  --text:       #5c5546;
  --text-soft:  #8a8270;
  --white:      #ffffff;
  --line:       #ece6d8;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Zen Maru Gothic", sans-serif;
  color: var(--text);
  background: var(--cream);
  line-height: 2;
  font-size: 16px;
  letter-spacing: .03em;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

.en {
  font-family: "Cormorant Garamond", serif;
  letter-spacing: .08em;
}

.hand {
  font-family: "Yomogi", cursive;
}

/* 本文ラッパー（下層ページ共通） */
.page_body {
  padding: 60px 6vw 30px;
  max-width: 980px;
  margin: 0 auto;
}

.lead {
  font-size: 15px;
  margin-bottom: 34px;
  line-height: 2;
}

.lead.center {
  text-align: center;
}

/* スクロールでふわっと表示 */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .9, .3, 1);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ページトップへ戻る */
.back-to-top {
  position: fixed;
  right: 3%;
  bottom: 5%;
  z-index: 60;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 6px 16px rgba(91, 122, 58, .25);
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
}


/* =========================================================
   _header : 全体レイアウト / サイドバー / ローディング
========================================================= */

/* ---------- レイアウト ---------- */
.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 286px;
  flex-shrink: 0;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--white);
  border-right: 2px dotted var(--green-soft);
  display: flex;
  flex-direction: column;
  z-index: 50;
}

.content {
  margin-left: 286px;
  width: calc(100% - 286px);
}

/* ---------- サイドバー：ロゴ ---------- */
.side_logo {
  padding: 24px 20px 16px;
  text-align: center;
}

.side_logo .lg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.side_logo .bird_img {
  width: 96px;
  height: auto;
  transform-origin: 60% 55%;
  animation: logoHover 3.6s ease-in-out infinite;
}

@keyframes logoHover {
  0%   { transform: translateY(0) rotate(0deg) scaleY(1); }
  25%  { transform: translateY(-5px) rotate(-1.2deg) scaleY(.985); }
  50%  { transform: translateY(-7px) rotate(0deg) scaleY(.97); }
  75%  { transform: translateY(-5px) rotate(1.2deg) scaleY(.985); }
  100% { transform: translateY(0) rotate(0deg) scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .side_logo .bird_img { animation: none; }
}

.side_logo .nm {
  line-height: 1.3;
  text-align: center;
}

.side_logo .nm small {
  display: block;
  font-size: 11px;
  color: var(--text-soft);
}

.side_logo .nm b {
  font-size: 23px;
  font-weight: 900;
  color: var(--green-deep);
  letter-spacing: .06em;
}

.side_logo .nm span {
  display: block;
  font-size: 9.5px;
  color: var(--text-soft);
  margin-top: 1px;
  letter-spacing: .08em;
}

/* ---------- サイドバー：ナビ ---------- */
.side_nav {
  flex: 1;
  padding: 14px 16px;
}

.side_nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  font-size: 14px;
  color: var(--text);
  border-radius: 30px;
  margin-bottom: 4px;
  transition: .25s;
}

.side_nav a .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--clover);
  flex-shrink: 0;
  transition: .25s;
}

.side_nav a:hover,
.side_nav a.active {
  background: var(--clover-bg);
  color: var(--green-deep);
  font-weight: 700;
}

.side_nav a:hover .dot,
.side_nav a.active .dot {
  background: var(--green);
}

/* ---------- サイドバー：CTA ---------- */
.side_cta {
  padding: 0 16px 22px;
}

.side_cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px;
  color: #fff;
  font-size: 15px;
  border-radius: 30px;
  margin-bottom: 10px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .08);
}

.side_cta .tel {
  background: var(--brown);
}

.side_cta .contact {
  background: var(--green);
}

.side_cta a:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .08);
}

/* ハンバーガー（PCでは非表示） */
.side_toggle {
  display: none;
}

/* ---------- レスポンシブ ---------- */
@media screen and (max-width: 1024px) {
  .sidebar {
    width: 236px;
  }
  .content {
    margin-left: 236px;
    width: calc(100% - 236px);
  }
}

@media screen and (max-width: 768px) {
  /* サイドバーと本文を「縦積み」にする（横並びのまま潰れるのを防ぐ） */
  .layout {
    flex-direction: column;
    min-height: 0;
  }
  /* ヘッダーバー：ロゴ＋ハンバーガー（スクロールしても上に固定） */
  .sidebar {
    position: sticky;
    top: 0;
    width: 100%;
    height: auto;
    flex: none;
    flex-direction: column;
    border-right: none;
    border-bottom: 2px dotted var(--green-soft);
    padding: 0;
    z-index: 60;
    background: var(--white);
    box-shadow: 0 3px 12px rgba(91, 122, 58, .1);
  }
  .content {
    margin-left: 0;
    width: 100%;
  }
  .side_logo {
    padding: 12px 66px 12px 18px;
  }
  .side_logo .lg {
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
  }
  .side_logo .bird_img {
    width: 46px;
  }
  .side_logo .nm {
    text-align: left;
  }
  .side_logo .nm small {
    font-size: 10px;
  }
  .side_logo .nm b {
    font-size: 18px;
  }
  .side_logo .nm span {
    font-size: 8.5px;
  }

  /* ハンバーガーボタン */
  .side_toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    position: absolute;
    top: 35px;
    right: 16px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 3;
  }
  .side_toggle span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 0 auto;
    background: var(--green-deep);
    border-radius: 2px;
    transition: .3s;
  }
  .sidebar.open .side_toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .sidebar.open .side_toggle span:nth-child(2) { opacity: 0; }
  .sidebar.open .side_toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ドロワー（ナビ＋CTA）：閉じている時は隠す */
  .side_nav,
  .side_cta {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    transition: max-height .35s ease, opacity .3s ease, padding .3s ease;
  }
  .side_nav {
    display: block;
    flex: none;
    width: 100%;
  }
  .side_nav a {
    margin-bottom: 2px;
    border-radius: 12px;
  }
  .sidebar.open .side_nav {
    max-height: 480px;
    opacity: 1;
    padding: 8px 16px 4px;
  }
  .side_cta {
    display: flex;
    gap: 10px;
  }
  .side_cta a {
    flex: 1;
    margin-bottom: 0;
  }
  .sidebar.open .side_cta {
    max-height: 160px;
    opacity: 1;
    padding: 4px 16px 16px;
  }
}

/* =========================================================
   ローディング画面 ―― ひとしずく（水彩）
   しずくがぽとん → 波紋が3色でひろがる → 水面からロゴが浮かぶ
========================================================= */
#loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 120% at 50% 0%, #ffffff 0%, var(--cream) 55%, #f4f1e6 100%);
  overflow: hidden;
  transition: opacity .8s ease, visibility .8s ease;
}

#loading.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 背景でふわふわにじむ水彩の円 */
#loading .ld_blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
  opacity: .4;
  animation: ldFloat 7s ease-in-out infinite;
}

#loading .ld_blob.b1 { width: 150px; height: 150px; background: var(--clover); top: 16%; left: 13%; animation-delay: 0s; }
#loading .ld_blob.b2 { width: 90px;  height: 90px;  background: var(--pink);   opacity: .28; top: 64%; left: 18%; animation-delay: 1.4s; }
#loading .ld_blob.b3 { width: 120px; height: 120px; background: var(--blue);   opacity: .3;  top: 22%; right: 15%; animation-delay: .7s; }
#loading .ld_blob.b4 { width: 74px;  height: 74px;  background: var(--clover); top: 66%; right: 20%; animation-delay: 2s; }

@keyframes ldFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}

/* 演出ステージ（しずく・波紋・ロゴの基準） */
#loading .ld_stage {
  position: relative;
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* しずく：上からぽとんと落ちて着水（くり返し） */
#loading .ld_drop {
  position: absolute;
  left: 50%;
  top: 60%;
  width: 18px;
  height: 22px;
  margin-left: -9px;
  margin-top: -11px;
  background: linear-gradient(160deg, var(--blue) 0%, var(--blue-soft) 100%);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .55);
  opacity: 0;
  z-index: 3;
  animation: ldDrop 1.9s ease-in infinite;
}

@keyframes ldDrop {
  0%   { opacity: 0; transform: translateY(-150px) scale(.7); }
  8%   { opacity: 1; }
  42%  { opacity: 1; transform: translateY(0) scale(1); }
  50%  { opacity: 1; transform: translateY(3px) scaleX(1.45) scaleY(.5); }
  60%  { opacity: 0; transform: translateY(4px) scaleX(1.75) scaleY(.35); }
  100% { opacity: 0; transform: translateY(4px) scale(.4); }
}

/* 波紋：着水点から3色の輪がひろがる（しずくと同期してループ） */
#loading .ld_ripple {
  position: absolute;
  left: 50%;
  top: 63%;
  width: 32px;
  height: 15px;
  margin-left: -16px;
  margin-top: -2px;
  border: 2px solid var(--blue);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.2);
}

#loading .ld_ripple.r1 { border-color: var(--blue);       animation: ldRipple1 1.9s ease-out infinite; }
#loading .ld_ripple.r2 { border-color: var(--green-soft); animation: ldRipple2 1.9s ease-out infinite; }
#loading .ld_ripple.r3 { border-color: var(--pink);       animation: ldRipple3 1.9s ease-out infinite; }

@keyframes ldRipple1 {
  0%, 42% { opacity: 0;  transform: scale(.2); }
  52%     { opacity: .6; }
  100%    { opacity: 0;  transform: scale(3.6); }
}
@keyframes ldRipple2 {
  0%, 48% { opacity: 0;  transform: scale(.2); }
  58%     { opacity: .5; }
  100%    { opacity: 0;  transform: scale(4.4); }
}
@keyframes ldRipple3 {
  0%, 54% { opacity: 0;  transform: scale(.2); }
  64%     { opacity: .4; }
  100%    { opacity: 0;  transform: scale(5.2); }
}

/* ロゴ（ハチドリ）：動かさず静止表示 */
#loading .ld_logo {
  width: 168px;
  height: auto;
  position: relative;
  z-index: 2;
  opacity: 1;
}

/* テキスト・ドット */
#loading .ld_text {
  margin-top: 22px;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .35em;
  color: var(--green-deep);
  opacity: 0;
  animation: ldTextIn .9s ease 1.95s forwards;
  padding-left: .35em;
}

#loading .ld_dots {
  margin-top: 16px;
  display: flex;
  gap: 9px;
  opacity: 0;
  animation: ldTextIn .9s ease 2.15s forwards;
}

#loading .ld_dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--green);
  animation: ldPulse 1.4s ease-in-out infinite;
}

#loading .ld_dots span:nth-child(1) { background: var(--green); animation-delay: 0s; }
#loading .ld_dots span:nth-child(2) { background: var(--blue);  animation-delay: .2s; }
#loading .ld_dots span:nth-child(3) { background: var(--pink);  animation-delay: .4s; }

@keyframes ldTextIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ldPulse {
  0%, 100% { opacity: .35; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #loading .ld_blob,
  #loading .ld_drop,
  #loading .ld_ripple,
  #loading .ld_logo,
  #loading .ld_dots span { animation: none; }
  #loading .ld_drop { opacity: 0; }
  #loading .ld_logo,
  #loading .ld_text,
  #loading .ld_dots { opacity: 1; }
}


/* =========================================================
   _front-page : TOPページ
   （ヒーロー / 新着 / ごあいさつ / 強み / 交互2ブロック / 3バナー）
========================================================= */

/* ---------- 展開見出し（共通） ---------- */
.sec_head {
  margin-bottom: 36px;
  text-align: center;
}

.sec_head h2 {
  font-size: 27px;
  color: var(--green-deep);
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  letter-spacing: .04em;
}

.sec_head h2::before,
.sec_head h2::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green-soft);
  display: inline-block;
}

.sec_head .ttl-en {
  font-size: 13px;
  color: var(--green);
  letter-spacing: .2em;
  margin-top: 2px;
}

.wave {
  display: block;
  width: 80px;
  height: 8px;
  margin: 10px auto 0;
  background: radial-gradient(circle at 6px -2px, transparent 6px, var(--green-soft) 7px) 0 0 / 16px 8px repeat-x;
}

/* ---------- ヒーロー ---------- */
.hero {
  position: relative;
  height: 82vh;
  min-height: 500px;
  overflow: hidden;
}

.hero .slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  animation: heroFade 30s infinite;
  opacity: 0;
}

.hero .slide:nth-child(1) { animation-delay: 0s; }
.hero .slide:nth-child(2) { animation-delay: 10s; }
.hero .slide:nth-child(3) { animation-delay: 20s; }

/* 1周30秒 ／ 各写真は約10秒表示。
   前の写真が消えきる前に次が現れるようフェードを重ねて隙間をなくす */
@keyframes heroFade {
  0%   { opacity: 0; transform: scale(1.06); }
  4%   { opacity: 1; }
  30%  { opacity: 1; }
  37%  { opacity: 0; }
  100% { opacity: 0; transform: scale(1); }
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .35));
}

.hero_catch {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 90px;
  z-index: 4;
  text-align: center;
}

.hero_catch p {
  display: inline-block;
  background: rgba(255, 255, 255, .82);
  border-radius: 40px;
  padding: 14px 36px;
  font-size: 22px;
  font-weight: 700;
  color: var(--green-deep);
  box-shadow: 0 8px 24px rgba(91, 122, 58, .18);
}

.hero_catch p small {
  display: block;
  font-size: 12px;
  color: var(--brown);
  margin-top: 2px;
  font-weight: 400;
}

.hero_wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 5;
  line-height: 0;
}

.hero_wave svg {
  width: 100%;
  height: 70px;
}

@media (prefers-reduced-motion: reduce) {
  .hero .slide { animation: none; }
  .hero .slide:nth-child(1) { opacity: 1; }
}

/* ---------- TOP 新着 ---------- */
.top_news {
  background: var(--clover-bg);
  padding: 40px 6vw;
  position: relative;
  overflow: hidden;
}

.top_news::before {
  content: "";
  position: absolute;
  left: -40px;
  top: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
}

.top_news .flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 16px;
}

.top_news h3 {
  font-size: 22px;
  font-weight: 900;
  color: var(--green-deep);
}

.top_news .en {
  font-size: 12px;
  color: var(--green);
}

.top_news .more {
  font-size: 13px;
  color: var(--brown);
  font-weight: 700;
}

.top_news .item {
  display: flex;
  gap: 20px;
  align-items: center;
  background: #fff;
  border-radius: 18px;
  padding: 14px 22px;
  box-shadow: 0 4px 14px rgba(91, 122, 58, .06);
  margin-top: 10px;
}

.top_news .date {
  background: var(--green);
  color: #fff;
  border-radius: 20px;
  padding: 4px 16px;
  font-size: 13px;
  flex-shrink: 0;
}

.top_news .item a {
  font-size: 14px;
  color: var(--text);
}

/* ---------- ごあいさつ ---------- */
.greeting {
  padding: 104px 6vw 24px;
  position: relative;
  text-align: center;
  background-size: cover;
  background-position: center;
}

.greeting .en-bg {
  font-size: 62px;
  color: var(--green);
  font-weight: 600;
  opacity: .9;
  font-family: "Cormorant Garamond", serif;
  letter-spacing: .08em;
}

.greeting h2 {
  font-size: 26px;
  color: var(--green-deep);
  font-weight: 900;
  margin-top: -8px;
}

.greeting .sub {
  font-size: 13px;
  color: var(--green);
  letter-spacing: .08em;
  margin: 6px 0 22px;
}

.greeting p {
  max-width: 680px;
  margin: 0 auto;
  color: var(--text);
  font-size: 15px;
}

.greeting .float1,
.greeting .float2 {
  position: absolute;
  border-radius: 50%;
}

.greeting .float1 {
  left: 7vw;
  top: 80px;
  width: 70px;
  height: 70px;
  background: rgba(169, 207, 232, .45);
}

.greeting .float2 {
  right: 8vw;
  top: 150px;
  width: 46px;
  height: 46px;
  background: rgba(243, 184, 196, .4);
}

/* ---------- 強みカード ---------- */
.strength {
  padding: 50px 6vw 60px;
}

.strength .inner {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1000px;
  margin: 0 auto;
}

.strength .card {
  background: #fff;
  border-radius: 26px;
  padding: 34px 26px 30px;
  flex: 1;
  min-width: 230px;
  text-align: center;
  box-shadow: 0 8px 22px rgba(91, 122, 58, .1);
  border: 2px solid var(--clover);
  position: relative;
}

.strength .card:nth-child(1) { border-color: var(--green-soft); }
.strength .card:nth-child(2) { border-color: var(--blue); }
.strength .card:nth-child(3) { border-color: var(--pink); }

.strength .card .ic {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
}

.strength .card:nth-child(1) .ic { background: var(--green); }
.strength .card:nth-child(2) .ic { background: var(--blue); }
.strength .card:nth-child(3) .ic { background: var(--pink); }

.strength .card h4 {
  font-size: 18px;
  color: var(--green-deep);
  margin-bottom: 8px;
  font-weight: 900;
}

.strength .card p {
  font-size: 13.5px;
  color: var(--text-soft);
  line-height: 1.85;
}

/* 下層内での強み（余白調整） */
.strength.strength_inpage {
  padding: 0;
}

/* ---------- TOP 交互コンテンツ ---------- */
.tcontents {
  padding: 30px 6vw 60px;
}

.tcontents .row {
  display: flex;
  align-items: center;
  gap: 46px;
  margin-bottom: 50px;
}

.tcontents .row:last-child {
  margin-bottom: 0;
}

.tcontents .row.rev {
  flex-direction: row-reverse;
}

.tcontents .ph {
  flex: 1;
  height: 300px;
  background-size: cover;
  background-position: center;
  border-radius: 30px;
  box-shadow: 0 10px 26px rgba(91, 122, 58, .13);
}

.tcontents .tx {
  flex: 1;
}

.tcontents .tx .badge {
  display: inline-block;
  background: var(--clover);
  color: var(--green-deep);
  border-radius: 20px;
  padding: 3px 16px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
}

.tcontents .tx h3 {
  font-size: 22px;
  color: var(--green-deep);
  font-weight: 900;
  margin-bottom: 4px;
}

.tcontents .tx .en {
  display: block;
  font-size: 12px;
  color: var(--green);
  margin-bottom: 14px;
}

.tcontents .tx p {
  font-size: 14.5px;
}

/* 「詳しく見る」ボタン */
.tcontents .tx .tbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 10px 28px;
  background: var(--green);
  color: #fff;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .08);
  transition: .2s;
}

.tcontents .tx .tbtn i {
  font-size: 12px;
  transition: .2s;
}

.tcontents .tx .tbtn:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .08);
}

.tcontents .tx .tbtn:hover i {
  transform: translateX(3px);
}

/* ---------- TOP 3バナー ---------- */
.flexbnr {
  padding: 0 6vw 80px;
}

.flexbnr ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style: none;
}

.flexbnr li a {
  position: relative;
  display: block;
  height: 200px;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(91, 122, 58, .12);
}

.flexbnr li .bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: .5s;
}

.flexbnr li a:hover .bg {
  transform: scale(1.08);
}

.flexbnr li .lbl {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(91, 122, 58, .4);
}

.flexbnr li .lbl .pin {
  background: #fff;
  color: var(--green-deep);
  border-radius: 20px;
  padding: 6px 22px;
  font-weight: 900;
  font-size: 16px;
}

.flexbnr li .lbl span {
  font-size: 11px;
  letter-spacing: .1em;
  color: #fff;
  margin-top: 8px;
}

/* ---------- レスポンシブ ---------- */
@media screen and (max-width: 1024px) {
  .flexbnr ul { grid-template-columns: 1fr; }
}

@media screen and (max-width: 768px) {
  .tcontents .row,
  .tcontents .row.rev { flex-direction: column; gap: 20px; }
  .greeting .float1,
  .greeting .float2 { display: none; }

  /* ヒーロー：SPでは少し短く */
  .hero {
    height: 60vh;
    min-height: 360px;
  }
  /* 1枚目だけ、SPでは左へ寄せる（数値大=左へ / 小=右へ） */
  .hero .slide:nth-child(1) {
    background-position: 97% center;
  }
  /* キャッチ：全体的に少し上へ */
  .hero_catch {
    bottom: 118px;
  }
  .hero_catch p {
    font-size: 18px;
    padding: 12px 24px;
  }

  /* ごあいさつ：文字を少し小さく */
  .greeting {
    padding-top: 74px;
  }
  .greeting .en-bg {
    font-size: 46px;
  }
  .greeting h2 {
    font-size: 21px;
  }
  .greeting .sub {
    font-size: 12px;
    margin: 5px 0 18px;
  }
  .greeting p {
    font-size: 13.5px;
  }
}


/* =========================================================
   _service : 下層共通パーツ
   （下層ヒーロー / 小見出し / 仕事リスト / 3ステップ /
     引用ふきだし / タグ / 認知カフェ / セミナー対応エリア）
========================================================= */

/* ---------- 下層ヒーロー ---------- */
.lower {
  position: relative;
  height: 280px;
  overflow: hidden;
}

.lower .bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.lower .bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .3);
}

.lower .ttl {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.lower .ttl h1 {
  font-size: 29px;
  color: var(--green-deep);
  font-weight: 900;
  background: rgba(255, 255, 255, .78);
  border-radius: 40px;
  padding: 8px 40px;
  box-shadow: 0 6px 20px rgba(91, 122, 58, .15);
}

.lower .ttl .en {
  font-size: 12px;
  color: var(--brown);
  letter-spacing: .16em;
  margin-top: 8px;
}

.lower_wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 3;
  line-height: 0;
}

.lower_wave svg {
  width: 100%;
  height: 50px;
}

/* ---------- 小見出し ---------- */
.mini_head {
  text-align: center;
  margin: 48px 0 22px;
}

.mini_head h3 {
  font-size: 1.25rem;
  color: var(--green-deep);
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}

.mini_head h3::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 34px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--pink), var(--blue));
}

.mini_head .en {
  display: block;
  font-size: .7rem;
  letter-spacing: .25em;
  color: var(--brown);
  margin-top: 6px;
  text-transform: uppercase;
}

/* ---------- 仕事・説明リスト ---------- */
.worklist {
  list-style: none;
}

.worklist li {
  list-style: none;
  margin-bottom: 46px;
}

.worklist h4 {
  font-size: 19px;
  color: var(--green-deep);
  font-weight: 900;
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--clover-bg);
  border-radius: 30px;
  padding: 8px 24px;
}

.worklist h4::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  display: inline-block;
}

.worklist .box {
  display: flex;
  gap: 32px;
  align-items: center;
}

.worklist .box.rev {
  flex-direction: row-reverse;
}

.worklist .box .wt {
  flex: 1.2;
  font-size: 14.5px;
}

.worklist .box .wi {
  flex: 1;
  height: 230px;
  background-size: cover;
  background-position: center;
  border-radius: 26px;
  box-shadow: 0 8px 20px rgba(91, 122, 58, .12);
}

.worklist .box .wi.wi_tall {
  min-height: 320px;
  height: auto;
  align-self: stretch;
}

/* ---------- 引用ふきだし（理念・想い） ---------- */
.mb_quote {
  max-width: 760px;
  margin: 0 auto 8px;
  background: #fff;
  border-radius: 22px;
  padding: 34px 38px;
  box-shadow: 0 14px 34px rgba(91, 122, 58, .1);
  position: relative;
  text-align: center;
}

.mb_quote::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 4px;
}

.mb_quote p {
  font-size: 1.08rem;
  line-height: 2.1;
  color: var(--green-deep);
}

.mb_quote .em {
  color: var(--brown);
  font-weight: 700;
}

/* ---------- 3ステップ ---------- */
.steps {
  display: flex;
  gap: 18px;
  max-width: 920px;
  margin: 8px auto 0;
  flex-wrap: wrap;
  justify-content: center;
}

.steps li {
  list-style: none;
  flex: 1 1 240px;
  background: #fff;
  border-radius: 20px;
  padding: 28px 22px 26px;
  position: relative;
  text-align: center;
  box-shadow: 0 10px 26px rgba(91, 122, 58, .08);
}

.steps li .no {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  color: #fff;
  background: var(--green);
}

.steps li:nth-child(2) .no { background: var(--blue); }
.steps li:nth-child(3) .no { background: var(--pink); }

.steps li .si {
  font-size: 1.5rem;
  margin: 6px 0 10px;
  color: var(--green-deep);
}

.steps li h4 {
  font-size: 1.02rem;
  color: var(--green-deep);
  margin-bottom: 8px;
}

.steps li p {
  font-size: .9rem;
  line-height: 1.85;
  color: #6b6256;
}

/* ---------- タグ ---------- */
.themes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 760px;
  margin: 4px auto 0;
  justify-content: center;
}

.themes span {
  font-size: .85rem;
  background: #fff;
  color: var(--green-deep);
  padding: 9px 18px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(91, 122, 58, .08);
  border: 1px solid rgba(140, 191, 93, .25);
}

/* ---------- 2カード（役割紹介・成年後見人など） ---------- */
.roles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 880px;
  margin: 4px auto 0;
}

.roles .rc {
  background: #fff;
  border: 2px solid var(--clover);
  border-radius: 26px;
  padding: 30px 28px;
  box-shadow: 0 8px 20px rgba(91, 122, 58, .08);
}

.roles .rc:nth-child(1) { border-color: var(--green-soft); }
.roles .rc:nth-child(2) { border-color: var(--blue); }

.roles .rc h5 {
  font-size: 18px;
  color: var(--green-deep);
  font-weight: 900;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.roles .rc h5 .ic {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--clover-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  font-size: 20px;
  flex-shrink: 0;
}

.roles .rc:nth-child(2) h5 .ic {
  background: var(--blue-soft);
  color: #5a86a8;
}

.roles .rc p {
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.9;
}

@media screen and (max-width: 768px) {
  .roles { grid-template-columns: 1fr; }
}

/* ---------- 区切り ---------- */
.soft_div {
  height: 1px;
  max-width: 120px;
  margin: 46px auto;
  background: linear-gradient(90deg, transparent, var(--clover), transparent);
}

.sm_note {
  font-size: .82rem;
}

/* ---------- 認知カフェ：準備中 ---------- */
.prep {
  text-align: center;
  padding: 24px 0 10px;
}

.prep .sign {
  display: inline-block;
  background: #fff;
  border: 3px dashed var(--green-soft);
  border-radius: 30px;
  padding: 30px 60px;
  color: var(--green-deep);
  font-size: 28px;
  font-weight: 900;
  position: relative;
  box-shadow: 0 8px 20px rgba(91, 122, 58, .1);
}

.prep .sign::before {
  content: "";
  position: absolute;
  left: -10px;
  top: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blue);
}

.prep .sign::after {
  content: "";
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--pink);
}

.prep p {
  margin-top: 26px;
  color: var(--text-soft);
  font-size: 15px;
}

.cafe_lead {
  max-width: 760px;
  margin: 0 auto 30px;
  text-align: center;
  line-height: 2.05;
  color: #6b6256;
}

.cafe_pre {
  display: flex;
  gap: 18px;
  max-width: 880px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}

.cafe_pre .cp {
  flex: 1 1 240px;
  background: #fff;
  border-radius: 20px;
  padding: 26px 24px;
  text-align: center;
  box-shadow: 0 10px 26px rgba(91, 122, 58, .08);
}

.cafe_pre .cp .ci {
  font-size: 1.7rem;
  margin-bottom: 10px;
}

.cafe_pre .cp:nth-child(1) .ci { color: var(--green); }
.cafe_pre .cp:nth-child(2) .ci { color: var(--blue); }
.cafe_pre .cp:nth-child(3) .ci { color: var(--pink); }

.cafe_pre .cp h4 {
  color: var(--green-deep);
  margin-bottom: 8px;
  font-size: 1.02rem;
}

.cafe_pre .cp p {
  font-size: .9rem;
  line-height: 1.85;
  color: #6b6256;
}

/* ---------- セミナー：対応エリア ---------- */
.area_map {
  margin: 36px auto 0;
  max-width: 440px;
  background: #fff;
  border: 2px solid var(--clover);
  border-radius: 26px;
  padding: 26px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(91, 122, 58, .08);
}

.area_map .mt {
  color: var(--green-deep);
  font-weight: 900;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.area_map .mt::before {
  content: "\f3c5";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--green);
}

.area_map .pill {
  display: inline-block;
  background: var(--yellow);
  color: #7a5c1e;
  border-radius: 24px;
  padding: 7px 22px;
  margin: 5px;
  font-size: 14px;
  font-weight: 700;
}

.area_map .note {
  font-size: 12.5px;
  color: var(--text-soft);
  margin-top: 14px;
}

/* ---------- レスポンシブ ---------- */
@media screen and (max-width: 768px) {
  .worklist .box,
  .worklist .box.rev { flex-direction: column; gap: 20px; }
  .steps li,
  .cafe_pre .cp { flex: 1 1 100%; }
  .lower .ttl h1 { font-size: 22px; padding: 8px 28px; }
}


/* =========================================================
   _company : 会社概要
   （企業理念 / 会社情報テーブル / 代表プロフィール / アクセス）
========================================================= */

.philosophy {
  background: var(--clover-bg);
  border-radius: 26px;
  padding: 30px 32px;
  margin-bottom: 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.philosophy::before {
  content: "";
  position: absolute;
  left: -30px;
  top: -30px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
}

.philosophy h2 {
  font-size: 19px;
  color: var(--green-deep);
  font-weight: 900;
  margin-bottom: 12px;
  position: relative;
}

.philosophy p {
  font-size: 14.5px;
  position: relative;
}

/* ---------- 会社情報テーブル ---------- */
.ctable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  margin-top: 10px;
}

.ctable th,
.ctable td {
  padding: 15px 18px;
  text-align: left;
  font-size: 14.5px;
  vertical-align: top;
}

.ctable th {
  width: 170px;
  color: var(--green-deep);
  font-weight: 900;
  background: var(--clover-bg);
  border-radius: 16px 0 0 16px;
}

.ctable td {
  background: #fff;
  border-radius: 0 16px 16px 0;
}

/* ---------- 代表者プロフィール ---------- */
.profile {
  max-width: 880px;
  margin: 6px auto 0;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 300px 1fr;
  box-shadow: 0 14px 34px rgba(91, 122, 58, .1);
}

.profile .pimg {
  background-size: cover;
  background-position: center;
  min-height: 340px;
  position: relative;
}

.profile .pimg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, transparent 60%, rgba(168, 207, 232, .25));
}

.profile .pbody {
  padding: 34px 38px;
}

/* 写真なしプロフィール（1カラム・文章のみ） */
.profile.no_img {
  grid-template-columns: 1fr;
  max-width: 760px;
}

.profile.no_img .pbody {
  padding: 34px 40px 36px;
}

.profile .pbody .role {
  font-size: .74rem;
  letter-spacing: .2em;
  color: var(--brown);
  text-transform: uppercase;
}

.profile .pbody h3 {
  font-size: 1.5rem;
  color: var(--green-deep);
  margin: 6px 0 4px;
}

.profile .pbody h3 .ruby {
  font-size: .78rem;
  color: #9a9384;
  margin-left: 10px;
  letter-spacing: .1em;
}

.profile .pbody .lic {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 16px 0 20px;
}

/* 資格チップ：数が多くても軽く見えるよう白地＋細ボーダー */
.profile .pbody .lic span {
  font-size: .74rem;
  line-height: 1.5;
  background: #fff;
  color: var(--green-deep);
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid rgba(140, 191, 93, .4);
}

.profile .pbody p {
  font-size: .95rem;
  line-height: 2;
  color: #6b6256;
}

/* ---------- アクセス ---------- */
.access {
  max-width: 980px;
  margin: 6px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  align-items: stretch;
}

.access .amap {
  border-radius: 20px;
  overflow: hidden;
  min-height: 300px;
  box-shadow: 0 10px 26px rgba(91, 122, 58, .08);
}

.access .amap iframe {
  width: 100%;
  height: 100%;
  min-height: 300px;
  border: 0;
  display: block;
}

.access .ainfo {
  background: #fff;
  border-radius: 20px;
  padding: 30px 32px;
  box-shadow: 0 10px 26px rgba(91, 122, 58, .08);
}

.access .ainfo dl {
  display: grid;
  grid-template-columns: 96px 1fr;
  row-gap: 14px;
  column-gap: 14px;
}

.access .ainfo dt {
  font-size: .82rem;
  color: var(--brown);
  font-weight: 700;
  padding-top: 2px;
}

.access .ainfo dd {
  font-size: .95rem;
  color: #5b5347;
  line-height: 1.7;
}

.access .ainfo .tel_big {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.7rem;
  color: var(--green-deep);
  font-weight: 700;
  letter-spacing: .02em;
}

.access .ainfo .tel_note {
  font-size: .82rem;
  color: #9a9384;
}

/* ---------- レスポンシブ ---------- */
@media screen and (max-width: 768px) {
  .ctable th { width: 110px; }
  .profile { grid-template-columns: 1fr; }
  .profile .pimg { min-height: 240px; }
  .access { grid-template-columns: 1fr; }
}


/* =========================================================
   _contact : お問い合わせ（フォーム / Q&A）
   ※ フォーム本体は Contact Form 7 出力に合わせて汎用指定
========================================================= */

.cform {
  max-width: 680px;
  margin: 0 auto;
}

.cform p {
  margin-bottom: 20px;
}

.cform label {
  display: block;
  font-size: 14px;
  color: var(--green-deep);
  font-weight: 700;
  margin-bottom: 18px;
}

/* ラベルが入力欄を内包する構成（このフォーム）への調整 */
.cform label input,
.cform label textarea,
.cform label select {
  margin-top: 6px;
  font-weight: 400;
}

.cform input,
.cform textarea,
.cform select {
  width: 100%;
  border: 2px solid var(--clover);
  border-radius: 18px;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 15px;
  background: #fff;
  color: var(--text);
}

.cform input[type="submit"],
.cform input[type="button"] {
  width: auto;
}

.cform input:focus,
.cform textarea:focus,
.cform select:focus {
  outline: none;
  border-color: var(--green);
}

.cform .req,
.cform .wpcf7-required,
.cform .red {
  display: inline-block;
  color: #fff;
  background: var(--pink);
  border-radius: 10px;
  font-size: 11px;
  padding: 1px 8px;
  margin-left: 6px;
  vertical-align: middle;
}

/* 「任意」バッジ（このフォームは class="blue"） */
.cform .blue {
  display: inline-block;
  color: #5a86a8;
  background: var(--blue-soft);
  border-radius: 10px;
  font-size: 11px;
  padding: 1px 8px;
  margin-left: 6px;
  vertical-align: middle;
}

/* チェックボックス・ラジオは幅auto（100%にしない） */
.cform input[type="checkbox"],
.cform input[type="radio"] {
  width: auto;
  margin: 0 6px 0 0;
  vertical-align: middle;
}

/* プライバシーポリシー同意（チェックボックス行） */
.cform label.policy {
  text-align: center;
  font-weight: 400;
  color: var(--text);
  margin: 10px 0 4px;
}
.cform label.policy .wpcf7-list-item {
  margin: 0;
}
.cform label.policy .wpcf7-list-item-label {
  font-weight: 400;
  color: var(--text);
}

/* ボタン置き場を中央に（送信・確認・戻る） */
.cform .submit,
.cform .form_btns,
.cform .wpcf7-form > p:last-of-type {
  text-align: center;
  margin-top: 28px;
}

/* ボタン（送信 / 確認 / 戻る）：ピル型・常に中央揃え */
.cform .wpcf7-submit,
.cform .wpcf7c-btn-confirm,
.cform .wpcf7c-btn-back,
.cform button[type="submit"],
.cform input[type="submit"],
.cform input[type="button"] {
  display: block;
  width: fit-content;
  min-width: 220px;
  margin: 14px auto 0;
  background: var(--brown);
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 14px 44px;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--brown-d);
  transition: .15s;
}

.cform .wpcf7-submit:hover,
.cform .wpcf7c-btn-confirm:hover,
.cform button[type="submit"]:hover,
.cform input[type="submit"]:hover {
  transform: translateY(2px);
  box-shadow: 0 3px 0 var(--brown-d);
}

/* 「戻る」ボタンは控えめなグレー */
.cform .wpcf7c-btn-back,
.cform input[type="button"] {
  background: #b8b2a3;
  box-shadow: 0 5px 0 #9a9384;
}
.cform .wpcf7c-btn-back:hover,
.cform input[type="button"]:hover {
  transform: translateY(2px);
  box-shadow: 0 3px 0 #9a9384;
}

/* 確認画面：入力値（readonly）の見た目 */
.cform input[readonly],
.cform textarea[readonly] {
  background: var(--clover-bg);
  border-style: dashed;
  color: var(--text);
}

/* テーブル / 定義リスト型のフォームレイアウトにも対応 */
.cform table {
  width: 100%;
  border-collapse: collapse;
}
.cform table th,
.cform table td {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
}
.cform table th,
.cform dt {
  margin: 16px 0 6px;
  font-size: 14px;
  color: var(--green-deep);
  font-weight: 700;
}
.cform dl { margin: 0; }
.cform dd { margin: 0 0 14px; }

/* CF7 各種メッセージ */
.cform .wpcf7-response-output {
  border-radius: 12px;
  margin: 18px auto 0;
  max-width: 680px;
}

.cform .wpcf7-not-valid-tip {
  font-size: 12px;
  color: #c0392b;
}

/* ---------- 送信完了カード ---------- */
.thanks_box {
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  border-radius: 26px;
  padding: 48px 40px 44px;
  text-align: center;
  box-shadow: 0 14px 34px rgba(91, 122, 58, .1);
  border: 2px solid var(--clover);
}

.thanks_box .thanks_ic {
  font-size: 3rem;
  color: var(--green);
  margin-bottom: 16px;
}

.thanks_box .thanks {
  font-size: 1rem;
  line-height: 2;
  color: #6b6256;
  margin-bottom: 26px;
}

.thanks_box .thanks_home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green);
  color: #fff;
  border-radius: 30px;
  padding: 12px 34px;
  font-weight: 700;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .08);
  transition: .15s;
}

.thanks_box .thanks_home:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .08);
}

/* ---------- Q&A（details / summary） ---------- */
.qa {
  max-width: 820px;
  margin: 6px auto 0;
}

.qa details {
  background: #fff;
  border-radius: 16px;
  margin-bottom: 14px;
  box-shadow: 0 8px 22px rgba(91, 122, 58, .07);
  overflow: hidden;
}

.qa summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-weight: 700;
  color: var(--green-deep);
  position: relative;
}

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

.qa summary .q {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--clover);
  color: var(--green-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
}

.qa summary::after {
  content: "+";
  margin-left: auto;
  font-size: 1.3rem;
  color: var(--brown);
  transition: transform .25s;
}

.qa details[open] summary::after {
  transform: rotate(45deg);
}

.qa .ans {
  padding: 0 24px 22px 68px;
  color: #6b6256;
  line-height: 1.95;
  font-size: .94rem;
}

@media screen and (max-width: 768px) {
  .qa .ans { padding-left: 24px; }
}


/* =========================================================
   _policy : プライバシーポリシー
========================================================= */
.policy {
  max-width: 820px;
  margin: 0 auto;
}

.policy h3 {
  font-size: 1.05rem;
  color: var(--green-deep);
  font-weight: 900;
  margin: 30px 0 10px;
  padding: 6px 0 6px 14px;
  border-left: 4px solid var(--green-soft);
  line-height: 1.5;
}

.policy h3:first-child {
  margin-top: 0;
}

.policy p {
  font-size: .95rem;
  line-height: 1.95;
  color: #6b6256;
  margin-bottom: 8px;
}

@media screen and (max-width: 768px) {
  .policy h3 { font-size: 1rem; }
  .policy p { font-size: .9rem; }
}


/* =========================================================
   _footer : フッターお問い合わせ / フッターナビ / コピーライト
========================================================= */

.foot_contact {
  padding: 64px 6vw;
  background: var(--clover-bg);
  position: relative;
  overflow: hidden;
}

/* 背景画像を設定したとき（footer_contact_bg）
   画像が見えるようベールは控えめ（.5）にし、文字は白グローで読みやすく */
.foot_contact.has_bg {
  background-size: cover;
  background-position: center top;
  box-shadow: inset 0 0 0 100vw rgba(252, 250, 243, .5);
}

.foot_contact.has_bg .inner {
  text-shadow: 0 1px 6px rgba(255, 255, 255, .9), 0 0 2px rgba(255, 255, 255, .9);
}

.foot_contact::before {
  content: "";
  position: absolute;
  left: -50px;
  bottom: -50px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
}

.foot_contact::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
}

.foot_contact .inner {
  text-align: center;
  position: relative;
  z-index: 2;
}

.foot_contact h2 {
  font-size: 26px;
  color: var(--green-deep);
  font-weight: 900;
}

.foot_contact .en {
  font-size: 13px;
  color: var(--brown);
  margin-bottom: 24px;
}

.foot_contact .btns {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}

.foot_contact .btns a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  padding: 16px 38px;
  border-radius: 30px;
  font-size: 16px;
  min-width: 260px;
  justify-content: center;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .1);
}

.foot_contact .btns .b1 { background: var(--brown); }
.foot_contact .btns .b2 { background: var(--green); }

.foot_contact .btns a:hover {
  transform: translateY(2px);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .1);
}

.foot_contact .addr {
  margin-top: 20px;
  font-size: 13.5px;
  color: var(--text-soft);
}

.foot_contact .foot_lead {
  margin-top: 8px;
}

/* ---------- フッター ---------- */
footer {
  background: var(--green-deep);
  color: #fff;
  padding: 38px 6vw 24px;
}

footer .fnav {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

footer .fnav a {
  font-size: 13px;
  opacity: .92;
}

footer .fnav a:hover {
  opacity: 1;
  text-decoration: underline;
}

footer .policy {
  text-align: center;
  margin-bottom: 16px;
}

footer .policy a {
  font-size: 12px;
  opacity: .8;
  text-decoration: underline;
}

footer .cr {
  text-align: center;
  font-size: 12px;
  opacity: .7;
  border-top: 1px solid rgba(255, 255, 255, .2);
  padding-top: 16px;
}


/* =========================================================
   _deco : 水彩の黄色い花・葉っぱ装飾（6点だけ）
   ・各セクションの「上部・中央」にちょこんと配置
   ・pointer-events:none / 低opacity で邪魔にならない
   ・中央寄せは margin-left で行う（transform は揺れ用に空けておく）
   ・画像は img/deco/ の外部PNGを参照（ACFではなく固定アセット）
========================================================= */

/* 装飾ベース */
.deco {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}

/* ゆらぎアニメーション（reduced-motion では無効） */
@media (prefers-reduced-motion: no-preference) {
  .deco.sway  { animation: dcSway 7s ease-in-out infinite; }
  .deco.sway2 { animation: dcSway 9s ease-in-out infinite reverse; }
}

@keyframes dcSway {
  0%, 100% { transform: rotate(var(--rot, 0deg)); }
  50%      { transform: rotate(calc(var(--rot, 0deg) + 4deg)) translateY(-3px); }
}

/* 装飾がはみ出せるよう対象セクションに positioning */
.greeting,
.strength {
  position: relative;
  overflow: visible;
}
.foot_contact {
  position: relative;
}

/* --- HERO：上部中央に 花＋葉 を左右にちょこん --- */
.hero .d-h1 {
  width: 100px;
  height: 92px;
  background-image: url("img/deco/yellow-1.png");
  left: 50%;
  margin-left: -138px;   /* 中央より少し左 */
  top: 8px;
  opacity: .8;
  --rot: -6deg;
  z-index: 6;
}
.hero .d-h2 {
  width: 66px;
  height: 92px;
  background-image: url("img/deco/leaf-fern.png");
  left: 50%;
  margin-left: 70px;     /* 中央より少し右 */
  top: 2px;
  opacity: .42;
  --rot: 6deg;
  z-index: 6;
}

/* --- GREETING：見出しの真上・中央に花 --- */
.greeting .d-g2 {
  width: 60px;
  height: 52px;
  background-image: url("img/deco/yellow-3.png");
  left: 50%;
  margin-left: -30px;
  top: 4px;
  opacity: .78;
  --rot: 8deg;
}

/* --- strength（カード帯）：上・中央からツタ葉がちょこん --- */
.strength .d-s1 {
  width: 74px;
  height: 84px;
  background-image: url("img/deco/leaf-vine.png");
  left: 50%;
  margin-left: -37px;
  top: -26px;
  opacity: .4;
  --rot: 6deg;
}

/* --- foot_contact：見出しの上・中央に花（文字の背面） --- */
.foot_contact .d-f2 {
  width: 66px;
  height: 60px;
  background-image: url("img/deco/yellow-1.png");
  left: 50%;
  margin-left: -33px;
  top: 8px;
  opacity: .8;
  --rot: -8deg;
  z-index: 1;
}

/* --- スマホ（768px以下）：小さめ・さらに控えめ --- */
@media screen and (max-width: 768px) {
  .hero .d-h1 { width: 66px; height: 61px; margin-left: -92px; top: 6px; opacity: .75; }
  .hero .d-h2 { width: 46px; height: 64px; margin-left: 46px; opacity: .36; }
  .greeting .d-g2 { width: 46px; height: 40px; margin-left: -23px; }
  .strength .d-s1 { width: 50px; height: 57px; margin-left: -25px; top: -18px; opacity: .32; }
  .foot_contact .d-f2 { width: 50px; height: 45px; margin-left: -25px; opacity: .75; }
}