﻿/*--------リンク・フォント--------*/
@font-face {
    font-family: 'SourceHanSans';
    font-style: normal;
    font-weight: 400;
    src: url('../Dup/img/SourceHanSans-Medium.woff') format('woff'),
        url('../Dup/img/SourceHanSans-Medium.eot')  format('eot');
    font-display: swap;
}
@font-face {
    font-family: 'SourceHanSans';
    font-style: normal;
    font-weight: 700;
    src: url('../Dup/img/SourceHanSans-Bold.woff') format('woff'),
        url('../Dup/img/SourceHanSans-Bold.eot')  format('eot');
    font-display: swap;
}
@font-face {
    font-family: 'SourceHanSans';
    font-style: normal;
    font-weight: 900;
    src: url('../Dup/img/SourceHanSans-Heavy.woff') format('woff'),
        url('../Dup/img/SourceHanSans-Heavy.eot')  format('eot');
    font-display: swap;
}
.linkStyle{color: #333333; text-decoration: underline;}





/*--------全体--------*/
.index header{height: 100vh!important}
#header{background-color: rgba(255,255,255,0.8);top: 0}
header span.after{height: 100vh;right: -250px}
#video{
	background-image:url(./Dup/img/main_img.jpg);
	background-size: cover;
	background-position: 50% 50%;
}


header span.before,
#top_contents2 div span.after,
#top_contents2{background-color: #f9c622;}
#top_contents1 h3::before,#top_contents2 h3::before{z-index:-1;}
#logo { width: 100px;}
#header {padding: 0px 0px;}
#top_message{padding-top:150px;}
#top_message .txt{padding: 60px 60px 100px;    background-color: transparent;}
#top_message h2 {
	font-size: 3.2em;
	font-weight: 900;
	background-color:#e60011;
	color:#fff;
    padding-left: 20px;
    padding-right: 20px;
	margin-bottom: 0;
padding-bottom: 5px;
}
#top_message p{ width: 85%;  margin-left: auto;font-size: 1.4em!important;}
.bounce{
	bottom: -130px;
	z-index: -1;
	left: 0;
	right: 0;
}
.bounce > div {
	flex: 1;	
	transform-origin: center bottom;
	transform: scaleY(0);
	backface-visibility: hidden;
	text-align: center;
}
.bounce > div img {width: 75%;}



#vegas .copy{
    left: 10%;
    top: 85%;
z-index: 1
}
#vegas .copy span{
background-color: #000;
    color: #fff;
line-height: 1.4;
    font-size: 4vw;
    font-weight: 900;
padding-bottom: 10px;
}

.copy::before{position: absolute;content: "";background-color: #000;height: 100%;top: 0;left: 0;right: 100%}
.copy.active::before{animation: anime1 1s cubic-bezier(.22,1.11,.58,.98);}


@keyframes anime1 {
0%{left: 0;right: 100%}
50%{left: 0;right: 0%}
100% {left: 100%;right: 0%}
}

#footer_contact h3{margin-bottom:50px;
    color: #000;
    font-weight: 700;}
#footer_contact p.Russo,
#footer_contact .more:last-of-type{display: none;}



/*--------下層--------*/
#page_title span.before { width: 138px;}
#page_title span.after {right: -192px;}

#page6 #cms_2-d .cate{position:relative;}
#page6 #cms_2-d .cate:after {
    position: absolute;
    top: -18px;
    left: -78px;
    content: "";
    height: 92%;
    width: 50%;
    z-index: -999;
    background-color: #e60011;
}
 
#page3 #cms_2-a .cate_box{border: 2px solid #000;    padding-bottom: 0px;align-items: center;}
#page3 #cms_2-a .box_item{padding: 3%;}
#page3 #cms_2-a .cate_title {
  position: relative;
  padding: 21px 42px 21px 42px; 
  font-size: 20px;
  color: #2d2d2d;  
  line-height: 1.6;
	border-top: solid 3px #f9c622;
  border-bottom: solid 3px #e60011;
  z-index:-2;
}

#page3 #cms_2-a .cate_title:before {
  position: absolute;
  content: '';
  left: 0px;
  top: -3px;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 40px #f9c622;
  border-bottom: solid 79px transparent;
  z-index: -1;
}

#page3 #cms_2-a .cate_title:after {
  position: absolute;
  content: '';
  right: 0px;
  top: auto;
	bottom:-2px;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 40px transparent;
  border-bottom: solid 79px #e60011;
  z-index: -1;
}

#page4 #cms_2-d .cate_title {
  position: relative;
  padding: 21px 42px 21px 42px;
  font-size: 20px;
  color: #2d2d2d;  
  line-height: 1.6;
	border-top: solid 3px #f9c622;
  border-bottom: solid 3px #e60011;
  z-index:-2;
}

