/* =========================================
   ベース
========================================= */

body {
  font-family: "Noto Sans JP", sans-serif;
  margin: 0;
}
@media (min-width: 600px) and (max-width: 959px) {

  body {

    background-color: #f7f4e9;

    max-width: 600px !important;

    margin: 0 auto;

  }
}
.red {

  color: #eb4628;

}

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

.header-container {
  background-color: #fff;
}

@media screen and (min-width: 960px) {

  .header-inner {
    max-width: 1200px;
    margin: 0 auto;
  }

  .header-logo img {
    width: 125px;
    padding: 10px 20px 5px;
  }

}

@media (min-width: 600px) and (max-width: 959px) {

  .header-logo img {
    width: 100px;
    padding: 10px 20px 5px;
  }

}

@media screen and (max-width: 599px) {

  .header-logo img {
    width: 25vw;
    padding: 10px 10px 5px 1em;
  }

}


/* =========================================
   FV
========================================= */

.fv {
  background:
    linear-gradient(
      90deg,
      #edf7ee 0%,
      #b9e1bd 100%
    );
}

@media screen and (min-width: 960px) {

  .fv-container {
    width: 800px;
    margin: 0 auto;
  }

}

@media (min-width: 600px) and (max-width: 959px) {

  .fv-container {
    padding: 0 40px;
  }

}

.fv-content {
  padding: 3em 0;
}

@media (min-width: 600px) and (max-width: 959px) {

  .fv-content {
    padding: 3.5em 0 1.7em;
  }

}

@media screen and (max-width: 599px) {

  .fv-content {
    padding: 3.5em 0 1.7em 1em;
  }

}

.free {
  padding: 4px 10px;

  background-color: #eb4628;

  color: #fff;

  font-size: 18px;
  font-weight: bold;

  border-radius: 100px;

  margin-right: 5px;
}

@media screen and (max-width: 599px) {

  .free {
    font-size: 4.2vw;
  }

}

.eyecatch-text {
  font-size: 22px;
  font-weight: bold;
}

@media screen and (max-width: 599px) {

  .eyecatch-text {
    font-size: 4.6vw;
  }

}

h1 {
  font-size: 55px;
  line-height: 1.2;
  margin: .1em 0 .3em;
}

@media screen and (max-width: 599px) {

  h1 {
    line-height: 1.3;
    margin: .15em 0 .5em;
    font-size: 9.4vw !important;
  }

}

.merit {
  font-size: 17px;
  font-weight: bold;

  line-height: 1.8;

  margin-bottom: 0;
}

@media screen and (max-width: 599px) {

  .merit {
    font-size: 3.7vw;

    position: relative;

    z-index: 100;

    text-shadow:
      2px 0 0 #e0f2e1,
      -2px 0 0 #e0f2e1,
      0 2px 0 #e0f2e1,
      0 -2px 0 #e0f2e1,
      2px 2px 0 #e0f2e1,
      -2px 2px 0 #e0f2e1,
      2px -2px 0 #e0f2e1,
      -2px -2px 0 #e0f2e1;
  }

}

.fvimage {
  position: relative;
}

@media screen and (min-width: 960px) {

  .fvimage .present_banner {
    position: absolute;

    width: 310px;

    right: 2.3em;
    bottom: 2em;

    z-index: 100;
  }

  .fvimage .ph {
    position: absolute;

    width: 220px;

    right: 6.5em;
    bottom: 0;
  }

}

@media screen and (max-width: 959px) {

  .fvimage .present_banner {
    width: 310px;
    padding-bottom: 3.5em;
  }

  .fvimage .ph {
    position: absolute;

    width: 180px;

    right: -1.5em;
    bottom: 0;
  }

}

@media screen and (max-width: 599px) {

  .fvimage .present_banner {
    width: 70vw;

    padding:
      0
      0
      3.5em
      1em;

    position: relative;

    z-index: 100;
  }

  .fvimage .ph {
    position: absolute;
    right: -6.5vw;
    width: 50.5vw;
  }

}



