html,
 body {
     position: fixed;
     inset: 0;
     overflow: hidden;
 }

 body {
     font-family: "Zen Kaku Gothic New", "Lato", "Hina Mincho", "Aboreto", system-ui, sans-serif;
     font-size: 16px;
     color: #4B452C;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }

 main {
     height: 100%;
 }

 /* ====== 背景 ====== */
 .bg {
     position: fixed;
     inset: 0;
     background: url(../image/back.png) center / cover no-repeat;
     z-index: -1;
 }

 /* ====== ヘッダー ====== */
 .header {
     position: fixed;
     top: 25px;
     left: 50px;
     width: auto;
     z-index: 3002;
 }

 .article {
     overflow-x: hidden;
     overflow-y: auto;
     scrollbar-width: none;
     -ms-overflow-style: none;
 }

 .article::-webkit-scrollbar {
     display: none;
 }

 .article__header img {
     width: 100%;
     height: auto;
     display: block;
 }

 /* ===== キャッチコピー ===== */
 .article__header {
     position: relative;
 }

 .article__fv {
     font-family: "Hina Mincho";
     text-align: center;
     margin: 30px 0;
 }

 .article__title {
     font-size: 25px;
     margin-bottom: 12px;
     color: #fff;
 }

 .article__text {
     font-size: 48px;
     color: #fff;
     margin-left: 120px;
 }

 /* ===== ロゴ ===== */
 /* デフォルト */


 .logo-open {
     display: none;
 }

 /* メニューOPEN時 */
 .sp-nav.is-open~header .logo-default {
     display: none;
 }

 .sp-nav.is-open~header .logo-open {
     display: block;
 }

 .fv__logo {
     display: block;
     display: inline-block;
     position: relative;
     z-index: 3003;
 }

 .logo__text {
     margin-top: -8px;
     color: #426F3B;
     font-size: 12px;
     font-family: "Hina Mincho";
 }

 /* ====== ナビ ====== */
 .nav__wrapper {
     position: fixed;
     top: 40px;
     left: 40px;
     z-index: 10;
 }

 .nav__list {
     margin-left: 60px;
     margin-top: 315px;
     display: flex;
     flex-direction: column;
     gap: 25px;
 }

 .fv__kage {
     position: fixed;
     top: 0;
     right: 0;
     z-index: 2;
     pointer-events: none;
 }

 .fv__kage img {
     width: 500px;
     height: auto;
     display: block;
 }

 /* ===== 右固定CTA ===== */
 .fv__cta {
     position: fixed;
     right: 60px;
     top: 60%;
     transform: translateY(-50%);
     display: flex;
     flex-direction: column;
     gap: 16px;
     z-index: 5;
 }

 /* ボタン共通 */
 .cta__btn {
     display: flex;
     align-items: center;
     width: 320px;
     padding: 20px 72px 20px 35px;
     background: #FDF6F6;
     border: 1px solid #889D73;
     border-radius: 10px;
     color: #889D73;
     text-decoration: none;
     line-height: 1.4;
     position: relative;
     display: flex;
     align-items: center;
 }


 .cta__btn::after {
     content: "";
     position: absolute;
     right: 24px;
     top: 50%;
     width: 10px;
     height: 10px;
     border-top: 1px solid #889D73;
     border-right: 1px solid #889D73;
     transform: translateY(-50%) rotate(45deg);
 }

 /* テキスト：残り幅をすべて使う */
 .cta__text {
     flex: 1;
     font-size: 15px;
 }

 /* アイコン：位置を完全固定 */
 .cta__icon {
     width: 40px;
     height: 35px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     margin-left: 12px;
 }

 /* アイコン画像 */
 .cta__icon img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     display: block;
 }


 /* ====== 中央スクロール ====== */
 .article {
     max-width: 540px;
     width: 100%;
     margin: 0 auto;
     padding-top: 125px;
     height: 100%;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
     position: relative;
     z-index: 1;
 }

 /* ====== コンテンツ ====== */
 .section {
     background-color: #FDF6F6;
     border-radius: 20px;
     min-height: 1000px;
     padding-top: 70px;
     position: relative;
     overflow: visible;
 }

 /* ===== セクションタイトル共通 ===== */
 .section-title {
     position: relative;
     text-align: center;
     margin: 70px 0 20px;

     /* デフォルト */
     --big-rotate: 0deg;
     --small-rotate: 0deg;

     --big-top: -40px;
     --big-left: 50%;
     --big-x: -120%;

     --small-top: 40px;
     --small-left: 50%;
     --small-x: -10%;
 }

 /* 日本語 */
 .section-title__ja {
     font-size: 14px;
     color: #4B452C;
     position: relative;
     z-index: 3;
 }

 /* 英字 */
 .section-title__en {
     font-family: "Aboreto", serif;
     font-size: 32px;
     color: #4B452C;
     position: relative;
     z-index: 3;
 }

 /* ===== 大きい丸 ===== */
 .section-title::before {
     content: "";
     position: absolute;
     top: var(--big-top);
     left: var(--big-left);
     transform:
         translateX(var(--big-x)) rotate(var(--big-rotate));
     width: 45px;
     height: 45px;
     border-radius: 50%;
     background: linear-gradient(180deg,
             rgba(136, 157, 115, 0.95) 0%,
             rgba(253, 246, 246, 0.9) 100%);
     z-index: 1;
 }

 /* ===== 小さい丸 ===== */
 .section-title::after {
     content: "";
     position: absolute;
     top: var(--small-top);
     left: var(--small-left);
     transform:
         translateX(var(--small-x)) rotate(var(--small-rotate));
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background: linear-gradient(180deg,
             rgba(136, 157, 115, 0.8) 0%,
             rgba(253, 246, 246, 0.85) 100%);
     z-index: 2;
 }

 /* ACCESS */
 #access {
     background: #FFF7F5;
     padding: 0 20px 100px;
 }

 .access__inner {
     max-width: 420px;
     margin: 0 auto;
 }

 .access__list {
     display: grid;
     grid-template-columns: 90px 1fr;
     row-gap: 16px;
     column-gap: 20px;
     font-size: 13px;
     line-height: 1.8;
 }

 .access__list dt {
     font-family: "Aboreto", system-ui;
     color: #889D73;
     margin-top: 10px;
 }

 .access__list dd {
     margin-top: 8px;
 }

 #access .arrow-link {
     margin: 14px 0 20px 110px;
 }


 .access__map iframe {
     width: 100%;
     height: 260px;
     border: 0;
 }

 .footer {
     position: relative;
     overflow: hidden;
     margin-bottom: 30px;
 }

 /* 背景画像 */
 .footer::before {
     content: "";
     position: absolute;
     inset: 0;
     background: url("../image/fback.png") center / cover no-repeat;
     z-index: 0;
 }

 /* 中身を前面へ */
 .footer>* {
     position: relative;
     z-index: 1;
 }

 .footer__cta {
     max-width: 320px;
     margin: 0 auto;
 }

 .footer .cta__btn {
     color: #889D73;
 }

 .footer .cta__btn+.cta__btn {
     margin-top: 14px;
 }

 .footer__logo {
     text-align: center;
     margin: 70px 0 40px;
 }

 .footer__logo img {
     margin-bottom: 12px;
     width: 100%;
 }

 .footer__logo p {
     color: #fff;
     font-size: 12px;
     font-family: "Hina Mincho";
 }

 .footer__nav {
     display: flex;
     justify-content: space-between;
     margin: 20px auto 50px;
     max-width: 320px;
     font-size: 14px;
     font-family: "Aboreto", serif;
 }

 .footer__nav a {
     color: #fff;
     text-decoration: none;
     line-height: 2.8;
 }

 .footer__copy {
     text-align: center;
     color: #fff;
     font-size: 9px;
     margin-bottom: 10px;
 }

 .arrow-link {
     position: relative;
     display: inline-flex;
     align-items: center;
     padding: 5px 48px 5px 20px;
     border: 1px solid #889D73;
     border-radius: 50px;
     color: #889D73;
     font-family: "Aboreto", system-ui;
     font-size: 13px;
     letter-spacing: .02em;
     text-decoration: none;
 }


 /* 横線 */
 .arrow-link::after {
     content: "";
     position: absolute;
     right: 14px;
     top: 50%;
     width: 14px;
     height: 1px;
     background-color: #889D73;
     transform: translateY(-50%);
 }

 /* 矢印先端（線の終点に直結） */
 .arrow-link::before {
     content: "";
     position: absolute;
     right: 14px;
     top: 50%;
     width: 6px;
     height: 6px;
     border-top: 1px solid #889D73;
     border-right: 1px solid #889D73;
     transform: translateY(-50%) rotate(45deg);
 }

 /* 初期 */
 .article__header img,
 .article__fv {
     opacity: 0;
     transform: scale(1);
     animation: fadeIn 1s ease forwards;
 }

 /* 飛びの遅延 */
 .article__fv {
     animation-delay: 0.8s;
 }

 /* アニメーション定義 */
 @keyframes fadeIn {
     to {
         opacity: 1;
     }
 }

 /* 初期状態 */
 .fade {
     opacity: 0;
     transition: opacity 1.5s ease;
 }

 /* 表示状態 */
 .fade.is-show {
     opacity: 1;
 }