@charset "utf-8";

*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
html,body{
  height:100%;
	margin:0;
	padding:0;
}
body {
	background: url("../../img/com_page_bg.jpg") center top;
  color: #32d6d5;
	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
	font-weight: normal;
}
.font-koz{
  font-family: '小塚ゴシック Pro','Kozuka Gothic Pro', "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
}
img{ max-width: 100%;}
a{ color: inherit; text-decoration: none; transition: all .3s;}
.hover-opa{	transition: all .3s;}
.hover-opa:hover{	cursor: pointer; opacity: 0.7;	transition: all .3s;}
li{ list-style: none;}
@media screen and (min-width:768px) { .pc-none{ display: none!important; } }
@media screen and (max-width:767px) {	.sp-none{ display: none!important; } }
.clearfix { width:100%; }
.clearfix:after { content: "　";	clear: both; font-size: 1px; display: block; height:0; }

/* common
----------------------------------------------------------------------------------------*/


/* header
----------------------------------------------------------------------------------------*/
header{
	min-width: 1360px;
	padding: 0 15px;
	position: fixed;
  text-align: center;
	top:0;
  width: 100%;
	z-index: 10;
}
@media screen and (max-width:767px) {
	header{
		left: auto;
		min-width: 0;
		padding: 0;
	}
}

header .header-inner-wrap{
	align-items: center;
	background: rgba(0,0,0,.9);
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	padding: 14px 234px 14px 60px;
  position: relative;
	width: 1160px;
}
@media screen and (max-width:767px) {
	header .header-inner-wrap{
    height: 15vw;
    overflow: hidden;
    padding: 2.66vw;
    width: auto;
	}
	header .header-inner-wrap nav.open{
		background: rgba(0,0,0,.5);
		display: block;
		margin: 0;
		padding: 0;
		position: fixed;
		top: 0;
		right: 0;
		width: 100vw;
		height: 100vh;
	}
}
header .header-inner-wrap h1{
  font-size: 14px;
  line-height: 31px;
}
header .header-inner-wrap h1 img{
  margin-right: 10px;
	width: 82px;
}
@media screen and (max-width:767px) {
	header .header-inner-wrap h1{
		width: 24.8vw;
	}
}

@media screen and (max-width:767px) {
	header .header-inner-wrap nav{
    display: none;
		position: relative;
    z-index: 3;
	}
}

header .header-inner-wrap nav ul{
	align-items: center;
	display: flex;
	font-size: 14px;
	justify-content: space-between;
  width: 566px;
}
@media screen and (max-width:767px) {
	header .header-inner-wrap nav ul{
		background: rgba(0,0,0,.8);
		position: absolute;
		display: block;
		right: -70vw;
		padding: 15vw 0 5.33vw;
		width: 70vw;
		height: 100vh;
    z-index: 9999;
	}
	header .header-inner-wrap nav.open ul{
		position: absolute;
		display: block;
		right: 0;
		width: 85vw;
		animation-name: slideIn;
		animation-duration: .5s;
	}
	@keyframes slideIn {
    from { right:-70vw; }
    to { right:0; }
	}
}

@media screen and (max-width:767px) {
	header .header-inner-wrap nav ul li{
		border-bottom: 1px solid #197D7C;
		font-size: 4.33vw;
		margin-right: 0;
		padding: 0 5.44vw;
		line-height: 4;
    text-align: left;
	}
	header .header-inner-wrap nav ul li:first-child{
		border-top: 1px solid #197D7C;
	}
	header .header-inner-wrap nav ul li a{
		display: block;
		width: 100%;
	}
  header .header-inner-wrap nav ul li p{
    font-size: 3.73vw;
  }
  header .header-inner-wrap nav ul li p span{
    font-size: 3.43vw;
    margin-left: 2vw;
    position: relative;
    top:-2px;
  }
  header .header-inner-wrap nav ul li p::before{
    content: "▶";
    margin-right: .5em;
  }
}

@media screen and (max-width:767px) {
	header .sp-menu{
		align-items: center;
		background: #000;
		border: 1px solid #32d6d5;
		border-radius: 6px;
		color: #32d6d5;
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 12vw;
		padding: 2vw;
		position: fixed;
		top: 1.33vw;
		right: 2.66vw;
		width: 12vw;
    z-index: 5;
	}
	header .sp-menu span{
		display: block;
		border-top: 2px solid #32d6d5;
		position: relative;
		width: 100%;
		height: 6vw;
	}
	header .sp-menu span::before{
		content: "";
		height: 0;
		display: block;
		border-top: 2px solid #32d6d5;
		position: absolute;
		bottom: 50%;
		width: 100%;
		transition: .1s;
	}
	header .sp-menu span::after{
		content: "";
		height: 0;
		display: block;
		border-top: 2px solid #32d6d5;
		position: absolute;
		bottom: 0;
		width: 100%;
		transition: .1s;
	}
	header .sp-menu.close{
		position: fixed;
	}
	header .sp-menu.close span{
		border-top: none;
	}
	header .sp-menu.close span::before{
		transform: rotate(45deg) ;
		transition: .1s;
	}
	header .sp-menu.close span::after{
		bottom: 50%;
		transform: rotate(-45deg);
		transition: .1s;
	}
}

