﻿@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
.font1{font-family: 'Anton', sans-serif;}
body{font-family: 'Lato', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, sans-serif;}
.z0{z-index: 0;}
.z1{z-index: 1;}
.z2{z-index: 2;}
/*-----------------------------------------
				  LOADER
-----------------------------------------*/
.top #wrap{
    opacity: 0;
}
#fakeloader{
	z-index: 9999;
}
#fakeloader .fl{
	position: absolute!important;
	top: 50%!important;
	left: 50%!important;
	transform: translate(-50%,-50%)!important;
	width: 50%!important;
	max-width: 250px;
}
#fakeloader .fl{
	animation-name: loader;
	animation-duration: 5s;
	animation-timing-function: ease;
}
@keyframes loader{
	0% {opacity: 0;}
	50% {opacity: 1;}
	100% {opacity: 0;}
}
/* CURSOR */
.cursor,.follower{
border-radius: 50%;
position: fixed;
top: 0;
left: 0;
pointer-events: none;
}
.cursor{
background-color: #f59150;
width: 8px;
height: 8px;
z-index: 10;
}
.follower{
background-color: #2832aa;
width: 40px;
height: 40px;
z-index: 7;
transition: 0.3s;
opacity: 0.7;
transition-property: transform,background;
}
.follower.is-active{
background-color: transparent;
border: solid 1px #2832aa;
transform: scale(1.5);
}
.cursor.is-active.more_move,.cursor.is-active.more_info{
background-color: transparent;
}
/*フェードインcss*/
.fadein_up{
    opacity : 0;
    -webkit-transform: translateY(50px);
    -ms-transform: translateY(50px);
    transform: translateY(50px);
	transition:transform 1.5s ease,opacity 2s ease; 
}
.fadein_up.scrollin{
    opacity : 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
.fadein_up2{
    opacity : 0;
    -webkit-transform: translateY(50px);
    -ms-transform: translateY(50px);
    transform: translateY(50px);
	transition:transform 2s ease,opacity 2s ease; 
}
.fadein_up2.scrollin{
    opacity : 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
/* タイトル下　横線 */
.line{position: relative;}
.line:before{
content: "";
display: block;
background-color: rgba(40,50,170,0.3);
width: 0;
height: 3px;
position: absolute;
bottom:-15px;
}
.line.scrollin:before{
	animation: page_line 2s ease forwards;
}
@keyframes page_line {
	0% {
		width: 0;
	}
	96%,100% {
		width: 70px;
	}
}
/* BUTTON */
.more{
max-width: 300px;
width: 100%;
box-sizing: border-box;
}
.more a{
background: transparent;
background: linear-gradient(270deg,rgba(245,145,80,0.9),rgba(40,50,170,0.9));
text-transform: uppercase;
border-radius: 0;
transition: all 0.7s ease-out;
background-position: 1% 50%;
background-size: 300% 300%;
width: 100%;
text-decoration: none;
border: none;
box-sizing: border-box;
}
.more a:hover{
border-radius: 40px;
background-position: 99% 50%;
}

/* header */
header{padding-bottom: 20px;}
.logo{width: 300px;}


footer .bg_color4{background-color: #d5d5d5;}
/*--------------------------------
TOP
--------------------------------*/
#main_img{
z-index: 1;
height: 100vh;
max-height: none;
}
.vegas-timer-progress{background: #2832aa!important;}
#intro{
z-index: 0;
padding-bottom: 0;
position: relative;
}
#intro:before,#intro:after{
content: "";
display: block;
background-image: url(./Dup/img/back.png);
background-size: cover;
background-repeat: no-repeat;
width: 300px;
height: 336.585px;
z-index: -1;
position: absolute;
}
#intro:before{
top: -60px;
left: -20px;
}
#intro:after{
bottom: -60px;
right: -20px;
transform: scale(-1, -1);
}

#contents .box{position: relative;}
#contents .box:before{
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
/*#contents .box:nth-of-type(odd):before{background: linear-gradient(135deg,rgba(245,145,80,0.9),rgba(140,95,165,0.7),rgba(40,50,170,0.9));}
#contents .box:nth-of-type(even):before{background: linear-gradient(135deg,rgba(40,50,170,0.9),rgba(140,95,165,0.7),rgba(245,145,80,0.9));}*/
#contents .box:before{background-color: rgba(255,255,255,0.8);}

#contents .box .num{
position: absolute;
top: -65px;
left: 13px;
}
#contents .box:nth-of-type(2) .num{
left: auto;
right: 10px;
}
#contents .box .num:before{
font-size: 100px;
color: rgba(25,30,80,0.3);
}
#contents .box:nth-of-type(1) .num:before{content: "01";}
#contents .box:nth-of-type(2) .num:before{content: "02";}
#contents .box:nth-of-type(3) .num:before{content: "03";}

#info_title_box{background-position: center 520px;}
/*--------------------------------
下層
--------------------------------*/
#page_title{z-index: -12;}
.cate_list li {padding: 10px;margin: 0;}
.cate_list li a {
display: block;
padding: 15px 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
}
@media  screen and (max-width: 768px){
.cate_list li a{padding: 10px 10px;}
}
@media  screen and (max-width: 667px){
.cate_list li a{text-align: left;}
}

