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

/************************************
** 子テーマ用のスタイルを書く
************************************/
.main { padding: 0; }
.content { margin-top: 10px; }
.navi-in > ul li { width: 125px; }
.navi-in a { font-size: 15px; }

/* ファーストビュー全体の枠 */
.fv-section {
    background: #000; /* 背景を黒に */
    padding: 20px 0;
}

.fv-inner { 
    max-width: 1200px;
    margin: 0 auto;
    display: flex; 
    gap: 15px; 
    background: #eee; 
    padding: 20px; 
}

/* 左側：メインスライダー */
.fv-main { 
    width: 60%; 
    background: #fff; 
    overflow: hidden;
}
@media screen and (max-width: 834px) {
    .fv-main { 
        aspect-ratio: 5 / 9;
    }
}

.fv-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 右側エリア全体 */
.fv-side { 
    width: 40%; 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
}

/* 右上：アイコンボタン */
.side-icons { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 10px; 
}
.side-icons a { 
    display: block;
    background: #fff; 
    padding: 15px 5px; 
    text-align: center; 
    font-size: 12px; 
    font-weight: bold; 
    color: #333; 
    border-radius: 5px;
    text-decoration: none;
}

/* 右下：サブスライド（重要！） */
.subSwiper { 
    width: 100%; 
    height: 200px; 
    overflow: hidden; 
}
.subSwiper .swiper-slide { 
    width: 200px; /* ここで「少し見える」サイズを調整 */
    background: #000;
}
.subSwiper img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

/* メイン1枚目：ニュース一覧スライドの内装 */
.news-slide { 
    background: #e60012; 
    color: #fff; 
    padding: 40px; 
    height: 100%;
    box-sizing: border-box;
}
.news-slide h3 {
    color: #fff;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.5rem;
}
.news-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.news-list li { 
    border-bottom: 1px solid rgba(255,255,255,0.3); 
    padding: 10px 0; 
}
.news-list li a {
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
}
.news-list .cat { 
    background: #fff; 
    color: #e60012; 
    font-size: 10px; 
    padding: 2px 5px; 
    margin-right: 10px; 
    white-space: nowrap;
}
.news-list .date {
    margin-right: 10px;
    font-size: 14px;
    white-space: nowrap;
}

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

/*834px以下（スマホ・タブレット対応）*/
@media screen and (max-width: 834px){
    .fv-inner {
        flex-direction: column;
    }
    .fv-main, .fv-side {
        width: 100%;
    }
    .subSwiper {
        height: 120px; /* スマホではサブスライドを少し低く */
    }
}

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