@charset "UTF-8";
/* Scss Document */
/*
	Settings
-------------------- */
/*	Mixin
--------------------*/
/*	Base
--------------------*/
*, :after, :before {
  -webkit-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

html,
body {
  height: 100%; }

html {
  font-size: 4vw;
  scroll-behavior: smooth; }
  @media (min-width: 768px) {
    html {
      font-size: 18px; } }

body {
  background-color: black;
  font-family: "M PLUS 1", sans-serif;
  font-optical-sizing: auto;
  color: #cccccc; }
  body a {
    text-decoration: none; }
  @media (min-width: 66rem) {
    body {
      background-image: url("../img/magiccircle.svg"), linear-gradient(rgba(114, 102, 251, 0.5), rgba(197, 102, 223, 0.5));
      background-attachment: fixed;
      background-position: center;
      background-size: 108% auto, cover; } }

#wrap {
  background-color: #202323;
  max-width: 66rem;
  min-height: 100dvh;
  margin: 0 auto;
  text-align: left;
  position: relative; }
  @media (min-width: 66rem) {
    #wrap {
      box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5); } }

/*	Layout
--------------------*/
main {
  display: block; }
  @media (min-width: 768px) {
    main {
      display: grid;
      grid-template-columns: 12rem minmax(0, 1fr);
      align-items: start; } }
  main header .visual {
    aspect-ratio: 80 / 113;
    position: relative; }
    main header .visual img {
      width: 100%;
      height: auto; }
    main header .visual__heading {
      width: 94%;
      margin: 0 auto;
      position: absolute;
      top: 1rem;
      right: 0;
      left: 0; }
    main header .visual__catch {
      width: 90%;
      margin: 0 auto;
      position: absolute;
      bottom: 1rem;
      right: 0;
      left: 0; }
  main header > p {
    padding: 1rem;
    line-height: 1.8em; }
  main header > nav {
    padding: 0 1rem 2rem; }
    main header > nav ul {
      display: flex;
      flex-flow: wrap;
      gap: 1rem; }
      main header > nav ul li {
        width: calc((100% - 2rem) / 3); }
        main header > nav ul li a {
          background-color: #9933ff;
          background-image: linear-gradient(150deg, #9933ff 40%, #8c1aff 60%);
          width: 100%;
          height: 100%;
          padding: 1.2em 0;
          border-radius: .3rem;
          color: white;
          font-family: "Zen Antique", serif;
          font-size: .9rem;
          text-align: center;
          text-shadow: 0 2px 2px black;
          display: flex;
          align-items: center;
          justify-content: center;
          filter: drop-shadow(1px 4px 4px black);
          box-shadow: inset 0 0 6px #cc99ff;
          position: relative; }
          main header > nav ul li a .small {
            font-size: .8em; }
          main header > nav ul li a::after {
            content: '';
            width: .4rem;
            height: .4rem;
            margin: 0 auto;
            border-top: 2px solid white;
            border-right: 2px solid white;
            opacity: .4;
            position: absolute;
            right: 0;
            bottom: .4rem;
            left: 0;
            transform: rotate(135deg); }
        main header > nav ul li.guide-circle, main header > nav ul li.guide-general {
          width: calc((100% - 1rem) / 2); }
          main header > nav ul li.guide-circle a, main header > nav ul li.guide-general a {
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            font-size: 1.2em; }
            main header > nav ul li.guide-circle a::after, main header > nav ul li.guide-general a::after {
              width: .6rem;
              height: .6rem; }
        main header > nav ul li.guide-circle a {
          background-color: #cc2944;
          background-image: url("../img/nav_guide_circle.jpg"), linear-gradient(180deg, #cc2944 40%, #aa2239 60%);
          box-shadow: inset 0 0 6px #e47789; }
        main header > nav ul li.guide-general a {
          background-color: #2944cc;
          background-image: url("../img/nav_guide_general.jpg"), linear-gradient(180deg, #2944cc 40%, #243cb3 60%);
          box-shadow: inset 0 0 6px #7789e4; }
    @media (min-width: 768px) {
      main header > nav ul li a {
        background-color: #9933ff;
        background-image: linear-gradient(150deg, #9933ff 40%, #8c1aff 60%);
        text-shadow: 0 2px 2px black;
        filter: drop-shadow(1px 4px 4px black);
        box-shadow: inset 0 0 6px #cc99ff;
        transition: .3s; }
        main header > nav ul li a::after {
          opacity: .4;
          transition: .3s; }
        main header > nav ul li a:hover {
          box-shadow: inset 0 0 20px #e6ccff; }
          main header > nav ul li a:hover::after {
            opacity: .6; }
      main header > nav ul li.guide-circle a:hover {
        box-shadow: inset 0 0 20px #eca2ae; }
      main header > nav ul li.guide-general a:hover {
        box-shadow: inset 0 0 20px #a2aeec; } }
    main header > nav ul li.logo {
      display: none; }
  @media (min-width: 768px) {
    main header {
      width: 100%;
      display: contents;
      position: relative; }
      main header .visual {
        aspect-ratio: 10 / 6;
        grid-row: 1;
        grid-column: 2; }
        main header .visual__heading {
          display: none;
          width: 50%;
          margin: 0;
          top: auto;
          right: 1rem;
          bottom: 1rem;
          left: auto; }
        main header .visual__catch {
          width: calc(100% - 3rem);
          top: 1.5rem;
          bottom: auto; }
      main header > p {
        padding: 1rem 2rem;
        font-size: 1rem;
        text-align: center;
        grid-row: 2;
        grid-column: 2; }
      main header > nav {
        background-color: #0f1010;
        height: 100vh;
        padding: 1rem;
        grid-column: 1;
        grid-row: 1 / 20;
        position: sticky;
        top: 0;
        z-index: 100; }
        main header > nav ul {
          flex-direction: column;
          gap: .5rem; }
          main header > nav ul li.logo {
            display: block; }
            main header > nav ul li.logo a {
              background: none;
              box-shadow: none;
              filter: none; }
          main header > nav ul li, main header > nav ul li.guide-circle, main header > nav ul li.guide-general {
            width: 100%; }
            main header > nav ul li a, main header > nav ul li.guide-circle a, main header > nav ul li.guide-general a {
              max-width: none;
              padding: 1em 0;
              font-size: 1rem; }
              main header > nav ul li a::after, main header > nav ul li.guide-circle a::after, main header > nav ul li.guide-general a::after {
                display: none; } }
  main section {
    padding: 2rem 0; }
    main section p,
    main section dt,
    main section dd,
    main section li {
      line-height: 1.6em; }
    @media (min-width: 768px) {
      main section {
        grid-column: 2; } }
    main section#about {
      background-color: #b3aaa1;
      color: #202323; }
      main section#about h2 {
        background-image: url("../img/heading_deco_beige01.svg"), url("../img/heading_deco_beige02.svg");
        background-position: top center, bottom center;
        background-repeat: no-repeat;
        background-size: auto 1.2rem;
        margin: 0 auto 1rem;
        padding: 1.5rem 0;
        color: #665552;
        font-family: "Zen Antique", serif;
        font-size: 1.88rem;
        font-weight: 500;
        text-align: center; }
      main section#about a {
        color: #cc2944;
        border-bottom: 1px solid currentColor; }
      main section#about dl {
        padding: 0 1rem;
        display: grid;
        grid-template-columns: 100%;
        grid-gap: 1rem; }
        main section#about dl dt {
          font-weight: 700; }
        main section#about dl dd {
          font-size: .88rem; }
          main section#about dl dd ul {
            margin: 0;
            padding: 0;
            text-indent: 0;
            display: grid;
            grid-template-columns: 100%;
            grid-gap: .5rem 0; }
            main section#about dl dd ul li {
              margin: 0;
              padding: 0;
              padding-left: 1em;
              position: relative; }
              main section#about dl dd ul li::before {
                content: '・';
                position: absolute;
                top: 0;
                left: 0; }
            main section#about dl dd ul ol {
              padding: .3rem 0 0;
              display: grid;
              grid-template-columns: 100%;
              grid-gap: .3rem 0;
              counter-reset: listnum; }
              main section#about dl dd ul ol > li::before {
                counter-increment: listnum;
                content: counter(listnum) "."; }
          main section#about dl dd .small {
            font-size: .8em; }
          main section#about dl dd + dd {
            padding-top: .5rem; }
      @media (min-width: 768px) {
        main section#about h2 {
          margin: 0 auto 1.5rem;
          font-size: 2.5rem; }
        main section#about dl {
          padding: 0 2rem;
          grid-gap: 2rem; }
          main section#about dl dt {
            font-size: 1.22rem; }
          main section#about dl dd {
            font-size: 1rem; }
            main section#about dl dd ul {
              grid-gap: 1rem 0; }
              main section#about dl dd ul li {
                padding-left: 1em; }
              main section#about dl dd ul ol {
                padding: .3rem 0 0;
                grid-gap: .3rem 0; }
            main section#about dl dd + dd {
              padding-top: .5rem; } }
      @media (min-width: 66rem) {
        main section#about dl {
          grid-template-columns: repeat(2, 1fr); } }
      @media (min-width: 66rem) {
        main section#about dl > div:last-child {
          grid-column: 1 / 3; } }
    main section#circle {
      min-width: 0;
      overflow: hidden; }
      main section#circle h2 {
        background-image: url("../img/heading_deco_gray01.svg"), url("../img/heading_deco_gray02.svg");
        background-position: top center, bottom center;
        background-repeat: no-repeat;
        background-size: auto 1.2rem;
        margin: 0 auto 1rem;
        padding: 1.5rem 0;
        font-family: "Zen Antique", serif;
        font-size: 1.88rem;
        font-weight: 500;
        text-align: center; }
      main section#circle a {
        color: #9933ff;
        border-bottom: 1px solid currentColor; }
      @media (min-width: 768px) {
        main section#circle h2 {
          margin: 0 auto 1.5rem;
          font-size: 2.5rem; } }
      main section#circle .text {
        font-size: .88rem;
        text-align: center;
        display: grid;
        grid-template-columns: 100%;
        grid-gap: .5rem 0; }
      main section#circle .carousel {
        width: 100%;
        overflow: hidden;
        position: relative; }
        main section#circle .carousel__inner {
          width: 100%;
          padding: 2rem 0;
          display: flex;
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          scroll-behavior: smooth;
          -webkit-overflow-scrolling: touch; }
          main section#circle .carousel__inner::-webkit-scrollbar {
            display: none; }
        main section#circle .carousel__item {
          flex: 0 0 10rem;
          margin-right: .8rem;
          scroll-snap-align: center; }
          main section#circle .carousel__item:first-child {
            margin-left: 2.6rem; }
          main section#circle .carousel__item:last-child {
            margin-right: 2.6rem; }
          main section#circle .carousel__item a {
            color: inherit;
            border: none; }
          main section#circle .carousel__item img {
            width: 100%;
            height: auto; }
          main section#circle .carousel__item dl {
            padding: .5rem 0 0;
            font-size: .88rem;
            display: grid;
            grid-template-columns: 100%;
            grid-gap: .3rem 0; }
            main section#circle .carousel__item dl dt {
              color: #697373;
              font-size: .8em; }
        main section#circle .carousel__nav {
          display: block; }
          main section#circle .carousel__nav-prev, main section#circle .carousel__nav-next {
            background: rgba(32, 35, 35, 0.8);
            transform: translateY(-50%);
            color: #9933ff;
            border: 1px solid rgba(204, 204, 204, 0.2);
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            display: block;
            position: absolute;
            top: 40%;
            z-index: 10;
            cursor: pointer;
            opacity: .6; }
            main section#circle .carousel__nav-prev::before, main section#circle .carousel__nav-next::before {
              content: '';
              width: .6rem;
              height: .6rem;
              border-top: 2px solid #cccccc;
              border-right: 2px solid #cccccc;
              position: absolute;
              top: 33%;
              left: 30%;
              transform: rotate(45deg); }
          main section#circle .carousel__nav-prev {
            left: .3rem; }
            main section#circle .carousel__nav-prev::before {
              left: 40%;
              transform: rotate(-135deg); }
          main section#circle .carousel__nav-next {
            right: .3rem; }
      main section#circle .button a {
        background-color: #9933ff;
        background-image: linear-gradient(150deg, #9933ff 40%, #8c1aff 60%);
        width: 100%;
        max-width: 18rem;
        height: 100%;
        margin: 0 auto;
        padding: 1em 0;
        border: none;
        border-radius: .3rem;
        color: white;
        font-family: "Zen Antique", serif;
        font-size: 1.2em;
        text-align: center;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        gap: .3rem;
        filter: drop-shadow(1px 4px 4px black);
        box-shadow: inset 0 0 6px #cc99ff; }
        main section#circle .button a .main {
          text-shadow: 0 2px 2px black; }
        main section#circle .button a .sub {
          font-size: .7em; }
      @media (min-width: 768px) {
        main section#circle {
          width: 100%; }
          main section#circle .text {
            font-size: 1rem;
            grid-gap: 0; }
            main section#circle .text br {
              display: none; }
          main section#circle .carousel {
            position: relative; }
            main section#circle .carousel::before, main section#circle .carousel::after {
              display: none; }
            main section#circle .carousel__inner {
              padding: 2rem 0;
              overflow-x: auto;
              overscroll-behavior-x: contain;
              /*cursor: grab;
              &.active {
              	cursor: grabbing;
              	scroll-snap-type: none;
              }*/ }
            main section#circle .carousel__item {
              flex: 0 0 12rem;
              margin-right: 1rem; }
              main section#circle .carousel__item:first-child {
                margin-left: 5rem; }
              main section#circle .carousel__item:last-child {
                margin-right: 5rem; }
            main section#circle .carousel__nav {
              display: block; }
              main section#circle .carousel__nav-prev, main section#circle .carousel__nav-next {
                width: 3rem;
                height: 3rem;
                top: 40%;
                transition: .2s;
                opacity: .6; }
                main section#circle .carousel__nav-prev::before, main section#circle .carousel__nav-next::before {
                  width: 1rem;
                  height: 1rem;
                  border-top-width: 4px;
                  border-right-width: 4px;
                  left: 25%; }
                main section#circle .carousel__nav-prev:hover, main section#circle .carousel__nav-next:hover {
                  opacity: 1; }
              main section#circle .carousel__nav-prev {
                left: 1rem; }
                main section#circle .carousel__nav-prev::before {
                  left: 35%; }
              main section#circle .carousel__nav-next {
                right: 1rem; }
          main section#circle .button a {
            transition: .3s; }
            main section#circle .button a:hover {
              box-shadow: inset 0 0 20px #e6ccff; } }
    main section#guide {
      background-color: #b3aaa1;
      color: #202323; }
      main section#guide h2 {
        background-image: url("../img/heading_deco_beige01.svg"), url("../img/heading_deco_beige02.svg");
        background-position: top center, bottom center;
        background-repeat: no-repeat;
        background-size: auto 1.2rem;
        margin: 0 auto 1rem;
        padding: 1.5rem 0;
        color: #665552;
        font-family: "Zen Antique", serif;
        font-size: 1.88rem;
        font-weight: 500;
        text-align: center; }
      main section#guide a {
        color: #cc2944;
        border-bottom: 1px solid currentColor; }
      main section#guide dl {
        padding: 0 1rem;
        display: grid;
        grid-template-columns: 100%;
        grid-gap: 1rem; }
        main section#guide dl dt {
          font-weight: 700; }
        main section#guide dl dd {
          font-size: .88rem; }
          main section#guide dl dd ul {
            margin: 0;
            padding: 0;
            text-indent: 0;
            display: grid;
            grid-template-columns: 100%;
            grid-gap: .5rem 0; }
            main section#guide dl dd ul li {
              margin: 0;
              padding: 0;
              padding-left: 1em;
              position: relative; }
              main section#guide dl dd ul li::before {
                content: '・';
                position: absolute;
                top: 0;
                left: 0; }
            main section#guide dl dd ul ol {
              padding: .3rem 0 0;
              display: grid;
              grid-template-columns: 100%;
              grid-gap: .3rem 0;
              counter-reset: listnum; }
              main section#guide dl dd ul ol > li::before {
                counter-increment: listnum;
                content: counter(listnum) "."; }
          main section#guide dl dd .small {
            font-size: .8em; }
          main section#guide dl dd + dd {
            padding-top: .5rem; }
      @media (min-width: 768px) {
        main section#guide h2 {
          margin: 0 auto 1.5rem;
          font-size: 2.5rem; }
        main section#guide dl {
          padding: 0 2rem;
          grid-gap: 2rem; }
          main section#guide dl dt {
            font-size: 1.22rem; }
          main section#guide dl dd {
            font-size: 1rem; }
            main section#guide dl dd ul {
              grid-gap: 1rem 0; }
              main section#guide dl dd ul li {
                padding-left: 1em; }
              main section#guide dl dd ul ol {
                padding: .3rem 0 0;
                grid-gap: .3rem 0; }
            main section#guide dl dd + dd {
              padding-top: .5rem; } }
      @media (min-width: 66rem) {
        main section#guide dl {
          grid-template-columns: repeat(2, 1fr); } }
      main section#guide > nav {
        padding: 0 1rem 2rem; }
        main section#guide > nav ul {
          display: flex;
          flex-flow: wrap;
          gap: 1rem; }
          main section#guide > nav ul li {
            width: calc((100% - 2rem) / 3); }
            main section#guide > nav ul li a {
              background-color: #9933ff;
              background-image: linear-gradient(150deg, #9933ff 40%, #8c1aff 60%);
              width: 100%;
              height: 100%;
              padding: 1.2em 0;
              border-radius: .3rem;
              color: white;
              font-family: "Zen Antique", serif;
              font-size: .9rem;
              text-align: center;
              text-shadow: 0 2px 2px black;
              display: flex;
              align-items: center;
              justify-content: center;
              filter: drop-shadow(1px 4px 4px black);
              box-shadow: inset 0 0 6px #cc99ff;
              position: relative; }
              main section#guide > nav ul li a .small {
                font-size: .8em; }
              main section#guide > nav ul li a::after {
                content: '';
                width: .4rem;
                height: .4rem;
                margin: 0 auto;
                border-top: 2px solid white;
                border-right: 2px solid white;
                opacity: .4;
                position: absolute;
                right: 0;
                bottom: .4rem;
                left: 0;
                transform: rotate(135deg); }
            main section#guide > nav ul li.guide-circle, main section#guide > nav ul li.guide-general {
              width: calc((100% - 1rem) / 2); }
              main section#guide > nav ul li.guide-circle a, main section#guide > nav ul li.guide-general a {
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                font-size: 1.2em; }
                main section#guide > nav ul li.guide-circle a::after, main section#guide > nav ul li.guide-general a::after {
                  width: .6rem;
                  height: .6rem; }
            main section#guide > nav ul li.guide-circle a {
              background-color: #cc2944;
              background-image: url("../img/nav_guide_circle.jpg"), linear-gradient(180deg, #cc2944 40%, #aa2239 60%);
              box-shadow: inset 0 0 6px #e47789; }
            main section#guide > nav ul li.guide-general a {
              background-color: #2944cc;
              background-image: url("../img/nav_guide_general.jpg"), linear-gradient(180deg, #2944cc 40%, #243cb3 60%);
              box-shadow: inset 0 0 6px #7789e4; }
        @media (min-width: 768px) {
          main section#guide > nav ul li a {
            background-color: #9933ff;
            background-image: linear-gradient(150deg, #9933ff 40%, #8c1aff 60%);
            text-shadow: 0 2px 2px black;
            filter: drop-shadow(1px 4px 4px black);
            box-shadow: inset 0 0 6px #cc99ff;
            transition: .3s; }
            main section#guide > nav ul li a::after {
              opacity: .4;
              transition: .3s; }
            main section#guide > nav ul li a:hover {
              box-shadow: inset 0 0 20px #e6ccff; }
              main section#guide > nav ul li a:hover::after {
                opacity: .6; }
          main section#guide > nav ul li.guide-circle a:hover {
            box-shadow: inset 0 0 20px #eca2ae; }
          main section#guide > nav ul li.guide-general a:hover {
            box-shadow: inset 0 0 20px #a2aeec; } }
        main section#guide > nav ul li a {
          border: none;
          filter: drop-shadow(1px 2px 2px black); }
      main section#guide #guide_circle,
      main section#guide #guide_general {
        background-color: rgba(0, 0, 0, 0.1);
        width: calc(100% - 1rem);
        margin: 0 0 0 auto; }
        main section#guide #guide_circle h3,
        main section#guide #guide_general h3 {
          padding: 0 1rem;
          line-height: 2.3em;
          color: white;
          font-family: "Zen Antique", serif;
          font-size: 1.44rem;
          font-weight: 500;
          text-shadow: 0 2px 2px black;
          position: relative; }
          main section#guide #guide_circle h3::after,
          main section#guide #guide_general h3::after {
            content: '';
            background-image: url("../img/heading_sub_deco.svg");
            background-position: right bottom;
            background-repeat: no-repeat;
            background-size: contain;
            width: 40%;
            height: 90%;
            display: block;
            position: absolute;
            right: 0;
            bottom: 0;
            opacity: .1; }
        main section#guide #guide_circle dl,
        main section#guide #guide_general dl {
          padding: 1rem; }
        main section#guide #guide_circle .button,
        main section#guide #guide_general .button {
          padding: 0 1rem 2rem; }
          main section#guide #guide_circle .button a,
          main section#guide #guide_general .button a {
            background-color: #9933ff;
            background-image: linear-gradient(150deg, #9933ff 40%, #8c1aff 60%);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            width: 100%;
            max-width: 18rem;
            height: 100%;
            margin: 0 auto;
            padding: 1em 0;
            border-bottom: none;
            border-radius: .3rem;
            color: white;
            font-family: "Zen Antique", serif;
            font-size: 1.2em;
            text-align: center;
            display: flex;
            flex-flow: column;
            align-items: center;
            justify-content: center;
            gap: .3rem;
            box-shadow: inset 0 0 6px #cc99ff;
            filter: drop-shadow(1px 2px 2px black); }
            main section#guide #guide_circle .button a .main,
            main section#guide #guide_general .button a .main {
              text-shadow: 0 2px 2px black; }
            main section#guide #guide_circle .button a .sub,
            main section#guide #guide_general .button a .sub {
              font-size: .7em; }
      main section#guide #guide_circle {
        margin-bottom: 2rem; }
        main section#guide #guide_circle h3 {
          background-color: #991f1f;
          background-image: linear-gradient(90deg, #991f1f 50%, #6f1616 100%); }
        main section#guide #guide_circle .button a {
          background-color: #cc2944;
          background-image: url("../img/nav_guide_circle.jpg"), linear-gradient(180deg, #cc2944 40%, #aa2239 60%);
          box-shadow: inset 0 0 6px #e47789; }
      main section#guide #guide_general h3 {
        background-color: #1f3399;
        background-image: linear-gradient(90deg, #1f3399 50%, #16256f 100%); }
      main section#guide #guide_general .button a {
        background-color: #2944cc;
        background-image: url("../img/nav_guide_general.jpg"), linear-gradient(180deg, #2944cc 40%, #243cb3 60%);
        box-shadow: inset 0 0 6px #7789e4; }
      @media (min-width: 768px) {
        main section#guide > nav {
          padding: 0 2rem 2rem; }
          main section#guide > nav ul {
            max-width: 40rem;
            margin: 0 auto; }
            main section#guide > nav ul li a {
              border: none;
              filter: drop-shadow(1px 2px 2px black); }
            main section#guide > nav ul li.guide-circle a, main section#guide > nav ul li.guide-general a {
              padding: 1em 0;
              font-size: 1.55rem; }
        main section#guide #guide_circle,
        main section#guide #guide_general {
          width: calc(100% - 2rem);
          margin: 0 0 0 auto; }
          main section#guide #guide_circle h3,
          main section#guide #guide_general h3 {
            padding: 0 2rem;
            line-height: 2.6em;
            font-size: 1.55rem; }
          main section#guide #guide_circle dl,
          main section#guide #guide_general dl {
            padding: 2rem; }
          main section#guide #guide_circle .button,
          main section#guide #guide_general .button {
            padding: 0 2rem 2rem; }
            main section#guide #guide_circle .button a,
            main section#guide #guide_general .button a {
              max-width: 30rem;
              padding: 1rem 0;
              font-size: 1.55rem;
              gap: .3rem;
              transition: .3s; }
        main section#guide #guide_circle {
          margin-bottom: 2rem; }
          main section#guide #guide_circle .button a:hover {
            box-shadow: inset 0 0 20px #eca2ae; }
        main section#guide #guide_general .button a:hover {
          box-shadow: inset 0 0 20px #a2aeec; } }
      @media (min-width: 66rem) {
        main section#guide #guide_circle dl > div:nth-child(1) {
          grid-row: 1 / 3; }
        main section#guide #guide_circle dl > div:nth-child(4) {
          grid-column: 1 / 3; } }
    main section#qa h2 {
      background-image: url("../img/heading_deco_gray01.svg"), url("../img/heading_deco_gray02.svg");
      background-position: top center, bottom center;
      background-repeat: no-repeat;
      background-size: auto 1.2rem;
      margin: 0 auto 1rem;
      padding: 1.5rem 0;
      font-family: "Zen Antique", serif;
      font-size: 1.88rem;
      font-weight: 500;
      text-align: center; }
    main section#qa a {
      color: #9933ff;
      border-bottom: 1px solid currentColor; }
    @media (min-width: 768px) {
      main section#qa h2 {
        margin: 0 auto 1.5rem;
        font-size: 2.5rem; } }
    main section#qa .accordion {
      margin: 0 0 1rem;
      padding: 0 0 0 1rem;
      interpolate-size: allow-keywords;
      transition: all .3s ease-out; }
      main section#qa .accordion:last-child {
        margin: 0; }
      main section#qa .accordion__head {
        background-color: #2c3030;
        padding: .5em 3rem;
        font-size: 1.22rem;
        list-style: none;
        position: relative; }
        main section#qa .accordion__head::-webkit-details-marker {
          display: none; }
        main section#qa .accordion__head::before {
          content: 'Q';
          line-height: 1em;
          font-family: "Zen Antique", serif;
          font-size: 1.88rem;
          font-weight: 500;
          opacity: .3;
          position: absolute;
          top: .2em;
          left: .5rem; }
        main section#qa .accordion__head::after {
          content: '';
          width: .6em;
          height: .6em;
          border-top: 2px solid white;
          border-right: 2px solid white;
          opacity: .4;
          position: absolute;
          top: 33%;
          right: 1rem;
          transform: rotate(135deg); }
      main section#qa .accordion__body {
        background-color: #3d4343;
        padding: 0 1rem 0 3rem;
        font-size: .88rem;
        display: grid;
        grid-template-rows: 0fr;
        opacity: 0;
        position: relative;
        transition: all ease-in-out .3s;
        transition: all ease-in-out .3s; }
        main section#qa .accordion__body::before {
          content: 'A';
          line-height: 1em;
          font-family: "Zen Antique", serif;
          font-size: 1.88rem;
          font-weight: 500;
          opacity: .3;
          position: absolute;
          top: .2em;
          left: .5rem; }
      main section#qa .accordion[open] .accordion__head::after {
        top: 40%;
        transform: rotate(315deg); }
      main section#qa .accordion[open] .accordion__body {
        padding: .8em 1rem .8em 3rem;
        grid-template-rows: 1fr;
        opacity: 1; }
        main section#qa .accordion[open] .accordion__body > div {
          overflow: hidden; }
    @media (min-width: 768px) {
      main section#qa .accordion {
        margin: 0 0 2rem;
        padding: 0 0 0 2rem; }
        main section#qa .accordion:last-child {
          margin: 0; }
        main section#qa .accordion__head {
          padding: .5em 4rem;
          font-size: 1.55rem; }
          main section#qa .accordion__head::before {
            font-size: 2.88rem;
            top: .1em;
            left: .5rem; }
          main section#qa .accordion__head::after {
            border-top-width: 3px;
            border-right-width: 3px;
            right: 2rem; }
        main section#qa .accordion__body {
          padding: 0 2rem 0 4rem;
          font-size: 1rem; }
          main section#qa .accordion__body::before {
            font-size: 2.88rem;
            top: .1em;
            left: .5rem; }
        main section#qa .accordion[open] .accordion__head::after {
          top: 45%; }
        main section#qa .accordion[open] .accordion__body {
          padding: 1rem 2rem 1rem 4rem; } }
    main section#extra {
      padding-bottom: 0;
      border-top: 1px solid rgba(204, 204, 204, 0.2); }
      main section#extra h2 {
        background-image: url("../img/heading_deco_gray01.svg"), url("../img/heading_deco_gray02.svg");
        background-position: top center, bottom center;
        background-repeat: no-repeat;
        background-size: auto 1.2rem;
        margin: 0 auto 1rem;
        padding: 1.5rem 0;
        font-family: "Zen Antique", serif;
        font-size: 1.88rem;
        font-weight: 500;
        text-align: center; }
      main section#extra a {
        color: #9933ff;
        border-bottom: 1px solid currentColor; }
      @media (min-width: 768px) {
        main section#extra h2 {
          margin: 0 auto 1.5rem;
          font-size: 2.5rem; } }
      main section#extra .sns {
        padding: 0 0 2rem; }
        main section#extra .sns dl {
          padding: 0 1rem;
          display: grid;
          grid-template-columns: 100%;
          grid-gap: 2rem 0; }
          main section#extra .sns dl dt {
            font-family: "Zen Antique", serif;
            font-size: 1.55rem;
            font-weight: 500;
            text-align: center; }
          main section#extra .sns dl dd {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2rem; }
            main section#extra .sns dl dd a {
              max-width: 6rem;
              display: block;
              border: none; }
              main section#extra .sns dl dd a img {
                width: 100%;
                height: auto;
                aspect-ratio: 1 / 1;
                border-radius: 50%;
                overflow: hidden; }
      main section#extra .update {
        background-color: #2c3030;
        padding: 2rem 1rem; }
        main section#extra .update h3 {
          padding: 0 0 1rem;
          font-family: "Zen Antique", serif;
          font-size: 1.55rem;
          font-weight: 500;
          text-align: center; }
        main section#extra .update dl {
          display: grid;
          grid-template-columns: 100%;
          grid-gap: .5rem 0; }
          main section#extra .update dl dd {
            font-size: .88rem; }
      @media (min-width: 768px) {
        main section#extra {
          padding-bottom: 0; }
          main section#extra .sns {
            padding: 0 0 2rem; }
            main section#extra .sns dl {
              padding: 0 2rem; }
          main section#extra .update {
            padding: 2rem; }
            main section#extra .update h3 {
              padding: 0 0 2rem; }
            main section#extra .update dl {
              grid-gap: 1rem 0; } }
  main #spmenu button {
    background-color: #7266fb;
    background-image: linear-gradient(150deg, #7266fb 20%, #c566df 80%);
    width: 4rem;
    height: 4rem;
    padding: 3.5%;
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: block;
    position: fixed;
    bottom: 2rem;
    right: 1rem;
    z-index: 1000;
    filter: drop-shadow(1px 2px 2px black); }
    main #spmenu button img {
      aspect-ratio: 1 / 1;
      object-fit: contain; }
    main #spmenu button.is-active {
      background-image: url("../img/icon_menu_close.svg"), linear-gradient(150deg, #2c3030 20%, #454b4b 80%);
      background-position: center;
      background-repeat: no-repeat;
      background-size: 45% auto, 100%; }
      main #spmenu button.is-active img {
        opacity: 0; }
  main #spmenu nav {
    background: rgba(32, 35, 35, 0.95);
    padding: 2rem;
    border-radius: .5rem;
    color: white;
    opacity: 0;
    visibility: hidden;
    transform: translateY(1rem);
    transition: all 0.3s ease;
    position: fixed;
    bottom: 5rem;
    right: .5rem;
    z-index: 999; }
    main #spmenu nav.is-active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0); }
    main #spmenu nav ul {
      display: grid;
      grid-template-columns: 100%;
      grid-gap: .5rem 0; }
      main #spmenu nav ul li a {
        background-color: #9933ff;
        background-image: linear-gradient(150deg, #9933ff 40%, #8c1aff 60%);
        width: 100%;
        height: 100%;
        padding: .5em 1em;
        border-radius: .3rem;
        color: white;
        font-family: "Zen Antique", serif;
        font-size: 1.11rem;
        text-align: center;
        text-shadow: 0 2px 2px black;
        display: flex;
        align-items: center;
        justify-content: center;
        filter: drop-shadow(1px 4px 4px black);
        box-shadow: inset 0 0 6px #cc99ff; }
      main #spmenu nav ul li.guide-circle a {
        background-color: #cc2944;
        background-image: linear-gradient(150deg, #cc2944 40%, #aa2239 60%);
        box-shadow: inset 0 0 6px #e47789; }
      main #spmenu nav ul li.guide-general a {
        background-color: #2944cc;
        background-image: linear-gradient(150deg, #2944cc 40%, #243cb3 60%);
        box-shadow: inset 0 0 6px #7789e4; }
  @media (min-width: 768px) {
    main #spmenu {
      display: none; } }
  main footer {
    padding: 1rem 0;
    font-size: .88rem;
    text-align: center; }
    @media (min-width: 768px) {
      main footer {
        grid-column: 2; } }