@charset "UTF-8";
/*
 * まいにち同人 デザイン本体
 *
 * 出どころ: Claude Design「毎日同人 サイトデザイン」（PC 1280px / SP 390px）
 * モックの数値をそのまま写しています。色や余白を変えたいときは
 * まず :root のトークンを触ってください。個別の指定をいじるのは最後の手段です。
 */

/* ============================================================ トークン */

:root {
	/* 赤（ブランド／価格／購入ボタン） */
	--md-red: #d81810;
	--md-red-dark: #a50f0a;
	--md-red-1: #ff6a5e;
	--md-red-2: #e01f17;
	--md-red-3: #bc120c;
	--md-red-shadow: #9d0d08;
	--md-red-pale: #ffdedb;
	--md-red-bg: #fff7f6;
	--md-red-line: #f3dedc;
	--md-red-ink: #b1433c;

	/* 青緑（ナビ／もっと見る） */
	--md-teal-1: #7ff0e9;
	--md-teal-2: #23c1ba;
	--md-teal-3: #0f8a85;
	--md-teal-shadow: #0b6f6b;
	--md-teal-ink: #06403e;
	/* 現在地（押し込み）。ページ追加版で少し濃くなった */
	--md-teal-on-1: #62e0d9;
	--md-teal-on-2: #1eb6af;
	--md-teal-on-3: #0c7f7a;
	--md-teal-ink-on: #032f2d;

	/* 文字 */
	--md-ink: #1d1c1a;
	--md-ink-2: #4a4843;
	--md-ink-3: #6f6c67;
	--md-ink-4: #807b74;

	/* 罫線・面 */
	--md-line: #eeedea;
	--md-line-2: #e9e7e3;
	--md-line-3: #e4e2de;
	--md-line-4: #edebe7;
	--md-line-5: #e0ddd8;
	--md-surface: #fbfbfa;
	--md-surface-2: #f7f6f4;
	--md-surface-3: #f5f4f2;
	--md-canvas: #ebeae8;

	/* 書体 */
	--md-font-round: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
	--md-font-body: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
	--md-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* 寸法 */
	--md-wrap: 1160px;
	--md-side: 300px;
	--md-col-gap: 36px;
}

@keyframes md-sheen {
	0% { transform: translateX(-170%) skewX(-22deg); }
	55% { transform: translateX(340%) skewX(-22deg); }
	100% { transform: translateX(340%) skewX(-22deg); }
}

/* ============================================================ ベース */

body.md-skin {
	background: #fff;
	color: var(--md-ink);
	font-family: var(--md-font-body);
}

.md-skin a {
	color: var(--md-red);
	text-decoration: none;
}

.md-skin a:hover {
	color: var(--md-red-dark);
	text-decoration: underline;
}

.md-wrap {
	width: 100%;
	max-width: calc(var(--md-wrap) + 40px);
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

/*
 * Cocoon のカラム幅をモックに合わせる（本文 : 余白36px : サイドバー300px）。
 * Cocoon の .wrap は width:1256px の固定値なので、width ごと上書きする。
 */
.md-skin #content-in.wrap,
.md-skin .footer-in.wrap {
	width: 100%;
	max-width: calc(var(--md-wrap) + 40px);
	padding: 0 20px;
	box-sizing: border-box;
}

.md-skin .footer-in.wrap {
	padding: 0;
}

.md-skin .main {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 34px 0 56px;
	width: auto;
	flex: 1 1 0;
	min-width: 0;
}

.md-skin .sidebar {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 34px 0 56px;
	width: var(--md-side);
	flex: none;
	margin-left: var(--md-col-gap);
}

.md-skin .md-empty {
	color: var(--md-ink-3);
	font-size: 14px;
	padding: 40px 0;
	text-align: center;
}

/* ============================================================ 年齢バー */

.md-agebar {
	margin: 0;
	min-height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px 16px;
	background: var(--md-red-bg);
	border-bottom: 1px solid var(--md-red-line);
	color: var(--md-red-ink);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}

.md-agebar__sp { display: none; }

/* ============================================================ ヘッダー */

.md-header {
	background: #fff;
}

.md-header__bar {
	background: #fff;
	border-bottom: 1px solid var(--md-line);
	padding: 0;
	height: auto;
}

.md-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding-top: 18px;
	padding-bottom: 18px;
}

