@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
	/*必要ならばここにコードを書く*/
	.menu-content{
		max-width: 100%;
		background: black !important;
    	opacity: 0.8 !important;
	}
	
	.menu-item a{
		color:white;
		border: none !important;
	}
	
	.navi-menu-content {
 		left: auto;
 		right: 0;
 		transform: translateX(105%);
	}
	
	.logo-menu-button{
		margin-right: 170px;
	}
	
	.gnavi-search-menu-content{
		display:none !important;
	}
	
	.skin-grayish .navi-menu-content .menu-close-button {
		text-align: right;
	}
	
	.menu-drawer{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	/* スマホでも記事説明を表示する */
	.no-sp-snippet .entry-card-snippet{
		display:block;
	}
	
	/* スマホでもサイドバーを表示する */
	#sidebar{
		display:block !important;
	}
	
	.content-in{
	display:block !important;
	flex-wrap:wrap !important;
	}
	
	.menu-footer a{
		color : #535252;
	}
}

/* 投稿ページにサイドバーを表示する */
/*
#sidebar{
		display:block !important;
	}

.content-in{
	display:flex !important;
	flex-wrap:nowrap !important;
}
*/

/* 文字間隔を調整する */
body {
	letter-spacing: 0.05em !important;
}

.article h1, .article h2, .article h3, .article h4, .article h5, .article h6{
	letter-spacing: 0.1em;
}

hr{
	border-width: 0 !important;
	height:1px !important;
	background: #d4d4d4 !important;
}

/* 投稿数正円囲み */
.post-count{
	display: inline-flex !important;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #9c9c9c;
    text-align: center;
    color: white;
    align-items: center;
    justify-content: center;
    padding: 1px 0px 0px 1px;
    font-weight: bold;
}

/* フェードインアニメーション */
/* 初期状態では透明にしておく */
.card, .latest-item, .album-item, .single-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* 'visible'クラスが追加されたときに表示する */
.visible {
    opacity: 1;
    transform: translateY(0);
}

/* .fadein {
	opacity: 0;
	transform: translateY(30px);
	transition-property: transform, opacity;
	transition-duration: 1.5s;
	transition-delay: 0s;
}

.fadein.is-active {
	opacity: 1;
	transform: translateY(0);
} */

/*動画一覧ページ*/
.youtube-videos {
/*     margin: 20px; */
}

.youtube-videos h2 {
	color: #000;
    font-size: 18px;
    padding: 30px 20px 2px 30px;
    display: block;
    position: relative;
    margin-bottom: 20px;
}

.youtube-videos h2:before,
.youtube-videos h2:after {
    content: "";
    display: block;
    position: absolute;
}

.youtube-videos h2:before {
    bottom: -5px;
    left: 1px;
    width: 5px;/*左下線の間の幅*/
    height: 20px;/*左下線の高さ*/
    border-left: 2px solid #000;/*左下左線（太さ 実線 色）*/
    border-right: 2px solid #000;/*左下右線（太さ 実線 色）*/
    transform: skewX(-15deg);/*左下線の傾き*/
}

.youtube-videos h2:after {
    left: 15px;
    bottom: 0;
    width: calc(100% - 8px);
    border-bottom: 1px solid #000;/*下線（太さ 実線 色）*/
}


.cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* カード間の間隔 */
}

.card {
    width: calc(26% - 20px); /* 4つのカードを横に並べるための幅 */
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 0; /* 角を丸くしない */
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
	opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.card.visible {
    opacity: 1;
    transform: translateY(0);
}

.card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.card-thumbnail {
    width: 100%;
    height: auto;
    display: block;
	object-fit: cover;
  	aspect-ratio: 16 / 8.8; /* ここにアスペクト比を入れる */
}

.card-content {
    padding: 15px;
}

.card-title {
    font-size: 16px;
    margin: 0 0 10px;
}

.card-date {
    font-size: 14px;
    color: #666;
}

.card a {
    text-decoration: none;
    color: inherit;
}

.uploader-buttons {
    margin-bottom: 20px;
}

.uploader-button {
    border-radius: 5px;
    background-color: black;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    margin-right: 10px;
    opacity: 0.3;  /* デフォルトでは半透明に */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.uploader-button.active {
    opacity: 1;  /* 選択されているときは不透明に */
    transform: scale(1.05);  /* 少し拡大して強調 */
}

.uploader-button:hover {
    opacity: 0.8;  /* ホバー時に少し不透明に */
}

.prev,.next{
	width: fit-content; /* 次へ前へボタンのサイズを調整 */
}

/* ↓YouTube動画埋め込みのとき */
/* .video-container {
    width: 100%;
    height: auto;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
} */
/* ↑YouTube動画埋め込みのとき */

@media (max-width: 768px) {
    .card {
        width: calc(50% - 20px); /* タブレットでは2つのカードを横に並べる */
    }
}

@media (max-width: 480px) {
    .card {
        width: calc(54% - 20px); /* スマホではカードを全幅に近づける */
    }
    .card-title {
        font-size: 12px;
    }
    .card-date {
        font-size: 10px;
    }
}

/* 楽曲一覧 */
.music-list-container{
	max-width: 1100px;
    margin: 0 auto;
    padding: 40px;
}

.service-icon{
	filter: invert(30%); 
	width: 5%;
}

.album-name{
	font-size: 13px;
}

.release-date{
	font-size: 10px;
    color: #686868;
    margin-top: -5px;
}

.profile-icon {
    border-radius: 50%;
    width: 250px;
    height: 250px;
    object-fit: cover;
    margin-bottom: -75px;
}

.album-img {
    transition: box-shadow 0.3s;
}

.album-img:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
/* カーソルを合わせた時にアルバム名とリリース日に下線を引く */
.album-info:hover p, .single-info:hover p, .latest-info:hover p {
    text-decoration: underline;
}

.single-info, .album-info{
	margin-top: 3px;
}

.social-icons{
	text-align: center; 
	margin-top: 10px; 
	margin-bottom: 40px;
}

.single-list, .album-list{
	display: flex; 
	justify-content: flex-start; 
	flex-wrap: wrap; 
	column-gap: 12px;
}

.single-item, .album-item{
	text-decoration: none; 
	color: inherit; 
	width: 24%; 
	margin-bottom: 20px;
}

.latest-img{
	flex: 1;
}

.latest-info{
	flex: 2; 
	text-align: left;
}

.latest-date{
	font-size:12px;
}

.latest-name{
	font-size:20px;
}

@media (max-width: 480px) {
	.music-list-container{
		max-width: 100%;
		margin: 0 auto;
		padding: 0px;
	}
	
	.single-item, .album-item {
		width: 48%; 
	}
	
	.album-name{
		font-size: 12px;
	}
	
	.release-date {
    	font-size: 10px;
   		margin-top: -2px;
	}
	
	.music-list-container h3{
		font-size: 16px;
	}
	
	.latest-info{
		flex: 1; 
		margin-left: 10px;
		margin-right: 20px;
	}
	
	.latest-date{
		font-size:10px;
	}

	.latest-name{
		font-size:15px;
	}
	
	.service-icon{
		width: 10%;
	}
}

/* 楽曲詳細 */
.full-lyrics p{
	margin-top:20px;
	margin-bottom:20px;
}