@charset "UTF-8";
*,
::before,
::after {
box-sizing: border-box;
border-style: solid;
border-width: 0;
}   html {
line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }   body {
margin: 0;
} main {
display: block;
}  p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
margin: 0;
}  h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
margin: 0;
}  ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}  dt {
font-weight: bold;
}
dd {
margin-left: 0;
}   hr {
box-sizing: content-box; height: 0; overflow: visible; border-top-width: 1px;
margin: 0;
clear: both;
color: inherit;
} pre {
font-family: monospace, monospace; font-size: inherit; }
address {
font-style: inherit;
}   a {
background-color: transparent;
text-decoration: none;
color: inherit;
} abbr[title] {
text-decoration: underline dotted; } b,
strong {
font-weight: bolder;
} code,
kbd,
samp {
font-family: monospace, monospace; font-size: inherit; } small {
font-size: 80%;
} sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}   svg,
img,
embed,
object,
iframe {
vertical-align: bottom;
}   button, optgroup,
select,
textarea {
-webkit-appearance: none; appearance: none;
vertical-align: middle;
color: inherit;
font: inherit;
background: transparent;
padding: 0;
margin: 0;
border-radius: 0;
text-align: inherit;
text-transform: inherit; } button,
[type="button"],
[type="reset"],
[type="submit"] {
cursor: pointer;
}
button:disabled,
[type="button"]:disabled,
[type="reset"]:disabled,
[type="submit"]:disabled {
cursor: default;
} :-moz-focusring {
outline: auto;
}
select:disabled {
opacity: inherit;
} option {
padding: 0;
} fieldset {
margin: 0;
padding: 0;
min-width: 0;
}
legend {
padding: 0;
} progress {
vertical-align: baseline;
} textarea {
overflow: auto;
} [type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
} [type="search"] {
outline-offset: -2px; } [type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
} ::-webkit-file-upload-button {
-webkit-appearance: button; font: inherit; } [type="number"] {
-moz-appearance: textfield;
} label[for] {
cursor: pointer;
}   details {
display: block;
} summary {
display: list-item;
} [contenteditable]:focus {
outline: auto;
}   table {
border-color: inherit; border-collapse: collapse;
}
caption {
text-align: left;
}
td,
th {
vertical-align: top;
padding: 0;
}
th {
text-align: left;
font-weight: bold;
}

