@charset "UTF-8";
/* CSS Document */

/*----------------------------
 　　　標準設定
----------------------------*/

@font-face{
	font-family: 'Noto Sans JP', sans-serif;
	font-style: normal;
	font-weight: 400;	
}

html{
	font-size: 62.5%
}

body{
	font-size: 1.6rem;
	font-family: 'Noto Sans JP', sans-serif;
	line-height: 1.6;
	color: #333333;
}

img{
	max-width: 100%;
	height: auto;
}

.row{
/*ここに.rowの設定を書く */
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}

a{
	cursor: pointer;
}

.fadein {
  opacity : 0;
  transform: translateY(20px);
	transition: all 1s;
} 

.body.no303{
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
		animation: fadeIn 2s ease 0s 1 normal;

}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}


/*----------------------------
 　　　header
----------------------------*/
.header.no303{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 130px;
	background-image: url("../img/front-curtain.png");
	background-repeat: repeat-x;
	background-size: contain;
	padding: 48px 0 0;
	z-index: 101;
}

.header-logo{
	width: 214px;
}

/*----------------------------
 　　　main
----------------------------*/

.main.no303{
	position: relative;
	width: 100%;
	height: 1600px;
	background-color: #e4dbd3;	
}

.flexbox{
	display: flex;
	justify-content: space-between;
}

.no303_intro{
	width: 750px;
	position: absolute;
	top: 230px;
	left: 50%;
	transform: translate3d(-50%,0,0);
	align-items: center;
}

.f-room_logo{
	width: 180px;
	margin-right: 65px;
}

.f-room_text p{
	font-size: 1.5rem;
	line-height: 2.4;
	letter-spacing: 0.1em;	
}

.curtain-left{
	width: 200px;
	height: 1064px;
	background-image: url("../img/curtain.png");
	background-size: contain;
	background-repeat: no-repeat;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
}

.curtain-right{
	width: 200px;
	height: 1064px;
	background-image: url("../img/curtain.png");
	background-size: contain;
	background-repeat: no-repeat;
	position: fixed;
	top: 0;
	right: 0;
	transform: scale(-1, 1);
	z-index: 100;
}

.f-room_movie{
	position: absolute;
	top: 510px;
	left: 50%;
	transform: translate3d(-50%,0,0);
	width: 555px;
	height: 344px;
	background-color: #8C8C8C;
}

.f-room_movie p{
	position: absolute;
	font-size: 1.6rem;
	letter-spacing: 0.1em;
	text-align: center;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%,-50%,0);
}

.no303_profile{
	width: 1050px;
	max-width: 1140px;
	position: absolute;
	top: 880px;
	left: 50%;
	transform: translate3d(-50%,0,0);
	align-items: center;	
	z-index: 99;
}

.f-room_illust{
	width: 500px;	
	z-index: 80;
}

.f-room_profile{
	margin-top: 150px;
}

.profile_title{
	font-size: 4rem;
	font-family: aktiv-grotesk, sans-serif;
	font-weight: 600;
	line-height: 1;
	color: #333;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 25px;
}

.profile_text{
	font-size: 1.5rem;
	line-height: 2.4;
	letter-spacing: 0.1em;		
}

.steps{
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 50%;
	transform: translate3d(-50%,0,0);	
	z-index: 90;
}

.steps_01{
	width: 60%;
	height: 60px;
	margin: 0	auto;
	background-color: #cab3a7;
}

.steps_02{
	width: 70%;
	height: 60px;
	margin: 0	auto;
	background-color: #b49a8f;
}

.steps_03{
	width: 100%;
	height: 550px;
	background-color: #a08578;
}

/*----------------------------
 　　　footer
----------------------------*/


.footer{
	background-color: #fff;
	padding: 55px 0 55px;
}
.copyright{
	text-align: center;
	font-size: 1.3rem;
	line-height: 1;
	font-family: aktiv-grotesk, sans-serif;
	letter-spacing: 0.1em;
	color: #6c6c6c;
}

/*--------------------------------------------------------
 　　　SP用　480px以下の場合
--------------------------------------------------------*/


@media screen and (max-width:479px){
	
	
/*----------------------------
 　　　header
----------------------------*/
.header.no303{
	height: 90px;
	padding: 20px 0 0;
}

.header-logo{
	width: 110px;
	margin-left: 20px;
	line-height: 1;
}
	
/*----------------------------
 　　　main
----------------------------*/
	
.main.no303{
	height: 1500px;
}
	
.flexbox{
	display: block;
}

.no303_intro{
	width: 100%;
	position: absolute;
	top: 160px;
	align-items: center;
}

.f-room_logo{
	width: 120px;
	margin: 0 auto 30px;
}

.f-room_text p{
	width: 240px;
	font-size: 1.5rem;
	line-height: 2.4;
	letter-spacing: 0.1em;
	margin: 0 auto;
}

.curtain-left{
	top: 50px;
	width: 63px;
	height: 1064px;
	background-image: url("../img/curtain-sp.png");
}

.curtain-right{
	top: 50px;
	width: 63px;
	height: 1064px;
	background-image: url("../img/curtain-sp.png");
}

.f-room_movie{
	position: absolute;
	width: 80%;
	height: 200px;
	top: 600px;
}

.no303_profile{
	width: 240px;
	top: 840px;
}

.f-room_illust{
	width: 276px;	
}

.f-room_profile{
	margin-top: 20px;
}

.profile_title{
	font-size: 3rem;
	margin-bottom: 20px;
}

.profile_text{
	font-size: 1.5rem;
	line-height: 2.4;
	letter-spacing: 0.1em;		
}

.steps{
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 50%;
	transform: translate3d(-50%,0,0);	
	z-index: 90;
}

.steps_01{
	height: 30px;
}

.steps_02{
	height: 30px;
}

.steps_03{
	height: 550px;
}

	
	
	
/*----------------------------
 　　　footer
----------------------------*/

.footer.no303{
	padding: 30px 0 30px;	
}
	
	
}