/* CSS Document */
:root{
--wrap: min(calc(100% - 48px), 1140px);
--color: #262626;
--color-theme: #5FAB55;
--color-stopBy: #5FAB55;
--color-around: #f6872e;
}
[src="[url]"]{
background: #ccc;
}
main{
color: var(--color);
background: #f5f5e4;
font-size: 16px;
line-height: 1.65;
}
#main *{
line-height: 2;
}
#hero{
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
padding: 0;
background: #fff;
}
#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: 2/1;
width: 75%;
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;
margin: clamp(48px, 9.6vw, 64px) 0;
line-height: 2.22;
letter-spacing: 0.05em;
font-weight: bold;
}
#hero #heroSlide{
grid-column: 1 / 4;
grid-row: 1;
}
@media (max-width: 575.98px) {
#hero h1{
width: 100%;
}
}
@media (min-width: 768px) {
#hero h1{
width: min(60vw, 600px);
}
#hero h1+div{
text-align: center;
margin: clamp(24px, 4.8vw, 32px) 0 clamp(48px, 9.6vw, 64px);
}
}
@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;
}
/*slick CSS*/
#heroSlide .slick-dots {
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: min(100%, var(--wrap-max));
display: flex;
flex-wrap: wrap;
place-content: center;
grid-gap: 10px 20px;
z-index: 100;
}
#heroSlide .slick-dots li {
position: relative;
width: 10px;
aspect-ratio: 1;
background: #000;
border-radius: 100%;
overflow: hidden;
opacity: 1;
}
#heroSlide .slick-dots li.slick-active {
background: #f7872f;
}
#heroSlide .slick-dots button {
opacity: 0;
cursor: pointer;
}
@media (min-width: 576px) {
#heroSlide dd img{
height: min(50vw, 620px);
}
}
@media (min-width: 768px) {
#heroSlide .slick-dots {
bottom: 0;
}
}
@media (min-width: 992px) {
#heroSlide .slick-dots {
bottom: clamp(32px, 6vw, 40px);
padding: 0 0 24px;
}
#heroSlide .slick-dots li {
background: #fff;
}
}
#area{
display: grid;
padding: 0;
}
#area img{
width: 100%;
}
#course{}
#course .anchor {
position: absolute;
top: -2em;
}
#course h2 {
font-size: 0;
padding: 0;
margin: 0;
}
#course h2+div {
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
}
#course h2+div ul {
grid-column: 2;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 32px;
padding: 2em 0;
}
#course li a {
display: grid;
grid-template-columns: 1fr 16px;
justify-content: center;
align-items: center;
text-align: center;
width: min(80vw, 320px);
height: 56px;
font-size: 20px;
font-weight: bold;
padding: 4px 24px;
background: #fff;
color: var(--color-theme);
border: 4px solid var(--color-theme);
border-radius: 9999px;
text-decoration: none;
}
#course li 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 h2~section {
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
padding-top: 2em;
padding-bottom: 2em;
position: relative;
}
#course h2~section>div{
grid-column: 2;
background: #fff;
border-radius: 16px;
overflow: hidden;
}
#course h2~section>*{
grid-column: 2;
}
#course h2~section h3{
font-size: clamp(24px, 5vw, 40px);
padding: min(20vw, 5em) 0;
text-align: center;
letter-spacing: .2em;
color: #fff;
font-weight: bold;
position: relative;
z-index: 10;
background-size: cover!important;
}
#course #std h3{
background: url("../images/courseStdTitleBg.jpg") center 60% no-repeat;
}
#course #grm h3{
background: url("../images/courseGrmTitleBg.jpg") center no-repeat;
}
#course #sea h3{
background: url("../images/courseSeaTitleBg.jpg") center 80% no-repeat;
}
#course h2~section h3:before {
content: "";
position: absolute;
inset: 0;
background: #000;
opacity: .25;
z-index: -10;
}
#course h2~section h3+p {
padding: 1em;
font-weight: bold;
line-height: 2.5;
}
/*slick section CSS*/
#course h2~section section{
grid-column: 2;
display: grid;
grid-gap: clamp(32px, 6vw, 40px);
padding: 0;
}
#course h2~section h4 {
text-align: center;
font-weight: bold;
font-size: clamp(20px, 3.6vw, 28px);
letter-spacing: .1em;
color: var(--color-theme);
position: relative;
z-index: 10;
}
#course h2~section h4:before,
#course h2~section h4:after {
position: absolute;
width: 100%;
}
#course h2~section h4:before{
content: "";
left: 0;
height: 2px;
top: 50%;
transform: translateY(-50%);
background: var(--color-theme);
z-index: -20;
}
#course h2~section h4:after{
content: "スポット紹介";
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background: #fff;
width: fit-content;
padding: 0 1em;
color: transparent;
z-index: -10;
}
#course h2~section dl{
display: grid;
grid-template-areas: 'photo';
grid-template-rows: auto auto 1fr;
grid-gap: 1em;
width: 300px;
position: relative;
}
#course h2~section dt{
font-weight: bold;
letter-spacing: 0.05em;
}
#course h2~section dt+dd{
font-size: .875em;
letter-spacing: 0.05em;
margin-top: -0.5em;
font-weight: bold;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
overflow: hidden;
}
#course h2~section dd+dd{
display: contents;
}
#course h2~section dd{}
#course h2~section dd ul{
grid-area: photo;
display: grid;
align-content: start;
justify-content: start;
margin-top: 16px;
z-index: 1;
}
#course h2~section 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 h2~section dd figure{
grid-area: photo;
border-radius: 4px;
overflow: hidden;
}
#course h2~section dd img{
aspect-ratio: 1 / 0.75;
width: 100%;
object-fit: cover;
}
#course h2~section dd a{
position: absolute;
inset: 0;
font-size: 0;
z-index: 10;
}
#course h2~section div>a{
display: grid;
grid-template-columns: 1fr 12px;
align-items: center;
width: 280px;
min-height: 56px;
margin-top: 8px;
padding: 4px 48px;
margin: 56px auto;
background: var(--color-theme);
border-radius: 9999px;
color: #fff;
font-weight: bold;
text-align: center;
line-height: 1.5;
letter-spacing: 0.05em;
text-decoration: none;
}
#course h2~section div>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 h2~section [data-area="1"]{
background: var(--color-stopBy);
}
#course h2~section [data-area="2"]{
background: var(--color-around);
}
@media (min-width: 768px) {
#course ul {
padding: 0 0 1em;
}
#course h2~section h3+p {
padding: 2em 4em;
}
}
@media (min-width: 1200px) {
#course h2~section h3+div{
grid-gap: 48px;
}
}
/*slick CSS*/
#course h2~section .slick-slider{
display: grid !important;
grid-template-columns: 64px 1fr 64px;
grid-template-rows: 48vw 1fr;
opacity: 0;
}
#course h2~section .slick-slider:before{
content: "";
}
#course h2~section .slick-list{
grid-column: 1/4;
grid-row: 1/3;
margin: -4px;
}
#course h2~section .slick-slide{
margin: 0 16px;
display: grid;
}
#course h2~section .slick-arrow{
grid-row: 1;
align-self: center;
justify-self: center;
position: relative;
inset: auto;
aspect-ratio: 1;
width: 32px;
background: #fff;
border: 3px solid var(--color-theme);
border-radius: 100%;
color: inherit;
font-size: 0;
overflow: hidden;
z-index: 1;
}
#course h2~section .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: var(--color-theme);
}
#course h2~section .slick-prev {
grid-column: 1;
grid-row: 1;
}
#course h2~section .slick-next {
grid-column: 3;
grid-row: 1;
}
@media (min-width: 576px) {
#course h2~section .slick-arrow{
width: 40px;
}
#course h2~section .slick-slider{
grid-template-rows: 25vw 1fr;
}
}
@media (min-width: 768px) {
#course h2~section .slick-arrow{
width: 40px;
}
#course h2~section .slick-slider{
grid-template-rows: 17vw 1fr;
}
}
@media (min-width: 992px) {
#course h2~section .slick-arrow{
width: 40px;
}
#course h2~section .slick-slider{
grid-template-rows: min(18vw, 225px) 1fr;
}
}