header .fixed-btn{
  position: absolute;
  right: calc(50% - 580px);
  top:0;
  z-index: 1;

}
header .fixed-btn.anime{
  opacity: 1;
  animation-name: winkBtn;
  animation-duration: 2s;
  animation-iteration-count:infinite;
  animation-timing-function:ease-out;
}
@keyframes winkBtn {
0% {opacity:1;}
20% {	opacity:.3;}
100% {opacity:1.5;}
}
header .fixed-btn.hover-anime{
  opacity: 1;
  transition: .3s;
}
@media screen and (max-width:767px) {
  header .fixed-btn{
    position: absolute;
    right: calc(50% - 24.4vw);
    top:10.13vw;
  }
  header .fixed-btn a img{
    width: 48.8vw;
  }
}

/* footer
----------------------------------------------------------------------------------------*/
footer{
  align-items: center;
  background: url("../../img/com_footer_bg.jpg") center top no-repeat;
	display: flex;
  flex-direction: column;
	height: 263px;
  padding: 40px 0 60px;
  min-width: 1360px;
}
@media screen and (max-width:767px) {
  footer{
    background: url("../../img/com_footer_bg.jpg") center top /cover no-repeat;
    height: 26.66vw;
    padding: 8vw 0 0;
    min-width: 0;
    width: auto;
  }
}

footer ul{
  color: #fff;
  display: flex;
  justify-content: space-between;
  width: 576px;
  font-size: 14px;
  margin-bottom: 60px;
}
footer small{
  width: 130px;
}
@media screen and (max-width:767px) {
  footer small{
    width: 22.66vw;
  }
}

/* index
----------------------------------------------------------------------------------------*/
body#index{
  overflow-x: hidden;
  opacity: 0;
}
/* intro -----------------------------*/
body#index .intro-wrap{
  background: #28313a;
  height: 100vh;
  overflow: hidden;
  position:fixed;
  width: 100vw;
  z-index: 99;
}
body#index .intro-wrap .intro-inner{
  background: #252934;
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  position: relative;
  width: 100vw;
}
body#index .intro-wrap .intro-inner .rotate-bg{
  background: #28313a;
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: calc(50% - 60vw);
  left : calc(50% - 60vw);
  height: 120vw;
  width: 120vw;
}
@media screen and (max-width:767px) {
  body#index .intro-wrap .intro-inner .rotate-bg{
    top: calc(50% - 65vh);
    left : calc(50% - 65vh);
    height: 130vh;
    width: 130vh;
  }
}


body#index .intro-wrap .intro-inner .rotate-bg span{
  height: 100%;
  width: 50%;
}
body#index .intro-wrap .intro-inner .rotate-bg span.left-bg{
  background: url("../../img/top_gate_left_bg.jpg") left top /contain no-repeat;
}
body#index .intro-wrap .intro-inner .rotate-bg span.right-bg{
  background: url("../../img/top_gate_right_bg.jpg") right top /contain no-repeat;
}
@media screen and (max-width:767px) {
  body#index .intro-wrap .intro-inner .rotate-bg span.left-bg{
    background: url("../../img/top_gate_left_bg_sp.jpg") left top /contain no-repeat;
  }
  body#index .intro-wrap .intro-inner .rotate-bg span.right-bg{
    background: url("../../img/top_gate_right_bg_sp.jpg") right top /contain no-repeat;
  }
}

body#index .intro-wrap .intro-inner .rotate-bg.open{
  background: none;
}

body#index .intro-wrap .intro-inner .rotate-bg.open span,
body#index .intro-wrap .intro-inner .rotate-bg.open_hori span{
  transition-duration: 2s;
  transition-delay: 1s;
}
body#index .intro-wrap .intro-inner .rotate-bg.open span.left-bg{
  margin-left: -50vw;
}
body#index .intro-wrap .intro-inner .rotate-bg.open span.right-bg{
  margin-right: -50vw;
}
body#index .intro-wrap .intro-inner .rotate-bg.open_hori span.left-bg{
  margin-top: -50vw;
}
body#index .intro-wrap .intro-inner .rotate-bg.open_hori span.right-bg{
  margin-bottom: -50vw;
}

