@charset "utf-8";
/* CSS Document */

/* Tab styling (optional) */

.tl_container {
	margin: 2rem 0;
	width: 100%;
	
	}

span.small {
	margin-right: 3px;
	color: yellow;
	font-size: 14px;
	line-height: 17px;
}
.tl_list {
  display: flex;
  padding: 0;
  margin: 0;
  align-items: center;
  justify-content: left;
  list-style: none;
	width: 100%;

}

.tl_list li {
  text-align: center;
  border-radius: 8px 8px 0 0;
}

.tl_list li > a {
  color: #FFF;
  padding: 0.75rem 0.25rem  ;
  display: block;
  border: none;
  text-decoration: none;
  text-shadow: none;
  position: relative;
  border-radius: 8px 8px 0 0;
}

.tlchild {
  display: flex;
  padding: 0;
  margin: 0 ;
  align-items: center;
  justify-content: left;
  list-style: none;
	width: 100%;
	flex-wrap:wrap;
}
/*-- 色分けリスト--*/	
.tlchild li {
	margin: 0 5px 5px 0 ;
	border-radius: 1.5em;
	width: 22%;
	text-align: center;
	font-size: 17px;
	display: inline-block;
}

.maxicol .tlchild li {
	background-color: #1e50a2;
}
.medicol .tlchild li {
	background-color: #E30013;
}
.minicol .tlchild li {
	background-color: #008000;
}
.exsmcol .tlchild li {
	background-color: #abc302;
}
/*-- 色分けリスト--*/	
 div#Wrapper ul.tlchild li a {
  color: #FFFFFF;
  padding: 0.75rem 0.5rem ;
  display: block;
  border: none;
  text-decoration: none;
  text-shadow: none;
  position: relative;
  border-radius: 1em;
}

 div#Wrapper ul.tlchild li:hover, div#Wrapper ul.tlchild li:focus {
	opacity: 0.5;
}	
/* Section styling (optional) */

.tl_section {
  padding: 0;
  min-height: 8rem;
  border-radius: 0 0 4px 4px;
  text-shadow: none;
	width: 100%;
}
.tl_section p{
	margin:5px 0 0 0;
	padding: 0;
	font-size: 90%;
	text-align: right;
}
.tl_section h2 {
	margin: 1rem 0 ;
	font-size: 160%;
	font-weight: bold;
}
	/* // tab追加 // */
.product-wrap {
    margin: 0 auto 0px auto;
}
.product-wrap:after {
	content: "";
	display: block;
	clear: both;
}
.product-wrap:before {
　　　　content: "";
	display: block;
	clear: both;
}	
	
.product-image,.product-info {
    float: left;
}
.product-info {
    clear: right;
	margin-left: 30px;
	text-align: left;
	width: 65%;
}
/*---- 色分けタイトル ----*/	
.maxicol .product-title {
	font-size: 170%;
	margin: 0 0 10px 0;
	font-weight: bold;
	padding: 0.25em 0.5em;/*上下 左右の余白*/
	color: #373737;/*文字色*/
	background: transparent;/*背景透明に*/
	border-left: solid 5px  #1e50a2;/*左線*/
	line-height: 100%;
}
.medicol .product-title {
	font-size: 170%;
	margin: 0 0 10px 0;
	font-weight: bold;
	padding: 0.25em 0.5em;/*上下 左右の余白*/
	color: #373737;/*文字色*/
	background: transparent;/*背景透明に*/
	border-left: solid 5px  #E30013;/*左線*/
	line-height: 100%;
}
.minicol .product-title {
	font-size: 170%;
	margin: 0 0 10px 0;
	font-weight: bold;
	padding: 0.25em 0.5em;/*上下 左右の余白*/
	color: #373737;/*文字色*/
	background: transparent;/*背景透明に*/
	border-left: solid 5px #008000;/*左線*/
	line-height: 100%;
}
.exsmcol .product-title {
	font-size: 170%;
	margin: 0 0 10px 0;
	font-weight: bold;
	padding: 0.25em 0.5em;/*上下 左右の余白*/
	color: #373737;/*文字色*/
	background: transparent;/*背景透明に*/
	border-left: solid 5px  #abc302;/*左線*/
	line-height: 100%;
}
/*---- 色分け ----*/		
.product-info span {
	color: #666666;
	font-weight: none;
	font-size: 16px;
}
.product-info .button {
	text-align: right;
	width: 65%;
}
	
.product-image {
	width: 30%;
	}
	
.product-info dl {
	width: 100%;
}


