@font-face {
  font-family: 'DelaGothicOne';
  src: url('../fonts/DelaGothicOne-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'ZenMaruGothic';
  src: url('../fonts/ZenMaruGothic-Light.ttf') format('truetype');
  font-weight: 300;
}

@font-face {
  font-family: 'ZenMaruGothic';
  src: url('../fonts/ZenMaruGothic-Regular.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'ZenMaruGothic';
  src: url('../fonts/ZenMaruGothic-Medium.ttf') format('truetype');
  font-weight: 500;
}

@font-face {
  font-family: 'ZenMaruGothic';
  src: url('../fonts/ZenMaruGothic-Bold.ttf') format('truetype');
  font-weight: 700;
}

@font-face {
  font-family: 'ZenMaruGothic';
  src: url('../fonts/ZenMaruGothic-Black.ttf') format('truetype');
  font-weight: 900;
}

html {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* 全体をラップするコンテナ */
.page-wrapper {
  width: 100%;
  margin: 0;
  padding: 0;
  transform-origin: top center;
  position: relative;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: Arial, sans-serif;
  min-height: 100vh;
  background: url('../images/backgrounds/bg.png') no-repeat center center;
  background-size: 100% 100%;
  background-attachment: fixed;
  position: relative;
}

/* .logo-banner {
  position: absolute;
  top: 1.67vw;
  right: 1.67vw;
  height: 5vw;
  z-index: 9999;
  width: auto;
} */
.logo-banner {
  position: absolute;
  top: 0;
  /* Y0 */
  left: 72.22vw;
  /* X1040: 1040px ÷ 1440 × 100 = 72.22vw */
  width: 27.78vw;
  /* 幅400: 400px ÷ 1440 × 100 = 27.78vw */
  height: 6.94vw;
  /* 高100: 100px ÷ 1440 × 100 = 6.94vw */
  z-index: 9999;
  transform: none;
  transform-origin: none;
}

.layer-container {
  position: relative;
  width: 100%;
  height: 67vw;
  min-height: auto;
  margin: 0;
  padding: 0;
}

.layer {
  position: absolute;
  opacity: 0;
  transition: opacity 1s ease;
}

#overlay {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100vw;
  height: auto;
  object-fit: contain;
  object-position: center;
}

#text {
  top: 28.5vw;
  left: 50vw;
  transform: translate(-50%, -50%) translateY(-2vw);
  z-index: 2;
  width: 80%;
  color: white;
  text-align: center;
  line-height: 1.2;
  font-family: 'DelaGothicOne', sans-serif;
}

#button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#text .main-title {
  font-size: 11.11vw;
  color: #f53c20;
  font-weight: 900;
  font-family: 'ZenMaruGothic', sans-serif;
  text-align: center;
  position: relative;
  display: inline-block;
}

#text .main-title .small-text {
  position: absolute;
  top: 1px;
  font-size: 1.67vw;
  color: red;
  font-family: 'ZenMaruGothic', sans-serif;
  font-weight: 900;
}

#text .main-title .small-text.left {
  left: 31%;
  transform: translateX(-50%);
}

#text .main-title .small-text.right {
  left: 57.5%;
  transform: translateX(-50%);
}

#text .main-title .quote-left,
#text .main-title .quote-right {
  font-size: 11.11vw;
  font-family: 'ZenMaruGothic', sans-serif;
  font-weight: 900;
}

#text .main-title .rakuraku-text {
  font-size: 11.11vw;
  font-family: 'DelaGothicOne', sans-serif;
  font-weight: normal;
}

#text .main-title .ni-text {
  font-size: 5vw;
  color: red;
  font-family: 'DelaGothicOne', sans-serif;
}

#text .sub-title {
  font-size: 5vw;
  color: red;
  font-family: 'DelaGothicOne', sans-serif;
}

#text .description {
  font-size: 2.08vw;
  letter-spacing: 0.07vw;
  line-height: 3.125vw;
  color: #323232;
  font-weight: 900;
  font-family: 'ZenMaruGothic', sans-serif;
  text-align: center;
  margin-top: 3.5vw;
}

#text .small-description {
  font-size: 1.25vw;
  line-height: 2.5vw;
  color: #323232;
  font-weight: 500;
  font-family: 'ZenMaruGothic', sans-serif;
  text-align: center;
  display: inline-block;
  white-space: nowrap;
}

#button,
#bird,
#balloon1,
#balloon,
#comic_balloon,
#overlay {
  position: absolute;
  opacity: 0;
  transition: opacity 1s ease;
}

