@charset "utf-8";

/* ▼▼▼▼▼▼ 問い合わせフォーム ("導入サイトを確認する"も共通) ▼▼▼▼▼▼ */
#form_area .head_area{
height: 35vw;
text-align: center;
padding: 14.53vw 0 14.37vw;
background: linear-gradient(100deg, rgb(7 99 207 / 60%) 0%, rgb(7 99 207 / 70%) 30%, rgb(12 166 157 / 80%) 80%, rgb(12 166 157 / 60%) 100%);
}
#form_area .head_area h2{
font-size: 6.25vw;
color: #ffffff;
line-height: 6.09vw;
letter-spacing: 0.1em;
font-weight: 600;
}
#form_area .form_inner {
width: 100%;
padding: 12.5vw 5vw 16vw;
margin: 0;
}
#form_area .fix_area{
background: #F0F0F0;
padding: 7.5vw 12.8vw;
text-align: center;
color: #083461;
font-family: 'Noto Sans JP';
border-radius: 3.27vw;
margin-bottom: 11.25vw;
}
#form_area .fix_area h3{
font-weight: 700;
font-size: 4.06vw;
line-height: 4.84vw;
margin-bottom: 6.54vw;
white-space: nowrap;
font-family: "YuGothic", sans-serif;
}
#form_area .fix_area ul{
margin-bottom: 11.54vw;
padding: 0 0 0 13.11vw;
text-align: left;
}
#form_area .fix_area ul>li{
font-weight: 500;
font-size: 4.06vw;
line-height: 4.9vw;
margin-bottom: 2.5vw;
list-style: none;
position: relative;
font-family: "YuGothic", sans-serif;
}
#form_area .fix_area ul>li::before{
position: absolute;
content: "";
background: no-repeat url(../img/form/sp/check-rounded.webp) 100% / contain;
width: 5.36vw;
height: 5.36vw;
aspect-ratio: 1 / 1;
left: -8.18vw;
top: 0;
bottom: 0;
margin: auto;
}
#form_area .fix_area ul>li:last-child{
margin-bottom: 0;
}
#form_area .fix_area p{
font-size: 3.43vw;
margin-bottom: 2.8vw;
white-space: nowrap;
font-family: "YuGothic", sans-serif;
display: flex;
justify-content: center;
align-items: center;
gap: 1.77vw;
}
#form_area .fix_area p>span{
font-size: 2.5vw;
font-family: "YuGothic", sans-serif;
}
#form_area .fix_area .link{
font-weight: 700;
color: #083461;
font-size: 5vw;
font-family: "YuGothic", sans-serif;
}
#form_area .mauticform-row {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 7.5vw;
}
#form_area .mauticform-innerform{
padding: 0 5vw;
}
#form_area .mauticform-row label{
color: #083461;
font-weight: 700;
font-size: 3.43vw;
margin: 0 0 2vw;
}
#form_area .mauticform-row.mauticform-required .mauticform-label:after {
font-size: 3.12vw;
}
#form_area .mauticform-row input, #form_area .mauticform-row textarea {
width: 100%;
height: 10vw;
padding: 1.25vw 3.125vw;
margin-top: 0;
font-size: 16px;
border: 2px solid #D6D6D6;
background: #FDFDFD;
border-radius: 0.93vw;
}
#form_area .add_txt:after {
content: "例）詳しい料金について知りたい";
position: absolute;
top: 8.5vw;
left: 3.125vw;
color: #949494;
font-size: 16px;
font-weight: 400;
}

#form_area .mauticform-row .mauticform-helpmessage {
position: absolute;
top: -0.25vw;
left: 36.5%;
width: 7.5vw;
height: 4.375vw;
padding: 0.15vw 0.4vw;
font-size: 2.5vw;
border-radius: 0.93vw;
}
#form_area .mauticform-row textarea{
height: 42.84vw;
}

#form_area .mauticform-row:nth-of-type(5){
margin-bottom: 0;
}
#form_area .mauticform-freehtml {
display: block;
width: 71vw;
text-align: left;
margin: 11.25vw auto 3.75vw !important;
}
#form_area .mauticform-freehtml .mautic_txt1 {
font-size: 3.43vw;
line-height: 5.62vw;
margin-bottom: 3.75vw;
color: #083461;
}
#form_area .mauticform-freehtml .mautic_txt1 .sp_cont{
display: none;
}
#form_area .mauticform-row.mauticform-button-wrapper {
position: relative;
width: 65vw;
height: 13.75vw;
margin: 0 auto;
border-radius: 15.62vw;
overflow: hidden;
}
#form_area button[type="submit"]{
font-weight: 700;
font-size: 4.06vw;
letter-spacing: 0.36em;
background: linear-gradient(90deg, #0079BD 0%, #04A79B 100%);
box-shadow: 15px 12px 8px rgba(0, 0, 0, 0.01), 9px 7px 7px rgba(0, 0, 0, 0.05), 4px 3px 5px rgba(0, 0, 0, 0.09), 1px 1px 3px rgba(0, 0, 0, 0.1);
}

