:root {
  --font-serif-ja: var(--font-ja);
  --font-body-ja:  var(--font-ja);
}

/* ===== Loading ===== */
#page-loader {
  position: fixed; inset: 0;
  background: #c8973a;
  z-index: 9999;
  overflow: hidden;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  transition: opacity .7s ease, visibility .7s ease;
}
#page-loader.hidden {
  opacity: 0; visibility: hidden; pointer-events: none;
}
#loader-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.loader-brand {
  font-family: var(--font-en);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  letter-spacing: .1em; font-weight: 400;
  color: #f5ede0;
  position: relative; z-index: 1;
  transition: color .4s ease;
  line-height: 1;
}
#loader-percent {
  font-family: var(--font-en);
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  letter-spacing: .06em; font-weight: 400;
  color: #f5ede0;
  position: relative; z-index: 1;
  transition: color .4s ease;
  line-height: 1;
}

/* ===== HERO ===== */
.hero {
  position: relative;
  min-height: 132vh;
  display: flex; flex-direction: column;
}
.hero-img {
  position: absolute; inset: 0;
  overflow: hidden; z-index: 1;
  
}
.hero-img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
  display: block;
  filter: blur(12px);
  transition: filter 2s ease;
}
.hero-img img.loaded {
  filter: blur(0);
}
.hero-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(245, 237, 224, 0)     0%,
    rgba(245, 237, 224, 0)    40%,
    rgba(40,  10,   0,  .08)  60%,
    rgba(40,  10,   0,  .14)  72%,
    rgba(245, 237, 224, .20)  80%,
    rgba(245, 237, 224,.45)   84%,
    rgba(245, 237, 224, .60)  88%,
    rgba(245, 237, 224, .78)  92%,
    rgba(245, 237, 224, 1)   100%
  );
}

.hero-img::before {
  content: ''; position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(160,120,70,.02) 2px,
      rgba(160,120,70,.02) 4px
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(to bottom, transparent 40%, black 90%);
  mask-image: linear-gradient(to bottom, transparent 40%, black 90%);
  mix-blend-mode: multiply;
}

/* 天気ウィジェット */
.hero-weather {
  position: relative; z-index: 200;
  background: rgba(253, 250, 246, .96); backdrop-filter: blur(4px);
  border: 1.5px solid;
  border-radius: 22px 22px 22px 0;
  padding: 16px 18px;
  margin: 20vh 0 0 8vw;
  width: 160px;
  font-size: 0.75rem; color: var(--text-light); line-height: 1.5;
}
.hero-weather .weather-date {
  font-family: var(--font-en); font-size: 1rem;
  color: var(--gold); letter-spacing: .06em; margin-bottom: 6px;
}
.hero-weather .temp {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-family: var(--font-en); font-weight: 400;
  color: var(--text); line-height: 1.1; margin-bottom: 4px;
}
.hero-weather .weather-label {
  font-family: var(--font-serif-ja); font-size: 1rem;
  color: var(--text); margin-bottom: clamp(16px, 3vw, 28px);
}
.hero-weather .weather-city {
  display: block; text-align: left;
  font-family: var(--font-serif-ja); font-size: 1rem; font-weight: 500;
  color: var(--text);
}


@media (max-width: 900px) {
  .hero-weather {
    width: 138px;
    padding: 14px 16px;
    margin: 20vh 0 0 6vw;
  }
  .hero-weather .weather-date { font-size: .88rem; }
  .hero-weather .weather-label,
  .hero-weather .weather-city  { font-size: .88rem; }
}
@media (max-width: 700px) {
  .hero-weather {
    width: 114px;
    padding: 10px 13px;
    margin: 18vh 0 0 10vw;
    border-radius: 16px 16px 16px 0;
  }
  .hero-weather .weather-date  { font-size: .72rem; margin-bottom: 4px; }
  .hero-weather .temp          { font-size: 1.35rem; margin-bottom: 2px; }
  .hero-weather .weather-label { font-size: .72rem; margin-bottom: clamp(10px, 2.5vw, 18px); }
  .hero-weather .weather-city  { font-size: .72rem; }
}

