@charset "UTF-8";

/*!
Theme Name: Cocoon SPW
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.2
*/

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



.main{padding-top: 1em !important;}



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){

/* ヘッダの余白いらない */
body{margin-top: 0 !important;}
.logo-header{padding: 0 !important;}

/*** カートに入れる ***/
.font_cart{text-align: center;}
.btn_cart{width: 100%;}

/*1023px以下おわり*/
}



/*834px以下*/
@media screen and (max-width: 834px){

/*834px以下おわり*/
}



/*480px以下*/
@media screen and (max-width: 480px){
/*** インデックス記事ごとの隙間いらない ***/
.entry-card-wrap {
margin-bottom: 0;
border-bottom: #2ad371 1px solid;
}

/*** エントリーカードの大きさ変更 ***/
.entry-card-wrap{padding-bottom: 0 !important;}
.entry-card-thumb {
	width: 70px;
margin-top: 0 !important;
margin-bottom: 2px !important;
}
.entry-card-title{
font-size: 14px;
}

/*** カテゴリと日付の位置調整 ***/
.entry-card-info {
margin-top: -1.5em;
}

/*480px以下おわり*/
}



/*1260px以下*/
@media screen and (max-width: 1260px){
/*1260px以下おわり*/
}



/*PCのみ*/
@media screen and (min-width: 480px){
.wp-video{width: 480px !important;}
}



/************************************
** ヘッダーメニューをスクロール
************************************/
/*
#header-container .navi-in > ul li {
   height: auto;
   font-weight: 600;
   line-height:12px;
border-left: #fff 1px solid !important;
border-right: #fff 1px solid !important;
background-color: #eee;
font-size: 12px;
}
#header-container #navi{
   background:#fff; /* 背景色 
}
#header-container #navi a{
   color:#222; /* 文字色 
   padding:0.8em 1em;
}
#header-container #navi a:hover{
   color:#999; /* マウスホバー時の文字色 
}
#header-container .navi-in > ul .sub-menu{
   background:#000; /* サブメニュー背景色 
}
#header-container .navi-in > ul > .menu-item-has-children > a::after {
   top: 0.8em;
   font-size: 1.2em;
   font-weight: 600;
}
#header-container .sub-menu .caption-wrap{
   padding-left:1em;
}
.navi-in > ul .menu-item-has-description > a > .caption-wrap{
   height:auto;
   line-height:auto !important;
}
.navi .item-label{
  overflow: visible;
}

@media screen and (max-width: 1030px){
   .navi-in > .menu-header{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  overflow-x: scroll;
  white-space: nowrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
   }
   #header-container #navi a{
  font-size:0.8em;
  padding: 1em 1.2em; /* 余白 
   }
   #header-container .navi-in > ul > .menu-item-has-children > a::after{
  display:none;
   }
}
*/



/************************************
** ハンバーガーメニューをPCでも表示
************************************/
.mobile-header-menu-buttons {
	display: flex;
	bottom: auto;
	top: 0;
left: auto;
right:0;
padding-top: 0.7em;
border: none;
background: none;
box-shadow: none;
justify-content:right;
}
.navi-menu-button {
left: auto;
right:1em;
}
@media screen and (min-width: 1260px){
.header-in{padding-right: 2em;}
.spwsearch{right: 2em !important;}
.mobile-header-menu-buttons {
width: 1256px;
left: 0;
margin: 0 auto !important;
justify-content:flex-end;
}
}



