@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');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap');
html body {font-family: 'Noto Sans JP', sans-serif;}
img {
	border: none;width: 100%;height: auto;
	vertical-align: top;
}
body {background-color: #052236;
    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 {
	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------------------------------*/


.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%;}
.fs270 {font-size:270%;}
.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";}
.ff10 {font-family: 'Libre Baskerville', serif;}


.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.1em;}
.ls02 {letter-spacing: 0.2em;}
.ls0001 {letter-spacing: 0.001em;}
.ls03 {letter-spacing: 0.3em;}

.fcwh {color:#ffffff;}
.fcbk {color:#000000;}
.fcgr {color:#999999;}
.fcgl {color:#6f9b1c;}
.fcrd {color:#ff0000;}
.fcnv{color:#052236;}
.fcbl {color:#2391d3;}
.fcgn {color:#037b00;}
.fcyl {color:#ffff01;}
.fcor {color:#eb954e;}
.fcgr2 {color:afafaf;}

.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 {position: absolute;
	text-align: left;
 }
@media print, screen and (min-width: 1000px) {
h1 {top: -15px; left: 0;}
}
@media only screen and(min-width: 701px) and (max-width: 999px) {
h1 {top: -15px; left: 5px;}
}
@media only screen and (max-width: 700px) {
h1 {top: 0; left: 5px;}
}
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;}
}

header {background-color: #ffffff; overflow: hidden; z-index: 3; margin: 0; padding: 0; position: relative; background-position: right top; background-repeat:no-repeat;}
@media print, screen and (min-width: 1000px) {
header  {height: 260px; width: 100%; left: 0; top:0; background-image: url(images/bg-dgn-top.png);}
}
@media only screen and(min-width: 701px) and (max-width: 999px) {
header  {height: 70px; width: 100%; left: 0; top:0; background-image: url(images/bg-dgn-top.png);}
}
@media only screen and (max-width: 700px) {
header  {height: 70px; width: 100%; left: 0; top:0; background-image: url(images/bg-dgn-top-s.png);}
}

.header-in {position: relative; padding: 0; overflow: hidden; display: block; z-index: 10;}
@media print, screen and (min-width: 1000px) {
.header-in  {width: 1000px; margin: 20px auto 40px; height: 200px;}
}
@media only screen and(min-width: 701px) and (max-width: 999px) {
.header-in  {width: 94%; margin: 10px auto; height: 50px;}
}
@media only screen and (max-width: 700px) {
.header-in  {width: 94%; margin: 10px auto; height: 50px;}
}
.logo {position:absolute; }
@media print, screen and (min-width: 1000px) {
.logo {left: 0; top:45px; width:350px; }
}
@media only screen and(min-width: 701px) and (max-width: 999px) {
.logo {left: 0; top:0; width:350px; }
}
@media only screen and (max-width: 700px) {
.logo {left: 0; top:13px; width:230px; }
}

.tel {position: absolute; font-size:160%; width: 180px; line-height: 1.5; text-align: center;}
.tel p{margin: 0; padding: 0; font-size: 40%; color: #000000;}
@media print, screen and (min-width: 1000px) {
.tel {top: 35px; right: 200px;}
}
@media only screen and(min-width: 701px) and (max-width: 999px) {
.tel {top: 3px; right: 100px;}
}
@media only screen and (max-width: 700px) {
.tel {top: 3px; right: 100px;}
}
.tel-sp {right:65px; top: 3px; position:absolute; font-size:200%; line-height: 1.2;}
				
.recruit-bt {right:400px;; position:absolute; padding:0px 20px; text-align: center; border: 1px solid #999999; font-size:85%; letter-spacing: 0.05em;}
@media print, screen and (min-width: 1000px) {
.recruit-bt {top: 45px}
}
@media only screen and(min-width: 701px) and (max-width: 999px) {
.recruit-bt {top: 0px}
}
@media only screen and (max-width: 700px) {
.recruit-bt {top: 0px; }
}

.privcy-bt {right:50px; top: 5px; position:absolute; text-align: right; font-size:70%; letter-spacing: 0.05em;}
.sns-bt {right:0px; top: 40px; position:absolute; text-align: right; font-size:150%; width:190px;}

ul.pcmenu {display: table; width:60%; position: absolute; left: 0; top: 140px; font-size: 100%;}
ul.pcmenu li {display: table-cell; vertical-align: middle; line-height: 1.3; font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; text-align: center; letter-spacing: 0.01em;}
ul.pcmenu li p{font-size: 70%; margin: 0; padding: 0; color: #666666;}

@media screen and (max-width:999px) {
    /* toggle_menu */
    #btn_nav {
    position: fixed;
    top: 12px;
    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: #FF8000;
    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: #FF8000;
    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(192,192,192,0.6);
    right: -100%;
    z-index: 998;
    transition: .5s;
    }
    #nav_sp nav::after {
    content: "";
    background: rgba(192,192,192,0.9);
    left: -100%;
    z-index: -1;
    transition: .7s;
    }
    #nav_sp nav.active {
    right: 0;
    }
    #nav_sp nav.active::after {
    left: 0;
    }
    #nav_sp ul {margin: 0; padding: 0;}
    #nav_sp ul li:first-child {
    border-top: 1px solid rgba(5,34,54,0.4);
    }
    #nav_sp ul li {list-style-type: none;
    border-bottom: 1px solid rgba(5,34,54,0.4);
    }
    #nav_sp ul li a {
    display: block;
    color: #000;
    padding: 10px;
    }/* toggle_menu end */
}

.shad01 {background-color: #c0c0c0;
    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: #052236; }
.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; }
.shad01.animate .sdc {
    /*隠しておくソース*/
    animation: fadeIn 1.1s 1.2s;
    animation-fill-mode: both; }
.shad01.animate .biznewin-l-in {
    /*隠しておくソース*/
    animation: fadeIn 1.1s 1.2s;
    animation-fill-mode: both; }

.shad01.animate .bizh1 {
    /*隠しておくソース*/
    animation: fadeIn 1.1s 1.2s;
    animation-fill-mode: both; }



						
.shad02 {background-color: #c0c0c0;
    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: #052236; }
.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 .sdc {
    /*隠しておくソース*/
    animation: fadeIn 1.1s 1.2s;
    animation-fill-mode: both; }
.shad02.animate biznewin-l-in {
    /*隠しておくソース*/
    animation: fadeIn 1.1s 1.2s;
animation-fill-mode: both; }
.shad02.animate .bizh2 {
    /*隠しておくソース*/
    animation: fadeIn 1.1s 1.2s;
    animation-fill-mode: both; }


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

.shad03 {min-width: 100%;
        float: none;
        box-sizing: border-box; }
.shad03:after {
      content: "";
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      background-color: #052236; }
.shad03.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; }
.shad03.animate .bizh3 {
    /*隠しておくソース*/
    animation: fadeIn 1.1s 1.2s;
    animation-fill-mode: both; }


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

.shad04 {min-width: 100%;
        float: none;
        box-sizing: border-box; }
.shad04:after {
      content: "";
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      background-color: #052236; }
.shad04.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; }
.shad04.animate .bizh4 {
    /*隠しておくソース*/
    animation: fadeIn 1.1s 1.2s;
    animation-fill-mode: both; }
	
.mainimage-over {overflow: hidden;position: relative; filter: grayscale(0%);}
@media screen and (min-width: 1100px) {
.mainimage-over {height: 100vh;}
}
@media only screen and (min-width: 701px) and (max-width: 1099px) {
.mainimage-over {height: 100vh;}
} 
@media screen and (max-width: 700px) {
.mainimage-over {height: 70vh;}
}
/*はじめにブロックを伸ばすアニメーション*/
@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: 601px) {
.cb-slideshow li:nth-child(1) span {background-image: url(images/slide01.jpg);}
}
@media screen and (max-width: 600px) {
.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: 601px) {
.cb-slideshow li:nth-child(2) span {background-image: url(images/slide02.jpg);}
}
@media screen and (max-width: 600px) {
.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: 601px) {
.cb-slideshow li:nth-child(3) span {background-image: url(images/slide03.jpg);}
}
@media screen and (max-width: 600px) {
.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: 601px) {
.cb-slideshow li:nth-child(4) span {background-image: url(images/slide04.jpg);}
}
@media screen and (max-width: 600px) {
.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: 601px) {
.cb-slideshow li:nth-child(5) span {background-image: url(images/slide05.jpg);}
}
@media screen and (max-width: 600px) {
.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: 601px) {
.cb-slideshow li:nth-child(6) span {background-image: url(images/slide06.jpg);}
}
@media screen and (max-width: 600px) {
.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 }
}
																	
.bgwh {background-color:#ffffff;}

.bgsrp {width: 100%; position: relative; height: 100vh; z-index: 5;
    background: url("images/bgsrp.png");
    animation: move-stripe 1s infinite linear;
}

.cls {color: #000000; letter-spacing: 0.05em; position: absolute; z-index: 10; line-height: 1.5; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; display: flex; align-items: center;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl; text-shadow: 
    white 1px 0px 0px, white -1px 0px 0px,
    white 0px -1px 0px, white 0px 1px 0px,
    white 1px 1px 0px, white -1px 1px 0px,
    white 1px -1px 0px, white -1px -1px 0px,
    white 1px 1px 0px, white -1px 1px 0px,
    white 1px -1px 0px, white -1px -1px 0px,
    white 1px 1px 0px, white -1px 1px 0px,
    white 1px -1px 0px, white -1px -1px 0px,
    white 1px 1px 0px, white -1px 1px 0px,
    white 1px -1px 0px, white -1px -1px 0px;}
@media print, screen and (min-width: 1100px) {
.cls {font-size: 470%; top: 150px; font-weight: 400;}
}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {
.cls {font-size: 340%; top: 50px; font-weight: 400;}
}
@media only screen and (max-width: 700px) {
.cls {font-size: 340%; top: 100px; font-weight: 700;}
}

.cls01 {
    animation-name: clsa01;
    animation-duration: 5.3s;
}
@media print, screen and (min-width: 1100px) {
.cls01 {right: 10%;}
}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {
.cls01 {right: 10%;}
}
@media only screen and (max-width: 700px) {
.cls01 {right: 5%;}
}
@keyframes clsa01 {
0% {
    opacity: 0;
    transform: translateY(-30px);
}
52% {
    opacity: 0;
    transform: translateY(-30px);
}
100% {
    opacity: 1;
    transform: translateY(0);
}
}

.cls02 {
    animation-name: clsa02;
    animation-duration: 5.6s;
}
@media print, screen and (min-width: 1100px) {
.cls02 {right: 17%;}
}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {
.cls02 {right: 17%;}
}
@media only screen and (max-width: 700px) {
.cls02 {right: 26%;}
}
@keyframes clsa02 {
0% {
    opacity: 0;
    transform: translateY(-35px);
}
52% {
    opacity: 0;
    transform: translateY(-35px);
}
100% {
    opacity: 1;
    transform: translateY(0);
}
}

.base {position: relative; overflow: hidden; clear: both;}
.bg-dgn-left {background-repeat:no-repeat; background-position:left bottom;}
@media print, screen and (min-width: 1000px) {
.bg-dgn-left {width: 100%; left: 0; top:0; background-image: url(images/bg-dgn-left.png);}
}
@media only screen and(min-width: 701px) and (max-width: 999px) {
.bg-dgn-left {width: 100%; left: 0; top:0; background-image: url(images/bg-dgn-left.png);}
}
@media only screen and (max-width: 700px) {
.bg-dgn-left {width: 100%; left: 0; top:0; background-image: url(images/bg-dgn-left-s.png);}
}
																	
.wide  {overflow: hidden; clear: both; letter-spacing: 0.08em; position:relative;}
@media print, screen and (min-width: 850px) {
.wide  {width: 850px; margin: 120px auto;}
}
@media only screen and (max-width: 849px) {
.wide  {width: 90%; margin: 100px auto;}
}

.wide-tn  {overflow: hidden; clear: both; letter-spacing: 0.08em; position:relative;}
@media print, screen and (min-width: 850px) {
.wide-tn  {width: 850px; margin: 120px auto 10px;}
}
@media only screen and (max-width: 849px) {
.wide-tn  {width: 90%; margin: 100px auto; 10px;}
}

.wide-bgw  {overflow: hidden; clear: both; letter-spacing: 0.08em; position:relative; background-color:#ffffff;}
@media print, screen and (min-width: 850px) {
.wide-bgw  {width: 800px; margin: 120px auto; padding:10%;}
}
@media only screen and (max-width: 849px) {
.wide-bgw  {width: 90%; margin: 100px auto; padding:5%;}
}

.menu-main {line-height: 2.0; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-weight: 400; margin: 0 auto 40px; letter-spacing: 0.07em; text-align: center;}
@media print, screen and (min-width: 1000px) {
.menu-main {font-size: 250%;}
}
@media only screen and(min-width: 701px) and (max-width: 999px) {
.menu-main {font-size: 230%;}
}
@media only screen and (max-width: 700px) {
.menu-main {font-size: 200%;}
}
.menu-main 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;}

.btwide {margin: 0 auto;}
@media print, screen and (min-width: 500px) {
.btwide {width: 400px;}
}
@media print, screen and (max-width: 499px) {
.btwide {width: 94%;}
}
.btn {
    display: inline-block; text-align: center; letter-spacing: 0;
    text-decoration: none !important;
    width: 100%;
box-sizing: border-box;}
.btn01 { position: relative;
    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;
}
@media print, screen and (min-width: 1000px) {
.btn01 {padding: 10px 0;}
}
@media only screen and(min-width: 701px) and (max-width: 999px) {
.btn01 {padding: 10px 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;
    border: 1px solid #ffffff;
    color: #4575b4 !important;
}

.menu-title {line-height: 1.3; font-family: 'Work Sans', sans-serif; font-weight: 700; margin: 150px auto 140px; letter-spacing: 0.05em;; text-align: center;}
@media print, screen and (min-width: 1000px) {
.menu-title {font-size: 300%;}
}
@media only screen and(min-width: 701px) and (max-width: 999px) {
.menu-title {font-size: 250%;}
}
@media only screen and (max-width: 700px) {
.menu-title {font-size: 200%;}
}
.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;}

.bg-biz {background-repeat: no-repeat; background-position: center top; background-size:cover;}
@media print, screen and (min-width: 850px) {
.bg-biz {background-image: url(images/bg-biz.jpg); }
}
@media only screen and (max-width: 849px) {
.bg-biz {background-image: url(images/bg-biz-s.jpg); }
}

.bg-biz2 {background-repeat: no-repeat; background-position: left top; background-size:cover;}
@media print, screen and (min-width: 700px) {
.bg-biz2 {background-image: url(images/bg-index-mes.jpg); }
}
@media print, screen and (max-width: 699px) {
.bg-biz2 {background-image: url(images/bg-index-mes-s.jpg); }
}

.bg-biz-title {font-family: 'Libre Baskerville', serif; color:#052236; z-index:5; letter-spacing:0.07em;}
@media print, screen and (min-width: 850px) {
.bg-biz-title {position: absolute; right: 5%; top: 50px; width: 90%; text-align: right; font-size:800%; line-height:2; margin:0;}
}
@media only screen and (max-width: 849px) {
.bg-biz-title {position: absolute; right: 5%; width: 100%; text-align: right; font-size: 450%; line-height:1.2; margin:70px 0 0;}
}
.bg-biz-box {overflowt: hidden;}
@media print, screen and (min-width: 850px) {
.bg-biz-box {background-color: rgba(255,255,255,1); float: right; width: 36%; margin: 0; padding: 220px 7% 120px;}
}
@media only screen and (max-width: 849px) {
.bg-biz-box {background-color: rgba(255,255,255,0.7); float: none; width: 84%; margin: 250px auto 120px; padding: 5% 3% 3%;}
}
.flex-container {margin: 0 0 40px;
	overflow: hidden;
}
.flex-container-box {text-align: center;}
@media print, screen and (min-width: 850px) {
.flex-container-box {background-color: #eeeeee; float: left; width: 28.3%; margin: 0; padding: 5% 1.5%; margin: 1%;}
}
@media only screen and (max-width: 849px) {
.flex-container-box {background-color: #eeeeee; float: left; width: 41%; margin: 0; padding: 8% 1.5% 5%; margin: 3%;}
}
.flex-container-box p{width: 40%; margin: 0 auto 20px; padding: 5% 0% 3%;}
													
footer  {
	overflow: hidden;
	clear: both; color:#ffffff!important;}
.bg-dgn-right {background-repeat:no-repeat; background-position:left bottom;}
@media print, screen and (min-width: 1000px) {
.bg-dgn-right {width: 100%; left: 0; top:0; background-image: url(images/bg-dgn-right.png);}
}
@media only screen and(min-width: 701px) and (max-width: 999px) {
.bg-dgn-right {width: 100%; left: 0; top:0; background-image: url(images/bg-dgn-right.png);}
}
@media only screen and (max-width: 700px) {
.bg-dgn-left {width: 100%; left: 0; top:0; background-image: url(images/bg-dgn-right-s.png);}
}
.footer-in {overflow: hidden;}
@media print, screen and (min-width: 1000px) {
.footer-in {width: 1000px;margin: 90px auto 10px;}
}
@media only screen and(min-width: 701px) and (max-width: 999px) {
.footer-in {width: 100%;margin: 80px auto; 10px;}
}
@media only screen and (max-width: 700px) {
.footer-in {width: 100%;margin: 70px auto 0; 10px;}
}																	
.footer-l {overflow:hidden;}
@media print, screen and (min-width: 1000px) {
.footer-l {width: 30%; float: left; margin: 0;}
}
@media print, screen and (min-width: 801px) and (max-width: 1099px) {
.footer-l {width: 35%; float: left; margin: 0;}
}
@media print, screen and (max-width: 800px) {
.footer-l {width: 100%; float: none; margin: 0 0 30px;}
}
.footer-l p{padding:0;}
@media print, screen and (min-width: 1000px) {
.footer-l p{margin: 0;}
}
@media print, screen and (min-width: 801px) and (max-width: 1099px) {
.footer-l p{margin: 0;}
}
@media print, screen and (max-width: 800px) {
.footer-l p{margin: 0 4% 0;}
}
.footer-l a{
    color:#ffffff;
    text-decoration:none;
    }

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

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

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

.copy {font-size: 80%; clear: both;}
@media print, screen and (min-width: 1000px) {
.copy {margin: 0 0 30px; text-align: right;}
}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {
.copy {margin: 0 0 30px; text-align: right;}
}
@media only screen and (max-width: 700px) {
.copy {margin: 0 0 30px; text-align: center;}
}
ul.ftmn {margin: 0;padding: 0;overflow: hidden; font-size: 90%;}
@media print, screen and (min-width: 1000px) {
ul.ftmn {border-top: none;}
}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {
ul.ftmn {border-top: nonef;}
}
@media only screen and (max-width: 700px) {
ul.ftmn {border-top: 1px solid rgba(255,255,255,0.2);}
}
ul.ftmn li {box-sizing: border-box; padding: 0;
	list-style-type: none;
}
@media print, screen and (min-width: 1000px) {
ul.ftmn li {width: auto; float: left; border: none; margin: 0 50px 30px 0; border-right: none; border-bottom: none; text-align: left;}
}
@media only screen and(min-width: 701px) and (max-width: 999px) {
ul.ftmn li {width: auto; float: left; border: none; margin: 0 30px 30px 0; border-right: none; border-bottom: none; text-align: left;}
}
@media only screen and (max-width: 700px) {
ul.ftmn li {width: 50%; float: left; border-right: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid rgba(255,255,255,0.2); text-align: center; padding: 15px 0;}
}
ul.ftmn li:nth-child(even) {border-right: none!important;}
ul.ftmn li a{color: #ffffff!important;}													
																	
																	
.title01{color: #2391d3; font-size: 140%; font-weight: 700; letter-spacing: 0.04em;}

.toptitle  {font-family: 'Noto Serif', serif; font-size: 180%; background-size:cover; background-position:center center;
	overflow: hidden; text-align: center; letter-spacing: 0.1em;
	clear: both; color:#ffffff!important; line-height: 1.5;
}
.toptitle-in {overflow: hidden; text-align: center;}
@media print, screen and (min-width: 1000px) {
.toptitle-in {width: 1000px;margin: 100px auto;}
}
@media only screen and(min-width: 701px) and (max-width: 999px) {
.toptitle-in {width: 96%;margin: 90px auto;}
}
@media only screen and (max-width: 700px) {
.toptitle-in {width: 90%;margin: 45px auto;}
}
.toptitle-in p{padding: 0; margin: 0; font-size: 200%;}
#Message {background-image: url(images/top-message.jpg);}
#Company {background-image: url(images/top-company.jpg);}
#Business {background-image: url(images/top-business.jpg);}
#Contact {background-image: url(images/top-contact.jpg);}
#Privacy {background-image: url(images/top-privacy.jpg);}
#Flow {background-image: url(images/top-flow.jpg);}
#Recruit {background-image: url(images/top-recruit.jpg);}
									
.def {overflow: hidden; clear: both;}
.bg-bk {background-color: #000000;}
.bg-wh {background-color: #ffffff;}
.bg-gr {background-color: #eeeeee;}	
.bg-bl {background-color: #90f6ff;}						
																	
.copyright {position: fixed; bottom: 10px; right: 2%; line-height: 1.1; z-index: 1; font-size: 80%; color: #ffffff;
font-family: 'Noto Sans JP', sans-serif; animation-name: copyrighta;}

.frmt {
min-height: 40px;
border: 1px solid #ccc;
background: #fafafa;
border-radius: 5px;
font-size: 16px;
padding: 5px;
cursor: pointer;
}
.frmta {
min-height: 100px;
border: 1px solid #ccc;
background: #fafafa;
border-radius: 5px;
font-size: 16px;
padding: 5px;
cursor: pointer;
}
@media print, screen and (min-width: 1000px) {
.frm-w {width: 300px!important;}
}
@media print, screen and (min-width: 581px) and (max-width: 999px) {
.frm-w {width: 95%!important;}
}
@media print, screen and (max-width: 580px) {
.frm-w {width: 95%!important;}
}
.sndbtn {width: 250px!important;border-radius: 5px; background: linear-gradient(#eeeeee, #cecece);
font-size: 16px; color: #000000!important; border: 1px solid #f9f9f9;
padding: 20px;background-color: #835929; 
cursor: pointer; border-radius: 10px;}
																	
.com {overflow: hidden;}
.com-color {overflow: hidden; border:1px solid #eeeeee; padding:5%; background-color:#e4f3fb;}
.com-l {overflow: hidden; text-align: center;}
@media print, screen and (min-width: 850px) {
.com-l {width: 40%; float: left; margin: 10px 0; padding: 0;}
}
@media only screen and (max-width: 849px) {
.com-l {width: 100%; float: none; margin: 0 0 20px; padding: 0 0 20px; }
}
.com-r {overflow: hidden;}
@media print, screen and (min-width: 850px) {
.com-r {width: 48%; float: right; margin: 0; padding: 0 0 0 4%; border-left: 1px solid #dddddd;}
}
@media only screen and (max-width: 849px) {
.com-r {width: 100%; float: none; margin: 30px 0; padding: 0 ; border-left: none;}
}
.com-l p {color: #2391d3; font-size: 180%; font-weight: 700; letter-spacing: 0.04em; margin: 0; padding: 0 ;}

.wide-contact  {overflow: hidden; clear: both; letter-spacing: 0.08em;}
@media print, screen and (min-width: 600px) {
.wide-contact  {width: 600px; margin: 120px auto;}
}
@media print, screen and (max-width: 599px) {
.wide-contact  {width: 90%; margin: 100px auto;}
}

.bdb  {display: flex; margin: 0 0 30px 0; vertical-align:middle;}
.bdb-l  {display: flex-box; vertical-align:middle; text-align:center; width:30%; margin:12px 0 0 0; font-size:120%;}

.title02 {font-family: 'Libre Baskerville', serif; letter-spacing:0.07em; font-size:250%;}
.title03 {color: #2391d3; font-size: 240%; font-weight: 700; letter-spacing: 0.07em; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.title04 {letter-spacing:0.07em; font-size:280%; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.title05 {letter-spacing:0.07em; font-size:180%; padding:5px 20px 4px; background-color:#052236; color:#ffffff;}																
																	
.wide-b01  {overflow: hidden; clear: both; letter-spacing: 0.08em; position:relative;}
@media print, screen and (min-width: 850px) {
.wide-b01  {width: 950px; margin: 120px auto;}
}
@media only screen and (max-width: 849px) {
.wide-b01  {width: 90%; margin: 100px auto;}
}

.bg-message {background-image: url(images/bg-message.jpg); background-repeat: repeat-y;}
@media print, screen and (min-width: 850px) {
.bg-message {background-position: 100% top;}
}
@media only screen and (max-width: 849px) {
.bg-message {background-position: 150% top;}
}
.title-posi-ab {letter-spacing:0.07em; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
@media print, screen and (min-width: 850px) {
.title-posi-ab {position: absolute; width: 95%; margin: 0; top: 60px; left: 5%;  z-index: 2; text-align: left; font-size:250%;}
}
@media only screen and (max-width: 849px) {
.title-posi-ab {position: relative; width: 100%; margin: 0 0 40px; text-align: left; font-size:180%; }
}
.img-posi-ab {background-color: #ffffff; overflow: hidden;}
@media print, screen and (min-width: 850px) {
.img-posi-ab {position: absolute; width: 45%; margin: 0;  z-index: 1; top: 200px; left: 1; padding: 0; font-weight: 400;}
}
@media only screen and (max-width: 849px) {
.img-posi-ab {position: relative; width: 60%; margin: 0;  z-index: 1; padding: 60px 20% 30px; font-weight: 700;}
}
.tx-r {background-color: #ffffff; z-index: 0; font-size: 120%; letter-spacing: 0.1em;}
@media print, screen and (min-width: 850px) {
.tx-r {position: relative; float: right; width: 43%; margin: 0; padding: 25% 7% 7% 12%;}
}
@media only screen and (max-width: 849px) {
.tx-r {position: relative; float: none; width: 90%; margin: 0; padding: 5%;}
}

ul.iclist {overflow: hidden; display:flex; flex-wrap: wrap; margin: 0; padding: 0;}
ul.iclist li {list-style-type: none; margin: 0; padding: 0;}
@media print, screen and (min-width: 1000px) {
ul.iclist li {width: 24%;margin: 0 0.5% 2%;}
}
@media only screen and(min-width: 701px) and (max-width: 999px) {
ul.iclist li {width: 30.33%;margin: 0 0.5% 2%;}
}
@media only screen and (max-width: 700px) {
ul.iclist li {width: 49%;margin: 0 0.5% 2%;}
}
.iclistbox {background-color: #ffffff; color:#2391d3;; padding: 15px 1%; font-size:110%; text-align:center; border: 1px solid #052236;}
.iclistbox p{margin: 0 0 0 0; padding: 0; color:#ffffff; font-size:150%;  letter-spacing:0.05em;}
.iclistbox img{margin: 5%;}

.company {overflow: hidden; padding: 0 0 10px; margin: 0 0 10px 0; font-size: 110%; border-bottom: 1px solid #addef8;}
@media print, screen and (min-width: 1000px) {
.company-l {float: left; width: 22%; border-right: 1px solid #addef8; text-align: center;}
}
@media print, screen and (min-width: 601px) and (max-width: 999px) {
.company-l {float: left; width: 25%; border-right: 1px solid #addef8;text-align: center;}
}
@media print, screen and (max-width: 600px) {
.company-l {float: none; width: 100%; border-right: none;text-align: left;}
}
@media print, screen and (min-width: 1000px) {
.company-r {float: right; width: 75%;}
}
@media print, screen and (min-width: 601px) and (max-width: 999px) {
.company-r {float: right; width: 72%;}
}
@media print, screen and (max-width: 600px) {
.company-r {float: none; width: 100%;}
}

.company-w {overflow: hidden; padding: 5px 10px; margin: 0 0 15px 0; font-size: 115%; background-color: #ffffff;}

.iframe-content {
   position: relative;
 width: 100%;
}
@media print, screen and (min-width: 1000px) {
.iframe-content {padding: 50% 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: 100% 0 0 0;}
}
.iframe-content iframe {
    position: absolute;
 top: 0;
 left: 0;
    width: 100%;
    height: 100%;
					}

.flow {overflow: hidden; padding: 4%; margin: 0 0 50px 0; background-color: #ffffff; font-size: 110%; posistion: relative; height: auto;}
.ratio:before {
    content: "";
    display: block;
    padding-top: 100%!important; 
}


@media print, screen and (min-width: 701px) {
.flow-l {float: left; width: 34%; margin: 0;}
}
@media only screen and (max-width: 700px) {
.flow-l {float: none; width: 100%; margin: 0 auto 30px;}
}
.flow-no {posistion: absolute; z-index: 1; font-family: 'Fjalla One', sans-serif; color:rgba(115,115,115,0.2); line-height: 1.1;}
@media print, screen and (min-width: 701px) {
.flow-no {right: 50%; top: 0; font-size: 700%; text-align: left; width: 20%;}
}
@media only screen and (max-width: 700px) {
.flow-no {right: 4%; top: 40px; font-size: 400%; text-align: right; width: 30%;}
}
@media print, screen and (min-width: 701px) {
.flow-r {float: right; width: 57%; margin: 0;}
}
@media only screen and (max-width: 700px) {
.flow-r {float: none; width: 100%; margin: 0;}
}
.flow-r p{margin: 0 0 20px 0; padding: 0; margin: 0; font-size: 150%; color:#2391d3;}

@media print, screen and (min-width: 701px) {
.fsc01 {font-size:120%;;}
}
@media only screen and (max-width: 700px) {
.fsc01 {font-size:135%;;}
}

.btn02 { position: relative;
    background-color: #052236;
    border: 1px solid #052236;
    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) {
.btn02 {padding: 10px 0;}
}
@media only screen and(min-width: 701px) and (max-width: 999px) {
.btn02 {padding: 10px 0;}
}
@media only screen and (max-width: 700px) {
.btn02 {padding: 12px 0;}
}
.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 #052236;
    color: #052236 !important;
}

.newrec {overflow: hidden; margin: 0; padding: 0; background-position: left top; background-repeat:no-repeat;}
@media print, screen and (min-width: 1000px) {
.newrec  {background-image: url(images/newrec.jpg); background-size: cover;}
}
@media only screen and(min-width: 701px) and (max-width: 999px) {
.newrec  {background-image: url(images/newrec.jpg); background-size: cover;}
}
@media only screen and (max-width: 700px) {
.newrec  {background-image: url(images/newrec-s.jpg); background-size: 100% auto;}
}
										
									
.biznew {overflow: hidden; padding: 0; margin: 0; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; background-color: #ffffff;}
.biznew:nth-child(odd) {background-color: #f9f9f9;}
.biznew-bd {border-bottom: 1px solid #eeeeee;}
.biznewin {overflow: hidden;}
@media print, screen and (min-width: 701px) {
.biznewin {width: 900px; margin: 30px auto 20px;}
}
@media only screen and (max-width: 700px) {
.biznewin {width: 92%; margin: 30px auto 20px;}
}

.biznew p{color: #2391d3; padding: 0;}
@media print, screen and (min-width: 701px) {
.biznew p{font-size: 200%; margin: 0 0 30px;}
}
@media only screen and (max-width: 700px) {
.biznewin p{font-size: 180%; margin: 0 0 30px;}
}

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


@media print, screen and (min-width: 701px) {
.bizoxin {overflow: hidden; padding: 10%;}
}
@media only screen and (max-width: 700px) {
.bizoxin {overflow: hidden; padding: 5%;}
}
.dpf {display:flex; justify-content: space-between;}

	
.cssgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 2em;
}
@media print, screen and (min-width: 701px) {
.cssgrid { padding: 4em;
  margin: 4em;}
}
@media only screen and (max-width: 700px) {
.cssgrid { padding: 1em;
  margin: 4em;}
}
}

.cssgrid > div.bizbox {
  background: #fff;
  overflow: auto;
  min-width: 0;
  padding: 1em;
}
.bizoxin p{color: #2391d3; padding: 0 0 0 20px; border-left:7px solid #052236; line-height: 1.3;}
@media print, screen and (min-width: 701px) {
.bizoxin p{font-size: 200%; margin: 0 0 30px;}
}
@media only screen and (max-width: 700px) {
.bizoxin p{font-size: 180%; margin: 0 0 30px;}
}
		
ul.bizlist {padding: 0; margin: 0; font-size:110%; letter-spacing:0.1em;}
ul.bizlist li {padding: 5px 20px; margin:  0 0 10px 0; list-style-type: none; border: 1px solid #cfcfcf;}
	
ul.bizlist2 {padding: 0; margin: 0; font-size:120%;}
ul.bizlist2 li {padding: 5px 20px; margin:  0 0 12px 0; list-style-type: none; border: 1px solid #eeeeee;}		

.t-recruit {color: #ffffff; font-family: 'Fjalla One', sans-serif;}
@media print, screen and (min-width: 701px) {
.t-recruit {font-size: 600%; margin: 70px 10%;}
}
@media only screen and (max-width: 700px) {
.t-recruit {font-size: 450%; margin: 50px 5%;}
}
.obi-rec {color: #ffffff; background-color: #2391d3;}
@media print, screen and (min-width: 701px) {
.obi-rec {font-size: 200%; letter-spacing: 0.1em; padding: 7px 30px; font-weight: 400;}
}
@media only screen and (max-width: 700px) {
.obi-rec {font-size: 160%; letter-spacing: 0.02em; padding: 5px 15px; font-weight: 700;}
}
.bg-whrec {padding: 7%; background-color: rgba(255,255,255,0.7);}

.title-biz {padding: 5px 20px; color: #2391d3; background-color: #eeeeee; border: 1px solid #d9d9d9; margin: 0 5px 10px 0; float: left;}


.sns-icon {display: inline-block; width: 27px; margin-top: 13px;}
.sns-icon-h {display: inline-block; width: 23px; margin-top: 9px;}
.sns-icon-h2 {display: inline-block; width: 23px; margin-top: 12px;}






/* 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%;}
}

.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%;}
}


.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;
}


		
@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%;}
}




/* 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: #052236; }
.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: #052236; 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%);
  }
}