@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　ldk
 */

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/

.page-ttl{
  position: relative;
  width: 100%;
  height: 100%;
  margin-top: 90px;
	h1{
    position: absolute;
    left: 3vw;
    bottom: 3vw;
    max-width: 700px;
    width: 35%;
    z-index: 5;
  }
  .cap1{
    position: absolute;
    right: 20px;
    bottom: 20px;
    text-shadow: 3px 3px 10px #000000;
    font-size: 1.2rem;
    @media screen and (max-width: 768px) {
      right: 10px;
      bottom: 10px;
      font-size: 1.1rem;
    }
  }
}



/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

/* ldk
-----------------------------------------------------------------*/
.ldk{
  color: #000;
  background: #bdddd9;
  .inner{
    max-width: 1360px;
    width: 95%;
    padding: 85px min(5%, 80px);
    background: #fff;
    @media screen and (max-width: 768px) {
      width: 90%;
      padding: 45px 5% 60px;
    }
  }
  figure{
    position: relative;
    img{
      width: 100%;
    }
    .cap1{
      position: absolute;
      right: 10px;
      bottom: 10px;
      text-shadow: 0 0 6px #000,0 0 6px #000,0 0 6px #000;
      color: #fff;
      font-size: 1.2rem;
      line-height: 1.3;
      &._bk{
        color: #000;
        text-shadow: none;
      }
      &._l{
        text-align: left;
        right: auto;
        left: 10px;
        @media screen and (max-width: 768px) {
          left: 5px;
        }
      }
      @media screen and (max-width: 768px) {
        font-size: 1.1rem;
        right: 5px;
        bottom: 5px;
      }
    }
  }

  .notes{
    margin-top: 10px;
    p{
      font-size: 1.2rem;
      line-height: 1.3;
      @media screen and (max-width: 768px) {
        font-size: 1.1rem;
      }
    }
    &._r{
      p{
        text-align: right;
      }
    }
  }
  @media screen and (max-width: 768px) {
    p{
      font-size: 1.4rem;
      line-height: 1.4;
    }
  }
  .intro{
    display: grid;
    grid-gap: 20px;
    justify-items: center;

    .anchor{
      margin-top: 40px;
      ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 50px 30px;
        li{
          width: calc(100% / 3 - 20px);
          a{
            border: 1px solid #00a29a;  
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 12px;
            width: 100%;
            font-size: 2.4rem;
            line-height: 1;
            letter-spacing: .05em;
            transition: .3s;
            padding: 20px 10px 30px;
            color: #00a29a;
            span{
              font-size: 2rem;
              background: #fff;
              padding: 10px 20px;
              margin-top: -2em;
            }
            small{
            position: relative;
            font-size: 1.4rem;
            margin-top: 10px;
            padding-left: 30px;
            color: #000;
              &::after{
                position: absolute;
                transform: translate(-36px, -50%);
                display: block;
                content: "";
                width: 26px;
                height: 26px;
                top: 50%;
                background: url(../img/ldk/ico_anchor_arw.svg) no-repeat;
                background-size: 100% auto;  
              }
            }
          }
        }
        &.current a,
        a:hover{
          border-color: #bb9d1a;
          color: #bb9d1a;
          small{
            color: #bb9d1a;
          }
        }
      }
      @media screen and (max-width: 768px) {
        margin-top: 20px;
        ul{
          flex-wrap: wrap;
          gap: 20px 10px;
          li{
            width: calc(100% / 2 - 10px);
            a{
              font-size: 1.6rem;
              padding: 20px 10px;
              span{
                font-size: 1.4rem;
                padding: 6px 20px;
                margin-top: -2.4em;
              }
              small{
                font-size: 1.2rem;
                margin-top: 5px;
                padding-left: 26px;
                &::after{
                  transform: translate(-22px, -50%);
                  width: 16px;
                  height: 16px;
                }
              }
            }
          }
        }
      }
    }
  }
  .sec{
    padding: 40px;
    background: #00a29a;
    color: #fff;
    font-size: 3.6rem;
    text-align: center;
    display: grid;
    justify-items: center;
    letter-spacing: 0.2rem;
    small{
      font-size: 2.8rem;
    }
    @media screen and (max-width: 768px) {
      padding: 30px 5%;
      font-size: 2.8rem;
      line-height: 1.4;
      small{
        font-size: 2rem;
        margin-bottom: 5px;
      }

    }
  }
  .cont{
    h3{
      text-align: center;
      font-size: 2.6rem;
      margin-bottom: 30px;
      &:nth-child(n+2){
        margin-top: 60px;
      }
      @media screen and (max-width: 768px) {
        font-size: 1.8rem;
        margin-bottom: 20px;
        line-height: 1.4;
        &:nth-child(n+2){
          margin-top: 30px;
        }
      }
    }
    .col2{
      display: flex;
      justify-content: center;
      gap: 40px;
      @media screen and (max-width: 768px) {
        flex-direction: column;
        gap: 20px;
      }
    }
    .lg-pho{
      width: 100vw;
      display: flex;
      justify-content: flex-start;
      gap: 40px;
      transform: translateX(-10vw);
      .pho{
        width: 55vw;
        max-width: 780px;
      }
      .txt{
        width: 32vw;
        min-width: 300px;
        max-width: 500px;
      }
      &._r{
        flex-direction: row-reverse;
      }
      @media screen and (max-width: 768px) {
        flex-direction: column;
        transform: translateX(-10vw);
        .pho{
          width: 100vw;
        }
        .txt{
          width: 80%;
          min-width:200px;
          max-width: 800px;
          margin: auto;
        }
      }
      .cat04 &{
        .pho{
          width: 53vw;
          max-width: 700px;
        }
        .txt{
          width: 38vw;
          min-width: 300px;
          max-width: 644px;
        }
        @media screen and (max-width: 768px) {
          .pho{
            width: 100vw;
            max-width: 700px;
          }
          .txt{
            width: 80%;
            min-width:200px;
            max-width: 800px;
          }
        }
      }
    }
    .last{
      margin: 40px 0 0;
      display: grid;
      justify-items: center;
      @media screen and (max-width: 768px) {
        margin: 30px 0 0;
      }
    }

    .wide{
      width: 100dvw;
      transform: translateX(-50%);
      margin-left: 50%;
    }

    /* point2 */
    &.cat02{
      .plan{
        display: grid;
        grid-gap: 60px;
        @media screen and (max-width: 768px) {
          grid-gap: 20px;
        }
      }
    }
    .img_col3{
      display: flex;
      justify-content: center;
      margin: 60px 0 60px 50%;
      @media screen and (max-width: 768px) {
        width: 100%;
        flex-direction: column;
        gap: 10px;
        margin: 30px auto;
        transform: translate(0);
      }
    }

    /* point3 */
    &.cat03{
      .inner{
        padding-top: 30px;
        @media screen and (max-width: 768px) {
          padding-top: 20px;
        }
      }
      .wide{
        display: grid;
        grid-gap: 20px;
        @media screen and (max-width: 768px) {
          grid-gap: 10px;
        }
        figure{
          width: 100%;
          h3{
            position: absolute;
            right: 3vw;
            top: 3vw;
          }
          &:first-child{
            h3{
              width: 34vw;
              max-width: 400px;
            }
          }
          &:last-child{
            h3{
              width: 48vw;
              max-width: 548px;
            }
          }
        }
      }
    }
    .bnr{
      margin: 50px auto;
      display: grid;
      justify-content: center;
      @media screen and (max-width: 768px) {
        margin: 30px auto;
      }
      a{
        transition: .3s;
        &:hover {
          opacity: 0.5;
        }
      }
    }
    /* point4 */
    &.cat04{
      .floor{
        display: flex;
        justify-content: space-around;
        gap: 15px;
        padding: 26px 16px;
        margin-top: 20px;
        border: 1px solid #666;
        @media screen and (max-width: 768px) {
          flex-direction: column;
          padding: 20px 16px;
        }
        ul{
          li{
            font-size: 1.2rem;
          }
        }
      }
      .locbox{
        margin: 40px 0 50px;
        @media screen and (max-width: 768px) {
          margin-bottom: 20px;
        }
        .col2{
          align-items: flex-end;
          margin-bottom: 20px;
          figure{
            &:first-child{
              padding-bottom: 1.3em;
            }
            .wappen{
              position: absolute;
              width: 108px;
              height: 108px;
              left: -20px;
              top: -20px;
              z-index: 3;
            }
            .notes{
              /* position: absolute;
              bottom: -1.4em;
              right: 0; */
            }
          }
          @media screen and (max-width: 768px) {
            figure{
              &:last-child{
                padding-top: 30px;
              }
              .wappen{
                position: absolute;
                width: 20%;
                height: auto;
                left: 0;
                top: -10px;
                z-index: 3;
              }
              .notes{
                position: static;
              }
            }
          }
        }
        .col4{
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          grid-gap: 20px;
          @media screen and (max-width: 768px) {
            grid-gap: 20px 10px;
            grid-template-columns: repeat(2, 1fr);
          }
        }
      }
      .quality{
        h3{
          text-align: center;
          strong{
            font-size: 170%;
            color: #8b212d;
            display: block;
            font-weight: 500;
          }
        }
        .lg-pho2{
          width: 85dvw;
          transform: translateX(-50%);
          margin-left: 50%;
          display: grid;
          grid-template-columns: 0.2fr 0.35fr 0.35fr 0.2fr;
          grid-template-rows: repeat(6, auto);
          grid-column-gap: 50px;
          grid-row-gap: 20px;
          
          ._01{
            &.txt { grid-area: 1 / 2 / 4 / 3; }
            &.pho { grid-area: 1 / 3 / 3 / 5; }
          }
          ._02{
            &.txt { grid-area: 3 / 3 / 6 / 4; }
            &.pho { grid-area: 4 / 1 / 6 / 3; }
          }
          @media screen and (max-width: 768px) {
            width: 100%;
            transform: translate(0);
            margin: auto;
            grid-template-columns: 1fr;
            grid-template-rows: repeat(4, auto);
            grid-column-gap: 0;
            grid-row-gap: 20px;
            ._01{
              &.txt { grid-area: 2 / 1 / 3 / 2; }
              &.pho { grid-area: 1 / 1 / 2 / 2; }
            }
            ._02{
              &.txt { grid-area: 4 / 1 / 5 / 2; }
              &.pho { 
                grid-area: 3 / 1 / 4 / 2;
                figure{
                  .cap1{
                    bottom: 2px;
                  }
                }
              }
            }
          }
        }
      }
      .seculity{
        ul{
          display: grid;
          grid-template-columns: repeat(2, calc(25% - 20px)) 1fr;
          grid-template-rows: repeat(3, auto);
          grid-column-gap: 20px;
          grid-row-gap: 20px;
          @media screen and (max-width: 768px) {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(5, auto);
            grid-column-gap: 10px;
            grid-row-gap: 20px;
          }
          li{
            &:first-child{
              grid-area: 1 / 1 / 2 / 2;
            }
            &:nth-child(2){
              grid-area: 1 / 2 / 2 / 3;
            }
            &:nth-child(3){
              grid-area: 2 / 1 / 3 / 2;
            }
            &:nth-child(4){
              grid-area: 2 / 2 / 3 / 3;
            }
            &:nth-child(5){
              grid-area: 3 / 1 / 4 / 2;
            }
            &:nth-child(6){
              grid-area: 3 / 2 / 4 / 3;
            }
            &:nth-child(7){
              grid-area: 1 / 3 / 2 / 4;
            }
            @media screen and (max-width: 768px) {
              &:first-child{
                grid-area: 1 / 1 / 2 / 2;
              }
              &:nth-child(2){
                grid-area: 1 / 2 / 2 / 3;
              }
              &:nth-child(3){
                grid-area: 2 / 1 / 3 / 2;
              }
              &:nth-child(4){
                grid-area: 2 / 2 / 3 / 3;
              }
              &:nth-child(5){
                grid-area: 3 / 1 / 4 / 2;
              }
              &:nth-child(6){
                grid-area: 3 / 2 / 4 / 3;
              }
              &:nth-child(7){
                grid-area: 4 / 1 / 5 / 3;
              }
            }
            &.key{
              grid-area: 2 / 3 / 4 / 4;
              border: 1px solid #231815;
              padding: 20px;
              h4{
                font-size: 2.8rem;
                color: #b28247;
                line-height: 1.4;
                margin-bottom: 20px;
              }
              .col{
                display: flex;
                align-items: flex-start;
                p{
                  width: 52%;
                  text-align: justify;
                }
                figure{
                  width: 48%;
                  padding: 20px 50px;
                  .cap1{
                    right: 6vw;
                  }
                }
              }
              @media screen and (max-width: 1000px) {
                .col{
                  display: flex;
                  flex-direction: column;
                  p{
                    width: 100%;
                    text-align: justify;
                  }
                  figure{
                    width: 50%;
                    margin: auto;
                    padding: 20px 0;
                    .cap1{
                      right: 0;
                    }
                  }
                }
              }
              @media screen and (max-width: 768px) {
                grid-area: 5 / 1 / 6 / 3;
                h4{
                  font-size: 2rem;
                }
                .col{
                  p{
                    width: 100%;
                  }
                  figure{
                    width: 48%;
                    padding: 20px 50px;
                    .cap1{
                      right: 6vw;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    /* point5 */
    &.cat05{
      h4{
        font-size: 2rem;
        border: 1px solid #231815;
        padding: 4px 20px;
        margin: 0 0 30px;
        text-align: center;
      }
      .map{
        max-width: 70%;
        margin-inline: auto;
        margin-top: 60px;
      }
      .loan{
        max-width: 84%;
        margin-inline: auto;
        margin-top: 60px;
        .notes{
          + .notes{
            margin-top: 40px;
          }
        }
      }
      @media screen and (max-width: 768px) {
        h4{
          font-size: 1.5rem;
          margin: 0 0 20px;
        }
        .map{
          max-width: 100%;
          margin-top: 30px;
        }
        .loan{
          max-width: 100%;
          margin-top: 30px;
          .notes{
            + .notes{
              margin-top: 20px;
            }
          }
        }
      }
    }
  }
}

.ft{
  padding: 100px 0;
  @media screen and (max-width: 768px) {
    padding: 50px 0;
    .btn-cv-reserve a{
      margin-top: 20px;
    }
  }
  .page-notes{
    margin-bottom: 40px;
  }
}



/* other
-----------------------------------------------------------------*/
sup {
	font-size: 70%; 
	vertical-align: super;
}
sub {
	font-size: 70%; 
	vertical-align: sub;
}