@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans');
@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mrs+Saint+Delafield&display=swap');
@import url('https://fonts.googleapis.com/css2?family=League+Script&display=swap');
html,body {font-family: 'Noto Sans JP', sans-serif;
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
  }
body {background-color: #ffffff;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
body {font-family: 'Noto Sans JP', sans-serif;
	font-size: 15px;
	line-height: 2.5;
	color: #000000;
letter-spacing: 0.05em;
	overflow:scroll;
  }
@keyframes fadeIn {
    0% {opacity: 0}
    
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

img {
	border: none;width: 100%;height: auto;
	vertical-align: top;
}
section {
	position: relative;
}
.def {overflow: hidden; clear: both; position: relative;}		
/* リンク部分
----------------------------------------------------------------------------------------------------------------------*/

a {
	color: #000000;
	text-decoration: none!important;
}
a:visited {m
	text-decoration: none!important;
}
a:hover {
	/*color: #000000;*/
	text-decoration: none!important;
}
a:active {
	text-decoration: none!important;
}

/* フロート
----------------------------------------------------------------------------------------------------------------------*/


.fL {float:left;}
.fR {float:right;}


/* マージン
----------------------------------------------------------------------------------------------------------------------*/

.mb5 {margin-bottom:5px;}
.mb10 {margin-bottom:10px;}
.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom:30px;}
.mb40 {margin-bottom:40px;}
.mb50 {margin-bottom:50px;}
.mb60 {margin-bottom:60px;}
.mb70 {margin-bottom:70px;}
.mb80 {margin-bottom:80px;}
.mb100 {margin-bottom:100px;}
.mb120 {margin-bottom:120px;}
.mb150 {margin-bottom:150px;}
.mb3p {margin-bottom:7%;}

.mt5 {margin-top:5px;}
.mt10 {margin-top:10px;}
.mt20 {margin-top:20px;}
.mt30 {margin-top:30px;}
.mt40 {margin-top:40px;}
.mt50 {margin-top:50px;}
.mt60 {margin-top:60px;}
.mt70 {margin-top:70px;}
.mt80 {margin-top:80px;}

.ml5 {margin-left:5px;}
.ml10 {margin-left:10px;}
.ml20 {margin-left:20px;}
.ml30 {margin-left:30px;}
.ml40 {margin-left:40px;}
.ml50 {margin-left:50px;}

.mr5 {margin-right:5px;}
.mr10 {margin-right:10px;}
.mr20 {margin-right:20px;}
.mr30 {margin-right:30px;}
.mr40 {margin-right:40px;}
.mr50 {margin-right:50px;}

.pt10 {padding-top:10px;}
.pt20 {padding-top:20px;}
.pt70 {padding-top:70px;}

.pb10 {padding-bottom:10px;}
.pb20 {padding-bottom:20px;}


/*----------------------fontstyle------------------------------*/

.fs00 {font-size:0;}
.fs13px {font-size:13px;}
.fs50 {font-size:50%;}
.fs70 {font-size:70%;}
.fs80 {font-size:80%;}
.fs85 {font-size:85%;}
.fs90 {font-size:90%;}
.fs95 {font-size:95%;}
.fs100 {font-size:100%;}
.fs105 {font-size:105%;}
.fs110 {font-size:110%;}
.fs115 {font-size:115%;}
.fs120 {font-size:120%;}
.fs125 {font-size:125%;}
.fs130 {font-size:130%;}
.fs135 {font-size:135%;}
.fs140 {font-size:140%;}
.fs145 {font-size:145%;}
.fs150 {font-size:150%;}
.fs155 {font-size:155%;}
.fs180 {font-size:180%;}
.fs200 {font-size:200%;}
.fs250 {font-size:250%;}
.fs280 {font-size:280%;}
.fs300 {font-size:300%;}
.fs350 {font-size:350%;}

.fw700 {font-weight: 700;}
.fw900 {font-weight: 900;}

.ff01 {font-family: 'League Script', cursive;}
.ff03 {font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}
.ff04 {font-family: 'Noto Serif', serif;}
.ff05 {font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.ff06 {font-family: 'Noto Sans TC', sans-serif;}
.ff07 {font-family: 'Work Sans', sans-serif;}
.ff08 {font-family: 'Noto Sans JP', sans-serif;}
.ff09 {font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";}


.fc01 {color: #666666;}



/* テキストのスタイル */
.title {
  display: block;
  color: #fff;
  font-family: 'Josefin Sans', sans-serif;
  text-align: center;
}

.title span {
  display: block;
  opacity: 0;
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 1s, opacity linear 0.7s;
}

.title span:first-child {
  transform: translate(0, 40px);
  font-size: 20px;
  transition-delay: 0.25s;
}

.title span:last-child {
  margin-top: 18px;
  transform: translate(0, 30px);
  font-size: 48px;
  transition-delay: 0.45s;
}

.title span {
  opacity: 1;
  transform: translate(0, 0);
}








#container {
    position: relative;
    width: 100%;
    height: 100%;
}

#sphere, #flights, #glow-shadows, #locations, #drag {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

#glow-shadows {
    top: 1px;
    left: 1px;
}

#glow-shadows.earth {
    background: url(../images/earth-glow-shadows.png);
    background-size: 100% 100%;
}

#glow-shadows.mars {
    background: url(../images/mars-glow-shadows.png);
}



.wide-indexslider {overflow: hidden; position: absolute; width: 100%;  wiz-indexdth: 3;}
@media print, screen and (min-width: 1000px) {.wide-indexslider {top: 200px ;}}
@media only screen and (min-width: 701px) and (max-width: 999px) {.wide-indexslider {top: 200px ;}}
@media only screen and (max-width: 700px) {.wide-indexslider {top: 150px ;}}




