@charset "shift_jis";

/* indexページ */
.table { border: none; }

/****************************************
/* 見出し
/***************************************/
.heading.type-name {
	padding: 10px 15px;
	border-top: 1px solid #ccc;
	border-bottom: 4px solid #ccc;
	border-left: 4px solid #ccc;
	border-right: 1px solid #ccc;
	background-color: #eee;
}
.heading.type-name .title {
	font-size: 34px;
}
.heading.type-name .title .sub-title {
	margin-left: 15px;
	font-size: 15px;
}
.heading.type-name .labels .label {
	margin-bottom: 2px;
	padding: 2px 5px;
	color: #555;
	font-size: 12px;
	font-weight: normal;
	border: 2px solid #fff;
	border-radius: 3px;
	background-color: #f9f9f9;
}
.heading.item-name {
	color: #ffffff;
	padding: 5px 10px;
	font-size: 30px;
	border-bottom: 3px solid #ccc;
	background-color: #eee;
}
.heading.item-title {
	margin-bottom: 10px;
	padding: 5px 10px;
	font-size: 24px;
	border-left: 5px solid #ccc;
	background-color: #eee;
}

/* ふきだし
-----------------------------------------*/
.heading.top_title {
	color:#ffffff;
	position: relative;
	padding: .5em .75em;
	background-color: #6cb6bd;
	border-radius: 6px;
	font-size:24px;
	margin:10px 0 20px;
}
.heading.top_title::after {
	position: absolute;
	top: 100%;
	left: 30px;
	content: '';
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top: 15px solid #6cb6bd;
}



/****************************************
/* 各種TOPページ
/***************************************/

/* TOP画像下の青いやつ
-----------------------------------------*/
.top-icon-area li p {
	color:#ffffff;
	font-size:15px;
	/* text-align: center; */
	border:1px #cccccc solid;
	background-color:#006996;	
	margin: 0;
	width: 100%;
	padding: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}


