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

/************************************
** 子テーマ用のスタイルを書く
************************************/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}
/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
/*スマホコンテンツ上部余白*/
main.main, div.sidebar {
padding: 0px 20px;
margin: 10px 0;
border-width: 0;
}
}

/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
}
/*.main {
padding: 6px 80px;
}*/
.main{ padding: 6px 20px; }         /* 基本（スマホ想定） */
@media (min-width: 1024px){
.main{ padding: 6px 80px; }       /* PCだけ広げる */
}

/* フロント固定ページ：不要メタ非表示 */
.home.page .entry-title,
.home.page .sns-share,
.home.page .post-date,
.home.page .post-update,
.home.page .author-info{
  display:none;
}

/* 見出しリセット */
/* 見出し1 */
.article-header h1{
border-bottom:none;
padding: 0;
background:none;
font-weight: 400;
letter-spacing: 0.06em;
color: rgba(255,255,255,0.85);
font-size: 1.4em;
}

/* =================================
   Frontend only (exclude wp-admin)
   Cocoon h2 / h3 FINAL
================================= */

/* ---- RESET ---- */
.article h2,
.article h3 {
margin: 0;
padding: 0;
border: none;
background: none;
box-shadow: none;
font-weight: normal;
text-decoration: none;
display: block;
}

/* ---- h2 ---- */
.article h2 {
font-size: 22px;
font-weight: 400;
letter-spacing: 0.06em;
line-height: 1.3;
margin: 72px 0 28px;
}

/* ---- h3 ---- */
.article h3 {
font-size: 18px;
font-weight: 400;
letter-spacing: 0.05em;
line-height: 1.4;
margin: 40px 0 16px;
}

/* ---- spacing control ---- */
body:not(.wp-admin) .article h2 + .photo-grid,
body:not(.wp-admin) .article h3 + .photo-grid {
  margin-top: 0;
}
/* ---- RESET ---- */
.sidebar h2,
.sidebar h3,
.under-entry-content h2{
margin: 0;
padding: 0;
border: none;
background: none;
box-shadow: none;
font-weight: normal;
text-decoration: none;
display: block;
}
.sidebar h2 {
font-size: 18px;
font-weight: 400;
letter-spacing: 0.06em;
line-height: 1.3;
border-left: none;
/*color: rgba(255,255,255,0.85);*/
margin: 72px 0 28px;
}
.sidebar h3 {
font-size: 16px;
font-weight: 400;
letter-spacing: 0.05em;
line-height: 1.4;
border-left: none;
/*color: rgba(255,255,255,0.65);*/
margin: 40px 0 16px;
}
/* カテゴリーラベル非表示 */
.entry-card .cat-label,
.related-entry-card .cat-label{
display: none;
}

[class$="card-thumb"] {
margin-top: 0;
margin-bottom: 0;
line-height: 0;
}

/*パンくずリストのアイコンをまとめて非表示（Font Awesome 5）*/
.breadcrumb .fa-home,
.breadcrumb .fa-folder,
.breadcrumb .fa-file {
display: none;
}
/*画像ホバーキャンセル*/
.wp-block-image :hover {
  opacity: 1;
}
/*全てのカード背景を黒*/
.a-wrap,
.widget_recent_entries ul li a {
background-color: #000;
 }
/*全てのコンテナ背景を黒*/
.header-container, 
.main, 
.sidebar, 
.footer {
background-color: #000;
}

.sidebar-menu-content, .widget-entry-cards .a-wrap {
background-color: #000;
}
.rect-vertical-card .related-entry-card-title {
font-size: 14px;
}
.related-entry-card-title, .entry-card-title {
line-height: 1.4;
}
/*topページネーション*/
.pagination-next-link{
display:none;
}
.content-top {
margin-top: 0;
}
.logo-image a { 
display: block;
}
.logo-image img { 
vertical-align:top; 
}
#navi {
margin: 0 auto;
}
/*パンくずサイズ*/
.breadcrumb {
font-size:1.00em;
}

