@charset "UTF-8";

/*
#mainimg {
	position: relative;    
	margin-top: 0; 
	z-index: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	padding: 0px 0px 0;
	z-index: 2
}*/
#mainimg img {
	object-fit: cover;
	width: 100%;
	max-height: 100vh;
	object-position: center;
}
#mainimg .main-img-2 img {
	object-position: bottom center;
}

#mainimg-body{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 999;
    margin-top: 0px ;　
	overflow: hidden;
	padding: 59px 5% 0;
}
/*
#mainimg::after{content: '';display: block;width: 100%;height: 130px;background-color: #fff;position: absolute;left: 0;bottom: 0;z-index: 777;}*/
#mainimg h2{max-width: 400px;text-align: center;position: relative;overflow: hidden;}/*メインテキスト最大幅*/
.inner{position: relative; height: 100%;padding:0;overflow: hidden;z-index: 888;}
.inner .mask,.inner .mask_anim_inner{position: relative; overflow: hidden;} 
.bx-wrapper,.bx-viewport,.inner ul,.inner li,.inner .mask,.inner .mask_anim_inner{height: 100%!important;}
.inner img{
  -webkit-transition: .2s ease;
  transition: .2s ease;
}
.bx-wrapper,.bx-viewport,.inner ul,.inner li{height: 100%!important;}
.inner img{
  -webkit-transition: .2s ease;
  transition: .2s ease;
}

#topslide01{background: url("../img/main-01.jpg") no-repeat center center;background-size: cover;}
#topslide02{background: url("../img/main-02.jpg") no-repeat center center;background-size: cover;}
#topslide03{background: url("../img/main-03.jpg") no-repeat center center;background-size: cover;}


#index-scroll{position: absolute;bottom: 20px;right: 4.305555555556%;display: block;z-index: 666666;text-align: center;color: #fff;}
#index-scroll a{background: url("../img/index-scroll.svg") no-repeat center center;display: block;margin: 0 auto;width: 14px;height: 82px;overflow: hidden;position: relative;}
#index-scroll a:hover{opacity: 0.6;}
.mbYTP_wrapper{z-index: 888!important;}
.YTPOverlay.raster {background: url("../img/raster.png");}

@media (max-width: 960px) {
	#mainimg {padding: 10px 10px 0;}
}
@media (max-width: 767px) {
	#mainimg {padding: 5px 5px 0;}
	#index-scroll {right: 30px}
}
@media (max-height: 768px) {
	#mainimg h2{width: 40%;}
}

#contents{padding: 30px 0 120px;}
@media (max-width: 767px) {
	#contents{padding: 0 0 80px;}
}

#index-01{margin-bottom: 20px;}
@media (max-width: 767px) {
	#index-01{margin-bottom: 0;}
}
#diy-movie {
	padding-top: 80px;
	padding-bottom: 180px;
	height: auto;
	background-color: #f0f0f0;
}
@media only screen and (max-width: 800px)  {
	#diy-movie {
		padding-bottom: 100px;
	}	
}
#diy-movie .video-wrap {
	width: 100%;/*背景色を横幅いっぱいに広げる*/
	text-align: center;
	margin: auto;
}
#diy-movie .video-wrap video {
	width: 100%;
	cursor: pointer;
	position: static;
	top:unset;
	left: unset;
	background: none;
	z-index: 1;
}

#index-02 {
	overflow: inherit;
	height: auto;
	padding-bottom: 100px;
}
@media only screen and (max-width: 800px)  {
	#index-02 {
		padding-top: 80px;
		padding-bottom: 0;
	}	
}
#index-02 h2 {
	left: unset;
	right: 0;
	top:-150px;
}
@media only screen and (max-width: 800px)  {
	#index-02 h2 {
		right: unset;
		left: 50%;
		transform: translateX(-50%);
		top:-150px;
		margin-left: 0;
	}	
}
#index-02 .index-02-inner {
	display: flex;
	margin-top: 150px;
}
@media only screen and (max-width: 800px)  {
	#index-02 .index-02-inner {
		display: block;
		margin-left: auto;
		margin-right: auto;
		max-width: 500px;
		margin-top: 50px;
		margin-bottom: 50px;
	}
}
.index-02-inner .mask {
	display: block;
}
#index-02 .index-02-inner-01 {
	align-items:flex-end;
}
@media only screen and (max-width: 800px)  {
	#index-02 .index-02-inner-01 {
		margin-top: 150px;
		margin-bottom: 100px;
	}
}


