@charset "utf-8";

/*----------------------------------------------------------------
 for cashmere.html
----------------------------------------------------------------*/

/*----------------------------------------------------------------
 mainview
----------------------------------------------------------------*/
#mainview h1{ background-image: url(../images/main-image.jpg); }

/*----------------------------------------------------------------
 main
----------------------------------------------------------------*/
#main h2{ margin: 0 0 30px 0; }

/*----------------------------------------------------------------
 outline
----------------------------------------------------------------*/
#outline{}

/*----------------------------------------------------------------
 patternorder
----------------------------------------------------------------*/
#patternorder .container	{ padding-bottom: 1px; }
@media screen and (min-width: 768px) {
#patternorder .container	{ padding-bottom: 60px; }
}

/*----------------------------------------------------------------
 fullorder
----------------------------------------------------------------*/
#fullorder{}
@media screen and (min-width: 768px) {
#fullorder .container{ padding-bottom: 90px; }
}
@media screen and (min-width: 768px) {
#fullorder .row{ margin-bottom: 70px; }
}

/* order-plan
-----------------------------------------------------*/
#fullorder .order-plan{ margin: 5px 0 55px 0; }
#fullorder .order-plan h3{ margin: 0 0 15px 0; }
@media screen and (min-width: 768px) {
#fullorder .order-plan p{ text-align: center; }
#fullorder .order-plan.ageless{ margin: 5px 0 70px 0; }
}

/* example
---------------------------------*/
#fullorder .order-plan .example>p[class*="image"] img{ border-radius: 50%; }

@media screen and (max-width: 767px) {
#fullorder .order-plan .example{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: row;
	flex-wrap			: wrap;
	align-items			: center;
}
#fullorder .order-plan .example>h4,
#fullorder .order-plan .example>p[class*="image"] {
	margin				: 0;
	width				: 50%;
	text-align			: center;
}
#fullorder .order-plan .example .text{
	margin				: 20px 0 0 0;
	width				: 100%;
}
}

@media screen and (min-width: 768px) {
#fullorder .order-plan .example{
	position			: relative;
	margin				: 60px 0 80px 0;
	padding				: 0 0 0 400px;
}
#fullorder .order-plan .example>h4{
	margin				: 15px 0 0 0;
	font-weight			: bold;
}
#fullorder .order-plan .example>p[class*="image"] {
	position			: absolute;
	top					: 0;
}
#fullorder .order-plan .example>p.image01{ left: 0px; }
#fullorder .order-plan .example>p.image02{ left: 185px; }
#fullorder .order-plan .example .text{
	margin				: 0;
	text-align			: left;
}
}

/*----------------------------------------------------------------
 about
----------------------------------------------------------------*/
#about .container{ padding-bottom: 10px; }

#about h3{
	position			: relative;
	display				: inline-block;
	margin				: 30px 0 20px 0;
	border-bottom		: 1px solid #666;
	padding				: 0 0 10px 0;
}
#about h3:first-of-type{ margin: 0 0 20px 0; }
#about h3:before{
	content				: "";
	position			: absolute;
	bottom				: -1px;
	display				: block;
	width				: calc(100vw - 40px);
	height				: 1px;
	background			: rgba(0,0,0,0.2);
	mix-blend-mode		: multiply;
}
#about .row > .col:last-child{ margin-bottom: 0; }
@media screen and (min-width: 768px) {
#about h3{ margin: 0 0 20px 0; }
#about h3:before{ width: 760px; }
#about .row{ margin-bottom: 30px; }
}
/*----------------------------------------------------------------
 colors
----------------------------------------------------------------*/
#colors{}
#colors h2+h3	{ margin: -35px 0 30px 0; }
#colors h3+p	{ margin-bottom: 10px; }