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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/**リンクの下線なし**/
a{
	text-decoration: none;
}
a:hover {
    color: #006fbf;
}
span.entry-category {
    display: none;
}
/**TOPページ共通**/
section.top-contents {
    margin: 100px auto;
}
#top-contents ul{
	list-style: none;
	padding: 0;
}
span.top-title {
    font-size: 2rem;
    font-weight: bolder;
}
span.top-sub-title {
    color: #006fbf;
    padding: 0 20px;
    font-weight: bold;
}
.text-bold{
    font-weight: bold;
}
/**top-img**/
div#main-img {
    display: flex;
    text-align: center;
    margin: 5rem 0;
}
.f-item {
    margin: auto;
    flex-basis: 33%;
}
/*タイピングのようにテキスト表示*/
.TextTyping {
    font-size: 5rem;
    font-weight: 900;
}
.TextTyping span {
	display: none;
}
/*文字列後ろの線の設定*/
.TextTyping::after {
 	content: "|";
	animation: typinganime .8s ease infinite;
}
@keyframes typinganime{
	from{opacity:0}
	to{opacity:1}
}
/**top-imgをフェードアップ**/
.fadeUp{
animation-name:fadeUpAnime;
animation-duration:8s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/**ブログ部分の装飾**/
/*矢印が右に移動する*/
.btnarrow4{
    /*矢印と下線の基点とするためrelativeを指定*/
	position: relative;
    /*形状*/
    display: inline-block;
	padding: 0 20px;
    color: #333;
    text-decoration: none;
    outline: none;
}
/*矢印と下線の形状*/
.btnarrow4::before{
    content: '';
    /*絶対配置で下線の位置を決める*/
	position: absolute;
    bottom:-8px;
    left:15%;
    /*下線の形状*/    
    width: 85%;
    height: 1px;
	background:#333;
    /*アニメーションの指定*/
    transition: all .3s;
}
.btnarrow4::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
	position: absolute;
    bottom:-3px;
    right:0;
    /*矢印の形状*/    
    width: 15px;
    height:1px;
	background:#333;
    transform: rotate(35deg);
    /*アニメーションの指定*/
    transition: all .3s;
}
/*hoverした際の移動*/
.btnarrow4:hover::before{
    left:20%;
}
/*吹き出し*/
.btnarrow4:hover::after{
    right:-5%;
}
section#k-blog {
    padding: 30px;
    text-align: center;
    background-image: url(/img/sora.jpg);
}
.balloon2 {
  position: relative;
  display: inline-block;
  margin: 1.5rem;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FFF;
  border: solid 3px #555;
  box-sizing: border-box;
}
.balloon2:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}
.balloon2:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #555;
  z-index: 1;
}
section#k-blog a ul li img {
    filter: drop-shadow(10px 10px #fff);
}
/**鳩舎や鳩の紹介**/
section#shokai ul {
    display: flex;
    width: fit-content;
    margin: 0 auto;
}
section#shokai ul li {
    padding: 1.5rem;
    text-align: center;
}
/* ボタン共通設定 */
.btn04 {
    /*線の基点とするためrelativeを指定*/
	position: relative;
    /*ボタンの形状*/
	display:inline-block;
    padding: 10px 30px;
	color:#333;
	border:3px solid #555;
    text-decoration: none;
    outline: none;
    /*はみ出す背景色を隠す*/
 	overflow: hidden;
}
/*hoverした際のボタンの形状*/
.btn04:hover {
	color:#ccc;
	border-color: transparent;
    /*色の変化を遅らせる*/
	transition-delay: .6s;
}
/*線の設定*/
.btn04 span{
    display: block;
    z-index: 2;
}
/*== 線から塗に変化（左から右） */
/*線の設定*/
.borderleft span::before,
.borderleft span::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    width:0;
    height:1px;
    /*線の形状*/
    background: #333;
    /*アニメーションの設定*/
	transition: all .3s;
}
/*左上線*/
.borderleft span::before {
    left:0;
    top:0;
}
/*左下線*/
.borderleft span::after {
    left:0;
    bottom:0;
}
/*hoverをすると線が伸びる*/
.borderleft:hover span::before,
.borderleft:hover span::after {
    width: 100%;
}
/*背景の設定*/
.borderleft::before{
	content: '';
    /*絶対配置で線の位置を決める*/
	position: absolute;
	left: 0;
    bottom:0;
	z-index: -1;
    /*背景の形状*/
	height: 100%;
	width: 0;
	background:#333;
    /*アニメーションの設定*/
	transition: all .3s;
}
/*hoverをすると背景が伸びる*/
.borderleft:hover::before{
	width: 100%;
    /*0.4秒遅れてアニメーション*/
	transition-delay: .4s;
}
/**飼料のボタン**/
a.btn_06 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  background: repeating-linear-gradient(45deg, #ffffff, #ffffff 3px, #e7e7e7 3px, #e7e7e7 30px);
  color: #333;
  letter-spacing: 0.1rem;
  text-decoration: none;
  position: relative;
}
a.btn_06 p {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60px;
  background: #fff;
  border: 3px solid #555;
  box-sizing: border-box;
  position: absolute;
  top: -6px;
  left: -6px;
  transition-duration: 0.2s;
}
a.btn_06:hover p {
  left: -1px;
  top: -1px;
}
section#feed a p span {
    margin: 0 15px;
}
/**お問い合わせ**/
section#contact {
    background: #c9e7fc;
    /* border-radius: 10px; */
    padding: 1.5rem;
    text-align: center;
}
section#contact ul {
    display: flex;
    list-style: none;
    justify-content: center;
    padding: 0;
}
section#contact ul li p {
    margin-bottom: 0;
}
li.btn-pc-sp.btn-pc-sp--tel,
li.btn-pc-sp.btn-pc-sp--fax {
    font-size: 2em;
    font-weight: 700;
    background-color: #ff7a1e;
    color: #fff;
    border-radius: 15px;
    padding: 10px;
    margin: 10px auto;
    width: 45%;
}
li.btn-pc-sp.btn-pc-sp--tel{
    background-color: #ff7a1e;
}
li.btn-pc-sp.btn-pc-sp--fax {
    background-color: #009245;
}
li.menkyo {
    padding: 0 5px;
    font-size: 14px;
}
/**Youtube埋め込み**/
#youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
#youtube iframe {
  width: 100%;
  height: 100%;
}

/**リンク集**/
section#link ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
section#link ul li {
    padding: 1rem;
    /* border: 1px solid #555; */
    width: 20%;
    margin: 1.5rem;
    background-color: #e7e7e7;
}

/*==================================================
スライダーのためのcss
===================================*/
.slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0 10px;/*スライド左右の余白調整*/
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1076px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
  	section#contact ul {
	    flex-flow: column;
	}
	li.btn-pc-sp.btn-pc-sp--tel,
	li.btn-pc-sp.btn-pc-sp--fax {
	    width: 95%;
	}
}
/*1023px以下*/
@media screen and (max-width: 1023px){
}
/*834px以下*/
@media screen and (max-width: 834px){
	.TextTyping {
	    font-size: 2rem;
	}
	section#shokai ul {
		flex-flow: column;
	}
	a.btn_06,
	a.btn_06 p{
		height: 160px;
		flex-flow: column;
	}
	section#link ul li{
		width: 45%;
    	margin: 10px;
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
  div#main-img {
	    flex-flow: column;
	    margin: 1rem auto;
	}
}