@charset "utf-8";
/*
Theme Name: nokko.jp 2025
Theme URI: http://nokko.jp
Description: nokko.jp用テーマです。2025年09月作成。
Author: 03ENTERTAINMENT
Version: 1.0
License: GNU General Public License
License URI: license.txt
Tags: nokko
*/





.main_pic {position: relative;margin: 0 0 100px;}
.main_pic img {width: 100%;height: auto;}
.main_pic .sns_icon {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
-webkit- transform:translateX(-50%);
width: 22%;
}
.main_pic .sns_icon ul { display:flex;flex-wrap:wrap;}
.main_pic .sns_icon ul li {width: 28%;margin:0 8% 0 0;}
.main_pic .sns_icon ul li:last-child {margin-right: 0;}
.main_pic .sns_icon ul li img {width: 100%;height: auto;}

@media (max-width: 1280px) {
.main_pic {margin: 0 0 8.33vw;}
.main_pic .sns_icon {bottom: 4.16vw;}
}
@media screen and (max-width: 767px) {
.main_pic {margin: 0 0 10vw;}

}



.news {position: relative;margin: 0;}
.news h2.title {width: 100%;text-align: right;}
.news h2.title img.news {width: 660px;height: auto; }
.news_list {width: 1060px;margin: auto;text-align: left;
position: absolute;
top: 240px;
left: 50%;
transform:  translateX(-50%);
-webkit- transform:  translateX(-50%);
}
.news_list ul.list {width:calc(100% - 360px);display:flex;flex-wrap:wrap;margin: 0;}
.news_list ul.list li {font-size: 18px;line-height: 1.4;width:calc(100% - 6em);padding: 2vw 0;border-bottom: 1px solid #ccc;}
.news_list ul.list li a {color: #000;text-decoration: underline;}
.news_list ul.list li a:hover {color: #4400dd;text-decoration: none;}
.news_list ul.list li:first-child {width: 6em;}

.news_list .list_btn {width: 100%;}

@media (max-width: 1280px) {
.news {position: relative;margin: 0;}
.news h2.title img.news {width: 55vw;height: auto; }
.news_list {width: 88.33vw;top: 20vw;}
.news_list ul.list {width:calc(100% - 33vw);}
.news_list ul.list li {font-size: 1.5vw;}
.news_list .news {width: 100%;}
}
@media screen and (max-width: 767px) {
.news {position: relative;margin: 0;min-height: 66.04vw}
.news h2.title {position: absolute;top: 0;right: 0;}
.news h2.title img.news {width: 45vw;height: auto; }
.news_list {width: 88.33vw;
position: inherit;
top: inherit;
left: inherit;
transform:  inherit;
-webkit- transform: inherit;
margin: 0 0 0 5vw;
padding: 12vw 0 0;}
.news_list ul.list {width:calc(100% - 25vw);}
.news_list ul.list li {font-size: 2.6vw;line-height: 1.4; padding: 2.5vw 0;}
.news_list ul.list li p {font-size: 2.6vw;line-height: 1.4; max-height: 7vw;
display: -webkit-box;             
-webkit-box-orient: vertical;      /* 垂直方向に配置 */
overflow: hidden;                  /* 溢れた部分を隠す */
text-overflow: ellipsis;           /* 溢れた部分に「...」を表示 */
-webkit-line-clamp: 2;             /* 最大行数を2行に設定 */}
.news_list .list_btn {width:100%;}
.news ul:nth-child(n+4) {
display: none;
}
}




.okaeritadaima {position: relative;margin: 0 0 100px;}
.okaeritadaima h2.title {width: 100%;text-align: left;margin: 0;}
.okaeritadaima h2.title img.okaeritadaima {width: 453px;height: auto;margin: 0;}

.onair {
width: 462px;
position: absolute;
top: 50%;
right: 10%;
transform: translateY(-50%) ;
-webkit- transform: translateY(-50%) ;}
.onair img {width: 300px;height: auto;margin: auto 0 auto auto;}
.onair p {font-size: 34px;line-height: 1.4;text-align: center;width: 100%;margin: 0 0 40px;}
.onair p span {text-align: right;}
@media (max-width: 1280px) {
.onair {width: 40vw;}
.okaeritadaima {position: relative;margin: 0 0 8.33vw;}
.okaeritadaima h2.title img.okaeritadaima {width: 37.75vw;height: auto;}
.onair img {width: 25vw;}
.onair p {font-size: 2.83vw;margin: 0 0 3.33vw;}


}
@media screen and (max-width: 767px) {
.onair img {width: 40vw;}
.onair p {font-size: 3vw;margin: 0 0 5vw;}
}

.blog {position: relative;margin: 0 0 100px;}
.blog h2.title {width: 100%;margin: 0 0 50px;}
.blog h2.title img {width: 100%;height: auto;}
.blog_list {width: 1060px;margin: auto;text-align: left;}
.blog_list ul.list {display:flex;flex-wrap:wrap;}
.blog_list ul.list li {font-size: 18px;line-height: 1.4; width:calc(100% - 6em);padding: 2vw 0;border-bottom: 1px solid #ccc;}
.blog_list ul.list li a {color: #000;text-decoration: underline;}
.blog_list ul.list li a:hover {color: #4400dd;text-decoration: none;}
.blog_list ul.list li:first-child {width: 6em}
@media (max-width: 1280px) {
.blog {position: relative;margin: 0 0 8.33vw;}
.blog h2.title {width: 100%;margin: 0 0 4.16vw;}
.blog_list {width: 88.33vw;}
.blog_list ul.list li {font-size: 1.5vw;}
}
@media screen and (max-width: 767px) {
.blog {margin: 0 0 5vw;}
.blog_list ul.list li {font-size: 3vw;padding: 2.5vw 0;}
}



.biography{
width: 100vw;min-height: 100vw;
margin: 0 0 100px;
background-image: url("/common2025/images/biography.jpg");
background-image: image-set(url(/common2025/images/biography.jpg) 1x, url(/common2025/images/biography@2x.jpg) 2x);
background-image: -webkit-image-set(url(/common2025/images/biography.jpg) 1x, url(/common2025/images/biography@2x.jpg) 2x);
background-size: 100%;
background-repeat: no-repeat;
}
.biography h2 {width: 77%;margin:0 auto 7vw;text-align: left;}
.biography h2 img {width:30vw;height: auto;}
ul.biography_text {
width: 52%;
text-align: left;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
}
ul.biography_text li {}
ul.biography_text li:first-child {margin-left: 40%;}
ul.biography_text li:nth-child(3) {margin-right: 40%;}
ul.biography_text li p {font-size: 1.2vw;line-height: 1.6;padding: 1vw 0;}

.biography_text {
width: 77%;
text-align: left;
margin: auto;
}

.biography_text p {font-size: 1.4vw;line-height: 1.6;padding: 1vw 0;}

@media (max-width: 1280px) {
.biography{position: relative;margin: 0 0 8.33vw;}

}
@media screen and (max-width: 767px) {
.biography{
background-image: inherit;
background-image: inherit;
background-image:inherit;
}

.biography h2 {width:100%;margin:0 auto 5vw;text-align: left;}
.biography h2 img {width:100vw;height: auto;}


/*
.biography{margin: 0;}
ul.biography_text {
width: 90%;margin: auto;padding: 4vw 0;
text-align: left;
position: inherit;
top:inherit;
left:inherit;
transform:inherit;
-webkit- transform:inherit;
}
ul.biography_text li {}
ul.biography_text li:first-child {margin-left: inherit;}
ul.biography_text li:nth-child(3) {margin-right:inherit;}
ul.biography_text li p {font-size: 3vw;line-height: 1.6;padding: 1vw 0;}

*/
.biography_footer {}
.biography_footer img {width: 100%;height: auto;}


ul.biography_text {
width: 62%;
text-align: left;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
}
ul.biography_text li:first-child {margin-left: 28%;}
ul.biography_text li:nth-child(3) {margin-right: 28%;}
ul.biography_text li p {font-size: 1.2vw;line-height: 1.6;padding: 2px 0;}

.biography_text {
width: 90%;
text-align: left;
margin:0 auto 5vw;
}

.biography_text p {font-size:2.8vw;line-height: 1.6;padding: 1vw 0;}


}



.discography {width: 700px;margin:0 auto;text-align: left;}
.discography h2 {margin: 0 0 50px;}
.discography h2 img {width: auto;height: 65px;}
.discography h3 {margin: 0 0 50px;}
.discography h3 img {width: auto;height: 62px;}
ul.album {display:flex;flex-wrap:wrap;}
ul.album li {width: 46%;margin: 0 8% 8% 0;}
ul.album li:nth-child(2n) {margin-right: 0;}
ul.album li img {width: 100%;height: auto;transition: opacity 0.3s;}
ul.album li img:hover {opacity: .5;}
ul.album li p {font-size: 14px;line-height: 1.6;padding: 10px 0 0;}
ul.single {display:flex;flex-wrap:wrap;}
ul.single li {width: 28%;margin: 0 8% 8% 0;}
ul.single li:nth-child(3n) {margin-right: 0;}
ul.single li img {width: 100%;height: auto;transition: opacity 0.3s;}
ul.single li img:hover {opacity: .5;}
ul.single li p {font-size: 14px;line-height: 1.6;padding: 10px 0 0;}
@media (max-width: 1280px) {
.discography {width: 58.33vw;margin:0 auto;text-align: left;}
.discography h2 {margin: 0 0 8%;}
.discography h2 img {height: 7vw;}
.discography h3 {margin: 0 0 8%;}
.discography h3 img {height: 6vw;}
}
@media screen and (max-width: 767px) {
.discography {width: 90%;}
ul.album li p {font-size: 3vw;padding: 1.5vw 0 0;}
ul.single li p {font-size: 3vw;padding: 1.5vw 0 0;}
}






#discography {
position: relative;
}
#discography:before {
content: '';
display: block;
height: 100px;
margin-top: -100px;
}
@media screen and (max-width: 767px) {
#discography:before {
height: 5vw;
margin-top: -5vw;
}
}


 


.list_btn {display: block;padding: 3vw 0 1rem;text-align: center;}
.btn,
a.btn,
button.btn {
font-size: 16px;
font-weight: 700;
line-height: 1.5;
position: relative;
display: inline-block;
padding: 1rem 3rem;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
letter-spacing: 0.1em;
border-radius: 0.5rem;
}

a.blog_list {
font-weight: normal;
display: inline;
color: #fff!important;
border-radius: 0;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(40%, #ee22aa),
to(#4400dd)
);
background-image: -webkit-linear-gradient(left, #ee22aa 30%, #4400dd 100%);
background-image: linear-gradient(90deg, #ee22aa 30%, #4400dd 100%);
}
a.blog_list:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
-webkit-transition: all 0.5s;
transition: all 0.5s;
background-image: -webkit-gradient(
linear,
left top,
right top,
from(#ee22aa),
color-stop(#ee5566),
to(#4400dd)
);
border-radius: 100vh;
background-image: -webkit-linear-gradient(left, #4400dd 30%, #ee22aa 100%);
background-image: linear-gradient(90deg, #4400dd 30%, #ee22aa 100%);
}
a.blog_list span {position: relative;z-index: 1;}
a.blog_list:hover {color: #fff!important;}
a.blog_list:hover:after {opacity: 0;}
a.blog_list {border-radius: 100vh;}
@media (max-width: 1280px) {
.btn,
a.btn,
button.btn {
font-size: 1.33vw;
padding: 1vw 3vw;

}

}
@media screen and (max-width: 767px) {
.list_btn {padding: 7vw 0 5vw;}
.btn,
a.btn,
button.btn {font-size: 3vw;padding: 3vw 8vw;}}