@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap");
/*! destyle.css v1.0.13 | MIT License | https://github.com/nicolas-cusan/destyle.css */
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

:after, :before {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  margin: 0;
}

main {
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
}

address, blockquote, dl, figure, form, iframe, ol, p, pre, table, ul {
  margin: 0;
}

ol, ul {
  padding: 0;
  list-style: none;
}

dt {
  font-weight: 700;
}

dd {
  margin-left: 0;
}

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  height: 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid;
  margin: 0;
  clear: both;
  color: inherit;
}

pre {
  font-family: monospace;
  font-size: inherit;
}

address {
  font-style: inherit;
}

a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

abbr[title] {
  border-bottom: 0;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

b, strong {
  font-weight: bolder;
}

code, kbd, samp {
  font-family: 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;
}

img {
  border-style: none;
  vertical-align: bottom;
}

embed, iframe, object {
  border: 0;
  vertical-align: bottom;
}

button, input, optgroup, select, textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: 0;
  border-radius: 0;
  text-align: inherit;
}

[type=checkbox] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
       appearance: checkbox;
}

[type=radio] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
       appearance: radio;
}

button, input {
  overflow: visible;
}

button, select {
  text-transform: none;
}

[type=button], [type=reset], [type=submit], button {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

[type=button][disabled], [type=reset][disabled], [type=submit][disabled], button[disabled] {
  cursor: default;
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset, option {
  padding: 0;
}

fieldset {
  margin: 0;
  border: 0;
  min-width: 0;
}

legend {
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox], [type=radio] {
  padding: 0;
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

label[for] {
  cursor: pointer;
}

details {
  display: block;
}

summary {
  display: list-item;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption {
  text-align: left;
}

td, th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: 700;
}

[hidden], template {
  display: none;
}

:root {
  --font: "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  --text-color: #231815;
  --text-color-light: #595757;
  --tag-color: #999;
  --banner-color01: #ff0;
  --banner-color02: #000;
  --alert-color: #ff0000;
  --link-color: #008dd7;
  --tag-link-color: #fff;
  --body-bg-color: #e6e6e6;
  font-size: 2.0833333333vw;
}
@media screen and (min-width: 768px) {
  :root {
    font-size: 0.8064516129vw;
  }
  :root .for_sp {
    display: none !important;
  }
}
@media screen and (min-width: 1241px) {
  :root {
    font-size: 10px;
  }
}
@media screen and (max-width: 767px) {
  :root .for_pc {
    display: none !important;
  }
}

body {
  font-family: var(--font);
  font-size: 1.8rem;
  font-weight: 400;
  text-align: justify;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  line-height: 1.8;
  position: relative;
  min-height: 100svh;
  background: var(--body-bg-color);
}

.bg01 {
  width: 100%;
  height: 300%;
  position: fixed;
  top: 0;
  left: 0;
  background: url("../img/home/bg01_pc.svg") repeat-y left top;
  background-size: 100vw;
  z-index: -1;
}

.bg02 {
  width: 100%;
  height: 800%;
  position: fixed;
  top: 0;
  left: 0;
  background: url("../img/home/bg02_pc.svg") repeat-y left 40rem;
  background-size: 100vw;
  z-index: -1;
}

.bg03 {
  width: 100%;
  height: 800%;
  position: fixed;
  top: 0;
  left: 0;
  background: url("../img/home/bg03_pc.svg") repeat-y right 114rem;
  background-size: 60vw;
  z-index: -1;
}

.bg04 {
  width: 100%;
  height: 800%;
  position: fixed;
  top: auto;
  bottom: 0;
  left: 0;
  background: url("../img/home/bg04_pc.svg") repeat-y left top;
  background-size: 50vw;
  z-index: -1;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

h2.sh {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.container {
  padding: 0 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
@media screen and (min-width: 1241px) {
  .container {
    padding: 0;
  }
}

main {
  min-height: 100svh;
  margin-top: 6rem;
}
@media screen and (min-width: 768px) {
  main {
    margin-top: 0;
  }
}
@media screen and (min-width:1601px) {
  main::after {
    content: "";
    display: block;
    width: 20rem;
    height: 66rem;
    background: url("../img/common/mv_aside.svg") no-repeat left top;
    background-size: contain;
    position: fixed;
    top: 10rem;
    left: calc(50% + 60rem);
  }
}

#floating-banner {
  position: fixed;
  bottom: -10rem;
  left: 0;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  z-index: 15;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
#floating-banner.on {
  bottom: 0;
}
@media screen and (min-width: 768px) {
  #floating-banner {
    width: 11.6rem;
    display: block;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    position: fixed;
    left: -2px;
    inset-block: 0;
    margin: auto;
    z-index: 15;
  }
}
#floating-banner .banner {
  width: 50%;
  text-align: center;
  color: #fff;
}
#floating-banner .banner a {
  display: block;
  width: 100%;
  font-size: 2.4rem;
  text-align: center;
  line-height: 1.2;
  padding: 1.5rem 0;
}
#floating-banner .banner a span {
  display: block;
  font-size: 1.4rem;
}
#floating-banner .banner.banner01 {
  background: var(--banner-color01);
}
#floating-banner .banner.banner01 a {
  color: #000;
}
#floating-banner .banner.banner02 {
  background: var(--banner-color02);
}
@media screen and (min-width: 768px) {
  #floating-banner .banner {
    width: 8.4rem;
    height: 16.8rem;
    background: var(--text-color-light);
    border-radius: 0 100% 100% 0%/50%;
    margin-bottom: 2rem;
    -webkit-box-shadow: 0.5rem 0.5rem 1.5rem -1rem rgba(0, 0, 0, 0.6);
            box-shadow: 0.5rem 0.5rem 1.5rem -1rem rgba(0, 0, 0, 0.6);
    -webkit-transition: -webkit-box-shadow 0.4s, -webkit-transform 0.4s;
    transition: -webkit-box-shadow 0.4s, -webkit-transform 0.4s;
    transition: box-shadow 0.4s, transform 0.4s;
    transition: box-shadow 0.4s, transform 0.4s, -webkit-box-shadow 0.4s, -webkit-transform 0.4s;
  }
  #floating-banner .banner:hover {
    -webkit-box-shadow: 0.9rem 0.9rem 2.5rem -1.5rem rgba(0, 0, 0, 0.6);
            box-shadow: 0.9rem 0.9rem 2.5rem -1.5rem rgba(0, 0, 0, 0.6);
    -webkit-transform: translateY(-0.2rem);
            transform: translateY(-0.2rem);
  }
  #floating-banner .banner a {
    height: 100%;
    font-size: 1.8rem;
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
    text-align: center;
    padding-right: 4rem;
    background: url("../img/common/banner_arrow.svg") no-repeat right center;
    background-size: 2.4rem;
    position: relative;
  }
  #floating-banner .banner a span {
    font-size: 1.1rem;
  }
}

