/* ---------- loading and animation ------------*/
#loading-area {
	position: fixed;
	width: 100vw;
	height: 100vh;
	top:0;
	left:0;
	z-index: 9999;
	background: #FFF;
	overflow: hidden;
}
#loadlogo-area{
	width: 100vw;
	position: absolute;
	left: 50%;
	top: 42%;
	margin: -0 0 0 -50vw;
}
#loadLogo{
	width: 50px;
	padding: 0 0 25px 0;
	margin: 0 auto;
	text-align: center;
}

#loadtxt{
	width: auto;
	padding: 15px 0 0 0;
	margin: 0 auto;
	font-size: 0.813rem;
	font-weight: 700;
	text-align: center;
}

#progress-box {
	width: 200px;
	height: 3px;
	margin: 0 auto;
	background: #BBBBBB;
	position: relative;
}
#progress-barL {
	width: 0;
	height: 1px;
	background: #DF2016;
	position: absolute;
	left: 50%;
	top: 1px;
}
#progress-barR {
	width: 0;
	height: 1px;
	background: #DF2016;
	position: absolute;
	right: 50%;
	top: 1px;
	margin: 0 0 0 50%;
}




/* --------------------
	concept
--------------------*/
#concept{
	margin: 0 auto;
	padding: 40px 0 0 0;
}
#concept h2{
	margin: 0 auto;
	padding: 0 0 55px 0;
}
#concept h2.copy1{
	width: 443px;
}
#concept h2.copy2{
	width: 490px;
}

#concept .unit{
	width: 100%;
	padding: 120px 0 0 0;
}

#content .stickyfull.img01 {
	background: url("../../img/bg_img01.jpg") center center/cover no-repeat;
}
#content .stickyfull.img02 {
	background: url("../../img/bg_img02.jpg") center center/cover no-repeat;
}
#concept .stickyfull {
	width: 100%;
	margin: 120px 0 0 0 ;
	z-index: 0;
	background-size: cover;
	background-position: right;
	position: relative;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
}
#concept .img01::before,
#concept .img02::before{
	content:"";
	display: block;
	padding-top: 28%;
}

@media only screen and (max-width: 820px) {
	
}
@media only screen and (max-width: 768px) {
	#concept{
		margin: 0 auto;
		padding: 40px 0 0 0;
	}
	#concept h2{
		margin: 0 auto;
		padding: 0 0 40px 0;
	}
	#concept h2.copy1{
		width: 62.62%;
	}
	#concept h2.copy2{
		width: 57.857%;
	}

	#concept .unit{
		width: 100%;
		padding: 60px 0 0 0;
	}
	
	#content .stickyfull.img01 {
		background: url("../../img/bg_img01.jpg") center center/auto 150% no-repeat;
	}
	#content .stickyfull.img02 {
		background: url("../../img/bg_img02.jpg") center center/auto 150% no-repeat;
	}

	#concept .stickyfull {
		width: 100%;
		margin: 60px 0 0 0 ;
	}
	#concept .img01::before,
	#concept .img02::before{
		content:"";
		display: block;
		padding-top: 45%;
	}
}
@media only screen and (max-width: 480px) {	
	#concept{
		margin: 0 auto;
		padding: 40px 0 0 0;
	}
	#concept h2{
		margin: 0 auto;
		padding: 0 0 40px 0;
	}
	#concept h2.copy1{
		width: calc(62.62% * 1.4);
	}
	#concept h2.copy2{
		width: calc(57.857% * 1.4);
	}

	#concept .unit{
		width: 100%;
		padding: 60px 0 0 0;
	}
	
	#content .stickyfull.img01 {
		background: url("../../img/bg_img01.jpg") center center/auto 160% no-repeat;
	}
	#content .stickyfull.img02 {
		background: url("../../img/bg_img02.jpg") center center/auto 160% no-repeat;
	}

	#concept .stickyfull {
		width: 100%;
		margin: 60px 0 0 0 ;
	}
	#concept .img01::before,
	#concept .img02::before{
		content:"";
		display: block;
		padding-top: 65%;
	}
}


