/* the SILK 5th Anniversary LP — standalone (no theme reuse) */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #efeeeb;
  color: #666;
  font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.5;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
  display: block;
}

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

/* スクリーンリーダー・クローラー向け（見た目は非表示） */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.l-anni5 {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  background: #fff;
  overflow: hidden;
}

/* ---- section shell ---- */
.p-sec {
  position: relative;
  width: 100%;
}

.p-sec__img {
  width: 100%;
  height: auto;
}

/* transparent hit areas over image CTAs */
.p-hotspot {
  position: absolute;
  display: block;
  z-index: 2;
  outline: none;
  overflow: hidden;
  isolation: isolate;
  border-radius: 999px;
}

.p-hotspot::before {
  position: absolute;
  content: "";
  display: inline-block;
  top: 0;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fbfbfb;
  animation: btn_animation 3s ease-in-out infinite;
  pointer-events: none;
}

.p-hotspot:focus-visible {
  outline: 2px solid #9dbbd2;
  outline-offset: 2px;
}

.p-hotspot__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- hero stack (FV / teaser / trial / message) ---- */
/* Figma overlaps: FV→teaser -60px, teaser→message -99px; total 3815 */
.p-hero {
  position: relative;
}

.p-hero__teaser {
  margin-top: calc(-60 / 750 * 100%);
  position: relative;
  z-index: 3;
}

.p-hero__teaser .p-sec__img {
  width: 100%;
  height: auto;
}

/* teaser Roundカード → 下部キャンペーン（750×1209基準） */
.p-hotspot--teaser-round {
  border-radius: 0;
}

.p-hotspot--teaser-round::before {
  display: none;
  animation: none;
}

.p-hotspot--teaser-r1 {
  left: calc(40 / 750 * 100%);
  top: calc(500 / 1209 * 100%);
  width: calc(320 / 750 * 100%);
  height: calc(290 / 1209 * 100%);
}

.p-hotspot--teaser-r2 {
  left: calc(390 / 750 * 100%);
  top: calc(500 / 1209 * 100%);
  width: calc(320 / 750 * 100%);
  height: calc(290 / 1209 * 100%);
}

.p-hotspot--teaser-r3 {
  left: calc(40 / 750 * 100%);
  top: calc(820 / 1209 * 100%);
  width: calc(670 / 750 * 100%);
  height: calc(240 / 1209 * 100%);
}

.p-hero__message {
  margin-top: calc(-99 / 750 * 100%);
}

.p-hero__trial {
  position: absolute;
  left: calc(24 / 750 * 100%);
  top: calc(970 / 3815 * 100%);
  width: calc(687 / 750 * 100%);
  z-index: 3;
}

.p-hero__trial-img {
  width: 100%;
  height: auto;
}

/* btn within trial card: 151,213 / 400×72 (687×315) */
.p-hero__trial .p-hotspot--trial {
  left: calc(151 / 687 * 100%);
  top: calc(213 / 315 * 100%);
  width: calc(400 / 687 * 100%);
  height: calc(72 / 315 * 100%);
}

/* ---- campaign details ---- */
.p-campaign {
  position: relative;
}

.p-campaign__badge {
  position: relative;
  z-index: 2;
  width: calc(300 / 750 * 100%);
  margin: calc(-60 / 750 * 100%) auto 0;
}

.p-campaign__head {
  width: calc(650 / 750 * 100%);
  margin: calc(-40 / 750 * 100%) auto calc(80 / 750 * 100%);
  position: relative;
  z-index: 3;
}

.p-campaign__block {
  position: relative;
  width: calc(670 / 750 * 100%);
  margin: 0 auto calc(80 / 750 * 100%);
  scroll-margin-top: 16px;
}

.p-campaign__block:last-child {
  margin-bottom: 0;
}

.no-accordion .p-sec__img {
  border-radius: 0 0 calc(20 / 750 * 100%) calc(20 / 750 * 100%);
}

/* アコーディオン開閉トグル（Round共通画像） */
.p-accordion__trigger {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.p-accordion__trigger img,
.p-accordion__trigger-img {
  width: 100%;
  height: auto;
}

.p-accordion__trigger-img--close {
  display: none;
}

.p-accordion.is-open .p-accordion__trigger-img--open {
  display: none;
}

.p-accordion.is-open .p-accordion__trigger-img--close {
  display: block;
}

.p-accordion__trigger:focus-visible {
  outline: 2px solid #9dbbd2;
  outline-offset: 2px;
}

/* 開始前は非表示＆詰める（公開時にクラスを外す） */
.is-prelaunch-hidden {
  display: none !important;
}

.p-round__after {
  width: 100%;
}

.p-round__ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(570 / 670 * 100%);
  margin: calc(40 / 670 * 100%) auto 0;
}

.p-round__note {
  margin: calc(20 / 670 * 100%) 0 0;
  color: #666;
  font-size: calc(28 / 750 * 100vw);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-align: center;
}

@media (min-width: 750px) {
  .p-round__note {
    font-size: 28px;
  }
}

.p-round__btn {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  border-radius: 999px;
  transition: opacity 0.2s;
}

