@charset "UTF-8";

/*!
Theme Name: Sloppy Life Hack Cocoon Child
Theme URI: https://www.sloppy-life-hack.site/
Description: Sloppy Life Hack用のCocoon Child Theme
Author: Sloppy Life Hack
Author URI: https://www.sloppy-life-hack.site/
Template: cocoon-master
Version: 0.1.0
Text Domain: slh-cocoon-child
*/

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

/* WO-BLOG-UXSEO-002: problem-first navigation and readable article paths. */
body.slh-uxseo-002 .slh-task-hub,
body.slh-uxseo-002 .slh-article-nav {
  box-sizing: border-box;
  max-width: 72rem;
  margin: 2rem auto;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid #d9e2dc;
  border-radius: 0.75rem;
  background: #f7faf8;
}

body.slh-uxseo-002 .slh-task-hub__intro {
  max-width: 48rem;
}

body.slh-uxseo-002 .slh-eyebrow {
  margin: 0 0 0.5rem;
  color: #3d6651;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

body.slh-uxseo-002 .slh-task-hub h2,
body.slh-uxseo-002 .slh-article-nav h2,
body.slh-uxseo-002 .slh-selection-path h3,
body.slh-uxseo-002 .slh-article-nav h3 {
  margin-top: 0;
  color: #24372c;
}

body.slh-uxseo-002 .slh-task-nav ul,
body.slh-uxseo-002 .slh-selection-path ul,
body.slh-uxseo-002 .slh-related-list {
  display: grid;
  gap: 0.75rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

body.slh-uxseo-002 .slh-task-nav ul {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.slh-uxseo-002 .slh-task-nav a,
body.slh-uxseo-002 .slh-selection-path a,
body.slh-uxseo-002 .slh-article-nav a {
  color: #245a3f;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.16em;
}

body.slh-uxseo-002 .slh-task-nav a {
  display: flex;
  min-height: 5rem;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid #b9ccbf;
  border-radius: 0.5rem;
  background: #fff;
  text-decoration: none;
}

body.slh-uxseo-002 .slh-task-nav a:hover,
body.slh-uxseo-002 .slh-task-nav a:focus-visible {
  border-color: #245a3f;
  background: #edf5ef;
}

body.slh-uxseo-002 .slh-task-nav small {
  color: #52665a;
  font-size: 0.8125rem;
}

body.slh-uxseo-002 .slh-selection-path {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid #d9e2dc;
}

body.slh-uxseo-002 .slh-selection-path ul,
body.slh-uxseo-002 .slh-related-list {
  max-width: 58rem;
}

body.slh-uxseo-002 .slh-selection-path li,
body.slh-uxseo-002 .slh-related-list li {
  padding-left: 1rem;
}

body.slh-uxseo-002 .slh-article-nav {
  margin-top: 2.5rem;
  background: #fbfcfb;
}

body.slh-uxseo-002 .slh-article-nav__context,
body.slh-uxseo-002 .slh-article-nav__note {
  color: #52665a;
  font-size: 0.9375rem;
}

body.slh-uxseo-002 .slh-next-read {
  margin: 1.25rem 0;
  padding: 1rem 1.1rem;
  border-left: 0.3rem solid #5d8a6b;
  background: #edf5ef;
}

body.slh-uxseo-002 .slh-next-read a {
  display: flex;
  min-height: 2.75rem;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
}

body.slh-uxseo-002 .slh-next-read span {
  color: #52665a;
  font-size: 0.8125rem;
  font-weight: 700;
}

body.slh-uxseo-002 .slh-article-nav__note {
  margin: 1.25rem 0 0;
  line-height: 1.75;
}

body.slh-uxseo-002 a:focus-visible,
body.slh-uxseo-002 button:focus-visible,
body.slh-uxseo-002 input:focus-visible,
body.slh-uxseo-002 select:focus-visible,
body.slh-uxseo-002 textarea:focus-visible {
  outline: 3px solid #b86b00;
  outline-offset: 3px;
}

body.slh-uxseo-002 .entry-content,
body.slh-uxseo-002 .article-content {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.85;
}

body.slh-uxseo-002 .entry-content img,
body.slh-uxseo-002 .article-content img,
body.slh-uxseo-002 .entry-content iframe,
body.slh-uxseo-002 .article-content iframe {
  max-width: 100%;
}

body.slh-uxseo-002 .entry-content table,
body.slh-uxseo-002 .article-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

@media screen and (max-width: 834px) {
  body.slh-uxseo-002 .slh-task-nav ul {
    grid-template-columns: 1fr;
  }

  body.slh-uxseo-002 .slh-task-hub,
  body.slh-uxseo-002 .slh-article-nav {
    margin: 1.5rem 0;
    border-radius: 0.5rem;
  }
}

@media screen and (max-width: 480px) {
  body.slh-uxseo-002 .slh-task-hub,
  body.slh-uxseo-002 .slh-article-nav {
    padding: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.slh-uxseo-002 *,
  body.slh-uxseo-002 *::before,
  body.slh-uxseo-002 *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

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

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

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