@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: 草津アートセンター専用の子テーマ
Author: ospp@hisa2bisa
Author URI: https://profiles.wordpress.org/hisa2bisa/
Template:   cocoon-master
Version:    0.8

Don't Touch This Page.
*/

/*** ■2025リニューアル関連 ***/
#header-container {background-color:white;}
table.n-menu {height:48px; margin:-53px 0 50px;}
table.n-menu td {color:black; text-align:center;}
table.n-menu, .n-menu th, .n-menu td {border-collapse: separate; border-spacing: 1px; border:1px white!important; padding:0.1em;}
table.n-menu input {padding:5px;} /* 検索窓調整 */
.site-name-text-link {padding:0}
@media screen and (max-width: 1024px){.n-menu {display: none; }} /* スマホ時はメニュー非表示 */
nav, .owl-nav {display:none;}
a:hover{opacity:0.6; transition-property: opacity; transition-duration: 0.6s;
	color:black!important; background-color:#dfdfdf!important;}
.n-menu a, .crea_ban li a, .amica_ban li a {display: block; width: 100%; height: 100%;} /* 要素全体にリンク反応 */

/*** ■各種マージンゼロ ***/
.content-bottom, .footer, .footer-bottom, .content.cf {
	margin: 0;
}

#custom_html-21, #custom_html-8 {margin-bottom:0;}

/*** ■メインのPadding:20px 10px変更 ***/
#main {padding:0px}

/*** ■見出し関連 ***/
h1.entry-title, .archive-title {
	margin: 8px 0;
	padding: 4px 16px;
	font-size: 26px;
    background: #33525e;
	color: white;
	border-radius: 0.2em;
}
.advgb-recent-posts-block.grid-view .advgb-recent-post div.advgb-post-wrapper:not(:first-child) {
	margin-top: 0px;
}
/*** ■固定ページの日付非表示 ***/
.page .date-tags {
display: none;
}
.post-date {font-size:100%}

/*** ■写真横の文字 ***/
.has-large-font-size{
	font-size: 50%;
}

/*** ■各ホールの基本色・ロゴ変更■ ***/
/*.logo-image {height: 64px; padding:0; margin-right: auto; margin-bottom:-30px;} /* 草津アートセンターlogo少しナビに食い込ます */
.logo-image {height: 48px; padding:0; opacity:0;} /* 草津アートセンターlogo少しナビに食い込ます */

/*** ホールロゴ表示設定 ***/
aside#media_image-2 {background:#618bbe; line-height:0;}
aside#media_image-3 {background:#c88690; line-height:0;}
aside#media_image-2 a img, aside#media_image-3 a img {height:60px;}

/*** 以下、h1～h5に対してのみ ***/
/*** クレアホール page-id-96 page-item-96 .parent-pageid-96 ***/
.page-id-96 h1{display:none;} /* ホールTOPにh1（ホール名）は表示しない */
.page-id-96 #main h2, .parent-pageid-96 #main h1, .parent-pageid-96 #main h2, .page-id-96 #main h3.widget-title, .parent-pageid-96 #main h3.widget-title, #post-827 h1, .category-announce-crea-post h1, .category-announce-crea-post h2, .category-blog-crea-post h1, .category-blog-crea-post h2 {
	background: #618bbe; background-size:contain; background-repeat: no-repeat; background-position: right;}
.parent-pageid-96 #main h3, .parent-pageid-96 #main h4, .parent-pageid-96 #main h5, .parent-pageid-96 #main h6 {
	border-color: #618bbe; color:#2f3f9f;}

/*** アミカホール　page-id-208 page-item-208 .parent-pageid-208 ***/
.page-id-208 h1 {display:none;} /* ホールTOPにh1（ホール名）は表示しない */
.page-id-208 #main h2, .parent-pageid-208 #main h1, .parent-pageid-208 #main h2, .page-id-208 #main h3.widget-title, .parent-pageid-208 #main h3.widget-title, #post-834 h1, .category-announce-amica-post h1, .category-announce-amica-post h2, .category-blog-amica-post h1, .category-blog-amica-post h2 {
	background: #c88690; background-size:contain; background-repeat: no-repeat; background-position: right;}
.parent-pageid-208 #main h3, .parent-pageid-208 #main h4, .parent-pageid-208 #main h5, .parent-pageid-208 #main h6 {border-color: #c88690; color:#af2f3f;}

/*** スタッフブログ ***/
.page-id-7621 h1{background-color:#5f9f9f;} /* h1背景変更 */

/*** ■メニュートップ背景など ***/
/*#menu-head_menu li {height:36px; line-height:36px;} /* メインナビ　高さ */
/* 草津アートセンター */
/*#menu-item-1018, #menu-item-1017 {margin-left:2px; background: #53727e;}
/* 草津クレアホール */
/*#menu-item-1015 {margin-left:2px; background: #618bbe;}
/* 草津アミカホール */
/*#menu-item-1016 {background: #c88690;}*/
/*div.top-has-sub.has-sub.has-icon {display: none;} /* スマホサブメニュー最適化 */

/*** ■ホールごとのサブメニュー　横並び・padding調整・カラー変更 ***/
ul#menu-creahall-submenu, ul#menu-amicahall-submenu {display:flex; flex-wrap:wrap; margin:0; padding:2px 0;}
ul#menu-creahall-submenu li, ul#menu-amicahall-submenu li {margin:2px; padding:0; background:#a7c7df; border-bottom: 3px solid #33525e; border-radius: 0 8px 0 0;}
.widget_nav_menu ul li a {padding:0;}
/* ul#menu-creahall-submenu::after, ul#menu-amicahall-submenu::after {content: "\A\A"; white-space: pre;} */

/*** ■検索窓　位置調整 ***/
/*.add-header-contents .search-box {right:16px; width:300px; margin:-36px 0 0 auto;}*/
@media screen and (max-width: 800px){.add-header-contents {display: none; }} /* タブレット・スマホの時は非表示 */

/*** ■アピールエリア調整 ***/
#appeal .appeal-in {
    padding: 1.5%;
}

#appeal .appeal-content {
	padding: 0.8em;
	line-height: 1.4em;
}