/************************************
** ハンバーガーメニューの中身をカスタマイズ
************************************/
.mobile-menu-buttons .menu-icon{font-size: 26px;}
/* このサイトについて */
.menu-item-628{border-top: #ccc 1px solid; margin-top: 0.5em; padding-top: 0.5em;}
/* 広告について */
.menu-item-637{border-bottom: #ccc 1px solid; margin-bottom: 0.5em; padding-bottom: 0.5em;}
/* Facebook */
.menu-item-626{font-size: 30px; width: 26%; margin-left: 10%; text-align: center; float: left;}
/* Instagram */
.menu-item-627{font-size: 30px; width: 26%; text-align: center; float: left;}
/* LINE */
.menu-item-6043{font-size: 30px; width: 26%; margin-right: 10%; text-align: center; float: right;}
/* shinbiyo.com */
.menu-item-615{clear: both; text-align: center; margin-top: 0.5em; padding-top: 0.5em;}
/* 右からスライド */
.navi-menu-content {
  left: auto;
  right: 0;
  transform: translateX(105%);
}



/************************************
** 検索窓の調整
************************************/
.search-box{border: #9f3 2px solid; margin: 0 1em; padding: 0; border-radius: 10px !important;}
.search-box .search-edit{font-size: 12px; height: 22px; border: none;}
.search-box .search-edit:focus{outline: none;}
.search-submit {
    position: absolute;
    right: 55px;
    top: 1px;
    font-size: 20px;
    cursor: pointer;
    line-height: 22px;
    border: none;
    color: #ccc;
    padding: 0 5px;
    background-color: rgba(255, 255, 255, 0);
}
.spwsearch{margin-bottom: 0 !important; bottom: 0;}

@media screen and (min-width: 480px){
.header-in{position: relative;}
.header-in .wiget_search{position: absolute;}
.spwsearch{width: 30%; position: absolute; right: 0;}
.search-box .search-edit{line-height: 24px;font-size: 16px; height: 38px;}
}


/* オリジナル検索窓 */
.searchFromMini {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    position: relative;
margin-top: 0.5em;
padding: 0 0.5em;
}
#search-formmini {
    display: flex;
    position: relative;
    justify-content: center;
    flex-wrap: wrap;
    line-height: 1;
	 height: 40px;
}

.search-field {
  position: absolute;
  transition: all 0.5s ease-in-out;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #FFF;
  box-sizing: border-box;
  color: #111;
  cursor: pointer;
  font-weight: 300;
  opacity: 0;
  width: 0;
  z-index: 3;
}
.search-field:focus {
    cursor: text;
    opacity: 1;
    outline: none;
    width: 100%;
    z-index: 1;
    background: #FFF;
    border-radius: 9999px;
border-color: #9f3;
    padding-left: 20px;
    box-shadow: 0 1px 6px rgb(0 0 0 / 11%);
    line-height: 1.2;
}
.search-field:focus:hover ~ .search-submit .fa-search {
  color: #9f3;
}
.search-field:hover ~ .search-submit .fa-search {
  color: #9f3;
}

.search-submit {
    transition: all 0.5s ease-in-out;
    background-color: transparent;
    position: absolute;
    z-index: 2;
    right: 20px;
    height: 100%;
    color: #2ad371;
    border: none;
top: 0;
}
.search-submit:hover .fa-search {
  color: #9f3;
}
form#search-formmini input[type="search"] {
    width: 40px;
    position: relative;
	 transition: all 0.5s ease-in-out;
	 margin: 0;
	 height: 40px;
}
form#search-formmini input[type="search"]:focus {
    width: 300px;
    font-size: 0.9rem;
    line-height: 1.4;
}
form#search-formmini input[type="search"]:focus ~ .search-submit {
    right: 24px;
    color: #6bb6ff;
}



/************************************
** エントリーカードのカテゴリーラベル
************************************/
.cat-label{
color: #fff;
background: #2ad371;
border: none;
top: 0;
left: 0;
padding: 3px 10px;
}
@media screen and (max-width: 480px){
.cat-label{padding: 1px 5px;}
}

.category .cat-label{display: none;}

.entry-card-meta{
}



/************************************
** いらないもの
************************************/
.archive-title .fa , /* アーカイブタイトルのアイコン */
.pagination-next-link , /* 次のページへボタン */
.page .post-date , /* 固定ページの日時 */
.single .cat-label , /* 投稿記事内のカテゴリ表示 */
.widget-single-content-bottom-title /* LINEタイトル */
{display: none;}



