@charset "utf-8";

:root{
	--blue:#0426dc;
	--gray01:#808488;
	--gray02:#d4d4d4;
}

#contents_area .mv_wrap img,
#contents_area .content_wrap img,
#contents_area .teaser_footer img{
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

@media print, screen and (min-width : 769px){
	#contents_area .switch_pc {
			display: block !important;
	}

	#contents_area .switch_sp {
			display: none !important;
	}
}
@media print, screen and (max-width : 768px){
		#contents_area .switch_sp {
			display: block !important;
	}
}

	/* メインビジュアル */
.mv_wrap{
	position: relative;
	font-family: "Hiragino Kaku Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", Meiryo, sans-serif;
	line-height: 1.5;
}

.mv_txtarea{
	font-size: 12px;
	color: #000;
	position: absolute;
	right: 100px;
	bottom: 2em;
}
@media print, screen and (max-width : 768px){
	.mv_txtarea{
		right: unset;
		left: 1em;
		bottom: 1em;
	}
}

.scroll_icon{
	width: 46px;
	padding-bottom: 12px;
	background: var(--blue);
	position: absolute;
	bottom: 0;
	right: 0;
}
@media print, screen and (max-width : 768px){
	.scroll_icon{
		width: 37px;
		padding-bottom: 12px;
	}
}

.scroll_icon .scroll_txt{
	width: 12px;
	margin: 0 auto 1em;
	padding-top: 5em;
}
@media print, screen and (max-width : 768px){
		.scroll_icon .scroll_txt{
		width: 12px;
		margin: 0 auto 1em;
		padding-top: 4em;
	}
}

.scroll_icon .scroll_anime{
	height: 30px;
	position: relative;
}
@media print, screen and (max-width : 768px){
	.scroll_icon .scroll_anime{
		height: 26px;
	}
}

	.scroll_icon .scroll_anime::before,
	.scroll_icon .scroll_anime::after{
		content: "";
		display: block;
	}

	.scroll_icon .scroll_anime::before{
		background-color: #fff;
		width: 1px;
		height: 100%;
		margin: 0 auto;
	}

	.scroll_icon .scroll_anime::after{
		width: 4px;
		height: 4px;
		border-radius: 4px;
		border: 1px solid #fff;
		background: var(--blue);
		position:absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		opacity: 0;
		animation: scroll_icon 2s linear infinite;
	}

	.scroll_icon.fix-scr.is-fixed {
		position: fixed;
		bottom: 0;
		right: 0;
	}

@keyframes scroll_icon {
  0% {
    opacity: 0;
  }
	10% {
    opacity: 1;
				top: 0;
  }
	90% {
    opacity: 1;
		top:calc(100% - 4px);
  }
  100% {
    opacity: 0;
				top:calc(100% - 4px);
  }
}
/*--------------------
	content
--------------------*/
.content_wrap{
	padding: 200px 0;
	background: url(/ACCESS/prelude/new/img/bg.png) 0 0 repeat;
	background-size: 52px 50px;
}
@media screen and (max-width: 768px) {
	.content_wrap{
		padding: 30vw 0;
	}
}

.content_wrap .sec01 .sec01_txtwrap{
	max-width: 980px;
	margin: 0 auto;
}
@media screen and (max-width: 768px) {
	.content_wrap .sec01 .sec01_txtwrap{
		padding: 0 30px;
	}
}

.content_wrap .sec01 h3{
	width: 374px;
}
@media screen and (max-width: 768px) {
	.content_wrap .sec01 h3{
		width: 70%;
	}
}

.sec01_txt{
	width: 616px;
	margin: 72px 0 72px 2em;
}
@media screen and (max-width: 768px) {
	.sec01_txt{
		width: 82%;
		margin: 5vw 0 12vw;
	}
}

.sec02{
	padding-bottom: 150px;
	position: relative;
}
@media screen and (max-width: 768px) {
	.sec02{
		padding-bottom: 20vw;
	}
}

