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

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


/************************************
** トップへ戻るボタン画像の表示調整
************************************/

.go-to-top-button {
 width: 120px; /* ボタン画像の表示幅 */
 height: auto; /* ボタン画像の高さは自動調整 */
}
.go-to-top-button:hover { /* カーソルを合わせると少し拡大する */
  transform: scale(1.1);
}
.go-to-top {
 right: 30px; /* 右から10pxの位置に配置 */
 bottom: 100px; /* 下から30pxの位置に配置 */
}

/************************************
** reCAPTCHA v3 バッジを左下に移動
************************************/

.grecaptcha-badge {
width: 70px !important;
overflow: hidden !important;
transition: all 0.3s ease !important;
left: 4px !important;
}
.grecaptcha-badge:hover {
width: 256px !important;
}

/************************************
** キャプションの調整
************************************/

.wp-block-image figcaption{

font-size:16px;
margin-top:10px;
}


/************************************
** 白抜きボックスの縦幅固定
************************************/
.blank-box{
	border-width: 0.8px;
	height: 300px;
}

/************************************
** メニューを左に移動
************************************/
.hlt-top-menu .navi {
  margin-right: 40px;
}


/************************************
** タブ切り替え 
************************************/
.tab-wrap {
	background: #F9FFFF;
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	padding: 0 0 20px;
}

.tab-label {
	color: Gray;
	cursor: pointer;
	flex: 1;
	font-weight: bold;
	order: -1;
	padding: 12px 24px;
	position: relative;
	text-align: center;
	transition: cubic-bezier(0.4, 0, 0.2, 1) .2s;
	user-select: none;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
	border-bottom: 3px solid #ddd;
}

.tab-label:hover {
	background: rgba(100, 100, 100,.1);
}

.tab-switch:checked + .tab-label {
	color: #545454;
}

.tab-label::after {
	background: #545454;
	bottom: -3px;
	content: '';
	display: block;
	height: 3px;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transform: translateX(100%);
	transition: cubic-bezier(0.4, 0, 0.2, 1) .2s 80ms;
	width: 100%;
	z-index: 1;
}

.tab-switch:checked ~ .tab-label::after {
	transform: translateX(-100%);
}

.tab-switch:checked + .tab-label::after {
	opacity: 1;
	transform: translateX(0);
}

.tab-content {
	height:0;
	opacity:0;
	padding: 0 10px;
	pointer-events:none;
	transform: translateX(-30%);
	transition: transform .3s 80ms, opacity .3s 80ms;
	width: 100%;
}

.tab-switch:checked ~ .tab-content {
	transform: translateX(30%);
}

.tab-switch:checked + .tab-label + .tab-content {
	height: auto;
	opacity: 1;
	order: 1;
	pointer-events:auto;
	transform: translateX(0);
}

.tab-wrap::after {
	content: '';
	height: 20px;
	order: -1;
	width: 100%;
}

.tab-switch {
	display: none;
}

/*1---画像を挿入した場合 */
.content-set {
  height:0;
  opacity:0;
  padding: 0 10px;
  pointer-events:none;
  transform: translateX(-30%);
  transition: transform .3s 80ms, opacity .3s 80ms;
  width: 100%; /* widthを変更 */
  display: flex; /* flexboxを利用 */
  flex-wrap: wrap; /* 画像が折り返されるようにする */
  justify-content: space-between; /* 等間隔に表示する */
}

/*2---画像の調整 */
.content-set >img {
  width: calc(33.33% - 2.66%); /* 画像を等間隔に並列に表示する */
  margin-bottom: 20px; /* 画像の下に余白を設定 */
  box-sizing: border-box; /* borderやpaddingが幅に含まれるようにする */
}

.tab-switch:checked ~ .content-set {
  transform: translateY(30%);
}

.tab-switch:checked + .tab-label + .content-set {
  height: auto;
  opacity: 1;
  order: 1;
  pointer-events:auto;
  transform: translateY(0);
}

/************************************
**フォームの幅調整
************************************/
.wpcf7 input[type="text"],
.wpcf7 input[type="email"] {
width: 50%!important
}
.wpcf7 input[type="submit"]{
	width: 20%;
}
.btn_send {
    text-align: center;
}
/************************************
**カラムの間消し
************************************/
.wp-block-columns{
  gap: 0;
}
/************************************
**モバイルスライドインメニュー
************************************/
span.fas.fa-times::before{
font-family: "Font Awesome 5 Free";
content: "\f060";
color:#37b8b6;/*矢印色変更はこちら*/
}

.navi-menu-content{
	left: auto;
	right: 0;

	transform: translateX(101%);
}



ul.menu-drawer:after {
background: white;
}
.menu-drawer li {
padding:0;
}
.menu-drawer li{
font-weight: bold;
}
.menu-drawer a{
font-size:1.3em;
background-color:#ffffff;
color:#545454;
margin: .5em 0;
}
.menu-drawer a:hover{
background-color:#f7f7f7;
}
.menu-drawer .sub-menu {
padding:0;
}
.menu-drawer .sub-menu li{
font-size: .9em;
}
.menu-drawer .sub-menu li a::before {
font-family: "Font Awesome 5 Free";
content : "\f105";
color:#37b8b6;
margin:0 .5em 0 1em;
}

