@charset "UTF-8";
*, *::before, *::after {
box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
margin: 0; }
ul[role="list"], ol[role="list"] {
list-style: none; }
html:focus-within {
scroll-behavior: smooth; }
body {
min-height: 100vh;
text-rendering: optimizeSpeed;
line-height: 1.5; }
a:not([class]) {
text-decoration-skip-ink: auto; }
img, picture {
max-width: 100%;
display: block; }
input, button, textarea, select {
font: inherit; }

@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important; } }
img {
max-width: 100%;
height: auto;
backface-visibility: hidden; }
ul, li {
list-style: none;
padding: 0;
margin: 0; }
a {
outline: none;
text-decoration: none; }

/*--------------------------------------------------
全体設定
---------------------------------------------------*/
html, body {
overflow-x: hidden;
scroll-behavior: smooth;
scroll-padding-top: 60px; }
@media screen and (min-width: 768px) {
html, body {
scroll-padding-top: 144px; } }

body {
font-size: 16px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 500;
color: #333333;
overflow-x: hidden; }

.sec.sec_fill {
background: #f2f7fa; }
.sec.sec_fill02 {
background: #1671b6; }

/*--------------------------------------------------
ヘルパークラス
---------------------------------------------------*/
@media screen and (max-width: 767px) {
.hp_sp_br {
display: block; } }
@media screen and (min-width: 768px) {
.hp_sp_br {
display: none; } }
@media screen and (max-width: 767px) {
.hp_pc_br {
display: none; } }
@media screen and (min-width: 768px) {
.hp_pc_br {
display: block; } }
.hp_ta-c {
text-align: center !important; }
.hp_ta-r {
text-align: right !important; }
.hp_txt_small {
font-size: 0.8em; }
.hp_txt_large {
font-size: 1.5em; }
.hp_img_tac {
display: block;
margin: 0 auto; }
.hp_mt20 {
margin-top: 20px; }
.hp_txt_caution {
color: #E00429; }
.hp_txt_orange {
color: #F97171; }
.hp_txt_exBold {
font-weight: 900; }
.hp_txt_underLine {
background: linear-gradient(transparent 75%, #FFE564 75%); }
.hp_txt_slant {
position: relative;
}
.hp_txt_slant::before {
display: block;
content: "";
width: 1em;
height: 2px;
border-radius: 12px;
background: #000000;
position: absolute;
top: 50%;
left: -1.2em;
-webkit-transform: translateY(-50%) rotate(70deg);
transform: translateY(-50%) rotate(70deg); }
.hp_txt_slant::after {
display: block;
content: "";
width: 1em;
height: 2px;
border-radius: 12px;
background: #000000;
position: absolute;
top: 50%;
right: -1.2em;
-webkit-transform: translateY(-50%) rotate(-70deg);
transform: translateY(-50%) rotate(-70deg); }
.hp_txt_slant.hp_txt_slant__w::before {
background: #fff; }
.hp_txt_slant.hp_txt_slant__w::after {
background: #fff; }
.hp_txt_slant.hp_txt_slant__multi {
position: relative;
font-weight: bold; }
.hp_txt_slant.hp_txt_slant__multi::before {
display: block;
content: "";
width: 2em;
height: 2px;
border-radius: 12px;
background: #000000;
position: absolute;
top: 50%;
left: -4.2em;
-webkit-transform: translateY(-50%) rotate(70deg);
transform: translateY(-50%) rotate(70deg); }
.hp_txt_slant.hp_txt_slant__multi::after {
display: block;
content: "";
width: 2em;
height: 2px;
border-radius: 12px;
background: #000000;
position: absolute;
top: 50%;
right: -3.2em;
-webkit-transform: translateY(-50%) rotate(-70deg);
transform: translateY(-50%) rotate(-70deg); }
.hp_pos_rel {
position: relative; }
.hp_underline_y {
border-bottom: solid 2px #F6CE25; }

/*--------------------------------------------------
btn
---------------------------------------------------*/
.btn {
display: block;
width: 100%;
border-radius: 4px;
padding: 1em;
text-align: center;
transition: .3s all;
background: #F97171;
}
.btn > .inner {
display: flex;
justify-content: center;
align-items: center; }
.btn .txt {
width: 100%;
color: #fff;
font-size: 1.125em;
font-weight: bold; }
.btn .icon {
width: 24px;
margin-left: auto; }
.btn.btn__submit {
font-size: 1.313em;
color: #fff;
font-weight: bold;
background: linear-gradient(90deg, #ffcd14 0%, #ff5639 100%);
border-style: none;
box-shadow: 0px 5px 12px -1px rgba(0, 0, 0, 0.2);
cursor: pointer; }
.btn.btn__submit::after {
display: none; }
.btn.btn__submit.js-disabled {
background: #fff;
color: #333;
pointer-events: none;
border: solid 1px #333;
cursor: default;
box-shadow: none; }
.btn.btn__back {
background: #fff;
border: solid 1px #878C9A;
cursor: pointer;
box-shadow: 0px 4px 0px 3px #878C9A; }
.btn.btn__back > .txt {
color: #878C9A; }
.btn.btn__back::after {
display: none; }

/*--------------------------------------------------
header
---------------------------------------------------*/
.header {
width: 100%;
position: fixed;
top: 0;
z-index: 99999;
background: #FFFFF9;
-webkit-transition: .3s all;
transition: .3s all; }
.header + #confirm, .header + #thanks {
position: static; }
.header.js-active:not(.js-nav-active) {
background: #FFFFF9;
}
.header.js-active:not(.js-nav-active) .logoBox .logoTxt {
color: #00B67F; }
.header.js-active:not(.js-nav-active) .navBox .navList > li > a {
color: #00B67F; }
.header.js-nav-active {
background: transparent; }
.header.js-nav-active .logoBox .logoTxt {
color: #00B67F; }
.header.js-nav-active .navBox .navList > li > a {
color: #00B67F; }
.header.header__single {
position: static;
}
@media screen and (min-width: 768px) {
.header.header__single .logoBox {
width: 270px; } }
.header > .inner {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
padding: 0.5em 0.8em;
gap: 16px;
row-gap: 40px;
position: relative;
z-index: 9999; }
@media screen and (min-width: 768px) {
.header > .inner {
padding: 0.5em 1em;
flex-wrap: nowrap;
gap: 16px; } }
.header .logoBox {
width: 70%;
-ms-flex: 0 1 auto;
flex: 0 1 auto; }
@media screen and (min-width: 768px) {
.header .logoBox {
width: 250px; } }
.header .logoBox .logoTxt {
color: #00B67F;
font-size: 1.313em; }
@media screen and (min-width: 768px) {
.header .logoBox .logoTxt {
font-size: clamp(20px, 2.5vw, 30px); } }
.header .navBox {
display: none;
width: 100%;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
margin-left: auto; }
@media screen and (min-width: 768px) {
.header .navBox {
display: block;
width: 100%;
max-width: 520px; } }
.header .navBox.js-active {
display: block; }
.header .navBox .navList {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
gap: 24px; }
@media screen and (min-width: 768px) {
.header .navBox .navList {
justify-content: flex-end;
flex-direction: row;
gap: 40px; } }
.header .navBox .navList > li {
text-align: center;
width: 100%; }
@media screen and (min-width: 768px) {
.header .navBox .navList > li {
width: auto; } }
.header .navBox .navList > li > a {
display: block;
width: 100%;
padding: 0.5em;
font-size: 0.875em;
color: #00B67F; }
@media screen and (min-width: 768px) {
.header .navBox .navList > li > a {
flex-direction: row;
display: inline;
width: auto;
padding: 0; } }
.header .btnBox {
display: none;
-ms-flex: 0 1 auto;
flex: 0 1 auto; }
@media screen and (min-width: 768px) {
.header .btnBox {
display: block;
width: 100%;
max-width: 210px; } }
.header .navBtn {
display: block;
width: 40px;
height: 20px;
position: relative;
cursor: pointer;
z-index: 999; }
@media screen and (min-width: 768px) {
.header .navBtn {
display: none; } }
.header .navBtn.js-active .navBtnLine {
transition: .3s all;
top: 50%;
bottom: auto;
-webkit-transform: rotate(-45deg) translateY(-50%);
transform: rotate(-45deg) translateY(-50%); }
.header .navBtn.js-active .navBtnLine:nth-child(2) {
display: none; }
.header .navBtn.js-active .navBtnLine:nth-child(3) {
top: 50%;
bottom: auto;
-webkit-transform: rotate(45deg) translateY(-50%);
transform: rotate(45deg) translateY(-50%); }
.header .navBtn .navBtnLine {
width: 100%;
height: 2px;
background: #00B67F;
position: absolute;
top: 0;
right: 0;
margin: auto; }
.header .navBtn .navBtnLine:nth-child(2) {
top: 50%; }
@media screen and (min-width: 768px) {
.header .navBtn .navBtnLine:nth-child(2) {
width: 70%; } }
.header .navBtn .navBtnLine:nth-child(3) {
top: auto;
bottom: 0; }
@media screen and (min-width: 768px) {
.header .navBtn .navBtnLine:nth-child(3) {
width: 50%; } }
.gnaviBg {
display: none;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
position: absolute;
top: 0;
left: 0;
z-index: 100; }
.gnaviBg {
display: none;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
position: absolute;
top: 0;
left: 0;
z-index: 100; }

/*--------------------------------------------------
footer
---------------------------------------------------*/
.footer {
background: #F3F3F3; }
.footer .upperBox {
padding: 2em 1em; }
.footer .logoBox {
margin: 0 auto; }
@media screen and (min-width: 768px) {
.footer .logoBox {
max-width: 260px;
width: 100%; } }
.footer .logoBox .logo {
color: #00B67F;
font-size: 2em;
letter-spacing: 0.01em;
text-align: center;
font-weight: bold; }
.footer .linkBox {
width: 100%;
margin: 2em auto; }
.footer .linkBox > .linkList > li {
text-align: center; }
.footer .linkBox > .linkList > li > a {
color: #3A3E49;
font-weight: bold;
font-size: 0.875em; }
.footer .addressBox {
text-align: center; }
.footer .addressBox .txt {
font-weight: bold;
font-size: 0.875em; }
.footer .copyrightBox {
display: block;
width: 100%;
text-align: center;
padding: 0.8em;
background: #3A3E49; }
.footer .copyrightBox > small {
font-size: 0.8em;
color: #fff; }

/*--------------------------------------------------
PC右固定
---------------------------------------------------*/
.fixedBox {
display: block;
position: fixed;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: 999;
background: #00B67F; }
@media screen and (min-width: 768px) {
.fixedBox {
display: none; } }
.fixedBtn {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
box-shadow: 0px 1px 14px -4px rgba(0, 0, 0, 0.4);
gap: 0;
padding: 0.5em 0; }
@media screen and (min-width: 768px) {
.fixedBtn {
display: none; } }
.fixedBtn .imgBox {
width: 60%; }

/*--------------------------------------------------
SP固定フッター
---------------------------------------------------*/
.floatContacts {
position: fixed;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: 5;
display: flex;
justify-content: space-between; }
@media screen and (min-width: 768px) {
.floatContacts {
display: none; } }
.floatContacts .btnBox {
width: 100%;
display: flex;
justify-content: space-evenly;
align-items: center; }
.floatContacts .telBox {
width: 100%; }
.floatContacts .telBox > a {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row-reverse;
background: #f2f7fa;
padding: .5em 0; }
.floatContacts .telBox .txtBox {
text-align: center; }
.floatContacts .telBox .txtBox .spTxt {
display: block;
color: #008ed8;
font-size: min(3.5vw, 18px);
line-height: 1; }
.floatContacts .telBox .txtBox .numTxt {
display: block;
color: #008ed8;
font-weight: 700;
font-family: 'Roboto';
font-size: min(4vmax, 48px);
line-height: 1;
margin: 0.2em auto; }
.floatContacts .telBox .txtBox .timeTxt {
display: block;
font-size: min(3vw, 16px);
line-height: 1;
color: #101112; }
.floatContacts .telBox .iconBox {
width: 24%; }
.floatContacts .telBox .iconBox > img {
margin: 0 auto; }
.floatContacts .lineBox {
width: 100%;
display: flex;
align-items: center;
align-self: stretch;
justify-content: center;
max-width: 65px;
background: #00B900;
padding: 1em;
font-size: min(3vw, 32px); }
.floatContacts .mailBox {
width: 100%;
display: flex;
align-items: center;
align-self: stretch;
justify-content: center;
max-width: 65px;
background: #008ED8;
padding: 1em;
font-size: min(3vw, 32px); }
input::placeholder,
textarea::placeholder {
color: #ccc; }
input {
width: 100%;
font-size: 1.125em;
padding: 0.3em 0.5em; }
input[type="radio"] {
width: auto; }
input[type="checkbox"] {
width: auto;
-webkit-transform: scale(1.5);
transform: scale(1.5); }
textarea {
width: 100%;
font-size: 1.125em;
padding: 0.5em; }
select {
width: 100%;
font-size: 1.125em;
padding: 0.5em; }
.agreeBox {
margin: 2em auto; }
.agreeBox > .inner {
text-align: center; }
.agreeBox .txtBox > a {
text-decoration: underline !important; }
.submitBox {
margin: 2em auto;
width: 90%; }
@media screen and (min-width: 768px) {
.submitBox {
max-width: 320px;
width: 100%; } }

/*--------------------------------------------------
確認画面
---------------------------------------------------*/
#confirm {
background: #F7F6EE; }
#confirm .formBox {
background: #fff;
padding: 2em;
border-radius: 12px; }
#confirm > .inner {
width: 100%;
margin: 2em auto; }
@media screen and (min-width: 768px) {
#confirm > .inner {
max-width: 800px; } }
#confirm .ttlBox {
padding: 0.2em 0.5em;
text-align: center; }
#confirm .ttlBox .ttl {
font-weight: bold;
font-size: 1.2em;
letter-spacing: 0.05em; }
@media screen and (min-width: 768px) {
#confirm .ttlBox .ttl {
font-size: 1.5em; } }
#confirm .leadBox {
text-align: center;
margin: 40px auto 24px; }
#confirm .leadBox .txt {
line-height: 1.8; }
#confirm .submitBox {
width: 100%; }
@media screen and (min-width: 768px) {
#confirm .submitBox {
max-width: 380px; } }
#confirm .submitBox > .inner {
display: flex;
flex-direction: column-reverse;
align-items: center;
justify-content: center;
gap: 24px; }
#confirm .submitBox .btnBox {
width: 100%; }
#confirm .submitBox .btnBox.btnBox__back {
width: 60%; }

/*--------------------------------------------------
完了画面
---------------------------------------------------*/
#thanks > .inner {
width: 100%;
margin: 2em auto;
padding: 2em 1em; }
@media screen and (min-width: 768px) {
#thanks > .inner {
max-width: 800px; } }
#thanks .ttlBox {
padding: 0.2em 0.5em;
text-align: center; }
#thanks .ttlBox .ttl {
font-weight: bold;
font-size: 1.2em;
letter-spacing: 0.2em; }
@media screen and (min-width: 768px) {
#thanks .ttlBox .ttl {
font-size: 1.5em; } }
#thanks .imgBox {
width: 90%;
margin: 2em auto; }
#thanks .imgBox > img {
display: block;
margin: 0 auto; }
#thanks .leadBox {
margin: 2em auto; }
#thanks .leadBox .txt {
line-height: 1.8; }
#thanks .leadBox.leadBox__caution {
border: solid 1px #E00429;
border-radius: 12px;
padding: 1.5em; }
#thanks .topBtnBox {
margin: 2em auto;
width: 80%; }
@media screen and (min-width: 768px) {
#thanks .topBtnBox {
width: 100%;
max-width: 300px; } }