.md-logo {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none !important;
}

.md-logo__tile {
	position: relative;
	width: 56px;
	height: 56px;
	flex: none;
	border-radius: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: rotate(-7deg);
	background: linear-gradient(180deg, var(--md-red-1) 0%, var(--md-red-2) 60%, #b8110c 100%);
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), 0 4px 0 var(--md-red-shadow), 0 10px 18px rgba(216, 24, 16, .32);
	font-family: var(--md-font-round);
	font-weight: 800;
	font-size: 32px;
	color: #fff;
	text-shadow: 0 2px 0 rgba(0, 0, 0, .18);
}

.md-logo__tile-gloss {
	position: absolute;
	inset: 0;
	border-radius: 18px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 50%);
	pointer-events: none;
}

.md-logo__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.md-logo__name {
	font-family: var(--md-font-round);
	font-weight: 800;
	font-size: 34px;
	line-height: 1;
	color: var(--md-red);
	letter-spacing: .01em;
	text-shadow: 3px 3px 0 var(--md-red-pale);
}

.md-logo__tagline {
	font-size: 12px;
	font-weight: 500;
	color: var(--md-ink-3);
	letter-spacing: .02em;
}

.md-header__right {
	display: flex;
	align-items: center;
	gap: 20px;
}

.md-searchpill {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 280px;
	height: 44px;
	padding: 0 16px;
	border: 1.5px solid var(--md-line-3);
	border-radius: 999px;
	background: var(--md-surface);
	box-sizing: border-box;
}

.md-searchpill__icon {
	font-size: 15px;
	color: var(--md-ink-4);
	flex: none;
}

/*
 * 親テーマ Cocoon の input[type="search"] { border / padding:11px / border-radius … } の方が
 * 詳細度が高く、丸い枠の中に灰色の四角い枠が重なってはみ出していた。
 * .md-searchpill を前に付けて詳細度を上げ、入力欄自体の枠・余白・高さを消す。
 */
.md-searchpill .md-searchpill__input {
	flex: 1;
	min-width: 0;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	font-size: 14px;
	line-height: 1.4;
	color: var(--md-ink);
	outline: none;
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
}

.md-searchpill__input::placeholder {
	color: var(--md-ink-4);
}

.md-header__links {
	display: flex;
	gap: 18px;
	font-size: 14px;
	font-weight: 500;
}

.md-header__links a {
	color: var(--md-ink-2);
}

.md-header__links a:hover {
	color: var(--md-red);
}

.md-burger {
	display: none;
	flex-direction: column;
	gap: 4px;
	padding: 4px;
	border: none;
	background: transparent;
	cursor: pointer;
}

.md-burger__line {
	width: 22px;
	height: 2.5px;
	background: var(--md-ink);
	border-radius: 2px;
	display: block;
}

.md-drawer {
	border-bottom: 1px solid var(--md-line);
	background: #fff;
	padding: 8px 0 16px;
}

.md-drawer__link {
	display: block;
	padding: 12px 0;
	border-bottom: 1px solid var(--md-line);
	color: var(--md-ink-2) !important;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none !important;
}

/* ====================================================== グローバルナビ */

.md-gnav {
	background: #fff;
	padding-top: 26px;
}

.md-gnav__inner {
	display: flex;
	gap: 14px;
}

.md-gnav__btn {
	flex: 1 1 0;
}

/* ======================================================== 立体ボタン */

.md-btn3d {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-decoration: none !important;
	cursor: pointer;
	box-sizing: border-box;
	transition: transform .08s ease, box-shadow .08s ease;
}

.md-btn3d__label {
	position: relative;
	z-index: 1;
	font-family: var(--md-font-round);
	font-weight: 800;
}

.md-btn3d__icon {
	position: relative;
	z-index: 1;
}