/* #bird {
  top: 4vw;
  left: 71.67vw;
  transform: none;
  max-width: 16.67vw;
} */
#bird {
  top: 4.17vw;
  /* Y60: 60px ÷ 1440 × 100 = 4.17vw */
  left: 73.89vw;
  /* X1064: 1064px ÷ 1440 × 100 = 73.89vw */
  width: 22.99vw;
  /* 幅331: 331px ÷ 1440 × 100 = 22.99vw */
  height: 15.69vw;
  /* 高226: 226px ÷ 1440 × 100 = 15.69vw */
  transform: none;
  position: absolute;
  opacity: 0;
  transition: opacity 1s ease;
}

#balloon1 {
  top: 38.2vw;
  left: 78.33vw;
  transform: none;
  max-width: 18vw;
}

#balloon {
  top: 4.24vw;
  /* Y61: 61px ÷ 1440 × 100 = 4.24vw */
  left: 4.17vw;
  /* X60: 60px ÷ 1440 × 100 = 4.17vw */
  width: 16.53vw;
  /* 幅238: 238px ÷ 1440 × 100 = 16.53vw */
  height: 19.24vw;
  /* 高277: 277px ÷ 1440 × 100 = 19.24vw */
  transform: none;
  /* 既存のtransformを削除 */
  position: absolute;
  opacity: 0;
  transition: opacity 1s ease;
}

#button {
  top: 48.26vw;
  /* Y695: 695px ÷ 1440 × 100 = 48.26vw */
  left: 32.29vw;
  /* X465: 465px ÷ 1440 × 100 = 32.29vw */
  width: 35.42vw;
  /* 幅510: 510px ÷ 1440 × 100 = 35.42vw */
  height: 6.25vw;
  /* 高90: 90px ÷ 1440 × 100 = 6.25vw */
  position: absolute;
  opacity: 0;
  transition: opacity 1s ease;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

#comic_balloon {
  top: 47.43vw;
  left: 6.25vw;
  width: 16.60vw;
  height: 13.68vw;
  transform: none;
  position: absolute;
  opacity: 0;
  transition: opacity 1s ease;
}

#comic-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding-top: 5vw;
  width: 75.5vw;
  margin-left: 10.5vw;
  box-sizing: border-box;
  margin-top: -8vw;
}

.comic-image {
  opacity: 0;
  transform: translateY(1.67vw);
  transition: opacity 1s ease, transform 1s ease;
  width: 105%;
  max-width: none;
  display: block;
  margin-bottom: 0.8vw;
  margin-left: auto;
  margin-right: auto;
}

.comic-image.visible {
  opacity: 1;
  transform: translateY(0);
}

.inserted-text button img {
  max-width: 33.33vw;
  height: auto;
}

.bottom-image {
  width: 100%;
  display: block;
  margin-top: 40px;
}

.bottom-wrapper {
  position: relative;
  width: 100%;
}

.bottom-wrapper img.balloon {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 18.33vw;
}

.section-text {
  position: absolute;
  left: 50%;
  top: calc(10% + 2cm);
  transform: translate(-50%, -50%);
  color: red;
  text-align: center;
  z-index: 10;
  max-width: 800px;
  width: 80%;
}

.section-text .question {
  font-family: 'DelaGothicOne', sans-serif;
  font-size: 48px;
  font-weight: normal;
  line-height: 1.3;
  margin-bottom: 20px;
}

.section-text .answer {
  font-family: 'ZenMaruGothic', sans-serif;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.5;
}

.quote-zen {
  font-family: 'ZenMaruGothic', sans-serif;
  font-weight: 900;
}

/* 中心からの相対距離で配置する画像のスタイル */
.center-relative {
  position: absolute;
  left: 50%;
  top: 50%;
}

.section-illust {
  transform: translate(29.17vw, -47.5vw);
  z-index: 10;
  max-width: 25vw;
}

.section-01-woman {
  transform: translate(-50vw, 24.75vw);
  width: 20.83vw;
  z-index: 12;
}

.section-01-balloon {
  position: absolute;
  left: 7vw;
  top: calc(8vw + 200px);
  max-width: 41.67vw;
  transform: none;
}

.section-01-balloon2 {
  transform: translate(-50vw, 1.67vw);
  max-width: 10vw;
  z-index: 12;
}

.section-01-balloon3 {
  transform: translate(29.17vw, 27.5vw);
  width: 16.67vw !important;
  z-index: 12;
}

.slide-image {
  width: 100vw;
  height: auto;
  display: block;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  max-width: none;
}

/* アコーディオンのスタイル */
.accordion-item {
  background-color: #F5FDFF;
  border-radius: 1.56vw;
  margin-bottom: 1vw;
  overflow: hidden;
}

.accordion-header {
  padding: 2.4vw;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
}

.accordion-q {
  font-size: 2.08vw;
  color: #039be5;
  font-weight: 400;
  font-family: 'DelaGothicOne';
  margin-right: 2.1vw;
  margin-left: 2.1vw;
  flex-shrink: 0;
  width: 2.1vw;
  transform: translateY(-0.21vw);
}

