@import url("https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@500&family=Sawarabi+Gothic&family=Ubuntu:wght@400;500&display=swap");

:root {
  --color_text: #301f09;
  --color_main: #797e3f;
  --color_accent1: #cbb49b;
  --color_base: #f1ebe4;
  --color_clear: transparent;
  --color_white: #fff;
  --color_gray: hsl(0, 0%, 50%);
  --color_lightGray: hsl(0, 0%, 80%);
  --color_red: #7e443f;
  --color_blue: #3f797e;
  --color_purple: #5f4a7e;
  --layer2: 2;
  --layer3: 3;
  --logo-color: var(--color_text);
  --text_small: 0.75em;
  --dot-h: 1.5px;
  --dash-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='2'%3E%3Crect x='0' y='0' width='8' height='2' rx='1' fill='white'/%3E%3C/svg%3E");
}

/* ▼基本的なスタイル */
*,
*::before,
*::after {
  box-sizing: border-box;
  scrollbar-width: none;
}

*::-webkit-scrollbar {
  display: none;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
figure {
  margin: 0;
  padding: 0;
}

img,
video {
  display: block;
  width: 100%;
  height: 100%;
}

p {
  font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  font-feature-settings: "palt" on;
  color: var(--color_text);
  letter-spacing: 0.03em;
  word-break: auto-phrase;
  line-height: 1.7;
  margin-bottom: 0.5em;
}

small {
  font-size: 13px;
}

/* ▼リスト */
li {
  display: block;
}

/* ▼ボタン・フォーム */
a {
  text-decoration: none;
  cursor: pointer;
  font-family: "Kiwi Maru", serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.05em;
  color: var(--color_main);
  display: block;
}

/* フォーム部品の共通フォント */
button,
legend,
label,
select {
  font-family: "Kiwi Maru", serif;
  font-size: 1rem;
  line-height: 1;
}

button {
  letter-spacing: 0.3em;
  color: var(--color_white);
  background: var(--color_main);
  border: solid 1.5px var(--color_main);
  border-radius: 30px;
  padding: 7px 0 7px 0.3em;
  cursor: pointer;
  transition: all 0.3s ease;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}

legend {
  text-align: left;
  width: 100%;
  padding: 0;
  margin-bottom: 8px;
  color: var(--color_text);
}

label {
  cursor: pointer;
  --tag-color: var(--color_main);
  letter-spacing: 0.3em;
  color: var(--tag-color);
  background: var(--color_clear);
  border: solid 1.5px var(--tag-color);
  border-radius: 30px;
  padding: 6px 12px 6px 18px;
  transition: all 0.3s ease;
}

label[data-color="teal"] {
  --tag-color: var(--color_blue);
}

label[data-color="purple"] {
  --tag-color: var(--color_purple);
}

label[data-color="maroon"] {
  --tag-color: var(--color_red);
}

select {
  position: relative;
  width: 100%;
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--color_text);
  background-color: var(--color_white);
  border: solid 1.5px var(--color_main);
  border-radius: 30px;
  padding: 7px 30px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23797e3f' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}

select:focus-visible {
  border: solid 2px var(--color_main);
  outline: 0;
}

@supports (appearance: base-select) {
  select,
  ::picker(select) {
    appearance: base-select;
  }

  /* ボタン部分*/
  select {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: none;
  }

  select::picker-icon {
    content: "";
    position: absolute;
    right: 18px;
    width: 12px;
    height: 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23797e3f' stroke-width='1.5'/%3E%3C/svg%3E")
      no-repeat center / contain;
    transition: scale 0.2s ease;
  }

  select:open::picker-icon {
    scale: 1 -1;
  }

  /* 開いたときのリスト部分 */
  ::picker(select) {
    margin-top: 5px;
    padding: 5px 0;
    background: var(--color_white);
    border: solid 1.5px var(--color_main);
    border-radius: 15px;
  }

  option {
    padding: 8px 20px;
    font-family: "Kiwi Maru", serif;
    font-size: 14px;
    letter-spacing: 0.1em;
    color: var(--color_text);
    cursor: pointer;
  }

  option:hover,
  option:focus-visible {
    color: var(--color_white);
    background: var(--color_main);
  }

  /* 選んでいる項目 */
  option:checked {
    color: var(--color_main);
  }

  option:checked:hover {
    color: var(--color_white);
  }

  /* 左に出るマークを消す */
  option::checkmark {
    display: none;
  }

  /* リストには「並び替え」（空の選択肢）を出さない */
  option[value=""] {
    display: none;
  }
}

/* ▼カスタム */
/* ▽▼見た目は消して読み上げだけ残す */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ▽▼サイトタイトルロゴ */
hgroup.text_logo {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 48px;
  gap: 0.5rem;
  width: 100%;
  height: 1em;
}

hgroup.text_logo .site-title {
  background-color: var(--logo-color);
  mask: url("../img/logo.svg") no-repeat center / contain;
  display: block;
  width: 2.5em;
  height: 1em;
  font-size: 1em;
}

hgroup.text_logo .site-title > span {
  width: 0;
  height: 0;
  font-size: 0;
  overflow: hidden;
}

hgroup.text_logo p {
  font-family: "Kiwi Maru", serif;
  font-weight: 500;
  font-size: 0.31em;
  line-height: 1.4;
  color: var(--logo-color);
  text-align: right;
  margin: auto 0 0 0;
}

hgroup.text_logo p span {
  font-size: 0.87em;
}

/* ▽▼縁取りテキスト */
.text_outline {
  font-weight: 400;
  color: var(--color_white);
  -webkit-text-stroke: var(--color_text) 4px;
  paint-order: stroke;
}

a .text_outline {
  -webkit-text-stroke: var(--color_main) 4px;
}

/* ▽▼フィルター（チェックボックス・ラジオ・タブの丸を隠す） */
.filter input:is([type="checkbox"], [type="radio"]),
.system input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.filter input:checked + label {
  color: var(--color_white);
  background: var(--tag-color);
}

/* ▽▼一覧 */

.list_works {
  --col-max: 4;
  --col-min: 150px;
  --gap-x: 20px;
  display: grid;
  align-content: start;
  grid-template-columns: repeat(
    auto-fill,
    minmax(max(var(--col-min), calc((100% - var(--gap-x) * (var(--col-max) - 1)) / var(--col-max))), 1fr)
  );
  gap: 40px var(--gap-x);
  height: auto;
  min-height: var(--frame-h);
  padding: 0 15px;
}

/* ▽▼ページネーション */
.pagenation {
  margin: 50px 0;
}
.pagenation ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.pagenation a,
.ellipsis {
  font-family: "Ubuntu", sans-serif;
  font-size: 18px;
  line-height: 30px;
  color: var(--color_main);
}

.pagenation a {
  text-align: center;
  min-width: 30px;
  height: 30px;
  border-radius: 100%;
  transition: all 0.3s ease;
}

.pagenation a[aria-current="page"] {
  color: var(--color_white);
  background: var(--color_main);
}

/* ▼ホバー */
@media (hover: hover) and (width > 900px) {
  a:hover {
    color: var(--color_gray);
  }

  button:hover {
    background: var(--color_gray);
    border-color: var(--color_gray);
  }

  label:hover {
    color: var(--color_gray);
    border-color: var(--color_gray);
  }

  /* ▽▼カスタム */
  /* ▽▽▼縁取りテキスト */
  a:hover .text_outline {
    -webkit-text-stroke: var(--color_gray) 4px;
  }

  /* ▽▽▼フィルター */
  .filter input:checked + label:hover {
    color: var(--color_white);
    background: var(--color_gray);
    border-color: var(--color_gray);
  }

  /* ▽▽▼ページネーション */
  .pagenation a:hover {
    background: var(--color_white);
  }

  .pagenation a[aria-current="page"]:hover {
    color: var(--color_white);
    background: var(--color_gray);
  }
}

/* ▼レイアウト */
body {
  --frame-h: calc(100dvh - 100px);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100dvh;
  padding: 50px 5%;
  background: var(--color_base);
  font-family: "Sawarabi Gothic", sans-serif;
  font-size: 16px;
  font-feature-settings: "palt" on;
  letter-spacing: 0.03em;
  line-height: 1.7;
  color: var(--color_text);
}

body.scroll_stop > div.site-frame {
  overflow-y: hidden;
}

body > div.site-frame {
  overflow-x: clip;
  overflow-y: scroll;
  width: 100%;
  max-width: 1280px;
  height: 100%;
  position: relative;
  border-radius: 30px;
}

/* ▽▼ヘッダー */
header {
  width: 100%;
  height: 0;
  position: sticky;
  top: 0;
  left: 0;
  z-index: var(--layer3);
}

header > label,
header > label input,
header > label span {
  display: none;
}

header .menu_contents {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  width: 300px;
  height: var(--frame-h);
  background: var(--color_white);
  border-radius: 30px 0 0 30px;
  padding: 100px 40px 50px;
}

header .menu_contents nav > h3 {
  font-family: "Kiwi Maru", serif;
  font-weight: 500;
  font-size: 1rem;
}

header .menu_contents nav ul li {
  margin-bottom: 0.5rem;
  text-align: right;
}

header .menu_contents nav ul a {
  --line-color: var(--color_main);
  transition: all 0.5s ease-in-out;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--color_text);
  text-shadow:
    1px 1px 0 var(--color_white),
    -1px 1px 0 var(--color_white),
    1px -1px 0 var(--color_white),
    -1px -1px 0 var(--color_white);
  background: linear-gradient(90deg, var(--color_accent1), var(--line-color)) no-repeat bottom right / 0 12px;
}

