/* CSS Document */
/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.min.css */
*,::before,::after{box-sizing:border-box;border-style:solid;border-width:0;min-width:0}html{line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{margin:0}main{display:block}p,table,blockquote,address,pre,iframe,form,figure,dl{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0}ul,ol{margin:0;padding:0;list-style:none}dt{font-weight:700}dd{margin-left:0}hr{box-sizing:content-box;height:0;overflow:visible;border-top-width:1px;margin:0;clear:both;color:inherit}pre{font-family:monospace,monospace;font-size:inherit}address{font-style:inherit}a{background-color:transparent;text-decoration:none;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:inherit}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}svg,img,embed,object,iframe{vertical-align:bottom}button,input,optgroup,select,textarea{-webkit-appearance:none;appearance:none;vertical-align:middle;color:inherit;font:inherit;background:transparent;padding:0;margin:0;border-radius:0;text-align:inherit;text-transform:inherit}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer}button:disabled,[type="button"]:disabled,[type="reset"]:disabled,[type="submit"]:disabled{cursor:default}:-moz-focusring{outline:auto}select:disabled{opacity:inherit}option{padding:0}fieldset{margin:0;padding:0;min-width:0}legend{padding:0}progress{vertical-align:baseline}textarea{overflow:auto}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type="number"]{-moz-appearance:textfield}label[for]{cursor:pointer}details{display:block}summary{display:list-item}[contenteditable]:focus{outline:auto}table{border-color:inherit;border-collapse:collapse}caption{text-align:left}td,th{vertical-align:top;padding:0}th{text-align:left;font-weight:700}
@import url('//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700&display=swap');
:root{
--color: #000;
--color-rgb: 0, 0, 0;
--color-theme: #0099a8;
--color-theme-rgb: 0, 153, 168;
--font: 'Noto Sans JP', 'BIZ UDPGothic', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
--wrap-fit: calc(min(100dvw, 100%) - 48px);
--wrap-min: 375px;
--wrap-max: 1140px;
--wrap: clamp(calc(var(--wrap-min) - 48px), var(--wrap-fit), var(--wrap-max));
--dummy: #99d6dc url('../images/logo.svg') no-repeat center / 75%;
}
html{
min-width: var(--wrap-min);
scroll-behavior: smooth;
scroll-padding-top: 56px;
}
body{
color: var(--color);
font: 500 16px var(--font);
line-height: 1.65;
overflow-wrap: anywhere;
}
::selection{
background: var(--color-theme);
color: #fff;
}
::-moz-selection{
background: var(--color-theme);
color: #fff;
}
_::content, _:future, body:not(*:root) {
/* Chromeのハック */
/*フォント細いって言われたとき
font-weight: 500;
*/
}
_::-webkit-full-page-media, _:future, :root body{
/* safariのハック */
}
@-moz-document url-prefix(){
/* Firefoxのハック */
.xxx{
}
}
a{
color: inherit;
.done &{
transition-property: color, text-decoration, background, background-color, background-size, border, border-color, box-shadow, filter, opacity;
transition-duration: 0.2s;
transition-timing-function: ease-out;
}
}
img{
width: 100%;
height: auto;
&[src="[url]"]{
display: block;
background: var(--dummy);
}
}
wbr{
.translated-ltr &:not(:lang(ja)){
display: none;
}
}
#wrapper{
display: grid;
#nav{
grid-row: 2;
}
}
#header{
display: grid;
grid-template-columns: 1fr min(100%, 1400px) 1fr;
& h1{
grid-column: 2;
grid-row: 1;
aspect-ratio: 41 / 30;
width: clamp(240px, calc(560 / 1200 * 100vw), 560px);
background: url('../images/logo.svg') no-repeat center / contain;
font-size: 0;
transform: translate(clamp(8px, calc(48 / 1200 * 100vw), 48px), clamp(16px, calc(56 / 1200 * 100vw), 56px));
z-index: 1;
}
#headerPhoto{
grid-column: 1 / 4;
grid-row: 1;
}
}
#headerPhoto{
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center top / 100% calc(100% - clamp(40px, calc(120 / 1400 * 100vw), 120px) + 1px), url('data:image/svg+xml;charset=UTF-8,') no-repeat center bottom / 100% clamp(40px, calc(120 / 1400 * 100vw), 120px);
& ul{
display: grid;
}
& li{
grid-column: 1;
grid-row: 1;
}
& img{
width: 100%;
height: clamp(480px, calc(616 / 1200 * 100vw), 616px);
object-fit: cover;
}
.slide{
}
}
#nav{
position: relative;
display: grid;
grid-template-columns: var(--wrap);
justify-content: center;
margin-top: calc(0px - clamp(112px, calc(136 / 1200 * 100vw), 136px));
padding-top: clamp(96px, calc(104 / 1200 * 100vw), 104px);
background: var(--pict_nav) no-repeat calc(50% - min(50dvw, 700px) + clamp(52px, calc(104 / 1200 * 100vw), 104px)) top / clamp(168px, calc(336 / 1200 * 100vw), 336px) auto;
pointer-events: none;
z-index: 1;
& h2{
display: none;
}
& h2+div{
display: flex;
flex-wrap: wrap;
justify-content: center;
grid-gap: clamp(16px, calc(32 / 1200 * 100vw), 32px);
pointer-events: all;
}
& dl{
position: relative;
display: grid;
min-width: clamp(152px, calc(190 / 1200 * 100vw), 190px);
&:has(a[href="#nav_feature"]){
& dt{
background: #0099a8;
}
& img{
border-color: #0099a8;
}
}
&:has(a[href="#nav_itineraries"]){
& dt{
background: #ff9002;
}
& img{
border-color: #ff9002;
}
}
&:has(a[href="#nav_experience"]){
& dt{
background: #d8aa52;
}
& img{
border-color: #d8aa52;
}
}
&:has(a[href="#nav_event"]){
& dt{
background: #ffa4bb;
}
& img{
border-color: #ffa4bb;
}
}
}
& dt{
display: grid;
grid-template-columns: auto auto;
justify-content: center;
align-items: center;
column-gap: 8px;
min-height: 40px;
padding: 4px 16px;
background: #000;
border-radius: 20px;
color: #fff;
font-weight: 700;
font-size: clamp(16px, calc(20 / 1200 * 100vw), 20px);
text-align: center;
&:after{
content: "";
aspect-ratio: 1;
width: 16px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
& dd{
&:has(a){
display: contents;
}
&:has(img){
order: -1;
justify-self: center;
margin-bottom: -16px;
}
& img{
aspect-ratio: 1;
width: clamp(120px, calc(150 / 1200 * 100vw), 150px);
object-fit: cover;
border: 6px solid;
border-radius: 100%;
}
& a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 0;
}
}
}
#floatingNav{
position: fixed;
top: 8px;
left: 50%;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
width: min(calc(100% - 16px), 1300px);
background: #fff;
border-radius: clamp(8px, calc(16 / 1200 * 100vw), 16px);
transform: translate(-50%, calc(0px - 100% - 8px));
transition: transform 0.2s ease-out;
z-index: 10;
@media (max-width: 575.98px) {
grid-template-columns: 1fr;
& h2{
display: none;
}
}
@media (min-width: 768px) {
& dl{
width: clamp(160px, calc(200 / 1200 * 100vw), 200px);
}
}
&.fixed{
transform: translate(-50%, 0);
}
& h2{
aspect-ratio: 98 / 80;
margin: 8px clamp(16px, calc(24 / 1200 * 100vw), 24px);
width: clamp(64px, calc(98 / 1200 * 100vw), 98px);
background: currentColor;
font-size: 0;
-webkit-mask: var(--logo) no-repeat center / contain;
}
& h2+div{
display: grid;
grid-template-columns: repeat(4, auto);
grid-gap: clamp(4px, calc(8 / 1200 * 100vw), 8px);
margin: clamp(8px, calc(24 / 1200 * 100vw), 24px);
}
& dl{
position: relative;
&:has(a[href="#nav_feature"]){
& dt{
background: #0099a8;
}
& img{
border-color: #0099a8;
}
}
&:has(a[href="#nav_itineraries"]){
& dt{
background: #ff9002;
}
& img{
border-color: #ff9002;
}
}
&:has(a[href="#nav_experience"]){
& dt{
background: #d8aa52;
}
& img{
border-color: #d8aa52;
}
}
&:has(a[href="#nav_event"]){
& dt{
background: #ffa4bb;
}
& img{
border-color: #ffa4bb;
}
}
}
& dt{
display: grid;
grid-template-columns: auto auto;
justify-content: center;
align-items: center;
column-gap: clamp(8px, calc(16 / 768 * 100vw), 16px);
min-height: clamp(32px, calc(48 / 768 * 100vw), 48px);
padding: 4px clamp(8px, calc(16 / 768 * 100vw), 16px);
background: #000;
border-radius: clamp(16px, calc(24 / 768 * 100vw), 24px);
color: #fff;
font-weight: 700;
font-size: clamp(10px, calc(16 / 768 * 100vw), 16px);
text-align: center;
&:after{
content: "";
aspect-ratio: 1;
width: clamp(8px, calc(14 / 768 * 100vw), 14px);
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
& dd{
&:has(a){
display: contents;
}
&:has(img){
display: none;
}
& a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 0;
}
}
}
#footer{
display: grid;
grid-template-columns: var(--wrap);
justify-content: center;
margin-bottom: 32px;
padding-top: clamp(112px, calc(240 / 1200 * 100vw), 200px);
background: var(--pict_footer) no-repeat calc(50% - min(50dvw, 700px) + clamp(56px, calc(112 / 1200 * 100vw), 112px)) top / clamp(148px, calc(296 / 1200 * 100vw), 296px) auto;
}
#copyright{
display: flex;
justify-content: center;
& a{
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
column-gap: 8px;
font-weight: 700;
&:before{
content: "";
aspect-ratio: 1;
width: 18px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
}
#hero{
display: grid;
grid-template-columns: var(--wrap);
justify-content: center;
margin-block-end: calc(0px - clamp(40px, calc(80 / 1200 * 100vw), 80px));
padding: clamp(64px, calc(104 / 1200 * 100vw), 104px) 0 clamp(120px, calc(152 / 1200 * 100vw), 152px) 0;
background: var(--pict_hero) no-repeat calc(50% + min(50dvw, 700px) - clamp(48px, calc(136 / 1200 * 100vw), 136px)) bottom / clamp(168px, calc(336 / 1200 * 100vw), 336px) auto;
font-weight: 700;
font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
text-align: center;
line-height: 2.67em;
word-break: keep-all;
overflow-wrap: anywhere;
@media (min-width: 576px) {
grid-template-columns: min(calc(var(--wrap-fit) * 0.75), 34em);
}
}
#feature,
#itineraries,
#experience,
#event{
& h2{
display: grid;
grid-row-gap: 8px;
font-weight: 700;
font-size: clamp(18px, calc(24 / 768 * 100vw), 24px);
text-align: center;
&:before{
content: "";
justify-self: center;
aspect-ratio: 5 / 1;
height: clamp(48px, calc(72 / 768 * 100vw), 71px);
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
#feature &:before{
aspect-ratio: 100 / 21;
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
#itineraries &:before{
aspect-ratio: 300 / 43;
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
#experience &:before{
aspect-ratio: 75 / 11;
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
#event &:before{
aspect-ratio: 300 / 71;
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
}
[id^="nav_"]{
scroll-margin-top: 32px;
}
}
#featureLink,
#itinerariesLink,
#experienceLink,
#eventLink{
display: flex;
justify-content: center;
& a{
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
column-gap: 8px;
min-width: min(100%, 360px);
min-height: clamp(48px, calc(56 / 1200 * 100vw), 56px);
padding: 4px 16px;
background: #fff;
border: 1px solid currentColor;
border-radius: clamp(24px, calc(28 / 1200 * 100vw), 28px);
text-align: center;
&:after{
content: "";
aspect-ratio: 1;
width: 16px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
&:hover{
background: #000;
border-color: transparent;
color: #fff;
}
}
}
#feature{
position: relative;
display: grid;
grid-template-columns: var(--wrap);
justify-content: center;
padding: clamp(120px, calc(196 / 1200 * 100vw), 196px) 0 clamp(200px, calc(400 / 1200 * 100vw), 400px) 0;
background:
var(--pict_feature-01) no-repeat calc(50% - min(50dvw, 700px) + clamp(40px, calc(84 / 1200 * 100vw), 84px)) top / clamp(88px, calc(176 / 1200 * 100vw), 176px) auto,
var(--pict_feature-02) no-repeat calc(50% + min(50dvw, 700px) - clamp(104px, calc(264 / 1200 * 100vw), 264px)) calc(100% - clamp(24px, calc(32 / 1200 * 100vw), 32px)) / clamp(240px, calc(600 / 1200 * 100vw), 600px) auto
;
&:before,
&:after{
content: "";
position: absolute;
left: 0;
width: 100%;
z-index: -1;
}
&:before{
top: -1px;
height: 100%;
background:
url('data:image/svg+xml;charset=UTF-8,') no-repeat center bottom/ 100% clamp(112px, calc(320 / 1400 * 100vw), 320px),
url('data:image/svg+xml;charset=UTF-8,') no-repeat center calc(100% - clamp(32px, calc(96 / 1200 * 100vw), 96px)) / 100% clamp(152px, calc(440 / 1400 * 100vw), 440px),
url('data:image/svg+xml;charset=UTF-8,') no-repeat center 416px / 100% clamp(56px, calc(160 / 1400 * 100vw), 160px),
url('data:image/svg+xml;charset=UTF-8,') no-repeat center bottom / 100% calc(100% - clamp(56px, calc(160 / 1400 * 100vw), 160px) - 416px + 1px),
url('data:image/svg+xml;charset=UTF-8,') no-repeat center clamp(16px, calc(20 / 1200 * 100vw), 20px) / 100% clamp(64px, calc(180 / 1400 * 100vw), 180px),
url('data:image/svg+xml;charset=UTF-8,') no-repeat center bottom / 100% calc(100% - clamp(64px, calc(180 / 1400 * 100vw), 180px) - clamp(16px, calc(20 / 1200 * 100vw), 20px) + 1px),
url('data:image/svg+xml;charset=UTF-8,') center top / clamp(8px, calc(14 / 1200 * 100vw), 14px)
;
-webkit-mask:
url('data:image/svg+xml;charset=UTF-8,') no-repeat center bottom / 100% calc(100% - clamp(64px, calc(180 / 1400 * 100vw), 180px) + 1px),
url('data:image/svg+xml;charset=UTF-8,') no-repeat center top / 100% clamp(64px, calc(180 / 1400 * 100vw), 180px)
;
}
&:after{
bottom: 0;
height: calc(clamp(80px, calc(240 / 1400 * 100vw), 240px) + clamp(16px, calc(32 / 1200 * 100vw), 32px));
background:
url('data:image/svg+xml;charset=UTF-8,') no-repeat center clamp(16px, calc(32 / 1200 * 100vw), 32px) / 100% clamp(80px, calc(240 / 1400 * 100vw), 240px),
url('data:image/svg+xml;charset=UTF-8,') no-repeat center bottom / 100% calc(100% - clamp(80px, calc(240 / 1400 * 100vw), 240px) - clamp(16px, calc(32 / 1200 * 100vw), 32px) + 1px),
url('data:image/svg+xml;charset=UTF-8,') center top / clamp(8px, calc(14 / 1200 * 100vw), 14px)
;
-webkit-mask:
url('data:image/svg+xml;charset=UTF-8,') no-repeat center top / 100% clamp(80px, calc(240 / 1400 * 100vw), 240px),
url('data:image/svg+xml;charset=UTF-8,') no-repeat center bottom / 100% calc(100% - clamp(80px, calc(240 / 1400 * 100vw), 240px) + 1px)
;
}
& h2{
color: #fff;
}
#featureList{
margin-top: clamp(32px, calc(56 / 1200 * 100vw), 56px);
}
#featureLink{
margin-top: clamp(48px, calc(80 / 1200 * 100vw), 80px);
}
}
#featureList{
display: grid;
grid-gap: clamp(32px, calc(56 / 1200 * 100vw), 56px);
@media (min-width: 576px) {
grid-template-columns: repeat(2, 1fr);
}
& section{
display: grid;
grid-template-columns: 0 1fr 0;
grid-template-rows: auto auto 1fr;
column-gap: clamp(24px, calc(48 / 1200 * 100vw), 48px);
padding-bottom: clamp(24px, calc(40 / 1200 * 100vw), 40px);
background: #fff;
border-radius: clamp(8px, calc(16 / 1200 * 100vw), 16px);
overflow: hidden;
&>*{
grid-column: 2;
}
&:nth-child(n+5){
display: none;
}
&:not(:has(img)):before{
content: "";
grid-column: 1 / 4;
grid-row: 1;
aspect-ratio: 3 / 2;
margin-bottom: clamp(24px, calc(40 / 1200 * 100vw), 40px);
background: var(--dummy);
}
& h3+div+div{
margin-top: clamp(24px, calc(40 / 1200 * 100vw), 40px);
}
& figure{
grid-column: 1 / 4;
grid-row: 1;
margin-bottom: clamp(24px, calc(40 / 1200 * 100vw), 40px);
& img{
aspect-ratio: 3 / 2;
}
}
}
& h3{
display: grid;
font-weight: 700;
font-size: clamp(18px, calc(24 / 768 * 100vw), 24px);
&:after{
content: "";
height: 2px;
margin: clamp(16px, calc(24 / 1200 * 100vw), 24px) 0;
background: currentColor;
border-radius: 1px;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') repeat-x center left;
}
}
& h3+div+div{
display: flex;
justify-content: center;
& a{
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
min-width: min(100%, 240px);
min-height: clamp(48px, calc(56 / 1200 * 100vw), 56px);
padding: 4px 16px;
border: 1px solid currentColor;
border-radius: clamp(24px, calc(28 / 1200 * 100vw), 28px);
text-align: center;
&:after{
content: "";
aspect-ratio: 1;
width: 16px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
&:hover{
background: #000;
border-color: transparent;
color: #fff;
}
}
}
& figure{
& img{
object-fit: cover;
}
}
}
#itineraries{
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
margin-block-end: clamp(48px, calc(64 / 1200 * 100vw), 64px);
&>*{
grid-column: 2;
}
#itinerariesList{
margin-top: clamp(32px, calc(56 / 1200 * 100vw), 56px);
&:has(.slick-initialized){
grid-column: 1 / 4;
}
}
#itinerariesLink{
margin-top: clamp(48px, calc(64 / 1200 * 100vw), 64px);
}
}
#itinerariesList{
overflow: hidden;
& section{
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 2px 1fr 2px;
align-items: center;
grid-gap: 0 clamp(16px, calc(24 / 1200 * 100vw), 24px);
@media (min-width: 1200px) {
grid-template-columns: 300px 1fr;
}
&:before,
&:after{
content: "";
height: 2px;
background: currentColor;
border-radius: 1px;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') repeat-x center left;
}
&:not(:has(img)) h3+div:before{
content: "";
grid-column: 1;
grid-row: 1 / 4;
aspect-ratio: 3 / 2;
background: var(--dummy);
border-radius: clamp(8px, calc(16 / 1200 * 100vw), 16px);
}
& figure{
grid-column: 1;
grid-row: 1 / 4;
& img{
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: clamp(8px, calc(16 / 1200 * 100vw), 16px);
}
}
}
& h3{
font-weight: 700;
font-size: clamp(14px, calc(20 / 1200 * 100vw), 20px);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
max-height: calc(1.65em * 3);
overflow: hidden;
}
& h3+div{
display: contents;
& a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 0;
}
}
& figure{
& img{
object-fit: cover;
}
}
.slick-slider{
display: grid;
grid-template-columns: auto min(calc(100% - clamp(120px, calc(240 / 1200 * 100vw), 240px)), var(--wrap-max)) auto;
column-gap: clamp(16px, calc(32 / 1200 * 100vw), 32px);
align-items: center;
}
.slick-list{
grid-column: 2;
margin: 0 calc(0px - clamp(12px, calc(28 / 1200 * 100vw), 28px));
}
.slick-slide{
margin: 0 clamp(12px, calc(28 / 1200 * 100vw), 28px);
}
.slick-arrow{
all: unset;
box-sizing: border-box;
cursor: pointer;
position: relative;
aspect-ratio: 1;
width: clamp(32px, calc(56 / 1200 * 100vw), 56px);
background: #fff;
border: 1px solid currentColor;
border-radius: 100%;
color: inherit;
font-size: 0;
overflow: hidden;
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 / 16px;
}
&.slick-prev:before{
transform: scale(-1, 1);
}
}
.slick-prev{
justify-self: end;
}
}
#experience{
position: relative;
display: grid;
grid-template-columns: var(--wrap);
justify-content: center;
margin-block-end: calc(0px - clamp(8px, calc(24 / 1200 * 100vw), 24px));
padding: clamp(136px, calc(240 / 1200 * 100vw), 240px) 0 clamp(224px, calc(464 / 1200 * 100vw), 464px) 0;
background:
var(--pict_experience-01) no-repeat calc(50% - min(50dvw, 700px) + clamp(48px, calc(96 / 1200 * 100vw), 96px)) top / clamp(144px, calc(288 / 1200 * 100vw), 288px) auto,
var(--pict_experience-02) no-repeat calc(50% + min(50dvw, 700px) - clamp(88px, calc(176 / 1200 * 100vw), 176px)) calc(100% - clamp(80px, calc(200 / 1200 * 100vw), 200px)) / clamp(232px, calc(464 / 1200 * 100vw), 464px) auto
;
&:before,
&:after{
content: "";
position: absolute;
left: 0;
width: 100%;
z-index: -1;
}
&:before{
top: -1px;
height: 100%;
background:
url('data:image/svg+xml;charset=UTF-8,') no-repeat center calc(100% - clamp(24px, calc(72 / 1200 * 100vw), 72px)) / 100% clamp(152px, calc(440 / 1400 * 100vw), 440px),
url('data:image/svg+xml;charset=UTF-8,') no-repeat center 384px / 100% clamp(56px, calc(160 / 1400 * 100vw), 160px),
url('data:image/svg+xml;charset=UTF-8,') no-repeat center bottom / 100% calc(100% - clamp(56px, calc(160 / 1400 * 100vw), 160px) - 384px + 1px),
url('data:image/svg+xml;charset=UTF-8,') no-repeat center clamp(16px, calc(32 / 1200 * 100vw), 32px) / 100% clamp(56px, calc(160 / 1400 * 100vw), 160px),
url('data:image/svg+xml;charset=UTF-8,') no-repeat center bottom / 100% calc(100% - clamp(56px, calc(160 / 1400 * 100vw), 160px) - clamp(16px, calc(32 / 1200 * 100vw), 32px) + 1px),
url('data:image/svg+xml;charset=UTF-8,') center top / clamp(8px, calc(14 / 1200 * 100vw), 14px)
;
-webkit-mask:
url('data:image/svg+xml;charset=UTF-8,') no-repeat center top / 100% clamp(56px, calc(160 / 1400 * 100vw), 160px),
url('data:image/svg+xml;charset=UTF-8,') no-repeat center bottom / 100% calc(100% - clamp(56px, calc(160 / 1400 * 100vw), 160px) + 1px)
;
}
&:after{
bottom: 0;
height: calc(clamp(112px, calc(320 / 1400 * 100vw), 320px) + clamp(16px, calc(32 / 1200 * 100vw), 32px));
background:
url('data:image/svg+xml;charset=UTF-8,') no-repeat center clamp(16px, calc(32 / 1200 * 100vw), 32px) / 100% clamp(112px, calc(320 / 1400 * 100vw), 320px),
url('data:image/svg+xml;charset=UTF-8,') no-repeat center bottom / 100% calc(100% - clamp(112px, calc(320 / 1400 * 100vw), 320px) - clamp(16px, calc(32 / 1200 * 100vw), 32px) + 1px),
url('data:image/svg+xml;charset=UTF-8,') center top / clamp(8px, calc(14 / 1200 * 100vw), 14px)
;
-webkit-mask:
url('data:image/svg+xml;charset=UTF-8,') no-repeat center top / 100% clamp(112px, calc(320 / 1400 * 100vw), 320px),
url('data:image/svg+xml;charset=UTF-8,') no-repeat center bottom / 100% calc(100% - clamp(112px, calc(320 / 1400 * 100vw), 320px) + 1px)
;
}
&:not(:has(#experienceTag .select)) #experienceList section:nth-child(n+9){
display: none;
}
& h2{
color: #fff;
}
#experienceTag{
margin-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
}
#experienceList{
margin-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
}
#experienceLink{
margin-top: clamp(48px, calc(80 / 1200 * 100vw), 80px);
}
}
#experienceTag{
color: #fff;
& h3{
display: flex;
justify-content: center;
align-items: center;
column-gap: 8px;
font-weight: 700;
&:before,
&:after{
content: "";
aspect-ratio: 1;
width: 18px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
& h3+div{
margin-top: 24px;
&:not(:has(ul[style])) menu{
display: none;
}
}
& ul{
display: flex;
flex-wrap: wrap;
justify-content: center;
grid-gap: 16px 8px;
overflow: hidden;
}
& li{
display: block;
padding: 0px 24px;
border: 1px solid currentColor;
border-radius: 20px;
font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
line-height: 38px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
cursor: pointer;
z-index: 1;
&[data-count]{
position: relative;
padding-right: 64px;
&:after{
content: '000';
position: absolute;
top: 50%;
right: 0;
display: grid;
align-items: center;
width: 40px;
background: #fff;
border-radius: 100%;
color: #c2943b;
text-align: center;
overflow: hidden;
transform: translateY(-50%) scale(0.7);
}
}
&.select{
background: #fff;
border-color: transparent;
color: #c2943b;
&:after{
background: #c2943b;
color: #fff;
}
}
}
& menu{
all: unset;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
column-gap: 8px;
margin-top: 8px;
font-weight: 700;
&:after{
content: "";
aspect-ratio: 1;
width: 16px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
&.open:after{
transform: scale(1, -1);
}
}
}
#experienceList{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 16px), 200px), 1fr));
grid-gap: clamp(32px, calc(56 / 1200 * 100vw), 56px) clamp(16px, calc(56 / 1200 * 100vw), 56px);
&:has( .select) section:not(.select){
display: none;
}
& section{
position: relative;
display: grid;
align-content: flex-start;
grid-gap: clamp(8px, calc(16 / 1200 * 100vw), 16px);
color: #fff;
&:not(:has(img)):before{
content: "";
aspect-ratio: 1;
background: var(--dummy);
border-radius: clamp(8px, calc(16 / 1200 * 100vw), 16px);
}
& figure{
order: -1;
& img{
aspect-ratio: 1;
border-radius: clamp(8px, calc(16 / 1200 * 100vw), 16px);
}
}
}
& h3{
font-weight: 700;
font-size: clamp(14px, calc(20 / 768 * 100vw), 20px);
}
& h3+div{
display: contents;
& ul{
display: flex;
flex-wrap: wrap;
grid-gap: 8px;
}
& li{
position: relative;
display: grid;
align-items: center;
min-height: 32px;
padding: 4px 16px;
border: 1px solid currentColor;
border-radius: 16px;
font-size: clamp(10px, calc(12 / 768 * 100vw), 12px);
cursor: pointer;
z-index: 1;
}
& a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 0;
}
}
& figure{
& img{
object-fit: cover;
}
}
}
#event{
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
margin-bottom: clamp(8px, calc(24 / 1200 * 100vw), 24px);
&>*{
grid-column: 2;
}
#eventList{
margin-top: clamp(32px, calc(56 / 1200 * 100vw), 56px);
&:has(.slick-initialized){
grid-column: 1 / 4;
}
}
#eventLink{
margin-top: clamp(48px, calc(64 / 1200 * 100vw), 64px);
}
}
#eventList{
overflow: hidden;
& section{
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 2px 1fr 2px;
align-items: center;
grid-gap: 0 clamp(16px, calc(24 / 1200 * 100vw), 24px);
@media (min-width: 1200px) {
grid-template-columns: 300px 1fr;
}
&:before,
&:after{
content: "";
height: 2px;
background: currentColor;
border-radius: 1px;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') repeat-x center left;
}
&:not(:has(img)) h3+div:before{
content: "";
grid-column: 1;
grid-row: 1 / 4;
aspect-ratio: 3 / 2;
background: var(--dummy);
border-radius: clamp(8px, calc(16 / 1200 * 100vw), 16px);
}
& figure{
grid-column: 1;
grid-row: 1 / 4;
& img{
border-radius: clamp(8px, calc(16 / 1200 * 100vw), 16px);
}
}
}
& h3{
font-weight: 700;
font-size: clamp(14px, calc(20 / 1200 * 100vw), 20px);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
max-height: calc(1.65em * 3);
overflow: hidden;
}
& 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;
}
}
.slick-slider{
display: grid;
grid-template-columns: auto min(calc(100% - clamp(120px, calc(240 / 1200 * 100vw), 240px)), var(--wrap-max)) auto;
column-gap: clamp(16px, calc(32 / 1200 * 100vw), 32px);
align-items: center;
}
.slick-list{
grid-column: 2;
margin: 0 calc(0px - clamp(12px, calc(28 / 1200 * 100vw), 28px));
}
.slick-slide{
margin: 0 clamp(12px, calc(28 / 1200 * 100vw), 28px);
}
.slick-arrow{
all: unset;
box-sizing: border-box;
cursor: pointer;
position: relative;
aspect-ratio: 1;
width: clamp(32px, calc(56 / 1200 * 100vw), 56px);
background: #fff;
border: 1px solid currentColor;
border-radius: 100%;
color: inherit;
font-size: 0;
overflow: hidden;
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 / 16px;
}
&.slick-prev:before{
transform: scale(-1, 1);
}
}
.slick-prev{
justify-self: end;
}
}
:root{
--logo: url('data:image/svg+xml;charset=UTF-8,');
--pict_nav: url('data:image/svg+xml;charset=UTF-8,');
--pict_hero: url('data:image/svg+xml;charset=UTF-8,');
--pict_feature-01: url('data:image/svg+xml;charset=UTF-8,');
--pict_feature-02: url('data:image/svg+xml;charset=UTF-8,');
--pict_experience-01: url('data:image/svg+xml;charset=UTF-8,');
--pict_experience-02: url('data:image/svg+xml;charset=UTF-8,');
--pict_footer: url('data:image/svg+xml;charset=UTF-8,');
}