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

@font-face
{
font-family: mplus-1c-light;
src: url('http://tat-o.com/cms/wp-content/themes/tato/font/mplus-1c-light.ttf')
     format("truetype");
}

@font-face
{
font-family: mplus-1c-regular;
src: url('http://tat-o.com/cms/wp-content/themes/tato/font/mplus-1c-regular.ttf')
     format("truetype");
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

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

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

q, blockquote {
  quotes: none;
}

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

a img {
  border: none;
}

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

.pageNav li a {
  text-indent: -9999px;
  overflow: hidden;
}

#contents, #js_language, .photoLi, .profLi, .post, #blogMenu .monthLi {
  overflow: hidden;
  *zoom: 1;
}

/* common
-------------------------*/
body {
  font-family: mplus-1c-light, sans-serif;
  -webkit-text-size-adjust: 100%;
  color: #101010;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.en {
  font-family: mplus-1c-regular;
}

a {
  color: #101010;
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
a:hover {
  color: #999;
}

/* #wrapper
-------------------------*/
#wrapper {
  position: relative;
  z-index: 2;
}
#wrapper.open {
  overflow: hidden;
}

/* header
-------------------------*/
header {
  position: relative;
  width: 100%;
  z-index: 5;
}
header.page {
  height: 47px;
  background: #fff;
}

#logo {
  position: fixed;
  top: 32px;
  left: 29px;
  font-size: 18px;
}

#js_menu {
  position: fixed;
  top: 34px;
  right: 32px;
  font-size: 13px;
  cursor: pointer;
}

/* #sideMenu
-------------------------*/
#sideMenu {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 250px;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  padding: 0 30px;
  background: #fff;
  z-index: 1;
}
#sideMenu.top {
  height: 100%;
}
#sideMenu.top .logo {
  position: relative;
  float: right;
  right: 0;
  bottom: -68px;
}
#sideMenu.top #gNav {
  position: relative;
  padding: 66px 0 0;
}
#sideMenu.page {
  position: fixed;
  padding: 80px 0 0;
}
#sideMenu.page #gNav {
  height: 264px;
}
#sideMenu .logo {
  position: fixed;
  bottom: 30px;
  right: 30px;
  font-size: 18px;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo;
  z-index: 1;
  letter-spacing: 2px;
}
#sideMenu .sideInner {
  padding-bottom: 120px;
}

#gNav {
  width: 250px;
}
#gNav li {
  font-size: 13px;
  line-height: 180%;
}

#js_close {
  position: fixed;
  top: 34px;
  right: 30px;
  font-size: 13px;
  cursor: pointer;
}

/* contents
-------------------------*/
#contents {
  position: relative;
  padding: 42px 30px;
  background: #fff;
  z-index: 2;
}

/* breadcrumb
-------------------------*/
#breadcrumb .current {
  cursor: default;
}

/* top
-------------------------*/
#slide {
  position: relative;
  overflow: hidden;
  background-color: #FFF;
  user-select: none;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 -o-user-select: none;
}
#slide .item {
  visibility: hidden;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#slide img {
  position: relative;
  z-index: 2;
}

#slideLoading {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 14px;
  font-size: 12px;
  color: #999;
  text-align: center;
  overflow: hidden;
  z-index: 100;
  display: none;
}

#slideControle {
  position: absolute;
  bottom: 30px;
  left: 30px;
  height: 8px;
  z-index: 5;
}
#slideControle li {
  position: absolute;
  top: 0;
  width: 7px;
  height: 8px;
  cursor: pointer;
}

#copyright {
  position: absolute;
  bottom: 21px;
  right: 30px;
  width: 300px;
  height: 15px;
  text-align: right;
  font-size: 13px;
  line-height: 100%;
  overflow: hidden;
  z-index: 7;  
}

#copyright .text {
  visibility: hidden;
  position: absolute;
  top: 0;
  right: 0;
}

.txtInner {
  padding-top: 116px;
  width: 250px;
  z-index: 1;
  font-size: 11px;
  line-height: 180%;
}
.txtInner .jp p {
  text-align: justify;
}
.txtInner.open {
  position: absolute;
  right: -280px;
}
.txtInner .slideTtl {
  font-family: mplus-1c-regular;
  margin-bottom: 2em;
}
.txtInner .slideDtl {
  margin-bottom: 25px;
}
.txtInner dt {
  font-family: mplus-1c-regular;
}
.txtInner dd {
  margin-bottom: 26px;
}
.txtInner .eng {
  display: none;
}
.txtInner .logo {
  position: absolute;
  bottom: 30px;
  right: 0;
  font-size: 18px;
  font-family: mplus-1c-regular;
  letter-spacing: 2px;
}

#js_prev {
  left: 0;
}

#js_next {
  left: 19px;
}

#js_language {
  position: absolute;
  top: 345px;
  right: 30px;
  font-size: 11px;
  color: #999;
}
#js_language li {
  float: left;
  margin-left: 4px;
  cursor: pointer;
}
#js_language li:first-child {
  margin-left: 0;
}
#js_language .current {
  color: #101010;
}

/* project
-------------------------*/
.fade {
  display: block;
}

.pageTtl {
  margin-bottom: 30px;
  font-size: 18px;
  line-height: 180%;
  letter-spacing: 0.8px;
}