header {
  background: #fff;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 99;
}
header .logo {
  width: 100%;
  background: #fff;
  z-index: 99;
  padding: 1.6rem 2.2rem;
}
header .logo a,
header .logo img {
  display: block;
  width: 32rem;
}
header .nav-toggle {
  width: 4rem;
  height: 100%;
  aspect-ratio: 1;
  position: absolute;
  inset-block: 0;
  right: 1rem;
  margin: auto;
  padding: 0.2rem;
  background: #fff;
  z-index: 99;
}
header .nav-toggle::before, header .nav-toggle::after,
header .nav-toggle span {
  content: "";
  display: block;
  width: 100%;
  height: 0.2rem;
  background: var(--text-color-light);
  position: absolute;
  inset-block: 0;
  margin: auto;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
header .nav-toggle::before {
  -webkit-transform: translateY(-1.2rem);
          transform: translateY(-1.2rem);
}
header .nav-toggle::after {
  -webkit-transform: translateY(1.2rem);
          transform: translateY(1.2rem);
}
header .nav-toggle.on span {
  opacity: 0;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
header .nav-toggle.on::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
header .nav-toggle.on::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
header #menu {
  position: fixed;
  width: 100%;
  top: -100lvh;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  z-index: -1;
  background: #fff;
  height: calc(100svh - 5rem);
}
header #menu #extra-link {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 10;
}
header #menu #extra-link ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.4rem;
}
header #menu #extra-link ul li {
  width: calc(50% - 0.2rem);
}
header #menu #extra-link ul li a {
  display: block;
  background: var(--text-color);
  color: #fff;
  padding: 1rem 0;
  text-align: center;
}
header #menu #global-nav {
  width: 100%;
  height: 85%;
}
header #menu #global-nav ul {
  height: 100%;
  overflow-y: auto;
  padding-bottom: 13.7rem;
}
header #menu #global-nav ul .toggle > a {
  border-bottom: 1px solid #666;
  position: relative;
}
header #menu #global-nav ul .toggle > a::after {
  content: "+";
  position: absolute;
  inset-block: 0;
  right: 0;
  margin: auto;
  font-size: 1.5em;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  aspect-ratio: 1;
}
header #menu #global-nav ul .toggle > a.on::after {
  content: "-";
}
header #menu #global-nav ul .toggle .sub-menu {
  padding: 0 2rem;
  display: none;
}
header #menu #global-nav ul .toggle .sub-menu .head {
  background: var(--text-color-light);
  color: #fff;
  padding: 0.5rem 2rem;
}
header #menu #global-nav ul .toggle .sub-menu .body {
  border-left: 2px solid var(--text-color-light);
}
header #menu #global-nav ul .toggle .sub-menu a {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
header #menu #global-nav a {
  display: block;
  font-size: 2.2rem;
  padding: 1.3rem 2.5rem;
}
header #menu.on {
  top: 5rem;
}