/*サイドバーカテゴリ灰色マージン*/
.widget_categories ul li a {
padding: 2px 10px;
}
/*サイドバーカテゴリ余白*/
#sidebar ul li a {
margin: 4px;
}

/*固定ページ日付なし*/
.post-15677 .date-tags,
.post-525 .date-tags,
.post-262 .date-tags,
.post-5786 .date-tags,
.post-5790 .date-tags,
.post-18431 .date-tags {
display: none;
}

/*キャプション文字*/
.wp-block-image figcaption {
/*margin: 0;*/
color: #fff;
font-size: 0.9em;
/*text-align: center;*/
}

.wp-block-gallery.has-nested-images figure.wp-block-image {
flex-grow: 0;
}

/*エントリーカードタイトル文字*/
.e-card-title {
font-size: 14px;
}
.entry-card-title {
font-weight: 400;
}

/*検索窓丸く*/
.search-box .search-edit {
border-radius: 30px;
font-size: 14px;
}

/*検索窓小さく*/
.search-box{
max-width:90%;
margin-left: auto;
margin-right: auto;
}
/*検索ボタン丸く*/
[type=submit].search-submit {
	top: 0;
	right: 0;
	height: 100%;
	padding: 8px 15px;
	background: #d98030; 
	color: #fff; 
	font-size: 16px;
	font-weight: bold;
	border: none;
	border-radius: 0 50px 50px 0;
	transition:0.3s;
}

/* ブログカードタイトル */
.body .blogcard-title {
font-size: 14px;
font-weight: 400;
}

/* 画面幅480px以下（スマホ） */
@media screen and (max-width: 480px) {
  .blogcard-title {
    font-size: 15px;
    font-weight: 400;
  }

  .blogcard-snippet {
    font-size: 12px;
  }
}
@media screen and (max-width: 480px) {
.entry-card-title {
font-size:12px;
font-weight: 400;
}
}

/* リストのマーカーを変更 */
.widget_recent_entries ul {
list-style-type: none; /* デフォルトのマーカーを消す */
padding-left: 0;
}

.widget_recent_entries li {
position: relative;
padding-left: 15px;
margin-bottom: 8px;
}

/************************************
** ブログカード
************************************/
/*内部ブログカードのフッター非表示*/
.internal-blogcard-footer{
display:none !important;
}
.internal-blogcard-site{
display:none !important;
}
.internal-blogcard-snippet{
display: none;
}
/*背景色*/
.blogcard-wrap {
background-color: #212121;
}
/*枠線なし*/
.blogcard{
border:none;
}
/*.blogcard-label {
top: 0px;
background-color: #ad1e1e;
}*/
.blogcard {
  position: relative;
}

.blogcard-label {
  position: absolute;
  right: 8px;
  bottom: 8px;

  top: auto;
  left: auto;

  font-size: 11px;
  padding: 2px 6px;
  line-height: 1.2;
}

/*.blogcard-thumbnail img {
width: 70%;
}*/
	
/*@media (min-width: 992px) {
.entry-content .video-block {
margin-left: 20px;
margin-right: 20px;
}
}*/

/* グリッドギャラリー */
.media-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin: 20px 0;
}

.media-gallery-grid .media-gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.media-gallery-grid .media-gallery-item img:hover {
    transform: scale(1.05);
}
/* =====================================================
   新着写真一覧：グリッド表示
   ===================================================== */

.photo-grid {
  display: grid;
  grid-auto-flow: row;
  gap: 12px;
}

