@charset "UTF-8";



/* ================================================================================
prepare
================================================================================ */
#KV
{
	min-width: 1100px;
	padding: 5rem 0;
	background-image: url("../image/front-page/KV_background.png");
	background-size: cover;
background-repeat: no-repeat;
}
#KV > .inner
{
	width: 1100px;
	margin: 0 auto;
	position: relative;
}

#KV .text1
{
	margin: 0 auto 1rem;
	text-align: left;
	font-size: 36px;
	color: #1379BC;
}

#KV .text2
{
	margin: 0 auto 3rem;
	text-align: left;
	color: #1379BC;
 font-size: 20px;
}

#KV .text2 span
{
	padding: 5px;
	background-color: white;
}

#KV p:nth-child(1){	transition-delay: 1.0s;	}
#KV p:nth-child(2){	transition-delay: 2.0s;	}
#KV h3{	width: 419px;		}

#KV .img1{	width: 373px;	position: absolute; top: 100px; left:645px;	}

#KV .bimg1{	width: 62px;	position: absolute; top: 400px; left:-20px;	}

/* ================================================================================
explain
================================================================================ */
#explain
{
	min-width: 1100px;
	padding: 5rem 0;

}
#explain > .inner
{
	width: 1100px;
	margin: 0 auto;
	display: flex;
	position: relative;

}

#explain .box0
{
display: flex;
justify-content: space-between;
width: 925px;
margin: 0 auto;

}


#explain .text1
{
	margin: 0 auto 1rem;
	text-align: left;
	font-size: 36px;
}

#explain .text2
{
	margin: 0 auto 3rem;
	line-height: 2;
	text-align: left;
 font-size: 16px;
}

#explain .button
{
width: 328px;
margin-top: 120px;
margin-left: 240px;
}

#explain .bimg1{	width: 62px;	position: absolute; top: 850px; left:-100px;	}

#explain .bimg2{	width: 62px;	position: absolute; top: 600px; left: 1200px;	}


/* ================================================================================
detail
================================================================================ */
#detail
{
	min-width: 1100px;
	padding: 5rem 0;
background-repeat: no-repeat;
background-size: contain;
background-image: url("../image/front-page/bg_water_1.png");
background-position: 0% 45%;
}
#detail > .inner
{
	width: 1100px;
	margin: 0 auto;
}

#detail .menu
{
display: flex;
justify-content: space-between;
width: 854px;
margin: 0 auto 50px;
}

#detail .menub
{
width: 400px;
}


#detail h3
{
font-size: 34px;
text-align: center;
font-weight: bold;
}

#detail .fbox
{
	display: flex;
	justify-content: space-between;
	width: 1000px;
	margin: 0 auto;
}

#detail .box
{
font-size: 16px;
line-height: 2;
width: 516px;
height: 216px;
background-image: url("../image/front-page/detai_box1.png");
position: relative;
margin-bottom: 30px;
}
#detail .job1
{
position: absolute;
top: 210px;
left: 60px;
}

#detail .comment1
{
position: absolute;
top: 83px;
left: 277px;
}


#detail .box2
{

width: 483px;
height: 239px;
background-image: url("../image/front-page/detai_box2.png");
}

#detail .job2
{
position: absolute;
top: 230px;
left: 50px;
}

#detail .comment2
{
position: absolute;
top: 20px;
left: 250px;
}

#detail .rbox
{
padding-top: 100px;
}
#detail .box3
{

width: 480px;
height: 217px;
background-image: url("../image/front-page/detai_box3.png");
}

#detail .job3
{
position: absolute;
top: 210px;
left: 310px;
}

#detail .comment3
{
position: absolute;
top: 75px;
left: 20px;
}

#detail .box4
{

width: 483px;
height: 216px;
background-image: url("../image/front-page/detai_box4.png");
}

#detail .job4
{
position: absolute;
top: 210px;
left: 310px;
}

#detail .comment4
{
position: absolute;
top: 25px;
left: 20px;
}

#detail .mbf
{
	margin-bottom: 500px;
}


	#detail h4
	{
	font-size: 32px;
	margin-bottom: 20px;
	text-align: center;
	font-weight: bold;
	}

	#detail h4 span
	{
	padding: 10px 30px;

	background-color: #C2EAED
	}

	#detail .mb50{
		margin-bottom: 50px;
	}

