@charset "UTF-8";
/* Common
============================================================================*/
@font-face {
  font-family: 'customIwaGo';
  src: url("../fonts/IwaOGoPro-Bd.woff2") format("woff2"), url("../fonts/IwaOGoPro-Bd.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'customDin';
  src: url("../fonts/din.eot") format("eot"), url("../fonts/din.woff2") format("woff2"), url("../fonts/din.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon.ttf") format("truetype"), url("../fonts/icomoon.woff") format("woff"), url("../fonts/icomoon.svg") format("svg");
  font-weight: normal;
  font-style: normal; }

i {
  font-family: 'icomoon' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1; }

.icon-close:before {
  content: "\e904"; }

.icon-circle-left:before {
  content: "\e903"; }

.icon-circle-right:before {
  content: "\e900"; }

.icon-play-circle:before {
  content: "\e901"; }

.icon-zoom-in:before {
  content: "\e902"; }

html {
  font-size: 62.5%;
  width: 100%; }

body {
  font-family: 'customIwaGo', '游ゴシック体', YuGothic, '游ゴシック Medium', 'Yu Gothic Medium', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Hiragino Kaku Gothic ProN', 'Noto Sans Japanese Light', Meiryo, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto; }

body * {
  text-rendering: optimizeLegibility;
  word-break: break-all; }

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

img[src$=".svg"] {
  width: 100%;
  height: auto; }

h1.sectitle .tl {
  font-size: 8.0rem;
  line-height: 1.0em;
  font-family: 'customDin';
  letter-spacing: -0.02em; }
  @media only screen and (max-width: 768px) {
    h1.sectitle .tl {
      font-size: 5.0rem; } }

h1.sectitle .sub {
  font-size: 1.6rem; }
  @media only screen and (max-width: 768px) {
    h1.sectitle .sub {
      font-size: 1.3rem;
      margin-top: 5px; } }

.linebox {
  width: 980px;
  margin: 0 auto;
  padding: 40px 40px 30px 30px;
  border: 3px double #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  @media only screen and (max-width: 768px) {
    .linebox {
      width: 90%;
      display: block;
      padding: 5vw; } }
  .linebox h3 {
    width: 100%;
    margin-bottom: 30px; }
    .linebox h3 .tl {
      font-family: 'customDin';
      font-size: 4.0rem;
      line-height: 1.0em; }
    .linebox h3 .sub {
      font-size: 1.4rem;
      line-height: 1.0em;
      margin-top: 10px; }
  .linebox p {
    font-size: 1.6rem;
    line-height: 1.8em;
    padding-right: 40px; }
    @media only screen and (max-width: 768px) {
      .linebox p {
        font-size: 1.4rem;
        padding-right: 0; } }
    .linebox p + p {
      margin-top: 1.0em; }
  .linebox + .linebox {
    margin-top: 40px; }
  .linebox.twocol .text {
    width: 60%; }
    @media only screen and (max-width: 768px) {
      .linebox.twocol .text {
        width: 100%; } }
  .linebox.twocol .image {
    width: 40%; }
    @media only screen and (max-width: 768px) {
      .linebox.twocol .image {
        width: 100%;
        margin-top: 5vw; } }
    .linebox.twocol .image img {
      display: block;
      margin-left: auto;
      border: 1px solid #ffffff; }
  .linebox.tworow .text {
    width: 100%; }
  .linebox.tworow .image {
    width: 100%;
    margin-top: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }
    @media only screen and (max-width: 768px) {
      .linebox.tworow .image {
        display: block; } }
    .linebox.tworow .image img {
      display: block;
      border: 1px solid #ffffff; }
      @media only screen and (max-width: 768px) {
        .linebox.tworow .image img {
          width: 100%;
          height: auto; }
          .linebox.tworow .image img + img {
            margin-top: 5vw; } }

br.onlysp {
  display: none; }
  @media only screen and (max-width: 768px) {
    br.onlysp {
      display: block; } }

/* Keyvisual
============================================================================*/
#keyvisual {
  width: 100%;
  background-color: #000000;
  padding-bottom: 70px; }
  #keyvisual .wrapper {
    width: 100%;
    height: 600px;
    background-image: url("../images/8000/right-train.jpg");
    background-repeat: no-repeat;
    background-position: right top;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
    @media only screen and (max-width: 768px) {
      #keyvisual .wrapper {
        height: 100vh;
        background-position: right 5vh; } }
    #keyvisual .wrapper .context {
      width: 1200px;
      margin: 0 auto;
      width: 90%; }
      #keyvisual .wrapper .context h1 {
        text-align: left; }
        #keyvisual .wrapper .context h1 img {
          width: 150px; }
        #keyvisual .wrapper .context h1 p {
          margin-top: 20px;
          font-family: 'customDin';
          font-size: 6.0rem;
          color: #ffffff;
          letter-spacing: -0.01em; }
          @media only screen and (max-width: 768px) {
            #keyvisual .wrapper .context h1 p {
              font-size: 11vw; } }

/* Philosophy
============================================================================*/
#philosophy {
  color: #ffffff;
  background-color: #000000;
  padding: 0 0 70px; }
  #philosophy .sectitle {
    text-align: center; }
  #philosophy .context {
    width: 980px;
    margin: 80px auto 0; }
    @media only screen and (max-width: 768px) {
      #philosophy .context {
        width: 90%;
        margin: 10vw auto 0; } }
    #philosophy .context .text {
      font-size: 1.6rem;
      line-height: 1.9em;
      text-align: center; }
      @media only screen and (max-width: 768px) {
        #philosophy .context .text {
          font-size: 1.4rem; }
          #philosophy .context .text br {
            display: none; } }
    #philosophy .context .flow img {
      display: block;
      margin: 40px auto 0; }

