@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Lobster');
@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');
html body {font-family: 'Noto Sans JP', sans-serif;}
img {
	border: none;width: 100%;height: auto;
	vertical-align: top;
}
body {background-color: #ffffff;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

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

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



/* リンク部分
----------------------------------------------------------------------------------------------------------------------*/

a {
	color: #000000;
	text-decoration: none!important;
}
a:visited {m
	text-decoration: none!important;
}
a:hover {
	/*color: #34A7E0;*/
	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;}
/*----------------------textstyle------------------------------*/

.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: 'Fjalla One', sans-serif;}
.ff02 {font-family: 'Lobster', 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";}

.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:#ff0000;}
.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;}

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

html,body {
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
  }

h1,h2,h3,h4,h5 {line-height: 1.1;
  font-size: 7px;
  }
h1 {display: inline-block;
  vertical-align: middle;
  }
body {
	font-size: 13px;
	line-height: 2.0;
	color: #000000;
	overflow:scroll;
  }
@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: 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: 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;}
}



.logo {background-color:#1347b5; position:absolute;}
@media print, screen and (min-width: 1000px) {
.logo {margin: 0; width:200px; height: 86px;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.logo {margin: 0; width:200px; height: 86px;}
}
@media only screen and (max-width: 700px) {
.logo {margin: 0; width:165px; height: 70px;}
}
.groupname {color: #1347b5; position:absolute;}
@media print, screen and (min-width: 1000px) {
.groupname {left: 240px; width:200px; top: 30px;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.groupname {left: 240px; width:200px; top: 30px;}
}
@media only screen and (max-width: 700px) {
.groupname {left: 240px; width:200px; top: 20px;}
}

ul.pcmenu {text-align: left; top: 18px; font-size: 90%; font-weight: 400; font-family: 'Noto Sans JP', sans-serif; position:absolute;}
@media print, screen and (min-width: 1350px) {
ul.pcmenu {width:60%; left: 380px;}
}
@media only screen and (max-width: 1349px) {
ul.pcmenu {width:50%; left: 300px;}
}
ul.pcmenu li {line-height: 1.3; margin: 0 3% 0 0; letter-spacing: 0.01em; display: inline-block;}
ul.pcmenu li p{font-size: 150%; margin: 0; padding: 0; letter-spacing: 0.06em;}

ul.pcmenu li ul.submenu li {margin: 0; letter-spacing: 0.01em; padding: 0; font-size:120%; display: flex; text-align: left!important; width: 100%; align-items: center;
list-style-type: none;
    height: 0;
    overflow: hidden;
    transition: .5s;
}
ul.pcmenu li:hover > ul.submenu > li {
    height: 35px; width: 100%;
    overflow: visible;
}

ul.pcmenu li ul.submenu li span {
    display: inline-block;
    padding: 0 0 0 0.5em;
    position: relative;
}

ul.pcmenu li ul.submenu li span:before,
ul.pcmenu li ul.submenu li span:after {
    border-top: 1px solid;
    content: "";
    position: absolute;
    top: 50%;
    width: 20px;
}

ul.pcmenu li ul.submenu li span:before {
    right: 100%;
}

ul.pcmenu li ul.submenu li span:after {
    left: 200%;
}

.menu-contact {border: 1px solid #666666; text-align:center; position:absolute; font-size:80%;}
@media print, screen and (min-width: 1000px) {
.menu-contact {padding: 3px 0; width:120px; right:3%; top:25px;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.menu-contact {padding: 3px 0; width:120px; right:10%; top:25px;}
}
@media only screen and (max-width: 700px) {
.menu-contact {padding: 3px 0; width:120px; right:3%; top:15px;}
}

.shad01 {background-color: #050542;
    width: 100%;
    position: relative;
    overflow: hidden;
    }

.shad01 {min-width: 100%;
        float: none;
        box-sizing: border-box; }
.shad01:after {
      content: "";
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      background-color: #1347b5; }
.shad01.animate:after {
    animation: secondaryImageOverlayIn 0.9s 0s cubic-bezier(0.77, 0, 0.175, 1), secondaryImageOverlayOut 0.9s 0.9s cubic-bezier(0.77, 0, 0.175, 1);
    animation-fill-mode: both; }
.shad01.animate .mainimage-over {
    /*隠しておくソース*/
    animation: fadeIn 1.1s 1.2s;
    animation-fill-mode: both; }
.shad01.animate .grtng-img {
    /*隠しておくソース*/
    animation: fadeIn 1.1s 1.2s;
    animation-fill-mode: both; }

.mainimage-over {overflow: hidden;position: relative; filter: grayscale(0%);height: 100vh;}
@media screen and (min-width: 1100px) {
.mainimage-over {height: 104vh;}
}
@media only screen and (min-width: 701px) and (max-width: 1099px) {
.mainimage-over {height: 550px;}
} 
@media screen and (max-width: 700px) {
.mainimage-over {height: 80vh;}
}
/*はじめにブロックを伸ばすアニメーション*/
@keyframes secondaryImageOverlayIn {
  0% {
    width: 0; }
  100% {
    width: 100%; } }
/*伸びたブロックを横に追いやるアニメーション*/
@keyframes secondaryImageOverlayOut {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-102%); } }

@keyframes move-stripe {
    0% {  background-position-x: 0;}
    100% {  background-position-x: -34px;  }
				}
				
@media screen and (min-width: 1100px) {
.cb-slideshow {height: 100vh;}
}
@media only screen and (min-width: 701px) and (max-width: 1099px) {
.cb-slideshow {height: 100vh;}
} 
@media screen and (max-width: 700px) {
.cb-slideshow {height: 100vh;}
}
@media screen and (min-width: 1100px) {
.cb-slideshow li span {height: 100vh;}
}
@media only screen and (min-width: 701px) and (max-width: 1099px) {
.cb-slideshow li span {height: 100vh;}
} 

@media screen and (max-width: 700px) {
.cb-slideshow li span {height: 100vh;}
}

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

.cb-slideshow li span {
    width: 100vw;
    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; 
}

.cb-slideshow li div h3 {
	z-index: 50;
	font-family: 'Playfair Display', serif;
	font-size: 400%;
	color: #fff;
	font-weight: bold;
	line-height: 1.2;
  text-align: center;
}
 
@media screen and (min-width: 701px) {
.cb-slideshow li:nth-child(1) span {background-image: url(images/slide01.jpg);}
}
@media 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 screen and (min-width: 701px) {
.cb-slideshow li:nth-child(2) span {background-image: url(images/slide02.jpg);}
}
@media 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 screen and (min-width: 701px) {
.cb-slideshow li:nth-child(3) span {background-image: url(images/slide03.jpg);}
}
@media 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 screen and (min-width: 701px) {
.cb-slideshow li:nth-child(4) span {background-image: url(images/slide04.jpg);}
}
@media 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 screen and (min-width: 701px) {
.cb-slideshow li:nth-child(5) span {background-image: url(images/slide05.jpg);}
}
@media 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 screen and (min-width: 701px) {
.cb-slideshow li:nth-child(6) span {background-image: url(images/slide06.jpg);}
}
@media 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 }
}

@media screen and (max-width: 1140px) {
    .cb-slideshow li div h3 { font-size: 12vmin }
}


.name {color: #ffffff;
	position: absolute;
	right: 5%;
	top: 30%; width: 90%;
	z-index: 10;
	text-align: right !important;
	line-height: 1.5;
}
@media print, screen and (min-width: 1100px) {
.name {font-size: 400%;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.name {font-size: 350%;}
}
@media print, screen and (max-width: 510px) {
.name {font-size: 250%;}
}
.lbg-name {background-color: #1347b5!important; padding: 3px 10px;}

.cls {color: #ffffff; position: absolute; width: 80%; z-index: 10; line-height: 2.5; ffont-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; font-weight: 700; text-align: right!important; letter-spacing: 0.12em; text-shadow:0 0 3px #333333,0 0 3px #333333,0 0 3px #333333,0 0 3px #333333,0 0 3px #333333,0 0 3px #333333,0 0 3px #333333,0 0 3px #333333,0 0 3px #333333,0 0 3px #333333,0 0 3px #f00,0 0 3px #333333,0 0 3px #f00,0 0 3px #333333,0 0 3px #333333,0 0 3px #333333;}
@media print, screen and (min-width: 1100px) {
.cls {font-size: 400%; right: 100px;}
}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {
.cls {font-size: 310%; left: 50px;}
}
@media only screen and (max-width: 700px) {
.cls {font-size: 210%; left: 5%;}
}

.cls span {background-color: #1347b5!important; padding: 3px 20px;}


.cls01 {
    animation-name: clsa01;
    animation-duration: 3.7s;
}
@media print, screen and (min-width: 1100px) {
.cls01 {top: 40%;}
}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {
.cls01 {top: 35%;}
}
@media only screen and (max-width: 700px) {
.cls01 {top: 150px}
}
@keyframes clsa01 {
0% {
    opacity: 0;
    transform: translateX(-30px);
}
72% {
    opacity: 0;
    transform: translateX(-30px);
}
100% {
    opacity: 1;
    transform: translateX(0);
}
}

.cls02 {
    animation-name: clsa02;
    animation-duration: 4.1s;
}
@media print, screen and (min-width: 1100px) {
.cls02 {top: 50%;}
}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {
.cls02 {top: 47%;}
}
@media only screen and (max-width: 700px) {
.cls02 {top: 280px;}
}
@keyframes clsa02 {
0% {
    opacity: 0;
    transform: translateX(-40px);
}
72% {
    opacity: 0;
    transform: translateX(-40px);
}
100% {
    opacity: 1;
    transform: translateX(0);
}
}

.haguruma {position: absolute; z-index: 3;
    animation-name: clsa03;
    animation-duration: 4.0s;
}
@media print, screen and (min-width: 1100px) {
.haguruma {bottom: -15%; left: -25%;}
}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {
.haguruma {bottom: -15%; left: -25%;}
}
@media only screen and (max-width: 700px) {
.haguruma {top: 250px; left: -35%;}
}
@keyframes clsa03 {
0% {
    opacity: 0; transform:rotate(0);
}
50% {
    opacity: 0; transform:rotate(120deg);
}
75% {
    opacity: 0; transform:rotate(240deg);
}
100% {
    opacity: 1; transform:rotate(360deg);
}
}

.haguruma-in {animation:150s linear infinite rotation;}
@keyframes rotation{
0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}

@media screen and (orientation: landscape) {
.ptr {display: none;}
}
@media screen and (orientation: portrait) {
.ptr {display: block;}
}
@media screen and (orientation: landscape) {
.ort {display: block;}
}
@media screen and (orientation: portrait) {
.ort {display: none;}
}
.news-sp {color: #ffffff; width: 100%; z-index: 10; text-align: left; line-height: 1.5;  animation-name: news-anm;
    animation-duration: 5.2s; background: linear-gradient(90deg, #050542, #053f80);}
.news {color: #ffffff; width: 100%; z-index: 10; text-align: left; line-height: 1.5;  animation-name: news-anm;
    animation-duration: 5.2s; background: linear-gradient(90deg, #050542, #053f80);}
@media print, screen and (min-width: 1100px) {
.news {bottom: 0%; position: absolute;}
}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {
.news {bottom: 0%; position: absolute;}
}
@media only screen and (max-width: 700px) {
.news {bottom: 0%; position: absolute;}
}
@keyframes news-anm {
0% {
    opacity: 0;
    transform: translateY(30px);
}
72% {
    opacity: 0;
    transform: translateY(30px);
}
100% {
    opacity: 1;
    transform: translateY(0);
}
}
.news-in {overflow: hidden;}
@media print, screen and (min-width: 1100px) {
.news-in {padding: 30px 0; margin: 0 auto; width: 1100px;}
}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {
.news-in {padding: 30px 0; margin: 0 auto; width: 90%;}
}
@media only screen and (max-width: 700px) {
.news-in {padding: 30px 0; margin: 0 auto; width: 90%;}
}
ul.newslist-pc {padding: 0; margin: 0; list-style-type: none; letter-spacing: -10px;}		

ul.newslist-pc li:last-child {border-right: none}
											
ul.newslist-pc li {padding: 0; letter-spacing: normal; box-sizing: border-box;}
@media print, screen and (min-width: 1000px) {
ul.newslist-pc li {margin: 0 1%; float: left; font-size: 100%; width: calc(94% / 3); border-right: 1px solid #999999;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
ul.newslist-pc li {margin: 0 1%; float: left; font-size: 100%; width: calc(94% / 3); border-right: 1px solid #999999;}
}
@media only screen and (max-width: 700px) {
ul.newslist-pc li {margin: 0 0 15px 0; float: none; font-size: 113%; width: 100%; border-right: none;}
}

ul.newslist-pc li a {color: #ffffff!important;}	
.wide-min {width: 90%; margin: 0 auto; overflow: hidden; clear: both;}		
.def {overflow: hidden; clear: both; position: relative;}						
.bg-ech {background-image: url(images/bg-ech.png); background-repeat: no-repeat;}
@media print, screen and (min-width: 1000px) {
.bg-ech {height: 360px; padding: 70px 0 90px;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.bg-ech {height: 360px; padding: 60px 0 90px;}
}
@media only screen and (max-width: 700px) {
.bg-ech {height: auto; padding: 50px 0;}
}
.t-shdw {text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;}

.ech-title {line-height: 1.3; font-family: 'Work Sans', sans-serif; font-weight: 700; letter-spacing: 0.05em; color: #1347b5; z-index: 5;}
@media print, screen and (min-width: 1000px) {
.ech-title {font-size: 350%; position:absolute; top:100px; left:7%; margin:0;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.ech-title {font-size: 330%; position:absolute; top:100px; left:7%; margin:0;}
}
@media only screen and (max-width: 700px) {
.ech-title {font-size: 280%; position:relative; margin:0 0 30px 30px;}
}
.tswh {
white 1px 1px 10px, white -1px 1px 10px,
    white 1px -1px 10px, white -1px -1px 10px;
}
.ech-box {overflow: hidden;}
@media print, screen and (min-width: 1000px) {
.ech-box {font-size: 110%; position:absolute; top:300px; left:7%; z-index: 5;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.ech-box {font-size: 110%; position:absolute; top:300px; left:7%; z-index: 5;}
}
@media only screen and (max-width: 700px) {
.ech-box {font-size: 110%; position:relative; top:300px; left:7%; z-index: 5;}
}													
.pr-ech {position: relative; z-index: 2; overflow: hidden;}
@media print, screen and (min-width: 1000px) {
.pr-ech {margin: 0;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.pr-ech {margin: 0;}
}
@media only screen and (max-width: 700px) {
.pr-ech {margin: 0 0 30px 0;}
}	

.btn {
    display: inline-block; text-align: center; letter-spacing: 0;
    text-decoration: none !important;
    width: 100%;
box-sizing: border-box;}
.btn01 { position: relative;
     background: linear-gradient(90deg, #049be0, #1551a7);
    color: #ffffff !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}
@media print, screen and (min-width: 1000px) {
.btn01 {padding: 7px 0;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.btn01 {padding: 7px 0;}
}
@media only screen and (max-width: 700px) {
.btn01 {padding: 12px 0;}
}
.btn01:after {content: "\f054"; top: 60%; right: 10px; margin-top: -16px; position: absolute; font-family: "Font Awesome 5 Free"; font-weight: "900";}
.btn01:hover {
    background-color: #ffffff;
    color: #1551a7 !important;
}
.bg-gr {background-color: #f6f6f6;}

.world-img {position: absolute; z-index: 2}
@media print, screen and (min-width: 1000px) {
.world-img {width: 70%; bottom: -400px; right: -5%;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.world-img {width: 60%; bottom: -400px; right: -3%;}
}
@media only screen and (max-width: 700px) {
.world-img {width: 70%; bottom: -300px; right: -1%;}
}

.world-title {position: absolute; font-family: 'Noto Sans TC', sans-serif; color: #eeeeee; z-index: 1; text-align: left;}
@media print, screen and (min-width: 1000px) {
.world-title {bottom: 200px; right: -40%; font-size: 1300%;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.world-title {bottom: 200px; right: -40%; font-size: 1250%;}
}
@media only screen and (max-width: 700px) {
.world-title {bottom: 150px; right: -50%; font-size: 800%;}
}

.wide-world {overflow: hidden; position: relative; z-index: 3;}
@media print, screen and (min-width: 1000px) {
.wide-world {width: 1000px; margin: 50px auto;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.wide-world {width: 95%; margin: 50px auto;}
}
@media only screen and (max-width: 700px) {
.wide-world {width: 90%; margin: 40px auto;}
}

.shad02 {background-color: #000000;
    width: 100%;
    position: relative;
    overflow: hidden;
    }

.shad02 {min-width: 100%;
        float: none;
        box-sizing: border-box; }
.shad02:after {
      content: "";
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      background-color: #1347b5; }
.shad02.animate:after {
    animation: secondaryImageOverlayIn 0.9s 0s cubic-bezier(0.77, 0, 0.175, 1), secondaryImageOverlayOut 0.9s 0.9s cubic-bezier(0.77, 0, 0.175, 1);
    animation-fill-mode: both;}
.shad02.animate .def {
    /*隠しておくソース*/
    animation: fadeIn 1.1s 1.2s;
    animation-fill-mode: both; }

.bt-world {overflow: hidden;}
@media print, screen and (min-width: 1000px) {
.bt-world {width: 200px; margin: 0;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.bt-world {width: 200px; margin: 0;}
}
@media only screen and (max-width: 700px) {
.bt-world {width: 70%; margin: 0 auto;}
}
																	
.box2to1-over {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: stretch;
}										
.box2to1 {vertical-align:top; color:#ffffff; padding:0; margin:0;}
@media print, screen and (min-width: 1000px) {
.box2to1 {width:50%;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.box2to1 {width:50%;}
}
@media only screen and (max-width: 700px) {
.box2to1 {width:100%;}
}

.box2to1n {background-color: rgba(244, 244, 244, 0.8); margin: 0 0 30px 0; position: relative; z-index: 5; clear: both; overflow: hidden;}
.box2to1n p{margin: 0 0 15px 0; font-size: 150%; font-weight: 700; color: #1347b5;}
.box2to1n {vertical-align:top;}
@media print, screen and (min-width: 1000px) {
.box2to1n {width:39%; padding: 4%; margin: 0 1.5% 2%;}
}
@media only screen and (max-width: 999px) {
.box2to1n {width:92%; padding: 4%; margin:0 0 30px;}
}
.bg-bl01 {background-color: #053f80;}
.bg-bl02 {background-color: #050542;}

.bg-bl01b {background-color: #647cc4;}
.bg-bl02b {background-color: #3a59b6;}
/*1047行　25%から18%へ*/
.box2to1p {overflow:hidden;}
@media print, screen and (min-width: 1000px) {
.box2to1p {padding:10% 18%;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.box2to1p {padding:8%;}
}
@media only screen and (max-width: 700px) {
.box2to1p {padding:17%;}
}

.box2to1pn {overflow:hidden; color:#000;}
@media print, screen and (min-width: 1000px) {
.box2to1pn {padding:0 2% 2%;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.box2to1pn {padding:0 2% 2%;}
}
@media only screen and (max-width: 700px) {
.box2to1pn {padding:0 0 2%;}
}

.btn02 { position: relative; padding: 7px 0;
    background-color: transparent;
    border: 1px solid #ffffff;
    color: #ffffff !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.btn02:after {content: "\f054"; top: 60%; right: 10px; margin-top: -16px; position: absolute; font-family: "Font Awesome 5 Free"; font-weight: 900;}
.btn02:hover {
    background-color: #ffffff;
    border: 1px solid #ffb7b8;
    color: #053f80 !important;
}

footer  {overflow: hidden; background-color: #ffffff;
	clear: both;}
.footer-in {overflow: hidden; text-align: center;}
@media print, screen and (min-width: 1000px) {
.footer-in {width: 1000px;margin: 50px auto;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.footer-in {width: 96%;margin: 50px auto;}
}
@media only screen and (max-width: 700px) {
.footer-in {width: 90%;margin: 50px auto 0;}
}									
.footermenu {overflow:hidden; background-color:#f9f9f9;}
ul.ftmn {margin: 0;padding: 0;overflow: hidden; font-size: 90%;}
ul.ftmn li {box-sizing: border-box; text-align: center;
	margin: 0;
	padding: 15px 0;
	list-style-type: none;
}
@media print, screen and (min-width: 1000px) {
ul.ftmn li {width: 16.5%; float: left; border: none;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
ul.ftmn li {width: 16.5%; float: left; border: none;}
}
@media only screen and (max-width: 700px) {
ul.ftmn li {width: 50%; float: left; border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff;}
}
ul.ftmn li:nth-child(even) {border-right: none!important;}

@media print, screen and (min-width: 1200px) {
.footerwide {width: 1200px; margin: 30px auto;}
}
@media only screen and (min-width: 701px) and (max-width: 1199px) {
.footerwide {width: 100%; margin: 30px auto;}
}
@media only screen and (max-width: 700px) {
.footerwide {width: 100%; margin: 30px auto;}
}

ul.groupmenu {margin:0; padding:0;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: stretch;
}										
ul.groupmenu li {padding:0; list-style-type:none;}
@media print, screen and (min-width: 1000px) {
ul.groupmenu li {margin:2% 1%; width:18%;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
ul.groupmenu li {margin:2% 1%; width:18%;}
}
@media only screen and (max-width: 700px) {
ul.groupmenu li {margin:2% 1.5%; width:47%;}
}
ul.groupmenu li p{margin:0 0 10px; padding:1px 0; text-align:center; background-color:#d9dfe5; font-size:105%;}

ul.groupmenu-in {
	margin: 0;
	padding: 0; list-style-type:none;
}										
ul.groupmenu-in li {padding:0; margin:0; width:100%;}

.footer-logo {width: 150px; margin: 0 auto 20px;}
.copy {font-size: 80%; padding: 10px;}
@media print, screen and (min-width: 1000px) {
.copy {text-align: center;}
}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {
.copy {text-align: center;}
}
@media only screen and (max-width: 700px) {
.copy {text-align: center;}
}


@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: "MENU";
    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(5,63,128,0.6);
    right: -100%;
    z-index: 998;
    transition: .5s;
    }
    #nav_sp nav::after {
    content: "";
   background: rgba(5,63,128,0.6);
    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 */
}

.toptitle-bg  {background-color:#666666; overflow:hidden;}
.toptitle  {font-family: 'Noto Sans TC', sans-serif; font-size: 120%; background-size:cover; background-position:center center;
	overflow: hidden; text-align: center; letter-spacing: 0.2em; font-family: 'Noto Sans JP', sans-serif;
	clear: both; color:#ffffff!important; line-height: 1.5; background-image: url(images/top.jpg);
}
.toptitle-in {overflow: hidden; text-align: center;}
@media print, screen and (min-width: 1000px) {
.toptitle-in {width: 1000px;margin: 30px auto;}
}
@media only screen and(min-width: 701px) and (max-width: 999px) {
.toptitle-in {width: 96%;margin: 30px auto;}
}
@media only screen and (max-width: 700px) {
.toptitle-in {width: 90%;margin: 25px auto;}
}
.toptitle-in p{padding: 0; margin: 0; font-size: 190%; font-weight: 700;}

@media print, screen and (min-width: 701px) {
.fl-grt {width: 20%; margin: 0; float: left;}
}
@media only screen and (max-width: 700px) {
.fl-grt {width: 60%; margin: 0 auto 40px; float: none;}
}

@media print, screen and (min-width: 701px) {
.fr-grt {width: 75%; margin: 0; float: right;}
}
@media only screen and (max-width: 700px) {
.fr-grt {width: 90%; margin: 0 auto; float: none;}
}

.wide {overflow: hidden; position: relative;}
@media print, screen and (min-width: 1000px) {
.wide {width: 1000px; margin: 50px auto;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.wide {width: 100%; margin: 50px auto;}
}
@media only screen and (max-width: 700px) {
.wide {width: 100%; margin: 40px auto;}
}	
.wide-pr {overflow: hidden; position: relative;}
@media print, screen and (min-width: 1000px) {
.wide-pr {width: 1000px; margin: 100px auto;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.wide-pr {width: 90%; margin: 100px auto;}
}
@media only screen and (max-width: 700px) {
.wide-pr {width: 90%; margin: 80px auto;}
}	

.z002 {z-index: 2;}

.greeting-title {position: absolute; font-family: 'Noto Sans TC', sans-serif; color: #eeeeee; z-index: 0; text-align: left;}
@media print, screen and (min-width: 1000px) {
.greeting-title {top: 0px; right: -10%; font-size: 1300%;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.greeting-title {top: 0px; right: -10%; font-size: 1250%;}
}
@media only screen and (max-width: 700px) {
.greeting-title {bottom: 150px; right: -20%; font-size: 800%;}
}

.bg-greeting {background-image: url(images/bg-greeting.png); background-repeat: no-repeat; background-size: cover;}

.box3to1-over {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: stretch;
}										
.box3to1 {vertical-align:top; padding:0; border:1px solid #eeeeee; box-sizing: border-box;}
@media print, screen and (min-width: 1000px) {
.box3to1 {width:29.33%; margin:0 2% 2%;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.box3to1 {width:29.33%; margin:0 2% 2%;}
}
@media only screen and (max-width: 700px) {
.box3to1 {width:90%; margin:0 auto 2%;}
}

.box3to1p {overflow:hidden;}
@media print, screen and (min-width: 1000px) {
.box3to1p {padding:10% 5%;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.box3to1p {padding:8% 5%;}
}
@media only screen and (max-width: 700px) {
.box3to1p {padding:12% 5%;}
}
.box3to1p p{font-size:113%; padding:0; margin:0; font-weight:700;}

.bg-history {background-image: url(images/bg-history.jpg); background-repeat: no-repeat; background-size: cover; overflow:hidden;}

.bg-history-wh {overflow:hidden; background-color: rgba(255, 255, 255, .9);}
@media print, screen and (min-width: 1000px) {
.bg-history-wh {padding:10% 10%; float:right; width:50%; margin:200px 5% 80px;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.bg-history-wh {padding:10% 10%; float:none; width:70%; margin:50px auto;}
}
@media only screen and (max-width: 700px) {
.bg-history-wh {padding:10% 10%; float:none; width:70%; margin:50px auto;}
}
.history-title {position: absolute; font-family: 'Noto Sans TC', sans-serif; color: #eeeeee; z-index: 0; text-align: left;}
@media print, screen and (min-width: 1000px) {
.history-title {top: 0px; left: 10%; font-size: 1300%;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.history-title {top: 0px; left: 10%; font-size: 1250%;}
}
@media only screen and (max-width: 700px) {
.history-title {bottom: 150px; left: 10%; font-size: 800%;}
																	}
																	
.main-bdr{
  border-color: #6bb6ff;
}
 
.tl-content {
  position: relative;
  padding: 0 0 1.5em 2.8em;
}
 
.tl-content:before {
  content: "";
  display: block;
  position: absolute;
  top: 24px;
  bottom: 0;
  left: 8px;
  width: 3px;
  background: #ccd5db;
}
 
.tl-content:not(:first-of-type):not(:last-of-type) .tl_marker {
  background: transparent;
}
 
.tl-content:last-of-type:before {
  content: none;
}
 
.tl-content img{
  max-width: 100%;
  height: auto;
}
 
.tl_label {
  padding-top: 2px;
  color: #90969a;
  font-size: 14px;
  font-weight: bold;
}
 
.tl_title {
  font-size: 1.1em;
  font-weight: bold;
  line-height: 1.5;
}
 
.tl_main {
  margin-top: 0.5em;
  padding: 0 0 1.5em;
  font-size: 0.9em;
  line-height: 1.6;
  border-bottom: dashed 1px #ccd5db;
}
 
.main-bc {
  background-color: #6bb6ff;
}
 
.tl_marker {
  content: "";
  display: block;
  position: absolute;
  top: 6px;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: solid 3px #6bb6ff;
}
.bg-wh {background-color: #ffffff;}

.title-big  {font-family: 'Noto Sans TC', sans-serif; font-size: 250%; overflow: hidden; text-align: center; letter-spacing: 0.1em; clear: both; color:#1347b5; line-height: 1.5;}
.title-jp  {font-family: 'Noto Sans JP', sans-serif; font-size: 150%; overflow: hidden; text-align: center; letter-spacing: 0.2em; clear: both; color:#000000; line-height: 1.5;}
.img-wide {width: 30%; margin: 0 auto 10px;}
.bg-gr2 {background-color: #555555;}

.bg-lb {background-color: #e6ecf3;}

.bg-vision {background-image: url(images/bg-vision.jpg); background-repeat: no-repeat; background-size: cover;}

.img-wide2 {width: 250px; margin: 0 auto;}

.area {background-color:#1347b5; overflow: hidden; display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: stretch;}									
.area-l {vertical-align:middle; color:#ffffff; padding:0; margin:0; text-align:center;}
@media print, screen and (min-width: 1000px) {
.area-l {width:20%;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.area-l {width:25%;}
}
@media only screen and (max-width: 700px) {
.area-l {width:100%;}
}
.area-r {vertical-align:middle; padding:0; margin:0; background-color: #ffffff;}
@media print, screen and (min-width: 1000px) {
.area-r {width:80%;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.area-r {width:75%;}
}
@media only screen and (max-width: 700px) {
.area-r {width:100%;}
}

.bg-env {background-image: url(images/bg-env.png); background-repeat: no-repeat; background-size: cover;}
.bg-env2 {background-image: url(images/bg-env2.png); background-repeat: no-repeat; background-size: cover;}
.bg-env3 {background-image: url(images/bg-env3.png); background-repeat: no-repeat; background-size: cover;}


ul.cp_list {letter-spacing: 0.12em;
	position: relative;
	padding: 0;
	list-style-type: none;
}
ul.cp_list li {font-size: 105%; color: #000000;
	padding: 15px 20px 15px 30px;
	margin: 0 0 30px 0;
	border-left: solid 6px #1347b5;
	background-color: rgba(255,255,255,0.5);
}


ol.nmb2 li{margin: 0 0 5px 20px;
  list-style-type:none;
  list-style-position:inside;
  counter-increment: cnt;
}
ol.nmb2 li:before{color: #2391d3; background-color: transparent; font-weight: 700;
  display: marker;
  content: "(" counter(cnt) ") ";
}
ol.nmb2ts {
  padding:0;
  margin:0;
}

ol.bda{
  counter-reset:list;
  list-style-type:none;
  font: 110%;
  padding: 0px;
}
ol.bda li{
  position:relative;
  margin: 7px 0 30px 50px;
  padding-left: 10px;
}
  
ol.bda li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -35px;
  width: 30px;
  height: 30px;
  background: #1347b5;
  text-align: center;
  color: #fff;
  top: 15px;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

ol.bda li p{padding: 0; font-size: 120%;
  color:#1347b5;
  line-height: 1.5;
  margin: 0 0 8px 0;
}

ol.sqabd {margin: 0; 
  counter-reset:list;
  list-style-type:none;
  font: 92%;
  padding: 0;
}
ol.sqabd li{
  position:relative;
  line-height: 26px;
  margin: 7px 0 10px 30px;
  padding-left:10px;
}
ol.sqabd li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -30px;
  width: 26px;
  height: 27.5px; border: 1px solid #1347b5;
  background: #ffffff;
  text-align: center;
  color: #000000;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.wide900 {overflow: hidden; position: relative;}
@media print, screen and (min-width: 900px) {
.wide900 {width: 900px; margin: 100px auto;}
}
@media only screen and (min-width: 701px) and (max-width: 899px) {
.wide900 {width: 100%; margin: 100px auto;}
}
@media only screen and (max-width: 700px) {
.wide900 {width: 100%; margin: 80px auto;}
}	

.wide900n {overflow: hidden; position: relative;}
@media print, screen and (min-width: 900px) {
.wide900n {width: 900px; margin: 100px auto;}
}
@media only screen and (min-width: 701px) and (max-width: 899px) {
.wide900n {width: 90%; margin: 100px auto;}
}
@media only screen and (max-width: 700px) {
.wide900n {width: 90%; margin: 80px auto;}
}	

.wide1000 {overflow: hidden; position: relative;}
@media print, screen and (min-width: 1000px) {
.wide1000 {width: 1000px; margin: 100px auto;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.wide1000 {width: 100%; margin: 100px auto;}
}
@media only screen and (max-width: 700px) {
.wide1000 {width: 100%; margin: 80px auto;}
}	

.wide90p {overflow: hidden; position: relative;}
@media print, screen and (min-width: 1000px) {
.wide90p {width: 90%; margin: 100px auto;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.wide90p {width: 100%; margin: 100px auto;}
}
@media only screen and (max-width: 700px) {
.wide90p {width: 100%; margin: 80px auto;}
}	

.bg-rec {background-image: url(images/bg-rec.png); background-repeat: no-repeat; background-size: cover;}

.bdb {border-bottom:none; padding:0 0 10px 0; margin:0 0 10px 0; overflow: hidden;}
.bdb-l {color: #666666; text-align: center;}
@media screen and (min-width: 1000px) {
.bdb-l {width: 30%; float: left; margin: 0; text-align: center;}
}
@media only screen and (min-width: 581px) and (max-width: 999px) {
.bdb-l {width: 30%; float: left; text-align: center;}
} 
@media screen and (max-width: 580px) {
.bdb-l {width: 100%; float: none; text-align: left;}
}
.bdb-r {text-align: left;}
@media screen and (min-width: 1000px) {
.bdb-r {width: 67%; float: right;}
}
@media only screen and (min-width: 581px) and (max-width: 999px) {
.bdb-r {width: 67%; float: right;}
} 
@media screen and (max-width: 580px) {
.bdb-r {width: 100%; float: none;}
}
.frmt {
min-height: 40px;
border: 1px solid #ccc;
background: #fafafa;
border-radius: 5px;
font-size: 16px;
padding: 5px;
cursor: pointer;
}
.frmta {
min-height: 50px;
border: 1px solid #ccc;
background: #fafafa;
border-radius: 5px;
font-size: 16px;
padding: 5px;
cursor: pointer;
}
@media print, screen and (min-width: 1100px) {
.frm-w {width: 75%!important;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.frm-w {width: 75%!important;}
}
@media print, screen and (max-width: 510px) {
.frm-w {width: 95%!important;}
}

@media print, screen and (min-width: 1100px) {
.frm-w2 {width: 20%!important;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.frm-w2 {width: 20%!important;}
}
@media print, screen and (max-width: 510px) {
.frm-w2 {width: 30%!important;}
}
.inp {
min-height: 35px;
border: 1px solid #ccc;
background: #fafafa;
border-radius: 5px;
padding: 5px;
cursor: pointer;
}
@media print, screen and (min-width: 1100px) {
.inp {width: 70%;}
}
@media print, screen and (min-width: 511px) and (max-width: 1099px) {
.inp {width: 80%;}
}
@media print, screen and (max-width: 510px) {
.inp {width: 90%;}
}
.hissu {border: 1px solid red; color: red; display:  inline-block; padding:  0 15px; margin:  0 10px 0 0; line-height:  1.3;}		
.tahi {height: 150px;}
.dpn {display: none;}
.atts {font-size: 86%; color:#666666; line-height:1.5;}
.sndbtn {
    border: 0px;
    width: 200px;
    height: 55px; 
    background: url(images/reserve_item02.jpg) center top no-repeat; cursor: pointer;
}
.sndbtn2 {
    border: 0px;
    width: 200px;
    height: 55px;
    background: url(images/reserve_item02.jpg) center top no-repeat; cursor: pointer;
}
#Contact-all {background-image: url(images/bg-contact-all.png); background-repeat: no-repeat; background-size: cover; overflow:hidden;}
#Contact-pro {background-image: url(images/bg-contact-pro.png); background-repeat: no-repeat; background-size: cover; overflow:hidden;}
#Contact-rec {background-image: url(images/bg-contact-rec.png); background-repeat: no-repeat; background-size: cover; overflow:hidden;}
.contact-title {position: absolute; font-family: 'Noto Sans TC', sans-serif; color: #eeeeee; z-index: 0; text-align: left; line-height: 2.0;}
@media print, screen and (min-width: 1000px) {
.contact-title {top: 0px; left: 10%; font-size: 1100%;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.contact-title {top: 0px; left: 10%; font-size: 950%;}
}
@media only screen and (max-width: 700px) {
.contact-title {top: 0px; left: 10%; font-size: 800%;}
}

.wide900m {overflow: hidden; position: relative;}
@media print, screen and (min-width: 900px) {
.wide900m {width: 900px; margin: 250px auto 100px;}
}
@media only screen and (min-width: 701px) and (max-width: 899px) {
.wide900m {width: 100%; margin: 250px auto 100px;}
}
@media only screen and (max-width: 700px) {
.wide900m {width: 100%; margin: 180px auto 80px;}
}	
.wide900mn {overflow: hidden; position: relative;}
@media print, screen and (min-width: 900px) {
.wide900mn {width: 900px; margin: 250px auto 100px;}
}
@media only screen and (min-width: 701px) and (max-width: 899px) {
.wide900mn {width: 90%; margin: 250px auto 100px;}
}
@media only screen and (max-width: 700px) {
.wide900mn {width: 90%; margin: 180px auto 80px;}
}

.wide900mn2 {overflow: hidden; position: relative;}
@media print, screen and (min-width: 900px) {
.wide900mn2 {width: 900px; margin: 0 auto 100px;}
}
@media only screen and (min-width: 701px) and (max-width: 899px) {
.wide900mn2 {width: 90%; margin: 0 auto 100px;}
}
@media only screen and (max-width: 700px) {
.wide900mn2 {width: 90%; margin: 0 auto 80px;}
}

.wide1000m {overflow: hidden; position: relative; z-index: 5;}
@media print, screen and (min-width: 1000px) {
.wide1000m {width: 1000px; margin: 250px auto 100px;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.wide1000m {width: 100%; margin: 250px auto 100px;}
}
@media only screen and (max-width: 700px) {
.wide1000m {width: 100%; margin: 180px auto 80px;}
}	

.wide1000mg {overflow: hidden; position: relative; z-index: 9;}
@media print, screen and (min-width: 1000px) {
.wide1000mg {width: 1000px; margin: 250px auto 100px;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.wide1000mg {width: 90%; margin: 250px auto 100px;}
}
@media only screen and (max-width: 700px) {
.wide1000mg {width: 90%; margin: 180px auto 80px;}
}	

.wide1000mgs {overflow: hidden; position: relative; z-index: 9;}
@media print, screen and (min-width: 1000px) {
.wide1000mgs {width: 1000px; margin: 50px auto;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.wide1000mgs {width: 90%; margin: 50px auto;}
}
@media only screen and (max-width: 700px) {
.wide1000mgs {width: 90%; margin: 40px auto;}
}	

.contact-subtitle {overflow: hidden; position: relative; color:#1347b5; font-weight: 700; letter-spacing: 0.1em;}
@media print, screen and (min-width: 900px) {
.contact-subtitle {font-size: 210%; margin: 0 0 30px 0;}
}
@media only screen and (min-width: 701px) and (max-width: 899px) {
.contact-subtitle {font-size: 200%; margin: 0 0 30px 30px;}
}
@media only screen and (max-width: 700px) {
.contact-subtitle {font-size: 200%; margin: 0 0 30px 30px;}
}	

.contact-subtitle-nm {overflow: hidden; position: relative; color:#1347b5; font-weight: 700; letter-spacing: 0.1em;}
@media print, screen and (min-width: 900px) {
.contact-subtitle-nm {font-size: 210%; margin: 0 0 30px 0;}
}
@media only screen and (min-width: 701px) and (max-width: 899px) {
.contact-subtitle_nm {font-size: 200%; margin: 0 0 30px 0;}
}
@media only screen and (max-width: 700px) {
.contact-subtitle_nm {font-size: 200%; margin: 0 0 30px 0;}
}	

.contact-bgbox {margin: 0 0 30px 0; padding: 0; border: 5px solid #1347b5; display: flex; flex-wrap: wrap; align-items: center;}
.contact-bgbox-wh {background-color: #ffffff; margin: 0 0 30px 0; border: none;}
.contact-p {padding: 3% 0; vertical-align: middle;}
@media print, screen and (min-width: 701px) {
.contact-p {display: block;}
}
@media only screen and (max-width: 700px) {
.contact-p {display: block;}
}	
@media print, screen and (min-width: 701px) {
.contact-name {width: 25%; background-color: #1347b5; color: #ffffff; margin: 0; padding: 65px 0; font-size: 115%; text-align: center; height: 100%;}
}
@media only screen and (max-width: 700px) {
.contact-name {width: 90%; background-color: #1347b5; color: #ffffff; margin: 0; padding: 30px 10%; font-size: 115%;text-align: left; height: auto;}
}	
@media print, screen and (min-width: 701px) {
.contact-add {width: 47%; margin: 0 0 0 3%;}
}
@media only screen and (max-width: 700px) {
.contact-add {width: 90%; margin: 0 auto;}
}	
@media print, screen and (min-width: 701px) {
.contact-tel {width: 20%; margin: 0;}
}
@media only screen and (max-width: 700px) {
.contact-tel {width: 100%; margin: 0;}
}	
@media print, screen and (min-width: 701px) {
.contact-bt {width: 21%; margin: 0;}
}
@media only screen and (max-width: 700px) {
.contact-bt {width: 90%; margin: 0 auto;}
}	

.contact-bt-wide {padding: 4px 0;
    display: inline-block; text-align: center; letter-spacing: 0;
    text-decoration: none !important;
    width: 100%;
box-sizing: border-box;}
.contact-bt-wide { position: relative; border: 2px solid #3c3c6b;
     background: linear-gradient(90deg, #3c3c6b, #3c3c6b);
    color: #ffffff !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.contact-bt-wide:after {content: "\f054"; top: 60%; right: 10px; margin-top: -16px; position: absolute; font-family: "Font Awesome 5 Free"; font-weight: "900";}
.contact-bt-wide:hover {border: 2px solid #3c3c6b;
    background-color: #ffffff;
    color: #3c3c6b!important;
}

.wide800 {overflow: hidden; position: relative;}
@media print, screen and (min-width: 801px) {
.wide800 {width: 800px; margin: 100px auto;}
}
@media only screen and (max-width: 800px) {
.wide800 {width: 100%; margin: 80px auto;}
}	

.wide800n {overflow: hidden; position: relative;}
@media print, screen and (min-width: 801px) {
.wide800n {width: 800px; margin: 100px auto;}
}
@media only screen and (max-width: 800px) {
.wide800n {width: 90%; margin: 80px auto;}
}	

.wide600 {overflow: hidden; position: relative;}
@media print, screen and (min-width: 601px) {
.wide600 {width: 600px; margin: 0 auto;}
}
@media only screen and (max-width: 600px) {
.wide600n {width: 100%; margin: 0 auto;}
}	
.wide600n {overflow: hidden; position: relative;}
@media print, screen and (min-width: 601px) {
.wide600n {width: 600px; margin: 0 auto;}
}
@media only screen and (max-width: 600px) {
.wide600n {width: 90%; margin: 0 auto;}
}

.wide700n {overflow: hidden; position: relative;}
@media only screen and (min-width: 701px) {.wide700n {width: 700px; margin: 0 auto;}}
@media only screen and (max-width: 700px) {.wide700n {width: 90%; margin: 0 auto;}}

.bg-bk {background-color: #000000;}
.p-video {margin: 0 0 -10px; position: relative; background-image: url(images/video.jpg); background-repeat: no-repeat; background-size: cover;}
.p-video-v {position: absolute; z-index: 10;}
.p-video-i {position: absolute; z-index: 1;}

.group {margin: 0 0 30px 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; width: 100%;}
.group-box {display: block; font-size: 115%; text-align: center;}
@media print, screen and (min-width: 701px) {
.group-box {width: 48%; margin: 0 1% 1%; padding: 0%;}
}
@media only screen and (max-width: 700px) {
.group-box {width: 92%; margin: 0 1% 2%; padding: 3%;}
}	
.group-box-bd{border: 5px solid #1347b5; margin: 0; padding: 0%; overflow: hidden; background-color: #dddddd;}
.group-box-bd-space {overflow: hidden; margin: 0; padding: 3%;}
.group-box-bd p {font-size: 150%; font-weight: 700; margin: 0 0 10px; color: #1347b5;}

@media print, screen and (min-width: 701px) {
.group-name {width: 20%; background-color: #1347b5; color: #ffffff; margin: 0; padding: 65px 0; font-size: 115%; text-align: center; height: 100%;}
}
@media only screen and (max-width: 700px) {
.group-name {width: 90%; background-color: #1347b5; color: #ffffff; margin: 0; padding: 30px 10%; font-size: 115%;text-align: left; height: auto;}
}
.group-add {font-size: 110%;}
@media print, screen and (min-width: 701px) {
.group-add {width: 50%; margin: 0 0 0 3%;}
}
@media only screen and (max-width: 700px) {
.group-add {width: 90%; margin: 0 auto;}
}	
.group-add2 {font-size: 110%;}
@media print, screen and (min-width: 701px) {
.group-add2 {width: 67%; margin: 0 0 0 3%;}
}
@media only screen and (max-width: 700px) {
.group-add2 {width: 90%; margin: 0 auto;}
}	
@media print, screen and (min-width: 701px) {
.group-photo {width: 20%; margin: 0;}
}
@media only screen and (max-width: 700px) {
.group-photo {width: 90%; margin: 0 auto 20px;}
}	
@media print, screen and (min-width: 701px) {
.group-photo2 {width: 30%; margin: 0;}
}
@media only screen and (max-width: 700px) {
.group-photo2 {width: 90%; margin: 0 auto 20px;}
}	
@media print, screen and (min-width: 701px) {
.group-bt {width: 21%; margin: 0; float: left;}
}
@media only screen and (max-width: 700px) {
.group-bt {width: 90%; margin: 0 auto; float: none;}
}	

.group-outer {background-color: rgba(244, 244, 244, 0.8); margin: 0 0 30px 0; padding: 4%; position: relative; z-index: 5; clear: both; overflow: hidden;}
.group-outer-index {background-color: rgba(244, 244, 244, 0.8); margin: 0 0 30px 0; position: relative; z-index: 5; clear: both; overflow: hidden;}
@media only screen and (max-width: 900px) {
.group-outer-index {padding: 10%!important;}
}	
@media print, screen and (min-width: 899px) {
.group-outer-index {padding: 4%!important;}
}
.group-outer-index p{margin: 0 0 10px 0; font-size: 150%; font-weight: 700; color: #000; padding: 0;}
.group-outer-index-obi {margin: 0 0 5px 0; font-size: 120%; font-weight: 700; color: #1347b5; padding: 0; font-weight: 700;}

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

.group-outer p {margin: 0 0 30px; font-size: 150%; font-weight: 700; padding: 0 0 0 20px; border-left:10px solid #1347b5; border-bottom:1px solid #cfcfcf; line-height:2;}
.group-space {display: flex; flex-wrap: wrap; align-items: center; margin: 0;}
.group-p {vertical-align: middle; display: block;}
.group-p2 {vertical-align: top; display: block;}
.group-bg-img {position: absolute; z-index: 1;}
@media print, screen and (min-width: 1000px) {
.group-bg-img {width: 85%; top: 100px; right: -5%;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.group-bg-img {width: 80%; top: 200px; right: -3%;}
}
@media only screen and (max-width: 700px) {
.group-bg-img{width: 70%; top: 100px; right: -1%;}
}

#Group-japan {background-image: url(images/bg-group-japan.png); background-repeat: no-repeat; background-size: cover; overflow:hidden;}


.group-menu {display: flex; flex-wrap: wrap; align-items: center; margin: 0 auto 70px; max-width: 800px;}
.group-menu-box {vertical-align: middle; display: block; border: 1px solid #1347b5; box-sizing: border-box; text-align: center; background: rgba(255,255,255,0.5);}
@media print, screen and (min-width: 1000px) {
.group-menu-box {width: 16.66%; padding: 20px 0;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.group-menu-box {width: 33.33%; padding: 20px 0;}
}
@media only screen and (max-width: 700px) {
.group-menu-box {width: 50%; padding: 20px 0;}
}
.group-menu-box3 {vertical-align: middle; position: relative; display: block; padding: 20px 0; border: 1px solid #1347b5; box-sizing: border-box; text-align: center; background: rgba(255,255,255,0.5); font-size: 92%;}
@media print, screen and (min-width: 701px) {
.group-menu-box3 {width: calc(100% / 3); padding: 10px 0;}
}
@media only screen and (max-width: 700px) {
.group-menu-box3 {width: 100%; padding: 20px 0;}
}
.group-menu-box3:after {content: "\f054"; top: 57%; right: 10px; margin-top: -16px; position: absolute; font-family: "Font Awesome 5 Free"; font-weight: "900"; color: #1347b5;}

.group-menu-box3-bt {vertical-align: middle; position: relative; display: block; padding: 20px 0; border: 1px solid #1347b5; box-sizing: border-box; text-align: center; background: rgba(255,255,255,0.5);}
@media print, screen and (min-width: 701px) {
.group-menu-box3-bt {width: calc(100% / 3);}
}
@media only screen and (max-width: 700px) {
.group-menu-box3-bt {width: 100%;}
}
.group-menu-box3-bt:after {content: "\f078"; top: 57%; right: 10px; margin-top: -16px; position: absolute; font-family: "Font Awesome 5 Free"; font-weight: "900"; color: #1347b5;}

.group-menu-box3-to {vertical-align: middle; position: relative; display: block; padding: 20px 0; border: 1px solid #1347b5; box-sizing: border-box; text-align: center; background: rgba(255,255,255,0.5);}
@media print, screen and (min-width: 701px) {
.group-menu-box3-to {width: calc(100% / 3);}
}
@media only screen and (max-width: 700px) {
.group-menu-box3-to {width: 100%;}
}
.group-menu-box3-to:after {content: "\f077"; top: 57%; right: 10px; margin-top: -16px; position: absolute; font-family: "Font Awesome 5 Free"; font-weight: "900"; color: #1347b5;}

.group-menu-box-nv {background-color: #1347b5;}
.group-menu-box-nv a{color: #ffffff!important;}
.group-menu-box-nv:after {color: #ffffff;}

@media print, screen and (min-width: 501x) {
.img-wide3 {width: 480px; margin: 0 auto;}
}
@media only screen and (max-width: 500px) {
.img-wide3 {width: 90%; margin: 0 auto;}
}

@media print, screen and (min-width: 701px) {
.img-wide3 {width: 480px; margin: 0 auto;}
}
@media only screen and (max-width: 700px) {
.img-wide3 {width: 90%; margin: 0 auto;}
}

#Ech-bg-page {background-image: url(images/bg-ech-page.png); background-repeat: no-repeat; background-size: cover; background-position: bottom top; overflow:hidden;}

.img-ech {position: absolute; z-index: 1;}
@media print, screen and (min-width: 1000px) {
.img-ech{width: 50%; top: 300px; right: -10%;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.img-ech {width: 45%; top: 250px; right: -7%;}
}
@media only screen and (max-width: 700px) {
.img-ech {width: 55%; top: 150px; right: -5%;}
}

.ech-left {overflow: hidden; position: relative;}
@media print, screen and (min-width: 1000px) {
.ech-left {width: 600px; float: left; margin: 0;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.ech-left {width: 600px; float: left; margin: 0;}
}
@media only screen and (max-width: 700px) {
.ech-left {width: 90%; float: none; margin: 0 auto;}
}	

.ech-title-page {position: absolute; font-family: 'Noto Sans TC', sans-serif; color: #1347b5; z-index: 0; letter-spacing: 0.01em; text-align: left; line-height: 2.0;}
@media print, screen and (min-width: 1000px) {
.ech-title-page {top: 0px; left: 10%; font-size: 900%;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.ech-title-page {top: 0px; left: 10%; font-size: 850%;}
}
@media only screen and (max-width: 700px) {
.ech-title-page {top: 60px; left: 2%; font-size: 400%;}
}

.bg-bl-ech {background-image: url(images/bg-bl.png); background-repeat: repeat-x; overflow:hidden;}
@media print, screen and (min-width: 1000px) {
.bg-bl-ech {background-position: 0 70%;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.bg-bl-ech {background-position: 0 500px;}
}
@media only screen and (max-width: 700px) {
.bg-bl-ech {background-position: 0 60%;}
}

ul.merit {margin:0; padding:0; list-style-type:none;}
ul.merit li {border-bottom:1px solid rgba(255,255,255,0.8); color:#3c3c6b; padding:10px 20px; font-size:120%; font-weight:700; margin:0 0 15px 0;}

.ech-ilb {overflow: hidden; position: relative;}
@media print, screen and (min-width: 1000px) {
.ech-left {width: 600px; float: left; margin: 0;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.ech-left {width: 600px; float: left; margin: 0;}
}
@media only screen and (max-width: 700px) {
.ech-left {width: 90%; float: none; margin: 0 auto;}
}	

.ech-bg-nv {padding: 4%; overflow: hidden; margin: 0 auto;  border: 5px solid #1347b5; position: relative;  z-index: 5; }
.ech-bg-nv2 {padding: 4%; overflow: hidden; margin: 0 auto; background: rgba(60,60,107,0.4); position: relative;  z-index: 5; }
@media print, screen and (min-width: 1000px) {
.ech-bg-nv-box-l {float: left; width: 48%; margin: 0;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.ech-bg-nv-box-l {float: left; width: 48%; margin: 0;}
}
@media only screen and (max-width: 700px) {
.ech-bg-nv-box-l {float: none; width: 100%; margin: 0 auto;}
}
@media print, screen and (min-width: 1000px) {
.ech-bg-nv-box-r {float: right; width: 48%; margin: 0;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.ech-bg-nv-box-r {float: right; width: 48%; margin: 0;}
}
@media only screen and (max-width: 700px) {
.ech-bg-nv-box-r {float: none; width: 100%; margin: 0 auto;}
}

.flow-outer {display: flex; flex-wrap: wrap; align-items: center; margin: 0}
.flow-box {vertical-align: top; display: block;}
@media print, screen and (min-width: 1000px) {
.flow-box {width: 50%; margin: 0;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.flow-box {width: 50%; margin: 0;}
}
@media only screen and (max-width: 700px) {
.flow-box {width: 100%; margin: 0 0 40px 0;}
}

@media print, screen and (min-width: 1000px) {
.flow-box-l {width: 50%; float: left; margin: 0;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.flow-box-l {width: 70%; float: left; margin: 0 0 40px 0;}
}
@media only screen and (max-width: 700px) {
.flow-box-l {width: 100%; margin: 0 0 40px 0; float: none;}
}
@media print, screen and (min-width: 1000px) {
.flow-box-r {width: 50%; float: right; margin: 0;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.flow-box-r {width: 70%; float: right; margin: 0;}
}
@media only screen and (max-width: 700px) {
.flow-box-r {width: 100%; margin: 0 0; float: none;}
}

.bgnv-fcwh {color:#ffffff; background-color:#3c3c6b; padding:10px 20px;}

.bgnv-fcwh2 {color: #000000; line-height: 3;
	padding: 4px 20px 7px;
	margin: 0 0 30px 0;
	border-left: solid 6px #3c3c6b;
border-bottom: solid 3px #cccccc;
}

.brc {overflow: hidden; border-bottom: 1px solid #eeeeee; margin: 0 0 7px 0;}
.brc-l {color: #666666;}
@media print, screen and (min-width: 1000px) {
.brc-l {float: left; width: 25%; margin: 0 0 5px 0;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.brc-l {float: left; width: 33%; margin: 0 0 5px 0;}
}
@media only screen and (max-width: 700px) {
.brc-l {float: left; width: 35%; margin: 0 0 5px 0;}
}

@media print, screen and (min-width: 1000px) {
.brc-r {float: right; width: 72%; margin: 0 0 5px 0;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.brc-r {float: right; width: 63%; margin: 0 0 5px 0;}
}
@media only screen and (max-width: 700px) {
.brc-r {float: right; width: 60%; margin: 0 0 5px 0;}
}

.check {
    margin-right: 10px; /* ボタン同士の間隔 */
}
.check {
    display: none; /* デフォルトのinputは非表示にする */
}
.check { background: #ffffff; display: inline-block;
    color: #000; /* 文字色を黒に */
    border: 1px solid #eeeeee; /* 淵の線を指定 */
    border-radius: 3px; /* 角丸を入れて、左右が丸いボタンにする */
    padding: 7px 15px; /* 上下左右に余白をトル */
margin: 0 5px 13px 0; /* 上下左右に余白をトル */
}

.check2 {
    margin-right: 10px; /* ボタン同士の間隔 */
}
.check2 {
    display: none; /* デフォルトのinputは非表示にする */
}
.check2 { background: #f9f9f9; display: inline-block;
    color: #000; /* 文字色を黒に */
    border: 1px solid #c7c7c7; /* 淵の線を指定 */
    border-radius: 3px; /* 角丸を入れて、左右が丸いボタンにする */
    padding: 12px 20px; /* 上下左右に余白をトル */
margin: 0 5px 13px 0; /* 上下左右に余白をトル */
}

.check-area {
    margin-right: 10px; /* ボタン同士の間隔 */
}
.check-area {
    display: none; /* デフォルトのinputは非表示にする */
}
.check-area { background: #666666; display: inline-block;
    color: #ffffff; /* 文字色を黒に */
    padding: 8px 15px; /* 上下左右に余白をトル */
margin: 0 5px 13px 0; /* 上下左右に余白をトル */
}

.iframe-content {
   position: relative;
 width: 100%;
}
@media print, screen and (min-width: 1000px) {
.iframe-content {padding: 35% 0 0 0;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.iframe-content {padding: 50% 0 0 0;}
}
@media only screen and (max-width: 700px) {
.iframe-content {padding: 60% 0 0 0;}
}
.iframe-content iframe {
    position: absolute;
 top: 0;
 left: 0;
    width: 100%;
    height: 100%;
					}
@media print, screen and (min-width: 1000px) {
.system-l {float: left; width: 20%; margin: 0 0 0 10%;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.system-l {float: left; width: 25%; margin: 0 0 0 10%;}
}
@media only screen and (max-width: 700px) {
.system-l {float: none; width: 100%; margin: 0 0 30px 0;}
}
@media print, screen and (min-width: 1000px) {
.system-r {float: right; width: 64%; margin: 0;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.system-r {float: right; width: 62%; margin: 0;}
}
@media only screen and (max-width: 700px) {
.system-r {float: none; width: 100%; margin: 0 0 30px 0;}
}
.system-r-title {margin: 10px 0; font-size: 150%; color: #1347b5;}

.bg-nv {background-color:#3c3c6b;}
.bg-nv-mg {background-color:#3c3c6b; overflow: hidden; position: relative;}
@media print, screen and (min-width: 1000px) {
.bg-nv-mg {padding: 100px 0;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.bg-nv-mg {padding: 100px 0;}
}
@media only screen and (max-width: 700px) {
.bg-nv-mg {padding: 80px 0;}
}

.bg-pd {overflow: hidden; position: relative;}
@media print, screen and (min-width: 1000px) {
.bg-pd {padding: 100px 0; margin: 0; width: 100%;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.bg-pd {padding: 100px 0; margin: 0; width: 100%;}
}
@media only screen and (max-width: 700px) {
.bg-pd {padding: 80px 0; margin: 0 auto; width: 90%;}
}

.bg-system {background-color: rgba(244, 244, 244, 0.8);}
.bg-system2 {background-color:#ffffff);}
.system-title {margin: 0 0 30px; font-size: 150%; font-weight: 700; padding: 0 0 0 20px; border-left:10px solid #1347b5; border-bottom:1px solid #cfcfcf; line-height:2;}

table {margin: 0; padding: 0;}
table.table_box {
  border-collapse: collapse;
  margin: 0 auto;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 0 15px -6px #00000073;
}

@media print, screen and (min-width: 900px) {
table.table_box {width: 920px;}
}
@media only screen and (min-width: 701px) and (max-width: 899px) {
table.table_box {width: 920px;}
}
@media only screen and (max-width: 700px) {
table.table_box {width: 800px;}
}

table.table_box tr {
  background-color: #fff;
}

table.table_box th,
table.table_box td {
  padding: 18px 0;
  border-bottom: 1px solid #eee; border-right: 1px solid #eee;
}

table.table_box th {
  padding: 18px 0;
  background-color: #3c3c6b;
  color:#fff;
}

table.table_box tr{
  text-align: center;
  padding: 15px 0;
  background-color: #fff;
  color:#3a3a3a;
}
table.table_box tr:nth-child(even){
  background-color: #f9f9f9;
}

.bg-tr01 { background-color: #f9f9f9!important;}
.bg-tr02 { background-color: #ffffff!important;}

.tw01 {width:25%; background-color: #c7c7c7;}
.tw02 {width:10%;}
.tw03 {width:23%;}
.tw04 {width:7%;}
.tw05 {width:5%;}
.tw06 {width:25%;}
.tw06b {width:32%;}

.tw01-n {width:47%;}
.tw02-n {width:47%;}
.tw03-n {width:6%;}

.org-map {background-image: url(images/org-map.png); background-repeat: no-repeat; background-size: cover;}

.world-title2 {position: absolute; font-family: 'Noto Sans TC', sans-serif; color: #ffffff; z-index: 1; text-align: left;}
@media print, screen and (min-width: 1000px) {
.world-title2 {bottom: 70px; right: -40%; font-size: 1300%;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.world-title2 {bottom: 70px; right: -40%; font-size: 1250%;}
}
@media only screen and (max-width: 700px) {
.world-title2 {bottom: 50px; right: -50%; font-size: 800%;}
}
.orgwide {margin: 0 auto;}
@media print, screen and (min-width: 900px) {
.orgwide {width: 800px;}
}
@media only screen and (min-width: 701px) and (max-width: 899px) {
.orgwide {width: 800px;}
}
@media only screen and (max-width: 700px) {
.orgwide {width: 800px;}
}

.init-right:after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0 0 15px;
  border-right: 1px solid #eeeeee;
  border-top: 1px solid #eeeeee;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.sign-wide {margin: 0 0 20px; float: right; clear: both; overflow: hidden;}
@media print, screen and (min-width: 900px) {
.sign-wide {width: 300px;}
}
@media only screen and (min-width: 701px) and (max-width: 899px) {
.sign-wide {width: 300px;}
}
@media only screen and (max-width: 700px) {
.sign-wide {width: 70%;}
}

.iso20 {text-align: center;}


























.bg-gl {background-color: #555555;}


.bg-sales {background-color: #f47e62;}
.bg-inspection {background-color: #f9a44b;}
.bg-metal {background-color: #48a5d9;}
.bg-insurance {background-color: #56bcc8;}

#Bgbl01 {background-image: url(images/bg-bl01p.jpg);}
#Bgbl02 {background-image: url(images/bg-bl02p.jpg);}
#Bgbl03 {background-image: url(images/bg-bl03p.jpg);}
#Bgbl04 {background-image: url(images/bg-bl04p.jpg);}
#Bgbl05 {background-image: url(images/bg-bl05p.jpg);}

.dtable {display: table; color: #ffffff; background-size:cover; position: relative; z-index:5; filter: grayscale(0%);}

.dtable-img {vertical-align: middle;
display: table-cell;
}
@media print, screen and (min-width: 1000px) {
.dtable-img {padding: 5% 15%; width: 40%;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.dtable-img {padding: 5% 10%; width: 50%;}
}
@media only screen and (max-width: 700px) {
.dtable-img {padding: 5% 10%; width: 50%;}
}

.dtable-txt {width: 30%; vertical-align: middle; text-align: center; padding: 8% 5%; opacity: 0.7;
display: table-cell;
}
.dtable-txt p{font-family: 'Work Sans', sans-serif; font-weight: 700; font-size: 300%; margin: 0 0 10px 0; padding: 0; letter-spacing: 0.05em; line-height: 1.2; color: #ffffff;}
.bthaba {width: 200px; margin: 0 auto;}

.fgs90 {filter: grayscale(0%);}

.menu-title {line-height: 1.3; font-family: 'Work Sans', sans-serif; font-weight: 700; margin: 150px auto 140px; letter-spacing: 0.05em; color: #1347b5; text-align: center;}

@media print, screen and (min-width: 1000px) {
.menu-title {font-size: 600%;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.menu-title {font-size: 550%;}
}
@media only screen and (max-width: 700px) {
.menu-title {font-size: 400%;}
}
.menu-title p{font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; font-size: 40%; margin: 0; padding: 0; letter-spacing: 0.05em; color: #777777;}

.item-in {overflow: hidden; color: #ffffff;}
@media print, screen and (min-width: 1000px) {
.item-in {padding: 3%; flex-wrap: wrap; display: flex;-webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
 align-items: center; /* 縦方向中央揃え */
 -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
 justify-content: center; /* 横方向中央揃え */}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.item-in {padding: 3%; flex-wrap: wrap;}
}
@media only screen and (max-width: 700px) {
.item-in {padding: 7%; flex-wrap: nowrap;}
}

.item-img {overflow: hidden; position: relative;}
@media print, screen and (min-width: 1000px) {
.item-img {width: 50%; float: left; margin: 0;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.item-img {width: 50%; float: left; margin: 0;}
}
@media only screen and (max-width: 700px) {
.item-img {width: 100%; float: none; margin: 0 0 30px;}
}

.item-img-pa {z-index: 10; position: absolute;}

@media print, screen and (min-width: 1000px) {
.item-img2 {width: 50%; float: right; margin: 0;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.item-img2 {width: 50%; float: right; margin: 0;}
}
@media only screen and (max-width: 700px) {
.item-img2 {width: 100%; float: none; margin: 0 0 30px;}
}


.item-tx {overflow: hidden; color: #ffffff; display: table; font-size: 120%;}
@media print, screen and (min-width: 1000px) {
.item-tx {width: 44%; float: right; margin: 0; padding: 3%;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.item-tx {width: 44%; float: right; margin: 0; padding: 3%;}
}
@media only screen and (max-width: 700px) {
.item-tx {width: 100%; float: none; margin: 0;}
}
.item-tx2 {overflow: hidden; color: #ffffff; text-align: center; vertical-align: middle;}
@media print, screen and (min-width: 1000px) {
.item-tx2 {width: 44%; float: left; margin: 0; padding: 3%;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.item-tx2 {width: 44%; float: left; margin: 0; padding: 3%;}
}
@media only screen and (max-width: 700px) {
.item-tx2 {width: 100%; float: none; margin: 0;}
}

.item-tx-in {overflow: hidden; text-align: center; vertical-align: middle; display:table-cell; }

.main-title {margin: 0 0 60px 0; padding: 0; text-align: center; font-weight: 700;
	line-height: 1.6em;
	letter-spacing: 0.1em;}
.main-title p {font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; margin: 0; padding: 0; font-size: 40%; color:#999999;}

@media print, screen and (min-width: 1000px) {
.main-title {font-size: 230%;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.main-title {font-size: 200%;}
}
@media only screen and (max-width: 700px) {
.main-title {font-size: 170%;}
}
.sqset {z-index:-1;
  overflow: hidden;
}
.tmb {overflow: hidden;}
@media print, screen and (min-width: 1000px) {
.tmb {float: left; width: 16.66%; padding: 0; margin:0; width: 16.6666%; width:  -webkit-calc(100% / 6); width: calc(100% / 6);}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.tmb {float: left; padding: 0; margin: 0; width: 20%; width:  -webkit-calc(100% / 5); width: calc(100% / 5);}
}
@media only screen and (max-width: 700px) {
.tmb {float: left; padding: 0; margin: 0; width: 33.3333%; width:  -webkit-calc(100% / 3); width: calc(100% / 3);}
}
.tmb p{padding: 0; margin: 4%;}
.por {position: absolute; background-color: transparent; top:0;}
.ohpr {position: relative; overflow: hidden;}










.bg {
  animation:slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #777777 50%, #444444 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}
.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:4s;
}
.bg3 {
  animation-duration:5s;
}

@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}

/* gradient fallbacks taken from csstricks.com */
.sqset2 {
  background-color: red;
  
  /* SVG fallback for IE 9 (could be data URI, or could use filter) */
  background-image: url(fallback-gradient.svg);
  
  /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
  background-image: -webkit-gradient(linear, left top, right top, from(red), to(#f06d06));
  
  /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
  background-image: -webkit-linear-gradient(left, red, #f06d06);
  
  /* Firefox 3.6 - 15 */
  background-image: -moz-linear-gradient(left, red, #f06d06);
  
  /* Opera 11.1 - 12 */
  background-image: -o-linear-gradient(left, red, #f06d06);
  
  /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image: linear-gradient(to right, red, #f06d06);
  margin: 0px;
  overflow: hidden;
}

.obi {color: #ffffff; background-color: #666666; padding: 4px 10px; overflow: hidden;}
@media print, screen and (min-width: 1000px) {
.obi {font-size: 160%;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.obi {font-size: 150%;}
}
@media only screen and (max-width: 700px) {
.obi {font-size: 140%;}
}

.fcrd01 {color: #1347b5 ; overflow: hidden;}
@media print, screen and (min-width: 1000px) {
.fcrd01 {font-size: 160%;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.fcrd01 {font-size: 150%;}
}
@media only screen and (max-width: 700px) {
.obi {font-size: 140%;}
}

.proud {overflow: hidden;position: relative; filter: grayscale(0%); z-index: 1;}
.proud-in {position: absolute; top: 40%; width: 100%; text-align: center;}

#Bgrec {background-image: url(images/bg-recruit.jpg);}

#Bgcom {background-image: url(images/bnr-company.jpg);}

.tsd {
text-shadow:
    black 1px 1px 2px, black -1px 1px 2px,
    black 1px -1px 2px, black -1px -1px 2px;
}



@media print, screen and (min-width: 800px) {
.hlf {float: left; width: 50%; margin: 0;}
}
@media print, screen and (max-width: 799px) {
.hlf {float: none; width: 100%;; margin: 0 0 50px;}
}
@media print, screen and (min-width: 800px) {
.hlf-in {overflow: hidden; margin: 5%;}
}
@media print, screen and (max-width: 799px) {
.hlf-in {overflow: hidden; margin: 5%;}
}

@media print, screen and (min-width: 800px) {
.hlf2-l {float: left; width: 37%; margin: 0;}
}
@media print, screen and (max-width: 799px) {
.hlf2-l {float: none; width: 100%;; margin: 0 0 50px;}
}
@media print, screen and (min-width: 800px) {
.hlf2-r {float: right; width: 60%; margin: 0;}
}
@media print, screen and (max-width: 799px) {
.hlf2-r {float: right; width: 100%;; margin: 0 0 50px;}
}

.grtng {position: relative; margin: 0; overflow: hidden;}
.grtng-img {position: relative; margin: 0; padding: 0; overflow: hidden;}																															
.grtng-space {overflow:hidden; padding: 0 5% 5%;}

.grtng-img-title  {color: #000000; font-family: 'Mrs Saint Delafield', cursive; line-height:1.1;}
@media print, screen and (min-width: 1100px) {
.grtng-img-title{font-size: 1600%; margin: -100px 0 0 100px;}
}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {
.grtng-img-title{font-size: 1300%; margin: -70px 0 0 50px;}
}
@media only screen and (max-width: 700px) {
.grtng-img-title{font-size: 700%; margin: -30px 0 0 20px;}
}														
.grtng-img-title-part {padding: 0; letter-spacing: 0.1em; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
@media print, screen and (min-width: 1100px) {
.grtng-img-title-part {font-size: 260%; margin: 0 12% 10px;}
}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {
.grtng-img-title-part {font-size: 230%; margin: 0 5% 10px;}
}
@media only screen and (max-width: 700px) {
.grtng-img-title-part {font-size: 200%; margin: 0 5% 10px;}
}	
											
																	
.grtng-bgwh p{margin: 0 0 30px; padding: 0; font-size: 200%; color: #000000;}

.grtng-title{color: rgba(0,0,0,0.15); position: absolute; width: 80%; z-index: 1; text-align: right!important; line-height: 1.5; font-family: 'Work Sans', sans-serif; font-weight: 700; letter-spacing:0.1em;}
@media print, screen and (min-width: 1100px) {
.grtng-title{font-size: 1600%; right: -60px; top: 50px;}
}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {
.grtng-title{font-size: 1200%; right: -50px; top: 50px;}
}
@media only screen and (max-width: 700px) {
.grtng-title{font-size: 700%; right: -50px; top: 30px;}
}

.bg-concept {margin: 0; position: relative; overflow: hidden; padding: 0; background:url(images/bg-concept.jpg) center no-repeat;background-position: center center; background-attachment: fixed; background-size: cover; background-repeat: no-repeat;}
.bg-concept:after{
 content: '';
  position: fixed;
  top: 0;
  height: 100vh;
  left: 0;
  right: 0;
  z-index: -1;
  background: url('/bg.jpg') center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.bg-concept-in {overflow:hidden; position: relative; z-index: 2;
  background:rgba(255, 255, 255, 0.8);
}
@media print, screen and (min-width: 1000px) {
.bg-concept-in {width: 70%; padding: 5%; margin: 230px auto 120px;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.bg-concept-in {width: 80%; padding: 5%; margin: 180px auto 90px;}
}
@media only screen and (max-width: 700px) {
.bg-concept-in {width: 80%; padding: 5%; margin: 150px auto 70px;}
}

.menu-title2 {line-height: 1.3; font-family: 'Work Sans', sans-serif; font-weight: 700; letter-spacing: 0.05em; color: #000000; text-align: left; margin: 0; z-index: 6;}
@media print, screen and (min-width: 1000px) {
.menu-title2 {font-size: 600%; position: absolute; top: 170px;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.menu-title2 {font-size: 500%; position: absolute; margin: 0; top: 150px;}
}
@media only screen and (max-width: 700px) {
.menu-title2 {font-size: 300%; position: relative; margin: 0 0 50px;}
}
.menu-title2 p{font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; font-size: 40%; margin: 0; padding: 0; letter-spacing: 0.1em; color: #777777;}
.bgc {overflow: hidden; background-color: #eeeeee; position: relative;}
.bgc-in {overflow: hidden; padding: 5%; position: relative;}
.bgc-in-r {overflow: hidden; padding: 5%; background-color: #ffffff; z-index: 5; position: relative;}
@media print, screen and (min-width: 1000px) {
.bgc-in-r {float: right; width: 50%; margin: 170px auto;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.bgc-in-r {float: right; width: 55%; margin: 150px auto;}
}
@media only screen and (max-width: 700px) {
.bgc-in-r {float: none; width: 90%; margin: 0 auto;}
}
					
@media print, screen and (min-width: 1000px) {
.bgc-slider {position: absolute; top: 500px; width: 40%; z-index: 1;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.bgc-slider {position: absolute; top: 450px; width: 40%; z-index: 1;}
}
@media only screen and (max-width: 700px) {
.bgc-slider {position: relative; margin: 0 0 50px;}
}
				
.bgc-in-l {overflow: hidden; padding: 5%; background-color: #ffffff; z-index: 5; position: relative;}
@media print, screen and (min-width: 1000px) {
.bgc-in-l {float: left; width: 50%; margin: 170px auto;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.bgc-in-l {float: left; width: 55%; margin: 150px auto;}
}
@media only screen and (max-width: 700px) {
.bgc-in-l {float: none; width: 90%; margin: 0 auto;}
}

.v-title {position: absolute; letter-spacing: 0.04em; right: 2%; line-height: 1.1; z-index: 1; color: #ffffff; font-family: 'Work Sans', sans-serif; -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;}
@media print, screen and (min-width: 1100px) {
.v-title{font-size: 1600%; right: 10px; top: 50px;}
}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {
.v-title{font-size: 1200%; right: 7px; top: 50px;}
}
@media only screen and (max-width: 700px) {
.v-title{font-size: 700%; right: 5px; top: 30px;}
}

.bg-history {margin: 0; position: relative; overflow: hidden; padding: 0; background:url(images/bg-history.jpg) center no-repeat;background-position: center center; background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;}
.bg-history:after{
 content: '';
  position: fixed;
  top: 0;
  height: 100vh;
  left: 0;
  right: 0;
  z-index: -1;
  background:url(images/bg-history.jpg) center no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


.crs  {overflow: hidden;}
@media print, screen and (min-width: 1000px) {
.crs  {width: 45%; margin: 0; float: left;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.crs  {width: 45%; margin: 0; float: left;}
}
@media only screen and (max-width: 700px) {
.crs  {width: 100%; margin: 0 0 30px; float: none;}
}
																	
@media print, screen and (min-width: 1000px) {
.mov {width: 50%; margin: 0; float: right;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.mov {width: 50%; margin: 0; float: right;}
}
@media only screen and (max-width: 700px) {
.mov {width: 100%; margin: 0 0 30px; float: none;}
}
.crs-box  {width: 45%; margin: 0 5% 0 0; float: left;}
.whbox  {overflow: hidden; padding: 4% 7%; margin: 0 0 53px 0; background-color: rgba(255,255,255,0.3);}
					
.comp {overflow: hidden; padding: 10px 10px; border-bottom: 1px solid #bababa; font-size: 115%; color: #000000;}

@media print, screen and (min-width: 701px) {
.comp {margin: 0 auto 20px; width: 100%;}
@media only screen and (max-width: 700px) {
.comp {margin: 0 5% 20px;  width: 90%;}
}

@media print, screen and (min-width: 1000px) {
.com-l {float: left; width: 15%; border-right: 1px solid #bababa; text-align: center;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.com-l {float: left; width: 20%; border-right: 1px solid #bababa; text-align: center;}
}
@media only screen and (max-width: 700px) {
.com-l {float: none; width: 100%; border-right: none; text-align: left;}
}
@media print, screen and (min-width: 1000px) {
.com-r {float: right; width: 83%;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.com-r {float: right; width: 78%;}
}
@media only screen and (max-width: 700px) {
.com-r {float: none; width: 100%;}
}


/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
	opacity: 1;
}

.wrap a{
  display: inline-block;
  width: 45%;
}
/* ブログ埋め込み時のため、表示の調節 */
@media (max-width: 460px) {
  .lum-lightbox-inner img {
      max-width: 100%;
      max-height: 100%;
  }
}

.last {position: absolute; z-index: 5; background-color: #ffffff;}

.shad05 {background-color: #000000;
    width: 100%;
    position: relative;
    overflow: hidden;
    }

.shad05 {min-width: 100%;
        float: none;
        box-sizing: border-box; }
.shad05:after {
      content: "";
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      background-color: #1347b5; }
.shad05.animate:after {
    animation: secondaryImageOverlayIn 1.0s 1.9s cubic-bezier(0.77, 0, 0.175, 1), secondaryImageOverlayOut 1.5s 1.6s cubic-bezier(0.77, 0, 0.175, 1);
    animation-fill-mode: both; }
.shad05.animate .last {
    /*隠しておくソース*/
    animation: fadeIn 2.1s 2.2s;
    animation-fill-mode: both; }


.fst {width: 100%; height: 100vh!important; z-index: 10; background-color: #1347b5; animation: fsta 4.0s; position: relative;}
@keyframes fsta {
0% {
    opacity: 0/* 透明 */
    transform: translateX(100%);
  }
70% {
    opacity: 1/* 透明 */
    transform: translateX(0);
  }
100% {
    opacity: 0;/* 不透明 */
    transform: translateX(-100%);
  }
}

.footer-p {overflow: hidden; padding: 5%;}
.footer-l {overflow:hidden;}
@media print, screen and (min-width: 1000px) {
.footer-l {width: 40%; float: left;}
}
@media print, screen and (min-width: 801px) and (max-width: 1099px) {
.footer-l {width: 30%; float: none; margin: 0 auto 30px;}
}
@media print, screen and (max-width: 800px) {
.footer-l {width: 100%; float: none; margin: 0 0 30px;}
}
.footer-l-l {text-align: center; font-size:90%;}
@media print, screen and (min-width: 1000px) {
.footer-l-l {width: 30%; float: left; margin: 0;}
}
@media print, screen and (min-width: 801px) and (max-width: 1099px) {
.footer-l-l {width: 30%; float: none; margin: 0 auto 30px;}
}
@media print, screen and (max-width: 800px) {
.footer-l-l {width: 30%; float: none; margin: 0 auto 30px;}
}

@media print, screen and (min-width: 1000px) {
.footer-l-l-logo {width: 20%; float: left; margin: 0;}
}
@media print, screen and (min-width: 801px) and (max-width: 1099px) {
.footer-l-l-logo {width: 10%; float: left; margin: 0;}
}
@media print, screen and (max-width: 800px) {
.footer-l-l-logo {width: 15%; float: none; margin: 0 auto 10px;}
}

@media print, screen and (min-width: 1000px) {
.footer-l-l-txt {width: 70%; float: right; margin: 5px 0 0 0; text-align:left;}
}
@media print, screen and (min-width: 801px) and (max-width: 1099px) {
.footer-l-l-txt {width: 80%; float: right; margin: 5px 0 0 0; text-align:left;}
}
@media print, screen and (max-width: 800px) {
.footer-l-l-txt {width: 100%; float: none; margin: 0 auto; text-align:center;}
}
@media print, screen and (min-width: 1000px) {
.footer-r {width: 57%; float: right; margin: 0;}
}
@media print, screen and (min-width: 801px) and (max-width: 1099px) {
.footer-r {width: 90%; float: none; margin: 0;}
}
@media print, screen and (max-width: 800px) {
.footer-r {width: 100%; float: none; margin: 0 auto 30px;}
}

@media print, screen and (min-width: 1000px) {
.footer-r-tel {width: 45%; float: left; margin: 0;}
}
@media print, screen and (min-width: 801px) and (max-width: 1099px) {
.footer-r-tel {width: 45%; float: left; margin: 0;}
}
@media print, screen and (max-width: 800px) {
.footer-r-tel {width: 100%; float: none; margin: 0 0 30px 0;}
}

@media print, screen and (min-width: 1000px) {
.footer-r-mail {width: 45%; float: right; margin: 20px 0 0;}
}
@media print, screen and (min-width: 801px) and (max-width: 1099px) {
.footer-r-mail {width: 45%; float: right; margin: 20px 0 0;}
}
@media print, screen and (max-width: 800px) {
.footer-r-mail {width: 100%; float: none; margin: 0 0 30px;}
}


ul.ftmn2 {margin: 0 0 60px 0;padding:  0 0 40px 0;overflow: hidden; font-size: 80%; display: table; width: 100%; table-layout: fixed; border-bottom: 1px solid rgba(255,255,255,0.1);}
ul.ftmn2 li {box-sizing: border-box; text-align: center;
	margin: 0; display: table-cell;
	padding: 0;
	list-style-type: none;
}
ul.ftmn2 li {box-sizing: border-box; text-align: center;}
ul.ftmn2 li a{color:#ffffff!important;}

.index-title {line-height: 1.3; font-family: 'Work Sans', sans-serif; font-weight: 700; letter-spacing: 0.05em; color: #1347b5; z-index: 5;}
@media print, screen and (min-width: 1000px) {
.index-title {font-size: 350%; margin:0 0 50px;}
}
@media only screen and (min-width: 701px) and (max-width: 999px) {
.index-title {font-size: 330%; margin:0 0 50px;}
}
@media only screen and (max-width: 700px) {
.index-title {font-size: 280%; margin:0 0 40px;}
}

.customer-obi {margin: 0 0 30px 0; font-size: 120%; font-weight: 700; color: #fff; background-color: #1347b5; padding: 4px 15px; font-weight: 700;}

.menu-position {
    position: absolute; font-size: 90%; font-weight: 400; font-family: 'Noto Sans JP', sans-serif;
    top: 18px;
}
@media print, screen and (min-width: 1350px) {
.menu-position{width:64%; left: 300px;}
}
@media only screen and (max-width: 1349px) {
.menu-position{width:60%; left: 300px;}
}



.menu2 {
    position: relative;
    width: 100%;
    height: 50px;
    margin: 0 auto;
}

.menu2 > li {text-align: center;
    float: left;
    width: 16%; 
    height: 50px;
    line-height: 50px;
    background: rgb(255, 255, 255);
}

.menu2 > li a {
    display: block;
    color: #000000;
}

.menu2 > li a:hover {
    color: #999;
}

ul.menu__second-level {list-style-type: none;
    visibility: hidden;
    opacity: 0;
    z-index: 1;
}

ul.menu__third-level {list-style-type: none;
    visibility: hidden;
    opacity: 0;
}

ul.menu__fourth-level {
    visibility: hidden;
    opacity: 0;
}

.menu2 > li:hover {
    background: #ffffff;
    -webkit-transition: all .5s;
    transition: all .5s;
}

.menu__second-level li {
    border-top: 1px solid #111;
}

.menu__third-level li {
    border-top: 1px solid #111;
}

.menu__second-level li a:hover {
    background: #111;
}

.menu__third-level li a:hover {
    background: #2a1f1f;
}

.menu__fourth-level li a:hover {
    background: #1d0f0f;
}

/* 下矢印 */
.init-bottom----:after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 0 0 15px;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* floatクリア */
.menu2:before,
.menu2:after {
    content: " ";
    display: table;
}

.menu2:after {
    clear: both;
}

.menu2 {list-style-type: none; position: relative; z-index: 10;
    *zoom: 1;
}
li.menu__mega ul.menu__second-level {
    position: absolute;
    top: 40px;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 0;
    background: #ffffff;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

li.menu__mega:hover ul.menu__second-level {
    top: 50px;
    visibility: visible;
    opacity: 1;
}

li.menu__mega ul.menu__second-level > li {
    float: left;
    width: calc(100% / 3);
    border: none;
}

li.menu__mega ul.menu__second-level > li:nth-child(3n+2) {
    margin: 0;
}

.w100p {
   position: relative;
 width: 100%;
}
@media print, screen and (min-width: 1000px) {.w100p {padding: 0 0 3% 0;}}
@media only screen and (min-width: 701px) and (max-width: 999px) {.w100p {padding: 0 0 3% 0;}}
@media only screen and (max-width: 700px) {.w100p {padding: 0 0 3% 0;}}

.wide-map {overflow: hidden;width: 300px; margin: 0 auto;}