@charset "utf-8";

/*
Theme Name: 名古屋市子ども会運営ナビ
*/

/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
/*!
 * Some styles based on Bootstrap (https://getbootstrap.com)
 * Copyright (c) Twitter, Inc. and The Bootstrap Authors
 * Licensed under the MIT License
 */


/* ============================================================
# CSS variables
============================================================ */

:root {
  --primary: var(--theme-1-600);

  /* テーマカラー */
  --theme-1: var(--theme-1-500); /* hsl(24 96% 45%); */
  --theme-1-50: hsl(37 94% 97%);
  --theme-1-100: hsl(37 94% 94%);
  --theme-1-200: #fde4bc; /* hsl(37 94% 86%); */
  --theme-1-400: #f08300; /* hsl(33 100% 47%); */
  --theme-1-500: #e05e05; /* hsl(24 96% 45%); */
  --theme-1-600: #bb4d03; /* hsl(24 97% 37%) */
  --theme-2: var(--theme-2-500);
  --theme-2-200: #def2b8;
  --theme-2-500: #648e11;
  --theme-2-600: #567a0d;
  --theme-3: var(--theme-3-500);
  --theme-3-200: #c5e7fc;
  --theme-3-500: #2380af;
  --theme-3-600: #1b6991;
  --theme-4: var(--theme-4-500);
  --theme-4-200: #fce3ed;
  --theme-4-500: #db61ca;
  --theme-4-600: #ab4a9d;
  --theme-5: var(--theme-5-500);
  --theme-5-200: #efd8c2;
  --theme-5-500: #b26a22;
  --theme-5-600: #90551a;
  /* ナビ、フッター背景 */
  --content-bg01: #ffca85;
  /* ヘッダー、トップ背景 */
  --content-bg02: #fffbd4;

  --black: #000;
  --white: #fff;
  --gray: var(--gray-500);
  --whitesmoke: var(--gray-100);

  --gray-50: hsl(30 5% 98%);
  --gray-100: hsl(30 5% 96%);
  --gray-200: hsl(30 5% 90%);
  --gray-300: hsl(30 5% 83%);
  --gray-400: hsl(30 5% 64%);
  --gray-500: hsl(30 5% 45%);
  --gray-600: hsl(30 5% 32%);
  --gray-700: hsl(30 5% 25%);
  --gray-800: hsl(30 5% 15%);
  --gray-900: hsl(30 5% 9%);
  --gray-950: hsl(30 5% 4%);

  --body-font-family: var(--font-family-sans);
  --body-font-size: clamp(0.9375rem, 0.87rem + 0.28vw, 1.0625rem);
  --body-font-weight: 400;
  --body-line-height: 1.5;
  --body-color: #222;
  --body-bg: #fff;

  --border-width: 1px;
  --border-style: solid;
  --border-color: var(--gray-400);

  --link-color: hsl(230 85% 40%);
  --link-hover-color: hsl(230 90% 45%);

  --btn-color: var(--body-color);
  --btn-hover-color: var(--body-color);
  --btn-bg: var(--gray-50);
  --btn-hover-bg: var(--gray-100);
  --btn-border: var(--gray-300);
  --btn-hover-border: var(--gray-400);
  --btn-active-color: var(--body-color);
  --btn-active-bg: var(--gray-100);
  --btn-active-border-color: var(--gray-400);

  --font-family-sans: "BIZ UDPGothic", "Meiryo", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  --font-family-serif: "BIZ UDPMincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --space-g-3: clamp(0.75rem, 0.75rem + 0.333vw, 1rem);
  --space-g-4: clamp(1rem, 1rem + 0.667vw, 1.5rem);
  --space-g-5: clamp(1rem, 1rem + 2.667vw, 3rem);
  --space-g-6: clamp(1rem, 1rem + 4.667vw, 4.5rem);

  --space-m-3: clamp(0.75rem, 0.75rem + 0.333vw, 1rem);
  --space-m-4: clamp(1.25rem, 1.25rem + 0.333vw, 1.5rem);
  --space-m-5: clamp(1.5rem, 1.5rem + 2vw, 3rem);
  --space-m-6: clamp(2.5rem, 2.5rem + 2.667vw, 4.5rem);
  --space-m-7: clamp(3rem, 3rem + 4vw, 6rem);
  --space-m-8: clamp(3rem, 3rem + 6vw, 7.5rem);

  --space-p-3: clamp(0.75rem, 0.75rem + 0.333vw, 1rem);
  --space-p-4: clamp(1rem, 1rem + 0.667vw, 1.5rem);
  --space-p-5: clamp(1rem, 1rem + 2.667vw, 3rem);
  --space-p-6: clamp(1rem, 1rem + 4.667vw, 4.5rem);
  --space-p-7: clamp(1rem, 1rem + 6.667vw, 6rem);
  --space-p-8: clamp(1rem, 1rem + 10.667vw, 9rem);
}



