@charset "UTF-8";

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

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

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

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

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

@media screen and (max-width: 480px){
/* sunaoblog mobile v6 */
#navi{ display: none !important; }
#content-top{ margin: 16px 0 !important; padding: 20px 16px 4px !important; }
body.home .s5{ margin: 0 !important; padding: 0 !important; }
body.home .s5-in{ padding: 0 !important; margin: 0 !important; }
body.home .s6, body.home .s6.s6-rest{ margin: 0 !important; padding: 0 !important; }
#custom_html-5{ margin: 0 !important; padding: 0 !important; }
#custom_html-10{ margin: 0 !important; padding: 0 16px !important; }
#main, .main{ margin: 0 !important; padding: 0 !important; }
.s6pk, .s6lt, .s6pp{ margin: 16px 0 !important; padding: 0 !important; }
.s5-grid{ display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: 8px !important; padding: 0 !important; margin: 0 !important; }
.s5-grid .s5-card:nth-child(1){ grid-column: 1 / 4 !important; }
.s5-grid .s5-card:nth-child(2){ grid-column: 4 / 7 !important; }
.s5-grid .s5-card:nth-child(3){ grid-column: 1 / 3 !important; }
.s5-grid .s5-card:nth-child(4){ grid-column: 3 / 5 !important; }
.s5-grid .s5-card:nth-child(5){ grid-column: 5 / 7 !important; }
.s5-card{ width: 100% !important; height: 100% !important; margin: 0 !important; padding: 6px !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; text-align: center !important; background: #fff !important; border-radius: 8px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.s5-card .s5-ill{ width: 100% !important; margin-bottom: 4px !important; }
.s5-card .s5-ill img{ width: 100% !important; height: auto !important; object-fit: cover !important; border-radius: 4px; }
.s5-card .s5-body{ width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; }
.s5-card .s5-num{ font-size: 9px !important; padding: 1px 6px !important; border-radius: 8px; }
.s5-grid .s5-card:nth-child(-n+2) .s5-num{ font-size: 11px !important; }
.s5-grid .s5-card:nth-child(-n+2) .s5-tt{ font-size: 14px !important; margin: 4px 0 2px !important; line-height: 1.2; font-weight: 700; }
.s5-grid .s5-card:nth-child(-n+2) .s5-d{ font-size: 11px !important; margin: 0 !important; line-height: 1.3; }
.s5-grid .s5-card:nth-child(n+3) .s5-tt{ font-size: 12px !important; margin: 4px 0 0 !important; line-height: 1.2; font-weight: 700; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; }
.s5-grid .s5-card:nth-child(n+3) .s5-d{ display: none !important; }
.s6gr{ display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 4px !important; padding: 4px !important; }
.s6cd{ width: 100% !important; margin: 0 !important; padding: 4px !important; box-sizing: border-box !important; background: #fff; border-radius: 4px; }
.s6cdi img{ width: 100% !important; height: auto !important; display: block !important; border-radius: 3px; }
.s6cdt{ font-size: 11px !important; line-height: 1.3 !important; margin: 4px 0 0 !important; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; }
.s6cdc{ font-size: 9px !important; margin: 0 !important; color: #FF6B35; }
.s6lt::after{ content: "もっと見る >>"; display: block; background: #FF6B35; color: white; text-align: center; padding: 12px; margin: 12px 8px; border-radius: 6px; font-weight: 700; font-size: 14px; }
body.home #main > .list, body.home #main > .list.ect-entry-card, .ect-entry-card.list{ display: flex !important; flex-wrap: wrap !important; margin: 0 !important; padding: 0 !important; gap: 4px !important; }
.ect-entry-card .entry-card-wrap{ width: calc(33.333% - 3px) !important; margin: 0 !important; padding: 4px !important; float: none !important; box-sizing: border-box !important; background: #fff !important; border-radius: 4px !important; }
.ect-entry-card .entry-card-thumb{ width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; }
.ect-entry-card .entry-card-thumb img{ width: 100% !important; height: auto !important; display: block !important; }
.ect-entry-card .entry-card-content{ margin: 0 !important; padding: 4px 0 0 !important; }
.ect-entry-card .entry-card-title{ font-size: 11px !important; line-height: 1.3 !important; margin: 0 !important; padding: 0 !important; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ect-entry-card .entry-card-snippet{ display: none !important; }
.ect-entry-card .entry-card-meta{ display: none !important; }
.ect-entry-card .cat-label{ font-size: 9px !important; padding: 1px 4px !important; }
#go-to-top, .go-to-top{ display: none !important; }
#footer::before{/* PAGE TOP */ content: "▲ PAGE TOP"; display: block; background: #FF6B35; color: white; text-align: center; padding: 14px; font-size: 13px; font-weight: 700; width: 100%; box-sizing: border-box; }
#footer .menu-footer{ display: flex !important; flex-direction: row !important; justify-content: center !important; flex-wrap: wrap !important; gap: 0 !important; padding: 0 !important; margin: 0 !important; }
#footer .menu-footer li{ margin: 0 !important; padding: 0 !important; list-style: none !important; flex: 0 0 auto !important; width: auto !important; display: inline-flex !important; }
#footer .menu-footer li a{ padding: 12px 12px !important; font-size: 12px !important; line-height: 1 !important; display: block !important; }
#footer .menu-footer li:not(:last-child)::after{ content: "/"; color: #999; align-self: center; }
}