@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){
  /*必要ならばここにコードを書く*/
}

/* Hallmark · macrostructure: Index-First · tone: editorial-practical · theme: existing Clshift DNA · enrichment: none · nav/footer: inherited · pre-emit critique: P4 H5 E5 S5 R5 V4 · contrast: pass (40–41) · honest/chrome/tokens/responsive/icons: pass (46–49, 30) · mobile: pass (34, 49–57) · slop: 58/58 */
:root {
  --clc-color-paper: oklch(99.2% 0.003 260);
  --clc-color-paper-soft: oklch(98.62% 0.0068 247.89);
  --clc-color-paper-blue: oklch(96% 0.025 250);
  --clc-color-ink: oklch(20.92% 0.0594 265.85);
  --clc-color-text: oklch(32.31% 0.0473 265.64);
  --clc-color-muted: oklch(54.44% 0.035 265.11);
  --clc-color-rule: oklch(91.45% 0.0163 262.75);
  --clc-color-rule-strong: oklch(82% 0.03 260);
  --clc-color-accent: oklch(56.58% 0.2022 259.8);
  --clc-color-accent-strong: oklch(50.08% 0.2117 261.42);
  --clc-color-on-accent: oklch(98.62% 0.0068 247.89);
  --clc-color-focus: oklch(66% 0.17 245);

  --clc-font-display: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --clc-font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  --clc-space-3xs: 0.125rem;
  --clc-space-2xs: 0.25rem;
  --clc-space-xs: 0.5rem;
  --clc-space-sm: 0.75rem;
  --clc-space-md: 1rem;
  --clc-space-lg: 1.5rem;
  --clc-space-xl: 2.5rem;
  --clc-space-2xl: 4rem;
  --clc-space-3xl: 6rem;

  --clc-text-xs: 0.75rem;
  --clc-text-sm: 0.875rem;
  --clc-text-base: 1rem;
  --clc-text-md: 1.125rem;
  --clc-text-lg: 1.375rem;
  --clc-text-xl: 1.75rem;
  --clc-text-2xl: 2.25rem;
  --clc-text-display: clamp(2rem, 4vw + 0.5rem, 3.25rem);

  --clc-radius-sm: 0.5rem;
  --clc-radius-md: 0.75rem;
  --clc-radius-lg: 1rem;
  --clc-rule-thin: 1px;
  --clc-rule-strong: 2px;

  --clc-shadow-whisper: 0 1px 2px oklch(20.92% 0.0594 265.85 / 0.05);
  --clc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --clc-dur-micro: 120ms;
  --clc-dur-short: 180ms;
}

html:has(body.clshift-column-site),
body.clshift-column-site {
  overflow-x: clip;
}

