@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;
}

/*コンテンツ幅*/
@media screen and (min-width: 835px) {
    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;
}

/*パンくず*/
body.page #breadcrumb {
	width: 100%;
	max-width: 1200px;
	margin: auto;
	padding: 0 20px;
}

.breadcrumb-item > span.fa {
	display: none;
}

.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, -1px -2px 0 black, 0 -2px 0 black, 1px -2px 0 black, 2px -2px 0 black, -2px -1px 0 black, -1px -1px 0 black, 0 -1px 0 black, 1px -1px 0 black, 2px -1px 0 black, -2px 0px 0 black, -1px 0px 0 black, 1px 0px 0 black, 2px 0px 0 black, -2px 1px 0 black, -1px 1px 0 black, 0 1px 0 black, 1px 1px 0 black, 2px 1px 0 black, -2px 2px 0 black, -1px 2px 0 black, 0 2px 0 black, 1px 2px 0 black, 2px 2px 0 black;
	color: #fff;
}

h1.page-title {
	font-family: sans-serif;
	font-weight: bold;
	font-size: 48px;
	color: #aaa;
	text-align: center;
	margin: 45px 0;
	padding: 0 20px;
	line-height: 0.4;
}

h1.page-title span {
	font-size: 14px;
}

.sp_br {
	display: none;
}

.d_none {
	display: none!important;
}

a {
	text-decoration: none;
}

/*固定ページタイトル削除*/
body.page .article-header.entry-header {
	display: none;
}

/*固定ページ著者名削除*/
body.page .article-footer.entry-footer {
	display: 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;
}

.sp_only {
	display: none;
}

@media screen and (min-width: 769px) and (max-width: 834px) {
	main.main {
		padding-bottom: 0!important;
		padding-right: 0!important;
		padding-left: 0!important;
		padding-top: 100px!important;
	}
}

@media screen and (max-width: 768px){
	main.main {
		padding-bottom: 0!important;
		padding-right: 0!important;
		padding-left: 0!important;
		padding-top: 85px!important;
	}
	
	article h3 {
		font-size: 26px!important;
		margin-bottom: 20px!important;
	}
	
	h1.page-title {
	    font-size: 32px;
    }
	
	.sp_br {
		display: block;
	}
	
	.sp_only {
		display: block;
	}
	
	.pc_only {
		display: none;
	}
	
	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: 999;
}

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

@media screen and (max-width: 834px) {
	#header-container {
		position: fixed;
		width: 100%;
		top: 0;
	}
	
	#header-container #header a {
		padding: 0;
	}
}

/*メニューボタン*/
#header-container #navi-in a .caption-wrap > .item-label,
#sp_header-menu_container a .caption-wrap > .item-label {
	font-family: sans-serif;
	font-weight: bold;
}

#sp_header-menu_container a {
	color: #000;
}

#sp_header-menu_container a:hover {
	color: #000;
}

#header-container #navi-in a:hover {
	background: none;
}

#header-container #navi-in a:hover .caption-wrap > .item-label,
#sp_header-menu_container a:hover .caption-wrap > .item-label {
	animation: HeaderHover 2.0s infinite;
	transform: scale(1.0);
	color: #fff;
	filter: drop-shadow(0 0 2px black)
}

#header-container {
	overflow: hidden;
}

@keyframes HeaderHover {
	0% {
		transform: scale(1.0);
	}
	25% {
		transform: scale(1.5);
	}
	50% {
		transform: scale(1.0);
	}
	70% {
		transform: scale(1.5);
	}
	100% {
		transform: scale(1.0);
	}
}

/*spメニューコンテナ*/
#sp_header-menu_container {
	width: 100%;
	background: #fff;
}

@media screen and (min-width: 835px) {
	#sp_header-menu_container {
	    display: none!important;
	}
}

.sp_header-menu_area {
	width: 100%;
	height: 100%;
	max-width: 360px;
	margin: auto;
	display: flex;
	overflow-y: scroll;
}

#sp_header-menu_container ul {
	padding: 0;
	list-style: none;
	width: 100%;
	margin: auto;
}

#sp_header-menu_container ul li {
	font-size: 28px;
	text-align: center;
	width: 100%;
	padding: 20px;
}

#header-container #navi #navi-in .sp-menu_btn_area {
	display: none;
}

@media screen and (min-width: 1001px) and (max-width: 1200px) {
	#header-container .navi-in > ul li {
		width: 120px;
	}
}

@media screen and (min-width: 835px) and (max-width: 1000px) {
	#header-container .navi-in > ul li {
		width: 100px;
	}
}

@media screen and (min-width: 835px) and (max-width: 1023px) {
	#header-container .navi-in .menu-pc {
		display: flex!important;
	}
	.header-container-in.hlt-top-menu {
        flex-direction: initial;
    }
}