/*--------------------------------------------------
フォーム大枠
---------------------------------------------------*/
#mainform {
display: block;
width: 100%;
background: #fcebda;
padding: 0em 0em 1em;
}
.ttlBox {
    padding: 0 0em 0px;
}
.txt_lead {
font-family: "ab-kokoro-no1", sans-serif;
font-weight: 400;
font-style: normal;
color: #00B67F;
font-size: clamp(18px, 4.6vw, 24px);
}
#mainform > .ttlBox .ttl {
text-align: center;
}
#mainform > .ttlBox .ttl .txt {
display: inline-block;
text-align: center;
font-weight: bold;
font-size: 1.313em;
letter-spacing: 0.1em;
position: relative;
}
#mainform > .ttlBox .ttl .txt::after {
display: block;
content: "";
width: 20%;
height: 140%;
background: url("../images/img-woman-soudan@2x.webp");
background-size: contain;
background-repeat: no-repeat;
position: absolute;
bottom: 0;
right: -62px;
z-index: 1;
}
@media screen and (min-width: 768px) {
#mainform > .ttlBox .ttl .txt::after {
width: 86px;
height: 86px;
bottom: 0;
right: -90px;
}
}
#mainform > .inner {
padding: 0em 0em 3em 0em;
}
@media screen and (min-width: 768px) {
#mainform > .inner {
padding: 0.5em 3em 3em 3em;
}
}

