.selectstore-btn {
  background-color: #000;
  color: #ffffff;

  margin:  5px;
  padding: 10px 20px;
  
  border: none;
  
  border-radius: 999px;
  
  cursor: pointer;
}

.ccrprice {
  padding: 40px 0 0;
  text-align: center;
}

/* モーダル全体の初期状態（非表示） */
.c-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
/* 表示状態のクラス */
.c-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}
/* 背景の黒い半透明マスク */
.c-modal__overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}
/* 白いコンテンツボックス */
.c-modal__content {
    position: relative;
    background: #f5f5f5;

    width: 86.2rem;
    padding: 4.1rem 6.3rem 4.1rem 5.3rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    box-sizing: border-box;
}

.m-title {
    height: 2.4rem;
    width: auto;
}

.m-flex {
    display: flex;
    gap: 2.4rem;
    margin: 2rem 0 0;
    flex-wrap: wrap;
}

.m-box {
    flex: 0 0 calc((100% - 4.8rem) / 3);
    border-radius: 1rem;
    padding: 2.6rem 2rem;
    background: #fff;
    text-align: center;
    width: auto;

    flex-grow:   0;
    flex-shrink: 0;
    box-sizing:  border-box;
    min-height:  15rem;
}
a.m-box {
    display: flex;
    flex-direction: column;   /* 文字と画像を縦並びのままにする */
    justify-content: center;  /* 縦方向の中央揃え */
    align-items: center;      /* 横方向の中央揃え */
    min-height:  15rem;
}

.storename{
    margin: 0 0 0 1rem;
    font-size: 1.4rem;
    line-height: 1.5;
    transition: color .3s ease;
}
.m-title img {
    height: 100%;
    width: auto;
    object-fit: contain;
}
.m-box ul {
    list-style: none;
    padding: 0;
    margin: 2.3rem 0 0;
    text-align: left;
}

@media screen and (min-width: 1440px) {
    .c-modal__content {
	width:862px;
	padding: 41px 63px 41px 53px;
    }
    .m-title {
	height: 24px;
    }
    .m-flex {
	gap: 24px;
    }
    .m-box {
	flex: 0 0 calc((100% - 48px) / 3);
	min-height:  150px;
    }
    a.m-box {
	min-height:  150px;
    }
    .storename{
	font-size: 14px;
	margin: 0 0 0 10px;
    }
    .m-box ul {
	margin: 23px 0 0;
    }
}
@media screen and (max-width: 768px) {
    .c-modal__content {
	width:32.4rem;
	max-height: calc(100% - 20px);
	padding: 4.4rem 1.8rem;
	overflow-y: scroll;
    }
    .m-flex {
	gap: 1rem;
    }
    .m-box {
	flex: 0 0 100%;
	padding: 1.8rem 4.2rem;
	min-height:  auto;
    }
    a.m-box {
	min-height:  auto;
    }
    .storename{
	font-size: 1.3rem;
	margin: 0 0 0 1.4rem;
    }
    .m-box ul {
	margin: 1rem 0 0;
    }
}



/* 閉じるボタン */
.c-modal__close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 28px;
    color: #999;
    cursor: pointer;
    width:  1.5rem;
    height: 1.5rem;
}
.c-modal__close:hover { color: #333; }


@media screen and (max-width: 768px) {
    .m-box {

    }
    .m-box img {
	display: block;
	height:1.62rem;
	width: auto;
	margin-left: auto;
	margin-right: auto;
    }
}
		       

.m-box h4 { font-size: 18px; margin: 0 0 15px 0; border-bottom: 1px solid #ddd; padding-bottom: 10px; }

.m-box ul li {
    margin-bottom: 8px;
    font-size: 1.4rem;
}

.m-box ul li a { color: #11181c; text-decoration: none; display: flex; align-items: center;}
.m-box ul li a:hover { color: #2680ff }