﻿
.contents {
  text-align: center; }

.slider01 {
  position: relative;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto 50px;
  height: 100%; }
  .slider01 .slick-slide img {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100vh; }
    @media all and (max-width: 980px) {
      .slider01 .slick-slide img {
        height: 100vh; } }

.slide-dots {
  text-align: right; }
  @media all and (max-width: 980px) {
    .slide-dots {
      margin: -40px 20px 40px 0; } }
  .slide-dots li {
    display: inline-block;
    margin: 0 22px 0 0; }
    .slide-dots li button {
      position: relative;
      text-indent: -9999px; }
      .slide-dots li button:before {
        content: '・';
        color: #eaeaea;
        font-size: 40px;
        text-indent: 0px;
        position: absolute;
        top: 0;
        left: 0; }
    .slide-dots li.slick-active button:before {
      content: '・';
      color: #333; }

#map {
  min-height: 480px;
  width: 60%; }
  @media all and (max-width: 980px) {
    #map {
      width: 100vw;
      margin: 0 0 0 -15px; } }
  @media all and (max-width: 620px) {
    #map {
      margin: 0 0 0 -10px; } }

.map-list {
  margin: 30px 0 150px 0; }
  .map-list h2 {
    letter-spacing: 5px;
    font-size: 26px;
    font-size: 2.6rem;
    margin: 0 0 40px 0; }
    @media all and (min-width: 981px) {
      .map-list h2 {
        width: 50%;
        margin: 120px 0 60px 0; } }
  .map-list p {
    font-size: 14px;
    font-size: 1.4rem;
    margin: 0 0 30px 0;
    text-align: left; }
  .map-list .map-wrapper {
    display: flex;
    margin: 0 0 50px 0;
    padding-top: 30px; }
    @media all and (max-width: 980px) {
      .map-list .map-wrapper {
        display: block; } }
    .map-list .map-wrapper .place {
      background: #eeeeee;
      width: 40%;
      padding: 30px 15px 30px 20px; }
      @media all and (max-width: 980px) {
        .map-list .map-wrapper .place {
          width: 100vw;
          margin: 0 0 0 -15px; } }
      @media all and (max-width: 620px) {
        .map-list .map-wrapper .place {
          margin: 0 0 0 -10px; } }
      .map-list .map-wrapper .place li {
        cursor: pointer; }
      .map-list .map-wrapper .place li:hover {
        opacity: .6; }
      .map-list .map-wrapper .place figure {
        display: flex;
        margin: 0 0 30px 0; }
        .map-list .map-wrapper .place figure img {
          width: 110px;
          height: 80px;
          object-fit: cover; }
        .map-list .map-wrapper .place figure figcaption {
          text-align: left;
          margin: 0 0 0 15px; }
          .map-list .map-wrapper .place figure figcaption h3 {
            font-size: 14px;
            font-size: 1.4rem;
            line-height: 1.2em;
            margin-bottom: 8px; }
          .map-list .map-wrapper .place figure figcaption p {
            font-size: 14px;
            font-size: 1.4rem;
            line-height: 1.2em;
            margin-bottom: 8px;
            font-weight: bold; }

@media all and (min-width: 981px) {
  .beginning {
    display: flex;
    justify-content: space-between;
    margin: 100px auto 40px;
    max-width: 950px; } }
@media all and (max-width: 620px) {
  .beginning p {
    line-height: 1.8em;
    text-align: justify;
    text-justify: inter-ideograph; }
    .beginning p br {
      display: none; } }

.product-list {
  margin: 0 0 150px 0; }
  .product-list h2 {
    font-size: 24px;
    font-size: 2.4rem;
    margin: 0 auto 50px;
    padding: 0 0 10px 0;
    width: 120px;
    border-bottom: 1px solid #333; }
  .product-list p {
    font-size: 14px;
    font-size: 1.4rem;
    margin: 0 0 50px 0; }
  .product-list .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 0 40px 0; }
    .product-list .row .item {
      width: calc((100% - 30px) / 4); }
    .product-list .row a {
      display: block; }
    .product-list .row img {
      display: block;
      width: 100%; }
    .product-list .row li {
      margin: 0 0 10px 0; }
    @media all and (max-width: 620px) {
      .product-list .row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between; }
        .product-list .row .item {
          width: calc((100% - 10px) / 2); } }

