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

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

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

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

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

/* ===== Yapitto!Base Top (Cocoon free friendly) ===== */
/* ==============================
   Yapitto!Base UI (8px/4px grid + Material-like)
============================== */

/* Layout */
.yb-wrap{
  max-width:1120px;
  margin:0 auto;
}

/* Hero */
.yb-hero{
  padding:48px;                 /* 8×6 */
  border-radius:16px;           /* 8×2（14→16） */
  color:#fff;
  background-image:url("http://yapittobase.jp/wp-content/uploads/2026/01/top-bg001-3.jpg");
  background-size:cover;
  background-position:center;
  box-shadow:0 4px 12px rgba(0,0,0,.20); /* 3/8→4/12のイメージ */
}

.yb-hero__inner{
  max-width:760px;
  margin:0 auto;
  text-align:center;
  padding:24px 16px;            /* 24=8×3 / 16=8×2（22/14→24/16） */
}

.yb-kicker{
  letter-spacing:.08em;
  font-weight:700;              /* 800→700（Material寄り） */
  opacity:.95;
  font-size:12px;               /* UIラベル相当 */
  line-height:1.4;
}

.yb-hero__title{
  margin:0 0 8px;               /* 10→8 */
  font-size:clamp(28px,4vw,44px); /* そのまま（見出しは可変でOK） */
  line-height:1.2;
  color:#333;
  font-weight:800;
}

.yb-hero__lead{
  margin:32px auto 0;           /* 18→24 */
  max-width:44em;
  opacity:.95;
  color:#333;
  font-size:16px;               /* Body */
  line-height:1.6;
	    background: rgb(245 245 245 / 75%);
    border-radius: 10px;
    padding:16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .10);
}

/* CTA */
.yb-cta{
  display:grid;
  gap:8px;                      /* 10→8 */
  max-width:520px;
  margin:0 auto;
}

/* Buttons (Material-like: 40px height feel, 14px text) */
.yb-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  text-align:center;
  line-height:1.4;

  border-radius:999px;
  padding:8px 16px;             /* 40px感：8×上下 + 14px文字 */
  min-height:40px;              /* Materialっぽい操作サイズ */

  font-weight:600;              /* 800→600 */
  font-size:14px;               /* Material button text */
  border:2px solid transparent;
  box-shadow:0 4px 12px rgba(0,0,0,.10);
  transition:filter .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}

.yb-btn:hover{ filter:brightness(.98); }

