/* =========================================================
   Sozai / 人気ランキング
   対象：/sozai/ および sozai- で始まる投稿
   ========================================================= */

.sg-sozai {
	padding: 0 0 70px;
}

/* -------------------------
   Hero
   ------------------------- */

.sg-sozai .sgsz-hero {
    max-width: 100%;
    text-align: center;
    margin: 0 0 30px;
}

.sg-sozai .sgsz-hero-figure {
    max-width: 100%;
    margin: 0 0 30px;
}

.sg-sozai .sgsz-hero-img {
	width: 100%;
}

.sg-sozai .sgsz-lead {
    font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    line-height: 1.9;
    letter-spacing: .03em;
    margin: 0;
}

/* -------------------------
   目次
------------------------- */
.sg-sozai .sgsz-toc {
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: start;
    gap: 30px;
    max-width: 750px;
    box-sizing: border-box;
    font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    border: 1px solid rgba(0, 0, 0, .35);
    margin: 0 auto 70px;
    padding: 20px 40px;
}

.sg-sozai .sgsz-sec-lead {
    text-align: left;
    font-size: 23px;
    font-weight: 600;
    letter-spacing: .08em;
    color: #3f4b55;
    margin: 0;
    line-height: 1.5;
}

.sg-sozai .sgsz-toc-list {
    margin: 0;
    padding: 0 0 0 1.4em;
}

.sg-sozai .sgsz-toc-list li {
    margin: 0;
    padding: 5px 0;
}

.sg-sozai .sgsz-toc-list li::marker {
    color: #3f4b55;
}

.sg-sozai .sgsz-toc-list a {
    display: block;
    text-decoration: none;
    color: #000;
    line-height: 1.7;
}

.sg-sozai .sgsz-toc-list a:hover,
.sg-sozai .sgsz-toc-list a:focus {
    opacity: 0.5;
}

@media (max-width: 767px) {
    .sg-sozai .sgsz-toc {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 20px 20px 24px;
        margin-bottom: 50px;
    }

    .sg-sozai .sgsz-sec-lead {
        font-size: 20px;
    }
}

/* =========================================================
   Ranking
   ========================================================= */

.sg-sozai .sgsz-ranking {
	margin-top: 70px;
}

.sg-sozai .sgsz-ranking:first-of-type {
	margin-top: 0;
}

.sg-sozai .sgsz-ranking-title {
    background: #3f4b55;
    color: #fff;
    text-align: center;
    font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-weight: 500;
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.4;
    letter-spacing: .14em;
    margin: 0 0 40px;
    padding: 10px 20px;
}


/* =========================================================
   Ranking item
   ========================================================= */

.sg-sozai .sgsz-item {
	margin: 0;
	padding: 0 0 70px;
}

.sg-sozai .sgsz-item+.sgsz-item {
	padding-top: 25px;
}


/* =========================================================
   Item header
   順位 / メーカー / 商品名 / 価格
   ========================================================= */

.sg-sozai .sgsz-item-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;

	margin: 0 0 30px;
	padding: 0 0 10px;

	border-bottom: 1px solid rgba(0, 0, 0, .35);
}

.sg-sozai .sgsz-item-title {
	display: flex;
	align-items: center;
	min-width: 0;
}

.sg-sozai .sgsz-rank {
	flex: 0 0 auto;
	margin: 0;
	padding: 8px 18px;

	background: #e9a019;
	color: #fff;

	font-family:
		"Shippori Mincho",
		"Hiragino Mincho ProN",
		"Yu Mincho",
		serif;

	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
}

.sg-sozai .sgsz-maker {
	flex: 0 0 auto;
	margin: 0 0 0 20px;
	padding: 0 20px 0 0;

	border-right: 1px solid rgba(0, 0, 0, .35);

	font-family:
		"Shippori Mincho",
		"Hiragino Mincho ProN",
		"Yu Mincho",
		serif;

	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
}

.sg-sozai .sgsz-product-name {
	margin: 0 0 0 20px;

	font-family:
		"Shippori Mincho",
		"Hiragino Mincho ProN",
		"Yu Mincho",
		serif;

	font-size: 28px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .04em;
}


/* -------------------------
   Price
------------------------- */

.sg-sozai .sgsz-price {
	flex: 0 0 auto;
	text-align: right;
	line-height: 1.5;
}

.sg-sozai .sgsz-price p {
	margin: 0;
}

.sg-sozai .sgsz-price strong {
	color: #e60012;
	font-size: 22px;
	font-weight: 500;
}