.sec02_cont_wrap{
	max-width: 980px;
	width: 100%;
	margin: 0 auto;
	padding-top: 180px;
}

.sec02_cont_wrap h3{
	width: 294px;
	margin:0 62px 118px auto;
}
@media screen and (max-width: 768px) {
	.sec02_cont_wrap h3{
    width: 50%;
    margin: 0 30px 30vw auto;
	}
}

.sec02_cont_wrap .sec02_cont{
	max-width: 912px;
	margin-left: auto;
	margin-bottom: 180px;
	position: relative;
}
@media screen and (max-width: 768px) {
	.sec02_cont_wrap .sec02_cont{
		margin-bottom: 26.75vw;
		padding: 0 20px;
	}
}

.sec02_cont_wrap .sec02_cont:last-child{
	margin-bottom: 0;
}

.sec02_cont_tl{
	position: relative;
	z-index: 9;
}

.sec02_cont_tl.right{
	text-align: right;
}

#contents_area .sec02_cont_tl h4 img{
	width: auto;
	height: 60px;
}
@media screen and (max-width: 768px) {
	#contents_area .sec02_cont_tl h4 img{
    width: 37.875vw;
    height: auto;
	}
}

@media screen and (min-width: 769px) {
	.sec02_cont_txt{
		position: absolute;
		z-index: 8;
	}
}

.sec02_cont_thum{
	position: relative;
	z-index: 6;
	opacity: 0.3;
	transition: 1s;
}
.sec02_cont_thum.anime {
		opacity: 1;
}

#contents_area .sec02_cont_txt img{
	width: auto;
	height: 54px;
}
@media screen and (max-width: 768px) {
	#contents_area .sec02_cont_txt img{
    width: auto;
    height: 9.5vw;
	}
}



.sec02_cont_ani-border{
	background: var(--blue);
	position: absolute;
	transition: .7s;
}

.sec02_cont_ani-border.right{
		transform: scaleX(0);
		transform-origin:left;
}
@media screen and (min-width: 769px) {
	.sec02_cont_ani-border.down{
		transform: scaleX(0);
		transform-origin:left;
	}
}
@media screen and (max-width: 768px) {
	.sec02_cont_ani-border.down{
		transform: scaleY(0);
		transform-origin:top;
	}
}

.sec02_cont_ani-border.right.anime{
	animation: ani-border01 0.5s 0.5s cubic-bezier(.06,.54,.32,1) forwards;
	animation-delay: 0.75s;
}
@media screen and (min-width: 769px) {
	.sec02_cont_ani-border.down.anime{
		animation: ani-border01 0.5s 0.5s cubic-bezier(.06,.54,.32,1) forwards;
		animation-delay: 0.75s;
	}
}
@media screen and (max-width: 768px) {
	.sec02_cont_ani-border.down.anime{
		animation: ani-border02 0.5s 0.5s cubic-bezier(.06,.54,.32,1) forwards;
		animation-delay: 0.75s;
	}
}

@keyframes ani-border01 {
  0% {
		transform: scaleX(0);
  }
  100% {
		transform: scaleX(100%);
  }
}
@keyframes ani-border02 {
  0% {
		transform: scaleY(0);
  }
  100% {
		transform: scaleY(100%);
  }
}

.sec02_cont_gray01{
	background: var(--gray01);
	position: absolute;
}
.sec02_cont_gray02{
	background: var(--gray02);
	position: absolute;
}


