@charset "UTF-8";
#cafeContainer {
width: 100%;
}
#cafeContainer p,
#cafeContainer dl,#cafeContainer ul {
margin: 0;
}
#cafeContainer .cafeConTtlWrapOuter {
padding: 0 2.5rem;
}
#cafeContainer .cafeConTtlWrap {
margin: 0 auto 4.5rem;
max-width: 1280px;
}
#cafeContainer .cafeConTtlWrap .ttl {
margin: 0 0 2rem;
}

@media screen and (max-width: 440px) {
#cafeContainer .cafeConTtlWrapOuter {
padding: 0 20px;
}
}

/*------------------------------------- */

#cafeContainer .cafeItemWrapAOuter {
padding: 0 2.5rem;
}
#cafeContainer .cafeItemWrapA {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1280px;
margin: 0 auto 10rem;
}
#cafeContainer .cafeItemWrapA .imgBlock {
position: relative;
width: 50%;
}
#cafeContainer .cafeItemWrapA .imgBlock .pic {
width: 128px;
position: absolute;
left: -3rem;
bottom: -3rem;
}
#cafeContainer .cafeItemWrapA .imgBlock .img {
aspect-ratio: 1 / 1.414;
overflow: hidden;
}
#cafeContainer .cafeItemWrapA .imgBlock .img img {
width: 100%;
height: 100%;
object-fit: cover;
}
#cafeContainer .cafeItemWrapA .txtBlock {
padding: 0rem 2.5rem;
width: 50%;
}
#cafeContainer .cafeItemWrapA .txtBlock .name {
font-weight: normal;
writing-mode: vertical-rl;
font-size: 2rem;
margin: 0 auto;
letter-spacing: 0.3rem;
}
#cafeContainer .cafeItemWrapA .txtBlock .txt {
width: 80%;
margin: 4.5rem auto;
}
#cafeContainer .cafeItemWrapA .txtBlock .price dl {
display: flex;
justify-content: center;
font-weight: 700;
}
#cafeContainer .cafeItemWrapA .txtBlock .price dl dt {
width: 12rem;
}
#cafeContainer .cafeItemWrapA .txtBlock .price dl dd span {
font-size: 0.75rem;
}

@media screen and (max-width: 1024px) {
#cafeContainer .cafeItemWrapA .txtBlock {
padding: 0rem 0 0 2.5rem;
}
#cafeContainer .cafeItemWrapA .txtBlock .name {
writing-mode: horizontal-tb;
}
#cafeContainer .cafeItemWrapA .txtBlock .txt {
width: 100%;
margin: 1.5rem auto 3rem;
}
#cafeContainer .cafeItemWrapA .txtBlock .price dl {
justify-content: flex-start;
}
}

@media screen and (max-width: 768px) {
#cafeContainer .cafeItemWrapA {
position: relative;
flex-direction: column;
margin: 0 auto 4.5rem;
}
#cafeContainer .cafeItemWrapA .imgBlock {
width: 100%;
}
#cafeContainer .cafeItemWrapA .imgBlock .img {
aspect-ratio: 1 / 1;
}
#cafeContainer .cafeItemWrapA .txtBlock {
width: 100%;
padding: 0;
}
#cafeContainer .cafeItemWrapA .txtBlock .name {
writing-mode: vertical-rl;
background: #fff;
padding: 1rem 0 1.75rem 0.5rem;
position: absolute;
top: 0;
right: 0;
}
#cafeContainer .cafeItemWrapA .txtBlock .txt {
margin: 4.5rem auto 1.5rem;
}
}
@media screen and (max-width: 440px) {
#cafeContainer .cafeItemWrapAOuter {
padding: 0 20px;
}
#cafeContainer .cafeItemWrapA .imgBlock .pic {
left: -2rem;
}
#cafeContainer .cafeItemWrapA .imgBlock .img {
aspect-ratio: 1 / 1.414;
overflow: hidden;
}
#cafeContainer .cafeItemWrapA .txtBlock .name {
font-size: 1.5rem;
}
}

