/* CSS Document */
#wrapper{
grid-template-rows: auto 1fr;
}
#siteName{
@media (min-width: 1200px) {
transition: opacity 0.2s ease-out;
.scrollTop &{
opacity: 0;
pointer-events: none;
}
}
}
#pagePath{
display: none;
}
#hero{
display: grid;
@media (max-width: 1199.98px) {
grid-template-columns: 1fr var(--wrap) 1fr;
#heroSlide{
grid-column: 1 / 4;
}
#heroWeather{
grid-column: 2;
margin-top: clamp(16px, calc(24 / 768 * 100dvw), 24px);
}
#heroToul{
display: none;
}
}
@media (min-width: 576px) {
#heroWeather{
justify-self: center;
}
}
@media (min-width: 1200px) {
grid-template-columns: 320px 1fr;
grid-template-rows: auto auto 1fr;
&:before{
content: "";
justify-self: center;
aspect-ratio: 29 / 30;
width: clamp(176px, calc(200 / 1400 * 100dvw), 200px);
margin-top: -48px;
background: url('/common/images/logoType.vt.svg') no-repeat center / contain;
}
.scrollTop &:before{
z-index: 1000;
}
#heroSlide{
grid-column: 2;
grid-row: 1 / 4;
align-self: start;
border-radius: 4px 0 0 4px;
overflow: hidden;
}
#heroWeather{
width: 176px;
margin-top: clamp(56px, calc(64 / 1400 * 100dvw), 64px);
}
#heroToul{
justify-self: center;
align-self: start;
width: 176px;
margin-top: clamp(56px, calc(64 / 1400 * 100dvw), 64px);
}
}
}
#heroSlide{
display: grid;
& dl{
display: grid;
}
& dt{
grid-column: 1;
grid-row: 1;
display: grid;
justify-items: end;
align-items: end;
aspect-ratio: 3 / 2;
padding: 16px var(--wrap-space) clamp(48px, calc(64 / 992 * 100dvw), 64px) var(--wrap-space);
background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), transparent 50%);
color: #fff;
font-size: clamp(16px, calc(32 / 768 * 100dvw), 32px);
letter-spacing: 0.1em;
z-index: 1;
overflow: hidden;
pointer-events: none;
}
& dd{
grid-column: 1;
grid-row: 1;
display: grid;
& img{
aspect-ratio: 3 / 2;
object-fit: cover;
}
& a{
display: grid;
font-size: 0;
}
}
&:not(.slick-slider){
& dl{
grid-column: 1;
grid-row: 1;
&:nth-child(n+2){
visibility: hidden;
}
}
}
&.slick-slider{
grid-template-columns: auto 1fr auto;
.slick-list{
grid-column: 1 / 4;
grid-row: 1;
}
.slick-arrow{
grid-row: 1;
}
.slick-prev{
grid-column: 1;
}
.slick-next{
grid-column: 3;
}
.slick-dots{
grid-column: 1 / 4;
grid-row: 1;
justify-self: center;
align-self: end;
width: var(--wrap-fit);
min-height: clamp(48px, calc(64 / 992 * 100dvw), 64px);
z-index: 1;
}
}
@media (min-width: 992px) {
& dt{
padding: 64px 48px;
}
}
@media (min-width: 1200px) {
& dt{
width: 100%;
max-height: calc(100dvh - 120px);
}
& dd{
& img{
max-height: calc(100dvh - 120px);
}
}
}
}
#heroWeather{
display: grid;
background: #edf5f1;
border-radius: 4px;
color: var(--color-theme);
& h2{
display: grid;
font-weight: 700;
font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
text-align: center;
&:before{
content: "WEATHER";
font-weight: 500;
font-size: clamp(10px, calc(12 / 768 * 100dvw), 12px);
letter-spacing: 0.1em;
line-height: 1;
}
}
& h2+div{
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 16px;
}
& dl{
display: grid;
background: #fff;
font-weight: 500;
text-align: center;
&:nth-child(1) dt:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
&:nth-child(2) dt:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
}
& dt{
display: grid;
justify-items: center;
font-size: clamp(12px, calc(16 / 768 * 100dvw), 16px);
&:before{
content: "";
aspect-ratio: 42 / 30;
height: clamp(20px, calc(30 / 768 * 100dvw), 30px);
background: currentColor;
transform: translateY(calc(0.825em - 50%));
-webkit-mask: no-repeat center / contain;
}
}
& dd{
justify-self: center;
letter-spacing: 0.1em;
line-height: 1;
&:nth-of-type(2){
color: #d4145a;
}
& img{
aspect-ratio: 1;
width: clamp(24px, calc(40 / 768 * 100dvw), 40px);
object-fit: contain;
}
/*
&[data-type]{
aspect-ratio: 1;
width: 36px;
background: no-repeat center / contain;
font-size: 0;
}
&[data-type="1"]{
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[data-type="2"]{
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[data-type="3"]{
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[data-type="4"]{
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[data-type="5"]{
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
&[data-type="6"]{
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
*/
}
@media (max-width: 1199.98px) {
grid-gap: clamp(16px, calc(24 / 768 * 100dvw), 24px);
padding: 16px clamp(16px, calc(32 / 768 * 100dvw), 32px);
& dl{
grid-template-columns: auto auto auto;
justify-content: center;
grid-gap: 4px;
min-height: 56px;
border-radius: 56px;
}
& dt{
grid-column: 1;
grid-row: 1 / 3;
align-self: center;
grid-row-gap: 4px;
}
& dd{
font-size: clamp(14px, calc(20 / 768 * 100dvw), 20px);
&:nth-of-type(2){
align-self: end;
}
&:has(img){
grid-column: 2;
grid-row: 1 / 3;
align-self: center;
}
&[data-type]{
align-self: end;
}
}
}
@media (min-width: 576px) and (max-width: 1199.98px) {
grid-template-columns: auto 1fr;
align-items: center;
& dl{
padding: 8px clamp(8px, calc(32 / 768 * 100dvw), 32px);
column-gap: clamp(8px, calc(16 / 768 * 100dvw), 16px);
}
}
@media (min-width: 1200px) {
grid-gap: 16px;
padding: 16px;
& dl{
grid-template-rows: subgrid;
grid-row: span 4;
grid-row-gap: 8px;
padding: 24px 4px;
border-radius: 32px;
}
& dt{
grid-row-gap: 4px;
font-size: 14px;
}
& dd{
font-size: 14px;
}
}
}
#heroToul{
display: grid;
grid-row-gap: 8px;
}
#heroToulSearch{
display: grid;
align-items: center;
min-height: 32px;
padding: 0 8px 0 24px;
border: 1px solid var(--color-theme);
border-radius: 8px;
overflow: hidden;
& form.gsc-search-box{
all: unset;
box-sizing: border-box;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
overflow: hidden;
}
& input.gsc-input{
all: unset;
box-sizing: border-box;
width: 100%;
height: 32px;
margin: 0 8px 0 16px !important;
&::placeholder{
color: #b3b3b3;
}
}
& button.gsc-search-button{
all: unset;
box-sizing: border-box;
cursor: pointer;
order: -1;
display: block !important;
aspect-ratio: 1;
width: 16px;
background: var(--color-theme);
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
& svg{
display: none;
}
}
& a.gsst_a{
aspect-ratio: 1;
width: 16px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
& span{
all: unset;
display: contents;
}
}
}
#heroToulLanguage{
position: relative;
height: 32px;
& details{
position: absolute;
top: 0;
left: 0;
width: 100%;
background: #fff;
border: 1px solid var(--color-theme);
border-radius: 8px;
z-index: 10;
}
& summary{
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
min-height: 32px;
padding: 0 8px 0 24px;
color: var(--color-theme);
font-weight: 500;
font-size: 14px;
letter-spacing: 0.05em;
text-align: center;
cursor: pointer;
&:before,
&:after{
content: "";
aspect-ratio: 1;
width: 16px;
background: currentColor;
}
&:before{
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
&:after{
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
& ul{
display: grid;
grid-row-gap: 8px;
padding: 8px 16px 16px 16px;
}
& li{
display: contents;
}
& a{
display: grid;
grid-template-columns: auto 1fr;
column-gap: 0.5em;
font-weight: 500;
font-size: 14px;
text-decoration: none;
&:before{
content: "-";
}
}
}
#alert{
display: grid;
grid-template-columns: min(var(--wrap-fit), 1220px);
justify-content: center;
margin-top: clamp(16px, calc(32 / 992 * 100dvw), 32px);
& h2{
display: none;
}
& h2+div{
display: grid;
grid-row-gap: 16px;
}
& dl{
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
grid-gap: 8px 16px;
padding: clamp(16px, calc(24 / 768 * 100dvw), 24px);
border: 2px solid currentColor;
border-radius: 8px;
color: #d4145a;
font-weight: 500;
text-align: center;
}
& dt{
display: grid;
grid-template-columns: auto auto;
align-items: center;
column-gap: 16px;
&:before{
content: "";
aspect-ratio: 1;
width: 32px;
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
& dd{
font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
& a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 0;
}
}
@media (max-width: 575.98px) {
& dt{
width: 100%;
justify-content: center;
}
}
}
#topics{
position: relative;
display: grid;
grid-template-columns: min(var(--wrap-fit), 1220px);
justify-content: center;
margin-top: clamp(16px, calc(32 / 992 * 100dvw), 32px);
padding: clamp(32px, calc(80 / 992 * 100dvw), 80px) 0;
background: #edf5f1;
overflow: hidden;
&:after{
content: "";
justify-self: end;
aspect-ratio: 150 / 37;
height: clamp(60px, calc(150 / 1400 * 100dvw), 150px);
background: var(--color-theme);
-webkit-mask: var(--topics-pict) no-repeat center / contain;
}
& h2{
display: grid;
color: var(--color-theme);
font-weight: 500;
font-size: clamp(18px, calc(32 / 768 * 100dvw), 32px);
&:before{
content: "TOPICS";
font-size: clamp(12px, calc(22 / 768 * 100dvw), 22px);
font-family: kodchasan, sans-serif;
letter-spacing: 0.025em;
line-height: 1;
}
}
#topicsList{
z-index: 1;
}
@media (max-width: 1199.98px) {
&:after{
margin-top: 24px;
transform: translateX(var(--wrap-space));
}
& h2{
&:before,
&:after{
grid-column: 1;
grid-row: 1;
justify-self: start;
align-self: start;
aspect-ratio: 150 / 43;
height: 3em;
}
&:before{
display: grid;
place-items: end;
padding-bottom: 1em;
font-weight: 700;
}
&:after{
content: "";
background: currentColor;
font-size: clamp(12px, calc(22 / 768 * 100dvw), 22px);
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
#topicsList{
margin-top: 24px;
}
}
@media (min-width: 1200px) {
grid-template-columns: calc((100dvw - min(var(--wrap-fit), 1220px)) / 2) 128px 1fr calc((100dvw - min(var(--wrap-fit), 1220px)) / 2);
grid-template-rows: 1fr;
&:after{
grid-column: 3;
grid-row: 1;
transform: translate(90px, -56px);
}
& h2{
grid-column: 2;
grid-row: 1;
display: grid;
align-content: end;
writing-mode: vertical-rl;
&:before{
order: 1;
font-weight: 500;
}
}
#topicsSlideMain{
grid-column: 3;
grid-row: 1 / 4;
align-self: end;
width: 490px;
background: #edf5f1;
z-index: 2;
.slick-slide{
//opacity: 0;
transition: opacity 0.2s ease-out;
&.slick-active{
//opacity: 1;
}
}
}
#topicsSlideSub{
grid-column: 3 / 5;
grid-row: 1 / 4;
align-self: end;
margin-left: 176px;
z-index: 1;
.slick-slide{
width: 322px;
//opacity: 1;
transition: opacity 0.2s ease-out;
&.slick-active{
//opacity: 0;
}
}
}
.slick-con{
display: contents;
}
.slick-dots{
grid-column: 2 / 4;
margin-top: 64px;
}
.slick-arrow{
grid-column: 2;
margin-top: 24px;
}
&:not(.slick-slider){
#topicsList{
grid-column: 3;
grid-row: 1 / 4;
}
}
&:has(.slick-slider){
#topicsList{
display: contents;
}
}
}
}
#topicsList{
display: grid;
& section{
position: relative;
display: grid;
grid-row-gap: 16px;
padding: clamp(16px, calc(24 / 992 * 100dvw), 24px);
background: #fff;
&:not(:has(img)):before{
content: "";
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: 4px;
background: var(--dummy);
}
&:hover{
& h3{
color: var(--color-theme);
}
}
}
& h3{
order: 1;
margin-inline: 8px;
font-weight: 700;
font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
transition: color 0.2s ease-out;
@media (min-width: 768px) {
letter-spacing: 0.1em;
}
}
& h3+div{
display: contents;
& a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 0;
}
}
& figure{
& img{
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: 4px;
}
}
&:not(.slick-slider){
grid-template-columns: clamp(320px, calc(100dvw - (var(--wrap-space) * 2)), 480px);
justify-content: center;
& section{
grid-column: 1;
grid-row: 1;
&:nth-child(n+2){
visibility: hidden;
}
}
}
.slick-slide{
margin: 0 8px;
}
@media (max-width: 1199.98px) {
#topicsSlideSub{
display: none;
}
.slick-list{
overflow: visible;
}
.slick-slide{
width: clamp(320px, calc(100dvw - (var(--wrap-space) * 2)), 480px);
}
.slick-con{
display: grid;
grid-template-columns: auto 1fr auto;
grid-gap: 24px;
margin-top: 24px;
}
.slick-dots{
grid-column: 2;
grid-row: 1;
}
}
@media (min-width: 1200px) {
#topicsSlideMain{
& h3{
font-size: 20px;
}
}
#topicsSlideSub{
.slick-slide{
width: 322px;
}
}
.slick-list{
margin: 0 -8px;
}
.slick-arrow{
width: 64px;
&:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
}
}
}
#information{
display: grid;
grid-template-columns: min(var(--wrap-fit), 1220px);
justify-content: center;
padding: clamp(32px, calc(80 / 992 * 100dvw), 80px) 0;
overflow: hidden;
&:after{
content: "";
aspect-ratio: 49 / 25;
height: clamp(120px, calc(280 / 1400 * 100dvw), 280px);
background: var(--color-theme);
-webkit-mask: var(--information-pict) no-repeat center / contain;
}
& h2{
display: grid;
color: var(--color-theme);
font-weight: 500;
font-size: clamp(18px, calc(32 / 768 * 100dvw), 32px);
&:before,
&:after{
grid-column: 1;
grid-row: 1;
justify-self: start;
align-self: start;
aspect-ratio: 300 / 66;
height: 3em;
font-size: clamp(12px, calc(22 / 768 * 100dvw), 22px);
}
&:before{
content: "INFORMATION";
display: grid;
place-items: end;
padding-bottom: 1em;
font-weight: 700;
font-family: kodchasan, sans-serif;
letter-spacing: 0.025em;
line-height: 1;
}
&:after{
content: "";
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
#informationLink{
margin-top: clamp(48px, calc(64 / 992 * 100dvw), 64px);
}
@media (max-width: 1199.98px) {
&:after{
margin-top: 24px;
transform: translateX(calc(0px - var(--wrap-space)));
}
#informationTab{
display: none;
}
#informationList{
margin-top: 24px;
}
}
@media (min-width: 1200px) {
grid-template-columns: calc((100dvw - min(var(--wrap-fit), 1220px)) / 2) 480px 1fr calc((100dvw - min(var(--wrap-fit), 1220px)) / 2);
grid-template-rows: auto auto 1fr;
&:after{
grid-column: 2;
grid-row: 2 / 4;
justify-self: end;
align-self: end;
margin-top: 40px;
transform: translateX(-90px);
}
& h2{
grid-column: 2;
grid-row: 1;
align-self: end;
margin-right: 40px;
}
#informationTab{
grid-column: 3;
grid-row: 1;
align-self: end;
margin-bottom: 16px;
}
#informationList{
grid-column: 3;
grid-row: 2;
}
#informationLink{
grid-column: 3;
grid-row: 3;
align-self: start;
}
}
}
#informationTab{
& ul{
display: flex;
justify-content: flex-end;
column-gap: 4px;
padding-bottom: 8px;
}
& li{
position: relative;
display: grid;
align-items: center;
min-width: 5em;
min-height: 2em;
padding: 0 1em;
border-radius: 1em;
font-weight: 500;
font-size: clamp(12px, calc(16 / 768 * 100dvw), 16px);
letter-spacing: 0.1em;
text-align: center;
cursor: pointer;
&.select{
position: relative;
background: var(--color);
color: #fff;
pointer-events: none;
&:before{
content: "";
position: absolute;
top: 100%;
left: 50%;
aspect-ratio: 1;
width: 8px;
background: inherit;
transform: translateX(-50%);
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
&:hover{
background: var(--color-theme);
color: #fff;
}
}
}
#informationList{
border-top: 1px solid #dedede;
& summary{
display: none;
}
& section{
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
grid-gap: 8px;
padding: 16px 0;
border-bottom: 1px solid #dedede;
@media (min-width: 576px) {
padding: 16px 16px 16px 0;
}
&:has(a):hover{
& h3{
color: var(--color-theme);
}
}
}
& h3{
order: 1;
width: 100%;
font-weight: 500;
transition: color 0.2s ease-out;
}
& h3+div{
display: contents;
& time{
font-weight: 500;
font-size: 12px;
}
& ul{
display: flex;
flex-wrap: wrap;
grid-gap: 8px;
}
& li{
padding: 4px;
background: var(--color-theme);
color: #fff;
font-weight: 500;
font-size: 12px;
line-height: 1;
&.tagNew{
background: #dfb22a;
color: inherit;
}
&.tagCheck{
background: var(--color);
}
}
& a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 0;
&:hover{
color: var(--color-theme);
}
}
@media (min-width: 768px) {
& section{
&:has(a){
padding-right: 16px;
}
}
& a{
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
color: inherit;
&:after{
content: "";
aspect-ratio: 1;
width: 16px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / 16px;
}
}
}
}
}
#informationLink{
display: flex;
justify-content: center;
& a{
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
column-gap: 0.5em;
min-width: min(100%, 420px);
min-height: clamp(48px, calc(64 / 768 * 100dvw), 64px);
padding: 0.25em 1.5em 0.25em 2em;
border: 1px solid currentColor;
border-radius: clamp(24px, calc(32 / 768 * 100dvw), 32px);
font-weight: 700;
font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
letter-spacing: 0.05em;
text-align: center;
text-decoration: none;
&:hover{
background: var(--color-theme);
border-color: transparent;
color: #fff;
}
&:after{
content: "";
aspect-ratio: 1;
width: 16px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / 16px;
}
@media (min-width: 768px) {
&:after{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
}
}
}
#seasonal{
display: grid;
grid-template-columns: min(var(--wrap-fit), 1220px);
justify-content: center;
padding: clamp(32px, calc(80 / 992 * 100dvw), 80px) 0;
background: #edf5f1;
overflow: hidden;
&:after{
content: "";
justify-self: end;
aspect-ratio: 75 / 26;
height: clamp(80px, calc(196 / 1400 * 100dvw), 196px);
background: var(--color-theme);
-webkit-mask: var(--seasonal-pict) no-repeat center / contain;
}
& h2{
display: grid;
color: var(--color-theme);
font-weight: 500;
font-size: clamp(18px, calc(32 / 768 * 100dvw), 32px);
&:before,
&:after{
grid-column: 1;
grid-row: 1;
justify-self: start;
align-self: start;
aspect-ratio: 300 / 75;
height: 3em;
font-size: clamp(12px, calc(22 / 768 * 100dvw), 22px);
}
&:before{
content: "SEASONAL";
display: grid;
place-items: end;
padding-bottom: 1em;
font-weight: 700;
font-family: kodchasan, sans-serif;
letter-spacing: 0.025em;
line-height: 1;
}
&:after{
content: "";
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
#seasonalTab{
grid-row: 2;
margin: clamp(16px, calc(32 / 992 * 100dvw), 32px) 0 0 8px;
}
#seasonalLink{
order: 1;
margin-top: clamp(48px, calc(64 / 992 * 100dvw), 64px);
}
@media (max-width: 1199.98px) {
&:after{
margin-top: 24px;
transform: translateX(var(--wrap-space));
}
}
@media (min-width: 1200px) {
&:after{
grid-column: 1;
grid-row: 1 / 3;
transform: translate(90px, -40px);
}
& h2{
grid-column: 1;
grid-row: 1;
align-self: start;
}
#seasonalTab{
grid-column: 1;
grid-row: 2;
}
}
}
#seasonalTab{
& ul{
display: flex;
column-gap: 4px;
padding-bottom: 8px;
}
& li{
position: relative;
display: grid;
align-items: center;
min-width: clamp(40px, calc(56 / 768 * 100dvw), 56px);
min-height: clamp(40px, calc(56 / 768 * 100dvw), 56px);
padding: 0.25em 0.5em;
border-radius: clamp(20px, calc(28 / 768 * 100dvw), 28px);
font-weight: 500;
font-size: clamp(16px, calc(24 / 768 * 100dvw), 24px);
line-height: 1;
text-align: center;
cursor: pointer;
&.select{
position: relative;
background: var(--color);
color: #fff;
pointer-events: none;
&:before{
content: "";
position: absolute;
top: 100%;
left: 50%;
aspect-ratio: 1;
width: 8px;
background: inherit;
transform: translate(-50%, -1px);
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
&:hover{
background: var(--color-theme);
color: #fff;
}
}
}
#seasonalList{
& summary{
display: none;
}
& summary+div{
visibility: hidden;
& p{
font-weight: 700;
@media (min-width: 768px) {
letter-spacing: 0.1em;
}
}
}
& section{
position: relative;
display: grid;
grid-template-columns: clamp(120px, calc(272 / 992 * 100dvw), 272px) 1fr;
grid-gap: clamp(16px, calc(24 / 992 * 100dvw), 24px);
padding: clamp(16px, calc(24 / 992 * 100dvw), 24px);
border: 1px solid #97c1c2;
transition: background 0.2s ease-out;
&:hover{
background: #fff;
}
&:not(:has(img)):before{
content: "";
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: 4px;
background: var(--dummy);
}
@media (max-width: 575.98px) {
&:before{
grid-column: 1;
grid-row: 1;
}
& ul{
grid-column: 1 / 3;
grid-row: 2;
margin-inline: 8px;
}
& figure{
grid-column: 1;
grid-row: 1;
}
}
@media (min-width: 576px) {
grid-template-rows: auto 1fr;
&:before{
grid-column: 1;
grid-row: 1 / 3;
}
& ul{
grid-column: 2;
grid-row: 2;
align-self: start;
}
& figure{
grid-column: 1;
grid-row: 1 / 3;
}
}
}
& h3{
font-weight: 700;
}
& h3+div{
display: contents;
& ul{
display: flex;
flex-wrap: wrap;
grid-gap: 8px;
}
& li{
display: grid;
align-items: center;
min-height: 2em;
padding: 0.25em 1em;
border: 1px solid currentColor;
border-radius: 1em;
color: var(--color-theme);
font-size: 14px;
line-height: 1;
text-align: center;
&[data-area]{
background: var(--color-theme);
color: #fff;
}
&[data-area="1"]{
background: #f285ac;
}
&[data-area="2"]{
background: #61bce2;
}
&[data-area="3"]{
background: #5cbf52;
}
&[data-area="4"]{
background: #f2973d;
}
}
& a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 0;
}
}
& figure{
& img{
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: 4px;
}
}
@media (max-width: 1199.98px) {
& summary+div{
margin: 16px;
}
& span{
display: contents;
& section{
border-top: none;
}
}
}
@media (min-width: 1200px) {
& details{
&::details-content{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr auto;
}
}
& summary+div{
margin: 8px 32px 32px 24px;
}
& summary+div+div{
display: contents;
& span{
grid-column: 2;
grid-row: 1 / 4;
align-self: end;
}
}
& section{
&:nth-of-type(1):nth-last-of-type(1){
align-self: end;
grid-template-columns: unset;
grid-template-rows: unset;
margin-right: -1px;
&:before{
grid-row: 1;
}
& h3{
margin-inline: 8px;
}
& ul{
grid-column: 1;
grid-row: 3;
margin-inline: 8px;
}
& figure{
grid-row: 1;
}
}
}
& span{
& section:nth-child(n+2){
border-top: none;
}
& h3{
margin-top: 16px;
}
& ul{
margin-bottom: 16px;
}
}
}
}
#seasonalLink{
display: flex;
flex-wrap: wrap;
justify-content: center;
grid-gap: 16px 40px;
& a{
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
column-gap: 0.5em;
min-width: min(100%, 420px);
min-height: clamp(48px, calc(64 / 768 * 100dvw), 64px);
padding: 0.25em 1.5em 0.25em 2em;
background: #fff;
border: 1px solid currentColor;
border-radius: clamp(24px, calc(32 / 768 * 100dvw), 32px);
font-weight: 700;
font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
letter-spacing: 0.05em;
text-align: center;
text-decoration: none;
&:hover{
background: var(--color-theme);
border-color: transparent;
color: #fff;
}
&:after{
content: "";
aspect-ratio: 1;
width: 16px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / 16px;
}
@media (min-width: 768px) {
&:after{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
}
}
}
#area{
display: grid;
grid-template-columns: min(var(--wrap-fit), 1220px);
justify-content: center;
padding: clamp(32px, calc(80 / 992 * 100dvw), 80px) 0;
background: var(--color-theme);
color: #fff;
overflow: hidden;
&:after{
content: "";
justify-self: end;
aspect-ratio: 150 / 47;
height: clamp(64px, calc(160 / 1400 * 100dvw), 160px);
background: currentColor;
-webkit-mask: var(--area-pict) no-repeat center / contain;
}
& h2{
justify-self :start;
display: grid;
font-weight: 500;
font-size: clamp(18px, calc(32 / 768 * 100dvw), 32px);
&:before,
&:after{
grid-column: 1;
grid-row: 1;
justify-self: start;
align-self: start;
aspect-ratio: 150 / 43;
height: 3em;
font-size: clamp(12px, calc(22 / 768 * 100dvw), 22px);
}
&:before{
content: "AREA";
display: grid;
place-items: end;
padding-bottom: 1em;
font-weight: 700;
font-family: kodchasan, sans-serif;
letter-spacing: 0.025em;
line-height: 1;
}
&:after{
content: "";
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
#areaLink{
margin-top: clamp(32px, calc(64 / 992 * 100dvw), 64px);
}
@media (max-width: 1199.98px) {
&:after{
margin-top: 24px;
transform: translateX(var(--wrap-space));
}
#areaMap{
margin-top: 24px;
}
}
@media (min-width: 1200px) {
&:after{
margin-top: 56px;
transform: translateX(90px);
}
& h2{
grid-column: 1;
grid-row: 1;
align-self: start;
}
#areaMap{
grid-column: 1;
grid-row: 1;
}
}
}
#areaMap{
& svg{
& > use{
pointer-events: none;
}
}
& a{
pointer-events: none;
& use{
transition: opacity 0.2s ease-out;
}
& use:nth-child(1){
opacity: 0;
}
}
@media (max-width: 1199.98px) {
& svg{
display: none;
}
}
@media (min-width: 1200px) {
& img{
display: none;
}
}
}
#areaList{
display: grid;
& section{
position: relative;
display: grid;
grid-gap: clamp(16px, calc(24 / 992 * 100dvw), 24px);
padding: clamp(16px, calc(24 / 992 * 100dvw), 24px);
border: 1px solid #47acb0;
&[data-area="1"] h3{
background: #f285ac;
}
&[data-area="2"] h3{
background: #61bce2;
}
&[data-area="3"] h3{
background: #5cbf52;
}
&[data-area="4"] h3{
background: #f2973d;
}
}
& h3{
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
min-height: clamp(48px, calc(56 / 768 * 100dvw), 56px);
padding: 0.25em 1.5em;
background: var(--color);
border-radius: clamp(24px, calc(28 / 768 * 100dvw), 28px);
font-weight: 700;
font-size: clamp(14px, calc(18 / 768 * 100dvw), 18px);
letter-spacing: 0.05em;
text-align: center;
text-decoration: none;
&:after{
content: "";
aspect-ratio: 1;
width: 16px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / 16px;
}
@media (min-width: 768px) {
&:after{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
}
}
& h3+div{
display: contents;
& p{
font-weight: 600;
font-size: 14px;
}
& a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 0;
}
}
& figure{
& img{
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: 4px;
}
}
&:not(.slick-slider){
grid-template-columns: clamp(320px, calc(100dvw - (var(--wrap-space) * 2)), 480px);
justify-content: center;
& section{
grid-column: 1;
grid-row: 1;
&:nth-child(n+2){
visibility: hidden;
}
}
}
@media (max-width: 1199.98px) {
&.slick-slider{
grid-template-columns: auto 1fr auto;
align-items: center;
&:before{
content: "";
grid-column: 1 / 4;
grid-row: 1;
aspect-ratio: 3 / 2;
width: clamp(320px, calc(100dvw - (var(--wrap-space) * 2)), 480px);
margin-top: 8px;
background: red;
opacity: 0.5;
z-index: 1;
visibility: hidden;
}
.slick-list{
grid-column: 2;
grid-row: 1 / 3;
overflow: visible;
}
.slick-arrow{
grid-row: 1;
}
.slick-prev{
grid-column: 1;
}
.slick-next{
grid-column: 3;
}
.slick-dots{
grid-column: 2;
grid-row: 3;
margin-top: 32px;
}
}
.slick-slide{
width: clamp(320px, calc(100dvw - (var(--wrap-space) * 2)), 480px);
margin: 0 8px;
}
.slick-arrow{
&:not(:hover){
background: #fff;
}
}
& figure{
grid-row: 1;
}
}
@media (min-width: 1200px) {
&.slick-slider{
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-auto-flow: column;
.slick-list{
display: contents;
}
.slick-track{
display: contents;
&:before,
&:after{
content: none;
}
}
.slick-slide{
display: contents;
&:nth-child(-n+2) section{
transform: translateY(-120px);
margin-right: -1px;
}
&:nth-child(even) section{
border-top: none;
}
}
}
& section{
grid-template-columns: clamp(120px, calc(272 / 992 * 100dvw), 272px) 1fr;
grid-template-rows: auto 1fr;
transition: background 0.2s ease-out;
&:has(a):hover{
background: #75c1c4;
&[data-area="1"] h3{
color: #f285ac;
}
&[data-area="2"] h3{
color: #61bce2;
}
&[data-area="3"] h3{
color: #5cbf52;
}
&[data-area="4"] h3{
color: #f2973d;
}
& h3{
background: #fff;
}
}
}
& h3{
transition: all 0.2s ease-out;
}
& figure{
grid-column: 1;
grid-row: 1 / 3;
}
}
}
#areaLink{
display: flex;
flex-wrap: wrap;
justify-content: center;
grid-gap: 16px 40px;
& a{
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
column-gap: 0.5em;
min-width: min(100%, 420px);
min-height: clamp(48px, calc(64 / 768 * 100dvw), 64px);
padding: 0.25em 1.5em 0.25em 2em;
border: 1px solid currentColor;
border-radius: clamp(24px, calc(32 / 768 * 100dvw), 32px);
color: inherit;
font-weight: 700;
font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
letter-spacing: 0.05em;
text-align: center;
text-decoration: none;
&:hover{
background: #fff;
border-color: transparent;
color: var(--color-theme);
}
&:after{
content: "";
aspect-ratio: 1;
width: 16px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / 16px;
}
@media (min-width: 768px) {
&:after{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
}
}
}
#ranking{
display: grid;
grid-template-columns: min(var(--wrap-fit), 1220px);
justify-content: center;
padding: clamp(32px, calc(80 / 992 * 100dvw), 80px) 0;
background: #edf5f1;
overflow: hidden;
& h2{
display: grid;
color: var(--color-theme);
font-weight: 500;
font-size: clamp(18px, calc(32 / 768 * 100dvw), 32px);
&:before,
&:after{
grid-column: 1;
grid-row: 1;
justify-self: start;
align-self: start;
aspect-ratio: 300 / 75;
height: 3em;
font-size: clamp(12px, calc(22 / 768 * 100dvw), 22px);
}
&:before{
content: "RANKING";
display: grid;
place-items: end;
padding-bottom: 1em;
font-weight: 700;
font-family: kodchasan, sans-serif;
letter-spacing: 0.025em;
line-height: 1;
}
&:after{
content: "";
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
@media (max-width: 1199.98px) {
#rankingTab{
margin-top: 24px;
}
#rankingList{
margin-top: 24px;
}
}
@media (min-width: 1200px) {
grid-template-columns: calc((100dvw - min(var(--wrap-fit), 1220px)) / 2) auto 1fr calc((100dvw - min(var(--wrap-fit), 1220px)) / 2);
& h2{
grid-column: 2;
grid-row: 1;
align-self: end;
}
#rankingTab{
grid-column: 3;
grid-row: 1;
justify-self: end;
align-self: end;
margin-left: 40px;
}
#rankingList{
grid-column: 2 / 4;
grid-row: 2;
margin-top: 40px;
}
}
}
#rankingTab{
& ul{
display: flex;
column-gap: 4px;
padding-bottom: 8px;
}
& li{
position: relative;
display: grid;
align-items: center;
min-width: 5em;
min-height: 2em;
padding: 0 1em;
border-radius: 1em;
font-weight: 500;
font-size: clamp(12px, calc(16 / 768 * 100dvw), 16px);
letter-spacing: 0.1em;
text-align: center;
cursor: pointer;
&.select{
position: relative;
background: var(--color);
color: #fff;
pointer-events: none;
&:before{
content: "";
position: absolute;
top: 100%;
left: 50%;
aspect-ratio: 1;
width: 8px;
background: inherit;
transform: translateX(-50%);
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
&:hover{
background: var(--color-theme);
color: #fff;
}
}
}
#rankingList{
& summary{
display: none;
}
& summary+div{
display: grid;
align-items: start;
grid-gap: 48px 32px;
}
& section{
counter-increment: count;
position: relative;
display: grid;
grid-row-gap: 16px;
&:not(:has(img)):before{
content: "";
grid-row: 1;
aspect-ratio: 1;
object-fit: cover;
border-radius: 100%;
background: var(--dummy);
}
&:after{
content: counter(count);
position: absolute;
top: 0;
left: 0;
display: grid;
place-content: center;
aspect-ratio: 1;
width: 1.75em;
background: var(--color-theme);
border-radius: 100%;
color: #fff;
font-weight: 600;
font-size: clamp(20px, calc(32 / 768 * 100dvw), 32px);
font-family: minion-pro, serif;
line-height: 1;
transform-origin: left top;
}
& figure{
grid-row: 1;
}
&:has(a):hover{
& h3{
color: var(--color-theme);
}
}
}
& h3{
font-weight: 700;
text-align: center;
transition: color 0.2s ease-out;
}
& h3+div{
display: contents;
& a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 0;
}
}
& figure{
& img{
aspect-ratio: 1;
object-fit: cover;
border-radius: 100%;
}
}
& summary+div+div{
display: flex;
justify-content: center;
margin-top: clamp(48px, calc(64 / 992 * 100dvw), 64px);
& a{
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
column-gap: 0.5em;
min-width: min(100%, 420px);
min-height: clamp(48px, calc(64 / 768 * 100dvw), 64px);
padding: 0.25em 1.5em 0.25em 2em;
background: #fff;
border: 1px solid currentColor;
border-radius: clamp(24px, calc(32 / 768 * 100dvw), 32px);
font-weight: 700;
font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
letter-spacing: 0.05em;
text-align: center;
text-decoration: none;
&:hover{
background: var(--color-theme);
border-color: transparent;
color: #fff;
}
&:after{
content: "";
aspect-ratio: 1;
width: 16px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / 16px;
}
@media (min-width: 768px) {
&:after{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
}
}
}
@media (max-width: 575.98px) {
& summary+div{
grid-template-columns: repeat(2, 1fr);
}
& section{
&:nth-of-type(1){
grid-column: 1 / 3;
justify-self: center;
width: max(200px, 60%);
&:after{
transform: scale(1.5);
}
}
}
}
@media (min-width: 576px) and (max-width: 767.98px) {
& summary+div{
grid-template-columns: repeat(3, 1fr);
}
& section{
&:nth-of-type(-n+2){
grid-column: 1 / 4;
grid-row: 1;
width: calc(50% - 16px);
&:after{
transform: scale(1.25);
}
}
&:nth-of-type(2){
justify-self: end;
}
}
}
@media (min-width: 768px) and (max-width: 1199.98px) {
& summary+div{
grid-template-columns: repeat(3, 1fr);
}
& section{
&:nth-of-type(n+4){
transform: translateX(calc(50% + 16px));
}
}
}
@media (min-width: 1200px) {
& summary+div{
grid-template-columns: repeat(5, 1fr);
}
}
}
#theme{
display: grid;
grid-template-columns: min(var(--wrap-fit), 1024px);
justify-content: center;
padding: clamp(32px, calc(80 / 992 * 100dvw), 80px) 0;
overflow: hidden;
& h2{
display: grid;
grid-template-columns: auto 1fr;
column-gap: 0.25em;
color: var(--color-theme);
font-weight: 500;
font-size: clamp(24px, calc(36 / 768 * 100dvw), 36px);
&:before{
content: "";
aspect-ratio: 1;
width: 1em;
background: currentColor;
transform: translateY(calc(0.825em - 50%));
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
& span{
grid-column: 1 / 3;
grid-row: 1;
font-size: clamp(14px, calc(18 / 768 * 100dvw), 18px);
}
}
& h2+div{
font-weight: 700;
@media (min-width: 768px) {
letter-spacing: 0.1em;
}
}
#seasonalTab{
grid-row: 2;
margin: clamp(16px, calc(32 / 992 * 100dvw), 32px) 0 0 8px;
}
@media (max-width: 1199.98px) {
& h2+div{
margin: 16px 0;
}
#seasonalList{
margin-top: 16px;
}
}
@media (min-width: 1200px) {
grid-template-columns: calc((100dvw - min(var(--wrap-fit), 1024px)) / 2) auto 1fr calc((100dvw - min(var(--wrap-fit), 1024px)) / 2);
grid-row-gap: 16px;
& h2{
grid-column: 2;
align-self: start;
}
& h2+div{
grid-column: 3;
align-self: end;
justify-self: end;
margin: 0 0 8px 40px;
}
#themeSearch{
grid-column: 2 / 4;
}
}
}
#themeSearch{
display: grid;
border: solid #dedede;
& summary{
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
column-gap: 0.5em;
font-weight: 700;
font-size: clamp(18px, calc(24 / 768 * 100dvw), 24px);
letter-spacing: 0.1em;
& span{
padding: 0.25em 1em;
border: 1px solid currentColor;
border-radius: 2em;
font-weight: 500;
font-size: clamp(12px, calc(16 / 768 * 100dvw), 16px);
line-height: 1;
}
}
& summary+div{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 8px), 216px), 1fr));
grid-gap: 16px;
}
& label{
all: unset;
box-sizing: border-box;
cursor: pointer;
display: block;
padding: clamp(8px, calc(16 / 768 * 100dvw), 16px);
border-radius: clamp(8px, calc(16 / 992 * 100dvw), 16px);
outline: 1px solid #dedede;
outline-offset: -1px;
font-weight: 700;
font-size: clamp(12px, calc(16 / 768 * 100dvw), 16px);
letter-spacing: 0.1em;
text-align: center;
&:has(:checked){
background: #edf5f1;
outline-color: var(--color-theme);
outline-width: 2px;
outline-offset: -2px;
}
&:has(img){
display: grid;
grid-row-gap: 8px;
& img{
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 4px;
}
}
&:hover{
outline-color: currentColor;
color: var(--color-theme);
}
/*&:has([name="c3"]){
display: grid;
grid-template-rows: auto 1fr;
align-items: center;
grid-row-gap: 8px;
&:before{
content: "";
justify-self: center;
aspect-ratio: 1;
width: 4em;
background: currentColor;
-webkit-mask: no-repeat center / contain;
}
}*/
& input{
display: none;
}
}
& details+button{
all: unset;
box-sizing: border-box;
cursor: pointer;
justify-self: center;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
column-gap: 0.5em;
min-width: min(100%, 420px);
min-height: clamp(48px, calc(64 / 768 * 100dvw), 64px);
padding: 0.25em 1.5em 0.25em 2em;
background: #e6e6e6;
border-radius: clamp(24px, calc(32 / 768 * 100dvw), 32px);
color: #999;
font-weight: 700;
font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
letter-spacing: 0.05em;
text-align: center;
text-decoration: none;
transition: all 0.2s ease-out;
&:hover{
background: var(--color-theme);
color: #fff;
}
&:before{
content: "";
aspect-ratio: 1;
width: 20px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
&.on{
background: var(--color-theme);
color: #fff;
}
}
.slick-slider{
&.slick-initialized{
grid-template-columns: 0 1fr 0;
align-items: center;
grid-gap: 0;
}
&:not(:has(button)){
grid-template-columns: 1fr;
.slick-track{
margin-left: 0;
}
}
}
.slick-list{
grid-column: 2;
margin: 0 calc(0px - clamp(4px, calc(8 / 768 * 100dvw), 8px));
}
.slick-slide{
margin: 0 clamp(4px, calc(8 / 768 * 100dvw), 8px);
}
.slick-arrow{
justify-self: center;
width: clamp(32px, calc(48 / 1200 * 100dvw), 48px);
&:not(:hover){
background: #fff;
}
}
@media (max-width: 1199.98px) {
grid-row-gap: clamp(8px, calc(16 / 768 * 100dvw), 16px);
padding: 16px 0 32px 0;
border-width: 1px 0;
& summary{
grid-template-columns: auto 1fr auto;
min-height: clamp(48px, calc(56 / 768 * 100dvw), 56px);
cursor: pointer;
&:before,
&:after{
content: "";
grid-column: 3;
grid-row: 1;
align-self: center;
aspect-ratio: 1;
width: clamp(32px, calc(40 / 768 * 100dvw), 40px);
}
&:before{
border: 1px solid #dedede;
border-radius: 100%;
}
&:after{
background: var(--color-theme);
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / 16px;
}
[open] &:after{
transform: scale(1, -1);
}
@media (min-width: 768px) {
&:after{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
}
}
& summary+div{
margin-top: 8px;
}
& details+button{
margin-top: 16px;
}
.slick-list{
overflow: visible;
}
}
@media (min-width: 1200px) {
position: relative;
grid-row-gap: 48px;
margin-top: 48px;
padding: 40px;
border-width: 1px;
&:before{
content: "";
position: absolute;
top: -48px;
left: -1px;
width: 50%;
height: 48px;
background: #fff url('data:image/svg+xml;charset=UTF-8,') no-repeat right top / 100% 48px;
border-left: 1px solid #dedede;
}
& details{
z-index: 1;
&::details-content{
display: contents;
}
&:nth-child(1){
margin-top: -64px;
& summary{
width: 50%;
}
}
}
& summary{
& span{
align-self: start;
transform: translateY(calc(1.25em - 50%));
}
}
& summary+div{
margin-top: 24px;
}
}
}
#instagram{
display: grid;
grid-template-columns: min(var(--wrap-fit), 1024px);
justify-content: center;
padding: 0 0 clamp(48px, calc(120 / 992 * 100dvw), 120px) 0;
overflow: hidden;
&:after{
content: "";
justify-self: end;
aspect-ratio: 60 / 17;
height: clamp(72px, calc(196 / 1400 * 100dvw), 196px);
background: var(--color-theme);
-webkit-mask: var(--instagram-pict) no-repeat center / contain;
}
& hgroup{
display: grid;
color: var(--color-theme);
}
& h2{
column-gap: 0.25em;
font-weight: 500;
font-size: clamp(24px, calc(36 / 768 * 100dvw), 36px);
}
& p{
grid-row: 1;
font-size: clamp(14px, calc(18 / 768 * 100dvw), 18px);
}
#instagramList{
margin-top: clamp(24px, calc(40 / 992 * 100dvw), 40px);
}
#instagramLink{
margin-top: clamp(32px, calc(64 / 992 * 100dvw), 64px);
}
@media (max-width: 1199.98px) {
&:after{
margin-top: 24px;
transform: translateX(var(--wrap-space));
}
}
@media (min-width: 1200px) {
grid-template-columns: calc((100dvw - min(var(--wrap-fit), 1024px)) / 2) 1fr 1fr calc((100dvw - min(var(--wrap-fit), 1024px)) / 2);
&:after{
grid-column: 3;
grid-row: 1;
transform: translate(144px, 24px);
}
& hgroup{
grid-column: 2;
grid-row: 1;
align-self: end;
}
#instagramList{
grid-column: 2 / 4;
}
#instagramLink{
grid-column: 2 / 4;
}
}
}
#instagramList{
/*& ul{
display: grid;
grid-gap: clamp(16px, calc(32 / 992 * 100dvw), 32px);
@media (max-width: 767.98px) {
grid-template-columns: repeat(3, 1fr);
& li:nth-child(10){
display: none;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
grid-template-columns: repeat(4, 1fr);
& li:nth-child(n+9){
display: none;
}
}
@media (min-width: 992px) {
grid-template-columns: repeat(5, 1fr);
}
}
& li{
display: contents;
}
& a{
display: block;
}
& img{
aspect-ratio: 1;
object-fit: cover;
border-radius: 4px;
}*/
}
#instagramLink{
display: flex;
justify-content: center;
& a{
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
column-gap: 0.5em;
min-width: min(100%, 420px);
min-height: clamp(48px, calc(64 / 768 * 100dvw), 64px);
padding: 0.25em 1.5em 0.25em 2em;
border: 1px solid currentColor;
border-radius: clamp(24px, calc(32 / 768 * 100dvw), 32px);
color: var(--color-theme);
font-weight: 700;
font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
letter-spacing: 0.05em;
text-align: center;
text-decoration: none;
&:hover{
background: var(--color-theme);
border-color: transparent;
color: #fff;
}
&:after{
content: "";
aspect-ratio: 1;
width: 24px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
}
#banner{
display: grid;
grid-template-columns: var(--wrap);
justify-content: center;
padding: clamp(32px, calc(80 / 992 * 100dvw), 80px) 0 clamp(80px, calc(160 / 992 * 100dvw), 160px) 0;
background: #edf5f1;
overflow: hidden;
& h2{
font-weight: 500;
font-size: 18px;
letter-spacing: 0.5em;
text-align: center;
}
& h2+div{
display: flex;
flex-wrap: wrap;
justify-content: center;
grid-gap: clamp(16px, calc(56 / 992 * 100dvw), 56px);
margin-top: 24px;
& div{
display: grid;
place-content: center;
aspect-ratio: 30 / 25;
width: 300px;
background: #fff;
}
}
}
.slick-arrow{
all: unset;
box-sizing: border-box;
cursor: pointer;
position: relative;
aspect-ratio: 1;
width: 48px;
border: 1px solid #c1d6cb;
border-radius: 100%;
color: var(--color-theme);
font-size: 0;
transition: all 0.2s ease-out;
z-index: 1;
&:hover{
background: var(--color-theme);
border-color: transparent;
color: #fff;
}
&:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / 16px;
}
&.slick-prev:before{
transform: scale(-1, 1);
}
}
.slick-dots{
display: flex;
flex-wrap: wrap;
place-content: center;
grid-gap: 16px clamp(24px, calc(32 / 992 * 100dvw), 32px);
& li{
aspect-ratio: 1;
width: 8px;
background: #d6d6d6;
border-radius: 100%;
overflow: hidden;
transition: transform 0.2s ease-out;
&.slick-active{
background: #dfb22a;
transform: scale(1.5);
}
}
& button{
opacity: 0;
}
}
:root{
--topics-pict: url('data:image/svg+xml;charset=UTF-8,');
--information-pict: url('data:image/svg+xml;charset=UTF-8,');
--seasonal-pict: url('data:image/svg+xml;charset=UTF-8,');
--area-pict: url('data:image/svg+xml;charset=UTF-8,');
--instagram-pict: url('data:image/svg+xml;charset=UTF-8,');
}