.text-green{
    color: #178352;
}
.text-yellow{
    color: #FFFFCB;
}

.highlight {
  text-decoration: underline; /* 下線 */
  text-decoration-thickness: 0.5em; /* 線の太さ */
  text-decoration-color: rgba(255, 228, 0, 0.4); /* 線の色 */
  text-underline-offset: -0.4em; /* 線の位置。テキストに重なるようにやや上部にする */
  text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */
}



/*ファーストビュー*/
.first-view{
    position: relative;
}
/*お問い合わせフォーム*/
.first-view .form-wrap{
    position: absolute;
    top: 10%;
    right: 12%;
    width: 29.375rem;
    height: auto;
    padding: 0.938rem;
    background-color: #178352;
    border-radius: 0.625rem;
    box-sizing: border-box;
    z-index: 10;
}
.form-lead{
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
}
.form-lead + p{
    font-size: 1.063rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
}
.text-wrap{
    display: inline;
}

.form-down-arrow{
    display: flex;
    justify-content: center;
    gap: 0.625rem;
    margin: 0.625rem 0;
}
.form-down-arrow img{
    width: 4.04%;
}

form{
    padding: 1.25rem 1.5rem;
    background-color: #fff;
}

/* フォームグループ */
.form-group {
    margin-bottom: 0.938rem;
}

.form-group label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.313rem;
    font-size: 0.938rem;
    color: #178352;
    line-height: 1;
}

/* ラベルのバッジ（必須・任意） */
.label-required, .label-optional {
    color: #fff;
    padding: 0.167em 0.417em;
    border-radius: 3px;
    font-size: 0.75;
    font-weight: 500;
    margin-left: 8px;
    vertical-align: middle;
}

.label-required {
    background-color: #d9534f; /* 赤色 */
}

.label-optional {
    background-color: #999; /* グレー */
}

/* 入力フィールドとテキストエリア */
input[type="text"],
input[type="email"],
input[type="url"],
textarea {
    width: 100%;
    max-height: 30px;
    padding: 0.533em 1em;
    border: 3px solid #E0E0E0;
    border-radius: 0.188rem;
    box-sizing: border-box;
    font-size: 0.938rem;
    font-weight: 500;
    line-height: 1;
}

input::placeholder,
textarea::placeholder {
    color: #bbb;
}

textarea {
    resize: none;
}

/* ファイルアップロード */
.file-upload-wrapper {
    display: flex;
    align-items: center;
}

.file-upload-wrapper input[type="text"] {
    flex-grow: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background-color: #fff; /* readonlyでも白背景にする */
}
.file-upload-wrapper label{
    color: #383838;
    line-height: 1;
    font-size: 0.8rem;
    margin-bottom: 6px;
    max-height: 30px;
}

.file-input-button {
    padding: 0.571em 0.714em;
    margin-top: 0.35rem;
    background-color: #D6D6D6;
    border: 2.5px solid #D6D6D6;
    border-left: none;
    border-top-right-radius: 0.188rem;
    border-bottom-right-radius: 0.188rem;
    cursor: pointer;
    font-size: 0.875;
    font-weight: 500;
    white-space: nowrap;
    
}

.file-input-hidden {
    display: none;
}

/* 個人情報の取り扱い */
.privacy-policy {
    text-align: center;
    margin-bottom: 0.938rem;
}

.privacy-policy p {
    font-size: 0.813rem;
    margin-bottom: 1rem;
}
.privacy-policy a {
    color: #00A0E6;
    text-decoration: underline;
}

/* カスタムチェックボックス */
.checkbox-container {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
}

.checkbox-container input {
    display: none; /* 元のチェックボックスを非表示 */
}

.checkmark {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-right: 10px;
    background-color: #fff;
    position: relative;
}
.checkbox-container input:checked + .checkmark {
   background-color: #007bff; /* チェック時の背景色を青に */
   border-color: #007bff; /* チェック時のボーダー色も青に */
}
.checkbox-container input:checked + .checkmark::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.submit-btn:disabled {
    background-image: none;
    background-color: #ccc;
    cursor: not-allowed; /* カーソルを禁止マークに */
    opacity: 0.7;
}

