@charset "UTF-8";
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;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
  font-size: 100%; }

html {
  line-height: 1; }

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

dl, dt, dd,
ul, li {
  list-style: none; }

nav ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

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

img {
  vertical-align: bottom; }

ins {
  color: #000;
  text-decoration: none; }

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold; }

a {
  cursor: pointer; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

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

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

address {
  font-style: normal; }

@media screen and (max-width: 640px) {
  .basic-UI p {
    padding-left: 10px;
    padding-right: 10px; } }
.basic-UI ul, .basic-UI ol, .basic-UI dl {
  margin-bottom: 20px; }
  @media screen and (max-width: 640px) {
    .basic-UI ul, .basic-UI ol, .basic-UI dl {
      padding-left: 10px;
      padding-right: 10px; } }
  .basic-UI ul.floatList li, .basic-UI ol.floatList li, .basic-UI dl.floatList li {
    float: left;
    margin-right: 20px; }
  .basic-UI ul.listStyle-disc li, .basic-UI ol.listStyle-disc li, .basic-UI dl.listStyle-disc li {
    list-style-type: disc;
    margin-left: 1.2em; }
  .basic-UI ul li:last-child, .basic-UI ol li:last-child, .basic-UI dl li:last-child {
    margin-bottom: 0; }
  .basic-UI ul li ul li, .basic-UI ul li ol li, .basic-UI ol li ul li, .basic-UI ol li ol li, .basic-UI dl li ul li, .basic-UI dl li ol li {
    margin-bottom: 5px; }
    .basic-UI ul li ul li:last-child, .basic-UI ul li ol li:last-child, .basic-UI ol li ul li:last-child, .basic-UI ol li ol li:last-child, .basic-UI dl li ul li:last-child, .basic-UI dl li ol li:last-child {
      margin-bottom: 0; }
  .basic-UI ul dt, .basic-UI ol dt, .basic-UI dl dt {
    font-weight: bold; }
  @media screen and (max-width: 640px) {
    .basic-UI ul p, .basic-UI ol p, .basic-UI dl p {
      padding-left: 0;
      padding-right: 0; } }
.basic-UI input[type="text"], .basic-UI input[type="number"], .basic-UI input[type="email"], .basic-UI input[type="password"] {
  padding: 10px 5px;
  border-radius: 4px;
  border: solid 1px #A9A9A9;
  font-size: 1.1em; }
  @media screen and (max-width: 640px) {
    .basic-UI input[type="text"], .basic-UI input[type="number"], .basic-UI input[type="email"], .basic-UI input[type="password"] {
      width: 100%;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box; } }
.basic-UI input[type="checkbox"], .basic-UI input[type="radio"] {
  padding-top: 5px;
  margin: 0 5px 3px 0; }
.basic-UI select {
  height: 40px;
  padding: 5px;
  margin-bottom: 7px;
  border-radius: 4px;
  border: solid 1px #A9A9A9;
  font-size: 1.1em; }
.basic-UI textarea {
  width: 90%;
  height: 75px;
  padding: 10px;
  margin: 2px;
  border-radius: 4px;
  border: solid 1px #A9A9A9;
  font-size: 1.1em;
  line-height: 1.2; }
.basic-UI .separateBox-2 .separateBox-left {
  float: left;
  width: 49%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  @media screen and (max-width: 640px) {
    .basic-UI .separateBox-2 .separateBox-left {
      float: none;
      width: 100%; } }
.basic-UI .separateBox-2 .separateBox-right {
  float: right;
  width: 49%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  @media screen and (max-width: 640px) {
    .basic-UI .separateBox-2 .separateBox-right {
      float: none;
      width: 100%; } }
.basic-UI .scrollBox {
  overflow-y: scroll;
  border: solid 1px #E4E4E4;
  height: 180px;
  padding: 10px; }
  @media screen and (max-width: 640px) {
    .basic-UI .scrollBox {
      margin: 0 10px; } }

.pagesContentsItem {
  margin-bottom: 25px; }

.mt00 {
  margin-top: 0px !important; }

.mt05 {
  margin-top: 5px !important; }

.mt10 {
  margin-top: 10px !important; }

.mt15 {
  margin-top: 15px !important; }

.mt20 {
  margin-top: 20px !important; }

.mt25 {
  margin-top: 25px !important; }

.mt30 {
  margin-top: 30px !important; }

.mt35 {
  margin-top: 35px !important; }

.mt40 {
  margin-top: 40px !important; }

.mt45 {
  margin-top: 45px !important; }

.mb00 {
  margin-bottom: 0px !important; }

.mb05 {
  margin-bottom: 5px !important; }

.mb10 {
  margin-bottom: 10px !important; }

.mb15 {
  margin-bottom: 15px !important; }

.mb20 {
  margin-bottom: 20px !important; }

.mb25 {
  margin-bottom: 25px !important; }

.mb30 {
  margin-bottom: 30px !important; }

.mb35 {
  margin-bottom: 35px !important; }

.ml00 {
  margin-left: 0px !important; }

.ml05 {
  margin-left: 5px !important; }

.ml10 {
  margin-left: 10px !important; }

.ml15 {
  margin-left: 15px !important; }

.ml20 {
  margin-left: 20px !important; }

.ml25 {
  margin-left: 25px !important; }

.ml30 {
  margin-left: 30px !important; }

.ml35 {
  margin-left: 35px !important; }

.ml50 {
  margin-left: 50px !important; }

.ml100 {
  margin-left: 100px !important; }

.mr00 {
  margin-right: 0 !important; }

.mr05 {
  margin-right: 5px !important; }

.mr10 {
  margin-right: 10px !important; }

.mr15 {
  margin-right: 15px !important; }

.mr20 {
  margin-right: 20px !important; }

.mr25 {
  margin-right: 25px !important; }

.mr30 {
  margin-right: 30px !important; }

.mr35 {
  margin-right: 35px !important; }

.m0a {
  margin: 0 auto; }

.pt00 {
  padding-top: 0px !important; }

.pt05 {
  padding-top: 5px !important; }

.pt10 {
  padding-top: 10px !important; }

.pt15 {
  padding-top: 15px !important; }

.pt20 {
  padding-top: 20px !important; }

.pt25 {
  padding-top: 25px !important; }

.pt30 {
  padding-top: 30px !important; }

.pt35 {
  padding-top: 35px !important; }

.pt40 {
  padding-top: 40px !important; }

.pt45 {
  padding-top: 45px !important; }

.pb00 {
  padding-bottom: 0px !important; }

.pb05 {
  padding-bottom: 5px !important; }

.pb10 {
  padding-bottom: 10px !important; }

.pb15 {
  padding-bottom: 15px !important; }

.pb20 {
  padding-bottom: 20px !important; }

.pb25 {
  padding-bottom: 25px !important; }

.pb30 {
  padding-bottom: 30px !important; }

.pb35 {
  padding-bottom: 35px !important; }

.pl00 {
  padding-left: 0px !important; }

.pl05 {
  padding-left: 5px !important; }

.pl10 {
  padding-left: 10px !important; }

.pl15 {
  padding-left: 15px !important; }

.pl20 {
  padding-left: 20px !important; }

.pl25 {
  padding-left: 25px !important; }

.pl30 {
  padding-left: 30px !important; }

.pl35 {
  padding-left: 35px !important; }

.pl50 {
  padding-left: 50px !important; }

.pr00 {
  padding-right: 0 !important; }

.pr05 {
  padding-right: 5px !important; }

.pr10 {
  padding-right: 10px !important; }

.pr15 {
  padding-right: 15px !important; }

.pr20 {
  padding-right: 20px !important; }

.pr25 {
  padding-right: 25px !important; }

.pr30 {
  padding-right: 30px !important; }

.pr35 {
  padding-right: 35px !important; }

.fw_b {
  font-weight: bold; }

.hosoku {
  font-size: 92% !important;
  line-height: 1.5 !important;
  background: #f4f4f4 !important;
  color: #666 !important;
  padding: 30px 30px !important;
  margin: 20px !important; }
  @media screen and (max-width: 979px) {
    .hosoku {
      padding: 20px !important;
      margin: 0 0 20px  !important; } }

/*font--------------------*/
.font10 {
  font-size: 77% !important; }

.font11 {
  font-size: 85% !important; }

.font12 {
  font-size: 93% !important; }

.font14 {
  font-size: 108% !important; }

.font15 {
  font-size: 116% !important; }

.font16 {
  font-size: 123.1% !important; }

.font17 {
  font-size: 131% !important; }

.font18 {
  font-size: 138.5% !important; }

.font19 {
  font-size: 146.5% !important; }

.font20 {
  font-size: 153.9% !important; }

.font21 {
  font-size: 161.6% !important; }

.font22 {
  font-size: 167% !important; }

.font23 {
  font-size: 174% !important; }

.font24 {
  font-size: 182% !important; }

.font25 {
  font-size: 189% !important; }

.font26 {
  font-size: 197% !important; }

.fontb {
  font-weight: bold !important; }

.font_r {
  color: #ff0000 !important; }

.ta_l {
  text-align: left; }

.ta_r {
  text-align: right; }

.ta_c {
  text-align: center; }

.ti_1 {
  margin-left: 1em;
  text-indent: -1em; }

.ti_1-5 {
  margin-left: 1.5em;
  text-indent: -1.5em; }

.d_n_pc {
  display: none; }
  @media screen and (max-width: 979px) {
    .d_n_pc {
      display: block; } }

.d_n_sp {
  display: none; }
  @media screen and (min-width: 993px) {
    .d_n_sp {
      display: block; } }

@font-face {
  font-family: 'Avenir';
  src: url("/common/fonts/avenir.ttf"); }
@font-face {
  font-family: 'NotoSans';
  src: url("/common/fonts/NotoSansCJKjp-Thin.ttf");
  font-weight: 0; }
@font-face {
  font-family: 'NotoSans';
  src: url("/common/fonts/NotoSansCJKjp-Regular.ttf");
  font-weight: 100; }
@font-face {
  font-family: 'NotoSans';
  src: url("/common/fonts/NotoSansCJKjp-Medium.ttf");
  font-weight: 200; }
@font-face {
  font-family: 'NotoSans';
  src: url("/common/fonts/NotoSansCJKjp-DemiLight.ttf");
  font-weight: 300; }
@font-face {
  font-family: 'NotoSans';
  src: url("/common/fonts/NotoSansCJKjp-Bold.ttf");
  font-weight: 400; }
@font-face {
  font-family: 'NotoSans';
  src: url("/common/fonts/NotoSansCJKjp-Black.ttf");
  font-weight: 500; }
html {
  font-family: Helvetica, YuGothic, '游ゴシック', NotoSans, Avenir, "Hiragino Kaku Gothic Pro",sans-serif;
  font-size: 62.5%;
  height: 100%; }
  html input, html button, html textarea {
    font-family: Helvetica, YuGothic, '游ゴシック', NotoSans, Avenir, "Hiragino Kaku Gothic Pro",sans-serif; }

body {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.8em;
  height: 100%;
  color: #000;
  background: #FFF;
  -webkit-text-size-adjust: 100%; }

.clearfix:after, .basic-UI ul.floatList:after, .basic-UI ol.floatList:after, .basic-UI dl.floatList:after, .basic-UI .separateBox-2:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow: hidden;
  font-size: 0.1em;
  line-height: 0; }

.clearfix, .basic-UI ul.floatList, .basic-UI ol.floatList, .basic-UI dl.floatList, .basic-UI .separateBox-2 {
  min-height: 1px; }

* html .clearfix, * html .basic-UI ul.floatList, .basic-UI * html ul.floatList, * html .basic-UI ol.floatList, .basic-UI * html ol.floatList, * html .basic-UI dl.floatList, .basic-UI * html dl.floatList, * html .basic-UI .separateBox-2, .basic-UI * html .separateBox-2 {
  height: 1px;
  /*\*/
     /*/
height: auto;
overflow: hidden;
/**/ }

a {
  color: #000;
  text-decoration: none; }
  a img {
    -ms-interpolation-mode: bicubic; }
  a:hover {
    color: #626262; }
    a:hover img {
      filter: alpha(opacity=80);
      -moz-opacity: 0.8;
      opacity: 0.8; }

@media screen and (max-width: 768px) {
  .sp {
    display: block; }

  .pc {
    display: none !important; } }
@media screen and (min-width: 768px) {
  .sp {
    display: none !important; }

  .pc {
    display: block; } }
.floL {
  float: left; }

.floR {
  float: right; }

.bold {
  font-weight: bold; }

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box; }

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

.font_min {
  font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif; }

a {
  -webkit-transition: 0.8s;
  -moz-transition: 0.8s;
  -o-transition: 0.8s;
  -ms-transition: 0.8s;
  transition: 0.8s; }
  a:hover {
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -o-transition: 0.6s;
    -ms-transition: 0.6s;
    transition: 0.6s; }

/* =================
	header
================== */
header {
  width: 100%;
  height: 80px;
  position: fixed;
  z-index: 3000;
  background-color: #FFF;
  border-bottom: 1px solid #EFEFEF; }
  @media screen and (max-width: 1000px) {
    header {
      width: 100%; } }
  header h1 {
    text-align: center;
    position: absolute;
    margin: auto auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    width: 174px; }
  header .nav-content {
    display: flex;
    justify-content: space-between;
    padding: 25px 2.5em 0; }
    header .nav-content nav {
      display: flex;
      align-items: center; }
      header .nav-content nav#gNav ul {
        background: #FFF;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        width: auto; }
        header .nav-content nav#gNav ul li {
          padding: 0 1.5em 0 1.5em;
          font-size: 11px;
          font-size: 1.1rem;
          font-weight: bold;
          border-right: 1px solid #333333;
          line-height: 1.4; }
          header .nav-content nav#gNav ul li:first-of-type {
            border-left: 1px solid #333333; }
      header .nav-content nav.sns ul {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        width: auto; }
        header .nav-content nav.sns ul li {
          padding: 0 0.4em;
          font-size: 22px;
          font-size: 2.2rem; }
          header .nav-content nav.sns ul li a {
            color: #fac417; }

#container {
  padding-top: 86px; }
  @media screen and (max-width: 768px) {
    #container {
      padding-top: 70px; } }
  @media screen and (max-width: 480px) {
    #container {
      padding-top: 60px; } }
  #container #wrapper {
    min-height: calc(100vh - 86px); }
    @media screen and (max-width: 768px) {
      #container #wrapper {
        min-height: auto; } }
    #container #wrapper .contentBox {
      max-width: 1400px;
      margin: 0 auto 0; }
      @media screen and (max-width: 1400px) {
        #container #wrapper .contentBox {
          max-width: 1200px; } }
      @media screen and (max-width: 1200px) {
        #container #wrapper .contentBox {
          width: 100%; } }
      @media screen and (max-width: 1000px) {
        #container #wrapper .contentBox {
          width: 100%; } }
      #container #wrapper .contentBox h2 {
        text-align: left;
        padding: 1.5em 0em 2.5em;
        font-size: 22px;
        font-size: 2.2rem; }
        @media screen and (max-width: 768px) {
          #container #wrapper .contentBox h2 {
            padding: 1.5em 1em 2.5em;
            text-align: left; } }
        @media screen and (max-width: 480px) {
          #container #wrapper .contentBox h2 {
            padding: 1em 1em 2em; } }
        #container #wrapper .contentBox h2 span {
          font-size: 13px;
          font-size: 1.3rem; }
          #container #wrapper .contentBox h2 span:before {
            content: '/';
            padding: 0 1em; }