.md-btn3d__gloss {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 52%);
	pointer-events: none;
}

.md-btn3d__sheen {
	position: absolute;
	top: -25%;
	left: 0;
	width: 34%;
	height: 150%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
	animation: md-sheen 3s linear infinite;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.md-btn3d__sheen { animation: none; }
}

/* 青緑 */
.md-btn3d--teal {
	background: linear-gradient(180deg, var(--md-teal-1) 0%, var(--md-teal-2) 58%, var(--md-teal-3) 100%);
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 5px 0 var(--md-teal-shadow), 0 12px 22px rgba(15, 138, 133, .24);
	color: var(--md-teal-ink) !important;
}

.md-btn3d--teal:hover {
	transform: translateY(3px);
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 2px 0 var(--md-teal-shadow), 0 6px 14px rgba(15, 138, 133, .22);
}

/* 現在地は押し込んだ状態 */
.md-btn3d--teal.is-active {
	transform: translateY(3px);
	background: linear-gradient(180deg, var(--md-teal-on-1) 0%, var(--md-teal-on-2) 58%, var(--md-teal-on-3) 100%);
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, .22), 0 2px 0 var(--md-teal-shadow);
	color: var(--md-teal-ink-on) !important;
}

.md-btn3d--teal.is-active .md-btn3d__gloss {
	background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 52%);
}

/* 赤 */
.md-btn3d--red {
	background: linear-gradient(180deg, var(--md-red-1) 0%, var(--md-red-2) 58%, var(--md-red-3) 100%);
	box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .5), 0 4px 0 var(--md-red-shadow), 0 8px 14px rgba(216, 24, 16, .26);
	color: #fff !important;
}

.md-btn3d--red .md-btn3d__label {
	text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}

.md-btn3d--red .md-btn3d__sheen {
	width: 38%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .8), rgba(255, 255, 255, 0));
	animation-duration: 1s;
}

.md-btn3d--red:hover {
	transform: translateY(2px);
	box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .5), 0 2px 0 var(--md-red-shadow), 0 5px 10px rgba(216, 24, 16, .24);
}

/* サイズ */
.md-btn3d--lg {
	height: 62px;
	border-radius: 16px;
}

.md-btn3d--lg .md-btn3d__label { font-size: 22px; }
.md-btn3d--lg .md-btn3d__icon { font-size: 20px; }

.md-btn3d--md {
	height: 56px;
	border-radius: 999px;
}

.md-btn3d--md .md-btn3d__label { font-size: 18px; }

.md-btn3d--sm {
	height: 42px;
	border-radius: 999px;
}

.md-btn3d--sm .md-btn3d__label { font-size: 14px; }

/* ========================================================== 見出し */

.md-sechead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--md-ink);
	margin-bottom: 24px;
}

.md-sechead__left {
	display: flex;
	align-items: baseline;
	gap: 12px;
	min-width: 0;
}

.md-sechead__title {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	font-family: var(--md-font-round);
	font-weight: 800;
	font-size: 26px;
	line-height: 1.3;
	letter-spacing: .01em;
	color: var(--md-ink);
}

.md-sechead__meta {
	font-family: var(--md-font-mono);
	font-size: 12px;
	color: var(--md-ink-3);
	white-space: nowrap;
}

.md-sechead__note {
	font-size: 13px;
	font-weight: 500;
	color: var(--md-ink-2);
	white-space: nowrap;
}

.md-blockhead {
	font-family: var(--md-font-round);
	font-weight: 800;
	font-size: 17px;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--md-ink);
}

.md-blockhead__bar {
	width: 8px;
	height: 20px;
	border-radius: 2px;
	display: block;
	flex: none;
}

.md-blockhead--red .md-blockhead__bar { background: var(--md-red); }
.md-blockhead--teal .md-blockhead__bar { background: var(--md-teal-2); }

/* ========================================================== カード */

.md-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px 20px;
}

.md-grid--embed {
	margin: 0 0 2em;
}

.md-card {
	display: flex;
	flex-direction: column;
	gap: 9px;
	height: 100%;
}

