@charset "UTF-8";
/* @import "import/mixin";
@import "import/var"; */
/* Reset box-model
   ========================================================================== */
* {
  box-sizing: border-box; }

::before,
::after {
  box-sizing: inherit; }

/* Document
   ========================================================================== */
html {
  font-size: 62.5%;
  line-height: 1.15; }

/* Sections
   ========================================================================== */
body {
  margin: 0;
  font-size: 1.6rem;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  background: url("../img/back.webp") center 0/100% no-repeat #cae8f4; }
  body.sp {
    touch-action: none; }

main {
  display: block; }

/* Vertical rhythm
   ========================================================================== */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0; }

/* Headings
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0; }

/* Lists (enumeration)
   ========================================================================== */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none; }

/* Lists (definition)
   ========================================================================== */
dt {
  font-weight: bold; }

dd {
  margin-left: 0; }

/* Grouping content
   ========================================================================== */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
  border: 0;
  border-top: 1px solid;
  margin: 0;
  clear: both;
  color: inherit; }

pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: inherit;
  /* 2 */ }

address {
  font-style: inherit; }

/* Text-level semantics
   ========================================================================== */
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
  transition: all .2s ease; }

abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted; }

b,
strong {
  font-weight: bolder; }

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: inherit; }

small {
  font-size: 80%; }

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

/* Embedded content
   ========================================================================== */
img {
  border-style: none;
  vertical-align: bottom;
  max-width: 100%; }

embed,
object,
iframe {
  border: 0;
  vertical-align: bottom; }

/* Interactive
   ========================================================================== */
details {
  display: block; }

summary {
  display: list-item; }

/* Table
   ========================================================================== */
table {
  border-collapse: collapse;
  border-spacing: 0; }

caption {
  text-align: left; }

td,
th {
  vertical-align: top;
  padding: 0; }

th {
  text-align: left;
  font-weight: bold; }

/* ------------------------------------------------------------------------
	common
------------------------------------------------------------------------ */
.inner {
  margin: 0 auto;
  max-width: 86rem;
  width: 94%; }

br.pc {
  display: inherit; }
  @media (max-width: 960px) {
    br.pc {
      display: none; } }
br.sp {
  display: none; }
  @media screen and (max-width: 736px) {
    br.sp {
      display: inherit; } }

a[href^="tel:"] {
  pointer-events: none;
  text-decoration: none;
  color: #000; }
  @media screen and (max-width: 520px) {
    a[href^="tel:"] {
      pointer-events: all;
      text-decoration: underline; } }

/* ------------------------------------------------------------------------
	header
------------------------------------------------------------------------ */
header {
  padding: 2rem 5rem; }
  @media (max-width: 960px) {
    header {
      padding: 1rem 1rem 4rem; } }
  header h1 {
    max-width: 15rem;
    width: 30%; }
    @media (max-width: 960px) {
      header h1 {
        width: 20%; } }

/* ------------------------------------------------------------------------
	section
------------------------------------------------------------------------ */
section .btn01,
section .btn02,
section .btn03 {
  display: block;
  text-align: center !important; }
  section .btn01 a,
  section .btn02 a,
  section .btn03 a {
    display: inline-block;
    border-radius: 1rem; }
    section .btn01 a img,
    section .btn02 a img,
    section .btn03 a img {
      width: 100%; }
    @media screen and (max-width: 520px) {
      section .btn01 a,
      section .btn02 a,
      section .btn03 a {
        margin: 0 auto;
        width: 90%; } }
    section .btn01 a:hover,
    section .btn02 a:hover,
    section .btn03 a:hover {
      box-shadow: unset;
      transform: translate(8px, 8px); }
section .btn01 a {
  box-shadow: 8px 8px 0px 0px #a9bdc9; }
section .btn02 a {
  box-shadow: 8px 8px 0px 0px #9b7575; }
section .btn03 a {
  box-shadow: 8px 8px 0px 0px #494949; }
section#main {
  margin-bottom: 8rem;
  text-align: center; }
  @media (max-width: 768px) {
    section#main {
      margin-bottom: 6rem; } }
  @media screen and (max-width: 520px) {
    section#main {
      margin-bottom: 5rem;
      padding: 0 1rem; } }
  section#main .date {
    position: relative;
    margin: 0 auto;
    max-width: 69rem;
    width: 98%; }
    section#main .date dl {
      text-align: left; }
      @media (max-width: 768px) {
        section#main .date dl {
          margin-bottom: 2rem; } }
      section#main .date dl dt {
        padding-bottom: .5rem;
        border-bottom: .1rem solid #000; }
        @media (max-width: 960px) {
          section#main .date dl dt img {
            width: 80%; } }
      section#main .date dl dd {
        padding-top: 1rem; }
        @media (max-width: 960px) {
          section#main .date dl dd img {
            width: 80%; } }
    section#main .date figure {
      position: absolute;
      top: -.8rem;
      right: -1rem; }
      @media (max-width: 960px) {
        section#main .date figure {
          width: 21%; } }
      @media screen and (max-width: 520px) {
        section#main .date figure {
          width: 23%; } }
