/*
Theme Name: Tokko Tencho
Theme URI: https://tencho.jp/
Author: CAPSOR Inc.
Description: tencho.jp リニューアル用オリジナルブロックテーマ
Version: 0.6.3
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tokko-tencho
*/

main.wp-block-group > * + * {
	margin-top: 72px;
}

/* 各セクションがスクロールで画面内に入ったときにふわっとフェードイン
   する効果(assets/js/scroll-reveal.jsでクラス付与)。JS未対応環境や
   reduced-motion環境ではCSSのopacity:0が適用されず、常に表示される */
.reveal-on-scroll {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-on-scroll.is-revealed {
	opacity: 1;
	transform: translateY(0);
}

/* スマホ幅ではコンテンツが画面端に密着して余白が全くなかったため、
   メイン領域とフッターに左右パディングを追加。ヒーロースライダーのみ、
   フルブリード(画面幅いっぱい)のデザインを保つため打ち消す */
@media (max-width: 600px) {
	main.wp-block-group,
	footer.wp-block-group {
		padding-left: 20px;
		padding-right: 20px;
	}

	.hero-slider {
		margin-left: -20px;
		margin-right: -20px;
	}
}

/* リンク付きの短い名称セル(例: オプション機能一覧の「名前」列)が狭い列で
   1文字ずつ縦に折り返されるのを防ぐ。長文が入るコメント列は対象外にして、
   従来通り任意の位置で折り返せるようにする(横スクロール発生を回避) */
.wp-block-table td:has(a),
.wp-block-table th:has(a) {
	word-break: keep-all;
	white-space: nowrap;
}

/* スマホ幅では、固定幅(140px)のロゴ画像列がコメント列を圧迫して
   読みにくくなるため、ロゴ画像を縮小してコメント列の幅を確保する */
@media (max-width: 600px) {
	.wp-block-table td img {
		max-width: 72px !important;
	}
}

/* スマホのハンバーガーメニュー: 余白がほぼゼロで項目が密着していたため、
   全体に余白を持たせ、各項目をタップしやすい行として区切る */
@media (max-width: 600px) {
	.wp-block-navigation__responsive-container-content {
		padding: 32px 24px 48px !important;
	}

	.wp-block-navigation__responsive-container-close {
		top: 20px;
		right: 20px;
	}

	.wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding: 6px 0;
	}

	/* 第1階層(「特攻店長とは」等)の行間・区切り線 */
	.wp-block-navigation__responsive-container-content
		> .wp-block-navigation__container
		> li.wp-block-navigation-item {
		padding: 18px 0;
		border-bottom: 1px solid #e5e5e5;
	}

	.wp-block-navigation__responsive-container-content
		> .wp-block-navigation__container
		> li.wp-block-navigation-item
		> .wp-block-navigation-item__content {
		font-size: 1.3rem;
		font-weight: 700;
		padding: 0;
	}

	/* サブメニュー: 親より一回り小さく・軽いウェイトにして親子関係を明確化し、
	   インデントして視覚的に階層をわかりやすくする */
	.wp-block-navigation__submenu-container {
		padding: 6px 0 4px 16px;
	}

	.wp-block-navigation__submenu-container > li.wp-block-navigation-item {
		padding: 8px 0;
		border-bottom: none;
	}

	.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-size: 1.05rem;
		font-weight: 400;
		padding: 2px 0;
	}

	.nav-overview-link {
		margin-bottom: 4px;
	}

	.nav-overview-link .wp-block-navigation-item__content {
		font-size: 1.05rem;
		font-weight: 700;
	}
}

.service-card {
	position: relative;
	overflow: hidden;
}

.service-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 340px;
	object-fit: cover;
}

.service-card__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 24px;
	background-color: rgba(0, 0, 0, 0.45);
}

.service-card__title {
	margin: 0 0 12px;
	font-size: 2.25rem;
	line-height: 1.3;
}

.service-card__title a {
	color: #ffffff;
	text-decoration: none;
}

.service-card__excerpt {
	margin: 0;
	color: #f0f0f0;
}

