﻿/*--------リンク・フォント--------*/
.linkStyle{color: #333333; text-decoration: underline;}

/*--------全体--------*/

.loading {
position: fixed;
  width: 100vw;
height: calc(var(--vh, 1vh) * 100);
  top: 0px;
  left: 0px;
  background: #fff;
  z-index: 9999;

}

.loading svg{
position: absolute;
	top: 50%!important;
	left: 50%!important;
	transform: translate(-50%,-50%)!important;
	width: 50%!important;
	max-width: 200px!important;
}
#logo .logo img{width: 60%!important;}
#main_img {
    max-height: inherit;
}
#top_contents1{
	background-image:url(./Dup/img/back01.jpg);
	background-repeat: no-repeat;
    background-position: 100% 50%;	
}
#top_contents1 h2{
	
    text-align: left;    
    font-size: 3em;
    font-weight: 900;
    font-family: "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
}
#top_contents1 p{
	font-size: 1.05em;
    font-weight: bold;    
    display: block;
}
@media screen and (max-width: 1200px){
#top_contents1 .catch_txt{ background-color: rgba(255,255,255,0.8);}
}
@media screen and (min-width: 1200px){
	#top_contents1{	background-size: 55%;}
	#top_contents1 h2{	width: 65%;   }
	#top_contents1 p{width: 60%;}
}


#top_contents2{
	background-size: 3px 3px;
    background-image: radial-gradient(#ccc 1%, transparent 10%);
    background-image: -ms-radial-gradient(#ccc 1%, transparent 10%);
}
#top_contents2 h2{
	font-size: 1.5em;
    font-weight: 900;
    font-family: "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
}


.svg_box {
	width: 100%;
	margin: -25% auto -10%;
	position: relative;	
	z-index: -1;
}

.svg_box video {
  width: 100%;
}

svg {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

svg text {
  font-family: Biko, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 25px;
}

svg rect {
  fill: white;
}

svg > rect {
  -webkit-mask: url(#mask);
  mask: url(#mask);
}
#loading_line .line.bg_color1 { background-color: #375fbb;}
#fix_menu{    background-color: #ffef20;}

#top_contact_box .btn_box:first-of-type{margin-bottom: 0px;}
#top_contact_box .btn_box:last-of-type{display: none;}

.passing .passing-box {
	display: block;
	text-align: center;
}
.passing .passing-bar {
	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: #2252C1;
}
.passing .passing-txt {
	opacity: 0;	
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);	
	font-size: 4.0rem;
	font-weight: bold;
	line-height: 1.5;
}
.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;
}
#top_contact_box .top .txt_wrap{    height: 266px!important;}

/*--------下層--------*/

#page6 #cms_2-a .cate_wrap:nth-of-type(1) .box_item:nth-of-type(2) {
  position: relative;
  display: inline-block;
  padding: 7px 25px;
  background: #e0edff;
	border-radius: 5px;
}

#page6 #cms_2-a .cate_wrap:nth-of-type(1) .box_item:nth-of-type(2):before {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 15px solid #e0edff;
}


/*--------タブレット--------*/
@media screen and (max-width: 768px){
.overlay.open {
    margin-top: 16px;
}
#logo h1.logo {     max-width: 200px;}
#logo h1.logo img{width: 85%!important;}
.svg_box { margin: -35% auto -10%;}
#footer p:first-of-type{text-align: center;}
}

/*--------スマートフォン--------*/
@media screen and (max-width: 667px){

.overlay.open {
    margin-top: 28px;
}
.loading svg { width: 30%!important;}
#logo h1.logo img{width: 85%!important;}
#main_img {
    margin-top: 0px;
}
#top_contents1 .catch_txt {
    padding-right: 30px;
}
#top_contents1 {
    background-position: 22% 20%;
    padding: 50px 0px 50px 25px;
}
#top_contents1 h2 {
    font-size: 1.6em;
}
#top_contents1 p {
    font-size: 0.9em;
}
#top_contents2 .img_box, #top_contents2 .con_box .text_box {
    width: 90%!important;
}
#top_contents2 h2 {
    font-size: 1.3em;
}
.top_cms_title .cms_title_inner{
    padding: 15px 40px;
}

