@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ（PSB / Monochrome + Dusty Pink）
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** PSB TASTE TOKENS
************************************/
:root{
  --psb-bg: #F7F7F7;
  --psb-white: #FFFFFF;
  --psb-text: #222222;
  --psb-muted: #666666;
  --psb-line: rgba(34,34,34,.12);
  --psb-accent: #E6A4B4; /* Dusty Pink */
  --psb-accent-weak: rgba(230,164,180,.18);
}

/************************************
** BASE
************************************/
html{ scroll-behavior:smooth; }
body{
  background: var(--psb-bg);
  color: var(--psb-text);
  letter-spacing: .02em;
}

/* selection (PSBっぽい“走るピンク”) */
::selection{
  background: var(--psb-accent);
  color: #fff;
}

/* links */
a{
  color: var(--psb-accent);
  text-decoration: none;
}
a:hover{
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* 全体を少し“編集的”に：余白と線 */
.main, .content, .main-content, .entry-content{
  line-height: 1.85;
}

/************************************
** LAYOUT / WIDTH
************************************/
/* サイドバーを使わない前提：余白を整える */
.sidebar{ display:none; }
.nwa .main, .wa .main, .content-in .main{
  width: 100%;
}

/* コンテンツ幅の体感を“ギャラリー寄り”に（広すぎない） */
.content-in{
  max-width: 1120px;
}
.main{
  padding-left: 18px;
  padding-right: 18px;
}

/************************************
** HEADER / NAV (PSB minimal)
************************************/
/* ヘッダーを背景と同化させる */
#header-container,
#header,
.header,
.header-in,
.header-container{
  background: var(--psb-bg) !important;
  border-bottom: 1px solid var(--psb-line);
}

/* ロゴ（テキストロゴ想定でも効く） */
.site-name,
.logo,
.site-title{
  letter-spacing: .18em;
  text-transform: uppercase;
}
.site-name a, .site-title a{
  color: var(--psb-text) !important;
}

/* キャッチフレーズは基本出さない前提。出ても控えめ */
.tagline, .site-description{
  color: var(--psb-muted) !important;
  letter-spacing: .08em;
}

/* グロナビ：背景同化＋文字だけ */
.navi,
#navi,
#navi-in,
#navi .navi-in,
.navi-in{
  background: var(--psb-bg) !important;
  border-top: 0;
  border-bottom: 1px solid var(--psb-line);
}
.navi a{
  color: var(--psb-text) !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12.5px;
}
.navi a:hover{
  background: transparent !important;
  color: var(--psb-accent) !important;
  text-decoration: none;
}

/************************************
** TYPOGRAPHY (Headings / PSB spacing)
************************************/
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4{
  color: var(--psb-text);
  font-weight: 600;
  letter-spacing: .10em;
  line-height: 1.35;
}

/* 見出し装飾をミニマルに（Cocoonの装飾が強い場合の抑制） */
.entry-content h2{
  padding: 0 0 .55em 0;
  margin: 2.4em 0 1.1em;
  border-left: 0;
  border-bottom: 1px solid var(--psb-line);
  background: transparent !important;
}
.entry-content h3{
  margin: 2.0em 0 .8em;
  padding-left: 0;
  border-left: 0;
}
.entry-content h4{
  margin: 1.6em 0 .6em;
  font-weight: 600;
  letter-spacing: .08em;
}

/* 文章中の強調を“やりすぎない” */
strong{
  font-weight: 700;
}
em{
  font-style: normal;
  background: linear-gradient(transparent 60%, var(--psb-accent-weak) 60%);
}

/************************************
** BLOCKS (Gutenberg)
************************************/
/* セクションの“無音”を作る：グループの上下余白 */
.wp-block-group{
  padding-top: 54px;
  padding-bottom: 54px;
}

/* カバー：余白と文字の整列 */
.wp-block-cover{
  border-radius: 0;
}
.wp-block-cover__inner-container{
  max-width: 960px;
  margin: 0 auto;
}

/* ボタン（CONTACTなど） */
.wp-block-button__link{
  background: var(--psb-accent) !important;
  color: #fff !important;
  border-radius: 999px;
  padding: .95em 1.6em;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12.5px;
  box-shadow: none;
  border: 1px solid transparent;
}
.wp-block-button__link:hover{
  filter: brightness(.98);
  text-decoration: none;
}

/* アウトラインボタン（シリーズ導線用） */
.is-style-outline .wp-block-button__link{
  background: transparent !important;
  color: var(--psb-text) !important;
  border-color: var(--psb-line) !important;
}
.is-style-outline .wp-block-button__link:hover{
  border-color: var(--psb-accent) !important;
  color: var(--psb-accent) !important;
}

/* カラムの余白 */
.wp-block-columns{
  gap: 28px;
}

/************************************
** WORKS GRID (Query Loop / Image)
************************************/
/* 作品一覧は“正方形”で揃える（クエリーループ想定） */
.wp-block-query .wp-block-post,
.wp-block-post{
  background: transparent;
}

/* サムネを正方形に（可能な環境はaspect-ratioで） */
.wp-block-post-featured-image,
.wp-block-post-featured-image a{
  display: block;
}
.wp-block-post-featured-image img{
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0;
  transition: transform .25s ease, filter .25s ease;
  will-change: transform;
}

/* “ジャケットの手触り”程度のホバー */
.wp-block-post:hover .wp-block-post-featured-image img{
  transform: scale(1.01);
  filter: saturate(.98) contrast(1.02);
}

/* タイトルやメタは基本隠す（表示したい時はブロック側でONに） */
.wp-block-post-title,
.wp-block-post-date,
.wp-block-post-excerpt,
.entry-card-meta{
  letter-spacing: .08em;
}

/************************************
** CARDS / ARTICLE LIST (Cocoon parts)
************************************/
/* インデックスカードの企業感を抑える */
.entry-card,
.ecb-entry-border,
.article-list .entry-card{
  border: 1px solid var(--psb-line);
  border-radius: 0;
  box-shadow: none;
  background: var(--psb-white);
}
.entry-card-content{
  padding: 14px 16px;
}

/* カード内のタイトル */
.entry-card-title,
.entry-title{
  letter-spacing: .08em;
}
.entry-card-title a,
.entry-title{
  color: var(--psb-text);
}
.entry-card-title a:hover{
  color: var(--psb-accent);
}

/************************************
** FOOTER (fade out)
************************************/
#footer,
.footer{
  background: var(--psb-bg) !important;
  border-top: 1px solid var(--psb-line);
  color: var(--psb-muted);
}
#footer a, .footer a{
  color: var(--psb-text);
}
#footer a:hover, .footer a:hover{
  color: var(--psb-accent);
  text-decoration: none;
}

