/* CSS コード */
/* =========================
リセット・共通
========================= */
*,
*::before,
*::after {
box-sizing: border-box;
}
#content {
font-size: 100%;
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
"Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
background-color: #ffffff;
color: #111111;
line-height: 1.6;
}
#main-content img {
max-width: 100%;
height: auto;
display: block;
}
#main-content a {
text-decoration: none;
}
#main-content {
width: 100%;
}
/* =========================
ヘッダー
========================= */
.page-header {
border-bottom: 1px solid #cfcfcf;
}
.page-header__inner {
max-width: 768px;
margin: 0 auto;
padding: 1rem 1rem;
}
.page-header__title {
margin: 0;
font-size: 1.5rem;
line-height: 1.2;
font-weight: 700;
letter-spacing: 0.02em;
}
/* =========================
セクション共通
========================= */
.store-page {
max-width: 768px;
margin: 0 auto;
padding: 2rem 1rem 3rem;
}
.store-section + .store-section {
margin-top: 9rem;
}
.store-section__title {
margin: 0 0 1rem;
padding-bottom: 0.5rem;
border-bottom: 0.125rem solid #cfcfcf;
font-size: 2.3rem;
line-height: 1.3;
font-weight: 700;
}
.store-section__inner {
width: 100%;
}
.store-section__notes {
margin: 1.5rem 2rem 0;
color: #666666;
font-size: 1.4rem;
line-height: 1.7;
}
/* =========================
通知カード
========================= */
.notice-card {
border-radius: 1rem;
padding: 3rem 1rem;
box-shadow:  0 0.25rem 1rem rgba(0, 0, 0, 0.06);
text-align: center;
margin: 3rem 1rem 0;
}
.notice-card--pink {
background: url("/excludes/ozio/guide/shop/img/common/bg.jpg");
}
.notice-card__lead {
margin: 0 0 0.5rem;
font-size: 2.1rem;
line-height: 1.25;
font-weight: 700;
letter-spacing: 0.02em;
}
.notice-card__text {
margin: 0;
font-size: 1.6rem;
line-height: 1.7;
font-weight: 600;
}
.notice-card__text--strong {
margin-top: 1rem;
font-weight: 700;
color: #111111;
}
.notice-card__logo {
margin: 0 auto;
object-fit: contain;
}
/* =========================
オンラインストアのロゴ一覧
========================= */
.store-links {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem 2rem;
align-items: center;
margin-top: 3rem;
}
.store-links__item {
display: flex;
align-items: center;
justify-content: center;
min-height: 3.5rem;
padding: 0.5rem;
}
.store-links__item img {
width: auto;
max-height: 3rem;
object-fit: contain;
}
/* =========================
戻るボタン
========================= */
.page-footer-nav {
display: flex;
justify-content: center;
padding: 5rem 1rem 4rem;
}
.back-button {
display: inline-flex;
align-items: center;
gap: 1.5rem;
min-width: min(100%, 30rem);
justify-content: center;
padding: 2rem 0rem;
background-color: #6f6f6f;
color: #ffffff;
font-size: 1.6rem;
font-weight: 700;
line-height: 1;
text-decoration: none;
}
.back-button__icon {
display: flex;
align-items: center;
justify-content: center;
width: 1rem;     /* アイコンのサイズをここで調整 */
height: 1rem;
flex-shrink: 0;
}
.back-button__icon img {
width: 100%;
height: 100%;
display: block;
}
.back-button__text {
color: #fff;
}
/* =========================
●PC
========================= */
@media screen and (min-width: 768px){
.page-header__inner {
padding: 1.5rem 2rem;
}
.page-header__title {
font-size: 1.875rem;
}
.store-page {
padding: 3rem 2rem 5rem;
}
.store-section__title {
font-size: 2.8rem;
}
.notice-card {
padding: 5rem 2rem;
}
.notice-card__lead {
font-size: 2.5rem;
}
.notice-card__text {
font-size: 1.6rem;
}
.store-links {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2rem;
}
.store-section__notes {
margin: 1.5rem 0 0;
color: #666666;
font-size: 1.4rem;
line-height: 1.7;
}
.notice-card {
border-radius: 1rem;
padding: 3rem 1rem;
box-shadow:  0 0.25rem 1rem rgba(0, 0, 0, 0.06);
text-align: center;
margin: auto;
}
.store-section__title {
margin: 0 0 2rem;
padding-bottom: 0.5rem;
border-bottom: 0.125rem solid #cfcfcf;
font-size: 2.3rem;
line-height: 1.3;
font-weight: 700;
}
.store-section + .store-section {
margin-top: 6rem;
}
.back-button {
display: inline-flex;
align-items: center;
gap: 1.5rem;
width: 400px;
justify-content: center;
padding: 2.1rem 0rem;
background-color: #6f6f6f;
color: #ffffff;
font-size: 1.6rem;
font-weight: 700;
line-height: 1;
text-decoration: none;
}
}