#appeal .appeal-message {
    margin-bottom: 0.5em;
}

/*** ■トップページのカルーセル by MEC ***/
#content-top {margin:0;}
#mec_skin_events_740 div.mec-event-carousel-content-type2 {margin-top:0;}
#mec_skin_events_740 span.mec-event-date-info {font-size: 125%; color: black;} /* 日付大きく黒く */
#mec_skin_events_740 h4 {margin:0; font-size: 20px;} /* 公演タイトル */
#mec_skin_events_740 p.mec-carousel-event-location {height:1em; line-height:1.2em; overflow: hidden; margin-bottom: -60px;} /* locationの住所非表示　狭めて隠してます */
#mec_skin_events_740 div.event-carousel-type2-head {padding:8px;} /* padding調整 */
#mec_skin_events_740 div.mec-event-carousel-content-type2 {min-height: 100%;}
#mec_skin_events_740 div.mec-event-footer-carousel-type2 ul {display: none;} /* シェアボタン削除 */

/*** ■トップページの分岐バナー ***/
#custom_html-8 div, #custom_html-11 div {
	display: flex;
	text-align: center;
}

#custom_html-8 div .crea_ban {
	width: 100%;
	background: #618bbe;
}
#custom_html-8 div .amica_ban {
	width: 100%;
	background: #c88690;
}
#custom_html-11 div .whatis_ban {
	width: 100%;
	background: #86b0b2;
}
#custom_html-11 div .ticket_ban {
	width: 100%;
	background: #8381ab;
}

#custom_html-8 div ul {
	list-style-type: none;
	padding: 0;
	margin: auto 0;
	text-align: left;
}
#custom_html-11 div a {width: 100%; display:flex;}
#custom_html-11 div a img, #custom_html-11 div a p {
	padding: 0;
	margin: auto;
}
#custom_html-8 div ul li a, #custom_html-11 div a {
	color: #ffffff;
}
@media screen and (max-width: 800px) { /* 狭くなると縦並び */
	#custom_html-8 div {display: block;}
	#custom_html-8 div ul li {line-height: 1.5em; text-align: center;}
	#custom_html-8 div div a img {width: 345px; height: 130px; object-fit: cover; object-position: 30px -22px;} /* ロゴのみにトリミングする */
#custom_html-11 div a {width: 100%; display: block;}
}

/*** ■リンクテキスト カスタマイズ ***/
a{ /*リンクテキスト装飾無し*/
  text-decoration: none;
}
h2 a{ /*リンクテキスト装飾無し*/
  color: #ffffff;
}
.article h2 {
	padding: 10px;
}

/*** ■リンクボタンのPadding狭く ***/
div.wp-block-buttons {
	text-align: center;
}
a.wp-block-button__link {
	padding: 0.25em;
	margin: 0 0.5em;
}