.top-icon-area{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.top-icon-area li {
	display: flex;
}


/* 商品一覧メニュー
-----------------------------------------*/
.menu-snoc-area .fig-caption {
	margin-left: 2px;
}
.menu-snoc-area .md-lineup-all .btn {
	color: #1146B3;
	background-color: #eee;
}


/* 機能アイコン説明
-----------------------------------------*/
.aside.md-icon-area {
	border-radius: 6px;
}


/* 商品一覧
-----------------------------------------*/
.md-lineup-items .item {
	margin-bottom: 30px;
}
.md-lineup-items .item .el-thumb {
	position: relative;
	margin-bottom: 0;
	border-bottom: 1px solid transparent;
	background-color: #f6f6f6;
}
.md-lineup-items .item .el-thumb:hover {
	border-bottom: 1px solid #FF007E;
}
.md-lineup-items .item .el-thumb .labels {
	position: absolute;
	bottom: 2px;
	left: 0;
}
.md-lineup-items .item .el-thumb .labels .label {
	margin-left: 3px;
	padding: 2px 4px;
	color: #666;
	font-size: 11px;
	border: 1px solid #bbb;
	background-color: #fff;
}
.md-lineup-items .item .el-body {
	padding: 0 3px 4px 3px;
	background-color: #f6f6f6;
}
.md-lineup-items .item .el-body .el-heading {
	font-size: 16px;
}
.md-lineup-items .item .el-body .el-price {
	font-size: 15px;
	margin-bottom: 5px
}
.md-lineup-items .item .el-body .el-price .el-type {
	color: #666;
	font-size: 12px;
	font-weight: normal;
}
.md-lineup-items .item .el-body .h-list li {
	margin-left: 5px;
}
.md-lineup-items .item .el-body .h-list li:first-child {
	margin-left: 0;
}
.md-lineup-items .item .el-body .h-list.md-thumb .el-color-num {
	padding: 2px 3px;
	border: 1px solid #bbb;
	border-radius: 4px;
	background-color: #fff;
}
.md-lineup-items .item .el-body .h-list.md-thumb .el-color {
	margin-left: 2px;
}
.md-lineup-items .item .el-body .h-list.md-thumb .el-color img {
	margin-bottom: -5px;
	border-radius: 15px;
}
.md-lineup-items .item .el-body .h-list.md-thumb .el-color.on-border img {
	width: 18px;
	border: 1px solid #bbb;
}



/****************************************
/* 参考価格
/***************************************/
.price-area {
	position: relative;
}
.price-area .title {
	color: #666;
	font-size: 16px;
	font-weight: bold;
}
.price-area .title .sub-txt {
	font-size: 12px;
	font-weight: normal;
}
.price-area .type {
	font-size: 15px;
	text-align: center;
}
.price-area .price {
	color: #CF0609;
	font-size: 26px;
	font-weight: bold;
	text-align: center;
}
.price-area .before-price {
	color: #666;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
}
.price-area .md-price {
	padding: 10px 0;
	border-top: 4px solid #eee;
	border-bottom: 4px solid #eee;
}
.price-area .md-price .price-multi {
	border-left: 3px solid #eee;
}
.price-area .postage {
	position: absolute;
	top: -2px;
	right: 0;
	padding: 2px 5px;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	border-radius: 3px;
	background-color: #CF0609;
}



/****************************************
/* TOP
/***************************************/

/* 特徴・商品説明
---------------------------------------*/
.feat-area {
	padding: 10px;
	border-radius: 10px;
	background-color: #f0f0f0;
}

/* プルーン
---------------------------------------*/
.media.md-plune {
	padding: 10px;
	background-color: #f6f6f6;
}
.media.md-plune .el-heading {
	margin-top: 5px;
	margin-bottom: 5px;
	font-size: 15px;
	font-weight: bold;
}
.media.md-plune .el-txt {
	padding: 8px;
	border-radius: 6px;
	background-color: #fbfbfb;
}

/* UPF
---------------------------------------*/
.upf-area {
	padding: 8px 10px;
	background-color: #52AFFD;
}
.upf-area .heading {
	color: #fff;
	font-size: 15px;
}
.upf-area .txt {
	padding: 8px;
	border-radius: 6px;
	background-color: #badfff;
}



/****************************************
/* カラーバリエーション
/***************************************/
#COLOR .grid_flex .item {
	margin-bottom: 20px;
}
#COLOR .grid_flex .item .el-thumb {
	position: relative;
}
#COLOR .grid_flex .item .el-thumb .el-thumb-img.md-uraji {
	height: 130px;
}
#COLOR .grid_flex .item .el-body .el-name .txt-uraji {
	float: right;
	color: #666;
	font-size: 13px;
	font-weight: normal;
}
#COLOR .grid_flex .item .kanbai {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	/*
	top: 15px;
	left: 40px;
	*/
}
#COLOR .grid_flex .item .kanbai.md-uraji {
	/*z-index: 999;*/
	position: absolute;
	top: -70px;
	left: 0px;
	/*
	top: 15px;
	left: 40px;
	*/
}
#COLOR .grid_flex .item .syakou {
	position: absolute;
	bottom: 5px;
	left: 5px;
	padding: 2px 5px;
	color: #333;
	font-size: 11px;
	border: 1px solid #bbb;
	background-color: #fff;
}

/* セット
---------------------------------------*/
#COLOR .grid_flex .item-info-area {
	border-radius: 8px;
	background-color: #f6f6f6;
}
#COLOR .grid_flex .item-info-area .el-heading {
	margin-bottom: 5px;
	font-weight: bold;
	border-bottom: 1px solid #ddd;
}
#COLOR .grid_flex .item-info-area .el-txt {
	color: #555;
	font-size: 12px;
}

/* 防炎ラベル
---------------------------------------*/
.bouen_label {
	margin: 0 10px;
	padding: 15px;
	border: 1px dotted #FF6666;
	border-radius: 6px;
	background-color: #fff9f9;
}