@media screen and (min-width: 768px) {
  header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 1rem 0 0;
    background: #fff;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    -webkit-transition: top 0.4s;
    transition: top 0.4s;
    z-index: 99;
  }
  header .logo {
    width: 42.8rem;
    margin-left: 1rem;
    padding: 0;
  }
  header .logo a, header .logo img {
    width: auto;
  }
  header .nav-toggle {
    display: none;
  }
  header #menu {
    display: contents;
  }
  header #menu #extra-link {
    margin-bottom: 2rem;
    margin-right: 1rem;
    position: static;
    width: auto;
  }
  header #menu #extra-link ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 0;
    padding: 0;
  }
  header #menu #extra-link ul li {
    width: auto;
  }
  header #menu #extra-link ul li + li {
    margin-left: 1em;
  }
  header #menu #extra-link ul li a {
    display: block;
    font-size: 1.6rem;
    line-height: 2;
    color: var(--text-color-light);
    background: transparent url("../img/common/header_icon_access.svg") no-repeat left center;
    background-size: contain;
    padding: 0 0 0 3.6rem;
  }
  header #menu #extra-link ul li a.contact {
    background-image: url("../img/common/header_icon_contact.svg");
  }
  header #menu #extra-link ul li a.request {
    background-image: url("../img/common/header_icon_request.svg");
  }
  header #menu #extra-link ul li a.for_inner {
    background-image: url("../img/common/header_icon_for_inner.svg");
  }
  header #menu #global-nav {
    width: 100%;
    height: auto;
    border-top: 1px solid;
    border-bottom: 1px solid;
  }
  header #menu #global-nav ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 120rem;
    margin: 0 auto;
    border-left: 1px solid;
    border-right: 1px solid;
    overflow: inherit;
    padding-bottom: 0;
  }
  header #menu #global-nav ul li {
    width: 20%;
  }
  header #menu #global-nav ul li + li {
    border-left: 1px solid var(--text-color);
  }
  header #menu #global-nav ul li.toggle {
    position: relative;
  }
  header #menu #global-nav ul li.toggle > a {
    -webkit-transition: -webkit-box-shadow 0.4s;
    transition: -webkit-box-shadow 0.4s;
    transition: box-shadow 0.4s;
    transition: box-shadow 0.4s, -webkit-box-shadow 0.4s;
    text-align: center;
    line-height: 2;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border: 0;
  }
  header #menu #global-nav ul li.toggle > a.on {
    background: #000;
    color: #fff;
  }
  header #menu #global-nav ul li.toggle > a::after {
    content: none;
  }
  header #menu #global-nav ul li.toggle .sub-menu {
    position: fixed;
    width: 100%;
    top: 9.9rem;
    left: 0;
    -webkit-transition: opacity 0.4s;
    transition: opacity 0.4s;
    display: none;
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
    padding: 3rem 0;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border-top: 1px solid #000;
  }
  header #menu #global-nav ul li.toggle .sub-menu .head {
    color: #666;
    font-size: 0.8em;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 0.5rem;
    background: none;
    padding: 0;
  }
  header #menu #global-nav ul li.toggle .sub-menu .inner {
    width: 120rem;
    margin: 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    -webkit-column-gap: 2rem;
       -moz-column-gap: 2rem;
            column-gap: 2rem;
  }
  header #menu #global-nav ul li.toggle .sub-menu .inner .item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
    width: calc(25% - 1.5rem);
  }
  header #menu #global-nav ul li.toggle .sub-menu .inner .item a {
    width: 100%;
  }
  header #menu #global-nav ul li.toggle .sub-menu .inner .item a + a {
    margin-top: -0.1rem;
  }
  header #menu #global-nav ul li.toggle .sub-menu a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0.5rem;
    border: 1px solid;
    background: rgba(255, 255, 255, 0.8);
    width: calc(25% - 1.5rem);
    line-height: 1.4;
  }
  header #menu #global-nav ul li.toggle .sub-menu a::before {
    content: "▶ ";
    font-size: 0.6em;
    margin-right: 0.5rem;
  }
}
@media screen and (min-width: 768px) and (hover: hover) {
  header #menu #global-nav ul li.toggle:hover > a {
    background: #000;
    color: #fff;
  }
  header #menu #global-nav ul li.toggle:hover .sub-menu {
    display: block;
  }
  header #menu #global-nav ul li.toggle .sub-menu:hover {
    display: block;
  }
}
@media screen and (min-width: 768px) {
  header #menu #global-nav ul a {
    display: block;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--text-color);
    padding: 0 1.5em;
  }
}
#mv {
  position: relative;
  padding-top: 1.5rem;
  margin-bottom: 0.5rem;
}
@media screen and (min-width: 768px) {
  #mv {
    padding-top: 3rem;
    margin-bottom: 14rem;
  }
}
#mv .catch {
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  inset: 0;
  z-index: 10;
  opacity: 0;
  -webkit-animation: catch 1s 1s ease-in forwards;
          animation: catch 1s 1s ease-in forwards;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  #mv .catch {
    width: 118rem;
    height: 11.5rem;
  }
}
#mv .catch img {
  -webkit-filter: drop-shadow(2px 4px 6px black);
          filter: drop-shadow(2px 4px 6px black);
}
@-webkit-keyframes catch {
  from {
    opacity: 0;
    -webkit-filter: blur(10px);
            filter: blur(10px);
  }
  to {
    opacity: 1;
    -webkit-filter: blur(0);
            filter: blur(0);
  }
}
@keyframes catch {
  from {
    opacity: 0;
    -webkit-filter: blur(10px);
            filter: blur(10px);
  }
  to {
    opacity: 1;
    -webkit-filter: blur(0);
            filter: blur(0);
  }
}
#mv .mv-banner {
  padding: 2.5rem 4.5rem;
}
#mv .mv-banner a {
  display: block;
  margin-bottom: 2rem;
}
@media screen and (min-width: 768px) {
  #mv .mv-banner {
    position: absolute;
    width: 96%;
    margin: auto;
    max-width: 120rem;
    bottom: -5rem;
    inset-inline: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    z-index: 10;
  }
  #mv .mv-banner a {
    width: auto;
    height: 14.8rem;
    margin-left: 1.5rem;
    margin-bottom: 0;
    display: block;
  }
  #mv .mv-banner a img {
    -webkit-transition: -webkit-filter 0.4s, -webkit-transform 0.4s;
    transition: -webkit-filter 0.4s, -webkit-transform 0.4s;
    transition: filter 0.4s, transform 0.4s;
    transition: filter 0.4s, transform 0.4s, -webkit-filter 0.4s, -webkit-transform 0.4s;
    height: 100%;
  }
  #mv .mv-banner a:hover img {
    -webkit-transform: translate(0, 0) scale(1.1);
            transform: translate(0, 0) scale(1.1);
    -webkit-filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
            filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
  }
}
#mv #slider-set {
  width: 45rem;
  height: 48.5rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 2rem 2rem;
  grid-auto-flow: row;
  grid-template-areas: "slider04 slider04" "slider04 slider04" "slider07 slider01" "slider07 slider11";
}
#mv #slider-set .slider {
  position: relative;
  opacity: 0;
  -webkit-animation: slide_op 0.3s forwards;
          animation: slide_op 0.3s forwards;
  display: none;
}
#mv #slider-set .slider img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
#mv #slider-set .slider img:first-child {
  z-index: 2;
  opacity: 1;
  -webkit-animation: slide01 8s infinite alternate;
          animation: slide01 8s infinite alternate;
}
#mv #slider-set .slider img:nth-child(2) {
  z-index: 1;
  opacity: 0;
  -webkit-animation: slide02 8s infinite alternate;
          animation: slide02 8s infinite alternate;
}
#mv #slider-set .slider img:nth-child(3) {
  z-index: 0;
  opacity: 0;
  -webkit-animation: slide03 8s infinite alternate;
          animation: slide03 8s infinite alternate;
}
#mv #slider-set .slider04 {
  grid-area: slider04;
  display: block;
}
#mv #slider-set .slider01 {
  grid-area: slider01;
  display: block;
}
#mv #slider-set .slider11 {
  grid-area: slider11;
  display: block;
}
#mv #slider-set .slider07 {
  grid-area: slider07;
  display: block;
}
@media screen and (min-width: 768px) {
  #mv #slider-set {
    width: 96%;
    max-width: 120rem;
    height: 66rem;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    gap: 2rem 2rem;
    grid-auto-flow: row;
    grid-template-areas: "slider01 slider01 slider02 slider03 slider04 slider04" "slider01 slider01 slider07 slider07 slider04 slider04" "slider05 slider06 slider07 slider07 slider08 slider09" "slider10 slider11 slider11 slider12 slider13 slider14" "slider15 slider11 slider11 slider16 slider17 slider18";
  }
  #mv #slider-set .slider {
    display: block;
  }
  #mv #slider-set .slider01 {
    grid-area: slider01;
    -webkit-animation-delay: 2.2s;
            animation-delay: 2.2s;
  }
  #mv #slider-set .slider02 {
    grid-area: slider02;
    -webkit-animation-delay: 2.3s;
            animation-delay: 2.3s;
  }
  #mv #slider-set .slider03 {
    grid-area: slider03;
    -webkit-animation-delay: 2.4s;
            animation-delay: 2.4s;
  }
  #mv #slider-set .slider04 {
    grid-area: slider04;
    -webkit-animation-delay: 2.5s;
            animation-delay: 2.5s;
  }
  #mv #slider-set .slider05 {
    grid-area: slider05;
    -webkit-animation-delay: 2.6s;
            animation-delay: 2.6s;
  }
  #mv #slider-set .slider06 {
    grid-area: slider06;
    -webkit-animation-delay: 2.7s;
            animation-delay: 2.7s;
  }
  #mv #slider-set .slider07 {
    grid-area: slider07;
    -webkit-animation-delay: 2.8s;
            animation-delay: 2.8s;
  }
  #mv #slider-set .slider08 {
    grid-area: slider08;
    -webkit-animation-delay: 2.9s;
            animation-delay: 2.9s;
  }
  #mv #slider-set .slider09 {
    grid-area: slider09;
    -webkit-animation-delay: 3s;
            animation-delay: 3s;
  }
  #mv #slider-set .slider10 {
    grid-area: slider10;
    -webkit-animation-delay: 3.1s;
            animation-delay: 3.1s;
  }
  #mv #slider-set .slider11 {
    grid-area: slider11;
    -webkit-animation-delay: 3.2s;
            animation-delay: 3.2s;
  }
  #mv #slider-set .slider12 {
    grid-area: slider12;
    -webkit-animation-delay: 3.3s;
            animation-delay: 3.3s;
  }
  #mv #slider-set .slider13 {
    grid-area: slider13;
    -webkit-animation-delay: 3.4s;
            animation-delay: 3.4s;
  }
  #mv #slider-set .slider14 {
    grid-area: slider14;
    -webkit-animation-delay: 3.5s;
            animation-delay: 3.5s;
  }
  #mv #slider-set .slider15 {
    grid-area: slider15;
    -webkit-animation-delay: 3.6s;
            animation-delay: 3.6s;
  }
  #mv #slider-set .slider16 {
    grid-area: slider16;
    -webkit-animation-delay: 3.7s;
            animation-delay: 3.7s;
  }
  #mv #slider-set .slider17 {
    grid-area: slider17;
    -webkit-animation-delay: 3.8s;
            animation-delay: 3.8s;
  }
  #mv #slider-set .slider18 {
    grid-area: slider18;
    -webkit-animation-delay: 3.9s;
            animation-delay: 3.9s;
  }
}
@-webkit-keyframes slide_op {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slide_op {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes slide01 {
  0% {
    opacity: 1;
  }
  12.5% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  37.5% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  67.5% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  87.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes slide01 {
  0% {
    opacity: 1;
  }
  12.5% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  37.5% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  67.5% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  87.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes slide02 {
  0% {
    opacity: 1;
  }
  12.5% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  37.5% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  62.5% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  87.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes slide02 {
  0% {
    opacity: 1;
  }
  12.5% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  37.5% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  62.5% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  87.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes slide03 {
  0% {
    opacity: 1;
  }
  12.5% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  37.5% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  62.5% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  87.5% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slide03 {
  0% {
    opacity: 1;
  }
  12.5% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  37.5% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  62.5% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  87.5% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

#banner-area {
  margin-bottom: 3.6rem;
}
@media screen and (min-width: 768px) {
  #banner-area {
    margin-bottom: 7rem;
  }
}
#banner-area .container {
  padding: 0;
}
#banner-area .banner-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
#banner-area .banner-list li {
  width: 48%;
  margin-bottom: 4.5rem;
}
@media screen and (min-width: 768px) {
  #banner-area .banner-list li {
    width: 45%;
    margin-bottom: 6rem;
  }
}
#banner-area .banner-list li.full {
  width: 78%;
  margin: auto;
}
@media screen and (min-width: 768px) {
  #banner-area .banner-list li.full {
    width: 100%;
  }
}
#banner-area .banner-list li a img {
  -webkit-transition: -webkit-filter 0.4s, -webkit-transform 0.4s;
  transition: -webkit-filter 0.4s, -webkit-transform 0.4s;
  transition: filter 0.4s, transform 0.4s;
  transition: filter 0.4s, transform 0.4s, -webkit-filter 0.4s, -webkit-transform 0.4s;
}
#banner-area .banner-list li a:hover img {
  -webkit-transform: translateY(-4px) scale(1.01);
          transform: translateY(-4px) scale(1.01);
  -webkit-filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
          filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
}

