@charset "utf-8";
/* CSS Document */


/*PC*/
@media print, screen and (min-width: 600px) {

.ls01{letter-spacing:-2px !important;}

.sp { display: none;}
.pc { display: block;}

.ovf { overflow: hidden;}

.w100 { width: 100%; margin: auto;}
.w860 { max-width: 860px; margin: auto;}
.w900 { max-width: 900px; margin: auto;}
.w1030 { max-width: 1030px; margin: auto;}
.w1080 { max-width: 1080px; margin: auto;}
.w1200 { max-width: 1200px; margin: auto;}


/*----------------------------------------------------

 btn

----------------------------------------------------*/

.btn a,
.btn a:visited { display: inline-block; padding: 5px 30px; border-radius: 60px; border: solid 1px #003894; text-decoration: none; color: #003894;}
.btn a:hover { background: #003894; border: solid 1px #003894; color: #FFF;}
.btn2 a,
.btn2 a:visited { display: inline-block; padding: 5px 30px; border-radius: 60px; border: solid 1px #FFF; text-decoration: none; color: #FFF;}
.btn2 a:hover { background: #FFF; border: solid 1px #FFF; color: #003894;}
.btn3 a,
.btn3 a:visited { display: inline-block; padding: 5px 30px; border-radius: 60px; border: solid 1px #003894; text-decoration: none; color: #FFF; background: #003894;}
.btn3 a:hover { background: #FFF; border: solid 1px #003894; color: #003894;}
.btn4 a,
.btn4 a:visited { display: inline-block; text-decoration: none;}
/*.btn4 a:hover { background: #FFF; border: solid 1px #003894; color: #003894;}*/


/*----------------------------------------------------

 totop

----------------------------------------------------*/

.totop { position: fixed; bottom: 0px; right: -80px; width: 80px; height: auto; z-index: 500; transform: rotate(90deg);}

.totop a { background: #003894; text-decoration: none; color: #fff; width: 180px; height: 80px; text-align: center; display: block; position: relative; line-height: 80px;}
.totop a small {
  left: 10px;
  -webkit-animation-delay: .2s;
  animation-delay: .2s;
  position: relative;
  display: inline-block;
  vertical-align: top;
  z-index: 10;
}
.totop a:hover { text-decoration: none; background: #999;}

.totop small:before,
.totop small:after,
.totop small span {
  display: block;
  width: 6px;
  height: 100%;
  content: '';
  position: absolute;
  background: 50% 50% no-repeat;
  background-size: contain;
  z-index: 10;
  -webkit-animation-name: opacityFade;
  animation-name: opacityFade;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.totop small:before {
  left: 0;
}

.totop small:after {
  left: 5px;
  -webkit-animation-delay: .1s;
  animation-delay: .1s;
}

.totop small span {
  left: 10px;
  -webkit-animation-delay: .2s;
  animation-delay: .2s;
}

.totop {
  text-align: left;
}

.totop>span {
  margin-right: 20px;
  padding-left: 30px;
}

.totop small:before,
.totop small:after,
.totop small span {
  background-image: url(../images/common/arr_white.png)
}

.totop small:before,
.totop small:after,
.totop small span {
  background-image: url(../images/common/arr_white_back.png);
}

.totop small {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 100%;
  top: 0;
  vertical-align: top;
  margin-left: -20px;
  margin-right: 20px;
}


@-webkit-keyframes opacityFade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: .2;
  }
  100% {
    opacity: 1;
  }
}

@keyframes opacityFade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: .2;
  }
  100% {
    opacity: 1;
  }
}




/*----------------------------------------------------

 header

----------------------------------------------------*/

header { height: 83px;}
header .w1080 {position: relative;}
header h1 { position: absolute; top: 25px; left: 0; width: 278px; height: 22px;}
header .hedR { position: absolute; top: 24px; right: 0;}
header .hedR .comp { display: inline-block; margin-right: 25px; height: 28px;}
header .hedR .comp a { display: block; font-size: 14px; text-decoration: none; color: #000;}
header .hedR .comp a:hover { border-bottom: solid 1px #eb6100;}

header .hedR .cont { display: inline-block; margin-right: 20px;width: 120px; height: 28px; text-align: center; line-height: 28px;}
header .hedR .cont a { display: block; font-size: 14px; height: 26px; border: solid 1px #000; border-radius: 13px; text-decoration: none; color: #000;}
header .hedR .cont a:hover { background: #000; color: #FFF;}

header .hedR .lang { height: 28px; font-size: 12px;}
header .hedR .lang a { margin: 0 5px; text-decoration: none; color: #000;}
header .hedR .lang a:hover { border-bottom: solid 1px #eb6100;}


/*----------------------------------------------------

 nav

----------------------------------------------------*/

/* .navBg { background: #262c34;}
.navBg ul { max-width: 1080px; list-style: none; margin: auto; padding: 15px 0; font-size: 14px;}
.navBg ul li { width: calc(100% / 6 - 1px); border-right: solid 1px #FFF; float: left; box-sizing: border-box;}
.navBg ul li:first-child { width: calc(100% / 6 - 2px); border-left: solid 1px #FFF; box-sizing: border-box;}
.navBg ul li a { color: #FFF; display: block; text-decoration: none; text-align: center; font-weight: bold; padding: 5px 0;}
.navBg ul li a.on,
.navBg ul li a:hover { color: #eb6100;} */
	
	
	
	
/*----------------------------------------------------
 nav　変更
----------------------------------------------------*/

.navBg { background: #262c34;}
.navBg ul { max-width: 1080px; list-style: none; margin: auto; padding: 15px 0; font-size: 13px;}
.navBg ul li { width: calc(100% / 8 - 1px); border-right: solid 1px #FFF; float: left; box-sizing: border-box;}
.navBg ul li:first-child { width: calc(100% / 8 - 2px); border-left: solid 1px #FFF; box-sizing: border-box;}
.navBg ul li a { color: #FFF; display: block; text-decoration: none; text-align: center; font-weight: bold; padding: 5px 0;}
.navBg ul li a.on,
.navBg ul li a:hover { color: #eb6100;}	



/*----------------------------------------------------

 footer

----------------------------------------------------*/
footer { background: #eb6100; padding: 20px 0; font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;}
footer .footer01 { color: #FFF; padding: 0 0 12px; position: relative; height: 30px;}
footer .footer01 .hedLogo { width: 206px; fill: #FFF;}
footer .footer01 p { position: absolute; top: 10px; right: 0; font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace; font-size: 14px;}
footer .footer02 { padding: 0 0 12px;}
footer .footer02 ul { list-style: none; display: flex; justify-content: space-between; flex-wrap: wrap;}
footer .footer02 ul li { display: inline-block;}
footer .footer02 ul li a { color: #FFF; font-size: 14px; text-decoration: none; letter-spacing: 0.2em;}
footer .footer02 ul li a:hover { border-bottom: solid 1px #000;}
footer .cp { padding: 12px 0; letter-spacing: 0.2em; text-align: center; font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace; font-size: 9px; color: #FFF;}



/*----------------------------------------------------

 fnvavi

----------------------------------------------------*/
	
	
	
	
	
	
	
	
	
}

/*sp*/
@media only screen and (max-width: 599px) {

.sp { display: block;}
.pc { display: none;}

.w100 { width: 100%; margin: auto;}
.w860 { max-width: 100%; margin: auto;}
.w900 { max-width: 100%; margin: auto;}
.w1030 { max-width: 100%; margin: auto;}
.w1080 { max-width: 100%; margin: auto;}
.w1200 { max-width: 100%; margin: auto;}

.navBg { background: #262c34;}


/*----------------------------------------------------

 btn

----------------------------------------------------*/

.btn a,
.btn a:visited { display: inline-block; padding: 5px 30px; border-radius: 60px; border: solid 1px #003894; text-decoration: none; color: #003894;}
.btn a:hover { background: #003894; border: solid 1px #003894; color: #FFF;}
.btn2 a,
.btn2 a:visited { display: inline-block; padding: 5px 30px; border-radius: 60px; border: solid 1px #FFF; text-decoration: none; color: #FFF;}
.btn2 a:hover { background: #FFF; border: solid 1px #FFF; color: #003894;}
.btn3 a,
.btn3 a:visited { display: inline-block; padding: 5px 30px; border-radius: 60px; border: solid 1px #003894; text-decoration: none; color: #FFF; background: #003894;}
.btn3 a:hover { background: #FFF; border: solid 1px #003894; color: #003894;}


/*----------------------------------------------------

 totop

----------------------------------------------------*/

.totop { position: fixed; bottom: 0px; right: -80px; width: 80px; height: auto; z-index: 500; transform: rotate(90deg);}

.totop a { background: #003894; text-decoration: none; color: #fff; width: 180px; height: 80px; text-align: center; display: block; position: relative; line-height: 80px;}
.totop a small {
  left: 10px;
  -webkit-animation-delay: .2s;
  animation-delay: .2s;
  position: relative;
  display: inline-block;
  vertical-align: top;
  z-index: 10;
}
.totop a:hover { text-decoration: none; background: #999;}

.totop small:before,
.totop small:after,
.totop small span {
  display: block;
  width: 6px;
  height: 100%;
  content: '';
  position: absolute;
  background: 50% 50% no-repeat;
  background-size: contain;
  z-index: 10;
  -webkit-animation-name: opacityFade;
  animation-name: opacityFade;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.totop small:before {
  left: 0;
}

.totop small:after {
  left: 5px;
  -webkit-animation-delay: .1s;
  animation-delay: .1s;
}

.totop small span {
  left: 10px;
  -webkit-animation-delay: .2s;
  animation-delay: .2s;
}

.totop {
  text-align: left;
}

.totop>span {
  margin-right: 20px;
  padding-left: 30px;
}

.totop small:before,
.totop small:after,
.totop small span {
  background-image: url(../images/common/arr_white.png)
}

.totop small:before,
.totop small:after,
.totop small span {
  background-image: url(../images/common/arr_white_back.png);
}

.totop small {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 100%;
  top: 0;
  vertical-align: top;
  margin-left: -20px;
  margin-right: 20px;
}


@-webkit-keyframes opacityFade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: .2;
  }
  100% {
    opacity: 1;
  }
}

@keyframes opacityFade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: .2;
  }
  100% {
    opacity: 1;
  }
}



/*----------------------------------------------------

 header

----------------------------------------------------*/
.headerSp { position: relative;}
.headerSp .logo { max-width: 250px; margin: 5px 100px 0 10px; min-height: 70px; line-height: 70px;}
.headerSp .logo a { width: auto;}


.headerSp .spMenu { position: absolute; top: 10px; right: 10px; background: #333; width: 30px; height: 30px; padding: 8px;}
.headerSp .spMenu .menu-trigger,
.headerSp .spMenu .menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box; }
.headerSp .spMenu .menu-trigger { position: relative; width: 30px; height: 30px; }
.headerSp .spMenu .menu-trigger span { position: absolute; left: 0; width: 100%; height: 2px; background-color: #FFF; border-radius: 4px; }
.headerSp .spMenu .menu-trigger span:nth-of-type(1) { top: 2px; }
.headerSp .spMenu .menu-trigger span:nth-of-type(2) { top: 14px; }
.headerSp .spMenu .menu-trigger span:nth-of-type(3) { bottom: 2px; }

/*.headerSp .spMenu .menu-trigger span:nth-of-type(2) { top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }
.headerSp .spMenu .spMenu .menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(20px) rotate(-315deg) scale(.8); transform: translateY(20px) rotate(-315deg) scale(.8); }
.headerSp .spMenu .menu-trigger.active span:nth-of-type(2) { width: 60px; height: 60px; background-color: transparent; border: 3px solid #fff; border-radius: 50%; }
.headerSp .spMenu .menu-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-20px) rotate(315deg) scale(.8); transform: translateY(-20px) rotate(315deg) scale(.8); }*/





/*----------------------------------------------------

 footer

----------------------------------------------------*/
footer { background: #eb6100; padding: 20px 0; font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;}
footer .footer01 { color: #FFF; padding: 0 0 12px; position: relative; height: 30px; text-align: center;}
footer .footer01 .hedLogo { width: 206px; fill: #FFF;}
footer .footer01 p { display: none;}
footer .footer02 { display: none;}
footer .cp { padding: 12px 0; letter-spacing: 0.2em; text-align: center; font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace; font-size: 9px; color: #FFF;}





/*----------------------------------------------------

 spMenu

----------------------------------------------------*/
.header-inner { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #003894; z-index: 10000;}
.header-inner .spMenuInner { position: fixed; top: 25px; right: 10px;}
.header-inner .spMenuInner p { color: #FFF; font-size: 8px; margin: 30px 0 0; text-align: center;}

.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-trigger {
  position: relative;
  width: 40px;
  height: 34px;
}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #FFF;
  /*border-radius: 4px;*/
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 15px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}


.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(10px) rotate(-45deg);
  transform: translateY(10px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
  left: 50%;
  opacity: 0;
  -webkit-animation: active-menu-bar02 .8s forwards;
  animation: active-menu-bar02 .8s forwards;
}
@-webkit-keyframes active-menu-bar02 {
  100% {
    height: 0;
  }
}
@keyframes active-menu-bar02 {
  100% {
    height: 0;
  }
}
.menu-trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-22px) rotate(45deg);
  transform: translateY(-22px) rotate(45deg);
}

.header-inner .main { margin: 100px auto auto; max-width: 280px;}
.header-inner .main ul { border-top: solid 1px #FFF; list-style: none;}
.header-inner .main ul li { border-bottom: solid 1px #FFF; margin: 0; padding: 10px;}
.header-inner .main ul li a { color: #FFF; text-decoration: none; display: block;}

.header-inner .main ul li a {
    position: relative;
    display: block;
    padding: 0 0 0 16px;
    color: #FFF;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
}
.header-inner .main ul li a::before,
.header-inner .main ul li a::after{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}


.header-inner .main ul li a::before{
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border: 1px solid #FFF;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.header-inner .main ul li a::after{
    right: -1px;
    box-sizing: border-box;
    width: 5px;
    height: 5px;
    border: 5px solid transparent;
    border-left: 5px solid #FFF;
}





/*----------------------------------------------------

 header

----------------------------------------------------*/
.scrolldown { display: none;}





/*----------------------------------------------------

 header

----------------------------------------------------*/


/*----------------------------------------------------

 header

----------------------------------------------------*/
	
	
	
}