/* ============================================================
   デザイントークン（共通変数）
   ここの値を変えると全ページに反映される。マジックナンバーは原則ここに集約。
   ブレークポイント規約：スマホ ~599 / タブレット 600~1023 / PC 1024~ / PCワイド 1280~
   ============================================================ */
:root {
    /* レイアウト寸法 */
    --header-h: 78px;          /* PCヘッダー実高（main の margin-top と一致させる） */
    --header-h-sp: 70px;       /* タブレット（1023px以下）のヘッダー高 */
    --header-h-xs: 40px;       /* スマホ（599px以下）のヘッダー高（コンパクト） */
    --contactbar-h: 96px;      /* タブレット以下：下部固定 contact_box の高さ（被り回避用余白） */
    --contactbox-w: 180px;     /* PC：右下 contact_box との被り回避幅 */
    --nav-col-w: 240px;        /* PC：左カラム（質問一覧）幅 */
    --sticky-gap: 20px;        /* ヘッダーと sticky 要素の隙間 */
    --content-max: 1200px;     /* 本体コンテンツ（assessment/care-plan）の最大幅 */
    --container-max: 1280px;   /* .container の最大幅（外箱） */
    --logo-h: 52px;            /* PCのロゴ高さ（サイトごとに上書き可） */
    --logo-h-sp: 44px;         /* タブレット（1023px以下）のロゴ高さ */
    --logo-h-xs: 28px;         /* スマホ（599px以下）のロゴ高さ */

    /* 色 */
    --c-primary: #ae4480;          /* ブランド紫 */
    --c-primary-light: #d975a9;    /* 明るい紫 */
    --c-accent-pink: #fbeef2;      /* 薄ピンク（アクセント背景） */
    --c-answer-green: #5f9d6b;     /* 回答アクション緑 */
    --c-answer-green-dark: #4f8a5b;/* 緑（濃いめ・選択中） */
    --c-text: #333;
    --c-bg: #f5f5f5;
    --c-border: #ececec;

    /* 角丸 */
    --radius-card: 12px;

    /* チャットUI用の淡色トークン（介護相談専用。ケアプラン作成の淡く洗練されたトーンに寄せる）
       色を変えたいときはここだけ触ればよい。上の共通トークンはケアプランと同一値を維持。
       役割分担：初期挨拶＝うす黄色で目立たせる／AI回答＝白／ユーザー質問＝薄グレー（ケアプランと同値） */
    --c-chat-greeting-bg: #fdf7e3;  /* 初期挨拶：うす黄色（冒頭だけ目立たせる） */
    --c-chat-greeting-border: #efe6c8;
    --c-chat-ai-bg: #ffffff;        /* AI回答：白背景 */
    --c-chat-ai-border: #ececec;
    --c-chat-user-bg: #ffffff;      /* ユーザー質問：白背景（グレー地に浮かせる） */
    --c-chat-user-border: var(--c-primary-light);  /* ピンク枠で話者を区別（ケアプラン流） */
    --c-surface-soft: #f9f9f9;      /* 入力例・カード内の淡いグレー面 */
    --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.1);          /* ケアプラン準拠の控えめな影 */
    --shadow-hover: 0 4px 12px rgba(174, 68, 128, 0.1);    /* ホバーの淡い紫影 */
}

/* リセットとベーススタイル */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
	width: auto;
	vertical-align:baseline;
	word-wrap: break-word;
}

body {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic UI', Meiryo, Arial, sans-serif;
	font-size: 17px;
    font-weight: 400;
	line-height: 1.7;
	letter-spacing: 0.02em;
	-webkit-text-size-adjust: 100%;
	color: var(--c-text);
	background-color: var(--c-bg);
	overflow-x: hidden;
}

a:link, a:active, a:hover, a:focus {
    outline: none!important;
    -moz-outline-style: none;
}

img, video {
	width: 100%;
	height: auto;
	vertical-align: bottom;
	border:none;
}

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 20px;
}

.pc {display: inline}

.sp {display: none}

.nowrap {white-space: nowrap;}

