@charset "UTF-8";
:root {
--base: 16;
--z-go-top: 10;
--z-drawer: 125;
--z-header: 150;
--z-hamburger: 300;
--z-skip-main: 999;
--z-loading: 1000;
--artboard-width: 1400px;
--inner-xs: 840px;
--inner-sm: 1000px;
--inner: 1100px;
--inner-lg: 1200px;
--inner-gutter: 40px;
--inner-gutter-sp: 15px;
--space-unit: 1em;
--space-xxs: calc(0.25 * var(--space-unit));
--space-xs: calc(0.5 * var(--space-unit));
--space-sm: calc(0.75 * var(--space-unit));
--space-md: calc(1.25 * var(--space-unit));
--space-lg: calc(2 * var(--space-unit));
--space-xl: calc(3.25 * var(--space-unit));
--space-xxl: calc(5.25 * var(--space-unit));
--c-font: #000;
--c-black: #000;
--c-white: #fff;
--c-main: #0099ff;
--c-main--dark: #0033ff;
--c-bg: #3197d4;
--c-gray: #aaa;
--c-gray--light: #eee;
--c-gray--dark: #999;
--c-link: var(--c-main);
--c-note: #ED0000;
--c-main-rgb: 0, 153, 255;
--c-main--dark-rgb: 0, 51, 255;
--c-main-gradient: linear-gradient(to right, var(--c-main), var(--c-main--dark));
--c-main-gradient--to-bottom: linear-gradient(to bottom, var(--c-main), var(--c-main--dark));
--c-main-gradient--hover: linear-gradient(to right, var(--c-main) 0, var(--c-main--dark) 50%, var(--c-main) 100%);
--c-bg-gradient: linear-gradient(to right, rgba(var(--c-main-rgb), 12%), rgba(var(--c-main--dark-rgb), 12%));
--lh-xs: 1.4;
--lh-sm: 1.6;
--lh-default: 2;
--lh-lg: 2.4;
--ls-sm: 0.015em;
--ls-default: 0.05em;
--ls-lg: 0.15em;
--ls-xl: 0.5em;
--ff-body: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
--ff-title: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
--ff-en: "WDXL Lubrifont JP N", sans-serif;
--ff-m-plus: "M PLUS 1p", sans-serif;
--fz-xxs: 10px;
--fz-xs: 12px;
--fz-sm: 14px;
--fz-default: 15px;
--fz-md: 16px;
--fz-lg: 18px;
--fz-xl: 24px;
--fz-xxl: 28px;
--fz-clamp-xs: clamp(11px, 2.75vw, var(--fz-xs));
--fz-clamp-sm: clamp(12px, 3.2vw, var(--fz-sm));
--fz-clamp-default: clamp(15px, 1.875vw, var(--fz-default));
--fz-clamp-md: clamp(15px, 3.75vw, var(--fz-md));
--fz-clamp-lg: clamp(16px, 4vw, var(--fz-lg));
--fz-clamp-xl: clamp(20px, 5vw, var(--fz-xl));
--fz-clamp-xxl: clamp(22px, 5.5vw, var(--fz-xxl));
--outer-link-svg: url('data:image/svg+xml;charset=UTF-8,');
--anime-duration: 0.2s;
}
/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
box-sizing: border-box;
border-style: solid;
border-width: 0;
min-width: 0;
}
/* Document */
/* ============================================ */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
* 3. Remove gray overlay on links for iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-webkit-tap-highlight-color: transparent; /* 3*/
}
/* Sections */
/* ============================================ */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/* Vertical rhythm */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
margin: 0;
}
/* Headings */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
margin: 0;
}
/* Lists (enumeration) */
/* ============================================ */
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
/* Lists (definition) */
/* ============================================ */
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}
/* Grouping content */
/* ============================================ */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
border-top-width: 1px;
margin: 0;
clear: both;
color: inherit;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: inherit; /* 2 */
}
address {
font-style: inherit;
}
/* Text-level semantics */
/* ============================================ */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
text-decoration: none;
color: inherit;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: inherit; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Replaced content */
/* ============================================ */
/**
* Prevent vertical alignment issues.
*/
svg,
img,
embed,
object,
iframe {
vertical-align: bottom;
}
/* Forms */
/* ============================================ */
/**
* Reset form fields to make them styleable.
* 1. Make form elements stylable across systems iOS especially.
* 2. Inherit text-transform from parent.
*/
button,
input,
optgroup,
select,
textarea {
-webkit-appearance: none; /* 1 */
-moz-appearance: none;
appearance: none;
vertical-align: middle;
color: inherit;
font: inherit;
background: transparent;
padding: 0;
margin: 0;
border-radius: 0;
text-align: inherit;
text-transform: inherit; /* 2 */
}
/**
* Correct cursors for clickable elements.
*/
button,
[type=button],
[type=reset],
[type=submit] {
cursor: pointer;
}
button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
cursor: default;
}
/**
* Improve outlines for Firefox and unify style with input elements & buttons.
*/
:-moz-focusring {
outline: auto;
}
select:disabled {
opacity: inherit;
}
/**
* Remove padding
*/
option {
padding: 0;
}
/**
* Reset to invisible
*/
fieldset {
margin: 0;
padding: 0;
min-width: 0;
}
legend {
padding: 0;
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto;
}
/**
* Correct the outline style in Safari.
*/
[type=search] {
outline-offset: -2px; /* 1 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Fix font inheritance.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/**
* Fix appearance for Firefox
*/
[type=number] {
-moz-appearance: textfield;
}
/**
* Clickable labels
*/
label[for] {
cursor: pointer;
}
/* Interactive */
/* ============================================ */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
company {
display: list-item;
}
/*
* Remove outline for editable content.
*/
[contenteditable]:focus {
outline: auto;
}
/* Tables */
/* ============================================ */
/**
1. Correct table border color inheritance in all Chrome and Safari.
*/
table {
border-color: inherit; /* 1 */
border-collapse: collapse;
}
caption {
text-align: left;
}
td,
th {
vertical-align: top;
padding: 0;
}
th {
text-align: left;
font-weight: bold;
}
html {
font-size: 100%;
}
body {
font-family: var(--ff-body);
color: var(--c-font);
font-size: 1rem;
font-weight: 500;
line-height: 1.6;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
font-size: revert;
font-family: var(--ff-title);
font-weight: 700;
line-height: 1.4;
}
a {
display: inline-block;
color: currentColor;
}
img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
button {
padding: 0;
background-color: transparent;
border: none;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
dt {
font-weight: 700;
}
company {
display: block;
list-style: none;
}
company::-webkit-details-marker {
display: none;
}
small {
font-size: 100%;
}
button,
input,
select,
textarea {
-webkit-appearance: auto;
-moz-appearance: auto;
appearance: auto;
border-width: 1px;
background-color: transparent;
}
/* 選択系パーツ */
input[type=radio],
input[type=checkbox] {
cursor: pointer;
vertical-align: revert;
}
/* スクリーンリーダー
---------------------------------------------*/
.visually-hidden:not(:focus-visible) {
position: absolute;
border: 0;
overflow: hidden;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.l-breadcrumb {
--breadcrumb-gap: 8px;
margin: 0 auto;
width: 100%;
}
.l-breadcrumb__list {
display: flex;
align-items: center;
gap: var(--breadcrumb-gap);
}
.l-breadcrumb__item {
display: flex;
align-items: center;
gap: var(--breadcrumb-gap);
}
.l-breadcrumb__item:not(:last-of-type)::after {
content: ">";
font-size: 1em;
}
/* ===========================================
* フッター
* ======================================== */
.l-footer {
background: var(--c-bg);
margin-top: clamp(4.5rem, 3.625rem + 3.5vw, 6.25rem);
padding-top: clamp(2.25rem, 2.063rem + 0.75vw, 2.625rem);
padding-bottom: 180px;
background-image: url(../images/common/bg_footer.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: bottom;
}
@media screen and (max-width: 1024px) {
.l-footer {
padding-bottom: 80px;
}
}
.l-footer__address {
font-size: clamp(0.875rem, 0.844rem + 0.13vw, 0.938rem);
font-weight: 400;
line-height: var(--lh-sm);
letter-spacing: 0;
color: var(--c-white);
margin-top: 16px;
}
.l-footer__body {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 32px 60px;
padding-bottom: 28px;
border-bottom: solid 1px var(--c-white);
}
@media screen and (max-width: 1024px) {
.l-footer__body {
flex-wrap: wrap;
}
}
/* ロゴ
---------------------------------------------*/
.l-footer-logo {
max-width: 370px;
}
@media screen and (max-width: 1024px) {
.l-footer-logo {
max-width: 280px;
}
}
/* インフォ
---------------------------------------------*/
.l-footer-info {
max-width: -moz-fit-content;
max-width: fit-content;
margin-inline: auto;
}
/* メニュー
---------------------------------------------*/
.l-footer-nav {
display: flex;
align-items: baseline;
gap: 45px;
}
@media screen and (max-width: 1024px) {
.l-footer-nav {
flex-wrap: wrap;
gap: 16px 40px;
margin-inline: auto;
}
}
.l-footer-nav-stack-heading {
font-size: var(--fz-default);
font-weight: 500;
line-height: var(--lh-sm);
letter-spacing: 0;
color: var(--c-white);
}
a.l-footer-nav-stack-heading__link {
transition: color var(--anime-duration);
position: relative;
}
a.l-footer-nav-stack-heading__link::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 1px;
bottom: -1px;
transform: scale(0, 1);
transform-origin: left top;
transition: transform 0.3s ease;
background: #fff;
}
a.l-footer-nav-stack-heading__link:hover {
color: #fff !important;
}
a.l-footer-nav-stack-heading__link:hover::after {
transform: scale(1, 1);
}
.l-footer-nav-stack__body {
margin-top: 15px;
}
.l-footer-nav-list-item + .l-footer-nav-list-item {
margin-top: 10px;
}
.l-footer-nav-list-item__link {
font-size: clamp(0.875rem, 0.844rem + 0.13vw, 0.938rem);
font-weight: 400;
line-height: var(--lh-xs);
letter-spacing: 0;
color: var(--c-white);
display: flex;
align-items: center;
gap: 8px;
max-width: -moz-fit-content;
max-width: fit-content;
transition: color var(--anime-duration);
position: relative;
}
.l-footer-nav-list-item__link::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 1px;
bottom: -1px;
transform: scale(0, 1);
transform-origin: left top;
transition: transform 0.3s ease;
background: #fff;
}
.l-footer-nav-list-item__link:hover {
color: #fff !important;
}
.l-footer-nav-list-item__link:hover::after {
transform: scale(1, 1);
}
.l-footer-nav-list-item__link::before {
content: "";
display: inline-block;
width: 4px;
height: 1px;
background-color: var(--c-white);
margin-top: 2px;
}
/* コピーライト
---------------------------------------------*/
.l-footer-copy {
margin-top: clamp(1.25rem, 0.938rem + 1.25vw, 1.875rem);
text-align: center;
}
.l-footer-copy__txt {
display: inline-block;
font-size: var(--fz-xs);
font-weight: 400;
line-height: var(--lh-xs);
letter-spacing: 0;
color: var(--c-white);
}
/* ===========================================
* ヘッダー
* ======================================== */
.l-header {
width: 100%;
position: absolute;
left: 0;
top: 15px;
z-index: var(--z-header);
background-color: var(--c-white);
transition: box-shadow var(--anime-duration);
}
.l-header.is-header-scroll:not(.is-drawer-open) {
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
position: fixed;
top: 0;
}
@media screen and (max-width: 1024px) {
.l-header {
top: 0;
position: fixed;
}
}
.l-header__inner {
box-sizing: content-box;
max-width: 1180px;
margin: 0 auto;
padding-right: var(--inner-gutter);
padding-left: var(--inner-gutter);
display: flex;
justify-content: space-between;
gap: 40px;
}
@media screen and (max-width: 1024px) {
.l-header__inner {
padding-right: 8px;
padding-left: 8px;
}
}
.l-header__body {
display: flex;
flex-shrink: 0;
align-items: center;
gap: 30px;
}
@media screen and (max-width: 1024px) {
.l-header__body {
display: none;
}
}
/* ロゴ
---------------------------------------------*/
.l-header-logo {
max-width: 350px;
display: flex;
justify-content: center;
align-items: center;
}
.l-header-logo__link > img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
@media screen and (max-width: 1024px) {
.l-header-logo__link > img {
width: auto;
height: 100%;
max-height: 50px;
}
}
/* お問い合わせボタン
---------------------------------------------*/
.l-header-contact-btn {
min-width: 110px;
height: 100%;
background: var(--c-main-gradient);
}
.l-header-contact-btn__link {
height: 100%;
font-size: 14px;
font-weight: 500;
line-height: var(--lh-default);
letter-spacing: var(--ls-sm);
color: var(--c-white);
display: grid;
place-content: center;
background: var(--c-main-gradient--hover);
background-position: 0 50%;
background-size: 200% auto;
transition: background-position var(--anime-duration) ease-in-out;
min-height: 78px;
}
.l-header-contact-btn__link:hover {
background-position: 100% 50%;
}
.l-header-contact-btn__link::before {
content: "";
display: block;
margin-inline: auto;
background-image: url(../images/common/icon_mail.png);
background-size: contain;
background-repeat: no-repeat;
width: 32px;
aspect-ratio: 1;
}
/* ===========================================
* メガメニュー
* ======================================== */
.l-mega-menu {
position: absolute;
top: 135%;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
padding: 0;
background-color: transparent;
padding-top: 20px;
margin-top: -20px;
max-width: 90vw;
opacity: 0;
transition: opacity var(--anime-duration);
}
.l-mega-menu.is-visible {
opacity: 1;
}
.l-mega-menu__panel {
background-color: var(--c-white);
max-width: 725px;
width: 100%;
padding: 20px 0;
border-radius: 0 0 20px 20px;
}
.l-header.is-header-scroll .l-mega-menu__panel {
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
}
.l-mega-menu__inner {
padding: 0 30px;
}
.l-mega-menu__inner.-col2 {
display: flex;
align-items: baseline;
gap: 30px;
}
.l-mega-menu-service-list {
display: grid;
grid-template-columns: repeat(3, 202px);
gap: 30px;
}
/* サービスリスト
---------------------------------------------- */
.l-mega-menu-service-list-item__link {
transition: opacity var(--anime-duration);
}
.l-mega-menu-service-list-item__link:hover {
opacity: 0.6;
}
.l-mega-menu-service-list-item__heading {
font-size: var(--fz-sm);
font-weight: 400;
line-height: var(--lh-xs);
letter-spacing: 0;
margin-top: 8px;
display: flex;
align-items: baseline;
gap: 8px;
}
.l-mega-menu-service-list-item__heading::before {
content: "";
display: block;
background: var(--c-main-gradient);
width: 20px;
height: 9px;
clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
flex-shrink: 0;
}
/* リスト
---------------------------------------------- */
.l-mega-menu-list-wrap {
min-width: 144px;
}
.l-mega-menu-list-heading__link {
width: 100%;
font-size: 15px;
font-weight: 700;
letter-spacing: 0;
line-height: var(--lh-sm);
color: var(--c-main);
padding-bottom: 12px;
border-bottom: solid 1px var(--c-gray--dark);
transition: opacity var(--anime-duration);
}
.l-mega-menu-list-heading__link:hover {
opacity: 0.6;
}
.l-mega-menu-list {
margin-top: 15px;
}
.l-mega-menu-list-item {
max-width: -moz-fit-content;
max-width: fit-content;
}
.l-mega-menu-list-item + .l-mega-menu-list-item {
margin-top: 8px;
}
.l-mega-menu-list-item__link {
font-size: 14px;
font-weight: 400;
letter-spacing: 0;
line-height: var(--lh-sm);
display: flex;
align-items: baseline;
gap: 8px;
transition: color var(--anime-duration);
position: relative;
}
.l-mega-menu-list-item__link::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 1px;
bottom: -1px;
transform: scale(0, 1);
transform-origin: left top;
transition: transform 0.3s ease;
background: var(--c-font);
}
.l-mega-menu-list-item__link:hover {
color: var(--c-font) !important;
}
.l-mega-menu-list-item__link:hover::after {
transform: scale(1, 1);
}
.l-mega-menu-list-item__link::before {
content: "";
display: block;
background: var(--c-main-gradient);
width: 20px;
height: 9px;
clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
flex-shrink: 0;
}
/* ===========================================
* ハンバーガーメニュー
* ======================================== */
.l-hamburger {
position: fixed;
top: 0;
right: 0;
width: 50px;
aspect-ratio: 1;
background: var(--c-main-gradient);
display: grid;
place-content: center;
gap: 8px;
}
@media not screen and (max-width: 1024px) {
.l-hamburger {
display: none;
}
}
.l-hamburger__line-container {
display: flex;
align-items: center;
margin-top: 2px;
margin-inline: auto;
width: 40px;
height: 12px;
}
.l-hamburger__line {
position: relative;
display: block;
width: 40px;
height: 1px;
background-color: var(--c-white);
transition: background-color var(--anime-duration);
}
.is-open .l-hamburger__line {
background-color: transparent;
}
.l-hamburger__line::before, .l-hamburger__line::after {
content: "";
position: absolute;
display: block;
width: 40px;
height: 1px;
background-color: var(--c-white);
transition: top var(--anime-duration), transform var(--anime-duration);
}
.l-hamburger__line::before {
top: -5px;
}
.is-open .l-hamburger__line::before {
transform: rotate(-20deg);
top: 0;
}
.l-hamburger__line::after {
top: 5px;
}
.is-open .l-hamburger__line::after {
transform: rotate(20deg);
top: 0;
}
.l-hamburger__txt {
font-family: var(--ff-en);
font-size: var(--fz-xs);
line-height: 1;
letter-spacing: 0;
color: var(--c-white);
text-align: center;
}
/* ===========================================
* ページ
* ======================================== */
.l-page__main {
margin-top: clamp(2.5rem, 1.875rem + 2.5vw, 3.75rem);
}
/* ===========================================
* 下層ページヘッダー
* ======================================== */
.l-page-header {
height: 312px;
padding-top: calc(var(--header-height-gutter) + 15px);
background-image: url(../images/common/bg_page-header.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
@media screen and (max-width: 1024px) {
.l-page-header {
height: 250px;
}
}
.l-page-header__inner {
height: 100%;
display: grid;
place-content: center start;
}
.l-page-header-heading__main {
font-family: var(--ff-m-plus);
font-size: clamp(2rem, 1.75rem + 1vw, 2.5rem);
font-weight: 500;
letter-spacing: 0;
line-height: var(--lh-sm);
color: var(--c-white);
}
.l-page-header-heading__en {
font-family: var(--ff-en);
font-size: clamp(1rem, 0.875rem + 0.5vw, 1.25rem);
font-weight: 400;
letter-spacing: var(--ls-sm);
line-height: var(--lh-sm);
color: var(--c-white);
}
.l-main {
flex-grow: 1;
}
.l-main--has-sidebar {
display: grid;
grid-template-columns: 1fr auto;
gap: 32px 60px;
}
@media screen and (max-width: 768px) {
.l-main--has-sidebar {
grid-template-columns: 1fr;
}
}
@media not screen and (max-width: 768px) {
.l-main-sidebar-container {
min-width: 280px;
}
}
/* ===========================================
* ドロワー
* ======================================== */
.l-drawer {
background-color: var(--c-white);
width: 100%;
height: 100%;
min-height: 100lvh;
position: fixed;
top: var(--header-height-gutter);
left: 0;
z-index: var(--z-drawer);
padding: 0;
margin: 0;
max-width: 100%;
max-height: 100%;
opacity: 0;
visibility: hidden;
transition: opacity var(--anime-duration), visibility var(--anime-duration);
}
.l-drawer.is-open {
opacity: 1;
visibility: visible;
}
@media not screen and (max-width: 1024px) {
.l-drawer {
display: none;
}
}
.l-drawer__inner {
padding-left: var(--inner-gutter-sp);
padding-right: var(--inner-gutter-sp);
height: 100%;
overflow: auto;
}
/* メニュー
---------------------------------------------*/
.l-drawer-menu {
display: flex;
align-items: start;
justify-content: center;
gap: 52px;
padding-top: 40px;
padding-left: 20px;
}
.l-drawer-menu-list-item {
text-align: center;
}
.l-drawer-menu-list-item + .l-drawer-menu-list-item {
margin-top: 36px;
}
.l-drawer-menu-list-item-label {
max-width: -moz-fit-content;
max-width: fit-content;
pointer-events: none;
}
.l-drawer-menu-list-item-label__en {
display: block;
max-width: -moz-fit-content;
max-width: fit-content;
font-family: var(--ff-en);
font-size: 26px;
font-weight: 400;
line-height: 1;
letter-spacing: var(--ls-lg);
background: var(--c-main-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding-bottom: 4px;
margin-inline: auto;
position: relative;
}
.l-drawer-menu-list-item-label__en::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 93%;
height: 2px;
background: var(--c-main-gradient);
-webkit-mask-image: radial-gradient(circle, black 1px, transparent 1px);
mask-image: radial-gradient(circle, black 1px, transparent 1px);
-webkit-mask-repeat: repeat-x;
mask-repeat: repeat-x;
-webkit-mask-size: 4px 2px;
mask-size: 4px 2px;
}
.l-drawer-menu-list-item-label__main {
font-size: var(--fz-xxs);
font-weight: 500;
line-height: 1;
letter-spacing: 0;
color: var(--c-main);
text-align: center;
margin-top: 8px;
}
/* 子リスト */
.l-drawer-child-menu-list {
margin-top: 16px;
}
.l-drawer-child-menu-list-item {
display: flex;
align-items: baseline;
justify-content: flex-start;
gap: 4px;
max-width: -moz-fit-content;
max-width: fit-content;
}
.l-drawer-child-menu-list-item + .l-drawer-child-menu-list-item {
margin-top: 12px;
}
.l-drawer-child-menu-list-item::before {
content: "";
display: block;
background: var(--c-main-gradient);
width: 20px;
height: 9px;
clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
flex-shrink: 0;
margin-top: 4px;
}
.l-drawer-child-menu-list-item__link {
font-size: 13px;
font-weight: 400;
letter-spacing: 0;
line-height: 1.3;
text-align: left;
transition: color var(--anime-duration);
position: relative;
}
.l-drawer-child-menu-list-item__link::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 1px;
bottom: -1px;
transform: scale(0, 1);
transform-origin: left top;
transition: transform 0.3s ease;
background: var(--c-font);
}
.l-drawer-child-menu-list-item__link:hover {
color: var(--c-font) !important;
}
.l-drawer-child-menu-list-item__link:hover::after {
transform: scale(1, 1);
}
/* バナーリスト
---------------------------------------------*/
.l-drawer-bnr {
margin-top: 50px;
padding-bottom: 120px;
}
.l-drawer-bnr-item {
width: 100%;
max-width: 345px;
aspect-ratio: 69/14;
margin-inline: auto;
border-radius: 10px;
background-size: cover;
background-repeat: no-repeat;
}
.l-drawer-bnr-item.-recruit {
background-image: url(../images/common/bg_bnr-recruit--sm.png);
}
.l-drawer-bnr-item.-contact {
background-image: url(../images/common/bg_bnr-contact--sm.png);
}
.l-drawer-bnr-item + .l-drawer-bnr-item {
margin-top: 20px;
}
.l-drawer-bnr-item__link {
font-size: var(--fz-sm);
font-weight: 700;
letter-spacing: var(--ls-lg);
line-height: var(--ls-default);
color: var(--c-white);
width: 100%;
height: 100%;
display: grid;
place-content: center;
}
/* ===========================================
* サイトメニュー
* ======================================== */
.l-site-menu-list {
display: flex;
gap: 24px;
}
.l-site-menu-list-item {
position: relative;
}
.l-site-menu-list-item__link {
display: block;
font-size: 15px;
font-weight: 500;
line-height: var(--lh-default);
letter-spacing: var(--ls-sm);
padding: 12px 0;
transition: color var(--anime-duration);
transition: color var(--anime-duration);
}
.l-site-menu-list-item__link:hover {
color: var(--c-main);
}
.l-site-menu-list-item__link.-has-mega-menu {
position: relative;
}
.l-site-menu-list-item__link.-has-mega-menu::after {
content: "";
-webkit-mask: url('data:image/svg+xml,');
mask: url('data:image/svg+xml,');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: var(--c-main);
width: 9px;
aspect-ratio: 9/8;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
.l-site-menu-list-item__link.-has-mega-menu.is-active {
color: var(--c-main);
}
/* ドロワーメニュー
---------------------------------------------- */
.l-site-menu-drawer-hamburger {
--hamburger-size: 40px;
position: relative;
z-index: var(--z-hamburger);
display: inline-grid;
place-items: center;
width: var(--hamburger-size);
aspect-ratio: 1;
}
@media not all and (max-width: 1024px) {
.l-site-menu-drawer-hamburger {
display: none;
}
}
.l-site-menu-drawer-hamburger__line {
position: relative;
width: 100%;
height: 2px;
background-color: #000;
}
.l-site-menu-drawer-hamburger__line::before, .l-site-menu-drawer-hamburger__line::after {
content: "";
position: absolute;
width: inherit;
height: inherit;
background-color: #000;
}
.l-site-menu-drawer-hamburger__line::before {
translate: 0 -12px;
}
.l-site-menu-drawer-hamburger__line::after {
translate: 0 12px;
}
.l-site-menu-drawer[open] .l-site-menu-drawer-hamburger__line {
background-color: transparent;
}
.l-site-menu-drawer[open] .l-site-menu-drawer-hamburger__line::before {
translate: 0 0;
rotate: 45deg;
}
.l-site-menu-drawer[open] .l-site-menu-drawer-hamburger__line::after {
translate: 0 0;
rotate: -45deg;
}
@media not all and (max-width: 1024px) {
.l-site-menu-drawer {
display: none;
}
}
.l-site-menu-drawer[open] .l-site-menu-drawer-content {
opacity: 1;
}
.l-site-menu-drawer-content {
--top-position: var(--header-height-gutter);
position: fixed;
top: var(--top-position);
left: 0;
width: 100%;
height: calc(100% - var(--top-position));
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.l-site-menu-drawer-content__inner {
overflow: auto;
height: 100%;
padding: 60px var(--inner-gutter);
}
.l-site-menu-drawer-list {
display: grid;
grid-template-columns: minmax(0, 1fr);
row-gap: 1em;
}
.l-site-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* ===========================================
* セクション
* ======================================== */
.c-section {
margin-top: clamp(3.25rem, 2rem + 5vw, 5.75rem);
position: relative;
}
.c-section.-border {
padding-top: clamp(3.25rem, 2rem + 5vw, 5.75rem);
}
.c-section.-border::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
display: block;
width: calc(100% - var(--inner-gutter) * 2);
max-width: 1100px;
height: 1px;
background: var(--c-main-gradient);
}
@media screen and (max-width: 1024px) {
.c-section.-border::before {
width: calc(100% - var(--inner-gutter-sp) * 2);
}
}
.c-section__content.-has-side-heading {
display: grid;
grid-template-columns: 170px 1fr;
gap: 32px 88px;
}
@media screen and (max-width: 1024px) {
.c-section__content.-has-side-heading {
grid-template-columns: 1fr;
}
}
/* ===========================================
* ボタン
* ======================================== */
.c-btn {
display: block;
width: -moz-fit-content;
width: fit-content;
max-width: 100%;
min-width: 275px;
}
.c-btn__link {
font-size: clamp(1.25rem, 1.063rem + 0.75vw, 1.625rem);
font-weight: 400;
line-height: var(--lh-xs);
letter-spacing: 0;
color: var(--c-white);
text-align: center;
width: 100%;
padding: 15px 30px;
border-radius: calc(infinity * 1px);
background: var(--c-main-gradient--hover);
background-position: 0 50%;
background-size: 200% auto;
transition: background-position var(--anime-duration) ease-in-out;
}
.-ls-xl .c-btn__link {
letter-spacing: var(--lh-xl);
}
.-arrow .c-btn__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.-arrow .c-btn__link::after {
content: "";
display: block;
background: var(--c-white);
width: 36px;
height: 14px;
clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
flex-shrink: 0;
}
.c-btn__link:hover {
background-position: 100% 50%;
}
.c-grid {
display: grid;
grid-template-columns: repeat(var(--grid-columns, 12), 1fr);
row-gap: var(--grid-row-gap, 0);
-moz-column-gap: min(var(--grid-column-gap, 0), 9.0909090909%);
column-gap: min(var(--grid-column-gap, 0), 9.0909090909%);
}
.c-grid__item {
display: flex;
flex-direction: column;
}
.c-grid__item > * {
min-height: 0;
min-width: 0%;
}
.c-grid[data-columns~="1"] {
--grid-columns: 1;
}
.c-grid[data-columns~="2"] {
--grid-columns: 2;
}
.c-grid[data-columns~="3"] {
--grid-columns: 3;
}
.c-grid[data-columns~="4"] {
--grid-columns: 4;
}
.c-grid[data-columns~="5"] {
--grid-columns: 5;
}
.c-grid[data-columns~="6"] {
--grid-columns: 6;
}
.c-grid[data-columns~="7"] {
--grid-columns: 7;
}
.c-grid[data-columns~="8"] {
--grid-columns: 8;
}
.c-grid[data-columns~="9"] {
--grid-columns: 9;
}
.c-grid[data-columns~="10"] {
--grid-columns: 10;
}
.c-grid[data-columns~="11"] {
--grid-columns: 11;
}
.c-grid[data-columns~="12"] {
--grid-columns: 12;
}
@media (max-width: 1400px) {
.c-grid[data-columns~="xl:1"] {
--grid-columns: 1;
}
.c-grid[data-columns~="xl:2"] {
--grid-columns: 2;
}
.c-grid[data-columns~="xl:3"] {
--grid-columns: 3;
}
.c-grid[data-columns~="xl:4"] {
--grid-columns: 4;
}
.c-grid[data-columns~="xl:5"] {
--grid-columns: 5;
}
.c-grid[data-columns~="xl:6"] {
--grid-columns: 6;
}
.c-grid[data-columns~="xl:7"] {
--grid-columns: 7;
}
.c-grid[data-columns~="xl:8"] {
--grid-columns: 8;
}
.c-grid[data-columns~="xl:9"] {
--grid-columns: 9;
}
.c-grid[data-columns~="xl:10"] {
--grid-columns: 10;
}
.c-grid[data-columns~="xl:11"] {
--grid-columns: 11;
}
.c-grid[data-columns~="xl:12"] {
--grid-columns: 12;
}
}
@media (max-width: 1280px) {
.c-grid[data-columns~="lg:1"] {
--grid-columns: 1;
}
.c-grid[data-columns~="lg:2"] {
--grid-columns: 2;
}
.c-grid[data-columns~="lg:3"] {
--grid-columns: 3;
}
.c-grid[data-columns~="lg:4"] {
--grid-columns: 4;
}
.c-grid[data-columns~="lg:5"] {
--grid-columns: 5;
}
.c-grid[data-columns~="lg:6"] {
--grid-columns: 6;
}
.c-grid[data-columns~="lg:7"] {
--grid-columns: 7;
}
.c-grid[data-columns~="lg:8"] {
--grid-columns: 8;
}
.c-grid[data-columns~="lg:9"] {
--grid-columns: 9;
}
.c-grid[data-columns~="lg:10"] {
--grid-columns: 10;
}
.c-grid[data-columns~="lg:11"] {
--grid-columns: 11;
}
.c-grid[data-columns~="lg:12"] {
--grid-columns: 12;
}
}
@media (max-width: 1024px) {
.c-grid[data-columns~="md:1"] {
--grid-columns: 1;
}
.c-grid[data-columns~="md:2"] {
--grid-columns: 2;
}
.c-grid[data-columns~="md:3"] {
--grid-columns: 3;
}
.c-grid[data-columns~="md:4"] {
--grid-columns: 4;
}
.c-grid[data-columns~="md:5"] {
--grid-columns: 5;
}
.c-grid[data-columns~="md:6"] {
--grid-columns: 6;
}
.c-grid[data-columns~="md:7"] {
--grid-columns: 7;
}
.c-grid[data-columns~="md:8"] {
--grid-columns: 8;
}
.c-grid[data-columns~="md:9"] {
--grid-columns: 9;
}
.c-grid[data-columns~="md:10"] {
--grid-columns: 10;
}
.c-grid[data-columns~="md:11"] {
--grid-columns: 11;
}
.c-grid[data-columns~="md:12"] {
--grid-columns: 12;
}
}
@media (max-width: 768px) {
.c-grid[data-columns~="sm:1"] {
--grid-columns: 1;
}
.c-grid[data-columns~="sm:2"] {
--grid-columns: 2;
}
.c-grid[data-columns~="sm:3"] {
--grid-columns: 3;
}
.c-grid[data-columns~="sm:4"] {
--grid-columns: 4;
}
.c-grid[data-columns~="sm:5"] {
--grid-columns: 5;
}
.c-grid[data-columns~="sm:6"] {
--grid-columns: 6;
}
.c-grid[data-columns~="sm:7"] {
--grid-columns: 7;
}
.c-grid[data-columns~="sm:8"] {
--grid-columns: 8;
}
.c-grid[data-columns~="sm:9"] {
--grid-columns: 9;
}
.c-grid[data-columns~="sm:10"] {
--grid-columns: 10;
}
.c-grid[data-columns~="sm:11"] {
--grid-columns: 11;
}
.c-grid[data-columns~="sm:12"] {
--grid-columns: 12;
}
}
@media (max-width: 480px) {
.c-grid[data-columns~="xs:1"] {
--grid-columns: 1;
}
.c-grid[data-columns~="xs:2"] {
--grid-columns: 2;
}
.c-grid[data-columns~="xs:3"] {
--grid-columns: 3;
}
.c-grid[data-columns~="xs:4"] {
--grid-columns: 4;
}
.c-grid[data-columns~="xs:5"] {
--grid-columns: 5;
}
.c-grid[data-columns~="xs:6"] {
--grid-columns: 6;
}
.c-grid[data-columns~="xs:7"] {
--grid-columns: 7;
}
.c-grid[data-columns~="xs:8"] {
--grid-columns: 8;
}
.c-grid[data-columns~="xs:9"] {
--grid-columns: 9;
}
.c-grid[data-columns~="xs:10"] {
--grid-columns: 10;
}
.c-grid[data-columns~="xs:11"] {
--grid-columns: 11;
}
.c-grid[data-columns~="xs:12"] {
--grid-columns: 12;
}
}
.c-grid[data-gap~="0"] {
--grid-row-gap: 0px;
--grid-column-gap: 0px;
}
.c-grid[data-gap~=x-0] {
--grid-column-gap: 0px;
}
.c-grid[data-gap~=y-0] {
--grid-row-gap: 0px;
}
.c-grid[data-gap~=xxs] {
--grid-row-gap: 0.5rem;
--grid-column-gap: 0.5rem;
}
.c-grid[data-gap~=x-xxs] {
--grid-column-gap: 0.5rem;
}
.c-grid[data-gap~=y-xxs] {
--grid-row-gap: 0.5rem;
}
.c-grid[data-gap~=xs] {
--grid-row-gap: 1rem;
--grid-column-gap: 1rem;
}
.c-grid[data-gap~=x-xs] {
--grid-column-gap: 1rem;
}
.c-grid[data-gap~=y-xs] {
--grid-row-gap: 1rem;
}
.c-grid[data-gap~=sm] {
--grid-row-gap: 1.5rem;
--grid-column-gap: 1.5rem;
}
.c-grid[data-gap~=x-sm] {
--grid-column-gap: 1.5rem;
}
.c-grid[data-gap~=y-sm] {
--grid-row-gap: 1.5rem;
}
.c-grid[data-gap~=md] {
--grid-row-gap: 2rem;
--grid-column-gap: 2rem;
}
.c-grid[data-gap~=x-md] {
--grid-column-gap: 2rem;
}
.c-grid[data-gap~=y-md] {
--grid-row-gap: 2rem;
}
.c-grid[data-gap~=lg] {
--grid-row-gap: 2.5rem;
--grid-column-gap: 2.5rem;
}
.c-grid[data-gap~=x-lg] {
--grid-column-gap: 2.5rem;
}
.c-grid[data-gap~=y-lg] {
--grid-row-gap: 2.5rem;
}
.c-grid[data-gap~=xl] {
--grid-row-gap: 3rem;
--grid-column-gap: 3rem;
}
.c-grid[data-gap~=x-xl] {
--grid-column-gap: 3rem;
}
.c-grid[data-gap~=y-xl] {
--grid-row-gap: 3rem;
}
.c-grid[data-gap~=xxl] {
--grid-row-gap: 4rem;
--grid-column-gap: 4rem;
}
.c-grid[data-gap~=x-xxl] {
--grid-column-gap: 4rem;
}
.c-grid[data-gap~=y-xxl] {
--grid-row-gap: 4rem;
}
@media (max-width: 1400px) {
.c-grid[data-gap~="xl:0"] {
--grid-row-gap: 0px;
--grid-column-gap: 0px;
}
.c-grid[data-gap~="xl:x-0"] {
--grid-column-gap: 0px;
}
.c-grid[data-gap~="xl:y-0"] {
--grid-row-gap: 0px;
}
.c-grid[data-gap~="xl:xxs"] {
--grid-row-gap: 0.5rem;
--grid-column-gap: 0.5rem;
}
.c-grid[data-gap~="xl:x-xxs"] {
--grid-column-gap: 0.5rem;
}
.c-grid[data-gap~="xl:y-xxs"] {
--grid-row-gap: 0.5rem;
}
.c-grid[data-gap~="xl:xs"] {
--grid-row-gap: 1rem;
--grid-column-gap: 1rem;
}
.c-grid[data-gap~="xl:x-xs"] {
--grid-column-gap: 1rem;
}
.c-grid[data-gap~="xl:y-xs"] {
--grid-row-gap: 1rem;
}
.c-grid[data-gap~="xl:sm"] {
--grid-row-gap: 1.5rem;
--grid-column-gap: 1.5rem;
}
.c-grid[data-gap~="xl:x-sm"] {
--grid-column-gap: 1.5rem;
}
.c-grid[data-gap~="xl:y-sm"] {
--grid-row-gap: 1.5rem;
}
.c-grid[data-gap~="xl:md"] {
--grid-row-gap: 2rem;
--grid-column-gap: 2rem;
}
.c-grid[data-gap~="xl:x-md"] {
--grid-column-gap: 2rem;
}
.c-grid[data-gap~="xl:y-md"] {
--grid-row-gap: 2rem;
}
.c-grid[data-gap~="xl:lg"] {
--grid-row-gap: 2.5rem;
--grid-column-gap: 2.5rem;
}
.c-grid[data-gap~="xl:x-lg"] {
--grid-column-gap: 2.5rem;
}
.c-grid[data-gap~="xl:y-lg"] {
--grid-row-gap: 2.5rem;
}
.c-grid[data-gap~="xl:xl"] {
--grid-row-gap: 3rem;
--grid-column-gap: 3rem;
}
.c-grid[data-gap~="xl:x-xl"] {
--grid-column-gap: 3rem;
}
.c-grid[data-gap~="xl:y-xl"] {
--grid-row-gap: 3rem;
}
.c-grid[data-gap~="xl:xxl"] {
--grid-row-gap: 4rem;
--grid-column-gap: 4rem;
}
.c-grid[data-gap~="xl:x-xxl"] {
--grid-column-gap: 4rem;
}
.c-grid[data-gap~="xl:y-xxl"] {
--grid-row-gap: 4rem;
}
}
@media (max-width: 1280px) {
.c-grid[data-gap~="lg:0"] {
--grid-row-gap: 0px;
--grid-column-gap: 0px;
}
.c-grid[data-gap~="lg:x-0"] {
--grid-column-gap: 0px;
}
.c-grid[data-gap~="lg:y-0"] {
--grid-row-gap: 0px;
}
.c-grid[data-gap~="lg:xxs"] {
--grid-row-gap: 0.5rem;
--grid-column-gap: 0.5rem;
}
.c-grid[data-gap~="lg:x-xxs"] {
--grid-column-gap: 0.5rem;
}
.c-grid[data-gap~="lg:y-xxs"] {
--grid-row-gap: 0.5rem;
}
.c-grid[data-gap~="lg:xs"] {
--grid-row-gap: 1rem;
--grid-column-gap: 1rem;
}
.c-grid[data-gap~="lg:x-xs"] {
--grid-column-gap: 1rem;
}
.c-grid[data-gap~="lg:y-xs"] {
--grid-row-gap: 1rem;
}
.c-grid[data-gap~="lg:sm"] {
--grid-row-gap: 1.5rem;
--grid-column-gap: 1.5rem;
}
.c-grid[data-gap~="lg:x-sm"] {
--grid-column-gap: 1.5rem;
}
.c-grid[data-gap~="lg:y-sm"] {
--grid-row-gap: 1.5rem;
}
.c-grid[data-gap~="lg:md"] {
--grid-row-gap: 2rem;
--grid-column-gap: 2rem;
}
.c-grid[data-gap~="lg:x-md"] {
--grid-column-gap: 2rem;
}
.c-grid[data-gap~="lg:y-md"] {
--grid-row-gap: 2rem;
}
.c-grid[data-gap~="lg:lg"] {
--grid-row-gap: 2.5rem;
--grid-column-gap: 2.5rem;
}
.c-grid[data-gap~="lg:x-lg"] {
--grid-column-gap: 2.5rem;
}
.c-grid[data-gap~="lg:y-lg"] {
--grid-row-gap: 2.5rem;
}
.c-grid[data-gap~="lg:xl"] {
--grid-row-gap: 3rem;
--grid-column-gap: 3rem;
}
.c-grid[data-gap~="lg:x-xl"] {
--grid-column-gap: 3rem;
}
.c-grid[data-gap~="lg:y-xl"] {
--grid-row-gap: 3rem;
}
.c-grid[data-gap~="lg:xxl"] {
--grid-row-gap: 4rem;
--grid-column-gap: 4rem;
}
.c-grid[data-gap~="lg:x-xxl"] {
--grid-column-gap: 4rem;
}
.c-grid[data-gap~="lg:y-xxl"] {
--grid-row-gap: 4rem;
}
}
@media (max-width: 1024px) {
.c-grid[data-gap~="md:0"] {
--grid-row-gap: 0px;
--grid-column-gap: 0px;
}
.c-grid[data-gap~="md:x-0"] {
--grid-column-gap: 0px;
}
.c-grid[data-gap~="md:y-0"] {
--grid-row-gap: 0px;
}
.c-grid[data-gap~="md:xxs"] {
--grid-row-gap: 0.5rem;
--grid-column-gap: 0.5rem;
}
.c-grid[data-gap~="md:x-xxs"] {
--grid-column-gap: 0.5rem;
}
.c-grid[data-gap~="md:y-xxs"] {
--grid-row-gap: 0.5rem;
}
.c-grid[data-gap~="md:xs"] {
--grid-row-gap: 1rem;
--grid-column-gap: 1rem;
}
.c-grid[data-gap~="md:x-xs"] {
--grid-column-gap: 1rem;
}
.c-grid[data-gap~="md:y-xs"] {
--grid-row-gap: 1rem;
}
.c-grid[data-gap~="md:sm"] {
--grid-row-gap: 1.5rem;
--grid-column-gap: 1.5rem;
}
.c-grid[data-gap~="md:x-sm"] {
--grid-column-gap: 1.5rem;
}
.c-grid[data-gap~="md:y-sm"] {
--grid-row-gap: 1.5rem;
}
.c-grid[data-gap~="md:md"] {
--grid-row-gap: 2rem;
--grid-column-gap: 2rem;
}
.c-grid[data-gap~="md:x-md"] {
--grid-column-gap: 2rem;
}
.c-grid[data-gap~="md:y-md"] {
--grid-row-gap: 2rem;
}
.c-grid[data-gap~="md:lg"] {
--grid-row-gap: 2.5rem;
--grid-column-gap: 2.5rem;
}
.c-grid[data-gap~="md:x-lg"] {
--grid-column-gap: 2.5rem;
}
.c-grid[data-gap~="md:y-lg"] {
--grid-row-gap: 2.5rem;
}
.c-grid[data-gap~="md:xl"] {
--grid-row-gap: 3rem;
--grid-column-gap: 3rem;
}
.c-grid[data-gap~="md:x-xl"] {
--grid-column-gap: 3rem;
}
.c-grid[data-gap~="md:y-xl"] {
--grid-row-gap: 3rem;
}
.c-grid[data-gap~="md:xxl"] {
--grid-row-gap: 4rem;
--grid-column-gap: 4rem;
}
.c-grid[data-gap~="md:x-xxl"] {
--grid-column-gap: 4rem;
}
.c-grid[data-gap~="md:y-xxl"] {
--grid-row-gap: 4rem;
}
}
@media (max-width: 768px) {
.c-grid[data-gap~="sm:0"] {
--grid-row-gap: 0px;
--grid-column-gap: 0px;
}
.c-grid[data-gap~="sm:x-0"] {
--grid-column-gap: 0px;
}
.c-grid[data-gap~="sm:y-0"] {
--grid-row-gap: 0px;
}
.c-grid[data-gap~="sm:xxs"] {
--grid-row-gap: 0.5rem;
--grid-column-gap: 0.5rem;
}
.c-grid[data-gap~="sm:x-xxs"] {
--grid-column-gap: 0.5rem;
}
.c-grid[data-gap~="sm:y-xxs"] {
--grid-row-gap: 0.5rem;
}
.c-grid[data-gap~="sm:xs"] {
--grid-row-gap: 1rem;
--grid-column-gap: 1rem;
}
.c-grid[data-gap~="sm:x-xs"] {
--grid-column-gap: 1rem;
}
.c-grid[data-gap~="sm:y-xs"] {
--grid-row-gap: 1rem;
}
.c-grid[data-gap~="sm:sm"] {
--grid-row-gap: 1.5rem;
--grid-column-gap: 1.5rem;
}
.c-grid[data-gap~="sm:x-sm"] {
--grid-column-gap: 1.5rem;
}
.c-grid[data-gap~="sm:y-sm"] {
--grid-row-gap: 1.5rem;
}
.c-grid[data-gap~="sm:md"] {
--grid-row-gap: 2rem;
--grid-column-gap: 2rem;
}
.c-grid[data-gap~="sm:x-md"] {
--grid-column-gap: 2rem;
}
.c-grid[data-gap~="sm:y-md"] {
--grid-row-gap: 2rem;
}
.c-grid[data-gap~="sm:lg"] {
--grid-row-gap: 2.5rem;
--grid-column-gap: 2.5rem;
}
.c-grid[data-gap~="sm:x-lg"] {
--grid-column-gap: 2.5rem;
}
.c-grid[data-gap~="sm:y-lg"] {
--grid-row-gap: 2.5rem;
}
.c-grid[data-gap~="sm:xl"] {
--grid-row-gap: 3rem;
--grid-column-gap: 3rem;
}
.c-grid[data-gap~="sm:x-xl"] {
--grid-column-gap: 3rem;
}
.c-grid[data-gap~="sm:y-xl"] {
--grid-row-gap: 3rem;
}
.c-grid[data-gap~="sm:xxl"] {
--grid-row-gap: 4rem;
--grid-column-gap: 4rem;
}
.c-grid[data-gap~="sm:x-xxl"] {
--grid-column-gap: 4rem;
}
.c-grid[data-gap~="sm:y-xxl"] {
--grid-row-gap: 4rem;
}
}
@media (max-width: 480px) {
.c-grid[data-gap~="xs:0"] {
--grid-row-gap: 0px;
--grid-column-gap: 0px;
}
.c-grid[data-gap~="xs:x-0"] {
--grid-column-gap: 0px;
}
.c-grid[data-gap~="xs:y-0"] {
--grid-row-gap: 0px;
}
.c-grid[data-gap~="xs:xxs"] {
--grid-row-gap: 0.5rem;
--grid-column-gap: 0.5rem;
}
.c-grid[data-gap~="xs:x-xxs"] {
--grid-column-gap: 0.5rem;
}
.c-grid[data-gap~="xs:y-xxs"] {
--grid-row-gap: 0.5rem;
}
.c-grid[data-gap~="xs:xs"] {
--grid-row-gap: 1rem;
--grid-column-gap: 1rem;
}
.c-grid[data-gap~="xs:x-xs"] {
--grid-column-gap: 1rem;
}
.c-grid[data-gap~="xs:y-xs"] {
--grid-row-gap: 1rem;
}
.c-grid[data-gap~="xs:sm"] {
--grid-row-gap: 1.5rem;
--grid-column-gap: 1.5rem;
}
.c-grid[data-gap~="xs:x-sm"] {
--grid-column-gap: 1.5rem;
}
.c-grid[data-gap~="xs:y-sm"] {
--grid-row-gap: 1.5rem;
}
.c-grid[data-gap~="xs:md"] {
--grid-row-gap: 2rem;
--grid-column-gap: 2rem;
}
.c-grid[data-gap~="xs:x-md"] {
--grid-column-gap: 2rem;
}
.c-grid[data-gap~="xs:y-md"] {
--grid-row-gap: 2rem;
}
.c-grid[data-gap~="xs:lg"] {
--grid-row-gap: 2.5rem;
--grid-column-gap: 2.5rem;
}
.c-grid[data-gap~="xs:x-lg"] {
--grid-column-gap: 2.5rem;
}
.c-grid[data-gap~="xs:y-lg"] {
--grid-row-gap: 2.5rem;
}
.c-grid[data-gap~="xs:xl"] {
--grid-row-gap: 3rem;
--grid-column-gap: 3rem;
}
.c-grid[data-gap~="xs:x-xl"] {
--grid-column-gap: 3rem;
}
.c-grid[data-gap~="xs:y-xl"] {
--grid-row-gap: 3rem;
}
.c-grid[data-gap~="xs:xxl"] {
--grid-row-gap: 4rem;
--grid-column-gap: 4rem;
}
.c-grid[data-gap~="xs:x-xxl"] {
--grid-column-gap: 4rem;
}
.c-grid[data-gap~="xs:y-xxl"] {
--grid-row-gap: 4rem;
}
}
.c-grid__item[data-span~="1"] {
grid-column: span 1;
}
.c-grid__item[data-span~="2"] {
grid-column: span 2;
}
.c-grid__item[data-span~="3"] {
grid-column: span 3;
}
.c-grid__item[data-span~="4"] {
grid-column: span 4;
}
.c-grid__item[data-span~="5"] {
grid-column: span 5;
}
.c-grid__item[data-span~="6"] {
grid-column: span 6;
}
.c-grid__item[data-span~="7"] {
grid-column: span 7;
}
.c-grid__item[data-span~="8"] {
grid-column: span 8;
}
.c-grid__item[data-span~="9"] {
grid-column: span 9;
}
.c-grid__item[data-span~="10"] {
grid-column: span 10;
}
.c-grid__item[data-span~="11"] {
grid-column: span 11;
}
.c-grid__item[data-span~="12"] {
grid-column: span 12;
}
@media (max-width: 1400px) {
.c-grid__item[data-span~="xl:1"] {
grid-column: span 1;
}
.c-grid__item[data-span~="xl:2"] {
grid-column: span 2;
}
.c-grid__item[data-span~="xl:3"] {
grid-column: span 3;
}
.c-grid__item[data-span~="xl:4"] {
grid-column: span 4;
}
.c-grid__item[data-span~="xl:5"] {
grid-column: span 5;
}
.c-grid__item[data-span~="xl:6"] {
grid-column: span 6;
}
.c-grid__item[data-span~="xl:7"] {
grid-column: span 7;
}
.c-grid__item[data-span~="xl:8"] {
grid-column: span 8;
}
.c-grid__item[data-span~="xl:9"] {
grid-column: span 9;
}
.c-grid__item[data-span~="xl:10"] {
grid-column: span 10;
}
.c-grid__item[data-span~="xl:11"] {
grid-column: span 11;
}
.c-grid__item[data-span~="xl:12"] {
grid-column: span 12;
}
}
@media (max-width: 1280px) {
.c-grid__item[data-span~="lg:1"] {
grid-column: span 1;
}
.c-grid__item[data-span~="lg:2"] {
grid-column: span 2;
}
.c-grid__item[data-span~="lg:3"] {
grid-column: span 3;
}
.c-grid__item[data-span~="lg:4"] {
grid-column: span 4;
}
.c-grid__item[data-span~="lg:5"] {
grid-column: span 5;
}
.c-grid__item[data-span~="lg:6"] {
grid-column: span 6;
}
.c-grid__item[data-span~="lg:7"] {
grid-column: span 7;
}
.c-grid__item[data-span~="lg:8"] {
grid-column: span 8;
}
.c-grid__item[data-span~="lg:9"] {
grid-column: span 9;
}
.c-grid__item[data-span~="lg:10"] {
grid-column: span 10;
}
.c-grid__item[data-span~="lg:11"] {
grid-column: span 11;
}
.c-grid__item[data-span~="lg:12"] {
grid-column: span 12;
}
}
@media (max-width: 1024px) {
.c-grid__item[data-span~="md:1"] {
grid-column: span 1;
}
.c-grid__item[data-span~="md:2"] {
grid-column: span 2;
}
.c-grid__item[data-span~="md:3"] {
grid-column: span 3;
}
.c-grid__item[data-span~="md:4"] {
grid-column: span 4;
}
.c-grid__item[data-span~="md:5"] {
grid-column: span 5;
}
.c-grid__item[data-span~="md:6"] {
grid-column: span 6;
}
.c-grid__item[data-span~="md:7"] {
grid-column: span 7;
}
.c-grid__item[data-span~="md:8"] {
grid-column: span 8;
}
.c-grid__item[data-span~="md:9"] {
grid-column: span 9;
}
.c-grid__item[data-span~="md:10"] {
grid-column: span 10;
}
.c-grid__item[data-span~="md:11"] {
grid-column: span 11;
}
.c-grid__item[data-span~="md:12"] {
grid-column: span 12;
}
}
@media (max-width: 768px) {
.c-grid__item[data-span~="sm:1"] {
grid-column: span 1;
}
.c-grid__item[data-span~="sm:2"] {
grid-column: span 2;
}
.c-grid__item[data-span~="sm:3"] {
grid-column: span 3;
}
.c-grid__item[data-span~="sm:4"] {
grid-column: span 4;
}
.c-grid__item[data-span~="sm:5"] {
grid-column: span 5;
}
.c-grid__item[data-span~="sm:6"] {
grid-column: span 6;
}
.c-grid__item[data-span~="sm:7"] {
grid-column: span 7;
}
.c-grid__item[data-span~="sm:8"] {
grid-column: span 8;
}
.c-grid__item[data-span~="sm:9"] {
grid-column: span 9;
}
.c-grid__item[data-span~="sm:10"] {
grid-column: span 10;
}
.c-grid__item[data-span~="sm:11"] {
grid-column: span 11;
}
.c-grid__item[data-span~="sm:12"] {
grid-column: span 12;
}
}
@media (max-width: 480px) {
.c-grid__item[data-span~="xs:1"] {
grid-column: span 1;
}
.c-grid__item[data-span~="xs:2"] {
grid-column: span 2;
}
.c-grid__item[data-span~="xs:3"] {
grid-column: span 3;
}
.c-grid__item[data-span~="xs:4"] {
grid-column: span 4;
}
.c-grid__item[data-span~="xs:5"] {
grid-column: span 5;
}
.c-grid__item[data-span~="xs:6"] {
grid-column: span 6;
}
.c-grid__item[data-span~="xs:7"] {
grid-column: span 7;
}
.c-grid__item[data-span~="xs:8"] {
grid-column: span 8;
}
.c-grid__item[data-span~="xs:9"] {
grid-column: span 9;
}
.c-grid__item[data-span~="xs:10"] {
grid-column: span 10;
}
.c-grid__item[data-span~="xs:11"] {
grid-column: span 11;
}
.c-grid__item[data-span~="xs:12"] {
grid-column: span 12;
}
}
.c-grid[data-align~=start] {
justify-content: start;
}
.c-grid[data-align~=center] {
justify-content: center;
}
.c-grid[data-align~=end] {
justify-content: end;
}
.c-grid[data-align~=justify] {
justify-content: space-between;
}
.c-grid[data-align~=top] {
align-items: start;
}
.c-grid[data-align~=middle] {
align-items: center;
}
.c-grid[data-align~=bottom] {
align-items: end;
}
.c-grid__item[data-align~=start] {
align-items: flex-start;
}
.c-grid__item[data-align~=center] {
align-items: center;
}
.c-grid__item[data-align~=end] {
align-items: flex-end;
}
.c-grid__item[data-align~=top] {
justify-content: flex-start;
align-self: stretch;
}
.c-grid__item[data-align~=middle] {
justify-content: center;
align-self: stretch;
}
.c-grid__item[data-align~=bottom] {
justify-content: flex-end;
align-self: stretch;
}
@media (max-width: 1400px) {
.c-grid[data-align~="xl:start"] {
justify-content: start;
}
.c-grid[data-align~="xl:center"] {
justify-content: center;
}
.c-grid[data-align~="xl:end"] {
justify-content: end;
}
.c-grid[data-align~="xl:justify"] {
justify-content: space-between;
}
.c-grid[data-align~="xl:top"] {
align-items: start;
}
.c-grid[data-align~="xl:middle"] {
align-items: center;
}
.c-grid[data-align~="xl:bottom"] {
align-items: end;
}
}
@media (max-width: 1280px) {
.c-grid[data-align~="lg:start"] {
justify-content: start;
}
.c-grid[data-align~="lg:center"] {
justify-content: center;
}
.c-grid[data-align~="lg:end"] {
justify-content: end;
}
.c-grid[data-align~="lg:justify"] {
justify-content: space-between;
}
.c-grid[data-align~="lg:top"] {
align-items: start;
}
.c-grid[data-align~="lg:middle"] {
align-items: center;
}
.c-grid[data-align~="lg:bottom"] {
align-items: end;
}
}
@media (max-width: 1024px) {
.c-grid[data-align~="md:start"] {
justify-content: start;
}
.c-grid[data-align~="md:center"] {
justify-content: center;
}
.c-grid[data-align~="md:end"] {
justify-content: end;
}
.c-grid[data-align~="md:justify"] {
justify-content: space-between;
}
.c-grid[data-align~="md:top"] {
align-items: start;
}
.c-grid[data-align~="md:middle"] {
align-items: center;
}
.c-grid[data-align~="md:bottom"] {
align-items: end;
}
}
@media (max-width: 768px) {
.c-grid[data-align~="sm:start"] {
justify-content: start;
}
.c-grid[data-align~="sm:center"] {
justify-content: center;
}
.c-grid[data-align~="sm:end"] {
justify-content: end;
}
.c-grid[data-align~="sm:justify"] {
justify-content: space-between;
}
.c-grid[data-align~="sm:top"] {
align-items: start;
}
.c-grid[data-align~="sm:middle"] {
align-items: center;
}
.c-grid[data-align~="sm:bottom"] {
align-items: end;
}
}
@media (max-width: 480px) {
.c-grid[data-align~="xs:start"] {
justify-content: start;
}
.c-grid[data-align~="xs:center"] {
justify-content: center;
}
.c-grid[data-align~="xs:end"] {
justify-content: end;
}
.c-grid[data-align~="xs:justify"] {
justify-content: space-between;
}
.c-grid[data-align~="xs:top"] {
align-items: start;
}
.c-grid[data-align~="xs:middle"] {
align-items: center;
}
.c-grid[data-align~="xs:bottom"] {
align-items: end;
}
}
.c-grid__item[data-nowrap] {
flex-shrink: 0;
}
/* ===========================================
* 見出し
* ======================================== */
/* H2
---------------------------------------------- */
.c-heading-lv2__main {
font-size: clamp(1.25rem, 1.125rem + 0.5vw, 1.5rem);
font-weight: 700;
letter-spacing: 0;
line-height: var(--lh-sm);
color: var(--c-main);
padding-bottom: 8px;
position: relative;
}
.c-heading-lv2__main::after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100px;
height: 2px;
background: var(--c-main-gradient);
border-radius: calc(infinity * 1px);
}
.c-heading-lv2__en {
display: block;
font-family: var(--ff-en);
font-weight: 400;
letter-spacing: var(--ls-default);
line-height: var(--lh-sm);
margin-top: 8px;
}
/* h2 simple */
.c-heading-lv2--simple {
font-size: 24px;
font-weight: 700;
letter-spacing: 0;
line-height: var(--lh-sm);
margin-bottom: 28px;
}
/* H3
---------------------------------------------- */
.c-heading-lv3 {
font-size: 20px;
font-weight: 700;
letter-spacing: 0;
line-height: var(--lh-sm);
color: var(--c-main);
margin-bottom: 16px;
}
/* ===========================================
* テキスト
* ======================================== */
.c-txt {
font-size: var(--fz-default);
font-weight: 400;
line-height: var(--lh-default);
letter-spacing: var(--ls-default);
word-break: break-all;
}
.c-txt a {
color: var(--c-link);
text-decoration: underline;
text-underline-offset: 2px;
}
.c-txt.-lh-sm {
line-height: var(--lh-sm);
}
.c-txt.-ls-0 {
letter-spacing: 0;
}
.c-txt.-fw-md {
font-weight: 500;
}
.c-txt.-fw-semi-bold {
font-weight: 600;
}
.c-txt.-fw-bold {
font-weight: 700;
}
.c-txt.-indent {
text-indent: -1em;
padding-left: 1em;
}
.c-inner {
box-sizing: content-box;
max-width: var(--inner);
margin-left: auto;
margin-right: auto;
padding-right: var(--inner-gutter);
padding-left: var(--inner-gutter);
}
@media screen and (max-width: 1024px) {
.c-inner {
padding-right: var(--inner-gutter-sp);
padding-left: var(--inner-gutter-sp);
}
}
.c-inner.-xs {
max-width: var(--inner-xs);
}
.c-inner.-sm {
max-width: var(--inner-sm);
}
.c-inner.-lg {
max-width: var(--inner-lg);
}
.c-flex {
display: flex;
row-gap: var(--flex-row-gap, 0);
-moz-column-gap: var(--flex-column-gap, 0);
column-gap: var(--flex-column-gap, 0);
}
.c-flex[data-gap~="0"] {
--flex-row-gap: 0px;
--flex-column-gap: 0px;
}
.c-flex[data-gap~=x-0] {
--flex-column-gap: 0px;
}
.c-flex[data-gap~=y-0] {
--flex-row-gap: 0px;
}
.c-flex[data-gap~=xxs] {
--flex-row-gap: 0.5rem;
--flex-column-gap: 0.5rem;
}
.c-flex[data-gap~=x-xxs] {
--flex-column-gap: 0.5rem;
}
.c-flex[data-gap~=y-xxs] {
--flex-row-gap: 0.5rem;
}
.c-flex[data-gap~=xs] {
--flex-row-gap: 1rem;
--flex-column-gap: 1rem;
}
.c-flex[data-gap~=x-xs] {
--flex-column-gap: 1rem;
}
.c-flex[data-gap~=y-xs] {
--flex-row-gap: 1rem;
}
.c-flex[data-gap~=sm] {
--flex-row-gap: 1.5rem;
--flex-column-gap: 1.5rem;
}
.c-flex[data-gap~=x-sm] {
--flex-column-gap: 1.5rem;
}
.c-flex[data-gap~=y-sm] {
--flex-row-gap: 1.5rem;
}
.c-flex[data-gap~=md] {
--flex-row-gap: 2rem;
--flex-column-gap: 2rem;
}
.c-flex[data-gap~=x-md] {
--flex-column-gap: 2rem;
}
.c-flex[data-gap~=y-md] {
--flex-row-gap: 2rem;
}
.c-flex[data-gap~=lg] {
--flex-row-gap: 2.5rem;
--flex-column-gap: 2.5rem;
}
.c-flex[data-gap~=x-lg] {
--flex-column-gap: 2.5rem;
}
.c-flex[data-gap~=y-lg] {
--flex-row-gap: 2.5rem;
}
.c-flex[data-gap~=xl] {
--flex-row-gap: 3rem;
--flex-column-gap: 3rem;
}
.c-flex[data-gap~=x-xl] {
--flex-column-gap: 3rem;
}
.c-flex[data-gap~=y-xl] {
--flex-row-gap: 3rem;
}
.c-flex[data-gap~=xxl] {
--flex-row-gap: 4rem;
--flex-column-gap: 4rem;
}
.c-flex[data-gap~=x-xxl] {
--flex-column-gap: 4rem;
}
.c-flex[data-gap~=y-xxl] {
--flex-row-gap: 4rem;
}
@media (max-width: 1400px) {
.c-flex[data-gap~="xl:0"] {
--flex-row-gap: 0px;
--flex-column-gap: 0px;
}
.c-flex[data-gap~="xl:x-0"] {
--flex-column-gap: 0px;
}
.c-flex[data-gap~="xl:y-0"] {
--flex-row-gap: 0px;
}
.c-flex[data-gap~="xl:xxs"] {
--flex-row-gap: 0.5rem;
--flex-column-gap: 0.5rem;
}
.c-flex[data-gap~="xl:x-xxs"] {
--flex-column-gap: 0.5rem;
}
.c-flex[data-gap~="xl:y-xxs"] {
--flex-row-gap: 0.5rem;
}
.c-flex[data-gap~="xl:xs"] {
--flex-row-gap: 1rem;
--flex-column-gap: 1rem;
}
.c-flex[data-gap~="xl:x-xs"] {
--flex-column-gap: 1rem;
}
.c-flex[data-gap~="xl:y-xs"] {
--flex-row-gap: 1rem;
}
.c-flex[data-gap~="xl:sm"] {
--flex-row-gap: 1.5rem;
--flex-column-gap: 1.5rem;
}
.c-flex[data-gap~="xl:x-sm"] {
--flex-column-gap: 1.5rem;
}
.c-flex[data-gap~="xl:y-sm"] {
--flex-row-gap: 1.5rem;
}
.c-flex[data-gap~="xl:md"] {
--flex-row-gap: 2rem;
--flex-column-gap: 2rem;
}
.c-flex[data-gap~="xl:x-md"] {
--flex-column-gap: 2rem;
}
.c-flex[data-gap~="xl:y-md"] {
--flex-row-gap: 2rem;
}
.c-flex[data-gap~="xl:lg"] {
--flex-row-gap: 2.5rem;
--flex-column-gap: 2.5rem;
}
.c-flex[data-gap~="xl:x-lg"] {
--flex-column-gap: 2.5rem;
}
.c-flex[data-gap~="xl:y-lg"] {
--flex-row-gap: 2.5rem;
}
.c-flex[data-gap~="xl:xl"] {
--flex-row-gap: 3rem;
--flex-column-gap: 3rem;
}
.c-flex[data-gap~="xl:x-xl"] {
--flex-column-gap: 3rem;
}
.c-flex[data-gap~="xl:y-xl"] {
--flex-row-gap: 3rem;
}
.c-flex[data-gap~="xl:xxl"] {
--flex-row-gap: 4rem;
--flex-column-gap: 4rem;
}
.c-flex[data-gap~="xl:x-xxl"] {
--flex-column-gap: 4rem;
}
.c-flex[data-gap~="xl:y-xxl"] {
--flex-row-gap: 4rem;
}
}
@media (max-width: 1280px) {
.c-flex[data-gap~="lg:0"] {
--flex-row-gap: 0px;
--flex-column-gap: 0px;
}
.c-flex[data-gap~="lg:x-0"] {
--flex-column-gap: 0px;
}
.c-flex[data-gap~="lg:y-0"] {
--flex-row-gap: 0px;
}
.c-flex[data-gap~="lg:xxs"] {
--flex-row-gap: 0.5rem;
--flex-column-gap: 0.5rem;
}
.c-flex[data-gap~="lg:x-xxs"] {
--flex-column-gap: 0.5rem;
}
.c-flex[data-gap~="lg:y-xxs"] {
--flex-row-gap: 0.5rem;
}
.c-flex[data-gap~="lg:xs"] {
--flex-row-gap: 1rem;
--flex-column-gap: 1rem;
}
.c-flex[data-gap~="lg:x-xs"] {
--flex-column-gap: 1rem;
}
.c-flex[data-gap~="lg:y-xs"] {
--flex-row-gap: 1rem;
}
.c-flex[data-gap~="lg:sm"] {
--flex-row-gap: 1.5rem;
--flex-column-gap: 1.5rem;
}
.c-flex[data-gap~="lg:x-sm"] {
--flex-column-gap: 1.5rem;
}
.c-flex[data-gap~="lg:y-sm"] {
--flex-row-gap: 1.5rem;
}
.c-flex[data-gap~="lg:md"] {
--flex-row-gap: 2rem;
--flex-column-gap: 2rem;
}
.c-flex[data-gap~="lg:x-md"] {
--flex-column-gap: 2rem;
}
.c-flex[data-gap~="lg:y-md"] {
--flex-row-gap: 2rem;
}
.c-flex[data-gap~="lg:lg"] {
--flex-row-gap: 2.5rem;
--flex-column-gap: 2.5rem;
}
.c-flex[data-gap~="lg:x-lg"] {
--flex-column-gap: 2.5rem;
}
.c-flex[data-gap~="lg:y-lg"] {
--flex-row-gap: 2.5rem;
}
.c-flex[data-gap~="lg:xl"] {
--flex-row-gap: 3rem;
--flex-column-gap: 3rem;
}
.c-flex[data-gap~="lg:x-xl"] {
--flex-column-gap: 3rem;
}
.c-flex[data-gap~="lg:y-xl"] {
--flex-row-gap: 3rem;
}
.c-flex[data-gap~="lg:xxl"] {
--flex-row-gap: 4rem;
--flex-column-gap: 4rem;
}
.c-flex[data-gap~="lg:x-xxl"] {
--flex-column-gap: 4rem;
}
.c-flex[data-gap~="lg:y-xxl"] {
--flex-row-gap: 4rem;
}
}
@media (max-width: 1024px) {
.c-flex[data-gap~="md:0"] {
--flex-row-gap: 0px;
--flex-column-gap: 0px;
}
.c-flex[data-gap~="md:x-0"] {
--flex-column-gap: 0px;
}
.c-flex[data-gap~="md:y-0"] {
--flex-row-gap: 0px;
}
.c-flex[data-gap~="md:xxs"] {
--flex-row-gap: 0.5rem;
--flex-column-gap: 0.5rem;
}
.c-flex[data-gap~="md:x-xxs"] {
--flex-column-gap: 0.5rem;
}
.c-flex[data-gap~="md:y-xxs"] {
--flex-row-gap: 0.5rem;
}
.c-flex[data-gap~="md:xs"] {
--flex-row-gap: 1rem;
--flex-column-gap: 1rem;
}
.c-flex[data-gap~="md:x-xs"] {
--flex-column-gap: 1rem;
}
.c-flex[data-gap~="md:y-xs"] {
--flex-row-gap: 1rem;
}
.c-flex[data-gap~="md:sm"] {
--flex-row-gap: 1.5rem;
--flex-column-gap: 1.5rem;
}
.c-flex[data-gap~="md:x-sm"] {
--flex-column-gap: 1.5rem;
}
.c-flex[data-gap~="md:y-sm"] {
--flex-row-gap: 1.5rem;
}
.c-flex[data-gap~="md:md"] {
--flex-row-gap: 2rem;
--flex-column-gap: 2rem;
}
.c-flex[data-gap~="md:x-md"] {
--flex-column-gap: 2rem;
}
.c-flex[data-gap~="md:y-md"] {
--flex-row-gap: 2rem;
}
.c-flex[data-gap~="md:lg"] {
--flex-row-gap: 2.5rem;
--flex-column-gap: 2.5rem;
}
.c-flex[data-gap~="md:x-lg"] {
--flex-column-gap: 2.5rem;
}
.c-flex[data-gap~="md:y-lg"] {
--flex-row-gap: 2.5rem;
}
.c-flex[data-gap~="md:xl"] {
--flex-row-gap: 3rem;
--flex-column-gap: 3rem;
}
.c-flex[data-gap~="md:x-xl"] {
--flex-column-gap: 3rem;
}
.c-flex[data-gap~="md:y-xl"] {
--flex-row-gap: 3rem;
}
.c-flex[data-gap~="md:xxl"] {
--flex-row-gap: 4rem;
--flex-column-gap: 4rem;
}
.c-flex[data-gap~="md:x-xxl"] {
--flex-column-gap: 4rem;
}
.c-flex[data-gap~="md:y-xxl"] {
--flex-row-gap: 4rem;
}
}
@media (max-width: 768px) {
.c-flex[data-gap~="sm:0"] {
--flex-row-gap: 0px;
--flex-column-gap: 0px;
}
.c-flex[data-gap~="sm:x-0"] {
--flex-column-gap: 0px;
}
.c-flex[data-gap~="sm:y-0"] {
--flex-row-gap: 0px;
}
.c-flex[data-gap~="sm:xxs"] {
--flex-row-gap: 0.5rem;
--flex-column-gap: 0.5rem;
}
.c-flex[data-gap~="sm:x-xxs"] {
--flex-column-gap: 0.5rem;
}
.c-flex[data-gap~="sm:y-xxs"] {
--flex-row-gap: 0.5rem;
}
.c-flex[data-gap~="sm:xs"] {
--flex-row-gap: 1rem;
--flex-column-gap: 1rem;
}
.c-flex[data-gap~="sm:x-xs"] {
--flex-column-gap: 1rem;
}
.c-flex[data-gap~="sm:y-xs"] {
--flex-row-gap: 1rem;
}
.c-flex[data-gap~="sm:sm"] {
--flex-row-gap: 1.5rem;
--flex-column-gap: 1.5rem;
}
.c-flex[data-gap~="sm:x-sm"] {
--flex-column-gap: 1.5rem;
}
.c-flex[data-gap~="sm:y-sm"] {
--flex-row-gap: 1.5rem;
}
.c-flex[data-gap~="sm:md"] {
--flex-row-gap: 2rem;
--flex-column-gap: 2rem;
}
.c-flex[data-gap~="sm:x-md"] {
--flex-column-gap: 2rem;
}
.c-flex[data-gap~="sm:y-md"] {
--flex-row-gap: 2rem;
}
.c-flex[data-gap~="sm:lg"] {
--flex-row-gap: 2.5rem;
--flex-column-gap: 2.5rem;
}
.c-flex[data-gap~="sm:x-lg"] {
--flex-column-gap: 2.5rem;
}
.c-flex[data-gap~="sm:y-lg"] {
--flex-row-gap: 2.5rem;
}
.c-flex[data-gap~="sm:xl"] {
--flex-row-gap: 3rem;
--flex-column-gap: 3rem;
}
.c-flex[data-gap~="sm:x-xl"] {
--flex-column-gap: 3rem;
}
.c-flex[data-gap~="sm:y-xl"] {
--flex-row-gap: 3rem;
}
.c-flex[data-gap~="sm:xxl"] {
--flex-row-gap: 4rem;
--flex-column-gap: 4rem;
}
.c-flex[data-gap~="sm:x-xxl"] {
--flex-column-gap: 4rem;
}
.c-flex[data-gap~="sm:y-xxl"] {
--flex-row-gap: 4rem;
}
}
@media (max-width: 480px) {
.c-flex[data-gap~="xs:0"] {
--flex-row-gap: 0px;
--flex-column-gap: 0px;
}
.c-flex[data-gap~="xs:x-0"] {
--flex-column-gap: 0px;
}
.c-flex[data-gap~="xs:y-0"] {
--flex-row-gap: 0px;
}
.c-flex[data-gap~="xs:xxs"] {
--flex-row-gap: 0.5rem;
--flex-column-gap: 0.5rem;
}
.c-flex[data-gap~="xs:x-xxs"] {
--flex-column-gap: 0.5rem;
}
.c-flex[data-gap~="xs:y-xxs"] {
--flex-row-gap: 0.5rem;
}
.c-flex[data-gap~="xs:xs"] {
--flex-row-gap: 1rem;
--flex-column-gap: 1rem;
}
.c-flex[data-gap~="xs:x-xs"] {
--flex-column-gap: 1rem;
}
.c-flex[data-gap~="xs:y-xs"] {
--flex-row-gap: 1rem;
}
.c-flex[data-gap~="xs:sm"] {
--flex-row-gap: 1.5rem;
--flex-column-gap: 1.5rem;
}
.c-flex[data-gap~="xs:x-sm"] {
--flex-column-gap: 1.5rem;
}
.c-flex[data-gap~="xs:y-sm"] {
--flex-row-gap: 1.5rem;
}
.c-flex[data-gap~="xs:md"] {
--flex-row-gap: 2rem;
--flex-column-gap: 2rem;
}
.c-flex[data-gap~="xs:x-md"] {
--flex-column-gap: 2rem;
}
.c-flex[data-gap~="xs:y-md"] {
--flex-row-gap: 2rem;
}
.c-flex[data-gap~="xs:lg"] {
--flex-row-gap: 2.5rem;
--flex-column-gap: 2.5rem;
}
.c-flex[data-gap~="xs:x-lg"] {
--flex-column-gap: 2.5rem;
}
.c-flex[data-gap~="xs:y-lg"] {
--flex-row-gap: 2.5rem;
}
.c-flex[data-gap~="xs:xl"] {
--flex-row-gap: 3rem;
--flex-column-gap: 3rem;
}
.c-flex[data-gap~="xs:x-xl"] {
--flex-column-gap: 3rem;
}
.c-flex[data-gap~="xs:y-xl"] {
--flex-row-gap: 3rem;
}
.c-flex[data-gap~="xs:xxl"] {
--flex-row-gap: 4rem;
--flex-column-gap: 4rem;
}
.c-flex[data-gap~="xs:x-xxl"] {
--flex-column-gap: 4rem;
}
.c-flex[data-gap~="xs:y-xxl"] {
--flex-row-gap: 4rem;
}
}
.c-flex[data-align~=wrap] {
flex-wrap: wrap;
}
.c-flex[data-align~=col] {
flex-direction: column;
}
.c-flex[data-align~=start] {
justify-content: start;
}
.c-flex[data-align~=center] {
justify-content: center;
}
.c-flex[data-align~=end] {
justify-content: end;
}
.c-flex[data-align~=between] {
justify-content: space-between;
}
.c-flex[data-align~=top] {
align-items: start;
}
.c-flex[data-align~=stretch] {
align-items: stretch;
}
.c-flex[data-align~=base] {
align-items: first baseline;
}
.c-flex[data-align~=middle] {
align-items: center;
}
.c-flex[data-align~=bottom] {
align-items: end;
}
.c-flex__item[data-align~=start] {
align-items: flex-start;
}
.c-flex__item[data-align~=base] {
align-items: first baseline;
}
.c-flex__item[data-align~=center] {
align-items: center;
}
.c-flex__item[data-align~=end] {
align-items: flex-end;
}
.c-flex__item[data-align~=top] {
justify-content: flex-start;
align-self: stretch;
}
.c-flex__item[data-align~=middle] {
justify-content: center;
align-self: stretch;
}
.c-flex__item[data-align~=bottom] {
justify-content: flex-end;
align-self: stretch;
}
@media (max-width: 1400px) {
.c-flex[data-align~="xl:col"] {
flex-direction: column;
}
.c-flex[data-align~="xl:start"] {
justify-content: start;
}
.c-flex[data-align~="xl:center"] {
justify-content: center;
}
.c-flex[data-align~="xl:end"] {
justify-content: end;
}
.c-flex[data-align~="xl:justify"] {
justify-content: space-between;
}
.c-flex[data-align~="xl:top"] {
align-items: start;
}
.c-flex[data-align~="xl:base"] {
align-items: first baseline;
}
.c-flex[data-align~="xl:middle"] {
align-items: center;
}
.c-flex[data-align~="xl:bottom"] {
align-items: end;
}
}
@media (max-width: 1280px) {
.c-flex[data-align~="lg:col"] {
flex-direction: column;
}
.c-flex[data-align~="lg:start"] {
justify-content: start;
}
.c-flex[data-align~="lg:center"] {
justify-content: center;
}
.c-flex[data-align~="lg:end"] {
justify-content: end;
}
.c-flex[data-align~="lg:justify"] {
justify-content: space-between;
}
.c-flex[data-align~="lg:top"] {
align-items: start;
}
.c-flex[data-align~="lg:base"] {
align-items: first baseline;
}
.c-flex[data-align~="lg:middle"] {
align-items: center;
}
.c-flex[data-align~="lg:bottom"] {
align-items: end;
}
}
@media (max-width: 1024px) {
.c-flex[data-align~="md:col"] {
flex-direction: column;
}
.c-flex[data-align~="md:start"] {
justify-content: start;
}
.c-flex[data-align~="md:center"] {
justify-content: center;
}
.c-flex[data-align~="md:end"] {
justify-content: end;
}
.c-flex[data-align~="md:justify"] {
justify-content: space-between;
}
.c-flex[data-align~="md:top"] {
align-items: start;
}
.c-flex[data-align~="md:base"] {
align-items: first baseline;
}
.c-flex[data-align~="md:middle"] {
align-items: center;
}
.c-flex[data-align~="md:bottom"] {
align-items: end;
}
}
@media (max-width: 768px) {
.c-flex[data-align~="sm:col"] {
flex-direction: column;
}
.c-flex[data-align~="sm:start"] {
justify-content: start;
}
.c-flex[data-align~="sm:center"] {
justify-content: center;
}
.c-flex[data-align~="sm:end"] {
justify-content: end;
}
.c-flex[data-align~="sm:justify"] {
justify-content: space-between;
}
.c-flex[data-align~="sm:top"] {
align-items: start;
}
.c-flex[data-align~="sm:base"] {
align-items: first baseline;
}
.c-flex[data-align~="sm:middle"] {
align-items: center;
}
.c-flex[data-align~="sm:bottom"] {
align-items: end;
}
}
@media (max-width: 480px) {
.c-flex[data-align~="xs:col"] {
flex-direction: column;
}
.c-flex[data-align~="xs:start"] {
justify-content: start;
}
.c-flex[data-align~="xs:center"] {
justify-content: center;
}
.c-flex[data-align~="xs:end"] {
justify-content: end;
}
.c-flex[data-align~="xs:justify"] {
justify-content: space-between;
}
.c-flex[data-align~="xs:top"] {
align-items: start;
}
.c-flex[data-align~="xs:base"] {
align-items: first baseline;
}
.c-flex[data-align~="xs:middle"] {
align-items: center;
}
.c-flex[data-align~="xs:bottom"] {
align-items: end;
}
}
/* ===========================================
* テーブル
* ======================================== */
.c-table tr:last-child th, .c-table tr:last-child td {
border-bottom: solid 1px #555;
}
@media screen and (max-width: 768px) {
.c-table tr:last-child th, .c-table tr:last-child td {
display: block;
float: left;
clear: both;
width: 100%;
}
}
.c-table th, .c-table td {
vertical-align: middle;
border-top: solid 1px #555;
font-size: 15px;
letter-spacing: var(--ls-default);
line-height: var(--lh-default);
}
.c-table th {
font-weight: 600;
background-color: var(--c-gray--light);
min-width: 182px;
padding: 20px 16px;
}
.c-table td {
padding: 20px;
}
@media screen and (max-width: 768px) {
.c-table {
display: block;
width: 100%;
}
.c-table tr {
display: flex;
flex-direction: column;
width: 100%;
}
.c-table tr:last-child th {
border-bottom: none;
}
.c-table th {
padding: 12px;
}
.c-table td {
padding: 12px;
border-top: none;
}
}
/* ===========================================
* リスト
* ======================================== */
.c-list {
list-style: disc;
padding-left: 1.2em;
}
.c-list > li {
font-size: 15px;
font-weight: 400;
letter-spacing: 0;
line-height: 2;
}
/* ===========================================
* 順序付きリスト
* ======================================== */
.c-order-list {
list-style: decimal;
padding-left: 1em;
}
.c-order-list > li {
font-size: 15px;
font-weight: 400;
letter-spacing: 0;
line-height: 2;
}
/* ===========================================
* データリスト
* ======================================== */
.c-data-list:not(.-vertical) .c-data-list__item {
display: grid;
grid-template-columns: 112px 1fr;
gap: 8px 30px;
}
@media screen and (max-width: 768px) {
.c-data-list:not(.-vertical) .c-data-list__item {
grid-template-columns: 1fr;
}
}
.c-data-list:not(.-vertical) .c-data-list__item:not(:last-child) {
padding-bottom: 20px;
}
.c-data-list:not(.-vertical) .c-data-list__item + .c-data-list__item {
margin-top: 20px;
}
.c-data-list:not(.-vertical).-dt-lg .c-data-list__item {
grid-template-columns: 150px 1fr;
}
@media screen and (max-width: 768px) {
.c-data-list:not(.-vertical).-dt-lg .c-data-list__item {
grid-template-columns: 1fr;
}
}
.c-data-list.-vertical .c-data-list__item:not(:last-child) {
padding-bottom: clamp(1rem, 0.625rem + 1.5vw, 1.75rem);
}
.c-data-list.-vertical .c-data-list__item + .c-data-list__item {
margin-top: clamp(1.25rem, 0.875rem + 1.5vw, 2rem);
}
.c-data-list.-vertical .c-data-list__item dt + dd {
margin-top: 8px;
}
.c-data-list__item {
position: relative;
}
.c-data-list__item:not(:last-child)::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
display: block;
width: 100%;
height: 2px;
background: var(--c-main-gradient);
border-radius: calc(infinity * 1px);
}
.c-data-list__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
@media screen and (max-width: 768px) {
.c-data-list__grid {
grid-template-columns: 1fr;
}
}
/* ===========================================
* ボーター囲み
* ======================================== */
.c-box {
border: solid 1px rgba(85, 85, 85, 0.6);
padding: 15px 20px;
max-width: -moz-fit-content;
max-width: fit-content;
}
/* ===========================================
* お知らせ一覧 各記事
* ======================================== */
.p-news-item__link {
display: grid;
grid-template-columns: auto 1fr;
align-items: baseline;
gap: 8px 20px;
transition: color var(--anime-duration), border-color var(--anime-duration);
}
.p-news-item__link:hover {
color: var(--c-main);
border-color: var(--c-main);
}
@media screen and (max-width: 1024px) {
.p-news-item__link {
grid-template-columns: 1fr;
}
}
.p-news-item-meta {
display: grid;
grid-template-columns: 75px auto;
align-items: center;
gap: 20px;
}
@media screen and (max-width: 1024px) {
.p-news-item-meta {
gap: 8px;
}
}
.p-news-item-meta__date {
font-size: var(--fz-default);
font-weight: 400;
line-height: var(--lh-default);
letter-spacing: 0;
}
@media screen and (max-width: 1024px) {
.p-news-item-meta__date {
font-size: var(--fz-sm);
}
}
.p-news-item-meta__cat {
font-size: var(--fz-sm);
font-weight: 400;
line-height: 1;
letter-spacing: 0;
border: solid 1px;
border-radius: calc(infinity * 1px);
width: -moz-fit-content;
width: fit-content;
min-width: 85px;
text-align: center;
padding: 4px;
}
@media screen and (max-width: 1024px) {
.p-news-item-meta__cat {
min-width: 75px;
font-size: var(--fz-xs);
}
}
.p-news-item__heading {
font-size: var(--fz-default);
font-weight: 400;
line-height: var(--lh-xs);
letter-spacing: 0;
display: flex;
align-items: center;
gap: 16px;
}
.p-news-item__heading::after {
content: "";
display: block;
background: var(--c-main-gradient);
width: 20px;
height: 9px;
clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
flex-shrink: 0;
margin-top: 4px;
}
/* ===========================================
* バナーセクション
* ======================================== */
.p-bnr {
margin-top: clamp(2rem, -0.125rem + 8.5vw, 6.25rem);
}
.p-bnr-item {
width: 100%;
max-width: 1200px;
aspect-ratio: 240/43;
margin-inline: auto;
border-radius: 10px;
overflow: hidden;
}
@media screen and (max-width: 1024px) {
.p-bnr-item {
aspect-ratio: auto;
}
}
.p-bnr-item + .p-bnr-item {
margin-top: 100px;
}
.p-bnr-item__link {
display: grid;
place-content: center;
height: 100%;
position: relative;
padding: 50px 100px 50px 50px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: opacity var(--anime-duration);
}
.-recruit .p-bnr-item__link {
background-image: url(../images/common/bg_bnr-recruit.png);
}
.-contact .p-bnr-item__link {
background-image: url(../images/common/bg_bnr-contact.png);
}
.p-bnr-item__link:hover {
opacity: 0.6;
}
@media screen and (max-width: 1024px) {
.p-bnr-item__link {
padding: 24px 60px 24px 24px;
min-height: 100px;
}
}
.p-bnr-item__link::after {
content: "";
display: block;
position: absolute;
right: 40px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
background-size: contain;
background-repeat: no-repeat;
width: 46px;
aspect-ratio: 1;
}
@media screen and (max-width: 1024px) {
.p-bnr-item__link::after {
width: 32px;
right: 16px;
}
}
.-recruit .p-bnr-item__link::after {
background-image: url('data:image/svg+xml,');
}
.-contact .p-bnr-item__link::after {
background-image: url('data:image/svg+xml,');
}
.-contact .p-bnr-item__link {
grid-template-columns: auto auto;
place-content: center start;
align-items: center;
gap: 8px 40px;
}
@media screen and (max-width: 1024px) {
.-contact .p-bnr-item__link {
grid-template-columns: 1fr;
}
}
.p-bnr-item__label {
font-size: clamp(1.125rem, 0.438rem + 2.75vw, 2.5rem);
font-weight: 700;
line-height: var(--lh-xs);
letter-spacing: 0.2em;
color: var(--c-white);
}
.p-bnr-item__label.-ls-0 {
letter-spacing: 0;
}
.p-bnr-item__txt {
max-width: 390px;
font-size: clamp(0.875rem, 0.813rem + 0.25vw, 1rem);
font-weight: 500;
line-height: 1.75;
letter-spacing: 0;
color: var(--c-white);
}
/* ===========================================
* ページトップへもどるボタン
* ======================================== */
.p-page-top {
position: fixed;
bottom: 60px;
right: 100px;
transition: opacity var(--anime-duration);
z-index: var(--z-go-top);
}
@media screen and (max-width: 1024px) {
.p-page-top {
bottom: 20px;
right: 20px;
}
}
.p-page-top__link {
display: grid;
place-content: center;
aspect-ratio: 1;
width: 46px;
background-color: var(--c-white);
border: solid 1px var(--c-main);
border-radius: 50%;
transition: opacity var(--anime-duration);
}
.p-page-top__link:hover {
opacity: 0.8;
}
.p-page-top__link::before {
content: "";
display: block;
background: var(--c-main);
width: 10px;
height: 21px;
margin-bottom: 4px;
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
/* ===========================================
* 各ページイントロ
* ======================================== */
.p-page-intro__catch {
font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
font-weight: 700;
letter-spacing: 0;
line-height: var(--lh-xs);
color: var(--c-main);
}
.p-page-intro {
padding: 45px 0;
position: relative;
}
.p-page-intro::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100vw;
height: 1px;
margin: 0 calc(50% - 50vw);
background: var(--c-main-gradient);
}
/* ===========================================
* お問い合わせフォーム
* ======================================== */
.p-contact-form__block {
padding-bottom: clamp(2rem, 1.438rem + 2.25vw, 3.125rem);
padding-top: clamp(2rem, 1.438rem + 2.25vw, 3.125rem);
position: relative;
display: grid;
grid-template-columns: 260px 1fr;
gap: 8px 20px;
}
@media screen and (max-width: 1024px) {
.p-contact-form__block {
grid-template-columns: 1fr;
}
}
.p-contact-form__block:not(:last-child)::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 1px;
background: var(--c-main-gradient);
}
.p-contact-form__label {
font-size: clamp(1.125rem, 1.063rem + 0.25vw, 1.25rem);
font-weight: 500;
letter-spacing: 0;
line-height: var(--lh-sm);
display: flex;
align-items: center;
gap: 8px;
}
.p-contact-form__label.is-required::after {
display: block;
flex-shrink: 0;
content: "★"/"必須項目";
font-size: 12px;
font-weight: 600;
color: var(--c-note);
}
/* form部品
---------------------------------------------- */
.c-form-input,
.c-form-textarea,
.c-form-select {
/* ▼標準の見た目をリセット */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
/* ▼基本のスタイル */
display: block;
max-width: 600px;
width: 100%;
padding: 12px;
border: 1px solid var(--c-gray--dark);
border-radius: 4px;
background-color: var(--c-white);
color: var(--c-font);
font-family: inherit; /* bodyのフォントを継承 */
font-size: 15px;
line-height: var(--lh-sm);
transition: border-color 0.3s, box-shadow 0.3s;
/* ▼paddingとborderを含めてwidth:100%にするための必須設定 */
box-sizing: border-box;
}
/* --- 2-1. select要素の個別調整 --- */
.c-form-select {
/* ▼独自の矢印を追加 */
background-image: url('data:image/svg+xml;charset=utf-8,');
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px 16px;
padding-right: 40px; /* 矢印と文字が被らないように余白を確保 */
}
/* --- 2-2. radio要素の個別調整 --- */
.c-form-radio {
display: flex;
flex-direction: column;
}
.c-form-radio > label {
font-size: 16px;
font-weight: 400;
letter-spacing: 0;
line-height: var(--lh-sm);
display: grid;
grid-template-columns: auto 1fr;
gap: 8px;
}
.c-form-radio > label + label {
margin-top: 8px;
}
.c-form-radio input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
width: 24px;
height: 24px;
aspect-ratio: 1;
border: 1px solid var(--c-gray--dark);
border-radius: 50%;
cursor: pointer;
}
.c-form-radio input:checked::after {
content: "";
position: absolute;
inset: 0;
width: 14px;
height: 14px;
aspect-ratio: 1;
margin: auto;
border-radius: 50%;
background: var(--c-main-gradient);
}
/* --- 3. textareaの個別調整 --- */
.c-form-textarea {
resize: vertical; /* 垂直方向のみリサイズ可能にする */
min-height: 210px;
}
/* --- 4. フォーカス時のスタイル --- */
.c-form-input:focus,
.c-form-textarea:focus,
.c-form-select:focus {
outline: none; /* 標準の青い枠線を消す */
border-color: var(--c-main); /* 代わりの枠線色 */
box-shadow: 0 0 5px rgba(52, 152, 219, 0.5); /* ほのかに光る効果 */
}
/* --- 5. プレースホルダーのスタイル --- */
.c-form-input::-moz-placeholder, .c-form-textarea::-moz-placeholder {
color: #afafaf;
opacity: 1; /* Firefoxでの半透明化を防ぐ */
}
.c-form-input::placeholder,
.c-form-textarea::placeholder {
color: #afafaf;
opacity: 1; /* Firefoxでの半透明化を防ぐ */
}
/* --- 6. 無効化（disabled）時のスタイル --- */
.c-form-input:disabled,
.c-form-textarea:disabled,
.c-form-select:disabled {
background-color: #f1f1f1;
cursor: not-allowed;
opacity: 0.7;
}
/* --- エラーメッセージ --- */
.c-error-message {
display: block;
font-size: 15px;
font-weight: 400;
letter-spacing: 0;
line-height: var(--lh-sm);
color: var(--c-note);
margin-top: 8px;
}
/* ===========================================
* トップページ
* ======================================== */
/* パーツ
---------------------------------------------- */
/*---------- 見出し - h2 ----------*/
.pg-hm-heading-lv2 {
position: relative;
padding-bottom: clamp(1.875rem, 1.406rem + 1.88vw, 2.813rem);
}
.pg-hm-heading-lv2::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100vw;
height: 1px;
margin: 0 calc(50% - 50vw);
background: var(--c-main-gradient);
}
.pg-hm-heading-lv2__en {
display: block;
max-width: -moz-fit-content;
max-width: fit-content;
font-family: var(--ff-en);
font-size: clamp(2.25rem, 1.969rem + 1.13vw, 2.813rem);
font-weight: 400;
line-height: 1;
letter-spacing: var(--ls-lg);
background: var(--c-main-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding-bottom: 8px;
margin-inline: auto;
position: relative;
}
.pg-hm-heading-lv2__en::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 93%;
height: 2px;
background: var(--c-main-gradient);
-webkit-mask-image: radial-gradient(circle, black 1px, transparent 1px);
mask-image: radial-gradient(circle, black 1px, transparent 1px);
-webkit-mask-repeat: repeat-x;
mask-repeat: repeat-x;
-webkit-mask-size: 4px 2px;
mask-size: 4px 2px;
}
.pg-hm-heading-lv2__main {
font-size: var(--fz-sm);
font-weight: 500;
line-height: 1;
letter-spacing: 0;
color: var(--c-main);
text-align: center;
margin-top: 4px;
}
/*---------- 見出し - h3 ----------*/
.pg-hm-heading-lv3 {
font-size: clamp(1.25rem, 1.125rem + 0.5vw, 1.5rem);
font-weight: 700;
line-height: var(--lh-xs);
letter-spacing: 0;
color: var(--c-main);
text-align: center;
}
/*---------- ボタン ----------*/
.pg-hm-btn {
display: block;
width: -moz-fit-content;
width: fit-content;
max-width: 100%;
min-width: 120px;
}
.pg-hm-btn__link {
font-size: var(--fz-sm);
font-weight: 400;
line-height: var(--lh-xs);
letter-spacing: 0;
color: var(--c-white);
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 2px 8px;
border-radius: calc(infinity * 1px);
background: var(--c-main-gradient--hover);
background-position: 0 50%;
background-size: 200% auto;
transition: background-position var(--anime-duration) ease-in-out;
}
.pg-hm-btn__link:hover {
background-position: 100% 50%;
}
.pg-hm-btn__link::after {
content: "";
display: block;
background: var(--c-white);
width: 20px;
height: 9px;
clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}
.pg-hm-btn.-lg {
min-width: 182px;
}
.pg-hm-btn.-lg .pg-hm-btn__link {
font-size: clamp(1.125rem, 1.063rem + 0.25vw, 1.25rem);
justify-content: space-between;
padding: 8px 18px;
}
/* MV
---------------------------------------------- */
.pg-hm-mv-slider-list-item__pic {
display: block;
width: 100%;
height: 100%;
}
.pg-hm-mv-slider-list-item__pic > img {
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
width: 100%;
height: 100%;
}
/* スライドショー ページネーション */
.pg-hm-mv-slider__pagination {
bottom: 20px;
gap: 4px;
}
.pg-hm-mv-slider__pagination .splide__pagination {
pointer-events: all;
}
.pg-hm-mv-slider__page {
position: relative;
inset: 0;
display: block;
width: 12px;
aspect-ratio: 1;
background-color: var(--c-white);
border-radius: 50%;
padding: 0;
}
.pg-hm-mv-slider__page.is-active {
background-color: var(--c-main);
}
/* お知らせ
---------------------------------------------- */
.pg-hm-news {
margin-top: clamp(3.5rem, 2.75rem + 3vw, 5rem);
}
.pg-hm-news__content {
max-width: 584px;
margin-inline: auto;
margin-top: 50px;
}
.pg-hm-news-list-item + .pg-hm-news-list-item {
margin-top: 24px;
}
.pg-hm-news__btn {
margin-top: clamp(2.5rem, 1.563rem + 3.75vw, 4.375rem);
margin-inline: auto;
}
/* サービス
---------------------------------------------- */
.pg-hm-service {
margin-top: clamp(4.5rem, 3.625rem + 3.5vw, 6.25rem);
padding: 50px 0 70px;
background: var(--c-bg-gradient);
}
.pg-hm-service__content {
margin-top: 45px;
}
.pg-hm-service__stack + .pg-hm-service__stack {
margin-top: 50px;
padding-top: 40px;
position: relative;
}
.pg-hm-service__stack + .pg-hm-service__stack::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 2px;
margin: 0 calc(50% - 50vw);
background: var(--c-gray);
-webkit-mask-image: radial-gradient(circle, black 1px, transparent 1px);
mask-image: radial-gradient(circle, black 1px, transparent 1px);
-webkit-mask-repeat: repeat-x;
mask-repeat: repeat-x;
-webkit-mask-size: 4px 2px;
mask-size: 4px 2px;
}
.pg-hm-service__intro {
font-size: clamp(0.938rem, 0.906rem + 0.13vw, 1rem);
font-weight: 400;
line-height: var(--lh-xs);
letter-spacing: 0;
text-align: center;
margin-top: 4px;
}
.pg-hm-service__body {
margin-top: 30px;
}
.pg-hm-service__body.-col2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 56px 100px;
}
.pg-hm-service-item.-col2 {
max-width: 950px;
margin-inline: auto;
display: flex;
align-items: center;
gap: 0 50px;
}
@media screen and (max-width: 1024px) {
.pg-hm-service-item.-col2 {
flex-direction: column;
}
}
.pg-hm-service-item__link {
flex-shrink: 0;
transition: opacity var(--anime-duration);
}
.pg-hm-service-item__link:hover {
opacity: 0.8;
}
.pg-hm-service-item__pic {
display: block;
width: 100%;
max-width: 550px;
}
.pg-hm-service-item__pic > img {
border-radius: 20px;
}
.pg-hm-service-item__body {
margin-top: clamp(1rem, 0.562rem + 1.75vw, 1.875rem);
}
.pg-hm-service-item__heading {
font-size: clamp(1rem, 0.938rem + 0.25vw, 1.125rem);
font-weight: 700;
line-height: var(--lh-xs);
letter-spacing: 0;
}
.pg-hm-service-item__heading + .pg-hm-service-item__txt {
margin-top: 4px;
}
.pg-hm-service-item__btn {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
/* 開発事例
---------------------------------------------- */
.pg-hm-works {
margin-top: clamp(3.75rem, 3.125rem + 2.5vw, 5rem);
}
.pg-hm-works__content {
margin-top: clamp(2rem, 1.438rem + 2.25vw, 3.125rem);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 60px;
}
.pg-hm-works-item {
display: flex;
flex-direction: column;
}
.pg-hm-works-item__link {
transition: opacity var(--anime-duration);
}
.pg-hm-works-item__link:hover {
opacity: 0.6;
}
.pg-hm-works-item__pic {
display: block;
width: 100%;
max-width: 360px;
margin-inline: auto;
}
.pg-hm-works-item__pic > img {
border-radius: 20px;
}
.pg-hm-works-item__body {
margin-top: clamp(1.563rem, 1.25rem + 1.25vw, 2.188rem);
width: 100%;
margin-inline: auto;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.pg-hm-works-item__heading {
font-size: clamp(1rem, 0.938rem + 0.25vw, 1.125rem);
font-weight: 700;
line-height: var(--lh-xs);
letter-spacing: 0;
}
.pg-hm-works-item__txt {
margin-top: 4px;
flex-grow: 1;
}
.pg-hm-works-item__btn {
margin-top: 25px;
}
/* 会社案内
---------------------------------------------- */
.pg-hm-company {
margin-top: clamp(4.5rem, 3.625rem + 3.5vw, 6.25rem);
padding: 50px 0 70px;
background: var(--c-bg-gradient);
}
.pg-hm-company__content {
margin-top: clamp(2rem, 1.438rem + 2.25vw, 3.125rem);
display: grid;
grid-template-columns: 50% 1fr;
align-items: center;
gap: 32px 70px;
}
@media screen and (max-width: 1024px) {
.pg-hm-company__content {
grid-template-columns: 1fr;
}
}
.pg-hm-company__pic {
display: block;
width: 100%;
max-width: 600px;
}
.pg-hm-company__pic > img {
border-radius: 20px;
}
@media screen and (max-width: 1024px) {
.pg-hm-company__pic {
margin-inline: auto;
}
}
.pg-hm-company__btn-wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px 30px;
margin-top: 35px;
}
/* ===========================================
* お知らせ
* ======================================== */
.pg-news-list-item {
position: relative;
width: 100%;
}
.pg-news-list-item::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 1px;
background: var(--c-main-gradient);
}
.pg-news-list-item .p-news-item__link {
padding-top: clamp(1.25rem, 0.625rem + 2.5vw, 2.5rem);
padding-bottom: clamp(1.75rem, 1.375rem + 1.5vw, 2.5rem);
}
/* ===========================================
* お知らせ詳細
* ======================================== */
.pg-news-detail__content {
padding-top: clamp(1.25rem, 0.625rem + 2.5vw, 2.5rem);
}
.pg-news-detail-meta {
display: grid;
grid-template-columns: 75px auto;
align-items: center;
gap: 20px;
}
@media screen and (max-width: 1024px) {
.pg-news-detail-meta {
gap: 8px;
}
}
.pg-news-detail-meta__date {
font-size: var(--fz-default);
font-weight: 400;
line-height: var(--lh-default);
letter-spacing: 0;
}
@media screen and (max-width: 1024px) {
.pg-news-detail-meta__date {
font-size: var(--fz-sm);
}
}
.pg-news-detail-meta__cat {
font-size: var(--fz-sm);
font-weight: 400;
line-height: 1;
letter-spacing: 0;
border: solid 1px;
border-radius: calc(infinity * 1px);
width: -moz-fit-content;
width: fit-content;
min-width: 85px;
text-align: center;
padding: 4px;
}
@media screen and (max-width: 1024px) {
.pg-news-detail-meta__cat {
min-width: 75px;
font-size: var(--fz-xs);
}
}
.pg-news-detail__heading {
font-size: clamp(1.125rem, 1.063rem + 0.25vw, 1.25rem);
font-weight: 700;
letter-spacing: 0;
line-height: var(--lh-sm);
margin-top: 16px;
}
.pg-news-detail__body {
margin-top: 20px;
}
.pg-news-detail__btn {
margin-top: clamp(5rem, 1.25rem + 15vw, 12.5rem);
}
/* ===========================================
* サービス
* ======================================== */
/* 共通パーツ
---------------------------------------------- */
/*---------- 見出し - h2 ----------*/
.pg-service-heading-lv2 {
position: relative;
max-width: -moz-fit-content;
max-width: fit-content;
margin-inline: auto;
padding: 0 clamp(1.25rem, 1.063rem + 0.75vw, 1.625rem);
display: flex;
flex-direction: column;
justify-content: center;
gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
}
.pg-service-heading-lv2::before, .pg-service-heading-lv2::after {
content: "";
display: block;
position: absolute;
top: 0;
width: 6px;
height: 100%;
background: var(--c-main-gradient--to-bottom);
}
.pg-service-heading-lv2::before {
left: 0;
}
.pg-service-heading-lv2::after {
right: 0;
}
.pg-service-heading-lv2__main {
font-family: var(--ff-m-plus);
font-size: clamp(1.5rem, 1.375rem + 0.5vw, 1.75rem);
font-weight: 500;
letter-spacing: 0;
line-height: var(--lh-xs);
text-align: center;
color: var(--c-main);
}
.-ls-lg .pg-service-heading-lv2__main {
letter-spacing: 0.5em;
}
/*---------- 見出し - h3 ----------*/
.pg-service-heading-lv3 {
font-size: clamp(1.25rem, 1.156rem + 0.38vw, 1.438rem);
font-weight: 700;
letter-spacing: var(--ls-default);
list-style: var(--lh-xs);
color: var(--c-main);
}
.pg-service-heading-lv3.-black {
color: var(--c-font);
}
/*---------- 通常リスト ----------*/
.pg-service-list__item {
font-size: var(--fz-default);
font-weight: 500;
line-height: var(--lh-sm);
letter-spacing: var(--ls-default);
color: var(--c-main);
display: grid;
grid-template-columns: 27px 1fr;
gap: 10px;
align-items: start;
}
.-black .pg-service-list__item {
color: var(--c-font);
}
.pg-service-list__item::before {
content: "";
display: block;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
width: 27px;
aspect-ratio: 1;
}
.pg-service-list__item + .pg-service-list__item {
margin-top: 8px;
}
/*---------- 番号リスト ----------*/
.pg-service-order-list {
max-width: -moz-fit-content;
max-width: fit-content;
margin-inline: auto;
}
.pg-service-order-list-item {
font-size: clamp(1.25rem, 1.156rem + 0.38vw, 1.438rem);
font-weight: 700;
letter-spacing: var(--ls-default);
list-style: var(--lh-xs);
display: grid;
grid-template-columns: 64px 1fr;
gap: clamp(1rem, 0.875rem + 0.5vw, 1.25rem);
align-items: center;
}
@media screen and (max-width: 768px) {
.pg-service-order-list-item {
grid-template-columns: 40px 1fr;
}
}
.pg-service-order-list-item + .pg-service-order-list-item {
margin-top: clamp(0.25rem, -0.25rem + 2vw, 1.25rem);
}
.pg-service-order-list-item > svg {
display: block;
max-width: 64px;
}
@media screen and (max-width: 768px) {
.pg-service-order-list-item > svg {
max-width: 40px;
}
}
/*---------- 白背景囲み ----------*/
.pg-service-white-wrap {
background-color: var(--c-white);
border-radius: 30px;
padding: 20px 0;
}
.pg-service-white-wrap__inner {
padding: 0 20px;
}
/*---------- ボーダー囲み ----------*/
.pg-service-border-wrap {
padding: 2px;
border-radius: 30px;
background: var(--c-main-gradient);
}
@media screen and (max-width: 768px) {
.pg-service-border-wrap {
max-width: -moz-fit-content;
max-width: fit-content;
margin-inline: auto;
}
}
.pg-service-border-wrap__content {
background-color: var(--c-white);
border-radius: 28px;
padding: 20px 0;
}
.-pd-lg .pg-service-border-wrap__content {
padding: 40px 0;
}
/*---------- セクション ----------*/
.pg-service-section + .pg-service-section {
margin-top: clamp(3.75rem, 2.5rem + 5vw, 6.25rem);
}
.pg-service-section.-bg {
padding-top: clamp(3.75rem, 2.5rem + 5vw, 6.25rem);
padding-bottom: clamp(3.75rem, 2.5rem + 5vw, 6.25rem);
background: var(--c-bg-gradient);
}
/*---------- 機能詳細説明 ----------*/
.pg-service-func-detail {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
@media screen and (max-width: 768px) {
.pg-service-func-detail {
grid-template-columns: 1fr;
}
}
.pg-service-func-detail.-col2 {
grid-template-columns: repeat(2, 1fr);
}
@media screen and (max-width: 768px) {
.pg-service-func-detail.-col2 {
grid-template-columns: 1fr;
}
}
.pg-service-func-detail.-col3 {
grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 768px) {
.pg-service-func-detail.-col3 {
grid-template-columns: 1fr;
}
}
.pg-service-func-detail-item {
padding: 30px 16px;
position: relative;
}
.pg-service-func-detail-item:not(:last-child)::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 100%;
background: var(--c-gray);
-webkit-mask-image: radial-gradient(circle, black 1px, transparent 1px);
mask-image: radial-gradient(circle, black 1px, transparent 1px);
-webkit-mask-repeat: repeat-y;
mask-repeat: repeat-y;
-webkit-mask-size: 2px 4px;
mask-size: 2px 4px;
}
@media screen and (max-width: 768px) {
.pg-service-func-detail-item:not(:last-child)::after {
top: auto;
right: auto;
bottom: 0;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
width: 95%;
height: 2px;
-webkit-mask-repeat: repeat-x;
mask-repeat: repeat-x;
-webkit-mask-size: 4px 2px;
mask-size: 4px 2px;
}
}
@media not screen and (max-width: 768px) {
.-col2 .pg-service-func-detail-item::after {
content: none;
}
.-col2 .pg-service-func-detail-item:nth-child(odd)::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 100%;
background: var(--c-gray);
-webkit-mask-image: radial-gradient(circle, black 1px, transparent 1px);
mask-image: radial-gradient(circle, black 1px, transparent 1px);
-webkit-mask-repeat: repeat-y;
mask-repeat: repeat-y;
-webkit-mask-size: 2px 4px;
mask-size: 2px 4px;
}
.-col2 .pg-service-func-detail-item:not(:nth-child(-n+2))::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: var(--c-gray);
-webkit-mask-image: radial-gradient(circle, black 1px, transparent 1px);
mask-image: radial-gradient(circle, black 1px, transparent 1px);
-webkit-mask-repeat: repeat-x;
mask-repeat: repeat-x;
-webkit-mask-size: 4px 2px;
mask-size: 4px 2px;
}
.-col3 .pg-service-func-detail-item::after {
content: none;
}
.-col3 .pg-service-func-detail-item:not(:nth-child(3n))::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 100%;
background: var(--c-gray);
-webkit-mask-image: radial-gradient(circle, black 1px, transparent 1px);
mask-image: radial-gradient(circle, black 1px, transparent 1px);
-webkit-mask-repeat: repeat-y;
mask-repeat: repeat-y;
-webkit-mask-size: 2px 4px;
mask-size: 2px 4px;
}
.-col3 .pg-service-func-detail-item:not(:nth-child(-n+3))::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: var(--c-gray);
-webkit-mask-image: radial-gradient(circle, black 1px, transparent 1px);
mask-image: radial-gradient(circle, black 1px, transparent 1px);
-webkit-mask-repeat: repeat-x;
mask-repeat: repeat-x;
-webkit-mask-size: 4px 2px;
mask-size: 4px 2px;
}
}
.pg-service-func-detail-item__icon {
display: block;
max-width: 80px;
margin-inline: auto;
}
.pg-service-func-detail-item__heading {
margin-top: 20px;
font-size: clamp(1.125rem, 0.969rem + 0.63vw, 1.438rem);
font-weight: 700;
letter-spacing: var(--ls-default);
line-height: var(--lh-xs);
text-align: center;
margin-bottom: 20px;
}
.pg-service-func-detail-item__heading + .c-txt {
padding: 0 14px;
}
.pg-service-func-detail-item__sup {
color: var(--c-main);
border: solid 1px var(--c-main);
text-align: center;
line-height: 1.5;
max-width: 220px;
margin-inline: auto;
border-radius: 7px;
margin-top: 8px;
padding: 8px;
}
/* ページヘッダー
---------------------------------------------- */
.pg-service-page-header__pic {
display: block;
}
.pg-service-page-header__pic > img {
width: 100%;
height: auto;
}
/* イントロ
---------------------------------------------- */
.pg-service-intro {
margin-top: -90px;
position: relative;
z-index: 1;
}
.pg-service-intro__content {
background-color: var(--c-white);
border-radius: 30px;
padding: 40px 50px 0;
}
@media screen and (max-width: 1024px) {
.pg-service-intro__content {
padding: 28px 20px 0;
}
}
.pg-service-intro__content-inner {
max-width: 800px;
margin-inline: auto;
}
.pg-service-intro__heading {
font-family: var(--ff-m-plus);
font-size: clamp(1.25rem, 0.812rem + 1.75vw, 2.125rem);
font-weight: 500;
letter-spacing: 0;
line-height: var(--lh-sm);
text-align: center;
color: var(--c-main);
}
/* 主な機能
---------------------------------------------- */
.pg-service-main-func__content {
margin-top: 40px;
}
.pg-service-main-func-item {
padding-bottom: 30px;
position: relative;
}
.pg-service-main-func-item::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: var(--c-gray);
-webkit-mask-image: radial-gradient(circle, black 1px, transparent 1px);
mask-image: radial-gradient(circle, black 1px, transparent 1px);
-webkit-mask-repeat: repeat-x;
mask-repeat: repeat-x;
-webkit-mask-size: 4px 2px;
mask-size: 4px 2px;
}
.-col2 .pg-service-main-func-item {
display: grid;
grid-template-columns: 50% 1fr;
gap: 20px;
align-items: center;
}
.-col2 .pg-service-main-func-item .c-txt {
max-width: 400px;
}
@media screen and (max-width: 768px) {
.-col2 .pg-service-main-func-item {
grid-template-columns: 1fr;
}
.-col2 .pg-service-main-func-item .c-txt {
max-width: none;
}
}
.pg-service-main-func-item + .pg-service-main-func-item {
margin-top: 30px;
}
.pg-service-main-func-item__body {
margin-top: clamp(1rem, 0.75rem + 1vw, 1.5rem);
display: grid;
grid-template-columns: 36% 1fr auto;
gap: 20px 40px;
}
@media screen and (max-width: 1024px) {
.pg-service-main-func-item__body {
grid-template-columns: 1fr;
}
}
.pg-service-main-func-btn__link {
display: flex;
align-items: center;
gap: 8px;
}
.pg-service-main-func-btn__link::after {
content: "";
display: block;
background: var(--c-main-gradient);
width: 28px;
height: 12px;
clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
flex-shrink: 0;
margin-top: 4px;
}
.pg-service-main-func-btn__link:hover > .pg-service-main-func-btn__body {
color: var(--c-white);
}
.pg-service-main-func-btn__link:hover > .pg-service-main-func-btn__body::after {
opacity: 1;
}
@media screen and (max-width: 1024px) {
.pg-service-main-func-btn__link {
justify-content: center;
}
}
.pg-service-main-func-btn__body {
font-size: var(--fz-sm);
font-weight: 400;
letter-spacing: 0;
line-height: var(--lh-xs);
text-align: center;
width: 85px;
aspect-ratio: 1;
flex-shrink: 0;
display: grid;
place-content: center;
border: 1px solid;
-o-border-image: var(--c-main-gradient);
border-image: var(--c-main-gradient);
border-image-slice: 1;
background-color: transparent;
transition: color var(--anime-duration);
position: relative;
}
.pg-service-main-func-btn__body::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: var(--c-main-gradient);
z-index: -1;
opacity: 0;
transition: opacity var(--anime-duration);
}
/* 導入事例
---------------------------------------------- */
.pg-service-case-item {
display: flex;
align-items: center;
gap: 24px 50px;
}
.pg-service-case-item:nth-child(even) {
flex-direction: row-reverse;
}
@media screen and (max-width: 768px) {
.pg-service-case-item:nth-child(even) {
flex-direction: column;
}
}
@media screen and (max-width: 768px) {
.pg-service-case-item {
flex-direction: column;
}
}
.pg-service-case-item + .pg-service-case-item {
margin-top: clamp(2rem, 0.813rem + 4.75vw, 4.375rem);
}
.pg-service-case-item__pic {
display: block;
max-width: 475px;
width: 100%;
flex-shrink: 0;
}
.pg-service-case-item__pic > img {
border-radius: 20px;
}
.pg-service-case-item__heading {
font-size: clamp(1.125rem, 1.063rem + 0.25vw, 1.25rem);
font-weight: 700;
letter-spacing: 0;
line-height: var(--lh-xs);
color: var(--c-main);
}
.pg-service-case-item__overview {
background-color: rgba(var(--c-main-rgb), 0.15);
border-radius: calc(infinity * 1px);
padding: 8px 24px;
margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.pg-service-case-item__body {
margin-top: 24px;
}
.pg-service-case-item-detail + .pg-service-case-item-detail {
margin-top: 20px;
}
.pg-service-case-item-detail__heading {
font-size: 18px;
font-weight: 700;
letter-spacing: 0;
line-height: var(--lh-sm);
}
.pg-service-case-item-detail__content {
margin-top: 4px;
}
/* ===========================================
* 会社概要
* ======================================== */
/* ごあいさつ
---------------------------------------------- */
@media screen and (max-width: 1024px) {
.pg-company-name picture {
max-width: 50%;
}
}
/* 企業理念
---------------------------------------------- */
@media screen and (max-width: 1024px) {
.pg-company-philosophy__body {
flex-direction: column-reverse;
}
}
/* アクセス
---------------------------------------------- */
.pg-company-map {
margin-top: clamp(1.25rem, 0.938rem + 1.25vw, 1.875rem);
}
.pg-company-map > iframe {
width: 100%;
aspect-ratio: 421/180;
}
@media screen and (max-width: 1024px) {
.pg-company-map > iframe {
aspect-ratio: 1;
}
}
/* ===========================================
* 海貨用語集
* ======================================== */
.pg-glossary .c-section + .c-section {
margin-top: clamp(3.25rem, 2.688rem + 2.25vw, 4.375rem);
}
/* ページ内リンク
---------------------------------------------- */
.pg-glossary-en-list {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 16px;
}
.pg-glossary-en-list-item__link {
display: grid;
place-content: center;
font-family: var(--ff-en);
font-size: 24px;
font-weight: 400;
letter-spacing: 0;
line-height: 1;
color: var(--c-white);
width: 100%;
height: 100%;
background-color: var(--c-main);
width: 30px;
aspect-ratio: 1;
border-radius: 50%;
transition: opacity var(--anime-duration);
}
.pg-glossary-en-list-item__link:hover {
opacity: 0.6;
}
/* ワードリスト
---------------------------------------------- */
.pg-glossary__heading {
font-family: var(--ff-en);
font-size: clamp(3rem, 2.625rem + 1.5vw, 3.75rem);
font-weight: 400;
letter-spacing: 0;
line-height: 1;
color: var(--c-main);
border-bottom: solid 2px var(--c-main);
padding-bottom: 4px;
}
.pg-glossary-list {
border-bottom: solid 2px var(--c-main);
padding-bottom: clamp(1.5rem, 1.313rem + 0.75vw, 1.875rem);
margin-top: clamp(1.5rem, 1.313rem + 0.75vw, 1.875rem);
}
.pg-glossary-list-item + .pg-glossary-list-item {
margin-top: 24px;
}
.pg-glossary-list-item__heading {
font-size: clamp(1rem, 0.938rem + 0.25vw, 1.125rem);
font-weight: 700;
letter-spacing: 0;
line-height: var(--lh-sm);
color: var(--c-main);
}
.u-mt-xxs {
margin-top: var(--space-xxs) !important;
}
.u-mr-xxs {
margin-right: var(--space-xxs) !important;
}
.u-mb-xxs {
margin-bottom: var(--space-xxs) !important;
}
.u-ml-xxs {
margin-left: var(--space-xxs) !important;
}
.u-pt-xxs {
padding-top: var(--space-xxs) !important;
}
.u-pr-xxs {
padding-right: var(--space-xxs) !important;
}
.u-pb-xxs {
padding-bottom: var(--space-xxs) !important;
}
.u-pl-xxs {
padding-left: var(--space-xxs) !important;
}
.u-mt-xs {
margin-top: var(--space-xs) !important;
}
.u-mr-xs {
margin-right: var(--space-xs) !important;
}
.u-mb-xs {
margin-bottom: var(--space-xs) !important;
}
.u-ml-xs {
margin-left: var(--space-xs) !important;
}
.u-pt-xs {
padding-top: var(--space-xs) !important;
}
.u-pr-xs {
padding-right: var(--space-xs) !important;
}
.u-pb-xs {
padding-bottom: var(--space-xs) !important;
}
.u-pl-xs {
padding-left: var(--space-xs) !important;
}
.u-mt-sm {
margin-top: var(--space-sm) !important;
}
.u-mr-sm {
margin-right: var(--space-sm) !important;
}
.u-mb-sm {
margin-bottom: var(--space-sm) !important;
}
.u-ml-sm {
margin-left: var(--space-sm) !important;
}
.u-pt-sm {
padding-top: var(--space-sm) !important;
}
.u-pr-sm {
padding-right: var(--space-sm) !important;
}
.u-pb-sm {
padding-bottom: var(--space-sm) !important;
}
.u-pl-sm {
padding-left: var(--space-sm) !important;
}
.u-mt-md {
margin-top: var(--space-md) !important;
}
.u-mr-md {
margin-right: var(--space-md) !important;
}
.u-mb-md {
margin-bottom: var(--space-md) !important;
}
.u-ml-md {
margin-left: var(--space-md) !important;
}
.u-pt-md {
padding-top: var(--space-md) !important;
}
.u-pr-md {
padding-right: var(--space-md) !important;
}
.u-pb-md {
padding-bottom: var(--space-md) !important;
}
.u-pl-md {
padding-left: var(--space-md) !important;
}
.u-mt-lg {
margin-top: var(--space-lg) !important;
}
.u-mr-lg {
margin-right: var(--space-lg) !important;
}
.u-mb-lg {
margin-bottom: var(--space-lg) !important;
}
.u-ml-lg {
margin-left: var(--space-lg) !important;
}
.u-pt-lg {
padding-top: var(--space-lg) !important;
}
.u-pr-lg {
padding-right: var(--space-lg) !important;
}
.u-pb-lg {
padding-bottom: var(--space-lg) !important;
}
.u-pl-lg {
padding-left: var(--space-lg) !important;
}
.u-mt-xl {
margin-top: var(--space-xl) !important;
}
.u-mr-xl {
margin-right: var(--space-xl) !important;
}
.u-mb-xl {
margin-bottom: var(--space-xl) !important;
}
.u-ml-xl {
margin-left: var(--space-xl) !important;
}
.u-pt-xl {
padding-top: var(--space-xl) !important;
}
.u-pr-xl {
padding-right: var(--space-xl) !important;
}
.u-pb-xl {
padding-bottom: var(--space-xl) !important;
}
.u-pl-xl {
padding-left: var(--space-xl) !important;
}
.u-mt-xxl {
margin-top: var(--space-xxl) !important;
}
.u-mr-xxl {
margin-right: var(--space-xxl) !important;
}
.u-mb-xxl {
margin-bottom: var(--space-xxl) !important;
}
.u-ml-xxl {
margin-left: var(--space-xxl) !important;
}
.u-pt-xxl {
padding-top: var(--space-xxl) !important;
}
.u-pr-xxl {
padding-right: var(--space-xxl) !important;
}
.u-pb-xxl {
padding-bottom: var(--space-xxl) !important;
}
.u-pl-xxl {
padding-left: var(--space-xxl) !important;
}
.u-mt-0 {
margin-top: 0 !important;
}
.u-mr-0 {
margin-right: 0 !important;
}
.u-mb-0 {
margin-bottom: 0 !important;
}
.u-ml-0 {
margin-left: 0 !important;
}
.u-pt-0 {
padding-top: 0 !important;
}
.u-pr-0 {
padding-right: 0 !important;
}
.u-pb-0 {
padding-bottom: 0 !important;
}
.u-pl-0 {
padding-left: 0 !important;
}
@media (max-width: 1400px) {
.u-xl-mt-xxs {
margin-top: var(--space-xxs) !important;
}
.u-xl-mr-xxs {
margin-right: var(--space-xxs) !important;
}
.u-xl-mb-xxs {
margin-bottom: var(--space-xxs) !important;
}
.u-xl-ml-xxs {
margin-left: var(--space-xxs) !important;
}
.u-xl-pt-xxs {
padding-top: var(--space-xxs) !important;
}
.u-xl-pr-xxs {
padding-right: var(--space-xxs) !important;
}
.u-xl-pb-xxs {
padding-bottom: var(--space-xxs) !important;
}
.u-xl-pl-xxs {
padding-left: var(--space-xxs) !important;
}
.u-xl-mt-xs {
margin-top: var(--space-xs) !important;
}
.u-xl-mr-xs {
margin-right: var(--space-xs) !important;
}
.u-xl-mb-xs {
margin-bottom: var(--space-xs) !important;
}
.u-xl-ml-xs {
margin-left: var(--space-xs) !important;
}
.u-xl-pt-xs {
padding-top: var(--space-xs) !important;
}
.u-xl-pr-xs {
padding-right: var(--space-xs) !important;
}
.u-xl-pb-xs {
padding-bottom: var(--space-xs) !important;
}
.u-xl-pl-xs {
padding-left: var(--space-xs) !important;
}
.u-xl-mt-sm {
margin-top: var(--space-sm) !important;
}
.u-xl-mr-sm {
margin-right: var(--space-sm) !important;
}
.u-xl-mb-sm {
margin-bottom: var(--space-sm) !important;
}
.u-xl-ml-sm {
margin-left: var(--space-sm) !important;
}
.u-xl-pt-sm {
padding-top: var(--space-sm) !important;
}
.u-xl-pr-sm {
padding-right: var(--space-sm) !important;
}
.u-xl-pb-sm {
padding-bottom: var(--space-sm) !important;
}
.u-xl-pl-sm {
padding-left: var(--space-sm) !important;
}
.u-xl-mt-md {
margin-top: var(--space-md) !important;
}
.u-xl-mr-md {
margin-right: var(--space-md) !important;
}
.u-xl-mb-md {
margin-bottom: var(--space-md) !important;
}
.u-xl-ml-md {
margin-left: var(--space-md) !important;
}
.u-xl-pt-md {
padding-top: var(--space-md) !important;
}
.u-xl-pr-md {
padding-right: var(--space-md) !important;
}
.u-xl-pb-md {
padding-bottom: var(--space-md) !important;
}
.u-xl-pl-md {
padding-left: var(--space-md) !important;
}
.u-xl-mt-lg {
margin-top: var(--space-lg) !important;
}
.u-xl-mr-lg {
margin-right: var(--space-lg) !important;
}
.u-xl-mb-lg {
margin-bottom: var(--space-lg) !important;
}
.u-xl-ml-lg {
margin-left: var(--space-lg) !important;
}
.u-xl-pt-lg {
padding-top: var(--space-lg) !important;
}
.u-xl-pr-lg {
padding-right: var(--space-lg) !important;
}
.u-xl-pb-lg {
padding-bottom: var(--space-lg) !important;
}
.u-xl-pl-lg {
padding-left: var(--space-lg) !important;
}
.u-xl-mt-xl {
margin-top: var(--space-xl) !important;
}
.u-xl-mr-xl {
margin-right: var(--space-xl) !important;
}
.u-xl-mb-xl {
margin-bottom: var(--space-xl) !important;
}
.u-xl-ml-xl {
margin-left: var(--space-xl) !important;
}
.u-xl-pt-xl {
padding-top: var(--space-xl) !important;
}
.u-xl-pr-xl {
padding-right: var(--space-xl) !important;
}
.u-xl-pb-xl {
padding-bottom: var(--space-xl) !important;
}
.u-xl-pl-xl {
padding-left: var(--space-xl) !important;
}
.u-xl-mt-xxl {
margin-top: var(--space-xxl) !important;
}
.u-xl-mr-xxl {
margin-right: var(--space-xxl) !important;
}
.u-xl-mb-xxl {
margin-bottom: var(--space-xxl) !important;
}
.u-xl-ml-xxl {
margin-left: var(--space-xxl) !important;
}
.u-xl-pt-xxl {
padding-top: var(--space-xxl) !important;
}
.u-xl-pr-xxl {
padding-right: var(--space-xxl) !important;
}
.u-xl-pb-xxl {
padding-bottom: var(--space-xxl) !important;
}
.u-xl-pl-xxl {
padding-left: var(--space-xxl) !important;
}
.u-xl-mt-0 {
margin-top: 0 !important;
}
.u-xl-mr-0 {
margin-right: 0 !important;
}
.u-xl-mb-0 {
margin-bottom: 0 !important;
}
.u-xl-ml-0 {
margin-left: 0 !important;
}
.u-xl-pt-0 {
padding-top: 0 !important;
}
.u-xl-pr-0 {
padding-right: 0 !important;
}
.u-xl-pb-0 {
padding-bottom: 0 !important;
}
.u-xl-pl-0 {
padding-left: 0 !important;
}
}
@media (max-width: 1280px) {
.u-lg-mt-xxs {
margin-top: var(--space-xxs) !important;
}
.u-lg-mr-xxs {
margin-right: var(--space-xxs) !important;
}
.u-lg-mb-xxs {
margin-bottom: var(--space-xxs) !important;
}
.u-lg-ml-xxs {
margin-left: var(--space-xxs) !important;
}
.u-lg-pt-xxs {
padding-top: var(--space-xxs) !important;
}
.u-lg-pr-xxs {
padding-right: var(--space-xxs) !important;
}
.u-lg-pb-xxs {
padding-bottom: var(--space-xxs) !important;
}
.u-lg-pl-xxs {
padding-left: var(--space-xxs) !important;
}
.u-lg-mt-xs {
margin-top: var(--space-xs) !important;
}
.u-lg-mr-xs {
margin-right: var(--space-xs) !important;
}
.u-lg-mb-xs {
margin-bottom: var(--space-xs) !important;
}
.u-lg-ml-xs {
margin-left: var(--space-xs) !important;
}
.u-lg-pt-xs {
padding-top: var(--space-xs) !important;
}
.u-lg-pr-xs {
padding-right: var(--space-xs) !important;
}
.u-lg-pb-xs {
padding-bottom: var(--space-xs) !important;
}
.u-lg-pl-xs {
padding-left: var(--space-xs) !important;
}
.u-lg-mt-sm {
margin-top: var(--space-sm) !important;
}
.u-lg-mr-sm {
margin-right: var(--space-sm) !important;
}
.u-lg-mb-sm {
margin-bottom: var(--space-sm) !important;
}
.u-lg-ml-sm {
margin-left: var(--space-sm) !important;
}
.u-lg-pt-sm {
padding-top: var(--space-sm) !important;
}
.u-lg-pr-sm {
padding-right: var(--space-sm) !important;
}
.u-lg-pb-sm {
padding-bottom: var(--space-sm) !important;
}
.u-lg-pl-sm {
padding-left: var(--space-sm) !important;
}
.u-lg-mt-md {
margin-top: var(--space-md) !important;
}
.u-lg-mr-md {
margin-right: var(--space-md) !important;
}
.u-lg-mb-md {
margin-bottom: var(--space-md) !important;
}
.u-lg-ml-md {
margin-left: var(--space-md) !important;
}
.u-lg-pt-md {
padding-top: var(--space-md) !important;
}
.u-lg-pr-md {
padding-right: var(--space-md) !important;
}
.u-lg-pb-md {
padding-bottom: var(--space-md) !important;
}
.u-lg-pl-md {
padding-left: var(--space-md) !important;
}
.u-lg-mt-lg {
margin-top: var(--space-lg) !important;
}
.u-lg-mr-lg {
margin-right: var(--space-lg) !important;
}
.u-lg-mb-lg {
margin-bottom: var(--space-lg) !important;
}
.u-lg-ml-lg {
margin-left: var(--space-lg) !important;
}
.u-lg-pt-lg {
padding-top: var(--space-lg) !important;
}
.u-lg-pr-lg {
padding-right: var(--space-lg) !important;
}
.u-lg-pb-lg {
padding-bottom: var(--space-lg) !important;
}
.u-lg-pl-lg {
padding-left: var(--space-lg) !important;
}
.u-lg-mt-xl {
margin-top: var(--space-xl) !important;
}
.u-lg-mr-xl {
margin-right: var(--space-xl) !important;
}
.u-lg-mb-xl {
margin-bottom: var(--space-xl) !important;
}
.u-lg-ml-xl {
margin-left: var(--space-xl) !important;
}
.u-lg-pt-xl {
padding-top: var(--space-xl) !important;
}
.u-lg-pr-xl {
padding-right: var(--space-xl) !important;
}
.u-lg-pb-xl {
padding-bottom: var(--space-xl) !important;
}
.u-lg-pl-xl {
padding-left: var(--space-xl) !important;
}
.u-lg-mt-xxl {
margin-top: var(--space-xxl) !important;
}
.u-lg-mr-xxl {
margin-right: var(--space-xxl) !important;
}
.u-lg-mb-xxl {
margin-bottom: var(--space-xxl) !important;
}
.u-lg-ml-xxl {
margin-left: var(--space-xxl) !important;
}
.u-lg-pt-xxl {
padding-top: var(--space-xxl) !important;
}
.u-lg-pr-xxl {
padding-right: var(--space-xxl) !important;
}
.u-lg-pb-xxl {
padding-bottom: var(--space-xxl) !important;
}
.u-lg-pl-xxl {
padding-left: var(--space-xxl) !important;
}
.u-lg-mt-0 {
margin-top: 0 !important;
}
.u-lg-mr-0 {
margin-right: 0 !important;
}
.u-lg-mb-0 {
margin-bottom: 0 !important;
}
.u-lg-ml-0 {
margin-left: 0 !important;
}
.u-lg-pt-0 {
padding-top: 0 !important;
}
.u-lg-pr-0 {
padding-right: 0 !important;
}
.u-lg-pb-0 {
padding-bottom: 0 !important;
}
.u-lg-pl-0 {
padding-left: 0 !important;
}
}
@media (max-width: 1024px) {
.u-md-mt-xxs {
margin-top: var(--space-xxs) !important;
}
.u-md-mr-xxs {
margin-right: var(--space-xxs) !important;
}
.u-md-mb-xxs {
margin-bottom: var(--space-xxs) !important;
}
.u-md-ml-xxs {
margin-left: var(--space-xxs) !important;
}
.u-md-pt-xxs {
padding-top: var(--space-xxs) !important;
}
.u-md-pr-xxs {
padding-right: var(--space-xxs) !important;
}
.u-md-pb-xxs {
padding-bottom: var(--space-xxs) !important;
}
.u-md-pl-xxs {
padding-left: var(--space-xxs) !important;
}
.u-md-mt-xs {
margin-top: var(--space-xs) !important;
}
.u-md-mr-xs {
margin-right: var(--space-xs) !important;
}
.u-md-mb-xs {
margin-bottom: var(--space-xs) !important;
}
.u-md-ml-xs {
margin-left: var(--space-xs) !important;
}
.u-md-pt-xs {
padding-top: var(--space-xs) !important;
}
.u-md-pr-xs {
padding-right: var(--space-xs) !important;
}
.u-md-pb-xs {
padding-bottom: var(--space-xs) !important;
}
.u-md-pl-xs {
padding-left: var(--space-xs) !important;
}
.u-md-mt-sm {
margin-top: var(--space-sm) !important;
}
.u-md-mr-sm {
margin-right: var(--space-sm) !important;
}
.u-md-mb-sm {
margin-bottom: var(--space-sm) !important;
}
.u-md-ml-sm {
margin-left: var(--space-sm) !important;
}
.u-md-pt-sm {
padding-top: var(--space-sm) !important;
}
.u-md-pr-sm {
padding-right: var(--space-sm) !important;
}
.u-md-pb-sm {
padding-bottom: var(--space-sm) !important;
}
.u-md-pl-sm {
padding-left: var(--space-sm) !important;
}
.u-md-mt-md {
margin-top: var(--space-md) !important;
}
.u-md-mr-md {
margin-right: var(--space-md) !important;
}
.u-md-mb-md {
margin-bottom: var(--space-md) !important;
}
.u-md-ml-md {
margin-left: var(--space-md) !important;
}
.u-md-pt-md {
padding-top: var(--space-md) !important;
}
.u-md-pr-md {
padding-right: var(--space-md) !important;
}
.u-md-pb-md {
padding-bottom: var(--space-md) !important;
}
.u-md-pl-md {
padding-left: var(--space-md) !important;
}
.u-md-mt-lg {
margin-top: var(--space-lg) !important;
}
.u-md-mr-lg {
margin-right: var(--space-lg) !important;
}
.u-md-mb-lg {
margin-bottom: var(--space-lg) !important;
}
.u-md-ml-lg {
margin-left: var(--space-lg) !important;
}
.u-md-pt-lg {
padding-top: var(--space-lg) !important;
}
.u-md-pr-lg {
padding-right: var(--space-lg) !important;
}
.u-md-pb-lg {
padding-bottom: var(--space-lg) !important;
}
.u-md-pl-lg {
padding-left: var(--space-lg) !important;
}
.u-md-mt-xl {
margin-top: var(--space-xl) !important;
}
.u-md-mr-xl {
margin-right: var(--space-xl) !important;
}
.u-md-mb-xl {
margin-bottom: var(--space-xl) !important;
}
.u-md-ml-xl {
margin-left: var(--space-xl) !important;
}
.u-md-pt-xl {
padding-top: var(--space-xl) !important;
}
.u-md-pr-xl {
padding-right: var(--space-xl) !important;
}
.u-md-pb-xl {
padding-bottom: var(--space-xl) !important;
}
.u-md-pl-xl {
padding-left: var(--space-xl) !important;
}
.u-md-mt-xxl {
margin-top: var(--space-xxl) !important;
}
.u-md-mr-xxl {
margin-right: var(--space-xxl) !important;
}
.u-md-mb-xxl {
margin-bottom: var(--space-xxl) !important;
}
.u-md-ml-xxl {
margin-left: var(--space-xxl) !important;
}
.u-md-pt-xxl {
padding-top: var(--space-xxl) !important;
}
.u-md-pr-xxl {
padding-right: var(--space-xxl) !important;
}
.u-md-pb-xxl {
padding-bottom: var(--space-xxl) !important;
}
.u-md-pl-xxl {
padding-left: var(--space-xxl) !important;
}
.u-md-mt-0 {
margin-top: 0 !important;
}
.u-md-mr-0 {
margin-right: 0 !important;
}
.u-md-mb-0 {
margin-bottom: 0 !important;
}
.u-md-ml-0 {
margin-left: 0 !important;
}
.u-md-pt-0 {
padding-top: 0 !important;
}
.u-md-pr-0 {
padding-right: 0 !important;
}
.u-md-pb-0 {
padding-bottom: 0 !important;
}
.u-md-pl-0 {
padding-left: 0 !important;
}
}
@media (max-width: 768px) {
.u-sm-mt-xxs {
margin-top: var(--space-xxs) !important;
}
.u-sm-mr-xxs {
margin-right: var(--space-xxs) !important;
}
.u-sm-mb-xxs {
margin-bottom: var(--space-xxs) !important;
}
.u-sm-ml-xxs {
margin-left: var(--space-xxs) !important;
}
.u-sm-pt-xxs {
padding-top: var(--space-xxs) !important;
}
.u-sm-pr-xxs {
padding-right: var(--space-xxs) !important;
}
.u-sm-pb-xxs {
padding-bottom: var(--space-xxs) !important;
}
.u-sm-pl-xxs {
padding-left: var(--space-xxs) !important;
}
.u-sm-mt-xs {
margin-top: var(--space-xs) !important;
}
.u-sm-mr-xs {
margin-right: var(--space-xs) !important;
}
.u-sm-mb-xs {
margin-bottom: var(--space-xs) !important;
}
.u-sm-ml-xs {
margin-left: var(--space-xs) !important;
}
.u-sm-pt-xs {
padding-top: var(--space-xs) !important;
}
.u-sm-pr-xs {
padding-right: var(--space-xs) !important;
}
.u-sm-pb-xs {
padding-bottom: var(--space-xs) !important;
}
.u-sm-pl-xs {
padding-left: var(--space-xs) !important;
}
.u-sm-mt-sm {
margin-top: var(--space-sm) !important;
}
.u-sm-mr-sm {
margin-right: var(--space-sm) !important;
}
.u-sm-mb-sm {
margin-bottom: var(--space-sm) !important;
}
.u-sm-ml-sm {
margin-left: var(--space-sm) !important;
}
.u-sm-pt-sm {
padding-top: var(--space-sm) !important;
}
.u-sm-pr-sm {
padding-right: var(--space-sm) !important;
}
.u-sm-pb-sm {
padding-bottom: var(--space-sm) !important;
}
.u-sm-pl-sm {
padding-left: var(--space-sm) !important;
}
.u-sm-mt-md {
margin-top: var(--space-md) !important;
}
.u-sm-mr-md {
margin-right: var(--space-md) !important;
}
.u-sm-mb-md {
margin-bottom: var(--space-md) !important;
}
.u-sm-ml-md {
margin-left: var(--space-md) !important;
}
.u-sm-pt-md {
padding-top: var(--space-md) !important;
}
.u-sm-pr-md {
padding-right: var(--space-md) !important;
}
.u-sm-pb-md {
padding-bottom: var(--space-md) !important;
}
.u-sm-pl-md {
padding-left: var(--space-md) !important;
}
.u-sm-mt-lg {
margin-top: var(--space-lg) !important;
}
.u-sm-mr-lg {
margin-right: var(--space-lg) !important;
}
.u-sm-mb-lg {
margin-bottom: var(--space-lg) !important;
}
.u-sm-ml-lg {
margin-left: var(--space-lg) !important;
}
.u-sm-pt-lg {
padding-top: var(--space-lg) !important;
}
.u-sm-pr-lg {
padding-right: var(--space-lg) !important;
}
.u-sm-pb-lg {
padding-bottom: var(--space-lg) !important;
}
.u-sm-pl-lg {
padding-left: var(--space-lg) !important;
}
.u-sm-mt-xl {
margin-top: var(--space-xl) !important;
}
.u-sm-mr-xl {
margin-right: var(--space-xl) !important;
}
.u-sm-mb-xl {
margin-bottom: var(--space-xl) !important;
}
.u-sm-ml-xl {
margin-left: var(--space-xl) !important;
}
.u-sm-pt-xl {
padding-top: var(--space-xl) !important;
}
.u-sm-pr-xl {
padding-right: var(--space-xl) !important;
}
.u-sm-pb-xl {
padding-bottom: var(--space-xl) !important;
}
.u-sm-pl-xl {
padding-left: var(--space-xl) !important;
}
.u-sm-mt-xxl {
margin-top: var(--space-xxl) !important;
}
.u-sm-mr-xxl {
margin-right: var(--space-xxl) !important;
}
.u-sm-mb-xxl {
margin-bottom: var(--space-xxl) !important;
}
.u-sm-ml-xxl {
margin-left: var(--space-xxl) !important;
}
.u-sm-pt-xxl {
padding-top: var(--space-xxl) !important;
}
.u-sm-pr-xxl {
padding-right: var(--space-xxl) !important;
}
.u-sm-pb-xxl {
padding-bottom: var(--space-xxl) !important;
}
.u-sm-pl-xxl {
padding-left: var(--space-xxl) !important;
}
.u-sm-mt-0 {
margin-top: 0 !important;
}
.u-sm-mr-0 {
margin-right: 0 !important;
}
.u-sm-mb-0 {
margin-bottom: 0 !important;
}
.u-sm-ml-0 {
margin-left: 0 !important;
}
.u-sm-pt-0 {
padding-top: 0 !important;
}
.u-sm-pr-0 {
padding-right: 0 !important;
}
.u-sm-pb-0 {
padding-bottom: 0 !important;
}
.u-sm-pl-0 {
padding-left: 0 !important;
}
}
@media (max-width: 480px) {
.u-xs-mt-xxs {
margin-top: var(--space-xxs) !important;
}
.u-xs-mr-xxs {
margin-right: var(--space-xxs) !important;
}
.u-xs-mb-xxs {
margin-bottom: var(--space-xxs) !important;
}
.u-xs-ml-xxs {
margin-left: var(--space-xxs) !important;
}
.u-xs-pt-xxs {
padding-top: var(--space-xxs) !important;
}
.u-xs-pr-xxs {
padding-right: var(--space-xxs) !important;
}
.u-xs-pb-xxs {
padding-bottom: var(--space-xxs) !important;
}
.u-xs-pl-xxs {
padding-left: var(--space-xxs) !important;
}
.u-xs-mt-xs {
margin-top: var(--space-xs) !important;
}
.u-xs-mr-xs {
margin-right: var(--space-xs) !important;
}
.u-xs-mb-xs {
margin-bottom: var(--space-xs) !important;
}
.u-xs-ml-xs {
margin-left: var(--space-xs) !important;
}
.u-xs-pt-xs {
padding-top: var(--space-xs) !important;
}
.u-xs-pr-xs {
padding-right: var(--space-xs) !important;
}
.u-xs-pb-xs {
padding-bottom: var(--space-xs) !important;
}
.u-xs-pl-xs {
padding-left: var(--space-xs) !important;
}
.u-xs-mt-sm {
margin-top: var(--space-sm) !important;
}
.u-xs-mr-sm {
margin-right: var(--space-sm) !important;
}
.u-xs-mb-sm {
margin-bottom: var(--space-sm) !important;
}
.u-xs-ml-sm {
margin-left: var(--space-sm) !important;
}
.u-xs-pt-sm {
padding-top: var(--space-sm) !important;
}
.u-xs-pr-sm {
padding-right: var(--space-sm) !important;
}
.u-xs-pb-sm {
padding-bottom: var(--space-sm) !important;
}
.u-xs-pl-sm {
padding-left: var(--space-sm) !important;
}
.u-xs-mt-md {
margin-top: var(--space-md) !important;
}
.u-xs-mr-md {
margin-right: var(--space-md) !important;
}
.u-xs-mb-md {
margin-bottom: var(--space-md) !important;
}
.u-xs-ml-md {
margin-left: var(--space-md) !important;
}
.u-xs-pt-md {
padding-top: var(--space-md) !important;
}
.u-xs-pr-md {
padding-right: var(--space-md) !important;
}
.u-xs-pb-md {
padding-bottom: var(--space-md) !important;
}
.u-xs-pl-md {
padding-left: var(--space-md) !important;
}
.u-xs-mt-lg {
margin-top: var(--space-lg) !important;
}
.u-xs-mr-lg {
margin-right: var(--space-lg) !important;
}
.u-xs-mb-lg {
margin-bottom: var(--space-lg) !important;
}
.u-xs-ml-lg {
margin-left: var(--space-lg) !important;
}
.u-xs-pt-lg {
padding-top: var(--space-lg) !important;
}
.u-xs-pr-lg {
padding-right: var(--space-lg) !important;
}
.u-xs-pb-lg {
padding-bottom: var(--space-lg) !important;
}
.u-xs-pl-lg {
padding-left: var(--space-lg) !important;
}
.u-xs-mt-xl {
margin-top: var(--space-xl) !important;
}
.u-xs-mr-xl {
margin-right: var(--space-xl) !important;
}
.u-xs-mb-xl {
margin-bottom: var(--space-xl) !important;
}
.u-xs-ml-xl {
margin-left: var(--space-xl) !important;
}
.u-xs-pt-xl {
padding-top: var(--space-xl) !important;
}
.u-xs-pr-xl {
padding-right: var(--space-xl) !important;
}
.u-xs-pb-xl {
padding-bottom: var(--space-xl) !important;
}
.u-xs-pl-xl {
padding-left: var(--space-xl) !important;
}
.u-xs-mt-xxl {
margin-top: var(--space-xxl) !important;
}
.u-xs-mr-xxl {
margin-right: var(--space-xxl) !important;
}
.u-xs-mb-xxl {
margin-bottom: var(--space-xxl) !important;
}
.u-xs-ml-xxl {
margin-left: var(--space-xxl) !important;
}
.u-xs-pt-xxl {
padding-top: var(--space-xxl) !important;
}
.u-xs-pr-xxl {
padding-right: var(--space-xxl) !important;
}
.u-xs-pb-xxl {
padding-bottom: var(--space-xxl) !important;
}
.u-xs-pl-xxl {
padding-left: var(--space-xxl) !important;
}
.u-xs-mt-0 {
margin-top: 0 !important;
}
.u-xs-mr-0 {
margin-right: 0 !important;
}
.u-xs-mb-0 {
margin-bottom: 0 !important;
}
.u-xs-ml-0 {
margin-left: 0 !important;
}
.u-xs-pt-0 {
padding-top: 0 !important;
}
.u-xs-pr-0 {
padding-right: 0 !important;
}
.u-xs-pb-0 {
padding-bottom: 0 !important;
}
.u-xs-pl-0 {
padding-left: 0 !important;
}
}
.u-color-black {
color: var(--c-black) !important;
}
.u-color-white {
color: var(--c-white) !important;
}
.u-color-main {
color: var(--c-main) !important;
}
.u-color-main-light {
color: var(--c-main-light) !important;
}
.u-color-accent {
color: var(--c-accent) !important;
}
.u-color-gray {
color: var(--c-gray-dark) !important;
}
.u-color-link {
color: var(--c-link) !important;
}
.u-color-note {
color: var(--c-note) !important;
}
/* =====================
font-size
===================== */
.u-fz-xs {
font-size: var(--fz-xs) !important;
}
.u-fz-sm {
font-size: var(--fz-sm) !important;
}
.u-fz-default {
font-size: var(--fz-default) !important;
}
.u-fz-md {
font-size: var(--fz-md) !important;
}
.u-fz-lg {
font-size: var(--fz-lg) !important;
}
.u-fz-xl {
font-size: var(--fz-xl) !important;
}
.u-fz-xxl {
font-size: var(--fz-xxl) !important;
}
.u-fz-clamp-xs {
font-size: var(--fz-clamp-xs) !important;
}
.u-fz-clamp-sm {
font-size: var(--fz-clamp-sm) !important;
}
.u-fz-clamp-default {
font-size: var(--fz-clamp-default) !important;
}
.u-fz-clamp-md {
font-size: var(--fz-clamp-md) !important;
}
.u-fz-clamp-lg {
font-size: var(--fz-clamp-lg) !important;
}
.u-fz-clamp-xl {
font-size: var(--fz-clamp-xl) !important;
}
@media (max-width: 1400px) {
.u-xl-fz-xs {
font-size: var(--fz-xs) !important;
}
.u-xl-fz-sm {
font-size: var(--fz-sm) !important;
}
.u-xl-fz-normal {
font-size: var(--fz-normal) !important;
}
.u-xl-fz-md {
font-size: var(--fz-md) !important;
}
.u-xl-fz-lg {
font-size: var(--fz-lg) !important;
}
.u-xl-fz-xl {
font-size: var(--fz-xl) !important;
}
.u-xl-fz-xxl {
font-size: var(--fz-xxl) !important;
}
}
@media (max-width: 1280px) {
.u-lg-fz-xs {
font-size: var(--fz-xs) !important;
}
.u-lg-fz-sm {
font-size: var(--fz-sm) !important;
}
.u-lg-fz-normal {
font-size: var(--fz-normal) !important;
}
.u-lg-fz-md {
font-size: var(--fz-md) !important;
}
.u-lg-fz-lg {
font-size: var(--fz-lg) !important;
}
.u-lg-fz-xl {
font-size: var(--fz-xl) !important;
}
.u-lg-fz-xxl {
font-size: var(--fz-xxl) !important;
}
}
@media (max-width: 1024px) {
.u-md-fz-xs {
font-size: var(--fz-xs) !important;
}
.u-md-fz-sm {
font-size: var(--fz-sm) !important;
}
.u-md-fz-normal {
font-size: var(--fz-normal) !important;
}
.u-md-fz-md {
font-size: var(--fz-md) !important;
}
.u-md-fz-lg {
font-size: var(--fz-lg) !important;
}
.u-md-fz-xl {
font-size: var(--fz-xl) !important;
}
.u-md-fz-xxl {
font-size: var(--fz-xxl) !important;
}
}
@media (max-width: 768px) {
.u-sm-fz-xs {
font-size: var(--fz-xs) !important;
}
.u-sm-fz-sm {
font-size: var(--fz-sm) !important;
}
.u-sm-fz-normal {
font-size: var(--fz-normal) !important;
}
.u-sm-fz-md {
font-size: var(--fz-md) !important;
}
.u-sm-fz-lg {
font-size: var(--fz-lg) !important;
}
.u-sm-fz-xl {
font-size: var(--fz-xl) !important;
}
.u-sm-fz-xxl {
font-size: var(--fz-xxl) !important;
}
}
@media (max-width: 480px) {
.u-xs-fz-xs {
font-size: var(--fz-xs) !important;
}
.u-xs-fz-sm {
font-size: var(--fz-sm) !important;
}
.u-xs-fz-normal {
font-size: var(--fz-normal) !important;
}
.u-xs-fz-md {
font-size: var(--fz-md) !important;
}
.u-xs-fz-lg {
font-size: var(--fz-lg) !important;
}
.u-xs-fz-xl {
font-size: var(--fz-xl) !important;
}
.u-xs-fz-xxl {
font-size: var(--fz-xxl) !important;
}
}
.u-fw-n {
font-weight: normal !important;
}
.u-fw-m {
font-weight: 500 !important;
}
.u-fw-b {
font-weight: bold !important;
}
.u-ls-0 {
letter-spacing: 0 !important;
}
.u-ls-20 {
letter-spacing: 0.02em !important;
}
.u-lh-10 {
line-height: 1 !important;
}
.u-lh-15 {
line-height: 1.5 !important;
}
.u-lh-20 {
line-height: 2 !important;
}
.u-underline {
text-decoration: underline;
}
.u-tal {
text-align: left !important;
}
.u-tac {
text-align: center !important;
}
.u-tar {
text-align: right !important;
}
@media (max-width: 1400px) {
.u-xl-tal {
text-align: left !important;
}
.u-xl-tac {
text-align: center !important;
}
.u-xl-tar {
text-align: right !important;
}
}
@media not all and (max-width: 1400px) {
.u-xl-over-tal {
text-align: left !important;
}
.u-xl-over-tac {
text-align: center !important;
}
.u-xl-over-tar {
text-align: right !important;
}
}
@media (max-width: 1280px) {
.u-lg-tal {
text-align: left !important;
}
.u-lg-tac {
text-align: center !important;
}
.u-lg-tar {
text-align: right !important;
}
}
@media not all and (max-width: 1280px) {
.u-lg-over-tal {
text-align: left !important;
}
.u-lg-over-tac {
text-align: center !important;
}
.u-lg-over-tar {
text-align: right !important;
}
}
@media (max-width: 1024px) {
.u-md-tal {
text-align: left !important;
}
.u-md-tac {
text-align: center !important;
}
.u-md-tar {
text-align: right !important;
}
}
@media not all and (max-width: 1024px) {
.u-md-over-tal {
text-align: left !important;
}
.u-md-over-tac {
text-align: center !important;
}
.u-md-over-tar {
text-align: right !important;
}
}
@media (max-width: 768px) {
.u-sm-tal {
text-align: left !important;
}
.u-sm-tac {
text-align: center !important;
}
.u-sm-tar {
text-align: right !important;
}
}
@media not all and (max-width: 768px) {
.u-sm-over-tal {
text-align: left !important;
}
.u-sm-over-tac {
text-align: center !important;
}
.u-sm-over-tar {
text-align: right !important;
}
}
@media (max-width: 480px) {
.u-xs-tal {
text-align: left !important;
}
.u-xs-tac {
text-align: center !important;
}
.u-xs-tar {
text-align: right !important;
}
}
@media not all and (max-width: 480px) {
.u-xs-over-tal {
text-align: left !important;
}
.u-xs-over-tac {
text-align: center !important;
}
.u-xs-over-tar {
text-align: right !important;
}
}
@media not all and (max-width: 1400px) {
.u-xl-only {
display: none !important;
}
}
@media (max-width: 1400px) {
.u-xl-over-only {
display: none !important;
}
}
@media not all and (max-width: 1280px) {
.u-lg-only {
display: none !important;
}
}
@media (max-width: 1280px) {
.u-lg-over-only {
display: none !important;
}
}
@media not all and (max-width: 1024px) {
.u-md-only {
display: none !important;
}
}
@media (max-width: 1024px) {
.u-md-over-only {
display: none !important;
}
}
@media not all and (max-width: 768px) {
.u-sm-only {
display: none !important;
}
}
@media (max-width: 768px) {
.u-sm-over-only {
display: none !important;
}
}
@media not all and (max-width: 480px) {
.u-xs-only {
display: none !important;
}
}
@media (max-width: 480px) {
.u-xs-over-only {
display: none !important;
}
}
.u-mw-fit {
max-width: -moz-fit-content !important;
max-width: fit-content !important;
}
.u-db {
display: block !important;
}
.u-fs-0 {
flex-shrink: 0 !important;
}
.u-dib {
display: inline-block !important;
}
.u-center {
margin-inline: auto !important;
}
@media not all and (max-width: 1400px) {
.u-xl-over-center {
margin-inline: auto !important;
}
}
@media (max-width: 1400px) {
.u-xl-center {
margin-inline: auto !important;
}
}
@media not all and (max-width: 1280px) {
.u-lg-over-center {
margin-inline: auto !important;
}
}
@media (max-width: 1280px) {
.u-lg-center {
margin-inline: auto !important;
}
}
@media not all and (max-width: 1024px) {
.u-md-over-center {
margin-inline: auto !important;
}
}
@media (max-width: 1024px) {
.u-md-center {
margin-inline: auto !important;
}
}
@media not all and (max-width: 768px) {
.u-sm-over-center {
margin-inline: auto !important;
}
}
@media (max-width: 768px) {
.u-sm-center {
margin-inline: auto !important;
}
}
@media not all and (max-width: 480px) {
.u-xs-over-center {
margin-inline: auto !important;
}
}
@media (max-width: 480px) {
.u-xs-center {
margin-inline: auto !important;
}
}
/* ===========================================
* スクロール関連アニメーション
* ======================================== */
/* no-scroll
---------------------------------------------- */
.no-scroll {
overflow: hidden;
}
[class*=js-scroll-animation] {
transition-property: var(--property);
transition-timing-function: var(--easing);
}
[class*=js-scroll-animation].is-animated {
transition-duration: var(--duration);
}
/* Fade
---------------------------------------------- */
.js-scroll-animation-fade-in {
--property: opacity;
--easing: ease;
--duration: 1s;
}
.js-scroll-animation-fade-in:not(.is-animated) {
opacity: 0;
}
.js-scroll-animation-fade-in-up {
--property: opacity, translate;
--easing: ease-in-out;
--duration: 1s;
--starting-position: 40px;
}
.js-scroll-animation-fade-in-up:not(.is-animated) {
opacity: 0;
translate: 0 var(--starting-position);
}
@media print {
.no-print {
display: none;
}
}