@charset "UTF-8";
/*
 Theme Name:   Twenty Twenty-Four Child
 Theme URI:    https://example.com/twenty-twenty-four-child/
 Description:  Twenty Twenty-Fourの子テーマ
 Author:       amanosuke
 Template:     twentytwentyfour
 Version:      1.0.0
*/
/* 子テーマ用のCSSはここに書く */
/* 元のデザインの調整 */
:where(.wp-site-blocks) > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

a:focus {
  outline: none;
}

/* 上部のナビゲーションの固定表示 */
.sticky_header {
  position: sticky;
  top: 0;
  z-index: 999;
}
@media (max-width: 767px) {
  .sticky_header > div {
    padding-left: 1.25rem !important;
    padding-right: 1.5rem !important;
  }
}

/* 全体のレイアウト調整 */
@media (max-width: 767px) {
  body.single main {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
}

@media (max-width: 767px) {
  body:where(.category, .page-template-default) main {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}

/* 広告共通設定 */
div:has(> .adsbygoogle) {
  text-align: center;
}

.fluid_ad {
  width: 100%;
  height: auto;
  text-align: center;
  overflow-x: hidden;
  overflow-y: hidden;
}
.fluid_ad ins {
  max-width: 100%;
}
@media (max-width: 767px) {
  .fluid_ad {
    max-width: 330px;
  }
}

/* 検索フォームの装飾 */
form.search_box input {
  padding: 0.5rem 1rem;
}
form.search_box button {
  background-color: rgba(78, 75, 72, 0.5);
}

header form.search_box {
  max-width: 480px;
}
@media (max-width: 767px) {
  header form.search_box {
    display: none;
  }
}

header nav form.search_box {
  display: none;
}
@media (max-width: 767px) {
  header nav form.search_box {
    display: block;
  }
}

:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
  padding: 0;
  background-color: white;
}
:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__button {
  margin: 0;
}

/* リンクに色をつける場合の装飾 */
.txt_link a, a.txt_link {
  color: #00cca8;
  text-decoration: none;
  font-weight: 700;
  padding: 0 0.25rem;
}
.txt_link a:hover, a.txt_link:hover {
  text-decoration: underline;
}
.txt_link a[target=_blank]::after, a.txt_link[target=_blank]::after {
  content: " ↗";
}

/* フッターのタグなどで使う、装飾付き横並びリスト */
ul.horizontal_list {
  gap: 1rem;
}

.horizontal_list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}
.horizontal_list li {
  margin: 0;
}
.horizontal_list li a, .horizontal_list a {
  padding: 0.5rem 1.25rem;
  background-color: white;
  border-radius: 2rem;
  border: 1px solid rgba(78, 75, 72, 0.5);
  text-decoration: none;
  transition: background-color 0.3s;
}
.horizontal_list li a:hover, .horizontal_list a:hover {
  background-color: rgba(208, 203, 199, 0.25);
}

.hash_list li a, .hash_list a {
  padding: 0;
  margin-right: 0.75rem;
  border-radius: 0;
  border: none;
  background-color: transparent;
}
.hash_list li a::before, .hash_list a::before {
  content: "# ";
}
.hash_list li a:hover, .hash_list a:hover {
  background-color: transparent;
  text-decoration: underline;
}

/* イラストのグリッド表示のレイアウトと装飾 */
ul.grid_card_img {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0;
  margin: 0;
  gap: min(2.5rem, 3vw);
}
@media screen and (max-width: 1000px) {
  ul.grid_card_img {
    grid-template-columns: repeat(2, minmax(18rem, 1fr));
  }
}
@media (max-width: 767px) {
  ul.grid_card_img {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 1rem;
  }
}
ul.grid_card_img.wpp-list li {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
}

.clickable_card_img {
  width: 100%;
  aspect-ratio: unset !important;
}
.clickable_card_img a {
  background-color: white;
  border-radius: 1rem;
  display: block;
  border: 3px solid white;
  height: auto;
  transition: border 0.3s;
  padding: 16% 24%;
}
.clickable_card_img a:hover, .clickable_card_img a:focus {
  outline-style: none;
  background-color: rgba(255, 255, 255, 0.75);
  border: 3px solid rgba(78, 75, 72, 0.25);
}
.clickable_card_img a:hover img, .clickable_card_img a:focus img {
  padding: 0;
}
.clickable_card_img a img {
  width: 100%;
  height: auto !important;
  aspect-ratio: 1;
  padding: 1rem;
  box-sizing: border-box;
  display: block;
  float: unset;
  margin: 0;
  transition: padding 0.3s;
}

.ad-item .card_wrapper {
  position: relative;
}
.ad-item .card_wrapper::before {
  content: "";
  display: block;
  height: auto;
  aspect-ratio: 6/5;
}
.ad-item .clickable_card_img {
  background-color: white;
  border-radius: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  aspect-ratio: 6/5 !important;
  border: 2px solid white;
  box-sizing: border-box;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  text-align: center;
}
.ad-item .clickable_card_img ins {
  min-width: 300px;
}