#link-admission {
  margin: 0 2.5rem;
}
@media screen and (min-width: 768px) {
  #link-admission {
    margin: 0;
  }
}

#banner-area2 {
  background: rgba(255, 255, 255, 0.6);
  padding: 3rem 0;
  margin-bottom: 4rem;
}
@media screen and (min-width: 768px) {
  #banner-area2 {
    padding: 10rem 0;
    margin-bottom: 10rem;
  }
}
@media screen and (min-width: 768px) {
  #banner-area2 .banner-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
#banner-area2 .banner-list li {
  margin-inline: -2.5rem;
  margin-bottom: 2rem;
}
#banner-area2 .banner-list li.half {
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  #banner-area2 .banner-list li {
    width: 31%;
    margin-bottom: 6rem;
  }
  #banner-area2 .banner-list li.half {
    width: 48%;
  }
}
#banner-area2 .banner-list li a {
  display: block;
  -webkit-box-shadow: 0 2px 16px -8px rgba(0, 0, 0, 0.8);
          box-shadow: 0 2px 16px -8px rgba(0, 0, 0, 0.8);
  -webkit-transition: -webkit-box-shadow 0.4s, -webkit-transform 0.4s;
  transition: -webkit-box-shadow 0.4s, -webkit-transform 0.4s;
  transition: box-shadow 0.4s, transform 0.4s;
  transition: box-shadow 0.4s, transform 0.4s, -webkit-box-shadow 0.4s, -webkit-transform 0.4s;
}
#banner-area2 .banner-list li a:hover {
  -webkit-box-shadow: 0 4px 32px -8px rgba(0, 0, 0, 0.6);
          box-shadow: 0 4px 32px -8px rgba(0, 0, 0, 0.6);
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
}