/*------------------------------------- */
#cafeContainer .cafeItemWrapBOuter {
padding: 0 2.5rem;
overflow-x: hidden;
}
#cafeContainer .cafeItemWrapB {
max-width: 1280px;
margin: 2rem auto 7.5rem;
}
#cafeContainer .cafeItemWrapBInner {
background:#F5E6DF;
margin-right: calc(50% - 50vw);
padding-right: calc(50vw - 50%);
display: flex;
}
#cafeContainer .cafeItemWrapB .txtBlock {
padding: 4.5rem 7.75rem 4.5rem 5rem;
}
#cafeContainer .cafeItemWrapB .txtBlock .name {
font-size: 2.0rem;
letter-spacing: 0.1rem;
font-weight: normal;
}
#cafeContainer .cafeItemWrapB .txtBlock .txt {
margin: 2rem 0 3rem;
}
#cafeContainer .cafeItemWrapB .txtBlock .price {
display: flex;
gap: 1rem;
font-weight: 700;
}
#cafeContainer .cafeItemWrapB .txtBlock .price dd span {
font-size: 0.75rem;
}
#cafeContainer .cafeItemWrapB .imgBlock {
margin: -2rem 0;
aspect-ratio: 1 / 1.414;
overflow: hidden;
}
#cafeContainer .cafeItemWrapB .imgBlock img {
width: 100%;
height: 100%;
object-fit: cover;
}

@media screen and (max-width: 1024px) {
#cafeContainer .cafeItemWrapB .txtBlock {
padding: 4.5rem 2.5rem 4.5rem 2.5rem;
}
}

@media screen and (max-width: 768px) {
#cafeContainer .cafeItemWrapBOuter {
padding: 0 0;
}
#cafeContainer .cafeItemWrapBInner {
flex-direction: column-reverse;
margin: 0;
padding: 0;
}
#cafeContainer .cafeItemWrapB .imgBlock {
margin: -2rem 0 0;
aspect-ratio: 1 / 1;
padding: 0 2.5rem;
}
#cafeContainer .cafeItemWrapB .txtBlock {
padding: 2rem 2.5rem 4.5rem 2.5rem;
}
}

@media screen and (max-width: 440px) {
#cafeContainer .cafeItemWrapB {
margin: 2rem 0 6rem;
}
#cafeContainer .cafeItemWrapB .imgBlock {
aspect-ratio: 1 / 1.414;
padding: 0 20px;
}
#cafeContainer .cafeItemWrapB .txtBlock {
padding: 2rem 20px 3rem;
}
#cafeContainer .cafeItemWrapB .txtBlock .name {
font-size: 1.5rem;
}
#cafeContainer .cafeItemWrapB .txtBlock .txt {
margin: 1.25rem 0 2rem;
}
}

/*------------------------------------- */
#cafeContainer .cafeItemWrapCOuter {
padding: 0 2.5rem;
overflow-x: hidden;
}
#cafeContainer .cafeItemWrapC {
max-width: 1280px;
margin: 2rem auto 12.5rem;
}
#cafeContainer .cafeItemWrapCInner {
background:#F5E6DF;
margin-left: calc(50% - 50vw);
padding-left: calc(50vw - 50%);
display: flex;
}
#cafeContainer .cafeItemWrapC .imgBlock {
margin: -2rem 0;
aspect-ratio: 1 / 1.414;
overflow: hidden;
}
#cafeContainer .cafeItemWrapC .imgBlock img {
width: 100%;
height: 100%;
object-fit: cover;
}
#cafeContainer .cafeItemWrapC .txtBlock {
padding: 4.5rem 5rem 4.5rem 7.75rem;
}
#cafeContainer .cafeItemWrapC .txtBlock .name {
font-size: 2.0rem;
letter-spacing: 0.1rem;
font-weight: normal;
}
#cafeContainer .cafeItemWrapC .txtBlock .txt {
margin: 2rem 0 3rem;
}

