@charset "shift_jis";

/*-- アンカーリンクのスクロール移動処理 --------------------------------------------------------------------*/
div.header-info-red {
	display: none;
}
html {
    scroll-behavior: smooth;
}
div.header-info-red {
	display: none;
}
.inner_content {
	max-width:1080px;
}
body {
	background:linear-gradient(135deg,rgb(255, 123, 61)0%,rgb(233, 82, 23)100%);
}

body a:hover {
	opacity: 0.8;	
}
/*-- アンカーリンクのスクロール移動処理 終了 ---------------------------------------------------------------*/


/*-------------------------------------------------------------------------------------------------------*/
/*-- タブ切り替えエリア ----------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------*/
#tab-switching {
	max-width: 1080px;
	margin: 2% auto 5%;
}
#tab-switching .tab-area {
	display: flex;
	cursor: pointer;
	align-items: flex-end;
}
#tab-switching .tab {
	width: calc(100%/2);/* calc関数を使用し、均等に2分割する */
	padding: 10px;
	text-align: center;/* 文字を中央に。 */
	font-size: 20px;
    background-color: #f2f2f2;
}
#tab-switching .tab.active {
	background-color: #698eeb !important;
	color: #fff !important;
	padding: 20px 10px;
	border-radius: 20px 20px 0 0;
	font-size: 24px;
}
#tab-switching .panel {
	display: none;
}
#tab-switching .panel.active {
	display: block;
}
/*-------------------------------------------------------------------------------------------------------*/
/*-- タブ切り替えエリア終了 -------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------*/


/*-------------------------------------------------------------------------------------------------------*/
/*-- パネルエリア ----------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------*/

/*-- 4colのカテゴリボタン --*/
#tab-switching div.panel-area {
	background-color: #f1c49a;
}
#tab-switching div.panel-area div.category-button ul.button_4 {
	width: 86%;
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 15px;
	margin: 0 auto 5%;
	padding-top: 4%;
}
#tab-switching div.panel-area div.category-button ul.button_3 {
	width: 86%;
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 15px;
	margin: 0 auto 5%;
	padding-top: 4%;
}
#tab-switching div.panel-area div.category-button ul li {
	text-align: center;
}
#tab-switching div.panel-area div.category-button ul li p {
	font-size: 1.2rem;
	font-weight: bold;
}
#tab-switching div.panel-area div.category-button ul li a {
	display: block;
}
#tab-switching div.panel-area div.category-button ul li a img {
	width: 100%;
	background-color: #ff8c4b;
	border-radius: 50%;
}


/*-- 4colのカテゴリボタン --*/
#tab-switching div.panel-area div.panel-contents div.item-list {
	padding-bottom: 5%;
}
#tab-switching div.panel-area div.panel-contents h2 {
	width: 90%;
	margin: 2% auto 0;
	text-align: center;
}
#tab-switching div.panel-area div.panel-contents ul.col_4 {
	width: 90%;
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 15px;
	margin: 0 auto;
}
#tab-switching div.panel-area div.panel-contents ul.col_4 li {
	border: 2px solid #ff6c4c;
	border-radius: 5px;
}
#tab-switching div.panel-area div.panel-contents ul.col_4 li div.text_box {
	background-color: #fff;
	text-align: center;
}
#tab-switching div.panel-area div.panel-contents ul.col_4 li a div.text_box div.item_price_business {
	display: flex;
	justify-content: center;
	color: #e50012;
	padding-bottom: 1%;
}
#tab-switching div.panel-area div.panel-contents ul.col_4 li a div.text_box div.item_price_business span {
	font-size: 0.8rem;
	line-height: 0.85rem;
	margin: 3% 2% 0 0;
}
#tab-switching div.panel-area div.panel-contents ul.col_4 li a div.text_box div.item_price_business div.buy_price ul li {
	border: none;
	font-size: 2rem;
}
#tab-switching div.panel-area div.panel-contents ul.col_4 li a div.text_box div.item_price_business div.buy_price ul li span.spesicalprice {
	display: none;
}
#tab-switching div.panel-area div.panel-contents h3 {
	width: 60%;
	margin: 2% auto 0;
	background-color: #222;
	color: #fff;
	border-radius: 50px;
	text-align: center;
}
#tab-switching div.panel-area div.panel-contents h3 a {
	display: block;
	padding: 1% 0;
	font-size: 1.2rem;
}
/*-------------------------------------------------------------------------------------------------------*/
/*-- パネルエリア終了 ------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------*/

/* 20251120 T.ABE ADD [クーポンリンク設定] STA */
.business_coupon{
	width: 70%;
	margin: 2% auto;
}
.business_coupon_link{
	background-color: #fff;
	border: 1px solid #ea0012;
	width: 100%;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
	color: #ea0012 !important;
	box-sizing: border-box;
    padding: 1% 0;
    font-size: 1.4rem;
}
.business_coupon_link br{
	display:none;
}
.business_coupon_link:hover{
	border: 1px solid #ea0012;
}

.business_coupon_link:after{
	position: absolute;
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: 6px;
    height: 6px;
    border-top: 2px solid #ea0012;
    border-right: 2px solid #ea0012;
    top: 0;
    bottom: 0;
    right: 4%;
    margin: auto;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: all .3s ease 0s;
}
/* 20251120 T.ABE ADD [クーポンリンク設定] END */

/* 20251121 M.KATO [バナー設置] ADD STA*/
#business .banner_contents{
    margin: 0 auto 2%;
    width: 80%;
}

#business img {
display: block;
width: 100%;
}
/* 20251121 M.KATO [バナー設置] ADD END*/


/*---------------------------------------------------------------------------------------------------------------------*/
/*-- ヒートウェア最大半額キャンペーン ------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------*/
/* 20251212 S.TOGASHI【ヒートウェア最大半額キャンペーン】ADD STR */
#business div#heatwear_campaign {
	text-align: center;
}
#business div#menu_06 div#heatwear_campaign div.banner_contents {
	margin-top: 0;
}
#business div#heatwear_campaign ul.col_2 {
	width: 60%;
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 15px;
	margin: 0 auto;
}
/* 20251212 S.TOGASHI【ヒートウェア最大半額キャンペーン】ADD END */