@charset "utf-8";
/* ============================================================================
   design.css — デザイン一覧
   ----------------------------------------------------------------------------
   もとは desgin.css という綴り誤りのファイル名だった（2026-08 に design.css へ改名）。
   参照元は /design/index.html の1箇所だけだったので、あわせて直した。

   2026-08 のデザイン刷新で書き直した。値は tokens.css の変数を使う。

   ⚠ .npage .contents h2 の指定について
     見本の名前（No. M170602 など）は h2 で書かれている。
     base.css の .npage h2 は「セクションの見出し」用の指定なので、
     ここで上書きしないと見本名が中央寄せの帯になってしまう。
     以前この上書きを外して表示が崩れた経緯があるので、消さないこと。
   ========================================================================= */

/* --- 冒頭の説明 ---------------------------------------------------------- */
.setsumei {
	margin-bottom: var(--sw-sp-7);
	padding: var(--sw-sp-5);
	background: var(--sw-bg-soft);
	border-radius: var(--sw-radius-lg);
}
.setsulist { list-style: none; margin: 0; padding: 0; }
.setsulist li {
	margin: 0 0 var(--sw-sp-2);
	line-height: var(--sw-lh-base);
}
.setsulist li:last-child { margin-bottom: 0; }

/* --- 見本1件分 ----------------------------------------------------------- */
.contents { padding-bottom: 0; }

.planbg {
	display: grid;
	gap: var(--sw-sp-5);
	align-items: start;
	margin: 0 0 var(--sw-sp-7);
	padding: var(--sw-sp-5);
	background: var(--sw-bg);
	border: 1px solid var(--sw-border);
	border-radius: var(--sw-radius-lg);
	box-shadow: var(--sw-shadow-sm);
	text-align: left;
}
@media (min-width: 820px) {
	.planbg { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sw-sp-6); }
}

.planbg figure { width: auto; margin: 0; }
.planbg .images {
	border: 1px solid var(--sw-border);
	border-radius: var(--sw-radius);
	overflow: hidden;
	line-height: 0;
}
.planbg .images img {
	width: 100%;
	display: block;
	transition: transform .4s var(--sw-ease);
}
.planbg .images a:hover img { transform: scale(1.03); }

.planbg .des {
	display: flex;
	flex-direction: column;
	gap: var(--sw-sp-4);
	height: 100%;
}
.planbg .des .text {
	width: auto;
	margin: 0;
	padding: 0;
	text-align: left;
}

/* 見本の名前 */
.npage .contents h2 {
	margin: 0 0 var(--sw-sp-4);
	padding: 0 0 var(--sw-sp-3);
	background: none;
	border: 0;
	border-bottom: 2px solid var(--sw-blue-200);
	border-radius: 0;
	color: var(--sw-navy-800);
	font-family: var(--sw-font-serif);
	font-size: var(--sw-fs-xl);
	font-weight: 600;
	text-align: left;
	text-shadow: none;
	letter-spacing: .02em;
}

/* 章の見出し
   ---------------------------------------------------------------------------
   ⚠ このページの h2 は「見本の名前（No. M170602 など）」用に、すぐ上で
     左寄せ＋下線に上書きしている。説明の章にも同じ見た目が当たると
     デザイン名と章タイトルの区別が付かなくなるので、章だけ base.css の
     帯スタイル（中央寄せ・薄い青の背景）に戻す。 */
.npage .contents h2.designsec {
	clear: both;
	background: var(--sw-blue-50);
	border: 1px solid var(--sw-blue-200);
	border-bottom: 1px solid var(--sw-blue-200);
	border-radius: var(--sw-radius);
	padding: var(--sw-sp-3) var(--sw-sp-5);
	margin: var(--sw-sp-8) 0 var(--sw-sp-5);
	text-align: center;
	font-size: clamp(1.125rem, 3vw, var(--sw-fs-xl));
}

/* 各デザインの説明文（既存6種のカード内）。
   .newdesign__desc と同じ見え方に揃えている。 */
.designdesc {
	margin: var(--sw-sp-3) 0 0;
	font-size: var(--sw-fs-sm);
	color: var(--sw-ink-mid);
	line-height: 1.9;
}

/* 選び方・士業別・Q&A の本文 */
.designtext { margin: 0 0 var(--sw-sp-4); line-height: var(--sw-lh-base); }
.designtext:last-child { margin-bottom: 0; }

/* 配色バリエーションの注記
   ---------------------------------------------------------------------------
   M1705Blue と MCool02 は、それぞれ M1705Red / MCool01 と同じ構成の配色違い。
   専用のサンプルサイトが無いため、以前は「サンプルサイトを見る」と書いて
   別の配色のサイトへリンクしていた（青を見ようとして赤が開いた）。
   何が見られるのかを先に伝えるための2つ。 */