/* 主要機能カード: 2列固定グリッドから横スクロールのスライダーに変更。
   JSは使わず、CSSのscroll-snapのみで実装。カード幅を画面幅の均等割りに
   せず固定幅にすることで、右端が少し見切れて「まだ続きがある」ことが
   一目でわかるようにしている(PC・スマホ共通の挙動) */
.service-card-slider {
	position: relative;
}

/* カード幅と画面幅の組み合わせによっては、たまたまカードがぴったり
   収まって見切れなくなる場合がある。その場合でも「スライドできる」
   ことが伝わるよう、右端に背景色へのグラデーションを常に重ねておく */
.service-card-slider::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 16px;
	width: 64px;
	background: linear-gradient(to right, rgba(230, 255, 244, 0), #e6fff4);
	pointer-events: none;
}

.service-card-slider .wp-block-post-template {
	display: flex;
	gap: 20px;
	margin: 0;
	padding: 4px 4px 16px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.service-card-slider .wp-block-post-template > li {
	flex: 0 0 400px;
	scroll-snap-align: start;
}

.service-card-slider .service-card .wp-block-post-featured-image img {
	height: 200px;
}

.service-card-slider .service-card__title {
	font-size: 1.15rem;
	margin-bottom: 8px;
}

.service-card-slider .service-card__excerpt {
	font-size: 0.85rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.contact-submit {
	text-align: center;
}

.pushbutton-wide {
	background-color: #e53e3e;
	color: #ffffff;
	font-size: 1.25rem;
	font-weight: 700;
	padding: 16px 48px;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.pushbutton-wide:hover {
	background-color: #c53030;
}

/* 各セクションの「詳細はこちら」系リンクをボタン風の見た目にする */
.detail-link-button {
	display: inline-block;
	padding: 10px 32px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--primary);
	color: #ffffff !important;
	font-weight: 700;
	text-decoration: none !important;
	transition: background-color 0.2s ease;
}

.detail-link-button:hover {
	background-color: var(--wp--preset--color--primary-dark);
	color: #ffffff !important;
}

.news-item {
	width: 100%;
	align-items: flex-start;
	padding: 16px 8px;
	border-bottom: 1px solid #e5e5e5;
}

.news-item:first-child {
	border-top: 1px solid #e5e5e5;
}

.news-item__meta {
	flex-shrink: 0;
	align-items: center;
}

.news-item__date {
	flex-shrink: 0;
	width: 110px;
	color: #767676;
	font-size: 0.9rem;
}

.news-item__term {
	flex-shrink: 0;
}

.news-item__term a {
	display: inline-block;
	white-space: nowrap;
	background-color: var(--wp--preset--color--primary-tint);
	color: var(--wp--preset--color--primary-dark);
	font-size: 0.8rem;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 999px;
	text-decoration: none;
}

.news-item__term a[href*="/news-category/supportnews/"] {
	background-color: #e0f7fa;
	color: #0277bd;
}

.news-item__title {
	flex-grow: 1;
	min-width: 0;
	margin: 0;
	padding-top: 2px;
	font-size: 1rem;
}

.news-item__title a {
	text-decoration: none;
	color: var(--wp--preset--color--black);
}

.news-item__title a:hover {
	color: var(--wp--preset--color--primary);
}

/* スマホ幅では日付+タグの1行に対してタイトルの表示幅が狭く余白が
   無駄になっていたため、日付+タグ/タイトルの2行に分けてタイトルを
   幅いっぱいに表示する。PCは従来通り1行の横並びのまま変更しない */
@media (max-width: 600px) {
	.news-item {
		flex-direction: column;
		align-items: stretch;
	}

	.news-item__meta {
		margin-bottom: 8px;
	}

	.news-item__date {
		width: auto;
	}

	.news-item__title {
		padding-top: 0;
		font-size: 1.1rem;
	}
}

.flow-steps {
	max-width: 900px;
	margin: 32px auto 0;
}

.flow-step {
	position: relative;
	display: flex;
	gap: 24px;
	padding-bottom: 32px;
}

.flow-step:not(.flow-step--last)::before {
	content: "";
	position: absolute;
	left: 23px;
	top: 48px;
	bottom: 0;
	width: 2px;
	background-color: var(--wp--preset--color--primary-tint);
}

.flow-step__number {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	font-weight: 700;
	z-index: 1;
}

.flow-step__body {
	padding-top: 8px;
}

.flow-step__title {
	margin: 0 0 8px;
	font-size: 1.125rem;
}

.flow-step__text {
	margin: 0;
	color: #444444;
}

.nav-overview-link a {
	font-weight: 700;
	border-bottom: 1px solid #e5e5e5;
}

/* グローバルメニューをヘッダー内で中央寄せにする。
   ロゴの右側の余白に左詰めで表示されていたのを、ヘッダー全体の水平中央に
   来るよう修正(ロゴ列とその対称の余白列を1frずつ確保し、中央列にメニューを配置)。
   スマホ表示(ハンバーガーメニュー)には影響させないため600px超のみ適用 */
/* メニュー(折り返し無しの実測幅 約1011px)+ ロゴ幅(約94px)を左右対称に
   確保できる幅からのみ中央寄せグリッドを適用する。これより狭い幅(タブレット等
   でメニューが折り返す場合)は下の @media (min-width: 601px) を外れ、
   通常のflexレイアウト(ロゴ+左詰めメニュー)にフォールバックする。
   ※ そのまま auto 列で組むと、折り返し前提の最大幅をブラウザが要求し、
      両脇の1fr列(ロゴ側)が0pxに潰れてロゴが消える不具合があったため */
@media (min-width: 1240px) {
	header.wp-block-group {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}

	header .wp-block-site-logo {
		grid-column: 1;
		justify-self: start;
	}

	header .wp-block-navigation {
		grid-column: 2;
		justify-self: center;
	}
}

header .wp-block-navigation__container {
	justify-content: center;
}

/* ヘッダーメニューをトップレベル7項目→4項目に統合した結果、
   横方向に余裕ができたため、PC表示のみ項目間の間隔を広げる。
   スマホのオーバーレイメニュー(縦一列)には影響させない */
@media (min-width: 601px) {
	header .wp-block-navigation__container {
		gap: 56px;
	}

	/* サブメニューのポップアップ幅がコアCSSの min-width:200px(展開時は
	   width:autoかつaria-expanded等の高詳細度セレクタで指定)で決まり、
	   「対応モール・カート・サービス」等が2行に折り返していたため、
	   1行に収まる幅まで拡張する。コアの詳細度が高いため!important必須 */
	header .wp-block-navigation__submenu-container {
		width: 340px !important;
		min-width: 340px !important;
	}

	/* PCのヘッダーナビはグローバルのmedium(1.125rem)を継承して大きすぎたため、
	   トップレベル項目のみ縮小する。スマホのオーバーレイメニューは対象外 */
	header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		font-size: 0.95rem;
	}

	/* ポップアップ表示されるサブメニューの中身も同様に大きすぎたため縮小。
	   スマホのオーバーレイメニューには影響させない */
	header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-size: 0.9rem;
	}
}