@media screen and (max-width: 834px) {
	#header-container .navi-in .menu-pc {
		display: none!important;
	}
	.header-container-in.hlt-top-menu {
        flex-direction: initial;
    }
	
	#header-container #navi #navi-in {
		display: flex;
		justify-content: right;
	}
	
	#header-container #navi #navi-in .sp-menu_btn_area {
		width: 40px;
		height: 60px;
		display: flex;
	}
	
	#header-container #navi #navi-in .sp-menu_btn_area .sp-menu_btn {
		width: 100%;
		height: 30px;
		display: flex;
		margin: auto;
		cursor: pointer;
		position: relative;
	} 
	
	#header-container #navi #navi-in .sp-menu_btn_area .sp-menu_btn .sp-menu_btn_line {
		width: 100%;
		height: 2px;
		background: #aaa;
		display: flex;
		margin: auto;
	}
	
	#header-container #navi #navi-in .sp-menu_btn_area .sp-menu_btn .sp-menu_btn_line::before {
		content: '';
		width: 100%;
		height: 2px;
		background: #aaa;
		top: 0;
		position: absolute;
	}
	
	#header-container #navi #navi-in .sp-menu_btn_area .sp-menu_btn .sp-menu_btn_line::after {
		content: '';
		width: 100%;
		height: 2px;
		background: #aaa;
		bottom: 0;
		position: absolute;
	}
	
	#header-container #navi #navi-in .sp-menu_btn_area .sp-menu_btn.close .sp-menu_btn_line {
		height: 0;
	}
	
	#header-container #navi #navi-in .sp-menu_btn_area .sp-menu_btn.close .sp-menu_btn_line::before {
		content: '';
		width: 100%;
		height: 2px;
		background: #aaa;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		transform: rotate(45deg);
		position: absolute;
	}
	
	#header-container #navi #navi-in .sp-menu_btn_area .sp-menu_btn.close .sp-menu_btn_line::after {
		content: '';
		width: 100%;
		height: 2px;
		background: #aaa;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		transform: rotate(-45deg);
		position: absolute;
	}
	
	
	#sp_header-menu_container {
		display: none;
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
		overflow: hidden;
	}
	
	#header-container.close {
		box-shadow: initial;
	}
}

@media screen and (max-width: 768px) {
	#sp_header-menu_container ul li {
	    font-size: 20px;
	    padding: 20px;
    }
	
	/*ヘッダーロゴのサイズ*/
	#header-container .header-site-logo-image {
		width: 112.5px;
		height: 45px;
	}
	
	#header-container #navi #navi-in .sp-menu_btn_area {
		height: 45px;
		width: 35px;
	}
	
	#header-container #navi #navi-in .sp-menu_btn_area .sp-menu_btn {
		height: 25px;
	}
}

@media screen and (max-width: 480px) {
	#sp_header-menu_container ul li {
	    font-size: 20px;
	    padding: 20px;
    }
}
/*************************
 お知らせ
*************************/

span.post-update {
	display: none;
}

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

article.post figure.eye-catch {
	max-width: 250px;
}

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

/*トップイメージ*/
.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;
}

#sns-area {
	margin-top: 160px;
	width: 100%;
}

.sns-btn {
	width: 100%;
	max-width: 40px;
	margin: auto;
}

.sns-btn img {
	width: 100%;
}

.sns-btn a[target="_blank"]:after {
	display: none;
}

@media screen and (max-width: 768px) {
	#sns-area {
		margin-top: 80px;
	}
}

.sns-btn a {
	transition: .5s ease;
}

.sns-btn a:hover {
	opacity: .3;
	transition: .5s ease;
}

/*お知らせ一覧*/

#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;
}

body.blog #content .content-cover {
	margin-top: 75px;
	margin-bottom: 60px;
}

@media screen and (max-width: 768px) {
	body.blog #content .content-cover {
	    margin-top: 130px;
	    margin-bottom: 30px;
    }
	body.single #content {
		margin-top: 120px
	}
}

/*公演情報*/
#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: "RocknRoll One", sans-serif;
    font-optical-sizing: auto;
	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;
}

/*特設ページ用ヘッダー出し入れボタン*/
#header-store-btn {
    background: #fff;
    position: fixed;
    border-radius: 0 0 10px 10px;
    top: 0;
    left: 20px;
    width: 30px;
    height: 30px;
	z-index: 10;
	cursor: pointer;
}

#header-store-btn::before {
	font-family: 'Font Awesome 5 Free';
    content: "\f103";
    font-size: 0.9em;
    font-weight: 900;
    color: #888;
    left: 0;
    right: 0;
    position: absolute;
    margin: auto;
    width: fit-content;
}

#header-store-btn.header-store-close {
	top: 100px;
	animation: HeaderStoreClose 0.3s ease-in-out;
}

#header-store-btn.header-store-close::before {
	content: "\f102";
}

@keyframes HeaderStoreClose {
	0% {
		top: 0;
	}
	100% {
		top: 100px;
	}
}

@keyframes HeaderStoreCloseSP {
	0% {
		top: 0;
	}
	100% {
		top: 85px;
	}
}

#header-store-btn.header-store-open {
	top: 0px;
	animation: HeaderStoreOpen 0.3s ease-in-out;
}

#header-store-btn.header-store-open::before {
	content: "\f103";
}

@keyframes HeaderStoreOpen {
	0% {
		top: 100px;
	}
	100% {
		top: 0px;
	}
}

