/* =============================================
       ROOT & TOKENS
    ============================================= */
:root {
   /* Colors */
   --color-bg: #ffffff;
   --color-bg-light1: #f4f3f0;
   --color-bg-light2: #fcf4ea;
   --color-main1: #fcf6ee;
   --color-main2: #a4cda4;
   --color-orange:#f4c56d;
   --color-accent: #8ca38f;
   --color-green-dark: #5d9b90;
   --color-category: #a2dfd6;
   --color-text: #272727;
   --color-border: #e2e0dc;

   /* Font sizes — fluid with clamp */
   --fs-xl: clamp(2rem, 3.5vw, 2.7rem);
   --fs-l: clamp(1.6rem, 3vw, 2.4rem);
   --fs-m: clamp(1.05rem, 2vw, 1.2rem);
   --fs-s: clamp(0.875rem, 1.5vw, 1rem);
   --fs-xs: clamp(0.75rem, 1.2vw, 0.875rem);

   /* Spacing */
   --spacer-l: clamp(5rem, 10vw, 9rem);
   --spacer-m: clamp(2.5rem, 5vw, 4.5rem);
   --spacer-s: clamp(1rem, 2.5vw, 1.75rem);

   /* Misc */
   --radius: 2rem;
   --transition: 0.4s ease;
}

/* =============================================
       RESET & BASE
    ============================================= */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html {
   scroll-behavior: smooth;
}

body {
   font-family: 'Noto Sans JP', serif;
   font-weight: 400;
   font-size: var(--fs-s);
   color: var(--color-text);
   background: var(--color-bg);
   line-height: 1.9;
   overflow-x: hidden;
   letter-spacing: 0.12em;
   background:  var(--color-bg);
}

img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

a {
   color: inherit;
   text-decoration: none;
}

ul {
   list-style: none;
}

h1,
h2,
h3,
h4 {
   font-weight: 300;
   line-height: 1.45;
}
li{
    list-style: none;
}
button{
    background-color: none;
}
img {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
/* =============================================
       UTILITY
    ============================================= */
.u-visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
}

.u-text-center {
   text-align: center;
}
.visually-hidden{
    visibility: hidden;
}
ruby rt {
  font-size: 0.6em;
  vertical-align: super;
}
br.pc_none{
  display: none;
}

@media (max-width: 768px) {
br.pc_none{
  display: block
}
br.sp_none{
   display: none;
}
}

.open-newtab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.open-newtab::after {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* =============================================
       HEADER / NAV
============================================= */
header img{
	max-width:230px
}
.header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 100;
   padding: 1.25rem 2rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   transition: background var(--transition), box-shadow var(--transition), padding var(--transition);

}

.header--scrolled {
   padding: .5rem 1rem;
   background: rgba(255, 255, 255, 0.3);
   backdrop-filter: blur(10px);
   box-shadow: 0 1px 0 var(--color-border);
}
.header.nav-is-open {
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  padding: 1.25rem 2rem; /* 開いた瞬間に元のpaddingに戻す */
}
.header__logo {
   font-family: 'Cormorant Garamond', serif;
   font-size: 1.4rem;
   font-weight: 400;
   letter-spacing: 0.12em;
   color: var(--color-green-dark);
}

.nav__list {
   display: flex;
   gap: 2rem;
   align-items: center;
}

.nav__item a {
   font-size: var(--fs-xs);
   letter-spacing: 0.08em;
   color: var(--color-text);
   transition: color var(--transition);
   position: relative;
   z-index: 0;
}

.nav__item a::after {
   content: '';
   position: absolute;
   width: 70px;
   height: 70px;
   border-radius: 50%;
   background: radial-gradient(circle, orange 0%, transparent 70%);
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) scale(0.5);
   opacity: 0;
   pointer-events: none;
   z-index: -1;
   transition: opacity 0.35s ease, transform 0.35s ease;
}

.nav__item a:hover::after {
   opacity: 0.42;
   transform: translate(-50%, -50%) scale(1);
}

