:root {
  --main-color: #01a3bc;
  --sub-color1: #ffd526;
  --sub-color2: #bf0266;
  --sub-color3: #dd0202;
  --sub-color4: #fffaec;
  --fs-s: 16px;
  --fs-24: 24px;
  --fs-30: 30px;
  --fs-m: 30px;
  --fs-l: 48px;
  --base-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 1000px) {
  :root {
    --fs-s: 1.3vw;
    --fs-24: 2vw;
    --fs-30: 2.5vw;
  }
}
@media screen and (max-width: 768px) {
  :root {
    /* --fs-s: clamp(14px, 3vw, 16px);
    --fs-sl: clamp(16px, 3.5vw, 24px);
    --fs-m: clamp(18px, 4vw, 30px);
    --fs-l: clamp(24px, 5vw, 48px);
    --img-col1-height: clamp(50px, 22vh, 180px);
    --img-col1-s-height: 14vh; */
  }
}
.cont {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}
.sp_only {
  display: none;
}
@media screen and (max-width: 768px) {
  .pc_only {
    display: none;
  }
  .sp_only {
    display: block;
  }
}

/* 
fv */
.fv {
  background: var(--main-color);
  padding-bottom: 14px;
}
.fv-img {
  text-align: center;
}
.fv-img img {
  width: 100%;
}
.fv-cta {
  display: flex;
  align-items: center;
  gap: 3vw;
  margin: 0 auto;
  width: fit-content;
}
/* 
sec01 */
.sec01 {
  background: url(../../img/page/lp/fukuoka-mamagement/sec01-bg.png) top center
    var(--sub-color1) no-repeat;
  padding: 75px 0 120px;
  text-align: center;
}
.sec01-img01 {
  margin-top: 50px;
}
.sec01-img02 {
  margin-top: 60px;
}
.sec01-img02 p {
  font-weight: bold;
  font-size: 28px;
  line-height: 1;
  text-align: center;
}

@media screen and (max-width: 1000px) {
  .sec01 {
    padding: 75px 4vw 120px;
  }
}

/* 
sec02 */
.sec02 {
  background: url(../../img/page/lp/fukuoka-mamagement/sec02-bg.png) bottom
    center var(--sub-color1) no-repeat;
  padding: 0 0 86px;
  text-align: center;
}
.reason {
  margin-top: 66px;
}
.reason-box {
  background: #fff;
  position: relative;
  padding: 50px 0;
}
.reason-num {
  position: absolute;
  top: -36px;
}
.reason {
  display: flex;
  flex-wrap: wrap; /* 必要なら折り返し対応 */
  justify-content: center; /* 中央寄せ */
  gap: 20px; /* liの間隔調整 */
  padding: 0;
  margin-top: 60px;
  list-style: none;
}

.reason li {
  flex: 0 0 auto; /* 固定幅 */
}

.reason-box {
  background: #fff;
  width: 320px;
  min-height: 100%; /* 高さ統一には親要素で高さ管理 */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25); /* お好みで影 */
}
.reason-img p {
  font-size: var(--fs-24);
  font-weight: bold;
  line-height: 1.4;
  margin-top: 1.2em;
}

.reason-img p span {
  color: var(--sub-color3);
}

@media screen and (max-width: 1000px) {
  .reason-box {
    width: 30vw;
    padding: 4.2vw 2vw;
  }
}

/* 
sec03 */
.sec03 {
  padding: 100px 0 120px;
  text-align: center;
  position: relative;
  z-index: 1; /* 子要素の z-index 管理のため */
}

.sec03::before,
.sec03::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 236px; /* 背景画像の高さに合わせて調整 */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; /* もしくは contain や auto */
  z-index: -1; /* ←これが重要！ 背景として後ろに */
}

.sec03::before {
  top: 0;
  background-image: url(../../img/page/lp/fukuoka-mamagement/sec03-bg-top.png);
}

.sec03::after {
  bottom: 0;
  background-image: url(../../img/page/lp/fukuoka-mamagement/sec03-bg-btm.png);
}

.sec03-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 0;
  margin-top: 24px;
  list-style: none;
}