section#contents {
  position: relative;
  margin: 0 auto;
  padding: 4rem 0 10rem;
  max-width: 100rem;
  width: 100%;
  background: #fff; }
  section#contents .brush01,
  section#contents .brush02 {
    position: absolute;
    top: -3rem;
    z-index: 1; }
    @media (max-width: 1100px) {
      section#contents .brush01,
      section#contents .brush02 {
        top: -1rem;
        width: 15%; } }
  section#contents .brush01 {
    left: -3rem; }
    @media (max-width: 1100px) {
      section#contents .brush01 {
        left: 0; } }
  section#contents .brush02 {
    right: -3rem; }
    @media (max-width: 1100px) {
      section#contents .brush02 {
        right: 0;
        text-align: right; } }
  section#contents h3 {
    text-align: center; }
  section#contents .opening {
    padding-bottom: 4rem;
    border-bottom: .2rem solid #000; }
    section#contents .opening h3 {
      margin-bottom: 2.5rem; }
    section#contents .opening dl dt {
      margin-bottom: 3rem;
      line-height: 1.4;
      text-align: center;
      font-size: 2rem;
      font-weight: normal; }
      @media screen and (max-width: 520px) {
        section#contents .opening dl dt {
          font-size: 1.8rem; } }
    section#contents .opening dl dd {
      line-height: 1.6; }
  section#contents .join {
    padding-top: 3rem;
    border-bottom: .2rem solid #000; }
    @media screen and (max-width: 520px) {
      section#contents .join {
        padding-bottom: 4rem; } }
    section#contents .join h3 {
      margin-bottom: 2rem; }
    section#contents .join .step {
      position: relative;
      padding-bottom: 6.5rem;
      text-align: center; }
      @media screen and (max-width: 520px) {
        section#contents .join .step {
          padding-bottom: 3rem; } }
      section#contents .join .step figure {
        position: absolute;
        right: -9rem;
        bottom: 0;
        width: 25rem; }
        @media (max-width: 1100px) {
          section#contents .join .step figure {
            right: -3rem;
            width: 26%; } }
        @media (max-width: 960px) {
          section#contents .join .step figure {
            position: inherit;
            margin: 3rem auto 0;
            right: 0;
            bottom: 0;
            width: 40%; } }
      section#contents .join .step h4 {
        position: relative;
        display: flex;
        margin-bottom: .5rem;
        font-size: 2rem;
        font-weight: 700; }
        @media screen and (max-width: 520px) {
          section#contents .join .step h4 {
            justify-content: space-between;
            font-size: 1.6rem; } }
        section#contents .join .step h4 .no {
          position: relative;
          margin-right: .5rem;
          padding-top: .5rem;
          background: #fff; }
          @media screen and (max-width: 520px) {
            section#contents .join .step h4 .no {
              margin-right: 0;
              width: 30%; } }
        section#contents .join .step h4 .ttl {
          padding-top: 2.6rem;
          text-align: left; }
          @media screen and (max-width: 520px) {
            section#contents .join .step h4 .ttl {
              width: 68%; } }
        section#contents .join .step h4::before {
          position: absolute;
          display: block;
          content: "";
          top: 2rem;
          left: 0;
          width: 100%;
          height: .1rem;
          background: #000; }
      section#contents .join .step p {
        line-height: 1.6; }
        @media screen and (max-width: 520px) {
          section#contents .join .step p {
            text-align: left; } }
      section#contents .join .step .btn01, section#contents .join .step .btn02 {
        margin-top: 8rem; }
        @media screen and (max-width: 520px) {
          section#contents .join .step .btn01, section#contents .join .step .btn02 {
            margin-top: 4rem; } }
      section#contents .join .step .kit {
        margin-top: 3rem;
        padding: 5rem 0 8rem;
        background: #e7e4e2; }
        @media screen and (max-width: 520px) {
          section#contents .join .step .kit {
            padding: 3rem 1.5rem 4rem; } }
        section#contents .join .step .kit h5 {
          margin-bottom: 4rem; }
        section#contents .join .step .kit ul {
          margin: 0 auto;
          max-width: 71rem;
          width: 92%; }
          @media screen and (max-width: 520px) {
            section#contents .join .step .kit ul {
              width: 100%; } }
          section#contents .join .step .kit ul li {
            display: flex;
            align-items: center;
            position: relative;
            margin-bottom: 4rem;
            padding: 1.5rem;
            line-height: 1.4;
            text-align: left;
            background: #fff;
            border: .1rem solid #000; }
            @media (max-width: 768px) {
              section#contents .join .step .kit ul li {
                flex-wrap: wrap; } }
            section#contents .join .step .kit ul li > span {
              display: inline-block;
              margin-right: 1rem; }
              @media (max-width: 768px) {
                section#contents .join .step .kit ul li > span {
                  display: block;
                  margin-right: 0;
                  margin-bottom: 1rem;
                  text-align: center;
                  width: 100%; } }
            section#contents .join .step .kit ul li > figure {
              position: absolute;
              display: inline-block;
              top: -1rem;
              right: -2.2rem;
              width: 4.5rem; }
              @media (max-width: 960px) {
                section#contents .join .step .kit ul li > figure {
                  top: -4rem; } }
            section#contents .join .step .kit ul li::after {
              position: absolute;
              display: block;
              content: "";
              margin: auto;
              left: 0;
              right: 0;
              bottom: -2.5rem;
              width: 20px;
              height: calc(20px / 2);
              background: #000;
              clip-path: polygon(0 0, 100% 0, 50% 100%);
              z-index: 1; }
            section#contents .join .step .kit ul li:last-child {
              margin-bottom: 0; }
              section#contents .join .step .kit ul li:last-child::after {
                display: none; }
  section#contents .work {
    margin-bottom: 6.5rem;
    padding-top: 5.5rem; }
    section#contents .work h3 {
      margin-bottom: 2rem; }
    section#contents .work > p {
      display: block;
      margin-bottom: 3rem;
      text-align: center;
      line-height: 1.6; }
      @media (max-width: 768px) {
        section#contents .work > p {
          text-align: left; } }
      section#contents .work > p > span {
        color: #c4004f;
        font-weight: 700; }
    section#contents .work .special {
      margin: 0 auto;
      padding: 5rem 0;
      text-align: center;
      max-width: 80rem;
      width: 100%;
      background: #e7e4e2; }
      section#contents .work .special h4 {
        margin-bottom: 2.5rem; }
      section#contents .work .special dl {
        margin: 0 auto 5rem;
        max-width: 60rem;
        width: 92%; }
        section#contents .work .special dl dt {
          margin-bottom: 2rem;
          padding-bottom: 1rem;
          font-weight: normal;
          line-height: 1.4;
          border-bottom: .1rem solid #000; }
          section#contents .work .special dl dt > span {
            display: block;
            font-size: 1.8rem;
            font-weight: 700; }
            @media screen and (max-width: 520px) {
              section#contents .work .special dl dt > span {
                font-size: 1.6rem; } }
            section#contents .work .special dl dt > span span {
              font-size: 2.4rem; }
              @media screen and (max-width: 520px) {
                section#contents .work .special dl dt > span span {
                  font-size: 2rem; } }
        section#contents .work .special dl dd {
          padding: 0 2rem;
          line-height: 1.6;
          text-align: left; }
          @media screen and (max-width: 520px) {
            section#contents .work .special dl dd {
              padding: 0 1rem; } }
          section#contents .work .special dl dd.book {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            gap: 1rem;
            padding-top: 2rem; }
            section#contents .work .special dl dd.book img {
              width: 13rem; }
            section#contents .work .special dl dd.book > span {
              font-feature-settings: "palt";
              font-size: 1.2rem; }
      section#contents .work .special h5 {
        margin: 0 auto 2rem;
        padding: 1rem 2rem;
        max-width: 60rem;
        font-size: 2rem;
        font-weight: 700;
        width: 92%;
        border-top: .2rem solid #000;
        border-bottom: .2rem solid #000; }
        @media screen and (max-width: 520px) {
          section#contents .work .special h5 {
            font-size: 1.8rem; } }
      section#contents .work .special figure {
        margin-bottom: 3rem; }
        @media screen and (max-width: 520px) {
          section#contents .work .special figure img {
            width: 90%; } }
      section#contents .work .special > p {
        position: relative;
        display: inline-block;
        padding: 0 5rem;
        line-height: 1.4; }
        @media screen and (max-width: 520px) {
          section#contents .work .special > p {
            padding: 0 4rem; } }
        section#contents .work .special > p::before, section#contents .work .special > p::after {
          position: absolute;
          display: block;
          content: "";
          top: 52%;
          width: 38px;
          height: 2px;
          background: #000; }
        section#contents .work .special > p::before {
          left: 0;
          transform: rotate(60deg); }
        section#contents .work .special > p::after {
          right: 0;
          transform: rotate(-60deg); }
        section#contents .work .special > p > span {
          color: #c4004f;
          font-weight: 700; }
  section#contents .present {
    text-align: center; }
    section#contents .present h3 {
      position: relative;
      display: block;
      margin-bottom: 5.5rem;
      text-align: left;
      font-size: 1.8rem;
      font-weight: 700; }
      section#contents .present h3 > span {
        position: relative;
        display: inline-block;
        padding-right: 1rem;
        background: #fff;
        z-index: 1; }
      section#contents .present h3::after {
        position: absolute;
        display: block;
        margin: auto;
        content: "";
        top: 0;
        bottom: 0;
        width: 100%;
        height: .2rem;
        background: #000;
        z-index: 0; }
    section#contents .present dl {
      margin: 0 auto 5rem;
      max-width: 70rem;
      width: 92%; }
      section#contents .present dl dt {
        margin-bottom: 3rem; }
      section#contents .present dl dd {
        line-height: 1.8;
        font-size: 1.8rem; }
        @media (max-width: 768px) {
          section#contents .present dl dd {
            text-align: left;
            font-size: 1.6rem; } }
        section#contents .present dl dd > span {
          display: block;
          font-size: 1.2rem; }
        section#contents .present dl dd a {
          color: #00a1e3;
          text-decoration: underline; }
          section#contents .present dl dd a:hover {
            text-decoration: none; }
    section#contents .present ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin: 0 auto 8rem;
      max-width: 70rem;
      width: 92%; }
      @media screen and (max-width: 520px) {
        section#contents .present ul {
          margin-bottom: 4rem;
          width: 92%; } }
      section#contents .present ul li {
        margin-bottom: 4rem;
        max-width: 31.4rem;
        width: calc(100%/2.2); }
        @media screen and (max-width: 520px) {
          section#contents .present ul li {
            margin: 0 auto 3rem;
            text-align: center;
            width: 100%; } }
        section#contents .present ul li:nth-child(3), section#contents .present ul li:nth-child(4) {
          margin-bottom: 0; }
          @media screen and (max-width: 520px) {
            section#contents .present ul li:nth-child(3), section#contents .present ul li:nth-child(4) {
              margin-bottom: 6rem; } }