/* ▼▼▼▼▼▼ 導入サイトを確認する ▼▼▼▼▼▼ */
#form_area .introduction .fix_area{
    padding: 7.5vw 6vw;
}
#form_area .introduction .fix_area h3 .sp_cont{
display: inline-block;
}
#form_area .introduction .fix_area h3{
    font-weight: 500;
    font-size: 4.06vw;
    text-align: center;
    white-space: initial;
    line-height: 1.5;
    margin-bottom: 11.54vw;
}
#form_area .introduction .fix_area p{
font-size: 3.43vw;
}


@media screen and (min-width: 641px) and (max-width: 1279px){
/* ▼▼▼▼▼▼ 問い合わせフォーム ("導入サイトを確認する"も共通) ▼▼▼▼▼▼ */
#form_area .head_area{
height: 19.6vw;
padding: 8.28vw 0;
background: linear-gradient(100deg, rgb(7 99 207 / 50%) 0%, rgb(7 99 207 / 70%) 30%, rgb(12 166 157 / 80%) 80%, rgb(12 166 157 / 40%) 100%);
}
#form_area .head_area h2{
font-size: 3.125vw;
line-height: 3.04vw;
}
#form_area .form_inner {
width: 100%;
padding: 0 6.25vw 0;
position: relative;
margin: 10.625vw 0 21.01vw;
}
#form_area .fix_area{
position: fixed;
width: 40vw;
padding: 3.82vw 5.72vw 3.88vw 5.78vw;
border-radius: 1.63vw;
margin-bottom: 0;
margin-top: 0.625vw;
}
#form_area .fix_area h3{
font-size: 1.56vw;
line-height: 1;
margin-bottom: 3.27vw;
}
#form_area .fix_area ul{
margin-bottom: 3.27vw;
padding: 0 0 0 7.5vw;
}
#form_area .fix_area ul>li{
font-size: 1.4vw;
line-height: 2.45vw;
margin-bottom: 0.54vw;
}
#form_area .fix_area ul>li::before{
width: 2.18vw;
height: 2.18vw;
left: -3vw;
}
#form_area .fix_area .contact_info{
display: flex;
align-items: center;
justify-content: center;
}
#form_area .fix_area p{
position: relative;
font-size: 1.09vw;
margin: 0 3.81vw 0 0;
white-space: nowrap;
font-weight: 500;
text-align: right;
display: block;
align-items: initial;
}
#form_area .fix_area p>span{
font-size: 0.93vw;
margin-top: 0.88vw;
}
#form_area .fix_area p::after{
position: absolute;
content: "";
background: #083461;
width: 0.06vw;
height: 2.93vw;
top: 0;
bottom: 0;
margin: auto;
right: -1.87vw;
}
#form_area .fix_area .link{
font-size: 1.87vw;
white-space: nowrap;
}
#form_area form{
width: 40vw;
margin-left: auto;
}
#form_area .mauticform-error{
margin: 0;
}
#form_area .mauticform-row {
margin-bottom: 2.5vw;
}
#form_area .mauticform-innerform{
padding: 0;
}
#form_area .mauticform-row label{
font-size: 1.25vw;
margin: 0 0 0.625vw;
width: 27%;
}
#form_area .mauticform-row.mauticform-required .mauticform-label:after {
font-size: 1.09vw;
}
#form_area .mauticform-row input, #form_area .mauticform-row textarea {
width: 100%;
height: 3.125vw;
padding: 0.625vw 1.25vw;
font-size: 1.25vw;
border-radius: 0.46vw;
}
#form_area .add_txt:after {
top: 3.5vw;
left: 1.125vw;
font-size: 1.25vw;
}

#form_area .mauticform-row .mauticform-helpmessage {
left: 27%;
width: 2.5vw;
height: 1.4vw;
font-size: 0.93vw;
border-radius: 0.15vw;
padding: 0.13vw 0.31vw;
}
#form_area .mauticform-row textarea{
height: 11.96vw;
}
#form_area .mauticform-freehtml {
width: 100%;
text-align: center;
margin: 5.625vw auto 1.875vw !important;
}
#form_area .mauticform-freehtml .mautic_txt1 {
font-size: 1.09vw;
line-height: 1;
}
#form_area .mauticform-freehtml .mautic_txt1 .sp_cont{
display: none;
}
#form_area .mauticform-row.mauticform-button-wrapper {
width: 20.625vw;
height: 4.375vw;
border-radius: 7.81vw;
}
#form_area button[type="submit"]{
font-size: 1.48vw;
}

/* ▼▼▼▼▼▼ 導入サイトを確認する ▼▼▼▼▼▼ */
#form_area .introduction .fix_area h3 .sp_cont{
display: none;
}
#form_area .introduction .fix_area h3 .pc_cont{
display: inline-block;
}
#form_area .introduction .fix_area{
    padding: 7.37vw 4.82vw 7.37vw 4.48vw;
}
#form_area .introduction .fix_area h3{
    font-weight: 700;
    font-size: 1.56vw;
    text-align: left;
    line-height: 1.5;
    margin-bottom: 3.27vw;
}
#form_area .introduction .fix_area p{
font-size: 1.09vw;/* 14px */
}
}

