@charset "UTF-8";

/* ------------------------------------------------------------
 独自リセット・共通スタイル
------------------------------------------------------------ */
html {
  scroll-behavior: smooth;
}

body {
  /* 游ゴシック体 */
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: cover;
  background-attachment: fixed;
  color: #323232;
}

a {
  text-decoration: none;
  transition-duration: 0.2s;
}
@media (min-width: 960px) {
  a:hover {
    transition-duration: 0.2s;
  }
}

p {
  line-height: 1.5em;
}

ul, ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

section img {
  display: inline-block;
  vertical-align: bottom;
  width: 100%;
  max-width: 750px;
  height: auto;
}

*:focus {
  outline: none;
}

/*PCでは無効（改行しない）*/
.br-sp{
  display: none;
}

/*スマートフォンでは有効（改行する）*/
@media screen and (max-width:768px) {
  .br-sp{
      display: block;
  }
}

small {
  font-size: 0.8em;
}
/* ------------------------------------------------------------
  body-wrapper
------------------------------------------------------------ */
.body-wrapper {
  position: relative;
  overflow: visible; /* sticky を機能させるために必要 */
  background: #fff;
  max-width: 430px;
  margin: auto;
  box-shadow: 0 0 30px rgba(62, 35, 48, 0.1);
}

.inner {
  width: 95%;
  margin: auto;
}

/* ------------------------------------------------------------
  fv
------------------------------------------------------------ */
.fv {
  background-image: url(../img/FV_base.webp);
  background-size: 100%;
  background-repeat: no-repeat;
  text-align: center;
  padding-bottom: 10px;
  position: relative;
  z-index: 1;
}

/* アニメーション前の状態（非表示） */
.js-animate-img {
  opacity: 0;
  visibility: hidden;
}

/* 拡大フェードインアニメーション */
.zoom-fadein {
  animation: zoom-fadein 1s forwards;
  margin-top: -30px;
  margin-bottom: -55px;
}
@keyframes zoom-fadein {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    visibility: visible;
  }
}

/* バウンドフェードインアニメーション */
.bounce-fadein {
  animation: bounce-fadein 1s forwards;
  
}
@keyframes bounce-fadein {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}


.slider_parent {
  position: relative;
  overflow: hidden;
  background-color: white;
  padding: 5px 0;
}

.slider_parent .slider {
  display: flex;
}

.text_scroll {
  animation: scroll 30s linear infinite;
}

.logos {
  flex-shrink: 0;
}

.slider_parent ul li {
  margin-left: 10px;
  margin-right: 10px;
}

.slider_parent ul li {
  display: inline-block;
}

.slider_parent ul {
  padding: 0;
  margin: 0;
  display: flex;
}

.slider_parent ul li > a img {
  transition: 0.4s;
}

.slider_parent ul li img {
  height: 30px;
  width: auto;
}

@keyframes scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* ------------------------------------------------------------
  申込フォーム