@media screen and (max-width: 1024px) {
#cafeContainer .cafeItemWrapC .txtBlock {
padding: 4.5rem 2.5rem 4.5rem 2.5rem;
}
}

@media screen and (max-width: 768px) {
#cafeContainer .cafeItemWrapCOuter {
padding: 0 0;
}
#cafeContainer .cafeItemWrapC {
margin: 2rem auto 6rem;
}
#cafeContainer .cafeItemWrapCInner {
flex-direction: column;
margin: 0;
padding: 0;
}
#cafeContainer .cafeItemWrapC .imgBlock {
margin: -2rem 0 0;
aspect-ratio: 1 / 1;
padding: 0 2.5rem;
}
#cafeContainer .cafeItemWrapC .txtBlock {
padding: 2rem 2.5rem 4.5rem 2.5rem;
}
}

@media screen and (max-width: 440px) {
#cafeContainer .cafeItemWrapC .imgBlock {
aspect-ratio: 1 / 1.414;
padding: 0 20px;
}
#cafeContainer .cafeItemWrapC .txtBlock {
padding: 2rem 20px 3rem;
}
#cafeContainer .cafeItemWrapC .txtBlock .name {
font-size: 1.5rem;
}
#cafeContainer .cafeItemWrapC .txtBlock .txt {
margin: 1.25rem 0 2rem;
}
}

/*------------------------------------- */

#cafeContainer .cafeDrinkWrapOuter {
padding: 0 2.5rem;
}
#cafeContainer .cafeDrinkWrap {
max-width: 1280px;
background: #F9F5F4;
display: flex;
margin: 0 auto 10rem;
}
#cafeContainer .cafeDrinkWrap .txtBlock {
width: calc((100% / 8) * 5);
padding: 3rem;
}
#cafeContainer .cafeDrinkWrap .txtBlock .ttl {
font-weight: normal;
font-size: 2.0rem;
}
#cafeContainer .cafeDrinkWrap .txtBlock .menuList {
margin: 1.5rem 0 2rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.25rem;
}
#cafeContainer .cafeDrinkWrap .txtBlock .menuList li {
width: 32%;
}
#cafeContainer .cafeDrinkWrap .txtBlock .menuList li::before {
content: "・";
}
#cafeContainer .cafeDrinkWrap .txtBlock .menuList li:nth-child(1) {
order: 1;
}
#cafeContainer .cafeDrinkWrap .txtBlock .menuList li:nth-child(2) {
order: 4;
}
#cafeContainer .cafeDrinkWrap .txtBlock .menuList li:nth-child(3) {
order: 2;
}
#cafeContainer .cafeDrinkWrap .txtBlock .menuList li:nth-child(4) {
order: 5;
}
#cafeContainer .cafeDrinkWrap .txtBlock .menuList li:nth-child(5) {
order: 3;
}
#cafeContainer .cafeDrinkWrap .txtBlock .menuList li:nth-child(6) {
order: 6;
}
#cafeContainer .cafeDrinkWrap .imgBlock {
width: calc((100% / 8) * 3);
aspect-ratio: 4 / 3;
object-fit: cover;
overflow: hidden;
}
#cafeContainer .cafeDrinkWrap .imgBlock img {
width: 100%;
height: 100%;
object-fit: cover;
}

@media screen and (max-width: 1024px) {
#cafeContainer .cafeDrinkWrap .txtBlock .menuList li {
width: 48%;
}
#cafeContainer .cafeDrinkWrap .txtBlock .menuList li:nth-child(1),
#cafeContainer .cafeDrinkWrap .txtBlock .menuList li:nth-child(2),
#cafeContainer .cafeDrinkWrap .txtBlock .menuList li:nth-child(3),
#cafeContainer .cafeDrinkWrap .txtBlock .menuList li:nth-child(4),
#cafeContainer .cafeDrinkWrap .txtBlock .menuList li:nth-child(5),
#cafeContainer .cafeDrinkWrap .txtBlock .menuList li:nth-child(6) {
order: 0;
}
}