/************************************
** 余計な空きをなくす
************************************/
.content{margin-top: 0; padding-bottom: 0;}
.footer{margin-top: 0; padding-top: 0;}



/************************************
** ランダムバナー調整
************************************/
.widget_links{padding: 1.5%; position: relative;}
.widget_links ul{padding: 0 !important;}
.widget_links li{list-style: none;}
.main-widget-label{
color: #fff;
background: #2ad371;
border: none;
top: 2%;
left: 4.5%;
padding: 3px 10px;
font-size: 10px;
line-height: 1.3;
position: absolute;
}
.blogroll{margin-top: 0 !important;}
.blogroll li{padding: 0 !important; font-size: 14px !important; line-height: 16px !important;}
.blogroll li a{
color: #222; text-decoration: none; font-weight: bold;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.blogroll li a img{width: 100%; margin-bottom: 0.4em;}

@media screen and (min-width: 480px){
.blogroll{margin-top: 1em;}
.blogroll li{padding: 0 1em; font-size: 18px !important; line-height: 1.6 !important;}
.main-widget-label{font-size: 11px; line-height: 1.8; top: 3%;}
}



/************************************
** 注目の記事
************************************/
.textwidget .navi-entry-cards{}
.swiper-button-prev , .swiper-button-next , .swiper-pagination{display: none !important;}



/************************************
** 人気記事
************************************/
.popular-entry-cards{display: flex; flex-direction: row; flex-wrap: wrap; text-align: center;}
.popular-entry-card-link{width: 49%; margin-bottom: 0 !important; padding-bottom: 0 !important;}
.popular-entry-card{display: inline-block;}
.widget_popular_entries{justify-content: center !important;}
.widget-entry-cards .a-wrap{padding: 1.5%;}
.widget-title , .archive-title{font-weight: 100 !important; color: #fff; background-color: #2ad371; text-align: center;}
.widget-entry-cards.card-large-image .a-wrap{width: 33%}
.widget-entry-cards.ranking-visible .card-thumb::before{width: 30px; height: 30px; line-height: 30px; font-size: 12px; background-image: url("/provisional/image/ranking.png") !important; color: #000; font-weight: bold; background-color: #cca11f !important;}
@media screen and (max-width: 480px){
.widget-entry-cards.card-large-image .a-wrap{width: 49%}
.widget-entry-card-title , .popular-entry-card-title{font-size: 12px !important; font-weight: 100 !important; text-align: left;}
}



/************************************
** MAGAZINE
************************************/
.cta-button .btn{color: #000; background-color: #ff6;}

/************************************
** 2412リニューアル修正分
************************************/
.header-container{padding: 0 2em;}
.logo-image{text-align: left;}
@media screen and (max-width: 480px){
.header-container{padding: 0;}
.site-name-text{zoom: 50%;}
.site-logo-image{margin-bottom: 1em;}
.widget_links{margin-bottom: 0 !important; border-bottom: #2ad371 1px solid;}
}
/* 記事一覧 */
.home .recommended{overflow: auto;}
.home .recommended .navi-entry-cards {flex-wrap: nowrap; width: 160%; margin-bottom: 0;}
.home .entry-card-thumb , .blogroll li a img{float: none; width: 100%;}
.home .list{flex-direction: row; flex-wrap: wrap;}
.home .entry-card-wrap , .home .widget_links{width: 33%; display: inline-block;}
.home .entry-card-wrap:nth-child(1){width: 100%;}
.home .entry-card{}
.home .entry-card-content{margin-left: 0;}
#list{margin-bottom: 2em;}
/* 関連記事 */
.related-entry-sub-heading{display: block; margin-top: -0.3em; line-height: 1.2em;}

.add-header-contents ,
.navi ,
.home .pagination{
display: none;
}



/************************************
** アーカイブのタイトル変更
************************************/
.archive-title{font-size: 18px; padding: 5px 0; margin: 16px 0;}
@media screen and (max-width: 480px){
.archive-title{font-size: 16px; margin: 0; margin-bottom:6px;}
}