/* CSS Document */
[id$="Link"]{
display: flex;
justify-content: center;
& a{
display: grid;
grid-template-columns: auto auto;
justify-content: center;
align-items: center;
column-gap: 1em;
min-width: min(100%, 224px);
min-height: 48px;
padding: 8px 24px;
background: #fff;
border: 1px solid #79c3d8;
border-radius: 24px;
color: inherit;
font-weight: 700;
font-size: 14px;
text-decoration: none;
&:before{
content: "";
aspect-ratio: 1;
width: 1em;
background: #79c3d8;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
}
#pagePath{
display: none;
}
#main{
display: contents;
}
#hero{
& dl{
display: grid;
}
& dt{
grid-column: 1;
grid-row: 1;
display: grid;
place-content: end;
padding: clamp(16px, calc(40 / 1200 * 100vw), 40px) clamp(24px, calc(104 / 1200 * 100vw), 104px);
color: #fff;
font-weight: 700;
font-size: clamp(16px, calc(24 / 768 * 100vw), 24px);
letter-spacing: 0.01em;
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
pointer-events: none;
z-index: 1;
}
& dd{
grid-column: 1;
grid-row: 1;
& img{
width: 100%;
height: clamp(355px, calc(768 / 1200 * 100vw), 768px);
object-fit: cover;
}
&:has(iframe){
position: relative;
/* height: clamp(355px, calc(768 / 1200 * 100vw), 768px); */
aspect-ratio: 16 / 9;
}
& iframe{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
transform: translate(-50%, -50%);
/* @media (max-width: 575.98px) {
height: 100%;
}
@media (min-width: 576px) {
height: auto;
} */
}
&:has(a){
position: relative;
}
& a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 0;
}
}
.slide{
display: grid;
&:not(.slick-initialized){
& dl{
grid-column: 1;
grid-row: 1;
}
}
}
}
#intro{
display: grid;
grid-gap: clamp(16px, calc(32 / 1200 * 100vw), 32px) clamp(40px, calc(64 / 1200 * 100vw), 64px);
padding: clamp(24px, calc(104 / 1200 * 100vw), 104px) calc((100% - var(--wrap)) / 2);
background: #f6f6f4;
& h2{
aspect-ratio: 300 / 107;
width: clamp(184px, calc(480 / 1200 * 100vw), 480px);
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat top left / contain;
}
& h2+div{
font-weight: 700;
font-size: clamp(15px, calc(24 / 1200 * 100vw), 24px);
letter-spacing: 0.07em;
line-height: 1.82;
font-feature-settings: normal;
word-break: keep-all;
overflow-wrap: anywhere;
}
@media (min-width: 768px) {
grid-template-columns: auto 1fr;
justify-content: center;
align-items: center;
& h2+div{
max-width: 22em;
}
}
}
#information{
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
justify-content: center;
padding: clamp(16px, calc(48 / 1200 * 100vw), 48px) 0 clamp(32px, calc(96 / 1200 * 100vw), 96px) 0;
&:before{
content: "Information";
grid-column: 1 / 4;
justify-self: center;
width: min(var(--wrap-fit), 1200px);
margin-bottom: clamp(16px, calc(48 / 1200 * 100vw), 48px);
color: #b6dee9;
font: 500 clamp(56px, calc(140 / 1200 * 100vw), 140px) helvetica-lt-pro, sans-serif;
text-align: right;
line-height: 1;
}
&>*{
grid-column: 2;
}
& h2{
margin-top: ;
color: #5fb7d1;
font-weight: 700;
font-size: clamp(24px, calc(40 / 768 * 100vw), 40px);
text-align: center;
}
#informationList{
margin-top: clamp(24px, calc(48 / 1200 * 100vw), 48px);
}
#informationLink{
margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
}
.slick-slide{
width: min(calc(100dvw - 56px), 493px);
}
@media (max-width: 991.98px) {
overflow: hidden;
.slick-slider{
display: grid;
grid-template-columns: 0 min(calc(100dvw - 56px), 493px) 0;
justify-content: center;
&:before{
content: "";
grid-column: 2;
grid-row: 1;
aspect-ratio: 493 / 266;
width: min(calc(100dvw - 56px), 493px);
}
}
.slick-list{
grid-column: 2;
grid-row: 1 / 3;
overflow: visible;
}
.slick-slide{
margin: 0 28px;
}
.slick-arrow{
grid-row: 1;
align-self: center;
justify-self: center;
}
.slick-prev{
grid-column: 1;
}
.slick-next{
grid-column: 3;
}
}
@media (min-width: 992px) {
display: grid;
grid-template-columns: calc((100% - var(--wrap)) / 2) auto 1fr calc((100% - var(--wrap)) / 2);
grid-template-rows: auto auto auto 1fr;
&:before{
grid-column: 1 / 5;
}
& h2{
min-width: 200px;
}
#informationList{
display: contents;
}
.slick-slider{
display: contents;
}
.slick-list{
grid-column: 3 / 5;
grid-row: 2 / 5;
margin-left: 136px;
}
.slick-slide{
margin-right: 56px;
}
.slick-arrow{
grid-column: 2;
grid-row: 4;
justify-self: center;
align-self: start;
margin-top: 48px;
}
.slick-prev{
transform: translateX(calc(0px - 50% - 16px));
}
.slick-next{
transform: translateX(calc(50% + 16px));
}
}
}
#informationList{
& section{
position: relative;
display: grid;
align-content: start;
&:not(:has(img)):before{
content: "";
aspect-ratio: 493 / 266;
background: var(--dummy);
}
& figure{
order: -1;
}
& img{
aspect-ratio: 493 / 266;
}
}
& h3{
order: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
max-height: calc(1.65em * 2);
margin-top: 8px;
font-weight: 700;
font-size: clamp(18px, calc(20 / 768 * 100vw), 20px);
overflow: hidden;
}
& h3+div{
display: flex;
flex-wrap: wrap;
align-items: center;
grid-gap: 8px 16px;
margin-top: 16px;
}
& time{
font-weight: 700;
font-size: clamp(15px, calc(18 / 768 * 100vw), 18px);
}
& ul{
display: flex;
flex-wrap: wrap;
align-items: center;
grid-gap: 8px;
}
& li{
display: grid;
align-items: center;
min-height: clamp(32px, calc(36 / 768 * 100vw), 36px);
padding: 0 16px;
border: 1px solid currentColor;
border-radius: clamp(16px, calc(18 / 768 * 100vw), 18px);
font-weight: 700;
font-size: clamp(15px, calc(18 / 768 * 100vw), 18px);
}
& a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 0;
}
& figure{
& img{
object-fit: cover;
}
}
.slide{
&:not(.slick-initialized){
display: flex;
flex-wrap: wrap;
grid-gap: clamp(24px, calc(40 / 1200 * 100vw), 40px);
& section{
width: min(calc(100% - 48px), 496px);
}
}
}
}
#movie{
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
justify-content: center;
padding-top: clamp(32px, calc(56 / 1200 * 100vw), 56px);
background: #f6f6f4;
&:before{
content: "Movie";
grid-column: 1 / 4;
justify-self: center;
width: min(var(--wrap-fit), 1200px);
color: #fff;
font: 500 clamp(56px, calc(140 / 1200 * 100vw), 140px) helvetica-lt-pro, sans-serif;
line-height: 1;
-webkit-text-stroke-width: clamp(0.5px, calc(1 / 1200 * 100vw), 1px);
-webkit-text-stroke-color: var(--color);
-webkit-text-fill-color : #fff;
}
&>*{
grid-column: 2;
}
& h2{
display: grid;
font-weight: 700;
font-size: clamp(18px, calc(24 / 768 * 100vw), 24px);
text-align: center;
& span{
color: #5fb7d1;
font-size: clamp(24px, calc(40 / 768 * 100vw), 40px);
}
}
#movieList{
grid-column: 1 / 4;
justify-self: center;
width: min(var(--wrap-fit), 1200px);
margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
}
#movieLink{
margin-top: clamp(24px, calc(40 / 1200 * 100vw), 40px);
}
@media (max-width: 991.98px) {
& h2{
margin-top: 24px;
}
}
@media (min-width: 992px) {
#movieLink{
justify-self: end;
}
}
}
#movieList{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 8px), 228px), 1fr));
grid-gap: clamp(24px, calc(40 / 1200 * 100vw), 40px) clamp(8px, calc(16 / 1200 * 100vw), 16px);
& section{
position: relative;
display: grid;
grid-row-gap: 8px;
&:not(:has(img)):before{
content: "";
grid-column: 1;
grid-row: 1;
aspect-ratio: 200 / 360;
background: var(--dummy);
}
&:after{
content: "";
grid-column: 1;
grid-row: 1;
place-self: center;
aspect-ratio: 1;
width: 40px;
background: currentColor url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
border-radius: 100%;
pointer-events: none;
}
& figure{
grid-column: 1;
grid-row: 1;
}
& img{
aspect-ratio: 200 / 360;
}
}
& h3{
order: 1;
font-weight: 700;
font-size: clamp(14px, calc(18 / 768 * 100vw), 18px);
text-align: center;
}
& h3+div{
display: contents;
/*
& a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 0;
}
*/
}
& li{
color: #666;
font-weight: 700;
font-size: clamp(20px, calc(32 / 768 * 100vw), 32px);
font-family: helvetica-lt-pro, sans-serif;
text-align: center;
}
& figure{
& img{
object-fit: cover;
}
}
}
/* #movieの縦長youtube用*/
.movieLightcase .lightcase-contentInner {
position: relative;
width: 100%;
padding-top: 177.78%; /* 9:16 */
}
.movieLightcase .lightcase-contentInner iframe {
position: absolute;
top: 0;
left: 0;
width: 303.75px!important;
height: 540px!important;
max-width: 303.75px!important;
max-height: 540px!important;
@media (min-width: 576px) {
width: 450px!important;
height: 800px!important;
max-width: 450px!important;
max-height: 800px!important;
}
}
#area{
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
padding-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
background: #f6f6f4;
&:before{
content: "Area Map";
grid-column: 1 / 4;
justify-self: center;
width: min(var(--wrap-fit), 1200px);
color: #fff;
font: 500 clamp(56px, calc(140 / 1200 * 100vw), 140px) helvetica-lt-pro, sans-serif;
line-height: 1;
-webkit-text-stroke-width: clamp(0.5px, calc(1 / 1200 * 100vw), 1px);
-webkit-text-stroke-color: var(--color);
-webkit-text-fill-color : #fff;
}
&>*{
grid-column: 2;
}
& h2{
grid-row: 3;
align-self: start;
justify-self: start;
display: inline-grid;
align-content: center;
aspect-ratio: 1;
min-width: clamp(144px, calc(280 / 768 * 100vw), 280px);
padding: 16px;
background: #fff;
border: 1px solid #79c3d8;
border-radius: 100%;
font-weight: 700;
font-size: clamp(18px, calc(24 / 768 * 100vw), 24px);
text-align: center;
z-index: 1;
& span{
color: #5fb7d1;
font-size: clamp(24px, calc(40 / 768 * 100vw), 40px);
}
}
& h2+div{
margin-top: clamp(16px, calc(40 / 1200 * 100vw), 40px);
font-size: clamp(15px, calc(24 / 768 * 100vw), 24px);
font-weight: 700;
letter-spacing: 0.01em;
@media (min-width: 768px) {
letter-spacing: 0.05em;
}
}
& picture{
grid-column: 1 / 4;
grid-row: 3;
}
@media (max-width: 767.98px) {
& h2{
margin-top: 24px;
}
& picture{
margin-top: 56px;
}
}
@media (min-width: 768px) {
& h2{
margin-top: clamp(64px, calc(104 / 1200 * 100vw), 104px);
}
& picture{
grid-column: 2;
width: min(70%, 742px);
margin: 40px 0 0 min(30%, 320px);
}
}
}
#introduction{
display: grid;
grid-template-columns: var(--wrap);
justify-content: center;
padding: clamp(24px, calc(48 / 1200 * 100vw), 48px) 0 clamp(32px, calc(56 / 1200 * 100vw), 56px) 0;
background: #f6f6f4;
& h2{
display: grid;
font-weight: 700;
font-size: clamp(18px, calc(24 / 768 * 100vw), 24px);
text-align: center;
& span{
color: #5fb7d1;
font-size: clamp(24px, calc(40 / 768 * 100vw), 40px);
}
}
#introductionList{
justify-self: center;
width: min(100%, 1072px);
margin-top: clamp(64px, calc(80 / 1200 * 100vw), 80px);
}
#introductionLink{
margin-top: clamp(24px, calc(72 / 1200 * 100vw), 72px);
}
}
#introductionList{
display: grid;
grid-gap: clamp(64px, calc(80 / 1200 * 100vw), 80px) clamp(24px, calc(64 / 1200 * 100vw), 64px);
& section{
position: relative;
display: grid;
grid-template-rows: auto 1fr;
grid-row-gap: 16px;
padding: 32px 40px 16px 40px;
background: #fff;
border: 1px solid currentColor;
border-radius: 32px;
&:nth-child(1) h3{
background: #deb9b5;
}
&:nth-child(2) h3{
background: #94c4d2;
}
&:nth-child(3) h3{
background: #e6bb62;
}
&:nth-child(4) h3{
background: #a9a9c9;
}
&:nth-child(5) h3{
background: #85c4a3;
}
}
& h3{
position: absolute;
top: 0;
left: 0;
display: grid;
place-content: center;
aspect-ratio: 1;
width: 104px;
background: #ccc;
border: 1px solid var(--color);
border-radius: 100%;
color: #fff;
font-size: 22px;
font-weight: 700;
transform: translate(-16px, -40%);
}
& h3+div{
font-size: 15px;
letter-spacing: 0.025em;
}
& h3+div+div{
display: flex;
justify-content: center;
}
& figure{
order: -1;
& img{
aspect-ratio: 3 / 2;
object-fit: cover;
}
}
& a{
display: grid;
grid-template-columns: auto auto;
align-items: center;
justify-content: center;
column-gap: 1em;
min-width: 176px;
min-height: 48px;
padding: 8px 24px;
background: #fff;
border: 1px solid #79c3d8;
border-radius: 24px;
color: inherit;
font-weight: 700;
font-size: 14px;
text-decoration: none;
&:before{
content: "";
aspect-ratio: 1;
width: 1em;
background: #79c3d8;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
@media (max-width: 1199.98px) {
margin-left: 8px;
}
@media (max-width: 575.98px) {
& section{
margin-left: 8px;
}
}
@media (min-width: 576px) {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 992px) {
grid-template-columns: repeat(3, 1fr);
&:before{
content: "";
}
& section{
&:nth-child(-n+2){
transform: translateX(calc(0px - 50% - clamp(12px, calc(32 / 1200 * 100vw), 32px)));
}
}
}
}
#interview{
position: relative;
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
justify-content: center;
padding: clamp(24px, calc(32 / 1200 * 100vw), 32px) 0 clamp(32px, calc(40 / 1200 * 100vw), 40px) 0;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
z-index: 1;
&:before{
content: "Interview";
grid-column: 1 / 4;
justify-self: center;
width: min(var(--wrap-fit), 1200px);
color: #b6dee9;
font: 500 clamp(56px, calc(140 / 1200 * 100vw), 140px) helvetica-lt-pro, sans-serif;
text-align: right;
line-height: 1;
}
&>*{
grid-column: 2;
}
& h2{
display: grid;
font-weight: 700;
font-size: clamp(18px, calc(24 / 768 * 100vw), 24px);
text-align: center;
& span{
color: #5fb7d1;
font-size: clamp(24px, calc(40 / 768 * 100vw), 40px);
}
}
#interviewList{
margin-top: clamp(24px, calc(64 / 1200 * 100vw), 64px);
}
#interviewLink{
margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
}
@media (max-width: 991.98px) {
& h2{
margin-top: clamp(24px, calc(64 / 1200 * 100vw), 64px);
}
}
@media (min-width: 992px) {
display: grid;
grid-template-columns: calc((100% - var(--wrap)) / 2) auto 1fr calc((100% - var(--wrap)) / 2);
grid-template-rows: auto auto auto 1fr;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
&:before{
grid-column: 1 / 5;
}
& h2{
min-width: 200px;
justify-items: center;
& span{
width: 6em;
word-break: keep-all;
overflow-wrap: anywhere;
}
}
#interviewList{
display: contents;
}
#interviewLink{
grid-column: 2;
margin-bottom: auto;
}
.slick-slider{
display: contents;
}
.slick-list{
grid-column: 3 / 5;
grid-row: 2 / 5;
margin: clamp(24px, calc(64 / 1200 * 100vw), 64px) 0 0 132px;
}
.slick-slide{
width: 305px;
margin-right: 32px;
}
.slick-arrow{
grid-column: 2;
grid-row: 4;
justify-self: center;
align-self: start;
margin-top: 48px;
}
.slick-prev{
transform: translateX(calc(0px - 50% - 16px));
}
.slick-next{
transform: translateX(calc(50% + 16px));
}
}
}
#interviewList{
& section{
position: relative;
display: grid;
align-content: start;
&:not(:has(img)):before{
content: "";
aspect-ratio: 322 / 205;
background: var(--dummy);
}
& figure{
order: -1;
}
& img{
aspect-ratio: 322 / 205;
}
@media (min-width: 576px) {
width: min(100%, 304px);
&:not(:has(img)):before,
& img{
aspect-ratio: 305 / 365;
}
}
}
& h3{
margin-top: 8px;
font-weight: 700;
font-size: clamp(18px, calc(20 / 768 * 100vw), 20px);
}
& h3+div{
display: contents;
}
& li{
display: grid;
grid-template-columns: auto 1fr;
font-weight: 700;
font-size: clamp(18px, calc(20 / 768 * 100vw), 20px);
&:before{
content: "\30FB";
}
}
& a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 0;
}
& figure{
& img{
object-fit: cover;
}
}
.slide{
&:not(.slick-initialized){
grid-gap: 24px clamp(16px, calc(32 / 1200 * 100vw), 32px);
display: grid;
& section:nth-child(n+4){
display: none;
}
@media (min-width: 576px) {
grid-template-columns: repeat(3, 1fr);
}
}
}
}
#instagram{
display: grid;
grid-template-columns: var(--wrap);
justify-content: center;
padding-top: clamp(40px, calc(56 / 1200 * 100vw), 56px);
background: #f6f6f4;
&:before{
content: "Life";
color: #fff;
font: 500 clamp(56px, calc(140 / 1200 * 100vw), 140px) helvetica-lt-pro, sans-serif;
line-height: 1;
-webkit-text-stroke-width: clamp(0.5px, calc(1 / 1200 * 100vw), 1px);
-webkit-text-stroke-color: var(--color);
-webkit-text-fill-color : #fff;
}
& h2{
display: grid;
margin-top: 16px;
font-weight: 700;
font-size: clamp(18px, calc(24 / 768 * 100vw), 24px);
text-align: center;
& span{
display: grid;
grid-template-columns: auto auto;
justify-content: center;
align-items: center;
grid-gap: 8px;
color: #5fb7d1;
font-size: clamp(24px, calc(40 / 768 * 100vw), 40px);
&:before{
content: "";
aspect-ratio: 1;
width: 1.2em;
background: black;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
}
& h2+div{
justify-self: center;
width: min(100%, 26em);
margin-top: clamp(16px, calc(32 / 1200 * 100vw), 32px);
font-size: clamp(15px, calc(24 / 768 * 100vw), 24px);
font-weight: 700;
letter-spacing: 0.01em;
text-align: center;
@media (min-width: 768px) {
letter-spacing: 0.05em;
}
}
#instagramList{
margin-top: clamp(16px, calc(40 / 1200 * 100vw), 40px);
}
#instagramLink{
margin-top: clamp(24px, calc(40 / 1200 * 100vw), 40px);
}
@media (min-width: 768px) {
&:before{
grid-column: 1;
grid-row: 1;
}
& h2{
grid-column: 1;
grid-row: 1;
margin-top: clamp(24px, calc(56 / 1200 * 100vw), 56px);
}
#instagramLink{
justify-content: end;
}
}
}
#instagramList{
& ul{
display: grid;
grid-gap: clamp(8px, calc(16 / 1200 * 100vw), 16px);
}
& li{
display: contents;
}
& a{
display: block;
}
& img{
aspect-ratio: 230 / 240;
object-fit: cover;
}
@media (max-width: 575.98px) {
& ul{
grid-template-columns: repeat(2, 1fr);
}
& li:nth-child(n+7){
display: none;
}
}
@media (min-width: 576px) and (max-width: 767.98px) {
& ul{
grid-template-columns: repeat(3, 1fr);
}
& li:nth-child(n+10){
display: none;
}
& img{
aspect-ratio: 230 / 269;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
& ul{
grid-template-columns: repeat(4, 1fr);
}
& li:nth-child(n+9){
display: none;
}
}
@media (min-width: 992px) {
& ul{
grid-template-columns: repeat(5, 1fr);
}
}
}
#menu{
display: grid;
grid-template-columns: var(--wrap);
justify-content: center;
padding: clamp(24px, calc(88 / 1200 * 100vw), 88px) 0 calc(64px + clamp(64px, calc(200 / 1200 * 100vw), 200px)) 0;
background: #f6f6f4;
& h2{
display: none;
}
& ul{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: clamp(16px, calc(32 / 1200 * 100vw), 32px);
@media (min-width: 768px) {
grid-template-columns: repeat(3, 1fr);
}
}
& li{
display: contents;
}
& a{
display: grid;
grid-template-columns: auto 1fr;
align-items: end;
grid-gap: 8px clamp(8px, calc(16 / 1200 * 100vw), 16px);
padding: clamp(8px, calc(24 / 1200 * 100vw), 24px);
background: #fff;
border: 1px solid currentColor;
border-radius: clamp(16px, calc(32 / 768 * 100vw), 32px) 0 clamp(16px, calc(32 / 768 * 100vw), 32px) 0;
color: inherit;
font-weight: 700;
font-size: clamp(14px, calc(26 / 1200 * 100vw), 26px);
text-align: center;
text-decoration: none;
&:before{
content: "";
grid-column: 1;
grid-row: 1 / 3;
align-self: center;
aspect-ratio: 1;
width: clamp(48px, calc(120 / 1200 * 100vw), 120px);
background: #4d4d4d;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
&:after{
content: "";
justify-self: center;
align-self: start;
aspect-ratio: 1;
width: clamp(16px, calc(40 / 1200 * 100vw), 40px);
background: #79c3d8 url('data:image/svg+xml;charset=UTF-8,') no-repeat center / min(50%, 10px);
border-radius: 100%;
}
li:nth-child(1) &:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
li:nth-child(2) &:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
li:nth-child(3) &:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
li:nth-child(4) &:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
li:nth-child(5) &:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
li:nth-child(6) &:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
}
}
#support{
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
margin-top: calc(0px - clamp(64px, calc(200 / 1200 * 100vw), 200px));
padding-top: clamp(48px, calc(96 / 1200 * 100vw), 96px);
background: #d3ebf2;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center top / 100% clamp(64px, calc(200 / 1200 * 100vw), 200px), url('data:image/svg+xml;charset=UTF-8,') no-repeat center bottom / 100% calc(100% - clamp(63px, calc(199 / 1200 * 100vw), 199px));
&:before{
content: "Support";
grid-column: 1 / 4;
justify-self: center;
width: min(var(--wrap-fit), 1200px);
color: #fff;
font: 500 clamp(56px, calc(140 / 1200 * 100vw), 140px) helvetica-lt-pro, sans-serif;
line-height: 1;
-webkit-text-stroke-width: clamp(0.5px, calc(1 / 1200 * 100vw), 1px);
-webkit-text-stroke-color: var(--color);
-webkit-text-fill-color : #fff;
}
&>*{
grid-column: 2;
}
& h2{
margin-top: clamp(24px, calc(48 / 1200 * 100vw), 48px);
font-weight: 700;
font-size: clamp(22px, calc(40 / 768 * 100vw), 40px);
text-align: center;
}
& h2+div{
margin-top: clamp(16px, calc(56 / 1200 * 100vw), 56px);
font-size: clamp(15px, calc(22 / 768 * 100vw), 22px);
font-weight: 700;
letter-spacing: 0.01em;
@media (min-width: 768px) {
letter-spacing: 0.05em;
}
}
#supportLink{
margin-top: clamp(16px, calc(24 / 1200 * 100vw), 24px);
}
#supportExample{
margin-top: 24px;
}
#supportPhoto{
grid-row: 3;
margin-top: 16px;
}
@media (min-width: 768px) {
grid-template-columns: calc((100% - min(var(--wrap-fit), 1200px))/2) auto 1fr calc((100% - min(var(--wrap-fit), 1200px))/2);
&:before{
grid-column: 1 / 5;
}
& h2{
grid-column: 2 / 4;
}
& h2+div{
grid-column: 3;
margin-top: clamp(32px, calc(56 / 1200 * 100vw), 56px);
}
#supportLink{
grid-column: 3;
margin-bottom: auto;
}
#supportExample{
grid-column: 3;
margin-top: 24px;
}
#supportPhoto{
grid-column: 2;
grid-row: 3 / 6;
width: min(40vw, 525px);
margin: clamp(32px, calc(56 / 1200 * 100vw), 56px) clamp(32px, calc(56 / 1200 * 100vw), 56px) 0 0;
}
}
}
#supportLink{
& a{
background: #eacc15;
border-color: transparent;
&:before{
background: #fff;
}
}
}
#supportExample{
display: grid;
grid-row-gap: 24px;
justify-content: center;
&>*{
grid-column: 2;
}
& h3{
font-weight: 700;
font-size: clamp(15px, calc(22 / 768 * 100vw), 22px);
}
& h4{
display: grid;
align-items: center;
width: 240px;
height: 64px;
background: #79c3d8;
color: #fff;
font-weight: 700;
font-size: clamp(20px, calc(21 / 768 * 100vw), 21px);
letter-spacing: 0.05em;
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
& h4+div{
margin-top: 16px;
}
& ul{
display: grid;
grid-row-gap: 4px;
}
& li{
display: grid;
grid-template-columns: auto 1fr;
column-gap: 4px;
font-weight: 700;
font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
&:before{
content: "\3007";
}
}
@media (max-width: 991.98px) {
grid-template-columns: 1fr auto 1fr;
& h3{
grid-column: 1 / 4;
}
& h4{
margin: 0 auto;
}
}
@media (min-width: 992px) {
grid-template-columns: repeat(2, auto);
justify-content: space-between;
column-gap: 24px;
&>*{
grid-column: unset;
}
& h3{
grid-column: 1 / 3;
}
}
}
#supportPhoto{
& img{
aspect-ratio: 324 / 228;
object-fit: cover;
@media (min-width: 768px) {
aspect-ratio: 525 / 493;
}
}
}
#flow{
display: grid;
grid-template-columns: var(--wrap);
justify-content: center;
padding: clamp(32px, calc(72 / 1200 * 100vw), 72px) 0 clamp(24px, calc(64 / 1200 * 100vw), 64px) 0;
background: #d3ebf2;
& h2{
font-weight: 700;
font-size: clamp(22px, calc(40 / 768 * 100vw), 40px);
text-align: center;
}
& h2+div{
display: grid;
grid-gap: clamp(40px, calc(48 / 1200 * 100vw), 48px);
margin-top: clamp(32px, calc(56 / 1200 * 100vw), 56px);
@media (min-width: 992px) {
grid-template-columns: repeat(3, 1fr);
}
}
& section{
counter-increment: count;
position: relative;
display: grid;
grid-template-rows: auto auto 1fr;
grid-row-gap: 16px;
padding: clamp(24px, calc(32 / 1200 * 100vw), 32px) clamp(16px, calc(24 / 1200 * 100vw), 24px);
background: #fff;
border: 1px solid currentColor;
border-radius: 32px;
&:before{
content: "";
justify-self: center;
width: min(80%, 240px);
margin-top: 24px;
aspect-ratio: 3 / 2;
background: #4d4d4d;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
&:nth-child(1){
&:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,')
}
& h3{
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
& h4+div{
width: min(100%, 14em);
}
}
&:nth-child(2){
&:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,')
}
& h3{
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
}
&:nth-child(3){
&:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,')
}
& h3{
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
& h4+div{
width: min(100%, 15em);
}
}
}
& h3{
position: absolute;
top: 0;
left: 0;
aspect-ratio: 1;
width: clamp(96px, calc(104 / 768 * 100vw), 104px);
background: #79c3d8 url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
border-radius: 100%;
font-size: 0;
transform: translate(-16px, -16px);
&:after{
content: "";
position: absolute;
top: 0;
left: 0;
aspect-ratio: 1;
width: 100%;
background: var(--color);
transform: translate(-4px, -4px);
z-index: 1;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
& h4{
color: #5fb7d1;
font-weight: 700;
font-size: clamp(22px, calc(24 / 768 * 100vw), 24px);
text-align: center;
}
& h4+div{
justify-self: center;
font-weight: 700;
font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
text-align: center;
word-break: keep-all;
overflow-wrap: anywhere;
}
}
.slick-arrow{
all: unset;
box-sizing: border-box;
cursor: pointer;
position: relative;
display: grid;
aspect-ratio: 1;
width: clamp(44px, calc(84 / 1200 * 100vw), 84px);
background: #fff;
border: 1px solid #79c3d8;
border-radius: 100%;
color: #79c3d8;
font-size: 0;
z-index: 1;
&: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 / clamp(10px, calc(20 / 1200 * 100vw), 20px);
}
&.slick-prev:before{
transform: scale(-1, 1);
}
&:hover{
background: #79c3d8;
color: #fff;
}
}