@charset "UTF-8";

body {
  font-family: "Noto Sans", sans-serif;
  box-sizing: border-box;
  font-size: clamp(0.938rem, 0.906rem + 0.13vw, 1rem); /* 16-15 */
  width: 100%;
  letter-spacing: initial;
  line-height: inherit;
}

img {
  max-width: 100%;
}

.sp-only {
  display: none;
}

.pc-only {
  display: block;
}

@media screen and (max-width: 768px) {
  .sp-only {
    display: block !important;
  }
  .pc-only {
    display: none !important;
  }
}

/*本文サイズ*/
p {
  font-size: clamp(0.938rem, 0.906rem + 0.13vw, 1rem); /* 16-15 */
  line-height: 1.875;
  font-weight: 400;
  text-align: justify;
  color: #333333;
}

a:hover {
  opacity: 0.7;
  -webkit-transition: 0.2s ease-in;
  transition: 0.2s ease-in;
}

/* デフォルトのbuttonスタイルをリセット */
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  margin: 0;
  outline: none;
  padding: 0;
  vertical-align: middle;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "M PLUS Rounded 1c", sans-serif;
  /* ↓↓↓　M PLUS Rounded 1c Windowsジャギー対策　↓↓↓ */
  transform: rotateZ(0.03deg);
  -webkit-transform: rotateZ(0.03deg);
}

/* ===========================================
 * 基本設定
 * ======================================== */

:root {
  --c-white: #fff;
  --c-black: #333;
  --c-pink: #ff89b2;
  --c-blue: #00acba;
  --c-blue--light: #65adeb;
  --c-orange: #ffad2b;
  --c-brown: #604c3f;
  --c-gray: #f4f4f4;
  --c-bg-pink: #ffe3ec;
  --c-bg-yellow: #fffbce;
  --c-bg-blue: #e2f6ff;

  --ff-default: "Noto Sans", sans-serif;
  --ff-rounded-m: "M PLUS Rounded 1c", sans-serif;
}

.pg-kids {
  overflow: hidden;
}

/* ===========================================
 * パーツ
 * ======================================== */

/*ボタン*/
.c-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(1rem, 0.938rem + 0.25vw, 1.125rem); /* 18-16 */
  font-weight: 600;
  letter-spacing: 0;
  padding: clamp(1rem, 0.875rem + 0.5vw, 1.25rem) clamp(1.5rem, 1.25rem + 1vw, 2rem); /* 20-16,32-24 */
  color: var(--c-white);
  background-color: var(--c-blue);
  text-align: center;
  border-radius: calc(1px / 0);
  max-width: fit-content;
}

/* 見出し */
.c-heading-lv2 {
  font-size: clamp(1.5rem, 1.125rem + 1.5vw, 2.25rem); /* 36-24 */
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.2;
  color: var(--c-blue);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.c-heading-lv2.-gap-none {
  gap: 0;
}

.c-heading-lv2 span.orange {
  color: var(--c-orange);
}

.c-heading-lv2 em {
  font-size: clamp(2.5rem, 2.125rem + 1.5vw, 3.25rem); /* 52-40 */
  font-style: normal;
}

/* セクション */
.c-section__inner {
  max-width: 1280px;
  padding: 0 40px;
  margin-inline: auto;
}

.c-section__inner.-sm {
  max-width: 1160px;
}

@media screen and (max-width: 768px) {
  .c-section__inner {
    padding: 0 16px;
  }

  .c-heading-lv2.-gap-none {
    gap: 16px;
  }

  .c-section__inner.-sm-pd0 {
    padding: 0;
  }
}

/* ===========================================
 * ヘッダー
 * ======================================== */

.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  padding: 28px 0;
  width: 100%;
  transition: background-color 0.2s, box-shadow 0.2s, padding 0.2s;
}

.header.is-scroll {
  padding: 12px 0;
  background-color: var(--c-white);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
}

.header__inner {
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.header__logo {
  max-width: 280px;
  width: 100%;
  transition: max-width 0.2s;
}

.header.is-scroll .header__logo {
  max-width: 180px;
}

.header__body {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: clamp(1rem, -7.727rem + 13.64vw, 2.5rem); /* 40-16 */
}

.header-nav-list {
  display: flex;
  align-items: center;
  gap: 40px;
}

.header-nav-list__link {
  font-size: clamp(0.938rem, 0.574rem + 0.57vw, 1rem); /* 16-15 */
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
}

.header-contact-btn__link {
  display: block;
  padding: 10px clamp(1rem, 0.875rem + 0.5vw, 1.25rem); /* 20-16 */
  font-size: clamp(0.875rem, 0.813rem + 0.25vw, 1rem); /* 16-14 */
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--c-white);
  background-color: var(--c-blue);
  border-radius: calc(1px / 0);
}

@media screen and (max-width: 1024px) {
  .header-nav {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .header {
    padding: 16px 0;
  }

  .header__logo {
    max-width: 160px;
  }

  .header.is-scroll .header__logo {
    max-width: 100px;
  }

  .header__inner {
    padding: 0 16px;
  }

  .header.is-scroll {
    padding: 8px 0;
  }

  .header-contact-btn__link {
    padding: 8px 16px;
  }

  .header.is-scroll .header-contact-btn__link {
    padding: 6px 12px;
  }
}

/* ===========================================
 * CTA
 * ======================================== */
.cta {
  margin-top: clamp(3.75rem, 2.5rem + 5vw, 6.25rem); /* 100-60 */
  max-width: 900px;
  margin-inline: auto;
  background-color: var(--c-white);
  border-radius: 20px;
  padding: clamp(1rem, 0.625rem + 1.5vw, 1.75rem) 0; /* 28-16 */
  position: relative;
}

.cta__inner {
  margin: 0 clamp(1rem, 0.625rem + 1.5vw, 1.75rem); /* 28-16 */
  border: dashed 1px var(--c-pink);
  border-radius: 8px;
}

.cta__heading {
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); /* 32-24 */
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1;
  color: var(--c-brown);
  text-align: center;
}

.cta__content {
  padding: clamp(1rem, 0.25rem + 3vw, 2.5rem); /* 40-16 */
}

.cta__text {
  font-size: clamp(0.938rem, 0.906rem + 0.13vw, 1rem); /* 16-15 */
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.8;
  margin-top: 20px;
  text-align: center;
}

.cta__body {
  display: flex;
  align-items: center;
  gap: 20px 40px;
  justify-content: center;
  margin-top: 20px;
}

.cta-address {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cta-address__tel {
  font-family: var(--ff-rounded-m);
  font-size: clamp(2rem, 1.625rem + 1.5vw, 2.75rem); /* 44-32 */
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  color: var(--c-blue);
  text-align: center;
  pointer-events: none;
}

.cta-address__time {
  font-size: clamp(0.875rem, 0.844rem + 0.13vw, 0.938rem); /* 15-14 */
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--c-blue);
  text-align: center;
}

.cta-deco {
  position: absolute;
}

.cta-deco.-bird {
  top: -22px;
  left: -32px;
}

.cta-deco.-flower {
  bottom: -34px;
  right: -20px;
}

@media screen and (max-width: 1024px) {
  .cta__body {
    flex-direction: column;
  }
}

@media screen and (max-width: 768px) {
  .cta-deco.-bird {
    max-width: 60px;
    top: -16px;
    left: -12px;
  }

  .cta__text {
    letter-spacing: 0;
  }

  .cta-deco.-flower {
    max-width: 80px;
    bottom: -25px;
    right: -16px;
  }
}

@media screen and (max-width: 768px) {
  .cta-address__tel {
    pointer-events: all;
  }
}

/* ===========================================
 * アニメーション
 * ======================================== */

/* フェードイン */
.js-fade-in {
  opacity: 0;
}

