/* CSS Document */
:root{
--wrap: min(calc(100% - 48px), 1140px);
--color: #262626;
--color-theme: #5FAB55;
--color-area01: #80C8EF;
--color-area02: #4DBBAA;
--color-area03: #F9C158;
--color-area04: #F091A0;
}
[src="[url]"]{
background: #ccc;
}
main{
color: var(--color);
font-size: 16px;
line-height: 1.65;
}
#main *{
line-height: inherit;
}
#hero{
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
padding: 0;
}
#hero:before{
content: "";
grid-column: 2;
justify-self: center;
aspect-ratio: 1 / 0.169;
width: min(90%, 430px);
margin-top: clamp(24px, 4.8vw, 32px);
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
-webkit-mask-size: contain;
background: var(--color-theme);
}
#hero:after{
content: "";
grid-column: 1 / 4;
grid-row: 1;
height: clamp(32px, 6vw, 40px);
align-self: end;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center bottom no-repeat;
background: #fff;
z-index: 1;
}
#hero h1{
grid-column: 2;
grid-row: 1;
align-self: center;
justify-self: center;
aspect-ratio: 1;
width: 50%;
background: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
background-size: contain;
font-size: 0;
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.6));
pointer-events: none;
transform: translateY(-20px);
z-index: 1;
}
#hero h1+div{
grid-column: 2;
display: grid;
grid-gap: 1.65em;
text-align: center;
margin: clamp(48px, 9.6vw, 64px) 0;
line-height: 2.22;
letter-spacing: 0.05em;
}
#hero h1+div span{
color: var(--color-theme);
font-weight: bold;
}
#hero #heroSlide{
grid-column: 1 / 4;
grid-row: 1;
}
@media (min-width: 576px) {
#hero h1{
width: min(calc(50vw - 200px), 340px);
}
}
@media (min-width: 1200px) {
#hero h1+div{
margin: 80px 0;
font-size: 18px;
}
}
#heroSlide{}
#heroSlide dl{
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
}
#heroSlide dt{
grid-column: 2;
grid-row: 1;
align-self: end;
justify-self: end;
display: grid;
align-items: center;
min-height: 32px;
margin-bottom: 56px;
padding: 4px 24px;
background: var(--color);
border-radius: 16px;
color: #fff;
line-height: 1.4;
pointer-events: none;
z-index: 1;
}
#heroSlide dd{
grid-column: 1 / 4;
grid-row: 1;
}
#heroSlide dd a{
display: block;
background: rgba(0, 42, 105, 0.2);
}
#heroSlide dd img{
position: relative;
width: 100%;
height: 100vw;
object-fit: cover;
z-index: -1;
}
@media (min-width: 576px) {
#heroSlide dd img{
height: min(50vw, 620px);
}
}
#area{
display: grid;
padding: 0;
}
#area #areaMap{
order: -1;
align-self: stretch;
}
@media (min-width: 576px) {
#area{
grid-template-columns: 1fr 1fr;
}
#area #areaLink{
grid-column: 2;
grid-row: 1;
}
#area #areaMap{
grid-column: 1 / 3;
grid-row: 1 / 5;
justify-self: center;
width: min(100%, 1366px);
z-index: 10;
}
}
#areaLink{
display: grid;
}
#areaLink dl{
display: grid;
grid-template-areas: 'main';
grid-template-rows: 25vw;
}
#areaLink dt{
display: contents;
}
#areaLink dt a{
grid-area: main;
display: grid;
align-items: center;
padding: 0 1em;
color: #fff;
font-size: clamp(16px, 2.7vw, 18px);
font-weight: bold;
text-align: center;
text-decoration: none;
background: rgba(0, 0, 0, 0.2);
line-height: 1.4;
z-index: 1;
}
#areaLink dt a:hover{
background: transparent;
}
#areaLink dd{
display: contents;
}
#areaLink dd img{
grid-area: main;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 575.98px) {
#areaLink{
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 576px) {
#areaLink{
position: relative;
}
#areaLink:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: min(20%, 114px);
height: 100%;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center bottom no-repeat;
background: #fff;
z-index: 2;
}
#areaLink dl{
grid-template-rows: min(20vw, 230px);
}
#areaLink dt a{
padding: 0 max(24px, calc(100% - 683px)) 0 4em;
}
}
@media (min-width: 1200px) {
#areaLink dt a{
font-size: 20px;
}
}
#areaMap{
pointer-events: none;
overflow: hidden;
}
#areaMap img{
width: 100%;
transform: translateX(-5%);
}
@media (max-width: 575.98px) {
#areaMap img{
margin-bottom: -8vw;
}
}
@media (min-width: 576px) {
#areaMap img{
width: 60%;
max-height: 920px;
object-fit: contain;
}
}
#course{
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
padding: clamp(72px, 14.4vw, 96px) 0;
}
#course h2{
display: none;
}
#course h2+div{
grid-column: 2;
display: grid;
grid-gap: clamp(32px, 6vw, 40px);
}
#course dl{
display: grid;
grid-template-areas: 'photo';
grid-template-rows: auto auto 1fr;
grid-gap: 16px;
}
#course dt{
font-weight: bold;
letter-spacing: 0.05em;
}
#course dt+dd{
font-size: 14px;
letter-spacing: 0.05em;
}
#course dd+dd{
display: contents;
}
#course dd{}
#course dd ul{
grid-area: photo;
display: grid;
align-content: start;
justify-content: start;
margin-top: 16px;
z-index: 1;
}
#course dd li{
display: grid;
align-items: center;
min-height: 24px;
padding: 4px 24px 4px 16px;
background: var(--color);
border-radius: 0 12px 12px 0;
color: #fff;
font-size: 13px;
font-weight: bold;
line-height: 1.2;
}
#course dd figure{
grid-area: photo;
border-radius: 4px;
overflow: hidden;
}
#course dd img{
aspect-ratio: 1 / 0.75;
width: 100%;
object-fit: cover;
}
#course dd a{
display: grid;
grid-template-columns: 1fr 12px;
align-items: center;
min-height: 40px;
margin-top: 8px;
padding: 4px 24px 4px 16px;
background: var(--color-theme);
border-radius: 20px;
color: #fff;
font-size: 14px;
font-weight: bold;
text-align: center;
line-height: 1.5;
letter-spacing: 0.05em;
text-decoration: none;
}
#course dd a:after{
content: "";
aspect-ratio: 1;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
background: currentColor;
transform: translateX(4px);
}
#course [data-area="1"]{
background: var(--color-area01);
}
#course [data-area="2"]{
background: var(--color-area02);
}
#course [data-area="3"]{
background: var(--color-area03);
}
#course [data-area="4"]{
background: var(--color-area04);
}
@media (min-width: 576px) {
#course h2+div{
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
#course h2+div{
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 1200px) {
#course{
padding: 80px 0;
}
#course h2+div{
grid-gap: 48px;
}
}
#spot{
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
padding: 0 0 clamp(72px, 14.4vw, 96px) 0;
background: #F5F5E4;
}
#spot:before{
content: "";
grid-column: 1 / 4;
grid-row: 1;
height: clamp(32px, 6vw, 40px);
align-self: end;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center bottom no-repeat;
background: #fff;
transform: rotate(-180deg);
z-index: 1;
}
#spot h2{
grid-column: 2;
justify-self: center;
font-size: clamp(20px, 4.2vw, 28px);
font-weight: bold;
letter-spacing: 0.1em;
transform: translateY(-50%);
z-index: 1;
}
#spot h2+div{
grid-column: 1 / 4;
align-items: start;
justify-self: center;
display: grid;
grid-gap: clamp(32px, 6vw, 40px);
width: min(calc(100% - 48px), 1200px);
margin-top: clamp(48px, 8.4vw, 56px);
}
#spot section{
display: grid;
grid-template-columns: minmax(0, 1fr);
padding: 0;
}
#spot section:nth-of-type(1){
color: var(--color-area01);
}
#spot section:nth-of-type(2){
color: var(--color-area02);
}
#spot section:nth-of-type(3){
color: var(--color-area03);
}
#spot section:nth-of-type(4){
color: var(--color-area04);
}
#spot h3{
font-size: 18px;
font-weight: bold;
text-align: center;
letter-spacing: 0.025em;
}
#spot h3+div{
margin-top: 8px;
}
#spot dl{
display: grid;
grid-template-areas: 'photo';
grid-template-rows: auto auto 1fr;
grid-gap: 16px;
font-size: 14px;
letter-spacing: 0.05em;
}
#spot dt{
color: var(--color);
font-weight: bold;
}
#spot dt+dd{
color: var(--color);
}
#spot dd{}
#spot dd:has(img){
grid-area: photo;
border-radius: 4px;
overflow: hidden;
}
#spot dd img{
aspect-ratio: 1 / 0.667;
width: 100%;
object-fit: cover;
cursor: pointer;
}
#spot dd:has(a){
justify-self: center;
}
#spot dd a{
display: grid;
grid-template-columns: 1fr 12px;
align-items: center;
grid-gap: 16px;
color: inherit;
font-weight: bold;
text-decoration: none;
}
#spot dd a:after{
content: "";
aspect-ratio: 1;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
background: currentColor;
transform: translateX(4px);
}
#spot .slick-slider{
display: grid !important;
grid-template-columns: 0 1fr 0;
opacity: 0;
}
#spot .slick-slider:before{
content: "";
grid-column: 2;
grid-row: 1;
aspect-ratio: 1 / 0.667;
}
#spot .slick-list{
grid-column: 2;
grid-row: 1 / 3;
margin: -4px;
}
#spot .slick-slide{
margin: 0 4px;
}
#spot .slick-arrow{
grid-row: 1;
align-self: center;
justify-self: center;
position: relative;
inset: auto;
aspect-ratio: 1;
width: 32px;
background: currentColor;
border: none;
border-radius: 100%;
color: inherit;
font-size: 0;
overflow: hidden;
z-index: 1;
}
#spot .slick-arrow:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
-webkit-mask-size: max(50%, 12px);
background: white;
}
@media (min-width: 576px) {
#spot h2+div{
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 576px) {
#spot h2+div{
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
#spot h2+div{
grid-template-columns: repeat(4, 1fr);
}
#spot .slick-arrow{
width: 24px;
}
}
@media (min-width: 1200px) {
#spot{
padding-bottom: 128px;
}
#spot h2{
font-size: 32px;
}
#spot h2+div{
grid-gap: 48px;
}
#spot h3{
font-size: 20px;
}
}