@charset "UTF-8";

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline
}

html {
line-height: 1
}

ol, ul {
list-style: none
}

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

caption, td, th {
text-align: left;
font-weight: 400;
vertical-align: middle
}

blockquote, q {
quotes: none
}

blockquote:after, blockquote:before, q:after, q:before {
content: "";
content: none
}

button{
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
padding: 0;
appearance: none;
}

a img {
border: none
}

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

html {
overflow-y: scroll
}

::selection {
background: #e0e0e0
}

::-moz-selection {
background: #e0e0e0
}

.tac {
text-align: center
}
.alC {
text-align: center!important
}
.alL {
text-align: left!important
}
.alR {
text-align: right!important
}

.forSP {
display: none!important
}
.forPC {
display: block!important
}
@media screen and (max-width: 480px) {
  .forSP {
    display: block!important
  }
  .forPC {
    display: none!important
  }
}

/* public css
----------------------------------------------------------------*/
.clear{clear:both;}
.cf:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;overflow:hidden;}
* html .cf{zoom:1;}

/* 
----------------------------------------------------------------*/
body {
font-weight: 200;
font-size: 18px;
/*letter-spacing: .05em;*/
font-family: 'Crimson Text', "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
color: #000;
width: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
line-height: 1.8;
box-sizing: border-box;
transition: right .3s ease;
position: static;
right: 0;
word-wrap: break-word;
overflow-wrap: break-word;
/*overflow-y: scroll;*/
animation: fadeIn 3s ease 0s 1 normal;
-webkit-animation: fadeIn 3s ease 0s 1 normal;
position: relative;
}
@media only screen and (max-width: 480px) {
  body {
    font-size: 12px;
  }
}

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

a {
color: #000;
text-decoration: none;
-webkit-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
a:visited {
text-decoration: none;
}
a:hover {
color: #000;
text-decoration: none;
opacity: .7
}
a:active {
color: #000;
text-decoration: none
}
a:focus {
color: #000;
outline: 0
}

b {
font-weight: 600
}

h1 {
}
h2 {
}
h3 {
}
@media only screen and (max-width: 640px) {
}

p+p{margin-top:40px}

img{max-width:100%;vertical-align:middle;}

/**/
.inner {
margin: auto;
padding-right: 80px;
padding-left: 80px;
box-sizing: border-box;
}
.inner_800 {
max-width: 800px;
}
.inner_1000 {
max-width: 1000px;
}
@media only screen and (max-width: 767px) {
  .inner {
    padding-right: 16px;
    padding-left: 16px;
  }
}

/* flex */
.flex {
display: flex;
}
.flex-wrap {
display: flex-wrap;
}
.flex-end {
display: flex;
justify-content: flex-end;
}
.flex-between {
display: flex;
justify-content: space-between;
}

/* btn */
.btn {
text-align: center;
}
.btn a {
line-height: 1;
text-align: center;
display: inline-block;
margin: auto;
font-weight: bold;
border-radius: 80px;
color: #fff;
background: #003169;
background: -moz-linear-gradient(left,  #003169 0%, #003c9f 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #003169 0%,#003c9f 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #003169 0%,#003c9f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003169', endColorstr='#003c9f',GradientType=1 ); /* IE6-9 */
}
.btn_big a {
width: 280px;
padding: 24px 0;
font-size: 18px;
}
.btn_small a {
padding: 12px 0;
font-size: 16px;
}

/* header */
header {
position: absolute;
z-index: 1;
top: 0;
padding: 40px;
width: 100%;
box-sizing: border-box;
font-size: 32px;
line-height: 1;
}
header h1 {
position: relative;
z-index: 3
}
header .logo {
}
header ul {
display: flex;
}
header nav .current:after {
border-bottom: 1px solid;
display: block;
content: "";
width: 88%;
margin: 16px auto 0;
}
/**/
.home header {
color: #fff
}
.home header a {
color: #fff
}
@media only screen and (min-width: 768px) {
  header ul li {
    margin-left: 80px
  }
}
@media only screen and (max-width: 767px) {
  header {
    padding: 24px;
    font-size: 28px;
  }
  .open header {
    color: #000
  }
  header h1 {
    z-index: 9999;
  }
  header ul {
    flex-wrap: wrap;
  }
  header ul li {
    display: block;
    width: 100%;
    margin: 24px;
  }
  header ul li a {
  }
  header nav .current:after {
    margin: 8px auto 0
  }
}

/**/
@media only screen and (max-width: 767px) {
  #nav-toggle{position:fixed;top:24px;right:24px;cursor:pointer;}
  #nav-toggle > div{position:relative;width:36px;}
  #nav-toggle span{width:100%;height:1px;left:0;display:block;background:#000;position:absolute;transition:transform 0.6s ease-in-out,top 0.5s ease;}
  .home #nav-toggle span{background:#fff}
  #nav-toggle span:nth-child(1){top:0;}
  #nav-toggle span:nth-child(2){top:14px;}
  #nav-toggle span:nth-child(3){top:28px;}
  #nav-toggle:hover span:nth-child(1){top:4px;}
  #nav-toggle:hover span:nth-child(3){top:23px;}
  .open #nav-toggle span{background:#000;}
  .open #nav-toggle span:nth-child(1){top:15px;transform:rotate(45deg);}
  .open #nav-toggle span:nth-child(2){top:15px;width:0;left:50%;}
  .open #nav-toggle span:nth-child(3){top:15px;transform:rotate(-45deg);}
  /* z-index */
  #nav-toggle{z-index:1000;}
  #container{z-index:900;}
  #gloval-nav {
    background: rgba(255, 255, 255, .8);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 990;
    text-align: center;
    display: flex;
    visibility: hidden;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    opacity: 0;
    transition: opacity 0.6s ease, visibility 0.6s ease;
  }
  .home #gloval-nav {
    color: #fff;
  }
  #gloval-nav a {
    display: inline-block;
    color: #000;
    text-decoration: none;
    padding: 10px 0;
    transition: color 0.6s ease;
  }
  #gloval-nav a:hover{color:#666;}
  #gloval-nav ul{list-style:none;}
  #gloval-nav ul li{opacity:0;transform:translateX(200px);transition:transform 0.6s ease,opacity 0.2s ease;}
  #gloval-nav ul li:nth-child(2){transition-delay:0.15s;}
  #gloval-nav ul li:nth-child(3){transition-delay:0.3s;}
  #gloval-nav ul li:nth-child(4){transition-delay:0.45s;}
  #gloval-nav ul li:nth-child(5){transition-delay:0.6s;}
  #gloval-nav ul li:nth-child(6){transition-delay:0.75s;}
  #gloval-nav ul li:nth-child(7){transition-delay:0.9s;}
  /* open */
  .open{overflow:hidden;}
  .open #gloval-nav{visibility:visible;opacity:1;}
  .open #gloval-nav li{opacity:1;transform:translateX(0);transition:transform 1s ease,opacity 0.9s ease;}
}

/**/
#content{}
.error404 #content{text-align:center}

/* home */
.home {
}
.home .cover {
}

/**/
body:not(.home) main {
padding-top: 240px;
padding-bottom: 240px
}
@media only screen and (max-width: 767px) {
  body:not(.home) main {
    padding-top: 120px;
    padding-bottom: 120px
  }
}

main figure{margin-bottom:24px}

/**/
.works {}
.works article {
margin-bottom: 120px
}
.works article img {
}
.works article h2 {
}
@media only screen and (max-width: 767px) {
  .works article {
    margin-bottom: 62px
  }
}