/*各コンテンツ↓*/
#sec02_cont01 .sec02_cont_thum{
	width: 442px;
	margin-top: 25px;
	margin-left: 30px;
}
@media screen and (max-width: 768px) {
	#sec02_cont01 .sec02_cont_thum{
		width: 90%;
		margin: 5vw auto;
	}
}
@media screen and (min-width: 769px) {
	#sec02_cont01 .sec02_cont_txt{
		top: calc(50% + 40px);
		right: 160px;
		transform: translateY(-50%);
	}
}
@media screen and (max-width: 768px) {
	#sec02_cont01 .sec02_cont_txt{
		text-align: right;
		padding-right: 1vw;
		position: relative;
		z-index: 6;
	}
}
#sec02_cont01 .sec02_cont_ani-border{
	width: 494px;
	height: 84px;
	bottom: -20px;
	left: 5px;
	z-index: 5;
}
@media screen and (max-width: 768px) {
	#sec02_cont01 .sec02_cont_ani-border{
		width: 16vw;
    height: 36vw;
		bottom: 10vw;
    left: 15px;
	}
}
#sec02_cont01 .cont01_01{
	width: 369px;
	height: 81px;
	top: 50px;
	left: -30px;
	z-index: 4;
}
@media screen and (max-width: 768px) {
	#sec02_cont01 .cont01_01{
		width: 52vw;
    height: 10.25vw;
		top: unset;
    bottom: 7vw;
    left: 15vw;
	}
}
#sec02_cont01 .cont01_02{
	width: 362px;
	height: 93px;
	bottom: 35px;
	right: 120px;
	z-index: 4;
}
@media screen and (max-width: 768px) {
	#sec02_cont01 .cont01_02{
		display: none;
	}
}
#sec02_cont01 .cont01_03{
	width: 482px;
	height: 104px;
	top: 110px;
	right: 220px;
	z-index: 3;
}
@media screen and (max-width: 768px) {
	#sec02_cont01 .cont01_03{
		width: 64vw;
    height: 40vw;
    top: 8vw;
    right: 15px;
	}
}

#sec02_cont02 .sec02_cont_thum{
	width: 418px;
	margin: 20px 100px 0 auto;
}
@media screen and (max-width: 768px) {
	#sec02_cont02 .sec02_cont_thum{
		width: 90%;
		margin: 5vw auto;
	}
}
@media screen and (min-width: 769px) {
	#sec02_cont02 .sec02_cont_txt{
		top: calc(50% + 35px);
		left: 160px;
		transform: translateY(-50%);
	}
}
@media screen and (max-width: 768px) {
	#sec02_cont02 .sec02_cont_txt{
		padding:0 1vw;
		position: relative;
		z-index: 6;
	}
}
#sec02_cont02 .sec02_cont_ani-border{
	width: 432px;
	height: 108px;
	top: 40px;
	right: 40px;
	z-index: 2;
}
@media screen and (max-width: 768px) {
	#sec02_cont02 .sec02_cont_ani-border{
		width: 45.25vw;
    height: 16.75vw;
		top: unset;
    bottom: 11.5vw;
    right: 20px;
    z-index: 5;
	}
}
#sec02_cont02 .cont02_01{
	width: 475px;
	height: 160px;
	top: 110px;
	left: 130px;
	z-index: 4;
}
@media screen and (max-width: 768px) {
	#sec02_cont02 .cont02_01{
		width: 57.375vw;
    height: 24.5vw;
    top: 7vw;
    left: 19vw;
	}
}
#sec02_cont02 .cont02_02{
	width: 359px;
	height: 202px;
	bottom: -30px;
	right: 20px;
	z-index: 4;
}
@media screen and (max-width: 768px) {
	#sec02_cont02 .cont02_02{
		display: none;
	}
}
#sec02_cont02 .cont02_03{
	width: 397px;
	height: 118px;
	top: 20px;
	left: 90px;
	z-index: 3;
}
@media screen and (max-width: 768px) {
	#sec02_cont02 .cont02_03{
		width: 58.75vw;
    height: 49vw;
		top: unset;
    bottom: 7vw;
    left: 14vw;
	}
}

