@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
#main{
	width:70%;
}
.header-container, .main, .sidebar, .footer{
 background-color:rgba(0,0,0,0);
}
.navi {
 background-color: rgba(0,0,0,0);
}

/*ページの背景*/
/* ページごとの背景を強制的に上書きする */
body.page-id-18 {
    background-image: url(https://ayakokasai.main.jp/wp-content/uploads/2025/04/7b66f79a538ecd3f8ccc7cb98e6d5804-scaled.jpg) !important;
}
body.single  {
    background-image: url(https://ayakokasai.main.jp/wp-content/uploads/2025/04/7b66f79a538ecd3f8ccc7cb98e6d5804-scaled.jpg) !important;
}
body.page-id-16,
body.page-id-21,
body.page-id-155,
body.page-id-157,
body.page-id-424,
body.page-id-444,
body.page-id-427,
body.archive {
    background-image: url(https://ayakokasai.main.jp/wp-content/uploads/2025/04/5c2636f5b9908698578b3107dc3beef9-scaled.jpg) !important;
}


/*本文背景*/
.entry-content {
 background-color:#0002;
}
#list{
 background-color:#0002;
}

/*固定ページの投稿日を非表示*/
.post-12 .date-tags,
.post-16 .date-tags,
.post-18 .date-tags,
.post-21 .date-tags {
display: none;
}


/*グローバルナビのhover*/
.navi-in a:hover{
	background-color:rgba(0,0,0,0);
	border-bottom:2px solid #d2b071
}

.navi-footer-in a:hover{
	background-color:rgba(0,0,0,0);
	border-bottom:2px solid #d2b071
}

/*トップページ最新投稿*/
.wp-block-latest-posts__post-title{
	text-decoration:none;
}

.news_h2{
	margin-top:200px;
}

/*h1*/
/* フロントだけh1を白にする */
/* フロント画面だけ h1 を白文字 */
body:not(.wp-admin) h1 {
  position: relative;
  color: #ffffff;
  text-align: center;
}

/* エディターや管理画面ではデフォルト色（黒）になる */

h1::before {
content:url(https://ayakokasai.main.jp/wp-content/uploads/2025/03/e14a5f3bdb23e2b542e98260fdf9c949.png);
	position:absolute;
top:-45px; /*見出しから上40pxの位置に配置*/
left:0;
right:0;
transform: scale(0.5); /*高解像度ディスプレイ対応のサイズで作成した画像を半分の大きさで表示*/
	
}

/*h1下の英語表記*/
.post-16 h1::after {
content:'profile'; /*表示する画像のURL*/
position:absolute;
bottom:-30px; /*見出しから下40pxの位置に配置*/
left:0;
right:0;
transform: scale(0.5); /*高解像度ディスプレイ対応のサイズで作成した画像を半分の大きさで表示*/
}

.post-18 h1::after {
content:'photo gallery'; /*表示する画像のURL*/
position:absolute;
bottom:-30px; /*見出しから下40pxの位置に配置*/
left:0;
right:0;
transform: scale(0.5); /*高解像度ディスプレイ対応のサイズで作成した画像を半分の大きさで表示*/
}

.post-21 h1::after {
content:'contact'; /*表示する画像のURL*/
position:absolute;
bottom:-30px; /*見出しから下40pxの位置に配置*/
left:0;
right:0;
transform: scale(0.5); /*高解像度ディスプレイ対応のサイズで作成した画像を半分の大きさで表示*/
}

.archive-title:after{
	content:'concert'; /*表示する画像のURL*/
position:absolute;
bottom:-30px; /*見出しから下40pxの位置に配置*/
left:0;
right:0;
transform: scale(0.5); /*高解像度ディスプレイ対応のサイズで作成した画像を半分の大きさで表示*/
}

/*h2*/
main h2.wp-block-heading {
    color: #6d5353;/*文字色*/
    font-size: 18px;/*文字サイズ*/
    padding: 8px 40px;/*文字回りの余白（上下 左右）*/
    display: block;
    position: relative;
	background-color: var(--cocoon-xx-thin-color);
    border-radius: var(--cocoon-badge-border-radius);
}
main h2.wp-block-heading:before {
    content: "❖";
    font-weight: 900;/*マーク部の太さ*/
    position: absolute;
    font-size: 30px;/*マーク部のサイズ*/
    left: 0;
    top: 0;
    color: #cbb276;/*マーク部の色*/
}

/*本文を少し下げる*/
.archive-title{
	margin:100px 0px 100px 0px;
}

.entry-title{
	margin:100px 0px 100px 0px;
}

.entry-card h2{
	margin:10px 0px 10px 0px;
	font-size:20px;
}

.list {
	margin:100px 0px 100px 0px;
}

.bogo-language-switcher a{
	text-decoration:none;
	color:white;
	opacity:0.7;
}

/*パンくずリスト*/
.breadcrumb-home{
	color: white;
}

.breadcrumb-item{
	color: white;
}

.breadcrumb-caption{
	color: white;
}

/*コンサートページのアイコン非表示*/
.fa-folder-open{
	display:none;
}


/*投稿ページ内下部のカテゴリー表記*/
.cat-link{
	color:#5e4e4f;
}

.container table tr {
background-color: transparent;
}
.button{
	color:#e2acb9;
}

.tbl1 a:hover{
	opacity:0.5;
}

th{
	color:#5e4e4f;
}
/* アイキャッチとテーブルの間隔を縮める */
.entry-card {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px; /* アイキャッチとテーブル間の余白を調整 */
}

.entry-thumb {
  flex: 1 1 30%; /* アイキャッチの幅を調整 */
  margin-right: 15px; /* アイキャッチとテーブル間に隙間を設定 */
}

.entry-content {
  flex: 1 1 65%; /* テーブルの幅を調整 */
}

/* リンクのデザイン */
.entry-content a {
  color: white; /* 白文字 */
  text-decoration: none; /* 下線なし */
}

.entry-content a:hover {
  opacity: 0.7; /* hover時に半透明 */
  color: white; /* hover時も白文字 */
}

/* アイキャッチがない場合のNo imageを非表示 */
.entry-thumb img {
  margin-top:1em;
  display: block; /* アイキャッチがある場合に表示 */
  width: 70%;
}

a .entry-title{
	margin:16px;
}

/* テーブルのスタイル */
.tbl1 {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0; /* 上部の余白を削除 */
}

.tbl1 th, .tbl1 td {
  border: 1px solid #ccc;
  padding: 6px 10px;
}

.tbl1 th {
  background: #f5f5f5;
  width: 25%;
  text-align: left;
}

/* 開催情報ボタン */
.wp-block-button__link {
	width:auto;
}

/* その他、全体的なデザイン調整 */
.entry-meta {
  font-size: 14px;
  color: #555;
}
#wpforms-form-236{
	padding:10px;
}
/* ページネーション */
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 50px; 
  height: 36px;
  margin: 0 5px;
  padding: 0 12px; 
  background: #eee;
  color: #444;
  text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap; 
  transition: all 0.3s ease;
}

}