/* =========================================
   追加要素
========================================= */

.target-list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding-top: 22px;
}

.target-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 3px 6px;
  background: #fff;
  border-radius: 5px;
  color: #333;
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.target-check {
  color: #eb4628;
  font-weight: 800;
}

.target-description {
  color: #333;
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  padding-left: 4px;
}

/* ========================================
   SP：599px以下
======================================== */

@media screen and (max-width: 599px) {
  .target-list {
    gap: 1.2vw;
  }

  .target-item {
    gap: 0.8vw;
    padding: 2px 4px;
    font-size: 3.2vw;
    border-radius: 4px;
  }

  .target-check {
    font-size: 3.2vw;
  }

  .target-description {
    font-size: 3.2vw;
  }
}



/* =========================================
   横スクロール防止
========================================= */

html {
  width: 100%;
  max-width: 100%;

  overflow-x: hidden;
}

body {
  width: 100%;
  max-width: 100%;

  overflow-x: hidden;
}


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

footer {
  background:
    linear-gradient(
      30deg,
      #288232 0%,
      #32a03c 30%,
      #32a03c 70%,
      #288232 100%
    );
}

.footer-bg {
  font-size: 12px;
  color: #fff;

  padding: 4em 0;

  text-align: center;
}

@media screen and (max-width: 599px) {

  .footer-bg p {
    font-size: 3vw;
  }

}


/* =========================================
   チャット全体
========================================= */

#zeirishi-chat {
  background: #fff;
}

.step2-chat {
  padding: 5em 0;
}

@media screen and (max-width: 959px) {

  .step2-chat {
    padding: 4em 3em;
  }

}

@media screen and (max-width: 599px) {

  .step2-chat {
    padding: 4em 1em;
  }

}


/* =========================================
   最初のステップ
========================================= */

.first-step {
  width: 800px;

  max-width:
    calc(100% - 30px);

  margin: 0 auto;

  padding:
    2.5em
    0;
}

@media (min-width: 600px) and (max-width: 959px) {

  .first-step {
    width: auto;

    max-width: none;

    padding:
      35px
      40px
      50px;
  }

}

@media screen and (max-width: 599px) {

  .first-step {
    width: auto;

    max-width: none;

    padding:
      2em
      1em;
  }

}


/* =========================================
   STEP表示
========================================= */

.first-stepbar {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 100%;

  margin-bottom: 18px;
}

.first-step-label {
  font-size: 13px;
  font-weight: 700;

  margin-right: 8px;
}

.first-step-dot {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 25px;
  height: 25px;

  border-radius: 50%;

  background: #ddd;

  color: #777;

  font-size: 12px;
  font-weight: 700;

  flex: 0 0 25px;
}

.first-step-dot.is-current {
  background: #4db45c;
  color: #fff;
}

.first-step-line {
  width: 1em;
  height: 2px;

  background: #ddd;
}

.first-step-quick {
  margin-left: 12px;

  font-size: 10px;

  line-height: 1.2;

  text-align: center;
}

.first-step-quick strong {
  font-size: 16px;
}

@media screen and (max-width: 599px) {

  .first-step-label {
    font-size: 11px;
    margin-right: 5px;
  }

  .first-step-dot {
    width: 22px;
    height: 22px;

    flex-basis: 22px;

    font-size: 10px;
  }

  .first-step-line {
    width: 3vw;
  }

  .first-step-quick {
    margin-left: 7px;

    font-size: 8px;
  }

  .first-step-quick strong {
    font-size: 13px;
  }

}


/* =========================================
   最初の質問カード
========================================= */

.first-question-card {
  position: relative;

  background: #f3f3f3;

  border-radius: 14px;

  padding:
    2em
    11em;

  box-sizing: border-box;

  z-index: 1;

  overflow: visible;

  transition:
    background-color .25s ease;
}

