/* CSS Document */
#feature,
#spot,
#course,
#event,
#gourmet,
#stay,
#favorite{
display: grid;
grid-template-columns: var(--wrap);
justify-content: center;
margin-bottom: clamp(40px, calc(56 / 1200 * 100vw), 56px);
& h2{
justify-self: center;
display: grid;
grid-row-gap: 4px;
font-weight: 700;
font-size: clamp(24px, calc(32 / 768 * 100vw), 32px);
letter-spacing: 0.1em;
&:before{
content: "";
justify-self: center;
aspect-ratio: 1;
width: 40px;
background: var(--color-theme);
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
&:after{
content: "";
height: 2px;
background: linear-gradient(90deg, var(--color-theme-sub) 50%, var(--color-theme) 50%);
}
}
}
#feature{
& h2:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
& h2+div{
margin-top: 24px;
font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
text-align: center;
word-break: keep-all;
overflow-wrap: anywhere;
}
}
#spot{
& h2:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
}
#course{
& h2:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
& h2+div{
margin-top: 24px;
font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
text-align: center;
word-break: keep-all;
overflow-wrap: anywhere;
}
}
#event{
& h2:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
}
#gourmet{
& h2:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
}
#stay{
& h2:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
}
#favorite{
& h2:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
#favoriteShare{
margin-top: clamp(24px, calc(48 / 1200 * 100vw), 48px);
}
}
#favoriteShare{
display: flex;
justify-content: center;
& summary{
all: unset;
box-sizing: border-box;
cursor: pointer;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
min-width: min(100%, 360px);
min-height: clamp(56px, calc(64 / 768 * 100vw), 64px);
padding: 8px 24px;
border: 1px solid currentColor;
border-radius: 12px;
color: var(--color-theme);
font-weight: 700;
font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
letter-spacing: 0.05em;
text-align: center;
cursor: pointer;
&:before{
content: "";
content: "";
aspect-ratio: 1;
width: 16px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
& summary+div{
position: fixed;
top: 0;
left: 0;
display: grid;
grid-template-columns: 1fr min(var(--wrap), 960px) 1fr;
align-content: center;
width: 100%;
height: 100%;
padding: clamp(32px, 7.2vw, 48px) 0;
background: rgba(0,0,0,0.8);
z-index: 1000;
}
& menu{
all: unset;
box-sizing: border-box;
grid-column: 2;
grid-row: 1;
justify-self: end;
aspect-ratio: 1;
width: 48px;
background: #9b9b9b;
font-size: 0;
cursor: pointer;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
-webkit-mask-size: 20px;
}
& dl{
grid-column: 2;
grid-row: 1;
display: flex;
flex-wrap: wrap;
justify-content: center;
grid-gap: 16px;
padding: 24px;
background: #fff;
border-radius: 16px;
filter: drop-shadow(0 0 0.3em rgba(0,0,0,0.1));
}
& dt{
display: grid;
grid-template-columns: auto 1fr;
column-gap: 8px;
width: 100%;
font-weight: 700;
&:before{
content: "";
height: 1em;
border-left: 4px solid var(--color-theme-sub);
transform: translateY(calc(0.875em - 50%));
}
}
& dt+dd{
width: 100%;
}
& dd{
& input{
border-radius: 4px;
}
& a{
display: grid;
grid-template-columns: 16px auto;
align-items: center;
grid-gap: 4px;
min-height: 32px;
padding: 4px 16px;
border: 1px solid var(--color-border);
border-radius: 4px;
font-weight: 500;
color: inherit;
font-size: clamp(12px, calc(14 / 1200 * 100vw), 14px);
text-align: center;
text-decoration: none;
letter-spacing: 0.025em;
cursor: pointer;
&:before{
content: "";
aspect-ratio: 1;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
-webkit-mask-size: contain;
background: currentColor;
transform: translateX(-4px);
}
&[data-target="mailto"]{
&:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
}
&[data-target="twitter"]{
background: #000;
border-color: transparent;
color: #fff;
&:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
}
&[data-target="facebook"]{
background: #3b5998;
border-color: transparent;
color: #fff;
&:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
}
&[data-target="line"]{
background: #00c300;
border-color: transparent;
color: #fff;
&:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
}
}
}
}
#search{
display: grid;
grid-template-columns: var(--wrap);
justify-content: center;
background: #f6f5ef;
padding: 24px 0;
& h2{
display: grid;
grid-template-columns: auto 1fr;
column-gap: 8px;
font-weight: 700;
&:before{
content: "";
height: 1em;
border-left: 4px solid var(--color-theme-sub);
transform: translateY(calc(0.875em - 50%));
}
}
& details{
box-sizing: border-box;
&::details-content{
box-sizing: border-box;
}
}
& summary{
all: unset;
box-sizing: border-box;
cursor: pointer;
}
& button{
all: unset;
box-sizing: border-box;
cursor: pointer;
}
#searchMenu{
margin-top: 16px;
}
#searchCurrent{
margin-top: 16px;
}
}
#searchMenu{
display: grid;
grid-gap: 8px;
& details{
&[open]::details-content{
padding: clamp(24px, calc(48 / 1200 * 100vw), 48px) clamp(24px, calc(64 / 1200 * 100vw), 64px);
background: #fff;
border: 2px solid var(--color-theme);
border-radius: 8px;
}
& h3{
display: grid;
grid-template-columns: auto 1fr;
column-gap: 8px;
font-weight: 700;
&:before{
content: "";
height: 1em;
border-left: 4px solid var(--color-theme-sub);
transform: translateY(calc(0.875em - 50%));
}
}
& h3+div{
margin: 16px;
}
& h3+div+div{
display: flex;
flex-wrap: wrap;
justify-content: center;
grid-gap: 8px 24px;
}
& ul{
display: grid;
align-items: start;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
grid-gap: 1px;
& ul{
grid-template-columns: 1fr;
align-content: start;
margin-top: 1px;
}
}
& label{
padding: 4px 16px;
&:has(input:checked){
background: var(--color-theme);
color: #fff;
}
}
& button{
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
width: min(100%, 220px);
min-height: clamp(48px, calc(56 / 768 * 100vw), 56px);
padding: 8px 16px;
border-radius: clamp(28px, calc(32 / 768 * 100vw), 32px);
font-weight: 500;
letter-spacing: 0.05em;
text-align: center;
&:after{
content: "";
justify-self: center;
aspect-ratio: 1;
width: 16px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
&.doSearch{
color: var(--color-theme);
border: 1px solid currentColor;
&:after{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,')
}
}
&.doClearAll{
border: 1px solid var(--color-border);
&:after{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,')
}
}
}
& .close{
all: unset;
display: block;
position: absolute;
top: 0;
right: 0;
aspect-ratio: 1;
width: 3em;
color: transparent;
overflow: hidden;
cursor: pointer;
z-index: 1;
user-select: none;
&:before,
&:after{
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 32px;
height: 2px;
background: var(--color-theme);
border-radius: 1px;
}
&:before{
transform: translate(-50%, -50%) rotate(45deg);
}
&:after{
transform: translate(-50%, -50%) rotate(-45deg);
}
}
}
& summary{
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
column-gap: 4px;
min-height: 48px;
padding: 4px 16px;
background: #fff;
border: 1px solid #999;
border-radius: 4px;
font-weight: 500;
font-size: 14px;
letter-spacing: 0.03em;
&:after{
content: "";
aspect-ratio: 1;
width: 12px;
background: var(--color-theme);
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
[open] &:after{
//transform: scale(1, -1);
}
}
#searchKeyword{
width: auto;
min-height: 48px;
padding: 4px 16px;
border: 1px solid #999;
border-radius: 4px;
}
#searchKeyword+button{
width: 48px;
background: var(--color-theme) url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
border-radius: 4px;
font-size: 0;
}
@media (max-width: 991.98px) {
grid-template-columns: 1fr auto;
& details{
grid-column: 1 / 3;
&::details-content{
margin-top: 8px;
}
}
}
@media (min-width: 992px) {
position: relative;
grid-template-columns: 1fr 1fr auto;
&:has(details:nth-child(2)){
grid-template-columns: 1fr 1fr 1fr auto;
}
&:has(details:nth-child(3)){
grid-template-columns: 1fr 1fr 1fr 1fr auto;
}
& details{
&::details-content{
position: absolute;
top: calc(100% + 32px);
left: 0;
width: 100%;
max-height: 80dvh;
overflow: auto;
z-index: 10;
}
}
}
}
#searchCurrent{
& dl{
display: flex;
flex-wrap: wrap;
grid-gap: 8px;
}
& dt{
display: grid;
grid-template-columns: auto 1fr;
column-gap: 8px;
width: 100%;
margin-bottom: 8px;
font-weight: 700;
&:before{
content: "";
height: 1em;
border-left: 4px solid var(--color-theme-sub);
transform: translateY(calc(0.875em - 50%));
}
}
& a,
& button{
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
column-gap: 4px;
min-height: 32px;
padding: 0 16px;
background: #fff;
border: 1px solid var(--color-border);
border-radius: 16px;
color: inherit;
font-weight: 50;
text-decoration: none;
&:after{
content: "";
aspect-ratio: 1;
width: 12px;
background: currentColor;
transform: translateX(4px);
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
}
#result{
display: grid;
grid-template-columns: var(--wrap);
justify-content: center;
margin-bottom: clamp(64px, calc(120 / 1200 * 100vw), 120px);
& h2{
display: none;
}
#resultSet+#resultList{
margin-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
}
}
#resultSet{
grid-gap: 16px 24px;
padding: 24px 0;
border-bottom: 1px solid #999;
@media (max-width: 991.98px) {
display: grid;
justify-items: center;
}
@media (min-width: 992px) {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
}
#resultCount{
display: flex;
align-items: center;
column-gap: 0.25em;
font-weight: 500;
letter-spacing: 0.05em;
& span{
font-size: 2em;
line-height: 1;
}
}
#resultSort{
& dl{
display: flex;
grid-gap: 8px;
font-size: clamp(12px, calc(14 / 768 * 100vw), 14px);
font-weight: 500;
letter-spacing: 0.05em;
}
& dd{
display: grid;
align-items: center;
padding: 0 1em;
border: 1px solid #999;
border-radius: 4px;
&.select{
background: var(--color-theme);
border-color: transparent;
color: #fff;
}
}
& span{
display: contents;
}
@media (max-width: 575.98px) {
& dl{
flex-wrap: wrap;
justify-content: center;
}
& dt{
width: 100%;
text-align: center;
}
}
}
#pagenation{
margin-top: clamp(64px, calc(120 / 1200 * 100vw), 120px);
&:not(:has(li)){
display: none;
}
}
.featureList{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 345px), 1fr));
grid-gap: clamp(32px, calc(48 / 1200 * 100vw), 48px) clamp(16px, calc(32 / 1200 * 100vw), 32px);
& section{
position: relative;
display: grid;
align-content: start;
grid-row-gap: 8px;
&:not(:has(img)):before{
content: "";
aspect-ratio: 3 / 2;
margin-bottom: 8px;
background: var(--dummy);
border-radius: clamp(8px, calc(12 / 768 * 100vw), 12px);
}
& p{
order: 1;
}
& figure{
order: -1;
margin-bottom: 8px;
}
}
& h3{
display: grid;
grid-template-columns: auto 1fr;
column-gap: 8px;
font-weight: 700;
font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
letter-spacing: 0.05em;
&:before{
content: "";
width: 4px;
height: 1.65em;
background: linear-gradient(180deg, var(--color-theme-sub) 50%, var(--color-theme) 50%);
}
}
& h3+div{
display: contents;
}
& p{
font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
max-height: calc(1.65em * 3);
overflow: hidden;
}
& figure{
& img{
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: clamp(8px, calc(12 / 768 * 100vw), 12px);
}
}
& a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 0;
}
}
.spotList{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 16px), 240px), 1fr));
grid-gap: clamp(32px, calc(48 / 1200 * 100vw), 48px) clamp(16px, calc(32 / 1200 * 100vw), 32px);
& section{
position: relative;
display: grid;
align-content: start;
grid-row-gap: 8px;
&:not(:has(img)):before{
content: "";
aspect-ratio: 3 / 2;
background: var(--dummy);
border-radius: clamp(8px, calc(12 / 768 * 100vw), 12px);
}
& p{
order: 1;
}
& figure{
order: -1;
}
}
& h3{
font-weight: 700;
font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
letter-spacing: 0.05em;
}
& h3+div{
display: contents;
}
& p{
font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
max-height: calc(1.65em * 5);
overflow: hidden;
}
& time{
display: grid;
grid-template-columns: auto 1fr;
column-gap: 8px;
font-size: clamp(12px, calc(14 / 768 * 100vw), 14px);
&:before{
content: "";
aspect-ratio: 1;
width: 18px;
background: var(--color-theme);
transform: translateY(calc(0.875em - 50%));
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
& figure{
& img{
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: clamp(8px, calc(12 / 768 * 100vw), 12px);
}
}
& a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 0;
&[data-fav-id]{
all: unset;
box-sizing: border-box;
cursor: pointer;
position: absolute;
top: 0;
right: 0;
aspect-ratio: 1;
width: 32px;
background: #999 url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
font-size: 0;
z-index: 1;
&.favOn{
background-color: var(--color-theme-sub);
}
}
}
}
.courseList{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 345px), 1fr));
grid-gap: clamp(32px, calc(48 / 1200 * 100vw), 48px) clamp(16px, calc(32 / 1200 * 100vw), 32px);
& section{
position: relative;
display: grid;
align-content: start;
grid-row-gap: 8px;
&:not(:has(img)):before{
content: "";
aspect-ratio: 3 / 2;
margin-bottom: 8px;
background: var(--dummy);
border-radius: clamp(8px, calc(12 / 768 * 100vw), 12px);
}
& p{
order: 1;
}
& figure{
order: -1;
margin-bottom: 8px;
}
}
& h3{
display: grid;
grid-template-columns: auto 1fr;
column-gap: 8px;
font-weight: 700;
font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
letter-spacing: 0.05em;
&:before{
content: "";
width: 4px;
height: 1.65em;
background: linear-gradient(180deg, var(--color-theme-sub) 50%, var(--color-theme) 50%);
}
}
& h3+div{
display: contents;
}
& p{
font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
max-height: calc(1.65em * 3);
overflow: hidden;
}
& figure{
& img{
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: clamp(8px, calc(12 / 768 * 100vw), 12px);
}
}
& a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 0;
}
}