#detail .img2{
	width: 573px;
	margin: 0 auto;
}

#detail .text1
{
	margin: 0 auto 50px;
	width: 700px;
	text-align: left;
	font-size: 16px;
	line-height: 2;

}

#detail h5
{
font-size: 28px;
margin-bottom: 30px;
text-align: center;
font-weight: bold;
}

#detail h5 span
{
  background: linear-gradient(180deg, white 0%, white 70%, #E1FC86 70%, #E1FC86 100%);
}

#detail .img3{
	width: 206px;
}

#detail .fbox2
{
	display: flex;
	justify-content: space-between;
	width: 700px;
	margin: 0 auto;
}

#detail .text2
{
font-size: 16px;
line-height: 2;
margin-right: 30px;
}


#detail .text3
{
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}

/* ================================================================================
trouble
================================================================================ */
#trouble
{
	min-width: 1100px;
	padding: 7rem 0 60rem;
background-color: #E1F2F8;
position: relative;

}
#trouble > .inner
{
	width: 1100px;
	margin: 0 auto;
}

#trouble h2
{
color: white;
font-size: 80px;
text-align: center;
font-weight: bold;

position: absolute;
top: 40px;
left: calc(50% - 200px);
}

#trouble h3
{
font-size: 34px;
text-align: center;
font-weight: bold;
}

#trouble h3 span
{
font-size: 24px;
color: black;
position: relative;
}

#trouble h3 span::before
{
position:absolute;
content: "";
width: 19px;
height: 14px;
top: 15px;
left: -20px;
background-image: url("../image/front-page/trouble_text1.png");

}

#trouble h3 span::after
{
position:absolute;
content: "";
width: 19px;
height: 14px;
top: 15px;
left: 195px;
background-image: url("../image/front-page/trouble_text2.png");

}

#trouble ul
{
position: relative;
}

#trouble li:nth-child(1)
{
width: 220px;
height: 283px;
padding-top: 15px;
background-image: url("../image/front-page/trouble_box1.png");
position: absolute;
top: 100px;
left: 150px;
}

#trouble p
{
text-align: center;
font-size: 20px;
}

#trouble span
{
text-align: center;
font-size: 26px;
color: #3BAFD9;
}


#trouble li:nth-child(2)
{
width: 173px;
height: 253px;
left: 350px;
top: 300px;
background-image: url("../image/front-page/trouble_box2.png");
position: absolute;
}

#trouble li:nth-child(3)
{
width: 303px;
height: 179px;
left: 150px;
top: 570px;
background-image: url("../image/front-page/trouble_box3.png");
position: absolute;
}

#trouble li:nth-child(3) p
{
position: absolute;
top: 15px;
left: 25px;
}



#trouble li:nth-child(4)
{
width: 222px;
height: 376px;
padding-top: 15px;
left: 600px;
top: 100px;
background-image: url("../image/front-page/trouble_box4.png");
position: absolute;
}

#trouble li:nth-child(4) .text1
{
position: absolute;
top: 15px;
left: 100px;
}

#trouble li:nth-child(4) .text2
{
position: absolute;
top: 115px;
left: 25px;
}


#trouble li:nth-child(5)
{
width: 256px;
height: 281px;
top: 550px;
left: 600px;
background-image: url("../image/front-page/trouble_box5.png");
position: absolute;
}

#trouble li:nth-child(5) .text1
{
position: absolute;
top: 25px;
left: 100px;
}

#trouble li:nth-child(5) .text2
{
position: absolute;
top: 100px;
left: 25px;
}

#trouble .img1{	width: 106px;	position: absolute; top: 1218px; left:calc(50% - 53px);	}


/* ================================================================================
recommend
================================================================================ */
#recommend
{
	min-width: 1100px;
	padding: 7rem 0 48rem;
background-image: url("../image/front-page/reccomend_bg2.png") ;
background-position: bottom;
background-size: contain;
background-repeat: no-repeat;

}
#recommend > .inner
{
	width: 1100px;
	margin: 0 auto;
	position: relative;

}

#recommend h3
{
font-size: 42px;
font-weight: bold;
}



#recommend li
{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 70px;
}

