@charset "UTF-8";
/* =====================================================
  1.0 - Foundation
===================================================== */
/*
  Reset
-----------------------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
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-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

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

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

/*
  Base
-----------------------------------------------------*/
*,
:before,
:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  height: 100%;
  color: #263238;
  text-rendering: optimizeLegibility;
  font: 1em/1.5 Quicksand, "Noto Sans Japanese", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, sans-serif;
  -webkit-font-feature-settings: 'pkna';
  font-feature-settings: 'pkna';
  background-color: #eceff1;
  padding-top: 3em;
}

@media screen and (min-width: 768px) {
  body {
    padding-top: 5em;
  }
}

body.is-drawerActive {
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

/* =====================================================
  2.0 - Layout
===================================================== */
/*
  Centering
-----------------------------------------------------*/
.l-container {
  margin: 0 auto;
  max-width: 1200px;
  width: 95%;
}

.l-container.-slim {
  max-width: 960px;
}

/*
  Header
-----------------------------------------------------*/
.l-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

.admin-bar .l-header {
  top: 2.875em;
}

@media screen and (min-width: 768px) {
  .admin-bar .l-header {
    top: 2em;
  }
}

/*
  Contents
-----------------------------------------------------*/
.l-contents {
  clear: both;
  padding: 1.5em 0;
  overflow: hidden;
}

@media screen and (min-width: 768px) {
  .l-contents {
    padding: 3em 0;
  }
}

.l-contents.-themeWhite {
  background-color: #fff;
}

.l-contents__button {
  max-width: 400px;
  margin: 1.5rem auto 0;
}

@media screen and (min-width: 768px) {
  .l-contents__button {
    margin-top: 3rem;
  }
}

/*
  Main
-----------------------------------------------------*/
.l-main {
  clear: both;
}

@media screen and (min-width: 768px) {
  .l-main {
    width: 68.66667%;
    float: left;
  }
  .l-main.-single {
    width: auto;
    float: none;
  }
}

/*
  Sub
-----------------------------------------------------*/
@media screen and (min-width: 768px) {
  .l-sub {
    width: 28%;
    float: right;
  }
}

/*
  Footer
-----------------------------------------------------*/
.l-footer {
  clear: both;
  padding: 1.5em 0;
  background-color: #263238;
  color: #90a4ae;
}

@media screen and (min-width: 768px) {
  .l-footer {
    padding: 3em 0;
  }
}

.l-footer__text {
  margin-top: 1em;
  color: #607d8b;
  font-size: .75em;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .l-footer__text {
    text-align: left;
  }
}

/* =====================================================
  3.0 - Object
===================================================== */
/*
  3.1 - Component
-----------------------------------------------------*/
.c-grid {
  display: table;
  margin: 0;
  padding: 0;
  width: 100%;
  font-size: 0;
}

.c-grid__item {
  display: inline-block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  vertical-align: top;
  text-align: left;
  font-size: medium;
  width: 100%;
}

.c-grid.-gutter {
  display: block;
  margin: -4px;
  width: auto;
}

.c-grid.-gutter > .c-grid__item {
  border: 4px solid transparent;
  background-clip: padding-box;
}

.c-grid__item.-sp1Of12 {
  width: 8.33333%;
}

.c-grid__item.-sp2Of12 {
  width: 16.66667%;
}

.c-grid__item.-sp3Of12 {
  width: 25%;
}

.c-grid__item.-sp4Of12 {
  width: 33.33333%;
}

.c-grid__item.-sp5Of12 {
  width: 41.66667%;
}

.c-grid__item.-sp6Of12 {
  width: 50%;
}

.c-grid__item.-sp7Of12 {
  width: 58.33333%;
}

.c-grid__item.-sp8Of12 {
  width: 66.66667%;
}

.c-grid__item.-sp9Of12 {
  width: 75%;
}

.c-grid__item.-sp10Of12 {
  width: 83.33333%;
}

.c-grid__item.-sp11Of12 {
  width: 91.66667%;
}

.c-grid__item.-sp12Of12 {
  width: 100%;
}

.c-grid__item.-spFive {
  width: 20%;
}

@media screen and (min-width: 768px) {
  .c-grid.-gutter {
    margin: -8px;
  }
  .c-grid.-gutter > .c-grid__item {
    border-width: 8px;
  }
  .c-grid__item.-tab1Of12 {
    width: 8.33333%;
  }
  .c-grid__item.-tab2Of12 {
    width: 16.66667%;
  }
  .c-grid__item.-tab3Of12 {
    width: 25%;
  }
  .c-grid__item.-tab4Of12 {
    width: 33.33333%;
  }
  .c-grid__item.-tab5Of12 {
    width: 41.66667%;
  }
  .c-grid__item.-tab6Of12 {
    width: 50%;
  }
  .c-grid__item.-tab7Of12 {
    width: 58.33333%;
  }
  .c-grid__item.-tab8Of12 {
    width: 66.66667%;
  }
  .c-grid__item.-tab9Of12 {
    width: 75%;
  }
  .c-grid__item.-tab10Of12 {
    width: 83.33333%;
  }
  .c-grid__item.-tab11Of12 {
    width: 91.66667%;
  }
  .c-grid__item.-tab12Of12 {
    width: 100%;
  }
  .c-grid__item.-tabFive {
    width: 20%;
  }
}

@media screen and (min-width: 1024px) {
  .c-grid.-gutter {
    margin: -16px;
  }
  .c-grid.-gutter > .c-grid__item {
    border-width: 16px;
  }
  .c-grid__item.-lap1Of12 {
    width: 8.33333%;
  }
  .c-grid__item.-lap2Of12 {
    width: 16.66667%;
  }
  .c-grid__item.-lap3Of12 {
    width: 25%;
  }
  .c-grid__item.-lap4Of12 {
    width: 33.33333%;
  }
  .c-grid__item.-lap5Of12 {
    width: 41.66667%;
  }
  .c-grid__item.-lap6Of12 {
    width: 50%;
  }
  .c-grid__item.-lap7Of12 {
    width: 58.33333%;
  }
  .c-grid__item.-lap8Of12 {
    width: 66.66667%;
  }
  .c-grid__item.-lap9Of12 {
    width: 75%;
  }
  .c-grid__item.-lap10Of12 {
    width: 83.33333%;
  }
  .c-grid__item.-lap11Of12 {
    width: 91.66667%;
  }
  .c-grid__item.-lap12Of12 {
    width: 100%;
  }
  .c-grid__item.-lapFive {
    width: 20%;
  }
}

@media screen and (min-width: 1280px) {
  .c-grid.-gutter {
    margin: -20px;
  }
  .c-grid.-gutter > .c-grid__item {
    border-width: 20px;
  }
  .c-grid__item.-desk1Of12 {
    width: 8.33333%;
  }
  .c-grid__item.-desk2Of12 {
    width: 16.66667%;
  }
  .c-grid__item.-desk3Of12 {
    width: 25%;
  }
  .c-grid__item.-desk4Of12 {
    width: 33.33333%;
  }
  .c-grid__item.-desk5Of12 {
    width: 41.66667%;
  }
  .c-grid__item.-desk6Of12 {
    width: 50%;
  }
  .c-grid__item.-desk7Of12 {
    width: 58.33333%;
  }
  .c-grid__item.-desk8Of12 {
    width: 66.66667%;
  }
  .c-grid__item.-desk9Of12 {
    width: 75%;
  }
  .c-grid__item.-desk10Of12 {
    width: 83.33333%;
  }
  .c-grid__item.-desk11Of12 {
    width: 91.66667%;
  }
  .c-grid__item.-desk12Of12 {
    width: 100%;
  }
  .c-grid__item.-deskFive {
    width: 20%;
  }
}

/*
  Button
*/
.c-button {
  display: inline-block;
  border: 0;
  text-decoration: none;
  background-color: transparent;
  cursor: pointer;
  color: inherit;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.c-button.-primary {
  width: 100%;
  border: 2px solid #263238;
  padding: 1rem;
  text-align: center;
  border-radius: 1rem;
  font-weight: bold;
}

.c-button.-primary:hover {
  background-color: #263238;
  color: #fff;
}

/*
  Media
*/
.c-media {
  overflow: hidden;
  display: block;
}

.c-media__body {
  float: right;
  width: 65.97938%;
}

.c-media__thumbnail {
  width: 31.95876%;
  float: left;
}

.c-media__thumbnail img {
  width: 100%;
}

/*
  Card
*/
.c-card {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
  padding-top: 70.72136%;
}

.c-card__body {
  padding: 1rem;
}

.c-card__thumbnail {
  position: absolute;
  top: 0;
}

.c-card__thumbnail img {
  width: 100%;
}

/*
  Heading
*/
.c-heading.-primary {
  font-size: 1.25em;
  margin-bottom: 0.8em;
}

.c-heading.-center {
  text-align: center;
}

@media screen and (min-width: 768px) {
  .c-heading.-primary {
    font-size: 2em;
  }
}

/*
  3.2 - Project
-----------------------------------------------------*/
/*
  Header
*/
.p-header {
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
  overflow: hidden;
  background-color: #fff;
}

.p-header__info {
  float: left;
  font-size: 0;
}

.p-header__title {
  display: inline-block;
  font-size: medium;
  vertical-align: middle;
}

.p-header__text {
  display: none;
  font-size: medium;
  margin-left: 1em;
  vertical-align: middle;
}

@media screen and (min-width: 768px) {
  .p-header__text {
    display: inline-block;
  }
}

.p-header__nav {
  float: right;
}

/*
  Global Nav
*/
.p-globalNav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  z-index: 1;
  padding: 3em 0 0;
  width: 100%;
  height: 120%;
  background-color: #263238;
  -webkit-box-shadow: -1px 0 4px rgba(0, 0, 0, 0.16);
          box-shadow: -1px 0 4px rgba(0, 0, 0, 0.16);
  -webkit-transition: -webkit-transform .3s ease-in-out;
  transition: -webkit-transform .3s ease-in-out;
  transition: transform .3s ease-in-out;
  transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
  -webkit-transform: translateX(110%);
      -ms-transform: translateX(110%);
          transform: translateX(110%);
}

.p-globalNav > li {
  display: block;
}

.p-globalNav > li.current-menu-item a {
  background-color: #1a2327;
  color: #fff;
}

.p-globalNav a {
  display: block;
  padding: 1em;
  color: #90a4ae;
  font-weight: bold;
  text-decoration: none;
}

.p-globalNav a:hover {
  background-color: #1a2327;
  color: #fff;
}

.is-drawerActive .p-globalNav {
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}

@media screen and (min-width: 768px) {
  .p-globalNav {
    position: static;
    overflow: hidden;
    padding: 0;
    width: 100%;
    height: auto;
    -webkit-box-shadow: none;
            box-shadow: none;
    background-color: transparent;
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
    font-size: 0;
  }
  .p-globalNav > li {
    display: inline-block;
    font-size: medium;
    vertical-align: middle;
    text-align: center;
  }
  .p-globalNav > li.current-menu-item a {
    background-color: transparent;
    color: #90a4ae;
  }
  .p-globalNav > li.current-menu-item a:after {
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
  }
  .p-globalNav a {
    position: relative;
    display: block;
    padding: 1.75em 1em;
    text-decoration: none;
    overflow: hidden;
    color: inherit;
    font-weight: bold;
  }
  .p-globalNav a:hover {
    background-color: transparent;
    color: #90a4ae;
  }
  .p-globalNav a:after {
    content: '';
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-color: #263238;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    -webkit-transform: translateY(100%);
        -ms-transform: translateY(100%);
            transform: translateY(100%);
  }
  .p-globalNav a:hover:after {
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
  }
}

/*
  Logo
*/
.p-logo,
.custom-logo-link {
  display: inline-block;
  padding: .5em 0;
  text-decoration: none;
  font-weight: bold;
  color: #263238;
  font-size: 1.5em;
  letter-spacing: -.02em;
  line-height: 1;
}

@media screen and (min-width: 768px) {
  .p-logo,
  .custom-logo-link {
    padding: 1em 0;
  }
}

/*
  Hero
*/
.p-hero {
  position: relative;
  height: 200px;
  overflow: hidden;
  background-color: #263238;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .p-hero {
    height: 400px;
  }
}

