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

/************************************
/*
  Work in Peace カスタムデザインCSS
  （Cocoon用／ベージュトーン＋オレンジアクセント）
*/

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Noto+Sans+JP:wght@400;700&display=swap');

:root{
  --wip-bg: #EDE9E4;
  --wip-bg-soft:#FAF9F7;
  --wip-ink:#333333;
  --wip-body:#555555;
  --wip-accent:#F6B76F;
  --wip-olive:#B7AA8C;
}

html, body{
  background: var(--wip-bg);
  color: var(--wip-body);
  font-family: 'Noto Sans JP', 'Lato', sans-serif;
  line-height: 1.9;
}

.entry-title, h1, h2, h3, h4{
  color: var(--wip-ink);
  font-family: 'Noto Sans JP','Lato',sans-serif;
  letter-spacing: .02em;
}

h1{ font-size: clamp(26px, 3.2vw, 34px); margin: 0 0 18px; }
h2{ font-size: clamp(22px, 2.6vw, 28px); margin: 0 0 16px; }
h3{ font-size: clamp(18px, 2.2vw, 22px); margin: 0 0 12px; }

a{ color: var(--wip-ink); transition: opacity .2s ease; }
a:hover{ opacity:.75; }

.wp-block-button__link, .btn, .more-link{
  background: var(--wip-accent);
  color:#222;
  border-radius: 8px;
  padding:.7em 1.1em;
  font-weight:700;
  text-decoration:none;
}
.wp-block-button__link:hover{ filter: brightness(0.95); }

.wip-section{
  margin: clamp(48px, 9vw, 120px) auto;
  padding: clamp(16px, 4vw, 40px) clamp(16px, 6vw, 48px);
  background: var(--wip-bg-soft);
  border-radius: 16px;
}
.wip-section--plain{
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}

.wip-hero{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(237,233,228,.9), rgba(237,233,228,.9)),
              url('https://images.unsplash.com/photo-1513542789411-b6a5d4f31634?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;
  padding: clamp(48px, 10vw, 120px) clamp(24px, 8vw, 80px);
  text-align: left;
}
.wip-hero h1{
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.3;
  margin-bottom: 12px;
}
.wip-hero p{
  font-size: clamp(14px, 2vw, 18px);
  margin-bottom: 16px;
  color: var(--wip-body);
}
.wip-hero .wip-hero-actions{
  display: flex; gap: 12px; flex-wrap: wrap;
}

.wip-cards{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: clamp(12px, 3vw, 24px);
}
@media (max-width: 900px){
  .wip-cards{ grid-template-columns: 1fr; }
}

.wip-card{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 22px;
}
.wip-card h3{ margin-bottom: 6px; }
.wip-card p{ margin-bottom: 12px; }
.wip-card .wip-tag{
  display:inline-block;
  padding:.25em .6em;
  border-radius:999px;
  background: var(--wip-olive);
  color:#fff;
  font-size: .8em;
  margin-bottom: 10px;
}

.wip-cta{
  text-align: center;
  background: #fff;
  border: 1px solid #eee;
  border-radius:16px;
}
.wip-cta h2{ margin-bottom: 8px; }
.wip-cta p{ margin-bottom: 16px; }

.site-footer, .footer{
  background: transparent;
  color: var(--wip-body);
  border-top: 1px solid #eaeaea;
}
.footer .copyright{ color: var(--wip-body); }

************************************/
/*必要ならばここにコードを書く*/

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

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

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