section#confirm {
  padding: 6rem 0; }
  section#confirm details {
    margin: 0 auto 2rem;
    max-width: 70rem;
    width: 90%; }
    section#confirm details.last {
      margin-bottom: 0; }
    section#confirm details::details-content {
      transition: height 0.4s, opacity 0.4s, content-visibility 0.4s allow-discrete;
      height: 0;
      opacity: 0;
      overflow: clip; }
    section#confirm details[open]::details-content {
      opacity: 1; }
    section#confirm details summary {
      position: relative;
      display: block;
      padding: 2.5rem 2rem;
      list-style: none;
      text-align: center;
      color: #fff;
      font-size: 2rem;
      font-weight: 700;
      background: #000;
      cursor: pointer; }
      @media screen and (max-width: 520px) {
        section#confirm details summary {
          font-size: 1.6rem; } }
      section#confirm details summary::-webkit-details-marker {
        display: none; }
      section#confirm details summary::after, section#confirm details summary::before {
        position: absolute;
        display: block;
        margin: auto;
        content: "";
        top: 0;
        right: 2rem;
        bottom: 0;
        width: 2.4rem;
        height: .3rem;
        background: #fff;
        transition: all 0.3s; }
        @media screen and (max-width: 520px) {
          section#confirm details summary::after, section#confirm details summary::before {
            width: 1.8rem; } }
      section#confirm details summary::after {
        transform: rotate(90deg); }
    section#confirm details div {
      display: block;
      padding: 2rem;
      background: #fff; }
      section#confirm details div h3 {
        margin-bottom: 2rem;
        font-feature-settings: "palt";
        font-weight: 700; }
      section#confirm details div a {
        color: #00a1e3;
        text-decoration: underline; }
        section#confirm details div a:hover {
          text-decoration: none; }
      section#confirm details div p {
        display: block;
        margin-bottom: 3rem;
        line-height: 1.6; }
      section#confirm details div dl dt {
        margin-left: 1.7rem;
        margin-bottom: 1rem;
        line-height: 1.4;
        text-indent: -1.7rem; }
      section#confirm details div dl dd {
        margin-bottom: 2rem;
        padding: 0 1.7rem;
        line-height: 1.6; }
        section#confirm details div dl dd.contact > span {
          margin: 2rem 0 1rem;
          display: block;
          font-weight: 700; }
      section#confirm details div ul li {
        margin-bottom: .5rem;
        font-feature-settings: "palt"; }
        section#confirm details div ul li:last-child {
          margin-bottom: 0; }
      section#confirm details div ul.award {
        margin-top: 1rem; }
        section#confirm details div ul.award li > span {
          display: inline-block;
          font-weight: 700; }
          @media screen and (max-width: 520px) {
            section#confirm details div ul.award li > span {
              display: block; } }
      section#confirm details div ul.step li > span {
        display: block;
        font-weight: 700; }
      section#confirm details div ul.list li {
        margin-left: 2.2rem;
        list-style: disc inside;
        text-indent: -2.2rem; }
      section#confirm details div ol li {
        margin-left: 2.1rem;
        margin-bottom: .5rem;
        text-indent: -2.1rem; }
        section#confirm details div ol li:last-child {
          margin-bottom: 0; }
  section#confirm details[open] summary::after {
    transform: rotate(0deg); }
  @supports (interpolate-size: allow-keywords) {
    section#confirm :root {
      interpolate-size: allow-keywords; }
    section#confirm details[open]::details-content {
      height: auto; } }
  @supports not (interpolate-size: allow-keywords) {
    section#confirm details[open]::details-content {
      height: auto;
      overflow-y: scroll;
      /* 溢れる場合はスクロール可能にする */ } }