.md-card__viewer {
	position: relative;
	height: 252px;
	border-radius: 8px;
	background: var(--md-surface-2);
	border: 1px solid var(--md-line-4);
	overflow: hidden;
	touch-action: pan-y;
	user-select: none;
	cursor: grab;
}

.md-card__viewer:active { cursor: grabbing; }

.md-card__track {
	display: flex;
	height: 100%;
	transition: transform .3s cubic-bezier(.3, .8, .3, 1);
}

.md-card__slide {
	flex: 0 0 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 0;
	box-sizing: border-box;
}

.md-card__slide img {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border: 1px solid var(--md-line-5);
	border-radius: 4px;
	background: #fbfaf9;
	display: block;
	pointer-events: none;
}

.md-card__badge {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	padding: 4px 9px;
	border-bottom-right-radius: 8px;
	background: var(--md-red);
	color: #fff;
	font-family: var(--md-font-round);
	font-weight: 800;
	font-size: 13px;
	line-height: 1.3;
}

.md-card__nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 26px;
	height: 26px;
	margin-top: -13px;
	padding: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .9);
	border: 1px solid var(--md-line-3);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 13px;
	color: var(--md-ink-2);
	box-shadow: 0 2px 5px rgba(0, 0, 0, .08);
}

.md-card__nav--prev { left: 6px; }
.md-card__nav--next { right: 6px; }

.md-card__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 7px;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 5px;
	pointer-events: none;
}

.md-card__dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	display: block;
	background: rgba(0, 0, 0, .18);
}

.md-card__dot.is-on { background: var(--md-red); }

.md-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.md-card__title {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--md-ink);
	margin: 0;
	padding: 0;
	min-height: 38px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.md-card__title a {
	color: inherit;
}

.md-card__circle {
	margin: 0;
	font-size: 11.5px;
	color: var(--md-ink-3);
}

.md-card__price {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 7px;
}

.md-card__now {
	font-family: var(--md-font-round);
	font-weight: 800;
	font-size: 18px;
	color: var(--md-red);
}

.md-card__old {
	font-size: 11.5px;
	/* ページ追加版で #807b74 → #6f6c67。白地でのコントラストを AA に上げるため */
	color: var(--md-ink-3);
}

.md-card__cta {
	margin-top: auto;
	flex: none;
}

/* ================================================== もっと見る／ページャ */

.md-more {
	display: flex;
	justify-content: center;
	margin-top: 38px;
}

.md-more__btn {
	width: 300px;
}

.md-pager {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 38px;
}

.md-pager .page-numbers {
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1.5px solid var(--md-line-3);
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--md-font-round);
	font-weight: 700;
	font-size: 15px;
	color: var(--md-ink-2) !important;
	box-sizing: border-box;
	text-decoration: none !important;
}

.md-pager .page-numbers.current {
	background: var(--md-red);
	border-color: var(--md-red);
	color: #fff !important;
}

/* ======================================================== サイドバー */

.md-side {
	border: 1.5px solid var(--md-line);
	border-radius: 14px;
	padding: 20px;
	margin-bottom: 28px;
	background: #fff;
}