.variant {
	margin: 0 0 var(--sw-sp-3);
	color: var(--sw-navy-700);
	font-size: var(--sw-fs-sm);
	font-weight: 600;
}
.variant strong { color: var(--sw-blue-600); }

.variantnote {
	margin: var(--sw-sp-2) 0 0;
	color: var(--sw-ink-weak);
	font-size: var(--sw-fs-xs);
	line-height: 1.6;
}

/* デザインの特徴タグ */
.pointimg {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sw-sp-2);
	list-style: none;
	margin: 0;
	padding: 0;
}
.pointimg li {
	margin: 0;
	padding: var(--sw-sp-1) var(--sw-sp-4);
	background: var(--sw-blue-50);
	border: 1px solid var(--sw-blue-200);
	border-radius: var(--sw-radius-pill);
	color: var(--sw-blue-600);
	font-size: var(--sw-fs-xs);
	font-weight: 700;
	white-space: nowrap;
}

/* サンプルサイトを見るボタン */
.designbtn {
	clear: both;
	margin-top: auto;
	width: auto;
	border: 0;
	background: none;
}
.designbtn a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sw-sp-2);
	width: 100%;
	min-height: 48px;
	padding: var(--sw-sp-3) var(--sw-sp-5);
	border-radius: var(--sw-radius-pill);
	background: var(--sw-blue-500);
	color: #fff;
	font-size: var(--sw-fs-base);
	font-weight: 700;
	text-decoration: none;
	box-shadow: var(--sw-shadow-sm);
	transition: background-color var(--sw-transition), transform var(--sw-transition);
}
.designbtn a::after {
	content: "";
	width: 8px; height: 8px;
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: rotate(45deg);
}
.designbtn a:hover {
	background: var(--sw-navy-700);
	color: #fff;
	transform: translateY(-2px);
	text-decoration: none;
}

.des p { clear: both; margin: 0; }
.daiji { font-weight: 700; color: var(--sw-navy-800); }
.kasen { background: linear-gradient(transparent 62%, rgba(247, 184, 40, .55) 62%); font-weight: 700; }

/* ==========================================================================
   新デザインの枠（2026-08 追加）
   --------------------------------------------------------------------------
   既存6種は2017年制作のテンプレートが土台。2026年に新しく組んだデザインは
   同列に7枚目として並べると埋もれるため、一覧の先頭に別枠で大きく見せる。
   既存の「3枚＋3枚」の並びには手を触れていない。
   ========================================================================== */
.newdesign {
	position: relative;
	margin-bottom: var(--sw-sp-8);
	padding: var(--sw-sp-6);
	background: linear-gradient(180deg, var(--sw-blue-50), var(--sw-bg) 60%);
	border: 1px solid var(--sw-blue-200);
	border-radius: var(--sw-radius-lg);
	box-shadow: var(--sw-shadow-sm);
}
.newdesign__label {
	display: inline-block;
	margin: 0 0 var(--sw-sp-4);
	padding: 4px 14px;
	border-radius: var(--sw-radius-pill);
	background: var(--sw-red);
	color: #fff;
	font-size: var(--sw-fs-xs);
	font-weight: 700;
	letter-spacing: .08em;
}
.newdesign__inner { display: grid; gap: var(--sw-sp-5); align-items: start; }
.newdesign__figure { margin: 0; line-height: 0; }
.newdesign__figure img {
	width: 100%;
	border: 1px solid var(--sw-border);
	border-radius: var(--sw-radius);
	background: #fff;
}
/* ⚠ 見本名の見出しは .npage .contents h2（詳細度 0,2,1）で下線付きに
   整形されている。ここを 0,1,1 の .newdesign__body h2 で書くと負けるので、
   同じ詳細度以上で指定する。下線は既存カードと揃えたいので活かしたまま、
   直下のサブタイトルとの間隔だけ詰める。 */
.npage .contents .newdesign__body h2 {
	margin-bottom: var(--sw-sp-3);
	padding-bottom: var(--sw-sp-2);
}
.newdesign__sub {
	margin: 0 0 var(--sw-sp-4);
	font-size: var(--sw-fs-sm);
	color: var(--sw-ink-mid);
}
.newdesign__sub strong { color: var(--sw-blue-600); }
.newdesign__desc {
	margin: var(--sw-sp-4) 0 var(--sw-sp-5);
	font-size: var(--sw-fs-sm);
	color: var(--sw-ink-mid);
	line-height: 1.9;
}
@media (min-width: 820px) {
	.newdesign__inner { grid-template-columns: 1.15fr 1fr; gap: var(--sw-sp-6); }
}