/*
Theme Name: RisTalk
Theme URI: https://ristalk.com/
Description: RisTalk サイト用の子テーマ。TwentyTwentyFive をベースにデザイン微調整（font-size / spacing / button サイズなど）を上書きする。
Template: twentytwentyfive
Author: JOC-NETWORK inc.
Version: 0.3.8
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: ristalk
*/

/* ここに RisTalk 独自の CSS 微調整を追記していく */

/* ------------------------------------------------------------------
   ホームのヒーローバナー（旧 risme-banner-1.png を HTML テキスト化）
   背景画像は themes/ristalk/assets/images/ に配置。
   ------------------------------------------------------------------ */
.ristalk-hero-banner{
	display:block;
	position:relative;
	overflow:hidden;
	border-radius:20px;
	max-width:770px;
	margin:0 auto;
	min-height:280px;
	background-image:url('/wp-content/themes/ristalk/assets/images/ristalk-banner-plain.png');
	background-size:cover;
	background-position:left center;
	color:#fff;
	text-decoration:none;
	font-family:'M PLUS Rounded 1c', sans-serif;
	transition:transform .2s ease;
}
.ristalk-hero-banner:hover{ transform:translateY(-2px); }

.ristalk-hero-banner__ribbon{
	position:absolute;
	top:28px;
	right:-50px;
	width:200px;
	background:#ff8a0c;
	color:#fff;
	text-align:center;
	padding:.4em 0;
	transform:rotate(45deg);
	transform-origin:center center;
	font-weight:bold;
	font-size:.95rem;
	letter-spacing:.05em;
	pointer-events:none;
	z-index:2;
	box-shadow:0 2px 6px rgba(0,0,0,.2);
}

.ristalk-hero-banner__inner{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:.15em;
	height:100%;
	padding:1.5em 1.5em 1.5em 32%;
	text-align:center;
}
.ristalk-hero-banner__eyebrow{
	color:#ff8a0c;
	font-size:1.4rem;
	margin:0;
	font-weight:bold;
	line-height:1.2;
	letter-spacing:.02em;
}
.ristalk-hero-banner__title{
	color:#fff;
	font-size:2.2rem;
	margin:.1em 0 .25em;
	font-weight:bold;
	line-height:1.15;
	letter-spacing:.02em;
}
.ristalk-hero-banner__desc{
	color:#fff;
	font-size:1.3rem;
	margin:0 0 .5em;
	line-height:1.4;
}

.ristalk-hero-banner__bottom{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:.8em;
	margin-top:.4em;
	width:100%;
	flex-wrap:wrap;
}
.ristalk-hero-banner__cta{
	display:inline-flex;
	align-items:center;
	gap:.5em;
	color:#ff8a0c;
	font-size:1.25rem;
	font-weight:bold;
	margin:0;
	line-height:1.2;
	white-space:nowrap;
}
.ristalk-hero-banner__arrow{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:1.6em;
	height:1.6em;
	background:#ff8a0c;
	color:#fff;
	border-radius:50%;
	font-size:.9em;
	line-height:1;
	font-weight:bold;
}

.ristalk-hero-banner__logo{
	width:150px;
	max-width:28%;
	min-width:110px;
	height:auto;
	flex-shrink:0;
}

@media (max-width:782px){
	.ristalk-hero-banner{ min-height:auto; max-width:100%; }
	.ristalk-hero-banner__inner{ padding:2em 1.5em; gap:.3em; }
	.ristalk-hero-banner__title{ font-size:1.6rem; }
	.ristalk-hero-banner__eyebrow{ font-size:1.1rem; }
	.ristalk-hero-banner__desc{ font-size:1rem; }
	.ristalk-hero-banner__cta{ font-size:1rem; }
	.ristalk-hero-banner__bottom{ flex-direction:column; gap:.6em; }
	.ristalk-hero-banner__logo{ width:130px; max-width:50%; }
	.ristalk-hero-banner__ribbon{ right:-70px; width:200px; font-size:.85rem; top:22px; }
}

/* ------------------------------------------------------------------
   フッターのロゴ位置調整
   タグライン <p> には padding-left:spacing--30 が inline で入っているが
   同じコンテナ内の .wp-block-site-logo には padding が無く、
   ロゴだけ左に寄って見えるので揃える。
   ------------------------------------------------------------------ */
footer.wp-block-template-part .wp-block-site-logo{
	padding-left:var(--wp--preset--spacing--30);
}

