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

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


.open-sans-<uniquifier> {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

/* 見出しのデザイン設定 */
/* H2 */
.entry-content h2{
color: #fff; /* 文字色 */
font-size: 1.6em; /* 文字サイズ */
background-color: #007bbb; /* 背景色 */
padding-top:15px; /* 文字と上部の間隔 */
padding-left:10px;/* 文字と左線の間隔 */
padding-bottom:15px;/* 文字と下部の間隔 */
border-left: solid 10px #007bbb; /* 左側に実線・色*/
}

/* H3 */
.entry-content h3{
color: #202124; /* 文字色 */
font-size: 1.4em; /* 文字サイズ */
background-color: #ebebeb;/* 背景色 */
padding: 10px;
border-left: solid 10px #0095d9 /* 左側に実線・色*/
}


/* 記事最後の表の色をいじった */

table th {
    padding: 10px;
    font-weight: bold;
    border-bottom: 1.5px solid #39c;
    background: #ebebeb;
    font-size: 18px;
}

/* 記事画像を中央にする */

.entry-content figure.wp-block-image {
　　width: 100%;
　　text-align: center;
}



/*ブログカード 説明文(スニペット) 非表示 */
.blogcard-snippet {
display: none;
}

/*チップページアイキャッチ　カテゴリー 非表示 */

.cat-label {display:none}


/*ページナンバーを非表示 */

.page-numbers {
    display: none;
}


/*youtubeのサイズ変更*/
.video-container {
max-width: 100%;
margin: 0px auto;
}




.breadcrumb-home{
	color: #183153;
	font-size: 14px;
}

.breadcrumb-item{
	color: #183153;
	font-size: 14px;
}

.breadcrumb-caption{
	color: #183153;
	font-size: 14px;
	font-weight: bold;
}


/************************************
** アコーディオン　
************************************/
.details {
	border-top: 2px solid #00a5a0;
	border-left: 2px solid #00a5a0;
	border-right: 2px solid #00a5a0;
	&:last-of-type {
		border-bottom: 2px solid #00a5a0;
	}
}
.details-summary {
	position: relative;
	display: block;
	padding: 20px;
	color: #fff;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	background-color: #d8e698;
	&:hover {
		cursor: pointer;
		opacity: 0.8;
	}
	.btn {
		position: absolute;
		top: 37%;
		left: 10%;
		width: 18px;
		height: 18px;
		transform-origin: center center;
		transition-duration: 0.2s;

		&:before,
		&:after {
			content: "";
			background-color: #fff;
			border-radius: 10px;
			width: 18px;
			height: 4px;
			position: absolute;
			top: 7px;
			left: 0;
			transform-origin: center center;
		}
		&:before {
			width: 4px;
			height: 18px;
			top: 0;
			left: 7px;
		}
	}
	&.is-active {
		.btn {
			-webkit-transform: rotate(-180deg);
			transform: rotate(-180deg);
			&:before {
				content: none;
			}
		}
	}
}

.details-summary::-webkit-details-marker {
	display: none;
}

.details-content {
	padding: 20px;
	p {
		margin: 0 0 20px;
		color: #000;
		font-size: 18px;
		text-align: left;
		&:last-of-type {
			margin: 0 0 0;
		}
	}
}

/***********************************
Googleマップを記事の中央にする
************************************/
iframe[src*="google.com/maps"] {
  display: block; /* ブロック要素として扱う */
  margin: 20px auto; /* 上下に余白、左右中央揃え */
  max-width: 100%; /* レスポンシブ対応 */
  width: 600px; /* デフォルトの幅 */
  height: 450px; /* デフォルトの高さを固定 */
  border: 0; /* 枠線を消す */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 影を追加 */
}


/*ボックスメニュースマホの方、縦長になるのを調整した*/
@media screen and (max-width: 750px){


.box-menu{
  width:calc(100%/2)!important;
  padding: 1em 2px 5px 2px;
  min-height:80px !important;
}
.box-menu-icon{
  font-size: 25px;

}
.box-menu-label{
  font-size: 11px;
  color:gray;
  margin-top: 0px; /* 必要に応じて調整 */
  display: block; /* インライン要素の場合、ブロック要素にする */
	}
.box-menu-description{
  color: gray;
  background: skyblue;
}

/*スマホで見た時右に余白ができるのを直す*/
#container {
    overflow: hidden;
}





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

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

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