.js-fade-in.is-active {
  opacity: 1;
  -webkit-animation: fadeIn 1.5s;
  animation: fadeIn 1.5s;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
  }
}

/* 要素の動き */
.anime__swing01 {
  -webkit-animation: rattling01 6s step-start 0s infinite normal;
  animation: rattling01 6s step-start 0s infinite normal;
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
}

.anime__swing02 {
  -webkit-animation: rattling02 6s step-start 0s infinite normal;
  animation: rattling02 6s step-start 0s infinite normal;
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
}

.anime__rattling01 {
  -webkit-animation: rattling01 6s step-start 0s infinite normal;
  animation: rattling01 6s step-start 0s infinite normal;
}

.anime__rattling02 {
  -webkit-animation: rattling02 6s step-start 0s infinite normal;
  animation: rattling02 6s step-start 0s infinite normal;
}

/* カタカタ */
@-webkit-keyframes rattling01 {
  0% {
    -webkit-transform: translateY(-2px) rotate(6deg);
    transform: translateY(-2px) rotate(6deg);
  }
  10% {
    -webkit-transform: translate(0) rotate(0deg);
    transform: translate(0) rotate(0deg);
  }
  20% {
    -webkit-transform: translate(0) rotate(-6deg);
    transform: translate(0) rotate(-6deg);
  }
  30% {
    -webkit-transform: translateY(-2px) rotate(0deg);
    transform: translateY(-2px) rotate(0deg);
  }
  40% {
    -webkit-transform: translateY(-2px) rotate(6deg);
    transform: translateY(-2px) rotate(6deg);
  }
  50% {
    -webkit-transform: translate(2px) rotate(-2deg);
    transform: translate(2px) rotate(-2deg);
  }
  60% {
    -webkit-transform: translateY(2px) rotate(0deg);
    transform: translateY(2px) rotate(0deg);
  }
  70% {
    -webkit-transform: translate(0) rotate(6deg);
    transform: translate(0) rotate(6deg);
  }
  80% {
    -webkit-transform: translate(2px) rotate(-2deg);
    transform: translate(2px) rotate(-2deg);
  }
  90% {
    -webkit-transform: translate(0) rotate(0deg);
    transform: translate(0) rotate(0deg);
  }
  100% {
    -webkit-transform: translateY(-2px) rotate(6deg);
    transform: translateY(-2px) rotate(6deg);
  }
}

@keyframes rattling01 {
  0% {
    -webkit-transform: translateY(-2px) rotate(6deg);
    transform: translateY(-2px) rotate(6deg);
  }
  10% {
    -webkit-transform: translate(0) rotate(0deg);
    transform: translate(0) rotate(0deg);
  }
  20% {
    -webkit-transform: translate(0) rotate(-6deg);
    transform: translate(0) rotate(-6deg);
  }
  30% {
    -webkit-transform: translateY(-2px) rotate(0deg);
    transform: translateY(-2px) rotate(0deg);
  }
  40% {
    -webkit-transform: translateY(-2px) rotate(6deg);
    transform: translateY(-2px) rotate(6deg);
  }
  50% {
    -webkit-transform: translate(2px) rotate(-2deg);
    transform: translate(2px) rotate(-2deg);
  }
  60% {
    -webkit-transform: translateY(2px) rotate(0deg);
    transform: translateY(2px) rotate(0deg);
  }
  70% {
    -webkit-transform: translate(0) rotate(6deg);
    transform: translate(0) rotate(6deg);
  }
  80% {
    -webkit-transform: translate(2px) rotate(-2deg);
    transform: translate(2px) rotate(-2deg);
  }
  90% {
    -webkit-transform: translate(0) rotate(0deg);
    transform: translate(0) rotate(0deg);
  }
  100% {
    -webkit-transform: translateY(-2px) rotate(6deg);
    transform: translateY(-2px) rotate(6deg);
  }
}

/* カタカタ2 */
@-webkit-keyframes rattling02 {
  100% {
    -webkit-transform: translateY(-2px) rotate(6deg);
    transform: translateY(-2px) rotate(6deg);
  }
  90% {
    -webkit-transform: translate(0) rotate(0deg);
    transform: translate(0) rotate(0deg);
  }
  80% {
    -webkit-transform: translate(0) rotate(-6deg);
    transform: translate(0) rotate(-6deg);
  }
  70% {
    -webkit-transform: translateY(-2px) rotate(0deg);
    transform: translateY(-2px) rotate(0deg);
  }
  60% {
    -webkit-transform: translateY(-2px) rotate(6deg);
    transform: translateY(-2px) rotate(6deg);
  }
  50% {
    -webkit-transform: translate(2px) rotate(-2deg);
    transform: translate(2px) rotate(-2deg);
  }
  40% {
    -webkit-transform: translateY(2px) rotate(0deg);
    transform: translateY(2px) rotate(0deg);
  }
  30% {
    -webkit-transform: translate(0) rotate(6deg);
    transform: translate(0) rotate(6deg);
  }
  20% {
    -webkit-transform: translate(2px) rotate(-2deg);
    transform: translate(2px) rotate(-2deg);
  }
  10% {
    -webkit-transform: translate(0) rotate(0deg);
    transform: translate(0) rotate(0deg);
  }
  0% {
    -webkit-transform: translateY(-2px) rotate(6deg);
    transform: translateY(-2px) rotate(6deg);
  }
}

@keyframes rattling02 {
  100% {
    -webkit-transform: translateY(-2px) rotate(6deg);
    transform: translateY(-2px) rotate(6deg);
  }
  90% {
    -webkit-transform: translate(0) rotate(0deg);
    transform: translate(0) rotate(0deg);
  }
  80% {
    -webkit-transform: translate(0) rotate(-6deg);
    transform: translate(0) rotate(-6deg);
  }
  70% {
    -webkit-transform: translateY(-2px) rotate(0deg);
    transform: translateY(-2px) rotate(0deg);
  }
  60% {
    -webkit-transform: translateY(-2px) rotate(6deg);
    transform: translateY(-2px) rotate(6deg);
  }
  50% {
    -webkit-transform: translate(2px) rotate(-2deg);
    transform: translate(2px) rotate(-2deg);
  }
  40% {
    -webkit-transform: translateY(2px) rotate(0deg);
    transform: translateY(2px) rotate(0deg);
  }
  30% {
    -webkit-transform: translate(0) rotate(6deg);
    transform: translate(0) rotate(6deg);
  }
  20% {
    -webkit-transform: translate(2px) rotate(-2deg);
    transform: translate(2px) rotate(-2deg);
  }
  10% {
    -webkit-transform: translate(0) rotate(0deg);
    transform: translate(0) rotate(0deg);
  }
  0% {
    -webkit-transform: translateY(-2px) rotate(6deg);
    transform: translateY(-2px) rotate(6deg);
  }
}

/* ===========================================
 * MV
 * ======================================== */

/*TOP メインビジュアル*/
.mv {
  display: flex;
  height: auto;
  overflow: hidden;
  scrollbar-width: none;
  background-color: var(--c-bg-blue);
  position: relative;
}

.mv__inner {
  width: 100%;
  padding: 0 clamp(1rem, 0.719rem + 1.13vw, 1.563rem); /* 25-16 */
  height: 1000px;
  position: relative;
  z-index: 2;
}

.mv__content {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  padding-top: 180px;
}

.mv__catch {
  font-family: var(--ff-rounded-m);
  font-size: clamp(1.125rem, 0.813rem + 1.25vw, 1.75rem); /* 28-18 */
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--c-brown);
  text-align: center;
}

.mv__logo {
  max-width: clamp(20rem, 14.063rem + 23.75vw, 31.875rem); /* 510-320 */
  width: 100%;
  margin-inline: auto;
  margin-top: 40px;
}

