@charset "utf-8";


/* ----------------
 共通
------------------- */
p.lh-2{
 line-height: 2; 
}
/* -----------------
 home
-------------------- */
.movie_box{
 position: relative;
 width: 100%;
}
.movie_box video{
 position: absolute;
 width: 150%;
 top: 43vw;
 left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
 outline: none;
 border: none;
 filter: drop-shadow(0px 0px rgba(0, 0, 0, 0));
}
.modal-content .youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.modal-content .youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.iframe-wrapper {
  position: relative;
  overflow: hidden;
  height: 90vw;
  width: 100%;
}

.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
canvas{
 width: 100% !important;
}
/* ----------------------
 home pc
------------------------- */
.btn_10{
 margin-top: 30px;
 width: 280px;
}
.btn_10 a{
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 280px;
	font-size: 110%;
	padding: 15px 30px;
	font-weight: bold;
	border-radius: 37px;
	border-top: 3px solid #333;
	border-left: 3px solid #333;
	border-right: 3px solid #333;
	border-bottom: 3px solid #333;
	background: #fff url(images/home/arrow-3.png) no-repeat 90% center;
	color: #333;
	transition: .2s;
	box-shadow: 0px 5px #333;
} 

.btn_10 a:hover {
	box-shadow: none;
	position: relative;
	top: 7px;
	background: #fff url(images/home/arrow-3.png) no-repeat 91% center;
}
.btn_maru{
 width: 78px;
 height: 78px;
}
.btn_maru a{
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 5vw;
	height: 5vw;
	font-weight: bold;
	border-radius: 50%;
	border: 3px solid #333;
	background: #fff url(images/home/arrow-3.png) no-repeat center center;
	color: #333;
	transition: .2s;
	box-shadow: 0px 5px #333;
}
.btn_maru a:hover {
	box-shadow: none;
	position: relative;
	top: 7px;
	background: #fff url(images/home/arrow-3.png) no-repeat center center;
}
#canvas,
#animation_container{
 z-index: 1;
}
#anime_wrapper{
 position: relative;
} 
@media screen and (min-width: 769px) {/* pcまで */
.home #wrapper{
 background: url(images/home/foot-bg.png) no-repeat center bottom;
 background-size: 100% auto;
 height: 100%;
 overflow: hidden;
}

.sp_header,
.home_header{
background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,1) 100%);
 position: fixed;
 transition: padding .3s, background-color .3s; /* 背景色と高さをじんわり変更 */
 top: 0;
 left: 0;
}
.sp_header.under,
.home_header.under{
 background: rgba(255,255,255,.9) !important; 
}
.sp_header .second,
.home_header .second{
 display: none;
}
.sp_header.under .first,
.home_header.under .first{
 display: none;
}
.sp_header.under .second,
.home_header.under .second{
 display: block;
}
.home #contents{
 position: relative;
 width: 100%;
 overflow: hidden;
 background-color: ;
 margin-top: 80vw;
}

.home article .inner{
 max-width: 1200px;
 margin-left: auto;
 margin-right: auto;
 padding-left: 1%;
 padding-right: 1%;
 padding-bottom: 20px;
}
.home #contents article{
 width: 100%;
 margin-left: auto;
 margin-right: auto;
}

.t_right{
 text-align: right;
}

.home article h3{
}

/* --------------------------- */
#header .outer{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 5;
}
#header .title{
 position: absolute;
 top: 20vw;
 left: 14%; 
}