body.clshift-column-site {
  background: var(--clc-color-paper);
  color: var(--clc-color-text);
  font-family: var(--clc-font-body);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

.clshift-column-site *,
.clshift-column-site *::before,
.clshift-column-site *::after {
  box-sizing: border-box;
}

.clshift-column-site .content-in {
  display: block;
}

.clshift-column-site .sidebar {
  display: none;
}

.clshift-column-site .main {
  float: none;
  width: min(100%, 64rem);
  max-width: 64rem;
  margin-inline: auto;
  padding: clamp(var(--clc-space-lg), 4vw, var(--clc-space-xl));
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.page.clshift-column-site .main {
  width: min(100%, 74rem);
  max-width: 74rem;
}

.clshift-column-site .entry-title {
  min-width: 0;
  max-width: 24ch;
  margin-block: 0 var(--clc-space-lg);
  color: var(--clc-color-ink);
  font-family: var(--clc-font-display);
  font-size: var(--clc-text-display);
  font-style: normal;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.page.clshift-column-site .entry-title {
  margin-block-end: var(--clc-space-sm);
}

.page.clshift-column-site .date-tags,
.page.clshift-column-site .post-date,
.page.clshift-column-site .post-update,
.page.clshift-column-site .sns-share,
.page.clshift-column-site .sns-follow,
.page.clshift-column-site .author-box,
.page.clshift-column-site .entry-categories-tags {
  display: none !important;
}

.single-post.clshift-column-site .date-tags,
.single-post.clshift-column-site .entry-categories-tags {
  color: var(--clc-color-muted);
  font-size: var(--clc-text-sm);
  font-variant-numeric: tabular-nums;
}

.single-post.clshift-column-site .eye-catch-wrap {
  max-width: 60rem;
  margin: var(--clc-space-xl) auto var(--clc-space-2xl);
  overflow: clip;
  border: var(--clc-rule-thin) solid var(--clc-color-rule);
  border-radius: var(--clc-radius-lg);
  background: var(--clc-color-paper-soft);
}

.single-post.clshift-column-site .eye-catch-wrap img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.single-post.clshift-column-site .entry-content {
  color: var(--clc-color-text);
  font-size: clamp(var(--clc-text-base), 1.1vw, var(--clc-text-md));
  line-height: 1.9;
}

.single-post.clshift-column-site .entry-content > :where(p, ul, ol, blockquote, h2, h3, h4, .wp-block-group, .wp-block-table, details, .toc) {
  width: min(100%, 65ch);
  margin-inline: auto;
}

.single-post.clshift-column-site .entry-content > .wp-block-image,
.single-post.clshift-column-site .entry-content > figure {
  width: min(100%, 52rem);
  margin-inline: auto;
}

.single-post.clshift-column-site .entry-content p {
  margin-block: 0 var(--clc-space-lg);
}

.single-post.clshift-column-site .entry-content h2 {
  position: relative;
  margin-block: var(--clc-space-2xl) var(--clc-space-lg);
  padding-block-start: var(--clc-space-lg);
  border-block-start: var(--clc-rule-strong) solid var(--clc-color-ink);
  background: none;
  color: var(--clc-color-ink);
  font-family: var(--clc-font-display);
  font-size: clamp(var(--clc-text-xl), 3vw, var(--clc-text-2xl));
  font-style: normal;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.4;
  overflow-wrap: anywhere;
  min-width: 0;
}

.single-post.clshift-column-site .entry-content h3 {
  margin-block: var(--clc-space-xl) var(--clc-space-md);
  padding-block-end: var(--clc-space-xs);
  border-block-end: var(--clc-rule-thin) solid var(--clc-color-rule-strong);
  color: var(--clc-color-ink);
  font-family: var(--clc-font-display);
  font-size: clamp(var(--clc-text-lg), 2.2vw, var(--clc-text-xl));
  font-style: normal;
  font-weight: 800;
  line-height: 1.5;
  overflow-wrap: anywhere;
  min-width: 0;
}

.single-post.clshift-column-site .entry-content a:not(.clshift-column-cta__button) {
  color: var(--clc-color-accent-strong);
  text-decoration-color: var(--clc-color-rule-strong);
  text-decoration-thickness: var(--clc-rule-thin);
  text-underline-offset: 0.12em;
}

.single-post.clshift-column-site .entry-content :where(ul, ol) {
  padding-inline-start: 1.35em;
}

.single-post.clshift-column-site .entry-content li + li {
  margin-block-start: var(--clc-space-xs);
}

.single-post.clshift-column-site .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--clc-rule-thin) solid var(--clc-color-rule);
  border-radius: var(--clc-radius-md);
}

.single-post.clshift-column-site figcaption {
  margin-block-start: var(--clc-space-xs);
  color: var(--clc-color-muted);
  font-size: var(--clc-text-sm);
  line-height: 1.7;
  text-align: start;
}

.single-post.clshift-column-site .toc {
  margin-block: var(--clc-space-xl);
  padding: var(--clc-space-lg);
  border: var(--clc-rule-thin) solid var(--clc-color-rule-strong);
  border-radius: var(--clc-radius-md);
  background: var(--clc-color-paper-soft);
  box-shadow: none;
}

.single-post.clshift-column-site .toc-title {
  color: var(--clc-color-ink);
  font-weight: 800;
  text-align: start;
}

.single-post.clshift-column-site .toc-list,
.single-post.clshift-column-site .toc-list ol {
  padding-inline-start: 1.2em;
}

.single-post.clshift-column-site .is-style-clshift-point {
  margin-block: var(--clc-space-xl);
  padding: clamp(var(--clc-space-lg), 4vw, var(--clc-space-xl));
  border: var(--clc-rule-thin) solid var(--clc-color-rule-strong);
  border-radius: var(--clc-radius-lg);
  background: var(--clc-color-paper-blue);
}

.single-post.clshift-column-site .is-style-clshift-point > :last-child {
  margin-block-end: 0;
}

.single-post.clshift-column-site .is-style-clshift-comparison {
  margin-block: var(--clc-space-xl);
  overflow-x: auto;
  border: var(--clc-rule-thin) solid var(--clc-color-rule-strong);
  border-radius: var(--clc-radius-md);
  background: var(--clc-color-paper);
  -webkit-overflow-scrolling: touch;
}

.single-post.clshift-column-site .is-style-clshift-comparison table {
  width: 100%;
  min-width: 36rem;
  margin: 0;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.single-post.clshift-column-site .is-style-clshift-comparison :where(th, td) {
  padding: var(--clc-space-sm) var(--clc-space-md);
  border: 0;
  border-block-end: var(--clc-rule-thin) solid var(--clc-color-rule);
  text-align: start;
  vertical-align: top;
}

.single-post.clshift-column-site .is-style-clshift-comparison th {
  background: var(--clc-color-paper-soft);
  color: var(--clc-color-ink);
  font-weight: 800;
}

.single-post.clshift-column-site .is-style-clshift-comparison tr:last-child :where(th, td) {
  border-block-end: 0;
}

.single-post.clshift-column-site details.is-style-clshift-faq {
  margin-block: 0;
  padding-block: var(--clc-space-md);
  border-block-end: var(--clc-rule-strong) solid var(--clc-color-ink);
}

.single-post.clshift-column-site details.is-style-clshift-faq:first-of-type {
  border-block-start: var(--clc-rule-strong) solid var(--clc-color-ink);
}

.single-post.clshift-column-site details.is-style-clshift-faq summary {
  min-height: 2.75rem;
  color: var(--clc-color-ink);
  font-weight: 800;
  cursor: pointer;
}

.single-post.clshift-column-site details.is-style-clshift-faq > :last-child {
  margin-block-end: 0;
}

.clshift-column-cta {
  display: grid;
  gap: var(--clc-space-lg);
  width: min(100%, 52rem);
  margin: var(--clc-space-2xl) auto;
  padding: clamp(var(--clc-space-lg), 4vw, var(--clc-space-xl));
  border: var(--clc-rule-thin) solid var(--clc-color-accent);
  border-radius: var(--clc-radius-lg);
  background: var(--clc-color-paper-soft);
  box-shadow: var(--clc-shadow-whisper);
}

.clshift-column-cta__label {
  display: block;
  margin-block-end: var(--clc-space-xs);
  color: var(--clc-color-accent-strong);
  font-size: var(--clc-text-sm);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.single-post.clshift-column-site .entry-content .clshift-column-cta .clshift-column-cta__title,
.clshift-column-site .clshift-column-cta .clshift-column-cta__title {
  margin: 0 0 var(--clc-space-xs);
  padding: 0;
  border: 0;
  color: var(--clc-color-ink);
  font-size: clamp(var(--clc-text-lg), 3vw, var(--clc-text-xl));
  line-height: 1.45;
}

.clshift-column-cta p {
  margin: 0;
  color: var(--clc-color-text);
  font-size: var(--clc-text-base);
  line-height: 1.8;
}

.clshift-column-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--clc-space-xs);
  min-height: 3rem;
  width: 100%;
  min-width: 0;
  padding-inline: var(--clc-space-sm);
  border: var(--clc-rule-thin) solid var(--clc-color-accent-strong);
  border-radius: var(--clc-radius-md);
  background: var(--clc-color-accent-strong);
  color: var(--clc-color-on-accent);
  font-size: var(--clc-text-sm);
  font-weight: 800;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--clc-dur-short) var(--clc-ease-out), border-color var(--clc-dur-short) var(--clc-ease-out);
}

