/*--------動画--------*/
#video{height: 100vh;}
#main_img{max-height: inherit}

@media screen and (max-width: 768px){
#video {height: 45vh;}
}
@media screen and (max-width: 667px){
#video {height:auto;}
}

/*--------フレーム--------*/
html:before,
html:after,
body:before,
body:after {
  content: "";
  background: #020407;
  position: fixed;
  display: block;
  z-index: 1000;
}

/* 上 */
html:before {
  height: 15px; 
  width: 100vw;
  left: 0;
  top: 0;
}
/* 右 */
html:after {
  width: 15px;
  height: 100vh;
  right: 0;
  top: 0;
}
/* 下 */
body:before {
  height: 15px;
  width: 100vw;
  bottom: 0;
  left: 0;
}
/* 左 */
body:after {
  width: 15px;
  height: 100vh;
  top: 0;
  left: 0;
}

@media screen and (max-width: 667px){
html:before {
  height: 10px; 
}
/* 右 */
html:after {
  width: 10px;
}
/* 下 */
body:before {
  height: 10px;
}
/* 左 */
body:after {
  width: 10px;
}
}




/*--------全体--------*/
.mg_left{margin-left:auto;}
.border_color5{    border-color: #2fbcf9;}

#header::before {
    content: "";
    top: 0;
    right: 0;
    border-bottom: 10em solid transparent;
    border-right: 10em solid #020407; 
    position: absolute;
    z-index: 100;
}
header .menu_stick {    
    top: 40px;
    right: 27px;
}

#sp_nav .grid_3:first-of-type img{left: -30%;}
/*
#contents1,
#contents1-2,
.con4_wrap{
background-image: url(./Dup/img/back02.png);
    background-size: cover;
}
*/
main,
#sp_nav nav{
background-image: url(./Dup/img/back02.png);
    background-size: cover;
    background-position: 50% 50%;
    background-attachment: fixed;
}
#contents1 .con_box,
#contents1-2 .con_box{    background-image: url(./Dup/img/back01.png);background-size: cover;    background-position: 50% 50%;}
.contents1-2 figure img{    top: 44%;left: 40%;}
.contents1-2 .grid_5{padding-top: 16vh;}
#contents3 .con_box,
#contents3-2 .con_box { background-color: rgba(10,19,36,0.5);}
#contents3 .con_box .con_box_inner,
#contents3-2 .con_box .con_box_inner{padding:7% 10%;}
#contents2 .con_box::before,
#contents3 .con_box::before,
#contents3-2 .con_box::before { display: none;}
#contents3 .d_flex, #contents3-2 .d_flex { min-height: 100vh;}

#top_cms .cms_box{
	background-color: rgba(255,255,255,0.2);
    padding: 30px 50px;
    background-position: 50% 50%;
}
#top_cms .cms_3-e .box_item{padding:0;}
#top_cms .cms_3-e .cate_box{padding-top: 7px;padding-bottom: 7px;}
#sns_link li a{   border-radius: 5%;padding: 5px;opacity: 1;}
#sns_link li a:hover{opacity: 0.7;}


/*--------メニューテキスト切替--------*/
.menu_txt_swich{
	position: relative;
	color:#fff;
	border-left:1px solid #fff;
	border-right:1px solid #fff;
	min-width:175px;
	padding: 20px;
	text-align: center;
	display: inline-block;
	transition: all .1s;
}
.menu_txt_swich:hover{
	background:#333;
	color:#fff;
	border-left:1px solid #333;
	border-right:1px solid #333;
}
.menu_txt_swich span{
	position: absolute;
	left: 50%;
	top:50%;
	transform:translate(-50%,-50%);
	transition: all .3s;
	display: block;
	white-space: nowrap;
}
.menu_txt_swich span:nth-child(2){
	opacity:0;
}
.menu_txt_swich:hover span:nth-child(1){
	opacity:0;
}
.menu_txt_swich:hover span:nth-child(2){
	opacity:1;
}

