@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){
  /*必要ならばここにコードを書く*/
}

/************************************
** これ以下、https://kasaoka44.com/files/base.css
************************************/
@charset "utf-8";
/* 説明文の文字を小さく */
/* 【候補欄】の中の「候補」 */
#候補欄 ul {
	background: linear-gradient(90deg,#fff 0%,#fff calc(100% - 3em),#ddf calc(100% - 3em),#ddf 100%);
	padding-left: 0 !important ;
	border: 1px solid;
	border-radius: 3px;
	list-style: none;
}
#候補欄 li {
	border-top: 1px solid;
	margin-right: 3em !important;
}
#候補欄 li:first-child {border: none;}
#候補欄 li:hover {background: lightgray;}
#候補欄 li span:first-child {
	display: inline-block;
	margin-left: 0.5em;
	width: 50%;
}
/* 【系統表】 */
#系統表 {
	font-size: 11.8px !important;
}
#系統表 tr {background: #fff;}
#系統表 td {
	background-size: 100% 100%;
	border: none;
}
#系統表 .hor {background-image: url("https://kasaoka44.com/files/img/hor.jpg");}
#系統表 .ver {background-image: url("https://kasaoka44.com/files/img/ver.jpg");}
#系統表 .first {background-image: url("https://kasaoka44.com/files/img/first.jpg");}
#系統表 .nth {background-image: url("https://kasaoka44.com/files/img/nth.jpg");}
#系統表 .last {background-image: url("https://kasaoka44.com/files/img/last.jpg");}
#系統表 td:not( :empty ) {
	display: inline-block;
	margin: 0.2em 0;
	padding: 0.3em;
	white-space: nowrap;
	font-weight: bold;
	border-radius: 3px;
	background: #99E5FF;
}
#系統表 td:nth-child(odd) {
	min-width:4.5em !important;
	max-width:max-content;
	-moz-text-align-last: justify;
	text-align-last: justify;
}
#系統表 td:nth-child(even) {
	width: 1.5em !important;
}
#系統表 td:nth-child( 11 ):not( :empty ) {
	font-weight: normal;
	background: #97F4FF;
}
#系統表 td:not( :empty ):hover {background: lightgray;}
#系統表 #詰所, #笠岡{
	background: #9ACEFF;
}
/* 【使い方】の中の「説明文」 */
.myframe .indent {
	text-indent: -1.5em;
	padding-left: 2em;
	line-height: 1.4;
}
.myframe .indent2 {
	text-indent: -1em;
	padding-left: 3.3em;
	line-height: 1.4;
	font-size: 0.9em;
	color: gray;
}
/* 役員名簿 */
div[id^="名簿"] {
	margin: 0 1em;
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
	-webkit-column-gap: 2em;
	-moz-column-gap: 2em;
	column-gap: 2em;
}
br + .見出し { margin-top : 2rem ; }
@media screen and (max-width:414px) {div[id^="名簿"] {width: 14em; column-count: 2;}}
@media screen and (min-width:415px) and ( max-width:575px) {div[id^="名簿"] {width: 21em; column-count: 3;}}
@media screen and (min-width:576px) {div[id^="名簿"] {width: 27em; column-count: 4;}}
div[id^="名簿"] span {
	display: inline-block;
	width: 100%;
}
div[id^="名簿"] span:not([class]){text-align-last: justify;}
.見出し{
	line-height: 0;
	border: 1px solid #eee;
	border-radius: 3px;
	padding: 0.6em 0.2em;
	-moz-text-align-last: justify;
	text-align-last: justify;
	background: #f5f6f7;
}
div[id^="名簿"] span:last-child {break-after: column;}
/* 「詳細欄」 */
#content:has( #詳細欄[ style *= 'display: block' ] ) ~ [ class *= 'menu-buttons' ] {z-index: -1;}
#詳細欄 {
	display: none;
	width: min(100vw, 652px);
	background: #888;
	padding: 0.2em 0.5em;
	color: white;
	border-radius: 3px;
	position: fixed;
	left: 0;
	top: 0;
}
/* 「詳細欄」の下の「説明」のエリア */
#詳細欄 .close {
	text-align: center;
	font-size: small;
}
/* 「詳細欄」の中の「電話」のリンク */
#詳細欄 a {
	text-decoration: none;
	color: lightblue;
}
/* 「詳細欄」の中の「地図」のボタン */
#詳細欄 .button {
	font-size: small;
	border-radius: 3px;
	padding: 0 8px;
	background: white;
	color: #888;
}
/* 【使い方】の中の「特記事項」 */
#詳細欄 .blink {
	-webkit-animation: blink 3s infinite alternate;
	animation: blink 3s infinite alternate;
}
@-webkit-keyframes blink {0% {color: gray;} 100% {color: white;}}
@keyframes blink {0% {color: gray;} 100% {color: white;}}