/*--------------------------------------------------
fv
---------------------------------------------------*/
.fv {
background: #FFFFF9;
padding-top: 80px;
padding-bottom: 50px;
}
@media screen and (min-width: 768px) {
.fv {
padding-top: 100px;
}
}
.fv_inner {
width: 92%;
margin: auto;
}
.fv_wrapper {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
max-width: 957px;
margin: auto;
}
@media screen and (min-width: 768px) {
.fv_wrapper {
flex-direction: row;
max-width: 957px;
margin: auto;
}
}
.fv_wrapper_inner:first-child {
margin-top: 20px;
}
@media screen and (min-width: 768px) {
.fv_wrapper_inner:first-child {
margin-top: unset;
z-index: 1;
}
}
.fv_wrapper_inner:last-child {
margin-top: 20px;
}
@media screen and (min-width: 768px) {
.fv_wrapper_inner:last-child {
flex: 0 1 55%;
margin-top: unset;
margin-left: -40px;
}
}
.fv_lead {
margin-top: 10px;
}
.fv_lead_text {
font-family: "ab-kokoro-no1", sans-serif;
font-weight: 400;
font-style: normal;
color: #F97171;
font-size: 28px;
}
.fv_message_text {
font-size: clamp(28px, 7.4vw, 32px);
font-weight: 700;
color: #00B67F;
}
.fv_message_list {
margin-top: 10px;
}
.fv_message_item {
display: flex;
align-items: center;
gap: 10px;
}
.fv_message_item:not(:first-child) {
margin-top: 10px;
}
.fv_message_item span:first-child > img {
width: 20px;
}
.fv_message_item span:last-child {
font-size: 18px;
font-weight: 700;
color: #00B67F;
}
/*--------------------------------------------------
about
---------------------------------------------------*/
#about > .inner {
margin: 0 auto;
padding: 3em 1em; }
@media screen and (min-width: 768px) {
#about > .inner {
max-width: 960px;
width: 100%;
padding: 4em 1em; } }
#about > .inner > .ttlBox {
text-align: center;
}
#about > .inner > .ttlBox .ttl {
display: block;
font-size: 1.313em;
letter-spacing: 0.1em; }
@media screen and (min-width: 768px) {
#about > .inner > .ttlBox .ttl {
font-size: 2em; } }
#about .imgBox {
margin: 24px auto; }
#about .aboutList {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 20px;
flex-direction: column; }
@media screen and (min-width: 768px) {
#about .aboutList {
flex-direction: row; } }
#about .aboutList > li {
width: 100%;
-ms-flex: 0 1 auto;
flex: 0 1 auto; }
#about .aboutList > li .ttlBox {
text-align: center; }
#about .aboutList > li .ttlBox > .ttl {
display: block;
font-size: 1.1em; }
@media screen and (min-width: 768px) {
#about .aboutList > li .ttlBox > .ttl {
font-size: 1.125em; } }
#about .leadBox {
text-align: left;
line-height: 1.8;
margin: 1.5em auto; }
#about .industryBox {
margin: 5em auto 2em; }
#about .industryBox > .inner {
background: #58F0C2;
padding: 2em 1em;
border-radius: 12px; }
@media screen and (min-width: 768px) {
#about .industryBox > .inner {
padding: 2em 3em; } }
#about .industryBox > .inner > .ttlBox .ttl {
display: block;
font-size: 1.313em;
text-align: center; }
@media screen and (min-width: 768px) {
#about .industryBox > .inner > .ttlBox .ttl {
font-size: 1.8em; } }
#about .industryBox .listBox {
margin: 2em auto 0;
width: 100%; }
@media screen and (min-width: 768px) {
#about .industryBox .listBox {
max-width: 520px; } }
#about .industryBox .industryList {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
gap: 8px;
row-gap: 12px;
max-width: 250px;
margin: auto;
}
@media screen and (min-width: 768px) {
#about .industryBox .industryList {
max-width: unset;
margin: unset;
}
}
#about .industryBox .industryList > li {
width: auto;
background: #fff;
padding: 0.3em 2em;
border-radius: 44px; }
#about .industryBox .industryList + span {
display: block;
margin: 0.5em;
text-align: right; }