@media screen and (max-width: 768px) {
#cafeContainer .cafeDrinkWrap {
flex-direction: column;
margin: 0 auto 4.5rem;
}
#cafeContainer .cafeDrinkWrap .txtBlock {
width: 100%;
padding: 2rem;
}
#cafeContainer .cafeDrinkWrap .imgBlock {
width: 100%;
aspect-ratio: 16 / 9;
}
}

@media screen and (max-width: 440px) {
#cafeContainer .cafeDrinkWrapOuter {
padding: 0 20px;
}
#cafeContainer .cafeDrinkWrap .txtBlock {
padding: 1.5rem;
}
#cafeContainer .cafeDrinkWrap .txtBlock .ttl {
font-size: 1.5rem;
}
#cafeContainer .cafeDrinkWrap .txtBlock .menuList {
margin: 1rem 0;
}
#cafeContainer .cafeDrinkWrap .txtBlock .menuList li {
width: 100%;
}
}

/* 店舗一覧 --------------------------------------------------------------------- */
#cafeContainer #storeListArea {
padding:0 2.5rem;
}
#cafeContainer #storeListAreaInner {
max-width: 1280px;
margin: 0 auto 12.5rem;
}
@media screen and (max-width: 768px) {
#cafeContainer #storeListAreaInner {
margin: 0 auto 7.5rem;
}
}
@media screen and (max-width: 440px) {
#cafeContainer #storeListArea {
padding:0 20px;
}
}


/* ------------------------- */
#cafeContainer #listNav {
margin: 3rem 0 0 0;
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.5rem;
}
#cafeContainer #listNav .listTtl {
color: #D0010E;
font-size: 0.875rem;
font-weight: normal;
font-family: "Zen Kaku Gothic New", YuGothic,'Yu Gothic', "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
#cafeContainer #listNav .listNavWrap ul {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
#cafeContainer #listNav .listNavWrap ul li button {
display: block;
background: #fff;
font-size: 0.875rem;
line-height: 1.0;
padding: 0.5rem 1rem;
border: 1px solid #D0010E;
border-radius: 1rem;
color: #D0010E;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
#cafeContainer #listNav .listNavWrap ul li button.ac {
background: #FFEEEF;
font-weight: 700;
outline: 1px solid #D0010E;
}
#cafeContainer #listNav .listNavWrap ul li .icon {
fill: #D0010E;
width: 1rem;
height: 1rem;
}
@media (hover: hover) {
#cafeContainer #listNav .listNavWrap ul li button:hover {
background: #D0010E;
color: #fff;
transition: .3s ease-out;
}
#cafeContainer #listNav .listNavWrap ul li button:hover .icon {
fill: #fff;
}
}
/* ------------------------- */
#cafeContainer .storeListWrap {
margin: 4.5rem 0 0 0;
}

