@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;
  background-color: #000000; }

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;
    text-align: justify; }
    @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; } }
  .linebox.twoline .text {
    width: 100%; }
  .linebox.twoline ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
    .linebox.twoline ul li {
      width: 40%;
      margin-top: 40px; }
      @media only screen and (max-width: 768px) {
        .linebox.twoline ul li {
          width: 100%;
          margin-top: 30px; } }
      .linebox.twoline ul li p {
        padding-right: 0; }
      .linebox.twoline ul li img {
        display: block;
        border: 1px solid #ffffff; }
        .linebox.twoline ul li img + p {
          margin-top: 15px; }
      .linebox.twoline ul li:nth-of-type(even) {
        margin-left: 40px; }
        @media only screen and (max-width: 768px) {
          .linebox.twoline ul li:nth-of-type(even) {
            margin-left: 0; } }
      .linebox.twoline ul li:nth-of-type(1), .linebox.twoline ul li:nth-of-type(2) {
        margin-top: 0; }
      @media only screen and (max-width: 768px) {
        .linebox.twoline ul li:nth-of-type(2) {
          margin-top: 30px; } }

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

/* Keyvisual
============================================================================*/
#keyvisual {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 70px; }
  @media only screen and (max-width: 768px) {
    #keyvisual {
      padding: 0; } }
  #keyvisual .wrapper {
    width: 100%;
    height: 40vw;
    background-image: url("../images/20000/right-train.jpg");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    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 center; } }
    #keyvisual .wrapper .context {
      width: 1200px;
      margin: -8vw auto 0;
      width: 90%; }
      @media only screen and (max-width: 768px) {
        #keyvisual .wrapper .context {
          margin-top: 14vw; } }
      #keyvisual .wrapper .context h1 {
        text-align: left; }
        @media only screen and (max-width: 768px) {
          #keyvisual .wrapper .context h1 {
            text-align: center; } }
        #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; } }
          #keyvisual .wrapper .context h1 p img {
            width: 140px;
            margin-top: 30px; }
            @media only screen and (max-width: 768px) {
              #keyvisual .wrapper .context h1 p img {
                width: 25vw; } }

/* Philosophy
============================================================================*/
#philosophy {
  color: #ffffff;
  background-color: transparent;
  padding: 0;
  margin-top: -8vw; }
  @media only screen and (max-width: 768px) {
    #philosophy {
      margin-top: 0; } }
  #philosophy .sectitle {
    text-align: center; }
  #philosophy .context {
    width: 980px;
    margin: 80px auto 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    @media only screen and (max-width: 768px) {
      #philosophy .context {
        display: block;
        width: 90%;
        margin: 10vw auto 0; } }
    #philosophy .context .text {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      font-size: 1.6rem;
      line-height: 1.9em;
      text-align: left; }
      @media only screen and (max-width: 768px) {
        #philosophy .context .text {
          font-size: 1.4rem; }
          #philosophy .context .text br {
            display: none; } }
      #philosophy .context .text p + p {
        margin-top: 1.0em; }
    #philosophy .context .image {
      width: 390px; }
      @media only screen and (max-width: 768px) {
        #philosophy .context .image {
          width: 100%; } }
      #philosophy .context .image img {
        display: block;
        -webkit-transform: translate(20px, -70px);
        -ms-transform: translate(20px, -70px);
        transform: translate(20px, -70px); }
        @media only screen and (max-width: 768px) {
          #philosophy .context .image img {
            -webkit-transform: none;
            -ms-transform: none;
            transform: none; } }

/* Story
============================================================================*/
#story {
  color: #ffffff;
  padding: 0 0 70px; }
  @media only screen and (max-width: 768px) {
    #story {
      padding: 0 0 50px; }
      #story .sectitle {
        text-align: center; } }
  #story .inner {
    width: 980px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    @media only screen and (max-width: 768px) {
      #story .inner {
        width: 90%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse; } }
    #story .inner .image {
      width: 350px; }
      @media only screen and (max-width: 768px) {
        #story .inner .image {
          width: 90%;
          margin: 30px auto 0; } }
    #story .inner .context {
      margin-left: 40px;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1; }
      @media only screen and (max-width: 768px) {
        #story .inner .context {
          margin-left: 0; } }
      #story .inner .context .text {
        font-size: 1.6rem;
        line-height: 1.9em;
        text-align: left;
        margin-top: 50px; }
        @media only screen and (max-width: 768px) {
          #story .inner .context .text {
            font-size: 1.4rem;
            margin-top: 30px; }
            #story .inner .context .text br {
              display: none; } }
        #story .inner .context .text p + p {
          margin-top: 1.0em; }

/* Exterior
============================================================================*/
#exterior {
  color: #ffffff;
  padding: 70px 0 70px; }
  @media only screen and (max-width: 768px) {
    #exterior {
      padding: 50px 0; }
      #exterior .sectitle {
        text-align: center; } }
  #exterior .wrapper {
    width: 980px;
    margin: 0 auto; }
    @media only screen and (max-width: 768px) {
      #exterior .wrapper {
        width: 90%; } }
    #exterior .wrapper .inner {
      margin-top: 50px;
      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: -50px; }
        @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; }

