/*
Theme Name:yStandard-child
Author: hatsune
Author URI: https://hatsune.design
Template: ystandard
Requires at least: 6.1
Requires PHP: 7.4.0
Text Domain: hatsune
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

:root {
  --breadcrumbs-height: 30px;
  --lp-pc-layout-size: 0;
  --mobile-nav-container-padding: 84px !important;
}

@media all and (min-width: 600px) {
  .archive__item.is-card {
    --ystd-archive-item-width: calc(50% - var(--ystd-archive-gap) / 2);
  }
}

body.home.scrlled div.site-branding {
  animation-name: fadeInAnime;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

body.home:not(.scrlled) div.site-branding {
  display: none;
}

body.home.iscrlled:not(.scrlled) div.site-branding {
  animation-name: fadeOutAnime;
  animation-duration: .1s;
  animation-fill-mode: forwards;
}

@keyframes fadeOutAnime {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeInAnime {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media all and (min-width: 769px) {
  body:not(.scrlled) header#masthead div.site-header__content {
    height: 76.48px;
  }
}

@media all and (max-width: 768px) {
  body:not(.home).iscrlled:not(.scrlled) div.site-branding {
    animation-name: fadeInAnime;
    animation-duration: 2s;
    animation-fill-mode: forwards;
  }

  body:not(.home).scrlled div.site-branding {
    animation-name: fadeOutAnime;
    animation-duration: .1s;
    animation-fill-mode: forwards;
  }

  body:not(.home).scrlled div#breadcrumbs {
    top: 0;
  }

  body.scrlled {
    --ys-site-header-height: 60px;
  }

  body:not(.home).scrlled div#content {
    padding: 38px 0 var(--ystd-container-margin-vertical) 0;
  }
}

body.home {
  --breadcrumbs-height: 0;
}

body.has-fixed-header {
  padding-top: var(--ys-site-header-height, 0) !important;
}

body.blog ul#search_condition,
body.archive.category ul#search_condition {
  display: flex;
  align-items: flex-end;
  position: fixed;
  top: 95px;
  color: #4d4d4d;
  width: min(calc(var(--ystd-container-width)), calc(100% - var(--ystd-container-gutter) * 2 - 92px));
  justify-content: center;
  padding: 0;
  margin: 0 46px;
  z-index: 9;
  opacity: .85;
}

body.blog:has(.is-open) ul#search_condition,
body.archive.category:has(.is-open) ul#search_condition {
  z-index: 2;
}

@media all and (max-width: 768px) {

  body.blog ul#search_condition,
  body.archive.category ul#search_condition {
    top: 87px;
  }

  body.blog.scrlled ul#search_condition,
  body.archive.category.scrlled ul#search_condition {
    top: 30px;
  }

  body.single-post.scrlled div.post-taxonomy {
    top: 35px;
  }

  body.blog.scrlled,
  body.archive.category.scrlled {
    --ys-site-header-height: 73px;
  }

  body.single-post.scrlled {
    --ys-site-header-height: 60px;
  }

  body.blog.scrlled div#content,
  body.archive.category.scrlled div#content,
  body.single-post.scrlled div#content {
    padding: 75px 0 var(--ystd-container-margin-vertical) 0;
  }
}

@media all and (max-width: 599px) {

  body.blog ul#search_condition,
  body.archive.category ul#search_condition {
    top: 81px;
    height: 32.641px;
  }
}

div.header-media {
  height: calc(100svh - var(--ys-site-header-height));
  align-items: center;
  position: fixed;
  width: 100%;
  z-index: -1;
}

div.header-media > div.container {
  padding-bottom: var(--ys-site-header-height);
}

body.home div#content {
  margin-top: calc(100svh - var(--ys-site-header-height));
  background-color: var(--header-bg);
}

/* div#content:has(div#wpforms-confirmation-82) { */
div#content {
  min-height: calc(100svh - var(--ys-site-header-height)
      /* - var(--breadcrumbs-height) */
      - 248px);
  padding: var(--ystd-container-margin-vertical) 0;
  margin: 0;
  background-color: #fff;
}

body.single-post article.category-lp figure.hdmock::before,
body.single-post article.category-website figure.hdmock::before {
  display: block;
  height: calc(80% * 1080 / var(--lp-pc-layout-size));
  line-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: absolute;
  top: 12.3%;
  left: 10.9%;
  transform: scale(calc(.625 * var(--lp-pc-layout-size) / 1080));
  transform-origin: top left;
  scrollbar-color: lightgray #696969;
}

body.single-post article.category-lp figure.hdmocksp::before,
body.single-post article.category-website figure.hdmocksp::before {
  display: block;
  height: calc(89% * 1080 / var(--lp-pc-layout-size));
  line-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: absolute;
  top: 20%;
  left: 30.95%;
  transform: scale(calc(.734 * var(--lp-pc-layout-size) / 1080));
  transform-origin: top left;
  scrollbar-color: lightgray #696969;
}

body.single-post.postid-1297 article.category-lp figure.hdmock::before {
  content: url("https://hatsune.design/wp-content/uploads/2024/11/mysisyo.jpg");
  background-color: #008cbd;
}

body.single-post.postid-853 article.category-lp figure.hdmock::before {
  content: url("https://hatsune.design/wp-content/uploads/2024/05/EasterbuffeLP.jpg");
  background-color: #5e6213;
}

body.single-post.postid-2560 article.category-lp figure.hdmock::before {
  content: url("https://hatsune.design/wp-content/uploads/2024/11/Famm03PC.jpg");
  background-color: #fffaf4;
}

body.single-post.postid-2560 article.category-lp figure.hdmocksp::before {
  content: url("https://hatsune.design/wp-content/uploads/2024/06/famm03_spx15.jpg");
  background-color: #fffaf4;
}

body.single-post.postid-2854 article.category-website figure.hdmock::before {
  content: url("https://hatsune.design/wp-content/uploads/2024/11/EnglishSchoolPC.jpg");
  background-color: #00394D;
}

body.single-post.postid-2854 article.category-website figure.hdmocksp::before {
  content: url("https://hatsune.design/wp-content/uploads/2024/09/EnglishSchool_SP.png");
  background-color: #00394D;
}

body.postid-5020.single-post article.category-lp figure.hdmock::before {
  height: 862px;
  transform: unset;
  transform-origin: unset;
  zoom: calc(.625 * var(--lp-pc-layout-size) / 1080);
  scrollbar-width: none;
}

body.single-post.postid-5020 article.category-lp figure.hdmock::before {
  content: url("https://hatsune.design/wp-content/uploads/2024/10/negitorodonLP.jpg");
  background-color: #CBAD35;
}

body.single-post.postid-2560 article.category-lp div.entry-content {
  margin-top: 0;
}

body.single-post div.post-taxonomy {
  padding-left: var(--ystd-container-gutter);
  left: max(0%, calc((100% - var(--ystd-container-width) - var(--ystd-container-gutter) * 2) / 2));
}