html { font-size: 62.5%; }
body { font-family: 'Noto Sans', sans-serif; box-sizing: border-box; background-color: var(--color-black); }
body::-webkit-scrollbar { display: none; }
html,body { width: 100%; height: 100%; overflow-x:hidden; }
.wrapper { width: 100%; max-width: 1920px; min-height: 100%; margin: auto; }
.filter { position: relative; width: 100%; background-color: var(--color-black); }
.filter img { position: absolute; }
.filter::before, .filter::after { position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; mix-blend-mode: overlay; filter: brightness(60%) contrast(100%); }
.filter::before { background: #000; filter: url(#noise); width: 83.2%; margin-left: 8.5%; }
.filter::after { background: url(../img/texture.png) no-repeat center center / 100% 100%; }
.imgnonefilter { position: relative; width: 100%; background-color: var(--color-black); }
.imgnonefilter::before, .imgnonefilter::after { position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; mix-blend-mode: overlay; filter: brightness(60%) contrast(100%); }
.imgnonefilter::before { background: #000; filter: url(#noise); width: 83.2%; margin-left: 8.5%; }
.imgnonefilter::after { background: url(../img/texture.png) no-repeat center center / 100% 100%; }
/*=========================================================
VISUAL ↓
========================================================= */
.visual { position: relative; width: 100vw; max-width: 1920px; height: 100vh; max-height: 1080px; background: linear-gradient(to top, #131314,#3F0606); pointer-events: none; }
.visual .background #circle_blue { filter: url(#wavy); animation: circleblue 10s linear infinite; width: 100%; height: 100%; }
.visual .background #circle { filter: url(#wavy); animation: circle 15s linear infinite; width: 100%; height: 100%; }
@keyframes circleblue { to { transform: rotate(180deg); filter: url(#wavy) hue-rotate(180deg); } }
@keyframes circle { to { transform: rotate(360deg); filter: url(#wavy) hue-rotate(180deg); } }
.visual .background #bgs { max-width: 100%; height: auto; bottom: 0; }
/* text ↓=========================================================*/
.visual .vl-text { overflow: hidden; margin-left: 3em; }
.visual .vl-text > h1 { position: relative; z-index: 2; margin-top: 2em; width: 100%; max-width: 260px; min-width: 150px; height: 80px; font-size: var(--font-medium); font-weight: 400; background-color: var(--color-green); color: var(--color-white); text-align: center; line-height: 80px; }
.visual .vl-text > h1::before { content: ''; position: absolute; top: 0; z-index: -1; left: -80px; width: 80%; height: 100%; background: linear-gradient(to bottom, #44B58A, rgba(71, 145, 117, 0)); transform: skewX(-50deg); }
.visual .vl-text #title { bottom: 15%; left: 2.5em; width: 100%; max-width: 32.725%; }
.visual .vl-text #sub-title { bottom: 20%; right: 4%; width: 100%; max-width: 30%; }
/* circle ↓=========================================================*/
.visual .vl-text .circle { position: absolute; top: 0; right: 0; width: 100%; height: 100%; overflow: hidden; }
.visual .vl-text .circle li { position: absolute; top: 10%; display: block; list-style: none; width: 25px; height: 25px; border-radius: 50%; }
.visual .vl-text .circle li.darkred { background-color: #210606; right: 4%; }
.visual .vl-text .circle li.maroon { background-color: #300707; right: 7%; }
.visual .vl-text .circle li.red { background-color: #3a0707; right: 10%; }
/* scrollDown ↓=========================================================*/
.visual .scroll { position: absolute; bottom: 2%; left: 50%; transform: translateX(-50%); }
.visual .scroll > span { font-size: var(--font-micro); font-weight: 400; color: var(--text-text); letter-spacing: .5px; }
.visual .scroll .mouse { position: relative; width: 40px; height: 40px; border: 1px solid var(--text-text); border-radius: 50%; margin-left: 32px; margin-top: 8px; }
.visual .scroll .mouse .pointer { animation: pointer 3s ease-in-out infinite; position: absolute; top: 10%; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; background-color: var(--color-white); border-radius: 10px; }
@keyframes pointer { 0% { opacity: 0; top: 0; } 50% { opacity: 1; } 100% { opacity: 0; top: 90%; } }
/*=========================================================
HEADER ↓
========================================================= */
header { position: sticky; z-index: 9999; top: 0; max-width: 1920px; width: 100%; height: 80px; background-color: #000; display: flex; align-items: center; color: var(--text-text); }
header.fixed { position: fixed; top: 0; width: 100%; }
header h1 { margin-left: 3em }
header h1 a { display: block; }
header h1 a img { display: block; width: 250px; }
header nav { margin-left: auto; }
header nav ul { display: flex; position: relative; list-style: none; }
header nav ul li { margin-right: 2em; width: 100%; }
header nav ul li a { display: block; overflow: hidden; position: relative; z-index: 1; width: 156px; height: 100%; line-height: 48px; transition: color .4s linear; font-family: var(--font-gugi); font-size: var(--font-small); color: var(--text-text); background-color: var(--color-black); border: 1px solid var(--color-deepgreen); border-radius: 5px; text-decoration: none; text-align: center; }
header nav ul li a:active { color: var(--text-disabled); }
header nav ul li a:hover { color: var(--text-label); }
header nav ul li a::before { content: ''; position: absolute; z-index: -1; top: 0; left: -50px; width: 0; height: 100%; background: linear-gradient(to left, var(--color-deepgreen), var(--color-green)); transform: skewX(35deg); transition: .5s; transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); filter: blur(2px); }
header nav ul li a:hover::before { width: 150%; }
header .mob-a ul li a:hover::before { width: 200%; }
header nav ul li a.active { color: var(--text-disabled); background-color: var(--color-green); }
header nav ul li a > span.hello { color: var(--text-label); }
/* mobile tab menu ↓=========================================================*/
header .mobile { position: relative; }
header input[id="menuicon"] { display: none; }
header .mobile .menubtn { display: none; width: 40px; height: 42px; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); cursor: pointer; }
header .mobile .menubtn span { display: block; position: absolute; width: 70%; height: 4px; border-radius: 50px; background-color: var(--color-green); transition: all .2s; }
header .mobile .menubtn span:nth-child(1) { top: 20%; left: 50%; transform: translateX(-50%); }
header .mobile .menubtn span:nth-child(2) { top: 50%; left: 50%; transform: translate(-50%, -50%); }
header .mobile .menubtn span:nth-child(3) { bottom: 20%; left: 50%; transform: translateX(-50%); }
header input[id="menuicon"]:checked ~ .mobile .menubtn { z-index: 11; }
header input[id="menuicon"]:checked ~ .mobile .menubtn span:nth-child(1) { top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(135deg); }
header input[id="menuicon"]:checked ~ .mobile .menubtn span:nth-child(2) { left: 50%; transform: translate(-50%, -50%), scale(2); opacity: 0; }
header input[id="menuicon"]:checked ~ .mobile .menubtn span:nth-child(3) { bottom: 50%; left: 50%; transform: translate(-50%, 50%) rotate(-135deg); }
header input[id="menuicon"]:checked ~ .container .sidebar { right: 0; }
/* mobile content ↓=========================================================*/
.container { position: relative; z-index: 10; }
.container .sidebar { position: fixed; top: 0; right: -100vw; width: 100vw; height: 100%; z-index: 10; background: linear-gradient(to right, #000, #420707); transition: .35s; }
.container .sidebar .tabs { position: relative; width: 100%; height: 100%; background: url(../img/svg/mobile_tab_img.svg) no-repeat center right / 50%; }
.container .sidebar .tabs ul { position: absolute; top: 20%; left: 15%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; list-style-type: none; }
.container .sidebar .tabs ul li { margin: .5em; font-family: var(--font-gugi); font-size: var(--font-x-large); }
.container .sidebar .tabs ul li a { position: relative; z-index: 1; display: block; color: var(--color-white); text-decoration: none; transition: ease-out .25s; }
.container .sidebar .tabs ul li a:hover { color: var(--color-lightgreen); }
.container .sidebar .tabs ul li a::before { content: '▶'; position: absolute; z-index: -1; top: 0; left: -10px; width: 0; height: 100%; font-size: 25px; opacity: 0; transition: ease-out .25s; color: var(--color-lightgreen); vertical-align: middle; }
.container .sidebar .tabs ul li a:hover::before{ left: -50px; opacity: 1; }
/*=========================================================
MAIN ↓
=========================================================*/
main { position: relative; overflow: hidden; z-index: 1; height: 100vh; max-height: 1080px; background: linear-gradient(to top,#3F0606, #000); }
main::before, main::after { position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; mix-blend-mode: overlay; filter: brightness(60%) contrast(150%); }
main::before { background: #000; filter: url(#noise); width: 83.2%; margin-left: 8.5%; }
main::after { background: url(../img/texture.png) no-repeat center center / 100%; }
main .main-text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-top: 2.5%; margin-left: 4em; background-image: url(../img/svg/main_img01.svg), url(../img/svg/Bubble.svg); background-repeat: no-repeat; background-position: bottom right, top right; background-size: 45%, 50%; }
main .main-text .tag { font-family: var(--font-Space); font-size: var(--font-medium); color: var(--color-white); }
main .main-text .tag > span { float: left; margin: 8em 0 0; letter-spacing: 0.14em; width: 200px; height: 48px; background-color: var(--color-deepgreen); border-radius: 5px; text-align: center; line-height: 48px; }
main .main-text .tag h1.main-title { clear: both; float: left; font-size: var(--font-title); font-weight: 500; letter-spacing: -0.05em; width: 100%; max-width: 877px; line-height: 1.25; margin: 0.24em 0; }
main .main-text .tag > p { float: left; width: 100%; height: 66px; margin-bottom: 2em; color: var(--text-text); font-family: var(--font-noto); font-weight: 300; text-align: left; line-height: 1.5; }
main .main-text .tag ul.social { display: flex; position: relative; z-index: 1; width: 100%; height: 100%; margin: 1em 0; list-style-type: none; }
main .main-text .tag ul.social .button { position: relative; transition: all 0.3s ease-out; width: 60px; height: 60px; float: left; background: #242426; border-radius: 50px; cursor: pointer; box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .3); }
main .main-text .tag ul.social .button::before { transform: scale(0); transition: all 0.3s ease-out; content: ''; display: block; position: absolute; z-index: -1; top: -16%; left: 0; width: 80px; height: 80px; margin-left: -10px; background-color: var(--color-lightgreen); border-radius: 50px; filter: blur(2px); opacity: .3; }
main .main-text .tag ul.social .button:hover { z-index: 1; width: 200px; background: linear-gradient(to left, var(--color-green), var(--color-deepgreen)); }
main .main-text .tag ul.social .button:hover:before { transform: scale(1); }
main .main-text .tag ul.social .button .icon { position: relative; display: inline-block; width: 60px; height: 60px; text-align: center; border-radius: 50px; text-decoration: none; }
main .main-text .tag ul.social .button:hover .icon { background-color: var(--color-white); transition: all 0.3s ease-out; }
main .main-text .tag ul.social .button .icon img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  }
main .main-text .tag ul.social .button .icon span { position: absolute; font-size: 2rem; margin-left: 2.5em; font-weight: 300; line-height: 60px; letter-spacing: .5px; color: var(--color-green); opacity: 0; transition: all 0.3s ease-out; }
main .main-text .tag ul.social .button:hover .icon span { color: var(--color-white); opacity: 1; }
/*=========================================================
FOOTER ↓
========================================================= */
footer { overflow: hidden; position: relative; z-index: 9999; bottom: 0; width: 100%; height: 60px; display: flex; justify-content: center; align-items: center; text-align: center; background: #000 center bottom / 100%; }
footer p { position: absolute; width: 100%; color: var(--text-text); font-size: var(--font-micro); }
/*=========================================================
MEDIA QUERY ↓
========================================================= */
@media only screen and (min-width: 1350px) {
    .favorite .item h1 { margin: 1em 0 0.5em 0.4em; }
    header input[id="menuicon"] + label { display: none; }
    .favorite .item .item-wrapper .item-wrap { width: 32.33333%; }
    main .main-text .tag ul.social .button { margin: 0 15px; }
    header .mob-a { display: none; }
    main .main-text { background-size: 45%, 50%; }
}
@media only screen and (max-width: 1350px) {
    html { font-size: 51.5625%; }
    header nav { margin-left: auto; display: none; }
    header nav ul { display: flex; position: relative; list-style: none; }
    header nav ul li { margin-right: 2em; width: 100%; font-family: var(--font-gugi); font-size: var(--font-micro); color: var(--text-text); }
    header nav ul li a { display: block; overflow: hidden; position: relative; z-index: 1; width: 68px; height: 100%; display: flex; align-items: center; justify-content: center; transition: color .4s linear; background-color: var(--color-black); border: 1px solid var(--color-deepgreen); border-radius: 5px; text-decoration: none; }
    header .mob-a { margin-left: auto; display: block; }
    header .mob-a ul { display: flex; position: relative; list-style: none; }
    header .mob-a ul li { margin-right: 1.5em; width: 100%; font-family: var(--font-gugi); font-size: var(--font-micro); color: var(--text-text); }
    header .mob-a ul li a { display: block; overflow: hidden; position: relative; z-index: 1; width: 78px; height: 100%; display: flex; align-items: center; justify-content: center; transition: color .4s linear; background-color: var(--color-black); border: 1px solid var(--color-deepgreen); border-radius: 5px; text-decoration: none; }
    /* .visual .background #bgs { height: 60%; } */
    main .main-text { background-size: 45%, 60%; }
    main .main-text .tag ul.social .button { margin: 0 15px; }
    .favorite .item h1 { margin: 1em 0 0.5em 0.3em; }
    .favorite .item .item-wrapper .item-wrap { width: 32.33333%; }
    
}
@media only screen and (max-width: 1000px) { main .main-text { background-size: 65%, 65%; } }
/* MOBILE ↓=========================================================*/
@media only screen and (max-width: 805px) {
    html { font-size: 46.875%; }
    header { height: 80px; display: block; }
    header > h1 { width: 100%; top: -12px; padding-top: 12px; }
    header > h1 img { margin-right: auto; margin-top: 14px; }
    header nav ul { display: none; }
    header .mob-a { display: none; }
    header .mobile .menubtn { display: block; margin-top: -18px; }
    .visual .vl-text > h1 { width: 100%; max-width: 180px; min-width: 150px; height: 60px; line-height: 60px; }
    .visual .vl-text #title { bottom: 20%; max-width: 40%; }
    .visual .vl-text #sub-title { max-width: 50%; }
    .visual .vl-text .circle { display: none; }

    main .main-text .tag h1.main-title { font-size: max(4.5rem, min(10vw,9.5rem)); text-shadow: 3px 3px 3px rgba(0, 0, 0, .5); }
    main .main-text { background-size: 80%, 80%; }
    main .main-text .tag > p { float: left; width: 100%; margin-bottom: 1em; line-height: 1.25; }
    main .main-text .tag ul.social { flex-direction: column; gap: 1.5em; }
}
@media only screen and (max-width: 432px) {
    .visual .vl-text > h1 { display: none; }
    .visual .vl-text .vl-text-box { width: 100%; height: 100%; }
    .visual .vl-text .vl-text-box #title { display: block; max-width: 90%; top: 20%; transform: translateY(-20%); }
    .visual .vl-text .vl-text-box #sub-title { display: block; max-width: 90%; bottom: 20%; transform: translateY(20%); }
}