@charset "utf-8";
/*====================================================================
 motion
====================================================================*/
header{
	top: 0;
	left: -100%;
	opacity: 0;
}
.header_fadein {
	animation: header_fadein 0.4s ease 0s forwards;
	opacity: 0;
	left: -100%;
}
@keyframes header_fadein {
	0% {
		opacity: 0;
		left: -100%;
	}
	0% {
		opacity: 0;
		left: 0;
	}
	100% {
		opacity: 1;
		left: 0;
	}
}
.header_fadeout {
	animation: header_fadeout 0.4s ease 0s forwards;
	opacity: 1;
	left: 0;
}
@keyframes header_fadeout {
	0% {
		opacity: 1;
		left: 0;
	}
	99% {
		opacity: 0;
		left: 0;
	}
	100% {
		opacity: 0;
		left: -100%;
	}
}	


@keyframes fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes bg_fadeout {
	0% {
		opacity: 1;
		left: 0;
	}
	99% {
		opacity: 0;
		left: 0;
	}
	100%{
		opacity: 0;
		left: -100%;
	}
}

#bg_motion{
	content:"";
	width: 100%;
	height: 100%;
	z-index: 9999;
	position: fixed;
	left: 0;
	top: 0;
	background: #fff;
	opacity: 1;
	animation: bg_fadeout 1s ease 0.5s forwards;
    -webkit-animation: bg_fadeout 1s ease 0.5s forwards;
}
/*============================
         mainvisual
============================*/
#mainvisual{
	min-height: 480px;
	height: 100vh;
}
#mainvisual #head_main{
	width: 100%;
	height: 110px;
	background: #FAF9F8;
	text-align: center;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
}
#mainvisual #head_main .logo{
	padding: 28px 0;
	display: inline-block;
	text-align: center;
	font-size: 14px;
	color: #552126;
}
#mainvisual #head_main .logo svg{
	display: block;
	margin: 0 auto 10px;
	fill: #552126;
}
#mainvisual #nav_main{
	width: 100%;
	height: 80px;
	background: #3F1A18;
	text-align: center;
	padding: 20px 0;
	position: absolute;
	left: 0;
	bottom: 0;
}