.md-rank {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.md-rank__item {
	display: flex;
	gap: 12px;
	align-items: center;
	margin: 0;
	padding: 0;
}

.md-rank__no {
	font-family: var(--md-font-round);
	font-weight: 800;
	font-size: 20px;
	color: var(--md-red);
	width: 22px;
	flex: none;
	text-align: center;
}

.md-rank__cover {
	width: 44px;
	height: 62px;
	flex: none;
	border-radius: 4px;
	border: 1px solid var(--md-line-2);
	overflow: hidden;
	background: var(--md-surface-2);
	display: block;
}

.md-rank__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.md-rank__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.md-rank__title {
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--md-ink) !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.md-rank__circle {
	font-size: 11px;
	color: var(--md-ink-3);
}

.md-tagcloud {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.md-chip {
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--md-surface-3);
	border: 1px solid var(--md-line-2);
	font-size: 12px;
	font-weight: 500;
	color: var(--md-ink-2) !important;
	text-decoration: none !important;
	line-height: 1.5;
}

.md-chip:hover {
	border-color: var(--md-red);
	color: var(--md-red) !important;
}

/* ========================================================== フッター */

.md-skin .footer {
	background: var(--md-surface);
	border-top: 1.5px solid var(--md-line);
	padding: 0;
	margin: 0;
}

.md-footer {
	padding: 40px 0 28px;
}

.md-footer__top {
	display: flex;
	gap: 56px;
	align-items: flex-start;
}

.md-footer__brand {
	width: 300px;
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.md-footer__logo {
	font-family: var(--md-font-round);
	font-weight: 800;
	font-size: 22px;
	color: var(--md-red);
	text-shadow: 2px 2px 0 var(--md-red-pale);
}

.md-footer__lead {
	margin: 0;
	font-size: 12px;
	line-height: 1.8;
	color: var(--md-ink-3);
}

.md-footer__cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
	flex: 1;
}

.md-footer__coltitle {
	font-size: 13px;
	font-weight: 700;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--md-line-2);
	margin-bottom: 10px;
	color: var(--md-ink);
}

.md-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.md-footer__list a {
	font-size: 12.5px;
	color: var(--md-ink-2) !important;
}

.md-footer__list a:hover {
	color: var(--md-red) !important;
}

.md-footer__bottom {
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid var(--md-line-2);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.md-footer__notice {
	margin: 0;
	font-size: 11.5px;
	line-height: 1.8;
	color: var(--md-ink-3);
}

.md-footer__copy {
	margin: 0;
	font-family: var(--md-font-mono);
	font-size: 11px;
	color: var(--md-ink-4);
}

/* ================================================ 本文・未完成ページの枠 */

.md-prose {
	font-size: 15px;
	line-height: 1.95;
	color: var(--md-ink);
}

.md-prose h2 {
	font-family: var(--md-font-round);
	font-weight: 800;
	font-size: 20px;
	margin: 2em 0 .8em;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--md-ink);
	background: none;
}

.md-prose h3 {
	font-family: var(--md-font-round);
	font-weight: 800;
	font-size: 17px;
	margin: 1.8em 0 .6em;
	padding-left: 12px;
	border-left: 6px solid var(--md-red);
	background: none;
}

.md-term-desc {
	margin-top: 40px;
	font-size: 13.5px;
	color: var(--md-ink-3);
}

.md-todo {
	margin-top: 28px;
	padding: 28px 24px;
	border: 1.5px dashed var(--md-line-3);
	border-radius: 14px;
	background: var(--md-surface);
	color: var(--md-ink-3);
}

.md-todo__label {
	margin: 0 0 8px;
	font-family: var(--md-font-round);
	font-weight: 800;
	font-size: 15px;
	color: var(--md-ink-2);
}

.md-todo__desc {
	margin: 0 0 10px;
	font-size: 13.5px;
	line-height: 1.8;
}

.md-todo__ref {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.8;
}

.md-todo code {
	font-family: var(--md-font-mono);
	font-size: 12px;
	background: var(--md-surface-3);
	border: 1px solid var(--md-line-2);
	border-radius: 4px;
	padding: 1px 5px;
}

/* ========================= プラグイン既定パーツをこのデザインに寄せる ===== */

.md-skin .md-btn {
	font-family: var(--md-font-round);
	font-weight: 800;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--md-red-1) 0%, var(--md-red-2) 58%, var(--md-red-3) 100%);
	box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .5), 0 4px 0 var(--md-red-shadow), 0 8px 14px rgba(216, 24, 16, .26);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}

.md-skin .md-btn:hover {
	background: linear-gradient(180deg, var(--md-red-1) 0%, var(--md-red-2) 58%, var(--md-red-3) 100%);
	transform: translateY(2px);
	box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .5), 0 2px 0 var(--md-red-shadow), 0 5px 10px rgba(216, 24, 16, .24);
}

.md-skin .md-price__now,
.md-skin .md-cta-box__price,
.md-skin .md-feature__rank {
	font-family: var(--md-font-round);
	font-weight: 800;
}

