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

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

/***********************************
**** ヘッダーロゴ
************************************/
@media screen and (max-width: 1023px){
.container {
margin-top:-3px;
}
}
.logo-image {
padding:0;
margin-left:1em;
margin-top:1em;
margin-bottom:1em;
max-height:60px;
}
.logo {
text-align: left;
}
.logo-header img {
box-shadow: none!important;
}

/************************************
**** モバイル表示 ヘッダーメニュー・検索アイコン
************************************/
.mobile-menu-buttons{
height:50px;
box-shadow: none;
}
.mobile-menu-buttons > li {
padding-top:0;
}
.menu-button{
margin: auto;
}
.mobile-menu-buttons .menu-button:hover{
background-color:white;
}
span.fas.fa-search::before{
color:#90C31F;
margin-left:1em;
}
span.fas.fa-bars::before{
color:#90C31F;
margin-right:1em;
}
.navi-menu-caption.menu-caption,.home-menu-caption.menu-caption,.search-menu-caption.menu-caption,.top-menu-caption.menu-caption,.sidebar-menu-caption.menu-caption{
display:none;
}

/************************************
**モバイルスライドインメニュー
************************************/
span.fas.fa-times::before{
font-family: "Font Awesome 5 Free";
content: "\f060";
color:#90C31F;
}
ul.menu-drawer:before{
font-size:1.2em;
background: white;
color:#333;
margin-bottom:1em;
border-bottom:3px dotted #90C31F;
content: "メニュー";
}
ul.menu-drawer:after {
background: white;
}
.menu-drawer li {
padding:0;
}
.menu-drawer li{
font-weight: bold;
}
.menu-drawer a{
font-size:1.3em;
background-color:#ffffff;
color:#545454;
margin: .5em 0;
}
.menu-drawer a:hover{
background-color:#f7f7f7;
}
.menu-drawer .sub-menu {
padding:0;
}
.menu-drawer .sub-menu li{
font-size: .9em;
}
.menu-drawer .sub-menu li a::before {
font-family: "Font Awesome 5 Free";
content : "\f105";
color:#7b7b7b;
margin:0 .5em 0 1em;
}

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

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

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

/**********************************************
** 固定ページの新着記事一覧(new_list)を
** 2カラム表示にする
**********************************************/
.dmm-product {
    background-color: #fff;
    border-radius: 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    width: calc(50% - 20px);
    text-align: center;
    cursor: pointer;
}
.dmm-product:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
.dmm-product-image-container {
    height: auto;
    width: 100%;
    overflow: hidden;
}
.dmm-product-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.dmm-product-title {
    font-size: 14px;
    color: #000;
    padding: 10px;
    background-color: #f7f7f7;
    margin: 0;
    height: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.dmm-product-rank {
    font-weight: bold;
    color: #ff0000;
    font-size: 20px;
}
@media (max-width: 1024px) {
    .dmm-product {
        width: calc(50% - 20px);
    }
}
@media (max-width: 600px) {
    .dmm-product {
        width: 100%;
    }
}

/************************************************************/
/************************************
**** 全体のバランス
************************************/
.entry-content {
padding-bottom: 0;
margin-bottom: 0;
}
@media (max-width: 1023px){
article > .entry-content, aritcle > footer.article-footer {
padding: 0 20px;
}
}
@media screen and (max-width: 880px){
.page-body {
font-size: 16px;
}
}
@media screen and (max-width: 480px){
.page-body {
font-size: 15px;
}
}
img{
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.2);
}
a {
 -webkit-tap-highlight-color:rgba(0,0,0,0);
}
.body .article {
margin-bottom: 0;
}