#page6 #cms_2-a .cate_wrap:nth-of-type(1) .box_item:nth-of-type(2):before {
    top:  -30px;
  left: 50%;
    margin-top: 0px;
  margin-left: -15px;
    border-right: none;
  border-bottom: 15px solid #e0edff;
}
#footer p:first-of-type {
    text-align: left;
}
#footer #logo2{    width: 30%!important;}

#top_contact_box .top .txt_wrap { 
    height: auto!important;
}

}


/*--------------------------------------------
IE
--------------------------------------------*/
@media all and (-ms-high-contrast:none){

#contact_tel a,
#contact_tel2 a {padding:37px 30px 30px}
}



@-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; }
}


@-webkit-keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 354.08843994140625px;
    stroke-dasharray: 354.08843994140625px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 354.08843994140625px;
    stroke-dasharray: 354.08843994140625px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

@keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-1 {
  -webkit-animation: animate-svg-stroke-1 0.8s ease-in-out 0s both,
                       animate-svg-fill-1 0.7s ease-in-out 0.5s both;
          animation: animate-svg-stroke-1 0.8s ease-in-out 0s both,
               animate-svg-fill-1 0.7s ease-in-out 0.5s both;
}

@-webkit-keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 1907.339599609375px;
    stroke-dasharray: 1907.339599609375px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 1907.339599609375px;
    stroke-dasharray: 1907.339599609375px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

@keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-2 {
  -webkit-animation: animate-svg-stroke-2 0.8s ease-in-out 0.12s both,
                       animate-svg-fill-2 0.7s ease-in-out 0.6s both;
          animation: animate-svg-stroke-2 0.8s ease-in-out 0.12s both,
               animate-svg-fill-2 0.7s ease-in-out 0.6s both;
}

@-webkit-keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 234.29896545410156px;
    stroke-dasharray: 234.29896545410156px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 234.29896545410156px;
    stroke-dasharray: 234.29896545410156px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

@keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-3 {
  -webkit-animation: animate-svg-stroke-3 0.8s ease-in-out 0.24s both,
                       animate-svg-fill-3 0.7s ease-in-out 0.7s both;
          animation: animate-svg-stroke-3 0.8s ease-in-out 0.24s both,
               animate-svg-fill-3 0.7s ease-in-out 0.7s both;
}

@-webkit-keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 533.8900146484375px;
    stroke-dasharray: 533.8900146484375px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 533.8900146484375px;
    stroke-dasharray: 533.8900146484375px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(87, 87, 87);
  }
}

@keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(87, 87, 87);
  }
}

.svg-elem-4 {
  -webkit-animation: animate-svg-stroke-4 0.8s ease-in-out 0.36s both,
                       animate-svg-fill-4 0.7s ease-in-out 0.8s both;
          animation: animate-svg-stroke-4 0.8s ease-in-out 0.36s both,
               animate-svg-fill-4 0.7s ease-in-out 0.8s both;
}

@-webkit-keyframes animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 187.07264709472656px;
    stroke-dasharray: 187.07264709472656px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 187.07264709472656px;
    stroke-dasharray: 187.07264709472656px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

@keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-5 {
  -webkit-animation: animate-svg-stroke-5 0.8s ease-in-out 0.48s both,
                       animate-svg-fill-5 0.7s ease-in-out 0.9s both;
          animation: animate-svg-stroke-5 0.8s ease-in-out 0.48s both,
               animate-svg-fill-5 0.7s ease-in-out 0.9s both;
}

@-webkit-keyframes animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 137.05545043945312px;
    stroke-dasharray: 137.05545043945312px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 137.05545043945312px;
    stroke-dasharray: 137.05545043945312px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

@keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-6 {
  -webkit-animation: animate-svg-stroke-6 0.8s ease-in-out 0.6s both,
                       animate-svg-fill-6 0.7s ease-in-out 1s both;
          animation: animate-svg-stroke-6 0.8s ease-in-out 0.6s both,
               animate-svg-fill-6 0.7s ease-in-out 1s both;
}

@-webkit-keyframes animate-svg-stroke-7 {
  0% {
    stroke-dashoffset: 143.74642944335938px;
    stroke-dasharray: 143.74642944335938px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-7 {
  0% {
    stroke-dashoffset: 143.74642944335938px;
    stroke-dasharray: 143.74642944335938px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

@keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-7 {
  -webkit-animation: animate-svg-stroke-7 0.8s ease-in-out 0.72s both,
                       animate-svg-fill-7 0.7s ease-in-out 1.1s both;
          animation: animate-svg-stroke-7 0.8s ease-in-out 0.72s both,
               animate-svg-fill-7 0.7s ease-in-out 1.1s both;
}

@-webkit-keyframes animate-svg-stroke-8 {
  0% {
    stroke-dashoffset: 128.0785140991211px;
    stroke-dasharray: 128.0785140991211px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-8 {
  0% {
    stroke-dashoffset: 128.0785140991211px;
    stroke-dasharray: 128.0785140991211px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

@keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-8 {
  -webkit-animation: animate-svg-stroke-8 0.8s ease-in-out 0.84s both,
                       animate-svg-fill-8 0.7s ease-in-out 1.2000000000000002s both;
          animation: animate-svg-stroke-8 0.8s ease-in-out 0.84s both,
               animate-svg-fill-8 0.7s ease-in-out 1.2000000000000002s both;
}

@-webkit-keyframes animate-svg-stroke-9 {
  0% {
    stroke-dashoffset: 181.79905700683594px;
    stroke-dasharray: 181.79905700683594px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-9 {
  0% {
    stroke-dashoffset: 181.79905700683594px;
    stroke-dasharray: 181.79905700683594px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes animate-svg-fill-9 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

@keyframes animate-svg-fill-9 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-9 {
  -webkit-animation: animate-svg-stroke-9 0.8s ease-in-out 0.96s both,
                       animate-svg-fill-9 0.7s ease-in-out 1.3s both;
          animation: animate-svg-stroke-9 0.8s ease-in-out 0.96s both,
               animate-svg-fill-9 0.7s ease-in-out 1.3s both;
}

@-webkit-keyframes animate-svg-stroke-10 {
  0% {
    stroke-dashoffset: 137.05555725097656px;
    stroke-dasharray: 137.05555725097656px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-10 {
  0% {
    stroke-dashoffset: 137.05555725097656px;
    stroke-dasharray: 137.05555725097656px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes animate-svg-fill-10 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

@keyframes animate-svg-fill-10 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-10 {
  -webkit-animation: animate-svg-stroke-10 0.8s ease-in-out 1.08s both,
                       animate-svg-fill-10 0.7s ease-in-out 1.4s both;
          animation: animate-svg-stroke-10 0.8s ease-in-out 1.08s both,
               animate-svg-fill-10 0.7s ease-in-out 1.4s both;
}

@-webkit-keyframes animate-svg-stroke-11 {
  0% {
    stroke-dashoffset: 143.93565368652344px;
    stroke-dasharray: 143.93565368652344px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animate-svg-stroke-11 {
  0% {
    stroke-dashoffset: 143.93565368652344px;
    stroke-dasharray: 143.93565368652344px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes animate-svg-fill-11 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

@keyframes animate-svg-fill-11 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-11 {
  -webkit-animation: animate-svg-stroke-11 0.8s ease-in-out 1.2s both,
                       animate-svg-fill-11 0.7s ease-in-out 1.5s both;
          animation: animate-svg-stroke-11 0.8s ease-in-out 1.2s both,
               animate-svg-fill-11 0.7s ease-in-out 1.5s both;
}
