@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){
  /*必要ならばここにコードを書く*/
}


/* ===== ピラー/特集 カードグリッド (jo-cards) 2026-07-12 ===== */
.jo-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:1.4em 0}
.jo-card{display:flex;flex-direction:column;border:1px solid #e3e8e1;border-radius:12px;overflow:hidden;background:#fff;text-decoration:none;box-shadow:0 1px 4px rgba(0,0,0,.06);transition:transform .2s,box-shadow .2s}
.jo-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.13);transform:translateY(-3px)}
.jo-card__img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#eef4ef}
.jo-card__body{padding:11px 13px 13px}
.jo-card__ttl{display:block;font-weight:700;color:#22302a;line-height:1.45;font-size:.96em}
.jo-card__desc{display:block;color:#6a7b70;font-size:.84em;margin-top:5px;line-height:1.5}
@media(max-width:480px){
 .jo-cards{grid-template-columns:1fr;gap:11px}
 .jo-card{flex-direction:row;align-items:stretch}
 .jo-card__img{width:42%;aspect-ratio:16/9;flex:none}
 .jo-card__body{flex:1;padding:9px 11px;display:flex;flex-direction:column;justify-content:center}
}


/* ===== フロント サイトデザイン (jo-home) 2026-07-12 ===== */
.jo-home{margin-top:.2em}
/* ヒーロー */
.jo-hero{position:relative;border-radius:18px;overflow:hidden;margin:0 0 1.4em;min-height:320px;display:flex;align-items:center}
.entry-content .jo-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;margin:0;max-width:none;border-radius:0}
.jo-hero__ov{position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,rgba(18,46,30,.93) 0%,rgba(18,46,30,.68) 42%,rgba(18,46,30,.24) 72%,rgba(18,46,30,.05) 100%)}
.jo-hero__in{position:relative;z-index:2;padding:38px 34px;color:#fff;max-width:660px}
.jo-hero__t{font-size:2em;font-weight:800;line-height:1.32;margin:0 0 .4em;letter-spacing:.01em;color:#fff}
.jo-hero__s{font-size:1em;line-height:1.75;color:#e9f2eb;margin:0 0 1.2em}
.jo-hero__btns{display:flex;gap:11px;flex-wrap:wrap}
.entry-content .jo-btn{display:inline-block;padding:12px 22px;border-radius:999px;font-weight:700;font-size:.92em;text-decoration:none;transition:transform .15s,opacity .15s}
.entry-content .jo-btn:hover{transform:translateY(-2px);opacity:.95;text-decoration:none}
.jo-btn--p{background:#f3a94b;color:#3a2600!important}
.jo-btn--g{background:rgba(255,255,255,.14);color:#fff!important;border:1px solid rgba(255,255,255,.55)}

/* セクション見出し */
.jo-sec{text-align:center;margin:2.4em 0 1.1em}
.entry-content .jo-sec .jo-h2{font-size:1.5em;font-weight:800;color:#22302a;line-height:1.3;display:inline-block;position:relative;background:none!important;background-color:transparent!important;border:none!important;border-radius:0!important;box-shadow:none!important;padding:0!important;margin:0 auto!important}
.entry-content .jo-sec .jo-h2::before{content:none!important;display:none!important;background:none!important;border:none!important;width:auto!important;height:auto!important}
.entry-content .jo-sec .jo-h2::after{content:""!important;display:block!important;position:static!important;width:44px!important;height:3px!important;background:#f3a94b!important;border:none!important;border-radius:2px!important;margin:11px auto 0!important;padding:0!important}
.jo-sec__d{color:#6a7b70;font-size:.9em;margin:.7em 0 0;line-height:1.6}

/* カテゴリタイル(写真+オーバーレイ) */
.jo-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:15px;margin:1.2em 0}
.jo-tile{position:relative;display:block;aspect-ratio:4/3;border-radius:15px;overflow:hidden;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.10)}
.jo-tile:hover{text-decoration:none}
.entry-content .jo-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease;margin:0;max-width:none;border-radius:0}
.jo-tile:hover img{transform:scale(1.07)}
.jo-tile__ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,18,12,.86) 0%,rgba(8,18,12,.44) 44%,rgba(8,18,12,.06) 100%)}
.jo-tile__lb{position:absolute;left:15px;right:15px;bottom:13px;color:#fff}
.jo-tile__t{display:block;font-weight:800;font-size:1.12em;letter-spacing:.02em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.45)}
.jo-tile__d{display:block;font-size:.79em;color:#e7efe9;margin-top:4px;line-height:1.45}

@media(max-width:480px){
 .jo-hero{min-height:0}
 .jo-hero__in{padding:24px 18px}
 .jo-hero__t{font-size:1.42em}
 .jo-hero__s{font-size:.88em}
 .jo-tiles{grid-template-columns:1fr 1fr;gap:10px}
 .jo-tile{border-radius:12px}
 .jo-tile__t{font-size:.95em}
 .jo-tile__d{display:none}
}

/* フロントのみ: 重複タイトル/パンくず/日付を隠しランディング化 */
.home .entry-title,.home .breadcrumb,.home .date-tags,.home .entry-meta{display:none!important}
.home .entry-content{margin-top:0}

/* モバイル: 上部グローバルナビ(menu-mobileの2列重複)を非表示→☰ドロワーに一本化(2026-07) */
@media screen and (max-width:1023px){
  #navi{display:none!important}
}

/* 特集カード(フロント): モバイルでアイキャッチのバナー文字が切れないよう縦カードで全面表示 */
@media screen and (max-width:480px){
  .home .jo-cards{grid-template-columns:1fr}
  .home .jo-card{flex-direction:column}
  .home .jo-card__img{width:100%;aspect-ratio:1200/630}
  .home .jo-card__body{flex:none;padding:11px 13px 13px;display:block}
}