@charset "UTF-8";

/*----------------------------------------
変数
-----------------------------------------*/
:root {
  --inner-padding-Top-LR: 7vw;
}

#contents {
  padding-top: 0;
}

.site_index h2 {
  border: unset;
}

main a:hover,
main a:hover img {
  opacity: 1;
}

main p {
  font-size: 0.965rem;
}

/*----------------------------------------
スクロールスナップ
-----------------------------------------*/
#contents {
  padding-top: var(--header-height);
  overflow: auto;
  scroll-snap-type: y mandatory;
  height: 100vh;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* main {
  display: contents;
} */

#contentsl::-webkit-scrollbar {
  display: none;
}



.scroll_contents {
  display: block;
  height: 100vh;
  height: 100svh;
  min-height: fit-content;
  max-height: unset;

  scroll-snap-align: start;
}

.footer {
  scroll-snap-align: end;
}



/*----------------------------------------
MV
-----------------------------------------*/
#mv_wrap {
  position: relative;
  animation: mvLoad_01 2s ease-in-out forwards;
  min-height: 50vw;
  background: url(../img/index/mv_bg.jpg) no-repeat center center;
  background-size: cover;
  z-index: 100;
}

#mv_wrap .mainCopy {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 65vw;
  max-width: 720px;
  z-index: 2;
}


#mv_wrap .swiper-container {
  overflow: hidden;
}

#mv_wrap .swiper-wrapper {
  transition-timing-function: linear;
}

#mv_wrap .decoTxt {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  /* height: 10vw;
  max-height: 180px; */
  padding: 0;
}

#mv_wrap .decoTxt img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
}

/* MVスクロールアイコン */
#mv_wrap .scroll_box {
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 15%;
  z-index: 2;
}

#mv_wrap .scroll {
  color: #fff;
  text-decoration: none;
  padding-top: 0;
  margin: 0 auto 0;
  font-size: 0.85rem;
}

#mv_wrap .scroll span::before,
#mv_wrap .scroll.line_type span::before {
  content: '';
  width: 6px;
  height: 6px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 100%;
  animation: mv_scroll 3s infinite;
  box-sizing: border-box;
}

#mv_wrap .scroll span {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translate(-50%, -100%);
  width: 2.5em;
  height: 4.25em;
  border: 1px solid #fff;
  border-radius: 2em;
  box-sizing: border-box;
}

#mv_wrap .scroll.line_type span {
  width: 1px;
  height: 3.5em;
  border-left: unset;
}

#mv_wrap .scroll.line_type span::before {
  animation: mv_scroll_line 3s infinite;
}


@keyframes mv_scroll_line {
  0% {
    top: 0;
    opacity: 0;
  }

  40% {
    opacity: 1;
  }

  80% {
    top: 100%;
  }

  100% {
    top: 100%;
    opacity: 0;
  }
}

@keyframes mv_scroll {
  0% {
    top: 20%;
    opacity: 0;
  }

  40% {
    opacity: 1;
  }

  80% {
    top: 75%;
    opacity: 0;
  }

  100% {
    top: 100%;
    opacity: 0;
  }
}



/*----------------------------------------
トップ共通
-----------------------------------------*/

#mv_wrap::before,
#message::before,
#category::before,
#history::after,
#feature::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/common/texture.png) repeat center center;
  mix-blend-mode: overlay;
}

.inner {
  padding-top: calc(var(--header-height) + 80px);
  padding-bottom: 100px;
}

.txt_vertical {
  writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  text-orientation: upright;
}

.mainContents {
  padding-top: var(--header-height);
}

.mainContents .inner_wrap {
  position: relative;
  width: 100%;
  max-width: calc(((100% - var(--innerWide-maxWidth)) / 2) + var(--innerWide-maxWidth));
  margin: 0 0 0 auto;
  padding: 40px 0 20px 15rem;
}

.mainContents .main_tit {
  position: absolute;
  top: 2px;
  left: 0;
  width: fit-content;
  height: 1em;
  transform-origin: top left;
  transform: rotate(-90deg) translate(-100%, -15%);
  font-weight: bold;
  font-size: 9.5rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-align: right;
  color: var(--col-gold03);
  background: linear-gradient(-45deg, var(--grade-gold03));
  padding-bottom: 1.25em;
  margin-bottom: 0.35em;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mainContents .sub_tit_wrap {
  border-bottom: 1px solid var(--col-gold03);
  margin-bottom: 1em;
}

.mainContents .sub_tit {
  font-weight: bold;
  font-size: 1.5rem;
  /* color: var(--col-gold03); */
}

.mainContents .sub_tit span {
  background: linear-gradient(-45deg, var(--grade-gold03));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mainContents .sub_tit strong {
  font-size: 130%;
}

.mainContents .inner_box {
  position: relative;
  width: 95%;
  max-width: calc(var(--inner-maxWidth));
  margin-right: auto;
  /* padding-right: var(--inner-padding-Top-LR); */
}


/*----------------------------------------
メッセージ
-----------------------------------------*/
#message {
  position: relative;
  background: url(../img/index/message_bg.jpg) no-repeat center center;
  background-size: cover;
}

#message .inner {
  padding-top: calc(var(--header-height) - 10px);
}