header .menu_contents nav ul.list_shop a {
  --line-color: var(--color_red);
}

header .menu_contents nav ul.list_sns a {
  --line-color: var(--color_blue);
}

header .menu_contents nav ul a span {
  font-size: 13px;
  margin-right: 0.25rem;
}

header .menu_contents nav li a::before,
header .menu_contents nav li a::after {
  content: "";
  display: none;
  width: 12px;
  height: 15px;
}

header .menu_contents nav li a::before {
  margin-right: 7px;
  background-color: currentColor;
  mask: url("../img/nav-arrow_right.svg") no-repeat center / contain;
}

header .menu_contents nav li a::after {
  margin-left: 5px;
  background: url("../img/nav-arrow_right.svg") no-repeat center / contain;
  transform: scaleX(-1);
}

#page_home:has(#about.active) header nav li.link_about a::after,
#page_home:has(#history.active) header nav li.link_history a::after,
header nav li.link_active a::after {
  display: inline-block;
}

/* ▽▼メインコンテンツ */
main.scroll-frame {
  width: 100%;
  padding-left: 300px;
}

main.scroll-frame > article {
  padding-left: 20px;
}

main.scroll-frame hgroup {
  margin-bottom: 30px;
  padding: 60px 0 0 10px;
}

main.scroll-frame hgroup > h1,
main.scroll-frame hgroup > h2 {
  font-family: "Kiwi Maru", serif;
  font-weight: 400;
  font-size: 48px;
  font-feature-settings: "palt" on;
  letter-spacing: 0.03em;
  color: var(--color_base);
  -webkit-text-stroke: var(--color_main) 4px;
  paint-order: stroke;
  width: 100%;
  height: 1em;
  margin-bottom: 20px;
}