footer .copyright {
  text-align: center;
  width: 100%;
  padding: 1em 1em 10px;
  font-size: 10px;
  font-size: 1rem; }
footer .pagetop {
  width: 100%;
  position: fixed;
  bottom: 0;
  right: 0;
  text-align: right; }

@media screen and (max-width: 768px) {
  .menu-button {
    width: 30px;
    display: block;
    position: absolute;
    z-index: 5001;
    right: 20px;
    top: 32px; } }
  @media screen and (max-width: 768px) and (max-width: 480px) {
    .menu-button {
      right: 15px;
      top: 27px; } }
@media screen and (max-width: 768px) {
    .menu-button i {
      display: block;
      width: 30px;
      height: 4px;
      background: #000;
      -webkit-transition: background 0.5s;
      transition: background 0.5s;
      position: relative; }
      .menu-button i:before, .menu-button i:after {
        content: "";
        display: block;
        width: 30px;
        height: 4px;
        background: #000;
        position: absolute;
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: all 0.3s !important;
        transition: all 0.3s !important; }
      .menu-button i:before {
        -webkit-transform: translateY(10px);
        -ms-transform: translateY(10px);
        transform: translateY(10px); }
      .menu-button i:after {
        -webkit-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        transform: translateY(-10px); }
    .is-open .menu-button i {
      background: #FFF; }
      .is-open .menu-button i:after {
        -webkit-transform: translateY(0px) rotate(-45deg);
        -ms-transform: translateY(0px) rotate(-45deg);
        transform: translateY(0px) rotate(-45deg); }
      .is-open .menu-button i:before {
        -webkit-transform: translateY(0px) rotate(45deg);
        -ms-transform: translateY(0px) rotate(45deg);
        transform: translateY(0px) rotate(45deg); }

  header {
    position: fixed;
    height: 70px;
    top: 0; } }
  @media screen and (max-width: 768px) and (max-width: 480px) {
    header {
      height: 60px; } }
@media screen and (max-width: 768px) {
    header h1 {
      width: 100%;
      background-color: #FFF;
      text-align: center;
      position: relative;
      z-index: 5000;
      border-bottom: 1px solid #DDD;
      height: 70px; } }
    @media screen and (max-width: 768px) and (max-width: 480px) {
      header h1 {
        height: 60px; } }
@media screen and (max-width: 768px) {
      header h1 a img {
        padding-top: 10px;
        height: 60px;
        width: auto; } }
      @media screen and (max-width: 768px) and (max-width: 480px) {
        header h1 a img {
          height: 50px;
          width: auto; } }
@media screen and (max-width: 768px) {
    header .nav-content {
      position: absolute;
      width: 100%;
      height: auto;
      top: -100vh;
      left: 0;
      z-index: 2000;
      overflow-y: scroll;
      padding: 40px 20px 40px;
      -webkit-transition: 1.5s top;
      transition: 1.5s top;
      background: #FFF;
      background: rgba(255, 255, 255, 0.8);
      display: block; }
      header .nav-content nav {
        align-items: flex-start;
        display: block; }
        header .nav-content nav#gNavSp ul {
          background: none;
          display: block;
          width: 100%; }
          header .nav-content nav#gNavSp ul li {
            padding: 1em;
            font-size: 16px;
            font-size: 1.6rem;
            font-weight: bold;
            text-align: center; }
        header .nav-content nav.sns {
          justify-content: center;
          margin-top: 2em; }
          header .nav-content nav.sns ul {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            width: auto; }
            header .nav-content nav.sns ul li {
              padding: 0 1em;
              font-size: 28px;
              font-size: 2.8rem; }
    header.is-open .nav-content {
      top: 70px; } }
    @media screen and (max-width: 768px) and (max-width: 480px) {
      header.is-open .nav-content {
        top: 60px; } }

