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

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

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

.cat-item.cat-item-4318{display:none;}

/* サイドバーデザイン */
aside{
	background-color:#ffffff;
	padding: 40px;
}


/* コンテンツ全体のデザイン */
html,body {
   background-color: #e6e9ed; /* 周囲の背景色 */
}
article {
	width: 100%;
	max-width: 1023px;
	background-color: #ffffff; /* 本文部分の背景色 */
	color: #2A2A2A !important; /* 文字色 */
}
#main {
  		background-color: #ffffff;
	}


/*1023px以下*/
@media screen and (max-width: 1023px){
    article {
		background-color: transparent;
		padding: 0;
	}
#container {
  		background-color: #ffffff;
	}
}

/*834px以下*/
@media screen and (max-width: 834px){
	  article {
        background-color: transparent;
		padding: 0;
     }
#container {
  		background-color: #ffffff;
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
	 article {
        background-color: transparent;
		padding: 0;
     }
#container {
  		background-color: #ffffff;

	}
}



/*ヘッダーモバイルボタン高さ変更*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	height: 60px;
	padding-top: 8px;
}

/* モバイルスライドインメニュー */
.menu-drawer a {
color: #ffffff;/* 文字色 */
}


/*グローバルメニューのフォントサイズ等変更*/
.navi-in .menu-header .item-label{
	font-size: 11px;
	font-weight: normal;
}

/* メニューバー背景の高さ */
.navi-in>ul li {
height: 80px;
line-height: 80px;
}


/* アピールエリア */
.appeal-content {
	height: 745px;
 	min-height: 745px;
	background-image: url("https://kokebutaikiru.com/wp-content/uploads/2023/03/20230323_pc_text.png");
	background-color: #ffffff;
	background-position: top;
	background-repeat: no-repeat;
	background-size: contain;
	border-top: 2px solid #3cb8c1;
	border-bottom: 2px solid #3cb8c1;
}


/*1023px以下*/
@media screen and (max-width: 1023px){
	.appeal-content {
		height: 1200px;
 		max-height: 1200px;
		width: 100%;
		background-image: url("https://kokebutaikiru.com/wp-content/uploads/2023/03/20230323_tablet_text.png");
		background-repeat: no-repeat;
	}
}

/*834px以下*/
@media screen and (max-width: 834px){
	.appeal-content {
		height: 300px;
 		max-height: 300px;
		width: 100%;
		background-image: url("https://kokebutaikiru.com/wp-content/uploads/2023/03/20230323_mobile_text.png");
		background-repeat: no-repeat;
	}
}
	
/*480px以下*/
@media screen and (max-width: 480px){
	.appeal-content {
		height: 650px;
 		max-height: 650px;
		width: 100%;
		background-image: url("https://kokebutaikiru.com/wp-content/uploads/2023/03/20230323_mobile_text.png");
		background-repeat: no-repeat;
	}
}




/* アピールエリアのスクロール矢印 */
.appeal-content {
  padding-top: 70px;
  position: relative;
  text-align:center;
}

.appeal-content::before {
	display: inline-block;
	content: "";
	position: absolute;
	width: 40px;
	height: 40px;
	border-bottom: solid 4px #060E1C;
	border-left: solid 4px #060E1C;
	transform: rotate(-45deg);
	bottom: 7%;
	right: 0;
	left: 0;
	margin: auto;
	animation: scroll_1 4s 0s forwards,scroll_2 3.5s 2s infinite none
}

.appeal-content::before:hover {
    border-bottom-color: #3cb8c1;
	border-left-color: #3cb8c1;
}

@keyframes scroll_1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes scroll_2 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  
  40% {
    opacity: 1;
  }
  
  80% {
    transform: rotate(-45deg) translate(-30px, 30px);
    opacity: 0;
  }
  
  100% {
    opacity: 0;
  }
  
}


/*1023px以下*/
@media screen and (max-width: 1023px){
	.scroll_down{
		font-size: 200%;
		bottom: 4%;
	}
	.appeal-content::before {
		width: 30px;
		height: 30px;
		border-bottom: solid 3px #060E1C;
		border-left: solid 3px #060E1C;
		bottom: 1%;
	}
}

