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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.content {
	margin-top: 0;
}

.main {
	padding-top: 0;
}

/* ヘッダー背景色 透明化 */
.header-container {
	background-color: rgba(255, 255, 255, 0.5);
}

.logo-header {
	padding-bottom: 4px !important;
	vertical-align: top;
}

.navi {
	background-color: transparent;
}

.indent10p {
	padding-left: 10%;
}

.height3em {
	height: 3em !important;
}


/* モバイルの場合はヘッダーボタンがあるためヘッダーを消す */

@media screen and (max-width: 1023px) {
	#header-container {
		display: none;
	}
}

/* フッター用 */
div.footer-center {
	text-align: center;
}
div.footer-mobile {
	text-align: center;
}

/* コンテナ */
#container {
	background-color: white;
	background-image: url("./");
}

/* clear */
.clearfix::after{
  content: "";
  clear: both;
  display: block;
}


/************************************
 *  絞り込み検索フォーム用
 ************************************/

#searchform label {
    display: block;
    margin-right: 1em;
	float: left;
}

/* 検索窓の幅調整 */
.kuscs-search-box {
	background: rgba(240,240,240,0.77);
    display: block;
	margin: 10px auto;
	padding: 10px;
	width: 96%;
}
.search-box {
    display: none!important;
}

/* スマホでは検索窓を非表示にする */
@media screen and (max-width: 480px) {
  .search-box {
    display: none;
  }
  #main > form {
    display: none;
  }
}


/************************************
 *  SNSシェアボタン用
 ************************************/

 /* sns-share */
.sns-share {
	color: rgb(100, 100, 100);
	font-size: 14pt;
	font-weight: 400;
	line-height: 12px;
}

.sns-share-buttons {
	justify-content: left;
}

/* 各ボタンの幅と高さを同じ値に */
.sns-share a {
	height: 30px !important;
	width: 30px !important;
}

/* 各アイコンの大きさに */
.sns-share.ss-high-and-low-lc a .social-icon {
  font-size: 30px;
}

/* キャプション削除 */
.sns-share.ss-high-and-low-lc a .button-caption {
  display: none;
}

/* ボタン下のキャプションと枠線・背景色を消す */
.sns-share [class*="-button"] {
  border: none;
  background-color: transparent;
}

/* Xアイコンをミッチー指定カラーのブランドカラーバックに変更 */
.x-corp-share-button-sq {
	color: #FFF!important;
	background-color: #000!important;
	border-radius: 9px!important;
	padding-bottom: 2px;
}
span.social-icon.icon-x-corp {
	font-size: 18px!important;
}

/* facebook アイコンをミッチー指定カラーのブランドカラーバックに変更 */
.facebook-share-button-sq {
	color: #FFF!important;
	background-color: #1877f2!important;
	border-radius: 16px!important;
	padding-top: 4px;
}
span.social-icon.icon-facebook {
	font-size: 24px!important;
}

/************************************
 *  SNSフォローボタン用
 ************************************/

.sns-follow-message {
	color: rgb(100, 100, 100);
	font-size: 14pt;
	font-weight: 400;
	line-height: 12px;
}

.sns-follow-buttons {
	line-height: 3.0 !important;
	height: 100px!important;
}

.sns-follow [class*="-button"] {
  border: none;
  background-color: transparent;
}

a.follow-button {
	width: 60px;
}



/* 各ボタンの幅と高さを同じ値に */
.icon-note-logo {
	color: transparent;
	display: block!important;
	height: 75px !important;
	width: 50px !important;
	background: url('/wp-content/uploads/2024/05/sns_note.png');
    background-size: cover;
}
.icon-note-logo:hover {
	background: url('/wp-content/uploads/2024/05/sns_note_hover.png');
}

.icon-x-corp-logo {
	color: transparent;
	display: block!important;
	height: 75px !important;
	width: 50px !important;
	background: url('/wp-content/uploads/2024/05/sns_x.png');
    background-size: cover;
}
.icon-x-corp-logo:hover {
	background: url('/wp-content/uploads/2024/05/sns_x_hover.png');
}