#index-02 .index-02-inner-02 {
	align-items:flex-start;
	margin-top: 120px;
}
@media only screen and (max-width: 800px)  {
	#index-02 .index-02-inner-02 {
		margin-bottom: 100px;
		margin-top: 80px;
	}
}
#index-02 .index-02-inner-img,
#index-02 .index-02-inner-img img {
	width: 460px;
	vertical-align: bottom;
	max-width: 100%;
/*	position: relative;
	z-index: 1;	*/
}
@media only screen and (max-width: 1000px)  {
	#index-02 .index-02-inner-img,
	#index-02 .index-02-inner-img img {
		width: 350px;
	}
}
@media only screen and (max-width: 800px)  {
	#index-02 .index-02-inner-img {
		width: 100%;
	}
	#index-02 .index-02-inner-img img {
		width: 100%;
		object-fit: cover;
		max-height: 450px;
		object-position: top center;
	}
	#index-02 .index-02-inner-img .mask {
		width: 100%;
	}
}
@media only screen and (max-width: 500px)  {
	#index-02 .index-02-inner-img img {
		max-height: 300px;
	}	
}
#index-02 .index-02-inner-01 .index-02-inner-img {
	padding-bottom: 50px;
}
@media only screen and (max-width: 1000px)  {
	#index-02 .index-02-inner-01 .index-02-inner-img {
		padding-bottom: 0;
		align-self: flex-start;
		margin-top: -50px;
	}
}

@media only screen and (max-width: 800px)  {
	#index-02 .index-02-inner-01 .index-02-inner-img {
		padding-bottom: 0;
		margin-top: 0;
	}
}
#index-02 .index-02-inner-02 .index-02-inner-img {
	padding-top: 50px;
	order: 2;
}
@media only screen and (max-width: 1000px)  {
	#index-02 .index-02-inner-02 .index-02-inner-img {
		padding-top: 0;
		align-self: flex-end;
		margin-bottom: -50px;
	}
}
@media only screen and (max-width: 800px)  {
	#index-02 .index-02-inner-02 .index-02-inner-img {
		padding-top: 0;
		margin-bottom: 0;
	}
}
#index-02 .index-02-inner-text {
	width: calc(100% - 460px);
	background-color: white;
	height: 100%;
	min-height: 370px;
	padding: 50px;
	text-align: left;
}
@media only screen and (max-width: 1000px)  {
	#index-02 .index-02-inner-text {
		width: calc(100% - 350px);
		padding: 40px;
	}
}
@media only screen and (max-width: 800px)  {
	#index-02 .index-02-inner-text {
		width: 100%;
		padding: 30px;
	}
}
#index-02 .index-02-inner-text img {
	max-width: 100%;
	height: auto;
}
#index-02 .index-02-inner-01 .index-02-inner-text {
	margin-left: -150px;
	padding-left: 200px;
	width: calc(100% - 460px + 200px);
}
@media only screen and (max-width: 1000px)  {
	#index-02 .index-02-inner-01 .index-02-inner-text {
		margin-left: -150px;
		padding-left: 190px;
		width: calc(100% - 350px + 190px);
	}
}
@media only screen and (max-width: 800px)  {
	#index-02 .index-02-inner-01 .index-02-inner-text {
		width: 100%;
		margin-left: 0;
		padding-left: 30px;
	}
}
#index-02 .index-02-inner-02 .index-02-inner-text {
	margin-right: -150px;
	padding-right: 200px;
	width: calc(100% - 460px + 200px);
	order: 1;
}
@media only screen and (max-width: 1000px)  {
	#index-02 .index-02-inner-02 .index-02-inner-text {
		padding-right: 190px;
		width: calc(100% - 350px + 190px);
	}
}
@media only screen and (max-width: 800px)  {
	#index-02 .index-02-inner-02 .index-02-inner-text {
		width: 100%;
		margin-right: 0;
		padding-right: 30px;
	}
}
#index-02 .index-02-inner-text p {
	color: black;
}
#index-02 .index-02-inner-text-2 {
	padding-top: 30px;
	padding-bottom: 30px;
}
#index-02 .index-02-inner-text-3 {
	text-align: right;
}
#index-02 .index-02-inner-tel {
	font-size: 16px;
	text-align: right;
}
#index-02 .index-02-inner-tel a {
	text-decoration: none;
	color: black;
}


