@charset "utf-8";

/* dlight */
.dm {}

/* TAB DISPLAY */
.wa--type .panel {
  display: none;
}
.wa--type .panel.is-show {
  display: block;
}

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

  #pagekv h1 {
    text-align: center;
    line-height: 2;
    color: #FFF;
  }

  #wakon {
    margin: 0 auto 80px;
  }

  .wakon--header {
    text-align: center;
    margin-bottom: 80px;
  }
  .wakon--header h2 {
    text-align: center;
    line-height: 1;
    text-indent: -0.15em;
    margin-bottom: 20px;
  }
  .wakon--header .sec-catch {
    margin-bottom: 40px;
  }
  .wakon--header .sec-read {
    text-align: center;
  }
  
  
  .wa--type {
    margin-bottom: 100px;
  }
  .wa--type-tab {
    margin-bottom: 20px;
  }
  .wa--type-tab ul {
    display: flex;
    justify-content: center;
    gap: 5px;
    border-bottom: 1px solid #757569;
  }
  .wa--type-tab li {
    margin-bottom: -1px;
  }
  .wa--type-tab li.tab {
    padding: 6px 0;
    width: 40%;
    font-size: 1.4rem;
    text-align: center;
    color: #757569;
    border: 1px solid #757569;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.1em;
  }
  .wa--type-tab li.tab.is-active {
    background-color: #757569;
    color: #FFF;
  }
  
  
  .wa--block {
    margin: auto;
  }
  .wa--block-txt {
    display: flex;
    justify-content: center;
    gap: 40px;
  }
  .wa--block-catch {
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    text-orientation: upright;
  }
  .wa--block-catch p {
    font-size: 1.4rem;
    font-feature-settings: 'palt';
    letter-spacing: 0.2em;
    line-height: 2.2;
    white-space: nowrap;
  }
  .wa--block-read p {
    font-size: 1rem;
    line-height: 2.4;
    text-box-trim: trim-both;
  }
  .wa--block-ph {
    width: 90%;
    margin: 0 auto 40px;
  }
  
  
  .wa--pr {
    width: 70%;
    margin: 0 auto 80px;
  }
  .wa--pr-item + .wa--pr-item {
    margin-top: 30px;
  }
  .wa--pr-item .txt {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    padding: 30px 0 30px 9%;
  }
  .wa--pr-item .txt::after {
    display: block;
    content: '';
    width: 1px;
    height: 100%;
    background-color: #757569;
    position: absolute;
    top: 0;
    left: 0;
  }
  .wa--pr-item .txt h3 {
    font-size: 1.8rem;
    font-weight: 200;
    color: #757569;
    letter-spacing: 0.25em;
    line-height: 1;
    margin-bottom: 16px;
    order: 2;
  }
  .wa--pr-item .txt h3 ruby {
    ruby-align: center;
  }
  .wa--pr-item .txt h3 ruby rt {
    font-size: 0.4em;
    letter-spacing: 3px;
  }
  .wa--pr-item .txt .catch {
    font-size: 1.3rem;
    color: #757569;
    margin-bottom: 5px;
    order: 1;
  }
  .wa--pr-item .txt .read {
    font-size: 1.1rem;
    line-height: 2.2;
    order: 3;
  }
  
  
  .wa--bg {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 0.319;
    background-image: url(../img/wakon/bg1.jpg);
    background-size: cover;
    background-position: center;
    margin: auto;
  }
  .wa--bg > div {
    position: absolute;
    top: calc(50% - 0.6em);
    left: calc(5.2% + 60px);
    font-family: var(--font-en-times-r);
    font-size: 1.8rem;
    color: #FFF;
    line-height: 1;
    letter-spacing: 0.2em;
    margin: auto;
    z-index: 5;
  }


  #staywd {
    margin: 0 auto 80px;
    padding: 50px 10%;
    background-color: #EDE9E6;
  }

  #staywd .txt {
    text-align: center;
    margin-bottom: 30px;
  }

  #staywd .sec-catch {
    margin-bottom: 19px;
  }

  #staywd .sec-read {
    text-align: center;
    margin-bottom: 28px;
  }

  #staywd .ph {
    margin: 0 auto 30px;
    padding: 6px;
    background-color: #757569;
  }

  #staywd .ph ul {
    display: flex;
    justify-content: center;
    column-gap: 6px;
  }

  #staywd .btn {
    width: 50%;
    margin: auto;
  }

  #staywd .btn .btn-viewall {
    background-color: #F3F3EC;
  }

  #staywd .btn .bva--label {
    color: #625149;
  }

  #staywd .btn .bva--label::before {
    background-color: #62514938;
  }

  #staywd .btn .bva--arrow::before,
  #staywd .btn .bva--arrow::after {
    background-color: #625149;
  }
  
  
  #ctwd {
    width: 90%;
    margin: 0 auto 100px;
  }

}


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

  #pagekv h1 {
    color: #FFF;
  }

  #wakon {
    padding: 0 0 120px;
  }

  .wakon--header {
    text-align: center;
    margin-bottom: 80px;
  }

  .wakon--header h2 {
    text-align: center;
    line-height: 1;
    text-indent: -0.15em;
    margin-bottom: 20px;
  }
  .wakon--header .sec-catch {
    margin-bottom: 30px;
  }
  .wakon--header .sec-read {
    text-align: center;
  }
  
  
  .wa--type {
    margin-bottom: 150px;
  }
  .wa--type-tab {
    margin-bottom: 20px;
  }
  .wa--type-tab ul {
    display: flex;
    justify-content: center;
    gap: 5px;
    width: 900px;
    margin: auto;
    border-bottom: 1px solid #757569;
  }
  .wa--type-tab li {
    margin-bottom: -1px;
  }
  .wa--type-tab li.tab {
    width: 300px;
    padding: 10px 0;
    font-size: 1.6rem;
    text-align: center;
    color: #757569;
    border: 1px solid #757569;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.15em;
  }
  .wa--type-tab li.tab:hover {
    opacity: 0.8;
  }
  .wa--type-tab li.tab.is-active {
    background-color: #757569;
    color: #FFF;
  }
  
  
  .wa--block {
    margin: auto;
  }
  .wa--block-txt {
    display: flex;
    justify-content: center;
    gap: 40px;
  }
  .wa--block-catch {
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    text-orientation: upright;
  }
  .wa--block-catch p {
    font-size: 1.4rem;
    font-feature-settings: 'palt';
    letter-spacing: 0.2em;
    line-height: 2.2;
    white-space: nowrap;
  }
  .wa--block-read p {
    font-size: 1rem;
    line-height: 2.4;
    text-box-trim: trim-both;
  }
  .wa--block-ph {
    width: 740px;
    margin: 0 auto 60px;
  }
  
  
  .wa--pr {
    display: flex;
    width: 1060px;
    margin: 0 auto 200px;
  }

  .wa--pr-item {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .wa--pr-item .txt {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    padding: 20px 0 50px 30px;
  }
  .wa--pr-item .txt::after {
    display: block;
    content: '';
    width: 1px;
    height: 100%;
    background-color: #757569;
    position: absolute;
    top: 0;
    left: 0;
  }

  .wa--pr-item .txt h3 {
    font-size: 2rem;
    font-weight: 200;
    color: #625149;
    letter-spacing: 0.25em;
    line-height: 1;
    margin-bottom: 18px;
    order: 1;
  }
  .wa--pr-item .txt h3 ruby {
    ruby-align: center;
  }
  .wa--pr-item .txt h3 ruby rt {
    font-size: 0.32em;
    letter-spacing: 3px;
  }
  .wa--pr-item .txt .catch {
    font-size: 1.4rem;
    color: #757569;
    margin-bottom: 15px;
    order: 2;
  }
  .wa--pr-item .txt .read {
    font-size: 1.1rem;
    line-height: 2.2;
    order: 3;
  }
  .wa--pr-item .ph {
    width: 100%;
  }
  
  
  .wa--bg {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 0.319;
    background-image: url(../img/wakon/bg1.jpg);
    background-size: cover;
  }
  .wa--bg > div {
    position: absolute;
    top: calc(50% - 0.6em);
    left: calc(5.2% + 60px);
    font-family: var(--font-en-times-r);
    font-size: 2.4rem;
    color: #FFF;
    line-height: 1;
    letter-spacing: 0.2em;
    margin: auto;
    z-index: 5;
  }
  

  #staywd {
    margin: 0 auto 120px;
    padding: 80px 0;
    background-color: #EDE9E6;

    .txt {
      text-align: center;
      margin: 0 auto 50px;
      padding-top: 5px;

      .sec-tt-en {
        margin-bottom: 40px;
      }

      .sec-catch {
        margin-bottom: 20px;
      }

      .sec-read {
        text-align: center;
        margin-bottom: 28px;
      }
    }

    .ph {
      width: max-content;
      margin: 0 auto 30px;
      padding: 10px;
      background-color: #757569;

      ul {
        display: flex;
        justify-content: center;
        column-gap: 10px;
      }

      li {
        width: 346px;
      }
    }

    .btn {
      width: 290px;
      margin: auto;

      .btn-viewall {
        background-color: #F3F3EC;

        .bva--label {
          color: #757569;
        }

        .bva--arrow {

          &::before,
          &::after {
            background-color: #757569;
          }
        }

        &::before {
          background-color: #757569;
        }
      }
    }
  }
  
  #ctwd {
    width: 1060px;
    margin: 0 auto 150px;
  }

}