@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&display=swap');

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

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

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

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

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

/* --- CINEMORE風の基本設定 --- */

/* 1. フォントと背景色の設定 */
body {
    background-color: #ffffff; /* 真っ白な背景 */
    color: #333333;           /* 真っ黒ではなく、少し柔らかな墨色 */
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "游ゴシック",  Meiryo, sans-serif;
    line-height: 1.8;          /* 行間を広めに取って読みやすく */
    -webkit-font-smoothing: antialiased; /* 文字をクッキリ見せる */
}

/* 2. 記事タイトルの装飾（洗練された印象に） */
.entry-card-title {
    font-size: 18px !important;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 10px;
    color: #1a1a1a;
}

/* 3. カードのデザイン（枠線や影を消してミニマルに） */
.entry-card-wrap {
    border: none !important;      /* 枠線を消す */
    box-shadow: none !important;  /* 影を消す */
    background-color: transparent !important;
    margin-bottom: 40px !important; /* 記事同士の間隔を広く */
}

/* 4. カテゴリーラベル（小さく、さりげなく） */
.cat-label {
    background-color: #000 !important; /* 黒背景に白文字 */
    color: #fff !important;
    font-size: 10px !important;
    padding: 2px 8px !important;
    border-radius: 0 !important;       /* 角を丸めない */
    text-transform: uppercase;         /* 英語なら大文字に */
}

/* 5. リンクの色（ホバーした時に少し薄くする） */
a {
    color: #333;
    text-decoration: none;
    transition: opacity 0.3s;
}

a:hover {
    opacity: 0.7;
    color: #000;
}

/* --- ヘッダーメニューのカスタマイズ（黒背景・白文字版） --- */

/* 1. メニュー全体の背景を黒に */
#navi {
    background-color: #1a1a1a !important; /* フッターと同じ、少し柔らかい墨色 */
    border-top: none !important;          /* 枠線をなくしてフラットに */
    border-bottom: none !important;
}

/* 2. メニュー項目の文字デザイン（白抜き） */
.navi-in a {
    color: #ffffff !important;     /* 文字色を白に */
    font-size: 13px !important;
    font-weight: 400;              /* 白文字は少し細い方が上品に見えます */
    letter-spacing: 0.15em;        /* 映画のクレジット風に少し広め */
    padding: 15px 20px !important;
    text-transform: uppercase;
}

/* 3. マウスを乗せた時の動き */
.navi-in a:hover {
    background-color: transparent !important;
    color: #aaaaaa !important;     /* ホバー時は少し薄いグレーに沈ませる */
    transition: 0.3s;
}

/* 4. 現在表示しているページのメニューを強調 */
.current-menu-item a {
    color: #ffffff !important;
    font-weight: 700;
    position: relative;
}

/* （おまけ）現在地のメニューの下に細い白線を引く */
.current-menu-item a::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 1px;
    background-color: #fff;
}

/* --- カルーセルをCINEMORE風に --- */

/* 1. 全体の高さを出し、角丸をなくす */
.carousel-content {
    background-color: #000 !important; /* 背景を黒に */
}

.carousel-entry-card {
    border-radius: 0 !important;      /* 角を丸めない */
    border: none !important;          /* 枠線を消す */
    margin: 0 !important;             /* 隙間を詰めて重厚感を出す */
	position: relative !important; /* これが抜けているとタイトルが中央に寄ります */
    overflow: hidden;
}

/* 3. 画像自体の余白を調整 */
.carousel-entry-card-thumb {
    margin: 0 !important;
}

/* 2. 画像に黒いフィルターをかけて文字を見やすくする */
.carousel-entry-card-thumb::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 50%);
    z-index: 1;
}

/* 3. タイトルのデザイン（中央寄せ・白文字・細め） */
/* 2. タイトルの配置を各カード内に収める */
.carousel-entry-card-title {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 15px 10px !important; /* 画像の上に被る余白 */
    background: linear-gradient(transparent, rgba(0,0,0,0.7)); /* 文字を読みやすくする影 */
    color: #fff !important;
    font-size: 14px !important;
    text-align: left; /* 左寄せの方がCINEMOREっぽくなります */
    z-index: 10;
}
/* 4. カテゴリーラベルを消す、または目立たなくする */
.carousel-entry-card .cat-label {
    display: none; /* シンプルにするために一旦非表示 */
}

/* 5. 左右の移動ボタンをシンプルに */
.slick-prev, .slick-next {
    z-index: 10;
    width: 40px;
    height: 40px;
}

/* --- フルワイド・1カラムの最適化 --- */

/* 1. 記事一覧の余白を調整 */
#main {
    padding: 0 !important;
    margin: 0 auto;
    border: none !important;
    background-color: transparent !important;
}