#mainvisual #nav_main ul {
	display: inline-block;
	margin: 0 auto;
}
#mainvisual #nav_main ul li{
	display: inline-block;
	float: left;
	margin: 0 21px;
}
#mainvisual #nav_main ul li a{
	font-size: 20px;
	color: #896062;
	transition: all .3s ease;
	letter-spacing: 0;
}
#mainvisual #nav_main ul li a:hover{
	color: #E6D2D7;
}
#mainvisual #nav_main ul li a span{
	font-size: 12px;
	color: #E6D2D7;
	display: block;
    margin-top: 5px;
}
#mainvisual .main_midashi_box{
	display: inline-block;
	position: absolute;
	left: 58px;
	bottom: 124px;
}
#mainvisual .main_midashi_box .main_midashi_en{
	font-size: 18px;
	margin-bottom: 10px;
	color: #fff;
}
#mainvisual .main_midashi_box .main_midashi_jp{
	font-size: 40px;
	color: #fff;
	letter-spacing: 2px;
}
#slider{
  	display: none;
}
#slider.slick-initialized{
 	display: block; 
}
#slider p{
	content:"";
	width: 100%;
	min-height: 480px;
	height: 100vh;
}
#slider p:nth-child(1){
	background: url("../images/top/main_slider_01.jpg") no-repeat center;
	background-size: cover;
}
#slider p:nth-child(2){
	background: url("../images/top/main_slider_02.jpg") no-repeat center;
	background-size: cover;
}
#slider p:nth-child(3){
	background: url("../images/top/main_slider_03.jpg") no-repeat center;
	background-size: cover;
}
#slider p:nth-child(4){
	background: url("../images/top/main_slider_04.jpg") no-repeat center;
	background-size: cover;
}
#slider p:nth-child(5){
	background: url("../images/top/main_slider_05.jpg") no-repeat center;
	background-size: cover;
}
/*============================
         concept
============================*/
#concept{
	padding: 90px 0 0;
	z-index: 5;
}
#concept .wrap{
	width: 1000px;
	padding-bottom: 22%;
}
@media screen and (max-width: 1439px) {
	#concept .wrap{
		padding-bottom: 318px;
	}
}
@media screen and (min-width: 1810px) {
	#concept .wrap{
		padding-bottom: 400px;
	}
}
#concept .midashi_box{
	margin: 17px 0 45px;
}
#concept h3{
	font-size: 22px;
	color: #552126;
	margin-bottom: 35px;
	padding-left: 8px;
}
#concept .textbox{
	width: 357px;
	padding-left: 8px;
    text-align: justify;
    text-justify: inter-ideograph;
	line-height: 2.3;
	margin-bottom: 48px;
}
#concept img{
	position: relative;
	display: block;
	z-index: 2;
	height: auto;
}
#concept .btn_normal{
	margin-left: 8px;
}
#concept .imgsec_1{
	position: absolute;
	width: 43%;
	max-width: 702px;
	min-width: 620px;
	height: 45.4vw;
	max-height: 740px;
	min-height: 654px;
	left: 45%;
	top: 90px;
	z-index: 6;
}
#concept .imgsec_2{
	position: absolute;
	width: 27vw;
	max-width: 443px;
	min-width: 390px;
	height: 21.8%;
	max-height: 740px;
	min-height: 315px;
	right: 60.4%;
	top: 588px;
	z-index: 6;
}
@media screen and (min-width: 1831px) {
	#concept .imgsec_2{
		right: 1106px;
	}
}
#concept .img_1{
    min-width: 560px;
	max-width: 634px;
    width: 38.8vw;
	margin-right: 0;
    margin-left: auto;
	margin-bottom: 4px;
}
#concept .img_2{
	float: left;
    min-width: 348px;
	max-width: 394px;
    width: 56.1%;
	margin-right: 4px;
    margin-left: 0;
}
#concept .img_3{
    min-width: 208px;
	max-width: 235px;
    width: 33.5%;
	float: left;
	margin-top: 60px;
}
#concept .img_4{
    min-width: 330px;
	max-width: 375px;
	width: 84.6%;
	margin-right: auto;
	margin-left: 0;
	margin-bottom: 4px;
}
#concept .img_5{
    min-width: 200px;
	max-width: 227px;
    width: 51.2%;
	margin-right: 0;
	margin-left: auto;
}



