/**
*  reset CSS
*  -----------------------------
*/

html{color:#454545;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}*{font-size:100%}legend{color:#000}


  /* 本文用 */
  /* .content-class {
    font-family: "Open Sans", "Zen Kaku Gothic New", system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
  } */
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

/* ボタン共通 */
button {
background: #3dbbce;
color: white;
border: none;
transition: all .3s;
}
button:hover {
opacity: 0.7;
}

/* ベース, Noto Sans JP */
body {
    font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif, "Hiragino Sans", "Hiragino Kaku Gothic ProN";
    background-color: #FFFFFF;
    margin: 0;
    padding: 0;
}

/* コンテンツ中央配置 */
.container {
    width: 1200px;
    margin: 0 auto;
    padding: 0;
    position: relative;
}

/* ヘッダー */
#header {
    position: fixed;
    width: 100%;
    height: 100px;
    background-color: rgba(255, 255, 255, 0.6);
    transition: background-color 0.3s;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

  /* 
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease; */

    top: 0;
    left: 0;
    z-index: 1000;
    border-top: 1px solid #9DD6DF;
}
.header-blank h1 {color: #fff;}

/* #header.scrolled {
    background: rgba(255, 255, 255, 0.7);
} */

#header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
.header-blank {
    height:110px;
    width:100%
}
.logo {
	padding-left:10px;
}
.logo img {
    width: 200px;
}

/* スマホ用メニュー */
.mb-nav {
	display: none;
}
.main-nav {
	display: block;
    padding-right: 20px;
}
.main-nav ul {
    display: flex;
    gap: 25px;
    list-style: none;
}

.main-nav a {
    text-decoration: none;
    color: #454545;
    position: relative;
    display: inline-block;
    transition: .3s;
}
.main-nav a::after {
    position: absolute;
    bottom: -2px;
    left: 0;
    content: '';
    width: 0;
    height: 1px;/*下線の太さ*/
    background-color:#454545 ;/*下線の色*/
    transition: .3s;
    }
.main-nav a:hover::after {
    width: 100%;
    }




/* メインビジュアル */

.main-visual {
	width: 100%;
    height: 720px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.main-visual .container {
    height: 720px;
    text-align: center;
}
.main-visual .container img {
    height: 100%;
    object-fit: cover;
}
.mb-hidden {
    display:initial;
}


/* メインビジュアル　テスト ------------------------------- */
.splide__slide img {
    width:100%;
    height: 100%;
    object-fit:cover;
    
    @media screen and (max-width: 480px) { height: auto; }
}
.splide {
    max-width: 100%;
    height:720px;
    margin: auto;
    
    @media screen and (max-width: 480px) { height: auto; }
}
/* メインビジュアル　テスト ------------------------------- */


/* NEWSエリア */
h2 {
    text-align: center;
    font-size:40px;
    font-weight: bold;
	padding:120px 0 70px;
    letter-spacing: 0.05em;
}

.news-list {
    list-style: none;
    padding: 0 100px;
}
.news-list a {
    text-decoration: none;
    color:#454545;
}

.news-list li {
    height: 65px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    padding: 25px 10px 25px 10px;
    /* background-color: red; */
}
.news-list li:first-child {
	border-top: 1px solid #ddd;
}
/* 遷移させたい要素に transition をセット */
.news-list .news-text {
  transition: color 0.3s ease, transform 0.3s ease;
}
/* a:hover 時に .news-text を変化 */
.news-list li a:hover .news-text {
  /* color: #000; */
  transform: scale(1.02);
}

/* 上段（日付とジャンル） */
.news-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 下段（説明テキスト） */
.news-text {
    text-align: left;
    font-size: 1.2rem;
    padding: 0 0 0 10px;
}
.news-list .date {
    /* font-weight: bold; */
    color:#999;
    font-size: 1.2rem;
}
.news-list .date span {
    font-weight: bold;
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    color: #FF0000;
    padding-left:0.5rem;
}

.news-list .genre {
    background: #ddd;
    padding: 5px 20px;
    /* border-radius: 5px; */
    text-align: center;
    min-width:120px;
    /* font-weight: bold; */
}
.genre.campaign {
    background-color: #afeeee;
}
.genre.release {
    background-color: #ffdab9;
}
.genre.live {
    background-color: #FADBDA;
}
.genre.media {
    background-color: #aee4ae;
}
.read-more {
    text-align: center;
    padding: 50px 0 30px;
}

.read-more button {
    padding: 10px 40px;
    /* background: #3dbbce;
    color: white;
    border: none;
    transition: all .3s; */
}
/* .read-more button:hover {
  opacity: 0.7;
} */
/* .read-more button {
    padding: 10px 40px;
    background: #FFF;
    color: #497fc5;
    border: 1px solid #497fc5;
} */

/* DISCOGRAPHYエリア */
.discography .container {
    width:1200px;
}
.filter-buttons {
    display: flex;
    justify-content: center;
    gap: 30px;
	padding:0 0 30px;
}

.filter-buttons button {
	min-width:200px;
    padding: 10px 30px;
}

.discography-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px; /* ← ここ重要！余白を明確に制御 */
}

.discography-item {
    width: 378px ; /* gap×2＝60pxを引いて3分割 calc((100% - 60px) / 3)*/
    height: auto;
    margin: 0;
    padding: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
	border-bottom: 1px #C0C0C0 solid;
    opacity: 1;
    transition: opacity 0.4s ease;
}
/* 非表示にする前にこれを付ける */
.discography-item.fade-out {
  opacity: 0;
}
.discography-item img {
    width: 378px;
    height: 378px;
}

.discography-item p {
    font-size: 16px;
    font-weight: bold;
    margin: 0;
	padding: 10px 0 30px;
}
#footer .container {
	padding: 50px 0;
	text-align: center;
}


