@charset "utf-8";
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
transition: none !important;
}

/* base ------------------------*/
#wrapper { position:relative; padding-top:80px;
 -webkit-animation: fadeIn 1.5s ease 0s 1 normal; animation: fadeIn 1.5s ease 0s 1 normal; }
#top #wrapper { padding-top:60px; }
.wide_inner, .inner { margin: 0 15px; }

/* common------------------------*/
.bg-gray { background:#e0e6ea; }

/* tel */

/* title */
.secttl { margin-bottom:1.2em; font-size:1.5em; font-weight:bold; letter-spacing:.1em; white-space:nowrap;
  -webkit-writing-mode:vertical-rl; -ms-writing-mode:tb-rl; writing-mode:vertical-rl; }
.secttl span { display:block; margin-top:.2em; margin-right:.3em; font-size:.43em; letter-spacing:.2em; font-weight:normal; }
.center .secttl { display:inline-block; text-align:left; }
.secttl.txt_horizontal { -webkit-writing-mode:horizontal-tb; -ms-writing-mode:lr-tb; writing-mode:horizontal-tb; }

/* button */
.button, .button-arrow { position:relative; z-index:2; display:inline-block; text-align:center;
 font-size:.875em; font-weight:bold; letter-spacing:.2em; color:#00192e; }

.button { min-width:260px; margin-left:1.5em; padding:.8em 1.5em .8em 4em; background:#cad3d9; -webkit-transition:all .5s ease-out; transition:all .5s ease-out;  }
.button:before, .button:after,
.button-arrow:before, .button-arrow:after, .button-arrow span:after   {
 content:""; position:absolute; top:0; bottom:0;
 height:1px; margin:auto 0; background:#506b81;
 -webkit-transition:all .3s ease-out; transition:all .3s ease-out; }
.button:before { left:-1.5em; width:3.75em; }
.button:after { left:2.2em; width:0;
 -webkit-transform:rotate(-140deg) translateX(-1.8em) translateY(1.55em);
 transform:rotate(-140deg) translateX(-1.8em) translateY(1.55em);
 -webkit-transform-origin:left bottom;
 transform-origin:left bottom; }

.button-arrow { position:relative; overflow:hidden; padding:.4em 2em; }
.button-arrow:before { width:100%; top:auto; left:0; right:0; }
.button-arrow:after, .button-arrow span:after { top:auto; right:0; width:.625em;
 -webkit-transform:rotate(-140deg) translateX(-.5em) translateY(.45em);
 transform:rotate(-140deg) translateX(-.5em) translateY(.45em);
 -webkit-transform-origin:left bottom;
 transform-origin:left bottom; }
.button-arrow span:before { content:""; position:absolute; bottom:0; right:100%; z-index:2; width:200%; height:1px;
 background-image:-webkit-linear-gradient(linear, left top, right top, color-stop(0, transparent), color-stop(50%, transparent), color-stop(50%, #fff), to(#fff));
 background-image:linear-gradient(90deg, transparent 0, transparent 50%, #fff 50%, #fff 100%); background-position:top; background-repeat:repeat-x; }
.button-arrow span:after { width:0; z-index:2; height:2px; background:#fff; }

.link-blank { display:inline-block; position:relative; padding-right:1.5em; }
.link-blank:after { content:""; position:absolute; top:.4em; right:0; width:1em; height:1em; background:url(../img/common/ico_window.svg) no-repeat center / 80%; }

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

/* header ------------------------*/
#header { position:fixed; z-index:999; top:0; right:0; left:0; padding:14px 15px; }
#header, #header .sitename { -webkit-transition:all .5s ease-in; transition:all .5s ease-in; }
#header .sitename { position:relative; z-index:999; width:200px; }
#header.scroll { background:#fff; }

/* menuボタン */
.menu-button { position:absolute; top:0; right:0; bottom:0; z-index:9999; margin:0; padding:1.36em 1.5em; background:#e0e6ea; cursor:pointer;
 -webkit-transition:all .5s ease-in; transition:all .5s ease-in;
  border:none; font-family:inherit; font-size:1em; }
.menu-button:hover, .menu-button:focus { background:#cad3d9; }
.menu-button:focus { outline:none; }

.menu-button .label { display:inline-block; margin-right:1em; color:#00192e;
  text-align:center; line-height:1; font-size:10px; letter-spacing:.1em; font-weight:bold; }

.menu-bar { position:relative; width:30px; height:10px; display:inline-block; }
.menu-bar:before, .menu-bar:after { content:""; position:absolute; left:0; display:block; width:100%; height:2px; background:#00192e;
 -webkit-transition:left .2s ease-in, transform .3s ease-in;
 transition:left .2s ease-in, transform .3s ease-in; }

.menu-bar:before { top:0; }
.menu-bar:after { bottom:0; }

.menu-button.is-open .menu-bar:before { -webkit-transform:translateY(4px) rotate(-45deg); transform:translateY(4px) rotate(-45deg); }
.menu-button.is-open .menu-bar:after { width:30px; -webkit-transform:translateY(-4px) rotate(45deg); transform:translateY(-4px) rotate(45deg) }


/* gnav ------------------------*/
#gnav { position:fixed; z-index:1000; top:0; right:0; bottom:0; width:40%; min-width:310px; height:100%;
   overflow-y:auto; padding:120px 35px 40px; background:#cad3d9;
  -webkit-overflow-scrolling:touch;
   -webkit-transition:all .5s ease-out; transition:all .5s ease-out;
  -webkit-transform:translate(100%); transform:translate(100%); }
#gnav.is-open { -webkit-transform:translate(0); transform:translate(0); }

#gnav li { margin-bottom:1em; font-size:1.3em; letter-spacing:.2em;
-webkit-transition:all .5s ease-out; transition:all .5s ease-out;
 -webkit-transform:translateY(-1.2em); transform:translateY(-1.2em);
 opacity:0; }
#gnav li a { display:block; color:#213749; }
#gnav li a:hover { opacity:.7; }
#gnav li span { display:block; font-size:.65em; color:#f0f4f7; letter-spacing:.2em; }

#gnav.is-open li { opacity:1; -webkit-transform:translateY(0); transform:translateY(0); }
#gnav li:nth-child(1) { -webkit-transition-delay:.1s; transition-delay:.1s; }
#gnav li:nth-child(2) { -webkit-transition-delay:.2s; transition-delay:.2s; }
#gnav li:nth-child(3) { -webkit-transition-delay:.3s; transition-delay:.3s; }
#gnav li:nth-child(4) { -webkit-transition-delay:.4s; transition-delay:.4s; }
#gnav li:nth-child(5) { -webkit-transition-delay:.5s; transition-delay:.5s; }

.overlay { position:fixed; z-index:999; top:0; right:0; bottom:0; left:0;display:none;  width:100%; height:100%; background:rgba(0, 0, 0, .5);  }


/* footer------------------------*/
#footer { padding-top:70px; text-align:center; }
.flogo { margin-bottom:45px; padding-right:15px; }
.fnav { padding-bottom:1em; }
.fnav li { margin-right:4%; margin-bottom:10px; font-weight:bold; letter-spacing:.15em; font-size:.938em; }
.fnav li:last-child { margin-right:0; }

#footer .copy-txt { margin:20px 0 1.5em; font-size:11px; font-weight:bold; }

#pagetop {  }
#copyright { font-size:11px; font-weight:bold; }

/* ================================================================
  レスポンシブ
=================================================================== */
/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {
  #top #wrapper { padding-top:70px; }
  #wrapper { padding-top:120px; }

  .inner, .narrow { margin:0 24px; }
  .inner .narrow  { margin:0; }

  .secttl { font-size:1.75em; }

  .menu-button .label { font-size:13px; }

  /* header ------ */
  #header { padding:20px 25px; }
  #header .sitename { width:200px; }

  /* gnav ------ */
  #gnav { padding:160px 50px 50px; }

  /* footer ------ */
  #footer { padding-top:120px; }
  #footer .fnav { padding-bottom:86px; }
  .fnav li { margin-bottom:0; }

  #footer .copy-txt { margin:0 0 2em; font-size:11px; font-weight:bold; }
}

/* 960以上(PC) */
@media screen and (min-width: 960px) {

  /* common ------ */
  #wrapper { padding-top:180px; }
  .inner { width:100%; max-width:1400px; margin:0 auto; }
  .inner.narrow { max-width:1100px; }

  /* button */
  .button { padding:.7em 2.5em .6em 5.5em; }
  .button:hover { color:#00192e; background:#bbc6ce; }
  .button:hover:before { width:6em; }
  .button:hover:after { width:.625em; }

  .button-arrow:hover span:before, a:hover .button-arrow span:before  {
   -webkit-animation:liner 1.5s infinite ease-out;
   animation:liner 1.5s infinite ease-out; }
  .button-arrow:hover span:after, a:hover .button-arrow span:after {
  -webkit-animation:arrow-liner 1.5s infinite ease-out;
     animation:arrow-liner 1.5s infinite ease-out; }

  @-webkit-keyframes liner {
    from { -webkit-transform:translateX(0); }
    to { -webkit-transform:translateX(100%); }
  }
  @keyframes liner {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
  }

  @-webkit-keyframes arrow-liner {
    0%, 15%, 100% { width:0; }
    50%, 90% { width:.625em; }
  }
  @keyframes arrow-liner {
    0%, 15%, 100% { width:0; }
    50%, 90% { width:.625em; }
  }

  /* header ------ */
  #header { position:static; padding:0; }
  #header.scroll { background:none; }
  #header .sitename { position:fixed; top:10px; left:50px; width:250px; }
  #header.scroll .sitename { top:30px; }
  #header.scroll .menu-button { top:10px; }

  .menu-button { position:fixed; top:30px; bottom:auto; padding:1.8em 2.8em; }
  .menu-button:not(.is-open):hover .menu-bar:before { left:3px; }
  .menu-button:not(.is-open):hover .menu-bar:after { left:-3px; }

  /* footer ------ */
  #footer .copy-txt { font-size:12px; }

  #copyright { position:fixed; top:50%; left:50px; z-index:99; padding-top:3%; margin:0; white-space:nowrap;
  -webkit-transform:translateY(-50%); transform:translateY(-50%);
  -webkit-writing-mode:vertical-rl; -ms-writing-mode:tb-rl; writing-mode:vertical-rl; }
}

@media screen and (max-width: 959px) {
}

@media screen and (max-width: 599px) {

}


/* animation */
.effect { opacity:0; -webkit-transition:all .5s ease-in; transition:all .5s ease-in;  }
.effect.active { opacity:1; }