.mv__text {
  font-family: var(--ff-rounded-m);
  font-size: clamp(0.938rem, 0.875rem + 0.25vw, 1.063rem); /* 17-15 */
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.8;
  margin-top: clamp(1.5rem, 1.25rem + 1vw, 2rem); /* 32-24 */
  text-align: center;
}

.mv__btn {
  margin-top: clamp(1.5rem, 0.688rem + 3.25vw, 3.125rem); /* 50-24 */
  margin-inline: auto;
}

.mv__cloud-bottom {
  position: absolute;
  bottom: 0;
}

@media screen and (max-width: 768px) {
  .mv__inner {
    height: auto;
  }

  .mv__content {
    margin-top: 40px;
    padding-top: 60px;
  }

  .mv__btn {
    margin-bottom: 50px;
  }
}

/*---------- あしらい（上） ----------*/

/* ブランコ */
.mv-deco-top__girl {
  position: absolute;
  z-index: 1;
}

.mv-deco-top__girl.-left {
  top: 50px;
  left: 0%;
  width: 238px;
}

.mv-deco-top__girl.-right {
  top: 70px;
  right: 5%;
  width: 88px;
}

/* 雲 */
.mv-deco-top__cloud {
  position: absolute;
  top: 0;
}

.mv-deco-top__cloud.-bg {
  width: 100%;
}

.mv-deco-top__cloud.-front {
  z-index: 2;
}

@media screen and (max-width: 1000px) {
  /* ブランコ */
  .mv-deco-top__girl.-left {
    left: 0%;
    width: 220px;
  }
  .mv-deco-top__girl.-right {
    right: 5%;
  }
}

/*---------- あしらい（下） ----------*/
.mv-deco-bottom {
  position: absolute;
  display: flex;
  justify-content: space-between;
  bottom: 0%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

/* 女の子 */
.mv-deco-bottom__girl {
  position: absolute;
  width: 74px;
  bottom: 0;
  right: 30%;
  z-index: -1;
}

/* スマホ */
.mv-deco-bottom__smartphone {
  position: absolute;
  width: 124px;
  bottom: 0;
  left: 30%;
  z-index: 3;
}

/* フラッグ */
.mv-deco-bottom__flag {
  position: absolute;
  z-index: 4;
  width: 140px;
  top: 12%;
}

.mv-deco-bottom__flag.-left {
  left: 21%;
}

.mv-deco-bottom__flag.-right {
  right: 21%;
}

/* 鳥 */
.mv-deco-bottom__bird {
  position: absolute;
  z-index: 4;
}

.mv-deco-bottom__bird.-left {
  width: 82px;
  top: -70%;
  left: 0;
}

.mv-deco-bottom__bird.-right {
  width: 118px;
  top: -100%;
  right: -6%;
}

/* PC */
.mv-deco-bottom__pc {
  position: relative;
  width: 355px;
}

.mv-deco-bottom__pc.-left {
  left: -118px;
  top: 17px;
}

.mv-deco-bottom__pc.-right {
  right: -118px;
  top: 17px;
}

.mv-deco-bottom__pc.-center {
  bottom: 0px;
}

.mv-deco-bottom__pc.-center > img {
  position: relative;
  z-index: 2;
}

@media screen and (max-width: 1000px) {
  /* 鳥 */
  .mv-deco-bottom__bird.-left {
    width: 50px;
    top: -50%;
    left: 20%;
  }

  .mv-deco-bottom__bird.-right {
    width: 90px;
    top: -40%;
    right: 20%;
  }
}

@media screen and (max-width: 768px) {
  .mv-deco-bottom {
    max-width: 450px;
    padding: 30px;
    margin: 0;
  }

  /* 女の子 */
  .mv-deco-bottom__girl {
    width: 80px;
    max-width: 20vw;
    right: 3%;
    z-index: -1;
  }

  /* スマホ */
  .mv-deco-bottom__smartphone {
    position: absolute;
    width: 120px;
    max-width: 25vw;
    left: 3%;
  }

  /* フラッグ */
  .mv-deco-bottom__flag {
    width: 100px;
    top: 24%;
  }

  .mv-deco-bottom__flag.-left {
    left: -5%;
  }
  .mv-deco-bottom__flag.-right {
    right: 0%;
  }

  /* 鳥 */
  .mv-deco-bottom__bird {
    width: 50px;
  }

  .mv-deco-bottom__bird.-left {
    left: 0%;
    top: -10%;
  }

  .mv-deco-bottom__pc.-center > img {
    width: 280px;
    max-width: 77vw;
  }
}

@media screen and (max-width: 768px) {
  .mv-deco-bottom {
    position: relative;
    max-width: 350px;
  }

  .mv-deco-bottom__pc.-center {
    width: 100%;
  }
}

@media screen and (max-width: 468px) {
  /* フラッグ */
  .mv-deco-bottom__flag {
    width: 23vw;
  }

  .mv-deco-bottom__flag.-left {
    left: -8%;
    width: 23vw;
  }

  .mv-deco-bottom__flag.-right {
    right: -8%;
    width: 23vw;
  }
}

/* ===========================================
 * イントロ
 * ======================================== */
.intro {
  padding-top: clamp(3.75rem, 2.5rem + 5vw, 6.25rem); /* 100-60 */
  position: relative;
  z-index: 2;
}

.intro__catch {
  font-family: var(--ff-rounded-m);
  font-size: clamp(1.375rem, 0.875rem + 2vw, 2.375rem); /* 38-22 */
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.2;
  color: var(--c-blue);
  text-align: center;
  padding-bottom: 16px;
  padding-left: 20px;
  position: relative;
  max-width: fit-content;
  margin-inline: auto;
}

.intro__catch::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 97%;
  height: 4px;
  background-image: url('data:image/svg+xml,<svg width="18" height="4" viewBox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="12" height="4" rx="2" fill="%23FFAD2B"/></svg>');
  background-repeat: repeat-x;
  background-size: 18px 4px;
}

.intro__content {
  display: flex;
  align-items: center;
  gap: 32px 52px;
  margin-top: clamp(2rem, 1.125rem + 3.5vw, 3.75rem); /* 60-32 */
}

.intro__text {
  font-size: clamp(1rem, 0.938rem + 0.25vw, 1.125rem); /* 18-16 */
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.8;
}

@media screen and (max-width: 1024px) {
  .intro__content {
    flex-direction: column-reverse;
  }

  .intro__catch {
    padding-left: 0;
    letter-spacing: 0.03em;
  }
}

/* ===========================================
 * ポイント
 * ======================================== */
.point {
  background-color: var(--c-bg-pink);
  padding-top: clamp(3.75rem, 2.5rem + 5vw, 6.25rem); /* 100-60 */
  padding-bottom: clamp(3.75rem, 2.5rem + 5vw, 6.25rem); /* 100-60 */
  margin-top: clamp(3.75rem, 2.5rem + 5vw, 6.25rem); /* 100-60 */
}

.point__heading {
  max-width: 950px;
  margin-inline: auto;
  padding-top: 40px;
  padding-bottom: 40px;
  position: relative;
}

.point__heading-content {
  position: relative;
  z-index: 1;
}

.point__heading::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--c-white);
  border-radius: 950px 950px 0 0 / 300px 300px 0 0;
}

.point__content {
  background-color: var(--c-white);
  margin-top: -40px;
  border-radius: 20px;
  padding: clamp(1.5rem, 0.688rem + 3.25vw, 3.125rem) clamp(1rem, -0.375rem + 5.5vw, 3.75rem); /* 50-24,60-16 */
  position: relative;
  z-index: 1;
}

