@charset "UTF-8";
  *,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 1.1vw;
}
body {
font-family: "Noto Sans JP", sans-serif;
letter-spacing: 0.1em;
line-height: 1.6;
font-feature-settings: "palt" 1;
text-align: center;
color: #000;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
height: auto;
width: 100%;
}
a {
text-decoration: none;
color: inherit;
}
ul,
ol {
list-style: none;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: inherit;
color: inherit;
border: none;
background: none;
outline: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
} .wrap {
max-width: 80vw;
margin: 0 auto;
padding: 2rem 0;
}
html {
scroll-behavior: smooth;
}
.anchor-target {
scroll-margin-top: 7rem;
}
a {
transition: 0.3s;
}
a:hover {
opacity: 0.7;
}
.min {
font-family: "Noto Serif JP", serif;
}
.img_hover {
overflow: hidden;
}
.img_hover img {
transition: 0.4s ease-in-out;
}
.img_hover img:hover {
transform: scale(1.1, 1.1);
}  .fade {
opacity: 0;
transition: opacity 0.8s ease, transform 0.8s ease;
will-change: opacity, transform;
}
.fade-up {
transform: translateY(30px);
}
.fade-down {
transform: translateY(-30px);
}
.fade-left {
transform: translateX(30px);
}
.fade-right {
transform: translateX(-30px);
}
.fade.active {
opacity: 1;
transform: translate(0, 0);
}
.fade[data-delay] {
transition-delay: calc(var(--delay) * 1s);
} .band-slide {
position: relative;
display: inline-block;
overflow: hidden;
}
.band-slide::before {
content: "";
position: absolute;
inset: 0;
background: #019798;
transform: translateX(-105%);
transition: transform 0.8s ease;
z-index: 2;
}
.band-slide.active::before {
transform: translateX(105%);
}
.band-slide[data-delay]::before {
transition-delay: calc(var(--delay) * 1s);
} .text-split {
display: inline-block;
opacity: 0;
}
.text-split.active {
opacity: 1;
}
.text-split span {
display: inline-block;
opacity: 0;
transform: translateX(-12px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.text-split.active span {
opacity: 1;
transform: translateX(0);
}    .site_nav .nav_wrap {
max-width: 95vw;
margin: 0 auto;
padding: 0.5rem 0;
}
.site_nav .nav_wrap .nev_flex .header_logo {
width: 15%;
}
.site_nav .nav_wrap nav {
font-weight: bold;
}
.site_nav .nav_wrap h1 {
width: 22%;
margin: 0 auto;
}
.main_visual {
background-image: url(//gyuinbasyoku.com/wp-content/themes/gyuinbasyoku/img/main_bg.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding-top: 3rem;
padding-bottom: 5rem;
}
.main_visual .wrap {
max-width: 80vw;
margin: 0 auto;
}
.main_visual .wrap h2 {
font-size: 330%;
margin-bottom: 2rem;
line-height: 1.5;
}
.main_visual h2 span {
font-size: 80%;
}
.main_visual h2 {
font-size: 2rem;
color: #0d479a;
text-align: center;
}
footer {
border-top: 5px solid #000;
}
.footer_nav {
margin-bottom: 3rem;
}
.footer_nav ul {
display: flex;
gap: 5rem;
justify-content: center;
}
.footer_nav ul li {
position: relative;
font-weight: bold;
}
.footer_nav ul li:not(:last-child)::after {
content: "";
position: absolute;
right: -2.5rem;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 1.2em;
background: #999;
}
footer .footer_logo {
width: 30%;
margin: 0 auto;
margin-bottom: 3rem;
}
.sns {
display: flex;
gap: 5rem;
justify-content: center;
margin-bottom: 1rem;
}
.sns_insta {
display: flex;
gap: 1rem;
align-items: center;
}
.sns_insta figure {
margin: 0;
display: flex;
align-items: center;
width: auto;
}
.sns_insta figure img {
display: block;
width: 2.5rem;
height: 2.5rem;
}
.sns_insta p {
font-size: 90%;
line-height: 1.2;
margin: 0;
} :root {
--footerBarH: 96px;
}
.footer_b {
position: fixed;
bottom: 0;
width: 100%;
z-index: 9999;
display: flex;
justify-content: center;
align-items: stretch;
gap: 0.8rem;
padding: 0.8rem 0.8rem calc(0.8rem + env(safe-area-inset-bottom));
transform: none;
opacity: 1;
transition: none;
max-width: 80vw;
}
.footer_b figure {
margin: 0;
display: flex;
}
.footer_b a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.footer_b img {
display: block;
max-width: 100%;
height: auto;
} footer {
padding-bottom: calc(var(--footerBarH) + env(safe-area-inset-bottom));
}
.footer-stopper {
height: 1px;
}
.footer_copy {
background-color: #8f8d8d;
color: #fff;
font-size: 0.8rem;
padding: 0.5rem 0;
letter-spacing: 0.04em;
}
.footer_nav_wrap {
max-width: 80vw;
margin: 0 auto;
padding-top: 2rem;
}
.footer_nav_wrap_under {
max-width: 80vw;
margin: 0 auto;
padding-bottom: 2rem;
}  @media screen and (min-width: 768px) {
.br_sp {
display: none;
}
.footer_nav_sp {
display: none;
}
.nav_cta {
display: none;
}
.footer_action {
display: none;
}
}
@media (max-width: 1024px) {
html {
font-size: 3.5vw;
}
.br_pc {
display: none;
}
.wrap {
max-width: 90vw;
padding: 2rem 0;
}
footer .footer_logo {
width: 70%;
margin-bottom: 2rem;
} .footer_nav {
display: none;
}
.footer_nav_wrap {
padding-top: 0;
} .footer_nav_sp {
display: block;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-bottom: 2rem;
}
.footer_nav_sp_grid {
display: grid;
grid-template-columns: 1fr 1fr;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
.footer_nav_sp_grid > li {
border-bottom: 1px solid #000;
}
.footer_nav_sp_grid > li:nth-child(2n + 1) {
border-right: 1px solid #000;
}
.footer_nav_sp_grid > li:nth-last-child(-n + 2) {
border-bottom: none;
}
.footer_nav_sp_grid a {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 1.2rem 1.2rem;
letter-spacing: 0.08em;
text-align: left;
}
.footer_nav_sp_grid .is-empty {
pointer-events: none;
}
.footer_nav_sp_grid a:hover {
opacity: 1;
}
.sns {
margin-bottom: 0;
gap: 3rem;
}
.sns_insta figure img {
width: unset;
height: unset;
} .footer_b {
display: none !important;
} footer {
padding-bottom: env(safe-area-inset-bottom);
} }
@media (max-width: 1024px) {
.footer_action {
display: grid;
max-width: 100vw;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
margin-bottom: 2rem;
} .footer_action_btn {
display: flex;
align-items: center;
justify-content: center;
padding: 1.1rem 0.8rem;
color: #fff;
font-weight: bold;
letter-spacing: 0.08em;
text-align: center;
font-size: 1.2rem;
} .footer_action_btn.is-tel {
grid-column: 1/-1; background: #ef5a54;
}
.footer_action_main {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 1.3rem;
line-height: 1.2;
margin-left: 0.5rem;
}
.footer_action_store {
font-size: 0.85rem;
opacity: 0.95;
white-space: nowrap;
}
.footer_action_tel {
font-size: 1.05rem;
letter-spacing: 0.05em;
white-space: nowrap;
} .footer_action_btn.is-reserve {
background: #ef5a54;
}
.footer_action_btn.is-group {
background: #c99a3a;
}
.footer_action_btn.is-icon-vertical {
flex-direction: column;
gap: 0.4rem;
padding: 1.2rem 0.6rem;
}
.footer_action_btn.is-icon-vertical span {
font-size: 1.1rem;
line-height: 1.2;
} .footer_action .icon {
width: 2rem;
height: 2rem;
fill: #fff;
flex: 0 0 2rem;
}
}
@media (max-width: 768px) {
html {
font-size: 3.5vw;
}
.wrap {
max-width: 90vw;
padding: 2rem 0;
}
.sns_insta figure img {
width: unset;
height: unset;
}
}  .hero-header {
--hero-bg: url(//gyuinbasyoku.com/wp-content/themes/gyuinbasyoku/img/common/top_main.png);
background-image: none;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
position: relative;
width: 100%;
min-height: clamp(22rem, 70vh, 45rem);
overflow: hidden;
background-color: #000;
} .hero-header.pride {
--hero-bg: url(//gyuinbasyoku.com/wp-content/themes/gyuinbasyoku/img/pride/pride_main.png);
min-height: 45vh;
}
.hero-header.shop {
--hero-bg: url(//gyuinbasyoku.com/wp-content/themes/gyuinbasyoku/img/shop/shop_main.png);
min-height: 45vh;
}
.hero-header.menu_ashiya_h {
--hero-bg: url(//gyuinbasyoku.com/wp-content/themes/gyuinbasyoku/img/ashiya/ashiya_main.png);
min-height: 45vh;
}
.hero-header.menu_nishinomiya_h {
--hero-bg: url(//gyuinbasyoku.com/wp-content/themes/gyuinbasyoku/img/nishinomiya/nishinomiya_main.png);
min-height: 45vh;
} .hero-header::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background-image: var(--hero-bg);
background-size: cover;
background-position: center;
transform: scale(1.03) translate3d(0, 0, 0);
will-change: transform;
animation: heroKenBurns 18s ease-out forwards;
pointer-events: none;
}
@keyframes heroKenBurns {
from {
transform: scale(1.03) translate3d(0, 0, 0);
}
to {
transform: scale(1.12) translate3d(-1.2%, -0.8%, 0);
}
} .hero-header::after {
content: "";
position: absolute;
inset: -25%;
z-index: 1;
background: radial-gradient(ellipse at 30% 50%, rgba(255, 220, 180, 0.28) 0%, rgba(255, 220, 180, 0.18) 25%, rgba(255, 220, 180, 0.08) 45%, transparent 65%),
linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%);
filter: blur(14px);
transform: translateX(-45%);
opacity: 0;
pointer-events: none;
animation: meatSmoke 3.6s ease-out 0.8s 1 forwards;
}
@keyframes meatSmoke {
0% {
opacity: 0;
transform: translateX(-45%);
}
20% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateX(45%);
}
} .hero-header__overlay {
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.18) 45%, rgba(0, 0, 0, 0.03) 70%);
pointer-events: none;
} .hero-header__inner {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: clamp(1rem, 4vw, 3rem);
} .hero-header__logo {
display: inline-block;
margin: 0;
width: clamp(16rem, 45vw, 28rem);
}
.hero-header__logo img {
width: 100%;
object-fit: contain;
} .hero-header__nav {
display: flex;
justify-content: center; margin-top: clamp(1rem, 2.5vw, 1.8rem);
width: clamp(16rem, 45vw, 28rem); }
.hero-header__navList {
display: flex;
flex-direction: row-reverse; gap: clamp(0.6rem, 1.6vw, 1.2rem);
padding: 0;
margin: 0;
list-style: none;
}
.hero-header__navList li {
flex: 0 0 auto;
}
.hero-header__navList a {
display: inline-block;
writing-mode: vertical-rl;
text-orientation: mixed;
white-space: nowrap;
color: #fff;
text-decoration: none;
font-size: clamp(1.05rem, 1.5vw, 1.3rem);
letter-spacing: 0.1em;
padding: 0.35rem 0.15rem;
text-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.6);
}
.hero-header__navList a:hover {
opacity: 0.85;
} .hero-header__toggle {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
.hero-header__burger {
display: none;
} @media (max-width: 1024px) { .hero-header {
min-height: clamp(30rem, 70vh, 22rem);
}
.hero-header.pride {
min-height: 35vh;
}
.hero-header.shop {
min-height: 35vh;
}
.hero-header.menu_ashiya_h {
min-height: 35vh;
}
.hero-header.menu_nishinomiya_h {
min-height: 35vh;
} .hero-header__nav,
.hero-header__navList,
.hero-header__navList li,
.hero-header__navList a {
writing-mode: horizontal-tb !important;
text-orientation: mixed !important;
} .hero-header__burger {
display: flex;
position: fixed;
top: 1rem;
right: 1rem;
width: 3rem;
height: 3rem;
background: #cc0000;
border: 0;
border-radius: 0;
box-shadow: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0.42rem;
z-index: 10002;
cursor: pointer;
transition: transform 0.2s ease, filter 0.2s ease;
}
.hero-header__burger:hover {
transform: translateY(-1px);
filter: brightness(1.05);
}
.hero-header__burger span {
width: 1.5rem;
height: 0.14rem; background: #fff;
border-radius: 0;
transform-origin: center;
transition: transform 0.28s ease, opacity 0.18s ease;
} .hero-header__toggle:checked + .hero-header__burger span:nth-child(1) {
transform: translateY(0.58rem) rotate(45deg);
}
.hero-header__toggle:checked + .hero-header__burger span:nth-child(2) {
opacity: 0;
transform: scaleX(0.6);
}
.hero-header__toggle:checked + .hero-header__burger span:nth-child(3) {
transform: translateY(-0.58rem) rotate(-45deg);
} .hero-header__nav {
display: block;
position: fixed;
top: 1.6rem;
left: 0;
right: auto;
width: min(92vw, 22rem);
max-height: calc(100svh - 3.2rem);
overflow: auto;
z-index: 2147483647;
background: rgba(15, 15, 15, 0.88);
backdrop-filter: blur(8px);
opacity: 0;
transform: translate3d(-18px, 0, 0);
pointer-events: none;
transition: opacity 0.28s ease, transform 0.28s ease;
will-change: transform, opacity;
}
.hero-header__toggle:checked ~ .hero-header__nav {
opacity: 1;
transform: translate3d(0, 0, 0);
pointer-events: auto;
} .hero-header__navInner {
padding: 3rem 2rem;
height: 100%;
} .hero-header__navList {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1.8rem; align-items: flex-start;
}
.hero-header__navList li {
opacity: 0;
transform: translateY(-8px);
}
.hero-header__toggle:checked ~ .hero-header__nav .hero-header__navList li {
opacity: 1;
transform: translateY(0);
transition: opacity 0.34s ease, transform 0.34s ease;
transition-delay: calc(0.08s * var(--i));
} .hero-header__navList a {
display: inline-block;
position: relative;
text-decoration: none;
border: none;
background: transparent;
border-radius: 0;
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 0.1em;
line-height: 1.25;
padding: 0.25rem 0;
color: rgba(255, 255, 255, 0.92);
opacity: 0.92;
transition: opacity 0.18s ease, transform 0.18s ease;
}
.hero-header__navList a:hover {
opacity: 1;
transform: translateX(6px);
}
.hero-header__navList a::after {
content: "";
position: absolute;
left: 0;
bottom: -0.4rem;
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.65);
transform: scaleX(0);
transform-origin: left center;
}
.hero-header__toggle:checked ~ .hero-header__nav .hero-header__navList a::after {
transform: scaleX(1);
transition: transform 0.38s ease;
transition-delay: calc(0.08s * var(--i) + 0.06s);
} .hero-header__burger:focus-visible,
.hero-header__navList a:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.9);
outline-offset: 4px;
}
} @media (prefers-reduced-motion: reduce) {
.hero-header__burger,
.hero-header__burger span,
.hero-header__nav,
.hero-header__navList li,
.hero-header__navList a,
.hero-header__navList a::after {
transition: none !important;
transform: none !important;
animation: none !important;
}
.hero-header::before,
.hero-header::after {
animation: none !important;
}
} .story-bands {
padding: clamp(2.5rem, 6vw, 4.5rem) 0;
background-image: url(//gyuinbasyoku.com/wp-content/themes/gyuinbasyoku/img/top/top_under.png);
} .story-band {
position: relative;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
column-gap: clamp(1rem, 2vw, 2rem);
overflow: visible;
}
.story-band_left {
position: relative;
display: grid;
grid-template-columns: 1.2fr 1.18fr;
column-gap: clamp(1rem, 2vw, 2rem);
overflow: visible;
}
.story-band + .story-band {
margin-top: clamp(1.25rem, 3.5vw, 2.2rem);
} .story-band__media {
position: relative;
overflow: hidden;
border-radius: 6px;
}
.story-band__media img {
width: 100%;
height: calc(100% + 60px);
margin-top: -30px;
display: block;
aspect-ratio: 16/9;
object-fit: cover;
} .story-band__content,
.story-band__content_left {
position: relative;
overflow: visible;
text-align: left;
}
.story-band__content h3 {
position: absolute;
z-index: 5;
top: 8%;
left: -28%;
font-size: 410%;
line-height: 1.12;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.95), 0 0 24px rgba(255, 255, 255, 0.75), 0 0 44px rgba(255, 255, 255, 0.55), 0 0 70px rgba(255, 255, 255, 0.3);
}
.story-band__content_left h3 {
position: absolute;
z-index: 5;
top: 8%;
left: 0%;
font-size: 410%;
letter-spacing: 3px;
line-height: 1.12;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.95), 0 0 24px rgba(255, 255, 255, 0.75), 0 0 44px rgba(255, 255, 255, 0.55), 0 0 70px rgba(255, 255, 255, 0.3);
} .story-band__content p {
z-index: 5;
top: 35%;
left: -6%;
font-size: 115%;
line-height: 2.3;
font-weight: bold; position: relative;
margin-right: -38px;
}
.story-band__content_left p {
z-index: 5;
top: 35%;
left: 0%;
font-size: 115%;
line-height: 2.3;
font-weight: bold;
position: relative;
} .story-band__link {
display: inline-flex;
align-items: center;
gap: 0.6rem;
position: absolute;
z-index: 1;
bottom: 0;
right: 0;
font-size: 120%;
font-weight: bold;
}
.mb_story {
margin-bottom: 4rem;
} .section_menu {
padding: clamp(2.5rem, 6vw, 4rem) 0;
} h2 {
margin: 0;
font-size: clamp(1.6rem, 3vw, 2.5rem);
letter-spacing: 0.08em;
color: #cc9900;
} .section_menu__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1rem, 2.5vw, 1.6rem);
} .shop-card {
position: relative;
display: grid;
gap: 0.8rem;
border: none;
background: transparent;
box-shadow: none;
border-radius: 0;
} .shop-card__img {
position: relative;
margin: 0;
overflow: hidden;
} .shop-card__nav {
position: absolute;
left: 0;
right: 5%;
bottom: 10%;
display: flex;
justify-content: end;
gap: clamp(1.2rem, 4vw, 3rem);
padding: clamp(0.7rem, 1.8vw, 1rem) 1rem;
}
.shop-card__navLink {
display: inline-flex;
align-items: center;
gap: 0.6rem;
color: rgba(255, 255, 255, 0.92);
text-decoration: none;
letter-spacing: 0.08em;
font-size: clamp(0.95rem, 1.5vw, 4rem);
text-shadow: 0 0.25rem 0.9rem rgba(0, 0, 0, 0.45);
} .shop-card__arrowline {
position: relative;
display: inline-block;
width: clamp(2.4rem, 4vw, 3.4rem);
height: 0.1rem;
background: #d40000;
opacity: 0.95;
transform-origin: right center;
transform: scaleX(0);
animation: arrow-grow 1.6s ease-out infinite;
}
.shop-card__arrowline::before {
content: "";
position: absolute;
left: -0.3rem;
top: 50%;
width: 0.45rem;
height: 0.45rem;
border-radius: 50%;
background: #d40000;
transform: translateY(-50%);
}
@keyframes arrow-grow {
0% {
transform: scaleX(0);
opacity: 0;
}
25% {
opacity: 1;
}
60% {
transform: scaleX(1);
opacity: 1;
}
100% {
transform: scaleX(1);
opacity: 0;
}
} .shop-card__ctaLink {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0 0.1rem;
text-decoration: none;
color: inherit;
font-size: clamp(0.95rem, 1vw, 1.05rem);
letter-spacing: 0.06em;
opacity: 0.92;
}
.shop-card__ctaLink .arrow {
color: #d40000;
font-style: normal;
display: inline-block;
transform: translateX(0);
transition: transform 0.25s ease;
}  @media (min-width: 1024px) {
.story-band {
grid-template-columns: 1.2fr 1fr;
}
.story-band--reverse {
grid-template-columns: 0.85fr 1.15fr;
}
.story-band__media img {
aspect-ratio: 17/9;
}
.section_menu__grid {
gap: clamp(1.2rem, 3vw, 2rem);
}
} @media (max-width: 1024px) {
.story-band {
grid-template-columns: 1fr;
}
.story-band__content {
padding: 1rem 0.2rem 0.4rem;
}
.story-band__media img {
height: calc(100% + 36px);
margin-top: -18px;
aspect-ratio: 16/10;
}
.story-band__title {
position: static;
transform: none;
margin: 0 0 0.6rem;
padding: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
}
.story-band__lead {
margin-top: 0;
}
.story-band--reverse .story-band__content,
.story-band--reverse .story-band__media {
order: initial;
}
.section_menu__grid {
grid-template-columns: 1fr;
}
.shop-card__nav {
gap: 1.4rem;
padding: 0.8rem 0.9rem;
}
.story-bands {
padding-top: 0;
padding-bottom: 4rem;
}
.story-band__content h3 {
position: unset;
font-size: 370%;
margin-bottom: 0.5rem;
}
.story-band__content p {
font-size: 110%;
line-height: 2;
position: unset;
margin-right: 0px;
}
.story-band__link {
bottom: -3rem;
font-size: 110%;
}
.story-band_left {
grid-template-columns: 1fr;
}
.story-band__content_left h3 {
position: unset;
font-size: 370%;
margin-bottom: 0.5rem;
}
.story-band__content_left p {
font-size: 110%;
line-height: 2;
position: unset;
margin-right: 0px;
}
.story-band__content_left {
order: 1;
padding: 1rem 0.2rem 0.4rem;
}
.mb_story {
margin-bottom: 6rem;
}
.shop-card__navLink {
font-size: clamp(1rem, 1.5vw, 4rem);
}
} .section_menu_head {
padding: clamp(2.5rem, 6vw, 4rem) 0;
}
.section_menu_head .menu_wrap {
max-width: 80vw;
padding: 0;
margin: 0 auto;
}
.section_menu_head .section_head_ttl {
text-align: center;
margin-bottom: clamp(1.2rem, 3vw, 2rem);
}
.section_menu_head .section_head_ttl h2 {
margin: 0;
font-size: clamp(2rem, 3vw, 2.5rem);
letter-spacing: 0.08em;
color: #cc9900;
}
.section_menu_head .menu_button {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
justify-content: space-between;
}
.section_menu_head .menu_button > div {
background-color: #cc0000;
width: 100%;
border-radius: 50px;
}
.section_menu_head .menu_button > div a {
color: #fff;
font-weight: bold;
padding: 0.7rem 0;
display: block;
text-align: center;
}
.section_menu {
padding: 0;
}
.section_menu .menu_osusume {
margin-bottom: 3rem;
}
.section_menu .menu_osusume .menu_ttl {
margin: 0 auto;
width: 30%;
margin-bottom: 3rem;
}
.section_menu .menu_osusume .menu_flex {
display: flex;
align-items: center;
}
.section_menu .menu_osusume .menu_flex figure {
flex: 0 1 50%;
box-sizing: border-box;
}
.section_menu .menu_osusume .menu_flex .menu_content_1 {
flex: 1;
padding-left: 1.5rem;
box-sizing: border-box;
}
.section_menu .menu_osusume .menu_flex .menu_content_1 .menu_item {
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
gap: 0.8rem;
padding: 0.7rem 0;
}
.section_menu .menu_osusume .menu_flex .menu_content_1 .menu_item .menu_name {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-width: 0;
line-height: 1.35;
font-size: 120%;
text-align: left;
}
.section_menu .menu_osusume .menu_flex .menu_content_1 .menu_item .menu_name ::after {
content: "";
}
.section_menu .menu_osusume .menu_flex .menu_content_1 .menu_item .menu_name .menu_mark {
width: 1.8em;
height: auto;
flex-shrink: 0;
}
.section_menu .menu_osusume .menu_flex .menu_content_1 .menu_item .menu_price {
text-align: right;
white-space: nowrap;
font-size: 120%;
font-variant-numeric: tabular-nums;
}
.section_menu .menu_osusume .menu_flex .menu_content_1 .menu_item .menu_tax {
font-size: 0.82em;
opacity: 0.75;
}
.section_menu .menu_osusume .menu_flex .menu_content_2 {
flex: 1;
padding-right: 1.5rem;
box-sizing: border-box;
}
.section_menu .menu_osusume .menu_flex .menu_content_2 .menu_item {
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
gap: 0.8rem;
padding: 0.7rem 0;
}
.section_menu .menu_osusume .menu_flex .menu_content_2 .menu_item .menu_name {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-width: 0;
line-height: 1.35;
font-size: 120%;
text-align: left;
}
.section_menu .menu_osusume .menu_flex .menu_content_2 .menu_item .menu_name ::after {
content: "";
}
.section_menu .menu_osusume .menu_flex .menu_content_2 .menu_item .menu_name .menu_mark {
width: 1.8em;
height: auto;
flex-shrink: 0;
}
.section_menu .menu_osusume .menu_flex .menu_content_2 .menu_item .menu_price {
text-align: right;
white-space: nowrap;
font-size: 120%;
font-variant-numeric: tabular-nums;
}
.section_menu .menu_osusume .menu_flex .menu_content_2 .menu_item .menu_tax {
font-size: 0.82em;
opacity: 0.75;
}
.section_menu .menu_yakiniku {
background-image: url(//gyuinbasyoku.com/wp-content/themes/gyuinbasyoku/img/shop/shop_under.png);
margin-bottom: 3rem;
}
.section_menu .menu_yakiniku .menu_ttl {
margin: 0 auto;
width: 30%;
margin-bottom: 3rem;
}
.section_menu .menu_yakiniku .yakiniku_p {
padding-top: 5rem;
padding-bottom: 2rem;
}
.section_menu .menu_yakiniku .menu_yakiniku_flex {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 3rem;
}
.section_menu .menu_yakiniku .menu_yakiniku_flex .menu_yakiniku_content {
flex: 1;
padding-right: 1.5rem;
box-sizing: border-box;
}
.section_menu .menu_yakiniku .menu_yakiniku_flex .menu_yakiniku_content h3 {
color: #cc0000;
border-bottom: 1px solid #000;
padding-bottom: 0.5rem;
text-align: left;
font-size: 140%;
margin-bottom: 0.3rem;
}
.section_menu .menu_yakiniku .menu_yakiniku_flex .menu_yakiniku_content .menu_item {
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
gap: 0.8rem;
padding: 0.5rem 0;
}
.section_menu .menu_yakiniku .menu_yakiniku_flex .menu_yakiniku_content .menu_item .menu_name {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-width: 0;
line-height: 1.35;
font-size: 120%;
text-align: left;
}
.section_menu .menu_yakiniku .menu_yakiniku_flex .menu_yakiniku_content .menu_item .menu_name ::after {
content: "";
}
.section_menu .menu_yakiniku .menu_yakiniku_flex .menu_yakiniku_content .menu_item .menu_name .menu_mark {
width: 1.8em;
height: auto;
flex-shrink: 0;
}
.section_menu .menu_yakiniku .menu_yakiniku_flex .menu_yakiniku_content .menu_item .menu_price {
text-align: right;
white-space: nowrap;
font-size: 120%;
font-variant-numeric: tabular-nums;
}
.section_menu .menu_yakiniku .menu_yakiniku_flex .menu_yakiniku_content .menu_item .menu_tax {
font-size: 0.82em;
opacity: 0.75;
}
.section_menu .menu_yakiniku .menu_yakiniku_flex .menu_yakiniku_content .menu_yakiniku_box {
margin-bottom: 2rem;
}
.section_menu .menu_yakiniku_nishi {
margin-bottom: 3rem;
}
.section_menu .menu_yakiniku_nishi .menu_ttl {
margin: 0 auto;
width: 30%;
margin-bottom: 3rem;
}
.section_menu .menu_yakiniku_nishi .menu_yakiniku_flex {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 3rem;
}
.section_menu .menu_yakiniku_nishi .menu_yakiniku_flex .menu_yakiniku_content {
flex: 1;
padding-right: 1.5rem;
box-sizing: border-box;
}
.section_menu .menu_yakiniku_nishi .menu_yakiniku_flex .menu_yakiniku_content h3 {
color: #cc0000;
border-bottom: 1px solid #000;
padding-bottom: 0.5rem;
text-align: left;
font-size: 140%;
margin-bottom: 0.3rem;
}
.section_menu .menu_yakiniku_nishi .menu_yakiniku_flex .menu_yakiniku_content .menu_item {
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
gap: 0.8rem;
padding: 0.5rem 0;
}
.section_menu .menu_yakiniku_nishi .menu_yakiniku_flex .menu_yakiniku_content .menu_item .menu_name {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-width: 0;
line-height: 1.35;
font-size: 120%;
text-align: left;
}
.section_menu .menu_yakiniku_nishi .menu_yakiniku_flex .menu_yakiniku_content .menu_item .menu_name ::after {
content: "";
}
.section_menu .menu_yakiniku_nishi .menu_yakiniku_flex .menu_yakiniku_content .menu_item .menu_name .menu_mark {
width: 1.8em;
height: auto;
flex-shrink: 0;
}
.section_menu .menu_yakiniku_nishi .menu_yakiniku_flex .menu_yakiniku_content .menu_item .menu_price {
text-align: right;
white-space: nowrap;
font-size: 120%;
font-variant-numeric: tabular-nums;
}
.section_menu .menu_yakiniku_nishi .menu_yakiniku_flex .menu_yakiniku_content .menu_item .menu_tax {
font-size: 0.82em;
opacity: 0.75;
}
.section_menu .menu_yakiniku_nishi .menu_yakiniku_flex .menu_yakiniku_content .menu_yakiniku_box {
margin-bottom: 2rem;
}
.section_menu .menu_ipin .menu_ttl {
margin: 0 auto 3rem;
width: 30%;
}
.section_menu .menu_ipin .menu_yakiniku_flex {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 3rem;
}
.section_menu .menu_ipin .menu_yakiniku_flex .menu_yakiniku_content {
padding-right: 1.5rem;
box-sizing: border-box;
}
.section_menu .menu_ipin .menu_yakiniku_flex .menu_yakiniku_content h3 {
color: #cc0000;
border-bottom: 1px solid #000;
padding-bottom: 0.5rem;
text-align: left;
font-size: 140%;
margin-bottom: 0.3rem;
}
.section_menu .menu_ipin .menu_yakiniku_flex .menu_yakiniku_content .menu_item {
display: grid;
grid-template-columns: 1fr auto;
column-gap: 0.8rem;
row-gap: 0.25rem;
padding: 0.5rem 0;
align-items: start;
}
.section_menu .menu_ipin .menu_yakiniku_flex .menu_yakiniku_content .menu_item .menu_name {
grid-column: 1;
grid-row: 1/-1;
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-width: 0;
line-height: 1.35;
font-size: 120%;
text-align: left;
}
.section_menu .menu_ipin .menu_yakiniku_flex .menu_yakiniku_content .menu_item .menu_name::after {
content: "";
}
.section_menu .menu_ipin .menu_yakiniku_flex .menu_yakiniku_content .menu_item .menu_name .menu_mark {
width: 1.8em;
height: auto;
flex-shrink: 0;
}
.section_menu .menu_ipin .menu_yakiniku_flex .menu_yakiniku_content .menu_item .menu_prices {
grid-column: 2;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.15rem;
}
.section_menu .menu_ipin .menu_yakiniku_flex .menu_yakiniku_content .menu_item .menu_price {
text-align: right;
white-space: nowrap;
font-size: 120%;
font-variant-numeric: tabular-nums;
line-height: 1.25;
}
.section_menu .menu_ipin .menu_yakiniku_flex .menu_yakiniku_content .menu_item .menu_price + .menu_price {
margin-top: 0.5rem;
}
.section_menu .menu_ipin .menu_yakiniku_flex .menu_yakiniku_content .menu_item .menu_tax {
font-size: 0.82em;
opacity: 0.75;
}
.section_menu .menu_ipin .menu_yakiniku_flex .menu_yakiniku_content .menu_yakiniku_box {
margin-bottom: 2rem;
}
.section_menu .menu_ipin .menu_yakiniku_flex .menu_yakiniku_content .menu_yakiniku_box .kome {
text-align: left;
font-size: 95%;
}
.section_menu .menu_photo .menu_photo_flex {
display: flex;
}
.section_menu .menu_photo .menu_photo_flex figure {
flex: 0 0 50%;
box-sizing: border-box;
}
.section_menu .menu_photo .menu_photo_flex figure img {
width: 100%;
}
.section_menu .menu_nishi_special {
background-image: url(//gyuinbasyoku.com/wp-content/themes/gyuinbasyoku/img/shop/shop_under.png);
margin-bottom: 3rem;
}
.section_menu .menu_nishi_special .nishi_special_wrap {
max-width: 80vw;
margin: 0 auto;
padding: 5rem 0;
} @media (max-width: 1024px) {
.section_menu_head .menu_button {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
justify-content: space-between;
}
.section_menu_head .menu_button > div {
width: 100%;
}
.section_menu_head .menu_button > div a {
font-size: 110%;
}
.section_menu_head .menu_wrap {
max-width: 90vw;
}
.section_menu .menu_osusume {
margin-bottom: 0rem;
}
.section_menu .menu_osusume .menu_ttl {
width: 80%;
margin-bottom: 2rem;
}
.section_menu .menu_osusume .menu_flex {
flex-direction: column;
}
.section_menu .menu_osusume .menu_flex .menu_content_1 {
padding-left: 0;
margin-bottom: 1rem;
width: 100%;
}
.section_menu .menu_osusume .menu_flex .menu_content_2 {
padding-right: 0;
order: 1;
width: 100%;
}
.section_menu .menu_osusume .menu_flex .menu_content_1 .menu_item {
align-items: end;
}
.section_menu .menu_osusume .menu_flex .menu_content_2 .menu_item {
align-items: end;
}
.section_menu .menu_yakiniku .yakiniku_p {
padding-top: 3rem;
padding-bottom: 1rem;
}
.section_menu .menu_yakiniku .menu_ttl {
width: 80%;
margin-bottom: 2rem;
}
.section_menu .menu_yakiniku .menu_yakiniku_flex {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 0rem;
}
.section_menu .menu_ipin .menu_ttl {
width: 80%;
margin-bottom: 2rem;
}
.section_menu .menu_yakiniku {
margin-bottom: 1rem;
}
.section_menu .menu_ipin .menu_yakiniku_flex {
grid-template-columns: repeat(1, 1fr);
gap: 0rem;
}
.section_menu .menu_yakiniku .menu_yakiniku_flex .menu_yakiniku_content {
padding-right: 0rem;
}
.section_menu .menu_ipin .menu_yakiniku_flex .menu_yakiniku_content {
padding-right: 0rem;
}
.section_menu .menu_ipin .menu_yakiniku_flex .menu_yakiniku_content .menu_item .menu_name {
font-size: 110%;
}
.section_menu .menu_osusume .menu_flex .menu_content_1 .menu_item .menu_name {
font-size: 110%;
}
.section_menu .menu_osusume .menu_flex .menu_content_2 .menu_item .menu_name {
font-size: 110%;
}
.section_menu .menu_osusume .menu_flex .menu_content_1 .menu_item .menu_price {
font-size: 110%;
}
.section_menu .menu_osusume .menu_flex .menu_content_2 .menu_item .menu_price {
font-size: 110%;
}
.section_menu .menu_yakiniku .menu_yakiniku_flex .menu_yakiniku_content .menu_item .menu_name {
font-size: 110%;
}
.section_menu .menu_yakiniku .menu_yakiniku_flex .menu_yakiniku_content .menu_item .menu_price {
font-size: 110%;
}
.section_menu .menu_ipin .menu_yakiniku_flex .menu_yakiniku_content .menu_item .menu_price {
font-size: 110%;
}
.section_menu .menu_yakiniku .menu_yakiniku_flex .menu_yakiniku_content .menu_item {
align-items: end;
}
.section_menu .menu_ipin .menu_yakiniku_flex .menu_yakiniku_content .menu_item {
align-items: end;
}
.section_menu .menu_photo .menu_photo_flex {
display: block;
}
.section_menu .menu_yakiniku_nishi .menu_yakiniku_flex {
grid-template-columns: repeat(1, 1fr);
gap: 0rem;
}
.section_menu .menu_yakiniku_nishi .menu_yakiniku_flex .menu_yakiniku_content {
padding-right: 0rem;
}
.section_menu .menu_yakiniku_nishi {
margin-bottom: 1rem;
}
.section_menu .menu_yakiniku_nishi .menu_yakiniku_flex .menu_yakiniku_content .menu_item .menu_name {
font-size: 110%;
}
.section_menu .menu_yakiniku_nishi .menu_yakiniku_flex .menu_yakiniku_content .menu_item .menu_price {
font-size: 110%;
}
.section_menu .menu_yakiniku_nishi .menu_ttl {
margin: 0 auto;
width: 80%;
margin-bottom: 2rem;
}
.section_menu .menu_nishi_special {
margin-bottom: 1rem;
}
.section_menu .menu_nishi_special .nishi_special_wrap {
max-width: 90vw;
padding: 1.5rem 0;
}
}
@media (max-width: 768px) {
.menu_item {
gap: 0.6rem;
padding: 0.6rem 0;
}
.menu_name,
.menu_price {
font-size: 0.95rem;
}
.menu_mark {
width: 1em;
}
.menu_tax {
font-size: 0.78em;
}
}
.section_pride_1 .pride1_wrap {
max-width: 80vw;
margin: 0 auto;
}
.section_pride_1 .pride1_wrap img { -webkit-mask-image: linear-gradient(to right, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 85%, rgba(0, 0, 0, 0) 100%);
mask-image: linear-gradient(to right, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 85%, rgba(0, 0, 0, 0) 100%);
}
.section_pride_2 {
background: #000;
}
.section_pride_2 .pride2_wrap {
max-width: 80vw;
margin: 0 auto;
padding: 3rem 0;
}
.section_pride_2 .pride2_wrap .pride2_flex {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.section_pride_2 .pride2_wrap .pride2_flex figure {
flex: 0 1 50%;
box-sizing: border-box;
}
.section_pride_2 .pride2_wrap .pride2_flex .pride2_slider {
position: relative;
width: 100%;
aspect-ratio: 4/3;
overflow: hidden; }
.section_pride_2 .pride2_wrap .pride2_flex .pride2_slider img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0; transform: scale(1.04) translate3d(0, 0, 0); transition: opacity 1.8s ease-in-out, transform 7.5s linear;
will-change: opacity, transform;
}
.section_pride_2 .pride2_wrap .pride2_flex .pride2_slider img.is-active {
opacity: 1;
transform: scale(1.14) translate3d(-2.5%, 0, 0);
z-index: 1;
}
.section_pride_2 .pride2_wrap .pride2_flex .pride2_text {
flex: 1;
box-sizing: border-box;
color: #fff;
}
.section_pride_2 .pride2_wrap .pride2_flex .pride2_text h3 {
font-size: 370%;
line-height: 1.3;
margin-bottom: 1rem;
text-align: right;
}
.section_pride_2 .pride2_wrap .pride2_flex .pride2_text p {
font-size: 110%;
line-height: 2;
text-align: left;
}
.section_pride_3 .pride3_wrap {
max-width: 80vw;
margin: 0 auto;
padding: 3rem 0;
}
.section_pride_3 .pride3_wrap .pride3_flex {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: stretch;
}
.section_pride_3 .pride3_wrap .pride3_flex .pride3_text {
display: flex;
flex-direction: column;
text-align: left; }
.section_pride_3 .pride3_wrap .pride3_flex .pride3_text h3 {
font-size: 370%;
line-height: 1.3;
margin-bottom: 1rem;
}
.section_pride_3 .pride3_wrap .pride3_flex .pride3_text p {
font-size: 110%;
line-height: 2;
margin-bottom: 4rem;
}
.section_pride_3 .pride3_wrap .pride3_flex .pride3_text figure {
margin-top: auto;
}
.section_pride_4 {
background: #000;
}
.section_pride_4 .pride4_wrap {
max-width: 80vw;
margin: 0 auto;
padding: 3rem 0;
}
.section_pride_4 .pride4_wrap .pride4_flex {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: stretch;
}
.section_pride_4 .pride4_wrap .pride4_flex .pride4_text {
display: flex;
flex-direction: column;
text-align: left;
color: #fff; }
.section_pride_4 .pride4_wrap .pride4_flex .pride4_text h3 {
font-size: 370%;
line-height: 1.3;
margin-bottom: 1rem;
text-align: right;
}
.section_pride_4 .pride4_wrap .pride4_flex .pride4_text p {
font-size: 110%;
line-height: 2;
margin-bottom: 4rem;
}
.section_pride_4 .pride4_wrap .pride4_flex .pride4_text figure {
margin-top: auto;
}
.section_pride_bt .pride_bt_wrap {
padding: 4rem 0;
max-width: 80vw;
margin: 0 auto;
}
.section_pride_bt .pride_bt_flex {
display: flex;
align-items: center;
justify-content: center;
}
.section_pride_bt .pride_bt_flex > figure {
flex: 1;
margin: 0;
box-sizing: border-box;
}
.section_pride_bt .pride_bt_flex > figure > a {
display: block;
width: 100%;
}
.section_pride_bt .pride_bt_flex > figure > a > img {
display: block;
width: 60%;
max-width: 520px;
height: auto;
margin: 0 auto;
} @media (max-width: 1024px) {
.section_pride_1 .pride1_wrap {
max-width: 90vw;
}
.section_pride_1 .pride1_wrap img {
-webkit-mask: none;
mask: none;
}
.section_pride_2 .pride2_wrap .pride2_flex {
grid-template-columns: 1fr;
gap: 1rem;
}
.section_pride_2 .pride2_wrap {
max-width: 90vw;
padding: 1.5rem 0;
}
.section_pride_2 .pride2_wrap .pride2_flex .pride2_text h3 {
font-size: 250%;
text-align: left;
}
.section_pride_2 .pride2_wrap .pride2_flex .pride2_text p {
font-size: 100%;
}
.section_pride_3 .pride3_wrap .pride3_flex {
grid-template-columns: 1fr;
gap: 1rem;
}
.section_pride_3 .pride3_wrap {
max-width: 90vw;
padding: 1.5rem 0;
}
.section_pride_3 .pride3_wrap .pride3_flex .pride3_text {
order: 1;
}
.section_pride_3 .pride3_wrap .pride3_flex .pride3_text h3 {
font-size: 250%;
text-align: left;
}
.section_pride_3 .pride3_wrap .pride3_flex .pride3_text p {
font-size: 100%;
margin-bottom: 1rem;
}
.section_pride_4 .pride4_wrap .pride4_flex {
grid-template-columns: 1fr;
gap: 1rem;
}
.section_pride_4 .pride4_wrap {
max-width: 90vw;
padding: 1.5rem 0;
}
.section_pride_4 .pride4_wrap .pride4_flex .pride4_text {
order: 3;
}
.section_pride_4 .pride4_wrap .pride4_flex .pride4_text h3 {
font-size: 250%;
text-align: left;
}
.section_pride_4 .pride4_wrap .pride4_flex .pride4_text p {
font-size: 100%;
margin-bottom: 1rem;
}
.section_pride_bt .pride_bt_wrap {
padding: 2rem 0;
max-width: 90vw;
}
.section_pride_bt .pride_bt_flex {
flex-direction: column;
gap: 1rem;
}
} .section_shop .shop_content {
background-image: url(//gyuinbasyoku.com/wp-content/themes/gyuinbasyoku/img/shop/shop_under.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.section_shop .shop_content .shop_wrap_1 {
max-width: 90vw;
margin: 0 auto;
padding: 3rem 0;
}
.section_shop .shop_content .shop_wrap_1 .shop_flex {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 3rem;
}
.section_shop .shop_content .shop_wrap_1 .shop_flex .shop_flex_text h2 {
font-size: clamp(1.6rem, 3vw, 3rem);
margin: 0 0 1rem;
letter-spacing: 0.08em;
text-align: left;
color: #000;
line-height: 1.4;
}
.section_shop .shop_content .shop_wrap_1 .shop_flex .shop_flex_text p {
text-align: left;
font-size: 110%;
line-height: 1.8;
}
.section_shop .shop_content .shop_wrap_2 {
max-width: 80vw;
margin: 0 auto;
padding-top: 1rem;
padding-bottom: 4rem;
}
.section_shop .shop_content .shop_wrap_2 .shop_flex_2 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-bottom: 4rem;
}
.section_shop .shop_content .shop_wrap_2 .shop_bt figure {
margin: 0 auto;
}
.section_shop .shop_content .shop_wrap_2 .shop_bt figure a {
display: block;
width: 100%;
}
.section_shop .shop_content .shop_wrap_2 .shop_bt figure a img {
display: block;
width: 50%;
max-width: 300px;
margin: 0 auto;
} .shop_info .shop_info_wrap {
max-width: 80vw;
margin: 0 auto;
padding: 4rem 0; }
.shop_info .shop_info_wrap .shop_info_list {
margin: 0 0 4rem;
padding: 0;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
.shop_info .shop_info_wrap .shop_info_row {
display: grid;
grid-template-columns: 160px 1fr;
gap: 20px;
align-items: center;
padding: 18px 0;
border-top: 1px solid #000;
}
.shop_info .shop_info_wrap .shop_info_row:first-child {
border-top: none;
}
.shop_info .shop_info_wrap .shop_info_title {
position: relative;
margin: 0;
padding-left: 10px;
letter-spacing: 0.05em;
}
.shop_info .shop_info_wrap .shop_info_title::after {
content: "";
position: absolute;
top: 0;
right: -11px;
width: 1px;
height: 100%;
background: #000;
}
.shop_info .shop_info_wrap .shop_info_text {
margin: 0;
padding-left: 40px;
line-height: 1.9;
text-align: left;
}
.shop_info .shop_info_wrap .shop_info_text p {
margin: 0;
}
.shop_info .shop_info_wrap .shop_info_text p + p {
margin-top: 0.3em;
}
.shop_info .shop_info_wrap .shop_map {
width: 70%;
margin: 0 auto;
}
.shop_info .shop_info_wrap .shop_map_inner {
width: 100%;
aspect-ratio: 4/3;
overflow: hidden;
border-radius: 12px;
}
.shop_info .shop_info_wrap .shop_map_iframe {
width: 100%;
height: 100%;
display: block;
}  @media (min-width: 1024px) {
.shop_info .shop_info_row {
grid-template-columns: 190px 1fr;
gap: 26px;
padding: 20px 0;
}
.shop_info .shop_info_title::after {
right: -13px;
}
.shop_info .shop_info_wrap .shop_map {
width: 70%;
}
.shop_info .shop_info_wrap .shop_map_inner {
aspect-ratio: 16/9;
border-radius: 14px;
}
} @media (max-width: 1024px) {
.shop_info .shop_info_wrap .shop_map {
width: 85%;
}
.shop_info .shop_info_wrap .shop_map_inner {
aspect-ratio: 4/3;
}
.section_shop .shop_content .shop_wrap_1 .shop_flex {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 1rem;
}
.section_shop .shop_content .shop_wrap_1 {
max-width: 90vw;
padding: 1.5rem 0;
}
.section_shop .shop_content .shop_wrap_1 .shop_flex .shop_flex_text h2 {
font-size: clamp(2rem, 3vw, 3rem);
}
.section_shop .shop_content .shop_wrap_2 {
max-width: 90vw;
padding-top: 0rem;
padding-bottom: 2rem;
}
.section_shop .shop_content .shop_wrap_2 .shop_flex_2 {
gap: 1rem;
margin-bottom: 2rem;
}
.section_shop .shop_content .shop_wrap_2 .shop_bt figure a img {
width: 65%;
}
.shop_info .shop_info_wrap {
max-width: 90vw;
padding-top: 2rem;
padding-bottom: 4rem;
}
.shop_info .shop_info_wrap .shop_info_title {
padding-left: 0px;
}
.shop_info .shop_info_wrap .shop_info_row {
grid-template-columns: 1fr;
gap: 0.5rem;
padding: 1rem 0;
text-align: left;
}
.shop_info .shop_info_wrap .shop_info_text {
padding-left: 0;
line-height: 1.5;
}
.shop_info .shop_info_wrap .shop_info_list {
margin: 0 0 2rem;
padding: 0;
}
} @media (max-width: 768px) {
.shop_info .shop_info_row {
grid-template-columns: 1fr;
gap: 8px;
padding: 16px 0;
}
.shop_info .shop_info_title {
padding-left: 0;
font-weight: 700;
}
.shop_info .shop_info_title::after {
display: none;
}
.shop_info .shop_info_text {
padding-left: 0;
line-height: 1.85;
}
.shop_info .shop_info_wrap .shop_map {
width: 100%;
}
.shop_info .shop_info_wrap .shop_map_inner {
aspect-ratio: 1/1;
border-radius: 10px;
}
} .news {
padding: clamp(3rem, 6vw, 5rem) 0;
} .news__title {
text-align: center;
font-size: clamp(2.5rem, 3.2vw, 3rem);
letter-spacing: 0.08em;
margin: 0 0 clamp(2.2rem, 4vw, 3rem);
}
.news__layout {
display: grid;
grid-template-columns: 240px 1fr;
gap: clamp(1.6rem, 3vw, 3rem);
align-items: start;
}
.news__side {
position: sticky;
top: 2rem;
}
.news__sideTitle {
background: #cdbb93;
color: #111;
font-weight: 700;
text-align: center;
padding: 0.8rem 1rem;
border-radius: 2px;
letter-spacing: 0.06em;
margin-bottom: 1rem;
}
.news__catList {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0.8rem;
}
.news__catLink {
display: inline-flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
color: #111;
line-height: 1.2;
}
.news__catLink::before {
content: "・";
opacity: 0.8;
}
.news__catLink.is-current {
font-weight: 700;
text-underline-offset: 0.25em;
}
.news__catLink:hover {
opacity: 0.75;
}
.news__main {
min-width: 0;
}
.news__categoryLabel {
margin-bottom: 1.2rem;
}
.news__categoryLabelInner {
display: inline-block;
padding: 0.35rem 0.8rem;
border: 1px solid #cdbb93;
border-radius: 999px;
font-size: 0.9rem;
letter-spacing: 0.06em;
}
.newsList {
display: grid;
gap: 2.2rem;
}
.newsCard__meta {
display: flex;
align-items: center;
gap: 0.9rem;
margin-bottom: 0.6rem;
flex-wrap: wrap;
}
.newsCard__date {
font-size: 0.85rem;
letter-spacing: 0.04em;
color: #222;
white-space: nowrap;
}
.newsCard__badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.25rem 0.9rem;
border: 1px solid #cdbb93;
border-radius: 999px;
font-size: 0.85rem;
letter-spacing: 0.05em;
color: #111;
text-decoration: none;
}
.newsCard__badge:hover {
opacity: 0.75;
}
.newsCard__title {
font-size: clamp(1.35rem, 2.1vw, 1.5rem);
letter-spacing: 0.06em;
margin: 0 0 0.7rem;
text-align: left;
}
.newsCard__title a {
color: #111;
text-decoration: none;
}
.newsCard__title a:hover {
text-decoration: underline;
text-underline-offset: 0.25em;
}
.newsCard__excerpt {
color: #222;
line-height: 1.9;
font-size: 1rem;
text-align: left;
}
.newsCard__excerpt p {
margin: 0;
text-align: left;
}
.newsCard__divider {
margin-top: 1.8rem;
height: 1px;
background: #222;
opacity: 0.35;
}
.newsPager {
margin-top: 2rem;
}
.newsPager .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.2rem;
height: 2.2rem;
padding: 0 0.6rem;
border: 1px solid rgba(0, 0, 0, 0.25); text-decoration: none;
color: #111;
margin-right: 0.4rem;
}
.newsPager .page-numbers.current {
font-weight: 700;
border-color: #cdbb93;
}
.newsPager .page-numbers:hover {
opacity: 0.75;
}
.newsEmpty {
padding: 1.2rem 0;
color: #222;
} .newsSingle {
padding: clamp(3rem, 6vw, 5rem) 0;
}
.newsSingle_wrap {
max-width: 65vw;
margin: 0 auto;
padding: 2rem 0;
}
.newsSingle__head {
margin-bottom: 1.8rem;
}
.newsSingle__title {
font-size: clamp(1.9rem, 3vw, 2rem);
letter-spacing: 0.06em;
margin: 0 0 2rem;
}
.newsSingle__meta {
display: flex;
align-items: center;
gap: 0.9rem;
}
.newsSingle__date {
letter-spacing: 0.04em;
}
.newsSingle__badge {
display: inline-flex;
padding: 0.25rem 0.9rem;
border: 1px solid #cdbb93;
border-radius: 999px;
text-decoration: none;
color: #111;
}
.newsSingle__badge:hover {
opacity: 0.75;
}
.newsSingle__content {
line-height: 2;
color: #111;
text-align: left;
}
.newsSingle__content h2,
.newsSingle__content h3 {
letter-spacing: 0.06em;
margin-top: 2.2rem;
}
.newsSingle__content p {
margin: 0 0 1.2rem;
}
.newsSingle__content img {
max-width: 100%;
height: auto;
}
.newsSingle__foot {
margin-top: 2.4rem;
padding-top: 1.6rem;
border-top: 1px solid rgba(0, 0, 0, 0.25);
display: grid;
gap: 1rem;
}
.newsSingle__back {
display: inline-block;
text-decoration: none;
color: #fff;
background-color: #000000;
padding: 0.7rem 1.5rem;
}
.newsSingle__back:hover {
opacity: 0.75;
}
.newsSingle__pn {
display: flex;
justify-content: space-between;
gap: 1rem;
}
.newsSingle__pn a {
text-decoration: none;
background-color: #000;
padding: 0.7rem 1.5rem; color: #fff;
display: inline-block; max-width: 100%;
text-align: center;
}
.newsSingle__pn a:hover { text-underline-offset: 0.25em;
} @media (max-width: 1024px) {
.news__layout {
grid-template-columns: 200px 1fr;
gap: 1.6rem;
}
}
@media (max-width: 768px) {
.news__layout {
grid-template-columns: 1fr;
}
.news__side {
position: static;
}
.news__catList {
display: flex;
flex-wrap: nowrap;
gap: 0.6rem;
overflow-x: auto;
padding-bottom: 0.4rem;
-webkit-overflow-scrolling: touch;
}
.news__catItem {
flex: 0 0 auto;
}
.news__catLink {
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 999px;
padding: 0.45rem 0.8rem;
}
.news__catLink::before {
content: "";
}
.newsCard__meta {
flex-wrap: wrap;
gap: 0.6rem;
}
.newsCard__divider {
margin-top: 1.4rem;
}
.newsSingle__pn {
flex-direction: column;
align-items: flex-start;
}
.news__sideTitle {
font-size: 1.2rem;
}
.section_news_wrap {
max-width: 95vw;
}
}  .section_news {
padding: clamp(2.5rem, 6vw, 4rem) 0;
}
.section_news_wrap {
max-width: 90vw;
margin: 0 auto;
padding: 2rem 0;
}
.section_news__head {
text-align: center;
margin-bottom: clamp(1.2rem, 3vw, 2rem);
}
.section_news__head h2 {
margin: 0;
font-size: clamp(2.5rem, 3vw, 2.5rem);
letter-spacing: 0.08em;
color: #cc9900;
} .news-slider {
position: relative;
--edge-arrow-size: clamp(0.5rem, 1vw, 3.4rem);
--edge-safe: calc(var(--edge-arrow-size) + 1.2rem);
padding-left: var(--edge-safe);
padding-right: var(--edge-safe);
} .news-slider__viewport {
position: relative;
overflow: hidden; padding-top: 0.2rem;
padding-bottom: 0.2rem;
--cols: 3;
--gap: clamp(1.2rem, 2.4vw, 2rem);
scroll-snap-type: none;
scroll-behavior: auto;
}
.news-slider__viewport::-webkit-scrollbar {
display: none;
} .news-slider__track.swiper-wrapper {
display: flex;
gap: 0; } .news-card {
scroll-snap-align: unset;
}
.news-card.swiper-slide {
flex: 0 0 auto; } .news-card__link {
display: grid;
grid-template-rows: auto 1fr;
text-decoration: none;
color: inherit;
} .news-card__thumb {
margin: 0;
aspect-ratio: 4 / 3;
overflow: hidden;
border: 2px solid #000;
background: #000; }
.news-card__thumb img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
transform: scale(1);
transition: transform 0.35s ease;
background: transparent;
}
.news-card__link:hover .news-card__thumb img {
transform: scale(1.04);
} .news-card__body {
padding: 0.5rem 0 0 0;
text-align: left;
} .news-card__date {
display: block;
margin-bottom: 0.35rem;
font-size: 0.9rem;
color: #e60012;
font-weight: 600;
} .news-card__title {
margin: 0 0 0.55rem;
font-size: clamp(1rem, 1.4vw, 1.15rem);
line-height: 1.35;
} .news-card__text {
margin: 0 0 0.8rem;
line-height: 1.7;
opacity: 0.9;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
} .news-card__more {
margin-top: 0.2rem;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0.55rem;
font-size: 0.95rem;
opacity: 0.95;
}
.more-arrow {
position: relative;
display: inline-block;
width: clamp(2.4rem, 4vw, 3.4rem);
height: 0.1rem;
background: #d40000;
opacity: 0.95;
transform-origin: right center;
transform: scaleX(0);
animation: news-arrow-grow 1.6s ease-out infinite;
animation-delay: var(--moreDelay, 0s);
}
.more-arrow::before {
content: "";
position: absolute;
left: -0.3rem;
top: 50%;
width: 0.45rem;
height: 0.45rem;
border-radius: 50%;
background: #d40000;
transform: translateY(-50%);
}
@keyframes news-arrow-grow {
0% {
transform: scaleX(0);
opacity: 0.65;
}
35% {
transform: scaleX(1);
opacity: 0.95;
}
100% {
transform: scaleX(1);
opacity: 0.95;
}
} .news-slider__arrow {
position: absolute;
top: 32%;
transform: translateY(-50%);
z-index: 20;
width: var(--edge-arrow-size);
height: var(--edge-arrow-size);
border: 0;
padding: 0;
background: transparent;
cursor: pointer;
opacity: 0.9;
}
.news-slider__arrow:hover {
opacity: 1;
}
.news-slider__arrow--prev {
left: calc(var(--edge-safe) / 2 - var(--edge-arrow-size) / 2);
}
.news-slider__arrow--next {
right: calc(var(--edge-safe) / 2 - var(--edge-arrow-size) / 2);
}
.news-slider__arrow::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 1.5rem;
height: 1.5rem;
border-top: 4px solid #d40000;
border-right: 4px solid #d40000;
transform: translate(-50%, -50%) rotate(45deg);
}
.news-slider__arrow--prev::before {
transform: translate(-50%, -50%) rotate(-135deg);
} @media (max-width: 1024px) {
.news-slider__viewport {
--cols: 2;
--gap: clamp(1rem, 2.2vw, 1.6rem);
}
.news {
padding: 0;
}
}
@media (max-width: 1024px) and (min-width: 769px) {
.news-card__date {
margin-bottom: 0.1rem;
font-size: 0.5rem;
}
.news-card__title {
font-size: clamp(0.7rem, 1.4vw, 1.15rem);
}
.news-card__text {
font-size: 0.6rem;
}
.more-text {
font-size: 0.6rem;
}
.more-arrow {
width: clamp(1.5rem, 4vw, 3.4rem);
height: 0.05rem;
}
.more-arrow::before {
width: 0.4rem;
height: 0.4rem;
}
.news-slider__arrow::before {
width: 1rem;
height: 1rem;
}
.news__sideTitle {
font-size: 0.7rem;
}
.news__catList {
gap: 0.5rem;
font-size: 0.7rem;
}
.newsCard__title {
font-size: clamp(1rem, 2.1vw, 1.5rem);
}
.newsCard__excerpt p {
font-size: 0.7rem;
}
.newsCard__date {
font-size: 0.7rem;
}
.newsCard__badge {
font-size: 0.7rem;
}
.newsSingle_wrap {
max-width: 90vw;
}
}
@media (max-width: 768px) {
.news-slider__viewport {
--cols: 1;
--gap: 1rem;
}
.news-slider {
--edge-safe: calc(var(--edge-arrow-size) + 0.2rem);
}
.news-card__title {
font-size: clamp(1.4rem, 1.4vw, 1.15rem);
}
.more-text {
font-size: 1.2rem;
}
.news-card__text {
font-size: 1.2rem;
}
.news-card__date {
font-size: 1rem;
}
.section_news {
padding: 0;
}
.newsSingle_wrap {
max-width: 90vw;
}
.newsSingle__pn {
flex-direction: unset;
}
.newsCard__title {
font-size: clamp(1.4rem, 2.1vw, 1.5rem);
}
.newsCard__excerpt p {
font-size: 1rem;
}
.newsCard__date {
font-size: 1rem;
}
.newsCard__badge {
font-size: 1rem;
}
.news__catLink {
font-size: 1rem;
}
} .news-slider,
.news-slider__viewport,
.news-slider__track {
direction: ltr;
} .news-slider__viewport {
background: #fff; } .news-slider__viewport {
clip-path: inset(0); } .news-slider__viewport.swiper {
opacity: 0;
}
.news-slider__viewport.swiper.swiper-initialized {
opacity: 1;
transition: opacity 0.15s ease;
}
@media (max-width: 1024px) { .hero-header {
overflow: visible;
} .hero-header::before {
animation: none !important;
transform: none !important; } .hero-header::after {
animation: none !important;
opacity: 0 !important;
}
} @media (max-width: 1024px) { .hero-header {
position: relative;
z-index: 1000;
}
.hero-header__burger {
z-index: 10002;
}
.hero-header__nav {
z-index: 10001;
} main,
.section_news,
.news-slider {
position: relative;
z-index: 1;
} .news-slider__arrow {
z-index: 2;
}
}