@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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,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;
scroll-behavior: smooth;
}
body {
line-height:1;
color:#333;
font-size:16px;
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;
}

/*---------------------------
hover
---------------------------*/
@media (hover: hover) {
a:hover,button:hover {
opacity: 0.6;
transition: 0.3s;
}
}

/*---------------------------
TOP
---------------------------*/
header,.fv-bottom-in,.top-main .section-inner,.use-case h2,.customization{
width: 1000px;
max-width: calc(100% - 40px);
margin: 0 auto;
}
.top-main .section-inner{
padding-top: 160px;
padding-bottom: 100px;
}
header{
display: flex;
align-items: center;
height: 90px;
}
header .logo{
width: 200px;
}
.hamburger{
display: none;
}
header nav{
margin-left: auto;
}
header nav ul{
display: flex;
align-items: center;
}
header nav li{
margin-left: 40px;
}
header nav li:first-child{
margin-left: 0;
}
header nav ul a{
color: #002D4C;
}
header nav ul .btn-inquiry{
color: #fff;
font-weight: 700;
background: #002D4C;
padding: 14px 24px;
display: block;
border-radius: 100px;
}
.top-main h2{
font-size: 24px;
font-weight: 400;
color: #002d4c;
display: flex;
align-items: center;
gap: 6px;
position: relative;
margin-bottom: 30px;
}
.top-main h2:before{
content: '';
display: block;
width: 20px;
height: 20px;
background: #EA680C;
border-radius: 50%;
}
.top-main h2:after {
display: block;
font-family: "Poppins", sans-serif;
font-size: 48px;
font-weight: 700;
position: absolute;
left: 0;
top: -8px;
transform: translateY(-100%);
}
.top-main .service h2:after{
content: 'SERVICE';
}
.top-main .use-case h2:after{
content: 'USE CASE';
}
.top-main .accomplishment h2:after{
content: 'ACCOMPLISHMENT';
}
.top-main .flow h2:after{
content: 'FLOW';
}
.top-main .use-case h2{
margin-bottom: 60px;
}
.top-main .flow h2{
margin-bottom: 70px;
}
.top-main .accomplishment h2{
margin-bottom: 12px;
}
.text-link{
display: flex;
align-items: center;
gap: 10px;
margin-left: auto;
width: fit-content;
color: #002d4c;
font-weight: 400;
margin-top: 34px;
}
.text-link:after{
content: '';
display: block;
width: 9px;
height: 9px;
border-top: 2px solid #002D4C;
border-right: 2px solid #002D4C;
transform: rotate(45deg);
}
.fv-in{
height: 510px;
position: relative;
display: flex;
align-items: center;
overflow: hidden;
}
.fv-in img.sp,.bg-img-peopleSP{
display: none;
}
.fv-bg-line1 {
position: absolute;
z-index: -2;
width: 1380px;
top: -140px;
left: 50%;
transform: translateX(-117%);
}
.fv-bg-line2 {
position: absolute;
z-index: -2;
width: 1680px;
bottom: 300px;
right: calc(50% - 1500px);
transform: scaleX(-1);
}
.fv-bg-line3 {
position: absolute;
z-index: -2;
width: 1200px;
bottom: 56px;
right: calc(50% - 1569px);
}
.fv-in .bg-img-people1 {
width: 840px;
position: absolute;
bottom: -110px;
right: calc(50% - 730px);
z-index: -1;
}
.fv-in .bg-img-people2 {
width: 390px;
position: absolute;
top: 60px;
left: calc(50% - 870px);
z-index: -1;
}
.fv-in:after {
content: '';
display: block;
width: 210px;
height: 505px;
position: absolute;
left: calc(50% - 688px);
bottom: -204px;
background: url(img/fv_pc_flont_flat.svg) no-repeat center / contain;
}
.catchphrase{
width: 100%;
transform: translateY(20px);
}
.catchphrase .text-wrap{
display: block;
width: fit-content;
font-size: 50px;
font-weight: 900;
padding: 0 70px 0 calc(((100% - 1100px) / 2) + 130px);
line-height: 110px;
background: #002D4C;
color: #fff;
border-radius: 0 100px 100px 0;
margin-bottom: 10px;
animation: slideIn 1.2s ease-out forwards;
}
@keyframes slideIn {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.catchphrase .text-wrap:last-child{
margin-bottom: 0;
}
.catchphrase .text-wrap .yellow{
color: #FFFF00;
}
.fv-bottom{
background: #002d4c;
overflow: hidden;
position: relative;
z-index: 1;
}
.fv-bottom-in{
display: flex;
align-items: center;
height: 244px;
}
.fv-bottom-in .text-wrap p{
color: #fff;
font-size: 20px;
line-height: 1.5;
font-weight: 400;
margin: 0;
}
.fv-bottom-in .text-wrap .yellow{
color: #FFF765;
font-size: 30px;
font-weight: 700;
margin-bottom: 14px;
}
.fv-bottom-in .img-wrap{
position: relative;
z-index: -1;
margin-left: auto;
}
.fv-bottom-in .img-wrap:before{
content: '';
display: block;
width: 1770px;
height: 1770px;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50% ,-50%);
background: #003a62;
box-shadow: inset 0 0 0 320px #013356;
z-index: -1;
}
.fv-bottom-in img{
width: 320px;
height: 320px;
object-fit: cover;
border-radius: 50%;
box-shadow: 0 0 0 94px #004b7f , 0 0 0 246px #004372;
}
.service{
position: relative;
overflow: hidden;
}
.service .bg-img {
width: 2410px;
max-width: none;
position: absolute;
left: calc(50% - 1310px);
top: -920px;
z-index: -1;
transform: rotate(-6deg);
opacity: 0.2;
}
.service-cont-wrap{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 300px;
background: #e3f2ff;
border-radius: 20px;
}
.service-cont {
position: relative;
padding:44px 34px 0;
}
.service-cont:before{
content: '';
display: block;
width: 1px;
height: calc(100% - 44px);
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
background: #9db5d5;
}
.service-cont:nth-of-type(3n):before{
display: none;
}
.service-cont:after{
content: '';
display: block;
width: calc(100% - 100px);
height: 1px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: #9db5d5;
}
.service-cont:nth-last-of-type(-n + 3):after{
display: none;
}
.service-cont img{
width: 110px;
height: 104px;
object-fit: contain;
display: block;
margin: 0 auto 20px;
}
.service-cont h3{
text-align: center;
color: #002D4C;
font-size: 24px;
font-weight: 900;
}
.service-cont p{
width: fit-content;
margin: 18px auto 0;
font-weight: 400;
color: #002d4c;
line-height: 1.5;
}
.use-case{
background: #e3f2ff;
padding: 160px 0 230px;
position: relative;
}
#use-case-anchor{
scroll-margin-top: 60px;
}
.use-case-cont-wrap{
max-width: 2000px;
margin: 0 auto;
}
.use-case-cont{
display: flex;
align-items: center;
gap: 50px;
margin-bottom: 60px;
}
.use-case-cont:nth-of-type(2n){
flex-direction: row-reverse;
}
.use-case-cont:last-child{
margin-bottom: 0;
}
.use-case-cont .img-wrap{
width: calc(300px + ((100% - 1000px) / 2)) ;
min-width: 350px;
height: 300px;
border-radius: 0 150px 150px 0;
position: relative;
overflow: hidden;
}
.use-case-cont:nth-of-type(2n) .img-wrap{
border-radius: 150px 0 0 150px;
}
.use-case-cont .img-wrap img {
position: absolute;
width: 750px;
min-width: 100%;
max-width: none;
height: auto;
object-fit: cover;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.use-case-cont:nth-of-type(2) .img-wrap img{
width: 1100px;
transform: translate(-50%, -44%);
}
.use-case-cont:nth-of-type(3) .img-wrap img{
width: 800px;
transform: translate(-50%, -44%);
}
.use-case-cont-inner{
width: 650px;
}
.use-case-cont-inner h3{
font-size: 32px;
font-weight: 900;
color: #EA680C;
margin-bottom: 15px;
}
.use-case-cont-inner dl{
display: flex;
align-items: center;
gap: 20px;
}
.use-case-cont-inner dt {
background: #002d4c;
color: #fff;
position: relative;
width: 124px;
min-width: 124px;
line-height: 32px;
text-align: center;
font-size: 18px;
text-indent: 1px;
}
.use-case-cont-inner dt:after{
content: '';
display: block;
width: 0;
height: 0;
border-style: solid;
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
border-left: 8px solid #002d4c;
border-right: 0;
position: absolute;
top: 0;
left: 100%;
}
.use-case-cont-inner dd{
color: #002d4c;
font-size: 18px;
font-weight: 700;
line-height: 1.4;
}
.use-case-cont-inner p{
color: #002d4c;
font-weight: 400;
margin: 5px 0 0;
line-height: 1.5;
}
.customization{
background: #002d4c;
border-radius: 20px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: auto;
transform: translateY(50%);
padding: 50px 44px 30px 50px;
overflow: hidden;
box-shadow: 0 4px 4px rgba(0,0,0,25%);
z-index: 2;
}
.customization:before{
content: '';
display: block;
width: 900px;
height: 900px;
background: #004372;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
z-index: -2;
box-shadow:inset 0 0 0 150px #013356,inset 0 0 0 300px #003a62;
}
.customization:after {
content: '';
display: block;
width: 134px;
height: 210px;
position: absolute;
bottom: 0;
right: 26px;
z-index: -1;
background: url(img/illust_woman.svg) no-repeat center top / 100%;
}
.customization p{
font-size: 18px;
font-weight: 400;
color: #fff;
margin: 0;
line-height: 1.6;
}
.customization .big{
font-size: 30px;
font-weight: 700;
margin-bottom: 8px;
}
.customization .big br{
display: none;
}
.customization .text-link{
color: #fff;
background: #F28333;
padding: 12px 20px 12px 32px;
border-radius: 100px;
margin-top: 10px;
}
.customization .text-link:after{
border-top-color: #fff;
border-right-color: #fff;
}
.accomplishment{
position: relative;
overflow: hidden;
}
.accomplishment .bg-img {
width: 1800px;
max-width: none;
position: absolute;
left: calc(50% - 1020px);
bottom: -800px;
z-index: -1;
transform: rotate(244deg);
opacity: 0.2;
}
.top-main .accomplishment .section-inner{
padding-top: 270px;
}
.accomplishment .big{
font-size: 24px;
font-weight: 700;
color: #002D4C;
}
.accomplishment .big br{
display: none;
}
.accomplishment .graph-img{
width: 746px;
max-width: 100%;
display: block;
margin: 0 auto;
position: relative;
}
.accomplishment .graph-img:before {
content: '';
display: block;
width: 188px;
height: 170px;
position: absolute;
right: 96px;
top: -8px;
background: url(img/graph_hukidashi.svg) no-repeat center / contain;
animation: floating 1.5s ease-in-out infinite alternate;
transform-origin: right;
}
@keyframes floating {
0% {
transform: translateY(0) scale(0.8);
}
100% {
transform: translateY(-10px) scale(1);
}
}
.accomplishment .graph-img .sp{
display: none;
}
.flow {
background: url(img/illust_business01.svg) no-repeat right calc(50% - 680px) top 100px / 200px, url(img/illust_business02.svg) no-repeat left calc(50% - 680px) bottom 100px / 280px #e3f2ff;
}
.flow-cont{
width: 800px;
max-width: 100%;
height: 200px;
margin: 0 auto 62px;
position: relative;
border-radius: 100px;
background: #fff;
padding: 30px 90px 0 186px;
}
.flow-cont:last-child{
margin-bottom: 0;
}
.flow-cont:before{
content: '';
display: block;
width: 150px;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: url(img/hearing.svg) no-repeat right 22px center / 94px #0078CB; 
border-radius: 100px 0 0 100px;
}
.flow-cont:nth-of-type(2):before{
background: url(img/gear.svg) no-repeat right 30px center / 66px #046CB4;
}
.flow-cont:nth-of-type(3):before{
background: url(img/note.svg) no-repeat right 20px center / 66px #015C9B;
}
.flow-cont:nth-of-type(4):before{
background: url(img/service.svg) no-repeat right 22px center / 70px #004879;
}
.flow-cont:after {
content: '';
display: block;
width: 34px;
height: 14px;
position: absolute;
left: 0;
right: 0;
bottom: -40px;
margin: auto;
background: url(img/arrow.svg) no-repeat center / contain;
}
.flow-cont:last-of-type:after{
display: none;
}
.flow-cont h3{
display: flex;
align-items: center;
gap: 14px;
font-size: 24px;
font-weight: 900;
color: #ea680c;
}
.flow-cont .step-text{
background: #ea680c;
color: #fff;
font-family: "Inter", sans-serif;
font-size: 10px;
font-weight: 900;
border-radius: 50px;
padding: 5px 18px;
}
.flow-cont .step-text .num{
font-size: 24px;
margin-left: 3px;
position: relative;
top: 1px;
}
.flow-cont p{
margin: 20px 0 0;
color: #002D4C;
font-weight: 400;
font-size: 18px;
line-height: 1.4;
}
footer{
padding: 110px 0 34px;
background: #002D4C;
}
footer .logo{
width: 190px;
display: block;
margin: 0 auto 60px;
}
.footer-link,footer nav ul{
display: flex;
align-items: center;
justify-content: center;
}
.footer-link{
margin-bottom: 56px;
gap: 74px;
}
footer nav ul{
gap: 42px;
}
.footer-link a,footer nav ul a{
color: #fff;
font-weight: 400;
}
.copyright{
text-align: center;
color: #fff;
font-weight: 400;
margin-top: 130px;
}

/*---------------------------
レスポンシブ
---------------------------*/
@media screen and (max-width : 1700px){
.flow {
background: url(img/illust_business01.svg) no-repeat right 20px top 150px / 10% , url(img/illust_business02.svg) no-repeat left bottom 100px / 15% #e3f2ff;
}
}

@media screen and (max-width : 1400px){
.flow {
background: url(img/illust_business01.svg) no-repeat right 20px top 100px / 10% , url(img/illust_business02.svg) no-repeat left 10px bottom 15px / 19% #e3f2ff;
}
}

@media screen and (max-width : 1300px){
.use-case-cont:nth-of-type(1) .img-wrap img {
width: 600px;
}    
.use-case-cont:nth-of-type(2) .img-wrap img {
width: 960px;
transform: translate(-46%, -45%);
}
}

@media screen and (max-width : 1130px){
.fv-bottom-in{
justify-content: center;
height: 220px;
}
.fv-bottom-in .text-wrap .yellow {
font-size: calc(1.8vw + 0.5rem);
}
.fv-bottom-in .text-wrap p{
font-size: calc(1vw + 0.5rem);
}
.fv-bottom-in .img-wrap {
margin-left: 20px;
}
.fv-bottom-in img{
width: 300px;
height: 300px;
}
.customization .big br {
display: block;
}
}

@media screen and (max-width : 1100px){
.use-case-cont {
gap: 30px;
}
.use-case-cont .img-wrap{
height: 240px;
}
.use-case-cont:nth-of-type(1) .img-wrap img {
width: 550px;
}
.use-case-cont:nth-of-type(2) .img-wrap img {
width: 820px;
transform: translate(-46%, -45%);
}
.use-case-cont:nth-of-type(3) .img-wrap img {
width: 660px;
transform: translate(-44%, -41%);
}
.use-case-cont-inner{
max-width: calc(100% - 400px);
}
}

@media screen and (max-width : 1050px){
.fv-in {
height: 400px;
}
.fv-in .bg-img-people1 {
width: 700px;
right: -80px;
}
.fv-in .bg-img-people2 {
width: 340px;
left: -260px;
}
.fv-in:after {
left: -100px;
bottom: -174px;
width: 210px;
height: 436px;
}
.fv-bg-line1 {
width: 1150px;
top: -122px;
left: -860px;
transform: none;
}
.fv-bg-line2 {
width: 1480px;
bottom: 230px;
right: -840px;
}
.fv-bg-line3 {
width: 860px;
bottom: 56px;
right: -656px;
}
.catchphrase .text-wrap{
line-height: 90px;
font-size: 40px;
padding: 0 50px 0 140px;
animation: slideIn 1s ease-out forwards;
}
.service-cont {
padding: 50px 20px 0;
}
.service-cont h3 {
font-size: 20px;
}
}

@media screen and (max-width : 1000px){
header nav li {
margin-left: 40px;
}
.customization p {
font-size: 16px;
}
.flow {
background: #e3f2ff;
}
}

@media screen and (max-width : 950px){
.fv-in {
height: 380px;
}
.catchphrase .text-wrap{
padding: 0 50px 0 100px;
}
.fv-in .bg-img-people1 {
width: 650px;
right: -100px;
}
}

@media screen and (max-width : 900px){
header nav li {
margin-left: 30px;
}
header nav li:last-child {
margin-left: 30px;
}
.fv-bottom-in img {
width: 260px;
height: 260px;
}
.customization{
padding: 40px 30px 26px 30px;
}
.accomplishment .big {
font-size: 20px;
}
}

@media screen and (max-width : 850px){
header nav ul a {
font-size: 14px;
}
.fv-in {
height: 340px;
}
.catchphrase {
transform: translateY(10px);
}
.catchphrase .text-wrap{
line-height: 84px;
}
.fv-in .bg-img-people1 {
width: 600px;
bottom: -100px;
}
.fv-in .bg-img-people2{
top: 30px;
}
.fv-bg-line2 {
bottom: 190px;
right: -950px;
}
.service-cont-wrap{
grid-auto-rows: 240px;
}
.service-cont {
padding: 44px 20px 0;
}
.service-cont img{
height: 74px;
margin-bottom: 14px;
}
.service-cont h3 {
font-size: 18px;
}
.service-cont p{
margin-top: 10px;
font-size: 14px;
}
.customization {
padding: 30px 30px 26px 30px;
}
.customization .text-link{
margin: 50px auto 0;
}
.customization:after{
width: 96px;
height: 104px;
right: calc(50% - 200px);
}
.flow-cont h3{
font-size: 22px;
}
}

@media screen and (max-width : 830px){
.fv-bottom-in {
height: 180px;
}
.fv-bottom-in .img-wrap {
margin-left: 10px;
}
.fv-bottom-in img {
width: 220px;
height: 220px;
}
}

@media screen and (max-width : 800px){
html:has(.hamburger-check:checked),body:has(.hamburger-check:checked){
overflow: hidden;
}
header .logo{
position: relative;
z-index: 101;
}
.hamburger {
display: block;
width: 30px;
height: 24px;
margin-left: auto;
position: relative;
z-index: 101;
}
.hamburger input{
display: none;
}
.hamburger:before,.hamburger:after,.hamburger span{
content: '';
display: block;
width: 100%;
height: 3px;
border-radius: 10px;
background: #002D4C;
position: absolute;
left: 0;
transition: transform 0.6s;
}
.hamburger:before{
top: 0;
}
.hamburger span{
top: 0;
bottom: 0;
margin: auto;
}
.hamburger:after{
bottom: 0;
}
.hamburger:has(input:checked):before{
bottom: 0;
margin: auto;
transform: rotate(45deg);
}
.hamburger:has(input:checked):after{
top: 0;
margin: auto;
transform: rotate(-45deg);
}
.hamburger:has(input:checked) span{
opacity: 0;
}
header nav{
position: fixed;
left: 100%;
top: 0;
width: 100%;
height: 100%;
margin: 0;
background: #fff;
z-index: 100;
transition: left 0.6s;
padding: 100px 50px 0;
}
.hamburger:has(input:checked) + nav{
left: 0;
}
header nav ul{
display: block;
}
header nav li,header nav li:last-child{
margin: 0;
border-bottom:1px solid #E3F2FF;
}
header nav ul a {
font-size: 18px;
}
header nav ul a,header nav ul .btn-inquiry{
padding: 25px 0;
display: block;
}
header nav ul .btn-inquiry{
border-radius: 0;
color: #002D4C;
background: none;
}
.fv-in {
height: 310px;
}
.fv-in:after {
left: -105px;
bottom: -146px;
width: 210px;
height: 360px;
}
.fv-in .bg-img-people1 {
width: 560px;
}
.fv-in .bg-img-people2 {
width: 300px;
left: -220px;
}
.catchphrase .text-wrap {
line-height: 80px;
font-size: 34px;
}
.top-main .section-inner {
padding-top: 100px;
padding-bottom: 100px;
}
.top-main h2{
flex-direction: column-reverse;
margin-bottom: 60px;
}
.top-main h2:after {
position: static;
transform: none;
}
.top-main h2:before{
position: absolute;
width: 110px;
height: 3px;
border-radius: 10px;
left: 0;
right: 0;
bottom: -18px;
margin: auto;
}
.top-main .use-case h2 {
margin-bottom: 80px;
}
.top-main .accomplishment h2 {
margin-bottom: 40px;
}
.use-case {
padding: 100px 0 230px;
}
.use-case-cont-inner {
max-width: calc(60% - 50px);
}
.use-case-cont .img-wrap{
width: 40%;
min-width: auto;
}
.use-case-cont-inner dt{
width: 104px;
min-width: 104px;
font-size: 16px;
}
.use-case-cont-inner dd {
font-size: 16px;
}
.accomplishment .bg-img {
bottom: auto;
top: -300px;
transform: rotate(178deg);
}
.accomplishment .big br{
display: block;
}
.flow-cont{
border-radius: 20px;
padding: 20px 24px 0 144px;
height: 220px;
}
.flow-cont:before{
border-radius: 20px 0 0 20px;
width: 120px;
background: url(img/hearing.svg) no-repeat center / 64px #0078CB;
}
.flow-cont:nth-of-type(2):before {
background: url(img/gear.svg) no-repeat  center / 46px #046CB4;
}
.flow-cont:nth-of-type(3):before {
background: url(img/note.svg) no-repeat right 32px center / 46px #015C9B;
}
.flow-cont:nth-of-type(4):before {
background: url(img/service.svg) no-repeat center / 48px #004879;
}
.flow-cont h3 {
display: block;
border-bottom: 1px solid #D9D9D9;
padding-bottom: 18px;
}
.flow-cont .step-text{
display: block;
width: fit-content;
margin-bottom: 14px;
}
.flow-cont .step-text .num {
font-size: 20px;
}
.flow-cont p{
margin-top: 14px;
}
}

@media screen and (max-width : 750px){
.catchphrase .text-wrap{
padding: 0 44px 0 80px;
}
.service-cont-wrap {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 270px;
}
.service-cont {
padding: 50px 34px 0;
}
.service-cont:nth-of-type(2n):before{
display: none;
}
.service-cont:nth-of-type(3):before,.service-cont:nth-of-type(4):after{
display: block;
}
.service-cont img {
height: 90px;
}
.service-cont h3 {
font-size: 22px;
}
.service-cont p {
font-size: 16px;
}
footer{
display: flex;
flex-direction: column;
align-items: center;
padding: 80px 0 34px;
}
footer .logo{
order: 1;
width: 140px;
}
footer nav{
order: 2;
max-width: calc(100% - 40px);
}
footer nav ul{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0 20px;
width: 420px;
max-width: 100%;
}
footer nav li{
border-bottom: 1px solid #2F4859;
}
.footer-link a, footer nav ul a{
font-size: 18px;
}
footer nav ul a{
padding: 15px 0;
display: block;
}
.footer-link{
order: 3;
display: block;
margin: 40px 0 0;
width: 420px;
max-width: calc(100% - 40px);
}
.footer-link li{
margin-bottom: 25px;
}
.footer-link li:last-child{
margin-bottom: 0;
}
.copyright{
order: 4;
margin-top: 80px;
}
}

@media screen and (max-width : 700px){
body{
padding-top: 69px;
}
header {
box-shadow: 0 1px 2px rgb(0 49 83 / 8%);
max-width: 100%;
padding: 0 20px;
height: 70px;
position: fixed;
top: -1px;
left: 0;
z-index: 100;
background: #fff;
}
header .logo {
width: 160px;
}
.fv-in{
display: block;
height: auto;
padding-top: 20px;
}
.fv-in .bg-img-people1,.fv-in .bg-img-people2,.fv-in img.pc,.fv-in:after{
display: none;
}
.bg-img-peopleSP{
display: block;
width: 500px;
max-width: calc(100% - 40px);
margin: 0 auto;
}
.fv-bg-line1 {
width: 840px;
top: -46px;
left: -620px;
}
.fv-bg-line2 {
width: 740px;
bottom: auto;
top: -90px;
right: 14px;
transform: none;
z-index: -3;
}
.fv-bg-line3 {
width: 394px;
bottom: auto;
top: 0px;
right: -1px;
z-index: -3;
}
.catchphrase{
position: absolute;
bottom: 70px;
}
.fv-bottom{
display: none;
}
.top-main h2:after{
font-size: 40px;
}
.top-main h2{
font-size: 20px;
}
.top-main h2:before{
width: 90px;
}
.service .bg-img{
transform: rotate(-19deg);
}
.service-cont h3 {
font-size: 20px;
}
.use-case-cont{
display: block;
}
.use-case-cont .img-wrap {
width: calc(100% - 20px);
}
.use-case-cont:nth-of-type(2n) .img-wrap{
margin-left: auto;
}
.use-case-cont:nth-of-type(3) .img-wrap img {
width: 700px;
transform: translate(-50%, -38%);
}
.use-case-cont-inner h3{
font-size: 28px;
}
.use-case-cont-inner {
max-width: none;
width: auto;
padding: 0 20px;
margin-top: 20px;
}
.customization:before{
box-shadow: inset 0 0 0 200px #013356,inset 0 0 0 320px #003a62;
}
.accomplishment .graph-img:before {
width: 168px;
height: 152px;
right: 84px;
top: -10px;
}
.flow-cont {
padding: 20px 24px 0 124px;    
}
.flow-cont:before{
width: 100px;
}
.flow-cont:nth-of-type(3):before {
background: url(img/note.svg) no-repeat right 22px center / 46px #015C9B;
}
.flow-cont p{
font-size: 16px;
}
}

@media screen and (max-width : 650px){
.service-cont-wrap {
grid-auto-rows: 250px;
}
.service-cont {
padding: 50px 24px 0;
}
.service-cont img {
height: 80px;
}
.service-cont h3 {
font-size: 20px;
}
.flow-cont p {
font-size: 15px;
}
}

@media screen and (max-width : 600px){
.service-cont-wrap{
display: block;
padding: 20px;
}
.service-cont{
border-bottom: 1px solid #9db5d5;
position: relative;
padding: 30px 0 30px 100px;
}
.service-cont:last-child{
border-bottom: 0;
}
.service-cont img {
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
height: 50px;
width: 100px;
}
.service-cont h3{
text-align: left;
}
.service-cont p{
width: auto;
}
.service-cont:before,.service-cont:after{
display: none!important;
}
.customization {
padding: 24px 20px 24px 24px;
}
.customization .big {
font-size: 26px;
line-height: 1.4;
margin-bottom: 10px;
}
.customization p {
font-size: 14px;
line-height: 1.3;
}
.customization .text-link{
margin-top: 24px;
}
.customization:after{
bottom: -4px;
}
.customization:before {
box-shadow: inset 0 0 0 220px #013356,inset 0 0 0 340px #003a62;
}
.accomplishment .graph-img:before {
width: 140px;
height: 128px;
right: 70px;
top: -10px;
}
.top-main .accomplishment .section-inner {
padding-top: 260px;
}
.flow-cont .step-text .num {
font-size: 16px;
}
.flow-cont h3 {
font-size: 20px;
}
footer .logo {
width: 110px;
}
.footer-link a, footer nav ul a {
font-size: 16px;
}
.copyright{
font-size: 14px;
}
}

@media screen and (max-width : 550px){
.fv-bg-line1 {
width: 770px;
top: -38px;
left: -578px;
}
.accomplishment .big {
font-size: 18px;
}
.flow-cont:before {
width: 68px;
background: url(img/hearing.svg) no-repeat center / 42px #0078CB;
border-radius: 10px 0 0 10px;
}
.flow-cont:nth-of-type(2):before {
background: url(img/gear.svg) no-repeat  center / 30px #046CB4;
}
.flow-cont:nth-of-type(3):before {
background: url(img/note.svg) no-repeat right 16px center / 30px #015C9B;
}
.flow-cont:nth-of-type(4):before {
background: url(img/service.svg) no-repeat center / 30px #004879;
}
.flow-cont {
padding: 20px 20px 0 88px;
border-radius: 10px;
}
.flow-cont h3 {
font-size: 18px;
}
}

@media screen and (max-width : 500px){
.use-case {
padding: 100px 0 110px;
}
.customization{
top: 97%;
bottom: auto;
transform: none;
border-radius: 10px;
}
.customization .big {
font-size: 22px;
}
.customization:before {
box-shadow: inset 0 0 0 260px #013356,inset 0 0 0 360px #003a62;
}
.top-main .accomplishment .section-inner {
padding-top: 330px;
}
.accomplishment .graph-img .pc{
display: none;
}
.accomplishment .graph-img .sp {
display: block;
}
.accomplishment .big {
font-size: 17px;
}
.accomplishment .bg-img{
width: 2050px;
top: -170px;
transform: rotate(172deg);
left: -750px;
}
}

@media screen and (max-width : 450px){
body{
padding-top: 49px;
}
header {
padding: 0 15px;
height: 50px;
}
header .logo {
width: 100px;
}
.hamburger {
width: 20px;
height: 18px;
}
.hamburger:before, .hamburger:after, .hamburger span{
height: 2px;
}
header nav{
padding-top: 86px;
}
header nav ul a {
font-size: 16px;
}
header nav ul a, header nav ul .btn-inquiry {
padding: 22px 0;
}
.fv-bg-line1 {
width: 650px;
top: -38px;
left: -488px;
}
.fv-bg-line2 {
width: 930px;    
top: -120px;
right: -120px;
}
.fv-bg-line3 {
width: 450px;
top: -180px;
right: -255px;    
}
.catchphrase .text-wrap {
line-height: 70px;
font-size: 30px;
padding: 0 44px 0 60px;
}
.top-main .section-inner, .use-case h2, .customization{
max-width: calc(100% - 30px);
}
.top-main .section-inner {
padding-top: 70px;
padding-bottom: 60px;
}
.top-main h2{
font-size: 16px;
margin-bottom: 44px;
}
.top-main h2:after{
font-size: 30px;
}
.top-main h2:before{
width: 70px;
height: 2px;
bottom: -12px;
}
.top-main .use-case h2 {
margin-bottom: 40px;
}
.top-main .flow h2 {
margin-bottom: 54px;
}
.text-link{
margin-top: 24px;
}
.service .bg-img {
transform: rotate(-18deg);
left: auto;
right: -460px;
top: -490px;
width: 1620px;
}
.service-cont {
padding: 30px 0 30px 90px;
}
.service-cont h3 {
font-size: 18px;
}
.service-cont p {
font-size: 14px;
}
.service-cont img {
height: 46px;
width: 90px;
}
.use-case {
padding: 70px 0 100px;
}
.use-case-cont {
margin-bottom: 50px;
}
.use-case-cont .img-wrap {
height: 160px;
}
.use-case-cont:nth-of-type(1) .img-wrap img {
width: 100%;
}
.use-case-cont:nth-of-type(2) .img-wrap img {
width: 140%;
transform: translate(-46%, -45%);
}
.use-case-cont:nth-of-type(3) .img-wrap img {
width: 100%;
transform: translate(-50%, -40%);
}
.use-case-cont-inner {
padding: 0 15px;
}
.use-case-cont-inner h3 {
font-size: 24px;
margin-bottom: 8px;
}
.use-case-cont-inner dl {
display: block;
}
.use-case-cont-inner dt {
margin-bottom: 4px;
width: 96px;
min-width: auto;
font-size: 14px;
line-height: 26px;
}
.use-case-cont-inner dt:after{
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
}
.use-case-cont-inner dd {
font-size: 14px;
}
.use-case-cont-inner p{
font-size: 14px;
}
.customization:after {
width: 90px;
height: 94px;
right: calc(50% - 184px);
}
.accomplishment .graph-img:before {
width: 124px;
height: 114px;
right: 70px;
top: 0px;
}
.accomplishment .big {
font-size: 15px;
}
.flow-cont {
padding: 16px 16px 0 84px;
height: 170px;
}
.flow-cont h3 {
font-size: 14px;
padding-bottom: 12px;
}
.flow-cont .step-text{
padding: 4px 14px;
margin-bottom: 10px;
}
.flow-cont .step-text .num {
font-size: 13px;
margin-left: 2px;
}
.flow-cont p {
margin-top: 10px;
line-height: 1.3;
font-size: 12px;
}
}

@media screen and (max-width : 431px){
.catchphrase {
bottom: 64px;
}
.customization .text-link{
font-size: 14px;
padding: 10px 18px 10px 30px;
}
.customization:after {
width: 80px;
height: 88px;
right: calc(50% - 172px);
}
.customization:before {
box-shadow: inset 0 0 0 290px #013356,inset 0 0 0 370px #003a62;
}
.customization .big {
font-size: 20px;
}
.top-main .accomplishment .section-inner {
padding-top: 310px;
}
.flow-cont{
margin-bottom: 50px;
}
.flow-cont:after{
width: 22px;
height: 10px;
bottom: -33px;
}
}

@media screen and (max-width : 415px){
.accomplishment .graph-img:before {
width: 112px;
height: 102px;
right: 60px;
top: 0px;
}
.accomplishment .big {
font-size: 14px;
}
}

@media screen and (max-width : 391px){
.fv-bg-line1 {
width: 610px;
top: -30px;
left: -462px;
}
.catchphrase {
bottom: 58px;
}
.catchphrase .text-wrap {
line-height: 66px;
margin-bottom: 8px;
font-size: 30px;
padding: 0 50px 0 54px;
}
.use-case-cont-inner dd {
font-size: 13px;
}
.customization .big {
font-size: 18px;
}
.customization p {
font-size: 12px;
}
.customization:after {
width: 72px;
height: 82px;
right: calc(50% - 160px);
}
.accomplishment .big br {
display: none;
}
}

@media screen and (max-width : 376px){
.catchphrase {
bottom: 50px;
}
.catchphrase .text-wrap {
font-size: 28px;
line-height: 64px;
}
.top-main .section-inner {
padding-top: 60px;
padding-bottom: 50px;
}
.top-main h2:after {
font-size: 24px;
}
.top-main h2 {
font-size: 14px;
margin-bottom: 40px;
gap: 5px;
}
.top-main h2:before {
width: 60px;    
height: 2px;
}
.top-main .accomplishment h2 {
margin-bottom: 28px;
}
.top-main .flow h2 {
margin-bottom: 44px;
}
.service-cont {
padding: 25px 0 25px 80px;
}
.service-cont img {
height: 38px;
width: 80px;
}
.service-cont h3 {
font-size: 16px;
}
.service-cont p {
font-size: 12px;
}
.use-case-cont .img-wrap {
height: 142px;
}
.use-case-cont-inner h3 {
font-size: 20px;
}
.use-case-cont-inner dt {
width: 80px;
font-size: 12px;
line-height: 22px;
}
.use-case-cont-inner dt:after {
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
}
.use-case-cont-inner dd {
font-size: 12px;
}
.use-case-cont-inner p {
font-size: 12px;
}
.customization {
padding: 18px 18px 22px 18px;
}
.customization .text-link {
margin-top: 20px;
}
.customization:after {
width: 64px;
height: 76px;
right: calc(50% - 150px);
}
.use-case {
padding: 70px 0 80px;
}
.top-main .accomplishment .section-inner {
padding-top: 270px;
}
.accomplishment .graph-img:before {
width: 104px;
height: 96px;
right: 54px;
top: 0px;
}
.flow-cont {
padding: 16px 14px 0 78px;
}
.flow-cont:before{
width: 64px;
}
.flow-cont:nth-of-type(3):before {
background: url(img/note.svg) no-repeat right 13px center / 30px #015C9B;
}
.flow-cont:after {
width: 18px;
height: 8px;
bottom: -32px;
}
footer{
padding: 50px 0 34px;
}
footer .logo {
width: 90px;
margin-bottom: 44px;
}
.footer-link a, footer nav ul a {
font-size: 14px;
}
.copyright {
font-size: 12px;
}
footer nav ul a {
padding: 13px 0;
}
.footer-link li {
margin-bottom: 20px;
}
.footer-link {
margin: 28px 0 0;
}
.copyright {
margin-top: 66px;
}
}

@media screen and (max-width : 361px){
.flow-cont {
height: 176px;
}
}


/*---------------------------
下層
---------------------------*/
.lower-fv{
height: 356px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
padding: 0!important;
}
.lower-fv:before{
content: '';
display: block;
width: calc(1000px + ((100% - 1000px) / 2) + 160px);
max-width: calc(100% - 40px);
height: 180px;
background: #003B76;
opacity: 0.9;
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
border-radius: 0 100px 100px 0;
z-index: -1;
}
.lower-fv-bg-line{
position: absolute;
z-index: -2;
max-width: none;
width: 2000px;
min-width: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.lower-fv h1{
font-size: 24px;
font-weight: 700;
color: #fff;
text-align: center;
}
.lower-fv h1::first-letter{
color: #EA680C;
}
.lower-fv h1:before{
display: block;
font-family: "Poppins", sans-serif;
font-size: 42px;
margin-bottom: 6px;
}
.page-service .lower-fv h1:before{
content: 'SERVICE';
}
.page-company .lower-fv h1:before{
content: 'COMPANY';
}
.page-contact .lower-fv h1:before{
content: 'CONTACT';
}
.page-privacy .lower-fv h1:before{
content: 'PRIVACY POLICY';
}
.lower-main section{
padding: 80px 0;
}
.page-service .service-list,.company-profile,.role,.partner-benefits,.consultation-form{
background: #E3F2FF;
}
.lower-main h2{
font-size: 24px;
font-weight: 700;
color: #000;
text-align: center;
position: relative;
margin-bottom: 70px;
}
.lower-main h2:after{
display: block;
content: '';
width: 74px;
height: 5px;
background: #1974BF;
position: absolute;
left: 0;
right: 0;
bottom: -26px;
margin: auto;
}
.lower-main .service-list h2{
margin-bottom: 50px;
}
.lower-main .text-h2-bottom{
width: fit-content;
max-width: 1000px;
margin: 0 auto 20px;
color: #002D4C;
font-size: 18px;
font-weight: 400;
line-height: 1.7;
}
.lower-main .service-list .text-h2-bottom{
margin-bottom: 50px;
}
.service-list-cont-wrap,.greeting-cont,.role .img-wrap,.such-troubles-cont,.partner-benefits-cont,.oem-cont,.consultation-form .form-wrap{
width: 1000px;
max-width: calc(100% - 40px);
margin: 0 auto ;
}
.service-list-cont-wrap{
position: relative;
margin-bottom: 80px;
}
.service-list-cont-wrap:before{
content: '';
display: block;
width: 80px;
height: 120px;
position: absolute;
right: 0;
bottom: 100%;
background: url(img/illust_woman.svg) no-repeat center top / 100%;
}
.service-list-cont{
display: flex;
background: #fff;
overflow: hidden;
height: 300px;
border-radius: 10px;
margin-bottom: 50px;
}
.service-list-cont:last-child{
margin-bottom: 0;
}
.service-list-cont .img-wrap{
width: 50%;
border-radius: 0 150px 150px 0;
overflow: hidden;
position: relative;
}
.service-list-cont .img-wrap img {
width: 120%;
min-height: 100%;
max-width: none;
object-fit: cover;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.service-list-cont:nth-of-type(2) .img-wrap img{
width: 150%;
}
.service-list-cont:nth-of-type(3) .img-wrap img{
transform: translate(-50%,-59%);
}
.service-list-cont:nth-of-type(6) .img-wrap img{
transform: translate(-50%,-45%);
}
.service-list-cont .text-wrap{
width: 50%;
padding: 30px 40px 0;
}
.service-list-cont .text-wrap h3{
font-size: 24px;
font-weight: 700;
color: #EA680C;
position: relative;
padding: 16px 0 16px 60px;
border-bottom: 2px solid #EA680C;
margin-bottom: 16px;
line-height: 1.4;
}
.service-list-cont .text-wrap h3:before{
content: '';
display: block;
width: 48px;
height: 38px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
background: #000;
}
.service-list-cont:nth-of-type(1) .text-wrap h3:before{
background: url(img/run.svg) no-repeat left center / contain;
}
.service-list-cont:nth-of-type(2) .text-wrap h3:before{
background: url(img/vip.svg) no-repeat left center / contain;
}
.service-list-cont:nth-of-type(3) .text-wrap h3:before{
background: url(img/wellnes.svg) no-repeat left center / contain;
}
.service-list-cont:nth-of-type(4) .text-wrap h3:before{
background: url(img/mente.svg) no-repeat left center / contain;
}
.service-list-cont:nth-of-type(5) .text-wrap h3:before{
background: url(img/router.svg) no-repeat left center / contain;
}
.service-list-cont:nth-of-type(6) .text-wrap h3:before{
background: url(img/housing-equipment.svg) no-repeat left center / contain;
}
.service-list-cont .text-wrap h3 .s{
font-size: 18px;
}
.service-list-cont .text-wrap p{
color: #002D4C;
font-size: 18px;
font-weight: 300;
line-height: 1.7;
margin: 0;
}
.btn-orange{
display: block;
width: 450px;
max-width: calc(100% - 40px);
line-height: 60px;
text-align: center;
margin: 0 auto;
color: #fff;
background: #F28333;
border-radius: 30px;
font-size: 24px;
font-weight: 400;
position: relative;
}
.btn-orange:after {
content: '';
display: block;
width: 18px;
height: 18px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
position: absolute;
right: 36px;
top: 0;
bottom: 0;
margin: auto;
}
.company-profile-cont {
background: #fff;
width: 870px;
max-width: calc(100% - 40px);
border-radius: 30px;
margin: 40px auto 0;
padding: 40px;
}
.company-profile-cont .row {
display: flex;
align-items: center;
margin-bottom: 30px;
gap: 30px;
}
.company-profile-cont .row > dt {
background: #002D4C;
color: #fff;
width: 150px;
min-width: 150px;
text-align: center;
line-height: 40px;
font-weight: 300;
font-size: 18px;
}
.company-profile-cont .row > dd{
color: #002D4C;
flex: 1;
font-size: 18px;
font-weight: 700;
line-height: 1.4;
word-break: break-all;
}
.company-profile-cont .row > dd a{
color: #002D4C;
}
.company-profile-cont .row.access-row{
margin: 30px 0 0;
padding-top: 30px;
border-top: 1px solid #002D4C;
display: block;
}
.company-profile-cont .row.access-row > dt{
margin-bottom: 20px;
}
.company-profile-cont .row.access-row > dd{
display: flex;
align-items: center;
}
.company-profile-cont .row.access-row iframe{
width: 50%;
height: 280px;
}
.company-profile-cont .row.access-row > dd dl{
width: 50%;
padding-left: 30px;
}
.company-profile-cont .row.access-row > dd dt{
margin-bottom: 10px;
}
.company-profile-cont .row.access-row > dd dt ~ dt{
margin-top: 40px;
}
.company-profile-cont .row.access-row > dd dd{
font-size: 16px;
color: #8898a5;
line-height: 1.3;
font-weight: 500;
}
.greeting {
background: url(img/bg-nijyuumaru.svg) no-repeat right calc(50% - 610px) bottom 110px / 420px , url(img/bg-nijyuumaru-2.svg) no-repeat left calc(50% - 634px) bottom -20px / 420px;
}
.greeting-cont{
background: #fff;
box-shadow:inset 0 0 0 3px #1974BF;
border-radius: 3px;
position: relative;
padding:40px 50px;
}
.greeting-cont:before {
content: '';
display: block;
width: 20px;
height: 20px;
background: #fff;
pointer-events: none;
position: absolute;
top: -10px;
right: 100px;
}
.greeting-cont:after{
content: '';
display: block;
width: 20px;
height: 30px;
background: #fff;
pointer-events: none;
position: absolute;
left: -10px;
bottom: 130px;
}
.greeting-cont h3 {
background: #fff;
position: absolute;
right: 50px;
bottom: -10px;
color: #ff7300;
font-size: 20px;
padding: 5px 18px;
letter-spacing: 2px;
}
.greeting-cont h3 .s {
font-size: 16px;
margin-right: 8px;
}
.greeting-cont p{
line-height: 1.4;
font-weight: 700;
font-size: 15px;
}
.greeting-cont p:last-child{
margin-bottom: 0;
}
.role .img-wrap{
background: #fff;
border-radius: 30px;
padding: 40px 30px;
}
.role .img-wrap .sp{
display: none;
}
.page-partner-fv-bg{
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
}
.page-partner .lower-fv h1 {
font-size: 50px;
font-weight: 900;
color: #002D4C;
text-align: left;
line-height: 1.6;
width: 1000px;
max-width: calc(100% - 40px);
}
.page-partner .lower-fv h1::first-letter{
color: #002D4C;
}
.orange{
color: #EA680C;
}
.such-troubles {
background: url(img/bg-nijyuumaru.svg) no-repeat right calc(50% - 870px) top 90px / 520px , url(img/bg-nijyuumaru-2.svg) no-repeat left calc(50% - 870px) bottom 80px / 520px;
}
.lower-main .such-troubles h2{
margin-bottom: 46px;
}
.text-center{
text-align: center;
}
.such-troubles .text-center{
font-size: 18px;
font-weight: 300;
color: #000;
margin-bottom: 24px;
}
.such-troubles-cont{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px;
}
.such-troubles-cont li{
padding-top: 100%;
position: relative;
background: #1A4F84;
border-radius: 45px;
}
.such-troubles-cont li .inner{
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
width: 100%;
height: 100%;
font-size: 24px;
font-weight: 900;
color: #fff;
line-height: 1.6;
text-align: center;
}
.such-troubles-cont li .inner:before{
content: '';
display: block;
width: 100px;
height: 100px;
}
.such-troubles-cont li:nth-of-type(1) .inner:before{
background: url(img/newservice_w.svg) no-repeat center / contain;
}
.such-troubles-cont li:nth-of-type(2) .inner:before{
background: url(img/plusservice_w.svg) no-repeat center / contain;
}
.such-troubles-cont li:nth-of-type(3) .inner:before{
background: url(img/economy_w.svg) no-repeat center / contain;
}
.such-troubles-cont li:nth-of-type(4) .inner:before{
background: url(img/oem_w.svg) no-repeat center / contain;
}
.such-troubles-cont li:nth-of-type(5) .inner:before{
background: url(img/subsc_w.svg) no-repeat center / contain;
}
.such-troubles-cont li:nth-of-type(6) .inner:before{
background: url(img/good_w.svg) no-repeat center / contain;
}
.partner-benefits-cont{
display: flex;
gap: 20px;
}
.partner-benefits-cont li{
background: #fff;
flex: 1;
border-radius: 10px;
overflow: hidden;
padding-bottom: 30px;
}
.partner-benefits-cont li .img-wrap{
height: 200px;
overflow: hidden;
margin-bottom: 20px;
}
.partner-benefits-cont li .img-wrap img{
height: 100%;
object-fit: cover;
transform: scale(1.1);
transform-origin: center top;
}
.partner-benefits-cont li:nth-of-type(3) .img-wrap img{
transform: scale(1.4);
}
.partner-benefits-cont li h3,.partner-benefits-cont li p{
max-width: calc(100% - 80px);
margin: 0 auto;
width: fit-content;
}
.partner-benefits-cont li h3{
color: #EA680C;
font-size: 20px;
font-weight: 900;
line-height: 1.7;
margin-bottom: 20px;
}
.partner-benefits-cont li p{
color: #002D4C;
font-size: 18px;
font-weight: 300;
line-height: 1.7;
}
.partner-benefits .text-link{
position: relative;
right: calc(50% - 500px);
}
.oem{
background: url(img/bg-nijyuumaru.svg) no-repeat left calc(50% - 870px) top 50px / 520px , url(img/bg-nijyuumaru-2.svg) no-repeat right calc(50% - 870px) bottom 50px / 520px;
}
.oem-cont{
display: flex;
gap: 40px;
}
.oem-cont li{
flex: 1;
}
.oem-cont li .img-wrap{
background: #F3FAFF;
border-radius: 10px;
padding: 10px 0;
}
.oem-cont li .img-wrap img{
display: block;
width: 80%;
margin: 0 auto;
}
.oem-cont li h3,.oem-cont li p{
width: calc(100% - 60px);
margin: 0 auto;
}
.oem-cont li h3{
color: #EA680C;
font-size: 24px;
font-weight: 700;
line-height: 1.3;
border-bottom: 2px solid #EA680C;
display: flex;
align-items: center;
gap: 16px;
height: 100px;
margin-bottom: 5px;
}
.oem-cont li h3:before{
content: '';
display: block;
width: 40px;
min-width: 40px;
height: 40px;
}
.oem-cont li:nth-of-type(1) h3:before{
background: url(img/subsc.svg) no-repeat center / contain;
}
.oem-cont li:nth-of-type(2) h3:before{
background: url(img/oem.svg) no-repeat center / contain;
}
.oem-cont li p{
color: #002D4C;
font-size: 18px;
font-weight: 300;
line-height: 1.4;
}
.consultation-form .form-wrap{
background: #fff;
border-radius: 30px;
width: 700px;
padding: 10px 0 0;
overflow: hidden;
}


/*---------------------------
下層　レスポンシブ
---------------------------*/
@media screen and (max-width: 1150px) {
.page-partner-fv-bg{
object-position: 58% center;
}
}

@media screen and (max-width: 1040px) {
.lower-main .text-h2-bottom{
max-width: calc(100% - 40px);
}
.partner-benefits-cont li h3, .partner-benefits-cont li p {
max-width: calc(100% - 40px);
}
.partner-benefits .text-link {
right: 20px;
}
.greeting {
background: url(img/bg-nijyuumaru.svg) no-repeat right -320px top calc(50% - 20px) / 420px , url(img/bg-nijyuumaru-2.svg) no-repeat left -320px bottom -20px / 420px;
}
}

@media screen and (max-width: 1000px) {
.page-partner-fv-bg {
object-position: 62% center;
}
.such-troubles-cont li .inner{
font-size: calc(0.7rem + 1vw);
}
.such-troubles-cont li .inner:before{
width: 32%;
}
.oem-cont {
gap: 20px;
}
.oem-cont li h3, .oem-cont li p {
width: calc(100% - 40px);
}
.lower-main .service-list .text-h2-bottom {
width: auto;
padding-right: 84px;
}
.service-list-cont:nth-of-type(3) .img-wrap img{
width: 130%;
}
}

@media screen and (max-width: 950px) {
.oem-cont li h3 {
font-size: 22px;
}
.oem-cont li p{
font-size: 17px;
}
.lower-main .service-list .text-h2-bottom {
margin-bottom: 30px;
}
}

@media screen and (max-width: 900px) {
.page-partner-fv-bg {
object-position: 65% center;
}
.partner-benefits-cont li .img-wrap {
height: 170px;
margin-bottom: 16px;
}
.partner-benefits-cont li h3{
font-size: 18px;
margin-bottom: 16px;
}
.partner-benefits-cont li p{
font-size: 16px;
}
.service-list-cont:nth-of-type(3) .img-wrap img {
width: 140%;
}
.service-list-cont:nth-of-type(6) .img-wrap img {
transform: translate(-48%,-45%);
width: 158%;
}
}

@media screen and (max-width: 850px) {
.lower-fv{
height: 340px;
}
.oem-cont li h3, .oem-cont li p {
width: calc(100% - 30px);
}
.oem-cont li h3 {
font-size: 20px;
height: 90px;
gap: 14px;
}
.oem-cont li h3:before {
width: 36px;
min-width: 36px;
height: 36px;
}
.oem-cont li p {
font-size: 16px;
}
.service-list-cont .text-wrap h3{
font-size: 22px;
}
.service-list-cont .text-wrap h3 .s {
font-size: 16px;
}
.service-list-cont .text-wrap p{
font-size: 17px;
}
.service-list-cont:nth-of-type(3) .img-wrap img {
width: 150%;
}
}

@media screen and (max-width: 800px) {
.lower-fv{
height: 270px;
}
.lower-fv:before{
max-width: calc(100% - 30px);
}
.lower-fv-bg-line {
width: 200%;
min-height: 100%;
object-fit: cover;
}
.page-partner .lower-fv h1{
font-size: 40px;
}
.such-troubles-cont li .inner:before {
height: 80px;
}
.partner-benefits-cont li {
padding-bottom: 20px;
}
.partner-benefits-cont li h3, .partner-benefits-cont li p {
max-width: calc(100% - 30px);
}
.partner-benefits-cont li h3 {
font-size: 16px;
}
.partner-benefits-cont li p {
font-size: 14px;
}
.oem-cont li h3 {
font-size: 18px;
height: 80px;
}
.oem-cont li p {
font-size: 15px;
}
.service-list-cont .text-wrap {
padding: 20px 30px 0;
}
.service-list-cont:nth-of-type(3) .img-wrap img {
width: 160%;
}
}

@media screen and (max-width: 750px) {
.oem-cont li h3 {
font-size: 17px;
height: 74px;
}
.oem-cont li h3:before {
width: 32px;
min-width: 32px;
height: 32px;
}
.oem-cont li p {
font-size: 14px;
}
.lower-main .service-list .text-h2-bottom {
font-size: calc(0.5rem + 1vw);
}
.service-list-cont{
height: 240px;
}
.service-list-cont .img-wrap {
width: 40%;
}
.service-list-cont .text-wrap {
width: 60%;
padding: 14px 25px 0;
}
.service-list-cont:nth-of-type(2) .img-wrap img {
width: 200%;
}
.service-list-cont:nth-of-type(3) .img-wrap img {
width: 170%;
}
.service-list-cont .text-wrap h3{
font-size: 20px;
padding: 12px 0 12px 54px;
margin-bottom: 12px;
}
.service-list-cont .text-wrap h3:before{
width: 40px;
height: 34px;
}
.service-list-cont .text-wrap p {
font-size: 16px;
}
}

@media screen and (max-width: 700px) {
.company-profile-cont .row.access-row > dd {
display: block;
}
.company-profile-cont .row.access-row iframe {
width: 100%;
}
.company-profile-cont .row.access-row > dd dl {
width: auto;
padding-left: 0;
margin-top: 14px;
}
.company-profile-cont .row.access-row > dd dt {
margin-bottom: 5px;
}
.company-profile-cont .row.access-row > dd dt ~ dt {
margin-top: 20px;
}
.role .img-wrap .pc{
display: none;
}
.role .img-wrap .sp {
display: block;
}
.such-troubles-cont{
gap: 20px;
}
.such-troubles-cont li {
border-radius: 30px;
}
.such-troubles-cont li .inner:before {
height: 70px;
}
.such-troubles-cont li .inner {
font-size: calc(0.6rem + 1vw);
gap: 16px;
}
.partner-benefits-cont {
display: block;
}
.partner-benefits-cont li{
position: relative;
margin-bottom: 30px;
padding: 20px 20px 0 calc(40% + 20px);
display: flex;
flex-direction: column;
height: 230px;
}
.partner-benefits-cont li:last-child{
margin-bottom: 0;
}
.partner-benefits-cont li .img-wrap{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 40%;
margin: 0;
}
.partner-benefits-cont li h3, .partner-benefits-cont li p{
max-width: none;
width: 100%;
}
.partner-benefits-cont li h3 {
font-size: 18px;
}
.partner-benefits-cont li p{
font-size: 16px;
}
.oem-cont li h3 br{
display: none;
}
.consultation-form .form-wrap{
padding: 10px 20px 0;
}
.service-list-cont:nth-of-type(6) .img-wrap img {
transform: translate(-48%,-43%);
width: 190%;
}
}

@media screen and (max-width: 650px) {
.partner-benefits-cont li .img-wrap img{
transform: none;
}
.partner-benefits-cont li:nth-of-type(3) .img-wrap img {
transform: scale(1.1);
}
.service-list-cont:nth-of-type(2) .img-wrap img {
width: 230%;
}
.service-list-cont:nth-of-type(3) .img-wrap img {
width: 100%;
transform: translate(-50%,-50%);
}
}

@media screen and (max-width: 600px) {
.lower-fv:before {
max-width: calc(100% - 20px);
height: 170px;
}
.lower-main section {
padding: 60px 0;
}
.lower-main .text-h2-bottom{
font-size: 16px;
}
.company-profile-cont{
padding: 34px;
}
.company-profile-cont .row > dt{
font-size: 16px;
width: 130px;
min-width: 130px;
line-height: 38px;
}
.company-profile-cont .row > dd{
font-size: 16px;
}
.company-profile-cont .row {
gap: 24px;
}
.page-partner .lower-fv h1 {
font-size: 36px;
}
.such-troubles .text-center {
font-size: 16px;
}
.such-troubles-cont li .inner:before {
height: 60px;
}
.oem-cont li h3, .oem-cont li p {
width: calc(100% - 20px);
}
.service-list-cont-wrap:before{
display: none;
}
.lower-main .service-list .text-h2-bottom {
padding-right: 0;
font-size: 16px;
}
.service-list-cont{
display: block;
height: auto;
border-radius: 20px;
}
.service-list-cont .img-wrap {
width: auto;
height: 200px;
border-radius: 0;
}
.service-list-cont .img-wrap img{
width: 100%;
}
.service-list-cont:nth-of-type(2) .img-wrap img {
width: 140%;
transform: translate(-50%,-45%);
}
.service-list-cont:nth-of-type(6) .img-wrap img {
transform: translate(-48%,-36%);
width: 126%;
}
.service-list-cont .text-wrap {
width: auto;
padding: 14px 25px 26px;
}
.service-list-cont-wrap {
margin-bottom: 60px;
}
}

@media screen and (max-width: 550px) {
.lower-fv:before {    
height: 160px;
}
.greeting-cont {
padding: 30px 40px 40px;
}
.greeting-cont h3{
right: 22px;
}
.such-troubles-cont li {
border-radius: 24px;
}
.such-troubles-cont li .inner {
font-size: calc(0.5rem + 1vw);
gap: 10px;
}
.partner-benefits-cont li:nth-of-type(3) .img-wrap img {
transform: none;
}
.partner-benefits-cont li p {
font-size: 15px;
}
.oem-cont li h3 {
font-size: 16px;
height: 68px;
gap: 10px;
}
}

@media screen and (max-width: 500px) {
.lower-fv {
height: 280px;
}
.lower-fv h1 {
font-size: 22px;    
}
.lower-fv h1:before{
font-size: 36px;
}
.page-partner .lower-fv h1 {
font-size: 32px;
}
.such-troubles-cont {
gap: 15px;
}
.such-troubles-cont li .inner:before {
height: 50px;
}
.partner-benefits-cont li{
height: auto;
padding: 0 0 20px;
display: block;
}
.partner-benefits-cont li .img-wrap {
position: static;
height: 37vw;
width: 100%;
margin-bottom: 14px;
}
.partner-benefits-cont li:nth-of-type(1) .img-wrap img{
object-position: 0 -20px;
}
.partner-benefits-cont li:nth-of-type(2) .img-wrap img {
object-position: center;
}
.partner-benefits-cont li:nth-of-type(3) .img-wrap img {
transform: scale(1.4);
object-position: top;
}
.partner-benefits-cont li h3, .partner-benefits-cont li p {
max-width: calc(100% - 40px);
}
.partner-benefits-cont li h3 {
margin-bottom: 8px;
}
.partner-benefits-cont li p {
font-size: 16px;
}
.oem-cont {
display: block;
}
.oem-cont li{
margin-bottom: 40px;
}
.oem-cont li:last-child{
margin-bottom: 0;
}
.oem-cont li .img-wrap {
padding: 5px 0;
}
.oem-cont li .img-wrap img {
width: 60%;
}
.oem-cont li h3, .oem-cont li p {
width: calc(100% - 30px);
}
.oem-cont li h3 {
font-size: 18px;
gap: 12px;
}
.oem-cont li h3:before {
width: 36px;
min-width: 36px;
height: 36px;
}
.oem-cont li p {
font-size: 16px;
}
}

@media screen and (max-width: 450px) {
.lower-fv {
height: 220px;
}
.lower-fv:before {
height: 130px;
}
.lower-fv h1:before {
font-size: 32px;
}
.lower-fv h1 {
font-size: 20px;
}
.lower-main h2{
font-size: 22px;
margin-bottom: 60px;
}
.service-list-cont-wrap, .greeting-cont, .role .img-wrap, .such-troubles-cont, .partner-benefits-cont, .oem-cont, .consultation-form .form-wrap{
max-width: calc(100% - 30px);
}
.lower-main .text-h2-bottom {
font-size: 14px;
max-width: calc(100% - 30px);
}
.company-profile-cont {
padding: 30px;
border-radius: 24px;
margin-top: 30px;
}
.company-profile-cont .row {
gap: 14px;
margin-bottom: 20px;
}
.company-profile-cont .row > dt{
font-size: 14px;
width: 100px;
min-width: 100px;
line-height: 34px;
}
.company-profile-cont .row > dd {
font-size: 14px;
}
.company-profile-cont .row.access-row {
margin: 20px 0 0;
padding-top: 20px;    
}
.company-profile-cont .row.access-row > dt {
margin-bottom: 15px;
}
.company-profile-cont .row.access-row > dd dl {    
margin-top: 10px;
}
.company-profile-cont .row.access-row > dd dt {
margin-bottom: 3px;
}
.company-profile-cont .row.access-row > dd dt ~ dt {
margin-top: 16px;
}
.company-profile-cont .row.access-row > dd dd {
font-size: 14px;
}
.greeting {
background: url(img/bg-nijyuumaru.svg) no-repeat right -330px top calc(50% - 20px) / 420px , url(img/bg-nijyuumaru-2.svg) no-repeat left -330px bottom -20px / 420px;
}
.greeting-cont {
padding: 25px 30px 40px;
}
.page-partner .lower-fv h1 {
font-size: 28px;
max-width: calc(100% - 30px);
}
.page-partner-fv-bg {
object-position: 57% center;
}
.such-troubles .text-center {
font-size: 14px;
margin-bottom: 20px;
}
.such-troubles-cont {
gap: 12px;
}
.such-troubles-cont li {
border-radius: 18px;
}
.such-troubles-cont li .inner {
font-size: 12px;
}
.such-troubles-cont li .inner:before {
height: 40px;
}
.partner-benefits .text-link {
right: 15px;
}
.oem-cont li h3 {
font-size: 17px;
}
.oem-cont li p {
font-size: 15px;
}
.consultation-form .form-wrap{
border-radius: 24px;
}
.lower-main .service-list .text-h2-bottom {
font-size: 14px;
}
.service-list-cont{
margin-bottom: 36px;
border-radius: 10px;
}
.service-list-cont .img-wrap {
height: 160px;
}
.service-list-cont .text-wrap {
padding: 10px 25px 25px;
}
.service-list-cont .text-wrap h3 {
font-size: 18px;
padding: 10px 0 10px 50px;
}
.service-list-cont .text-wrap h3:before {
width: 36px;
height: 30px;
}
.service-list-cont .text-wrap h3 .s {
font-size: 14px;
}
.service-list-cont .text-wrap p {
font-size: 15px;
}
.btn-orange{
font-size: 20px;
}
}

@media screen and (max-width: 431px) {
.oem-cont li h3 {
font-size: 16px;
gap: 10px;
height: 60px;
}
.oem-cont li h3:before {
width: 32px;
min-width: 32px;
height: 32px;
}
.oem-cont li p {
font-size: 14px;
}
.role .img-wrap {
padding: 30px 20px;
}
}

@media screen and (max-width: 415px) {
.lower-fv {
height: 200px;
}
.lower-main section {
padding: 50px 0;
}
.company-profile-cont {
padding: 20px;
border-radius: 20px;
}
.oem-cont li h3, .oem-cont li p {
width: calc(100% - 20px);
}
.consultation-form .form-wrap {
border-radius: 20px;
padding: 0px 10px;
}
.service-list-cont-wrap {
margin-bottom: 50px;
}
}

@media screen and (max-width: 391px) {
.lower-fv:before {
max-width: calc(100% - 15px);
}
.page-partner .lower-fv h1 {
font-size: 26px;
}
.such-troubles-cont {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.such-troubles-cont li{
padding-top: 150px;
}
.such-troubles-cont li .inner {
font-size: 15px;
gap: 10px;
}
.such-troubles-cont li .inner:before {
height: 50px;
width: 50px;
}
.partner-benefits-cont li .img-wrap {
height: 35vw;
}
.oem-cont li h3 {
font-size: 18px;
gap: 12px;
height: 80px;
}
.oem-cont li h3:before {
width: 36px;
min-width: 36px;
height: 36px;
}
.oem-cont li h3 br{
display: block;
}
.oem-cont li p {
font-size: 16px;
}
.consultation-form .form-wrap {
padding: 0px 5px;
}
.service-list-cont .text-wrap {
padding: 8px 20px 20px;
}
.service-list-cont .text-wrap h3{
font-size: 17px;
padding: 10px 0 10px 46px;
}
.service-list-cont .text-wrap h3:before {
width: 34px;
height: 28px;
}
.service-list-cont .text-wrap h3 .s {
font-size: 13px;
}
.btn-orange{
line-height: 54px;
font-size: 18px;
}
.btn-orange:after{
width: 14px;
height: 14px;
}
}

@media screen and (max-width: 376px) {
.lower-fv:before {
height: 120px;
}
.service-list-cont .img-wrap {
height: 140px;
}
.role .img-wrap {
padding: 20px 16px;
border-radius: 20px;
}
}

@media screen and (max-width: 361px) {
.such-troubles .text-center {
font-size: 13px;
}
.service-list-cont .text-wrap h3 {
font-size: 16px;
}
.service-list-cont .text-wrap h3 .s {
font-size: 12px;
}
.service-list-cont .text-wrap p {
font-size: 14px;
}
}

/*---------------------------
お問い合わせ完了ページ
---------------------------*/
.transmission-completed .btn-orange {
margin-top: 70px;
width: 300px;
font-size: 18px;
line-height: 52px;
}
.transmission-completed .btn-orange:after{
width: 14px;
height: 14px;
}

@media screen and (max-width : 450px){
.transmission-completed .btn-orange {
width: 280px;
font-size: 16px;
line-height: 48px;
}
}

@media screen and (max-width : 376px){
.lower-main.page-contact-completed h2 {
font-size: 20px;
}
}


/*---------------------------
プライバシーポリシーページ
---------------------------*/
.lower-main.page-privacy .privacy-txtbox h2{
line-height:1.6;
}
.lower-main.page-privacy .privacy-txtbox h2 .sp{
display:none;
}
.lower-main.page-privacy .privacy-txtbox .text-h2-bottom + h2{
margin:100px 0 70px;
}
.lower-main.page-privacy .privacy-txtbox h4 {
font-size: 18px;
padding: 15px 0;
}
.lower-main.page-privacy .privacy-txtbox p {
margin: 0 0 15px;
}
.lower-main.page-privacy .privacy-txtbox ol {
margin-bottom: 15px;
}
.lower-main.page-privacy .privacy-txtbox li {
font-size:16px;
line-height:1.6;
text-indent: -16px;
padding: 15px 0 15px 16px;
}
.lower-main.page-privacy .privacy-txtbox ol li {
list-style-type: decimal;
list-style-position: inside;
}
.lower-main.page-privacy .privacy-txtbox ol li ul li {
list-style-type: disc;
padding: 0 0 0 16px;
}
.lower-main.page-privacy .privacy-txtbox ol li:last-child {
padding-bottom: 0;
}
.lower-main.page-privacy .privacy-txtbox .privacy-aside {
text-align: right;
margin-bottom: 30px;
font-size: 12px;
line-height: 1.6;
}
.lower-main.page-privacy .privacy-txtbox ol li .textSmall {
font-size: 13px;
}
.lower-main.page-privacy .privacy-txtbox .privacy-info {
display: flex;
gap: 30px;
margin-top: 30px;
}
.lower-main.page-privacy .privacy-txtbox .privacy-info h3 {
color: #ea680c;
}

@media screen and (max-width : 500px){
.lower-main.page-privacy .privacy-txtbox .privacy-info{
flex-direction: column;
gap: 15px;
}
}

@media screen and (max-width : 450px){
.lower-main.page-privacy .text-h2-bottom {
font-size: 16px;
}
.lower-main.page-privacy .privacy-txtbox h2 .sp{
display:block;
}
}