main.scroll-frame hgroup > p {
  font-family: "Ubuntu", sans-serif;
  letter-spacing: 0.05em;
  font-size: 24px;
  color: var(--color_main);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

main.scroll-frame hgroup > p::after,
#page_home #about hgroup p::before {
  content: "";
  width: 100%;
  height: var(--dot-h);
  background-color: var(--color_main);
  mask-image: var(--dash-mask);
}

/* ▽▼フッター */
footer {
  width: 100%;
  height: 100px;
  background: var(--color_white);
  padding: 20px 15px 16px;
}

footer > * {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--color_main);
  border-radius: 0 0 20px 0;
}

footer > *::before {
  --dash: #000 0 6px, transparent 6px 12px;
  content: "";
  position: absolute;
  inset: 0;
  border: solid 2px var(--color_main);
  border-radius: inherit;
  pointer-events: none;
  mask:
    repeating-linear-gradient(to right, var(--dash)) left top / 100% 2px no-repeat,
    repeating-linear-gradient(to bottom, var(--dash)) left top / 2px calc(100% - 30px) no-repeat,
    repeating-linear-gradient(to right, var(--dash)) center bottom / calc(100% - 60px) 2px no-repeat,
    repeating-linear-gradient(to bottom, var(--dash)) right top / 2px calc(100% - 30px) no-repeat,
    repeating-conic-gradient(from 90deg at 0 0, #000 0 12deg, transparent 12deg 24deg) right bottom / 30px 30px
      no-repeat,
    repeating-conic-gradient(from 180deg at 100% 0, #000 0 12deg, transparent 12deg 24deg) left bottom / 30px 30px
      no-repeat;
}

/* ▽▼レイアウト：ホバー */
@media (hover: hover) and (width > 900px) {
  /* ▽▽▼ヘッダー */
  header .menu_contents hgroup.text_logo:hover {
    --logo-color: var(--color_main);
  }

  header .menu_contents nav a:hover {
    color: var(--color_text);
    background-size: 100% 12px;
  }
}

/* ▽▼レイアウト：SP画面 */
@media (width <=900px) {
  body {
    --frame-h: 100dvh;
    display: block;
    padding: 0;
  }

  body:has(header > label input:checked) {
    overflow-y: hidden;
  }

  body > div.site-frame {
    border-radius: 0;
    height: auto;
    overflow: visible;
  }

  /* ▽▽▼ヘッダー */
  header {
    position: fixed;
  }

  header > label {
    z-index: var(--layer3);
    position: fixed;
    top: 20px;
    right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--color_white);
    border: solid 2px var(--color_main);
    border-radius: 100%;
    margin: 10px;
  }

  header > label span {
    width: 100%;
    height: 100%;
  }

  header > label span img {
    object-fit: cover;
  }

  header > label:has(input:checked) .close,
  header > label:has(input:not(:checked)) .open {
    display: block;
  }

  /* 背景の暗幕 */
  header::after {
    z-index: 1;
    position: fixed;
    inset: 0;
    content: "";
    display: block;
    height: 100dvh;
    background: var(--color_base);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }

  header:has(input:checked)::after {
    opacity: 0.8;
    pointer-events: auto;
  }

  header .menu_contents {
    z-index: var(--layer2);
    position: fixed;
    align-items: center;
    gap: 30px;
    width: 100%;
    height: auto;
    max-height: 100dvh;
    overflow-y: auto;
    background: var(--color_main);
    border-radius: 0 0 30px 30px;
    padding: 90px 30px 50px;
    --logo-color: var(--color_white);
    transform: translateY(-100%);
    transition: transform 0.4s ease;
  }

  header:has(input:checked) .menu_contents {
    transform: translateY(0);
  }

  header .menu_contents > a,
  header .menu_contents nav {
    width: 100%;
    max-width: 320px;
  }

  header .menu_contents > a hgroup.text_logo {
    justify-content: flex-end;
  }

  header .menu_contents nav > h3 {
    color: var(--color_white);
    text-align: right;
    margin-top: 1rem;
  }

  header .menu_contents nav ul li {
    text-align: left;
  }

  header .menu_contents nav ul a {
    color: var(--color_white);
    text-shadow: none;
  }

  header .menu_contents nav ul a::after {
    display: none !important;
  }

  #page_home:has(#about.active) header nav li.link_about a::before,
  #page_home:has(#history.active) header nav li.link_history a::before,
  header nav li.link_active a::before {
    display: inline-block;
  }

  /* ▽▽▼メインコンテンツ */
  main.scroll-frame {
    padding: 0;
  }

  main.scroll-frame > article {
    padding-left: 0;
  }

  /* ▽▽▼フッター */
  footer > * {
    border-radius: 0 0 30px 30px;
  }
}

/* ▼トップページ */
#page_home main.scroll-frame hgroup {
  margin-bottom: 50px;
}