#top #container #wrapper {
  margin-top: 0;
  padding: 2em 1em; }
  @media screen and (max-width: 768px) {
    #top #container #wrapper {
      padding: 1em 0.5em; } }
  #top #container #wrapper .contentBox {
    max-width: 1400px;
    margin: 0 auto; }
    @media screen and (max-width: 1400px) {
      #top #container #wrapper .contentBox {
        max-width: 1200px; } }
    @media screen and (max-width: 1200px) {
      #top #container #wrapper .contentBox {
        width: 100%; } }
    @media screen and (max-width: 1000px) {
      #top #container #wrapper .contentBox {
        width: 100%; } }
    #top #container #wrapper .contentBox ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      width: 100%; }
      #top #container #wrapper .contentBox ul li {
        width: 25%;
        padding: 0 0.5em 1em;
        overflow: hidden; }
        @media screen and (max-width: 1000px) {
          #top #container #wrapper .contentBox ul li {
            width: 33.3%; } }
        @media screen and (max-width: 768px) {
          #top #container #wrapper .contentBox ul li {
            width: 50%; } }
        @media screen and (max-width: 480px) {
          #top #container #wrapper .contentBox ul li {
            width: 100%; } }
        #top #container #wrapper .contentBox ul li figure {
          position: relative; }
          #top #container #wrapper .contentBox ul li figure img {
            width: 100%;
            height: 170px;
            object-fit: cover; }
          #top #container #wrapper .contentBox ul li figure figcaption a {
            display: block;
            background: rgba(102, 102, 102, 0);
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            padding: 0.8em 1em;
            text-align: left;
            color: transparent; }
            #top #container #wrapper .contentBox ul li figure figcaption a span {
              display: block;
              color: transparent; }
              #top #container #wrapper .contentBox ul li figure figcaption a span.title {
                font-size: 14px;
                font-size: 1.4rem; }
              #top #container #wrapper .contentBox ul li figure figcaption a span.tag {
                font-size: 12px;
                font-size: 1.2rem;
                padding-right: 0.5em; }
            #top #container #wrapper .contentBox ul li figure figcaption a:hover {
              background: rgba(102, 102, 102, 0.8);
              color: #FFF; }
              #top #container #wrapper .contentBox ul li figure figcaption a:hover span.title {
                color: #FFF; }
              #top #container #wrapper .contentBox ul li figure figcaption a:hover span.tag {
                color: #fac419; }

