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

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

/*Google reCAPTA非表示*/

.recaptcha_policy {
  padding: 0;
  margin: 0;
  text-align: center;
  font-size: 11px !important;
  color: #444 !important;
}
.recaptcha_policy a {
  font-size: 11px !important;
  color: #111 !important;
}

.grecaptcha-badge { visibility: hidden; }

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

/*youtubeのサイズ変更*/
.video-01 .video-container {
max-width: 60%;
margin-left:auto; margin-right:auto;
}

/* 追加で、16:9
ちなみに75％の理由は、アスペクト比4:3だからです
450px ÷ 600px ×100= 75% 
Youtubeなどの画面サイズはアスペクト比16:9なので56.25%になります。
9÷16×100= 56.25%
*/

.iframe-aspect196 {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;/*比率16:9*/

}
.iframe-aspect196 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*全ての固定ページのタイトルを非表示*/
.page .entry-title{
  display: none;
}

/* 画像をPCとモバイルで切替る */
/* PCの場合 */
.pc	{ display:inline!important; }
.mb	{ display:none!important; }

@media screen and (max-width: 768px) {
  /* タブレット、スマホの場合 */
  .pc	{ display:none!important; }
  .mb { display:inline!important; }
}
/* ここまで */

/*固定ページのタイトルの余白を消す*/
.post-102 header,
.post-148 header,
.post-158 header,
.post-1062 header,
.post-1344 header,
.post-1390 header,
.post-1715 header,
.post-3304 header,
.post-3565 header,
.post-3638 header,
.post-3304 header,
.post-3565 header,
.post-3638 header,
.post-3637 header,
.post-4345 header,
.post-4467 header,
.post-4472 header,
.post-4476 header,
.post-4480 header,
.post-4484 header,
.post-4555 header,
.post-4490 header,
.post-4851 header,
.post-4807 header,
.post-4874 header,
.post-5266 header,
.post-446 header,
.post-4892 header,
.post-5417 header,
.post-4926 header,
.post-4611 header,
.post-5974 header,
.post-5998 header,
.post-6011 header,
.post-6024 header,
.post-6039 header,
.post-6127 header,
.post-6156 header,
.post-6202 header,
.post-6295 header,
.post-5512 header,
.post-6066 header,
.post-6115 header,
.post-7170 header,
.post-7703 header,
.post-8246 header,
.post-8616 header,
.post-9409 header
{
   margin :-3.8em;
}

/*固定ページの日付非表示*/
.post-102 .date-tags,
.post-148 .date-tags,
.post-158 .date-tags,
.post-1062 .date-tags,
.post-1344 .date-tags,
.post-1390 .date-tags,
.post-1715 .date-tags,
.post-3304 .date-tags,
.post-3565 .date-tags,
.post-3638 .date-tags,
.post-3304 .date-tags,
.post-3565 .date-tags,
.post-3638 .date-tags,
.post-3637 .date-tags,
.post-4345 .date-tags,
.post-4467 .date-tags,
.post-4472 .date-tags,
.post-4476 .date-tags,
.post-4480 .date-tags,
.post-4484 .date-tags,
.post-4555 .date-tags,
.post-4490 .date-tags,
.post-4851 .date-tags,
.post-4807 .date-tags,
.post-4874 .date-tags,
.post-5266 .date-tags,
.post-446 .date-tags,
.post-4892 .date-tags,
.post-5417 .date-tags,
.post-4926 .date-tags,
.post-4611 .date-tags,
.post-5974 .date-tags,
.post-5998 .date-tags,
.post-6011 .date-tags,
.post-6024 .date-tags,
.post-6039 .date-tags,
.post-6127 .date-tags,
.post-6156 .date-tags,
.post-6202 .date-tags,
.post-6295 .date-tags,
.post-5512 .date-tags,
.post-6066 .date-tags,
.post-6115 .date-tags,
.post-7170 .date-tags,
.post-7703 .date-tags,
.post-8246 .date-tags,
.post-8616 .date-tags,
.post-9409 .date-tags,
.post-9429 .date-tags
{
display: none;
}

/*固定ページをサイトマップのメニューに載せない*/

.page-item-5974,
.page-item-5998,
.page-item-6011,
.page-item-6024,
.page-item-6039,
.page-item-6127,
.page-item-6156,
.page-item-6202,
.page-item-6295,
.page-item-5512,
.page-item-6066,
.page-item-6115,
.page-item-7170,
.page-item-9409
{
	display: none;
}

/*サイトタイトル*/
.site-name-text{
color:#0165b3;
}

/*キャッチフレーズの文字*/
.tagline{
font-weight: 300;
font-size: 14pt;
color:#666;
}

/* H2 */
/*.entry-content h2{ */
/*background-color: #F7F7F7; */ /*好みの色*/
/*} */

/* モバイルフッターメニューの色変更*/
.mobile-footer-menu-buttons,
.navi-menu-content,
.mobile-footer-menu-buttons .menu-button > a,
.mobile-footer-menu-buttons .menu-button:hover,
.navi-menu-content a,
.navi-menu-content a:hover {
  background: #fff;
  color: #0165b3;
}

.mobile-footer-menu-buttons .menu-icon {
  color: #0165b3;
}
.mobile-footer-menu-buttons .menu-caption {
  color: 
}

	
/*ヘッダーの文字色と背景色を変える追加CSS*/
.menu-button-in{
	color: #0165b3!important;
	/* background-color: #FFFFFFF1!important; */
}


/************************************
** ローディング画面を表示する
************************************/
/*枠組み*/
.loader-wrap {
	z-index: 99999;
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: #fff;
}

/*本体*/
.loader,
.loader::after {
	border-radius: 50%;
	width: 5em;
	height: 5em;
}

.loader {
	position: relative;
	text-indent: -9999em;
	border-top: .8em solid rgba(0, 0, 249, 0.2);
	border-right: .8em solid rgba(0, 0, 249, 0.6);
	border-bottom: .8em solid rgba(0, 0, 249, 1.0);
	border-left: .8em solid rgba(251, 0, 0, 1.0);
	transform: translateZ(0);
	animation: loading 1s infinite linear;
}

/*アニメーション*/
@keyframes loading {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/*アピールエリアの高さ設定*/
#appeal { 
height: calc(100vw * calc(250 / 1920)); 
}
/*アピールエリアの高さ設定　スマホ*/
@media (max-width: 767px){ 
#appeal { 
height: 40vw 
}

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

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

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