/* 送信ボタン */
 .submit-btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0.8em;
    background-image: linear-gradient(to bottom, #FE9723, #F83F5F);
    border: none;
    border-radius: 0.625rem;
    color: #fff;
    font-size:1.25rem;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.3s ease;
}
 .submit-btn::after{
    content: "";
    position: absolute;
        top: 40%;
    transform: translateY(-50%);
    left: 22rem;
    width: 12px;
    height: 12px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: rotate(-45deg);
}
.submit-btn:hover {
    opacity: 0.9;
}

.footer-note{
    margin-top: 0.938rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.66;
}

 

.first-view-text-area{
    padding-top: 15%;
    padding-bottom: 6.25rem;
    padding-left: 11.6%;
    padding-right: 11.6%;
}

.heading-with-line {
  display: flex;
  align-items: flex-end; /* ★テキストブロックの「下端」を基準に揃える */
}
.lead{
    position: relative;
    margin-bottom: 3.125rem;
    font-size: 1.688rem;
    font-weight: 700;
    color: #178352;
    line-height: 1.42;
}
.lead .text-wrap{
    display: block;
}
.green-line{
    position: absolute;
    width: 54vw;
    max-width: 772px;
    bottom: 0.2em;
    left: 12em;
    height: 2px;  /* ラインの太さ */
    background-color: #178352; /* ラインの色 */

  /*
   ★ラインを最後の行のテキストの中央に配置するための微調整
   font-sizeの半分くらいの値を指定するのが目安です。
  */
  margin-bottom: 0.5em;
}

.first-view-text-area p{
    font-size: 1.125rem;
    font-weight: 600;
    color: #374453;
    line-height: 1.94;
}

@media(max-width: 899px){
      .green-line{
        display: none;
    }
    
    .content_wrap{
        padding-left: 5.33%;
        padding-right: 5.33%;
    }

   .first-view .form-wrap{
        position: static;
        width: 100%;
        margin-top: 1.3rem;
    }
    .form-wrap .text-wrap{
        display: block;
    }


    .form-lead{
        font-size: 1.313rem;
        line-height: 1.28;
    }
    .form-lead + p{
        font-size: 1.063rem;
    }
    .form-down-arrow{
        margin: 0.938rem 0;
    }
    .form-down-arrow img{
        width: 100%;
        max-width: 19px;
    }

    form{
        padding: 1.563rem 0.938rem;
    }

    .submit-btn{
        font-size: 1.125rem;
    }
    .submit-btn::after{
        left: 92%;
    }

    .first-view-text-area{
        padding-left: 0;
        padding-right: 0;
    }
    .lead{
        font-size: 1.25rem;
        margin-bottom: 1.875rem;
    }
    .lead .text-wrap{
        display: inline;
    }
    .first-view-text-area p{
        font-size: 0.875rem;
    }
}



/*design-about middle-section*/
.design-about-title{
    max-width: 926px;
    margin: 0 auto;
}
.middle-section{
    position: relative;
    max-height: 277px;
    background-color: #178352;
}
.middle-section.design-about{
     margin-bottom: 16.125rem;
}

.middle-section_inner{
    display: flex;
    width: 1106px;
    margin: 0 auto;
    padding: 3.125rem;
    background-color: #fff;
    border-radius: 0.625rem;
    background-image: url(../img/mass-bg-image@2x.png);
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
}
.middle-section_inner.design-about{
    gap: 8%;
    max-height: 397px;
}
.middle-section_inner-text{
    display: flex;
    flex-direction: column;
    gap: 1.222em;
    width: 700px;
    font-size: 1.125rem;
    font-weight: 600;
    color: #374453;
    line-height: 1.94;
}

.middle-section-image_01{
    width: 100%;
    max-width: 169px;
}

@media(max-width: 899px) {
    .middle-section.design-about{
        margin-bottom: 26.875rem;
    }
    .design-about-title{
        max-width: 368px;
    }

    .middle-section_inner.design-about{
        flex-direction: column;
        align-items: center;
        gap: 1.575rem;
        width: 100%;
        height: 100%;
        max-width: 335px;
        max-height: 648px;
        margin-top: 0.563rem;
        padding: 1.563rem;
        padding-bottom: 0;
    }
    .middle-section_inner-text{
        width: 100%;
        font-size: 0.875rem;
    }
    .middle-section-image_01{
        width: 100%;
        max-width: 93px;
    }
}


