/* ============================================================
   ひといろは — UI拡張レイヤー（ui.css）
   トップページ再設計で追加したコンポーネント＋共通UI改善
   ============================================================ */

/* ---------- ヒーロー追加要素のアニメーション ---------- */
.anim .hero-sub{opacity:0;transform:translateY(10px);animation:heroUp .6s var(--ease-soft) .72s both}
.anim .hero-cta{opacity:0;transform:translateY(10px);animation:heroUp .55s var(--ease-soft) .92s both}
.anim .hero-more{opacity:0;animation:hiFadeIn .5s ease 1.15s both}
@media (prefers-reduced-motion:reduce){
  .anim .hero-sub,.anim .hero-cta,.anim .hero-more{transform:none;animation:hiFadeIn .25s ease both}
}

/* ============================================================
   ひといろ アクセントカラー（ロゴの多彩な葉に由来）
   緑を基調に、ティール・青・黄金・オレンジ・ピンク・紫を淡く展開
   ============================================================ */
/* 全ページ共通：最上部のレインボー・アクセントバー */
body::before{content:"";display:block;height:4px;
  background:linear-gradient(90deg,#3E7A5E 0%,#2E8B7F 16%,#4A72B5 33%,#E0A93A 50%,#D9683F 66%,#B4557A 83%,#7A5A9E 100%)}
/* 淡色アクセント背景（白・クリーム基調に重ねる） */
.bg-greenbg{background-color:#EFF4EC}
.bg-tealbg{background-color:#E4F1EE}
.bg-bluebg{background-color:#EDF1F8}
.bg-yellowbg{background-color:#FBF3DE}
.bg-peachbg{background-color:#FBEDE4}
.bg-rosebg{background-color:#F9ECF0}
.bg-plumbg{background-color:#F1ECF6}
/* アクセント文字色 */
.text-teal2{color:#2E7D74}
.text-rose{color:#A94D82}
.text-plum{color:#6E5090}
.text-peach{color:#C15A2E}
/* セクション見出し（sec-en）に色バリエーションを持たせるヘルパー */
.en-teal{color:#2E7D74}
.en-blue{color:#4A72B5}
.en-gold{color:#B07C12}
.en-rose{color:#A94D82}
.en-plum{color:#6E5090}
/* ひといろ グラデーション見出しアクセント（小さな下線バー） */
.hue-bar{position:relative}
.hue-bar::after{content:"";display:block;width:44px;height:3px;border-radius:9999px;margin-top:10px;
  background:linear-gradient(90deg,#3E7A5E,#2E8B7F,#4A72B5,#E0A93A,#D9683F,#A94D82)}
.hue-bar.center::after{margin-left:auto;margin-right:auto}

/* ---------- スクロール後のコンパクトヘッダー ---------- */
#sitehead div[class*="h-[76px]"]{transition:height .25s ease}
#sitehead.scrolled div[class*="h-[76px]"]{height:62px}

/* ---------- テーマ例チップ ---------- */
.theme-chip{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid rgba(62,122,94,.22);border-radius:14px;padding:14px 18px;font-size:13.5px;font-weight:700;line-height:1.7;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.theme-chip::before{content:"";width:7px;height:7px;border-radius:9999px;background:#3E7A5E;flex-shrink:0}
.theme-chip:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(70,80,60,.10);border-color:rgba(62,122,94,.45)}

/* ---------- 主役サービスカード（講演・研修・コンサル） ---------- */
.main-svc{background:#fff;border:1px solid rgba(62,122,94,.18);border-radius:20px;padding:26px 24px;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease,border-color .25s ease}
.main-svc:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(70,80,60,.12);border-color:rgba(62,122,94,.4)}
.main-svc .fmt{display:inline-block;font-size:11px;font-weight:700;color:#2E6B4F;background:#EFF4EC;border-radius:9999px;padding:3px 12px}
.main-svc dt{font-size:11.5px;font-weight:700;color:#3E7A5E;letter-spacing:.08em;margin-top:14px}
.main-svc dd{margin:4px 0 0;font-size:13.5px;line-height:1.9;color:rgba(59,59,55,.88)}

/* ---------- 導入事例カード ---------- */
.case-card{background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease}
.case-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(70,80,60,.12)}
.case-card .case-img{height:170px;position:relative;background:#EFF4EC}
.case-card .case-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.case-row{margin:10px 0 0;font-size:13px;line-height:1.9}
.case-row b{color:#2E6B4F;font-size:11.5px;letter-spacing:.06em;display:block}
.case-placeholder{border:2px dashed rgba(62,122,94,.3);background:#F7F5EE;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:18px;min-height:280px;color:#6E6E66;font-size:13.5px;line-height:2.2;font-weight:700}

/* ---------- 診断 ---------- */
.quiz-opt{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(62,122,94,.3);background:#fff;border-radius:9999px;padding:10px 18px;font-size:13.5px;font-weight:700;color:#3B3B37;cursor:pointer;transition:all .2s ease;user-select:none}
.quiz-opt:hover{border-color:#3E7A5E;background:#EFF4EC}
.quiz-opt input{position:absolute;opacity:0;pointer-events:none}
.quiz-opt.sel{background:#2E6B4F;border-color:#2E6B4F;color:#fff}
.quiz-opt:focus-within{outline:2px solid #3E7A5E;outline-offset:2px}
.quiz-q{font-size:15px;font-weight:900;letter-spacing:.04em}
.quiz-step{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9999px;background:#2E6B4F;color:#fff;font-weight:900;font-size:13px;flex-shrink:0}

/* ---------- FAQ（details/summary アコーディオン） ---------- */
.faq-item{background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:14px;overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:12px;padding:18px 52px 18px 20px;font-size:14.5px;font-weight:700;line-height:1.8;position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{content:"Q";color:#2E6B4F;font-weight:900;font-size:16px;flex-shrink:0}
.faq-item summary::after{content:"";position:absolute;right:20px;top:24px;width:10px;height:10px;border-right:2px solid #3E7A5E;border-bottom:2px solid #3E7A5E;transform:rotate(45deg);transition:transform .25s ease}
.faq-item[open] summary::after{transform:rotate(-135deg);top:28px}
.faq-item summary:hover{background:#F7F5EE}
.faq-item summary:focus-visible{outline:2px solid #3E7A5E;outline-offset:-2px}
.faq-body{padding:0 20px 18px 20px;display:flex;gap:12px;font-size:14px;line-height:2;color:rgba(59,59,55,.9)}
.faq-body::before{content:"A";color:#DE9E33;font-weight:900;font-size:16px;flex-shrink:0}

/* ---------- モバイル固定CTA ---------- */
#sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(255,255,255,.97);backdrop-filter:blur(6px);border-top:1px solid rgba(0,0,0,.08);box-shadow:0 -4px 18px rgba(60,70,50,.10);padding:10px 14px calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px;transform:translateY(110%);transition:transform .3s ease}
#sticky-cta.show{transform:translateY(0)}
#sticky-cta .sc-label{font-size:12.5px;font-weight:700;line-height:1.5;flex:1;min-width:0}
#sticky-cta .sc-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;background:#2E6B4F;color:#fff;font-size:13px;font-weight:700;border-radius:9999px;padding:10px 20px;white-space:nowrap}
#sticky-cta .sc-close{flex-shrink:0;width:30px;height:30px;border-radius:9999px;border:1px solid rgba(0,0,0,.12);background:#fff;color:#6E6E66;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
@media (min-width:768px){#sticky-cta{display:none}}
@media (prefers-reduced-motion:reduce){#sticky-cta{transition:none}}

/* ---------- フォーム（条件分岐・確認画面） ---------- */
.f-label{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;margin-bottom:6px}
.f-req{font-size:10px;font-weight:700;color:#fff;background:#C9880F;border-radius:9999px;padding:2px 9px}
.f-opt{font-size:10px;font-weight:700;color:#6E6E66;background:#EDEDE8;border-radius:9999px;padding:2px 9px}
.f-input{width:100%;box-sizing:border-box;background:#fff;border:1px solid rgba(0,0,0,.14);border-radius:12px;padding:12px 14px;font-family:inherit;color:#3B3B37}
.f-input:focus{outline:2px solid #3E7A5E;outline-offset:1px;border-color:#3E7A5E}
.f-error{display:none;font-size:12.5px;font-weight:700;color:#B4451F;margin-top:5px}
.f-error.show{display:flex;align-items:center;gap:5px}
.f-error.show::before{content:"⚠"}
.f-input.invalid{border-color:#B4451F}
.confirm-table{width:100%;border-collapse:collapse;font-size:13.5px}
.confirm-table th{text-align:left;padding:10px 12px;background:#EFF4EC;color:#2E6B4F;font-size:12px;letter-spacing:.04em;width:32%;border-bottom:6px solid #F7F5EE;border-radius:6px;vertical-align:top}
.confirm-table td{padding:10px 12px;border-bottom:6px solid #F7F5EE;line-height:1.9;background:#fff;border-radius:6px}

/* ---------- ボタンの押しやすさ（タップターゲット） ---------- */
@media (max-width:767px){
  .btn-primary,.btn-outline,.btn-pill{min-height:46px}
  #sticky-cta .sc-btn{min-height:42px}
}

/* 公開前コントラスト補正 */
.sec-en{color:#2E6B4F}
.faq-body::before{color:#8A5C08}