a.wpp-post-title {
  text-decoration: none;
}
a.wpp-post-title:hover {
  text-decoration: underline;
}

.wpp-item-data {
  line-height: 1;
}

/* フッター */
@media (max-width: 767px) {
  footer .category_box, footer .hash_box {
    padding: 1.5rem !important;
  }
}
footer .category_box ul li {
  margin: 0 0 0.5rem 0;
}
@media (max-width: 767px) {
  footer .category_box ul li a {
    padding: 0.5rem 1rem;
  }
}
@media (max-width: 767px) {
  footer .hash_box {
    margin-bottom: 1.5rem !important;
  }
}
@media (max-width: 767px) {
  footer div:has(nav) {
    padding-top: 1rem !important;
  }
}

/* Googleフォームのお問い合わせフォーム */
.entry-content:has(iframe[src^="https://docs.google.com/forms"]) {
  text-align: center;
}

iframe[src^="https://docs.google.com/forms"] {
  width: 100%;
}

/* トップページ */
.hero_form {
  box-shadow: 0 0px 24px 2px rgba(0, 0, 0, 0.2);
  max-width: 1080px;
  width: -moz-fit-content;
  width: fit-content;
}
@media (min-width: 768px) {
  .hero_form {
    padding-left: 3rem !important;
    padding-left: 3rem !important;
  }
}
@media (max-width: 767px) {
  .hero_form {
    padding: 2rem 1.5rem !important;
    width: auto;
  }
  .hero_form h2 {
    font-size: 1.375rem !important;
  }
}
.hero_form .txt_link a[target=_blank] {
  text-decoration: underline !important;
}
.hero_form .txt_link a[target=_blank]:hover {
  text-decoration: none !important;
}
.hero_form .txt_link a[target=_blank]::after {
  content: "" !important;
}
.hero_form form {
  width: 90%;
  max-width: 560px;
}
.hero_form form input {
  padding: 0.5rem 1.5rem;
  height: 3.5rem;
  font-size: 1rem;
}
.hero_form form button {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.hero_form form button svg {
  width: 1.5rem;
  height: 1.5rem;
}

.top_category_list .wp-block-group > .wp-block-columns {
  width: 100%;
}
.top_category_list p > a {
  text-decoration: none;
}
.top_category_list p > a:hover {
  text-decoration: underline;
}
.top_category_list > p > a {
  color: rgba(78, 75, 72, 0.8);
  font-size: 0.9rem;
  line-height: 1;
}
.top_category_list > p > a img {
  width: 44px !important;
  background-color: white;
  padding: 1.25rem;
  border-radius: 3rem;
  outline: 1px solid #d0cbc7;
  outline-offset: -0.375rem;
  transition: all 0.2s;
  margin-bottom: -0.375rem;
}
.top_category_list > p > a:hover img {
  box-shadow: 0 0px 12px 2px rgba(0, 0, 0, 0.25);
}
.top_category_list > p > a:focus {
  outline: none;
}

/* 検索結果一覧 */
nav.pagination_custom {
  font-size: 1.125rem;
  line-height: 1;
  gap: 1.75rem;
}
nav.pagination_custom > div:first-of-type {
  display: flex;
  gap: 1.75rem;
}
nav.pagination_custom > a.wp-block-query-pagination-next::after {
  content: "→";
  padding-left: 0.5rem;
}
nav.pagination_custom > a.wp-block-query-pagination-previous::before {
  content: "←";
  padding-right: 0.5rem;
}
nav.pagination_custom a {
  text-decoration: none;
  font-weight: 700;
  color: #00cca8;
  transition: background-color 0.3s;
  border-radius: 0.25rem;
}
nav.pagination_custom a:hover {
  background-color: rgba(0, 204, 168, 0.1);
}
nav.pagination_custom span, nav.pagination_custom a {
  padding: 0.75rem;
}

/* 画像詳細ページ */
.illust_preview {
  width: 17.5rem;
  margin: 0.75rem 0 2rem;
}
@media (max-width: 767px) {
  .illust_preview {
    width: 15rem;
  }
}

.download-button {
  display: inline-block;
  background-color: #212529;
  color: white;
  border-radius: 0.5rem;
  padding: 1rem 2rem;
  margin: 0;
  text-decoration: none;
  transition: background-color 0.3s;
}
.download-button:hover {
  background-color: rgba(33, 37, 41, 0.7);
}
@media (max-width: 767px) {
  .download-button {
    margin-bottom: 1rem;
  }
}

.yarpp-related li {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.yarpp-related li figure {
  margin: 0;
}
.yarpp-related a {
  font-weight: 400;
  line-height: 1;
}
.yarpp-related a:hover {
  text-decoration: underline;
}

/* 固定ページ */
@media (max-width: 767px) {
  .guide_content_box {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}