@charset "UTF-8";

/* ===================================
全体
=================================== */
html {
  height: 100%;
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W6",
    "ヒラギノ角ゴ StdN W3", "Hiragino Kaku Gothic StdN W3", "ヒラギノ角ゴシック",
    "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック Medium",
    "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ＭＳ Ｐゴシック",
    "MS PGothic", "メイリオ", Meiryo, sans-serif;
  color: #333;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  height: 100%;
  line-height: 1.4;
  letter-spacing: 0.05em;
  padding-bottom: env(safe-area-inset-bottom);
}

input,
textarea,
select,
button {
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W6",
    "ヒラギノ角ゴ StdN W3", "Hiragino Kaku Gothic StdN W3", "ヒラギノ角ゴシック",
    "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック Medium",
    "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ＭＳ Ｐゴシック",
    "MS PGothic", "メイリオ", Meiryo, sans-serif;
  letter-spacing: 0.05em;
  outline: none;
  outline: 0;
}

a,
button {
  transition: 0.5s;
  text-decoration: none;
}

button {
  transition: 0.5s;
  cursor: pointer;
}

a:hover {
  opacity: 0.7;
}

.link {
  color: #000;
  text-decoration: underline;
}

* {
  box-sizing: border-box;
  line-break: strict;
}

img {
  width: 100%;
  max-width: 100%;
  display: block;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

[type="button"]:hover,
[type="image"]:hover,
[type="submit"]:hover {
  opacity: 0.6;
  -webkit-appearance: none;
  -webkit-appearance: none;
  -webkit-appearance: none;
}

@media (max-device-width: 480px) {

  [type="button"]:hover,
  [type="image"]:hover,
  [type="submit"]:hover {
    opacity: 1;
  }
}

label {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

select::-ms-expand {
  display: none;
}

input::-ms-clear {
  visibility: hidden;
}

.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: normal;
}

@media screen and (max-width: 600px) {
  .wrapper {
    width: 100%;
    display: block;
  }
}

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

/* ===================================
時間差fadeinアニメーション
=================================== */
@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade02 {
  0% {
    opacity: 0;
    transform: scale(1.1, 1.1);
  }

  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

.fade1 {
  animation: fade 1s both;
  animation-delay: 0.5s;
}

.fade2 {
  animation: fade 0.5s both;
  animation-delay: 1s;
}

.fade3 {
  animation: fade 0.5s both;
  animation-delay: 2s;
}

/* ===================================
header
=================================== */
.header {
  width: 350px;
  background-color: #fff;
  box-shadow: 0px 0px 10px 0px rgba(115, 141, 150, 0.6);
  z-index: 1;
  overflow: hidden;
  padding: 50px 10px 20px;
  box-sizing: border-box;
}

.header h1 img {
  display: block;
  max-width: 120px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.header p {
  padding-top: 28px;
  font-weight: bold;
  text-align: center;
  font-size: 16px;
  letter-spacing: 0;
}

@media screen and (max-width: 1024px) {
  .header {
    width: 300px;
  }
}

@media screen and (max-width: 768px) {
  .header {
    width: 250px;
    background-color: #fff;
    box-shadow: 0 0 13px rgba(119, 119, 119, 0.16);
    z-index: 1;
    overflow: hidden;
  }

  .header p {
    padding-top: 20px;
    font-size: 12px;
  }
}

@media screen and (max-width: 600px) {
  .fv-sp {
    background: #fff;
    padding: 20px;
  }

  .fv-sp img {
    display: block;
    max-width: 120px;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }

  .fv-sp p {
    padding-top: 10px;
    text-align: center;
    font-size: 16px;
  }
}

@media screen and (max-width: 420px) {
  .com {
    justify-content: space-between;
  }

  .com .item {
    font-size: 11px;
    text-align: left;
  }

  .com .item1 {
    width: 50%;
    padding-right: 0;
  }

  .com .item2 {
    width: 50%;
    padding-left: 0;
  }
}

@media screen and (max-width: 375px) {
  .com .item1 {
    width: 50%;
  }

  .com .item2 {
    width: 50%;
  }
}

@media screen and (max-width: 374px) {
  .com .item {
    padding: 0 5px;
    font-size: 10px;
  }

  .com .item1 {
    padding-right: 0;
  }

  .com .item2 {
    padding-left: 0;
  }
}

/* ===================================
header sp
=================================== */

.fv-sp {
  box-shadow: 0 0 10px 0 rgba(115, 141, 150, 0.6);
}

/* ===================================
main
=================================== */

.main {
  display: block;
  width: calc(100% - 350px);
  height: 100%;
  background-color: #f3ecec;
  overflow: auto;
}

.container {
  max-width: 740px;
  height: 100%;
  margin: 0 auto;
  padding: 40px 20px 0;
}

@media screen and (max-width: 1024px) {
  .main {
    width: calc(100% - 300px);
  }
}

@media screen and (max-width: 768px) {
  .main {
    width: calc(100% - 250px);
  }
}

@media screen and (max-width: 600px) {
  .main {
    width: 100%;
    display: block;
  }

  .container {
    width: 100%;
    padding: 20px 10px 0;
  }
}

/* ===================================
バー
=================================== */
.prg {
  width: 100%;
  height: 10px;
  margin-top: auto;
  padding: 50px 0;
}

.prg .prg-border {
  height: 10px;
  border-radius: 6px;
  border: solid 1px #ce6872;
  background-color: #fff;
}

.prg .prg-border #prg-bar {
  width: 0;
  height: 100%;
  border-radius: 5px 0 0 5px;
  background-color: #ce6872;
  transition: width 0.5s ease;
  position: relative;
}

.prg .prg-border #prg-bar .point {
  width: 40px;
  height: 40px;
  color: #fff;
  font-size: 12px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  background-color: #ce6872;
  display: block;
  position: absolute;
  top: -45px;
  right: -20px;
}

.prg .prg-border #prg-bar .point:before {
  font-size: 14px;
  font-weight: bold;
  content: "00";
}