#works #container #wrapper {
  padding: 2em;
  min-height: 100vh !important; }
  @media screen and (max-width: 768px) {
    #works #container #wrapper {
      padding: 1em 0.5em; } }
  #works #container #wrapper .contentBox {
    			/*.page-numbers{
    				display: flex;
    				justify-content: center;
    				padding: 3em 1em;
    
    				li{
    					width: auto;
    					display: flex;
    						align-items: center;
    					.page-numbers{
    						display: flex;
    						align-items: center;
    						background: #DDD;
    						padding: 0.5em 1em;
    						height: 40px;
    						width: 40px;
    						line-height: 1;
    						@include font-size(16px);
    						&.prev,
    						&.next{
    							@include font-size(20px);
    						}
    						&.current,&:hover{
    							background: #FFF;
    						}
    					}
    				}
    			}*/ }

#page #container #wrapper {
  padding: 2em;
  min-height: 100vh !important; }
  @media screen and (max-width: 768px) {
    #page #container #wrapper {
      padding: 1em 0.5em; } }
  #page #container #wrapper .contentBox {
    width: 1000px;
    margin: 0 auto; }
    @media screen and (max-width: 768px) {
      #page #container #wrapper .contentBox {
        width: 100%;
        padding: 0 10px; } }
    #page #container #wrapper .contentBox .workDetailNav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
      padding: 0 0 10px; }
      @media screen and (max-width: 768px) {
        #page #container #wrapper .contentBox .workDetailNav {
          align-items: flex-start;
          flex-direction: column;
          margin-bottom: 0px; } }
      #page #container #wrapper .contentBox .workDetailNav ul {
        display: flex;
        justify-content: flex-start; }
        @media screen and (max-width: 768px) {
          #page #container #wrapper .contentBox .workDetailNav ul {
            flex-direction: column; } }
        #page #container #wrapper .contentBox .workDetailNav ul li {
          border-left: 2px solid #fac417;
          padding: 0px 0 0px 1em;
          font-size: 14px;
          font-size: 1.4rem;
          line-height: 1.0; }
          #page #container #wrapper .contentBox .workDetailNav ul li.tag {
            padding-left: 1em;
            color: #999;
            font-size: 12px;
            font-size: 1.2rem;
            border-left: none; }
            @media screen and (max-width: 768px) {
              #page #container #wrapper .contentBox .workDetailNav ul li.tag {
                padding-top: 8px;
                padding-left: 3px;
                line-height: 1.4; } }
      #page #container #wrapper .contentBox .workDetailNav p.bk {
        text-align: right; }
        @media screen and (max-width: 768px) {
          #page #container #wrapper .contentBox .workDetailNav p.bk {
            width: 100%;
            padding: 10px 0; } }
        #page #container #wrapper .contentBox .workDetailNav p.bk span {
          padding-right: 0.5em; }
        #page #container #wrapper .contentBox .workDetailNav p.bk a {
          font-size: 11px;
          font-size: 1.1rem; }
    #page #container #wrapper .contentBox .worksImg {
      text-align: center;
      width: 1000px;
      max-width: 1000px; }
      @media screen and (max-width: 768px) {
        #page #container #wrapper .contentBox .worksImg {
          width: 100%;
          max-width: 100%;
          padding: 0 10px; } }
      #page #container #wrapper .contentBox .worksImg p {
        text-align: left;
        padding: 1em 0 2em; }
        #page #container #wrapper .contentBox .worksImg p img {
          max-width: 100%;
          height: auto; }
      #page #container #wrapper .contentBox .worksImg figure {
        padding: 0 0 40px; }
        #page #container #wrapper .contentBox .worksImg figure img {
          max-width: 100%;
          height: auto; }
          @media screen and (max-width: 768px) {
            #page #container #wrapper .contentBox .worksImg figure img {
              width: 100%;
              max-width: 100%; } }
    #page #container #wrapper .contentBox p.bk.end {
      text-align: center;
      margin: 30px auto 40px; }
      @media screen and (max-width: 768px) {
        #page #container #wrapper .contentBox p.bk.end {
          margin: 20px auto 25px; } }
      #page #container #wrapper .contentBox p.bk.end span {
        padding-right: 0.5em; }
      #page #container #wrapper .contentBox p.bk.end a {
        font-size: 12px;
        font-size: 1.2rem;
        background: #EFEFEF;
        padding: 5px 10px;
        -webkit-border-radius: 15px 15px 15px 15px;
        -moz-border-radius: 15px 15px 15px 15px;
        border-radius: 15px 15px 15px 15px; }
        @media screen and (max-width: 768px) {
          #page #container #wrapper .contentBox p.bk.end a {
            padding: 8px 15px; } }