.nav__item:last-child a:hover::after {
   opacity: 0;
}

.nav__cta {
   background: var(--color-green-dark);
   color: #fff !important;
   padding: 0.55rem 1.4rem;
   border-radius: 2rem;
   font-size: var(--fs-xs) !important;
   transition: background var(--transition) !important;
}

.nav__cta:hover {
   background: var(--color-accent) !important;
}

/* Hamburger */
.nav__toggle {
   display: none;
   background: none;
   border: none;
   cursor: pointer;
   width: 28px;
   height: 20px;
   flex-direction: column;
   justify-content: space-between;
   padding: 0;
   z-index: 100;
}

.nav__toggle span {
   display: block;
   width: 100%;
   height: 1.5px;
   background: var(--color-text);
   transition: var(--transition);
}

.nav__toggle.is-open span:nth-child(1) {
   transform: translateY(9.25px) rotate(45deg);
}

.nav__toggle.is-open span:nth-child(2) {
   opacity: 0;
}

.nav__toggle.is-open span:nth-child(3) {
   transform: translateY(-9.25px) rotate(-45deg);
}
.nav__item a {
  display: inline-block;
  text-align: center;
}

.nav__item a::before {
  content: attr(data-en);
  display: block;
  font-size: 0.6em;
  letter-spacing: 0.3em;
  color: #8ca38f;
  line-height: 0.5;
}
@media (max-width: 768px) {
 .header {
   padding: .5rem 1rem;
}
   .nav__toggle {
      display: flex;
      position: relative;
      z-index: 101;
   }

   .nav__list {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 1);
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 2.5rem;
      z-index: 99;
   }

   .nav__list.is-open {
      display: flex;
   }

   .nav__item a {
      font-size: 1.1rem;
   }

   /* stagger */
   .nav__list .nav__item {
      opacity: 0;
      transform: translateY(14px);
      animation: none;
   }

   .nav__list.is-open .nav__item {
      animation: navItemIn 0.4s ease forwards;
   }

   .nav__list.is-open .nav__item:nth-child(1) {
      animation-delay: 0.04s;
   }

   .nav__list.is-open .nav__item:nth-child(2) {
      animation-delay: 0.10s;
   }

   .nav__list.is-open .nav__item:nth-child(3) {
      animation-delay: 0.16s;
   }

   .nav__list.is-open .nav__item:nth-child(4) {
      animation-delay: 0.22s;
   }

   .nav__list.is-open .nav__item:nth-child(5) {
      animation-delay: 0.28s;
   }

   .nav__list.is-open .nav__item:nth-child(6) {
      animation-delay: 0.34s;
   }
   
.nav__item a::before {
  line-height: 0.9;
}

   @keyframes navItemIn {
      to {
         opacity: 1;
         transform: translateY(0);
      }
   }
}

/* =============================================
       SECTION WRAPPER
    ============================================= */
.section {
   padding-block: var(--spacer-l);
}

