@charset "UTF-8";
#contents--header {
background-color: var(--white);
position: relative;
z-index: 8;
}
@media only screen and (max-width: 767px) {
#contents--header {
display: none;
}
}
#contents--header .contents--header__inner {
display: grid;
grid-template-columns: min(12.153vw, 175px) 1fr;
justify-items: end;
padding-right: min(6.944vw, 100px);
padding-left: min(1.806vw, 26px);
height: min(5.556vw, 80px);
}
#contents--header .contents--header__logo {
width: min(12.153vw, 175px);
height: auto;
margin-top: min(1.528vw, 22px);
}
#contents--header .contents--nav {
display: flex;
-moz-column-gap: min(3.472vw, 50px);
column-gap: min(3.472vw, 50px);
}
@media only screen and (max-width: 767px) {
#contents--header .contents--nav {
display: grid;
grid-template-columns: 1fr;
}
}
#contents--header .contents--nav li {
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-medium);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
#contents--header .contents--nav li a {
display: block;
padding-top: min(2.083vw, 30px);
height: 100%;
position: relative;
transition: all var(--ease-in-out-200);
}
#contents--header .contents--nav li a::before {
background-image: url('data:image/svg+xml;charset=utf-8,');
background-position: 0 0;
background-size: min(0.833vw, 12px) auto;
background-repeat: no-repeat;
content: "";
display: block;
position: absolute;
right: 0;
left: 0;
bottom: min(1.389vw, 20px);
margin: 0 auto;
width: min(0.833vw, 12px);
height: min(0.486vw, 7px);
}
@media (hover: hover) and (pointer: fine) {
#contents--header .contents--nav li a:hover {
opacity: var(--opacity-5);
}
}
@media print, screen and (min-width: 768px) {
#contents--header--sp {
display: none;
pointer-events: none;
}
}
@media only screen and (max-width: 767px) {
#contents--header--sp {
position: relative;
z-index: 9000;
}
}
@media only screen and (max-width: 767px) {
#contents--header--sp[data-js-in-hero=false] .contents--header--sp__open-button {
visibility: visible;
opacity: 1;
}
}
@media only screen and (max-width: 767px) {
#contents--header--sp .contents--header--sp__open-button {
position: fixed;
visibility: hidden;
display: grid;
align-items: center;
justify-items: center;
top: var(--size-80);
right: 0;
width: 16.41vw;
height: 15.385vw;
border-top-left-radius: var(--size-4);
border-bottom-left-radius: var(--size-4);
background: #222222;
box-shadow: 0 0.769vw 2.564vw 0 rgba(0, 0, 0, 0.1);
opacity: 0;
transition: all var(--ease-in-out-300);
z-index: 4000;
}
}
@media only screen and (max-width: 767px) {
#contents--header--sp .contents--header--sp__open-button-text {
color: var(--white);
font-family: var(--family-en);
font-size: var(--size-14);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
}
@media only screen and (max-width: 767px) {
#contents--header--sp .contents--header--sp__modal {
inset: auto;
bottom: 0;
left: 0;
width: 100%;
height: calc(100dvh - 66px);
}
}
@media only screen and (max-width: 767px) {
#contents--header--sp .contents--header--sp__background {
position: absolute;
display: block;
bottom: 0;
left: 0;
width: 100%;
height: calc(100dvh - 66px);
background: transparent;
opacity: 0.85;
cursor: pointer;
}
}
@media only screen and (max-width: 767px) {
#contents--header--sp .contents--header--sp__modal-inner {
position: absolute;
display: block;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
bottom: 0;
left: 0;
width: 100%;
height: calc(100dvh - 66px);
background: #F8F8F8;
}
}
#contents--header--sp .contents--header--sp__heading {
display: flex;
align-items: center;
justify-content: space-between;
padding-left: var(--size-20);
padding-right: var(--size-22);
margin-top: var(--size-20);
margin-bottom: var(--size-24);
}
#contents--header--sp .contents--header--sp__logo {
width: 41.538vw;
height: 7.436vw;
}
@media only screen and (max-width: 767px) {
#contents--header--sp .contents--header--sp__close-button {
display: grid;
align-items: center;
justify-items: center;
width: var(--size-32);
height: var(--size-32);
}
}
@media only screen and (max-width: 767px) {
#contents--header--sp .contents--header--sp__close-button-icon {
width: var(--size-24);
height: var(--size-24);
fill: #222222;
}
}
@media only screen and (max-width: 767px) {
#contents--header--sp .contents--header--sp__navigation {
position: relative;
display: block;
padding-bottom: var(--size-55);
margin-inline: auto;
width: 78.462vw;
z-index: 5;
}
}
@media only screen and (max-width: 767px) {
#contents--header--sp .contents--header--sp__list {
margin-bottom: var(--size-30);
}
}
#contents--header--sp .contents--header--sp__list li {
border-bottom: 1px solid #E0E0E0;
}
#contents--header--sp .contents--header--sp__list a {
display: block;
padding-block: var(--size-22);
}
@media only screen and (max-width: 767px) {
#contents--header--sp .contents--header--sp__list a {
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-bold);
line-height: var(--line-height-170);
letter-spacing: 3%;
}
}
@media only screen and (max-width: 767px) {
#contents--header--sp .contents--header--sp__button {
display: flex;
flex-direction: column;
gap: var(--size-6);
}
}
@media only screen and (max-width: 767px) {
#contents--header--sp .contents--header--sp__button-catalog-download {
background: var(--red);
}
}
@media only screen and (max-width: 767px) {
#contents--header--sp .contents--header--sp__button-catalog-download .contents--header--sp__button_text,
#contents--header--sp .contents--header--sp__button-catalog-download .contents--header--sp__button_icon {
color: var(--white);
}
}
@media only screen and (max-width: 767px) {
#contents--header--sp .contents--header--sp__button-casestudy-download {
background: var(--white);
}
}
@media only screen and (max-width: 767px) {
#contents--header--sp .contents--header--sp__button-casestudy-download .contents--header--sp__button_text,
#contents--header--sp .contents--header--sp__button-casestudy-download .contents--header--sp__button_icon {
color: var(--red);
}
}
@media only screen and (max-width: 767px) {
#contents--header--sp .contents--header--sp__button-contact {
background: #000;
}
}
@media only screen and (max-width: 767px) {
#contents--header--sp .contents--header--sp__button-contact .contents--header--sp__button_text,
#contents--header--sp .contents--header--sp__button-contact .contents--header--sp__button_icon {
color: var(--white);
}
}
@media only screen and (max-width: 767px) {
#contents--header--sp .contents--header--sp__button-catalog-download,
#contents--header--sp .contents--header--sp__button-casestudy-download,
#contents--header--sp .contents--header--sp__button-contact {
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: var(--size-30);
height: var(--size-70);
box-shadow: 0 var(--size-2) var(--size-10) 0 rgba(0, 0, 0, 0.1);
}
}
@media only screen and (max-width: 767px) {
#contents--header--sp .contents--header--sp__button_text {
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-bold);
line-height: var(--line-height-170);
letter-spacing: 3%;
}
}
.switch__tab {
width: var(--container-width-pc);
margin-inline: auto;
}
@media only screen and (max-width: 767px) {
.switch__tab {
width: 100%;
}
}
.l-tab-button__list {
position: relative;
-moz-column-gap: var(--size-4);
column-gap: var(--size-4);
padding-bottom: var(--size-4);
margin-inline: auto;
}
@media print, screen and (min-width: 768px) {
.l-tab-button__list {
display: grid;
align-items: end;
justify-content: center;
grid-auto-flow: column;
grid-auto-columns: 1fr;
width: var(--container-width-pc);
}
}
@media only screen and (max-width: 767px) {
.l-tab-button__list {
display: flex;
flex-wrap: wrap;
grid-template-columns: repeat(auto-fit, minmax(29.231vw, 1fr));
row-gap: var(--size-4);
width: var(--container-width-sp);
}
}
@media print, screen and (min-width: 768px) {
.l-tab-button__list::before {
position: absolute;
display: inline-block;
content: "";
bottom: 0;
left: 0;
width: 100%;
height: var(--size-4);
background: var(--red);
}
}
@media only screen and (max-width: 767px) {
.l-tab-button__list li {
flex-grow: 1;
flex-basis: 0;
min-width: 29.231vw;
}
}
.c-tab-button {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: var(--size-80);
background: var(--white);
border: 1px solid var(--gray-3);
transition: all var(--ease-in-out-200);
}
@media print, screen and (min-width: 768px) {
.c-tab-button {
gap: var(--size-10);
min-width: min(16.458vw, 237px);
border-top-left-radius: var(--size-12);
border-top-right-radius: var(--size-12);
border-bottom: none;
}
}
@media only screen and (max-width: 767px) {
.c-tab-button {
padding-top: var(--size-10);
padding-bottom: var(--size-26);
flex-direction: column;
gap: var(--size-4);
min-width: 29.231vw;
min-height: 19.487vw;
border-radius: var(--size-12);
}
}
@media only screen and (max-width: 767px) {
.c-tab-button::before {
position: absolute;
display: inline-block;
visibility: visible;
content: "";
bottom: 1.026vw;
left: 50%;
width: var(--size-12);
height: var(--size-8);
background-image: url('data:image/svg+xml;charset=utf-8,');
background-position: center;
background-size: contain;
background-repeat: no-repeat;
opacity: 1;
transform: translateX(-50%);
transition: all var(--ease-in-out-200);
z-index: 2;
}
}
@media only screen and (max-width: 767px) {
.c-tab-button::after {
position: absolute;
display: inline-block;
content: "";
bottom: 0;
left: 0;
width: 100%;
height: var(--size-16);
background: var(--red);
pointer-events: none;
z-index: 1;
}
}
.c-tab-button:where([aria-pressed=true], [aria-selected=true]) {
border-color: var(--red);
background: var(--red);
}
@media only screen and (max-width: 767px) {
.c-tab-button:where([aria-pressed=true], [aria-selected=true]) {
padding-bottom: var(--size-10);
}
}
.c-tab-button:where([aria-pressed=true], [aria-selected=true])::before {
visibility: hidden;
opacity: 0;
pointer-events: none;
}
.c-tab-button:where([aria-pressed=true], [aria-selected=true])::after {
display: none;
}
@media (hover: hover) and (pointer: fine) {
.c-tab-button:not(:where([aria-pressed=true], [aria-selected=true])):hover {
opacity: var(--opacity-5);
}
}
.c-tab-button__title {
text-align: center;
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-bold);
line-height: var(--line-height-150);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
.c-tab-button__title {
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-bold);
line-height: var(--line-height-150);
letter-spacing: 3%;
}
}
:where([aria-pressed=true], [aria-selected=true]) .c-tab-button__title {
color: var(--white);
}
.c-tab-button__icon {
flex-shrink: 0;
}
@media only screen and (max-width: 767px) {
.c-tab-button__icon {
order: 2;
}
}
:where([aria-pressed=true], [aria-selected=true]) .c-tab-button__icon {
color: var(--white);
}
.c-title_image-group {
position: relative;
margin-top: max(-16.667vw, -240px);
}
@media only screen and (max-width: 767px) {
.c-title_image-group {
margin-top: 0;
}
}
.c-title_image-group .title_bg.parallax-wrapper {
overflow: hidden;
}
@media print, screen and (min-width: 768px) {
.c-title_image-group .title_bg.parallax-wrapper {
margin-left: calc(50% - 50vw);
width: calc(min(91.667vw, 1320px) + 50vw - 50%);
height: min(33.333vw, 480px);
}
}
@media only screen and (max-width: 767px) {
.c-title_image-group .title_bg.parallax-wrapper {
width: 100%;
height: 82.051vw;
}
}
.c-title_image-group .title_bg.parallax-wrapper picture {
display: block;
width: 100%;
height: 100%;
}
.c-title_image-group .title_bg.parallax-wrapper img.js-parallax {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.c-title_image-group .title_content {
display: grid;
grid-template-columns: auto 1fr; /* 1列目: テキスト, 2列目: 装飾 */
-moz-column-gap: min(2.778vw, 40px);
column-gap: min(2.778vw, 40px); /* h2と装飾の間の余白 */
align-content: center;
position: absolute;
top: 0;
bottom: 0;
left: min(8.333vw, 120px);
margin: auto 0;
}
@media print, screen and (min-width: 768px) {
.c-title_image-group .title_content {
width: calc(min(83.333vw, 1200px) - min(6.25vw, 90px));
height: min(33.333vw, 480px);
}
}
.c-title_image-group .title_content {
padding-top: 1.5em;
}
@media only screen and (max-width: 767px) {
.c-title_image-group .title_content {
position: absolute;
top: 0;
bottom: 0;
left: min(8.333vw, 120px);
margin: auto 0;
height: -moz-fit-content;
height: fit-content;
display: block;
left: 12.821vw;
}
}
.c-title_image-group .ttl_decoration__wrap {
grid-column: 2;
grid-row: 1; /* 1行目に配置（h2と同じ行） */
align-self: center;
position: relative;
width: min(21.528vw, 310px);
height: min(2.083vw, 30px);
}
@media print, screen and (min-width: 768px) {
.c-title_image-group .ttl_decoration__wrap {
width: 100%;
}
}
@media only screen and (max-width: 767px) {
.c-title_image-group .ttl_decoration__wrap {
display: none;
}
}
.c-title_image-group .ttl_decoration {
position: absolute;
top: 50%;
left: 50%;
/* ラッパーの中央に */
transform: translate(-50%, -50%) rotate(-90deg);
transform-origin: center;
}
.c-title_image-group .title_text {
grid-column: 1;
grid-row: 1; /* 1行目に配置 */
align-self: center; /* h2と装飾を縦中央で揃える */
position: relative;
color: var(--white);
font-family: var(--family-jp);
font-size: var(--size-50);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
@media print, screen and (min-width: 768px) {
.c-title_image-group .title_text {
padding-left: min(2.778vw, 40px);
}
}
@media only screen and (max-width: 767px) {
.c-title_image-group .title_text {
font-family: var(--family-jp);
font-size: var(--size-32);
font-weight: var(--weight-bold);
line-height: var(--line-height-140);
letter-spacing: 3%;
}
.c-title_image-group .title_text .small {
font-family: var(--family-jp);
font-size: var(--size-24);
font-weight: var(--weight-bold);
line-height: var(--line-height-140);
letter-spacing: 3%;
display: block;
}
}
@media print, screen and (min-width: 768px) {
.c-title_image-group .title_text::before {
background-color: var(--red);
content: "";
display: block;
position: absolute;
left: 0px;
top: 0px;
bottom: 0;
margin: auto;
width: 10px;
height: 10px;
box-shadow: 0 0 20px 0 #E60039;
}
}
.c-title_image-group .en-copy {
color: var(--white);
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-medium);
line-height: var(--line-height-100);
letter-spacing: 3%;
margin-top: min(1.736vw, 25px);
}
@media print, screen and (min-width: 768px) {
.c-title_image-group .en-copy {
padding-left: min(2.778vw, 40px);
width: 100%;
}
}
@media only screen and (max-width: 767px) {
.c-title_image-group .en-copy {
font-family: var(--family-jp);
font-size: var(--size-12);
font-weight: var(--weight-medium);
line-height: var(--line-height-100);
letter-spacing: 3%;
margin-top: 5.128vw;
}
}
.c-dot-animation {
--_track-length: var(--c-dot-background-length, var(--size-56));
--_gradient-length: var(--c-dot-line-length, 100%);
--_dot-size: var(--c-dot-size, var(--size-6));
--_move-y: var(--c-dot-move-y, calc(var(--_track-length) * -1));
--_height: calc(var(--_track-length) + (var(--_dot-size) / 2));
--_ripple-blur: var(--c-dot-ripple-blur, var(--size-10));
--_ripple-spread: var(--c-dot-ripple-spread, 0);
position: relative;
display: block;
width: var(--_dot-size);
height: var(--_height);
}
.c-dot-animation:where([data-js-animate=true]) .c-dot-animation__dot {
opacity: 1;
transform: translateY(0);
}
.c-dot-animation:where([data-js-animate=true]) .c-dot-animation__line {
opacity: 1;
transform: scaleY(1);
}
.c-dot-animation:where([data-js-animate=true]) .c-dot-animation__ripple {
animation: ripple-expand 1s cubic-bezier(0, 0, 0, 1) 0.8s 1 forwards;
}
.c-dot-animation.size--small {
--c-dot-background-length: var(--size-56);
--c-dot-line-length: var(--size-56);
--c-dot-size: var(--size-6);
--c-dot-ripple-blur: var(--size-10);
--c-dot-ripple-spread: 0;
}
@media only screen and (max-width: 767px) {
.c-dot-animation.size--small {
--c-dot-background-length: var(--size-36);
--c-dot-line-length: var(--size-36);
}
}
.c-dot-animation.size--large {
--c-dot-background-length: min(21.528vw, 310px);
--c-dot-line-length: min(7.986vw, 115px);
--c-dot-size: var(--size-12);
--c-dot-ripple-blur: var(--size-30);
--c-dot-ripple-spread: var(--size-5);
}
@media only screen and (max-width: 767px) {
.c-dot-animation.size--large {
--c-dot-background-length: 51.282vw;
--c-dot-line-length: 25.641vw;
--c-dot-size: var(--size-8);
--c-dot-ripple-blur: var(--size-14);
--c-dot-ripple-spread: 1px;
}
}
.c-dot-animation__background {
position: absolute;
display: block;
margin-inline: auto;
top: 0;
left: 0;
right: 0;
width: 1px;
height: var(--_track-length);
background: var(--gray-1);
}
.c-dot-animation__dot {
position: absolute;
display: block;
margin-inline: auto;
bottom: calc((var(--_dot-size) - var(--_dot-size)) / 2);
left: 0;
right: 0;
width: var(--_dot-size);
height: var(--_dot-size);
background: var(--red);
opacity: 0;
transform: translateY(var(--_move-y));
transition: all 1s cubic-bezier(0, 0, 0, 1);
}
.c-dot-animation__line {
position: absolute;
display: block;
margin-inline: auto;
bottom: calc(var(--_dot-size) / 2);
left: 0;
right: 0;
width: 1px;
height: var(--_track-length);
background: linear-gradient(0deg, var(--red) 0%, rgba(230, 0, 57, 0) var(--_gradient-length));
opacity: 0;
transform-origin: top center;
transform: scaleY(0);
transition: all 1s cubic-bezier(0, 0, 0, 1);
}
.c-dot-animation__ripple {
position: absolute;
display: block;
visibility: hidden;
opacity: 0;
margin-inline: auto;
bottom: 0;
left: 0;
right: 0;
width: var(--_dot-size);
height: var(--_dot-size);
border-radius: 50%;
box-shadow: 0 0 var(--_ripple-blur) var(--_ripple-spread) rgba(230, 0, 57, 0.5);
background: transparent;
}
@keyframes ripple-expand {
0% {
transform: scale(0);
}
100% {
visibility: visible;
transform: scale(1);
opacity: 1;
}
}
#spec:before {
content: none !important;
}
#spec .bg-parts__container {
transform: rotate(180deg);
right: inherit;
left: calc(50% + min(20.833vw, 300px));
top: 0;
}
@media only screen and (max-width: 767px) {
#spec .bg-parts__container {
transform: rotate(0deg);
width: 70.513vw;
height: 58.205vw;
left: inherit;
right: -20.513vw;
top: 0;
}
}
#achieve .achieve__inner {
position: relative;
}
#achieve .bg-parts__container {
left: calc(50% + min(25vw, 360px));
top: min(23.194vw, 334px);
z-index: 0;
}
@media only screen and (max-width: 767px) {
#achieve .bg-parts__container {
width: 70.513vw;
height: 58.205vw;
left: inherit;
right: -12.821vw;
top: 66.667vw;
z-index: 0;
}
}
/* 動画のアスペクト比と正方形グリッド領域の定義 */
.bg-parts__container {
position: absolute;
width: 100vw;
height: 100vh;
max-width: 900px;
max-height: 900px;
aspect-ratio: 1/1;
background-color: #ffffff;
container-type: size;
width: min(40.278vw, 580px);
height: min(35.694vw, 514px);
}
/* 格子状のグリッド線スタイル */
.line {
position: absolute;
background-color: #e2e2e2;
}
.v-line {
width: 1px;
}
.h-line {
height: 1px;
}
/* ピンクの四角形ドット (#FC84A2) */
.dot {
position: absolute;
width: 7px;
height: 7px;
background-color: #FC84A2;
box-shadow: 0 0 6px rgba(252, 132, 162, 0.6);
transform: translate(-50%, -50%);
opacity: 0;
z-index: 10;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
/* 四角形の後ろ（下側）にぴったり付く垂直軌跡 */
.trail-v-up {
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 0;
transform: translateX(-50%);
background: linear-gradient(0deg, rgba(252, 132, 162, 0) 0%, rgba(252, 132, 162, 0.85) 100%);
box-shadow: 0 0 4px rgba(252, 132, 162, 0.3);
opacity: 0;
pointer-events: none;
z-index: -1;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
/* 四角形の後ろ（左側）にぴったり付く水平軌跡 */
.trail-h-right {
position: absolute;
top: 50%;
right: 50%;
height: 2px;
width: 0;
transform: translateY(-50%);
background: linear-gradient(270deg, rgba(252, 132, 162, 0.85) 0%, rgba(252, 132, 162, 0) 100%);
box-shadow: 0 0 4px rgba(252, 132, 162, 0.3);
opacity: 0;
pointer-events: none;
z-index: -1;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
/* 【ドットA】左上(25%, 22.5%) -> 右へ移動(49.5%, 22.5%) -> 上へ上昇(49.5%, 12%) */
@keyframes dotA-move {
0% {
opacity: 1;
left: 49.5%;
top: 22.5%;
}
8% {
opacity: 1;
left: 49.5%;
top: 22.5%;
}
18% {
opacity: 1;
left: 49.5%;
top: 12%;
}
24% {
opacity: 0;
left: 49.5%;
top: 12%;
}
88% {
opacity: 0;
left: 25%;
top: 22.5%;
}
90% {
opacity: 1;
left: 25%;
top: 22.5%;
}
98% {
opacity: 1;
left: 49.5%;
top: 22.5%;
}
100% {
opacity: 1;
left: 49.5%;
top: 22.5%;
}
}
@keyframes trailA-h-move {
0%, 89% {
opacity: 0;
width: 0cqw;
}
90% {
opacity: 0.85;
width: 0cqw;
}
98% {
opacity: 0.85;
width: 24.5cqw;
}
100% {
opacity: 0;
width: 0cqw;
}
}
@keyframes trailA-v-move {
0%, 7% {
opacity: 0;
height: 0cqh;
}
8% {
opacity: 0.85;
height: 0cqh;
}
18% {
opacity: 0.85;
height: 10.5cqh;
}
22%, 100% {
opacity: 0;
height: 0cqh;
}
}
/* 【ドットB】左下(25%, 66.5%) -> 上(25%, 47.5%) -> 右(49.5%, 47.5%) -> 上(49.5%, 22.5%) */
@keyframes dotB-move {
0%, 15% {
opacity: 0;
left: 25%;
top: 66.5%;
}
18% {
opacity: 1;
left: 25%;
top: 66.5%;
}
28% {
opacity: 1;
left: 25%;
top: 47.5%;
}
33% {
opacity: 1;
left: 25%;
top: 47.5%;
}
43% {
opacity: 1;
left: 49.5%;
top: 47.5%;
}
48% {
opacity: 1;
left: 49.5%;
top: 47.5%;
}
58% {
opacity: 1;
left: 49.5%;
top: 22.5%;
}
63% {
opacity: 1;
left: 49.5%;
top: 22.5%;
}
68% {
opacity: 0;
left: 49.5%;
top: 22.5%;
}
100% {
opacity: 0;
left: 49.5%;
top: 22.5%;
}
}
@keyframes trailB-v1-move {
0%, 17% {
opacity: 0;
height: 0cqh;
}
18% {
opacity: 0.85;
height: 0cqh;
}
28% {
opacity: 0.85;
height: 19cqh;
}
32%, 100% {
opacity: 0;
height: 0cqh;
}
}
@keyframes trailB-h1-move {
0%, 32% {
opacity: 0;
width: 0cqw;
}
33% {
opacity: 0.85;
width: 0cqw;
}
43% {
opacity: 0.85;
width: 24.5cqw;
}
47%, 100% {
opacity: 0;
width: 0cqw;
}
}
@keyframes trailB-v2-move {
0%, 47% {
opacity: 0;
height: 0cqh;
}
48% {
opacity: 0.85;
height: 0cqh;
}
58% {
opacity: 0.85;
height: 25cqh;
}
62%, 100% {
opacity: 0;
height: 0cqh;
}
}
/* 【ドットC】右下(74.5%, 82.5%) -> 上(74.5%, 66.5%) -> 上(74.5%, 37.5%) -> 上(74.5%, 22.5%) */
@keyframes dotC-move {
0%, 23% {
opacity: 0;
left: 74.5%;
top: 82.5%;
}
26% {
opacity: 1;
left: 74.5%;
top: 82.5%;
}
34% {
opacity: 1;
left: 74.5%;
top: 66.5%;
}
58% {
opacity: 1;
left: 74.5%;
top: 66.5%;
}
68% {
opacity: 1;
left: 74.5%;
top: 37.5%;
}
72% {
opacity: 1;
left: 74.5%;
top: 37.5%;
}
80% {
opacity: 1;
left: 74.5%;
top: 22.5%;
}
85% {
opacity: 0;
left: 74.5%;
top: 22.5%;
}
100% {
opacity: 0;
left: 74.5%;
top: 22.5%;
}
}
@keyframes trailC-v-move {
0%, 25% {
opacity: 0;
height: 0cqh;
}
26% {
opacity: 0.85;
height: 0cqh;
}
34% {
opacity: 0.85;
height: 16cqh;
}
38%, 57% {
opacity: 0;
height: 0cqh;
}
58% {
opacity: 0.85;
height: 0cqh;
}
68% {
opacity: 0.85;
height: 29cqh;
}
71%, 72% {
opacity: 0;
height: 0cqh;
}
72% {
opacity: 0.85;
height: 0cqh;
}
80% {
opacity: 0.85;
height: 15cqh;
}
84%, 100% {
opacity: 0;
height: 0cqh;
}
}
/* 【ドットD】左側中段(10%, 37.5%) -> 右へ水平移動(37%, 37.5%) */
@keyframes dotD-move {
0%, 38% {
opacity: 0;
left: 10%;
top: 37.5%;
}
41% {
opacity: 1;
left: 10%;
top: 37.5%;
}
51% {
opacity: 1;
left: 37%;
top: 37.5%;
}
56% {
opacity: 0;
left: 37%;
top: 37.5%;
}
100% {
opacity: 0;
left: 37%;
top: 37.5%;
}
}
@keyframes trailD-h-move {
0%, 40% {
opacity: 0;
width: 0cqw;
}
41% {
opacity: 0.85;
width: 0cqw;
}
51% {
opacity: 0.85;
width: 27cqw;
}
55%, 100% {
opacity: 0;
width: 0cqw;
}
}
.dot-a {
animation-name: dotA-move;
}
.trail-a-h {
animation-name: trailA-h-move;
}
.trail-a-v {
animation-name: trailA-v-move;
}
.dot-b {
animation-name: dotB-move;
}
.trail-b-v1 {
animation-name: trailB-v1-move;
}
.trail-b-h1 {
animation-name: trailB-h1-move;
}
.trail-b-v2 {
animation-name: trailB-v2-move;
}
.trail-b-h2 {
animation-name: trailB-h2-move;
}
.dot-c {
animation-name: dotC-move;
}
.trail-c-v {
animation-name: trailC-v-move;
}
.dot-d {
animation-name: dotD-move;
}
.trail-d-h {
animation-name: trailD-h-move;
}
.mod-bnr_space {
margin-top: min(4.167vw, 60px);
}
@media only screen and (max-width: 767px) {
.mod-bnr_space {
margin-top: 10.256vw;
margin-inline: 5.128vw;
}
}
.mod-bnr {
display: block;
position: relative;
}
@media print, screen and (min-width: 768px) {
.mod-bnr {
height: min(12.917vw, 186px);
transition: opacity var(--ease-in-out-200);
}
}
@media only screen and (max-width: 767px) {
.mod-bnr {
height: 61.538vw;
}
}
.mod-bnr .bnr_copy {
color: var(--white);
}
@media print, screen and (min-width: 768px) {
.mod-bnr .bnr_copy {
margin-left: min(23.819vw, 343px);
font-family: var(--family-jp);
font-size: var(--size-26);
font-weight: var(--weight-bold);
line-height: var(--line-height-160);
letter-spacing: 3%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
}
@media only screen and (max-width: 767px) {
.mod-bnr .bnr_copy {
font-family: var(--family-jp);
font-size: var(--size-20);
font-weight: var(--weight-bold);
line-height: var(--line-height-150);
letter-spacing: 3%;
margin-left: 7.692vw;
padding-top: 17.436vw;
}
}
.mod-bnr .bnr_copy em {
font-style: normal;
border-bottom: min(0.278vw, 4px) solid var(--red);
padding-bottom: 0.1em;
}
@media only screen and (max-width: 767px) {
.mod-bnr .bnr_copy em {
border-bottom: 0.769vw solid var(--red);
}
}
.mod-bnr .bnr_btn-part {
background: var(--grd_red);
color: var(--white);
display: grid;
align-items: center;
justify-items: center;
transition: all var(--ease-in-out-300);
}
@media print, screen and (min-width: 768px) {
.mod-bnr .bnr_btn-part {
position: absolute;
right: min(6.25vw, 90px);
top: 0;
bottom: 0;
margin: auto 0;
width: min(20.833vw, 300px);
height: min(4.861vw, 70px);
}
}
@media only screen and (max-width: 767px) {
.mod-bnr .bnr_btn-part {
position: absolute;
bottom: 0;
width: 100%;
height: var(--size-60);
justify-items: start;
}
}
.mod-bnr .bnr_btn-part .btn_text {
font-family: var(--family-jp);
font-size: var(--size-18);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
@media print, screen and (min-width: 768px) {
.mod-bnr .bnr_btn-part .btn_text {
padding-right: min(0.694vw, 10px);
}
}
@media only screen and (max-width: 767px) {
.mod-bnr .bnr_btn-part .btn_text {
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
}
@media only screen and (max-width: 767px) {
.mod-bnr .bnr_btn-part .c-button {
display: flex;
justify-content: space-between;
padding: 0 7.692vw;
height: var(--size-60);
}
}
.mod-bnr .bnr_btn-part .button_icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: var(--size-30);
width: var(--size-20);
height: var(--size-20);
transition: all var(--ease-in-out-300);
}
@media only screen and (max-width: 767px) {
.mod-bnr .bnr_btn-part .button_icon {
right: var(--size-26);
width: var(--size-16);
height: var(--size-16);
}
}
@media print, screen and (min-width: 768px) {
.mod-bnr:hover {
opacity: 0.9;
}
.mod-bnr:hover .bnr_btn-part .c-button:where(.theme--red)::before, .mod-bnr:hover .bnr_btn-part .c-button:where(.theme--red)::after {
opacity: 1;
}
.mod-bnr:hover .bnr_btn-part .c-button:where(.theme--red) .c-button__icon {
color: var(--red);
}
.mod-bnr:hover .bnr_btn-part .c-button:where(.theme--red) .c-button__text {
color: var(--red);
}
.mod-bnr:hover .bnr_btn-part .c-button:where(.theme--red) {
color: var(--red);
}
.mod-bnr:hover .bnr_btn-part .c-button:where(.theme--red-border)::before {
opacity: 1;
}
.mod-bnr:hover .bnr_btn-part .c-button:where(.theme--red-border)::after {
opacity: 0;
}
.mod-bnr:hover .bnr_btn-part .c-button:where(.theme--red-border) .c-button__icon {
color: var(--white);
}
.mod-bnr:hover .bnr_btn-part .c-button:where(.theme--red-border) .c-button__text {
color: var(--white);
}
.mod-bnr:hover .bnr_btn-part .c-button:where(.theme--white) {
background: var(--black);
}
.mod-bnr:hover .bnr_btn-part .c-button:where(.theme--white) .c-button__icon {
color: var(--white);
}
.mod-bnr:hover .bnr_btn-part .c-button:where(.theme--white) .c-button__text {
color: var(--white);
}
}
.mod-bnr.type--benefits {
background: url(../images/index/banner/benefits.webp) 0 0/100% auto no-repeat;
}
@media only screen and (max-width: 767px) {
.mod-bnr.type--benefits {
background: url(../images/index/banner/benefits_sp.webp) 0 0/100% auto no-repeat;
}
}
.mod-bnr.type--spec {
background: url(../images/index/banner/spec.webp) 0 0/100% auto no-repeat;
}
@media only screen and (max-width: 767px) {
.mod-bnr.type--spec {
background: url(../images/index/banner/spec_sp.webp) 0 0/100% auto no-repeat;
}
}
.mod-bnr.type--support {
background: url(../images/index/banner/support.webp) 0 0/100% auto no-repeat;
}
@media only screen and (max-width: 767px) {
.mod-bnr.type--support {
background: url(../images/index/banner/support_sp.webp) 0 0/100% auto no-repeat;
}
}
.c-button {
position: relative;
display: grid;
align-items: center;
justify-items: center;
z-index: 10;
transition: all var(--ease-in-out-200);
}
.c-button .c-button__text,
.c-button .c-button__icon {
transition: all var(--ease-in-out-200);
}
.c-button:where(.theme--red) {
height: var(--size-70);
background: var(--grd_red);
}
@media print, screen and (min-width: 768px) {
.c-button:where(.theme--red) {
width: min(20.833vw, 300px);
}
}
@media only screen and (max-width: 767px) {
.c-button:where(.theme--red) {
width: 100%;
}
}
.c-button:where(.theme--red)::before, .c-button:where(.theme--red)::after {
position: absolute;
display: block;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none;
transition: opacity var(--ease-in-out-200);
}
.c-button:where(.theme--red)::before {
background: var(--white);
z-index: -1;
}
.c-button:where(.theme--red)::after {
border: var(--size-2) solid var(--red);
z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
.c-button:where(.theme--red):hover::before, .c-button:where(.theme--red):hover::after {
opacity: 1;
}
.c-button:where(.theme--red):hover .c-button__icon {
color: var(--red);
}
.c-button:where(.theme--red):hover .c-button__text {
color: var(--red);
}
}
.c-button:where(.theme--red-border) {
height: var(--size-70);
background: var(--white);
}
@media print, screen and (min-width: 768px) {
.c-button:where(.theme--red-border) {
width: min(20.833vw, 300px);
}
}
@media only screen and (max-width: 767px) {
.c-button:where(.theme--red-border) {
width: 100%;
}
}
.c-button:where(.theme--red-border)::before, .c-button:where(.theme--red-border)::after {
position: absolute;
display: block;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
transition: opacity var(--ease-in-out-200);
}
.c-button:where(.theme--red-border)::before {
background: var(--grd_red);
opacity: 0;
z-index: -1;
}
.c-button:where(.theme--red-border)::after {
border: var(--size-2) solid var(--red);
opacity: 1;
z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
.c-button:where(.theme--red-border):hover::before {
opacity: 1;
}
.c-button:where(.theme--red-border):hover::after {
opacity: 0;
}
.c-button:where(.theme--red-border):hover .c-button__icon {
color: var(--white);
}
.c-button:where(.theme--red-border):hover .c-button__text {
color: var(--white);
}
}
.c-button:where(.theme--white) {
height: var(--size-70);
border: var(--size-2) solid var(--white);
background: var(--white);
}
@media print, screen and (min-width: 768px) {
.c-button:where(.theme--white) {
width: min(22.917vw, 330px);
}
}
@media only screen and (max-width: 767px) {
.c-button:where(.theme--white) {
width: 100%;
}
}
@media (hover: hover) and (pointer: fine) {
.c-button:where(.theme--white):hover {
background: var(--black);
}
.c-button:where(.theme--white):hover .c-button__icon {
color: var(--white);
}
.c-button:where(.theme--white):hover .c-button__text {
color: var(--white);
}
}
.c-button:where(.theme--black) {
background: var(--black);
}
@media print, screen and (min-width: 768px) {
.c-button:where(.theme--black) {
width: min(25.694vw, 370px);
height: var(--size-80);
}
}
@media only screen and (max-width: 767px) {
.c-button:where(.theme--black) {
width: 100%;
height: var(--size-66);
}
}
@media (hover: hover) and (pointer: fine) {
.c-button:where(.theme--black):hover {
opacity: var(--opacity-7);
}
}
.c-button__text {
width: -moz-fit-content;
width: fit-content;
text-align: center;
}
@media print, screen and (min-width: 768px) {
.c-button__text {
margin-right: var(--size-32);
}
}
@media only screen and (max-width: 767px) {
.c-button__text {
margin-right: var(--size-20);
}
}
:where(.theme--red) .c-button__text {
color: var(--white);
font-family: var(--family-jp);
font-size: var(--size-18);
font-weight: var(--weight-bold);
line-height: var(--line-height-170);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
:where(.theme--red) .c-button__text {
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-bold);
line-height: var(--line-height-170);
letter-spacing: 3%;
}
}
:where(.theme--red-border) .c-button__text {
color: var(--red);
font-family: var(--family-jp);
font-size: var(--size-18);
font-weight: var(--weight-bold);
line-height: var(--line-height-170);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
:where(.theme--red-border) .c-button__text {
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-bold);
line-height: var(--line-height-170);
letter-spacing: 3%;
}
}
:where(.theme--white) .c-button__text {
color: var(--black);
font-family: var(--family-jp);
font-size: var(--size-18);
font-weight: var(--weight-bold);
line-height: var(--line-height-170);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
:where(.theme--white) .c-button__text {
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-bold);
line-height: var(--line-height-170);
letter-spacing: 3%;
}
}
:where(.theme--black) .c-button__text {
color: var(--white);
}
@media print, screen and (min-width: 768px) {
:where(.theme--black) .c-button__text {
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-bold);
line-height: var(--line-height-170);
letter-spacing: 3%;
}
}
@media only screen and (max-width: 767px) {
:where(.theme--black) .c-button__text {
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-bold);
line-height: var(--line-height-170);
letter-spacing: 3%;
}
}
.c-button__icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
@media print, screen and (min-width: 768px) {
.c-button__icon {
right: var(--size-32);
width: var(--size-20);
height: var(--size-20);
}
}
@media only screen and (max-width: 767px) {
.c-button__icon {
right: var(--size-26);
width: var(--size-16);
height: var(--size-16);
}
}
:where(.theme--red) .c-button__icon {
color: var(--white);
}
:where(.theme--red-border) .c-button__icon {
color: var(--red);
}
:where(.theme--white) .c-button__icon {
color: var(--black);
}
:where(.theme--black) .c-button__icon {
color: var(--white);
}
[data-js-modal],
[data-js-youtube-modal] {
position: fixed;
display: block;
inset: 0;
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: all var(--ease-in-out-300);
z-index: 9000;
}
[data-js-modal]:where([data-js-modal-state=true]), [data-js-modal]:where([data-js-youtube-modal-state=true]),
[data-js-youtube-modal]:where([data-js-modal-state=true]),
[data-js-youtube-modal]:where([data-js-youtube-modal-state=true]) {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
[data-js-modal-background],
[data-js-youtube-modal-background] {
display: block;
visibility: hidden;
width: 100%;
height: 100%;
background: var(--bg-black);
cursor: pointer;
opacity: 0;
transition: all var(--ease-in-out-300);
}
:where([data-js-modal-state=true]) [data-js-modal-background], :where([data-js-youtube-modal-state=true]) [data-js-modal-background],
:where([data-js-modal-state=true]) [data-js-youtube-modal-background],
:where([data-js-youtube-modal-state=true]) [data-js-youtube-modal-background] {
visibility: visible;
opacity: 0.85;
}
[data-js-modal-inner],
[data-js-youtube-modal-inner] {
position: absolute;
display: block;
visibility: hidden;
margin-inline: auto;
top: 50%;
left: 50%;
height: auto;
opacity: 0;
transform: translate(-50%, -48%);
transition: all var(--ease-in-out-300);
will-change: transform;
}
:where([data-js-modal-state=true]) [data-js-modal-inner], :where([data-js-youtube-modal-state=true]) [data-js-modal-inner],
:where([data-js-modal-state=true]) [data-js-youtube-modal-inner],
:where([data-js-youtube-modal-state=true]) [data-js-youtube-modal-inner] {
visibility: visible;
opacity: 1;
transform: translate(-50%, -50%);
}
[data-js-modal-close],
[data-js-youtube-modal-close] {
transition: all var(--ease-in-out-200);
}
@media (hover: hover) and (pointer: fine) {
[data-js-modal-close]:hover,
[data-js-youtube-modal-close]:hover {
opacity: var(--opacity-7);
}
}
.c-video-modal__background {
background: #000;
}
:where([data-js-youtube-modal-state=true]) .c-video-modal__background {
opacity: 0.92;
}
.c-video-modal__inner {
width: min(66.667vw, 960px);
}
@media only screen and (max-width: 767px) {
.c-video-modal__inner {
width: 100%;
}
}
.c-video-modal__content {
overflow: hidden;
margin-inline: auto;
width: 100%;
aspect-ratio: 16/9;
background: var(--bg-black);
}
.c-video-modal__content iframe {
width: 100%;
height: 100%;
border: none;
}
.c-video-modal__close {
position: absolute;
display: block;
margin: var(--size-40);
top: 0;
right: 0;
width: var(--size-24);
height: var(--size-24);
cursor: pointer;
z-index: 5;
}
@media only screen and (max-width: 767px) {
.c-video-modal__close {
margin: var(--size-24);
}
}
.c-video-modal__close-icon {
fill: var(--white);
}
[data-js-accordion-content] {
overflow: hidden;
height: 0;
transition: height 0.3s ease;
will-change: height;
}
.c-accordion__button {
position: relative;
display: grid;
align-items: center;
grid-template-columns: 1fr auto;
gap: var(--size-10);
list-style: none;
cursor: pointer;
padding-inline: var(--size-20);
padding-block: var(--size-30);
transition: all var(--cubic-bezier-400);
}
@media only screen and (max-width: 767px) {
.c-accordion__button {
padding-inline: 0;
padding-block: var(--size-20);
}
}
@media (hover: hover) and (pointer: fine) {
.c-accordion__button:hover {
opacity: var(--opacity-5);
}
}
.c-accordion__button::before {
position: absolute;
display: inline-block;
content: "";
bottom: 0;
left: 0;
width: -webkit-fill-available;
width: -moz-available;
width: stretch;
height: 1px;
background: var(--gray-1);
transition: all var(--cubic-bezier-400);
}
.c-accordion__button::-webkit-details-marker {
display: none;
}
.c-accordion__title {
display: grid;
align-items: center;
grid-template-columns: auto 1fr;
gap: var(--size-20);
}
@media only screen and (max-width: 767px) {
.c-accordion__title {
gap: var(--size-14);
}
}
.c-accordion__title-prefix {
display: grid;
align-items: center;
justify-items: center;
width: var(--size-50);
height: var(--size-50);
border-radius: var(--size-6);
background: var(--bg-red);
color: var(--red);
font-family: var(--family-en);
font-size: var(--size-20);
font-weight: var(--weight-regular);
line-height: var(--line-height-170);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
.c-accordion__title-prefix {
width: var(--size-34);
height: var(--size-34);
border-radius: var(--size-4);
font-family: var(--family-en);
font-size: var(--size-18);
font-weight: var(--weight-regular);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
}
.c-accordion__title-text {
font-family: var(--family-jp);
font-size: var(--size-18);
font-weight: var(--weight-medium);
line-height: var(--line-height-170);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
.c-accordion__title-text {
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-medium);
line-height: var(--line-height-170);
letter-spacing: 3%;
}
}
.c-accordion__icon {
position: relative;
overflow: hidden;
display: inline-block;
width: var(--size-40);
height: var(--size-40);
border-radius: 50%;
background: var(--red);
transition: all var(--cubic-bezier-400);
}
@media only screen and (max-width: 767px) {
.c-accordion__icon {
width: var(--size-30);
height: var(--size-30);
}
}
.c-accordion__icon::before, .c-accordion__icon::after {
position: absolute;
content: "";
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all var(--cubic-bezier-400);
will-change: transform;
z-index: 5;
}
.c-accordion__icon::before {
width: var(--size-12);
height: var(--size-2);
background: var(--white);
}
@media only screen and (max-width: 767px) {
.c-accordion__icon::before {
width: var(--size-10);
}
}
.c-accordion__icon::after {
width: var(--size-2);
height: var(--size-12);
background: var(--white);
}
@media only screen and (max-width: 767px) {
.c-accordion__icon::after {
height: var(--size-10);
}
}
:where(.c-accordion__button[aria-expanded=true]) .c-accordion__icon {
background: var(--bg-gray);
}
:where(.c-accordion__button[aria-expanded=true]) .c-accordion__icon::before, :where(.c-accordion__button[aria-expanded=true]) .c-accordion__icon::after {
background: var(--white);
}
:where(.c-accordion__button[aria-expanded=true]) .c-accordion__icon::after {
transform: translate(-50%, -50%) rotate(90deg);
opacity: 0;
}
.c-accordion__content {
padding-inline: var(--size-90);
padding-block: var(--size-40);
border-bottom: 1px solid var(--gray-1);
background-color: var(--gray-2);
font-family: var(--family-jp);
font-size: var(--size-18);
font-weight: var(--weight-regular);
line-height: var(--line-height-180);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
.c-accordion__content {
padding-inline: var(--size-30);
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-regular);
line-height: var(--line-height-170);
letter-spacing: 3%;
}
}
[data-js-filter-item] {
animation: filterFadeIn 0.4s ease-out forwards;
}
[data-js-filter-item][hidden] {
display: none;
}
@keyframes filterFadeIn {
0% {
opacity: 0;
transform: translateY(var(--size-5));
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.l-filter-button__list {
position: relative;
display: flex;
flex-wrap: wrap;
gap: var(--size-12);
}
.c-filter-button {
padding-inline: var(--size-30);
padding-block: var(--size-10);
border: 1px solid var(--red);
border-radius: var(--size-100);
display: flex;
align-items: center;
justify-content: center;
transition: all var(--ease-in-out-200);
}
.c-filter-button:where([aria-pressed=true]) {
background: var(--red);
}
@media (hover: hover) and (pointer: fine) {
.c-filter-button:hover {
opacity: var(--opacity-5);
}
}
@media only screen and (max-width: 767px) {
.c-filter-button {
padding-inline: var(--size-20);
}
}
.c-filter-button__title {
color: var(--red);
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-regular);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
:where([aria-pressed=true]) .c-filter-button__title {
color: var(--white);
}
#contents--navigation {
position: fixed;
display: block;
visibility: hidden;
top: 0;
left: 0;
width: 100%;
height: var(--size-74);
background: var(--white);
box-shadow: 0 0 var(--size-20) rgba(169, 172, 178, 0.1);
opacity: 0;
pointer-events: none;
transform: translateY(-5%);
transition: all var(--ease-in-out-200);
z-index: 500;
}
@media only screen and (max-width: 767px) {
#contents--navigation {
display: none;
}
}
#contents--navigation::before {
position: absolute;
display: block;
content: "";
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: #EEE;
}
#contents--navigation:where([data-js-in-hero=false]) {
visibility: visible;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
#contents--navigation .contents-navigation {
display: grid;
grid-auto-flow: column;
align-items: center;
justify-content: center;
height: 100%;
}
#contents--navigation .contents-navigation_list {
display: flex;
-moz-column-gap: var(--size-60);
column-gap: var(--size-60);
padding-top: var(--size-26);
height: 100%;
}
#contents--navigation .contents-navigation_list li {
position: relative;
display: grid;
align-items: center;
height: 100%;
}
#contents--navigation .contents-navigation_list li::after {
position: absolute;
display: inline-block;
visibility: hidden;
content: "";
bottom: 0;
left: max(-0.278vw, -4px);
width: 0;
height: min(0.347vw, 5px);
background: var(--red);
opacity: 0;
transition: all var(--ease-in-out-200);
}
#contents--navigation .contents-navigation_list li:has([aria-current=true])::after {
visibility: visible;
width: calc(100% + var(--size-8));
opacity: 1;
}
#contents--navigation .contents-navigation_list li:has([aria-current=true]) a {
color: var(--red);
}
#contents--navigation .contents-navigation_list li:has([aria-current=true]) a::after {
visibility: hidden;
opacity: 0;
transform: translateY(5%);
}
#contents--navigation .contents-navigation_list li a {
position: relative;
height: 100%;
transition: all var(--ease-in-out-200);
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-medium);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
#contents--navigation .contents-navigation_list li a::after {
position: absolute;
display: block;
content: "";
margin: 0 auto;
bottom: var(--size-16);
right: 0;
left: 0;
width: min(0.833vw, 12px);
height: min(0.486vw, 7px);
background-image: url('data:image/svg+xml;charset=utf-8,');
background-position: 0 0;
background-size: contain;
background-repeat: no-repeat;
transition: all var(--ease-in-out-200);
}
@media (hover: hover) and (pointer: fine) {
#contents--navigation .contents-navigation_list li a:hover {
opacity: var(--opacity-5);
}
}
.c-video-controller {
display: block;
width: var(--size-25);
height: var(--size-25);
background-image: url("../images/index/kv/btn_movie-stop.svg");
background-size: var(--size-25) var(--size-25);
background-position: center;
background-repeat: no-repeat;
transition: opacity 0.3s ease, visibility 0.3s ease, top 0.5s ease;
opacity: 1;
}
@media only screen and (max-width: 767px) {
.c-video-controller {
width: var(--size-28);
height: var(--size-28);
background-size: var(--size-28) var(--size-28);
}
}
.c-video-controller:where(.is-paused, [aria-pressed=true]) {
background-image: url("../images/index/kv/btn_movie-play.svg");
}
.c-banner {
position: fixed;
visibility: hidden;
bottom: var(--size-180);
right: 0;
opacity: 0;
transform: translateX(var(--size-10));
transition: all var(--ease-in-out-300);
z-index: 5000;
}
@media only screen and (max-width: 767px) {
.c-banner {
display: none;
}
}
.c-banner:where([data-js-in-hero=false][data-js-in-footer=false]) {
visibility: visible;
opacity: 1;
transform: translateX(0);
}
.c-banner__inner {
display: flex;
flex-direction: column;
gap: var(--size-5);
}
.c-banner__button-catalog-download,
.c-banner__button-casestudy-download,
.c-banner__button-contact {
position: relative;
display: grid;
align-items: center;
justify-items: center;
padding-right: var(--size-10);
left: var(--size-10);
width: var(--size-50);
height: var(--size-140);
border-top-left-radius: var(--size-10);
border-bottom-left-radius: var(--size-10);
box-shadow: 0 0 var(--size-20) 0 rgba(169, 172, 178, 0.3);
transition: all var(--ease-in-out-200);
}
@media (hover: hover) and (pointer: fine) {
.c-banner__button-catalog-download:hover,
.c-banner__button-casestudy-download:hover,
.c-banner__button-contact:hover {
opacity: 0.75;
left: 0;
}
}
.c-banner__button-catalog-download {
background: var(--red);
}
.c-banner__button-casestudy-download {
background: var(--white);
}
.c-banner__button-casestudy-download .c-banner__button-text {
color: var(--red);
}
.c-banner__button-contact {
background: var(--black);
}
.c-banner__button-text {
color: var(--white);
writing-mode: vertical-rl;
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-bold);
line-height: var(--line-height-700);
letter-spacing: 3%;
}
.c-pagetop {
position: fixed;
display: block;
visibility: hidden;
margin-block: var(--size-10);
bottom: var(--size-30);
right: var(--size-15);
width: var(--size-14);
height: var(--size-120);
mix-blend-mode: difference;
opacity: 0;
transition: all var(--ease-in-out-300);
transform: translateX(var(--size-15));
z-index: 5000;
}
@media (hover: hover) and (pointer: fine) {
.c-pagetop:hover {
opacity: var(--opacity-5);
}
}
@media only screen and (max-width: 767px) {
.c-pagetop {
bottom: var(--size-70);
right: var(--size-18);
}
}
.c-pagetop:where([data-js-in-hero=false][data-js-in-footer=false]) {
visibility: visible;
opacity: 1;
transform: translateX(0);
}
.c-pagetop__icon {
display: block;
width: var(--size-14);
height: var(--size-120);
filter: invert(100%);
background-image: url("../../assets/images/components/pagetop.svg");
background-position: center;
background-size: var(--size-14) var(--size-120);
background-repeat: no-repeat;
}
[data-js-section] {
scroll-margin-top: 20vh;
}
[data-js-hidden-target][data-js-hidden=true] {
display: none;
}
.kv {
position: fixed;
top: 0;
width: 100%;
height: 100svh;
}
.kv .kv_area {
width: 100%;
height: 100%;
position: relative;
}
.kv .kv_inner {
width: auto;
height: 100%;
margin-inline: min(4.514vw, 65px);
position: relative;
}
@media only screen and (max-width: 767px) {
.kv .kv_inner {
width: 100%;
margin-inline: 0;
}
}
.kv .video {
width: 100%;
height: 100vh;
background: url(../images/index/kv/kv_pc.webp) no-repeat center/cover;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
z-index: -1;
}
@media only screen and (max-width: 767px) {
.kv .video {
background: url(../images/index/kv/kv_sp.webp) no-repeat center/cover;
}
}
.kv .video video {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center top;
object-position: center top;
}
@media only screen and (max-width: 767px) {
.kv .video video {
padding-top: 65px;
padding-bottom: 65px;
}
}
.kv .video::after {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
content: "";
display: block;
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
height: min(25vw, 360px);
}
@media only screen and (max-width: 767px) {
.kv .video::after {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 100%);
bottom: inherit;
top: 64px;
height: 76.923vw;
}
}
.kv .kv_text {
position: absolute;
left: 0;
color: var(--black);
opacity: 1;
z-index: 10;
}
@media print, screen and (min-width: 768px) {
.kv .kv_text {
bottom: min(5.556vw, 80px);
}
}
@media screen and (max-width: 1023px) {
.kv .kv_text {
bottom: calc(min(5.556vw, 80px) + 65px);
}
}
@media only screen and (max-width: 767px) {
.kv .kv_text {
bottom: inherit;
top: 26.923vw;
left: 7.692vw;
}
}
.kv .kv_text .contents--logo {
width: min(36.042vw, 519px);
height: auto;
}
@media only screen and (max-width: 767px) {
.kv .kv_text .contents--logo {
width: 70.769vw;
}
}
.kv .kv_text .title_text {
margin-top: min(4.514vw, 65px);
margin-left: min(7.083vw, 102px);
font-family: var(--family-jp);
font-size: var(--size-32);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
font-size: min(2.153vw, 31px);
letter-spacing: -0.01em;
}
@media only screen and (max-width: 767px) {
.kv .kv_text .title_text {
margin-top: 9.231vw;
margin-left: 0;
font-family: var(--family-jp);
font-size: var(--size-20);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
}
.kv .kv_text .title_text .small {
font-family: var(--family-jp);
font-size: var(--size-24);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
letter-spacing: -0.08em;
}
@media only screen and (max-width: 767px) {
.kv .kv_text .title_text .small {
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
}
.kv .kv_text .title_text .small span {
padding: 0 0.2em;
}
.kv .link_menu--others {
position: absolute;
z-index: 8;
display: grid;
grid-template-columns: 1fr;
row-gap: var(--size-6);
}
@media print, screen and (min-width: 768px) {
.kv .link_menu--others {
bottom: min(5.556vw, 80px);
right: 0;
justify-items: end;
}
}
@media screen and (max-width: 1023px) {
.kv .link_menu--others {
bottom: calc(min(5.556vw, 80px) + 65px);
}
}
@media only screen and (max-width: 767px) {
.kv .link_menu--others {
bottom: calc(65px + 7.692vw);
right: 0;
left: 0;
margin: auto;
grid-template-columns: 1fr 1fr;
-moz-column-gap: 2.564vw;
column-gap: 2.564vw;
padding-inline: 5.128vw;
}
}
.kv .link_menu--others li {
background: url(../images/index/kv/icon_arrow.svg) no-repeat;
background-color: var(--white);
background-size: var(--size-20) auto;
background-position: right var(--size-13) center;
border-radius: 6px 0 0 6px;
width: min(10.417vw, 150px);
height: min(6.25vw, 90px);
font-family: var(--family-jp);
font-size: var(--size-15);
font-weight: var(--weight-bold);
line-height: var(--line-height-140);
letter-spacing: 3%;
transition: width 0.3s ease-out;
}
@media only screen and (max-width: 767px) {
.kv .link_menu--others li {
background-position: right 4.103vw center;
border-radius: 6px;
width: 100%;
height: 15.385vw;
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-bold);
line-height: var(--line-height-140);
letter-spacing: 3%;
}
}
@media print, screen and (min-width: 768px) {
.kv .link_menu--others li:hover {
width: calc(min(10.417vw, 150px) + 10px);
}
.kv .link_menu--others li:hover span {
opacity: 0.5;
}
}
.kv .link_menu--others li a {
display: flex;
align-items: center;
height: 100%;
width: 100%;
padding-right: var(--size-33);
padding-left: var(--size-18);
}
@media only screen and (max-width: 767px) {
.kv .link_menu--others li a {
padding-left: var(--size-20);
}
}
.kv .movie-popup {
background: url(../images/index/kv/icon_mov.svg) no-repeat;
background-color: var(--white);
background-size: var(--size-28) auto;
background-position: center var(--size-18);
background-color: var(--red);
border-radius: 6px 0 0 6px;
color: var(--white);
position: absolute;
display: block;
transition: width 0.3s ease-out;
}
@media print, screen and (min-width: 768px) {
.kv .movie-popup:hover {
width: calc(min(10.417vw, 150px) + 10px);
opacity: 0.85;
}
}
@media print, screen and (min-width: 768px) {
.kv .movie-popup {
text-align: center;
width: min(10.417vw, 150px);
height: min(6.25vw, 90px);
font-family: var(--family-jp);
font-size: var(--size-15);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
right: 0;
bottom: min(19.167vw, 276px);
}
}
@media screen and (max-width: 1023px) {
.kv .movie-popup {
bottom: calc(min(19.167vw, 276px) + 65px);
}
}
@media only screen and (max-width: 767px) {
.kv .movie-popup {
background: url(../images/index/kv/icon_mov.svg) no-repeat;
background-size: 5.128vw auto;
background-position: left 32.051vw center;
background-color: var(--red);
color: var(--white);
border-radius: 6px;
top: inherit;
bottom: calc(65px + 25.128vw);
right: 0;
left: 0;
margin-inline: 5.128vw;
padding: 0 0 0 39.231vw;
width: auto;
height: 12.821vw;
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-medium);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
}
@media print, screen and (min-width: 768px) {
.kv .movie-popup span {
display: block;
transform: translateY(min(1.25vw, 18px));
}
}
.kv .movie-popup.is-hidden {
opacity: 0;
visibility: hidden;
}
.kv .bg_movie--controls {
position: absolute;
top: min(6.528vw, 94px);
right: min(0.972vw, 14px);
}
@media screen and (max-width: 1023px) {
.kv .bg_movie--controls {
top: calc(65px + min(0.972vw, 14px));
}
}
@media only screen and (max-width: 767px) {
.kv .bg_movie--controls {
top: calc(65px + 5.641vw);
right: 3.59vw;
}
}
.kv .bg_movie--controls.is-shifted {
top: min(0.972vw, 14px);
}
@media only screen and (max-width: 767px) {
.kv .bg_movie--controls.is-shifted {
top: 3.59vw;
}
}
.kv .bg_movie--controls.is-hidden {
opacity: 0;
visibility: hidden;
}
.kv .scroll {
position: absolute;
inset: auto 0 0 0;
margin: 0 auto;
width: var(--size-50);
height: var(--size-46);
}
@media only screen and (max-width: 767px) {
.kv .scroll {
display: none;
}
}
.kv .scroll::before {
content: "SCROLL";
display: block;
text-align: center;
font-family: var(--family-jp);
font-size: var(--size-10);
font-weight: var(--weight-medium);
line-height: var(--line-height-100);
letter-spacing: 3%;
font-size: min(0.764vw, 11px);
}
@media only screen and (max-width: 767px) {
.kv .scroll::before {
font-size: 2.821vw;
}
}
.kv .scroll::after {
content: "";
display: block;
position: absolute;
inset: auto 0;
margin: 0 auto;
width: 1px;
/* ★文字の高さ（約20px想定）を引いた残りの高さを線にする */
height: min(2.083vw, 30px);
bottom: 0; /* ★枠の下端にぴったり合わせる */
background: var(--black);
animation: scrollLineFlow 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
@keyframes scrollLineFlow {
0% {
transform: scaleY(0);
transform-origin: top;
}
45% {
transform: scaleY(1);
transform-origin: top;
}
55% {
transform: scaleY(1);
transform-origin: bottom;
}
100% {
transform: scaleY(0);
transform-origin: bottom;
}
}
@media screen and (max-width: 767px) and (orientation: landscape) {
.kv .link_menu--others {
display: none;
}
.kv .movie-popup {
display: none;
}
}
#about {
position: relative;
z-index: 8;
margin-top: 100svh;
height: calc(100svh + min(13.889vw, 200px));
}
@media only screen and (max-width: 767px) {
#about {
height: auto;
}
}
#about {
--progress: 0;
--stop1-start: min(13.889vw, 200px);
--stop1-end: 0px;
--stop2-start: min(34.722vw, 500px);
--stop2-end: min(13.889vw, 200px);
}
@media only screen and (max-width: 767px) {
#about {
--stop1-start: 12.821vw;
--stop1-end: 0px;
--stop2-start: 38.462vw;
--stop2-end: 12.821vw;
}
}
#about {
--mask-stop-1: calc(var(--stop1-start) + (var(--stop1-end) - var(--stop1-start)) * var(--progress));
--mask-stop-2: calc(var(--stop2-start) + (var(--stop2-end) - var(--stop2-start)) * var(--progress));
}
#about:before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
backdrop-filter: blur(30px);
background-color: rgba(255, 255, 255, 0.9);
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.55) var(--mask-stop-1), rgb(0, 0, 0) var(--mask-stop-2));
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.55) var(--mask-stop-1), rgb(0, 0, 0) var(--mask-stop-2));
}
@media only screen and (max-width: 767px) {
#about:before {
border-top: 1px solid #ccc;
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.55) 7.692vw, rgb(0, 0, 0) 15.385vw);
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.55) 7.692vw, rgb(0, 0, 0) 15.385vw);
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgb(0, 0, 0) 25.641vw);
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgb(0, 0, 0) 25.641vw);
}
}
#about .about__inner {
width: var(--container-width-pc);
height: 100svh;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-inline: auto;
display: flex;
align-items: center;
justify-content: center;
}
@media only screen and (max-width: 767px) {
#about .about__inner {
width: 100%;
height: auto;
position: static;
padding-bottom: 15.385vw;
padding-top: 51.282vw;
padding-inline: 7.692vw;
}
}
#about .cols_wrap {
display: grid;
grid-template-columns: min(39.583vw, 570px) 1fr;
-moz-column-gap: min(4.514vw, 65px);
column-gap: min(4.514vw, 65px);
}
@media only screen and (max-width: 767px) {
#about .cols_wrap {
grid-template-columns: 1fr;
}
}
#about .cols_wrap .img_col {
position: relative;
display: flex;
width: 100%;
background-color: var(--white);
}
#about .cols_wrap .img_col video {
width: 100%;
height: auto;
}
#about .cols_wrap .img_col .spec__tab_content_video_controller {
position: absolute;
margin: var(--size-12);
bottom: 0;
right: 0;
z-index: 5;
}
#about .cols_wrap .img_col img.about-img {
width: 100%;
height: auto;
/* 2枚目・3枚目は上に重ねて、初期状態は透明にする */
}
#about .cols_wrap .img_col img.about-img:not(.about-img-1) {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
#about .cols_wrap .img_col img.about-img {
/* 1枚目はrelativeにして、親要素(.img_col)の高さを確保する */
}
#about .cols_wrap .img_col img.about-img.about-img-1 {
position: relative;
opacity: 1;
}
#about .cols_wrap .txt_col .catch_text {
font-family: var(--family-jp);
font-size: var(--size-24);
font-weight: var(--weight-bold);
line-height: var(--line-height-160);
letter-spacing: 3%;
}
@media print, screen and (min-width: 768px) {
#about .cols_wrap .txt_col .catch_text {
margin-left: min(4.167vw, 60px);
}
}
@media only screen and (max-width: 767px) {
#about .cols_wrap .txt_col .catch_text {
font-family: var(--family-jp);
font-size: var(--size-18);
font-weight: var(--weight-bold);
line-height: var(--line-height-160);
letter-spacing: 3%;
margin-top: 10.256vw;
}
}
#about .cols_wrap .txt_col .contents--logo {
width: min(21.042vw, 303px);
height: auto;
margin-top: min(2.431vw, 35px);
}
@media only screen and (max-width: 767px) {
#about .cols_wrap .txt_col .contents--logo {
width: 67.179vw;
margin-top: 10.256vw;
}
}
#about .cols_wrap .txt_col .title_text {
margin-top: min(2.778vw, 40px);
font-family: var(--family-jp);
font-size: var(--size-22);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
@media print, screen and (min-width: 768px) {
#about .cols_wrap .txt_col .title_text {
margin-left: min(3.333vw, 48px);
}
}
@media only screen and (max-width: 767px) {
#about .cols_wrap .txt_col .title_text {
font-family: var(--family-jp);
font-size: var(--size-18);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
margin-top: 10.256vw;
margin-left: -0.5em;
}
}
#about .cols_wrap .txt_col .title_text span {
letter-spacing: -0.03em;
padding: 0 0.2em;
}
#about .cols_wrap .txt_col .text1 {
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-regular);
line-height: var(--line-height-180);
letter-spacing: 3%;
letter-spacing: 2%;
}
@media print, screen and (min-width: 768px) {
#about .cols_wrap .txt_col .text1 {
margin-left: min(4.167vw, 60px);
margin-top: min(3.333vw, 48px);
}
}
@media only screen and (max-width: 767px) {
#about .cols_wrap .txt_col .text1 {
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-regular);
line-height: var(--line-height-180);
letter-spacing: 3%;
margin-top: 7.692vw;
}
}
#contents--middle {
background-color: var(--white);
position: relative;
z-index: 8;
}
#contents--middle .contents--middle_inner {
height: min(7.639vw, 110px);
}
@media only screen and (max-width: 767px) {
#contents--middle .contents--middle_inner {
height: auto;
padding: 10.256vw 0 5.128vw;
}
}
#contents--middle .contents--nav {
display: flex;
justify-content: center;
-moz-column-gap: min(4.167vw, 60px);
column-gap: min(4.167vw, 60px);
height: min(7.639vw, 110px);
}
@media only screen and (max-width: 767px) {
#contents--middle .contents--nav {
flex-wrap: wrap;
justify-content: center;
-moz-column-gap: 5.128vw;
column-gap: 5.128vw;
margin-inline: 7.692vw;
height: auto;
overflow: hidden;
}
}
#contents--middle .contents--nav li {
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-medium);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#contents--middle .contents--nav li {
font-family: var(--family-jp);
font-size: var(--size-13);
font-weight: var(--weight-medium);
line-height: var(--line-height-100);
letter-spacing: 3%;
margin-bottom: 2.564vw;
position: relative;
}
}
@media only screen and (max-width: 767px) {
#contents--middle .contents--nav li:not(:nth-child(n+7))::after {
content: "";
position: absolute;
bottom: 0;
left: -50vw;
width: 200vw;
height: 1px;
background-color: #ccc; /* ★線の色をデザインに合わせて変更してください */
z-index: 1;
}
}
#contents--middle .contents--nav li a {
display: block;
height: 100%;
position: relative;
transition: all var(--ease-in-out-200);
}
@media print, screen and (min-width: 768px) {
#contents--middle .contents--nav li a {
padding-top: min(2.917vw, 42px);
}
}
@media only screen and (max-width: 767px) {
#contents--middle .contents--nav li a {
padding-top: 4.103vw;
padding-bottom: 10.256vw;
white-space: nowrap;
}
}
#contents--middle .contents--nav li a::before {
background-image: url('data:image/svg+xml;charset=utf-8,');
background-position: 0 0;
background-size: contain;
background-repeat: no-repeat;
content: "";
display: block;
position: absolute;
right: 0;
left: 0;
bottom: min(2.431vw, 35px);
margin: 0 auto;
width: min(0.833vw, 12px);
height: min(0.486vw, 7px);
}
@media only screen and (max-width: 767px) {
#contents--middle .contents--nav li a::before {
bottom: 6.154vw;
width: 3.077vw;
height: 1.795vw;
}
}
@media (hover: hover) and (pointer: fine) {
#contents--middle .contents--nav li a:hover {
opacity: var(--opacity-5);
}
}
#solution {
background-image: url("../images/components/bg/bg_pattern.webp");
background-repeat: repeat-y;
background-position: top;
background-size: 100% auto;
position: relative;
z-index: 8;
min-height: 500px;
padding-top: min(8.333vw, 120px);
padding-bottom: calc(min(11.111vw, 160px) + min(16.667vw, 240px));
}
@media only screen and (max-width: 767px) {
#solution {
padding-top: 20.513vw;
padding-bottom: 20.513vw;
}
}
#solution .title_style {
text-align: center;
margin-bottom: min(3.472vw, 50px);
font-family: var(--family-jp);
font-size: var(--size-48);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#solution .title_style {
margin-bottom: 0;
font-family: var(--family-jp);
font-size: var(--size-28);
font-weight: var(--weight-bold);
line-height: var(--line-height-140);
letter-spacing: 3%;
}
}
#solution .title_style em {
color: var(--red);
font-style: normal;
}
#solution .title_style .pre-text {
display: block;
margin-bottom: min(2.083vw, 30px);
font-family: var(--family-jp);
font-size: var(--size-24);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#solution .title_style .pre-text {
margin-bottom: 3.077vw;
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
}
#solution #task-slide {
position: relative;
z-index: 1;
}
#solution .task__list {
width: 100%;
}
@media print, screen and (min-width: 768px) {
#solution .task__list {
display: grid;
gap: 27px;
grid-template-columns: repeat(4, 1fr);
}
}
#solution .task__list > li {
width: 100%;
min-height: 100px;
position: relative;
padding-bottom: min(2.778vw, 40px);
}
@media only screen and (max-width: 767px) {
#solution .task__list > li {
padding-top: 5.128vw;
padding-bottom: 0;
}
}
#solution .task__list > li .head-text::before, #solution .task__list > li .head-text::after {
content: "";
display: block;
position: absolute;
right: 0;
bottom: 0;
width: var(--size-140);
height: var(--size-140);
background: 0 0/100% auto no-repeat;
transition: opacity 0.4s ease;
}
@media only screen and (max-width: 767px) {
#solution .task__list > li .head-text::before, #solution .task__list > li .head-text::after {
transition: opacity 0.4s;
}
}
#solution .task__list > li .head-text::after {
opacity: 0;
}
#solution .task__list > li.style--active .head-text::after, #solution .task__list > li.is-active .head-text::after {
opacity: 1;
}
#solution .task__list > li .task-trig-1 .head-text::before {
background-image: url(../images/index/solution/pic/pic-01_off.webp);
}
#solution .task__list > li .task-trig-1 .head-text::after {
background-image: url(../images/index/solution/pic/pic-01_on.webp);
}
#solution .task__list > li .task-trig-2 .head-text::before {
background-image: url(../images/index/solution/pic/pic-02_off.webp);
}
#solution .task__list > li .task-trig-2 .head-text::after {
background-image: url(../images/index/solution/pic/pic-02_on.webp);
}
#solution .task__list > li .task-trig-3 .head-text::before {
background-image: url(../images/index/solution/pic/pic-03_off.webp);
}
#solution .task__list > li .task-trig-3 .head-text::after {
background-image: url(../images/index/solution/pic/pic-03_on.webp);
}
#solution .task__list > li .task-trig-4 .head-text::before {
background-image: url(../images/index/solution/pic/pic-04_off.webp);
}
#solution .task__list > li .task-trig-4 .head-text::after {
background-image: url(../images/index/solution/pic/pic-04_on.webp);
}
#solution .task__list > li::before {
background: rgba(0, 0, 0, 0.2);
content: "";
display: block;
position: absolute;
right: 0px;
left: 0;
bottom: max(-2.361vw, -34px);
bottom: 0;
margin: 0 auto;
width: 1px;
height: min(2.361vw, 34px);
}
@media only screen and (max-width: 767px) {
#solution .task__list > li::before {
content: none;
}
}
#solution .task__list > li.style--active .btn__inner {
transform: translateY(max(-1.389vw, -20px));
}
#solution .task__list > li.style--active .btn__inner::after {
content: none;
}
#solution .task__list > li.style--active .head-text {
background: var(--grd_red);
}
#solution .task__list > li.style--active::after {
background: linear-gradient(to bottom, rgba(230, 0, 57, 0) 0%, #E60039 100%);
content: "";
display: block;
position: absolute;
right: 0px;
left: 0;
bottom: 0;
margin: 0 auto;
width: 1px;
height: min(5.208vw, 75px);
transform-origin: top center; /* 起点「上」 */
transform: scaleY(0);
animation: lineGrowDown 0.2s ease-out forwards;
}
#solution .task__list > li.style--active button::before {
background: var(--red);
box-shadow: 0 0 30px 5px rgba(230, 0, 57, 0.5);
content: "";
display: block;
position: absolute;
right: 0px;
left: 0;
bottom: -5px;
margin: 0 auto;
width: 10px;
height: 10px;
animation: fadeIn 0.4s 0.2s ease-out backwards;
}
#solution .task__list > li.style--active button ul li {
background-image: url(../images/index/solution/icon-check.png);
}
@media only screen and (max-width: 767px) {
#solution .task__list > li.is-active .btn__inner {
transform: translateY(-5.128vw);
}
#solution .task__list > li.is-active .btn__inner::after {
content: none;
}
#solution #task-slide.is-slider-moving .task__list > li.is-active::after {
display: none;
}
#solution #task-slide.is-slider-moving .task__list > li.is-active button::before {
display: none;
}
#solution .task__list > li.is-active .head-text {
background: var(--grd_red);
}
#solution .task__list > li.is-active::after {
background: linear-gradient(to bottom, rgba(230, 0, 57, 0) 0%, #E60039 100%);
content: "";
display: block;
position: absolute;
right: 0px;
left: 0;
bottom: 0;
margin: 0 auto;
width: 1px;
height: 19.231vw;
transform-origin: top center; /* 起点を「上」に */
transform: scaleY(0);
animation: lineGrowDown 0.2s ease-out forwards;
}
#solution .task__list > li.is-active button::before {
background: var(--red);
box-shadow: 0 0 30px 5px rgba(230, 0, 57, 0.5);
content: "";
display: block;
position: absolute;
right: 0px;
left: 0;
bottom: 0;
margin: 0 auto;
width: 10px;
height: 10px;
animation: fadeIn 0.3s 0.2s backwards ease-out;
}
#solution .task__list > li.is-active button ul li {
background-image: url(../images/index/solution/icon-check.png);
}
}
#solution .task__list > li img {
width: 100%;
}
#solution .task__list > li button {
padding-top: min(1.389vw, 20px);
padding-bottom: min(1.389vw, 20px);
display: block;
width: 100%;
height: 100%;
}
@media print, screen and (min-width: 768px) {
#solution .task__list > li button {
min-height: 100px;
transition: transform 0.3s;
}
}
@media only screen and (max-width: 767px) {
#solution .task__list > li button {
pointer-events: none;
padding-top: 5.128vw;
padding-bottom: 12.821vw;
position: relative;
z-index: 1;
}
}
#solution .task__list > li button .btn__inner {
position: relative;
transition: transform 0.3s;
background: #FFF;
box-shadow: 0 0 30px 0 rgba(169, 172, 178, 0.1);
}
@media only screen and (max-width: 767px) {
#solution .task__list > li button .btn__inner {
transition: transform 0.3s ease-in;
}
}
@media print, screen and (min-width: 768px) {
#solution .task__list > li button .btn__inner::after {
background: url(../images/index/solution/button-tab.png) 0 0/100% auto no-repeat;
content: "";
display: block;
position: absolute;
right: 0px;
left: 0;
bottom: max(-1.389vw, -20px);
margin: 0 auto;
width: min(3.472vw, 50px);
height: min(1.389vw, 20px);
}
}
@media only screen and (max-width: 767px) {
#solution .task__list > li button .btn__inner::after {
content: none;
}
}
#solution .task__list > li button .head-text {
position: relative;
background: linear-gradient(180deg, #363636 49.52%, #545658 100%);
color: var(--white);
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-medium);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
@media print, screen and (min-width: 768px) {
#solution .task__list > li button .head-text {
padding: 0 min(2.083vw, 30px);
height: min(8.333vw, 120px);
display: grid;
grid-template-columns: 1fr;
align-items: center;
align-content: center;
}
}
@media only screen and (max-width: 767px) {
#solution .task__list > li button .head-text {
padding: 7.179vw 7.692vw 8.205vw;
}
}
#solution .task__list > li button .head-text em {
display: block;
font-family: var(--family-jp);
font-size: var(--size-26);
font-weight: var(--weight-bold);
line-height: var(--line-height-160);
letter-spacing: 3%;
font-style: normal;
}
#solution .task__list > li button ul {
background-color: var(--white);
padding: min(1.736vw, 25px) min(1.667vw, 24px) min(2.431vw, 35px) min(1.806vw, 26px);
display: grid;
row-gap: min(1.528vw, 22px);
grid-template-columns: 1fr;
}
@media only screen and (max-width: 767px) {
#solution .task__list > li button ul {
padding: 6.41vw 7.692vw 8.974vw;
row-gap: 5.128vw;
}
}
#solution .task__list > li button ul li {
background: url(../images/index/solution/icon-check-off.png) 0 min(0.278vw, 4px) no-repeat;
background-size: min(1.389vw, 20px) auto;
padding-left: min(2.083vw, 30px);
font-family: var(--family-jp);
font-size: var(--size-15);
font-weight: var(--weight-medium);
line-height: var(--line-height-160);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#solution .task__list > li button ul li {
background-size: 5.128vw auto;
background-position: 0 1.026vw;
padding-left: 7.692vw;
}
}
#solution .task__list > li button ul li em {
color: var(--red);
font-style: normal;
}
@media print, screen and (min-width: 768px) {
#solution .task__list > li button:hover .btn__inner {
transform: translateY(max(-1.389vw, -20px));
}
}
@media print, screen and (min-width: 768px) {
#solution .splide__track {
overflow: visible;
}
}
#solution .splide__pagination {
bottom: 7.692vw;
left: 13%;
padding: 0 0;
position: absolute;
right: 0;
z-index: 1;
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin: 0;
pointer-events: none;
}
#solution .splide__pagination__page {
background-color: #D9D9D9;
margin: 4px;
}
#solution .splide__pagination__page.is-active {
background-color: var(--red);
transform: scale(1);
}
#solution .splide__arrow {
border-radius: 0;
background: rgba(84, 89, 98, 0.5);
top: 45%;
top: 52.564vw;
width: 10.256vw;
height: 10.256vw;
}
#solution .splide__arrow svg {
fill: #fff;
width: 0.6em;
height: 0.6em;
stroke: #fff;
stroke-width: 3px;
stroke-linejoin: round;
}
#solution .splide__arrow--prev {
left: 0;
}
#solution .splide__arrow--next {
right: 0;
}
#solution .task--case-panel {
position: relative;
z-index: 0;
}
@media print, screen and (min-width: 768px) {
#solution .task--case-panel {
display: grid;
height: min(42.014vw, 605px);
}
}
@media only screen and (max-width: 767px) {
#solution .task--case-panel {
height: auto;
margin: 0 5.128vw;
margin-top: -5px;
min-height: 153.846vw;
}
}
#solution .task--case-panel li {
background-color: var(--bg-black-2);
filter: drop-shadow(0 0 30px rgba(169, 172, 178, 0.1));
color: var(--white);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
/* デフォルトで隠す */
z-index: 0;
opacity: 0;
visibility: hidden;
/* 切り替わるアニメーション */
transition: opacity 1s ease, visibility 1s ease;
}
@media print, screen and (min-width: 768px) {
#solution .task--case-panel li {
padding: 0 0 min(4.167vw, 60px) min(6.25vw, 90px);
}
}
@media only screen and (max-width: 767px) {
#solution .task--case-panel li {
padding: 15.385vw 7.692vw 12.821vw;
}
}
#solution .task--case-panel li.active {
position: relative;
z-index: 1;
opacity: 1;
visibility: visible;
}
@media print, screen and (min-width: 768px) {
#solution .task--case-panel li .panel--inner {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr;
-moz-column-gap: min(4.167vw, 60px);
column-gap: min(4.167vw, 60px);
}
}
@media only screen and (max-width: 767px) {
#solution .task--case-panel li .panel--inner {
display: block;
}
}
@media print, screen and (min-width: 768px) {
#solution .task--case-panel li .head-part {
padding-top: min(4.861vw, 70px);
grid-area: 1/1/2/2;
}
}
#solution .task--case-panel li .head-part .label-txt {
font-family: var(--family-jp);
font-size: var(--size-18);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
margin-bottom: min(2.083vw, 30px);
}
@media only screen and (max-width: 767px) {
#solution .task--case-panel li .head-part .label-txt {
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
margin-bottom: 7.692vw;
}
}
#solution .task--case-panel li .head-part .case-ttl {
font-family: var(--family-jp);
font-size: var(--size-30);
font-weight: var(--weight-bold);
line-height: var(--line-height-160);
letter-spacing: 3%;
margin-bottom: min(0.694vw, 10px);
}
@media print, screen and (min-width: 768px) {
#solution .task--case-panel li .head-part .case-ttl {
margin-right: -1em;
}
}
@media only screen and (max-width: 767px) {
#solution .task--case-panel li .head-part .case-ttl {
font-family: var(--family-jp);
font-size: var(--size-22);
font-weight: var(--weight-bold);
line-height: var(--line-height-140);
letter-spacing: 3%;
margin-bottom: 2.564vw;
}
}
#solution .task--case-panel li .head-part .case-name {
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-medium);
line-height: var(--line-height-140);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#solution .task--case-panel li .head-part .case-name {
font-family: var(--family-jp);
font-size: var(--size-12);
font-weight: var(--weight-medium);
line-height: var(--line-height-140);
letter-spacing: 3%;
}
}
#solution .task--case-panel li .case-dsc {
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-regular);
line-height: var(--line-height-180);
letter-spacing: 3%;
}
@media print, screen and (min-width: 768px) {
#solution .task--case-panel li .case-dsc {
margin-top: min(2.083vw, 30px);
display: grid;
grid-area: 2/1/3/2;
}
}
@media only screen and (max-width: 767px) {
#solution .task--case-panel li .case-dsc {
margin-top: 7.692vw;
margin-bottom: 7.692vw;
display: grid;
grid-template-columns: 1fr;
row-gap: 7.692vw;
}
}
#solution .task--case-panel li .case-dsc .case-dsc-txt {
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-regular);
line-height: var(--line-height-180);
letter-spacing: 3%;
}
@media print, screen and (min-width: 768px) {
#solution .task--case-panel li .second--area {
display: grid;
grid-template-columns: 1fr auto;
-moz-column-gap: min(4.167vw, 60px);
column-gap: min(4.167vw, 60px);
margin-top: min(2.431vw, 35px);
margin-right: min(6.25vw, 90px);
}
}
#solution .task--case-panel li .effects {
display: grid;
grid-template-columns: 1fr 1fr;
-moz-column-gap: min(0.694vw, 10px);
column-gap: min(0.694vw, 10px);
}
@media only screen and (max-width: 767px) {
#solution .task--case-panel li .effects {
-moz-column-gap: 2.564vw;
column-gap: 2.564vw;
margin-bottom: 7.692vw;
}
}
#solution .task--case-panel li .effects .effect-tag {
background-color: var(--white);
color: var(--black);
display: flex;
align-items: center;
justify-content: space-around;
}
@media print, screen and (min-width: 768px) {
#solution .task--case-panel li .effects .effect-tag {
font-family: var(--family-jp);
font-size: var(--size-17);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
font-size: min(1.181vw, 17px);
height: min(5.556vw, 80px);
}
}
@media only screen and (max-width: 767px) {
#solution .task--case-panel li .effects .effect-tag {
height: 25.641vw;
display: grid;
grid-template-columns: 1fr;
justify-items: center;
align-content: start;
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
padding-top: 3.846vw;
}
}
#solution .task--case-panel li .effects .effect-tag .value-num {
-webkit-font-smoothing: antialiased;
color: var(--red);
font-family: var(--family-jp);
font-size: var(--size-60);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
font-weight: 700;
letter-spacing: -0.1em;
}
@media print, screen and (min-width: 768px) {
#solution .task--case-panel li .effects .effect-tag .value-num {
padding-bottom: 0.05em;
}
}
@media only screen and (max-width: 767px) {
#solution .task--case-panel li .effects .effect-tag .value-num {
font-family: var(--family-jp);
font-size: var(--size-50);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
font-weight: 700;
letter-spacing: -0.1em;
margin-top: 1.026vw;
}
}
#solution .task--case-panel li .effects .effect-tag .value-num .small {
transform: scale(80%);
display: inline-block;
transform-origin: bottom;
}
#solution .task--case-panel li .effects .effect-tag .value-num .slash {
font-weight: 100;
font-size: 90%;
transform: translateY(max(-0.417vw, -6px));
display: inline-block;
margin-left: min(0.417vw, 6px);
margin-right: min(0.486vw, 7px);
}
@media only screen and (max-width: 767px) {
#solution .task--case-panel li .effects .effect-tag .value-num .slash {
transform: translateY(-1.538vw);
margin-left: 1.538vw;
margin-right: 1.795vw;
}
}
#solution .task--case-panel li .effects .effect-tag .value-num .unit-arrow-up {
width: min(1.181vw, 17px);
height: auto;
display: inline-block;
padding-bottom: min(0.347vw, 5px);
padding-left: min(0.208vw, 3px);
}
@media only screen and (max-width: 767px) {
#solution .task--case-panel li .effects .effect-tag .value-num .unit-arrow-up {
width: 4.359vw;
height: auto;
padding-bottom: 1.282vw;
padding-left: 0.769vw;
}
}
#solution .task--case-panel li .effects .effect-tag .value-num .unit {
font-family: var(--family-jp);
font-size: var(--size-20);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
margin-left: min(0.556vw, 8px);
}
@media only screen and (max-width: 767px) {
#solution .task--case-panel li .effects .effect-tag .value-num .unit {
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
margin-left: 2.051vw;
}
}
@media print, screen and (min-width: 768px) {
#solution .task--case-panel li .effects .effect-tag .value-num .small + .unit {
margin-left: min(0.278vw, 4px);
}
}
@media only screen and (max-width: 767px) {
#solution .task--case-panel li .effects .effect-tag .value-num .small + .unit {
margin-left: 1.026vw;
}
}
@media print, screen and (min-width: 768px) {
#solution .task--case-panel li .case-img {
grid-area: 1/2/3/3;
width: min(36.111vw, 520px);
margin-right: 0;
margin-left: auto;
}
}
@media only screen and (max-width: 767px) {
#solution .task--case-panel li .case-img {
margin-top: 7.692vw;
}
}
@media print, screen and (min-width: 768px) {
#solution .task--case-panel li .case-link {
width: min(29.861vw, 430px);
height: min(5.556vw, 80px);
}
}
@media only screen and (max-width: 767px) {
#solution .task--case-panel li .case-link {
height: 17.949vw;
}
}
#solution .task--case-panel li .case-link .c-button__text {
font-family: var(--family-jp);
font-size: var(--size-20);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#solution .task--case-panel li .case-link .c-button__text {
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
}
@media print, screen and (min-width: 768px) {
#solution .task--case-panel li .bottom--area {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
-moz-column-gap: min(1.389vw, 20px);
column-gap: min(1.389vw, 20px);
margin-top: min(3.194vw, 46px);
margin-right: min(6.25vw, 90px);
}
}
@media only screen and (max-width: 767px) {
#solution .task--case-panel li .bottom--area {
margin-top: 10.256vw;
}
}
#solution .task--case-panel li .summary--link__text {
font-family: var(--family-jp);
font-size: var(--size-20);
font-weight: var(--weight-bold);
line-height: var(--line-height-160);
letter-spacing: 3%;
}
@media print, screen and (min-width: 768px) {
#solution .task--case-panel li .summary--link__text {
position: relative;
display: flex;
align-items: center;
-moz-column-gap: min(1.389vw, 20px);
column-gap: min(1.389vw, 20px);
}
}
@media only screen and (max-width: 767px) {
#solution .task--case-panel li .summary--link__text {
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-bold);
line-height: var(--line-height-160);
letter-spacing: 3%;
letter-spacing: normal;
text-align: center;
margin: 0 -0.5em 5.128vw;
}
}
@media print, screen and (min-width: 768px) {
#solution .task--case-panel li .summary--link__text::after {
background: #777;
content: "";
display: block;
width: min(4.375vw, 63px);
height: 1px;
}
}
#solution .task--case-panel li .summary--link__button {
border: 1px solid var(--white);
background-color: var(--bg-black-2);
color: var(--white);
}
@media print, screen and (min-width: 768px) {
#solution .task--case-panel li .summary--link__button {
width: min(19.444vw, 280px);
height: min(4.306vw, 62px);
}
}
@media only screen and (max-width: 767px) {
#solution .task--case-panel li .summary--link__button {
height: 12.821vw;
}
}
#solution .task--case-panel li .summary--link__button .c-button__text {
font-family: var(--family-jp);
font-size: var(--size-20);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
font-size: min(1.181vw, 17px);
}
@media only screen and (max-width: 767px) {
#solution .task--case-panel li .summary--link__button .c-button__text {
font-size: 3.59vw;
}
}
@media (hover: hover) and (pointer: fine) {
#solution .task--case-panel li .summary--link__button:hover {
border-color: var(--white);
background-color: var(--white);
color: var(--red);
}
}
@keyframes lineGrowDown {
0% {
transform: scaleY(0);
}
100% {
transform: scaleY(1);
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn2 {
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes pulse-shadow {
0% {
box-shadow: 0 0 30px 5px rgba(230, 0, 57, 0.5);
}
50% {
/* 影を大きく広げ、少し濃くする */
box-shadow: 0 0 35px 10px rgba(230, 0, 57, 0.6);
}
100% {
box-shadow: 0 0 30px 5px rgba(230, 0, 57, 0.5);
}
}
@keyframes pulse-scale {
0%, 100% {
transform: scale(1); /* 元のサイズ (10px) */
}
50% {
transform: scale(1.5); /* 1.5倍 (15px) に拡大 */
}
}
#achieve {
position: relative;
z-index: 8;
}
@media print, screen and (min-width: 768px) {
#achieve {
padding-top: min(16.667vw, 240px);
margin-top: max(-16.667vw, -240px);
}
}
#achieve .achieve__wrap {
background-color: var(--white);
padding-top: 1px;
}
@media print, screen and (min-width: 768px) {
#achieve .achieve__wrap {
padding-bottom: calc(min(11.111vw, 160px) - min(5.139vw, 74px));
}
}
@media only screen and (max-width: 767px) {
#achieve .achieve__wrap {
padding-bottom: calc(28.205vw - 65px);
}
}
#achieve .achieve__inner {
width: min(100vw, 1440px);
height: 100%;
margin-inline: auto;
}
@media only screen and (max-width: 767px) {
#achieve .achieve__inner {
width: auto;
}
}
@media print, screen and (min-width: 768px) {
#achieve .achieve__body {
width: min(88.889vw, 1280px);
margin-inline: auto;
padding-top: min(8.333vw, 120px);
padding-left: min(2.778vw, 40px);
}
}
@media only screen and (max-width: 767px) {
#achieve .achieve__body {
width: 100%;
padding-top: 10.256vw;
padding-inline: 5.128vw;
}
}
#achieve .cont_text {
position: relative;
}
@media print, screen and (min-width: 768px) {
#achieve .cont_text {
padding-left: min(6.25vw, 90px);
padding-right: min(9.583vw, 138px);
}
}
#achieve .cont_text .cont_text-title {
font-family: var(--family-jp);
font-size: var(--size-34);
font-weight: var(--weight-bold);
line-height: var(--line-height-160);
letter-spacing: 3%;
}
@media print, screen and (min-width: 768px) {
#achieve .cont_text .cont_text-title {
grid-area: title;
}
}
@media only screen and (max-width: 767px) {
#achieve .cont_text .cont_text-title {
font-family: var(--family-jp);
font-size: var(--size-22);
font-weight: var(--weight-bold);
line-height: var(--line-height-160);
letter-spacing: 3%;
margin-bottom: 6.154vw;
margin-right: -1em;
}
}
#achieve .cont_text .cont_text-title em {
color: var(--red);
font-style: normal;
}
@media only screen and (max-width: 767px) {
#achieve .cont_text .cont_text-body {
padding-inline: 2.051vw;
}
}
#achieve .cont_text .cont_text-body p {
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-regular);
line-height: var(--line-height-180);
letter-spacing: 3%;
margin-top: 2em;
}
@media only screen and (max-width: 767px) {
#achieve .cont_text .cont_text-body p {
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-regular);
line-height: var(--line-height-180);
letter-spacing: 3%;
margin-top: 0;
}
}
#achieve .cont_list {
margin-top: min(6.111vw, 88px);
}
@media only screen and (max-width: 767px) {
#achieve .cont_list {
margin-top: 6.41vw;
}
}
#achieve .cont_list ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
-moz-column-gap: min(2.569vw, 37px);
column-gap: min(2.569vw, 37px);
}
@media only screen and (max-width: 767px) {
#achieve .cont_list ul {
grid-template-columns: 1fr 1fr;
-moz-column-gap: 7.179vw;
column-gap: 7.179vw;
row-gap: 5.128vw;
}
}
#achieve .cont_list ul li {
display: grid;
grid-template-rows: subgrid;
grid-row: span 2;
}
@media only screen and (max-width: 767px) {
#achieve .cont_list ul li {
display: grid;
grid-template-columns: 1fr;
row-gap: 0;
}
}
#achieve .cont_list ul li .list-img {
position: relative;
}
#achieve .cont_list ul li .list-img .css-icon {
position: absolute;
bottom: max(-2.014vw, -29px);
right: 0;
left: 0;
margin: 0 auto;
width: 26px;
height: 66px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
flex-shrink: 0;
}
@media only screen and (max-width: 767px) {
#achieve .cont_list ul li .list-img .css-icon {
bottom: -4.615vw;
width: 6.667vw;
height: 9.231vw;
}
}
#achieve .cont_list ul li .list-img {
/* 1. グラデーションの線 */
}
#achieve .cont_list ul li .list-img .css-icon-line {
width: 1px; /* 線の太さ */
height: 50px; /* 線の長さ（元のSVGの Y:50 に対応） */
/* 下（#E60039）から 上（透明）へ向かうグラデーション */
background: linear-gradient(to top, #E60039 0%, rgba(230, 0, 57, 0) 100%);
}
@media only screen and (max-width: 767px) {
#achieve .cont_list ul li .list-img .css-icon-line {
height: 5.128vw;
}
}
#achieve .cont_list ul li .list-img {
/* 2. 光る赤いドット */
}
#achieve .cont_list ul li .list-img .css-icon-dot {
width: 6px;
height: 6px;
background-color: #E60039;
/* SVGのドロップシャドウ（feGaussianBlur）をbox-shadowで再現 */
box-shadow: 0 0 10px 1px rgba(230, 0, 57, 0.6);
}
#achieve .cont_list ul li .list-head {
text-align: center;
}
@media print, screen and (min-width: 768px) {
#achieve .cont_list ul li .list-head {
font-family: var(--family-jp);
font-size: var(--size-26);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
margin-bottom: min(0.972vw, 14px);
margin-top: min(3.75vw, 54px);
}
}
@media only screen and (max-width: 767px) {
#achieve .cont_list ul li .list-head {
display: grid;
grid-template-columns: 1fr;
align-items: center;
justify-content: center;
align-content: center;
font-family: var(--family-jp);
font-size: var(--size-18);
font-weight: var(--weight-bold);
line-height: var(--line-height-140);
letter-spacing: 3%;
margin-bottom: 2.051vw;
margin-top: 6.154vw;
min-height: 15.385vw;
}
}
#achieve .cont_list ul li .list-head .en-head {
display: block;
color: var(--red);
font-family: var(--family-jp);
font-size: var(--size-12);
font-weight: var(--weight-medium);
line-height: var(--line-height-100);
letter-spacing: 3%;
margin-top: min(0.694vw, 10px);
}
@media only screen and (max-width: 767px) {
#achieve .cont_list ul li .list-head .en-head {
font-family: var(--family-jp);
font-size: var(--size-10);
font-weight: var(--weight-medium);
line-height: var(--line-height-100);
letter-spacing: 3%;
margin-top: 1.026vw;
}
}
#achieve .cont_list ul li p {
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-regular);
line-height: var(--line-height-180);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#achieve .cont_list ul li p {
font-family: var(--family-jp);
font-size: var(--size-12);
font-weight: var(--weight-regular);
line-height: var(--line-height-180);
letter-spacing: 3%;
}
}
@media only screen and (max-width: 767px) {
#achieve .title_content {
padding-top: 0;
}
#achieve .c-title_image-group .ttl_decoration__wrap {
display: inherit;
position: inherit;
display: block;
position: absolute;
left: -17.949vw;
top: -38.462vw;
}
#achieve .c-title_image-group .ttl_decoration__wrap .ttl_decoration {
transform: rotate(0deg);
}
}
#feature {
position: relative;
z-index: 8;
background-color: var(--white);
}
@media print, screen and (min-width: 768px) {
#feature {
padding-bottom: min(55.556vw, 800px);
}
}
@media only screen and (max-width: 767px) {
#feature {
padding-bottom: 128.205vw;
}
}
#feature .feature {
position: relative;
z-index: 8;
height: 100svh;
}
@media print, screen and (min-width: 768px) {
#feature .feature {
padding-top: min(5.139vw, 74px);
}
}
@media only screen and (max-width: 767px) {
#feature .feature {
padding-top: 65px;
}
}
#feature .feature_wrap {
position: relative;
z-index: 0;
}
#feature {
/* --- スマホ用の固定背景 --- */
}
@media print, screen and (min-width: 768px) {
#feature .feature__bg {
display: none;
}
}
@media only screen and (max-width: 767px) {
#feature .feature__bg {
display: block;
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
@media only screen and (max-width: 767px) {
#feature .feature__bg > div {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 170.513vw;
background: url(../images/index/feature/title-bg_sp.webp) 0 0 no-repeat;
background-size: 87.179vw auto;
z-index: 1;
}
}
#feature .feature__bg {
/* --- スマホ用のパターン背景 --- */
}
#feature .feature__bg::before {
background-image: url("../images/components/bg/bg_pattern.webp");
background-repeat: repeat-y;
background-position: top;
background-size: 100% auto;
content: "";
display: block;
position: absolute;
z-index: 0;
right: 0px;
top: 0px;
width: 100%;
height: 158.718vw;
}
#feature .feature__inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 2;
}
@media only screen and (max-width: 767px) {
#feature .feature__inner {
top: 16.923vw;
z-index: 8;
}
}
#feature .feature__img {
display: block;
position: absolute;
z-index: 0;
top: 0px;
right: 0px;
width: 100%;
height: min(72.917vw, 1050px);
}
@media print, screen and (min-width: 768px) {
#feature .feature__img {
background: url(../images/index/feature/title-bg.webp) no-repeat;
background-position: left calc(50% - min(46.667vw, 672px) + min(3.472vw, 50px)) top;
background-size: min(93.333vw, 1344px) auto;
z-index: 1;
margin-inline: 0;
}
}
@media only screen and (max-width: 767px) {
#feature .feature__img {
display: none;
background: none;
grid-template-columns: 1fr;
width: 100%;
position: relative;
z-index: 2;
}
}
@media print, screen and (min-width: 768px) {
#feature .feature__pattern {
background-image: url("../images/components/bg/bg_pattern.webp");
background-repeat: repeat-y;
background-position: top;
background-size: 100% auto;
background-size: cover;
display: block;
position: absolute;
z-index: -1;
top: 0px;
right: 0px;
width: 100%;
height: calc(min(72.917vw, 1050px) - min(6.111vw, 88px));
}
}
@media only screen and (max-width: 767px) {
#feature .feature__pattern {
display: none;
}
}
#feature .feature__inside {
display: flex;
justify-content: space-between;
}
@media print, screen and (min-width: 768px) {
#feature .feature__inside {
position: relative;
z-index: 2;
width: min(100vw, 1440px);
margin: 0 auto;
}
}
@media only screen and (max-width: 767px) {
#feature .feature__inside {
display: grid;
grid-template-columns: 1fr;
position: relative;
z-index: 2;
width: 100%;
}
}
#feature hgroup {
color: var(--white);
position: relative;
}
@media print, screen and (min-width: 768px) {
#feature hgroup {
margin-top: min(10.278vw, 148px);
margin-left: min(11.111vw, 160px);
}
}
@media only screen and (max-width: 767px) {
#feature hgroup {
margin-top: 24.615vw;
margin-left: 12.821vw;
}
}
#feature hgroup .feature--ttl_decoration {
position: absolute;
left: max(-2.778vw, -40px);
top: max(-13.194vw, -190px);
z-index: 1;
}
@media only screen and (max-width: 767px) {
#feature hgroup .feature--ttl_decoration {
left: -6.41vw;
top: -34.359vw;
}
}
#feature hgroup .title_style {
font-family: var(--family-jp);
font-size: var(--size-56);
font-weight: var(--weight-bold);
line-height: var(--line-height-140);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#feature hgroup .title_style {
font-family: var(--family-jp);
font-size: var(--size-32);
font-weight: var(--weight-bold);
line-height: var(--line-height-140);
letter-spacing: 3%;
}
}
#feature hgroup .title_style .text1 {
font-family: var(--family-jp);
font-size: var(--size-38);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#feature hgroup .title_style .text1 {
font-family: var(--family-jp);
font-size: var(--size-24);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
}
#feature hgroup .copy {
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-medium);
line-height: var(--line-height-100);
letter-spacing: 3%;
margin-top: min(2.917vw, 42px);
margin-left: 0.1em;
}
@media only screen and (max-width: 767px) {
#feature hgroup .copy {
font-family: var(--family-jp);
font-size: var(--size-12);
font-weight: var(--weight-medium);
line-height: var(--line-height-140);
letter-spacing: 3%;
margin-top: 4.103vw;
}
}
@media print, screen and (min-width: 768px) {
#feature .feature__list {
position: absolute;
top: min(11.111vw, 160px);
left: 50%;
width: min(44.444vw, 640px);
margin-right: min(5.556vw, 80px);
z-index: 9;
}
}
@media only screen and (max-width: 767px) {
#feature .feature__list {
position: absolute;
width: 94.872vw;
top: 110.769vw;
left: auto;
right: 0;
margin-left: auto;
z-index: 9;
}
}
#feature .feature__list li {
border: 1px solid #F3F3F3;
background-color: #fff;
box-shadow: 0 0 20px 0 rgba(169, 172, 178, 0.4);
margin-bottom: var(--size-10);
}
@media print, screen and (min-width: 768px) {
#feature .feature__list li {
height: min(13.889vw, 200px);
}
}
@media only screen and (max-width: 767px) {
#feature .feature__list li {
height: 38.462vw;
background-color: #fff;
}
}
#feature .feature__list li:last-child {
margin-bottom: 0;
}
#feature .feature__list li:nth-child(1) button {
background-image: url(../images/index/feature/icon-01.webp);
}
#feature .feature__list li:nth-child(2) button {
background-image: url(../images/index/feature/icon-02.webp);
}
#feature .feature__list li:nth-child(3) button {
background-image: url(../images/index/feature/icon-03.webp);
}
#feature .feature__list li:nth-child(4) button {
background-image: url(../images/index/feature/icon-04.webp);
}
#feature .feature__list li:nth-child(5) button {
background-image: url(../images/index/feature/icon-05.webp);
}
#feature .feature__list li button {
transition: opacity 0.3s;
background-repeat: no-repeat;
background-size: min(9.028vw, 130px) auto;
background-position: min(2.083vw, 30px) center;
display: block;
width: 100%;
height: 100%;
position: relative;
}
@media print, screen and (min-width: 768px) {
#feature .feature__list li button {
padding-left: min(12.986vw, 187px);
padding-top: min(3.194vw, 46px);
padding-bottom: min(3.194vw, 46px);
font-family: var(--family-jp);
font-size: var(--size-32);
font-weight: var(--weight-bold);
line-height: var(--line-height-130);
letter-spacing: 3%;
}
}
@media only screen and (max-width: 767px) {
#feature .feature__list li button {
background-size: 23.077vw auto;
background-position: 2.564vw center;
padding-left: 28.205vw;
font-family: var(--family-jp);
font-size: var(--size-22);
font-weight: var(--weight-bold);
line-height: var(--line-height-140);
letter-spacing: 3%;
}
}
#feature .feature__list li button em {
color: var(--red);
font-style: normal;
}
#feature .feature__list li button .list_num {
font-family: var(--family-jp);
font-size: var(--size-56);
font-weight: var(--weight-regular);
line-height: var(--line-height-100);
letter-spacing: 3%;
color: var(--black);
position: absolute;
top: min(1.181vw, 17px);
right: min(0.833vw, 12px);
}
@media only screen and (max-width: 767px) {
#feature .feature__list li button .list_num {
font-size: 9.231vw;
top: 4.103vw;
right: 3.333vw;
}
}
#feature .feature__list li button .catch_text {
font-family: var(--family-jp);
font-size: var(--size-18);
font-weight: var(--weight-bold);
line-height: var(--line-height-180);
letter-spacing: 3%;
margin-bottom: min(0.417vw, 6px);
}
@media only screen and (max-width: 767px) {
#feature .feature__list li button .catch_text {
font-family: var(--family-jp);
font-size: var(--size-13);
font-weight: var(--weight-bold);
line-height: var(--line-height-160);
letter-spacing: 3%;
margin-bottom: 1.026vw;
}
}
#feature .feature__list li button .btn--detail {
background: url(../images/index/feature/btn-plus.png) 0 0/min(2.361vw, 34px) auto no-repeat;
position: absolute;
bottom: min(1.528vw, 22px);
right: min(1.667vw, 24px);
width: min(2.361vw, 34px);
height: min(3.889vw, 56px);
display: flex;
align-items: end;
justify-content: center;
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-medium);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#feature .feature__list li button .btn--detail {
background-size: 7.179vw auto;
bottom: 3.59vw;
right: 5.128vw;
width: 7.179vw;
height: 12.308vw;
font-family: var(--family-jp);
font-size: var(--size-13);
font-weight: var(--weight-medium);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
}
@media (hover: hover) and (pointer: fine) {
#feature .feature__list li:hover button {
opacity: 0.7;
}
}
@media print, screen and (min-width: 768px) {
#feature .feature__endTrigger {
position: absolute;
bottom: max(-11.111vw, -160px);
left: 0;
width: 100%;
height: 0px;
}
}
@media only screen and (max-width: 767px) {
#feature .feature__endTrigger {
position: absolute;
bottom: -22.051vw;
left: 0;
width: 100%;
height: 0px;
}
}
.pio_features__modal_background {
display: block;
width: 100%;
height: 100%;
background: var(--blue-1);
opacity: 0.85;
cursor: pointer;
}
.pio_features__modal_inner {
position: absolute;
display: flex;
flex-direction: column;
top: 50%;
left: 50%;
margin-inline: auto;
width: min(69.444vw, 1000px);
height: auto;
background: var(--yellow);
transform: translate(-50%, -50%);
}
@media print, screen and (min-width: 768px) {
.pio_features__modal_inner {
max-height: calc(100dvh - min(8.889vw, 128px));
}
}
@media only screen and (max-width: 767px) {
.pio_features__modal_inner {
width: 79.487vw;
max-height: calc(100dvh - 32.821vw);
}
}
.pio_features__modal_number {
padding-inline: var(--size-30);
padding-top: var(--size-15);
color: var(--blue-3);
font-family: var(--family-en);
font-size: var(--size-32);
font-weight: var(--weight-bold);
line-height: var(--line-height-180);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
.pio_features__modal_number {
display: block;
text-align: center;
}
}
.pio_features__modal_content {
overflow-y: auto;
flex-grow: 1;
padding-bottom: var(--size-60);
background: var(--yellow);
}
@media only screen and (max-width: 767px) {
.pio_features__modal_content {
padding-bottom: var(--size-40);
}
}
.pio_features__modal_title {
margin-bottom: var(--size-50);
color: var(--blue-1);
text-align: center;
font-family: var(--family-jp);
font-size: var(--size-28);
font-weight: var(--weight-medium);
line-height: var(--line-height-160);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
.pio_features__modal_title {
margin-bottom: var(--size-16);
font-family: var(--family-jp);
font-size: var(--size-24);
font-weight: var(--weight-medium);
line-height: var(--line-height-160);
letter-spacing: 3%;
}
}
@media only screen and (max-width: 767px) {
.pio_features__modal_title_small {
font-family: var(--family-jp);
font-size: var(--size-20);
font-weight: var(--weight-medium);
line-height: var(--line-height-160);
letter-spacing: 3%;
}
}
.pio_features__modal_close_button {
position: absolute;
display: grid;
align-items: center;
justify-items: center;
top: max(-0.764vw, -11px);
right: max(-6.597vw, -95px);
width: var(--size-74);
height: var(--size-74);
}
@media only screen and (max-width: 767px) {
.pio_features__modal_close_button {
top: -8.718vw;
right: -7.692vw;
width: var(--size-32);
height: var(--size-32);
}
}
.pio_features__modal_close_icon {
width: var(--size-40);
height: var(--size-40);
color: var(--white);
}
@media only screen and (max-width: 767px) {
.pio_features__modal_close_icon {
width: var(--size-20);
height: var(--size-20);
}
}
.pio_features__modal_column {
display: grid;
align-items: start;
grid-template-columns: repeat(2, 1fr);
gap: var(--size-40);
padding-inline: var(--size-80);
margin-bottom: var(--size-50);
}
@media only screen and (max-width: 767px) {
.pio_features__modal_column {
grid-template-columns: 1fr;
padding-inline: var(--size-20);
margin-bottom: var(--size-30);
}
}
.pio_features__modal_image {
display: block;
overflow: hidden;
margin-bottom: var(--size-20);
width: 100%;
border-radius: var(--size-16);
}
@media only screen and (max-width: 767px) {
.pio_features__modal_image {
margin-bottom: var(--size-10);
}
}
.pio_features__modal_item_title {
margin-bottom: var(--size-8);
color: var(--blue-1);
font-family: var(--family-jp);
font-size: var(--size-20);
font-weight: var(--weight-bold);
line-height: var(--line-height-160);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
.pio_features__modal_item_title {
margin-bottom: var(--size-10);
font-family: var(--family-jp);
font-size: var(--size-18);
font-weight: var(--weight-bold);
line-height: var(--line-height-160);
letter-spacing: 3%;
}
}
.pio_features__modal_item_description {
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-regular);
line-height: var(--line-height-170);
letter-spacing: 3%;
}
.pio_features__modal_link {
display: flex;
align-items: center;
justify-content: end;
gap: var(--size-20);
padding-inline: var(--size-80);
}
@media only screen and (max-width: 767px) {
.pio_features__modal_link {
flex-direction: column;
padding-inline: var(--size-20);
}
}
.pio_features__modal_link_lead {
font-family: var(--family-jp);
font-size: var(--size-18);
font-weight: var(--weight-bold);
line-height: var(--line-height-170);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
.pio_features__modal_link_lead {
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-bold);
line-height: var(--line-height-170);
letter-spacing: 3%;
}
}
.pio_features__modal_link_button {
width: min(19.444vw, 280px);
height: min(3.75vw, 54px);
background: var(--black);
transition: all var(--ease-in-out-200);
}
.pio_features__modal_link_button .c-button__text,
.pio_features__modal_link_button .c-button__icon {
transition: all var(--ease-in-out-200);
}
@media only screen and (max-width: 767px) {
.pio_features__modal_link_button {
width: 69.231vw;
height: 16.41vw;
}
}
.pio_features__modal_link_button .c-button__text {
color: var(--white);
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-bold);
line-height: var(--line-height-170);
letter-spacing: 3%;
}
.pio_features__modal_link_button .c-button__icon {
width: var(--size-13);
height: var(--size-13);
color: var(--white);
}
@media (hover: hover) and (pointer: fine) {
.pio_features__modal_link_button:hover {
background: var(--white);
}
.pio_features__modal_link_button:hover .c-button__text {
color: var(--black);
}
.pio_features__modal_link_button:hover .c-button__icon {
color: var(--black);
}
}
@media print, screen and (min-width: 768px) {
.pio_features__modal_close_button_sp {
display: none;
}
}
@media only screen and (max-width: 767px) {
.pio_features__modal_close_button_sp {
display: flex;
align-items: center;
gap: var(--size-6);
margin-inline: auto;
margin-top: var(--size-30);
}
}
@media only screen and (max-width: 767px) {
.pio_features__modal_close_button_sp_text {
color: var(--blue-3);
font-family: var(--family-jp);
font-size: var(--size-20);
font-weight: var(--weight-bold);
line-height: var(--line-height-120);
letter-spacing: 3%;
}
}
@media only screen and (max-width: 767px) {
.pio_features__modal_close_button_sp_icon {
width: var(--size-30);
height: var(--size-30);
transform: rotate(45deg);
}
}
#feature-popup-cont {
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease, visibility 0.3s ease;
background-color: rgba(187, 187, 187, 0.9);
position: fixed;
z-index: 100000;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#feature-popup-cont.is-active {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
#feature-popup-cont .modal-close {
background: url(../images/index/feature/btn-close.svg) no-repeat;
background-size: var(--size-26) auto;
background-position: center;
cursor: pointer;
position: absolute;
z-index: 2;
top: max(-3.472vw, -50px);
right: max(-3.472vw, -50px);
display: inline-flex;
align-items: center;
width: min(3.472vw, 50px);
height: min(3.472vw, 50px);
font-size: 0;
}
@media only screen and (max-width: 767px) {
#feature-popup-cont .modal-close {
background-size: var(--size-16) auto;
background-color: transparent;
top: inherit;
bottom: 0;
right: 0;
left: 0;
margin: 0 auto;
width: 15.385vw;
height: 15.385vw;
display: inline-flex;
align-items: center;
}
}
#feature-popup-cont .popup__inner {
display: flex;
align-items: center;
justify-content: center;
height: 100dvh;
}
@media only screen and (max-width: 767px) {
#feature-popup-cont .popup__inner {
align-items: flex-start;
position: relative;
}
}
#feature-popup-cont #feature-slide {
width: min(78.472vw, 1130px);
}
@media only screen and (max-width: 767px) {
#feature-popup-cont #feature-slide {
width: 100%;
height: 100dvh;
padding: 5.128vw 5.128vw 0;
}
}
#feature-popup-cont #feature-slide .slide {
background-color: var(--white);
overflow-y: auto;
}
@media only screen and (max-width: 767px) {
#feature-popup-cont #feature-slide .slide {
max-height: 100dvh;
padding-bottom: 20.513vw;
}
}
#feature-popup-cont #feature-slide .slide .modal-title {
background: linear-gradient(90deg, #363636 49.52%, #545658 100%);
color: var(--white);
display: flex;
}
@media print, screen and (min-width: 768px) {
#feature-popup-cont #feature-slide .slide .modal-title {
font-family: var(--family-jp);
font-size: var(--size-28);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
height: var(--size-70);
align-items: center;
}
}
@media only screen and (max-width: 767px) {
#feature-popup-cont #feature-slide .slide .modal-title {
font-family: var(--family-jp);
font-size: var(--size-20);
font-weight: var(--weight-bold);
line-height: var(--line-height-140);
letter-spacing: 3%;
align-items: flex-start;
-moz-column-gap: 3.077vw;
column-gap: 3.077vw;
}
}
#feature-popup-cont #feature-slide .slide .modal-title .ttl_num {
background: var(--grd_red);
width: var(--size-70);
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding-left: 0.2em;
font-family: var(--family-jp);
font-size: var(--size-32);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#feature-popup-cont #feature-slide .slide .modal-title .ttl_num {
width: 12.308vw;
height: 12.308vw;
font-family: var(--family-jp);
font-size: var(--size-20);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
}
#feature-popup-cont #feature-slide .slide .modal-title .layout--wrap {
flex: 1;
}
@media print, screen and (min-width: 768px) {
#feature-popup-cont #feature-slide .slide .modal-title .layout--wrap {
display: flex;
align-items: center;
}
}
@media only screen and (max-width: 767px) {
#feature-popup-cont #feature-slide .slide .modal-title .layout--wrap {
display: grid;
grid-template-columns: 1fr;
row-gap: 3.077vw;
padding-block: 4.615vw;
padding-right: 5.641vw;
}
}
@media print, screen and (min-width: 768px) {
#feature-popup-cont #feature-slide .slide .modal-title .ttl_txt {
padding-left: min(1.667vw, 24px);
}
}
@media print, screen and (min-width: 768px) {
#feature-popup-cont #feature-slide .slide .modal-title .ttl_txt--small {
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
margin-left: min(2.083vw, 30px);
}
}
@media only screen and (max-width: 767px) {
#feature-popup-cont #feature-slide .slide .modal-title .ttl_txt--small {
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-bold);
line-height: var(--line-height-120);
letter-spacing: 3%;
display: block;
}
}
#feature-popup-cont #feature-slide .slide .modal-body {
background-color: var(--white);
}
@media print, screen and (min-width: 768px) {
#feature-popup-cont #feature-slide .slide .modal-body {
display: grid;
grid-template-columns: min(31.25vw, 450px) min(32.639vw, 470px);
justify-content: space-between;
padding: var(--size-40) var(--size-70) var(--size-50);
min-height: min(39.583vw, 570px);
}
}
@media only screen and (max-width: 767px) {
#feature-popup-cont #feature-slide .slide .modal-body {
display: grid;
grid-template-columns: 1fr;
row-gap: 7.692vw;
padding-bottom: 7.692vw;
}
}
#feature-popup-cont #feature-slide .slide .modal-body .col-01 .img--layout img {
margin-bottom: var(--size-20);
}
@media only screen and (max-width: 767px) {
#feature-popup-cont #feature-slide .slide .modal-body .col-01 .img--layout img {
margin-top: -1px;
margin-bottom: 7.692vw;
}
}
@media only screen and (max-width: 767px) {
#feature-popup-cont #feature-slide .slide .modal-body .col-01 .txt--layout {
padding-inline: 7.692vw;
}
}
#feature-popup-cont #feature-slide .slide .modal-body .col-02 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr auto;
}
@media only screen and (max-width: 767px) {
#feature-popup-cont #feature-slide .slide .modal-body .col-02 {
padding-inline: 7.692vw;
}
}
#feature-popup-cont #feature-slide .slide .modal-body .col-02 .img--layout {
display: grid;
grid-template-columns: 1fr 1fr;
-moz-column-gap: min(2.083vw, 30px);
column-gap: min(2.083vw, 30px);
margin-bottom: var(--size-20);
}
@media only screen and (max-width: 767px) {
#feature-popup-cont #feature-slide .slide .modal-body .col-02 .img--layout {
grid-template-columns: 1fr;
row-gap: 5.128vw;
margin-bottom: 7.692vw;
}
}
#feature-popup-cont #feature-slide .slide .modal-body .modal-text-head--01 {
font-family: var(--family-jp);
font-size: var(--size-24);
font-weight: var(--weight-bold);
line-height: var(--line-height-140);
letter-spacing: 3%;
margin-bottom: min(1.111vw, 16px);
}
@media only screen and (max-width: 767px) {
#feature-popup-cont #feature-slide .slide .modal-body .modal-text-head--01 {
font-family: var(--family-jp);
font-size: var(--size-20);
font-weight: var(--weight-bold);
line-height: var(--line-height-140);
letter-spacing: 3%;
margin-bottom: 2.564vw;
}
}
#feature-popup-cont #feature-slide .slide .modal-body .modal-text-head--02 {
position: relative;
padding-left: var(--size-22);
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-bold);
line-height: var(--line-height-160);
letter-spacing: 3%;
font-size: min(1.181vw, 17px);
margin-bottom: min(0.417vw, 6px);
margin-top: min(1.389vw, 20px);
}
@media only screen and (max-width: 767px) {
#feature-popup-cont #feature-slide .slide .modal-body .modal-text-head--02 {
font-size: 4.359vw;
margin-bottom: 1.538vw;
margin-top: 5.128vw;
}
}
#feature-popup-cont #feature-slide .slide .modal-body .modal-text-head--02::before {
background-color: var(--red);
content: "";
display: block;
position: absolute;
left: 0px;
top: 0.6em;
width: min(0.417vw, 6px);
height: min(0.417vw, 6px);
box-shadow: 0 0 min(0.694vw, 10px) 0 #E60039;
}
@media only screen and (max-width: 767px) {
#feature-popup-cont #feature-slide .slide .modal-body .modal-text-head--02::before {
width: 1.538vw;
height: 1.538vw;
box-shadow: 0 0 2.564vw 0 #E60039;
}
}
#feature-popup-cont #feature-slide .slide .modal-body p {
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-regular);
line-height: var(--line-height-180);
letter-spacing: 3%;
}
#feature-popup-cont #feature-slide .slide .modal-body .btn--download {
background: url(../images/index/kv/icon_arrow.svg) no-repeat;
background-size: var(--size-28) auto;
background-position: right var(--size-18) center;
border: 1px solid var(--red);
color: var(--red);
display: flex;
align-items: center;
padding-block: min(1.25vw, 18px);
padding-right: min(3.333vw, 48px);
transition: all 0.3s;
}
@media print, screen and (min-width: 768px) {
#feature-popup-cont #feature-slide .slide .modal-body .btn--download:hover {
background-color: var(--red);
background-image: url(../images/index/feature/icon_arrow-white.svg);
color: var(--white);
}
#feature-popup-cont #feature-slide .slide .modal-body .btn--download:hover .text--02 {
border-color: var(--white);
}
}
@media only screen and (max-width: 767px) {
#feature-popup-cont #feature-slide .slide .modal-body .btn--download {
background-position: right var(--size-30) bottom var(--size-20);
display: grid;
grid-template-columns: 1fr;
padding-block: 5.128vw;
padding-inline: 7.692vw;
margin-top: 7.692vw;
}
}
#feature-popup-cont #feature-slide .slide .modal-body .btn--download .text--01 {
font-family: var(--family-jp);
font-size: var(--size-20);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
@media print, screen and (min-width: 768px) {
#feature-popup-cont #feature-slide .slide .modal-body .btn--download .text--01 {
padding-right: min(1.528vw, 22px);
padding-left: min(1.806vw, 26px);
}
}
@media only screen and (max-width: 767px) {
#feature-popup-cont #feature-slide .slide .modal-body .btn--download .text--01 {
padding-bottom: 2.564vw;
}
}
#feature-popup-cont #feature-slide .slide .modal-body .btn--download .text--02 {
font-family: var(--family-jp);
font-size: var(--size-12);
font-weight: var(--weight-bold);
line-height: var(--line-height-140);
letter-spacing: 3%;
}
@media print, screen and (min-width: 768px) {
#feature-popup-cont #feature-slide .slide .modal-body .btn--download .text--02 {
border-left: 1px solid rgba(230, 0, 57, 0.5);
padding-left: min(1.528vw, 22px);
}
}
@media only screen and (max-width: 767px) {
#feature-popup-cont #feature-slide .slide .modal-body .btn--download .text--02 {
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-bold);
line-height: var(--line-height-140);
letter-spacing: 3%;
border-top: 1px solid rgba(230, 0, 57, 0.5);
padding-top: 2.308vw;
}
}
@media only screen and (max-width: 767px) {
#feature-popup-cont #feature-slide .splide__arrows {
background-color: rgba(84, 89, 98, 0.9);
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
position: absolute;
height: 15.385vw;
width: calc(100% - 10.256vw);
z-index: 1;
}
}
#feature-popup-cont #feature-slide .splide__arrow {
border-radius: 0;
opacity: 1;
}
@media print, screen and (min-width: 768px) {
#feature-popup-cont #feature-slide .splide__arrow {
background: rgba(84, 89, 98, 0.5);
width: var(--size-60);
height: var(--size-60);
}
}
@media only screen and (max-width: 767px) {
#feature-popup-cont #feature-slide .splide__arrow {
background: transparent;
position: fixed;
top: inherit;
bottom: 0;
transform: none;
width: 15.385vw;
height: 15.385vw;
}
}
#feature-popup-cont #feature-slide .splide__arrow--prev {
left: max(-2.083vw, -30px);
}
@media only screen and (max-width: 767px) {
#feature-popup-cont #feature-slide .splide__arrow--prev {
left: 5.128vw;
}
}
#feature-popup-cont #feature-slide .splide__arrow--next {
right: max(-2.083vw, -30px);
}
@media only screen and (max-width: 767px) {
#feature-popup-cont #feature-slide .splide__arrow--next {
right: 5.128vw;
}
}
#feature-popup-cont #feature-slide .splide__arrow svg {
fill: #fff;
stroke: #fff;
stroke-linejoin: round;
}
@media print, screen and (min-width: 768px) {
#feature-popup-cont #feature-slide .splide__arrow svg {
width: min(1.111vw, 16px);
height: min(1.111vw, 16px);
stroke-width: 2px;
}
}
@media only screen and (max-width: 767px) {
#feature-popup-cont #feature-slide .splide__arrow svg {
width: 4.103vw;
height: 4.103vw;
stroke-width: 1px;
}
}
/* #featureの裏側に敷き詰める */
#bg-section {
position: absolute;
left: 0;
width: 100%;
height: 100%;
z-index: 0; /* テキスト等（z-index: 8）より奥に配置 */
clip-path: inset(0);
}
@media print, screen and (min-width: 768px) {
#bg-section {
top: calc(min(5.139vw, 74px) + 1px);
}
}
@media only screen and (max-width: 767px) {
#bg-section {
top: 66px;
}
}
#bg-section .bg-section__bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100svh;
background: url("../images/index/bg-section/bg.webp") center/cover no-repeat;
will-change: transform;
transform: translateZ(0);
}
@media only screen and (max-width: 767px) {
#bg-section .bg-section__bg {
background-image: url("../images/index/bg-section/bg_sp.webp");
}
}
#benefits {
background-color: var(--white);
position: relative;
z-index: 8;
position: relative;
padding-bottom: min(11.111vw, 160px);
background-image: url("../images/components/bg/bg_pattern.webp");
background-repeat: repeat-y;
background-position: top;
background-size: 100% auto;
}
@media only screen and (max-width: 767px) {
#benefits {
padding: 0 0 20.513vw;
}
}
#benefits .benefits--ttl {
padding-top: min(13.194vw, 190px);
margin-bottom: min(8.681vw, 125px);
padding-left: min(2.778vw, 40px);
position: relative;
}
@media only screen and (max-width: 767px) {
#benefits .benefits--ttl {
padding-top: 52.308vw;
margin-bottom: 12.821vw;
padding-left: 7.692vw;
margin-inline: 5.128vw;
}
}
#benefits .benefits--ttl .benefits--ttl_decoration {
position: absolute;
left: 0;
top: max(-6.25vw, -90px);
z-index: 1;
}
@media only screen and (max-width: 767px) {
#benefits .benefits--ttl .benefits--ttl_decoration {
left: 1.795vw;
top: 5.128vw;
}
}
#benefits .benefits--ttl h2 {
font-family: var(--family-jp);
font-size: var(--size-52);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#benefits .benefits--ttl h2 {
font-family: var(--family-jp);
font-size: var(--size-34);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
}
#benefits .benefits--ttl h2 span {
display: block;
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-regular);
line-height: var(--line-height-100);
letter-spacing: 3%;
padding-top: min(1.736vw, 25px);
}
@media only screen and (max-width: 767px) {
#benefits .benefits--ttl h2 span {
font-family: var(--family-jp);
font-size: var(--size-12);
font-weight: var(--weight-regular);
line-height: var(--line-height-100);
letter-spacing: 3%;
padding-top: 3.59vw;
}
}
#benefits .--cover {
width: min(50vw, 720px);
height: min(31.25vw, 450px);
position: absolute;
background: url(../images/index/benefits/title_image.webp) no-repeat center/cover;
top: max(-5.208vw, -75px);
right: max(-8.333vw, -120px);
}
@media only screen and (max-width: 767px) {
#benefits .--cover {
width: 82.308vw;
height: 51.282vw;
top: -11.795vw;
right: -5.128vw;
}
}
#benefits .--lead {
font-family: var(--family-jp);
font-size: var(--size-32);
font-weight: var(--weight-bold);
line-height: var(--line-height-160);
letter-spacing: 3%;
margin-bottom: min(0.694vw, 10px);
background: url(../images/index/benefits/icon_tline.svg) no-repeat center left;
padding-left: min(2.5vw, 36px);
}
@media only screen and (max-width: 767px) {
#benefits .--lead {
font-family: var(--family-jp);
font-size: var(--size-20);
font-weight: var(--weight-bold);
line-height: var(--line-height-160);
letter-spacing: 3%;
margin-inline: 5.128vw;
margin-bottom: 2.564vw;
padding-left: 7.692vw;
background-size: 6.667vw auto;
}
}
#benefits .--sub {
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-regular);
line-height: var(--line-height-180);
letter-spacing: 3%;
margin-bottom: min(2.5vw, 36px);
}
@media only screen and (max-width: 767px) {
#benefits .--sub {
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-regular);
line-height: var(--line-height-180);
letter-spacing: 3%;
margin-inline: 5.128vw;
margin-bottom: 5.128vw;
}
}
@media only screen and (max-width: 767px) {
#benefits .benefits--flow {
margin-inline: 5.128vw;
}
}
#benefits .benefits--flow.--01 {
margin-bottom: min(2.778vw, 40px);
}
@media only screen and (max-width: 767px) {
#benefits .benefits--flow.--01 {
margin-bottom: 7.692vw;
}
}
#benefits .benefits--flow.--02 {
margin-bottom: min(4.167vw, 60px);
}
@media only screen and (max-width: 767px) {
#benefits .benefits--flow.--02 {
margin-bottom: 7.692vw;
}
}
#benefits .benefits--flow .--ttl {
display: flex;
background: linear-gradient(90deg, #363636 49.52%, #545658 100%);
box-shadow: 0 0 30px 0 rgba(169, 172, 178, 0.1);
color: var(--white);
align-items: center;
margin-bottom: min(1.042vw, 15px);
}
@media only screen and (max-width: 767px) {
#benefits .benefits--flow .--ttl {
display: flex;
align-items: stretch;
margin-bottom: 2.564vw;
}
}
#benefits .benefits--flow .--ttl .--grad {
width: min(6.944vw, 100px);
height: min(6.944vw, 100px);
background: var(--grd_red);
color: var(--white);
display: grid;
place-content: center;
}
@media only screen and (max-width: 767px) {
#benefits .benefits--flow .--ttl .--grad {
width: 12.821vw;
height: auto;
display: block;
flex-shrink: 0;
}
}
#benefits .benefits--flow .--ttl .--grad .--num {
display: flex;
justify-content: center;
align-items: center;
}
#benefits .benefits--flow .--ttl .--grad .--num span {
font-family: var(--family-jp);
font-size: var(--size-28);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#benefits .benefits--flow .--ttl .--grad .--num span {
font-size: 5.128vw;
}
}
#benefits .benefits--flow .--ttl h3 {
font-family: var(--family-jp);
font-size: var(--size-22);
font-weight: var(--weight-bold);
line-height: var(--line-height-160);
letter-spacing: 3%;
padding-left: min(1.389vw, 20px);
}
@media print, screen and (min-width: 768px) {
#benefits .benefits--flow .--ttl h3 {
position: relative;
top: 0.1em;
}
}
@media only screen and (max-width: 767px) {
#benefits .benefits--flow .--ttl h3 {
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-bold);
line-height: var(--line-height-160);
letter-spacing: 3%;
padding: 3.59vw 5.128vw;
}
}
#benefits .benefits--flow .--ttl h3 span {
display: block;
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-regular);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#benefits .benefits--flow .--ttl h3 span {
font-family: var(--family-jp);
font-size: var(--size-12);
font-weight: var(--weight-regular);
line-height: var(--line-height-160);
letter-spacing: 3%;
flex-shrink: 0;
}
}
#benefits .benefits--flow .--contents .--li {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: min(1.042vw, 15px);
}
@media only screen and (max-width: 767px) {
#benefits .benefits--flow .--contents .--li {
grid-template-columns: 1fr;
gap: 2.564vw;
}
}
#benefits .benefits--flow .--contents .--li li {
padding: min(2.778vw, 40px);
text-align: center;
background-color: var(--white);
border: 1px solid #E4E4E4;
box-shadow: 0 0 min(2.083vw, 30px) 0 rgba(169, 172, 178, 0.1);
}
@media only screen and (max-width: 767px) {
#benefits .benefits--flow .--contents .--li li {
padding: 10.256vw 6.667vw;
display: grid;
-moz-column-gap: 4.103vw;
column-gap: 4.103vw;
}
}
#benefits .benefits--flow .--contents .--li li:nth-child(2) {
position: relative;
}
#benefits .benefits--flow .--contents .--li li img {
display: block;
margin: 0 auto;
width: min(9.028vw, 130px);
}
@media only screen and (max-width: 767px) {
#benefits .benefits--flow .--contents .--li li img {
width: 25.641vw;
}
}
#benefits .benefits--flow .--contents .--li li .red {
color: var(--red);
}
#benefits .benefits--flow .--contents .--li li h4 {
font-family: var(--family-jp);
font-size: var(--size-28);
font-weight: var(--weight-bold);
line-height: var(--line-height-120);
letter-spacing: 3%;
margin-bottom: min(0.694vw, 10px);
}
@media only screen and (max-width: 767px) {
#benefits .benefits--flow .--contents .--li li h4 {
font-family: var(--family-jp);
font-size: var(--size-22);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
margin-bottom: 2.564vw;
grid-column: 1/3;
grid-row: 1/2;
white-space: nowrap;
text-align: left;
}
}
#benefits .benefits--flow .--contents .--li li h4 span {
font-family: var(--family-jp);
font-size: var(--size-22);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#benefits .benefits--flow .--contents .--li li h4 span {
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
padding: 0 1.282vw;
}
}
#benefits .benefits--flow .--contents .--li li p {
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-regular);
line-height: var(--line-height-160);
letter-spacing: 3%;
padding-top: min(0.556vw, 8px);
text-align: left;
}
@media only screen and (max-width: 767px) {
#benefits .benefits--flow .--contents .--li li p {
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-regular);
line-height: var(--line-height-180);
letter-spacing: 3%;
display: grid;
place-content: center;
}
}
#spec {
position: relative;
background-color: var(--white);
position: relative;
z-index: 8;
}
@media print, screen and (min-width: 768px) {
#spec {
padding-bottom: min(11.111vw, 160px);
margin-bottom: min(16.667vw, 240px);
}
}
@media only screen and (max-width: 767px) {
#spec {
padding-bottom: 34.103vw;
}
}
#spec:before {
content: "";
display: block;
background: url(../images/index/spec/spec-main-line.webp) no-repeat top right/contain;
width: min(35.694vw, 514px);
height: min(25.764vw, 371px);
position: absolute;
top: 0;
right: 0;
}
@media only screen and (max-width: 767px) {
#spec:before {
width: 65.897vw;
height: 42.564vw;
}
}
@media only screen and (max-width: 767px) {
#spec .spec__tab_button-robot,
#spec .spec__tab_button-port,
#spec .spec__tab_button-bin,
#spec .spec__tab_button-grid,
#spec .spec__tab_button-controller {
height: var(--size-90);
}
}
@media only screen and (max-width: 767px) {
#spec .spec__tab_button-robot:where([aria-pressed=false], [aria-selected=false]),
#spec .spec__tab_button-port:where([aria-pressed=false], [aria-selected=false]),
#spec .spec__tab_button-bin:where([aria-pressed=false], [aria-selected=false]),
#spec .spec__tab_button-grid:where([aria-pressed=false], [aria-selected=false]),
#spec .spec__tab_button-controller:where([aria-pressed=false], [aria-selected=false]) {
justify-content: space-between;
}
}
#spec .spec__tab_button-robot .c-tab-button__icon,
#spec .spec__tab_button-port .c-tab-button__icon,
#spec .spec__tab_button-bin .c-tab-button__icon,
#spec .spec__tab_button-grid .c-tab-button__icon,
#spec .spec__tab_button-controller .c-tab-button__icon {
background-position: center;
background-repeat: no-repeat;
}
#spec .spec__tab_button-robot .c-tab-button__icon {
width: min(3.403vw, 49px);
height: min(1.875vw, 27px);
background-image: url("../../assets/images/components/icons/icon_robot_red.svg");
background-size: min(3.403vw, 49px) min(1.875vw, 27px);
}
@media only screen and (max-width: 767px) {
#spec .spec__tab_button-robot .c-tab-button__icon {
width: 11.282vw;
height: 6.154vw;
background-size: 11.282vw 6.154vw;
}
}
#spec .spec__tab_button-robot:where([aria-selected=true]) .c-tab-button__icon {
background-image: url("../../assets/images/components/icons/icon_robot_white.svg");
}
#spec .spec__tab_button-port .c-tab-button__icon {
width: min(3.194vw, 46px);
height: min(2.5vw, 36px);
background-image: url("../../assets/images/components/icons/icon_port_red.svg");
background-size: min(3.194vw, 46px) min(2.5vw, 36px);
}
@media only screen and (max-width: 767px) {
#spec .spec__tab_button-port .c-tab-button__icon {
width: 10.769vw;
height: 8.205vw;
background-size: 10.769vw 8.205vw;
}
}
#spec .spec__tab_button-port:where([aria-selected=true]) .c-tab-button__icon {
background-image: url("../../assets/images/components/icons/icon_port_white.svg");
}
#spec .spec__tab_button-bin .c-tab-button__icon {
width: min(2.778vw, 40px);
height: min(1.528vw, 22px);
background-image: url("../../assets/images/components/icons/icon_bin_red.svg");
background-size: min(2.778vw, 40px) min(1.528vw, 22px);
}
@media only screen and (max-width: 767px) {
#spec .spec__tab_button-bin .c-tab-button__icon {
width: 9.231vw;
height: 5.128vw;
background-size: 9.231vw 5.128vw;
}
}
#spec .spec__tab_button-bin:where([aria-selected=true]) .c-tab-button__icon {
background-image: url("../../assets/images/components/icons/icon_bin_white.svg");
}
#spec .spec__tab_button-grid .c-tab-button__icon {
width: min(2.083vw, 30px);
height: min(2.083vw, 30px);
background-image: url("../../assets/images/components/icons/icon_grid_red.svg");
background-size: min(3.403vw, 49px) min(1.875vw, 27px);
}
@media only screen and (max-width: 767px) {
#spec .spec__tab_button-grid .c-tab-button__icon {
width: 6.923vw;
height: 6.923vw;
background-size: 6.923vw 6.923vw;
}
}
#spec .spec__tab_button-grid:where([aria-selected=true]) .c-tab-button__icon {
background-image: url("../../assets/images/components/icons/icon_grid_white.svg");
}
#spec .spec__tab_button-controller .c-tab-button__icon {
width: min(2.083vw, 30px);
height: min(2.361vw, 34px);
background-image: url("../../assets/images/components/icons/icon_controller_red.svg");
background-size: min(2.083vw, 30px) min(2.361vw, 34px);
}
@media only screen and (max-width: 767px) {
#spec .spec__tab_button-controller .c-tab-button__icon {
width: 6.923vw;
height: 7.949vw;
background-size: 6.923vw 7.949vw;
}
}
#spec .spec__tab_button-controller:where([aria-selected=true]) .c-tab-button__icon {
background-image: url("../../assets/images/components/icons/icon_controller_white.svg");
}
#spec .spec__tab_content_video {
position: relative;
width: min(37.5vw, 540px);
height: min(20.694vw, 298px);
}
@media only screen and (max-width: 767px) {
#spec .spec__tab_content_video {
width: 84.615vw;
height: 52.308vw;
}
}
#spec .spec__tab_content_video_media {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
z-index: 1;
pointer-events: none;
}
#spec .spec__tab_content_video_controller {
position: absolute;
margin: var(--size-12);
bottom: 0;
right: 0;
z-index: 5;
}
@media only screen and (max-width: 767px) {
#spec .spec__tab_content_video_controller {
margin: var(--size-10);
}
}
#spec .spec__tab_content {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--size-50);
padding-top: var(--size-60);
}
@media only screen and (max-width: 767px) {
#spec .spec__tab_content {
grid-template-columns: 1fr;
gap: var(--size-20);
padding-top: var(--size-40);
margin-inline: auto;
width: 84.615vw;
}
}
#spec .spec__tab_title {
margin-bottom: var(--size-20);
font-family: var(--family-jp);
font-size: var(--size-30);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#spec .spec__tab_title {
font-family: var(--family-jp);
font-size: var(--size-22);
font-weight: var(--weight-bold);
line-height: var(--line-height-160);
letter-spacing: 3%;
}
}
#spec .spec__tab_description {
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-regular);
line-height: var(--line-height-180);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#spec .spec__tab_description {
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-regular);
line-height: var(--line-height-180);
letter-spacing: 3%;
}
}
#spec .spec__tab_definition {
margin-top: 1em;
}
#spec .spec__tab_definition_item {
display: flex;
}
#spec .spec__tab_definition_item dt,
#spec .spec__tab_definition_item dd {
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-regular);
line-height: var(--line-height-180);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#spec .spec__tab_definition_item dt,
#spec .spec__tab_definition_item dd {
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-regular);
line-height: var(--line-height-180);
letter-spacing: 3%;
}
}
#spec .spec--ttl {
padding-top: min(13.194vw, 190px);
margin-bottom: min(1.389vw, 20px);
padding-left: min(2.778vw, 40px);
position: relative;
}
@media only screen and (max-width: 767px) {
#spec .spec--ttl {
padding-top: 33.333vw;
margin-bottom: 10.769vw;
padding-left: 7.692vw;
margin-left: 5.128vw;
}
}
#spec .spec--ttl h2 {
font-family: var(--family-jp);
font-size: var(--size-52);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#spec .spec--ttl h2 {
font-family: var(--family-jp);
font-size: var(--size-34);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
}
#spec .spec--ttl h2 span {
display: block;
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-regular);
line-height: var(--line-height-100);
letter-spacing: 3%;
padding-top: min(1.736vw, 25px);
}
@media only screen and (max-width: 767px) {
#spec .spec--ttl h2 span {
font-family: var(--family-jp);
font-size: var(--size-12);
font-weight: var(--weight-regular);
line-height: var(--line-height-100);
letter-spacing: 3%;
padding-top: 3.59vw;
}
}
#spec .spec--ttl_decoration {
position: absolute;
left: 0;
top: max(-6.25vw, -90px);
z-index: 1;
}
@media only screen and (max-width: 767px) {
#spec .spec--ttl_decoration {
left: 1.795vw;
top: -14.103vw;
}
}
#spec .spec--main {
overflow: hidden;
margin-bottom: min(1.389vw, 20px);
}
@media only screen and (max-width: 767px) {
#spec .spec--main {
margin-bottom: 10.256vw;
}
}
#spec .spec--main__contents {
display: grid;
grid-template-columns: 1fr 1fr;
gap: min(4.722vw, 68px);
align-items: center;
max-width: min(91.389vw, 1316px);
width: 100%;
margin: 0 auto;
position: relative;
}
@media only screen and (max-width: 767px) {
#spec .spec--main__contents {
display: block;
max-width: none;
padding-bottom: 10.256vw;
}
#spec .spec--main__contents:before {
content: "";
display: block;
width: 100%;
height: 71.795vw;
background: linear-gradient(90deg, #F3F3F3 77.88%, rgba(243, 243, 243, 0) 100%);
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
}
}
#spec .spec--main__contents .--img {
width: min(58.889vw, 848px);
height: min(44.028vw, 634px);
background: url(../images/index/spec/spec-main.webp) no-repeat center/contain;
position: relative;
}
@media only screen and (max-width: 767px) {
#spec .spec--main__contents .--img {
background: url(../images/index/spec/spec-main_sp.webp) no-repeat center/contain;
width: 94.872vw;
height: 85.128vw;
}
}
#spec .spec--main__contents .--img:before {
content: "";
display: block;
height: min(29.167vw, 420px);
background: linear-gradient(90deg, #F5F6F6 88.16%, rgba(245, 246, 246, 0) 100%);
position: absolute;
bottom: min(2.778vw, 40px);
right: 0;
width: 100vw;
z-index: -1;
}
@media only screen and (max-width: 767px) {
#spec .spec--main__contents .--img:before {
display: none;
}
}
#spec .spec--main__contents .--desc {
width: min(23.889vw, 344px);
height: min(23.889vw, 344px);
background: url(../images/index/spec/spec-main-figure.webp) no-repeat center/contain;
display: grid;
place-content: center;
position: relative;
top: min(4.167vw, 60px);
}
@media only screen and (max-width: 767px) {
#spec .spec--main__contents .--desc {
top: auto;
background: none;
width: 100%;
height: auto;
margin-left: 7.692vw;
margin-top: -5.128vw;
display: block;
}
}
#spec .spec--main__contents .--desc h3 {
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-bold);
line-height: var(--line-height-180);
letter-spacing: 3%;
text-align: center;
}
@media only screen and (max-width: 767px) {
#spec .spec--main__contents .--desc h3 {
font-size: 4.103vw;
text-align: left;
}
}
#spec .spec--main__contents .--desc h3 span {
color: var(--red);
font-family: var(--family-jp);
font-size: var(--size-20);
font-weight: var(--weight-bold);
line-height: var(--line-height-180);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#spec .spec--main__contents .--desc h3 span {
font-size: 5.128vw;
}
}
#spec .autostore-introduction {
margin-top: var(--size-80);
}
@media only screen and (max-width: 767px) {
#spec .autostore-introduction {
margin-top: var(--size-40);
margin-inline: auto;
width: 84.615vw;
}
}
#spec .autostore-introduction h3 {
font-family: var(--family-jp);
font-size: var(--size-28);
font-weight: var(--weight-bold);
line-height: var(--line-height-160);
letter-spacing: 3%;
margin-bottom: min(2.222vw, 32px);
display: flex;
align-items: center;
gap: min(0.694vw, 10px);
}
@media only screen and (max-width: 767px) {
#spec .autostore-introduction h3 {
font-size: 5.128vw;
gap: 2.564vw;
margin-bottom: 7.692vw;
align-items: flex-start;
}
}
#spec .autostore-introduction h3:before {
content: "";
display: block;
background: url(../images/index/spec/spec-intro-deco.png) no-repeat center/contain;
width: min(4.583vw, 66px);
height: min(1.806vw, 26px);
}
@media only screen and (max-width: 767px) {
#spec .autostore-introduction h3:before {
width: 9.231vw;
height: 7.436vw;
flex-shrink: 1;
position: relative;
top: 0.2em;
}
}
#spec .autostore-introduction__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: min(4.306vw, 62px);
}
@media only screen and (max-width: 767px) {
#spec .autostore-introduction__list {
grid-template-columns: 1fr;
gap: 7.692vw;
}
}
#spec .autostore-introduction__list li {
display: flex;
flex-direction: column;
}
@media only screen and (max-width: 767px) {
#spec .autostore-introduction__list li {
display: grid;
grid-template-columns: 25.641vw 1fr;
-moz-column-gap: 4.103vw;
column-gap: 4.103vw;
}
}
@media only screen and (max-width: 767px) {
#spec .autostore-introduction__list li picture {
grid-column: 1/2;
grid-row: 1/3;
width: 100%;
height: auto;
}
}
#spec .autostore-introduction__list li .--txt {
padding: min(1.389vw, 20px) 0;
flex-grow: 1;
font-family: var(--family-jp);
font-size: var(--size-18);
font-weight: var(--weight-bold);
line-height: var(--line-height-160);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#spec .autostore-introduction__list li .--txt {
padding: 0;
grid-column: 2/3;
grid-row: 1/2;
font-size: 3.59vw;
align-self: end;
margin-bottom: 5.641vw;
}
}
@media only screen and (max-width: 767px) {
#spec .autostore-introduction__list li .--btn {
grid-column: 2/3;
grid-row: 2/3;
align-self: start;
margin-top: 0;
}
}
#spec .autostore-introduction__list li .--btn a {
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-medium);
line-height: var(--line-height-160);
letter-spacing: 3%;
display: inline-flex;
gap: min(0.694vw, 10px);
align-items: center;
margin-top: auto;
transition: all var(--ease-in-out-300);
}
@media print, screen and (min-width: 768px) {
#spec .autostore-introduction__list li .--btn a:hover {
opacity: 0.8;
}
}
@media only screen and (max-width: 767px) {
#spec .autostore-introduction__list li .--btn a {
font-size: 3.59vw;
gap: 2.564vw;
}
}
#spec .autostore-introduction__list li .--btn a:before {
content: "";
display: block;
width: min(1.944vw, 28px);
height: min(1.944vw, 28px);
background: url(../images/index/information/icon_arrow.svg) no-repeat center;
background-size: min(1.944vw, 28px) auto;
}
@media only screen and (max-width: 767px) {
#spec .autostore-introduction__list li .--btn a:before {
width: 7.179vw;
height: 7.179vw;
background-size: 7.179vw auto;
flex-shrink: 1;
}
}
@media only screen and (max-width: 767px) {
#spec .autostore-introduction__list li .--btn a .exp span {
display: block;
font-size: 3.077vw;
}
}
@media only screen and (max-width: 767px) {
#spec .autostore-introduction__list li:last-child .--txt {
margin-bottom: 3.846vw;
}
}
#support {
background-color: var(--white);
position: relative;
z-index: 8;
}
@media print, screen and (min-width: 768px) {
#support {
padding-top: min(16.667vw, 240px);
margin-top: max(-16.667vw, -240px);
}
}
#support .support__wrap {
background-color: var(--gray-2);
background-image: url("../images/components/bg/bg_pattern.webp");
background-repeat: repeat-y;
background-position: top;
background-size: 100% auto;
padding-top: 1px;
}
@media print, screen and (min-width: 768px) {
#support .support__contents {
padding-bottom: min(9.722vw, 140px);
}
}
@media only screen and (max-width: 767px) {
#support .support__contents {
padding-bottom: 20.513vw;
}
}
#support .l-tab-button__list {
display: flex;
justify-content: flex-start;
}
#support .l-tab-button__list li {
width: min(16.458vw, 237px);
}
#support .support__inner {
width: min(100vw, 1440px);
height: 100%;
margin-inline: auto;
}
@media only screen and (max-width: 767px) {
#support .support__inner {
width: 100%;
}
}
#support .cont__body {
position: relative;
padding-top: min(8.333vw, 120px);
}
@media only screen and (max-width: 767px) {
#support .cont__body {
padding-top: 10.256vw;
}
}
@media print, screen and (min-width: 768px) {
#support .title_content .c-dot-animation.size--large.ttl_decoration {
--c-dot-background-length: min(37.5vw, 540px);
}
}
#support .title_content .sp {
display: none;
}
@media only screen and (max-width: 767px) {
#support .title_content .sp {
display: block;
position: absolute;
left: -6.667vw;
top: -38.974vw;
}
}
#support .title__area {
padding-bottom: min(5.556vw, 80px);
border-bottom: 1px solid #CDCDCD;
position: relative;
}
@media only screen and (max-width: 767px) {
#support .title__area {
padding-bottom: 10.256vw;
margin-inline: 5.128vw;
}
}
#support .title__area h3 {
font-family: var(--family-jp);
font-size: var(--size-36);
font-weight: var(--weight-bold);
line-height: var(--line-height-160);
letter-spacing: 3%;
margin-bottom: min(1.389vw, 20px);
}
@media only screen and (max-width: 767px) {
#support .title__area h3 {
font-family: var(--family-jp);
font-size: var(--size-22);
font-weight: var(--weight-bold);
line-height: var(--line-height-160);
letter-spacing: 3%;
margin-bottom: 5.128vw;
}
}
#support .title__area h3 span {
display: block;
font-family: var(--family-jp);
font-size: var(--size-30);
font-weight: var(--weight-bold);
line-height: var(--line-height-140);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#support .title__area h3 span {
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
margin-bottom: 3.077vw;
}
}
#support .title__area p {
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-regular);
line-height: var(--line-height-180);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#support .title__area p {
font-size: 3.59vw;
}
}
#support .title__area--image {
position: absolute;
top: min(1.528vw, 22px);
right: min(6.25vw, 90px);
background: url(../images/index/support/support-logo.svg) no-repeat center/contain;
width: min(14.028vw, 202px);
height: min(12.5vw, 180px);
}
@media only screen and (max-width: 767px) {
#support .title__area--image {
width: 19.744vw;
height: 17.436vw;
top: -3.077vw;
right: 0;
}
}
#support .flow {
padding-bottom: min(10.764vw, 155px);
position: relative;
}
@media only screen and (max-width: 767px) {
#support .flow {
margin-inline: 5.128vw;
padding-bottom: 0vw;
}
}
#support .flow--image {
position: absolute;
top: min(4.167vw, 60px);
left: min(4.028vw, 58px);
width: min(18.264vw, 263px);
}
@media only screen and (max-width: 767px) {
#support .flow--image {
width: 25.641vw;
top: 10.256vw;
left: 0vw;
}
}
#support .flow ul li {
padding-left: min(28.472vw, 410px);
padding-right: min(3.472vw, 50px);
height: min(21.875vw, 315px);
display: flex;
align-items: center;
border-bottom: 1px solid #CDCDCD;
}
@media only screen and (max-width: 767px) {
#support .flow ul li {
height: 97.179vw;
padding-left: 30.769vw;
padding-right: 0;
}
}
@media only screen and (max-width: 767px) {
#support .flow ul li:last-child {
border-bottom: none;
}
}
#support .flow ul li dl dt {
font-family: var(--family-jp);
font-size: var(--size-30);
font-weight: var(--weight-bold);
line-height: var(--line-height-160);
letter-spacing: 3%;
margin-bottom: min(1.389vw, 20px);
}
@media only screen and (max-width: 767px) {
#support .flow ul li dl dt {
font-size: 5.128vw;
margin-bottom: 2.564vw;
letter-spacing: -0.02em;
}
}
#support .flow ul li dl dt .red {
color: var(--red);
}
#support .flow ul li dl dd {
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-regular);
line-height: var(--line-height-180);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#support .flow ul li dl dd {
font-size: 3.59vw;
}
}
@media only screen and (max-width: 767px) {
#support .reasons {
margin-inline: 5.128vw;
}
}
#support .reasons h3 {
font-family: var(--family-jp);
font-size: var(--size-44);
font-weight: var(--weight-bold);
line-height: var(--line-height-140);
letter-spacing: 3%;
padding-bottom: min(4.167vw, 60px);
position: relative;
}
@media only screen and (max-width: 767px) {
#support .reasons h3 {
font-size: 6.154vw;
padding-bottom: 10.256vw;
}
}
#support .reasons h3 .reasons--image {
position: absolute;
bottom: min(1.389vw, 20px);
right: 0;
background: url(../images/index/support/support-machine.png) no-repeat center/contain;
width: min(25.417vw, 366px);
height: min(13.681vw, 197px);
}
@media only screen and (max-width: 767px) {
#support .reasons h3 .reasons--image {
width: 35.385vw;
height: 20.513vw;
right: 2.564vw;
bottom: 7.692vw;
}
}
#support .reasons--list {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: min(4.167vw, 60px);
}
@media only screen and (max-width: 767px) {
#support .reasons--list {
grid-template-columns: 1fr;
gap: 5.128vw;
}
}
#support .reasons--list li:nth-child(2) .--ttl:after {
background: url(../images/index/support/support-reasons-icon02.svg) no-repeat center right/contain;
}
#support .reasons--list li:last-child .--ttl:after {
background: url(../images/index/support/support-reasons-icon03.svg) no-repeat center right/contain;
}
#support .reasons--list .--ttl {
background: linear-gradient(90deg, #363636 49.52%, #545658 100%);
display: flex;
height: min(8.333vw, 120px);
position: relative;
}
@media only screen and (max-width: 767px) {
#support .reasons--list .--ttl {
height: 20.513vw;
}
}
#support .reasons--list .--ttl:after {
content: "";
display: block;
background: url(../images/index/support/support-reasons-icon01.svg) no-repeat center right/contain;
position: absolute;
top: 0;
right: 0;
width: min(10.417vw, 150px);
height: min(8.333vw, 120px);
}
@media only screen and (max-width: 767px) {
#support .reasons--list .--ttl:after {
height: 20.513vw;
width: 25.641vw;
right: 0vw;
}
}
#support .reasons--list .--ttl .grad {
font-family: var(--family-jp);
font-size: var(--size-28);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
color: var(--white);
background: var(--grd_red);
width: min(2.083vw, 30px);
flex-shrink: 0;
display: grid;
place-content: center;
}
@media only screen and (max-width: 767px) {
#support .reasons--list .--ttl .grad {
font-size: 6.154vw;
width: 7.692vw;
}
}
#support .reasons--list .--ttl .txt {
font-family: var(--family-jp);
font-size: var(--size-32);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
color: var(--white);
padding-left: min(1.389vw, 20px);
display: flex;
align-items: center;
}
@media only screen and (max-width: 767px) {
#support .reasons--list .--ttl .txt {
font-size: 6.154vw;
padding-left: 5.128vw;
}
}
#support .reasons--list .--content {
background-color: var(--white);
padding: min(2.778vw, 40px) min(2.5vw, 36px);
}
@media only screen and (max-width: 767px) {
#support .reasons--list .--content {
padding: 7.692vw;
}
}
#support .reasons--list .--content h4 {
font-family: var(--family-jp);
font-size: var(--size-20);
font-weight: var(--weight-bold);
line-height: var(--line-height-160);
letter-spacing: 3%;
margin-bottom: min(1.389vw, 20px);
letter-spacing: -0.02em;
}
@media only screen and (max-width: 767px) {
#support .reasons--list .--content h4 {
font-size: 4.615vw;
}
}
#support .reasons--list .--content p {
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-regular);
line-height: var(--line-height-180);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#support .reasons--list .--content p {
font-size: 3.59vw;
}
}
#support .mod-bnr_space {
margin-top: min(5.556vw, 80px);
}
@media only screen and (max-width: 767px) {
#support .mod-bnr_space {
margin-top: 10.256vw;
}
}
@media print, screen and (min-width: 768px) {
#support .mod-bnr_space .bnr_copy {
margin-left: min(20.486vw, 295px);
}
}
@media only screen and (max-width: 767px) {
#support .mod-bnr_space .bnr_copy {
padding-top: 4.615vw;
}
}
#support .mod-bnr_space .bnr_copy .small {
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-medium);
line-height: var(--line-height-100);
letter-spacing: 3%;
display: block;
padding-top: min(0.833vw, 12px);
}
@media only screen and (max-width: 767px) {
#support .mod-bnr_space .bnr_copy .small {
font-family: var(--family-jp);
font-size: var(--size-12);
font-weight: var(--weight-medium);
line-height: var(--line-height-150);
letter-spacing: 3%;
padding-top: 2.564vw;
}
}
@media print, screen and (min-width: 768px) {
#support .mod-bnr_space .support-bnr {
width: min(20.833vw, 300px);
}
}
@media only screen and (max-width: 767px) {
#support .mod-bnr_space .support-bnr {
border: var(--size-2) solid var(--black);
}
}
@media only screen and (max-width: 767px) {
#support .c-title_image-group .title_bg.parallax-wrapper img.js-parallax {
transform-origin: 50% 50% !important;
}
}
#related {
background-color: var(--white);
position: relative;
z-index: 8;
background: url(../images/index/related/related-bg.png) repeat;
background-size: min(4.444vw, 64px) auto;
background-position: center min(2.778vw, 40px);
padding: min(8.333vw, 120px) 0 min(6.667vw, 96px);
}
@media only screen and (max-width: 767px) {
#related {
padding: 20.513vw 5.128vw;
background-size: 9.744vw auto;
background-position: center 7.692vw;
}
}
#related .related--bnr {
background: #F0F9BE;
display: flex;
justify-content: space-between;
padding: min(4.861vw, 70px) min(5.556vw, 80px);
}
@media only screen and (max-width: 767px) {
#related .related--bnr {
flex-direction: column;
padding: 10.256vw 7.692vw 7.692vw;
}
}
#related .related--bnr a {
transition: all var(--ease-in-out-200);
}
@media (hover: hover) and (pointer: fine) {
#related .related--bnr a:hover {
opacity: 0.75;
}
}
#related .related--bnr.--01 {
margin-bottom: min(2.778vw, 40px);
}
@media only screen and (max-width: 767px) {
#related .related--bnr.--01 {
margin-bottom: 7.692vw;
}
}
#related .related--bnr .bnr--contents {
display: grid;
gap: min(4.167vw, 60px);
}
@media only screen and (max-width: 767px) {
#related .related--bnr .bnr--contents {
grid-template-columns: 1fr;
gap: 7.692vw;
margin-bottom: 7.692vw;
}
}
#related .related--bnr .bnr--contents .--intro {
display: grid;
grid-template-columns: auto auto 1fr;
row-gap: min(1.389vw, 20px);
}
@media only screen and (max-width: 767px) {
#related .related--bnr .bnr--contents .--intro {
display: block;
}
}
#related .related--bnr .bnr--contents .--intro span {
font-family: var(--family-jp);
font-size: var(--size-24);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#related .related--bnr .bnr--contents .--intro span {
font-size: 4.359vw;
}
}
#related .related--bnr .bnr--contents .--intro span.--txt01 {
grid-column: 1/-1;
}
@media only screen and (max-width: 767px) {
#related .related--bnr .bnr--contents .--intro span.--txt01 {
line-height: 1.7;
}
}
#related .related--bnr .bnr--contents .--intro span.--txt02 {
grid-column: 1/2;
align-self: end;
line-height: 1.2;
}
@media only screen and (max-width: 767px) {
#related .related--bnr .bnr--contents .--intro span.--txt02 {
line-height: 1.7;
}
}
#related .related--bnr .bnr--contents .--intro span.--name {
grid-column: 2/3;
align-self: end;
font-size: min(4.861vw, 70px);
line-height: 1;
margin-left: min(0.694vw, 10px);
margin-bottom: -0.06em;
}
@media only screen and (max-width: 767px) {
#related .related--bnr .bnr--contents .--intro span.--name {
font-size: 12.821vw;
margin-left: 0;
display: inline-block;
position: relative;
top: 0.02em;
margin-bottom: 0;
}
}
#related .related--bnr .bnr--contents .--intro span.--txt03 {
grid-column: 3/4;
align-self: end;
line-height: 1.2;
}
@media only screen and (max-width: 767px) {
#related .related--bnr .bnr--contents .--intro span.--txt03 {
font-size: 3.846vw;
}
}
#related .related--bnr .bnr--contents .--desc {
display: flex;
gap: min(2.361vw, 34px);
}
@media only screen and (max-width: 767px) {
#related .related--bnr .bnr--contents .--desc {
gap: 5.128vw;
flex-direction: column;
}
}
#related .related--bnr .bnr--contents .--desc .logo {
text-align: center;
}
#related .related--bnr .bnr--contents .--desc .logo img {
width: min(10.972vw, 158px);
}
@media only screen and (max-width: 767px) {
#related .related--bnr .bnr--contents .--desc .logo img {
width: 43.59vw;
margin: 0 auto;
}
}
#related .related--bnr .bnr--contents .--desc .logo p {
font-family: var(--family-jp);
font-size: var(--size-10);
font-weight: var(--weight-medium);
line-height: var(--line-height-150);
letter-spacing: 3%;
padding-top: min(0.833vw, 12px);
}
@media only screen and (max-width: 767px) {
#related .related--bnr .bnr--contents .--desc .logo p {
font-size: 2.564vw;
padding-top: 2.051vw;
}
}
#related .related--bnr .bnr--contents .--desc ul li {
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-medium);
line-height: var(--line-height-160);
letter-spacing: 3%;
color: #234A77;
margin-bottom: min(0.417vw, 6px);
display: flex;
gap: min(0.556vw, 8px);
align-items: center;
}
@media only screen and (max-width: 767px) {
#related .related--bnr .bnr--contents .--desc ul li {
font-size: 3.077vw;
align-items: flex-start;
gap: 2.051vw;
margin-bottom: 1.538vw;
}
}
#related .related--bnr .bnr--contents .--desc ul li:before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
background: url(../images/index/related/icon-check.svg) no-repeat center/contain;
}
@media only screen and (max-width: 767px) {
#related .related--bnr .bnr--contents .--desc ul li:before {
flex-shrink: 1;
position: relative;
top: 0.25em;
}
}
#related .related--bnr .bnr--contents .--desc ul li:last-child {
margin-bottom: 0;
}
#related .related--bnr .bnr--img a {
display: block;
width: min(27.778vw, 400px);
position: relative;
}
@media only screen and (max-width: 767px) {
#related .related--bnr .bnr--img a {
width: 100%;
}
}
#related .related--bnr .bnr--img a .--link {
width: min(14.583vw, 210px);
height: min(4.167vw, 60px);
font-family: var(--family-jp);
font-size: var(--size-18);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
display: flex;
gap: min(1.25vw, 18px);
justify-content: center;
align-items: center;
background-color: #F0F9BE;
position: absolute;
bottom: 0;
right: 0;
}
@media only screen and (max-width: 767px) {
#related .related--bnr .bnr--img a .--link {
font-size: 4.103vw;
width: 46.154vw;
height: 12.821vw;
gap: 2.564vw;
}
}
#related .related--bnr .bnr--img a .--link:after {
content: "";
display: block;
background: url(../images/index/related/icon_arrow.svg) no-repeat center/contain;
width: min(1.181vw, 17px);
height: min(0.833vw, 12px);
}
@media only screen and (max-width: 767px) {
#related .related--bnr .bnr--img a .--link:after {
width: 4.359vw;
height: 3.077vw;
}
}
#related .related--bnr.--02 {
background-color: #F3F1EC;
}
#related .related--bnr.--02 .bnr--contents {
gap: min(2.917vw, 42px);
}
@media only screen and (max-width: 767px) {
#related .related--bnr.--02 .bnr--contents {
gap: 5.385vw;
}
}
@media only screen and (max-width: 767px) {
#related .related--bnr.--02 .bnr--contents .--intro .--txt02 {
display: block;
font-size: 4.615vw;
}
}
#related .related--bnr.--02 .bnr--contents .--intro .--name {
margin-left: min(1.111vw, 16px);
}
@media only screen and (max-width: 767px) {
#related .related--bnr.--02 .bnr--contents .--intro .--name {
margin-left: 0;
top: 0;
}
}
#related .related--bnr.--02 .bnr--contents .--desc p {
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-regular);
line-height: var(--line-height-180);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#related .related--bnr.--02 .bnr--contents .--desc p {
font-size: 3.59vw;
}
}
#related .related--bnr.--02 .bnr--img a .--link {
background-color: #F3F1EC;
}
#information {
background-color: var(--white);
position: relative;
z-index: 8;
padding: min(4.167vw, 60px) 0 min(8.333vw, 120px);
background-image: url("../images/components/bg/bg_pattern.webp");
background-repeat: repeat-y;
background-position: top;
background-size: 100% auto;
}
@media only screen and (max-width: 767px) {
#information {
padding: 15.385vw 5.128vw 20.513vw;
}
}
#information .information--head {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--size-30);
}
@media only screen and (max-width: 767px) {
#information .information--head {
gap: var(--size-10);
}
}
#information .information--head h2 {
font-family: var(--family-jp);
font-size: var(--size-40);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
margin-bottom: min(4.167vw, 60px);
text-align: center;
position: relative;
}
@media only screen and (max-width: 767px) {
#information .information--head h2 {
background-size: auto 9.231vw;
font-size: 6.667vw;
line-height: 1.4;
margin-bottom: 10.256vw;
padding-top: 2.564vw;
}
}
#information .information--head h2 span {
display: block;
font-family: var(--family-jp);
font-size: var(--size-20);
font-weight: var(--weight-medium);
line-height: var(--line-height-100);
letter-spacing: 3%;
padding-bottom: min(1.389vw, 20px);
}
@media only screen and (max-width: 767px) {
#information .information--head h2 span {
font-size: 3.59vw;
padding-bottom: 5.128vw;
}
}
#information .info--contents {
display: grid;
grid-template-columns: 1fr 1fr;
gap: min(2.083vw, 30px);
}
@media only screen and (max-width: 767px) {
#information .info--contents {
grid-template-columns: 1fr;
gap: 5.128vw;
}
}
#information .info--contents .info--bnr {
padding: min(3.125vw, 45px) min(4.167vw, 60px);
background-color: var(--white);
position: relative;
display: flex;
align-items: center;
transition: all var(--ease-in-out-200);
}
@media only screen and (max-width: 767px) {
#information .info--contents .info--bnr {
padding: 12.821vw 7.692vw;
}
}
@media (hover: hover) and (pointer: fine) {
#information .info--contents .info--bnr:hover {
opacity: 0.75;
}
}
#information .info--contents .info--bnr h3 {
font-family: var(--family-jp);
font-size: var(--size-30);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
margin-bottom: min(1.667vw, 24px);
}
@media only screen and (max-width: 767px) {
#information .info--contents .info--bnr h3 {
font-size: 5.641vw;
margin-bottom: 5.128vw;
}
}
#information .info--contents .info--bnr p {
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-regular);
line-height: var(--line-height-180);
letter-spacing: 3%;
margin-bottom: min(2.083vw, 30px);
}
@media only screen and (max-width: 767px) {
#information .info--contents .info--bnr p {
font-size: 3.59vw;
margin-bottom: 7.692vw;
}
}
#information .info--contents .info--bnr span {
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-medium);
line-height: var(--line-height-100);
letter-spacing: 3%;
display: inline-flex;
align-items: center;
gap: min(0.694vw, 10px);
}
@media only screen and (max-width: 767px) {
#information .info--contents .info--bnr span {
font-size: 3.59vw;
gap: 2.564vw;
}
}
#information .info--contents .info--bnr span:before {
content: "";
display: block;
width: min(1.944vw, 28px);
height: min(1.944vw, 28px);
background: url(../images/index/information/icon_arrow.svg) no-repeat center;
background-size: min(1.944vw, 28px) auto;
}
@media only screen and (max-width: 767px) {
#information .info--contents .info--bnr span:before {
width: 7.179vw;
height: 7.179vw;
background-size: 7.179vw auto;
}
}
#information .info--contents .info--bnr .--img {
display: block;
width: min(11.111vw, 160px);
height: min(15.278vw, 220px);
}
@media only screen and (max-width: 767px) {
#information .info--contents .info--bnr .--img {
width: 30.769vw;
height: 41.026vw;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
right: -5.128vw;
}
}
#information .info--contents .info--bnr.--01 .--img {
background: url(../images/index/information/information-img01.webp) no-repeat center/cover;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
@media only screen and (max-width: 767px) {
#information .info--contents .info--bnr.--01 .--img {
right: -5.128vw;
}
}
#information .info--contents .info--bnr.--02 {
gap: min(4.861vw, 70px);
}
#information .info--contents .info--bnr.--02 .--img {
background: url(../images/index/information/information-img02.webp) no-repeat top right/auto 100%;
}
@media only screen and (max-width: 767px) {
#information .info--contents .info--bnr.--02 .--img {
height: 43.333vw;
}
}
#faq {
background-color: var(--white);
padding-top: var(--size-60);
padding-bottom: var(--size-160);
position: relative;
z-index: 8;
}
@media only screen and (max-width: 767px) {
#faq {
padding-bottom: var(--size-80);
}
}
#faq .faq__inner {
margin-inline: auto;
width: var(--container-width-pc);
}
@media only screen and (max-width: 767px) {
#faq .faq__inner {
width: var(--container-width-sp);
}
}
#faq .faq__heading {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--size-30);
}
@media only screen and (max-width: 767px) {
#faq .faq__heading {
gap: var(--size-10);
}
}
#faq .faq__title {
position: relative;
margin-bottom: var(--size-64);
text-align: center;
font-family: var(--family-jp);
font-size: var(--size-40);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#faq .faq__title {
margin-bottom: var(--size-40);
font-family: var(--family-jp);
font-size: var(--size-30);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
}
#faq .faq__tab {
margin-bottom: var(--size-38);
}
@media only screen and (max-width: 767px) {
#faq .faq__tab {
margin-bottom: var(--size-20);
}
}
#faq .faq__filter {
margin-bottom: var(--size-55);
}
@media only screen and (max-width: 767px) {
#faq .faq__filter {
margin-bottom: 0;
padding-bottom: var(--size-30);
border: 1px solid var(--gray-1);
}
}
#faq .faq__filter_empty {
text-align: center;
font-family: var(--family-jp);
font-size: var(--size-18);
font-weight: var(--weight-bold);
line-height: var(--line-height-170);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#faq .faq__filter_empty {
margin-top: var(--size-30);
}
}
@media only screen and (max-width: 767px) {
#faq .faq__list {
border-top: 1px solid var(--gray-1);
}
}
#faq .faq__contact_bunner {
display: flex;
align-items: center;
justify-content: space-between;
-moz-column-gap: var(--size-30);
column-gap: var(--size-30);
padding-inline: var(--size-60);
margin-top: var(--size-30);
height: min(9.028vw, 130px);
background: var(--white);
}
@media only screen and (max-width: 767px) {
#faq .faq__contact_bunner {
flex-direction: column;
justify-content: start;
align-items: flex-start;
padding-block: var(--size-20);
padding-inline: var(--size-20);
margin-top: var(--size-20);
height: auto;
}
}
#faq .faq__contact_bunner_text {
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-medium);
line-height: var(--line-height-170);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#faq .faq__contact_bunner_text {
margin-bottom: var(--size-25);
text-align: left;
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-medium);
line-height: var(--line-height-170);
letter-spacing: 3%;
}
}
@media only screen and (max-width: 767px) {
#faq .faq__contact_bunner_button {
width: 100%;
}
}
@media print, screen and (min-width: 768px) {
#faq .faq__contact_bunner_button .c-button {
width: min(19.444vw, 280px);
height: min(4.444vw, 64px);
}
}
#faq .faq__contact_bunner_button .c-button__text {
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#faq .faq__contact_bunner_button .c-button__text {
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
}
#recommend {
position: relative;
margin-top: var(--size-92);
background-color: var(--white);
z-index: 8;
}
@media only screen and (max-width: 767px) {
#recommend {
margin-top: var(--size-40);
}
}
#recommend .recommend__content {
display: flex;
flex-direction: column;
gap: var(--size-10);
}
#recommend .recommend__inner {
margin-inline: auto;
width: var(--container-width-pc);
}
@media only screen and (max-width: 767px) {
#recommend .recommend__inner {
width: var(--container-width-sp);
}
}
#recommend .recommend__title {
margin-bottom: var(--size-60);
color: var(--black);
text-align: center;
position: relative;
font-family: var(--family-jp);
font-size: var(--size-24);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#recommend .recommend__title {
margin-bottom: var(--size-30);
font-family: var(--family-jp);
font-size: var(--size-18);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
}
#recommend .recommend__title span {
display: inline-block;
background-color: var(--white);
position: relative;
padding: 0 var(--size-40);
}
@media only screen and (max-width: 767px) {
#recommend .recommend__title span {
padding: 0 var(--size-20);
}
}
#recommend .recommend__title::before {
background-color: var(--red);
content: "";
display: block;
position: absolute;
inset: 0;
margin: auto;
width: 100%;
height: 1px;
}
#recommend .recommend__list {
display: grid;
align-items: start;
justify-items: center;
grid-template-columns: repeat(4, 1fr);
gap: min(1.875vw, 27px);
}
@media print, screen and (min-width: 768px) {
#recommend .recommend__list {
padding: 0 var(--size-60);
}
}
@media only screen and (max-width: 767px) {
#recommend .recommend__list {
grid-template-columns: repeat(2, 1fr);
-moz-column-gap: 3.846vw;
column-gap: 3.846vw;
row-gap: 5.128vw;
}
}
#recommend .recommend__content {
transition: all var(--ease-in-out-200);
}
@media (hover: hover) and (pointer: fine) {
#recommend .recommend__content:hover {
opacity: var(--opacity-7);
}
}
#recommend .recommend__content_figure {
overflow: hidden;
width: min(17.361vw, 250px);
height: min(9.722vw, 140px);
}
@media only screen and (max-width: 767px) {
#recommend .recommend__content_figure {
width: auto;
height: auto;
}
}
#recommend .recommend__content_title {
text-align: center;
font-family: var(--family-jp);
font-size: var(--size-16);
font-weight: var(--weight-medium);
line-height: var(--line-height-170);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#recommend .recommend__content_title {
font-family: var(--family-jp);
font-size: var(--size-12);
font-weight: var(--weight-medium);
line-height: var(--line-height-170);
letter-spacing: 3%;
}
}
#request {
position: relative;
z-index: 8;
background-image: url("../images/components/bg/bg_pattern.webp");
background-repeat: repeat-y;
background-position: top;
background-size: 100% auto;
}
#request .c-button:where(.theme--white) {
background: var(--white);
}
#request .request__inner {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
margin-inline: auto;
width: var(--container-width-pc);
}
@media print, screen and (min-width: 768px) {
#request .request__inner {
min-height: min(20.833vw, 300px);
}
}
@media only screen and (max-width: 767px) {
#request .request__inner {
flex-direction: column;
justify-content: end;
align-items: flex-start;
padding-block: var(--size-60);
width: 84.615vw;
}
}
#request .request__heading {
display: flex;
flex-direction: column;
gap: var(--size-30);
color: var(--black);
}
@media only screen and (max-width: 767px) {
#request .request__heading {
gap: var(--size-20);
margin-bottom: var(--size-30);
}
}
#request .request__title {
font-family: var(--family-jp);
font-size: var(--size-38);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#request .request__title {
font-family: var(--family-jp);
font-size: var(--size-26);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
}
#request .request__subtitle {
font-family: var(--family-jp);
font-size: var(--size-18);
font-weight: var(--weight-medium);
line-height: var(--line-height-170);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#request .request__subtitle {
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-medium);
line-height: var(--line-height-170);
letter-spacing: 3%;
}
}
#request .request__decoration {
flex-shrink: 0;
}
@media only screen and (max-width: 767px) {
#request .request__decoration {
position: absolute;
top: 0;
right: -7.692vw;
}
}
#request .request__decoration span {
display: block;
width: min(22.361vw, 322px);
height: min(20.833vw, 300px);
background-image: url("../images/index/request/catalog_pc.webp");
background-position: center;
background-size: min(22.361vw, 322px) min(20.833vw, 300px);
background-repeat: no-repeat;
}
@media only screen and (max-width: 767px) {
#request .request__decoration span {
width: 49.744vw;
height: 46.41vw;
background-size: 49.744vw 46.41vw;
}
}
#request .request__button {
display: flex;
flex-direction: column;
gap: var(--size-10);
}
@media only screen and (max-width: 767px) {
#request .request__button {
width: 100%;
}
}
@media print, screen and (min-width: 768px) {
#request .request__button_catalog_download,
#request .request__button_casestudy_download {
width: min(25.694vw, 370px);
}
}
@media (hover: hover) and (pointer: fine) {
#request .request__button_catalog_download:hover,
#request .request__button_casestudy_download:hover {
opacity: var(--opacity-5);
}
}
@media (hover: hover) and (pointer: fine) {
#request .request__button_catalog_download:hover::before, #request .request__button_catalog_download:hover::after {
opacity: 0;
}
#request .request__button_catalog_download:hover .c-button__icon,
#request .request__button_catalog_download:hover .c-button__text {
color: var(--white);
}
}
@media (hover: hover) and (pointer: fine) {
#request .request__button_casestudy_download:hover::before {
opacity: 0;
}
#request .request__button_casestudy_download:hover::after {
opacity: 1;
}
#request .request__button_casestudy_download:hover .c-button__icon,
#request .request__button_casestudy_download:hover .c-button__text {
color: var(--red);
}
}
#contact {
position: relative;
z-index: 8;
background: var(--bg-black);
color: var(--white);
}
#contact .contact__inner {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
margin-inline: auto;
width: var(--container-width-pc);
}
@media print, screen and (min-width: 768px) {
#contact .contact__inner {
min-height: min(19.444vw, 280px);
}
}
@media only screen and (max-width: 767px) {
#contact .contact__inner {
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding-block: var(--size-60);
width: 84.615vw;
}
}
#contact .contact__heading {
display: flex;
flex-direction: column;
gap: var(--size-30);
}
@media only screen and (max-width: 767px) {
#contact .contact__heading {
gap: var(--size-20);
margin-bottom: var(--size-30);
}
}
#contact .contact__title {
font-family: var(--family-jp);
font-size: var(--size-38);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#contact .contact__title {
font-family: var(--family-jp);
font-size: var(--size-26);
font-weight: var(--weight-bold);
line-height: var(--line-height-100);
letter-spacing: 3%;
}
}
#contact .contact__subtitle {
font-family: var(--family-jp);
font-size: var(--size-18);
font-weight: var(--weight-medium);
line-height: var(--line-height-170);
letter-spacing: 3%;
}
@media only screen and (max-width: 767px) {
#contact .contact__subtitle {
font-family: var(--family-jp);
font-size: var(--size-14);
font-weight: var(--weight-medium);
line-height: var(--line-height-170);
letter-spacing: 3%;
}
}
@media print, screen and (min-width: 768px) {
#contact .contact__button {
width: min(25.694vw, 370px);
}
}
.cnt__inner {
width: var(--container-width-pc);
margin-inline: auto;
}
@media only screen and (max-width: 767px) {
.cnt__inner {
width: 100%;
}
}/*# sourceMappingURL=index.css.map */