.yb-btn--primary{ background:#ce6755; color:#fff; }
.yb-btn--primary:hover{ background:#f7f7f7; color:#333; }

.yb-btn--yt{
  background:#fff;
  color:#111;
  border-color:rgba(255,255,255,.60);
}

.yb-btn--line{
  background:rgba(255,255,255,.18);
  color:#fff;
  border-color:rgba(255,255,255,.35);
  backdrop-filter:blur(6px);
}

.yb-btn--ghost{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.55);
}

.yb-btn--soft{
  background:#f3ebe9;
  color:#111;
  border-color:rgba(0,0,0,.06);
  box-shadow:none;
}

.yb-btn--line2{ background:#06c755; color:#fff; }
.yb-btn--line2:hover{ background:#fff; color:#06c755; }

.yb-btn--ghost2{
  background:transparent;
  color:#ce6755;
  border-color:#ce6755;
  box-shadow:none;
}
.yb-btn--ghost2:hover{ background:#ce6755; color:#fff; }

/* Section */
.yb-section{
  margin:32px 0;                /* 8×4（OK） */
  padding:24px;                 /* 8×3（OK） */
  border-radius:16px;           /* 14→16 */
  background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.10);
}
.yb-section--tint{ background:rgba(206,103,85,.06); }

.yb-section__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;                      /* 10→8 */
  margin-bottom:16px;           /* 14→16 */
}

/* Headings (Material-ish scale) */
.yb-h2{
  display:inline-block;
  padding:8px 16px;             /* 10/18→8/16 */
  border-left:none;
  border-radius:999px !important;
  background:rgba(206,103,85,.10);
  color:#333;
  font-size:20px;               /* 4の倍数 */
  font-weight:700;
  line-height:1.3;
}

.yb-h3{
  margin:8px 0;                 /* 6/8→8 */
  font-size:24px!important;               /* Body strong */
  font-weight:700!important;
  line-height:1.5!important;
	border-top:none!important;
	border-bottom:none!important;
	border-left:none!important;
	border-right:none!important;
}

.yb-muted{
  color:rgba(0,0,0,.58);
  font-size:14px;               /* 13→14（Material body寄り） */
  line-height:1.6;
}

.yb-link{
  font-weight:600;              /* 800→600 */
  text-decoration:none;
  font-size:14px;
}
.yb-link:hover{ text-decoration:underline; }

.yb-lead{ margin:0 0 8px; font-weight:600; }

/* Recommended */
.yb-reco{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;                     /* 12→16 */
}
.yb-reco__item{
  display:block;
  text-decoration:none;
  color:inherit;
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.yb-reco__img{ display:block; width:100%; height:auto; }
.yb-reco__label{
  display:block;
  padding:8px 16px;             /* 10/12→8/16 */
  font-weight:600;
  font-size:14px;
}

/* Cards */
.yb-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;                     /* 12→16 */
}
.yb-card{
  padding:16px;                 /* 14→16 */
  border-radius:12px;           /* 4の倍数 */
  background:#faf7f5;
  border:1px solid rgba(0,0,0,.06);
}
.yb-tag{
  margin:0 0 8px;               /* 6→8 */
  font-weight:700;              /* 900→700 */
  font-size:12px;               /* UIラベル */
  color:rgba(206,103,85,.95);
  letter-spacing:.02em;
}
.yb-center{ text-align:center; margin-top:16px; } /* 14→16 */

/* YouTube feature */
.yb-feature{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;                     /* 14→16 */
  align-items:center;
}
.yb-thumbLink{
  display:block;
  position:relative;
  overflow:hidden;
}
.yb-thumbImg{
  display:block;
  width:100%;
  height:auto;
  max-width:480px;
border-radius:100%;
border:solid 5px #c70406;
}
.yb-play{
  position:absolute;
  left:16px;                    /* 12→16 */
  bottom:16px;                  /* 12→16 */
  background:rgba(0,0,0,.55);
  color:#fff;
  font-weight:700;
  width:48px;                   /* 44→48（8×6） */
  height:48px;
  border-radius:999px;
  display:grid;
  place-items:center;
}

/* LINE block */
.yb-lineHero{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;                     /* 12→16 */
  align-items:center;
}
.yb-lineHero__img{
  width:100%;
  height:auto;
border-radius:100%;
border: solid 5px #03c755;
  max-width:480px;
}
.yb-lineHero__body{ padding:8px; } /* 4→8 */

/* RSS grid */
.yb-rss__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;                     /* 12→16 */
}
.yb-rss__card{
  display:block;
  text-decoration:none;
  color:inherit;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.yb-rss__img{
  width:100%;
  aspect-ratio:4 / 3;
  background-size:cover;
  background-position:center;
}
.yb-rss__body{ padding:16px; }  /* 12→16 */
.yb-rss__date{ font-size:12px; opacity:.65; font-weight:600; line-height:1.4; }
.yb-rss__title{ font-weight:700; margin:8px 0; font-size:16px; line-height:1.5; }
.yb-rss__excerpt{ font-size:14px; opacity:.75; line-height:1.6; }

/* Pager */
.yb-rss__pager{
  display:flex;
  justify-content:center;
  gap:8px;                      /* 10→8 */
  margin-top:16px;              /* 12→16 */
}
.yb-rss__pager button{
  border-radius:999px;
  padding:8px 16px;             /* 10/14→8/16 */
  min-height:40px;
  border:1px solid rgba(0,0,0,.12);
  background:#faf7f5;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
}
.yb-rss__tab:hover,
.yb-rss__pager button:hover{
	    background: #ce6755;
    color: #fff;
}

/* Tabs */
.yb-rss__tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:8px 0 16px;            /* 6/14→8/16 */
}
.yb-rss__tab{
  border-radius:999px;
  padding:8px 16px;             /* 10/12→8/16 */
  min-height:40px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  font-weight:600;
  font-size:14px;
  line-height:1.4;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.yb-rss__tab.is-active{
  background:#ce6755;
  border-color:#ce6755;
  color:#fff;
}
.yb-rss__tab:hover{ filter:brightness(.98); }

/* PC */
@media (min-width:860px){
  .yb-cta{ grid-template-columns:1fr 1fr; max-width:720px; }
  .yb-btn--primary{ grid-column:1 / -1; }
  .yb-reco{ grid-template-columns:repeat(4,1fr); }
  .yb-cards{ grid-template-columns:repeat(3,1fr); }
  .yb-feature{ grid-template-columns:3fr 2fr; }
  .yb-lineHero{ grid-template-columns:1.2fr .8fr; }

  .yb-rss__grid{
    grid-template-columns:repeat(3, 1fr);
    gap:24px;                   /* 8×3 */
  }
}


.logo-header img {
	max-width:240px;
	width:100%;
    height: auto;
}
@media (max-width: 769px){
.logo-header img {
	max-width:120px;
}
}


/* Promo cards (YouTube + LINE) */
.yb-promoCards{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;               /* 8×2 */
}

.yb-promoCard{
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  border-radius: 16px;     /* 8×2 */
  border: 1px solid rgba(0,0,0,.06);
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

.yb-promoCard__media{
  position: relative;
  display: block;
  overflow: hidden;
}

.yb-promoCard__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* body */
.yb-promoCard__body{
  padding: 16px;           /* 8×2 */
  display: grid;
  gap: 8px;                /* 8×1 */
  align-content: start;
}

/* 見出しの見え方をカード用に少し締める（任意） */
.yb-promoCard .yb-h3{
  margin: 0;
}

/* PC: 横並び2カラム */
@media (min-width: 860px){
  .yb-promoCards{
    grid-template-columns: 1fr 1fr;
    gap: 24px;             /* 8×3 */
  }

  /* PCでは画像と本文を横並びにしてカード感アップ（任意） */
  .yb-promoCard{
    grid-template-columns: 1.1fr .9fr;
    align-items: stretch;
  }

}