.section__inner {
   max-width: 1160px;
   margin-inline: auto;
   padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.section__heading-wrapper {
   margin-bottom: var(--spacer-m);
}

.section__heading {
   color: #a4cea5;
   letter-spacing: 0.06em;
   font-size: var(--fs-s);
   font-weight: 600;
}

.section__heading-en {
   display: inline-block;
   font-size: var(--fs-l);
   letter-spacing: 0.1em;
   margin-bottom: 0.4rem;
   font-weight: 700;
   background-image: linear-gradient(90deg,
         var(--color-main2) 0%,
         rgba(255, 192, 105, 0.9) 50%,
         var(--color-main2) 100%);
   background-size: 200% 100%;
   background-position: 100% 0;
   background-clip: text;
   -webkit-background-clip: text;
   color: transparent;
   -webkit-text-fill-color: transparent;
}

.section__heading-en.is-lit {
   animation: lightSweep 1.4s ease forwards;
}

@keyframes lightSweep {
   from {
      background-position: 100% 0;
   }

   to {
      background-position: 0% 0;
   }
}

/* =============================================
       BTN
    ============================================= */
.btn {
   display: inline-flex;
   align-items: center;
   gap: 0.6rem;
   font-size: var(--fs-xs);
   letter-spacing: 0.1em;
   padding: 0.85rem 2.2rem;
   border-radius: 2rem;
   cursor: pointer;
   transition: var(--transition);
   border: 1.5px solid transparent;
}

.btn--primary {
   background: none;
   color: #fff;
   border-color: #fff;
}

.btn--primary:hover {
   background: #fff;
   color: var(--color-green-dark);
}

.btn--outline {
   background: transparent;
   color: var(--color-green-dark);
   border-color: var(--color-green-dark);
}

.btn--outline:hover {
   background: var(--color-green-dark);
   color: #fff;
}

.btn--green {
   
   background: var(--color-green-dark);
   color: #fff;
}

.btn--green:hover {
   background: transparent;
   color: var(--color-green-dark);
   border-color: var(--color-green-dark);
}


.btn__arrow {
   font-style: normal;
   transition: transform var(--transition);
}

.btn:hover .btn__arrow {
   transform: translateX(4px);
}

/* =============================================
       CTA  (Section 7)
============================================= */
.cta-section {
   background: var(--color-bg-light2);
   border-top-left-radius: 100px;
   border-top-right-radius: 100px;
   background-image: url(../img/mv.webp);
   background-size: cover;
   position: relative;
   overflow: hidden;
   background-position: center;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;   
   background: linear-gradient(120deg,
         #fdc264,
         #a0e9d2,
         #fdc264,
         #a0e9d2);

  background: linear-gradient(120deg,
    #fdc264,
    #a0e9d2,
    #fdc264,
    #a0e9d2);
    opacity: 0.8;

  background-size: 400% 400%; /* ←必須 */
  animation: gradientShift 50s ease infinite;
animation: gradientShift 50s ease infinite;
}
@keyframes gradientShift {
   0% {
      background-position: 0% 50%;
   }

   50% {
      background-position: 100% 50%;
   }

   100% {
      background-position: 0% 50%;
   }
}

.cta-section__inner {
   max-width: 800px;
   margin-inline: auto;
   padding-inline: clamp(1.25rem, 4vw, 3rem);
   text-align: center;
}

.cta-section__title {
   font-size: var(--fs-l);
   line-height: 1.6;
   margin-bottom: var(--spacer-s);
   letter-spacing: 0.06em;
   color: #fff;
   text-shadow: 0 0 20px #635e4e;
}

.cta-section__text {
   font-size: var(--fs-s);
   color: #fff;
   line-height: 2;
   margin-bottom: var(--spacer-m);
   text-shadow: 0 0 20px #c4b170;
}



@media (max-width: 768px) {
   .cta-section {
      border-top-left-radius: 50px;
      border-top-right-radius: 50px;
   }
}

/* =============================================
       FOOTER
    ============================================= */
.footer {
   background:#f4f3f0;
}

.footer__main {
   max-width: 1160px;
   margin-inline: auto;
   padding: var(--spacer-m) clamp(1.25rem, 4vw, 3rem);
   display: flex;
   justify-content: space-between;
   gap: var(--spacer-m);
   flex-wrap: wrap;
}

.footer__brand {
   max-width: 280px;
}

.footer__logo {
    max-width: 280px;
    margin: 20px auto 20px;
}

.footer__catchcopy {
   font-size: var(--fs-xs);
   line-height: 1.8;
}

.footer__nav-list {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 0.8rem;
}

.footer__nav-link {
   letter-spacing: 0.08em;
   transition: color var(--transition);
}

.footer__nav-link:hover {
   color: var(--color-category);
}

.footer__bottom {
   max-width: 1160px;
   margin-inline: auto;
   padding: 1.25rem clamp(1.25rem, 4vw, 3rem);
   border-top: 1px solid rgba(96, 96, 96, 0.12);
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: 1.5rem;
   flex-wrap: wrap;
}

.footer__policy {
   font-size: 12px;
   transition: color var(--transition);
}

.footer__policy:hover {
   color: var(--color-category);
}

.footer__copy {
   font-family: 'Cormorant Garamond', serif;
   font-size: var(--fs-xs);
   letter-spacing: 0.06em;
}

.footer__sns {
  display: flex;
  gap: 15px;
  justify-content:flex-start;
  align-items: center;
	margin-top:20px
}

.sns-link {
  width: 40px;
  height: 40px;
  display: inline-block;
  background-size: 25px 25px;
  background-repeat: no-repeat;
  background-position: center;
  transition: opacity 0.2s ease;
  background-repeat: no-repeat;
  background-position: center;
	border-radius:50px;
	border:solid #272727 1px
}
.sns-link:hover {
  opacity: 0.6;
}

.sns-link--note {
  background-image: url("../img/icon-note.svg");
}
.sns-link--instagram {
  background-image: url("../img/icon-instagram.svg?02");
}
.sns-link--line{
background-image: url("../img/icon-line.svg");
}
@media (max-width: 600px) {
   .footer__main {
      flex-direction: column-reverse;
   }

   .footer__nav-list {
      text-align: center;
   }

   .footer__bottom {
      justify-content: center;
      flex-direction: column;
      gap: 0.5rem;
   }

   .footer__brand {
      max-width: 100%;
      text-align: center;
   }
.footer__sns {
    justify-content: center;
}
}

/* =============================================
       INTERSECTION OBSERVER ANIMATIONS
    ============================================= */
.js-reveal {
   opacity: 0;
   transform: translateY(28px) scale(0.95);
   transition: opacity 0.75s ease, transform 0.75s ease;
}

.js-reveal.is-visible {
   opacity: 1;
   transform: translateY(0) scale(1);
}

.js-reveal--delay-1 {
   transition-delay: 0.1s;
}

.js-reveal--delay-2 {
   transition-delay: 0.2s;
}

.js-reveal--delay-3 {
   transition-delay: 0.3s;
}

.js-reveal--delay-4 {
   transition-delay: 0.4s;
}

.js-reveal--delay-5 {
   transition-delay: 0.5s;
}

/* =============================================
       PLACEHOLDER IMAGES (replace with real imgs)
    ============================================= */
.placeholder {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'Cormorant Garamond', serif;
   font-style: italic;
   font-size: 0.85rem;
   letter-spacing: 0.1em;
   color: var(--color-accent);
   opacity: 0.5;
}
 /* =============================================
       HERO
 ============================================= */
.hero {
      max-width: 1160px;
   margin-inline: auto;
   margin-bottom: var(--spacer-s);
   padding: 0 20px;
    }

    .hero__content {
      position: relative;
      z-index: 1;
    }
    .hero__label {
      display: block;
      font-size: 6vw;
      color: var(--color-accent);
      font-weight: 700;
      line-height: 1;
      margin-bottom: var(--spacer-s);
    }
    .hero__title {
      font-size: var(--fs-m);
      letter-spacing: 0.08em;
      margin-bottom: var(--spacer-s);
      font-weight: bold;
    }
    .hero__desc {
      font-size: var(--fs-s);
      color: var(--color-text-light);
      line-height: 2;
    }
    
.breadcrumb__inner {
   max-width: 1160px;
   margin-inline: auto;
   margin-bottom: var(--spacer-s);
}
.breadcrumb {
  font-size: 14px;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
}

/* 区切り（＞）を疑似要素で描画 */
.breadcrumb__item + .breadcrumb__item::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 8px;
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  transform: rotate(45deg);
}

/* リンク */
.breadcrumb__link {
  text-decoration: none;
  color: #333;
}

/* 現在地 */
.breadcrumb__current {
  color: #999;
}
 @media (max-width: 768px) {

.hero {
   padding: 30px 20px;
    }
    .hero__label {
      font-size: 13vw;
    }
      
    }
/*****************/
.news__list {
   border-top: 1px solid var(--color-border);
}

.news__item {
   border-bottom: 1px solid var(--color-border);
}

.news__link {
   display: flex;
   align-items: baseline;
   gap: 1.5rem;
   padding: 1.1rem 0.25rem;
   transition: color var(--transition);
}

.news__link:hover {
   color: var(--color-green-dark);
   cursor: pointer;
}

.news__date {
   font-family: 'Cormorant Garamond', serif;
   font-size: var(--fs-xs);
   letter-spacing: 0.08em;
   color: var(--color-text);
   white-space: nowrap;
   flex-shrink: 0;
}

.news__title {
   font-size: var(--fs-s);
   letter-spacing: 0.03em;
   flex: 1;
}

.news__arrow {
   color: var(--color-accent);
   margin-left: auto;
   flex-shrink: 0;
   transition: transform var(--transition);
   border: var(--color-green-dark) 1px solid;
   padding: 5px 8px;
   border-radius: 50px;
   min-width: 50px;
   text-align: center;
   font-size: 13px;
   line-height: 1;color: var(--color-green-dark)
}
.news__body a{
	border-bottom: solid #333 1px;
}
.news__link:hover .news__arrow {
   transform: scale(0.9);
}
@media (max-width: 768px) {

   .news__link {
      flex-direction: column;
      gap: .5rem;
   }

   .news__list {
      border-top: 1px solid var(--color-border);
      margin-right: 0%;
   }
}


/***/
/* ＋アイコン：既存の .news__arrow を調整 */
.news__arrow {
  color: var(--color-accent);
  margin-left: auto;
  flex-shrink: 0;
  border: var(--color-green-dark) 1px solid;
  border-radius: 50px;
  min-width: 50px;
  width: 50px;
  height: 28px; /* 高さを固定してバーを中央揃えしやすく */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform var(--transition);
}
@media (max-width: 768px) {
	.news__arrow {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
}

.news__link:hover .news__arrow {
  transform: scale(0.9);
}

/* ＋を構成するバー2本 */
.news__arrow-bar {
  position: absolute;
  background-color: var(--color-green-dark);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

/* 横バー */
.news__arrow-bar:nth-child(1) {
  width: 12px;
  height: 1.5px;
}

.news__arrow-bar:nth-child(2) {
  width: 1.5px;
  height: 12px;
}

.news__link[aria-expanded="true"] .news__arrow-bar:nth-child(2) {
   background-color: #fff;
  transform: rotate(90deg);
}
.news__body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease, padding 0.35s ease;
  padding: 0 0.25rem;
}

.news__body.is-open {
  max-height: 600px;
  padding: 0.75rem 0.25rem 1rem;
}


.news__body-text {
  font-size: var(--fs-s);
  line-height: 1.8;
  color: var(--color-text);
}

.news__link[aria-expanded="true"] .news__arrow{
   background-color: var(--color-accent);
}
.news__link[aria-expanded="true"]
{
  color: var(--color-green-dark);

}


/******/

.policy__table{
   background-color:#f1f1f1;
    padding-top: 150px;
}
@media (max-width: 768px) {
.policy__table{
    padding-top: 80px;
 }
}
.policy dl {
  display: flex;
  gap: 1.5rem;
  border-bottom:solid #a1a1a1 1px;
  padding: 1.5rem 0;
}
.policy dl:last-child{
  border-bottom:none}
.policy dt {
  flex-shrink: 0;
  width: 30%;
  color: var(--color-text-secondary);
  font-weight: 600;
}
.policy dd {
  margin: 0;
  flex: 1;
}

@media (max-width: 768px) {
.policy dl {
  gap: 0;
  flex-direction: column;
}
.policy dt {
  width: 100%;
}
}
/**********/
.session-card__category {
    display: inline-block;
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    background: var(--color-orange);
    color: #fff;
    padding: 0.25rem 0.85rem;
    border-radius: .4rem;
    margin-bottom: 0.5rem;
}
.category-workshop {
  background-color: #A2DFD6
}

.category-taiken {
  background-color: #8CA390;
}

.category-fixed {
  background-color: #D0C0F5;
}