@charset "UTF-8";
/* CSS Document */


/*-----------------------------
自動見積もりフォーム-レスポンシブ対応
-----------------------------*/
/*-----------------------------
プラグイン（先頭タイトル）箇所
------------------------------*/
#estimateForm-cover {
	padding-top: 200px;
}


.estimate-header-image {
    text-align: center;
    margin-bottom: 20px;
}
.estimate-header-image img {
    max-width: 100%;
    height: auto;
}

.estimate-header-con {
	max-width: 940px;
	min-width: 940px;
	height: auto;
	text-align: justify;
	margin: auto;
	font-size: 40px !important;
    padding: 20px;
	background-color: #fcf5f0;
	border-radius: 10px;
}

.estimate-header-title {
	max-width: 980px;
	min-width: 980px;
	height: auto;
	text-align: center;
	margin: auto;
	padding-top: 20px;
}
.estimate-header-title img {
    max-width: 100%;
    height: auto;
}

.estimate-jyosou-yokonagaimg {
	max-width: 700px !important;
	height: auto;
	text-align: left;
	padding: 20px 0;
}
.estimate-jyosou-yokonagaimg img {
    max-width: 100%;
    height: auto;
}


	
/*-----------------------------
プラグイン（フォーム）箇所
------------------------------*/
  #estimateForm,
  #estimateResult,
  #estimateDetails,
  .submission-message,
  #estimateCheckForm,
  .details-content {
      min-width: 90% !important;
      padding: 15px !important;
      box-sizing: border-box !important;
  }

span.estimate-choice-title {
	display: block;
	color: #be5465;
	font-size: 50px !important;
	padding-top: 40px !important;
}

.estimate-subtitle {
	text-align: justify;
	font-size: 33px !important;
	padding-bottom: 10px !important;
}


  #estimateForm select,
  #estimateForm input[type="email"],
  #estimateForm input[type="number"],
  .button-group button {
      width: 100% !important;
      margin-bottom: 10px !important;
      display: block !important;
  }

  .checkbox-group {
      flex-direction: column !important;
      gap: 10px !important;
  }

  .button-group {
      flex-direction: column !important;
      gap: 10px !important;
  }

  .details-list li {
      flex-direction: column !important;
      align-items: flex-start !important;
  }

  .details-label, .details-value {
      width: 100% !important;
      text-align: left !important;
  }



#estimateForm label,
  #estimateForm select,
  #estimateForm input[type="email"],
  #estimateForm input[type="number"],
  #estimateForm p,
  .checkbox-group label,
  .button-group button,
  #estimateCheckForm label,
  #estimateCheckForm input,
  #estimateCheckForm button,
  .submission-message,
  .details-label,
  .details-value {
      font-size: 40px !important;
  }

  .button-group button {
      padding: 30px !important;
  }

  #estimateResult h3 {
      font-size: 30px !important;
  }

  #totalPrice {
      font-size: 80px !important;
  }



.details-title {
    font-size: 3.0rem !important;
    font-weight: bold;
    color: #0073aa;
    text-align: center;
    margin-bottom: 15px;
}

/*-----------------------------
プラグイン（チェックボックスやセレクトボックス）箇所
------------------------------*/
.checkbox-group input[type="checkbox"] {
    transform: scale(2.8);
    margin-right: 22px !important;
	margin-left: 22px !important;
  }

    .button-group button {
        font-size: 1.2rem;
        padding: 16px;
    }




/* FAQ箇所 */
#estimateForm .faq-banner {
    cursor: pointer;
    margin: 20px 0;
    text-align: center;
}
#estimateForm .faq-banner img {
    max-width: 100%;
    height: auto;
}

#estimateForm .faq-item {
    border-top: 1px solid #ccc;
    padding: 10px;
}
#estimateForm .faq-question {
    font-weight: bold;
    cursor: pointer;
    font-size: 35px !important;
    padding: 10px 10px 10px 0;
	color: #e35513
}
#estimateForm .faq-question::after {
    content: '▶';
    position: absolute;
    right: 0;
    transition: transform 0.3s;
}
#estimateForm .faq-question.active::after {
    transform: rotate(90deg);
}
#estimateForm .faq-answer {
    font-size: 30px !important;
    padding-left: 10px;
    color: #333;
}




/* バナーのリョクミンふわふわ設定 */
.faq-banner-wrapper {
  position: relative;
  display: inline-block;
	padding: 80px 0 50px 0;
}

.faq-banner-text img {
  width: 100%;
  height: auto;
}

.faq-girl-float {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 240px; /* 女の子画像のサイズに応じて調整 */
  animation: floatY 2.5s ease-in-out infinite;
  z-index: 10;
}

/* アニメーションの定義 */
@keyframes floatY {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}