.title{position: relative;padding-left: 40px;}
.title:before{
content: "";
display: block;
width: 30px;
height: 3px;
background:rgba(245,145,80,0.5);
position: absolute;
top: 15px;
left: 0;
}
/* 5-c QA削除 */
#cms_5-c.page4 .box_title1::before,#cms_5-c .box_txt1::before,
.cms_5-c.page4 .box_title1::before,.cms_5-c .box_txt1::before{
display: none;
}
#cms_5-c.page4 .box_title1,#cms_5-c .box_txt1,
.cms_5-c.page4 .box_title1,.cms_5-c .box_txt1{
padding-left: 0;
}

/*IEのみ*/
@media all and (-ms-high-contrast: none) {
.more a{padding-top: 20px;}
#info_title_box .info_title span{padding:15px 40px;}
#page_title h2 span{padding-top: 15px;}
.cate_list li a{padding-bottom: 8px;}
#cms_5-c .box_title1{padding-bottom: 5px;}
#cms_5-c .box_title1::before{top: 2px;}
.pager li a span{padding-top: 0!important;}
#page8 #tel_contact p a{padding: 20px;}
}

/*タブレット用（768px以下）
--------------------------------------------------------------------------*/
@media  screen and (max-width: 768px){
#wrap{cursor: auto;}
a{cursor: pointer;}
.cursor,.follower{display: none;}
.drawer-hamburger{ padding: 24px .75rem 24px;}
#main_img{height: 70vh;}
#intro:before,#intro:after{
width: 200px;
height: 224.39px;
}
#intro:before{
top: -60px;
left: -20px;
}
#intro:after{
bottom: -60px;
right: -20px;
}
#info_title_box{background-position: center 320px;}
#page_title #filter_white{padding-top: 220px!important;}
}

/*スマホ用（667px以下）
--------------------------------------------------------------------------*/
@media  screen and (max-width: 667px){
header{padding-bottom: 10px;}
.logo{width: 250px;}

#main_img{height: 50vh;}
#intro:before,#intro:after{
width: 150px;
height: 168.293px;
}
#intro:before{
top: -60px;
left: -20px;
}
#intro:after{
bottom: -60px;
right: -20px;
}
#contents .box:nth-of-type(even):after{left: auto;right: -30%;}
#contents .box .num{
top: -87px;
left: 50%;
-ms-transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
transform: translate(-50%,0);
}
#contents .box:nth-of-type(2) .num{
right: auto;
left: 50%;
-ms-transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
transform: translate(-50%,0);
}
#contents .box .num:before{font-size: 50px;}
#info_title_box{background-position: center -55px;}

#page_title #filter_white{padding-top: 130px!important;}
}

/*--------------------------自動リンク--------------------------*/
/* color */
.linkStyle{color: #f59150; text-decoration: underline;}
.txt_color_nomal .linkStyle{color: #f59150;}
.txt_white .linkStyle{color: white;}
.txt_red .linkStyle{color: red;}
.bg_color1 .linkStyle{color: #fff;}
.bg_color2 .linkStyle{color: #2832aa;}
.bg_color3 .linkStyle{color: #fff;}
.bg_color4 .linkStyle{color: #f59150;}

/*IEのみ*/
@media all and (-ms-high-contrast: none) {
.linkStyle{display: inline-block; margin-bottom: 20px;}
}

/*--------------------------カラー--------------------------*/
body,.txt_color_nomal{color: #333;}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_color1{color: #2832aa} /* メインカラー */
.txt_color2{color: #ffffff} /* サブカラー */
.txt_color3{color: #f59150} /* アクセントカラー1 */
.txt_color4{color: #f5f5f5} /* アクセントカラー2 */

/* background-color */
.bg_white{background-color: white} /* 白背景 */
.bg_black{background-color: black} /* 黒背景 */
.bg_color1{background-color: #2832aa} /* メインカラー */
.bg_color2{background-color: #ffffff} /* サブカラー */
.bg_color3{background-color: #f59150} /* アクセントカラー1 */
.bg_color4{background-color: #f5f5f5} /* アクセントカラー2 */
.bg_color_clear{background-color: transparent!important}


/* border-color ※!important */
.border_color1{border-color: #2832aa}
.border_color2{border-color: #ffffff}
.border_color3{border-color: #f59150}
.border_color4{border-color: #f5f5f5}


/* hover ---------------------------------------------------------------------------------------------*/
/* color */
.hvr_txt_color_nomal:hover{color: #333333;}
.hvr_txt_white:hover{color: white;}
.hvr_txt_red:hover{color: red;}
.hvr_txt_color1:hover{color: #2832aa} /* メインカラー */
.hvr_txt_color2:hover{color: #ffffff} /* サブカラー */
.hvr_txt_color3:hover{color: #f59150} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #f5f5f5} /* アクセントカラー2 */

/* background-color */
.hvr_bg_white:hover{background-color: white} /* 白背景 */
.hvr_bg_black:hover{background-color: black} /* 黒背景 */
.hvr_bg_color1:hover{background-color: #2832aa} /* メインカラー */
.hvr_bg_color2:hover{background-color: #ffffff} /* サブカラー */
.hvr_bg_color3:hover{background-color: #f59150} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #f5f5f5} /* アクセントカラー2 */
.hvr_bg_color_clear:hover{background-color: transparent!important}

/* border-color ※!important */
.hvr_border_color1:hover{border-color: #2832aa}
.hvr_border_color2:hover{border-color: #ffffff}
.hvr_border_color3:hover{border-color: #f59150}
.hvr_border_color4:hover{border-color: #f5f5f5}