#recommend .text1
{
font-size: 20px;
line-height: 2;
font-weight: bold;
padding: 100px 120px 0 0;
}

#recommend .img1
{
width: 700px;
}

#recommend .img2
{
margin-left: 100px;
width: 407px;
}

#recommend .text2
{

margin-top: 30px;
margin-left: 120px;
font-size: 20px;
line-height: 2;
font-weight: bold;
}

#recommend .text3
{

font-size: 120px;
color: #DDF6FF;
position: absolute;
top: 450px;
left: 227px;
}

#recommend .text4
{
font-size: 100px;
color: #DDF6FF;
position: absolute;
top: 858px;
left: 379px;
}

#recommend .text5
{

font-size: 140px;
color: #DDF6FF;
position: absolute;
top: 1383px;
left: 529px;
}

#recommend h4
{
font-size: 40px;
text-align: center;
}

#recommend h4 span
{
font-weight: bold;
}

#recommend .box
{
padding-top: 115px;
background-image: url("../image/front-page/reccomend_bg.png");
background-size: cover;
background-repeat: no-repeat;
font-size: 28px;
text-align: center;
width: 420px;
height: 420px;
position: absolute;
top: 2300px;
left: 100px;
}


#recommend .box2
{
padding-top: 140px;
top: 2600px;
left: 600px;
}

#recommend .bimg1{	width: 258px;	position: absolute; top: -150px; left:800px;	}

#recommend .bimg2{	width: 106px;	position: absolute; top: 700px; left: 700px;	}

#recommend .bimg3{	width: 957px;	position: absolute; top: 1270px; left: 150px;	}

/* ================================================================================
detail2
================================================================================ */
#detail2
{
	min-width: 1100px;
	padding: 12rem 0 5rem;
position: relative;

}
#detail2 > .inner
{
	width: 1100px;
	margin: 0 auto;
}

#detail2 h3
{
font-size: 42px;
font-weight: bold;
text-align: center;
margin-bottom: 60px;
}

#detail2 h3 span
{
  background: linear-gradient(180deg, white 0%, white 70%, #E1FC86 70%, #E1FC86 100%);
}

#detail2 .fbox
{
display: flex;
justify-content: space-between;
width: 600px;
margin: 0 auto 100px;
}

#detail2 .box:nth-child(1)
{
width: 300px;
height: 300px;
padding-top: 50px;
background-image: url("../image/front-page/detail2_bg1.png");
}


#detail2 .box p
{
font-size: 24px;
text-align: center;
}

#detail2 .box span
{
font-size: 28px;
border-bottom: 5px solid #E1FC86;
}

#detail2 .number
{
font-size: 50px!important;
line-height: 2;
border-bottom: none!important;

}

#detail2 .img0
{
width: 160px;
margin: 0 auto 30px;
}

#detail2 .img1
{
width: 195px;
}

#detail2 .img2
{
width: 518px;
margin: 0 auto 100px;
}

#detail2 .button
{
width: 529px;
margin: 0 auto 100px;
}

#detail2 .img3
{
width: 534px;
margin: 0 auto 100px;
}

#detail2 .bimg1{	width: 199px;	position: absolute; top: -41px;left: 547px;	}

#detail2 .bimg2{	width: 83px;	position: absolute; top: 2500px; left: 1000px;	}
/* ================================================================================
movie
================================================================================ */
#movie
{
	min-width: 1100px;
	padding: 7rem 0 20rem;
position: relative;
background-repeat: no-repeat;
background-size: contain;
background-image: url("../image/front-page/bg_water_1.png");
background-position: 0% 100%;
}
#movie > .inner
{
	width: 1100px;
	margin: 0 auto;
}

#movie h2
{
color: #DDF6FF;
font-size: 80px;
text-align: center;
font-weight: bold;

position: absolute;
top: 40px;
left: calc(50% - 150px);
}

#movie h3
{
font-size: 34px;
text-align: center;
font-weight: bold;
margin-bottom: 30px;
}

#movie h4
{
margin-bottom: 50px;
font-size: 34px;
text-align: center;
font-weight: bold;
}

#movie h4 span
{
	border-bottom: 5px solid #DDF6FF;
}

#movie ul
{
width: 720px;
margin: 0 auto 100px;
}

#movie li
{
	padding: 15px;
	display: flex;
	border: 1px solid;
}

#movie p:nth-child(1)
{
font-weight: bold;
width: 150px;
}

#movie h5
{
font-size: 30px;
padding: 5px;
width: 484px;
margin: 0 auto 50px;
border-radius: 25px;
text-align: center;
color: white;
background-color: #2CB1EB;
font-weight: bold;
}

#movie .mbox
{
width: 800px;
height: 453px;
margin: 0 auto 80px;
}

#movie iframe
{
width: 800px;
height: 453px;
}


#movie .fbox
{
	display: flex;
	justify-content: space-between;
	margin: 0 auto 50px;
	width: 900px;
}

#movie .fbox .box
{
width: 286px;
padding: 20px 25px;
border: 1px solid #A1D2F7;
}

#movie .fbox .box picture
{
width: 241px;
margin: 0 auto;
}

#movie .note
{
font-weight: bold;
text-align: center;
margin-bottom: 50px;
}

#movie .button
{
width: 529px;
margin: 0 auto 100px;
}

#movie .bimg1{	width: 348px;
position: absolute;
top: 1714px;
left: 543px;	}