.sec03-list li {
  background: #fffaec;
  border: 2px solid #bf0266;
  box-shadow: 0 4px 0 0 rgba(164, 199, 237, 0.4);
  width: calc(50% - 10px); /* 2列表示 */
  height: 90px;
  display: flex;
  align-items: center;
  padding: 0 2em;
  box-sizing: border-box;
  border-radius: 45px; /* 任意。角丸があれば */
}

.sec03-list li a {
  font-size: var(--fs-24);
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  color: inherit;
  text-align: center;
  width: 100%;
  height: 100%;
  line-height: 1.2;
  font-weight: bold;
}

.sec03-icon {
  flex-shrink: 0;
  margin-right: 10px;
}

.sec03-arrow {
  flex-shrink: 0;
  margin-left: 10px;
}

.sec03-list li a > div,
.sec03-list li a > span,
.sec03-list li a > p {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 1000px) {
  .sec03 {
    padding: 8.3vw 4vw 10vw;
  }
}
/* 
sec04 */
.sec04 {
  background: url(../../img/page/lp/fukuoka-mamagement/sec04-bg.png) no-repeat
    center center;
  background-size: cover;
}
.sec04-title {
  background: var(--sub-color2);
  width: 100%;
  text-align: center;
  padding: 34px 0 10px;
  position: relative;
}

.sec04-title::after {
  content: "";
  position: absolute;
  bottom: -20px; /* 三角形の高さ分だけ下にずらす */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-top: 20px solid var(--sub-color2); /* 下向き三角形 */
}
.sec04-img {
  padding: 70px 0 106px;
}

@media screen and (max-width: 1000px) {
  .sec04-img {
    padding: 5.8vw 4vw 8.8vw;
  }
}
/* 
sec05 */
.sec05 {
  background: var(--sub-color4);
}
.sec05-title {
  background: var(--sub-color2);
  width: 100%;
  text-align: center;
  padding: 34px 0;
  position: relative;
}

.sec05-title::after {
  content: "";
  position: absolute;
  bottom: -20px; /* 三角形の高さ分だけ下にずらす */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-top: 20px solid var(--sub-color2); /* 下向き三角形 */
}
.sec05-list {
  padding: 50px 0 64px;
}
.sec05-list li:first-child {
  margin-bottom: 40px;
}

@media screen and (max-width: 1000px) {
  .sec05-title {
    padding: 2.8vw 4vw;
  }
  .sec05-list {
    padding: 4.2vw 4vw 5.3vw;
  }
}