/*デザイン診断でわかる４つのこと*/
.benefits-heading{
    position: relative;
    padding-top: 8.875rem;
    padding-bottom: 6.25rem;
    padding-left: 11.53%;
    padding-right: 11.53%;
}

.benefits-heading_bg-image_01{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -10;
}
.benefits-heading_bg-image_02{
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -10;
}

.benefits-heading-title{
    text-align: center;
    font-size: 2.5rem;
    font-weight: bold;
    color: #178352;
}
.benefits-heading-title span{
    font-size: 3.188rem;
}

.benefits-heading_01{
    max-width: 1106.5px;
    margin-top: 3.188rem;
}

.benefits-heading_lead{
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.8;
    margin-top: 3.156rem;
    margin-left: 21.6rem;
}
.benefits-heading_lead p:first-child{
    display: inline-block;
    margin-bottom: 1em;
}
.benefits-heading_lead span{
    padding: 0.321em 0.536em;
    color: #FFFFCB;
    background-color: #178352;
    border-radius: 5px;
    margin-right: 0.179em;
}

.benefits-heading_02{
    position: absolute;
    bottom: 0;
    left: 0;
    max-width: 607px;
    z-index: -1;
}

/**
.diagnosis-points {
    width: 100%;
    max-width: 1100px;
    margin: 4rem auto;
    padding: 0 1rem;
    
    display: flex;
    flex-direction: column;
    gap: 8rem;
}

.section-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 2rem;
}


.point-item {
    position: relative;
}

.point-item__bg-number {
    position: absolute;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 7rem;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.05);
    z-index: 0; 
    line-height: 1;
    font-family: 'Arial Black', sans-serif;
}

.point-item__bg-number::before {
    content: '';
    position: absolute;
    top: -1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background-color: #1abc9c; 
}


.point-item__content {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    padding: 2.5rem;
    position: relative;
    z-index: 1;
    
    display: flex;
    align-items: center;
    gap: 3rem;
}


.point-item--reverse .point-item__content {
    flex-direction: row-reverse;
}

.point-item__text-content {
    flex: 1; 
}
.point-item__figure {
    flex: 1;
    margin: 0;
}

.point-item__figure img {
    border-radius: 8px;
    transform: scale(1.1); 
}

.point-item:not(.point-item--reverse) .point-item__figure {
    margin-right: -4rem;
}

.point-item--reverse .point-item__figure {
    margin-left: -4rem;
}

.point-item__title {
    font-size: 1.5rem;
    font-weight: bold;
    position: relative;
    padding-left: 2.5rem; 
    padding-bottom: 1rem; 
    margin-top: 0;
    margin-bottom: 1rem;
}

.point-item__title::before {
    content: '\f002'; 
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
    background-color: #1abc9c; 
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.point-item__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    
    background: linear-gradient(to right, #1abc9c 60px, #e9ecef 60px);
}

.point-item__description {
    margin: 0;
}
**/
@media (max-width: 899px) {
    .benefits-heading{
        padding: 18.67% 5.33% 16%;
    }
    .benefits-heading-title{
        font-size: 1.25rem;
    }
    .benefits-heading-title span{
        font-size: 1.938rem;
    }

    .benefits-heading_01{
        margin: 0 auto;
        max-width: 335.75px;
        margin-top: 2.375rem;
    }

    .benefits-heading_lead{
        font-size: 0.875rem;
        margin-top: 1.281rem;
        line-height: 1.6;
        margin-left: 0;
    }
    .benefits-heading_lead span{
        border-radius: 2px;
        padding: 0.357em;
        margin-right: 0.133em;
    }

    .benefits-heading_02{
        display: none;
    }

/**
    .diagnosis-points {
        gap: 6rem; 
    }

    .point-item__content {
   
        flex-direction: column;
        padding: 1.5rem;
        gap: 1.5rem; 
    }

    .point-item:not(.point-item--reverse) .point-item__figure,
    .point-item--reverse .point-item__figure {
        margin: 0;
    }
    .point-item__figure img {
        transform: scale(1); 
    }

    .point-item__title {
        order: 1;
    }
    .point-item__figure {
        order: 2;
        width: 100%; 
    }
    .point-item__description {
        order: 3;
    }

    .point-item__text-content {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
        **/
}