.home article{
 position: relative;
 overflow: hidden;
}
.top_text{
 position: absolute;
 top: 70vw;
 left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
 margin-left: auto;
 margin-right: auto;
 text-align: center;
 line-height: 2.5;
 font-size: 120%;
 z-index: 2;
}
/* --------------------------- group_1 PC*/
.home .group_1{
 min-height: 600px;
 margin-left: auto;
 margin-right: auto;
 padding: 25vw 0 5vw 0;
 background: url(images/home/bg-base-01.png) no-repeat top center;
 background-size: 100% auto;
 height: 84.6vw;
}
.group_1 .text_group{
 min-width: 370px;
 max-width: 400px;
 display: block;
 float: right;
 margin-right: 0;
}
.group_2 .text_group{
 min-width: 400px;
 max-width: 410px;
 display: block;
 float: right;
 margin-right: 3vw;
 
}
.group_3 h2.title,
.group_2 h2,
.group_1 h2{
 border-radius: 10px;
 display: inline-block;
 background-color: #000;
 font-size: 150%;
 padding: 4px 25px;
 font-weight: bold;
 margin-bottom: 20px;
 letter-spacing: 2px;
 color: #fff;
}
.group_2 strong,
.group_1 strong{
 display: inline-block;
 font-size: 300%;
 font-size: 3vw;
 font-weight: 500;
 margin-bottom: 20px;
 color: #333;
}
.group_2 .text,
.group_1 .text{
 width: 330px;
 color: #333;
}
/* --------------------------- */
.home .group_2{
 padding: 5vw 0 0 0;
 min-height: 600px;
 height: 84vw;
 background: url(images/home/bg-base-02.png) no-repeat top center;
 background-size: 100% auto;
 margin-left: auto;
 margin-right: auto;
 color: #fff;
}
/* --------------------------- group_3 PC*/
.group_3 strong{
 display: inline-block;
 font-size: 300%;
 font-size: 3vw;
 font-weight: 500;
 margin-bottom: 20px;
 color: #333;
 background-color: #fff;
 padding: 5px 10px;
}

.home .group_3 {
 padding: 5vw 0 20vw 0;
 min-height: 600px;
 min-height: 130vw;
 background: url(images/home/bg-base-03.png) no-repeat top center;
 background-size: 100% auto;
 margin-left: auto;
 margin-right: auto;
 position: relative;
 z-index: 1;
}
.group_3 .name{
 font-size: 130%;
 background-color: #fff;
 padding: 5px 10px;
 display: inline-block;
 border-radius: 6px;
 font-weight: 500;
}
.group_3 .name span{
 font-size: 80%;
 margin-right: 20px;
}

.group_3 .box_1{
 background: url(images/home/g3-bg.png) no-repeat center top;
 background-size: 100% auto;
 max-width: 70%;
 margin: 15vw auto 5vw auto;
 margin-right: auto;
 min-height: 38vw;
 overflow: hidden;
 
}
.group_3 .text_group{
 position: absolute;
 z-index: 3;
 top: 29vw;
 left: 5%;
 padding-bottom: 10px;
}
.group_3 .text_group .btn_10{
 margin-top: 60px !important;
}
.group_3 .img_01{
 margin-left: -3vw;
}
.group_3 h2.title_2{
 max-width: 50%;
 margin: 0 auto 5vw auto;
}
.group_3 .box_2{
 max-width: 80%;
 margin: 7vw auto 16vw auto;
 margin-right: auto;
 height: auto;
}
.group_3 .box_3{
 display: grid;
 grid-template-columns: 45% 45%;
 justify-content: space-between;
 max-width: 65%;
 margin-left: auto;
 margin-right: auto;
}
.group_3 .box_3 li{
 position: relative;
}
.group_3 .box_3 li .btn_maru{
 position: absolute;
 bottom: 18%;
 right: 23%;
}

.content_bg_1{
 max-width: 20%;
 position: absolute;
 top: 48%;
 left: 50%;
}

.group_3 .box_3 li:nth-child(1){
 min-height: ;
 margin: ;
 background: url(images/home/4-1-pc.png) no-repeat center top;
 background-size: 100% auto;
}
.group_3 .box_3 li:nth-child(2){
 width: ;
 background: url(images/home/4-2-pc.png) no-repeat center top;
 background-size: 100% auto;
}
ul.box_3 li{
 overflow: hidden;
 position: relative;
 min-height: 30vw;
}
.group_3 li h3{
 font-size: min(3.5vw, 280%);
 font-size: 3.5vw;
 font-weight: 500;
 text-align: center;
 margin-top: 12vw;
}

}/* pc end */

