@charset "UTF-8";
  #slider {
width: 100%;
height: 100vh;
} .site-main > .kv{
position: relative;
}
.site-main > .kv > .copy{
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
z-index: 1;
}
.site-main > .kv > .copy > h2{
text-align: center;
font-size: clamp(23px, 3.125vw, 60px);
font-family: var(--font-vdl);
color: var(--color-white);
line-height: 1.55;
letter-spacing: 15px;
text-shadow: 0 0 6px #000;
}
.site-main > .kv > .copy > p{
font-family: var(--font-rale);
font-style: italic;
font-size: var(--font-17);
color: var(--color-white);
text-align: center;
text-shadow: 0 3px 6px rgba(0, 0, 0, .33);
margin-top: 10px;
}
.site-main > .kv > .copy > .kv_wave{
text-align: center;
}
.site-main > .kv > .copy > .kv_wave > svg{
max-width: 100%;
position: absolute;
top: 65%;
left: 55%;
transform: translateX(-50%) translateY(50%);
}
@media (max-width:1200px) {
.site-main > .kv > .copy > .kv_wave > svg{
left: 50%;
}
}
@media (max-width:767px) {
.site-main > .kv > .copy > .kv_wave > svg{
top: 90%;
}
.site-main > .kv > .copy > .kv_wave > svg > #wave > .JMmADmwq_1,
.site-main > .kv > .copy > .kv_wave > svg > #wave > .JMmADmwq_2,
.site-main > .kv > .copy > .kv_wave > svg > #wave > .JMmADmwq_3{
stroke-width:5;
}
} .custom-shape-divider-bottom-1700556173 {
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
z-index: 10;
}
.custom-shape-divider-bottom-1700556173.-blog_wave{
position: absolute;
bottom: -150px;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
z-index: 10;
}
.custom-shape-divider-bottom-1700556173 svg{
position: relative;
display: block;
width: calc(100% + 1.3px);
height:45px;
}
.custom-shape-divider-bottom-1700556173.-blog_wave svg{
position: relative;
display: block;
width: calc(100% + 1.3px);
height:70px;
}
.custom-shape-divider-bottom-1700556173 .shape-fill {
fill: var(--color-green-light);
}
.custom-shape-divider-bottom-1700556173.-blog_wave .shape-fill{
fill: var(--color-green);
} .site-main > .top_story{
position: relative;
background: var(--color-green-light); 
}
.site-main > .top_story > .wrap > .content{
padding: clamp(40px, 4.1666666667vw, 80px) 0 clamp(40px, 4.4270833333vw, 85px);
}
.site-main > .top_story > .wrap > .content > .message{
padding: 0 1em;
}
.site-main > .top_story > .wrap > .content > p.txt{
font-size: 16px;
line-height: 2.5;
padding: 0 1em;
}
.site-main > .top_story > .wrap > .deco > .img > .-leftA{
position: absolute;
top: clamp(30px, 4.6875vw, 90px);
left:clamp(0px, 8.8541666667vw, 170px);
width: clamp(213px, 19.4270833333vw, 373px);
}
.site-main > .top_story > .wrap > .deco >  .img > .-leftB{
position: absolute;
top: clamp(180px, 16.9270833333vw, 325px);
left: clamp(55px, 17.7083333333vw, 340px);
width: clamp(170px, 14.84375vw, 285px);
}
.site-main > .top_story > .wrap > .deco >  .img > .-rightA{
position: absolute;
top: clamp(30px, 5.2083333333vw, 100px);
right:clamp(0px, 8.8541666667vw, 170px);
width: clamp(213px, 20.8333333333vw, 400px);
}
.site-main > .top_story > .wrap > .deco >  .img > .-rightB{
position: absolute;
top: clamp(180px, 18.4895833333vw, 355px);
right: clamp(55px, 17.1875vw, 330px);
width: clamp(170px, 14.1145833333vw, 271px);
}
@media (max-width:1400px) {
.site-main > .top_story > .wrap > .deco > .img > .-leftA{
left:35px;
}
.site-main > .top_story > .wrap > .deco > .img > .-leftB{
left: 80px;
}
.site-main > .top_story > .wrap > .deco > .img > .-rightA{
right:35px;
}
.site-main > .top_story > .wrap > .deco > .img > .-rightB{
right: 80px;
}
}
@media (max-width:990px) {
.site-main > .top_story > .wrap > .deco > .img > .-leftA{
left:10px;
}
.site-main > .top_story > .wrap > .deco > .img > .-leftB{
left: 50px;
}
.site-main > .top_story > .wrap > .deco > .img > .-rightA{
right:10px;
}
.site-main > .top_story > .wrap > .deco > .img > .-rightB{
right: 50px;
}
}
@media (max-width:900px) {
.site-main > .top_story > .wrap > .content{
padding-bottom: 250px;
}
.site-main > .top_story > .wrap > .deco > .img > .-leftA{
top: initial;
bottom: 45px;
left:10px;
}
.site-main > .top_story > .wrap > .deco > .img > .-leftB{
top: initial;
bottom: 45px;
left: 200px;
}
.site-main > .top_story > .wrap > .deco > .img > .-rightA{
top: initial;
bottom: 20px;
right:10px;
}
.site-main > .top_story > .wrap > .deco > .img > .-rightB{
top: initial;
bottom: 45px;
right: 180px;
}
}
@media (max-width:710px) {
.site-main > .top_story > .wrap > .content{
padding-bottom: 380px;
}
.site-main > .top_story > .wrap > .deco > .img > .-leftA{
bottom: 190px;
}
.site-main > .top_story > .wrap > .deco > .img > .-leftB{
bottom: 190px;
}
.site-main > .top_story > .wrap > .deco > .img > .-rightA{
bottom: 10px;
}
.site-main > .top_story > .wrap > .deco > .img > .-rightB{
bottom: 50px;
}
} .top_blog{
position: relative;
margin-bottom: 150px;
}  .tab-title-list {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
gap: 20px;
margin-bottom: 2em;
} .tab-title {
position: relative;
width: 180px;
padding: 6px 5px 8px 25px;
background: var(--color-white);
cursor: pointer;
transition: border-bottom 0.2s;
text-align: center;
letter-spacing: 0.05em;
font-size: var(--font-16);
font-weight: 400;
color: var(--color-black);
border: 1px solid var(--color-black);
border-radius: 5px;
transition: all .4s;
}
.tab-title:hover{
opacity: 1 !important;
background: var(--color-black);
color: var(--color-white);
transition: all .4s;
}
.tab-title::before{
content: "";
position: absolute;
top: 51%;
left: 5%;
width: 18px;
background-color: var(--color-black);
aspect-ratio: 1/1;
-webkit-mask: var(--icon-arrow-circle) no-repeat 50% 50%/contain;
mask: var(--icon-arrow-circle) no-repeat 50% 50%/contain;
transform: translateY(-50%);
transition: all .2s;
}
.tab-title:hover:before{
background-color: var(--color-white);
transition: all .4s;
opacity: 1;
} .tab-title.selected {
background-color: var(--color-black);
color: var(--color-white);
opacity: 1 !important;
}
.tab-title.selected::before{
background-color: var(--color-white);
}
.tab_list{
display: none;
}
.tab_list.show{
display: block;
} .tab_list > .archive-list{
max-width: 100%;
width: 1156px;
margin: 0 auto;
} .top_member{
background-color: var(--color-green);
}
.top_member > .wrap > .slider_item{
padding-bottom: clamp(30px, 3.125vw, 60px);
}
.top_member > .wrap > .slider_item > .slider > .slick-list > .slick-track > .list > img{
border-radius: 26px 26px 0 0;
box-shadow: 6px 5px 0px 0px #E6E8E6;
}
.top_member > .wrap > .slider_item > .slider > .slick-list > .slick-track > .list > .content{
background: var(--color-white);
border-radius: 0 0 26px 26px;
box-shadow: 6px 5px 0px 0px #E6E8E6;
padding: 20px;
text-align: center;
}
.top_member > .wrap > .slider_item > .slider > .slick-list > .slick-track > .list > .content > .txt{
margin-bottom: 10px;
line-height: 1.5;
font-size: 16px;
}
.top_member > .wrap > .slider_item > .slider > .slick-list > .slick-track > .list > .content > .name{
font-weight: bold;
font-size: 18px;
margin-bottom: 7px;
} .slider {
max-width: 90%;
width: 1500px;
margin:0 auto;
}
.slider img {
width:100%;
height:auto;
}
.slider .slick-slide {
margin:0 10px 10px;
} .slide-arrow {
position: absolute;
top: 42%;
cursor: pointer;
outline: none;
width: 50px !important;
height: 50px !important;
z-index: 10;
background: var(--color-black);
border-radius: 50%;
transition: all .4s;
}
.slide-arrow:hover{
background: var(--color-blue);
transition: all .4s;
}
.slide-arrow > span{
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
width: 20px;
height: 20px;
background: var(--color-white);
-webkit-mask: var(--icon-arrow-right) no-repeat center center/contain;
mask: var(--icon-arrow-right) no-repeat center center/contain;
}
.slide-arrow > span.-left{
transform: rotate(180deg) translateY(50%) translateX(50%);
}
.prev-arrow {
left: -1.5%;
}
.next-arrow {
right: -1.5%;
} .top_instagram > .wrap > .body.-second{
margin-top: clamp(30px, 3.125vw, 60px);
}
.top_instagram > .wrap > .body > .head{
display: inline-block;
position: relative;
left: clamp(0px, 7.8125vw, 150px);
margin-bottom: clamp(15px, 1.5625vw, 30px);
}
@media (max-width:560px) {
.top_instagram > .wrap > .body > .head{
left: 1em;
}
}
.top_instagram > .wrap > .body > .head > a{
transition: all .4s;
}
.top_instagram > .wrap > .body > .head > a:hover{
opacity: 1;
color: var(--color-blue);
transition: all .4s;
}
.top_instagram > .wrap > .body > .head > a > .flx > .img > svg{
fill: var(--color-black);
transition: all .4s;
}
.top_instagram > .wrap > .body > .head > a:hover > .flx > .img > svg{
fill: var(--color-blue);
transition: all .4s;
}
.top_instagram > .wrap > .body > .head > a > .flx{
display: flex;
align-items: center;
gap: 10px;
}
.top_instagram > .wrap > .body > .head > a > .flx > .account > .name{
font-size: var(--font-18);
font-weight: bold;
margin-bottom: 6px;
}
.top_instagram > .wrap > .body > .head > a > .flx > .account > .id{
font-size: var(--font-15);
font-weight: 400;
}
.top_instagram > .wrap > .body > .instagram_feed{
overflow:hidden;
}
.top_instagram > .wrap > .body > .instagram_feed > .block{
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
width: 200%;
overflow: hidden;
}
.top_instagram > .wrap > .body > .instagram_feed > .block #sb_instagram{
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
width: 100%;
min-width:2600px; padding: 0;
display:flex;
}
.top_instagram > .wrap > .body > .instagram_feed > .block #sb_instagram #sbi_images{
display:flex;
}
#sb_instagram .sbi_photo img{
height: 240px !important;
object-fit: cover;
}
.top_instagram > .wrap > .body > .instagram_feed > .block #sb_instagram:first-child {
-webkit-animation: side-slide 199s -100s linear infinite;
animation: side-slide 199s -100s linear infinite;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
will-change: transform;
}
.top_instagram > .wrap > .body > .instagram_feed #sb_instagram + #sb_instagram{
-webkit-animation: side-slide-copy 200s linear infinite;
animation: side-slide-copy 200s linear infinite;
}
@media (max-width: 640px) {
.top_instagram > .wrap > .body > .instagram_feed #sbi_images > .sbi_item{
width: 600%;
}
}
.top_instagram > .wrap > .body > .instagram_feed #sb_instagram #sbi_images .sbi_item{
overflow:visible;
width:260px;
}
.top_instagram > .wrap > .body > .instagram_feed #sb_instagram #sbi_images .sbi_item .sbi_photo_wrap{
width:240px;
height:auto;
overflow: hidden;
}
@media (max-width: 640px) {
.top_instagram > .wrap > .body > .instagram_feed > .block #sb_instagram{
min-width:2140px; }
.top_instagram > .wrap > .body > .instagram_feed #sb_instagram #sbi_images .sbi_item{
width:214px;
}
.top_instagram > .wrap > .body > .instagram_feed #sb_instagram #sbi_images .sbi_item .sbi_photo_wrap{
width:200px;
}
.top_instagram > .wrap > .body > .instagram_feed > .block #sb_instagram:first-child {
-webkit-animation: side-slide 197s -100s linear infinite;
animation: side-slide 197s -100s linear infinite;
}
.top_instagram > .wrap > .body > .instagram_feed #sb_instagram + #sb_instagram{
-webkit-animation: side-slide-copy 200s linear infinite;
animation: side-slide-copy 200s linear infinite;
}
}
@-webkit-keyframes side-slide {
0% {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@keyframes side-slide {
0% {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@-webkit-keyframes side-slide-copy {
0% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(-200%);
-ms-transform: translateX(-200%);
transform: translateX(-200%);
}
}
@keyframes side-slide-copy {
0% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(-200%);
-ms-transform: translateX(-200%);
transform: translateX(-200%);
}
} main.site-main.-test{
margin-bottom: 0;
}
.top_instagram.-test{
background-color: var(--color-green);
padding-bottom: clamp(40px, 2.6041666667vw, 50px);
}
.top_member.-test > .wrap > .slider_item{
padding-bottom: 180px;
}
.movie{
position: relative;
margin-bottom: 150px;
}
.movie > .wrap{
padding-bottom: clamp(30px, 3.125vw, 60px);
max-width: 100%;
width: var(--content-width-xlarge);
margin: 0 auto;
}
.movie > .wrap > .content{
text-align: center;
padding-top: clamp(40px, 4.1666666667vw, 80px);
}
.movie > .wrap > .grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
.movie > .wrap > .grid > .item{
width: 100%;
}
.movie > .wrap > .grid > .item > .txt > h3{
font-size: 18px;
font-weight: bold;
margin-top: 25px;
line-height: 1.6;
}
.movie > .wrap > .grid > .item > .txt > p{
font-size: 16px;
margin-top: 20px;
line-height: 1.6;
}
.movie > .wrap > .grid > .item > .embedded > iframe{
border-radius: 12px;
aspect-ratio: 756 / 426;
}
.action > .btn.-movie > span::before{
left: 20%;
}
@media (max-width:1200px) {
.movie > .wrap > .grid{
grid-template-columns: repeat(2, 1fr);
}  
}
@media (max-width:767px) {
.movie > .wrap > .grid{
gap: 30px;
}
.movie > .wrap > .grid{
grid-template-columns: repeat(1, 1fr);
}
.movie > .wrap > .grid > .item > .txt > h3{
margin-top: 20px;
}
.movie > .wrap > .grid > .item > .txt > p{
margin-top: 10px;
}
}