/* --------------------
	profile
--------------------*/
#profile{
	padding: 165px 0 250px;
	background: url("../img/bg_p_wave1.svg") bottom 35px center/auto 325px repeat-x;
}

#profile #face_area{
	position: relative;
	width: 322px;
	margin: 0 auto;
	padding: 0 0 30px 0;
}
#profile #face_area #voice{
	width: 245px;
	margin: 0 auto;
	position: absolute;
	top: -60px;
	right: -113px;
}
#profile .name_copy{
	width: 145px;
	margin: 0 auto;
	padding: 0 0 20px 0;
}
#profile .name{
	width: 144px;
	margin: 0 auto;
	padding: 0 0 30px 0;
}
#profile .p_txt{
	width: 382px;
	margin: 0 auto;
	padding: 0 0 0 0;
	line-height: 1.8;
}
@media only screen and (max-width: 820px) {
	#profile{
		padding: 165px 0 250px;
		background: url("../img/bg_p_wave1.svg") bottom 35px center/auto 325px repeat-x;
	}

	#profile #face_area{
		position: relative;
		width: 322px;
		margin: 0 auto;
		padding: 0 0 30px 0;
	}
	#profile #face_area #voice{
		width: 245px;
		margin: 0 auto;
		position: absolute;
		top: -60px;
		right: -113px;
	}
	#profile .name_copy{
		width: 145px;
		margin: 0 auto;
		padding: 0 0 20px 0;
	}
	#profile .name{
		width: 144px;
		margin: 0 auto;
		padding: 0 0 30px 0;
	}
	#profile .p_txt{
		width: 382px;
	}
}
@media only screen and (max-width: 768px) {
	#profile{
		padding: 105px 0 200px;
		background: url("../img/bg_p_wave1.svg") bottom 35px center/auto 280px repeat-x;
	}

	#profile #face_area{
		position: relative;
		width: 322px;
		margin: 0 auto;
		padding: 50px 0 30px 0;
	}
	#profile #face_area #voice{
		width: 245px;
		margin: 0 auto;
		position: absolute;
		top: -60px;
		right: 0px;
	}
	#profile .name_copy{
		width: 145px;
		margin: 0 auto;
		padding: 0 0 20px 0;
	}
	#profile .name{
		width: 144px;
		margin: 0 auto;
		padding: 0 0 30px 0;
	}
	#profile .p_txt{
		width: 382px;
	}
}
@media only screen and (max-width: 480px) {	
	#profile{
		padding: 125px 0 100px;
		background: url("../img/bg_p_wave1.svg") bottom 35px center/auto 200px repeat-x;
	}

	#profile #face_area{
		position: relative;
		width: 80%;
		margin: 0 auto;
		padding: 70px 0 30px 0;
	}
	#profile #face_area figure{
		width: 80%;
		margin: 0 auto;
	}
	#profile #face_area #voice{
		width: 100%;
		margin: 0 auto;
		position: absolute;
		top: -60px;
		right: 0px;
	}
	#profile .name_copy{
		width: 50%;
		margin: 0 auto;
		padding: 0 0 20px 0;
	}
	#profile .name{
		width: 50%;
		margin: 0 auto;
		padding: 0 0 30px 0;
	}
	#profile .p_txt{
		width: 80%;
	}
}


/* --------------------
	ichigo
--------------------*/
#ichigo{
	padding: 180px 0 10px;
	background: url("../img/bg_wave_g.svg") top center/100% auto no-repeat, linear-gradient(180deg, rgba(243,242,236,0) 0%, rgba(243,242,236,0) 20%, rgba(243,242,236,1) 21%);
}
#ichigo h2{
	margin: 0 auto 55px auto;
	width: 454px;
}

#ichigo #kinde{
	width: 100%;
	padding: 0 0 35px 0;
	background: url("../img/bg_p_wave2.svg") bottom 0 center/auto 325px repeat-x;
}
#ichigo #kinde .in-box{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: flex-start;
}
#ichigo #kinde .in-box .unit{
	width: 50%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	position: relative;
}
#ichigo #kinde .in-box .unit .copy_area{
	width: 81.25%;
	margin: 0 auto;
	position: relative;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	box-sizing: border-box;
}
#ichigo #kinde .in-box .unit .copy_area::before{
	content:"";
	display: block;
	padding-top: 100%;
}

