/*
Theme Name: Lightning Child Takeshima
Theme URI: https://triggerpoint-chiro.com/
Template: lightning
Description: たけしま鍼灸院のための、Lightning の子テーマです。
Version: 1.0.0
Author: INA
Text Domain: lightning-child-takeshima
*/

/* ==========================================================
   色・大きさ(ここを変えると、サイト全体の雰囲気が変わります)
   ========================================================== */
:root {
	--tk-green: #006e2e;
	--tk-green-dark: #004f21;
	--tk-leaf: #89c403;
	--tk-soft: #f3f8ef;
	--tk-line: #d6e2cf;
	--tk-text: #2b2b2b;
	--tk-warn: #b3261e;
	--tk-max: 1100px;

	/* Lightning の基本色も、同じ緑にする */
	--vk-color-primary: var(--tk-green);
	--vk-color-primary-dark: var(--tk-green-dark);
	--vk-color-primary-vivid: #0a8a3c;
}

body { color: var(--tk-text); }
a { color: var(--tk-green); }
a:hover { color: var(--tk-green-dark); }
img { height: auto; }

/* ヘッダーのロゴ */
.site-header-logo img { max-height: 56px; width: auto; }

/* 固定ページの上の帯(ページ名) */
.tk-page .page-header { background: var(--tk-green); padding: 2.2rem 0; }
.tk-page .page-header .page-header-title,
.tk-page .page-header h1 { color: #fff; font-size: 1.6rem; letter-spacing: .08em; margin: 0; }

/* ==========================================================
   共通の部品(トップページ)
   ========================================================== */
.tk-front { color: var(--tk-text); }
.tk-container { max-width: var(--tk-max); margin: 0 auto; padding: 0 20px; }
.tk-section { padding: 3.5rem 0; }
.tk-section:nth-of-type(even) { background: var(--tk-soft); }

.tk-heading { font-size: 1.6rem; font-weight: 700; text-align: center; margin: 0 0 2rem; letter-spacing: .08em; line-height: 1.5; border: 0; padding: 0; }
.tk-heading::before, .tk-heading::after { content: none; }
.tk-heading small { display: block; font-size: .75rem; letter-spacing: .35em; color: var(--tk-green); margin-bottom: .4rem; font-weight: 400; }
.tk-more { text-align: center; margin: 1.6rem 0 0; }
.tk-more a { display: inline-block; padding: .6em 2em; border: 1px solid var(--tk-green); border-radius: 999px; text-decoration: none; }
.tk-more a:hover { background: var(--tk-green); color: #fff; }

.tk-btn { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; border-radius: 8px; line-height: 1.3; }
.tk-btn--tel { background: var(--tk-green); color: #fff; padding: .8rem 2.2rem; box-shadow: 0 3px 0 var(--tk-green-dark); }
.tk-btn--tel span { font-size: .85rem; letter-spacing: .1em; }
.tk-btn--tel strong { font-size: 1.7rem; letter-spacing: .06em; }
.tk-btn--tel:hover { background: var(--tk-green-dark); color: #fff; }

/* ---------- ヒーロー(上の大きな部分) ---------- */
.tk-hero { background: var(--tk-soft); padding: 2.5rem 0 3rem; }
.tk-hero__inner { max-width: var(--tk-max); margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 1fr minmax(0, 560px); gap: 2.5rem; align-items: center; }
.tk-eyebrow { color: var(--tk-green); letter-spacing: .25em; font-size: .85rem; margin: 0 0 .8rem; }
.tk-hero__title { font-size: 1.7rem; line-height: 1.6; margin: 0 0 1.2rem; font-weight: 700; border: 0; padding: 0; background: none; word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.tk-hero__title::before, .tk-hero__title::after { content: none; }
.tk-hero__lead { font-size: 1rem; line-height: 1.9; margin: 0 0 1.6rem; }
.tk-hero__cta { margin: 0 0 .6rem; }
.tk-hero__note { font-size: .85rem; color: #555; margin: 0; }

.tk-hero__photos { position: relative; aspect-ratio: 640 / 450; border-radius: 10px; overflow: hidden; background: #ddd; box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.tk-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: tk-fade 28s infinite backwards; animation-delay: calc(var(--i) * 4s); }
@keyframes tk-fade {
	0% { opacity: 0; }
	4% { opacity: 1; }
	14.3% { opacity: 1; }
	18.3% { opacity: 0; }
	100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.tk-slide { animation: none; display: none; }
	.tk-slide:first-child { display: block; opacity: 1; }
}

/* ---------- 症状から探す ---------- */
.tk-symptoms__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tk-symptoms__grid li { margin: 0; }
.tk-symptoms__grid a { display: flex; align-items: center; justify-content: center; min-height: 68px; padding: .8rem 1rem; text-align: center; text-decoration: none; background: #fff; border: 1px solid var(--tk-line); border-left: 5px solid var(--tk-green); border-radius: 6px; font-weight: 700; line-height: 1.5; }
.tk-symptoms__grid a:hover { background: var(--tk-green); color: #fff; border-color: var(--tk-green); }

/* ---------- 案内カード ---------- */
.tk-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tk-cards li { margin: 0; }
.tk-cards a { display: block; padding: 1.6rem 1rem; text-align: center; text-decoration: none; background: #fff; border-radius: 10px; border-bottom: 4px solid var(--tk-leaf); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.tk-cards small { display: block; font-size: .75rem; letter-spacing: .25em; color: var(--tk-green); margin-bottom: .4rem; }
.tk-cards strong { font-size: 1.15rem; }
.tk-cards a:hover { background: var(--tk-green); color: #fff; }
.tk-cards a:hover small { color: #fff; }

/* ---------- 動画 ---------- */
.tk-video__frame { position: relative; max-width: 760px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; }
.tk-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- 推薦の写真 ---------- */
.tk-voices__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tk-voices__grid li { margin: 0; }
.tk-voices__grid img { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.12); display: block; }

/* ---------- 診察時間・アクセス ---------- */
.tk-info__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.tk-info__inner .tk-heading { text-align: left; }
.tk-info__map { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #ddd; }
.tk-info__map iframe { width: 100%; height: 100%; border: 0; }
.tk-info__address { margin: 1rem 0 0; line-height: 1.8; }
.tk-info .tk-more { text-align: left; }
.tk-hours { width: 100%; max-width: 100%; border-collapse: collapse; background: #fff; margin: 0 0 1rem; table-layout: fixed; }
.tk-hours th, .tk-hours td { border: 1px solid var(--tk-line); padding: .55rem .3rem; text-align: center; font-size: .9rem; line-height: 1.4; }
.tk-hours th { background: var(--tk-soft); font-weight: 700; }
.tk-hours .non { color: #888; }
.tk-hours .sankaku { color: var(--tk-warn); }
.tk-info__hours p { font-size: .92rem; line-height: 1.9; margin: 0 0 .6rem; }
.tk-info__hours .sankaku { color: var(--tk-warn); }

/* ---------- ブログ ---------- */
.tk-blog__list { list-style: none; margin: 0; padding: 0; max-width: 760px; margin-inline: auto; }
.tk-blog__list li { display: flex; gap: 1.2rem; padding: .9rem 0; border-bottom: 1px dashed var(--tk-line); margin: 0; }
.tk-blog__list time { color: #666; flex: none; }

/* ==========================================================
   予約のご案内(各ページの最後)
   ========================================================== */
.tk-reserve { margin: 3rem 0 0; padding: 1.6rem 1rem; text-align: center; background: var(--tk-soft); border: 2px solid var(--tk-green); border-radius: 10px; }
.tk-reserve p { margin: 0; }
.tk-reserve__lead { font-weight: 700; }
.tk-reserve__tel { font-size: 2rem; font-weight: 700; letter-spacing: .06em; line-height: 1.4; }
.tk-reserve__tel a { text-decoration: none; }
.tk-reserve__note { font-size: .85rem; color: #555; }

/* ==========================================================
   元のサイトの本文(.tk-legacy)を、新しいデザインで読みやすくする
   ========================================================== */
.tk-legacy { line-height: 1.95; overflow-wrap: anywhere; }
.tk-legacy img { max-width: 100%; height: auto; }
.tk-legacy a { color: var(--tk-green); }
.tk-legacy a:hover { color: var(--tk-green-dark); }
.tk-legacy p { margin: 0 0 1.1em; }
.tk-legacy .clear, .tk-legacy br.clear { clear: both; }
.tk-legacy::after { content: ""; display: block; clear: both; }

.tk-legacy .english { color: var(--tk-green); font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; margin: 0 0 1.4rem; }
.tk-legacy h2.ptitle { font-size: 1.4rem; margin: 2.2rem 0 1.2rem; padding: 0 0 .5rem; border: 0; border-bottom: 3px solid var(--tk-green); background: none; }
.tk-legacy h2.ptitle::before, .tk-legacy h2.ptitle::after { content: none; }
.tk-legacy h3, .tk-legacy .midashi { font-size: 1.2rem; line-height: 1.6; margin: 2rem 0 1rem; padding: .4rem 0 .4rem .8rem; border: 0; border-left: 5px solid var(--tk-green); background: var(--tk-soft); }
.tk-legacy h3::before, .tk-legacy h3::after { content: none; }
.tk-legacy .midashi span { display: block; font-size: .75rem; letter-spacing: .25em; color: var(--tk-green); text-transform: uppercase; }
.tk-legacy h4 { font-size: 1.05rem; margin: 1.4rem 0 .6rem; }

.tk-legacy .alignC { text-align: center; }
.tk-legacy .alignR { text-align: right; }
.tk-legacy .img_r, .tk-legacy .ac_right { float: right; margin: 0 0 1rem 1.5rem; }
.tk-legacy .img_l, .tk-legacy .ac_left { float: left; margin: 0 1.5rem 1rem 0; }
/* 駅からの経路の写真: 左から右へ、折り返しながら並べる */
.tk-legacy .ac_left, .tk-legacy .ac_right { float: none; display: inline-block; vertical-align: top; width: 210px; max-width: 100%; margin: 0 1rem 1.2rem 0; }
.tk-legacy .ac_left img, .tk-legacy .ac_right img { width: 100%; height: auto; }
.tk-legacy .ac_left p, .tk-legacy .ac_right p { font-size: .9rem; line-height: 1.6; margin: .4rem 0 0; }
.tk-legacy .ac_end { clear: both; }
.tk-map { max-width: 640px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #ddd; margin: 0 0 .6rem; }
.tk-map iframe { width: 100%; height: 100%; border: 0; }

.tk-legacy a.expansion img, .tk-legacy a[rel^="lightbox"] img { border: 1px solid var(--tk-line); border-radius: 4px; padding: 3px; background: #fff; transition: box-shadow .2s; }
.tk-legacy a.expansion:hover img, .tk-legacy a[rel^="lightbox"]:hover img { box-shadow: 0 3px 12px rgba(0,0,0,.25); }

/* 帯・見出しは、回り込む写真(右・左)の、下にもぐらないよう、写真の横で止める(display: flow-root) */
.tk-legacy h3, .tk-legacy .midashi, .tk-legacy h2.ptitle { display: flow-root; }
.tk-legacy .prices { display: flow-root; margin: 1rem 0 .4rem; padding: .5rem 1rem; background: var(--tk-green); color: #fff; font-weight: 700; font-size: 1.1rem; border-radius: 4px; }
.tk-legacy .txt_kk, .tk-legacy .important, .tk-legacy .enphasis { color: var(--tk-warn); font-weight: 700; }

.tk-legacy .btn_like, .tk-legacy .voice_btn a, .tk-legacy .center_btn a { display: inline-block; padding: .7em 2em; background: var(--tk-green); color: #fff; text-decoration: none; border-radius: 999px; }
.tk-legacy .btn_like:hover, .tk-legacy .voice_btn a:hover, .tk-legacy .center_btn a:hover { background: var(--tk-green-dark); color: #fff; }

/* 写真が2枚ずつ並ぶ(症例) */
.tk-legacy .h_wrap { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 1rem; }
.tk-legacy .h_box { flex: 1 1 280px; min-width: 0; }
.tk-legacy .h_box p { font-size: .9rem; margin: .5rem 0 0; }

/* 「私たちも推薦します」の4枚 */
.tk-legacy [class^="top_v0"] { float: left; width: 25%; padding: 0 6px; box-sizing: border-box; }

/* 施術の流れ */
.tk-legacy .f_box { margin: 0 0 .5rem; padding: 1.2rem 1.4rem; background: #fff; border: 1px solid var(--tk-line); border-radius: 8px; }
.tk-legacy .f_box h3 { margin-top: 0; }
.tk-legacy .next_flow { text-align: center; color: var(--tk-green); font-size: 1.4rem; margin: 0 0 .5rem; line-height: 1.2; }

/* 患者様の声 */
.tk-legacy .v_box { display: grid; grid-template-columns: 280px minmax(0, 1fr) 210px; gap: 0 1.4rem; align-items: start; margin: 0 0 1.4rem; padding: 1.2rem 1.4rem; background: #fff; border: 1px solid var(--tk-line); border-radius: 8px; }
.tk-legacy .v_box > img { grid-column: 1; grid-row: 1 / span 5; border-radius: 4px; }
.tk-legacy .v_box > p { grid-column: 2; }
.tk-legacy .v_box > p:has(> br:only-child) { display: none; }
.tk-legacy .v_box > a { grid-column: 3; grid-row: 1 / span 5; }
.tk-legacy .v_box .user { text-align: right; font-size: .88rem; color: #555; margin-top: .8rem; }
.tk-legacy #course_new ul, .tk-legacy .vlist, .tk-legacy #course ul { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.tk-legacy #course_new li, .tk-legacy .vlist li, .tk-legacy #course li { margin: 0; padding: .6rem .2rem; border-bottom: 1px dashed var(--tk-line); }

/* 表 */
.tk-legacy table { width: 100% !important; border-collapse: collapse; margin: 0 0 1.5rem; }
.tk-legacy th, .tk-legacy td { border: 1px solid var(--tk-line); padding: .6rem .8rem; vertical-align: top; }
.tk-legacy th { background: var(--tk-soft); }

/* ==========================================================
   写真の拡大表示(tk-lightbox.js)
   ========================================================== */
.tk-lb { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.85); padding: 2rem 1rem; }
.tk-lb[hidden] { display: none; }
.tk-lb__fig { margin: 0; max-width: min(96vw, 1100px); max-height: 92vh; text-align: center; }
.tk-lb__img { max-width: 100%; max-height: 82vh; width: auto; height: auto; background: #fff; border-radius: 4px; }
.tk-lb__cap { color: #fff; font-size: .9rem; margin-top: .6rem; }
.tk-lb__close { position: absolute; top: .6rem; right: 1rem; width: 44px; height: 44px; font-size: 2rem; line-height: 1; color: #fff; background: transparent; border: 0; cursor: pointer; }
.tk-lb__close:focus-visible { outline: 3px solid var(--tk-leaf); }
html.tk-lb-open { overflow: hidden; }

/* ==========================================================
   スマートフォン・タブレット
   ========================================================== */
@media (max-width: 900px) {
	.tk-hero__inner { grid-template-columns: 1fr; }
	.tk-hero__title { font-size: 1.4rem; }
	.tk-cards { grid-template-columns: repeat(2, 1fr); }
	.tk-voices__grid { grid-template-columns: repeat(2, 1fr); }
	.tk-info__inner { grid-template-columns: 1fr; }
	.tk-legacy [class^="top_v0"] { width: 50%; margin-bottom: 12px; }
	.tk-legacy .v_box { grid-template-columns: 1fr; }
	.tk-legacy .v_box > img, .tk-legacy .v_box > p, .tk-legacy .v_box > a { grid-column: 1; grid-row: auto; justify-self: center; }
	.tk-legacy .v_box > p { justify-self: stretch; }
}
@media (max-width: 600px) {
	.tk-section { padding: 2.4rem 0; }
	.tk-heading { font-size: 1.3rem; }
	.tk-symptoms__grid { grid-template-columns: 1fr; }
	.tk-btn--tel { width: 100%; box-sizing: border-box; }
	.tk-btn--tel strong { font-size: 1.5rem; }
	.tk-legacy .img_r, .tk-legacy .img_l, .tk-legacy .ac_left, .tk-legacy .ac_right { float: none; max-width: 100%; margin: 0 0 1rem; }
	.tk-legacy table { display: block; overflow-x: auto; }
	.tk-reserve__tel { font-size: 1.6rem; }
	.tk-blog__list li { flex-direction: column; gap: .2rem; }
}