@charset "utf-8";
/* ===================================================================

 file name  :jubako > concept.css
 style info :ジュウバココンセプトページ

=================================================================== */

/* =============================

	overwrite

=============================== */



/* =================================== */
#main .tab-link{
	width: 92.25%;
	margin: 0 auto;
}
#main .tab-link li{
	width: 32.5203252032%;
	float: left;
	text-align: center;
	position: relative;
	transition:all ease 0.3s;
}
#main .tab-link.upper li{
	border-bottom: none !important;
}
#main .tab-link.under li{
	border-top: none !important;
}
#main .tab-link li + li{
	margin: 0 0 0 1.22%;
}
#main .tab-link li:nth-child(1){ border:solid 5px #f19dae; background: #f19dae url(../../images/jubako/concept/txt_tab01_ov.png) no-repeat 50% 22px;}
#main .tab-link li:nth-child(2){ border:solid 5px #72c3a1; background: #72c3a1 url(../../images/jubako/concept/txt_tab02_ov.png) no-repeat 50% 22px;}
#main .tab-link li:nth-child(3){ border:solid 5px #8fcfe9; background: #8fcfe9 url(../../images/jubako/concept/txt_tab03_ov.png) no-repeat 50% 22px;}

#main .tab-link li::before{
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	opacity: 0;
	transition:all ease 0.3s;
}
#main .tab-link.upper li::before{
	border-width: 15px 11px 0 11px;
	bottom: 0;
}
#main .tab-link.under li::before{
	border-width: 0 11px 15px 11px;
	top: 0;
}
#main .tab-link.upper li:nth-child(1)::before{ border-color: #f19dae transparent transparent transparent;}
#main .tab-link.upper li:nth-child(2)::before{ border-color: #72c3a1 transparent transparent transparent;}
#main .tab-link.upper li:nth-child(3)::before{ border-color: #8fcfe9 transparent transparent transparent;}

#main .tab-link.under li:nth-child(1)::before{ border-color: transparent transparent #f19dae transparent;}
#main .tab-link.under li:nth-child(2)::before{ border-color: transparent transparent #72c3a1 transparent;}
#main .tab-link.under li:nth-child(3)::before{ border-color: transparent transparent #8fcfe9 transparent;}

#main .tab-link li a{
	display: block;
	height: 70px;
	padding: 22px 0 0;
}
#main .tab-link li img{
	vertical-align: middle;
}
#main .tab-link li:hover,
#main .tab-link li.active{
	cursor: pointer;
	background-color: #fff;
}
#main .tab-link li:hover img,
#main .tab-link li.active img{
	opacity: 0;
}
#main .tab-link.upper li:hover::before,
#main .tab-link.upper li.active::before{
	opacity: 1;
	bottom: -12px;
}
#main .tab-link.under li:hover::before,
#main .tab-link.under li.active::before{
	opacity: 1;
	top: -12px;
}

#main .tabContent img{
	width: 100%;
	height: auto;
}


/* ==========================================================================
   smartPhone
   ========================================================================== */
@media screen and (max-width: 640px){
	/* =============================
	
		overwrite
	
	=============================== */
	
	
	/* =================================== */
	#main .tab-link{
		width: 100%;
		margin: 0 auto;
	}
	#main .tab-link li{
		width: 32.5203252032%;
		float: left;
		text-align: center;
		position: relative;
		transition:all ease 0.3s;
		background-size: auto 10px !important;
	}
	#main .tab-link li + li{
		margin: 0 0 0 1.22%;
	}
	#main .tab-link li:nth-child(1){ border:solid 2px #f19dae; background: #f19dae url(../../images/jubako/concept/txt_tab01_ov.png) no-repeat 50% 22px;}
	#main .tab-link li:nth-child(2){ border:solid 2px #72c3a1; background: #72c3a1 url(../../images/jubako/concept/txt_tab02_ov.png) no-repeat 50% 22px;}
	#main .tab-link li:nth-child(3){ border:solid 2px #8fcfe9; background: #8fcfe9 url(../../images/jubako/concept/txt_tab03_ov.png) no-repeat 50% 22px;}
	#main .tab-link li:nth-child(1):not(.active):hover{ background-color: #f19dae;}
	#main .tab-link li:nth-child(2):not(.active):hover{ background-color: #72c3a1;}
	#main .tab-link li:nth-child(3):not(.active):hover{ background-color: #8fcfe9;}
	#main .tab-link li.active{
		background-color: #fff;
	}
	#main .tab-link.upper li::before{
		border-width: 10px 8px 0 8px;
		bottom: 0;
	}
	#main .tab-link.under li::before{
		border-width: 0 8px 10px 8px;
		top: 0;
	}
	
	#main .tab-link li a{
		height: 55px;
		padding: 18px 0 0;
	}
	
	#main .tab-link li img{
		width: auto;
		height: 10px;
	}
	#main .tab-link li:not(.active):hover img{
		opacity: 1;
	}
	#main .tab-link.upper li:not(.active):hover::before{
		opacity: 0;
		bottom: 0;
	}
	#main .tab-link.under li:not(.active):hover::before{
		opacity: 0;
		top: 0;
	}
	#main .tab-link li.active::before{
		bottom: -8px;
	}
	
	
	
}