#message .tit.txt_vertical {
  margin: 0 auto;
  margin-bottom: 0em;
  background: linear-gradient(-45deg, #8c7e42 3%, #c6b979 41%, #8c7e42 84%, #9b893c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  font-size: 1.35rem;
  letter-spacing: 0.185em;
}

#message .tit.txt_vertical .kanji {
  font-size: 1.15em;
}

#message .tit.txt_vertical .baseline {
  display: inline-block;
  transform: translateX(4%);
  background: linear-gradient(-45deg, #8c7e42 3%, #c6b979 41%, #8c7e42 84%, #9b893c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#message .txt_wrap {
  text-align: center;
  margin-top: 0.35em;
  margin-bottom: 1.35em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

#message .txt_wrap p {
  /* font-size: 0.95rem; */
  line-height: 1.6;
  letter-spacing: 0.075em;
}

#message .txt_wrap p+p {
  margin-top: 1em;
}

#message .btn_wrap {
  padding-top: 0.4em;
  padding-bottom: 0.4em;
}

#message .btn_wrap p {
  font-size: 0.85em;
}

#message .btn_list {
  justify-content: center;
  /* padding-bottom: 100px; */
}

#message .btn_list>* {
  width: fit-content;
}

#message .btn_list>*+* {
  margin-left: 20px;
}


#message.test {
  height: 100vh;
  min-height: unset;
  max-height: unset;
  /* overflow: hidden; */
}

#message.test .scroll_wrap {
  height: fit-content;
  overflow: auto;
}



/*----------------------------------------
カテゴリー
-----------------------------------------*/
#category {
  position: relative;
  background: url(../img/index/category_bg.jpg) no-repeat center center;
  background-size: cover;
  color: #fff;
  width: 100vw;
  overflow: hidden;
}

#category .inner_wrap {
  z-index: 2;
}

#category .main_tit {
  mix-blend-mode: color-burn;
  background: linear-gradient(-45deg, #000000 0%, #4a0f00 34%, #5f2f05 41%, #4a0f00 83%, #170800 88%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.65;
}

#category::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../img/common/texture.png) repeat center center;
}

#category::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(62, 40, 28, 0.75) 1%, rgba(92, 65, 43, 0) 15%, rgba(92, 65, 43, 0) 85%, rgba(62, 40, 28, 0.75) 99%, rgba(0, 0, 0, 0.7) 100%);
  mix-blend-mode: multiply;
  z-index: 1;
}


/* スライド */
#category .swiper-button-next {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.8) 100%);
  margin-top: 0;
}

/* #category .swiper-button-prev {
  left: 0;
  right: unset;
  background: linear-gradient(-90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.15) 100%);
  margin-top: 0;
} */


.bookshelf_wrap {
  position: relative;
  margin-left: -5rem;
  padding-left: 5rem;
  padding-bottom: 0.5em;
  background: url(../img/index/booklist/bookbord.png) bottom left no-repeat, 100%;
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.75));
  overflow: hidden;
}

.bookshelf_inner {
  position: relative;
  overflow: hidden;
}

.booklist_wrap {
  display: flex;
  align-items: end;
  flex-direction: row;
  padding: 0 25vw 60px 0;
  overflow: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* .booklist_wrap li+li {
  padding-left: 3.5rem;
} */

.booklist_wrap .yoko {
  width: 20rem;
  height: 15rem;
}

.booklist_wrap .tate {
  width: 15rem;
  height: 20rem;
}

.booklist_wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/*----------------------------------------
年代別
-----------------------------------------*/
#history {
  position: relative;
  background: url(../img/index/history_bg_floor.jpg) no-repeat center center;
  background-size: cover;
  width: 100vw;
  overflow: hidden;
}

#history::before {
  content: '';
  position: absolute;
  width: 100%;
  max-width: calc(((100% - var(--innerWide-maxWidth)) / 2) + var(--innerWide-maxWidth) + 100px);
  height: 100%;
  background: url(../img/index/history_bg_book.png) no-repeat right center;
  background-size: cover;
}

#history::after {
  z-index: -1;
}

/* #history .main_tit {
  background: linear-gradient(-45deg, var(--grade-gold02));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
} */