/* ============================================================
# Reset
============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0s !important;
    transition-duration: 0s !important;
  }
}
@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}
::selection {
  background: hsl(54 85% 45% / 0.5);
  text-shadow: none;
}
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}
body {
  background-color: var(--body-bg);
  color: var(--body-color);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
  letter-spacing: 0.03em;
  margin: 0;
  text-align: left;
}
hr {
  border: 0;
  border-top: 1px solid var(--border-color);
  margin: 1.5rem 0;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0.5rem;
  text-wrap: balance;
}
h1, .h1 {
  font-size: clamp(1.5rem, 1.35rem + 1vw, 2.125rem);
}
h2, .h2 {
  font-size: clamp(1.4375rem, 1.32rem + 0.7vw, 1.875rem);
}
h3, .h3 {
  font-size: clamp(1.375rem, 1.28rem + 0.4vw, 1.625rem);
}
h4, .h4 {
  font-size: clamp(1.1875rem, 1.14rem + 0.3vw, 1.375rem);
}
h5, .h5,
h6, .h6 {
  font-size: clamp(1.0625rem, 1.02rem + 0.25vw, 1.1875rem);
}
p {
  line-height: 2;
  margin-top: 0;
  margin-bottom: 1.5rem;
  text-wrap: pretty;
}
ol, ul {
  padding-left: 2rem;
}
ol, ul, dl {
  margin-top: 0;
  margin-bottom: 1.5rem;
}
ol ol, ul ul, ol ul, ul ol {
  margin-bottom: 0;
}
dt {
  font-weight: 700;
}
dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}
b, strong {
  font-weight: bolder;
}
small, .small {
  font-size: 0.875em;
}
mark, .mark {
  background-color: #ff0;
  color: #000;
  padding: 0.2em;
}
sub, sup {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
a {
  color: var(--link-color);
  text-decoration: underline;
}
a:hover {
  color: var(--link-hover-color);
}
a:not([href]):not([class]),
a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}
pre, code, kbd, samp {
  font-family: var(--font-monospace);
  font-size: 1em;
}
figure {
  margin: 0 0 1.5rem;
}
img, svg {
  vertical-align: middle;
}
img {
  height: auto;
  max-width: 100%;
}
table {
  border-collapse: collapse;
  border-color: currentcolor;
  /* margin-bottom: 1.5rem; */
}
caption {
  caption-side: bottom;
  color: var(--gray-500);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: left;
}
table caption {
  caption-side: top;
  font-size: 0.875em;
  padding-bottom: 0;
}
thead, tbody, tfoot, tr, td, th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}
input, button, select, optgroup, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  appearance: button;
}
textarea {
  overflow: auto;
  resize: vertical;
}
legend {
  padding: 0;
}
progress {
  vertical-align: baseline;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield;
  appearance: textfield;
  outline-offset: -2px;
}
::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
summary {
  display: list-item;
  cursor: pointer;
}




/* ============================================================
# Layout
============================================================ */

.container {
  margin-inline: auto;
  width: min(100% - 15px * 2, 1000px);
}




/* ============================================================
# Content
============================================================ */

/* ### Lists
---------------------------------------- */

.list_unstyled {
  padding-left: 0;
  list-style: none;
}



/* ## Figures
======================================== */

.figure {
  display: inline-block;
}
.figure__img {
  margin-bottom: 0.375rem;
  line-height: 1;
}
.figure__caption {
  font-size: 0.875em;
  color: #666;
}