.recommended-for-title{
    max-width: 398px;
    margin: 0 auto;
}

.middle-section.recommended-for{
     margin-bottom: 33.125rem;
}

.middle-section_inner.recommended-for{
    display: block;
    position: relative;
    line-height: 1;
    gap: 1rem;
    padding-bottom: 11.5rem;
}

.middle-section-image_02{
    max-width: 165.32px;
}

.recommended-for-list_wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
}

.recommended-for-list li {
    display: flex;
    align-items: center;
    gap: 0.6em;
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1.288em;
}
.recommended-for-list li:last-child{
    margin-bottom: 0;
}
.recommended-for-list li::before{
    content: "";
    display: block;
    width: 25.23px;
    height: 25.42px;
    background-image: url(../img/check-icon_01@2x.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.recommended-for_lead{
    display: block;
    font-size: 1.125rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.944;
    margin: 0.811em auto 0;
}
.recommended-for_lead .text-wrap{
    display: block;
}

.middle-section-image_03{
    position: absolute;
    max-width: 610.52px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.middle-section-image_04{
    position: absolute;
    max-width: 232px;
    bottom: -7%;
    right: 1%;
}

@media(max-width: 899px){

    .middle-section.recommended-for{
        margin-bottom: 28.125rem;
    }

    .recommended-for-title{
        max-width: 200px;
    }

    .middle-section_inner.recommended-for{
        width: 335px;
        padding: 0.75rem;
        padding-bottom: 19.5rem;
        margin-top: 1.313rem;
    }

    .recommended-for-list_wrapper{
        flex-direction: column;
        margin-top: -7%;
    }

    .middle-section-image_02{
        max-width: 59.32px;
    }

    .recommended-for-list li{
        display: block;
        position: relative;
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 1.357;
        margin-left: 1rem;
        margin-bottom: 0.714em;
    }

    .recommended-for-list li::before{
        position: absolute;
        width: 14px;
        height: 14px;
        top: 0.2em;
        left: -1.4em;
    }

    .middle-section-image_03{
        max-width: 335px;
        bottom: 32%;
    }

    .recommended-for_lead{
        font-size: 0.875rem;
        margin-top: 2.857em;
        line-height: 1.357;
    }
    .recommended-for_lead .text-wrap{
        display: inline;
    }

    .middle-section-image_04{
        max-width: 190px;
        bottom: 1.5%;
        left: 50%;
        transform: translateX(-50%);
    }
}



.users-voices{
    position: relative;
    padding-bottom:4.375rem;
    background-color: #E5FFF3;
}

.users-voices-title{
    max-width: 1010px;
    margin: 0 auto;
}

.users-voices-list{
    display: flex;
    flex-wrap: wrap;
    gap: 2.875rem 3.75rem;
    width: 1106px;
    margin: 4.188rem auto 1.938rem;
}

.users-voices-list li{
    display: flex;
    align-items: center;
}

.users-image{
  position: relative;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background-color: #14B45D;
  margin-right: -4.1rem;
  z-index: 1;
}
.users-image::after{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 14px solid #14B45D;
  top: 50%; 
  left: 98%;
  transform: translateY(-50%);
} 

.users-voices-list li p{
  display: block;
  width: 467px;
  height: 103px;
  font-size: 1.125rem;
  font-family: dnp-shuei-mgothic-std, sans-serif;
  font-style: normal;
  line-height: 1.944;
  padding-top: 1.079em;
  padding-bottom: 1.389em;
  padding-left: 5em;
  padding-right: 1em;
  background-color: #fff;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
}

.image-and-lead_wrapper{
    width: 984px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}

.users-voices-lead{
    max-width: 591px;
    margin-left: 4.5rem;
}

.user-voice_image_01{
    width: 377px;
}

@media(max-width: 899px){
    .users-voices{
        padding: 0 5.33%;
    }

    .users-voices-title{
        max-width: 400px;
    }

.users-voices-list{
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    width: 335px;
    margin: 1.5rem auto 2.188rem;
  }

     .users-image{
    width: 75px;
    height: 75px;
    margin-right: -2.7rem;
  }
  .users-image::after{
    border-top: 4.535px solid transparent;
    border-bottom: 4.535px solid transparent;
    border-left: 9.07px solid #14B45D;
  }

  .users-voices-list li p{
    width: 303px;
    height: 66px;
    font-size: 0.813rem;
    line-height: 1.538;
    padding-bottom: 1.462em;
    padding-left: 4.238em;
  }

  .image-and-lead_wrapper{
    width: 335px;
    flex-direction: column;
    align-items: center;
    gap: 0.938rem;
  }

  .users-voices-lead{
    width: 335px;
    margin-left: 0;
  }

  .user-voice_image_01{
    width: 187px;
  }
}







.qa-section{
    padding: 6.94% 0 0.64%;
}

.qa-section-title{
    font-size: 3.875rem;
    font-weight: bold;
    color: #178352;
    text-align: center;
    margin: 0 auto;
    line-height: 1;
}

.qa-section-title-sub{
    display: block;
    font-size: 1.375rem;
    font-weight: bold;
    color: #374453;
    text-align: center;
    margin: 0 auto;
}

.qa-list{
    width: 1106px;
    margin-top: 4.406rem;
    margin-bottom: 6.25rem;
    margin-left: auto;
    margin-right: auto;
}

.qa-list li{
     padding: 2.906rem 2.4rem 2.906rem 7.156rem;
     border-top: 0.031rem solid #707070;
}
.qa-list li:last-child{
  margin-bottom: 0;
    border-bottom: 0.031rem solid #707070;
}

.question{
    position: relative;
    font-size: 1.438rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.435em;
}

.answer{
    position: relative;
    justify-content: flex-start;
    align-items: center;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.94;
    margin-left: 4rem;
}

.question,
.answer{
    display: flex;
    align-items: baseline;
    gap: 1.7em;
}
.question::before{
    position: relative;
    top: 0.2em;
    content: "Q";
    font-size: 2.188rem;
    font-weight: bold;
    color: #178352;
}
.answer::before{
    position: relative;
    top: 0.2em;
    content: "A";
    font-size: 2.188rem;
    font-weight: bold;
}

.qa-lead{
    display: block;
    font-size: 1.438rem;
    font-weight: 700;
    margin: 0 auto;
    text-align: center;
}

@media(max-width:899px){
    .qa-section{
        padding: 12.8% 5.33% 0;
    }

    .qa-section-title{
        font-size: 1.25rem;
        color: #24A410;
    }

    .qa-section-title-sub{
        font-size: 1.25rem;
    }

    .qa-list{
        width: 100%;
        margin-top: 1.969rem;
    }

    .qa-list li{
        padding:1.781rem 0 1.281rem;
    }

    .question{
        font-size: 0.938rem;
        line-height: 1.33;
        margin-bottom: 0.438rem;
    }
    .answer{
        font-size: 0.875rem;
        line-height: 1.5;
        margin-left: 0.5rem;
    }
    .question,
    .answer{
        gap: 1.2em;
    }

    .question::before{
        top: 0.1em;
        font-size: 1.25rem;
        color: #13B55E;
    }
    .answer::before{
        font-size: 1.25rem;
    }

    .qa-lead{
        font-size: 0.875rem;
        line-height: 1.42;
    }
    .qa-lead .text-wrap{
        display: block;
    }
    .qa-lead .comma-remove{
        display: none;
    }

}




.last-form_area{
    padding: 4.375rem 0;
    background-image: url(../img/last-form_area_bg-image@2x.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.form-wrap{
    top: 2%;
    right: 12%;
    width: 29.375rem;
    height: auto;
    margin: 0 auto;
    padding: 0.938rem;
    background-color: #178352;
    border-radius: 0.625rem;
    box-sizing: border-box;
    z-index: 10;
}

@media(max-width: 899px){
    .last-form_area{
    padding: 1.563rem 5.33% 4.375rem;
    background-image: url(../img/last-form_area_bg-image_sp@2x.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

 .form-wrap{
    width: auto;
 }
}