/*--------------------------------------------------
お悩み
---------------------------------------------------*/
#trouble {
background: #F6F6F6;
padding: 4em 4vw 0;
position: relative;
z-index: 2; }
@media screen and (min-width: 768px) {
#trouble {
padding: 4em 3em 0; } }
#trouble::after {
display: block;
content: "";
width: 0;
height: 0;
border-style: solid;
border-right: 50vw solid transparent;
border-left: 50vw solid transparent;
border-top: 13vw solid #f6f6f6;
border-bottom: 0;
position: absolute;
bottom: -47px;
left: 0;
right: 0;
margin: auto;
z-index: 1; }
@media screen and (min-width: 768px) {
#trouble::after {
bottom: -76px;
border-top: 6vw solid #f6f6f6; } }
#trouble .inner {
width: 100%;
margin: 0 auto; }
@media screen and (min-width: 768px) {
#trouble .inner {
max-width: 950px; } }
#trouble .inner > .ttlBox {
text-align: center; }
#trouble .inner > .ttlBox .subTtl {
font-size: 1.125em;
letter-spacing: 0.1em; }
#trouble .inner > .ttlBox .ttl {
font-size: 2em;
letter-spacing: 0.1em; }
#trouble .troubleBox {
margin: 3em auto; }
@media screen and (min-width: 768px) {
#trouble .troubleBox {
margin: 3em auto 0; } }
#trouble .troubleList {
display: grid;
grid-template-columns: repeat(1, minmax(200px, 1fr));
grid-gap: 20px; }
@media screen and (min-width: 768px) {
#trouble .troubleList {
grid-template-columns: repeat(2, minmax(455px, 1fr));
grid-gap: 40px; } }
#trouble .troubleList > li {
width: 80%;
text-align: center;
padding: 2em;
font-weight: bold;
border-radius: 12px;
position: relative;
z-index: 1; }
@media screen and (min-width: 768px) {
#trouble .troubleList > li {
width: 90%;
margin: 0 auto; } }
#trouble .troubleList > li::after {
display: block;
content: "";
width: 0;
height: 0;
border-style: solid;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-top: 16px solid #00B67F;
border-bottom: 0;
position: absolute;
bottom: -12px;
left: 0;
right: 0;
margin: auto;
z-index: 2; }
#trouble .troubleList > li:nth-of-type(2n) {
margin-left: auto; }
#trouble .troubleList > li:nth-of-type(1) {
background: #00B67F; }
#trouble .troubleList > li:nth-of-type(2) {
background: #58F0C2; }
#trouble .troubleList > li:nth-of-type(2)::after {
border-top: 16px solid #58F0C2; }
#trouble .troubleList > li:nth-of-type(3) {
background: #98CABB; }
#trouble .troubleList > li:nth-of-type(3)::after {
border-top: 16px solid #98CABB; }
#trouble .troubleList > li:nth-of-type(4) {
background: #C1FCEA; }
#trouble .troubleList > li:nth-of-type(4)::after {
border-top: 16px solid #C1FCEA; }
#trouble .imgBox {
width: 60%;
margin: 2em auto; }
@media screen and (min-width: 768px) {
#trouble .imgBox {
max-width: 380px; } }