.prg .prg-border #prg-bar .point:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -6px;
  right: 18px;
  width: 3px;
  height: 11px;
  background: #ce6872;
}

/*step1*/
.prg .prg-border #prg-bar.step1 {
  width: 20%;
}

.prg .prg-border #prg-bar.step1 .point:before {
  width: 20%;
  content: "20";
}

/*step2*/
.prg .prg-border #prg-bar.step2 {
  width: 40%;
}

.prg .prg-border #prg-bar.step2 .point:before {
  width: 40%;
  content: "40";
}

/*step3*/
.prg .prg-border #prg-bar.step3 {
  width: 60%;
}

.prg .prg-border #prg-bar.step3 .point:before {
  width: 60%;
  content: "60";
}

/*step4*/
.prg .prg-border #prg-bar.step4 {
  width: 80%;
}

.prg .prg-border #prg-bar.step4 .point:before {
  width: 80%;
  content: "80";
}


/*step5*/
.prg .prg-border #prg-bar.step5 {
  width: 100%;
}

.prg .prg-border #prg-bar.step5 .point:before {
  width: 100%;
  content: "100";
}

@media screen and (max-width: 1140px) {
  .prg {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media screen and (max-width: 600px) {
  .prg {
    position: fixed;
    bottom: 10px;
    left: 0;
    height: 6px;
    padding: 20px 20px;
  }

  .prg .prg-border {
    height: 6px;
  }

  .prg .prg-border #prg-bar .point {
    width: 35px;
    height: 35px;
    line-height: 35px;
    top: -42px;
    right: -17px;
    font-size: 10px;
  }

  .prg .prg-border #prg-bar .point:after {
    right: 16px;
  }
}

@media screen and (max-width: 374px) {
  .prg {
    /*bottom: 35px;*/
  }
}

/* ===================================
吹き出し
=================================== */
.q-lead .operator {
  margin-bottom: 10px;
}

.text .small {
  font-size: 80%;
  display: block;
  color: #999999;
}

.operator {
  display: none;
  position: relative;
  margin: 0 10px 20px 100px;
}

.operator:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100px;
  width: 80px;
  height: 80px;
  background: url(../img/ico-ope.png) left top no-repeat;
  background-size: 100%;
}

.operator.no-icon {
  min-height: auto;
}

.operator.no-icon:before {
  display: none;
}

.operator .text {
  padding: 15px 30px 15px 50px;
  display: inline-block;
  border-radius: 20px 20px 20px 0;
  background-color: #fff;
  font-size: 18px;
  line-height: 1.66666;
}