header .wp-block-navigation__container > .wp-block-navigation-item.wp-block-navigation-link > a {
	transition: color 0.2s ease;
}

header .wp-block-navigation__container > .wp-block-navigation-item.wp-block-navigation-link > a:hover {
	color: var(--wp--preset--color--primary);
}

.grunion-label-required {
	color: #e53e3e;
	font-weight: 700;
}

/* オプション料金ページ(旧テーマ tokko-op-* クラス)のデザイン */
.tokko-op-wrap {
	max-width: 800px;
	margin: 0 auto;
}

.tokko-op-heading {
	font-size: 1.5rem;
	margin: 48px 0 24px;
	padding-bottom: 12px;
	border-bottom: 3px solid var(--wp--preset--color--primary);
}

.tokko-op-wrap > .tokko-op-heading:first-child {
	margin-top: 0;
}

.tokko-op-subtitle {
	color: #444444;
	margin-top: -12px;
}

.tokko-op-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 12px;
	background-color: #ffffff;
}

.tokko-op-table td,
.tokko-op-table th {
	border: 1px solid #e5e5e5;
	padding: 12px 16px;
	text-align: left;
}

.tokko-op-title-row th,
.tokko-op-header-row th {
	background-color: var(--wp--preset--color--primary);
	color: #ffffff;
	font-weight: 700;
}