/* ▽▼ヒーロー要素 */
#page_home #hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  height: var(--frame-h);
  background: var(--color_main);
  --logo-color: var(--color_white);
  border-radius: 30px;
  margin-bottom: 50px;
}

#page_home #hero > img {
  width: 20dvw;
  height: 20dvw;
}

#page_home #hero hgroup.text_logo {
  font-size: 8dvw;
}

#page_home #hero .news-comment {
  position: absolute;
  top: 40%;
  display: flex;
  justify-content: center;
  max-width: 300px;
  padding: 25px 30px;
  background: var(--color_white);
  border-radius: 30px;
  opacity: 0;
  transition:
    translate 1s,
    opacity 0.5s;
}

#page_home #hero .news-comment.active {
  translate: 0 -150%;
  opacity: 1;
}

#page_home #hero .news-comment.left {
  left: 10%;
}

#page_home #hero .news-comment.right {
  right: 10%;
}

#page_home #hero .news-comment::before {
  content: "";
  display: block;
  width: 45px;
  height: 30px;
  clip-path: polygon(0 0, 100% 0%, 100% 100%);
  position: absolute;
  bottom: -15px;
  background: var(--color_white);
}

#page_home #hero .news-comment.right::before {
  clip-path: polygon(0 0, 0 100%, 100% 0);
}

#page_home #hero .news-comment p {
  color: var(--color_blue);
  font-size: var(--text_small);
}

/* ▽▼あいさつ */
#page_home #about {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: var(--frame-h);
  padding: 0;
  margin: 20vh 0;
}

#page_home #about > div {
  padding: 200px 0;
  background-image: linear-gradient(
    0deg,
    var(--color_base),
    var(--color_white) 20%,
    var(--color_white) 80%,
    var(--color_base)
  );
  text-align: center;
}

#page_home #about hgroup {
  padding: 0;
}

#page_home #about hgroup h2 {
  text-align: center;
  color: var(--color_white);
}

/* ▽▼コンテンツナビ */
#page_home #contents-nav {
  width: 100%;
  height: calc(var(--frame-h) + 350vh);
  margin: 20dvh 0;
}

#page_home #contents-nav .slidsr {
  position: sticky;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 40px;
  height: var(--frame-h);
  width: 100%;
}

#page_home #contents-nav .slidsr .visual {
  position: relative;
  overflow: hidden;
  flex: 0 0 50%;
  height: 100%;
  background: var(--color_white);
  cursor: pointer;
}

#page_home #contents-nav .visual > * {
  position: absolute;
  inset: 0;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
  background: var(--color_white);
}

#page_home #contents-nav .visual .is-show {
  opacity: 1;
  transition: opacity 0.4s ease;
}

#page_home #contents-nav .visual .img-hover {
  z-index: 1;
}

#page_home #contents-nav .visual .illustration {
  object-fit: contain;
  scale: 1.5;
}

#page_home #contents-nav .visual .illustration.img-hover {
  object-fit: cover;
  scale: 1;
}