body#index .intro-wrap .intro-inner .txt-box{
  display: flex;
  justify-content: space-between;
  z-index: 2;
  padding-bottom: 20px;
  width: 100vw;
}
body#index .intro-wrap .intro-inner .txt-box span{
  display: block;
  height: 100%;
  width: 50vw;
}
body#index .intro-wrap .intro-inner .txt-box span.txt-left{
  text-align: right;
}
body#index .intro-wrap .intro-inner .txt-box span.txt-right{
  text-align: left;
}
body#index .intro-wrap .intro-inner .txt-box.open span{
  transition-duration: 2s;
  transition-delay: 1s;
}
body#index .intro-wrap .intro-inner .txt-box.open span.txt-left{
  margin-left: -50vw;
}
body#index .intro-wrap .intro-inner .txt-box.open span.txt-right{
  margin-right: -50vw;
}

/* アンカーの場合 */
body#index .intro-wrap .intro-inner .txt-box.open.open-anc span{
  transition-duration: 1s;
  transition-delay: 0s;
}
body#index .intro-wrap .intro-inner .rotate-bg.open.open-anc span,
body#index .intro-wrap .intro-inner .rotate-bg.open_hori.open-anc span{
  transition-duration: 1s;
  transition-delay: 0s;
}




/* block01 ---------------------------*/
#index .block01{
  display: block;
  height: 798px;
  padding: 0 0 0;
  position: relative;
  text-align: center;
  width: 100%;
  min-width: 1360px;
}
@media screen and (max-width:767px) {
  #index .block01{
    height: 171.46vw;
    min-width: 0;
  }
}

#index .block01 .kv-mask{
  position: absolute;
  top: 0;
  left: calc(50% - 960px);
  margin: 0 auto;
  width: 1920px;
  max-width: 1920px;
  min-width: 1920px;
  z-index: 1;
}
@media screen and (max-width:767px) {
  #index .block01 .kv-mask{
    left: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

#index .block01 .slide-wrap01{
  display: block;
  margin: 0 auto;
  position: absolute;
  top:151px;
  left: calc(50% - 451px);
  width: 910px;
  z-index: 1;
}
@media screen and (max-width:767px) {
  #index .block01 .slide-wrap01{
    top:58vw;
    left: 6.6vw;
    width: 86.8vw;
  }
}

#index .block01 .slide-wrap01-thumb{
  display: block;
  margin: 0 auto;
  position: absolute;
  bottom:132px;
  left: calc(50% - 450px);
  width: 909px;
  z-index: 2;
}
@media screen and (max-width:767px) {
  #index .block01 .slide-wrap01-thumb{
    bottom:23.86vw;
    left: 0;
    width: 100%;
  }
}

#index .block01 .slide-wrap01-thumb p{
  height: 500px;
  font-size: 15px;
  margin-top: 27px;
  padding-top: 485px;
}
@media screen and (max-width:767px) {
  #index .block01 .slide-wrap01-thumb p{
    height: 89.06vw;
    font-size: 2.66vw;
    margin-top: 5.33vw;
    padding-top: 86.1vw;
  }
}

#index .block01 .slick-dots{
  bottom: 67px;
}
@media screen and (max-width:767px) {
  #index .block01 .slick-dots{
    bottom: 11.73vw;
  }
}

#index .block01 .slick-dots li {
  width: 8px;
  height: 8px;
  margin: 0 20px;
}
@media screen and (max-width:767px) {
  #index .block01 .slick-dots li {
    width: 6px;
    height: 6px;
    margin: 0 10px;
  }
}

#index .block01 .slick-dots li button {
  width: 10px;
  height: 10px;
  padding: 0;
}
@media screen and (max-width:767px) {
  #index .block01 .slick-dots li button {
    width: 6px;
    height: 6px;
    padding: 0;
  }
}

#index .block01 .slick-dots li button:before {
  background: #fff;
  border: 1px solid #666;
  border-radius: 100%;
  font-size: 6px;
  line-height: 8px;
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  content: '';
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  opacity: 1;
}
@media screen and (max-width:767px) {
  #index .block01 .slick-dots li button:before {
    font-size: 6px;
    line-height: 6px;
    width: 6px;
    height: 6px;
  }
}

#index .block01 .slick-dots li.slick-active button:before{
  background: #999;
}

/* block02 ---------------------------*/
#index .block02{
  padding: 95px 0 35px;
}
@media screen and (max-width:767px) {
  #index .block02{
    padding: 18.66vw 0 0;
  }
}

#index .block02 .cont-inner-wrap{
  margin: 0 auto;
  width: 1028px;
}
@media screen and (max-width:767px) {
  #index .block02 .cont-inner-wrap{
    width: auto;
  }
}

#index .block02 .cont-inner-wrap h2{
  margin-bottom: 75px;
  text-align: center;
}
@media screen and (max-width:767px) {
  #index .block02 .cont-inner-wrap h2{
    margin-bottom: 12.53vw;
  }
  #index .block02 .cont-inner-wrap h2 img{
    height: 6.4vw;
  }
}

#index .block02 .cont-inner-wrap h2 span{
  display: block;
  font-size: 23px;
  letter-spacing: .35em;
  margin-top: 35px;
}
@media screen and (max-width:767px) {
  #index .block02 .cont-inner-wrap h2 span{
    font-size: 4.8vw;
    letter-spacing: .3em;
    margin-top: 4.53vw;
  }
}