/* ============================================================
   トップページ 各セクション微調整 (2026-10-20)
   WordPress が自動生成する wp-container-core-group-is-layout-xxxxxxxx /
   wp-container-content-xxxxxxxx クラスを足がかりにスコープを絞っている。
   インライン style を上書きするため !important を利用。
   ============================================================ */

/* --- Why RisTalk? 3カード: 常時横並び + 約 3/4 に縮小 --- */
.wp-container-core-group-is-layout-912fff43{
	flex-wrap:nowrap !important;
}
.wp-container-content-84caec02{
	padding-top:calc(var(--wp--preset--spacing--50) * 0.75) !important;
	padding-bottom:calc(var(--wp--preset--spacing--50) * 0.75) !important;
	border-radius:75px !important;
	flex:1 1 0 !important;
	min-width:0 !important;
}
.wp-container-content-84caec02 > h2{
	font-size:1.6rem !important;
}
.wp-container-content-84caec02 p{
	font-size:0.95rem !important;
}

/* --- SOS for emergencies: 3タイルを中央寄せ (最小構成) --- */
.wp-container-core-columns-is-layout-7788c425{
	max-width:1100px !important;
	margin-left:auto !important;
	margin-right:auto !important;
	justify-content:center !important;
}

/* --- SOS タイトル行 (h2 + 「スマホの異常検知機能」) を他セクション
   タイトルと同じ constrained content-size max-width に収めて左端 X を揃える --- */
.wp-container-core-group-is-layout-66042007{
	max-width:var(--wp--style--global--content-size, 640px) !important;
	margin-left:auto !important;
	margin-right:auto !important;
}

/* --- トップページ NEWS セクション: 見出し 2/3、日付/タイトル 80% (2026-10-21)
   元: h1 clamp(2.629rem..5rem) / date=medium(1rem) / title=large(1.38rem)
   後: h1 × 2/3。date × 0.8 = 0.8rem、title × 0.8 = 1.104rem               --- */
.wp-container-core-columns-is-layout-75c7b20d h1.wp-block-heading{
	font-size:clamp(1.753rem, 1.753rem + ((1vw - 0.2rem) * 2.479), 3.333rem) !important;
}
.wp-container-core-columns-is-layout-75c7b20d .wp-block-post-date.has-medium-font-size{
	font-size:0.8rem !important;
}
.wp-container-core-columns-is-layout-75c7b20d .wp-block-post-title.has-large-font-size{
	font-size:1.104rem !important;
}

/* --- 「RisTalkをもっと知る」4タイル: ボタンを下寄せ揃え (2026-10-21)
   各タイルの content 高さが違うので flex column + margin-top:auto でボタンを揃え。
   padding-bottom はブロック既定の spacing--40 のまま維持し灰色余白を残す。     --- */
.wp-container-core-columns-is-layout-84f855d9 .wp-block-column{
	display:flex !important;
	flex-direction:column !important;
}
.wp-container-core-columns-is-layout-84f855d9 .wp-block-column .wp-block-buttons{
	margin-top:auto !important;
}

/* --- アルバムプレビュー (page-id-2560): TranslatePress 言語切替フローターを非表示
   /album_preview/ ・ /en/album_preview/ 等全言語 URL で body に .page-id-2560 が付くので
   1 ルールで共通スコープ化。(2026-10-22)                                 --- */
.page-id-2560 .trp-floating-switcher{
	display:none !important;
}

/* ============================================================
   投稿ページ カテゴリーヘッダー帯 (2026-10-21)
   ショートコード [rst_cat_band] (plugins/ristalk-site-tweaks) が出力する
   .ristalk-cat-band をスタイル。カテゴリー別の色は BEM modifier
   (.ristalk-cat-band--{slug}) で切替。CSS 疑似要素と wp:post-terms に
   頼らず素の DOM 構造にすることで WP flex 子要素の auto margin や
   TranslatePress の Block Content Restriction による非表示を回避する。
   ============================================================ */
.ristalk-cat-band{
	color:#fff;
	padding:2.5rem 1rem;
	width:100%;
	text-align:center;
	background:#999;
}
.ristalk-cat-band__inner{
	display:inline-flex;
	align-items:center;
	gap:.6em;
	max-width:100%;
}
.ristalk-cat-band__icon{
	font-size:3rem;
	line-height:1.3;
	flex-shrink:0;
}
.ristalk-cat-band__text{
	display:flex;
	flex-direction:column;
	text-align:left;
}
.ristalk-cat-band__name{
	font-size:3rem;
	font-weight:bold;
	line-height:1.3;
	font-family:var(--wp--preset--font-family--m-plus-rounded-1-c, inherit);
}
.ristalk-cat-band__sub{
	font-size:1rem;
	margin-top:.2em;
	opacity:.95;
	letter-spacing:.08em;
}