.accordion-header-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.accordion-title {
  font-size: 1.39vw;
  color: #039be5;
  font-weight: 700;
  font-family: 'ZenMaruGothic';
  flex: 1;
  text-align: left;
  line-height: 1.4;
}

.accordion-arrow {
  width: 2.4vw;
  height: 2.4vw;
  border-radius: 50%;
  background-color: #039be5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  margin-left: 1vw;
  margin-right: 1vw;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.8vw;
}

.accordion-arrow.active {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='18,15 12,9 6,15'%3e%3c/polyline%3e%3c/svg%3e");
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 1.4vw;
}

.accordion-content.active {
  max-height: none;
  padding: 0 1.4vw 1.4vw 7.6vw;
}

/* セクションのトランジション */
#contact-form-section,
#footer-section {
  transition: top 0.3s ease;
}

.accordion-answer {
  width: 54.17vw;
  min-height: 2.5vw;
  font-size: 1.11vw;
  line-height: 1.67vw;
  color: #323232;
  font-weight: 500;
  font-family: 'ZenMaruGothic';
  text-align: left;
  margin-left: 0.5vw;
  margin-bottom: 2vw;
}

/* フローカードのスタイル */
.flow-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 40px;
}

.flow-card {
  background-color: #F5FDFF;
  border-radius: 20px;
  padding: 30px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.flow-card img {
  max-width: 120px;
  height: auto;
}

.flow-card-content {
  flex: 1;
}

.flow-card-title {
  color: #039be5;
  font-family: 'ZenMaruGothic', sans-serif;
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 15px;
}

.flow-card-text {
  color: black;
  font-family: 'ZenMaruGothic', sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

/* フォームのスタイル */
.form-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.8vw;
  gap: 2.5vw;
}

.form-label {
  font-size: 1.25vw;
  letter-spacing: 0.07vw;
  color: #323232;
  font-weight: 700;
  font-family: 'ZenMaruGothic';
  width: 20.5vw;
  flex-shrink: 0;
  padding-top: 1.5vw;
}

.form-input-wrapper {
  width: 100%;
  margin-top: 0.7vw;
}

.form-input::placeholder,
.form-select::placeholder,
.form-textarea::placeholder {
  color: #999;
  opacity: 0.7;
}

.required-badge {
  width: 4.17vw;
  height: 1.39vw;
  border-radius: 0.69vw;
  background-image: linear-gradient(0deg, #fa9e90 0%, #f53c20 100%);
  color: white;
  font-size: 0.7vw;
  padding: 0.1vw 1vw;
  margin-left: 0.7vw;
  font-weight: bold;
  vertical-align: center;
  position: relative;
  top: -0.2vw;
}


.form-input {
  width: 39.58vw;
  height: 4.17vw;
  border-radius: 0.69vw;
  background-color: #f6f6f6;
  padding: 0.8vw 0.8vw 0.8vw 1.5vw;
  border: none;
  font-size: 1.2vw;
  font-family: 'ZenMaruGothic', sans-serif;
  box-sizing: border-box;
}

.form-select,
.form-textarea {
  width: 95%;
  padding: 0.8vw 0.8vw 0.8vw 1.5vw;
  border: none;
  border-radius: 0.8vw;
  font-size: 1.2vw;
  font-family: 'ZenMaruGothic', sans-serif;
  box-sizing: border-box;
  background-color: #f5f5f5;
}


.form-pulldown {
  width: 50%;
  padding: 0.8vw;
  border: none;
  border-radius: 0.8vw;
  font-size: 1.2vw;
  font-family: 'ZenMaruGothic', sans-serif;
  box-sizing: border-box;
  background-color: #f5f5f5;
  color: #999;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.8vw center;
  background-size: 1.2vw;
  padding-right: 2.5vw;
}

.form-pulldown:focus {
  color: #000;
  outline: none;
}

.form-pulldown:valid {
  color: #000;
}

.form-pulldown option {
  color: #000;
  background-color: white;
}

.form-pulldown option:first-child {
  color: #999;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: #039be5;
}

.Partner .PartnerSplide {
  margin-block-end: 2.7777777778vw;
  margin-inline: calc(50% - 50vw);
}

.Partner .splide__slide {
  width: 37.5vw;
}

.Partner .PartnerSplide__image {
  aspect-ratio: 135/88;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.fade-in-section {
  opacity: 0;
  transform: translateY(1.67vw);
  transition: opacity 1s ease, transform 1s ease;
}

.fade-in-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ボタンのホバーエフェクト */
.button-hover {
  transition: transform 0.3s ease;
  cursor: pointer;
}

.button-hover:hover {
  transform: scale(1.1);
}