@charset "UTF-8";
/* CSS Document */

@media screen and (min-width: 320px) {
  /* スマホ用レイアウト 320px以上の範囲に収めるデザインはこの中に記述 */

  .color {
    color: #ED9E31;
  }
  /*==============================================================
    　　Space　真山の空間
  ==============================================================*/
  .main {
    overflow: hidden;
  }

  .main-title {
    line-height: 1.2;
    padding: 25.78vw 0 11.33vw;
    padding-left: 5.21vw;
    padding-right: 5.21vw;
  }

  /* タイトル（日本語） */
  .main-title .title-jp {
    display: block;
    font-size: 8.33vw;
    font-weight: 600;
    letter-spacing: .1em;
    margin-top: 1.56vw;
  }

  /* タイトル（英語） */
  .main-title .title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 4.17vw;
    line-height: 1.2;
    letter-spacing: .1em;
    color: #ED9E31;
    padding-top: 3.78vw;
    position: relative;
    writing-mode: unset;
    padding-top: 0;
    padding-left: 2.73vw;
    margin-bottom: -.52vw;
  }

  /* ドット */
  .main-title .title:before {
    content: "";
    width: 1.17vw;
    height: 1.17vw;
    background: currentColor;
    border-radius: 50%;
    position: absolute;
    top: 7px;
    left: 0;
    margin: auto;
  }


  /*=============== 　　content　　===============*/
  .content {
    /* padding-top: 13.8vw; */
    /* padding-top: 5vw; */
    padding-left: 5.21vw;
    padding-right: 5.21vw;
  }

  .space-item {
    position: relative;
  }

  .space-item .item-img {
    width: 100%;
    height: 64.8vw;
    margin-bottom: 7.29vw;
    overflow: hidden;
  }

  .space-item.end .item-img{
    margin-bottom: 0;
  }

  .space-item .item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .space-item .text {
    /* font-size: 3.65vw; */
    font-size: 13px;
    line-height: 1.7;
    letter-spacing: 0.08em;
    position: absolute;
    left: 0;
    bottom: 0;
    /* background: rgba(0, 0, 0, 0.3); */
    /* padding: 12px 12px 8px; */
    padding: 35px 12px 8px;

    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,   /* 上は薄め */
      rgba(0, 0, 0, 0.7) 50%
    );
    width: 100%;
  }

  /* パンくずリスト */
  .breadcrumbs {
    /* padding: 11.2vw 5.21vw 5.99vw; */
    padding: 18vw 5.21vw 5.99vw;
  }

  .breadcrumbs .list-item {
    display: inline;
    font-size: 2.86vw;
    line-height: 1.8;
    letter-spacing: .1em;
    color: #939393;
  }

  .breadcrumbs .list-item a {
    color: #fff;
  }

  .breadcrumbs .list-item a:after {
    display: inline;
    content: "/";
    margin-left: 1.43vw;
    color: #939393;
  }

  .footer {
    margin-top: 0;
  }


}


@media screen and (min-width: 640px) {
  /* タブレット用レイアウト 640px以上の範囲に収めるデザインはこの中に記述 */

  /*==============================================================
    　　TB_Space　真山の空間
  ==============================================================*/
  .main-title {
    max-width: 84.98vw;
    width: 100%;
    margin-inline: auto;
    padding: 18vw 0 9vw;
  }

  /* タイトル（日本語） */
  .main-title .title-jp {
    /* font-size: 34px; */
    font-size: 36px;
    line-height: 1.45;
    letter-spacing: 0;
    margin-right: .59vw;
    margin-left: -2px;
    margin-top: 1vw;
  }

  /* タイトル（英語） */
  .main-title .title {
    /* font-size: 24px; */
    font-size: 15px;
    padding-left: 1.8vw;
  }

  /* ドット */
  .main-title .title:before {
    width: 5px;
    height: 5px;
    top: 7px;
  }

  /*=============== 　　content　　===============*/
  .content {
    width: 100%;
    max-width: 84.98vw;
    margin: 0;
    margin-inline: auto;
    /* padding: 100px 60px 0; */
    padding: 0;

    display: grid;
    grid-template:
      "item-01 item-01" auto
      "item-02 item-03" auto
      "item-04 item-04" auto
      "item-05 item-06" auto
      "item-07 item-07" auto
      "item-08 auto" auto
      / 1fr 1fr;
    gap: 25px;
  }

  .space-item.item-01 {
    grid-area: item-01;
  }
  .space-item.item-02 {
    grid-area: item-02;
  }
  .space-item.item-03 {
    grid-area: item-03;
  }
  .space-item.item-04 {
    grid-area: item-04;
  }
  .space-item.item-05 {
    grid-area: item-05;
  }
  .space-item.item-06 {
    grid-area: item-06;
  }
  .space-item.item-07 {
    grid-area: item-07;
  }
  .space-item.item-08 {
    grid-area: item-08;
  }

  .space-item .item-img {
    /* height: 400px; */
    margin-bottom: 0;
    width: 100%;
    height: auto;
    overflow: hidden;
    aspect-ratio: 3 / 1.3;
  }

  .space-item.item-02 .item-img,
  .space-item.item-03 .item-img,
  .space-item.item-05 .item-img,
  .space-item.item-06 .item-img,
  .space-item.item-08 .item-img {
    aspect-ratio: auto;
    height: 36vw;
  }

  .space-item .text {
    font-size: 14px;
    padding: 20px 20px 12px;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,   /* 上は薄め */
      rgba(0, 0, 0, 0.5) 40%,
      rgba(0, 0, 0, 0.7) 100%
    );
  }

  /* パンくずリスト */
  .breadcrumbs {
    padding: 9.5vw 60px 2.5vw;
  }

  .breadcrumbs .list-item {
    font-size: 12px;
  }

  .breadcrumbs .list-item a:after {
    margin-right: .37vw;
    margin-left: .81vw;
  }


}


