@charset "UTF-8";

/* dlight */
.dm {}

/* ==================================================
/* SMARTPHONE
================================================== */
@media screen and (max-width: 768px) {

  .capa {
    display: flex;
    width: 160px;
    height: 26px;
    margin: auto;
    justify-content: center;
    align-items: center;
    border: 1px solid #757569;
    font-size: 1rem;
    color: #757569;
    line-height: 1;
  }

  #pagekv>p {
    color: #FFF;
  }

  .pg--header-t1 {
    margin-bottom: 50px;
  }

  .pg--header-t1>.inner .txt .sec-catch {
    letter-spacing: 0;
  }

  .pg--header-t1 .capa {
    width: 250px;
  }

  .chapel {
    padding-bottom: 100px;
  }

  .chapel>.inner {
    display: flex;
    flex-flow: column;
    margin: auto;
  }

  .chapel>.inner .slider {
    margin-bottom: 10px;
    order: 3;
  }

  .chapel>.inner .slider {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .chapel>.inner .slider div:nth-of-type(3) {
    grid-column: span 2 / span 2;
  }

  .chapel>.inner .ph-full {
    margin-bottom: 5px;
    order: 2;
  }

  .chapel>.inner .capa {
    margin-bottom: 30px;
    order: 1;
  }

  #garden>.inner,
  #shinden>.inner,
  #shrine>.inner {
    display: flex;
    flex-flow: column;
  }

  #garden>.inner>.header,
  #shinden>.inner>.header,
  #shrine>.inner>.header {
    width: 80%;
    margin: 0 auto 40px;
    order: 2;
  }

  #garden>.inner>.header .title,
  #shinden>.inner>.header .title,
  #shrine>.inner>.header .title {
    margin-bottom: 15px;
  }

  #garden>.inner>.header .title .sec-tt-en,
  #shinden>.inner>.header .title .sec-tt-en,
  #shrine>.inner>.header .title .sec-tt-en {
    font-size: 1.6rem;
  }

  #garden>.inner>.header .title .sec-tt-ja,
  #shinden>.inner>.header .title .sec-tt-ja,
  #shrine>.inner>.header .title .sec-tt-ja {
    font-size: 1.8rem;
    letter-spacing: 0.25em;
  }

  #garden>.inner .slider,
  #shinden>.inner .slider,
  #shrine>.inner .slider {
    order: 4;
  }

  #garden>.inner .slider,
  #shinden>.inner .slider,
  #shrine>.inner .slider {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  #garden>.inner .slider div:nth-of-type(3),
  #shinden>.inner .slider div:nth-of-type(3),
  #shrine>.inner .slider div:nth-of-type(3) {
    grid-column: span 2 / span 2;
  }

  #garden>.inner .ph-full,
  #shinden>.inner .ph-full,
  #shrine>.inner .ph-full {
    margin-bottom: 20px;
    order: 1;
  }

  #garden>.inner .capa,
  #shinden>.inner .capa,
  #shrine>.inner .capa {
    margin-bottom: 30px;
    order: 3;
  }

  #garden {
    background: #EDE9E6;
  }

  #garden>.inner {
    margin: auto;
    padding: 100px 0;
  }

  #shinden>.inner {
    margin: auto;
    padding: 100px 0;
  }

  #shrine {
    background: #EDE9E6;
  }

  #shrine>.inner {
    margin: auto;
  }

}

/* ==================================================
/* DESKTOP
================================================== */
@media (768px < width) {

  #pagekv p {
    color: #FFF;
  }

  .capa {
    display: flex;
    width: 200px;
    height: 40px;
    justify-content: center;
    align-items: center;
    border: 1px solid #757569;
    color: #757569;
    line-height: 1;
  }

  .pg--header-t1 {
    margin-bottom: 0;

    .sec-read {
      margin-bottom: 100px;
    }

    .capa {
      width: 250px;
    }
  }

  .chapel {
    padding-bottom: 100px;

    >.inner {
      display: flex;
      flex-flow: column;
      width: 880px;
      margin: auto;

      .slider {
        order: 2;
      }

      .ph-full {
        order: 3;
      }

      .capa {
        margin-top: -40px;
        margin-bottom: 100px;
        order: 1;
      }
    }
  }

  #garden,
  #shinden,
  #shrine {
    .header {
      display: flex;
      margin-bottom: 60px;
      padding: 0 30px;
      order: 1;

      .title {
        .sec-tt-ja {
          font-size: 2.2rem;
          letter-spacing: 0.25em;
        }
      }

      .sec-read {
        margin-top: -0.5em;
      }
    }
  }

  #garden {
    background: #EDE9E6;

    >.inner {
      display: flex;
      flex-flow: column;
      width: 880px;
      margin: auto;
      padding: 100px 0;

      .title {
        margin-right: 84px;
      }

      .ph-full {
        margin-bottom: 5px;
        order: 2;
      }

      .capa {
        margin: auto;
        order: 4;
      }

      .slider {
        margin-bottom: 50px;
        order: 3;
      }
    }
  }

  #shinden {
    >.inner {
      display: flex;
      flex-flow: column;
      width: 880px;
      margin: auto;
      padding: 100px 0;

      .title {
        margin-right: 84px;
      }

      .ph-full {
        margin-bottom: 5px;
        order: 2;
      }

      .capa {
        margin: auto;
        order: 4;
      }

      .slider {
        margin-bottom: 50px;
        order: 3;
      }
    }
  }

  #shrine {
    background: #EDE9E6;
    padding-bottom: 150px;

    >.inner {
      width: 880px;
      margin: auto;
      padding: 100px 0 0;

      .title {
        margin-right: 122px;
      }

      .ph-full {
        margin-bottom: 50px;
      }

      .capa {
        margin: auto;
      }
    }
  }

  /* Slider */
  .slider {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 6px;
    grid-row-gap: 6px;
    margin-bottom: 5px;
  }

}