@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');
/*---------------------------
リセット
---------------------------*/
*, *::before, *::after {
box-sizing: border-box;
}
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, li, figure, blockquote, fieldset, form, input, select {
margin: 0;
padding: 0;
}
html, body {
overflow-x: hidden;
}
html {
font-family: 'Noto Sans JP', sans-serif;
}
body {
line-height: 1.6;
color: #333;
font-size: 16px;
font-weight: 500;
-webkit-text-size-adjust: 100%;
}
li {
list-style: none;
}
img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
a {
text-decoration: none;
color: inherit;
}
@media (any-hover: hover) {
a:hover {
opacity: 0.6;
transition: 0.3s;
cursor: pointer;
}
}
table {
border-collapse: collapse;
border-spacing: 0;
}
hr {
border: none;
border-top: 1px solid #ddd;
margin: 2rem 0;
}
p {
line-height: 1.5;
}
input, button, textarea, select {
font: inherit;
}

/*---------------------------
PC
---------------------------*/
.fv{
margin-bottom: 14px;
}
.fv-main-img {
max-width: none;
width: 1200px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.fv-cont{
width: 690px;
max-width: 100%;
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 242px;
}
.fv-cont .text {
background: #ff5b00;
line-height: 82px;
color: #fff;
border-radius: 0 0 40px 40px;
text-align: center;
font-size: 34px;
font-weight: 700;
}
h1 {
text-align: center;
line-height: 1.5;
font-size: 24px;
font-weight: 600;
margin: 14px 0 0;
}
.worries{
border-radius: 0 160px 0 160px;
background: url(img/nayami-bg2.svg) no-repeat left calc(50% - 20px) bottom 92px / 1074px , url(img/nayami-bg.svg) no-repeat center / 1800px #f2f2f2;
position: relative;
padding: 70px 0 160px;
margin-bottom: 160px;
}
.worries:after {
content: '';
display: block;
width: 154px;
height: 146px;
position: absolute;
left: 0;
right: 0;
top: 100%;
transform: translateY(-20%);
margin: auto;
background: url(img/kaiketu-yaji.svg) no-repeat center / contain;
}
.worries h2 img{
width: 730px;
max-width: calc(100% - 20px);
display: block;
margin: 0 auto;
}
.worries-cont{
width: 960px;
max-width: calc(100% - 40px);
margin: 50px auto 0;
display: grid;
grid-template-columns: 1fr 230px 1fr;
grid-auto-rows: 120px;
gap: 36px;
}
.worries-cont li{
background: #fff;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1.8;
color: #000;
font-weight: 600;
font-size: 20px;
box-shadow: 0 0 10px rgba(0,0,0,5%);
}
.worries-cont li:nth-of-type(5){
grid-column: 3;
grid-row: 2;
}
.worries-cont li:nth-of-type(6){
grid-column: 1;
grid-row: 3;
}
.worries-cont li:nth-of-type(7){
grid-column: 3;
grid-row: 3;
}
.worries-img {
position: absolute;
width: 210px;
left: 0;
right: 0;
bottom: 60px;
margin: auto;
}
.solution{
margin-bottom: 90px;
}
.solution h2 {
display: flex;
align-items: center;
justify-content: center;
font-size: 58px;
font-weight: 700;
color: #000;
position: relative;
z-index: 2;
line-height: 1;
}
.solution-h2-in{
display: flex;
align-items: center;
justify-content: center;
}
.solution h2 .s{
font-size: 44px;
}
.under-line{
position: relative;
padding: 0 8px;
}
.under-line:after {
content: '';
display: block;
background: #ff838c;
width: 100%;
height: 7px;
position: absolute;
left: 0;
top: calc(100% + 5px);
}
.solution h2 img{
width: 260px;
}
.solution .logo-wrap {
position: relative;
margin: 0 5px 0 8px;
}
.solution .logo-wrap::before{
content: '';
display: block;
width: 52px;
height: 52px;
position: absolute;
right: 93%;
bottom: 76%;
background: url(img/kaiketu-tenten.svg) no-repeat center / contain;
}
.solution-in{
margin-top: -30px;
}
.solution-in .pc-bg{
position: relative;
border-radius: 160px 0 160px 0;
background: #ffffe1;
padding: 60px 0 80px;
}
.solution-in .pc-bg:before{
content: '';
display: block;
width: 182px;
height: 260px;
background: url(img/kaiketu-img1.svg) no-repeat right bottom / contain;
position: absolute;
bottom: -50px;
left: calc(50% - 584px);
}
.solution-in .pc-bg:after{
content: '';
display: block;
width: 182px;
height: 260px;
background: url(img/kaiketu-img2.svg) no-repeat left bottom / contain;
position: absolute;
bottom: -50px;
right: calc(50% - 584px);
}
.solution-cont{
width: 810px;
max-width: calc(100% - 40px);
margin: 0 auto 40px;
}
.solution-cont li{
background: #fff;
box-shadow: 0 0 0 3px #ccc;
height: 76px;
display: flex;
align-items: center;
margin-bottom: 30px;
gap: 30px;
font-size: 22px;
font-weight: 700;
line-height: 1.4;
}
.solution-cont li:last-child{
margin-bottom: 0;
}
.solution-cont li:before {
font-family: 'Material Symbols Rounded';
content: "\e5ca";
font-size: 56px;
font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
display: block;
width: 76px;
min-width: 76px;
line-height: 76px;
background: #07beef;
color: #fff;
border-right: 3px solid #ccc;
text-align: center;
}
.mc {
display: block;
width: fit-content;
margin: 0 auto;
position: relative;
color: #fc5166;
font-style: italic;
font-size: 32px;
line-height: 1;
}
.mc:before,.mc:after{
content: '';
display: block;
width: 3px;
height: 50px;
position: absolute;
bottom: -12px;
background: #ff838c;
border-radius: 30px;
}
.mc:before{
left: -30px;
transform: rotate(-38deg);
}
.mc:after{
right: -30px;
transform: rotate(38deg);
}
.btn-yellow{
background: #fcee21;
box-shadow: 0 0 0 4px #000;
color: #000;
text-align: center;
display: block;
width: 580px;
max-width: calc(100% - 40px);
line-height: 78px;
margin: -39px auto 0;
border-radius: 100px;
position: relative;
font-size: 30px;
font-weight: 600;
}
.btn-yellow:after {
content: '';
display: block;
width: 34px;
height: 38px;
position: absolute;
right: 30px;
top: 0;
bottom: 0;
margin: auto;
background: url(img/bt-yaji.svg) no-repeat center / contain;
}
.proceed{
margin-bottom: 100px;
position: relative;
}
.proceed::before,.proceed::after{
content: '';
display: block;
width: 272px;
height: 94%;
background: rgba(0, 204, 255, 0.12);
position: absolute;
left:calc(50% - 620px) ;
top: 11%;
z-index: -1;
clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 50% 100%, 0% 90%);
}
.proceed::after{
transform: translate(140px,40px);
}
.proceed h2,#inquiry h2{
display: flex;
align-items: center;
gap: 20px;
font-size: 36px;
font-weight: 900;
width: 970px;
max-width: calc(100% - 70px);
margin: 0 auto 20px;
color: #000;
}
.proceed h2{
margin-bottom: 8px;
}
.proceed h2:before,.proceed h2:after,#inquiry h2:before,#inquiry h2:after{
content: '';
display: block;
height: 6px;
flex: 1;
border-top: 2px solid #ccc;
border-bottom: 2px solid #ccc;
}
.proceed .t-center {
text-align: center;
color: #000;
font-size: 20px;
font-weight: 600;
}
.proceed-cont{
width: 1000px;
max-width: calc(100% - 40px);
margin: 40px auto 0;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 10%);
border-radius: 20px;
padding: 20px 50px 20px 190px;
}
.proceed-cont li{
border-bottom: 2px dashed #b3b3b3;
height: 166px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
position: relative;
padding-left: 20px;
}
.proceed-cont li:last-child{
border: 0;
}
.proceed-cont li:before{
content: '';
display: block;
width: 120px;
height: 120px;
position: absolute;
left: -150px;
top: 0;
bottom: 0;
margin: auto;
}
.proceed-cont li:nth-of-type(1):before{
background: url(img/map-01.svg) no-repeat center / contain;
}
.proceed-cont li:nth-of-type(2):before{
background: url(img/map-02.svg) no-repeat center / contain;
}
.proceed-cont li:nth-of-type(3):before{
background: url(img/map-03.svg) no-repeat center / contain;
}
.proceed-cont li:nth-of-type(4):before{
background: url(img/map-04.svg) no-repeat center / contain;
}
.proceed-cont li:nth-of-type(5):before{
background: url(img/map-05.svg) no-repeat center / 84px;
}
.proceed-cont li:after{
content: '';
display: block;
width: 0;
height: 0;
border-style: solid;
border-right: 17px solid transparent;
border-left: 17px solid transparent;
border-top: 18px solid #e6e6e6;
border-bottom: 0;
position: absolute;
left: -106px;
top: calc(100% - 8px);
}
.proceed-cont li:last-child:after{
display: none;
}
.proceed-cont li h3 {
color: #ff5b00;
font-size: 24px;
font-weight: 600;
line-height: 1.4;
}
.proceed-cont li p{
margin: 0;
font-size: 20px;
line-height: 1.4;
}
.asterisk{
color: #808080;
display: block;
font-size: 14px;
font-weight: 400;
margin-top: 3px;
}
.small-t {
color: #808080;
width: 970px;
max-width: calc(100% - 70px);
margin: 0 auto;
font-size: 16px;
line-height: 1.5;
}
.text-link{
color: #0096d2;
}
.inquiry-in{
background: #e4e8ef;
width: 1000px;
max-width: calc(100% - 40px);
margin: 34px auto 0;
border-radius: 20px;
padding: 26px 0 10px;
overflow: hidden;
}
footer{
background: #f2f2f2;
border-radius: 30px 30px 0 0;
padding: 30px 0 0;
margin-top: 94px;
}
.footer-tel-text{
text-align: center;
font-weight: 700;
color: #000;
}
.footer-tel-num {
display: flex;
align-items: center;
width: fit-content;
gap: 10px;
margin: 10px auto 0;
font-size: 60px;
font-weight: 600;
line-height: 1;
color: #000;
}
.footer-tel-num:before{
content: '';
display: block;
width: 36px;
height: 50px;
background: url(img/tel-icon.svg) no-repeat center / contain;
transform: translateY(5px);
}
.footer-link{
display: flex;
justify-content: center;
gap: 30px;
margin-top: 30px;
}
.footer-link a{
font-size: 14px;
}
.copyright{
margin-top: 10px;
background: #282121;
color: #fff;
padding: 6px 0;
font-size: 12px;
text-align: center;
}