/* クレジットを“アルバム表記”に寄せる */
.footer-copyright,
.copyright{
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--psb-muted);
}

/************************************
** FORMS (Contact)
************************************/
input[type="text"], input[type="email"], input[type="url"], textarea, select{
  background: #fff;
  border: 1px solid var(--psb-line);
  border-radius: 10px;
  padding: .85em .9em;
  box-shadow: none;
}
input:focus, textarea:focus, select:focus{
  outline: none;
  border-color: var(--psb-accent);
  box-shadow: 0 0 0 3px rgba(230,164,180,.20);
}
input[type="submit"], button, .submit, .wpcf7-submit{
  background: var(--psb-accent);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: .95em 1.6em;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12.5px;
}

/************************************
** UTILS (Noisy Cocoon parts off)
************************************/
/* パンくずをミニマルに（必要なら） */
.breadcrumb{
  opacity: .72;
  font-size: 12px;
  letter-spacing: .06em;
}

/* SNSボタンなど“派手装飾”が出る場合は控えめに */
.sns-share,
.sns-follow{
  filter: grayscale(.15);
  opacity: .92;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

/*1023px以下*/
@media screen and (max-width: 1023px){
  .content-in{ max-width: 960px; }
  .wp-block-group{ padding-top: 46px; padding-bottom: 46px; }
  .navi a{ font-size: 12px; }
}

/*834px以下*/
@media screen and (max-width: 834px){
  .main{ padding-left: 14px; padding-right: 14px; }
  .wp-block-group{ padding-top: 42px; padding-bottom: 42px; }
  .entry-content h2{ margin-top: 2.0em; }
  .wp-block-columns{ gap: 18px; }
}

/*480px以下*/
@media screen and (max-width: 480px){
  body{ letter-spacing: .01em; }
  .wp-block-group{ padding-top: 34px; padding-bottom: 34px; }
  .navi a{ letter-spacing: .10em; }
  .wp-block-button__link{ width: 100%; text-align: center; }
}

/* Gutenbergの全幅・幅広を本当に効かせる（Cocoon用） */
.alignfull{
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.alignwide{
  width: min(1200px, calc(100vw - 36px));
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Cocoon：全幅ブロックを本当に全幅にする（決定版） */
body.home .content-in,
body.page .content-in{
  max-width: none !important;
  width: 100% !important;
}

body.home .alignfull,
body.page .alignfull{
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Cocoon：外側の幅制限を解除（トップ/固定ページ） */
body.home #container,
body.home .container,
body.home .content,
body.home .content-in,
body.home .main,
body.page #container,
body.page .container,
body.page .content,
body.page .content-in,
body.page .main{
  max-width: none !important;
  width: 100% !important;
}

/* 全幅ブロックを本当の全幅に */
body.home .alignfull,
body.page .alignfull{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* 幅広も使うなら（任意） */
body.home .alignwide,
body.page .alignwide{
  width: min(1200px, calc(100vw - 36px)) !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}