.point__text {
  text-align: center;
  font-size: clamp(0.938rem, 0.906rem + 0.13vw, 1rem); /* 16-15 */
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.8;
}

.point-item {
  margin-top: clamp(2rem, 1.75rem + 1vw, 2.5rem); /* 40-32 */
}

/* イントロ */
.point-item-intro-wrap {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 16px 40px;
}

.point-item-intro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
}

.point-item-intro__bubble {
  display: block;
  max-width: fit-content;
  background-color: var(--c-gray);
  padding: clamp(1rem, 0.875rem + 0.5vw, 1.25rem) clamp(1rem, -0.333rem + 2.78vw, 1.75rem); /* 20-16,28-16 */
  border-radius: 10px;
  position: relative;
  font-size: clamp(0.875rem, 0.653rem + 0.46vw, 1rem); /* 16-14 */
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.5;
}

.point-item-intro__bubble::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  border-style: solid;
  border-width: 10px 0 10px 20px;
  border-color: transparent transparent transparent var(--c-gray);
  transform: translate(100%, -50%);
}

/* 各アイテム */
.point-item__content {
  background-color: var(--c-bg-yellow);
  border-radius: 10px;
  padding: clamp(1.25rem, 0.625rem + 2.5vw, 2.5rem); /* 40-20 */
  display: grid;
  grid-template-columns: 1fr 44%;
  align-items: center;
  gap: clamp(1.5rem, 1.25rem + 1vw, 2rem) 40px; /* 32-24 */
}

.point-item__content.-col1 {
  grid-template-columns: 1fr;
}

.point-item__heading {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.875rem + 0.5vw, 1.25rem); /* 20-16 */
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); /* 32-24 */
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
}

.point-item__text {
  margin-top: clamp(1rem, 0.75rem + 1vw, 1.5rem); /* 24-16 */
  font-size: clamp(1rem, 0.938rem + 0.25vw, 1.125rem); /* 18-16 */
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.8;
}

.point-item__content.-col1 .point-item__text {
  text-align: center;
}

.point-item__text em {
  font-weight: 700;
  color: var(--c-pink);
  font-style: normal;
}

.point-features-item {
  width: 100%;
  background-color: var(--c-white);
  border-radius: 10px;
  box-shadow: 4px 4px 4px #e6e2a6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 0.75rem + 1vw, 1.5rem); /* 24-16 */
  padding: 0 16px;
  height: 100px;
}

.point-features-item.-gap-sm {
  gap: clamp(0.375rem, 0.063rem + 1.25vw, 1rem); /* 16-6 */
}

.point-features-item + .point-features-item {
  margin-top: 12px;
}

.point-features-item__text {
  font-size: clamp(0.938rem, 0.906rem + 0.13vw, 1rem); /* 16-15 */
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5;
  text-align: center;
}

/* オプション */
.point-option {
  max-width: 710px;
  width: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px 28px;
}

.point-option-item {
  display: flex;
  flex-direction: column;
  filter: drop-shadow(4px 4px 4px #e6e2a6);
}

.point-option-item__heading {
  font-size: clamp(1.125rem, 1.063rem + 0.25vw, 1.25rem); /* 20-18 */
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
  color: var(--c-white);
  text-align: center;
  width: 100%;
  padding: 10px;
  border-radius: 8px 8px 0 0;
}

.point-option-item.-production .point-option-item__heading {
  background-color: var(--c-orange);
}

.point-option-item.-function .point-option-item__heading {
  background-color: var(--c-blue--light);
}

.point-option-item__body {
  padding: 20px clamp(1rem, 0.719rem + 1.13vw, 1.563rem); /* 25-16 */
  border-radius: 0 0 8px 8px;
  background-color: var(--c-white);
  display: flex;
  align-items: center;
  flex: 1;
}

.point-option-list {
  position: relative;
  width: 100%;
}

.point-option-list__item {
  font-size: clamp(0.938rem, 0.906rem + 0.13vw, 1rem); /* 16-15 */
  font-weight: 500;
  letter-spacing: 0;
  line-height: 2;
  text-indent: -1em;
  padding-left: 1em;
}

.point-option-list__item span {
  position: absolute;
  right: 0;
  bottom: 0;
}

.point-option-list__item::before {
  content: "・";
  font-weight: 700;
}

.point-pic > img {
  border-radius: 10px;
  filter: drop-shadow(4px 4px 4px #e6e2a6);
}

@media screen and (max-width: 1024px) {
  .point-item__content {
    grid-template-columns: 1fr;
  }

  .point-features-item {
    max-width: 440px;
    width: 100%;
    margin-inline: auto;
  }

  .point-pic {
    margin-inline: auto;
  }
}

@media screen and (max-width: 768px) {
  .point__heading::before {
    width: 105%;
  }

  .point-item-intro-wrap {
    flex-direction: column;
    align-items: center;
  }

  .point-item__heading svg {
    max-width: 60px;
  }

  .point__text {
    text-align: left;
    max-width: fit-content;
    margin-inline: auto;
  }

  .point-item-intro__bubble {
    letter-spacing: 0;
  }

  .point-item__content.-col1 .point-item__text {
    text-align: left;
    max-width: fit-content;
    margin-inline: auto;
  }

  .point-features-item {
    height: auto;
    padding: 12px;
  }

  .point-features-item__icon > img {
    width: auto;
    max-height: 52px;
  }

  .point-option {
    grid-template-columns: 1fr;
    max-width: 340px;
  }

  .point-item-intro__pic {
    flex-shrink: 0;
    max-width: 100px;
  }
}

/* ===========================================
 * 料金プラン
 * ======================================== */
.plan {
  padding-top: clamp(3.75rem, 2.5rem + 5vw, 6.25rem); /* 100-60 */
  position: relative;
}

.plan__flag-deco {
  position: absolute;
  top: 0;
}

.plan__flag-deco.-left {
  left: 0;
  transform: scale(-1, 1);
}

.plan__flag-deco.-right {
  right: 0;
}

.plan__intro {
  font-size: clamp(1rem, 0.938rem + 0.25vw, 1.125rem); /* 18-16 */
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.8;
  text-align: center;
  margin-top: clamp(2rem, 1.75rem + 1vw, 2.5rem); /* 40-32 */
}

.plan__wrap {
  margin-top: clamp(2rem, 1.75rem + 1vw, 2.5rem); /* 40-32 */
}

.plan__item-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 28px;
}

/* 色設定 */
.plan-item.-mini {
  --plan-color: var(--c-pink);
  --plan-bg: rgba(255, 137, 178, 0.2);
}

.plan-item.-basic {
  --plan-color: var(--c-orange);
  --plan-bg: rgba(255, 173, 43, 0.2);
}

.plan-item.-order-made {
  --plan-color: var(--c-blue--light);
  --plan-bg: rgba(101, 173, 235, 0.2);
}

.plan-item {
  position: relative;
  max-width: 380px;
  width: 100%;
  margin-inline: auto;
}

.plan-item__badge {
  max-width: clamp(3.75rem, 3.344rem + 1.63vw, 4.563rem); /* 73-60 */
  position: absolute;
  right: 16px;
  top: -24px;
}

.plan-item__heading-wrap {
  background-color: var(--plan-color);
  padding: 24px clamp(1rem, 0.875rem + 0.5vw, 1.25rem); /* 20-16 */
  border-radius: 8px 8px 0 0;
}

.plan-item__heading {
  font-size: clamp(1.75rem, 1.625rem + 0.5vw, 2rem); /* 32-28 */
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1;
  color: var(--c-white);
  text-align: center;
}

.plan-item__text {
  font-size: clamp(0.938rem, 0.875rem + 0.25vw, 1.063rem); /* 17-15 */
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.4;
  text-align: center;
  color: var(--c-white);
  margin-top: 20px;
}

.plan-item__body {
  border: solid 2px var(--plan-color);
  border-radius: 0 0 8px 8px;
  padding-bottom: 28px;
  overflow: hidden;
}

.plan-item__price {
  color: var(--plan-color);
  text-align: center;
  margin-top: 28px;
  font-family: var(--ff-rounded-m);
  font-size: clamp(2.5rem, 2.25rem + 1vw, 3rem); /* 48-40 */
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1;
}

.plan-item__price .unit {
  font-size: clamp(1.5rem, 1.375rem + 0.5vw, 1.75rem); /* 28-24 */
}

.plan-item__price .tax {
  font-size: clamp(1.125rem, 1.063rem + 0.25vw, 1.25rem); /* 20-18 */
  font-weight: 700;
}

/* アコーディオン */
.plan-item-acc {
  display: flex;
  flex-direction: column;
  max-height: 0;
}

.plan-item-acc.is-open {
  max-height: none;
}

.plan-item-acc__body {
  padding: 26px 0;
}

.plan__acc-btn {
  display: block;
  position: relative;
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  margin-top: 20px;
  font-size: clamp(0.938rem, 0.906rem + 0.13vw, 1rem); /* 16-15 */
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--c-white);
  background-color: var(--c-blue);
  text-align: center;
  padding: 20px 16px 16px;
  border: solid 1px var(--c-blue);
  border-radius: 4px;
  transition: background-color 0.2s, color 0.2s;
}