#index .block02 .cont-inner-wrap h3{
  font-size: 26px;
  height: 141px;
  padding: 45px 24px 0 125px;
  text-align: center;
  width: 461px;
}
@media screen and (max-width:767px) {
  #index .block02 .cont-inner-wrap h3{
    font-size: 5.33vw;
    height: 28.26vw;
    padding: 8vw 4.8vw 0 24.26vw;
    width: auto;
  }
}

#index .block02 .cont-inner-wrap .cont-box01 h3{ background: url("../../img/index_block02_label_bg01.png") center center /contain no-repeat;}
#index .block02 .cont-inner-wrap .cont-box02 h3{ background: url("../../img/index_block02_label_bg02.png") center center /contain no-repeat;}
#index .block02 .cont-inner-wrap .cont-box03 h3{ background: url("../../img/index_block02_label_bg03.png") center center /contain no-repeat;}
#index .block02 .cont-inner-wrap .cont-box01{
  background: url("../../img/index_block02_img01.png") right bottom no-repeat;
  height: 363px;
  margin-bottom: 70px;
  padding-left: 57px;
  width: 992px;
}
@media screen and (max-width:767px) {
  #index .block02 .cont-inner-wrap .cont-box01{
    background: url("../../img/index_block02_img01_sp.png") right bottom no-repeat;
    height: 66.66vw;
    margin-bottom: 19.73vw;
    padding: 0 0 0 4.53vw;
    margin-right: 4.53vw;
    width: auto;
  }
}

#index .block02 .cont-inner-wrap .cont-box02{
  background: url("../../img/index_block02_img02.png") left bottom no-repeat;
  height: 363px;
  margin-bottom: 70px;
  padding-left: 496px;
  width: 960px;
}
@media screen and (max-width:767px) {
  #index .block02 .cont-inner-wrap .cont-box02{
    background: url("../../img/index_block02_img02_sp.png") right bottom no-repeat;
    height: 66.66vw;
    margin-bottom: 19.73vw;
    padding: 0 0 0 4.53vw;
    margin-right: 4.53vw;
    width: auto;
  }
}

#index .block02 .cont-inner-wrap .cont-box03{
  background: url("../../img/index_block02_img03.png") right bottom no-repeat;
  height: 363px;
  margin-bottom: 70px;
  padding-left: 57px;
  width: 992px;
}
@media screen and (max-width:767px) {
  #index .block02 .cont-inner-wrap .cont-box03{
    background: url("../../img/index_block02_img03_sp.png") right bottom no-repeat;
    height: 66.66vw;
    margin-bottom: 19.73vw;
    padding: 0 0 0 4.53vw;
    margin-right: 4.53vw;
    width: auto;
  }
}

#index .block02 .cont-inner-wrap p{
  font-size: 22px;
  line-height: 1.5;
  margin: 27px 0 45px 98px;
}
@media screen and (max-width:767px) {
  #index .block02 .cont-inner-wrap p{
    font-size: 4.26vw;
    line-height: 1.5;
    margin: 4vw 0;
  }
}

#index .block02 .cont-inner-wrap a{
  margin-left: 98px;
}
@media screen and (max-width:767px) {
  #index .block02 .cont-inner-wrap a{
    margin-left: 0;
    
  }
  #index .block02 .cont-inner-wrap a img{
    width: 36vw;
  }
}

/* block03 ---------------------------*/
#index .block03{
  background: url("../../img/index_block03_bg.jpg") center center no-repeat;
  height: 600px;
  padding: 75px 0 60px;
  position: relative;
  min-width: 1360px;
}
@media screen and (max-width:767px) {
  #index .block03{
    background: url("../../img/index_block03_bg.jpg") center center /cover no-repeat;
    height: auto;
    padding: 19.73vw 0;
    position: relative;
    min-width: auto;
  }
}

#index .block03 .acc-top-left{
  position: absolute;
  top: -16px;
  left: 0;
}
@media screen and (max-width:767px) {
  #index .block03 .acc-top-left{
    top: -2vw;
    width: 61.33vw;
  }
}

#index .block03 .acc-bottom-right{
  position: absolute;
  bottom: -10px;
  right: 0;
}
@media screen and (max-width:767px) {
  #index .block03 .acc-bottom-right{
    bottom: -2.5vw;
    width: 95.2vw;
  }
}

#index .block03 .flx-box{
  display: flex;
  justify-content: space-between;
  height: 290px;
  margin: 0 auto 43px;
  width: 854px;
}
@media screen and (max-width:767px) {
  #index .block03 .flx-box{
    display: block;
    height: auto;
    margin: 0 auto;
    width: auto;
  }
}