#page_home #contents-nav .visual .graphic {
  object-fit: contain;
}

#page_home #contents-nav .visual .img-layer.graphic {
  background: var(--color_main);
  scale: 1.3;
}

#page_home #contents-nav .visual .trpg {
  object-fit: cover;
  transform-origin: center top;
}

#page_home #contents-nav .links {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}

#page_home #contents-nav .links a {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  font-size: 1.15rem;
  opacity: 0.35;
  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    color 0.4s ease;
}

#page_home #contents-nav .links a .text_outline {
  font-size: 1.65em;
}

#page_home #contents-nav .links a .text_outline small {
  font-size: 0.75em;
}

#page_home #contents-nav .links a.is-active {
  opacity: 1;
  transform: translateX(12px);
}

/* ▽▼経歴 */
#page_home #history {
  --dot-line: repeating-linear-gradient(to right, var(--color_accent1) 0 6px, transparent 6px 12px);
  background-image: linear-gradient(var(--color_base), var(--color_base) 30%, var(--color_main));
  padding-bottom: 50px;
}

#page_home #history section {
  padding: 15px 15px 30px;
  background: var(--color_white);
  border-radius: 30px;
  margin: 0 40px 50px 20px;
}

#page_home #history section h3 {
  font-family: "Kiwi Maru", serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.05em;
  color: var(--color_accent1);
  margin-bottom: 0.75rem;
}

#page_home #history dl {
  display: grid;
  grid-template-columns: minmax(4rem, max-content) 1fr;
  overflow: clip;
  padding-bottom: var(--dot-h);
  background: var(--dot-line) repeat-x left bottom / auto var(--dot-h);
}

#page_home #history dl dt,
#page_home #history dl dd {
  position: relative;
  padding: 0.6rem 0;
}

#page_home #history dl dt {
  grid-column: 1;
  padding-right: 1rem;
}

#page_home #history dl dd {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25em 1em;
}

#page_home #history dl dt::before,
#page_home #history dl dd::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--dot-h);
  background-image: var(--dot-line);
}

/* 「作品へ」リンク */
#page_home #history dl dd a {
  margin-left: auto;
  white-space: pre;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--text_small);
  padding-right: 0.25rem;
}

#page_home #history dl dd a::after {
  content: "";
  display: block;
  width: 0.5em;
  height: 0.5em;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

/* ▽▼トップページ：SP画面 */
@media (width <=900px) {
  /* ▽▽▼ヒーロー要素 */
  #page_home #hero {
    margin: 20px 15px;
    width: auto;
    height: calc(100dvh - 20px * 2);
  }

  #page_home #hero > img {
    width: 50dvw;
    height: 50dvw;
  }

  #page_home #hero hgroup.text_logo {
    font-size: 10dvw;
  }

  /* ▽▽▼コンテンツナビ */
  #page_home #contents-nav .slidsr {
    gap: 0;
    padding: 20px 15px;
  }

  #page_home #contents-nav .slidsr .visual {
    flex-basis: auto;
    width: 100%;
    height: calc(100% - 400px);
    border-radius: 30px;
    z-index: var(--layer2);
  }

  #page_home #contents-nav .visual .img-layer.graphic {
    scale: 1;
  }

  #page_home #contents-nav .visual .trpg {
    object-fit: contain;
    scale: 2.5;
  }

  #page_home #contents-nav .links {
    height: 400px;
    padding: 0 30px;
  }

  /* ▽▽▼経歴 */
  #page_home #history section {
    margin: 0 20px 50px;
  }

  #page_home #history dl {
    grid-template-columns: 1fr;
  }

  #page_home #history dl dt,
  #page_home #history dl dd {
    grid-column: 1;
    padding-right: 0;
  }
}

/* ▼作品一覧ページ */
/* ▽▼絞り込み・並び替え */
#page_gallery .filter {
  display: grid;
  grid-template-columns: 170px 1fr;
  grid-template-areas:
    "reset tags"
    "sort  tags";
  grid-template-rows: auto 1fr;
  gap: 40px 20px;
  align-items: start;
  padding: 0 0 0 15px;
  margin-bottom: 50px;
}

#page_gallery .filter .tags {
  grid-area: tags;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#page_gallery .filter button[type="reset"] {
  grid-area: reset;
  width: 100%;
}

#page_gallery .filter .sort {
  grid-area: sort;
}

/* ▽▼一覧 */
#page_gallery .list_works > li > a {
  overflow: hidden;
  aspect-ratio: 1 / 1;
  width: 100%;
  height: 100%;
  background: var(--color_white);
  border: solid 3px var(--color_white);
  border-radius: 15px;
  transition: all 0.3s ease;
}

#page_gallery .list_works > li > a img,
#page_gallery .list_works > li > a video {
  object-fit: cover;
  object-position: top;
  transition: all 0.2s ease;
}

