/* CONTAINER */ #container {} /* #visual {position: relative; margin-bottom: 80px; height: 884px; -webkit-animation: bg_img 12s infinite; animation: bg_img 12s infinite; background-size: cover; background-position: 50% 0; background-image: url("../img/visual_01.jpg");} */ #visual h1 {position: absolute; top: 30px; left: 170px; color: #fff; font-size: 3.75em; z-index: 4;} #visual h1 b {display: block; line-height: 1;} #visual h1 b:nth-child(2) {color: #2faeff;} #visual .visual_txt {position: absolute; top: 30%; left: 0; z-index: 4; width: 100%; color: #fff; opacity: 0.5; text-align: center; line-height: 1; letter-spacing: 1px;} #visual .visual_txt p:nth-child(1) {font-size: 2em;} #visual .visual_txt p:nth-child(2) {font-size: 8.5em; line-height: 1.1;} #visual .visual_txt p:nth-child(3) {font-size: 2.5em; line-height: 2.5;} #visual {position: relative; height: 884px; overflow: hidden;} #visual div {position: absolute; top: 0; left: 0; margin-bottom: 80px; width: 100%; height: 100%; opacity: 0; animation: 16s 3s infinite; background-size: cover; background-position: 50% 0;} #visual #bg_01 {animation-name: bg_1;} #visual #bg_02 {animation-name: bg_2;} #visual #bg_03 {animation-name: bg_3;} #visual #bg_04 {opacity: 1; animation-name: bg_4;} @keyframes bg_1 { 0% {opacity: 1; z-index: 2;} 24.9% {opacity: 1; z-index: 2;} 25% {opacity: 1; z-index: 3;} 30% {opacity: 0; z-index: 3;} 30.1% {opacity: 0; z-index: 2;} 100% {opacity: 0; z-index: 2;} } @keyframes bg_2 { 0% {opacity: 0; z-index: 2;} 24.9% {opacity: 0; z-index: 2;} 25% {opacity: 1; z-index: 2;} 50% {opacity: 1; z-index: 3;} 55% {opacity: 0; z-index: 3;} 55.1% {opacity: 0; z-index: 2;} 100% {opacity: 0; z-index: 2;} } @keyframes bg_3 { 0% {opacity: 0; z-index: 2;} 49.9% {opacity: 0; z-index: 2;} 50% {opacity: 1; z-index: 2;} 75% {opacity: 1; z-index: 3;} 80% {opacity: 0; z-index: 3;} 80.1% {opacity: 0; z-index: 2;} 100% {opacity: 0; z-index: 2;} } @keyframes bg_4 { 0% {opacity: 1; z-index: 2;} 0.1% {opacity: 1; z-index: 3;} 5% {opacity: 0; z-index: 3;} 74.9% {opacity: 0; z-index: 2;} 75% {opacity: 1; z-index: 2;} 100% {opacity: 1; z-index: 2;} } #album {position: relative; margin: 80px 0; height: auto;} #album .pg_btn {display: none; padding-top: 5%;} #album #pg_01:checked~.pg_01 {display: block;} #album #pg_02:checked~.pg_02 {display: block;} #album #pg_03:checked~.pg_03 {display: block;} #album #pg_04:checked~.pg_04 {display: block;} #album #pg_05:checked~.pg_05 {display: block;} #album #pg_06:checked~.pg_06 {display: block;} #album .pg_03 label[for=pg_01] {display: block;} #album .pg_03 label[for=pg_04] {display: none;} #album .pg_btn label {position: absolute; top: 50%; left: 0; width: 60px; height: 60px; text-indent: -9999px;} #album .pg_btn label+label {left: auto; right: -28px;} #album .pg_btn span {overflow: hidden; position: absolute; top: 15px; left: -4px; width: 40px; height: 4px; background-color: #222; transform: rotate(-45deg);} #album .pg_btn span+span {position: absolute; top: 41px; left: -4px; width: 40px; height: 4px; background-color: #222; transform: rotate(45deg);} #album .pg_btn label+label span {transform: rotate(45deg);} #album .pg_btn label+label span+span {transform: rotate(-45deg);} #album .pg_btn label span i {position: absolute; top: -35px; left: -35px; width: 75px; height: 75px; background-color: #2faeff; border-radius: 50%; transform: scale(0); transition: 0.2s linear 0.1s;} #album .pg_btn label+label span i {position: absolute; top: -35px; left: auto; right: -35px; width: 75px; height: 75px; background-color: #2faeff; border-radius: 50%; transform: scale(0); transition: 0.2s linear 0.1s;} #album .pg_btn label:hover {transform: scaleY(0.8); transition: 0.2s;} #album .pg_btn label:hover span i {transform: scale(1); transition: 0.2s linear 0.1s;} #album .pg_cnt ul {margin: 0 50px;} #album .pg_cnt ul li {display: none; position: relative; width: 48.5%;} #album .pg_cnt ul li:before {content: ""; position: absolute; top: -1px; bottom: -1px; left: -1px; right: -1px; border: 1px solid #cdcdcd;} #album .pg_cnt ul li:nth-child(2n) {margin-left: 14px;} #album .pg_cnt ul li a {display: block; position: relative; width: 100%; height: 100%;} #album .pg_cnt ul li img {display: block; width: 100%;} #album .pg_cnt ul li .info {display: none; position: absolute; top: 50%; left: 0; width: 100%; color: #fff; text-align: center; font-size: 2em; transform: translateY(-43px);} #album .pg_cnt ul li .info p {} #album .pg_cnt ul li .info p+p {padding-top: 28px;} #album .pg_cnt ul li a:hover .info {display: block; z-index: 1;} #album .pg_cnt ul li a:hover:after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #444; opacity: 0.8;} #video {margin-bottom: 80px;} #video .mv_top h1 {} #video .mv_top .mv_btn {margin: 38px 0 20px 0; font-size: 1.25em; letter-spacing: 1px;} #video .mv_top .mv_btn label {position: relative;} #video .mv_top .mv_btn label+label {margin-left: 14px;} #video .mv_top .mv_btn label+label:before {content: ""; position: absolute; top: 0; bottom: 0; left: -9px; width: 1px; height: 100%; background-color: #d6d6d6;} #video #mv_chk_01:checked~.mv_top .mv_btn .mv_chk_01 {color: #2faeff; font-weight: bold;} #video #mv_chk_02:checked~.mv_top .mv_btn .mv_chk_02 {color: #2faeff; font-weight: bold;} #video .mv_btm {} #video .mv_btm ul {display: none;} #video #mv_chk_01:checked~.mv_btm .new {display: block;} #video #mv_chk_02:checked~.mv_btm .hot {display: block;} #video .mv_btm ul li {float: left; width: 24%; border: 1px solid #ddd;} #video .mv_btm ul li+li {margin-left: 1.3%;} #video .mv_btm ul li a {} #video .mv_btm ul li a .thumb {position: relative; height: 0; padding-top: 52%;} #video .mv_btm ul li a .thumb .thumb_inner {position: absolute; top: 0; left: 0; right: 0; bottom: 0;} #video .mv_btm ul li a .thumb iframe {overflow: hidden; display: block; width: 100%; height: 100%;} #video .mv_btm ul li a .info {padding: 16px 0; font-family: 'Noto Sans', sans-serif; text-align: center;} #video .mv_btm ul li a .info .tit {font-size: 1.125em; font-weight: bold;} #video .mv_btm ul li a .info .artist {display: block; margin-top: 10px; font-size: 0.875em;} #notice {margin-bottom: 60px; height: 360px;} #notice .thumb {position: relative; width: 58%; height: 100%;} #notice .thumb:after {content: ""; position: absolute; width: 100%; height: 100%; background-image: url(../img/notice_01.jpg); background-size: cover; background-position: 50% 0;} #notice .notice_cnt {position: relative; padding: 50px 50px 50px; width: 38%; height: 100%; border: 1px solid #444;} #notice .notice_cnt h3 {position: absolute; top: -24px; right: 50px; padding: 0px 10px; font-size: 2.5em; font-weight: bold; background-color: #fff; letter-spacing: 1px;} #notice .notice_cnt ul {cursor: pointer;} #notice .notice_cnt ul li {position: relative; padding-left: 10px; color: #222; font-size: 1.25em;} #notice .notice_cnt ul li:hover {color: #268fff; font-weight: 400; text-shadow: 0 0 0.1px #d6d6d6;} #notice .notice_cnt ul li:before {content: ""; position: absolute; bottom: -18px; left: 0; right: 0; height: 1px; background-color: #ddd;} #notice .notice_cnt ul li+li {padding-top: 40px;} #notice .notice_cnt ul li span {display: block;} /* Animation */ /* Media query */ @media screen and (max-width: 1280px) { #visual h1 {left: 120px; font-size: 2.75em;} #visual .visual_txt p:nth-child(1) {font-size: 1.688em;} #visual .visual_txt p:nth-child(2) {font-size: 7.5em;} #visual .visual_txt p:nth-child(3) {font-size: 2em;} } @media screen and (max-width: 1024px) { #visual h1 {left: 90px;} #visual .visual_txt p:nth-child(2) {font-size: 5.875em;} #notice .notice_cnt {padding: 72px 30px 50px;} #notice .notice_cnt h3 {right: 34px; font-size: 2.75em;} #notice {height: 300px;} #notice .notice_cnt {padding: 50px 30px;} #notice .notice_cnt ul li:last-child {display: none;} } @media screen and (min-width: 769px) { #album #pg_01:checked~.pg_cnt .cnt_01 li:nth-child(1) {display: inline-block;} #album #pg_01:checked~.pg_cnt .cnt_01 li:nth-child(2) {display: inline-block;} #album #pg_02:checked~.pg_cnt .cnt_01 li:nth-child(3) {display: inline-block;} #album #pg_02:checked~.pg_cnt .cnt_01 li:nth-child(4) {display: inline-block;} #album #pg_03:checked~.pg_cnt .cnt_01 li:nth-child(5) {display: inline-block;} #album #pg_03:checked~.pg_cnt .cnt_01 li:nth-child(6) {display: inline-block;} } @media screen and (max-width: 768px) { #conrainer {margin-top: 65px;} #visual {height: 450px;} #visual h1 {top: 22px; left: 66px; font-size: 1.875em;} #visual .visual_txt p:nth-child(1) {font-size: 1.313em;} #visual .visual_txt p:nth-child(2) {font-size: 4.25em;} #visual .visual_txt p:nth-child(3) {font-size: 1.75em;} #album .pg_cnt ul {margin: 0px 30px 0 36px;} #album .pg_cnt ul li {width: 98%;} #album .pg_cnt ul li:nth-child(2n) {margin-left: 0;} #album .pg_btn label {width: 50px; height: 50px;} #album .pg_03 label[for=pg_01] {display: none;} #album .pg_03 label[for=pg_04] {display: block;} #album #pg_01:checked~.pg_cnt .cnt_01 li:nth-child(1) {display: inline-block;} #album #pg_02:checked~.pg_cnt .cnt_01 li:nth-child(2) {display: inline-block;} #album #pg_03:checked~.pg_cnt .cnt_01 li:nth-child(3) {display: inline-block;} #album #pg_04:checked~.pg_cnt .cnt_01 li:nth-child(4) {display: inline-block;} #album #pg_05:checked~.pg_cnt .cnt_01 li:nth-child(5) {display: inline-block;} #album #pg_06:checked~.pg_cnt .cnt_01 li:nth-child(6) {display: inline-block;} #album .pg_btn span {width: 30px;} #album .pg_btn span+span {top: 34px; width: 30px;} #video .mv_top .mv_btn {margin: 28px 0 20px 0;} #video .mv_btm ul li:nth-child(3) {margin-left: 0;} #video .mv_btm ul li:nth-child(2)~li {margin-top: 10px;} #video .mv_btm ul li a .info .tit {font-size: 1em;} #video .mv_btm ul li {width: 49%;} #video .mv_btm ul li a .info .tit {font-size: 1em;} #notice .thumb {width: 100%;} #notice .notice_cnt {margin-top: 30px; padding: 44px 30px; width: 100%;} } @media screen and (max-width: 560px) { #visual h1 {top: 20px; left: 44px; font-size: 1.5em;} #visual .visual_txt p:nth-child(2) {font-size: 3.5em;} } @media screen and (max-width: 480px) { #visual {height: 280px;} #visual h1 {top: 14px; left: 28px; font-size: 1.25em;} #visual .visual_txt p:nth-child(1) {font-size: 1.125em;} #visual .visual_txt p:nth-child(2) {font-size: 2.25em;} #visual .visual_txt p:nth-child(3) {font-size: 1.25em; line-height: 1.8;} #album .pg_cnt ul li li {margin-left: 4px;} #video .mv_top .mv_btn {margin: 18px 0; font-size: 1.125em;} #video .mv_btm ul li {margin: 0 10%; width: 80%;} #video .mv_btm ul li+li {margin: 10px 10% 0;} #video .mv_btm ul li:nth-child(3) {margin: 0 10%;} #video .mv_btm ul li a .info .tit {display: inline-block;} #video .mv_btm ul li a .info .artist {display: inline-block; margin: 0 0 0 16px; position: relative;} #video .mv_btm ul li a .info .artist:after {content: ""; position: absolute; top: 1px; bottom: 0; left: -10px; width: 1px; background-color: #ddd;} #notice {height: 230px;} #notice .notice_cnt {padding: 30px 14px 0;} #notice .notice_cnt h3 {right: 20px;} #notice .notice_cnt ul li+li {padding-top: 26px;} }