.first-question-card.is-selected {
  background: #c7c7c7;
}

.first-question-title {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 6px;

  margin-bottom: 1em;

  text-align: center;

  font-size: 17px;
  font-weight: 700;

  line-height: 1.5;
}

@media screen and (max-width: 959px) {

  .first-question-card {
    padding: 2.5em;
  }

}

@media screen and (max-width: 599px) {

  .first-question-card {
    padding: 1.5em;

    border-radius: 12px;
  }

  .first-question-title {
    font-size: 3.5vw;

    margin-bottom: 1em;

    line-height: 1.5;
  }

}


/* =========================================
   選択肢
========================================= */

.choice-grid {
  display: flex;

  flex-direction: column;

  gap: 10px;
}

.choice-btn {
  appearance: none;
  -webkit-appearance: none;

  border: 0;

  background: #fff;
  color: #000;

  border-radius: 6px;

  width: 100%;

  min-height: 44px;

  padding:
    8px
    15px;

  font-family: inherit;

  font-size: 16px;
  font-weight: 700;

  line-height: 1.4;

  cursor: pointer;

  transition:
    background-color .2s ease,
    color .2s ease,
    transform .15s ease;

  box-sizing: border-box;
}

.choice-btn:hover {
  background: #3fae51;
  color: #fff;
}

.choice-btn:active {
  transform: scale(.98);
}


/* =========================================
   選択済み
========================================= */

.choice-btn.is-selected {
  background: #3fae51;
  color: #fff;
}


/*
   選択後は未選択ボタンをグレー
*/

.first-question-card.is-selected
.first-choice:not(.is-selected) {

  background: #d0d0d0;

  color: #777;
}


/*
   未選択ボタンにカーソルを乗せても
   緑にはしない
*/

.first-question-card.is-selected
.first-choice:not(.is-selected):hover {

  background: #c8c8c8;

  color: #777;
}


/*
   選択したボタンは白
*/

.first-question-card.is-selected
.first-choice.is-selected {

  background: #fff;

  color: #000;
}


/*
   選択済みボタンにカーソルを乗せても白
*/

.first-question-card.is-selected
.first-choice.is-selected:hover {

  background: #fff;

  color: #000;
}


/* =========================================
   次へボタン
========================================= */

.next-btn {
  display: block;

  width: 100%;
  height: 42px;

  margin:
    12px
    0
    0;

  border: 0;

  border-radius: 6px;

  background: #ccc;

  color: #fff;

  font-family: inherit;

  font-size: 13px;
  font-weight: 700;

  cursor: pointer;

  box-sizing: border-box;

  transition:
    background-color .2s ease,
    opacity .2s ease,
    transform .15s ease;
}

.next-btn:not(:disabled) {
  background: #4db45c;
}

.next-btn:not(:disabled):hover {
  opacity: .85;
}

.next-btn:disabled {
  cursor: not-allowed;
}

.first-next {
  position: relative;

  z-index: 10;
}

.first-next.is-ready {
  background: #4db45c;

  color: #fff;
}

@media screen and (max-width: 599px) {

  .next-btn {
    height: 40px;
    font-size: 3.5vw;
  }

}


/* =========================================================
   次へボタンの白い指カーソル
========================================================= */

#next-guide {
  position: absolute;

  z-index: 50;

  width: 36px;
  height: 48px;

  display: flex;

  align-items: center;
  justify-content: center;

  pointer-events: none;

  opacity: 0;

  transform:
    translate(-50%, -50%);

  transition:
    opacity .2s ease;
}


/*
   選択後だけ表示
*/

#next-guide.is-active {
  opacity: 1;
}


/*
   指カーソル本体
*/

#next-guide .next-guide-hand {
  position: relative;

  width: 30px;
  height: 42px;

  background: transparent;

  animation:
    next-guide-float
    1.4s
    ease-in-out
    infinite;

  transform-origin: center center;

  filter:
    drop-shadow(
      1px
      2px
      2px
      rgba(0, 0, 0, .35)
    );
}