.p-hero__title {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 1;
  font-size: 1.75rem;
  font-weight: bold;
  color: #fff;
}

@media screen and (min-width: 768px) {
  .p-hero__title {
    font-size: 2.5rem;
  }
}

.p-hero__eyecatch {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.p-hero__eyecatch:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(38, 50, 56, 0.95);
  mix-blend-mode: multiply;
}

.p-hero__eyecatch img {
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 200px;
  max-width: none;
}

@media screen and (min-width: 768px) {
  .p-hero__eyecatch img {
    min-height: 400px;
  }
}

.p-hero.-home {
  height: 100vw;
}

@media screen and (min-width: 768px) {
  .p-hero.-home {
    height: 400px;
  }
}

.p-hero.-home .p-hero__eyecatch img {
  min-height: 100vw;
}

@media screen and (min-width: 768px) {
  .p-hero.-home .p-hero__eyecatch img {
    min-height: 400px;
  }
}

.p-hero.-home .p-hero__title {
  font-size: 2rem;
}

/*
  Project
*/
.p-project {
  background-color: #fff;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
          box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
}

.p-project__title {
  font-weight: bold;
}

.p-project__text {
  font-size: .75rem;
  margin-top: .5rem;
}

.p-project[href]:hover {
  background-color: #f0f0f0;
}

