@charset 'UTF-8';
/* ========================================================================
/*
/* Foundation
/*
========================================================================= */
/* Bootstrap Customize
--------------------------------------------------------- */
h1 {
float: none;
margin: 0;
padding: 0;
}
h2 {
margin: 0;
padding: 0;
}
h3 {
margin: 0;
padding: 0;
}
h4,
h5,
h6,
.h4,
.h5,
.h6 {
margin-top: 0;
margin-bottom: 0;
}
img {
border: 0;
vertical-align: top;
}
p {
margin: 0;
}
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
}
dl {
margin: 0;
padding: 0;
line-height: 1.9;
}
dt {
font-weight: normal;
line-height: 1.9;
}
dd {
line-height: 1.9;
}
address {
margin-bottom: auto;
}
@media (min-width: 1400px) {
.d-xxl-block {
display: block !important;
}
.d-xxl-none {
display: none !important;
}
}
@media screen and (min-width: 1200px) {
.container {
max-width: 1500px;
}
}
[class*=col-]:not(:last-child) {
margin-bottom: 2em;
}
@media print, screen and (min-width: 768px) {
[class*=col-]:not(:last-child) {
margin-bottom: 0;
}
}
.modal {
z-index: 9999;
}
@media print {
.modal {
display: none !important;
}
}
@media print, screen and (min-width: 768px) {
.modal-body img {
max-height: 700px;
}
}
.thumb {
position: relative;
width: auto;
height: 300px;
border: solid 1px #e5e5e5;
background: #f8f8f8;
}
.thumb img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: auto;
max-width: 100%;
max-height: 100%;
margin: auto;
}
.thumb a {
display: block;
width: 100%;
height: 100%;
outline: none;
cursor: pointer;
}
.thumb a:is(:hover, :active, :focus) img {
opacity: .7;
transition: .3s;
}
@media only screen and (max-width: 767.98px) {
.form-inline select {
display: inline-block;
width: auto;
padding-right: 2px;
padding-left: 2px;
}
}
input[type=file].form-control {
height: 0;
}
@media only screen and (max-width: 575.98px) {
.form-check-inline {
display: block;
}
}
@media print, screen and (min-width: 576px) {
.form-check-inline:not(:last-of-type) {
margin-right: 1.4em;
}
}
.form-control {
height: auto;
padding: .7em .7em;
border-radius: 4px;
}
@media only screen and (max-width: 767.98px) {
.form-control {
font-size: 1rem;
}
}
@media print, screen and (min-width: 768px) {
.form-control {
font-size: clamp(.938rem, .158vw + .862rem, 1rem);
}
}
.form-control::placeholder {
color: #b3b3b3;
font-weight: 350;
}
@media only screen and (max-width: 767.98px) {
.form-control::placeholder {
font-size: .875rem;
}
}
@media print, screen and (min-width: 768px) {
.form-control::placeholder {
font-size: clamp(.875rem, .158vw + .799rem, .938rem);
}
}
/* Base
--------------------------------------------------------- */
:root {
--color-main: #c42820;
--color-sub: #222;
--color-txt: #222;
--color-base: #f2f2f2;
--font-family-primary: 'Noto Sans JP', sans-serif;
--font-family-secondary: 'Montserrat', sans-serif;
--font-family-awesome: 'Font Awesome 6 Free';
--header-height-mobile: clamp(50px, 8.1vw, 60px);
--header-height-desktop: 90px;
--icon-mail: url('data:image/svg+xml;utf-8,');
--icon-arrow: url('data:image/svg+xml;utf-8,');
--icon-thunder: url('data:image/svg+xml;utf-8,');
--icon-phone: url('data:image/svg+xml;utf-8,');
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
background: url('../images/common/bg-pattern.png') left top repeat;
color: var(--color-txt);
letter-spacing: .1em;
font-weight: 400;
font-family: var(--font-family-primary);
line-height: 2;
font-optical-sizing: auto;
}
body :lang(en) {
font-family: var(--font-family-secondary);
}
a {
color: var(--color-main);
text-decoration: none;
transition: color .3s;
text-underline-offset: .3em;
}
a:is(:hover, :active, :focus) {
color: var(--color-sub);
text-decoration: none;
}
a:has([data-action=call]) {
color: inherit;
text-decoration: none;
}
em,
strong {
font-weight: bold;
font-style: normal;
}
button,
input[type=submit],
input[type=button] {
padding: 0;
border: 0;
}
img {
image-rendering: -webkit-optimize-contrast;
}
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
summary:focus,
[role=button]:focus,
[tabindex]:not([tabindex='-1']):focus {
outline: none;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role=button]:focus-visible,
[tabindex]:not([tabindex='-1']):focus-visible {
outline: 1px solid currentColor;
outline-offset: 2px;
}
/* ========================================================================
/*
/* Layout
/*
========================================================================= */
/* 全体
--------------------------------------------------------- */
.l-page-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
@media screen and (max-width: 991.98px) {
.l-page-wrapper {
padding-top: var(--header-height-mobile);
}
}
/* ヘッダーレイアウト
--------------------------------------------------------- */
.l-header {
position: fixed;
z-index: 1000;
}
@media screen and (max-width: 991.98px) {
.l-header {
top: 0;
right: 0;
left: 0;
height: var(--header-height-mobile);
}
}
@media print, screen and (min-width: 992px) {
.l-header {
right: clamp(40px, 4vw, 80px);
left: clamp(40px, 4vw, 80px);
height: calc(var(--header-height-desktop) + 30px);
padding-top: 30px;
}
}
@media print {
.l-header {
position: static;
}
}
/* コンテンツ
--------------------------------------------------------- */
.l-contents {
flex: 1 0 auto;
}
@media screen and (max-width: 991.98px) {
.l-contents {
padding-bottom: clamp(70px, 11.8vw, 90px);
}
}
@media print, screen and (min-width: 992px) {
.l-contents {
padding-bottom: clamp(70px, 5.8vw, 100px);
}
}
@media print, screen and (min-width: 992px) {
.l-contents.--home {
padding-bottom: 0;
}
}
/* フッターレイアウト
--------------------------------------------------------- */
@media print {
.l-footer {
break-inside: avoid;
page-break-inside: avoid;
}
}
/* ========================================================================
/*
/* Component
/*
========================================================================= */
/* ドロワー
--------------------------------------------------------- */
@media print, screen and (min-width: 992px) {
.drawer {
height: 100%;
}
}
.drawer__btn {
position: absolute;
top: 0;
right: 0;
z-index: 1000;
width: var(--header-height-mobile);
height: var(--header-height-mobile);
outline: none !important;
background: var(--color-main);
transition: background-color .5s;
-webkit-user-select: none;
user-select: none;
}
@media print, screen and (min-width: 992px) {
.drawer__btn {
display: none;
}
}
.is-drawer-open .drawer__btn {
background-color: #fff;
}
.drawer__btn-line {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
display: block;
width: clamp(24px, 4vw, 30px);
height: 1px;
margin: auto;
background: #fff;
transition: .5s cubic-bezier(.645, .045, .355, 1);
pointer-events: none;
}
.is-drawer-open .drawer__btn-line {
background-color: #5f5f5f;
}
.drawer__btn-line:nth-child(1) {
transform: translateY(-6px);
}
.is-drawer-open .drawer__btn-line:nth-child(1) {
transform: rotate(45deg);
}
.is-drawer-open .drawer__btn-line:nth-child(2) {
opacity: 0;
}
.drawer__btn-line:nth-child(3) {
transform: translateY(6px);
}
.is-drawer-open .drawer__btn-line:nth-child(3) {
transform: rotate(-45deg);
}
@media screen and (max-width: 991.98px) {
.drawer__bg {
position: fixed;
top: 0;
left: 100%;
z-index: 500;
overflow-x: hidden;
width: min(80vw, 450px);
height: 100vh;
background-color: #fff;
transition: transform .5s cubic-bezier(.645, .045, .355, 1);
pointer-events: none;
}
}
@media print, screen and (min-width: 992px) {
.drawer__bg {
height: 100%;
}
}
@media screen and (max-width: 991.98px) {
.drawer__bg::-webkit-scrollbar {
display: none;
}
}
@media screen and (max-width: 991.98px) {
.is-drawer-open .drawer__bg {
overflow-y: auto;
transform: translateX(-100%);
pointer-events: auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
}
@media screen and (max-width: 991.98px) {
.drawer__inner {
visibility: hidden;
padding: 90px 4vw 140px;
opacity: 0;
transition: opacity .5s cubic-bezier(.645, .045, .355, 1) .25s, visibility .5s cubic-bezier(.645, .045, .355, 1) .25s, transform .5s cubic-bezier(.645, .045, .355, 1) .25s;
transform: translateX(30px);
}
}
@media print, screen and (min-width: 992px) {
.drawer__inner {
height: 100%;
}
}
@media screen and (max-width: 991.98px) {
.is-drawer-open .drawer__inner {
visibility: visible;
opacity: 1;
transform: none;
}
}
@media screen and (max-width: 991.98px) {
.drawer__overlay {
position: fixed;
top: 0;
left: 0;
z-index: 400;
visibility: hidden;
width: 100%;
height: 100vh;
opacity: 0;
transition: .5s cubic-bezier(.645, .045, .355, 1);
pointer-events: none;
-webkit-backdrop-filter: blur(1px);
backdrop-filter: blur(1px);
}
}
@media screen and (max-width: 991.98px) {
.is-drawer-open .drawer__overlay {
visibility: visible;
background: rgba(0, 0, 0, .3);
opacity: 1;
pointer-events: auto;
}
}
/* グローバルナビ
--------------------------------------------------------- */
@media print, screen and (min-width: 992px) {
.c-global-nav__items {
display: flex;
height: 100%;
justify-content: flex-end;
}
}
@media print, screen and (min-width: 992px) {
.c-global-nav__item {
height: 100%;
min-width: clamp(100px, 7.4vw, 116px);
}
}
@media screen and (max-width: 991.98px) {
.c-global-nav__item + .c-global-nav__item {
margin-top: 10px;
}
}
@media print, screen and (min-width: 992px) {
.c-global-nav__item.--only-sp {
display: none;
}
}
.c-global-nav__item > a {
position: relative;
display: block;
color: var(--color-txt);
text-decoration: none;
font-weight: 500;
line-height: 1.5;
transition: background-color .3s, color .3s;
}
@media screen and (max-width: 991.98px) {
.c-global-nav__item > a {
padding-top: .9em;
padding-bottom: .9em;
text-align: left;
letter-spacing: .07em;
font-size: 1.0625rem;
}
}
@media print, screen and (min-width: 992px) {
.c-global-nav__item > a {
display: flex;
height: 100%;
padding-top: .4em;
padding-bottom: .4em;
letter-spacing: .1em;
font-size: clamp(1rem, .216vw + .866rem, 1.125rem);
align-items: center;
justify-content: center;
}
}
.c-global-nav__item > a::after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
background-color: var(--color-main);
content: '';
transition: transform .3s;
transform: scaleX(0);
transform-origin: right top;
}
@media screen and (max-width: 991.98px) {
.c-global-nav__item > a::after {
height: 2px;
}
}
@media print, screen and (min-width: 992px) {
.c-global-nav__item > a::after {
height: clamp(4px, .3vw, 5px);
}
}
.c-global-nav__item:is(.is-current, :hover, :focus-within) > a::after {
transform: scaleX(1);
transform-origin: left top;
}
/* フッターナビ
--------------------------------------------------------- */
.c-footer-nav__items {
display: flex;
flex-wrap: wrap;
}
@media only screen and (max-width: 767.98px) {
.c-footer-nav__items {
gap: .2em 1em;
}
}
@media print, screen and (min-width: 768px) {
.c-footer-nav__items {
justify-content: flex-end;
gap: 1.2em 2.3em;
}
}
.c-footer-nav__item a {
color: #fff;
text-decoration: none;
letter-spacing: .1em;
font-weight: 500;
line-height: 1.5;
transition: opacity .3s;
}
@media screen and (max-width: 991.98px) {
.c-footer-nav__item a {
font-size: .9375rem;
}
}
@media print, screen and (min-width: 992px) {
.c-footer-nav__item a {
font-size: clamp(1rem, .122vw + .973rem, 1.125rem);
}
}
@media print, screen and (min-width: 992px) {
.c-footer-nav__item a:is(:hover, :active, :focus) {
opacity: .7;
}
}
/* コンテナ
--------------------------------------------------------- */
.c-container {
max-width: min(92vw, 1470px);
margin-right: auto;
margin-left: auto;
}
/* セクション
--------------------------------------------------------- */
.c-section {
margin-top: clamp(80px, 10.5vw, 160px);
}
.c-section:first-child {
margin-top: 0;
}
/* ページタイトル
--------------------------------------------------------- */
.c-page-header {
position: relative;
z-index: 0;
display: flex;
flex-direction: column;
overflow: hidden;
margin-bottom: clamp(40px, 4.8vw, 70px);
background-position: center bottom;
background-size: cover;
background-repeat: no-repeat;
text-align: center;
align-items: center;
justify-content: center;
aspect-ratio: 2000/600;
}
@media screen and (max-width: 991.98px) {
.c-page-header {
height: clamp(180px, 30.3vw, 230px);
padding-bottom: 1.7em;
}
}
@media print, screen and (min-width: 992px) {
.c-page-header {
height: clamp(450px, 36.1vw, 600px);
padding-bottom: 1em;
}
}
.c-page-header.--business {
background-image: url('../images/business/bg-page-header.png');
}
.c-page-header.--company {
background-image: url('../images/company/bg-page-header.png');
}
.c-page-header.--contact {
background-image: url('../images/contact/bg-page-header.png');
}
.c-page-header::before {
position: absolute;
z-index: -1;
background-color: rgba(0, 0, 0, .1);
content: '';
inset: 0;
}
.c-page-header::after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
height: 22vw;
background: url('../images/common/bg-wave-page-header.png') center/100% 100% no-repeat;
content: '';
}
.c-page-header__en,
.c-page-header__title {
color: #fff;
}
.c-page-header__en {
font-weight: bold;
font-family: var(--font-family-secondary);
line-height: 1.4;
}
@media screen and (max-width: 991.98px) {
.c-page-header__en {
font-size: clamp(1.875rem, 1.266vw + 1.59rem, 2.375rem);
}
}
@media print, screen and (min-width: 992px) {
.c-page-header__en {
font-size: clamp(2.813rem, 2.155vw + 1.476rem, 4.063rem);
}
}
.c-page-header__title {
letter-spacing: .1em;
font-weight: 500;
font-size: clamp(.875rem, .385vw + .788rem, 1.25rem);
}
@media screen and (max-width: 991.98px) {
.c-page-header__title {
font-size: clamp(.938rem, .316vw + .866rem, 1.063rem);
}
}
@media print, screen and (min-width: 992px) {
.c-page-header__title {
font-size: clamp(1.125rem, .431vw + .858rem, 1.375rem);
}
}
.c-page-header__title[data-io=text-rise] {
--text-rise-delay: .3s;
}
/* キャッチコピー
--------------------------------------------------------- */
.c-copy {
margin-bottom: 1.2em;
font-weight: 500;
font-size: clamp(1.063rem, .641vw + .918rem, 1.688rem);
line-height: 1.5;
}
/* リスト
--------------------------------------------------------- */
.c-list > li {
position: relative;
}
.c-list > li::before {
position: absolute;
left: 0;
}
.c-list.--dot > li {
padding-left: 1.2em;
}
.c-list.--dot > li::before {
content: '・';
}
.c-list.--num > li {
margin-left: 1.3em;
list-style-type: decimal;
}
.c-list.--inline {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
gap: 4%;
}
/* テーブル
--------------------------------------------------------- */
.c-table {
width: 100%;
font-size: clamp(.938rem, .096vw + .916rem, 1rem);
line-height: 1.7;
}
@media only screen and (max-width: 767.98px) {
.c-table {
font-size: 1rem;
}
}
@media print {
.c-table {
page-break-inside: avoid;
}
}
@media only screen and (max-width: 767.98px) {
.c-table tbody th,
.c-table tbody td {
display: block;
width: 100%;
}
}
.c-table th,
.c-table td {
overflow-wrap: break-word;
}
.c-table.--style-a thead {
border-top: 1px solid var(--color-main);
border-right: 1px solid var(--color-main);
border-left: 1px solid var(--color-main);
}
.c-table.--style-a thead th {
padding: .4em 1.4em;
border-bottom: 1px solid var(--color-main);
background-color: var(--color-main);
color: #fff;
text-align: center;
font-weight: 500;
}
.c-table.--style-a thead th:not(:last-of-type) {
border-right: 1px solid color-mix(in srgb, var(--color-main), black 10%);
}
.c-table.--style-a tbody {
border-top: 1px solid #ebebeb;
border-right: 1px solid #ebebeb;
border-left: 1px solid #ebebeb;
}
.c-table.--style-a tbody th {
border-bottom: 1px solid #ebebeb;
}
@media print, screen and (min-width: 768px) {
.c-table.--style-a tbody th {
border-right: 1px solid #ebebeb;
}
}
.c-table.--style-a tbody td {
border-right: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
}
@media print, screen and (min-width: 768px) {
.c-table.--style-a th,
.c-table.--style-a td {
padding: .8em 1.4em;
}
}
.c-table.--style-a th {
background: url('../images/common/bg-pattern2.png') left top repeat;
font-weight: 500;
}
@media only screen and (max-width: 767.98px) {
.c-table.--style-a th {
padding: .3em 1.4em;
text-align: center;
}
}
.c-table.--style-a td {
background-color: #fff;
}
@media only screen and (max-width: 767.98px) {
.c-table.--style-a td {
padding: 1em 1.4em;
}
}
@media only screen and (max-width: 767.98px) {
.c-table.--style-a.--lineup tbody th,
.c-table.--style-a.--lineup tbody td {
display: table-cell;
}
}
.c-table.--style-a.--lineup tbody th {
border-right: 1px solid #ebebeb;
}
@media only screen and (max-width: 767.98px) {
.c-table.--style-a.--lineup tbody th {
width: 30%;
text-align: left;
}
}
@media print, screen and (min-width: 768px) {
.c-table.--company tbody th {
width: 25%;
}
}
.c-table.--contact {
margin-top: clamp(30px, 4vw, 40px);
}
.c-table.--contact tbody th,
.c-table.--contact tbody td {
position: relative;
}
@media only screen and (max-width: 767.98px) {
.c-table.--contact tbody th,
.c-table.--contact tbody td {
padding-right: .8em;
padding-left: .8em;
}
}
@media print, screen and (min-width: 768px) {
.c-table.--contact tbody th,
.c-table.--contact tbody td {
padding: 1.2em 1em;
}
}
.c-table.--contact tbody th .c-badge,
.c-table.--contact tbody td .c-badge {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
}
.c-table.--contact tbody th:has(.c-badge),
.c-table.--contact tbody td:has(.c-badge) {
padding-right: 4em;
}
@media only screen and (max-width: 767.98px) {
.c-table.--contact tbody th {
text-align: left;
}
}
@media print, screen and (min-width: 768px) {
.c-table.--contact tbody th {
width: clamp(240px, 24.4vw, 290px);
}
}
@media only screen and (max-width: 767.98px) {
.c-table.--contact tbody td {
display: block;
}
}
/* バッジ
--------------------------------------------------------- */
.c-badge {
display: inline-block;
padding: .2em .6em;
background-color: var(--color-main);
color: #fff;
font-weight: normal;
font-size: .625rem;
line-height: 1.4;
}
.c-heading {
position: relative;
}
@media only screen and (max-width: 767.98px) {
.c-heading {
margin-bottom: 2em;
}
}
@media print, screen and (min-width: 768px) {
.c-heading {
margin-bottom: 3em;
}
}
.c-heading__en {
position: relative;
left: -.07em;
letter-spacing: 0;
font-weight: 600;
font-family: var(--font-family-secondary);
line-height: 1.1;
}
@media screen and (max-width: 991.98px) {
.c-heading__en {
font-size: clamp(2.125rem, 1.961vw + 1.684rem, 2.625rem);
}
}
@media print, screen and (min-width: 992px) {
.c-heading__en {
font-size: clamp(4.063rem, 1.616vw + 3.06rem, 5rem);
}
}
.c-heading__title {
margin-top: .3em;
letter-spacing: .1em;
font-weight: 700;
line-height: 1.2;
--heading-letter-delay: .22s;
}
@media screen and (max-width: 991.98px) {
.c-heading__title {
font-size: clamp(.938rem, .158vw + .902rem, 1rem);
}
}
@media print, screen and (min-width: 992px) {
.c-heading__title {
font-size: clamp(1rem, .216vw + .866rem, 1.125rem);
}
}
@media screen and (min-width: 1600px) {
.c-heading__title {
margin-top: 0;
}
}
.c-heading__title::before {
position: relative;
top: -.18em;
display: inline-block;
margin-right: .6em;
background-color: var(--color-main);
content: '';
vertical-align: middle;
transition: background-color .2s;
aspect-ratio: 13.02/33.33;
-webkit-mask-image: var(--icon-thunder);
mask-image: var(--icon-thunder);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
@media screen and (max-width: 991.98px) {
.c-heading__title::before {
height: 1.6em;
}
}
@media print, screen and (min-width: 992px) {
.c-heading__title::before {
height: 1.9em;
}
}
@media print {
.c-heading__title::before {
print-color-adjust: exact;
}
}
.c-heading__title[data-io=heading-letter]::before {
opacity: 0;
transition: opacity .55s cubic-bezier(.22, 1, .36, 1) .18s, transform .55s cubic-bezier(.22, 1, .36, 1) .18s, background-color .2s;
transform: translateX(-.5em);
}
.c-heading__title[data-io=heading-letter].is-appear::before {
opacity: 1;
transform: none;
}
.c-heading.--center {
width: auto;
text-align: center;
}
.c-heading-bar {
position: relative;
margin-bottom: 1.6em;
padding-left: 1.4em;
font-weight: bold;
font-size: clamp(1.063rem, .192vw + 1.019rem, 1.188rem);
line-height: 1.5;
}
.c-heading-bar::before {
position: absolute;
top: .7em;
left: 0;
width: .7em;
height: 2px;
margin: auto;
background-color: currentColor;
content: '';
}
/* メインビジュアル
--------------------------------------------------------- */
.c-hero {
position: relative;
z-index: 0;
overflow: hidden;
}
@media print, screen and (min-width: 992px) {
.c-hero {
display: grid;
padding-right: clamp(80px, 7.2vw, 130px);
padding-left: clamp(80px, 8.6vw, 170px);
column-gap: 4%;
grid-template: 'content slider'/1fr auto;
align-items: flex-start;
}
}
.c-hero__content {
grid-area: content;
}
@media screen and (max-width: 991.98px) {
.c-hero__content {
display: flex;
flex-direction: column;
min-height: clamp(300px, 51.8vw, 400px);
padding-top: 4em;
padding-right: 6vw;
padding-left: 6vw;
justify-content: center;
}
}
@media print, screen and (min-width: 992px) {
.c-hero__content {
margin-top: clamp(140px, 18.5vw, 400px);
margin-bottom: auto;
}
}
.c-hero__copy {
letter-spacing: .1em;
font-weight: 700;
line-height: 1.1;
}
@media screen and (max-width: 991.98px) {
.c-hero__copy {
font-size: clamp(2rem, 1.899vw + 1.573rem, 2.75rem);
}
}
@media print, screen and (min-width: 992px) {
.c-hero__copy {
font-size: clamp(3.125rem, 4.095vw + .586rem, 5.5rem);
}
}
.c-hero__copy-line {
display: block;
overflow: hidden;
}
@media screen and (max-width: 991.98px) {
.c-hero__copy-line + .c-hero__copy-line {
margin-top: .6em;
}
}
@media print, screen and (min-width: 992px) {
.c-hero__copy-line + .c-hero__copy-line {
margin-top: .55em;
}
}
.c-hero__copy-line span {
display: block;
transform: translateY(110%);
animation: cHeroTextUp 1s cubic-bezier(.22, 1, .36, 1) forwards;
}
.c-hero__copy-line:nth-child(2) span {
animation-delay: .15s;
}
.c-hero__copy-en {
overflow: hidden;
color: var(--color-main);
letter-spacing: .05em;
font-weight: 700;
font-family: var(--font-family-secondary);
line-height: 1.6;
}
@media screen and (max-width: 991.98px) {
.c-hero__copy-en {
margin-top: 1.4em;
font-size: clamp(.938rem, .475vw + .831rem, 1.125rem);
}
}
@media print, screen and (min-width: 992px) {
.c-hero__copy-en {
margin-top: 2.3em;
font-size: clamp(1.125rem, .647vw + .724rem, 1.5rem);
}
}
.c-hero__copy-en span {
display: block;
transform: translateY(120%);
animation: cHeroTextUp 1s cubic-bezier(.22, 1, .36, 1) .3s forwards;
animation-delay: .45s;
}
@keyframes cHeroTextUp {
0% {
transform: translateY(110%);
}
100% {
transform: translateY(0);
}
}
.c-hero__slider {
grid-area: slider;
}
@media screen and (max-width: 991.98px) {
.c-hero__slider {
margin-top: clamp(40px, 7.4vw, 60px);
}
}
@media print, screen and (min-width: 992px) {
.c-hero__slider {
display: flex;
column-gap: 10px;
justify-content: space-between;
}
}
.c-hero__slider-container {
overflow: hidden;
}
@media screen and (max-width: 991.98px) {
.c-hero__slider-container {
height: clamp(150px, 27.4vw, 220px);
}
}
@media print, screen and (min-width: 992px) {
.c-hero__slider-container {
width: clamp(200px, 19.9vw, 380px);
height: clamp(500px, 51.5vw, 1000px);
}
}
@media screen and (max-width: 991.98px) {
.c-hero__slider-container.--secondary {
margin-top: 10px;
}
}
@media screen and (max-width: 991.98px) {
.c-hero__slider-track {
display: flex;
flex-direction: row;
width: -webkit-max-content;
width: max-content;
height: 100%;
}
}
@media print, screen and (min-width: 992px) {
.c-hero__slider-track {
display: flex;
flex-direction: column;
}
}
@media screen and (max-width: 991.98px) {
.c-hero__slider-track.--primary {
animation: marquee-left 18s linear infinite;
}
}
@media print, screen and (min-width: 992px) {
.c-hero__slider-track.--primary {
animation: marquee-up 18s linear infinite;
}
}
@media screen and (max-width: 991.98px) {
.c-hero__slider-track.--secondary {
animation: marquee-right 18s linear infinite;
}
}
@media print, screen and (min-width: 992px) {
.c-hero__slider-track.--secondary {
animation: marquee-down 18s linear infinite;
}
}
.c-hero__slider-track li {
flex-shrink: 0;
will-change: transform;
}
@media screen and (max-width: 991.98px) {
.c-hero__slider-track li {
padding-right: 10px;
aspect-ratio: 3/2;
}
}
@media print, screen and (min-width: 992px) {
.c-hero__slider-track li {
padding-bottom: 10px;
aspect-ratio: 19/25;
}
}
.c-hero__slider-track li img {
width: 100%;
height: 100%;
object-fit: cover;
}
@keyframes marquee-up {
from {
transform: translateY(0);
}
to {
transform: translateY(-50%);
}
}
@keyframes marquee-down {
from {
transform: translateY(-50%);
}
to {
transform: translateY(0);
}
}
@keyframes marquee-left {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@keyframes marquee-right {
from {
transform: translateX(-50%);
}
to {
transform: translateX(0);
}
}
@media screen and (max-width: 991.98px) {
.c-hero__scroll {
margin-top: clamp(20px, 1.7vw, 30px);
}
}
@media print, screen and (min-width: 992px) {
.c-hero__scroll {
margin-top: clamp(90px, 7.7vw, 135px);
}
}
.c-hero__scroll a {
display: inline-block;
text-decoration: none;
}
.c-hero__scroll a:hover .c-hero__scroll-icon img {
transform: translateY(8px);
}
.c-hero__scroll-icon {
display: grid;
overflow: hidden;
border: 1px solid var(--color-main);
border-radius: 50%;
place-items: center;
aspect-ratio: 1;
}
@media screen and (max-width: 991.98px) {
.c-hero__scroll-icon {
width: clamp(40px, 6.7vw, 50px);
}
}
@media print, screen and (min-width: 992px) {
.c-hero__scroll-icon {
width: clamp(90px, 7.6vw, 130px);
}
}
.c-hero__scroll-icon img {
display: block;
height: auto;
transition: transform .45s cubic-bezier(.22, 1, .36, 1);
transform: translateY(0);
will-change: transform;
}
@media screen and (max-width: 991.98px) {
.c-hero__scroll-icon img {
width: clamp(10px, 1.6vw, 12px);
}
}
@media print, screen and (min-width: 992px) {
.c-hero__scroll-icon img {
width: clamp(16px, 1.2vw, 20px);
}
}
/* ボタン
--------------------------------------------------------- */
.c-btn {
position: relative;
z-index: 0;
display: inline-flex;
overflow: hidden;
box-sizing: border-box;
outline: none !important;
border: 1px solid transparent;
background-color: transparent;
color: inherit;
text-decoration: none;
font-size: inherit;
line-height: 1.5;
cursor: pointer;
transition: background-color .3s, border-color .3s, color .3s;
align-items: center;
-webkit-appearance: none;
appearance: none;
}
.c-btn.--primary {
border-color: var(--color-main);
background-color: var(--color-main);
color: #fff;
}
@media only screen and (max-width: 767.98px) {
.c-btn.--primary {
padding: 1em 1.2em;
}
}
@media print, screen and (min-width: 768px) {
.c-btn.--primary {
padding: 1.15em 1.6em;
}
}
.c-btn.--primary:is(:hover, :active, :focus) {
background-color: #fff;
color: var(--color-main);
}
@media (hover: hover) and (pointer: fine) {
.c-btn.--arrow-right:hover .c-btn__icon::after,
.c-btn.--arrow-left:hover .c-btn__icon::after {
transform: translate(var(--c-btn-dot-move), -50%);
}
}
.c-btn.--arrow-right {
--c-btn-dot-move: 22px;
}
@media only screen and (max-width: 767.98px) {
.c-btn.--arrow-right {
padding-right: 3.5em;
}
}
@media print, screen and (min-width: 768px) {
.c-btn.--arrow-right {
padding-right: 5.7em;
}
}
@media only screen and (max-width: 767.98px) {
.c-btn.--arrow-right .c-btn__icon {
right: 10px;
}
}
@media print, screen and (min-width: 768px) {
.c-btn.--arrow-right .c-btn__icon {
right: 24px;
}
}
.c-btn.--arrow-right .c-btn__icon::after {
left: 0;
}
.c-btn.--arrow-left {
--c-btn-dot-move: -22px;
}
@media only screen and (max-width: 767.98px) {
.c-btn.--arrow-left {
padding-left: 3.5em;
}
}
@media print, screen and (min-width: 768px) {
.c-btn.--arrow-left {
padding-left: 5.7em;
}
}
@media only screen and (max-width: 767.98px) {
.c-btn.--arrow-left .c-btn__icon {
left: 10px;
}
}
@media print, screen and (min-width: 768px) {
.c-btn.--arrow-left .c-btn__icon {
left: 24px;
}
}
.c-btn.--arrow-left .c-btn__icon::after {
right: 0;
}
.c-btn__label {
letter-spacing: 0;
font-weight: 600;
font-size: .875rem;
}
.c-btn__icon {
position: absolute;
top: 50%;
height: 7px;
transform: translateY(-50%);
}
@media only screen and (max-width: 767.98px) {
.c-btn__icon {
width: 24px;
}
}
@media print, screen and (min-width: 768px) {
.c-btn__icon {
width: 30px;
}
}
.c-btn__icon::before,
.c-btn__icon::after {
position: absolute;
top: 50%;
background-color: #c7c7c7;
content: '';
transition: background-color .3s, transform .45s cubic-bezier(.22, 1, .36, 1);
}
.c-btn__icon::before {
left: 0;
width: 100%;
height: 1px;
transform: translateY(-50%);
}
.c-btn__icon::after {
width: 7px;
border-radius: 50%;
transform: translate(0, -50%);
aspect-ratio: 1;
}
.c-btn.--back {
border-color: var(--color-sub);
background-color: var(--color-sub);
}
.c-btn.--back:is(:hover, :active, :focus) {
color: var(--color-sub);
}
/* ページトップ
--------------------------------------------------------- */
.c-pagetop {
position: fixed;
z-index: 50;
font-size: 0;
cursor: pointer;
}
@media only screen and (max-width: 767.98px) {
.c-pagetop {
right: 10px;
bottom: 10px;
}
}
@media print, screen and (min-width: 768px) {
.c-pagetop {
right: 20px;
bottom: 20px;
}
}
@media print {
.c-pagetop {
display: none;
}
}
@media only screen and (max-width: 767.98px) {
.c-pagetop img {
height: 40px;
}
}
@media print, screen and (min-width: 768px) {
.c-pagetop img {
height: clamp(40px, 3.7vw, 45px);
}
}
/* スクロールアニメーション
--------------------------------------------------------- */
[data-io] {
opacity: 0;
}
@media print {
[data-io] {
opacity: 1;
transition: none;
transform: none;
animation: none;
}
}
@media (prefers-reduced-motion: reduce) {
[data-io] {
opacity: 1 !important;
transition: none !important;
transform: none !important;
animation: none !important;
}
}
[data-io=slide-in-bottom] {
transition: opacity .9s, transform .9s;
transform: translateY(60px);
}
[data-io=slide-in-bottom].is-appear {
opacity: 1;
transform: none;
}
[data-io=fade-in].is-appear {
animation-name: io-fade-in;
animation-duration: 2s;
animation-timing-function: cubic-bezier(.33, 1, .68, 1);
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes io-fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
[data-io=blur-in] {
filter: blur(12px);
transition: opacity .9s, filter .9s;
}
[data-io=blur-in].is-appear {
opacity: 1;
filter: blur(0);
}
[data-io=text-rise] {
overflow: hidden;
opacity: 1;
--text-rise-delay: 0s;
}
[data-io=text-rise] > span {
display: block;
transition: transform 1s cubic-bezier(.165, .84, .44, 1);
transition-delay: var(--text-rise-delay);
transform: translate3d(0, 105%, 0);
will-change: transform;
}
[data-io=text-rise].is-appear > span {
transform: translate3d(0, 0, 0);
}
[data-io=heading-letter] {
opacity: 1;
}
[data-io=heading-letter] > span {
display: inline-block;
opacity: 0;
transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1);
transform: translateX(-.5em);
}
[data-io=heading-letter].is-appear > span {
opacity: 1;
transform: none;
}
[data-io=heading-letter] > span:nth-child(1) {
transition-delay: calc(var(--heading-letter-delay, 0s) + 0s);
}
[data-io=heading-letter] > span:nth-child(2) {
transition-delay: calc(var(--heading-letter-delay, 0s) + .04s);
}
[data-io=heading-letter] > span:nth-child(3) {
transition-delay: calc(var(--heading-letter-delay, 0s) + .08s);
}
[data-io=heading-letter] > span:nth-child(4) {
transition-delay: calc(var(--heading-letter-delay, 0s) + .12s);
}
[data-io=heading-letter] > span:nth-child(5) {
transition-delay: calc(var(--heading-letter-delay, 0s) + .16s);
}
[data-io=heading-letter] > span:nth-child(6) {
transition-delay: calc(var(--heading-letter-delay, 0s) + .2s);
}
[data-io=heading-letter] > span:nth-child(7) {
transition-delay: calc(var(--heading-letter-delay, 0s) + .24s);
}
[data-io=heading-letter] > span:nth-child(8) {
transition-delay: calc(var(--heading-letter-delay, 0s) + .28s);
}
[data-io=heading-letter] > span:nth-child(9) {
transition-delay: calc(var(--heading-letter-delay, 0s) + .32s);
}
[data-io=heading-letter] > span:nth-child(10) {
transition-delay: calc(var(--heading-letter-delay, 0s) + .36s);
}
[data-io=heading-letter] > span:nth-child(11) {
transition-delay: calc(var(--heading-letter-delay, 0s) + .4s);
}
[data-io=heading-letter] > span:nth-child(12) {
transition-delay: calc(var(--heading-letter-delay, 0s) + .44s);
}
[data-io=heading-letter] > span:nth-child(13) {
transition-delay: calc(var(--heading-letter-delay, 0s) + .48s);
}
[data-io=heading-letter] > span:nth-child(14) {
transition-delay: calc(var(--heading-letter-delay, 0s) + .52s);
}
[data-io=heading-letter] > span:nth-child(15) {
transition-delay: calc(var(--heading-letter-delay, 0s) + .56s);
}
[data-io=heading-letter] > span:nth-child(16) {
transition-delay: calc(var(--heading-letter-delay, 0s) + .6s);
}
[data-io=heading-letter] > span:nth-child(17) {
transition-delay: calc(var(--heading-letter-delay, 0s) + .64s);
}
[data-io=heading-letter] > span:nth-child(18) {
transition-delay: calc(var(--heading-letter-delay, 0s) + .68s);
}
[data-io=heading-letter] > span:nth-child(19) {
transition-delay: calc(var(--heading-letter-delay, 0s) + .72s);
}
[data-io=heading-letter] > span:nth-child(20) {
transition-delay: calc(var(--heading-letter-delay, 0s) + .76s);
}
[data-io=heading-letter] > span:nth-child(21) {
transition-delay: calc(var(--heading-letter-delay, 0s) + .8s);
}
[data-io=heading-letter] > span:nth-child(22) {
transition-delay: calc(var(--heading-letter-delay, 0s) + .84s);
}
[data-io=heading-letter] > span:nth-child(23) {
transition-delay: calc(var(--heading-letter-delay, 0s) + .88s);
}
[data-io=heading-letter] > span:nth-child(24) {
transition-delay: calc(var(--heading-letter-delay, 0s) + .92s);
}
[data-io=heading-letter] > span:nth-child(25) {
transition-delay: calc(var(--heading-letter-delay, 0s) + .96s);
}
[data-io=heading-letter] > span:nth-child(26) {
transition-delay: calc(var(--heading-letter-delay, 0s) + 1s);
}
[data-io=heading-letter] > span:nth-child(27) {
transition-delay: calc(var(--heading-letter-delay, 0s) + 1.04s);
}
[data-io=heading-letter] > span:nth-child(28) {
transition-delay: calc(var(--heading-letter-delay, 0s) + 1.08s);
}
[data-io=heading-letter] > span:nth-child(29) {
transition-delay: calc(var(--heading-letter-delay, 0s) + 1.12s);
}
[data-io=heading-letter] > span:nth-child(30) {
transition-delay: calc(var(--heading-letter-delay, 0s) + 1.16s);
}
/* フォーム
--------------------------------------------------------- */
@media only screen and (max-width: 767.98px) {
.c-form select,
.c-form input[type=file] {
width: 100%;
}
}
.c-form .required input[type=text],
.c-form .required input[type=tel],
.c-form .required input[type=email],
.c-form .required input[type=password],
.c-form .required select,
.c-form .required textarea {
background-color: color-mix(in srgb, var(--color-accent) 50%, white);
}
.c-form .item-xs {
display: inline-block;
width: 75px;
}
.c-form .item-ss {
display: inline-block;
width: 110px;
}
.c-form .item-s {
display: inline-block;
width: 220px;
}
@media print, screen and (min-width: 768px) {
.c-form .item-m {
display: inline-block;
width: 300px;
}
}
@media print, screen and (min-width: 992px) {
.c-form .item-m {
width: 350px;
}
}
@media print, screen and (min-width: 992px) {
.c-form .item-l {
display: inline-block;
width: 450px;
}
}
.c-form__word {
color: #989898;
font-size: clamp(.75rem, .128vw + .721rem, .875rem);
}
:has(+ .c-form__word) {
margin-right: .5em;
}
.c-form__word + * {
margin-left: .5em;
}
.c-form__note {
margin-top: .5em;
color: var(--color-accent);
font-size: clamp(.813rem, .128vw + .784rem, .938rem);
}
.c-form__btn {
display: flex;
margin-top: clamp(45px, 5vw, 70px);
justify-content: center;
gap: clamp(15px, 1.8vw, 25px);
}
/* ローディング
--------------------------------------------------------- */
.c-loading {
position: absolute;
z-index: 9999;
margin: auto;
background-color: var(--color-base);
inset: 0;
}
.is-hero-ready .c-loading {
animation: fadeOut .8s linear forwards;
pointer-events: none;
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.c-loading__in {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 30px;
height: 30px;
transform: translate(-50%, -50%);
}
.c-loading__in::after,
.c-loading__in::before {
position: absolute;
top: 40%;
left: 50%;
display: block;
width: 100%;
height: 100%;
margin-left: -50%;
border-radius: 110%;
content: '';
}
.c-loading__in::after {
border: 1px solid transparent;
border-top-color: var(--color-main);
animation: loading .75s linear infinite;
}
.c-loading__in::before {
border: 1px solid #d6d6d6;
}
@keyframes loading {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 埋め込みコンポーネント
--------------------------------------------------------- */
.c-embed {
font-size: 0;
}
.c-embed iframe,
.c-embed video {
width: 100% !important;
height: 100% !important;
}
@media only screen and (max-width: 767.98px) {
.c-embed.--gmap iframe {
aspect-ratio: 1;
}
}
@media print, screen and (min-width: 768px) {
.c-embed.--gmap iframe {
aspect-ratio: 16/9;
}
}
@media screen and (min-width: 1200px) {
.c-embed.--gmap iframe {
aspect-ratio: 5/2;
}
}
.c-inview {
position: relative;
overflow: hidden;
}
.c-inview::before {
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 0;
height: 100%;
background: var(--color-main);
content: '';
}
.c-inview__inner {
opacity: 0;
transform: scale(1.1);
}
.c-inview.move::before {
animation: barAnime forwards 1.5s 1 ease .1s normal;
}
.c-inview.move .c-inview__inner {
animation: photoAnime forwards 1.5s 1 ease .5s normal;
}
@keyframes barAnime {
0% {
left: 0;
width: 0;
}
50% {
left: 0;
width: 100%;
}
51% {
left: 0;
width: 100%;
}
68% {
left: 0;
width: 100%;
}
100% {
left: 100%;
width: 0;
}
}
@keyframes photoAnime {
0% {
opacity: 0;
transform: scale(1.1);
}
50% {
opacity: 0;
transform: scale(1.1);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* ========================================================================
/*
/* Project
/*
========================================================================= */
/* ヘッダー
--------------------------------------------------------- */
.p-header {
height: 100%;
background-color: #fff;
align-items: center;
}
@media screen and (max-width: 991.98px) {
.p-header {
display: flex;
padding-left: 1.5vw;
}
}
@media print, screen and (min-width: 992px) {
.p-header {
display: grid;
padding-left: clamp(25px, 2.2vw, 40px);
column-gap: 4%;
grid-template: 'logo util'/auto 1fr;
}
}
.p-header__logo {
font-size: 0;
grid-area: logo;
}
.p-header__logo a {
text-decoration: none;
}
.p-header__logo img {
width: auto;
}
@media screen and (max-width: 991.98px) {
.p-header__logo img {
height: clamp(38px, 5.9vw, 42px);
}
}
@media print, screen and (min-width: 992px) {
.p-header__logo img {
height: clamp(45px, 3.3vw, 51px);
}
}
.p-header__util {
grid-area: util;
}
@media print, screen and (min-width: 992px) {
.p-header__util {
height: 100%;
}
}
@media print, screen and (min-width: 992px) {
.p-header__block {
display: grid;
height: 100%;
column-gap: clamp(25px, 2.2vw, 40px);
grid-template: 'nav btn'/1fr auto;
}
}
.p-header__nav {
grid-area: nav;
}
.p-header__btn {
grid-area: btn;
}
@media screen and (max-width: 991.98px) {
.p-header__btn {
margin-top: clamp(40px, 6.7vw, 50px);
}
}
.p-header__btn a {
display: block;
background-color: var(--color-main);
color: #fff;
text-align: center;
text-decoration: none;
font-weight: 600;
line-height: 1.5;
transition: background-color .3s, color .3s;
}
@media screen and (max-width: 991.98px) {
.p-header__btn a {
padding: .9em 1.2em;
font-size: clamp(1rem, .158vw + .964rem, 1.063rem);
}
}
@media print, screen and (min-width: 992px) {
.p-header__btn a {
display: flex;
height: 100%;
min-width: clamp(200px, 15.5vw, 251px);
padding: .5em 1.5em .6em 1.3em;
font-size: clamp(1rem, .128vw + .971rem, 1.125rem);
align-items: center;
justify-content: center;
}
}
.p-header__btn a::after {
position: relative;
top: .05em;
display: inline-block;
height: .84em;
margin-left: 1.2em;
background-color: currentColor;
content: '';
transition: background-color .3s;
-webkit-mask-image: var(--icon-mail);
mask-image: var(--icon-mail);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
aspect-ratio: 112.6/77.48;
}
@media print {
.p-header__btn a::after {
-webkit-print-color-adjust: exact;
}
}
@media print, screen and (min-width: 992px) {
.p-header__btn a:is(:hover, :active, :focus) {
background-color: var(--color-sub);
}
}
/* フッター
--------------------------------------------------------- */
.p-footer {
position: relative;
z-index: 0;
background-color: #343434;
color: #fff;
font-feature-settings: 'palt' 1;
}
@media print, screen and (min-width: 992px) {
.p-footer::before {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: calc((100% - min(92%, 1470px)) / 2);
height: 100%;
background-color: var(--color-main);
content: '';
}
}
.p-footer__inner {
margin-inline: auto;
}
@media print, screen and (min-width: 992px) {
.p-footer__inner {
display: grid;
width: min(92%, 1470px);
grid-template: 'left right'/1fr auto;
}
}
.p-footer__left {
background-color: var(--color-main);
grid-area: left;
}
@media screen and (max-width: 991.98px) {
.p-footer__left {
padding: 9vw 4vw 10vw;
}
}
@media print, screen and (min-width: 992px) {
.p-footer__left {
padding-top: clamp(90px, 7.4vw, 130px);
padding-right: clamp(40px, 3.4vw, 60px);
padding-bottom: clamp(90px, 7.2vw, 125px);
}
}
.p-footer__logo img {
display: block;
width: clamp(240px, 23.4vw, 312px);
height: auto;
}
.p-footer__info {
margin-top: clamp(40px, 4.6vw, 65px);
line-height: 1.65;
}
@media screen and (max-width: 991.98px) {
.p-footer__info {
font-size: .9375rem;
}
}
@media print, screen and (min-width: 992px) {
.p-footer__info {
font-size: clamp(.875rem, .099vw + .813rem, .938rem);
}
}
.p-footer__address {
margin-top: 1.3em;
}
.p-footer__address .map-icon {
position: relative;
top: -.15em;
display: inline-block;
margin-left: .2em;
color: #fff;
transition: opacity .3s;
}
.p-footer__address .map-icon svg {
width: auto;
height: 1.1em;
}
.p-footer__address .map-icon svg .st0 {
transition: fill .3s;
fill: currentColor;
}
@media print, screen and (min-width: 992px) {
.p-footer__address .map-icon:is(:hover, :active, :focus) {
opacity: .7;
}
}
.p-footer__tel {
margin-top: 1.3em;
}
.p-footer__copyright {
letter-spacing: .1em;
}
@media screen and (max-width: 991.98px) {
.p-footer__copyright {
margin-top: clamp(45px, 7.8vw, 60px);
font-size: .75rem;
}
}
@media print, screen and (min-width: 992px) {
.p-footer__copyright {
margin-top: clamp(45px, 3.4vw, 57px);
font-size: clamp(.688rem, .099vw + .626rem, .75rem);
}
}
.p-footer__right {
background-color: #343434;
grid-area: right;
}
@media screen and (max-width: 991.98px) {
.p-footer__right {
padding-top: 7vw;
padding-right: 4vw;
padding-left: 4vw;
}
}
@media print, screen and (min-width: 992px) {
.p-footer__right {
display: flex;
flex-direction: column;
padding-top: clamp(95px, 7.9vw, 140px);
padding-bottom: 1px;
padding-left: clamp(50px, 4.4vw, 78px);
}
}
@media print, screen and (min-width: 992px) {
.p-footer__nav {
padding-right: clamp(20px, 1.7vw, 30px);
}
}
.p-footer__deco {
margin-top: auto;
pointer-events: none;
}
@media screen and (max-width: 991.98px) {
.p-footer__deco {
margin-top: 1.5em;
}
}
.p-footer__deco img {
display: block;
}
@media screen and (max-width: 991.98px) {
.p-footer__deco img {
width: 60%;
height: auto;
}
}
@media print, screen and (min-width: 992px) {
.p-footer__deco img {
width: 100%;
height: clamp(200px, 19.1vw, 356px);
}
}
/* お問い合わせ導線
--------------------------------------------------------- */
.p-inquiry {
position: relative;
z-index: 0;
overflow: hidden;
}
@media screen and (max-width: 991.98px) {
.p-inquiry {
padding-top: clamp(80px, 14.1vw, 110px);
padding-bottom: clamp(80px, 14.1vw, 110px);
background: url('../images/common/bg-inquiry-sp.png') center top/cover no-repeat;
}
}
@media print, screen and (min-width: 992px) {
.p-inquiry {
padding-top: clamp(180px, 15.4vw, 280px);
padding-bottom: clamp(120px, 10.3vw, 187px);
background: url('../images/common/bg-inquiry.png') center top/cover no-repeat;
}
}
@media print, screen and (min-width: 992px) {
.p-inquiry.--home {
margin-top: calc(clamp(50px, 4.5vw, 80px) * -1);
}
}
.p-inquiry__inner {
width: min(92%, 1470px);
margin-inline: auto;
}
@media print, screen and (min-width: 992px) {
.p-inquiry__content {
max-width: 1220px;
margin-inline: auto;
}
}
@media print, screen and (min-width: 768px) {
.p-inquiry .c-heading {
margin-bottom: 3.5em;
}
}
.p-inquiry__txt {
letter-spacing: .1em;
font-weight: 500;
line-height: 1.75;
font-feature-settings: 'palt';
}
@media screen and (max-width: 991.98px) {
.p-inquiry__txt {
padding-right: clamp(0px, 1.5vw, 20px);
}
}
@media screen and (max-width: 991.98px) {
.p-inquiry__contact {
margin-top: clamp(40px, 6.7vw, 50px);
}
}
@media print, screen and (min-width: 992px) {
.p-inquiry__contact {
display: flex;
margin-top: clamp(35px, 2.7vw, 45px);
column-gap: clamp(30px, 2.3vw, 40px);
align-items: center;
}
}
.p-inquiry__tel {
color: var(--color-main);
letter-spacing: .05em;
font-weight: 600;
font-family: var(--font-family-secondary);
line-height: 1;
}
@media screen and (max-width: 991.98px) {
.p-inquiry__tel {
font-size: clamp(1.875rem, .633vw + 1.733rem, 2.125rem);
}
}
@media print, screen and (min-width: 992px) {
.p-inquiry__tel {
font-size: clamp(2.375rem, .992vw + 1.76rem, 3rem);
}
}
.p-inquiry__tel small {
margin-right: .24em;
font-weight: 600;
}
@media screen and (max-width: 991.98px) {
.p-inquiry__tel small {
font-size: clamp(1rem, .316vw + .929rem, 1.125rem);
}
}
@media print, screen and (min-width: 992px) {
.p-inquiry__tel small {
font-size: clamp(1.375rem, 1.078vw + .707rem, 2rem);
}
}
@media screen and (max-width: 991.98px) {
.p-inquiry__btn {
margin-top: 1.8em;
}
}
.p-inquiry__btn a {
display: inline-block;
border: 1px solid var(--color-main);
background-color: var(--color-main);
color: #fff;
text-align: center;
text-decoration: none;
letter-spacing: .1em;
font-weight: 600;
line-height: 1.75;
transition: background-color .3s, color .3s;
}
@media screen and (max-width: 991.98px) {
.p-inquiry__btn a {
padding: .7em 1.5em .8em;
font-size: clamp(.938rem, .158vw + .902rem, 1rem);
}
}
@media print, screen and (min-width: 992px) {
.p-inquiry__btn a {
display: flex;
padding: 1em 2.3em 1.1em;
font-size: 1rem;
align-items: center;
justify-content: center;
}
}
.p-inquiry__btn a::after {
position: relative;
top: .05em;
display: inline-block;
height: .875em;
margin-left: 2.4em;
background-color: currentColor;
content: '';
transition: background-color .3s;
aspect-ratio: 20/14;
-webkit-mask-image: var(--icon-mail);
mask-image: var(--icon-mail);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
@media print {
.p-inquiry__btn a::after {
-webkit-print-color-adjust: exact;
}
}
@media print, screen and (min-width: 992px) {
.p-inquiry__btn a:is(:hover, :active, :focus) {
background-color: #fff;
color: var(--color-main);
}
}
/* TOP FV
--------------------------------------------------------- */
.p-top-fv {
position: relative;
overflow: hidden;
font-feature-settings: 'palt';
}
.p-top-fv::before {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: -1;
background-image: url('../images/common/bg-wave-fv.png');
background-repeat: no-repeat;
content: '';
}
@media screen and (max-width: 991.98px) {
.p-top-fv::before {
height: 70vw;
background-position: 30vw top;
background-size: 100% 100%;
}
}
@media print, screen and (min-width: 992px) {
.p-top-fv::before {
height: 75.4%;
background-position: right top;
background-size: 100% 100%;
}
}
/* TOP About
--------------------------------------------------------- */
.p-top-about {
position: relative;
z-index: 1;
font-feature-settings: 'palt' 1;
}
@media print, screen and (min-width: 992px) {
.p-top-about {
margin-top: clamp(80px, 6.5vw, 110px);
}
}
.p-top-about__inner {
display: grid;
column-gap: 8%;
margin-inline: auto;
grid-template: 'content deco'/1fr auto;
}
@media screen and (max-width: 991.98px) {
.p-top-about__inner {
padding-left: 4vw;
}
}
@media print, screen and (min-width: 992px) {
.p-top-about__inner {
width: min(92%, 1470px);
}
}
.p-top-about__content {
grid-area: content;
}
@media screen and (max-width: 991.98px) {
.p-top-about__content {
padding-top: clamp(40px, 6.7vw, 50px);
}
}
@media print, screen and (min-width: 992px) {
.p-top-about__content {
padding-top: clamp(50px, 4.1vw, 70px);
}
}
.p-top-about__label {
color: var(--color-main);
letter-spacing: 0;
font-weight: 600;
font-size: clamp(15px, 1.5vw, 20px);
font-family: var(--font-family-secondary);
line-height: 1.4;
}
.p-top-about__headline {
margin-top: clamp(20px, 3vw, 49px);
letter-spacing: .1em;
font-weight: 700;
line-height: 1.67;
}
@media screen and (max-width: 991.98px) {
.p-top-about__headline {
font-size: clamp(1.25rem, .316vw + 1.179rem, 1.375rem);
}
}
@media print, screen and (min-width: 992px) {
.p-top-about__headline {
position: relative;
left: -.1em;
font-size: clamp(2.375rem, 2.451vw + .855rem, 3rem);
}
}
@media screen and (min-width: 1400px) {
.p-top-about__headline {
font-size: clamp(3rem, 3.077vw + .308rem, 4rem);
}
}
.p-top-about__headline strong {
display: inline-flex;
margin-left: .3em;
padding: .1em .34em .2em .4em;
border: 1px solid var(--color-main);
background-color: #fff;
color: var(--color-main);
line-height: 1;
align-items: center;
justify-content: center;
}
.p-top-about__lead {
margin-top: clamp(30px, 3.7vw, 55px);
letter-spacing: .1em;
font-weight: 700;
line-height: 2;
}
@media screen and (max-width: 991.98px) {
.p-top-about__lead {
font-size: clamp(1rem, .158vw + .964rem, 1.063rem);
}
}
@media print, screen and (min-width: 992px) {
.p-top-about__lead {
font-size: clamp(1.25rem, 1.471vw + .338rem, 1.625rem);
}
}
@media screen and (min-width: 1400px) {
.p-top-about__lead {
font-size: clamp(1.625rem, 1.154vw + .615rem, 2rem);
}
}
.p-top-about__lead strong {
color: var(--color-main);
font-weight: inherit;
}
.p-top-about__deco {
font-weight: 600;
font-family: var(--font-family-secondary);
grid-area: deco;
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 34%, rgba(0, 0, 0, .3) 78%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 34%, rgba(0, 0, 0, .3) 78%, transparent 100%);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
writing-mode: vertical-rl;
}
@media screen and (max-width: 991.98px) {
.p-top-about__deco {
padding-top: 40px;
font-size: clamp(2.688rem, 5.854vw + 1.37rem, 5rem);
line-height: .9;
}
}
@media print, screen and (min-width: 992px) {
.p-top-about__deco {
position: relative;
right: -.03em;
padding-top: 2px;
text-align: end;
letter-spacing: 0;
font-size: clamp(9.375rem, 12.255vw + 1.777rem, 12.5rem);
line-height: .89;
}
}
@media screen and (min-width: 1400px) {
.p-top-about__deco {
font-size: clamp(12.5rem, 9.231vw + 4.423rem, 15.5rem);
}
}
@media screen and (max-width: 991.98px) {
.p-top-about__deco span {
margin-bottom: .2em;
}
}
/* TOP Business / Company
--------------------------------------------------------- */
.p-top-business {
position: relative;
z-index: 0;
background: url('../images/top/bg-business.png') center/100% 100% no-repeat;
font-feature-settings: 'palt' 1;
}
@media screen and (max-width: 991.98px) {
.p-top-business {
margin-top: clamp(40px, 6.7vw, 50px);
}
}
@media print, screen and (min-width: 992px) {
.p-top-business {
margin-top: calc(clamp(50px, 4.3vw, 75px) * -1);
}
}
.p-top-business__item {
position: relative;
z-index: 1;
}
@media screen and (max-width: 991.98px) {
.p-top-business__item {
padding-bottom: 60vw;
}
}
.p-top-business__item + .p-top-business__item {
margin-top: clamp(60px, 6.6vw, 90px);
}
@media screen and (min-width: 1600px) {
.p-top-business__item + .p-top-business__item {
margin-top: 64px;
}
}
@media print, screen and (min-width: 992px) {
.p-top-business__item.--business .p-top-business__img {
left: 0;
}
}
@media print, screen and (min-width: 992px) {
.p-top-business__item.--business .p-top-business__body {
padding-right: calc((100% - min(92%, 1222px)) / 2);
padding-left: calc(clamp(400px, 44.1vw, 885px) + clamp(80px, 7.2vw, 130px));
}
}
@media screen and (min-width: 1920px) {
.p-top-business__item.--business .p-top-business__body {
padding-top: 130px;
}
}
@media screen and (max-width: 991.98px) {
.p-top-business__item.--business .p-top-business__btn {
text-align: right;
}
}
@media screen and (min-width: 992px) and (max-width: 1399.98px) {
.p-top-business__item.--business .p-top-business__btn {
text-align: left;
}
}
@media print, screen and (min-width: 992px) {
.p-top-business__item.--company .p-top-business__img {
right: 0;
}
}
@media print, screen and (min-width: 992px) {
.p-top-business__item.--company .p-top-business__body {
padding-right: calc(clamp(400px, 44.1vw, 885px) + clamp(80px, 7.2vw, 130px));
padding-left: calc((100% - min(92%, 1222px)) / 2);
}
}
@media screen and (min-width: 1920px) {
.p-top-business__item.--company .p-top-business__body {
padding-top: 150px;
}
}
@media screen and (max-width: 991.98px) {
.p-top-business__body {
padding-right: 4vw;
padding-left: 4vw;
}
}
@media print, screen and (min-width: 992px) {
.p-top-business__body {
min-height: clamp(500px, 41.2vw, 700px);
padding-top: clamp(30px, 3.8vw, 60px);
}
}
@media screen and (min-width: 1600px) {
.p-top-business__body {
padding-top: clamp(60px, 4.5vw, 100px);
}
}
@media print, screen and (min-width: 992px) {
.p-top-business .c-heading {
margin-bottom: 3.7em;
}
}
.p-top-business__txt {
font-weight: 500;
line-height: 1.75;
}
.p-top-business__txt p + p {
margin-top: 1em;
}
.p-top-business__btn {
margin-top: clamp(50px, 5.3vw, 70px);
}
@media print, screen and (min-width: 992px) {
.p-top-business__btn {
text-align: right;
}
}
.p-top-business__img {
position: absolute;
z-index: 0;
}
@media screen and (max-width: 991.98px) {
.p-top-business__img {
right: 4vw;
bottom: 0;
left: 4vw;
}
}
@media print, screen and (min-width: 992px) {
.p-top-business__img {
top: 0;
width: clamp(400px, 44.1vw, 885px);
height: 100%;
}
}
.p-top-business__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media screen and (max-width: 991.98px) {
.p-top-business__img img {
height: 45vw;
}
}
.p-top-business__img::before {
position: absolute;
bottom: calc(100% - 1px);
z-index: -1;
background-position: left top;
background-size: 100% 100%;
background-repeat: no-repeat;
content: '';
pointer-events: none;
}
@media screen and (max-width: 991.98px) {
.p-top-business__img::before {
height: 10vw;
}
}
.p-top-business__img.--business::before {
left: 0;
width: 57.74%;
background-image: url('../images/common/pic-wave-left.png');
aspect-ratio: 511/205;
}
.p-top-business__img.--company::before {
right: 0;
width: 68.36%;
background-image: url('../images/common/pic-wave-right.png');
aspect-ratio: 605/240;
}
/* 事業内容
--------------------------------------------------------- */
.p-business__inner {
width: min(92%, 1470px);
margin-inline: auto;
}
@media screen and (min-width: 1200px) {
.p-business__inner {
display: grid;
column-gap: clamp(35px, 3.4vw, 70px);
grid-template: 'nav works'/clamp(200px, 15.4vw, 280px) 1fr;
align-items: start;
}
}
@media screen and (max-width: 1199.98px) {
.p-business__nav {
margin-bottom: clamp(35px, 5.8vw, 55px);
}
}
@media screen and (min-width: 1200px) {
.p-business__nav {
position: -webkit-sticky;
position: sticky;
top: calc(var(--header-height-desktop) + 30px);
padding-top: clamp(30px, 2.2vw, 40px);
grid-area: nav;
}
}
.p-business__nav-items {
margin: 0;
padding-left: 0;
list-style: none;
}
@media screen and (max-width: 1199.98px) {
.p-business__nav-items {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
}
@media screen and (max-width: 1199.98px) {
.p-business__nav-item {
font-size: clamp(.875rem, .238vw + .821rem, 1rem);
}
}
@media screen and (min-width: 1200px) {
.p-business__nav-item {
font-size: clamp(.938rem, .139vw + .833rem, 1rem);
}
}
@media screen and (min-width: 1200px) {
.p-business__nav-item + .p-business__nav-item {
margin-top: 12px;
}
}
.p-business__nav-item a {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
border: 2px solid var(--color-main);
background-color: #f7f7f7;
color: var(--color-main);
text-align: center;
text-decoration: none;
font-weight: 700;
line-height: 1.5;
transition: background-color .3s, color .3s;
justify-content: center;
}
@media screen and (max-width: 991.98px) {
.p-business__nav-item a {
padding: .7em .5em;
letter-spacing: .04em;
}
}
@media print, screen and (min-width: 992px) {
.p-business__nav-item a {
padding: .7em .9em;
}
}
@media print, screen and (min-width: 992px) {
.p-business__nav-item a:hover {
background-color: var(--color-main);
color: #fff;
}
}
@media print, screen and (min-width: 992px) {
.p-business__nav-item.is-current a {
background-color: var(--color-main);
color: #fff;
}
}
.p-business__works {
grid-area: works;
}
@media print, screen and (min-width: 992px) {
.p-business__works {
padding-top: clamp(30px, 2.4vw, 40px);
}
}
.p-business__work {
background: linear-gradient(90deg, #fff 0%, #d7d7d7 100%);
}
@media print, screen and (min-width: 992px) {
.p-business__work {
display: grid;
grid-template: 'content img'/1fr auto;
}
}
.p-business__work + .p-business__work {
margin-top: clamp(40px, 4.4vw, 60px);
}
.p-business__work:nth-of-type(even) {
background: linear-gradient(90deg, #d7d7d7 0%, #fff 100%);
}
@media print, screen and (min-width: 992px) {
.p-business__work:nth-of-type(even) {
grid-template: 'img content'/auto 1fr;
}
}
.p-business__work-content {
grid-area: content;
}
@media screen and (max-width: 991.98px) {
.p-business__work-content {
padding: 7vw 4vw 8vw;
}
}
@media print, screen and (min-width: 992px) {
.p-business__work-content {
padding: clamp(55px, 4.6vw, 80px) clamp(45px, 4.3vw, 80px);
}
}
.p-business__work-label {
position: relative;
left: -.05em;
display: flex;
color: #505050;
font-weight: 700;
font-family: var(--font-family-secondary);
line-height: 1;
align-items: baseline;
}
@media screen and (max-width: 991.98px) {
.p-business__work-label {
font-size: clamp(2.188rem, 1.741vw + 1.796rem, 2.875rem);
}
}
@media print, screen and (min-width: 992px) {
.p-business__work-label {
font-size: clamp(3.5rem, 3.664vw + 1.228rem, 5.625rem);
}
}
.p-business__work-word::first-letter {
color: var(--color-main);
}
.p-business__work-num {
color: #3a3a3a;
}
.p-business__work-title {
margin-top: .3em;
margin-bottom: 1.5em;
padding-bottom: .6em;
border-bottom: 1px solid var(--color-main);
font-weight: 600;
line-height: 1.4;
}
@media screen and (max-width: 991.98px) {
.p-business__work-title {
font-size: clamp(1.125rem, .316vw + 1.054rem, 1.25rem);
}
}
@media print, screen and (min-width: 992px) {
.p-business__work-title {
font-size: clamp(1.25rem, .754vw + .782rem, 1.688rem);
}
}
.p-business__work-title span {
position: relative;
padding-left: .9em;
}
.p-business__work-title span::before {
position: absolute;
top: .7em;
left: 0;
width: .5em;
height: 2px;
margin: auto;
background-color: currentColor;
content: '';
}
.p-business__work-title[data-io=text-rise] {
--text-rise-delay: .3s;
}
.p-business__work-txt {
font-weight: 500;
}
@media print, screen and (min-width: 992px) {
.p-business__work-txt {
font-size: clamp(.938rem, .108vw + .871rem, 1rem);
}
}
.p-business__work-img {
grid-area: img;
}
@media screen and (max-width: 991.98px) {
.p-business__work-img {
height: 50vw;
}
}
@media print, screen and (min-width: 992px) {
.p-business__work-img {
width: clamp(300px, 24vw, 400px);
height: 100%;
}
}
.p-business__work-img .c-inview,
.p-business__work-img .c-inview__inner {
height: 100%;
}
.p-business__work-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.p-business__work-img img.pic-design {
object-position: right center;
}
/* 経営理念
--------------------------------------------------------- */
.p-philosophy__inner {
width: min(92%, 1470px);
margin-inline: auto;
}
.p-philosophy__body {
margin-top: clamp(25px, 2.9vw, 40px);
background-color: #fff;
margin-inline: auto;
}
@media only screen and (max-width: 767.98px) {
.p-philosophy__body {
padding: 7vw 4vw 8vw;
}
}
@media print, screen and (min-width: 768px) {
.p-philosophy__body {
padding: clamp(35px, 3.7vw, 65px) clamp(20px, 3vw, 60px);
text-align: center;
}
}
.p-philosophy__copy {
color: #333;
letter-spacing: .05em;
font-weight: 700;
line-height: 1.5;
}
@media only screen and (max-width: 767.98px) {
.p-philosophy__copy {
font-size: clamp(1.313rem, 1.471vw + .982rem, 1.688rem);
}
}
@media print, screen and (min-width: 576px) {
.p-philosophy__copy {
text-align: center;
}
}
@media print, screen and (min-width: 768px) {
.p-philosophy__copy {
font-size: clamp(2rem, 1.389vw + 1.333rem, 3rem);
}
}
.p-philosophy__copy strong {
color: var(--color-main);
font-weight: inherit;
}
.p-philosophy__txt {
margin-top: clamp(20px, 2.2vw, 30px);
font-weight: 700;
font-size: clamp(1rem, .256vw + .942rem, 1.25rem);
line-height: 2;
}
.p-philosophy__message {
width: min(100%, 620px);
margin-top: clamp(35px, 3.5vw, 45px);
padding: .4em 1em;
border: 2px solid var(--color-main);
text-align: center;
font-weight: 600;
font-size: clamp(1.5rem, .897vw + 1.298rem, 2.375rem);
line-height: 1.5;
margin-inline: auto;
}
@media only screen and (max-width: 767.98px) {
.p-philosophy__message {
font-size: clamp(1.188rem, .49vw + 1.077rem, 1.313rem);
}
}
@media print, screen and (min-width: 768px) {
.p-philosophy__message {
font-size: clamp(1.688rem, .608vw + 1.396rem, 2.125rem);
}
}
.p-philosophy__message strong {
color: var(--color-main);
font-weight: inherit;
}
/* 行動指針
--------------------------------------------------------- */
.p-principle {
margin-top: clamp(70px, 9.2vw, 140px);
}
.p-principle__inner {
width: min(92%, 1470px);
margin-inline: auto;
}
.p-principle__body {
margin-top: clamp(25px, 2.9vw, 40px);
padding-top: clamp(30px, 3.1vw, 40px);
padding-bottom: clamp(40px, 4.4vw, 60px);
background-color: #fff;
margin-inline: auto;
}
.p-principle__label {
margin-right: 4vw;
margin-left: 4vw;
background-color: #111;
color: #fff;
text-align: center;
font-weight: 600;
line-height: 1.5;
}
@media only screen and (max-width: 767.98px) {
.p-principle__label {
padding: .4em 1.5em;
letter-spacing: .1em;
font-size: clamp(1.063rem, .245vw + 1.007rem, 1.125rem);
}
}
@media print, screen and (min-width: 768px) {
.p-principle__label {
margin-bottom: 1.5em;
padding: .3em 1.5em;
letter-spacing: .2em;
font-size: clamp(1.125rem, .174vw + 1.042rem, 1.25rem);
}
}
@media print, screen and (min-width: 992px) {
.p-principle__items {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
.p-principle__item {
text-align: center;
}
@media screen and (max-width: 991.98px) {
.p-principle__item {
padding-top: clamp(30px, 6.2vw, 40px);
padding-right: 4vw;
padding-bottom: clamp(40px, 8vw, 50px);
padding-left: 4vw;
}
}
@media print, screen and (min-width: 992px) {
.p-principle__item {
padding-top: clamp(20px, 1.9vw, 30px);
padding-right: clamp(15px, 1.3vw, 20px);
padding-bottom: clamp(30px, 2.6vw, 40px);
padding-left: clamp(15px, 1.3vw, 20px);
}
}
@media screen and (max-width: 991.98px) {
.p-principle__item + .p-principle__item {
border-top: 1px solid #e5e5e5;
}
}
@media print, screen and (min-width: 992px) {
.p-principle__item + .p-principle__item {
border-left: 1px solid #e5e5e5;
}
}
.p-principle__num {
display: flex;
margin-right: auto;
margin-left: auto;
border: 1px solid var(--color-main);
border-radius: 50%;
color: var(--color-main);
letter-spacing: 0;
font-weight: 700;
font-family: var(--font-family-secondary);
line-height: 1;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 991.98px) {
.p-principle__num {
width: clamp(55px, 9.2vw, 70px);
height: clamp(55px, 9.2vw, 70px);
font-size: clamp(1.375rem, .633vw + 1.233rem, 1.625rem);
}
}
@media print, screen and (min-width: 992px) {
.p-principle__num {
width: clamp(60px, 4.5vw, 70px);
height: clamp(60px, 4.5vw, 70px);
font-size: clamp(1.375rem, .385vw + 1.288rem, 1.75rem);
}
}
.p-principle__icon {
margin-top: .3em;
color: #333;
font-size: clamp(1.875rem, .641vw + 1.731rem, 2.5rem);
line-height: 1;
}
@media screen and (max-width: 991.98px) {
.p-principle__icon {
font-size: clamp(3.125rem, 1.582vw + 2.769rem, 3.75rem);
}
}
@media print, screen and (min-width: 992px) {
.p-principle__icon {
font-size: clamp(2.813rem, 1.616vw + 1.81rem, 3.75rem);
}
}
.p-principle__title {
margin-top: .8em;
font-weight: 700;
font-size: clamp(.938rem, .192vw + .894rem, 1.125rem);
line-height: 1.5;
}
@media screen and (max-width: 991.98px) {
.p-principle__title {
font-size: clamp(1.125rem, .158vw + 1.089rem, 1.188rem);
}
}
@media print, screen and (min-width: 992px) {
.p-principle__title {
font-size: clamp(.938rem, .323vw + .737rem, 1.125rem);
}
}
.p-principle__title strong {
color: var(--color-main);
}
.p-principle__txt {
margin-top: 1em;
text-align: left;
font-weight: 500;
line-height: 1.8;
}
@media screen and (max-width: 991.98px) {
.p-principle__txt {
font-size: clamp(.938rem, .158vw + .902rem, 1rem);
}
}
@media screen and (min-width: 768px) and (max-width: 991.98px) {
.p-principle__txt {
text-align: center;
}
}
@media print, screen and (min-width: 992px) {
.p-principle__txt {
font-size: clamp(.813rem, .108vw + .746rem, .875rem);
}
}
.p-principle__message {
margin-top: clamp(20px, 2.2vw, 30px);
text-align: center;
font-weight: 700;
font-size: clamp(1.25rem, .513vw + 1.135rem, 1.75rem);
line-height: 1.6;
}
@media screen and (max-width: 991.98px) {
.p-principle__message {
margin-right: 4vw;
margin-left: 4vw;
font-size: clamp(1.188rem, .475vw + 1.081rem, 1.375rem);
}
}
@media print, screen and (min-width: 992px) {
.p-principle__message {
font-size: clamp(1.375rem, .647vw + .974rem, 1.75rem);
}
}
.p-principle__message strong {
color: var(--color-main);
font-weight: inherit;
}
/* ご挨拶
--------------------------------------------------------- */
.p-greeting {
margin-top: clamp(70px, 9.2vw, 140px);
}
.p-greeting__inner {
width: min(92%, 1470px);
margin-inline: auto;
}
.p-greeting__body {
margin-top: clamp(25px, 2.9vw, 40px);
}
@media print, screen and (min-width: 992px) {
.p-greeting__body {
display: grid;
column-gap: clamp(60px, 6.2vw, 120px);
grid-template: 'txt person'/1fr clamp(260px, 20.6vw, 340px);
align-items: start;
}
}
.p-greeting__txt {
grid-area: txt;
}
.p-greeting__person {
grid-area: person;
}
@media screen and (max-width: 991.98px) {
.p-greeting__person {
margin-top: clamp(40px, 6.7vw, 50px);
}
}
.p-greeting__img {
text-align: center;
}
@media screen and (max-width: 991.98px) {
.p-greeting__img {
max-width: clamp(280px, 47.3vw, 360px);
margin-right: auto;
margin-left: auto;
}
}
.p-greeting__img img {
width: 100%;
height: auto;
}
.p-greeting__name {
margin-top: .8em;
text-align: center;
font-weight: 700;
line-height: 1.5;
}
@media only screen and (max-width: 767.98px) {
.p-greeting__name {
font-size: clamp(1.125rem, .49vw + 1.015rem, 1.25rem);
}
}
@media print, screen and (min-width: 768px) {
.p-greeting__name {
font-size: clamp(1.125rem, .174vw + 1.042rem, 1.25rem);
}
}
.p-greeting__name span {
margin-right: 1em;
}
/* 会社概要
--------------------------------------------------------- */
.p-profile {
margin-top: clamp(70px, 9.2vw, 140px);
}
.p-profile__inner {
width: min(92%, 1470px);
margin-inline: auto;
}
@media print, screen and (min-width: 768px) {
.p-profile__tel {
display: flex;
column-gap: 2em;
flex-wrap: wrap;
}
}
@media only screen and (max-width: 767.98px) {
.p-profile__tel-item + .p-profile__tel-item {
margin-top: .3em;
}
}
/* 会社所在地
--------------------------------------------------------- */
.p-access {
margin-top: clamp(70px, 9.2vw, 140px);
}
.p-access__inner {
width: min(92%, 1470px);
margin-inline: auto;
}
.p-access__map {
margin-top: clamp(25px, 2.9vw, 40px);
}
/* お電話でのお問い合わせ
--------------------------------------------------------- */
.p-enquire {
overflow: hidden;
width: min(92%, 1470px);
background-color: #fff;
margin-inline: auto;
}
.p-enquire__title {
padding: .5em 1.2em;
background-color: var(--color-main);
color: #fff;
text-align: center;
font-weight: 500;
line-height: 1.6;
}
@media only screen and (max-width: 767.98px) {
.p-enquire__title {
font-size: clamp(1.063rem, .245vw + 1.007rem, 1.125rem);
}
}
@media print, screen and (min-width: 768px) {
.p-enquire__title {
font-size: clamp(1.188rem, .174vw + 1.104rem, 1.313rem);
}
}
@media only screen and (max-width: 767.98px) {
.p-enquire__content {
padding: 3vw 4vw 5vw;
}
}
@media print, screen and (min-width: 768px) {
.p-enquire__content {
padding-top: clamp(25px, 2.2vw, 35px);
padding-right: clamp(30px, 2.9vw, 50px);
padding-bottom: clamp(25px, 2.2vw, 35px);
padding-left: clamp(30px, 2.9vw, 50px);
}
}
.p-enquire__box {
text-align: center;
}
.p-enquire__num {
position: relative;
display: inline-block;
letter-spacing: .01em;
font-weight: 600;
font-size: clamp(1.875rem, 1.154vw + 1.615rem, 3rem);
font-family: var(--font-family-secondary);
line-height: 1.3;
grid-area: num;
}
@media only screen and (max-width: 767.98px) {
.p-enquire__num {
margin-top: 16px;
}
}
.p-enquire__num::before {
position: relative;
top: .03em;
display: inline-block;
height: .7em;
margin-right: .3em;
background-color: var(--color-main);
content: '';
-webkit-mask-image: var(--icon-phone);
mask-image: var(--icon-phone);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
aspect-ratio: 30.85/30.87;
}
@media print {
.p-enquire__num::before {
-webkit-print-color-adjust: exact;
}
}
.p-enquire__time {
margin-top: clamp(20px, 2vw, 25px);
padding-top: clamp(20px, 2vw, 25px);
border-top: 1px solid #e4dfd7;
font-size: clamp(.875rem, .256vw + .817rem, 1.125rem);
}
@media print, screen and (min-width: 768px) {
.p-enquire__time {
display: flex;
column-gap: 6%;
justify-content: center;
align-items: center;
gap: clamp(30px, 2.5vw, 40px);
}
}
.p-enquire__time-in {
padding-top: clamp(6px, .7vw, 10px);
padding-right: 1.7em;
padding-bottom: clamp(6px, .7vw, 10px);
padding-left: clamp(6px, .7vw, 10px);
background-color: var(--color-base);
}
@media only screen and (max-width: 767.98px) {
.p-enquire__time-in + .p-enquire__time-in {
margin-top: 10px;
}
}
.p-enquire__time dl {
display: flex;
align-items: center;
gap: 1.2em;
}
@media print, screen and (min-width: 768px) {
.p-enquire__time dl {
justify-content: center;
}
}
.p-enquire__time dt {
display: inline-block;
min-width: clamp(120px, 11.8vw, 150px);
padding: .2em 1.6em;
background-color: var(--color-sub);
color: #fff;
text-align: center;
font-weight: 500;
}
.p-enquire__time dd {
font-weight: 500;
}
@media only screen and (max-width: 767.98px) {
.p-enquire__time dd {
font-size: clamp(1rem, .245vw + .945rem, 1.063rem);
}
}
@media print, screen and (min-width: 768px) {
.p-enquire__time dd {
font-size: clamp(1.063rem, .087vw + 1.021rem, 1.125rem);
}
}
/* メールでのお問い合わせ
--------------------------------------------------------- */
.p-contact__txt p + p {
margin-top: 1em;
}
.p-contact__txt .c-badge {
position: relative;
top: -.2em;
}
.p-contact__note {
margin-top: clamp(30px, 3.5vw, 50px);
font-size: clamp(.875rem, .064vw + .861rem, .938rem);
}
.p-contact__att {
margin-top: 1.5em;
color: var(--color-main);
font-weight: 400;
font-size: clamp(.875rem, .128vw + .846rem, 1rem);
line-height: 1.6;
}
@media print, screen and (min-width: 992px) {
.p-contact__att {
text-align: center;
}
}
/* プライバシーポリシー
--------------------------------------------------------- */
.p-policy {
margin-top: clamp(40px, 4.4vw, 60px);
}
.p-policy__scroll-box {
overflow-y: auto;
border: 1px solid #e8eaeb;
background-color: #fff;
font-size: .875rem;
}
@media only screen and (max-width: 767.98px) {
.p-policy__scroll-box {
max-height: 190px;
padding: 1.4em;
}
}
@media print, screen and (min-width: 768px) {
.p-policy__scroll-box {
max-height: 310px;
padding: 2.3em;
}
}
@media print {
.p-policy__scroll-box {
max-height: 100%;
}
}
.p-policy__item {
margin-top: clamp(30px, 4vw, 40px);
}
.p-policy__item-title {
margin-bottom: 1.2em;
font-weight: 500;
font-size: 1rem;
line-height: 1.5;
}
.p-policy__item p,
.p-policy__item ul {
margin-bottom: 1.5em;
}
.p-policy__item a {
word-wrap: break-word;
}
.p-policy__agree {
margin-top: 1em;
font-size: clamp(.938rem, .096vw + .916rem, 1rem);
line-height: 1.6;
-webkit-user-select: none;
user-select: none;
}
@media only screen and (max-width: 767.98px) {
.p-policy__agree {
display: flex;
letter-spacing: .03em;
font-size: .8125rem;
justify-content: center;
}
}
@media print, screen and (min-width: 768px) {
.p-policy__agree {
text-align: center;
}
}
.p-policy__agree .form-check {
align-items: center;
}
@media print, screen and (min-width: 768px) {
.p-policy__agree [type=checkbox] {
width: 1.2em;
height: 1.2em;
margin-right: .4em;
}
}
/* ========================================================================
/*
/* Utility
/*
========================================================================= */
/* typography
--------------------------------------------------------- */
.u-kome {
position: relative;
padding-left: 1.2em;
}
.u-kome::before {
position: absolute;
top: 0;
left: 0;
content: '※';
}
.u-kome.--inline {
display: inline;
padding-left: 0;
}
.u-kome.--inline::before {
position: static;
margin-right: .2em;
}
.u-kome.--important {
color: var(--color-main);
}
.u-kome.--mark-important::before {
color: var(--color-main);
}
/* ------------------------------------------------------------------------
/* 印刷用
------------------------------------------------------------------------- */
@media print {
html {
font-size: 10px !important;
}
}
@page {
margin: 8mm;
size: A4 portrait;
}