/* ========================================
SP
======================================== */
@media screen and (max-width: 767px)
{

	#KV
	{
		min-width: 100vw;
		padding: 10vw 5vw 65vw;
		background-image: url("../image/front-page/KV_background.png");
		background-size: cover;
	background-repeat: no-repeat;
	}
	#KV > .inner
	{
		width: 90vw;
		margin: 0 auto;
		position: relative;
	}

	#KV .text1
	{
		margin: 0 auto 1rem;
		text-align: left;
		font-size: 5.5vw;
		font-weight: bold;
		color: #1379BC;
	}

	#KV .text2
	{
		margin: 0 auto 5vw;
		text-align: left;
		color: #1379BC;
	 font-size: 4vw;
	}

	#KV .text2 span
	{
		line-height: 2.5;
		padding: 5px;
		background-color: white;
	}


	#KV h3{	width: 80vw;		}

	#KV .img1{	width: 50vw;	position: absolute; top: 80vw; left:-5vw;	}

	#KV .img2{	width: 50vw;	position: absolute; top: 95vw; left:44vw;	}

#KV .bimg1{	width: 12vw;	position: absolute; top: 131vw; left:0vw;	}

	/* ================================================================================
	explain
	================================================================================ */
	#explain
	{
		min-width: 100vw;
		padding: 10vw 5vw;

	position: relative;
	}
	#explain > .inner
	{
		width: 90vw;
		margin: 0 auto;
		display: block;
	}

	#explain .text1
	{
		margin: 0 auto 1rem;
		text-align: left;
		font-size: 5vw;
	}

	#explain .text2
	{
		margin: 0 auto 3rem;
		line-height: 2;
		text-align: left;
	 font-size: 16px;
	}



	#explain .button
	{
	width: 80vw;
	margin: 0 auto;
	/* margin-top: 0;
	margin-left: 0; */
	}

	#explain .bimg1{	width: 12vw;	position: absolute; top: 245vw; left:-5vw;	}

	#explain .bimg2{	width: 12vw;	position: absolute; top: 150vw; left: 82vw;	}

	#recommend .bimg1{	width: 35vw;	position: absolute; top: -15vw; left:55vw;	}

	#recommend .bimg2{	width: 20vw;	position: absolute; top: 90vw; left: 70vw;	}

	#recommend .bimg3{	width: 84vw;	position: absolute; top: 185vw; left: 15vw;	}
	/* ================================================================================
	detail
	================================================================================ */
	#detail
	{
		min-width: 100vw;
		padding: 0rem 0vw 10vw;
		background-repeat: no-repeat;
		background-size: contain;
		background-image: url("../image/front-page/bg_water_1.png");
		background-position: 0% 45%;
	}

	#detail > .inner
	{
		width: 90vw;
		margin: 0 auto;
	}

	#detail .menu
	{

	width: 90vw;
	margin: 0 auto 10vw;
	}

	#detail .menub
	{
	width: 44vw;
	margin-bottom: 5vw;
	}


	#detail h3
	{
	font-size: 5vw;
	text-align: left;
	font-weight: bold;
	}

	#detail .fbox
	{
		display: block;
		justify-content: space-between;
		padding-bottom: 10vw;
		width: 90vw;
		margin: 0 auto;
	}

	#detail .box
	{
	font-size: 3.5vw;
	line-height: 2;
	width: 90vw;
	height: 38vw;
	background-image: url("../image/front-page/detai_box1.png");
	background-size: cover;
	position: relative;
	margin-bottom: 30px;
	}

	#detail .job1
	{
	position: absolute;
	top: 40vw;
	left: 10vw;
	}

	#detail .mbf
	{
		margin-bottom: 40vw;
	}

	#detail .comment1
	{
	position: absolute;
	top: 14vw;
	left: 48vw;
	}


	#detail .box2
	{

	width: 90vw;
	height: 43vw;
	background-image: url("../image/front-page/detai_box2.png");
	}

	#detail .job2
	{
	position: absolute;
	top: 43vw;
	left: 7vw;
	}

	#detail .comment2
	{
	position: absolute;
	top: 2vw;
	left: 45vw;
	}

	#detail .rbox
	{
	padding-top: 10vw;
	}

	#detail .box3
	{
	width: 90vw;
	height: 40vw;
	background-image: url("../image/front-page/detai_box3.png");
	}

	#detail .job3
	{
	position: absolute;
	top: 40vw;
	left: 58vw;
	}

	#detail .comment3
	{
	position: absolute;
	top: 14vw;
	left: 3vw;
	}

	#detail .box4
	{

	width: 90vw;
	height: 40vw;
	background-image: url("../image/front-page/detai_box4.png");
	}

	#detail .job4
	{
	position: absolute;
	top: 40vw;
	left: 55vw;
	}

	#detail .comment4
	{
	position: absolute;
	top: 4vw;
	left: 4vw;
	}


		#detail h4
		{
		font-size: 6vw;
		margin-bottom: 5vw;
		text-align: center;
		font-weight: bold;
		}

		#detail h4 span
		{
		padding: 2vw 6vw;

		background-color: #C2EAED
		}

		#detail .mb50{
			margin-bottom: 10vw;
		}

	#detail .img2{
		width: 90vw;
		margin: 0 auto;
	}

	#detail .text1
	{
		margin: 0 auto 10vw;
		width: 90vw;
		text-align: left;
		font-size: 3.5vw;
		line-height: 2;

	}

	#detail h5
	{
	font-size: 5.5vw;
	margin-bottom: 5vw;
	text-align: center;
	font-weight: bold;
	}

	#detail .img3{
		width: 35vw;
	}

	#detail .fbox2
	{
		display: flex;
		justify-content: space-between;
		width: 90vw;
		margin: 0 auto;
	}

	#detail .text2
	{
	font-size: 3.6vw;
	line-height: 2;
	margin-right: 3vw;
	}


	#detail .text3
	{
		font-size: 4vw;
		font-weight: bold;
		text-align: center;
	}

	/* ================================================================================
	trouble
	================================================================================ */
	#trouble
	{
		min-width: 100vw;
		padding: 6rem 0 55rem;
	background-color: #E1F2F8;
	position: relative;

	}
	#trouble > .inner
	{
		width: 90vw;
		margin: 0 auto;
	}

	#trouble h2
	{
	color: white;
	font-size: 16vw;
	text-align: center;
	font-weight: bold;

	position: absolute;
	top: 8vw;
	left: calc(50% - 37vw);
	}

	#trouble h3
	{
	font-size: 6vw;
	text-align: center;
	font-weight: bold;
	}

	#trouble h3 span
	{
	font-size: 6vw;
	color: black;
	}

	#trouble ul
	{
	position: relative;
	}

	#trouble li
	{
	background-size: cover;
	}


	#trouble li:nth-child(1)
	{
	width: 44vw;
	height: 56vw;
	padding-top: 4vw;
	background-image: url("../image/front-page/trouble_box1.png");
	background-repeat: no-repeat;
	position: absolute;
	top: 10vw;
	left: 0;
	}

	#trouble p
	{
	text-align: center;
	font-size: 4vw;
	}

	#trouble span
	{
	text-align: center;
	font-size: 5vw;
	}


	#trouble li:nth-child(2)
	{
	width: 35vw;
	height: 51vw;
	padding: 1vw 0 0 2vw;
	left: 0px;
	top: 85vw;
	background-image: url("../image/front-page/trouble_box2.png");
	position: absolute;
	background-repeat: no-repeat;
	}

	#trouble li:nth-child(3)
	{
		width: 70vw;
		height: 40vw;
		left: 0px;
		top: 142vw;
	background-image: url("../image/front-page/trouble_box3.png");
	background-repeat: no-repeat;
	position: absolute;
	}

	#trouble li:nth-child(3) p
	{
	position: absolute;
	top: 4vw;
	left: 8vw;
	}



	#trouble li:nth-child(4)
	{
	width: 44vw;
	height: 74vw;
	left: 40vw;
	top: 10vw;
	background-image: url("../image/front-page/trouble_box4.png");
	background-repeat: no-repeat;
	position: absolute;
	}

	#trouble li:nth-child(4) .text1
	{
	position: absolute;
	top: 5vw;
	left: 21vw;
	}

	#trouble li:nth-child(4) .text2
	{
	position: absolute;
	top: 23vw;
	left: 4vw;
	}


	#trouble li:nth-child(5)
	{
	width: 50vw;
	height: 50vw;
	left: 40vw;
	top: 90vw;
	background-image: url("../image/front-page/trouble_box5.png");
	position: absolute;
	}

	#trouble li:nth-child(5) .text1
	{
	position: absolute;
	top: 5vw;
	left: 20vw;
	}

	#trouble li:nth-child(5) .text2
	{
	position: absolute;
	top: 20vw;
	left: 5vw;
	}

	#trouble .img1{	width: 26vw;	position: absolute; top: 237vw; left:calc(50% - 13vw);	}


	/* ================================================================================
	recommend
	================================================================================ */
	#recommend
	{
		min-width: 100vw;
		padding: 2rem 0 28rem;
	position: relative;
	background-image: url("../image/front-page/reccomend_bg2_sp.png") ;
	background-position: bottom;
	background-repeat: no-repeat;

	}
	#recommend > .inner
	{
		width: 100vw;
		margin: 0 auto;
	}

	#recommend h3
	{
	margin-left: 5vw;
	font-size: 6.2vw;
	font-weight: bold;
	}

	#recommend ul
	{
	margin-bottom: 15vw;
	}

	#recommend li
	{
	display: block;
	justify-content: space-between;
	align-items:  normal;
	margin-bottom: 5vw;
	}

	#recommend li:nth-child(2)
	{
display: flex;
	}

	#recommend li:nth-child(2) .text1
	{
padding-top: 35vw;
	}


	#recommend .text1
	{
	margin-left: 10vw;
	font-size: 4vw;
	line-height: 2;
	font-weight: bold;
	padding: 3vw 3vw 0 0;

	}

	#recommend .img1
	{
	width: 80vw;
	margin-left: auto;
	}

	#recommend .img2
	{
	margin-left: 0;
	width: 50vw;
	}

	#recommend .img3
	{
	margin-left: 0;
	width: 90vw;
	}

	#recommend .text2
	{

	margin-top: 0px;
	margin-left: 10vw;
	font-size: 4vw;
	line-height: 2;
	font-weight: bold;
	}

	#recommend .text3
	{

	font-size: 13vw;
	color: #DDF6FF;
	position: absolute;
	top: 50vw;
	left: 5vw;
	}

	#recommend .text4
	{
	font-size: 12vw;
	color: #DDF6FF;
	position: absolute;
	top: 120vw;
	left: 27vw;
	}

	#recommend .text5
	{

	font-size: 13vw;
	color: #DDF6FF;
	position: absolute;
	top: 195vw;
	left: 32vw;
	}

	#recommend h4
	{
	font-size: 5vw;
	text-align: center;
	}

	#recommend h4 span
	{
	font-size: 7vw;
	font-weight: bold;
	}

	#recommend .box
	{
	padding-top: 10vw;
	background-image: url("../image/front-page/reccomend_bg.png");
	background-size: cover;
	font-size: 4.5vw;
	text-align: center;
	width: 47vw;
	height: 47vw;
	position: absolute;
	top: 300vw;
	left: 5vw;
	}


	#recommend .box2
	{
	padding-top: 12vw;
	top: 340vw;
	left: 50vw;
	}

	/* ================================================================================
	detail2
	================================================================================ */
	#detail2
	{
		min-width: 100vw;
		padding: 5rem 0 5rem;
	position: relative;

	}
	#detail2 > .inner
	{
		width: 90vw;
		margin: 0 auto;
	}

	#detail2 h3
	{
	font-size: 4.5vw;
	line-height: 2;
	font-weight: bold;
	text-align: center;
	margin-bottom: 5vw;
	}

	#detail2 .fbox
	{
	display: flex;
	justify-content: space-between;
	width: 90vw;
	margin: 0 auto 10vw;
	}

	#detail2 .box:nth-child(1)
	{
	width: 45vw;
	height: 45vw;
	padding-top: 5vw;
	background-image: url("../image/front-page/detail2_bg1.png");
	background-size: cover;
	}


	#detail2 .box p
	{
	font-size: 5vw;
	text-align: center;
	}

	#detail2 .box span
	{
	font-size: 4vw;
	border-bottom: 5px solid #E1FC86;
	}

	#detail2 .number
	{
	font-size: 8vw!important;
	line-height: 2;
	}

	#detail2 .img0
	{
	width: 30vw;
	margin: 0 auto 5vw;
	}

	#detail2 .img1
	{
	width: 40vw;
	}

	#detail2 .img2
	{
	width: 90vw;
	margin: 0 auto 100px;
	}

	#detail2 .button
	{
	width: 90vw;
	margin: 0 auto 5vw;
	}

	#detail2 .img3
	{
	width: 90vw;
	margin: 0 auto 0vw;
	}

	#detail2 .bimg1{	width: 20vw;	position: absolute; top: -5vw; left:45vw;	}

	#detail2 .bimg2{	width: 20vw;	position: absolute; top: 420vw; left: 65vw;	}
	/* ================================================================================
	movie
	================================================================================ */
	#movie
	{
		min-width: 100vw;
		padding: 7rem 0 12rem;
	position: relative;

	}
	#movie > .inner
	{
		width: 90vw;
		margin: 0 auto;
	}

	#movie h2
	{
	color: #DDF6FF;
	font-size: 18vw;
	text-align: center;
	font-weight: bold;

	position: absolute;
	top: 10vw;
	left: calc(50% - 32vw);
	}

	#movie h3
	{
	font-size: 7vw;
	text-align: center;
	font-weight: bold;
	}

	#movie h4
	{
	margin-bottom: 10vw;
	font-size: 7vw;
	text-align: center;
	font-weight: bold;
	}

	#movie h4 span
	{
		border-bottom: 5px solid #DDF6FF;
	}

	#movie ul
	{
	width: 90vw;
	margin: 0 auto 10vw;
	}

	#movie li
	{
		font-size: 3.5vw;
		padding: 3vw;
		display: flex;
		border: 1px solid;
	}

	#movie li p:nth-child(1)
	{
	font-weight: bold;
	width: 30vw;
	}

	#movie li p:nth-child(2)
	{
	font-weight: bold;
	width: 55vw;
	}


	#movie h5
	{
	font-size: 6vw;
	padding: 1vw;
	width: 90vw;
	margin: 0 auto 10vw;
	border-radius: 8vw;
	text-align: center;
	color: white;
	background-color: #2CB1EB;
	font-weight: bold;
	}

	#movie .mbox
	{
	width: 90vw;
	height: 50vw;
	margin: 0 auto 10vw;
	}

	#movie iframe
	{
	width: 90vw;
	height: 50vw;
	}

	#movie .fbox
	{
		display: flex;
		justify-content: space-between;
		margin: 0 auto 5vw;
		width: 90vw;
	}

	#movie .fbox .box
	{
	width: 42vw;
	padding: 4vw 6vw;
	border: 1px solid #A1D2F7;
	font-size: 2.6vw;
	}

	#movie .fbox .box picture
	{
	width: 30vw;
	margin: 0 auto;
	}

	#movie .note
	{
	font-weight: bold;
	text-align: center;
	margin-bottom: 10vw;
	}

	#movie .button
	{
	width: 90vw;
	margin: 0 auto 0px;
	}

	#movie .bimg1{	width: 70vw;	position: absolute; top: 344vw; left: 15vw;	}


}



/* ======================================== end ======================================== */