@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: 1260px;
}
}
[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;
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:focus {
box-shadow: 0 0 0 .2rem rgba(255, 111, 0, .25);
}
.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: #f58027;
--color-sub: #4c463c;
--color-txt: #4c463c;
--color-txt2: #6c4a2f;
--color-hover: #808080;
--color-base: #efece7;
--color-base2: #f7f6f5;
--color-base3: #fdfcfc;
--color-object: #e1c9b7;
--color-object2: #d3ccc2;
--color-object3: #c0b6a6;
--color-red: #f6365a;
--color-white: #fff;
--color-black: #000;
--font-family-primary: 'Zen Kaku Gothic New', sans-serif;
--font-family-secondary: 'Josefin Sans', sans-serif;
--font-family-awesome: 'Font Awesome 6 Free';
--header-height-mobile: clamp(45px, 7.8vw, 60px);
--header-height-desktop: 68px;
--icon-instagram: url('data:image/svg+xml;utf-8,');
--icon-tel: url('data:image/svg+xml;utf-8,');
--icon-dog: url('data:image/svg+xml;utf-8,');
--icon-arrow: url('data:image/svg+xml;utf-8,');
--icon-external: 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.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 {
-webkit-backface-visibility: hidden;
}
/* Webfont
--------------------------------------------------------- */
/* こども丸ゴシック
--------------------------------------------------------- */
@font-face {
font-weight: normal;
font-style: normal;
font-family: 'font-kodomo-light';
src: url('../fonts/kodomo/light/KodomoRounded-Light.woff') format('woff'), url('../fonts/kodomo/light/KodomoRounded-Light.otf') format('opentype');
font-display: swap;
}
@font-face {
font-weight: normal;
font-style: normal;
font-family: 'font-kodomo-normal';
src: url('../fonts/kodomo/normal/KodomoRounded.woff') format('woff'), url('../fonts/kodomo/normal/KodomoRounded.otf') format('opentype');
font-display: swap;
}
.f-kodomo-light {
font-family: 'font-kodomo-light';
}
.f-kodomo-normal {
font-family: 'font-kodomo-normal';
}
/* ========================================================================
/*
/* Layout
/*
========================================================================= */
/* 全体
--------------------------------------------------------- */
.l-page-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* ヘッダー
--------------------------------------------------------- */
.l-header {
z-index: 1000;
}
@media screen and (max-width: 991.98px) {
.l-header {
position: -webkit-sticky;
position: sticky;
top: 0;
right: 0;
left: 0;
}
}
@media print, screen and (min-width: 992px) {
.l-header {
position: fixed;
top: 32px;
right: clamp(20px, 2vw, 40px);
left: clamp(20px, 2vw, 40px);
}
}
@media print {
.l-header {
position: static;
}
}
/* コンテンツ
--------------------------------------------------------- */
.l-contents {
flex: 1 0 auto;
overflow: hidden;
padding-bottom: clamp(60px, 7vw, 100px);
}
.l-contents.--no-space-bottom {
padding-bottom: 0;
}
/* フッター
--------------------------------------------------------- */
.l-footer {
background: url('../images/common/bg-pattern2.png') left top repeat;
}
.l-footer__inner {
position: relative;
width: min(92%, 1680px);
margin-right: auto;
margin-left: auto;
padding-top: clamp(50px, 6.6vw, 100px);
padding-bottom: clamp(50px, 6.7vw, 103px);
}
.l-footer__footprint {
position: absolute;
pointer-events: none;
}
@media only screen and (max-width: 767.98px) {
.l-footer__footprint {
top: -6%;
left: -3%;
}
}
@media print, screen and (min-width: 768px) {
.l-footer__footprint {
top: -7%;
top: calc(clamp(100px, 13.7vw, 170px) * -1);
left: -5.2%;
}
}
@media screen and (min-width: 1200px) {
.l-footer__footprint {
top: calc(clamp(170px, 13.8vw, 260px) * -1);
}
}
/* ========================================================================
/*
/* Component
/*
========================================================================= */
/* ドロワー
--------------------------------------------------------- */
.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;
justify-content: flex-end;
gap: 16px;
}
}
@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 .6s, color .6s;
}
@media screen and (max-width: 991.98px) {
.c-global-nav__item > a {
padding: 1em .3em 1em .8em;
border-bottom: 1px solid var(--color-base);
text-align: left;
font-size: 1.0625rem;
}
}
@media print, screen and (min-width: 992px) {
.c-global-nav__item > a {
padding: .44em .6em;
text-align: center;
font-size: clamp(.938rem, .108vw + .871rem, 1rem);
}
}
.c-global-nav__item > a::after {
position: absolute;
display: inline-block;
height: 4px;
margin: auto;
border-radius: 50%;
background-color: transparent;
content: '';
transition: background-color .3s;
aspect-ratio: 1;
}
@media screen and (max-width: 1199.98px) {
.c-global-nav__item > a::after {
top: 0;
bottom: 0;
left: 0;
}
}
@media screen and (min-width: 1200px) {
.c-global-nav__item > a::after {
right: 0;
bottom: 0;
left: 0;
}
}
@media screen and (min-width: 1200px) {
.c-global-nav__item > a:hover::after,
.c-global-nav__item > a:focus::after {
background-color: var(--color-main);
}
}
.c-global-nav__item.is-current > a::after {
background-color: var(--color-main);
}
/* コンテナ
--------------------------------------------------------- */
.c-container {
max-width: min(92vw, 1230px);
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(50px, 5.7vw, 80px);
background-size: cover;
background-repeat: no-repeat;
text-align: center;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 991.98px) {
.c-page-header {
height: clamp(180px, 28.8vw, 210px);
margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
border-radius: clamp(10px, 1.8vw, 15px);
}
}
@media print, screen and (min-width: 992px) {
.c-page-header {
height: clamp(400px, 30.9vw, 500px);
margin-left: clamp(100px, 8.6vw, 150px);
border-bottom-left-radius: clamp(60px, 7.3vw, 100px);
}
}
@media screen and (min-width: 1200px) {
.c-page-header {
border-bottom-left-radius: clamp(100px, 7.7vw, 140px);
}
}
.c-page-header::before {
position: absolute;
z-index: -1;
background-color: rgba(76, 70, 60, .25);
content: '';
inset: 0;
}
.c-page-header.--info {
background-image: url('../images/info/bg-page-header.jpg');
}
@media screen and (max-width: 991.98px) {
.c-page-header.--info {
background-position: left 75%;
}
}
@media print, screen and (min-width: 992px) {
.c-page-header.--info {
background-position: left 35%;
}
}
.c-page-header.--contact {
background-image: url('../images/contact/bg-page-header.jpg');
background-position: center 60%;
}
@media print, screen and (min-width: 992px) {
.c-page-header__inner {
padding-top: clamp(80px, 6.2vw, 100px);
}
}
.c-page-header__en,
.c-page-header__title {
color: #fff;
}
.c-page-header__title {
letter-spacing: .1em;
font-weight: 500;
line-height: 1.7;
}
@media screen and (max-width: 991.98px) {
.c-page-header__title {
font-size: clamp(1.688rem, .475vw + 1.581rem, 1.875rem);
}
}
@media print, screen and (min-width: 992px) {
.c-page-header__title {
font-size: clamp(1.875rem, 1.293vw + 1.073rem, 2.625rem);
}
}
.c-page-header__en {
letter-spacing: -.06em;
font-size: clamp(.938rem, .064vw + .923rem, 1rem);
font-family: 'font-kodomo-light';
line-height: 1.6;
}
/* キャッチコピー
--------------------------------------------------------- */
.c-copy {
letter-spacing: .1em;
font-weight: 500;
font-size: clamp(1.063rem, .705vw + .904rem, 1.75rem);
line-height: 1.8;
}
@media only screen and (max-width: 767.98px) {
.c-copy {
margin-bottom: 1.7em;
}
}
@media print, screen and (min-width: 768px) {
.c-copy {
margin-bottom: 2.5em;
text-align: center;
}
}
/* リスト
--------------------------------------------------------- */
.c-list > li {
position: relative;
}
.c-list > li::before {
position: absolute;
left: 0;
}
.c-list.--dot > li {
padding-left: .8em;
}
.c-list.--dot > li::before {
top: 1em;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: var(--color-main);
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 tr {
border-bottom: 1px solid #d3ccc2;
}
@media only screen and (max-width: 767.98px) {
.c-table.--style-a tr:first-of-type th {
padding-top: 0;
}
}
.c-table.--style-a th,
.c-table.--style-a td {
vertical-align: top;
}
@media print, screen and (min-width: 768px) {
.c-table.--style-a th,
.c-table.--style-a td {
padding: 1.1em .4em;
}
}
.c-table.--style-a th {
font-weight: 500;
}
@media only screen and (max-width: 767.98px) {
.c-table.--style-a th {
padding-top: 1em;
}
}
@media screen and (min-width: 1200px) {
.c-table.--style-a th {
padding-left: 1.5em;
}
}
@media only screen and (max-width: 767.98px) {
.c-table.--style-a td {
padding-bottom: 1em;
}
}
@media print, screen and (min-width: 768px) {
.c-table.--shop tbody th {
width: 34%;
}
}
.c-table.--shop .c-table__note {
font-size: .75rem;
line-height: 1.5;
}
.c-table.--contact {
margin-top: clamp(30px, 3.1vw, 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: 0;
padding-left: 0;
}
}
@media print, screen and (min-width: 768px) {
.c-table.--contact tbody th,
.c-table.--contact tbody td {
padding: 1.2em .5em;
vertical-align: middle;
}
}
.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 {
margin-bottom: .3em;
text-align: left;
}
}
@media print, screen and (min-width: 768px) {
.c-table.--contact tbody th {
width: clamp(280px, 23.1vw, 340px);
}
}
.c-table.--contact tbody th small {
display: block;
line-height: 1.5;
}
@media only screen and (max-width: 767.98px) {
.c-table.--contact tbody th small {
font-size: clamp(.75rem, .245vw + .695rem, .813rem);
}
}
@media print, screen and (min-width: 768px) {
.c-table.--contact tbody th small {
font-size: clamp(.75rem, .087vw + .708rem, .813rem);
}
}
@media only screen and (max-width: 767.98px) {
.c-table.--contact tbody td {
display: block;
padding-bottom: 1.3em;
}
}
/* バッジ
--------------------------------------------------------- */
.c-badge {
display: inline-block;
padding: .2em .6em;
border-radius: .5em;
background-color: var(--color-red);
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__title {
letter-spacing: .1em;
font-weight: 500;
font-size: clamp(1.313rem, .449vw + 1.212rem, 1.75rem);
line-height: 1.7;
}
.c-heading__en {
color: var(--color-main);
letter-spacing: -.06em;
font-size: clamp(.938rem, .064vw + .923rem, 1rem);
font-family: 'font-kodomo-light';
line-height: 1.6;
}
.c-heading.--center {
text-align: center;
}
.c-heading-bar {
margin-bottom: 1.6em;
padding-left: .8em;
border-left: clamp(3px, .4vw, 4px) solid var(--color-sub);
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-logo {
line-height: 1;
}
.c-logo a {
display: block;
text-decoration: none;
}
.c-logo a:is(:hover, :active, :focus) img {
opacity: 1;
}
.c-logo__en {
color: var(--color-main);
letter-spacing: .045em;
font-weight: 500;
font-family: var(--font-family-secondary);
}
@media screen and (max-width: 991.98px) {
.c-logo__en {
font-size: clamp(1.313rem, .316vw + 1.241rem, 1.438rem);
}
}
@media print, screen and (min-width: 992px) {
.c-logo__en {
font-size: clamp(1.5rem, .431vw + 1.233rem, 1.75rem);
}
}
.c-logo__txt {
color: var(--color-object3);
letter-spacing: .1em;
font-weight: 500;
font-size: .625rem;
}
@media screen and (max-width: 991.98px) {
.c-logo__txt {
line-height: 1.3;
}
}
@media print, screen and (min-width: 992px) {
.c-logo__txt {
line-height: 1.5;
}
}
.c-logo.--footer .c-logo__en {
font-size: clamp(1.813rem, .705vw + 1.654rem, 2.5rem);
}
.c-logo.--footer .c-logo__txt {
margin-top: .3em;
color: var(--color-txt2);
font-size: clamp(.75rem, .128vw + .721rem, .875rem);
}
/* メインビジュアル
--------------------------------------------------------- */
.c-hero {
position: relative;
z-index: 0;
overflow: hidden;
}
.c-hero__copy {
position: absolute;
z-index: 2;
letter-spacing: .1em;
font-weight: 500;
}
@media screen and (max-width: 991.98px) {
.c-hero__copy {
top: 24%;
left: 4%;
font-size: clamp(1.75rem, 1.899vw + 1.323rem, 2.5rem);
line-height: 1.6;
}
}
@media print, screen and (min-width: 992px) {
.c-hero__copy {
top: 28.3%;
left: 7.8%;
font-size: clamp(3.125rem, 1.078vw + 2.457rem, 3.75rem);
line-height: 1.7;
}
}
.c-hero__copy .txt1,
.c-hero__copy .txt2 {
display: block;
}
.c-hero__copy .txt2 {
position: relative;
left: -.08em;
}
.c-hero__txt {
position: absolute;
z-index: 1;
letter-spacing: .1em;
font-weight: 500;
filter: drop-shadow(0px 2px 5px rgba(76, 70, 60, .15));
}
@media screen and (max-width: 991.98px) {
.c-hero__txt {
right: 2vw;
bottom: 10vw;
padding: 7vw 6vw 7vw 7vw;
font-size: clamp(.875rem, .475vw + .768rem, 1.063rem);
line-height: 1.7;
}
}
@media print, screen and (min-width: 992px) {
.c-hero__txt {
right: 2.3%;
bottom: 6.7%;
padding-top: clamp(40px, 3.7vw, 60px);
padding-right: clamp(30px, 3.2vw, 57px);
padding-bottom: clamp(50px, 4.3vw, 66px);
padding-left: clamp(50px, 4.4vw, 68px);
font-size: clamp(1.313rem, .323vw + 1.112rem, 1.5rem);
line-height: 1.75;
}
}
.c-hero__txt::before {
position: absolute;
z-index: -1;
background: url('../images/top/bg-hero-txt.png') center/100% 100% no-repeat;
content: '';
inset: 0;
}
.c-hero__blob {
position: absolute;
z-index: 1;
letter-spacing: .1em;
font-weight: 500;
line-height: 1.7;
}
@media screen and (max-width: 991.98px) {
.c-hero__blob {
right: 2vw;
bottom: 5vw;
}
}
@media print, screen and (min-width: 992px) {
.c-hero__blob {
right: 5.5%;
bottom: 14%;
}
}
.c-hero__slider {
position: relative;
z-index: 1;
margin-left: auto;
}
@media only screen and (max-width: 767.98px) {
.c-hero__slider {
width: 88%;
}
}
@media print, screen and (min-width: 768px) {
.c-hero__slider {
width: 80.8%;
}
}
.c-hero .swiper {
position: relative;
z-index: 1;
}
@media screen and (max-width: 991.98px) {
.c-hero .swiper {
border-bottom-left-radius: clamp(30px, 6.7vw, 60px);
}
}
@media print, screen and (min-width: 992px) {
.c-hero .swiper {
border-bottom-left-radius: clamp(60px, 7.3vw, 100px);
}
}
@media screen and (min-width: 1200px) {
.c-hero .swiper {
border-bottom-left-radius: clamp(100px, 7.7vw, 140px);
}
}
.c-hero .swiper::before {
position: absolute;
z-index: 2;
background-color: var(--color-base2);
content: '';
opacity: .15;
inset: 0;
}
.c-hero .swiper-slide img {
width: 100%;
height: auto;
font-size: 0;
object-fit: cover;
}
@media only screen and (max-width: 767.98px) {
.c-hero .swiper-slide img {
min-height: 50vh;
}
}
@media print, screen and (min-width: 768px) {
.c-hero .swiper-slide img {
height: clamp(500px, 54.3vw, 960px);
}
}
.c-hero .swiper-slide img.img1 {
object-position: left bottom;
}
.c-hero .swiper-slide img.img2 {
object-position: 80% center;
}
.c-hero .swiper-slide img.img3 {
object-position: 15% center;
}
.c-hero .swiper-fade .swiper-slide {
transition-property: opacity, transform !important;
pointer-events: none;
}
.c-hero .swiper-fade .swiper-slide-active {
pointer-events: auto;
}
.c-hero .swiper-pagination {
position: static;
position: absolute !important;
right: calc(100% + 1.3vw) !important;
bottom: clamp(50px, 8.3vw, 140px);
left: auto !important;
z-index: 1000;
width: auto;
text-align: left;
}
.c-hero .swiper-pagination-bullet {
display: block;
width: 8px;
height: 8px;
background-color: var(--color-object3);
opacity: 1;
}
.c-hero .swiper-pagination-bullet:not(:first-of-type) {
margin-top: clamp(15px, 1.8vw, 25px);
}
.c-hero .swiper-pagination-bullet-active {
position: relative;
background: none;
opacity: 1;
transition: opacity .3s !important;
}
.c-hero .swiper-pagination-bullet-active::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: -4px;
width: 16px;
margin: auto;
background-color: var(--color-main);
content: '';
-webkit-mask-image: var(--icon-dog);
mask-image: var(--icon-dog);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
aspect-ratio: 29/24;
}
@media print {
.c-hero .swiper-pagination-bullet-active::before {
-webkit-print-color-adjust: exact;
}
}
/* ボタン
--------------------------------------------------------- */
.c-btn {
position: relative;
z-index: 0;
display: inline-block;
outline: none !important;
color: inherit;
text-align: center;
text-decoration: none;
font-size: inherit;
line-height: 1.5;
cursor: pointer;
transition: background-color .6s, color .6s;
-webkit-appearance: none;
appearance: none;
}
.c-btn.--primary,
.c-btn.--secondary,
.c-btn.--tertiary {
border-radius: 999px;
font-weight: 500;
}
@media only screen and (max-width: 767.98px) {
.c-btn.--primary,
.c-btn.--secondary,
.c-btn.--tertiary {
padding: .8em 1.6em;
font-size: .9375rem;
}
}
@media print, screen and (min-width: 768px) {
.c-btn.--primary,
.c-btn.--secondary,
.c-btn.--tertiary {
padding: .75em 1.8em;
font-size: clamp(.938rem, .087vw + .896rem, 1rem);
}
}
.c-btn.--primary::before,
.c-btn.--secondary::before,
.c-btn.--tertiary::before {
position: absolute;
z-index: -1;
border-radius: 999px;
content: '';
transition: .6s;
inset: 0;
}
.c-btn.--primary:is(:hover, :active, :focus),
.c-btn.--secondary:is(:hover, :active, :focus),
.c-btn.--tertiary:is(:hover, :active, :focus) {
color: #fff;
}
.c-btn.--primary:is(:hover, :active, :focus)::before,
.c-btn.--secondary:is(:hover, :active, :focus)::before,
.c-btn.--tertiary:is(:hover, :active, :focus)::before {
background-color: var(--color-hover);
transform: scale(1.05, 1.0625);
}
.c-btn.--primary {
color: #fff;
}
.c-btn.--primary::before {
background-color: var(--color-main);
}
.c-btn.--secondary {
color: var(--color-txt);
}
.c-btn.--secondary::before {
background-color: var(--color-base3);
}
.c-btn.--tertiary {
color: #fff;
}
.c-btn.--tertiary::before {
background-color: var(--color-sub);
}
.c-btn.--arrow-right::after,
.c-btn.--arrow-left::after {
position: absolute;
top: 0;
bottom: 0;
height: .74em;
margin: auto;
background-color: currentColor;
content: '';
transition: background-color .2s;
-webkit-mask-image: var(--icon-arrow);
mask-image: var(--icon-arrow);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
aspect-ratio: 32/30;
}
@media print {
.c-btn.--arrow-right::after,
.c-btn.--arrow-left::after {
-webkit-print-color-adjust: exact;
}
}
@media only screen and (max-width: 767.98px) {
.c-btn.--arrow-right {
padding-right: 2.6em;
}
}
@media print, screen and (min-width: 768px) {
.c-btn.--arrow-right {
padding-right: 5.2em;
}
}
.c-btn.--arrow-right::after {
right: clamp(16px, 1.9vw, 27px);
}
@media only screen and (max-width: 767.98px) {
.c-btn.--arrow-left {
padding-left: 2.6em;
}
}
@media print, screen and (min-width: 768px) {
.c-btn.--arrow-left {
padding-left: 5.2em;
}
}
.c-btn.--arrow-left::after {
left: clamp(16px, 1.9vw, 27px);
transform: scale(-1, 1);
}
.c-btn.--back::before {
background-color: #b8b1a7;
}
.c-btn.--back:is(:hover, :active, :focus) {
background-color: #858585;
}
.c-btn.--pdf {
padding-top: .5em;
padding-bottom: .5em;
padding-left: 3em;
}
@media only screen and (max-width: 767.98px) {
.c-btn.--pdf {
font-size: clamp(.813rem, .245vw + .757rem, .875rem);
}
}
@media print, screen and (min-width: 768px) {
.c-btn.--pdf {
font-size: clamp(.813rem, .087vw + .771rem, .875rem);
}
}
.c-btn.--pdf::after {
position: absolute;
top: 0;
bottom: 0;
left: 1.4em;
height: .74em;
margin: auto;
color: inherit;
content: '\f1c1';
font-weight: 400;
font-size: inherit;
font-family: 'Font Awesome 6 Free';
line-height: 1;
}
/* スクロールアニメーション
--------------------------------------------------------- */
[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 1.5s, transform 1s;
transform: translateY(40px);
}
[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;
}
}
/* 足跡アニメーション
--------------------------------------------------------- */
.c-footprint {
pointer-events: none;
}
.c-footprint[data-io=footprint].is-appear {
opacity: 1;
}
.c-footprint[data-io=footprint].is-appear .c-footprint__item:nth-child(1) {
opacity: 1;
transition-delay: .2s;
transition-delay: calc(1s + 0s);
}
.c-footprint[data-io=footprint].is-appear .c-footprint__item:nth-child(2) {
opacity: 1;
transition-delay: .4s;
transition-delay: calc(1s + .2s);
}
.c-footprint[data-io=footprint].is-appear .c-footprint__item:nth-child(3) {
opacity: 1;
transition-delay: .6s;
transition-delay: calc(1s + .4s);
}
.c-footprint[data-io=footprint].is-appear .c-footprint__item:nth-child(4) {
opacity: 1;
transition-delay: .8s;
transition-delay: calc(1s + .6s);
}
.c-footprint[data-io=footprint].is-appear .c-footprint__item:nth-child(5) {
opacity: 1;
transition-delay: 1s;
transition-delay: calc(1s + .8s);
}
.c-footprint[data-io=footprint].is-appear .c-footprint__item:nth-child(6) {
opacity: 1;
transition-delay: 1.2s;
transition-delay: calc(1s + 1s);
}
.c-footprint__items {
position: relative;
}
.c-footprint__item {
position: absolute;
height: auto;
opacity: 0;
transition: opacity .6s;
}
.c-footprint__item svg {
display: block;
width: 100%;
height: auto;
fill: #c0b6a6;
}
.c-footprint.--primary .c-footprint__items {
width: clamp(100px, 17.1vw, 290px);
height: clamp(100px, 17.5vw, 300px);
}
.c-footprint.--primary .c-footprint__item:nth-child(1) {
bottom: 0;
left: 0;
width: clamp(20px, 3.2vw, 53px);
}
.c-footprint.--primary .c-footprint__item:nth-child(2) {
bottom: 3%;
left: 43%;
width: clamp(16px, 2.8vw, 47px);
}
.c-footprint.--primary .c-footprint__item:nth-child(3) {
bottom: 37%;
left: 30%;
width: clamp(20px, 3.2vw, 53px);
}
.c-footprint.--primary .c-footprint__item:nth-child(4) {
bottom: 49%;
left: 69%;
width: clamp(13px, 2.5vw, 43px);
}
.c-footprint.--primary .c-footprint__item:nth-child(5) {
bottom: 78%;
left: 54%;
width: clamp(16px, 2.8vw, 47px);
}
.c-footprint.--primary .c-footprint__item:nth-child(6) {
bottom: 88%;
left: 87%;
width: clamp(10px, 2.2vw, 41px);
}
.c-footprint.--secondary .c-footprint__items {
width: clamp(90px, 15.9vw, 272px);
height: clamp(100px, 17.7vw, 304px);
}
.c-footprint.--secondary .c-footprint__item:nth-child(1) {
right: 0;
bottom: 0;
width: clamp(17px, 2.9vw, 48px);
}
.c-footprint.--secondary .c-footprint__item:nth-child(2) {
right: 46%;
bottom: -1%;
width: clamp(16px, 2.8vw, 47px);
}
.c-footprint.--secondary .c-footprint__item:nth-child(3) {
right: 28%;
bottom: 36%;
width: clamp(20px, 3.2vw, 53px);
}
.c-footprint.--secondary .c-footprint__item:nth-child(4) {
right: 73%;
bottom: 42%;
width: clamp(15px, 2.6vw, 45px);
}
.c-footprint.--secondary .c-footprint__item:nth-child(5) {
right: 51%;
bottom: 73%;
width: clamp(16px, 2.8vw, 47px);
}
.c-footprint.--secondary .c-footprint__item:nth-child(6) {
right: 84%;
bottom: 85%;
width: clamp(15px, 2.6vw, 45px);
}
.c-footprint.--tertiary .c-footprint__items {
width: clamp(90px, 15.8vw, 271px);
height: clamp(100px, 17.7vw, 304px);
}
.c-footprint.--tertiary .c-footprint__item:nth-child(1) {
bottom: 0;
left: 0;
width: clamp(17px, 2.9vw, 48px);
}
.c-footprint.--tertiary .c-footprint__item:nth-child(2) {
bottom: -2%;
left: 46%;
width: clamp(16px, 2.8vw, 47px);
}
.c-footprint.--tertiary .c-footprint__item:nth-child(3) {
bottom: 34%;
left: 30%;
width: clamp(20px, 3.2vw, 53px);
}
.c-footprint.--tertiary .c-footprint__item:nth-child(4) {
bottom: 41%;
left: 74%;
width: clamp(15px, 2.7vw, 46px);
}
.c-footprint.--tertiary .c-footprint__item:nth-child(5) {
bottom: 72%;
left: 53%;
width: clamp(16px, 2.8vw, 47px);
}
.c-footprint.--tertiary .c-footprint__item:nth-child(6) {
bottom: 84%;
left: 85%;
width: clamp(13px, 2.5vw, 44px);
}
/* フォーム
--------------------------------------------------------- */
@media only screen and (max-width: 767.98px) {
.c-form select,
.c-form input[type=file] {
width: 100%;
}
}
.c-form input[type=text],
.c-form input[type=tel],
.c-form input[type=email],
.c-form textarea {
padding-top: .7em;
padding-bottom: .7em;
border: 0;
}
.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-red) 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: 130px;
}
@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__btn {
display: flex;
margin-top: clamp(45px, 5vw, 70px);
justify-content: center;
gap: clamp(15px, 1.8vw, 25px);
}
/* ローディング
--------------------------------------------------------- */
.c-loading {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
margin: auto;
background: #fff url('../images/common/bg-pattern.png') left top repeat;
}
.is-hero-ready .c-loading {
animation: fadeOut 1.2s linear forwards;
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
pointer-events: none;
}
}
/* 埋め込みコンポーネント
--------------------------------------------------------- */
.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;
}
}
/* ページング
--------------------------------------------------------- */
.paging {
display: flex;
margin-top: clamp(70px, 8.3vw, 120px);
flex-wrap: wrap;
justify-content: center;
gap: 6px;
}
.paging .current {
padding: .5em .9em;
border-color: var(--color-main);
background-color: var(--color-main);
color: #fff;
}
.paging-text {
display: block;
overflow: hidden;
border: 1px solid #f0f0f0;
border-radius: .6em;
background-color: var(--color-base2);
letter-spacing: 0;
font-size: clamp(.813rem, .256vw + .755rem, 1.063rem);
font-family: var(--font-family-secondary);
line-height: 1.4;
cursor: pointer;
}
.paging-text a {
display: block;
padding: .5em .9em;
color: var(--color-txt);
text-decoration: none;
transition: background-color .6s, color .6s;
}
.paging-text a:is(:hover, :active, :focus) {
background-color: #fff;
}
/* ========================================================================
/*
/* Project
/*
========================================================================= */
/* ヘッダー
--------------------------------------------------------- */
.p-header {
background-color: var(--color-base2);
}
@media screen and (max-width: 991.98px) {
.p-header {
display: flex;
height: var(--header-height-mobile);
padding-left: 1.5vw;
align-items: center;
}
}
@media print, screen and (min-width: 992px) {
.p-header {
display: grid;
height: var(--header-height-desktop);
padding-top: 9px;
padding-right: clamp(15px, 1.9vw, 40px);
padding-bottom: 9px;
padding-left: clamp(15px, 1.9vw, 40px);
border-radius: 999px;
column-gap: 4%;
grid-template: 'brand util'/auto 1fr;
align-items: center;
}
}
.p-header__brand {
display: flex;
grid-area: brand;
align-items: center;
gap: clamp(15px, 1.8vw, 25px);
}
.p-header__sns {
position: relative;
font-size: 0;
}
@media print, screen and (min-width: 992px) {
.p-header__sns {
top: -.15em;
}
}
@media screen and (max-width: 991.98px) {
.p-header__sns svg {
width: clamp(25px, 4.1vw, 30px);
}
}
@media print, screen and (min-width: 992px) {
.p-header__sns svg {
width: clamp(20px, 1.5vw, 25px);
}
}
.p-header__sns svg .st0 {
transition: fill .6s;
fill: var(--color-sub);
}
@media print, screen and (min-width: 768px) {
.p-header__sns:hover svg .st0 {
fill: var(--color-main);
}
}
.p-header__util {
grid-area: util;
}
@media print, screen and (min-width: 992px) {
.p-header__util {
align-self: stretch;
}
}
@media screen and (max-width: 991.98px) {
.p-header__block {
text-align: center;
}
}
@media print, screen and (min-width: 992px) {
.p-header__block {
display: grid;
height: 100%;
grid-template: 'nav btn tel'/1fr auto auto;
align-items: center;
}
}
.p-header__nav {
grid-area: nav;
}
.p-header__btn {
grid-area: btn;
}
@media screen and (max-width: 991.98px) {
.p-header__btn {
margin-top: 40px;
}
}
@media print, screen and (min-width: 992px) {
.p-header__btn {
height: 100%;
margin-left: clamp(20px, 1.5vw, 25px);
}
}
.p-header__btn a {
position: relative;
z-index: 0;
color: #fff;
text-align: center;
text-decoration: none;
font-weight: 500;
line-height: 1.5;
transition: background-color .6s, color .6s;
}
@media screen and (max-width: 991.98px) {
.p-header__btn a {
display: block;
padding: .6em 1.5em;
font-size: clamp(1.125rem, .158vw + 1.089rem, 1.188rem);
}
}
@media print, screen and (min-width: 992px) {
.p-header__btn a {
display: flex;
height: 100%;
padding: .5em 2.4em .5em 2.3em;
font-size: clamp(.938rem, .108vw + .871rem, 1rem);
align-items: center;
justify-content: center;
}
}
.p-header__btn a::before {
position: absolute;
z-index: -1;
border-radius: 999px;
background-color: var(--color-main);
content: '';
transition: .6s;
inset: 0;
}
.p-header__btn a::after {
display: inline-block;
height: 1.06em;
margin-left: .5em;
background-color: #fff;
content: '';
-webkit-mask-image: var(--icon-dog);
mask-image: var(--icon-dog);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
aspect-ratio: 29/24;
}
@media screen and (max-width: 991.98px) {
.p-header__btn a::after {
position: relative;
top: .1em;
}
}
@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)::before {
transform: scale(1.05, 1.0625);
}
}
.p-header__btn i {
margin-right: .7em;
}
.p-header__tel {
position: relative;
display: flex;
flex-direction: column;
padding-left: 1em;
line-height: 1.1;
grid-area: tel;
}
@media screen and (max-width: 991.98px) {
.p-header__tel {
display: inline-flex;
flex-direction: column;
margin-top: 40px;
text-align: center;
font-size: clamp(1.75rem, .475vw + 1.643rem, 1.938rem);
}
}
@media print, screen and (min-width: 992px) {
.p-header__tel {
margin-left: 15px;
font-size: clamp(1.25rem, .431vw + .983rem, 1.5rem);
}
}
.p-header__tel::before {
position: absolute;
left: 0;
height: .68em;
background-color: var(--color-main);
content: '';
-webkit-mask-image: var(--icon-tel);
mask-image: var(--icon-tel);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
aspect-ratio: 1;
}
@media screen and (max-width: 991.98px) {
.p-header__tel::before {
top: .1em;
}
}
@media print, screen and (min-width: 992px) {
.p-header__tel::before {
top: .14em;
}
}
@media print {
.p-header__tel::before {
-webkit-print-color-adjust: exact;
}
}
.p-header__tel-num {
position: relative;
color: var(--color-main);
letter-spacing: .1em;
font-weight: 500;
font-family: var(--font-family-secondary);
}
.p-header__tel-time {
padding-left: .3em;
letter-spacing: .1em;
font-weight: 500;
}
@media screen and (max-width: 991.98px) {
.p-header__tel-time {
font-size: clamp(.813rem, .158vw + .777rem, .875rem);
}
}
@media print, screen and (min-width: 992px) {
.p-header__tel-time {
font-size: clamp(.688rem, .108vw + .621rem, .75rem);
}
}
/* フッター
--------------------------------------------------------- */
.p-footer {
max-width: min(92vw, 1230px);
margin-top: clamp(60px, 7.2vw, 104px);
margin-right: auto;
margin-left: auto;
color: var(--color-txt2);
}
@media print, screen and (min-width: 992px) {
.p-footer__inner {
display: grid;
column-gap: 4%;
grid-template: 'util links'/1fr auto;
}
}
.p-footer__util {
grid-area: util;
}
@media print, screen and (min-width: 768px) {
.p-footer__util {
display: grid;
column-gap: clamp(30px, 3.3vw, 60px);
grid-template: 'info nav'/auto 1fr;
}
}
.p-footer__info {
grid-area: info;
}
@media print, screen and (min-width: 768px) {
.p-footer__info {
font-size: .875rem;
line-height: 1.64;
}
}
.p-footer__logo {
margin-bottom: clamp(30px, 3.5vw, 50px);
}
@media print, screen and (min-width: 768px) {
.p-footer__logo {
position: relative;
left: -.2em;
}
}
@media print, screen and (min-width: 768px) {
.p-footer__time {
font-size: clamp(.75rem, .174vw + .667rem, .875rem);
}
}
.p-footer__time-item {
display: grid;
grid-template-columns: 5.5em 1fr;
}
@media print, screen and (min-width: 768px) {
.p-footer__time-item dt,
.p-footer__time-item dd {
line-height: 1.6;
}
}
.p-footer__sns {
position: relative;
margin-top: clamp(15px, 1.8vw, 25px);
}
@media print, screen and (min-width: 992px) {
.p-footer__sns {
top: -.15em;
}
}
@media screen and (max-width: 991.98px) {
.p-footer__sns svg {
width: 25px;
}
}
@media print, screen and (min-width: 992px) {
.p-footer__sns svg {
width: clamp(25px, 1.9vw, 29px);
}
}
.p-footer__sns svg .st0 {
transition: fill .6s;
fill: var(--color-sub);
}
@media print, screen and (min-width: 768px) {
.p-footer__sns:hover svg .st0 {
fill: var(--color-main);
}
}
.p-footer__nav {
grid-area: nav;
}
@media only screen and (max-width: 767.98px) {
.p-footer__nav {
margin-top: 30px;
}
}
@media print, screen and (min-width: 768px) {
.p-footer__nav {
position: relative;
top: -.7em;
}
}
@media print, screen and (min-width: 768px) {
.p-footer__nav-item + .p-footer__nav-item {
margin-top: .4em;
}
}
.p-footer__nav a {
display: inline-block;
color: var(--color-txt2);
line-height: 1.5;
transition: color .6s;
}
@media print, screen and (min-width: 768px) {
.p-footer__nav a {
font-size: clamp(.938rem, .064vw + .923rem, 1rem);
}
}
.p-footer__nav a:is(:hover, :active, :focus) {
color: var(--color-main);
}
.p-footer__links {
display: grid;
column-gap: clamp(15px, 2vw, 40px);
grid-area: links;
grid-template: 'certificate cta'/auto auto;
}
@media screen and (max-width: 991.98px) {
.p-footer__links {
margin-top: 40px;
}
}
.p-footer__certificate {
grid-area: certificate;
}
@media screen and (max-width: 991.98px) {
.p-footer__certificate {
height: 100%;
}
}
@media only screen and (max-width: 767.98px) {
.p-footer__certificate {
width: 36vw;
}
}
@media print, screen and (min-width: 992px) {
.p-footer__certificate {
width: clamp(260px, 26.5vw, 320px);
}
}
@media screen and (min-width: 1200px) {
.p-footer__certificate {
width: clamp(320px, 21.7vw, 356px);
}
}
.p-footer__certificate img {
width: 100%;
height: auto;
cursor: zoom-in;
transition: opacity .6s;
}
@media only screen and (max-width: 767.98px) {
.p-footer__certificate img {
height: 100%;
object-fit: cover;
}
}
@media print, screen and (min-width: 768px) {
.p-footer__certificate img:hover {
opacity: .7;
}
}
.p-footer__cta {
grid-area: cta;
}
@media print, screen and (min-width: 992px) {
.p-footer__cta {
width: clamp(200px, 15.1vw, 240px);
}
}
.p-footer__bnr + .p-footer__bnr {
margin-top: clamp(10px, 1.1vw, 20px);
}
.p-footer__bnr a:hover img {
opacity: .7;
}
.p-footer__bnr img {
width: 100%;
height: auto;
transition: opacity .6s;
}
@media only screen and (max-width: 767.98px) {
.p-footer__btn {
margin-top: clamp(10px, 2.2vw, 15px);
}
}
@media print, screen and (min-width: 768px) {
.p-footer__btn {
margin-top: clamp(15px, 1.3vw, 20px);
}
}
.p-footer__btn a {
position: relative;
display: block;
border-radius: 999px;
background-color: var(--color-base2);
color: var(--color-txt2);
letter-spacing: .1em;
transition: background-color .6s, color .6s;
}
@media only screen and (max-width: 767.98px) {
.p-footer__btn a {
padding: .6em 1.5em;
font-size: clamp(.813rem, .245vw + .757rem, .875rem);
line-height: 1.4;
}
}
@media print, screen and (min-width: 768px) {
.p-footer__btn a {
padding: 1.4em 2.1em;
font-size: clamp(.813rem, .064vw + .798rem, .875rem);
line-height: 1.6;
}
}
.p-footer__btn a::before {
position: absolute;
top: 0;
right: clamp(15px, 1.9vw, 28px);
bottom: 0;
height: 1.16em;
margin: auto;
background-color: currentColor;
content: '';
transition: background-color .2s;
-webkit-mask-image: var(--icon-external);
mask-image: var(--icon-external);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
aspect-ratio: 1;
}
@media print {
.p-footer__btn a::before {
-webkit-print-color-adjust: exact;
}
}
.p-footer__btn a strong {
font-weight: 500;
}
.p-footer__btn a:is(:hover, :active, :focus) {
background-color: #fff;
}
.p-footer__lower {
display: flex;
margin-top: clamp(40px, 5.1vw, 77px);
padding-top: .7em;
border-top: 1px solid #6c4a2f;
justify-content: space-between;
gap: 10px;
}
.p-footer__copyright {
letter-spacing: .1em;
font-size: clamp(.813rem, .064vw + .798rem, .875rem);
}
.p-footer__pagetop {
letter-spacing: .1em;
font-weight: 500;
font-size: clamp(.813rem, .064vw + .798rem, .875rem);
cursor: pointer;
transition: color .6s;
}
.p-footer__pagetop:hover {
color: var(--color-main);
}
/* TOP メッセージ
--------------------------------------------------------- */
.p-message {
position: relative;
z-index: 100;
padding-top: clamp(60px, 12.4vw, 223px);
}
.p-message__inner {
width: min(92%, 1230px);
margin-right: auto;
margin-left: auto;
}
@media print, screen and (min-width: 768px) {
.p-message__item {
display: inline-grid;
}
}
@media print, screen and (min-width: 768px) {
.p-message__item.--primary {
grid-template: 'txt photo'/1fr auto;
}
}
@media print, screen and (min-width: 768px) {
.p-message__item.--primary .p-message__txt {
margin-top: clamp(50px, 5.8vw, 105px);
margin-right: clamp(0px, 1.5vw, 40px);
margin-left: clamp(20px, 5.1vw, 80px);
}
}
@media screen and (min-width: 1200px) {
.p-message__item.--primary .p-message__txt {
margin-right: clamp(50px, 4.8vw, 100px);
margin-left: clamp(80px, 5.9vw, 105px);
}
}
.p-message__item.--primary .p-message__photo {
width: clamp(320px, 37.7vw, 540px);
}
@media print, screen and (min-width: 768px) {
.p-message__item.--primary .p-message__photo {
top: -5%;
}
}
.p-message__item.--primary .p-message__photo-img img {
-webkit-clip-path: url(#cp-img01);
clip-path: url(#cp-img01);
}
.p-message__item.--primary .p-message__photo-object {
width: clamp(180px, 21.5vw, 310px);
}
@media only screen and (max-width: 767.98px) {
.p-message__item.--primary .p-message__photo-object {
top: -10px;
right: -15%;
}
}
@media print, screen and (min-width: 768px) {
.p-message__item.--primary .p-message__photo-object {
top: -30px;
right: -23%;
}
}
.p-message__item.--primary .p-message__photo-object svg {
fill: var(--color-object);
}
@media only screen and (max-width: 767.98px) {
.p-message__item.--secondary {
margin-top: clamp(50px, 9.8vw, 60px);
}
}
@media print, screen and (min-width: 768px) {
.p-message__item.--secondary {
margin-top: 35px;
grid-template: 'photo txt'/auto 1fr;
}
}
@media print, screen and (min-width: 768px) {
.p-message__item.--secondary .p-message__txt {
margin-right: clamp(50px, 4.8vw, 80px);
margin-left: clamp(50px, 6.9vw, 135px);
}
}
.p-message__item.--secondary .p-message__photo {
width: clamp(340px, 41.2vw, 600px);
}
@media print, screen and (min-width: 768px) {
.p-message__item.--secondary .p-message__photo {
top: calc(clamp(50px, 4.8vw, 80px) * -1);
left: 5%;
}
}
.p-message__item.--secondary .p-message__photo-img img {
-webkit-clip-path: url(#cp-img02);
clip-path: url(#cp-img02);
}
.p-message__item.--secondary .p-message__photo-object {
width: clamp(150px, 18.4vw, 270px);
}
@media only screen and (max-width: 767.98px) {
.p-message__item.--secondary .p-message__photo-object {
top: 10%;
left: -15%;
}
}
@media print, screen and (min-width: 768px) {
.p-message__item.--secondary .p-message__photo-object {
top: 0;
left: -14%;
}
}
.p-message__item.--secondary .p-message__photo-object svg {
fill: var(--color-object2);
}
.p-message__txt {
font-weight: 500;
grid-area: txt;
}
@media only screen and (max-width: 767.98px) {
.p-message__txt {
text-align: center;
letter-spacing: .07em;
font-size: clamp(1rem, .245vw + .945rem, 1.063rem);
}
}
@media print, screen and (min-width: 768px) {
.p-message__txt {
letter-spacing: .1em;
font-size: clamp(.938rem, .434vw + .729rem, 1.25rem);
}
}
.p-message__txt p + p {
margin-top: 1.7em;
}
.p-message__photo {
position: relative;
z-index: 1;
grid-area: photo;
}
@media only screen and (max-width: 767.98px) {
.p-message__photo {
margin-top: 40px;
margin-right: auto;
margin-left: auto;
}
}
.p-message__photo-img {
position: relative;
}
.p-message__photo-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.p-message__photo-img svg {
position: absolute;
inset: 0;
}
.p-message__photo-object {
position: absolute;
z-index: -1;
}
.p-message__photo-object svg {
position: absolute;
inset: 0;
}
.p-message__footprint {
position: absolute;
z-index: 2;
pointer-events: none;
}
@media only screen and (max-width: 767.98px) {
.p-message__footprint {
top: -4%;
right: 3%;
}
}
@media print, screen and (min-width: 768px) {
.p-message__footprint {
top: -9%;
right: 3%;
}
}
/* TOP 新着情報
--------------------------------------------------------- */
.p-news {
position: relative;
z-index: 0;
width: min(92%, 1680px);
margin-top: clamp(110px, 12.9vw, 185px);
margin-right: auto;
margin-left: auto;
padding-bottom: clamp(50px, 7.5vw, 122px);
border-radius: clamp(10px, 2.2vw, 40px);
background-color: var(--color-base2);
}
.p-news::before {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: -1;
width: min(60%, 880px);
height: min(60%, 880px);
margin: auto;
border-radius: 50%;
background-color: var(--color-base2);
content: '';
}
@media only screen and (max-width: 767.98px) {
.p-news::before {
top: calc(clamp(50px, 6.6vw, 100px) * -1);
width: clamp(250px, 66.5vw, 500px);
height: clamp(250px, 66.5vw, 500px);
}
}
@media print, screen and (min-width: 768px) {
.p-news::before {
top: calc(clamp(80px, 9.6vw, 140px) * -1);
width: clamp(500px, 51.3vw, 880px);
height: clamp(500px, 51.3vw, 880px);
}
}
.p-news__inner {
width: min(92%, 1230px);
margin-right: auto;
margin-left: auto;
}
.p-news__header {
position: relative;
top: calc(clamp(20px, 2.4vw, 35px) * -1);
}
@media print, screen and (min-width: 768px) {
.p-news__items {
display: grid;
padding-top: clamp(20px, 2.2vw, 40px);
column-gap: clamp(30px, 3.3vw, 60px);
grid-template-columns: 1fr 1fr;
}
}
.p-news__latest .p-news__img {
border-radius: clamp(6px, .8vw, 12px);
}
.p-news__latest .p-news__img img {
aspect-ratio: 195/148;
}
@media only screen and (max-width: 767.98px) {
.p-news__list {
margin-top: 50px;
}
}
@media print, screen and (min-width: 768px) {
.p-news__list {
display: grid;
column-gap: clamp(20px, 2.2vw, 40px);
grid-template-columns: repeat(2, 1fr);
row-gap: clamp(20px, 2vw, 33px);
}
}
.p-news__latest a,
.p-news__item a {
display: block;
color: inherit;
text-decoration: none;
}
.p-news__latest a:is(:hover, :active, :focus),
.p-news__item a:is(:hover, :active, :focus) {
color: var(--color-main);
}
.p-news__latest a:is(:hover, :active, :focus) img,
.p-news__item a:is(:hover, :active, :focus) img {
opacity: .8;
}
@media only screen and (max-width: 767.98px) {
.p-news__item + .p-news__item {
margin-top: 50px;
}
}
.p-news__img {
overflow: hidden;
border-radius: clamp(6px, .6vw, 8px);
}
.p-news__img img {
width: 100%;
transition: opacity .6s;
object-fit: cover;
aspect-ratio: 16/9;
}
.p-news__meta {
display: flex;
margin-top: 1.2em;
font-family: var(--font-family-secondary);
line-height: 1.5;
align-items: center;
gap: .6em;
}
.p-news__icon-new {
display: inline-block;
padding: .4em .8em .1em;
border-radius: 4px;
background-color: var(--color-main);
color: #fff;
letter-spacing: .1em;
line-height: 1.5;
}
@media only screen and (max-width: 767.98px) {
.p-news__icon-new {
font-size: .625rem;
}
}
@media print, screen and (min-width: 768px) {
.p-news__icon-new {
font-size: clamp(.563rem, .087vw + .521rem, .625rem);
}
}
.p-news__date {
letter-spacing: .1em;
font-weight: 350;
}
@media only screen and (max-width: 767.98px) {
.p-news__date {
font-size: .875rem;
}
}
@media print, screen and (min-width: 768px) {
.p-news__date {
font-size: clamp(.75rem, .174vw + .667rem, .875rem);
}
}
.p-news__txt {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: .6em;
line-height: 1.7;
-webkit-line-clamp: 2;
}
@media only screen and (max-width: 767.98px) {
.p-news__txt {
font-size: clamp(.938rem, .245vw + .882rem, 1rem);
}
}
@media print, screen and (min-width: 768px) {
.p-news__txt {
font-size: clamp(13px, 1.1vw, 16px);
}
}
.p-news__btn {
margin-top: clamp(40px, 4.2vw, 55px);
text-align: center;
}
.p-news__footprint {
position: absolute;
pointer-events: none;
}
@media only screen and (max-width: 767.98px) {
.p-news__footprint {
top: -2%;
left: -3%;
}
}
@media print, screen and (min-width: 768px) {
.p-news__footprint {
top: -24.5%;
left: -2.5%;
}
}
/* TOP 店舗情報
--------------------------------------------------------- */
.p-shop {
position: relative;
margin-top: clamp(60px, 7.2vw, 105px);
}
.p-shop__inner {
width: min(92%, 1230px);
margin-right: auto;
margin-left: auto;
}
@media print, screen and (min-width: 768px) {
.p-shop__header {
margin-bottom: 2.9em;
}
}
@media print, screen and (min-width: 992px) {
.p-shop__body {
display: grid;
column-gap: clamp(30px, 3.1vw, 60px);
grid-template: 'table map'/1fr 1fr;
}
}
.p-shop__map {
overflow: hidden;
border-radius: clamp(22px, 2.7vw, 40px);
font-size: 0;
}
@media screen and (max-width: 991.98px) {
.p-shop__map {
margin-top: 50px;
}
}
@media print, screen and (min-width: 992px) {
.p-shop__map {
margin-top: 15px;
}
}
.p-shop__map iframe {
width: 100% !important;
height: 100% !important;
}
@media screen and (max-width: 991.98px) {
.p-shop__map iframe {
aspect-ratio: 1;
}
}
.p-shop__footprint {
position: absolute;
z-index: 1;
pointer-events: none;
}
@media only screen and (max-width: 767.98px) {
.p-shop__footprint {
top: 0;
right: 3%;
}
}
@media print, screen and (min-width: 768px) {
.p-shop__footprint {
right: 7.5%;
right: 1%;
bottom: -27%;
}
}
@media screen and (min-width: 2000px) {
.p-shop__footprint {
right: 7.5%;
}
}
/* TOP アワード
--------------------------------------------------------- */
.p-award {
position: relative;
overflow: hidden;
margin-top: clamp(70px, 11vw, 180px);
}
.p-award__gallery .swiper-wrapper {
transition-timing-function: linear;
}
.p-award__gallery .swiper-slide {
position: relative;
z-index: 1;
overflow: hidden;
border-radius: clamp(8px, 1.6vw, 28px);
}
.p-award__gallery .swiper-slide::before {
position: absolute;
z-index: 1;
background-color: var(--color-base2);
content: '';
opacity: .15;
inset: 0;
}
.p-award__gallery .swiper-slide:nth-of-type(even) {
margin-top: clamp(30px, 3.9vw, 60px);
}
.p-award__gallery .swiper-slide img {
width: 100%;
height: auto;
}
.p-award__container {
width: min(92%, 1680px);
margin-top: calc(clamp(100px, 11.8vw, 170px) * -1);
margin-right: auto;
margin-left: auto;
padding-top: clamp(180px, 21.7vw, 315px);
padding-bottom: clamp(50px, 6.6vw, 100px);
border-radius: clamp(10px, 2.2vw, 40px);
background-color: var(--color-base2);
}
.p-award__inner {
width: min(92%, 1230px);
margin-right: auto;
margin-left: auto;
}
.p-award__badges {
margin-top: clamp(30px, 3.7vw, 55px);
}
.p-award__badges-items {
display: flex;
justify-content: center;
gap: clamp(12px, 2.3vw, 40px);
}
.p-award__badges-items + .p-award__badges-items {
margin-top: clamp(15px, 1.7vw, 24px);
}
.p-award__badges img {
width: 100%;
height: auto;
}
.p-award__list-wrap {
margin-top: clamp(50px, 5.7vw, 80px);
border-radius: clamp(10px, 2.2vw, 40px);
background-color: var(--color-base3);
}
@media only screen and (max-width: 767.98px) {
.p-award__list-wrap {
padding: 5vw 4vw 6vw;
}
}
@media print, screen and (min-width: 768px) {
.p-award__list-wrap {
display: flex;
max-width: 810px;
margin-right: auto;
margin-left: auto;
padding-top: clamp(30px, 3vw, 50px);
padding-right: clamp(30px, 3vw, 50px);
padding-bottom: clamp(30px, 3vw, 50px);
padding-left: clamp(30px, 3vw, 50px);
justify-content: center;
}
}
.p-award__list {
letter-spacing: .1em;
}
@media only screen and (max-width: 767.98px) {
.p-award__list {
font-size: .9375rem;
}
}
@media print, screen and (min-width: 768px) {
.p-award__list {
font-size: .875rem;
}
}
.p-award__list li + li {
margin-top: .2em;
}
/* 店内の様子
--------------------------------------------------------- */
.p-movie {
width: min(92%, 1680px);
margin-top: clamp(60px, 7.2vw, 105px);
margin-right: auto;
margin-left: auto;
padding-top: clamp(40px, 5.3vw, 80px);
padding-bottom: clamp(50px, 6.6vw, 100px);
border-radius: clamp(10px, 2.2vw, 40px);
background-color: var(--color-base2);
}
.p-movie__inner {
width: min(92%, 1230px);
margin-right: auto;
margin-left: auto;
}
.p-movie__video {
text-align: center;
font-size: 0;
}
.p-movie__video video {
overflow: hidden;
border-radius: clamp(8px, 1vw, 15px);
aspect-ratio: 9/16;
}
@media only screen and (max-width: 767.98px) {
.p-movie__video video {
width: 100%;
}
}
@media print, screen and (min-width: 768px) {
.p-movie__video video {
width: clamp(300px, 26vw, 400px);
}
}
/* 新着情報
--------------------------------------------------------- */
.p-info__inner {
width: min(92%, 1230px);
margin-right: auto;
margin-left: auto;
}
.p-info__nav {
margin-bottom: clamp(50px, 7.5vw, 120px);
}
.p-info__nav-header {
position: relative;
padding: .4em 1em;
border-top-left-radius: 6px;
border-top-right-radius: clamp(10px, 2.2vw, 15px);
border-bottom-right-radius: 6px;
border-bottom-left-radius: clamp(10px, 2.2vw, 15px);
background-color: var(--color-sub);
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-info__nav-header {
display: none;
}
}
@media only screen and (max-width: 767.98px) {
.p-info__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-info__nav-header::after {
position: absolute;
top: 0;
right: .7em;
bottom: 0;
display: flex;
color: var(--color-object2);
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-info__nav-header.is-open::after {
content: '\f068';
}
}
@media only screen and (max-width: 767.98px) {
.p-info__nav-box {
display: none;
}
}
@media print, screen and (min-width: 768px) {
.p-info__nav-box {
display: block !important;
}
}
.p-info__nav-lists {
display: grid;
}
@media only screen and (max-width: 767.98px) {
.p-info__nav-lists {
padding-top: 15px;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
}
@media print, screen and (min-width: 768px) {
.p-info__nav-lists {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
}
@media print, screen and (min-width: 992px) {
.p-info__nav-lists {
grid-template-columns: repeat(3, 1fr);
}
}
@media screen and (min-width: 1200px) {
.p-info__nav-lists {
grid-template-columns: repeat(4, 1fr);
}
}
.p-info__nav li a {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
border: 1px solid var(--color-main);
border-radius: 999px;
background-color: transparent;
color: var(--color-main);
text-decoration: none;
letter-spacing: .1em;
font-weight: 500;
line-height: 1.5;
transition: .6s;
justify-content: center;
align-items: center;
}
@media only screen and (max-width: 767.98px) {
.p-info__nav li a {
padding: .8em 2em .8em 1.4em;
font-size: clamp(14px, 2.6vw, 15px);
}
}
@media print, screen and (min-width: 768px) {
.p-info__nav li a {
padding: .7em 2.4em .7em 1.6em;
font-size: clamp(.938rem, .162vw + .86rem, 1.063rem);
}
}
.p-info__nav li a::after {
position: absolute;
top: 0;
right: clamp(15px, 1.5vw, 20px);
bottom: 0;
height: .74em;
margin: auto;
background-color: currentColor;
content: '';
transition: background-color .2s;
-webkit-mask-image: var(--icon-arrow);
mask-image: var(--icon-arrow);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
aspect-ratio: 32/30;
}
@media print {
.p-info__nav li a::after {
-webkit-print-color-adjust: exact;
}
}
@media print, screen and (min-width: 768px) {
.p-info__nav li a:hover,
.p-info__nav li a:active {
background-color: var(--color-base2);
}
}
.p-info__nav li.is-current a {
background-color: var(--color-main);
color: #fff;
}
@media print, screen and (min-width: 768px) {
.p-info__items {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(40px, 4.1vw, 70px);
}
}
.p-info__item {
position: relative;
z-index: 0;
display: block;
overflow: hidden;
width: 100%;
color: #fff;
transition: all .5s;
}
@media only screen and (max-width: 767.98px) {
.p-info__item {
border-radius: clamp(8px, 1.8vw, 12px);
}
}
@media print, screen and (min-width: 768px) {
.p-info__item {
min-height: clamp(280px, 23.8vw, 360px);
border-radius: clamp(15px, 1.3vw, 20px);
}
}
.p-info__item:is(:hover, :active, :focus) {
z-index: 4;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
transform: scale(1.05);
}
.is-touch .p-info__item:is(:hover, :active, :focus) {
box-shadow: none;
transform: scale(1);
}
.p-info__item:is(:hover, :active, :focus) .p-info__item-img::before {
background-color: rgba(76, 70, 60, .5);
}
.p-info__item:is(:hover, :active, :focus) .p-info__item-content {
opacity: 1;
}
@media only screen and (max-width: 767.98px) {
.p-info__item + .p-info__item {
margin-top: clamp(50px, 9.8vw, 60px);
}
}
.p-info__item a {
display: block;
height: 100%;
color: #fff;
text-decoration: none;
}
.is-touch .p-info__item a {
color: var(--color-txt);
}
.p-info__item-img {
position: absolute;
z-index: 1;
inset: 0;
}
.is-touch .p-info__item-img {
position: relative;
aspect-ratio: 4/3;
}
.p-info__item-img::before {
position: absolute;
z-index: 1;
background-color: transparent;
content: '';
transition: background-color .6s;
inset: 0;
}
.is-touch .p-info__item-img::before {
display: none;
}
.p-info__item-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.p-info__item-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
height: 100%;
opacity: 0;
transition: all .5s;
align-items: center;
justify-content: center;
}
@media only screen and (max-width: 767.98px) {
.p-info__item-content {
padding: 12vw 6vw;
}
}
@media print, screen and (min-width: 768px) {
.p-info__item-content {
padding-top: clamp(40px, 3.3vw, 50px);
padding-right: clamp(30px, 3vw, 50px);
padding-bottom: clamp(40px, 3.3vw, 50px);
padding-left: clamp(30px, 3vw, 50px);
}
}
.is-touch .p-info__item-content {
display: block;
background-color: var(--color-base3);
opacity: 1;
}
.p-info__item-title {
position: relative;
display: flex;
padding-bottom: .6em;
border-bottom: 1px solid rgba(255, 255, 255, .3);
font-weight: 500;
line-height: 1.5;
}
@media only screen and (max-width: 767.98px) {
.p-info__item-title {
font-size: clamp(1.125rem, .49vw + 1.015rem, 1.25rem);
}
}
@media print, screen and (min-width: 768px) {
.p-info__item-title {
font-size: clamp(1.188rem, .434vw + .979rem, 1.5rem);
}
}
.is-touch .p-info__item-title {
padding-bottom: .7em;
border-bottom-color: #d3ccc2;
}
.p-info__item-btn {
margin-top: clamp(30px, 3.1vw, 40px);
text-align: center;
}
/* 詳細ページ
--------------------------------------------------------- */
.p-detail__inner {
width: min(92%, 1110px);
margin-right: auto;
margin-left: auto;
}
.p-detail__title {
padding-bottom: .7em;
border-bottom: 1px solid #d3ccc2;
letter-spacing: .1em;
font-weight: 500;
font-size: clamp(1.063rem, .705vw + .904rem, 1.75rem);
line-height: 1.8;
}
@media only screen and (max-width: 767.98px) {
.p-detail__title {
margin-bottom: 1.7em;
}
}
@media print, screen and (min-width: 768px) {
.p-detail__title {
margin-bottom: 2.5em;
}
}
@media print, screen and (min-width: 768px) {
.p-detail__gallery {
display: grid;
column-gap: 4%;
grid-template: 'large thumbs'/55% 1fr;
}
}
.p-detail__gallery [class*=swiper]:focus {
outline: none;
}
.p-detail__gallery-large {
grid-area: large;
}
.p-detail__gallery-thumbs {
grid-area: thumbs;
}
@media only screen and (max-width: 767.98px) {
.p-detail__gallery-thumbs {
margin-top: 10px;
}
}
.p-detail__gallery .swiper {
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, 2.9vw, 40px);
height: clamp(26px, 2.9vw, 40px);
margin: auto;
border-radius: 50%;
background-color: var(--color-main);
cursor: pointer;
transition: 2s 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: var(--color-sub);
}
.p-detail__gallery .swiper-button-prev::after,
.p-detail__gallery .swiper-button-next::after {
background-color: #fff;
content: '';
-webkit-mask-image: var(--icon-arrow);
mask-image: var(--icon-arrow);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
aspect-ratio: 32/30;
}
@media only screen and (max-width: 767.98px) {
.p-detail__gallery .swiper-button-prev::after,
.p-detail__gallery .swiper-button-next::after {
height: 38%;
}
}
@media print, screen and (min-width: 768px) {
.p-detail__gallery .swiper-button-prev::after,
.p-detail__gallery .swiper-button-next::after {
height: 30%;
}
}
@media print {
.p-detail__gallery .swiper-button-prev::after,
.p-detail__gallery .swiper-button-next::after {
-webkit-print-color-adjust: exact;
}
}
.p-detail__gallery .swiper-button-prev {
right: calc(100% - clamp(26px, 2.9vw, 40px) / 2);
left: auto;
}
.p-detail__gallery .swiper-button-prev::after {
transform: scale(-1, 1);
}
.p-detail__gallery .swiper-button-next {
right: auto;
left: calc(100% - clamp(26px, 2.9vw, 40px) / 2);
}
.p-detail__gallery .swiper-button-disabled {
opacity: 0;
pointer-events: none;
}
.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;
overflow: hidden;
border-radius: clamp(10px, 1.3vw, 20px);
background-color: var(--color-base2);
}
@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 {
cursor: zoom-in;
object-fit: contain;
}
.p-detail__gallery .thumb-wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
@media only screen and (max-width: 767.98px) {
.p-detail__gallery .thumb-wrapper {
gap: 10px;
}
}
@media print, screen and (min-width: 768px) {
.p-detail__gallery .thumb-wrapper {
gap: 12px;
}
}
.p-detail__gallery .thumb-img {
border-radius: clamp(4px, .5vw, 8px);
cursor: pointer;
transition: 2s cubic-bezier(.2, 1, .2, 1);
aspect-ratio: 4/3;
}
.p-detail__gallery .thumb-img:hover {
opacity: .3;
}
.p-detail__gallery .thumb-img.is-current {
opacity: .3;
}
.p-detail__gallery .thumb-img img {
transition: 2s cubic-bezier(.2, 1, .2, 1);
object-fit: cover;
}
.p-detail__txt {
margin-top: clamp(60px, 6.6vw, 90px);
}
.p-detail__txt::after {
display: block;
clear: both;
content: '';
}
.p-detail__txt iframe {
max-width: 100%;
}
.p-detail__files {
margin-top: clamp(40px, 4.8vw, 70px);
}
.p-detail__files-item + .p-detail__files-item {
margin-top: .8em;
}
.p-detail__btns {
display: flex;
margin-top: clamp(60px, 7vw, 100px);
column-gap: clamp(18px, 1.8vw, 30px);
justify-content: center;
align-items: center;
}
/* お問い合わせエリア
--------------------------------------------------------- */
.p-inquiry {
position: relative;
z-index: 0;
overflow: hidden;
border-radius: clamp(10px, 2.2vw, 40px);
background-color: var(--color-base2);
}
@media only screen and (max-width: 767.98px) {
.p-inquiry {
padding-top: clamp(30px, 6.2vw, 40px);
padding-bottom: clamp(50px, 9.8vw, 60px);
}
}
@media print, screen and (min-width: 768px) {
.p-inquiry {
padding-top: clamp(50px, 6.2vw, 92px);
padding-bottom: clamp(50px, 6.8vw, 105px);
}
}
.p-inquiry::before {
position: absolute;
right: -2.5%;
z-index: -1;
margin: auto;
margin-left: .5em;
background-color: #f9eade;
content: '';
-webkit-mask-image: var(--icon-dog);
mask-image: var(--icon-dog);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
aspect-ratio: 29/24;
}
@media only screen and (max-width: 767.98px) {
.p-inquiry::before {
top: 0;
height: 50%;
}
}
@media print, screen and (min-width: 768px) {
.p-inquiry::before {
top: 0;
bottom: 0;
height: 120%;
}
}
@media print {
.p-inquiry::before {
-webkit-print-color-adjust: exact;
}
}
.p-inquiry__inner {
width: min(92%, 1020px);
max-width: 1020px;
margin-right: auto;
margin-left: auto;
}
.p-inquiry__header {
border-bottom: 1px solid #808080;
}
@media only screen and (max-width: 767.98px) {
.p-inquiry__header {
padding-bottom: 1.1em;
}
}
@media print, screen and (min-width: 768px) {
.p-inquiry__header {
padding-bottom: 1.6em;
}
}
@media print, screen and (min-width: 768px) {
.p-inquiry .c-heading {
margin-bottom: 2.6em;
}
}
.p-inquiry .c-heading__title {
position: relative;
left: -.14em;
}
@media print, screen and (min-width: 768px) {
.p-inquiry__body {
display: grid;
column-gap: 4%;
column-gap: clamp(50px, 6.2vw, 117px);
grid-template: 'tel btn'/auto 1fr;
grid-template-columns: auto 1fr;
align-items: center;
}
}
.p-inquiry__tel {
display: flex;
flex-direction: column;
grid-area: tel;
align-items: center;
}
@media print, screen and (min-width: 768px) {
.p-inquiry__tel {
padding-bottom: 8px;
}
}
.p-inquiry__tel-num {
display: inline-block;
color: var(--color-main);
letter-spacing: .1em;
font-weight: 500;
font-family: var(--font-family-secondary);
line-height: 1.5;
}
@media only screen and (max-width: 767.98px) {
.p-inquiry__tel-num {
font-size: clamp(1.688rem, 1.225vw + 1.412rem, 2rem);
}
}
@media print, screen and (min-width: 768px) {
.p-inquiry__tel-num {
font-size: clamp(1.625rem, 1.215vw + 1.042rem, 2.5rem);
}
}
.p-inquiry__tel-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-tel);
mask-image: var(--icon-tel);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
aspect-ratio: 1;
}
@media print {
.p-inquiry__tel-num::before {
-webkit-print-color-adjust: exact;
}
}
.p-inquiry__time {
font-size: clamp(.813rem, .064vw + .798rem, .875rem);
}
.p-inquiry__time-item {
display: grid;
grid-template-columns: 5.5em 1fr;
}
.p-inquiry__time-item dt,
.p-inquiry__time-item dd {
line-height: 1.6;
}
.p-inquiry__btn {
text-align: center;
grid-area: btn;
}
@media only screen and (max-width: 767.98px) {
.p-inquiry__btn {
margin-top: 40px;
}
}
.p-inquiry__btn a {
position: relative;
z-index: 0;
border-radius: 999px;
color: #fff;
letter-spacing: .04em;
font-weight: 500;
}
@media only screen and (max-width: 767.98px) {
.p-inquiry__btn a {
display: block;
padding: .7em 1.5em;
}
}
@media print, screen and (min-width: 768px) {
.p-inquiry__btn a {
display: flex;
padding: 1.8em 3.2em;
font-size: clamp(1.25rem, .347vw + 1.083rem, 1.5rem);
align-items: center;
}
}
.p-inquiry__btn a::before {
position: absolute;
z-index: -1;
border-radius: 999px;
background-color: var(--color-main);
content: '';
transition: .6s;
inset: 0;
}
.p-inquiry__btn a::after {
position: absolute;
top: 0;
bottom: 0;
height: 1.38em;
margin: auto;
margin-left: .5em;
background-color: #fff;
content: '';
-webkit-mask-image: var(--icon-dog);
mask-image: var(--icon-dog);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
aspect-ratio: 29/24;
}
@media only screen and (max-width: 767.98px) {
.p-inquiry__btn a::after {
right: 1.2em;
}
}
@media print, screen and (min-width: 768px) {
.p-inquiry__btn a::after {
right: 3.3em;
}
}
@media print {
.p-inquiry__btn a::after {
-webkit-print-color-adjust: exact;
}
}
.p-inquiry__btn a:is(:hover, :active, :focus) {
color: #fff;
}
.p-inquiry__btn a:is(:hover, :active, :focus)::before {
background-color: var(--color-hover);
}
@media print, screen and (min-width: 992px) {
.p-inquiry__btn a:is(:hover, :active, :focus)::before {
transform: scale(1.05, 1.0625);
}
}
/* メールでのお問い合わせ
--------------------------------------------------------- */
.p-contact {
position: relative;
}
.p-contact__inner {
width: min(92%, 1230px);
margin-right: auto;
margin-left: auto;
}
.p-contact__txt {
margin-bottom: clamp(50px, 5.7vw, 80px);
}
@media print, screen and (min-width: 992px) {
.p-contact__txt {
text-align: center;
font-size: clamp(1rem, .216vw + .866rem, 1.125rem);
line-height: 2.4;
}
}
.p-contact__txt .c-badge {
position: relative;
top: -.2em;
}
.p-contact__tel {
margin-bottom: clamp(70px, 9.2vw, 140px);
}
.p-contact__tel-body {
overflow: hidden;
background-color: var(--color-base2);
}
@media print, screen and (min-width: 768px) {
.p-contact__tel-body {
border-radius: clamp(15px, 1.3vw, 20px);
}
}
.p-contact__tel-title {
margin-top: clamp(10px, 1.3vw, 20px);
margin-right: clamp(10px, 1.3vw, 20px);
margin-left: clamp(10px, 1.3vw, 20px);
padding: .5em 1.2em;
border-radius: clamp(6px, .7vw, 10px);
background-color: var(--color-sub);
color: #fff;
font-weight: 400;
font-size: clamp(1rem, .192vw + .957rem, 1.188rem);
line-height: 1.6;
}
@media print, screen and (min-width: 768px) {
.p-contact__tel-title {
text-align: center;
font-size: clamp(.938rem, .347vw + .771rem, 1.188rem);
}
}
.p-contact__tel-title::before {
position: relative;
top: .03em;
display: inline-block;
height: .9em;
margin-right: .5em;
background-color: currentColor;
content: '';
-webkit-mask-image: var(--icon-dog);
mask-image: var(--icon-dog);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
aspect-ratio: 29/24;
}
@media print {
.p-contact__tel-title::before {
-webkit-print-color-adjust: exact;
}
}
@media only screen and (max-width: 767.98px) {
.p-contact__tel-content {
padding: 3vw 4vw 5vw;
}
}
@media print, screen and (min-width: 768px) {
.p-contact__tel-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-contact__tel-box {
text-align: center;
}
.p-contact__tel-num {
position: relative;
display: inline-block;
letter-spacing: .01em;
font-weight: 500;
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-contact__tel-num {
margin-top: 16px;
}
}
.p-contact__tel-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-tel);
mask-image: var(--icon-tel);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
aspect-ratio: 1;
}
@media print {
.p-contact__tel-num::before {
-webkit-print-color-adjust: exact;
}
}
.p-contact__tel-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-contact__tel-time {
display: flex;
justify-content: center;
align-items: center;
gap: clamp(30px, 2.5vw, 40px);
}
}
.p-contact__tel-time dl {
display: flex;
align-items: center;
gap: 1.2em;
}
@media only screen and (max-width: 767.98px) {
.p-contact__tel-time dl + dl {
margin-top: 10px;
}
}
.p-contact__tel-time dt {
display: inline-block;
width: clamp(120px, 11.8vw, 150px);
padding: .2em .6em;
border-radius: .3em;
background-color: var(--color-object);
text-align: center;
font-weight: 500;
}
.p-contact__tel-time dd {
font-weight: 500;
}
.p-contact__req-txt .c-badge {
position: relative;
top: -.2em;
}
.p-contact__att {
margin-top: clamp(25px, 2.9vw, 40px);
padding: .8em 1.5em;
border-radius: .8em;
background-color: var(--color-sub);
color: #fff;
font-weight: 400;
font-size: clamp(1rem, .128vw + .971rem, 1.125rem);
line-height: 1.6;
}
@media print, screen and (min-width: 768px) {
.p-contact__att {
text-align: center;
}
}
/* プライバシーポリシー
--------------------------------------------------------- */
.p-policy {
margin-top: clamp(40px, 4.4vw, 60px);
}
.p-policy__title {
margin-bottom: .8em;
text-align: center;
letter-spacing: .1em;
font-weight: 500;
font-size: clamp(1.063rem, .192vw + 1.019rem, 1.25rem);
line-height: 1.7;
}
.p-policy__scroll-box {
overflow-y: auto;
background-color: var(--color-base2);
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: #e2dcd1;
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 1em;
letter-spacing: .03em;
font-size: .8125rem;
justify-content: center;
}
}
@media print, screen and (min-width: 768px) {
.p-policy__agree {
padding: .8em .3em;
text-align: center;
}
}
.p-policy__agree .form-check {
align-items: center;
}
.p-policy__agree [type=checkbox] {
width: 1.2em;
height: 1.2em;
}
@media only screen and (max-width: 767.98px) {
.p-policy__agree [type=checkbox] {
display: block;
margin-right: auto;
margin-bottom: 3px;
margin-left: auto;
}
}
@media print, screen and (min-width: 768px) {
.p-policy__agree [type=checkbox] {
margin-right: .4em;
}
}
/* ========================================================================
/*
/* Utility
/*
========================================================================= */
/* typography
--------------------------------------------------------- */
.u-kome {
position: relative;
padding-left: 1.2em;
}
.u-kome.--inline {
display: inline-block;
}
.u-kome.--red::before {
color: var(--color-red);
}
.u-kome::before {
position: absolute;
left: 0;
content: '※';
}
.u-text-center {
text-align: center;
}
.u-important {
color: var(--color-red);
}
.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;
}