@charset "UTF-8";
 
 [class ^= "pc"]
{
	display:none;
}


* {
	padding:0px;
	margin:0px;
	box-sizing:border-box;
 }
 
 body {
	font-size:16px;
 }
 
 
a {
	text-decoration:none;
	color:inherit;
	width:800px;
 }
 
#all
{
	position:relative;
}
 
header
{
	position:fixed;
	width:100%;
	z-index:10;
	height:80px;
	background-color:#e3cbcb;
}


/* top */
#top_area
{
	position:relative;
}

#top_area > div
{
	position:relative;
	height:80px;
}

.top_left_area 
{
	position:relative;
	display:inline-block;
	height:80px;
	padding-top:8px;
}

.top_left_area > div
{
	position:absolute;
	height:80px;
}


.top_right_area 
{
	position:relative;
	display:inline-block;
	height:80px;
}

.top_right_area > div
{
	position:absolute;
	height:80px;
	width:1000px;
}

.top_right_area_ul
{
	position:relative;
	text-align:center;
	padding-top:35px;
	padding-left:90px;
}

.top_right_area_ul > li
{
	display:inline-block;
	font-size:1.25rem;
	font-weight:bold;
	padding:0px 30px;
	transition:all 0.2s linear;
}

.top_right_area_ul > li:hover
{
	color:#ff0303;
	font-size:1.25rem;
}

.phone_layout
{
	position:absolute;
	top:-10px;
	left:0px;
	right:0px;
	bottom:0px;
	height:6000%;
	background-color:black;
	width:500px;
	margin-left:-1000px;
}

.phone_layout > ul
{
	position:relative;
}


.phone_layout > ul >  li
{
	height:50px;
	background-color:#D3D3D3;
	font-size:1.875rem;
	font-weight:bold;
	margin-top:20px;
}

.phone_layout > ul > div
{
	padding-left:190px;
	font-size:1.875rem;
	font-weight:bold;
	margin-top:20px;
	color:white;
}
main
{
	position:relative;
	top:80px;
}

/* // top */

/* content_area */
#content_area
{
	position:relative;
	background-color:black;
}

#content_area > div
{
	position:relative;
}

.content_area_center
{
	position:relative;
}

.content_area_left
{
	position:relative;
}

.content_area_left > div
{
	position:relative;
}


.content_area_right
{
	position:relative;
	display:inline-block;
	height:500px;
}

.content_area_right > div
{
	position:absolute;
	height:500px;
	padding-top:31px;
	padding-left:10px;
}

.content_area_right > div > img
{
	max-width:600px;
}

.content_box
{
	position:relative;
	overflow:hidden;
}

.content_box_img
{
	position:relative;
	margin-left:0px;
	width:300%;
	font-size:0px;
}

.content_box_img > div
{
	display:inline-block;
}


.content_box_1
{
	position:relative;
	height:173px;
	border-radius:10px;
	margin-top:5px;
}

.content_box_1 > img
{
	display:block;
}
/* // content_area*/

/* animated_area */
#animated_area
{
	position:relative;
	background-color:#343536; 
	padding-top:100px;
}

#animated_area > div
{
	position:relative;
}

.animated_title_area
{
	position:relative;
	padding-top:32px;
	text-align:center;
}
.animated_title_area > div
{
	position:relative;
	text-align:center;
}
.animated_title_area > div > h3
{
	font-size:3.125rem;
	color:white;
}

.animated_intro_area
{
	position:relative;
	text-align:center;
	padding-top:20px;
}

.animated_intro_area > div
{
	position:relative;
}

.animated_intro_area > div > p:nth-child(1)
{
	font-size:1.25rem;
	color:white; /* #D3D3D3 */
	font-weight:bold;
	padding-top:19px;
}