#page_gallery .list_works > li > a > span {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--color_main);
  font-size: 2rem;
  letter-spacing: 0.1em;
}

/* ▽▼ポップアップ */
#page_gallery .list_works .detail {
  z-index: var(--layer3);
  --detail-gray: var(--color_gray);
  width: min(1280px, 80vw);
  height: var(--frame-h);
  max-width: none;
  max-height: none;
  overflow-y: auto;
  color: var(--color_text);
  background: var(--color_white);
  border: solid 2px var(--color_gray);
  border-radius: 30px;
  padding: 0;
  box-shadow: 0 4px 20px rgb(0 0 0 / 0.35);
}

#page_gallery .list_works .detail[open] {
  display: flex;
  flex-direction: column;
}

#page_gallery .list_works .detail::backdrop {
  background: var(--color_base);
  opacity: 0.8;
}

/* 閉じるボタン */
#page_gallery .list_works .detail > form {
  z-index: var(--layer2);
  position: sticky;
  top: 0;
  display: flex;
  justify-content: flex-end;
  height: 0;
  width: 100%;
}

#page_gallery .list_works .detail .close {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: var(--color_gray);
  border: none;
  border-radius: 100%;
  outline: solid 2.5px var(--color_white);
  padding: 0;
  margin: 15px;
}

#page_gallery .list_works .detail .close::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color_white);
  mask: url("../img/icon_close.svg") no-repeat center / contain;
}

/* 画像 */
#page_gallery .list_works .detail .images {
  flex: 1 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  justify-content: center;
  gap: 30px;
  padding: 30px 15px 15px;
}

#page_gallery .list_works .detail .images img,
#page_gallery .list_works .detail .images video {
  flex: 1;
  width: auto;
  max-width: min(70dvh, 100%);
  height: auto;
  max-height: 70dvh;
  object-fit: contain;
}

#page_gallery .list_works .detail .images img {
  opacity: 0;
  transition: opacity 0.3s ease;
}

#page_gallery .list_works .detail .images img.is-loaded {
  opacity: 1;
}

/* PDFを開くリンク */
#page_gallery .list_works .detail .images > a {
  padding: 20px;
  text-align: center;
  font-size: 16px;
  border: solid 1px var(--color_main);
  border-radius: 15px;
}

/* タイトル・日付 */
#page_gallery .list_works .detail .title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 20px;
  padding: 0 30px 10px;
}

#page_gallery .list_works .detail .title h2 {
  font-family: "Kiwi Maru", serif;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.4;
  letter-spacing: 0.2em;
}

#page_gallery .list_works .detail .date {
  font-family: "Ubuntu", sans-serif;
  font-size: 1rem;
  color: var(--color_gray);
  margin: 0;
}

/* ▽▽▼説明文・ボタン */
#page_gallery .list_works .detail .info {
  background: var(--detail-gray);
  padding: 1.5rem 30px 30px;
}

#page_gallery .list_works .detail .info p {
  font-size: 1rem;
  color: var(--color_white);
  margin-bottom: 0;
}

#page_gallery .list_works .detail .links {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

#page_gallery .list_works .detail .links a {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  font-size: 1rem;
  color: var(--detail-gray);
  background: var(--color_white) linear-gradient(var(--color_gray), var(--color_gray)) no-repeat right / 0 100%;
  border: solid 2px var(--color_white);
  border-radius: 30px;
  padding: 5px 5px 5px 30px;
  transition:
    background-size 0.3s ease,
    color 0.3s ease;
}

#page_gallery .list_works .detail .links a::after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%237e7e7e'/%3E%3Cpath d='M8 5.5l4.5 4.5L8 14.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

/* ▽▼フッター */
#page_gallery footer {
  background: var(--color_clear);
}

/* ▽▼作品一覧：ホバー */
@media (hover: hover) and (width > 900px) {
  /* ▽▽▼一覧 */
  #page_gallery .list_works > li > a:hover {
    border-color: var(--color_gray);
    background-color: var(--color_gray);
  }

  #page_gallery .list_works > li > a:hover img,
  #page_gallery .list_works > li > a:hover video {
    scale: 1.2;
    filter: grayscale(100%) brightness(110%);
  }

  #page_gallery .list_works > li > a:hover > span {
    color: var(--color_white);
    scale: 1.1;
  }

  /* ▽▽▼ポップアップ */
  #page_gallery .list_works .detail .close:hover {
    scale: 1.2;
  }

  #page_gallery .list_works .detail .links a:hover {
    color: var(--color_white);
    background-size: 100% 100%;
  }
}