#page4 #cms_2-d .cate_title:before {
  position: absolute;
  content: '';
  left: 0px;
  top: -3px;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 40px #f9c622;
  border-bottom: solid 79px transparent;
  z-index: -1;
}

#page4 #cms_2-d .cate_title:after {
  position: absolute;
  content: '';
  right: 0px;
  top: auto;
	bottom:-2px;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 40px transparent;
  border-bottom: solid 79px #e60011;
  z-index: -1;
}

#page4 #cms_2-d .box_title{
	border-bottom: none;
	position: relative;
	overflow: hidden;
	padding: .3em;
}
#page4 #cms_2-d .box_title::before,
#page4 #cms_2-d .box_title::after{
	content: "";
	position: absolute;
	bottom: 0;
}
#page4 #cms_2-d .box_title:before{
	border-bottom: 3px solid #f9c622;
	width: 100%;
}
#page4 #cms_2-d .box_title:after{
	border-bottom: 3px solid #e60011;
	width: 100%;
}

#page8 #contact_tel a,#page8 #contact_line a{width: 350px;}
#page8 #contact_line a{
	background-image: url(./Dup/img/qr_line.png);
    background-size: 26%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

/*--------アニメーション--------*/
@-webkit-keyframes passing-bar{
	0% {
		left: 0;
		right: auto;
		width: 0;
	}
	50% {
		left: 0;
		right: auto;
		width: 100%;
	}
	51% {
		left: auto;
		right: 0;
		width: 100%;
	}
	100% {
		left: auto;
		right: 0;
		width: 0;
	}
}
@keyframes passing-bar{
	0% {
		left: 0;
		width: 0;
	}
	50% {
		left: 0;
		width: 100%;
	}
	51% {
		left: 0;
		width: 100%;
	}
	100% {
		left: 100%;
		width: 0;
	}
}
@-webkit-keyframes passing-txt{
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes passing-txt{
	0% { opacity:0; }
	50% { opacity:0; }
	100% { opacity:1; }
}


.passing .passing-bar {
	margin-bottom:30px;
	position: relative;
	display: inline-block;	
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.passing .passing-bar:before {
	content: '';
	display: inline-block;
	width: 0;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;	
	background: #e60011;
}
.passing .passing-bar2:before {
	content: '';
	display: inline-block;
	width: 0;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;	
	background: #000;
}
.passing .passing-txt {
	opacity: 0;	
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.passing.move .passing-bar:before {
	-webkit-animation: passing-bar 1s ease 0s 1 normal forwards;
	animation: passing-bar 1s ease 0s 1 normal forwards;
}
.passing.move .passing-txt {
	-webkit-animation: passing-txt 0s ease .5s 1 normal forwards;
	animation:passing-txt 0s ease .5s 1 normal forwards;
}




/*--------タブレット--------*/
@media screen and (max-width: 768px){
	#vegas .copy { left: 4%; top: 170%;}
	#vegas .copy span { font-size: 7vw;}
#video {  height: 100vh;}
	#top_message{margin-top: 50vh;}
	#top_message .txt { padding: 60px 20px 50px;}
	#top_message h2 {font-size: 2.8em;}
	#top_message p:first-of-type {font-size: 18px;}
	#top_message p {width: 90%;   }
#top_contents1 div span.after { left: -40%;}
#top_contents2 div span.after {  right: -18%;}
	.bounce { bottom: -4%;}
#top_contents1 h3::before, #top_contents2 h3::before {  font-size: 70px;top:-53%;	}


	#page_title span.after { right: 0px;}
	.cate_list{justify-content: flex-start;}
#page8 #contact_line a { background-size: 14%;}
}

/*--------スマートフォン--------*/
@media screen and (max-width: 667px){
	#logo { width: 77px;}
	header span.after {display:none;}
#vegas .copy span { font-size: 11vw;padding-bottom: 7px;}

	#top_message h2 {
    font-size: 1.8em;
    letter-spacing: 2px;
    line-height: 1.6;
}
	#top_message p:first-of-type {    width: 99%;    font-size: 1.1em!important;}
	#top_message { padding: 20px;}
	#top_message .txt { padding: 60px 0px 10px;}
	#top_contents1 h3::before{top: -27%;}
	#top_contents2 h3::before{top: -35%;}
.top_contents1_box, .top_contents2_box {  width: 90%!important;margin: 17% 5%;}
	.top_contents1_box h3, .top_contents2_box h3{    line-height: 1.4;    padding: 7% 0;}
	#page_title span.before { width: 80px;}
#page6 #cms_2-d .cate:after {  left: -17px;  width: 75%;}
#page8 #contact_line a {  background-size: 29%;}

}


/*--------------------------------------------
IE
--------------------------------------------*/
@media all and (-ms-high-contrast:none){
}

@media screen and (max-width: 768px){
#video { height: calc(var(--vh, 1vh) * 100);}
}