@charset "UTF-8";
/*□□□□□□□□□□ 初期設定 □□□□□□□□□□*/
/*||| reset |||*/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

:where([hidden]:not([hidden=until-found])) {
  display: none !important;
}

:where(html) {
  -webkit-text-size-adjust: none;
  color-scheme: light;
}

@supports not (min-block-size: 100dvb) {
  :where(html) {
    block-size: 100%;
  }
}
@media (prefers-reduced-motion: no-preference) {
  :where(html:focus-within) {
    scroll-behavior: smooth;
  }
}
:where(body) {
  block-size: 100%;
  line-height: 1.5;
  font-family: system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

:where(input, button, textarea, select) {
  font: inherit;
  color: inherit;
}

:where(textarea) {
  resize: vertical;
  resize: block;
}

:where(button, label, select, summary, [role=button], [role=option]) {
  cursor: pointer;
}

:where(:disabled) {
  cursor: not-allowed;
}

:where(label:has(> input:disabled), label:has(+ input:disabled)) {
  cursor: not-allowed;
}

:where(button) {
  border-style: solid;
}

:where(a) {
  text-underline-offset: 0.2ex;
}

:where(ul, ol) {
  list-style: none;
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
}

/* :where(img, picture, svg) {
  max-inline-size: 100%;
  max-inline-size: -moz-available;
  block-size: auto;
} */

:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
  line-height: 1.8;
}

:where(hr) {
  border: none;
  -webkit-border-before: 1px solid;
  border-block-start: 1px solid;
  color: inherit;
  block-size: 0;
  overflow: visible;
}

:where(:focus-visible) {
  outline: 2px solid var(--focus-color, Highlight);
  outline-offset: 2px;
}

:where(.visually-hidden:not(:focus, :active, :focus-within, .not-visually-hidden)) {
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important;
  position: absolute !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/*||| var |||*/
:root {
	--size100px-sp: 26.667vw;
	--size80px-sp: 21.333vw;
	--size70px-sp: 18.667vw;
	--size60px-sp: 16vw;
	--size50px-sp: 13.333vw;
	--size40px-sp: 10.667vw;
	--size30px-sp: 8vw;
	--size24px-sp: 6.4vw;
	--size20px-sp: 5.333vw;
	--size18px-sp: 4.8vw;
	--size16px-sp: 4.267vw;
	--size14px-sp: 3.733vw;
	--size12px-sp: 3.2vw;
	--size11px-sp: 2.933vw;
	--size10px-sp: 2.667vw;
}

/*||| base |||*/
html, body {
  overflow-x: hidden;
}
html {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}
body {
  font-family: "Noto Sans JP", "メイリオ", "Meiryo", sans-serif;
  color: #333;
}
@media screen and (max-width: 768px) {
  body {
    padding-bottom: 70px;
  }
}
@media screen and (max-width: 375px) {
  body {
    padding-bottom: 60px;
  }
}

/*form*/
label {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0 0.5em;
}

[type=password],
[type=text],
[type=tel],
[type=number],
select,
textarea {
  padding: 0.2em 0.3em;
  min-height: 38px;
  border: 1px solid #ddd;
  outline: none;
}

::-webkit-input-placeholder {
  font-weight: 400;
  color: #999;
}

::-moz-placeholder {
  font-weight: 400;
  color: #999;
}

:-ms-input-placeholder {
  font-weight: 400;
  color: #999;
}

::-ms-input-placeholder {
  font-weight: 400;
  color: #999;
}

::placeholder {
  font-weight: 400;
  color: #999;
}

form th.required::after {
  margin-left: 0.5em;
  display: inline-block;
  color: #f00;
  font-size: 0.8em;
  content: "必須";
}
form .example {
  font-weight: 400;
  color: #555;
}

img, picture, svg{
  max-width: 100%;
}
@-moz-document url-prefix() {
  img {
    max-width: 100%;
  }
}

ul, ol {
  list-style: none;
}

/*リンク、ボタン*/
a,
button {
  border: none;
  background: none;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
button[data-icon]::before,
button[data-icon]::after{
  background-color: #ff9999;
}
button[data-icon]:hover::before,
button[data-icon]:hover::after{
  background-color: #ff5684;
}
.memberPage button[data-icon]::before,
.memberPage button[data-icon]::after{
  background-color: #82B8D9;
}
.memberPage button[data-icon]:hover::before,
.memberPage button[data-icon]:hover::after{
  background-color: #99d3ff;
}
a p,
button p {
  margin-bottom: unset;
  line-height: 1.5;
}
/*tel*/
[href*="tel:"]{
  color: inherit;
}
@media screen and (min-width: 769px) {
  [href*="tel:"]{
    pointer-events: none;
    text-decoration: none;
  }
}
main:has(> aside) {
  display: grid;
}
@media screen and (min-width: 1001px) {
  main:has(> aside) {
    grid-template-columns: auto 1fr;
    gap: 0 1em;
    padding-right: 1em;
  }
}
main a {
  /* -webkit-text-decoration-color: #ff9999;
  text-decoration-color: #ff9999; */
  -webkit-text-decoration-color: #aaa;
  text-decoration-color: #aaa;
  text-decoration-thickness: 1px;
  color: #333;
}
main a:hover {
  -webkit-text-decoration-color: #ff5684;
  text-decoration-color: #ff5684;
}
/*--- 会員用 ---*/
.memberPage a:hover,
.membersArea a:hover {
  -webkit-text-decoration-color: #82B8D9;
  text-decoration-color: #82B8D9;
}

html:not(.topPage) main {
  padding-top: min(8vw, 5rem);
  padding-bottom: min(8vw, 5rem);
}
html:not(.topPage) main:has(> aside.fixed) {
  padding-top: min(26.667vw, 5rem);
}