@charset "UTF-8";


/* sass */
body:lang(ja) .en { display: none; }

body:lang(en) .ja { display: none; }

.l-all { padding: 20px 25px 70px; }

.l-all.l-opus { padding-bottom: calc(120px + 60px); }

.l-all.l-more { padding-bottom: 48px; }

.l-head { display: flex; justify-content: space-between; align-items: center; }

.l-head .hdr-logo img { width: 100px; height: auto; }

.l-head .hdr-list-btn { display: flex; align-items: center; }

.l-head .hdr-list-btn > li { font-weight: 600; font-size: 1.4rem; }

.l-head .hdr-list-btn > li > a { display: block; background: #fff; color: #235F3A; padding: 6px 12px; border: #235F3A 1px solid; border-radius: 14px; text-decoration: none; }

.l-head .hdr-list-btn > li + li { margin-left: 15px; }

.l-head .hdr-list-btn > li.hdr-btn-en { font-family: "A+mfCv-AXIS Font ベーシック M ProN"; font-size: 1.2rem; }

.l-head .hdr-list-btn > li.hdr-btn-en > a { padding: 5px; min-width: 28px; min-height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

.l-body { margin-top: 15px; }

.btn-back { display: flex; align-items: center; font-size: 1.4rem; min-height: 24px; font-weight: 600; font-family: "Noto Sans JP"; }

.btn-back > a { position: relative; color: #000000; text-decoration: none; border-radius: 46px; padding-left: 34px; }

.btn-back > a::before { content: ""; background: transparent url(../image/icon-arrow03.svg) no-repeat center center; background-size: contain; position: absolute; top: 50%; margin-top: -12px; left: 0; width: 24px; height: 24px; }

html { min-height: 100vh; min-height: 100svh; min-height: 100dvh; min-height: 100lvh; overflow-y: hidden; }

.chronology { min-height: 100vh; min-height: 100svh; min-height: 100dvh; min-height: 100lvh; background-color: #fff; display: flex; justify-content: center; align-items: center; overflow: hidden; }

.l-head { position: fixed; top: 20px; width: calc(100% - 50px); z-index: 5; }

.l-foot { position: fixed; bottom: 0; width: calc(100% - 50px); padding-bottom: 20px; z-index: 5; }

.l-foot .list-section { display: flex; position: relative; align-items: center; justify-content: space-between; list-style: none; width: 320px; margin: auto; }

.l-foot .list-section:before { content: ""; width: calc(100% - 24px); height: 2px; background-color: #999; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); }

.l-foot .list-section > li { width: calc(100% / 11); position: relative; height: 18px; display: flex; align-items: center; justify-content: center; }

.l-foot .list-section > li:before { content: ""; width: 9px; height: 9px; background-color: #999; position: absolute; left: 50%; top: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); border-radius: 50%; transition: width 0.3s, height 0.3s, background-color 0.3s; }

.l-foot .list-section > li::after { content: ""; position: absolute; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); top: -6px; width: 30px; height: 8px; background: transparent url(../image/chronology-section.avif) no-repeat 0 0; background-size: contain; display: block; opacity: 0; transition: opacity 0.3s; }

.l-foot .list-section > li img { display: block; opacity: 0; transition: opacity 0.3s; height: 11px; width: auto; margin: auto; }

.l-foot .list-section > li.current:before { width: 18px; height: 18px; background-color: #235F3A; }

.l-foot .list-section > li.current:after { opacity: 1; }

.l-foot .list-section > li.current img { position: relative; opacity: 1; }

.l-body { width: 100vw; overflow-x: auto; margin: 0 !important; padding: 0; min-height: 100vh; min-height: 100svh; min-height: 100dvh; min-height: 100lvh; }

.l-body-main { display: flex; min-height: 100vh; min-height: 100svh; min-height: 100dvh; min-height: 100lvh; width: calc((200vw + 7585px) - 120px); margin: 0; padding: 0; }

.inner-txt .wrap-txt { width: 100vw; position: -webkit-sticky; position: sticky; left: 0; top: 55px; height: 0; padding: 0; }

.inner-txt .wrap-txt .inner { position: absolute; right: 22px; display: flex; justify-content: flex-end; }

.wrap-start-main { display: flex; flex-shrink: 0; min-height: 100vh; min-height: 100svh; min-height: 100dvh; min-height: 100lvh; }

.wrap-start, .wrap-main, .wrap-end { padding-bottom: 45px; padding-top: 45px; display: flex; align-items: center; flex-shrink: 0; }

.wrap-start, .wrap-end { width: 100vw; justify-content: center; }

.wrap-start { background-image: linear-gradient(90deg, #ffffff, #e3fbff 90%); margin: 0 -60px 0 0; }

.wrap-end { background-image: linear-gradient(90deg, #ffecf8 0%, #ffffff); position: relative; }

.wrap-end:after { content: ""; display: block; width: 60px; height: 1px; background: transparent url(../image/chronology-bg-end.avif) no-repeat 0 0; background-size: contain; position: absolute; left: -1px; top: 50%; margin-top: -76.5px; }

.wrap-end .btn-guide { margin: -145px 0 0 0; }

.wrap-end .btn-guide a { width: 200px; min-height: 46px; font-size: 1.8rem; padding-right: 20px; }

.wrap-end .btn-guide a:after { width: 8px; height: 11px; right: 18px; }

.wrap-main { max-width: 7585px; background: transparent url(../image/chronology-bg.avif) no-repeat 0 0; background-size: 100% 100%; flex-direction: column; justify-content: center; height: 100vh; height: 100svh; height: 100dvh; height: 100lvh; }

.wrap-txt { z-index: 100; }

.wrap-txt .txt-year { display: flex; flex-direction: column; align-items: center; will-change: opacity; }

.wrap-txt .year { font-family: "EB Garamond", serif; font-size: 5.8rem; color: #235F3A; opacity: 0; display: inline-block; will-change: transform, opacity; }

.wrap-txt .old { font-size: 1.3rem; margin-top: -10px; opacity: 0; }

.wrap-txt .number { font-family: "EB Garamond", serif; font-size: 2.8rem; display: inline-block; opacity: 0; will-change: transform, opacity; }

.wrap-txt .unit { opacity: 0; }

.wrap-txt .digit { display: inline-block; will-change: transform, opacity; width: 1ch; text-align: center; font-variant-numeric: tabular-nums; -webkit-font-feature-settings: "tnum" 1; font-feature-settings: "tnum" 1; }

.wrap-txt .btn-map { margin-left: 50px; margin-top: 12px; width: 60px; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }

.wrap-txt .btn-map a { width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; background-color: #235F3A; color: #fff; border-radius: 50%; font-size: 1.0rem; text-decoration: none; font-weight: 700; }

.wrap-txt .btn-map span { line-height: 1.6; }

.wrap-txt .btn-map span:before { content: ""; display: block; width: 16px; height: 26px; background: transparent url(../image/chronology-icon-pin.avif) no-repeat 0 0; background-size: contain; margin: 0 auto; }

.btn-guide { display: flex; justify-content: center; align-items: center; }

.btn-guide a { width: 100px; min-height: 26px; color: #fff; text-decoration: none; background-color: #235F3A; border-radius: 30px; display: flex; justify-content: center; align-items: center; font-size: 1.1rem; font-weight: 700; line-height: 1.6; padding-right: 10px; position: relative; }

.btn-guide a:after { content: ""; width: 5px; height: 7px; background: transparent url(../image/icon-arrow02.svg) no-repeat 0 0; background-size: contain; position: absolute; right: 10px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }

.wrap-area { display: flex; }

.wrap-area > li.length1 { width: 5%; }

.wrap-area > li.length2 { width: 3%; }

.wrap-area > li.length3 { width: 3%; }

.wrap-area > li.length4 { width: 3%; }

.wrap-area > li.length5 { width: 2.75%; }

.wrap-area > li.length6 { width: 2.25%; }

.wrap-area > li.length7 { width: 3%; }

.wrap-area > li.length8 { width: 3%; }

.wrap-area > li.length9 { width: 2.3%; }

.wrap-area > li.length10 { width: 3.2%; }

.wrap-area > li.length11 { width: 3%; }

.wrap-area > li.length12 { width: 3.4%; }

.wrap-area > li.length13 { width: 2.2%; }

.wrap-area > li.length14 { width: 3%; }

.wrap-area > li.length15 { width: 2.4%; }

.wrap-area > li.length16 { width: 2.7%; }

.wrap-area > li.length17 { width: 2.7%; }

.wrap-area > li.length18 { width: 5.8%; }

.wrap-area > li.length19 { width: 5.5%; }

.wrap-area > li.length20 { width: 3%; }

.wrap-area > li.length21 { width: 2.6%; }

.wrap-area > li.length22 { width: 3%; }

.wrap-area > li.length23 { width: 2.6%; }

.wrap-area > li.length24 { width: 3%; }

.wrap-area > li.length25 { width: 2.8%; }

.wrap-area > li.length26 { width: 2.1%; }

.wrap-area > li.length27 { width: 3.4%; }

.wrap-area > li.length28 { width: 2.3%; }

.wrap-area > li.length29 { width: 2.7%; }

.wrap-area > li.length30 { width: 3.1%; }

.wrap-area > li.length31 { width: 3%; }

.wrap-area > li.length32 { width: 5.2%; }

.wrap-main-img { position: relative; }

.wrap-main-img img { width: 100%; height: auto; max-height: 100%; }

.wrap-main-img .pngseq { position: absolute; top: 64%; left: 0; z-index: 2; pointer-events: none; width: 140px; height: 140px; overflow: hidden; opacity: 0; }

.wrap-main-img .pngseq .inner { height: 100%; }

.wrap-main-img .pngseq .inner img { width: 100%; height: 100%; object-fit: contain; }

.wrap-main-img .pngseq.pngseq-01 { left: 780px; }

.wrap-main-img .pngseq.pngseq-02 { left: 3370px; }

.wrap-main-img .pngseq.pngseq-03 { left: 4730px; }

.wrap-main-img .btn-guide { position: absolute; }

.wrap-main-img .btn-guide.position1 { bottom: 193px; left: 1270px; }

.wrap-main-img .btn-guide.position2 { bottom: 0px; left: 1891px; }

.wrap-main-img .btn-guide.position3 { bottom: 38px; left: 2117px; }

.wrap-main-img .btn-guide.position4 { bottom: 0px; left: 2329px; }

.wrap-main-img .btn-guide.position5 { bottom: 201px; left: 2965px; }

.wrap-main-img .btn-guide.position6 { bottom: 0; left: 3195px; }

.wrap-main-img .btn-guide.position7 { bottom: 74px; left: 3811px; }

.wrap-main-img .btn-guide.position8 { bottom: 56px; left: 4023px; }

.wrap-main-img .btn-guide.position9 { bottom: 165px; left: 4658px; }

.wrap-main-img .btn-guide.position10 { bottom: 150px; left: 5083px; }

.wrap-main-img .btn-guide.position11 { bottom: 174px; left: 5308px; }

.wrap-main-img .btn-guide.position12 { bottom: 221px; left: 5505px; }

.timeline-video { position: absolute; }

.timeline-video .inner { position: relative; display: flex; width: 100%; height: 100%; }

.timeline-video video { width: 100%; height: auto; }

.timeline-video.timeline-video-01 { left: 1562px; top: 129px; width: 55px; }

.timeline-video.timeline-video-02 { left: 2571px; top: 328px; width: 117px; }

.timeline-video.timeline-video-03 { left: 4024px; top: -114px; width: 400px; }

.timeline-video.timeline-video-04 { left: 5450px; bottom: -85px; width: 170px; }

.timeline-video.timeline-video-05 { left: 7066px; top: -79px; width: 480px; }

.auxiliary { display: flex; align-items: center; justify-content: center; }

.auxiliary img { width: 150px; height: auto; transition: 0.3s; opacity: 1; }

.auxiliary.hidden img { opacity: 0; }

body:lang(en) .wrap-txt .old { padding-top: 5px; display: flex; flex-direction: row-reverse; align-items: flex-end; }

body:lang(en) .wrap-txt .old .unit { padding: 0 3px 3px 0; }

body:lang(en) .wrap-main-img .btn-guide.position1 { bottom: 189px; }

body:lang(en) .wrap-main-img .btn-guide.position3 { bottom: 50px; }

body:lang(en) .wrap-main-img .btn-guide.position4 { bottom: 10px; }

body:lang(en) .wrap-main-img .btn-guide.position5 { bottom: 201px; }

body:lang(en) .wrap-main-img .btn-guide.position7 { bottom: 62px; }

body:lang(en) .wrap-main-img .btn-guide.position9 { bottom: 174px; }

body:lang(en) .wrap-main-img .btn-guide.position11 { bottom: 160px; }

body:lang(en) .wrap-main-img .btn-guide.position12 { bottom: 209px; }

img { pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

@media all and (min-width: 768px) { .l-all { padding: 37px 100px 96px; } .l-all.l-opus { padding-bottom: calc(224px + 60px); } .l-all.l-more { padding-bottom: 66px; } .l-head .hdr-logo img { width: 178px; } .l-head .hdr-list-btn > li { font-size: 1.7rem; } .l-head .hdr-list-btn > li > a { padding: 8px 18px; border-radius: 25px; } .l-head .hdr-list-btn > li + li { margin-left: 24px; } .l-head .hdr-list-btn > li.hdr-btn-en { font-size: 1.6rem; } .l-head .hdr-list-btn > li.hdr-btn-en > a { padding: 5px; min-width: 38px; min-height: 38px; } .l-body { margin-top: 36px; } .l-body-main { max-width: 1363px; margin: 0 auto; } .l-all .l-body-main { max-width: 1200px; } .l-all.l-index .l-body-main { max-width: 1363px; } .btn-back { font-size: 2rem; min-height: 34px; } .btn-back > a { padding-left: 44px; } .btn-back > a::before { width: 34px; height: 34px; margin-top: -17px; } .chronology { overflow: visible; }
  .l-body { overflow: visible; }
  .l-body-main { margin: 0; position: relative; }
  .wrap-start, .wrap-main, .wrap-end { min-height: calc(100% - 220px); padding-bottom: 110px; padding-top: 110px; }
  .wrap-main { width: 7585px; }
  .inner-txt .wrap-txt { width: calc(50vw + 116px); top: 72px; }
  .inner-txt .wrap-txt .inner { right: 0; }
  .wrap-txt .year { font-size: 6.4rem; }
  .wrap-txt .old { font-size: 1.4rem; }
  .wrap-txt .number { font-size: 2.8rem; }
  .wrap-txt .btn-map { margin-top: 10px; }
  .l-foot { padding-bottom: 30px; } }