@charset "UTF-8";

/* ==================================== */
/* ベース・共通レイアウト (Base & Common) */
/* ==================================== */
.l-contentWrap__center .l-container__type6 {
max-width: 850px;
margin: 0 auto;
padding: 100px 0 0;
}

.c-heading {
padding-top: 32px;
text-align: left !important;	
margin-bottom: 50px !important;
}

.l-contentWrap__center .c-collapsible-title {
margin-bottom: 0px !important;
}

.c-collapsible-text a {
text-decoration: none !important;
}


/* ==================================== */
/* 既存ページ（productList）共通メニュー指定 */
/* ==================================== */
.p-shopList__menu {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: 0 0 40px 0;
padding: 0;
max-width: 100%;
}

.p-shopList__menu-item {
width: calc(50% - 5px);
background-color: #d4d4d4;
color: #8f8f8f;
border: none;
padding: 5px;
text-align: center;
font-size: 1rem !important;
cursor: pointer;
transition: background-color 0.2s, color 0.2s;
font-family: Optima, Zen Old Mincho, serif;
}

.p-shopList__menu-item.active {
background-color: var(--color-main);
color: #ffffff !important;
}


/* ==================================== */
/* SHOP LIST 固有レイアウト・アコーディオン */
/* ==================================== */
.p-shopList {
width: 100% !important;
max-width: 850px;
margin: 0 auto 100px;
font-family: sans-serif;
}

/* リスト外枠 */
.p-concept-accordion {
margin-bottom: 50px;
}

.p-concept-accordion__body {
padding: 30px 0 35px 0;
margin: 0;
}

/* ヘッダー */
.p-shopList__brandHeader {
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
padding: 16px 0 !important;
margin: 0;
position: relative;
}

.p-shopList__brandLogo {
max-height: 30px;
width: auto;
}
.p-shopList__brandLogo_matsukiyo {
max-height: 50px;
width: auto;
}
.p-shopList__brandLogo_papasu {
max-height: 50px;
width: auto;
}
.p-shopList__brandLogo_cocokara {
max-height: 50px;
width: auto;
}

/* ==================================== */
/* アコーディオン開閉制御 (Accordion) */
/* ==================================== */
.p-shopList__brandHeader {
cursor: pointer;
/* 右側に矢印アイコンを配置するため余白を確保 */
padding-right: 0px !important; 
}

/* 開閉用の矢印アイコン（下向き） */
.p-shopList__brandHeader::after {
content: "";
position: absolute;
right: 20px;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #2d2d2d;
border-right: 2px solid #2d2d2d;
transform: translateY(-70%) rotate(135deg);
transition: transform 0.3s ease;
}

/* 開いている時の矢印アイコン（上向き） */
.p-shopList__brandHeader.is-open::after {
transform: translateY(-30%) rotate(-45deg);
}

/* アコーディオンの中身（初期状態は閉じておく） */
.p-concept-accordion__body {
display: none; 
}


/* ==================================== */
/* グリッド・表示制御 (Grid & Region) */
/* ==================================== */
/* 地域親ブロック（非表示制御用） */
.p-shopList__regionBlock {
display: contents;
}

.p-shopList__regionBlock.is-hidden {
display: none !important;
}

/* 店舗グリッド（横の隙間のみ設定し、縦隙間は0） */
.p-shopList__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 20px;
row-gap: 0;
margin-top: 10px;
width: 100%;
overflow: hidden;
}


/* ==================================== */
/* 店舗カード (Shop Card) */
/* ==================================== */
.p-shopCard {
padding-top: 30px;
padding-bottom: 30px;
font-family: Yu Gothic Medium, YuGothic, Yu Gothic, Noto Sans JP, sans-serif;
position: relative;
display: flex;
flex-direction: column;
height: 100%;
box-sizing: border-box;
text-align: left;
word-break: break-all;
}

.p-shopCard::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: calc(100% + 20px);
height: 1px;
background-color: #8f8f8f;
}

