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

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

/*************************
 設定
*************************/
/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{
  display: none;
}

/*フロント固定ページのシェアボタンを非表示*/
.home.page .sns-share{
  display: none;
}

/*フロント固定ページのフォローボタンを非表示*/
.home.page .sns-follow{
  display: none;
}

/*フロント固定ページの投稿日を非表示*/
.home.page .post-date{
  display: none;
}

/*フロント固定ページの更新日を非表示*/
.home.page .post-update{
  display: none;
}

/*フロント固定ページの投稿者名を非表示*/
.home.page .author-info{
  display: none;
}

/*コンテンツ幅*/
main {
	padding: 0!important;
}

#content-in.content-in.wrap {
	width: 100%;
}

body.single main {
	max-width: 1200px;
	margin: auto!important;
	padding: 0 20px!important;
}

body.blog main {
	max-width: 1200px;
	margin: auto!important;
	padding: 0 20px!important;
}

body.archive main {
	max-width: 1200px;
	margin: auto!important;
	padding: 0 20px!important;
}

.entry-content>*, .mce-content-body>*, .article p, .demo .entry-content p, .article dl, .article ul, .article ol, .article blockquote, .article pre, .article table, .article .toc, .body .article, .body .column-wrap, .body .new-entry-cards, .body .popular-entry-cards, .body .navi-entry-cards, .body .box-menus, .body .ranking-item, .body .rss-entry-cards, .body .widget, .body .author-box, .body .blogcard-wrap, .body .login-user-only, .body .information-box, .body .question-box, .body .alert-box, .body .information, .body .question, .body .alert, .body .memo-box, .body .comment-box, .body .common-icon-box, .body .blank-box, .body .button-block, .body .micro-bottom, .body .caption-box, .body .tab-caption-box, .body .label-box, .body .toggle-wrap, .body .wp-block-image, .body .booklink-box, .body .kaerebalink-box, .body .tomarebalink-box, .body .product-item-box, .body .speech-wrap, .body .wp-block-categories, .body .wp-block-archives, .body .wp-block-archives-dropdown, .body .wp-block-calendar, .body .ad-area, .body .wp-block-gallery, .body .wp-block-audio, .body .wp-block-cover, .body .wp-block-file, .body .wp-block-media-text, .body .wp-block-video, .body .wp-block-buttons, .body .wp-block-columns, .body .wp-block-separator, .body .components-placeholder, .body .wp-block-search, .body .wp-block-social-links, .body .timeline-box, .body .blogcard-type, .body .btn-wrap, .body .btn-wrap a, .body .block-box, .body .wp-block-embed, .body .wp-block-group, .body .wp-block-table, .body .scrollable-table, .body .wp-block-separator, .body .wp-block, .body .video-container, .comment-area, .related-entries, .pager-post-navi, .comment-respond {
    margin-bottom: 0;
}

.content {
    margin-top: 30px;
}

.content-cover {
	max-width: 1200px;
	margin: auto;
	padding: 0 20px;
}


article h3 {
	border-left: 7px solid #aaa!important;
	border-right: 7px solid #aaa!important;
	border-top: 1px solid #aaa!important;
	border-bottom: 1px solid #aaa!important;
	margin-bottom: 20px;
	text-align: center;
	font-size: 28px!important;
	font-family: sans-serif;
	text-shadow: 
    2px 2px 0 black, 
   -2px 2px 0 black, 
    2px -2px 0 black, 
   -2px -2px 0 black;
	color: #fff;
}

.sp_br {
	display: none;
}

a {
	text-decoration: none;
}


/*外部リンクアイコン*/
a[target="_blank"]:after {
	font-family: 'Font Awesome 5 Free';
	content: '\f35d';
	font-size: 0.9em;
	margin: 0px 3px;
	font-weight: 900;
}

/*リンク*/
a.link-btn {
	background: #336699;
	text-align: center;
	padding: 15px 20px;
	border-radius: 30px;
	color: #fff;
}

a.link-btn:hover {
	background: #336677;
	color: #fff;
}

.link-area {
	padding: 20px 0;
}

@media screen and (max-width: 768px){
	article h3 {
		font-size: 26px!important;
		margin-bottom: 20px!important;
	}
	
	.sp_br {
		display: block;
	}
	
	a.link-btn {
		font-size: 90%;
	}
}

/*************************
 ヘッダー
*************************/

#header-container {
    box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1);
	padding: 20px;
	position: relative;
	z-index: 10;
}

.header-container-in {
	max-width: 1200px;
	width: 100%;
}

/*************************
 お知らせ
*************************/

span.post-update {
	display: none;
}

article.post .footer-meta {
	display: none;
}

/*************************
 ＨＯＭＥ
*************************/

/*トップイメージ*/
.top-img_area {
	width: 100%;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-bottom: 30px;
}

.top-toma-img_area {
	max-width: 400px;
	width: 100%;
	margin: auto;
	padding-bottom: 20px;
}

img.top-toma-img {
	width: 100%;
	aspect-ratio: 5/4;
	object-fit: cover;
}

.top-name-plate_area {
	max-width: 400px;
	width: 100%;
	margin: auto;
}

img.top-name-plate {
	width: 100%;
}

.gray-line {
	height: 30px;
	background: #aaa;
	margin-bottom: 0;
}

/*お知らせ一覧*/

#info-area {
	padding-top: 30px;
	padding-bottom: 30px;
}


#info-area ul#info-list {
	list-style: none;
	padding: 0;
}

#info-area ul#info-list li {
	border-bottom: 1px solid #ccc;
	padding: 10px 0;
}

span.info-date {
	padding-right: 30px;
}

/*公演情報*/
#pm-info {
	margin-top: 40px;
}

.pm-info_top-img {
	max-width: 300px;
	width: 100%;
	margin: auto;
}

.pm-info_top-img img {
	width: 100%;
}

.pm-info-cm {
	padding-top: 30px;
}

#pm-info h4 {
	font-family: serif;
	font-size: 30px;
	border: none;
	text-align: center;
	margin-bottom: 0;
	padding-bottom: 20px;
}

.pm-info-cm .pm-date {
	font-size: 23px;
	text-align: center;
}

@media screen and (max-width: 768px){
	
	.top-toma-img_area {
		max-width: 300px;
	}

	.top-name-plate_area {
		max-width: 300px;
	}
    .gray-line {
	    height: 20px;
    }
	
	/*お知らせ一覧*/
    #info-area {
	    padding-top: 20px;
	    padding-bottom: 20px;
    }
	
    /*公演情報*/
    #pm-info {
	    margin-top: 20px;
    }
	
    .pm-info-cm {
	    padding-top: 20px;
    }

    #pm-info h4 {
	    font-size: 26px;
    }

    .pm-info-cm .pm-date {
	    font-size: 20px;
	    text-align: center;
    }
}

/***一旦フッター隠***/

.mobile-footer-menu-buttons.mobile-menu-buttons {
	display: none;
}


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

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

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