a:hover { /*リンクテキストホバー時アンダーライン表示*/
	color:#dfdfdf; background-color: #9f7fdf;
	/*  text-decoration: underline;　*/
}
.share-button{ /*シェアボタン装飾無し*/
  text-decoration: none!important;
}
.follow-button{ /*フォローボタン装飾無し*/
  text-decoration: none!important;
}
.cat-link{ /*カテゴリーラベル装飾無し*/
  text-decoration: none!important;
}
.tag-link{ /*タグラベル装飾無し*/
  text-decoration: none!important;
}

/*** ■M.E.Calendarの表示設定 ***/
section.mec-container {display:contents;} /* メイン内に収める */
.mec-single-event .mec-event-content {padding:0;}
article.mec-single-event div div.mec-event-meta {padding:0;}
article.mec-single-event div div.mec-event-meta div {padding:4px;}
.mec-event-meta h3 {padding-left:4px !important;}
.mec-event-grid-clean .mec-event-article {padding: 8px 4px;}
.mec-event-content {padding: 0 !important;}
/* ホールイベント一覧の住所と線消す　と　共有ボタンなど狭くする */
.mec-grid-event-location {display:none;}
.mec-event-grid-clean .mec-event-footer {border-top:none; padding:0; min-height:40px;}
.mec-event-footer .mec-booking-button {top:0;}


/*** ■サイドリンク装飾 ***/
.sidelink_ban a {
	display:block; margin:8px; padding:8px 0; border-radius:6px; 
	background: linear-gradient(#03222e,#53727e, #03222e); 
	color:#ffffff; font-weight:bold; text-align: center;
}

/*** ■インフォメーション＆トピックス ***/
ul.news_list {list-style:none; margin-left:-1em; line-height: 1.6em;}
ul.news_list .news_date {font-size: 80%; margin-right:0.5em;}
ul.news_list .cat {margin:0.5em 0.5em; padding:0.2em 0.5em; color:#ffffff; background:#33525e;} 
ul.news_list .announce-crea {background:#618bbe;}
ul.news_list .announce-amica {background:#c88690;}
ul.news_list .blog-crea {background:#517bae;}
ul.news_list .blog-amica {background:#b87680;}

/*** ■下部リンク横並び ***/
#content-bottom-in {
	color: #ffffff;
	background: #777777;
}
#content-bottom-in li {line-height: 1.2em;}
#content-bottom-in a {color:#ffffff;}
@media screen and (min-width: 800px) { /* 狭くなると縦並び */
	#content-bottom-in {display: flex;}
}
.widget-content-bottom.widget_links {
	padding: 0 1em 1em;
}
aside.widget_links ul {padding-left:30px;}

/*** ■フッタ３場所（left center right）の比率を変える ***/
.footer-left, .footer-right {width:20%} 
.footer-center {width:60%; line-height: 1.1em;}

/*** ■モバイルのヘッダ背景と文字色変更 ***/
ul.mobile-header-menu-buttons {background:#33525e;}
span.menu-caption, span.fa-bars, span.fa-search {color:#ffffff;}

/*** ■公演スケジュールの先月今月来月の矢印 ***/
/* 右向き */
.hb-next {
  display: flex;
  align-items: center;
	float: right; margin-top:-28px;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  color: #ffffff;
  font-size: 18px;
  border-radius: 3px;
  width: 120px;
  height: 28px;
  position: relative;
  background-color: #33525EFF;
}

.hb-next::before, .hb-next::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 15px;
  transform-origin: 100% 50%;
  height: 1px;
  width: 11px;
  background-color: #ffffff;
  border-radius: 2px;
  will-change: transform;
  transition: .3s;
}

.hb-next::before {
  transform: translateY(-50%) rotate(30deg);
}

.hb-next::after {
  transform: translateY(-50%) rotate(-30deg);
}

.hb-next:hover {
  background:#53727e;
}
/* 左向き */
.hb-prev {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  color: #ffffff;
  font-size: 18px;
  border-radius: 3px;
  width: 120px;
  height: 28px;
  position: relative;
  background-color: #33525EFF;
}

.hb-prev::before, .hb-prev::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 15px;
  transform-origin: 0% 50%;
  height: 1px;
  width: 11px;
  background-color: #ffffff;
  border-radius: 2px;
  will-change: transform;
  transition: .3s;
}

.hb-prev::before {
  transform: translateY(-50%) rotate(30deg);
}

.hb-prev::after {
  transform: translateY(-50%) rotate(-30deg);
}

.hb-prev:hover {
  background:#53727e;
}