* {
	margin : 0 ;
	padding : 0 ;
	font-size : 100% ;
  font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "メイリオ", "ＭＳ Ｐゴシック";
}

img{
  width: 100%;
  margin: 0;
  vertical-align: bottom;
}

body {
 width: 100%;
 margin: 0 auto;
 overflow-x: hidden;
}

.pc {
  display: block;
}
.sp {
  display: none;
}

@media (max-width: 767px) {
  body {
    width: 100%;
    margin: 0 auto;
   }
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}



/* ============== ヘッダー ==============*/
header {
  background-color: #d8d8d8;
  padding: 1% 3%;
}

header p {
  font-size: 12px;
}

@media (min-width: 767px) {
  header {
    padding: 0.5% 3%;
  }
  header p {
    font-size: 14px;
    max-width: 800px;
    margin: 0 auto;margin: 0 auto;
  }
}

/* ============== FV ==============*/
@media (min-width: 767px) {
  .fv {
    margin: 0 auto;
    background-image: url(../img/fv_bg_pc.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .fv img {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 2% 0 0 7%;
  }
}

/* ============== CTA ==============*/
.cta {
  background-color: #e91120;
  padding: 0 0 16%;
}
.cta_area {
  position: relative;
  margin: 0 auto;
  text-align: center;
}
.cta_area img {
  width: 90%;
  margin: 0 auto;
}
.cta_inner {
  position: absolute;
  bottom: 8%;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.cta_inner img {
  width: 82%;
  margin-top: 2%;
}

@media (min-width: 767px) {
  .cta {
    padding: 0 0 5%;
  }
  .cta_area {
    max-width: 900px;
    margin: 0 auto;
  }
  .cta_area img {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
  }
  .cta_inner {
    left: 50%;
    bottom: 13%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    gap: 1%;
    width: 100%;
    max-width: 800px;
    position: absolute; /* 必要に応じて */
}
  .cta_inner img {
    width: 100%;
  }
}

/* ============== 流れ ==============*/
.flow {
  background-image: url(../img/flow_bg_sp.jpg);
  background-size: cover;
  background-position: center;
  padding: 0 0 16%;
  position: relative;
}

.flow::before {
  content: "";
  background-image: url(../img/Illustration_01.png);
  background-size: cover;
  background-position: center;
  position: absolute;
  top: -7%;
  left: -3%;
  width: 30%;      /* 画面に合わせて縮む */
  aspect-ratio: 1 / 1.4;  /* 画像比率を維持（超重要） */
  z-index: 999;
}

.flow::after {
  content: "";
  background-image: url(../img/Illustration_04.png);
  background-size: cover;
  background-position: center;
  position: absolute;
  top: -5%;
  right: 0%;
  width: 33%;      /* 画面に合わせて縮む */
  aspect-ratio: 1 / 1.2;  /* 画像比率を維持（超重要） */
  z-index: 999;
}

.flow_ttl {
  padding: 18% 8% 10%;
}
.flow_inner {
  width: 90%;
  margin: 0 auto;

}

@media (min-width: 767px) {
  .flow {
    background-image: url(../img/flow_bg_pc.jpg);
    background-size: cover;
    background-position: center;
    padding: 0 0 5%;
    position: relative;
  }
  .flow_ttl {
    max-width: 500px;
    margin: 0 auto;
    padding: 5% 0 3%;
  }
  .flow::before {
    aspect-ratio: 1 / 1.4;  /* 画像比率を維持（超重要） */
    width: 12%;
    left: 19vw;
    top: -6%;
  }
  .flow::after {
    width: 13%;      /* 画面に合わせて縮む */
    aspect-ratio: 1 / 1.4;  /* 画像比率を維持（超重要） */
    right: 20vw;
  }
  .flow_inner {
    max-width: 800px;
    margin: 0 auto;
  }
}


/* ============== よくある質問 ==============*/
.qanda {
  padding: 16% 5% 10%;
  position: relative;
}

.qanda::before {
  content: "";
  background-image: url(../img/Illustration_02.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: -5%;
  right: 0%;
  width: 30%;      /* 画面に合わせて縮む */
  aspect-ratio: 1 / 1.3;  /* 画像比率を維持（超重要） */
}

.qanda::after {
  content: "";
  background-image: url(../img/Illustration_03.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: -5%;
  left: -4%;
  width: 32%;
  aspect-ratio: 1 / 1;  /* 画像比率を維持（超重要） */
}

.qanda_ttl {
  padding: 0 15% 5%;
}

.qanda_item {
  border-top: 1px solid #ccc;
  padding: 15px 0;
}

.qanda_item:first-of-type {
  border-top: none;
}

.question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  gap: 3%;
}

.question img.qicon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.question_text {
  display: flex;
  align-items: center;
  font-weight: bold;
  color: #1e1e1e;
  flex-grow: 1;
}

.toggle {
  font-size: 24px;
  color: #666;
  user-select: none;
}

.answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease;
}

.answer.open {
  max-height: 500px; /* 中身の高さ以上に */
}

.answer_txt {
  display: flex;
  margin-top: 10px;
  color: #333;
  width: 90%;
}

.answer_txt img.aicon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  vertical-align: middle;
}

@media (min-width: 767px)  {
  .qanda {
    padding: 5% 0 5%;
  }
  .qanda_ttl {
    max-width: 400px;
    margin: 0 auto;
    padding: 0 0 3%;
  }
  .qanda_inner {
    max-width: 800px;
    margin: 0 auto;
  }
  .qanda::after {
    top: -4vh;
    width: 25%;      /* 画面に合わせて縮む */
    aspect-ratio: 1 / 1;  /* 画像比率を維持（超重要） */
    width: 13%;
    left: 18vw;
  }
  .qanda::before {
    background-image: url(../img/Illustration_02_pc.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    top: -3%;
    right: 18vw;
    width: 29%;
    width: 15%;      /* 画面に合わせて縮む */
  aspect-ratio: 1 / 1;  /* 画像比率を維持（超重要） */
  }
  .question img.qicon {
    width: 50px;
    height: 50px;
  }
  .answer_txt img.aicon {
    width: 50px;
    height: 50px;
  }
  .question_text {
    font-size: 26px;
  }
  .answer_txt {
    margin-top: 4%;
    font-size: 25px;
  }
  .qanda_item  {
    padding: 25px 0;
  }
}

/* ============== フッター ==============*/
footer {
  background-color: #191919;
  padding: 10%;
  text-align: center;
  color: #fff;
  font-size: 14px;
}
footer a {
  color: #fff;
}

@media (min-width: 767px) {
  footer {
    padding: 5% 0;
  }
}

/* ============== 追従ボタン ==============*/
.fixed-btn {
  position: fixed;
  bottom: 0;
  padding: 2% 5%;
  background-color: rgba(255, 255, 255, 0.8);
  transition: opacity 0.3s ease;
  z-index: 1000;

  opacity: 0;               /* ← ここを追加 */
  pointer-events: none;     /* ← 非表示時はクリックできないように */
}

.fixed-btn.show {
  opacity: 1;
  pointer-events: auto;
}

.fixed-btn a {
  margin: 0 auto;
  text-align: center;
}

.fixed-btn a img {
  max-width: 100%;
  height: auto;
}

@media (min-width :767px) {
  .fixed-btn {
    right: 0;
    padding: 1% 2%;
    width: 100%;
  }
  .fixed-btn a img {
    max-width: 400px;
    margin: 0 auto;
    display: block;
  }
}



/* ============== プライバシー・ポリシー ==============*/
.policy {
  width: 100%;
  background-color: #f1f1f1;
}
.policy_inner {
  max-width: 800px;
  padding: 5% 5% 10%;
  margin: 0 auto;
}
.policy_box_in {
  padding: 5%;
  background-color: #fff;
  border-radius: 10px;
  margin-top: 3%;
}
.policy_box_in_title {
  text-align: center;
  font-size: 30px;
  font-weight: 900;
  color: #e91120;
  margin: 0 0 3%;
}
.policy_box_in_tp {
  font-size: 18px;
  color: #e91120;
  font-weight: bold;
  margin: 3% 0 1%;
}
.policy_inner a {
  color: #1e1e1e;
  margin-bottom: 2%;
}
@media (max-width: 767px) {
  .policy_inner {
    padding: 5% 5% 10%;
    background-color: #f1f1f1;
  }
  .policy_box_in {
    padding: 10% 5%;
    margin-top: 3%;
  }
  .policy_box_in_title {
    margin: 0 0 7%;
  }
}

/* ============== 運営会社 ==============*/
.company {
  width: 100%;
  background-color: #f1f1f1;
}
.company_inner {
  max-width: 900px;
  padding: 5%  5% 10%;
  margin: 0 auto;
}
.company_box_in {
  padding: 5%;
  background-color: #fff;
  border-radius: 10px;
  margin-top: 3%;
}
.company_ttl {
  text-align: center;
  font-size: 30px;
  font-weight: 900;
  color: #e91120;
  margin: 0 0 7%;
}
.company_table {
  margin: 0 auto;
  text-align: center;
}
.company_table table {
  margin: 0 auto;
  text-align: center;
  width: 100%;
}
.company_table th {
  padding: 2%;
  width: 30%;
  background: #f7f7f7;
}
.company_table td {
  padding: 2%;
  width: 70%;
  background: #f7f7f7;
}
.company_table .bg_white th, .company_table .bg_white td {
  background: #fff;
}
.company_inner a {
  color: #1e1e1e;
  margin-bottom: 2%;
}
@media (max-width: 767px) {
  .company_inner {
    padding: 5%  5% 10%;
  }
  .company_box_in {
    padding: 10% 5%;
  }
  .company_table td {
    padding: 5% 2%;
  }
}