/*
   SVG
*/

#next-guide .next-guide-hand svg {
  display: block;

  width: 100%;
  height: 100%;

  overflow: visible;
}


/*
   指カーソルが少し上下する
*/

@keyframes next-guide-float {

  0% {
    transform:
      translateY(5px);
  }

  50% {
    transform:
      translateY(-5px);
  }

  100% {
    transform:
      translateY(5px);
  }

}


/* =========================================
   STEP以降
========================================= */

.chat-step {
  display: none;

  width: 800px;

  max-width: 100%;

  margin:
    0
    auto
    35px;
}

.chat-step.is-active {
  display: block;

  animation:
    stepFadeIn
    .8s
    ease
    both;
}


/* =========================================
   吹き出し
========================================= */

.chat-question {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 14px;
}

.chat-avatar {
  width: 66px;
  height: 66px;

  flex:
    0
    0
    66px;
}

.chat-avatar img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;
}

.chat-balloon {
  position: relative;

  background: #fff;

  border: 1px solid #222;

  border-radius: 5px;

  padding:
    8px
    14px;

  font-size: 16px;
  font-weight: 700;

  line-height: 1.5;

  opacity: 0;

  transform:
    translateX(35px);

  animation:
    balloonIn
    .6s
    .3s
    ease
    forwards;
}

.chat-balloon::before {
  content: "";

  position: absolute;

  left: -6px;
  top: 50%;

  width: 10px;
  height: 10px;

  background: #fff;

  border-left:
    1px
    solid
    #222;

  border-bottom:
    1px
    solid
    #222;

  transform:
    translateY(-50%)
    rotate(45deg);
}


/* =========================================
   回答カード
========================================= */

.chat-card {
  background: #f3f3f3;

  border-radius: 14px;

  padding:
    2.5em
    11em;

  box-sizing: border-box;

  opacity: 0;

  transform:
    translateX(35px);

  animation:
    cardIn
    .8s
    .4s
    ease
    forwards;
}


/* =========================================
   地域
========================================= */

.choice-grid-region {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 10px;
}

@media screen and (max-width: 959px) {

  .chat-card {
    padding: 2.5em;
  }

}

@media screen and (max-width: 599px) {

  .chat-card {
    padding: 1.5em;

    border-radius: 12px;
  }

  .choice-btn {
    min-height: 40px;

    font-size: 4vw;

    padding:
      6px
      8px;
  }

  .choice-grid-region
  .choice-btn {

    font-size: 3.5vw;

    padding:
      6px
      4px;
  }

}


/* =========================================
   都道府県
========================================= */

.prefecture-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 10px;
}

@media screen and (max-width: 599px) {

  .prefecture-btn {
    font-size: 3.6vw;
  }

}


/* =========================================
   入力欄
========================================= */

#zeirishi-chat
input[type="text"],
#zeirishi-chat
input[type="tel"],
#zeirishi-chat
input[type="email"],
#zeirishi-chat
select {

  width: 100%;

  height: 46px;

  box-sizing: border-box;

  border: 0;

  border-radius: 6px;

  background: #fff;

  padding:
    0
    14px;

  font-family: inherit;

  font-size: 14px;

  color: #333;

  outline: none;
}

#zeirishi-chat
input:focus,
#zeirishi-chat
select:focus {

  box-shadow:
    0
    0
    0
    2px
    rgba(77,180,92,.2);
}

@media screen and (max-width: 599px) {

  #zeirishi-chat
  input[type="text"],
  #zeirishi-chat
  input[type="tel"],
  #zeirishi-chat
  input[type="email"],
  #zeirishi-chat
  select {

    font-size: 3.5vw;
  }

}


/* =========================================
   名前
========================================= */

.name-row {
  display: flex;

  flex-direction: column;

  gap: 10px;
}


/* =========================================
   ボタン横並び
========================================= */