/*--------------------------------------------------
解決できます！
---------------------------------------------------*/
#point > .inner {
width: 100%;
margin: 0 auto;
padding: 4em 0; }
@media screen and (min-width: 768px) {
#point > .inner {
max-width: 950px; } }
#point > .inner > .ttlBox {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column-reverse;
margin: 0 auto;
gap: 24px;
text-align: center; }
@media screen and (min-width: 768px) {
#point > .inner > .ttlBox {
max-width: 760px;
flex-direction: row;
text-align: left; } }
#point > .inner > .ttlBox > .ttl {
width: 100%;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
font-size: 1.9em; }
@media screen and (min-width: 768px) {
#point > .inner > .ttlBox > .ttl {
font-size: 2.5em; } }
#point > .inner > .ttlBox > .ttl > span {
display: block;
line-height: 1.4; }
@media screen and (min-width: 768px) {
#point > .inner > .ttlBox > .ttl > span {
line-height: 1.7; } }
#point > .inner > .ttlBox > .ttl > .hp_txt_small {
font-size: 0.7em; }
#point > .inner > .ttlBox .imgBox {
width: 70%;
-ms-flex: 0 1 auto;
flex: 0 1 auto; }
#point .pointBox {
margin: 3em auto;
padding: 0 3vw; }
@media screen and (min-width: 768px) {
#point .pointBox {
padding: 0; } }
#point .pointList > li:nth-of-type(n+2) {
margin-top: 2em; }
#point .pointList > li > .inner {
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column; }
@media screen and (min-width: 768px) {
#point .pointList > li > .inner {
flex-direction: row; } }
#point .pointList > li > .inner.inner__rev {
flex-direction: column; }
@media screen and (min-width: 768px) {
#point .pointList > li > .inner.inner__rev {
flex-direction: row-reverse; } }
#point .pointList > li > .inner.inner__rev .txtBox {
border-radius: 12px 12px 0 0; }
@media screen and (min-width: 768px) {
#point .pointList > li > .inner.inner__rev .txtBox {
border-radius: 0 12px 12px 0; } }
#point .pointList > li > .inner.inner__rev .imgBox {
border-radius: 0 0 12px 12px; }
@media screen and (min-width: 768px) {
#point .pointList > li > .inner.inner__rev .imgBox {
border-radius: 12px 0 0 12px; } }
#point .pointList > li .txtBox {
width: 100%;
background: #C1FCEA;
padding: 8vw;
border-radius: 12px 12px 0 0;
display: flex;
align-items: center;
align-self: stretch; }
@media screen and (min-width: 768px) {
#point .pointList > li .txtBox {
padding: 3em;
border-radius: 12px 0 0 12px; } }
#point .pointList > li .ttlBox {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
gap: 24px; }
#point .pointList > li .ttlBox .numBox {
width: 72px; }
#point .pointList > li .ttlBox .ttl {
width: 100%;
font-size: 1.5em; }
#point .pointList > li .imgBox {
width: 100%;
/*max-height: 180px;*/
-ms-flex: 0 1 auto;
flex: 0 1 auto;
border-radius: 0 0 12px 12px;
overflow: hidden; }
@media screen and (min-width: 768px) {
#point .pointList > li .imgBox {
max-height: unset;
border-radius: 0 12px 12px 0; } }
#point .pointList > li .imgBox > img {
object-fit: cover; }
#point .pointList > li .leadBox {
margin: 2em 0 0; }
#point .pointList > li .leadBox > .txt {
line-height: 1.8; }