.concept {
  max-width: 950px;
  margin: 0 auto 150px; }
  .concept h2 {
    font-size: 24px;
    font-size: 2.4rem;
    margin: 0 auto 50px;
    padding: 0 0 10px 0;
    width: 120px;
    border-bottom: 1px solid #333; }
  .concept .concept-wrapper {
    display: flex;
    justify-content: space-between; }
    @media all and (max-width: 980px) {
      .concept .concept-wrapper {
        display: block; } }
    .concept .concept-wrapper .slider02 {
      max-width: 400px;
      max-height: 400px; }
      @media all and (max-width: 980px) {
        .concept .concept-wrapper .slider02 {
          margin: 0 auto; } }
      @media all and (max-width: 620px) {
        .concept .concept-wrapper .slider02 {
          max-width: 100%;
          max-height: 100%; } }
      .concept .concept-wrapper .slider02 img {
        height: 400px;
        display: block;
        object-fit: cover;
        border-radius: 2px; }
    .concept .concept-wrapper .txt {
      text-align: left; }
      @media all and (max-width: 980px) {
        .concept .concept-wrapper .txt {
          text-align: center;
          max-width: 600px;
          margin: 60px auto 0; } }
      @media all and (max-width: 620px) {
        .concept .concept-wrapper .txt {
          text-align: left; } }
      .concept .concept-wrapper .txt h3 {
        font-size: 20px;
        font-size: 2rem;
        margin: 0 0 40px 0; }
        @media all and (max-width: 620px) {
          .concept .concept-wrapper .txt h3 {
            font-size: 18px;
            font-size: 1.8rem;
            margin: 0 0 20px 0; } }
      @media all and (max-width: 620px) {
        .concept .concept-wrapper .txt p {
          line-height: 1.8em;
          text-align: justify;
          text-justify: inter-ideograph; }
          .concept .concept-wrapper .txt p br {
            display: none; } }
      .concept .concept-wrapper .txt .button-basic {
        margin: 40px auto 0; }
        @media all and (min-width: 981px) {
          .concept .concept-wrapper .txt .button-basic {
            margin: 40px 0 0 0; } }

.ig-top {
  margin: 0 auto 150px; }
  .ig-top h2 {
    font-size: 24px;
    font-size: 2.4rem;
    margin: 0 auto 50px;
    padding: 0 0 10px 0;
    width: 180px;
    border-bottom: 1px solid #333; }
  .ig-top .ig-button:before {
    content: url(../image/ig_logo.svg);
    position: relative;
    display: inline-block;
    width: 15px;
    margin: 0 10px 0 0;
    top: 2px; }
  @media all and (max-width: 620px) {
    .ig-top p {
      margin: 0 0 40px 0; } }

.ig-list {
  display: flex;
  max-width: 990px;
  flex-wrap: wrap;
  margin: 40px auto 40px;
  padding: 0; }
  .ig-list li {
    width: calc(99.4% / 6);
    height: auto;
    margin-bottom: 1px;
    margin-right: 1px; }
    @media all and (min-width: 981px) {
      .ig-list li:nth-of-type(6) {
        margin-right: 0; }
      .ig-list li:nth-of-type(12) {
        margin-right: 0; } }
    @media all and (max-width: 980px) {
      .ig-list li {
        width: calc(99.6% / 3); }
        .ig-list li:nth-of-type(3) {
          margin-right: 0; }
        .ig-list li:nth-of-type(6) {
          margin-right: 0; }
        .ig-list li:nth-of-type(9) {
          margin-right: 0; }
        .ig-list li:nth-of-type(12) {
          margin-right: 0; } }
    @media all and (max-width: 620px) {
      .ig-list li {
        width: calc(99.4% / 3); } }
    .ig-list li a {
      padding-top: 100%;
      width: 100%;
      position: relative;
      display: block; }
    .ig-list li img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }

#firstHeading {
  font-size: 18px;
  font-size: 1.8rem; }

#bodyContent .button-basic {
  width: 200px; }