/* discography-page ------------------------------------------------------------------------- */
/* DISCOGRAPHYページ全体 */
.discography-page {
    width: 100%;
    background: #fff;
    /* padding: 60px 0; */
}
h3 {
    font-size:large;
    font-weight:bold;
    margin-top: 20px;
}
/* コンテンツ全体 */
.discography-page-contents {
    padding:0 100px 40px;
}

/* メタ情報：日付とジャンル */
.discography-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.discography-date {
    font-size: 1rem;
    color: #C0C0C0;
}

.discography-genre {
    font-size: 0.9rem;
    font-weight: bold;
    color: #fff;
    background: #999;
    padding: 5px 15px;
    border-radius: 20px;
}

/* タイトル */
.discography-title {
    font-size: 1.8rem;
    margin-bottom: 20px;
    text-align: left;
    /* color: #000; */
    padding: 0;
}

/* メイン詳細 */
.discography-detail {
    display: flex;
    gap: 30px;
    padding-bottom: 30px;
}

.discography-image-block {
    width: 300px;
    flex-shrink: 0;
    text-align: center;
}

.discography-image-block img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 1px solid #ddd;
}
.discography-image-block.no-aspect img {
    aspect-ratio: auto;
    height: auto;
    /* object-fit: contain; */
}

.discography-img-caption {
    margin-top: 10px;
    font-size: 0.9rem;
    color: #666;
}

.discography-description {
    flex: 1;
    font-size: 1rem;
    line-height: 1.8;
    /* color: #333; */
}
.discography-description p {
    padding:10px 0 50px 10px;
}
/* リンク全体の余白 */
.discography-links {
    margin: 30px 0;
  }
  
  /* 1行目：STOREボタン */
  .store-button {
    margin-bottom: 20px;
    text-align: center;
  }
  .store-button a {
    display: inline-block;
    width: 80%;
    padding: 10px 0;
    background-color: #9DD6DF;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    border-radius: 5px;
  }
  
  /* 2行目：音楽サービスボタン */
  .music-services {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }
  
  .music-services a {
    flex: 1 1 calc(14% - 10px); /* 6等分・gap考慮 */
    min-width: 120px;
    text-align: center;
    padding: 10px;
    background-color: #C0C0C0;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9rem;
    white-space: nowrap;
  }
/* discography-page ------------------------------------------------------------------------- */


/* profile ------------------------------------------------------------------------- */
.profile .container {
    width:1000px;
    padding: 0 100px;
}
.profile .container p {
    padding: 0 10px;
}
.profile .container ul {
    padding: 0 0 25px 30px;
}
h4 {
    border-top: 2px solid #BBB;
    padding: 20px 0;
    margin-top: 25px;
    font-size:large;
    font-weight:bold;
}
.profile .container li {
    list-style-type: disc;
    padding: 0 0 1em 0;
}

/* .profile_image img {
    width:100%;
} */
/* profile ------------------------------------------------------------------------- */


/* 時限タイマー用 */
.hidden-timer {
    display: none;
}

/* メディアクエリ */
@media screen and (max-width: 480px) {
	#header, .main-visual, .news, .discography {
		width: 100%;
	}
    .header-blank {
        height:10vh;
        width:100%;
    }
	h2 {
		font-size: 2rem;
        padding: 12% 0 7%;
	}
	#header {
		height:10%;
	}
    /* コンテナ幅調整 */
    .container {
        width: 100%;
        box-sizing: border-box;
    }
	.logo {
		width: 30%;
		padding: 3% 0 3% 3%;
	}
	.logo img {
		width: 100%;
	}
	.main-nav {
		display: none;
	}
	.mb-nav {
		display:block;
		position:absolute;
		top: 0;
	}
	.mb-nav, .mb-nav ul, .mb-nav ul li {
		width: 100%;
	}
	