#index .block03 .flx-box .txt,
#index .block03 .flx-box .slide-wrap02{
  width: 50%;
}
@media screen and (max-width:767px) {
  #index .block03 .flx-box .txt{
    margin-bottom: 13.33vw;
    width: 100%;
  }
  #index .block03 .flx-box .slide-wrap02{
    display: block;
    margin: 0 auto 9.6vw;
    width: 74vw;
  }
}

#index .block03 .slide-thumb-box{
  margin: 0 auto;
  width: 1360px;
  overflow: hidden;
}
@media screen and (max-width:767px) {
  #index .block03 .slide-thumb-box{
    margin: 0 auto;
    width: 100%;
    position: relative;
    overflow-y: hidden;
  }
}

#index .block03 .slide-thumb-box ul{
  width: 1360px;
}
@media screen and (max-width:767px) {
  #index .block03 .slide-thumb-box ul{
    left: calc(50% - 680px);
  }
}

#index .block03 .slide-thumb-box ul li{
  padding: 0 9px;
}
#index .block03 .slide-thumb-box .slick-slide:not([tabindex="0"]),
#index .block03 .slide-thumb-box .slick-active{
    opacity: .6;
}
#index .block03 .slide-thumb-box .slick-active.slick-center{
    opacity: 1;
}
#index .block03 .flx-box .txt{
  padding-top: 37px;
}
@media screen and (max-width:767px) {
  #index .block03 .flx-box .txt{
    padding-top: 0;
  }
}

#index .block03 .flx-box .txt h2{
  margin-bottom: 30px;
}
@media screen and (max-width:767px) {
  #index .block03 .flx-box .txt h2{
    margin-bottom: 5.33vw;
    text-align: center;
  }
  #index .block03 .flx-box .txt h2 img{
    height: 6.4vw
  }
}

#index .block03 .flx-box .txt p{
  font-size: 23px;
  line-height: 1.5;
  margin: 0 0 30px 0;
}
@media screen and (max-width:767px) {
  #index .block03 .flx-box .txt p{
    font-size: 4.8vw;
    line-height: 1.5;
    margin: 0 0 5.33vw 0;
    text-align: center;
  }
  #index .block03 .flx-box .txt a{
    display: block;
    margin: 0 auto;
    width: 36vw;
  }
}

/* block04 ---------------------------*/
#index .block04{
  margin: 0 auto;
  padding: 140px 0 100px;
  min-width: 1360px;
}
@media screen and (max-width:767px) {
  #index .block04{
    padding: 22.53vw 0;
    min-width: 0;
    margin-top: -10vw;
    width: 100%;
  }
}

#index .block04 .cont-inner-wrap{
  margin: 0 auto;
  width: 854px;
}
@media screen and (max-width:767px) {
  #index .block04 .cont-inner-wrap{
    width: auto;
  }
}

#index .block04 .cont-inner-wrap h2{
  margin-bottom: 40px;
  text-align: center;
}
@media screen and (max-width:767px) {
  #index .block04 .cont-inner-wrap h2{
    margin-bottom: 5.33vw;
    text-align: center;
  }
}

#index .block04 .cont-inner-wrap p.sub-lead{
  font-size: 23px;
  line-height: 1.5;
  letter-spacing: .38em;
  margin: 0 0 151px 0;
  text-align: center;
}
@media screen and (max-width:767px) {
  #index .block04 .cont-inner-wrap p.sub-lead{
    font-size: 4.8vw;
    font-weight: bold;
    letter-spacing: .08em;
    margin: 0 0 21.33vw 0;
  }
}

#index .block04 .cont-inner-wrap .spl-box-wrap{
  margin-bottom: 60px;
}
@media screen and (max-width:767px) {
  #index .block04 .cont-inner-wrap .spl-box-wrap{
    margin-bottom: 9.33vw;
    padding: 0 2.66vw 0 5.33vw;
  }
}

#index .block04 .cont-inner-wrap .spl-box{
  display: block;
  margin-top: -66px;
  padding-left: 210px;
}
@media screen and (max-width:767px) {
  #index .block04 .cont-inner-wrap .spl-box{
    margin-top: -12vw;
    padding-left: 4.26vw;
  }
}

#index .block04 .cont-inner-wrap .spl-box.rev{
  padding-left: 0;
}
@media screen and (max-width:767px) {
  #index .block04 .cont-inner-wrap .spl-box.rev{
    padding:0 15.46vw 0 0;
  }
}

#index .block04 .cont-inner-wrap .spl-box img{
  opacity: 1;
  transition: .3s;
}
#index .block04 .cont-inner-wrap .spl-box img.spl-hover-opa{
  opacity: .7;
}
#index .block04 .cont-inner-wrap .sub-info{
  background: url("../../img/index_block04_info_wrap.png") center center no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 229px;
  margin: 0 auto;
  width: 660px;
}
@media screen and (max-width:767px) {
  #index .block04 .cont-inner-wrap .sub-info{
    background: url("../../img/index_block04_info_wrap_sp.png") center center no-repeat;
    height: 40.26vw;
    width: 89.6vw;
  }
}