------------------------------------------------------------ */
.form_content {
  margin-top: -63px;
  padding-top: 63px;
  padding-bottom: 15px;
  background-image: repeating-linear-gradient(45deg, #f8ed6f, #f8ed6f 3px, #fff7a9 3px, #fff7a9 6px);
}
.form_content2 {
  padding: 15px 0;
  background-image: repeating-linear-gradient(45deg, #f8ed6f, #f8ed6f 3px, #fff7a9 3px, #fff7a9 6px);
}

.form_content .reflection {
  width: 90%;
  margin: auto;
}

.form_box {
  width: 95%;
  margin: 0 auto 15px;
  background-color: white;
}

.form_box h2 {
  background-color: #559DD7;
  color: white;
  text-align: center;
}

form {
  padding: 15px 5px;
}

.row:not(:last-of-type) {
  border-bottom: #cccccc 1px solid;
  margin-top: 10px;
}
.row {
  margin-top: 10px;
}

.form_label {
  font-weight: bold;
}

.require {
  color: #fa4141;
  border: #fa4141 1px solid;
  border-radius: 3px;
  padding: 0 2px;
  font-size: 14px;
  font-weight: bold;
  margin-right: 5px;
}

.any {
  color: #999999;
  border: #999999 1px solid;
  border-radius: 3px;
  padding: 0 2px;
  font-size: 14px;
  font-weight: bold;
  margin-right: 5px;
}

.input_box {
  margin: 15px;
}

.input_box label {
  margin-left: 20px;
  font-size: 18px;
}

.input_box select {
  border: #999999 solid 1px;
  border-radius: 3px;
  width: 250px;
  padding: 5px;
}

.input_text {
  border: #999999 solid 1px;
  border-radius: 3px;
  width: 250px;
  padding: 5px 10px;
}

textarea {
  width: 100%;
  min-height: 150px;
  padding: 10px;
}

button {
  display: block;
  border: none;
  padding: 0;
  width: 90%;
  margin: auto;
  cursor: pointer;
}

/* ------------------------------------------------------------
  TOP
------------------------------------------------------------ */
.section03 {
  position: relative;
}

.section03 .reflection {
  width: 90%;
  position: absolute;
  bottom: 25px;
  left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

.cta_form {
  position: relative;
  animation: pekopeko 1.8s infinite;;
}
@keyframes pekopeko {
  0% {
      top: 0px;
  }
  10% {
      top: 5px;
  }
  20% {
      top: 0px;
  }
  30% {
      top: 5px
  }
  40% {
      top: 0px;
  }
}

.section04 {
  background-color: #ED686C;
  background-image: url(../img/section04.webp);
  background-size: 100%;
  background-repeat: no-repeat;
}

.section04 .inner {
  padding: 100px 0 30px;
}

.accordion-item {
  border: 2px solid #323232;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 10px;
}

.accordion-button {
  width: 100%;
  padding: 15px 40px 15px 40px; /* 左右に余白を追加 */
  text-align: left;
  color: #423e3a;
  background-color: #fff;
  border: none;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s;
  position: relative; /* Qマークとトグルアイコンの位置調整用 */
}

.q-mark {
  position: absolute;
  left: 5px; /* 左端からの距離 */
  top: 50%;
  transform: translateY(-50%); /* 垂直方向の中央揃え */
  color: #323232; /* Qの文字色 */
  width: 30px; /* Qの幅 */
  height: 30px; /* Qの高さ */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: bold;
  font-family: 'Inter', sans-serif;
  font-display: swap;
}

.accordion-button::after {
  content: "+"; /* 初期状態のアイコン */
  position: absolute;
  right: 15px; /* 右端からの距離 */
  top: 50%;
  transform: translateY(-50%); /* 垂直方向の中央揃え */
  background-color: #323232; /* 初期状態の背景色 */
  color: white; /* アイコンの色 */
  width: 20px; /* アイコンの幅 */
  height: 20px; /* アイコンの高さ */
  border-radius: 50%; /* 円形にする */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  transition: background-color 0.3s, content 0.3s; /* 背景色とアイコンの変化を滑らかに */
}

.accordion-button.active::after {
  content: "-"; /* 開いた状態のアイコン */
  background-color: #666666; /* 開いた状態の背景色 */
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  padding: 0 15px;
  background-color: #fff;
  text-align: center;
}

.accordion-content p {
  margin: 15px 0;
  text-align: left;
}

/* ------------------------------------------------------------
  運営者情報
------------------------------------------------------------ */
.administrator {
  padding: 15px 0;
}
.administrator .inner {
  border-top: #333333 1px solid;
  border-bottom: #333333 1px solid;
  padding: 10px;
}
.administrator h3 {
  margin-top: 10px;
}
.administrator p {
  font-size: 12px;
}

/* ------------------------------------------------------------
  footer
------------------------------------------------------------ */
.footer {
  padding: 1rem;
  font-size: 12px;
  color: #fff;
  background: #423e3a;
  text-align: center;
}

.footer__navi {
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 1rem;
}


.footer__navi li {
  display: inline-block;
  margin-bottom: 10px;
}

.footer__navi li:not(:last-child) {
  margin-right: 16px;
}

/* ------------------------------------------------------------
  運営者情報ページ
------------------------------------------------------------ */
.admin {
  max-width: 800px;
  padding-top: 20px;
  text-align: center;
  margin: auto;
  margin-bottom: 30px;
}

@media screen and (min-width: 768px) {
  .admin {
  padding-top: 80px;
}
}
.admin_page {
  width: 80%;
  margin: auto;
  text-align: center;
  padding-bottom: 50px;
}

.admin_page h3 {
  padding: 0.5rem 2rem;
  border-left: 5px solid #000;
  background: #f4f4f4;
  margin-top: 30px;
  text-align: left;
}

.admin_page p {
  text-align: left;
  margin-top: 10px;
  padding-left: 10px;
  font-size: 16px;
}

.privacy_text {
  margin-top: 20px;
  border: solid 1px gray;
  padding: 10px;
  font-size: 12px;
  text-align: left;
}

/* ------------------------------------------------------------
  サンクスページ
------------------------------------------------------------ */
.thanks {
  background-color: #FFF7A9;
  padding: 30px 10px;
}

.thanks h2 {
  text-align: center;
  font-size: 48px;
  line-height: 1.5rem;
  color: #fa4141;
}
.thanks h2 span {
  font-size: 16px;
  color: #323232;
}

.thanks_inner {
  background-color: white;
  border-radius: 5px;
  padding: 10px;
}

.thanks_inner table {
  width: 100%;
  margin: 15px auto;
  text-align: center;
}

.thanks_inner table tr td img {
  width: 150px;
}

.thanks_inner table tr td a {
  color: cornflowerblue;
  text-decoration: underline;
}

.thanks_inner table tr td {
  padding: 10px;
}