/* Gallery
============================================================================*/
#gallery {
  color: #ffffff;
  padding: 70px 0;
  position: relative; }
  #gallery .sectitle {
    text-align: center; }
  #gallery .wrapper {
    width: 1200px;
    margin: 50px auto 0;
    height: 80vh; }
    #gallery .wrapper .slick-list {
      height: 100%; }
      #gallery .wrapper .slick-list .slick-track {
        height: 100%; }
        #gallery .wrapper .slick-list .slick-track .item {
          height: 100%; }
          #gallery .wrapper .slick-list .slick-track .item img {
            display: block;
            margin: 0 auto;
            width: auto;
            height: 100%; }
    @media only screen and (max-width: 768px) {
      #gallery .wrapper {
        width: 100%;
        margin: 0 auto;
        padding: 0 5%; }
        #gallery .wrapper .slick-list {
          width: auto; }
          #gallery .wrapper .slick-list .slick-track {
            width: auto; }
            #gallery .wrapper .slick-list .slick-track .item {
              width: auto;
              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; }
              #gallery .wrapper .slick-list .slick-track .item img {
                display: block;
                margin: 0 auto;
                width: auto;
                height: auto; } }
  #gallery .copyright {
    width: 100%;
    position: absolute;
    bottom: 70px;
    right: 0; }
    @media only screen and (max-width: 768px) {
      #gallery .copyright {
        bottom: 30vw;
        right: 5vw; } }
    #gallery .copyright p {
      width: 1200px;
      margin: 0 auto;
      font-family: 'customDin';
      font-size: 1.6rem;
      text-align: right;
      color: rgba(255, 255, 255, 0.75); }
      @media only screen and (max-width: 768px) {
        #gallery .copyright p {
          width: 100%;
          font-size: 1.2rem; } }

/* Interior
============================================================================*/
#interior {
  color: #ffffff;
  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: 50px 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; }

/* Movie
============================================================================*/
#movie {
  color: #ffffff;
  padding: 70px 0 70px; }
  @media only screen and (max-width: 768px) {
    #movie {
      padding: 50px 0; } }
  #movie .sectitle {
    text-align: center; }
  #movie ul {
    width: 980px;
    margin: 50px auto 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    @media only screen and (max-width: 768px) {
      #movie ul {
        width: 90%;
        display: block; } }
    #movie ul li {
      width: 48%;
      margin-top: 45px;
      text-align: center; }
      @media only screen and (max-width: 768px) {
        #movie ul li {
          width: 100%;
          margin-top: 30px; } }
      #movie ul li p {
        font-size: 1.6rem;
        text-align: center;
        padding-bottom: 20px; }
        @media only screen and (max-width: 768px) {
          #movie ul li p {
            font-size: 1.4rem;
            padding-bottom: 15px; } }
      #movie ul li img {
        display: block;
        border: 1px solid #ffffff;
        margin: 0 auto; }
      #movie ul li:nth-of-type(odd) {
        margin-left: auto; }
      #movie ul li:nth-of-type(1) {
        width: 100%;
        margin-top: 0; }

/* Data
============================================================================*/
#data {
  color: #ffffff;
  padding: 70px 0 70px; }
  @media only screen and (max-width: 768px) {
    #data {
      padding: 30px 0 50px; } }
  #data .sectitle {
    text-align: center; }
  #data .context {
    width: 980px;
    margin: 50px 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; }

/* Footer
============================================================================*/
footer {
  background-color: #ffffff; }
  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; } }

/* Slider
============================================================================*/
.slick-slider {
  position: relative;
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent; }

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0; }
  .slick-list:focus {
    outline: none; }
  .slick-list.dragging {
    cursor: pointer;
    cursor: hand; }

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto; }
  .slick-track:before, .slick-track:after {
    content: "";
    display: table; }
  .slick-track:after {
    clear: both; }
  .slick-loading .slick-track {
    visibility: hidden; }

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none; }
  [dir="rtl"] .slick-slide {
    float: right; }
  .slick-slide img {
    display: block; }
  .slick-slide.slick-loading img {
    display: none; }
  .slick-slide.dragging img {
    pointer-events: none; }
  .slick-initialized .slick-slide {
    display: block; }
  .slick-loading .slick-slide {
    visibility: hidden; }
  .slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent; }

.slick-arrow.slick-hidden {
  display: none; }

.slick-dots {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  margin-top: 20px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  @media only screen and (max-width: 768px) {
    .slick-dots {
      margin-top: 0; } }
  .slick-dots li {
    width: 10px;
    height: 10px; }
    .slick-dots li button {
      color: transparent;
      width: 10px;
      height: 10px;
      position: relative; }
      .slick-dots li button::before {
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 50%; }
    .slick-dots li + li {
      margin-left: 15px; }
    .slick-dots li.slick-active button::before {
      background-color: white; }