@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap);
.annotation-modal .modal{display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;width:100%;height:100%}@media(max-width: 767px){.annotation-modal .modal{align-items:flex-end}}.annotation-modal .background{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6)}.annotation-modal .content{position:relative;width:100%;max-width:800px;background:#fff}.annotation-modal .scrollable{padding:60px}@media(max-width: 767px){.annotation-modal .scrollable{padding:30px}}.annotation-modal .body{font-size:1.6rem}@media(max-width: 767px){.annotation-modal .body{max-height:200px;overflow-y:scroll}}.annotation-modal .close{display:flex;justify-content:center;align-items:flex-end;position:absolute;top:-84px;right:0;height:67px;color:#fff}@media(max-width: 767px){.annotation-modal .close{top:-70px;right:10px;height:60px;font-size:1.2rem;letter-spacing:.08em}}.annotation-modal .close::before{content:"";position:absolute;top:21px;left:calc(50% - 28px);width:57px;height:1px;background:#fff;transform:rotateZ(45deg)}@media(max-width: 767px){.annotation-modal .close::before{width:44px;left:calc(50% - 22px)}}.annotation-modal .close::after{content:"";position:absolute;top:21px;left:calc(50% - 28px);width:57px;height:1px;background:#fff;transform:rotateZ(-45deg)}@media(max-width: 767px){.annotation-modal .close::after{width:44px;left:calc(50% - 22px)}}.annotation-modal-enter-active,.annotation-modal-leave-active{transition:opacity 400ms}.annotation-modal-enter,.annotation-modal-leave-to{opacity:0}.scroll-mark .mark{position:absolute;bottom:20px;left:50%;transform:translateX(-50%)}.scroll-mark .scrolltext{margin-bottom:5px;font-size:1.2rem;color:#91979d}.scroll-mark .mouse{position:relative;width:17px;height:28px;margin:0 auto;border-radius:999px;border:1px solid #91979d}.scroll-mark .wheel{position:absolute;top:4px;left:calc(50% - 1.5px);width:3px;height:3px;border-radius:100%;background:#91979d}.curtain-enter-active,.curtain-leave-active{transition:opacity 800ms}.curtain-enter,.curtain-leave-to{opacity:0}.annotation-anchor{color:#00a040;text-decoration:underline}.annotation-anchor::after{content:url(/chronicle/130th/img/ico-fukidashi.svg);display:inline-block;padding:0 5px}.main-content{padding-top:0}.global-header{background:rgba(255,255,255,.8);border:none;transition:400ms;visibility:hidden;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.global-header.-mounted{visibility:visible}.global-header.-hidden{transform:translateY(-100%)}.kumamoto-component{min-height:100vh}.scroll-mark{transform:translateY(-100px)}.kumamoto-page{background:#000}.kumamoto-page .scene{position:relative;width:100%;overflow:hidden}.kumamoto-page .curtain{position:fixed;z-index:999999;top:0;left:0;width:100%;height:100%;background:#fff;pointer-events:none}.kumamoto-page .-roboto{font-family:"Roboto",sans-serif}.kumamoto-scene1{height:100vh;background:#000}.kumamoto-scene1 .wrapper{position:relative;width:100%;height:100%;overflow:hidden}.kumamoto-scene1 .title{position:absolute;visibility:hidden}.kumamoto-scene1 .svg{position:absolute}.kumamoto-scene1 .picture{position:absolute;width:100%;height:100%}.kumamoto-scene1 .picture.-bg1{padding-top:100px;background:#fff}.kumamoto-scene1 .picture.-bg1 .image{width:100%;height:100%;object-fit:cover}.kumamoto-scene1 .picture.-bg2 .image{width:100%;height:100%;object-fit:cover;-webkit-clip-path:url(#titlepath);clip-path:url(#titlepath)}@media(max-width: 767px){.kumamoto-scene1 .picture.-bg2 .image{-webkit-clip-path:url(#titlepathSP);clip-path:url(#titlepathSP)}}.kumamoto-scene1 .clippath{position:absolute;top:50%;left:50%}.kumamoto-scene1 .path.-pc{transform-origin:377.2px 47.68px}.kumamoto-scene1 .path.-sp{transform-origin:110.9px 76px}.kumamoto-scene1 .text{position:absolute;top:50%;left:50%;width:100%;font-size:2.5rem;font-weight:700;text-align:center;color:#fff;transform:translate(-50%, -50%)}@media(max-width: 767px){.kumamoto-scene1 .text{font-size:2rem;padding:0 20px}}.kumamoto-scene1 .lead:not(:first-child){margin-top:60px}.kumamoto-scene2{height:100vh;color:#fff;background:#000}.kumamoto-scene2 .videowrapper{position:absolute;top:0;left:0;width:100%;height:100%}.kumamoto-scene2 .video{position:absolute;top:calc(50% - 540px);left:calc(50% - 960px);width:1920px;height:1080px}@media(max-width: 767px){.kumamoto-scene2 .video{top:50%;left:0;width:100%;height:auto;transform:translateY(-50%)}}.kumamoto-scene2 .castle{position:absolute;top:0;left:0;width:100%;height:100%;mix-blend-mode:lighten}.kumamoto-scene2 .castleimage{position:absolute;top:calc(50% - 400px);left:calc(50% - 700px);width:1400px;height:800px}@media(max-width: 767px){.kumamoto-scene2 .castleimage{top:50%;left:0;width:100%;height:auto;transform:translateY(-50%)}}.kumamoto-scene2 .intro{display:flex;flex-direction:column;justify-content:center;align-items:center;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center}@media(max-width: 767px){.kumamoto-scene2 .intro{padding:0 20px;text-align:left}}.kumamoto-scene2 .text{position:absolute;left:calc(50% + 40px);width:480px;padding:50px 0}@media(max-width: 767px){.kumamoto-scene2 .text{left:0;width:100%;padding:50px 20px;background:rgba(0,0,0,.5)}}.kumamoto-scene2 .title{font-size:5.5rem;font-weight:700}@media(max-width: 767px){.kumamoto-scene2 .title{font-size:4rem}}.kumamoto-scene2 .lead{font-size:2.5rem;font-weight:700}@media(max-width: 767px){.kumamoto-scene2 .lead{font-size:1.6rem}}.kumamoto-scene2 .lead:not(:first-child){margin-top:160px}.kumamoto-scene2 .lead+.lead{margin-top:60px}.kumamoto-scene2 .small{font-size:1.6rem}@media(max-width: 767px){.kumamoto-scene2 .small{font-size:1.2rem}}.kumamoto-scene2 .photos{margin-top:160px;text-align:center}.kumamoto-scene2 .photo:not(:first-child){margin-top:60px}.kumamoto-scene2 .photoimage{width:480px;height:240px;transition:.3s cubic-bezier(0.13, 0.78, 0.38, 0.98)}@media(max-width: 767px){.kumamoto-scene2 .photoimage{width:100%;height:auto}}.kumamoto-scene2 .anchor{display:block;position:relative}.kumamoto-scene2 .anchor:hover .photoimage{opacity:.8}.kumamoto-scene2 .anchor:hover .icon{transform:scale(1.4)}.kumamoto-scene2 .anchor:hover::before{background:rgba(255,255,255,.7);transform:scale(3)}.kumamoto-scene2 .anchor::before{content:"";position:absolute;right:15px;bottom:15px;width:25px;height:25px;background:rgba(255,255,255,0);border-radius:100%;transition:.3s cubic-bezier(0.13, 0.78, 0.38, 0.98);transition-duration:600ms}.kumamoto-scene2 .icon{position:absolute;right:15px;bottom:15px;width:25px;height:25px;-webkit-filter:drop-shadow(0 0 3px rgba(0, 0, 0, 0.4));filter:drop-shadow(0 0 3px rgba(0, 0, 0, 0.4));transition:.3s cubic-bezier(0.13, 0.78, 0.38, 0.98)}.kumamoto-scene3{padding:200px 0}.kumamoto-scene3 .movie{width:960px;margin:0 auto}@media(max-width: 767px){.kumamoto-scene3 .movie{width:100%;padding:0 20px}}.kumamoto-scene3 .video{width:960px;aspect-ratio:16/9;margin:0 auto}@media(max-width: 767px){.kumamoto-scene3 .video{width:100%}}.-safari14 .kumamoto-scene3 .video{height:540px}@media(max-width: 767px){.-safari14 .kumamoto-scene3 .video{height:210px}}.kumamoto-scene3 .name{margin-top:20px;color:#fff;font-size:1.5rem}.kumamoto-scene4{height:100vh;background:url(/chronicle/130th/story/kumamoto-earthquake/img/img-footer.jpg) center center no-repeat;background-size:cover}.kumamoto-scene4 .move{display:flex;justify-content:center;align-items:flex-end;height:100%}.kumamoto-scene4 .buttons{padding-bottom:100px}.kumamoto-scene4 .button.-button2{margin-top:30px}.kumamoto-scene4 .anchor{position:relative;display:flex;align-items:center;width:300px;height:72px;text-decoration:none;overflow:hidden}.kumamoto-scene4 .anchor::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;transition:.3s cubic-bezier(0.13, 0.78, 0.38, 0.98);transition-duration:.5s}.kumamoto-scene4 .anchor.-anchor1{justify-content:flex-end;padding-right:40px;background:#fff;border:1px solid #b4b9be;color:#666;font-size:1.6rem;transition:.3s cubic-bezier(0.13, 0.78, 0.38, 0.98);transition-duration:.5s}.kumamoto-scene4 .anchor.-anchor1::before{background:#00a040;transform:translateX(100%)}.kumamoto-scene4 .anchor.-anchor1::after{content:"";position:absolute;top:50%;left:30px;width:11px;height:11px;border-top:1px solid #b4b9be;border-left:1px solid #b4b9be;transition:.3s cubic-bezier(0.13, 0.78, 0.38, 0.98);transition-duration:.5s;transform:translate(0, -50%) rotateZ(-45deg)}.kumamoto-scene4 .anchor.-anchor2{justify-content:flex-start;padding:0 60px 0 40px;background:rgba(0,0,0,.7);border:1px solid #b4b9be;color:#fff;font-size:1.4rem;transition:.3s cubic-bezier(0.13, 0.78, 0.38, 0.98);transition-duration:.5s}.kumamoto-scene4 .anchor.-anchor2::before{background:#00a040;transform:translateX(-100%)}.kumamoto-scene4 .anchor.-anchor2::after{right:30px;border-top:1px solid #b4b9be;border-right:1px solid #b4b9be;transform:translate(0, -50%) rotateZ(45deg)}.kumamoto-scene4 .anchor:hover{border-color:#00a040;background:#00a040;color:#fff}.kumamoto-scene4 .anchor:hover::before{transform:translateX(0)}.kumamoto-scene4 .anchor:hover::after{border-color:#fff}.kumamoto-scene4 .anchortext{position:relative}.kumamoto-scene4 .icon{position:absolute;right:30px;width:13px;height:13px;fill:#fff}