.icon-facebook-logo  {
	color: transparent;
	display: block!important;
	height: 75px !important;
	width: 50px !important;
	background: url('/wp-content/uploads/2024/05/sns_facebook.png');
    background-size: cover;
}
.icon-facebook-logo:hover  {
	background: url('/wp-content/uploads/2024/05/sns_facebook_hover.png');
}

.icon-instagram-logo:before  {
	color: transparent;
	display: block!important;
	height: 75px !important;
	width: 50px !important;
	background: url('/wp-content/uploads/2024/05/sns-Instagram.gif');
    background-size: cover;
}



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

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

}

/*834px以下*/
@media screen and (max-width: 834px){
	
	/*必要ならばここにコードを書く*/
	
	/* 勇者の冒険の家 */
	.home_of_the_brave {
		display: none;
	}

	/* 勇者 */
	.brave_man {
		display: none;
	}	

}

/*480px以下*/
@media screen and (max-width: 480px){
	
	#blk-top-copy p {
		font-size: 1.2rem;
	}
	
	/* aoubtページロゴ */
	.about_logo_basic {
		width: 232px !important;
		height: 212px !important;
	}

}

/*834px以上*/
@media screen and (min-width: 834px){
	
	#blk-top-copy p {
		font-size: 1.6rem;
	}
	
	/* 勇者の家 */
	.home_of_the_brave {
		display: none;
	}

	/* 勇者 */
	.brave_man {
		display: none;
	}	
	
}

/*1023px以上*/
@media screen and (min-width: 1023px){
	
	#blk-top-copy p {
		font-size: 2.0rem;
	}
	
	/* 勇者の家 */
	.home_of_the_brave {
		display: block;
		position: relative;
		top: 500px;
		margin: 0 0 0 auto;
		width: 150px;
		height: 0px;
		background-color: #f00;
		z-index:2;
	}
	
	/* 勇者の家(画像) */
	.img_home_of_the_brave {
		display: block;
		background: url('/wp-content/uploads/2024/06/home_of_the_brave.png');
    	background-size: cover;
		width: 129px;
		height:185px;
	}

	/* 勇者 */
	.brave_man {
		display: block;
		position: fixed;
		top: 600px;
		right: 0px;
		width: 130px;
		height: 0px;
		background-color: #f00;
		z-index:1;
	}	

	/* 勇者(画像) */
	.img_brave_man {
		display: block;
		background: url('/wp-content/uploads/2024/06/brave_man.png');
    	background-size: cover;
		width: 80px;
		height:120px;
	}	
	
}

/************************************
** TOP　
************************************/

#top-contnts {
	background-color: white;
}

/**
 * MetaSlider用
 */

#metaslider_135 {
	margin-bottom: 0px !important;
}


/**
 * キャッチコピー用
 */

#blk-top-copy {
	background-color: white;
	margin: 0;
	padding: 0 0 2em 0;
}

#blk-top-cop img {
	margin: 0;
	padding: 0;
}

#blk-top-copy p {
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	margin: 0;
	padding: 0;
	text-align: center;
}

.blk-span-copy {
	display: inline-block;
}

/**
 * バナー用
 */

#blk-top-banner {
	background-color: white;
	margin: 0;
	padding: 2em 10%;
	text-align: center;
}

#blk-top-banner img {
	margin: 0;
	padding: 0;
}

#blk-top-banner p {
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	margin: 1em 0;
	padding: 0;
}

.blk-span-banner {
	display: inline-block;
	margin: 1em;
	padding: 0;
}



/**
 * レスポンシブデザイン用
 */

.blk-top-grid {
	display: grid;
	gap: 0px;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	margin-top: 0;
}

.item {
	background: #edf;
	padding: 60px 15px;
}

h3.headline {
	color: #FFF;
	font-size: 1.8rem;
	font-weight: 400;
	padding-bottom: 10px;
}