/* ▽▼作品一覧：SP画面 */
@media (width <=900px) {
  #page_gallery .filter {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "reset sort"
      "tags  tags";
    grid-template-rows: auto auto;
    gap: 20px 10px;
    padding: 0 15px;
    margin-bottom: 30px;
  }

  #page_gallery .tag {
    font-size: 13px;
    letter-spacing: 0.15em;
    padding: 6px 10px 6px 13px;
  }

  #page_gallery .filter [type="reset"],
  #page_gallery #sort {
    font-size: 13px;
  }

  #page_gallery .list_works .detail {
    width: 94vw;
    height: 97dvh;
  }

  #page_gallery .list_works .detail > form {
    top: 12px;
    padding: 0 12px;
  }

  #page_gallery .list_works .detail .images {
    flex-direction: column;
    align-items: center;
    padding: 70px 20px 30px;
  }

  #page_gallery .list_works .detail .images img,
  #page_gallery .list_works .detail .images video {
    max-height: none;
  }

  #page_gallery .list_works .detail .title {
    padding: 0 20px 10px;
  }

  #page_gallery .list_works .detail .title h2 {
    font-size: 22px;
    letter-spacing: 0.1em;
  }

  #page_gallery .list_works .detail .info {
    padding: 30px 20px 40px;
  }
}

/* ▼TRPGシートページ */
#page_trpg main.scroll-frame article {
  padding: 0;
}

#page_trpg main.scroll-frame hgroup {
  margin-left: 20px;
}

/* ▽▼システムのタブ */
#page_trpg .system {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}

#page_trpg .system label {
  border: none;
  border-radius: 20px 20px 0 0;
  padding: 10px 8px 12px;
  letter-spacing: 0;
}

#page_trpg .system label:first-of-type {
  border-radius: 0 20px 0 0;
}

#page_trpg .system label:has(:checked) {
  background: var(--color_white);
}

#page_trpg .system span {
  display: block;
  font-family: "Ubuntu", "Kiwi Maru", sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  color: var(--tag-color);
  border: solid 1.5px var(--tag-color);
  border-radius: 30px;
  padding: 4px 16px 4px 20px;
  transition: all 0.3s ease;
}

#page_trpg .system :checked + span {
  color: var(--color_white);
  background: var(--tag-color);
}

#page_trpg .system :focus-visible + span {
  outline: solid 2px var(--color_text);
  outline-offset: 2px;
}

#page_trpg .board {
  min-height: var(--frame-h);
  background: var(--color_white);
  border-radius: 0 30px 0 0;
  padding: 20px 40px 30px;
}

/* ▽▼絞り込み・並び替え */
#page_trpg .filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 50px;
}

#page_trpg .filter button[type="reset"] {
  width: 170px;
  margin-right: calc(100% - 170px);
}

/* スライダー */
#page_trpg .filter .range {
  flex: 1 1 180px;
}

#page_trpg .filter .range p {
  font-family: "Kiwi Maru", serif;
  font-size: 14px;
  color: var(--color_main);
  margin: 10px 0 0;
}

#page_trpg .filter .range output {
  margin-left: 1em;
  font-size: 12px;
  color: var(--color_text);
}

#page_trpg .slider {
  --min: 0;
  --max: 1;
  --thumb: 14px;
  position: relative;
  height: 20px;
  background: linear-gradient(var(--color_lightGray), var(--color_lightGray)) no-repeat center / 100% 2px;
}

#page_trpg .slider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--min));
  right: calc(var(--thumb) / 2 + (100% - var(--thumb)) * (1 - var(--max)));
  height: 4px;
  translate: 0 -50%;
  background: var(--color_main);
  border-radius: 2px;
}

#page_trpg .slider input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: none;
  background: none;
  pointer-events: none;
}

#page_trpg .slider input::-webkit-slider-thumb {
  appearance: none;
  pointer-events: auto;
  width: var(--thumb);
  height: var(--thumb);
  background: var(--color_white);
  border: solid 2px var(--color_main);
  border-radius: 100%;
  cursor: pointer;
}

#page_trpg .slider input::-moz-range-thumb {
  pointer-events: auto;
  width: var(--thumb);
  height: var(--thumb);
  background: var(--color_white);
  border: solid 2px var(--color_main);
  border-radius: 100%;
  cursor: pointer;
}

#page_trpg .slider input:focus-visible::-webkit-slider-thumb {
  outline: solid 2px var(--color_text);
  outline-offset: 2px;
}

/* セレクト */
#page_trpg .filter .select {
  flex: 1 1 170px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-top: 26px;
}

/* 並び替え */
#page_trpg .filter .sort {
  flex: 1 1 200px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#page_trpg .filter .sort label::after {
  content: "-";
  display: inline-block;
  width: 1.2em;
  margin-left: 0.2em;
  font-size: 0.7em;
  letter-spacing: 0;
  text-align: center;
}

#page_trpg .filter .sort input:checked + label::after {
  content: "▲";
}

#page_trpg .filter .sort[data-dir="desc"] input:checked + label::after {
  content: "▼";
}

