@charset "UTF-8";
/* ============================================================================
   UIJ TOPICS 共通テンプレート  v1.0
   ----------------------------------------------------------------------------
   置き場所は「テーマの共通CSS」「テーマ内の別ファイル」「カスタマイザーの
   追加CSS」のどれでも動きます。クラスは tp- 接頭辞で閉じてあります。

   §1  変数
   §2  テーマCSSの打ち消し（ここだけ詳細度を1段上げています）
   §3  土台
   §4  KV
   §5  2カラム
   §6  記事：部品どうしの余白
   §7  記事：部品
   §8  商品情報
   §9  権利表記
   §10 SP（1023px 以下）
   ========================================================================= */


/* §1  変数 ================================================================ */

.tp-template {
	--tp-red:    #DE252A;   /* 見出し大のバー・本文内リンク */
	--tp-ink:    #343434;   /* 本文・見出し小のバー */
	--tp-gray:   #A2A2A2;   /* 注記・権利表記 */
	--tp-rule:   #AEAEAE;   /* 表の罫線 */
	--tp-switch: #E60012;   /* Nintendo Switch 2 */
	--tp-ps:     #0070CC;   /* PlayStation 5 */
	--tp-ease:   .25s cubic-bezier(.4, 0, .2, 1);
}


/* §2  テーマCSSの打ち消し ================================================= */

/* 本文の画像は幅50%固定（!important）。テンプレ内は全幅に戻す */
.main-contents .tp-template img:not(.emoji) {
	width: 100% !important;
	height: auto !important;
	margin-bottom: 0 !important;
	display: block;
}

/* 段落の余白は部品側で持つので、テーマの margin-bottom:15px を外す */
.main-contents .tp-template p:not(:last-child) {
	margin-bottom: 0;
}

/* コメントだけの行が wpautop に <p> で包まれるので、それを消す */
.main-contents .tp-template p:empty {
	display: none;
}

/* <a> を縦に並べて書いた箇所に wpautop が入れる <br> を無効化する
   （テーマの .link-box br と同じ考え方） */
.tp-product__group__list br,
.tp-article__link br {
	display: none;
}


/* §3  土台 ================================================================ */

.tp-template {
	text-align: left;            /* html,body の text-align:center を戻す */
	color: var(--tp-ink);
}

.tp-template a {
	color: inherit;
	transition: var(--tp-ease);
}

.tp-template figure {
	margin: 0;
	line-height: 0;
}


/* §4  KV ================================================================== */

.tp-kv {
	position: relative;
	box-shadow: 10px 7px 32px rgba(114, 114, 114, .2);
}

/* 右下のストライプ。KV の下端を中心に重ね、右端はセクションの
   overflow:hidden で切れる（デザインどおり） */
.tp-kv::after {
	content: "";
	position: absolute;
	left: 74.84%;                /* 898 / 1200 */
	bottom: 0;
	width: 129.08%;              /* 1549 / 1200 */
	aspect-ratio: 219 / 11;      /* stripe.svg の比率 */
	transform: translateY(50%);
	background: url(/wp-content/themes/u-and-i/images/stripe.svg) left center / contain no-repeat;
	opacity: .6;
	pointer-events: none;
}


/* §5  2カラム ============================================================= */

.tp-cols {
	display: flex;
	align-items: flex-start;
}

.tp-article {
	width: 55.8333%;             /* 670 / 1200 */
	padding: 30px 20px;
}

.tp-product {
	width: 44.1667%;             /* 530 / 1200 */
	padding: 50px 30px 50px 52px;
}

/* 片方しかない記事は残ったほうを全幅にする */
.tp-cols:not(:has(.tp-product)) > .tp-article,
.tp-cols:not(:has(.tp-article)) > .tp-product {
	width: 100%;
}


/* §6  記事：部品どうしの余白 ============================================== */

/* 部品は自分の上下 padding を持ち、部品どうしの間はここで 10px 空ける */
.tp-article > * + * {
	margin-top: 10px;
}

/* wpautop が作るコメントだけの <p>（§2 で display:none）が先頭に来ても、
   いちばん上の部品に余白が付かないようにする */
.tp-article > :first-child,
.tp-article > p:empty:first-child + * {
	margin-top: 0;
}


/* §7  記事：部品 ========================================================== */

/* 見出し（大・赤バー） */
.tp-article__h2 {
	padding: 20px 0 10px;
}

.tp-article__h2__text {
	display: block;
	border-left: 4px solid var(--tp-red);
	padding: 10px 0 10px 20px;
	font-size: 1.375rem;         /* 22px */
	font-weight: 700;
	line-height: 1.5;
}

/* 見出し（小・黒バー） */
.tp-article__h3 {
	padding: 20px 0 0;
}

.tp-article__h3__text {
	display: block;
	border-left: 4px solid var(--tp-ink);
	padding: 10px 0 10px 20px;
	font-size: 1.125rem;         /* 18px */
	font-weight: 700;
	line-height: 1.5;
}

