main, section { width: 100%; }

/* rssブロックのスタイル */
.wp-block-rss {
  li { padding: 16px 8px; }
  li:has(+li) {
    border-bottom: 2px dashed #000;
  }
}

/* ヒーローセクションCSS */
.soraoto-hero {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  justify-content: center;
  align-items: center;

  .soraoto-hero-header {
    position: absolute;
    top: 0;

    img {
      max-height: 16vh;
      object-fit: contain;
    }
  }
  .soraoto-hero-content {
    position: absolute;
    width: 120vh;
    height: 120vh;
    bottom: -40vh;

    left: calc((100vw - 120vh) / 2);

    @media (orientation: landscape) {
      left: auto;
      right: calc(-140vh + 70vw);
    }

    img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      max-height: 100%;
      max-width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      border-radius: 50%;
    }
  }
  .soraoto-hero-content::after {
    content: "";
    position: absolute;
    inset: -5%;
    width: 110%;
    height: 110%;
    background-image: url(http://tsukioto.net/wp-content/uploads/2026/08/rainbow_frame_01_circle_a.png), radial-gradient(circle at center, #ffffff22 0, #ffffff88 65%, transparent 66%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .soraoto-hero-paragraphs {
    position: absolute;
    container-type: inline-size;

    color: var(--wp--preset--color--contrast);
    width: 72vw;

    background-color: var(--wp--preset--color--base);
    padding: 4%;
    box-shadow: 8px 12px 8px #00000088;
    gap: 0;

    @media (orientation: landscape) {
      left: clamp(16px, 6vw, 160px);
      top: 20%;
      width: min(40vw, 100vh);

      padding: 2%;
    }

    p {
      border-bottom: 1px dashed #888;
      width: 100%;
      margin-top: .5em;
      line-height: 1.2;
      word-break: keep-all;
      font-size: 7.7cqw;
      font-weight: 600;
      font-family: var(--wp--preset--font-family--yomogi);
    }
    p:nth-child(4) { padding-left: .5em; }

    .soraoto-text-ima { font-size: 1.2em; color: #7699a5; }
    .soraoto-text-mirai { font-size: 1.2em; color: #d97a28; }
  }
  .soraoto-hero-paragraphs::before {
    content: "";
    position: absolute;
    width: 25%;
    height: 12%;
    background-color: var(--wp--preset--color--accent);
    top: -7%;
    right: 0;
    left: 0;
    margin: auto;
  }

  .soraoto-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;

    .soraoto-hero-bg-1 {
      position: absolute;
      width: 100%;
      height: 50vh;
      background-image: url(http://tsukioto.net/wp-content/uploads/2026/08/bg_wave_darkgreen.svg);
      background-repeat: repeat-x;

      bottom: -4vh;
      background-size: 160% 100%;
      background-position-x: 64vw; 
    }
    .soraoto-hero-bg-2 {
      position: absolute;
      width: 100%;
      height: 50vh;
      background-image: url(http://tsukioto.net/wp-content/uploads/2026/08/bg_wave_green.svg);
      background-repeat: repeat-x;

      bottom: -8vh;
      background-size: 160% 100%;
      background-position-x: -10vw;
    }

    @media(orientation: landscape) {
      .soraoto-hero-bg-1 {
        bottom: -2vh;
        background-size: 110% 100%;
        background-position-x: -400px;
      }
      .soraoto-hero-bg-2 {
        bottom: -7vh;
        background-size: 110% 100%;
        background-position-x: calc(55vw - 400px);
      }
    }
  }
}

/* 特色セクションのCSS */
:root {
  --soraoto--section1--content-width: clamp(min(60vw, 180px), calc(50vw + 50px), min(80vw, 600px));
  --soraoto--section1--anim-duration: 1s;
  --soraoto--section1--anim-delay: 0s;
}

@keyframes center-p-in-anim {
  0% { opacity: 0; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes center-p-out-anim {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes side-p-in-anim {
  0% { opacity: 0; height: 0; }
  48% { opacity: 0; height: 0; }
  53% { opacity: 0; height: fit-content; }
  100% { opacity: 1; height: fit-content; }
}
@keyframes side-p-out-anim {
  0% { opacity: 1; height: fit-content; }
  12% { opacity: 0; height: fit-content; }
  25% { opacity: 0; height: 0; }
  100% { opacity: 0; height: 0; }
}
@keyframes side-size-down-anim {
  0% { width: calc(var(--soraoto--section1--content-width) / 1.5); }
  22% { width: calc(var(--soraoto--section1--content-width) / 1.5); }
  50% { width: calc(var(--soraoto--section1--content-width) / 3); }
  100% { width: calc(var(--soraoto--section1--content-width) / 3); }
}
@keyframes side-size-up-anim {
  0% { width: calc(var(--soraoto--section1--content-width) / 3); }
  50% { width: calc(var(--soraoto--section1--content-width) / 1.5); }
  100% { width: calc(var(--soraoto--section1--content-width) / 1.5); }
}

.wp-block-group.soraoto-section1-content {
  box-sizing: border-box;
  * { box-sizing: border-box; }

  position: relative;
  width: 100%;
  margin: calc(var(--soraoto--section1--content-width) / 3) 0 calc(var(--soraoto--section1--content-width) / 10) 0;

  .soraoto-section1-center {
    width: var(--soraoto--section1--content-width);
    aspect-ratio: 1 / 1;
    border: 1px solid #000;
    border-radius: 50%;
    container-type: inline-size;

    transform: scale(1);
    transition: transform .4s ease 0s, background-image .5s ease 0s;

    .soraoto-section1-center-inner {
      position: relative;
      width: 100%;
      height: 100%;
      visibility: hidden;
      opacity: 0;
      transition: opacity .2s ease;
    }

    p[class*="soraoto-section1-center"] {
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 100%;
      height: fit-content;
      padding: calc(var(--soraoto--section1--content-width) / 6.5);
      font-size: 6cqw;
      text-align: center;

      opacity: 0;
      animation: var(--soraoto--section1--anim-duration) var(--soraoto--section1--anim-delay) center-p-out-anim;
    }
  }

  .soraoto-section1-side-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;

    div[class*="soraoto-section1-side"] {
      position: absolute;
      top: 50%;
      left: 50%;
      aspect-ratio: 1 / 1;
      border-radius: 50%;
      justify-content: center;
      align-items: center;
      container-type: inline-size;

      width: calc(var(--soraoto--section1--content-width) / 1.5);
      animation: var(--soraoto--section1--anim-duration) var(--soraoto--section1--anim-delay) side-size-up-anim;

      background-size: 100% 205%;
      background-position: 0 0;
      transition: transform .4s ease 0s, background-position .6s ease 0s;

      h3 { font-size: clamp(.75rem, 15cqw, 1.75rem); font-weight: bold; }

      p {
        padding: 0 5%;
        text-align: center;
        font-size: clamp(.875rem, 6cqw, 1.25rem);

        opacity: 1;
        height: fit-content;
        animation: var(--soraoto--section1--anim-duration) var(--soraoto--section1--anim-delay) side-p-in-anim;
      }
    }
    .soraoto-section1-side-1 {
      transform: translate(-50%, -50%) translateY(calc(var(--soraoto--section1--content-width) / -2.4))  scale(1);
      background-image: linear-gradient(to bottom, orange 0, orange 50%, #fff 50%, #fff 100%);
      border: 1px solid orange;
    }
    .soraoto-section1-side-2 {
      transform: translate(-50%, -50%) rotateZ(-120deg) translateY(calc(var(--soraoto--section1--content-width) / -2.4)) rotateZ(120deg) scale(1);
      background-image: linear-gradient(to bottom, lightblue 0, lightblue 50%, #fff 50%, #fff 100%);
      border: 1px solid lightblue;
    }
    .soraoto-section1-side-3 {
      transform: translate(-50%, -50%) rotateZ(120deg) translateY(calc(var(--soraoto--section1--content-width) / -2.4)) rotateZ(-120deg) scale(1);
      background-image: linear-gradient(to bottom, lightgreen 0, lightgreen 50%, #fff 50%, #fff 100%);
      border: 1px solid lightgreen;
    }
  }
}

@media(max-width: 600px) {
  .wp-block-group.soraoto-section1-content {

    .soraoto-section1-center { transform: scale(1.2); }

    .soraoto-section1-side-wrapper {
      div[class*="soraoto-section1-side"] {
        background-position: 0 100%;
        cursor: pointer;

        width: calc(var(--soraoto--section1--content-width) / 3);
        animation: var(--soraoto--section1--anim-duration) var(--soraoto--section1--anim-delay) side-size-down-anim;

        p {
          opacity: 0;
          height: 0;
          pointer-events: none;
          animation: var(--soraoto--section1--anim-duration) var(--soraoto--section1--anim-delay) side-p-out-anim;
        }
      }
      .soraoto-section1-side-1 { transform: translate(-50%, -50%) translateY(calc(var(--soraoto--section1--content-width) / -1.55))  scale(1); }
      .soraoto-section1-side-2 { transform: translate(-50%, -50%) rotateZ(-120deg) translateY(calc(var(--soraoto--section1--content-width) / -1.55)) rotateZ(120deg) scale(1); }
      .soraoto-section1-side-3 { transform: translate(-50%, -50%) rotateZ(120deg) translateY(calc(var(--soraoto--section1--content-width) / -1.55)) rotateZ(-120deg) scale(1); }
    }
  }

  .wp-block-group.soraoto-section1-content.soraoto-selected-elem-1 {
    .soraoto-section1-center {
      background-image: url(http://tsukioto.net/wp-content/uploads/2026/07/home-section1-1.webp);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      background-color: #ffffffd2;
      background-blend-mode: color;
    }
    p.soraoto-section1-center-1 {
      opacity: 1;
      animation: var(--soraoto--section1--anim-duration) var(--soraoto--section1--anim-delay) center-p-in-anim;
    }
    div.soraoto-section1-side-1 {
      transform: translate(-50%, -50%) translateY(calc(var(--soraoto--section1--content-width) / -1.55)) scale(1.2);
      background-position: 0 0;
    }
  }
  .wp-block-group.soraoto-section1-content.soraoto-selected-elem-2 {
    .soraoto-section1-center {
      background-image: url(http://tsukioto.net/wp-content/uploads/2026/07/home-section1-2.webp);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      background-color: #ffffffd2;
      background-blend-mode: color;
    }
    p.soraoto-section1-center-2 {
      opacity: 1;
      animation: var(--soraoto--section1--anim-duration) var(--soraoto--section1--anim-delay) center-p-in-anim;
    }
    div.soraoto-section1-side-2 {
      transform: translate(-50%, -50%) rotateZ(-120deg) translateY(calc(var(--soraoto--section1--content-width) / -1.55)) rotateZ(120deg) scale(1.2);
      background-position: 0 0;
    }
  }
  .wp-block-group.soraoto-section1-content.soraoto-selected-elem-3 {
    .soraoto-section1-center {
      background-image: url(http://tsukioto.net/wp-content/uploads/2026/07/home-section1-3.webp);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      background-color: #ffffffd2;
      background-blend-mode: color;
    }
    p.soraoto-section1-center-3 {
      opacity: 1;
      animation: var(--soraoto--section1--anim-duration) var(--soraoto--section1--anim-delay) center-p-in-anim;
    }
    div.soraoto-section1-side-3 {
      transform: translate(-50%, -50%) rotateZ(120deg) translateY(calc(var(--soraoto--section1--content-width) / -1.55)) rotateZ(-120deg) scale(1.2);
      background-position: 0 0;
    }
  }
}
/* 事業所案内セクションCSS */

.soraoto-home-section-office {
  dt { margin-top: 1.5rem; margin-bottom: .5rem; font-weight: 600; }
  dt:first-child { margin-top: 0; }
  dd > p { margin: .5rem 0; }
  dd > p:last-child { margin-bottom: 0; border-bottom: 1px solid var(--wp--preset--color--contrast); }
}

/* カルーセルCSS */

.carousel-wrapper {
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  
  background-color: var(--wp--preset--color--main-soft);
  padding-bottom: 48px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

.carousel {
  display: flex;
  gap: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-marker-group: after;

  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.carousel-ui-anchor {
  anchor-name: --carousel;
  width: calc(90% - 72px);
  height: 0;
  margin: auto;
}

.carousel::scroll-button(left), .carousel::scroll-button(right) {
  position: absolute;
  position-anchor: --carousel;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
  font-size: 1.5rem;
  font-weight: 600;
  cursor: pointer;
}
.carousel::scroll-button(left) {
  content: "‹" / "前のカード";
  position-area: left bottom;
}
.carousel::scroll-button(right) {
  content: "›" / "次のカード";
  position-area: right bottom;
}

.carousel::scroll-marker-group {
  position: absolute;
  position-anchor: --carousel;
  position-area: bottom center;
  margin-top: 8px;

  display: flex;
  gap: 6px;
  padding: 6px;
  background: var(--wp--preset--color--base);
  border: 1px solid #000;
  border-radius: 16px;
}

.carousel > li::scroll-marker {
  content: "" / attr(data-label);

  width: 8px;
  height: 8px;
  padding: 0;
  background: var(--wp--preset--color--main-soft);
  border: 1px solid #000;
  border-radius: 8px;
}

.carousel > li::scroll-marker:target-current {
  width: 24px;
  background: var(--wp--preset--color--main);
}

.carousel-card {
  scroll-snap-align: center;
  flex: 0 0 calc(200px + 20%);
  margin: 20px max(12px, 2%);

  display: grid;
  background-color: var(--wp--preset--color--base);
  border-radius: 16px;
}


.faq-card {
  width: 100%;
  background-color: var(--wp--preset--color--base);
  padding: 8px;
  border-radius: 16px;
  box-shadow: 4px 4px 12px #00000055;

  h3 {
    width: 96%;
    padding: 4px 12px;
    margin: 0 auto;
    border-bottom: 2px dashed var(--wp--preset--color--accent);
    font-family: var(--wp--preset--font-family--zen-maru-gothic);
  }
  h3::before {
    content: "Q." / "";
  }

  p { padding: 4px 20px; }
  p::before {
    content: "A." / "";
  }
}

/* ご利用の流れセクションCSS */

.addmissions-card {
  width: 100%;
  box-shadow: 0px 0px 24px #00000044;
  background-color: var(--wp--preset--color--base);
  padding: 28px;

  background-image: linear-gradient(#88888822 1px, var(--wp--preset--color--base) 0);
  background-size: 100% 32px;
  background-position-y: 24px;
}