:root {
/* カラーパレット */
--c-font: #181c1f;
--c-black: #000;
--c-white: #fff;
--c-point-color: #e60012;
--c-gray: #efefef;
--c-gray-light: #f8f4f4;
--inner: 1080px;
--inner-gutter: 20px;
/* フォント */
--ff-body: "Noto Sans JP", sans-serif;
--ff-title: "Noto Sans JP", sans-serif;
--ff-en: "Poppins", sans-serif;
/* スペーサー */
--space-unit: 16px;
--space-xs: 24px;
--space-sm: 32px;
--space-md: 48px;
--space-lg: 64px;
--space-xl: 96px;
--space-xxl: 150px;
}
body {
font-family: var(--ff-body);
}
h1 {
font-size: clamp(24px, 6vw, 40px);
font-weight: bold;
line-height: 1.2;
letter-spacing: 0.03em;
margin: 0;
}
h2 {
font-size: clamp(20px, 5vw, 32px);
font-weight: bold;
line-height: 1.3;
letter-spacing: 0.03em;
margin: 0;
}
h3 {
font-size: clamp(18px, 4.5vw, 24px);
font-weight: 600;
line-height: 1.5;
letter-spacing: 0;
margin: 0;
}
h4 {
font-size: clamp(16px, 4vw, 18px);
font-weight: 600;
line-height: 1.5;
letter-spacing: 0;
margin: 0;
}
p {
font-size: clamp(14px, 3.5vw, 16px);
font-weight: normal;
line-height: 1.9;
letter-spacing: 0.01em;
}
a:hover,
a:active {
text-decoration: none;
}
a {
color: var(--c-font);
}
.rc-text-small {
font-size: clamp(12px, 3vw, 14px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.03em;
}
.rc-text-red {
color: #e60012;
}
.rc-text-ink {
transition: all 0.4s;
display: block;
font-size: 13px;
font-weight: normal;
letter-spacing: 0;
color: #e60012;
text-decoration: underline;
}
.rc-text-ink:hover {
opacity: 0.6;
}
.c-inner {
box-sizing: content-box;
max-width: var(--inner);
margin-left: auto;
margin-right: auto;
padding-right: var(--inner-gutter);
padding-left: var(--inner-gutter);
}
.rc-page-header {
background-image: url(../img/pic-page-header01.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
text-align: center;
color: var(--c-white);
width: 100%;
height: 400px;
}
.rc-page-header--entry {
background-image: url(../img/pic-page-header02.jpg);
}
.rc-page-header--appeal {
background-image: url(../img/pic-page-header03.jpg);
}
.rc-page-header__inner {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.rc-page-heading__sub {
display: block;
font-family: var(--ff-en);
font-weight: bold;
font-size: 16px;
letter-spacing: 0.03em;
line-height: 1.2;
margin-bottom: var(--space-unit);
}
/* タイトル */
.rc-heading-primary {
display: flex;
align-items: center;
column-gap: 35px;
font-size: clamp(18px, 4.5vw, 24px);
font-weight: 600;
line-height: 1.3;
letter-spacing: 0;
}
.rc-heading-primary::before {
content: "";
display: block;
width: 1px;
height: 50px;
background-color: var(--c-point-color);
transform: skewX(-30deg);
margin-left: 20px;
}
.rc-heading-tertiary {
background-color: #fff2f2;
padding: 9px 0px;
text-align: center;
font-size: clamp(18px, 4.5vw, 24px);
font-weight: 600;
letter-spacing: 0;
line-height: 1.3;
}
.rc-heading-quaternary {
display: flex;
column-gap: 8px;
align-items: first baseline;
font-weight: bold;
font-size: 18px;
letter-spacing: 0;
line-height: 1.3;
}
.rc-heading-quaternary.--number {
column-gap: 18px;
}
.rc-heading-quaternary.--number::before {
display: none;
}
.rc-heading-quaternary.--number span {
font-weight: bold;
border: 1px solid var(--c-point-color);
padding: 7px 12px;
}
.rc-heading-quaternary::before {
content: "";
display: block;
background: url('data:image/svg+xml,');
background-size: 9px 12px;
background-repeat: no-repeat;
width: 9px;
height: 12px;
aspect-ratio: 9/12;
}
.rc-heading-quaternary span {
margin-right: 0;
font-weight: bold;
font-size: clamp(16px, 4vw, 18px);
letter-spacing: 0;
color: var(--c-point-color);
}
.rc-hm-mv {
overflow: hidden;
padding:0 0 1% 0;
}
.rc-hm-mv__inner {
position: relative;
}
.rc-hm-mv__title-box {
position: absolute;
top: 50%;
left: 20px;
right: 20px;
transform: translateY(-50%);
color: var(--c-white);
}
.rc-hm-mv__title {
font-size: clamp(32px, 6vw, 72px);
font-style: italic;
line-height: 1.2;
letter-spacing: 0.03em;
transform: skewX(-10deg);
text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.rc-hm-mv-slider {
margin: 0 calc(50% - 50vw);
width: 100vw !important;
height:83vh;
overflow: hidden;
}
.rc-hm-mv-slider-item {
width: 100% !important;
aspect-ratio: 1400 / 660;
overflow: hidden;
}
.rc-hm-mv-slider img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1);
transition: transform 5s ease-out; /* ズーム用 */
}
.rc-hm-business-box {
display: grid;
grid-template-columns: minmax(676px, 1fr) 1fr;
gap: 44px;
}
.rc-hm-business__inner {
--inner: 1240px;
}
.rc-hm-business-list__item-inner {
transition: all 0.4s;
display: flex;
align-items: center;
justify-content: space-between;
font-size: clamp(18px, 4.5vw, 24px);
padding-top: 20px;
padding-bottom: 20px;
font-weight: 600;
letter-spacing: 0;
line-height: 1.3;
border-bottom: 1px solid #efefef;
cursor: pointer;
}
.rc-hm-business-list__item .rc-arrow__btn-link {
transition: all 0.4s;
margin-top: 0;
opacity: 0;
}
@media (hover: hover) {
.rc-hm-business-list__item:hover {
--c-font: var(--c-point-color);
color: var(--c-point-color);
border-color: var(--c-point-color);
}
}
.rc-hm-business-list__item:hover .rc-arrow__btn-link {
opacity: 1;
}
.rc-hm-business-list__text {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 34px;
}
.rc-hm-business-list__text::before {
content: "";
display: block;
width: 37px;
height: 33px;
mask-image: url('data:image/svg+xml,');
mask-position: left;
mask-repeat: no-repeat;
mask-size: 37px 33px;
background-color: var(--c-font);
}
.rc-hm-business-list__text.--machinery::before {
mask-image: url('data:image/svg+xml,');
mask-position: left;
mask-repeat: no-repeat;
mask-size: 33px 31px;
background-color: var(--c-font);
}
.rc-hm-business-list__text.--electrical::before {
mask-image: url('data:image/svg+xml,');
mask-position: left;
mask-repeat: no-repeat;
mask-size: 35px 30px;
background-color: var(--c-font);
}
.rc-hm-business-list__text.--construction::before {
mask-image: url('data:image/svg+xml,');
mask-position: left;
mask-repeat: no-repeat;
mask-size: 29px 32px;
background-color: var(--c-font);
}
.rc-hm-business-list__text.--transport::before {
mask-image: url('data:image/svg+xml,');
mask-position: left;
mask-repeat: no-repeat;
mask-size: 30px 36px;
background-color: var(--c-font);
}
.rc-hm-business-list-toggle {
display: contents;
}
.rc-hm-business-img-box {
position: relative;
}
.rc-hm-business-img-box__item {
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
}
.rc-hm-feature {
background-color: var(--c-gray-light);
}
.rc-hm-feature__inner {
--inner: 1200px;
padding-top: 48px;
padding-bottom: 64px;
}
.rc-hm-feature-card {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px 73px;
text-align: center;
}
.rc-hm-feature-card__header {
font-size: 18px;
font-weight: 600;
letter-spacing: 0;
line-height: 1.5;
}
.rc-hm-feature-card__header::after {
display: block;
content: "";
width: 54px;
height: 1px;
background-color: var(--c-point-color);
margin-inline: auto;
}
.rc-hm-feature-card__main {
font-size: clamp(20px, 5vw, 32px);
font-weight: bold;
line-height: 1.3;
letter-spacing: 0.03em;
margin-top: 16px;
margin-bottom: 6px;
}
.rc-hm-feature-card__main strong {
font-style: italic;
font-family: var(--ff-en);
font-weight: 500;
font-size: 88px;
letter-spacing: -0.05em;
line-height: 1.2;
color: var(--c-point-color);
}
.rc-hm-feature-card__item {
background-color: var(--c-white);
padding: 16px 10px 14px;
}
.rc-hm-feature-card__item:nth-of-type(1) {
background-image: url(../img/icon-fe01.svg);
background-repeat: no-repeat;
background-position: top center;
background-size: 360px 227px;
}
.rc-hm-feature-card__item:nth-of-type(2) {
background-image: url(../img/icon-fe02.svg);
background-repeat: no-repeat;
background-position: top center;
background-size: 360px 227px;
}
.rc-hm-feature-card__item:nth-of-type(3) {
background-image: url(../img/icon-fe03.svg);
background-repeat: no-repeat;
background-position: top center;
background-size: 360px 227px;
}
.rc-hm-feature-card__item:nth-of-type(4) {
background-image: url(../img/icon-fe04.svg);
background-repeat: no-repeat;
background-position: top center;
background-size: 360px 227px;
}
.rc-hm-feature-card__item:nth-of-type(5) {
background-image: url(../img/icon-fe05.svg);
background-repeat: no-repeat;
background-position: top center;
background-size: 360px 227px;
}
.rc-hm-feature-card__item:nth-of-type(6) {
background-image: url(../img/icon-fe06.svg);
background-repeat: no-repeat;
background-position: top center;
background-size: 360px 227px;
}
.rc-mv {
position: relative;
background-image: url(../img/pic-rc-mv01.jpg);
background-size: 1400px 733px;
background-repeat: no-repeat;
background-position: bottom center;
width: 100%;
height: 775px;
}
.rc-mv--02 {
background-image: url(../img/pic-rc-mv02.jpg);
}
.rc-mv--03 {
background-image: url(../img/pic-rc-mv03.jpg);
}
.rc-mv--04 {
background-image: url(../img/pic-rc-mv04.jpg);
}
.rc-mv__inner {
position: relative;
--inner: 1248px;
height: 100%;
}
.rc-mv__sub-title {
font-weight: 600;
font-size: 18px;
}
.rc-mv__title-box {
position: absolute;
top: 42%;
left: 110px;
transform: translateY(-50%);
}
.rc-mv__title {
line-height: 1.7;
font-feature-settings: "palt";
letter-spacing: 0.03em;
margin-top: 24px;
}
.rc-mv__title span {
position: relative;
color: var(--c-white);
padding: 0 10px;
z-index: 2;
}
.rc-mv__title span::before {
content: "";
position: absolute;
width: 100%;
height: 58px;
background-color: var(--c-point-color);
left: 0;
z-index: -1;
top: 6%;
}
.rc-mv__title span::after {
content: "";
position: absolute;
width: 100%;
height: 56px;
background-color: var(--c-point-color);
left: 0;
z-index: 2;
top: 6%;
animation-name: text-revealer;
}
.rc-mv__title span {
--animation-delay: var(--delay, 0);
--animation-duration: var(--duration, 800ms);
--animation-iterations: var(--iterations, 1);
position: relative;
animation-name: clip-text;
white-space: nowrap;
}
.rc-mv__title span,
.rc-mv__title span::after {
animation-delay: var(--animation-delay, 2s);
animation-iteration-count: var(--iterations, 1);
animation-duration: var(--duration, 800ms);
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
@keyframes text-revealer {
0%,
50% {
transform-origin: 0 50%;
}
60%,
100% {
transform-origin: 100% 50%;
}
60% {
transform: scaleX(1);
}
100% {
transform: scaleX(0);
}
}
@keyframes clip-text {
0% {
clip-path: inset(0 100% 0 0);
}
100% {
clip-path: inset(0 0 0 0);
}
}
.rc-mv__num {
display: grid;
grid-template-columns: auto;
width: fit-content;
position: absolute;
top: 40px;
right: 60px;
}
.rc-mv__num-header {
font-weight: 500;
font-family: var(--ff-en);
color: var(--c-point-color);
font-size: 200px;
line-height: 1;
letter-spacing: 0;
}
.rc-mv__num-main {
font-weight: 500;
font-family: var(--ff-en);
font-size: 32px;
text-align: right;
letter-spacing: 0.03em;
line-height: 1;
transform: translateX(24px);
}
.rc-mv__name {
position: absolute;
right: 100px;
bottom: 134px;
}
.rc-mv__name-header {
position: relative;
color: var(--c-point-color);
border: 1px solid var(--c-point-color);
display: inline-block;
padding: 0px 20px;
transform: skewX(-30deg);
}
.rc-mv__name-header span {
transform: skewX(30deg);
display: block;
}
.rc-mv__name-main {
font-weight: 500;
}
.rc-job {
padding-top: 35px;
padding-bottom: 28px;
background-color: var(--c-gray-light);
}
.rc-job__inner {
--inner: 980px;
display: flex;
flex-wrap: wrap;
column-gap: 76px;
row-gap: 16px;
}
.rc-int-col {
overflow: hidden;
}
.rc-int-col__inner {
--inner: 1400px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 60px;
}
.rc-int-col__text-box {
flex: 0 1 550px;
}
.rc-int-col__text-box--left {
margin-left: 100px;
}
.rc-int-col__text-box--right {
margin-right: 100px;
}
.rc-int-col__img {
position: relative;
width: 800px; /* SVGと同じサイズ */
max-width: 100%;
height: 100%;
aspect-ratio: 800/445;
margin-top: 48px;
margin-bottom: 48px;
}
.rc-int-col__img--right {
flex: 0 1 800px;
margin-right: -150px;
}
.rc-int-col__img--left {
flex: 0 1 800px;
margin-left: -200px;
}
.rc-int-col__img img {
position: relative;
z-index: 1;
height: 100%;
width: 100%;
object-fit: cover;
clip-path: polygon(67.87% 100%, 0% 100%, 32.13% 0%, 100% 0%);
}
.rc-int-col__img::after {
position: absolute;
top: -45px;
content: "";
display: block;
width: 800px;
aspect-ratio: 800 / 540;
background:
/* 上に重ねる繰り返し線 */
repeating-linear-gradient(120deg, #efefef, #efefef 6px, transparent 6px, transparent 14px),
/* 下に敷くグラデーション */
linear-gradient(
90deg,
rgba(227, 227, 227, 0.65) 0%,
rgba(234, 234, 234, 0) 86%,
rgba(234, 234, 234, 0) 100%
);
background-size: auto;
background-repeat: repeat;
clip-path: polygon(61% 100%, 0% 100%, 39% 0%, 100% 0%);
}
.rc-int-col__img--left::after {
right: 45px;
}
.rc-int-col__img--right::after {
left: 45px;
}
.rc-int-col__text-center {
margin-left: -200px;
margin-right: 200px;
}
.rc-int-schedule-header {
--inner: 1200px;
}
.rc-int-schedule-box {
background-color: var(--c-gray-light);
}
.rc-int-schedule__inner {
display: grid;
grid-template-columns: auto auto;
--inner: 1200px;
padding-top: 33px;
padding-bottom: 38px;
}
.rc-int-schedule-line__heading span {
display: flex;
}
.rc-int-schedule-line__heading span:first-of-type {
font-size: clamp(16px, 4vw, 24px);
font-family: var(--ff-en);
font-weight: bold;
letter-spacing: 0;
}
.rc-int-schedule-line__heading span:last-of-type {
transform: translateY(-3px);
}
.rc-int-schedule-box__item {
display: grid;
grid-template-columns: max-content 1fr;
}
.rc-int-schedule-box__item:first-of-type {
margin-left: 85px;
}
.rc-int-schedule-line__heading {
display: grid;
grid-template-columns: subgrid;
grid-column: span 2;
gap: 1.5em;
align-items: first baseline;
}
.rc-int-schedule-line__img {
grid-column: span 2;
margin-top: 10px;
}
.rc-int-schedule-line__img img {
height: 100%;
}
.rc-int-schedule-line {
position: relative;
display: grid;
grid-template-columns: subgrid;
grid-column: span 2;
padding-left: 24px;
padding-bottom: 30px;
}
.rc-int-schedule-line--pb-m {
padding-bottom: 64px;
}
.rc-int-schedule-line::before {
position: absolute;
left: 0;
top: 20px;
transform: translateX(-50%);
content: "";
display: block;
width: 1px;
height: 100%;
background-color: var(--c-point-color);
}
.rc-int-schedule-line::after {
content: "";
display: block;
position: absolute;
top: 1.1em;
left: 0;
transform: translateX(-50%);
border-radius: 100vmax;
width: 10px;
aspect-ratio: 1;
background-color: var(--c-point-color);
}
.rc-int-schedule-line:last-of-type {
padding-bottom: 0;
}
.rc-int-schedule-line:last-of-type::before {
height: 90%;
}
.rc-int-schedule-line--last::before {
display: none;
}
.rc-faq__inner {
padding-top: 96px;
}
.rc-faq-box {
margin-top: 40px;
}
/* アイテム枠 */
.rc-faq__item {
border: 1px solid var(--c-gray);
margin-bottom: 10px;
overflow: hidden;
font-size: clamp(14px, 4vw, 16px);
font-weight: 600;
line-height: 1.5;
letter-spacing: 0;
}
.rc-faq__item + .rc-faq__item {
margin-top: var(--space-xs);
}
/* Q部分 */
.rc-faq__question {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--c-gray);
color: var(--c-font);
padding: 26px 30px;
cursor: pointer;
list-style: none;
position: relative;
transition: all 0.4s;
}
.rc-faq__question::before {
font-family: var(--ff-en);
font-size: 24px;
font-weight: 500;
content: "Q";
background-color: var(--c-point-color);
font-weight: 500;
color: var(--c-white);
border-radius: 100vmax;
margin-right: 24px;
width: 40px;
min-width: 40px;
max-width: 100%;
aspect-ratio: 1;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.4s;
}
/* 開いたとき */
/* .rc-faq__item[open] > .rc-faq__question {
background: var(--c-point-color);
color: var(--c-white);
}
.rc-faq__item[open] > .rc-faq__question::before {
color: var(--c-white);
} */
/* プラス/マイナスボタン */
.rc-faq__toggle {
position: relative;
width: 20px;
height: 20px;
flex-shrink: 0;
}
.rc-faq__toggle::before,
.rc-faq__toggle::after {
content: "";
position: absolute;
background: var(--c-point-color);
transition:
background 0.3s,
opacity 0.3s;
}
.rc-faq__text {
flex: 1;
}
.rc-faq__answer .rc-faq__text {
font-weight: normal;
color: var(--c-white);
display: flex;
align-items: first baseline;
line-height: 1.9;
gap: 20px;
}
.rc-faq__answer .rc-faq__text::before {
content: "";
display: block;
width: 30px;
min-width: 30px;
height: 1px;
background-color: var(--c-white);
transform: translateY(-5px);
}
.rc-faq__answer .rc-faq__text_popupbtn{
color:#fff;
cursor: pointer;
display:block;
padding-left:50px;
}
/* 横棒 */
.rc-faq__toggle::before {
width: 20px;
height: 2px;
top: 50%;
left: 0;
transform: translateY(-50%);
}
/* 縦棒（＋のときだけ見える） */
.rc-faq__toggle::after {
width: 2px;
height: 20px;
top: 0;
left: 50%;
transform: translateX(-50%) rotate(180deg);
transition: all 0.4s;
}
/* A部分 */
.rc-faq__answer {
display: flex;
align-items: first baseline;
background: var(--c-point-color);
color: var(--c-font);
padding: 0px 30px;
position: relative;
overflow: hidden; /* ★重要：はみ出したコンテンツを隠す */
/* ★重要：paddingもアニメーションの対象に含める */
}
.rc-faq__answer__inner {
padding: 26px 0;
}
/* 開いたとき → マイナス */
.rc-faq__item[open] .rc-faq__toggle::after {
transform: translateX(-50%) rotate(90deg);
}
.rc-faq__item[open] .rc-faq__answer {
opacity: 1;
}
/* .rc-faq__item[open] .rc-faq__toggle::before,
.rc-faq__item[open] .rc-faq__toggle::after {
background: var(--c-white);
} */
.rc-faq__answer::before {
font-family: var(--ff-en);
font-size: 24px;
letter-spacing: 0.013em;
content: "A";
width: 40px;
min-width: 40px;
aspect-ratio: 1;
border-radius: 100vmax;
color: var(--c-point-color);
background-color: var(--c-white);
margin-right: 20px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
}
.rc-heading-secondary {
}
.rc-heading-secondary__sub {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--ff-en);
font-weight: bold;
color: var(--c-point-color);
letter-spacing: 0.03em;
line-height: 1;
}
.rc-heading-secondary__sub::before {
content: "";
display: block;
width: 12px;
aspect-ratio: 1;
background: url('data:image/svg+xml,');
background-size: 12px 12px;
background-repeat: no-repeat;
}
.rc-heading-secondary__main {
margin-top: var(--space-unit);
font-size: clamp(24px, 6vw, 40px);
font-weight: bold;
line-height: 1.2;
letter-spacing: 0.03em;
}
.rc-heading-white__sub {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-family: var(--ff-en);
font-weight: 500;
letter-spacing: 0;
line-height: 1;
}
.rc-heading-white__sub::before {
content: "";
display: block;
width: 12px;
aspect-ratio: 1;
mask: url('data:image/svg+xml,');
mask-size: 12px 12px;
mask-repeat: no-repeat;
background-color: var(--c-white);
}
.rc-heading-white__main {
font-family: var(--ff-en);
margin-top: 14px;
font-size: clamp(40px, 10vw, 50px);
font-weight: bold;
line-height: 1;
letter-spacing: 0.03em;
}
.rc-support {
overflow: hidden;
}
.rc-support__inner {
--inner: 1400px;
display: flex;
align-items: center;
}
.rc-support__img {
margin-left: max((100vw - var(--inner)) / 2 * -1, -600px);
position: relative;
width: 100%;
max-width: 100%;
flex: 1;
}
.rc-support-col__img {
position: relative;
width: 100%;
aspect-ratio: 869 / 533;
max-width: 100%;
height: 100%;
max-height: 533px;
margin-top: 48px;
margin-bottom: 48px;
}
.rc-support-col__img img {
position: relative;
z-index: 1;
height: 100%;
width: 100%;
object-fit: cover;
object-position: right;
clip-path: polygon(calc(100% - 350px) calc(0% + 590px), 0% 100%, 0% 0%, 100% 0%);
}
.rc-support-col__img::after {
position: absolute;
top: -45px;
left: 100% !important;
content: "";
display: block;
width: 1063px;
aspect-ratio: 1063 / 616;
transform: translateX(-50%);
background:
/* 上に重ねる繰り返し線 */
repeating-linear-gradient(120deg, #efefef, #efefef 6px, transparent 6px, transparent 14px),
/* 下に敷くグラデーション */
linear-gradient(
90deg,
rgba(227, 227, 227, 0.65) 0%,
rgba(234, 234, 234, 0) 86%,
rgba(234, 234, 234, 0) 100%
);
background-size: auto;
background-repeat: repeat;
clip-path: polygon(66% 100%, 0% 100%, 34% 0%, 100% 0%);
}
.rc-support__text-box {
position: relative;
margin-left: -80px;
}
.rc-support__text-box .rc-heading-secondary {
width: fit-content;
margin-inline: auto;
}
.rc-support__text {
margin-top: var(--space-sm);
position: relative;
display: flex;
flex-direction: column;
}
.rc-support__text span:first-of-type {
color: var(--c-white);
-webkit-text-stroke: 2px #e2dede;
text-stroke: 2px #e2dede;
font-family: var(--ff-en);
font-weight: bold;
font-style: italic;
font-size: clamp(46px, 11.5vw, 82px);
line-height: 1;
text-align: center;
opacity: 0.4;
}
.rc-support__text span:last-of-type {
font-size: clamp(14px, 3.5vw, 18px);
font-weight: bold;
line-height: 1.5;
letter-spacing: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -30%);
width: 100%;
text-align: center;
}
.rc-support__list {
width: fit-content;
margin-inline: auto;
padding-right: 70px;
margin-top: var(--space-md);
display: flex;
flex-direction: column;
gap: 24px;
}
.rc-support__list li {
display: flex;
column-gap: 14px;
align-items: first baseline;
font-weight: 600;
font-size: clamp(18px, 4.5vw, 24px);
letter-spacing: 0;
line-height: 1.3;
}
.rc-support__list li:nth-of-type(2) {
transform: translateX(-50px);
}
.rc-support__list li:nth-of-type(3) {
transform: translateX(-90px);
}
.rc-support__list li::before {
content: "";
display: block;
background: url('data:image/svg+xml,');
background-size: 9px 12px;
background-repeat: no-repeat;
width: 9px;
height: 12px;
aspect-ratio: 9/12;
}
.rc-support__list li span {
margin-right: 4px;
font-weight: bold;
font-size: clamp(16px, 4vw, 18px);
letter-spacing: 0;
color: var(--c-point-color);
}
.rc-arrow__btn-link {
margin-top: 30px;
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
text-align: right;
width: 100%;
color: var(--c-point-color);
}
.rc-arrow-anime > span,
.rc-arrow-anime .rc-arrow__btn {
transition: all 0.4s;
}
@media (hover: hover) {
.rc-arrow-anime:hover > span {
overflow: hidden;
transform: scale(1.1);
}
.rc-arrow-anime:hover .rc-arrow__btn {
transform: scale(1.1);
}
.rc-arrow-anime:hover .rc-hm-business-list__text {
transform: scale(1);
}
.rc-arrow-anime:hover .rc-entry-btn-arrow {
transform: translateY(-50%) scale(1.1);
}
.rc-arrow-anime:hover span::after {
-webkit-animation: grain 0.2s;
animation: grain 0.2s;
}
.rc-arrow-anime.--delay:hover span::after {
-webkit-animation: grain 0.2s;
animation: grain 0.2s;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
}
@keyframes grain {
0%,
100% {
transform: translate(0, -50%);
}
50% {
transform: translate(4rem, -50%);
}
50.1% {
transform: translate(-4rem, -50%);
display: none;
}
50.2% {
transform: translate(-4rem, -50%);
display: inherit;
}
}
.rc-arrow__btn {
position: relative;
width: 54px;
aspect-ratio: 1;
background-color: var(--c-point-color);
border-radius: 100vmax;
}
.rc-arrow__btn::after {
width: 10px;
aspect-ratio: 1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-25%, -50%);
content: "";
display: block;
background: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
}
.rc-entry-heading {
margin-top: 54px;
}
.rc-entry__inner {
--inner: 960px;
}
.rc-entry__box {
display: grid;
gap: 29px;
grid-template-columns: minmax(495px, 1fr) 1fr;
padding-bottom: var(--space-xs);
border-bottom: 1px solid #bbb6b6;
}
.rc-entry__box.--none {
border-bottom: none;
}
.rc-entry-box-bg {
display: flex;
justify-content: center;
gap: 36px;
background-color: #faf9f9;
padding: 18px;
}
.rc-entry-box-bg__item {
position: relative;
background-color: var(--c-white);
border: 1px solid var(--c-point-color);
padding: 6px 24px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.rc-entry-box-bg__item::after {
position: absolute;
top: 50%;
left: calc(100% + 16px);
transform: translate(0%, -50%);
content: "";
display: block;
background: url('data:image/svg+xml,');
background-size: 9px 12px;
background-repeat: no-repeat;
width: 9px;
height: 12px;
aspect-ratio: 9/12;
}
.rc-entry-box-bg__item:last-of-type::after {
display: none;
}
.rc-entry-box-bg__item span:first-of-type {
font-family: var(--ff-en);
font-weight: bold;
font-size: 24px;
letter-spacing: 0;
line-height: 1.5;
color: var(--c-point-color);
}
.rc-entry-box-bg__item span:last-of-type {
font-weight: bold;
font-size: 18px;
letter-spacing: 0.01em;
line-height: 1.9;
}
.rc-point {
margin-top: 150px;
overflow: hidden;
padding-top: var(--space-xxl);
padding-bottom: var(--space-xl);
background-color: var(--c-gray-light);
}
.rc-point__inner {
--inner: 1400px;
}
.rc-point-card {
display: grid;
grid-template-columns: 1fr minmax(450px, min-content);
place-items: center;
}
.rc-point-card-column {
display: grid;
grid-template-columns: repeat(2, minmax(min-content, 559px));
align-items: center;
justify-content: space-between;
width: 1260px;
max-width: 100%;
margin-inline: auto;
margin-top: -150px;
}
.rc-point-card-column .rc-point-card__text-box {
transform: translateX(68px) skewX(-30deg);
margin-left: 0;
padding-bottom: 40px;
padding: 10px 77px;
}
.rc-point-card-column .rc-point-card__title {
transform: skewX(30deg) translateX(20px);
width: fit-content;
margin-inline: 0;
}
.rc-point-card-reverse {
display: grid;
grid-template-columns: minmax(450px, min-content) 1fr;
place-items: center;
}
.rc-point-card__text-box {
transform: skewX(-30deg);
background-color: var(--c-white);
transform-origin: top right;
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 66px;
margin-bottom: 32px;
margin-left: -100px;
gap: 24px;
padding: 10px 80px;
padding-top: 30px;
}
.rc-point-card-reverse .rc-point-card__text-box {
margin-left: 0;
margin-right: -100px;
transform-origin: bottom left;
position: relative;
z-index: 1;
}
.rc-point-card__title {
transform: skewX(30deg);
width: fit-content;
}
.rc-point-card__title-sub {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
color: var(--c-point-color);
font-size: clamp(12px, 3vw, 14px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.03em;
}
.rc-point-card__title-sub::before,
.rc-point-card__title-sub::after {
content: "";
display: block;
width: 18px;
height: 1px;
background-color: var(--c-point-color);
}
.rc-point-card__title-sub::before {
transform: rotate(60deg);
}
.rc-point-card__title-sub::after {
transform: rotate(-60deg);
}
.rc-point-card__title-main {
font-family: var(--ff-en);
font-size: clamp(32px, 8vw, 48px);
letter-spacing: 0.03em;
line-height: 1.3;
font-weight: bold;
color: var(--c-point-color);
}
.rc-point-card__text {
transform: skewX(30deg);
}
.rc-point-message {
width: 1200px;
max-width: 100%;
margin-inline: auto;
margin-top: 210px;
background-color: var(--c-white);
display: grid;
align-items: center;
gap: 32px;
grid-template-columns: minmax(auto, 474px) 1fr;
}
.rc-point-message__img {
margin-top: -114px;
}
.rc-point-message__title-sub {
font-family: var(--ff-en);
font-weight: 500;
letter-spacing: 0;
font-size: clamp(12px, 3vw, 14px);
color: var(--c-point-color);
margin-bottom: 4px;
}
.rc-point-message__item {
padding-right: 94px;
}
.rc-point-cta .rc-entry-btn {
margin-top: 96px;
}
.rc-voice__inner {
--inner: 1200px;
}
.rc-voice-card {
display: grid !important;
grid-template-columns: repeat(4, 1fr);
gap: 60px;
}
.rc-voice-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.rc-voice-card__img {
position: relative;
}
.rc-voice-card__link img,
.rc-voice-card__link img.--hover {
transition: opacity 1s;
}
.rc-voice-card__link img {
opacity: 1;
}
.rc-voice-card__link img.--hover {
position: absolute;
inset: 0;
margin: auto;
opacity: 0;
}
.rc-voice-card__link:hover img {
opacity: 0;
}
.rc-voice-card__link:hover img.--hover {
opacity: 1;
}
.rc-voice-card__title {
font-weight: bold;
font-size: clamp(16px, 4vw, 18px);
line-height: 1.5;
}
.rc-voice-card__title::after {
content: "";
display: block;
width: 100px;
height: 1px;
background-color: var(--c-point-color);
margin-top: 14px;
margin-bottom: 8px;
}
.rc-footer-img {
height: 383px;
}
.rc-footer-img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.rc-entry-btn {
margin-top: -90px;
position: relative;
display: grid;
grid-template-columns: minmax(364px, auto) 1fr;
align-items: center;
width: 1200px;
max-width: 100%;
margin-inline: auto;
gap: 35px;
color: var(--c-white);
background-color: var(--c-point-color);
padding: 30px 96px 38px;
min-height: 150px;
}
.rc-entry-btn-black {
background-color: #000;
margin-bottom: 40px;
}
.rc-entry-btn-arrow {
position: absolute;
top: 50%;
right: 96px;
transform: translateY(-50%);
width: 64px;
aspect-ratio: 1;
background-color: var(--c-white);
border-radius: 100vmax;
}
.rc-entry-btn-arrow::after {
width: 10px;
aspect-ratio: 1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-25%, -50%);
content: "";
display: block;
mask: url('data:image/svg+xml,');
mask-repeat: no-repeat;
mask-size: contain;
background-color: var(--c-point-color);
}
.rc-entry-btn__text {
font-size: clamp(14px, 3.5vw, 18px);
font-weight: 600;
letter-spacing: 0;
line-height: 1.5;
padding-right: 80px;
}
.rc-entry-btn__text-small{
font-size: clamp(14px, 3.5vw, 16px);
}
.rc-contact-btn {
margin-top: 45px;
margin-bottom: 0;
width: 336px;
padding: 0;
min-height: 100px;
grid-template-columns: 1fr;
padding: 6px 50px;
}
.rc-contact-btn .rc-heading-white__main {
font-size: 36px;
letter-spacing: 0;
margin-top: 10px;
}
.rc-contact-btn .rc-entry-btn-arrow {
right: 30px;
width: 43px;
}
.rc-contact-btn .rc-entry-btn-arrow::after {
top: 51%;
left: 51%;
}
.rc-btn {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 480px;
padding: 11px 38px;
padding-right: 24px;
line-height: 1.75;
background-color: var(--c-point-color);
color: var(--c-white);
}
.rc-btn__item {
position: relative;
display: block;
width: 48px;
aspect-ratio: 1;
background-color: var(--c-white);
border-radius: 100vmax;
}
.rc-btn__item::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-25%, -50%);
content: "";
display: block;
background: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
width: 7px;
aspect-ratio: 6 / 7;
}
.rc-contact-box {
border: 6px solid var(--c-gray);
padding: 35px 10px 42px;
margin-top: 55px;
margin-bottom: 63px;
}
.rc-contact-box__heading {
font-size: clamp(18px, 4.5vw, 20px);
font-weight: bold;
letter-spacing: 0;
line-height: 1.3;
text-align: center;
}
.rc-contact-box__heading.--sub {
font-size: 22px;
}
.rc-contact-box__heading.--sub span {
font-size: 18px;
}
.rc-contact-box__text {
margin-top: 22px;
font-size: 14px;
letter-spacing: 0;
line-height: 1.714;
text-align: center;
}
.rc-future {
background-color: var(--c-gray-light);
}
.rc-future__heading {
text-align: center;
color: var(--c-point-color);
}
.rc-future__text {
text-align: center;
margin-top: var(--space-xs);
}
.rc-future__inner {
--inner: 1200px;
padding-top: 64px;
padding-bottom: 86px;
}
.rc-future-card {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 78px;
margin-top: 65px;
}
.rc-future-card__text-box {
padding: 24px;
}
.rc-future-card__text {
margin-top: 18px;
}
.rc-future-card__item {
position: relative;
background-color: var(--c-white);
box-shadow: 0px 4px 4px 4px rgba(213, 213, 213, 0.25);
}
.rc-future-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.rc-future-card__deco {
position: absolute;
top: 50%;
left: 100%;
transform: translate(16px, -50%);
display: block;
width: 48px;
aspect-ratio: 1;
}
.rc-future-card__deco::after {
position: absolute;
content: "";
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
display: block;
width: 68px;
height: 1px;
background-color: var(--c-font);
}
.rc-future-card__deco::before {
position: absolute;
content: "";
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
display: block;
width: 68px;
height: 1px;
background-color: var(--c-font);
}
.rc-modal-content {
display: none;
}
.rc-modal-content.is-open {
display: block;
}
.rc-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2000;
background: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
}
.rc-modal__container {
position: relative;
max-width: 894px;
width: 100%;
/* max-height: 80vh;
min-height: 480px; */
background-color: #fff;
margin-right: 20px;
margin-left: 20px;
}
.rc-modal__content {
max-height: 80vh;
min-height: 480px;
overflow: auto;
}
.rc-modal__inner {
margin-inline: auto;
border: 3px solid var(--c-point-color);
}
.rc-modal__header {
position: relative;
border:none;
}
.rc-modal__heading {
font-size: clamp(18px, 4.5vw, 24px);
font-weight: 600;
line-height: 1.3;
letter-spacing: 0;
background-image: url(../img/rc-modal-header.jpg);
background-size: 893px 143px;
background-repeat: no-repeat;
background-position: center center;
text-align: center;
color: var(--c-white);
min-height: 143px;
display: flex;
align-items: center;
justify-content: center;
}
.rc-modal__main {
padding: 54px 86px 86px 86px;
}
.rc-modal__close {
position: absolute;
top: -55px;
right: 0px;
display: flex;
background: var(--c-point-color);
border-radius: 100vmax;
width: 44px;
aspect-ratio: 1;
}
.rc-modal__close svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
width: 10px;
height: 10px;
}
.rc-modal-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 47px 65px;
margin-top: 40px;
}
.rc-modal-grid__title {
display: flex;
align-items: center;
gap: 25px;
}
.rc-modal-grid__title-bg {
font-size: clamp(16px, 4vw, 18px);
font-weight: 600;
line-height: 1.5;
letter-spacing: 0;
margin: 0;
background-color: #fff2f2;
padding: 8px 24px;
margin-bottom: 32px;
margin-top: 25px;
}
.rc-modal-red-box {
padding: 30px 10px 32px 10px;
background-color: #fff3f3;
text-align: center;
}
.rc-modal-red-box__title {
margin-bottom: 14px;
}
.rc-appeal {
position: relative;
}
.rc-appeal::after {
position: absolute;
z-index: -1;
top: 50%;
left: 0;
content: "";
display: block;
width: 100%;
aspect-ratio: 1398 / 310;
transform: translateY(-50%);
background:
/* 上に重ねる繰り返し線 */ repeating-linear-gradient(
120deg,
#efefef,
#efefef 6px,
transparent 6px,
transparent 14px
);
background-size: auto;
background-repeat: repeat;
}
.rc-appeal__inner {
--inner: 1300px;
}
.rc-appeal-card {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 78px 38px;
}
.rc-appeal-card-link-text {
display: flex;
align-items: center;
justify-content: flex-end;
text-align: right;
}
.rc-appeal-card-link-text span {
color: var(--c-point-color);
text-decoration: underline;
text-underline-offset: 6px;
}
.rc-appeal-card-link-text .rc-benefits__btn {
display: flex;
width: 30px;
margin-left: 8px;
}
.rc-appeal-card__link {
transition: all 0.2s;
position: relative;
display: block;
border-radius: 8px;
box-shadow: 0px 2px 2px 0px rgba(24, 28, 31, 0.2);
border: 1px solid #d9d9d9;
padding: 32px 10px 16px 10px;
width: 100%;
background-color: var(--c-white);
color: var(--c-font);
text-align: center;
background-image: url(../img/icon-card01.png);
background-size: 142px 136px;
background-repeat: no-repeat;
background-position: 5% 50%;
}
.rc-appeal-card__link.--security {
background-image: url(../img/icon-card02.png);
background-size: 112px 142px;
}
.rc-appeal-card__link.--general-sales {
background-image: url(../img/icon-card03.png);
background-size: 125px 125px;
}
.rc-appeal-card__link.--machinery-install {
background-image: url(../img/icon-card04.png);
background-size: 117px 117px;
}
.rc-appeal-card__link.--electrical-maintenance {
background-image: url(../img/icon-card05.png);
background-size: 143px 130px;
}
.rc-appeal-card__link.--civil-construction {
background-image: url(../img/icon-card06.png);
background-size: 120px 140px;
}
.rc-appeal-card__link::before {
content: "";
position: absolute;
bottom: 0;
right: 64px;
border-style: solid;
border-width: 20px 20px 0 0;
border-color: #d9d9d9 transparent transparent;
translate: -50% 100%;
}
.rc-appeal-card__link::after {
content: "";
position: absolute;
bottom: 0;
right: 69px;
border-style: solid;
border-width: 15.2px 15.2px 0 0;
border-color: #ffffff transparent transparent;
translate: calc(-50% - 0.4px) 100%;
}
@media (hover: hover) {
.rc-appeal-card__link:hover {
transform: scale(1.25) translateY(-30px);
z-index: 10;
}
}
/* .rc-appeal-card__link:hover .rc-text-sm,
.rc-appeal-card__link:hover h3,
.rc-appeal-card__link:hover .rc-appeal-card-link-text,
.rc-appeal-card__link:hover::before {
transform: scaleX(0.95);
} */
.rc-appeal-card__link:hover::before {
right: 70px;
}
.rc-appeal-card__link:hover::after {
right: 75px;
}
.rc-appeal-card__img {
width: fit-content;
margin-left: auto;
margin-right: 72px;
margin-top: 26px;
}
.rc-benefits__btn-link-item {
width: 204px;
padding-top: 14px;
padding-bottom: 14px;
display: flex;
justify-content: center;
position: absolute;
right: 127px;
bottom: 0px;
background-color: var(--c-white);
transform: skew(-30deg);
border: 1px solid var(--c-point-color);
}
.rc-benefits__btn-link {
transform: skew(30deg);
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
font-size: clamp(14px, 3.5vw, 18px);
letter-spacing: 0.03em;
line-height: 1.3;
color: var(--c-point-color);
background-color: transparent;
}
.rc-benefits__img {
position: relative;
margin-left: -60px;
margin-right: 60px;
}
.rc-benefits__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.rc-benefits__btn {
position: relative;
width: 54px;
aspect-ratio: 1;
background-color: var(--c-point-color);
border-radius: 100vmax;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.rc-benefits__btn::after {
width: 8px;
aspect-ratio: 1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-25%, -50%);
content: "";
display: block;
mask: url('data:image/svg+xml,');
mask-repeat: no-repeat;
mask-size: contain;
background-color: var(--c-white);
}
.rc-benefit-sp-title {
text-align: center;
color: var(--c-point-color);
font-family: var(--ff-en);
font-weight: bold;
font-size: 32px;
letter-spacing: 0;
margin-top: var(--space-sm);
}
.rc-benefit-sp-text {
text-align: center;
margin-top: 4px;
}
.rc-modal-card__header{
border:none;
}
.rc-modal-card-heading {
display: flex;
column-gap: 8px;
align-items: first baseline;
font-weight: normal;
font-size: 16px;
letter-spacing: 0.01em;
line-height: 1.9;
}
.rc-modal-card-heading::before {
content: "";
display: block;
background: url('data:image/svg+xml,');
background-size: 9px 12px;
background-repeat: no-repeat;
width: 9px;
height: 12px;
aspect-ratio: 9/12;
}
.rc-modal-card-heading span {
margin-right: 0;
font-weight: bold;
font-size: clamp(16px, 4vw, 18px);
letter-spacing: 0;
color: var(--c-point-color);
}
.rc-modal-card__content {
padding: 0;
}
.rc-modal-card-heading-primary {
margin-left: -1px;
position: relative;
}
.rc-modal-card-heading--sub {
width: fit-content;
background-color: var(--c-white);
padding: 5px 12px;
}
.rc-modal-card-heading--main {
line-height: 1.3;
font-size: clamp(18px, 4.5vw, 24px);
margin-top: 8px;
}
.rc-modal__card-main {
padding: 30px 70px 45px 100px;
}
.rc-modal-card-heading-secondary span {
color: var(--c-point-color);
text-decoration: underline;
text-underline-offset: 6px;
padding-left: 2px;
padding-right: 2px;
}
.rc-modal-card-list {
margin-top: 14px;
}
.rc-modal-card__close {
top: 8px;
right: 8px;
}
.rc-modal-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.rc-entry-heading {
color: var(--c-point-color);
font-size: 18px;
letter-spacing: 0;
line-height: 1.5;
font-weight: bold;
text-align: center;
margin-bottom: 45px;
}
.rc-entry-btn-box {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px;
margin-top: 30px;
}
.rc-entry-btn-box .rc-entry-btn {
margin-right: 0;
margin-left: 0;
margin-top: 0;
}
/* ユーティリティクラス */
.rc-mt-0 {
margin-top: 0 !important;
}
.rc-mt-unit {
margin-top: var(--space-unit) !important;
}
.rc-mt-xs {
margin-top: var(--space-xs) !important;
}
.rc-mt-sm {
margin-top: var(--space-sm) !important;
}
.rc-mt-md {
margin-top: var(--space-md) !important;
}
.rc-mt-lg {
margin-top: var(--space-lg) !important;
}
.rc-mt-xl {
margin-top: var(--space-xl) !important;
}
.rc-mt-xxl {
margin-top: var(--space-xxl) !important;
}
.rc-md-only {
display: none;
}
.rc-tac {
text-align: center;
}
.rc-jcc {
justify-content: center;
}
.gsap-svg-text {
width: 100%;
max-width: 1319px;
height: auto;
padding-left: 20px;
padding-right: 20px;
display: flex;
justify-content: center;
margin-inline: auto;
transform: translateY(-50%);
margin-bottom: -50px;
z-index: 1;
position: relative;
}
.gsap-svg-text path {
fill: none;
stroke: var(--c-point-color);
stroke-width: 1.5px;
stroke-dasharray: 660px;
stroke-dashoffset: 660px;
}
@media screen and (max-width: 1300px) {
.rc-hm-mv-slider {
height:100%;
}
.rc-int-col__text-box {
margin-left: 0;
margin-right: 0;
}
.rc-int-schedule-box__item:first-of-type {
margin-left: 0;
}
.rc-support-col__img {
width: 100%;
}
.rc-support__img {
margin-left: 0;
}
.rc-support__inner {
gap: 40px;
}
}
@media screen and (max-width: 1024px) {
p {
font-weight: 500;
}
.rc-page-header {
height: 218px;
background-image: url(../img/pic-page-header01-sp.jpg);
}
.rc-page-header--entry {
height: 218px;
background-image: url(../img/pic-page-header02-sp.jpg);
}
.rc-page-header--appeal {
height: 218px;
background-image: url(../img/pic-page-header03-sp.jpg);
background-position: top;
}
.rc-page-heading__sub {
margin-bottom: 4px;
}
.rc-heading-primary {
font-weight: bold;
letter-spacing: 0;
line-height: 1.3;
column-gap: 24px;
margin-left: -6px;
}
.rc-heading-primary::before {
height: 40px;
}
.rc-heading-secondary {
margin-right: auto;
}
.rc-heading-secondary__main {
margin-top: 8px;
}
.rc-heading-quaternary.--number {
font-size: 16px;
}
.rc-hm-mv__title {
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.rc-hm-mv__title-box {
top: auto;
transform: none;
bottom: 62px;
}
.gsap-svg-text {
margin-bottom: 0;
}
.rc-hm-business {
padding-bottom: 50px;
}
.rc-hm-business-box {
margin: 0 calc(50% - 50vw);
width: 100vw;
}
.rc-hm-business-list {
}
.rc-hm-business-list__item {
background-color: var(--c-white);
}
.rc-hm-business-list__item-inner {
flex-direction: column;
align-items: flex-start;
padding-top: 22px;
padding-bottom: 72px;
padding-right: 20px;
padding-left: 20px;
border: none;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
margin-bottom: -50px;
position: relative;
}
.rc-hm-business-list__item-inner .rc-arrow__btn-link {
margin-top: 12px;
}
.rc-hm-business-list__item:last-of-type {
padding-bottom: 22px;
}
.rc-hm-business-list-toggle {
display: block;
}
.rc-hm-business-list__item:nth-child(odd) {
background-color: #f7f7f7;
}
.rc-hm-business-list__sp-img {
margin-top: 22px;
}
.rc-hm-business-list__sp-img p {
--c-font: #181c1f;
color: var(--c-font);
}
.rc-hm-business-list__item .rc-arrow__btn-link {
opacity: 1;
}
/* 初期状態：非表示 */
.rc-hm-business-list-toggle {
overflow: hidden;
height: 0;
}
.rc-hm-business-box {
grid-template-columns: 1fr;
}
.rc-hm-business-img-box {
display: none;
}
.rc-hm-feature-card {
display: grid;
grid-template-columns: 1fr;
}
.rc-mv {
position: relative;
background-image: url(../img/pic-rc-mv01-sp.jpg);
background-size: 542px 376px;
background-repeat: no-repeat;
background-position: 0% 0%;
width: 530px;
max-width: 100%;
margin-inline: auto;
height: 476px;
margin-top: 24px;
}
.rc-mv--02 {
position: relative;
background-image: url(../img/pic-rc-mv02-sp.jpg);
background-size: 542px 376px;
background-repeat: no-repeat;
background-position: 0% 0%;
width: 530px;
max-width: 100%;
margin-inline: auto;
height: 476px;
margin-top: 24px;
}
.rc-mv--03 {
position: relative;
background-image: url(../img/pic-rc-mv03-sp.jpg);
background-size: 542px 376px;
background-repeat: no-repeat;
background-position: 0% 0%;
width: 530px;
max-width: 100%;
margin-inline: auto;
height: 476px;
margin-top: 24px;
}
.rc-mv--04 {
position: relative;
background-image: url(../img/pic-rc-mv04-sp.jpg);
background-size: 542px 376px;
background-repeat: no-repeat;
background-position: 0% 0%;
width: 530px;
max-width: 100%;
margin-inline: auto;
height: 476px;
margin-top: 24px;
}
.rc-mv__name {
display: flex;
align-items: center;
gap: 14px;
}
.rc-mv__name-main {
font-size: 14px;
}
.rc-mv__name-header {
font-size: 14px;
line-height: 1.6;
}
.rc-mv__num {
top: 0;
left: 20px;
}
.rc-mv__num-header {
font-size: 96px;
font-weight: 300;
}
.rc-mv__num-main {
font-size: 16px;
transform: none;
margin-top: -10px;
text-align: left;
}
.rc-mv__title-box {
position: static;
padding-top: 170px;
transform: none;
}
.rc-mv__title {
margin-top: 8px;
font-size: 24px;
line-height: 1.6;
}
.rc-mv__title span::before {
height: 33px;
}
.rc-mv__sub-title {
font-size: 16px;
}
.rc-mv__name {
position: static;
margin-top: 80px;
}
.rc-mv__name-header {
padding: 0 12px;
}
.rc-job {
padding-top: 24px;
padding-bottom: 22px;
}
.rc-faq__inner {
padding-top: 50px;
}
.rc-faq__question {
padding: 22px 10px;
}
.rc-faq__question .rc-faq__text {
margin-right: 14px;
line-height: 1.5;
}
.rc-faq__question::before {
width: 24px;
min-width: 24px;
font-size: 15px;
margin-right: 16px;
}
.rc-faq__answer::before {
width: 24px;
min-width: 24px;
font-size: 15px;
margin-right: 16px;
}
.rc-faq__answer {
padding: 22px 10px;
}
.rc-faq__answer__inner {
padding: 0;
}
.rc-faq__answer .rc-faq__text::before {
display: none;
}
.rc-faq__answer .rc-faq__text_popupbtn{
padding-left:0;
}
.rc-int-schedule__inner {
grid-template-columns: auto;
padding-top: 48px;
padding-bottom: 24px;
}
.rc-int-schedule-line__heading span:first-of-type {
line-height: 1;
}
.rc-int-schedule-line__heading span:last-of-type {
line-height: 1;
transform: translateY(-1px);
}
.rc-int-schedule-line::after {
top: 0.2em;
}
.rc-int-schedule-line::before {
top: 6px;
}
.rc-int-schedule-line:last-of-type::before {
height: 100%;
}
.rc-int-schedule-line {
padding-bottom: 32px;
}
.rc-int-schedule-line:last-of-type {
padding-bottom: 30px;
}
.rc-int-schedule-line--pb-m {
padding-bottom: 30px;
}
.rc-int-col__img--right {
margin-right: -130px;
}
.rc-int-col__img--left {
margin-left: -130px;
margin-top: 74px !important;
}
.rc-int-col__img--right::after {
left: 27px;
width: 418px;
top: -26px;
}
.rc-int-col__img--left::after {
width: 418px;
top: -26px;
right: -45px;
}
.rc-int-col__img::after {
background: /* 上に重ねる繰り返し線 */
repeating-linear-gradient(120deg, #efefef, #efefef 3px, transparent 3px, transparent 8px),
/* 下に敷くグラデーション */
linear-gradient(
90deg,
rgba(227, 227, 227, 0.4) 0%,
rgba(234, 234, 234, 0) 86%,
rgba(234, 234, 234, 0) 100%
);
clip-path: polygon(65% 100%, 0% 100%, 35% 0%, 100% 0%);
}
.rc-int-col__img img {
clip-path: polygon(77.87% 100%, 0% 100%, 23.13% 0%, 100% 0%);
}
.rc-point {
margin-top: 65px;
padding-top: 100px;
padding-bottom: 48px;
}
.rc-point-card {
margin: 0 calc(50% - 50vw);
width: 100vw;
place-items: center;
}
.rc-point-card-column {
display: grid;
grid-template-columns: auto;
gap: 40px;
margin-top: -20px;
}
.rc-point-card-column .rc-point-card__text-box {
transform: translateX(50px) skewX(-30deg);
gap: 16px;
padding: 14px 58px 26px;
}
.rc-point-card-column .rc-point-card__title {
transform: skewX(30deg) translateX(0px);
}
.rc-point-card__img {
aspect-ratio: 376/204;
width: 376px;
max-width: 100%;
}
.rc-point-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.rc-point-card__text-box {
align-items: center;
margin-top: -30px;
margin-left: 0;
gap: 16px;
padding: 24px 58px 30px;
transform: translateX(60px) skewX(-30deg);
box-shadow: 0px 1px 2px 0px rgba(24, 28, 31, 0.2);
}
.rc-point-card__text {
font-size: 12px;
letter-spacing: 0;
line-height: 1.6;
font-weight: 500;
}
.rc-support__inner {
--inner: 570px;
flex-direction: column;
align-items: flex-start;
gap: 0;
}
.rc-support-col__img {
margin-top: 2px;
margin-bottom: 0;
width: 474px;
max-width: 100%;
}
.rc-support-col__img::after {
top: 70%;
transform: translateX(-80%);
width: 556px;
}
.rc-support__text-box {
display: contents;
}
.rc-support__text-box .rc-heading-secondary {
order: -1;
margin-right: auto;
margin-inline: 0;
}
.rc-support__list {
position: relative;
width: 100%;
margin-top: var(--space-xs);
}
.rc-support__list li:nth-of-type(2),
.rc-support__list li:nth-of-type(3) {
transform: none;
}
.rc-support__text {
order: -1;
margin-top: var(--space-xs);
}
.rc-voice__inner {
overflow: hidden;
padding-right: 0;
}
.rc-int-col__inner {
flex-direction: column;
gap: 48px;
}
.rc-int-col__inner-rv {
gap: 0;
}
.rc-int-col__text-box {
flex: 1 1 auto;
}
.rc-int-col__text-box--right {
display: contents;
}
.rc-int-col__text-box--right .rc-heading-primary {
order: -1;
}
.rc-int-col__text-box--right .rc-int-col__text {
order: -1;
}
.rc-int-col__img {
flex: 1 1 auto;
max-width: 512px;
width: 512px;
aspect-ratio: 512 / 232;
margin-top: 26px;
margin-bottom: 26px;
}
.rc-int-col__text-center {
margin-left: auto;
margin-right: auto;
}
.rc-point-message {
grid-template-columns: minmax(auto, 190px) 1fr;
row-gap: 10px;
width: 460px;
max-width: 100vw;
column-gap: 0;
margin-top: 88px;
}
.rc-point-message__img {
margin-top: -43px;
}
.rc-point-message__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.rc-point-message__item {
display: contents;
}
.rc-point-message__text {
grid-column: span 2;
}
.rc-point-card {
display: grid;
grid-template-columns: 1fr;
}
.rc-point-card-reverse {
margin: 0 calc(50% - 50vw);
width: 100vw;
display: flex;
flex-direction: column-reverse;
align-items: center;
}
.rc-point-card-reverse.rc-mt-xl {
margin-top: 0 !important;
}
.rc-point-card-reverse .rc-point-card__text-box {
transform: translateX(-60px) skewX(-30deg);
margin-right: auto;
margin-bottom: 0;
}
.rc-voice-card {
display: flex !important;
gap: 0px;
}
.rc-voice-card-slider .bx-viewport {
overflow: visible !important;
}
.rc-support__text span:first-of-type {
letter-spacing: -0.01em;
-webkit-text-stroke: 1px #e2dede;
text-stroke: 1px #e2dede;
}
.rc-support__text span:last-of-type {
font-weight: 500;
letter-spacing: 0;
line-height: 1.8;
}
.rc-support.rc-mt-xxl {
margin-top: 80px !important;
}
.rc-voice-card .splide__slide.is-active .rc-voice-card__img img.--hover {
opacity: 1;
}
.rc-voice-card__title {
line-height: 1.3;
}
.rc-benefits {
overflow: hidden;
}
.rc-benefits__img {
margin: 0 calc(50% - 50vw);
width: 100vw;
}
.rc-benefits__btn-link {
right: 20px;
}
.rc-benefits__btn-link-item {
width: 200px;
padding-top: 7px;
padding-bottom: 7px;
right: -20px;
bottom: 0px;
}
.rc-benefits__btn {
width: 44px;
}
.rc-modal__content {
overflow: auto;
min-height: auto;
max-height: 70vh;
}
.rc-entry-heading {
margin-top: 34px;
margin-bottom: 50px;
text-align: left;
}
.rc-entry__box {
grid-template-columns: 1fr;
}
.rc-entry-btn {
grid-template-columns: 1fr;
padding: 30px 14px;
gap: 24px;
}
.rc-entry-btn__text {
font-weight: 500;
letter-spacing: 0.03em;
line-height: 1.8;
padding-right: 0;
}
.rc-entry-btn-arrow {
right: 10px;
width: 40px;
top: 60px;
transform: none;
}
.rc-entry-btn-arrow::after {
/* width: 6px;
left: 53%; */
}
.rc-entry-box-bg__item {
flex-direction: row;
gap: 15px;
justify-content: flex-start;
padding: 9px 6px;
}
.rc-entry-btn-box {
gap: 0px;
}
.rc-entry-box-bg__item span:last-of-type {
font-size: 16px;
}
.rc-contact-btn .rc-entry-btn-arrow {
top: 50%;
transform: translateY(-50%);
right: 23px;
}
.rc-contact-btn {
margin-top: 24px !important;
padding: 10px 23px;
}
.rc-contact-box {
margin-top: 60px;
margin-bottom: 84px;
padding: 32px 20px 30px;
}
.rc-contact-box__text {
padding-left: 16px;
padding-right: 16px;
}
.rc-arrow__btn {
width: 44px;
}
.rc-entry-box-bg {
width: 335px;
max-width: 100%;
gap: 33px;
flex-direction: column;
margin-inline: auto;
}
.rc-entry-box-bg__item::after {
display: none;
}
.slider-controls {
display: flex;
gap: 16px;
justify-content: flex-end;
margin-top: 30px;
margin-bottom: 40px;
margin-right: 30px;
}
.slider-next,
.slider-prev {
position: relative;
width: 54px;
aspect-ratio: 1;
background-color: var(--c-point-color);
border-radius: 100vmax;
}
.slider-next::after,
.slider-prev::after {
width: 10px;
aspect-ratio: 1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-70%, -50%) rotate(180deg);
content: "";
display: block;
mask: url('data:image/svg+xml,');
mask-repeat: no-repeat;
mask-size: contain;
background-color: var(--c-white);
}
.slider-next::after {
transform: translate(-50%, -50%) rotate(0deg);
}
.rc-point-message__text {
padding: 24px 20px 32px;
padding-top: 0;
font-size: 14px;
letter-spacing: 0.03em;
line-height: 1.8;
font-weight: 500;
}
.rc-point-cta .rc-entry-btn {
margin-top: 48px;
width: calc(100% - 40px);
}
.rc-future__inner {
padding-bottom: 32px;
}
.rc-future-card {
grid-template-columns: 1fr;
gap: 88px;
}
.rc-future-card__deco {
top: 100%;
left: 50%;
transform: translate(-50%, 60%);
width: 40px;
}
.rc-future-card__deco::before {
width: 56px;
}
.rc-future-card__deco::after {
width: 56px;
}
.rc-future__text {
text-align: left;
}
.rc-appeal-card {
display: flex !important;
}
.rc-appeal::after {
aspect-ratio: 376/230;
transform: none;
bottom: 0;
top: auto;
}
.rc-appeal-card-slider.rc-mt-lg {
margin-top: 40px !important;
}
.rc-modal__main {
padding: 54px 16px 86px 16px;
}
.rc-modal-grid {
grid-template-columns: auto;
}
.rc-modal-grid__item:first-of-type {
grid-column: span 1;
}
.rc-modal-card__content {
overflow-y: auto;
max-height: 580px;
}
.rc-modal__card-main {
padding: 16px 20px;
max-height:220px;
}
.rc-modal-card__close {
top: -60px;
}
.rc-modal__heading {
background-color: var(--c-point-color);
background-image: url(../img/rc-modal-header-sp.png);
background-size: 334px 82px;
background-repeat: no-repeat;
background-position: left;
color: var(--c-white);
min-height: 82px;
display: flex;
align-items: center;
justify-content: center;
}
.rc-footer-img {
height: 240px;
}
.rc-entry-btn {
margin-top: -60px;
}
.rc-md-only {
display: block !important;
}
.rc-md-over-only {
display: none !important;
}
.rc-mt-xs {
margin-top: var(--space-unit) !important;
}
.rc-mt-sm {
margin-top: var(--space-xs) !important;
}
.rc-mt-lg {
margin-top: var(--space-md) !important;
}
.rc-mt-xl {
margin-top: var(--space-lg) !important;
}
.rc-mt-xxl {
margin-top: var(--space-lg) !important;
}
.gsap-svg-text {
transform: translateY(10%);
}
}
@media screen and (max-width: 480px) {
.rc-point-message {
margin: 0 calc(50% - 50vw);
width: 100vw;
max-width: 100vw;
margin-top: 88px;
}
.rc-modal__heading {
justify-content: flex-end;
padding-right: 12vw;
}
}
/*
.rc-mv__name-header::before,
.rc-mv__name-header::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 2px;
background-color: var(--c-point-color);
}
.rc-mv__name-header::before {
left: 0;
transform: skewY(-10deg);
transform-origin: top left;
}
.rc-mv__name-header::after {
right: 0;
transform: skewY(10deg);
transform-origin: top right;
} */