#ichigo #kinde .in-box .unit.koiminori .copy_area{
	background: url("../../img/ichigo1_bg.svg") center center/cover no-repeat;
}
#ichigo #kinde .in-box .unit.yumenoka .copy_area{
	background: url("../../img/ichigo2_bg.svg") center center/cover no-repeat;
}

#ichigo #kinde .in-box .unit h3{
	padding: 0 0 0 0;
	position: absolute;
	top: 65px;
	left: 50%;
}
#ichigo #kinde .in-box .unit.koiminori h3{
	width: 128px;
	margin: 0 0 0 -64px;
}
#ichigo #kinde .in-box .unit.yumenoka h3{
	width: 140px;
	margin: 0 0 0 -70px;
}
#ichigo #kinde .in-box .unit p{
	width: 100%;
	margin: 0 auto;
	padding: 0 45px 0 45px;
	font-size: 0.875rem;
	line-height: 1.8;
	box-sizing: border-box;
	color: rgba(255,255,255,1.00);
	position: absolute;
	top: 115px;
	left: 0;
}
#ichigo #kinde .in-box .unit.koiminori figure{
	width: 411px;
	margin: -36px 0 0 0;
	position: relative;
	z-index: 5;
}
#ichigo #kinde .in-box .unit.yumenoka figure{
	width: 377px;
	margin: -68px 0 0 0;
	position: relative;
	z-index: 5;
}