.operator.active {
  display: block;
}

/*
**ユーザー側
*/
.user {
  margin: 0 100px 60px 10px;
  text-align: right;
  position: relative;
  display: none;
}

.user:before {
  content: "";
  position: absolute;
  top: 0;
  right: -100px;
  width: 80px;
  height: 80px;
  background: url(../img/ico-you.png) no-repeat left top;
  background-size: 100%;
}

.user.no-icon {
  min-height: auto;
}

.user.no-icon:before {
  display: none;
}

.user .text {
  display: inline-block;
  padding: 15px 35px 15px 40px;
  color: #fff;
  text-align: left;
  border-radius: 20px 20px 0 20px;
  background-color: #ce6872;
  font-size: 18px;
  line-height: 1.66666;
}

.user.active {
  display: block;
}

.question {
  display: none;
}

.question.active {
  display: block;
}

.answer {
  margin-top: 30px;
  margin-bottom: 20px;
  display: none;
}

.answer.active {
  display: block;
}

@media only screen and (max-width: 1024px) {
  .operator .text {
    font-size: 14px;
  }

  .user .text {
    font-size: 14px;
  }
}

@media only screen and (max-width: 600px) {
  .operator {
    width: calc(100% - 65px);
    margin: 0 0 10px 65px;
  }

  .operator:before {
    width: 56px;
    height: 56px;
    left: -65px;
  }

  .operator .text {
    padding: 10px 20px;
    border-radius: 30px 30px 30px 0;
    font-size: 14px;
  }

  .user {
    width: calc(100% - 65px);
    margin: 0 65px 30px 0;
  }

  .user:before {
    width: 56px;
    height: 56px;
    right: -65px;
  }

  .user .text {
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 30px 30px 0 30px;
  }

  .answer {
    margin-top: auto;
    margin-bottom: 0;
  }
}

#q-box1 {
  display: block;
}

#a-box1 {
  display: block;
}

/* ===================================
フォーム
=================================== */
.form {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.form fieldset {
  margin: 0;
  padding: 0;
  border: none;
  display: block;
}

.form select {
  width: 100%;
  padding: 15px;
  border: solid 1px #939393;
  border-radius: 5px;
  background-color: #fff;
  color: #acacac;
  font-size: 18px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.select-wrap {
  position: relative;
}

.select-wrap:after {
  position: absolute;
  left: 270px;
  top: 24px;
  content: "";
  /*content: "\f078";*/
  /*font-family: "Font Awesome 5 Free";*/
  /*font-weight: 900;*/
  width: 10px;
  height: 10px;
  border-top: 2px solid #ce6872;
  border-left: 2px solid #ce6872;
  -webkit-transform: translateY(-50%) rotate(-135deg);
  transform: translateY(-50%) rotate(-135deg);
  font-size: 20px;
}

_:lang(x)+_:-webkit-full-screen-document,
.select-wrap:after {
  top: 28px;
}

.form select.js-selected {
  color: #383838;
}

.form input[type="text"],
.form input[type="tel"],
.form input[type="email"],
.form textarea {
  width: 100%;
  padding: 10px 15px;
  border: solid 1px #939393;
  border-radius: 5px;
  background-color: #fff;
  font-size: 18px;
}

.form input[type="text"]::-moz-placeholder,
.form input[type="tel"]::-moz-placeholder,
.form input[type="email"]::-moz-placeholder,
.form textarea::-moz-placeholder {
  color: #acacac;
  opacity: 1;
}

.form input[type="text"]:-ms-input-placeholder,
.form input[type="tel"]:-ms-input-placeholder,
.form input[type="email"]:-ms-input-placeholder,
.form textarea:-ms-input-placeholder {
  color: #acacac;
}

.form input[type="text"]::-webkit-input-placeholder,
.form input[type="tel"]::-webkit-input-placeholder,
.form input[type="email"]::-webkit-input-placeholder,
.form textarea::-webkit-input-placeholder {
  color: #acacac;
}

#answer1 {
  margin-top: 30px;
}

@media only screen and (max-width: 600px) {
  .form fieldset {
    padding-bottom: 80px;
  }

  .select-wrap:after {
    top: 28px;
  }

  _:lang(x)+_:-webkit-full-screen-document,
  .select-wrap:after {
    top: 31px;
  }

  .form select {
    color: #000;
    margin-top: 10px;
    padding: 10px 15px;
    font-size: 16px;
  }

  .form input[type="text"],
  .form input[type="tel"],
  .form input[type="email"] {
    margin-bottom: 10px;
    padding: 10px 15px;
    font-size: 16px;
  }

  #answer1 {
    margin-top: auto;
  }
}