/* ヘッダー：高さをトークンで固定し、main の margin-top と必ず一致させる（被り／隙間を防ぐ）。
   高さは height 固定で担保。overflow は hidden にしない（ドロップダウンを下に開かせるため）。 */
header {
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: fixed;
    width: 100%;
    top: 0;
    height: var(--header-h);
    z-index: 1000;
}

nav, nav .container {height: 100%;}

nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

h1 {
	width: auto;
	height: auto;
	margin-block-start: 0;
    margin-block-end: 0;
}

h1 img {height: var(--logo-h); width: auto;}

.header-right {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}


/* メインコンテンツ */
main {margin-top: var(--header-h);}

/*フッター前バナーセクション*/
.banner_section {margin-top:2rem;}

.banner_wrapper {
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 15px;
}

.banner_wrapper li {width: 16.6%; height: auto;}

.banner_wrapper li a {transition: 0.6s;}

.banner_wrapper li a:hover {opacity: 0.6;}

/* 全ページ共通の注意書き（フッター直前）。マークアップは各HTMLに静的に記述している */
.site-notice {
	font-size: 0.8rem;
    color: #555;
	text-indent: -0.8rem;
	text-align: center;
	margin-top: 1.3rem;
	margin-left: 0.8rem;
}

/* フッター */
footer {
    background-color: var(--c-primary);
    color: #ffffff;
    text-align: center;
	margin-top: 2rem;
	padding: 2rem 20px;
}

.footer_container {
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
}

.footer_container p {
	width: 100%;
	text-align: center;
	margin: 0 auto;
}

.footer_icon_wrapper, .outside_link {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 15px;
}

.footer_icon_wrapper {
	top: 0;
	left: 0;
}

.outside_link{
	top: 0;
	right: 0;
}

.footer_button {
	display: block;
	color: #ffffff;
	text-decoration: none;
}

.footer_button {transition: 0.6s;}

.footer_button:hover {opacity: 0.6;}

.footer_button img {
	display: inline-block;
	height: 1.5em;
	width: auto;
}

/* コンタクトボタン */
.contact_box {
	position: fixed;
	right: 12px;          /* スクロールバーと密着しないよう右端に余白 */
	bottom: 80px;
	z-index: 500;
}

/* PC：右下に固定された contact_box と本文・バナーが重ならないように右余白を確保する。
   本文は main 配下の .container をまとめて対象にする（portal のように本文セクションが
   複数あるサイトでも効かせるため。3サイトは main 内が1セクションなので結果は同じ）。
   2026-09-18 に各サイトのCSSへ散らばっていた同じ指定をここへ集約した。
   ★ヘッダー（nav .container）は含めない。contact_box は bottom:80px にあり元々重ならないため、
     右余白を付けるとハンバーガーの右に無駄な空きができる。ヘッダーは常に画面の右端に寄せる。 */
@media (min-width: 1024px) {

main .container,
#banner_section .container {padding-right: var(--contactbox-w);}

/* contact_box を出さないページ（送信完了など）は被り回避が不要なので通常値に戻す */
.page-no-contactbar main .container,
.page-no-contactbar #banner_section .container {padding-right: 20px;}

}

.contact_box ul {list-style: none;}

.contact_box li {margin-bottom: 15px; transition: 0.5s;}

.contact_box li:hover {opacity: 0.8;}

.contact_box li a {
	display: inline-block;
	width: 150px;
	padding: 10px;
}

.contact_box li button {border: none;}