#index .block04 .cont-inner-wrap .sub-info p{
  font-size: 30px;
  margin: 0 0 30px;
}
@media screen and (max-width:767px) {
  #index .block04 .cont-inner-wrap .sub-info p{
    font-size: 5.33vw;
    margin: 0 0 4vw;
  }
  #index .block04 .cont-inner-wrap .sub-info a img{
    width: 36.26vw;
  }
}


/* service
----------------------------------------------------------------------------------------*/

@media screen and (max-width: 767px){
  #sub.service header .fixed-btn {
    position: fixed;
    right: 1.33vw;
    top: auto;
    bottom:1.33vw;
  }
}

#sub.service .block01,
#sub.service .block02,
#sub.service .block03,
#sub.service .block04{
  position: relative;
  min-width: 1360px;
}
@media screen and (max-width: 767px){
  #sub.service .block01,
  #sub.service .block02,
  #sub.service .block03,
  #sub.service .block04{
    min-width:0;
    width: auto;
  }
}

/* block01 ---------------------------*/
#sub.service .block01{
  height: 404px;
  padding: 194px 0 0;
  text-align: center;
  overflow: hidden;
  width: 100%;
}
@media screen and (max-width:767px) {
  #sub.service .block01{
    height: 68vw;
    min-width: 0;
    padding: 36.26vw 0 0;
    width: 100%;
  }
}

#sub.service .block01 img.acc-top-left{
  position: absolute;
  top:104px;
  right: calc(50% + 241px);
}
@media screen and (max-width:767px) {
  #sub.service .block01 img.acc-top-left{
    position: absolute;
    top:20vw;
    right: 52.26vw;
    height: 6.5vw;
    max-width: none;
  }
}

#sub.service .block01 img.acc-bottom-right{
  position: absolute;
  bottom:0;
  left: calc(50% + 268px);
}
@media screen and (max-width:767px) {
  #sub.service .block01 img.acc-bottom-right{
    position: absolute;
    bottom:0;
    left: 52.26vw;
     height: 6.2vw;
    max-width: none;
  }
}

#sub.service .block01 h2 span{
  display: block;
  font-size: 27px;
  letter-spacing: .5em;
  margin-top: 35px;
}
@media screen and (max-width:767px) {
  #sub.service .block01 h2 img{
    height: 6.4vw;
  }
  #sub.service .block01 h2 span{
    font-size: 4.26vw;
    margin-top: 4vw;
  }
}

/* contents */
#sub.service .block02,
#sub.service .block03,
#sub.service .block04{
  padding-top: 90px;
}
@media screen and (max-width:767px) {
  #sub.service .block02,
  #sub.service .block03,
  #sub.service .block04{
    padding-top: 9.86vw;
  }
}

#sub.service .block03{
  margin: 0 0 0 auto;
}
@media screen and (max-width:767px) {
  #sub.service .block03{
    margin: 0;
  }
}

#sub.service .block04{
  margin-bottom: 110px;
}
@media screen and (max-width:767px) {
  #sub.service .block04{
    margin-bottom: 30.66vw;
  }
}

#sub.service .cont-inner-wrap{
  margin: 0 auto;
  width: 1360px;
}
@media screen and (max-width:767px) {
  #sub.service .cont-inner-wrap{
    margin: 0 auto;
    width: auto;
  }
}

#sub.service .cont-inner-wrap .inner{
  width: 972px;
}
@media screen and (max-width:767px) {
  #sub.service .cont-inner-wrap .inner{
    width: auto;
  }
}

#sub.service .block03 .cont-inner-wrap .inner{
  margin: 0 0 0 auto;
}
@media screen and (max-width:767px) {
  #sub.service .block03 .cont-inner-wrap .inner{
    margin: 0;
  }
}

#sub.service .cont-inner-wrap .cont-box{
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  padding-top: 40px;
}
@media screen and (max-width:767px) {
  #sub.service .cont-inner-wrap .cont-box{
    display: block;
    padding-top: 5.86vw;
    position: relative;
    margin: 0 7vw;
  }
}

#sub.service .cont-inner-wrap .cont-box img{
  margin-top: 55px;
}
@media screen and (max-width:767px) {
  #sub.service .cont-inner-wrap .cont-box img{
    margin: 0;
    position: absolute;
    top:6.13vw;
    left:0;
    height: 20.53vw;
  }
}