/* ▽▼キャラ一覧 */
#page_trpg .list_works {
  --gap-x: 0px;
}

#page_trpg .list_works > li > a {
  color: var(--color_text);
  border-radius: 15px;
  padding: 10px 10px 20px;
  transition: all 0.3s ease;
}

#page_trpg .list_works > li > a > .image {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 3 / 2;
  font-family: "Ubuntu", sans-serif;
  font-size: 14px;
  color: var(--color_lightGray);
  background: var(--color_white);
  padding: 5px 0;
  border: solid 2px var(--color_main);
  border-radius: 15px;
  transition: all 0.3s ease;
}

#page_trpg .list_works > li > a > .image img {
  object-fit: contain;
  scale: var(--zoom, 4.5);
  transform-origin: top;
  transition: all 0.3s ease;
}

/* キャラごとの調整 */
#page_trpg .list_works > li[data-id="nonoyama-s"] > a img {
  translate: -20px -60px;
}

#page_trpg .list_works > li[data-id="ikazuki-a"] > a img {
  translate: 0 -10px;
}

#page_trpg .list_works > li[data-id="hajimeta-m"] > a img {
  translate: 30px 0;
}

#page_trpg .list_works > li[data-id="kuroyanagi-t"] > a img {
  translate: 0 -25px;
}

#page_trpg .list_works > li[data-id="komaya-k"] > a img {
  --zoom: 2.5;
  translate: 0 -15px;
}

#page_trpg .list_works > li[data-id="nakaema-a"] > a img {
  translate: -15px 0;
}

#page_trpg .list_works > li[data-id="matsuyama-h"] > a img {
  translate: -20px -30px;
}

#page_trpg .list_works > li[data-id="funatsuki-j"] > a img {
  --zoom: 1.1;
}

#page_trpg .list_works > li[data-id="hugh-m"] > a img {
  --zoom: 3.5;
  translate: 50% -10px;
}

#page_trpg .list_works > li[data-id="chikami-m"] > a img {
  --zoom: 3.5;
}

#page_trpg .list_works > li[data-id="tanaka-s"] > a img {
  translate: 10px -10px;
}

#page_trpg .list_works > li[data-id="taya-a"] > a img {
  --zoom: 1.4;
  translate: 0 -5px;
}

#page_trpg .list_works > li:is([data-id="hoshimitsu-y"], [data-id="shimoto-s"], [data-id="kanbe-m"]) > a img {
  --zoom: 2.5;
}

#page_trpg .list_works > li[data-id="komiyama-s"] > a img {
  --zoom: 1.8;
  translate: 0 -8px;
}

/* 通過シナリオ */
#page_trpg .list_works > li > a > p {
  font-size: 12px;
  line-height: 1.5;
  margin: 8px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 名前 */
#page_trpg .list_works > li > a > h2 {
  height: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Kiwi Maru", serif;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.3;
  letter-spacing: 0.15em;
  text-align: center;
  color: var(--color_text);
  margin-top: 5px;
}

#page_trpg .list_works > li > a > h2 rt {
  font-size: 0.55em;
  letter-spacing: 0.2em;
  color: var(--color_main);
}

/* ▽▼フッター */
#page_trpg footer > * {
  color: var(--color_accent1);
}

#page_trpg footer > *::before {
  border-color: var(--color_accent1);
}

/* ▽▼キャラシ一覧：ホバー */
@media (hover: hover) and (width > 900px) {
  #page_trpg .system label:hover {
    color: var(--tag-color);
  }

  #page_trpg .system label:hover span {
    color: var(--color_white);
    background: var(--tag-color);
  }

  #page_trpg .list_works > li > a:hover {
    scale: 0.85;
    box-shadow: 0 5px 10px 0 rgb(0 0 0 / 0.2);
  }

  #page_trpg .list_works > li > a:hover > .image {
    border-color: var(--color_gray);
  }

  #page_trpg .list_works > li > a:hover > .image img {
    filter: grayscale(100%) brightness(110%);
  }

  #page_trpg .list_works > li > a:hover > h2 {
    color: var(--color_gray);
  }
}

/* ▽▼キャラシ一覧：SP画面 */
@media (width <=900px) {
  #page_trpg .system label {
    padding: 10px 8px 8px;
  }

  #page_trpg .system span {
    font-size: 0.9rem;
    padding: 3px 10px 3px 12px;
  }

  #page_trpg .board {
    border-radius: 0;
    padding: 20px 15px 30px;
  }

  #page_trpg .filter button[type="reset"] {
    width: 100%;
  }

  #page_trpg .filter .select select {
    white-space: nowrap;
    padding: 7px 24px 7px 10px;
  }

  #page_trpg .list_works {
    --gap-x: 15px;
    row-gap: 30px;
    padding: 0;
  }
}