/* 
sec06 */
.sec06,
.sec08 {
  background: url(../../img/page/lp/fukuoka-mamagement/sec06-bg.png) no-repeat
    center center;
  background-size: cover;
}
.sec06 .cont,
.sec08 .cont {
  padding: 50px 0 75px;
}
.cta-area {
  position: relative;
}
.cta-title {
  margin-bottom: 20px;
}
.cta-book {
  position: absolute;
  top: -90px;
  right: -90px;
  z-index: 2;
}
.cta-box {
  background: linear-gradient(to bottom, #fffbf0, #ffffff);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  padding: 24px 30px; /* 必要に応じて調整してください */
  position: relative;
}
.cta-txt-area {
  display: flex;
  align-items: flex-start; /* 上揃え（中央揃えにしたいなら center） */
  gap: 20px; /* 任意：要素の間に余白をつけたい場合 */
  margin-top: 24px;
}

.cta-flug {
  flex-shrink: 0; /* アイコン画像などが縮まないように */
}

.cta-txt {
  text-align: left;
}
.cta-txt {
  font-size: 14px;
}
.cta-txt a {
  text-decoration: underline;
  color: var(--sub-color3);
  font-weight: bold;
}
.cta-icon {
  position: absolute;
  right: 22px;
  bottom: 0;
}
.page-top-btn {
  position: absolute;
  bottom: 0;
  right: 0;
}
.page-top-btn a {
  display: inline-flex;
  align-items: center; /* 高さ中央揃え */
  gap: 10px; /* アイコンとテキストの間隔（必要に応じて調整） */
  background: #fffaec;
  border: 2px solid #fff;
  border-radius: 10px 10px 0 0;
  font-size: var(--fs-s);
  font-weight: bold;
  padding: 16px 30px;
  text-decoration: none;
  line-height: 1;
}

@media screen and (max-width: 1000px) {
  .sec06 .cont,
  .sec08 .cont {
    padding: 4.1vw 4vw 6.25vw;
  }
  .cta-title {
    max-width: 78%;
  }
  .cta-book {
    max-width: 30vw;
  }
  .cta-txt-area {
    max-width: 70vw;
  }
  .cta-txt {
    font-size: 1.4vw;
  }
  .cta-icon {
    right: 10px;
  }
  .cta-icon img {
    max-width: 16vw;
  }
}

/* 
sec07 */
.sec07 {
  background: url(../../img/page/lp/fukuoka-mamagement/sec07-bg.png) top center
    no-repeat #ebf5ff;
  padding: 60px 0 106px;
}
.sec07-list {
}
.sec07-list li {
  position: relative;
  padding-top: 180px;
  margin-top: 54px;
}
.sec07-list-img {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
.sec07-list-img-popup {
  background: #fff;
  max-width: 606px;
  box-shadow: -12px 12px 0 rgba(193, 218, 250, 1);
}
.sec07-list-img-popup img {
  display: block;
}
.sec07-list-img-popup a.caption {
  display: block;
  text-align: center;
  padding-bottom: 1em;
}
.sec07-list li:nth-child(even) .sec07-list-img {
  left: 0;
}
.sec07-list-box {
  background: #fff;
  max-width: 450px;
  padding: 48px 24px;
  position: relative;
  border: solid var(--sub-color2) 2px;
  z-index: 2;
}
.sec07-list li:nth-child(even) .sec07-list-box {
  margin-left: auto; /* 右寄せの決め手 */
}

.sec07-list-num {
  position: absolute;
  top: 10px;
  right: 0;
}
.sec07-list-num.sec07-list-num1 {
  right: 7px;
}
.sec07-list-txt h3 {
  font-size: var(--fs-30);
  font-weight: bold;
  color: var(--sub-color2);
  line-height: 1.4;
}

.sec07-list-txt h3 span {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.sec07-list-txt h3 span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.1em; /* 被り具合の調整 */
  width: 100%;
  height: 10px;
  background-color: var(--sub-color1);
  z-index: -1;
}

.sec07-list-txt p {
  font-size: var(--fs-24);
  margin-top: 1em;
  font-weight: bold;
  line-height: 1.6;
}
.sec07-list-txt p.notes {
  font-size: var(--fs-s);
  font-weight: normal;
  margin-top: 1em;
}

@media screen and (max-width: 1000px) {
  .sec07 {
    padding: 5vw 4vw 8.8vw;
  }
  .sec07-list-img {
    max-width: 60vw;
  }
  .sec07-list-box {
    max-width: 40vw;
  }
  .sec07-list li {
    padding-top: 15vw;
    margin-bottom: 4.5vw;
  }
}

/* 
sec09 */

.sec09 {
  padding: 100px 0 120px;
  text-align: center;
  position: relative;
  z-index: 1; /* 子要素の z-index 管理のため */
}

.sec09::before,
.sec09::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 236px; /* 背景画像の高さに合わせて調整 */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; /* もしくは contain や auto */
  z-index: -1; /* ←これが重要！ 背景として後ろに */
}

.sec09::before {
  top: 0;
  background-image: url(../../img/page/lp/fukuoka-mamagement/sec09-bg-top.png);
}

.sec09::after {
  bottom: 0;
  background-image: url(../../img/page/lp/fukuoka-mamagement/sec09-bg-btm.png);
}
.sec09-img02 {
  margin-top: 50px;
}
@media screen and (max-width: 1000px) {
  .sec09 {
    padding: 8.3vw 4vw 10vw;
  }
  .sec09-img02 {
    margin-top: 4vw;
  }
}
/* 
sec10 */
.sec10 {
  background: var(--sub-color4);
  padding-bottom: 80px;
}
.sec10-title-box {
  background: var(--sub-color2);
  text-align: center;
  padding: 20px 0;
  position: relative;
}
.sec10-title-img01 {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-530px); /* 中央から左に20vw */
  z-index: 4;
}
.sec10-title-img02 {
  position: absolute;
  bottom: 0;
  right: 50%;
  transform: translateX(500px); /* 中央から左に20vw */
  z-index: 4;
}
.sec10 h2 {
  line-height: 1;
}
.sec10 ul {
  margin-top: 60px;
}
.sec10 ul li {
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  height: 310px;
}
.sec10 ul li:nth-child(1) {
  background: url(../../img/page/lp/fukuoka-mamagement/sec10-img01.png) left
    no-repeat #fff;
}
.sec10 ul li:nth-child(2) {
  background: url(../../img/page/lp/fukuoka-mamagement/sec10-img02.png) right
    no-repeat #fff;
}
.sec10 ul li:nth-child(3) {
  background: url(../../img/page/lp/fukuoka-mamagement/sec10-img03.png) left
    no-repeat #fff;
}
.sec10 ul li:nth-child(4) {
  background: url(../../img/page/lp/fukuoka-mamagement/sec10-img04.png) right
    no-repeat #fff;
  margin-bottom: 0;
}
.sec10-txt {
  max-width: 574px;
}
.sec10 li .sec10-txt {
  position: absolute;
}
.sec10 li:nth-child(odd) .sec10-txt {
  left: 386px;
}
.sec10 li:nth-child(even) .sec10-txt {
  left: 40px;
}
.sec10 ul li h3 {
  font-size: var(--fs-30);
  line-height: 1.4;
  font-weight: bold;
  color: var(--sub-color2);
}
.sec10 ul li p {
  font-size: var(--fs-24);
  margin-top: 1em;
  line-height: 1.4;
}
.sec10-logo {
  text-align: center;
  margin-top: 50px;
}