#sub.service .block02 .cont-inner-wrap .cont-box img,
#sub.service .block04 .cont-inner-wrap .cont-box img{
  margin-left: 160px
}
#sub.service .block02 .cont-inner-wrap .cont-box img{
  margin-right: 56px
}
#sub.service .block03 .cont-inner-wrap .cont-box img{
  margin-right: 35px
}
#sub.service .block04 .cont-inner-wrap .cont-box img{
  margin-right: 23px
}
@media screen and (max-width:767px) {
  #sub.service .block02 .cont-inner-wrap .cont-box img,
  #sub.service .block04 .cont-inner-wrap .cont-box img,
  #sub.service .block02 .cont-inner-wrap .cont-box img,
  #sub.service .block03 .cont-inner-wrap .cont-box img,
  #sub.service .block04 .cont-inner-wrap .cont-box img{
    margin: 0;
  }
}

#sub.service .cont-inner-wrap .cont-box h2{
  font-size: 41px;
  margin-bottom: 30px;
}
@media screen and (max-width:767px) {
  #sub.service .cont-inner-wrap .cont-box h2{
    font-size: 8vw;
    margin: 2.66vw 0 4.26vw;
    text-align: center;
  }
}

#sub.service .cont-inner-wrap .cont-box h3{
  font-size: 24px;
  margin-bottom: 20px;
}
@media screen and (max-width:767px) {
  #sub.service .cont-inner-wrap .cont-box h3{
    font-size: 5.33vw;
    line-height: 1.5;
    margin-bottom: 4.26vw;
    text-align: center;
  }
}

#sub.service .cont-inner-wrap .cont-box p{
  font-size: 15px;
  line-height: 2;
}
@media screen and (max-width:767px) {
  #sub.service .cont-inner-wrap .cont-box p{
    font-size: 3.73vw;
    line-height: 1.5;
  }
}

#sub.service .block03 .cont-inner-wrap .cont-box p{
  padding-right: 134px
}
@media screen and (max-width:767px) {
  #sub.service .block03 .cont-inner-wrap .cont-box p{
    padding-right: 0;
  }
}

/* history
----------------------------------------------------------------------------------------*/

@media screen and (max-width: 767px){
  #sub.history header .fixed-btn {
    position: fixed;
    right: 1.33vw;
    top: auto;
    bottom:1.33vw;
  }
}

#sub.history .block01,
#sub.history .block02,
#sub.history .block03,
#sub.history .block04{
  position: relative;
  min-width: 1360px;
}
@media screen and (max-width: 767px){
  #sub.history .block01,
  #sub.history .block02,
  #sub.history .block03,
  #sub.history .block04{
    min-width:0;
    width: auto;
  }
}

/* block01 ---------------------------*/
#sub.history .block01{
  height: 404px;
  margin-bottom: 30px;
  padding: 194px 0 0;
  text-align: center;
  overflow: hidden;
  width: 100%;
}
@media screen and (max-width:767px) {
  #sub.history .block01{
    height: 68vw;
    min-width: 0;
    padding: 36.26vw 0 0;
    width: 100%;
  }
}

#sub.history .block01 img.acc-top-left{
  position: absolute;
  top:104px;
  right: calc(50% + 241px);
}
@media screen and (max-width:767px) {
  #sub.history .block01 img.acc-top-left{
    position: absolute;
    top:20vw;
    right: 52.26vw;
    height: 6.5vw;
    max-width: none;
  }
}

#sub.history .block01 img.acc-bottom-right{
  position: absolute;
  bottom:0;
  left: calc(50% + 268px);
}
@media screen and (max-width:767px) {
  #sub.history .block01 img.acc-bottom-right{
    position: absolute;
    bottom:0;
    left: 52.26vw;
     height: 6.2vw;
    max-width: none;
  }
}

#sub.history .block01 h2 span{
  display: block;
  font-size: 27px;
  letter-spacing: .5em;
  margin-top: 35px;
}
@media screen and (max-width:767px) {
  #sub.history .block01 h2 img{
    height: 6.4vw;
  }
  #sub.history .block01 h2 span{
    font-size: 4.26vw;
    margin-top: 4vw;
  }
}

#sub.history .bg-left{
  position: absolute;
  right: 50%;
}
#sub.history .bg-center{
  position: absolute;
  left: 50%;
}
#sub.history .bg-now{
  position: absolute;
  left: calc(50% - 235px);
}
@media screen and (max-width:767px) {
  #sub.history .bg-left{
    right: 0;
    padding: 0 2.13vw;
  }
  #sub.history .bg-center{
    left: 0;
    padding: 0 2.13vw;
  }
  #sub.history .bg-now{
    left: 0;
    padding: 0 2.13vw;
  }
}

#sub.history .txt-box{
  position: relative;
}
#sub.history .txt-box.t-left{
  margin-left: calc(50% - 427px);
}
#sub.history .txt-box.t-center{
  margin-left: 50%;
}
#sub.history .txt-box img{
  position: absolute;
}
#sub.history .txt-box h3{
  font-size: 50px;
  margin-bottom: 25px;
  font-weight: normal;
}
#sub.history .txt-box p{
  font-size: 18px;
  line-height: 1.5;
}
@media screen and (max-width:767px) {
  #sub.history .txt-box{
    position: static;
    padding: 0 7vw;
    width: 100%;
  }
  #sub.history .txt-box.t-left{
    margin-left: 0;
  }
  #sub.history .txt-box.t-center{
    margin-left: 0;
  }
  #sub.history .txt-box img{
    position: static;
  }
  #sub.history .txt-box h3{
    font-size: 9.06vw;
    margin-bottom: 4.26vw;
  }
  #sub.history .txt-box p{
    font-size: 4.26vw;
    line-height: 1.5;
  }
}

