@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){
  /*必要ならばここにコードを書く*/
}
/* =============================
   Yura Bloom Design - トップページ
   ============================= */

:root {
  --cream: #F2E4DC;
  --brown: #8B6F5E;
  --dark-brown: #3D2B1F;
  --sage: #9CAF9A;
  --white: #fff;
}

body {
  font-family: 'Shippori Antique B1', serif;
  color: var(--dark-brown);
  background: var(--white);
}

/* === Hero === */
.yb-hero {
  background: var(--cream);
  padding: 80px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.yb-hero__catch {
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  font-weight: 300;
  color: var(--dark-brown);
  line-height: 2.1;
  margin-bottom: 20px;
  letter-spacing: 0.08em;
}
.yb-hero__sub {
  font-size: 0.8rem;
  color: var(--brown);
  margin-bottom: 24px;
  letter-spacing: 0.15em;
  font-weight: 300;
}
.yb-hero__img {
  max-width: 280px;
  margin: 0 auto 32px;
  display: block;
}
.yb-btn {
  display: inline-block;
  background: var(--brown);
  color: var(--white);
  padding: 14px 40px;
  border-radius: 50px;
  text-decoration: none;
  font-size: 1rem;
  letter-spacing: 0.1em;
  transition: background 0.3s;
}
.yb-btn:hover {
  background: var(--dark-brown);
  color: var(--white);
}

/* === お悩みセクション === */
.yb-trouble {
  background: var(--white);
  padding: 80px 20px;
  text-align: center;
}
.yb-trouble__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
}
.yb-trouble__item {
  flex: 1;
  min-width: 180px;
  max-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.yb-trouble__icon {
  width: 64px;
  height: 64px;
  background: var(--cream);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
.yb-trouble__icon svg {
  width: 100%;
  height: 100%;
}
.yb-trouble__text {
  font-size: 0.9rem;
  color: var(--dark-brown);
  line-height: 1.8;
  font-weight: 300;
  letter-spacing: 0.05em;
}
@media (max-width: 600px) {
  .yb-trouble__grid {
    gap: 24px;
  }
  .yb-trouble__item {
    min-width: 140px;
  }
}

/* === Before/After === */
.yb-ba {
  background: var(--cream);
  padding: 70px 20px;
  text-align: center;
}
.yb-ba__wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  max-width: 700px;
  margin: 0 auto;
}
.yb-ba__box {
  flex: 1;
  min-width: 240px;
  background: var(--white);
  border-radius: 16px;
  padding: 28px 20px;
}
.yb-ba__label {
  font-size: 0.85rem;
  color: var(--brown);
  margin-bottom: 12px;
  letter-spacing: 0.1em;
}
.yb-ba__text {
  font-size: 0.95rem;
  color: var(--dark-brown);
  line-height: 1.8;
}

/* === サービス === */
.yb-service {
  padding: 70px 20px;
  text-align: center;
}
.yb-service__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}
.yb-service__card {
  background: var(--cream);
  border-radius: 20px;
  padding: 36px 24px;
}
.yb-service__icon {
  font-size: 2rem;
  margin-bottom: 12px;
}
.yb-service__name {
  font-size: 1.1rem;
  color: var(--dark-brown);
  margin-bottom: 10px;
}
.yb-service__desc {
  font-size: 0.9rem;
  color: var(--brown);
  line-height: 1.7;
}

/* === About === */
.yb-about {
  background: var(--cream);
  padding: 70px 20px;
  text-align: center;
}
.yb-about__inner {
  max-width: 640px;
  margin: 0 auto;
}
.yb-about__img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 20px;
  border: 3px solid var(--brown);
}
.yb-about__name {
  font-size: 1.1rem;
  color: var(--dark-brown);
  margin-bottom: 16px;
}
.yb-about__text {
  font-size: 0.95rem;
  color: var(--dark-brown);
  line-height: 1.9;
}

/* === フッターCTA === */
.yb-footer-cta {
  background: var(--dark-brown);
  padding: 70px 20px;
  text-align: center;
}
.yb-footer-cta__title {
  font-size: 1.4rem;
  color: var(--white);
  margin-bottom: 12px;
}
.yb-footer-cta__sub {
  font-size: 0.95rem;
  color: var(--cream);
  margin-bottom: 32px;
}
.yb-btn--light {
  background: var(--cream);
  color: var(--dark-brown);
}
.yb-btn--light:hover {
  background: var(--white);
  color: var(--dark-brown);
}

/* === レスポンシブ === */
@media (max-width: 600px) {
  .yb-ba__wrap {
    flex-direction: column;
  }
}
/* === TOP固定ページ — タイトル・日付・パンくず非表示 === */
.home .entry-title,
.home .entry-date,
.home .post-date,
.home .breadcrumb,
.home .entry-header {
  display: none !important;
}

/* === ヘッダーナビ非表示（トップのみ） === */
.home .navi-in,
.home #navi {
  display: none !important;
}

/* === Hero 2カラムレイアウト === */
.yb-hero {
  text-align: left;
  padding: 0;
}
.yb-hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 40px;
  gap: 40px;
}
.yb-hero__left {
  flex: 1;
}
.yb-hero__right {
  flex: 1;
  text-align: center;
}
.yb-hero__img {
  max-width: 100%;
  width: 360px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .yb-hero__inner {
    flex-direction: column;
    text-align: center;
    padding: 50px 20px;
  }
  .yb-hero__img {
    width: 240px;
  }
}
/* === TOP タイトル・ヘッダー非表示 === */
.page-id-80 .entry-title,
.page-id-80 .entry-header,
.page-id-80 .post-date,
.page-id-80 .entry-meta,
.page-id-80 .breadcrumb,
.page-id-80 .pager-post-navi {
  display: none !important;
}

/* === TOP コンテンツ幅を全幅に === */
.page-id-80 .entry-content {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.page-id-80 #content,
.page-id-80 .content-in,
.page-id-80 #main {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* === TOP サイドバー非表示 === */
.page-id-80 #sidebar {
  display: none !important;
}