/* CSS Document */
/*============================================
responsive
============================================*/
@media screen and (max-width: 897px) {
  html, body {
    overflow-x: hidden !important; } }

.inner {
  max-width: 1140px;
  margin: auto; }
  @media screen and (max-width: 897px) {
    .inner {
      margin: 0 20px; } }

.inner2 {
  max-width: 90%;
  margin: auto; }
  @media screen and (max-width: 897px) {
    .inner2 {
      margin: 0 20px; } }

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

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

/* ============================
mainview
============================ */
.mainview {
  padding: 120px 0; }
  @media screen and (max-width: 897px) {
    .mainview {
      padding: 40px 0; } }
  .mainview__logo {
    text-align: center; }
    @media screen and (max-width: 897px) {
      .mainview__logo {
        width: 50%;
        margin: auto; } }
  .mainview__img {
    padding: 120px 0; }
    @media screen and (max-width: 897px) {
      .mainview__img {
        padding: 40px 0 20px 0; } }
    .mainview__img img {
      border-radius: 15px; }
  .mainview__copy {
    text-align: center;
    font-size: 3.2rem; }
    @media screen and (max-width: 897px) {
      .mainview__copy {
        font-size: 1.7rem;
        font-weight: 700; } }

/* ============================
brand
============================ */
.brand {
  padding: 0 0 120px 0; }
  @media screen and (max-width: 897px) {
    .brand {
      padding: 0 0 40px 0; } }
  .brand__headline {
    text-align: center;
    padding: 0 0 40px 0; }
    @media screen and (max-width: 897px) {
      .brand__headline {
        padding: 0 0 20px 0; } }
    .brand__headline span {
      font-family: futura-pt, sans-serif;
      font-weight: 500;
      font-style: normal;
      font-size: 4.0rem;
      line-height: 1; }
    .brand__headline h2 {
      font-size: 1.5rem; }
  .brand__copy {
    text-align: center; }
    @media screen and (max-width: 897px) {
      .brand__copy {
        text-align: left; } }
    .brand__copy p {
      font-size: 1.8rem !important; }
      @media screen and (max-width: 897px) {
        .brand__copy p {
          font-size: 1.6rem !important; } }
      .brand__copy p:not(:first-of-type) {
        padding: 30px 0 0 0; }
        @media screen and (max-width: 897px) {
          .brand__copy p:not(:first-of-type) {
            padding: 10px 0 0 0; } }