@font-face {
font-family: Arimo;
font-style: normal;
font-display: swap;
src: url(//re-syst.jp/wp-content/themes/resysty/webfonts/Arimo/Arimo-VariableFont_wght.woff) format("woff"),
url(//re-syst.jp/wp-content/themes/resysty/webfonts/Arimo/Arimo-VariableFont_wght.woff2) format("woff2");
}
@font-face {
font-family: Arimo;
font-style: italic;
font-display: swap;
src: url(//re-syst.jp/wp-content/themes/resysty/webfonts/Arimo/Arimo-Italic-VariableFont_wght.woff) format("woff"),
url(//re-syst.jp/wp-content/themes/resysty/webfonts/Arimo/Arimo-Italic-VariableFont_wght.woff2) format("woff2");
}
@font-face {
font-family: "Noto Serif JP";
font-weight: 900;
font-display: swap;
src: url(//re-syst.jp/wp-content/themes/resysty/webfonts/Noto_Serif_JP/NotoSerifJP-Black.woff) format("woff"),
url(//re-syst.jp/wp-content/themes/resysty/webfonts/Noto_Serif_JP/NotoSerifJP-Black.woff2) format("woff2");
}
@font-face {
font-family: "Noto Serif JP";
font-weight: 700;
font-display: swap;
src: url(//re-syst.jp/wp-content/themes/resysty/webfonts/Noto_Serif_JP/NotoSerifJP-Bold.woff) format("woff"),
url(//re-syst.jp/wp-content/themes/resysty/webfonts/Noto_Serif_JP/NotoSerifJP-Bold.woff2) format("woff2");
}
@font-face {
font-family: "Noto Serif JP";
font-weight: 600;
font-display: swap;
src: url(//re-syst.jp/wp-content/themes/resysty/webfonts/Noto_Serif_JP/NotoSerifJP-SemiBold.woff) format("woff"),
url(//re-syst.jp/wp-content/themes/resysty/webfonts/Noto_Serif_JP/NotoSerifJP-SemiBold.woff2) format("woff2");
}
@font-face {
font-family: "Noto Serif JP";
font-weight: 500;
font-display: swap;
src: url(//re-syst.jp/wp-content/themes/resysty/webfonts/Noto_Serif_JP/NotoSerifJP-Medium.woff) format("woff"),
url(//re-syst.jp/wp-content/themes/resysty/webfonts/Noto_Serif_JP/NotoSerifJP-Medium.woff2) format("woff2");
}
@font-face {
font-family: "Noto Serif JP";
font-weight: 400;
font-display: swap;
src: url(//re-syst.jp/wp-content/themes/resysty/webfonts/Noto_Serif_JP/NotoSerifJP-Regular.woff) format("woff"),
url(//re-syst.jp/wp-content/themes/resysty/webfonts/Noto_Serif_JP/NotoSerifJP-Regular.woff2) format("woff2");
}
@font-face {
font-family: "Noto Sans JP";
font-display: swap;
src: url(//re-syst.jp/wp-content/themes/resysty/webfonts/Noto_Sans_JP/NotoSansJP-VariableFont_wght.woff)
format("woff"),
url(//re-syst.jp/wp-content/themes/resysty/webfonts/Noto_Sans_JP/NotoSansJP-VariableFont_wght.woff2)
format("woff2");
}
@font-face {
font-family: Roboto;
font-display: swap;
src: url(//re-syst.jp/wp-content/themes/resysty/webfonts/Roboto/Roboto-Thin.ttf) format("ttf");
}
@font-face {
font-family: Roboto;
font-display: swap;
src: url(//re-syst.jp/wp-content/themes/resysty/webfonts/Roboto/Roboto-Light.ttf) format("ttf");
}
@font-face {
font-family: Roboto;
font-display: swap;
src: url(//re-syst.jp/wp-content/themes/resysty/webfonts/Roboto/Roboto-Regular.ttf) format("ttf");
}
@font-face {
font-family: Roboto;
font-display: swap;
src: url(//re-syst.jp/wp-content/themes/resysty/webfonts/Roboto/Roboto-Medium.ttf) format("ttf");
}
@font-face {
font-family: Roboto;
font-display: swap;
src: url(//re-syst.jp/wp-content/themes/resysty/webfonts/Roboto/Roboto-Bold.ttf) format("ttf");
}
@font-face {
font-family: Roboto;
font-display: swap;
src: url(//re-syst.jp/wp-content/themes/resysty/webfonts/Roboto/Roboto-Black.ttf) format("ttf");
}
:root {
--main-color: #0d6cb7;
--base-black-color: #262626;
--bg-gray-color: #f6f9f8;
--accent-color: #f69133;
--font-weight500: 500;
--font-weight600: 600;
--font-weight700: 700;
--font-weight800: 800;
}
html {
font-size: 100%;
scroll-behavior: smooth;
}
@media not all and (resolution >= 0.001dpcm) { html {
-webkit-font-smoothing: antialiased !important; text-size-adjust: 100%;
}
:root {
--font-weight500: 400;
--font-weight600: 500;
--font-weight700: 500;
--font-weight800: 700;
}
@media screen and (width <= 992px) {
:root {
--font-weight500: 500;
--font-weight600: 600;
--font-weight700: 700;
--font-weight800: 800;
}
}
}
_::-webkit-full-page-media, _:future, :root {
--font-weight500: 400;
--font-weight600: 500;
--font-weight700: 500;
--font-weight800: 700;
}
@media screen and (width <= 992px) {
_::-webkit-full-page-media, _:future, :root {
--font-weight500: 500;
--font-weight600: 600;
--font-weight700: 700;
--font-weight800: 800;
}
} _::-webkit-full-page-media, _:future, :root strong {
font-weight: 500;
}
@media screen and (width <= 992px) { _::-webkit-full-page-media, _:future, :root strong {
font-weight: 600;
}
}
body {
background-color: white;
color: var(--base-black-color);
font-family: "Noto Serif JP", serif;
font-weight: 300;
}
body.--en {
background-color: white;
color: var(--base-black-color);
font-family: Roboto, sans-serif;
font-weight: 500;
}
img {
max-height: 100%;
max-width: 100%;
height: auto;
}
a {
max-height: 100%;
max-width: 100%;
}
a:hover {
opacity: 0.65;
}
.sp-show {
display: none;
}
@media screen and (width <= 992px) {
.pc-show {
display: none;
}
}
.text-link {
color: #00e;
text-decoration: underline;
}
body.no-scroll {
overflow: hidden;
height: 100vh;
}
.cv-hidden {
display: none !important;
} #normal-header {
align-items: center;
display: flex;
font-size: 16px;
justify-content: space-between;
padding: 2.9vw 5vw 1.74vw;
position: relative;
min-height: 140px;
}
#normal-header .lang-button-container {
position: absolute;
right: 5vw;
top: 0;
padding: 5px 10px;
background-color: #D6ECFF; }
#normal-header.--en {
font-family: Roboto, sans-serif;
font-weight: 400;
}
#normal-header h1 {
height: auto;
width: 250px;
font-weight: 500;
font-size: 17px;
letter-spacing: 0.02em;
display: flex;
}
#normal-header h1 > a {
display: flex;
flex-direction: column;
width: 100%;
gap: 7px;
align-items: start;
justify-content: center;
}
#normal-header .header_logo--pc {
height: 45px;
width: 100%;
background-image: url(//re-syst.jp/wp-content/themes/resysty/images/header_logo.webp);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: block;
z-index: 3;
}
#normal-header nav {
align-items: center;
display: flex;
font-size: 1.04vw;
gap: 2.29vw;
}
#normal-header nav > ul {
display: flex;
gap: 2.29vw;
}
#normal-header nav > .contact-button {
align-items: center;
background-color: white;
border-color: var(--main-color);
border-radius: 3.26vw;
border-width: 2px;
color: var(--base-black-color);
display: flex;
height: 3.26vw;
justify-content: center;
margin: auto;
padding-left: 1.88vw;
position: relative;
transition-duration: 0.5s;
transition-property: color, background-color;
width: 17.15vw;
}
#normal-header nav > .contact-button:hover {
background-color: #0d6cb7;
color: white;
opacity: 0.65;
transition-duration: 0.5s;
transition-property: color, background-color;
}
#normal-header nav > .contact-button > p {
margin: auto;
text-align: center;
}
#normal-header nav > .contact-button:hover > span::before {
background-color: white;
transition-duration: 0.5s;
transition-property: background-color;
}
#normal-header nav > .contact-button:hover > span::after {
border-color: white;
transition-duration: 0.5s;
transition-property: border-color;
}
#normal-header nav > .hamburger-button {
display: none;
}
#normal-header .hamburger-menu {
display: none;
}
#normal-header .lang-button-container > ul {
display: flex;
flex-direction: row;
gap: 15px;
}
#normal-header .lang-button-container > ul > li { padding: 3px 5px;
font-size: 14px;
} footer {
background-color: var(--main-color);
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 3.68vw 12.71vw 3.06vw;
}
footer.--en {
font-family: Roboto, sans-serif;
font-weight: 400;
}
footer > nav {
align-items: center;
display: flex;
justify-content: space-between;
}
footer > nav > a > img {
height: 3.31vw;
width: 19.24vw;
}
footer > nav > ul {
display: flex;
font-size: 1.11vw;
gap: 2.64vw;
}
footer > .badge_container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 30px;
margin-top: 2.16vw;
width: 100%;
}
footer > .badge_container > img {
width: 130px;
height: 142px;
}
footer > .badge_container > .kyoryoku-button {
display: flex;
flex-direction: column;
gap: 0;
align-items: center;
background-color: var(--main-color);
color: #fff;
border: #fff 0.35vw double;
padding: 0.8vw 1vw;
font-family: "Noto Sans JP", serif;
font-weight: 400;
box-shadow: 4px 4px 4px rgb(0 0 0 / 25%);
height: min-content;
letter-spacing: 0.1em;
}
footer > .badge_container > .kyoryoku-button > h3 {
font-size: 1.21vw;
line-height: 1.21vw;
margin-bottom: 1vw;
}
footer > .badge_container > .kyoryoku-button .description_container {
display: flex;
gap: 0.4vw;
}
footer > .badge_container > .kyoryoku-button p {
font-size: 1vw;
line-height: 1.3vw;
}
footer > .badge_container > .kyoryoku-button > small {
width: 100%;
text-align: right;
margin-top: 15px;
font-size: 0.9vw;
}
footer > .footer__permission {
display: flex;
gap: 19.79vw;
margin-top: 2.16vw;
}
footer > .footer__permission > p {
font-size: 1.18vw;
line-height: 2.36vw;
}
.footer__info {
align-items: end;
display: flex;
font-size: 1.18vw;
justify-content: space-between;
margin-top: 4.17vw;
}
.footer__info__location {
display: flex;
gap: 2.85vw;
}
.footer__info__location > div {
display: flex;
flex-direction: column;
gap: 1.18vw;
line-height: 1.7vw;
}
footer > p {
font-size: 1.04vw;
margin-top: 6.32vw;
text-align: center;
} .fade-in {
opacity: 0;
transform: translate(0, 80px);
transition: all 800ms;
}
.fade-in.scroll-in {
opacity: 1;
transform: translate(0, 0);
} .animation-button {
position: relative;
animation: btn-animation 1.5s infinite;
box-shadow: 1px 5px 5px rgb(0 0 0 / 20%);
}
@keyframes btn-animation {
0% {
transform: translate(1.8px, 0);
}
5% {
transform: translate(-1.8px, 0);
}
10% {
transform: translate(1.8px, 0);
}
15% {
transform: translate(-1.8px, 0);
}
20% {
transform: translate(1.8px, 0);
}
25% {
transform: translate(-1.8px, 0);
}
30% {
transform: translate(0, 0);
} } .arrow {
background: url(//re-syst.jp/wp-content/themes/resysty/images/arrow.svg) no-repeat;
background-size: contain;
height: 0.9vw;
margin-right: 0.85vw;
width: 1.25vw;
}
a:hover > .arrow {
background: url(//re-syst.jp/wp-content/themes/resysty/images/arrow-white.svg) no-repeat;
background-size: contain;
height: 0.9vw;
margin-right: 0.85vw;
transition-duration: 0.5s;
width: 1.25vw;
}
.overlay {
height: 100%;
position: relative;
width: 100%;
}
.overlay::before {
background-color: rgb(0 103 174 / 43%);
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.overlay > img {
height: 100%;
width: 100%;
}
.underline-text {
text-decoration-line: underline;
} .fixed-page-main-visual {
height: 13.61vw;
position: relative;
width: 100%;
}
.fixed-page-main-visual__image-container {
height: 100%;
width: 100%;
}
.fixed-page-main-visual__image-container img {
height: 100%;
object-fit: cover;
width: 100%;
}
.fixed-page-main-visual__title {
color: white;
display: flex;
flex-direction: column;
font-size: 1.18vw;
font-weight: 600;
gap: 0.83vw;
left: 5vw;
position: absolute;
top: 4.72vw;
}
body.--en .fixed-page-main-visual__title {
top: 50%;
transform: translate(0,-50%);
}
.fixed-page-main-visual__title__text {
letter-spacing: 0.67em;
}
body.--en .fixed-page-main-visual__title__text {
letter-spacing: 0.15em;
}
.contact-form-main-visual {
height: 26.81vw;
width: 100%;
}
.contact-form-main-visual > img {
height: 100%;
width: 100%;
}
.contact-main--mb {
display: none;
} .contact-webform {
align-items: center;
display: flex;
flex-direction: column;
gap: 4.17vw;
padding-bottom: 14.44vw;
padding-left: 20.28vw;
padding-right: 20.28vw;
}
.contact-webform-container {
display: flex;
flex-direction: column;
gap: 2.22vw;
}
.contact-webform-container > p {
font-size: 1.39vw;
line-height: 2vw;
} form {
align-items: center;
background-color: #ecedef;
display: flex;
flex-direction: column;
gap: 20px;
padding: 3.4vw 2.15vw 3.97vw;
width: 100%;
}
.form-item {
display: flex;
flex-direction: column;
font-size: 18px;
width: 100%;
}
.wpcf7 textarea {
background-color: white;
border: 2px solid #adb5c0;
border-radius: 6px;
color: var(--base-black-color);
min-height: 120px;
height: 160px;
padding: 13px 12px;
width: 100%;
}
.form-item__title {
display: flex;
}
.wpcf7 em {
font-style: normal; 
background-color: white;
font-size: 14px;
color: black;
padding: 1.5px 6px 2px;
margin-right: 10px;
margin-top: auto;
margin-bottom: auto;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
background-color: white;
border: 2px solid #adb5c0;
border-radius: 6px;
color: var(--base-black-color);
padding-left: 12px;
padding-top: 13px;
padding-bottom: 11px;
width: 100%;
font-size: 18px;
}
.wpcf7 .form-item > p {
display: flex;
flex-direction: column;
gap: 10px;
}
.wpcf7 label {
color: var(--base-black-color);
}
.wpcf7 .submit {
align-items: center;
background: linear-gradient(90deg, #005BAC, #319FCD);
text-align: center;
border-radius: 10px;
color: white;
display: flex;
font-size: 30px;
justify-content: center;
margin-top: 30px;
width: 13.26vw;
box-shadow: 2px 2px 8px 0 #8a8a8a;
padding-top: 15px;
padding-bottom: 15px;
} .news {
display: flex;
flex-direction: column;
gap: 3.26vw;
padding: 6.81vw 12.57vw;
}
.news ul {
display: flex;
flex-direction: column;
gap: 0.97vw;
}
.news ul li {
border-bottom: 1px solid #aaa;
padding-bottom: 0.97vw;
}
.news .news-info {
align-items: center;
display: flex;
gap: 0.97vw;
}
.news ul li a {
align-items: center;
display: flex;
font-size: 1.53vw;
gap: 1.46vw;
justify-content: start;
}
.news-tag {
border-color: #f69133;
border-radius: 5vw;
border-width: 1px;
color: var(--accent-color);
padding: 0.97vw 1.74vw;
}
.news-date {
text-align: center;
}   #top main {
margin-top: 3.08vw;
}
#top .section-title {
display: flex;
flex-direction: column;
gap: 1.04vw;
}
#top .section-title > h2 {
font-size: 3.58vw;
}
#top.--en .section-title > h2 {
font-size: 2vw;
font-weight: 700;
}
#top .section-title > p {
font-size: 1.18vw;
}
#top .composition {
display: flex;
flex-direction: column;
gap: 4.39vw;
}
#top .composition > h3 {
font-size: 4.1vw;
font-weight: 700;
letter-spacing: 0.165em;
line-height: 160%;
}
#top.--en .composition > h3 {
font-size: 3vw;
letter-spacing: 0;
}
#top .text {
display: flex;
flex-direction: column;
gap: 1.88vw;
max-width: 36.53vw;
}
#top .text > p {
font-size: 1.39vw;
font-weight: 400;
letter-spacing: 0.09em;
line-height: 2.36vw;
}
#top .view-more {
align-items: center;
border-color: var(--main-color);
border-radius: 3.06vw;
border-width: 2px;
display: flex;
height: 4.72vw;
justify-content: space-between;
padding-left: 7.6vw;
padding-right: 0.7vw;
transition-duration: 0.5s;
transition-property: background-color;
width: 23.19vw;
}
#top .view-more:hover {
background-color: #0d6cb7;
opacity: 0.65;
transition-duration: 0.5s;
transition-property: background-color;
}
#top .view-more > p {
color: var(--main-color);
font-family: Arimo, sans-serif;
font-size: 1.39vw;
transition-duration: 0.5s;
transition-property: color;
}
#top .view-more:hover > p {
color: white;
transition-duration: 0.5s;
transition-property: color;
}
#top .composition > h2 {
font-size: 4.1vw;
letter-spacing: 0.165em;
line-height: 160%;
}
#top.--en .composition > h2 {
font-size: 3vw;
letter-spacing: 0;
}
#top .composition > .text {
display: flex;
flex-direction: column;
font-size: 1.39vw;
font-weight: 600;
gap: 1.39vw;
letter-spacing: 0.09em;
line-height: 2.36vw;
size: 1.39vw;
} #top .main-visual {
display: flex;
flex-direction: row-reverse;
position: relative;
z-index: 1;
}
#top .main-visual__contents {
display: flex;
flex-flow: column;
gap: 3.94vw;
padding-bottom: 24.5vw;
width: 79.72vw;
}
#top .main-title {
display: flex;
gap: 3.75vw;
justify-content: start;
}
#top .main-title__text {
font-size: 4.41vw;
letter-spacing: 0.67em;
line-height: 5.21vw;
}
#top.--en .main-title__text {
font-size: 4.41vw;
letter-spacing: 0.1em;
line-height: 5.21vw;
font-weight: 700;
}
#top .main-title-sub__text {
font-family: Arimo, sans-serif;
font-size: 2vw;
font-weight: 700;
line-height: 2.5vw;
margin-top: 0.42vw;
}
.video-container {
height: 43.7vw;
position: absolute;
top: 20.5vw;
width: 79.72vw;
}
.main-visual__video {
height: 100%;
object-fit: cover;
width: 100%;
}
#top .scroll {
display: flex;
flex-direction: column;
justify-content: center;
padding-top: 21.14vw;
position: relative;
width: 20.28vw;
}
#top .scroll div {
align-items: center;
display: flex;
font-family: Arimo, sans-serif;
font-size: 0.91vw;
font-weight: 400;
gap: 0.8vw;
transform: rotateZ(90deg);
}
#top .scroll > div > span {
height: 2px;
position: relative;
width: 15.15vw;
}
@keyframes animation-scroll {
0% {
width: 0;
}
60% {
left: 0;
width: 100%;
}
100% {
bottom: 0;
left: 15.15vw;
width: 0;
}
}
#top .scroll > div > span::after {
animation-duration: 2.5s;
animation-iteration-count: infinite;
animation-name: animation-scroll;
animation-timing-function: linear;
background-color: var(--base-black-color);
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 0;
} #top .about {
background-color: var(--bg-gray-color);
padding-bottom: 13vw;
padding-top: 28vw;
position: relative;
}
#top.--en .about {
padding-top: 22vw;
}
#top .recommend-container {
background-color: #ecedef;
display: flex;
flex-direction: column;
gap: 1.5vw;
margin-left: 20.28vw;
padding-bottom: 3vw;
padding-left: 1vw;
padding-top: 3vw;
}
#top .recommend-container > h2 {
color: #7e7f81;
font-family: Arimo, sans-serif;
font-size: 1.39vw;
font-weight: 700;
}
#top .recommend {
display: flex;
flex-wrap: wrap;
gap: 1.67vw;
}
#top .recommend > a {
box-shadow: 4px 5px 6px 0 #00000052;
height: 12.1vw;
width: 21.25vw;
}
#top .recommend > a > img {
height: 100%;
width: 100%;
}
#top .recommend > a:hover {
opacity: 0.65;
}
#top .about > .composition {
margin-left: 8.54vw;
margin-top: 8.08vw;
width: 38.43vw;
}
#top .about > .composition > h2 {
font-weight: 700;
}
#top .about > img {
height: 44.31vw;
position: absolute;
right: 0;
top: 79.5vw;
width: 49.03vw;
z-index: 0;
}
#top.--en .about > img {
top: 64.5vw;
} #top .service {
padding: 25vw 6.88vw 47.5vw 5.97vw;
position: relative;
}
#top.--en .service {
padding-top: 18vw;
}
#top .service > .media {
display: flex;
justify-content: space-between;
}
#top .service > .media > img {
height: 35.42vw;
margin-top: 6vw;
width: 38.47vw;
}
#top .service-image1 {
height: 32.92vw;
left: 0;
position: absolute;
top: 85vw;
width: 49.72vw;
}
#top .service-image2 {
height: 46.25vw;
position: absolute;
right: 0;
top: 97vw;
width: 43.33vw;
} #top .company {
background-color: var(--bg-gray-color);
padding: 15vw 5vw 6.78vw 8.47vw;
}
#top .media-reverse {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
}
#top .media-reverse > img {
height: 31.4583vw;
margin-top: 18vw;
width: 44.1vw;
}
#top.--en .media-reverse > img {
margin-top: 23vw;
} #top .sdgs {
background-color: var(--bg-gray-color);
padding: 8.06vw 5.07vw;
}
#top .sdgs-container {
align-items: center;
background-color: white;
border-radius: 1.11vw;
box-shadow: 0 4px 10px 0 rgb(0 0 0 / 25%);
display: flex;
flex-direction: column;
gap: 2.64vw;
padding-bottom: 4.84vw;
padding-top: 4.84vw;
}
#top .sdgs-container > .resystem-and-sdgs-logo-image--pc {
height: 6.53vw;
width: 48.54vw;
}
#top .sdgs-container > .resystem-and-sdgs-logo-image--mb {
display: none;
}
#top .sdgs-container > .individual-logo-image {
height: 10.25vw;
width: 61.46vw;
}
#top .sdgs-container > .item-container {
display: flex;
flex-direction: column;
gap: 3.33vw;
width: 61.46vw;
}
#top .sdgs-container > .item-container > .item {
display: flex;
flex-direction: column;
gap: 1.39vw;
}
#top .sdgs-container > .item-container > .item > .item-title-container {
align-items: center;
display: flex;
gap: 1.88vw;
}
#top .sdgs-container > .item-container > .item > .item-title-container > h2 {
font-size: 1.53vw;
font-weight: 700;
line-height: 150%;
}
#top
.sdgs-container
> .item-container
> .item
> .item-title-container
> .item-title-decoration-container {
display: flex;
gap: 0.35vw;
height: 2.01vw;
justify-content: start;
min-width: 3.54vw;
}
#top .sdgs .title-decoration-box {
height: 100%;
width: 0.63vw;
}
#top .sdgs .--sdgs-seven {
background-color: #fabd00;
}
#top .sdgs .--sdgs-nine {
background-color: #ec6a06;
}
#top .sdgs .--sdgs-eleven {
background-color: #f5a20b;
}
#top .sdgs .--sdgs-twelve {
background-color: #d39206;
}
#top .sdgs .--sdgs-seventeen {
background-color: #023067;
}
#top .sdgs .--sdgs-thirteen {
background-color: #407936;
}
#top .sdgs-container > .item-container > .item > p {
font-size: 1.04vw;
font-weight: 300;
letter-spacing: 0.09em;
line-height: 150%;
size: 1vw;
text-align: justify;
word-break: break-all;
}
#top.--en .sdgs-container > .item-container > .item > p {
font-weight: 400;
}  #company .section-title {
align-items: center;
display: flex;
flex-direction: column;
font-size: 1.18vw;
gap: 1.39vw;
}
#company.--en .section-title {
font-weight: 600;
}
#company .section-title > h2 {
font-size: 4.58vw;
}
#company.--en .section-title > h2 {
font-size: 3.0vw;
} #company .philosophy {
display: flex;
flex-direction: column;
gap: 2.36vw;
padding: 6.47vw 12.43vw 11.32vw;
}
#company .philosophy__text {
border-color: var(--base-black-color);
border-width: 0.21vw;
padding: 3.26vw 7.85vw;
}
#company .philosophy__text > p {
font-size: 1.67vw;
letter-spacing: 0.165em;
line-height: 200%;
}
#company.--en .philosophy__text > p {
letter-spacing: 0;
font-weight: 600;
} #company .message {
background-color: var(--bg-gray-color);
padding-bottom: 8.82vw;
padding-top: 4.93vw;
}
#company .ceo-image--pc {
height: 16.53vw;
margin-top: 3.4vw;
width: 100%;
}
#company .ceo-image--mb {
display: none;
}
#company .message > .text {
display: flex;
flex-direction: column;
font-size: 1.39vw;
gap: 2.36vw;
letter-spacing: 0;
line-height: 200%;
margin-left: 20.21vw;
margin-right: 20.21vw;
margin-top: 5.49vw;
text-align: justify;
word-break: break-all;
} #company .profile {
padding-bottom: 12.36vw;
padding-top: 5.21vw;
}
#company .profile > table {
border-collapse: collapse;
font-size: 1.39vw;
line-height: 2.39vw;
margin-left: 12.64vw;
margin-right: 12.64vw;
margin-top: 3.82vw;
width: 74.72vw;
}
#company .profile > table > tr,
#company .profile > table th,
#company .profile > table td {
border: 1px solid var(--base-black-color);
}
#company .profile > table th,
.profile > table td {
padding: 1.53vw 1.97vw;
}
#company .profile > table th {
vertical-align: middle;
width: 20.76vw;
}
#company .profile > p {
font-size: 1.39vw;
margin-left: 12.64vw;
margin-right: 12.64vw;
margin-top: 1.53vw;
} #company .permission {
padding-bottom: 11.46vw;
padding-left: 0;
padding-right: 0;
}
#company .permission > .overlay > img {
height: 28.54vw;
width: 100%;
}
#company .permission > .section-title {
margin-top: 5.9vw;
}
#company .permission > h3 {
margin-left: 12.64vw;
margin-right: 12.64vw;
}
#company .permission__table-container {
padding-left: 12.64vw;
padding-right: 12.64vw;
width: 100%;
}
#company .permission__table-container > h3 {
font-size: 1.67vw;
font-weight: 700;
letter-spacing: 0.065em;
margin-bottom: 1.11vw;
margin-top: 3.33vw;
}
#company .permission__table-container p {
font-size: 1.39vw;
}
#company .permission__table-container h4 {
font-size: 1.39vw;
font-weight: 700;
margin-bottom: 1.11vw;
}
#company .permission__table-container table {
width: 100%;
}
#company .permission__table-container table tr,
#company .permission__table-container table td {
border: 1px solid var(--base-black-color);
padding: 1.53vw 1.97vw;
}
#company .permission__table-container table td > p {
line-height: 150%;
}  #service .summary {
align-items: center;
display: flex;
flex-direction: column;
padding-left: 5vw;
padding-right: 5vw;
padding-top: 5.03vw;
}
#service .service-button-container {
align-items: end;
display: flex;
gap: 6.11vw;
}
#service .service-button-container > a {
align-items: center;
background-color: #ecedef;
border-radius: 1.04vw;
box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
display: flex;
flex-direction: column;
gap: 0.9vw;
justify-content: end;
min-height: 9.06vw;
padding: 0.94vw 1.77vw;
width: 15.47vw;
}
#service .service-button-container > a > img {
height: 4.15vw;
object-fit: contain;
width: 6.48vw;
}
#service .service-button-container > a > p {
color: var(--main-color);
font-size: 1.11vw;
font-weight: 700;
}
#service .composition {
align-items: center;
display: flex;
flex-direction: column;
gap: 3.96vw;
margin-top: 9.17vw;
}
#service .composition > h2 {
font-size: 2.01vw;
font-weight: 700;
text-align: center;
}
#service.--en .composition > h2 {
line-height: 170%;
}
#service .composition > .text {
display: flex;
flex-direction: column;
font-size: 1.32vw;
gap: 2.73vw;
letter-spacing: 0.195em;
line-height: 229.5%;
text-align: justify;
word-break: break-all;
width: 59.9vw;
}
#service.--en .composition > .text {
letter-spacing: 0;
line-height: 170%;
}
#service .summary > .overlay {
height: 27.48vw;
margin-top: 6.11vw;
}
#service .summary > .overlay > img {
height: auto;
} #service .service-intro {
padding: 8.33vw 20.28vw 12.9vw;
}
#service .business-domain > h2 {
font-size: 2.08vw;
font-weight: 700;
}
#service .media {
box-shadow: 0 2px 6px rgb(0 0 0 / 25%);
display: flex;
height: 20.9vw;
margin-bottom: 7.85vw;
margin-top: 2.15vw;
}
#service.--en .media {
height: 30.9vw;
}
#service .media > img {
height: 20.9vw;
width: 28.78vw;
}
#service.--en .media > img {
height: 100%;
object-fit: cover;
}
#service .media__description {
display: flex;
flex-direction: column;
font-weight: 700;
gap: 1.74vw;
height: 100%;
padding-left: 1.98vw;
padding-right: 1.98vw;
padding-top: 1.94vw;
position: relative;
width: 100%;
}
#service .media__description > h3 {
font-size: 1.67vw;
font-weight: 700;
}
#service .media__description > p {
font-size: 1.11vw;
font-weight: 400;
letter-spacing: -0.005em;
line-height: 2.36vw;
text-align: justify;
word-break: break-all;
}
#service.--en .media__description > p {
letter-spacing: 0;
text-align: left;
}
#service .description-button-container {
display: flex;
justify-content: end;
}
#service .description-button {
align-items: center;
bottom: 1.94vw;
box-shadow: 2px 2px 8px rgb(0 0 0 / 25%);
display: flex;
font-size: 1.18vw;
font-weight: 700;
height: 3.06vw;
justify-content: center;
position: absolute;
right: 1.98vw;
width: 11.67vw;
}
#service .media--reverse {
flex-direction: row-reverse;
}
#service .no-image-media-container {
display: flex;
gap: 1.67vw;
}
#service .no-image-media {
box-shadow: 0 2px 6px rgb(0 0 0 / 25%);
display: flex;
flex-direction: column;
gap: 1.74vw;
height: 20.85vw;
padding-left: 1.98vw;
padding-right: 1.98vw;
padding-top: 1.94vw;
position: relative;
width: 28.89vw;
}
#service.--en .no-image-media {
height: 28.85vw;
}
#service .no-image-media > h3 {
font-size: 1.67vw;
font-weight: 700;
}
#service .no-image-media > p {
font-size: 1.11vw; letter-spacing: -0.005em;
line-height: 2.36vw;
text-align: justify;
word-break: break-all;
}
#service.--en .no-image-media > p {
text-align: left;
}  #recruit .summary {
position: relative;
}
#recruit .summary > img {
height: 49.17vw;
object-fit: cover;
width: 100%;
}
#recruit .summary > .composition {
align-items: center;
display: flex;
flex-direction: column;
gap: 6.18vw;
left: 20.28vw;
position: absolute;
right: 20.28vw;
top: 9.86vw;
}
#recruit .summary > .composition > h2 {
font-size: 2.29vw;
}
#recruit.--en .summary > .composition > h2 {
font-size: 1.8vw;
font-weight: 600;
}
#recruit .summary > .composition > .text {
display: flex;
flex-direction: column;
font-size: 1.18vw;
gap: 2.36vw;
letter-spacing: 0;
line-height: 2.36vw;
text-align: justify;
word-break: break-all;
font-weight: 500;
} #recruit .recruit-case {
align-items: center;
display: flex;
flex-direction: column;
gap: 7.29vw;
padding-bottom: 30.54vw;
padding-top: 7.43vw;
}
#recruit .recruit-case > h2 {
font-size: 2.29vw;
}
#recruit.--en .recruit-case > h2 {
font-size: 1.8vw;
font-weight: 600;
}
#recruit .recruit-case > p {
font-size: 1.39vw;
letter-spacing: 0.6em;
}
#recruit.--en .recruit-case > p {
letter-spacing: 0;
}  #contact .contact-case {
display: flex;
flex-direction: column;
gap: 3.82vw;
padding: 5.14vw 12.64vw 13.46vw;
}
#contact .contact-case > h2 {
font-size: 2.29vw;
}
#contact .contact-case-inner {
display: flex;
flex-direction: column;
gap: 3.5vw;
width: 100%;
}
#contact .contact-case-inner > a {
width: 100%;
}
#contact .contact-case-inner > a > img {
height: 20.08vw;
width: 100%;
}
#contact .contact-sapai-image--mb {
display: none;
}
#contact .contact-recycle-image--mb {
display: none;
}
#contact .contact-other-image--mb {
display: none;
}  #contact-sanpai h2 {
font-size: 2.29vw;
} #contact-sanpai .contact-method {
align-items: center;
display: flex;
flex-direction: column;
gap: 3.07vw;
padding: 8.47vw 12.64vw 12.29vw;
}
#contact-sanpai .contact-method-container {
align-items: center;
display: flex;
gap: 2.5vw;
}
#contact-sanpai .contact-method-container h3 {
font-size: 2.29vw;
}
#contact-sanpai .contact-method-container > span {
background-color: var(--base-black-color);
height: 9.25vw;
width: 1px;
}
#contact-sanpai .contact-webform {
padding-top: 7.29vw;
}
#contact-sanpai .phone {
align-items: center;
display: flex;
flex-direction: column;
gap: 2.08vw;
}
#contact-sanpai .phone > p {
font-size: 1.11vw;
}
#contact-sanpai .phone-number-container {
align-items: baseline;
display: flex;
gap: 0.69vw;
}
#contact-sanpai .phone-number-pref {
font-size: 2.29vw;
}
#contact-sanpai .phone-number {
color: var(--main-color);
font-size: 3.68vw;
}
#contact-sanpai .line {
align-items: center;
display: flex;
flex-direction: column;
gap: 2vw;
}
#contact-sanpai .line-container {
display: flex;
gap: 1.76vw;
}
#contact-sanpai .line-container > img {
height: 9.68vw;
width: 9.68vw;
}
#contact-sanpai .line-button-container {
display: flex;
flex-direction: column;
gap: 1.43vw;
}
#contact-sanpai .line-button-container > p {
font-size: 1.25vw;
}
#contact-sanpai .line-button-container a {
height: 6.45vw;
width: 20.26vw;
}
#contact-sanpai .line-button-container a > img {
height: 100%;
width: 100%;
}  #contact-recycle h2 {
font-size: 2.29vw;
} #contact-recycle .contact-webform {
padding-top: 7.29vw;
}  #contact-other h2 {
font-size: 2.29vw;
} #contact-other .phone {
align-items: center;
display: flex;
flex-direction: column;
gap: 3.47vw;
padding-left: 27.85vw;
padding-right: 27.85vw;
padding-top: 8.75vw;
}
#contact-other .phone-container {
align-items: center;
background-color: #ecedef;
display: flex;
flex-direction: column;
height: 16.81vw;
justify-content: space-around;
width: 100%;
}
#contact-other .phone-number-container {
align-items: baseline;
display: flex;
gap: 0.69vw;
}
#contact-other .phone-number-pref {
font-size: 2.29vw;
}
#contact-other .phone-number {
color: var(--main-color);
font-size: 3.68vw;
}
#contact-other .phone-info-container {
align-items: center;
background-color: white;
display: flex;
font-size: 16px;
height: 3.24vw;
justify-content: center;
text-align: center;
width: 36.62vw;
} #contact-other .contact-webform {
padding-top: 9.65vw;
} #news .section-title {
display: flex;
flex-direction: column;
gap: 1.04vw;
}
#news .section-title > h2 {
font-size: 4.58vw;
}
#news .section-title > p {
font-size: 1.18vw;
} #news-article main {
padding-bottom: 100px;
padding-top: 30px;
}
#news-article article {
display: flex;
flex-direction: column;
gap: 10px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
max-width: 922px;
padding-left: 35px;
padding-right: 35px;
}
#news-article .article-header {
display: flex;
flex-direction: column;
gap: 15px;
}
#news-article .article-header > h2 {
font-size: 25px;
}
#news-article .article-header > span {
background-color: var(--base-black-color);
height: 1px;
width: 100%;
}
#news-article .article-header-info-container {
display: flex;
gap: 15px;
}
#news-article .article-tag {
color: var(--accent-color);
}
#news-article .article-content {
background-color: white;
color: var(--base-black-color);
display: flex;
flex-direction: column;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
"Hiragino Sans", Meiryo, sans-serif;
font-size: 17px;
font-weight: 300;
gap: 1vw;
height: auto !important;
letter-spacing: 0.05em;
margin: 20px auto;
max-width: 950px;
padding: 25px 0 100px;
width: 100%;
}
#news-article .article-content > h2 {
font-size: 25px;
font-weight: 600;
margin-bottom: 1vw;
margin-top: 4vw;
padding-bottom: 1.25vw;
padding-top: 1vw;
text-align: center;
}
#news-article .article-content > h2::after {
border-bottom: var(--main-color) 2px solid;
content: "";
display: block;
height: 10px;
margin: auto;
width: 30%;
}
#news-article .article-content > h3 {
font-size: 18px;
font-weight: 500;
margin-bottom: 1vw;
margin-top: 2.5vw;
padding-bottom: 1vw;
padding-top: 1vw;
}
#news-article .article-content > p {
font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; line-height:180%;
}
#news-article .article-content strong {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
letter-spacing: 0.05em;
line-height: 180%;
}
#news-article .article-content ul {
list-style: "◼︎";
}
#news-article .article-content br {
display: block;
content: "";
margin: 10px 0;
} #page main {
padding-bottom: 100px;
padding-top: 30px;
}
#page article {
display: flex;
flex-direction: column;
gap: 50px;
}
#page .article-header {
display: flex;
flex-direction: column;
gap: 15px;
margin-left: auto;
margin-right: auto;
margin-top: 80px;
max-width: 922px;
padding-left: 35px;
padding-right: 35px;
}
#page h2 {
font-size: 30px;
}
#page .article-content {
background-color: white;
color: var(--base-black-color);
display: flex;
flex-direction: column;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
"Hiragino Sans", Meiryo, sans-serif;
font-size: 18px; gap: 1vw;
height: auto !important;
letter-spacing: 0.05em;
margin: 20px auto;
max-width: 950px;
padding: 25px 0 100px;
width: 100%;
}
#page .article-content > h2 {
font-size: 25px;
font-weight: 600;
margin-bottom: 1vw;
margin-top: 4vw;
padding-bottom: 1.25vw;
padding-top: 1vw;
text-align: center;
}
#page .article-content > h2::after {
border-bottom: var(--main-color) 2px solid;
content: "";
display: block;
height: 10px;
margin: auto;
width: 30%;
}
#page .article-content > h3 {
font-size: 18px;
font-weight: 500;
margin-bottom: 1vw;
margin-top: 2.5vw;
padding-bottom: 1vw;
padding-top: 1vw;
}
#page .article-content > p {
font-family: "Noto Sans JP", sans-serif;
letter-spacing: 0.05em;
line-height: 200%;
font-size: 18px;
font-weight: 400;
}
#page .article-content strong {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
letter-spacing: 0.05em;
line-height: 200%;
}
#page .article-content ul {
list-style: "◼︎";
padding-left: 17px;
}
#page .article-content ol {
list-style-type: decimal;
padding-left: 17px;
line-height: 200%;
font-weight: 400;
} #archive main {
padding-bottom: 100px;
padding-top: 30px;
}
#archive article {
display: flex;
flex-direction: column;
gap: 50px;
}
#archive .article-header {
display: flex;
flex-direction: column;
gap: 15px;
margin-left: auto;
margin-right: auto;
margin-top: 80px;
max-width: 922px;
padding-left: 35px;
padding-right: 35px;
}
#archive h2 {
font-size: 30px;
}
#archive .article-content {
margin-left: auto;
margin-right: auto;
margin-top: 80px;
max-width: 922px;
min-width: 615px;
padding-left: 35px;
padding-right: 35px;
width: 64.03vw;
}
#archive .article-content > h2 {
background-color: var(--main-color);
color: white;
margin-bottom: 1vw;
margin-top: 1vw;
padding-bottom: 1vw;
padding-left: 25px;
padding-top: 1vw;
}
#archive .article-content > p {
line-height: 35px;
} @media screen and (width <= 970px) { #news-article .article-header {
gap: 15px;
}
#news-article .article-content {
gap: 15px;
width: 650px;
} #page .article-header {
gap: 15px;
}
#page .article-content {
gap: 15px;
width: 650px;
} #recruit .recruit-case {
padding-left: 10vw;
padding-right: 10vw;
}
#recruit .recruit-case > p {
letter-spacing: 0.09em;
}
}
@media screen and (width <= 799px) { #normal-header {
background-color: white;
position: relative;
min-height: 73px;
padding: 16px;
}
#normal-header .lang-button-container {
display: none;
}
#normal-header h1 {
height: auto;
min-height: 65px;
width: 250px;
z-index: 3;
font-size: 17px;
letter-spacing: 0.02em;
}
#normal-header h1 > a {
gap: 2px;
justify-content: start;
}
#normal-header .tagline {
font-size: 14px;
}
#normal-header .tagline.is-active {
color: white;
}
#normal-header .header_logo--pc {
width: 200px;
height: 35px;
}
#normal-header .header_logo--pc.is-active {
background-image: url(//re-syst.jp/wp-content/themes/resysty/images/header_logo-white.webp);
}
#normal-header nav > .hamburger-button {
background-image: url(//re-syst.jp/wp-content/themes/resysty/images/hamburger-icon.svg);
background-position: center;
background-repeat: no-repeat;
background-size: 40px;
border-radius: 5px;
display: block;
height: 50px;
width: 50px;
z-index: 3;
}
#normal-header nav > .hamburger-button:hover {
background-color: var(--bg-gray-color);
cursor: pointer;
}
#normal-header nav > .hamburger-button.is-active {
color: white;
}
#normal-header nav > .hamburger-button:hover.is-active {
color: white;
}
#normal-header nav > ul {
display: none;
}
#normal-header nav > .contact-button {
display: none; }
#normal-header nav > .contact-button > p { }
#normal-header nav > .contact-button > .arrow { }
#normal-header .hamburger-menu {
background-color: rgb(9 47 73 / 98%);
display: none;
height: 100vh;
left: 0;
position: fixed;
top: 0;
width: 100vw;
z-index: 2;
padding-top: 160px;
overflow: hidden auto; transform: translateX(100%);
}
#normal-header .hamburger-menu.is-active {
display: flex;
flex-direction: column;
gap: 60px;
transform: translateX(0);
}
#normal-header .hamburger-menu .bogo-language-switcher {
display: flex;
flex-direction: column;
gap: 30px;
}
#normal-header .hamburger-menu > ul {
color: white;
font-size: 20px;
margin-left: 50px;
margin-right: 50px;
width: 100%;
}
#normal-header .hamburger-menu > ul > li {
border-bottom: white 1px solid;
}
#normal-header .hamburger-menu > ul > li > a {
display: block;
height: 100%;
padding-bottom: 20px;
padding-top: 20px;
width: 100%;
}
#normal-header .hamburger-menu .bogo-language-switcher  > li > span {
padding-bottom: 20px;
} footer {
align-items: center;
display: flex;
flex-direction: column;
padding-left: 16px;
padding-right: 16px;
}
footer > nav {
align-items: center;
flex-direction: column;
gap: 20px;
width: 100%;
}
footer > nav > a {
width: 100%;
}
footer > nav > a > img {
height: 60px;
object-fit: contain;
width: 300px;
}
footer > nav > ul {
border-top: white 1px solid;
flex-direction: column;
gap: 0;
width: 100%;
}
footer > nav > ul > li {
border-bottom: white 1px solid;
font-size: 15px;
padding-bottom: 20px;
padding-top: 20px;
width: 100%;
}
footer > .badge_container {
margin-top: 8vw;
flex-direction: column;
}
footer > .badge_container > .kyoryoku-button {
border: #fff 0.35vw double;
padding: 2vw 2.2vw;
box-shadow: 4px 4px 4px rgb(0 0 0 / 25%);
}
footer > .badge_container > .kyoryoku-button > h3 {
font-size: 3.21vw;
line-height: 3.21vw;
margin-bottom: 2vw;
}
footer > .badge_container > .kyoryoku-button .description_container {
gap: 0.4vw;
}
footer > .badge_container > .kyoryoku-button p {
font-size: 2vw;
line-height: 2.5vw;
}
footer > .badge_container > .kyoryoku-button > small {
margin-top: 15px;
font-size: 1.9vw;
}
footer > .footer__permission {
flex-direction: column;
gap: 15px;
width: 100%;
}
footer > .footer__permission > p {
font-size: 15px;
line-height: 28px;
}
.footer__info {
align-items: end;
flex-flow: row wrap;
gap: 5vw;
width: 100%;
}
.footer__info__location {
flex-direction: column;
}
.footer__info__location > div {
font-size: 15px;
line-height: 20px;
}
.footer__info > a {
font-size: 15px;
}
footer > p {
font-size: 15px;
} .arrow {
height: 20px;
margin-right: 1.85vw;
width: 20px;
}
a:hover > .arrow {
height: 20px;
margin-right: 1.85vw;
width: 20px;
} .fixed-page-main-visual {
height: 150px;
}
.fixed-page-main-visual__title {
font-size: 16px;
top: 50%;
transform: translate(0, -50%);
}
.contact-form-main-visual {
height: 67.8873vw;
width: 100%;
}
.contact-form-main-visual > img {
height: 100%;
width: 100%;
}
.contact-main--mb {
display: inline;
}
.contact-main--pc {
display: none;
} .news {
gap: 7.26vw;
padding: 6.81vw 10vw 10.81vw;
}
.news ul {
display: flex;
flex-direction: column;
gap: 3vw;
font-weight: 400;
}
.news ul li {
padding-bottom: 3vw;
}
.news .news-info {
flex-direction: column;
justify-content: center;
min-width: 23vw;
}
.news .news-tag {
font-size: 3vw;
}
.news ul li a {
font-size: 4vw;
gap: 30px;
} .contact-webform {
padding-left: 16px;
padding-right: 16px;
}
.contact-webform-container > p {
font-size: 15px;
line-height: 25px;
} form {
gap: 16px;
padding: 16px;
}
.form-item {
font-size: 18px;
gap: 8px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
border-radius: 7px;
height: 45px;
padding-left: 10px;
}
.wpcf7 textarea {
border-radius: 7px;
height: 45px;
min-height: 200px;
padding-left: 10px;
padding-top: 10px;
}
.form-item__title {
display: flex;
}
.wpcf7 > form > p {
width: 100%;
}
.wpcf7 .submit {
align-items: center;
border-radius: 0.69vw;
color: white;
display: flex;
font-size: 25px;
height: 60px;
justify-content: center;
letter-spacing: 0.6em;
margin-top: 3.19vw;
padding-left: 15px;
width: 100%;
}   #top .section-title {
gap: 1.04vw;
}
#top .section-title > h2 {
font-size: 8.58vw;
}
#top.--en .section-title > h2 {
font-size: 3.7vw;
}
#top .section-title > p {
font-size: 3.18vw;
}
#top .composition > h2 {
font-size: 8.1vw;
}
#top.--en .composition > h2 {
font-size: 6.1vw;
}
#top .composition > h3 {
font-size: 6.1vw;
}
#top.--en .composition > h3 {
font-size: 6.1vw;
}
#top .composition > .text {
max-width: 90vw;
text-align: justify;
word-break: break-all;
}
#top .composition > .text > p {
font-size: 3.39vw;
line-height: 5.36vw;
}
#top .view-more {
border-radius: 30px;
height: 60px;
padding-left: 32vw;
width: 100%;
}
#top.--en .view-more {
margin-top: 8vw;
}
#top .view-more > p {
font-size: 3.39vw;
} #top .main-visual__contents {
gap: 0;
width: 90vw;
}
#top .main-title {
gap: 0;
}
#top .main-title__text {
font-size: 7vw;
line-height: 10.58vw;
}
#top.--en .main-title__text {
font-size: 6vw;
line-height: 8.58vw;
}
#top .main-title-sub__text {
display: none;
}
#top .video-container {
height: 43.7vw;
top: 35.5vw;
width: 90vw;
}
#top.--en .video-container {
top: 33.5vw;
}
#top .scroll {
display: none;
} #top .about {
padding-bottom: 0;
padding-top: 24vw;
}
#top.--en .about {
padding-top: 32vw;
}
#top .recommend-container {
margin-left: 10vw;
}
#top .recommend > a {
box-shadow: 4px 5px 6px 0 #00000052;
height: 15.4366vw;
width: 27.1097vw;
}
#top .about > .composition {
margin-left: 10vw;
margin-right: 10vw;
text-align: justify;
word-break: break-all;
width: auto;
}
#top .about > img {
height: 90.3683vw;
margin-top: 20vw;
position: initial;
top: 0;
width: 100vw;
} #top .service {
padding-left: 10vw;
padding-right: 10vw;
padding-top: 20vw;
}
#top .service > .media {
display: flex;
flex-direction: column-reverse;
justify-content: space-between;
}
#top .service > .media > img {
height: 80vw;
padding-top: 10vw;
width: 80vw;
}
#top .service-image1 {
top: 225vw;
}
#top .service-image2 {
top: 230vw;
} #top .company {
padding: 20vw 10vw 10vw;
}
#top .media-reverse {
flex-direction: column-reverse;
}
#top .media-reverse > img {
height: 71.3386%;
margin-top: 18vw;
width: 100%;
} #top .sdgs {
background-color: var(--bg-gray-color);
padding: 8.06vw 5.07vw;
}
#top .sdgs-container {
border-radius: 2vw;
gap: 7vw;
padding: 7.84vw 5.07vw;
}
#top .sdgs-container > .resystem-and-sdgs-logo-image--pc {
display: none;
}
#top .sdgs-container > .resystem-and-sdgs-logo-image--mb {
display: block;
height: 41.8281vw;
width: 81.42vw;
}
#top .sdgs > .sdgs-container > .title-container > h2 {
font-size: 2.43vw;
}
#top .sdgs-container > .individual-logo-image {
height: 13.7517vw;
width: 81.42vw;
}
#top .sdgs-container > .item-container {
gap: 5.47vw;
width: 81.42vw;
}
#top .sdgs-container > .item-container > .item {
gap: 4.47vw;
}
#top .sdgs-container > .item-container > .item > .item-title-container > h2 {
font-size: 17px;
}
#top.--en .sdgs-container > .item-container > .item > .item-title-container > h2 {
font-size: 2.9vw;
}
#top
.sdgs-container
> .item-container
> .item
> .item-title-container
> .item-title-decoration-container {
gap: 0.87vw;
height: 5.03vw;
min-width: 11vw;
}
#top .sdgs .title-decoration-box {
width: 1.56vw;
}
#top .sdgs-container > .item-container > .item > p {
font-size: 14px;
}
#top.--en .sdgs-container > .item-container > .item > p {
font-size: 2.9vw;
}  #company .section-title {
font-size: 16px;
gap: 1.39vw;
}
#company .section-title > h2 {
font-size: 6.58vw;
} #company .philosophy {
gap: 6.36vw;
padding: 10.47vw 10vw 15.32vw;
}
#company .philosophy__text {
padding: 5.26vw 4.85vw;
}
#company .philosophy__text > p {
font-size: 16px;
letter-spacing: 0.165em;
line-height: 32px;
} #company .message {
padding-left: 10vw;
padding-right: 10vw;
padding-top: 10.47vw;
}
#company .ceo-image--pc {
display: none;
}
#company .ceo-image--mb {
display: block;
margin-top: 6.36vw;
width: 100%;
height: auto;
}
#company .message > .text {
display: flex;
flex-direction: column;
font-size: 16px;
gap: 4.36vw;
letter-spacing: 0.09em;
line-height: 32px;
margin-left: 0;
margin-right: 0;
margin-top: 5.49vw;
} #company .profile {
padding-top: 10.47vw;
}
#company .profile > table {
border-collapse: collapse;
font-size: 16px;
line-height: 22px;
margin-top: 6.36vw;
}
#company .profile > p {
font-size: 16px;
line-height: 22px;
} #company .permission__table-container {
margin-top: 6.36vw;
}
#company .permission__table-container > h3 {
font-size: 20px;
}
#company .permission__table-container p {
font-size: 16px;
}
#company .permission__table-container h4 {
font-size: 16px;
}  #service .summary {
padding-top: 10.03vw;
}
#service .service-button-container {
flex-direction: column;
gap: 3vw;
width: 100%;
}
#service .service-button-container > a {
flex-direction: row;
gap: 30px;
height: 100px;
justify-content: center;
width: 100%;
}
#service .service-button-container > a > p {
font-size: 18px;
}
#service .service-button-container > a > img {
height: 47px;
object-fit: contain;
width: 77px;
}
#service .composition {
gap: 5.96vw;
margin-top: 15.17vw;
}
#service .composition > h2 {
font-size: 18px;
}
#service .composition > .text {
font-size: 15px;
gap: 25px;
width: auto;
} #service .service-intro {
padding: 8.33vw 10vw 12.9vw;
}
#service .media {
flex-direction: column;
height: 95vw;
}
#service.--en .media {
flex-direction: column;
height: 105vw;
}
#service .media > img {
height: 60vw;
width: 100%;
}
#service.--en .media > img {
height: 60vw;
width: 100%;
}
#service .media__description {
gap: 15px;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
}
#service .business-domain > h2 {
font-size: 20px;
}
#service .media__description > h3 {
font-size: 18px;
}
#service .media__description > p {
font-size: 15px;
line-height: 25px;
}
#service .description-button {
bottom: 20px;
font-size: 18px;
height: 45px;
right: 20px;
width: 170px;
}
#service .no-image-media-container {
flex-direction: column;
gap: 35px;
}
#service .no-image-media {
height: 250px;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
width: auto;
}
#service.--en .no-image-media {
height: 250px;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
width: auto;
}
#service .no-image-media > h3 {
font-size: 18px;
}
#service .no-image-media > p {
font-size: 15px;
line-height: 25px;
}  #recruit .summary > img {
height: 70vw;
}
#recruit .summary > .composition {
left: 10vw;
right: 10vw;
}
#recruit .summary > .composition > h2 {
font-size: 20px;
}
#recruit.--en .summary > .composition > h2 {
font-size: 20px;
}
#recruit .summary > .composition > .text {
font-size: 15px;
gap: 18px;
line-height: 25px;
} #recruit .recruit-case > h2 {
font-size: 20px;
}
#recruit.--en .recruit-case > h2 {
font-size: 20px;
}
#recruit .recruit-case > p {
font-size: 15px;
}  #contact .contact-case {
padding-left: 10vw;
padding-right: 10vw;
}
#contact .contact-case > h2 {
font-size: 20px;
padding-bottom: 10vw;
padding-top: 12vw;
}
#contact .contact-case-inner {
gap: 7vw;
}
#contact .contact-case-inner > a > img {
height: 54.2933vw;
width: 80vw;
}
#contact .contact-sapai-image--mb {
box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
display: inline;
}
#contact .contact-recycle-image--mb {
box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
display: inline;
}
#contact .contact-other-image--mb {
box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
display: inline;
}
#contact .contact-sapai-image--pc {
display: none;
}
#contact .contact-recycle-image--pc {
display: none;
}
#contact .contact-other-image--pc {
display: none;
}  #contact-sanpai h2 {
font-size: 20px;
} #contact-sanpai .contact-method {
gap: 7.07vw;
padding-left: 0;
padding-right: 0;
}
#contact-sanpai .contact-method-container {
align-items: center;
display: flex;
flex-direction: column;
gap: 5.5vw;
}
#contact-sanpai .contact-method-container h3 {
font-size: 25px;
}
#contact-sanpai .contact-method-container > span {
height: 1px;
width: 30.25vw;
}
#contact-sanpai .phone > p {
font-size: 15px;
}
#contact-sanpai .phone-number-pref {
font-size: 25px;
}
#contact-sanpai .phone-number {
font-size: 40px;
}
#contact-sanpai .line-container > img {
height: 120px;
width: 120px;
}
#contact-sanpai .line-button-container {
gap: 15px;
}
#contact-sanpai .line-button-container > p {
font-size: 15px;
}
#contact-sanpai .line-button-container a {
height: 80px;
width: 240px;
}  #contact-recycle h2 {
font-size: 20px;
}  #contact-other h2 {
font-size: 20px;
} #contact-other .phone {
gap: 20px;
padding-left: 16px;
padding-right: 16px;
}
#contact-other .phone-container {
height: 150px;
width: 380px;
}
#contact-other .phone-number-container {
gap: 16px;
}
#contact-other .phone-number-pref {
font-size: 25px;
}
#contact-other .phone-number {
font-size: 40px;
}
#contact-other .phone-info-container {
font-size: 16px;
height: 30px;
width: 83%;
} #news-article article {
padding-left: 16px;
padding-right: 16px;
}
#news-article .article-header {
gap: 15px;
}
#news-article .article-header > h2 {
font-size: 20px;
}
#news-article .article-content {
font-family: "Noto Sans JP", serif;
font-size: 16px;
gap: 15px;
padding: 10px 0 100px;
width: auto;
}
#news-article .article-content > h2 {
font-size: 20px;
margin-bottom: 20px;
margin-top: 50px;
}
#news-article .article-content > h3 {
margin-bottom: 20px;
margin-top: 30px;
} #page .article-header {
gap: 15px;
}
#page h2 {
font-size: 20px;
}
#page .article-content {
font-family: "Noto Sans JP", serif;
font-size: 16px;
gap: 15px;
padding: 10px 16px 100px;
width: auto;
}
#page .article-content > h2 {
font-size: 20px;
margin-bottom: 20px;
margin-top: 50px;
}
#page .article-content > h3 {
margin-bottom: 20px;
margin-top: 30px;
}
}
@media screen and (width <= 616px) { footer > nav > ul {
flex-wrap: wrap;
justify-content: center;
} .arrow {
display: none;
} .news-info {
min-width: 100px;
}   #top .section-title > h2 {
font-size: 9.58vw;
}
#top .section-title > p {
font-size: 4.18vw;
}
#top .composition {
display: flex;
flex-direction: column;
gap: 9vw;
}
#top .composition > .text > p {
font-size: 18px;
line-height: 180%;
}
#top .view-more {
justify-content: center;
padding-left: 0;
}
#top .view-more > p {
font-size: 18px;
} #top .about {
padding-top: 30vw;
}
#top .recommend-container > h2 {
font-size: 18px;
}
#top .recommend {
gap: 2.67vw;
}
#top .recommend > a {
height: 24.2vw;
width: 42.5vw;
} #top.--en .service-image1 {
top: 250vw;
}
#top.--en .service-image2 {
top: 245vw;
} #top.--en .sdgs-container > .item-container > .item > .item-title-container > h2 {
font-size: 3.18vw;
}
#top.--en .sdgs-container > .item-container > .item > p {
font-size: 3.18vw;
}  #service .media {
height: 530px;
}  #recruit .summary > img {
height: 100vw;
}
}
@media screen and (width <= 540px) {
.sp-show {
display: block;
} .footer__info {
align-items: center;
flex-direction: column;
justify-content: center;
}
footer > .badge_container > .kyoryoku-button {
margin-bottom: 10px;
border: #fff 6px double;
padding: 15px;
box-shadow: 4px 4px 4px rgb(0 0 0 / 25%);
}
footer > .badge_container > .kyoryoku-button > h3 {
font-size: 18px;
line-height: 18px;
margin-bottom: 15px;
}
footer > .badge_container > .kyoryoku-button .description_container {
column-gap: 10px;
flex-wrap: wrap;
width: 100%;
justify-content: center;
}
footer > .badge_container > .kyoryoku-button p {
font-size: 14px;
line-height: 18px;
}
footer > .badge_container > .kyoryoku-button > small {
margin-top: 10px;
font-size: 14px;
}   #top.--en .section-title > h2 {
font-size: 5.58vw;
} #top .service-image1 {
top: 255vw;
}
#top .service-image2 {
top: 250vw;
}
#top.--en .service-image1 {
top: 265vw;
}
#top.--en .service-image2 {
top: 260vw;
} #top.--en .sdgs-container > .item-container > .item > .item-title-container > h2 {
font-size: 18px;
}
#top.--en .sdgs-container > .item-container > .item > p {
font-size: 18px;
}   #service.--en .media {
height: 123vw;
}
#service.--en .no-image-media {
height: 270px;
}
}
@media screen and (width <= 480px) {   #top.--en .service-image1 {
top: 285vw;
}
#top.--en .service-image2 {
top: 280vw;
}  #recruit .summary > img {
height: 110vw;
}
#recruit.--en .summary > img {
height: 130vw;
} #service.--en .media {
height: 135vw;
}
#service.--en .no-image-media {
height: 290px;
}
}
@media screen and (width <= 437px) {   #top .service-image1 {
top: 265vw;
}
#top .service-image2 {
top: 260vw;
}
#top.--en .service-image1 {
top: 295vw;
}
#top.--en .service-image2 {
top: 290vw;
} #recruit.--en .summary > img {
height: 140vw;
}
}
@media screen and (width <= 425px) {   #top .service-image1 {
top: 275vw;
}
#top .service-image2 {
top: 270vw;
}
#top.--en .service-image1 {
top: 315vw;
}
#top.--en .service-image2 {
top: 310vw;
}
}
@media screen and (width <= 410px) {   #top .service-image1 {
top: 285vw;
}
#top .service-image2 {
top: 280vw;
} #service.--en .media {
height: 155vw;
}
#service.--en .no-image-media {
height: 310px;
}  #recruit .summary > img {
height: 150vw;
}
}
@media screen and (width <= 390px) { footer > .footer__permission > p {
font-size: 14px;
}   #top.--en .service-image1 {
top: 325vw;
}
#top.--en .service-image2 {
top: 320vw;
}  #recruit.--en .summary > img {
height: 170vw;
}
}
@media screen and (width <= 375px) { #normal-header nav > .contact-button {
padding-left: 7px;
padding-right: 7px;
width: 150px;
}   #top.--en .service-image1 {
top: 345vw;
}
#top.--en .service-image2 {
top: 340vw;
} #company .permission__table-container > h3 {
margin-bottom: 16px;
margin-top: 25px;
}  #service .service-button-container > a {
gap: 15px;
} #service .service-intro {
padding-top: 15vw;
}
#service .business-domain > h2 {
padding-top: 15vw;
}  #recruit .summary > img {
height: 180vw;
} #recruit .recruit-case {
padding-left: 16px;
padding-right: 16px;
}  #contact-sanpai .phone-number-pref {
font-size: 20px;
}
#contact-sanpai .phone-number {
font-size: 30px;
}
#contact-sanpai .line-container > img {
display: none;
} #contact-other .phone {
padding-left: 16px;
padding-right: 16px;
}
#contact-other .phone-container {
padding-left: 16px;
padding-right: 16px;
width: auto;
}
#contact-other .phone-number-container {
gap: 5px;
}
#contact-other .phone-number-pref {
font-size: 20px;
}
#contact-other .phone-number {
font-size: 30px;
}
#contact-other .phone-info-container {
padding-left: 16px;
padding-right: 16px;
width: auto;
}
} #lp-header {
display: flex;
justify-content: center;
padding: 20px 40px;
font-family: "Noto Sans JP", sans-serif;
font-weight: 500;
}
#lp-header .header_inner {
display: flex;
flex-direction: column;
gap: 20px;
width: 1145px;
}
#lp-header .top_container {
display: flex;
justify-content: space-between;
align-items: center;
}
#lp-header .header_logo {
height: 45px;
width: 100%;
background-image: url(//re-syst.jp/wp-content/themes/resysty/images/header_logo.webp);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: block;
position: relative;
z-index: 3;
}
#lp-header .header_logo.is-active {
background-image: url(//re-syst.jp/wp-content/themes/resysty/images/header_logo-white.webp);
}
#lp-header .tagline.is-active {
color: #fff;
position: relative;
z-index: 4;
}
#lp-header .button_container {
display: flex;
gap: 10px;
}
#lp-header .button {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
height: 75px;
border-radius: 6px;
color: #fff;
padding-left: 12px;
padding-right: 12px;
padding-bottom: 2px;
box-shadow: 1px 5px 5px rgb(0 0 0 / 20%);
}
#lp-header .button > .text_container {
display: flex;
flex-direction: column;
gap: 2px;
justify-content: center;
align-items: center;
}
#lp-header .button > .icon {
width: 30px;
height: auto;
}
#lp-header .button > .arrow--nonStick {
width: 10px;
}
#lp-header .button > .text_container > small {
font-size: 13px;
font-weight: 400;
margin-top: 3px;
}
#lp-header .button > .text_container > p {
font-size: 20px;
font-weight: var(--font-weight600);
letter-spacing: 0.05em;
margin-bottom: -3px;
}
#lp-header .button.--phone {
background-color: #FF9D23;
}
#lp-header .button.--line {
background-color: #00C300;
}
#lp-header .button.--mail {
background: linear-gradient(to right, #005BAC, #54C3F1);
}
#lp-header nav {
display: flex;
width: 100%;
height: 42px;
}
#lp-header nav .pc-list {
display: table;
table-layout: fixed;
list-style-type: none;
justify-content: space-between;
width: 100%;
}
#lp-header nav .pc-list:first-child {
border-left: 1px solid #C2C9CD;
}
#lp-header nav .pc-list > li {
display: table-cell;
vertical-align: middle;
align-items: center;
border-right: 1px solid #C2C9CD;
word-wrap: break-word;
height: 100%;
}
#lp-header nav .pc-list > li > a {
display: block;
width: 100%;
height: 100%;
text-align: center;
font-size: 18px;
letter-spacing: 0.11em;
}
#lp-header .hamburger-menu {
display: none;
}
@media screen and (width <= 1185px) {
#lp-header .header_inner {
width: 1000px;
}
}
@media screen and (width <= 1050px) {
#lp-header {
padding: 20px 16px;
}
#lp-header .header_inner {
flex-direction: row;
justify-content: space-between;
gap: 10px;
width: 100%;
align-items: center;
}
#lp-header .header_logo {
width: 215px;
}
#lp-header .tagline {
font-size: 14px;
}
#lp-header nav {
justify-content: end;
}
#lp-header nav > .pc-list {
display: none;
}
#lp-header .button_container {
display: none;
}
#lp-header .hamburger-button {
background-image: url(//re-syst.jp/wp-content/themes/resysty/images/hamburger-icon.svg);
background-position: center;
background-repeat: no-repeat;
background-size: 40px;
border-radius: 5px;
display: block;
height: 50px;
width: 50px;
z-index: 3;
}
#lp-header .hamburger-button:hover {
background-color: var(--bg-gray-color);
cursor: pointer;
}
#lp-header .hamburger-button.is-active {
color: white;
}
#lp-header .hamburger-button:hover.is-active {
color: white;
}
#lp-header .hamburger-menu {
background-color: rgb(9 47 73 / 98%);
display: none;
height: 100vh;
left: 0;
position: fixed;
top: 0;
width: 100vw;
z-index: 2;
padding-top: 160px;
overflow: hidden auto;  transform: translateX(100%);
}
#lp-header .hamburger-menu.is-active {
display: flex;
flex-direction: column;
gap: 60px;
transform: translateX(0);
}
#lp-header .hamburger-menu .bogo-language-switcher {
display: flex;
flex-direction: column;
gap: 30px;
}
#lp-header .hamburger-menu > ul {
color: white;
font-size: 20px;
margin-left: 50px;
margin-right: 50px;
width: 100%;
}
#lp-header .hamburger-menu > ul > li {
border-bottom: white 1px solid;
}
#lp-header .hamburger-menu > ul > li > a {
display: block;
height: 100%;
padding-bottom: 20px;
padding-top: 20px;
width: 100%;
}
#lp-header .hamburger-menu .bogo-language-switcher  > li > span {
padding-bottom: 20px;
}
} #lp-footer {
padding-bottom: 180px;
}
@media screen and (width <= 992px) {
#lp-footer {
padding-bottom: 140px;
}
}  #lp h2 {
font-family: "Noto Serif JP", serif;
font-size: 40px;
text-align: center;
font-weight: var(--font-weight600);
line-height: 55px;
}
#lp section {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding-left: 16px;
padding-right: 16px;
}
#lp .section-inner {
display: flex;
flex-direction: column;
gap: 64px;
padding-top: 64px;
padding-bottom: 75px;
align-items: center;
width: 960px;
}
#lp img.--sp {
display: none;
}
@media screen and (width <= 992px) {
#lp h2 {
font-size: 20px;
line-height: 30px;
}
#lp section {
padding-left: 0;
padding-right: 0;
}
#lp .section-inner {
gap: 30px;
padding: 30px 16px 50px;
width: 100%;
}
#lp img.--pc {
display: none;
}
#lp img.--sp {
display: block;
}
} #lp {
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
}
#lp .main-visual {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-image: url(//re-syst.jp/wp-content/themes/resysty/images/lp-mv-background-image.webp);
background-size: 100%;
padding: 73px 16px;
color: #fff;
}
#lp .main-visual .main-visual_inner {
display: flex;
flex-direction: column;
gap: 54px;
background-color: rgb(58 130 163 / 95%);
padding: 44px 40px 54px;
position: relative;
}
#lp .main-visual .title_container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 25px;
}
#lp .main-visual .title-region {
display: flex;
justify-content: center;
align-items: center;
background-color: black;
padding: 10px 23px 15px;
font-size: 31px;
font-weight: var(--font-weight600);
letter-spacing: 0.11em;
}
#lp .main-visual .title_container > strong {
font-weight: var(--font-weight800);
font-size: 55px;
text-shadow: rgb(0 0 0 / 39%) 4px 4px 1px;
letter-spacing: 0.11em;
line-height: 74px;
}
#lp .main-visual .title_container > strong > span {
font-size: 70px;
color: #F5D77F;
}
#lp .main-visual .description_container {
display: flex;
gap: 41px;
align-items: end;
}
#lp .main-visual .point_container {
display: flex;
flex-direction: column;
gap: 20px;
}
#lp .main-visual .point_inner {
display: flex;
gap: 17px;
}
#lp .main-visual .point-box {
display: flex;
flex-direction: column;
justify-content: end;
align-items: center;
gap: 21px;
padding: 20px 10px;
background-image: url(//re-syst.jp/wp-content/themes/resysty/images/lp-mv-point-background-image.webp);
background-size: contain;
background-repeat: no-repeat;
width: 200px;
height: 187px;
color: #000;
font-size: 26px;
font-weight: 500;
position: relative;
}
#lp .main-visual .point-box > img {
width: 68px;
height: auto;
}
#lp .main-visual .point-box > p {
text-align: center;
letter-spacing: 0.11em;
}
#lp .main-visual .point-box > .attension {
position: absolute;
font-size: 12px;
top: 90px;
right: 16px;
}
#lp .main-visual .description_container > img {
width: 395px;
height: 297px;
border-color: #fff;
border-width: 6px;
}
#lp .main-visual .main-visual_inner > .circle {
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
width: 172px;
height: 172px;
border-radius: 50%;
position: absolute;
top: 25px;
right: 35px;
}
#lp .main-visual .main-visual_inner > .circle > p {
color: #000;
font-size: 22px;
letter-spacing: 0.11em;
font-weight: 500;
text-align: center;
}
@media screen and (width <= 1185px) {
#lp .main-visual {
padding: 33px 16px;
}
#lp .main-visual .main-visual_inner {
gap: 34px;
padding: 34px 25px 44px;
}
#lp .main-visual .title_container > strong {
font-size: 40px;
line-height: 59px;
}
#lp .main-visual .title_container > strong > span {
font-size: 50px;
}
#lp .main-visual .description_container {
gap: 25px;
}
#lp .main-visual .point_inner {
gap: 6px;
}
#lp .main-visual .point-box {
width: 175px;
height: 165px;
font-size: 20px;
}
#lp .main-visual .point-box > img {
width: 55px;
}
#lp .main-visual .description_container > img {
width: 350px;
height: 267px;
}
#lp .main-visual .main-visual_inner > .circle {
width: 152px;
height: 152px;
}
}
@media screen and (width <= 992px) {
#lp .main-visual {
padding: 16px 0;
background-image: url(//re-syst.jp/wp-content/themes/resysty/images/lp-mv-background-image--sp.webp);
}
#lp .main-visual .main-visual_inner {
padding: 22px 10px;
}
#lp .main-visual .title_container {
gap: 20px;
}
#lp .main-visual .title-region {
padding: 8px 15px;
font-size: 19px;
}
#lp .main-visual .title_container > strong {
font-size: 18px;
line-height: 151%;
letter-spacing: 0.07em;
text-shadow: rgb(0 0 0 / 39%) 2px 2px 1px;
}
#lp .main-visual .title_container > strong > span {
font-size: 27px;
}
#lp .main-visual .point_container small {
font-size: 12px;
}
#lp .main-visual .point_container {
gap: 10px;
}
#lp .main-visual .description_container {
display: flex;
flex-direction: column-reverse;
align-items: start;
gap: 20px;
}
#lp .main-visual .point-box {
gap: 7px;
padding: 14px 10px;
width: 104px;
height: 95px;
font-size: 12px;
}
#lp .main-visual .point-box > img {
width: 34px;
}
#lp .main-visual .point-box > .attension {
font-size: 10px;
top: 40px;
right: 10px;
}
#lp .main-visual .description_container > img {
width: 209px;
height: 157px;
}
#lp .main-visual .main-visual_inner > .circle {
width: 102px;
height: 102px;
top: 150px;
right: 10px;
}
#lp .main-visual .main-visual_inner > .circle > p {
font-size: 14px;
}
} #lp .worries {
background-color: #DCE1E5;
}
#lp .worries .worries_container {
display: flex;
justify-content: space-between;
width: 100%;
}
#lp .worries .worries_box {
display: flex;
flex-direction: column;
align-items: center;
gap: 25px;
}
#lp .worries .worries-text_container {
position: relative;
background-image: url(//re-syst.jp/wp-content/themes/resysty/images/onayami-background-image.webp);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
width: 210px;
height: 122px;
display: block;
}
#lp .worries .worries-text_container.--middle {
background-image: url(//re-syst.jp/wp-content/themes/resysty/images/onayami-background-image--middle.webp);
width: 225px;
}
#lp .worries .worries-text_container.--large {
background-image: url(//re-syst.jp/wp-content/themes/resysty/images/onayami-background-image--large.webp);
width: 243px;
}
#lp .worries .worries_box img {
width: 210px;
height: 134px;
object-fit: cover;
}
#lp .worries .worries-text_container p {
position: absolute;
width: 100%;
top: 37%;
left: 50%;
text-align: center;
transform: translate(-50%, -50%);
font-size: 16px;
line-height: 23px;
}
@media screen and (width <= 992px) {
#lp .worries .worries_container {
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
#lp .worries .worries-text_container {
width: 155px;
height: 100px;
}
#lp .worries .worries_box {
gap: 15px;
}
#lp .worries .worries-text_container.--middle {
background-image: url(//re-syst.jp/wp-content/themes/resysty/images/onayami-background-image--middle.webp);
width: 155px;
}
#lp .worries .worries-text_container.--large {
background-image: url(//re-syst.jp/wp-content/themes/resysty/images/onayami-background-image--large.webp);
width: 160px;
}
#lp .worries .worries-text_container p {
top: 37%;
left: 50%;
font-size: 12px;
line-height: 18px;
}
#lp .worries .worries_box img {
width: 155px;
height: 100px;
}
} #lp .about-sanpai .description_container {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
padding: 20px 30px 40px;
border: 3px solid #1C425C;
}
#lp .about-sanpai .description_container h3 {
margin-top: 20px;
font-size: 25px;
font-weight: var(--font-weight600);
}
#lp .about-sanpai .description_container .description_container {
display: flex;
flex-direction: column;
gap: 20px;
}
#lp .about-sanpai .description_container p {
padding-top: 10px;
font-size: 20px;
letter-spacing: 0.11em;
line-height: 29px;
}
@media screen and (width <= 992px) {
#lp .about-sanpai .description_container {
gap: 15px;
padding: 5px 16px 32px;
border: 2px solid #1C425C;
}
#lp .about-sanpai .description_container h3 {
font-size: 18px;
line-height: 27px;
}
#lp .about-sanpai .description_container p {
padding-top: 0;
font-size: 14px;
line-height: 22px;
}
} #lp .company-introduction {
color: #fff;
background-image: url(//re-syst.jp/wp-content/themes/resysty/images/company-introduction-bg-img.webp);
background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: auto;
}
#lp .company-introduction h1 {
font-family: "Noto Serif JP", serif;
font-size: 40px;
text-align: center;
font-weight: 600;
line-height: 55px;
}
#lp .company-introduction p {
font-size: 20px;
letter-spacing: 0.11em;
line-height: 29px;
font-weight: 300;
}
@media screen and (width <= 992px) {
#lp .company-introduction {
background-size: cover;
background-image: url(//re-syst.jp/wp-content/themes/resysty/images/company-introduction-bg-img--sp.webp);
}
#lp .company-introduction h1 {
font-size: 20px;
line-height: 30px;
}
#lp .company-introduction p {
font-size: 14px;
line-height: 22px;
}
} #lp .reason .reason_container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
row-gap: 15px;
}
#lp .reason .reason-box {
width: 472px;
min-height: 484px;
border-color: #1C425C;
border-width: 7px;
}
#lp .reason .reason-box .title_container {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 20px 15px;
background-color: #1C425C;
color: #fff;
font-size: 25px;
font-weight: var(--font-weight700);
letter-spacing: 0.11em;
}
#lp .reason .reason-box span {
font-size: 45px;
}
#lp .reason .reason-box h3 {
width: 100%;
text-align: center;
}
#lp .reason .reason-box .description_container {
display: flex;
flex-direction: column;
gap: 20px;
padding: 25px;
}
#lp .reason .reason-box .description_container p {
letter-spacing: 0.11em;
}
#lp .reason .reason-box img {
width: 100%;
height: 252px;
object-fit: cover;
}
@media screen and (width <= 992px) {
#lp .reason .reason_container {
justify-content: center;
row-gap: 15px;
}
#lp .reason .reason-box {
width: 328px;
min-height: 300px;
}
#lp .reason .reason-box .title_container {
gap: 10px;
padding: 6px 20px 15px;
font-size: 18px;
font-weight: 700;
letter-spacing: 0.11em;
}
#lp .reason .reason-box span {
font-size: 30px;
}
#lp .reason .reason-box .description_container {
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px 16px 32px;
}
#lp .reason .reason-box .description_container p {
font-size: 14px;
line-height: 22px;
}
#lp .reason .reason-box img {
width: 100%;
height: 170px;
}
} #lp .consulting .media_container {
display: flex;
flex-direction: column;
width: 100%;
gap: 10px;
}
#lp .consulting .media {
display: flex;
align-items: center;
gap: 20px;
width: 100%;
padding: 20px 30px;
border-width: 6px;
border-color: #1C425C;
}
#lp .consulting .media h3 {
font-size: 22px;
font-weight: var(--font-weight600);
}
#lp .consulting .media .description_container {
display: flex;
flex-direction: column;
gap: 20px;
}
#lp .consulting .media img {
width: 229px;
height: 173px;
}
#lp .consulting .media p {
font-size: 18px;
}
@media screen and (width <= 992px) {
#lp .consulting .media {
flex-direction: column;
gap: 16px;
padding: 16px;
}
#lp .consulting .media h3 {
font-size: 16px;
}
#lp .consulting .media .description_container {
gap: 16px;
}
#lp .consulting .media p {
font-size: 14px;
line-height: 22px;
}
} #lp .achievements .achievements_container {
display: flex;
flex-direction: column;
gap: 30px;
width: 100%;
}
#lp .achievements .achievements_container > img {
width: 100%;
height: auto;
} #lp .price {
background-color: #F6F6F6;
}
#lp .price .price-list_container {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
width: 100%;
}
#lp .price h3 {
font-size: 25px;
font-weight: var(--font-weight600);
}
#lp .price table {
table-layout: fixed;
width: 100%;
}
#lp .price table, th, td {
border: 2px solid #000;
padding: 20px;
font-weight: var(--font-weight600);
}
#lp .price table th {
background-color: #D9D9D9;
text-align: center;
}
#lp .price table td {
background-color: #fff; }
#lp .price table .forward {
width: 599px;
}
#lp .price table h4 {
font-size: 21px;
font-weight: var(--font-weight600);
padding-bottom: 10px;
}
#lp .price table .forward p {
padding-left: 24px;
line-height: 23px;
font-weight: var(--font-weight500);
}
#lp .price table .forward img {
padding-left: 24px;
width: 80%;
margin-top: 16px;
height: auto;
max-width: 200px;
}
#lp .price table .backward {
text-align: center;
background-color: #FE0;
vertical-align: middle;
}
#lp .price table .backward p {
font-size: 28px;
font-weight: var(--font-weight600);
color: red;
}
#lp .price table .backward small {
display: block;
font-size: 18px;
line-height: 30px;
width: 100%;
text-align: center;
}
#lp .price table .backward img {
width: 80%;
margin-top: 16px;
height: auto;
}
#lp .price table .backward .red-text {
font-weight: var(--font-weight600);
font-size: 16px;
color: red;
}
#lp .price .price-list_container small {
width: 100%;
font-size: 16px;
line-height: 25px;
}
#lp .price .price-list_container > .description {
line-height: 25px;
padding-top: 30px;
padding-bottom: 30px;
}
#lp .price .image-box_container {
display: flex;
position: relative;
width: 100%;
border-color: #000;
border-width: 3px;
border-radius: 15px;
padding-left: 40px;
padding-right: 40px;
}
#lp .price .image-box_container > p {
position: absolute;
background-color: #F6F6F6;
padding: 0 20px;
font-size: 30px;
font-weight: var(--font-weight600);
top: -5px;
left: 50%;
transform: translate(-50%,-50%);
}
#lp .price .image-box_inner {
display: flex;
gap: 40px;
justify-content: center;
width: 100%;
}
#lp .price .image-box {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
width: 286px;
padding: 40px 0 30px;
}
#lp .price .image-box > img {
min-width: 170px;
height: auto;
object-fit: cover;
}
#lp .price .image-box p {
font-size: 20px;
font-weight: var(--font-weight600);
}
@media screen and (width <= 992px) {
#lp .price h3 {
font-size: 18px;
font-weight: 600;
}
#lp .price table, th, td {
border: 1px solid #000;
padding: 20px 10px;
}
#lp .price table th {
font-size: 14px;
}
#lp .price table .forward {
width: 200px;
}
#lp .price table h4 {
font-size: 14px;
font-weight: 600;
}
#lp .price table .forward p {
padding-left: 5px;
font-size: 12px;
line-height: 20px;
font-weight: 400;
}
#lp .price table .backward p {
font-size: 14px;
line-height: 22px;
}
#lp .price table .backward .red-text {
font-size: 12px;
}
#lp .price table .backward small {
font-size: 12px;
line-height: 15px;
}
#lp .price .price-list_container small {
font-size: 12px;
line-height: 15px;
}
#lp .price .price-list_container > .description {
font-size: 14px;
line-height: 22px;
padding-top: 10px;
padding-bottom: 10px;
}
#lp .price .image-box_container {
border: 0 #000 solid;
border-top: 3px #000 solid;
border-radius: 0;
}
#lp .price .image-box_container > p {
font-size: 18px;
}
#lp .price .image-box p {
font-size: 16px;
font-weight: 600;
}
#lp .price .image-box small {
font-size: 12px;
}
#lp .price .section-inner > p {
font-size: 14px;
line-height: 22px;
}
}
@media screen and (width <= 760px) {
#lp .price .image-box_inner {
gap: 10px;
}
#lp .price .image-box {
gap: 10px;
width: 286px;
}
}
@media screen and (width <= 563px) {
#lp .price .image-box_container {
padding: 0;
}
#lp .price .image-box_inner {
overflow-x: scroll;
justify-content: start;
}
.scrollbar::-webkit-scrollbar {
width: 10px;
height: 4px;
}
.scrollbar-thumb-rounded::-webkit-scrollbar-thumb {
border-radius: 0;
}
.scrollbar-thumb-black::-webkit-scrollbar-thumb {
--bg-opacity: 1;
background-color: rgb(167 167 167);
}
} #lp .area .area-box_container {
display: flex;
flex-direction: column;
justify-content: center;
gap: 30px;
}
#lp .area .area-box_container > p {
width: 100%;
text-align: center;
font-size: 22px;
}
#lp .area .area-box {
display: flex;
flex-direction: column;
gap: 13px;
}
#lp .area .area-box h3 {
font-size: 25px;
font-weight: var(--font-weight600);
}
#lp .area .area-box p {
font-size: 18px;
line-height: 25px;
letter-spacing: 0.05em;
}
@media screen and (width <= 992px) {
#lp .area .area-box h3 {
font-size: 20px;
font-weight: 600;
}
#lp .area .area-box p {
font-size: 14px;
line-height: 22px;
}
} #lp .step {
background-color: #F6F6F6;
}
#lp .step .media-container {
display: flex;
flex-direction: column;
gap: 37px;
width: 100%;
}
#lp .step .media {
display: flex;
background-color: #fff;
width: 100%;
position: relative;
padding: 37px 27px 20px;
}
#lp .step .media .title_container {
display: flex;
gap: 20px;
align-items: center;
position: absolute;
top: -20px;
left: 20px;
font-weight: var(--font-weight600);
}
#lp .step .media .title_container span {
color: #0966B3;
font-size: 32px;
}
#lp .step .media .title_container h3 {
font-size: 25px;
}
#lp .step .media .description-container {
display: flex;
gap: 30px;
}
#lp .step .media .description-container > img {
width: 220px;
height: 148px;
}
#lp .step .media .description-container > p {
font-size: 18px;
line-height: 26px;
}
@media screen and (width <= 992px) {
#lp .step .media-container {
padding-top: 15px;
}
#lp .step .media .title_container {
top: -15px;
left: 20px;
font-weight: var(--font-weight600);
}
#lp .step .media .title_container span {
font-size: 25px;
}
#lp .step .media .title_container h3 {
font-size: 18px;
}
#lp .step .media .description-container {
flex-direction: column;
align-items: center;
}
#lp .step .media .description-container > p {
font-size: 14px;
line-height: 23px;
}
} #lp .note .description_container {
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
width: 100%;
padding-top: 20px;
padding-bottom: 20px;
font-size: 18px;
line-height: 26px;
border: #000 3px solid;
}
@media screen and (width <= 992px) {
#lp .note .description_container {
font-size: 14px;
line-height: 22px;
padding-left: 16px;
padding-right: 16px;
}
} #lp .switch-reason {
background-color: #F6F6F6;
}
#lp .switch-reason .switch-box_container {
display: flex;
flex-direction: column;
gap: 37px;
}
#lp .switch-reason .switch-box {
display: flex;
flex-direction: column;
gap: 16px;
font-size: 20px;
}
#lp .switch-reason .switch-box h3 {
font-weight: var(--font-weight600);
}
#lp .switch-reason .switch-box p {
line-height: 1.7em;
}
@media screen and (width <= 992px) {
#lp .switch-reason .switch-box_container {
gap: 25px;
}
#lp .switch-reason .switch-box {
gap: 10px;
font-size: 14px;
}
} #lp .attention {
background-color: #E7E7E7;
}
#lp .attention .description_container {
display: flex;
flex-direction: column;
font-size: 20px;
line-height: 1.7em;
gap: 24px;
}
#lp .attention .image_container {
display: flex;
justify-content: space-between;
}
#lp .attention .image_container > img {
width: 48%;
height: auto;
}
@media screen and (width <= 992px) {
#lp .attention h2 {
font-size: 18px;
}
#lp .attention .description_container {
gap: 16px;
font-size: 14px; }
} #lp .q-and-a .q-and-a_container {
display: flex;
flex-direction: column;
gap: 30px;
width: 100%;
}
#lp .q-and-a .q-and-a_container > span {
width: 100%;
height: 1px;
background-color: #000;
}
#lp .q-and-a .q-and-a-box {
display: flex;
flex-direction: column;
gap: 20px;
padding-left: 15px;
}
#lp .q-and-a .q-and-a-box .q_container {
display: flex;
gap: 25px;
font-size: 25px;
font-weight: var(--font-weight600);
}
#lp .q-and-a .q-and-a-box .q_container > span {
margin-top: -8px;
font-size: 35px;
}
#lp .q-and-a .q-and-a-box .a_container {
display: flex;
gap: 32px;
padding-left: 7px;
font-size: 18px;
}
@media screen and (width <= 992px) {
#lp .q-and-a .q-and-a_container {
gap: 16px;
width: 100%;
}
#lp .q-and-a .q-and-a-box {
gap: 10px;
}
#lp .q-and-a .q-and-a-box .q_container {
gap: 16px;
font-size: 16px;
}
#lp .q-and-a .q-and-a-box .q_container > span {
margin-top: -3px;
font-size: 20px;
}
#lp .q-and-a .q-and-a-box .a_container {
gap: 20px;
font-size: 14px;
padding-left: 5px;
line-height: 22px;
}
} #lp .ceo-introduction {
background-color: #F6F6F6;
}
#lp .ceo-introduction .box_container {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
}
#lp .ceo-introduction .ceo-box {
display: flex;
justify-content: center;
gap: 47px;
width: 100%;
background-color: #fff;
padding: 30px 0;
}
#lp .ceo-introduction .ceo-box > img {
width: 245px;
height: 245px;
}
#lp .ceo-introduction .ceo-box .description_container {
display: flex;
flex-direction: column;
gap: 20px;
}
#lp .ceo-introduction .ceo-box .description_container h3 {
font-size: 25px;
font-weight: var(--font-weight600);
}
#lp .ceo-introduction .ceo-box .description_container p {
font-size: 18px;
line-height: 25px;
}
#lp .ceo-introduction .message-box {
display: flex;
flex-direction: column;
gap: 30px;
background-color: #fff;
font-size: 18px;
padding: 30px 60px 60px;
}
#lp .ceo-introduction .message-box h3 {
width: 100%;
font-size: 30px;
font-weight: var(--font-weight600);
text-align: center;
}
#lp .ceo-introduction .message-box h4 {
font-size: 20px;
font-weight: var(--font-weight600);
}
#lp .ceo-introduction .message-box p {
padding-left: 20px;
line-height: 28px;
}
@media screen and (width <= 992px) {
#lp .ceo-introduction .ceo-box {
flex-direction: column;
align-items: center;
padding-left: 16px;
padding-right: 16px;
}
#lp .ceo-introduction .ceo-box .description_container h3 {
font-size: 16px;
}
#lp .ceo-introduction .ceo-box .description_container p {
font-size: 14px;
line-height: 22px;
}
#lp .ceo-introduction .message-box {
gap: 20px;
padding: 20px 16px 30px;
}
#lp .ceo-introduction .message-box h3 {
font-size: 23px;
}
#lp .ceo-introduction .message-box h4 {
font-size: 16px;
line-height: 23px;
}
#lp .ceo-introduction .message-box p {
padding-left: 10px;
font-size: 14px;
line-height: 22px;
}
} #lp .resion {
background-color: #f6f6f6;
}
#lp .resion .description_container {
display: flex;
flex-direction: column;
gap: 12px;
background-color: #fff;
padding: 35px 70px
}
#lp .resion h3 {
font-size: 20px;
font-weight: var(--font-weight600);
}
#lp .resion p {
font-size: 18px;
line-height: 27px;
}
@media screen and (width <= 992px) {
#lp .resion .description_container {
padding: 25px 16px
}
#lp .resion h3 {
font-size: 18px;
}
#lp .resion p {
font-size: 14px;
line-height: 22px;
}
}  #lp .cv-area {
background-color: #E9F3FA;
}
#lp .cv-area > .section-inner > p {
width: 100%;
text-align: center;
}
#lp .cv-area .annotation {
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding-top: 38px;
padding-bottom: 38px;
font-size: 25px;
font-weight: 400;
letter-spacing: 0.11em;
line-height: 35px;
text-align: center;
}
#lp .cv-area .cv-button_container {
display: flex;
flex-direction: column;
gap: 35px;
width: 100%;
}
#lp .cv-area .cv-button_inner {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
#lp .cv-area .cv-button-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
}
#lp .cv-area .cv-button-box > p {
font-size: 20px;
}
#lp .cv-area .cv-button {
display: flex;
justify-content: space-between;
align-items: center;
width: 436.96px;
height: 115px;
padding-left: 24px;
padding-right: 15px;
color: white;
box-shadow: 1px 5px 5px 0 rgb(0 0 0 / 40%);
border-radius: 6px;
}
#lp .cv-area .cv-button.--orange {
background: linear-gradient(to right, #FF9D23, #FFBE19);
}
#lp .cv-area .cv-button.--green {
background: #00C300;
}
#lp .cv-area .cv-button.--blue {
background: linear-gradient(to right, #005BAC, #54C3F1);
}
#lp .cv-area .cv-button > .icon {
width: 65px;
height: auto;
}
#lp .cv-area .cv-button > .arrow--nonStick {
width: 17px;
}
#lp .cv-area .cv-button .text_continer {
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
font-size: 23px;
font-weight: var(--font-weight700);
padding-bottom: 5px;
}
#lp .cv-area .cv-button.--orange .text_continer p {
font-size: 37px;
letter-spacing: 0.09em;
}
#lp .cv-area .cv-button .text_continer span {
font-size: 45px;
}
#lp .cv-area .cv-button .text_continer small {
font-size: 18px;
font-weight: 400;
}
@media screen and (width <= 992px) {
#lp .cv-area > .section-inner > p {
font-size: 12px;
}
#lp .cv-area .cv-button_container {
gap: 25px;
width: 100%;
}
#lp .cv-area .annotation {
padding: 16px;
font-size: 14px;
line-height: 20px;
width: 100%;
letter-spacing: 0;
}
#lp .cv-area .cv-button_inner {
flex-direction: column;
justify-content: space-between;
gap: 25px;
}
#lp .cv-area .cv-button-box > p {
font-size: 16px;
}
#lp .cv-area .cv-button {
width: 328px;
height: 75px;
padding-left: 16px;
padding-right: 10px;
}
#lp .cv-area .cv-button > .icon {
width: 36px;
}
#lp .cv-area .cv-button > .arrow--nonStick {
width: 15px;
}
#lp .cv-area .cv-button .text_continer {
gap: 7px;
font-size: 23px;
padding-bottom: 5px;
}
#lp .cv-area .cv-button.--orange .text_continer p {
font-size: 25px;
}
#lp .cv-area .cv-button .text_continer span {
font-size: 30px;
}
#lp .cv-area .cv-button .text_continer small {
font-size: 14px;
}
} #lp .campaign-area {
background-color: #E9F3FA;
}
#lp .campaign-area .section-inner {
gap: 20px;
padding-bottom: 0;
}
#lp .campaign-area .campaign-card {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
background-image: url(//re-syst.jp/wp-content/themes/resysty/images/campaign-card-background.webp);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
padding-top: 15px;
padding-bottom: 25px;
gap: 10px;
}
#lp .campaign-area .campaign-card h2 {
font-family: "Noto Sans JP", sans-serif;
color: red;
font-size: 30px;
font-weight: var(--font-weight700);
text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
-1px 1px 0 #FFF, 1px -1px 0 #FFF,
0 1px 0 #FFF,  0-1px 0 #FFF,
-1px 0 0 #FFF, 1px 0 0 #FFF;
}
#lp .campaign-area .campaign-card h2 > span {
text-decoration: underline;
}
#lp .campaign-area .campaign-card .description_container {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
#lp .campaign-area .campaign-card .description_container > small {
font-size: 18px;
}
#lp .campaign-area .campaign-card .description_container > small > strong {
font-size: 20px;
}
#lp .campaign-area .campaign-card .main-text_container {
display: flex;
flex-direction: column;
align-items: end;
}
#lp .campaign-area .campaign-card .main-text_container > p {
font-size: 25px;
font-weight: var(--font-weight700);
text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
-1px 1px 0 #FFF, 1px -1px 0 #FFF,
0 1px 0 #FFF,  0-1px 0 #FFF,
-1px 0 0 #FFF, 1px 0 0 #FFF;
}
#lp .campaign-area .campaign-card .main-text_container > p > span {
font-size: 65px;
color: red;
}
#lp .campaign-area .campaign-card .main-text_container > em {
font-style: normal;
color: red;
font-weight: var(--font-weight700);
text-shadow:0.5px 0.5px 0 #FFF, -0.5px -0.5px 0 #FFF,
-0.5px 0.5px 0 #FFF, 0.5px -0.5px 0 #FFF,
0 0.5px 0 #FFF,  0-0.5px 0 #FFF,
-0.5px 0 0 #FFF, 0.5px 0 0 #FFF;
}
#lp .campaign-area .attention_container {
font-size: 12px;
}
@media screen and (width <= 992px) {
#lp .campaign-area .section-inner {
gap: 10px;
}
#lp .campaign-area .campaign-card {
background-size: cover;
padding-left: 16px;
padding-right: 16px;
gap: 20px;
background-image: url(//re-syst.jp/wp-content/themes/resysty/images/campaign-card-background--sp.webp);
}
#lp .campaign-area .campaign-card h2 {
font-size: 20px;
line-height: 25px;
}
#lp .campaign-area .campaign-card .description_container > small {
font-size: 14px;
text-align: center;
}
#lp .campaign-area .campaign-card .description_container > small > strong {
font-size: 16px;
}
#lp .campaign-area .campaign-card .main-text_container {
gap: 5px;
}
#lp .campaign-area .campaign-card .main-text_container > p {
font-size: 22px;
text-align: center;
}
#lp .campaign-area .campaign-card .main-text_container > p > span {
font-size: 35px;
}
#lp .campaign-area .campaign-card .main-text_container > em {
width: 100%;
font-size: 14px;
text-align: center;
}
#lp .campaign-area .attention_container {
font-size: 10px;
}
} #cv-footer {
background: rgb(255 255 255 / 90%);
display: flex;
gap: 9px;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: 9999;
padding: 12px 5px; } #cv-footer.hidden {
transform: translateY(100%);
opacity: 0; }
#cv-footer > p {
font-size: 14px;
color: #454545;
text-align: center;
}
#cv-footer .button_container.--sp {
display: none;
}
#cv-footer .button_container.--pc {
display: flex;
justify-content: space-between;
gap: 10px;
width: 960px;
}
#cv-footer .button_container.--pc .button {
display: flex;
gap: 10px;
min-width: 113px;
width: 49.5%;
color: #fff;
font-size: 16px;
font-weight: 400;
align-items: center;
justify-content: space-around;
padding-top: 7px;
padding-bottom: 7px;
border-radius: 6px;
box-shadow: 1px 5px 5px rgb(0 0 0 / 20%);
position: relative;
}
#cv-footer .button_container.--pc .button > .text_container {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
#cv-footer .button_container.--pc .button > .text_container > p {
font-weight: var(--font-weight600);
}
#cv-footer .button_container.--pc .button > .arrow--nonStick {
height: auto;
width: 17px;
right: 10px
}
#cv-footer .button_container.--pc .button.--phone {
background: linear-gradient(to right, #FF9D23, #FFBE19);
}
#cv-footer .button_container.--pc .button.--phone > .icon {
width: 40px;
height: 40px;
}
#cv-footer .button_container.--pc .button.--phone > .text_container > p {
font-size: 26px;
}
#cv-footer .button_container.--pc .button.--line {
background-color: #00C300;
}
#cv-footer .button_container.--pc .button.--line > .icon {
width: 40px;
height: 40px;
}
#cv-footer .button_container.--pc .button.--line > .text_container > p {
font-size: 22px;
}
#cv-footer .button_container.--pc .button.--mail {
background:linear-gradient(to right, #005BAC, #54C3F1);;
}
#cv-footer .button_container.--pc .button.--mail > .icon {
width: 40px;
height: 40px;
}
#cv-footer .button_container.--pc .button.--mail > .text_container > p {
font-size: 22px;
}
@media screen and (width <= 992px) {
#cv-footer {
justify-content: space-around;
padding: 12px 5px;
}
#cv-footer > p {
font-size: 12px;
}
#cv-footer .button_container.--pc {
display: none;
}
#cv-footer .button_container.--sp {
display: flex;
justify-content: space-between;
gap: 10px;
padding-left: 16px;
padding-right: 16px;
width: 100%;
}
#cv-footer .button_container.--sp .button {
display: flex;
gap: 4px;
min-width: 113px;
width: 100%;
color: #fff;
font-size: 14px;
font-weight: 500;
align-items: center;
justify-content: space-around;
padding: 7px;
border-radius: 6px;
box-shadow: 1px 5px 5px rgb(0 0 0 / 20%);
}
#cv-footer .button_container.--sp .button > .arrow--nonStick {
height: auto;
width: 11px;
}
#cv-footer .button_container.--sp .button.--phone {
background: linear-gradient(to right, #FF9D23, #FFBE19);
letter-spacing: 0.1em;
}
#cv-footer .button_container.--sp .button.--phone > .icon {
width: 21px;
height: 21px;
}
#cv-footer .button_container.--sp .button.--line {
background-color: #00C300;
}
#cv-footer .button_container.--sp .button.--line > .icon {
width: 23px;
height: 23px;
}
#cv-footer .button_container.--sp .button.--mail {
background:linear-gradient(to right, #005BAC, #54C3F1);;
}
#cv-footer .button_container.--sp .button.--mail > .icon {
width: 19px;
height: 19px;
}
}  #lp-page-contact {
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
width: 100%;
}
#lp-page-contact section {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
#lp-page-contact .section-inner {
display: flex;
flex-direction: column;
} #lp-page-contact .main-visual {
display: flex;
gap: 10px;
flex-direction: column;
align-items: center;
color: #fff;
font-weight: var(--font-weight600);
padding-top: 40px;
padding-bottom: 40px;
background-repeat: no-repeat;
background-size: cover;
}
#lp-page-contact .main-visual.--line {
background-color: #00C300;
}
#lp-page-contact .main-visual.--mail {
background-image: url(//re-syst.jp/wp-content/themes/resysty/images/contact-mail-mvbg.webp);
}
#lp-page-contact .main-visual h1 {
font-size: 40px;
text-align: center;
}
#lp-page-contact .main-visual p {
font-size: 25px;
}
@media screen and (width <= 992px) {
#lp-page-contact .main-visual {
padding-top: 40px;
padding-bottom: 40px;
}
#lp-page-contact .main-visual h1 {
font-size: 25px;
line-height: 32px;
}
#lp-page-contact .main-visual p {
font-size: 16px;
}
} #lp-page-contact .contents .section-inner {
width: 960px;
padding: 50px 0 65px;
}
#lp-page-contact .contents h2 {
font-size: 25px;
font-weight: var(--font-weight600);
padding-left: 10px;
padding-top: 25px;
padding-bottom: 30px;
}
#lp-page-contact .contents h2::after {
content: "";
width: 100%;
height: 1px;
margin-top: 10px;
margin-left: -10px;
background-color: black;
display: block;
}
#lp-page-contact .contents .section-inner > h3 {
font-size: 25px;
font-weight: var(--font-weight600);
padding-left: 15px;
padding-top: 13px;
padding-bottom: 13px;
margin-top: 35px;
margin-bottom: 20px;
margin-left: 10px;
border-left: #023067 solid 13px;
}
#lp-page-contact .contents p {
font-size: 18px;
line-height: 25px;
padding-left: 10px;
}
#lp-page-contact .contents p > a  {
color: #00e;
} #lp-page-contact .contents .box_container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
row-gap: 20px;
}
#lp-page-contact .contents .box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #D9D9D9;
width: 49%;
padding-top: 40px;
padding-bottom: 40px;
gap: 20px;
}
#lp-page-contact .contents .box > h3 {
font-size: 22px;
font-weight: var(--font-weight700);
}
#lp-page-contact .contents .box > strong {
font-size: 18px;
line-height: 1.3em;
text-align: center;
} #lp-page-contact .contents .line-box {
display: flex;
gap: 28px;
padding-bottom: 20px;
padding-left: 10px;
}
#lp-page-contact .contents .line-box > img {
width: 176px;
height: 177px;
}
#lp-page-contact .contents .line-button_container {
display: flex;
flex-direction: column;
gap: 22px;
}
#lp-page-contact .contents .line-button_container > p {
font-size: 25px;
color: #00C300;
}
#lp-page-contact .contents .line-button_container > a, img {
width: 408px;
height: 130px;
} #lp-page-contact .contents .form_container .button_container {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
#lp-page-contact .contents .form_container .button_container button {
background-color: #fff;
color: #535a62;
border-width: 2px;
border-color: #535a62;
border-radius: 6px;
padding: 8px 15px;
font-weight: 600;
}
#lp-page-contact .contents #a-btn {
color: #535a62;
background-color: #fff;
}
#lp-page-contact .contents #a-btn.is-active {
color: #fff;
background-color: #535a62;
}
#lp-page-contact .contents #b-btn {
color: #535a62;
background-color: #fff;
}
#lp-page-contact .contents #b-btn.is-active {
color: #fff;
background-color: #535a62;
}
#lp-page-contact .contents #c-btn {
color: #535a62;
background-color: #fff;
}
#lp-page-contact .contents #c-btn.is-active {
color: #fff;
background-color: #535a62;
}
#lp-page-contact .contents #d-btn {
color: #535a62;
background-color: #fff;
}
#lp-page-contact .contents #d-btn.is-active {
color: #fff;
background-color: #535a62;
}
#lp-page-contact .contents .formA {
display: none;
}
#lp-page-contact .contents .formA.is-active {
display: block;
}
#lp-page-contact .contents .formB {
display: none;
}
#lp-page-contact .contents .formB.is-active {
display: block;
}
#lp-page-contact .contents .formC {
display: none;
}
#lp-page-contact .contents .formC.is-active {
display: block;
}
#lp-page-contact .contents .formD {
display: none;
}
#lp-page-contact .contents .formD.is-active {
display: block;
}
#lp-page-contact .contents .form_container {
background-color: #ecedef;
padding: 30px 40px;
margin-top: 30px;
margin-bottom: 20px;
}
#lp-page-contact .contents .form_container .contact-type {
display: flex;
justify-content: space-between;
align-items: center;
}
#lp-page-contact .contents .form_container > small {
display: block;
margin-top: 10px;
width: 100%;
text-align: right;
}
#lp-page-contact .contents .form_container .contact-type > h3 {
font-size: 18px;
font-weight: var(--font-weight600);
padding-bottom: 13px;
}
#lp-page-contact .contents .form_container .contact-type .button_container {
width: 600px;
}
#lp-page-contact .contents .form_container .contact-type .button_container .button {
font-weight: var(--font-weight600);
}
#lp-page-contact .contents .form_container h3 > em {
font-style: normal; 
background-color: white;
font-size: 14px;
color: black;
padding: 1.5px 6px 2px;
margin-right: 10px;
margin-top: auto;
margin-bottom: auto;
}
#lp-page-contact .contents form {
padding: 0;
}
#lp-page-contact .contents .wpcf7-form {
padding-top: 25px;
padding-left: 0;
padding-right: 0;
gap: 20px;
}
#lp-page-contact .contents .form-item > p {
padding-left: 0;
font-size: 18px;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#lp-page-contact .contents .form-item > p > label {
display: block;
padding-left: 0;
font-size: 18px;
font-weight: var(--font-weight600);
}
#lp-page-contact .contents .form-item > p > span {
width: 600px;
}
#lp-page-contact .contents .form-item > p > span > input {
font-size: 18px;
gap: 20px;
font-weight: var(--font-weight600);
width: 100%;
}
#lp-page-contact .contents .form-item > p > span > textarea {
font-weight: var(--font-weight600);
width: 100%;
}
#lp-page-contact .contents .checkbox_container {
display: flex;
flex-direction: column;
align-items: start;
gap: 10px;
}
#lp-page-contact .contents .checkbox_container .checklist-title {
margin-top: 10px;
margin-bottom: 5px;
font-size: 18px;
font-weight: var(--font-weight600);
width: 100%;
text-align: center;
}
#lp-page-contact .contents .checkbox_container p {
width: 100%;
}
#lp-page-contact .contents .checkbox_container p > small {
display: block;
width: 100%;
text-align: center;
}
#lp-page-contact .contents .wpcf7 .submit-button_container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#lp-page-contact .contents .wpcf7 .submit {
width: 100%;
height: auto;
margin-top: 40px;
padding: 20px 30px;
}
#lp-page-contact .contents .wpcf7 .submit-button_container small {
display: block;
width: 100%;
text-align: center;
}
@media screen and (width <= 992px) {
#lp-page-contact .contents .section-inner {
width: 100%;
padding: 15px 16px 30px;
}
#lp-page-contact .contents h2 {
font-size: 18px;
padding-top: 25px;
padding-bottom: 30px;
}
#lp-page-contact .contents .section-inner > h3 {
font-size: 18px;
font-weight: var(--font-weight600);
padding-left: 10px;
padding-top: 8px;
padding-bottom: 8px;
margin-top: 35px;
margin-bottom: 20px;
margin-left: 0;
border-left: #023067 solid 8px;
}
#lp-page-contact .contents p {
font-size: 14px;
line-height: 22px;
padding-left: 0;
} #lp-page-contact .contents .box {
width: 100%;
}
#lp-page-contact .contents .box > h3 {
font-size: 20px;
font-weight: var(--font-weight700);
}
#lp-page-contact .contents .box > strong {
font-size: 16px;
line-height: 1.3em;
text-align: center;
} #lp-page-contact .contents .line-box {
gap: 10px;
}
#lp-page-contact .contents .line-box > img {
width: 92px;
height: 92px;
}
#lp-page-contact .contents .line-button_container {
gap: 6px;
}
#lp-page-contact .contents .line-button_container > a, img {
width: 200px;
height: 65px;
}
#lp-page-contact .contents .line-button_container > p {
font-size: 12px;
color: #00C300;
} #lp-page-contact .contents .form_container {
padding: 10px;
}
#lp-page-contact .contents .form_container .button_container button {
width: 100%;
}
#lp-page-contact .contents .form_container .contact-type {
flex-direction: column;
align-items: start;
}
#lp-page-contact .contents .form_container > small {
text-align: left;
}
#lp-page-contact .contents .form_container h3 {
margin-top: 10px;
font-size: 17px;
}
#lp-page-contact .contents .form_container .contact-type .button_container {
width: 100%;
}
#lp-page-contact .contents form {
align-items: start;
}
#lp-page-contact .contents .form-item > p {
padding-left: 0;
font-size: 17px;
flex-direction: column;
justify-content: space-between;
align-items: start;
}
#lp-page-contact .contents .form-item > p > label {
font-size: 17px;
}
#lp-page-contact .contents .form-item > p > span {
width: 100%;
font-size: 17px;
}
#lp-page-contact .contents .form-item > p > span > input {
font-size: 17px;
}
#lp-page-contact .contents .form-item > p > span > textarea {
min-height: 100px;
height: 120px;
font-size: 17px;
}
#lp-page-contact .contents .form-item .wpcf7-list-item {
margin-left: 0;
}
#lp-page-contact .contents .checkbox_container .checklist-title {
margin-top: 20px;
font-size: 17px;
width: 100%;
text-align: center;
}
#lp-page-contact .contents .wpcf7 .submit-button_container {
width: 100%;
}
#lp-page-contact .contents .wpcf7 .submit-button_container > p {
width: 100%;
}
#lp-page-contact .contents .wpcf7 .submit {
font-size: 17px;
letter-spacing: 0.1em;
width: 100%;
}
}