.plan__acc-btn:hover {
  background-color: var(--c-white);
  color: var(--c-blue);
}

.plan__acc-btn[aria-expanded="true"] {
  color: var(--c-blue);
  background-color: var(--c-white);
}

.plan__acc-btn-text {
  position: relative;
}

.plan__acc-btn-text::after {
  content: "";
  position: absolute;
  right: 0;
  display: block;
  mask: url('data:image/svg+xml,<svg width="13" height="8" viewBox="0 0 13 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.24417 7.06899C6.93678 7.32778 6.48315 7.30897 6.1966 7.01325L0.979161 1.62868C0.67353 1.31326 0.673531 0.801986 0.979161 0.486566C1.28479 0.171145 1.7802 0.171145 2.08583 0.486566L6.74994 5.30007L11.414 0.486567C11.7197 0.171146 12.2151 0.171146 12.5207 0.486567C12.8263 0.801987 12.8263 1.31326 12.5207 1.62868L7.30327 7.01325L7.24417 7.06899Z" fill="white"/></svg>');
  mask-size: contain;
  mask-repeat: no-repeat;
  background-color: var(--c-white);
  width: 12px;
  aspect-ratio: 12/7;
  top: 50%;
  right: -22px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transition: background-color 0.2s;
}

.plan__acc-btn:hover .plan__acc-btn-text::after {
  background-color: var(--c-blue);
}

.plan__acc-btn[aria-expanded="true"] .plan__acc-btn-text::after {
  background-color: var(--c-blue);
  transform: translateY(-50%) scale(1, -1);
  -webkit-transform: translateY(-50%) scale(1, -1);
  -ms-transform: translateY(-50%) scale(1, -1);
}

.plan-item-list {
  padding: 0 17px;
}

.plan-item-list__item {
  font-size: clamp(0.938rem, 0.906rem + 0.13vw, 1rem); /* 16-15 */
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  display: grid;
  grid-template-columns: 17px 1fr;
  align-items: center;
  gap: 10px;
}

.plan-item-list__item + .plan-item-list__item {
  margin-top: 8px;
}

