@charset "shift_jis";

/*=========================================*/
/* テーマカラーの変更
/*=========================================*/


/* 見出し関連
-------------------------------------------*/
.heading.md-catalog-top {
	border-left-color:#9E876E;
}
.heading.md-catalog-top-small {
	border-left-color:#7bb7ac;
}

.heading.md-top {
	background: #9E876E;
}
/* 製品タイプボタン
-------------------------------------------*/
.item-style .btn {
	padding-top:6px;
	padding-bottom:6px;
	background-color: #cbc322;
}
.item-style .btn:hover {
	background-color: #ccc;
}
/* トップアイコン
-------------------------------------------*/
.icons.md-top img {
	background-color:#7bb7ac;
}
.icons.md-top .el-icon-source {
	background-color:#9E876E;
}
/*アイコンフォントfontello用*/
.icons.md-top i.el-icon-source {
	color:#7bb7ac;
}
.el-icon .comment{
	position:absolute;
	bottom:1px;
	right:1px;
	color:#FFF;
}

/*=========================================*/
/* トップページ
/*=========================================*/

/* 見出し関連
-------------------------------------------*/
.summary_title{
	font-size: 20px !important;
	border-bottom: 1px solid #666 !important;
	text-align: center;
	padding-bottom: 3px !important;
	margin-bottom: 15px !important;
}

/*生地一覧*/
.cloth_head {
    border-bottom: 1px solid #828282;
	display: flex;
	align-items: flex-end;
}
.cloth_title {
    padding: 6px 6px 0 6px;
    font-size: 20px;
	font-weight: bold;
	color: #FFFFFF;
}
.cloth_head .icon_kinou img {
    padding-right: 5px;
}
.c_deco01 {
    background-color: #c1ad49;
}
.c_deco02 {
    background-color: #4c659d;
}


/* 参考価格
----------------------------------------------------------*/
.sample-price-wrap {
	padding: 10px;
	border: 3px solid #e5e5e5;
	border-radius: 3px;
}
.sample-price {
	font-size: 18px;
	border-bottom: 1px solid #bbb;
}
.sample-price .maker {
	float: left;
	padding-left: 5px;
	padding-top: 5px;
	color: #666;
	font-weight: bold;
}
.sample-price .price {
	float: left;
	padding-left:10px;
	color: #dc0505;
	font-weight: bold;
}
.sample-price .price .price-off {
	margin-left: 5px;
	padding: 0 5px;
	color: #dd3753;
	font-size: 22px;
	background-color: #ffe9ed;
	border:1px solid #ffc6d0;
	border-radius: 3px;
}
.sample-price-info {
	padding: 5px;
	color: #666;
	font-size: 12px;
}
.sample-price-info .link {
	margin-top: 2px;
}
.sample-price-info .link a {
	color: #103CE5;
	text-decoration: underline;
}
.sample-price-info .link a:hover {
	text-decoration: none;
}
/* メーカー価格より大幅割引中
-----------------------------------------*/
.price_table_title {
	font-family:"メイリオ", Meiryo, Osaka, sans-serif;
	padding: 5px 10px;
	color: #ce1512;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	border-top:2px #ce1512 solid;
	border-bottom:2px #ce1512 solid;
	background-color: #fff2f2;
}

/* 製品特長
-----------------------------------------*/
.feat_area .txt_wrap{
	display: flex;
	align-items: center;
}
.feat_area p.item01{
	font-size: 20px;
	font-weight: bold;
	background-color: #ffac90;
	margin: 0 5px 0 0;
	padding: 7px;
	width: auto;
	height: 24px;
}
.feat_area p.item02{
	font-size: 20px;
	font-weight: bold;
	background-color: #83dbfc;
	margin: 0 5px 0 0;
	padding: 7px;
	width: auto;
	height: 24px;
}



