/* =========================================================
   Tekono Yokohama Lab — responsive.css
   1024 / 768 / 360。320px幅でも横スクロールなし。
   ========================================================= */

@media (max-width:1024px){
	:root{--tyl-section-pc:80px}
	.tyl-card-grid{grid-template-columns:repeat(2,1fr)}
	.tyl-browse-grid{grid-template-columns:repeat(2,1fr)}
	.tyl-filter-grid{grid-template-columns:1fr 1fr}
	.tyl-problem-grid,.tyl-reasons{grid-template-columns:repeat(2,1fr)}
	.tyl-steps{grid-template-columns:repeat(2,1fr)}
	.tyl-flow-grid{grid-template-columns:repeat(2,1fr)}
	.tyl-stance-grid{grid-template-columns:repeat(3,1fr)}
	.tyl-plat-grid{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:900px){
	.tyl-service-hero-grid{grid-template-columns:1fr;gap:20px}
	.tyl-hero-top-grid{grid-template-columns:1fr;gap:22px}
	/* 見出し＋検索を先に、装飾ビジュアルは下へ（検索をファーストビューに） */
	.tyl-hero-top-main{order:1}
	.tyl-hero-visual{order:2}
}

@media (max-width:768px){
	:root{--tyl-section-pc:64px}
	body{font-size:15px}
	.tyl-service-section{padding-block:40px}

	.tyl-container{width:min(calc(100% - 32px),var(--tyl-container))}

	/* トップのヒーロー：縦を短く、検索バーをファーストビューに収める */
	.tyl-hero-top{padding-block:22px 26px}
	.tyl-hero-top h1{font-size:clamp(22px,6.4vw,29px);margin-bottom:12px}
	.tyl-hero-top .tyl-lead{margin-bottom:14px;font-size:14px;max-width:none}
	.tyl-hero-top-grid{gap:16px}
	.tyl-search{padding:16px}
	.tyl-search-label{margin-bottom:8px;font-size:14px}
	.tyl-hero-visual{padding:16px}
	.tyl-hero-visual-cap{margin-bottom:12px}

	/* ヘッダー：モバイルメニュー（ダーク全画面・アコーディオン／SHIFT風）
	   ※ backdrop-filter は position:fixed の含みブロックを作るため無効化。 */
	.tyl-header{gap:10px;height:60px;min-height:60px;background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;position:sticky;z-index:60}
	.tyl-menu-toggle{display:inline-flex;order:3;border:0;background:transparent;padding:10px 4px}
	.tyl-menu-label{display:none} /* 「メニュー」文字は不要。ハンバーガーのみ */
	.tyl-menu-bar{width:24px}
	.tyl-menu-bar,.tyl-menu-bar::before,.tyl-menu-bar::after{transition:transform .2s ease,background .2s ease}
	body.tyl-menu-open .tyl-menu-bar{background:transparent}
	body.tyl-menu-open .tyl-menu-bar::before{top:0;transform:rotate(45deg)}
	body.tyl-menu-open .tyl-menu-bar::after{top:0;transform:rotate(-45deg)}
	.tyl-header-actions{order:2;gap:8px}
	.tyl-logo-img{height:36px}

	/* オーバーレイはヘッダー(60px)の下から開始し、ロゴと×ボタンを隠さない。
	   ※ display:block を明示（PCの display:flex を打ち消す）。flex+align-items:center のままだと
	   　 メニューが中央寄せ＆内容幅に縮み、上端が切れてスクロールできない不具合になる。 */
	.tyl-nav{display:block;position:fixed;top:60px;left:0;right:0;bottom:0;width:auto;background:var(--tyl-color-dark);padding:8px 0 48px;transform:translateY(-100%);visibility:hidden;transition:transform .24s ease,visibility .24s ease;z-index:45;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
	body.tyl-menu-open .tyl-nav{transform:translateY(0);visibility:visible}
	.tyl-nav-list{flex-direction:column;align-items:stretch;gap:0}
	.tyl-nav-item{position:static;border-bottom:1px solid rgba(255,255,255,.13)}
	.tyl-nav-top-link,.tyl-nav-top{display:flex;width:100%;justify-content:space-between;align-items:center;gap:12px;padding:19px 22px;font-size:17px;font-weight:700;color:#fff;border-radius:0;border-bottom:0}
	.tyl-nav-top-link:hover,.tyl-nav-top:hover,.tyl-has-mega:hover .tyl-nav-top{background:rgba(255,255,255,.05);color:#fff}
	.tyl-nav-item.is-open{background:rgba(255,255,255,.03)}

	/* 右端の +/− トグル */
	/* PC用シェブロンの回転を打ち消す（+/−アイコンにするため） */
	.tyl-nav-caret,.tyl-has-mega:hover .tyl-nav-caret,.tyl-has-mega:focus-within .tyl-nav-caret,.tyl-nav-item.is-open .tyl-nav-caret{transform:none}
	.tyl-nav-caret{width:22px;height:22px;flex:0 0 22px;border:0;position:relative;opacity:1}
	.tyl-nav-caret::before,.tyl-nav-caret::after{content:"";position:absolute;background:#fff;left:50%;top:50%;border:0}
	.tyl-nav-caret::before{width:16px;height:2px;transform:translate(-50%,-50%)}
	.tyl-nav-caret::after{width:2px;height:16px;transform:translate(-50%,-50%);transition:opacity .2s ease}
	.tyl-nav-item.is-open .tyl-nav-caret::after{opacity:0} /* ＋ → − */

	/* メガパネル＝アコーディオン。is-open のときだけ表示 */
	.tyl-mega,.tyl-mega-wide .tyl-mega,.tyl-has-mega:hover .tyl-mega,.tyl-has-mega:focus-within .tyl-mega{position:static;width:auto;min-width:0;max-width:none;background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;opacity:1;visibility:visible;transform:none;display:none}
	.tyl-mega::before{display:none}
	.tyl-nav-item.is-open > .tyl-mega{display:block;padding:2px 22px 16px}
	.tyl-mega-cols,.tyl-mega-taxlist,.tyl-mega-wide .tyl-mega-cols{grid-template-columns:1fr}
	.tyl-mega-inner{gap:4px}
	.tyl-mega-lead{display:none}
	.tyl-mega-link{padding:13px 4px;font-size:15px;color:rgba(255,255,255,.82);border-bottom:1px solid rgba(255,255,255,.08)}
	.tyl-mega-link:hover{color:#fff;background:transparent}
	.tyl-mega-count{color:#fff;background:rgba(255,255,255,.16)}
	.tyl-mega-colhead{font-size:11px;margin-top:8px;color:var(--tyl-color-yellow);border-bottom-color:rgba(255,255,255,.16)}
	.tyl-mega-empty{color:rgba(255,255,255,.72)}
	.tyl-mega-feature{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
	.tyl-mega-feature-label{color:#fff}
	.tyl-mega-feature-desc{color:var(--tyl-color-yellow)}
	.tyl-header-actions .tyl-btn{min-height:40px;padding:0 14px;font-size:13px}

	/* カード・ブラウズ */
	.tyl-card-grid{grid-template-columns:1fr}
	.tyl-browse-grid{grid-template-columns:1fr}
	.tyl-plat-grid{grid-template-columns:repeat(2,1fr)}
	.tyl-plat-card.is-feature{grid-column:span 2}

	/* 検索・絞り込み */
	.tyl-search-row{flex-direction:column}
	.tyl-search-row .tyl-btn{width:100%}
	.tyl-filter-toggle{display:inline-flex;width:100%;justify-content:space-between}
	.tyl-filter-body{display:none;margin-top:16px}
	.tyl-filter.is-open .tyl-filter-body{display:block}
	.tyl-filter-grid{grid-template-columns:1fr}
	.tyl-filter-actions{flex-direction:column}
	.tyl-filter-actions .tyl-btn{width:100%}

	/* サービス詳細：2列→1列 */
	.tyl-problem-grid,.tyl-reasons,.tyl-solution-grid,.tyl-fit-grid,.tyl-price-grid,.tyl-option-list,.tyl-policy-list{grid-template-columns:1fr}
	.tyl-steps,.tyl-flow-grid,.tyl-stance-grid{grid-template-columns:1fr}

	/* 原因・比較・関係：縦積み */
	.tyl-cause{grid-template-columns:1fr}
	.tyl-cause .tyl-cause-to{height:38px;transform:rotate(90deg)}
	.tyl-diagram-pair,.tyl-relation-row{grid-template-columns:1fr;text-align:center;gap:6px}
	.tyl-diagram-arrow{transform:rotate(90deg)}
	.tyl-diagram-flow{flex-direction:column}
	.tyl-flow-step:not(:last-child)::before{display:none}
	.tyl-flow-step:not(:last-child)::after{content:"↓";width:auto;height:auto;background:none;color:var(--tyl-color-accent);font-weight:800;right:auto;left:50%;top:auto;bottom:-15px;transform:translateX(-50%)}
	.tyl-metric-row{grid-template-columns:1fr;gap:4px}

	/* SCOPE表：横スクロール可 */
	.tyl-scope{display:block;overflow-x:auto;white-space:nowrap}

	/* FV図解の縦積み */
	/* 悩み・業種・支援内容→サービスの図は横並び・コンパクトに（縦長を解消） */
	.tyl-hv-flow{flex-direction:row;gap:8px;align-items:stretch}
	.tyl-hv-col,.tyl-hv-out{gap:6px}
	.tyl-hv-node,.tyl-hv-card{font-size:11px;padding:8px 4px}
	.tyl-hv-arrow{transform:none;font-size:16px}

	/* CTA帯：縦積み */
	.tyl-cta-grid{flex-direction:column;align-items:flex-start}
	.tyl-cta-actions{width:100%}
	.tyl-cta-actions .tyl-btn{width:100%}
	.tyl-inline-cta{flex-direction:column;align-items:flex-start}
	.tyl-inline-cta .tyl-btn{width:100%}

	.tyl-hero-actions{flex-direction:column;align-items:stretch}
	.tyl-hero-actions .tyl-btn{width:100%}

	/* フッター：サービス列は2列 */
	.tyl-footer-services{grid-template-columns:repeat(2,1fr);gap:24px 24px}
}

@media (max-width:360px){
	.tyl-container{width:calc(100% - 24px)}
	.tyl-brand-tag{display:none}
	.tyl-plat-grid{grid-template-columns:1fr}
	.tyl-plat-card.is-feature{grid-column:span 1}
}

@media print{
	.tyl-header,.tyl-footer,.tyl-filter,.tyl-menu-toggle,.tyl-hero-actions,.tyl-cta,.tyl-inline-cta,.tyl-pagination{display:none !important}
	body{font-size:12pt;color:#000}
	.tyl-service-section{padding-block:16px;page-break-inside:avoid}
	.tyl-service-hero{background:#fff;color:#000}
	a{color:#000;text-decoration:underline}
}