.clshift-column-cta__button:focus-visible,
.clshift-column-site a:focus-visible,
.clshift-column-site summary:focus-visible {
  outline: var(--clc-rule-strong) solid var(--clc-color-focus);
  outline-offset: var(--clc-space-2xs);
}

.clshift-column-cta__button:active {
  border-color: var(--clc-color-ink);
  background: var(--clc-color-ink);
}

.clshift-column-site a[aria-disabled="true"],
.clshift-column-site a.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.clshift-column-index {
  margin-block-start: var(--clc-space-md);
}

.clshift-column-index__intro {
  max-width: 65ch;
  margin-block-end: var(--clc-space-xl);
}

.clshift-column-index__intro p {
  max-width: 65ch;
  margin: 0 0 var(--clc-space-2xl);
  color: var(--clc-color-text);
  font-size: clamp(var(--clc-text-base), 1.5vw, var(--clc-text-md));
  line-height: 1.9;
}

.clshift-column-index__intro h2 {
  margin: 0;
  padding-block-end: var(--clc-space-sm);
  border-block-end: var(--clc-rule-strong) solid var(--clc-color-ink);
  background: none;
  color: var(--clc-color-ink);
  font-size: clamp(var(--clc-text-xl), 3vw, var(--clc-text-2xl));
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.35;
  min-width: 0;
  overflow-wrap: anywhere;
}

