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

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

/* 問い合わせフォーム用 */
.wp-block-snow-monkey-forms-item{
	margin-bottom:25px !important;
}

/*プッシュ通知（OneSignal）*/
#onesignal-bell-container{
	margin-bottom:50px;
}

.header-container {
  background-image: url('https://kutikomi.so-t.biz/wp-content/uploads/2024/04/back1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh;
}
.head-copy{
	width:100%;
	height:100%;
	display: -webkit-flex;
	display: flex;
	align-items: center;
	justify-content: center;
}
.head-copy-container{
	margin-top:-10%;
	color:#000;
	font-size:1.5rem;
	font-weight:900;
	text-align:center;
	text-shadow:2px 2px 0 #fff6 , -2px -2px 0 #fff6 ,
              -2px 2px 0 #fff6 , 2px -2px 0 #fff6 ,
              0px 2px 0 #fff6 ,  0-2px 0 #fff6 ,
              -2px 0 0 #fff6 , 2px 0 0 #fff6 ;
}
.ao{
	color:#2864F0 ;
	/*text-shadow:2px 2px 0 #fff, -2px -2px 0 #fff,
              -2px 2px 0 #fff, 2px -2px 0 #fff,
              0px 2px 0 #fff,  0-2px 0 #fff,
              -2px 0 0 #fff, 2px 0 0 #fff;*/
}
.big{
	font-size:3rem;
}
.small{
	font-size:14px;
	font-weight:400;
}

.logo-header{
	height:80px;
	max-height:80px;
}
.logo-header img{
	height:80px;
	max-height:80px;
}

.navi-in a{
	position: relative;
	color:#000 !important;
}
.navi , .navi-in a:hover {
    background-color:transparent;
}
.navi-in a::before{
	background: #2864F0;
	content: '';
	width: 100%;
	height: 2px;
	position: absolute;
	left: 0;
	bottom: 0;
	margin: auto;
	transform-origin: right top;
	transform: scale(0, 1);
	transition: transform .3s;
}
.navi-in a:hover::before {
	transform-origin: left top;
	transform: scale(1, 1);
}
.cat-item a{
	position: relative;
}
.cat-item a:hover {
    background-color: #ffffff !important;
}
.cat-item a::before{
	background: #2864F0;
	content: '';
	width: 100%;
	height: 2px;
	position: absolute;
	left: 0;
	bottom: 0;
	margin: auto;
	transform-origin: right top;
	transform: scale(0, 1);
	transition: transform .3s;
}
.cat-item a:hover::before {
	transform-origin: left top;
	transform: scale(1, 1);
}


/*********h2~h6までリセット*********/
.article h2 , .article h3 , .article h4 , .article h5 , .article h6{
	padding:0;
	margin:0;
	margin-bottom:1rem;
}

/*h2*/
.article h2{
	position: relative;/*相対位置*/
	padding: 0.5em 0.5em 0.3em 1.5em;/*アイコン分のスペース*/
	line-height: 1.4;/*行高*/
	color: #333;/*文字色*/
	border-top: solid 1px #ff8800;
	border-bottom: solid 1px #ff8800;
	background: #fffff4;
}
.article h2:before{
	font-family: "Font Awesome 5 Free";/*忘れずに*/
	content: "\f138";/*アイコンのユニコード*/
	font-weight: 900;
	position: absolute;/*絶対位置*/
	font-size: 1em;/*サイズ*/
	left: 0.25em;/*アイコンの位置*/
	top: 0.4em;/*アイコンの位置*/
	color: #ff8800; /*アイコン色*/
}

/*h3*/
.article h3{
	/*リセット*/
	border:0;
	
	position: relative;/*相対位置*/
	padding-left: 1.2em;/*アイコン分のスペース*/
	line-height: 1.4;/*行高*/
	/*color: #7b6459;*//*文字色*/
}
.article h3:before{
	font-family: "Font Awesome 5 Free";
	content: "\f1b0";/*アイコンのユニコード*/
	font-weight: 900;
	position: absolute;/*絶対位置*/
	font-size: 1em;/*サイズ*/
	left: 0;/*アイコンの位置*/
	top: -0.1em;/*アイコンの位置*/
	color: #ff938b; /*アイコン色*/
}

.article h4,.article h5,.article h6{
	border:0;
	color:#ff8800
}

/*ボタン*/
.wp-block-button{
	text-align:center;
}
.wp-block-button__link{
	background-color:#008000 !important;
	font-weight:900;
	border-radius: 30% !important;
	margin:0 auto !important;
}

/*目次*/
.toc{
	width:100%;
}

/*サイドバー*/
.sidebar{
	background: transparent !important;
}
.sidebar h3{
	background: transparent !important;
	color:#383f47;
	border-bottom:2px #2864F0 solid;
	padding:0;
}

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

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	.header , .header-in , .site-name-text-link , .site-name-text{
		width:100%;
	}
	.header-site-logo-image{
		max-height:none !important;
		height:auto;
	}
	.header-container {
  background-image: url('https://kutikomi.so-t.biz/wp-content/uploads/2024/04/back1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 50vh;
	}
	.head-copy-container{
	margin-top:-20%;align-content
	}
	.big{
	font-size:1.5rem;
	}
}

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