/*834px以下*/
@media screen and (max-width: 834px){
	.scroll_down{
		font-size: 200%;
		bottom: 32%;
		}
	.appeal-content::before {
		width: 30px;
		height: 30px;
		border-bottom: solid 3px #060E1C;
		border-left: solid 3px #060E1C;
		bottom: 28%;
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
	.scroll_down{
	font-size: 150%;
	bottom: 32%;
	}
	.appeal-content::before {
		width: 25px;
		height: 25px;
		border-bottom: solid 2px #060E1C;
		border-left: solid 2px #060E1C;
		bottom: 28%;
	}
}

/*Android用*/
.Android #appeal-in > div > a {
	font-size: 250%;
	bottom: 20%;
}
.Android .appeal-content::before {
		width: 50px;
		height: 50px;
		border-bottom: solid 4px #060E1C;
		border-left: solid 4px #060E1C;
		bottom: 12%;
	}


/* アピールエリアの文字 */

#appeal-in > div > a {
	display: none;
	width: fit-content;
	color: #080808;
	background-color: #ffffff;
	font-size: 280%;
	text-decoration: none;
	position: absolute;
	bottom: 12%;
	right: 0;
	left: 0;
	margin: auto;
	border: 2px solid #080808;
	opacity: 0;
	animation: none;
}


/*動き*/
#appeal-in > div > a.reset.hidden {
	display: block;
	width: fit-content;
	color: #080808;
	background-color: #ffffff;
	font-size: 280%;
	text-decoration: none;
	position: absolute;
	bottom: 12%;
	right: 0;
	left: 0;
	margin: auto;
	border: 2px solid #080808;
	opacity: 1;
	animation: scroll_down_1 4s 0s

}

#appeal-in > div > a.reset.active {
	display: block;
	width: fit-content;
	color: #080808;
	background-color: #ffffff;
	font-size: 280%;
	text-decoration: none;
	position: absolute;
	bottom: 12%;
	right: 0;
	left: 0;
	margin: auto;
	border: 2px solid #080808;
	opacity: 1;
	animation: scroll_down_2 3.5s 0s infinite none
}



@keyframes scroll_down_1{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes scroll_down_2 {
  0%, 40% {
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(5deg, 5deg);
  }
  10% {
    transform: skew(-4deg, -4deg);
  }
  15% {
    transform: skew(3deg, 3deg);
  }
  20% {
    transform: skew(-2deg, -2deg);
  }
  25% {
    transform: skew(1deg, 1deg);
  }
  30% {
    transform: skew(-0.6deg, -0.6deg);
  }
  35% {
    transform: skew(0.3deg, 0.3deg);
  }
}

/* マウスホバーした時 */
#appeal-in > div > a.scroll_down.enter {
	display: block;
	width: fit-content;
	color: #ffffff;
	background-color: #3cb8c1;
	border: 2px solid #25777d;
	font-size: 280%;
	text-decoration: none;
	position: absolute;
	bottom: 12%;
	right: 0;
	left: 0;
	margin: auto;
	opacity: 1;
	animation: none;
	transition: 0.5s
}
/* マウスホバーが離れた時 */
#appeal-in > div > a.scroll_down.leave {
	display: block;
	width: fit-content;
	color: #080808;
	background-color: #ffffff;
	font-size: 280%;
	text-decoration: none;
	position: absolute;
	bottom: 12%;
	right: 0;
	left: 0;
	margin: auto;
	border: 2px solid #080808;
	opacity: 1;
	animation: scroll_down_2 3.5s 0s infinite none
}


/*メディアクエリ*/
/*1023px以下*/
@media screen and (max-width: 1023px){
#appeal-in > div > a.reset.hidden {
	font-size: 200%;
	bottom: 30%;
	}
#appeal-in > div > a.reset.active {
	font-size: 200%;
	bottom: 30%;
	}
#appeal-in > div > a.scroll_down.enter {
	font-size: 200%;
	bottom: 30%;
	}
#appeal-in > div > a.scroll_down.leave {
	font-size: 200%;
	bottom: 30%;
	}
}

/*Android用*/
.Android #appeal-in > div > a.reset.hidden {
	font-size: 220%;
	bottom: 23%;
	}
.Android #appeal-in > div > a.reset.active {
	font-size: 220%;
	bottom: 23%;
	}
.Android #appeal-in > div > a.scroll_down.enter {
	font-size: 220%;
	bottom: 23%;
	}
.Android #appeal-in > div > a.scroll_down.leave {
	font-size: 220%;
	bottom: 23%;
	}