.bg_color1 {
background-color: #000000;
    color: #fff;
}
.bg_color3 {background-color: #ff006a;}
.border_color3 {border-color: #ffff03;}
.border_color1 {border-color: #ff006a;}
.txt_color_nomal {color: #000000;}
.txt_color1 {color: #000000;}
.txt_color3 {color: #000000;}
.txt_color4 {color: #ff006a;}






#container {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
#container p {
  position: absolute;
  color: white;
  font-size: 12px;
  left: 10px;
  top: 10px;
  font-family: "Lato", sans-serif;
}
#container #svg {
  width: 700px;
  height: 150px;
  text-align: center;
}
#container #svg #svgTextTwo {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

/*-------------------------------------------------------
				ページタイトルアニメーション
-------------------------------------------------------*/
h2 > span > span{
     display: inline-block;
     -webkit-transform: translateY(20px);
     transform: translateY(20px);
     -webkit-animation: .35s cubic-bezier(.175,.885,.32,1.275) both;
     animation: .35s cubic-bezier(.175,.885,.32,1.275) both;
     opacity: 0;
}

h2 > span > span:nth-child(1){
-webkit-transition-delay: 200ms;transition-delay: 200ms;
-webkit-animation-delay: 200ms;animation-delay: 200ms;
}
h2 > span > span:nth-child(2){
-webkit-transition-delay: 250ms;transition-delay: 250ms;
-webkit-animation-delay: 250ms;animation-delay: 250ms;
}
h2 > span > span:nth-child(3){
-webkit-transition-delay: 300ms;transition-delay: 300ms;
-webkit-animation-delay: 300ms;animation-delay: 300ms;
}
h2 > span > span:nth-child(4){
-webkit-transition-delay: 350ms;transition-delay: 350ms;
-webkit-animation-delay: 350ms;animation-delay: 350ms;
}
h2 > span > span:nth-child(5){
-webkit-transition-delay: 400ms;transition-delay: 400ms;
-webkit-animation-delay: 400ms;animation-delay: 400ms;
}
h2 > span > span:nth-child(6){
-webkit-transition-delay: 450ms;transition-delay: 450ms;
-webkit-animation-delay: 450ms;animation-delay: 450ms;
}
h2 > span > span:nth-child(7){
-webkit-transition-delay: 500ms;transition-delay: 500ms;
-webkit-animation-delay: 500ms;animation-delay: 500ms;
}
h2 > span > span:nth-child(8){
-webkit-transition-delay: 550ms;transition-delay: 550ms;
-webkit-animation-delay: 550ms;animation-delay: 550ms;
}
h2 > span > span:nth-child(9){
-webkit-transition-delay: 600ms;transition-delay: 600ms;
-webkit-animation-delay: 600ms;animation-delay: 600ms;
}
h2 > span > span:nth-child(10){
-webkit-transition-delay: 650ms;transition-delay: 650ms;
-webkit-animation-delay: 650ms;animation-delay: 650ms;
}
h2 > span > span:nth-child(11){
-webkit-transition-delay: 700ms;transition-delay: 700ms;
-webkit-animation-delay: 700ms;animation-delay: 700ms;
}
h2 > span > span:nth-child(12){
-webkit-transition-delay: 750ms;transition-delay: 750ms;
-webkit-animation-delay: 750ms;animation-delay: 750ms;
}
h2 > span > span:nth-child(13){
-webkit-transition-delay: 800ms;transition-delay: 800ms;
-webkit-animation-delay: 800ms;animation-delay: 800ms;
}
h2 > span > span:nth-child(14){
-webkit-transition-delay: 850ms;transition-delay: 850ms;
-webkit-animation-delay: 850ms;animation-delay: 850ms;
}
h2 > span > span:nth-child(15){
-webkit-transition-delay: 900ms;transition-delay: 900ms;
-webkit-animation-delay: 900ms;animation-delay: 900ms;
}

h2.is-show > span > span
{
     -webkit-animation-name: slide-bs;
     animation-name: slide-bs;
     opacity: 1;
}

@keyframes slide-bs{
     0%{-webkit-transform: translateY(20px);transform: translateY(20px);}
     100%{-webkit-transform: translateY(0);transform: translateY(0);}
}



/*-------------------------------------------------------
			カーソル
-------------------------------------------------------*/


#wrap,.flex_box{cursor: none}

.cursor,.follower{
	border-radius: 50%;
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
    background: #ffffff;
}
.cursor{
	width: 8px;
	height: 8px;
	background-color: #ffff03;
	opacity: 0.6;
	z-index: 1001;
}
.follower{
   width: 30px;
   height: 30px;
    background-color: #80d2fc;
    background-color: #00a5f8;
   -webkit-border-radius: 50%;
   border-radius:         50% ;
	z-index: 1000;
	transition: 0.3s;
	opacity: 0.75;
	transition-property: transform,background
}
.follower.is-active{
	background-color: transparent;

}
.cursor.is-active{
		background-color: #00a5f8 ;
	background-color: transparent ;
}
.cursor.is-active.more_move,.cursor.is-active.more_info{
	background-color: transparent;
}
.follower.is-active.more_move,.follower.is-active.more_info{
	background-color: transparent;
	border-radius: 0;
	border: none;
	transform: scale(1);
	transition-property: none;
	animation: rumble 0.2s linear infinite;
}
.follower.is-active::before{
	content: url("Dup/img/cursor.png");
	width: 5px!important;
	height: 5px;
	position: relative;
	top: -34px;
	left: -34px;
	background-size: 30px;
}
a{cursor: none}
/*-------------------------------------------------------
				ページタイトルアニメーション
-------------------------------------------------------*/
.more{
 
    background-color: #000;

}
#top_cms .more{
    display: inline-block;
}
.more a{
    font-weight: bold;
    font-size: 30px;
    color: #ffffff;
    border-color: #000000;
}
/*-
.more{
     position: relative;
    left: 50%;
    transform: translateX(-50%);
    -webkit- transform: translateX(-50%);
    background-color: #000;
    display: inline-block;
}
.foot_tel_bt{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    -webkit- transform: translateX(-50%);
    display: inline-block;
    width: 100%;
}
.foot_tel_bt:hover a{
        display: inline-block;
    width: 100%;
    position: relative;
    left: 50%;
    transform: translateX(0%);
    -webkit- transform: translateX(0%);
}
.contact_bt,.tel_bt{
        position: relative;
    left: 50%;
    transform: translateX(-50%);
    -webkit- transform: translateX(-50%);
    display: inline-block;
    width: 100%;
}

.more:hover a:before, .more:hover a:after {
  position: absolute;
  content: "More";
  transform: translate(-50%, -50%);
  z-index: -1;
}
.more:hover a:before {
  top: 49.5%;
  left: 49.5%;
  color: rgba(233, 30, 99, 0.8);
  animation: distort1 200ms linear infinite;
}
.more:hover a:after {
  top: 50.5%;
  left: 50.5%;
  color: rgba(3, 169, 244, 0.8);
  animation: distort2 200ms linear infinite;
}
-*/



.more a:hover,.contact_bt a:hover,.tel_bt a:hover ,.foot_tel_bt a:hover,#page8 a .contact_tel:hover,#page10 li a:hover{
    animation: hurueru .1s  infinite;
}
@keyframes hurueru {
	0%	{transform:rotate(0deg)	translate(0,0);}
	12.5%	{transform:rotate(0.4deg)	translate(1px,-1px);}
	25%	{transform:rotate(0.8deg)	translate(0px,1px);}
	37.5%	{transform:rotate(0.4deg)	translate(-1px,0);}
	50%	{transform:rotate(0deg)	translate(0,0);}
	62.5%	{transform:rotate(-0.4deg)	translate(1px,0);}
	75%	{transform:rotate(-0.8deg)	translate(0,1px);}
	87.5%	{transform:rotate(-0.4deg)	translate(-1px,-1px);}
	100%	{transform:rotate(0deg)	translate(0,0);}
}

@keyframes distort1 {
  0% {
    top: 49.5%;
    left: 49.5%;
  }
  12.5% {
    top: 49.5%;
    left: 50%;
  }
  25% {
    top: 49.5%;
    left: 50.5%;
  }
  37.5% {
    top: 50%;
    left: 50.5%;
  }
  50% {
    top: 50.5%;
    left: 50.5%;
  }
  62.5% {
    top: 50.5%;
    left: 50%;
  }
  75% {
    top: 50.5%;
    left: 49.5%;
  }
  87.5% {
    top: 50%;
    left: 49.5%;
  }
  100% {
    top: 49.5%;
    left: 49.5%;
  }
}
@keyframes distort2 {
  0% {
    top: 50.5%;
    left: 50.5%;
  }
  12.5% {
    top: 50%;
    left: 50.5%;
  }
  25% {
    top: 49.5%;
    left: 50.5%;
  }
  37.5% {
    top: 49.5%;
    left: 50%;
  }
  50% {
    top: 49.5%;
    left: 49.5%;
  }
  62.5% {
    top: 50%;
    left: 49.5%;
  }
  75% {
    top: 50.5%;
    left: 49.5%;
  }
  87.5% {
    top: 50.5%;
    left: 50%;
  }
  100% {
    top: 50.5%;
    left: 50.5%;
  }
}

/* ----------　all　---------- */
.linkStyle{
	color:#00a7fb;
}
.linkStyle:hover{
	color:#00a7fb;
	opacity: 0.7;
	transition: all 0.5s;
}
body,.font_en{
font-family: 'Montserrat', 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.fa-envelope:before {
    content: "\f086";
}
#top_cms .cms_title h2,#page_title h2{
    text-shadow: 2px 2px 0 #141414, -2px 2px 0 #141414, 2px -2px 0 #141414, -2px -2px 0 #141414, 2px 0px 0 #141414, 0px 2px 0 #141414, -2px 0px 0 #141414, 0px -2px 0 #141414, 0 7px 0 #141414, -2px 7px 0 #141414, 2px 7px 0 #141414;
    color: white;
    font-size: 40px;
    font-weight: bold;

}
header{
        background-color: #fff!important;
}
footer .logo img{
    max-width: 350px;    
}
.foot_tel_bt a {
    max-width: 100%;
}
.contact_bt a:hover,.tel_bt a:hover ,.foot_tel_bt:hover a{
    background-color: #ff006a;
}


#main_menu ul li a::before {
    background-color: #00a7fb;
}
article{
   padding-right: 30px;
    padding-left: 30px; 
}
.fat-nav {
    background: transparent!important;
}
.link_box li{
width: 12%!important;
}
.main_box{
    position: relative;
}
.main_box .left-line, .main_box .right-line {
    width: 39px;
    position: absolute;
    top: 0;
    height: 100%;
    background: #ffd700;
    border-right: 2px solid #000;
    border-left: 2px solid #000;
    z-index: 1;
    background-size: auto 224.5px;
    background-position: center top;
    background-repeat: repeat-y;
    z-index: 2;
    height: 100vh;
    position: fixed;
}
.main_box .left-line{
    -webkit-animation: marquee2 10s linear infinite;
    animation: marquee2 10s linear infinite;
    background-image: url(Dup/img/line1.png);
}
.main_box .right-line{
    left: 98%;
    left: -webkit-calc(100% - 43px);
    left: calc(100% - 43px);
    -webkit-animation: marquee1 10s linear infinite;
    animation: marquee1 10s linear infinite;
    background-image: url(Dup/img/line2.png);
}

@-webkit-keyframes marquee1 {
    from {background-position: center 0;}
    to {background-position:  center -1956px;}
    
}
@keyframes marquee1 {
    from {background-position: center 0;}
    to {background-position:  center -1956px;}
}
@-webkit-keyframes marquee2 {
    from {background-position: center -1956px;}
    to {background-position:  center 0px;}
    
}
@keyframes marquee2 {
    from {background-position: center -1956px;}
    to {background-position:  center 0px;}
}
.button2:hover {
    box-shadow: none;
    background-color: #ff006a;
    color: #fff;
}
.txt_shadow-b {
    text-shadow:none;
}

footer{
    padding-left: 60px!important;
    padding-right: 60px!important;
} 


/* ----------　top　---------- */
#main_img .dec img{
    max-height: auto!important;
    min-height: auto!important;
}
#main_img .dec1{
    position: absolute;
    z-index: 9;
    top: 50px;
    left: 20%;
    width: 25%;
}
#main_img .dec2{
        position: absolute;
    z-index: 9;
    top: 45%;
    left: 60%;
    width: 285px;
}
#main_img .dec3{
    position: absolute;
    z-index: 9;
    top: 65%;
    left: 22%;
    width: 12%;
}
#main_img .dec4{
    position: absolute;
    z-index: 9;
    top: 81%;
    left: 41%;
    width: 15%;
}
#main_img .dec1{
  animation: rotate-anime 30s linear infinite;
}
#main_img .dec2 {
  animation: rotate-anime 20s linear infinite;
}
@keyframes rotate-anime {
  0%  {transform: rotate(0);}
  100%  {transform: rotate(360deg);}
}
#main_img .dec3{
  animation: rotate-anime2 10s linear infinite;
}
#main_img .dec4 {
  animation: rotate-anime2 25s linear infinite;
}
@keyframes rotate-anime2 {
  0%  {transform: rotate(360deg);}
  100%  {transform: rotate(0);}
}
#contents1 h2,#contents2 h2,#contents3 h3{
    text-shadow: 2px 2px 0 #141414, -2px 2px 0 #141414, 2px -2px 0 #141414, -2px -2px 0 #141414, 2px 0px 0 #141414, 0px 2px 0 #141414, -2px 0px 0 #141414, 0px -2px 0 #141414, 0 5px 0 #141414, -2px 5px 0 #141414, 2px 5px 0 #141414;
    color: white;
    font-size: 20px;
    font-weight: bold;
}
.top_cms_back{
    background-image: linear-gradient(#02a4f7 1px, transparent 0), linear-gradient(90deg, #02a4f7 1px, transparent 0);
    background-size: 40px 40px;
    padding-top: 80px;
    padding-bottom: 49px;
}
.top_cms_box{
    background-color: #fff;
    padding: 30px;
    border: 1px solid #333;
    margin: 50px 0;
}
.cms_title::before {
    background-color: #00a5f8;
}


#contents1,#contents2,#contents3 {
  position: relative;
}
#contents1 span,#contents2 span,#contents3 span {
  position: relative;
}
#contents1::before{
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #ffff03;
  transition: 0.5s;
}