.news-box {
  background: #fff;
  margin: 4rem 0;
  padding: 2.5rem;
}
@media screen and (min-width: 768px) {
  .news-box {
    margin: 7rem 0;
    padding: 7rem;
  }
}
.news-box h2 {
  text-align: center;
  border-bottom: 1px solid;
  margin-bottom: 1rem;
  padding-bottom: 2rem;
  line-height: 1.2;
  font-size: 2.3rem;
}
@media screen and (min-width: 768px) {
  .news-box h2 {
    font-size: 3.2rem;
    padding-bottom: 3rem;
  }
}
.news-box .news-list li {
  border-bottom: 1px solid;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
.news-box .news-list li a {
  color: var(--link-color);
}
.news-box .news-list li a:hover {
  text-decoration: underline;
}
.news-box .news-list li .item {
  font-size: 2rem;
}
.news-box .news-list li .item .link-title {
  line-height: 1.4;
}
@media screen and (min-width: 768px) {
  .news-box .news-list li .item {
    font-size: 2rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    row-gap: 1rem;
    -webkit-column-gap: 3rem;
       -moz-column-gap: 3rem;
            column-gap: 3rem;
  }
}
.news-box .news-list li .item .date {
  padding-right: 3rem;
  font-size: 1.8rem;
  font-weight: 600;
}
@media screen and (min-width: 768px) {
  .news-box .news-list li .item .date {
    border-right: 1px solid;
    border-bottom: 0;
    margin-bottom: 0;
  }
}
@media screen and (min-width: 768px) {
  .news-box .news-list li .item .news-content {
    width: 70%;
  }
}
.news-box .news-list li .item .news-content .title {
  font-weight: 500;
  padding-bottom: 1rem;
  border-bottom: 1px solid;
  margin-bottom: 1rem;
}
.news-box .news-list li .item .news-content .body {
  font-size: 1.6rem;
}
.news-box.alert li {
  border-color: var(--alert-color);
}
.news-box.alert li .item .date {
  color: var(--alert-color);
  margin-bottom: 2.5rem;
}
.news-box.alert li .item .news-content {
  padding: 0 1.5rem;
}
.news-box.alert h2 {
  border-color: var(--alert-color);
}

#topics {
  background: rgba(255, 255, 255, 0.6);
  padding: 4rem 0;
}
@media screen and (min-width: 768px) {
  #topics {
    padding: 8rem 0;
    margin-bottom: 10rem;
  }
}
#topics h2 {
  text-align: center;
  font-weight: 500;
  font-size: 4rem;
  border-bottom: 4px solid #ffff00;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 3rem;
}
@media screen and (min-width: 768px) {
  #topics h2 {
    margin: 0 auto 8rem;
  }
}
#topics #tag-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 3rem;
}
@media screen and (min-width: 768px) {
  #topics #tag-list {
    -webkit-column-gap: 2em;
       -moz-column-gap: 2em;
            column-gap: 2em;
    margin-bottom: 6rem;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}