.tokko-op-desc-row td {
	background-color: var(--wp--preset--color--primary-tint);
	color: #333333;
	font-size: 0.95rem;
	line-height: 1.8;
}

.tokko-op-center td {
	text-align: center;
}

.tokko-op-note {
	color: #767676;
	font-size: 0.875rem;
	margin: -4px 0 32px;
}

.tokko-op-scroll {
	overflow-x: auto;
	margin-bottom: 12px;
}

.tokko-op-grid {
	margin-bottom: 0;
}

.tokko-op-grid th {
	white-space: nowrap;
}

.tokko-op-notes-list {
	margin: 32px 0 0;
	padding-left: 1.2em;
	color: #767676;
	font-size: 0.875rem;
}

.tag-badge-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tag-badge {
	display: inline-block;
	background-color: var(--wp--preset--color--primary);
	color: #ffffff;
	font-size: 0.85rem;
	font-weight: 700;
	padding: 6px 16px;
	border-radius: 999px;
}

/* 動作環境ページなど、flexible-table-block由来のテーブル */
.wp-block-flexible-table-block-table {
	overflow-x: auto;
}

.wp-block-flexible-table-block-table table {
	width: 100%;
	border-collapse: collapse;
}

.wp-block-flexible-table-block-table th,
.wp-block-flexible-table-block-table td {
	border: 1px solid #e5e5e5;
	padding: 12px 16px;
	text-align: left;
	line-height: 1.7;
}

.wp-block-flexible-table-block-table thead th {
	background-color: var(--wp--preset--color--primary);
	color: #ffffff;
}

.wp-block-flexible-table-block-table tbody th,
.wp-block-flexible-table-block-table tbody td:first-child {
	background-color: var(--wp--preset--color--primary-tint);
	font-weight: 700;
	white-space: nowrap;
}

/* カード風の枠(旧Snow Monkey Blocksのboxブロック代替。標準の group ブロックに付与) */
.tt-box {
	padding: 20px;
	background-color: var(--wp--preset--color--primary-tint);
	border-radius: 8px;
}

/* 料金プランページ: プラン比較表(旧・画像1枚 → HTMLテーブル化) */
.pricing-table-wrap {
	overflow-x: auto;
	margin: 0 auto;
}

.pricing-table {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	background-color: #ffffff;
}

.pricing-table th,
.pricing-table td {
	border: 1px solid #e5e5e5;
	padding: 14px 12px;
	text-align: center;
	vertical-align: middle;
	line-height: 1.6;
}

.pricing-table__label {
	width: 12%;
	text-align: left;
	background-color: #f7f7f7;
	font-weight: 700;
	white-space: nowrap;
}

.pricing-table__head {
	position: relative;
	color: #ffffff;
	font-size: 1.375rem;
	font-weight: 700;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.pricing-table__head small {
	display: block;
	font-size: 0.7rem;
	font-weight: 400;
	letter-spacing: 0.05em;
}

.pricing-table__badge {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 8px;
	border-radius: 999px;
	background-color: #ffc107;
	color: #333333;
	font-size: 0.65rem;
	font-weight: 700;
	vertical-align: middle;
}

.pricing-table__head.is-trial {
	background-color: #29abe2;
}

.pricing-table__head.is-mini {
	background-color: #8dc63f;
}

.pricing-table__head.is-standard {
	background-color: #f7941d;
}

.pricing-table__head.is-pro {
	background-color: #ed1c24;
}

.pricing-table__head.is-enterprise {
	background-color: #2e3192;
}

.pricing-table__desc-row td {
	background-color: #fafafa;
	font-size: 0.8rem;
	color: #444444;
	text-align: left;
}

.pricing-table__price {
	color: #e3007f;
	font-size: 1.375rem;
	font-weight: 700;
}

.pricing-table__price span {
	margin-left: 2px;
	font-size: 0.9rem;
	font-weight: 400;
}

.pricing-table__price small,
.pricing-table td small {
	display: block;
	margin-top: 4px;
	color: #666666;
	font-size: 0.7rem;
	font-weight: 400;
}

/* 導入事例: 一覧(case-study-card)・詳細(case-study-detail)共通パーツ */
.case-study-card {
	display: flex;
	gap: 24px;
	margin-bottom: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid #e5e5e5;
}

.case-study-card__media {
	flex: 0 0 40%;
}

.case-study-card__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.case-study-card__body {
	flex: 1;
}

.case-study-card__logo img {
	max-width: 300px;
	width: 100%;
	height: auto;
	margin-bottom: 12px;
}

.case-study-card__info {
	margin: 0 0 12px;
	line-height: 1.8;
}

.case-study-card__button {
	display: inline-block;
	margin-top: 8px;
	padding: 10px 28px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--primary);
	color: #ffffff;
	font-weight: 700;
	text-decoration: none;
}

