/*---------------------------------------- top page ------------------------------------------*/ /* fv ------------------------------------------*/ #fv {position: relative; display: block; margin: 0 auto; width: 100%; height: clamp(calc(100vw * 6 / 16) , 100lvh, calc(100vw * 12 / 16) ); background-color: var(--c_white_l); .cmn_bg_layer {background: repeat center url(../images/parts/bg_texture_grid_01_gray_ll.svg); background-size: var(--cmn_bg_grid_size); overflow: hidden; .bg_circles {position: absolute; display: block; top:50%; left: 50%; transform: translate(-50% , -50%); width: 160vmin; height: 160vmin; .circle_rotate {position: relative; display: block; width: 100%; height: 100%; animation: rotation 180s linear infinite; .circle1, .circle2 {position: absolute; top:50% ; left: 50%; transform: translate(-50% , -50%); display: block; width: 100%; height: 100%; span {position: relative; display: block; width: 100%; height: 100%; &::after { position: absolute; display: block; content: ""; width: 100%; height: 100%; background: no-repeat center; background-size: contain; } } } .circle1 span::after {background-image: url(../images/parts/parts_fv_bg_circles_01.svg); animation: rotation 60s steps(60) infinite;} .circle2 span::after { background-image: url(../images/parts/parts_fv_bg_circles_02.svg); animation: rotation 360s steps(60) infinite;} } } .side_stars {position: absolute; width: min(460px , 30vw); height: calc(min(460px , 30vw) *1200 / 460); &::before { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat center; background-size: contain; } &.left {bottom: 0; left: 0; transform:translate(-12% , 15%); &::before {background-image: url(../images/parts/parts_fv_side_stars_bl.svg);} } &.right {top: 0; right: 0; transform:translate(12% , -15%); &::before {background-image: url(../images/parts/parts_fv_side_stars_tr.svg);} } } } .cmn_main_layer {position: relative; display: block; width: 100%; height: 100%; .center_box {position: absolute; display: block; top:50%; left: 50%; transform: translate(-50% , -50%); width:min(900px , 67vw); height: auto; .h_title {position: relative; display: block; width: 100%; height: auto; margin-bottom: calc(var(--base_gap)*1.5); img {display: block; width: 100%; height: auto;} } .countdown_timer {position: relative; display: flex; width: 100%; height: auto; border-radius: var(--base_border_radius); overflow: hidden; font-family: var(--f_shoulder); .side_box {position: relative; display: flex; justify-content: center; align-items: flex-start; width: 5%; height: auto; background: var(--c_gd_theme_color_vertical); font-size: min(13px , 1vw); padding:2em 0; p {position: relative; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; margin-bottom: 0; color: var(--c_white_l); letter-spacing: 0.8em;} } .main_box {--timer_box_gap: clamp(2px , 1.6vw , 16px); position: relative; display: flex; gap: calc(var(--timer_box_gap)*1); width: 95%; height: auto; background: var(--c_gd_theme_color_horizontal); padding: calc(var(--timer_box_gap)*2.5); &::before { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: repeat center url(../images/parts/bg_texture_grid_02_gray_ll.svg); background-size: calc(var(--cmn_bg_grid_size)*0.5); opacity: 0.8; } .timer_box{position: relative; display: flex; gap: calc(var(--timer_box_gap)*1); width: 100%; height: auto; .timer_num {position: relative; margin-bottom: 0; display: flex; gap: calc(var(--timer_box_gap)*1); width: calc((100% - var(--timer_box_gap)*2)); height: auto; p {position: relative; display: flex; justify-content: center; align-items: center; font-size: min(calc(var(--timer_box_gap)*10) , 12vw); line-height: 1em; aspect-ratio: 1 / 2.1; margin: 0; &::before { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--c_white_l); border-radius: var(--base_border_radius); } span {position: relative;background: var(--c_gd_theme_color_vertical); -webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;color: transparent;} } } .timer_text {position: relative; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-align: left; margin-bottom: 0; color: var(--c_white_l); letter-spacing: 0.8em; width: calc(var(--timer_box_gap)*1.5); font-size: calc(var(--timer_box_gap)*1.5); font-weight: 600; line-height: 1em; &::after { position: absolute; display: block; content: ""; bottom: 0; left: 50%; transform: translateX(-50%); width: calc(var(--timer_box_gap)*1.5); height: calc(var(--timer_box_gap)*1.5); background-color: var(--c_white_l); border-radius: 9999px; } } &.days {width: calc((100% - var(--timer_box_gap)*8.5)/5*3 + var(--timer_box_gap)*5); .timer_num { p {width: calc((100% - var(--timer_box_gap)*2)/3);} } } &.hours {width: calc((100% - var(--timer_box_gap)*8.5)/5*2 + var(--timer_box_gap)*4); .timer_num { p {width: calc((100% - var(--timer_box_gap)*1)/2); } } } } } } } } } @media only screen and (max-width: 835px){ #fv {height: calc(var(--vh_px)*1); max-height: calc(100vw * 19 / 9); min-height: initial; .cmn_bg_layer { .side_stars {width: min(460px , 65vw); height: calc(min(460px , 65vw) *1200 / 460); &.left {transform:translate(-18% , 18%); clip-path: polygon(0 30%, 100% 30%, 100% 100%, 0% 100%);} &.right {transform:translate(18% , -18%); clip-path: polygon(0 0, 100% 0, 100% 70%, 0 70%);} } } .cmn_main_layer { .center_box {width:min(900px , 90vw); .countdown_timer { .main_box { .timer_box { .timer_num { p {font-size: min(calc(var(--timer_box_gap)*10) , 16vw);} } } } } } } } } /* message -------------------------------*/ #message { .messages_title {position: relative; margin-bottom: calc(var(--base_gap)*2); .title {font-size: min(32px , 6.4vw); line-height: 1.5em; letter-spacing: 0.08em; font-weight: 500; margin-bottom: 0.4em;} .subtitle {display: inline-block; background-color:var(--c_theme_color); color: var(--c_white_l); padding: 0 0.5em;} } .message_list {position: relative; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: calc(var(--base_gap)*2); margin-bottom: calc(var(--base_gap)*3); .message_icon {position: relative; display:block; width:calc((100% - var(--base_gap)*2*4)/5); height: auto; cursor: pointer; transition: 0.2s; img {position: relative; display: block; width: 100%; height: auto; border-radius: 9999px; overflow: hidden;} &:hover {transform: scale(1.02);} &.new { &::after { position: absolute; display: block; content: ""; top: 0; right: 0; width: 25%; height: 25%; background: no-repeat center url(../images/parts/icon_message_new.svg); background-size: contain; } } } } } @media only screen and (max-width: 835px){ #message { .message_list { gap: calc(var(--base_gap)*2); width: 70%; .message_icon {width:calc((100% - var(--base_gap)*2*1)/2); } } } } /* news -------------------------------*/ #news { .cmn_content_list {margin-bottom: calc(var(--base_gap)*2);} } /* today hololive -------------------------------*/ #today_hololive { .content_area {position: relative; display: block; width: 100%; height: auto; padding-top: calc(100vw * 900 / 1920)} .layer_open_btn {position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; .today_hololive_open_btn {position: relative; display: block; width: min(1000px , 50vw); height:calc(min(1000px , 50vw) * 570 / 1000); cursor: pointer; background:var(--c_gd_theme_color_vertical); border: 1px solid var(--c_white_l); border-radius: var(--base_border_radius); filter: drop-shadow(0px min(3px , 1vw) min(6px , 1vw) var(--c_drop_shadow_blue)); transition: 0.2s; &::before { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: repeat center url(../images/parts/bg_texture_grid_stars_white.svg); background-size: var(--cmn_bg_grid_size); opacity: 0.5;border-radius: var(--base_border_radius); overflow: hidden; } .letter_top {position: absolute; display: block; width: 100%; height: 100%; opacity: 0.6;border-radius: var(--base_border_radius); overflow: hidden; &::before { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat center top url(../images/parts/parts_letter_top.svg); background-size: contain; transform: scale(1.1 , 1.1); transform-origin: top;} } .logo {position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); display: block; width: 60%; height: 100%; &::before { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat center url(../images/logo/logo_hololive_white.svg); background-size: contain; opacity: 0.2;} } .main_text_box {position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); display: block; width: 75%; height: auto; text-align: center; .text_main {position: relative; display: block; width: 100%; height: auto; margin-bottom: 3.5%; img {position: relative; display: block; width: 100%; height: auto;} } .text_sub {display: inline-block; background-color: var(--c_white_l); color: var(--c_theme_color); font-size: min(17px , 2.5vw); font-weight: 700; line-height: 1.2em; letter-spacing: 0.05em; padding: 0.3em 0.6em 0.2em;} } .icon_new_appeal {position: absolute; top: 0; right: 0; width: 6%; height: auto; padding-top: 6%; background: no-repeat top right url(../images/parts/icon_new_appeal.svg); background-size: contain; transform: translate(15% , -15%);} .icon_mouse {position: absolute; bottom: 7%; right: 0; width: 7%; height: auto; padding-top: 7%; transform: translate(25% , 0); &::before { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat top right url(../images/parts/icon_mouse_click.svg); background-size: contain; animation: slideInClickFadeOut 4s ease-in-out infinite;} } &:hover {transform: scale(1.005);} } &.disactive { .today_hololive_open_btn {opacity: 0; visibility: hidden; pointer-events: none; filter: blur(20px); transform: scale(1.3); transition: 0.8s; } } } .layer_result { --open_delay: 0.6s; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; transition-delay: var(--open_delay); .bg_layer {position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; overflow: hidden; .bg_blue_grid {position: absolute; top: 0; left: 0; display: block; width: 45%; height: 100%; background:var(--c_gd_theme_color_vertical); clip-path: polygon(0 0, 60% 0%, 100% 100%, 0% 100%); opacity: 1; transition: 1.5s var(--easeOutQuint); transition-delay: calc(var(--open_delay) + 0s); &::after { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: repeat center url(../images/parts/bg_texture_grid_02_gray_ll.svg); background-size: var(--cmn_bg_grid_size); opacity: 0.5;} } .bg_stars {position: absolute; width: min(460px , 25vw); height: calc(min(460px , 30vw) *1200 / 460); bottom: 0; left: 0; transform:translate(10% , 20%); &::before { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat center url(../images/parts/parts_fv_side_stars_bl.svg); background-size: contain; transition: 2.2s var(--easeOutQuint); transition-delay: calc(var(--open_delay) + 0.1s); } } &.type_in_page {top:calc(var(--base_distance) * -0.5); height: calc(100% + var(--base_distance) * 1.5 + 50px);} } .talent_img {position: absolute; top:5%; left: 30%; transform: translate(-50% , 0); width: min(1000px , 52%); height: auto; transition: 2.5s var(--easeOutQuint); transition-delay: calc(var(--open_delay) + 0.3s); img {position: relative; display: block; width: 100%; height: auto;} } .talent_info {position: absolute; display: block; width: 38%; height: auto; top: 50%; left: 57%; transform: translate(0% , -50%); text-align: left; transition: 2.2s var(--easeOutQuint); transition-delay: calc(var(--open_delay) + 0.6s); .text_today_is {position: relative; font-weight: 700; font-size: min(20px, 1.2vw); line-height: 1.7em; letter-spacing: 0.05em; margin-bottom: 0.5em;} .talent_name_box {position: relative; margin-bottom: calc(var(--base_gap) * 1);} .talent_name {position: relative; font-weight: 700; font-size: min(40px, 3vw); line-height: 1.3em; letter-spacing: 0.05em; margin-bottom: 0.1em; color: var(--c_theme_color);} .talent_name_sub {position: relative; font-family: var(--f_shoulder); font-weight: 700; font-size: min(19px, 1.1vw); line-height: 1.3em; letter-spacing: 0.2em; margin-bottom: 0; color: var(--c_theme_color);} .catch_text {position: relative; font-weight: 600; font-size: clamp(13px , 1.5vw , 16px); line-height: 1.7em; letter-spacing: 0.05em; margin-bottom: 0.5em;} .intro_text {position: relative; font-weight: 600; font-size: clamp(11px , 1.0vw , 13px); line-height: 1.5em; letter-spacing: 0.02em; margin-bottom: calc(var(--base_gap)*1);} .link_btns {position: relative; display: flex; flex-wrap: wrap; gap: calc(var(--base_gap)*0.5); .cmn_link_btn_a { width: calc((100% - var(--base_gap)*0.5) / 2); margin: 0; min-width: initial; font-size: min(18px, 1.4vw);} .share_btn {width: 100%;} } } &.disactive { pointer-events: none; transition: 0.2s; .bg_layer { .bg_blue_grid {transform: translateX(-100%); opacity: 0;} .bg_stars::before {transform: translateX(-160%);} } .talent_img {transform: translateX(-100%); opacity: 0;} .talent_info {opacity: 0;} } } } @media only screen and (max-width: 835px){ #today_hololive { .content_area {padding-top: initial; height: auto;} .layer_open_btn { align-items: flex-start; padding: calc(var(--base_distance)*1) 0; .today_hololive_open_btn {width: min(1000px , 84vw); height:calc(min(1000px , 84vw) * 570 / 1000);} } .layer_result {position: relative; display: grid; grid-template-rows: 1fr; padding: calc(var(--base_distance)*0.5) 0 calc(var(--base_distance)*1); height: auto; .bg_layer { .bg_blue_grid { width: 80%; clip-path: polygon(0 0, 30% 0, 100% 100%, 0% 100%);} } .talent_img {position: relative; width: 90%; height: auto; top: initial; left: initial; transform: translateX(0%); margin: 0 auto; margin-bottom: 0; img {transform-origin: top center; transform: scale(1.4 , 1.4); } } .talent_info {position: relative; width: 90%; top: initial; left: initial; transform: translate(0% , 0%); margin: 0 auto; background-color: rgba(255,255,255,0.9); border: 1px solid var(--c_theme_color); border-radius: var(--base_border_radius); padding: calc(var(--base_gap)*1.5); transition-delay: calc(var(--open_delay) + 0.8s); &::before { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: repeat center url(../images/parts/bg_texture_grid_02_gray_ll.svg); background-size: var(--cmn_bg_grid_size); opacity: 1;} .text_today_is {font-size: clamp(14px , 1.5vw , 16px); line-height: 1.7em; letter-spacing: 0.05em; margin-bottom: 0.7em;} .talent_name_box {} .talent_name { font-size: clamp( 20px , 6vw , 40px); line-height: 1.3em; letter-spacing: 0.05em; margin-bottom: 0.1em;} .talent_name_sub { font-size: clamp( 14px , 1.5vw , 18px); line-height: 1.3em; letter-spacing: 0.2em; } .catch_text {font-size: clamp(14px , 1.5vw , 16px); line-height: 1.7em; letter-spacing: 0.05em; margin-bottom: 0.5em;} .intro_text { font-size: clamp(12px , 1.0vw , 13px); line-height: 1.5em; letter-spacing: 0.02em; margin-bottom: calc(var(--base_gap)*1);} .link_btns { gap: calc(var(--base_gap)*0.75); .cmn_link_btn_a { width: 100%; font-size: min(18px, 4vw);} } } &.disactive {grid-template-rows: 0fr; height: 75vw; .talent_img {transform: translateX(0); opacity: 0;} } } } } @keyframes slideInClickFadeOut { /* 1. 右下からスーッとフェードイン (0%〜20%) */ 0% { opacity: 0; transform: translate(20%, 20%) scale(1); } 20% { opacity: 1; transform: translate(0, 0) scale(1); } /* 2. 元の位置で少し静止 (20%〜35%) */ 35% { transform: translate(0, 0) scale(1); } /* 3. クリック動作 1回目 (35%〜45%) */ 40% { transform: translate(0, 0) scale(1); /* 元 */ } 41% { transform: translate(0, 0) scale(0.85); /* カチッ（縮む） */ } 42% { transform: translate(0, 0) scale(1); /* 戻る */ } /* 4. 短い間隔 (45%〜50%) */ /* 5. クリック動作 2回目 (50%〜60%) */ 44% { transform: translate(0, 0) scale(1); /* 元 */ } 45% { transform: translate(0, 0) scale(0.85); /* カチッ（縮む） */ } 46% { transform: translate(0, 0) scale(1); /* 戻る */ } /* 6. 元の位置で少し静止 (60%〜75%) */ 75% { opacity: 1; transform: translate(0, 0) scale(1); } /* 7. 右下へスーッとフェードアウト (75%〜95%) */ 95%, 100% { opacity: 0; transform: translate(20%, 20%) scale(1); } } /* in message -------------------------------*/ #in_message { .message_list {width: 92VW; .message_box_title {position: relative; display: block; text-align: left; margin-bottom: calc(var(--base_gap)*0.5); font-size: clamp(16px , 2vw , 18px); z-index: 1; padding-left: 2.2em; .name {font-weight: 600; color: var(--c_theme_color); line-height: 1.3em; margin-bottom: 0em;} .icon {position: absolute; display: block; border: 1px solid var(--c_theme_color); border-radius: 9999px; top : 50%; left: 0; width: 3em; height: 3em; transform: translate(-45% , -48%);} } } }