@media screen and (min-width: 1280px){
/* ▼▼▼▼▼▼ 問い合わせフォーム ("導入サイトを確認する"も共通) ▼▼▼▼▼▼ */
#form_area .head_area{
height: 251px;
padding: 106px 0;
background: linear-gradient(100deg, rgb(7 99 207 / 50%) 0%, rgb(7 99 207 / 70%) 30%, rgb(12 166 157 / 80%) 80%, rgb(12 166 157 / 40%) 100%);
}
#form_area .head_area h2{
font-size: 40px;
line-height: 39px;
}
#form_area .form_inner {
width: 100%;
position: relative;
max-width: 1120px;
margin: 128px auto 269px;
padding: 0;
}
#form_area .fix_area{
position: fixed;
width: 512px;
padding: 52px 73.23px 52.74px 74px;
border-radius: 20.94px;
margin-bottom: 0;
margin-top: 8px;
}
#form_area .fix_area h3{
font-size: 20px;
line-height: 1;
margin-bottom: 41.89px;
}
#form_area .fix_area ul{
margin-bottom: 41.89px;
padding: 0 0 0 97px;
}
#form_area .fix_area ul>li{
font-size: 18px;
line-height: 31.4px;
margin-bottom: 6.98px;
}
#form_area .fix_area ul>li::before{
width: 27.92px;
height: 27.92px;
left: -40px;
}
#form_area .fix_area .contact_info{
display: flex;
align-items: center;
justify-content: center;
}
#form_area .fix_area p{
position: relative;
font-size: 14px;
margin: 0 48.87px 0 0;
white-space: nowrap;
font-weight: 500;
text-align: right;
display: block;
align-items: initial;
}
#form_area .fix_area p>span{
font-size: 12px;
margin-top: 11.34px;
}
#form_area .fix_area p::after{
position: absolute;
content: "";
background: #083461;
width: 0.87px;
height: 37.52px;
top: 0;
bottom: 0;
margin: auto;
right: -24.43px;
}
#form_area .fix_area .link{
font-size: 24px;
white-space: nowrap;
}
#form_area form{
width: 512px;
margin-left: auto;
}
#form_area .mauticform-error{
margin: 0;
}
#form_area .mauticform-row {
margin-bottom: 32px;
}
#form_area .mauticform-innerform{
padding: 0;
}
#form_area .mauticform-row label{
font-size: 16px;
margin: 0 0 8px;
width: 27%;
}
#form_area .mauticform-row.mauticform-required .mauticform-label:after {
font-size: 14px;
}
#form_area .mauticform-row input, #form_area .mauticform-row textarea {
width: 100%;
height: 40px;
padding: 8px 16px;
font-size: 16px;
border-radius: 6px;
}
#form_area .add_txt:after {
top: 34px;
left: 16px;
}

#form_area .mauticform-row .mauticform-helpmessage {
top: 0;
left: 27%;
width: 32px;
height: 14px;
font-size: 12px;
padding: 2px 4px;
border-radius: 2px;
}
#form_area .mauticform-row textarea{
height: 134px;
}
#form_area .mauticform-freehtml {
width: 100%;
text-align: center;
margin: 72px auto 24px !important;
}
#form_area .mauticform-freehtml .mautic_txt1 {
font-size: 14px;
line-height: 1;
margin-bottom: 24px;
}
#form_area .mauticform-freehtml .mautic_txt1 .sp_cont{
display: none;
}
#form_area .mauticform-row.mauticform-button-wrapper {
width: 264px;
height: 56px;
border-radius: 100px;
}
#form_area button[type="submit"]{
font-size: 19px;
}

/* ▼▼▼▼▼▼ 導入サイトを確認する ▼▼▼▼▼▼ */
#form_area .introduction .fix_area h3 .sp_cont{
display: none;
}
#form_area .introduction .fix_area h3 .pc_cont{
display: inline-block;
}
#form_area .introduction .fix_area{
    padding: 97px 67px 95px 67px;
}
#form_area .introduction .fix_area h3{
font-weight: 700;
font-size: 20px;
text-align: left;
line-height: 1.5;
margin-bottom: 41.89px;
}
#form_area .introduction .fix_area p{
font-size: 14px;
}
}

/* iOS用 */
@supports (-webkit-touch-callout: none) {
/* ▼▼▼▼▼▼ 問い合わせフォーム ("導入サイトを確認する"も共通) ▼▼▼▼▼▼ */
#form_area .fix_area p,
#form_area .fix_area ul>li {
font-weight: 600;
}
/* ▼▼▼▼▼▼ 導入サイトを確認する ▼▼▼▼▼▼ */
#form_area .introduction .fix_area h3 {
font-weight: 600;
}
}