.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;
}
: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: "から削除";
}
#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);
}
#terms{
display: grid;
grid-gap: clamp(24px, 4.8vw, 32px);
width: var(--wrap);
margin: clamp(32px, 7.2vw, 48px) auto;
padding: clamp(24px, 4.8vw, 32px);
}
#terms h2{
position: relative;
padding: 0.75em 0;
font-size: min(5vw, 1.5em);
text-align: center;
line-height: 1.5em;
letter-spacing: 0.1em;
border: 0 solid var(--secondary-color);
border-width: 1px 0;
}
#terms h2:before{
content: "";
margin: 0.3em 0;
background: var(--secondary-color);
transform: translateY(0.1em);
}
#terms section{
display: grid;
grid-template-columns: 1.5em auto;
line-height: 1.65;
}
#terms section > *{
grid-column: 2;
}
#terms h3{
grid-column: 1 / 3;
margin-bottom: clamp(6px, 1.4vw, 10px);
padding-left: 1.5em;
text-indent: -1.5em;
}
#terms ol{
display: grid;
grid-gap: 4px;
}
#terms ol > li{
margin-left: 1em;
list-style: decimal;
}
#terms ul{
display: grid;
grid-gap: 4px;
}
#terms ul > li{
padding-left: 1em;
text-indent: -1em;
}
#terms dl{
margin-top: 16px;
}
#terms dt{
font-weight: 700;
}
#terms dt:before{
content: "\FF1C";
}
#terms dt:after{
content: "\FF1E";
}
@media (min-width: 576px) {
#terms h2{
grid-template-columns: 4px auto;
grid-gap: 0 16px;
}
}
#request{
display: flex;
justify-content: center;
margin: clamp(32px, 7.2vw, 48px) auto clamp(64px, 14.4vw, 96px) auto;
}
#request a{
display: grid;
grid-template-columns: 18px auto;
align-items: center;
justify-content: initial;
grid-gap: 16px;
width: min(100%, 400px);
min-height: 60px;
padding: 4px 24px;
border: 1px solid currentColor;
border-radius: 0.5em;
color: var(--secondary-color);
font-size: clamp(16px, 2.7vw, 18px);
text-align: center;
line-height: 1.65;
text-decoration: none;
}
#request a:before{
content: "";
aspect-ratio: 1;
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
-webkit-mask-size: contain;
background: currentColor;
}