.spotGrid dd:nth-of-type(1),
.spotGrid dd:nth-of-type(2) {
display: contents;
}
#photo h2 {
font-family: fot-tsukuardgothic-std, sans-serif;
font-size: min(8vw, 2.8em);
text-align: center;
letter-spacing: 0.25em;
line-height: 1em;
}
#photo h2+div {
width: var(--wrap);
margin: auto;
margin-top: calc(var(--space) / 2);
}
:where(.spotGrid, .spotList) a[data-id]{
display: inline-block;
align-items: center;
min-height: 40px;
margin: 8px auto 0 auto;
padding: 8px 16px;
border: 1px solid var(--color-border);
color: inherit;
font-size: clamp(12px, 2.1vw, 14px);
text-decoration: none;
cursor: pointer;
z-index: 2;
}
:where(.spotGrid, .spotList) a[data-id]:before{
content: "";
aspect-ratio: 1;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
-webkit-mask-size: contain;
background: currentColor;
width: 24px;
display: inline-block;
vertical-align: middle;
margin-right: 8px;
margin-bottom: 2px;
}
:where(.spotGrid, .spotList) a[data-id]:after{
display: contents;
}
:where(.spotGrid, .spotList) a[data-id].inCart{}
:where(.spotGrid, .spotList) a[data-id].inCart:after{
content: "に追加";
}
:where(.spotGrid, .spotList) a[data-id].inCart:hover{
background: var(--color-theme);
}
:where(.spotGrid, .spotList) a[data-id].limit{
pointer-events: none;
opacity: 0.5;
}
:where(.spotGrid, .spotList) a[data-id].limit:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
:where(.spotGrid, .spotList) a[data-id].limit:after{
content: "が一杯です";
}
:where(.spotGrid, .spotList) a[data-id].deleteCart{}
:where(.spotGrid, .spotList) a[data-id].deleteCart:after{
content: "に追加済み";
}
:where(.spotGrid, .spotList) a[data-id].deleteCart:not(:hover){
background: var(--color-theme);
}
:where(.spotGrid, .spotList) a[data-id].deleteCart:not(:hover):before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
:where(.spotGrid, .spotList) a[data-id].deleteCart:hover{}
:where(.spotGrid, .spotList) a[data-id].deleteCart:hover:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
:where(.spotGrid, .spotList) a[data-id].deleteCart:hover:after{
content: "から削除";
}
#recommend{
overflow: hidden;
}
#recommend h2{
display: none;
}
#recommend section{
display: grid;
grid-gap: 2.5em;
width: min(calc(100% - 2em), calc(1140px + 8em));
margin: var(--space) auto;
}
#recommend h3{
position: relative;
justify-self: center;
padding: 1em 1.5em;
font-size: min(6vw, 1.1em);
text-align: center;
letter-spacing: 0.01em;
}
#recommend h3:before,
#recommend h3:after{
content: "";
position: absolute;
left: 0;
width: 100%;
height: 2px;
border-radius: 1px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}
#recommend h3:before{
top: 0;
}
#recommend h3:after{
bottom: 0;
}
#recommend dl{
counter-increment: count;
position: relative;
display: grid;
grid-gap: 0.5em;
}
#recommend dl:before{
content: "";
grid-column: 1;
grid-row: 1;
padding-top: 66.66%;
background: var(--dummy) center center;
background-size: cover;
border-radius: var(--corner);
z-index: -1;
}
#recommend dt{
line-height: 1.6em;
}
#recommend dd{}
#recommend dd:nth-of-type(1){
position: relative;
grid-column: 1;
grid-row: 1;
}
#recommend dd :where(img, a){
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#recommend dd img{
object-fit: cover;
border-radius: var(--corner);
z-index: -1;
}
#recommend dd a{
opacity: 0;
}
#recommend .slick-slider{
display: grid;
}
#recommend .slick-slider:before{
content: "";
grid-column: 2;
grid-row: 1;
padding-top: 44.44%;
}
#recommend .slick-list{
grid-row: 1 / 3;
}
#recommend .slick-arrow{
grid-row: 1;
align-self: center;
width: 2.5em;
height: 2.5em;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
-webkit-mask-size: contain;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
white-space: nowrap;
text-indent: 100vw;
z-index: 1;
}
#recommend .slick-prev{
grid-column: 1;
transform: scale(-1, 1);
}
#recommend .slick-next{
justify-self: end;
}
@media (max-width: 991.98px) {
/*991px以下*/
#recommend{}
#recommend .slick-slide{
margin: 0 0.5em;
}
}
/* Small */
@media (max-width: 767.98px) {
/*767px以下*/
#recommend{}
#recommend .slick-slider{
grid-template-columns: 4.5em minmax(0, 1fr) 4.5em;
}
#recommend .slick-slider:before{
grid-column: 2;
padding-top: 66.66%;
}
#recommend .slick-list{
grid-column: 1 / 4;
margin: 0 -1em;
padding: 0 5em;
}
#recommend .slick-next{
grid-column: 3;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
/*768px～991px*/
#recommend{}
#recommend .slick-slider{
grid-template-columns: 2em 1fr 1fr 2em;
grid-gap: 1em;
}
#recommend .slick-slider:before{
grid-column: 2;
}
#recommend .slick-list{
grid-column: 2 / 4;
}
#recommend .slick-next{
grid-column: 4;
}
}
/* Large */
@media (min-width: 992px) {
/*992px以上*/
#recommend{}
#recommend dt{
font-size: 1.1em;
}
#recommend .slick-slider{
grid-template-columns: 2em 1fr 1fr 1fr 2em;
grid-gap: 1.5em;
}
#recommend .slick-slider:before{
grid-column: 3;
}
#recommend .slick-list{
margin: 0 -0.75em;
grid-column: 2 / 5;
}
#recommend .slick-slide{
margin: 0 0.75em;
}
}
#photo h2 {
font-family: fot-tsukuardgothic-std, sans-serif;
font-size: min(8vw, 2.8em);
text-align: center;
letter-spacing: 0.25em;
line-height: 1em;
}
#list{
display: grid;
grid-gap: clamp(24px, 4.8vw, 32px);
width: var(--wrap);
margin: clamp(32px, 7.2vw, 48px) auto;
}
#list:last-child{
margin-bottom: clamp(64px, 14.4vw, 96px);
}
#list h2{
justify-self: center;
margin-bottom: -16px;
color: var(--secondary-color)
font-size: clamp(16px, 3vw, 20px);
font-weight: 500;
line-height: 1.65;
}
#list h2+div{
font-size: clamp(14px, 2.4vw, 16px);
text-align: center;
}
#list #resultList {
margin-bottom: var(--space);
}