@charset "utf-8";





/* 🥺 [TOP] About Nav */
.about-nav__items{
	list-style: none;
	margin: 0;
	padding: 0;
}
.about-nav__item{
	
}
.about-nav__more{
	color: inherit;
	text-decoration: inherit;
}
.about-nav__more:hover{
	opacity: .78;
}
.about-nav__head{
	font-size: 1em;
	font-weight: normal;
	color: #fff;
	
	position: relative;
	z-index: 0;
	
	margin: 0;
}
.about-nav__head:before{
	content: "";
	display: block;
	
	position: absolute;
	z-index: ;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,153,206,.5);
}
.about-nav__title{
	font-size: 1.5em;
	font-weight: bold;
	text-align: center;
	
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.about-nav__title:after{
	content: "▼";
	line-height: 1;
	font-size: .625em;
	display: block;
}
.about-nav__bg{
	margin-bottom: 1em;
}
.about-nav__photo{
	width: 100%;
}
.about-nav__note{
	font-size: 1.125em;
	text-align: center;
	margin: 0;
}

@media (min-width: 769px){
	.about-nav__items{
		display: flex;
		flex-wrap: wrap;
		margin: 0 0 0 -3.33%;
	}
	.about-nav__item{
		box-sizing: border-box;
		flex: 0 0 30%;
		margin: 0 0 0 3.33%;
	}
}
@media (max-width: 768px){
	.about-nav__item:not(:last-child){
		margin-bottom: 3em;
	}
}






/* 🥺 Product */
.title-stroke2--product{
	color: #888;
}






/* 🥺 Product Description Grid */
.description-grid__body > p:first-child{
	margin-top: 0;
}
.description-grid__image{
	text-align: center;
}
.product-desc__photo{
	max-width: 100%;
}
@media (min-width: 769px){
	.description-grid{
		display: flex;
	}
	.description-grid__image,
	.description-grid__body{
		box-sizing: border-box;
	}
	.description-grid__image{
		order: 1;
		flex: 0 0 auto;
		max-width: 40%;;
		margin-left: 2%;
	}
	.description-grid__body{
		flex: 1 1 auto;
	}
}
@media (max-width: 768px){
	.description-grid__image{
		margin-bottom: 1.5em;
	}
}






/* 🥺 Prodoct List */
.product-list{
	list-style: none;
	margin: 0;
	padding: 0;
}
.product-list__thumb{
	margin: 0 0 .5em;
}
.product-list__photo{
	width: 100%;
	
}
.product-list__name{
	line-height: 1.33;
	font-weight: normal;
	text-align: center;
	margin: .5em 0;
}
.product-list__note{
	margin: .5em 0;
}

@media (min-width: 769px){
	.product-list{
		display: flex;
		margin: 0 0 0 -2%;
	}
	.product-list__item{
		flex: 1 1 0%;
		margin: 0 0 0 2%;
	}
}
@media (max-width: 768px){
	.product-list{
		display: flex;
		flex-wrap: wrap;
		margin: 0 0 0 -5%;
	}
	.product-list__item{
		flex: 0 0 45%;
		margin: 0 0 0 5%;
	}
}






/* Familiar Nav */
.familiar-nav__items{
	list-style: none;
	margin: 0;
	padding: 0;
}
.familiar-nav__item{
	display: flex;
}
.familiar-nav__button{
	line-height: 1.33;
	font-size: 1.5em;
	font-weight: bold;
	text-align: center;
	text-decoration: inherit;
	color: #fff;
	background: #0099ce;
	
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow:
		inset 0 0 0 4px #0099ce,
		inset 0 0 0 6px #fff;
	
	position: relative;
	z-index: 0;
	
	padding: 1.5em 1.5em 2em;
	
	/* for IE */
	width: 100%;
	/* for IE */
}
.familiar-nav__button:hover{
	opacity: .78;
}
.familiar-nav__button:after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: .5em;
	width: 0;
	height: 0;
	margin: 0 auto;
	
	border-style: solid;
	border-width: .4em .225em 0;
	border-color: currentcolor transparent;
}

@media (min-width: 769px){
	.familiar-nav__items{
		display: flex;
	}
	.familiar-nav__item{
		box-sizing: border-box;
		flex: 1 1 0%;
	}
	.familiar-nav__item:not(:first-child){
		margin-left: 2%;
	}
}
@media (max-width: 768px){
	.familiar-nav__item:not(:last-child){
		margin-bottom: .5em;
	}
}