@media only screen and (max-width: 820px) {
	#ichigo{
		padding: 180px 0 10px;
		background: url("../img/bg_wave_g.svg") top center/100% auto no-repeat, linear-gradient(180deg, rgba(243,242,236,0) 0%, rgba(243,242,236,0) 20%, rgba(243,242,236,1) 21%);
	}
	#ichigo h2{
		margin: 0 auto 55px auto;
		width: 454px;
	}

	#ichigo #kinde{
		width: 100%;
		padding: 0 0 35px 0;
		background: url("../img/bg_p_wave2.svg") bottom 0 center/auto 325px repeat-x;
	}
	#ichigo #kinde .in-box{
		width: 90%;
	}
	#ichigo #kinde .in-box .unit{
		width: 50%;
	}
	#ichigo #kinde .in-box .unit .copy_area{
		width: 81.25%;
	}
	#ichigo #kinde .in-box .unit .copy_area::before{
		content:"";
		display: block;
		padding-top: 100%;
	}

	#ichigo #kinde .in-box .unit.koiminori .copy_area{
		background: url("../../img/ichigo1_bg.svg") center center/cover no-repeat;
	}
	#ichigo #kinde .in-box .unit.yumenoka .copy_area{
		background: url("../../img/ichigo2_bg.svg") center center/cover no-repeat;
	}

	#ichigo #kinde .in-box .unit h3{
		top: 55px;
		left: 50%;
	}
	#ichigo #kinde .in-box .unit.koiminori h3{
		width: 128px;
		margin: 0 0 0 -64px;
	}
	#ichigo #kinde .in-box .unit.yumenoka h3{
		width: 140px;
		margin: 0 0 0 -70px;
	}
	#ichigo #kinde .in-box .unit p{
		padding: 0 35px 0 35px;
		font-size: 0.875rem;
		position: absolute;
		top: 105px;
		left: 0;
	}
	#ichigo #kinde .in-box .unit.koiminori figure{
		width: 411px;
		margin: -36px 0 0 0;
	}
	#ichigo #kinde .in-box .unit.yumenoka figure{
		width: 377px;
		margin: -68px 0 0 0;
	}
}
@media only screen and (max-width: 768px) {
	#ichigo{
		padding: 100px 0 10px;
		background: url("../img/bg_wave_g.svg") top center/100% auto no-repeat, linear-gradient(180deg, rgba(243,242,236,0) 0%, rgba(243,242,236,0) 5%, rgba(243,242,236,1) 6%);
	}
	#ichigo h2{
		margin: 0 auto 40px auto;
		width: 60.238%;
	}

	#ichigo #kinde{
		padding: 0 0 15px 0;
		background: url("../img/bg_p_wave2.svg") bottom 0 center/auto 280px repeat-x;
	}
	#ichigo #kinde .in-box{
		width: 80%;
	}
	#ichigo #kinde .in-box .unit{
		width: 400px;
		margin: 0 auto;
		padding: 0 0 20px 0;
	}
	#ichigo #kinde .in-box .unit .copy_area{
		width: 81.25%;
	}
	#ichigo #kinde .in-box .unit .copy_area::before{
		content:"";
		display: block;
		padding-top: 100%;
	}

	#ichigo #kinde .in-box .unit.koiminori .copy_area{
		background: url("../../img/ichigo1_bg.svg") center center/cover no-repeat;
	}
	#ichigo #kinde .in-box .unit.yumenoka .copy_area{
		background: url("../../img/ichigo2_bg.svg") center center/cover no-repeat;
	}

	#ichigo #kinde .in-box .unit h3{
		top: 55px;
		left: 50%;
	}
	#ichigo #kinde .in-box .unit.koiminori h3{
		width: 128px;
		margin: 0 0 0 -64px;
	}
	#ichigo #kinde .in-box .unit.yumenoka h3{
		width: 140px;
		margin: 0 0 0 -70px;
	}
	#ichigo #kinde .in-box .unit p{
		padding: 0 35px 0 35px;
		font-size: 0.875rem;
		position: absolute;
		top: 105px;
		left: 0;
	}
	#ichigo #kinde .in-box .unit.koiminori figure{
		width: 411px;
		margin: -70px 0 0 0;
	}
	#ichigo #kinde .in-box .unit.yumenoka figure{
		width: 377px;
		margin: -90px 0 0 0;
	}
}
@media only screen and (max-width: 480px) {	
	#ichigo{
		padding: 100px 0 10px;
		background: url("../img/bg_wave_g.svg") top center/100% auto no-repeat, linear-gradient(180deg, rgba(243,242,236,0) 0%, rgba(243,242,236,0) 5%, rgba(243,242,236,1) 6%);
	}
	#ichigo h2{
		margin: 0 auto 40px auto;
		width: 60.238%;
	}

	#ichigo #kinde{
		padding: 0 0 15px 0;
		background: url("../img/bg_p_wave2.svg") bottom 0 center/auto 200px repeat-x;
	}
	#ichigo #kinde .in-box{
		width: 80%;
	}
	#ichigo #kinde .in-box .unit{
		width: 100%;
		margin: 0 auto;
		padding: 0 0 20px 0;
	}
	#ichigo #kinde .in-box .unit .copy_area{
		width: 88%;
	}
	#ichigo #kinde .in-box .unit .copy_area::before{
		padding-top: 100%;
	}

	#ichigo #kinde .in-box .unit.koiminori .copy_area{
		background: url("../../img/ichigo1_bg.svg") center center/cover no-repeat;
	}
	#ichigo #kinde .in-box .unit.yumenoka .copy_area{
		background: url("../../img/ichigo2_bg.svg") center center/cover no-repeat;
	}

	#ichigo #kinde .in-box .unit h3{
		top: 18.5%;
	}
	#ichigo #kinde .in-box .unit.koiminori h3{
		width: 32%;
		margin: 0 0 0 -16%;
	}
	#ichigo #kinde .in-box .unit.yumenoka h3{
		width: 35%;
		margin: 0 0 0 -17.5%;
	}
	#ichigo #kinde .in-box .unit p{
		padding: 0 2.0em 0 2.0em;
		font-size: 0.813rem;
		top: 34%;
		left: 0;
	}
	#ichigo #kinde .in-box .unit.koiminori figure{
		width: 100%;
		margin: -15% auto 0 auto;
	}
	#ichigo #kinde .in-box .unit.yumenoka figure{
		width: 90%;
		margin: -19% auto 0 auto;
	}
}