.plan-item-list__item:not(.-none)::before {
  content: "";
  background-image: url('data:image/svg+xml,<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.31 10.03L5.4825 8.2025C5.32667 8.04667 5.12834 7.96875 4.8875 7.96875C4.64667 7.96875 4.44834 8.04667 4.2925 8.2025C4.13667 8.35833 4.05875 8.55667 4.05875 8.7975C4.05875 9.03834 4.13667 9.23667 4.2925 9.3925L6.715 11.815C6.885 11.985 7.08334 12.07 7.31 12.07C7.53667 12.07 7.735 11.985 7.905 11.815L12.7075 7.0125C12.8633 6.85667 12.9413 6.65833 12.9413 6.4175C12.9413 6.17667 12.8633 5.97833 12.7075 5.8225C12.5517 5.66667 12.3533 5.58875 12.1125 5.58875C11.8717 5.58875 11.6733 5.66667 11.5175 5.8225L7.31 10.03ZM8.5 17C7.32417 17 6.21917 16.7767 5.185 16.3302C4.15084 15.8837 3.25125 15.2782 2.48625 14.5138C1.72125 13.7493 1.11577 12.8497 0.669801 11.815C0.223835 10.7803 0.000567743 9.67527 1.07595e-06 8.5C-0.000565591 7.32473 0.222701 6.21973 0.669801 5.185C1.1169 4.15027 1.72238 3.25068 2.48625 2.48625C3.25012 1.72182 4.1497 1.11633 5.185 0.6698C6.2203 0.223267 7.3253 0 8.5 0C9.6747 0 10.7797 0.223267 11.815 0.6698C12.8503 1.11633 13.7499 1.72182 14.5138 2.48625C15.2776 3.25068 15.8834 4.15027 16.3311 5.185C16.7787 6.21973 17.0017 7.32473 17 8.5C16.9983 9.67527 16.775 10.7803 16.3302 11.815C15.8854 12.8497 15.2799 13.7493 14.5138 14.5138C13.7476 15.2782 12.848 15.884 11.815 16.3311C10.782 16.7782 9.67697 17.0011 8.5 17Z" fill="%2373D47A"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  width: 17px;
  aspect-ratio: 1;
}

.plan-item-list__item.-none {
  color: #d9d9d9;
}

.plan-item-list__item.-none::before {
  content: "";
  background-image: url('data:image/svg+xml,<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 18C14.1946 18 18 14.1946 18 9.5C18 4.80545 14.1946 1 9.5 1C4.80545 1 1 4.80545 1 9.5C1 14.1946 4.80545 18 9.5 18ZM12.9561 6.0439C13.0755 6.16343 13.1425 6.32546 13.1425 6.4944C13.1425 6.66334 13.0755 6.82537 12.9561 6.9449L10.401 9.5L12.9553 12.0543C13.0679 12.1751 13.1292 12.3349 13.1262 12.5001C13.1233 12.6653 13.0564 12.8228 12.9396 12.9396C12.8228 13.0564 12.6653 13.1233 12.5001 13.1262C12.3349 13.1292 12.1751 13.0679 12.0543 12.9553L9.5 10.4027L6.94575 12.957C6.88739 13.0196 6.81701 13.0698 6.73881 13.1047C6.66061 13.1395 6.57619 13.1582 6.49059 13.1598C6.405 13.1613 6.31997 13.1455 6.24059 13.1135C6.16121 13.0814 6.0891 13.0337 6.02857 12.9731C5.96803 12.9126 5.92031 12.8405 5.88825 12.7611C5.85618 12.6817 5.84044 12.5967 5.84195 12.5111C5.84346 12.4255 5.86219 12.3411 5.89704 12.2629C5.93188 12.1847 5.98212 12.1143 6.04475 12.056L8.5973 9.5L6.0439 6.94575C5.98127 6.88739 5.93103 6.81701 5.89619 6.73881C5.86134 6.66061 5.84261 6.57619 5.8411 6.49059C5.83959 6.405 5.85533 6.31997 5.8874 6.24059C5.91946 6.16121 5.96718 6.0891 6.02772 6.02857C6.08825 5.96803 6.16036 5.92031 6.23974 5.88825C6.31912 5.85618 6.40415 5.84044 6.48974 5.84195C6.57534 5.84346 6.65976 5.86219 6.73796 5.89704C6.81616 5.93188 6.88654 5.98212 6.9449 6.04475L9.5 8.5973L12.0543 6.04305C12.1738 5.92367 12.3358 5.85661 12.5048 5.85661C12.6737 5.85661 12.8357 5.92367 12.9553 6.04305" fill="%23D9D9D9"/><path d="M9.5 0.5C14.4707 0.5 18.5 4.52931 18.5 9.5C18.5 14.4707 14.4707 18.5 9.5 18.5C4.52931 18.5 0.5 14.4707 0.5 9.5C0.5 4.52931 4.52931 0.5 9.5 0.5ZM9.5 1C4.80545 1 1 4.80545 1 9.5C1 14.1946 4.80545 18 9.5 18C14.1946 18 18 14.1946 18 9.5C18 4.80545 14.1946 1 9.5 1ZM6.48926 5.8418C6.57486 5.84331 6.66008 5.86262 6.73828 5.89746C6.81631 5.9323 6.88706 5.9824 6.94531 6.04492L9.5 8.59766L12.0547 6.04297C12.1742 5.92375 12.3361 5.85645 12.5049 5.85645C12.6737 5.85648 12.8356 5.9237 12.9551 6.04297L12.6016 6.39648C12.5758 6.37098 12.5411 6.35648 12.5049 6.35645C12.4687 6.35645 12.4339 6.37103 12.4082 6.39648L9.5 9.30469L6.5918 6.39844L6.58496 6.39258L6.5791 6.38574C6.56651 6.37223 6.55105 6.36103 6.53418 6.35352C6.5174 6.34609 6.49881 6.34212 6.48047 6.3418C6.46216 6.34153 6.44374 6.3447 6.42676 6.35156C6.40968 6.35848 6.39389 6.36881 6.38086 6.38184C6.36783 6.39488 6.35749 6.41064 6.35059 6.42773C6.34372 6.44474 6.34054 6.46311 6.34082 6.48145C6.34114 6.49981 6.3451 6.51836 6.35254 6.53516L6.38477 6.58008L6.3916 6.58594L8.95117 9.14648L9.30371 9.5L6.39844 12.4092L6.39258 12.416L6.38574 12.4219C6.37223 12.4345 6.36103 12.4499 6.35352 12.4668C6.34617 12.4834 6.34217 12.5014 6.3418 12.5195C6.34147 12.538 6.34465 12.5571 6.35156 12.5742C6.35841 12.5911 6.36901 12.6062 6.38184 12.6191C6.39483 12.6321 6.41071 12.6425 6.42773 12.6494C6.44475 12.6563 6.46309 12.6604 6.48145 12.6602C6.4998 12.6598 6.51838 12.6559 6.53516 12.6484C6.55202 12.6409 6.56749 12.6297 6.58008 12.6162L6.58594 12.6094L9.5 9.69531L12.3955 12.5898L12.4395 12.6172C12.4558 12.6235 12.4734 12.6263 12.4912 12.626C12.5268 12.6253 12.5607 12.6111 12.5859 12.5859C12.6111 12.5607 12.6253 12.5268 12.626 12.4912C12.6266 12.4565 12.6139 12.4233 12.5908 12.3975L9.69434 9.5L12.6025 6.5918L12.6318 6.54688C12.6387 6.53036 12.6426 6.51236 12.6426 6.49414C12.6425 6.4579 12.6281 6.42316 12.6025 6.39746L12.9551 6.04297L13.0352 6.14062C13.1045 6.24456 13.1425 6.36735 13.1426 6.49414C13.1426 6.66308 13.0754 6.82578 12.9561 6.94531L10.4014 9.5L12.9551 12.0547C13.0676 12.1755 13.1289 12.3349 13.126 12.5C13.1231 12.6652 13.0563 12.8227 12.9395 12.9395C12.8227 13.0563 12.6652 13.1231 12.5 13.126C12.3349 13.1289 12.1755 13.0676 12.0547 12.9551L9.5 10.4023L6.94531 12.957C6.88711 13.0194 6.81717 13.0697 6.73926 13.1045C6.66106 13.1393 6.57583 13.1586 6.49023 13.1602C6.40476 13.1616 6.3195 13.1453 6.24023 13.1133C6.161 13.0812 6.08876 13.0331 6.02832 12.9727C5.96796 12.9122 5.92067 12.84 5.88867 12.7607C5.85665 12.6814 5.84029 12.5963 5.8418 12.5107C5.84335 12.4253 5.86267 12.3408 5.89746 12.2627C5.9323 12.1846 5.98237 12.1139 6.04492 12.0557L8.59766 9.5L6.04395 6.94531C5.98153 6.88711 5.93128 6.81718 5.89648 6.73926C5.86164 6.66106 5.84233 6.57583 5.84082 6.49023C5.83936 6.40476 5.85568 6.3195 5.8877 6.24023C5.91975 6.16104 5.96694 6.08874 6.02734 6.02832C6.08774 5.96793 6.1601 5.92073 6.23926 5.88867C6.31849 5.85667 6.40383 5.84036 6.48926 5.8418Z" fill="white"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  width: 17px;
  aspect-ratio: 1;
}

.plan-item-features {
  margin-top: 24px;
  padding: 24px 28px;
  background-color: var(--plan-bg);
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.plan-item-features__heading {
  font-size: clamp(0.938rem, 0.906rem + 0.13vw, 1rem); /* 16-15 */
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.5;
}

.plan-item-features-list {
  margin-top: 8px;
}

.plan-item-features-list__item {
  font-size: clamp(0.938rem, 0.906rem + 0.13vw, 1rem); /* 16-15 */
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  text-indent: -1em;
  padding-left: 1em;
}

.plan-item-features-list__item + .plan-item-features-list__item {
  margin-top: 8px;
}

.plan-item-features-list__item::before {
  content: "";
  display: inline-block;
  width: 10px;
  aspect-ratio: 1;
  background-color: #333333;
  border-radius: 50%;
  margin-right: 6px;
}

.plan-item__note {
  display: block;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  margin-top: 28px;
  padding: 0 24px;
  text-indent: -1em;
  padding-left: calc(24px + 1em);
}

.plan-item__note::before {
  content: "※";
}

.plan__add-icon {
  display: block;
  max-width: fit-content;
  margin: 40px 0 62px;
  margin-inline: auto;
}

.plan-detail-item {
  padding: clamp(2.75rem, 2.25rem + 2vw, 3.75rem) clamp(1rem, -0.375rem + 5.5vw, 3.75rem) clamp(1.5rem, 0.688rem + 3.25vw, 3.125rem); /* 60-44,60-16,50-24 */
  border: solid 1px #604c3f;
  border-radius: 20px;
  position: relative;
}

.plan-detail-item + .plan-detail-item {
  margin-top: clamp(3.75rem, 3.125rem + 2.5vw, 5rem); /* 80-60 */
}

.plan-detail-item.-option .plan-detail-item__heading {
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); /* 36-28 */
}

.plan-detail-item__heading {
  padding: 0 clamp(1rem, 0.25rem + 3vw, 2.5rem); /* 40-16 */
  background-color: var(--c-white);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  white-space: nowrap;
}

.plan-detail-item__heading {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); /* 28-20 */
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1;
  color: #604c3f;
}

.plan-detail-item__heading .price {
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem); /* 48-32 */
  margin-left: 12px;
}

.plan-detail-item__heading .tax {
  font-size: 20px;
}

.plan-detail-item__intro {
  font-size: clamp(0.938rem, 0.906rem + 0.13vw, 1rem); /* 16-15 */
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.8;
}

.plan-detail-item__body {
  display: flex;
  justify-content: center;
  gap: 16px 28px;
  margin-top: 28px;
}

