@charset "utf-8";

:root {
  --gold01 : #C9A700;
  --gold02 : #CAA73A;
  --gold03 : #CAA73AE5;
  --gold04 : #CAA73A4D;
  --blue01 : #00b1a02e;
  --blue02 : #00b1a01a;
  --blue03 : #00b1a0;
  --brown01:#caa73a40;
  --brown02:#caa73a26;
  --brown03: #c9a700;
  --brown04:#7f613a;
  --black01: #212121;
  --black02: #2121211a;
  --red01: #C8632D;
  --red02: #c8632d1a;
  --red03: #c8632d40;
  --white01: #ffffff;
  --white02: #f4f6f2;
  --gray01: #9c9c9c;
  
}

.hero {
  &.shelf {
    height: 140px;
    margin: 0 0 50px;
    & .hero-tit_jp {
      font-size: 2.6rem;
    }
    & .hero-tit_en {
      display: none;
    }
  }
}


.main {
  background: var(--white01);
  & .container {
    max-width: 1080px;
  }
}
.library__content {
  & h3{
    font-size: 1.8rem;
    text-align: center;
    line-height: 1.88;
    font-weight: 600;
    font-family: "Noto Serif JP";
    letter-spacing: 0.05em;
    color: var(--black01);
    margin: 0 0 5rem 0;
  }
  & .shelf__list {
    border: var(--blue03) solid 2px;
    width: 100%;
    max-width: 1087px;
    padding: 10px;
    background: var(--white01);
    margin: 0 auto 0 auto;
    & ul {
      padding: 50px 30px 50px 30px;
      background: var(--white02);
      position: relative;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: flex-end;
      &:before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top:0;
        width: 100%;
        height: 20px;
        background: var(--white01) url(../img/common/hero-bg.webp);
      }
      & li {
        position: relative;
        & h4 {
          text-align: center;
          line-height: 1.88;
          font-weight: 600;
          font-family: "Noto Serif JP";
          color: var(--gold02);
          font-size: 2.6rem;
          margin: 0 auto 1.6rem auto;
        }
        & .bg__shelf {
          position: relative;
          padding: 0 7.35% 30px 7.35%;
          display: flex;
          flex-wrap: nowrap;
          justify-content: space-between;
          gap:5.88%;
          & figure {
            position: relative;
            z-index: 3;
            box-shadow: 5px 4px 15px 0 rgba(202, 167, 58, 0.30);
          }
          &:before {
            content: '';
            display: block;
            position: absolute;
            left: 0;
            bottom:20px;
            width: 100%;
            height: 33px;
            background: var(--gold03);
            z-index: 1;
          }
          &:after {
            content: '';
            display: block;
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 20px;
            z-index: 1;
            background: var(--gold04);
          }
        }
        & a {
          display: flex;
          align-items: center;
          height: 40px;
          background: var(--red01);
          color: var(--white01);
          width: calc( 100% - 20px );
          max-width: 250px;
          margin: 32px auto 0 auto;
          font-size: 1.4rem;
          font-family: "Noto Serif JP";
          justify-content: center;
          letter-spacing: 0.05em;
          font-weight: 600;
          border-radius: 20px;
          gap:0 0.5em;
          &:after {
            content: '';
            display: block;
            width: 5px;
            height: 12px;
            background: url(../img/chart/icon_arrow_03.svg) center center / 100% 100% no-repeat;
            transform: translateY(0em);
          }
        }
        &:nth-of-type(1) {
          
        }
      }
    }
  }
}
.shelf__content {
  
  & .shelf__list {
    border: var(--blue03) solid 2px;
    width: 100%;
    max-width: 1087px;
    padding: 30px 10px 10px 10px;
    background: var(--white01);
    margin: 0 auto 0 auto;
    position: relative;
    &:before {
      content: '';
      display: block;
      position: absolute;
      left: 10px;
      top:10px;
      width: calc(100% - 20px);
      height: 20px;
      background: var(--white01) url(../img/common/hero-bg.webp);
    }
    & h3 {
      color: var(--gold02);
      text-align: center;
      font-family: "Noto Serif JP";
      font-size: 4rem;
      font-weight: 600;
      line-height: normal;
      letter-spacing: 6px;
      background: var(--white02);
      padding: 40px 0 0 0;
    }
    & ul {
      padding: 50px calc(30px + 5.4% ) 50px calc(30px + 5.4% );
      background: var(--white02) url(../img/library/bg_shelf_01.png) center top / calc( 100% - 60px ) 274px repeat-y ;
      position: relative;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-end;
      gap:84px 5%;
      & li {
        height: 190px;
        flex-shrink: 0;
        flex-grow: 0;
        & button {
          outline: none;
          border: none;
          padding: 0;
          position: relative;
          box-shadow: 5px 4px 15px 0 rgba(202, 167, 58, 0.30);
          height: 190px;
          line-height: 1;
          cursor: pointer;
          & img {
            width: auto;
            height: 190px;
          }
          & .icon {
            position: absolute;
            width: 22px;
            height: 22px;
            right: 6px;
            bottom: 6px;
            background: url(../img/library/icon_shelf_01.svg) center center / 100% 100% no-repeat;
          }
        }
      }
    }
    & p {
      background: var(--white02);
      display: block;
      padding: 30px 60px 40px 60px;
      color: var(--blue03);
      font-family: "Noto Serif JP";
      font-weight: 600;
      font-size: 1.4rem;
      & .text {
        position: relative;
        z-index: 3;
      }
      &.hagio:after {
        content: 'Moto HAGIO';
        color: var(--gold04);
        font-family: "Sorts Mill Goudy", serif;
        font-weight: 400;
        font-size: 5rem;
        right: 40px;
        bottom:20px;
        z-index: 1;
        display: block;
        position: absolute;
      }
      &.yamagishi:after {
        content: 'Ryoko YAMAGISHI';
        color: var(--gold04);
        font-family: "Sorts Mill Goudy", serif;
        font-weight: 400;
        font-size: 5rem;
        right: 40px;
        bottom:20px;
        z-index: 1;
        display: block;
        position: absolute;
      }
      &.yamato:after {
        content: 'Waki YAMATO';
        color: var(--gold04);
        font-family: "Sorts Mill Goudy", serif;
        font-weight: 400;
        font-size: 5rem;
        right: 40px;
        bottom:20px;
        z-index: 1;
        display: block;
        position: absolute;
      }
    }
  }
  & .link__text {
    margin: 3.2rem auto 0 auto;
    text-align: center;
    &:after {
      content: '';
      clear: both;
      display: block;
    }
    & a {
      display: flex;
      font-size: 1.4rem;
      background: none;
      border: none;
      border-bottom: var(--gold02) solid 1px;
      width: 18.6rem;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 0.2em;
      cursor: pointer;
      font-family: "Noto Serif JP";
      font-weight: 600;
      margin: 0 auto;
      &:before {
        content: '';
        display: block;
        width: 5px;
        height: 10px;
        background: url(../img/chart/icon_arrow_02.svg) center center / 100% 100% no-repeat;
      }
      &:hover,&:focus {
        opacity: 0.7;
      }
    }
  }
}