@media screen and (max-width: 768px) {
	#sec02_cont03 .sec02_cont_tl h4{
		margin-left: 8vw;
	}
}
#sec02_cont03 .sec02_cont_thum{
	width: 414px;
	margin:-20px 0 0 60px;
}
@media screen and (max-width: 768px) {
	#sec02_cont03 .sec02_cont_thum{
		width: 90%;
		margin: 6vw auto;
	}
}
@media screen and (min-width: 769px) {
	#sec02_cont03 .sec02_cont_txt{
		bottom: 0;
		right: 180px;
	}
}
@media screen and (max-width: 768px) {
	#sec02_cont03 .sec02_cont_txt{
		text-align: right;
		padding:0 1vw;
		position: relative;
		z-index: 6;
	}
}
#sec02_cont03 .sec02_cont_ani-border{
	width: 370px;
	height: 76px;
	bottom: -20px;
	left: 35px;
	z-index: 4;
}
@media screen and (max-width: 768px) {
	#sec02_cont03 .sec02_cont_ani-border{
		width: 52.625vw;
    height: 16.75vw;
    top: 13vw;
		bottom: unset;
    left: 20px;
    z-index: 4;
	}
}
#sec02_cont03 .cont03_01{
	width: 476px;
	height: 136px;
	bottom: -40px;
	right: 150px;
	z-index: 2;
}
@media screen and (max-width: 768px) {
	#sec02_cont03 .cont03_01{
		width: 34vw;
    height: 36.25vw;
    bottom: 7vw;
    left: 14vw;
		right: unset;
    z-index: 4;
	}
}
#sec02_cont03 .cont03_02{
	width: 506px;
	height: 200px;
	top: 60px;
	left: 15px;
	z-index: 3;
}
@media screen and (max-width: 768px) {
	#sec02_cont03 .cont03_02{
    width: 52.25vw;
    height: 69vw;
    top: 7vw;
		left: unset;
    right: 15vw;
	}
}

#sec02_cont04 .sec02_cont_thum{
	width: 467px;
	margin: 25px 40px 0 auto;
}
@media screen and (max-width: 768px) {
	#sec02_cont04 .sec02_cont_thum{
		width: 90%;
		margin: 5vw auto;
	}
}
@media screen and (min-width: 769px) {
	#sec02_cont04 .sec02_cont_txt{
		top: calc(50% + 35px);
		left: 300px;
		transform: translateY(-50%);
	}
}
@media screen and (max-width: 768px) {
	#sec02_cont04 .sec02_cont_txt{
		padding:0 1vw;
		position: relative;
		z-index: 6;
	}
}
#sec02_cont04 .sec02_cont_ani-border{
	width: 415px;
	height: 88px;
	top: 60px;
	right: 0;
	z-index: 4;
}
@media screen and (max-width: 768px) {
	#sec02_cont04 .sec02_cont_ani-border{
		width: 19.125vw;
    height: 36vw;
		top: unset;
    bottom: 11vw;
    right: 20px;
    z-index: 5;
	}
}
#sec02_cont04 .cont04_01{
	width: 377px;
	height: 125px;
	top: 45px;
	left: 120px;
	z-index: 3;
}
@media screen and (max-width: 768px) {
	#sec02_cont04 .cont04_01{
		width: 40.25vw;
    height: 16.875vw;
    top: 12.5vw;
    left: 20px;
	}
}
#sec02_cont04 .cont04_02{
	width: 462px;
	height: 210px;
	top: calc(50% + 35px);
	left: 170px;
	transform: translateY(-50%);
	z-index: 4;
}
@media screen and (max-width: 768px) {
	#sec02_cont04 .cont04_02{
		display: none;
	}
}
#sec02_cont04 .cont04_03{
	width: 374px;
	height: 125px;
	bottom: -30px;
	right: 10px;
	z-index: 3;
}
@media screen and (max-width: 768px) {
	#sec02_cont04 .cont04_03{
		width: 56.25vw;
    height: 65.5vw;
    bottom: 3vw;
    right: 28.5vw;
    z-index: 2;
	}
}