#topics #tag-list button {
  background: var(--link-color);
  color: #fff;
  font-size: 1.4rem;
  letter-spacing: 0.2em;
  padding: 0 1rem;
}
@media screen and (min-width: 768px) {
  #topics #tag-list button {
    font-size: 2.4rem;
  }
}
#topics #tag-list button.on {
  color: currentColor;
  text-decoration: none;
  background: none;
}
@media screen and (min-width: 768px) {
  #topics .topic-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-column-gap: 6%;
       -moz-column-gap: 6%;
            column-gap: 6%;
    margin-bottom: 8rem;
  }
}
#topics .topic-list li {
  margin-bottom: 2rem;
  display: none;
}
#topics .topic-list li.on {
  display: block;
}
@media screen and (min-width: 768px) {
  #topics .topic-list li {
    width: 29.3333333333%;
    margin-bottom: 6rem;
  }
}
#topics .topic-list li a {
  background: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (min-width: 768px) {
  #topics .topic-list li a {
    height: 100%;
    display: block;
    -webkit-box-shadow: 0 4px 16px -6px rgba(0, 0, 0, 0.6);
            box-shadow: 0 4px 16px -6px rgba(0, 0, 0, 0.6);
    -webkit-transition: 0.4s;
    transition: 0.4s;
  }
}
#topics .topic-list li a .thumb {
  width: 35%;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
}
@media screen and (min-width: 768px) {
  #topics .topic-list li a .thumb {
    width: auto;
  }
}
#topics .topic-list li a .thumb img {
  width: 100%;
  aspect-ratio: 5/4;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (any-hover: hover) {
  #topics .topic-list li a .thumb {
    overflow: hidden;
  }
  #topics .topic-list li a .thumb img {
    -webkit-transition: 0.4s;
    transition: 0.4s;
  }
  #topics .topic-list li a:hover {
    -webkit-box-shadow: 4px 8px 24px -8px rgba(0, 0, 0, 0.6);
            box-shadow: 4px 8px 24px -8px rgba(0, 0, 0, 0.6);
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
  }
  #topics .topic-list li a:hover .thumb img {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
#topics .topic-list li a .content {
  padding: 0 1.5rem 1.5rem;
  line-height: 1.4;
}
@media screen and (min-width: 768px) {
  #topics .topic-list li a .content {
    padding: 0 2rem 2rem;
  }
}
#topics .topic-list li a .content .tag {
  background: var(--tag-color);
  color: #fff;
  font-size: 1.4rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0 1em;
  margin-left: -1.5rem;
  margin-bottom: 0.5rem;
}
@media screen and (min-width: 768px) {
  #topics .topic-list li a .content .tag {
    margin-left: -2rem;
    margin-bottom: 1rem;
  }
}
#topics .topic-list li a .content .date {
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}
@media screen and (min-width: 768px) {
  #topics .topic-list li a .content .date {
    margin-bottom: 1rem;
  }
}
#topics .topic-list li a .content .title {
  font-size: 1.8rem;
}
@media screen and (min-width: 768px) {
  #topics .topic-list li a .content .title {
    font-size: 1.8rem;
  }
}
#topics .button {
  text-align: center;
}
#topics .button a {
  display: inline-block;
  background: var(--text-color);
  color: #fff;
  font-size: 1.6rem;
  letter-spacing: 0.2em;
  padding: 0.5em 2.5em;
  text-align: center;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
@media screen and (min-width: 768px) {
  #topics .button a {
    background: var(--tag-color);
    font-size: 2.2rem;
  }
}
#topics .button a:hover {
  background: #000;
  -webkit-box-shadow: 0 0 0 3px #fff;
          box-shadow: 0 0 0 3px #fff;
}