#cafeContainer .storeListWrap .store:not(:last-child) {
margin: 0 0 4.5rem 0;
}
#cafeContainer .storeListWrap .store .storeTtlWrap {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
gap:0.5rem 2rem;
margin: 0 0 1.5rem 0;
}
#cafeContainer .storeListWrap .store .storeTtlWrap::before {
width: 0.25rem;
height: 1.5rem;
background: #D0010E;
content: "";
position: absolute;
left: 0;
top: 0.375rem;
}
#cafeContainer .storeListWrap .store .storeTtlWrap .ttl {
font-size: 1.5rem;
padding: 0 0 0 1.25rem;
letter-spacing: 0.1rem;
}
#cafeContainer .storeListWrap .store .storeTtlWrap .icon {
display: flex;
gap: 0.5rem;
}
#cafeContainer .storeListWrap .store .storeTtlWrap .icon li {
font-size: 11px;
font-weight: 700;
text-align: center;
padding: 2px 0.75rem;
border-radius: 2px;
background: #FFEEEF;
border-radius: 0.75rem;
}
#cafeContainer .storeListWrap .store .storeWrap {
display: flex;
gap: 1.5rem 2rem;
}
#cafeContainer .storeListWrap .store .storeWrap .imgBlock {
width: 100%;
max-width: 240px;
margin: 0 auto;
}
#cafeContainer .storeListWrap .store .storeWrap .imgBlock img {
border: 1px solid #ccc;
}
#cafeContainer .storeListWrap .store .storeWrap .txtBlock {
width: 100%;
}
#cafeContainer .storeListWrap .store .storeWrap .txtBlock dl {
display: flex;
margin: 0;
gap:0rem 1rem;
justify-content: space-between;
width: 100%;
}
#cafeContainer .storeListWrap .store .storeWrap .txtBlock dl:not(:last-child) {
margin: 0 0 0.5rem 0;
}
#cafeContainer .storeListWrap .store .storeWrap .txtBlock dl dt {
font-weight: 700;
font-size: 0.875rem;
}
#cafeContainer .storeListWrap .store .storeWrap .txtBlock dl dd {
width: calc(100% - 5rem);
}
#cafeContainer .storeListWrap .store .storeWrap .txtBlock dl dd span {
padding: 0 0 0 0.75rem;
}
#cafeContainer .storeListWrap .store .storeWrap .txtBlock dl dd a {
text-decoration: none;
color: #472427;
}
#cafeContainer .storeListWrap .store .storeWrap .txtBlock dl dd .gmap a,
#cafeContainer .storeListWrap .store .storeWrap .txtBlock dl:last-child dd a {
text-decoration: underline;
color: #D0010E;
}
#cafeContainer .storeListWrap .store .storeWrap .txtBlock dl dd a:hover {
text-decoration: none;
transition: .3s ease-out;
}
@media screen and (max-width: 768px) {
#cafeContainer .storeListWrap .store .storeWrap {
flex-direction: column;
}
}
@media screen and (max-width: 440px) {
#cafeContainer .storeListWrap .store .storeWrap .txtBlock dl {
flex-wrap: wrap;
}
#cafeContainer .storeListWrap .store .storeWrap .txtBlock dl dd {
width: 100%;
}
}

/* ------------------------- */

#cafeContainer .shopListWrap {
margin: 4.5rem 0 0 0;
display: flex;
gap: 3rem;
flex-wrap: wrap;
}
#cafeContainer .shopListWrap .shop {
width: calc((100% - 6rem) / 3);
}
#cafeContainer .shopListWrap .shop .shopTtlWrap {
background: #FFEEEF;
border-radius: 4px 4px 0 0;
padding: 0.5rem 1rem;
}
#cafeContainer .shopListWrap .shop .shopTtlWrap .ttl {
font-size: 1.0rem;
}
#cafeContainer .shopListWrap .shop .shopAddWrap {
padding: 1rem;
}
#cafeContainer .shopListWrap .shop .shopAddWrap dl {
margin: 0 0 0.5rem 0;
}
#cafeContainer .shopListWrap .shop .shopAddWrap dl dt {
font-weight: 700;
font-size: 0.75rem;
}
#cafeContainer .shopListWrap .shop .shopAddWrap dl dd a {
text-decoration: none;
color: #472427;
}
@media screen and (max-width: 1280px) {
#cafeContainer .shopListWrap .shop {
width: calc((100% - 3rem) / 2);
}
}
@media screen and (max-width: 768px) {
#cafeContainer .shopListWrap {
gap: 2rem;
}
#cafeContainer .shopListWrap .shop {
width: 100%;
}
}
@media screen and (max-width: 440px) {
#cafeContainer .shopListWrap .shop .shopAddWrap {
padding: 1rem 0 0 1rem;
}
}