@media screen and (max-width: 768px) {
	#sec02_cont05 .sec02_cont_tl h4{
		margin-left: 8vw;
	}
}
#sec02_cont05 .sec02_cont_thum{
	width: 468px;
	margin: 30px 0 0 90px;
}
@media screen and (max-width: 768px) {
	#sec02_cont05 .sec02_cont_thum{
		width: 90%;
		margin: 5vw auto;
	}
}
@media screen and (min-width: 769px) {
	#sec02_cont05 .sec02_cont_txt{
		bottom:33%;
		left: 558px;
	}
}
@media screen and (max-width: 768px) {
	#sec02_cont05 .sec02_cont_txt{
		text-align: right;
		padding:0 4.25vw;
		position: relative;
		z-index: 6;
	}
}
#sec02_cont05 .sec02_cont_ani-border{
	width: 350px;
	height: 78px;
	bottom: -35px;
	left: 70px;
	z-index: 4;
}
@media screen and (max-width: 768px) {
	#sec02_cont05 .sec02_cont_ani-border{
		width: 14vw;
    height: 39vw;
    top: 7vw;
		bottom: unset;
    left: 20px;
		z-index: 6;
	}
}
#sec02_cont05 .cont05_01{
	width: 270px;
	height: 85px;
	top: 40px;
	left: 0px;
	z-index: 4;
}
@media screen and (max-width: 768px) {
	#sec02_cont05 .cont05_01{
		width: 67.75vw;
    height: 27.5vw;
		top: unset;
    bottom: 4vw;
		left: unset;
    right: 20px;
	}
}
#sec02_cont05 .cont05_02{
	width: 469px;
	height: 98px;
	bottom: -20px;
	left: 40px;
	z-index: 3;
}
@media screen and (max-width: 768px) {
	#sec02_cont05 .cont05_02{
		display: none;
	}
}
#sec02_cont05 .cont05_03{
	width: 460px;
	height: 255px;
	top: 65px;
	right: 275px;
	z-index: 3;
}
@media screen and (max-width: 768px) {
	#sec02_cont05 .cont05_03{
		width: 61.5vw;
    height: 16vw;
    top: 8vw;
    left: 16vw;
	}
}

#sec02_cont06 .sec02_cont_thum{
	width: 438px;
	margin: 20px 70px 0 auto;
}
@media screen and (max-width: 768px) {
	#sec02_cont06 .sec02_cont_thum{
		width: 90%;
		margin: 5vw auto;
	}
}
@media screen and (min-width: 769px) {
	#sec02_cont06 .sec02_cont_txt{
		top: 50%;
		left: 220px;
		transform: translateY(-50%);
	}
}
@media screen and (max-width: 768px) {
	#sec02_cont06 .sec02_cont_txt{
		padding:0 1vw;
		position: relative;
		z-index: 6;
	}
}
#sec02_cont06 .sec02_cont_ani-border{
	width: 406px;
	height: 112px;
	top: 40px;
	right: 40px;
	z-index: 4;
}
@media screen and (max-width: 768px) {
	#sec02_cont06 .sec02_cont_ani-border{
		width: 38.75vw;
    height: 20vw;
		top: unset;
    bottom: 11vw;
    right: 20px;
    z-index: 6;
	}
}
#sec02_cont06 .cont06_01{
	width: 413px;
	height: 120px;
	bottom: -20px;
	left: 245px;
	z-index: 3;
}
@media screen and (max-width: 768px) {
	#sec02_cont06 .cont06_01{
		width: 54.125vw;
    height: 13.875vw;
    bottom: 4vw;
    left: 15vw;
	}
}
#sec02_cont06 .cont06_02{
	width: 352px;
	height: 170px;
	top: 50%;
	left: 170px;
	transform: translateY(-50%);
	z-index: 4;
}
@media screen and (max-width: 768px) {
	#sec02_cont06 .cont06_02{
		display: none;
	}
}
#sec02_cont06 .cont06_03{
	width: 388px;
	height: 200px;
	bottom: 0px;
	right: 20px;
	z-index: 4;
}
@media screen and (max-width: 768px) {
	#sec02_cont06 .cont06_03{
		width: 65.25vw;
    height: 33vw;
    top: 8vw;
		bottom: unset;
    right: 14vw;
	}
}
/*各コンテンツ↑*/

