body,
html {
  min-height: 100%;
  width: 100vw;
  overflow-x: hidden;
  letter-spacing: .2em;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: #333; }

section {
  min-height: 100vh;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

a.map-icon::after {
  font-family: 'Material Icons';
  content: "room"; }

.annotation {
  font-size: .6em;
  color: darkolivegreen;
  text-align: center; }

#pagetop {
  position: relative; }
  #pagetop .contents__pagetop {
    margin: auto; }
  #pagetop .pagetop-logo {
    width: 120px; }
  #pagetop .pagetop-cc {
    position: absolute;
    top: 20px;
    right: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start; }
    @media screen and (min-width: 768px) {
      #pagetop .pagetop-cc {
        right: auto;
        -webkit-transform: translateX(200px);
        -ms-transform: translateX(200px);
        transform: translateX(200px); } }
    #pagetop .pagetop-cc img {
      width: 30px;
      margin: 0 10px;
      opacity: .7; }
  #pagetop .pagetop-map {
    width: 260px;
    position: absolute;
    bottom: -130px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    opacity: .7; }

#message .contents {
  margin: auto;
  padding: 20px;
  width: 100%;
  max-width: 800px; }
  #message .contents-header {
    margin-bottom: 40px; }
    #message .contents-header--title {
      position: relative;
      font-size: 1.4em;
      letter-spacing: .2em;
      margin: 1.6em 0;
      text-align: center; }
      @media screen and (min-width: 768px) {
        #message .contents-header--title {
          font-size: 2em;
          letter-spacing: .4em; } }
      #message .contents-header--title::before {
        content: '';
        position: absolute;
        bottom: -.4em;
        display: inline-block;
        width: 40px;
        height: 2px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        background-color: #333;
        border-radius: 2px; }
    #message .contents-header--image {
      text-align: center; }
      #message .contents-header--image img {
        width: 180px; }
  #message .contents-body {
    margin-bottom: 40px; }
    #message .contents-body p {
      line-height: 1.6; }
      #message .contents-body p:not(:last-of-type) {
        margin-bottom: 1em; }
      #message .contents-body p.signature {
        margin-top: 2em;
        text-align: right;
        font-style: italic; }

#works .contents {
  margin: auto;
  padding: 20px;
  width: 100%;
  max-width: 800px;
  background: rgba(255, 255, 255, 0.8); }
  #works .contents-header {
    margin-bottom: 40px; }
    #works .contents-header--title {
      position: relative;
      font-size: 1.4em;
      letter-spacing: .2em;
      margin: 1.6em 0;
      text-align: center; }
      @media screen and (min-width: 768px) {
        #works .contents-header--title {
          font-size: 2em;
          letter-spacing: .4em; } }
      #works .contents-header--title::before {
        content: '';
        position: absolute;
        bottom: -.4em;
        display: inline-block;
        width: 40px;
        height: 2px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        background-color: #333;
        border-radius: 2px; }
    #works .contents-header--image {
      text-align: center; }
      #works .contents-header--image img {
        width: 180px; }
  #works .contents-body {
    margin-bottom: 40px; }
    #works .contents-body p {
      line-height: 1.6; }
      #works .contents-body p:not(:last-of-type) {
        margin-bottom: 1em; }
      #works .contents-body p.signature {
        margin-top: 2em;
        text-align: right;
        font-style: italic; }

#works .works-year {
  margin-bottom: 1em; }
  #works .works-year:not(:first-child) {
    border-top: 1px solid #000;
    padding-top: 1em; }
  #works .works-year::before {
    font-family: 'Material Icons';
    content: 'star';
    position: relative;
    bottom: -3px; }

ul.works-list {
  padding-left: 1.2em;
  letter-spacing: 0.12; }
  ul.works-list > li {
    margin-bottom: .8em;
    list-style-type: disc; }