@media screen and (max-width: 1210px) {/* 以下 */

}/*  */
/* ---------------------------
 HOME SP
------------------------------ */
@media screen and (max-width: 768px) {/* sp */
body{
 height: 100%;
}
html{}
.home #wrapper{
 height: 100%;
 float: left;
 width: 100%;
 overflow: hidden;
 overflow: scroll; 
}
/* --------------------------- */
.arrow_box .slick-next{
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 50px;
	height: 50px;
	font-weight: bold;
	border-radius: 50%;
	border: 2px solid #333;
	background: #fff url(images/home/arrow-3.png) no-repeat center center;
	color: #333;
	transition: .2s;
	box-shadow: 0px 5px #333;
}
.btn_maru a{
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 50px;
	height: 50px;
	font-weight: bold;
	border-radius: 50%;
	border: 2px solid #333;
	background: #fff url(images/home/arrow-3.png) no-repeat center center;
	color: #333;
	transition: .2s;
	box-shadow: 0px 5px #333;
}
.arrow_box .slick-next:hover{
	box-shadow: none;
	position: relative;
	top: 5px;
	background: #fff url(images/home/arrow-3.png) no-repeat center center;
}
.btn_maru a:hover {
	box-shadow: none;
	position: relative;
	top: 5px;
	background: #fff url(images/home/arrow-3.png) no-repeat center center;
}
.arrow_box .slick-prev{
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 50px;
	height: 50px;
	font-weight: bold;
	border-radius: 50%;
	border: 2px solid #333;
	background: #fff url(images/home/arrow-3-left.png) no-repeat center center;
	color: #333;
	transition: .2s;
	box-shadow: 0px 5px #333;
}
.arrow_box .slick-prev:hover,
.btn_maru a:hover {
	box-shadow: none;
	position: relative;
	top: 5px;
	background: #fff url(images/home/arrow-3-left.png) no-repeat center center;
}
.arrow_box .slick-next{
 text-indent: -9999px;
 position: absolute;
 top: 0;  
 right: 0;
 z-index: 10;
}
.arrow_box .slick-prev{
 text-indent: -9999px;
 position: absolute;
 top: 0; 
 left: 0;
 z-index: 10;
}
.arrow_box{
 width: 130px;
 height: 50px;
 position: relative;
 float: right;
 margin: 10px 20% 0 0;
 z-index: 10;
}
ul.slide{
}
.slide_outer{
 background: url(images/home/slide-bg.png) no-repeat right 120%;
 background-size: 120% auto;
 padding-bottom: 40vw;
}
/* ---------------------------- */
.btn_maru{
 width: 50px;
 height: 50px;
}
.sp_header{
 background: url(images/home/head-bg.png) no-repeat center top;
 background-size: 100% auto;
 height: 80px;
}
.sp_header.under{
 background-color: rgba(255,255,255, .9);
}

#contents,
.outer_block{
 z-index: 1 !important;
}

#sp_header{
 z-index: 10;
}
#sp_header .logo{
}
#sp_header .title{
}
.home article{
 position: relative;
 overflow: hidden;
}
#contents{
 background: url(images/home/head-bg-sp.png) no-repeat center -10vw;
 background-size: 100% auto;
 padding-top: 10vw;
}

/* ---------------------------  */
.main_title{
 max-width: 65%;
 margin-left: 10%;
}
.top_text_group{
 margin-top: 100vw;
 padding: 20vw 10% 5vw 10%;
}
.top_text{
 text-align: center;
 line-height: 2.3;
 font-size: 110%;
}
.home .group_1{
 margin-left: auto;
 margin-right: auto;
 padding: 120vw 0 5vw 0;
 background: url(images/home/bg-1-sp.png) no-repeat top center;
 background-size: 100% auto;
}
.home .group_2{
 margin-left: auto;
 margin-right: auto;
 padding: 120vw 0 5vw 0;
 background: url(images/home/bg-2-sp.png) no-repeat top center;
 background-size: 100% auto;
}

.group_2 .text_group,
.group_1 .text_group{
 padding: 0 5% 0 5%;
}

