@charset utf-8;
.mt1em { margin-top: 1em; }

.loading { background: #FFF; z-index: 999; position: fixed; inset: 0; margin: auto; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }


.loading  img { width: 250px; max-width: 60%; }

.header { display: flex; justify-content: space-between; align-items: center; position: fixed; left: 5%; bottom: 4vw; right: 5%; margin: auto; z-index: 98; color: transparent; font-size: 2.5rem; letter-spacing: .1em; }
.header .menu { display: flex; font-family: "helvetica-lt-pro", sans-serif; }
.header .menu > li + li { margin-left: 2em; }

.header .kibi { color: #000; transition: color .3s; font-family: "helvetica-lt-pro", sans-serif;  }


.header .scroll { position: fixed; right: 3%; bottom: 2vw; margin: auto; color: #000; font-size: 1rem; writing-mode: vertical-rl; }

.header.white { color: #FFF; }
.header.white .kibi { color: #FFF; }
.header.white .scroll { color: transparent; pointer-events: none; } 

@media screen and (max-width: 900px) {
  .header  { font-size: 2rem; }
}
.section { width: 100%; height: 100vh; position: relative; position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; display: none; }
.section-inner {display: flex; align-items: center; justify-content: center; overflow: hidden; width: 100%; height: 100%; }
.section-inner .text { text-align: center; line-height: 3; max-width: 80%; }
.section .kibi-logo { width: 170px; height: auto; object-fit: contain; transform: translateY(-30%); }

.section.slide { display: block; opacity: 0; transition: opacity 1s ease; pointer-events: none; }
.section.slide.active { opacity: 1; pointer-events: auto; }
.fullimg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 5s ease;
  pointer-events: none; 
}

.susume { font-size: 1.2rem; width: fit-content; border: 2px solid; text-align: center; padding: .5em 1em; position: absolute; right: 5%; top: 4vw; }

.active .fullimg {
  transform: scale(1.05); 
}

.t-blue1 { color: #036eb8; }
.t-blue2 { color: #2ea7e0; }
.t-blue3 { color: #00b8b8; }
.t-blue4 { color: #005cd0; }


.full-img { width: 100%; }

.main-section { position: relative; z-index: 97; pointer-events: none; }
.main-section-inner { background: #FFF; }
.main-section-inner .title img { width: 250px; }
.slide-trigger { width: 100%; height: 100vh; }

.external-icon { width: .8em; margin-left: .5em; vertical-align: middle; }


.mv { width: 100%; height: 100vh; position: relative; }
.title-img { width: 90%; height: 70vh; object-fit: contain; position: absolute; top: 10vh; left: 0; right: 0; margin: auto; z-index: 99; }
.title-img img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: contain; opacity: 0; transition: opacity .5s; margin: auto; }
.title-img img.active { opacity: 1; }

.title-img .img1 { width: 80%; }
.title-img .img2 { width: 90%; }
.title-img .img3 { height: 70%; }
@media screen and (max-width: 900px) {
.title-img .img2 { width: 70%; }
}

.loading-title { width: 16%; position: absolute; left: 72%; top: 55%; margin: auto; z-index: 999; }
.mv .title { position: absolute; left: 5%; top: 4vw; font-size: 2.5rem; line-height: 1.5; }
.mv .info { width: 90%;  text-align: center; position: absolute; bottom: 3vw; left: 5%; right: 5%; margin: auto; }
.mv .info br { display: none; }

.mv .pagination { display: flex; justify-content: center; position: absolute; bottom: 6vw; left: 0; right: 0; width: fit-content; border: 1px solid #000; border-radius: 2em; padding: 0 1em; margin: auto; font-size: .75rem; color: #9fa0a0; }
.mv .pagination .dot + .dot { margin-left: 1em; }
.mv .pagination .dot.active { color: #000; }

.about-read { padding: min(400px, 50vw) 0; }
.about-read .inner { display: grid; grid-template-columns: 35% 55%; gap: 10%; width: 80%; margin: 0 auto; font-size: 3rem; line-height: 1.5; letter-spacing: 0; font-weight: 400; text-align: justify; letter-spacing: .05em;  }
.about-read .title { letter-spacing: 0; text-indent: -.5em;  }
@media screen and (max-width: 1200px) {
  .about-read .inner { font-size: 3vw;}
}
@media screen and (max-width: 900px) {
  .about-read  .inner { grid-template-columns: 1fr; font-size: 6vw;}
  .mv .info br { display: inline; }
  
  .main-section-inner .title img { width: 150px; }
  .susume { font-size: .9rem; }
  
  .mv .pagination  { bottom: calc(3vw + 7em); }
  
}
.book-btn { background: none; border: none; border-radius: 50%; cursor: pointer; pointer-events: none; }
.book-btn::before { content: ''; width: 100%; height: 100%; position: absolute; inset: 0; margin: auto; border: 2px dashed #FFF; border-radius: 50%; animation: rolling 50s linear infinite; display: block; }
.active .book-btn { pointer-events: auto; }
.book-btn span { position: absolute; width: fit-content; margin: auto; left: 0; right: 0; bottom: 2em; color: #FFF;  }
.book-btn.book1 { width: 25vw; height: 25vw; position: absolute; left: 58%; top: 48%; margin: auto; transform: translate(-50%, -50%); }
.book-btn.book2 { width: 20vw; height: 20vw; position: absolute; left: 58%; top: 63%; margin: auto; transform: translate(-50%, -50%); }
.book-btn.book3 { width: 30vw; height: 30vw; position: absolute; left: 50%; top: 55%; margin: auto; transform: translate(-50%, -50%); }

@keyframes rolling {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media screen and (orientation: portrait) {
  
  .book-btn.book1 { width: 25vh; height: 25vh; left: 68%; }
  .book-btn.book2 { width: 25vh; height: 25vh; left: 68%; }
  .book-btn.book3 { width: 40vh; height: 40vh;  }
}


.popup-book-info { position: fixed; top: 0; left: 0; right: 0; bottom: 0;  z-index: 99; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s; pointer-events: none; overflow-y: scroll; }
.popup-book-info::before { content: ''; width: 100%; height: fit-content; position: absolute; inset: 0; background: rgba(0,0,0,.3); margin: auto; }

.popup-book-info.book1 { background: url("../img/book1.jpg") no-repeat center center / cover; }
.popup-book-info.book2 { background: url("../img/book2.jpg") no-repeat center center / cover; }
.popup-book-info.book3 { background: url("../img/book3.jpg") no-repeat center center / cover; }

.popup-book-info .inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1200px; gap: 30px; width: 90%; color: #FFF; position: relative; z-index: 2; height: fit-content; }

.popup-book-info .text { line-height: 2; font-size: 1.5rem;  }

.popup-book-info .title-block { padding-bottom: 100px; }
.popup-book-info .title { font-size: 1.5rem; font-weight: bold; margin-bottom: .5em; }
.popup-book-info .name { font-size: 1.25rem; font-weight: bold; }
.popup-book-info .name span{ font-size: .6em; }

.popup-book-info .book-close { width: 80px; height: 80px; display: block; position: absolute; left: 0; bottom: 0; margin: auto; background: #FFF; border: none; }
.popup-book-info .book-close::before,
.popup-book-info .book-close::after { content: ''; width: 50px; height: 1px; display: block; position: absolute; inset: 0; margin: auto; background: #000; }
.popup-book-info .book-close::before { transform: rotate(-45deg); }
.popup-book-info .book-close::after { transform: rotate(45deg); }

.popup-book-info.active { pointer-events: auto; opacity: 1; }

@media screen and (max-width: 768px) {
  .popup-book-info { display: block; padding: 20vw 0; }
  .popup-book-info .inner { grid-template-columns: 1fr; gap: 2rem; padding-bottom: 70px; margin: 0 auto;  }
  .popup-book-info .title-block { padding-bottom: 0; }
  .popup-book-info .book-close { width: 50px; height: 50px; }
  
  .popup-book-info .text { font-size: 1.2rem; }
}

.section .mgs { position: absolute; top: 5vw; left: 5vw; color: #FFF; font-size: 2.5rem; z-index: 2; }

.sp-visible { display: none; }
@media screen and (max-width: 768px) {
  .sp-visible { display: inline; }
  .header  { font-size: 4vw; }
  .section .mgs { font-size: 2rem; top: 5vw; }
}

.popup-show .header { opacity: 0; }
.popup-show .section .mgs { opacity: 0; }
.popup-show .section .book-btn { opacity: 0; }


.page-about { display: flex; justify-content: center; align-items: center; height: 100vh;font-size: 1.125rem; line-height: 2.25; min-height: 600px;  }
.page-about .logo { display: block; margin: 0 auto 4em; width: fit-content; width: 70px; }
.page-about .logo img { width: 100%; }
.page-about .copy {font-size: 2rem; font-wegiht: bold; margin-bottom: 2em; }
.page-about .text { max-width: 525px; width: 90%; }
.page-about .info { margin-top: 3em;  line-height: 2.5em; }
.page-about .gotop { width: fit-content; margin: 5em auto 0; display: block; }