#contents2::before{
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  background: #00a5f8;
  transition: 0.5s;
}
#contents3::before{
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #d698f8;
  transition: 0.5s;
}


#contents1.fade::before,#contents2.fade::before,#contents3.fade::before {
  width: 100%;
}
/* ----------　下層ページ　---------- */
#page_title .page_box::before {
    background-color: #00a5f8;
}
.cate_list li a{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 10px;
}
#cms_6-c .arrow {
    border-color: #ff006a;
}

#page8 .contact_tel{
    position: relative;
    width: 100%;
    padding: 30px 0;
}
#page8 .con1 .contact_tel{
    background-color: #ffff00!important;
}
#page8 .con2 .contact_tel{
    background-color: #ff006a!important;
}
#page10 li:hover a{
        position: relative;
}

/* ----------　IE　---------- */
@media all and (-ms-high-contrast: none){
body{
    overflow: hidden;
}
#page9 .box p a{
padding-bottom: 8px;    
}
}

/* ----------　タブレット　---------- */
@media screen and (max-width: 768px){
.hamburger {
    top: 38px;
}
.link_box ul {
    justify-content: center;
}
.link_box li {
    width: 15%!important;
    max-width: 45px!important;
    margin-left: 20px;
    margin-right: 20px;
}
 .contact_bt, .tel_bt {
    display: none;
} 
#wrap{cursor: auto;}
	a{cursor: pointer;}
	.cursor,.follower{
		display: none;
	}
article {
    padding-right: 40px;
    padding-left: 40px;
}
.all article {
    padding-left: 70px;
    padding-right: 70px;
}
#page_title{
        margin-top: 50px!important;
}
}