.archiveLi {
  position: absolute;
  right: 30px;
  font-size: 12px;
  line-height: 180%;
}
.archiveLi.type {
  top: 40px;
}
.archiveLi.year {
  top: 63px;
}
.archiveLi li {
  float: left;
  padding-left: 4px;
  background: url(../img/ico_line.png) no-repeat 2px 5px;
}
.archiveLi li:first-child {
  padding-left: 0;
  background: none;
}

.photoLi {
  margin-bottom: 24px;
  padding-top: 20px;
}
.photoLi li {
  margin-bottom: 30px;
  float: left;
  width: 33.3%;
}
.photoLi li img {
  display: block;
  width: 100%;
  height: auto;
}
.photoLi img {
  display: block;
  margin-bottom: 14px;
}
.photoLi .ttl {
  font-size: 11px;
  font-family: mplus-1c-regular;
  line-height: 180%;
}
.photoLi .enTtl {
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 180%;
  min-height: 21px;
}
.photoLi .date {
  font-size: 10px;
  color: #999;
  height: 10px;
  display: block;
}

.pageNav {
  position: relative;
  width: 100%;
  height: 8px;
}
.pageNav li {
  position: absolute;
  top: 0;
}
.pageNav li a {
  display: block;
  width: 7px;
  height: 8px;
}
.pageNav .prev {
  left: 0;
}
.pageNav .prev a {
  background: url(../img/ico_prev.png) no-repeat left top;
}
.pageNav .next {
  right: 0;
}
.pageNav .next a {
  background: url(../img/ico_next.png) no-repeat left top;
}

/* profile
-------------------------*/
.profLi, .pageLi {
  font-size: 12px;
  line-height: 200%;
}
.profLi a, .pageLi a {
  background-color: #EEE;	
}
.profLi a:hover, .pageLi a:hover {
  background-color: transparent;	
}
.profLi li, .pageLi li {
  float: left;
  margin-left: 45px;
}
.profLi li:first-child, .pageLi li:first-child {
  margin-left: 0;
}
.profLi img, .pageLi img {
  display: block;
  margin-bottom: 6px;
}
.profLi .copy, .pageLi .copy {
  font-size: 10px;
  line-height: 200%;
}
.profLi .topBox, .pageLi .topBox {
  margin-bottom: 40px;
  height: 340px;
  width: 350px;
}
.profLi .topBox p.english, .pageLi .topBox p.english {
  margin-top: 25px;
}
.profLi .btmBox, .pageLi .btmBox {
  width: 350px;
}
.profLi .btmBox.en, .pageLi .btmBox.en {
  margin-top: 380px;
}
.profLi .ttl, .pageLi .ttl {
  margin-bottom: 30px;
  font-family: mplus-1c-regular;
}
.profLi dt, .pageLi dt {
  font-family: mplus-1c-regular;
}
.profLi dd + dt, .pageLi dd + dt {
  margin-top: 25px;
}

/* page
-------------------------*/
.pageLi .topBox {
  height: auto;
}

/*  blog
-------------------------*/
#blog {
  width: 750px;
  float: right;
}

#blog .post a {
  color: #999;
}

.post {
  margin-bottom: 30px;
  font-size: 12px;
  line-height: 200%;
}
.post.archive {
  margin-bottom: 70px;
  padding-bottom: 30px;
  border-bottom: 1px solid #EFEFEF;
}

.post p {
  margin-bottom: 20px;
}
.post img {
  margin: 20px 0 10px 0;
  display: block;
  max-width: 750px;
  height: auto;
}
.post img.alignright {
  margin: 20px 0 20px 20px;
  float: right;
}
.post img.aligncenter {
  clear: both;
  margin: 20px auto 20px;
}
.post img.alignleft {
  margin: 20px 20px 20px 0;
  float: left;
}
.post img.alignnone {
  margin: 20px auto 20px;
}
.post .postTtl {
  margin-bottom: 20px;
  font-family: mplus-1c-regular;
}
.post .meta {
  margin-top: 15px;
  font-size: 11px;
  color: #999;
  line-height: 200%;
}
.post .meta a {
  color: #999;
}
.post .fb-like {
  padding-top: 15px;
}

#blogMenu {
  width: 200px;
  float: left;
}
#blogMenu .menuTtl {
  font-size: 12px;
  line-height: 200%;
}
#blogMenu li {
  font-size: 12px;
  line-height: 200%;
}
#blogMenu .catLi {
  margin-bottom: 50px;
}
#blogMenu .catLi .children {
  padding-left: 10px;
  margin: 10px 0;
  font-family: mplus-1c-light;
}
#blogMenu .year {
  clear: both;
  float: left;
  font-size: 12px;
  line-height: 200%;
}
#blogMenu .monthLi {
  padding-left: 4px;
}
#blogMenu .monthLi li {
  float: left;
  margin-left: 4px;
}
#blogMenu .monthLi li:first-child {
  margin-left: 0;
}

.blogNav {
  clear: both;
  position: relative;
  width: 100%;
  height: 11px;
  font-size: 11px;
}
.blogNav li {
  position: absolute;
  top: 0;
}
.blogNav li a {
  display: block;
}
.blogNav .prev {
  right: 0;
}
.blogNav .next {
  left: 0;
}