@media screen and (min-width: 768px) {
  .p-project__title {
    font-size: 1.25rem;
  }
  .p-project__text {
    font-size: .875rem;
  }
}

/*
  Article
*/
.p-article {
  padding: .5em;
  background-color: #fff;
}

@media screen and (min-width: 768px) {
  .p-article {
    padding: 1.5em;
  }
}

.p-article__title {
  font-size: 0.875em;
  min-height: 4.5em;
  font-weight: bold;
}

@media screen and (min-width: 768px) {
  .p-article__title {
    font-size: 1.25em;
    min-height: 4.5em;
  }
}

.p-article__title.-detail {
  min-height: auto;
  font-size: 1.5em;
}

@media screen and (min-width: 768px) {
  .p-article__title.-detail {
    font-size: 2.5em;
  }
}

.p-article__title.-center {
  text-align: center;
}

.p-article__title a {
  text-decoration: none;
  color: inherit;
}

.p-article__title a:hover {
  color: #fff;
  background-color: #263238;
}

.p-article__eyecatch {
  margin: .5rem 0;
}

@media screen and (min-width: 768px) {
  .p-article__eyecatch {
    margin: 1.5rem 0;
  }
}

.p-article__eyecatch img {
  width: 100%;
}

.p-article__time {
  font-size: 0.75em;
}

