@charset "utf-8";


/* 🥺 [TOP] Fresh Nav  */
.nav--fresh{
	color: #0099ce;
}
.nav--fresh .nav__item{
	flex: 1 1 0%;
}



/* 🥺 [TOP] Message List */
.message-list{
	font-size: 1.25em;
	border: .625em solid #eee;
	
	list-style: none;
	margin: 0;
	padding: 1em 1.5em;
}
.message-list__item:not(:last-child){
	margin-bottom: .25em;
}



/* 🥺 [TOP] Wish List 1 */
.wish-list1{
	border: .625em solid #eee;
	list-style: none;
	margin: 0;
	padding: 1em 1.5em;
	/*counter-reset: i;*/
}
.wish-list1__item{
	font-size: 1.25em;
	text-align: center;
	/*line-height: 1.33;
	display: flex;
	counter-increment: i;*/
}
/*.wish-list1__item:before{
	content: counter(i);
	
	line-height: 1;
	
	color: #fff;
	background: #0099ce;
	
	width: 1em;
	height: 1em;
	
	display: flex;
	align-items: center;
	justify-content: center;
	
	margin: 0 .5em 0;
	padding: .3125em;
}*/

/*@media (min-width: 769px){
	.wish-list1{
		display: flex;
		flex-wrap: wrap;
		margin: 0 0 0 -3.33%;
	}
	.wish-list1__item{
		box-sizing: border-box;
		flex: 0 0 30%;
		margin: 0 0 .5em 3.33%;
	}
}
@media (max-width: 768px){
	.wish-list1__item:not(:last-child){
		margin-bottom: .5em;
	}
}*/






/* 🥺 Wish List 2 */
.wish-list2{
	font-size: 1.25em;
	border: 1px solid;
	
	list-style: none;
	margin: 0;
	padding: 1.5em 2em;
}
.wish-list2__item:not(:last-child){
	margin-bottom: .25em;
}






/* 🥺 Faq Index */
.faq-index{
	margin: 3em 0;
}
.faq-index__items{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	
	list-style: none;
	margin: 0 0 0 -3.75em;
	padding: 0;
}
.faq-index__item{
	margin: 0 0 0 3.75em;
}
.faq-index__more{
	font-size: 1.25em;
	font-weight: bold;
	
	text-decoration: inherit;
	color: inherit;
}
.faq-index__more:hover{
	text-decoration: underline;
}



/* 🥺 Faq Category */
.faq-cate{
	border-bottom: 1px solid;
	margin: 3em 0;
}
.faq-cate__title{
	line-height: 1.33;
	font-size: 1.25em;
	
	margin: 0 0 1em;
}



/* 🥺 Faq Contents */
.faq{
	border-style: solid;
	border-width: 1px 1px 0 1px;
}
.faq__state{
	position: fixed;
	left: -100vw;
}
.faq__question,
.faq__answer{
	position: relative;
	z-index: 0;
}
.faq__question:before,
.faq__answer:before{
	line-height: 1;
	font-size: 1.625rem;
	text-align: center;
	font-weight: bold;
	color: #0099ce;
	
	position: absolute;
	left: .7em;
	
	width: 1em;
}
.faq__question:before{
	content: "Q";
	top: .5em;
}
.faq__answer:before{
	content: "A";
	top: .75em;
}
.faq__question{
	font-size: 1em;
	font-weight: normal;
	background: #cceaf5;
	
	position: relative;
	z-index: 0;
	
	margin: 0;
	padding: .5em 2em .5em 3.75rem;
}
.faq__question:after{
	content: "";
	
	display: block;
	
	position: absolute;
	top: 0;
	right: 1em;
	bottom: 0;
	
	width: .875em;
	height: .875em;
	margin: auto 0;
	
	border-style: solid;
	border-width: 2px 2px 0 0;
}
.faq__answer{
	border-top: 1px solid;
	padding: 1em 1em 1em 3.75rem;
	
	animation: fadein 300ms ease-out;
}
.faq__note{
	margin: 0;
}

.faq__state:not(:checked) ~ .faq__answer{
	display: none;
}
.faq__state ~ .faq__question{
	cursor: pointer;
}
.faq__state:checked ~ .faq__question:after{
	transform: translateY(33.33%) rotate(-45deg);
}
.faq__state:not(:checked) ~ .faq__question:after{
	transform: translateY(-33.33%) rotate(135deg);
}






/* 🥺 Guideline */
.guideline,
.guideline__tbody,
.guideline__track,
.guideline__head,
.guideline__body{
	display: block;
}
.guideline__head,
.guideline__body{
	border: solid;
	border-width: 0 1px 1px 1px;
	padding: .75em 1.5em;
}
.guideline{
	border-top: 1px solid;
}
.guideline__head{
	font-weight: normal;
	text-align: left;
	background: #cceaf5;
}
@media (min-width: 769px){
	.guideline{
		font-size: 1.125em;
	}
}
@media (max-width: 768px){
	.guideline__body{
		line-height: 1.75;
		font-size: .875em;
	}
}



.table-plain{
	border-collapse: collapse;
}
.table-plain__head{
	font-weight: normal;
	text-align: left;
	padding-right: 2em;
}
.table-plain__head2{
	font-weight: normal;
	padding: 0 .5em;
}

@media (max-width: 768px){
	.table-plain tr:not(:last-child) .table-plain__head,
	.table-plain tr:not(:last-child) .table-plain__head2,
	.table-plain tr:not(:last-child) .table-plain__body{
		padding-bottom: .5em;
	}
}