.md-skin .md-cta-box {
	border: 1.5px solid var(--md-line);
	border-radius: 14px;
	background: var(--md-surface);
}

.md-skin .md-review,
.md-skin .md-spec {
	border-radius: 14px;
}

.md-skin .md-tag {
	background: var(--md-surface-3);
	border-color: var(--md-line-2);
	color: var(--md-ink-2);
	font-weight: 500;
}

.md-skin .md-tag--sale {
	background: var(--md-red);
	border-color: var(--md-red);
	color: #fff;
}

.md-skin .md-samples img {
	border: 1px solid var(--md-line-5);
	background: #fbfaf9;
}

/* ====================================================== レスポンシブ */

@media screen and (max-width: 1023px) {
	:root {
		--md-wrap: 100%;
	}

	/*
	 * 1カラムに落とす。flex:none のままだと中身の最大幅まで伸びて
	 * 画面からはみ出すので、基準幅を 100% に戻すところまでやる。
	 */
	.md-skin .main,
	.md-skin .sidebar {
		width: 100%;
		flex: 1 1 100%;
		min-width: 0;
		margin-left: 0;
	}

	.md-skin .sidebar {
		padding-top: 0;
	}

	.md-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media screen and (max-width: 834px) {
	.md-agebar { font-size: 10.5px; }
	.md-agebar__pc { display: none; }
	.md-agebar__sp { display: inline; }

	.md-header__inner {
		padding-top: 12px;
		padding-bottom: 12px;
		gap: 12px;
	}

	.md-wrap { padding: 0 16px; }

	.md-logo__tile {
		width: 40px;
		height: 40px;
		border-radius: 13px;
		font-size: 23px;
		box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), 0 3px 0 var(--md-red-shadow), 0 7px 12px rgba(216, 24, 16, .3);
	}

	.md-logo__tile-gloss { border-radius: 13px; }

	.md-logo__name {
		font-size: 23px;
		text-shadow: 2px 2px 0 var(--md-red-pale);
	}

	.md-logo__tagline { font-size: 9.5px; }

	.md-searchpill,
	.md-header__links { display: none; }

	.md-burger { display: flex; }

	.md-gnav { padding-top: 14px; }

	.md-gnav__inner {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.md-btn3d--lg {
		height: 52px;
		border-radius: 14px;
	}

	.md-btn3d--lg .md-btn3d__label { font-size: 17px; }
	.md-btn3d--lg .md-btn3d__icon { font-size: 16px; }

	.md-skin .main,
	.md-skin .sidebar { padding: 22px 0 32px; }

	.md-sechead {
		padding-bottom: 10px;
		margin-bottom: 18px;
	}

	.md-sechead__title { font-size: 19px; }
	.md-sechead__meta { font-size: 10.5px; }
	.md-sechead__note { display: none; }

	.md-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 13px;
	}

	.md-card__viewer { height: 196px; border-radius: 7px; }
	.md-card__nav { display: none; }
	.md-card__badge { font-size: 11px; padding: 3px 7px; border-bottom-right-radius: 7px; }
	.md-card__title { font-size: 12.5px; min-height: 36px; }
	.md-card__circle { font-size: 12px; }
	.md-card__now { font-size: 16px; }
	.md-card__old { font-size: 10.5px; }

	.md-btn3d--sm { height: 46px; }
	.md-btn3d--sm .md-btn3d__label { font-size: 13px; }

	.md-more { margin-top: 28px; }
	.md-more__btn { width: 100%; height: 52px; }
	.md-more__btn .md-btn3d__label { font-size: 16px; }

	.md-side {
		border: none;
		border-radius: 0;
		padding: 0;
		margin-bottom: 32px;
	}

	.md-footer { padding: 26px 0 24px; }

	.md-footer__top {
		flex-direction: column;
		gap: 18px;
	}

	.md-footer__brand { width: auto; }

	.md-footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
	}
}

@media screen and (max-width: 480px) {
	.md-grid { gap: 20px 11px; }
}