.button-row {
  display: flex;

  justify-content: flex-end;

  gap: 8px;

  margin-top: 10px;
}

.button-row
.next-btn,
.button-row
.skip-btn {

  margin: 0;

  width: 120px;
}

.skip-btn {
  height: 42px;

  padding:
    0
    15px;

  border: 0;

  border-radius: 6px;

  background: #56b9d2;

  color: #fff;

  font-family: inherit;

  font-size: 13px;
  font-weight: 700;

  cursor: pointer;
}

.skip-btn:hover {
  opacity: .85;
}

@media screen and (max-width: 599px) {

  .button-row
  .next-btn,
  .button-row
  .skip-btn {

    width: 100px;
  }

  .skip-btn {
    height: 40px;

    font-size: 3.5vw;
  }

}


/* =========================================
   個人情報
========================================= */

.privacy-check {
  display: flex;

  justify-content: center;
  align-items: center;

  gap: 8px;

  margin:
    2.5em
    0;

  font-size: 12px;

  line-height: 1.5;

  cursor: pointer;
}

.privacy-check input {
  width: 15px !important;
  height: 15px !important;

  margin: 0;
}

.privacy-check a {
  border-bottom:
    1px
    solid;

  padding-bottom: .1em;

  text-decoration: none;
}


/* =========================================
   最終送信
========================================= */

.submit-btn {
  appearance: none;
  -webkit-appearance: none;

  background: #ccc;

  color: #fff;

  font-family: inherit;

  font-size: 24px;

  padding:
    .9em
    4.5em
    1.1em;

  height: unset;

  border: 0;

  border-radius: 100px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: .2em;

  cursor: pointer;

  box-sizing: border-box;
}

.submit-btn:not(:disabled) {
  background: #4db45c;
}

.submit-btn:not(:disabled):hover {
  opacity: .85;
}

.submit-badge {
  display: inline-block;

  margin-right: 3px;

  padding:
    .1em
    .8em
    .25em;

  border-radius: 100px;

  background: #ef4b35;

  font-size: 18px;
}

.arrow {
  font-size: 1.2em;

  line-height: 1;
}

@media screen and (max-width: 599px) {

  .submit-btn {
    width: 100%;

    padding:
      1em
      8vw;

    font-size: 5vw;
  }

  .submit-badge {
    font-size: 3.5vw;

    padding:
      .15em
      .8em
      .2em;
  }

}


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

@keyframes stepFadeIn {

  0% {
    opacity: 0;

    transform:
      translateY(10px);
  }

  100% {
    opacity: 1;

    transform:
      translateY(0);
  }

}

@keyframes balloonIn {

  0% {
    opacity: 0;

    transform:
      translateX(35px);
  }

  100% {
    opacity: 1;

    transform:
      translateX(0);
  }

}

@keyframes cardIn {

  0% {
    opacity: 0;

    transform:
      translateX(35px);
  }

  100% {
    opacity: 1;

    transform:
      translateX(0);
  }

}


/* =========================================
   スマホ
========================================= */

@media screen and (max-width: 599px) {

  .chat-question {
    gap: 3.5vw;
  }

  .chat-avatar {
    width: 46px;
    height: 46px;

    flex-basis: 46px;
  }

  .chat-balloon {
    font-size: 3.5vw;

    padding:
      7px
      10px;
  }

}


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

@media (prefers-reduced-motion: reduce) {

  .chat-step,
  .chat-balloon,
  .chat-card {

    animation: none;

    opacity: 1;

    transform: none;
  }

  #next-guide
  .next-guide-hand {

    animation: none;
  }

}

/* =========================================
   【追加】
   ※アンケート期間2026/7-2026/9　N=53
========================================= */
.mininote {
  font-size: 10px;
  vertical-align: super;
  font-weight: 100;
}
.mininote_text {
  font-size: 10px;
  font-weight: 100;
  margin: .5em 0 0 .5em;
}