/*--------------------------------------------------
flow
---------------------------------------------------*/
#flow > .inner {
width: 100%;
margin: 0 auto;
padding: 4em 4vw; }
@media screen and (min-width: 768px) {
#flow > .inner {
max-width: 950px; } }
#flow > .inner > .ttlBox {
text-align: center; }
#flow > .inner > .ttlBox .ttl {
font-size: 2em;
letter-spacing: 0.1em; }
#flow .flowBox {
margin: 3em auto; }
#flow .flowList {
display: grid;
grid-template-columns: repeat(1, minmax(300px, 1fr));
grid-gap: 16px; }
@media screen and (min-width: 768px) {
#flow .flowList {
grid-gap: 40px;
grid-template-columns: repeat(2, minmax(440px, 1fr)); } }
#flow .flowList > li:nth-of-type(2n) {
margin-top: 3em; }
#flow .flowList > li .imgBox {
position: relative;
z-index: 1; }
#flow .flowList > li .imgBox > img {
width: 80%;
display: block;
margin-left: auto; }
#flow .flowList > li .imgBox.imgBox__rev > img {
margin-right: auto;
margin-left: 0; }
#flow .flowList > li .numBox {
width: 122px;
position: absolute;
bottom: 0;
left: 0;
z-index: 2; }
#flow .flowList > li .numBox.numBox__rev {
left: auto;
right: 0; }
#flow .flowList > li .txtBox {
width: 88%;
background: #F6F6F6;
border-radius: 12px;
padding: 1.2em;
margin-top: 1em; }
@media screen and (min-width: 768px) {
#flow .flowList > li .txtBox {
min-width: 410px;
min-height: 200px; } }
#flow .flowList > li .txtBox.txtBox__rev {
margin-left: auto; }
#flow .flowList > li .txtBox .ttl {
font-size: 1.313em; }
#flow .flowList > li .leadBox {
margin: 1em 0; }

/*--------------------------------------------------
お悩み
---------------------------------------------------*/
#faq {
background: #F6F6F6;
padding: 4em 3em 0;
position: relative;
z-index: 2; }
#faq > .inner {
width: 100%;
margin: 0 auto;
padding: 4em 0; }
@media screen and (min-width: 768px) {
#faq > .inner {
max-width: 950px; } }
#faq > .inner > .ttlBox {
text-align: center; }
#faq > .inner > .ttlBox .ttl {
font-size: 2em;
letter-spacing: 0.1em; }
#faq .faqBox {
margin: 3em auto; }
#faq .faqList > li:nth-of-type(n+2) {
margin-top: 1em; }
#faq .faqList > li .ttlBox {
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
background: #58F0C2;
padding: 0.8em 1em;
border-radius: 12px 12px 0 0;
gap: 16px; }
@media screen and (min-width: 768px) {
#faq .faqList > li .ttlBox {
padding: 0.8em 2em;
gap: 24px; } }
#faq .faqList > li .ttlBox > .ttl {
font-weight: bold;
font-size: 1.125em; }
#faq .faqList > li .ttlBox > .imgBox {
width: 40px;
-ms-flex: 0 1 auto;
flex: 0 1 auto; }
#faq .faqList > li .contBox {
background: #fff;
padding: 1.5em 2em;
border-radius: 0 0 12px 12px; }
#faq .faqList > li .contBox .txt {
line-height: 1.8; }

/*--------------------------------------------------
フッター直前のcv
---------------------------------------------------*/
#cv {
background: #FFFDC4;
padding: 2em 2vw; }
@media screen and (min-width: 768px) {
#cv {
padding: 4em 3em; } }
#cv > .inner {
margin: 0 auto;
padding: 3em 1em; }
@media screen and (min-width: 768px) {
#cv > .inner {
max-width: 840px;
width: 100%;
margin: 40px auto;
padding: 0; } }
#cv > .inner > .ttlBox {
text-align: center; }
#cv > .inner > .ttlBox .ttl {
font-weight: bold;
font-size: 1.5em;
letter-spacing: 0.05em; }
@media screen and (min-width: 768px) {
#cv > .inner > .ttlBox .ttl {
font-size: 2em; } }
#cv > .inner > .leadBox {
margin: 1em auto;
text-align: center; }
#cv > .inner > .leadBox > .txt {
font-weight: bold;
letter-spacing: 0.1em; }
#cv .cvBox {
background: #fff;
border-radius: 12px;
padding: 2em 3vw 0; }
@media screen and (min-width: 768px) {
#cv .cvBox {
padding: 2em 6em 0; } }
#cv .cvBox > .inner {
display: flex;
justify-content: center;
align-items: center;
gap: 24px;
position: relative;
z-index: 1; }
#cv .cvBox .contBox {
width: 100%; }
#cv .cvBox .contBox .ttl {
width: 90%;
font-size: 1.5em;
text-align: left;
line-height: 1.8;
letter-spacing: 0.05em;
font-weight: bold;
margin: 0em auto 1em; }
@media screen and (min-width: 768px) {
#cv .cvBox .contBox .ttl {
width: 73%;
max-width: 310px; } }
#cv .cvBox .contBox .subTtl {
text-align: center;
font-size: 1.313em;
font-weight: bold; }
@media screen and (min-width: 768px) {
#cv .cvBox .contBox .subTtl {
text-align: center;
padding: 0; } }
#cv .cvBox .imgBox {
width: 40%;
max-width: 200px;
align-self: flex-end;
position: absolute;
right: 0;
top: 0;
z-index: -1; }
@media screen and (min-width: 768px) {
#cv .cvBox .imgBox {
width: 50%;
max-width: unset;
bottom: 60px;
top: unset;
position: static; } }
#cv .btnBox {
width: 100%;
margin: 1em auto; }
@media screen and (min-width: 768px) {
#cv .btnBox {
max-width: 300px;
padding: 0; } }