/*
各フォーム調整
=================================== */
#area {
  max-width: 300px;
}

#budget,
#date,
#cost,
#num,
#address {
  max-width: 300px;
}

.select-wrap--address {
  margin-bottom: 10px;
}

#age {
  max-width: 300px;
}

@media only screen and (max-width: 600px) {
  .form #box-area {
    margin-bottom: 10px;
    display: block;
  }

  .form #box-area #area {
    width: 100%;
  }
}

/*
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop,
  .form {
    display: block;
  }
}
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop,
  .form fieldset {
    min-height: 600px;
  }
}*/

/*
チェックボックス、ラジオボタン
=================================== */
.form input[type="radio"],
.form input[type="checkbox"] {
  display: none;
}

.form .check-list {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% - 20px);
  margin: 0 -5px;
}

.form .check-list li {
  width: 50%;
  margin-bottom: 10px;
  padding: 0 5px;
}

.form .check-list .radio-list_label,
.form .check-list .check-list_label {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 5px;
  border: 1px solid #eeeeee;
  border-radius: 10px;
  background-color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  transition: 0.5s;
}

.form .check-list .radio-list_label .small,
.form .check-list .check-list_label .small {
  font-size: 14px;
}

.form .check-list .radio-list_label:hover,
.form .check-list .check-list_label:hover {
  opacity: 0.7;
}

.form .check-list input[type="radio"]:checked+label:hover,
.form .check-list input[type="checkbox"]:checked+label:hover {
  opacity: 1;
}

.form .check-list input[type="radio"]:checked+label,
.form .check-list input[type="checkbox"]:checked+label {
  color: #fff;
  border-color: #333333;
  background-color: #333333;
}

@media only screen and (max-width: 1024px) {
  .form .check-list {
    width: auto;
  }

  .form .check-list .radio-list_label,
  .form .check-list .check-list_label {
    padding: 15px 5px;
    font-size: 14px;
  }
}

@media only screen and (max-width: 600px) {
  .form .check-list {
    justify-content: center;
    margin-bottom: 10px;
  }

  .form .check-list li {
    max-width: 300px;
    width: 100%;
  }

  .form .check-list .radio-list_label,
  .form .check-list .check-list_label {
    padding: 10px 5px;
    font-size: 14px;
  }
}

/*
名前
=================================== */
.dl-list dt {
  margin-bottom: 10px;
  color: #ce6872;
  font-size: 18px;
  font-weight: bold;
}

@media screen and (max-width: 600px) {
  .dl-list dt {
    margin-bottom: 5px;
    font-size: 16px;
  }
}

/* ===================================
ボタン
=================================== */
.btn-wrap {
  margin-top: 50px;
}

.btn-next {
  display: block;
  position: relative;
  max-width: 300px;
  margin-left: auto;
  padding: 17px 35px 17px 30px;
  border-radius: 30px;
  color: #fff;
  background-color: #848484;
  border: 2px solid #848484;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.2em;
  cursor: not-allowed;
  transition: 0.5s;
}

.btn-next:after {
  content: "＞";
  position: absolute;
  right: 30px;
}

.btn-next:hover,
.btn-next:active,
.btn-next:focus {
  opacity: 1;
  text-decoration: none;
}

.btn-next.active {
  background-color: #333333;
  border: 2px solid #333333;

  cursor: pointer;
}

.btn-next.active:hover,
.btn-next.active:active,
.btn-next.active:focus {}

.btn-next.active:hover {
  background-color: #fff;
  color: #333333;
}

/*送信ボタン*/
.btn-submit {
  display: inline-block;
  max-width: 300px;
  width: 100%;
  box-sizing: border-box;
  padding: 1em;
  border: none;
  border-radius: 3em;
  color: #fff;
  /* background-color: #333; */
  /* border: 2px solid #333; */
  background-color: #848484;
  border: 2px solid #848484;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  cursor: not-allowed;
  transition: 0.5s;
}

