@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+P+One&display=swap');

body.page-id-2903 {
background: #f4f0e5 url(../images/rascal/wrapper-bg.webp)repeat;
background-size: 420px auto;
}
#rascal-wrapper {
margin: 0 auto;
width: min(100%, 1280px);
text-align: left;
color: #63371d;
background: url(../images/rascal/bg.webp) repeat-y top left;
background-size: contain;
}
.rascal-mainContents {
margin: 0 auto;
width: min(92%, 1160px);
}
.event-section {
margin: clamp(20px, 3dvh, 60px) auto 0;
padding: clamp(10px, 2dvh, 30px);
background-color: #f9f7f6;
box-shadow: 0px 0px 0px 5px #f9f7f6;
border: dashed 1px rgba(99, 55, 29, .3);
border-radius: 10px;
font-family: "Noto Sans JP", sans-serif;
font-weight: 500;
}
@media screen and (min-width: 897px) {
.event-section {
box-shadow: 0px 0px 0px 7px #f9f7f6;
border: dashed 2px rgba(99, 55, 29, .3);
}
}
.event-section h2 {
padding: .3em 0 .3em .5em;
margin: 0 auto .6em;
font-size: 20px;
font-size: clamp(18px, 3vw, 24px);
font-family: "Mochiy Pop P One", sans-serif;
font-weight: 900;
font-style: normal;
background: #63371d url(../images/rascal/title.webp) no-repeat right center;
background-size: auto 60%;
border-radius: 6px;
color: #f1c157;
}
@media screen and (min-width: 897px) {
.event-section h2 {
background: #63371d url(../images/rascal/title.webp) no-repeat right center;
background-size: auto 80%;
}
}
.event-section h3 {
margin: 0 auto;
font-size: clamp(18px, 3vw, 24px);
-webkit-background-clip: text;
text-shadow: #fff 2px 0, #fff -2px 0, #fff 0 -2px, #fff 0 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px, rgba(0, 0, 0, .5) 3px 3px 3px;
font-weight: 900;
color: #63371d;
}
.event-section .text {
margin: 0 auto;
font-size: clamp(14px, 3vw, 18px);
font-weight: 600;
}
.event-section a {
color: #63371d;
}
.event-section a:hover {
color: #ffde0b;
}
.location {
margin: clamp(20px, 2dvh, 40px) auto 0;
}
.location h4 {
font-size: clamp(20px, 3vw, 24px);
font-weight: 800;
line-height: 1.4;
margin: 0 auto clamp(10px, 1dvh, 20px);
display: grid;
grid-template-columns: auto 1fr;
gap: clamp(3px, .5vw, 5px);
align-items: flex-start;
border-bottom: solid 3px #63371d;
}
.location h4::before {
content: "";
width: clamp(24px, 4vw, 28px);
height: clamp(24px, 4vw, 28px);
background: url('../images/rascal/icon.webp') no-repeat center / contain;
}
.info-table {
display: grid;
grid-template-columns: 80px 1fr;
gap: 0.3rem 1rem;
font-size: clamp(14px, 3vw, 16px);
margin: .5rem 0;
font-weight: 600;
color: #000;
}
.info-table dt {
color: #63371d;
font-weight: 800;
}
.info-table dd {
margin: 0;
}
@media (max-width: 600px) {
.info-table { grid-template-columns: 1fr;}
.info-table dt { margin-top: .5rem;}
.info-table dt:first-child { margin-top: 0; }
}
.event-section .notes {
font-size: clamp(12px, 3vw, 14px);
color: #000;
font-weight: 500;
}
.location ul>li {
list-style: inside;
}
/* 販売商品 */
.product-grid {
margin: 2rem auto;
padding: 0;
max-width: 1111px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
@media screen and (min-width: 897px) {
.product-grid {
grid-auto-rows: 1fr;
}
}
.product-card {
display: flex;
flex-direction: column;
border-radius: 8px;
overflow: hidden;
transition: transform 0.2s;
line-height: 1.4;
}
.product-card figure {
margin: 0;
}
.product-card img {
width: 100%;
object-fit: cover;
}
.product-details {
padding: .5rem 0 1rem;
flex-grow: 1;
font-size: clamp(14px, 3vw, 16px);
font-weight: 600;
line-height: 1.6;
text-align: center;
}
.product-details .productName {
margin: 0;
font-family: "Noto Sans JP", sans-serif;
font-weight: 900;
font-size: clamp(18px, 3vw, 22px);
line-height: 1.5;
}
.product-details .productName span {
font-size: clamp(18px, 3vw, 20px);
display: block;
font-weight: 800;
}
.product-details .price {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 240px;
background-color: #ffcd00;
border-radius: 28px;
font-size: clamp(18px, 3vw, 22px);
font-weight: 900;
line-height: 2;
margin: .4em auto;
padding: 0 1em;
}
.product-details .price span {
font-size: clamp(14px, 3vw, 16px);
padding-left:.1em;
padding-right:.1em;
}
.product-grid.purchaseBonus {
grid-template-columns: repeat(4, 1fr);
}
@media screen and (min-width: 897px) {
.product-grid.purchaseBonus {
place-content: center;
place-items: center;
margin-top: 1.5em;
}
}
@media (max-width: 768px) {
.product-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.product-grid.purchaseBonus {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
margin: 1em auto 0;
}
}
@media (max-width: 480px) {
.product-grid.purchaseBonus {
grid-template-columns: 1fr;
gap: 2rem;
}
}
.box {
margin: 1rem auto 0;
border-radius: 8px;
padding: 1rem;
background-color: #efe1ba;
font-size: clamp(14px, 3vw, 16px);
font-weight: 900;
}
.event-section h3.title {
margin-top: 1rem;
}
ul.attention {
margin: 0 auto;
list-style: none;
padding-left: 0;
}
ul.attention li {
list-style: none;
position: relative;
padding-left: 1.4em;
}
ul.attention li::before {
content: "\203B";
position: absolute;
left: 0;
font-weight: bold;
}
#customer .location ul>li {
list-style: square;
padding-left: 0;
}
#customer .location ul {
margin-left: 1.1em;
}
#customer .location ul li::before {
content: none;
}
/* pageTOP */
.back-to-top {
display: none;
position: fixed;
right: 1%;
bottom: 1%;
display: inline-block;
text-decoration: none;
width: 20vw;
}
@media screen and (min-width: 897px) {
.back-to-top {
width: 100px;
}
}
/* footer */
#footer {
font-size: clamp(11px, 3vw, 12px);
line-height: 2;
font-family: "Mochiy Pop One";
margin: 100px auto 0;
padding: 5px 0;
text-align:center;
}
@media screen and (min-width: 897px) {
.location h4 br.tel {
display:none;
}
}