/* 2. 記事カードを3カラム（3列）で美しく並べる */
/* 画面幅が広い時 */
@media screen and (min-width: 1024px) {
    .list.entry-card-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3列に固定 */
        gap: 40px 30px;                       /* 縦横の隙間 */
    }
}

/* 3. 記事カード内の画像を映画ポスター風の比率にする */
.entry-card-thumb img {
    aspect-ratio: 16 / 9; /* 横長にするなら16/9、ポスター風なら2/3 */
    object-fit: cover;
    width: 100%;
}

/* 4. コンテンツ全体の最大幅を制限して間伸びを防ぐ */
.content {
    max-width: 1200px;
    margin: 0 auto;
}

/* --- スマホ表示（480px以下）のカスタマイズ --- */
@media screen and (max-width: 480px) {
    
    /* 1. リストの横並びを解除して縦並びにする */
    .list.entry-card-list {
        display: block !important;
    }

    /* 2. カード全体の余白と枠線を調整 */
    .entry-card-wrap {
        margin-bottom: 30px !important;
        padding: 0 !important; /* 横の余白をなくして画像を端まで広げる */
    }

    /* 3. 画像を大きく表示（画面端までフルワイド） */
    .entry-card-thumb {
        float: none !important;    /* 横並びを解除 */
        width: 100% !important;    /* 幅をいっぱいに */
        margin: 0 0 15px 0 !important;
    }

    .entry-card-thumb img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;      /* 映画らしい比率を維持 */
        object-fit: cover;
    }

    /* 4. タイトルなどのテキスト部分 */
    .entry-card-content {
        margin: 0 !important;
        padding: 0 15px;           /* テキストだけ左右に少し余白を作る */
        float: none !important;
        width: 100% !important;
    }

    .entry-card-title {
        font-size: 17px !important;
        line-height: 1.5;
        margin-bottom: 8px;
    }
    
    /* 5. 抜粋文や日付などの調整（お好みで） */
    .entry-card-snippet, .post-date {
        font-size: 12px;
        opacity: 0.8;
    }
}

/* --- フッターのカスタマイズ --- */

/* 1. フッター全体の余白を広く取り、文字を小さく */
#footer {
    padding: 60px 0 40px; /* 上に広めの余白を置いて高級感を出す */
    font-size: 12px;      /* 小さめの文字がスタイリッシュ */
    letter-spacing: 0.05em;
}

/* 2. フッターメニューの装飾 */
#footer-navi ul {
    margin-bottom: 30px;
}

#footer-navi a {
    color: #999 !important; /* 少し沈んだグレーにして落ち着かせる */
    transition: 0.3s;
    text-decoration: none;
}

#footer-navi a:hover {
    color: #fff !important; /* ホバーで白く光る */
}

/* 3. コピーライト（一番下の著作権表示） */
.source-org {
    color: #666;
    font-weight: 300;
    text-transform: uppercase;
}

/* 4. （オプション）フッターロゴを置く場合の間隔 */
.footer-logo {
    margin-bottom: 20px;
}


/* --- CINEMA NOTE特製：作品データボックスのデザイン --- */
.cn-movie-data-box {
    border: 1px solid #e0e0e0; /* 細くて上品なグレーの枠線 */
    padding: 25px 30px;
    margin: 40px 0;
    background-color: #fafafa; /* 真っ白ではなく、わずかに色をつけて独立させる */
}

/* 上部のタイトルと星の並び */
.cn-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #1a1a1a; /* 下に黒い直線を引いて引き締める */
    padding-bottom: 12px;
    margin-bottom: 15px;
}

.cn-title {
    font-size: 20px !important;
    font-weight: 600;
    margin: 0 !important;
    border: none !important; /* Cocoon標準の見出し装飾を消す */
    padding: 0 !important;
}

/* ★評価の装飾 */
.cn-score-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cn-stars {
    display: inline-block;
    position: relative;
    color: #ddd; /* 空の星の色 */
    font-size: 18px;
    letter-spacing: 2px;
}

.cn-stars > span {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #1a1a1a; /* 埋まった星の色（あえて黄色にせず黒にするのが雑誌風） */
}

.cn-score-num {
    font-weight: bold;
    font-size: 20px;
    font-family: 'Cinzel', serif; /* ここにもCinzelを使って統一感を */
}

/* 下部のリスト装飾 */
.cn-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: #333;
}

.cn-list li {
    margin-bottom: 6px;
    display: flex;
}

.cn-list li strong {
    font-weight: 500;
    width: 70px; /* 項目名の幅を揃えて美しく見せる */
    letter-spacing: 0.1em;
}

.cn-colon {
    margin: 0 15px 0 5px;
}

/* スマホ用の調整 */
@media screen and (max-width: 480px) {
    .cn-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .cn-movie-data-box {
        padding: 20px;
    }
}