/* Familiar */
.familiar{
	border: 4px solid #0099ce;
	padding: 0 2.5em 2.5em;
}
.title-icon1--familiar{
	border-width: 0 0 4px 0;
	margin: 0 -2.5em 2.5em;
}

@media (max-width: 768px){
	.familiar{
		border: 4px solid #0099ce;
		padding: 0 1.25em 1.25em;
	}
	.title-icon1--familiar{
		border-width: 0 0 4px 0;
		margin: 0 -1.25em 1.25em;
	}
	.title-icon1--familiar .title-icon1__img{
		max-width: 10px;
	}
}






/* Familiar Hint */
.familiar-hint__img{
	max-width: 100%;
}
.familiar-hint__number{
	line-height: 1;
	font-size: 3.75em;
	font-family: "Haettenschweiler", "Impact";
	
	position: absolute;
	top: 0;
	
	margin: 0;
}
.familiar-hint__title{
	margin: 0;
}
.familiar-hint__note{
	margin: 0;
}
.familiar-hint__offer{
	margin: 0;
}

@media (max-width: 768px){
	.familiar-hint__number{
		font-size: 2.8125em;
	}
	.familiar-hint__img{
		max-width: 80%;
	}
}



.familiar-hint-grid__image{
	text-align: center;
}
.familiar-hint-grid__body{
	color: #fff;
	background: #0099ce;
	
	box-sizing: border-box;
	position: relative;
	z-index: -1;
}

@media (min-width: 769px){
	.familiar-hint-grid{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.familiar-hint-grid__image,
	.familiar-hint-grid__body{
		flex: 0 1 auto;
	}
	.familiar-hint-grid__image{
		z-index: 0;
		max-width: calc(60% + 3.75em);
	}
	.familiar-hint-grid__body{
		max-width: 40%;
		margin: 0;
		padding: 3.75em;
	}
	.familiar-hint-grid--odd .familiar-hint-grid__body{
		margin-left: -3.75em;
		padding-left: 5.625em;
	}
	.familiar-hint-grid--even .familiar-hint-grid__body{
		order: -1;
		margin-right: -3.75em;
		padding-right: 5.625em;
	}
	.familiar-hint-grid--odd .familiar-hint__number{
		right: .25em;
	}
	.familiar-hint-grid--even .familiar-hint__number{
		left: .25em;
	}
}
@media (max-width: 768px){
	.familiar-hint-grid__image{
		margin-bottom: 1em;
	}
	.familiar-hint-grid__body{
		padding: 2em;
	}
	.familiar-hint__number{
		left: .125em;
	}
}






/* Familiar Separate */
.familiar-separate1{
	position: relative;
	z-index: 0;
	border: 0;
	height: 3.25em;
	margin: 4.375em 0;
}
.familiar-separate1:after,
.familiar-separate1:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background: #0099ce;
}
.familiar-separate1:after{
	width: .6875em;
	height: 3.25em;
}
.familiar-separate1:before{
	width: 3.25em;
	height: .6875em;
}


