/* =============================================================
  トップページ　.top
============================================================= */
/* 共通
-------------------------------------------*/
/* 見出し・文字
--------------------------------*/
/* h2 */
.top h2 {
	color: var(--color-primary); /* style.cssの上書き */
}
/* h2 span */
.top h2 span {
	color: #333; /* 上の上書き */
	display: block;
	font-size: 0.9rem;
	margin-bottom: 0.1rem;
}

/* メインビジュアル .mvisual
-------------------------------------------*/
/* 背景
--------------------------------*/
/* mvisual */
.top .mvisual {
	gap: 0;
	background: url(https://rollupbanner.tenjikai-professional.com/wp/wp-content/uploads/top_mvisual_bg.png) no-repeat center center;
	padding: 50px 0 15px;
}

/* 左側（画像） .left
--------------------------------*/
/* 枠
---------------------*/
/* left */
.top .mvisual .left {
	flex-basis: 58.333%;
}

/* 右側（特集） .right
--------------------------------*/
/* 枠
---------------------*/
/* right */
.top .mvisual .right {
	display: flex;
	align-items: center;
	flex-basis: calc(100% - 58.333%);
	text-align: center;
}
/* right_inner */
.top .mvisual .right_inner {
	width: 100%;
	margin-top: -35px;
}
/* タイトル .title
---------------------*/
/* p */
.top .mvisual .title p {
	font-size: 1.1rem;
	font-weight: 600;
}
/* h1 */
.top .mvisual .title h1 {
	color: #000; /* style.cssの打ち消し */
	font-size: 2.2rem; /* style.cssの打ち消し */
	font-weight: 900; /* style.cssの打ち消し */
	background: none; /* style.cssの打ち消し */
	border-radius: 0; /* style.cssの打ち消し */
	margin: 0.1rem 0 0; /* style.cssの打ち消し */
	padding: 0; /* style.cssの打ち消し */
}
/* 特集 .feature_link
---------------------*/
/* 枠 */
.top .mvisual .right .feature_link {
	position: relative;
	background-color: #fff;
	margin-top: 2.5rem;
	padding: 2.5rem 3rem;
}
/* h2 */
 .top .mvisual .right .feature_link h2 {
	color: #000; /* 上の上書き */
}
/* h3 */
.top .mvisual .right .feature_link h3 {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 56%;
	color: #fff; /* style.cssの打ち消し */
	font-size: 1.2rem; /* style.cssの打ち消し */
	text-align: center; /* style.cssの打ち消し */
	background-color: var(--color-primary);
	border-radius: 20px;
	border-bottom: 0; /* style.cssの打ち消し */
	margin: 0; /* style.cssの打ち消し */
	padding: 0.5rem 1.8rem; /* style.cssの打ち消し */
}
.top .mvisual .right .feature_link h3::before {
	display: none; /* style.cssの打ち消し */
}
/* h3 + p */
.top .mvisual .right .feature_link h3 + p {
	margin-top: 0; /* style.cssの打ち消し */
}
/* h4 */
.top .mvisual .right .feature_link h4 {
	font-size: 1.3rem; /* style.cssの打ち消し */
	font-weight: 900;
	margin-top: 0.2rem;
}
.top .mvisual .right .feature_link h4::before {
	display: none; /* style.cssの打ち消し */
}
.top .mvisual .right .feature_link h4 span {
	font-size: 1.2rem;
}
/* h4 + p */
.top .mvisual .right .feature_link h4 + p {
	font-size: 1.8rem; /* style.cssの打ち消し */
	line-height: 1.2;
	font-weight: 900;
	margin-top: 0.6rem;
}
/* h4 + p span */
.top .mvisual .right .feature_link h4 + p span {
	font-size: 1.2rem;
}
.top .mvisual .right .feature_link h4 + p span.price {
	color: var(--color-primary);
	font-size: 1.8rem; /* 上の打ち消し */
}
.top .mvisual .right .feature_link h4 + p span.price + span {
	color: var(--color-primary);
}
/* a.cmn_btn */
.top .mvisual .right .feature_link a.cmn_btn {
	margin-top: 1.5rem;
}

/* ポイント .point
-------------------------------------------*/
/* 背景
--------------------------------*/
/* point */
.top .point {
	padding: 4rem 0 5rem;
}

/* 見出し
--------------------------------*/
/* h2 */
 .top .point h2 {
	color: #000; /* 上の上書き */
}

/* リスト
--------------------------------*/
/* ul */
.top .point ul {
	gap: 1.5625rem 2.5%;
	margin-top: 2rem;
}
/* li */
.top .point li {
	flex-basis: calc((100% - 2.5% )/2);
}

/* 特集 .top_feature
-------------------------------------------*/
/* 背景
--------------------------------*/
/* top_feature */
.top .top_feature {
	gap: 1rem 2.5%;
	background: url(https://rollupbanner.tenjikai-professional.com/wp/wp-content/uploads/top_feature_bg.png) no-repeat center center;
	padding: 3rem 0;
}

/* 左側（画像） .left
--------------------------------*/
/* 枠
---------------------*/
/* left */
.top .top_feature .left {
	flex-basis: calc((100% - 2.5% )/2);
	line-height: 0;
}

/* 右側（特集） .right
--------------------------------*/
/* 枠
---------------------*/
/* right */
.top .top_feature .right {
	display: flex;
	align-items: center;
	flex-basis: calc((100% - 2.5% )/2);
	text-align: center;
}
/* right_inner*/
.top .top_feature .right_inner {
	width: 100%;
} 
/* h2 */
.top .top_feature .right h2 {
	position: relative;
	color: #fff; /* 上の打ち消し */
}
/* h2::before */
.top .top_feature .right h2:before {
	position: absolute;
	content: url(https://rollupbanner.tenjikai-professional.com/wp/wp-content/uploads/tpo_feature_english.png);
	top: -3.5rem;
	left: 3.5rem;
}
/* p */
.top .top_feature .right p {
	color: #fff;
	line-height: 1;
}
/* p */
.top .top_feature .right p:nth-of-type(1) {
	font-size: 1.2rem;
	font-weight: 700;
	margin-top: 1.7rem;
}
/* p + p */
.top .top_feature .right p:nth-of-type(2) {
	font-size: 1.7rem;
	font-weight: 700;
	margin-top: 0.3rem;
}
/* p + p + p */
.top .top_feature .right p:nth-of-type(3) {
	font-size: 1.2rem;
	font-weight: 400;
	margin-top: 1.7rem;
}
/* a */
.top .top_feature .right a.cmn_btn {
	width: 80%;
	margin: 0.7rem auto 0;
} 

/* 売れ筋商品 .hot_selling
-------------------------------------------*/
/* 共通
--------------------------------*/ 
/* 見出し・文字
---------------------*/
/* .title */
.top .hot_selling .title {
	position: relative;
}
.top .hot_selling .title p {
	position: absolute;
	top: -50%;
	right: 0;
	font-weight: 600;
}

/* リスト
---------------------*/
/* ul */
.top .hot_selling ul {
	gap: 1.75rem 2.333%;
	margin-top: 1.5rem;
}
/* ul::after */
.top .hot_selling ul::after {
	content: "";
	display: block;
	width: calc((100% - 2.333%*3)/4);
}
/* li */
.top .hot_selling li {
	flex-basis: calc((100% - 2.333%*3)/4);
	text-align: center;
} 
/* li a img */
.top .hot_selling li a img {
	display: block;
	line-height: 0;
	transition: all 0.3s; /* ゆっくり戻すため記述 */
	opacity: 1; /* ゆっくり戻すため記述 */
	filter: brightness(100%); /* ゆっくり戻すため記述 */
	filter: drop-shadow(0.1rem 0.1rem 0.1rem var(--color-shadow));
	user-select: none;
}
/* li a:hover img */
.top .hot_selling li a:hover img {
	transition: all 0.3s;
	opacity: 0.8;
	filter: brightness(110%);
	filter: drop-shadow(0.1rem 0.1rem 0.1rem var(--color-shadow));
}
/* li p */
.top .hot_selling li p {
	color: #333;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	margin-top: 0.7rem;
} 
/* li p */
.top .hot_selling li a:hover p {
	color: #666;
} 
/* li p span */
.top .hot_selling li p span {
	display: block;
	font-size: 0.9rem;
	background-color: var(--color-primary20);
	border-radius: 0.2rem;
	margin: 0.6rem 0 0.3rem;
	padding: 0.2rem 0.5rem 0.4rem;
}
/* li p a:hover span */
.top .hot_selling li a:hover p span {
	background-color: var(--color-primary15);
}


/* ボタン（商品一覧）
---------------------*/
/* a.cmn_btn */
.top .hot_selling a.cmn_btn {
	width: 45.8333%;
	margin: 3rem auto 0;
}

/* 器具サイズ比較 .size_comparison
-------------------------------------------*/
/* 背景
--------------------------------*/ 
/* block */
.block.size_comparison {
	margin-top: 5rem; /* style.cssの打ち消し */
}
/* block_inner */
.size_comparison .block_inner {
	background: url(https://rollupbanner.tenjikai-professional.com/wp/wp-content/uploads/top_comparison_bg.png) repeat-y;
	background-size: 100%;
	padding: 3rem 0 2.5rem;
}
/* イメージ
--------------------------------*/ 
.size_comparison .image {
	margin-top: 3.25rem;
}

/* メディアの種類 .media_types
-------------------------------------------*/
/* リスト
--------------------------------*/ 
/* ul */
.media_types ul {
	gap: 1rem 3.25%;
	margin-top: 2rem;
}
/* li */
.media_types li {
	flex-basis: calc((100% - 3.25%*2)/3);
}

/* 見出し・文字
--------------------------------*/ 
/* h3 */
.media_types li h3 {
	color: #fff; /* style.cssの打ち消し */
	text-align: center; /* style.cssの打ち消し */
	border-bottom: 0; /* style.cssの打ち消し */
	background-color: var(--color-primary);
	padding: 0.6rem; /* style.cssの打ち消し */
}
/* h3::before */
.media_types li h3::before {
	display: none; /* style.cssの打ち消し */
}
/* h3 + img */
.media_types li h3 + img,
.media_types li img + p {
	margin-top: 0.5rem;
}


/* 画像
--------------------------------*/ 
/* p + img */
.media_types li p + img {
	margin-top: 1.5rem;
}


/* 比較表（共通）.comparison_chart
-------------------------------------------*/
/* テーブル
--------------------------------*/ 
/* table */
 .comparison_chart table {
	background-color: #fff;
	border: 1px solid var(--color-border1);
 	margin-top: 2rem;
 }
 /* th,td */
 .comparison_chart table th,
 .comparison_chart table td {
	white-space: nowrap;
	text-align: center;
 }
 /* th（固定） */
.comparison_chart table th.sticky {
	position: sticky;
	top: 0;
	left: 0;
	border-left: none;
	border-right: none;
}
.comparison_chart table th.sticky::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-left: 1px solid var(--color-border1);
	border-right: 1px solid var(--color-border1);
	z-index: -1;
}

/* 商品の比較表 .product_comparison_chart
-------------------------------------------*/
/* 背景
--------------------------------*/ 
/* block */
.block.product_comparison_chart {
	margin-top: 5rem; /* style.cssの打ち消し */
}
/* block_inner */
.product_comparison_chart .block_inner {
	padding: 3rem 0;
}

/* テーブル
--------------------------------*/ 
/* table_wrap */
 .product_comparison_chart .table_wrap {
	overflow-x: auto;
 }
 /* table */
 .product_comparison_chart table {
 	width: 2190px;
 }
 /* th（画像と品番） */
.product_comparison_chart table tr:nth-of-type(2) th,
.product_comparison_chart table tr:nth-of-type(3) th {
	background-color: #fff;
}
 /* th（固定） */
.product_comparison_chart table th.sticky {
	background-color: #e8e8e8; /* 後ろが透けない為 */
}
 /* thの幅 */
.product_comparison_chart table tr:nth-of-type(1) th:nth-of-type(1) {
	width: 300px;
}
.product_comparison_chart table tr:nth-of-type(2) th { 
	width: 210px;
}
/* th　品番とのマージン調整 */
.top .product_comparison_chart table tr:nth-of-type(2) th {
	vertical-align: bottom;
	border-bottom: 1px solid #fff;
	padding-bottom: 0;
}
.top .product_comparison_chart table tr:nth-of-type(3) th {
	padding-top: 0.2rem;
}
/*  th内 img */
.top .product_comparison_chart table tr:nth-of-type(2) th img {	
	display: block;
	/* filter: drop-shadow(0.1rem 0.1rem 0.1rem var(--color-shadow)); */
	margin: 0 auto;
}

/* メディアの比較表 .media_comparison_chart
-------------------------------------------*/
/* テーブル
--------------------------------*/ 
/* thの色 */
.media_comparison_chart table tr:nth-of-type(2) th:nth-of-type(1), 
.media_comparison_chart table tr:nth-of-type(2) th:nth-of-type(2), 
.media_comparison_chart table tr:nth-of-type(2) th:nth-of-type(3) { 
	background-color: #fff;
}

/* 利用シーン .usage_scenes
-------------------------------------------*/
/* 背景
--------------------------------*/ 
/* block */
.block.usage_scenes {
	margin-top: 5rem; /* style.cssの打ち消し */
}
/* block_inner */
.usage_scenes .block_inner {
	padding: 3rem 0;
}

/* スライダー
--------------------------------*/ 
/* xo-slider */
.usage_scenes .metaslider {
	margin-top: 2rem;
}
/* nav */
.usage_scenes .metaslider .flexslider .flex-direction-nav li a {
	top: 37%;
}
/* caption-wrap */
.usage_scenes .metaslider .caption-wrap {
	position: relative; /* metasliderの上書き */
	color: #000; /* metasliderの上書き */
	background-color: transparent; /* metasliderの上書き */
	margin-top: 0.5rem;
}
.usage_scenes .metaslider .caption-wrap .caption {
	padding: 0; /* metasliderの上書き */
}
/* caption-wrap h6 */
.usage_scenes .metaslider .caption h6 {
	text-align: center; /* metasliderの上書き */
}
.usage_scenes .metaslider .caption h6 + br {
	display: none; /* metasliderの上書き */
}
.usage_scenes .metaslider .flexslider .slides .caption p {
	margin-top: 0.5rem; /* metasliderの上書き */
}

/* デザインについて .top_design
-------------------------------------------*/
/* リスト
--------------------------------*/ 
/* 枠
---------------------*/  
/* ul */
.top_design ul {
	gap: 1rem 3.25%;
	margin-top: 2rem;
}
/* li */
.top_design li {
	flex-basis: calc((100% - 3.25%*2)/3);
	text-align: center;
	background-color: #ccc;
	padding: 1rem;
}
/* 見出し
---------------------*/  
/* div h4 */
.top_design h4 {	
	font-size: 1.4rem;
	font-weight: 900;
	margin-top: 0.2rem;
}
.top_design h4::before {	
	display: none;
}
/* li h5 */
.top_design h5 {
	font-size: 1rem;
	font-weight: 700;
}
/* 画像
---------------------*/  
/* li img */
.top_design .flex li img {
	display: block;
	margin: 1rem auto 0.5rem;
}
/* 価格 
---------------------*/  
/* p */
.top_design .flex p {
	font-size: 2rem;
	font-weight: 900;
	line-height: 1;
}
/* p soan */
.top_design .flex p span {
	display: inline-block;
	font-size: 1rem;
	padding-left: 0.1rem;
}
/* カラー 
---------------------*/  
/* li */
.top_design li.plan_draft { background-color: var(--color-plan-draft-base); }
.top_design li.plan_data { background-color: var(--color-plan-data-base); }
.top_design li.plan_omakase { background-color: var(--color-plan-omakase-base); }
/* h5 */
.top_design .plan_draft h5 { color: var(--color-plan-draft); }
.top_design .plan_data h5 { color: var(--color-plan-data); }
.top_design .plan_omakase h5 { color: var(--color-plan-omakase); }

/* ボタン 
--------------------------------*/ 
/* cmn_btn */
.top .top_design a.cmn_btn {
    width: 45.8333%;
    margin: 3rem auto 0;
}

/* メディアの交換について .top_media_change
-------------------------------------------*/
/* 背景
--------------------------------*/ 
/* block */
.block.top_media_change {
	margin-top: 5rem; /* style.cssの打ち消し */
}
/* block_inner */
.top_media_change .block_inner {
	padding: 3rem 0;
}

/* ボタン 
--------------------------------*/ 
/* cmn_btn */
.top .top_media_change a.cmn_btn {
    width: 45.8333%;
    margin: 3rem auto 0;
}