.sec10-logo p {
  margin-top: 1em;
  font-size: var(--fs-24);
  font-weight: bold;
  line-height: 1.6;
  text-align: center;
}
@media screen and (max-width: 1000px) {
  .sec10 {
    padding: 0 0 6.7vw;
  }
  .sec10 h2 {
    max-width: 60%;
    margin: 0 auto;
  }
  .sec10-title-img01 {
    transform: translateX(-53vw);
  }
  .sec10-title-img02 {
    transform: translateX(50vw);
  }
  .sec10 ul {
    padding: 5vw 4vw 0;
  }
  .sec10-txt {
    max-width: 48vw;
  }
  .sec10 li:nth-child(odd) .sec10-txt {
    left: 42.16vw;
  }
  .sec10 li:nth-child(even) .sec10-txt {
    left: 8vw;
  }
}

/* 
feq */
.faq {
  padding: 120px 0;
}
.faq h2 {
  text-align: center;
  font-size: 34px;
  font-weight: bold;
  line-height: 1;
}
.faq h2:after {
  content: "";
  display: block;
  width: 56px;
  margin: 14px auto 1em;
  height: 4px;
  background: var(--sub-color2);
}
.faq-item {
  margin-bottom: 16px;
  overflow: hidden;
}

.faq-question {
  width: 100%;
  background: var(--sub-color2);
  color: #fff;
  font-size: 20px;
  padding: 16px 16px;
  border: none;
  display: flex;
  justify-content: space-between; /* 左右に分ける */
  align-items: center;
  cursor: pointer;
}

.faq-question-left {
  display: flex;
  align-items: center;
}

.faq-question span {
  display: inline-block;
}

.faq-arrow {
  width: 20px;
  height: auto;
}

.faq-question img {
  margin-right: 16px;
  height: auto;
}

.faq-answer {
  display: none;
  padding: 16px 16px;
  font-size: var(--fs-s);
  border-bottom: 2px solid var(--sub-color2);
  align-items: center;
}

.faq-answer p {
  display: flex;
  align-items: flex-start;
}