/* 段落。クラスなしの <p>（wpautop が作るもの）にも同じ型を当てる */
.tp-article__p,
.tp-article > p:not([class]) {
	padding: 0 20px;
	font-size: 1rem;             /* 16px */
	line-height: 1.8;
}

/* 本文内リンク */
.tp-article__p a,
.tp-article > p:not([class]) a {
	color: var(--tp-red);
	text-decoration: underline;
}

.tp-article__p a:hover,
.tp-article > p:not([class]) a:hover {
	text-decoration: none;
}

/* 注記 */
.tp-article__note {
	padding: 0 20px;
	color: var(--tp-gray);
	font-size: .75rem;           /* 12px */
	line-height: 1.7;
}

/* 画像グリッド。1枚＝全幅、2枚＝2列、3枚＝3列。高さは画像の比率のまま */
.tp-article__grid--1,
.tp-article__grid--2,
.tp-article__grid--3 {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 15px;
	padding: 10px 0;
}

.tp-article__grid--1 > .tp-article__img { width: 100%; }
.tp-article__grid--2 > .tp-article__img { width: calc((100% - 15px) / 2); }
.tp-article__grid--3 > .tp-article__img { width: calc((100% - 30px) / 3); }

.tp-article__img {
	box-shadow: 10.63px 7.73px 17.4px rgba(114, 114, 114, .25);
}

/* 動画：本文に YouTube の URL を1行書くと WordPress が埋め込みに変える。
   サムネの用意も再生ボタンの自作も要らない（記事内で再生される） */
.tp-article__video {
	padding: 10px 0;
}

.tp-article__video p {
	margin: 0;
}

.main-contents .tp-article__video iframe {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9;
	border: 0;
	box-shadow: 10.63px 7.73px 17.4px rgba(114, 114, 114, .25);
}

/* 公式サイトなどへのリンク（▶▶▶ 付き） */
.tp-article__link {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 0 20px;
	font-size: .9375rem;         /* 15px */
	font-weight: 700;
	line-height: 1;
}

.tp-article__link a {
	text-decoration: none;
}

.tp-article__link a:hover {
	color: var(--tp-red);
}

/* ▶▶▶。15px の枠に 13px 幅の三角（Figma の正三角形と同じ）を3つ、5px 空けて並べる。
   空の span はエディタに消されることがあるので、要素を使わず ::after で描く */
.tp-article__link::after {
	content: "";
	flex: 0 0 auto;
	width: 55px;
	height: 15px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'%3E%3Cpath d='M1 0 L14 7.5 L1 15 Z' fill='%23DE252A'/%3E%3C/svg%3E");
	background-size: 15px 15px;
	background-repeat: space;
}


/* §8  商品情報 ============================================================ */

.tp-product__inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.tp-product__stack {
	display: flex;
	flex-direction: column;
	gap: 60px;
}

/* -- 販売店一覧 -- */

.tp-product__shops {
	display: flex;
	flex-direction: column;
	gap: 30px;
	padding-bottom: 10px;
}

.tp-product__shops-title,
.tp-product__table-head {
	font-size: 1.375rem;         /* 22px */
	font-weight: 700;
	line-height: 1.5;
}