.nav--employ{
	color: #f00;
}
.nav--employ > .nav__item{
	min-width: 20%;
}






/* 🥺 [flow] List */
.flow-list{
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}
.flow-list:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 15px;
  bottom: 65px;
  border-style: solid;
  border-width: 0 1px;
  border-color: #0099ce;
}
.flow-list__item{
	margin: 6.25em 0;
	padding: 0 0 0 3.75em;
	position: relative;
	z-index: 0;
}
.flow-list__item:not(:last-child):before{
	content: "";
	display: block;
}

@media (min-width: 769px){
	.flow-list__item:before{
		position: absolute;
		z-index: -1;
		top: 75%;
		bottom: -6.25em;
	}
/*	.flow-list__item:nth-child(odd):before{
		left: 40%;
		right: 30%;
		background: linear-gradient(to left bottom, transparent 49.8%, #7fcce6 50%, #7fcce6 50.2%, transparent 50.4% );
	}
	.flow-list__item:nth-child(even):before{
		left: 30%;
		right: 40%;
		background: linear-gradient(to right bottom, transparent 49.8%, #7fcce6 50%, #7fcce6 50.2%, transparent 50.4% );
	}*/
}

@media (max-width: 768px){
	.flow-list:before {
	  bottom: 110px;
	}
}



/* 🥺 [flow] Grid */
@media (min-width: 769px){
	.flow-grid{
		display: flex;
		align-items: center;
	}
	.flow-grid__image{
		flex: 0 0 40%;
	}
	.flow-grid__body{
		flex: 1 1 auto;
	}
	.flow-list__item:nth-child(odd) .flow-grid__image,
	.flow-list__item:nth-child(even) .flow-grid__body{
		order: -1;
		margin-right: 3.75em;
	}
}
@media (max-width: 768px){
	.flow-grid__image{
		margin: 0 -5.55% 1.875em;
	}
	.flow-grid__body{
		position: relative;
		z-index: 0;
	}
	.flow-grid__body:before{
		content: "";
		display: block;
		position: absolute;
		z-index: -1;
		top: -1.875em;
		left: 10%;
		right: 10%;
		bottom: -6.25em;
	}
/*	.flow-list__item:nth-child(odd) .flow-grid__body:before{
		background: linear-gradient(to right bottom, transparent 49.8%, #7fcce6 50%, #7fcce6 50.2%, transparent 50.4% );
	}
	.flow-list__item:nth-child(even) .flow-grid__body:before{
		background: linear-gradient(to left bottom, transparent 49.8%, #7fcce6 50%, #7fcce6 50.2%, transparent 50.4% );
	}*/
}



/* 🥺 [flow] Parts */
.flow__photo{
	width: 100%;
}
.flow__title{
	line-height: 1.33;
	font-size: 1.5em;
	font-weight: bold;
	
	color: #fff;
	background: #0099ce;
	
	display: table;
	position: relative;
	z-index: 0;
	
	margin: 0 0 1rem;
	padding: .5em 1em;
}
.flow__title:after,
.flow__title:before{
	content: "";
	display: block;
	position: absolute;
}
.flow__title:before{
  border-style: solid;
  border-width: 1px 0;
  border-color: #0099ce;
}
.flow__title:after{
	font-size: .75em;
	background: #0099ce;
	border: .5em solid #fff;
	border-radius: 99rem;
	box-shadow: 0 0 0 2px #0099ce;
	width: 1em;
	height: 1em;
}
.flow__note{
	font-size: 1.125em;
	margin: 1em 0;
}
.flow__nav{
	display: table;
	min-width: 40%;
}
.button--flow{
	font-size: 1.125em;
	font-weight: bold;
	
	color: #fff;
	background: #f00;
	
	padding: 1.33em calc(1.33em * 2.5) 1.33em 1.33em;
}
.button--flow:hover{
	opacity: .78;
}
.button--flow:after{
	content: "》";
	margin-right: -.5em;
	
	display: flex;
	align-items: center;
	position: absolute;
	top: 0;
	right: 1.33em;
	bottom: 0;
}

@media (min-width: 769px){
	.flow__title:after,
	.flow__title:before{
		top: 0;
		bottom: 0;
		margin: auto 0;
	}
	.flow__title:before{
		height: 0;
		border-width: 1px 0;
	}
/*	.flow-list__item:nth-child(even) .flow__title,
	.flow-list__item:nth-child(even) .flow__nav{
		margin-left: auto;
	}*/
/*	.flow-list__item:nth-child(even) .flow__note{
		display: table;
		margin-left: auto;
	}*/
	
	.flow-list__item .flow__title:after{
		left: -3.75rem;
		transform: translateX(-50%);
	}
	.flow-list__item .flow__title:before{
		left: -3.75rem;
		right: 100%;
	}

}
@media (max-width: 768px){
	.flow__title:after{
    left: -14vw;
    bottom: 42%;
		transform: translateX(-50%);
	}
	.flow__title:before{
    left: -14vw;
    right: 100%;
    height: 0;
    margin: auto 0;
	}
}






/* 🥺 [flow] Contact */
.flow-contact{
	font-style: normal;
	
	background: #e5f5fa;
	padding: 3.75em 0;
}
.flow-contact__title{
	line-height: 1.33;
	font-size: 1em;
	font-weight: normal;
	margin: 0;
}
.flow-contact__body{
	line-height: 2.25;
	font-size: .875em;
}

@media (min-width: 769px){
	.flow-contact__grid{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.flow-contact__title,
	.flow-contact__body{
		flex: 0 0 auto;
	}
	.flow-contact__body{
		margin-left: 5em;
	}
}