@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500..700&family=Noto+Serif+JP:wght@900&display=swap');

:root {
  --black: #171717;
  --txt-color: #231815;
  --red: #e60012;
  --blue: #1a96d5;
  --blue2: #005bac;
  --purple: #7f1084;
  --green: #00a040;
}

/* common
============================================ */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  width: 100%;
  color: var(--txt-color);
  font-size: 16px;
  font-family: 'Noto Sans JP', 'Helvetica Neue', 'Arial', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'BIZ UDPGothic', Meiryo, sans-serif;
  font-weight: 500;
  font-display: swap;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
  text-autospace: normal;
}

.hoge {
  width: 10ch; /* 10文字分 */
  font-family: 'Noto Sans JP', sans-serif;
  font-family: "Noto Serif JP", serif;
  font-size: min(2.5vw, 50px); /* 基本 2.5vw 最大 50px */
  font-size: max(2.5vw, 12px); /* 基本 2.5vw 最小 12px */
  font-size: clamp(12px, 2.5vw, 50px); /* 12px～2.5vw基本～50px clamp(最小, 可変, 最大) */
  font-weight: 400;
  font-style: normal;
  background-image: image-set(
    url("/img/bg.jpg") 1x,
    url("/img/bg@2x.jpg") 2x
  );
}

.container {
  container-type: inline-size; /* cqwの親要素を指定 */
}
.container h3 {
  font-size: 5cqw;
}

@supports not (container-type: inline-size) {
  /* コンテナクエリ非対応ブラウザ用 */
}

img {
  width: 100%;
  max-width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
}

a {
  color: var(--txt-color);
  transition: .3s ease;
}
a img {
  transition: .3s ease;
}
a:hover img {
  opacity: .7;
}

.serif {
  font-family: 'Noto Serif JP', serif;
  font-weight: 900;
}

main {
  position: relative;
}
.content {
  margin: 0 auto;
  width: 85%;
  max-width: 980px;
}

/* form */
form input,
form select,
form textarea {
  padding: .5em;
  color: var(--txt-color);
  font-size: 16px;
  line-height: 1.1;
  background: #fff;
  border: 1px solid var(--txt-color);
}
form input,
form textarea {
  width: 100%;
}
form textarea {
  line-height: 1.5;
}
form input:focus,
form select:focus,
form textarea:focus {
  border-color: var(--red);
  outline: none;
}

.selectbox {
  position: relative;
}
.selectbox::after {
  content: '';
  margin-top: -3px;
  width: 8px;
  height: 8px;
  border-bottom: 1px solid var(--txt-color);
  border-right: 1px solid var(--txt-color);
  transform: translate(50%, -50%) rotate(45deg);
  position: absolute;
  top: 50%;
  right: 12px;
  pointer-events: none;
}
.selectbox select {
  padding-right: 24px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.parsley-errors-list {
  margin-top: .5em;
}
.parsley-errors-list li {
  color: var(--red);
  font-size: .625rem;
  line-height: 1.2;
}
.parsley-errors-list li::before {
  content: '※';
}

/* footer */
footer {
  padding: 36px 5%;
  width: 100%;
  font-size: .875rem;
  text-align: center;
  background: var(--black);
}
footer .info {
  text-align: center;
}
footer .info dl:not(:first-of-type) {
  margin-top: 1.2em;
}
footer .info dt {
  margin: 0 auto .5em;
  padding: .5em 1.5em;
  width: fit-content;
  line-height: 1;
  background: #fff;
  border-radius: 2em;
}
footer .info dd {
  color: #fff;
}
footer .sns {
  margin-top: 20px;
}
footer .sns ul {
  margin: 0 -5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
footer .sns li {
  margin: 6px;
  width: calc((100% / 6) - 12px);
  max-width: 42px;
}
footer small {
  margin-top: 12px;
  color: #fff;
  display: inline-block;
}

/* footer */
.f-button.is-close-button {
  top: 0;
}
.f-button svg {
  stroke: #bfbfbf;
}


@media (max-width: 320px) {

}


@media (min-width: 670px) {
  .sp {
    display: none;
  }

  /* footer */
  footer .sns ul {
    margin: 0;
  }
  footer .sns li {
    margin: 8px;
    width: 46px;
    max-width: none;
  }
}


@media (min-width: 1152px) {
  body:not(#profile) main {
    background: image-set(url(../img/bg.png) 1x, url(../img/bg@2x.png) 2x) repeat-y center top;
    background-size: auto;
  }

  /* footer */
  footer {
    padding-top: 70px;
    padding-bottom: 70px;
    font-size: 1.125rem;
  }
  footer .info dl:not(:first-of-type) {
    margin-top: 1.2em;
  }
  footer .info dt {
    padding-top: .3em;
    padding-bottom: .4em;
  }
  footer .sns {
    margin-top: 32px;
  }
  footer .sns li {
    margin: 12px;
    width: 86px;
  }
}

@media screen and (min-width: 1280px) and (min-resolution: 2dppx) {
  #logo {
    background-image: url(logo@2x.png);
  }
}


@container (width <= 320px) {
  /* 親要素にcontainer-type: inline-size; */
  /*.hogeの幅が320px以下の時 */
  .hoge {

  }
}