.hero-copy {
  position: absolute; z-index: 200;
  bottom: 45vh;
  left: 0; right: 0;
  color: var(--white); text-align: right;
  padding-right: clamp(24px, 5vw, 80px);
}
.hero-copy h1 {
  font-family: var(--font-serif-ja); font-size: 1.9rem;
  font-weight: 500; line-height: 1.4; letter-spacing: .06em;
  text-shadow: none; text-align: right;
}
.hero-copy .en {
  font-family: var(--font-en); font-style: normal;
  font-size: 1.6rem; font-weight: 300;
  margin-top: 6px; opacity: .92;
  text-shadow: none; text-align: right;
  margin-right: 0.8em;
}

/* ===== INTRO ===== */
.intro {
  position: relative; z-index: 1;
  max-width: 760px; margin: -2px auto 0;
  padding: clamp(32px, 6vw, 80px) clamp(20px, 5vw, 40px) clamp(40px, 7vw, 80px);
  text-align: center;
}
.intro p {
  font-family: var(--font-serif-ja);
  font-size: clamp(.85rem, 1.8vw, 1rem);
  color: var(--text); font-weight: 500; line-height: 2.1;
  margin-bottom: 1.1em;
}

/* ===== IMAGE RAIL ===== */
.image-rail {
  width: 100%;
  height: clamp(110px, 20vw, 240px);
  margin: 5vw auto;
  overflow: hidden;
  position: relative; z-index: 100;
  contain: strict; 
}
.rail-track {
  display: flex; height: 100%;
  gap: 6px;
  will-change: transform;
  backface-visibility: hidden;
}
.rail-item {
  height: 100%; flex-shrink: 0;
  aspect-ratio: 4/3; overflow: hidden;
  border-radius: 10px;
  contain: layout paint;
}
.rail-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== INTERESTS ===== */
.interests {
  max-width: 1100px; margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px) clamp(60px, 10vw, 120px);
}

.interest-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 60px);
  align-items: center;
  margin-bottom: clamp(40px, 7vw, 80px);
}
.interest-card.reverse       { direction: rtl; }
.interest-card.reverse > *   { direction: ltr; }

.card-img-stack {
  position: relative;
  padding-top: calc(74% * 0.75 + 14%);
  opacity: 0;
  will-change: opacity;
  contain: layout;
  z-index: 5;
}
.card-img-stack .img-back,
.card-img-stack .img-front {
  position: absolute;
  width: 74%; aspect-ratio: 4/3;
  overflow: hidden; border-radius: 2px;
  border: solid 8px rgb(244, 241, 232);
  will-change: transform, opacity;
  backface-visibility: hidden; 
}
.card-img-stack .img-back {
  top: 12%; left: 16%; z-index: 0;
  box-shadow: 4px 4px 0px #84744a79;
}
.card-img-stack .img-front {
  top: 0; left: 6%; z-index: 1;
  box-shadow: 4px 4px 0px #84744a79;
}
.card-img-stack .img-front img,
.card-img-stack .img-back  img { width: 100%; height: 100%; object-fit: cover; display: block; }

.interest-card:nth-child(1) .img-front { transform: rotate(-3.2deg); }
.interest-card:nth-child(1) .img-back  { transform: rotate( 4.5deg); }
.interest-card:nth-child(2) .img-front { transform: rotate( 2.8deg); }
.interest-card:nth-child(2) .img-back  { transform: rotate(-5.1deg); }
.interest-card:nth-child(3) .img-front { transform: rotate(-1.6deg); }
.interest-card:nth-child(3) .img-back  { transform: rotate( 3.8deg); }

.card-body { padding: clamp(12px, 2.5vw, 32px); position: relative; z-index: 3; }
.card-body .tag {
  display: inline-block;
  font-family: var(--font-serif-ja); font-size: clamp(.8rem, 1.5vw, .95rem);
  font-weight: 500; border: solid 1px;
  border-radius: 5px 5px 5px 0;
  background-color: white;
  padding: 6px 18px; margin-bottom: 18px; letter-spacing: .08em;
}
.card-body p { font-size: clamp(.8rem, 1.5vw, .9rem); text-align: justify; font-weight: 500; line-height: 2; }

/* ===== RESEARCH LINK ===== */
.research-link {
  text-align: center;
  padding: 0 0 clamp(40px, 8vw, 100px);
  margin-top: -8vw;
}
.research-link a {
  display: inline-block; position: relative;
  font-family: var(--font-serif-ja); font-size: .9rem; font-weight: 500;
  padding: 12px 40px; letter-spacing: .1em; text-decoration: none;
}
.research-link a svg {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 150px; height: auto;
  pointer-events: none; overflow: visible;
}