@media screen and (min-width: 1024px) {
  /* パソコン用レイアウト 1024px以上の範囲に収めるデザインはこの中に記述 */
  /*==============================================================
    　　PC_Space　真山の空間
  ==============================================================*/
  .main-title {
    line-height: 1.2;
    padding: 13.19vw 0 6.67vw;
  }

  /* タイトル（日本語） */
  .main-title .title-jp {
    font-size: 3.22vw;
    margin-top: 1.03vw;
  }

  /* タイトル（英語） */
  .main-title .title {
    font-size: 1.47vw;
    padding-left: 1.03vw;
  }

  /* ドット */
  .main-title .title:before {
    width: .44vw;
    height: .44vw;
    top: .66vw;
    left: 0;
  }

  /*=============== 　　content　　===============*/
  .content {
    width: 100%;
    margin-inline: auto;
    padding: 0;

    grid-template:
      "item-01 item-01 item-01 item-01 item-01 item-01" auto
      "item-02 item-02 item-03 item-03 item-04 item-04" auto
      "item-05 item-05 item-05 item-05 item-05 item-05" auto
      "item-06 item-06 item-06 item-07 item-07 item-07" auto
      "item-08 item-08 item-08 item-08 item-08 item-08" auto
      / 1fr 1fr 1fr 1fr 1fr 1fr;
  }

  /* ３列 */
  .space-item.item-02 .item-img,
  .space-item.item-03 .item-img,
  .space-item.item-04 .item-img {
    height: 380px;
  }

  /* ２列 */
  .space-item.item-06 .item-img,
  .space-item.item-07 .item-img {
    height: 350px;
  }

  /* １列 */
  .space-item.item-05 .item-img,
  .space-item.item-08 .item-img {
    height: auto;
    aspect-ratio: 3 / 1.3;
  }

  .space-item .text {
    font-size: 14px;
    padding: 20px 25px 12px;
  }

  /* パンくずリスト */
  .breadcrumbs {
    max-width: 84.98vw;
    margin: 0 auto;
    padding: 10vw 0 2vw;
  }

  .breadcrumbs .list-item {
    font-size: .95vw;
  }

}

@media screen and (min-width: 1400px) {
  /* パソコン用レイアウト 1400px以上の範囲に収めるデザインはこの中に記述 */
  /*==============================================================
    　　PC-big_Space　真山の空間
  ==============================================================*/
  .main-title {
    max-width: 1160px;
    line-height: 1.2;
    padding: 180px 0 91px;
  }

  /* タイトル（日本語） */
  .main-title .title-jp {
    font-size: 44px;
    margin-top: 14px;
  }

  /* タイトル（英語） */
  .main-title .title {
    font-size: 20px;
    padding-left: 14px;
  }

  /* ドット */
  .main-title .title:before {
    width: 6px;
    height: 6px;
    top: 9px;
  }

  /*=============== 　　content　　===============*/
  .content {
    width: 100%;
    max-width: 1160px;
  }

  /* １列 */
  .space-item.item-01 .item-img,
  .space-item.item-05 .item-img,
  .space-item.item-08 .item-img {
    aspect-ratio: 3 / 1.1;
  }

  /* ２列 */
  .space-item.item-06 .item-img,
  .space-item.item-07 .item-img {
    height: 350px;
  }

  .space-item .text {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,   /* 上は薄め */
      rgba(0, 0, 0, 0.5) 50%,
      rgba(0, 0, 0, 0.7) 100%
    );
  }


  /* パンくずリスト */
  .breadcrumbs {
    max-width: 1160px;
    padding-top: 120px;
    padding-bottom: 20px;
  }

  .breadcrumbs .list-item {
    font-size: 13px;
  }

  .breadcrumbs .list-item a:after {
    margin-right: 5px;
    margin-left: 11px;
  }



}