.p-shopCard.is-hidden {
display: none !important;
}

.p-shopCard__name {
font-size: 13px;
font-weight: bold;
color: #2d2d2d;
margin: 0;
line-height: 1.5;
min-height: 39px;
}

.p-shopCard__address {
font-size: 12px;
line-height: 1.6;
color: #8f8f8f;
margin: 0 0 6px 0;
min-height: 57px;
margin-bottom: auto;
}

.p-shopCard__tel {
font-size: 12px;
color: #8f8f8f;
margin: 0;
padding-top: 0px;
}


/* ==================================== */
/* アニメーション (Animation) */
/* ==================================== */
@keyframes shopCardFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

.p-shopCard.is-fadeIn {
animation: shopCardFadeIn 0.6s ease forwards;
}


/* ==================================== */
/* View Moreボタン ＆ 注意書き */
/* ==================================== */
.p-shopList__more {
text-align: center;
margin-top: 35px;
}

.p-shopList__more.is-hidden {
display: none !important;
}

.p-shopList__moreBtn {
display: inline-flex;
align-items: center;
justify-content: center;
color: #e50012;
font-size: 13px;
font-family: Optima, Zen Old Mincho, serif;
letter-spacing: 0.04em;
text-decoration: none;
transition: opacity 0.3s;
cursor: pointer;
}

.c-button-more .arrow {
position: relative;
display: inline-block;
vertical-align: middle;
width: 26px;
height: 26px;
border: 1px solid var(--color-main);
border-radius: 50%;
transition: all 1s ease;
}

.c-button-more .arrow:before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
border-top: 2px solid var(--color-main);
border-right: 2px solid var(--color-main);
transform: translate(-50%, -65%) rotate(135deg); 
transition: all 1s ease;
}

.c-button-more .arrow:after {
display: none; 
}

/* ホバー時の下移動アニメーション */
@media (hover: hover) {
.c-button-more:hover {
opacity: 1;
}
.c-button-more:hover .arrow {
background-color: var(--color-main);
border: none;
}
.c-button-more:hover .arrow:before {
border-color: #fff;
transform: translate(-50%, -35%) rotate(135deg); 
}
}

.shoplist-notice {
font-family: Yu Gothic Medium, YuGothic, Yu Gothic, Noto Sans JP, sans-serif;
font-size: 11px;
color: #8f8f8f;
margin-top: 60px;
line-height: 1.6;
margin-left: auto;
margin-right: auto;
text-align: center;
}


/* ==================================== */
/* レスポンシブ (SP) */
/* ==================================== */
@media (max-width: 768px) {
.l-container__type6 {
max-width: 100%;
padding: 20px 0 0 !important;
}

.l-contentWrap__center {
padding: 0 min(10%, 60px);
}

.c-heading {
padding-top: 32px;
text-align: left !important;
margin-bottom: 40px !important;
}

.p-shopList__brandLogo_matsukiyo {
max-height: 35px;
width: auto;
}
.p-shopList__brandLogo_papasu {
max-height: 35px;
width: auto;
}
.p-shopList__brandLogo_cocokara {
max-height: 35px;
width: auto;
}

.p-shopList__menu {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: 0 0 10px 0;
padding: 0;
max-width: 100%;
}

.p-shopList__menu-item {
font-size: 3.2vw !important;
padding: 3px;
}

.p-shopList__brandLogo {
max-height: 22px;
width: auto;
}
	
.p-concept-accordion {
margin-bottom: 30px;
}
	
.p-concept-accordion__body {
padding: 20px 0 35px 0;
margin: 0;
}

.p-shopList__grid {
grid-template-columns: repeat(2, 1fr);
column-gap: 20px;
}

.p-shopCard__name {
font-size: 3vw;
}

.p-shopCard__address,
.p-shopCard__tel {
font-size: 2.7vw;
margin-top: 5px;
}

.p-shopList__moreBtn {
font-size: 3.2vw;
}
}