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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*YouTube動画の中央配置*/
.video-container{
	margin: 0px auto;
}

/* 記事内画像キャプションのデザイン変更 */
figcaption {
text-align : right;
}

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

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

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

/************************************
** 人気記事 タイトル
************************************/
.widget-entry-card {
font-size: 14px;
line-height: 1.5em;
font-weight: lighter;
}

:root{
  --gl-bg:#F4F6F7;   --gl-ink:#1B2B3A;  --gl-body:#333E48;
  --gl-teal:#1D6A63; --gl-brass:#8A7434; --gl-cta:#1E3A56;
  --gl-line:#E1E6EA; --gl-sub:#64707B;
  --gl-head:'Zen Kaku Gothic New',sans-serif;
  --gl-sans:'Noto Sans JP',sans-serif;
  --gl-mono:'IBM Plex Mono',monospace;
}
body{background:var(--gl-bg);color:var(--gl-body);font-family:var(--gl-sans)}
a{color:var(--gl-teal)}
h1,h2,h3,h4{font-family:var(--gl-head);color:var(--gl-ink)}

.page .sns-share,
.page .sns-follow {
    display: none;
}

/* ===== ヒーロー（2a） ===== */
.gl-hero{position:relative;overflow:hidden;background-color:#FBFCFC;
  background-image:linear-gradient(rgba(27,43,58,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(27,43,58,.055) 1px,transparent 1px);
  background-size:64px 64px}
.gl-hero::before,.gl-hero::after{content:"";position:absolute;border-radius:50%;
  border:1px solid rgba(29,106,99,.18)}
.gl-hero::before{right:-120px;top:-140px;width:520px;height:520px}
.gl-hero::after{right:-60px;top:-80px;width:400px;height:400px;
  border-color:rgba(29,106,99,.14)}
.gl-hero-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;
  gap:56px;align-items:center;max-width:1280px;margin:0 auto;padding:72px 64px 64px}
.gl-kicker{font:500 12px var(--gl-mono);letter-spacing:.16em;
  color:var(--gl-teal);margin:0 0 16px}
.gl-h1{font:900 42px/1.45 var(--gl-head);color:var(--gl-ink);margin:0}
.gl-lead{font:400 16px/2 var(--gl-sans);color:#4A555F;margin:20px 0 0;max-width:520px}
.gl-btns{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.gl-btn{font:700 15px var(--gl-sans);padding:13px 26px;border-radius:6px;
  text-decoration:none;display:inline-block}
.gl-btn-primary{background:var(--gl-cta);color:#fff}
.gl-btn-ghost{background:#fff;color:var(--gl-cta);border:1.5px solid #C6CFD6}
.gl-stats{display:flex;gap:36px;margin-top:38px;
  border-top:1px solid var(--gl-line);padding-top:22px}
.gl-stats b{display:block;font:500 24px var(--gl-mono);color:var(--gl-ink)}
.gl-stats span{font:400 12.5px var(--gl-sans);color:var(--gl-sub)}
.gl-hero-video{background:#fff;border:1px solid var(--gl-line);border-radius:12px;
  overflow:hidden;box-shadow:0 2px 10px rgba(27,43,58,.06)}
.gl-video-frame{aspect-ratio:16/9;background:#16222E}
.gl-video-frame iframe{width:100%;height:100%;border:0;display:block}
.gl-video-meta{padding:16px 20px;display:flex;align-items:center;gap:12px}
.gl-ch{flex:1;font:700 12.5px var(--gl-head);color:var(--gl-ink)}
.gl-ch small{display:block;font:400 11px var(--gl-sans);color:var(--gl-sub)}
.gl-ch-btn{background:var(--gl-cta);color:#fff!important;font:700 12px var(--gl-sans);
  padding:8px 14px;border-radius:6px;text-decoration:none;white-space:nowrap}
@media(max-width:900px){
  .gl-hero-grid{grid-template-columns:1fr;gap:32px;padding:48px 24px}
  .gl-h1{font-size:30px}
}


/* ===== 単元カード（2c）— 写真は上部110pxの帯に限定 ===== */
.gl-units{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  max-width:1280px;margin:0 auto;padding:0 64px 72px}
.gl-unit{background:#fff;border:1px solid var(--gl-line);border-radius:10px;
  overflow:hidden;display:block;text-decoration:none;
  transition:box-shadow .15s ease}
.gl-unit:hover{box-shadow:0 4px 16px rgba(27,43,58,.12)}
.gl-unit-band{position:relative;height:110px}
.gl-unit-band img{width:100%;height:100%;object-fit:cover;display:block}
.gl-unit-band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(27,43,58,.18) 0%,
    rgba(27,43,58,.02) 55%,rgba(255,255,255,.9) 100%)}
.gl-unit-no{position:absolute;left:16px;top:12px;z-index:1;
  font:500 10.5px var(--gl-mono);color:#fff;
  background:rgba(27,43,58,.72);padding:3px 9px;border-radius:99px}
.gl-unit-body{padding:14px 20px 20px}
.gl-unit-body h3{font:700 17px/1.5 var(--gl-head);color:var(--gl-ink);margin:0}
.gl-unit-body p{font:400 12.5px/1.75 var(--gl-sans);color:var(--gl-sub);margin:5px 0 0}
.gl-unit-foot{display:flex;align-items:center;margin-top:13px}
.gl-unit-count{font:500 11px var(--gl-mono);color:var(--gl-sub);
  border:1px solid var(--gl-line);padding:3px 9px;border-radius:99px}
.gl-unit-go{margin-left:auto;font:700 12.5px var(--gl-sans);color:var(--gl-teal)}
@media(max-width:1000px){.gl-units{grid-template-columns:repeat(2,1fr);padding:0 24px 48px}}
@media(max-width:640px){.gl-units{grid-template-columns:1fr}}