.spmenu_txt_swich{
	position: relative;
	color:#fff;
	min-width:210px;
	padding: 20px;
	text-align: center;
	display: inline-block;
	transition: all .1s;
}
.spmenu_txt_swich:hover{
	background:#fff;
	color:#333!important;
}
.spmenu_txt_swich span{
	position: absolute;
	left: 50%;
	top:50%;
	transform:translate(-50%,-50%);
	transition: all .3s;
	display: block;
	white-space: nowrap;
}
.spmenu_txt_swich span:nth-child(2){
	opacity:0;
}
.spmenu_txt_swich:hover span:nth-child(1){
	opacity:0;
}
.spmenu_txt_swich:hover span:nth-child(2){
	opacity:1;
}


/*--------下層--------*/
#page_title{background-color: rgba(0,0,0,0.7);}
#page_title img{top: 23%;}

.cate_list li a{ background-color: rgba(255,255,255,0.3);}
.cate_list { border-bottom: solid 1px #2481a9;}

#cms_3-e .cate_box{padding: 5px 0px!important;}
#cms_3-e .cate_box:nth-of-type(even) .box_item{
    background-color: #797979;
    border-radius: 5px;
}
#cms_5-c .box_title1::before,
#cms_5-c .box_txt1::before{display:none;}
#cms_2-d .box_title{color: #d8ab1d;}
#cms_2-d .box_txt1{color: #333;}
#contents4 .con_bg_img{background-color: #102848;}