.group_3 h2.title,
.group_2 h2,
.group_1 h2{
 border-radius: 10px;
 display: inline-block;
 background-color: #000;
 font-size: 120%;
 padding: 4px 25px;
 font-weight: bold;
 margin-bottom: 15px;
 letter-spacing: 2px;
 color: #fff;
}
.group_2 strong,
.group_1 strong{
 display: inline-block;
 font-size: 200%;
 font-weight: 500;
 margin-bottom: 20px;
 color: #333;
}
.group_3 strong{
 display: inline-block;
 font-size: 200%;
 font-weight: 500;
 margin-bottom: 20px;
 color: #333;
 background-color: #fff;
 padding: 5px 10px;
}
.group_3.title h2{
 margin-top: 50vw;
}
.bg_box_sp{
 height: 170vw;
 background: url(images/home/bg-3-sp.png) no-repeat top center;
 background-size: 100% auto;
}
.group_3{
 width: 100%;
 padding-top: 35vw;
 background: url(images/home/g3-bg-sp.png) no-repeat top center;
 background-size: 230% auto;
 
}
.group_3 .box_1{
 overflow: hidden;
 background: url(images/home/3-1-sp.png) no-repeat left 10vw top 0;
 background-size: 100% auto;
}
.group_3 .text_group{
 margin: 53vw 0 0 5vw;
 padding-bottom: 10px;
}
.group_3 .name{
 font-size: 130%;
 background-color: #fff;
 padding: 5px 10px;
 display: inline-block;
}
.group_3 .name span{
 font-size: 80%;
 margin-right: 20px;
}
.group_3 h2.title_2{
 max-width: 70%;
 margin-left: auto;
 margin-right: auto;
 margin-top: 8vw;
}

.group_3 .box_3 li:nth-child(1){
 width: 80%;
 min-height: 85vw;
 margin: 0 auto 5vw auto;
 background: url(images/home/4-1b.png) no-repeat center top;
 background-size: 100% auto;
}
.group_3 .box_3 li:nth-child(2){
 margin: 0 auto;
 min-height: 85vw;
 width: 80%;
 background: url(images/home/4-2b.png) no-repeat center top;
 background-size: 100% auto;
}
ul.box_3 li{
 overflow: hidden;
 position: relative;
}
.group_3 li h3{
 font-size: 180%;
 font-weight: 500;
 text-align: center;
 margin-top: 45vw;
}
ul.box_3 .btn_maru{
 position: absolute;
 right: 20px;
 bottom: 34%;  
}
.foot_group{
 padding-top: 40vw;
 background: url(images/home/foot-bg-sp.png) no-repeat center top;
 background-size: 100% auto;
}


}/* sp end */
/* -------------------------------------
 追加のアクション等
---------------------------------------- */
/* ----------------------
 home slide pc
------------------------- */
@media screen and (min-width: 769px) {/* pcまで */
#header{
 z-index: 150;
}
/* ------------------------------------- */
.movie {
	overflow: hidden;
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.movie video {
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: 100%;
	display: block;
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%,-50%);
}

/* ------------------------------------- */
}/* PC */
@media screen and (max-width: 768px) {/* SP */

}/* SP */
/* ------------------------------------- */
@media screen and (min-width: 769px) {/* pcまで */
/* ------------------------------------- hoverで背景丸くなるMOVIEボタン */
.btn_m {
 text-align: center;
}
.btn_m span{
 display: block;
 width: 88px;
 height: 88px;
 background: url(images/home/movie-botan.png) no-repeat center center;
 position: relative;
 overflow: hidden;
 border-radius: 50%;
 float: right;
}
.btn_m a{
 color: #fff;
 font-weight: bold;
 text-decoration: none;
 display: inline-block;
 cursor: pointer;
}
#slide .btn_m p{
}
.btn_m span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  background:#009ed8 url(images/home/movie-botan.png) no-repeat center center;
  z-index: 0;
  transition: all 0.3s ease-out;
  border-radius: 50%;
}
.btn_m > span {
  display: block;
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  z-index: 2;
}
.btn_m a:hover span::before{
  width: 88px;
  height: 88px;
}

.btn_m span:hover::before {
  width: 88px;
  height: 88px;
}

/* ---------------------------------------- */
}/* PC */