@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
:root{ --bl:#206ab3; --bl-light:#e2f0f9; --teal:#1f9e8f; }
*{ padding:0; margin:0; box-sizing:border-box; }
html{ font-family:"Noto Sans JP", sans-serif; color:#323131; }
body{ background:#F5F5F5; font-weight:500; overflow-x:hidden; }
img{ max-width:100%; height:auto; vertical-align:bottom; }
a{ color:inherit; }
[hidden]{ display:none !important; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

main{ max-width:480px; margin:0 auto; background:#F5F5F5; }
.hero img{ display:block; width:100%; }

/* カレンダー部（Figma 上はスクリーンショットだが、実装は実 TimeRex ウィジェット） */
.cal{ background:linear-gradient(#EAF6F4, #F3FAF9); padding:40px 16px; }
.tr-title{
	display:flex; align-items:center; gap:12px;
	font-size:14px; line-height:20px; font-weight:700; color:#fff;
	background:linear-gradient(90deg, #26a69a, #0a8f80); border-radius:8px 8px 0 0; padding:14px 12px;
	box-shadow:0 3px 6px rgba(0,0,0,0.16);
}
.tr-title img{ width:32px; height:32px; flex:none; }
.tr-card{ background:#fff; border-radius:0 0 8px 8px; box-shadow:0 3px 12px rgba(0,0,0,0.12); overflow:hidden; min-height:200px; }
#timerex_calendar, #timerex_calendar_2{ width:100%; }
#timerex-fallback, .timerex-fallback{ padding:24px 16px; font-size:14px; line-height:24px; text-align:center; }
#timerex-fallback a, .timerex-fallback a{ color:var(--bl); font-weight:700; text-decoration:underline; display:block; margin-top:8px; }

/* 予約方法・相談だけでも・FAQ（白カード） */
.info{ padding:40px 16px; }
.info__card{ background:#fff; border-radius:8px; padding:32px 16px 40px; box-shadow:0 3px 12px rgba(0,0,0,0.08); }
.info__card > img{ display:block; width:100%; margin:0 auto 32px; }
.faq__ttl{ font-size:24px; line-height:38px; font-weight:700; color:var(--bl); text-align:center; margin:8px 0 24px; }
.item{ margin-bottom:16px; }
.q{
	display:flex; align-items:center; gap:12px; position:relative;
	font-size:14px; line-height:22px; font-weight:700; color:#fff;
	background:var(--bl); border-radius:6px; padding:16px 44px 16px 16px; cursor:pointer;
	box-shadow:0 3px 6px rgba(0,0,0,0.16);
}
.q__btn{ display:flex; align-items:center; gap:12px; width:100%; margin:0; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.q__btn:focus-visible{ outline:2px solid #fff; outline-offset:6px; }
.q span, .a span{ font-weight:700; font-size:14px; flex:none; }
.q::after{
	content:""; width:8px; height:8px; position:absolute; right:20px; top:calc(50% - 6px);
	border-top:2px solid #fff; border-left:2px solid #fff; transform:rotate(225deg); transition:transform 300ms ease;
}
.item.active .q::after{ transform:rotate(45deg); top:calc(50% - 2px); }
.a{ max-height:0; overflow:hidden; background:var(--bl-light); border-radius:0 0 6px 6px; font-size:14px; line-height:26px; transition:max-height 300ms ease; }
.item.active .a{ max-height:100vh; }
.a p{ display:flex; gap:12px; padding:0 16px; }
.a p:first-child{ padding-top:16px; }
.a p:last-child{ padding-bottom:16px; }
.a p + p{ padding-left:36px; margin-top:12px; }
.a span{ color:var(--bl); }

/* LINE 導線（line.png 391x607: LINE ボタン x66-348 / y458-516） */
.line{ position:relative; background:#FFF3C4; overflow:hidden; }
.line img{ display:block; width:calc(100% * 391 / 375); max-width:none; margin-left:calc(-100% * 8 / 375); }
.line__hit{ position:absolute; left:15.467%; width:75.467%; top:75.453%; height:9.72%; display:block; }

footer.legal-footer{ max-width:480px; margin:0 auto; background:#fff; padding:24px 16px 32px; }
footer .copy{ font-size:12px; line-height:20px; text-align:center; letter-spacing:0.02em; }
footer .legal-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:0.8em 1.6em; font-size:12px; line-height:1.6; margin-bottom:0.8em; }
footer .legal-links a{ text-decoration:underline; }