.animated_intro_area > div > p:nth-child(3)
{
	font-size:1.25rem;
	color:#D3D3D3;
	padding-top:7px;
}
.animated_intro_area > div > p:nth-child(5)
{
	font-size:1.25rem;
	color:#D3D3D3;
}


.animate_button_area
{
	position:relative;
}

.animate_button_area > div
{
	position:relative;
	padding-top:50px;
	text-align:center;
}
	
.animate_button_area > div > button
{
	font-size:1.875rem;
	border-radius:9px;
	cursor:pointer;
	font-weight:bold;
	border:none;
	transition:all 0.2s linear;
}



button
{
	padding:10px;
}
.amimate_card
{
	position:relative;
	overflow:hidden;
}
.amimate_card > div
{
	border-radius:10px;
}

.animate_img_area
{
	position:relative;
	display:flex;
}





.
/* // animated_area */

/*interactive_area */
#interactive_area
{
	position:relative;
	background-color:gray;
}

#interactive_area > div
{
	position:relative;
}

.interactive_title_area
{
	position:relative;
	padding-top:30px;
}
.interactive_title_area > div
{
	position:relative;
	text-align:center;
}
.interactive_title_area > div > h3
{
	font-size:3.125rem;
}

.interactive_intro_area
{
	position:relative;
}

.interactive_intro_area > div
{
	position:relative;
	text-align:center;
}

.interactive_intro_area > div > p:nth-child(1)
{
	font-size:1.25rem;
	color:black;
	font-weight:bold;
}

.interactive_intro_area > div > p:nth-child(3)
{
	font-size:1.25rem;
	padding-top:7px;
}


.interactive_button_area > div
{
	position:relative;
	padding-top:30px;
	text-align:center;
}

.interactive_button_area > div > button
{
	font-size:1.875rem;
	border-radius:9px;
	cursor:pointer;
	border:none;
	font-weight:bold;
	transition:all 0.2s linear;
}

.interactive_button_area > div > button:hover
{
	background-color:#ff9292;
	color:white;
}

.interactive_card
{
	position:relative;
}
.interactive_card > div
{
	border-radius:10px;
}
/*// interactive_area */

/*story_area*/
#story_area
{
	position:relative;
	background-color:#D3D3D3;
}

#story_area > div
{
	position:relative;
	padding-top:60px;
}

.story_title_area
{
	position:relative;
	padding-top:30px;
	text-align:center;
}
.story_title_area > div
{
	position:relative;
}
.story_title_area > div > h3
{
	font-size:3.125rem;
}

.story_intro_area
{
	position:relative;
}

.story_intro_area > div
{
	position:relative;
	text-align:center;
}

.story_intro_area > div > p:nth-child(1)
{
	font-size:1.25rem;
	font-weight:bold;
	padding-top:20px;
}

.story_intro_area > div > p:nth-child(3)
{
	font-size:1.25rem;
}

.story_intro_area > div > p:nth-child(5)
{
	font-size:19px;
}



.story_button_area
{
	position:relative;
	text-align:center;
}

.story_button_area > div
{
	position:relative;
	padding-top:40px;
}

.story_button_area > div > button
{
	font-size:1.875rem;
	border:none;
	border-radius:9px;
	cursor:pointer;
	font-weight:bold;
	transition:all 0.2s linear;
}


.story_card
{
	position:relative;
}
.story_card > div
{
	border-radius:10px;
}
hr
{
	border:none;
}
/*// story_area*/

/* footor */
footer
{
	position:relative;
	top:70px;
	background-color:black;
}

footer > div
{
	position:relative;
}

.by_area
{
	position:relative;
	text-align:center;
	color:white;
	font-size:1.25rem;
}

.by_area > div
{
	position:absolute;
	top:30px;
	left:0px;
	right:0px;
	bottom:0px;
}



.youtube
{
	position:relative;
}

.youtube > ul
{
	text-align:center;
}


.youtube > ul > li
{
	padding:0px 40px;
	display:inline-block;
}
/* // footor */