@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
/*---------------------------
リセット
---------------------------*/
*,
*::before,
*::after {
box-sizing: border-box;
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0; 
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
html{
font-family: 'Noto Sans JP', sans-serif;
}
body {
line-height:1;
color:#151515;
font-size:17px;
font-weight: 500;
}
html, body {
overflow-x: hidden;
}
footer address{
font-style:normal;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
text-decoration: none;
}
li{
list-style:none;
}
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
mark {
background-color:#ff9;
color:#000; 
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
hr {
display:block;
height:1px;
border:0;   
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
p{
line-height: 1.8;
margin-bottom: 20px;
}
img{
width: 100%;
max-width: 100%;
vertical-align: bottom;
}

/*---------------------------
PC
---------------------------*/
@media screen and (min-width : 768px){
.sp{
display: none;
}
}
body{
background: url(images/bg-mark.svg) no-repeat left calc(50% - 590px) top 100px / 880px fixed;
}
header{
max-width: 1920px;
padding: 30px 20px;
margin: 0 auto;
}
header h1{
font-size: 24px;
font-weight: bold;
}
.fv{
margin: 130px 0 250px;
position: relative;
}
.fv .text-wrap {
max-width: 1410px;
margin: 0 auto;
padding-left: 20px;
}
.fv .text-top{
font-size: 60px;
font-weight: 900;
line-height: 1.4;
margin-bottom: 36px;
}
.fv .text-bottom{
font-weight: 900;
line-height: 1.2;
}
.fv .under-line{
font-size: 30px;
background: linear-gradient(transparent 66%, #ffdc72 0%);
}
.fv .text-bottom .mt{
display: block;
margin-top: 26px;
}
.fv .img-wrap{
position: absolute;
left: calc(50% - 120px);
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: flex-end;
gap: 20px;
width: 1200px;
}
.fv .people-01{
width: 237px;
}
.fv .people-02{
width: 268px;
}
.fv .people-03{
width: 236px;
}
.fv .people-04{
width: 240px;
}
h2{
font-size: 30px;
font-weight: 900;
text-align: center;
margin-bottom: 60px;
}
h2:before {
display: block;
width: fit-content;
margin: 0 auto 22px;
font-size: 60px;
padding: 0 56px;
background: url(images/h-before.svg) no-repeat left bottom 8px / 30px,url(images/h-after.svg) no-repeat right bottom 8px / 30px;
}
.sec-service h2{
margin-bottom: 100px;
}
.sec-service h2:before{
content: 'SERVICE';
}
.sec-company h2:before{
content: 'COMPANY';
}
.sec-service h3{
margin-bottom: 60px;
}
.sec-service h3 img{
display: block;
width: 800px;
margin: 0 auto;
}
.ok24.pc{
display: block;
margin: 0 auto;
width: 546px;
position: relative;
z-index: 2;
}
.sec-service .bg-wrap{
background: #ECF6FB;
position: relative;
z-index: 1;
margin-top: 24px;
padding: 50px 20px 60px;
}
.sec-service .bg-wrap .curve{
width: 1920px;
min-width: 100%;
max-width: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: -3;
}
.sec-service .bg-wrap .curve.top{
bottom: 100%;
}
.sec-service .bg-wrap .curve.bottom{
top: 100%;
}
.sec-service .bg-wrap .people-05 {
width: 266px;
position: absolute;
right: calc(50% - 714px);
bottom: calc(100% + 24px);
z-index: -5;
}
.sec-service .bg-wrap:before,.sec-service .bg-wrap .speech-bubble-wrap:before{
content: '';
display: block;
width: calc(50% + 154px);
height: 722px;
background: #E2F1F8;
border-radius: 0 300px 300px 0;
position: absolute;
left: 0;
top: 0;
z-index: -2;
}
.sec-service .bg-wrap .speech-bubble-wrap:before{
left: auto;
right: 0;
top: auto;
bottom: 0;
border-radius: 300px 0 0 300px;
background: #EAF6F0;
z-index: -4;
}
.sec-service .bg-wrap:after,.sec-service .bg-wrap .speech-bubble-wrap:after{
content: '';
display: block;
width: calc(50% - 132px);
height: 385px;
position: absolute;
top: 34px;
right: 0;
z-index: -3;
background-image: radial-gradient(2px 2px at center, #E5E5E5 100%, transparent 100.001%);
background-size: 10px 10px;
}
.sec-service .bg-wrap .speech-bubble-wrap:after{
right: auto;
left: 0;
top: auto;
bottom: 34px;
z-index: -1;
}
.sec-service .bg-wrap ul{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
max-width: 1200px;
margin: 0 auto ;
}
.sec-service .bg-wrap li{
background: #fff;
border-radius: 10px;
border: 1px solid #339CD0;
color: #339CD0;
font-size: 18px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 15px 0 25px;
gap: 15px;
font-weight: bold;
}
.sec-service .bg-wrap li:last-child{
grid-column: span 2;
background: none;
border-radius: 0;
border: 0;
}
.sec-service .bg-wrap li img{
width: 100px;
}
.sec-service .bg-wrap li:last-child img{
width: 100%;
}
.sec-service .bg-wrap .speech-bubble-wrap{
display: flex;
align-items: flex-end;
justify-content: space-between;
max-width: 1200px;
margin: 33px auto 0;
}
.sec-service .bg-wrap .speech-bubble{
width: 855px;
background: #fff;
font-size: 34px;
font-weight: 900;
display: flex;
justify-content: center;
align-items: center;
padding: 48px 0;
position: relative;
margin: 0;
border-radius: 10px;
box-shadow: 5px 5px 0 #e5e5e5;
}
.sec-service .bg-wrap .speech-bubble:before{
content: '';
display: block;
width: 0;
height: 0;
border-style: solid;
border-top: 22px solid transparent;
border-bottom: 22px solid transparent;
border-left: 45px solid #e5e5e5;
border-right: 0;
position: absolute;
left: calc(100% + 4px);
top: 25px;
}
.sec-service .bg-wrap .speech-bubble:after{
content: '';
display: block;
width: 0;
height: 0;
border-style: solid;
border-top: 22px solid transparent;
border-bottom: 22px solid transparent;
border-left: 45px solid #ffffff;
border-right: 0;
position: absolute;
left: calc(100% - 1px);
top: 20px;
}
.sec-service .bg-wrap .speech-bubble-wrap img{
width: 234px;
}
.sec-company{
margin-top: 180px;
}
.sec-company dl{
border-bottom: 1px solid #20A464;
padding: 40px 0 40px 40px;
display: flex;
width: 780px;
margin: 0 auto;
line-height: 1.5;
}
.sec-company dt{
width: 186px;
min-width: 186px;
color: #20A464;
font-weight: 900;
}
.sec-company dd{
flex: 1;
font-weight: bold;
}
.sec-company dd .postal-code{
margin-right: 6px;
}
.sec-company dd ul{
margin-top: 20px;
}
.sec-company dd li{
margin-bottom: 20px;
}
.sec-company dd li:last-child{
margin-bottom: 0;
}
.sec-company dd li:before{
content: '・';
}
.sec-company .map{
margin-top: 80px;
}
.sec-company .map iframe{
width: 100%;
height: 550px;
vertical-align: bottom;
}
.copyright{
font-size: 12px;
font-weight: normal;
color: #fff;
text-align: center;
background: transparent linear-gradient(90deg, #339CD0 0%, #20A464 100%) 0% 0% no-repeat padding-box;
padding: 17px 0;
}


/*---------------------------
PC、タブレット
---------------------------*/
@media screen and (max-width : 1700px){
.fv .people-04{
display: none;
}
.fv .img-wrap{
left: calc(50% - 50px);
}
}

@media screen and (max-width : 1360px){
.sec-service .bg-wrap .people-05{
display: none;
}
}

@media screen and (max-width : 1340px){
.fv .people-03{
display: none;
}
.fv .img-wrap {
left: calc(50% - 10px);
}
.fv .text-wrap{
max-width: 1100px;
}
}

@media screen and (max-width : 1170px){
.sec-service .bg-wrap .speech-bubble{
width: calc(100% - 280px);
}
}

@media screen and (max-width : 1120px){
.sec-service .bg-wrap ul{
gap: 20px;
}
}

@media screen and (max-width : 1100px){
.sec-service .bg-wrap .speech-bubble{
font-size: 30px;
}
}

@media screen and (max-width : 1090px){
.sec-service .bg-wrap li{
font-size: 17px;
}
}

@media screen and (max-width : 1030px){
.sec-service .bg-wrap ul {
grid-template-columns: repeat(3, 276px);
gap: 30px;
justify-content: center;
}
.sec-service .bg-wrap li {
font-size: 18px;
}
}

@media screen and (max-width : 1020px){
.fv{
margin: 100px 0 200px;
}
.fv .img-wrap {
position: static;
transform: none;
width: auto;
justify-content: center;
margin-top: 50px;
}
.fv .text-wrap{
width: fit-content;
padding-left: 0;
}
}

@media screen and (max-width : 990px){
.sec-service .bg-wrap .speech-bubble{
font-size: 26px;
}
}

@media screen and (max-width : 940px){
.sec-service .bg-wrap ul{
grid-template-columns: repeat(3, 1fr);
}
}

@media screen and (max-width : 900px){
.sec-service .bg-wrap .speech-bubble {
width: calc(100% - 246px);
}
.sec-service .bg-wrap .speech-bubble-wrap img {
width: 200px;
}
}

@media screen and (max-width : 860px){
.sec-service .bg-wrap ul {
gap: 20px;
}
.sec-service .bg-wrap .speech-bubble {
font-size: 24px;
padding: 34px 0;
width: calc(100% - 210px);
}
.sec-service .bg-wrap .speech-bubble:before,.sec-service .bg-wrap .speech-bubble:after{
border-top-width: 16px;
border-bottom-width: 16px;
border-left-width: 34px;
}
.sec-service .bg-wrap .speech-bubble-wrap img {
width: 170px;
}
}

@media screen and (max-width : 840px){
.sec-service h3 img{
width: calc(100% - 40px);
}
}

@media screen and (max-width : 810px){
.sec-service .bg-wrap li {
font-size: 17px;
}
}

@media screen and (max-width : 780px){
.sec-service .bg-wrap .speech-bubble{
font-size: 22px;
}
}


/*---------------------------
SP
---------------------------*/
@media screen and (max-width : 767px){
.pc{
display: none!important;
}
body{
background: none;
}
header{
padding: 20px;
}
.fv{
margin: 34px 0 100px;
}
.fv:before{
content: '';
display: block;
width: calc(100% - 20px);
padding-top: 53%;
background: url(images/people-sp.svg) no-repeat center / contain;
margin: 0 auto 50px;
max-width: 408px;
}
.fv .text-top{
font-size: 54px;
margin-bottom: 24px;
}
.fv .text-bottom{
line-height: 1.3;
}
.fv .under-line{
display: block;
width: fit-content;
margin-top: 16px;
}
.fv .img-wrap{
display: none;
}
h2{
font-size: 22px;
margin-bottom: 50px;
}
h2:before{
font-size: 56px;
margin-bottom: 14px;
padding: 0;
}
.sec-service h2 {
margin-bottom: 50px;
}
.sec-service h3 {
margin-bottom: 50px;
}
h2:before,.sec-service h3 img,.ok24.sp,.sec-service .bg-wrap .speech-bubble{
width: calc(100% - 40px);
max-width: 388px;
}
.ok24.sp{
display: block;
margin: 0 auto;
position: relative;
z-index: 2;
}
.sec-service .bg-wrap{
margin-top: 35px;
padding: 0;
}
.sec-service .bg-wrap ul{
display: block;
}
.sec-service .bg-wrap li{
width: 276px;
margin: 0 auto 20px;
font-size: 18px;
}
.sec-service .bg-wrap li:last-child{
width: auto;
padding: 10px 20px 0;
}
.sec-service .bg-wrap li:last-child img{
max-width: 388px;
}
.sec-service .bg-wrap .curve,.sec-service .bg-wrap .speech-bubble-wrap:before, .sec-service .bg-wrap .speech-bubble-wrap:after{
display: none;
}
.sec-service .bg-wrap:before,.sec-service .bg-wrap:after{
height: 120px;
width: 100%;
border-radius: 50%;
background: #ECF6FB;
}
.sec-service .bg-wrap:before{
top: auto;
top: 0;
transform: translateY(-50%);
}
.sec-service .bg-wrap:after{
top: 100%;
transform: translateY(-50%);
}
.sec-service .bg-wrap .speech-bubble-wrap{
display: block;
}
.sec-service .bg-wrap .speech-bubble {
margin: 0 auto 60px;
font-size: 24px;
line-height: 1.7;
padding: 22px 0;
}
.sec-service .bg-wrap .speech-bubble:before{
border-right: 17px solid transparent;
border-left: 17px solid transparent;
border-top: 35px solid #e5e5e5;
border-bottom: 0;
left: 50%;
top: calc(100% + 4px);
transform: translateX(calc(-50% + 4px));
}
.sec-service .bg-wrap .speech-bubble:after{
border-right: 17px solid transparent;
border-left: 17px solid transparent;
border-top: 35px solid #ffffff;
border-bottom: 0;
left: 50%;
top: calc(100% - 1px);
transform: translateX(-50%);
}
.sec-service .bg-wrap .speech-bubble-wrap img{
display: block;
margin: 0 auto;
width: 234px;
}
.sec-company dl{
margin: 0 20px;
padding: 25px 0;
width: auto;
display: block;
line-height: 2;
}
.sec-company dl:first-of-type{
padding-top: 0;
}
.sec-company dt {
width: auto;
min-width: auto;
margin-bottom: 5px;
}
.sec-company dd{
}
.sec-company dd .postal-code{
margin-right: 0;
display: block;
}
.sec-company dd ul {
margin-top: 0;
}
.sec-company dd li {
margin-bottom: 0;
font-size: 16px;
}
.sec-company .map {
margin-top: 50px;
}
.sec-company .map iframe{
height: 390px;
}
}

@media screen and (max-width : 415px){
.fv .text-top {
font-size: 53px;
}
h2:before{
font-size: 54px;
}
}

@media screen and (max-width : 391px){
.fv .text-top {
font-size: 50px;
}
h2{
font-size: 21px;
}
h2:before{
font-size: 50px;
background-position: left bottom 5px,right bottom 5px;
}
}

@media screen and (max-width : 376px){
.fv .text-top {
font-size: 48px;
}
h2:before{
font-size: 48px;
}
}

@media screen and (max-width : 361px){
header h1 {
font-size: 22px;
}
.fv .text-top {
font-size: 46px;
}
h2:before {
font-size: 47px;
}
.sec-service .bg-wrap .speech-bubble{
font-size: 22px;
}
.sec-company dl{
font-size: 16px;
}
}