/*---------------------------
レスポンシブ
---------------------------*/
@media only screen and (max-width: 1050px){
.solution-in .pc-bg:before,.solution-in .pc-bg:after{
display: none;
}
.proceed::before, .proceed::after{
left: -60px;
}
}

@media only screen and (max-width: 950px){
.worries-cont li{
font-size: calc(2.105vw);
}
.worries {
border-radius: 0 120px 0 120px;
}
.solution-in .pc-bg{
border-radius: 120px 0 120px 0;
}
}

@media only screen and (max-width: 900px){
.worries-cont{
gap: 24px;
}
.worries,.solution-in .pc-bg {
border-radius:0;
}
.solution {
margin-bottom: calc(5.882vw + 7.059px);
}
.solution-in{
margin-top: 14px;
background: #ffffe1;
padding: 60px 0 80px;
}
.solution-in .pc-bg{
background: none;
padding: 0;
}
.btn-yellow{
margin-top: 30px;
}
.proceed {
margin-bottom: 110px;
}
}

@media only screen and (max-width: 850px){
.solution h2{
font-size: calc(6.857vw - 4.29px);
}
.solution h2 .s{
font-size: calc(5.098vw - 1.88px);
}
.solution h2 img {
width: calc(27.45vw + 12.94px);
}
.solution .logo-wrap::before{
width: calc(5.49vw + 2.59px);
height:calc(5.49vw + 2.59px) ;
}
}