#history .sub_tit span {
  background: linear-gradient(-45deg, var(--grade-gold02));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#history .inner_wrap {
  height: 100%;
}

#history .btn_wrap.more {
  font-size: 1.25rem;
  margin-top: 2em;
  /* margin-left: 40%; */
  /* position: absolute;
  top: 35%;
  left: calc(((100% - var(--innerWide-maxWidth)) / 2) + var(--innerWide-maxWidth) + 12px);
  transform: skew(-7deg) translate(-100%, 0%);
  transform-origin: right bottom;
  padding-left: 7.5em; */
}

/* #history .btn_wrap.more:hover {
  transform: skew(-7deg) translate(-100%, 0%) scale(1.05);
  transition: 0.15s ease-in-out;
  opacity: 1;
} */

/* #history .btn_wrap.more p {
  transform: skew(7deg);
} */

/* #history .btn_wrap .icon_btnArrowLeft {
  width: 5.6em;
} */

/* #history .btn_wrap .icon_btnArrowLeft::after {
  transform: translate(50%, -50%) skew(7deg);
}

#history .btn_wrap:hover .icon_btnArrowLeft:before {
  animation: btnFadeinHistory 0.15s ease-in-out forwards;
} */

@keyframes btnFadeinHistory {
  0% {
    opacity: 0;
    transform: translate(50%, -50%) skew(7deg) scale(0.75);
  }

  100% {
    opacity: 1;
    -moz-opacity: 1;
    transform: translate(50%, -50%) skew(7deg) scale(0.9);
  }
}


#history .since_wrap {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: calc(((100% - var(--innerWide-maxWidth)) / 2) + var(--innerWide-maxWidth));
  padding: 0 0 0 15rem;
  font-family: var(--font-family-enNum);
  mix-blend-mode: difference;
  font-weight: 600;
  color: #282828;
}

#history .since_wrap .tit {
  font-size: 6.25rem;
  line-height: 1;
  letter-spacing: -0.025em;
  transform: scale(1, 1.1);
}

#history .since_wrap .year_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 0.15em;
  font-size: 16rem;
  line-height: 0.72;
  letter-spacing: -0.025em;
  transform: scale(1, 1.1);
  font-weight: 500;
}

#history .since_wrap .border {
  display: inline-block;
  width: 100%;
  height: 1px;
  background: #282828;
}



/*----------------------------------------
特集
-----------------------------------------*/
#feature {
  position: relative;
  background: url(../img/index/feature_bg.jpg) no-repeat center center;
  background-size: cover;
  color: #fff;
  width: 100vw;
  overflow: hidden;
}

.feature_list {
  margin-top: 2rem;
  position: relative;
  padding: 0 calc(2 * var(--inner-padding-LR));
  /* background: linear-gradient(0deg, rgba(104,85,35,0.8) 2%, rgba(143,129,96,0.8) 41%, rgba(104,85,35,0.8) 84%, rgba(117,93,32,0.8) 100%); */
}

.feature_list::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(104, 85, 35, 0.8) 2%, rgba(143, 129, 96, 0.8) 41%, rgba(104, 85, 35, 0.8) 84%, rgba(117, 93, 32, 0.8) 100%);
  mix-blend-mode: multiply;
}

.feature_list li {
  border-bottom: 1px solid rgba(143, 129, 96, 0.8);
}

.feature_list li:last-child {
  border-bottom: unset;
}

.feature_list li>a {
  display: flex;
  justify-content: space-between;
  padding: 50px 0;
}

.feature_list .img_box {
  display: block;
  width: 12rem;
  height: 100%;
  min-height: 80px;
  background: #ccc;
}

.feature_list .txt_box {
  width: calc(100% - 14rem);
}

.feature_list .tit {
  color: var(--col-gold03);
  font-size: 1.25rem;
}



@media only screen and (min-width: 1600px) {
  .booklist_wrap {
    padding-right: 600px;
  }
}

@media only screen and (min-width: 2000px) {
  .booklist_wrap {
    padding-right: 1000px;
  }
}

@media only screen and (max-width: 1500px) {

  /*----------------------------------------
  年代別
  -----------------------------------------*/
  /* #history .btn_wrap.more {
    left: calc(100% - 6vw);
  } */

  #history .since_wrap .tit {
    font-size: 6vw;
  }

  #history .since_wrap .year_wrap {
    font-size: 16vw;
  }
}

@media only screen and (max-width: 1200px) {
  :root {
    --inner-padding-Top-LR: 20px;
  }

  .booklist_wrap {
    padding: 0 25vw 5vw 0;
  }

  /*----------------------------------------
  年代別
  -----------------------------------------*/
  /* #history .btn_wrap.more {
    top: 35%;
    left: calc(100% - 6.5vw);
  } */
}