/* ============================================================
   関連投稿リスト [rst_cat_posts] (2026-10-21)
   single 投稿下部 + 4 ランディング固定ページで共通利用。
   ============================================================ */
.rst-cat-posts__heading{
	text-align:center;
	margin:0 0 1em;
	font-size:1.4rem;
	font-weight:700;
	letter-spacing:.06em;
	font-family:var(--wp--preset--font-family--m-plus-rounded-1-c, inherit);
}
.rst-cat-posts__heading a{
	color:inherit;
	text-decoration:none;
	border-bottom:2px solid currentColor;
	padding-bottom:.1em;
	transition:opacity .15s ease;
}
.rst-cat-posts__heading a:hover{
	opacity:.7;
}
.rst-cat-posts{
	list-style:none;
	margin:0;
	padding:0;
	font-family:var(--wp--preset--font-family--m-plus-rounded-1-c, inherit);
}
.rst-cat-posts__item{
	border-bottom:1px solid var(--wp--preset--color--accent-6, #ddd);
}
.rst-cat-posts__item:first-child{
	border-top:1px solid var(--wp--preset--color--accent-6, #ddd);
}
.rst-cat-posts__link{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:1em;
	padding:var(--wp--preset--spacing--30, 1rem) 0;
	text-decoration:none;
	color:inherit;
	transition:background .15s ease;
}
.rst-cat-posts__link:hover{
	background:rgba(0,0,0,.03);
}
.rst-cat-posts__title{
	font-size:1.2rem;
	font-weight:700;
	flex:1 1 auto;
}
.rst-cat-posts__date{
	font-size:.9rem;
	color:#777;
	flex-shrink:0;
}
.rst-cat-posts__empty{
	color:#777;
	text-align:center;
	padding:2em 0;
	font-family:var(--wp--preset--font-family--m-plus-rounded-1-c, inherit);
}
@media (max-width:600px){
	.rst-cat-posts__link{ flex-direction:column; align-items:flex-start; gap:.25em; }
	.rst-cat-posts__title{ font-size:1rem; }
}

/* --- カード風 (archive ページ用) --------------------------------- */
.rst-cat-posts--card{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
	gap:1.5rem;
}
.rst-cat-posts--card .rst-cat-posts__item{
	border:none;
	background:#f3f3f3;
	border-radius:20px;
	overflow:hidden;
	transition:transform .15s ease, box-shadow .15s ease;
}
.rst-cat-posts--card .rst-cat-posts__item:first-child{
	border-top:none;
}
.rst-cat-posts--card .rst-cat-posts__item:hover{
	transform:translateY(-2px);
	box-shadow:0 6px 20px rgba(0,0,0,.08);
}
.rst-cat-posts--card .rst-cat-posts__link{
	flex-direction:column;
	align-items:flex-start;
	justify-content:flex-start;
	gap:.6em;
	padding:1.4rem;
	height:100%;
}
.rst-cat-posts--card .rst-cat-posts__link:hover{
	background:transparent;
}
.rst-cat-posts--card .rst-cat-posts__title{
	font-size:1.15rem;
	line-height:1.4;
	flex:0 0 auto;
}
.rst-cat-posts--card .rst-cat-posts__excerpt{
	font-size:.9rem;
	color:#555;
	line-height:1.55;
	flex:1 1 auto;
}
.rst-cat-posts--card .rst-cat-posts__date{
	font-size:.8rem;
	color:#777;
	margin-top:auto;
}

.ristalk-cat-band--news{ background:#ff8a0c; }
.ristalk-cat-band--about-ristalk{ background:#4a90e2; }
.ristalk-cat-band--use-cases{ background:#4caf50; }
.ristalk-cat-band--tips{ background:#fbc02d; }
.ristalk-cat-band--safety{ background:#7b61c6; }

/* ============================================================
   「RisTalkについて」カテゴリ記事の本文デザイン (2026-10-26)
   投稿詳細 (.entry-content) に対して、章立て記事を読みやすく整形。
   冒頭リード・章見出し・終章・関連リンクピル・CTA ボタンを提供。
   スコープ: body.category-about-ristalk .entry-content
   ============================================================ */
body.category-about-ristalk .entry-content{
	color:#333;
	line-height:1.9;
}
/* 冒頭リード文 (最初の段落) */
body.category-about-ristalk .entry-content > p:first-of-type{
	text-align:center;
	color:#888;
	font-size:0.95rem;
	letter-spacing:0.08em;
	margin:1em auto 3em;
	padding:1.2em 1em;
	max-width:36em;
	border-top:1px solid #eee;
	border-bottom:1px solid #eee;
}
/* 第X章 見出し */
body.category-about-ristalk .entry-content h2{
	margin:3em 0 1em;
	padding:0.3em 0 0.3em 0.9em;
	font-size:1.5rem;
	line-height:1.5;
	font-weight:700;
	color:#222;
	border-left:6px solid #ff8a0c;
	letter-spacing:0.02em;
}
/* 終章 (最後の h2) — カテゴリ帯と同じブルー */
body.category-about-ristalk .entry-content h2:last-of-type{
	border-left-color:#4a90e2;
	color:#4a90e2;
	margin-top:4em;
	padding:0.5em 0.9em;
	background:linear-gradient(90deg,rgba(74,144,226,0.08),transparent);
}
body.category-about-ristalk .entry-content p{
	margin:0 0 1em;
}
body.category-about-ristalk .entry-content ul{
	margin:1.2em 0;
	padding-left:1.4em;
}
body.category-about-ristalk .entry-content ul li{
	margin:0.5em 0;
	line-height:1.85;
}
body.category-about-ristalk .entry-content ul li::marker{
	color:#ff8a0c;
	font-size:1.2em;
}
/* 関連リンク (→ 使い方 / スマートSOS / プライバシー保護 等) をピル化 */
body.category-about-ristalk .entry-content a[href*="ristalk.com/howto"],
body.category-about-ristalk .entry-content a[href*="ristalk.com/safety"],
body.category-about-ristalk .entry-content a[href*="ristalk.com/privacy"],
body.category-about-ristalk .entry-content a[href*="ristalk.com/naming"],
body.category-about-ristalk .entry-content a[href*="ristalk.com/story"],
body.category-about-ristalk .entry-content a[href*="2026/10/21/ristalk"]{
	display:inline-block;
	margin:0.4em 0;
	padding:0.5em 1.3em;
	background:#fff8f0;
	border:1px solid #ff8a0c;
	border-radius:999px;
	color:#ff8a0c;
	text-decoration:none;
	font-weight:700;
	font-size:0.95rem;
	transition:background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
body.category-about-ristalk .entry-content a[href*="ristalk.com/howto"]:hover,
body.category-about-ristalk .entry-content a[href*="ristalk.com/safety"]:hover,
body.category-about-ristalk .entry-content a[href*="ristalk.com/privacy"]:hover,
body.category-about-ristalk .entry-content a[href*="ristalk.com/naming"]:hover,
body.category-about-ristalk .entry-content a[href*="ristalk.com/story"]:hover,
body.category-about-ristalk .entry-content a[href*="2026/10/21/ristalk"]:hover{
	background:#ff8a0c;
	color:#fff;
	transform:translateY(-1px);
}
/* 「今すぐダウンロード」 — 最後の段落のリンクを CTA 化 */
body.category-about-ristalk .entry-content > p:last-of-type a{
	display:inline-block;
	margin:1.5em 0 0;
	padding:0.9em 2.4em;
	background:linear-gradient(135deg,#ff8a0c,#ff6b00);
	color:#fff !important;
	text-decoration:none;
	border-radius:999px;
	font-weight:700;
	font-size:1.1rem;
	box-shadow:0 6px 16px rgba(255,138,12,0.35);
	border:none;
}
body.category-about-ristalk .entry-content > p:last-of-type a:hover{
	transform:translateY(-2px);
	box-shadow:0 8px 20px rgba(255,138,12,0.45);
}
@media (max-width:600px){
	body.category-about-ristalk .entry-content h2{
		font-size:1.25rem;
		padding-left:0.7em;
		border-left-width:4px;
	}
	body.category-about-ristalk .entry-content{
		font-size:0.95rem;
		line-height:1.85;
	}
}

@media (max-width:600px){
	.ristalk-cat-band__icon{ font-size:2.2rem; }
	.ristalk-cat-band__name{ font-size:2rem; }
	.ristalk-cat-band__sub{ font-size:.85rem; }
}