.case-study-card__button:hover {
	background-color: var(--wp--preset--color--primary-dark);
	color: #ffffff;
}

.case-study-detail {
	display: flex;
	gap: 32px;
	align-items: flex-start;
	margin-bottom: 40px;
}

.case-study-detail__media {
	flex: 0 0 40%;
}

.case-study-detail__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.case-study-detail__body {
	flex: 1;
}

@media (max-width: 768px) {
	.case-study-card,
	.case-study-detail {
		flex-direction: column;
	}

	.case-study-card__media,
	.case-study-detail__media {
		flex: none;
		width: 100%;
	}
}

/* お役立ち資料ダウンロード一覧: 子ページ(各資料)の情報から動的に描画するカード */
.download-material {
	display: flex;
	gap: 24px;
	margin: 32px 0;
}

.download-material__media {
	flex: 0 0 33%;
}

.download-material__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.download-material__body {
	flex: 1;
}

.download-material__title {
	margin: 0 0 8px;
	font-size: 1.125rem;
}

.download-material__excerpt {
	margin: 0 0 12px;
}

.download-material__button {
	display: inline-block;
	padding: 10px 24px;
	border-radius: 4px;
	background-color: var(--wp--preset--color--primary);
	color: #ffffff;
	font-weight: 700;
	text-decoration: none;
}

.download-material__button:hover {
	background-color: var(--wp--preset--color--primary-dark);
	color: #ffffff;
}

@media (max-width: 600px) {
	.download-material {
		flex-direction: column;
	}

	.download-material__media {
		flex: none;
		width: 100%;
	}
}

/* お問い合わせフォームは旧サイトと同じZoho CRMのWebフォーム埋め込みに変更。
   Zoho側が自動生成するタイトル(見出しと文言が重複する)は非表示にする */
.contact-section .zcwf_title {
	display: none !important;
}

/* Zoho側のデフォルトCSSは入力欄がやや低く角がほぼ無いため、
   入力しやすいよう高さ・角丸・薄グレー背景を上書きする。
   Zoho側のstyleタグがこの後にDOM挿入されるため!importantで確実に上書きする */
.contact-section #crmWebToEntityForm.zcwf_lblLeft input[type='text'],
.contact-section #crmWebToEntityForm.zcwf_lblLeft textarea {
	background-color: #f5f5f5 !important;
	border-radius: 8px !important;
	padding: 10px 12px !important;
	min-height: 44px !important;
}

.contact-section #crmWebToEntityForm.zcwf_lblLeft textarea {
	min-height: 120px !important;
}

/* Zoho側は入力欄の幅を固定で60%にしているため、特にスマホ幅で
   親要素(ラベルと縦積みになった状態)に対して極端に狭く見えていた。
   セレクトも含め、常に親のfld列いっぱいに広げる */
.contact-section #crmWebToEntityForm.zcwf_lblLeft .zcwf_col_fld input[type='text'],
.contact-section #crmWebToEntityForm.zcwf_lblLeft .zcwf_col_fld textarea,
.contact-section #crmWebToEntityForm.zcwf_lblLeft .zcwf_col_fld select {
	width: 100% !important;
	float: none !important;
}

/* お問い合わせセクションのみ、他のプレーンな背景と区別するため
   超薄いグレーの背景を敷く */
.contact-section {
	background-color: #fafafa;
}

/* スマホ幅では入力欄がmain領域の余白(20px)にそのまま接していて
   境界線が見えづらかったため、お問い合わせセクションにのみ
   追加の左右余白を持たせる */
@media (max-width: 600px) {
	.contact-section {
		padding-left: 16px;
		padding-right: 16px;
	}
}