/*--------------------------------------------------
仕組み
---------------------------------------------------*/
.shapeTop {
position: absolute;
top: -46px;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg); }
@media screen and (min-width: 768px) {
.shapeTop {
top: -70px; } }
.shapeTop svg {
position: relative;
display: block;
width: calc(145% + 1.3px);
height: 46px; }
@media screen and (min-width: 768px) {
.shapeTop svg {
height: 75px; } }
.shapeTop .shapeFill {
fill: #F7F6EE; }
.shapeTop .shapeFill.shapeFill__w {
fill: #fff; }
#shikumi {
background: #F7F6EE;
position: relative;
padding: 80px 0; }
#shikumi > .inner {
margin: 0 auto;
padding: 0 1em; }
@media screen and (min-width: 768px) {
#shikumi > .inner {
max-width: 1000px;
width: 100%;
margin: 0 auto; } }
#shikumi .ttlBox {
text-align: center; }
#shikumi .ttlBox .ttl {
font-weight: bold;
font-size: 1.5em; }
@media screen and (min-width: 768px) {
#shikumi .ttlBox .ttl {
font-size: 2em; } }
#shikumi .leadBox {
text-align: center;
margin: 40px auto 24px; }
#shikumi .leadBox .txt {
line-height: 1.8; }

/*--------------------------------------------------
brand
---------------------------------------------------*/
#brand {
position: relative; }
#brand > .shapeTop {
top: -45px; }
@media screen and (min-width: 768px) {
#brand > .shapeTop {
top: -74px; } }
#brand > .inner {
margin: 0 auto;
padding: 80px 1em 40px; }
@media screen and (min-width: 768px) {
#brand > .inner {
max-width: 1000px;
width: 100%; } }
#brand > .inner > .ttlBox {
text-align: center; }
#brand > .inner > .ttlBox .ttl {
font-weight: bold;
font-size: 1.5em; }
@media screen and (min-width: 768px) {
#brand > .inner > .ttlBox .ttl {
font-size: 2em; } }
#brand .brandBox {
margin: 32px auto; }
#brand .brandList {
display: flex;
align-items: flex-start;
gap: 20px;
flex-direction: column; }
@media screen and (min-width: 768px) {
#brand .brandList {
flex-direction: row; } }
#brand .brandList > li {
width: 100%;
-ms-flex: 0 1 auto;
flex: 0 1 auto; }
#brand .brandList > li:nth-of-type(n+2) {
margin-top: 3em; }
@media screen and (min-width: 768px) {
#brand .brandList > li:nth-of-type(n+2) {
margin-top: 0; } }
#brand .brandList > li > .ttlBox {
text-align: center;
margin: 16px auto; }
#brand .brandList > li > .ttlBox .ttl {
font-weight: bold; }
@media screen and (min-width: 768px) {
#brand .brandList > li .txtBox {
min-height: 380px; } }
#brand .brandList > li .txtBox .txt {
font-size: 0.875em;
line-height: 1.8; }
#brand .brandList > li .supBox {
border: solid 1px #231815;
padding: 0.5em;
text-align: center;
margin: 12px auto; }
#brand .brandList > li .supBox .txt {
font-size: 0.875em; }

/*--------------------------------------------------
case
---------------------------------------------------*/
#case > .inner {
margin: 0 auto;
padding: 80px 0; }
@media screen and (min-width: 768px) {
#case > .inner {
max-width: 980px;
width: 100%; } }
#case > .inner > .ttlBox {
text-align: center; }
#case > .inner > .ttlBox .ttl {
font-weight: bold;
font-size: 2em; }
#case .caseBox {
margin: 40px auto; }
#case .caseList > li {
padding: 40px 30px;
width: 100%;
position: relative;
background: #fff;
margin-bottom: 24px; }
@media screen and (min-width: 768px) {
#case .caseList > li {
margin-bottom: 40px; } }
#case .caseList > li > .inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 32px;
flex-direction: column; }
@media screen and (min-width: 768px) {
#case .caseList > li > .inner {
gap: 64px;
flex-direction: row; } }
@media screen and (min-width: 768px) {
#case .caseList > li > .inner.inner__rev {
flex-direction: row-reverse; } }
#case .caseList > li .txtWrapper {
width: 100%;
-ms-flex: 0 1 auto;
flex: 0 1 auto; }
#case .caseList > li .ttlBox .ttl {
display: block;
font-size: 1.3em;
margin: 1em 0; }
@media screen and (min-width: 768px) {
#case .caseList > li .ttlBox .ttl {
font-size: 1.8em;
margin: 24px 0 32px; } }
#case .caseList > li .imgBox {
width: 90%;
-ms-flex: 0 1 auto;
flex: 0 1 auto; }
@media screen and (min-width: 768px) {
#case .caseList > li .imgBox {
width: auto; } }
#case .caseList > li .imgBox > img {
width: 100%; }
#case .caseList > li .txtBox .txt {
font-size: 0.875em;
line-height: 1.8; }

