/*---------------------------------------- top page ------------------------------------------*/ /* fv ------------------------------------------*/ #fv {position: relative; display: block; width: 100%; height: var(--vh_px); &::before { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 30%; background-color: var(--c_white_l);} .white_area {position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: calc(var(--vh_px)*0.03); width: 100%; height: calc(var(--vh_px)*0.8); padding-bottom: calc(var(--vh_px)*0.05); border-bottom-left-radius: var(--base_border_radius_l); border-bottom-right-radius: var(--base_border_radius_l); overflow: hidden; .logo {position: relative; display: block; width: 100%; height: auto; img { display: block; width: 100%; height: auto; } } .scroll_text {position: relative; display: block; width: 100%; height: min(12px , 2vw); background: repeat-x left url(../images/webp/fv_scroll_text.webp); background-size: auto 100%;} } .artist_logo_area {position: relative; display: block; width: 100%; height: calc(var(--vh_px)*0.09); overflow: hidden; ul.artist_logo_scroll {position: absolute; top: 0; left: 0; display: flex; justify-content: flex-start; align-items: center; height: 100%; gap: calc(var(--vh_px)*0.06); padding: calc(var(--vh_px)*0.02) 0; animation: fv_scroll_logo 40s linear infinite; li {position: relative; display: flex; width: auto; height: 100%; align-items:center; img {display: block; width: auto; height:auto; max-height: 100%; max-width: 10vw;} } } } .scroll_sign {position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: calc(var(--vh_px)*0.08); .text {text-align: center; font-family: var(--f_jakarta); font-size: 12px; letter-spacing: 0.3em; line-height: 1.2em; color: var(--c_white_l);} .icon {position: relative; display: block; width: 14px; height: 14px; &::before { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat center url(../images/svg/icon_dot_arrow_02_d.svg); background-size: contain; animation: fv_scroll_arrow_move 2s linear infinite; animation-timing-function: var(--easeInOutCirc);} } } } @keyframes fv_scroll_arrow_move { 0% { transform: translateY(-25%); } 50% { transform: translateY(25%); } 100% { transform: translateY(-25%); } } @keyframes fv_scroll_logo { 0% {transform: translateX(0);} 100% {transform: translateX(calc(-50% - var(--vh_px)*0.06*0.5));} } /* catch -------------------------------*/ #catch {position: relative; display: flex; justify-content: center; align-items: center; height: auto; margin-bottom: calc(var(--base_distance) * 0.75); .center_box {text-align: left; margin-right: auto; p {margin-bottom: 0; white-space: nowrap;} .main {font-family: var(--f_jakarta); font-size: min(32px , 4.7vw); line-height: 1.7em; letter-spacing: 0.5em; margin-bottom: 0.9em;} .sub {font-size: min(14px , 2.8vw); font-weight: 400; line-height: 2.3em; letter-spacing: 0.4em;} } } /* pick_up -------------------------------*/ #pick_up { .pick_up_list_outer {display: flex; justify-content: flex-start; margin-bottom: calc(var(--base_distance) * 1); .pick_up_list {position: relative; display: flex; justify-content: flex-start; align-items: flex-start; gap: max(var(--base_gap) , calc((100% - (min(400px , 25.4vw) * 3)) / 2)); width: 100%; height: auto; .pick_up_item {position: relative; display: block; width: min(400px , 25.4vw); height: auto;} .slide_inner {position: relative; display: block; width: 100%; height: auto; border: 1px solid var(--c_white_l); border-radius: var(--base_border_radius); overflow: hidden; .img_area {position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: auto; aspect-ratio: 1 / 1; border-bottom: 1px solid var(--c_white_l); img {position: relative; display: block; width: 94%; height: 94%; object-fit: contain; transition: 0.2s;} } .title_area {--title_size: clamp(13px , 2vw , 15px); position: relative; display: flex; justify-content: flex-start; align-items: center; width: 100%; height: auto; .title_box {position: relative; display: block; width: calc(100% - var(--title_size)*3.5); height: calc(var(--title_size)*4.5); text-align: left; padding: calc(var(--title_size)*0.75) calc(var(--title_size)*1); border-right: 1px solid var(--c_white_l); .title {font-size: var(--title_size); line-height: 1.5em; color: var(--c_white_l); font-weight: 500; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; overflow: hidden; } } .arrow_r {position: relative; display: block; height: calc(var(--title_size)*4.5); width: calc(var(--title_size)*3.5); transition: 0.2s; &::before { position: absolute; display: block; content: ""; top: 50%; left: 50%; width: 30%; height: 100%; transform: translate(-50% , -50%); background: no-repeat center url(../images/svg/icon_dot_arrow_02_r.svg); background-size: contain; } } } &:hover { .img_area { img {transform: scale(0.98);} } .title_area { .arrow_r {transform: translateX(3%);} } } } } } } @media only screen and (max-width: 835px){ #pick_up { .pick_up_list_outer { .pick_up_list {flex-direction: column; align-items: center; gap: calc(var(--base_gap) * 2); .pick_up_item {width: min(400px, 91vw);} } } } } /* about -------------------------------*/ #about {padding-bottom: calc(var(--base_distance)*1); .content_flex {position: relative; display: flex; justify-content: space-between;align-items:stretch; height: auto; .text_area {position: relative; display: block; width: 50%; height: auto; text-align: left; .main_text {font-size: min(50px , 3vw); line-height: 1.4em; font-weight: 600; letter-spacing: 0.1em; margin-bottom: 1em;} .sub_text { font-size: clamp(11px , 1.0vw , 16px); font-weight: 400; letter-spacing: 0.4em; line-height: 3.0em; margin-bottom: 4em;} } .img_area {position: relative; align-self: flex-start; margin-top: -10vw; display: block; width: 40%; min-width: 390px; .img_area_frame {position: relative; display: block; width: 100%; max-width: 650px; height: auto; aspect-ratio: 1 / 1.05; margin: 0 auto; overflow: hidden; .swiper-wrapper {width: 100%; height: 100%;} .swiper-slide {position: relative; display: flex; justify-content: flex-end; align-items: center; width: 100%; height: 100%; right: 5px; .img_box {position: relative; display: block; width: 75%; height: auto; .inner_frame { position: relative; display: block; width: 100%; height: auto; border: 1px solid var(--c_white_l); border-radius: var(--base_border_radius); overflow: hidden; .header_area {position: relative; display: flex; justify-content: flex-start; align-items: flex-start; width: 100%; height: clamp(14px , 2.4vw , 30px); border-bottom: 1px solid var(--c_white_l); .drag_area {position: relative; display: block; width: 85%; height: 100%; border-right: 1px solid var(--c_white_l);} .close_btn {position: relative; display: block; width: 15%; height: 100%; &::before { position: absolute; display: block; content: ""; top: 50%; left: 50%; width: 100%; height: 40%; transform: translate(-50% , -50%); background: no-repeat center url(../images/svg/icon_dot_cross.svg); background-size: contain;} } } .thumb_area {position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: auto; aspect-ratio: 1 / 1; img {position: relative; display: block; width: 94%; height: 94%; object-fit: contain; transition: 0.2s;} } } } } } .swiper_controller {position: relative; display: flex; justify-content: center; align-items: center; gap: calc(var(--base_gap)*0.5); width: 100%; max-width: 650px; padding-left: 25%; margin: calc(var(--base_gap)*1.5) auto 0; .swiper-button-prev , .swiper-button-next {position: relative; top: initial; left: initial; right: initial; bottom: initial; margin: 0; width: 40px; height: 40px; border: 1px solid var(--c_white_l); border-radius: var(--base_border_radius); transition: 0.1s; &::after { display: none;} &::before { position: absolute; display: block; content: ""; top: 50%; left: 50%; width: 40%; height: 100%; transform: translate(-50% , -50%); background: no-repeat center; background-size: contain; } &:hover {opacity: 0.7;} } .swiper-button-prev { &::before { background-image: url(../images/svg/icon_dot_arrow_02_l.svg);} } .swiper-button-next { &::before { background-image: url(../images/svg/icon_dot_arrow_02_r.svg); } } } } } } @media only screen and (max-width: 835px){ #about {padding-bottom: calc(var(--base_distance)*1); .content_flex {flex-direction: column; .text_area {width: 100%;} .img_area {width: 100vw; min-width: initial; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); .img_area_frame { .swiper-slide {justify-content: center; right: 3px; .img_box{width: min(400px, 91vw);} } } .swiper_controller {padding-left: 0;} } } } } /* info -------------------------------*/ .cmn_info_list {position: relative; display: block; height: auto; } .cmn_info_rack {--thumbnail_size: clamp(64px , 20vw , 160px); position: relative; display: flex; justify-content: flex-start; align-items: flex-start; gap: calc(var(--base_gap)*1.5); width: 100%; height: auto; border-bottom: 1px solid var(--c_gray); padding: calc(var(--base_gap)*1.5) 0; padding-right: calc(var(--base_gap)*4); .thumbnail_area {position: relative; display: block; width: var(--thumbnail_size); height: var(--thumbnail_size); background-color: var(--c_lightgray); img {display: block; width: 100%; height: 100%; object-fit: contain;} } .info_area {position: relative; display: block; width: calc(100% - var(--base_gap)*1.5 - var(--thumbnail_size)); text-align: left; .title {color: var(--c_black_d); font-size: clamp(13px ,2vw , 17px); line-height: 1.8em; font-weight: 600; letter-spacing: 0.1em; transition: 0.1s;} } &::after { position: absolute; display: block; content: ""; top: 0; right: calc(var(--base_gap)*2); transform: translateX(50%); width: calc(var(--base_gap)*1); height: 100%; background: no-repeat center url(../images/svg/icon_dot_arrow_02_r.svg); background-size: contain; filter: invert(1); transition: 0.2s;} &:hover { .info_area { .title {opacity: 0.6;} } &::after {transform: translateX(70%);} } &.c_white { border-bottom: 1px solid var(--c_gray); .thumbnail_area {background-color: var(--c_black);} .info_area { .title {color: var(--c_white_l);} } &::after {filter: initial;} } } #info { .cmn_info_list {margin-bottom: calc(var(--base_distance)*0.5); li:nth-of-type(1) { .cmn_info_rack {padding-top: 0;} } } } #in_info { .cmn_info_list {margin-bottom: calc(var(--base_distance)*0.5); li:nth-of-type(1) { .cmn_info_rack {padding-top: 0;} } } } /* artist -------------------------------*/ .cmn_artists_list {position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: calc(var(--base_distance)*1); height: auto; .artist_box {position: relative; display: block; width: 100%;height: auto; .main_flex {position: relative; display: flex; justify-content: space-between; align-items: stretch; width: 100%; height: auto; gap: calc(var(--base_gap)*2); padding-bottom: calc(var(--base_gap)*1.5); border-bottom: 1px solid var(--c_white_l); .logo_box {position: relative; display: block; width: 50%; height: auto; aspect-ratio: 16 / 9; cursor: pointer; .logo {position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); width: 70%; height: 38%; img {display: block; width: 100%; height: 100%; object-fit: contain;} } .frame {position: absolute; top: 0; left: 0; width: 100%; height: 100%; .corner {position: absolute; display: block; width: clamp(20px , 3vw , 30px); height: clamp(20px , 3vw , 30px); span {position: absolute; display: block; top: 0; left: 0; background-color: var(--c_white_l); width: 20%; height: 20%; border-radius: 50%;} &::before , &::after {position: absolute; display: block; content: ""; background-color: var(--c_white_l);} &::before {top: 10%; right: 0; width: 30%; height: 1px;} &::after {bottom: 0; left: 10%; height: 30%; width: 1px;} &:nth-of-type(1) {top: 0; left: 0;} &:nth-of-type(2) {top: 0; right: 0; transform: rotateZ(90deg);} &:nth-of-type(3) {bottom: 0; right: 0; transform: rotateZ(180deg);} &:nth-of-type(4) {bottom: 0; left: 0; transform: rotateZ(270deg);} } } } .artist_img_box {position: relative; display: block; width: 50%; height: auto; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--base_border_radius); cursor: pointer; img {position: relative; display: block; width: 100%; height: 100%; object-fit: cover; transition: 0.2s;} &:hover { img {filter: brightness(1.2);} } } } .cmn_link_btn_outer {padding-top: calc(var(--base_gap)*1);} .group_artists {position: relative; display: block; width: 100%; height: auto; .cmn_accordion_content { .innerbox {position: relative; display: block; width: 100%; height: auto; padding: calc(var(--base_gap)*1) 0; .artist_list {position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; width: 100%; height: auto; gap: calc(var(--base_gap)*0.5); opacity: 0; transition: 0.3s; transition-delay: 0s; li {position: relative; display: block; width: min(150px , calc((100% - var(--base_gap)*0.5)/2)); height: auto; .group_artist_box {position: relative; display: block; width: 100%; height: auto; text-align: center; .thumbnail {display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: var(--base_border_radius); overflow: hidden; margin-bottom: 4px; img {display: block; width: 100%; height: 100%; object-fit: cover; transition: 0.2s;} } .name {display: block; width: 100%; height: auto; font-size: clamp(13px , 2vw , 14px); line-height: 1.4em; color: var(--c_white_l); font-weight: 500; letter-spacing: 0.15em;} &:hover { .thumbnail { img {filter: brightness(1.2);} } } } } } } &.accordion_open { .innerbox { .artist_list {opacity: 1;} } } } .cmn_accordion_trigger {position: relative; &::before { position: absolute; display: block; content: ""; top: -1px; left: 0; width: 100%; height: 1px; background-color: var(--c_white_l);} /* &::after { position: absolute; display: block; content: ""; bottom: 0; left: 0; width: 100%; height: 1px; background-color: var(--c_white_l); transition: 0.1s;} */ .cmn_link_btn_a { padding-top: calc(0.7em + var(--base_gap)); padding-bottom: calc(0.7em + 1em + 1em + var(--base_gap)); background-color: initial; color: var(--c_white_l); border: initial; width: 100%; span:nth-of-type(1) {display: block;} span:nth-of-type(2) {display: none;} &::after {background-image: url(../images/svg/icon_dot_arrow_02_d.svg); top: initial; right: initial; left: 50%; bottom: calc(1em + var(--base_gap)); height: 1em; transform: translate(-50% , 0); filter: initial;} &:hover {background-color: initial; color: var(--c_white_l); &:after { transform: translate(-50% , 30%);} } } &.accordion_active { /* &::after {opacity: 0;} */ .cmn_link_btn_a { span:nth-of-type(1) {display: none;} span:nth-of-type(2) {display: block;} &:after {transform: translate(-50% , 0) rotateZ(180deg);} } } } } } } @media only screen and (max-width: 835px){ .cmn_artists_list { .artist_box { .main_flex { flex-direction: column; gap: calc(var(--base_gap)*1); .logo_box {width: 100%; aspect-ratio: 16 / 9;} .artist_img_box {width: 100%;} } } } } .cmn_artist_list_02 {position: relative; display: flex; justify-content: flex-start; align-items: flex-start; gap: calc(var(--base_gap)*3) calc(var(--base_gap)*2); flex-wrap: wrap; height: auto; li {display: block; width: calc((100% - var(--base_gap)*2*3)/4); .artist_box {position: relative; display: block; width: 100%; height: auto; .thumbnail {position: relative; display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: var(--base_border_radius); overflow: hidden; background-color: var(--c_black_d); margin-bottom: calc(var(--base_gap)*0.25); img {display: block; width: 100%; height: 100%; object-fit: cover; transition: 0.2s;} } .artist_name {display: block; width: 100%; height: auto; text-align: left; font-size: clamp(15px , 2vw , 18px); line-height: 1.5em; color: var(--c_white_l); font-weight: 700; letter-spacing: 0.1em;} &:hover { .thumbnail { img {filter: brightness(1.2);} } } } } } @media only screen and (max-width: 835px){ .cmn_artist_list_02 { gap: calc(var(--base_gap)*2) calc(var(--base_gap)*1); li {width: calc((100% - var(--base_gap)*1*1)/2);} } } #artist { .cmn_artists_list {margin-bottom: calc(var(--base_distance)*1);} } #in_artist { .cmn_artist_list_02 {margin-bottom: calc(var(--base_distance)*0.75);} } /* release -------------------------------*/ .cmn_release_list {position: relative; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: calc(var(--base_gap)*4); height: auto; .cmn_release_box {position: relative; display: block; width: calc((100% - var(--base_gap)*4*2) /3); .jacket {position: relative; display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; background-color: var(--c_black_d); border-radius: var(--base_border_radius); overflow: hidden; margin-bottom: calc(var(--base_gap)*0.5); img {position: relative; display: block; width: 100%; height: 100%; object-fit: contain; transition: 0.2s;} &:hover { img {filter: brightness(1.2);} } } .info_area {position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 0; width: 100%; height: auto; text-align: left; .text_box {position: relative; display: block; width: 100%; height: auto; .title {display: block; width: 100%; height: auto; padding-right: calc(clamp(28px , 14% , 50px) * 1.2); font-weight: 600; font-size: clamp(14px , 2vw , 23px); line-height: 1.5em; color: var(--c_white_l); letter-spacing: 0.05em; margin-bottom: 0.2em;} .artist {display: block; padding-right: calc(clamp(28px , 14% , 50px) * 1.2); font-size: clamp(12px , 2vw , 14px); line-height: 1.5em; color: var(--c_white_l); letter-spacing: 0.1em; margin-bottom: 0.2em;} .info {font-size: clamp(10px , 1.1vw , 12px); line-height: 1.5em; color: var(--c_white_l);margin-bottom: 0;} } .play_btn {position: absolute; top: 0; right: 0; display: block; width: clamp(28px , 14% , 50px); height: auto; aspect-ratio: 1 / 1; border: 1px solid var(--c_white_l); border-radius: var(--base_border_radius); overflow: hidden; transition: 0.1s; img {position: absolute; top: 50%; left: 50%; transform: translate(-45% , -50%); display: block; width: 20%; height: auto; transition: 0.1s;} &:hover {background-color: var(--c_white_l); img {filter: invert(1);} } } } } } @media only screen and (max-width: 835px){ .cmn_release_list {gap: calc(var(--base_gap)*2) calc(var(--base_gap)*1); .cmn_release_box {width: calc((100% - var(--base_gap)*1*1) /2);} } } #release { .cmn_release_list {margin-bottom: calc(var(--base_distance)*0.5);} } #in_release { .cmn_release_list {margin-bottom: calc(var(--base_distance)*0.5);} } /* official sns -------------------------------*/ #official_sns {padding: 0 0 calc(var(--base_distance)*1) ; .sns_list {display: flex; justify-content: center; align-items: center; gap: calc(var(--base_gap)*2); flex-wrap: wrap; width: 100%; height: auto; li { a {display: block; width: 50px; height: auto; transition: 0.2s; img {display: block; width: 100%; height: auto;} &:hover {opacity: 0.6;} } } } } /*---------------------------------------- in artist ------------------------------------------*/ #in_artist { .artist_article {display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: calc(var(--base_distance)*1); .img_area { position: relative; display: block; width: 50%; height: auto; .tab_main {position: relative; display: block; width: 100%; height: auto; margin-bottom: calc(var(--base_gap)*0.5); .tab {position: absolute; top: 0; left: 0; width: 100%; height: auto; transition: 0.2s; opacity: 0; pointer-events: none; img {display: block; width: 100%; height: 100%; object-fit: cover;} &.active {position: relative; opacity: 1; pointer-events: auto;} } } .tab_switch {position: relative; display: flex; justify-content: flex-start; align-items: flex-start; gap: calc(var(--base_gap)*0.5); flex-wrap: wrap; .switch {position: relative; display: block; width: calc((100% - var(--base_gap)*0.5)/5); cursor: pointer; border-radius: calc(var(--base_border_radius)); overflow: hidden; transition: 0.2s; &.active {filter: brightness(0.4); pointer-events: none;} &:hover {filter: brightness(1.2);} } } } .text_area {position: relative; display: block; width: 45%; height: auto; text-align: left; .article_text_box {position: relative; display: block; width: 100%; height: auto; margin-bottom: calc(var(--base_gap)*3); .title_box { .catchcopy {font-size: clamp(14.5px, 2.5vw, 19px); line-height: 1.8em; letter-spacing: 0.1em; font-weight: 400; margin-bottom: 1em;} .main_name {font-size: clamp(24px, 4vw, 32px); line-height: 1.5em; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 0.2em;} .sub_name { font-size: clamp(14px, 2.5vw, 15px); line-height: 1.5em; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 0.2em;} } } .sns_links {position: relative; display: flex; justify-content: flex-start; align-items: flex-start; gap: calc(var(--base_gap)*0.5); flex-wrap: wrap; width: 100%; height: auto; li {display: block; width: 40px; height: auto; a {display: block; width: 100%; height: auto; transition: 0.1s; img {display: block; width: 100%; height: auto;} &:hover {opacity: 0.6;} } } } } } } @media only screen and (max-width: 835px){ #in_artist { .artist_article {flex-direction: column; gap: calc(var(--base_gap)*2); .img_area {width: 100%;} .text_area {width: 100%;} } } } /*---------------------------------------- in release ------------------------------------------*/ #in_release { .release_article {display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: calc(var(--base_distance)*1); .img_area { position: relative; display: block; width: 50%; height: auto; .tab_main {position: relative; display: block; width: 100%; height: auto; padding-top: 100%; margin-bottom: calc(var(--base_gap)*0.5); .tab {position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: 0.2s; opacity: 0; pointer-events: none; img {display: block; width: 100%; height: 100%; object-fit: cover;} &.active {opacity: 1; pointer-events: auto;} } } .tab_switch {position: relative; display: flex; justify-content: flex-start; align-items: flex-start; gap: calc(var(--base_gap)*0.5); flex-wrap: wrap; .switch {position: relative; display: block; width: calc((100% - var(--base_gap)*0.5)/5); cursor: pointer; border-radius: calc(var(--base_border_radius)); overflow: hidden; transition: 0.2s; &.active {filter: brightness(0.4); pointer-events: none;} &:hover {filter: brightness(1.2);} } } } .text_area {position: relative; display: block; width: 45%; height: auto; text-align: left; .article_text_box {position: relative; display: block; width: 100%; height: auto; margin-bottom: calc(var(--base_gap)*3); .title_box { .box_title {margin-bottom: 0.8em;} .artist_name {margin-bottom: 0; font-size: clamp(14px, 2.5vw, 15px); line-height: 1.5em; letter-spacing: 0.1em; font-weight: 700;} } } .link_btns_box {position: relative; display: flex; flex-direction: column; gap: calc(var(--base_gap)*0.5); justify-content: center; align-items: center; width: 100%; height: auto; } } .cmn_link_btn_a{ font-size: clamp(14px, 2vw, 16px);letter-spacing: 0.1em;padding: 0.7em 2em;} } } @media only screen and (max-width: 835px){ #in_release { .release_article {flex-direction: column; gap: calc(var(--base_gap)*2); .img_area {width: 100%;} .text_area {width: 100%;} } } } /*---------------------------------------- in company info ------------------------------------------*/ .company_info_list {border-top: 1px solid #ffffff; .list_item{display: flex; width: 100%; gap: 2%; border-bottom: 1px solid #ffffff; padding: 2em 1em; &::before{width: 0;} .info_left{width: 20%;} .info_right{width: 78%;} } }