.fst01 {font-weight: 700; line-height: 1.2; letter-spacing: 0.05em;}
@media print, screen and (min-width: 1000px) {
.fst01 {font-size: 200%; margin: 0 0 30px 0;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.fst01 {font-size: 180%; margin: 0 0 30px 0;}
}
@media only screen and (max-width: 700px) {
.fst01 {font-size: 160%; margin: 0 0 30px 0;}
}

.fst02 {letter-spacing: 0.1em; line-height: 1.3; font-weight: 700; position: absolute; z-index: 10; -ms-writing-mode: tb-lr; writing-mode: vertical-lr; color: rgba(000,000,000,0.35);}
@media print, screen and (min-width: 1100px) {.fst02 {font-size: 670%; left: 6%; top: 3%;}}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {.fst02 {font-size: 550%; left: 5%; top: 2%;}}
@media only screen and (max-width: 700px) {.fst02 {font-size: 280%; left: 0%; top: 1%;}}

.fst02rv {letter-spacing: 0.1em; line-height: 1.3; font-weight: 700; position: absolute; z-index: 10; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; color: rgba(000,000,000,0.35);}
@media print, screen and (min-width: 1100px) {.fst02rv {font-size: 670%; right: 4%; top: 3%;}}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {.fst02rv {font-size: 550%; right: 3%; top: 2%;}}
@media only screen and (max-width: 700px) {.fst02rv {font-size: 280%; right: 0%; top: 1%;}}

.fst03 {font-weight: 700; line-height: 1.2; color: rgba(106,106,106,0.15); position: absolute; z-index: 10; letter-spacing: 0.05em;}
@media print, screen and (min-width: 1000px) {
.fst03 {font-size: 1200%; left: 2%; top: 100px;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.fst03 {font-size: 1000%; left: -2%; top:70px;}
}
@media only screen and (max-width: 700px) {
.fst03 {font-size: 500%;  left: -2%; top: 50px;}
}

.fst04 {font-weight: 700; letter-spacing: 0.1em; line-height: 1.5; text-align: center;}
@media print, screen and (min-width: 1100px) {.fst04 {font-size: 220%; margin: 0 0 40px 0;}}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {.fst04 {font-size: 200%; margin: 0 0 40px 0;}}
@media only screen and (max-width: 700px) {.fst04 {font-size: 160%; margin: 0 0 40px 0;}}

.fst05 {font-weight: 700; letter-spacing: 0.1em; line-height: 1.5;}
@media print, screen and (min-width: 1100px) {.fst05 {font-size: 180%; margin: 0 0 10px 0;}}
@media print, screen and (min-width: 701px) and (max-width: 1099px){.fst05 {font-size: 170%; margin: 0 0 10px 0;}}
@media only screen and (max-width: 700px){.fst05 {font-size: 150%; margin: 0 0 10px 0;}}

.fst06 {letter-spacing: 0.1em; line-height: 2; font-weight: 700; }
@media print, screen and (min-width: 1100px) {.fst06 {font-size: 170%; margin: 0 0 30px 0;}}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {.fst06 {font-size: 160%; margin: 0 0 30px 0;}}
@media only screen and (max-width: 700px) {.fst06 {font-size: 130%; margin: 0 0 30px 0;}}

.lh10 {line-height:1;}
.lh12 {line-height:1.2;}
.lh15 {line-height:1.5;}
.lh20 {line-height:2;}
.lh25 {line-height:2.5;}
.lh30 {line-height:3;}

.ls01 {letter-spacing: 0.05em;}
.ls02 {letter-spacing: 0.01em;}
.ls0001 {letter-spacing: 0.001em;}
.ls03 {letter-spacing: 0.2em;}
.ls04 {letter-spacing: 0.1em;}

.fcwh {color:#ffffff;}
.fcbk {color:#000000;}
.fcgr {color:#999999;}
.fcgl {color:#6f9b1c;}
.fcrd {color:#ae2e33;}
.fcbl {color:#1347b5;}
.fcnv {color:#3c3c6b;}
.fcgn {color:#037b00;}
.fcyl {color:#ffff01;}
.fcor {color:#eb954e;}

.tac {text-align:center;}
.tal {text-align:left;}
.tar {text-align:right;}

@media print, screen and (min-width: 1000px) {
.taltotac {text-align:left;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.taltotac {text-align:left;}
}
@media only screen and (max-width: 700px) {
.taltotac {text-align:center;}
}

.tdn a:hover {
	text-decoration: none!important;
}
 .op100 {opacity: 1;}

h1,h2,h3,h4,h5 {line-height: 1.1;
  font-size: 7px;
  }

@media print, screen and (min-width: 1000px) {
.pc {display: block;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.pc {display: none;}
}
@media only screen and (max-width: 700px) {
.pc {display: none;}
}
@media print, screen and (min-width: 1200px) {
.pc2 {display: block;}
}
@media only screen and (max-width: 1199px) {
.pc2 {display: none;}
}
@media print, screen and (min-width: 1000px) {
.pco {display: none;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.pco {display: block;}
}
@media only screen and (max-width: 700px) {
.pco {display: block;}
}
@media print, screen and (min-width: 1200px) {
.pco2 {display: none;}
}
@media only screen and (max-width: 1199px) {
.pco2 {display: block;}
}
@media print, screen and (min-width: 1000px) {
.sp {display: none;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.sp {display: none;}
}
@media only screen and (max-width: 700px) {
.sp {display: block;}
}
@media print, screen and (min-width: 1000px) {
.spo {display: block;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.spo {display: block;}
}
@media only screen and (max-width: 700px) {
.spo {display: none;}
}
@media print, screen and (min-width: 1200px) {
.tl {display: none;}
}
@media only screen and (min-width: 701px) and (max-width: 1199px) {
.tl {display: block;}
}
@media only screen and (max-width: 700px) {
.tl {display: none;}
}

header {position:relative;}
@media print, screen and (min-width: 1000px) {
header  {height: 106px; width: 100%; margin:0 auto; background-color:transparent; }
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
header  {height: 86px; width: 100%; margin:0 auto; background-color:transparent; }
}
@media only screen and (max-width: 700px) {
header  {height: 70px; width: 92%; margin:0 auto; background-color:transparent; }
}

.mainimage-over {position:relative; overflow: hidden; width: 100%;}
@media print, screen and (min-width: 1100px) {.mainimage-over {height: calc(100vh - 106px); margin: 0;}}
@media only screen and (min-width: 701px) and (max-width: 1099px)  {.mainimage-over {height:  calc(100vh - 106px); margin: 0;}}
@media only screen and (max-width: 700px) {.mainimage-over {height:  calc(100vh - 200px); margin:  0;}}

/*スクロールダウン全体の場所*/
.scrolldown1{
    /*描画位置※位置は適宜調整してください*/
  position:absolute; z-index:10;
  left:50%;
    /*全体の高さ*/
  height:50px;
 animation-name: scrolldown1a;animation-duration: 7.8s;
}
@keyframes scrolldown1a {
0% {opacity: 0; transform: translateY(0);}
72% {opacity: 0; transform: translateY(0);}
100% {opacity: 1; transform: translateY(0);}
}
/*Scrollテキストの描写*/
.scrolldown1 span{
    /*描画位置*/
  position: absolute;
  left:-15px;
  top: -15px;
    /*テキストの形状*/
  color: #000000;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}

/* 線の描写 */
.scrolldown1::after{
  content: "";
    /*描画位置*/
  position: absolute;
  top: 0;
    /*線の形状*/
  width: 1px;
  height: 30px;
  background: #000000;
    /*線の動き1.4秒かけて動く。永遠にループ*/
  animation: pathmove 1.4s ease-in-out infinite;
  opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
  0%{
    height:0;
    top:0;
    opacity: 0;
  }
  30%{
    height:30px;
    opacity: 1;
  }
  100%{
    height:0;
    top:50px;
    opacity: 0;
  }
}

@media print, screen and (min-width: 1000px) {
.scrolldown1 {bottom:40px;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.scrolldown1 {bottom:40px;}
}
@media only screen and (max-width: 700px) {
.scrolldown1 {bottom:10px;}
}

.bg-index {position:relative; overflow: hidden; width: 100%;background-repeat:  no-repeat;  background-position:center center;  background-size:cover; background-image:url(images/bg-index.png);}

.suzuki {font-weight: 700; position: absolute; z-index: 10; bottom: 0%;}
@media print, screen and (min-width: 1100px){.suzuki {right: 7%; width: 500px;}}
@media print, screen and (min-width: 701px) and (max-width: 1099px){.suzuki {right: 5%; width: 37%;}}
@media only screen and (max-width: 700px){.suzuki {right: -5%; width: 54%;}}

@media print, screen and (min-width: 901px){.form-l {float:left; width: 40%; margin: 0;}}
@media only screen and (max-width: 900px){.form-l {float:none; width: 100%; margin: 0 0 30px 0;}}
@media print, screen and (min-width: 901px){.form-r {float:right; width: 57%; margin: 0;}}
@media only screen and (max-width: 900px){.form-r {float:none; width: 100%; margin: 0;}}
.form-l p{margin:0; font-size: 140%; padding: 0;}

.hissu {background-color: 2%; padding: 1px 10px 2px; margin: 0 0 0 7px; font-size: 78%; font-weight: 700; color: #fff; background-color: #00B344; border-radius: 2px;}

.sndbtn {width: 250px!important;border-radius: 20px; background: linear-gradient(#ffffff, #ffffff);
font-size: 16px; color: #000000!important; border: 10px solid #00B344;
padding: 12px;background-color: #ffffff; 
cursor: pointer;}
.w-contact {overflow: hidden; float: left;}
@media screen and (min-width: 1000px) {
.w-contact {margin: 0; width: 500px;}
}
@media only screen and (min-width: 581px) and (max-width: 999px) {
.w-contact {margin: 0; width: 500px;}
} 
@media screen and (max-width: 580px) {
.w-contact {margin: 0 auto; width: 90%;}
}



















@media screen and (max-width:999px) {
    /* toggle_menu */
    #btn_nav {
    position: fixed;
    top: 22px;
    right: 10px;
    z-index: 999;
    cursor: pointer;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    height: 18px;
    padding: 0 0 15px;
    }
    #btn_nav span {
    display: inline-block;
    background: #999999;
    width: 25px;
    height: 2px;
    transition: .5s;
    position: relative;
    }
    #btn_nav.active span {
    background: #fff;
    transform: translateY(8px) rotate(225deg);
    }
    #btn_nav.active span:nth-child(2) {
    transform: scaleX(0);
    }
    #btn_nav.active span:last-child {
    transform: translateY(-8px) rotate(-225deg);
    }
    #btn_nav::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,0);
    font-size: 75%;
    color: #999999;
    transition: .5s;
    }
    #btn_nav.active::after {
    content: "CLOSE";
    color: #fff;
    }
    #nav_sp nav,
    #nav_sp nav::after {
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    }
    #nav_sp nav {
    display: flex;
    flex-flow: column;
    justify-content: center;
    overflow: auto;
    text-align: center;
    background: rgba(51,51,51,0.7);
    right: -100%;
    z-index: 998;
    transition: .5s;
    }
    #nav_sp nav::after {
    content: "";
   background: rgba(51,51,51,0.7);
    left: -100%;
    z-index: -1;
    transition: .7s;
    }
    #nav_sp nav.active {
    right: 0;
    }
    #nav_sp nav.active::after {
    left: 0;
    }
    #nav_sp ul li:first-child {
    border-top: 1px solid rgba(255,255,255,0.4);
    }
    #nav_sp ul li {list-style-type: none;
    border-bottom: 1px solid rgba(255,255,255,0.4);
    }
    #nav_sp ul li a {
    display: block;
    color: #fff;
    padding: 10px;
    }/* toggle_menu end */
}

.logo {position:absolute; left: 0;}
@media print, screen and (min-width: 1000px) {.logo {top: 10px; left: 50px; width: 250px;}}
@media only screen and (min-width: 701px) and (max-width: 999px) {.logo { left: 30px; top: 10px; width: 250px; margin: 0; padding: 0;}}
@media only screen and (max-width: 700px) {.logo {left: 0px; width:200px; top: 2px;}}

.title-head {font-size:9px; padding: 0; margin: 0; line-height: 1.2; font-weight: 400; position:absolute; letter-spacing:0;}
@media print, screen and (min-width: 1000px) {.title-head {top: 43px; left: 310px; width: 270px;}}
@media only screen and (min-width: 701px) and (max-width: 999px) {.title-head { left: 310px; top: 43px; width: 290px; margin: 0; padding: 0;}}
@media only screen and (max-width: 700px) {.title-head {left: 210px; top: 10px; width:250px; top: 25px;}}

ul.pcmenu {position:absolute; right: 100px; list-style-type:none; display:flex; text-align:center; font-size:90%;}
@media print, screen and (min-width: 1000px) {ul.pcmenu {top: 20px; width: 750px;}}
@media only screen and (min-width: 701px) and (max-width: 999px) {ul.pcmenu {top: 10px; width: 700px;}}
@media only screen and (max-width: 700px) {ul.pcmenu{width:100%;}}
ul.pcmenu li {margin: 0 30px; padding: 0;}

@media print, screen and (min-width: 1000px) {.menu-tel {right: 0; width:180px; top: 0; height: 36px;}}
@media only screen and (min-width: 701px) and (max-width: 999px) {.menu-tel {right: 0; width:180px; top: 0; height: 36px;}}
@media only screen and (max-width: 700px) {.menu-tel {right: 60px; width:50px; top: 0; height:36px;}}

.menu-tel p{margin: 0; padding:0; font-size:140%; text-align:center;}
.menu-tel a{color:#ffffff!important;}
.menu-contact {color: #ffffff; font-size: 75%; position:absolute; text-align:center; line-height:1.5; display:flex; justify-content: center; align-items: center; z-index: 10;}
@media print, screen and (min-width: 1000px) {
.menu-contact {width:90px; right: 180px; top: 0; height: 36px;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.menu-contact {width:90px; right: 180px; top: 0; height: 36px;}
}
@media only screen and (max-width: 700px) {
.menu-contact {width:50px; right: 110px; top: 0; height: 36px;}
}
.menu-contact a{color:#ffffff!important;}


.cls {color: #000000; position: absolute; z-index: 10; line-height: 1.5; text-align: center; font-weight: 700; letter-spacing: 0.1em;}
@media print, screen and (min-width: 1100px) {.cls {top: 35%; font-size: 300%; left: 0%; width: 100%;}}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {.cls {top: 35%; font-size: 260%; left: 0%; width: 100%;}}
@media only screen and (max-width: 700px){.cls {top: 43%; font-size: 130%; left: 0%; width: 100%;}}

.cls01 {animation-name: clsa01;animation-duration: 3.2s; text-align: center; margin-bottom: 3%; margin: 0 auto 50px;}
@media print, screen and (min-width: 701px) {.cls01 {width: 40%;}}
@media only screen and (max-width: 700px){.cls01 {width: 83%;}}
@keyframes clsa01 {
0% {opacity: 0; transform: translateY(-30px);}
72% {opacity: 0; transform: translateY(-30px);}
100% {opacity: 1; transform: translateY(0);}
}
.cls02 {animation-name: clsa02; animation-duration: 3.9s; text-align: center;}
@keyframes clsa02 {
0% {opacity: 0; transform: translateY(-40px);}
72% {opacity: 0; transform: translateY(-40px);}
100% {opacity: 1; transform: translateY(0);}
}
.cls03 {font-weight: 700; position: absolute; z-index: 10; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; line-height: 1.5;}
@media print, screen and (min-width: 1100px) {.cls03 {top: 10%; right: 2%; width: 30px; font-size: 70%;}}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {.cls03 {top: 10%; right: 2%; width: 30px; font-size: 60%;}}
@media only screen and (max-width: 700px) {.cls03 {top: 90px; right: 2%; width: 30px; font-size: 50%;}}

.cls04 {font-weight: 700; animation-name: clsa04; animation-duration: 6.5s; position: absolute; z-index: 10; left: 0; width: 35%;}
@keyframes clsa04 {
0% {
    opacity: 0; transform:rotate(0);
}
50% {
    opacity: 0; transform:rotate(120deg);
}
75% {
    opacity: 0; transform:rotate(240deg);
}
100% {
    opacity: 1; transform:rotate(360deg);
}
}

.cls05 {font-weight: 700; animation-name: clsa05; animation-duration: 6.9s; position: absolute; z-index: 10; right: 0;width: 61%;}
@keyframes clsa05 {
0% {opacity: 0; transform: translateX(40px);}
72% {opacity: 0; transform: translateX(40px);}
100% {opacity: 1; transform: translateX(0);}
}

.cls-box {color: #000000; position: absolute; z-index: 10; line-height: 1.5; text-align: center; font-weight: 700; letter-spacing: 0.1em;}
@media print, screen and (min-width: 1100px) {.cls-box {top: 20%; left: 30%; width: 40%;}}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {.cls-box {top: 20%; left: 30%; width: 40%;}}
@media only screen and (max-width: 700px){.cls-box {top: 26%; left: 10%; width: 80%;}}

.cls11 {animation-name: clsa11; animation-duration: 3.2s; text-align: center;}
@keyframes clsa11 {
0% {opacity: 0; transform: translateY(-40px);}
72% {opacity: 0; transform: translateY(-40px);}
100% {opacity: 1; transform: translateY(0);}
}
.cls12 {animation-name: clsa12; animation-duration: 4.0s; text-align: center;}
@keyframes clsa12 {
0% {opacity: 0; transform: translateY(-40px);}
72% {opacity: 0; transform: translateY(-40px);}
100% {opacity: 1; transform: translateY(0);}
}
.cls13 {animation-name: clsa13; animation-duration: 4.8s; text-align: center;}
@keyframes clsa13 {
0% {opacity: 0; transform: translateY(-40px);}
72% {opacity: 0; transform: translateY(-40px);}
100% {opacity: 1; transform: translateY(0);}
}

@media print, screen and (min-width: 701px) {.cb-slideshow {height: calc(100vh - 106px); margin: 0;}}
@media only screen and (max-width: 700px) {.cb-slideshow {height:  calc(100vh - 200px); margin:  0;}}

@media print, screen and (min-width: 701px) {.cb-slideshow span {height: calc(100vh - 106px); margin: 0;}}
@media only screen and (max-width: 700px) {.cb-slideshow span {height:  calc(100vh - 200px); margin:  0;}}

.cb-slideshow,
.cb-slideshow:after {
    position: relative;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: ;
  margin: 0;
}
.cb-slideshow li {list-style:none;}

.cb-slideshow li span {
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s; 
}

.cb-slideshow li div {
    z-index: 1000;
    position: absolute;
   left: 0%;
	top: 30%;
    width: 100%;
    opacity: 0;
    color: #fff;
	 -webkit-animation: titleAnimation 36s linear infinite 0s;
    -moz-animation: titleAnimation 36s linear infinite 0s;
    -o-animation: titleAnimation 36s linear infinite 0s;
    -ms-animation: titleAnimation 36s linear infinite 0s;
    animation: titleAnimation 36s linear infinite 0s; 
}


@media print, screen and (min-width: 1000px) {.cb-slideshow li:nth-child(1) span {background-image: url(images/slide01.jpg);}}
@media only screen and (max-width: 700px) {.cb-slideshow li:nth-child(1) span {background-image: url(images/slide01s.jpg);}}


.cb-slideshow li:nth-child(2) span {
	-webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}

@media print, screen and (min-width: 1000px) {.cb-slideshow li:nth-child(2) span {background-image: url(images/slide02.jpg);}}
@media only screen and (max-width: 700px) {.cb-slideshow li:nth-child(2) span {background-image: url(images/slide02s.jpg);}}

.cb-slideshow li:nth-child(3) span {
	-webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 	
}

@media print, screen and (min-width: 1000px) {.cb-slideshow li:nth-child(3) span {background-image: url(images/slide03.jpg);}}
@media only screen and (max-width: 700px) {.cb-slideshow li:nth-child(3) span {background-image: url(images/slide03s.jpg);}}

.cb-slideshow li:nth-child(4) span {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}

@media print, screen and (min-width: 1000px) {.cb-slideshow li:nth-child(4) span {background-image: url(images/slide04.jpg);}}
@media only screen and (max-width: 700px) {.cb-slideshow li:nth-child(4) span {background-image: url(images/slide04s.jpg);}}

.cb-slideshow li:nth-child(5) span {
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
}

@media print, screen and (min-width: 1000px) {.cb-slideshow li:nth-child(5) span {background-image: url(images/slide05.jpg);}}
@media only screen and (max-width: 700px) {.cb-slideshow li:nth-child(5) span {background-image: url(images/slide05s.jpg);}}

.cb-slideshow li:nth-child(6) span {
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}
@media print, screen and (min-width: 1000px) {.cb-slideshow li:nth-child(6) span {background-image: url(images/slide06.jpg);}}
@media only screen and (max-width: 700px) {.cb-slideshow li:nth-child(6) span {background-image: url(images/slide06s.jpg);}}

.cb-slideshow li:nth-child(2) div {
	-webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}

.cb-slideshow li:nth-child(3) div {
	-webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 	
}

.cb-slideshow li:nth-child(4) div {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}

.cb-slideshow li:nth-child(5) div {
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
}

.cb-slideshow li:nth-child(6) div {
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}

@-webkit-keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    -webkit-animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    -webkit-transform: scale(1.05);
	    -webkit-animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    -webkit-transform: scale(1.1);
	}
	25% {
	    opacity: 0;
	    -webkit-transform: scale(1.1);
	}
	100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    -moz-animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    -moz-transform: scale(1.05);
	    -moz-animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    -moz-transform: scale(1.1);
	}
	25% {
	    opacity: 0;
	    -moz-transform: scale(1.1);
	}
	100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    -o-animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    -o-transform: scale(1.05);
	    -o-animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    -o-transform: scale(1.1);
	}
	25% {
	    opacity: 0;
	    -o-transform: scale(1.1);
	}
	100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    -ms-animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    -ms-transform: scale(1.05);
	    -ms-animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    -ms-transform: scale(1.1);
	}
	25% {
	    opacity: 0;
	    -ms-transform: scale(1.1);
	}
	100% { opacity: 0 }
}
@keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    transform: scale(1.05);
	    animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    transform: scale(1.1);
	}
	25% {
	    opacity: 0;
	    transform: scale(1.1);
	}
	100% { opacity: 0 }
}

@keyframes titleAnimation {
    0% { opacity: 0 }
    4% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}

.img-grow {
  filter: 
    drop-shadow(0 1px 3px white)
    drop-shadow(0 -1px 3px white)
    drop-shadow(1px 0 3px white)
    drop-shadow(-1px 0 3px white)
}

.wide01 {overflow:  hidden;}
@media print, screen and (min-width: 701px) {.wide01 {margin: 80px auto; width:  700px;}}
@media only screen and (max-width: 700px){.wide01 {margin: 50px auto; width:  90%;}}

.block-page {position: relative; z-index: 1; overflow: hidden;}


.area {position: absolute; z-index: 1; max-width: 1500px;}
@media print, screen and (min-width: 801px) {.area {width: 110%; left: -40%; top: -5%;}}
@media only screen and (max-width: 800px) {.area {width: 110%; left: -5%; top: 0%;}}

.contents-l-bgnone {z-index: 5; position: relative; text-align: center; font-weight: 700; line-height: 1.5;}
@media print, screen and (min-width: 1300px) {.contents-l-bgnone {margin: 200px 0 0 0; float: left; width:40%; font-size:800%;}}
@media print, screen and (min-width: 701px) and (max-width: 1299px) {.contents-l-bgnone {margin: 200px 0 0 0; float: left; width:45%; font-size:700%;}}
@media only screen and (max-width: 700px)  {.contents-l-bgnone {margin: 80px auto 0; float: none; width:80%; font-size:500%;}}
.contents-l-bgnone p{margin: 0; padding: 0; font-size:25%; letter-spacing:0.1em;}

.contents-r-bgnone {z-index: 8; position: relative;}
@media print, screen and (min-width: 1300px) {.contents-r-bgnone {margin: 150px 5% 0 0; float: right; width:50%;}}
@media print, screen and (min-width: 701px) and (max-width: 1299px) {.contents-r-bgnone {margin: 100px 5% 0 0; float: right; width:45%;}}
@media only screen and (max-width: 700px)  {.contents-r-bgnone {margin: 80px auto 0; float: none; width:90%;}}

.contents-r-bgnone2 {z-index: 5; position: relative; text-align: center; font-weight: 700; line-height: 1.5;}
@media print, screen and (min-width: 1300px) {.contents-r-bgnone2 {margin: 150px 5% 0 0; float: right; width:40%; font-size:800%;}}
@media print, screen and (min-width: 701px) and (max-width: 1299px) {.contents-r-bgnone2 {margin: 200px 5% 0 0; float: right; width:45%; font-size:700%;}}
@media only screen and (max-width: 700px)  {.contents-r-bgnone2 {margin: 80px auto 0; float: none; width:80%; font-size:500%;}}
.contents-r-bgnone2 p{margin: 0; padding: 0; font-size:25%; letter-spacing:0.1em;}

.contents-l-bgnone2 {z-index: 8; position: relative;}
@media print, screen and (min-width: 1300px) {.contents-l-bgnone2 {margin: 150px 0 0 10%; float: left; width:40%;}}
@media print, screen and (min-width: 701px) and (max-width: 1299px) {.contents-l-bgnone2 {margin: 100px 0 5% 0; float: left; width:45%;}}
@media only screen and (max-width: 700px)  {.contents-l-bgnone2 {margin: 80px auto 0; float: none; width:90%;}}

ul.box2to1 {position:relative; margin: 0; padding: 0; list-style-type:none; display:flex; flex-wrap : wrap; z-index : 10; overflow : hidden;}
ul.box2to1 li{margin: 0; padding:}
@media print, screen and (min-width: 701px) {ul.box2to1 li{margin: 0 1% 4%; width:  100%;}}
@media only screen and (max-width: 700px) {ul.box2to1 li{margin: 0 0 4%; width:  100%;}}

.anime_wrap{
    position: relative;
    overflow: hidden;
}
.anime_wrap p{
    position: absolute;
    top: 30px;
    left: 30px;
    font-size: 40px;
    font-weight: bold;
}
.pattern6::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #000000;
    z-index: 2;
    transition: .5s;
}
.pattern6.show::before{
    transform: translateX(100%);
}
.pattern6 img{
    opacity: 0;
    transition: .5s;
}
.pattern6.show img{
    opacity: 1;
}
.pattern6 p{
    color: #FFF;
    opacity: 0;
    transform: translateX(-40px);
    transition: .5s;
    transition-delay: .5s;
    z-index: 1;
    overflow: hidden;
}
.pattern6.show p{
    opacity: 1;
    transform: translateX(0);
}
.pattern6 p::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #FFF;
    transition: .5s;
    transition-delay: 1s;
}
.pattern6.show p::before{
    transform: translateX(100%);
}

button {width: 100%;
 position: relative;
 display: flex;
 justify-content: center;
 align-items: center;
 background: #666666;
 box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.2);
 overflow: hidden;
 border: none;
}

button:after {
 content: " ";
 width: 0%;
 height: 100%;
 background: #cccccc;
 position: absolute;
 transition: all 0.4s ease-in-out;
 right: 0;
}

button:hover::after {
 right: auto;
 left: 0;
 width: 100%;
}

button span {width: 100%;
 text-align: center;
 text-decoration: none;
 width: 100%;
 padding: 18px 25px;
 color: #fff;
 font-size: 15px;
 font-weight: 700;
 letter-spacing: 0.3em;
 z-index: 20;
 transition: all 0.3s ease-in-out;
}

button:hover span {
 color: #000000;
 animation: scaleUp 0.3s ease-in-out;
}

@keyframes scaleUp {
 0% {
  transform: scale(1);
 }

 50% {
  transform: scale(0.95);
 }

 100% {
  transform: scale(1);
 }
}

button.wbt {width: 100%;
 position: relative;
 display: flex;
 justify-content: center;
 align-items: center;
 background: #ffffff;
 box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.2);
 overflow: hidden;
 border: none;
}

button.wbt:after {
 content: " ";
 width: 0%;
 height: 100%;
 background: #cccccc;
 position: absolute;
 transition: all 0.4s ease-in-out;
 right: 0;
}

button.wbt:hover::after {
 right: auto;
 left: 0;
 width: 100%;
}

button.wbt span {width: 100%;
 text-align: center;
 text-decoration: none;
 width: 100%;
 padding: 18px 25px;
 color: #000000;
 font-size: 15px;
 font-weight: 700;
 letter-spacing: 0.3em;
 z-index: 20;
 transition: all 0.3s ease-in-out;
}

button.wbt:hover span {
 color: #000000;
 animation: scaleUp2 0.3s ease-in-out;
}

@keyframes scaleUp2 {
 0% {
  transform: scale(1);
 }

 50% {
  transform: scale(0.95);
 }

 100% {
  transform: scale(1);
 }
}

.title-service {z-index: 5; position: relative; text-align: center; font-weight: 700; line-height: 1.5;}
@media print, screen and (min-width: 1300px) {.title-service {margin: 0 0 80px; font-size:400%;}}
@media print, screen and (min-width: 701px) and (max-width: 1299px) {.title-service {margin: 0 0 80px; font-size:350%;}}
@media only screen and (max-width: 700px)  {.title-service {margin: 0 0 50px; font-size:250%;}}
.title-service p{margin: 0; padding: 0; font-size:25%; letter-spacing:0.1em;}


.title-company {z-index: 5; position: relative; text-align: center; font-weight: 700; line-height: 1.5;}
@media print, screen and (min-width: 1300px) {.title-company {margin: 0 0 80px; font-size:800%;}}
@media print, screen and (min-width: 701px) and (max-width: 1299px) {.title-company {margin: 0 0 80px; font-size:700%;}}
@media only screen and (max-width: 700px)  {.title-company {margin: 0 0 50px; font-size:500%;}}
.title-company p{margin: 0; padding: 0; font-size:25%; letter-spacing:0.1em;}

ul.list-news-cat {border-top: 1px solid #eeeeee; list-style-type: none; margin: 0 0 50px; padding: 0;}
ul.list-news-cat li{border-bottom: 1px solid #eeeeee; padding: 2%; position: relative; display: flex; flex-wrap: flex; align-items: center;}
ul.list-news-cat li::before { /* くの字の表示設定 */
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 5px; /* 要素の右からの距離 */
  width: 8px;
  height: 8px;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  transform: rotate(45deg); /* 角度調整 */
}
 
ul.list-news-cat li::after { /* 棒の表示設定 */
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 5px; /* 要素の右からの距離 */
  width: 20px;
  height: 2px;
  background: #000;
}

		ul.list-news-cat-none li::before {content: none!important;}
		ul.list-news-cat-none li::after {content: none!important;}

.date-list-news{font-size :100%;  overflow: hidden;}
@media print, screen and (min-width: 1300px){.date-list-news{width :140px; padding :0 5px 0 0; float :left;}}
@media print, screen and (min-width: 701px) and (max-width: 1299px){.date-list-news{width :140px; padding :0 5px 0 0; float :left;}}
@media print, screen and (max-width: 700px){.date-list-news{width :85px; padding :0 5px 0 0; float :left;}}

.title-list-news{padding: 0 0 0 10px;}
@media print, screen and (min-width: 1300px){.title-list-news{width: calc(100% - 150px); float :right;}}
@media print, screen and (min-width: 701px) and (max-width: 1299px){.title-list-news{width: calc(100% - 150px); float :right;}}
@media print, screen and (max-width: 700px){.title-list-news{width: calc(100% - 80px); float :right;}}

.iframe-content {
	position: relative;
	width: 100%;
	padding: 85% 0 0 0;
	margin: 0;
}
.iframe-content iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.flex-service {display: flex; justify-content: space-between;}
@media print, screen and (min-width: 1300px) {.flex-service-img { width: 22%;}}
@media print, screen and (min-width: 701px) and (max-width: 1299px) {.flex-service-img { width: 25%;}}
@media only screen and (max-width: 700px) {.flex-service-img { width: 30%;}}
@media print, screen and (min-width: 1300px) {.flex-service-txt { width: 73%;}}
@media print, screen and (min-width: 701px) and (max-width: 1299px) {.flex-service-txt { width: 72%;}}
@media only screen and (max-width: 700px) {.flex-service-txt { width: 65%;}}

svg .svg-elem-1 {
  stroke-dashoffset: 1329.1663818359375px;
  stroke-dasharray: 1329.1663818359375px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}

svg.active .svg-elem-1 {
  stroke-dashoffset: 0;
}

svg .svg-elem-2 {
  stroke-dashoffset: 478.4356689453125px;
  stroke-dasharray: 478.4356689453125px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.12s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.12s;
}

svg.active .svg-elem-2 {
  stroke-dashoffset: 0;
}

svg .svg-elem-3 {
  stroke-dashoffset: 489.514404296875px;
  stroke-dasharray: 489.514404296875px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.24s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.24s;
}

svg.active .svg-elem-3 {
  stroke-dashoffset: 0;
}

svg .svg-elem-4 {
  stroke-dashoffset: 458.8080139160156px;
  stroke-dasharray: 458.8080139160156px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3599999999999999s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3599999999999999s;
}

svg.active .svg-elem-4 {
  stroke-dashoffset: 0;
}

svg .svg-elem-5 {
  stroke-dashoffset: 584.489013671875px;
  stroke-dasharray: 584.489013671875px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.48s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.48s;
}

svg.active .svg-elem-5 {
  stroke-dashoffset: 0;
}

svg .svg-elem-6 {
  stroke-dashoffset: 703.8212280273438px;
  stroke-dasharray: 703.8212280273438px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
}

svg.active .svg-elem-6 {
  stroke-dashoffset: 0;
}

svg .svg-elem-7 {
  stroke-dashoffset: 572.2781372070312px;
  stroke-dasharray: 572.2781372070312px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.72s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.72s;
}

svg.active .svg-elem-7 {
  stroke-dashoffset: 0;
}

svg .svg-elem-8 {
  stroke-dashoffset: 476.5575256347656px;
  stroke-dasharray: 476.5575256347656px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8399999999999999s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8399999999999999s;
}

svg.active .svg-elem-8 {
  stroke-dashoffset: 0;
}

.bg-service-index {position:relative; overflow: hidden; width: 100%;background-repeat: no-repeat;  background-position:center center; background-image:url(images/bg-service.jpg); text-align: center;}

@media print, screen and (min-width: 701px) {.bg-service-index {padding: 250px 0; background-image:url(images/bg-service.jpg);background-size:cover;}}
@media only screen and (max-width: 700px) {.bg-service-index {padding: 150px 0; background-image:url(images/bg-service-s.jpg);background-size:contain;}}

@media print, screen and (min-width: 768px) {.flex-license {display: flex; justify-content: space-between;}}
@media print, screen and (max-width: 767px) {.flex-license {display: block;}}

@media print, screen and (min-width: 768px) {.flex-license-img {width: 150px; margin: 0 auto;}}
@media print, screen and (max-width: 767px) {.flex-license-img {width: 70%; margin: 0 auto 30px;}}

@media print, screen and (min-width: 768px) {.flex-license-txt {width: calc(100% - 180px);}}
@media print, screen and (max-width: 767px) {.flex-license-txt {width: 100%;}}

















.se-circle {z-index: 20;}
@media print, screen and (min-width: 1300px) {.se-circle { top: 130px; width: 30%; left: 0%; position: absolute;}}
@media print, screen and (min-width: 701px) and (max-width: 1299px) {.se-circle { top: 80px; width: 30%; left: 0%; position: absolute;}}
@media only screen and (max-width: 700px) {.se-circle { top: 0%; width: 70%; left: 0%; position: relative; float: left;}}

.se-title {float: right; width: 20%; margin: 0 5% 0 0;}

@media print, screen and (min-width: 701px){.wide-l {margin: 0; width:  43%; float: left;}}
@media only screen and (max-width: 700px){.wide-l {margin: 0 auto; width:  100%; float: none;}}
@media print, screen and (min-width: 701px){.wide-r {margin: 0; width:  54%; float: right;}}
@media only screen and (max-width: 700px){.wide-r {margin: 0 auto 30px; width:  100%; float: none;}}

footer {overflow: hidden; width: 100%; text-align: center;background-repeat:  no-repeat;  background-position:center center;  background-size:cover; background-image:url(images/footer.jpg);}
.footerin {position: relative; overflow: hidden; width: 100%;}
@media print, screen and (min-width: 1300px){.footerin {margin: 150px 0;}}
@media print, screen and (min-width: 701px) and (max-width: 1299px){.footerin {margin: 100px 0;}}
@media only screen and (max-width: 700px){.footerin {margin: 70px 0;}}

.footer-logo {position: relative; overflow: hidden;}
@media print, screen and (min-width: 1300px){.footer-logo {margin: 50px auto 30px; width: 300px;}}
@media print, screen and (min-width: 701px) and (max-width: 1299px){.footer-logo {margin: 50px auto 30px; width: 300px;}}
@media only screen and (max-width: 700px){.footer-logo {margin: 50px auto 30px; width: 180px;}}



.contents-r {z-index: 8; position: absolute;}
@media print, screen and (min-width: 1300px){.contents-r {top: 5%; left: 10%; width:65%; }}
@media print, screen and (min-width: 701px) and (max-width: 1299px) {.contents-r {top: 4%; left: 10%; width:65%; }}
@media only screen and (max-width: 700px){.contents-r {top: 0; right: -60%; width:150%; }}

.contents-l {z-index: 8; position: relative; background-color: rgba(226,226,226,0.85); color: #000000; max-width: 1000px;}
@media print, screen and (min-width: 1300px){.contents-l {margin: 39% 7% 10% 0; float: right; width:45%; padding:10%;}}
@media print, screen and (min-width: 701px) and (max-width: 1299px){.contents-l {margin: 39% 6% 10% 0; float: right; width:53%; padding:6%;}}
@media only screen and (max-width: 700px){.contents-l {margin: 350px 5% 10% 0; float: right; width:80%; padding:7%;}}

.contents-r2 {z-index: 8; position: absolute;}
@media print, screen and (min-width: 1300px){.contents-r2 {top: 5%; right: 10%; width:65%; }}
@media print, screen and (min-width: 701px) and (max-width: 1299px) {.contents-r2 {top: 4%; right: 10%; width:65%; }}
@media only screen and (max-width: 700px){.contents-r2 {top: 0; right: 5%; width:95%; }}

.contents-l2 {z-index: 8; position: relative; background-color: rgba(226,226,226,0.85); color: #000000; max-width: 1000px;}
@media print, screen and (min-width: 1300px){.contents-l2 {margin: 39% 0% 10% 7%; float: left; width:45%; padding:10%;}}
@media print, screen and (min-width: 701px) and (max-width: 1299px){.contents-l2 {margin: 39% 0% 10% 7%; float: left; width:53%; padding:6%;}}
@media only screen and (max-width: 700px){.contents-l2 {margin: 150px 0% 10% 5%; float: left; width:80%; padding:7%;}}

.logo-group {z-index: 10; position: relative; clear: both;}
@media print, screen and (min-width: 1300px){.logo-group {width: 300px; margin: 0 0 30px;}}
@media print, screen and (min-width: 701px) and (max-width: 1299px){.logo-group {width: 40%; margin: 0 0 30px;}}
@media only screen and (max-width: 700px){.logo-group {width: 70%; margin: 0 0 20px;}}

.btw {clear: both; overflow: hidden;}
@media print, screen and (min-width: 801px){.btw {width: 400px; margin: 30px auto 50px;}}
@media only screen and (max-width: 800px){.btw {width: 100%; margin: 30px auto 50px;}}

.btw-c {clear: both; overflow: hidden;}
@media print, screen and (min-width: 801px){.btw-c {width: 300px; margin: 0 auto;}}
@media only screen and (max-width: 800px){.btw-c {width: 65%; margin: 0 auto;}}

a.dgn {box-sizing: border-box;
  color: #000;
  font-weight: bold;
  background: transparent;
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border: 0px solid #333;
border-bottom: 1px solid #333;
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  transition: .3s;
}
a.dgn::before {
  content: "";
  width: 100%;
  position: absolute;
  top: 0;
  right: -60px;
  z-index: -1;
  border-right: 60px solid transparent;
  border-bottom: 60px solid #333;
  transform: translateX(-100%);
  transition: transform ease .3s;
}
a.dgn:hover {
  color: #fff;
}
a.dgn:hover::before {
  transform: translateX(0);
}
ul.ftmn {margin: 0 auto 50px;padding: 0;overflow: hidden; font-size: 90%; display:flex; flex-wrap: wrap; justify-content: center; list-style-type:none;}
@media print, screen and (min-width: 701px) {ul.ftmn {border-top: none; width: 800px;}}
@media only screen and (max-width: 700px) {ul.ftmn {border-top: 1px solid #c7c7c7; width: 100%;}}
ul.ftmn li {box-sizing: border-box; text-align: center;margin: 0;padding: 15px 0;list-style-type: none;}
ul.ftmn li a{color: #ffffff!important;}
@media print, screen and (min-width: 701px) {
ul.ftmn li {width: 20%; border: none;}
}
@media print, screen and (max-width: 700px) {
ul.ftmn li {width: 50%; border-right: 1px solid #c7c7c7; border-bottom: 1px solid #c7c7c7;}
}
ul.ftmn li:nth-child(even) {border-right: none!important;}
ul.ftmn li a{color: #000000!important;}


ul.ft-sns {margin: 0 auto 30px;padding: 0;overflow: hidden; display:flex; flex-wrap: wrap; justify-content: center; list-style-type:none; gap:10px;}
ul.ft-sns li {box-sizing: border-box; text-align: center;margin: 0;padding: 0;}
ul.ft-sns li a{color: #ffffff!important;}
@media print, screen and (min-width: 701px) {ul.ft-sns li {width: 30px;}}
@media print, screen and (max-width: 700px) {ul.ft-sns li {width: 40px;}}

ul.hd-sns {position: absolute; right: 10px; top: 40px; padding: 0;margin: 0; display:flex; flex-wrap: wrap; width: 90px; list-style-type:none; gap:10px;}
ul.hd-sns li {box-sizing: border-box; text-align: center;margin: 0;padding: 0;}
@media print, screen and (min-width: 701px) {ul.hd-sns li {width: 30px;}}
@media print, screen and (max-width: 700px) {ul.hd-sns li {width: 40px;}}














.bgg {
  animation:slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #f9f9f9f 50%, #eeeeee 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bgg2 {
  animation-direction:alternate-reverse;
  animation-duration:4s;
}

.bgg3 {
  animation-duration:5s;
}

.bggcontent {
  background-color:rgba(255,255,255,.8);
  border-radius:.25em;
  box-shadow:0 0 .25em rgba(0,0,0,.25);
  box-sizing:border-box;
  left:50%;
  padding:10vmin;
  position:fixed;
  text-align:center;
  top:50%;
  transform:translate(-50%, -50%);
}



.bgtop {position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;}

.video {opacity:0.5;
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* overlay */

.overlay::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: rgba(255, 255, 255, 0.5);
}

.bgtop2 {position: relative; overflow: hidden; width: 100%;}
@media print, screen and (min-width: 1300px){.bgtop2 {height: 100vh;}}
@media print, screen and (min-width: 701px) and (max-width: 1299px){.bgtop2 {height: 70vh;}}
@media only screen and (max-width: 700px){.bgtop2 {height: 500px;}}

.bgtop2in {position: relative; overflow: hidden; width: 100%; min-height: 300px; height: 100vh;}
@media print, screen and (min-width: 1300px){.bgtop2in {margin: 200px 0; height: 80vh;}}
@media print, screen and (min-width: 701px) and (max-width: 1299px){.bgtop2in {margin: 150px 0; height: 400px;}}
@media only screen and (max-width: 700px){.bgtop2in {margin: 100px 0;}}

.bt-wide01 {overflow:hidden;}
@media print, screen and (min-width: 1200px) {
.bt-wide01 {width: 300px; margin:0;}
}
@media only screen and (max-width: 1199px) {
.bt-wide01 {width: 90%; margin:0 auto;}
}

.bt09 a {
    height: 55px;
    line-height: 55px;
    background: #000000;
    color: #fff; width: 100%;
    display: inline-block;
    font-weight: bold;
    overflow: hidden;
    position: relative;
    text-align: center;
    text-decoration: none;
}

.bt09 a:before { ilne-height: 65px;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .7s cubic-bezier(.19, 1, .22, 1);
    background: #eeeeee;
  }
    .bt09 a:hover {
    color: #000000;
  }
  .bt09 a:hover:before {
    transform: scaleX(1);
    transform-origin: left;
  }
  
  .bt09 a .inner-text {color: #000000!important;
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
  }

.bgtop-ab {position: absolute; bottom: 0; z-index: -1;
  overflow: hidden;
  width: 100%;}
@media print, screen and (min-width: 1300px){.bgtop-ab {height: 100%;}}
@media print, screen and (min-width: 701px) and (max-width: 1299px){.bgtop-ab {height: 100%;}}
@media only screen and (max-width: 700px){.bgtop-ab {height: 100%;}}

.gre-l {text-align: left;}
@media print, screen and (min-width: 1000px) {
.gre-l {float: left; width: 25%; margin: 0;}
}
@media print, screen and (min-width: 601px) and (max-width: 999px) {
.gre-l {float: left; width: 30%; margin: 0;}
}
@media print, screen and (max-width: 600px) {
.gre-l {float: none; width: 60%; margin: 0 auto 30px;}
}
.gre-r {fline-height: 2.5;}
@media print, screen and (min-width: 1000px) {
.gre-r {float: right; width: 70%; line-height:2;}
}
@media print, screen and (min-width: 601px) and (max-width: 999px) {
.gre-r {float: right; width: 67%;}
}
@media print, screen and (max-width: 600px) {
.gre-r {float: none; width: 100%;}
}



.defpr {overflow: hidden; position: relative;}
@media print, screen and (min-width: 1000px) {
.defpr {margin: 0 0 200px;}
}
@media print, screen and (min-width: 601px) and (max-width: 999px) {
.defpr {margin: 0 0 150px;}
}
@media print, screen and (max-width: 600px) {
.defpr {margin: 0 0 100px;}
}

.group {overflow: hidden; position: relative;}
@media print, screen and (min-width: 1000px) {
.group01 {margin: 0 20% 70px 10%;}}
@media print, screen and (min-width: 601px) and (max-width: 999px) {
.group01 {margin: 0 20% 70px 10%;}}
@media print, screen and (max-width: 600px) {
.group01 {margin: 0 auto;}}

@media print, screen and (min-width: 1000px) {
.group02 {margin: 0 10% 70px 20%;}}
@media print, screen and (min-width: 601px) and (max-width: 999px) {
.group02 {margin: 0 10% 70px 20%;}}
@media print, screen and (max-width: 600px) {
.group02 {margin: 0 auto;}}

@media print, screen and (min-width: 1000px) {
.group03 {margin: 0 0% 70px 30%;}}
@media print, screen and (min-width: 601px) and (max-width: 999px) {
.group03 {margin: 0 0% 70px 30%;}}
@media print, screen and (max-width: 600px) {
.group03 {margin: 0 auto;}}

.group-r {z-index: 3;}
@media print, screen and (min-width: 1000px) {
.group-l {position: absolute; width: 50%; margin: 0;}
}
@media print, screen and (min-width: 601px) and (max-width: 999px) {
.group-l {position: absolute; width: 50%; margin: 0;}
}
@media print, screen and (max-width: 600px) {
.group-l {position: relative; width: 90%; margin: 0 auto;}
}

.group-r {background-color: rgba(0,0,0,0.75); color: #ffffff; position: relative; z-index: 5;}
@media print, screen and (min-width: 1000px) {
.group-r {float: right; width: 70%; margin: 200px 0 0; padding: 7%;}
}
@media print, screen and (min-width: 601px) and (max-width: 999px) {
.group-r {float: right; width: 70%; margin: 150px 0 100px; padding: 6%;}
}
@media print, screen and (max-width: 600px) {
.group-r {float: right; width: 70%; margin: 0 auto; padding: 5%;}
}
.group-r p{padding: 0;}
@media print, screen and (min-width: 1000px) {
.group-r p{width: 200px; margin: 0 0 30px;}
}
@media print, screen and (min-width: 601px) and (max-width: 999px) {
.group-r p{width: 200px; margin: 0 0 30px;}
}
@media print, screen and (max-width: 600px) {
.group-r p{width: 80%; margin: 0 auto 30px;}
}

.defprup {overflow: hidden; position: relative;}
@media print, screen and (min-width: 1000px) {
.defprup {margin: 0; padding: 500px 0 0;}
}
@media print, screen and (min-width: 601px) and (max-width: 999px) {
.defprup {margin: 0; padding: 400px 0 0;}
}
@media print, screen and (max-width: 600px) {
.defprup {margin: 0; padding: 200px 0 0;}
}


.bgtoppr {position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;}



.frmt {
min-height: 40px;
border: 1px solid #ccc;
background: #fafafa;
border-radius: 5px;
font-size: 16px;
padding: 5px;
cursor: pointer;
}
.frmta {
min-height: 100px;
border: 1px solid #ccc;
background: #fafafa;
border-radius: 5px;
font-size: 16px;
padding: 5px;
cursor: pointer;
}
@media print, screen and (min-width: 1000px) {
.frm-w {width: 300px!important;}
}
@media print, screen and (min-width: 581px) and (max-width: 999px) {
.frm-w {width: 95%!important;}
}
@media print, screen and (max-width: 580px) {
.frm-w {width: 95%!important;}
}


.bgholding {background-size: cover; background-position: center bottom; background-repeat: none; background-image: url(images/bgholding.jpg);}


.wide-holding {overflow: hidden; position: relative;}
@media print, screen and (min-width: 1000px) {
.wide-holding {margin: 300px auto; width: 1000px;}
}
@media print, screen and (min-width: 601px) and (max-width: 999px) {
.wide-holding {margin: 200px auto; width: 90%;}
}
@media print, screen and (max-width: 600px) {
.wide-holding {margin: 100px auto; width: 90%;}
}

.logo-map {overflow: hidden; position: relative;}
@media print, screen and (min-width: 601px) {
.logo-map {margin: 0 auto 30px; width: 500px;}
}
@media print, screen and (max-width: 600px) {
.logo-map {margin: 0 auto 20px; width: 90%;}
}

.iso {width: 80%; margin: 0 auto 50px;}
.iso p{width: 200px; margin: 10px auto 0; padding: 0;}

.overview01 {margin: 0 0 10px; font-size: 125%; font-weight: 700;}

@media print, screen and (min-width: 701px) {
.imgadj {margin: 0 auto 30px; width: 400px;}
}
@media print, screen and (max-width: 700px) {
.imgadj {margin: 0 auto 30px; width: 50%;}
}