@media (hover: hover) and (pointer: fine) {
  .research-link a:hover .oval-btn,
  .news-more a:hover .oval-btn { stroke-dashoffset: 0 !important; }
}
@media (max-width: 700px) {
  .image-rail{margin-bottom:  16vw;}
  .interest-card {
    margin-top: 16vw;
  }}
@media (max-width: 600px) {
  .research-link {
    margin-top: -12vw;
  }
  .news-more a{
    margin-top: 6vw;
  }
}


/* ===== NEWS ===== */
.news-section { padding: clamp(40px, 7vw, 80px) clamp(16px, 4vw, 48px); }
.news-list    { max-width: 760px; margin: 0 auto; }
.news-more    { text-align: center; margin-top: clamp(24px, 4vw, 40px); }
.news-more a {
  display: inline-block; position: relative;
  font-family: var(--font-serif-ja);
  font-size: .85rem; font-weight: 500; letter-spacing: .1em;
  padding: 10px 36px; text-decoration: none;
}
.news-more a svg {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 150px; height: auto;
  pointer-events: none; overflow: visible;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
  .image-rail { height: 25vw; }
  .interests {
    padding: 0 15vw clamp(60px, 10vw, 120px);
  }
  .interest-card {
    grid-template-columns: 1fr;
    margin-bottom: clamp(30px, 8vw, 70px);
  }
  .interest-card.reverse { direction: ltr; }
}
@media (min-width: 700px) and (max-width: 1100px) {
  .card-img-stack {
    position: relative; display: flex;
    flex-direction: row; align-items: flex-start; justify-content: center;
    margin-left: -10%; padding-top: 8px; padding-bottom: 24px;
    overflow: visible;
  }
  .card-img-stack .img-back,
  .card-img-stack .img-front {
    position: relative; top: auto; left: auto;
    width: clamp(30%, 33vw, 55%); flex-shrink: 0;
    aspect-ratio: 4/3; overflow: hidden;
  }
  .card-img-stack .img-front {
    z-index: 2; margin-right: clamp(-18%, -6vw, -8%);
  }
  .card-img-stack .img-back {
    z-index: 1; margin-top: clamp(8px, 1.5vw, 20px);
  }
  .interest-card:nth-child(1) .img-front { transform: rotate(-3.2deg); }
  .interest-card:nth-child(1) .img-back  { transform: rotate( 4.5deg); }
  .interest-card:nth-child(2) .img-front { transform: rotate( 2.8deg); }
  .interest-card:nth-child(2) .img-back  { transform: rotate(-5.1deg); }
  .interest-card:nth-child(3) .img-front { transform: rotate(-1.6deg); }
  .interest-card:nth-child(3) .img-back  { transform: rotate( 3.8deg); }
}
@media (max-width: 699px) {
  .card-img-stack {
    position: relative; display: block;
    width: 100%; padding-top: calc(75% + 28px);
    padding-bottom: 0; padding-left: 0; padding-right: 0;
  }
  .card-img-stack .img-back {
    position: absolute; top: 18px; left: 6%; width: 88%;
    z-index: 0; box-shadow: 4px 4px 0px #84744a79;
  }
  .card-img-stack .img-front {
    position: absolute; top: 0; left: 0; width: 88%;
    z-index: 1; margin-right: 0;
    box-shadow: 4px 4px 0px #84744a79;
  }
  .interest-card:nth-child(1) .img-front { transform: rotate(-3.2deg); }
  .interest-card:nth-child(1) .img-back  { transform: rotate( 4.5deg); }
  .interest-card:nth-child(2) .img-front { transform: rotate( 2.8deg); }
  .interest-card:nth-child(2) .img-back  { transform: rotate(-5.1deg); }
  .interest-card:nth-child(3) .img-front { transform: rotate(-1.6deg); }
  .interest-card:nth-child(3) .img-back  { transform: rotate( 3.8deg); }
}