#index-04{position: relative;padding: 100px 0 0;background-color: #fff;}
#index-04 h2{margin-bottom: 60px;}
#index-04 p:nth-of-type(1){margin-bottom: 40px;}
#index-04 a{display: block;color: #171717;text-decoration: none;position: relative;}
#i04-c{width: 50%;position: absolute;margin-top: 11.25%;top: 0;left: 0;}
#index-04::before{content: '';display: block;width: 100%;padding-top: 19.722222222222%;position: absolute;bottom: 0;left: 0;background: url("../img/index-04-02.jpg") no-repeat center bottom;background-size: cover;}
#index-04 a:hover{opacity: 0.75}
@media (max-width: 960px) {
	#index-04 h2,#index-04 p:nth-of-type(1){margin-bottom: 30px;}
}
@media (max-width: 767px) {
	#index-04{padding-top: 80px;}
	#i04-c{margin-top: 0;position: relative;width: 100%;margin-bottom: -26%;}
	#index-04::before{padding-top: 35%;}
}

#news-list{padding: 120px 0 0;}


#index-05 {
	background-color: rgba(4,34,117,0.1);
	padding-top: 15px;
	padding-bottom: 100px;
	margin-top: 100px;
	text-align: center;
	height: auto;
}
@media only screen and (max-width: 800px)  {
	#index-05 {
		padding-bottom: 60px;
	}	
}

#index-05 .mask_anim,
#index-05 .mask_anim2 {
	background-color: rgb(229 232 241);
}
#index-05 h2 {
	margin-top: 50px;
	margin-bottom: 100px;
}
@media (max-width: 960px) {
	#index-05 h2 img {
		width: 400px;
	}
}
@media only screen and (max-width: 800px)  {
	#index-05 h2 {
		margin-bottom: 50px;
	}	
	#index-05 h2 img {
		width: 400px;
		max-width: 90%;
		margin: 0 auto;
	}
}

.index-05-inner {
	display: flex;
	align-items:center;
}
@media only screen and (max-width: 800px)  {
	.index-05-inner {
		display: block;
		max-width: 400px;
		margin-left: auto;
		margin-right: auto;
	}	
}
.index-05-inner-box {
	width: 33.33%;
	padding-left: 15px;
	padding-right: 15px;
}
@media only screen and (max-width: 800px)  {
	.index-05-inner-box {
		width: 100%;
		margin-bottom: 30px;
	}	
}
.index-05-inner-box-1 {
	position: relative;
}
.index-05-inner-box-1-link {
	position: absolute;
	bottom: 8%;
	left: calc(15px + 8%);
	width: 70%;
	display: inline-block;
}
.index-05-inner-box-1-link img {
	max-width: 100%;
}
.index-05-inner-box-1-img,
.index-05-inner-box-2-img {
	max-width: 97%;
}



#index-06 {
	height: auto;
}
#index-06 .index-06-inner {
	text-align: center;
	padding-top: 70px;
	padding-bottom: 70px;
}
@media only screen and (max-width: 800px)  {
	#index-06 .index-06-inner {
		padding-top: 100px;
		padding-bottom: 100px;
	}
}
#index-06 .index-06-inner img {
	max-width: 100%;
	height: auto;
}
#index-06 .title {
	margin-bottom: 30px;
}
#index-06 .mask {
	display: block;
}
#index-06 .mask_anim_inner {
	background-image: url(../img/index-06.jpg);
	background-size: cover;
}

#index-07 {
	height: auto;
	padding-top: 150px;
	padding-bottom: 150px;
	text-align: center;
}
@media only screen and (max-width: 800px)  {
	#index-07 {
		padding-top: 100px;
		padding-bottom: 100px;
	}
}
#index-07 img {
	max-width: 100%;
	height: auto;
}
.index-08-inner {
	display: flex;
	margin-top: 230px;
	margin-bottom: 100px;
}
@media only screen and (max-width: 800px)  {
	.index-08-inner {
		display: block;
		margin-top: 200px;
	}	
}
.index-08-inner-box {
	width: 50%;
	padding-left: 10px;
	padding-right: 10px;
	position: relative;
}
@media only screen and (max-width: 800px)  {
	.index-08-inner-box {
		width: 100%;
	}
}
.index-08-inner-box h2 {
	position: absolute;
	top: -180px;
	left: 0px;
	z-index: 2;
}
@media only screen and (max-width: 800px)  {
	.index-08-inner-box-2 {
		margin-top:190px;
	}
}
.index-08-inner-box-2 h2 {
	left: 80px;
}
@media only screen and (max-width: 800px)  {
	.index-08-inner-box-2 h2 {
		left: unset;
		right: 0;
	}
}
.index-08-inner-box img {
	max-width: 100%;
}

#index-09 {
	height: auto;
	padding-top: 70px;
	padding-bottom: 70px;
	background-color: #ededed;
	margin-top: 100px;
}
#index-09 .mask_anim,
#index-09 .mask_anim2 {
	background-color: #ededed;
}
#index-09 h2 {
	display: block;
	width: 100%;
	text-align: center;
	padding-bottom: 70px;
}
#index-09 h2 img {
	max-width: 100%;
}