.page-numbers.current {
  background: #d2b071;
  color: #fff;
}

.page-numbers:hover {
  background: #d2b071;
  color: #fff;
  opacity: 0.5;
}

/* 絞り込みボタン */
/* 共通デザイン */
.filter-buttons .button {
  padding: 10px 20px;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  font-weight: bold;
  margin: 8px 0px 8px 0px;
}

/* 「すべて」ボタン（背景あり・角丸） */
.btn-all {
  background-color: #d2b071; /* ゴールド */
  color: white;
  border: none;
  border-radius: 40px; /* 丸み */
}

/* 「未来公演」「過去公演」（背景あり・四角） */
.btn-future,
.btn-past {
  background-color: #d2b071; /* ゴールド */
  color: white;
  border: none;
  border-radius: 0; /* 四角くする */
}

/* 「日本公演」「海外公演」（背景なし・ボーダーのみ・丸みあり） */
.btn-japan,
.btn-overseas {
  background-color: white;
  border: 2px solid #5e4e4f; /* ゴールドボーダー */
  color: #5e4e4f;
  border-radius: 40px; /* 丸み */
}

/* ホバー時共通（オプションで少し変化付けたい場合） */
/* ボタンhover時の文字色を変えないようにする（全体まとめ） */

/* 通常の.wp-block-buttonのhover */
.wp-block-button a:hover {
    opacity: 0.5;
    color: inherit; /* 元の文字色をそのまま使う */
}

/* 絞り込みボタン専用：hover時はopacityだけ変更 */
.btn-all:hover,
.btn-future:hover,
.btn-past:hover,
.btn-japan:hover,
.btn-overseas:hover {
    opacity: 0.8;
    color: inherit; /* 元の文字色のまま */
}

/* 特別に「日本公演・海外公演」はhover時背景色がつくので、これだけ別対応 */
.btn-japan:hover,
.btn-overseas:hover {
    background-color: #d2b071;
    color: white;
    transition: 0.3s;
}



/*960px以下*/
@media screen and (max-width: 960px) {
	}
/*430px以下*/
@media screen and (max-width: 430px) {
#main{
		padding-top:100px;
	}
 .entry-thumb img {
    width: 100%;
  }
}


/*375px以下SE*/
@media screen and (max-width: 375px) {
	h1::before{
		    width: 290px;
	}
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	#main{
	width:100%;
}
	body.custom-background {
	background-image: url(https://ayakokasai.main.jp/wp-content/uploads/2025/04/ddab0be3eeb8e5897a8fb21d82854bab-scaled.jpg)!important;
		}
	
	body.single  {
    background-image: url(https://ayakokasai.main.jp/wp-content/uploads/2025/04/7b66f79a538ecd3f8ccc7cb98e6d5804-scaled.jpg)!important;
}

	body.page-id-18 {
    background-image: url(https://ayakokasai.main.jp/wp-content/uploads/2025/04/9c3b727ca143d69d6c8686cb4f10c11b-scaled.jpg)!important;
}
	
body.page-id-16,
body.page-id-21,
body.page-id-155,
body.page-id-157,
body.page-id-424,
body.page-id-444,
body.page-id-427,
body.archive {
	background-image: 
url(https://ayakokasai.main.jp/wp-content/uploads/2025/04/9c3b727ca143d69d6c8686cb4f10c11b-scaled.jpg)!important;
	}
	

	
	body.page-id-18 {
    background-image: url(https://ayakokasai.main.jp/wp-content/uploads/2025/04/7b66f79a538ecd3f8ccc7cb98e6d5804-scaled.jpg)!important;
}
	#main{
		padding-top:250px;
	}
	
	.entry-content {
 background-color:#0006;
}
#list{
 background-color:#0006;
}

	body.custom-background {
　background-size: contain;
	}
	h1{
	text-shadow: 1px 2px 4px #000;
}
	.post-16 h1::after {
		bottom:-25px;
	}
	.post-18 h1::after {
		bottom:-25px;
	}
	.post-21 h1::after {
		bottom:-25px;
	}
	

}

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

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