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

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

/* Google Fonts を読み込む（style.css の先頭に） */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;700&display=swap');

/* 全体にフォント適用（強めに指定） */
body, html, p, li, a, div, input, textarea, h1, h2, h3, h4, h5, h6 {
  font-family: 'M PLUS 1p', sans-serif !important;
  font-weight: 400;
}

/* 太字の処理 */
strong, b {
  font-weight: 700 !important;
}


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

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

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

/* 画像サイズの指定 */
.message {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
}

.message img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    align-self: flex-start; /* 画像の位置を調整 */
}

/* 吹き出しの基本デザイン（全て統一） */
.message p {
    border: 2px solid #d3d3d3; /* 枠線もグレー */
    padding: 12px 16px;
    border-radius: 20px; /* 角を丸く */
    max-width: 70%;
    position: relative; /* 吹き出しのしっぽ用 */
}


/* オオハシ（左画像＋左吹き出し） */
.message.oohashi {
    flex-direction: row; /* 画像を左、吹き出しを右 */
    justify-content: flex-start;
}

/* オオハシの画像は左側 */
.message.oohashi img {
    margin-right: 15px;
    margin-left: 0;
}

/* オオハシの吹き出し枠線を黄色に */
.message.oohashi p {
    border: 2px solid #d3d3d3 !important;
    text-align: left;
    max-width: 70%; /* 吹き出しの幅を調整 */
}


/* インコ（右画像＋右吹き出し） */
.message.inko {
    flex-direction: row-reverse; /* 画像を右、吹き出しを左 */
    justify-content: flex-end;
}

/* インコの画像（右側） */
.message.inko img {
    margin-left: 15px !important;
    margin-right: 0 !important;
}

/* インコの吹き出し枠線を水色に */
.message.inko p {
    border: 2px solid #d3d3d3 !important;
    text-align: left;
    max-width: 70%; /* 吹き出しの幅を調整 */
}


/* ピラニア（左画像＋左吹き出し） */
.message.piranha {
    flex-direction: row; /* 画像を左、吹き出しを右 */
    justify-content: flex-start;
}

/* ピラニアの画像（左側） */
.message.piranha img {
    margin-right: 15px;
    margin-left: 0;
}

/* ピラニアの吹き出し枠線を赤茶色に */
.message.piranha p {
    border: 2px solid #a0522d !important; /* セピアブラウン */
    text-align: left;
    max-width: 70%;
}
/* カワイルカちゃん（右画像＋右吹き出し） */
.message.pinkdolphin {
    flex-direction: row-reverse; /* 画像を右、吹き出しを左 */
    justify-content: flex-end;
}

/* カワイルカちゃんの画像（右側） */
.message.pinkdolphin img {
    margin-left: 15px !important;
    margin-right: 0 !important;
}

/* カワイルカちゃんの吹き出し枠線をピンクに */
.message.pinkdolphin p {
    border: 2px solid #ffb6c1 !important; /* ライトピンク */
    text-align: left;
    max-width: 70%;
}

/************************************
** 書籍のおすすめの固定ページ用
************************************/
.book-section {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}

.book-card {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  overflow: hidden;
  margin-bottom: 30px;
}

.book-card img {
  width: 300px;
  height: auto;
  object-fit: cover;
}

.book-content {
  flex: 1;
  padding: 20px;
}

.book-content h3 {
  font-size: 1.5em;
  margin-bottom: 15px;
  color: #333;
}

.book-content p {
  font-size: 1em;
  line-height: 1.8;
  color: #555;
  margin-bottom: 20px;
}

.book-content .btn {
  display: inline-block;
  padding: 12px 24px;
  background-color: #4CAF50;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.3s;
}

.book-content .btn:hover {
  background-color: #45a049;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .book-card {
    flex-direction: column;
  }

  .book-card img {
    width: 100%;
  }
}
.risk-table {
  width: 100%;
  max-width: 600px;
  margin: 20px auto;
  border-collapse: collapse;
  border: 1px solid #ccc;
  font-size: 14px;
}

.risk-table th,
.risk-table td {
  padding: 8px 12px;
  border: 1px solid #ccc;
  text-align: left;
}

.risk-caption {
  text-align: left;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 8px;
}

/* Dashiconsが含まれる要素にはフォントを上書きしない */
.dashicons,
.ab-icon:before {
  font-family: "Dashicons" !important;
}