/************************************
****　モバイル表示　ヘッダーメニュー・検索アイコン
************************************/

.mobile-menu-buttons{
height:50px;
box-shadow: none;
}
.mobile-menu-buttons > li {
padding-top:0;
}
.menu-button{
margin: auto;
}
.mobile-menu-buttons .menu-button:hover{
background-color:white;
}
span.fas.fa-search::before{
color:#90C31F;/*検索マーク色変更はこちら*/
margin-left:1em;
}
span.fas.fa-bars::before{
color:#37b8b6;/*ハンバーガーメニュー色変更はこちら*/
margin-right:0em;
}
.navi-menu-caption.menu-caption,.home-menu-caption.menu-caption,.search-menu-caption.menu-caption,.top-menu-caption.menu-caption,.sidebar-menu-caption.menu-caption{
display:none;
}
img.site-logo-image{
		width: 160px;
	margin-top: 3px;
	margin-left: 8px;
}
/** モバイルヘッダーロゴが中央になっていたので左に直した 2024-04-26*/
.mobile-menu-buttons .menu-button.logo-menu-button {
	justify-content: flex-start;
}

.mobile-menu-buttons .menu-icon,
.menu-close-button{
	color:#37B8B6;
}
/************************************
****　googlefonts設定
************************************/

.biz-udgothic-regular {
  font-family: "BIZ UDGothic", sans-serif;
  font-weight: 400;

  font-style: normal;
}
body {
	font-family: 'BIZ UDGothic', sans-serif;
}



/************************************
** ■Fadein
************************************/

.fadein {
	opacity: 0;
	transform: translateY(30px);
	transition-property: transform, opacity;
	transition-duration: 1.5s;
	transition-delay: 0s;
}

.fadein.is-active {
	opacity: 1;
	transform: translateY(0);
}

/************************************
** ■リンクの色変更
************************************/

.entry-content a:hover { color: #92e5d4; }
.toc-content a:hover { color: #ffffff; }

/************************************
** ■コンテンツ領域の上下間調整
************************************/
.content { 
margin-top: 0; 
}
.header {
margin-bottom: 0;
}

.content {
margin-top: 0;
margin-bottom: 0;
}

.main {
margin-top: 0;
margin-bottom: 0;
}

.article-footer.entry-footer {
	display: none;
}

#main {
	padding-top: 0;
	padding-bottom: 0;
}

.entry-content,
#pl-36 {
	margin-top: 0;
	margin-bottom: 0;
}

#footer {
	margin-top: 0;
}

/* 見出しのデザインリセット */




/* H2 */
.entry-content h2{
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
color: #ffffff;/*文字色*/
border:none;
background: #37B8B6;/*背景色*/
padding: 5px 20px 8px;/*文字まわり（上下左右）の余白*/
}

/* H3 */
.entry-content h3{
	  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #494949;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #37B8B6;/*左線*/
}

/* H4 */
.entry-content h4{
color: #37B8B6;/*文字色*/
border:none;
background:none;
padding: 0;
}

/* H5 */
.entry-content h5{
  font-family: "Play", sans-serif;
  font-weight: 400;
  font-style: normal;
　border:none;
  border-bottom:none;
padding: 0;
		margin-bottom: 0;
}

/* H6 */
.entry-content h6{
color: #333333;/*文字色*/
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
border:none;
padding: 5px 20px 8px;/*文字まわり（上下左右）の余白*/
}

/*******************************
* 固定ページ記事タイトル非表示
********************************/
.type-page h1,
.type-page 
.post-meta{
  display:none;
}
/*******************************
* リストのカスタマイズ
********************************/
.list-1{
   counter-reset:number; 
   list-style-type: none; 
   padding: 2.8em;
   margin; 0;
}
.list-1 li { 
   position: relative;
   margin:0.5em 0 !important;
   padding-left: 0;
}
.list-1 li:before {
  position: absolute;
  top: 0.5em;
  left: 0;/*丸数字の位置*/
  content: counter(number);
  counter-increment: number;
  width: 15px;  height: 15px;
  background-color: #37B8B6;
  color: #fff; /* 文字色 */
  line-height: 16px;
  margin-left: -25px;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  border: 1px solid #000;
  border-radius: 50%;
}

.list-2{
   counter-reset:number; 
   list-style-type: none; 
   padding: 2.8em;
   margin: 0;

}
.list-2 li { 
   position: relative;
   margin:0.5em 0 !important;
   padding-left: 1.8em;
}
.list-2 li:before {
  position: absolute;
  top: 0.5em;
  left: 0;/*丸数字の位置*/

  content: counter(number);
  counter-increment: number;
  width: 15px;  height: 15px;
  background-color: #37B8B6;
  color: #fff; /* 文字色 */
  line-height: 16px;
  margin-left: -25px;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  border: 1px solid #000;
  border-radius: 0%;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){

}
 

/*1030px以下*/
@media screen and (max-width: 1030px){

}
 

/*768px以下*/
@media screen and (max-width: 768px){

}
 

/*480px以下*/
@media screen and (max-width: 480px){

}