@keyframes HeaderStoreOpenSP {
	0% {
		top: 85px;
	}
	100% {
		top: 0px;
	}
}

/*ヘッダー収納時余白エリア*/
.header-margin-area {
	height: 100px;
	width: 100%;
	display: none;
}

@media screen and (max-width: 768px) {
	.header-margin-area {
	    height: 85px;
	}
	
	#header-store-btn.header-store-open {
	   animation: HeaderStoreOpenSP 0.3s ease-in-out;
    }
	
	#header-store-btn.header-store-close {
	    top: 85px;
	    animation: HeaderStoreCloseSP 0.3s ease-in-out;
    }
}

/*************************
 PROFILE
*************************/
.profile-content {
	padding-top: 30px;
	width: 100%;
}

.toma-img {
	width:100%;
	max-width: 400px;
	margin: auto;
}

.toma-img img {
	width: 100%;
	border: 2px solid #aaa;
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.toma-name-img {
	width: 100%;
	max-width: 400px;
	margin: auto;
	padding-top: 30px;
	padding-bottom: 30px;
}

.toma-nama-img {
	width: 100%;
}

.toma-name-img p {
	font-size: 14px;
	text-align: right;
}

.toma-profile-comment {
	width: 100%;
	max-width: 750px;
	margin: auto;
	padding-top: 30px;
}

.toma-profile-area {
	width: 100%;
	max-width: 750px;
	margin: auto;
	padding-top: 120px;
	padding-bottom: 60px;
}

.toma-profile-area table {
	background: none;
	border: 2px solid #aaa;
}

.toma-profile-area table tr,
.toma-profile-area table th, 
.toma-profile-area table td {
	border: 2px solid #aaa;
	background: none;
	padding: 10px;
}

.toma-profile-area table th {
	background: #ccc;
}

.toma-profile-area table ul {
	padding: 0 20px;
}

.toma-profile-area table ul li {
	line-height: 1.3;
}

@media screen and (max-width: 480px) {
	.toma-profile-area {
		padding-top: 45px;
	}
	.toma-profile-area table,
	.toma-profile-area table tr,
    .toma-profile-area table th, 
    .toma-profile-area table td {
	    display: block;
		font-size: 16px;
		border: 1px solid #aaa!important;
		padding: initial;
    }
	.toma-profile-area table td {
		padding: 10px;
		text-align: center;
	}  
	.toma-profile-area table ul li {
		text-align: left;
	}
}

/*************************
 STAGE
*************************/
#latest-stage {
	padding-top: 60px;
	padding-bottom: 60px;
}

#past-stage {
	padding-top: 60px;
}

.stage-list ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.stage-list ul li {
	width: 32%;
}

.stage-list_container {
	width: 100%;
	padding: 20px;
	height: 100%;
	background: #336699;
	border-radius: 15px;
	transition: .3s ease;
}

.stage-list_img {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 15px;
	overflow: hidden;
}

.stage-list_img img {
	width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #fff;
	border-radius: 15px;
	transition: .3s ease;
}

.stage-list_title {
	font-size: 20px;
	text-align: center;
	padding-top:20px;
	color: #fff;
	font-weight: bold;
}

.stage-list_title p.stage-date {
	font-size: 70%;
	padding-bottom: 10px;
}

.stage-list ul li a:hover .stage-list_container {
	background: #336677;
	transition: .3s ease;
}

.stage-list ul li a:hover .stage-list_img img {
	transform: scale(1.1);
	transition: .3s ease;
}

@media screen and (max-width: 768px) {
	.stage-list_title {
	    font-size: 18px;
	}
	
	.stage-list ul li {
	    width: 47%;
    }
}

@media screen and (max-width: 560px) {
	.stage-list ul {
		justify-content: center;
	}
	
	.stage-list ul li {
	    width: 100%;
		max-width: 360px;
		margin-bottom: 20px;
    }
}


/*************************
 tomapedia
*************************/

.pedia_content {
	max-width: 1200px;
	margin: auto;
}

#pedia_logo {
	width: 100%;
	max-width: 180px;
	padding-bottom: 30px;
	margin: auto;
}

#pedia_logo img {
	width: 100%;
}

#pedia_title {
	font-size: 28px;
    font-family: serif;
    text-align: center;
    line-height: 1;
}

#pedia_title span {
	font-size: 70%;;
}

@media screen and (max-width: 1200px) {
	#pedia_title {
		font-size: 2vw;
	}
	#pedia_title span {
	    font-size: 70%;
    }
	#tomapedia_side-bar {
		left: 0;
	}
}

#tomapedia_side-bar {
	position: fixed;
	width: 20%;
	padding-left: 20px;
	padding-right: 20px;
	padding-top:60px;
	top: 0;
	left: 3vw;
}

#pedia_toc {
	overflow-y: scroll;
}

.pedia_toc_content {
	border: 1px solid #ccc;
	background: #eee;
}

#pedia_content {
	width: 80%;
	padding-left: 20px;
	padding-right: 20px;
	margin-left: auto;
}

#pedia_content * {
	font-family: sans serif;
}

#pedia_content h1 {
	font-size: 38px;
}




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

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

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