.relation__link {
  width: calc( 100% - 40px ) ;
  margin: 48px auto 0 auto;
  max-width: 568px;
  & ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap:68px;
    & li {
      flex-basis: 250px;
      & .flex__box {
        display: flex;
        flex-wrap: nowrap;        
        justify-content: center;
        gap:14px;
        & figure {
          
          flex-shrink: 1;
          flex-grow: 0;
          height: 140px;
          & img {
            height: 140px;
            width: auto;
            box-shadow: 2px 2px 12px 0 rgba(202, 167, 58, 0.30);
          }
        }
      }
      & .btn__box {
        & a {
          display: flex;
          align-items: center;
          height: 40px;
          background: var(--red01);
          color: var(--white01);
          width: 100%;
          max-width: 250px;
          margin: 22px auto 0 auto;
          font-size: 1.4rem;
          font-family: "Noto Serif JP";
          justify-content: center;
          letter-spacing: 0.05em;
          font-weight: 600;
          border-radius: 20px;
          gap:0 0.5em;
          &:after {
            content: '';
            display: block;
            width: 5px;
            height: 12px;
            background: url(../img/chart/icon_arrow_03.svg) center center / 100% 100% no-repeat;
            transform: translateY(0em);
          }
          &:hover {
            opacity: 0.7;
          }
        }
      }
      
    }
  }
}

