@charset "utf-8";


/*トップのメイン画像
---------------------------------------------------------------------------*/
#top-intro {
	display: flex;
}

#top-intro div {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 3vw;
}
#top-intro div:first-child {
	background: var(--accent-light-color);
}
#top-intro div:last-child {
	background:var(--parts-light-color);
}
#top-intro h1 {
	margin: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	text-align: center;
	font-weight: 500;
}

/*再上段の白背景*/
#top-intro h1 span.head {
	display: inline-block;align-self: center;
	background: #fff;
	border-radius: 999px;
	padding: 0.2rem 4vw;
	font-size: clamp(10px, 1.7vw, 18px);
	letter-spacing: 0.1em;
	margin-bottom: 1vw;
	font-weight: 700;
}

	/*画面幅600px以下の追加指定*/
	@media (max-width:600px) {
	
	#top-intro h1 span.head {
		padding: 0 2vw;
		letter-spacing: normal;
	}
	
	}/*追加指定ここまで*/

/*大きな文字*/
#top-intro h1 strong {
	display: block;
	line-height: 1.5;
	font-size: 4vw;
	color: var(--accent-color);
}
#top-intro h1 strong > span {
	font-size: 6vw;
	font-family: var(--accent-font), var(--base-font);
	font-weight: 800;
}
/*1つ目ボックスのみ、大きな文字の行間を狭く*/
#top-intro div:first-child h1 strong {
	line-height: 1.3;
}
/*「1,000」と「自分好み」のテキスト*/
#top-intro div:first-child h1 strong > span {
	font-size: 7.5vw;
	font-weight: 700;
}
/*カンマ*/
#top-intro h1 strong span span {
	font-size: 4vw;
	margin-inline: -0.5vw;
}

/*１つ目のh1背景*/
#top-intro div:first-child h1 strong {
	background: url("../images/top/h1-bg-template.webp") no-repeat center top / 100%;
}
/*２つ目のh1背景*/
#top-intro div:last-child h1 strong {
	background: url("../images/top/h1-bg-parts.webp") no-repeat center top / 100%;
}

	/*画面幅600px以下の追加指定*/
	@media (max-width:600px) {
	
	#top-intro img {
		display: none;
	}
	#top-intro p {
		margin-block: 0.3rem;
		font-size: 11px;
		line-height: 1.8;
	}
	
	}/*追加指定ここまで*/

#top-intro p {
	font-weight: 600;
}

/*ボタン*/
#top-intro .btn a {
	padding-block: 0.7rem;
	font-size: 1.3rem;
}

	/*画面幅600px以下の追加指定*/
	@media (max-width:600px) {
	
	#top-intro .btn a {
		font-size: 0.9rem;
		padding: 0.3rem 0;
	}
	
	}/*追加指定ここまで*/


/*人気のテンプレブロック
---------------------------------------------------------------------------*/
.grid.js-random4 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

	/*画面幅700px以上の追加指定*/
	@media (min-width:700px) {
	
	.grid.js-random4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	
	}/*追加指定ここまで*/



/*grid共通
---------------------------------------------------------------------------*/
.grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	font-size: 0.85rem;
}
	/*画面幅700px以上の追加指定*/
	@media (min-width:700px) {
	
	.grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	
	}/*追加指定ここまで*/

	/*画面幅1300px以上の追加指定*/
	@media (min-width:1300px) {
	
	.grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	
	}/*追加指定ここまで*/

.grid .list {
	position: relative;
	display: flex;
	flex-direction: column;
	line-height: 1.5;
}
.grid:not(.new-template) .list img {
	/*list.cssで管理*/
}

/*画像のマウスオン時*/
.grid .list:hover img {
	/*list.cssで管理*/
}

/*タイトル*/
.grid div.title {
	flex: 1;
	/*list.cssで管理*/
}

/*「種類」アイコン*/
.grid .mainimg-type {
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 0px 5px;
	margin-right: 3px;
	font-size: 0.85em;
}
.grid .mainimg-type span {
	font-size: 0.9rem;
	font-weight: bold;
	padding-right: 2px;
}

/*ボタンが入ったボックス全体*/
.grid .list .btn {
	/*list.cssで管理*/
}
.grid .list:hover .btn {
	/*list.cssで管理*/
}

/*ボタン１個あたり*/
.grid .btn a {
	/*list.cssで管理*/
}

/*hover*/
.grid .btn a:hover {
	/*list.cssで管理*/
}

/*ボタン左のアイコン*/
.grid .list .btn a:first-child::before {
	/*list.cssで管理*/
}