.clshift-column-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--clc-space-lg);
}

.clshift-column-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  margin: 0;
  overflow: clip;
  border: var(--clc-rule-thin) solid var(--clc-color-rule-strong);
  border-radius: var(--clc-radius-lg);
  background: var(--clc-color-paper);
  box-shadow: none;
}

.clshift-column-card__media {
  display: block;
  min-width: 0;
  overflow: clip;
  background: var(--clc-color-paper-blue);
  text-decoration: none;
}

.clshift-column-card__image,
.clshift-column-card__placeholder {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.clshift-column-card__placeholder {
  display: grid;
  place-items: center;
  color: var(--clc-color-accent-strong);
  font-family: var(--clc-font-display);
  font-size: var(--clc-text-md);
  font-weight: 800;
  letter-spacing: 0.06em;
}

.clshift-column-card__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(var(--clc-space-lg), 4vw, var(--clc-space-xl));
}

.clshift-column-card__meta {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--clc-space-xs) var(--clc-space-sm);
  margin-block-end: var(--clc-space-sm);
  color: var(--clc-color-muted);
  font-size: var(--clc-text-sm);
  font-variant-numeric: tabular-nums;
}

.clshift-column-card__category {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--clc-space-sm);
  border: var(--clc-rule-thin) solid var(--clc-color-rule-strong);
  border-radius: var(--clc-radius-sm);
  background: var(--clc-color-paper-soft);
  color: var(--clc-color-accent-strong);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.clshift-column-card__title {
  min-width: 0;
  margin: 0 0 var(--clc-space-sm);
  padding: 0;
  border: 0;
  background: none;
  color: var(--clc-color-ink);
  font-size: clamp(var(--clc-text-lg), 2.5vw, var(--clc-text-xl));
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.clshift-column-card__title a {
  color: inherit;
  text-decoration: none;
}

.clshift-column-card__excerpt {
  margin: 0 0 var(--clc-space-lg);
  color: var(--clc-color-text);
  font-size: var(--clc-text-base);
  line-height: 1.8;
}

.clshift-column-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--clc-space-xs);
  min-height: 2.75rem;
  margin-block-start: auto;
  color: var(--clc-color-accent-strong);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: var(--clc-rule-thin);
  text-underline-offset: 0.12em;
  white-space: nowrap;
}

