/* =============================================================
トップページ　.top
============================================================= */
/* メインコピー .main_copy
-------------------------------------------*/
/* h2 */
.main_copy h2 {
	font-size: 3rem;
	line-height: 1.1;
	background-color: #000;
	background-image: none;
	border: none;
	box-shadow: none; /* style.cssの上書き */
	padding: 1rem 1rem 1.2rem;
}
.main_copy h2 span {
	display: block;
	font-size: 1.2rem;
	line-height: 1;
	margin-top: 0.5rem;
}
/* p */
.main_copy p {
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.1;
	text-align: center;
	background-color: #fff;
	padding: 0.5rem;
}

/* メインビジュアル .main_visual
-------------------------------------------*/
/* 下margin追加 */
.main_visual {
	line-height: 0;
}
/* h3 */
.top .main_visual h3 {
	font-family: serif;
	font-size: 2rem;
	font-feature-settings: "palt";
	text-align: center;
	background-color: var(--color-primary);
	border: 0;
	padding: 1rem;
}

/* 設置例 .example
-------------------------------------------*/
/* マージン */
.main_visual + .example {
	margin-top: 2rem;
}
.example h3 {
	color: #000;
	background-color: var(--color-accent1);/* style.cssの上書き */
}
.example ul.flex.four {
	gap: 0.3rem 1%; /* style.cssの上書き */
}
.example ul.flex.four li.flex_box {
    flex-basis: calc((100% - 1% * 3) / 4); /* style.cssの上書き */
	margin-top: 0.3rem; /* style.cssの上書き */
}

/* トップバナーエリア .top_bnr_area
-------------------------------------------*/
/* バナー
.main_visual + .top_bnr_area {
	margin-top: 1rem;
} */

/* 注釈 .top_bnr_area
-------------------------------------------*/
/* 注釈 
.top_bnr_area + .annotation {
	text-align: right;
}*/

/* お知らせ .top_announce
-------------------------------------------*/
/* 枠 */
.top_announce {
	width: 100%;
	color: var(--color-accent2);
	border: 1px solid var(--color-accent2);
	padding: 1rem;
	margin-top: 2rem;
}
/* タイトル */
.top_announce p.tit {
	font-weight: 800;
}
/* 2つめのタイトル */
.top_announce p + p.tit {
	margin-top: 1rem;
}
/* p */
.top_announce p {
	padding-left: 1em;
}
/* タイトル下p */
.top_announce p.tit > p {
	margin-top: 0.8rem;
}
/* p2つ目以降 */
.top_announce p + p {
	margin-top: 0.5rem;
}


/* コンテンツレイアウト
-------------------------------------------*/
/* 大枠
--------------------------------*/
/* メインブロック
---------------------*/
.top_main_block {
	width: 78.333%;
	float: right;
	margin-top: 3rem;
}
/* サイドバー
---------------------*/
.top_side_block {
	width: 17.5%;
	float: left;
	margin-top: 3rem;
}

/* メインブロック .top_main_block
--------------------------------*/
/*  役立ちます .top_faq
---------------------*/
/* li */
.top_faq ul li {
	font-size: 1.1rem;
	font-weight: 700;
	background-color: var(--color-primary-pale5);
	margin-top: 1rem;
}
/* li span */
.top_faq ul li span {
	display: inline-block;
	color: #fff;
	background-color: var(--color-primary);
	margin-right: 1rem;
	padding: 1rem 2rem;
}
/* a */
.top_faq a {
	margin-top: 2rem;
}

/*  捨て看板とは .top_about
---------------------*/
/* flex */
.top_about .flex.two {
	gap: 1rem 5%; /* style.cssの上書き */
}
/* img */
.top_about .flex.two .flex_box.img {
	flex-basis: 35%; /* style.cssの上書き */
	text-align: center;
}
/* copy */
.top_about .flex.two .flex_box.copy {
	flex-basis: 60%; /* style.cssの上書き */
}
.top_about .flex.two .flex_box.copy h4 {
	color: var(--color-primary); /* style.cssの上書き */
	background-color: var(--color-primary-pale5); /* style.cssの上書き */
	border: 0; /* style.cssの上書き  */
	border-top: 2px solid var(--color-primary-pale20);
	border-bottom: 2px solid var(--color-primary-pale20);
}
.top_about .flex.two .flex_box.copy p {
	font-size: 1.1rem;
	line-height: 1.6;
}