@media only screen and (max-width: 800px){
.worries-cont{
gap: 15px;
}
.proceed::before, .proceed::after{
left: 50%;
top: auto;
bottom: -100px;
width: 200px;
height: 50%;
transform: translateX(-75%);
clip-path: polygon(0% 0%, 100% 0%, 100% 87%, 50% 100%, 0% 87%);
}
.proceed::after{
transform: translateX(-25%);
}
.proceed {
margin-bottom: 120px;
}
.proceed-cont{
margin-top: calc(3.9024vw + 8.7805px);
}
}

@media only screen and (max-width: 750px){
.fv-main-img{
width: calc(159.46vw - 11.89px);
}
.fv-cont{
width: calc(91.89vw - 8px);
top: calc(32.43vw - 4.49px);
}
.fv-cont .text{
font-size: calc(5.19vw - 1.75px);
line-height: 2.4em;
border-radius: 0 0 calc(3.33vw + 5px) calc(3.33vw + 5px);
}
h1 {
font-size: calc(3.27vw + 0.25px);
margin-top: 7px;
}
.worries{
z-index: 1;
padding:calc(10.56vw - 9.17px) 0 calc(9.44vw - 0.83px);
margin-bottom: calc(19vw + 7.5px);
background: url(img/nayami-img-sp.svg) no-repeat left calc(50% + 118px) bottom -4px / 640px , url(img/nayami-bg.svg) no-repeat center / 1520px #f2f2f2;
}
.worries-cont{
display: block;
background: #fff;
border-radius: 14px;
box-shadow: 0 0 10px rgba(0,0,0,5%);
margin: 20px 0 0;
position: relative;
left: 50%;
transform: translateX(calc(-100% + 70px));
width: 360px;
padding: 30px 0 30px 30px;
}
.worries-cont li{
display: block;
position: relative;
border-radius: 0;
box-shadow: none;
background: none;
font-size: 18px;
gap: 10px;
margin-bottom: 18px;
padding-left: 32px;
line-height: 1.4;
}
.worries-cont li:last-child{
margin-bottom: 0;
}
.worries-cont li br.pc{
display: none;
}
.worries-cont li::before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
border-top: 4px solid #b1a082;
border-right: 4px solid #b1a082;
transform: rotate(45deg);
position: absolute;
left:-3px;
top: 0;
bottom: 0;
margin: auto;
}
.worries-img {
left: calc(50% + 40px);
right: auto;
bottom: 0;
margin: 0;
z-index: -1;
display: none;
}
.worries:after{
width: calc(21.11vw - 4.33px);
height: calc(20vw - 4px);
}
.solution-in{
padding: 50px 0 calc(9.72vw + 7.08px);
}
.solution-cont li{
gap: calc(2.5vw + 5.25px);
padding-right: calc(2.5vw + 5.25px);
font-size: calc(1.67vw + 9.5px);
margin-bottom: calc(2.78vw + 9.17px);
}
.solution-cont li:before {
width: calc(4.44vw + 36.67px);
min-width: calc(4.44vw + 36.67px);
font-size: calc(2.78vw + 29.17px);
}
.mc{
font-size: calc(3.79vw + 2.21px);
}
.mc:before, .mc:after{
height: calc(5vw + 12.5px);
}
.btn-yellow{
line-height: calc(5vw + 40.5px);
font-size: calc(2.22vw + 13.33px);
margin-top: calc(2.22vw + 13.33px);
}
.btn-yellow:after{
width: calc(3.33vw + 9px);
}
}