.tp-product__shops-list {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* 機種グループ。--switch / --ps でアクセント色を切り替える */
.tp-product__group--switch,
.tp-product__group--ps {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.tp-product__group--switch { --tp-accent: var(--tp-switch); }
.tp-product__group--ps     { --tp-accent: var(--tp-ps); }

.tp-product__group__title {
	border-left: 4px solid var(--tp-accent);
	padding-left: 10px;
	font-size: 1.125rem;         /* 18px */
	font-weight: 700;
	line-height: 1.5;
}

.tp-product__group__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* 販売店ボタン。塗り＋地紋、枠線は左の灰から右の機種色へのグラデーション */
a.tp-product__group__shop {
	display: flex;
	align-items: center;
	width: calc((100% - 8px) / 2);
	height: 48px;
	padding-left: 28px;
	border: 2px solid transparent;
	border-radius: 24px;
	color: #fff;
	font-size: .9375rem;         /* 15px */
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	background:
		url(/wp-content/themes/u-and-i/images/about-map.png) 0 -38.6px / 282px auto no-repeat border-box padding-box,
		linear-gradient(var(--tp-ink), var(--tp-ink)) padding-box,
		linear-gradient(90deg, #A7A7A7, var(--tp-accent)) border-box;
	box-shadow: 0 4px 4px -1px rgba(12, 12, 13, .05),
	            0 4px 4px -1px rgba(12, 12, 13, .1);
}

a.tp-product__group__shop:hover,
a.tp-product__group__shop:focus-visible {
	background:
		url(/wp-content/themes/u-and-i/images/about-map.png) 0 -38.6px / 282px auto no-repeat border-box padding-box,
		linear-gradient(var(--tp-accent), var(--tp-accent)) padding-box,
		linear-gradient(90deg, var(--tp-accent), var(--tp-accent)) border-box;
}

/* -- 表 -- */

.tp-product__table {
	display: flex;
	flex-direction: column;
}

.tp-product__table-head {
	padding-bottom: 30px;
}

.tp-product__table-body {
	margin: 0;
	padding: 0 10px;
}

.tp-product__table-row {
	display: flex;
	gap: 16px;
	padding: 15px 5px;
	border-bottom: 1px solid var(--tp-rule);
	font-size: .875rem;          /* 14px */
	line-height: 1.7;
}

.tp-product__table-row > dt {
	flex: 0 0 120px;
	width: 120px;
}

.tp-product__table-row > dd {
	flex: 1 1 auto;
	margin: 0;
	min-width: 0;
}

/* CERO。テキストを書いたまま CSS で隠してアイコンに差し替える
   （CSS が当たらない環境ではテキストのまま読める） */
.tp-product__cero-icon {
	display: block;
	width: 37px;
	aspect-ratio: 36.85 / 45.35;
	background: center / contain no-repeat;
	overflow: hidden;
	text-indent: -100em;
	white-space: nowrap;
}

.tp-product__cero-icon--a  { background-image: url(/wp-content/themes/u-and-i/images/ago-icon/all.svg); }
.tp-product__cero-icon--b  { background-image: url(/wp-content/themes/u-and-i/images/ago-icon/12.svg); }
.tp-product__cero-icon--c  { background-image: url(/wp-content/themes/u-and-i/images/ago-icon/15.svg); }
.tp-product__cero-icon--d  { background-image: url(/wp-content/themes/u-and-i/images/ago-icon/17.svg); }
.tp-product__cero-icon--z  { background-image: url(/wp-content/themes/u-and-i/images/ago-icon/18.svg); }
.tp-product__cero-icon--db { background-image: url(/wp-content/themes/u-and-i/images/ago-icon/db.svg); }

/* -- 注記 -- */

.tp-product__note {
	padding: 10px;
	color: var(--tp-gray);
	font-size: .75rem;           /* 12px */
	line-height: 1.7;
}


/* §9  権利表記 ============================================================ */

.tp-credit {
	padding: 0 20px;
	color: var(--tp-gray);
	font-size: .6875rem;         /* 11px */
	line-height: 1.6;
}


/* §10  SP（1023px 以下） ================================================== */
/* 文字サイズはテーマの rem（767px 以下で 0.9 倍）に任せる。
   ここでは並びと余白だけを変える。 */

@media screen and (max-width: 1023px) {

	/* KV は左右の余白を外して画面幅いっぱいに
	   （.tp-template figure の margin:0 に勝たせるため .tp-template を前に置く） */
	.tp-template .tp-kv {
		width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}

	.tp-kv::after {
		left: 53.33%;            /* 200 / 375 */
		width: 206.67%;          /* 775 / 375 */
	}

	/* 縦積み。販売店を先に出す（先方指示） */
	.tp-cols {
		flex-direction: column;
		gap: 15px;
		padding: 30px 0;
	}

	.tp-article,
	.tp-product {
		width: 100%;
		padding: 0;
	}

	.tp-product {
		order: -1;
	}

	/* 記事 */
	.tp-article__h2 { padding: 30px 0 0; }

	.tp-article__p,
	.tp-article > p:not([class]),
	.tp-article__note {
		padding: 0 10px;
	}

	.tp-article__grid--1,
	.tp-article__grid--2,
	.tp-article__grid--3 {
		gap: 7px;
		padding: 0;
	}

	.tp-article__grid--2 > .tp-article__img,
	.tp-article__grid--3 > .tp-article__img {
		width: 100%;
	}

	.tp-article__video { padding: 0; }

	.tp-article__link {
		padding: 0;
		font-size: 15px;         /* SP でも 15px（デザインどおり） */
	}

	/* 商品情報 */
	.tp-product__inner { gap: 30px; }

	.tp-product__stack {
		display: contents;       /* SP ではまとめ枠を無くして inner の gap に委ねる */
	}

	.tp-product__shops      { gap: 20px; padding-bottom: 0; }
	.tp-product__shops-list { gap: 20px; }

	.tp-product__group--switch,
	.tp-product__group--ps { gap: 10px; }

	.tp-product__group__list { gap: 4px; }

	a.tp-product__group__shop {
		width: calc((100% - 4px) / 2);
		height: 38px;
		padding-left: 22px;
	}

	.tp-product__table      { gap: 20px; }
	.tp-product__table-head { padding-bottom: 0; }
	.tp-product__note       { padding: 10px 10px 0; }

	.tp-product__cero-icon { width: 32px; }

	/* 権利表記（SP は左右の余白をコンテンツ幅に任せる） */
	.tp-credit {
		padding: 0;
		font-size: 11px;              /* SP でも 11px（デザインどおり） */
	}
}