/*黄マーカー*/
.deco{
	background: linear-gradient(transparent 60%, #ffdd00 0%);
	font-weight:bold;
}
/*生地タイプ*/
.type_cloth{
	border-right: solid 1px #d1d1d1;
	text-align: center;
	height:430px;
}
.type_cloth p{
	margin:8px 0 5px 0;
	font-size:12px;
}
.type_cloth ul{
	width:234px;
	margin: 0 auto;
}
.type_cloth li{
	float:left;
	margin:0 2px 4px 2px;
}
.type_cloth_last{
	text-align: center;
	height:430px;
}
.type_cloth_last p{
	margin:8px 0 5px 0;
	font-size:12px;
}
.type_cloth_last ul{
	width:234px;
	margin: 0 auto;
}
.type_cloth_last li{
	float:left;
	margin:0 2px 4px 2px;
}
/* 製品一覧
-------------------------------------------*/
.lineup-item{
	margin-bottom: 50px;
}
.lineup-item img {
	display: block;
}
.lineup-item a .heading {
	display: block;
	margin: 5px 0 2px 0;
	font-size: 16px;
}
.lineup-item a .price {
	display: block;
	color:#dc0505;
	font-weight:bold;
	font-size:13px;
}
.lineup-item a .text {
	display: block;
	color: #333;
	line-height: 1.4;
	margin-bottom:3px;
}
.lineup-item a:hover {
	text-decoration: none;
}
.lineup-item .btn{
	margin-top:6px;
	width:250px;
	font-size:15px;
}

/*-------------------------------------------
商品ページ
-------------------------------------------*/
/*アイコン
----------------------------------------------------------*/
.item_pickup {
	font-size: 0;
}
.item_pickup li {
	display: inline-block;
	margin: 1px 3px 1px 0;
	padding: 3px 5px;
	color: #fff;
	font-size: 12px;
	font-weight: normal;
	border-radius: 2px;
	background-color:#ec8308;
}
.label.md-txt-label.md-basic-info {
	background-color: #ec8308;
}
/*色柄一覧
----------------------------------------------------------*/
.part_line a{
	text-decoration: underline;
}

/*価格
----------------------------------------------------------*/
.t-red{
	color:#E10A17;
}
.el-kinou img{
	margin-top:3px !important;
}
.price-block{
	width:480px;
	margin:auto;
	font-weight:bold;
}
.price-area{
	/* background: #fff9f9; */
	padding:20px 0;
	/* width:520px; */
	/* margin:20px auto; */
}
.price-maker{
	width:205px;
}
/*送料
----------------------------------------------------------*/
.souryou{
	width:550px;
	margin:auto;
}
/*製品仕様
----------------------------------------------------------*/
.w30{
	width:30px !important;
}
.w40{
	width:40px !important;
}
.w50{
	width:50px !important;
}
.w60{
	width:60px !important;
}
.w70{
	width:70px !important;
}

.w80{
	width:80px !important;
}
/*オプション
----------------------------------------------------------*/
.opt_box{
	float:left;
	width:60%;
	margin:0 0 20px 10px;
}

.zaiko_few {
	margin-top:3px;
	color:#F00;
	border:1px dotted #CCC;
	padding:5px;
	text-align:center;
}
.zaiko_few .name,
.zaiko_no .name,
.zaiko_end .name {
	font-weight:bold;
}
.zaiko_no {
	margin-top:3px;
	color:#FFF;
	background-color:#F00;
	padding:5px;
	text-align:center;
}
.zaiko_end {
	margin-top:3px;
	color:#FFF;
	background-color:#F00;
	padding:5px;
	text-align:center;
}

.kaihei_method {
	display: flex;
	flex-wrap: wrap;
	text-align: center;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
}
.kaihei_method li {
	flex: 0 1 calc((100% - 2 * 8px) / 3);
	height: 50px;	
	min-width: 170px;
	border: 2px solid #555555;
	font-weight: bold;
	padding: 10px;
	font-size: 14px;
	border-radius: 3px;	
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	box-sizing: border-box;
}

.kaihei_method li a {
	font-size: 15px;
	color: #555555;
	text-decoration: none;
}

.b_blue {
	display: inline-block;
	border: 2px solid #aacac4;
	padding: 5px 15px;
	border-radius: 3px;
}

.bg_gray {
	background-color: gainsboro;
	display: inline-block;
	padding:5px 10px;
}

.opt_dendou_item .b_gray {
	display: block;
	border: 1px solid #a3a3a3;
	box-sizing: border-box;
	padding: 10px 15px;
	border-radius: 3px;
	width: 100%;
}

h4.heading.item-title {
    margin-bottom: 10px;
    padding: 6px 10px;
    font-size: 16px;
    border-left: 8px solid #6cb6bd;
	background-color: #f0f0f0;
}

.menu_list li {
	background-color: #e9f0f0;
	display: inline-block;
	padding: 5px 15px;
	margin-bottom: 5px;
	border-radius: 3px;
	border: 2px solid rgb(123, 140, 143);
}

.menu_list li a{
	color: #333333;
	text-decoration: none;
	font-size: 15px;
	font-weight: bold;
}

.menu_list li a::after {
	content: "";
	display: inline-block;
	width: 0;
  	height: 0;
  	border-left: 8px solid transparent;
  	border-right: 8px solid transparent;
  	border-top: 10px solid #555;
	margin-left: 8px;
}

.is_center .table.md-data td {
	text-align: center;
}

.opt_title {
	flex: 0 0 100%;
  	width: 100%;
  	margin: 0;
}

.opt_area {
	display: flex;
	gap: 16px;
	align-items: stretch;
	flex-direction: row;
}

.opt_dendou_item {
	background-color: #f6fbfb;
	border-radius: 5px;
	width: calc(50% - 8px);
	padding: 15px 10px;
	box-sizing: border-box;
}


.opt_dendou_item img {
	width: auto;
	height: 235px;
	object-fit:cover;  
	display: block;
	margin: 0 auto;

}

.opt_item {
	background-color: #f2f2f2;
}

.caution {
	color: #666;
    font-size: 12px;
    line-height: 16px;
    border: 1px dashed #999;
    padding: 10px 10px;
}

.flex_gap{--gap: 2%; gap: var(--gap);align-items: flex-start;}
.flex_child{display: flex; gap:calc(740px*0.02);}
.g08_1{width: calc((100% - 11 * var(--gap)) / 12 * 8 + var(--gap) * 7);}
.g04_1{width: calc((100% - 11 * var(--gap)) / 12 * 4 + var(--gap) * 3);}
.g04_2{width: calc((100% - 11 * var(--gap)) / 12 * 4 + var(--gap) * 3);}
.g06_1{width: calc((100% - 11 * var(--gap)) / 12 * 6 + var(--gap) * 5);}
.g06_2{width: calc((100% - 11 * var(--gap)) / 12 * 6 + var(--gap) * 5);}
.g03_2{width: calc((100% - 11 * var(--gap)) / 12 * 3 + var(--gap) * 2);}
.g02_2{width: calc((100% - 11 * var(--gap)) / 12 * 2 + var(--gap) * 1);}
.g02_3{width: calc((100% - 11 * var(--gap)) / 12 * 2 + var(--gap) * 1);}
.g2_1{width: calc((100% - (var(--gap)* 1)) / 2);}
.g2_2{width: calc((100% - (var(--gap)* 1)) / 2);}
.g5_3{width: calc((100% - (var(--gap)* 4)) / 5);}

.btn_estimate a {
    width: 60%;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    border-radius: 5px;
    background-color: #F5D2D0;
    border: 1px solid #D7716A;
    color: #CB4138;
    margin: 15px;
    padding: 18px 0;
}

/*その他の製品タイプ一覧*/
.heading.item-title {
    margin-bottom: 10px;
    padding: 10px;
    font-size: 20px;
    border-left: 5px solid #ccc;
    background-color: #eee;
}
.category_list .g04 a {
    display: block;
    background-color: #F5F5F5;
    height: 100%;
    margin-bottom: 10px;
	padding: 5px;
	transition: opacity .25s ease;
	border: #eceef0 solid 1px;
}
.category_list .g04 > a:hover {
	opacity: 0.75;
	text-decoration: none;
}
.price {
    color: #ce1512;
    font-size: 16px;
    font-weight: bold;
}

/*ボーダー囲み
----------------------------------------------------------*/
.a_items {
	align-items: center;
	justify-content: center;
	display: flex;
}
.point_box {
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid #666;
}

/*メニュー
--------------------------------------------*/
.menu li {
	margin-bottom: 14px;
}
.menu a {
	display: block;
	padding: 10px 15px;
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
	border-radius: 5px;
	background-color: #999;
}
.menu a:hover {
	text-decoration: none;
	background-color: #ccc;
}