/* reset.css */
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
all: unset;
display: revert;
font-family: 'Noto Sans JP', sans-serif;
}
/* Preferred box-sizing value */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Reapply the pointer cursor for anchor tags */
a, button {
cursor: revert;
}
/* Remove list styles (bullets/numbers) */
ol, ul, menu {
list-style: none;
}
/* For images to not be able to exceed their container */
img {
max-width: 100%;
}
/* removes spacing between cells in tables */
table {
border-collapse: collapse;
}
/* Safari - solving issue when using user-select:none on the text input doesn't working */
input, textarea {
-webkit-user-select: auto;
}
/* revert the 'white-space' property for textarea elements on Safari */
textarea {
white-space: revert;
}
/* minimum style to allow to style meter element */
meter {
-webkit-appearance: revert;
appearance: revert;
}
/* reset default text opacity of input placeholder */
::placeholder {
color: unset;
}
/* fix the feature of 'hidden' attribute.
display:revert; revert to element instead of attribute */
:where([hidden]) {
display: none;
}
/* revert for bug in Chromium browsers
- fix for the content editable attribute will work properly.
- webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable="false"])) {
-moz-user-modify: read-write;
-webkit-user-modify: read-write;
overflow-wrap: break-word;
-webkit-line-break: after-white-space;
-webkit-user-select: auto;
}
/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
-webkit-user-drag: element;
}
/* common */
:root{
--primary-base:#F8951D;
--primary-btn: linear-gradient(90deg, #0079BD 0%, #45B6F5 100%);
--secondary-base:#000;
--main-secondaryBlue: #0064BF;
}
html {scroll-behavior: smooth;}
a { transition: 0.3s ease-in-out;}
p { letter-spacing: 1.5px; line-height: 2;}
a.primaryBtn {
color: #FFF;
border-radius: 4px;
cursor: pointer;
background: var(--primary-btn);
width: 220px;
height: 50px;
padding: 10px 10px 12px 10px;
display: flex;
justify-content: center;
position: relative;
border: solid 1px #005584;
}
a.secondaryBtn {
border-radius: 4px;
border: 1px solid var(--main-secondary, #000);
background: var(--main-secondary, #000);
color: #fff;
width: 220px;
height: 50px;
padding: 10px 10px 12px 10px;
display: flex;
justify-content: center;
position: relative;
}
a.secondaryBtn:after, a.primaryBtn:after {
content: "\E5e1";
font-family: 'Material Icons';
font-weight: 900;
margin-right: 0;
position: absolute;
right: 12px;
top: 48%;
transform: translateY(-50%);
transition: 0.2s ease-in-out;
font-size: 0.8rem;
opacity: 0.7;
}
a.secondaryBtn:hover, a.primaryBtn:hover {
opacity: 0.8;
}
a.secondaryBtn:hover:after, a.primaryBtn:hover:after {
right: 9px;
}
/* スクロールCSS */
.fade-in {
opacity: 0;
transition-duration: 500ms;
transition-property: opacity, transform;
}
.fade-in-up {
transform: translate(0, 50px);
}
.fade-in-down {
transform: translate(0, -50px);
}
.fade-in-left {
transform: translate(-50px, 0);
}
.fade-in-right {
transform: translate(50px, 0);
}
.scroll-in {
opacity: 1;
transform: translate(0, 0);
}
/* header */
header#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
transition: 0.3s ease-in-out;
}
.header__inner {
display: flex;
justify-content: space-between;
padding: 12px 2%;
align-items: center;
transition: 0.3s ease-in-out;
}
a.header__inner--logo {
transition: 0.3s ease-in-out;
}
a.header__inner--logo:hover {
opacity: 0.6;
}
a.header__inner--logo img {
width: 100%;
max-height: 55px;
position: relative;
z-index: 1;
}
.header__inner--right {
display: flex;
justify-content: flex-end;
gap: 30px;
align-items: center;
}
header#header:before {
content: "";
width: 100%;
height: 100%;
background: #fff;
position: absolute;
top: 0;
left: 0;
opacity: 0;
pointer-events: none;
transition: 0.3s ease-in-out;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
background-color: rgba(255, 255, 255, 0.25);
}
header#header.resize:before {
opacity: 1;
}
header#header.resize .header__inner {
padding-top: 6px;
padding-bottom: 6px;
}
header#header.resize a.header__inner--logo {
width: 200px;
transform: translateY(-3px);
}
/* mv */
section#mv {
position: relative;
display: block;
}
.mv__inner {
width: 100%;
height: calc(100svh - 120px);
max-width: 1250px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
min-height: 680px;
position: relative;
}
section#mv .mv__inner:after {
content: "";
width: 800px;
height: 600px;
border-radius: 9999px;
background: radial-gradient(50% 50% at 50% 50%, #FFF 0%, rgba(255, 255, 255, 0.80) 63.5%, rgba(255, 255, 255, 0.00) 100%);
position: absolute;
left: -60px;
z-index: 1;
top: 50%;
transform: translateY(-50%);
}
section#mv:before {
content: "";
width: 90%;
height: 85%;
background: url(../img/mv_map.svg) no-repeat;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-size: cover;
}
.mv__inner--left {
position: relative;
display: flex;
flex-direction: column;
gap: 20px;
z-index: 2;
padding-top: 60px;
}
.mv__inner--left h1 {
display: flex;
flex-direction: column;
font-size: 4.2rem;
letter-spacing: 4px;
font-weight: 600;
color: var(--secondary-base);
line-height: 1.5;
}
.mv__inner--left h1 span {
font-size: 1.7rem;
}
ul.mv__inner--count {
display: flex;
justify-content: flex-start;
align-items: flex-end;
gap: 50px;
margin-top: 20px;
}
ul.mv__inner--count li {
position: relative;
padding: 0 60px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
}
ul.mv__inner--count li:before {
content: "";
width: 63px;
height: 125px;
position: absolute;
left: -15px;
bottom: -10px;
background: url(../img/leaf_left.svg) no-repeat;
background-size: cover;
}
ul.mv__inner--count li:after {
content: "";
width: 63px;
height: 125px;
position: absolute;
right: -15px;
bottom: -10px;
background: url(../img/leaf_right.svg) no-repeat;
background-size: cover;
}
ul.mv__inner--count li p {
font-size: 0.8rem;
line-height: 1.4;
color: #313131;
}
ul.mv__inner--count li p span {
display: block;
font-size: 0.7rem;
color: #707070;
}
/* mvunder */
section#mvunder {
background: var(--main-secondaryBlue);
}
.mvunder__inner {
position: relative;
width: 100%;
max-width: 1250px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
padding: 30px 0;
gap: 30px;
}
.mvunder__inner--top h2 {
color: #ffff00;
font-weight: 500;
position: relative;
letter-spacing: 1.5px;
font-size: 1.8rem;
padding: 0 35px;
}
.mvunder__inner--top h2:before {
content: "";
width: 28px;
height: 28px;
position: absolute;
left: 0;
bottom: 2px;
background: url(../img/textline.svg) no-repeat;
opacity: 0.5;
}
.mvunder__inner--top h2:after {
content: "";
width: 28px;
height: 28px;
position: absolute;
right: 0;
bottom: 2px;
background: url(../img/textline.svg) no-repeat;
opacity: 0.5;
transform: scale3d(-1, 1, 1);
}
.mvunder__inner--middle {
border-radius: 4px;
background: rgba(255, 255, 255, 0.20);
width: 100%;
}
.mvunder__inner--middle ul {
display: flex;
align-items: center;
padding: 30px 45px;
justify-content: space-around;
}
.mvunder__inner--middle ul li {
display: flex;
flex-direction: column;
gap: 10px;
}
.mvunder__inner--middle ul li img {
width: 70px;
height: 70px;
margin: 0 auto;
}
.mvunder__inner--middle ul li h3 {
color: #fff;
letter-spacing: 1.5px;
font-size: 0.9rem;
}
.mvunder__inner--bottom p {
color: #fff;
font-size: 1.1rem;
}
/* nayami */
section#nayami {
background-color: #fff;
background-image: radial-gradient(#f9f9f9 30%, transparent 30%);
background-size: 15px 15px;
}
.nayami__inner {
width: 100%;
max-width: 1250px;
margin: 0 auto;
padding: 80px 0;
display: flex;
flex-direction: column;
gap: 40px;
align-items: center;
}
.nayami__inner h2 {
font-weight: 600;
position: relative;
letter-spacing: 1.5px;
font-size: 2.5rem;
}
ul.nayami__inner--list {
display: flex;
justify-content: space-between;
width: 100%;
background: #fff;
position: relative;
align-items: center;
border-radius: 6px;
filter: drop-shadow(1px 1px 7px #ddd);
max-width: 1000px;
}
ul.nayami__inner--list:after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -20px;
border: 20px solid transparent;
border-top: 20px solid #fff;
}
ul.nayami__inner--list li {
width: calc(100% / 3);
display: flex;
flex-direction: column;
align-items: center;
position: relative;
border-right: solid 1px #eee;
padding: 40px 0px 50px;
gap: 20px;
}
ul.nayami__inner--list li:last-child {
border: none;
}
ul.nayami__inner--list li h3 {
font-weight: 500;
line-height: 1.8;
font-size: 1.3rem;
text-align: center;
}
ul.nayami__inner--list li img {
width: 250px;
}
.nayami__inner p {
font-weight: 600;
position: relative;
letter-spacing: 1.5px;
font-size: 2.2rem;
color: var(--primary-base);
}
/* merit */
section#merit {
background: var(--main-secondaryBlue);
position: relative;
}
section#merit:before {
content: "";
width: 100%;
height: 1000px;
background: url(../img/bg_blue.png) no-repeat;
position: absolute;
top: 0;
left: 0;
background-size: cover;
}
.merit__inner {
width: 100%;
max-width: 1250px;
margin: 0 auto;
padding: 100px 0;
display: flex;
flex-direction: column;
gap: 40px;
align-items: center;
position: relative;
}
.merit__inner h2 {
color: #fff;
font-weight: 500;
position: relative;
letter-spacing: 1.5px;
font-size: 1.8rem;
padding: 12px 35px 16px;
border: solid 1px #fff;
border-radius: 4px;
background: rgb(255, 255, 255, 0.1);
}
p.merit__inner--desc {
text-align: center;
color: #fff;
line-height: 2.4;
}
ul.merit__inner--list {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 40px 30px;
max-width: 1000px;
}
ul.merit__inner--list li {
width: calc(100% / 3 - 30px);
display: flex;
flex-direction: column;
align-items: center;
padding: 30px 25px;
gap: 25px;
border-radius: 4px;
background: #FFF;
box-shadow: 0px 5px 14px 0px rgba(51, 71, 153, 0.08);
}
ul.merit__inner--list li h3 {
font-size: 1.3rem;
font-weight: 600;
color: var(--main-secondaryBlue);
}
ul.merit__inner--list li img {
max-width: 120px;
}
/* about */
section#about {
background: var(--primary-base);
position: relative;
}
section#about:before {
content: "";
width: 90%;
height: 85%;
background: url(../img/map_white.svg) no-repeat;
position: absolute;
top: 210px;
left: 50%;
transform: translateX(-50%);
background-size: contain;
pointer-events: none;
}
.about__inner {
width: 100%;
max-width: 1250px;
padding: 120px 0 80px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 50px;
position: relative;
}
.about__inner--heading {
display: flex;
flex-direction: column;
gap: 12px;
}
.about__inner--heading img {
max-width: 500px;
margin: 0 auto;
width: 100%;
}
.about__inner--heading h2 {
color: #fff;
font-weight: 500;
position: relative;
letter-spacing: 1.5px;
font-size: 1.8rem;
text-align: center;
}
.about__inner--heading h2 span {
padding-top: 0.3em;
background-position: top left -2px;
background-repeat: repeat-x;
background-size: 1.05em 0.3em;
background-image: -webkit-radial-gradien(.15em .15em at center center, #ffff00, #ffff00 100%, transparent);
background-image: radial-gradient(.15em .15em at center center, #ffff00, #ffff00 100%, transparent);
color: #ffff00;
}
ul.resolution__step {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
width: 100%;
}
ul.resolution__step li {
background: #fff;
text-align: center;
padding: 30px 0;
width: 23.5%;
position: relative;
filter: drop-shadow(0px 1px 2px #ddd);
border-radius: 4px;
}
ul.resolution__step li:first-child {
z-index: 4;
}
ul.resolution__step li:nth-child(2) {
z-index: 3;
}
ul.resolution__step li:nth-child(3) {
z-index: 2;
}
ul.resolution__step li:before {
content: "";
position: absolute;
top: 13%;
left: 100%;
margin-top: -18px;
border: 18px solid transparent;
border-left: 18px solid #ffffff;
}
ul.resolution__step li:last-child:before {
content: none;
}
ul.resolution__step li p {
font-size: 1.3rem;
color: #f8951d;
position: relative;
display: inline-block;
padding: 0px 15px;
border-bottom: dotted 3px;
margin-bottom: 15px;
}
.resolution__step--img {
position: relative;
margin-bottom: 15px;
}
.resolution__step--img:after {
content: "";
width: 210px;
height: 210px;
position: absolute;
background: #E8F9FF;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 9999px;
}
.resolution__step--img img {
position: relative;
z-index: 1;
}
p.resolution__bottom--Text {
text-align: center;
font-size: 1.5rem;
letter-spacing: 0.05rem;
line-height: 2;
}
ul.resolution__step li h3 {
font-size: 1.3rem;
font-weight: 500;
letter-spacing: 1.5px;
}
.about__inner--bottom p {
text-align: center;
font-size: 1.4rem;
font-weight: 500;
color: #fff;
}
ul.buttonBlock {
display: flex;
justify-content: center;
gap: 85px;
}
ul.buttonBlock li {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
}
ul.buttonBlock li p {
font-size: 0.9rem;
line-height: 1.7;
position: relative;
}
ul.buttonBlock li a {
width: 280px;
height: 60px;
align-items: center;
font-size: 1.1rem;
}
ul.buttonBlock li p:before, ul.buttonBlock li p:after {
display: inline-block;
position: absolute;
top: 48%;
width: 45px;
height: 2px;
border-radius: 3px;
background-color: #000;
content: "";
}
ul.buttonBlock li p:before {
left: -40px;
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
ul.buttonBlock li p:after {
right: -40px;
-webkit-transform: rotate(-50deg);
transform: rotate(-50deg);
}
.about__wave {
position: relative;
transform: translateY(2px);
width: 100%;
}
.about__wave img {
width: 100%;
}
/* service */
section#service {
display: block;
position: relative;
}
.service__inner {
width: 100%;
max-width: 1250px;
padding: 60px 0 80px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 50px;
position: relative;
}
.service__inner--top {
display: flex;
flex-direction: column;
gap: 40px;
align-items: center;
position: relative;
text-align: center;
}
.service__inner--top h2 {
color: var(--main-secondaryBlue);
font-weight: 500;
position: relative;
letter-spacing: 1.5px;
font-size: 1.8rem;
padding: 12px 35px 16px;
border: solid 1px var(--main-secondaryBlue);
border-radius: 4px;
background: rgba(192, 232, 255, 0.25);
width: fit-content;
}
.service__inner--top p {
line-height: 2.4;
}
ul.service__inner--middle {
display: flex;
flex-direction: column;
gap: 100px;
width: 100%;
position: relative;
}
ul.service__inner--middle:before {
content: "";
width: 700px;
height: 90%;
background: #EFF9FF;
position: absolute;
left: 50%;
top: 140px;
transform: translateX(-50%);
}
ul.service__inner--middle li {
display: flex;
justify-content: flex-end;
align-items: center;
position: relative;
width: 100%;
height: 380px;
}
ul.service__inner--middle li.reverse {
justify-content: flex-start;
}
.service__inner--middleImg {
position: absolute;
top: 50%;
width: 600px;
border: solid 1px #ddd;
border-radius: 5px;
overflow: hidden;
background: #f9f9f9;
transform: translateY(-50%);
left: 0;
display: flex;
justify-content: center;
}
li.reverse .service__inner--middleImg {
left: auto;
right: 0;
}
.service__inner--middleText {
width: 100%;
background: #fff;
position: relative;
max-width: 720px;
border-radius: 4px;
box-shadow: 5px 5px 22px 0px rgba(51, 71, 153, 0.12);
padding: 45px 55px;
display: flex;
flex-direction: column;
gap: 15px;
}
.service__inner--middleTextIcon {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 18px;
}
.service__inner--middleTextIcon h3 {
color: var(--main-secondaryBlue);
font-size: 1.8rem;
font-weight: 500;
letter-spacing: 1.5px;
}
.service__inner--bottom p {
font-weight: 600;
position: relative;
letter-spacing: 1.5px;
font-size: 2.2rem;
color: #000;
text-align: center;
}
.service__inner--bottom p span {
color: var(--primary-base);
}
/* hojo */
section#hojo {
background: #000;
}
.hojo__inner {
display: flex;
flex-direction: row;
padding: 35px 0;
justify-content: space-between;
width: 100%;
max-width: 1100px;
margin: 0 auto;
align-items: center;
}
.hojo__inner-left {
display: flex;
flex-direction: column;
gap: 15px;
}
.hojo__inner-left h2 {
font-size: 2.2rem;
line-height: 1.63;
font-weight: 500;
color: #fff;
}
p.hojo__inner-rightDesc {
color: #fff;
font-size: 1rem;
letter-spacing: 1.23px;
line-height: 2.23;
}
p.hojo__inner-rightSub {
color: #707070;
font-size: 1rem;
letter-spacing: 1.23px;
line-height: 2.23;
}
/* aboutcta */
section#aboutCta {
background: var(--primary-base);
position: relative;
overflow: hidden;
}
section#aboutCta:before {
content: "";
width: 90%;
height: 85%;
background: url(../img/map_white.svg) no-repeat;
position: absolute;
top: 100px;
left: 50%;
transform: translateX(-50%);
background-size: cover;
opacity: 0.6;
}
section#aboutCta .about__inner {
padding-top: 90px;
}
.about__inner--bottom {
display: flex;
flex-direction: column;
gap: 35px;
}
p.textStrong {
color: #ffff00;
font-weight: 500;
position: relative;
letter-spacing: 1.5px;
font-size: 2.1rem;
text-align: center;
}
/* FAQ */
section#faq {
padding: 110px 0 80px;
background: #EFF9FF;
}
.faq__inner {
width: 100%;
max-width: 820px;
margin: 0 auto;
}
.faq__inner dl {
display: flex;
flex-direction: column;
gap: 25px;
}
.faq__inner--acc {
background: #fff;
box-shadow: 0 0 1px 0 rgb(0 0 0 / 8%), 0 1px 6px 0 rgb(0 0 0 / 11%);
border-radius: 3px;
transition: 0.2s ease-in;
}
.faq__inner--acc:hover {
background: #fcfcfc;
}
.accordion {
display: block;
border: none;
cursor: pointer;
font-size: 1rem;
transition: 0.5s ease-in;
position: relative;
padding: 20px 0 24px 64px;
margin: 0;
}
.accordion:before {
content: "Q";
position: absolute;
left: 15px;
top: 50%;
display: inline-block;
width: 35px;
height: 35px;
line-height: 35px;
vertical-align: middle;
text-align: center;
font-family: Arial, sans-serif;
font-size: 21px;
background: #313131;
color: #fff;
border-radius: 50%;
transform: translateY(-50%);
}
.accordion.active {
margin-bottom: 0;
}
.panel{
max-height:0;
overflow:hidden;
transition: 0.3s ease-out;
}
.panel p {
padding: 15px 20px 10px;
margin: 0 0 15px;
position: relative;
padding-left: 64px;
color: #707070;
font-weight: 300;
line-height: 2;
}
.panel p:before {
content: "A";
position: absolute;
left: 15px;
display: inline-block;
width: 35px;
height: 35px;
line-height: 35px;
vertical-align: middle;
text-align: center;
font-size: 21px;
background: #f8951d;
color: #fff;
border-radius: 50%;
font-weight: 500;
}
.acco{
position:relative;
}
.accordion:after {
font-size: 1.6rem;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
border-radius: 9999px;
padding: 0 4px;
color: #ccc;
content: "\E147";
font-family: 'Material Icons';
font-weight: 900;
}
.accordion.active:after {
content: "\E15c";
font-family: 'Material Icons';
color: #f8951d;
}
.case__innerHeading {
text-align: center;
margin-bottom: 40px;
}
h2.case__inner--text {
font-weight: 500;
position: relative;
letter-spacing: 1.5px;
font-size: 1.8rem;
}
/* footer CTA */
section#footerCta {
background: var(--main-secondaryBlue);
position: relative;
}
section#footerCta:before {
content: "";
width: 90%;
height: 100%;
background: url(../img/map_white.svg) no-repeat;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-size: cover;
opacity: 0.6;
}
.footerCta__inner {
padding: 60px 0 70px;
}
.footerCta__inner p {
color: #fff;
}
.footerCta__inner ul.buttonBlock li p:before, .footerCta__inner ul.buttonBlock li p:after {
background: #fff;
}
/* footer */
footer#footer {
background: #000;
}
.footer__inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
padding: 40px 0;
}
.footer__innerleft {
color: #FFF;
}
p.footer__innerleft--copy {
margin-bottom: 10px;
font-size: 0.9rem;
}
.footer__innerleft img {
margin-bottom: 8px;
}
p.footer__innerleft--corpname {
font-size: 0.75rem;
font-weight: 300;
}
.footer__innerright {
color: #FFF;
}
.footer__innerright nav {
display: block;
margin-bottom: 25px;
}
ul.footer__innerright--navi {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 40px;
font-size: 0.9rem;
}
ul.footer__innerright--navi li, ul.footer__innerright--navi li a {
position: relative;
}
ul.footer__innerright--navi li a:after {
content: "";
width: 0;
height: 1px;
background: #fff;
position: absolute;
bottom: -5px;
left: 0;
transition: 0.3s ease-in-out;
}
ul.footer__innerright--navi li a:hover {
opacity: 0.8;
}
ul.footer__innerright--navi li a:hover:after {
width: 100%;
}
ul.footer__innerright--navi li:after {
content: "";
width: 1px;
height: 100%;
position: absolute;
right: -20px;
top: 0;
background: #ccc;
transform: rotate(18deg);
}
ul.footer__innerright--navi li:last-child:after {
content: none;
}
.footer__innerright--btn {
display: flex;
justify-content: flex-end;
gap: 20px;
}
p.footer__innerbottom--copyright {
text-align: center;
color: #FFF;
font-size: 0.8rem;
letter-spacing: 0.05rem;
border-top: solid 1px #707070;
padding: 6px 0 10px;
}
/* sticky */
section#footersticky {
display: none;
}
@media screen and (max-width: 1250px) {
/* （ここに1250スタイルを記述） */
.mv__inner {
padding-left: 4%;
padding-right: 4%;
}
.mvunder__inner {
padding-left: 4%;
padding-right: 4%;
}
.nayami__inner {
padding-left: 4%;
padding-right: 4%;
}
.about__inner {
padding-left: 4%;
padding-right: 4%;
}
.service__inner {
padding-left: 4%;
padding-right: 4%;
}
.footer__inner {
padding-left: 4%;
padding-right: 4%;
}
}
@media screen and (max-width: 1100px) {
/* （ここに1100スタイルを記述） */
.service__inner--middleText {
max-width: 570px;
padding: 25px 35px;
}
.hojo__inner {
padding-left: 4%;
padding-right: 4%;
}
}
@media screen and (max-width: 1000px) {
/* （ここに1000スタイルを記述） */
.merit__inner {
padding-left: 4%;
padding-right: 4%;
}
.hojo__inner {
gap: 30px;
flex-direction: column-reverse;
}
}
@media screen and (max-width: 900px) {
/* （ここに900スタイルを記述） */
ul.merit__inner--list {
max-width: 900px;
justify-content: center;
gap: 30px;
}
ul.merit__inner--list li {
width: calc(100% / 2 - 30px);
}
}
@media screen and (max-width: 767px) {
/* （ここにモバイル用スタイルを記述） */
/* header */
.header__inner {
justify-content: center;
padding: 8px 0;
}
.header__inner--right {
display: none;
}
/* mv */
section#mv {
height: fit-content;
}
section#mv:before {
width: 100%;
}
section#mv .mv__inner:after {
width: 100%;
height: 500px;
top: 20px;
left: 50%;
transform: translateX(-50%);
}
.mv__inner {
height: 100%;
padding-top: 40px;
padding-bottom: 60px;
}
ul.mv__inner--count {
flex-direction: column;
align-items: center;
gap: 30px;
}
.mv__inner--left h1 {
font-size: 2.9rem;
text-align: center;
}
.mv__inner--left h1 span {
font-size: 1.35rem;
}
ul.mv__inner--count li img {
width: 100%;
height: 60px;
}
ul.mv__inner--count li:before, ul.mv__inner--count li:after {
width: 53px;
height: 115px;
}
/* mvunder */
.mvunder__inner--top h2 {
text-align: center;
}
.mvunder__inner--middle {
width: 90%;
}
.mvunder__inner--middle ul {
padding: 20px 25px;
flex-wrap: wrap;
gap: 30px 0px;
align-items: center;
}
.mvunder__inner--middle ul li {
width: calc(100% / 2 - 30px);
align-items: center;
}
/* nayami */
ul.nayami__inner--list {
flex-direction: column;
width: 95%;
}
ul.nayami__inner--list li {
width: 100%;
border: none;
border-bottom: solid 1px #eee;
}
ul.nayami__inner--list li:last-child {
border: none;
}
ul.nayami__inner--list li img {
width: auto;
}
/* merit */
p.merit__inner--desc {
text-align: left;
}
p.merit__inner--desc br {
display: none;
}
ul.merit__inner--list li {
width: 100%;
}
/* resolution */
.resolution__inner {
padding-left: 4%;
padding-right: 4%;
padding-top: 80px;
}
.resolution__heading {
width: 100%;
margin-bottom: 55px;
}
p.resolution__heading--title {
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
background: #e4f7ff;
}
.resolution__heading h2 {
padding: 0 8%;
}
.resolution__heading h2 span {
transform: none;
margin-top: 10px;
}
p.resolution__heading--bottom {
white-space: break-spaces;
background: transparent;
position: relative;
text-align: left;
}
p.resolution__heading--bottom br {
display: none;
}
ul.resolution__step {
gap: 25px;
}
ul.resolution__step li {
width: calc(100% - 4%);
margin: 0 auto;
}
ul.resolution__step li:before {
content: "";
position: absolute;
bottom: -34px;
left: 50%;
margin-left: -18px;
border: 18px solid transparent;
border-top: 18px solid #ffffff;
top: auto;
}
p.resolution__bottom--Text {
text-align: left;
font-size: 1.3rem;
line-height: 1.6;
}
p.resolution__bottom--Text br {
display: none;
}
/* button */
ul.buttonBlock {
flex-direction: column;
gap: 45px;
}
/* service */
.service__inner--top p {
text-align: left;
}
.service__inner--top p br {
display: none;
}
ul.service__inner--middle {
gap: 45px;
}
ul.service__inner--middle li {
flex-direction: column-reverse;
height: auto;
gap: 0;
background: #fff;
box-shadow: 5px 5px 22px 0px rgba(51, 71, 153, 0.12);
width: 95%;
margin: 0 auto;
}
.service__inner--middleImg {
width: 100%;
position: relative;
height: 300px;
top: 0;
transform: none;
}
.service__inner--middleImg {
height: auto;
}
.service__inner--middleText {
background: none;
position: relative;
box-shadow: none;
}
li.reverse .service__inner--middleImg {
border: none;
}
.service__inner--middleTextIcon {
flex-direction: column;
text-align: center;
}
ul.service__inner--middle:before {
width: 100%;
}
.service__inner--bottom p {
text-align: left;
}
.service__inner--bottom p br {
display: none;
}
/* hojo */
p.hojo__inner-rightDesc br {
display: none;
}
/* faq */
.faq__inner {
padding-left: 4%;
padding-right: 4%;
}
.accordion {
padding-right: 45px;
}
/* footer */
.footer__inner {
padding-left: 4%;
padding-right: 4%;
gap: 40px;
padding-bottom: 25px;
}
.footer__innerleft {
order: 2;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin-bottom: 20px;
}
ul.footer__innerright--navi {
flex-direction: row;
gap: 10px 40px;
flex-wrap: wrap;
justify-content: center;
}
ul.footer__innerright--navi li:after {
background: #707070;
}
ul.footer__innerright--navi li:nth-child(3):after, ul.footer__innerright--navi li:nth-child(5):after, ul.footer__innerright--navi li:last-child:after {
content: none;
}
.footer__innerright--btn {
flex-wrap: wrap;
justify-content: center;
flex-direction: column;
}
.footer__innerright--btn a {
text-align: center;
padding-top: 9px;
padding-bottom: 11px;
}
p.footer__innerbottom--copyright {
padding: 12px 0 17px;
}
/* sticky */
section#footersticky {
display: block;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 100;
transition: 0.3s ease-in-out;
opacity: 0;
pointer-events: none;
z-index: 101;
}
section#footersticky.resize {
opacity: 1;
pointer-events: auto;
}
.footersticky__inner {
display: flex;
justify-content: center;
padding: 6px 0 4px;
background: rgb(0, 0, 0, 0.4);
}
}