@media only screen and (max-width: 650px){
.proceed h2, #inquiry h2{
font-size: calc(3.636vw + 12.364px);
}
.inquiry-in{
padding: 10px 0 0;
}
.footer-tel-num{
font-size: calc(6.154vw + 20px);
gap:calc(1.923vw - 2.5px);
}
.footer-tel-num:before{
width: calc(4.231vw + 8.5px);
}
}

@media only screen and (max-width: 620px){
.worries-cont{
left: 20px;
transform: none;
width: calc(50% + 50px);
}
}

@media only screen and (max-width: 600px){
.proceed-cont{
padding: 10px 24px 10px 140px;
}
.proceed-cont li{
padding-left: 10px;
}
.proceed-cont li:before,.proceed-cont li:after{
left: -70px;
transform: translateX(-50%);
}
.proceed-cont li:before{
width: 90px;
}
.proceed-cont li:after{
top: calc(100% - 6px);
border-right: 14px solid transparent;
border-left: 14px solid transparent;
border-top: 15px solid #e6e6e6;
}
.proceed-cont li h3 {
font-size: calc(2.222vw + 8.667px);
}
.proceed-cont li p {
font-size: calc(1.7778vw + 7.3333px);
}
}

@media only screen and (max-width: 550px){
.worries-cont{
padding: calc(8vw - 14px);
padding-right: 0;
}
.worries-cont li{
padding-left: calc(6.8571vw - 5.7143px);
font-size: calc(1.6667vw + 7.8333px);
}
.proceed .t-center{
font-size: calc(2.5vw + 6px);
}
.proceed-cont li {
padding-left: 0;
}
.solution-cont{
margin-bottom: 30px;
}
.mc:before, .mc:after{
width: 2px;
bottom: -10px;
}
.mc:before{
left: -20px;
}
.mc:after {
right: -20px;
}
.btn-yellow{
box-shadow: 0 0 0 3px #000;
}
}