/* PC：4列 */
@media (min-width: 1024px) {
  .photo-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* タブレット：3列 */
@media (min-width: 768px) and (max-width: 1023px) {
  .photo-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* スマホ：2列 */
@media (max-width: 767px) {
  .photo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =====================================================
   各写真
   ===================================================== */

.photo-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* =====================================================
   日付＋リンク：余白完全除去
   ===================================================== */

/* 親を1つの縦並びにする */
.photo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 日付 */
.photo-date {
  display: block;
  font-size: 0.8em;
  color: #777;
  line-height: 1.1;
  margin: 0 !important;
  padding: 0 !important;
}

/* 掲載ページリンク */
.photo-page-link {
  display: block;
  font-size: 0.85em;
  line-height: 1.1;
  margin: 0 !important;
  padding: 0 !important;
}

/* Gutenberg / テーマ由来の段落余白を完全無効化 */
.photo-item p {
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================
   写真ブロック 基本設計（差し替え版）
   ========================= */

/* 1枚目（アイキャッチ）は余白ゼロ */
.wp-block-image:first-of-type {
  margin-top: 0 !important;
}

/* 2枚目以降：基本リズム（没入感のため少し広め） */
.wp-block-image {
  margin-top: 64px;
  margin-bottom: 24px;
}

/* 5枚ごとに「間」を作る（だれ防止）
   ※6枚目,11枚目,16枚目... から区切る */
.wp-block-image:nth-of-type(5n+6) {
  margin-top: 120px;
}

/* キャプション付きは作品感を強調（必要になったらON）
.wp-block-image:has(figcaption) {
  margin-top: 80px;
  margin-bottom: 32px;
}
*/

/* =========================
   スマホ最適化
   ========================= */

@media (max-width: 768px) {

  /* 1枚目はスマホでも詰める */
  .wp-block-image:first-of-type {
    margin-top: 0 !important;
  }

  /* スマホは少し締める（でも詰めすぎない） */
  .wp-block-image {
    margin-top: 48px;
    margin-bottom: 16px;
  }

  /* 区切りは残す（スマホでも“間”は体感できる程度に） */
  .wp-block-image:nth-of-type(5n+6) {
    margin-top: 80px;
  }

  /* キャプション付き（必要になったらON）
  .wp-block-image:has(figcaption) {
    margin-top: 56px;
    margin-bottom: 24px;
  }
  */
}

.date-group {
  margin-bottom: 48px;
}

.date-label {
  font-size: 12px;
  color: #aaa;
  margin: 32px 0 16px;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
}

.date-label::before,
.date-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #eee;
  margin: 0 12px;
}

/* 投稿ページの日付（投稿日・更新日）を非表示にする */
.single .post-date,
.single .post-update {
  display: none !important;
}

/* インデックスページ（記事一覧）の日付も消したい場合は以下も追加 */
.entry-card .post-date,
.entry-card .post-update {
  display: none !important;
}
/* =============================================
 * モバイル専用ヘッダー（画面幅1023px以下）
 * ============================================= */
@media screen and (max-width: 1023px) {

    /* 1. ヘッダー全域を真っ黒に固定 */
    .mobile-header-menu-buttons {
        background-color: #000 !important; /* 全域を黒 */
        border: none !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* 2. ロゴエリアの背景を親（黒）に合わせる */
    .logo-menu-button {
        background-color: #000 !important; /* ここも黒で統一 */
        margin: 0 !important;
        padding: 0 0 0 10px !important; /* 左側に少し余裕を持たせる */
        flex: 1; /* ロゴエリアを広げる */
    }

    .logo-menu-button a {
        background-color: transparent !important;
        color: transparent !important;
        font-size: 0 !important;
        text-decoration: none !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-height: 50px !important; /* 高さを少し確保して黒帯を太くする */
        height: auto !important;
        line-height: 1 !important;
    }

    /* 3. 英語ロゴ（デザイン維持） */
    .logo-menu-button a::before {
        content: "KETSUMIRU" !important;
        visibility: visible !important;
        color: #e0e0e0 !important;
        font-size: 18px !important;
        font-family: "Times New Roman", serif !important;
        letter-spacing: 0.25em !important;
        text-transform: uppercase;
        display: block !important;
        line-height: 1.1 !important;
        margin-bottom: 2px !important;
    }

    .logo-menu-button a::after {
        content: "The Art of Curves" !important;
        visibility: visible !important;
        color: #767676 !important;
        font-size: 7px !important;
        font-family: "Arial", sans-serif !important;
        letter-spacing: 0.2em !important;
        text-transform: uppercase;
        display: block !important;
        line-height: 1 !important;
    }

    /* 4. 右側ボタンエリアの背景も黒で統一 */
    .mobile-menu-buttons {
        margin-left: auto !important;
        display: flex !important;
        flex-direction: row-reverse !important;
        background-color: #000 !important; /* ここも黒 */
    }

    .mobile-menu-buttons .menu-button {
        background-color: #000 !important;
        color: #767676 !important;
        border: none !important;
    }

    /* 「メニュー」「検索」の文字消去 */
    .menu-caption {
        display: none !important;
    }
}

/* 境界線の完全消去（全体） */
#header, 
.header-in, 
.mobile-header-menu-buttons, 
#navi, 
.menu-button,
#content, 
.main {
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    box-shadow: none !important;
}


/*グローバルメニューのフォントサイズ等変更*/
.navi-in .menu-header .item-label{
font-size: 14px;
font-weight: 400;
}
/* Cocoon グローバルナビ サブメニューを2列表示 */
.navi-in ul ul {
  display: grid !important;
  grid-template-columns: repeat(2, auto) !important;
  column-gap: 24px !important;
  width: max-content !important;
}

/* 縦方向の余白を詰める */
.navi-in ul ul li {
  margin: 0 !important;
}

.navi-in ul ul li a {
  padding: 4px 12px !important;
  line-height: 1.4 !important;
}
#navi .navi-in > .menu-header .sub-menu{
background: #151515;
}

 .widget_categories ul li a {
background-color: #000000;
}

/*.menu-drawer a {
font-size: 1.0em;
line-height: 1.0em;
}*/
.navi-menu-content, .navi-menu-content a
{
background-color: #272424;
color: #fff;
}
.logo-text{
padding: 10px;
}
.breadcrumb, .breadcrumb-caption {
color: #bbb9b8;
}
/* ブログカードサムネイルのアスペクト比を変更 */
.blogcard-thumbnail img {
aspect-ratio: 16 / 9; /* ここを希望の比率に変更 (例: 4/3, 1/1) */
/* height: auto;*/ /* 幅に合わせて高さを自動調整する場合 */ 
}

/* 画像自体が比率を維持するように */
.blogcard-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover; /* 比率を維持しつつ全体をカバー */
}
.archive-title :before {
  display: none;
}
.logo-header a span{
letter-spacing: 18px;
}
/************************
/ SNSフォローボタン
/************************/
#container .sns-follow .sns-buttons a{
  font-size: 22px;
  border: 0;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
#container .sns-follow .sns-buttons{
  gap: 24px;
}
.footer-bottom{
margin-top: 0px;
padding: 0px;
}
/* ページID:28174「最近追加した写真」タイトル調整 */
.page-id-28174 .page-title {
font-size: 1.4rem;   /* 少し控えめ */
font-weight: 500;
}

/* リンク自体に余白を持たせる */
.page-id-28174 .photo-page-link a {
    display: inline-block;
    margin-top: 6px;
}
/* ページa（ID:28174）限定：日付ラベルを少し太字に */
.page-id-28174 .date-label {
    font-weight: 600;
}
/* ページa：サムネイル同士の上下間隔を少し広げる */
.page-id-28174 .photo-item {
    margin-bottom: 14px;
}
/* ページa：日付ラベルの上余白を詰める */
.page-id-28174 .date-label {
    margin-top: 6px;   /* 標準よりかなり詰める */
}


/* 属性・カテゴリーボタン（文字サイズUP・バランス調整版） */
.tag-link,
.cat-link {
    display: inline-block !important;
    background-color: rgba(60, 40, 40, 0.4) !important; 
    color: #ffffff !important; /* 文字サイズUPに合わせて純白に近い色に */
    border: 1px solid #7d6b63 !important; 
    /* 文字が大きくなった分、上下パディングを微調整（4px→5px） */
    padding: 5px 16px !important;
    margin: 6px 4px !important;
    border-radius: 50px !important;
    /* 13pxから15pxへ変更 */
    font-size: 15px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    line-height: 1.5 !important;
    letter-spacing: 0.03em !important;
}

/* ホバー時の挙動（変更なし） */
.tag-link:hover,
.cat-link:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
    opacity: 1 !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-2px);
}