#course {
  padding: 10rem 0;
}
#course h2 {
  text-align: center;
  font-weight: 500;
  color: #fff;
  font-size: 4rem;
  border-bottom: 4px solid #ffff00;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 3rem;
}
@media screen and (min-width: 768px) {
  #course h2 {
    margin: 0 auto 8rem;
  }
}
@media screen and (min-width: 768px) {
  #course #course-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    row-gap: 6rem;
  }
}
#course #course-list li {
  margin-bottom: 2rem;
}
@media screen and (min-width: 768px) {
  #course #course-list li {
    width: 48%;
  }
  #course #course-list li.full {
    width: 100%;
  }
}
#course #course-list li a img {
  -webkit-transition: -webkit-filter 0.4s, -webkit-transform 0.4s;
  transition: -webkit-filter 0.4s, -webkit-transform 0.4s;
  transition: filter 0.4s, transform 0.4s;
  transition: filter 0.4s, transform 0.4s, -webkit-filter 0.4s, -webkit-transform 0.4s;
}
#course #course-list li a:hover img {
  -webkit-transform: translateY(-4px) scale(1.01);
          transform: translateY(-4px) scale(1.01);
  -webkit-filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
          filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
}

#club {
  padding: 0 0 4rem;
  overflow-x: hidden;
  overflow-y: visible;
}
@media screen and (min-width: 768px) {
  #club {
    padding: 10rem 0;
  }
}
#club .container {
  padding: 0;
}
#club h2 {
  text-align: center;
  font-weight: 500;
  font-size: 4rem;
  color: #fff;
  border-bottom: 4px solid #ffff00;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 3rem;
}
@media screen and (min-width: 768px) {
  #club h2 {
    margin: 0 auto 6rem;
  }
}
#club #club-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 3rem;
}
@media screen and (min-width: 768px) {
  #club #club-list {
    margin-bottom: 8rem;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
#club #club-list li {
  position: relative;
  width: 31.6rem;
  margin-bottom: 3rem;
}
@media screen and (min-width: 768px) {
  #club #club-list li {
    width: 49.6rem;
  }
}
#club #club-list li img {
  -webkit-filter: drop-shadow(2px 2px 8px rgba(0, 0, 0, 0.4));
          filter: drop-shadow(2px 2px 8px rgba(0, 0, 0, 0.4));
  -webkit-transition: -webkit-filter 0.5s;
  transition: -webkit-filter 0.5s;
  transition: filter 0.5s;
  transition: filter 0.5s, -webkit-filter 0.5s;
}
#club #club-list li.baseball {
  margin-left: -2.5rem;
  z-index: 5;
}
#club #club-list li.soccer {
  margin-top: 8.8rem;
  margin-left: -12.4rem;
  margin-right: -2.5rem;
}
#club #club-list li.basket {
  margin-top: 0;
  margin-left: -2.5rem;
}
#club #club-list li.ath {
  margin-top: 8.8rem;
  margin-left: -12.4rem;
  margin-right: -2.5rem;
}
#club #club-list li.judo {
  margin-top: 0;
  margin-left: -2.5rem;
}
#club #club-list li.tennis {
  margin-top: 8.8rem;
  margin-left: -12.4rem;
  margin-right: -2.5rem;
}
#club #club-list li.table_tennis {
  margin-right: -12.4rem;
  margin-left: -2.5rem;
}
#club #club-list li.naginata {
  margin-top: 8.8rem;
  margin-left: -12.4rem;
  margin-right: -2.5rem;
}
@media screen and (min-width: 768px) {
  #club #club-list li.baseball {
    margin-top: 7rem;
  }
  #club #club-list li.soccer {
    margin-top: 15rem;
    margin-left: -15.7rem;
    z-index: 5;
  }
  #club #club-list li.basket {
    margin-top: 0;
    margin-left: -13.2rem;
  }
  #club #club-list li.ath {
    margin-top: 3rem;
    margin-left: 0;
  }
  #club #club-list li.judo {
    margin-top: 11rem;
    margin-left: -15.7rem;
    z-index: 5;
  }
  #club #club-list li.tennis {
    margin-top: -4rem;
    margin-left: -13.2rem;
  }
  #club #club-list li.table_tennis {
    margin-right: 0;
  }
  #club #club-list li.naginata {
    margin-top: 10rem;
  }
  #club #club-list li:hover {
    z-index: 10;
  }
  #club #club-list li:hover img {
    -webkit-filter: drop-shadow(4px 4px 16px rgba(0, 0, 0, 0.5));
            filter: drop-shadow(4px 4px 16px rgba(0, 0, 0, 0.5));
  }
}
#club .button {
  text-align: center;
}
#club .button a {
  display: inline-block;
  background: var(--text-color);
  color: #fff;
  letter-spacing: 0.2em;
  padding: 0.5em 2.5em;
  text-align: center;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  font-size: 1.8rem;
}
@media screen and (min-width: 768px) {
  #club .button a {
    background: var(--tag-color);
    font-size: 2.2rem;
  }
  #club .button a br {
    display: none;
  }
  #club .button a:hover {
    background: #000;
    -webkit-box-shadow: 0 0 0 3px #fff;
            box-shadow: 0 0 0 3px #fff;
  }
}