/* --- タグのデザインを洗練させる --- */
.tag-link {
    background-color: transparent !important; /* 背景を透明に */
    border: 1px solid #ccc !important;        /* 細いグレーの枠線 */
    color: #666 !important;                   /* 落ち着いた文字色 */
    font-size: 11px !important;               /* 少し小さめに */
    padding: 3px 10px !important;
    border-radius: 20px !important;           /* 角を丸くしてスタイリッシュに */
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: 0.3s;
}

/* マウスを乗せた時の変化 */
.tag-link:hover {
    border-color: #1a1a1a !important;         /* 枠線を黒に */
    color: #1a1a1a !important;                /* 文字色を黒に */
}

/* トップページの記事カードに出るタグを非表示にする場合（よりシンプルにしたい時） */
/*
.entry-card-tags {
    display: none;
}
*/

/* --- スマホ表示でメインヘッダーのロゴと余白を非表示にする --- */
@media screen and (max-width: 1023px) {
    
    /* 1. メインのロゴ部分を完全に消す */
    .logo-header {
        display: none !important;
    }
    
    /* 2. ロゴが消えた後に残る「ヘッダーの空白」を詰める */
    .header-in {
        padding: 0 !important;
        min-height: 0 !important;
    }
}

/* --- スマホ表示時の記事本文・タイトルの左右余白を調整 --- */
@media screen and (max-width: 768px) {
    
    /* 1. 記事のタイトルエリアと本文エリアに余白（18px）を設定 */
    .article-header,
    .entry-content,
    .entry-footer {
        padding-left: 18px !important;
        padding-right: 18px !important;
        box-sizing: border-box;
    }

    /* 2. もし記事内の画像（アイキャッチなど）は画面いっぱいに広げたい場合 */
    .entry-content figure.wp-block-image,
    .entry-content img {
        margin-left: -18px !important;
        margin-right: -18px !important;
        max-width: calc(100% + 36px) !important;
        width: auto;
    }
}

/* --- トップページ（記事一覧）のカードデザイン洗練 --- */

/* 1. カードの枠線や背景を完全に消す */
.list .entry-card-wrap {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 40px !important; /* カード同士の縦の余白を広めにとる */
}

/* 2. 画像（サムネイル）をシャープに・ホバー時の動き */
.list .entry-card-thumb {
    overflow: hidden;
    margin-bottom: 15px !important; /* 画像とタイトルの間の余白 */
}

.list .entry-card-thumb img {
    border-radius: 0 !important; /* 角の丸みを消して映画のスクリーンのように */
    aspect-ratio: 16 / 9;        /* 映画らしい比率 */
    object-fit: cover;
    transition: transform 0.6s ease; /* ズームの動きを滑らかに */
}

/* マウスを乗せた時に画像がゆっくりズームする（高級感のある動き） */
.list .entry-card-wrap:hover .entry-card-thumb img {
    transform: scale(1.05);
}

/* 3. タイトルのデザイン */
.list .entry-card-title {
    font-size: 18px !important;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 10px;
}

/* 4. 日付やカテゴリラベルの調整 */
.list .post-date, 
.list .entry-category {
    font-size: 11px !important;
    color: #999 !important;
    letter-spacing: 0.05em;
    background: none !important; /* カテゴリの背景色を消す */
    padding: 0 !important;
}

/* カテゴリラベルに薄い枠線をつけてスタイリッシュに */
.list .entry-category {
    border: 1px solid #ccc;
    padding: 2px 8px !important;
    border-radius: 20px;
    margin-right: 10px;
}

/* --- スライダー（カルーセル）と記事一覧の間の余白 --- */

/* PC表示：たっぷりと余白をとって雑誌のような間合いを作る */
.carousel {
    margin-bottom: 80px !important; /* 数字を大きくするほど隙間が広がります */
}

/* スマホ表示：PCよりは少し狭めにして間延びを防ぐ */
@media screen and (max-width: 768px) {
    .carousel {
        margin-bottom: 50px !important;
    }
}

/* --- PCの固定メニュー（追従ナビ）に影をつけて立体感を出す --- */
@media screen and (min-width: 1023px) {
    #navi {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
    }
}

/* --- スマホで最新記事（1つ目）だけ1カラム、以降は2カラム --- */
@media screen and (max-width: 768px) {
    
    /* 1番目の記事だけを幅100%にして目立たせる */
    .list > .a-wrap:first-of-type {
        width: 100% !important;
        margin-bottom: 30px !important;
    }

    /* 1番目の記事のタイトルを少し大きくする */
    .list > .a-wrap:first-of-type .entry-card-title {
        font-size: 18px !important;
        font-weight: bold;
        margin-top: 10px;
    }

    /* 2番目以降（2列部分）のタイトルサイズを整える */
    .list > .a-wrap:not(:first-of-type) .entry-card-title {
        font-size: 13px !important;
        line-height: 1.4;
    }
}