.product-info dd {
	margin:0 0 1em 0 ;
	padding-left: 25px;
	font-size: 90%;
}

/*--- 色分けリスト --*/

.maxicol .product-info dt {
	font-weight: bold;
	background: url("../img/list-maxi.png") no-repeat left center;
	padding-left: 25px;
	font-size: 110%;
}	

.medicol .product-info dt {
	font-weight: bold;
	background: url("../img/list-medi.png") no-repeat left center;
	padding-left: 25px;
	font-size: 110%;
}	
.minicol .product-info dt {
	font-weight: bold;
	background: url("../img/list-mini.png") no-repeat left center;
	padding-left: 25px;
	font-size: 110%;
}	

.exsmcol .product-info dt {
	font-weight: bold;
	background: url("../img/list-exsm.png") no-repeat left center;
	padding-left: 25px;
	font-size: 110%;
}	

/*--- 色分けリスト --*/
	
/* tab & panel colour */

.MAXI,
.MAXI:hover,
.MAXI:focus {
	background-color: #eaedf7;
	}
.MEDI,
.MEDI:hover,
.MEDI:focus  {
	background-color:#f4b3c2;
	}
.MINI,
.MINI:hover,
.MINI:focus  {
	background-color: #e0ebaf;
	}
.EXSM,
.EXSM:hover,
.EXSM:focus  {
	background-color: #f2f2b0;
	}
/* 
Section styling (required)
Removes hidden sections from the keychain. 
Only used when JavaScript is available.
*/
[role="tabpanel"][aria-hidden="true"] {
  display: none;
}	



/*---- */
.tab-001 {
    display: flex;
    flex-wrap: wrap;
	width: 100%;
	margin: 0;
	padding: 0;
}

.tab-001 > label {
    flex: 1 1;
    order: -1;
    position: relative;
    min-width: 70px;
    padding: .7em 1em;
    background-color: #EFEFEF;
    color: #373737;

    text-align: center;
    cursor: pointer;
}

/* ▼ スマホ用 ▼*/
@media screen and (max-width: 451px) {
label.tab-maxi,label.tab-medi,label.tab-mini,label.tab-exsm,
ul.tlchild a
	{
	font-size: 81%;
		line-height: 1em;
	}

.tab-001 h2 {
		font-weight: bold;
	}
.product-image,.product-info,.product-wrap {
    float:none;
	width: 100%;
	display: block;
	margin: 0;
	padding: 0;
}
.product-image{
	width: 50%;
	margin: 0 auto;
	}

.tlchild li {
	margin: 0 5px 10px 0 ;
  width : calc(100% / 3.2);
	display: inline-block;
	}
.tlchild { /* ボタンの高さをそろえる */
  display: flex;
  align-items: stretch!important;	
	}

}
/* ▲ スマホ用 ▲*/
/*--- タブの基本色 --*/
.tab-001 > label,
.tab-001 > label:hover,
.tab-001 label:has(:checked) {
    background-color: #1E50A2;
    color: #fff;
}
/*--- タブの基本色 --*/
/*--- タブの吹き出し --*/
.tab-001 label:has(:checked)::before {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 9px;
	background-color: #1E50A2; 
    content: '';
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
/*--- タブの吹き出し --*/
/*--- 色分けタブ --*/
label.tab-maxi,
label.tab-maxi:hover,
label.tab-maxi:has(:checked) {
    background-color: #1E50A2;
}
label.tab-maxi:has(:checked)::before {
    background-color: #1E50A2;
}
/*-----*/
label.tab-medi,
label.tab-medi:hover,
label.tab-medi:has(:checked) {
    background-color: #E30013;
}
label.tab-medi:has(:checked)::before {
    background-color: #E30013;
}
/*-----*/
label.tab-mini,
label.tab-mini:hover,
label.tab-mini:has(:checked) {
    background-color: #008000;
}
label.tab-mini:has(:checked)::before {
    background-color: #008000;
}
/*-----*/
label.tab-exsm,
label.tab-exsm:hover,
label.tab-exsm:has(:checked) {
    background-color: #ABC302;
}
label.tab-exsm:has(:checked)::before {
    background-color: #ABC302;
}
/*--- 色分けタブ --*/

.tab-001 input {
    display: none;
}

.tab-001 > div {
    display: none;
    width: 100%;
    padding: 1.5em 1em;
}

.tab-001 label:has(:checked) + div {
    display: block;
}

.tab-001-bg {
	background-color: #FAFAFA;
}