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

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

/* 全てのGutenbergブロックの間に統一した余白を設定 */
.wp-block {
    margin-bottom: 24px; /* ブロック間の余白 */
}

/* 特定のブロックだけ余白を調整する例 */
.wp-block-heading, 
.wp-block-paragraph {
    margin-bottom: 32px; /* 見出しや段落の余白を少し広めに */
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .wp-block {
        margin-bottom: 16px; /* モバイルでは余白を狭める */
    }
}

/* ==============テーブル用のCSS================== */
/* テーブル全体のスタイル */
.custom-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid silver; /* テーブル枠の罫線 */
    table-layout: fixed; /* 列幅固定の基盤 */
    position: relative; /* 子要素の基準位置を確保 */
    overflow: visible; /* テーブル外の要素を表示 */
}
/* テーブルセルの中央揃え */
.custom-table td, .custom-table th {
    text-align: center;
}
/* ヘッダー行のスタイル */
.custom-table thead th {
    background-color: #dedede; /* ヘッダーの背景色 */
    color: #333; /* ヘッダーテキストの色 */
    border: 1px solid silver;
    padding: 8px;
    text-align: center;
}
/* データセルのスタイル */
.custom-table td {
    border: 1px solid silver;
    padding: 8px;
    text-align: center;
}
/* 偶数行の背景色 */
.custom-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}
.custom-table-wrapper {
    position: relative;
    overflow: visible !important; /* 親要素のoverflowも解除 */
}
/* 列幅指定用クラス */
    .col-20 { width: 20%; }
    .col-30 { width: 30%; }
    .col-40 { width: 40%; }
    .col-50 { width: 50%; }
    .col-60 { width: 60%; }
    .col-70 { width: 70%; }
    .col-80 { width: 80%; }
    .col-90 { width: 90%; }
    .col-100 { width: 100%; }
    .col-auto { width: auto; } /* 自動調整用 */

/* ======================================== */
/* ホバー画像付きコンテナのスタイル */
.hover-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
    color: #007bff; /* テキスト色 */
    text-decoration: underline; /* 下線 */
}
.hover-container:hover {
    color: #0056b3; /* ホバー時の色 */
}
.hover-image {
    display: none; /* ホバー時以外は非表示 */
    position: absolute;
    top: 50%; /* 親要素の上部を基準に */
    left: 100%; /* 親要素の右側に表示 */
    transform: translateY(-50%); /* 上下中央に調整 */
    width: 450px;/* 表示画像のサイズ */
    height: auto;
    z-index: 9999; /* 最前面に表示 */
    border: 1px solid #ddd; /* 枠線 */
    background: #fff; /* 背景色 */
    padding: 10px; /* 内側の余白 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* シャドウ */
}
.hover-container:hover .hover-image {
        display: block;
    }
.hover-image img {
        width: 100%;
        height: auto;
        border-radius: 5px;
}
/* モバイル対応 */
@media (max-width: 768px) {
    .hover-image img {
        width: 300px;
    }
}

/*------------------------------------------*/
/* リンクスタイル */
a {
  text-decoration: none;
  color: #007bff;
  transition: transform 0.3s ease, color 0.3s ease;
}
a:hover {
  transform: scale(1.1);
  color: #0056b3;
}

/*------------------------------------------*/

/*------------------------------------------*/
/* セクションごとの空白 */
.section {
  margin-bottom: 40px;
}

/*------------------------------------------*/
/* 見出しのスタイル */
.entry-content h2 {
    border: none;
    padding: 10px 20px;
    background: #2C3E50;
    border-left: 5px solid #F1C40F;
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: bold;
    color: #FFFFFF;
    margin: 20px 0 15px;
}
.entry-content h3 {
    font-size: 22px;
    color: #116196;
    border-bottom: 2px solid #F1C40F;
    padding-bottom: 5px;
}
.entry-content h4 {
    font-size: 18px;
    font-style: italic;
    margin: 8px 0;
}

/*------------------------------------------*/
/* サイドバー装飾 */
.sidebar h3 {
	padding: 0.5em;
	color: #494949;
	background: #f7f2f6;
	border-left: solid 5px #f7e1f4;
}

/*------------------------------------------*/
/* ボタンスタイル */
.button {
    background-color: #fff;
    border: 3px solid #995400;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    color: #510026;
    font-weight: 700;
    padding: 1.25rem 4rem;
    transition: .3s;
}
.button:hover {
    background-color: #995400;
    color: #fff;
}

/*------------------------------------------*/
/* カードスタイル */
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  background-color: #f5f5f5;
}
.card {
  flex: 1 1 calc(33.333% - 20px);
  max-width: calc(33.333% - 20px);
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 15px;
  transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
  background-color: #f0f8ff;
}

/*------------------------------------------*/
/* 画像拡大表示 */
.image-container {
    position: relative;
    display: inline-block;
}
.image-container img {
    width: 100%;
    height: auto;
}
.image-container .overlay-text {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 5px;
}

/*------------------------------------------*/
/* メディアクエリ */
@media (max-width: 1081px) {
    .entry-content h1 {
        font-size: 24px;
    }
    .entry-content h2 {
        font-size: 20px;
    }
    .entry-content h3 {
        font-size: 18px;
    }
    th, td {
        font-size: 13px;
        padding: 5px;
    }
}
@media (max-width: 767px) {
    .card-container {
        flex-direction: column;
    }
    .card {
        max-width: 100%;
    }
}


.center-text td, .center-text th {
    text-align: center;
}