@media screen and (min-width: 768px) {
  .p-article__time {
    font-size: 0.875em;
  }
}

.p-article__metaList {
  margin: 1rem 0;
}

.p-article__metaList dt {
  font-size: .75rem;
  font-weight: bold;
  margin-bottom: .25rem;
}

.p-article__metaList dd + dt {
  margin-top: 1rem;
}

@media screen and (min-width: 768px) {
  .p-article__metaList dt {
    float: left;
    padding: .75rem 0;
    margin: 0 1.5rem 0 0;
    clear: left;
    font-size: .75rem;
    overflow: hidden;
  }
  .p-article__metaList dd {
    padding: .5rem 0;
  }
  .p-article__metaList dd + dt {
    margin-top: 0;
  }
}

.p-article + .p-article {
  border-top: 1px solid #ddd;
}

.p-article__body {
  line-height: 2;
}

.p-article__body h1, .p-article__body h2, .p-article__body h3, .p-article__body h4, .p-article__body h5, .p-article__body h6,
.p-article__body p, .p-article__body blockquote, .p-article__body pre,
.p-article__body ul, .p-article__body ol, .p-article__body table,
.p-article__body figure {
  margin: 1em 0;
}

@media screen and (min-width: 768px) {
  .p-article__body h1, .p-article__body h2, .p-article__body h3, .p-article__body h4, .p-article__body h5, .p-article__body h6,
  .p-article__body p, .p-article__body blockquote, .p-article__body pre,
  .p-article__body ul, .p-article__body ol, .p-article__body table,
  .p-article__body figure {
    margin: 1.5rem 0 1em;
  }
}

.p-article__body h1, .p-article__body h2, .p-article__body h3, .p-article__body h4, .p-article__body h5, .p-article__body h6 {
  font-weight: bold;
}

.p-article__body h1 {
  font-size: 1.5em;
}

@media screen and (min-width: 768px) {
  .p-article__body h1 {
    font-size: 2em;
  }
}

.p-article__body h2 {
  font-size: 1.5em;
  border-top: 1px solid #263238;
  border-bottom: 1px solid #263238;
  padding: .25em 0;
}

@media screen and (min-width: 768px) {
  .p-article__body h2 {
    font-size: 1.75em;
  }
}

.p-article__body h3 {
  font-size: 1.25em;
  padding: .5em 1em;
  background-color: #eee;
}

@media screen and (min-width: 768px) {
  .p-article__body h3 {
    font-size: 1.5em;
  }
}

.p-article__body h4 {
  font-size: 1.125em;
  padding-left: 1em;
  border-left: 0.25rem solid #263238;
}

@media screen and (min-width: 768px) {
  .p-article__body h4 {
    font-size: 1.25em;
  }
}

.p-article__body h5 {
  font-size: 1em;
}

@media screen and (min-width: 768px) {
  .p-article__body h5 {
    font-size: 1.125em;
  }
}

.p-article__body blockquote {
  background-color: #eee;
  padding: .25em 1em;
  border-left: 0.25em solid #263238;
}

.p-article__body blockquote p {
  margin: 1em 0;
}

.p-article__body ul, .p-article__body ol {
  padding-left: 1.25em;
}

.p-article__body ul {
  list-style-type: disc;
}

.p-article__body ol {
  list-style-type: decimal;
}

.p-article__body dl {
  margin: 1.5em 0 0;
  position: relative;
  z-index: 0;
}

.p-article__body dt {
  position: relative;
  font-weight: bold;
  margin: 0 .5em;
  padding: 0 .5em;
  background-color: #fff;
  display: inline-block;
  z-index: 1;
}

.p-article__body dd {
  position: relative;
  top: -1em;
  padding: 2em 1em 1em;
  border: 1px solid #263238;
}