.menu-bg{
	position:absolute;
	top:0;
	right:0;
	background:#3dbbce; /* #3dbbce;afeeee */
	width:50px;
	height:50px;
	border-radius:50%;
    margin: 2% 2% 0 0;
}
.menu-btn, .menu-btn span{
	display:inline-block;
	transition: all .4s;
}
.menu-btn span {
	display: block;
}
.menu-btn{
	position: absolute;
	top:12px;
	right:9px;
	width: 32px;
	height: 26px;
	z-index:13;
	cursor:pointer;
}
.menu-btn span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: #fff;
	border-radius: 1px;
}
/* 3本線 */
.menu-btn span:nth-of-type(1) {	top: 0; }
.menu-btn span:nth-of-type(2) {	top: 11px; }
.menu-btn span:nth-of-type(3) {	bottom: 0; }

/* menu on */
.menu-btn.menu-toggle span:nth-of-type(1) {
	width: 80%;
	left: 0%;
	transform: translateY(11px) translateX(4px) rotate(-45deg);
}
.menu-btn.menu-toggle span:nth-of-type(2) {
	opacity: 0;
}
.menu-btn.menu-toggle span:nth-of-type(3) {
	width: 80%;
	left: 0%;
	transform: translateY(-12px) translateX(4px) rotate(45deg);
}
.mb-nav ul {
	width: 100%;
}
.mb-nav ul li {
	width: 100%;
	padding: 0;
	text-align: center;
	font-size: 1.2rem;
}

#header ul { display:none; }
#header .mb-nav ul a{
	display:block;
	background:#fff;
	border-bottom: 1px solid #ccc;
	text-decoration: none;
	padding: 10px 0;
	text-align: center;
	color: #000;
}
#header .mb-nav ul .active a { background-color:#9DD6DF; color: #fff; font-weight: bold; }

/* メインビジュアル */
.main-visual {
    /*margin-top: 10%;  ヘッダーの高さ分の余白 */
    width:100%;
    height: 60%;
}
.main-visual .container {
    /* margin-top: 10%; ヘッダーの高さ分の余白 */
    width:100%;
    height: 60%;
}
.main-visual img {
    width: 100%;
}
.mb-hidden {
    display: none;
}

    /* NEWSエリアの余白調整 */
    .news-list {
        padding: 0 20px;
    }

    .news-list .genre {
        min-width: 20%;
        padding: 1% 5%;
        font-size: 0.9rem;
    }

    .news-list .date, .news-list .date span {
        font-size: 1rem;
    }

    .news-text {
        font-size: 1rem;
        padding: 2% 0 0 2%;
    }

    /* DISCOGRAPHY 2列に変更 */
    .discography .container {
        width:98%;
        padding:0 2%;
    }
	.filter-buttons button {
		font-size: 0.7em;
	}
	.discography-item p {
		font-size: 0.9em;
        padding: 1% 0 8%;
	}
    .discography-list {
        gap: 1%;
    }

    .discography-item {
        width: calc((100% - 2%) / 2); /* 2列用 padding2%×2+gap2% */
		border-bottom: none;
    }
    .discography-item img {
        width: 100%;
        height: auto;
    }

    /* フィルターボタン */
	.filter-buttons {
		display: flex;
		justify-content: center;
		gap: 2%;
		padding:0 0 2%;
	}
	
	.filter-buttons button {
		min-width:20%;
		padding: 1% 3%;
	}



/* discography-page ------------------------------------------------------------------------- */
.discography-page-contents {
    padding: 0 2%;
}
.discography-title {
    padding: 0 0 0 1%;
}
.discography-detail {
    flex-direction: column;
    gap: 20px; /* 縦の余白に変更 */
  }

  .discography-image-block {
    width: 98%;
  }

  .discography-image-block img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
  }
  .discography-description {
    padding:3%;
  }
  .discography-description p {
      padding:1% 1% 15% 2%;
  }
   .music-services a {
      flex: 1 1 calc(33.33% - 10px); /* 3列表示 */
    }
  
    .store-button a {
      width: 100%;
    }
    
/* discography-page ------------------------------------------------------------------------- */


/* profile ------------------------------------------------------------------------- */
.profile .container {
    width: 94%;
    padding: 0 3%;
}
.profile_image img {
    width:100%;
}

/* .profile .container {
    width:1000px;
    padding: 0 100px;
}
.profile .container p {
    padding: 0 10px;
}
.profile .container ul {
    padding: 0 0 25px 30px;
} */
/* profile ------------------------------------------------------------------------- */


}