@charset "UTF-8";
/*
Version: 1.0.0
Creation Date: 2026.4.10
Last Updated: 2026.4.12
*/


/* import
------------------------------------------------------------ */
@import "https://use.typekit.net/fjf7npx.css";


/* set
------------------------------------------------------------ */
:root {
--design-width: 1366;
--font-size-base: clamp(8.75px, calc(10 * 100vw / var(--design-width)), 11.25px);
--font-base: 'm-plus-rounded-2c', sans-serif;
--font-en: 'vag-rundschrift-d', sans-serif;
--color-base: #604D3F;
--color-primary: #75BB29;
--color-secondary: #FCE79D;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-style: normal;
}
html {
font-size: var(--font-size-base);
scroll-behavior: smooth;
}
body {
-webkit-text-size-adjust: 100%;
background: #FDF5E0;
font-family: var(--font-base);
color: var(--color-base);
font-size: 1.6rem;
font-weight: 400;
line-height: 1.6;
}
ul {
list-style: none;
}
img {
vertical-align: middle;
max-width: 100%;
height: auto;
}
iframe {
vertical-align: bottom;
max-width: 100%;
max-height: 100%;
border: none;
}
a {
color: inherit;
text-decoration: none;
word-break: break-all;
}
:hover {
transition: .3s;
}
a:hover img {
opacity: .7;
}
main {
width: 100%;
display: block;
position: relative;
overflow: hidden;
}
article {
width: 100%;
position: relative;
}
section {
width: 77%;
margin: 0 auto;
position: relative;
z-index: 1;
}
.smp {
display: none;
}


/* header
------------------------------------------------------------ */
header {
background: var(--color-base);
color: #FFF;
width: 100%;
position: sticky;
top: 0;
z-index: 2;
}
header section {
padding: .5rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 2erm;
}
header h1 {
font-size: 2rem;
font-weight: 700;
}
header h1 strong {
font-size: 2.7rem;
font-weight: 700;
}
ul.sns {
display: flex;
gap: 1.5rem;
}


/* main
------------------------------------------------------------ */
/* common */
h2 {
text-align: center;
margin-bottom: 3rem;
}
h2 strong {
font-size: 2.3rem;
font-weight: 700;
margin-top: 1rem;
display: block;
}

/* #main */
#main::after {
content: "";
background: url("img/bg_01.svg") no-repeat center/contain;
width: 17.86vw;
aspect-ratio: 244 / 210;
position: absolute;
bottom: -8vw;
right: -8vw;
}
#main h1 img {
width: 100vw;
}

/* #message */
#message {
padding: 6rem 0;
}
#message::before {
content: "";
background: url("img/bg_02.svg") no-repeat center/contain;
width: 29.2vw;
aspect-ratio: 399 / 388;
position: absolute;
top: 3vw;
left: -16vw;
}
#message::after {
content: "";
background: url("img/bg_05.svg") no-repeat center/contain;
width: 9.44vw;
aspect-ratio: 129 / 192;
position: absolute;
top: 50%;
right: -1.5vw;
}
#message figure {
display: grid;
grid-template-columns: 38% 57%;
gap: 5%;
}
#message figure > div {
text-align: center;
}
#message figcaption h3 {
color: var(--color-primary);
font-size: 4.1rem;
letter-spacing: -.06em;
margin-top: 1rem;
}
#message figcaption h4 {
font-size: 2.5rem;
letter-spacing: -.06em;
margin-bottom: 2rem;
}
#message figcaption p {
font-size: 1.9rem;
letter-spacing: -.06em;
}
#message figcaption p em {
color: #DB1619;
}
#message h5 {
margin: 1rem 0;
}
#message ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
#message ul li {
background: #FBEBC5;
font-size: 2rem;
font-weight: 700;
line-height: 1.2;
text-align: center;
padding: 1em;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50vh;
}
#message ul + p {
font-size: 2rem;
font-weight: 700;
margin-top: 2rem;
}

/* #features */
#features {
background: #F5ECD7;
padding: 6rem 0;
}
#features::before {
content: "";
background: url("img/bg_01.svg") no-repeat center/contain;
width: 17.86vw;
aspect-ratio: 244 / 210;
position: absolute;
top: -8vw;
left: -12vw;
}
#features::after {
content: "";
background: url("img/bg_06.svg") no-repeat center/contain;
width: 6.95vw;
aspect-ratio: 95 / 135;
position: absolute;
top: 40%;
left: -1vw;
}
#features h2 strong {
font-size: 2.7rem;
}
#features ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2.5rem;
}

