@charset "utf-8";

/* reset
----------------------------------------------------------*/
*, *:before, *:after { box-sizing:border-box; }

html, body, h1, h2, h3, h4, h5, h6,
ul, ol, li, dl, dt, dd,
figure, figcaption, form, textarea,
blockquote, fieldset, legend {
  margin: 0;
  padding: 0;
  border: none;
}

h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal; }

article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section, summary { display: block; }

table { border-collapse:collapse; border-spacing:0; }

img { max-width:100%; height:auto; font-size:0; line-height:0; vertical-align:bottom; border-width:0; }

ul , ol { padding:0; list-style:none; }

input , button , textarea , select { font:inherit; }
button { margin:0; padding:0; border:none; border-radius:0; background:none; -webkit-appearance:none; cursor:pointer; }
button:focus { outline:none; }

input[type="submit"],
input[type="button"],
input[type="reset"] {
  cursor: pointer;
}

/* base
----------------------------------------------------------*/
html, body { height: 100%; }

body {
  font-family:
  'Josefin Sans', "游ゴシック Bold", "Yu Gothic Bold", YuGothic Bold, "メイリオ", "Meiryo","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, sans-serif;
  font-size: 14px;
  font-weight:500;
  color: #fff;
  line-height: 1.8;
  letter-spacing: .01em;
  background: #222;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-font-variant-ligatures: none;
  font-variant-ligatures: none;
}

.font-en { font-family: 'Josefin Sans', sans-serif; }

