@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.8
*/

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

/*ヘッダー詰める*/
.entry-title,
.content {
padding-top: 0;
margin-top: 0;
}

/*フェードイン*/

.logo-header {
    animation-name: fadein;
    animation-duration: 2s;
}
@keyframes fadein {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

#main{
Padding-top: 0;
margin-top: 0;
}

/*メインカラムの背景を透過する*/
#main{
width: 100%;
background-color: rgba(255, 255, 255, .7);
}

/* ヘッダー部分の背景をbodyと同じ背景に */
.header-container {
    background-color: transparent;
}

/*タイトル、投稿日時、投稿者の非表示*/
.entry-title,
.date-tags,
.author-info{
  display: none;
}

/*hタグリセット*/
.article h1 {
    padding: 0;
    background: none;
}
.article h2 {
    padding: 0;
    background: none;
}
.article h3 {
    border: none;
    padding: 0;
}
.article h4 {
    border: none;
    padding: 0;
}
.article h5 {
    border: none;
    padding: 0;
}
.article h6 {
    border: none;
    padding: 0;
}

/*ヘッダーメニュ―下線*/
.menu-header .menu-item:hover{
border-bottom:6px solid #000000 !important;/*線の太さ色*/
transition: all .8s;/*線が出てくる時間*/
}

.sub-menu .menu-item:hover{
border-bottom:none !important;
}



.article h2 {
  position: relative;
  padding: 0.25em 0;
	margin-bottom:50px;
}
.article h2:after {
  content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
  background: linear-gradient(to right, rgb(230, 90, 90), transparent);
}

table {
border-collapse: separate;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}
table th {
background: #eee;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
font-weight: normal;
padding: 10px;
width:30%;
}
table td {
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-top:none;
border-left:none;
padding: 10px;
width:70%;
}

.space{
	padding:0 30px;
}

/*SNSボタンデザイン*/
.btn-social-square {
  display: inline-block;
  text-decoration: none;
  width: 50px;
  margin:2px;
  height: 50px;
  line-height: 50px;
  font-size: 23px;
  color:white;
  border-radius: 12px;
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  transition: .3s;
}
.btn-social-square i {
  line-height:50px;
}
.btn-social-square:hover {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
}
.btn-social-square--twitter {
  background: #22b8ff;
}
.btn-social-square--facebook { background: #6680d8; }
.btn-social-square--pocket {
  background: #ff6d82;
}
.btn-social-square--feedly {
  background: #7bda72;
}

.frame {
	display: inline-block;
	position: relative;
}
.frame:after {
	position: absolute;
	display: block;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	transform: rotate(3deg); /* 回転させる */
	background: #fff;
	z-index: -1;
}

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

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

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

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