.plan-detail-content__note-wrap {
  margin-top: 12px;
}

/* 色設定 */
.plan-detail-content.-management {
  --item-color: var(--c-blue--light);
}

.plan-detail-content.-update {
  --item-color: var(--c-pink);
}

.plan-detail-content.-option {
  --item-color: var(--c-orange);
}

.plan-detail-content.-other-option {
  --item-color: var(--c-blue);
}

.plan-detail-content {
  display: flex;
  flex-direction: column;
}

.plan-detail-content__heading {
  background-color: var(--item-color);
  padding: 12px 20px 10px;
  color: var(--c-white);
  font-family: var(--ff-default);
  font-size: clamp(1.125rem, 1.063rem + 0.25vw, 1.25rem); /* 20-18 */
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
  border-radius: 8px 8px 0 0;
  text-align: center;
}

.plan-detail-content__body {
  padding: 20px;
  border: solid 2px var(--item-color);
  border-radius: 0 0 8px 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.plan-detail-content.-other-option .plan-detail-content__body {
  padding: 20px 38px;
}

.plan-detail-item__add-icon {
  align-self: center;
}

.plan-detail-content-list-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

.plan-detail-content-list__item {
  font-size: clamp(0.938rem, 0.906rem + 0.13vw, 1rem); /* 16-15 */
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.6;
  display: block;
  text-indent: -1em;
  padding-left: 1em;
}

.plan-detail-content-list__item + .plan-detail-content-list__item {
  margin-top: 4px;
}

.plan-detail-content-list__item::before {
  content: "";
  display: inline-block;
  width: 4px;
  aspect-ratio: 1;
  background-color: #333;
  border-radius: 50%;
  margin-right: 8px;
  margin-bottom: 3px;
}

.plan-detail-content-list__item .supplement {
  font-size: 12px;
}

.plan-detail-content__note {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.6;
  display: block;
  text-indent: -1em;
  padding-left: 1em;
}

.plan-detail-content__note + .plan-detail-content__note {
  margin-top: 4px;
}

.plan-detail-content__note::before {
  content: "※";
}

.plan-detail__note {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.8;
  margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem); /* 28-20 */
  display: flex;
  justify-content: flex-end;
}

.plan-detail__note::before {
  content: "※";
}

.plan-detail-content-list__etc {
  font-size: clamp(0.938rem, 0.906rem + 0.13vw, 1rem); /* 16-15 */
  font-weight: 400;
  letter-spacing: 0;
  line-height: 2;
  display: flex;
  justify-content: flex-end;
}

@media screen and (max-width: 1024px) {
  .plan__wrap {
    justify-content: center;
  }

  .plan-item {
    margin-inline: auto;
  }

  .plan-detail-content {
    max-width: fit-content;
  }

  .plan-detail-content.-other-option {
    max-width: 554px;
    width: 100%;
  }

  .plan-detail-item__body {
    flex-direction: column;
    align-items: center;
  }

  .plan-detail-content.-other-option .plan-detail-content__body {
    padding: 20px;
  }

  .plan-detail-item__heading {
    white-space: nowrap;
  }

  .plan__acc-btn {
    max-width: 320px;
  }
}

@media screen and (max-width: 768px) {
  .plan__intro {
    max-width: fit-content;
    margin-inline: auto;
    text-align: left;
  }

  .plan__flag-deco {
    max-width: 160px;
  }

  .plan-item {
    max-width: 320px;
  }

  .plan__add-icon {
    max-width: 32px;
  }

  .plan-detail-item.-maintenance .plan-detail-item__heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .plan-detail-item__heading {
    text-align: center;
  }

  .plan-detail-item__add-icon {
    max-width: 32px;
  }
}

/* ===========================================
 * 制作事例
 * ======================================== */
.works {
  background-color: var(--c-bg-pink);
  padding-bottom: clamp(6.25rem, 1.875rem + 17.5vw, 15rem); /* 240-100 */
  position: relative;
  margin-top: clamp(6.25rem, 2.5rem + 15vw, 13.75rem); /* 220-140 */
}

.works::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-35%);
  -webkit-transform: translateX(-50%) translateY(-35%);
  -ms-transform: translateX(-50%) translateY(-35%);
  width: 110%;
  height: clamp(9.375rem, -1.736rem + 23.15vw, 15.625rem); /* 250-150 */
  border-radius: 50% 50% 0 0;
  background-color: inherit;
  z-index: 0;
}

.works__inner {
  position: relative;
  z-index: 1;
}

.works__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(2rem, 1.5rem + 2vw, 3rem) 30px; /* 48-32 */
  margin-top: 40px;
}

.works-item__heading {
  font-size: clamp(1.125rem, 0.903rem + 0.46vw, 1.25rem); /* 20-18 */
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 12px;
}

.honorific-title {
  font-size: 14px;
}

.works-item__thumb {
  margin-top: clamp(1rem, 0.875rem + 0.5vw, 1.25rem); /* 20-16 */
  text-align: center;
}

.works-item-cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin-top: -1em;
}

.works-item-cats__item {
  font-family: var(--ff-rounded-m);
  font-size: clamp(0.938rem, 0.906rem + 0.13vw, 1rem); /* 16-15 */
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  border-radius: calc(1px / 0);
  color: var(--c-white);
  padding: 8px 16px;
}

.works-item-cats__item.-order-made {
  background-color: var(--c-blue--light);
}

.works-item-cats__item.-pamphlet,
.works-item-cats__item.-logo {
  background-color: var(--c-blue);
}

.works-item-cats__item.-basic {
  background-color: var(--c-orange);
}

.works-item__text {
  margin-top: 20px;
  font-family: var(--ff-rounded-m);
  font-size: clamp(0.938rem, 0.906rem + 0.13vw, 1rem); /* 16-15 */
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
}

.works__cloud-boundary {
  position: absolute;
  bottom: 0;
}

/* ===========================================
 * お客さまの声
 * ======================================== */

.voice {
  margin-top: 80px;
  background-color: var(--c-white);
  border-radius: 20px;
  border: solid 1px #604c3f;
  padding: clamp(2.5rem, 1.875rem + 2.5vw, 3.75rem) 0 clamp(2rem, 1.75rem + 1vw, 2.5rem); /* 60-40,0, 40-32*/
  position: relative;
}

.voice__inner {
  padding: 0 clamp(1rem, -1.667rem + 5.56vw, 2.5rem); /* 40-16 */
}

.voice__heading {
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); /* 36-28 */
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1;
  color: #604c3f;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  padding: 0 clamp(1.25rem, -0.972rem + 4.63vw, 2.5rem); /* 40-20 */
  background: linear-gradient(180deg, var(--c-bg-pink) 0%, var(--c-bg-pink) 50%, var(--c-white) 50%, var(--c-white) 100%);
  white-space: nowrap;
}

.voice-item {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(1.125rem, 0.236rem + 1.85vw, 1.625rem); /* 26-18 */
}

.voice-item + .voice-item {
  margin-top: 28px;
}

.voice-item__bubble {
  position: relative;
  display: inline-block;
  margin-left: 20px;
  padding: 20px 28px;
  border-radius: 8px;
  background-color: var(--c-bg-yellow);
}

.voice-item:nth-child(even) {
  flex-direction: row-reverse;
}

.voice-item__bubble::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  border-style: solid;
  border-width: 10px 20px 10px 0;
  border-color: transparent var(--c-bg-yellow) transparent transparent;
  transform: translate(-100%, -50%);
}

.voice-item:nth-child(odd) .voice-item__bubble::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  border-style: solid;
  border-width: 10px 0 10px 20px;
  border-color: transparent transparent transparent var(--c-bg-yellow);
  transform: translate(100%, -50%);
}