@media only screen and (max-width: 1150px) {}

@media only screen and (max-width: 959px) {

  .feature_list li>a {
    flex-wrap: wrap;
    padding: 5vw 0;
  }

  .feature_list .img_box {
    width: 100%;
    margin-bottom: 1rem;
  }

  .feature_list .txt_box {
    width: 100%;
  }
}


@media only screen and (max-width: 767px) {
  :root {
    --inner-padding-Top-LR: 4vw;
  }

  .list_icon {
    flex-wrap: wrap;
  }



  /*----------------------------------------
  MV
  -----------------------------------------*/
  #mv_wrap .mainCopy {
    width: 86vw;
  }

  /* #mv_wrap .scroll span {
    width: 2em;
    height: 3.5em;
  } */

  /*----------------------------------------
  トップ共通
  -----------------------------------------*/
  .inner {
    padding-top: calc(var(--header-height) + 5vw);
    padding-bottom: 15vw;
  }

  .mainContents {
    padding-top: 0;
  }

  .mainContents .inner_wrap {
    padding-top: calc(var(--header-height) + 6vw);
    padding-left: 6.75rem;
  }

  .mainContents .main_tit {
    top: var(--header-height);
    font-size: 5.25rem;
  }

  .mainContents .sub_tit {
    font-size: 1.5rem;
  }

  .mainContents .inner_box {
    margin-right: auto;
  }



  /*----------------------------------------
  メッセージ
  -----------------------------------------*/
  #message .inner {
    padding-top: calc(var(--header-height) + 5vw);
    padding-bottom: 22vw;
  }

  #message .tit.txt_vertical {
    font-size: 1.5rem;
  }

  #message .btn_list>*+* {
    margin-left: 0px;
    margin-top: 0.5em;
  }

  #message .btn_wrap {
    min-width: 18em;
    letter-spacing: 0.25em;
  }


  /*----------------------------------------
  カテゴリー
  -----------------------------------------*/
  .inner_wrap:has(.bookshelf_wrap) {
    padding-top: 0;
  }

  .bookshelf_wrap {
    margin-top: 2rem;
    padding: 0 0 2.25rem 5rem;
  }

  .booklist_wrap {
    padding-right: 10rem;
  }

  /* .booklist_wrap li+li {
    padding-left: 1.5rem;
  } */

  .booklist_wrap .yoko {
    width: 13rem;
    height: 10rem;
  }

  .booklist_wrap .tate {
    width: 10rem;
    height: 14rem;
  }



  /*----------------------------------------
  年代別
  -----------------------------------------*/
  #history::before {
    background: url(../img/index/history_bg_book_sp.png) no-repeat center bottom;
    background-size: cover;
  }

  #history::after {
    z-index: -1;
  }

  #history.mainContents .inner_box {
    width: 95%;
  }

  #history .inner_wrap {
    height: 100%;
  }

  #history .btn_wrap.more {
    /* top: 56%;
    left: 91%; */
    font-size: 1.25rem;
    /* padding-left: 4.5em;
    padding-right: 0.5em;
    min-width: unset; */
  }

  #history .btn_wrap .icon_btnArrowLeft {
    width: 3.6em;
  }

  #history .since_wrap {
    padding: 0;
  }

  #history .since_wrap .tit {
    font-size: 12vw;
    line-height: 1.15;
  }

  #history .since_wrap .year_wrap {
    font-size: 24vw;
  }

  /*----------------------------------------
  特集
  -----------------------------------------*/
  #feature {
    position: relative;
    background: url(../img/index/feature_bg.jpg) no-repeat center center;
    background-size: cover;
    color: #fff;
    width: 100vw;
    overflow: hidden;
  }


  .feature_list {
    margin-top: 2rem;
    position: relative;
    padding: 0 var(--inner-padding-Top-LR);
  }

  .feature_list::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(104, 85, 35, 0.8) 2%, rgba(143, 129, 96, 0.8) 41%, rgba(104, 85, 35, 0.8) 84%, rgba(117, 93, 32, 0.8) 100%);
    mix-blend-mode: multiply;
  }

  .feature_list li {
    border-bottom: 1px solid rgba(143, 129, 96, 0.8);
  }

  .feature_list li>a {
    flex-wrap: wrap;
    padding: 5vw 0;
  }

  .feature_list .img_box {
    width: 100%;
    margin-bottom: 1rem;
  }

  .feature_list .txt_box {
    width: 100%;
  }

  .feature_list .tit {
    font-size: 1.15rem;
    letter-spacing: 0.075em;
  }

}