@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100&family=Noto+Serif+JP:wght@200;300;400&display=swap");
.icon--silhouette {
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 18px;
height: 22px;
display: block;
}
@media (min-width: 769px) {
.icon--silhouette {
width: 28px;
height: 34px;
}
}
.icon--menu {
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 21px;
height: 30px;
display: block;
margin-right: 5px;
}
.icon--handshake {
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 29px;
height: 26px;
display: block;
margin-right: 5px;
}
.tf-btn--t01 {
letter-spacing: 0;
max-width: 220px;
width: 100%;
padding: 3px 5px 3px 35px;
min-height: 35px;
font-family: "Noto Sans JP", sans-serif;
border: solid 1px #fff;
border-radius: 50px;
font-size: 1.25rem;
font-weight: 600;
color: #fff;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
gap: 15px;
}
@media (min-width: 769px) {
.tf-btn--t01 {
max-width: 353px;
padding: 10px 5px 10px 25px;
}
}
.tf-btn--t01 span {
position: absolute;
left: 20px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
@media (min-width: 769px) {
.tf-btn--t01 span {
left: 30px;
}
}
@media (min-width: 769px) {
.tf-btn--t01.size-pc-s {
padding-right: 15px;
padding: 10px 5px 10px 30px;
font-size: 1rem;
font-weight: 600;
color: #fff;
}
}
@media (min-width: 769px) and (max-width: 768px) {
.tf-btn--t01.size-pc-s {
font-size: 1rem;
}
}
.tf-btn--t01 span {
left: 20px;
}
.tf-btn--t01.size-x {
max-width: 315px;
min-height: 45px;
padding-right: 15px;
}
@media (min-width: 769px) {
.tf-btn--t01.size-x {
padding-right: 15px;
padding: 10px 5px 10px 30px;
}
}
.tf-btn--t01.not-active::before {
content: "coming soon";
width: calc(100% + 2px);
height: calc(100% + 2px);
left: -1px;
top: -1px;
border-radius: 50px;
}
@media (max-width: 768px) {
.tf-btn--t01 {
font-size: 1rem;
}
}
.tf-btn--t01.color--red {
border: solid 1px #ff0000;
background: #ff0000;
color: #fff;
}
.tf-section {
position: relative;
z-index: 20;
}
.tf-section__header {
margin-bottom: 20px;
}
.tf-section__header h3 img {
height: 52px;
width: auto;
margin: auto;
display: block;
}
@media (min-width: 769px) {
.tf-section__header h3 img {
height: 65px;
}
}
.tf--nav {
margin: 20px 0 0;
text-align: center;
position: relative;
z-index: 10;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.coming-soon {
width: 300px;
img {
width: 100%;
}
}
.tf--nav-tenpo {
display: flex;
margin: 5px auto 0;
justify-content: center;
align-items: center;
}
.tf--nav-tenpo a {
display: block;
width: 80%;
max-width: 120px;
margin: 2em 6% 0em 0;
}
.tf--nav-tenpo a:nth-child(2) {
max-width: 90px;
}
.tf--nav-tenpo a:nth-child(3) {
max-width: 200px;
}
.tf--nav-tenpo a:last-child {
margin: 2em 0 0em;
}
.not-active {
pointer-events: none;
position: relative;
}
.not-active::before {
font-family: "Noto Sans JP", sans-serif;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
content: "coming soon";
font-weight: 700;
font-size: 1.25rem;
letter-spacing: 0.2em;
color: #fff;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 2;
background: rgba(0, 0, 0, 0.7);
}
.tf-menu-title {
z-index: 30;
position: relative;
}
.tf-menu-title img {
max-width: 196px;
top: calc(50% + 200px);
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
position: absolute;
z-index: 10;
width: 100%;
height: auto;
}
@media (max-width: 768px) {
.tf-menu-title img {
width: 26.9720101781vw;
max-width: 106px;
top: calc(50% + 50px);
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.tf--nav-tenpo {
padding: 0 5%;
}
.tf--nav-tenpo a {
margin: 2em 8% 0em 0;
}
.tf--nav-tenpo a:nth-child(1) {
width: 60%;
}
.tf--nav-tenpo a:nth-child(2) {
width: 50%;
}
.tf--nav-tenpo a:nth-child(3) {
width: 100%;
}
}
.tf-menu-header-bg {
mix-blend-mode: multiply;
}
.tf-menu-header-bg img {
max-width: 625px;
display: block;
-webkit-transform: translate(-5px, -40px);
transform: translate(-5px, -40px);
margin: auto;
}
@media (max-width: 768px) {
.tf-menu-header-bg img {
-webkit-transform: translate(-5px, -70px);
transform: translate(-5px, -70px);
width: 75.0636132316vw;
max-width: 295px;
}
}
.tf-menu-shoplist-nav {
padding: 0;
margin: auto;
max-width: 1052px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 15px;
margin-top: 0px;
padding: 0;
width: 100%;
list-style: none;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.tf-menu-shoplist-nav {
display: grid;
max-width: 560px;
/*grid-template-columns: 1fr 1fr 1fr 1fr 1fr;*/
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
gap: 11px;
margin-top: -80px;
padding: 0 20px;
}
.tf-menu-shoplist-nav.berusaga-banner {
max-width: 560px;
display: block;
margin-top: 0px;
}
}
.tf-menu-shoplist-nav li {
padding: 0;
margin: 0;
}
@media (min-width: 769px) {
.tf-menu-shoplist-nav li {
width: 150px;
height: 150px;
}
}
.tf-menu-shoplist-nav li span {
display: block;
}
@media (min-width: 769px) {
.tf-menu-shoplist-nav li span {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
cursor: pointer;
}
.tf-menu-shoplist-nav li span:hover {
opacity: 0.7;
}
}
.tf-menu-shoplist-nav li span img {
width: 100%;
height: auto;
}
.tf-menu-shoplist {
margin: 30px auto;
position: relative;
z-index: 2;
max-width: 560px;
/* overflow: hidden; */
color: #fff;
}
@media (min-width: 769px) {
.tf-menu-shoplist {
margin-top: 100px;
max-width: 1052px;
}
}
.tf-menu-shoplist ol {
list-style: none;
counter-reset: item;
}
@media (min-width: 769px) {
.tf-menu-shoplist ol {
max-width: 1052px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
gap: 56px 78px;
}
}
.tf-menu-shoplist ol .shop2 {
padding-top: 10px;
position: relative;
}
.tf-menu-shoplist ol .shop2 h3 span {
display: block;
font-size: min(3vw, 0.85rem);
}
@media (min-width: 769px) {
.tf-menu-shoplist ol .shop2 {
padding-bottom: 120px;
overflow-x: hidden;
overflow-y: visible;
}
}
@media (max-width: 768px) {
.tf-menu-shoplist ol .shop2 {
margin-bottom: 16px;
}
}
.tf-menu-shoplist ol .shop2 .obi {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
width: 58px;
height: 100%;
background: rgba(134, 0, 0, 0.5);
position: absolute;
left: 0;
top: 0;
z-index: 0;
}
.tf-menu-shoplist ol .shop2 .number {
color: #fff;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
width: 58px;
height: 100%;
position: absolute;
left: 0;
top: -2%;
z-index: 30;
}
.tf-menu-shoplist ol .shop2 .number.berusaga-logo {
width: 100px;
height: auto;
top: 2%;
left: 1%;
}
.tf-menu-shoplist ol .shop2 .number > div {
font-size: 2.5rem;
counter-increment: item;
content: counter(item);
font-family: "Times New Roman", Times, serif;
}
.tf-menu-shoplist ol .shop2 .number > div span {
font-size: 1.5625rem;
}
.tf-menu-shoplist ol .shop2 .sns {
padding: 0;
margin: 0;
list-style: none;
position: absolute;
left: 13px;
top: calc(100% - 120px - 25px);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 18px;
z-index: 100;
}
.tf-menu-shoplist ol .shop2 .sns li {
width: 30px;
height: 30px;
}
.tf-menu-shoplist ol .shop2__name {
text-align: center;
}
@media (min-width: 769px) {
.tf-menu-shoplist ol .shop2__name {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
}
.tf-menu-shoplist ol .shop2__name > div {
min-height: 75px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.tf-menu-shoplist ol #shop-1 .shop2__name > div {
min-height: 95px;
}
.tf-menu-shoplist ol #shop-2 .shop2__name > div {
min-height: 23px;
}
@media (max-width: 768px) {
.tf-menu-shoplist ol #shop-1 .shop2__name > div {
min-height: 36px;
}
.tf-menu-shoplist ol #shop-3 .shop2__name > div {
min-height: 27px;
}
}
.tf-menu-shoplist ol .shop2__name h3 {
letter-spacing: 0;
font-family: "Noto Serif JP", serif;
font-weight: 600;
margin: 10px 0;
font-size: min(2.8vw, 0.6875rem);
line-height: 1.7;
}
.tf-menu-shoplist ol .shop2__name h3 br {
display: none;
}
.tf-menu-shoplist ol .shop2__name .logo {
display: block;
max-width: 50%;
width: 100%;
max-height: 75px;
height: 100%;
margin: auto;
}
.tf-menu-shoplist ol #shop-1 .shop2__name .logo {
max-height: 130px;
}
.tf-menu-shoplist ol #shop-2 .shop2__name .logo {
max-height: 23px;
}
@media (max-width: 768px) {
.tf-menu-shoplist ol #shop-1 .shop2__name .logo {
max-height: 95px;
}
.tf-menu-shoplist ol #shop-2 .shop2__name .logo {
max-height: 23px;
}
.tf-menu-shoplist ol #shop-3 .shop2__name .logo {
max-width: 41%;
}
}
.tf-menu-shoplist ol .shop2__name span,.tf-menu-shoplist ol .shop2__name a {
margin: auto;
}
.tf-menu-shoplist ol .shop2__menu {
width: 100%;
}
.tf-menu-shoplist ol .shop2__menu figure {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: start;
}
.tf-menu-shoplist ol .shop2__menu figure figcaption {
position: absolute;
inset: 0 0 0 auto;
margin-block: auto;
height: fit-content;
width: 46%;
top: 71%;
}
@media (max-width: 375px) {
.tf-menu-shoplist ol .shop2__menu figure figcaption {
width: 50%;
right: 2%;
}
}
.tf-menu-shoplist ol .shop2__menu figure figcaption > .txt {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin: 0;
}
.tf-menu-shoplist ol .shop2__menu figure figcaption > .txt p {
font-family: "Noto Serif JP", serif;
font-weight: 600;
letter-spacing: 0;
white-space: nowrap;
font-size: min(2.6vw, 0.6875rem);
line-height: 1.7;
}
@media (max-width: 360px) {
.tf-menu-shoplist ol .shop2__menu figure figcaption > .txt p {
font-size: min(2.45vw, 0.6rem);
}
}
.tf-menu-shoplist ol .shop2__menu figure figcaption > div {
margin: 12px 0 0;
}
@media (min-width: 769px) {
.tf-menu-shoplist ol .shop2__menu figure figcaption > div {
margin: 13px 0 0;
}
}
.tf-menu-shoplist ol .shop2__menu figure figcaption > div .btn--info {
margin: auto;
width: 60%;
min-width: 100px;
max-width: 100px;
padding: 2% 0.6% 2% 2%;
}
@media (min-width: 769px) {
.tf-menu-shoplist ol .shop2__menu figure figcaption > div .btn--info {
width: 115px;
max-width: 115px;
}
}
.tf-menu-shoplist ol .splide {
visibility: visible;
color: #fff;
}
.tf-menu-shoplist ol .splide .splide__arrows {
z-index: 100;
}
.tf-menu-shoplist ol .splide .splide__arrows .splide__arrow {
background: rgba(0, 0, 0, 0);
z-index: 100;
top: 30%;
right: 0.5em;
opacity: 1;
}
.tf-menu-shoplist ol .splide .splide__arrows .splide__arrow:disabled {
opacity: 0.3;
}
.tf-menu-shoplist ol .splide .splide__arrows .splide__arrow::before {
content: "";
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 21px;
height: 30px;
-webkit-filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.6));
filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.6));
}
.tf-menu-shoplist ol .splide .splide__arrows .splide__arrow--prev {
left: 0.5em;
}
.tf-menu-shoplist ol .splide .splide__arrows .splide__arrow--prev::before {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.tf-menu-shoplist ol .splide .splide__arrows .splide__arrow svg {
display: none;
}
.tf-menu-shoplist ol .splide .splide__pagination {
margin: -10px auto 20px;
z-index: 100;
position: relative;
left: -28%;
}
.tf-menu-shoplist ol .splide .splide__pagination .splide__pagination__page {
background: #b7b4b4;
opacity: 1;
}
.tf-menu-shoplist
ol
.splide
.splide__pagination
.splide__pagination__page.is-active {
opacity: 1;
background: #ffb1b1;
-webkit-transform: scale(1);
transform: scale(1);
}
.tf-menu-shoplist ol .splide__track {
overflow: visible;
padding: 0% 0 0%;
position: relative;
z-index: 2;
}
.tf-menu-shoplist ol .splide__list {
position: relative;
z-index: 2;
}
.tf-menu-shoplist ol .splide .bg {
width: 100%;
position: absolute;
right: -3%;
top: 0%;
z-index: 0;
}
.shop-splide_catch {
width: 100%;
max-width: 300px;
position: absolute;
right: -4%;
top: -1%;
z-index: 2;
}
@media (max-width: 768px) {
.shop-splide_catch {
width: 61vw;
max-width: 300px;
position: absolute;
right: 1%;
top: 3%;
}
}
.shop-splide_catch img {
width: 100%;
height: auto;
}
@media (min-width: 769px) {
.shop2 *[data-m-target] {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
cursor: pointer;
}
.shop2 *[data-m-target]:hover .btn--info {
opacity: 0.7;
}
}
.menu-splide {
visibility: visible;
}
.menu-splide .info {
width: 100%;
}
.menu-splide .info figure {
padding-bottom: 60px;
}
.menu-splide .info__img img {
width: 100%;
height: auto;
}
.menu-splide.splide {
visibility: visible;
}
.menu-splide.splide__track {
overflow: visible;
position: relative;
z-index: 2;
}
.menu-splide .splide__arrows {
z-index: 100;
}
.menu-splide .splide__arrows .splide__arrow {
background: rgba(0, 0, 0, 0);
z-index: 100;
top: 33vw;
right: 0.5em;
opacity: 1;
}
@media (min-width: 769px) {
.menu-splide .splide__arrows .splide__arrow {
top: 30%;
right: calc(50% + 2em);
}
}
.menu-splide .splide__arrows .splide__arrow:disabled {
opacity: 0.3;
}
.menu-splide .splide__arrows .splide__arrow::before {
content: "";
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
-webkit-filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.6));
filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.6));
width: 21px;
height: 30px;
}
.menu-splide .splide__arrows .splide__arrow--prev {
left: 0.5em;
}
@media (min-width: 769px) {
.menu-splide .splide__arrows .splide__arrow--prev {
left: 2.5em;
}
}
.menu-splide .splide__arrows .splide__arrow--prev::before {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.menu-splide .splide__arrows .splide__arrow svg {
display: none;
}
.shop2__menu .img {
width: 60%;
}
#shop-1 h3 {
margin-top: 0;
}
@media (max-width: 768px) {
#shop-1 figure {
margin: 0% auto;
}
#shop-1 figcaption {
bottom: 0%;
right: -4%;
}
}
#shop-1 .shop2__menu .img {
width: 97%;
-webkit-transform: translateX(1%) translateY(-4%);
transform: translateX(1%) translateY(-4%);
}
@media (min-width: 769px) {
#shop-1 .shop2__menu .img {
width: 97%;
-webkit-transform: translateX(1%) translateY(-4%);
transform: translateX(1%) translateY(-4%);
}
}
#shop-2 .shop2__menu .img {
width: 83%;
-webkit-transform: translateX(18%) translateY(-3%);
transform: translateX(18%) translateY(-3%);
}
@media (min-width: 769px) {
#shop-2 .shop2__menu .img {
width: 83%;
-webkit-transform: translateX(18%) translateY(-3%);
transform: translateX(18%) translateY(-3%);
}
}
.tf-menu-shoplist ol #shop-2 .shop2__menu figure figcaption {
top: 50%;
}
@media (max-width: 768px) {
#shop-2 figure {
margin: 1% auto;
}
#shop-2 figcaption {
bottom: 0%;
right: -4%;
}
}
#shop-3 {
position: relative;
z-index: 10;
}
@media (max-width: 768px) {
#shop-3 figcaption {
bottom: 0%;
right: -4%;
}
}
#shop-3 .shop2__menu .img {
width: 100%;
-webkit-transform: translateX(0%) translateY(-2%);
transform: translateX(0%) translateY(-2%);
}
@media (min-width: 769px) {
#shop-3 .shop2__menu .img {
width: 100%;
-webkit-transform: translateX(0%) translateY(-2%);
transform: translateX(0%) translateY(-2%);
}
}
.tf-menu-shoplist ol #shop-3 .shop2__name > div {
min-height: 24px;
}
.tf-menu-shoplist ol #shop-3 .shop2__name .logo {
max-height: 24px;
}
.tf-menu-shoplist ol #shop-3 .splide__track {
padding: 0% 0 15%;
}
@media (min-width: 769px) {
.tf-menu-shoplist ol #shop-3 .splide__track {
padding: 0% 0 12%;
}
}
.tf-menu-shoplist ol #shop-3 .shop2__menu figure figcaption {
top: 96%;
}
#shop-4 .splide__pagination {
margin-top: 0px;
}
@media (min-width: 769px) {
#shop-4 .splide__pagination {
margin: -10px 0 30px;
}
}
#shop-4 .shop2__menu[aria-label="1 of 2"] .img img {
width: 90%;
margin: auto;
-webkit-transform: translateX(5%);
transform: translateX(5%);
}
#shop-4 .shop2__menu[aria-label="2 of 2"] .img img {
-webkit-transform: scale(1.1) translateX(-5%);
transform: scale(1.1) translateX(-5%);
}
#shop-4 .shop2__menu {
margin-top: -4%;
}
.tf-menu-shoplist ol #shop-4 .shop2__name > div {
min-height: 62px;
}
.tf-menu-shoplist ol #shop-4 .shop2__name .logo {
max-height: 62px;
}
.tf-menu-shoplist ol #shop-4 .splide__track {
padding: 0% 0 0%;
}
.tf-menu-shoplist ol #shop-4 .shop2__menu figure figcaption {
top: 57%;
right: -9%;
bottom: 0%;
}
#shop-4 .shop2__menu .img {
width: 99%;
-webkit-transform: translateX(2%) translateY(-25%);
transform: translateX(2%) translateY(-25%);
}
@media (min-width: 769px) {
.tf-menu-shoplist ol #shop-4 .splide__track {
padding: 0% 0 14%;
}
#shop-4 .shop2__menu .img {
width: 96%;
-webkit-transform: translateX(2%) translateY(6%);
transform: translateX(2%) translateY(6%);
}
.tf-menu-shoplist ol #shop-4 .shop2__menu figure figcaption {
top: 103%;
right: -7%;
}
}
#shop-4 .shop2__menu figcaption {
width: 60%;
bottom: 5%;
}
@media (max-width: 768px) {
#shop-4 figure {
margin: 6% auto 7%;
}
#shop-4 figcaption {
bottom: -52%;
right: -4%;
}
#shop-4 .shop2__menu figcaption {
width: 60%;
bottom: -90%;
right: -9%;
}
}
#shop-5 h3 {
margin-top: 0;
}
#shop-5 .splide__pagination {
margin-top: 15px;
}
.tf-menu-shoplist ol #shop-5 .shop2__name > div {
min-height: 90px;
}
.tf-menu-shoplist ol #shop-5 .shop2__name .logo {
max-height: 68px;
}
.tf-menu-shoplist ol #shop-5 .splide__track {
padding: 0% 0 0%;
}
.tf-menu-shoplist ol #shop-5 .shop2__menu figure figcaption {
top: 86%;
right: -8%;
}
#shop-5 .shop2__menu .img {
width: 100%;
-webkit-transform: translateX(2%) translateY(-9%);
transform: translateX(2%) translateY(-9%);
}
@media (min-width: 769px) {
.tf-menu-shoplist ol #shop-5 .splide__track {
padding: 0% 0 14%;
}
#shop-5 .shop2__menu .img {
width: 100%;
-webkit-transform: translateX(2%) translateY(-2%);
transform: translateX(2%) translateY(-2%);
}
.tf-menu-shoplist ol #shop-5 .shop2__menu figure figcaption {
top: 108%;
right: -7%;
}
}
#shop-5 .shop2__menu figcaption {
width: 60%;
bottom: 5%;
}
@media (max-width: 768px) {
#shop-5 figure {
margin: 0% auto 6%;
}
#shop-5 figcaption {
bottom: -52%;
right: -4%;
}
#shop-5 .shop2__menu figcaption {
width: 60%;
right: -9%;
}
}
#shop-5 .shop2__menu[aria-label="1 of 2"] .img img {
-webkit-transform: scale(1.05) translateX(-5%);
transform: scale(1.05) translateX(-5%);
}
@media (min-width: 769px) {
#shop-5 .shop2__menu[aria-label="2 of 2"] .img img {
-webkit-transform: scale(0.92) translateX(3%);
transform: scale(0.92) translateX(3%);
}
}
#shop-6 {
position: relative;
z-index: 10;
}
#shop-6 .shop2__menu:nth-child(1) .img {
width: 100%;
-webkit-transform: translateX(2%) translateY(-13%);
transform: translateX(2%) translateY(-13%);
}
#shop-6 .shop2__menu:nth-child(2) .img {
width: 88%;
-webkit-transform: translateX(13%) translateY(-11%);
transform: translateX(13%) translateY(-11%);
}
@media (max-width: 768px) {
#shop-6 .shop2__menu:nth-child(1) .img {
width: 100%;
-webkit-transform: translateX(-2%) translateY(-10%);
transform: translateX(-2%) translateY(-10%);
}
#shop-6 .shop2__menu:nth-child(2) .img {
width: 88%;
-webkit-transform: translateX(13%) translateY(-11%);
transform: translateX(13%) translateY(-11%);
}
}
.tf-menu-shoplist ol #shop-6 .shop2__name > div {
min-height: 30px;
}
.tf-menu-shoplist ol #shop-6 .shop2__name .logo {
max-height: 29px;
}
.tf-menu-shoplist ol #shop-6 .splide__track {
padding: 0% 0 0%;
}
.tf-menu-shoplist ol #shop-6 .shop2__menu figure figcaption {
top: 87%;
right: 2%;
}
#shop-6 .shop2__menu .img img {
width: 100%;
margin: auto 0 0 auto;
}
@media (max-width: 768px) {
#shop-6 .shop2__menu .img img {
width: 93%;
}
.tf-menu-shoplist ol #shop-6 .shop2__menu figure figcaption {
top: 66%;
right: 1%;
}
}
#shop-6 .shop2__menu figcaption {
width: 42%;
bottom: -5%;
}
@media (max-width: 768px) {
#shop-6 figure {
margin: 0% auto 3%;
}
#shop-6 figcaption {
bottom: -52%;
right: -4%;
}
#shop-6 .shop2__menu figcaption {
width: 42%;
right: 0%;
}
}
#shop-6 .shop2__name {
margin-top: 5%;
}
#shop-6 .logo {
max-height: 55px;
margin: auto;
}
@media (max-width: 768px) {
#shop-6 .logo {
max-height: 32px;
max-width: 39%;
}
.tf-menu-shoplist ol #shop-6 .shop2__name > div {
min-height: 40px;
}
}
#shop-7 .shop2__menu {
margin-top: -3%;
}
#shop-7 .shop2__menu[aria-label="1 of 3"] .img img {
-webkit-transform: scale(1) translateX(0%);
transform: scale(1) translateX(0%);
}
#shop-7 .shop2__menu[aria-label="3 of 3"] .img img {
-webkit-transform: scale(1.1) translateX(-5%);
transform: scale(1.1) translateX(-5%);
}
#shop-7 .shop2__name > div {
min-height: auto;
}
#shop-7 .shop2__menu .img {
width: 90%;
-webkit-transform: translateX(16%) translateY(-4%);
transform: translateX(16%) translateY(-4%);
}
.tf-menu-shoplist ol #shop-7 .shop2__name > div {
min-height: 24px;
}
.tf-menu-shoplist ol #shop-7 .shop2__name .logo {
max-height: 22px;
}
.tf-menu-shoplist ol #shop-7 .splide__track {
padding: 0% 0 5%;
}
.tf-menu-shoplist ol #shop-7 .shop2__menu figure figcaption {
top: 90%;
right: -1%;
}
@media (max-width: 768px) {
#shop-7 figure {
margin: 2% auto 10%;
}
#shop-7 figcaption {
right: -2%;
}
#shop-7 .shop2__menu .img {
width: 79%;
-webkit-transform: translateX(24%) translateY(-14%);
transform: translateX(24%) translateY(-14%);
}
#shop-7 .shop2__name > div {
min-height: 22px;
}
.tf-menu-shoplist ol #shop-7 .shop2__name .logo {
max-height: 24px;
}
.tf-menu-shoplist ol #shop-7 .shop2__menu figure figcaption {
top: 82%;
right: -3%;
}
}
@media (min-width: 769px) {
#shop-8 .splide .splide__slide figure {
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
}
#shop-8 .shop2__menu {
margin-top: -1%;
}
#shop-8 .shop2__menu[aria-label="1 of 2"] .img img {
-webkit-transform: scale(1.1) translateX(-10%);
transform: scale(1.1) translateX(-10%);
}
#shop-8 figcaption {
width: 42%;
bottom: -2%;
}
.tf-menu-shoplist ol #shop-8 .shop2__name > div {
min-height: 32px;
}
.tf-menu-shoplist ol #shop-8 .shop2__name .logo {
max-height: 30px;
}
.tf-menu-shoplist ol #shop-8 .splide__track {
padding: 0% 0 0%;
}
.tf-menu-shoplist ol #shop-8 .shop2__menu figure figcaption {
top: 76%;
right: 0%;
}
#shop-8 .shop2__menu .img {
width: 100%;
-webkit-transform: translateX(2%) translateY(-5%);
transform: translateX(2%) translateY(-5%);
}
@media (max-width: 768px) {
#shop-8 figure {
margin: 0% auto 13%;
}
#shop-8 figcaption {
width: 42%;
right: 1%;
}
#shop-8 .shop2__menu .img {
width: 98%;
-webkit-transform: translateX(3%) translateY(-15%);
transform: translateX(3%) translateY(-15%);
}
.tf-menu-shoplist ol #shop-8 .shop2__menu figure figcaption {
top: 45%;
right: 0%;
}
}
#shop-8 .shop2__name > div {
min-height: auto;
}
#shop-8 .logo {
max-width: 27%;
margin: auto;
}
@media (max-width: 768px) {
#shop-8 .logo {
max-width: 33%;
}
}
#shop-8 .splide__pagination {
margin-top: 5px;
}
@media (min-width: 769px) {
#shop-8 .splide__pagination {
margin-top: 50px;
}
}
#shop-9 .shop2__menu {
margin-top: -5%;
}
#shop-9 .shop2__menu[aria-label="1 of 2"] .img img {
-webkit-transform: scale(1.08) translateX(-8%);
transform: scale(1.08) translateX(-8%);
}
#shop-9 .splide__pagination {
margin-top: 10px;
}
#shop-9 figcaption {
width: 42%;
bottom: -5%;
}
#shop-9 .shop2__menu .img {
width: 92%;
-webkit-transform: translateX(11%) translateY(7%);
transform: translateX(11%) translateY(7%);
}
@media (max-width: 768px) {
#shop-9 figure {
margin: 0% auto 2%;
}
#shop-9 figcaption {
width: 42%;
right: 1%;
}
#shop-9 .shop2__menu .img {
width: 91%;
-webkit-transform: translateX(14%) translateY(1%);
transform: translateX(14%) translateY(1%);
}
}
#shop-9 .shop2__name {
margin-top: 20px;
}
#shop-9 .shop2__name > div {
min-height: auto;
}
#shop-9 .logo {
max-width: 28%;
margin: auto;
}
#shop-10 .number > div {
letter-spacing: -0.05em;
}
.tf-menu-shoplist ol #shop-10 .shop2__name > div {
min-height: 30px;
}
.tf-menu-shoplist ol #shop-10 .shop2__name .logo {
max-height: 27px;
}
.tf-menu-shoplist ol #shop-10 .splide__track {
padding: 0% 0 0%;
}
.tf-menu-shoplist ol #shop-10 .shop2__menu figure figcaption {
top: 65%;
right: -1%;
}
#shop-10 .shop2__menu:nth-child(1) .img {
width: 100%;
-webkit-transform: translateX(1%) translateY(-9%);
transform: translateX(1%) translateY(-9%);
}
#shop-10 .shop2__menu:nth-child(2) .img {
width: 89%;
-webkit-transform: translateX(8%) translateY(-9%);
transform: translateX(8%) translateY(-9%);
}
#shop-10 .shop2__menu:nth-child(3) .img {
width: 88%;
-webkit-transform: translateX(12%) translateY(-11%);
transform: translateX(12%) translateY(-11%);
}
@media (max-width: 768px) {
.tf-menu-shoplist ol #shop-10 .shop2__menu figure figcaption {
top: 64%;
right: -3%;
}
#shop-10 .shop2__menu:nth-child(1) .img {
width: 100%;
-webkit-transform: translateX(0%) translateY(-8%);
transform: translateX(0%) translateY(-8%);
}
#shop-10 .shop2__menu:nth-child(2) .img {
width: 89%;
-webkit-transform: translateX(8%) translateY(-9%);
transform: translateX(8%) translateY(-9%);
}
#shop-10 .shop2__menu:nth-child(3) .img {
width: 88%;
-webkit-transform: translateX(12%) translateY(-11%);
transform: translateX(12%) translateY(-11%);
}
}
@media (min-width: 769px) {
#shop-10 .shop2__menu figcaption {
bottom: -1.5%;
}
}
@media (max-width: 768px) {
#shop-10 figure {
margin: 0% auto 0%;
}
#shop-10 figcaption {
right: -4%;
}
}
#shop-11 .number > div {
letter-spacing: -0.05em;
}
.tf-menu-shoplist ol #shop-11 .shop2__name > div {
min-height: 58px;
}
.tf-menu-shoplist ol #shop-11 .shop2__name .logo {
max-height: 56px;
}
.tf-menu-shoplist ol #shop-11 .splide__track {
padding: 0% 0 0%;
}
.tf-menu-shoplist ol #shop-11 .shop2__menu figure figcaption {
top: 80%;
right: -1%;
}
#shop-11 .shop2__menu:nth-child(1) .img {
width: 100%;
-webkit-transform: translateX(2%) translateY(-5%);
transform: translateX(2%) translateY(-5%);
}
@media (min-width: 769px) {
#shop-11 .shop2__menu figcaption {
bottom: -1.5%;
}
}
@media (max-width: 768px) {
#shop-11 figure {
margin: 0% auto 0%;
}
#shop-11 figcaption {
right: -4%;
}
}
#shop-12 .number > div {
letter-spacing: -0.05em;
}
.tf-menu-shoplist ol #shop-12 .shop2__name > div {
min-height: 50px;
}
.tf-menu-shoplist ol #shop-12 .shop2__name .logo {
max-height: 48px;
}
.tf-menu-shoplist ol #shop-12 .splide__track {
padding: 0% 0 0%;
}
.tf-menu-shoplist ol #shop-12 .shop2__menu figure figcaption {
top: 52%;
right: -1%;
}
#shop-12 .shop2__menu:nth-child(1) .img {
width: 84%;
-webkit-transform: translateX(15%) translateY(-6%);
transform: translateX(15%) translateY(-6%)
}
#shop-12 .shop2__menu:nth-child(2) .img {
width: 92%;
-webkit-transform: translateX(6%) translateY(-13%);
transform: translateX(6%) translateY(-13%);
}
@media (min-width: 769px) {
#shop-12 .shop2__menu figcaption {
bottom: -1.5%;
}
}
@media (max-width: 768px) {
#shop-12 figure {
margin: 0% auto 0%;
}
#shop-12 figcaption {
right: -4%;
}
}
*[data-m="modal_menuinfo_2"] .modal-main .info__logo,
*[data-m="modal_shopinfo_2"] .modal-main .info__logo {
padding-left: 3%;
}
.btn--info {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
max-width: 100px;
width: 26%;
height: 100%;
padding: 1% 0.5% 1% 1%;
border: solid 1px #fff;
border-radius: 30px;
gap: 4px;
}
@media (min-width: 769px) {
.btn--info {
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
max-width: 115px;
}
}
.btn--info > img {
width: 80%;
height: auto;
}
@media (min-width: 769px) {
.btn--info > img {
width: 75%;
}
}
.btn--info::after {
content: "";
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 2vw;
max-width: 10px;
max-height: 10px;
height: 2.1vw;
}
.btn--info.black {
border: solid 1px #14223c;
}
.btn--info.black::after {
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.btn-backtoptop {
position: fixed;
z-index: 100;
right: 20px;
bottom: 20px;
}
footer {
position: relative;
z-index: 2;
margin-top: 0px;
}
footer .inner {
background: #fff;
}
img {
pointer-events: none;
}
body.noscroll {
overflow: hidden;
}
header {
top: 0;
}
article {
font-family: "Noto Sans JP", sans-serif;
position: relative;
background: #921e17;
}
.tf-main {
position: relative;
margin-top: 50px;
}
@media (min-width: 769px) {
.tf-main {
margin-top: 50px;
}
}
@media (max-width: 768px) {
.tf-main {
overflow: hidden;
}
}
.tf-main__bg {
position: fixed;
left: 0;
top: 50px;
pointer-events: none;
width: 100%;
height: calc(100vh - 50px);
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
font-family: "object-fit: cover; object-position: center;";
z-index: 0;
}
@media (max-width: 1080px) {
.tf-main__bg {
height: 150vh;
}
}
@media (max-width: 768px) {
.tf-main__bg {
height: calc(100vh - 50px);
}
}
.tf-main.active .tf-main__ichigosan {
position: fixed;
}
@media (min-width: 769px) {
.tf-main.active .tf-main__ichigosan img {
top: 32px;
}
}
@media (max-width: 1080px) {
.tf-main.active .tf-main__ichigosan img {
top: 32px;
}
}
@media (max-width: 768px) {
.tf-main.active .tf-main__ichigosan img {
top: -20px;
}
}
.tf-main.active .tf-main__ichigosan-02 {
position: fixed;
}
@media (min-width: 769px) {
.tf-main.active .tf-main__ichigosan-02 img {
bottom: 70px;
}
}
@media (max-width: 1080px) {
.tf-main.active .tf-main__ichigosan-02 img {
bottom: 70px;
}
}
@media (max-width: 768px) {
.tf-main.active .tf-main__ichigosan-02 img {
bottom: 50px;
}
}
.tf-main__ichigosan {
max-width: 430px;
width: 100%;
height: 100vh;
top: 20px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
position: absolute;
pointer-events: none;
z-index: 1;
}
.after-banner {
display: block;
position: absolute;
width: 70vw;
max-width: 338px;
bottom: 16%;
left: 0;
right: 7%;
margin: auto;
z-index: 31;
}
.shop-logos {
position: absolute;
width: 90vw;
max-width: 703px;
inset: auto 0 11%;
margin-inline: auto;
z-index: 31;
}
.shop-logos img {
width: 100%;
}
@media (min-width: 769px) {
.after-banner {
width: 100%;
max-width: 338px;
bottom: 12%;
right: 5%;
}
.shop-logos {
position: absolute;
width: 90vw;
inset: auto 0 14%;
margin-inline: auto;
z-index: 31;
}
}
@media (min-width: 769px) {
.tf-main__ichigosan {
top: 20px;
}
}
@media (min-width: 769px) {
.tf-main__ichigosan {
max-width: 1440px;
}
}
.tf-main__ichigosan img {
position: absolute;
right: -13%;
top: 0%;
width: 62.5954198473vw;
max-width: 246px;
}
@media (min-width: 769px) {
.tf-main__ichigosan img {
top: 52px;
right: 30px;
max-width: 332px;
}
}
.tf-main__ichigosan-02 {
mix-blend-mode: multiply;
max-width: 430px;
width: 100%;
height: 100vh;
top: 20px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
position: absolute;
pointer-events: none;
z-index: 1;
}
@media (min-width: 769px) {
.tf-main__ichigosan-02 {
display: none;
}
}
@media (min-width: 769px) {
.tf-main__ichigosan-02 {
max-width: 1440px;
}
}
.tf-main__ichigosan-02 img {
position: absolute;
left: -15%;
bottom: 30px;
width: 73.7913486005vw;
max-width: 290px;
}
@media (min-width: 769px) {
.tf-main__ichigosan-02 img {
bottom: 52px;
right: 30px;
max-width: 332px;
}
}
.tf-kv {
height: calc(100vh - 50px);
height: calc(var(--vh, 1vh) * 100 - 50px);
position: relative;
z-index: 60;
}
@media (min-width: 769px) {
.tf-kv {
height: calc(100vh - 50px);
min-height: 765px;
}
}
.tf-kv__copy {
position: absolute;
z-index: 40;
max-width: 430px;
width: 100%;
top: 5%;
}
@media (max-width: 768px) {
.tf-kv__copy {
left: 48.5%;
-webkit-transform: translate(-50%);
transform: translate(-50%);
}
}
@media (min-width: 769px) {
.tf-kv__copy {
left: 50%;
-webkit-transform: translate(-50%);
transform: translate(-50%);
top: 11%;
max-width: 1440px;
}
}
.tf-kv__copy img {
display: block;
position: absolute;
top: 0;
right: 5%;
width: 21.195929vw;
max-width: 86px;
height: auto;
}
@media (min-width: 769px) {
.tf-kv__copy img {
right: 153px;
max-width: 114px;
}
}
.tf-kv__5th {
position:absolute;
top: 18px;
left: 15px;
width: 34vw;
max-width: 154px;
height: 144px;
z-index: 31;
}
.tf-kv__saga {
position:absolute;
bottom:15px;
left:0; right:0;
margin: auto;
width: 96px;
height: 17px;
z-index: 31;
}
@media (min-width: 769px) {
.tf-kv__5th {
top: 80px;
left: 40px;
width: 182px;
height: 171px;
}
.tf-kv__saga {
bottom:30px;
left:40px;
width: 130px;
height: 22.44px;
margin: 0;
}
}
.tf-kv__5th img, .tf-kv__saga img {
width: 100%;
}
.tf-kv__site-logo {
max-width: 161px;
width: 40.9669211196vw;
position: absolute;
left: 50%;
top: 35%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 40;
}
.tf-kv__site-logo img {
width: 100%;
height: auto;
}
@media (min-width: 769px) {
.tf-kv__site-logo {
width: 59.2875318066vw;
max-width: 233px;
top: 32%;
}
@media (min-width: 1900px) {
.tf-kv__site-logo {
top: 39%;
}
}
}
@media (max-width: 500px) {
.tf-kv__site-logo {
top: 42%;
}
@media (max-width: 375px) {
.tf-kv__site-logo {
top: 35%;
}
}
}
.tf-kv__main {
width: 100%;
height: 100%;
max-width: 1333px;
margin: auto;
position: absolute;
left: 52%;
top: 53%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 10;
}
@media (max-width: 768px) {
.tf-kv__main {
max-width: calc(var(--vh, 1vh) * 60);
width: 130%;
left: 48%;
top: 43%;
}
}
@media (min-width: 1900px) {
.tf-kv__main {
top: 53%;
}
}
.tf-kv__main img {
display: block;
width: 100%;
height: auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.tf-kv__parallax {
position: absolute;
z-index: 9;
max-width: 430px;
width: 100%;
height: 100%;
top: 0%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
@media (min-width: 769px) {
.tf-kv__parallax {
max-width: 100%;
max-width: 1635px;
}
}
.tf-kv__parallax-z30 {
z-index: 30;
max-width: 1635px;
}
@media (min-width: 769px) {
.tf-kv__parallax-z30 {
max-width: 1635px;
}
}
.tf-kv__parallax-z {
z-index: 29;
max-width: 1635px;
}
@media (max-width: 768px) {
.tf-kv__parallax-z {
z-index: 9;
}
}
@media (min-width: 769px) {
.tf-kv__parallax-z {
max-width: 1635px;
}
}
.tf-kv__ichigo {
position: absolute;
}
.tf-kv__ichigo--01 {
width: 17.048346056vw;
max-width: 67px;
z-index: 1;
height: auto;
left: 34%;
top: 69%;
}
@media (max-width: 768px) {
.tf-kv__ichigo--01 {
display: none;
}
}
@media (min-width: 769px) {
.tf-kv__ichigo--01 {
max-width: 98px;
left: 20%;
top: 45%;
transform: rotate(74deg) !important;
}
}
.tf-kv__ichigo--02 {
width: 23.4096692112vw;
max-width: 61px;
z-index: 1;
height: auto;
right: 79%;
top: 61%;
transform: scale(-1, 1) !important;
}
@media (min-width: 769px) {
.tf-kv__ichigo--02 {
max-width: 96px;
right: 30%;
top: 32%;
}
}
.tf-kv__ichigo--02-2 {
width: 23.4096692112vw;
max-width: 74px;
z-index: 1;
height: auto;
right: 79%;
top: 37%;
transform: rotate(188deg) !important;
}
@media (min-width: 769px) {
.tf-kv__ichigo--02-2 {
max-width: 96px;
right: 19%;
top: -2%;
}
}
.tf-kv__ichigo--02-3 {
width: 23.4096692112vw;
max-width: 92px;
z-index: 1;
height: auto;
right: -12%;
top: 70%;
transform: rotate(345deg) !important;
}
@media (min-width: 769px) {
.tf-kv__ichigo--02-3 {
max-width: 112px;
right: -3%;
top: 93%;
}
}
.tf-kv__ichigo--03 {
width: 47.3282442748vw;
max-width: 186px;
z-index: 1;
height: auto;
left: 32.5%;
top: -10.5%;
transform: rotate(141deg) !important;
}
@media (min-width: 769px) {
.tf-kv__ichigo--03 {
max-width: 233px;
left: 3.5%;
top: -1.5%;
bottom: auto;
transform: rotate(116deg) !important;
}
}
.tf-kv__ichigo--04 {
display: none;
width: 46.31043257vw;
max-width: 182px;
z-index: 1;
height: auto;
right: -11%;
top: 69%;
}
@media (min-width: 769px) {
.tf-kv__ichigo--04 {
max-width: 226px;
right: 0%;
top: auto;
bottom: 0%;
}
}
.tf-kv__ichigo--05 {
width: 46.8193384224vw;
max-width: 184px;
z-index: 1;
height: auto;
right: -14%;
top: 45%;
}
@media (min-width: 769px) {
.tf-kv__ichigo--05 {
max-width: 356px;
bottom: 12%;
right: -14%;
top: auto;
}
}
.tf-kv__ichigo--06 {
width: 71.2468193384vw;
max-width: 280px;
z-index: 1;
height: auto;
left: -23%;
bottom: -15%;
}
@media (min-width: 769px) {
.tf-kv__ichigo--06 {
top: auto;
max-width: 433px;
left: -14%;
bottom: -12%;
transform: rotate(24deg) !important;
}
}
.tf-kv__ichigo--07 {
width: 55.9796437659vw;
max-width: 220px;
z-index: 1;
height: auto;
left: -13%;
top: -17%;
bottom: auto;
}
@media (min-width: 769px) {
.tf-kv__ichigo--07 {
max-width: 356px;
left: -13%;
top: -22%;
bottom: auto;
}
}
.tf-kv__logos {
max-width: 560px;
width: calc(100% - 30px);
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
bottom: 10px;
z-index: 40;
}
.tf-kv__logos img {
width: 100%;
height: auto;
}
@media (min-width: 769px) {
.tf-kv__logos {
max-width: 1083px;
}
}
.tf-kv__grade {
pointer-events: none;
position: absolute;
z-index: 8;
left: 0;
top: 0;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
font-family: "object-fit: cover; object-position: center;";
width: 100%;
height: calc(var(--vh, 1vh) * 100);
}
@media (min-width: 769px) {
.tf-kv__grade {
height: calc(100vh - 100px);
top: 50px;
}
}
@media (max-width: 1000px) {
.tf-kv__grade {
top: -50px;
}
}
.tf-about {
position: relative;
z-index: 20;
padding: 10% 0 20px;
}
@media (min-width: 769px) {
.tf-about {
padding: 60px 0 47px;
}
}
.tf-about__header {
margin: auto;
width: 54.1984732824vw;
max-width: 213px;
position: relative;
z-index: 2;
}
@media (min-width: 769px) {
.tf-about__header {
max-width: 213px;
}
}
.tf-about__txt {
margin-top: 30px;
position: relative;
z-index: 2;
}
.tf-about__txt p {
line-height: 3;
font-size: 1.1875rem;
text-align: center;
/*letter-spacing: 0.1em;*/
font-family: "Noto Serif JP", serif;
font-weight: 300;
color: #fff;
}
@media (max-width: 768px) {
.tf-about__txt p {
font-size: 0.85rem;
}
}
@media (min-width: 769px) {
.tf-about__txt p .sp {
display: none;
}
}
@media (min-width: 769px) {
.tf-about .tf--nav {
margin-top: 27px;
}
}
@media (max-width: 768px) {
.tf-about .tf--nav a {
max-width: 220px;
}
}
.tf-about__parallax {
position: absolute;
z-index: 1;
max-width: 560px;
width: 100%;
height: 100%;
top: 0%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
@media (min-width: 769px) {
.tf-about__parallax {
max-width: 1440px;
}
}
.tf-about__ichigo {
position: absolute;
}
.tf-about__ichigo--01 {
width: 34.3511450382vw;
max-width: 135px;
top: 21%;
left: -19%;
z-index: 2;
}
@media (min-width: 769px) {
.tf-about__ichigo--01 {
max-width: 165px;
top: -72%;
left: -19%;
}
}
@media (max-width: 1440px) {
.tf-about__ichigo--01 {
left: 0%;
}
}
@media (max-width: 768px) {
.tf-about__ichigo--01 {
left: -8%;
}
}
.tf-about__ichigo--02 {
width: 40.9669211196vw;
max-width: 161px;
top: 98%;
right: -10%;
z-index: 2;
}
@media (min-width: 769px) {
.tf-about__ichigo--02 {
max-width: 197px;
top: 109%;
right: -5%;
}
}
@media (max-width: 1440px) {
.tf-about__ichigo--02 {
right: 0%;
}
}
@media (max-width: 768px) {
.tf-about__ichigo--02 {
right: -10%;
}
}
.tf-about__ichigo--03 {
width: 34.3511450382vw;
max-width: 108px;
top: -100%;
left: -1%;
z-index: 2;
}
@media (min-width: 769px) {
.tf-about__ichigo--03 {
display: none;
}
}
@media (max-width: 500px) {
.tf-about__ichigo--03 {
top: -105%;
}
@media (max-width: 375px) {
.tf-about__ichigo--03 {
top: -79%;
}
}
}
.tf-about__bg {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
font-family: "object-fit: cover; object-position: center;";
z-index: 0;
}
.tf-shop {
max-width: 560px;
margin: auto;
position: relative;
z-index: 20;
padding: 30px 10px 0;
}
@media (min-width: 769px) {
.tf-shop {
max-width: 1440px;
padding: 45px 20px 0;
}
}
.tf-shop__list {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
gap: 26px;
max-width: 285px;
margin: auto;
margin-bottom: 32px;
z-index: 1;
position: relative;
}
@media (min-width: 769px) {
.tf-shop__list {
max-width: 1050px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr;
margin-top: 49px;
margin-bottom: 90px;
}
}
.tf-shop__list img {
max-width: 129px;
width: 100%;
height: auto;
}
@media (min-width: 769px) {
.tf-shop__list img {
width: 147px;
}
}
.tf-shop__ichigo {
position: absolute;
}
.tf-shop__ichigo--01 {
width: 35.6234096692vw;
max-width: 140px;
top: 65%;
left: -12%;
z-index: 2;
}
@media (min-width: 769px) {
.tf-shop__ichigo--01 {
max-width: 173px;
left: 0%;
}
}
@media (max-width: 1440px) {
.tf-shop__ichigo--01 {
left: 0%;
z-index: 0;
}
}
@media (max-width: 768px) {
.tf-shop__ichigo--01 {
max-width: 140px;
top: 51%;
left: -22%;
z-index: 2;
}
}
.tf-map {
padding: 30px 0 0;
max-width: 900px;
margin: auto;
}
.tf-map .tf--nav {
margin-top: 37px;
}
.tf-map .tf--nav > div {
position: relative;
}
@media (min-width: 769px) {
.tf-map {
padding: 75px 0 0;
}
.tf-map .tf--nav {
margin-top: 47px;
}
}
.tf-map__img {
position: relative;
pointer-events: all;
}
@media (max-width: 768px) {
.tf-map__img.pc {
display: none;
}
}
@media (min-width: 769px) {
.tf-map__img {
margin-top: 35px;
}
}
@media (min-width: 769px) {
.tf-map__img a {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
cursor: pointer;
}
.tf-map__img a:hover {
opacity: 1 !important;
}
}
.tf-map__img .shop {
position: absolute;
z-index: 2;
height: auto;
width: 10%;
}
.tf-map__img .shop:hover {
z-index: 6;
-webkit-filter: drop-shadow(3px 3px 4px rgba(0, 0, 0, 0.4));
filter: drop-shadow(3px 3px 4px rgba(0, 0, 0, 0.4));
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.tf-map__img .shop--1 {
width: 15%;
left: 81.5%;
top: 38%;
}
.tf-map__img .shop--2 {
width: 16%;
left: 78.5%;
top: 67.5%;
}
.tf-map__img .shop--3 {
width: 17.5%;
left: 79%;
top: 78.5%;
}
.tf-map__img .shop--4 {
width: 16%;
left: 45%;
top: 21.7%;
}
.tf-map__img .shop--5 {
width: 20%;
left: 59%;
top: 18.5%;
}
.tf-map__img .shop--6 {
width: 20.3%;
left: 54.9%;
top: 37.7%;
}
.tf-map__img .shop--7 {
width: 13.5%;
left: 64.5%;
top: 44.5%;
}
.tf-map__img .shop--8 {
width: 14%;
left: 78.6%;
top: 49.9%;
}
.tf-map__img .shop--9 {
width: 15.7%;
left: 44.1%;
top: 37.6%;
}
.tf-map__img .shop--10 {
width: 20%;
left: 12.5%;
top: 38%;
}
.tf-map__img .shop--11 {
width: 12.1%;
left: 77.8%;
top: 26.5%;
}
.tf-map__img .shop--12 {
width: 13.2%;
left: 71.5%;
top: 63.5%;
}
.tf-map__img .shopname {
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
position: absolute;
z-index: 2;
height: auto;
display: block;
-webkit-transform-origin: 12% bottom 0;
transform-origin: 12% bottom 0;
}
.tf-map__img .shopname img {
display: block;
}
.tf-map__img .shopname.active {
z-index: 10;
-webkit-filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.4));
filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.4));
-webkit-transform: scale(1.4) translate(3%, -7%);
transform: scale(1.4) translate(3%, -7%);
}
.tf-map__img .shopname--1 {
width: 15%;
left: 81.5%;
top: 38%;
}
.tf-map__img .shopname--2 {
width: 16%;
left: 78.5%;
top: 67.5%;
}
.tf-map__img .shopname--3 {
width: 17.5%;
left: 79%;
top: 78.5%;
}
.tf-map__img .shopname--4 {
width: 16%;
left: 45%;
top: 21.7%;
}
.tf-map__img .shopname--5 {
width: 20%;
left: 59%;
top: 18.5%;
}
.tf-map__img .shopname--6 {
width: 20.3%;
left: 54.9%;
top: 37.7%;
}
.tf-map__img .shopname--7 {
width: 13.5%;
left: 64.5%;
top: 44.5%;
}
.tf-map__img .shopname--8 {
width: 14%;
left: 78.6%;
top: 49.9%;
}
.tf-map__img .shopname--9 {
width: 15.7%;
left: 44.1%;
top: 37.6%;
}
.tf-map__img .shopname--10 {
width: 20%;
left: 12.5%;
top: 38%;
}
.tf-map__img .shopname--11 {
width: 12.1%;
left: 77.8%;
top: 26.5%;
}
.tf-map__img .shopname--12 {
width: 13.2%;
left: 71.5%;
top: 63.5%;
}
/*
.tf-map__img .shopname--1 {
width: 11.8888888889%;
left: 83.3333333333%;
top: 49.6753246753%;
}
.tf-map__img .shopname--2 {
width: 7.7777777778%;
left: 81.4444444444%;
top: 27.5974025974%;
}
.tf-map__img .shopname--3 {
-webkit-transform-origin: 15% bottom 0;
transform-origin: 15% bottom 0;
width: 12.3333333333%;
left: 82.8888888889%;
top: 36.3636363636%;
}
.tf-map__img .shopname--4 {
width: 15.6666666667%;
left: 74.4444444444%;
top: 44.9675324675%;
}
.tf-map__img .shopname--4.active {
-webkit-transform: scale(1.4) translate(0%, -10%);
transform: scale(1.4) translate(0%, -10%);
}
.tf-map__img .shopname--5 {
-webkit-transform-origin: 15% bottom 0;
transform-origin: 15% bottom 0;
width: 17.6666666667%;
left: 56.6666666667%;
top: 38.6363636364%;
}
.tf-map__img .shopname--5.active {
-webkit-transform: scale(1.4) translate(0%, -6%);
transform: scale(1.4) translate(0%, -6%);
}
.tf-map__img .shopname--6 {
-webkit-transform-origin: 19% bottom 0;
transform-origin: 19% bottom 0;
width: 12%;
left: 57.2222222222%;
top: 28.4090909091%;
}
.tf-map__img .shopname--7 {
-webkit-transform-origin: 18% bottom 0;
transform-origin: 18% bottom 0;
width: 17.4444444444%;
left: 15%;
top: 38.6363636364%;
}
.tf-map__img .shopname--8 {
width: 12.2222222222%;
-webkit-transform-origin: 15% bottom 0;
transform-origin: 15% bottom 0;
left: 73.8888888889%;
top: 63.7987012987%;
}
.tf-map__img .shopname--9 {
-webkit-transform-origin: 15% bottom 0;
transform-origin: 15% bottom 0;
width: 8.5555555556%;
left: 88.4444444444%;
top: 70.4545454545%;
}
.tf-map__img .shopname--10 {
-webkit-transform-origin: 17% bottom 0;
transform-origin: 17% bottom 0;
width: 11.2222222222%;
left: 77.4444444444%;
top: 67.6948051948%;
}
.tf-map__img .shopname--10.active {
-webkit-transform: scale(1.4) translate(0%, -1%);
transform: scale(1.4) translate(0%, -1%);
}*/
.tf-map__img .img-map {
width: 100%;
height: auto;
}
[data-m-target="modal1"] {
cursor: pointer;
}
@media (min-width: 769px) {
[data-m-target="modal1"] {
display: none;
}
}
@media (max-width: 768px) {
[data-m-target="modal1"] {
display: block;
}
}
[data-m-target="modal2"] {
cursor: pointer;
}
.modal {
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
left: 0;
top: 0;
position: fixed;
z-index: 200;
pointer-events: none;
opacity: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
}
.modal--page {
pointer-events: none;
}
.modal--page .close-modal {
position: absolute;
top: 0px;
right: 0px;
width: 77px;
height: 77px;
background: #e60012;
z-index: 300;
/* その他のスタイル */
}
.modal--page .close-modal::before {
content: "";
width: 2px;
height: 60%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg);
background-color: #fff;
z-index: 2;
}
.modal--page .close-modal::after {
content: "";
width: 2px;
height: 60%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg);
background-color: #fff;
z-index: 2;
}
.modal--page.active {
opacity: 1;
pointer-events: all;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
overflow: auto;
z-index: 1000;
}
.modal--page .modal__inner {
width: 100%;
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.modal--page .modal__inner.active {
display: block;
}
.modal--page .modal__inner.active .modal__content {
padding: 60px;
}
@media (max-width: 768px) {
.modal--page .modal__inner {
display: block;
padding: 0px;
}
}
.modal--page .modal-main {
padding: 93px 88px 40px;
position: relative;
background: #fff;
max-width: 838px;
margin: auto;
color: #000;
}
@media (max-width: 768px) {
.modal--page .modal-main {
min-height: 100vh;
height: 100%;
padding: 93px 20px 40px;
}
}
.modal--page .modal-main h2 {
color: #e60012;
font-size: 1.875rem;
text-align: center;
margin-bottom: 30px;
}
@media (max-width: 768px) {
.modal--page .modal-main h2 {
font-size: 1.3125rem;
}
}
.modal--page .modal-main p {
font-size: 1rem;
}
@media (max-width: 768px) {
.modal--page .modal-main p {
font-size: 0.9375rem;
}
}
.modal--shop {
/*
opacity: 1!important;
pointer-events: all!important;
*/
}
.modal--shop.modal--menu .modal-main .info {
background: #fff;
color: #ff0000;
}
.modal--shop.modal--menu .modal-main .info h2 {
color: #ff0000;
margin: 10px 0 10px;
line-height: 1.7;
}
.modal--shop.modal--menu .modal-main .info__date {
font-size: 1.1875rem;
line-height: 1.5;
}
@media (max-width: 375px) {
.modal--shop.modal--menu .modal-main .info__date {
font-size: 1rem;
}
}
.modal--shop.modal--menu .modal-main .info__price {
font-size: 1rem;
line-height: 1.7;
margin-bottom: 20px;
}
.modal--shop.modal--menu.berusaga-menu .modal-main .info__price {
margin-bottom: 15px;
}
@media (max-width: 375px) {
.modal--shop.modal--menu .modal-main .info__price {
font-size: 0.875rem;
}
}
.modal--shop.modal--menu .modal-main .info__price strong {
font-weight: 400;
}
.modal--shop.modal--menu .modal-main .info__description p {
color: #686869;
}
.modal--shop.modal--menu .modal-main .info__nav {
width: 100%;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
bottom: 30px;
width: 100%;
}
.modal--shop.modal--menu .modal-main .info__nav .btn--info {
margin: auto;
}
.modal--shop .close-modal {
position: absolute;
top: 25px;
right: 0px;
width: 70px;
height: 70px;
background: transparent;
z-index: 300;
border: none;
/* その他のスタイル */
}
@media (min-width: 769px) {
.modal--shop .close-modal {
width: 80px;
height: 80px;
top: 7px;
}
}
.modal--shop .close-modal::before {
content: "";
width: 2px;
height: 60%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg);
background-color: #e60012;
z-index: 2;
}
.modal--shop .close-modal::after {
content: "";
width: 2px;
height: 60%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg);
background-color: #e60012;
z-index: 2;
}
.modal--shop .modal-main {
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
}
@media (min-width: 769px) {
.modal--shop .modal-main {
width: 100%;
}
}
.modal--shop .modal-main figure {
padding: 0;
margin: 0;
}
.modal--shop .modal-main .info {
font-family: "Noto Serif JP", serif;
background: #af0000;
color: #fff;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
@media (max-width: 768px) {
.modal--shop .modal-main .info {
min-height: calc(100vh - 93px);
height: calc(100% - 93px);
}
}
.modal--shop .modal-main .info__logo {
position: absolute;
width: 50%;
max-height: 70px;
top: -17px;
left: 20px;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
z-index: 10;
}
.modal--shop .modal-main .info__logo.menuinfo_berusaga img:nth-child(1) {
max-height: 75px;
margin-right: 15px;
width: auto;
height: 100%;
}
@media (max-width: 768px) {
.modal--shop .modal-main .info__logo.menuinfo_berusaga {
display: flex;
align-items: center;
}
.modal--shop .modal-main .info__logo.menuinfo_berusaga img:nth-child(1) {
max-height: 60px;
}
.modal--shop .modal-main .info__logo.menuinfo_berusaga img:nth-child(2) {
max-height: 31px;
}
}
/*.modal--shop:not(:nth-child(1)):not(:nth-child(5)):not(:nth-child(11)):not(
:nth-child(15)
)
.info__logo {
filter: invert(1);
}*/
@media (min-width: 769px) {
.modal--shop .modal-main .info__logo {
top: 0px;
height: 90px;
max-height: 90px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
}
.modal--shop .modal-main .info__outline {
margin-bottom: 20px;
}
.modal--shop .modal-main .info__outline .time3 > div div {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
font-size: 0.875rem;
line-height: 1.7;
margin: 0;
letter-spacing: 0;
}
@media (max-width: 375px) {
.modal--shop .modal-main .info__outline .time3 > div div {
font-size: 0.75rem;
}
}
.modal--shop .modal-main .info__outline li {
padding-left: 30px;
position: relative;
margin-bottom: 10px;
}
@media (max-width: 375px) {
.modal--shop .modal-main .info__outline li {
margin-bottom: 8px;
}
}
.modal--shop .modal-main .info__outline li p {
font-size: 0.875rem;
line-height: 1.7;
margin: 0;
letter-spacing: 0;
}
.modal--shop .modal-main .info__outline li p a {
color: #fff;
}
@media (max-width: 375px) {
.modal--shop .modal-main .info__outline li p {
font-size: 0.75rem;
}
}
.modal--shop .modal-main .info__outline li img {
position: absolute;
left: 0;
top: 0;
}
.modal--shop .modal-main .info__description {
padding: 0 20px 20px;
}
@media (min-width: 769px) {
.modal--shop .modal-main .info__description {
padding: 0 30px 20px;
}
}
.modal--shop .modal-main .info__description p {
letter-spacing: 0;
font-size: 0.9375rem;
font-weight: 400;
}
@media (max-width: 375px) {
.modal--shop .modal-main .info__description p {
font-size: 0.75rem;
}
}
.modal--shop .modal-main .info__main {
padding-bottom: 60px;
}
@media (min-width: 769px) {
.modal--shop .modal-main .info figure {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
gap: 36px;
padding: 30px;
}
}
.modal--shop .modal-main .info figcaption {
padding: 15px 20px 0;
font-size: 0.875rem;
font-weight: 400;
}
@media (min-width: 769px) {
.modal--shop .modal-main .info figcaption {
padding: 0px;
}
.modal--shop .modal-main .info figcaption .address br {
display: none;
}
}
.modal--shop .modal-main .info h2 {
text-align: left;
margin: 0 0 5px;
letter-spacing: 0;
color: #fff;
font-size: 1.1875rem;
font-weight: 400;
}
@media (max-width: 375px) {
.modal--shop .modal-main .info h2 {
font-size: 1rem;
}
}
@media (min-width: 769px) {
.modal--shop .modal-main .info h2 {
margin: -0.4em 0 10px;
}
}
.modal--shop .modal-main .info .sns {
margin: 0;
position: absolute;
bottom: 30px;
z-index: 2;
width: 100%;
left: 0;
padding: 0;
z-index: 100;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
list-style: none;
gap: 20px;
}
.modal--map {
pointer-events: none;
}
.modal--map .close-modal {
position: fixed;
top: 10px;
right: 10px;
width: 40px;
height: 40px;
background: #e60012;
border-radius: 50%;
z-index: 300;
/* その他のスタイル */
}
.modal--map .close-modal::before {
content: "";
width: 3px;
height: 40%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg);
background-color: #fff;
z-index: 2;
}
.modal--map .close-modal::after {
content: "";
width: 3px;
height: 40%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg);
background-color: #fff;
z-index: 2;
}
@media (min-width: 769px) {
.modal--map {
display: none;
}
}
.modal--map.active {
opacity: 1;
pointer-events: all;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
overflow: auto;
z-index: 1000;
}
.modal--map.active .modal__inner {
position: relative;
width: 1320px;
margin: 0 auto;
padding: 60px;
}
.modal--map.active .modal-main img {
width: 100%;
}
.modal--map.active .tf-map__img {
pointer-events: all;
width: 1200px;
}
.modal--map .tf-map__img {
white-space: nowrap;
width: 900px;
pointer-events: none;
}
@media (max-width: 768px) {
.modal--menu .modal__inner {
background: #fff;
}
}
@media (min-width: 769px) {
.modal--menu .modal__inner .info__main figure {
padding: 10px 30px 30px;
}
.modal--menu.berusaga-menu .modal__inner .info__main figure {
padding: 10px 30px 0px;
}
}
.tf-voice {
margin: 45px 0 0;
padding: 0 10px;
}
@media (min-width: 769px) {
.tf-voice {
margin: 75px 0 0;
}
}
@media (min-width: 769px) {
.tf-voice__list {
max-width: 1052px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
gap: 36px;
margin: 35px auto 0;
}
}
.tf-voice__list li {
padding: 22px 25px 40px;
position: relative;
max-width: 348px;
width: 100%;
margin: auto auto 17px;
}
@media (max-width: 768px) {
.tf-voice__list li {
min-height: 190px;
}
}
@media (min-width: 769px) {
.tf-voice__list li {
max-width: 508px;
padding: 36px 42px 66px;
height: 100%;
}
.tf-voice__list li > div {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
}
@media (max-width: 768px) {
.tf-voice__list li:last-child {
margin-bottom: 0;
}
}
.tf-voice__list li p {
letter-spacing: 0.2em;
font-size: 0.8125rem;
font-weight: 400;
color: #fff;
}
@media (max-width: 768px) {
.tf-voice__list li p {
font-size: 0.8125rem;
}
}
.tf-voice__list li .shop-name {
display: block;
letter-spacing: 0.2em;
font-size: 0.8125rem;
font-weight: 400;
color: #fff;
margin-top: 25px;
padding-right: 40px;
}
@media (max-width: 768px) {
.tf-voice__list li .shop-name {
font-size: 0.8125rem;
}
}
.tf-voice__list li .icon {
position: absolute;
right: 28px;
bottom: 22px;
height: 36px;
width: 29px;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
@media (min-width: 769px) {
.tf-voice__list li .icon {
height: 52px;
width: 42px;
right: 38px;
bottom: 36px;
}
}
.tf-voice__list li .vbg {
position: absolute;
}
.tf-voice__list li .vbg--hed {
width: 100%;
height: auto;
left: 50%;
top: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.tf-voice__list li .vbg--body {
width: 100%;
height: 88%;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.tf-voice__list li .vbg--foot {
width: 100%;
height: auto;
left: 50%;
bottom: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.tf-about-ichigosan {
margin: 55px auto 0;
}
@media (min-width: 769px) {
.tf-about-ichigosan {
margin: 75px auto 0;
}
}
.tf-about-ichigosan .tf--nav {
bottom: 42px;
width: 100%;
position: absolute;
z-index: 10;
}
@media (min-width: 769px) {
.tf-about-ichigosan .tf--nav {
max-width: 1052px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.tf-about-ichigosan .tf--nav a {
margin: 0 0 0 auto;
}
}
.tf-archive {
margin: 40px auto 0;
}
@media (min-width: 769px) {
.tf-archive {
max-width: 1052px;
margin: 75px auto 114px;
}
}
.tf-archive menu {
list-style: none;
padding: 0;
margin: auto;
}
@media (min-width: 769px) {
.tf-archive menu {
margin-top: 45px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
gap: 28px;
}
}
.tf-archive menu li {
margin-bottom: 15px;
}
.tf-archive menu li:last-child {
margin-bottom: 0;
}
.tf-info {
background: #fff;
padding: 36px 20px;
}
.tf-info__txt {
text-align: center;
letter-spacing: 0.1em;
font-family: "Noto Serif JP", serif;
}
@media (min-width: 769px) {
.tf-info__txt {
margin: 30px 0 0;
font-size: 0.9375rem;
}
.tf-info__txt br.sp {
display: none;
}
}
.tf-info__txt a {
text-decoration: underline;
}
@media (min-width: 769px) {
.tf-btn--t01 {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
cursor: pointer;
}
.tf-btn--t01:hover {
opacity: 0.7;
}
.tf-btn--t01.op1:hover {
opacity: 1;
cursor: default;
}
}
/*=======================================
アフターレポート
=======================================*/
#content .sandou.ar .kv {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: calc(112.5vw - 50px);
margin-top: 50px;
}
@media screen and (min-width: 769px) {
#content .sandou.ar .kv {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 74vw;
/* height: 500px;*/
/*margin-top:100px;*/
margin-top: 50px;
}
}
@media screen and (min-width: 1080px) {
#content .sandou.ar .kv {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 66vw;
/*height: 52vw;*/
/*height: 700px;*/
margin-top: 100px;
}
}
.after-report {
background: #d60b28;
padding: 0px 0px 80px;
}
.after-report a {
display: block;
margin: auto;
max-width: 900px;
width: 100%;
}
.ar .inner {
max-width: 1260px;
padding: 0 20px;
/*max-width: 990px;*/
width: 100%;
margin: auto;
}
.ar .inner p {
color: #505050;
font-size: 14px;
margin-bottom: 0px;
}
h2.af-main-midashi {
background: #da011e;
color: #fff;
text-align: center;
font-size: 31px;
padding: 60px 0;
margin: auto auto 40px !important;
}
.ar-content01 {
/* padding:70px 0 0px;*/
padding: 0px 0 0px !important;
overflow: hidden;
}
@media (max-width: 767px) {
.ar-content01 {
/* padding:70px 0 0px;*/
padding: 0px 0 0px !important;
overflow: hidden;
}
}
.ar-content01 h2 {
background-repeat: no-repeat;
background-size: cover;
background-position: center bottom;
background-image: url("../img/sandou/2024/main_bg_0101@2x.jpg");
}
@media (max-width: 767px) {
.ar-content01 h2 {
background-image: url("../img/sandou/2024/main_bg_0101_sp.jpg");
}
}
/* .ar-content01 h2 {
margin: 0 auto 60px !important;
font-size: 31px;
color: #da011e;
}*/
.ar-content01 p {
font-size: 18px;
}
.ar-content02 {
padding: 40px 0 0px;
}
.ar-content02 h2 {
margin: 0 auto 28px !important;
font-size: 28px;
color: #da011e;
text-align: center;
font-weight: 500;
line-height: 1.6;
}
.ar-content02 .col2-wrap {
margin-bottom: 70px;
}
.ar-content02 .col2-wrap:last-child {
margin-bottom: 0px;
}
.ar-content03 {
padding: 70px 0 0px;
}
.ar-content03 h2 {
margin: 0 auto 28px !important;
font-size: 28px;
color: #da011e;
text-align: center;
font-weight: 500;
line-height: 1.6;
}
.ar-content04 {
padding: 70px 0 0px;
}
.ar-content04 h2 {
margin: 0 auto 28px !important;
font-size: 28px;
color: #da011e;
text-align: center;
font-weight: 500;
line-height: 1.6;
}
.ar-content05 {
padding: 70px 0 70px;
}
.ar-content05 h2 {
margin: 0 auto 28px !important;
font-size: 28px;
color: #da011e;
text-align: center;
font-weight: 500;
line-height: 1.6;
}
.ar-content06 {
padding: 40px 0 0px;
}
.ar-content06 a {
display: block;
margin: auto;
max-width: 367px;
width: 80%;
}
.ar-content06 h2 {
margin: 0 auto 28px !important;
font-size: 28px;
color: #da011e;
text-align: center;
font-weight: 500;
line-height: 1.6;
}
.ar-content06 .col2-wrap {
margin-bottom: 70px;
}
.ar-content06 .col2-wrap:last-child {
margin-bottom: 0px;
}
.ar-content07 {
padding: 45px 0 65px;
}
.ar-content07 p {
color: #fff !important;
font-size: 18px !important;
margin-bottom: 30px;
}
.ar-content07 a {
display: block;
margin: auto;
max-width: 393px;
width: 90%;
}
.ar-content07 .icon--menu {
background-image: url("../img/sandou/2024/icon--menu.svg");
}
.ar-content07 .tf-btn--t01 {
border: solid 1px #ff0000;
color: #ff0000;
}
.ar .tf-about-ichigosan {
margin: 0px auto 0;
}
.ar .tf-about-ichigosan .tf--nav a {
margin: 0 auto;
}
#archive-bg {
background-repeat: no-repeat;
background-size: cover;
background-position: center bottom;
background-image: url("../img/sandou/2024/main_bg_0101@2x.jpg");
padding: 40px 0 0;
}
#archive-bg .tf-archive {
margin: 0 auto;
}
@media (min-width: 769px) {
#archive-bg {
padding: 75px 0 114px;
}
#archive-bg .tf-archive {
margin: 0 auto;
}
}
@media (max-width: 767px) {
#archive-bg {
background-image: url("../img/sandou/2024/main_bg_0101_sp.jpg");
}
}
.col2-wrap {
display: flex;
justify-content: space-between;
}
.col2-wrap .col2 {
width: 47%;
}
.sp-only {
display: none;
}
.event-time-close {
position: absolute;
width: 100%;
max-width: 90px;
right: 0%;
bottom: 4%;
}
@media (max-width: 767px) {
.after-report {
background: #d60b28;
padding: 0px 20px 40px;
}
.ar .inner {
padding: 0 20px;
}
.ar .inner p {
font-size: 14px;
margin-bottom: 0px;
}
.ar-content01,
.ar-content02,
.ar-content03,
.ar-content04 {
padding: 40px 0 0px;
}
.ar-content05 {
padding: 40px 0 0px;
}
.ar-content06 {
padding: 30px 0 0px;
}
.ar-content07 {
padding: 0px 0 35px;
}
.ar-content01 h2 {
text-align: center;
}
.ar-content01 h2,
.ar-content02 h2,
.ar-content03 h2,
.ar-content04 h2,
.ar-content05 h2,
.ar-content06 h2 {
font-size: 16px;
/*margin: 0 auto 30px !important;*/
margin: 0.5em auto 28px !important;
text-align: center;
}
.ar-content06 p {
font-size: 16px !important;
margin-bottom: 30px;
}
.col2-wrap {
flex-direction: column;
}
.col2-wrap .col2 {
width: 100%;
}
.col2-wrap .col2:first-child {
margin-bottom: 20px;
}
.ar-content02 .col2-wrap,
.ar-content06 .col2-wrap {
margin-bottom: 30px;
}
h2.af-main-midashi {
padding: 20px 0;
font-size: 15px;
margin: 0 auto 1em !important;
}
.event-time-close {
max-width: 80px;
right: 3%;
bottom: 0%;
}
.sp-only {
display: block;
}
}
.splide__container {
box-sizing: border-box;
position: relative;
}
.splide__list {
backface-visibility: hidden;
display: -ms-flexbox;
display: flex;
height: 100%;
margin: 0 !important;
padding: 0 !important;
}
.splide.is-initialized:not(.is-active) .splide__list {
display: block;
}
.splide__pagination {
-ms-flex-align: center;
align-items: center;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: center;
justify-content: center;
margin: 0;
pointer-events: none;
}
.splide__pagination li {
display: inline-block;
line-height: 1;
list-style-type: none;
margin: 0;
pointer-events: auto;
}
.splide:not(.is-overflow) .splide__pagination {
display: none;
}
.splide__progress__bar {
width: 0;
}
.splide {
position: relative;
visibility: hidden;
}
.splide.is-initialized,
.splide.is-rendered {
visibility: visible;
}
.splide__slide {
backface-visibility: hidden;
box-sizing: border-box;
-ms-flex-negative: 0;
flex-shrink: 0;
list-style-type: none !important;
margin: 0;
position: relative;
}
.splide__slide img {
vertical-align: bottom;
}
.splide__spinner {
animation: splide-loading 1s linear infinite;
border: 2px solid #999;
border-left-color: transparent;
border-radius: 50%;
bottom: 0;
contain: strict;
display: inline-block;
height: 20px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 20px;
}
.splide__sr {
clip: rect(0 0 0 0);
border: 0;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.splide__toggle.is-active .splide__toggle__play,
.splide__toggle__pause {
display: none;
}
.splide__toggle.is-active .splide__toggle__pause {
display: inline;
}
.splide__track {
overflow: hidden;
position: relative;
z-index: 0;
}
@keyframes splide-loading {
0% {
transform: rotate(0);
}
to {
transform: rotate(1turn);
}
}
.splide__track--draggable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.splide__track--fade > .splide__list > .splide__slide {
margin: 0 !important;
opacity: 0;
z-index: 0;
}
.splide__track--fade > .splide__list > .splide__slide.is-active {
opacity: 1;
z-index: 1;
}
.splide--rtl {
direction: rtl;
}
.splide__track--ttb > .splide__list {
display: block;
}
.splide__arrow {
-ms-flex-align: center;
align-items: center;
background: #ccc;
border: 0;
border-radius: 50%;
cursor: pointer;
display: -ms-flexbox;
display: flex;
height: 2em;
-ms-flex-pack: center;
justify-content: center;
opacity: 0.7;
padding: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 2em;
z-index: 1;
}
.splide__arrow svg {
fill: #000;
height: 1.2em;
width: 1.2em;
}
.splide__arrow:hover:not(:disabled) {
opacity: 0.9;
}
.splide__arrow:disabled {
opacity: 0.3;
}
.splide__arrow:focus-visible {
outline: 3px solid #0bf;
outline-offset: 3px;
}
.splide__arrow--prev {
left: 1em;
}
.splide__arrow--prev svg {
transform: scaleX(-1);
}
.splide__arrow--next {
right: 1em;
}
.splide.is-focus-in .splide__arrow:focus {
outline: 3px solid #0bf;
outline-offset: 3px;
}
.splide__pagination {
bottom: 0.5em;
left: 0;
padding: 0 1em;
position: absolute;
right: 0;
z-index: 1;
}
.splide__pagination__page {
background: #ccc;
border: 0;
border-radius: 50%;
display: inline-block;
height: 8px;
margin: 3px;
opacity: 0.7;
padding: 0;
position: relative;
transition: transform 0.2s linear;
width: 8px;
}
.splide__pagination__page.is-active {
background: #fff;
transform: scale(1.4);
z-index: 1;
}
.splide__pagination__page:hover {
cursor: pointer;
opacity: 0.9;
}
.splide__pagination__page:focus-visible {
outline: 3px solid #0bf;
outline-offset: 3px;
}
.splide.is-focus-in .splide__pagination__page:focus {
outline: 3px solid #0bf;
outline-offset: 3px;
}
.splide__progress__bar {
background: #ccc;
height: 3px;
}
.splide__slide {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.splide__slide:focus {
outline: 0;
}
@supports (outline-offset: -3px) {
.splide__slide:focus-visible {
outline: 3px solid #0bf;
outline-offset: -3px;
}
}
@media screen and (-ms-high-contrast: none) {
.splide__slide:focus-visible {
border: 3px solid #0bf;
}
}
@supports (outline-offset: -3px) {
.splide.is-focus-in .splide__slide:focus {
outline: 3px solid #0bf;
outline-offset: -3px;
}
}
@media screen and (-ms-high-contrast: none) {
.splide.is-focus-in .splide__slide:focus {
border: 3px solid #0bf;
}
.splide.is-focus-in .splide__track > .splide__list > .splide__slide:focus {
border-color: #0bf;
}
}
.splide__toggle {
cursor: pointer;
}
.splide__toggle:focus-visible {
outline: 3px solid #0bf;
outline-offset: 3px;
}
.splide.is-focus-in .splide__toggle:focus {
outline: 3px solid #0bf;
outline-offset: 3px;
}
.splide__track--nav > .splide__list > .splide__slide {
border: 3px solid transparent;
cursor: pointer;
}
.splide__track--nav > .splide__list > .splide__slide.is-active {
border: 3px solid #000;
}
.splide__arrows--rtl .splide__arrow--prev {
left: auto;
right: 1em;
}
.splide__arrows--rtl .splide__arrow--prev svg {
transform: scaleX(1);
}
.splide__arrows--rtl .splide__arrow--next {
left: 1em;
right: auto;
}
.splide__arrows--rtl .splide__arrow--next svg {
transform: scaleX(-1);
}
.splide__arrows--ttb .splide__arrow {
left: 50%;
transform: translate(-50%);
}
.splide__arrows--ttb .splide__arrow--prev {
top: 1em;
}
.splide__arrows--ttb .splide__arrow--prev svg {
transform: rotate(-90deg);
}
.splide__arrows--ttb .splide__arrow--next {
bottom: 1em;
top: auto;
}
.splide__arrows--ttb .splide__arrow--next svg {
transform: rotate(90deg);
}
.splide__pagination--ttb {
bottom: 0;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
left: auto;
padding: 1em 0;
right: 0.5em;
top: 0;
}
a.berusaga {
display: block;
max-width: 300px;
text-align: center;
margin: auto auto 50px;
}
.berusaga2 {
display: block;
text-align: center;
margin-bottom: 50px;
max-width: 300px;
z-index: 1;
margin: 30px auto auto;
cursor: pointer;
}
.berusaga2:hover {
opacity: 0.7;
transition: 0.3s;
}
@media (max-width: 767px) {
a.berusaga {
margin-bottom: 30px;
}
}