.voice-item__heading {
  font-family: var(--ff-default);
  font-size: clamp(1.125rem, 1.063rem + 0.25vw, 1.25rem); /* 20-18 */
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.5;
}

.voice-item__text {
  font-size: clamp(0.938rem, 0.906rem + 0.13vw, 1rem); /* 16-15 */
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.5;
  margin-top: 8px;
}

@media screen and (max-width: 768px) {
  .voice-item:nth-child(even) {
    flex-direction: column;
    align-items: start;
  }

  .voice-item {
    flex-direction: column;
  }

  .voice-item__bubble {
    margin: 0;
  }

  .voice-item__bubble::after {
    content: none;
  }

  .voice-item__pic {
    display: none;
  }
}

/* ===========================================
 * 制作の流れ
 * ======================================== */
.flow__content {
  margin-top: clamp(2rem, 1.75rem + 1vw, 2.5rem); /* 40-32 */
}

.flow-item {
  display: grid;
  grid-template-columns: 31% 1fr;
  align-items: center;
  border-radius: 8px;
  border: solid 1px var(--c-pink);
  overflow: hidden;
}

.flow-item + .flow-item {
  margin-top: 20px;
}

.flow-item-heading {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
}

.flow-item-heading__num {
  background-color: var(--c-pink);
  color: var(--c-white);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  display: grid;
  place-content: center;
  aspect-ratio: 1;
}

.flow-item-heading__text {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
}

.flow-item__body {
  font-size: clamp(0.938rem, 0.906rem + 0.13vw, 1rem); /* 16-15 */
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.7;
}

@media screen and (max-width: 1024px) {
  .flow__content {
    max-width: 600px;
    margin-inline: auto;
  }

  .flow-item {
    grid-template-columns: 1fr;
  }

  .flow-item-heading {
    background-color: var(--c-pink);
  }

  .flow-item-heading__text {
    color: var(--c-white);
    margin-right: 60px;
  }

  .flow-item-heading__num {
    aspect-ratio: auto;
    padding: 10px 0;
  }

  .flow-item__body {
    padding: 24px;
  }
}

/* ===========================================
 * よくある質問
 * ======================================== */
.faq {
  padding-top: clamp(3.75rem, 2.5rem + 5vw, 6.25rem); /* 100-60 */
  padding-bottom: clamp(6.25rem, 4.375rem + 7.5vw, 10rem); /* 160-100 */
  background-color: var(--c-bg-pink);
  margin-top: clamp(3.75rem, 2.5rem + 5vw, 6.25rem); /* 100-60 */
}

.faq__content {
  margin-top: clamp(2rem, 1.75rem + 1vw, 2.5rem); /* 40-32 */
}

.faq-item {
  background-color: var(--c-white);
  border-radius: 10px;
  cursor: pointer;
}

.faq-item + .faq-item {
  margin-top: clamp(1rem, 0.875rem + 0.5vw, 1.25rem); /* 20-16 */
}

.faq-item__num {
  font-family: var(--ff-rounded-m);
  font-size: clamp(1.25rem, 1.125rem + 0.5vw, 1.5rem); /* 24-20 */
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--c-orange);
}

.faq-item__heading {
  list-style: none;
  display: grid;
  grid-template-columns: auto 1fr 21px;
  align-items: center;
  gap: clamp(0.75rem, 0.625rem + 0.5vw, 1rem); /* 16-12 */
  font-size: clamp(0.938rem, 0.906rem + 0.13vw, 1rem); /* 16-15 */
  font-weight: 400;
  letter-spacing: 0;
  padding: clamp(0.75rem, 0.625rem + 0.5vw, 1rem) clamp(1.25rem, 1rem + 1vw, 1.75rem); /* 16-12, 28-20 */
  line-height: 1.5;
}

.faq-item__heading::after {
  content: "";
  background-image: url('data:image/svg+xml,<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.5 20C12.5 20.8284 11.8284 21.5 11 21.5C10.1716 21.5 9.5 20.8284 9.5 20L9.5 2C9.5 1.17157 10.1716 0.5 11 0.5C11.8284 0.5 12.5 1.17157 12.5 2L12.5 20Z" fill="%23FFAD2B"/><path d="M20 9.5C20.8284 9.5 21.5 10.1716 21.5 11C21.5 11.8284 20.8284 12.5 20 12.5H2C1.17157 12.5 0.5 11.8284 0.5 11C0.5 10.1716 1.17157 9.5 2 9.5H20Z" fill="%23FFAD2B"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  width: 21px;
  aspect-ratio: 1;
}

.faq-item[open] .faq-item__heading::after {
  background-image: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_580_789" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="21" height="21"><rect width="21" height="21" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_580_789)"><path d="M19.5 9C20.3284 9 21 9.67157 21 10.5C21 11.3284 20.3284 12 19.5 12H1.5C0.671573 12 0 11.3284 0 10.5C0 9.67157 0.671573 9 1.5 9H19.5Z" fill="%23FFAD2B"/></g></svg>');
}

.faq-item__heading::-webkit-details-marker {
  display: none;
}

.faq-item__body {
  margin-top: 16px;
  display: flex;
  align-items: start;
  gap: 8px 20px;
  padding-bottom: clamp(0.75rem, 0.625rem + 0.5vw, 1rem); /* 16-12 */
  padding-left: clamp(1.25rem, 1rem + 1vw, 1.75rem); /* 28-20 */
  padding-right: 30px;
}

.faq-item__text {
  font-size: clamp(0.938rem, 0.906rem + 0.13vw, 1rem); /* 16-15 */
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
}

.faq-item-list__item {
  font-size: clamp(0.938rem, 0.906rem + 0.13vw, 1rem); /* 16-15 */
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  display: block;
  text-indent: -1em;
  padding-left: 1em;
}

.faq-item-list__item::before {
  content: "・";
}

.faq-item__note {
  font-size: clamp(0.938rem, 0.906rem + 0.13vw, 1rem); /* 16-15 */
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
}

.faq-item__note::before {
  content: "※";
}

@media screen and (max-width: 768px) {
  .faq-item__body {
    flex-direction: column;
    padding-right: clamp(1.25rem, 1rem + 1vw, 1.75rem); /* 28-20 */
  }
}

/* ===========================================
 * フッター
 * ======================================== */

.footer {
  background-color: var(--c-orange);
  padding: 34px 0;
  position: relative;
}

.footer__deco {
  position: absolute;
  top: 0;
}

.footer__deco.-girl {
  left: 72px;
  bottom: 0;
  transform: translateY(-83%);
}

.footer__deco.-rainbow {
  right: 0;
  transform: translateY(-100%);
}

.footer__inner {
  padding: 0 40px;
}

.footer__logo {
  text-align: center;
  margin-top: 24px;
}

.footer-sns-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.footer__copyright {
  display: block;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--c-white);
  text-align: center;
  margin-top: 30px;
}

@media screen and (max-width: 1024px) {
  .footer__deco.-girl {
    left: clamp(1rem, -0.75rem + 7vw, 4.5rem); /* 72-16 */
    max-width: clamp(9.375rem, 6.75rem + 10.5vw, 14.625rem); /* 234-150 */
  }

  .footer__deco.-rainbow {
    max-width: clamp(7.5rem, 0.875rem + 26.5vw, 20.75rem); /* 332-120 */
  }
}

/* ===========================================
 * ページトップボタン
 * ======================================== */

.page-top {
  opacity: 0;
  position: fixed;
  right: 45px;
  bottom: 8%;
  max-width: 128px;
  z-index: 99;
  transition: opacity 0.2s;
}

.page-top.is-visible {
  opacity: 1;
}

@media screen and (max-width: 768px) {
  .page-top {
    right: 12px;
    max-width: 80px;
    bottom: 6%;
  }
}