/* ============================
concept
============================ */
.concept {
  padding: 120px 0 0 0;
  background: #f7f7f7; }
  @media screen and (max-width: 897px) {
    .concept {
      padding: 40px 0 0 0; } }
  .concept__headline {
    text-align: center;
    padding: 0 0 40px 0; }
    @media screen and (max-width: 897px) {
      .concept__headline {
        padding: 0 0 20px 0; } }
    .concept__headline span {
      font-family: futura-pt, sans-serif;
      font-weight: 500;
      font-style: normal;
      font-size: 4.0rem;
      line-height: 1; }
    .concept__headline h2 {
      font-size: 1.5rem; }
  .concept__copy__ttl {
    text-align: center; }
    .concept__copy__ttl h3 {
      font-weight: 400;
      font-size: 3.2rem; }
      @media screen and (max-width: 897px) {
        .concept__copy__ttl h3 {
          font-size: 1.7rem;
          font-weight: 700; } }
  .concept__copy__box {
    padding: 60px 0 0 0; }
    @media screen and (max-width: 897px) {
      .concept__copy__box {
        padding: 20px 0 0 0; } }
    .concept__copy__box__item {
      background: #fff;
      border: 1px solid #e9e9e9;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      font-size: 1.8rem !important; }
      @media screen and (max-width: 897px) {
        .concept__copy__box__item {
          display: block;
          font-size: 1.6rem;
          line-height: 1.6 !important;
          text-align: justify; } }
      .concept__copy__box__item:not(:last-of-type) {
        margin: 0 0 10px 0; }
      .concept__copy__box__item .ttl {
        text-align: center;
        width: 20%;
        border-right: 1px solid #e9e9e9;
        font-weight: 700; }
        @media screen and (max-width: 897px) {
          .concept__copy__box__item .ttl {
            width: 100%;
            border-right: none;
            border-bottom: 1px solid #e9e9e9;
            padding: 0 0 5px 0;
            margin: 0 0 5px 0; } }
      .concept__copy__box__item .txt {
        width: 70%; }
        @media screen and (max-width: 897px) {
          .concept__copy__box__item .txt {
            width: 100%; } }
  .concept__img__icon {
    text-align: center;
    padding: 60px 0 0 0;
    z-index: 15;
    position: relative; }
    @media screen and (max-width: 897px) {
      .concept__img__icon {
        padding: 20px 0 0 0;
        width: 80%;
        margin: auto; } }
  .concept__img__gallery {
    position: relative;
    margin-top: -60px;
    z-index: 10; }
    @media screen and (max-width: 897px) {
      .concept__img__gallery {
        margin-top: 20px; } }
    .concept__img__gallery .slider {
      width: 100%;
      margin: 0 auto;
      line-height: 0; }
      .concept__img__gallery .slider img {
        width: 100%;
        vertical-align: bottom;
        margin: 0;
        padding: 0; }
      .concept__img__gallery .slider .slick-slide {
        height: auto !important; }

/* ============================
vision
============================ */
.vision {
  padding: 120px 0; }
  @media screen and (max-width: 897px) {
    .vision {
      padding: 40px 0; } }
  .vision__headline {
    text-align: center;
    padding: 0 0 40px 0; }
    @media screen and (max-width: 897px) {
      .vision__headline {
        padding: 0 0 20px 0; } }
    .vision__headline span {
      font-family: futura-pt, sans-serif;
      font-weight: 500;
      font-style: normal;
      font-size: 4.0rem;
      line-height: 1; }
    .vision__headline h2 {
      font-size: 1.5rem; }
  .vision__box__item h3 {
    text-align: center;
    font-size: 2.2rem; }
    @media screen and (max-width: 897px) {
      .vision__box__item h3 {
        font-size: 1.7rem;
        font-weight: 700; } }
  .vision__box__item:not(:first-of-type) {
    padding: 40px 0 0 0; }
  .vision__box__item ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }
    @media screen and (max-width: 897px) {
      .vision__box__item ul {
        display: block; } }
    .vision__box__item ul li {
      width: 48.5%;
      background: #f7f7f7;
      margin: 30px 0 0 0;
      padding: 20px;
      border: 1px solid #e9e9e9;
      box-sizing: border-box;
      border-radius: 5px;
      font-size: 1.8rem !important; }
      @media screen and (max-width: 897px) {
        .vision__box__item ul li {
          width: 100%;
          margin: 10px 0 0 0;
          padding: 10px;
          font-size: 1.6rem !important;
          line-height: 1.6;
          text-align: justify; } }

/* ============================
cred
============================ */
.cred {
  padding: 120px 0;
  margin: 0 60px 120px 60px;
  background: #f7f7f7;
  border-radius: 15px; }
  @media screen and (max-width: 897px) {
    .cred {
      padding: 20px 0;
      margin: 0 20px 40px 20px; } }
  .cred__headline {
    text-align: center;
    padding: 0 0 40px 0; }
    @media screen and (max-width: 897px) {
      .cred__headline {
        padding: 0 0 20px 0; } }
    .cred__headline span {
      font-family: futura-pt, sans-serif;
      font-weight: 500;
      font-style: normal;
      font-size: 4.0rem;
      line-height: 1; }
    .cred__headline h2 {
      font-size: 1.5rem; }
  .cred__box {
    text-align: center; }
    @media screen and (max-width: 897px) {
      .cred__box {
        text-align: left; } }
    .cred__box__item {
      font-size: 2.0rem; }
      @media screen and (max-width: 897px) {
        .cred__box__item {
          font-size: 1.6rem;
          line-height: 1.6;
          text-align: justify; } }
      .cred__box__item:not(:last-of-type) {
        padding: 0 0 30px 0; }
        @media screen and (max-width: 897px) {
          .cred__box__item:not(:last-of-type) {
            padding: 0 0 15px 0; } }