.clshift-column-pagination {
  margin-block-start: var(--clc-space-xl);
}

.clshift-column-pagination ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--clc-space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.clshift-column-pagination :where(a, span) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: var(--clc-space-sm);
  border: var(--clc-rule-thin) solid var(--clc-color-rule-strong);
  border-radius: var(--clc-radius-sm);
  color: var(--clc-color-ink);
  text-decoration: none;
  white-space: nowrap;
}

.clshift-column-pagination .current {
  border-color: var(--clc-color-accent-strong);
  background: var(--clc-color-accent-strong);
  color: var(--clc-color-on-accent);
}

.clshift-column-empty {
  padding-block: var(--clc-space-2xl);
  border-block: var(--clc-rule-thin) solid var(--clc-color-rule-strong);
}

.clshift-column-empty h3 {
  margin: 0 0 var(--clc-space-xs);
  color: var(--clc-color-ink);
  font-size: var(--clc-text-lg);
}

.clshift-column-empty p {
  margin: 0;
  color: var(--clc-color-muted);
}

.single-post.clshift-column-site .related-entries {
  max-width: 60rem;
  margin: var(--clc-space-3xl) auto 0;
  padding-block-start: var(--clc-space-xl);
  border-block-start: var(--clc-rule-strong) solid var(--clc-color-ink);
}

.single-post.clshift-column-site .related-entry-heading {
  margin-block-end: var(--clc-space-lg);
  color: var(--clc-color-ink);
  font-size: var(--clc-text-xl);
  font-weight: 800;
}

.single-post.clshift-column-site .related-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--clc-space-md);
}

.single-post.clshift-column-site .related-entry-card-wrap {
  min-width: 0;
  border: var(--clc-rule-thin) solid var(--clc-color-rule);
  border-radius: var(--clc-radius-md);
  background: var(--clc-color-paper);
}

.single-post.clshift-column-site .breadcrumb {
  color: var(--clc-color-muted);
  font-size: var(--clc-text-sm);
}

@media (min-width: 40rem) {
  .clshift-column-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .clshift-column-cta__button {
    width: auto;
    padding-inline: var(--clc-space-lg);
    font-size: var(--clc-text-base);
  }

  .single-post.clshift-column-site .related-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 60rem) {
  .clshift-column-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .clshift-column-card:first-child {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }

  .clshift-column-card:first-child .clshift-column-card__image,
  .clshift-column-card:first-child .clshift-column-card__placeholder {
    height: 100%;
    min-height: 22rem;
  }

  .single-post.clshift-column-site .related-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (hover: hover) and (pointer: fine) {
  .clshift-column-cta__button:hover {
    border-color: var(--clc-color-ink);
    background: var(--clc-color-ink);
    color: var(--clc-color-on-accent);
  }

  .clshift-column-card__title a:hover,
  .clshift-column-card__link:hover,
  .clshift-column-card__category:hover {
    color: var(--clc-color-accent);
  }
}

@media (pointer: coarse) {
  .clshift-column-cta__button,
  .clshift-column-card__category,
  .clshift-column-card__link,
  .clshift-column-pagination :where(a, span) {
    min-height: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .clshift-column-cta__button {
    transition-duration: 0ms;
  }
}


.page.clshift-column-site .author-info {
  display: none !important;
}


html:has(body.page-id-9),
body.page-id-9 {
  overflow-x: clip;
}

body.page-id-9 .csh-home {
  min-width: 0 !important;
  overflow-x: clip !important;
}