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

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

/* ===== サイト全体のベーススタイル ===== */

/* 画像のはみ出し防止 */
img {
  max-width: 100%;
  height: auto;
}

/* テーブルのスマホ対応 */
.article-wrap table,
.entry-content table,
table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  white-space: nowrap;
}

/* テーブル内テキストの折り返し */
.article-wrap td,
.article-wrap th,
.entry-content td,
.entry-content th {
  white-space: normal;
  min-width: 80px;
}

/* コードブロックの横スクロール対応 */
pre, code {
  overflow-x: auto;
  max-width: 100%;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

/* 834px以下 */
@media screen and (max-width: 834px) {

  .site-name-text,
  .site-name-text-link {
    font-size: 1.2em !important;
    letter-spacing: 0.05em !important;
  }

  .entry-title {
    font-size: 1.4em;
    line-height: 1.5;
  }

  .intro-box,
  .experience-box,
  .point-box,
  .warning-box,
  .flow-box {
    padding: 12px 14px !important;
    margin: 14px 0 !important;
  }

  .cta-box,
  .cta-box-rakuten {
    padding: 14px !important;
  }

  .verdict-box {
    padding: 14px 16px !important;
  }

  .article-wrap table,
  .entry-content table,
  table {
    white-space: normal;
  }

  .article-wrap td,
  .article-wrap th,
  .entry-content td,
  .entry-content th {
    padding: 8px 10px !important;
    font-size: 0.88em;
  }
}

/* 480px以下 */
@media screen and (max-width: 480px) {

  body {
    font-size: 15px;
  }

  .site-name-text,
  .site-name-text-link {
    font-size: 1.05em !important;
    letter-spacing: 0.02em !important;
  }

  .entry-title {
    font-size: 1.25em;
    line-height: 1.5;
  }

  .article-wrap h2 {
    font-size: 1.2em !important;
    margin-top: 32px !important;
  }

  .article-wrap h3 {
    font-size: 1.05em !important;
    margin-top: 20px !important;
  }

  .intro-box,
  .experience-box,
  .point-box,
  .warning-box,
  .flow-box {
    padding: 10px 12px !important;
    margin: 12px 0 !important;
    font-size: 0.95em;
  }

  .cta-box,
  .cta-box-rakuten {
    padding: 12px !important;
  }

  .cta-box a,
  .cta-box-rakuten a {
    font-size: 0.95em !important;
  }

  .verdict-box {
    padding: 12px 14px !important;
  }

  .article-wrap table,
  .entry-content table,
  table {
    font-size: 0.82em;
  }

  .article-wrap td,
  .article-wrap th,
  .entry-content td,
  .entry-content th {
    padding: 7px 8px !important;
    font-size: 0.85em;
  }

  .ss, .img-ph {
    margin: 8px 0 4px !important;
  }

  .navi-in > ul > li > a {
    padding: 8px 6px;
    font-size: 0.78em;
  }

  .pr-notice {
    padding: 6px 10px !important;
    font-size: 0.75em !important;
  }
}