.sg-sozai .sgsz-price-note {
	font-size: 14px;
}


/* =========================================================
   Reason
   選ぶべき理由
   ========================================================= */

.sg-sozai .sgsz-reason {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;

	margin: 0 0 40px;
	padding: 14px 16px;

	background: #fff7dc;
}

.sg-sozai .sgsz-reason-label {
	display: flex;
	align-items: center;
	gap: 9px;

	margin: 0;
	padding: 7px 14px;

	background: #c87818;
	color: #fff;

	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
}

.sg-sozai .sgsz-reason-label span {
	font-weight: 700;
}

.sg-sozai .sgsz-reason-text {
	margin: 0;
	padding-left: 20px;

	font-family:
		"Shippori Mincho",
		"Hiragino Mincho ProN",
		"Yu Mincho",
		serif;

	font-weight: 500;
	line-height: 1.8;
}


/* =========================================================
   Item body
   左：画像 / 右：評価・本文
   ========================================================= */

.sg-sozai .sgsz-item-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 35px;
	align-items: start;
}

/* -------------------------
   商品本体：新レイアウト
   PCは画像左 / 情報右
------------------------- */

/* 評価：右上 */
.sg-sozai .sgsz-item-body>.sgsz-rating {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
}

/* 画像1：左上 */
.sg-sozai .sgsz-item-body>.sgsz-image--01 {
	grid-column: 1;
	grid-row: 1 / span 2;
	margin: 0;
}

/* 説明1：評価の下 */
.sg-sozai .sgsz-item-body>.sgsz-description--01 {
	grid-column: 2;
	grid-row: 2;
}

/* 画像2 */
.sg-sozai .sgsz-item-body>.sgsz-image--02 {
	grid-column: 1;
	grid-row: 3;
	margin: 0;
}

/* 説明2 */
.sg-sozai .sgsz-item-body>.sgsz-description--02 {
	grid-column: 2;
	grid-row: 3;
}

/* 画像3：商品ラインアップ */
.sg-sozai .sgsz-item-body>.sgsz-image--03 {
	grid-column: 1;
	grid-row: 4;
	margin: 0;
}

/* メリット */
.sg-sozai .sgsz-item-body>.sgsz-merit {
	grid-column: 2;
	grid-row: 4;
	margin-top: 0;
}


/* =========================================================
   Gallery
   ========================================================= */

.sg-sozai .sgsz-gallery {
	min-width: 0;
}

.sg-sozai .sgsz-image {
	margin: 0 0 30px;
}

.sg-sozai .sgsz-image:last-child {
	margin-bottom: 0;
}

.sg-sozai .sgsz-image img {
	display: block;
	width: 100%;
	height: auto;
}

.sg-sozai .sgsz-image figcaption {
	margin-top: 8px;
	line-height: 1.5;
}

.sg-sozai .sgsz-image--lineup img {
	width: 100%;
}


/* =========================================================
   Info
   ========================================================= */

.sg-sozai .sgsz-info {
	min-width: 0;
}


/* =========================================================
   Rating
   ========================================================= */

.sg-sozai .sgsz-rating {
	margin: 0 0 40px;
}

.sg-sozai .sgsz-rating-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 15px;
	align-items: baseline;

	margin: 0;
	padding: 8px 0;

	border-bottom: 1px dashed rgba(0, 0, 0, .4);
}

.sg-sozai .sgsz-rating-row dt {
	margin: 0;
	font-weight: 500;
	white-space: nowrap;
}

.sg-sozai .sgsz-rating-row dd {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;

	margin: 0;
}

.sg-sozai .sgsz-stars {
	color: #f5a000;
	letter-spacing: .02em;
	white-space: nowrap;
}

.sg-sozai .sgsz-rating-text {
	line-height: 1.6;
}


/* =========================================================
   Description
   ========================================================= */

.sg-sozai .sgsz-description {
	line-height: 1.9;
}

.sg-sozai .sgsz-description h4 {
	margin: 30px 0 8px;

	font-family:
		"Shippori Mincho",
		"Hiragino Mincho ProN",
		"Yu Mincho",
		serif;

	font-weight: 600;
	line-height: 1.6;
}

.sg-sozai .sgsz-description h4:first-child {
	margin-top: 0;
}

.sg-sozai .sgsz-description p {
	margin: 0 0 20px;
	line-height: 1.9;
}

.sg-sozai .sgsz-description p:last-child {
	margin-bottom: 0;
}