.p-article__footer {
  margin: 2rem 0;
}

@media screen and (min-width: 768px) {
  .p-article__footer {
    margin: 4rem 0;
  }
}

/*
  Author
*/
.p-author {
  margin-top: 1rem;
  border: 1px solid #ddd;
}

.p-author__title {
  background-color: #263238;
  color: #fff;
  display: inline-block;
  padding: .25rem 1rem;
}

.p-author__name {
  padding: 1rem;
}

/*
  Comments
*/
.p-comments {
  margin-top: 1em;
  background-color: #fff;
}

@media screen and (min-width: 768px) {
  .p-comments {
    margin-top: 2em;
  }
}

.p-comments__title {
  padding: .5em;
  font-size: 1.25em;
}

@media screen and (min-width: 768px) {
  .p-comments__title {
    padding: 1.5em;
    font-size: 1.5em;
  }
}

.p-comments__form {
  padding: .5em;
}

@media screen and (min-width: 768px) {
  .p-comments__form {
    padding: 1.5em;
  }
}

.comment + .comment {
  border-top: 1px solid #ddd;
}

.children .comment {
  border-top: 1px dotted #ddd;
}

.comment .children {
  padding-left: 3em;
}

.comment .reply {
  text-align: right;
}

.comment-body {
  overflow: hidden;
  padding: .5em;
}

@media screen and (min-width: 768px) {
  .comment-body {
    padding: 1.5em;
  }
}

.comment-author {
  float: left;
  overflow: hidden;
  margin-right: 1.5em;
  text-align: center;
}

.comment-author img {
  display: block;
  overflow: hidden;
  margin-bottom: 0.5em;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
}

@media screen and (min-width: 768px) {
  .comment-author img {
    width: 5rem;
    height: 5rem;
  }
}

.comment-author .fn {
  font-size: .625rem;
}

@media screen and (min-width: 768px) {
  .comment-author .fn {
    font-size: .75rem;
  }
}

.comment-author .says {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  border: 0;
  white-space: nowrap;
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
}

.comment-content {
  overflow: hidden;
}

.comment-respond {
  padding: 1.5em;
  border: 1px solid #ddd;
}

.comment-reply-title {
  margin-bottom: .25rem;
  font-weight: bold;
}

.comment-form {
  margin-top: .25rem;
}

.comment-form .logged-in-as {
  margin: .25rem 0;
}

.comment-form .comment-form-comment {
  margin: 1rem 0;
}

.comment-form input,
.comment-form textarea {
  padding: .5em;
  border-radius: .5em;
  font-size: 1em;
  font-family: Quicksand, "Noto Sans Japanese", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, sans-serif;
  line-height: 1;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.comment-form input[type='text'],
.comment-form input[type='search'] {
  display: inline-block;
  width: 80%;
  outline: none;
  border: 1px solid #ddd;
}

@media screen and (min-width: 768px) {
  .comment-form input[type='text'],
  .comment-form input[type='search'] {
    width: 100%;
  }
}

@media screen and (min-width: 1024px) {
  .comment-form input[type='text'],
  .comment-form input[type='search'] {
    width: 80%;
  }
}

.comment-form input[type='text']:focus,
.comment-form input[type='search']:focus {
  -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.16);
          box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.16);
}

.comment-form textarea {
  display: inline-block;
  width: 100%;
  outline: none;
  border: 1px solid #ddd;
}

.comment-form textarea:focus {
  -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.16);
          box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.16);
}

.comment-form input[type='submit'] {
  display: inline-block;
  padding: .6em .5em;
  border: 1px solid #ddd;
  background-color: transparent;
  cursor: pointer;
}

@media screen and (min-width: 768px) {
  .comment-form input[type='submit'] {
    margin-top: .5em;
    width: 25%;
  }
}

@media screen and (min-width: 1024px) {
  .comment-form input[type='submit'] {
    margin-top: 0;
    width: 18%;
  }
}

.comment-form input[type='submit']:hover {
  border-color: #263238;
  background-color: #263238;
  color: #fff;
}

/*
  Pagination
*/
.pagination {
  margin: 1.5em 0;
}

@media screen and (min-width: 768px) {
  .pagination {
    margin: 3em 0 0;
  }
}

.page-numbers {
  text-align: center;
  display: inline-block;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background-color: #fff;
  border: 4px solid #263238;
  text-decoration: none;
  color: #263238;
  line-height: 1;
  padding: 0.25em;
  font-weight: bold;
  vertical-align: top;
}

@media screen and (min-width: 768px) {
  .page-numbers {
    width: 3em;
    height: 3em;
    padding: 0.75em;
  }
}