/* リスト */

.content ul li{
	list-style-type: none;
}

/* 日付付きリスト */

.content_datelist {
}

.content_datelist ul{
	padding: 0em 1em;
}

.content_datelist ul li{
	list-style-type: none;
}

.content_datelist ul li span {
	color:#BBB;
}

.content_datelist ul li div a{
	color: #FFF;
}

#top-trackrecord-blk .link_button {
	padding: 1em;
}

/**
 * Serarch and Filter
 */

form.searchandfilter div {
 	margin: 0.5em auto;
	padding: 0.5em 0.5em 1em 0.5em;
	text-align: center;
	background: rgb(100 100 100 / 7%);
	
}

.searchandfilter div ul {
	padding-left: 0px;
}

.searchandfilter div ul li {
	margin-top: 2em;	
}

.searchandfilter div ul li ul li {
	margin-top: 0.5em;	
}

input[type=submit]:nth-child(2) {
  display       : inline-block;
  border-radius : 8%;          /* 角丸       */
  font-size     : 11pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 12px 12px;   /* 余白       */
  background    : #333333;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  box-shadow    : 1px 1px 3px #666666;  /* 影の設定 */
  border        : 2px solid #222222;    /* 枠の指定 */
	margin-left: auto;
	margin-right: auto;
	width: 200px;
}

input[type=submit]:nth-child(2):hover {
  box-shadow    : none;        /* カーソル時の影消去 */
  color         : #333333;     /* 背景色     */
  background    : #ffffff;     /* 文字色     */
}

li.cat-item input[type="checkbox"] {
  width         : 16pt;        /* 大きさ：横 */
  height        : 16pt;        /* 大きさ：縦 */
  vertical-align: top;         /* 並び位置   */
  margin-top: 8px;         /* 並び位置   */
}
 /* --- チェックボックス直後のlabel --- */
li.cat-item label {
  padding       : 0 6px;                      /* labelの余白 */
  font-size     : 14pt;                       /* labelの文字サイズ */
  font-weight   : 500;                       /* 文字太さ   */
  border-radius : 5px;                        /* labelの角丸 */
  cursor        : pointer;                    /* カーソル設定 */
  transition    : .2s;                        /* なめらか変化 */
}


 /* --- BOXの定義 -------------------------------------------------*/
.blkSertchFilter {
  position      : relative;            /* タイトル用に親要素定義  */
  box-sizing    : border-box;          /* 罫線・余白も含む大きさ  */
  margin        : 1em auto;    /* BOXの位置               */
  width     : 90%;               /* BOXの最大横幅           */
  max-width     : 1180px;               /* BOXの最大横幅           */
  background    : #efefef;                /* BOXの背景色             */
  padding       : 25px 10px 5px 8px; /* BOX内の余白             */
  border        : 3px solid rgba(0, 0, 0, 0.96);   /* BOXの枠線               */
  border-radius : 14px;                /* BOXの角丸               */
}

 /* --- タイトル部分の定義 ----------------------------------------*/
.blkSertchFilter::before {
  position      : absolute;          /* 親からの相対位置の定義  */
  display       : inline-block;      /* インラインボックス定義  */
  box-sizing    : border-box;        /* 罫線・余白も含む大きさ  */
  line-height   : 1;                 /* 1行の高さを初期化       */
  background    : rgba(0, 0, 0, 0.96);           /* タイトル背景色          */
  color         : #ffffff;           /* タイトルの文字色        */
  content       : attr(title);       /* タイトルに[title]を表示 */
  font-weight   : bold;              /* タイトルは太字          */
  padding       : 6px 15px;          /* タイトル内の余白        */
  top           : -3px;              /* 枠線分上を指定          */
  left          : -3px;              /* 枠線分左を指定          */
  border-radius : 14px 0;            /* タイトルの角丸          */
  font-size     : 16px;              /* タイトルの文字サイズ    */
}

/************************************
 ** INDEX　
 ************************************/
span.cat-label {
	display: none;
}