/* --------------------------------------------------
Common
-------------------------------------------------- */
html, body { height: 100%; font-size: 10px; line-height: 1; }

body { font-family: "Noto Serif JP", serif; color: #000000; font-display: swap; -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; line-height: 1; }
body img, body img[src$=".svg"] { width: 100%; aspect-ratio: 100/1; }
body main { display: block; }
body h1, body h2, body h3, body h4, body h5, body p { font-weight: inherit; }
body sup { line-height: inherit; }
body *:focus { outline: none; }
body button[data-js] { opacity: 0; pointer-events: none; }
body.is-loaded #wrapper { opacity: 1 !important; transition: opacity 1s ease 0s; }

@media screen and (max-width: 767px) { .pc { display: none !important; } }
@media screen and (min-width: 768px) { .sp { display: none !important; } }
/* --------------------------------------------------
Contents
-------------------------------------------------- */
@keyframes arrow { 0% { transform: translate(0, 0); }
  50% { transform: translate(0, 10%); }
  100% { transform: translate(0, 0); } }
body { background: #b4aaa0; }
body #wrapper .youtube-banner, body #wrapper .banner { position: relative; color: #ffffff; }
body #wrapper .youtube-banner a, body #wrapper .banner a { display: block; }
body #wrapper .youtube-banner a .imagearea img, body #wrapper .banner a .imagearea img { aspect-ratio: 815 / 459; }
body #wrapper .youtube-banner a .play-icon, body #wrapper .banner a .play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
body #wrapper .youtube-banner a .play-icon img, body #wrapper .banner a .play-icon img { aspect-ratio: 1; }
body #wrapper .youtube-banner a .play-text, body #wrapper .banner a .play-text { text-align: center; position: absolute; left: 0; right: 0; }
body #wrapper #top { position: relative; }
body #wrapper #top .imagearea img { aspect-ratio: 750 / 1260; }
body #wrapper #top .titlearea { position: absolute; left: 50%; top: 51.59%; transform: translate(-50%, -50%); display: flex; }
body #wrapper #top .titlearea h2 { position: relative; width: 21.2vw; margin: 0 0 0 6vw; order: 100; opacity: 0; transform: translate(0, -30px); }
body #wrapper #top .titlearea h2 img { aspect-ratio: 159 / 464; }
body #wrapper #top .titlearea h2 img.title2 { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
body #wrapper #top .titlearea h2::after { display: block; content: ""; background: #ffffff; position: absolute; left: 37.74%; top: 0; width: 1.26%; height: 64.44%; transform: scale(1, 0); transform-origin: top; }
body #wrapper #top .titlearea h3 { width: 4.53vw; opacity: 0; transform: translate(0, 30px); }
body #wrapper #top .titlearea h3 img { aspect-ratio: 34 / 324; }
body #wrapper #top h1 { width: 23.47%; position: absolute; left: 50%; top: 90.24%; transform: translate(-50%, -50%); opacity: 0; }
body #wrapper #top h1 img { aspect-ratio: 137 / 50; }
body #wrapper #lead { padding: 50px 0; }
body #wrapper #lead .inner { padding: 0 30px; }
body #wrapper #lead .inner p { text-align: justify; font-weight: 300; font-size: 2rem; line-height: 1.63; letter-spacing: -.07em; }
body #wrapper #contents { margin: 0 0 60px; }
body #wrapper #contents .section .section-panal { position: relative; font-family: "Crimson Text", serif; color: #ffffff; text-align: center; }
body #wrapper #contents .section .section-panal a { display: block; height: 100%; }
body #wrapper #contents .section .section-panal a .image-container { position: relative; overflow: hidden; padding: 66.67% 0 0; }
body #wrapper #contents .section .section-panal a .image-container .imagearea { position: absolute; left: 0; right: 0; top: 50%; transform: translate(0, -50%); }
body #wrapper #contents .section .section-panal a .image-container .imagearea .image-inner { will-change: transform; }
body #wrapper #contents .section .section-panal a .image-container .imagearea .image-inner img { aspect-ratio: 750 / 530; }
body #wrapper #contents .section .section-panal .titlearea { position: absolute; left: 0; right: 0; bottom: calc(50% - 1rem); }
body #wrapper #contents .section .section-panal .titlearea h4 { font-size: 1.35rem; margin: 0 0 20px; }
body #wrapper #contents .section .section-panal .titlearea h5 { margin: 0 auto; }
body #wrapper #contents .section .section-panal .read-more { position: absolute; left: 0; right: 0; bottom: 7%; }
body #wrapper #contents .section .section-panal .read-more p { font-size: 1.1rem; margin: 0 0 12px; }
body #wrapper #contents .section .section-panal .read-more .arrow { width: 28px; margin: 0 auto; }
body #wrapper #contents .section .section-panal .read-more .arrow img { display: block; animation: arrow 2s linear 0s infinite; aspect-ratio: 64 / 33; }
body #wrapper #contents .section .section-panal .chapter { position: absolute; right: 1.6%; top: 0; bottom: 0; writing-mode: vertical-rl; font-size: 1rem; }
body #wrapper #contents .section .section-detail { display: none; padding: 40px 0 50px; }
body #wrapper #contents .section .section-detail .inner { padding: 0 30px; }
body #wrapper #contents .section .section-detail .inner .sticky-container .youtube-banner { display: none; }
body #wrapper #contents .section .section-detail .inner .sticky-container .section-contents .textarea { margin: 0 0 20px; }
body #wrapper #contents .section .section-detail .inner .sticky-container .section-contents .textarea p { text-align: justify; font-size: 1.3rem; line-height: 1.77; }
body #wrapper #contents .section .section-detail .inner .sticky-container .section-contents .textarea p + p { margin: 1.77em 0 0; }
body #wrapper #contents .section .section-detail .inner .sticky-container .section-contents .image-container { margin: 0 0 30px; }
body #wrapper #contents .section .section-detail .inner .sticky-container .section-contents .image-container.single .imagearea img { aspect-ratio: 700 / 392; }
body #wrapper #contents .section .section-detail .inner .sticky-container .section-contents .image-container.flex { display: flex; flex-wrap: wrap; justify-content: space-between; }
body #wrapper #contents .section .section-detail .inner .sticky-container .section-contents .image-container.flex .imagearea { width: calc((100% - 9px) / 2); }
body #wrapper #contents .section .section-detail .inner .sticky-container .section-contents .image-container.flex .imagearea img { aspect-ratio: 340 / 190; }
body #wrapper #contents .section .section-detail .inner .sticky-container .section-contents .image-container.flex .imagearea:nth-child(n+3) { margin: 9px 0 0; }
body #wrapper #contents .section .section-detail .inner .section-close a { display: block; width: 28px; margin: 0 auto; }
body #wrapper #contents .section .section-detail .inner .section-close a .arrow { margin: 0 auto 12px; }
body #wrapper #contents .section .section-detail .inner .section-close a .arrow img { display: block; animation: arrow 2s linear 0s infinite reverse; aspect-ratio: 64 / 33; }
body #wrapper #contents .section .section-detail .inner .section-close a p { color: #c77555; text-align: center; font-family: "Crimson Text", serif; font-size: 1.1rem; }
body #wrapper #contents .section.is-open .section-panal a { pointer-events: none; }
body #wrapper #contents .section.is-open .section-panal a .image-container { filter: brightness(0.8); }
body #wrapper #contents .section#section1 .section-panal a .titlearea h5 { width: 240px; }
body #wrapper #contents .section#section1 .section-panal a .titlearea h5 img { aspect-ratio: 482 / 38; }
body #wrapper #contents .section#section2 .section-panal a .titlearea h5 { width: 183px; }
body #wrapper #contents .section#section2 .section-panal a .titlearea h5 img { aspect-ratio: 370 / 38; }
body #wrapper #contents .section#section3 .section-panal a .titlearea h5 { width: 295px; }
body #wrapper #contents .section#section3 .section-panal a .titlearea h5 img { aspect-ratio: 590 / 37; }
body #wrapper #contents .section#section4 .section-panal a .titlearea h5 { width: 221px; }
body #wrapper #contents .section#section4 .section-panal a .titlearea h5 img { aspect-ratio: 442 / 33; }
body #wrapper .banner { margin: 0 30px 60px; }
body #wrapper .banner a .imagearea { border-top: solid 4px #000000; border-bottom: solid 4px #000000; }
body #wrapper .banner a .play-icon { width: 45px; }
body #wrapper .banner a .play-text { bottom: 18.52%; font-size: 1.2rem; letter-spacing: .1em; }
body #wrapper .btnarea .viewall { width: 250px; height: 45px; margin: 0 auto; font-weight: 500; font-size: 1.15rem; letter-spacing: .1em; }
body #wrapper .btnarea .viewall a { height: 100%; display: flex; align-items: center; justify-content: center; background: #c77555; border-radius: 7px; }
body #wrapper .btnarea .viewall a img { width: 7px; aspect-ratio: 1; margin: 0 0 0 .25em; }
body footer { padding: 70px 0 calc(25px + 20vw); }
body footer .inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; font-family: "Crimson Text", serif; padding: 0 22px; }
body footer .inner .logoarea { width: 100%; margin: 0 0 25px; }
body footer .inner .logoarea .logo { width: 131px; margin: 0 auto; }
body footer .inner .logoarea .logo img { aspect-ratio: 192 / 71; }
body footer .inner small { font-size: .85rem; letter-spacing: .02em; }
body footer .inner .links li { text-align: right; font-weight: 700; font-style: italic; font-size: 1.25rem; }
body footer .inner .links li a { text-decoration: underline; }
body footer .inner .links li + li { margin: 17px 0 0; }
body .floating-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9; transform: translate(0, 101%); transition: transform .6s ease 0s; }
body .floating-banner a { display: block; }
body .floating-banner a .imagearea img { aspect-ratio: 750 / 150; }
body .floating-banner a .textarea { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
body .floating-banner a .textarea .play-icon { width: 30px; margin: 0 8px 0 0; }
body .floating-banner a .textarea .play-icon img { aspect-ratio: 1; }
body .floating-banner a .textarea .play-text { color: #ffffff; font-weight: 500; font-size: 1.6rem; }
body.is-scroll #wrapper .floating-banner { transform: none; }
body.is-loaded #wrapper #top .titlearea h2 { opacity: 1; transform: none; transition: all .6s ease .6s; }
body.is-loaded #wrapper #top .titlearea h2::after { transform: none; transition: transform .4s ease 1.5s; }
body.is-loaded #wrapper #top .titlearea h3 { opacity: 1; transform: none; transition: all .6s ease .6s; }
body.is-loaded #wrapper #top h1 { opacity: 1; transition: opacity 1s ease 2s; }

@media screen and (orientation: landscape) { body { background: #b4aaa0; }
  body #wrapper #top .imagearea img { aspect-ratio: 1366 / 750; }
  body #wrapper #top .titlearea { top: 50%; display: block; }
  body #wrapper #top .titlearea h2 { width: 415px; margin: 0 0 50px; transform: translate(50px, 0); }
  body #wrapper #top .titlearea h2 img { aspect-ratio: 415 / 124; }
  body #wrapper #top .titlearea h2::after { left: 1.69%; top: 103.23%; width: 61.69%; height: 1.61%; transform: scale(0, 1); transform-origin: left; }
  body #wrapper #top .titlearea h3 { width: 253px; transform: translate(-50px, 0); }
  body #wrapper #top .titlearea h3 img { aspect-ratio: 253 / 26; }
  body #wrapper #top h1 { width: 137px; top: 90.13%; } }
@media screen and (min-width: 768px) { body #wrapper .youtube-banner a .imagearea, body #wrapper .banner a .imagearea { transition: filter .4s ease 0s; }
  body #wrapper .youtube-banner a:hover .imagearea, body #wrapper .banner a:hover .imagearea { filter: brightness(0.8); }
  body #wrapper #lead { padding: 100px 0; }
  body #wrapper #lead .inner { padding: 0; width: 79.58%; max-width: 1500px; margin: 0 auto; }
  body #wrapper #lead .inner p { font-weight: 200; font-size: 3rem; line-height: 1.82; }
  body #wrapper #contents { margin: 0 0 130px; }
  body #wrapper #contents .section .section-panal a .image-container { padding: 36.6% 0 0; transition: filter .4s ease 0s; }
  body #wrapper #contents .section .section-panal a .image-container .imagearea .image-inner img { aspect-ratio: 1366 / 600; }
  body #wrapper #contents .section .section-panal a:hover .image-container { filter: brightness(0.8); }
  body #wrapper #contents .section .section-panal .titlearea { bottom: calc(50% - 1.46vw); }
  body #wrapper #contents .section .section-panal .titlearea h4 { font-size: 2.7rem; margin: 0 0 40px; }
  body #wrapper #contents .section .section-panal .read-more { bottom: 5%; }
  body #wrapper #contents .section .section-panal .read-more p { font-size: 2rem; margin: 0 0 20px; }
  body #wrapper #contents .section .section-panal .read-more .arrow { width: 64px; }
  body #wrapper #contents .section .section-panal .chapter { right: 3.66%; font-size: 1.46vw; }
  body #wrapper #contents .section .section-detail { padding: 135px 0 150px; }
  body #wrapper #contents .section .section-detail .inner { padding: 0; }
  body #wrapper #contents .section .section-detail .inner .sticky-container { width: 86.38%; max-width: 1500px; margin: 0 10.21% 50px auto; display: flex; align-items: flex-start; justify-content: space-between; } }
@media screen and (min-width: 768px) and (min-width: 1737px) { body #wrapper #contents .section .section-detail .inner .sticky-container { margin: 0 calc((100vw - 1500px) / 2) 50px auto; } }
@media screen and (min-width: 768px) { body #wrapper #contents .section .section-detail .inner .sticky-container .youtube-banner { display: block; width: 34.75%; position: sticky; top: 0; left: 0; }
  body #wrapper #contents .section .section-detail .inner .sticky-container .youtube-banner a .imagearea { border-top: solid 6px #000000; border-bottom: solid 6px #000000; }
  body #wrapper #contents .section .section-detail .inner .sticky-container .youtube-banner a .play-icon { width: 16.34%; }
  body #wrapper #contents .section .section-detail .inner .sticky-container .youtube-banner a .play-text { font-size: 3rem; letter-spacing: .1em; top: 74.38%; transform: translate(0, -50%); }
  body #wrapper #contents .section .section-detail .inner .sticky-container .section-contents { width: 59.32%; }
  body #wrapper #contents .section .section-detail .inner .sticky-container .section-contents .textarea { margin: 0 0 40px; }
  body #wrapper #contents .section .section-detail .inner .sticky-container .section-contents .textarea p { font-size: 2.1rem; line-height: 1.74; }
  body #wrapper #contents .section .section-detail .inner .sticky-container .section-contents .textarea p + p { margin: 1.74em 0 0; }
  body #wrapper #contents .section .section-detail .inner .sticky-container .section-contents .image-container { margin: 0; }
  body #wrapper #contents .section .section-detail .inner .sticky-container .section-contents .image-container.flex .imagearea { width: calc((100% - 18px) / 2); }
  body #wrapper #contents .section .section-detail .inner .sticky-container .section-contents .image-container.flex .imagearea:nth-child(n+3) { margin: 18px 0 0; }
  body #wrapper #contents .section .section-detail .inner .section-close a { width: 64px; transition: opacity .4s ease 0s; }
  body #wrapper #contents .section .section-detail .inner .section-close a .arrow { margin: 0 auto 20px; }
  body #wrapper #contents .section .section-detail .inner .section-close a p { font-size: 2rem; }
  body #wrapper #contents .section .section-detail .inner .section-close a:hover { opacity: .5; }
  body #wrapper #contents .section#section1 .section-panal a .titlearea h5 { width: 482px; }
  body #wrapper #contents .section#section2 .section-panal a .titlearea h5 { width: 370px; }
  body #wrapper #contents .section#section3 .section-panal a .titlearea h5 { width: 590px; }
  body #wrapper #contents .section#section4 .section-panal a .titlearea h5 { width: 442px; }
  body #wrapper .banner { width: 815px; max-width: 90%; margin: 0 auto 120px; }
  body #wrapper .banner a .imagearea { border-top-width: 13px; border-bottom-width: 13px; }
  body #wrapper .banner a .play-icon { width: 104px; }
  body #wrapper .banner a .play-text { bottom: 20.79%; font-size: 3rem; transform: translate(0, -50%); }
  body #wrapper .btnarea .viewall { width: 500px; height: 90px; margin: 0 auto; font-size: 2.3rem; }
  body #wrapper .btnarea .viewall a { border-radius: 14px; transition: background .4s ease 0s; }
  body #wrapper .btnarea .viewall a img { width: 16px; }
  body #wrapper .btnarea .viewall a:hover { background: rgba(199, 117, 85, 0.8); }
  body footer { padding: 160px 0 70px; }
  body footer a { transition: opacity .4s ease 0s; }
  body footer a:hover { opacity: .6; }
  body footer .inner { padding: 0 82px; }
  body footer .inner .logoarea { width: 192px; order: 2; margin: 0; align-self: flex-start; }
  body footer .inner .logoarea .logo { width: 100%; }
  body footer .inner small { font-size: 1.7rem; flex: 1; order: 1; }
  body footer .inner .links { flex: 1; order: 3; }
  body footer .inner .links li { font-size: 2.5rem; }
  body footer .inner .links li + li { margin: 30px 0 0; }
  body .floating-banner { display: none; } }