.sec02 .side_nav{
  position: absolute;
  top:122px;
	left: 20px;
	z-index: 9;
	opacity: 0;
  position: fixed;
	top: calc(50% + 61px);
	transform: translateY(-50%);
	transition: 0.3s;
}
@media screen and (max-width: 1260px) {
	.sec02 .side_nav{
		display: none;
	}
}

#global_navigation_inner .gnav_ico{
	display: none !important;
}

.sec02 .side_nav.is-fixed {
	opacity: 1;
}

.sec02 .side_nav.is-btmfixed {
	opacity: 0;
}

.sec02 .side_nav li{
	margin-bottom: 3em;
}

.sec02 .side_nav li:last-child{
	margin-bottom: 0;
}

 #contents_area .side_nav img{
	width: auto;
	height: 34px;
}
@media screen and (max-width: 768px) {
	 #contents_area .side_nav img{
		display: none;
	}
}

.teaser_footer{
	font-family: "Hiragino Kaku Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", Meiryo, sans-serif;
	line-height: 1.5;
	color: #fff;
	width: 100%;
	padding: 150px 0;
	background: #000;
}

@media screen and (max-width: 768px) {
	.teaser_footer{
			padding: 15vw 20px;
			box-sizing: border-box;
	}
}

.teaser_footer .btn_area {
    text-align: center;
}

#contents_area .teaser_footer a{
	font-family: "Hiragino Kaku Gothic W4 JIS2004";
	font-size: 24px;
	color: inherit;
	padding: 1em 3.5em 1em 2.5em;
	display: inline-block;
	border:1px solid #fff;
	border-radius: 3em;
	position: relative;
}
@media screen and (max-width: 768px) {
	#contents_area .teaser_footer a{
		font-size: 12px;
			padding: 1.5em 4em 1.5em 2em;
	}
}

#contents_area .teaser_footer a::after{
	content: "";
	width: 1.5em;
	height: 1.5em;
	display: block;
	background: url(/ACCESS/prelude/new/img/icon_arrow.svg) 0 0 no-repeat;
	background-size: cover;
	position: absolute;
	top: 50%;
	right: 1.5em;
	transform: translateY(-50%);
}

.teaser_footer_text{
	max-width: 650px;
	margin: 2em auto 0;
}

.teaser_footer_text ul li{
	font-size: 12px;
	text-indent: -1em;
	padding-left: 1em;
}

/*slider*/
.sec01 .slide-arrow{
	width: 150px;
	padding-top: 10px;
	border-top: 2px solid #787878;
	position: absolute;
	bottom: 50px;
  z-index: 6;
	transition: 0.3s;
}
.sec01 .slide-arrow:hover{
	cursor: pointer;
	opacity: 0.7;
}

.sec01 .slide-arrow.slick-disabled{
	border-top: 2px solid var(--blue);
}

.sec01 .prev-arrow{
	left: calc(50% - 160px);
}

.sec01 .next-arrow{
	left: calc(50% + 10px);
}

.sec01 .prev-arrow::after,
.sec01 .next-arrow::after{
	content: "";
	width: 100%;
	height: 15px;
	display: block;
}

.sec01 .prev-arrow::after{
	background: url(/ACCESS/prelude/new/img/slide_front_btn_off.svg) center 0 no-repeat;
	background-size: auto 100%;
}
.sec01 .prev-arrow.slick-disabled::after{
	background: url(/ACCESS/prelude/new/img/slide_front_btn_on.svg) center 0 no-repeat;
	background-size: auto 100%;
}

.sec01 .next-arrow::after{
	background: url(/ACCESS/prelude/new/img/slide_rear_btn_off.svg) center 0 no-repeat;
	background-size: auto 100%;
}
.sec01 .next-arrow.slick-disabled::after{
	background: url(/ACCESS/prelude/new/img/slide_rear_btn_on.svg) center 0 no-repeat;
	background-size: auto 100%;
}
/*slider*/