/*animation*/
#concept .wrap,
#concept .img_1,
#concept .img_2,
#concept .img_3,
#concept .img_4,
#concept .img_5{
	opacity: 0;
}
#concept.motion .wrap{
	animation: fadein 0.5s ease 0s forwards;
    -webkit-animation: fadein 0.5s ease 0s forwards;	
}
#concept.motion .img_1{
	animation: fadein 0.5s ease 0.25s forwards;
    -webkit-animation: fadein 0.5s ease 0.25s forwards;	
}
#concept.motion .img_2{
	animation: fadein 0.5s ease 0.5s forwards;
    -webkit-animation: fadein 0.5s ease 0.5s forwards;	
}
#concept.motion .img_3{
	animation: fadein 0.5s ease 0.75s forwards;
    -webkit-animation: fadein 0.5s ease 0.75s forwards;	
}
#concept.motion .img_4{
	animation: fadein 0.5s ease 0.9s forwards;
    -webkit-animation: fadein 0.5s ease 0.9s forwards;	
}
#concept.motion .img_5{
	animation: fadein 0.5s ease 1s forwards;
    -webkit-animation: fadein 0.5s ease 1.15s forwards;	
}
/*============================
         products
============================*/
/*animation*/
#products .midashi_box,
#products .products_box,
#products .textbox,
#products .btn_has_icon{
	opacity: 0;
}
#products.motion .midashi_box{
	animation: fadein 0.5s ease 0s forwards;
    -webkit-animation: fadein 0.5s ease 0s forwards;	
}
#products.motion .products_box:nth-child(1){
	animation: fadein 0.5s ease 0.25s forwards;
    -webkit-animation: fadein 0.5s ease 0.25s forwards;	
}
#products.motion .products_box:nth-child(2){
	animation: fadein 0.5s ease 0.5s forwards;
    -webkit-animation: fadein 0.5s ease 0.5s forwards;	
}
#products.motion .products_box:nth-child(3){
	animation: fadein 0.5s ease 0.75s forwards;
    -webkit-animation: fadein 0.5s ease 0.75s forwards;	
}
#products.motion .products_box:nth-child(4){
	animation: fadein 0.5s ease 0.9s forwards;
    -webkit-animation: fadein 0.5s ease 0.9s forwards;	
}
#products.motion .textbox,
#products.motion .btn_has_icon{
	animation: fadein 0.5s ease 1s forwards;
    -webkit-animation: fadein 0.5s ease 01s forwards;		
}
/*============================
         flow
============================*/
#flow .wrap{
	padding: 18.2% 0 14%;
}
@media screen and (max-width: 1439px) {
	#flow .wrap{
		padding: 270px 0 202px;
	}
}
@media screen and (min-width: 1640px) {
	#flow .wrap{
		padding: 318px 0 232px;
	}
}
#flow .midashi_box{
	text-align: center;
	margin-bottom: 28px;
}
#flow .box_wrap{
	width: 890px;
	margin: 0 auto 48px;
}
#flow .box_wrap::before{
	content: "";
	position: absolute;
	width: 720px;
	height: 1px;
	top: 70px;
	left: 50%;
	margin-left: -360px;
	background: #E6D2D7;
}
#flow .flow_box{
	padding-top: 10px;
}
#flow .flow_box .icon{
	width: 140px;
	height: 140px;
	border-radius: 140px;
	margin: 0 auto;
	padding: 40px 0 0;
	background: #fff;
    box-shadow: 0px 0px 6px 6px rgb(0 0 0 / 4%);
}
#flow .flow_box .icon svg{
	fill: #3F1A18;
	margin: 0 auto;
	display: block;
}
#flow .flow_box .num{
	width: 70px;
	margin: 20px auto 17px;
	text-align: center;
	font-size: 18px;
	border-bottom: 1px solid #E6D2D7;
	padding-bottom: 6px;
}
#flow .flow_box h3{
	height: 40px;
	padding: 14px 0 6px;
	font-size: 18px;
	text-align: center;
	line-height: 1.3;
	margin-bottom: 17px;
}
#flow .flow_box h3.line2{
	padding: 0;
}
#flow .flow_box .txt{
	font-size: 12px;
	line-height: 1.5;
	padding: 0 20px;
}
#flow img{
	display: block;
	z-index: 2;
	height: auto;
}
#flow .imgsec_1{
	position: absolute;
	width: 38.8%;
	max-width: 662px;
	min-width: 560px;
	height: 19.4vw;
	max-height: 330px;
	min-height: 280px;
	left: 52.7%;
	top: -7.5%;
	z-index: 6;
}
#flow .imgsec_2{
	position: absolute;
	width: 28.6%;
	max-width: 485px;
	min-width: 412px;
	height: 18.7vw;
	max-height: 318px;
	min-height: 270px;
	right: 63%;
	top: 5.6%;
	z-index: 6;
}
#flow .imgsec_3{
	position: absolute;
	width: 32.7%;
	max-width: 552px;
	min-width: 472px;
	height: 18.7vw;
	max-height: 316px;
	min-height: 270px;
	right: 55%;
	top: 84%;
	z-index: 6;
}
#flow .imgsec_4{
	position: absolute;
	width: 28.6%;
	max-width: 490px;
	min-width: 412px;
	height: 23.8vw;
	max-height: 345px;
	min-height: 290px;
	left: 58.6%;
	top: 84.5%;
	z-index: 6;
}
@media screen and (min-width: 1897px) {
#flow .imgsec_1{
	left: 1000px;
	top: -80px;
}
}
@media screen and (min-width: 1822px) {
#flow .imgsec_2{
	right: 1148px;
	top: 54px;
}
}
@media screen and (min-width: 1872px) {
#flow .imgsec_3{
	right: 1030px;
	top: 910px;
}
}
@media screen and (min-width: 1848px) {
#flow .imgsec_4{
	left: 1083px;
	top: 914px;
}
}
#flow .img_1{
    min-width: 208px;
	max-width: 246px;
    width: 37.1%;
	float: right;
	margin-left: 4px;
}
#flow .img_2{
    min-width: 348px;
	max-width: 411px;
    width: 62.1%;
	float: right;
	margin-top: 50px;
}
#flow .img_3{
    min-width: 200px;
	max-width: 235px;
    width: 48.5%;
	float: right;
	margin-left: 4px;
}
#flow .img_4{
    min-width: 208px;
	max-width: 244px;
    width: 50.4%;
	float: right;
	margin-top: 40px;
}
#flow .img_5{
    min-width: 348px;
	max-width: 406x;
    width: 73.7%;
	float: left;
	margin-right: 4px;
}
#flow .img_6{
    min-width: 120px;
	max-width: 140px;
    width: 25.4%;
	float: left;
	margin-top: 110px;
}
#flow .img_7{
    min-width: 200px;
	max-width: 238px;
    width: 48%;
	float: left;
	margin-right: 4px;
}
#flow .img_8{
    min-width: 208px;
	max-width: 247px;
    width: 50.4%;
	margin-top: 70px;
	float: left;
}
#flow .btn_has_icon{
	margin: 0 auto;
}
/*animation*/
#flow .img_1,
#flow .img_2,
#flow .img_3,
#flow .img_4,
#flow .img_5,
#flow .img_6,
#flow .img_7,
#flow .img_8,
#flow .midashi_box,
#flow .box_wrap,
#flow .btn_has_icon{
	opacity: 0;
}
#flow.motion .img_1{
	animation: fadein 0.5s ease 0s forwards;
    -webkit-animation: fadein 0.5s ease 0s forwards;	
}
#flow.motion .img_2{
	animation: fadein 0.5s ease 0.25s forwards;
    -webkit-animation: fadein 0.5s ease 0.25s forwards;	
}
#flow.motion .img_3{
	animation: fadein 0.5s ease 0.5s forwards;
    -webkit-animation: fadein 0.5s ease 0.5s forwards;	
}
#flow.motion .img_4{
	animation: fadein 0.5s ease 0.75s forwards;
    -webkit-animation: fadein 0.5s ease 0.75s forwards;	
}
#flow.motion .midashi_box{
	animation: fadein 0.5s ease 0.9s forwards;
    -webkit-animation: fadein 0.5s ease 0.9s forwards;	
}
#flow.motion .box_wrap,
#flow.motion .btn_has_icon{
	animation: fadein 0.5s ease 1.15s forwards;
    -webkit-animation: fadein 0.5s ease 1.15s forwards;	
}
#flow.motion .img_5{
	animation: fadein 0.5s ease 1.4s forwards;
    -webkit-animation: fadein 0.5s ease 1.4s forwards;	
}
#flow.motion .img_6{
	animation: fadein 0.5s ease 1.65s forwards;
    -webkit-animation: fadein 0.5s ease 1.65s forwards;	
}
#flow.motion .img_7{
	animation: fadein 0.5s ease 1.6s forwards;
    -webkit-animation: fadein 0.5s ease 1.6s forwards;	
}
#flow.motion .img_8{
	animation: fadein 0.5s ease 1.8s forwards;
    -webkit-animation: fadein 0.5s ease 1.8s forwards;	
}
/*============================
        works
============================*/
/*animation*/
#works .midashi_box,
#works #feed,
#works .btn_has_icon{
	opacity: 0;
}
#works.motion .midashi_box{
	animation: fadein 0.5s ease 0s forwards;
    -webkit-animation: fadein 0.5s ease 0s forwards;	
}
#works.motion #feed{
	animation: fadein 0.5s ease 0.25s forwards;
    -webkit-animation: fadein 0.5s ease 0.25s forwards;	
}
#works.motion .btn_has_icon{
	animation: fadein 0.5s ease 0.5s forwards;
    -webkit-animation: fadein 0.5s ease 0.5s forwards;	
}