a { color: #fff; }
a:not(.fade), .anime { -webkit-transition:all .5s; transition:all .5s; }
a:hover, a:focus { text-decoration: none; }

.clearfix:after { content:""; display:block; clear:both; }

.fl-l { float:left; }
.fl-r { float:right; }

.txt-l { text-align:left; }
.txt-c { text-align:center; }
.txt-r { text-align:right; }
.txt-j { text-align:justify; }

.va-top  { vertical-align:top; }
.va-mid  { vertical-align:middle; }
.va-btm  { vertical-align:bottom; }
.va-base { vertical-align:baseline; }

.fw-mid { font-weight:500; }
.fw-b   { font-weight:bold; }

.fs-italic { font-style:italic; }
.marker { background:linear-gradient(transparent 50%, #fff284 0%); }
.indent {padding-left:1em;  text-indent:-1em; }

.wide   { width: 100%; }

.pos-r { position:relative; }

.iblock { display:inline-block; }
.block  { display:block; }
.hide   { display:none; }

.li-disc, .li-decimal { padding-left:1.5em; }
.li-disc { list-style:disc; }
.li-decimal { list-style:decimal; }

.flex         { display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; }
.flex-between { justify-content:space-between; -webkit-justify-content:space-between; }
.flex-center  { justify-content:center; -webkit-justify-content:center; }
.flex-align-center { -webkit-box-align:center; -webkit-align-items:center; align-items:center; }

.shadow { box-shadow:0 0 3px rgba(0,0,0,0.3); }

.bg-gray { background:#eee; }
.color-blu { color:#4bb2d0; }
.color-grn { color:#79b492; }
.color-pnk { color:#d60d89; }
.txt-highlight { color:#4bb2d0; text-decoration:underline; }

.is-fixed { position:fixed; top:0; right:0; bottom:0; left:0; }


.link-disabled { cursor:default; pointer-events:none; opacity:0.6; }

/* 1025px 以上  */
@media screen and (min-width: 1025px) {
  /* hover scale */
  a .hv-scale { -webkit-transition:all .5s ease-out; transition:all .5s ease-out; }
  a:hover .hv-scale  { -webkit-transform: scale(1.05); transform: scale(1.05); }
}


/* layout ------ */
#wrapper { position:relative; overflow:hidden; min-height:100%; padding:28px 100px 150px 58px; }

/* 960x 以上 (PC) */
@media screen and (min-width: 960px) {
  .inner-wide { width:87%; max-width:1220px; margin:0 auto;  }
  .inner { width:95%; max-width:1000px; margin:0 auto; }
  .narrow { max-width:927px; margin:0 auto; }

  .pc-none { display: none; }
  .sp-only { display: none; }
}

/* 959x 以下 (タブレット以下) */
@media screen and (max-width: 959px) {
  .inner-wide, .inner { width:auto; margin:0 20px; }
  .inner-wide .inner { width:auto; margin:0; }
  .pc-only { display:none; }
}

/* 599x 以下 (スマホ)  */
@media screen and (max-width: 599px) {
  body { font-size: 15px; }

  .inner-wide, .inner { width:auto; margin:0 15px; }
  .inner-wide .inner { width:auto; margin:0; }

  .sp-none { display:none; }
}

/* header
----------------------------------------------------------*/
.g-header { position:relative; z-index:99; }
  .g-header-box { position:relative; }

.g-nav-list { display:-webkit-box; display:flex; flex-wrap:wrap; }
  .g-nav-list a { position:relative;  display:block; height:100%; text-decoration:none; border:1px solid #fff; }
  .g-nav-list a:hover, .g-nav-list a.current { background:rgba(255,255,255,0.5); border-color:transparent; }
  .g-nav-list a span { position:absolute; display:block; line-height:1.1; }
    .g-nav-list .about,
    .g-nav-list .project,
    .g-nav-list .blog { width:19.571em; }

    .g-nav-list .works,
    .g-nav-list .contact { width:22.326em; }

    .g-nav-list .about  { height:5.143em; }
    .g-nav-list .works { height:11.806em; margin:2.643em 0 0 -1px; }
    .g-nav-list .project { height:5.156em; }
    .g-nav-list .contact { height:5.156em; margin:5.02em 0 0 -1px; }
    .g-nav-list .blog { height:14.929em; margin-top:-2.071em; }

      .g-nav-list .works a { width:11.196em; }
      .g-nav-list .project a { width:14.319em; margin:-1px 0 0 auto; }
      .g-nav-list .blog a { width:6.857em; margin:-1px 0 0 auto; }
      .g-nav-list .contact a { margin-top:-1px; }

      .g-nav-list .about span { top:0; left:0; font-size:2.443em; }
      .g-nav-list .works span { top:0; right:0; bottom:0; left:0; height:1em; font-size:3.257em; margin:auto; text-align:center; }
      .g-nav-list .project span { top:0; right:-2px; font-size:3.393em; line-height:.95; }
      .g-nav-list .contact span { top:0; right:0; bottom:0; left:0; height:1.368em; margin:auto; font-size:1.357em; text-align:center; }
      .g-nav-list .contact span:before { content:""; display:inline-block;
       width:1.368em; height:1.368em; margin-right:.632em; vertical-align:bottom;
       background:url(../img/common/ico_contact.svg) no-repeat center / 100%; }
      .g-nav-list .blog span { bottom:.974em; right:-.095em; font-size:2.714em; }

  .g-header.for-top .g-header-box { width:727px; }
  .g-header.for-top .sitename { position:absolute; top:0; right:0; }
  .g-header.for-top .g-nav { padding-top:109px; }

  .g-header.for-second { position:fixed; top:28px; left:58px; z-index:999; }
  .g-header.for-second .g-header-box { width:400px; }
  .g-header.for-second .sitename { width:192px; margin-bottom:26px; }
  .g-header.for-second .g-nav-list { font-size:.67em; }


  .g-header.for-second .g-nav-list .contact { margin-top:5.05em; }
  .g-header.for-second .g-nav-list .blog span { right:-.11em }

    _:lang(x)::-moz-placeholder, .g-nav-list .contact {
    margin-top:5.09em;
  }
  _:-ms-lang(x)::-ms-backdrop, .g-nav-list .contact {
    margin-top:5.09em;
  }
  _::-webkit-full-page-media, _:future, :root .g-nav-list .contact {
      margin-top:5.07em;
    }

  @supports (-ms-ime-align: auto) {
    .g-nav-list .contact {
      margin-top:5.08em;
    }
  }

/* side */
.g-side { position:fixed; top:0; right:0; padding:20px 14px; z-index:9999; }

  /* tel-btn */
  .tel-btn { position:relative; z-index:1;
   -webkit-transform:translateX(8.6em); transform:translateX(8.6em);
   -webkit-transition:all .5s ease-out; transition:all .5s ease-out; }
  .tel-btn a { display:block; height:30px; margin:15px 0 0 auto;
   font-size:1.4em; text-decoration:none; color:transparent;}
  .tel-btn a:before { content:""; display:inline-block; width:30px; height:30px; margin-right:.2em; vertical-align:top; background:url(../img/common/ico_tel.svg) no-repeat center / 15px; }

  /* menu-btn */
  .menu-btn { position:relative; display:block; z-index:1; width:38px; height:20px; margin-left:auto; }
  .menu-btn, .menu-btn span { display:block; -webkit-transition:all .5s; transition:all .5s; }

  .menu-btn span { position:absolute; right:0; width:100%; height:2px; background-color:#fff; }
  .menu-btn span:nth-of-type(1) { top: 0; }
  .menu-btn span:nth-of-type(2) { top: 9px; width:25px; }
  .menu-btn span:nth-of-type(3) { bottom: 0; width:30px; }
  .menu-btn.is-open span:nth-of-type(1) {
    width:35px;
    -webkit-transform: translateY(9px) rotate(-35deg);
    transform: translateY(9px) rotate(-35deg);
  }
  .menu-btn.is-open span:nth-of-type(2) {
    opacity: 0;
  }
  .menu-btn.is-open span:nth-of-type(3) {
    width:35px;
    -webkit-transform: translateY(-9px) rotate(35deg);
    transform: translateY(-9px) rotate(35deg);
  }

  /* sidenav */
  .g-sidenav { position:fixed; top:0; right:0; left:0; display:none; overflow-x:auto; width:100%; height:100vh; padding:110px 25px 80px; background:#222; -webkit-overflow-scrolling:touch;
     }
  .g-sidenav:after {
    content:""; position:absolute; top:0; left:0; right:0; bottom:0; z-index:-1;opacity:0;
    background:#466d36;
    background: -webkit-linear-gradient(45deg, #8b8088, #466d36);
    background: linear-gradient(45deg, #8b8088, #466d36);
    -webkit-transition:opacity .5s; transition:opacity .5s;
  }
  .g-sidenav.is-hover:after { opacity:1; }
  .g-sidenav.is-hover li a { opacity:.6; }
  .g-sidenav.is-hover li a.is-hover { opacity:1; -webkit-transform:translateX(-.3em); transform:translateX(-.3em); }

  .g-sidenav-wrap { display:-webkit-box; display:flex;
   -webkit-box-pack:center; justify-content:center;
   -webkit-box-align:center; align-items:center;
   height:100%; }
  .g-sidenav-list { min-width:40%; }
  .g-sidenav-list li { margin-bottom:1.2em; opacity:0;
   -webkit-transition:all .5s ease-out; transition:all .5s ease-out;
   -webkit-transform:translateY(-1.2em); transform:translateY(-1.2em);  }
  .g-sidenav-list a { display:block; line-height:1.4; text-decoration:none; font-size:2.8em; }

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

/* main */
#main { position:relative; z-index:10; margin:0 0 0 394px; padding:30px; }
.main-inner { max-width:1000px; margin:0 auto; }

/* 1025px 以上(PC) */
@media screen and (min-width: 1025px) {
  .tel-btn:hover { -webkit-transform:translateX(0); transform:translateX(0); }
  .tel-btn:hover a { color:#fff; }

}

/* 1199px 以下 */
@media screen and (max-width: 1199px) {
  .g-header.for-second .g-header-box { width:325px; }
  .g-header.for-second .sitename { width:160px; }
  .g-header.for-second .g-nav-list { font-size:.55em }

  #main { margin-left:325px }
}

/* 1024px 以下(PC・タブレット横) */
@media screen and (max-width: 1024px) {
  .g-header.for-top .sitename { width:240px; }
  .g-header.for-top .g-nav { padding-top:90px; }
  .g-header.for-top .g-nav-list { font-size:.7em; }
  .g-header.for-top .g-header-box { width:540px; }

  .g-header.for-second { top:10px; }
  .g-header.for-second .g-header-box { width:auto; }
  .g-header.for-second .sitename { width:160px; margin-bottom:0; }
  .g-header.for-second .g-nav { display:none; }

  #main { margin:0; padding:150px 0 0; }

}

/* 959px 以下 (タブレット縦以下) */
@media screen and (max-width: 959px) {
  #wrapper { padding:0 30px 150px; }
  .g-header.for-top .g-header-box { padding-top:50px; }
  .g-header.for-top .sitename { position:static; }
  .g-header.for-top .g-nav { margin-top:30px; padding-top:0; }

  .g-header.for-second { left:30px; }
}

/* 599px 以下 (スマホ)  */
@media screen and (max-width: 599px) {
  #wrapper { padding:0 20px 150px; }
  .g-header.for-top .sitename { width:192px; }
  .g-header.for-top .g-header-box { width:325px; padding:80px 15px 0; }
  .g-header.for-top .g-nav-list { font-size:.46em; }

  .g-header.for-second .sitename { width:110px; top:5px; }
  .g-header.for-second { left:20px; }


  .g-sidenav-list { min-width:80%; }
  .g-sidenav-list a { font-size:2em; }

  #main { padding-top:120px; }
}

/* 349px 以下 (スマホ)  */
@media screen and (max-width: 349px) {
  .g-header.for-top .sitename { width:140px; }
  .g-header.for-top .g-header-box { width:auto; }
  .g-header.for-top .g-nav-list { font-size:.39em; }

}


/* footer
----------------------------------------------------------*/
.g-footer { position:absolute; bottom:0; left:0; right:0; }
.g-copyright { padding:16px; text-align:center; font-size:13px; }
.g-copyright .since { font-size:16px; }
.g-copyright .copyright { font-size:12px; }
#pagetop { position:fixed; bottom:30px; right:30px; }