#company {
  position: relative; }
  #company .contents {
    margin: auto;
    padding: 20px;
    width: 100%;
    max-width: 800px; }
    #company .contents-header {
      margin-bottom: 40px; }
      #company .contents-header--title {
        position: relative;
        font-size: 1.4em;
        letter-spacing: .2em;
        margin: 1.6em 0;
        text-align: center; }
        @media screen and (min-width: 768px) {
          #company .contents-header--title {
            font-size: 2em;
            letter-spacing: .4em; } }
        #company .contents-header--title::before {
          content: '';
          position: absolute;
          bottom: -.4em;
          display: inline-block;
          width: 40px;
          height: 2px;
          left: 50%;
          -webkit-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
          transform: translateX(-50%);
          background-color: #333;
          border-radius: 2px; }
      #company .contents-header--image {
        text-align: center; }
        #company .contents-header--image img {
          width: 80px; }
    #company .contents-body {
      margin-bottom: 40px; }
      #company .contents-body p {
        line-height: 1.6; }
        #company .contents-body p:not(:last-of-type) {
          margin-bottom: 1em; }
        #company .contents-body p.signature {
          margin-top: 2em;
          text-align: right;
          font-style: italic; }
  #company .contents-header--image img {
    position: absolute;
    top: -40px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%); }
  #company .tbl-company {
    width: 100%;
    border-collapse: collapse; }
    #company .tbl-company th, #company .tbl-company td {
      border-bottom: 1px solid slategray;
      padding: 1em; }
    #company .tbl-company a:link,
    #company .tbl-company a:visited {
      color: royalblue; }
    #company .tbl-company a:hover {
      color: salmon; }
    #company .tbl-company .maplink {
      display: block;
      text-align: center; }
      @media screen and (min-width: 768px) {
        #company .tbl-company .maplink {
          display: inline; } }
  #company ul {
    padding-left: 1.1em;
    margin: 0; }
  #company dt {
    font-weight: bold; }
  #company dd {
    padding-left: 1em; }
    #company dd:not(:last-of-type) {
      margin-bottom: .8em; }

#recruit .contents {
  margin: auto;
  padding: 20px;
  width: 100%;
  max-width: 800px; }
  #recruit .contents-header {
    margin-bottom: 40px; }
    #recruit .contents-header--title {
      position: relative;
      font-size: 1.4em;
      letter-spacing: .2em;
      margin: 1.6em 0;
      text-align: center; }
      @media screen and (min-width: 768px) {
        #recruit .contents-header--title {
          font-size: 2em;
          letter-spacing: .4em; } }
      #recruit .contents-header--title::before {
        content: '';
        position: absolute;
        bottom: -.4em;
        display: inline-block;
        width: 40px;
        height: 2px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        background-color: #333;
        border-radius: 2px; }
    #recruit .contents-header--image {
      text-align: center; }
      #recruit .contents-header--image img {
        width: 120px; }
  #recruit .contents-body {
    margin-bottom: 40px; }
    #recruit .contents-body p {
      line-height: 1.6; }
      #recruit .contents-body p:not(:last-of-type) {
        margin-bottom: 1em; }
      #recruit .contents-body p.signature {
        margin-top: 2em;
        text-align: right;
        font-style: italic; }

#equipment .contents {
  margin: auto;
  padding: 20px;
  width: 100%;
  max-width: 800px; }
  #equipment .contents-header {
    margin-bottom: 40px; }
    #equipment .contents-header--title {
      position: relative;
      font-size: 1.4em;
      letter-spacing: .2em;
      margin: 1.6em 0;
      text-align: center; }
      @media screen and (min-width: 768px) {
        #equipment .contents-header--title {
          font-size: 2em;
          letter-spacing: .4em; } }
      #equipment .contents-header--title::before {
        content: '';
        position: absolute;
        bottom: -.4em;
        display: inline-block;
        width: 40px;
        height: 2px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        background-color: #333;
        border-radius: 2px; }
    #equipment .contents-header--image {
      text-align: center; }
      #equipment .contents-header--image img {
        width: 180px; }
  #equipment .contents-body {
    margin-bottom: 40px; }
    #equipment .contents-body p {
      line-height: 1.6; }
      #equipment .contents-body p:not(:last-of-type) {
        margin-bottom: 1em; }
      #equipment .contents-body p.signature {
        margin-top: 2em;
        text-align: right;
        font-style: italic; }

#equipment .tbl-equipments {
  width: 100%;
  border-collapse: collapse; }
  #equipment .tbl-equipments th, #equipment .tbl-equipments td {
    border-bottom: 1px solid slategray;
    padding: 1em; }
  #equipment .tbl-equipments a:link,
  #equipment .tbl-equipments a:visited {
    color: royalblue; }
  #equipment .tbl-equipments a:hover {
    color: salmon; }
  #equipment .tbl-equipments th, #equipment .tbl-equipments td {
    text-align: center; }

#pagetop,
#company,
#works {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat; }

#pagetop {
  background-image: url("../images/bg_image_pagetop.jpg"); }

#company {
  background-image: url("../images/bg_image_company.jpg"); }

#works {
  background-image: url("../images/bg_image_works.jpg"); }

#recruit img {
  width: 200px; }

.contact {
  text-align: center;
  margin-top: 40px; }
  .contact_button {
    display: inline-block; }
    .contact_button a {
      color: #fff;
      background: darkred;
      border-radius: 30px;
      display: block;
      padding: .8em 1.8em;
      text-decoration: none; }
      .contact_button a:hover {
        background: salmon; }

footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  color: #C6BA9A;
  background-color: darkred; }
  footer img {
    width: 160px; }

.footer-blk {
  margin: 50px auto;
  text-align: center; }
  .footer-blk address {
    margin-top: 14px; }
  .footer-blk .address--company-name {
    font-size: 1.4em;
    font-weight: bold; }