@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:hover img,
.thumb a:active img,
.thumb a:focus img {
opacity: .7;
transition: .2s;
}
@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;
border-radius: 3px;
}
@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 {
box-sizing: border-box;
touch-action: manipulation;
--icon-map: url('data:image/svg+xml;utf-8,');
--icon-phone: url('data:image/svg+xml;utf-8,');
--icon-fax: url('data:image/svg+xml;utf-8,');
}
body {
color: #202020;
letter-spacing: .09em;
font-weight: 400;
font-family: 'Noto Sans JP', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 2;
font-optical-sizing: auto;
}
@media only screen and (max-width: 767.98px) {
body {
font-size: 1rem;
}
}
@media print, screen and (min-width: 768px) {
body {
font-size: clamp(1.063rem, .081vw + 1.024rem, 1.125rem);
}
}
a {
color: #217fc4;
text-decoration: none;
transition: color .2s;
}
a img {
transition: opacity .2s;
}
a:hover,
a:active,
a:focus {
color: #0a9fde;
text-decoration: none;
}
@media print, screen and (min-width: 992px) {
a:hover img,
a:active img,
a:focus img {
opacity: .7;
}
}
em,
strong {
font-weight: bold;
font-style: normal;
}
button,
input[type=submit],
input[type=button] {
padding: 0;
border: 0;
}
img {
-webkit-backface-visibility: hidden;
}
/* ========================================================================
/*
/* Layout
/*
========================================================================= */
/* 全体
--------------------------------------------------------- */
.l-page-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
@media screen and (max-width: 991.98px) {
.l-page-wrapper {
padding-top: clamp(45px, 7.8vw, 60px);
}
}
@media print {
.l-page-wrapper {
padding-top: 0;
}
}
/* ヘッダー
--------------------------------------------------------- */
.l-header {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 100;
width: 100%;
background-color: #fff;
}
@media screen and (max-width: 991.98px) {
.l-header {
display: flex;
overflow: hidden;
height: clamp(45px, 7.8vw, 60px);
padding-left: 1.5vw;
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, .1);
align-items: center;
}
}
@media print, screen and (min-width: 992px) {
.l-header {
top: clamp(30px, 2.3vw, 40px);
display: grid;
width: min(92%, 1178px);
height: clamp(80px, 6vw, 100px);
margin-right: auto;
margin-left: auto;
padding-right: 10px;
padding-left: clamp(15px, 2vw, 45px);
border-radius: 20px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, .15);
column-gap: clamp(10px, 1.1vw, 20px);
grid-template: 'logo util'/auto auto;
align-items: center;
}
}
@media print {
.l-header {
position: static;
}
}
.l-header__logo {
font-size: 0;
grid-area: logo;
}
.l-header__logo a {
color: #202020;
text-decoration: none;
}
.l-header__logo a:hover img,
.l-header__logo a:active img,
.l-header__logo a:focus img {
opacity: 1;
}
.l-header__logo img {
width: auto;
}
@media screen and (max-width: 991.98px) {
.l-header__logo img {
height: clamp(37px, 5.9vw, 43px);
}
}
@media print, screen and (min-width: 992px) {
.l-header__logo img {
height: clamp(48px, 3.5vw, 58px);
}
}
.l-header__util {
grid-area: util;
}
@media print, screen and (min-width: 992px) {
.l-header__util {
align-self: stretch;
}
}
@media print, screen and (min-width: 992px) {
.l-header__block {
display: grid;
height: 100%;
column-gap: clamp(20px, 1.7vw, 30px);
grid-template: 'nav insta btn'/1fr auto clamp(120px, 9.4vw, 160px);
align-items: center;
}
}
.l-header__nav {
grid-area: nav;
}
.l-header__insta {
grid-area: insta;
}
@media screen and (max-width: 991.98px) {
.l-header__insta {
margin-top: clamp(40px, 6.7vw, 50px);
text-align: center;
}
}
.l-header__insta a {
color: #202020;
text-decoration: none;
}
@media screen and (max-width: 991.98px) {
.l-header__insta a {
display: block;
padding: .4em 1.4em;
border: 2px solid #217fc4;
border-radius: 8px;
color: #217fc4;
}
}
@media print, screen and (min-width: 992px) {
.l-header__insta a {
font-size: clamp(1.5rem, .496vw + 1.192rem, 1.813rem);
}
}
.l-header__insta a:hover,
.l-header__insta a:active {
color: #217fc4;
}
@media screen and (max-width: 991.98px) {
.l-header__insta .fa-instagram {
position: relative;
top: .1em;
font-size: 130%;
}
}
.l-header__insta .txt {
margin-left: .4em;
font-weight: 500;
font-size: clamp(1.063rem, .158vw + 1.027rem, 1.125rem);
line-height: 1.5;
}
@media print, screen and (min-width: 992px) {
.l-header__insta .txt {
display: none;
}
}
.l-header__btn {
grid-area: btn;
}
@media screen and (max-width: 991.98px) {
.l-header__btn {
margin-top: 20px;
}
}
@media print, screen and (min-width: 992px) {
.l-header__btn {
height: 100%;
padding-top: 10px;
padding-bottom: 10px;
}
}
.l-header__btn a {
border: 2px solid #217fc4;
background-color: #217fc4;
color: #fff;
text-align: center;
text-decoration: none;
letter-spacing: .095em;
font-weight: 800;
line-height: 1.5;
transition: background-color .2s, color .2s;
}
@media screen and (max-width: 991.98px) {
.l-header__btn a {
display: block;
padding: .8em 1.4em;
border-radius: 8px;
font-size: clamp(1rem, .158vw + .964rem, 1.063rem);
}
}
@media print, screen and (min-width: 992px) {
.l-header__btn a {
display: flex;
height: 100%;
padding: .6em 1.4em;
border-radius: 20px;
font-size: clamp(1rem, .298vw + .815rem, 1.188rem);
align-items: center;
justify-content: center;
}
}
@media print, screen and (min-width: 992px) {
.l-header__btn a:hover,
.l-header__btn a:active,
.l-header__btn a:focus {
background-color: #fff;
color: #217fc4;
}
}
/* コンテンツ
--------------------------------------------------------- */
.l-contents {
flex: 1 0 auto;
overflow: hidden;
}
/* 背景用
--------------------------------------------------------- */
.bg-pattern {
position: relative;
z-index: 2;
padding-top: clamp(50px, 6.4vw, 100px);
}
.bg-pattern::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: url('../images/common/bg-pattern2.png') center top -32vw/100% repeat-y;
content: '';
}
.bg-pattern.--home {
padding-top: 0;
}
/* フッター
--------------------------------------------------------- */
.l-footer {
padding-top: clamp(50px, 6.6vw, 105px);
padding-bottom: clamp(40px, 5.1vw, 80px);
}
@media print {
.l-footer {
page-break-inside: avoid;
}
}
.l-footer__inner {
width: min(92%, 1470px);
margin-right: auto;
margin-bottom: clamp(40px, 4.5vw, 67px);
margin-left: auto;
padding-bottom: clamp(40px, 4.4vw, 65px);
border-bottom: 1px solid #e0e0e0;
}
@media print, screen and (min-width: 992px) {
.l-footer__inner {
display: grid;
column-gap: 3%;
grid-template-columns: 41% 1fr;
grid-template-areas: 'info util';
}
}
@media screen and (min-width: 1400px) {
.l-footer__inner {
grid-template-columns: 50% 1fr;
}
}
.l-footer__info {
grid-area: info;
}
@media print, screen and (min-width: 992px) {
.l-footer__info {
font-size: clamp(1rem, .198vw + .877rem, 1.125rem);
}
}
.l-footer__logo {
display: flex;
align-items: center;
gap: 14px;
}
@media screen and (max-width: 991.98px) {
.l-footer__logo-mark {
height: clamp(45px, 4.2vw, 55px);
}
}
@media print, screen and (min-width: 992px) {
.l-footer__logo-mark {
height: clamp(50px, 4.5vw, 86px);
}
}
@media screen and (max-width: 991.98px) {
.l-footer__logo-txt {
height: clamp(22px, 2vw, 26px);
}
}
@media print, screen and (min-width: 992px) {
.l-footer__logo-txt {
height: clamp(25px, 1.9vw, 33px);
}
}
.l-footer__address {
margin-top: clamp(15px, 1.5vw, 20px);
font-weight: 500;
}
.l-footer__address .map-icon {
position: relative;
top: -.1em;
margin-left: .2em;
}
.l-footer__address .map-icon svg {
width: auto;
height: .9em;
}
.l-footer__address .map-icon svg .st0 {
transition: fill .3s;
fill: #202020;
}
@media print, screen and (min-width: 768px) {
.l-footer__address .map-icon:hover svg .st0 {
fill: #0a9fde;
}
}
.l-footer__contact a {
text-decoration: none;
}
.l-footer__contact a [data-action=call] {
color: #202020;
}
.l-footer__util {
grid-area: util;
}
@media screen and (max-width: 991.98px) {
.l-footer__util {
margin-top: clamp(30px, 5.2vw, 40px);
}
}
@media print, screen and (min-width: 992px) {
.l-footer__util {
padding-top: clamp(10px, 1vw, 20px);
}
}
@media print, screen and (min-width: 992px) {
.l-footer__tel {
display: flex;
gap: clamp(20px, 2vw, 40px);
}
}
.l-footer__num {
color: #217fc4;
letter-spacing: 0;
font-weight: 800;
font-family: 'Nunito Sans', sans-serif;
line-height: 1.2;
}
@media screen and (max-width: 991.98px) {
.l-footer__num {
font-size: clamp(1.625rem, .475vw + 1.518rem, 1.813rem);
}
}
@media print, screen and (min-width: 992px) {
.l-footer__num {
font-size: clamp(1.625rem, 1.389vw + .764rem, 2.5rem);
}
}
.l-footer__num small {
margin-right: .5em;
font-weight: 800;
font-size: clamp(1rem, .122vw + .973rem, 1.125rem);
}
.l-footer__num a {
text-decoration: none;
}
.l-footer__num a [data-action=call] {
color: #217fc4;
}
.l-footer__time {
margin-top: clamp(15px, 1.5vw, 20px);
font-weight: 500;
font-size: clamp(.875rem, .122vw + .848rem, 1rem);
line-height: 1.8;
}
@media screen and (max-width: 991.98px) {
.l-footer__nav {
padding-right: 4vw;
padding-left: 4vw;
}
}
.l-footer__copyright {
margin-top: clamp(40px, 4.2vw, 60px);
color: #a4a4a4;
text-align: center;
letter-spacing: .05em;
font-weight: 500;
font-size: clamp(12px, 1.1vw, 15px);
}
/* ========================================================================
/*
/* Component
/*
========================================================================= */
/* ドロワー
--------------------------------------------------------- */
.drawer__btn {
position: absolute;
top: 0;
right: 0;
z-index: 1000;
width: clamp(45px, 7.8vw, 60px);
height: clamp(45px, 7.8vw, 60px);
outline: none !important;
background: #217fc4;
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: .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: .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;
justify-content: flex-end;
gap: clamp(15px, 1.4vw, 28px);
}
}
@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: #202020;
text-decoration: none;
font-weight: 500;
line-height: 1.5;
transition: background-color .2s, color .2s;
}
@media screen and (max-width: 991.98px) {
.c-global-nav__item > a {
padding: .9em 1em;
text-align: left;
letter-spacing: .07em;
font-size: 1.0625rem;
}
}
@media print, screen and (min-width: 992px) {
.c-global-nav__item > a {
padding-top: .9em;
padding-bottom: .9em;
text-align: center;
letter-spacing: .09em;
font-size: clamp(.938rem, .298vw + .753rem, 1.125rem);
}
}
.c-global-nav__item > a::after {
position: absolute;
z-index: -1;
display: inline-block;
height: clamp(8px, .8vw, 10px);
margin: auto;
border-radius: 50%;
background-color: transparent;
content: '';
transition: background-color .3s;
aspect-ratio: 1;
}
@media screen and (max-width: 991.98px) {
.c-global-nav__item > a::after {
top: 0;
bottom: 0;
left: 0;
}
}
@media print, screen and (min-width: 992px) {
.c-global-nav__item > a::after {
right: 0;
bottom: 0;
left: 0;
}
}
@media print, screen and (min-width: 992px) {
.c-global-nav__item > a:hover,
.c-global-nav__item > a:focus {
color: #217fc4;
}
}
@media print, screen and (min-width: 992px) {
.c-global-nav__item > a:hover::after,
.c-global-nav__item > a:focus::after {
background-color: #217fc4;
}
}
.c-global-nav__item.is-current > a {
color: #217fc4;
}
.c-global-nav__item.is-current > a::after {
background-color: #217fc4;
}
/* フッターナビ
--------------------------------------------------------- */
.c-footer-nav__items {
display: flex;
flex-wrap: wrap;
}
@media print, screen and (min-width: 768px) {
.c-footer-nav__items {
justify-content: center;
}
}
.c-footer-nav__item {
position: relative;
padding-top: .1em;
padding-bottom: .1em;
line-height: 1.6;
}
.c-footer-nav__item:not(:last-of-type) {
margin-right: clamp(8px, 1.4vw, 25px);
padding-right: clamp(8px, 1.4vw, 25px);
}
.c-footer-nav__item:not(:last-of-type)::before {
position: absolute;
top: .2em;
right: 0;
bottom: 0;
width: 1px;
margin-top: auto;
margin-bottom: auto;
background-color: #e0e0e0;
content: '';
}
.c-footer-nav__item a {
color: #202020;
font-weight: 500;
}
/* コンテナ
--------------------------------------------------------- */
.c-container {
max-width: min(92vw, 1470px);
margin-right: auto;
margin-left: auto;
}
/* セクション
--------------------------------------------------------- */
.c-section {
margin-top: clamp(80px, 10.2vw, 160px);
}
.c-section:first-child {
margin-top: 0;
}
/* ページタイトル
--------------------------------------------------------- */
.c-page-heading {
position: relative;
z-index: 1;
overflow: hidden;
height: clamp(140px, 31.4vw, 600px);
margin-bottom: clamp(50px, 6.4vw, 100px);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
text-align: center;
}
.c-page-heading::before,
.c-page-heading::after {
position: absolute;
z-index: 2;
content: '';
}
.c-page-heading::before {
top: 0;
left: 0;
width: 15%;
background: url('../images/common/hero-cover-left.png') left top/100% 100% no-repeat;
aspect-ratio: 433/469;
}
.c-page-heading::after {
right: 0;
bottom: 0;
width: 25%;
background: url('../images/common/hero-cover-right.png') left top/100% 100% no-repeat;
aspect-ratio: 1013/937;
}
.c-page-heading.--sales {
background-image: url('../images/sales/bg-page-heading.jpg');
}
.c-page-heading.--other {
background-image: url('../images/other/bg-page-heading.jpg');
background-position: center 33%;
}
.c-page-heading.--case {
background-image: url('../images/case/bg-page-heading.jpg');
background-position: center bottom;
}
.c-page-heading.--shop {
background-image: url('../images/shop/bg-page-heading.jpg');
background-position: left 75%;
}
.c-page-heading.--contact {
background-image: url('../images/contact/bg-page-heading.jpg');
background-position: center bottom;
}
.c-page-heading__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
@media print, screen and (min-width: 992px) {
.c-page-heading__inner {
padding-top: clamp(70px, 6.4vw, 120px);
}
}
.c-page-heading__inner::before {
position: absolute;
z-index: -1;
background-color: rgba(0, 0, 0, .3);
content: '';
inset: 0;
}
.c-page-heading__en,
.c-page-heading__title {
color: #fff;
}
.c-page-heading__en {
text-shadow: 0 4px 15px rgba(0, 0, 0, .1);
letter-spacing: 0;
font-weight: 800;
font-size: clamp(1.875rem, 3.049vw + 1.189rem, 5rem);
font-family: 'Nunito Sans', sans-serif;
line-height: 1.6;
line-height: 1.3;
}
.c-page-heading__title {
text-shadow: 0 4px 15px rgba(0, 0, 0, .1);
letter-spacing: .09em;
font-weight: 700;
font-size: clamp(.875rem, .366vw + .793rem, 1.25rem);
line-height: 1.5;
}
/* キャッチコピー
--------------------------------------------------------- */
.c-copy {
margin-bottom: 1.2em;
font-weight: 500;
font-size: clamp(1.063rem, .61vw + .925rem, 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 {
word-break: break-all;
}
.c-table.--style-a thead {
border-top: 1px solid #0a9fde;
border-right: 1px solid #0a9fde;
border-left: 1px solid #0a9fde;
}
.c-table.--style-a thead th {
padding: .4em 1.4em;
border-bottom: 1px solid #0a9fde;
background-color: #0a9fde;
color: #fff;
text-align: center;
font-weight: 500;
}
.c-table.--style-a thead th:not(:last-of-type) {
border-right: 1px solid #41bbef;
}
.c-table.--style-a tbody {
border-top: 1px solid #e8eaeb;
border-right: 1px solid #e8eaeb;
border-left: 1px solid #e8eaeb;
}
.c-table.--style-a tbody th {
border-bottom: 1px solid #e8eaeb;
}
@media print, screen and (min-width: 768px) {
.c-table.--style-a tbody th {
border-right: 1px solid #e8eaeb;
}
}
.c-table.--style-a tbody td {
border-bottom: 1px solid #e8eaeb;
}
.c-table.--style-a tbody td:not(:last-of-type) {
border-right: 1px solid #e8eaeb;
}
@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-color: #f0f7fa;
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 #e8eaeb;
}
@media only screen and (max-width: 767.98px) {
.c-table.--style-a.--lineup tbody th {
width: 30%;
text-align: left;
}
}
@media only screen and (max-width: 767.98px) {
.c-table.--style-b {
border: 1px solid #e1e2e3;
}
}
@media print, screen and (min-width: 768px) {
.c-table.--style-b tr:first-of-type th,
.c-table.--style-b tr:first-of-type td {
padding-top: 0;
}
}
@media only screen and (max-width: 767.98px) {
.c-table.--style-b tr:not(:last-child) td {
border-bottom: 1px solid #e1e2e3;
}
}
@media print, screen and (min-width: 768px) {
.c-table.--style-b th,
.c-table.--style-b td {
padding: 1.7em .4em;
}
}
.c-table.--style-b th {
font-weight: normal;
font-weight: 500;
}
@media only screen and (max-width: 767.98px) {
.c-table.--style-b th {
padding: .3em 1.4em;
border-bottom: 1px solid #e1e2e3;
background-color: #f0f7fa;
text-align: center;
}
}
@media print, screen and (min-width: 768px) {
.c-table.--style-b th {
border-bottom: 1px solid #217fc4;
}
}
@media only screen and (max-width: 767.98px) {
.c-table.--style-b td {
padding: 1em 1.4em;
}
}
@media print, screen and (min-width: 768px) {
.c-table.--style-b td {
padding-left: 2em;
border-bottom: 1px solid #e1e1e1;
}
}
@media print, screen and (min-width: 768px) {
.c-table.--price tbody th {
width: 40%;
}
}
@media only screen and (max-width: 767.98px) {
.c-table.--price tbody td {
text-align: center;
}
}
@media print, screen and (min-width: 768px) {
.c-table.--price tbody td {
text-align: right;
}
}
.c-table.--schedule th,
.c-table.--schedule td {
text-align: center;
}
@media print, screen and (min-width: 768px) {
.c-table.--schedule thead th {
width: 14.2857142857%;
padding: .5em .1em;
letter-spacing: .05em;
font-size: clamp(.813rem, .244vw + .696rem, 1rem);
}
}
@media print, screen and (min-width: 768px) {
.c-table.--schedule tbody td {
padding: 1.2em .1em;
letter-spacing: .05em;
font-size: clamp(.813rem, .406vw + .618rem, 1.125rem);
}
}
@media print, screen and (min-width: 768px) {
.c-table.--rental tbody th {
width: 25%;
}
}
@media print, screen and (min-width: 768px) {
.c-table.--shop tbody th {
width: 30%;
}
}
.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%);
}
@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(220px, 22.6vw, 270px);
}
}
@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: #bf0000;
color: #fff;
font-weight: normal;
font-size: .625rem;
line-height: 1.4;
}
@media only screen and (max-width: 767.98px) {
.c-heading {
margin-bottom: 1.8em;
}
}
@media print, screen and (min-width: 768px) {
.c-heading {
margin-bottom: 2.5em;
}
}
.c-heading + * {
margin-top: 0 !important;
}
.c-heading__en,
.c-heading__title {
color: #166fb0;
}
.c-heading__en {
position: relative;
left: -.04em;
letter-spacing: 0;
font-weight: 800;
font-size: clamp(1.875rem, 3.049vw + 1.189rem, 5rem);
font-family: 'Nunito Sans', sans-serif;
line-height: 1.1;
}
.c-heading__title {
letter-spacing: .09em;
font-weight: 700;
font-size: clamp(.875rem, .244vw + .82rem, 1.125rem);
line-height: 1.1;
}
.c-heading.--wh .c-heading__en,
.c-heading.--wh .c-heading__title {
color: #fff;
}
@media print, screen and (min-width: 768px) {
.c-heading.--center {
text-align: center;
}
}
.c-heading-bar {
margin-bottom: 1.6em;
padding-left: .8em;
border-left: clamp(3px, .4vw, 4px) solid #0a9fde;
font-weight: bold;
font-size: clamp(1.063rem, .192vw + 1.019rem, 1.188rem);
line-height: 1.5;
}
@media only screen and (max-width: 767.98px) {
.c-heading-bar {
font-size: 1rem;
}
}
.c-heading-overlap {
border-bottom: 2px solid #edf1f2;
line-height: 0;
}
@media only screen and (max-width: 767.98px) {
.c-heading-overlap {
margin-bottom: 1.8em;
}
}
@media print, screen and (min-width: 768px) {
.c-heading-overlap {
margin-bottom: 2.5em;
}
}
.c-heading-overlap__txt {
display: inline-block;
margin-bottom: .4em;
color: #166fb0;
font-weight: bold;
font-size: clamp(1.25rem, .61vw + 1.113rem, 1.875rem);
line-height: 1.6;
}
@media print, screen and (min-width: 768px) {
.c-heading-overlap__txt::after {
position: relative;
top: calc(2px + .4em);
display: block;
border-top: 2px solid #217fc4;
content: '';
}
}
.c-heading-overlap__txt small {
margin-left: 1em;
color: #0a9fde;
font-size: clamp(1rem, .122vw + .973rem, 1.125rem);
}
.c-heading-overlap--static {
position: relative;
padding-bottom: 3px;
border-bottom: 2px solid #edf1f2;
color: #166fb0;
font-weight: bold;
font-size: 1.8rem;
line-height: 1.5;
}
.c-heading-overlap--static::after {
position: absolute;
bottom: -2px;
display: block;
width: 20%;
border-bottom: 2px solid #217fc4;
content: ' ';
}
/* キービジュアル
--------------------------------------------------------- */
.c-key-visual {
position: relative;
z-index: 1;
overflow: hidden;
margin-bottom: clamp(60px, 10.3vw, 182px);
}
@media print, screen and (min-width: 992px) {
.c-key-visual::before {
position: absolute;
z-index: 2;
background: url('../images/top/key-visual-bg.png') center/cover no-repeat;
content: '';
inset: 0;
}
}
@media screen and (max-width: 991.98px) {
.c-key-visual::before,
.c-key-visual::after {
position: absolute;
z-index: 2;
content: '';
}
}
@media screen and (max-width: 991.98px) {
.c-key-visual::before {
top: 0;
left: 0;
width: 30%;
background: url('../images/common/hero-cover-left.png') left top/100% 100% no-repeat;
aspect-ratio: 433/469;
}
}
@media screen and (max-width: 991.98px) {
.c-key-visual::after {
right: 0;
bottom: 0;
width: 50%;
background: url('../images/common/hero-cover-right.png') left top/100% 100% no-repeat;
aspect-ratio: 1013/937;
}
}
.c-key-visual__content {
position: absolute;
z-index: 3;
inset: 0;
}
@media screen and (max-width: 991.98px) {
.c-key-visual__content {
display: flex;
flex-direction: column;
align-items: space-between;
justify-content: center;
gap: clamp(30px, 5.2vw, 40px);
}
}
@media print, screen and (min-width: 992px) {
.c-key-visual__copy,
.c-key-visual__txt {
position: absolute;
}
}
.c-key-visual__copy {
display: flex;
align-items: center;
}
@media screen and (max-width: 991.98px) {
.c-key-visual__copy {
margin-left: 4vw;
}
}
@media print, screen and (min-width: 992px) {
.c-key-visual__copy {
top: clamp(35px, 2.8vw, 49px);
bottom: 0;
left: clamp(55px, 4.7vw, 87px);
}
}
@media screen and (max-width: 991.98px) {
.c-key-visual__copy img {
width: clamp(340px, 54.7vw, 400px);
}
}
@media print, screen and (min-width: 992px) {
.c-key-visual__copy img {
width: clamp(450px, 40.4vw, 759px);
}
}
@media screen and (max-width: 991.98px) {
.c-key-visual__txt {
margin-right: 10vw;
text-align: right;
}
}
@media print, screen and (min-width: 992px) {
.c-key-visual__txt {
right: clamp(45px, 3.8vw, 68px);
bottom: clamp(55px, 4.7vw, 87px);
}
}
@media screen and (max-width: 991.98px) {
.c-key-visual__txt img {
width: clamp(250px, 38.5vw, 270px);
}
}
@media print, screen and (min-width: 992px) {
.c-key-visual__txt img {
width: clamp(330px, 28.5vw, 523px);
}
}
.c-key-visual__pagination {
position: absolute;
top: clamp(10px, 2.7vw, 53px);
right: clamp(10px, 1.8vw, 33px) !important;
bottom: 0;
display: flex;
margin: auto;
align-items: center;
}
.c-key-visual__scroll {
position: absolute;
bottom: 0;
left: clamp(12px, 2.1vw, 37px);
z-index: 3;
transform: translateX(-50%);
}
.c-key-visual .swiper-slide img {
width: 100%;
height: auto;
font-size: 0;
object-fit: cover;
}
@media screen and (max-width: 991.98px) {
.c-key-visual .swiper-slide img {
min-height: 50vh;
}
}
@media print, screen and (min-width: 992px) {
.c-key-visual .swiper-slide img {
height: clamp(600px, 53.5vw, 1000px);
}
}
.c-key-visual .swiper-slide img.img01 {
object-position: 60% center;
}
.c-key-visual .swiper-slide img.img02 {
object-position: 70% center;
}
.c-key-visual .swiper-slide img.img03 {
object-position: 60% center;
}
.c-key-visual .swiper-fade .swiper-slide {
transition-property: opacity, transform !important;
pointer-events: none;
}
.c-key-visual .swiper-fade .swiper-slide-active {
pointer-events: auto;
}
.c-key-visual .swiper-pagination-bullets {
position: static !important;
width: 100%;
font-size: 0;
}
.c-key-visual .swiper-pagination .swiper-pagination-bullet {
display: block;
width: 10px;
height: 10px;
background: #fff;
opacity: 1;
}
.c-key-visual .swiper-pagination .swiper-pagination-bullet:not(:last-of-type) {
margin-bottom: 13px;
}
.c-key-visual .swiper-pagination .swiper-pagination-bullet-active {
background: #c3c3c3;
}
/* メディア
--------------------------------------------------------- */
.c-media {
position: relative;
z-index: 1;
overflow: hidden;
}
@media only screen and (max-width: 767.98px) {
.c-media {
border-top-left-radius: clamp(40px, 9.8vw, 70px);
border-bottom-right-radius: clamp(40px, 9.8vw, 70px);
}
}
@media print, screen and (min-width: 768px) {
.c-media {
border-top-left-radius: clamp(100px, 16.1vw, 250px);
border-bottom-right-radius: clamp(100px, 16.1vw, 250px);
}
}
@media screen and (min-width: 1400px) {
.c-media {
border-top-left-radius: clamp(300px, 21.4vw, 426px);
border-bottom-right-radius: clamp(300px, 21.4vw, 426px);
}
}
@media print, screen and (min-width: 768px) {
.c-media {
margin-right: clamp(20px, 2.2vw, 40px);
margin-left: clamp(20px, 2.2vw, 40px);
}
}
.c-media::before {
position: absolute;
z-index: -1;
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
content: '';
inset: 0;
}
.c-media::after {
position: absolute;
z-index: -1;
content: '';
inset: 0;
}
@media only screen and (max-width: 767.98px) {
.c-media::after {
background-color: rgba(2, 85, 143, .4);
background-image: linear-gradient(180deg, rgba(2, 85, 143, .8) 0, transparent max(80%, 80vw));
}
}
@media print, screen and (min-width: 768px) {
.c-media::after {
background-image: linear-gradient(-90deg, rgba(2, 85, 143, .8) 0, transparent max(90%, 90vw));
}
}
@media print, screen and (min-width: 768px) {
.c-media.--rev::after {
background-image: linear-gradient(90deg, rgba(2, 85, 143, .8) 0, transparent max(90%, 90vw));
}
}
@media print, screen and (min-width: 768px) {
.c-media.--rev .c-media__content {
margin-left: 0;
}
}
.c-media.--sales::before {
background-image: url(../images/sales/bg-sales.jpg);
background-position: center bottom;
}
.c-media.--repair::before {
background-image: url(../images/sales/bg-repair.jpg);
}
.c-media.--school::before {
background-image: url(../images/other/bg-school.jpg);
background-position: center;
}
.c-media.--rental::before {
background-image: url(../images/other/bg-rental.jpg);
}
@media print, screen and (min-width: 768px) {
.c-media__inner {
width: min(92%, 1600px);
margin-right: auto;
margin-left: auto;
}
}
.c-media__content {
color: #fff;
}
@media only screen and (max-width: 767.98px) {
.c-media__content {
padding: 11vw 6vw 40vw;
}
}
@media print, screen and (min-width: 768px) {
.c-media__content {
width: max(55vw, 500px);
margin-left: auto;
padding-top: clamp(200px, 19.5vw, 340px);
padding-right: clamp(40px, 4.3vw, 80px);
padding-bottom: clamp(200px, 19.5vw, 340px);
padding-left: clamp(40px, 4.3vw, 80px);
}
}
@media screen and (min-width: 1400px) {
.c-media__content {
width: max(50vw, 500px);
}
}
.c-media__heading {
margin-bottom: clamp(25px, 2.8vw, 40px);
padding-bottom: 1.5em;
border-bottom: 1px solid rgba(255, 255, 255, .4);
}
.c-media__heading-en,
.c-media__heading-title {
color: #fff;
}
.c-media__heading-en {
position: relative;
left: -.04em;
letter-spacing: 0;
font-weight: 800;
font-size: clamp(1.875rem, 3.049vw + 1.189rem, 5rem);
font-family: 'Nunito Sans', sans-serif;
line-height: 1.1;
}
.c-media__heading-title {
letter-spacing: .09em;
font-weight: 700;
font-size: clamp(.875rem, .244vw + .82rem, 1.125rem);
line-height: 1.1;
}
@media print, screen and (min-width: 768px) {
.c-media__lead {
line-height: 2.4;
}
}
.c-media__lead p + p {
margin-top: 1.5em;
}
/* カード
--------------------------------------------------------- */
.c-card__img {
overflow: hidden;
margin-bottom: 24px;
border-radius: clamp(8px, 1.2vw, 20px);
}
@media screen and (max-width: 991.98px) {
.c-card__img {
max-width: 600px;
margin-right: auto;
margin-left: auto;
aspect-ratio: 4/3;
}
}
.c-card__img::before {
border-radius: clamp(8px, 1.2vw, 20px);
}
.c-card__img img {
height: auto;
max-width: 100%;
}
@media screen and (max-width: 991.98px) {
.c-card__img img {
width: 100%;
width: 100%;
height: 100%;
object-fit: cover;
}
}
.c-card__txt {
letter-spacing: .09em;
font-weight: 500;
}
@media print, screen and (min-width: 768px) {
.c-card__txt {
line-height: 1.8;
}
}
.c-card__btn {
margin-top: clamp(30px, 3vw, 40px);
text-align: center;
font-size: 0;
}
/* ボタン
--------------------------------------------------------- */
.c-btn {
position: relative;
z-index: 1;
display: inline-block;
overflow: hidden;
outline: none !important;
color: inherit;
text-align: center;
text-decoration: none;
font-size: inherit;
line-height: 1.5;
cursor: pointer;
transition: border-color .2s, background-color .2s, color .2s;
-webkit-appearance: none;
appearance: none;
}
.c-btn.--primary,
.c-btn.--secondary,
.c-btn.--tertiary {
padding: .5em 1.5em;
border: 2px solid transparent;
border-radius: 9999px;
letter-spacing: .05em;
font-weight: 700;
font-family: 'Nunito Sans', 'Noto Sans JP', sans-serif;
line-height: 1.6;
}
@media only screen and (max-width: 767.98px) {
.c-btn.--primary,
.c-btn.--secondary,
.c-btn.--tertiary {
padding: 1em 2.2em .9em 1.5em;
font-size: clamp(1rem, .158vw + .964rem, 1.063rem);
}
}
@media print, screen and (min-width: 768px) {
.c-btn.--primary,
.c-btn.--secondary,
.c-btn.--tertiary {
padding: 1em 3.3em .9em 2.2em;
font-size: clamp(1rem, .198vw + .877rem, 1.125rem);
}
}
.c-btn.--primary::after,
.c-btn.--secondary::after,
.c-btn.--tertiary::after {
position: absolute;
top: 0;
right: clamp(13px, 1.2vw, 16px);
bottom: 0;
display: flex;
content: '\f054';
font-weight: 900;
font-family: 'Font Awesome 6 Free';
align-items: center;
}
@media screen and (max-width: 991.98px) {
.c-btn.--primary::after,
.c-btn.--secondary::after,
.c-btn.--tertiary::after {
font-size: 87%;
}
}
@media print, screen and (min-width: 992px) {
.c-btn.--primary::after,
.c-btn.--secondary::after,
.c-btn.--tertiary::after {
font-size: 95%;
}
}
.c-btn.--en {
letter-spacing: 0;
font-weight: 900;
}
.c-btn.--primary {
background-color: #217fc4;
color: #fff;
}
.c-btn.--primary:hover,
.c-btn.--primary:active,
.c-btn.--primary:focus {
background-color: #0a9fde;
color: #fff;
}
.c-btn.--secondary {
border-color: #166fb0;
background-color: #fff;
color: #166fb0;
}
.c-btn.--secondary:hover,
.c-btn.--secondary:active,
.c-btn.--secondary:focus {
background-color: #166fb0;
color: #fff;
}
.c-btn.--tertiary {
border-color: #fff;
background-color: #fff;
color: #166fb0;
}
.c-btn.--tertiary:hover,
.c-btn.--tertiary:active,
.c-btn.--tertiary:focus {
border-color: #166fb0;
background-color: #166fb0;
color: #fff;
}
.c-btn.--back {
background-color: #aaa;
}
.c-btn.--back:hover,
.c-btn.--back:active,
.c-btn.--back:focus {
background-color: #858585;
}
.c-btn.--file::before {
position: relative;
top: -.05em;
margin-right: .5em;
content: '\f15c';
font-weight: 400;
font-size: 96%;
font-family: 'Font Awesome 6 Free';
}
.c-btn.--home::before {
position: relative;
top: -.05em;
margin-right: .4em;
content: '\f015';
font-weight: 900;
font-size: 92%;
font-family: 'Font Awesome 6 Free';
}
/* 電話番号リンク
--------------------------------------------------------- */
.c-tel-link a {
text-decoration: none;
}
.c-tel-link a [data-action=call] {
color: #202020;
}
/* ページトップ
--------------------------------------------------------- */
.c-pagetop {
position: fixed;
right: 10px;
bottom: 10px;
z-index: 50;
cursor: pointer;
cursor: pointer;
transition: transform .3s;
}
@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 {
width: clamp(35px, 6.6vw, 40px);
}
}
@media print, screen and (min-width: 768px) {
.c-pagetop img {
width: clamp(30px, 4.3vw, 71px);
}
}
/* スクロールダウン
--------------------------------------------------------- */
.c-scroll-down {
position: absolute;
bottom: 0;
left: 0;
display: flex;
padding-bottom: calc(clamp(60px, 7.5vw, 118px) + 15px);
}
.c-scroll-down__txt {
color: #fff;
letter-spacing: .05em;
font-weight: 500;
font-size: clamp(.688rem, .305vw + .619rem, 1rem);
font-family: 'Nunito Sans', sans-serif;
line-height: 1.2;
writing-mode: vertical-rl;
}
.c-scroll-down__line {
position: absolute;
bottom: 0;
left: 50%;
overflow: hidden;
width: .5vw;
height: clamp(60px, 7.5vw, 118px);
transform: translate(-50%, 0);
}
.c-scroll-down__line::before,
.c-scroll-down__line::after {
position: absolute;
left: 50%;
content: '';
transform: translate(-50%, 0);
}
.c-scroll-down__line::before {
top: 0;
bottom: 0;
width: 1px;
background-color: #fff;
}
.c-scroll-down__line::after {
top: -10px;
bottom: -10px;
width: 2px;
background-color: #217fc4;
animation: scroll 4s linear infinite;
}
@keyframes scroll {
0% {
transform: translate(-50%, -100%);
}
100% {
transform: translate(-50%, 100%);
}
}
/* スクロールアニメーション
--------------------------------------------------------- */
.animate-mask {
transition: -webkit-clip-path 1.2s cubic-bezier(.9, 0, .1, 1);
transition: clip-path 1.2s cubic-bezier(.9, 0, .1, 1);
transition: clip-path 1.2s cubic-bezier(.9, 0, .1, 1), -webkit-clip-path 1.2s cubic-bezier(.9, 0, .1, 1);
}
.animate-mask.--center {
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
}
.animate-mask.--center.is-appear {
-webkit-clip-path: inset(0);
clip-path: inset(0);
}
.animate-mask.--left,
.animate-mask.--right,
.animate-mask.--bottom,
.animate-mask.--top {
--inset-top: 0;
--inset-right: 0;
--inset-bottom: 0;
--inset-left: 0;
-webkit-clip-path: inset(var(--inset-top) var(--inset-right) var(--inset-bottom) var(--inset-left));
clip-path: inset(var(--inset-top) var(--inset-right) var(--inset-bottom) var(--inset-left));
}
.animate-mask.--left {
--inset-left: 100%;
}
.animate-mask.--left.is-appear {
--inset-left: 0;
}
.animate-mask.--right {
--inset-right: 100%;
}
.animate-mask.--right.is-appear {
--inset-right: 0;
}
.animate-mask.--bottom {
--inset-bottom: 100%;
}
.animate-mask.--bottom.is-appear {
--inset-bottom: 0;
}
.animate-mask.--top {
--inset-top: 100%;
}
.animate-mask.--top.is-appear {
--inset-top: 0;
}
.animate-cover {
position: relative;
display: inline-block;
overflow: hidden;
}
.animate-cover::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(45deg, #0070c0, #00c09b);
content: '';
animation-duration: 1.2s;
animation-timing-function: cubic-bezier(.9, 0, .1, 1);
animation-fill-mode: forwards;
}
.animate-cover.is-wh::after {
background-color: #fff;
}
.animate-cover[data-delay='1000']::after {
animation-delay: 1s;
}
.animate-cover[data-delay='1300']::after {
animation-delay: 1.3s;
}
.animate-cover[data-delay='1600']::after {
animation-delay: 1.6s;
}
.animate-cover.--left::after {
transform: translateX(-100%);
}
.animate-cover.--left.is-appear::after {
animation-name: cover-left;
}
@keyframes cover-left {
40%,
60% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
.animate-cover.--right::after {
transform: translateX(100%);
}
.animate-cover.--right.is-appear::after {
animation-name: cover-right;
}
@keyframes cover-right {
40%,
60% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
.animate-cover.--top::after {
transform: translateY(-100%);
}
.animate-cover.--top.is-appear::after {
animation-name: cover-top;
}
@keyframes cover-top {
40%,
60% {
transform: translateY(0);
}
100% {
transform: translateY(100%);
}
}
.animate-cover.--bottom::after {
transform: translateY(100%);
}
.animate-cover.--bottom.is-appear::after {
animation-name: cover-bottom;
}
@keyframes cover-bottom {
40%,
60% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}
.animate-cover__content {
opacity: 0;
}
.animate-cover.is-appear .animate-cover__content {
animation-name: content;
animation-duration: .6s;
animation-fill-mode: forwards;
}
@keyframes content {
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.animate-fade-in {
opacity: 0;
}
.animate-fade-in.is-appear {
animation-name: fade-in;
animation-duration: .7s;
animation-timing-function: cubic-bezier(.33, 1, .68, 1);
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@media print {
.animate-fade-in {
opacity: 1;
transform: none;
}
}
.animate-zoom-in {
opacity: 0;
}
.animate-zoom-in.is-appear {
animation-name: zoom-in;
animation-duration: .8s;
animation-timing-function: cubic-bezier(.25, 1, .5, 1);
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes zoom-in {
0% {
opacity: 0;
transform: scale(.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@media print {
.animate-zoom-in {
opacity: 1;
transform: none;
}
}
.animate-slide-in-left,
.animate-slide-in-right,
.animate-slide-in-top,
.animate-slide-in-bottom {
opacity: 0;
transition: opacity .9s, transform .9s;
}
.animate-slide-in-left.is-appear,
.animate-slide-in-right.is-appear,
.animate-slide-in-top.is-appear,
.animate-slide-in-bottom.is-appear {
opacity: 1;
transform: none;
}
.animate-slide-in-left[data-delay='500'],
.animate-slide-in-right[data-delay='500'],
.animate-slide-in-top[data-delay='500'],
.animate-slide-in-bottom[data-delay='500'] {
transition-delay: .5s;
}
.animate-slide-in-left[data-delay='1000'],
.animate-slide-in-right[data-delay='1000'],
.animate-slide-in-top[data-delay='1000'],
.animate-slide-in-bottom[data-delay='1000'] {
transition-delay: 1s;
}
.animate-slide-in-left[data-delay='1500'],
.animate-slide-in-right[data-delay='1500'],
.animate-slide-in-top[data-delay='1500'],
.animate-slide-in-bottom[data-delay='1500'] {
transition-delay: 1.5s;
}
@media print {
.animate-slide-in-left,
.animate-slide-in-right,
.animate-slide-in-top,
.animate-slide-in-bottom {
opacity: 1;
transform: none;
}
}
.animate-slide-in-left {
transform: translateX(-60px);
}
.animate-slide-in-right {
transform: translateX(60px);
}
.animate-slide-in-top {
transform: translateY(-60px);
}
.animate-slide-in-bottom {
transform: translateY(60px);
}
.animate-slide-up {
display: block;
overflow: hidden;
}
.animate-slide-up.is-appear .animate-slide-up__inner {
transform: translateX(0);
}
.animate-slide-up[data-delay='400'] .animate-slide-up__inner {
transition-delay: .4s;
}
.animate-slide-up[data-delay='500'] .animate-slide-up__inner {
transition-delay: .5s;
}
.animate-slide-up[data-delay='600'] .animate-slide-up__inner {
transition-delay: .6s;
}
.animate-slide-up__inner {
display: inline-block;
transition: transform .8s cubic-bezier(.5, .2, 0, 1) .3s;
transform: translateY(105%);
}
.c-cover-photo {
position: relative;
overflow: hidden;
}
.c-cover-photo::before {
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 0;
height: 100%;
background: #217fc4;
content: '';
}
.c-cover-photo img {
opacity: 0;
transform: scale(1.1);
}
.c-cover-photo.move::before {
animation: barAnime forwards 1.5s 1 ease .1s normal;
}
.c-cover-photo.move img {
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);
}
}
/* フォーム
--------------------------------------------------------- */
@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=email],
.c-form .required input[type=password],
.c-form .required select,
.c-form .required textarea {
background-color: #ffbfbf;
}
.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: 210px;
}
@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, .192vw + .707rem, .875rem);
}
:has(+ .c-form__word) {
margin-right: .5em;
}
.c-form__word + * {
margin-left: .5em;
}
.c-form__btn {
display: flex;
margin-top: clamp(45px, 6.5vw, 70px);
justify-content: center;
gap: clamp(15px, 2.3vw, 25px);
}
/* ローディング
--------------------------------------------------------- */
.c-loading {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
margin: auto;
background-color: #fff;
}
.c-loading.is-ready {
animation: fadeOut .8s linear forwards;
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
pointer-events: none;
}
}
.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: #217fc4;
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;
}
}
/* GSAP
--------------------------------------------------------- */
.js-scroll-show {
opacity: 0;
}
/* ========================================================================
/*
/* Project
/*
========================================================================= */
/* TOP INFORMATION
--------------------------------------------------------- */
.p-top-info {
position: relative;
z-index: 1;
}
@media only screen and (max-width: 767.98px) {
.p-top-info {
padding-bottom: clamp(160px, 38.1vw, 270px);
}
}
@media print, screen and (min-width: 768px) {
.p-top-info {
padding-bottom: clamp(240px, 20.6vw, 330px);
}
}
.p-top-info::before,
.p-top-info::after {
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
content: '';
}
@media only screen and (max-width: 767.98px) {
.p-top-info::before,
.p-top-info::after {
border-top-right-radius: clamp(70px, 15.1vw, 100px);
border-bottom-left-radius: clamp(70px, 15.1vw, 100px);
}
}
@media print, screen and (min-width: 768px) {
.p-top-info::before,
.p-top-info::after {
border-top-right-radius: clamp(100px, 16.1vw, 250px);
border-bottom-left-radius: clamp(100px, 16.1vw, 250px);
}
}
@media screen and (min-width: 1400px) {
.p-top-info::before,
.p-top-info::after {
border-top-right-radius: clamp(300px, 21.4vw, 426px);
border-bottom-left-radius: clamp(300px, 21.4vw, 426px);
}
}
.p-top-info::before {
background-color: #0a9fde;
}
@media only screen and (max-width: 767.98px) {
.p-top-info::before {
right: calc(clamp(6px, 1.9vw, 15px) * -1);
left: calc(clamp(8px, 2.9vw, 25px) * -1);
}
}
@media print, screen and (min-width: 768px) {
.p-top-info::before {
right: calc(clamp(10px, 1.8vw, 40px) * -1);
left: calc(clamp(20px, 3.1vw, 65px) * -1);
}
}
.p-top-info::after {
right: 0;
left: 0;
background-color: #f0f7fa;
}
.p-top-info__inner {
width: min(92%, 1220px);
margin-right: auto;
margin-left: auto;
}
.p-top-info .c-heading {
position: relative;
top: calc(clamp(20px, 2.8vw, 45px) * -1);
}
@media print, screen and (min-width: 768px) {
.p-top-info .c-heading {
margin-bottom: 1.9em;
}
}
.p-top-info__scroll-box {
overflow-y: auto;
width: 100%;
}
@media only screen and (max-width: 767.98px) {
.p-top-info__scroll-box {
max-height: 350px;
}
}
@media print, screen and (min-width: 768px) {
.p-top-info__scroll-box {
max-height: clamp(450px, 39.7vw, 650px);
}
}
@media print {
.p-top-info__scroll-box {
max-height: 100%;
}
}
.p-top-info__scroll-box::-webkit-scrollbar {
width: 4px;
}
@media print, screen and (min-width: 768px) {
.p-top-info__scroll-box::-webkit-scrollbar-track {
background-color: #d2d2d2;
}
}
@media print, screen and (min-width: 768px) {
.p-top-info__scroll-box::-webkit-scrollbar-thumb {
background-color: #969696;
}
}
.p-top-info__items {
padding-right: clamp(10px, 2.3vw, 44px);
}
.p-top-info__item {
padding-top: clamp(30px, 2.8vw, 35px);
padding-bottom: clamp(30px, 3.1vw, 42px);
border-bottom: 1px solid #d9d9d9;
}
.p-top-info__item:first-of-type {
padding-top: 0;
}
.p-top-info__date {
margin-bottom: .5em;
font-weight: 500;
}
@media print, screen and (min-width: 768px) {
.p-top-info__date {
font-size: clamp(15px, 1.3vw, 16px);
}
}
.p-top-info__date .icon-new {
margin-left: .7em;
color: #bf0000;
}
.p-top-info__title {
letter-spacing: .09em;
font-weight: 700;
font-size: clamp(1.125rem, .366vw + 1.043rem, 1.5rem);
line-height: 1.6;
}
@media screen and (max-width: 991.98px) {
.p-top-info__title {
margin-bottom: .5em;
}
}
@media print, screen and (min-width: 992px) {
.p-top-info__title {
margin-bottom: .2em;
}
}
.p-top-info__txt {
letter-spacing: .05em;
font-weight: 500;
}
@media only screen and (max-width: 767.98px) {
.p-top-info__txt {
font-size: 1rem;
}
}
@media print, screen and (min-width: 768px) {
.p-top-info__txt {
font-size: clamp(.938rem, .081vw + .899rem, 1rem);
}
}
.p-top-info__files {
display: flex;
margin-top: 15px;
flex-wrap: wrap;
gap: 10px;
}
.p-top-info__file a {
display: inline-block;
padding: .3em 1.85em;
border: 1px solid #e85252;
color: #e85252;
font-weight: 500;
line-height: 1.6;
transition: background-color .2s, color .2s;
}
@media only screen and (max-width: 767.98px) {
.p-top-info__file a {
font-size: .9375rem;
}
}
@media print, screen and (min-width: 768px) {
.p-top-info__file a {
font-size: clamp(.875rem, .081vw + .836rem, .938rem);
}
}
.p-top-info__file a::before {
margin-right: .3em;
color: inherit;
content: '\f1c1';
font-weight: 900;
font-size: inherit;
font-family: 'Font Awesome 6 Free';
line-height: 1;
}
.p-top-info__file a:hover {
background-color: #e85252;
color: #fff;
}
/* TOP SALES・SCHOOL / RENTAL
--------------------------------------------------------- */
.p-top-cards {
position: relative;
z-index: 1;
}
@media only screen and (max-width: 767.98px) {
.p-top-cards {
top: calc(clamp(100px, 19.5vw, 120px) * -1);
margin-bottom: calc(clamp(100px, 19.5vw, 120px) * -1);
}
}
@media print, screen and (min-width: 768px) {
.p-top-cards {
top: calc(clamp(150px, 13.4vw, 220px) * -1);
margin-bottom: calc(clamp(150px, 13.4vw, 220px) * -1);
}
}
.p-top-cards__inner {
width: min(92%, 1220px);
margin-right: auto;
margin-left: auto;
}
@media print, screen and (min-width: 992px) {
.p-top-cards__inner {
display: grid;
column-gap: 30px;
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 991.98px) {
.p-top-cards__item + .p-top-cards__item {
margin-top: clamp(60px, 10.4vw, 80px);
}
}
@media print, screen and (min-width: 768px) {
.p-top-cards .c-heading {
margin-bottom: 1.9em;
}
}
.p-top-cards .c-heading__en {
font-size: clamp(1.875rem, 2.073vw + 1.409rem, 4rem);
}
/* TOP CASE・SHOP INFO
--------------------------------------------------------- */
.p-top-promo {
position: relative;
z-index: 1;
margin-top: clamp(70px, 8.3vw, 127px);
color: #fff;
}
.p-top-promo::before {
position: absolute;
right: 0;
left: 0;
z-index: -1;
background-image: linear-gradient(135deg, #00aae7, #1b72b8);
content: '';
}
@media screen and (max-width: 991.98px) {
.p-top-promo::before {
top: clamp(40px, 7.4vw, 60px);
bottom: 0;
border-top-left-radius: clamp(40px, 8.9vw, 80px);
border-bottom-right-radius: clamp(40px, 8.9vw, 80px);
}
}
@media print, screen and (min-width: 992px) {
.p-top-promo::before {
top: clamp(40px, 4vw, 80px);
bottom: clamp(40px, 4vw, 80px);
border-top-left-radius: clamp(100px, 14.6vw, 250px);
border-bottom-right-radius: clamp(100px, 14.6vw, 250px);
}
}
@media screen and (min-width: 1400px) {
.p-top-promo::before {
border-top-left-radius: clamp(300px, 22.9vw, 478px);
border-bottom-right-radius: clamp(300px, 22.9vw, 478px);
}
}
@media print, screen and (min-width: 992px) {
.p-top-promo__item.--case .p-top-promo__inner {
grid-template: 'content img'/1fr 49.3%;
}
}
@media print, screen and (min-width: 992px) {
.p-top-promo__item.--case .p-top-promo__content {
padding-top: clamp(170px, 13.7vw, 240px);
padding-right: clamp(40px, 6.7vw, 120px);
padding-bottom: clamp(60px, 7vw, 150px);
padding-left: clamp(70px, 10.5vw, 180px);
}
}
@media screen and (min-width: 1400px) {
.p-top-promo__item.--case .p-top-promo__content {
padding-right: clamp(120px, 8.4vw, 165px);
padding-left: clamp(180px, 13.1vw, 264px);
}
}
.p-top-promo__item.--case .p-top-promo__content::before {
background: url('../images/top/en-case.png') left top/cover no-repeat;
aspect-ratio: 771/218;
}
@media screen and (max-width: 991.98px) {
.p-top-promo__item.--case .p-top-promo__content::before {
left: 0;
}
}
@media screen and (max-width: 991.98px) {
.p-top-promo__item.--case .p-top-promo__img {
margin-left: auto;
border-top-left-radius: clamp(12px, 2.4vw, 20px);
border-bottom-left-radius: clamp(12px, 2.4vw, 20px);
}
}
@media print, screen and (min-width: 992px) {
.p-top-promo__item.--case .p-top-promo__img {
margin-bottom: clamp(60px, 6vw, 120px);
border-top-left-radius: clamp(12px, 1.1vw, 20px);
border-bottom-left-radius: clamp(12px, 1.1vw, 20px);
}
}
@media print, screen and (min-width: 992px) {
.p-top-promo__item.--shop .p-top-promo__inner {
grid-template: 'img content'/49.3% 1fr;
}
}
@media print, screen and (min-width: 992px) {
.p-top-promo__item.--shop .p-top-promo__content {
padding-right: clamp(70px, 10.5vw, 180px);
padding-bottom: clamp(170px, 12.4vw, 200px);
padding-left: clamp(40px, 6.7vw, 120px);
}
}
@media screen and (min-width: 1400px) {
.p-top-promo__item.--shop .p-top-promo__content {
padding-right: clamp(180px, 13.1vw, 264px);
padding-left: clamp(120px, 8.4vw, 165px);
}
}
.p-top-promo__item.--shop .p-top-promo__content::before {
background: url('../images/top/en-shop.png') left top/cover no-repeat;
aspect-ratio: 842/218;
}
@media screen and (max-width: 991.98px) {
.p-top-promo__item.--shop .p-top-promo__content::before {
right: 0;
}
}
@media print, screen and (min-width: 992px) {
.p-top-promo__item.--shop .p-top-promo__content::before {
bottom: clamp(20px, 3.3vw, 80px);
}
}
@media screen and (max-width: 991.98px) {
.p-top-promo__item.--shop .p-top-promo__img {
border-top-right-radius: clamp(12px, 2.4vw, 20px);
border-bottom-right-radius: clamp(12px, 2.4vw, 20px);
}
}
@media print, screen and (min-width: 992px) {
.p-top-promo__item.--shop .p-top-promo__img {
border-top-right-radius: clamp(12px, 1.1vw, 20px);
border-bottom-right-radius: clamp(12px, 1.1vw, 20px);
}
}
.p-top-promo__item.--shop .p-top-promo__img img {
object-position: left center;
}
@media screen and (max-width: 991.98px) {
.p-top-promo__item.--shop .p-top-promo__img::before {
border-top-right-radius: clamp(12px, 2.4vw, 20px);
border-bottom-right-radius: clamp(12px, 2.4vw, 20px);
}
}
@media print, screen and (min-width: 992px) {
.p-top-promo__item.--shop .p-top-promo__img::before {
border-top-right-radius: clamp(12px, 1.1vw, 20px);
border-bottom-right-radius: clamp(12px, 1.1vw, 20px);
}
}
@media print, screen and (min-width: 992px) {
.p-top-promo__inner {
display: grid;
}
}
.p-top-promo__content {
position: relative;
z-index: 1;
grid-area: content;
}
@media screen and (max-width: 991.98px) {
.p-top-promo__content {
margin-top: clamp(30px, 5.2vw, 40px);
padding-right: 4vw;
padding-bottom: clamp(70px, 12.6vw, 100px);
padding-left: 4vw;
}
}
.p-top-promo__content::before {
position: absolute;
bottom: 0;
z-index: -1;
width: auto;
content: '';
}
@media screen and (max-width: 991.98px) {
.p-top-promo__content::before {
height: clamp(60px, 10.4vw, 80px);
}
}
@media print, screen and (min-width: 992px) {
.p-top-promo__content::before {
left: 0;
height: clamp(80px, 9.2vw, 140px);
}
}
@media screen and (min-width: 1400px) {
.p-top-promo__content::before {
height: clamp(140px, 10.5vw, 218px);
}
}
@media print, screen and (min-width: 992px) {
.p-top-promo .c-heading {
margin-bottom: 3.5em;
}
}
.p-top-promo__txt {
font-weight: 500;
}
@media print, screen and (min-width: 992px) {
.p-top-promo__txt {
line-height: 1.8;
}
}
.p-top-promo__btn {
margin-top: clamp(35px, 3.6vw, 50px);
}
@media screen and (max-width: 991.98px) {
.p-top-promo__btn {
text-align: center;
}
}
.p-top-promo__img {
grid-area: img;
}
@media screen and (max-width: 991.98px) {
.p-top-promo__img {
width: min(92vw, 700px);
}
}
.p-top-promo__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* TOP ACCESS MAP
--------------------------------------------------------- */
.p-top-access {
margin-top: clamp(80px, 9.7vw, 150px);
}
.p-top-access__inner {
width: min(92%, 1470px);
margin-right: auto;
margin-left: auto;
}
@media print, screen and (min-width: 768px) {
.p-top-access .c-heading {
margin-bottom: 3.7em;
}
}
.p-top-access__map {
font-size: 0;
}
@media print, screen and (min-width: 768px) {
.p-top-access__map {
height: clamp(450px, 37.9vw, 600px);
}
}
.p-top-access__map iframe {
width: 100% !important;
height: 100% !important;
}
@media only screen and (max-width: 767.98px) {
.p-top-access__map iframe {
aspect-ratio: 1;
}
}
/* TOP ACCESS MAP
--------------------------------------------------------- */
.p-top-insta {
margin-top: clamp(80px, 9.7vw, 150px);
}
.p-top-insta__inner {
width: min(92%, 1470px);
margin-right: auto;
margin-left: auto;
}
/* メーカー
--------------------------------------------------------- */
.p-maker {
position: relative;
z-index: 1;
margin-top: clamp(60px, 6.8vw, 100px);
padding-bottom: clamp(80px, 10.2vw, 160px);
}
.p-maker::before {
position: absolute;
right: calc(clamp(50px, 8.5vw, 150px) * -1);
bottom: calc(clamp(50px, 8.5vw, 150px) * -1);
z-index: -1;
width: clamp(300px, 42.4vw, 700px);
background: url('../images/common/bg-pattern.png') left top/100% 100% no-repeat;
content: '';
aspect-ratio: 1;
}
.p-maker__inner {
width: min(92%, 1220px);
margin-right: auto;
margin-left: auto;
}
@media print, screen and (min-width: 992px) {
.p-maker__inner {
display: grid;
column-gap: 5%;
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 991.98px) {
.p-maker__item + .p-maker__item {
margin-top: clamp(50px, 8.9vw, 70px);
}
}
.p-maker__lists {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(8px, 1.2vw, 20px);
}
.p-maker__lists li {
border-radius: clamp(6px, .7vw, 10px);
background-image: linear-gradient(135deg, #00aae7, #1b72b8);
color: #fff;
text-align: center;
font-weight: 500;
}
@media screen and (max-width: 991.98px) {
.p-maker__lists li {
padding: .7em 1em;
font-size: clamp(.875rem, .316vw + .804rem, 1rem);
}
}
@media print, screen and (min-width: 992px) {
.p-maker__lists li {
padding: .8em 1.2em;
font-size: clamp(.938rem, .397vw + .691rem, 1.188rem);
}
}
/* 料金表
--------------------------------------------------------- */
.p-price {
margin-top: clamp(80px, 9.7vw, 150px);
}
.p-price__inner {
width: min(92%, 1220px);
margin-right: auto;
margin-left: auto;
}
/* 教室時間割
--------------------------------------------------------- */
.p-schedule {
margin-top: clamp(70px, 8.9vw, 140px);
}
.p-schedule__inner {
width: min(92%, 1220px);
margin-right: auto;
margin-left: auto;
}
@media only screen and (max-width: 767.98px) {
.p-schedule__tbl {
margin-right: 4vw;
margin-left: 4vw;
}
}
@media print, screen and (min-width: 768px) {
.p-schedule__tbl {
width: min(96%, 1220px);
margin-right: auto;
margin-left: auto;
}
}
/* 貸し出しについて
--------------------------------------------------------- */
.p-rental {
margin-top: clamp(80px, 9.7vw, 150px);
}
.p-rental__inner {
width: min(92%, 1220px);
margin-right: auto;
margin-left: auto;
}
/* 商品ラインナップ
--------------------------------------------------------- */
.p-category__inner {
width: min(92%, 1590px);
margin-right: auto;
margin-left: auto;
}
.p-category__nav {
left: 0;
z-index: 50;
width: 100%;
margin-bottom: clamp(50px, 7.2vw, 120px);
}
.p-category__nav.is-fixed {
position: fixed;
}
@media only screen and (max-width: 767.98px) {
.p-category__nav-in {
margin-right: 10px;
margin-left: 10px;
}
}
@media print, screen and (min-width: 768px) {
.p-category__nav-in {
width: min(92%, 1590px);
margin-right: auto;
margin-left: auto;
}
}
.p-category__nav-header {
position: relative;
padding: .2em 1em;
border-radius: clamp(6px, .6vw, 8px);
background-color: #202020;
color: #fff;
text-align: center;
font-size: 1rem;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
@media print, screen and (min-width: 768px) {
.p-category__nav-header {
display: none;
}
}
@media only screen and (max-width: 767.98px) {
.p-category__nav-header::before {
margin-right: .5em;
color: inherit;
content: '\f0c9';
font-weight: 900;
font-size: 90%;
font-family: 'Font Awesome 6 Free';
line-height: 1;
}
}
@media only screen and (max-width: 767.98px) {
.p-category__nav-header::after {
position: absolute;
top: 0;
right: .7em;
bottom: 0;
display: flex;
color: rgba(255, 255, 255, .5);
content: '\f067';
font-weight: 900;
font-size: 80%;
font-family: 'Font Awesome 6 Free';
line-height: 1;
align-items: center;
}
}
@media only screen and (max-width: 767.98px) {
.p-category__nav-header.is-open::after {
content: '\f068';
}
}
@media only screen and (max-width: 767.98px) {
.p-category__nav-box {
display: none;
}
}
@media print, screen and (min-width: 768px) {
.p-category__nav-box {
display: block !important;
}
}
.p-category__nav-lists {
display: grid;
}
@media only screen and (max-width: 767.98px) {
.p-category__nav-lists {
padding-top: 7px;
grid-template-columns: repeat(2, 1fr);
gap: 7px;
}
}
@media print, screen and (min-width: 768px) {
.p-category__nav-lists {
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
}
@media screen and (min-width: 1200px) {
.p-category__nav-lists {
grid-template-columns: repeat(4, 1fr);
}
}
.p-category__nav li {
position: relative;
}
.p-category__nav li.is-current a {
background-color: #fff;
color: #217fc4;
}
.p-category__nav li a {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
padding: 1em 1.2em 1em;
border: 2px solid #217fc4;
border-radius: clamp(6px, .6vw, 8px);
background-color: #217fc4;
color: #fff;
text-decoration: none;
letter-spacing: .05em;
font-weight: 500;
line-height: 1.5;
transition: .3s;
justify-content: center;
align-items: center;
}
@media only screen and (max-width: 767.98px) {
.p-category__nav li a {
padding: .9em 2em .8em 1.4em;
font-size: clamp(15px, 2.7vw, 16px);
}
}
@media print, screen and (min-width: 768px) {
.p-category__nav li a {
padding: .9em 2.6em .8em 1.8em;
font-size: clamp(1.063rem, .244vw + .946rem, 1.25rem);
}
}
.p-category__nav li a::after {
position: absolute;
top: 0;
right: clamp(10px, 1.1vw, 15px);
bottom: 0;
display: flex;
content: '\f054';
font-weight: 900;
font-family: 'Font Awesome 6 Free';
align-items: center;
}
@media screen and (max-width: 991.98px) {
.p-category__nav li a::after {
font-size: 87%;
}
}
@media print, screen and (min-width: 992px) {
.p-category__nav li a::after {
font-size: 95%;
}
}
@media print, screen and (min-width: 768px) {
.p-category__nav li a:hover,
.p-category__nav li a:active {
background-color: #fff;
color: #217fc4;
}
}
.p-category__heading {
margin-bottom: clamp(40px, 5.1vw, 80px);
}
@media print, screen and (min-width: 768px) {
.p-category__heading {
text-align: center;
}
}
.p-category__title {
font-weight: 500;
line-height: 1.5;
}
@media only screen and (max-width: 767.98px) {
.p-category__title {
font-size: clamp(1.313rem, 2.206vw + .816rem, 1.875rem);
}
}
@media print, screen and (min-width: 768px) {
.p-category__title {
font-size: clamp(2rem, 1.055vw + 1.494rem, 2.813rem);
}
}
.p-category__desc {
margin-top: .5em;
font-size: clamp(.938rem, .305vw + .869rem, 1.25rem);
line-height: 1.6;
}
@media print, screen and (min-width: 768px) {
.p-category__items {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(40px, 3.3vw, 50px) 20px;
}
}
@media screen and (min-width: 1200px) {
.p-category__items {
grid-template-columns: repeat(4, 1fr);
}
}
.p-category__item {
position: relative;
border: 1px solid #dce9ee;
border-radius: clamp(8px, 1.2vw, 20px);
background-color: #f0f7fa;
}
@media only screen and (max-width: 767.98px) {
.p-category__item {
padding: 15px 15px 20px;
}
}
@media print, screen and (min-width: 768px) {
.p-category__item {
display: flex;
flex-direction: column;
padding-top: clamp(12px, 1vw, 15px);
padding-right: clamp(12px, 1vw, 15px);
padding-bottom: clamp(16px, 1.3vw, 20px);
padding-left: clamp(12px, 1vw, 15px);
}
}
@media only screen and (max-width: 767.98px) {
.p-category__item + .p-category__item {
margin-top: clamp(30px, 6.2vw, 40px);
}
}
.p-category__item a {
display: block;
color: #202020;
text-decoration: none;
}
@media print, screen and (min-width: 768px) {
.p-category__item a {
display: flex;
flex-direction: column;
flex-grow: 1;
}
}
.p-category__item a:hover .p-category__item-pic img,
.p-category__item a:active .p-category__item-pic img,
.p-category__item a:focus .p-category__item-pic img {
opacity: 1;
transform: scale(1.1);
}
.p-category__item-pic {
overflow: hidden;
margin-bottom: 14px;
aspect-ratio: 1;
}
.p-category__item-pic img {
width: 100%;
height: 100%;
transition: transform .5s;
transform: scale(1);
object-fit: cover;
}
.p-category__item-body {
padding: 3px;
}
@media print, screen and (min-width: 768px) {
.p-category__item-body {
display: flex;
flex-direction: column;
flex-grow: 1;
}
}
.p-category__item-title {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
letter-spacing: .05em;
font-weight: 500;
line-height: 2;
-webkit-line-clamp: 1;
}
@media only screen and (max-width: 767.98px) {
.p-category__item-title {
font-size: clamp(1.125rem, .49vw + 1.015rem, 1.25rem);
}
}
@media print, screen and (min-width: 768px) {
.p-category__item-title {
font-size: clamp(1.063rem, .162vw + .985rem, 1.188rem);
}
}
.p-category__item-txt {
line-height: 1.8;
}
@media only screen and (max-width: 767.98px) {
.p-category__item-txt {
font-size: clamp(.938rem, .245vw + .882rem, 1rem);
}
}
@media print, screen and (min-width: 768px) {
.p-category__item-txt {
font-size: clamp(.813rem, .081vw + .774rem, .875rem);
}
}
.p-category__item-btn {
margin-top: clamp(25px, 2.5vw, 35px);
text-align: center;
font-size: 0;
}
@media print, screen and (min-width: 768px) {
.p-category__item-btn {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: flex-end;
}
}
.p-category__item-btn .c-btn {
padding-top: .5em;
padding-bottom: .5em;
}
@media only screen and (max-width: 767.98px) {
.p-category__item-btn .c-btn {
font-size: clamp(.938rem, .245vw + .882rem, 1rem);
}
}
@media print, screen and (min-width: 768px) {
.p-category__item-btn .c-btn {
font-size: clamp(.75rem, .244vw + .633rem, .938rem);
}
}
/* 詳細ページ
--------------------------------------------------------- */
.p-detail__inner {
max-width: min(92%, 940px);
margin-right: auto;
margin-left: auto;
}
.p-detail__gallery [class*=swiper]:focus {
outline: none;
}
.p-detail__gallery .swiper-main {
overflow: visible;
}
.p-detail__gallery .swiper-fade .swiper-slide {
transition-property: opacity, transform !important;
pointer-events: none;
}
.p-detail__gallery .swiper-fade .swiper-slide-active {
pointer-events: auto;
}
.p-detail__gallery .swiper-controller {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
@media only screen and (max-width: 767.98px) {
.p-detail__gallery .swiper-controller {
aspect-ratio: 4/3;
}
}
@media print, screen and (min-width: 768px) {
.p-detail__gallery .swiper-controller {
aspect-ratio: 16/9;
}
}
.p-detail__gallery .swiper-button-prev,
.p-detail__gallery .swiper-button-next {
position: absolute;
top: 0;
bottom: 0;
z-index: 10;
display: flex;
width: clamp(26px, 4.3vw, 50px);
height: clamp(26px, 4.3vw, 50px);
margin: auto;
border-radius: 6px;
background-color: #217fc4;
cursor: pointer;
transition: .7s cubic-bezier(.2, 1, .2, 1);
align-items: center;
justify-content: center;
}
.p-detail__gallery .swiper-button-prev:hover,
.p-detail__gallery .swiper-button-next:hover {
background-color: #0a9fde;
}
.p-detail__gallery .swiper-button-prev::after,
.p-detail__gallery .swiper-button-next::after {
color: #fff;
font-weight: 900;
font-size: inherit;
font-size: clamp(13px, 1.9vw, 20px);
font-family: 'Font Awesome 6 Free';
line-height: 1;
}
.p-detail__gallery .swiper-button-prev {
right: calc(100% - clamp(26px, 4.3vw, 50px) / 2);
left: auto;
}
.p-detail__gallery .swiper-button-prev::after {
content: '\f104';
}
.p-detail__gallery .swiper-button-next {
right: auto;
left: calc(100% - clamp(26px, 4.3vw, 50px) / 2);
}
.p-detail__gallery .swiper-button-next::after {
content: '\f105';
}
.p-detail__gallery .swiper-button-disabled {
opacity: 0;
pointer-events: none;
}
.p-detail__gallery .slide {
display: block;
overflow: hidden;
margin-bottom: 0;
}
.p-detail__gallery .slide-img,
.p-detail__gallery .thumb-img {
position: relative;
overflow: hidden;
}
.p-detail__gallery .slide-img img,
.p-detail__gallery .thumb-img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.p-detail__gallery .slide-img {
display: block;
background-color: #f5f5f5;
}
@media only screen and (max-width: 767.98px) {
.p-detail__gallery .slide-img {
aspect-ratio: 4/3;
}
}
@media print, screen and (min-width: 768px) {
.p-detail__gallery .slide-img {
aspect-ratio: 16/9;
}
}
.p-detail__gallery .slide-img img {
object-fit: contain;
}
.p-detail__gallery .slide-title {
margin-top: 1.5em;
padding: 1.1em 1.5em;
background-color: #f0f7fa;
font-weight: bold;
line-height: 1.6;
}
.p-detail__gallery .swiper-thumb {
margin-top: clamp(10px, 1.1vw, 15px);
}
.p-detail__gallery .thumb-img {
position: relative;
z-index: 1;
cursor: pointer;
aspect-ratio: 4/3;
}
.p-detail__gallery .thumb-img::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
margin: auto;
background-color: #217fc4;
content: '';
opacity: 0;
transition: .7s cubic-bezier(.2, 1, .2, 1);
}
@media print, screen and (min-width: 768px) {
.p-detail__gallery .thumb-img:hover::before {
opacity: .3;
}
}
.p-detail__gallery .thumb-img img {
transition: .7s cubic-bezier(.2, 1, .2, 1);
object-fit: cover;
}
.p-detail__gallery .swiper-slide-thumb-active .thumb-img::before {
opacity: .3;
}
.p-detail__gallery .swiper-scrollbar {
position: relative;
bottom: auto;
left: auto;
width: 100%;
margin-top: clamp(10px, 1.1vw, 15px);
}
.p-detail__gallery .swiper-scrollbar::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: -1;
width: 100%;
height: 4px;
margin: auto;
background-color: #eee;
content: '';
}
.p-detail__gallery .swiper-scrollbar-drag {
background-color: #217fc4;
cursor: pointer;
transition: background-color .2s !important;
}
.p-detail__txt {
margin-top: clamp(40px, 4.7vw, 70px);
}
.p-detail__txt::after {
display: block;
clear: both;
content: '';
}
.p-detail__txt iframe {
max-width: 100%;
}
.p-detail__files {
display: flex;
margin-top: clamp(40px, 4.7vw, 70px);
flex-wrap: wrap;
gap: 12px;
}
.p-detail__file .c-btn {
padding-top: .6em;
padding-bottom: .5em;
font-weight: 600;
}
@media screen and (max-width: 991.98px) {
.p-detail__file .c-btn {
font-size: clamp(13px, 2.5vw, 15px);
}
}
@media print, screen and (min-width: 992px) {
.p-detail__file .c-btn {
font-size: clamp(.875rem, .099vw + .813rem, .938rem);
}
}
.p-detail__btns {
display: flex;
margin-top: clamp(50px, 5.5vw, 80px);
padding-top: clamp(30px, 3vw, 40px);
border-top: 1px dotted #cacbcc;
gap: clamp(10px, 1.1vw, 15px);
justify-content: center;
}
.p-detail__btn .c-btn {
font-weight: 600;
}
@media screen and (max-width: 991.98px) {
.p-detail__btn .c-btn {
font-size: clamp(13px, 2.5vw, 15px);
}
}
/* 店舗案内
--------------------------------------------------------- */
.p-overview {
position: relative;
z-index: 1;
}
.p-overview::before {
position: absolute;
right: calc(clamp(100px, 10.6vw, 150px) * -1);
bottom: calc(clamp(200px, 23.3vw, 350px) * -1);
z-index: -1;
width: clamp(300px, 42.4vw, 700px);
background: url('../images/common/bg-pattern.png') left top/100% 100% no-repeat;
content: '';
aspect-ratio: 1;
}
.p-overview__inner {
width: min(92%, 1470px);
margin-right: auto;
margin-left: auto;
}
@media screen and (min-width: 1200px) {
.p-overview__content {
display: grid;
column-gap: 4%;
grid-template: 'info photos'/1fr 50%;
}
}
.p-overview__info {
grid-area: info;
}
.p-overview__photos {
border-radius: clamp(8px, 1.2vw, 20px);
grid-area: photos;
}
@media screen and (max-width: 1199.98px) {
.p-overview__photos {
margin-top: clamp(50px, 7.1vw, 60px);
}
}
.p-overview__photo {
overflow: hidden;
border-radius: clamp(8px, 1.2vw, 20px);
}
.p-overview__photo::before {
border-radius: clamp(8px, 1.2vw, 20px);
}
.p-overview__photo .swiper-slide img {
width: 100%;
font-size: 0;
object-fit: cover;
}
@media screen and (max-width: 1199.98px) {
.p-overview__photo .swiper-slide img {
height: 68vw;
}
}
@media screen and (min-width: 1200px) {
.p-overview__photo .swiper-slide img {
height: clamp(400px, 31.3vw, 600px);
}
}
.p-overview__photo .swiper-fade .swiper-slide {
transition-property: opacity, transform !important;
pointer-events: none;
}
.p-overview__photo .swiper-fade .swiper-slide-active {
pointer-events: auto;
}
.p-overview__photo .swiper-button-prev,
.p-overview__photo .swiper-button-next {
position: absolute;
top: 0;
bottom: 0;
z-index: 10;
display: flex;
margin: auto;
outline: none;
cursor: pointer;
align-items: center;
justify-content: center;
}
.p-overview__photo .swiper-button-prev::after,
.p-overview__photo .swiper-button-next::after {
color: rgba(255, 255, 255, .6);
transition: color .2s;
}
@media screen and (max-width: 1199.98px) {
.p-overview__photo .swiper-button-prev::after,
.p-overview__photo .swiper-button-next::after {
font-size: clamp(1.563rem, 1.786vw + 1.161rem, 2.5rem);
}
}
@media screen and (min-width: 1200px) {
.p-overview__photo .swiper-button-prev::after,
.p-overview__photo .swiper-button-next::after {
font-size: clamp(1.875rem, 1.25vw + .938rem, 2.5rem);
}
}
.p-overview__photo .swiper-button-prev:hover::after,
.p-overview__photo .swiper-button-next:hover::after {
color: rgba(255, 255, 255, .9);
}
/* 店舗所在地
--------------------------------------------------------- */
.p-access {
position: relative;
z-index: 1;
margin-top: clamp(80px, 10.2vw, 160px);
}
.p-access__inner {
width: min(92%, 1470px);
margin-right: auto;
margin-left: auto;
}
.p-access__map {
font-size: 0;
}
@media print, screen and (min-width: 768px) {
.p-access__map {
height: clamp(450px, 37.9vw, 600px);
}
}
.p-access__map iframe {
width: 100% !important;
height: 100% !important;
}
@media only screen and (max-width: 767.98px) {
.p-access__map iframe {
aspect-ratio: 1;
}
}
/* お問い合わせエリア
--------------------------------------------------------- */
.p-inquiry {
position: relative;
z-index: 1;
overflow: hidden;
margin-top: clamp(80px, 9.7vw, 150px);
padding-top: clamp(60px, 8.5vw, 140px);
padding-bottom: clamp(70px, 9.3vw, 150px);
background: url('../images/common/bg-contact.jpg') center top/cover no-repeat;
color: #fff;
}
@media screen and (max-width: 991.98px) {
.p-inquiry {
border-top-left-radius: clamp(30px, 8vw, 60px);
}
}
@media screen and (min-width: 768px) and (max-width: 991.98px) {
.p-inquiry {
text-align: center;
}
}
@media print, screen and (min-width: 992px) {
.p-inquiry {
border-top-left-radius: clamp(100px, 14.6vw, 250px);
}
}
@media screen and (min-width: 1400px) {
.p-inquiry {
border-top-left-radius: clamp(300px, 22.9vw, 478px);
}
}
.p-inquiry::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background-color: rgba(28, 116, 186, .85);
content: '';
}
.p-inquiry__inner {
max-width: min(92%, 1220px);
margin-right: auto;
margin-left: auto;
}
@media print, screen and (min-width: 992px) {
.p-inquiry__inner {
display: grid;
column-gap: 4%;
grid-template: 'info util'/55% 1fr;
}
}
@media screen and (min-width: 1400px) {
.p-inquiry__inner {
grid-template: 'info util'/58% 1fr;
}
}
.p-inquiry__info {
grid-area: info;
}
@media print, screen and (min-width: 992px) {
.p-inquiry__info {
padding-left: 60px;
}
}
@media screen and (min-width: 1400px) {
.p-inquiry__info {
padding-left: 80px;
}
}
@media screen and (min-width: 2000px) {
.p-inquiry__info {
padding-left: 0;
}
}
@media print, screen and (min-width: 992px) {
.p-inquiry .c-heading {
margin-bottom: 3.7em;
}
}
.p-inquiry__txt {
letter-spacing: .09em;
font-weight: 500;
}
@media print, screen and (min-width: 768px) {
.p-inquiry__txt {
line-height: 1.8;
}
}
@media screen and (max-width: 991.98px) {
.p-inquiry__txt {
font-size: clamp(1rem, .158vw + .964rem, 1.063rem);
}
}
@media print, screen and (min-width: 992px) {
.p-inquiry__txt {
font-size: clamp(.938rem, .298vw + .753rem, 1.125rem);
}
}
.p-inquiry__util {
grid-area: util;
}
@media screen and (max-width: 991.98px) {
.p-inquiry__util {
margin-top: clamp(35px, 6.3vw, 50px);
}
}
.p-inquiry__num {
letter-spacing: 0;
font-weight: 730;
font-size: clamp(1.75rem, 1.707vw + 1.366rem, 3.5rem);
font-family: 'Nunito Sans', sans-serif;
line-height: 1.2;
}
.p-inquiry__num small {
margin-right: .5em;
font-weight: 800;
font-size: clamp(1.125rem, .366vw + 1.043rem, 1.5rem);
}
.p-inquiry__num a {
text-decoration: none;
}
.p-inquiry__num a [data-action=call] {
color: #fff;
}
.p-inquiry__time {
margin-top: .2em;
font-weight: 600;
line-height: 1.6;
}
@media screen and (max-width: 991.98px) {
.p-inquiry__time {
font-size: clamp(.938rem, .316vw + .866rem, 1.063rem);
}
}
@media print, screen and (min-width: 992px) {
.p-inquiry__time {
font-size: clamp(.938rem, .298vw + .753rem, 1.125rem);
}
}
.p-inquiry__btn {
margin-top: clamp(50px, 4.5vw, 56px);
}
@media only screen and (max-width: 767.98px) {
.p-inquiry__btn {
text-align: center;
}
}
.p-inquiry__btn a {
position: relative;
display: inline-flex;
border-radius: 9999px;
background-color: #fff;
color: #217fc4;
font-weight: 700;
font-size: clamp(1rem, .488vw + .89rem, 1.5rem);
line-height: 1.4;
transition: border-color .2s, background-color .2s, color .2s;
align-items: center;
}
@media only screen and (max-width: 767.98px) {
.p-inquiry__btn a {
padding: 1.2em 2em;
}
}
@media print, screen and (min-width: 768px) {
.p-inquiry__btn a {
padding: 1.5em 2em;
}
}
@media screen and (min-width: 1400px) {
.p-inquiry__btn a {
padding: 1.5em 2.5em;
}
}
.p-inquiry__btn a::before {
position: relative;
top: .05em;
margin-right: .4em;
content: '\f0e0';
font-weight: 900;
font-size: 135%;
font-family: 'Font Awesome 6 Free';
}
.p-inquiry__btn a:hover,
.p-inquiry__btn a:active,
.p-inquiry__btn a:focus {
background-color: #0a9fde;
color: #fff;
}
/* お電話でのお問い合わせ
--------------------------------------------------------- */
.p-enquire {
position: relative;
z-index: 1;
}
.p-enquire::before {
position: absolute;
right: calc(clamp(100px, 10.6vw, 150px) * -1);
bottom: calc(clamp(240px, 29.2vw, 450px) * -1);
z-index: -1;
width: clamp(300px, 42.4vw, 700px);
background: url('../images/common/bg-pattern.png') left top/100% 100% no-repeat;
content: '';
aspect-ratio: 1;
}
.p-enquire__txt {
max-width: min(92%, 1470px);
margin-right: auto;
margin-left: auto;
}
@media print, screen and (min-width: 992px) {
.p-enquire__txt {
text-align: center;
line-height: 2.2;
}
}
.p-enquire__txt .c-badge {
position: relative;
top: -.2em;
}
.p-enquire__inner {
max-width: min(92%, 1470px);
margin-right: auto;
margin-left: auto;
}
@media print, screen and (min-width: 768px) {
.p-enquire__items {
display: grid;
grid-template-columns: repeat(2, 48%);
justify-content: space-between;
}
}
.p-enquire__item {
position: relative;
z-index: 1;
text-align: center;
}
@media only screen and (max-width: 767.98px) {
.p-enquire__item {
padding: 8vw 4vw 9vw;
}
}
@media print, screen and (min-width: 768px) {
.p-enquire__item {
padding: 2.3em 1.5em 3em;
}
}
.p-enquire__item::before,
.p-enquire__item::after {
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
border: 1px solid #0a9fde;
border: 1px solid #dce9ee;
border-top-left-radius: clamp(8px, 1.2vw, 20px);
border-top-right-radius: clamp(25px, 3.6vw, 60px);
border-bottom-right-radius: clamp(8px, 1.2vw, 20px);
border-bottom-left-radius: clamp(25px, 3.6vw, 60px);
content: '';
}
.p-enquire__item::before {
right: calc(clamp(4px, .4vw, 8px) * -1);
left: 0;
background-color: #0a9fde;
}
.p-enquire__item::after {
right: 0;
left: 0;
background-color: #f0f7fa;
}
@media only screen and (max-width: 767.98px) {
.p-enquire__item + .p-enquire__item {
margin-top: 30px;
}
}
.p-enquire__item.--tel .p-enquire__num::before {
height: .75em;
margin-right: .3em;
aspect-ratio: 1;
-webkit-mask-image: var(--icon-phone);
mask-image: var(--icon-phone);
}
.p-enquire__item.--fax .p-enquire__num::before {
height: .8em;
margin-right: .4em;
aspect-ratio: 43/34.69;
-webkit-mask-image: var(--icon-fax);
mask-image: var(--icon-fax);
}
.p-enquire__title {
margin-bottom: .7em;
font-weight: 600;
font-size: clamp(1.125rem, .122vw + 1.098rem, 1.25rem);
}
.p-enquire__num {
white-space: nowrap;
font-weight: 800;
font-family: 'Nunito Sans', sans-serif;
line-height: 1.1;
}
@media only screen and (max-width: 767.98px) {
.p-enquire__num {
font-size: clamp(1.688rem, 1.225vw + 1.412rem, 2rem);
}
}
@media print, screen and (min-width: 768px) {
.p-enquire__num {
font-size: clamp(2rem, 1.136vw + 1.455rem, 2.875rem);
}
}
.p-enquire__num::before {
display: inline-block;
background-color: #217fc4;
content: '';
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.p-enquire__num a {
text-decoration: none;
}
.p-enquire__num a [data-action=call] {
color: #202020;
}
.p-enquire__time {
margin-top: 1em;
font-size: clamp(.875rem, .192vw + .832rem, 1rem);
line-height: 1.5;
}
/* メールでのお問い合わせ
--------------------------------------------------------- */
.p-contact {
position: relative;
z-index: 1;
}
.p-contact__inner {
width: min(92%, 1470px);
margin-right: auto;
margin-left: auto;
}
.p-contact__txt p + p {
margin-top: 1em;
}
.p-contact__txt .c-badge {
position: relative;
top: -.3em;
}
/* プライバシーポリシー
--------------------------------------------------------- */
.p-policy {
margin-top: clamp(40px, 4.2vw, 60px);
}
.p-policy__txt {
margin-bottom: clamp(20px, 2.1vw, 30px);
}
@media only screen and (max-width: 767.98px) {
.p-policy__txt {
font-size: clamp(.938rem, .245vw + .882rem, 1rem);
}
}
@media print, screen and (min-width: 768px) {
.p-policy__txt {
text-align: center;
font-size: clamp(.938rem, .081vw + .899rem, 1rem);
}
}
.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 {
border-right: 1px solid #e8eaeb;
border-bottom: 1px solid #e8eaeb;
border-left: 1px solid #e8eaeb;
background-color: #f0f7fa;
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;
padding: .6em 1.5em;
font-size: .875rem;
justify-content: center;
}
}
@media print, screen and (min-width: 768px) {
.p-policy__agree {
padding: .6em .3em;
text-align: center;
}
}
.p-policy__agree [type=checkbox] {
width: 1.2em;
height: 1.2em;
margin-right: .5em;
}
/* ========================================================================
/*
/* Utility
/*
========================================================================= */
/* typography
--------------------------------------------------------- */
.u-kome {
position: relative;
padding-left: 1.2em;
}
.u-kome.--inline {
display: inline-block;
}
.u-kome.--red::before {
color: #bf0000;
}
.u-kome::before {
position: absolute;
left: 0;
content: '※';
}
.u-text-center {
text-align: center;
}
.u-important {
color: #bf0000;
}
.u-palt {
font-feature-settings: 'palt';
}
@media print, screen and (min-width: 768px) {
.u-split {
display: flex;
}
}
@media print, screen and (min-width: 768px) {
.u-split__item + .u-split__item::before {
margin-right: .5em;
margin-left: .5em;
content: '/';
}
}
/* ------------------------------------------------------------------------
/* 印刷用
------------------------------------------------------------------------- */
@media print {
html {
font-size: 10px !important;
}
}
@page {
margin: 8mm;
size: A4 portrait;
}