.p-round__btn::before {
  position: absolute;
  content: "";
  display: inline-block;
  top: 0;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fbfbfb;
  animation: btn_animation 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

.p-round__btn img {
  position: relative;
  z-index: 0;
  width: 100%;
  height: auto;
}

.p-round__btn:hover {
  opacity: 0.85;
}

.p-round__btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.p-round__btn[aria-disabled="true"]::before {
  animation: none;
  display: none;
}

/* studio-silk と同系統のボタン光アニメ
   周期3s・光の動きは元の約0.5sを維持（末尾約16.7%） */
@keyframes btn_animation {
  0% {
    -webkit-transform: scale(0) rotate(45deg);
    transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  83.3% {
    -webkit-transform: scale(0) rotate(45deg);
    transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  84% {
    -webkit-transform: scale(4) rotate(45deg);
    transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(50) rotate(45deg);
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

.p-accordion__panel {
  display: none;
  background: #F7F4EF;
  width: 100%;
  padding-bottom: calc(60 / 750 * 100%);
}

.p-accordion.is-open .p-accordion__panel {
  display: block;
}

.p-accordion__detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(590 / 670 * 100%);
  margin: 0 auto;
  gap: 30px;
}

.p-accordion__gap {
  width: calc(60 / 590 * 100%);
  height: auto;
  margin: calc(10 / 670 * 100%) auto;
}

.p-accordion__detail-btn {
  width: calc(570 / 590 * 100%);
  margin: 0 auto;
  filter: drop-shadow(0 7.5px 7.5px rgba(0, 0, 0, 0.15));
}

/* First-timer: head / body / cta */
.p-first {
  width: calc(670 / 750 * 100%);
  margin: 0 auto;
  scroll-margin-top: 16px;
}

.p-first__cta {
  position: relative;
  margin-top: calc(50 / 750 * 100%);
}

/* 角丸クリップを外し、画像ボタン形状に合わせる */
.p-first__cta .p-hotspot {
  border-radius: 0;
}

/* CTA strip 670×171 — 左:パーソナル / 右:グループ */
.p-first__cta .p-hotspot--personal {
  left: 0;
  top: calc(45 / 171 * 100%);
  width: calc(325 / 670 * 100%);
  height: calc(129 / 171 * 100%);
}

.p-first__cta .p-hotspot--group {
  left: calc(345 / 670 * 100%);
  top: calc(45 / 171 * 100%);
  width: calc(325 / 670 * 100%);
  height: calc(129 / 171 * 100%);
}

.p-sec--annotation {
  margin-top: calc(80 / 750 * 100%);
}

/* c1b は670幅デザインのため、detail(590)から左右にはみ出して全幅に */
.round2-detail-c1b {
  width: calc(670 / 590 * 100%);
  max-width: none;
  margin-inline: calc(-40 / 590 * 100%);
  margin-bottom: -30px;
}

/* ---- Round2 ご協賛企業メッセージ（Splide） ---- */
.p-sponsor-carousel {
  width: 100%;
  margin-top: calc(20 / 670 * 100%);
}

.p-sponsor-carousel__title {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 calc(60 / 670 * 100%);
}

.splide {
  padding-bottom: calc(60 / 670 * 100%);
}

.p-sponsor-carousel__splide .splide__slide img {
  display: block;
  width: 100%;
  height: auto;
}

.p-sponsor-carousel__splide .splide__pagination {
  bottom: 0;
  gap: calc(30 / 670 * 100%);
  padding: 0;
  margin: 0;
}

.p-sponsor-carousel__splide .splide__pagination li {
  margin: 0;
  line-height: 0;
}

.p-sponsor-carousel__splide .splide__pagination__page {
  width: 5px;
  height: 5px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #666666;
  opacity: 0.3;
  transform: none;
}

.p-sponsor-carousel__splide .splide__pagination__page.is-active {
  background: #a5744c;
  opacity: 1;
  transform: none;
}

/* 矢印：CTAと同じ線シェブロン。色はアクティブドットと同じ #A5744C */
.p-sponsor-carousel__splide .splide__arrow {
  width: 36px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='23' viewBox='0 0 15 23' fill='none'%3E%3Cpath d='M1.5 1.5L13.5 11.5L1.5 21.5' stroke='%23A5744C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 23px;
  opacity: 1;
}

.p-sponsor-carousel__splide .splide__arrow svg {
  display: none;
}

.p-sponsor-carousel__splide .splide__arrow--prev {
  left: 0;
  transform: translateY(-50%) scaleX(-1);
}

.p-sponsor-carousel__splide .splide__arrow--next {
  right: 0;
  transform: translateY(-50%);
}

.p-sponsor-carousel__splide .splide__arrow:hover:not(:disabled) {
  opacity: 0.7;
}

.p-sponsor-carousel__splide .splide__arrow:focus-visible {
  outline: 2px solid #a5744c;
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .p-sponsor-carousel__splide .splide__arrow {
    width: 4.68vw;
    height: 10.24vw;
    background-size: 3.2vw 4.9vw;
  }
}

/* ---- closing ---- */
.p-sec--closing .p-hotspot--reserve {
  left: calc(90 / 750 * 100%);
  top: calc(693 / 903 * 100%);
  width: calc(570 / 750 * 100%);
  height: calc(110 / 903 * 100%);
}

/* ---- footer ---- */
.p-sec--footer {
  background: #efeeeb;
}