.faq-answer img {
  height: 30px;
  width: auto;
  flex-shrink: 0;
  margin-right: 1em;
}
/* .faq-answer img {
  margin-right: 16px;
  height: auto;
} */
@media screen and (max-width: 1000px) {
  .faq {
    padding: 10vw 4vw;
  }
}
/* 
contact */
.contact {
  background: url(../../img/page/lp/fukuoka-mamagement/contact-bg.png) top
    center no-repeat;
  padding: 90px 0;
}
.contact h2 {
  text-align: center;
}
.contact .data-txt {
  text-align: center;
  font-size: var(--fs-24);
  margin: 1em 0;
  color: #fff;
}

.contact-cta {
  background: #fff;
  max-width: 800px;
  border-radius: 10px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
  justify-content: center;
}
.contact-cta .cta-txt-area {
  margin: 0;
}
.contact-box {
  padding: 50px 70px;
  background: #fff;
}
.contact-box dl {
  border-bottom: 1px solid #a7a7a7;
}
.contact-box dl dt {
  margin-right: 2em;
}
.contact-box span.sample {
  color: #686868;
  margin-top: 0.5em;
  display: block;
}
.form-policy-check {
  margin: 1em auto;
  display: table;
}
.form-policy-check .check-notice {
  margin: 0.5em 0 0 5.8em;
}
.fm-contact dl dt {
  display: flex;
}
.fm-contact dl dt p {
  display: flex;
  align-items: flex-start; /* 行の開始位置に揃える（必要なら） */
  gap: 0.5em; /* スパン同士の間隔が必要な場合 */
}

.fm-contact dl dt p span {
  display: inline-block;
  white-space: nowrap; /* テキストの折り返しを防ぐ（例：'必須'が2行にならないように） */
}
.submit-area p {
  text-align: center;
}
.submit-area input {
  background: var(--main-color);
  color: #fff;
  font-size: 18px;
  padding: 1em 10em;
  display: inline-block;
  border-radius: 6px;
}
.submit-area input:hover {
  cursor: pointer;
}
.privacy h3,
.terms h3 {
  font-size: var(--fs-24);
  font-weight: bold;
  line-height: 1;
  margin: 2em 0 0.8em;
}
.privacy-box,
.terms-box {
  padding: 1em;
  background: #fff;
  border: 1px solid #b3b3b3;
  height: 235px;
  overflow-y: scroll;
}
.privacy-box h4,
.terms-box h4{
    margin: 2em 0 0.8em;
}
.privacy-box h4:first-of-type,
.terms-box h4:first-of-type {
  margin: 0 0 0.8em;
}
div#privacy p {
  font-size: var(--fs-s);
  line-height: 1.8;
}
select {
  appearance: none; /* モダンブラウザ */
  -webkit-appearance: none; /* Safari/Chrome */
  -moz-appearance: none; /* Firefox */
  background: none; /* 背景アイコンをなくす */
  background-image: none; /* 万が一アイコンが背景にある場合 */
}
.contact .wpcf7-list-item {
  display: inline-block;
  margin: 0 2em 0 1em;
}

@media screen and (max-width: 1000px) {
  .contact {
    padding: 7.5vw 4vw;
  }
  .contact-box {
    padding: 4.16vw 5.83vw;
  }
}

/* 
fixed-bnr */
.fixed-bnr {
  background: var(--main-color);
  padding: 14px;
  position: fixed;
  bottom: -130px; /* 下に隠しておく */
  width: 100%;
  z-index: 9999999;
  transition: bottom 0.5s ease; /* スライドアニメーション */
}

.fixed-bnr.show {
  bottom: 0; /* 表示する位置 */
}
.fixed-bnr-box {
  display: flex;
  align-items: center;
  gap: 3vw;
  margin: 0 auto;
  width: fit-content;
}
.fixed-bnr-title img {
  max-width: 100%;
  height: auto;
}

.fixed-bnr-txt {
  background: #fff;
  border-radius: 10px;
  padding: 0.5em 1em;
  display: flex;
  align-items: center;
  line-height: 1;
}
.fixed-bnr-txt a {
  text-decoration: underline;
  font-weight: bold;
}

.fixed-bnr-txt-img {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.fixed-bnr-txt-img img {
  max-width: 100%;
  height: auto;
}

.fixed-bnr-txt-img p {
  font-size: var(--fs-s);
  margin-top: 0.5em;
}