#access {
  background: rgba(255, 255, 255, 0.6);
  padding: 3rem 0;
}
@media screen and (min-width: 768px) {
  #access {
    padding: 10rem 0;
  }
}
#access h2 {
  text-align: center;
  font-weight: 500;
  font-size: 4rem;
  border-bottom: 4px solid #ffff00;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 3rem;
}
@media screen and (min-width: 768px) {
  #access h2 {
    margin: 0 auto 6rem;
  }
}
#access .gmap {
  margin: auto -2.5rem;
  max-width: 85rem;
}
@media screen and (min-width: 768px) {
  #access .gmap {
    margin: auto;
    width: 85%;
  }
}
#access .gmap iframe {
  aspect-ratio: 16/9;
  width: 100%;
}
#access .gmap p {
  font-size: 1.5rem;
  padding: 0.5rem 1em;
}
@media screen and (min-width: 768px) {
  #access .gmap p {
    font-size: 1.8rem;
    padding: 0.5rem 0;
  }
}
#access .lead {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 4rem auto;
  border-radius: 100vmax;
  border: 1px solid;
  background: #fff;
  line-height: 1.8;
  font-size: 1.6rem;
  font-weight: 500;
  padding: 1rem 4rem;
}
#access .lead strong {
  font-weight: 500;
  background: -webkit-gradient(linear, left bottom, left top, from(rgb(255, 255, 0)), color-stop(15%, rgb(255, 255, 0)), color-stop(15%, rgba(255, 255, 0, 0)), to(rgba(255, 255, 0, 0)));
  background: -webkit-linear-gradient(bottom, rgb(255, 255, 0) 0%, rgb(255, 255, 0) 15%, rgba(255, 255, 0, 0) 15%, rgba(255, 255, 0, 0) 100%);
  background: linear-gradient(0deg, rgb(255, 255, 0) 0%, rgb(255, 255, 0) 15%, rgba(255, 255, 0, 0) 15%, rgba(255, 255, 0, 0) 100%);
}
@media screen and (min-width: 768px) {
  #access .lead {
    font-size: 2.2rem;
    line-height: 1;
    padding: 2.8rem 8rem;
  }
}
#access .button {
  text-align: center;
}
#access .button a {
  display: inline-block;
  background: var(--text-color);
  color: #fff;
  letter-spacing: 0.2em;
  padding: 0.5em 2.5em;
  text-align: center;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  font-size: 1.6rem;
}
@media screen and (min-width: 768px) {
  #access .button a {
    background: var(--tag-color);
    font-size: 2.2rem;
  }
  #access .button a:hover {
    background: #000;
    -webkit-box-shadow: 0 0 0 3px #fff;
            box-shadow: 0 0 0 3px #fff;
  }
}

footer {
  background: #fff;
  padding: 8rem 2rem;
}
footer h2 {
  text-align: center;
  margin-bottom: 5rem;
}
footer h2 img {
  width: 90%;
}
@media screen and (min-width: 768px) {
  footer h2 img {
    width: 42%;
    max-width: 42rem;
  }
}
footer.black {
  background: #000;
  color: #fff;
  padding-top: 12rem;
}
footer.black h2 img {
  width: 72%;
}
footer #sns-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 3.8rem;
  margin-bottom: 5rem;
}
footer #sns-list li {
  width: 4.8rem;
}
footer .text-link {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
footer .text-link li {
  padding: 0 1em;
  line-height: 1;
  font-size: 1.8rem;
}
footer .text-link li + li {
  border-left: 1px solid #000;
}
footer .copyright {
  text-align: center;
  margin: 3rem 0;
  font-size: 1.6rem;
}

.coursePage {
  background: #fff;
}
.coursePage main::after {
  content: none !important;
}
.coursePage #pageHeader .container {
  max-width: none;
  padding: 0;
}
.coursePage #pageHeader .mv {
  width: 100%;
}
.coursePage #pageHeader .mv img {
  width: 100%;
}
.coursePage #pageHeader h1 {
  text-align: center;
  margin: -4rem 2rem 0;
  border-bottom: 1px solid #000;
}
.coursePage #pageHeader h1 img {
  width: 30rem;
}
.coursePage #intro #anker ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
}
.coursePage #intro #anker ul li {
  width: calc(50% - 0.5rem);
}
.coursePage #intro #anker ul li a {
  display: block;
  width: 100%;
}
.coursePage #intro #anker ul li a img {
  width: 100%;
}
.coursePage #intro .lead {
  margin: 4rem 0;
}
.coursePage #intro .lead h2 {
  color: #BB102E;
  font-size: 3.4rem;
  font-weight: 600;
  font-family: serif;
  line-height: 1.4;
  margin-bottom: 0.5em;
}
.coursePage #intro .lead h2.premium {
  color: #1C50A1;
}
.coursePage #intro .lead h2.sports {
  color: #3C9F2F;
}
@media (min-width: 768px) {
  .coursePage #intro .lead {
    text-align: center;
  }
}
.coursePage #voice h2 {
  font-size: 4rem;
  text-align: center;
  margin-bottom: 1em;
}
.coursePage #voice .voice-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 4rem 2rem;
}
.coursePage #voice .voice-list li {
  width: 100%;
}
@media (min-width: 768px) {
  .coursePage #voice .voice-list li {
    width: calc(50% - 1rem);
  }
}
.coursePage #voice .voice-list li .thumb {
  margin-bottom: 2rem;
}
.coursePage #voice .voice-list li .profile {
  font-size: 2.4rem;
  font-weight: 600;
  color: #BB102E;
  border-bottom: 0.4rem solid #BB102E;
  margin-bottom: 1rem;
}
.coursePage #voice .voice-list li .profile small {
  display: block;
  font-size: 1.6rem;
  line-height: 1.4;
  margin-bottom: 0.5em;
}/*# sourceMappingURL=style.css.map */