/* CSS Document */

/*
Theme Name: tokimia
*/

/* ここから下に共通スタイル（common.cssの内容）を書いていく */
:root {
  --pink: #f064a1;
  --pink-strong: #ef4f95;
  --pink-pail: #d2a6b3;
  --lavender: #aaa0dc;
  --lavender-deep: #8d7ad0;
  --peach: #f6b68c;
  --navy: #263656;
  --navy-dark: #16233f;
  --white: #fffdfd;
  --soft: #fff8fc;
  --line: rgba(38, 54, 86, 0.12);
  --shadow: 0 24px 80px rgba(55, 45, 88, 0.12);
  --radius-xl: 42px;
  --radius-lg: 30px;
  --radius-md: 22px;
  --bg-circle-pailpink: radial-gradient(
    circle at center,
    rgba(240, 100, 161, 0.25) 0%,
    #fff 80%
  );
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
:root {
  /* 必要に応じて追加 */
  --max-content-width: 900px;
}
html,
body {
  /* ページの最上部、最下部でスクロールしたときの動きを止める */
  overscroll-behavior: none;
}
html {
  font-size: 62.5%; /* 16px * 62.5% = 10px */
  width: 100%;
  box-sizing: border-box;
  scrollbar-width: none;
}
body {
  /* height: 100%;
  margin: 0; */
  position: relative;
  color: var(--navy);
  background: var(--white);
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: clamp(12px, 2.5vw, 16px);
  line-height: 1.5;
  overflow-x: hidden;
}
main {
  height: 100%;
  overflow: hidden;
}
.is_pc {
  display: none;
}
@media (min-width: 551px) {
  .is_pc {
    display: block;
  }
  .is_sp {
    display: none;
  }
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  display: block;
  /* vertical-align: bottom; */
}
button {
  font: inherit;
}
/* ul:not(#page ul) {
  margin: 0;
  padding: 0;
} */
ul li:not(#page ul li, #page ol li) {
  list-style: none;
}
/* .is_sp {
  display: none !important;
}
@media (max-width: 980px) {
  .is_sp {
    display: block !important;
  }
} */
/* =========================================================
header
========================================================= */
:root {
  --header-height: 75px;
}
.site-header {
  height: var(--header-height);
  display: grid;
  grid-template-columns: 180px 1fr 180px;
  align-items: center;
  gap: min(5vw, 25px);
  padding: 0 min(7vw, 35px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255, 253, 253, 0.82);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(38, 54, 86, 0.06);
  transition: 0.3s;
}
.site-header.scrolled {
  height: 72px;
  box-shadow: 0 10px 38px rgba(22, 35, 63, 0.06);
}
.brand img {
  width: 132px;
  height: auto;
}
.desktop-nav ul {
  display: flex !important;
  /* justify-self: center; */
  align-items: center;
  gap: 34px;
  font:
    600 12px/1 "Poppins",
    sans-serif;
  letter-spacing: 0.12em;
}
.desktop-nav ul li {
  height: fit-content;
}
.desktop-nav ul li a {
  display: inline-block;
  position: relative;
  padding: 10px 0;
}
.desktop-nav ul li a:hover:after {
  right: 0;
}
.desktop-nav ul li.download a {
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 154px;
  gap: 0;
  height: 46px;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font: 600 11px/1 "Poppins";
  letter-spacing: 0.12em;
  box-shadow: 0 8px 25px rgba(240, 100, 161, 0.24);
}
/* .header-download i {
  display: none;
} */
.menu-button,
.mobile-menu {
  display: none;
}
@media (min-width: 1600px) {
  :root {
    --header-height: 85px;
  }
  .brand img {
    width: 200px;
  }
  .desktop-nav,
  .header-download {
    font-size: clamp(12px, 3vw, 16px);
  }
  .header-download {
    width: auto;
    padding: 0 min(8vw, 40px);
  }
}
@media (min-width: 981px) {
  .site-header {
    display: flex;
    grid-template-columns: none;
    gap: min(3vw, 15px);
  }
  .brand {
    margin-right: auto;
    flex: 0 0 auto;
  }
  .desktop-nav {
    justify-self: auto;
    margin-left: auto;
    gap: 30px;
  }
  .header-download {
    justify-self: auto;
    flex: 0 0 154px;
    margin-left: 4px;
  }
}
/* SP版メニュー */
@media (max-width: 980px) {
  :root {
    --header-height: 55px;
  }
  .site-header {
    grid-template-columns: 150px 1fr;
    height: var(--header-height);
    padding: 0 min(4vw, 20px);
  }
  .desktop-nav,
  .header-download {
    display: none !important;
  }
  .menu-button {
    display: block;
    justify-self: end;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    position: relative;
  }
  .menu-button span {
    position: absolute;
    right: 6px;
    width: 28px;
    height: 2px;
    background: var(--navy);
    transition: 0.25s;
  }
  .menu-button span:first-child {
    top: 17px;
  }
  .menu-button span:last-child {
    top: 26px;
    width: 20px;
  }
  .menu-button.is-open span:first-child {
    transform: translateY(4px) rotate(45deg);
  }
  .menu-button.is-open span:last-child {
    width: 28px;
    transform: translateY(-5px) rotate(-45deg);
  }
  .mobile-menu {
    display: flex;
    position: fixed;
    z-index: 95;
    top: 0;
    right: 0;
    width: min(390px, 88vw);
    height: 100vh;
    background: rgba(255, 253, 253, 0.98);
    padding: 100px 40px 40px !important;
    flex-direction: column;
    gap: 25px;
    transform: translateX(105%);
    transition: 0.35s;
    box-shadow: -20px 0 60px rgba(38, 54, 86, 0.08);
  }
  .mobile-menu.is-open {
    transform: none;
  }
  .mobile-menu a {
    font: 600 20px/1.2 "Poppins";
    letter-spacing: 0.08em;
  }
  .mobile-menu[aria-hidden="false"] {
    visibility: visible;
  }
}
/* =========================================================
Footer
========================================================= */
.site-footer {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 30px;
  align-items: center;
  background: #fff;

  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  padding: 38px 50px 28px;
}
.footer-links {
  display: flex;
  gap: 26px;
  font-size: 11px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0;
}
.copyright {
  margin: 0;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font: 500 9px/1 "Poppins";
  letter-spacing: 0.12em;
  color: rgba(38, 54, 86, 0.45);
  grid-column: auto;
  width: 100%;
  text-align: center;
}
.footer-brand {
  display: none !important;
}
.floating-download {
  display: none !important;
}
/* =========================================================
loop.php（記事一覧）で表示する部分
========================================================= */
#article {
  margin-bottom: min(6vw, 30px);
}
#article a {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: min(4vw, 20px);
  font-size: clamp(12px, 3vw, 20px);
  padding: 0 min(4vw, 20px);
  border-bottom: 1px solid var(--pink);
}
#article a:hover {
  color: var(--pink);
}
#article a h2,
#article a h3 {
  font-size: 1.2em;
}
@media (max-width: 640px) {
  #article a {
    display: block;
  }
}
/* =========================================================
archive.phpなどのページネーション
========================================================= */
ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: min(3vw, 15px);
}
ul.page-numbers li {
  height: fit-content;
}
ul.page-numbers li a:not(a.prev, a.next),
ul.page-numbers li .current {
  display: inline-block;
  font-size: clamp(14px, 3vw, 16px);
  line-height: 1;
  padding: min(2vw, 10px) min(3vw, 15px);
  border: 1px solid var(--pink);
  border-radius: 50%;
}
ul.page-numbers li .current {
  color: var(--soft);
  background-color: var(--pink);
}
ul.page-numbers li a.prev,
ul.page-numbers li a.next {
  font-weight: 500;
}