/*  商品一覧 .top_product
---------------------*/
/* 共通 */
.top_product h3 {
	position: relative;
	padding: 0.9375rem 0.625rem;
}
.top_product h3 span,
.top_product h4 span {
	font-size: 0.9rem;
	vertical-align: middle;
}
.top_product h4 {
	position: relative;
	font-size: 1.4rem;
	font-weight: 800;
	text-align: center; /* style.cssの上書き */
	border: 0; /* style.cssの上書き */
	background-color: var(--color-primary-pale30); /* style.cssの上書き */
	margin: 0; /* style.cssの上書き */
	padding: 0.9375rem 0.625rem; /* style.cssの上書き */
}
.top_product h3 .icon,
.top_product h4 .icon {
	position: absolute;
	top: 50%;
	right: 0.625rem;
	transform: translateY(-50%);
	color: var(--color-primary);
	font-weight: 700;
	background-color: var(--color-accent1);
	padding: 0.5rem;
}
.top_product h4 .icon {
	color: #fff;
	background-color: var(--color-primary);
}
.top_product .price {
	font-size: 3rem;
	font-weight: 900;
	line-height: 1.2;
	text-align: left;
}
.top_product .price span {
	font-size: 1.2rem;
}
.top_product .price span.tax {
	display: block;
}

/* メディア＋木枠 .set */
.top_product .set .copy_area {
	min-height: 174px;
	background: url('https://sutekan-professional.com/wp/wp-content/uploads/top_17.png') no-repeat right bottom;
	margin-top: 1.5rem;
}
.top_product .set .copy_area h4 {
	text-indent: -0.5em;
	font-size: 1.5rem;
	background-color: transparent; /* style.cssの上書き */
	text-align: left; /*上の上書き */
	padding: 0; /* style.cssの上書き */
}
.top_product .set .copy_area h4 + p {
	font-size: 1.2rem;
	margin-top : 1rem;
	padding-right: 200px;
}
.top_product .set .copy_area p span {
	color: var(--color-primary);
	font-weight: 700;
}
.top_product .set .flex.two {
	gap: 1rem 5%; /* style.cssの上書き  */
}
.top_product .set .flex.two .flex_box.left {
	flex-basis: 30%; /* style.cssの上書き  */
	text-align: center;
}
.top_product .set .flex.two .flex_box.right {
	flex-basis: 65%; /* style.cssの上書き  */
}
.top_product .set .cloth + .cloth {
	margin-top: 2rem; /* style.cssの上書き  */
}
.top_product .set .cloth .flex.two {
	gap: 1rem 3%; /* style.cssの上書き  */
}
.top_product .set .cloth .flex.two .flex_box {
	margin-top: 1rem; /* style.cssの上書き  */
}
.top_product .set .cloth .flex.two .flex_box.img {
	flex-basis: 35%; /* style.cssの上書き  */
}
.top_product .set .cloth .flex.two .flex_box.copy {
	flex-basis: 62%; /* style.cssの上書き  */
}
.top_product .set .cloth .copy > p {
	font-size: 1.1rem;
}
.top_product .set .cloth .copy .icon {
	flex-basis: 30%; /* style.cssの上書き  */
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	background-color: #727171;
	padding: 0.5rem;
	align-items: center;
	justify-content: center;
}
.top_product .set .cloth .copy .price {
	flex-basis: 67%; /* style.cssの上書き  */
}

/* 部材のみ .parts */
.top_product .parts .flex_box .flex_box {
	margin-top: 0;
}
.top_product .parts h4 {
	line-height: 1.2;
	min-height: 80px;
	align-items: center;
	justify-content: center;
}
.top_product .parts h4 span {
	font-size: 1.4rem; /* 上の上書き */
}
.top_product .parts h4 .small {
	display: block;
	font-size: 0.9rem;
}
.top_product .parts .point {
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	border: 5px dotted var(--color-primary-pale30);
	margin-top: 1rem;
	padding: 1rem;
}
.top_product .parts .price_group {
	margin-top: 2rem;
}
.top_product .parts .price_group p {
	text-align: center;
}
.top_product .parts .price_group p + p {
	margin-top: 0;
}
.top_product .parts .price_group .tit {
	font-weight: 700;
	font-size: 0.9rem;
	border-bottom: 1px solid var(--color-border);
	padding-bottom: 0.5rem;
}
.top_product .parts .price_group .price + .tit {
	margin-top: 1.5rem;
}
.top_product .parts .annotation {
	margin-top: 3rem;
}