section#apply {
  padding: 5.5rem 0 7rem;
  text-align: center;
  color: #fff;
  background: #969696; }
  section#apply p {
    display: block;
    margin-bottom: 4rem;
    line-height: 1.8; }
    @media (max-width: 768px) {
      section#apply p {
        text-align: left; } }
  section#apply ul li {
    margin-bottom: 2rem; }
    section#apply ul li:last-child {
      margin-bottom: 0; }

footer {
  padding: 3rem 0;
  text-align: center;
  background: #fff; }
  footer .tel {
    margin: 0 auto 3rem;
    max-width: 90rem;
    width: 92%; }
    footer .tel dt {
      position: relative;
      margin-bottom: 1rem;
      text-align: left; }
      footer .tel dt > span {
        position: relative;
        display: inline-block;
        padding-right: 1rem;
        background: #fff;
        z-index: 1; }
        @media screen and (max-width: 520px) {
          footer .tel dt > span {
            padding: 0; } }
      footer .tel dt::after {
        position: absolute;
        display: block;
        margin: auto;
        content: "";
        top: 0;
        bottom: 0;
        width: 100%;
        height: .2rem;
        background: #000;
        z-index: 0; }
    footer .tel dd {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center; }
      footer .tel dd > span {
        display: inline-block;
        line-height: 1.4;
        text-align: left;
        font-size: 1.3rem; }
        @media (max-width: 960px) {
          footer .tel dd > span {
            margin-top: 1rem; } }
  footer .sns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin: 0 auto 7rem;
    max-width: 50rem;
    width: 90%; }
    footer .sns dt {
      margin-bottom: .5rem;
      width: 100%; }
      footer .sns dt > span {
        position: relative;
        display: inline-block;
        padding: 0 3rem; }
        footer .sns dt > span::before, footer .sns dt > span::after {
          position: absolute;
          display: block;
          content: "";
          top: 52%;
          width: 2.6rem;
          height: .1rem;
          background: #000; }
        footer .sns dt > span::before {
          left: 0;
          transform: rotate(50deg); }
        footer .sns dt > span::after {
          right: 0;
          transform: rotate(-50deg); }
    footer .sns dd {
      width: 5rem; }
      footer .sns dd a:hover {
        opacity: .6; }
  footer .contact {
    display: block;
    margin-bottom: 5.5rem; }
    footer .contact a {
      color: #00a1e3;
      text-decoration: underline; }
      footer .contact a:hover {
        text-decoration: none; }
  footer .copy {
    font-size: 1.4rem; }