#about #wrapper {
  padding: 2em;
  min-height: 100vh !important; }
  @media screen and (max-width: 768px) {
    #about #wrapper {
      padding: 1em 0.5em; } }
  #about #wrapper .contentBox section {
    padding: 0 1em;
    margin: 0 auto 3em; }
    #about #wrapper .contentBox section h3 {
      margin-bottom: 1.5em;
      font-size: 17px;
      font-size: 1.7rem;
      color: #fac417; }
    #about #wrapper .contentBox section.about {
      border-bottom: 1px solid #DDD;
      padding: 0 1em 2em;
      margin: 0 auto 3em; }
      #about #wrapper .contentBox section.about dl {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start; }
        #about #wrapper .contentBox section.about dl dt {
          padding-right: 2em;
          font-weight: bold;
          width: 100px; }
          @media screen and (max-width: 768px) {
            #about #wrapper .contentBox section.about dl dt {
              width: 100%; } }
        #about #wrapper .contentBox section.about dl dd {
          width: calc(100% - 100px);
          margin-bottom: 1em; }
          @media screen and (max-width: 768px) {
            #about #wrapper .contentBox section.about dl dd {
              width: 100%; } }
          #about #wrapper .contentBox section.about dl dd ul li {
            margin-bottom: 0.5em; }
    #about #wrapper .contentBox section.cw {
      border-bottom: 1px solid #DDD;
      padding: 0 1em 2em;
      margin: 0 auto 3em; }
      #about #wrapper .contentBox section.cw dl dt {
        padding-right: 2em;
        margin-bottom: 1em;
        font-weight: bold;
        width: auto; }
        @media screen and (max-width: 768px) {
          #about #wrapper .contentBox section.cw dl dt {
            width: 100%; } }
      #about #wrapper .contentBox section.cw dl dd {
        margin-bottom: 1em; }
        @media screen and (max-width: 768px) {
          #about #wrapper .contentBox section.cw dl dd {
            width: 100%; } }
        #about #wrapper .contentBox section.cw dl dd ul li {
          margin-bottom: 0.5em; }
      #about #wrapper .contentBox section.cw ul {
        margin-bottom: 1em; }
        @media screen and (max-width: 768px) {
          #about #wrapper .contentBox section.cw ul {
            width: 100%; } }
        #about #wrapper .contentBox section.cw ul li {
          margin-bottom: 1em; }
    #about #wrapper .contentBox section.contact p {
      margin-bottom: 0.5em; }
      #about #wrapper .contentBox section.contact p.mail {
        background: rgba(255, 255, 255, 0.8);
        padding: 1em;
        width: auto;
        display: inline-block; }
        #about #wrapper .contentBox section.contact p.mail a {
          letter-spacing: 0.05em; }
    #about #wrapper .contentBox section.contact ul.sns {
      display: flex;
      justify-content: flex-start;
      margin: 1em 0 0 0; }
      #about #wrapper .contentBox section.contact ul.sns li {
        font-size: 20px;
        font-size: 2rem;
        padding-right: 1em; }