/* body { font-size: 1.5rem; } */
/* @media (max-width: 840px) { body { font-size: 1.4rem; } } */
/* @media (max-width: 505px) { body { font-size: 1.4rem; } } */
/* @media (max-width: 375px) { body { font-size: 1.3rem; } } */

:root {
  --color-base: #57524e;
}


.layout-header > .inner a{
   fill:white;  
}

    

.home {
  p {
    //ine-height: 2.2;
  }

  .p-summary {
    font-size: 1.8rem;
    margin: 0 0 1rem 0;
  }

  .container-firstview {
    background-color: var(--color-base);
    overflow: hidden;
    position: relative;

    .swiper-slide{
      img {
        display: block;
        width: 100%;
        height: 100vh;
        filter: blur(12px);
        opacity: 0.5;
        transform: scale(1.05);
        object-fit: cover;
        object-position: center bottom;
        animation: unblur 2s ease-out 0.5s forwards;
        will-change: filter, opacity;
        z-index: 2;
      }    }


    .heading-copy {
      position: absolute;
      top: 46%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      letter-spacing: 2px;
      padding: 0;
      margin: 0 0 0 0;
      font-size: 3.6rem;
      z-index: 10;
      width: 100%;
      text-shadow: 0 0 10px rgba(0, 0, 0, 1);

      @media (max-width: 840px) {
        font-size: 2.8rem;
      }

      @media (max-width: 505px) {
        font-size: 2.4rem;
      }
      /*.copy{
        margin:0 auto;
        max-width: 900px;
        width:80%;
        img{
          display: block;
          width:100%;
          opacity: 1;
        }
      }*/
      .main {
        margin: 0 0 30px 0;
        line-height: 1.6;
        font-size: inherit;
        font-family: var(--font-en);
      }
      .sub {
        font-weight: bold;
        font-family: var(--font-en);
        margin: 0 0 40px 0;
        font-size: 70%;
        line-height: 2;
        @media (max-width: 505px) {
          font-size: 60%;
        }
        span{
          display: block;
        }
      }
    }
  }

  .container-summary .heading-sub {
    font-size: 180%;
  }

  .container-reservation {
    padding: 80px 0;
    border-bottom: 1px solid #ddd;
    margin-bottom: 60px;
    text-align: center;
    background-image: url(/wp-content/themes/en_the_house/assets/images/asakusa/index/bg.jpg);
    background-repeat: repeat;
    background-color: var(--color-base);
    color: white;
    border-radius: 0 0 ;
    @include sp{
      padding: 40px 0;
    }
    & .inner .container-summary p {
      margin-bottom: 0;
    }
  }

  & .container-open .day {
    color: var(--color-caution);
    margin: 0 0 40px 0;
    font-size: 220%;
    letter-spacing: 0.05em;
    @media (max-width: 505px) {
      font-size: 130%;
    }
  }

  .container-gridimage {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    
    & .item {
      background-color: #ae7e7e;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 50%;

      &.a {
        grid-column: 1 / span 2;
        grid-row: 1 / span 2;
        background-image: url(/wp-content/themes/en_the_house/assets/images/asakusa/grid/f.jpg);
        aspect-ratio: 1 / 1.5;
      }

      &.b {
        grid-column: 3 / span 2;
        grid-row: 1;
        background-image: url(/wp-content/themes/en_the_house/assets/images/asakusa/grid/h.jpg);
      }

      &.c {
        grid-column: 3 / span 1;
        grid-row: 2;
        background-image: url(/wp-content/themes/en_the_house/assets/images/asakusa/grid/i.jpg);
      }

      &.d {
        grid-column: 4 / span 1;
        grid-row: 2;
        background-image: url(/wp-content/themes/en_the_house/assets/images/asakusa/grid/e.jpg);
      }

      &.e {
        grid-column: 5 / span 2;
        grid-row: 1 / span 2;
        border-radius: 50%;
        background-image: url(/wp-content/themes/en_the_house/assets/images/asakusa/grid/h.jpg);

        @media (max-width: 840px) {
          grid-column: 1 / span 2;
          grid-row: 3 / span 2;
          aspect-ratio: 1 / 1;
        }
      }

      &.f {
        grid-column: 7 / span 1;
        grid-row: 1 / span 2;
        background-image: url(/wp-content/themes/en_the_house/assets/images/asakusa/grid/a.jpg);

        @media (max-width: 840px) {
          grid-column: 3 / span 1;
          grid-row: 3 / span 2;
        }
      }

      &.g {
        grid-column: 8 / span 1;
        grid-row: 1;
        background-image: url(/wp-content/themes/en_the_house/assets/images/asakusa/grid/e.jpg);

        @media (max-width: 840px) {
          grid-column: 4 / span 1;
          grid-row: 3;
        }
      }

      &.h {
        grid-column: 8 / span 1;
        grid-row: 2;
        background-image: url(/wp-content/themes/en_the_house/assets/images/asakusa/grid/d.jpg);

        @media (max-width: 840px) {
          grid-column: 4 / span 1;
          grid-row: 4;
        }
      }
    }
  }

  .container-gridenhotel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 20vw 20vw;
    gap: 1px;
    background: #000;
    width: 100%;

    & .item {
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 50%;
    }

    & .a {
      grid-column: 1;
      grid-row: 1 / span 2;
      background-image: url(/wp-content/themes/en_the_house/assets/images/asakusa/enhotel/b.jpg);
    }

    & .b {
      grid-column: 2;
      grid-row: 1;
      background-image: url(/wp-content/themes/en_the_house/assets/images/asakusa/enhotel/a.jpg);
    }

    & .c {
      grid-column: 2;
      grid-row: 2;
      background-image: url(/wp-content/themes/en_the_house/assets/images/asakusa/enhotel/c.jpg);
    }
  }

  .layout-pad {
    padding: 0 5vw;
    max-width: 1280px;
    margin: 0 auto;
  }

  .layout-section.-bggray {
    background-color: var(--color-base);

    & .heading-section {
      color: white;
    }

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: url(/wp-content/themes/en_the_house/assets/images/asakusa/index/AdobeStock_479718395.jpeg);
      background-size: cover;
      background-position: center;
      opacity: 0.8;
      z-index: 1;
    }

    & > * {
      z-index: 2;
      position: relative;
    }
  }

  .layout-section.-bgbrand {
    background-color: var(--color-base);
  }

  .layout-sub {
    margin-bottom: 60px;
  }

  .layout-body {
    padding-bottom: 60px;
    @media (max-width: 505px) {
      padding-bottom: 0px;
    }
    .layout-sub {
      margin-bottom: 40px;
    }
  }

  .heading-catchcopy {
    margin: 0 0 1.5em 0;
    line-height: 1.6;
    span {
      display: block;
      font-family: var(--font-en);
      &.main {
        font-size: 3rem;
        letter-spacing: 0;
        @media (max-width: 505px) {
          font-size: 1.8em;
        }
        img{
          display: block;
          max-width:600px;
          width:80%;
          margin:0 auto;
        }
      }

      &.sub {
        font-size: 2rem;
        font-weight: bold;
        @media (max-width: 505px) {
          font-size: 1.6rem;
        }
      }
    }

  }

  .heading-section {
    margin: 0 0 20px 0;
    letter-spacing: 0.05em;
  }



  .grid-block{
    p:last-child{
      margin-bottom: 0;
    }
    .heading-sub {
      letter-spacing: 0.05em;
      margin-bottom: 5px;
      font-size: 200%;
      text-align: left;
    }
    &.-hoteldetail {
      background-color: white;
      column-gap: 0;
      align-items: center;
      grid-template-columns: 370px auto;

      @media (max-width: 840px) {
        grid-template-columns: repeat(1, 1fr);
        row-gap: 0;
      }

      & > *:last-child {
        padding: 20px 40px;
        box-sizing: content-box;

        @media (max-width: 840px) {
          padding: 40px;
        }

        @media (max-width: 505px) {
          padding: 20px;
        }
      }

      & img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      & .table-line {
        margin: 0;
      }
    }
    &.-padding{
      gap: 60px;
      @media (max-width: 500px) {
        gap: 20px;
      }
    }
    &.-aboutenhotel {
      align-items: center;
      column-gap: 0;

      @media (max-width: 840px) {
        grid-template-columns: repeat(1, 1fr);
        row-gap: 0;
      }

      & > *:first-child {
        display: flex;
        height: 100%;
        align-items: center;
        background-color: var(--color-base);
        color: white;

        @media (max-width: 840px) {
          order: 2;
        }

        & > .inner {
          max-width: calc(1280px / 2 + 5vw);
          margin: auto;
          padding: 30px 60px 30px 5vw;
        }
      }
      & > *:last-child {
        background-color: var(--color-base);
        display: flex;
        height: 100%;

        @media (max-width: 840px) {
          order: 1;
        }
      }
    }
    &.-colsSp1{
      @media (max-width: 505px) {
        display: flex;
        flex-direction: column-reverse;
        gap:18px;
        padding:0 0 30px 0;
        border-bottom:1px solid #ddd;
      }
    }
  }


}
.page-rooms{
  .card-room > .photo .main{
    padding: 20px 0;
  }
  .card-photo.-room{
    border:1px solid #ddd;
   .thumb{
    img{
      background-size: 40%;
    }
   }
  }
}
@keyframes unblur {
  from {
    filter: blur(12px);
    opacity: 0.3;
    transform: scale(1.05);
  }
  to {
    filter: blur(0);
    opacity: 1;
    transform: scale(1.0);
  }
}

.is-en {
  & h1, & h2, & h3, & h4, & h5 {
    letter-spacing: 0;
    font-weight: 700;
  }
}