.btn-submit:hover,
.btn-submit:active,
.btn-submit:focus {
  opacity: 1;
  text-decoration: none;
}

.btn-submit.active {
  background-color: #333;
  border: 2px solid #333;
  cursor: pointer;
}

.btn-submit.active:hover {
  background-color: #fff;
  color: #333;
}

/*トップボタン*/
.btn-top {
  display: block;
  max-width: 300px;
  margin: 0 auto;
  padding: 20px 10px;
  border-radius: 40px;
  color: #fff;
  background-color: #333;
  border: 2px solid #333;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  transition: 0.5s;
}

.btn-top:hover {
  opacity: 1;
  color: #333;
  background-color: #fff;
}

@media screen and (max-width: 600px) {
  .btn-wrap {
    margin-top: 20px;
  }

  .btn-next {
    max-width: 200px;
    font-size: 14px;
    padding: 12px 25px 12px 25px;
  }

  .btn-next:after {
    right: 20px;
  }

  .btn-submit {
    font-size: 20px;
  }

  /*トップボタン*/
  .btn-top {
    font-size: 20px;
  }
}

@media screen and (max-width: 374px) {
  .btn-submit {
    font-size: 16px;
  }
}

/* ===================================
サンクスページ
=================================== */
.thanks {}

.thanks section {
  background-color: #f3ecec;
  padding: 80px 20px 100px;
}

.thanks_logo {
  max-width: 260px;
  margin: 0 auto 30px;
}

.thanks h1 {
  margin-bottom: 30px;
  font-size: 30px;
  font-weight: bold;
}

.text-area {
  text-align: center;
}

.text-area p {
  font-size: 18px;
  line-height: 1.66666;
  margin-bottom: 60px;
}

.thanks .footer {
  padding: 60px 20px;
  background-color: #fff;
  text-align: center;
}

.copyright {
  font-size: 12px;
}

@media screen and (max-width: 500px) {
  .thanks section {
    padding: 30px 20px 100px;
  }

  .thanks_logo {
    max-width: 120px;
    margin: 0 auto 20px;
  }

  .thanks h1 {
    margin-bottom: 20px;
    font-size: 20px;
    text-align: center;
  }

  .text-area {
    text-align: left;
  }

  .text-area p {
    font-size: 14px;
    margin-bottom: 50px;
  }

  .thanks .footer {
    padding: 30px 20px;
  }
}

/* ===================================
ユーティリティ
=================================== */
/*
** 表示
*/
.hidden {
  display: none;
}

.show {
  display: block;
}

.none {
  display: none;
}

.pc {
  display: block;
}

.sp {
  display: none;
}

/*
** テキスト
*/
.orange {
  color: #f87603;
}

.red {
  color: #ce6872;
}

.bold {
  font-weight: bold;
}

.ib {
  display: inline-block;
}

.under{
  border-bottom: 1px solid #ce6872;
}

/*
** 改行
*/
.pc-br {
  display: inline;
}

.sp-br {
  display: none;
}

/*
** 寄せ
*/
.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

@media screen and (max-width: 600px) {
  .pc {
    display: none;
  }

  .sp {
    display: block;
  }

  .pc-br {
    display: none;
  }

  .sp-br {
    display: inline;
  }
}


/* popup */
.link{
  text-decoration: none;
}
.modal {
  display: none;
  border: 2px solid #dddddd;
  background-color: #fff;
  padding: 20px;
  max-width: 1100px;
  width: 90%;
  height: 70%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow-y: scroll;
  z-index: 10;
}
.modal_overlay {
  background: transparent;
  display: none;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 9;
}
.modal_title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
  color: #333333;
}
.modal_text {
  font-size: 12px;
  color: #404040;
}
.modal.show, .modal_overlay.show {
  display: block;
}
.close{
  font-size: 20px;
  color: #404040;
  width: fit-content;
  position: absolute;
  bottom: 9%;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
}
.rule-text {
  font-size: 12px;
  padding-top: 20px;
  line-height: 1.85em;
  width: 80%;
  margin: 0 auto;
}

@media screen and (max-width: 600px) {
  .modal {
    height: 80%;
  }
  .close{
    font-size: 16px;
    bottom: 6%;
  }
  .rule-text {
    width: 100%;
  }
}