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

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

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

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

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

/************************************
*トップページに邪魔なものを非表示
************************************/
.home.page .entry-title,
.home.page .sns-share,
.home.page .sns-follow,
.home.page .date-tags,
.home.page .author-info{
display: none;
}
.post .entry-title,
.post .sns-share,
.post .sns-follow,
.post .date-tags,
.post .author-info{
display: none;
}

#header {
  display:none;
}

/*1.フェードインアニメーションの指定*/
.scrollanime {opacity: 0;} /*一瞬表示されるのを防ぐ*/
.fadeInDown {
    animation-name: fadeInDown;
    animation-duration: 1.8s;
    animation-fill-mode: forwards;
}
@keyframes fadeInDown {
    0% {
        opacity: 0;         
    }
    100% {
    opacity: 1;
    transform: translateY(0);
    }
}
 
/*2.上下の動きを指定*/
.updown {transform: translateY(-100px);}
.downup {transform: translateY(100px);}
 
/* cocoon 3カラム構成の2つ目の要素に200msのdelayをかける */
.delaycenter{
    -moz-animation-delay:200ms;
    -webkit-animation-delay:200ms;
    -o-animation-delay:200ms;
    -ms-animation-delay:200ms;
}
/* cocoon 3カラム構成の3つ目の要素に400msのdelayをかける */
.delayright{
    -moz-animation-delay:400ms;
    -webkit-animation-delay:400ms;
    -o-animation-delay:400ms;
    -ms-animation-delay:400ms;
}


/************************************
** 背景を白、枠線削除
************************************/
.body .post .page .main, .body .post .page .sidebar {
  background-color: transparent;
	 border: solid 1px transparent;
  box-shadow: none;
}

/************************************
** ブログカード ドメイン名非表示
************************************/
.blogcard-footer{
  display:none;
}

/************************************
** TOPカバーブロック修正
************************************/
.entry-content .wp-block-cover,
.entry-content .wp-block-cover-image {
  margin: 0 calc((100% - 100vw)/2) 1.5em;
  min-height: 500px;
  width: auto;
}
.body {
	overflow-x: hidden;
}
.post-2 {
	margin-top: -3.5em;
}

/************************************
** SNSボタン（フッター中）
************************************/
/* アイコン周り全体 */
.flowbtn13{
font-family:'Arial', sans-serif;	
display:inline-block;
width:90%;
font-size:30px;
text-align:left;
border-bottom:dotted 1px #FFFFFF;	
text-decoration:none;
}
/* マウスホバー時に下線を消す */
.flowbtn13:hover{
text-decoration:none;
}
/* アイコン調整 */
.flowbtn13 .fa-twitter-square,
.flowbtn13 .fa-square-x-twitter,
.flowbtn13 .fa-instagram,
.flowbtn13 .fa-facebook-square{
	color:#FFFFFF;
	font-size:25px;
	transition: .5s ;
	transform: rotateZ( 0deg ) ;
}
/* Twitterマウスホバー時 */
.fa-square-x-twitter:before {
    content: "\e61a";
}
.flowbtn13 .fa-square-x-twitter:hover{
	color:#333;
  transform: rotateZ( 360deg ) ;
}
.flowbtn13 .fa-twitter-square:hover{
	color:#55acee;
transform: rotateZ( 360deg ) ;
}
.fl_tw13 span:hover{
color:#333;
}
/* Instagramマウスホバー時 */
.flowbtn13 .fa-instagram:hover{
	color:#c6529a;
transform: rotateZ( 360deg ) ;
}
.insta_btn13 span:hover{
color:#c6529a;	
}
/* Facebookマウスホバー時 */
.flowbtn13 .fa-facebook-square:hover{
	color:#0072BC;	
transform: rotateZ( 360deg ) ;
}
.fl_fb13 span:hover{
color:#0072BC;	
}

/* テキスト調整 */
.flowbtn13 span{
font-size:15px;	
position:relative;
left:5px;
bottom:3px;	
color:#FFFFFF;	
}

/* テキストマウスホバー時*/
.flowbtn13 span:hover{
 transition: .5s;
font-weight:bold;	
margin-left:3px;	
}
/* ulタグの内側余白を０にする */
ul.snsbtniti2{
padding:0!important;
}
/* 全体の位置 */
.snsbtniti2{
display:flex;
flex-flow:row wrap;
}
/* 要素同士の余白 */
.snsbtniti2 li{
flex:0 0 33%;
text-align:center!important;
}