/************************************
**** アピールエリア
************************************/
.appeal{
padding:0 0 .1em;
box-shadow: 0px 1px 4px 0 rgba(0,0,0,.1);
}
div#appeal-in.appeal-in.wrap{
padding:0;
min-height:0px;
max-height:30px;
}
.appeal-content{
background-color:#b5b5b5;
margin:auto;
padding:0;
max-width:100%;
opacity:1;
line-height:1.6;
}
a.appeal-button {
color: #fff!important;
font-size:.85em;
padding:0 23em 0;
margin:0;
max-width:100%;
white-space: nowrap;
box-shadow: none;
}
@media screen and (max-width: 1023px){
a.appeal-button {
padding:0 18em 0 ;
}}
@media screen and (max-width: 834px){
a.appeal-button {
padding:0 13em 0 ;
}
.appeal{
padding:.1em 0 .25em;
}}
@media screen and (max-width: 652px){
a.appeal-button {
padding:0 8em 0 ;
}}
@media screen and (max-width: 500px){
a.appeal-button {
padding:0 6em 0 ;
}}
@media screen and (max-width: 420px){
a.appeal-button {
padding:0 3em 0 ;
}}
.appeal-button:hover {
transform:none;
box-shadow: none;
}

@media (max-width:420px){
.article-header h1 {
font-size: 1.2em;
}
} 

/************************************
**** ヘッダーメニュー
************************************/
.navi-in > ul{
justify-content:flex-start;
}
.navi-in>ul li {
line-height: 40px;
height: 40px;
}
.navi-in a{
font-size:15px;
}
#navi .navi-in a:hover {
transform: none!important;
}
.navi-in > ul .sub-menu a {
padding: 0;
}
.navi-in > ul .sub-menu{
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
}
.sub-menu .caption-wrap {
color:#333;
border-top: dotted #dddddd;
background:#fff;
padding:0 0 0 2em;
margin:0;
}
.navi-in > ul .sub-menu a:hover {
transform: none!important;
}
div#header-container {
box-shadow: none;
}
div.item-label{
font-weight:bold;
}

/************************************
**** おすすめカード
************************************/
div#recommended-in.recommended-in.wrap.cf{
margin-top: 20px;
max-height:220px;
}
@media screen and (min-width: 1024px){
div#recommended-in.recommended-in.wrap.cf{
padding:0 2em;
}}
.widget-entry-cards .a-wrap{
transition: all .2s;
}
.widget-entry-cards .a-wrap:hover {
transform: translateY(-1px);
transition: all .2s;
}
figure.navi-entry-card-thumb.widget-entry-card-thumb.card-thumb{
opacity:.8;
}
.recommended.rcs-center-white-title .a-wrap:hover .card-content {
transition: all .1s;
opacity: 1;
}
.widget-entry-cards.large-thumb-on .card-content{
background: rgba(151, 151, 151, 0);
}
a.navi-entry-card-link.widget-entry-card-link.a-wrap{
border-radius:10px!important;
margin:1em .5em;
background-color:#FFFFFF;
}
div.navi-entry-card-title.widget-entry-card-title.card-title{
color:#333333;
font-weight:bold;
font-size:.8em;
background-color: rgba(255, 255, 255, 0.8);
padding: .6em .5em;
border-radius:30px;
}
@media (max-width:834px){
a.navi-entry-card-link.widget-entry-card-link.a-wrap{
margin:.3em 0em;
}
div.navi-entry-card.widget-entry-card.e-card.cf{
border-radius:10px!important;
overflow:hidden;
max-height:100px;
margin:0 .3em 0;
box-shadow: 0px 1px 4px 0 rgba(0,0,0,.1)!important;
}
.widget-entry-cards.large-thumb-on .a-wrap:hover {
box-shadow:none;
}
}
@media (max-width:834px){
div.navi-entry-card-title.widget-entry-card-title.card-title{
font-size:.6em;
padding: .5em;
}
div#recommended-in.recommended-in.wrap.cf{
margin: .7em .2em .3em;
}
.widget-entry-cards.large-thumb-on .card-content{
background: rgba(151, 151, 151, 0.2);
}
}
main#main.main{
margin:0;
}
.body .navi-entry-cards{
margin-bottom: 0;
}