/* 見出し（英語表記）の調整 */
.entry-categories::before,
.entry-tags::before {
    display: block;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 11px; /* 見出しはあえて小さく保つ方がボタンが引き立ちます */
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #888888; /* 少し明るくして読みやすく */
    margin-bottom: 15px;
    text-transform: uppercase;
}

.entry-categories::before {
    content: "— Explore Genre —";
}

.entry-tags::before {
    content: "— Narrow by Attributes —";
}

/* アイコン削除（継続） */
.tag-link::before, .cat-link::before, .fa-tag, .fa-folder, .tag-link span, .cat-link span {
    display: none !important;
}

/* 各エリアの余白 */
.entry-categories {
    margin: 45px 0 25px 0 !important;
    border-top: 1px solid #333;
    padding-top: 30px;
}
/* カテゴリーとタグのエリアに見出しを追加 */
.entry-categories::before,
.entry-tags::before {
    display: block;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #666666; /* 控えめなグレー */
    margin-bottom: 12px;
    text-transform: uppercase; /* 強制的に大文字にしてデザイン性を高める */
}

/* カテゴリー側の見出しテキスト */
.entry-categories::before {
    content: "— Explore Genre —"; /* ジャンルを探索 */
}

/* タグ側の見出しテキスト */
.entry-tags::before {
    content: "— Narrow by Attributes —"; /* 属性で絞り込む */
}

