@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap");
.container { width: 1200px; max-width: 92%; margin-left: auto; margin-right: auto; }

@keyframes fadeInOut { 0% { opacity: 0; }
  54% { opacity: 1; }
  54% { opacity: 1; }
  100% { opacity: 0; } }
@keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes fadeOut { 0% { opacity: 1; }
  100% { opacity: 0; } }
@keyframes scaleIn { 0% { scale: 1; }
  100% { scale: 1.1; } }
@keyframes leftFadeIn { 0% { transform: translateX(-30%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; } }
@keyframes leftScaleIn { 0% { width: 0; opacity: 0; }
  100% { width: 100%; opacity: 1; } }
.kv { position: sticky; z-index: 9; width: 100%; top: 0; transition-duration: 1.5s; padding-bottom: 7rem; }
.kv .container { width: 1920px; max-width: 100%; position: relative; }
.kv .headlogo { z-index: 10; top: 0; left: 0; z-index: 8; line-height: 0; background: #fff; width: 100%; padding: 8px; }
.kv .headlogo b { width: 240px; max-width: 33%; display: block; }
.kv ul { position: relative; }
.kv li { position: absolute; width: 100%; left: 0; top: 0; opacity: 0; animation: fadeInOut 5.0s 1.0s forwards; }
.kv li figure { max-width: 85%; margin-left: auto; overflow: hidden; }
.kv li.kv1 { position: relative; opacity: 1; animation-delay: 0s; }
.kv li.kv2 { animation-delay: 3.3s; }
.kv li.kv3 { animation-delay: 6.6s; }
.kv li.kv4 { animation: fadeIn 3.0s 10.0s forwards; }
.kv li.kv4 img { animation: scaleIn 2s 11s ease-in forwards; }
.kv li.kv4 .kv-txt { position: absolute; left: 0; bottom: -6em; display: inline-flex; flex-direction: column; align-items: flex-start; }
.kv li.kv4 dl { position: relative; display: inline-block; margin: 8px 0; }
.kv li.kv4 dt { color: #fff; font-size: clamp(1.5em, 8vw, 3em); font-weight: 700; font-family: "Noto Serif JP", serif; position: relative; z-index: 3; display: inline-block; padding: 0 .5rem 0 1rem; line-height: 1.3; transform: translateX(-100%); animation: leftFadeIn 1.0s 12.5s forwards; white-space: nowrap; }
.kv li.kv4 dd { background: #009474; mix-blend-mode: multiply; position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 1; width: 0; animation: leftScaleIn 1.0s 12.0s forwards; }
.kv li.kv4 em { display: inline-block; position: relative; z-index: 3; mix-blend-mode: normal; }
.kv li.kv4 .ti05 { text-indent: -0.5em; padding-left: 0; }

.contents { position: relative; z-index: 11; background: #fff; color: #505050; overflow: hidden; }

.story { font-family: "Noto Serif JP", serif; position: relative; }
.story .container { width: 1366px; max-width: 100%; }
.story h1 { text-align: center; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding-bottom: 2rem; }
.story h1 span { flex: 0 0 100%; display: block; padding: 0 0 8px; letter-spacing: 1px; font-size: 0.9em; }
.story h1 em { font-size: 1.5em; padding: 0 8px 8px 0; }
.story h1 b img { height: 4.5rem; }
.story p { font-family: 'Noto Sans JP', sans-serif; }

.story-bg { position: absolute; overflow: visible; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center top; }

.story01 { opacity: 0; transition-duration: 1.2s; padding-top: 5rem; padding-bottom: 24%; }
.story01.inView { opacity: 1; }
.story01 .story-bg { background-image: url("../images/drape01.png"); background-size: 100vw; }

.story-profile { transition-delay: 0.2s; display: flex; align-items: flex-end; }
.story-profile figure { flex: 0 0 45%; transform: translateX(-40px); }
.story-profile .profile-txt { padding: 0 4vw 4vw 0; font-weight: 600; }
.story-profile .profile-txt span { display: block; }
.story-profile .profile-txt b { display: block; font-size: 1.6em; }
.story-profile .profile-txt b small { font-size: 0.75em; }
.story-profile .profile-txt abbr { font-size: 0.7em; }

.story-box { position: relative; }
.story-box .story-box-bg { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: #f3f3ee; mix-blend-mode: multiply; z-index: 2; }
.story-box .story-box-body { padding: 4rem 5rem 8rem; position: relative; z-index: 3; }
.story-box h2 { font-size: clamp(1.4em, 8vw, 2.4em); color: #009474; padding-bottom: 1em; }
.story-box p { line-height: 3.2; font-size: 0.85em; color: #222; text-align: justify; }

.story-box01 { width: 70%; margin-top: 5rem; margin-left: auto; }
.story-box01 p { width: 80%; margin-left: auto; }
.story-box01 figure { position: absolute; }

.box01-01 { width: 40%; left: 0; top: 42%; transform: translate(-50%, 0); }

.box01-02 { width: 64%; right: 0; bottom: 0; transform: translate(16%, 80%); }

.box01-03 { width: 64%; right: 58%; bottom: 0; transform: translate(0, 120%); }

.story02 { padding-top: 24%; padding-bottom: 30%; }
.story02 .story-bg { background-image: url("../images/drape02.png"); background-size: 132vw; }

.story-box02 { width: 70%; margin-top: 0; margin-right: auto; text-align: right; }
.story-box02 .story-box-body { padding-bottom: 5rem; }
.story-box02 h2 { display: inline-block; text-align: left; }
.story-box02 p { width: 72%; margin-right: auto; text-align: justify; }
.story-box02 figure { position: absolute; }

.box02-01 { width: 72%; right: 0; top: 46%; transform: translate(64%, 0); }

.box02-02 { display: flex; top: 100%; left: 0; transform: translate(0, 50%); gap: 1rem; }
.box02-02 i { flex: 0 0 58%; }
.box02-02 i img { width: 100%; object-fit: cover; }

.story03 { padding-top: 30%; padding-bottom: 40%; }
.story03 .story-bg { background-image: url("../images/drape03.png"); background-position: center top; background-size: 102vw; }

.story-box03 { width: 70%; margin-top: 5rem; margin-left: auto; }
.story-box03 .story-box-body { padding-bottom: 5rem; }
.story-box03 p { width: 74%; margin-left: auto; text-align: left; }
.story-box03 figure { position: absolute; }

.box03-01 { width: 72%; left: 0; top: 45%; transform: translate(-72%, 0); }

.box03-02 { width: 50%; top: 0; left: 0%; transform: translate(-10%, -86%); }

.box03-03 { width: 40%; top: 100%; left: 50%; transform: translate(-50%, 25%); }

.storyFin { padding-bottom: 16vw; }
.storyFin .story-bg { background-image: url("../images/drape04.png"); background-size: 112vw; }
.storyFin h3 { text-align: center; }
.storyFin h3 img { height: 5rem; margin: auto; }

.message-box { position: relative; padding: 4rem 3rem 2rem; width: 70%; margin: 1rem auto 0 auto; }
.message-box .message-box-bg { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: #009474; mix-blend-mode: multiply; z-index: 1; }
.message-box .message-box-body { position: relative; z-index: 3; }
.message-box h2 { font-size: 2.7em; color: #fff; padding-bottom: 1em; }
.message-box dl { display: flex; color: #fff; }
.message-box dt { flex: 0 0 30%; position: relative; }
.message-box dt img { position: absolute; right: 3rem; top: .5rem; width: 100%; transform: scale(1.8); transform-origin: right top; }
.message-box p { line-height: 2.8; font-size: 0.85em; padding-bottom: 1rem; }
.message-box h4 { font-size: 1.2em; }
.message-box h4 span { display: block; }
.message-box h4 em { display: block; font-size: 1.8em; }

.program { background: #f3f3ee; padding: 4rem 0; color: #505050; }
.program h3 { text-align: center; font-family: "Noto Serif JP", "Shippori Mincho", serif; font-weight: 500; letter-spacing: 0.045em; padding-bottom: 2rem; font-size: 1.2em; }
.program h3 b { font-weight: 500; display: block; font-size: 2.0em; }
.program p { line-height: 2; max-width: 800px; margin: auto; }
.program ul { display: grid; grid-template-columns: 30% 1fr 30%; grid-template-rows: 1fr 1fr; padding: 3rem 0 0; }
.program li { line-height: 1.2; }
.program li.program-img { grid-column: 2 / 3; grid-row: 1 / 3; padding: 0 1rem; transition-delay: 0.5s; }
.program li.program-img figcaption { text-align: center; color: #009474; font-size: 0.9em; font-weight: 600; padding-top: 5px; }
.program li.program-text { padding: 0 0 0 0; }
.program li.program-text b { display: block; color: #009474; font-size: 0.8em; padding-bottom: 0; line-height: 1.4; }
.program li.program-text strong { display: none; }
.program li.program-text span { display: block; font-size: 0.7em; padding: .5em 0 1em 0; text-align: justify; line-height: 1.4; }
.program li.program-text small { display: inline-block; line-height: 1.2; padding-top: 8px; }
.program li.program-text3 { grid-column: 3 / 4; }
.program li.program-text4 { grid-column: 1 / 2; grid-row: 2 / 3; transition-delay: 0.3s; }
.program li.program-text2 b, .program li.program-text4 b { color: #6eb36c; }

.program-btn { width: 40%; text-align: center; margin: auto; padding: 1rem; }
.program-btn a { display: flex; width: 100%; aspect-ratio: 121 / 10; background: url("../images/btn.png") no-repeat; background-size: contain; color: #009474; font-weight: 600; align-items: center; justify-content: center; padding-bottom: 1px; }
.program-btn a:hover { background-image: url("../images/btn-hov.png"); color: #fff; }

.page-kango .box01-02 { width: 60%; transform: translate(0, 80%); }
.page-kango .box01-03 { width: 40%; transform: translate(0, 160%); right: 66%; }
.page-kango .story02 { padding-bottom: 40%; }
.page-kango .story-box02 { text-align: left; }
.page-kango .box02-01 { top: 42%; }
.page-kango .box02-02 { transform: translate(0, 0); align-items: center; gap: 3rem; }
.page-kango .box02-02 i { flex: 0 0 55%; }
.page-kango .box02-02 i:first-child { padding-left: 7rem; padding-top: 3rem; }
.page-kango .box03-01 { top: 40%; width: 50%; transform: translate(-50%, 0); }
.page-kango .box03-03 { width: 50%; left: auto; right: 0; transform: translate(0, 25%); }
.page-kango .storyFin { padding-top: 8%; }

.page-riha .story01 { padding-bottom: 36%; }
.page-riha .box01-01 { line-height: 0; }
.page-riha .box01-01 img:nth-child(2) { transform: translateX(-40%); transition-delay: 0.2s; }
.page-riha .box01-01 img:nth-child(3) { transition-delay: 0.4s; }
.page-riha .box01-01 img:nth-child(4) { transform: translateX(40%); transition-delay: 0.6s; }
.page-riha .story02 { padding-bottom: 40%; }
.page-riha .box02-01 { top: 42%; right: 1%; }
.page-riha .box02-02 { top: 90%; }
.page-riha .story03 { padding-bottom: 24%; }
.page-riha .box03-01 { top: 42%; }
.page-riha .box03-02 { width: 24%; right: auto; left: -46%; transform: translate(0, -100%); }
.page-riha .box03-03 { top: 0; left: 0; width: 48%; transform: translate(-20%, -88%); }
.page-riha .program li.program-img figcaption { padding-right: 18%; }

@media (min-aspect-ratio: 1012 / 700) and (min-width: 769px) { .kv { padding-bottom: 0; }
  .kv figure img { height: auto; }
  .kv li { height: 100vh; }
  .kv li.kv4 .kv-txt { bottom: 12%; } }
@media (max-width: 1240px) { .story-box .story-box-body { padding: 4vw 4vw 8vw; }
  .message-box { width: 88%; }
  .message-box h2 { font-size: clamp(30px, 4.8vw, 45px); }
  .message-box dt img { transform: scale(1.4); }
  .program-btn { width: 50%; } }
@media (max-width: 768px) { .page { padding: 0; }
  .kv { padding-bottom: 24vw; }
  .kv .headlogo { background: #fff; position: sticky; top: 0; max-width: 100%; width: auto; transition-delay: 0s; padding: 8px; }
  .kv .headlogo b { display: block; width: 33%; }
  .kv ul { position: relative; }
  .kv li figure { max-width: 100%; }
  .kv li.kv4 dl { margin: 4px 0; }
  .kv li.kv4 dt { font-size: clamp(1rem, 5.6vw, 3rem); }
  .kv li.kv4 .kv-txt { bottom: -5.0em; }
  .story h1 { display: flex; justify-content: center; }
  .story h1 em { font-size: 1.2em; }
  .story h1 b img { height: 12vw; }
  .story-profile { flex-direction: column; align-items: center; }
  .story-profile .profile-txt { padding: 0; padding-right: 40px; }
  .story-profile .profile-txt span { display: inline-block; }
  .story01 { padding-top: 3rem; padding-bottom: 124vw; }
  .story01.inViewSp { transition-delay: 1.0s; transition-duration: 2.0s; opacity: 1; }
  .story02 { padding-top: 0; padding-bottom: 0; }
  .story03 { padding-top: 124vw; padding-bottom: 64vw; }
  .story-box .story-box-body { padding: 5rem 7.2vw; }
  .story-box h2 { font-size: clamp(1rem, 6vw, 2.4rem); }
  .story-box01 { width: 92%; }
  .story-box01 .story-box-body { padding-top: 16vw; padding-right: 8vw; }
  .story-box01 p { width: 100%; }
  .box01-01 { top: 0; transform: translate(-40%, -40%); }
  .box01-02 { width: 60%; transform: translate(0%, 80%); }
  .box01-03 { width: 60%; transform: translate(0%, 180%); right: auto; left: 0; }
  .story-box02 { width: 92%; text-align: left; }
  .story-box02 .story-box-body { padding-top: 24vw; }
  .story-box02 p { width: 100%; }
  .box02-01 { width: 100%; top: 0; transform: translate(16%, -70%); }
  .box02-02 { width: 120%; }
  .box02-02 i { flex: 0 0 50%; }
  .story-box03 { width: 92%; }
  .story-box03 p { width: 100%; }
  .box03-01 { left: 0; top: auto; bottom: 0; transform: translate(-16%, 80%); }
  .box03-02 { left: auto; right: 0; width: 64%; transform: translate(0, -120%); }
  .box03-03 { left: auto; right: 0; transform: translate(0, 150%); }
  .storyFin { padding: 16vw 0 0; }
  .storyFin h3 img { height: 8vw; }
  .message-box { width: 100%; padding: 2rem 0; margin: 0; }
  .message-box h2 { font-size: clamp(1.2em, 5.6vw, 2.5em); padding: 0 4vw 1em; }
  .message-box dl { display: flex; flex-wrap: wrap; align-items: flex-end; }
  .message-box dt { flex: 0 0 50%; order: 1; padding-right: 1em; }
  .message-box dt img { position: static; transform: scale(1); }
  .message-box dd { display: contents; }
  .message-box dd p { order: 3; padding: 8px 0; line-height: 2; max-width: 80%; margin: auto; }
  .message-box dd h4 { order: 2; font-size: 0.85em; }
  .program { padding: 8vw; }
  .program ul { display: flex; flex-wrap: wrap; flex-direction: column; justify-content: space-between; padding-top: 2rem; }
  .program li.program-text { flex: 0 0 auto; order: 2; display: flex; align-items: center; margin-top: 1rem; }
  .program li.program-text strong { display: block; flex: 0 0 5em; white-space: nowrap; color: #009474; }
  .program li.program-text p { padding-left: 8px; border-left: 1px solid #009474; }
  .program li.program-text span { padding-bottom: 0; }
  .program li.program-text2 strong, .program li.program-text4 strong { color: #6eb36c; }
  .program li.program-text2 p, .program li.program-text4 p { border-left-color: #6eb36c; }
  .program li.program-img { order: 1; flex: 0 0 100%; margin: auto; padding: 0; }
  .program-btn { width: auto; padding: 3rem 0 1rem; }
  .page-kango .box01-03 { right: auto; left: -9%; }
  .page-kango .story02 { padding-bottom: 10%; }
  .page-kango .box02-01 { top: 100%; transform: translate(10%, -10%); }
  .page-kango .box02-02 { top: 0; transform: translate(0, -72%); flex-direction: row-reverse; align-items: flex-end; gap: 0; justify-content: space-between; width: 109%; }
  .page-kango .box02-02 i { flex: 0 0 52%; }
  .page-kango .box02-02 i:first-child { flex: 0 0 33%; padding: 0 0 20%; }
  .page-kango .story03 { padding-top: 88vw; padding-bottom: 48vw; }
  .page-kango .story-box03 p { width: 54%; }
  .page-kango .box03-01 { top: 30%; transform: translate(-18%, 0); }
  .page-kango .box03-02 { left: -10%; right: auto; }
  .page-riha .story-box01 { margin-top: 30%; }
  .page-riha .story-box01 p { width: 50%; margin-left: 0; }
  .page-riha .box01-01 { left: auto; right: 0; top: 32%; transform: translate(0, 0); }
  .page-riha .box01-01 img, .page-riha .box01-01 img:nth-child(even) { transform: translateX(0); }
  .page-riha .box01-02 { right: auto; left: 0; bottom: 100%; transform: translate(-24%, 32%); }
  .page-riha .story02 { padding-top: 48%; }
  .page-riha .box02-01 { top: 0; }
  .page-riha .box02-02 { top: 100%; width: 120%; justify-content: flex-end; transform: translate(-8%, 10%); }
  .page-riha .story03 { padding-top: 40vw; padding-bottom: 40vw; }
  .page-riha .box03-01 { top: 54%; }
  .page-riha .box03-03 { width: 58%; left: auto; right: 0; transform: translate(0, -80%); }
  .page-riha .box03-02 { left: -8%; top: -8%; } }
@media (max-width: 480px) { .kv { padding-bottom: 14vw; }
  .kv li.kv4 .kv-txt { bottom: -3em; }
  .story01 { padding-bottom: 164vw; }
  .box01-01 { width: 46%; transform: translate(-8vw, -50%); }
  .story-box p { line-height: 2; }
  .box01-02 { width: 72%; transform: translate(0%, 70%); }
  .box01-03 { width: 72%; }
  .story-box02 .story-box-body { padding-bottom: 8vw; }
  .box02-02 { transform: translate(0, 25%); }
  .story03 { padding-bottom: 80vw; }
  .box03-01 { width: 90%; transform: translate(-8vw, 72%); }
  .program { padding: 8vw 4vw; }
  .program-btn { font-size: 0.9em; }
  .program h3 { font-size: 1.15em; }
  .program h3 b { font-size: 1.8em; }
  .page-yakugaku .story03 { padding-top: 96vw; }
  .page-yakugaku .story-box03 .story-box-body { padding-top: 2rem; }
  .page-kango .story01 { padding-bottom: 108vw; }
  .page-kango .box02-02 i:first-child { padding-bottom: 24px; }
  .page-kango .story-box03 .story-box-body { padding-top: 2rem; padding-bottom: 2rem; }
  .page-kango .box03-01 { top: 24%; }
  .page-riha .story01 { padding-bottom: 24%; }
  .page-riha .story-box01 { padding-top: 3rem; }
  .page-riha .story-box01 .story-box-body { padding-bottom: 4vw; }
  .page-riha .box01-01 { top: 42vw; }
  .page-riha .box03-02 { width: 33%; top: -2%; }
  .page-riha .box03-03 { top: 8%; } }

/*# sourceMappingURL=page.css.map */