/* #good-for */
#good-for {
padding: 6rem 0;
}
#good-for::before {
content: "";
background: url("img/bg_02.svg") no-repeat center/contain;
width: 33.08vw;
aspect-ratio: 452 / 440;
position: absolute;
top: -17vw;
right: -24vw;
}
#good-for::after {
content: "";
background: url("img/bg_08.svg") no-repeat center/contain;
width: 6.88vw;
aspect-ratio: 94 / 147;
position: absolute;
bottom: 6rem;
right: 1rem;
}
#good-for h2 strong {
font-size: 4rem;
}
#good-for figure {
margin-bottom: 3rem;
display: flex;
}
#good-for figure > div {
flex-basis: 40%;
}
#good-for figcaption {
flex-basis: 60%;
order: -1;
}
.link {
text-align: center;
}
.link a {
background: #AF9251;
color: #FFF;
font-size: 2.7rem;
line-height: 1.2;
font-weight: 700;
padding: 1em 2em;
display: inline-block;
border-radius: 50vh;
}
.link a:hover {
background: var(--color-primary);
}

/* #opening */
#opening {
padding: 6rem 0;
}
#opening div img {
width: 100vw;
}

/* #before-after */
#before-after {
padding-bottom: 14rem;
}
#before-after::before {
content: "";
background: url("img/bg_02.svg") no-repeat center/contain;
width: 29.2vw;
aspect-ratio: 438 / 426;
position: absolute;
top: -10vw;
left: -14vw;
z-index: -1;
}
#before-after::after {
content: "";
background: url("img/bg_03.svg") no-repeat center/contain;
width: 24.96vw;
aspect-ratio: 341 / 341;
position: absolute;
bottom: 14rem;
right: -12vw;
}

/* #contact */
#contact {
background: var(--color-primary);
color: #FFF;
padding: 6rem 0;
}
#contact::before {
content: "";
background: url("img/bg_07.svg") no-repeat center/contain;
width: 8.56vw;
aspect-ratio: 117 / 174;
position: absolute;
bottom: -2vw;
left: 5vw;
}
#contact h2::before {
content: "";
background: url("img/bg_09.svg") no-repeat center/contain;
width: 6.29vw;
aspect-ratio: 86 / 134;
position: absolute;
top: -8vw;
left: 0;
}
#reserve {
max-width: 900px;
margin: 0 auto 3rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 3rem;
}
#reserve li a {
background: #FCE79D;
text-align: center;
padding: 1em;
display: block;
transition: .3s;
}
#reserve li a:hover {
background: #F7D96A;
box-shadow: 0 .6rem 1.2rem rgba(0,0,0,.15);
transform: translateY(-3px);
}
#reserve li a:hover img {
opacity: 1;
}
#reserve li img {
width: 5.6rem;
}
#reserve li strong {
color: var(--color-primary);
font-size: 2.7rem;
font-weight: 700;
display: block;
}
#contact ul:not(#reserve) {
line-height: 1;
display: flex;
justify-content: center;
align-items: flex-end;
gap: 3rem;
}
#contact .phone h3 {
font-size: 2.1rem;
font-weight: 700;
}
.phone em {
font-family: var(--font-en);
font-size: 4.1rem;
font-weight: 400;
}
.phone strong {
font-family: var(--font-en);
font-size: 5.5rem;
font-weight: 400;
}
#contact .time h3 {
font-size: 1.7rem;
font-weight: 700;
}
#contact .time em {
font-family: var(--font-en);
font-size: 2.5rem;
font-weight: 400;
}


/* footer
------------------------------------------------------------ */
footer {
padding: 12rem 0 6rem;
position: relative;
overflow: hidden;
}
footer::after {
content: "";
background: url("img/bg_04.svg") no-repeat center/contain;
width: 26.28vw;
aspect-ratio: 359 / 357;
position: absolute;
top: 0;
right: -12vw;
}
footer section {
display: grid;
grid-template-columns: 60% 40%;
}
footer address {
padding: 0 5rem;
}
footer h1 {
text-align: center;
margin-bottom: 5rem;
}
footer dl {
font-size: 1.8rem;
border-top: 1px solid var(--color-base);
}
footer dl div {
display: grid;
grid-template-columns: 7em 1fr;
border-bottom: 1px solid var(--color-base);
}
footer dl dt {
font-weight: 700;
padding: 1em;
}
footer dl dd {
padding: 1em;
}
footer address > div {
display: flex;
justify-content: space-between;
align-items: center;
gap: 3rem;
}
footer .phone {
color: var(--color-primary);
}
footer .phone em {
font-size: 3.7rem;
}
footer .phone strong {
font-size: 5rem;
}
footer address > div + p {
font-size: 1.4rem;
}
footer section > div p {
background: #FCE79D;
font-size: 2.2rem;
font-weight: 700;
text-align: center;
margin-top: 1rem;
padding: .5em 1em;
}