@media only screen and (max-width: 500px){
.worries{
margin-bottom: calc(20vw + 12px);
background: url(img/nayami-img-sp.svg) no-repeat right calc(-48vw + 58px) bottom -4px / calc(168vw - 214px) , url(img/nayami-bg.svg) no-repeat center / 1170px #f2f2f2;
}
.solution h2{
display: block;
text-align: center;
font-size: calc(6.36vw + 4.18px);
}
.solution h2 .s {
font-size: calc(4.55vw + 5.27px);
}
.solution h2 img {
width: calc(29.09vw + 24.55px);
}
.solution .logo-wrap::before {
width: calc(3.64vw + 13.82px);
height: calc(3.64vw + 13.82px);
}
.under-line:after{
top: calc(100% + 3px);
}
.solution-h2-in{
margin-bottom: 10px;
}
.solution-in {
margin-top: calc(12.73vw - 5.64px);
padding-top: 10vw;
}
.proceed h2, #inquiry h2{
gap:10px;
margin-bottom: 14px;
}
.proceed h2 {
margin-bottom: 5px;
}
.proceed-cont {
padding: 10px 20px 10px 110px;
}
.proceed-cont li:before, .proceed-cont li:after {
left: -55px;
}
.proceed-cont li:before {
width: 80px;
}
.proceed-cont li:after {
top: calc(100% - 5px);
border-right: 12px solid transparent;
border-left: 12px solid transparent;
border-top: 13px solid #e6e6e6;
}
.asterisk {
font-size: 12px;
}
.proceed::before, .proceed::after{
width: 136px;
clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 50% 100%, 0% 90%);
bottom: -70px;
}
.proceed {
margin-bottom: 90px;
}
.small-t{
font-size: 14px;
}
.footer-link {
gap: 24px;
margin-top: 20px;
}
.footer-link a {
font-size: 13px;
}
.copyright{
padding: 5px 0;
font-size: 11px;
}
}

@media only screen and (max-width: 431px){
.worries-cont{
left: 15px;
width: fit-content;
padding: 16px;
}
.worries-cont li{
margin-bottom: calc(5vw - 5.5px);
}
.worries-cont li::before{
width: 12px;
height: 12px;
border-top-width: 3px;
border-right-width: 3px;
}
.proceed h2, #inquiry h2{
max-width: calc(100% - 50px);
}
.under-line:after{
height: 5px;
top: 100%;
}
.solution-cont,.btn-yellow,.proceed-cont,.inquiry-in{
max-width: calc(100% - 30px);
}
.solution-cont{
margin-bottom: 30px;
}
.mc:before, .mc:after {
bottom: -9px;
}
}

@media only screen and (max-width: 415px){
.proceed-cont li h3{
font-size: 18px;
}
}

@media only screen and (max-width: 391px){
.solution {
margin-bottom: 30px;
}
.solution-cont li{
font-size: 16px;
}
.asterisk {
font-size: 11px;
}
.inquiry-in{
padding: 0;
}
}



/*---------------------------
サンクスページ
---------------------------*/
.thanks-wrap {
min-height: 100svh;
display: flex;
flex-direction: column;
gap: 120px;
}
.thanks-wrap h1 {
margin: 0 0 50px;
background: #ff5b00;
color: #fff;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
border-radius: 0 0 30px 30px;
line-height: 1.4;
}
.thanks-wrap h1 br{
display: none;
}
.thanks-wrap main p{
text-align: center;
font-size: 24px;
}
.btn-gray {
margin: 90px auto 0;
background: #f2f2f2;
border-radius: 100px;
width: 280px;
height: 56px;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
}
.thanks-wrap footer{
margin-top: auto;
}

@media only screen and (max-width: 670px){
.thanks-wrap h1{
font-size: calc(4vw + 3.2px);
}
.thanks-wrap main p{
font-size: calc(2vw + 10.6px);
}
}

@media only screen and (max-width: 500px){
.thanks-wrap h1{
font-size: 26px;
}
.thanks-wrap h1 br{
display: block;
}
.thanks-wrap main p{
font-size: 20px;
padding: 0 10px;
}
}