/****************************************
/* 価格表
/***************************************/
.table.md-price .el-price {
	font-size: 14px;
}
.table.md-price .el-price .before-price {
	color: #666;
	font-size: 13px;
	font-weight: normal;
	text-decoration: line-through;
}


/****************************************
/* スマイルネオ他商品紹介
/***************************************/
.sn_oc.menu-area .el-item, .sn_oc.lineup-area .el-item {
	position: relative;
}
.sn_oc.menu-area .el-item .new_icon, .sn_oc.lineup-area .el-item .new_icon {
	position: absolute;
	top: 0;
	left: 5px;
}
.lineup-area .el-txt {
	margin-top: 2px;
	color: #555;
	font-size: 12px;
}


/* 製品情報テーブル
---------------------------------------*/
.table.item-info th {
	color: #666;
}
.table.item-info td {
	padding-top: 5px;
	padding-bottom: 5px;
}


/* 共通
---------------------------------------*/
a.txtlink, .txtlink a { color: #1146B3; }
.new-lb {
	margin-left: 10px;
	padding: 0 5px;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	background-color: #CF0609;
}


/* 新生地追加ラベル
---------------------------------------*/
.new_cloth{
	position: absolute;
	background: red;
	color: white;
	padding: 3px 5px;
	top: 10px;
	right: 10px;
}

#LINEUP ul.space,
#KIJILIST ul.space {
	gap: 3px;
}

#LINEUP ul.space li,
#KIJILIST ul.space li {
	width: calc(100% / 5 - 3px);
	height: auto;
}



/* ここから商品ページ */
.table { border: none; }

/****************************************
/* 見出し
/***************************************/
.heading.item-name {
	padding: 5px 10px;
	font-size: 30px;
	border-bottom: 3px solid #ccc;
	background-color: #6cb6bd;
}
.heading.item-title {
	margin-bottom: 10px;
	padding: 8px 10px;
	font-size: 24px;
	border-left: 8px solid #6cb6bd;
	background-color: #eee;
}

.heading.md-snoc-title {
	font-weight:bold;
	color:#CB4138;
	padding:10px 0 5px 10px;
	font-size:24px;
	margin:0 0 2px;
	border-left: 5px solid #E0BBB9;
	background-color: #F5D2D0;
}


/****************************************
/* 参考価格
/***************************************/
.price-area {
	position: relative;
}
.price-area .title {
	color: #666;
	font-size: 16px;
	font-weight: bold;
}
.price-area .title .sub-txt {
	font-size: 12px;
	font-weight: normal;
}
.price-area .type {
	font-size: 15px;
	text-align: center;
}
.price-area .price {
	color: #CF0609;
	font-size: 26px;
	font-weight: bold;
	text-align: center;
}
.price-area .md-price {
	padding: 10px 0;
	border-top: 4px solid #eee;
	border-bottom: 4px solid #eee;
}
.price-area .md-price .price-multi {
	border-left: 3px solid #eee;
}
.price-area .postage {
	position: absolute;
	top: -2px;
	right: 0;
	padding: 2px 5px;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	border-radius: 3px;
	background-color: #CF0609;
}



/****************************************
/* TOP
/***************************************/

/* 施工IMG
---------------------------------------*/
.item-img { position: relative; }
.item-img .point-area {
	z-index: 999;
	position: absolute;
	top: 0;
	left: 0;
	width: 340px;
	padding: 5px 10px;
	color: #fff;
	background-color: #006996;
	opacity: 0.8;
}
.item-img .point-area .point-txt {
	float: left;
	font-size: 20px;
	font-weight: bold;
}
.item-img .point-area .point-link {
	float: left;
	margin-top: 18px;
	margin-left: 10px;
	/*
	position: absolute;
	right: 10px;
	bottom: 10px;
	*/
}
.item-img .point-area .point-link a {
	color: #fff;
	text-decoration: underline;
}
.item-img .point-area .point-link a:hover {
	text-decoration: none;
}