/* MODAL */
.shelf__modal {
  & .content {
    width: calc( 100% - 50px );
    max-width: 950px;
    margin: 0 auto;
    padding: 50px 75px;
    background: var(--white01);
    display: block;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    max-height: calc( 100% - 50px );
    /* overflow: auto; */
    & .close__btn {
      position: absolute;
      right: 30px;
      top:30px;
      background: var(--white01);
      width: 30px;
      height: 30px;
      & button {
        width: 30px;
        height: 30px;
        overflow: visible;
        position: relative;
        background: none;
        cursor: pointer;
        outline: none;
        &:before {
          content: '';
          display: block;
          position: absolute;
          width: 160%;
          height: 1px;
          background: var(--gold02);
          left: 50%;
          top:50%;
          transform: translateX(-50%) translateY(-50%) rotate(45deg);
        }
        &:after {
          content: '';
          display: block;
          position: absolute;
          width: 160%;
          height: 1px;
          background: var(--gold02);
          left: 50%;
          top:50%;
          transform: translateX(-50%) translateY(-50%) rotate(-45deg);
        }
        & span {
          color: #CAA73A;
          text-align: center;
          font-family: Cormorant;
          font-size: 12px;
          font-style: normal;
          font-weight: 600;
          line-height: normal;
          letter-spacing: 1.2px;
          text-transform: uppercase;
          top:calc( 100% + 10px );
          left:50%;
          transform: translateX(-50%);
          white-space: nowrap;
          position: absolute;
        }
        :hover {
          opacity: 0.7;
        }
      }      
    }
    & .flex__box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      overflow-x: hidden;
      overflow-y: auto;
      & .img__box {
        flex-basis: 43.75%;
        flex-shrink: 0;
        flex-grow: 0;
      }
      & .text__box {
        flex-basis: 47.5%;
        flex-shrink: 0;
        flex-grow: 0;
        & h4 {
          font-size: 3rem;
          letter-spacing: 0.05em;
          text-align: center;
          border-bottom: var(--blue03) solid 1px;
          padding: 0 0 0.5em 0;
          margin: 0 auto 3rem auto;
          font-family: "Noto Serif JP";
          font-weight: 600;
          font-feature-settings: "palt";
          & .writer {
            display: block;
            text-align: center;
            color: var(--gold02);
            font-size: 80%;
            margin: 0 auto 0.25em auto;
            line-height: 1.1;
          }
        }
        & p {
          font-family: "Noto Serif JP";
          font-size: 1.4rem;
          font-weight: 600;
          line-height: 171%;
          letter-spacing: 0.05em;
        }
        & .btn__box {
          width: 100%;
          max-width:300px;
          margin: 2.3rem auto 0 auto;
          & a {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            width: 25rem;
            height: 4rem;
            background: var(--red01);
            border-radius: 3.5rem;
            margin: 40px auto 0 auto;
            font-size: 1.4rem;
            color: var(--white01);
            font-family: "Cormorant Infant", serif;
            font-weight: 600;
            position: relative;
            letter-spacing: 0.05em;
            gap:0 0.5em;
            line-height: 1.1;
            padding: 0.25em 0 0 0;
            &:after {
              content: '';
              display: block;
              width: 16px;
              height: 17px;
              background: url(../img/library/icon_shelf_02.svg) center center / 100% 100% no-repeat;
              transform: translateY(-0.2em);
            }
            &:hover,&:focus {
              opacity: 0.7;
            }
          }
        }
      }
    }
  }
}
.shelf__modal::backdrop {
  background-color: #00000099;
}

@media screen and (min-width: 769px){
  .library__content {
    & .shelf__list {
      & ul {
        & li {
          &:nth-of-type(1) {
            & .bg__shelf {
              &::before {
                clip-path: polygon( 20px 0, 0 100%, 100% 100%, 100% 0 );
              }
            }
          }
          &:nth-of-type(3) {
            & .bg__shelf {
              &::before {
                clip-path: polygon( 0 0, 0 100%, 100% 100%, calc( 100% - 20px ) 0%  );
              }
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 960px){
  
}
@media screen and (max-width: 768px){
  .hero {
    &.shelf {
      height: 95px;
      margin: 0 0 40px;
      & .hero-tit_jp {
        font-size: 2.2rem;
      }
    }
  }
  .container {
    width: 90.66%;
  }
  .library__content {
    & .shelf__list {
      
      & ul {
        flex-wrap: wrap;
        gap: 4.5rem 0;
        & li {
          flex-basis: 100%;
          & .bg__shelf {
            &::before {
              clip-path: polygon( 20px 0, 0 100%, 100% 100%, calc( 100% - 20px ) 0%  );
            }
          }
        }
      }
    }
  }
  .shelf__content {
    & .shelf__list {
      & h3 {
        font-size: 3rem;
        padding: 20px 0 0 0;
      }
      & ul {
        padding: 20px 10px 50px 10px;
        background: var(--white02) url(../img/library/bg_shelf_01.png) center -30px / calc( 100% - 20px ) 274px repeat-y ;
      }
      & p {
        padding: 20px 20px 40px 20px;
        text-align: center;
        font-size: 1.4rem;
        &.hagio:after , &.yamagishi:after, &.yamato:after {
          display: none;
        }
      }
    }
  }
  .relation__link {
    & ul {
      justify-content: center;
      gap: 40px 0;
      & li {
        flex-basis: 280px;
        & .btn__box {
          & a{
            max-width: 280px;
          }
        }        
      }
    }
  }
  .shelf__modal {
    position: relative;
    & .content {
      padding:12px 20px 40px 20px;
      overflow: auto;
      & .close__btn {
        right: 0;
        top:0;
        width: 100%;
        height: 43px;
        position: sticky;
        background: none;
        &:after {
          content: '';
          display: block;
          clear: both;
        }
        & button {
          width: 26px;
          height: 26px;
          float: right;
          transform: translateX(5px);
          & span {
            top:calc( 100% + 5px );
            font-size: 10px;
          }
          
        }
      }
      & .flex__box {
        justify-content: center;
        gap:25px 0;
        & .img__box {
          flex-basis: 76.66%;
        }
        & .text__box {
          flex-basis: 100%;
          & h4 {
            & .writer {
              font-size: 1.8rem;
            }
            & .title {
              font-size: 2.2rem;
            }
          }
          & .btn__box {
            & a {
              width: 280px;
              height: 50px;
              font-size: 16px;
              &:after {
                width: 17px;
                height: 18px;
              }
            }
          }
        } 
      }
    }
  }
  body:has( dialog[open]) {
    overflow-y: hidden;    
  }
}