@layer page {
  /* ===== Base ===== */
  section {position: relative; overflow-x: hidden}

  /* ===== Background footprints ===== */
  .bg__foot-right {background: url("/images/event/footprint_left.webp") center top/288px no-repeat; background-position: calc(50% + 600px) -50px}
  .bg__foot-left {background: url("/images/event/footprint_right.webp") center top/388px no-repeat; background-position: calc(50% - 600px) -80px}

  /* ===== Buttons (Form) ===== */
  .form__btn {
    width: 400px; height: 80px; 
    background: #FFEB03; border: none; color: #2AA346; 
    font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; 
    border-radius: 4px; box-shadow: 4px 4px 0 rgba(0,0,0,.1); transition: all 200ms cubic-bezier(.2,.8,.2,1); 
    margin: 0 auto;
  }
  .form__btn-soon {color: #fff; background-color: #ccc; cursor: default; pointer-events: none;}
  .form__btn-soon img {display: none;}
  .form__btn img {width: 56px;}
  .form__btn:hover {background: #FFC627}
  .form__btn svg {width: 20px; margin-right: 8px}
  @media (max-width: 768px) {
    .form__btn {width: 100%; font-size: 18px; height: 64px}
  }
  .form__btn--nav {
    width: auto; height: auto; font-size: 14px; padding: 2px 16px; 
    box-shadow: 2px 2px 0 rgba(0,0,0,.1); 
  }
  .form__btn--nav svg {width: 14px}
  @media (max-width: 960px) {
    .form__btn--nav {width: 100%; height: 64px; color: #2AA346!important; font-size: 16px}
  }
  .form__btn--sp {
    display: none; 
  }
  @media (max-width: 960px) {
    .form__btn--sp {
      width: 64px; height: 64px; background: #FFEB03; color: #2AA346; 
      position: absolute; top: 0; right: 64px; font-size: 12px; font-weight: 700; 
      display: flex; flex-direction: column; align-items: center; justify-content: center; 
    }
    .form__btn--sp svg {width: 18px}
  }
  .form__btn--eve {margin-bottom: 80px}

  /* ===== Header & Nav ===== */


  /* ===== Key Visual ===== */
  #keyvisual {
    height: 480px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: visible;
  }

  .key__pc_none {display: none;}
  .key__heading {
    font-size: 32px;
    font-weight: 700;
    color: #2AA346;
    line-height: 1.4;
    padding: 40px 0 10px;
    margin: 0;
  }
  .key__heading-sub {
    display: flex;
    align-items: flex-end;
    padding: 4px 16px;
    width: fit-content;
    background: #EEF8F0;
    border: 1px solid #2AA346;
    color: #2AA346;
    font-size: 18px;
    font-weight: 700;
    position: relative;
    margin-bottom: 8px;
  }
  .key__heading span.key__heading-sub::before {
    content: "";
    border: 5px solid transparent;
    border-top: 8px solid #2AA346;
    margin-left: -8px;
    top: 100%;
    left: 40px;
    position: absolute;
  }
  .key__heading span.key__heading-sub::after {
    content: ""; 
    border: 5px solid transparent; 
    border-top: 8px solid #EEF8F0; 
    margin-left: -8px; 
    margin-top: -2px; 
    top: 100%; 
    left: 40px; 
    position: absolute;
  }
  .key__text {
    font-size: 16px; 
    font-weight: 500;
    margin-bottom: 40px; 
    line-height: 1.4;
  }

  @media (max-width: 768px) {
    #keyvisual {background-position: right bottom; height: 480px;}
    .key__pc_none {display: block;}
    .key__heading {font-size: 20px; padding: 30px 0 10px;}
    .key__heading span.key__heading-sub {font-size: 16px;}
    .key__text {font-size: 14px;}
  }


  .key__info {
    background: #2AA346; 
    color: #fff; 
    padding: 30px; 
    width: fit-content; 
    position: relative; 
    border-radius: 4px; 
  }
  .key__info-location {
    font-size: 24px; 
    font-weight: 700; 
    display: flex;
    align-items: center;
  }
  .key__info-location img {
    height: 50px;
    width: auto;
    margin-right: 8px;
  }
  .key__info-date {
    font-size: 48px;
    font-weight: 600;
    font-family: "Poppins",sans-serif;
  }
  .key__info-date span {font-size: 32px;}
  @media (max-width: 768px) {
    .key__info {padding: 30px 20px 20px; position: absolute; bottom: -120px; left: 20px; width: calc(100% - 20px);}
    .key__info-location {font-size: 20px;}
    .key__info-date {font-size: 40px;}
    .key__info-date span {font-size: 24px;}
  }

  .key__gift {
    position: absolute; 
    right: -20px; 
    top: -20px; 
    background: #E55552; 
    color: #fff; 
    width: 100px; 
    height: 100px; 
    border-radius: 50px; 
    font-size: 24px; 
    font-weight: 700; 
    line-height: 1.2; 
    text-align: center; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    transform: rotate(15deg);
  }
  .key__gift span {font-size: 10px;}
  .key__gift::before {
    content: "";
    display: block;
    background-image: url('/images/event/key_gift.webp');
    background-size: cover;
    background-position: center;
    width: 80px;
    height: 84px;
    position: absolute;
    left: -60px;
    bottom: -10px;
    transform: rotate(-15deg); 
  }
  @media (max-width: 768px) {
    .key__gift {width: 90px; height: 90px; right: 20px; font-size: 20px;}
    .key__gift span {font-size: 8px;}
  }
  .event-ended-message {width: 400px;}
    @media (max-width: 768px) {.event-ended-message {width: 100%;}}

  /* ===== Section Heading ===== */
  .event__heading--lv3 {
    display: flex; 
    align-items: center; 
    gap: 10px; 
    font-size: 24px; 
    font-weight: 400; 
    color: #0A3304; 
    margin-bottom: 20px; 
    font-family: "WDXL Lubrifont JP N", sans-serif; 
    letter-spacing: .05em;
    position: relative;
    padding-left: 28px;
  }
  .event__heading--lv3::before {
    content: "";
    display: block;
    background-image: url('/images/event/icon_h3.svg');
    background-size: cover;
    background-position: center;
    width: 14px;
    height: 27px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .event__heading--lv3-companies {white-space: nowrap;}
  .event__heading--lv3-companies::after {content: ""; width: 100%; height: 1px; background-color: #0A8324;}
  @media (max-width: 768px) {
    .event__heading--lv3 {font-size: 18px; margin-bottom: 10px}
  }

  /* ===== Guidelines ===== */
  #guidelines {padding-top: 60px}
  .guide__list {display: grid; gap: 20px}
  .guide__list-item {
    display: flex; 
    gap: 30px; 
    align-items: center;
  }
  .guide__list-label {
    background: #2AA346;
    font-weight: 700;
    color: #fff; 
    width: 140px; 
    padding: 10px; 
    text-align: center;
  }
  .guide__list-text {
    font-size: 20px; 
    font-weight: 700; 
    line-height: 1.6;
  }
  .guide__list-text-small {
    font-size: 16px; 
    font-weight: 700;
  }
  @media (max-width: 768px) {
    #guidelines {padding-top: 140px;}
    .guide__list {gap: 15px;}
    .guide__list-item {flex-direction: column; align-items: flex-start; gap: 0;}
    .guide__list-label {width: 100px; padding: 0 10px;}
    .guide__list-text {font-size: 16px;}
    .guide__list-text-small {font-size: 14px;}
  }

  /* ===== Access ===== */
  #access {padding-bottom: 100px}
  .access__container {display: grid; grid-template-columns: 1fr 1fr; align-items: flex-start; gap: 40px}
  .access__list {display: grid}
  .access__list li {border-bottom: dashed 1px #999; padding: 20px 0; display: flex; gap: 20px; align-items: center}
  .access__icon img {width: 16px;}
  .access__googlemap {position: relative; width: 100%; height: 0; padding-top: 75%}
  .access__googlemap iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%}
  @media (max-width: 768px) {#access {padding-bottom: 50px}}
  @media (max-width: 768px) {.access__container {grid-template-columns: 1fr; gap: 20px}}
  @media (max-width: 768px) {.access__list li {padding: 10px 0}}

  /* ===== About ===== */
  #about {margin-bottom: 20px}
  .about__img {display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 80px; }
  .about__img img {width: 100%}
  .about__text {padding-bottom: 40px;}
  @media (max-width: 768px) {
    #about {margin-bottom: 10px;}
    .about__img {gap: 10px; margin-bottom: 40px}
    .about__text {padding-bottom: 0;}
  }

  /* ===== Gift ===== */
  #gift {padding-bottom: 100px; overflow: visible}
  .gift__container {border: 4px solid #2AA346; border-radius: 8px; margin-top: -28px}
  .gift__heading {display: flex; width: fit-content; position: relative; text-align: center; box-sizing: border-box; margin: 0 auto; z-index: 3}
  .gift__heading::before {
    content: ""; position: absolute; width: 50px; bottom: -10px; left: -55px; z-index: -2; border: 35px solid #0A8324; border-left-color: transparent; 
  }
  .gift__heading::after {
    content: ""; position: absolute; width: 50px; bottom: -10px; right: -55px; z-index: -2; border: 35px solid #0A8324; border-right-color: transparent; 
  }
  .gift__heading h2 {
    display: inline-block; position: relative; margin: 0; padding: 15px 80px; line-height: 45px; font-size: 32px; font-weight: 700; color: #fff; background: #2AA346; 
  }
  .gift__heading h2::after {
    position: absolute; content: ""; top: 100%; right: 0; border: none; border-bottom: 10px solid transparent; border-left: 15px solid #2AA346; 
  }
  .gift__heading-box {position: relative; width: fit-content; margin: 0 auto}
  .gift__heading-box::before {
    content: ""; display: block; background-image: url('/images/event/gift01.webp'); background-size: cover; background-position: center; width: 66px; height: 152px; position: absolute; left: -160px; top: 50%; transform: translateY(-50%); 
  }
  .gift__heading h2::before {
    position: absolute; content: ""; top: 100%; left: 0; border: none; border-bottom: 10px solid transparent; border-right: 15px solid #2AA346; 
  }
  .gift__heading-box::after {
    content: ""; display: block; background-image: url('/images/event/gift02.webp'); background-size: cover; background-position: center; width: 146px; height: 120px; position: absolute; right: -240px; top: 50%; transform: translateY(-50%); 
  }
  .gift__info {padding: 50px; margin: 0 auto; width: fit-content}
  .gift__heading-area {margin-bottom: 25px}
  .gift__heading--lv3 {font-size: 24px; font-weight: 700; color: #E55552; line-height: 1.4; margin: 20px auto 10px;}
  .gift__heading--lv3 span {font-size: 40px;}
  .gift__note {font-size: clamp(12px, 1.6vw, 14px); font-weight: 700; background-color: #999; color: #fff; padding: 2px 10px; width: fit-content; border-radius: 2px; margin-bottom: 5px;}
  .gift__note-list {margin-bottom: 15px; list-style: disc; padding-left: 1em;}
  .gift__remark {font-size: 12px}
  .gift__detail {background: #2AA346; color: #fff; padding: 60px 50px}
  .gift__list {display: grid; gap: 20px; width: fit-content; margin: 0 auto 50px}
  .gift__item {display: flex; align-items: center; gap: 20px}
  .gift__label {background: #fff; color: #2AA346; width: 160px; text-align: center; padding: 10px; font-weight: 700}
  .gift__txt {font-weight: 700; line-height: 1.4}
  .gift__txt-emphasis {font-size: 24px; color: #FFEB03; margin-left: 10px}
  .gift__txt-small {font-size: 16px}
  .gift__item-remark {font-size: clamp(12px, 1.6vw, 14px); font-weight: 400}
  .gift__item-remark a {color: #fff; text-decoration: underline; transition: all 200ms cubic-bezier(.2,.8,.2,1)}
  .gift__item-remark a:hover {color: rgba(255,255,255,.8)}
  @media (max-width: 768px) {
    #gift {padding-bottom: 50px; overflow: hidden; padding-top: 24px;}
    .gift__container {border: 3px solid #2AA346; border-radius: 4px; margin-top: -16px;}
    .gift__heading::before {left: -35px; border: 24px solid #256EB1; border-left-color: transparent;}
    .gift__heading::after {right: -35px; border: 24px solid #256EB1; border-right-color: transparent;}
    .gift__heading h2 {font-size: 24px; padding: 4px 16px;}
    .gift__heading-box::before {width: 44px; height: 102px; left: -90px;}
    .gift__heading-box::after {width: 98px; height: 82px; right: -140px;}
    .gift__info {padding: 40px 20px 30px;}
    .gift__heading--lv3 {font-size: 14px;}
    .gift__heading--lv3 span {font-size: 24px;}
    .gift__detail {padding: 30px 20px;}
    .gift__list {margin: 0 auto 30px;}
    .gift__item {flex-direction: column; align-items: flex-start; gap: 4px;}
    .gift__label {padding: 0 10px;}
    .gift__txt {font-size: 14px;}
    .gift__txt-emphasis {font-size: 20px; margin-left: 0;}
    .gift__txt-small {font-size: 12px;}
  }

  /* ===== Companies ===== */
  #companies {margin-bottom: 20px}
  .companies__list {display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; font-weight: 700; margin-bottom: 80px;}
  .companies__pr {font-size: 12px; font-weight: 400}
  .companies__location {display: flex; flex-wrap: wrap; gap: 5px; font-size: clamp(10px, 1.6vw, 12px); font-weight: 500}
  .companies__location span {background: #69AB1C; color: #fff; padding: 0 8px; line-height: 1.6}
  .companies__name {display: flex; align-items: center; gap: 5px; padding: 5px 0; color: #0A8324;}
  .companies__name img {width: 20px}
  .companies__target {display: flex; align-items: center; gap: 10px; border: 1px solid #ccc; border-radius: 2px; width: fit-content; margin-bottom: 15px; padding: 5px 10px; background-color: #fafafa; font-size: clamp(10px, 1.6vw, 12px);}
  @media (max-width: 768px) {
    .companies__list {grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px}
    .companies__target {flex-wrap: wrap; justify-content: flex-start}
    .companies__target li {width: calc(100%/3 - 10px); white-space: nowrap; letter-spacing: -.05em}
  }
  .companies__target li {display: flex; align-items: center; gap: 5px}
  .companies__target img {height: 20px; width: 20px; object-fit: contain}
  .companies__target-animal {gap: 16px}
  .companies__benefits {display: flex; gap: 4px; margin-top: 5px;}
  .companies__benefit-item {font-size: clamp(10px, 1.6vw, 12px); border: solid 1px #999; background-color: #fafafa; border-radius: 2px; padding: 0 4px; font-weight: 400;}

  /* ===== Event block (seminars etc.) ===== */
  .event__list {position: relative; margin-bottom: 40px; display: grid; gap: 20px;}
  .event__item {position: relative; gap: 20px; border: 2px solid #2AA346; border-radius: 4px; background-color: #fff;}
  .event__type {background: #2AA346; color: #fff; font-weight: 700; position: absolute; padding: clamp(5px, 2vw, 10px) clamp(10px, 4vw, 20px); text-align: center; align-content: center; left: 0; top: 0;}
  .event__content {padding: clamp(15px, 2.5vw, 30px);}
  .event__name {font-size: clamp(16px, 2.5vw, 20px); margin: 0 0 10px;}
  .event__lecturer {border-bottom: 2px solid #2AA346; display: inline-block}
  .event__details {background: #F5F5F5; padding: 1rem; border-radius: 8px; margin-top: 1rem}
.event__inner {
  display: flex;
  align-items: stretch;
}

/* 左の画像ブロック */
.event__img {
  flex: 0 0 320px;       /* 幅は320px固定 */
  display: flex;         /* ←これが高さを右に合わせる最重要 */
  overflow: hidden;
}

/* 画像を右側の高さにフィットさせる */
.event__img img {
  width: 100%;
  height: 100%;          /* ←親の高さにフィット */
  object-fit: cover;
  object-position: center;
}

  @media (max-width: 768px) {
    .event__inner {display: block;}
    .event__content {width: auto;}
  }

  /* ===== Pickup ===== */
  .pickup__list {
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 80px; 
  }
  .pickup__item {padding: 30px; background: #EEF8F0; border: 2px solid #2AA346; border-radius: 8px}
  .pickup__detail {display: grid; grid-template-columns: auto 1fr; gap: 30px; margin-bottom: 20px}
  .pickup__info {display: flex; flex-direction: column}
  .pickup__img img {width: 135px; height: 135px; object-fit: cover; object-position: center;}
  .pickup____heading {font-size: 20px; font-weight: 700; margin-bottom: 10px}
  .pickup__link {
    background: #2AA346; color: #fff; font-size: clamp(12px, 1.6vw, 14px); font-weight: 700; padding: 10px 15px; transition: all 200ms cubic-bezier(.2,.8,.2,1); width: fit-content; margin-top: auto; 
  }
  .pickup__link:hover {background: #2AA346; color: #fff}
  .pickup__heading {margin: 0 0 10px;}
  @media (max-width: 768px) {
    .pickup__list {grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px;}
    .pickup__item {padding: 20px;}
    .pickup__detail {grid-template-columns: 1fr; gap: 10px;}
    .pickup__img img {width: 100%; height: 100px;}
    .pickup__link {padding: 4px 15px; margin-top: 10px;}
  }

  /* ===== Form embed section ===== */
  #form {background: #2AA346; font-size: 16px; color: #fff; padding-bottom: 80px}
  #form a {color: #fff; text-decoration: underline}
  #form .event__heading {text-align: center; color: #fff}
  #form .event__heading-bg {color: rgba(255,255,255,.1)}

  .entry-form {margin: 0}
  @media (min-width: 769px) {
    .entry-form {width: 460px; margin: 30px auto 0}
  }
  .entry-form th span {background: #E55552; color: #fff; padding: 0 10px; margin-right: 10px; font-size: clamp(12px, 1.6vw, 14px); border-radius: 0;}
  .entry-form th {font-size: 16px; color: #fff;}
  .form__input,.form__select {border: 2px solid #2AA346; background: #fff; font-size: 16px; margin-bottom: 30px;}
  .mw_wp_form .vertical-item {color: #fff}
  .form__terms-text,.form__memo {color: #fff}
  .complete {background: #2AA346; padding: 30px; border-radius: 8px}
  .form__select-area: after {color: #2AA346}
  .complete__heading-wrapper {margin: 0}
  .complete__heading {color: #FFEB03; margin-bottom: 20px}
  .complete__heading::before {background: #FFEB03}
  .complete__notice span {background: linear-gradient(transparent 60%,#E55552 60%)}
  .complete__card-title {background: #E55552; border-bottom: none}
  .complete__card {border: 2px solid #E55552; background: #EE9290}

  /* ===== Footer (event) ===== */
  .footer__event--farm {background: #212121; color: #fff}
  .footer__event-info {
    display: flex; align-items: center; gap: 80px; width: fit-content; margin: 0 auto; padding: 40px 0; 
  }
  .footer__event-logo {width: 240px}
  .footer__event-text {font-size: 16px}
  .footer__event-tel {font-size: 32px; font-weight: 600; font-family: "Poppins",sans-serif; }
  .footer__event-tel span {font-size: clamp(12px, 1.6vw, 14px); font-weight: 400; margin-left: 20px}
  .footer__event-menu {
    display: flex; justify-content: space-between; border-top: 1px solid #999; padding: 30px 0; 
  }
  .footer__event-copyright {font-size: clamp(12px, 1.6vw, 14px);}
  .footer__event-list {display: flex; gap: 20px}
  .footer__event-link {color: #fff; font-size: clamp(12px, 1.6vw, 14px);}
  .footer__event-link:hover {opacity: .8}
  @media (max-width: 768px) {
    .footer__event-info {flex-direction: column; gap: 20px; padding: 20px 0;}
    .footer__event-logo {width: 200px;}
    .footer__event-text {font-size: 14px;}
    .footer__event-tel {font-size: 24px;}
    .footer__event-tel span {display: block; margin-left: 0;}
    .footer__event-menu {flex-direction: column-reverse; align-items: center; padding: 15px 0}
  }
}