#feature_img, #feature_img_thumb, #caption {
	width:375px;
	overflow:hidden;
	zoom:1;}
	

#feature_img_thumb {
	margin:0 0 10px 0;}

#feature_img_thumb li {
	margin:4px 0 0 0;
	float:left;}

#feature_img_thumb img {
	width:84px;
	height:66px;
	margin:0 3px 0 0;}

#caption {
	height:30px;
	font-size:12px;
	padding:3px 0 0 4px;}


/* プルーン
---------------------------------------*/
.media.md-plune {
	padding: 10px;
	background-color: #f0f0f0;
}
.media.md-plune .el-heading {
	margin-top: 5px;
	margin-bottom: 5px;
	font-size: 15px;
	font-weight: bold;
}
.media.md-plune .el-txt {
	padding: 8px;
	border-radius: 6px;
	background-color: #fbfbfb;
}

/* UPF
---------------------------------------*/
.upf-area {
	padding: 8px 10px;
	background-color: #52AFFD;
}
.upf-area .heading {
	color: #fff;
	font-size: 15px;
}
.upf-area .txt {
	padding: 8px;
	border-radius: 6px;
	background-color: #badfff;
}



/****************************************
/* カラーバリエーション
/***************************************/
#COLOR .grid_flex .item {
	margin-bottom: 20px;
}
#COLOR .grid_flex .item .el-thumb {
	position: relative;
}
#COLOR .grid_flex .item .kanbai {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	/*
	top: 15px;
	left: 40px;
	*/
}
#COLOR .grid_flex .item .syakou {
	position: absolute;
	bottom: 5px;
	left: 5px;
	padding: 2px 5px;
	color: #333;
	font-size: 11px;
	border: 1px solid #bbb;
	background-color: #fff;
}

/* 防炎ラベル
---------------------------------------*/
.bouen_label {
	margin: 0 10px;
	padding: 15px;
	border: 1px dotted #FF6666;
	border-radius: 6px;
	background-color: #fff9f9;
}


/****************************************
/* 価格表
/***************************************/
.table.md-price .el-price {
	font-size: 14px;
}


/****************************************
/* スマイルネオ他商品紹介
/***************************************/
.sn_oc.menu-area .el-item, .sn_oc.lineup-area .el-item {
	position: relative;
}
.sn_oc.menu-area .el-item .new_icon, .sn_oc.lineup-area .el-item .new_icon {
	position: absolute;
	top: 0;
	left: 5px;
}
.lineup-area .el-txt {
	margin-top: 2px;
	color: #555;
	font-size: 12px;
}


/* 製品情報テーブル
---------------------------------------*/
.table.item-info th {
	color: #666;
}
.table.item-info td {
	padding-top: 5px;
	padding-bottom: 5px;
}


/* 共通
---------------------------------------*/
a.txtlink, .txtlink a { color: #1146B3; }
.new-lb {
	margin-left: 10px;
	padding: 0 5px;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	background-color: #CF0609;
}

/* 商品一覧メニュー */
.menu-snoc-area .fig-caption {
	margin-left: 2px;
}

.menu-snoc-area .md-lineup-all {
	display: flex;
	align-items: center
	;justify-content: center;
}
/* .menu-snoc-area .md-lineup-all .btn {
	color: #ffffff;
	font-size: 16px;
	background-color: #73a221;
	padding: 10px 20px;
	box-shadow: 2px 2px 0px #c3c3c3;
}
.menu-snoc-area .md-lineup-all .btn::before {
	content:"\25B6";
	display: inline-block;
	margin-right: 5px;
} */

#DIY_MIDDLE #JOINT .area_grid .m20 {
	margin: 0 !important;
}

.mb80 {
	margin-bottom: 80px;
}

ul.h-list li {
	margin: 0 3px 3px 0;
	flex: 0 0 18%;
}

table th {
    white-space: nowrap;
}

.mitumori-form ul  li label.input-label{
	height: auto !important;
}