/* block02 ---------------------------*/
#sub.history .block02 .box01{padding-top: 262px;}
@media screen and (max-width:767px) {
  #sub.history .block02 .box01{padding-top: 34.93vw;}
}
#sub.history .block02 .box01 img.img01{
  top: 90px;
  left: 455px;
}
@media screen and (max-width:767px) {
  #sub.history .block02 .box01 img.img01{
    display: block;
    margin: 6.66vw auto 0;
    width: 73.6vw;
  }
}

#sub.history .block02 .box01 img.img02{
  top: 318px;
  left: 583px;
}
#sub.history .block02 .box02{padding-top: 77px;}
@media screen and (max-width:767px) {
  #sub.history .block02 .box02{
    padding-top: 6.66vw;
    position: relative;
  }
}

#sub.history .block02 .box02 img{
  top: 124px;
  left: 531px;
}
@media screen and (max-width:767px) {
  #sub.history .block02 .box02 img{
    position: absolute;
    top: 24.53vw;
    left: auto;
    right: 6.2vw;
    width: 20vw;
  }
}

#sub.history .block02 .box03{padding: 130px 0 64px;}
@media screen and (max-width:767px) {
  #sub.history .block02 .box03{padding: 6.66vw 8vw;}
}
#sub.history .block02 .box03 img{
  top: 74px;
  left: -425px;
}
/* block03 ---------------------------*/
#sub.history .block03 .box01{padding-top: 181px;}
@media screen and (max-width:767px) {
  #sub.history .block03 .box01{
    position: relative;
    padding-top: 33.06vw;}
}
#sub.history .block03 .box01 img.img01{
  top: 0;
  left: 325px;
}
@media screen and (max-width:767px) {
  #sub.history .block03 .box01 img.img01{
    width: 20.26vw;
    position: absolute;
    top: 78.06vw;
    left: 24.26vw;
  }
}
#sub.history .block03 .box01 img.img02{
  top: 320px;
  left: 533px;
}
@media screen and (max-width:767px) {
  #sub.history .block03 .box01 img.img02{
    width: 39.2vw;
    position: absolute;
    top: 73.06vw;
    left: 50.93vw;
  }
}
#sub.history .block03 .box02{padding-top: 72px;}
@media screen and (max-width:767px) {
  #sub.history .block03 .box02{
    padding-top: 66.66vw;
  }
}
#sub.history .block03 .box02 img{
  top: 327px;
  left: 0;
}
@media screen and (max-width:767px) {
  #sub.history .block03 .box02 img{
    display: block;
    margin: 10.66vw auto;
    width: 79.2vw;
  }
}
#sub.history .block03 .box03{padding-top: 70px;}
@media screen and (max-width:767px) {
  #sub.history .block03 .box03{padding-top: 0;}
}
#sub.history .block03 .box04{padding-top: 77px;}
@media screen and (max-width:767px) {
  #sub.history .block03 .box04{padding-top: 10.66vw;}
}
#sub.history .block03 .box04 img{
  top: 350px;
  left: 50px;
}
@media screen and (max-width:767px) {
  #sub.history .block03 .box04 img{
    display: block;
    margin: 6.66vw auto;
    width: 79.2vw;
  }
}
/* block04 ---------------------------*/
#sub.history .block04 .box01{
  margin-top: -200px;
  padding-top: 248px;
}
@media screen and (max-width:767px) {
  #sub.history .block04 .box01{
    margin-top: 0;
    padding-top: 32.53vw;
  }
}

/* block05 ---------------------------*/
#sub.history .block05 .box01{
  margin: 136px 0 0;
  padding-top: 120px;
  text-align: center;
}
@media screen and (max-width:767px) {
  #sub.history .block05 .box01{
    margin: 10.66vw 0 0;
    padding-top: 30.93vw;
  }
}
#sub.history .block05 .box01 p{
  font-size: 25px;
}
#sub.history .block05 .box01 img{
  position: static;
  margin: 70px 0 85px;
}
@media screen and (max-width:767px) {
  #sub.history .block05 .box01 img{
    position: static;
    margin: 6.66vw 0 30.66vw;
  }
}

/* onze 2022 ---------------------------*/
/* body.timetravel .contens-wrap main {opacity:0; transition:1s;} */
#d1 {
  z-index: 12;
  pointer-events: none;
  opacity: 0;
  transition: 1s;
}
#d1.show {opacity:1;}
#d1.whiteout {background:#fff;}