.page-numbers[href]:hover, .page-numbers.current {
  background-color: #263238;
  color: #fff;
}

.page-numbers.prev, .page-numbers.next {
  position: relative;
}

.page-numbers.prev:before, .page-numbers.prev:after, .page-numbers.next:before, .page-numbers.next:after {
  position: absolute;
  content: '';
  top: 0;
  bottom: 0;
  margin: auto;
  width: 0.5em;
  height: 0.5em;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.page-numbers.prev:before, .page-numbers.next:before {
  background-color: #263238;
}

.page-numbers.prev:after, .page-numbers.next:after {
  background-color: #fff;
}

.page-numbers.prev:hover:before, .page-numbers.next:hover:before {
  background-color: #fff;
}

.page-numbers.prev:hover:after, .page-numbers.next:hover:after {
  background-color: #263238;
}

.page-numbers.prev:before, .page-numbers.prev:after {
  right: 0;
}

.page-numbers.prev:before {
  left: 0.25em;
}

.page-numbers.prev:after {
  left: 0.75em;
}

.page-numbers.next:before, .page-numbers.next:after {
  left: 0;
}

.page-numbers.next:before {
  right: 0.25em;
}

.page-numbers.next:after {
  right: 0.75em;
}

.page-numbers + .page-numbers {
  margin-left: .125em;
}

@media screen and (min-width: 768px) {
  .page-numbers + .page-numbers {
    margin-left: .25em;
  }
}

.nav-links {
  overflow: hidden;
}

.nav-previous, .nav-next {
  width: 49%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.nav-previous a:first-line, .nav-next a:first-line {
  font-size: 1.5rem;
}

.nav-previous {
  float: left;
}

.nav-next {
  float: right;
  text-align: right;
}

/*
  Post Categories
*/
.post-categories {
  margin: .75em 0;
}

.post-categories.-inList {
  margin: 0;
}

.post-categories li {
  display: inline-block;
}

.post-categories li + li {
  margin-left: .5em;
}

.post-categories li a {
  display: inline-block;
  background-color: #eee;
  font-size: 0.75em;
  text-decoration: none;
  color: inherit;
  padding: 0.33333em 0.66667em;
  border-radius: 0.66667em;
}

.post-categories li a:hover {
  background-color: #263238;
  color: #fff;
}

/*
  Search
*/
.searchform,
.search-form {
  text-align: right;
}

.searchform input,
.search-form input {
  font-family: Quicksand, "Noto Sans Japanese", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, sans-serif;
  padding: .5em;
  border-radius: .5em;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-size: 1em;
  line-height: 1;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.searchform input[type="text"],
.searchform input[type="search"],
.search-form input[type="text"],
.search-form input[type="search"] {
  display: inline-block;
  border: 1px solid #ddd;
  width: 80%;
  outline: none;
}

@media screen and (min-width: 768px) {
  .searchform input[type="text"],
  .searchform input[type="search"],
  .search-form input[type="text"],
  .search-form input[type="search"] {
    width: 100%;
  }
}

@media screen and (min-width: 1024px) {
  .searchform input[type="text"],
  .searchform input[type="search"],
  .search-form input[type="text"],
  .search-form input[type="search"] {
    width: 80%;
  }
}

.searchform input[type="text"]:focus,
.searchform input[type="search"]:focus,
.search-form input[type="text"]:focus,
.search-form input[type="search"]:focus {
  -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.16);
          box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.16);
}

.searchform input[type="submit"],
.search-form input[type="submit"] {
  display: inline-block;
  padding: .6em .5em;
  cursor: pointer;
  background-color: transparent;
  border: 1px solid #ddd;
  width: 18%;
}

@media screen and (min-width: 768px) {
  .searchform input[type="submit"],
  .search-form input[type="submit"] {
    width: 25%;
    margin-top: .5em;
  }
}

@media screen and (min-width: 1024px) {
  .searchform input[type="submit"],
  .search-form input[type="submit"] {
    width: 18%;
    margin-top: 0;
  }
}

.searchform input[type="submit"]:hover,
.search-form input[type="submit"]:hover {
  background-color: #263238;
  color: #fff;
  border-color: #263238;
}

/*
  Hamburger
*/
.p-hamburger {
  position: absolute;
  top: 0;
  right: 2.5%;
  bottom: 0;
  left: auto;
  z-index: 2;
  margin: auto 0;
  width: 24px;
  height: 24px;
  outline: 0;
  border: 0;
  background-color: transparent;
  -webkit-box-shadow: 0 0 40px transparent;
          box-shadow: 0 0 40px transparent;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.p-hamburger:focus {
  -webkit-box-shadow: 0 0 0 1px #212121;
          box-shadow: 0 0 0 1px #212121;
}

.p-hamburger__line {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  margin: auto;
  width: 75%;
  height: 2px;
  border-radius: .25em;
  background-color: #263238;
  -webkit-transition: -webkit-transform .2s ease-in-out;
  transition: -webkit-transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
  transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
}

.p-hamburger__line:before, .p-hamburger__line:after {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-color: inherit;
  content: '';
  -webkit-transition: inherit;
  transition: inherit;
}

.p-hamburger__line:before {
  top: -5px;
}

.p-hamburger__line:after {
  top: 5px;
}

@media screen and (min-width: 768px) {
  .p-hamburger {
    display: none;
  }
}

.is-drawerActive .p-hamburger__line {
  background-color: transparent;
}

.is-drawerActive .p-hamburger__line:before, .is-drawerActive .p-hamburger__line:after {
  top: 0;
  background-color: #fff;
}

.is-drawerActive .p-hamburger__line:before {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.is-drawerActive .p-hamburger__line:after {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

/*
  Widget
*/
.p-widget + .p-widget {
  margin-top: 1.5em;
}

@media screen and (min-width: 768px) {
  .p-widget + .p-widget {
    margin-top: 2em;
  }
}

.p-widget__title {
  background-color: #263238;
  color: #fff;
  font-weight: bold;
}

.p-widget.-light .p-widget__title {
  padding: .5em;
}

@media screen and (min-width: 768px) {
  .p-widget.-light .p-widget__title {
    padding: 1em;
  }
}

.p-widget.-dark .p-widget__title {
  margin: .5em 0;
}

@media screen and (min-width: 768px) {
  .p-widget.-dark .p-widget__title {
    margin: 1em 0;
  }
}

.p-widget > ul > li a,
.p-widget .menu > li a {
  text-decoration: none;
  color: inherit;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.p-widget > ul > li a:hover,
.p-widget .menu > li a:hover {
  background-color: #263238;
  color: #fff;
}

.p-widget > ul > li .post-date,
.p-widget .menu > li .post-date {
  font-size: .75rem;
}

.p-widget.-light > ul,
.p-widget.-light .menu {
  background-color: #fff;
}

.p-widget.-light > ul li,
.p-widget.-light .menu li {
  padding: .5em;
}

@media screen and (min-width: 768px) {
  .p-widget.-light > ul li,
  .p-widget.-light .menu li {
    padding: 1em;
  }
}

.p-widget.-light > ul li + li,
.p-widget.-light .menu li + li {
  border-top: 1px solid #ddd;
}

.p-widget.-dark > ul li,
.p-widget.-dark .menu li {
  padding: .5em 0;
}

@media screen and (min-width: 768px) {
  .p-widget.-dark > ul li,
  .p-widget.-dark .menu li {
    padding: 1em 0;
  }
}

.p-widget.-dark > ul li + li,
.p-widget.-dark .menu li + li {
  border-top: 1px solid #90a4ae;
}

.p-widget form {
  padding: .5em;
  background-color: #fff;
}

@media screen and (min-width: 768px) {
  .p-widget form {
    padding: 1em;
  }
}

.p-widget .calendar_wrap {
  padding: .5em;
  background-color: #fff;
}

@media screen and (min-width: 768px) {
  .p-widget .calendar_wrap {
    padding: 1em;
  }
}

.p-widget table {
  width: 100%;
}

.p-widget table caption {
  font-weight: bold;
}

.p-widget table th,
.p-widget table td {
  position: relative;
  z-index: 0;
  padding: .25em;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .p-widget table th,
  .p-widget table td {
    padding: .5em;
  }
}

.p-widget table thead {
  font-weight: bold;
}

.p-widget table a {
  color: inherit;
}

.p-widget table tbody {
  color: #607d8b;
}

.p-widget table tbody a {
  display: block;
  text-decoration: none;
}

.p-widget table tbody a:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  content: '';
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background-color: #eceff1;
  z-index: -1;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.p-widget table tbody a:hover:before {
  background-color: #263238;
  color: #fff;
}

.p-widget table td#today {
  font-weight: bold;
  color: #ffc107;
}

.p-widget table td#prev {
  text-align: left;
  font-weight: bold;
}

.p-widget table td#next {
  text-align: right;
  font-weight: bold;
}

.p-widget .tagcloud a {
  display: inline-block;
  line-height: 1;
  padding: .25rem .5rem;
  background-color: #fff;
  text-decoration: none;
  color: #263238;
  border-radius: .5em;
  margin-top: .5rem;
}

.p-widget .tagcloud a:hover {
  background-color: #263238;
  color: #fff;
}

.p-widget .tagcloud .tag-link-count {
  font-size: .5em;
}

.p-widget .textwidget {
  width: 100%;
}

.p-widget .textwidget em, .p-widget .textwidget strong {
  font-weight: bold;
}

.p-widget .textwidget a {
  color: #00bcd4;
  text-decoration: underline;
}

.p-widget .textwidget a:hover {
  text-decoration: none;
}

.p-widget.-light .textwidget {
  background-color: #fff;
}

.p-widget.-light .textwidget strong {
  color: #ffc107;
}

.p-widget.-dark .textwidget strong {
  color: #fff;
}

/*
  3.2 - Utility
-----------------------------------------------------*/
/*
  Margin
*/
.u-mt--sp--0 {
  margin-top: 0;
}

.u-mt--sp--xsmall {
  margin-top: .5em;
}

.u-mt--sp--small {
  margin-top: 1em;
}

.u-mt--sp--medium {
  margin-top: 1.5em;
}

.u-mt--sp--large {
  margin-top: 2em;
}

.u-mt--sp--xlarge {
  margin-top: 2.5em;
}

.u-mb--sp--0 {
  margin-bottom: 0;
}

.u-mb--sp--xsmall {
  margin-bottom: .5em;
}

.u-mb--sp--small {
  margin-bottom: 1em;
}

.u-mb--sp--medium {
  margin-bottom: 1.5em;
}

.u-mb--sp--large {
  margin-bottom: 2em;
}

.u-mb--sp--xlarge {
  margin-bottom: 2.5em;
}

@media screen and (min-width: 768px) {
  .u-mt--tab--0 {
    margin-top: 0;
  }
  .u-mt--tab--xsmall {
    margin-top: .5em;
  }
  .u-mt--tab--small {
    margin-top: 1em;
  }
  .u-mt--tab--medium {
    margin-top: 1.5em;
  }
  .u-mt--tab--large {
    margin-top: 2em;
  }
  .u-mt--tab--xlarge {
    margin-top: 2.5em;
  }
  .u-mb--tab--0 {
    margin-bottom: 0;
  }
  .u-mb--tab--xsmall {
    margin-bottom: .5em;
  }
  .u-mb--tab--small {
    margin-bottom: 1em;
  }
  .u-mb--tab--medium {
    margin-bottom: 1.5em;
  }
  .u-mb--tab--large {
    margin-bottom: 2em;
  }
  .u-mb--tab--xlarge {
    margin-bottom: 2.5em;
  }
}

@media screen and (min-width: 1024px) {
  .u-mt--lap--0 {
    margin-top: 0;
  }
  .u-mt--lap--xsmall {
    margin-top: .5em;
  }
  .u-mt--lap--small {
    margin-top: 1em;
  }
  .u-mt--lap--medium {
    margin-top: 1.5em;
  }
  .u-mt--lap--large {
    margin-top: 2em;
  }
  .u-mt--lap--xlarge {
    margin-top: 2.5em;
  }
  .u-mb--lap--0 {
    margin-bottom: 0;
  }
  .u-mb--lap--xsmall {
    margin-bottom: .5em;
  }
  .u-mb--lap--small {
    margin-bottom: 1em;
  }
  .u-mb--lap--medium {
    margin-bottom: 1.5em;
  }
  .u-mb--lap--large {
    margin-bottom: 2em;
  }
  .u-mb--lap--xlarge {
    margin-bottom: 2.5em;
  }
}

@media screen and (min-width: 1200px) {
  .u-mt--desk--0 {
    margin-top: 0;
  }
  .u-mt--desk--xsmall {
    margin-top: .5em;
  }
  .u-mt--desk--small {
    margin-top: 1em;
  }
  .u-mt--desk--medium {
    margin-top: 1.5em;
  }
  .u-mt--desk--large {
    margin-top: 2em;
  }
  .u-mt--desk--xlarge {
    margin-top: 2.5em;
  }
  .u-mb--desk--0 {
    margin-bottom: 0;
  }
  .u-mb--desk--xsmall {
    margin-bottom: .5em;
  }
  .u-mb--desk--small {
    margin-bottom: 1em;
  }
  .u-mb--desk--medium {
    margin-bottom: 1.5em;
  }
  .u-mb--desk--large {
    margin-bottom: 2em;
  }
  .u-mb--desk--xlarge {
    margin-bottom: 2.5em;
  }
}

/*
  Break
*/
.u-break .-sp {
  display: inline-block;
}

@media screen and (min-width: 768px) {
  .u-break .-sp {
    display: none;
  }
}

.u-break .-tab {
  display: none;
}

@media screen and (min-width: 768px) {
  .u-break .-tab {
    display: inline-block;
  }
}

/*
  Screen Reader Text
*/
.screen-reader-text {
  position: absolute;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
}