/* ----------　スマホ　---------- */
@media screen and (max-width: 667px){
#loader #clipping text,#container #svg #svgTextTwo{
    font-size: 35px!important;
    
}
.hamburger {
    top: 15px;
}
#container #svg {
    height: 190px;
}
header{
    padding-bottom: 0px!important;
    padding-top: 0px!important;
}
.link_box li {
    max-width: 35px!important;
    margin-left: 15px;
    margin-right: 15px;
}  
.main_box .right-line {
    left: 98%;
    left: -webkit-calc(100% - 43px);
    left: calc(100% - 43px);

}

article {
    padding-right: 30px;
    padding-left: 30px;
}
.more {
    width: 100%;
}
.more a {
    font-size: 20px;
    width: 100%;
}
.top_cms_box {
    padding: 30px 10px;
}
.main_box .left-line{
    -webkit-animation: marquee2 30s linear infinite;
    animation: marquee2 30s linear infinite;
}
.main_box .right-line{
    -webkit-animation: marquee1 30s linear infinite;
    animation: marquee1 30s linear infinite;
}
.page3.main_box .left-line{
    -webkit-animation: marquee1 30s linear infinite;
    animation: marquee1 30s linear infinite;   
}
.page3.main_box .right-line{
    -webkit-animation: marquee2 30s linear infinite;
    animation: marquee2 30s linear infinite; 
 
}
.cms_title {
    padding-left: 30px;
}
.cms_title::before {
    width: 20px;
}
#top_cms .cms_title h2{
    font-size: 30px;
}
#page_title {
    margin-top: 10px!important;
}
.all article{
    padding-left: 40px;
    padding-right: 40px;
}
#page_title h2 {
    font-size: 22px;
    letter-spacing: 3px;
    
}
#page7,#page9,#page10{
   padding: 0 20px;
}

}