/*--------------------------------------------------
FAQ
---------------------------------------------------*/
#faq {
background: #F7F6EE;
position: relative;
padding: 80px 0; }
#faq > .inner {
margin: 0 auto;
padding: 0 1em; }
@media screen and (min-width: 768px) {
#faq > .inner {
max-width: 1000px;
width: 100%;
margin: 0 auto; } }
#faq > .inner > .ttlBox {
text-align: center; }
#faq > .inner > .ttlBox .ttl {
font-weight: bold;
font-size: 2em; }
#faq .faqBox {
margin: 2em auto; }
#faq .faqList > li {
background: #fff;
border-radius: 20px; }
#faq .faqList > li:nth-of-type(n+2) {
margin-top: 1em; }
#faq .faqList > li > .ttlBox > .inner {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 16px;
padding: 1.5em 1.5em 1em; }
#faq .faqList > li > .ttlBox .iconBox {
color: #FF5639;
font-size: 1.5em;
font-weight: bold; }
#faq .faqList > li > .ttlBox .txtBox {
font-size: 1.1em;
font-weight: bold; }
@media screen and (min-width: 768px) {
#faq .faqList > li > .ttlBox .txtBox {
font-size: 1.313em; } }
#faq .faqList > li .leadBox > .inner {
width: 95%;
margin-left: auto;
display: flex;
gap: 16px;
padding: 1em 1em 2em; }
#faq .faqList > li .leadBox .iconBox {
font-size: 2.5em;
font-weight: bold; }
#faq .faqList > li .leadBox .txtBox .txt {
font-size: 0.875em;
line-height: 1.8; }

/*--------------------------------------------------
お問合わせ
---------------------------------------------------*/
#contact, #confirm {
position: relative; }
#contact > .inner, #confirm > .inner {
margin: 0 auto;
padding: 80px 16px 40px; }
@media screen and (min-width: 768px) {
#contact > .inner, #confirm > .inner {
max-width: 800px;
width: 100%;
margin: 0 auto; } }
#contact > .inner > .ttlBox, #confirm > .inner > .ttlBox {
text-align: center; }
#contact .leadBox, #confirm .leadBox {
margin: 32px auto;
text-align: center; }
#contact .formBox, #confirm .formBox {
margin: 2.5em auto; }
#contact .contBox, #confirm .contBox {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
gap: 24px;
padding: 1.313em 0;
border-top: solid 1px #BFBFBF; }
@media screen and (min-width: 768px) {
#contact .contBox, #confirm .contBox {
flex-direction: row; } }
#contact .contBox:last-child, #confirm .contBox:last-child {
border-bottom: solid 1px #BFBFBF; }
#contact .contBox > .ttl, #confirm .contBox > .ttl {
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 100%; }
@media screen and (min-width: 768px) {
#contact .contBox > .ttl, #confirm .contBox > .ttl {
width: 50%; } }
#contact .contBox > .cont, #confirm .contBox > .cont {
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 100%; }
#contact .contBox > .contList, #confirm .contBox > .contList {
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 100%; }
#contact .contBox .contList > .cont:nth-of-type(n+2), #confirm .contBox .contList > .cont:nth-of-type(n+2) {
margin-top: 0.5em; }
#contact .label.label__caution, #confirm .label.label__caution {
background: #333333;
color: #fff;
display: inline-block;
margin-left: 0.5em;
font-size: 0.8em;
padding: 0.2em 0.8em;
border-radius: 4px; }

/*--------------------------------------------------
注釈
---------------------------------------------------*/
.ly_caution {
margin-top: 1em; }
@media screen and (min-width: 768px) {
.ly_caution {
width: 100%;
max-width: 900px;
margin: 2em auto; } }
@media screen and (max-width: 767px) {
.ly_caution {
width: 96%;
margin: 2em auto; } }
.bl_caution_ttl {
font-size: clamp(14px, 1vw, 14px);
border-top: solid 1px #333;
border-bottom: solid 1px #333;
padding: 0.5em 0;
position: relative; }
.bl_caution_ttl::after {
display: block;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 12px 8px 0 8px;
border-color: #000333 transparent transparent transparent;
position: absolute;
top: 50%;
right: 1em;
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
.bl_caution_cont {
margin-top: 1em; }
.bl_cautionListItem {
font-size: clamp(10px, 1vw, 12px); }

/*--------------------------------------------------
お問合せフォーム本体
---------------------------------------------------*/
/*--------------------------------------------------
footer
---------------------------------------------------*/
.globalFooter .copyrights {
text-align: center; }
.bl_footer {
background: #E8E8E8;
padding: 2em;
text-align: center; }
.bl_footer small {
font-size: clamp(12px, 1vw, 12px); }

/*--------------------------------------------------
会社概要
---------------------------------------------------*/
.about {
padding-top: 35px;
}
.about h3 {
text-align: center;
margin: 30px;
font-size: 28px;
}
.about_table {
max-width: 800px;
border-collapse: collapse; 
margin: auto;
background: #fff;
}
.about_table tr th {
border: 1px solid #919191;
padding: 7px;
}
.about_table tr td {
border: 1px solid #919191;
padding: 15px;
text-align: left;
}
.ind {
text-align: center;
display: block;
margin-top: 50px;
color: #333;
}

/*ポップアップ*/
.first_pop {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
padding: 50px 0;
text-align: center;
background: #fff;
z-index: 1002;
}
.first_pop h2 {
font-size: 1.3rem;
}
table {
margin: 1% auto;
width: 70%;
}
.first-chois-item input[type="radio"] {
display: none;
}
.first-chois-item label {
display: block;
margin: 20px 0;
padding: 20px 20px;
border-radius: 10px;
color:#fff;
font-size: 1.2em;
}
.green {
background: #04be86;
}
.pink {
background: #ff7070;
}
.bbg {
position: fixed;
z-index: 1001;
width: 100vw;
height: 100vh;
height: calc(var(--vh, 1vh)* 100);
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
display: block;
}

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

.ttl img {
    margin: auto;
}