@media (max-width: 900px) {
  .intro, .interests, .section-title, .news-section {
    padding-left:  clamp(48px, 10vw, 80px);
    padding-right: clamp(48px, 10vw, 80px);
  }
}
@media (max-width: 600px) {
  .intro, .interests, .section-title, .news-section {
    padding-left:  clamp(52px, 13vw, 72px);
    padding-right: clamp(52px, 13vw, 72px);
  }
}
@media (max-width: 700px) {
  .hero { min-height: 125vh; }
  .hero-copy h1 { font-size: 1.15rem; }
  .hero-copy .en { font-size: 1rem; }
  .news-item { grid-template-columns: 1fr; gap: 4px; }
  .research-link a {font-size: .8rem;}
  .news-more a {font-size: .8rem;}
}

/* ===== ANIMATIONS ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-weather { animation: fadeUp .7s .1s both ease-out; }

/* hero-copy: 文字単位アニメーション */
.hero-copy .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp .5s both ease-out;
}
/* スペース保持用 */
.hero-copy .char-space { display: inline-block; }

/* ===== FADE-IN ON SCROLL ===== */
.fade-in         { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/*写真の投げ込みアニメーション*/
@keyframes throw-c1-back {
  0%   { opacity: 0; transform: translateX(-120px) rotate(-22deg) scale(.85); }
  100% { opacity: 1; transform: translateX(   0px) rotate(4.5deg) scale(1);   }
}
@keyframes throw-c1-front {
  0%   { opacity: 0; transform: translateX(-120px) rotate(-22deg)  scale(.85); }
  100% { opacity: 1; transform: translateX(   0px) rotate(-3.2deg) scale(1);   }
}
@keyframes throw-c2-back {
  0%   { opacity: 0; transform: translateX( 120px) rotate( 22deg)  scale(.85); }
  100% { opacity: 1; transform: translateX(   0px) rotate(-5.1deg) scale(1);   }
}
@keyframes throw-c2-front {
  0%   { opacity: 0; transform: translateX( 120px) rotate( 22deg) scale(.85); }
  100% { opacity: 1; transform: translateX(   0px) rotate(2.8deg) scale(1);   }
}
@keyframes throw-c3-back {
  0%   { opacity: 0; transform: translateX(-120px) rotate(-20deg) scale(.85); }
  100% { opacity: 1; transform: translateX(   0px) rotate(3.8deg) scale(1);   }
}
@keyframes throw-c3-front {
  0%   { opacity: 0; transform: translateX(-120px) rotate(-20deg)  scale(.85); }
  100% { opacity: 1; transform: translateX(   0px) rotate(-1.6deg) scale(1);   }
}
.interest-card:nth-child(1) .card-img-stack.is-visible .img-back  {
  animation: throw-c1-back  .7s cubic-bezier(.22, .68, 0, 1) .15s both;
}
.interest-card:nth-child(1) .card-img-stack.is-visible .img-front {
  animation: throw-c1-front .7s cubic-bezier(.22, .68, 0, 1) .40s both;
}
.interest-card:nth-child(2) .card-img-stack.is-visible .img-back  {
  animation: throw-c2-back  .7s cubic-bezier(.22, .68, 0, 1) .15s both;
}
.interest-card:nth-child(2) .card-img-stack.is-visible .img-front {
  animation: throw-c2-front .7s cubic-bezier(.22, .68, 0, 1) .40s both;
}
.interest-card:nth-child(3) .card-img-stack.is-visible .img-back  {
  animation: throw-c3-back  .7s cubic-bezier(.22, .68, 0, 1) .15s both;
}
.interest-card:nth-child(3) .card-img-stack.is-visible .img-front {
  animation: throw-c3-front .7s cubic-bezier(.22, .68, 0, 1) .40s both;
}
.card-img-stack.is-visible { opacity: 1; }


@media (min-width: 1480px) {
  .hero-copy h1 { font-size: 2.4rem; }
  .hero-copy .en { font-size: 2.0rem; }
}
@media (min-width: 1101px) {
  .interest-card:nth-child(1) .img-front { transition: transform .35s ease; }
  .interest-card:nth-child(1) .card-img-stack:hover .img-front { transform: rotate(-7deg); }
  .interest-card:nth-child(2) .img-front { transition: transform .35s ease; }
  .interest-card:nth-child(2) .card-img-stack:hover .img-front { transform: rotate(6.5deg); }
  .interest-card:nth-child(3) .img-front { transition: transform .35s ease; }
  .interest-card:nth-child(3) .card-img-stack:hover .img-front { transform: rotate(-5.5deg); }
}