/* ## Forms
======================================== */


/* ### form control
---------------------------------------- */

.formControl {
  display: block;
  width: 100%;
  padding: 0.5em 0.75em;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #222;
  background-color: hsl(204 55% 98%);
  background-clip: padding-box;
  border: 1px solid hsl(204 15% 70%);
  appearance: none;
  border-radius: 4px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  font-family: "Yu Gothic", "YuGothic", sans-serif;
  font-weight: 500;
}
.formControl:focus {
  color: #222;
  background-color: #fff;
  border-color: hsl(204 70% 60%);
  outline: 0;
  box-shadow: 0 0 0 0.2rem hsl(204 100% 50% / 0.25);
}
.formControl::placeholder {
  color: #999;
}
.formControl[type=file] {
  cursor: pointer;
  overflow: hidden;
}
.formControl::file-selector-button {
  padding: 0.5rem 0.75rem;
  margin: -0.5rem -0.75rem;
  margin-inline-end: 0.75rem;
  color: #222;
  background-color: #eee;
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: 1px;
  border-radius: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

textarea.formControl {
  field-sizing: content;
  min-height: calc(4lh + 1rem + 2px);
  max-height: calc(8lh + 1rem + 2px);
}


/* ### form select
---------------------------------------- */

.formSelect {
  display: block;
  width: 100%;
  padding: 0.5em 2.25em 0.5em 0.75em;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #222;
  background-color: hsl(204 55% 98%);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75em center;
  background-size: 16px 14px;
  border: 1px solid hsl(204 15% 70%);
  border-radius: 4px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  appearance: none;
}
.formSelect:focus {
  border-color: hsl(204 70% 60%);
  outline: 0;
  box-shadow: 0 0 0 0.2rem hsl(204 100% 50% / 0.25);
}
.formSelect[multiple],
.formSelect[size]:not([size="1"]) {
  padding-right: 0.75rem;
  background-image: none;
}
.formSelect {
  cursor: pointer;
}


/* ### form check
---------------------------------------- */

.formCheck {
  display: flex;
  min-height: 1.5rem;
  padding-left: 1.5em;
  margin-bottom: 0.125rem;
}
.formCheck .formCheck__input {
  margin-left: -1.5em;
}
.formCheck .formCheck__label {
  padding-left: 0.5em;
}
.formCheck_inline {
  display: inline-flex;
  margin-right: 1.25em;
}

.formCheck__input {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.25em;
  vertical-align: top;
  background-color: hsl(204 55% 98%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid rgb(0 0 0 / 0.25);
  appearance: none;
}
.formCheck__input[type=checkbox] {
  border-radius: 4px;
}
.formCheck__input[type=radio] {
  border-radius: 50%;
}
.formCheck__input:active {
  filter: brightness(90%);
}
.formCheck__input:focus {
  border-color: hsl(204 70% 60%);
  outline: 0;
  box-shadow: 0 0 0 0.2rem hsl(204 100% 50% / 0.25);
}
.formCheck__input:checked {
  background-color: hsl(204 80% 50%);
  border-color: hsl(204 80% 50%);
}
.formCheck__input:checked[type=checkbox] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.formCheck__input:checked[type=radio] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}




/* ============================================================
# Main frame (Common)
============================================================ */

/* ## Skip Link
======================================== */

.skipLink {
  background-color: var(--theme-1-600);
  color: var(--white);
  padding: 8px 16px;
  position: absolute;
  top: 0;
  left: 0;
  text-decoration: none;
  transform: translateY(-100%);
  transition: transform 0.15s;
  z-index: 1000;
}
.skipLink:focus {
  transform: translateY(0);
}


/* ## Global nav for desktop
======================================== */

.globalNav {
  background-color: var(--content-bg01);
  background-image: url("./img/common/global-nav_bg.webp");
  background-position: top;
  background-size: cover;
}

.globalNavChild {
  background-color: var(--white);
  border: 3px solid var(--theme-2);
  border-width: 3px;
  border-radius: 0.5rem;
  position: absolute;
  top: 100%;
  width: max-content;
}

.globalNavChild__item + .globalNavChild__item {
  border-top: 3px solid var(--theme-2);
}


/* ### Nav btn
---------------------------------------- */

.modalNav__navBtn,
.siteHeader__navBtn {
  background-color: transparent;
  background-color: var(--primary);
  border: none;
  border-radius: 0.5rem;
  color: var(--white);
  cursor: pointer;
  user-select: none;
  height: 56px;
  width: 56px;
  transition: background-color 0.15s, color 0.15s, right 0.3s, top 0.3s;

  /* 3本バーの配置 */
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}

/* 3本バー */
.navBtn__bar {
  background-color: var(--white);
  border-radius: 2px;
  height: 3px;
  width: 32px;
}
.modalNav__navBtn .navBtn__bar {
  height: 4px;
  width: 36px;
}
.modalNav__navBtn .navBtn__bar:nth-of-type(1) {
  transform: translateY(10px) rotate(-45deg);
}
.modalNav__navBtn .navBtn__bar:nth-of-type(2) {
  opacity: 0;
}
.modalNav__navBtn .navBtn__bar:nth-of-type(3) {
  transform: translateY(-10px) rotate(45deg);
}



/* ## Modal nav
======================================== */

/* modal */
.modalNav {
  background-color: var(--content-bg02);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;

  /* スライドイン */
  opacity: 0;
  transform: translateY(calc(-50vh));
  transition: opacity 0.15s, transform 0.15s;
  pointer-events: none;
}
.modalNav.isOpen {
  opacity: 1;
  pointer-events: auto;

  /* スライドイン */
  transform: none;
  transition: opacity 0.15s, transform 0.3s;
}

.modalNav__link {
  background-color: var(--content-bg02);
  color: var(--body-color);
  display: block;
  padding: 1em 1em 0.9em;
  text-decoration: none;
  transition: color 0.15s, filter 0.15s;
  user-select: none;
}
@media (hover: hover) {
  .modalNav__link:hover {
    color: var(--body-color);
    filter: saturate(1.1);
  }
}
.modalNav__link:focus {
  color: var(--body-color);
  filter: saturate(1.1);
}
.modalNav__link::before {
  border-color: transparent transparent transparent currentColor;
  border-width: 6px 0 6px 8px;
  border-style: solid;
  color: var(--primary);
  content: "";
  display: inline-block;
  height: 0;
  margin-right: 0.5em;
  width: 0;
}

.modalNav__item:first-child {
  border-top: 2px solid var(--theme-1-400);
}
.modalNav__item {
  border-bottom: 2px solid var(--theme-1-400);
}

/* mask */
.modalNavMask {
  background-color: hsl(0 0% 100% / 0.8);
  position: fixed;
  inset: 0;
  z-index: 90;

  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;

  /* ぼかし */
  backdrop-filter: blur(4px);
}
.modalNavMask.isOpen {
  opacity: 1;
  pointer-events: auto;
}



/* ## Breadcrumb
======================================== */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
}
.breadcrumb__item {
  font-size: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
}
.breadcrumb__item + .breadcrumb__item {
  padding-left: 0.5em;
}
.breadcrumb__item + .breadcrumb__item::before {
  color: var(--gray-600);
  content: "\203A\00a0";
  font-weight: 700;
  float: left;
  padding-right: 0.5em;
}
.breadcrumb__item_current {
  color: var(--gray-600);
  font-weight: 700;
  text-decoration: none;
}
@media (hover: hover) {
  .breadcrumb__item_current:hover {
    color: var(--gray-600);
  }
}



/* ## Site footer
======================================== */

.siteFooter {
  background-color: var(--content-bg01);
  background-image: url("./img/common/footer_bg.webp");
  background-size: cover;
}



/* ## Go top
======================================== */
.goTopTarget {
  height: 300px;/*出現までのスクロール量*/
  position: absolute;
  visibility: hidden;
}

.goTop {
  opacity: 0;
  position: fixed;
  right: clamp(16px, 12.8px + 0.9vw, 24px);
  bottom: clamp(16px, 12.8px + 0.9vw, 24px);
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 10;
}
.goTop.scrolled {
  opacity: 1;
  pointer-events: auto;
}

.goTop__img {
  width: 56px;
}
@media (width >= 768px) {
  .goTop__img {
    width: 64px;
  }
}