@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Noto+Serif+JP:wght@300;400;500;600;700;900&family=Zen+Antique+Soft&display=swap');
@charset 'utf-8';:root {
  --black: #000000;
  --white: #ffffff;
  --red: #E60000;
  --width: 1440;
  --spwidth:900;
  --max-width: 10000
}
/*font-family: "Noto Serif JP", serif;
font-family: "Libre Caslon Text", serif;
 font-family: "Zen Antique Soft", serif;
*/
*{box-sizing: border-box;}
section{margin: 0;padding: 0;}
figure{margin: 0;padding: 0;}
img{width: 100%;}
p{line-height: 2;}
a{color: #9a1b0c;}
li{list-style-type: none;}
.inner{max-width:1400px;margin: 0 auto;width: 80%;padding: 3em;background: #ffffff50;box-shadow: 0 0  1em #ccc;margin: 2em auto;}
.fixed{position: fixed;top: 4.5em;left: 0; right: 0;z-index: 1000;}

html{}
body{line-height:1.6;color:var(--black);font-size:clamp(0.1rem, calc(18 / var(--width) * 100vw), 18px);;font-family: "Libre Caslon Text","Noto Serif JP",serif;font-weight: 500;font-feature-settings : "palt";letter-spacing: 0.1em;}
body::before{content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background: url(../img/bg.webp) center center/cover no-repeat;
  opacity: 1;
  -webkit-background-size: cover;
}

#loading {position: fixed;z-index: 9999;background: black;width: 100vw;height: 100vh;top: 0;left: 0;display: flex;justify-content: center;align-items: center;transition: opacity 1s;}

.mov{background:var(--white);position: fixed;inset: 0;display: flex;align-items: center;justify-content: center;flex-direction: column;z-index: 9998;background: var(--white);transition: .3s;}
.mov h2,
.mov h3,
.mov h4{z-index: 1;left:0;top:0;width:2%;  position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);margin: 0;opacity: 0;transition: opacity 0.5s ease;display: flex;flex-wrap: wrap;justify-content: center;}
.mov h2 span,
.mov h3 span,
.mov h4 span{display: flex;opacity: 0;transform: scale(1.05);filter: blur(0.75em);transition: filter 1s ease, opacity 1s ease, transform 0.2s ease;}
.mov h2 span.noblur,
.mov h3 span.noblur,
.mov h4 span.noblur{filter: blur(0);opacity: 1;}
.mov h2,
.mov h3 {opacity: 0;transition: opacity 0.2s ease;display: flex;flex-wrap: wrap;}
.mov h2.active,
.mov h3.active,
.mov h4.active {opacity: 1;}

section.mv{background:#fff;max-width:1400px;/* height: calc(100vh + 4em); */margin:-4em auto 0;/* min-height: 900px; */overflow: hidden;background: var(--white);aspect-ratio: 5 / 3.7;}
section.mv >div{position: relative;}
section.mv figure{overflow: hidden;}
section.mv figure.c1{width: 100%;position: relative;z-index: 1;filter: blur(1em);transition: filter 1s ease, opacity 1s ease, transform 0.2s ease;;opacity: 0;transform: scale(1.05);transform-origin: top;}
section.mv figure.c2{width: 90%;position: absolute;top: 22.5%;right: 0;left:0;margin: auto;width: 90%;z-index: 1;filter: blur(1em);transition: filter 1s ease, opacity 1s ease, transform 0.2s ease;;opacity: 0;transform: scale(1.5);transform-origin: top;}
section.mv figure.c3{width: 2.5%;position: absolute;top: 5%;right: 8%;transition: all .4s ease;clip-path: inset(0 0 100% 0);}
section.mv figure.c4{width: 5.5%;position: absolute;top: 5%;left: 10%;transition: all .4s ease;clip-path: inset(0 0 100% 0);}
section.mv figure.c5{width: 40%;position: absolute;top: 40%;left: 0;transition: all .4s ease;clip-path: inset(0 100% 0 0);z-index: 1;right: 0;margin: auto;}
section.mv figure.noblur{filter: blur(0);opacity: 1;transform: scale(1);} 
section.mv figure.clip{clip-path: inset(0);} 
section.mv h1{position: absolute;}
section.mv >div> span{opacity: 0.2;mix-blend-mode: multiply;position: absolute;filter: blur(1em);transition: filter 1s ease;opacity: 0;}
section.mv >div> span.b1{right:0;top: 32%;width: 60%;}
section.mv >div> span.b2{right: 0;top:0;width: 62%;}
section.mv >div> span.b3{left: 0;bottom:0;width: 66%;}
section.mv >div> span.b4{left: 9.5%;top:7.5%;width: 45%;}
section.mv >div> span.b5{right: 0;bottom:0;width: 43%;}
section.mv >div> span.noblur{filter: blur(0);opacity: 0.2;} 

header{width: 100%;position: relative; z-index: 1;margin-top: -2em;}
header nav{box-shadow: 0 0 0.5em #00000060;border-radius: 3em;background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);padding: 0.2em;width: 90%;margin: 0 auto;width: 90%;max-width:1400px;}
header nav h1{display: none}
header nav ul{overflow: hidden;border-radius: 3em;background: var(--black);display: flex;justify-content: center;align-items: center;margin: 0;padding: 0;position: relative;}
header nav ul li {width: 20%;border-right:0.1em solid ;border-image: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);border-image-slice: 1;;}
header nav ul li:last-child{border: none;}
header nav ul li a{color: var(--white);padding:1.5em 1em;display: block;text-align: center;text-decoration: none;transition: .3s;}
header nav ul li a:hover{background: #4c0000;}
header nav ul li a:not([href]) {pointer-events: none;color: #333;}

section.introduction{position: relative;}
section.introduction h2.ttl{text-transform: uppercase;}
section.introduction .bookinformation{padding: 1em;background: #00000010;border-radius: 1em;text-align: center;}

section.outline{position: relative;}
section.outline h2.ttl{text-transform: uppercase;}
section.outline table{}
section.outline table th{width: 8em;padding: 0.5em;vertical-align: top;text-align: left;}
section.outline table td{padding: 0.5em;}
section.outline table td ul{margin-left: -1.5em;}
section.outline table td ul li{list-style-type: disc;margin-bottom: 0.5em;}

footer{text-align: center;padding: 2em;}


@keyframes drawCircle {
  to {
    stroke-dashoffset: 0;
  }
}
.circle {width: 100px;height: 100px;stroke-width: 1.2;fill: none;stroke-dasharray: 251.2;stroke-dashoffset: 251.2;filter: drop-shadow(0 0 8px gold) drop-shadow(0 0 12px #fff8dc);}

.pc{display:block;}
.sp{display:none;}

@media (max-width: 768px) {
body{line-height:1.6;color:var(--black);font-size:calc(26/ var(--spwidth) * 100vw);}
.inner{width: 90%;padding: 2em;}
.pc{display:none;}
.sp{display:block;}

.mov h2,
.mov h3,
.mov h4{width: 5%;}

section.mv{aspect-ratio: auto;margin: 0 auto;min-height: auto;height: auto; mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);}
section.mv div{width: 120%;left: -10%;position: relative;}
section.mv figure.c1{top:65%;}
section.mv figure.c2{top:65%;}
section.mv figure.c3{top: 6%;width: 3.5%;right: 15%;}
section.mv figure.c4{top: 3%;left: 13%;width: 7.5%;}
section.mv figure.c5{top: 84%;}

section.outline table th{width: 6em;}

#nav-toggle {position: fixed;top: 1.25em;right:  2em;height: 2em;cursor: pointer;z-index: 9990}
#nav-toggle > div {position: relative;width: 3em;}
#nav-toggle span {will-change: transform;width: 100%;height: 1px;left: 0;display: block;position: absolute;transition: top .3s ease, -webkit-transform .3s ease-in-out;transition: transform .6s ease-in-out, top .3s ease;transition: transform .3s ease-in-out, top .3s ease, -webkit-transform .3s ease-in-out;}
#nav-toggle.is-in span {will-change: transform;width: 100%;height: 1px;left: 0;display: block;position: absolute;transition: top .3s ease, -webkit-transform .3s ease-in-out;transition: transform .6s ease-in-out, top .3s ease;transition: transform .3s ease-in-out, top .3s ease, -webkit-transform .3s ease-in-out;}
#nav-toggle span{background:linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);border-image-slice: 1;;}
#nav-toggle span:nth-child(1) {top: 0.8em;}
#nav-toggle span:nth-child(2) {top: 1.2em;}

#gloval-nav {display:none;opacity:0;}
.open #gloval-nav {display:block;overflow: scroll;opacity:1;z-index: 11;background: var(--black);color: #fff;position: fixed;top:0;left: 0;right: 0;bottom: 0;z-index: 10;text-align: left;display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;transition: opacity .3s ease, visibility .3s ease;padding:5.5% 7.5%;}
.open #nav-toggle{z-index:11;}
.open #nav-toggle span:nth-child(1) {will-change: transform;top: 15px;-webkit-transform: rotate(45deg);transform: rotate(45deg);}
.open #nav-toggle span:nth-child(2) {will-change: transform;top: 15px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}

.open #gloval-nav {display: block;align-items: center;padding:20% 10% 0 10%;}
.open #gloval-nav ul{width: 100%;display: block;align-items: center;position: relative;top:0.2em;padding: 0;}
.open #gloval-nav ul li{list-style-type:none;margin-bottom:1em 0 ;border-bottom:0.1em solid #000;position: relative;}
.open #gloval-nav ul li a{position: initial;display: block;padding:1.5em 0 ;}
.open #gloval-nav ul li:after{display: none;}
.open #gloval-nav ul li a:not([href]):after {border: 0.1em solid #333;}
.open #gloval-nav ul li a:after{transition: .3s; content: ''; width: 0.5em;height: 0.5em; border: 0.1em solid var(--white); border-left: 0;border-bottom: 0;transform: rotate(45deg);transform-origin: top right;position: absolute;top: 50%;right:0; box-sizing: border-box;margin-left: 0.5em;}
.open #gloval-nav ul li:last-child::after{display:none;}

header nav{background: none;width: 100%;}
header nav h1{width: 90%;margin: 0 auto;display: block;filter: invert(1);}
header nav ul li{width: 100%;border-right:none;border-bottom: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);}

  }