/************************************
**** サイドバー
************************************/
#sidebar>.widget{
border-radius:10px;
}
.sidebar {
padding-left:0px;
}
@media screen and (max-width: 1205px){
.sidebar {
padding: 0%;
padding-right: 1.5%;
}
}
.widget_search{
padding:0;
}
span.fas.fa-search::before{
color:#90C31F;
}
.sidebar h3{
color:#7b7b7b;
border-radius: 0%;
border-bottom:3px dotted;
border-color:#90C31F;
padding-bottom:0.3em;
margin-top:-0.5em;
margin-bottom:1em;
}
.widget_recent_entries ul li a, .widget_categories ul li a, .widget_archive ul li a, .widget_pages ul li a, .widget_meta ul li a, .widget_rss ul li a, .widget_nav_menu ul li a {
background-color:#f7f7f7;
margin: 6px 0;
padding: 4px 10px;
border-radius:20px;
transition: 0.4s
}
.widget_recent_entries ul li a:hover, .widget_categories ul li a:hover, .widget_archive ul li a:hover, .widget_pages ul li a:hover, .widget_meta ul li a:hover, .widget_rss ul li a:hover, .widget_nav_menu ul li a:hover{
background-color:#90C31F;
color:#fff!important;
}
.tagcloud a{
background-color:#f7f7f7;
}
.tagcloud a:hover{
background-color:#90C31F;
color:#fff!important;
transition: 0.4s ;
}
.nwa .recommended.rcs-card-margin a {
margin: 0 0 1em;
width: 90%;
}
.widget-entry-cards .widget-entry-card-content{
color: #565656;
}

/************************************
**** 以下、「追加CSS」からの統合分
************************************/

/* タグデザイン（xili-tidy-tags対応版） */
.xili-tidy-tags a,
.xili-tidy-tags ul li a,
.tagcloud a {
  background-color: #f7f7f7 !important;
}

.xili-tidy-tags a:hover,
.xili-tidy-tags ul li a:hover,
.tagcloud a:hover {
  background-color: #90C31F !important;
  color: #fff !important;
  transition: 0.4s;
}

/* cta */
.fanza-cta {
  text-align: center;
  margin: 30px 0;
}

.fanza-cta a {
  display: block;
  background-color: #ff3366;
  color: #ffffff;
  font-weight: bold;
  padding: 15px;
  text-decoration: none;
  border-radius: 50px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  transition: 0.3s;
}

.fanza-cta a:hover {
  opacity: 0.85;
}

/* 非選択タブ */
.tab-label-group .tab-label{
  background:#f2f2f2 !important;
  color:#333 !important;
}

/* 選択中タブ（←最重要） */
.tab-label-group .tab-label.is-active{
  background:#90C31F !important;
  color:#ffffff !important;
}

/* ホバー */
.tab-label-group .tab-label:hover{
  background:#cde77a !important;
}

/* home画面のタイトルと日付削除 */
.home.page .entry-title,
.home.page .date-tags,
.home.page .author-info {
  display: none !important;
}

/* DMMキャンペーンバナー枠線等削除 */
.dmm-campaign-banner,
.dmm-campaign-dates .lab{
    border: none !important;
    outline: none !important;
}

.dmm-campaign-banner,
.dmm-campaign-dates,
.dmm-campaign-dates .lab{
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* トップページPC3列・スマホ1列 ＆ ウィジェット3列化 */
@media screen and (min-width: 1024px) {
  /* トップページなどのメイン記事一覧を強制的に3列にする */
  #main .entry-cards {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
  }
  /* 各カードの幅や余白をリセットして綺麗に並べる */
  #main .entry-cards > .a-wrap {
    width: 100% !important;
    margin: 0 !important;
  }
  
  /* メインエリアの中（#main）にあるウィジェット（.widget-entry-cards）を3列にする */
  #main .widget-entry-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}