/* Story
============================================================================*/
#story {
  color: #ffffff;
  background-color: #000000;
  background-image: url("../images/8000/design-ph.jpg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 40% auto;
  padding: 70px 0 70px; }
  @media only screen and (max-width: 768px) {
    #story {
      background-size: 110% auto;
      background-position: left top; } }
  #story .inner {
    width: 980px;
    margin: 0 auto;
    padding-left: 300px; }
    @media only screen and (max-width: 768px) {
      #story .inner {
        width: 90%;
        padding-left: 0; } }
    #story .inner .sectitle {
      text-align: left; }
      @media only screen and (max-width: 768px) {
        #story .inner .sectitle {
          margin-top: 60vw; } }
    #story .inner .context {
      margin: 80px auto 0; }
      @media only screen and (max-width: 768px) {
        #story .inner .context {
          margin-top: 10vw; } }
      #story .inner .context .text {
        font-size: 1.6rem;
        line-height: 1.9em; }
        @media only screen and (max-width: 768px) {
          #story .inner .context .text {
            font-size: 1.4rem; } }
        #story .inner .context .text p + p {
          margin-top: 1.0em; }
      #story .inner .context .image {
        text-align: right;
        margin-left: auto; }

/* Exterior
============================================================================*/
#exterior {
  color: #ffffff;
  background-color: #000000;
  padding: 70px 0 70px; }
  @media only screen and (max-width: 768px) {
    #exterior {
      padding: 50px 0; } }
  #exterior .wrapper {
    width: 980px;
    margin: 0 auto; }
    @media only screen and (max-width: 768px) {
      #exterior .wrapper {
        width: 90%; } }
    #exterior .wrapper .inner {
      margin-top: 80px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
      @media only screen and (max-width: 768px) {
        #exterior .wrapper .inner {
          margin-top: 10vw;
          display: block; } }
      #exterior .wrapper .inner .context {
        width: 65%;
        padding-right: 40px; }
        @media only screen and (max-width: 768px) {
          #exterior .wrapper .inner .context {
            width: 100%;
            padding-right: 0; } }
        #exterior .wrapper .inner .context p {
          font-size: 1.6rem;
          line-height: 1.9em; }
          @media only screen and (max-width: 768px) {
            #exterior .wrapper .inner .context p {
              font-size: 1.4rem; } }
          #exterior .wrapper .inner .context p + p {
            margin-top: 1.0em; }
      #exterior .wrapper .inner .images {
        width: 35%;
        text-align: right;
        margin-top: -160px; }
        @media only screen and (max-width: 768px) {
          #exterior .wrapper .inner .images {
            width: 100%;
            margin-top: 10vw; } }
        #exterior .wrapper .inner .images img {
          width: 100%;
          height: 230px;
          display: block;
          border: 4px solid #ffffff; }
          #exterior .wrapper .inner .images img + img {
            margin-top: 20px; }

/* Interior
============================================================================*/
#interior {
  color: #ffffff;
  background-color: #000000;
  padding: 70px 0 70px; }
  @media only screen and (max-width: 768px) {
    #interior {
      padding: 50px 0; } }
  #interior .sectitle {
    text-align: center; }
  #interior .introduction {
    width: 980px;
    margin: 80px auto 60px; }
    @media only screen and (max-width: 768px) {
      #interior .introduction {
        width: 90%;
        margin: 10vw auto; } }
    #interior .introduction p {
      font-size: 1.6rem;
      line-height: 1.9em;
      text-align: center; }
      @media only screen and (max-width: 768px) {
        #interior .introduction p {
          font-size: 1.4rem;
          text-align: left; } }
      #interior .introduction p + p {
        margin-top: 1.0em; }

/* Data
============================================================================*/
#data {
  color: #ffffff;
  background-color: #000000;
  padding: 70px 0 70px; }
  @media only screen and (max-width: 768px) {
    #data {
      padding: 50px 0; } }
  #data .sectitle {
    text-align: center; }
  #data .context {
    width: 980px;
    margin: 80px auto 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    @media only screen and (max-width: 768px) {
      #data .context {
        width: 90%;
        margin: 10vw auto 0; } }
    #data .context .text {
      width: 60%;
      font-size: 1.6rem;
      line-height: 1.9em;
      padding-right: 60px; }
    #data .context ul.images {
      width: 40%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between; }
      #data .context ul.images li {
        margin-top: 40px; }
        #data .context ul.images li .image {
          border: 4px solid #ffffff;
          position: relative; }
          #data .context ul.images li .image img {
            display: block; }
          #data .context ul.images li .image span {
            position: absolute;
            display: block;
            width: 48px;
            height: 48px;
            bottom: 15px;
            right: 15px;
            background-color: #001556;
            padding: 8px; }
            #data .context ul.images li .image span i {
              font-size: 3.2rem; }
        #data .context ul.images li .label {
          font-size: 2.2rem;
          line-height: 1.3em;
          position: relative;
          margin-top: 10px; }
          #data .context ul.images li .label span {
            position: absolute;
            font-family: 'customDin';
            font-size: 6.0rem;
            top: 15px;
            left: 0; }
        #data .context ul.images li:nth-of-type(1) {
          margin-top: 0; }

/* Footer
============================================================================*/
footer .inner {
  width: 980px;
  margin: 0 auto;
  padding: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }
  @media only screen and (max-width: 768px) {
    footer .inner {
      width: 100%;
      display: block; } }
  footer .inner .logo img {
    width: 190px; }
  footer .inner .copyright {
    color: #222222;
    font-family: 'customDin';
    font-size: 1.8rem;
    margin-left: auto; }
    @media only screen and (max-width: 768px) {
      footer .inner .copyright {
        font-size: 3.0vw;
        margin-top: 5vw; } }