.familiar-separate2{
	height: 3.25em;
	display: flex;
	justify-content: center;
	
	border: 0;
	margin: 4.375em 0;
}
.familiar-separate2:after,
.familiar-separate2:before{
	content: "";
	flex: 0 0 1.25em;
	background: repeating-linear-gradient( transparent, #0099ce .0625em, #0099ce .455em, transparent .5175em, transparent .65em );
}
.familiar-separate2:before	{ transform: skewY(22.5deg); margin-right: -.25px; }
.familiar-separate2:after	{ transform: skewY(-22.5deg); margin-left: -.25px; }







/* Familia Answer */
.familiar-answer{
	text-align: center;
	margin-bottom: 3.25em;
}
.familiar-answer__image{
	max-width: 100%;
	margin: 0 0 1.25em;
}
.familiar-answer__name{
	line-height: 1.33;
	font-size: 1.625em;
	font-weight: bold;
	
	color: #0099ce;
	
	margin: 0;
}


.familiar-answer__fig{
	margin: 0 0 1.25em 0;
}
.familiar-answer__figimage{
	max-width: 100%;
}
.familiar-answer__figcaption{
	
}







/* Familia Description */
.familiar-desc{
	color: #fff;
	background: #0099ce;
	
	padding: 2.5em;
}
.familiar-desc__title{
	line-height: 1.33;
	font-size: 1.75em;
	font-weight: bold;
	text-align: center;
	
	color: #0099ce;
	background: #fff;
	
	margin: 0 0 .75em;
	padding: .33em;
}
.familiar-desc__note{
	margin: 0;
}
.familiar-desc__note + .familiar-desc__note{
	margin-top: 1em;
}

.familiar-desc__link{
	color: inherit;
}

@media (max-width: 768px){
	.familiar-desc{
		padding: 1.25em;
	}
	.familiar-desc__title{
		margin: 0 0 .666em;
	}
}






/* 🥺 [WORK] */
.g-work .note--lv1{
	font-size: 1.125em;
}





/* 🥺 [WORK] Policy  */
.work-policy{
	position: relative;
	z-index: 0;
	
	margin: 0;
	padding: 0 0 2.5em;
}
.work-policy:before{
	content: "";
	display: block;
	
	position: absolute;
	z-index: -1;
	top: 3.33em;
	left: 0;
	right: 0;
	bottom: 0;
	width: 5em;
	margin: auto;
	
	background-color: #eee;
	background-image:
		linear-gradient(to right top, #fff 50%, transparent 50%),
		linear-gradient(to left top, #fff 50%, transparent 50%);
	background-size:
		2.5em 2.5em,
		2.5em 2.5em;
	background-repeat: no-repeat;
	background-position: left bottom, right bottom;
}
.work-policy__title,
.work-policy__end{
	font-size: 1.5em;
	font-weight: normal;
	margin: .25em 0;
}
.work-policy__end{
	text-align: right;
	margin: 0;
}



/* 🥺 [WORK] Policy Notes */
.policy-notes{
	line-height: 1.33;
	font-size: 1.875em;
	text-align: center;
}
.policy-notes__kw{
	font-size: 1.2em;
	font-weight: bold;
	color: #0099ce;
}




/* 🥺 [WORK] Policy List  */
.policy-list{
	list-style: none;
	margin: 0;
	padding: 0;
	
	display: flex;
	
	position: relative;
	z-index: 0;
}
.policy-list__item{
	line-height: 1.33;
	font-size: 1.25em;
	text-align: center;
	color: #fff;
	
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	
	position: relative;
	z-index: 0;
	
	padding: 1.5em 1em;
}
.policy-list__item:before{
	content: "";
	display: block;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transform: skewX(-12deg);
}
.policy-list__item--goal:before		{ background: #f39800; }
.policy-list__item--skill:before	{ background: #35b597; }
.policy-list__item--service:before	{ background: #54c3f1; }

@media (min-width: 769px){
	.policy-list__item{
		flex: 1 1 0%;
	}
	.policy-list__item:not(:first-child){
		margin-left: 1em;
	}
}
@media (max-width: 768px){
	.policy-list{
		flex-wrap: wrap;
		margin: 0 0 -5% -5%;
	}
	.policy-list__item{
		flex: 1 1 45%;
		margin: 0 0 5% 5%;
	}
	.policy-list__item--service{
		flex: 1 1 100%;
	}
}






/* 🥺 [WORK] Route */
.work-route{
	margin: 1.875em 0;
}
.work-route__figure{
	width: 100%;
}




/* 🥺 [WORK] Work List */
.work-list{
	border: .625em solid #ddd;
	margin: 1.875em 0;
	padding: 3%;
}
.work-list__items{
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}
.work-list__thumb{
	margin-bottom: .5em;
}
.work-list__photo{
	width: 100%;
	border-radius: 99em;
}
.work-list__name{
	line-height: 1.33;
	font-size: 1.125em;
	font-weight: normal;
	text-align: center;
	
	margin: 0;
}

@media (min-width: 769px){
	.work-list__items{
		margin: 0 0 0 -1.5%;
	}
	.work-list__item{
		flex: 1 1 0%;
		margin: 0 0 0 1.5%;
	}
}
@media (max-width: 768px){
	.work-list__items{
		flex-wrap: wrap;
		margin: 0 0 -3.33% -3.33%;
	}
	.work-list__item{
		flex: 0 0 30%;
		margin: 0 0 3.33% 3.33%;
	}
}