/* 上下の間隔調整 */
.entry-categories {
    margin: 40px 0 25px 0 !important;
    border-top: 1px solid #222; /* 薄い境界線で区切りを明確に */
    padding-top: 25px;
}

.entry-tags {
    margin: 10px 0 40px 0 !important;
}
/* 自動挿入ブロック内の「関連カテゴリー・タグ」だけ余白を詰める */
.mid-content-links__label{
  margin: 0 0 6px 0 !important; /* 下だけ少し */
  padding: 0 !important;
  line-height: 1.2;
}

/* 念のため：ラベル直後のカテゴリ/タグ側の上余白も潰す */
.mid-content-links .entry-categories,
.mid-content-links .entry-tags{
  margin-top: 0 !important;
}

/* 30-60をデスクトップでは非表示 */
.mid-content-links{ display:none !important; }

/* スマホ幅で表示（必要ならブレイクポイント調整） */
@media (max-width: 834px){
  .mid-content-links{ display:block !important; }
}


/* タイトル直下に極薄ライン（PHP不要・HTML不要） */
.single .entry-title{
  position: relative;
  padding-bottom: 10px;          /* 線のための下余白（必要最小） */
  margin-bottom: 8px !important; /* 既存余白と競合しやすいので固定 */
}

.single .entry-title::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;                     /* タイトルの下端に線 */
  height: 1px;
  background: rgba(255,255,255,.08);
}

/* 投稿ページ＋トップページの本文Pの色を落とす */
.single .entry-content p,
.home .entry-content p {
  color: rgba(220,220,220,.78) !important;
}

 /* 新着ショートコード */
.page .new-entry-cards {
	display: flex;
	flex-wrap: wrap;
}

.page .new-entry-card-link {
	width: 50%;
}
/* 新着記事カードのタイトル文字サイズを14pxに */
.new-entry-card-title.widget-entry-card-title.card-title {
  font-size: 14px;
}