/* =========================================================
   Merit
   ========================================================= */

.sg-sozai .sgsz-merit {
	margin-top: 35px;
	padding: 16px 18px;

	background: #fff7dc;
	border-left: 4px solid #c87818;
}

.sg-sozai .sgsz-merit h4 {
	margin: 0 0 8px;

	color: #c87818;

	font-family:
		"Shippori Mincho",
		"Hiragino Mincho ProN",
		"Yu Mincho",
		serif;

	font-size: 20px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: .12em;
}

.sg-sozai .sgsz-merit p {
	margin: 0;
	line-height: 1.8;
}


/* =========================================================
   Responsive
   ========================================================= */

/* -------------------------
   Tablet
------------------------- */

@media (max-width: 900px) {

	.sg-sozai .sgsz-ranking {
		margin-top: 60px;
	}

	.sg-sozai .sgsz-item-head {
		align-items: flex-start;
		gap: 20px;
	}

	.sg-sozai .sgsz-item-title {
		flex-wrap: wrap;
	}

	.sg-sozai .sgsz-product-name {
		font-size: 24px;
	}

	.sg-sozai .sgsz-price {
		max-width: 260px;
	}

	.sg-sozai .sgsz-item-body {
		grid-template-columns: minmax(0, 45%) minmax(0, 1fr);
		gap: 25px;
	}

	.sg-sozai .sgsz-rating-row {
		grid-template-columns: 1fr;
		row-gap: 4px;
	}

}


/* -------------------------
   SP
------------------------- */

@media (max-width: 600px) {

	.sg-sozai {
		padding-bottom: 50px;
	}

	.sg-sozai .sgsz-lead {
		text-align: left;
	}

	.sg-sozai .sgsz-hero {
		padding-bottom: 40px;
	}

	.sg-sozai .sgsz-ranking {
		margin-top: 50px;
	}

	.sg-sozai .sgsz-ranking-title {
		margin-bottom: 25px;
		padding: 7px 10px;
		font-size: 20px;
	}

	.sg-sozai .sgsz-item {
		padding-bottom: 55px;
	}


	/* 商品ヘッダー */

	.sg-sozai .sgsz-item-head {
		display: block;
		margin-bottom: 20px;
	}

	.sg-sozai .sgsz-item-title {
		display: grid;
		grid-template-columns: auto auto minmax(0, 1fr);
		align-items: center;
	}

	.sg-sozai .sgsz-rank {
		padding: 6px 10px;
	}

	.sg-sozai .sgsz-maker {
		margin-left: 10px;
		padding-right: 10px;
	}

	.sg-sozai .sgsz-product-name {
		margin-left: 10px;
		font-size: 20px;
	}

	.sg-sozai .sgsz-price {
		max-width: none;
		margin-top: 12px;
		text-align: right;
	}

	.sg-sozai .sgsz-price strong {
		font-size: 20px;
	}


	/* 選ぶべき理由 */

	.sg-sozai .sgsz-reason {
		grid-template-columns: 1fr;
		gap: 10px;

		margin-bottom: 30px;
		padding: 12px;
	}

	.sg-sozai .sgsz-reason-label {
		width: fit-content;
	}

	.sg-sozai .sgsz-reason-text {
		padding-left: 0;
	}


	/* 本体 */

	.sg-sozai .sgsz-item-body {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	/* 新レイアウトはHTMLの記述順に縦並び */
	.sg-sozai .sgsz-item-body>.sgsz-rating,
	.sg-sozai .sgsz-item-body>.sgsz-image--01,
	.sg-sozai .sgsz-item-body>.sgsz-description--01,
	.sg-sozai .sgsz-item-body>.sgsz-image--02,
	.sg-sozai .sgsz-item-body>.sgsz-description--02,
	.sg-sozai .sgsz-item-body>.sgsz-image--03,
	.sg-sozai .sgsz-item-body>.sgsz-merit {
		grid-column: 1;
		grid-row: auto;
	}

	.sg-sozai .sgsz-image {
		margin-bottom: 20px;
	}


	/* 評価 */

	.sg-sozai .sgsz-rating {
		margin-bottom: 30px;
	}

	.sg-sozai .sgsz-rating-row {
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 10px;
	}

	.sg-sozai .sgsz-rating-row dd {
		gap: 4px;
	}


	/* メリット */

	.sg-sozai .sgsz-merit {
		margin-top: 30px;
		padding: 14px;
	}

	.sg-sozai .sgsz-merit h4 {
		font-size: 18px;
	}

}