/************************************
** SNSボタン（モバイル）
************************************/
/* ボタン全体 */
.flowbtn11{
font-family:'Verdana',sans-serif;	
border-radius:4px;
position:relative;
display:inline-block;
width:80%;
font-size:20px;
color:#fff!important;
text-decoration:none;
margin-bottom:5px;
}

/* アイコンボタンホバー時 */
.flowbtn11:hover span{
-webkit-transform: rotateX(360deg);
-ms-transform: rotateX(360deg);
transform: rotateX(360deg);
text-decoration:none;
}
/* ボタン内テキスト調整 */
.flowbtn11 span{
font-size:14px;	
position:relative;
left:8px;
bottom:2px;
transition:.6s;	
display:inline-block;	
}
/* ulタグの内側余白を０にする */
ul.snsbtniti3{
padding:0!important;
}
/* アイコンボタンの位置調整 */
.snsbtniti3{
display:flex;
flex-flow:row wrap;
}
/* アイコンボタン同士の余白調整 */
.snsbtniti3 li{
flex:0 0 48%;
text-align:center!important;
}

/** サイドバー画像透過 **/
.sidebar-thumb {
    overflow: hidden;
}
.sidebar-thumb img {
	transition: 1.0s ;
}
.sidebar img:hover {
	opacity: 0.7 ;
}

/*はみ出たスクロールバー非表示*/
body {
overflow-x: hidden;
}


/************************************
** ページをフェードイン表示する
************************************/
.body {
	animation: fadein 3s forwards; /*アニメーション指定*/
}

@keyframes fadein {
	0% {opacity: 0} /*アニメーション開始時*/
	100% {opacity: 1} /*アニメーション終了時*/
}

.footer{
	overflow: hidden;
}


/************************************
** アピールエリア装飾
************************************/
/*全体*/
.appeal-in {
    min-height: 500px;/*パソコンでの高さ調整*/
	min-width:100%;/*幅を最大に*/	
	background-color:rgba(250,250,250,.5);/*背景色、白を透過させる*/
	backdrop-filter: blur(3px);/*ぼかし*/
}

/*480px以下*/
@media screen and (max-width: 480px){
	.appeal-in {
		min-height: 300px!important;/*スマホでの高さ調整*/
	}
}

/*コンテンツエリア*/
.appeal-content {
width:100%;/*幅を最大に*/
padding:2em 1em;/*内側余白調整*/
background-color:transparent;/*コンテンツエリアの背景無効化*/
}

/*タイトル*/
.appeal-title{
padding-bottom:0.5em;/*タイトル下の余白*/
font-weight:bold;/*文字の太さ*/
font-size:2.0em;/*タイトル文字の大きさ*/
}

/*本文*/
.appeal-message {
	font-weight:bold;/*文字の太さ*/
 font-size: 1.5em;/*本文文字の大きさ*/
}
/*480px以下*/
@media screen and (max-width: 480px){
.appeal-message {
 font-size: 1.5em;/*スマホ表示する文字の大きさ*/
}	
}

/*ボタン*/
.appeal-button{
background-color:transparent!important;/*ボタンの背景色無効化*/
font-weight:normal;/*文字の太さ*/
color: #777; /*ボタン部分文字とアイコンの色*/
}

/*アイコンを追加*/
.appeal-button:before{
display:block;
font-family: "Font Awesome 5 Free";
font-weight:bold;
content: "\f103";/*アイコン指定*/
font-size: 2em;/*アイコンの大きさ*/
animation: move 1s infinite alternate ease-in-out;/*以下、アイコンを動かすアニメーション*/
}

@keyframes move{
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(10px);
  }
}

/*スムーズにスクロール*/
html { scroll-behavior: smooth;}

/************************************************
 トップへ戻るボタン
*************************************************/

.go-to-top {
  right: 80px; /*右から80px*/
  bottom: 80px; /*下から80px*/
}

.go-to-top-button {
  border-radius: 50%; /*丸くする*/
  width: 60px; /*横幅*/
  height: 60px; /*高さ*/
  font-size: 30px; /*アイコンフォントのサイズ*/
  opacity:0.9; /*透明度*/
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .2); /*影*/
}

/*ホバー時*/
.go-to-top-button:hover {
  color: #333; /*アイコンフォントの色*/
  background-color:#aaa; /*背景色*/
}

/************************************************
 ページネーション非表示
*************************************************/
.pagination {
  display: none;
}