.contact_01 {background: #64569d;}
.contact_02 {background: #00a65a;}
.contact_03 {background: #00a8ba;}
.contact_04 {background: #eb9754; pointer-events: none;}

.tel_popup {
	display: none;
    position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
}

.tel-area  {
    position: absolute;
    top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 5rem;
	background: #ffffff;
}

.close {
	position: absolute;
	top: 1rem;
	right: 1rem;
    color: #000;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #444;
    text-decoration: none;
    cursor: pointer;
}

.tel-number {
	font-size: 2rem;
	color: var(--c-primary);
}

/* ハンバーガーメニュー */
.hamburger-menu {position: relative;}

.hamburger-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;       /* 3本線の絶対配置の基準 */
    width: 45px;
    height: 45px;
    transition: all 0.3s ease;
}

/* 3本線は中央を基準に絶対配置。線長は width で固定（回転しても左右対称） */
.hamburger-btn span {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 3px;
    margin-left: -12px;       /* width の半分 = 水平中央 */
    margin-top: -1.5px;       /* height の半分 = 垂直中央 */
    background-color: var(--c-primary);
    border-radius: 3px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
}
/* 通常時：上・中・下に配置（中央線基準に上下 7px） */
.hamburger-btn span:nth-child(1) {transform: translateY(-7px);}
.hamburger-btn span:nth-child(2) {transform: translateY(0);}
.hamburger-btn span:nth-child(3) {transform: translateY(7px);}

.hamburger-btn:hover span {background-color: var(--c-primary);}

/* ×印：上下の線を中央(translateY 0)に集めてから回転。中心が一致するので左右対称の× */
.hamburger-btn.active span:nth-child(1) {transform: rotate(45deg);}
.hamburger-btn.active span:nth-child(2) {opacity: 0;}
.hamburger-btn.active span:nth-child(3) {transform: rotate(-45deg);}

/* ドロップダウンはハンバーガーボタン（.hamburger-menu が position:relative）の真下に absolute 配置。
   こうするとアイコンと右端が必ず揃う（fixed だと画面基準になりアイコンとズレるため）。
   header は overflow:hidden を外したので、下に開いた部分も切れない。 */
.hamburger-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    background-color: #ffffff;
    min-width: 280px;
    max-width: calc(100vw - 40px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border-radius: 12px;
    padding: 1rem 0;
    z-index: 1001;            /* header(1000) より前面に */
    margin-top: 0.5rem;
    border: 1px solid #e0e0e0;
}

/* ドロップダウンを全BPで position:fixed（画面基準）にしたため、ボタン直下に三角を合わせられない。
   三角は使わず、影付きカードのみのシンプルな見た目に統一する。 */
.hamburger-dropdown::before {display: none;}

.hamburger-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-size: 1rem;
    font-family: inherit;
    white-space: nowrap;             /* リンク名を1行に固定（折り返し防止） */
}

.hamburger-item:hover {
    background-color: #f5f5f5;
    color: var(--c-primary);
}

.hamburger-icon {
    color: var(--c-primary-light);
}

.hamburger-divider {
    height: 1px;
    background-color: #e0e0e0;
    margin: 0.5rem 0;
}

/* ハンバーガーメニュー：現在表示中のページを強調（全ページ共通） */
.hamburger-item.is-current {
    background-color: var(--c-accent-pink);
    color: var(--c-primary);
    font-weight: 700;
    cursor: default;
    pointer-events: none;
}

/* ==================================================
==================下層ページ共通CSS====================
================================================== */
.contactus_h {min-height: 100vh;}

.thanks_text {text-align: center; padding: 200px 0;}

.thanks_text h3 {font-size: 2rem; color: var(--c-primary);}

.thanks_text p {line-height: 2.3; margin-top: 20px;}

.light {height: 1.1em; width: auto;}

.bottom-page-wrap {
    padding-bottom: 2rem;
    min-height: calc(100vh - 200px);
}


/* レスポンシブデザイン（タブレット＋スマホ：~1023px） */
@media (max-width: 1023px) {

.site-notice {text-align: left;}

.pc {display: none}

.sp {display: inline}

h1 {padding-right: 15px;}

h1 img {height: var(--logo-h-sp);}

.header-right{width: 50%;}

/* タブレット：ヘッダー高を --header-h-sp(70px) に固定（実高がロゴ＋paddingで膨らみ main と被るのを防ぐ） */
header {height: var(--header-h-sp);}
nav .container {padding: 0 10px;}
/* ドロップダウンは共通の absolute（top:100% = ボタン直下）でアイコンに揃うので個別指定不要 */

main {margin-top: var(--header-h-sp);}

.banner_wrapper {display: block;}

.banner_wrapper li {width: 70%; margin: 0 auto 15px;}
	
.banner_wrapper li.end {margin-bottom: 0;}

/* タブレット以下：フッターは下部固定の contact_box 横帯と重なるが、
   フッターの1行テキストの「下」にピンク帯（フッター背景）を厚めに確保しておくことで、
   バナー帯が帯の上に重なっても1行テキストには被らないようにする。
   レイアウトは absolute をやめ Flex の1行（space-between）にして、幅が縮んでも要素が重ならないようにする。 */
footer {padding: 1.5rem 20px 160px;}

.footer_container {
	position: static;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 15px;
}

.footer_icon_wrapper, .outside_link {position: static; top: auto; left: auto; right: auto;}

.outside_link {font-size: 0.9rem;}

/* © 行は Flex 内の1アイテム。中央寄せをやめ、3要素を均等配置（被り回避） */
.footer_container p {width: auto; margin: 0; order: 3;}
.footer_icon_wrapper {order: 1;}
.outside_link {order: 2;}

/* コンタクトボタン（タブレット以下は下部固定の横帯） */
.contact_box {
	position: fixed;
	right: 50%;
	transform: translateX(50%);
	bottom: 0;
	width: 100%;
	z-index: 500;
	background-color: #ffffff;
	box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
}

.contact_box ul {display: flex; justify-content: space-around;}

.contact_box li {margin: 0;}

.contact_box li a {
	display: inline-block;
	width: 100%;
	padding: 5px;
}

.contact_04 {background: #eb9754; pointer-events: auto;}

/* 下部固定の contact_box とコンテンツが被らないよう余白を確保
   （footer の下余白は上の footer{padding} で calc(--contactbar-h + 1rem) を指定済み） */
.bottom-page-wrap {padding-bottom: var(--contactbar-h);}

/* contact_box（下部固定バー）を持たないページ（回答修正など）では、
   被り回避用の余白は不要なので通常の余白に戻す（下に無駄な空白を作らない）。 */
.page-no-contactbar .bottom-page-wrap {padding-bottom: 0;}
.page-no-contactbar footer {padding-bottom: 2rem;}

}

/* スマホ（599px以下）：ヘッダー（タイトルバー）を縦にコンパクト化。
   高さはロゴではなく「最も背の高い要素＝ハンバーガーボタン」と nav の上下padding で決まるため、
   その両方を詰める。 */
@media (max-width: 599px) {
	/* ヘッダーの高さを明示的に固定してコンパクト化。中身（ロゴ28px・ボタン30px）は40pxに収まるので
	   overflow:hidden は付けない（付けるとドロップダウンが切れるため）。 */
	header {height: var(--header-h-xs);}
	nav, nav .container {height: 100%;}
	nav .container {padding: 0 10px; align-items: center;}
	h1, h1 a {display: flex; align-items: center; line-height: 1;}
	h1 img {height: var(--logo-h-xs);}                    /* ロゴ */
	main {margin-top: var(--header-h-xs);}    /* 縮めたヘッダー高に合わせる */
	/* ハンバーガーボタンを小さくして高さの支配要素を下げる（線は中央基準の絶対配置なので×は崩れない） */
	.hamburger-btn {width: 30px; height: 30px; padding: 0;}
	/* ドロップダウンは共通の absolute（ボタン直下）。スマホは画面が狭いので最大幅だけ詰める */
	.hamburger-dropdown {
		max-width: calc(100vw - 16px); /* 画面幅からはみ出さない */
	}

	/* スマホは1行だと窮屈なのでフッターを縦積み中央寄せに（タブレットは1行 Flex のまま） */
	.footer_container {flex-direction: column; justify-content: center; gap: 15px;}
	.footer_icon_wrapper {order: 1;}
	.outside_link {order: 2;}
	.footer_container p {order: 3;}
	/* スマホは縦積みで高さがあるため、タブレット用の厚いピンク帯(160px)は不要。
	   従来どおり3行の下にバナー帯が自然に来る控えめな下余白に戻す。 */
	footer {padding-bottom: 90px;}
	/* contact_box を持たないページは下部バー回避が不要なので通常余白に */
	.page-no-contactbar footer {padding-bottom: 2rem;}
}