/* #pagetop */
#pagetop {
position: fixed;
right: 0;
bottom: 0;
z-index: 1;
}
#pagetop a {
background: var(--color-primary);
color: #FFF;
font-size: 1rem;
width: 6rem;
height: 6rem;
display: block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
position: relative;
}
#pagetop a::before {
content: "";
width: 2rem;
height: 2rem;
margin: 0 auto;
display: block;
border-top: .2rem solid #FFF;
border-right: .2rem solid #FFF;
transform: rotate(-45deg);
position: absolute;
top: 2.5rem;
right: 2rem;
}





@media screen and (max-width: 1180px) {

/* set
------------------------------------------------------------ */
section {
width: 92%;
}

}


@media screen and (max-width: 1023px) {

/* main
------------------------------------------------------------ */
/* #message */
#message figure {
grid-template-columns: 1fr;
gap: 0;
}
#message h5 {
margin-top: 3rem;
}
#message ul {
grid-template-columns: repeat(2, 1fr);
}

/* footer
------------------------------------------------------------ */
footer section {
grid-template-columns: 1fr;
}
footer address > div + p {
text-align: center;
margin-bottom: 3rem;
}

}


@media screen and (max-width: 540px) {

/* set
------------------------------------------------------------ */
.smp {
display: block;
}
.smp-none {
display: none;
}

/* header
------------------------------------------------------------ */
header h1 {
font-size: 1.2rem;
font-weight: 500;
padding: .3em 0;
}
header h1 strong {
font-weight: 600;
line-height: 1;
display: block;
}
ul.sns {
gap: 1rem;
}

/* main
------------------------------------------------------------ */
/* common */
h2 img {
width: auto;
height: 5rem;
}
h2 strong {
font-size: 1.6rem;
}

/* #main */
#main h1 img {
width: 120vw;
max-width: 120vw;
margin-left: -10vw;
}

/* #message */
#message {
padding: 3rem 0;
}
#message::after {
display: none;
}
#message figure > div {
width: 50%;
margin: 0 auto 2rem;
}
#message figcaption h3 {
font-size: 3rem;
}
#message figcaption h4 {
font-size: 1.7rem;
}
#message ul {
grid-template-columns: 1fr;
}

/* #features */
#features::after {
display: none;
}
#features ul {
grid-template-columns: repeat(2, 1fr);
}

/* #good-for */
#good-for h2 strong {
font-size: 3rem;
}
#good-for figure {
display: block;
}
.link a {
font-size: 2rem;
}

/* #opening */
#opening {
padding: 0 0 6rem;
}
#opening div img {
width: 130vw;
max-width: 130vw;
margin-left: -15vw;
}

/* #before-after */
#before-after {
padding-bottom: 6rem;
}

/* #contact */
#contact::before {
width: 15vw;
left: 80%;
}
#contact h2::before {
width: 10vw;
top: -15vw;
}
#reserve {
grid-template-columns: 1fr;
}
#reserve li strong {
font-size: 2.1rem;
}
#contact ul:not(#reserve) {
display: block;
}
#contact .phone h3 {
font-size: 1.7rem;
font-weight: 600;
}
.phone em {
font-size: 3.2rem;
}
.phone strong {
font-size: 4.4rem;
}
#contact .time h3 {
font-size: 1.7rem;
font-weight: 600;
margin-top: 1rem;
}

/* footer
------------------------------------------------------------ */
footer {
padding: 3rem 0 8rem;
}
footer address {
padding: 0;
}
footer h1 {
width: 70%;
margin: 0 auto 2rem;
}
footer dl div {
grid-template-columns: 5em 1fr;
}
footer dl dt,
footer dl dd {
padding: .5em;
}
footer address > div {
display: block;
}
footer .phone em {
font-size: 3rem;
}
footer .phone strong {
font-size: 4rem;
}
footer ul.sns {
justify-content: center;
margin-bottom: 3rem;
}

}