/*--------自動リンク--------*/
.linkStyle{color: #fff;}
.underline {
  --line: #fff;
  --color: #2b3044;
  text-decoration: none;
  color: var(--color);
  position: relative;
}
.underline span {
  background-image: linear-gradient(0deg, var(--line) 0%, var(--line) 100%);
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: var(--background-size, 100%) 1px;
  transition: background-size 0.2s linear var(--background-delay, 0.15s);
  transform: translateZ(0);
}
.underline svg {
  vertical-align: top;
  display: inline;
  line-height: 1;
  width: 25px;
  height: 28px;
  position: relative;
  left: -2px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1px;
  stroke: var(--line);
  stroke-dasharray: 7.95 30;
  stroke-dashoffset: var(--stroke-dashoffset, 46);
  transition: stroke-dashoffset var(--stroke-duration, 0.15s) var(--stroke-easing, linear) var(--stroke-delay, 0s);
}
.underline:hover {
  --background-size: 0%;
  --background-delay: 0s;
  --stroke-dashoffset: 26;
  --stroke-duration: 0.3s;
  --stroke-easing: cubic-bezier(0.3, 1.5, 0.5, 1);
  --stroke-delay: 0.195s;
}

/*--------animation--------*/
.matrix .bg-wrap,
.matrix .bg-wrap .inn {
  display: block;
}
 
.matrix .bg-wrap {
  overflow: hidden;
  opacity: 0;
}
 
.matrix .bg-wrap + .bg-wrap {
  margin-top: 10px;
} 

.matrix .bg-wrap .inn {
  opacity: 0;
  transform: matrix(1, 0, 0, 1, 0, 100);
  transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
 
.matrix.is-animated .bg-wrap {
  opacity: 1;
}
 
.matrix.is-animated .bg-wrap .inn {
  opacity: 1;
  transform: matrix(1, 0, 0, 1, 0, 0);
}




.mask-bg {
  color: transparent;
  display: inline-block;
  overflow: hidden;
  position: relative;
  transition: color 0ms 450ms;
}
.mask-bg::after {
  background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
  bottom: 0;
  content: '';
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(0, 100%);
} 
.mask-bg.is-animated {
  color: #fff;
}
.mask-bg.is-animated::after {
  animation: mask-bg 1.2s cubic-bezier(0.8, 0, 0.170, 1);
}
 
@keyframes mask-bg {
  0% {
    transform: translate(0, 101%)
  }
  40%, 60% {
    transform: translate(0, 0%)
  }
  100% {
    transform: translate(0, -100%)
  }
}


.stroke {
  position: relative;
}
 
.stroke .border {
  content: "";
  position: absolute;
  opacity: 0;
}
.stroke .border.top,
.stroke .border.bottom {
  width: calc(100% - 20px);
}
.stroke .border.top {
  border-top: 3px solid #2481a9;
  right: 0;
  top: 0;
}
.stroke .border.bottom {
  border-bottom: 3px solid #2481a9;
  left: 0;
  bottom: 0;
}
 
.stroke .border.right,
.stroke .border.left {
  height: calc(100% - 20px);
}
.stroke .border.right {
  border-right: 3px solid #2481a9;
  right: 0;
  top: 0;
}
.stroke .border.left {
  border-left: 3px solid #2481a9;
  left: 0;
  bottom: 0;
}
 
.stroke.is-animated .border {
  opacity: 1;
}
 
.stroke.is-animated .border.top,
.stroke.is-animated .border.bottom {
  animation: stroke-width 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.stroke.is-animated .border.right,
.stroke.is-animated .border.left {
  animation: stroke-height 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}
 
@keyframes stroke-width {
  0% {
    width: 0;
    opacity: 1;
  }
  100% {
    width: calc(100% - 20px);
    opacity: 1;
  }
}
 
@keyframes stroke-height {
  0% {
    height: 0;
    opacity: 1;
  }
  100% {
    height: calc(100% - 20px);
    opacity: 1;
  }
}

/*--------タブレット--------*/
@media screen and (max-width: 768px){
header{    height: inherit!important;}

}

/*--------スマートフォン--------*/
@media screen and (max-width: 667px){
.spmenu_txt_swich{color: #333!important;}



main {
    background: none;
  }
#wrap::before{
content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
/*    z-index: -1;*/
    width: 100%;
    height: 100vh;
    background-repeat: repeat-y;
    background-position: top;
    background-image: url(./Dup/img/back02.png);
    background-size: cover;
	}
		

#sp_nav nav{
background-image: none;
}
#sp_nav::after {
  content: "";
  position: fixed;
  top: 0;
  height: 100vh;
  left: 0;
  right: 0;
  background: url("./Dup/img/back02.png") ;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#page_title img { top: 50%;}
#loading_bg{height: calc(var(--vh, 1vh) * 100);}
#loading_bg img{    max-width: 130px;}
#sp_nav .grid_6{    padding-top: 15px;    padding-bottom: 15px;}
.spmenu_txt_swich { min-width: 180px;padding: 15px;}
#header h1 a img{    max-width: 90px;}
#header::before {
    border-bottom: 7em solid transparent;
    border-right: 7em solid rgba(2, 4, 7,0.45);
}
header .menu_stick {  top: 27px;  right: 11px;}

.contents1-2 .grid_5 {  padding-top: 0vh;}
#contents1-2 .con_box{  top: -40px;}
#contents3 .con_box .con_box_inner,
#contents3-2 .con_box .con_box_inner{background-color: rgba(0,0,0,0.4);}


.cate_list li a { padding: 5px 10px;}
header .scroll_d{
	width: 1px;
	height: 80px;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
	z-index: 1;
}
@keyframes line {
	0% {
		bottom: 80px;
		height: 0;
	}
	20% {
		bottom: 0;
		height: 80px;
	}
	40% {
		bottom: 0;
		height: 0;
	}
	100% {
		bottom: 0;
		height: 0;
	}
}

}


/*--------------------------------------------
IE
--------------------------------------------*/
@media all and (-ms-high-contrast:none){
.linkStyle{text-decoration: underline;}
.menu_txt_swich span{padding:25px 20px 20px 20px;}
.cate_list li a{padding:13px 20px 7px 20px;}
.spmenu_txt_swich span{padding:26px 20px 20px 20px;}

#contents3 .con_box .con_box_inner, #contents3-2 .con_box .con_box_inner{margin-top:22vh;}

.page04 #cms_3-e .box_title1{padding:11px  15px 3px 15px;}
#contact_tel a,
#contact_tel2 a{padding:34px 20px 25px 20px;}


}