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

/************************************
** 子テーマ用のスタイル
** -------------------------------------------------
** 2026-07 整理:
**   これまで「カスタマイザー > 追加CSS(投稿230)」に散らばっていた
**   カスタム指定を、恒久の置き場であるこの style.css に集約した。
**   ・見た目(レンダリング結果)は従来と完全に同一
**   ・見出しは「リセット→再デザイン」の二重管理をやめ、1本のデザインに統合
**   カスタマイザー側は空にしてある(そちらに書くと本ファイルを上書きするため)。
************************************/

/* ■ アピールエリア ーーーーーーーーーー */
/* コンテンツエリア */
.appeal-content {
  background: none;
}
/* アピールエリア 高さ(横幅比で算出 / モバイルは下部メディアクエリで上書き) */
#appeal {
  height: calc(100vw * calc(500 / 1439));
}
/* タイトル */
.appeal-title{
  padding-bottom:1.0em;/*タイトル下の余白*/
  font-weight:normal;/*文字の太さ*/
  font-size:1.1em;/*タイトル文字の大きさ*/
  color:white;/*文字の色*/
}

/* ■ ヘッダーロゴ ーーーーーーーーーー */
.logo{
  text-align:left;
}

/* ■ グローバルメニュー ーーーーーーーーーー */
#navi .navi-in{
  font-weight:bold;
}

/* ■ 見出し ーーーーーーーーーー */
/* 見出し2(元カラー #8fbc8f / 現行 #d4dfbb) */
.article h2 {
  background:#d4dfbb;
  box-shadow: 0px 0px 0px 5px #d4dfbb;
  border: dashed 2px white;
  padding: 0.8em;
}
/* 見出し3(Cocoon既定の枠線をリセットしてから緑の下線だけ) */
.article h3 {
  border-top: none;
  border-right: none;
  border-left: none;
  padding: 0.2em;/*上下左右の余白*/
  border-bottom: solid 5px #d4dfbb;/*下線*/
}
/* 見出し4(斜めストライプの下線) */
.article h4 {
  position: relative;
  padding: 0 0 10px; /* 上下左右0＋下に余白をとって線と分離 */
  border: none;
}
.article h4:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  background: repeating-linear-gradient(
    -45deg,
    #d4dfbb,
    #d4dfbb 2px,
    #fff 2px,
    #fff 4px
  );
  z-index: -1; /* 背景にまわすことで文字と重ならないように */
}

/* ■ 目次 ーーーーーーーーーー */
/* 目次が閉じられたとき、枠ごと非表示にする */
#toc.toc-hidden {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* ■ アプリ紹介(アプリーチ) ーーーーーーーーーー */
.appreach {
  text-align: left;
  padding: 10px;
  border: 1px solid #7C7C7C;
  overflow: hidden;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach p {
  margin: 0;
}
.appreach a:after {
  display: none;
}
.appreach__icon {
  float: left;
  border-radius: 10%;
  overflow: hidden;
  margin: 0 3% 0 0 !important;
  width: 25% !important;
  height: auto !important;
  max-width: 120px !important;
}
.appreach__detail {
  display: inline-block;
  font-size: 20px;
  line-height: 1.5;
  width: 72%;
  max-width: 72%;
}
.appreach__detail:after {
  content: "";
  display: block;
  clear: both;
}
.appreach__name {
  font-size: 16px;
  line-height: 1.5em !important;
  max-height: 3em;
  overflow: hidden;
}
.appreach__info {
  font-size: 12px !important;
}
.appreach__developper, .appreach__price {
  margin-right: 0.5em;
}
.appreach__posted a {
  margin-left: 0.5em;
}
.appreach__links {
  float: left;
  height: 40px;
  margin-top: 8px;
  white-space: nowrap;
}
.appreach__aslink img {
  margin-right: 10px;
  height: 40px;
  width: 135px;
}
.appreach__gplink img {
  height: 40px;
  width: 134.5px;
}
.appreach__star {
  position: relative;
  font-size: 14px !important;
  height: 1.5em;
  width: 5em;
}
.appreach__star__base {
  position: absolute;
  color: #737373;
}
.appreach__star__evaluate {
  position: absolute;
  color: #ffc107;
  overflow: hidden;
  white-space: nowrap;
}

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

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

/*600px以下 — アピールエリアの高さをモバイル向けに固定*/
@media (max-width: 600px) {
  #appeal {
    height: 300px !important;      /* 表示させたい高さに調整 */
    min-height: 300px !important;
    background-size: cover !important;         /* 拡大してちょうど良く切り取る */
    background-position: center center !important; /* 画像の中央を見せる */
  }
}

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