/***********************************************************************
media queries setting
**********************************************************************/
/***********************************************************************
variable
**********************************************************************/
/***********************************************************************
reset
**********************************************************************/
* {
  margin: 0;
  padding: 0; }

html,
body {
  -webkit-text-size-adjust: 100%; }

body {
  color: #000;
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.5rem; }

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
table,
th,
td,
img,
article,
footer,
header,
nav,
section {
  margin: 0;
  padding: 0;
  border: none;
  font-weight: 500;
  font-feature-settings: "palt";
  list-style-type: none; }

th {
  font-weight: normal;
  text-align: inherit; }

select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: 100%;
  font-family: "Noto Sans JP", sans-serif; }

select {
  cursor: pointer; }

select::-ms-expand {
  display: none; }

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

*:focus {
  outline: none; }

img[src$=".svg"] {
  width: 100%; }

hr {
  display: none; }

a {
  color: #000;
  text-decoration: none;
  outline: none;
  transition: .3s all; }
  a:hover {
    /*opacity: .75;*/ }
    @media (min-width: 768px) {
      a:hover {
        opacity: 1; } }

/* set html5 elements to block */
article,
footer,
header,
nav,
section {
  display: block; }

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none; }

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

.pc {
  display: none; }
  @media (min-width: 768px) {
    .pc {
      display: block; } }

/********************************************************************************
header
********************************************************************************/
header {
  background: #fff;
  padding: 24px 0 20px;
  position: relative; }
  header::before {
    content: "";
    background: url("../images/zigzag.svg") repeat-x 0 0;
    background-size: 25px 14px;
    display: block;
    height: 25px;
    width: 100%;
    position: absolute;
    bottom: -24px;
    left: 0; }
  header img {
    display: block;
    max-width: 342px;
    width: 92% !important;
    margin: auto; }
    @media (min-width: 768px) {
      header img {
        max-width: 1000px; } }

/*header*/
/********************************************************************************
content
********************************************************************************/
.wrapper {
  background: url("../../images/main.jpg") no-repeat center center;
  background-size: cover;
  position: fixed;
  transform-origin: center;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  z-index: -1; }
  @media (min-width: 768px) {
    .wrapper {
      background-image: url("../../images/main-pc.jpg"); } }

/*wrapper*/
.main-text {
  margin: 42px auto 0;
  height: calc(85svh - 112px);
  min-height: 550px;
  width: 92%; }
  @media (min-width: 768px) {
    .main-text {
      margin-top: 70px;
      height: calc(78svh - 136px);
      max-width: 1000px; } }
  .main-text .catch {
    max-width: 275px; }
    @media (min-width: 768px) {
      .main-text .catch {
        max-width: 382px; } }
  .main-text .title {
    margin-top: 86px;
    max-width: 315px; }
    @media (min-width: 768px) {
      .main-text .title {
        margin-top: 55px;
        max-width: 436px; } }

/*main-text*/
.event-content-wrapper {
  padding-bottom: 30px;
  position: relative; }
  @media (min-width: 768px) {
    .event-content-wrapper {
      padding-bottom: 40px;
      margin: auto;
      max-width: 1000px; } }
  .event-content-wrapper::before {
    content: "";
    background: #a08700;
    display: block;
    height: calc(100% - 94px);
    width: 100%;
    position: absolute;
    top: 94px;
    left: 0;
    z-index: -1; }
    @media (min-width: 768px) {
      .event-content-wrapper::before {
        box-shadow: 0px 0px 10px #003a04;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        height: calc(100% - 44px);
        top: 44px; } }

/*event-content-wrapper*/
.schedule-wrapper {
  /*schedule-content*/ }
  .schedule-wrapper .inner {
    margin: auto;
    width: 92%; }
    @media (min-width: 768px) {
      .schedule-wrapper .inner {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between; } }
  .schedule-wrapper .schedule-content {
    background: #ebeddb;
    border-radius: 16px;
    /*box-shadow: 0px 8px 16px $green;*/
    display: flex;
    padding: 16px 0;
    position: relative;
    z-index: 4;
    /*derail*/ }
    @media (min-width: 768px) {
      .schedule-wrapper .schedule-content {
        max-width: 452px;
        width: 49%; } }
    .schedule-wrapper .schedule-content.end-schedule .googlemap {
      position: relative; }
    .schedule-wrapper .schedule-content .end-text {
      background: #fff;
      border: 1px solid #731628;
      color: #731628;
      padding: 1rem 0;
      text-align: center;
      width: 80%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }
    .schedule-wrapper .schedule-content + .schedule-content {
      background: #ebeddb;
      background: linear-gradient(0deg, #ebeddb 88%, #003a04 98%);
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      padding-top: 62px;
      margin-top: -32px; }
      @media (min-width: 768px) {
        .schedule-wrapper .schedule-content + .schedule-content {
          background: #ebeddb;
          border-radius: 16px;
          padding-top: 16px;
          margin-top: 0; } }
    .schedule-wrapper .schedule-content.place2 {
      z-index: 3; }
    .schedule-wrapper .schedule-content.place3 {
      z-index: 2; }
      @media (min-width: 768px) {
        .schedule-wrapper .schedule-content.place3 {
          margin-top: 2%; } }
    .schedule-wrapper .schedule-content.place4 {
      z-index: 1; }
      @media (min-width: 768px) {
        .schedule-wrapper .schedule-content.place4 {
          margin-top: 2%; } }
    .schedule-wrapper .schedule-content .area {
      padding: 8px 3% 0;
      width: 11%; }
    .schedule-wrapper .schedule-content .detail {
      border-left: 1px solid #003a04;
      padding: 0 3%;
      width: 75%;
      /*date-wrapper*/ }
      .schedule-wrapper .schedule-content .detail .date-wrapper {
        color: #003a04;
        display: flex;
        align-items: flex-end; }
        .schedule-wrapper .schedule-content .detail .date-wrapper .date {
          font-size: clamp(45px, 4.5vw, 16px); }
          .schedule-wrapper .schedule-content .detail .date-wrapper .date small {
            font-size: clamp(16px, 1.5vw, 16px); }
        .schedule-wrapper .schedule-content .detail .date-wrapper .time {
          font-size: clamp(14px, 1.4vw, 16px);
          line-height: 140%;
          margin-left: .5rem; }
      .schedule-wrapper .schedule-content .detail .capacity {
        font-size: clamp(16px, 1.6vw, 16px);
        margin-top: .5rem; }
      .schedule-wrapper .schedule-content .detail .place {
        color: #003a04;
        font-size: clamp(17px, 1.7vw, 16px);
        font-weight: 700;
        margin-top: .75rem; }
      .schedule-wrapper .schedule-content .detail .address {
        font-size: clamp(14px, 1.4vw, 16px); }
      .schedule-wrapper .schedule-content .detail .googlemap {
        margin-top: 1rem;
        aspect-ratio: 16 / 7;
        max-width: 1000px;
        width: 100%;
        height: auto; }
        @media (min-width: 768px) {
          .schedule-wrapper .schedule-content .detail .googlemap {
            aspect-ratio: 16 / 6; } }

/*schedule-wrapper*/
.lecture-wrapper {
  margin-top: 32px;
  /*inner*/
  /*part-wrapper*/ }
  @media (min-width: 768px) {
    .lecture-wrapper {
      margin-top: 56px; } }
  .lecture-wrapper .inner {
    margin: auto;
    width: 92%; }
  .lecture-wrapper .part-wrapper {
    color: #fff;
    /*teacher-wrapper*/
    /*column-box*/ }
    .lecture-wrapper .part-wrapper + .part-wrapper {
      margin-top: 20px; }
      @media (min-width: 768px) {
        .lecture-wrapper .part-wrapper + .part-wrapper {
          margin-top: 50px; } }
    .lecture-wrapper .part-wrapper .num {
      border-bottom: 4px solid #731628;
      color: #731628;
      font-family: "Noto Serif JP", serif;
      font-size: clamp(20px, 2vw, 23px);
      padding-bottom: .5rem;
      text-align: center; }
      .lecture-wrapper .part-wrapper .num strong {
        font-size: clamp(31px, 3.1vw, 35px); }
    .lecture-wrapper .part-wrapper .head {
      font-size: clamp(31px, 3.1vw, 32px);
      font-weight: 500;
      margin-top: 1.5rem;
      text-align: center; }
      @media (min-width: 768px) {
        .lecture-wrapper .part-wrapper .head {
          margin-top: 32px; } }
    .lecture-wrapper .part-wrapper .teacher-wrapper {
      display: flex;
      align-items: flex-end;
      margin-top: 18px; }
      @media (min-width: 768px) {
        .lecture-wrapper .part-wrapper .teacher-wrapper {
          align-items: flex-start;
          max-width: 690px;
          margin: 38px auto 0; } }
      .lecture-wrapper .part-wrapper .teacher-wrapper img {
        width: 30.5%; }
        @media (min-width: 768px) {
          .lecture-wrapper .part-wrapper .teacher-wrapper img {
            width: 34%; } }
      .lecture-wrapper .part-wrapper .teacher-wrapper .name-box {
        margin-left: 5%;
        padding-bottom: .5rem;
        width: 65%; }
        .lecture-wrapper .part-wrapper .teacher-wrapper .name-box p {
          font-size: clamp(13px, 1.3vw, 16px); }
        .lecture-wrapper .part-wrapper .teacher-wrapper .name-box .name {
          font-size: clamp(20px, 2.2vw, 28px); }
          @media (min-width: 768px) {
            .lecture-wrapper .part-wrapper .teacher-wrapper .name-box .name {
              margin-top: .65rem; } }
          @media (min-width: 768px) {
            .lecture-wrapper .part-wrapper .teacher-wrapper .name-box .name + p {
              font-size: 14px;
              margin-top: .25rem; } }
    .lecture-wrapper .part-wrapper .column-box {
      position: relative; }
      @media (min-width: 768px) {
        .lecture-wrapper .part-wrapper .column-box {
          display: flex;
          justify-content: space-between;
          max-width: 690px;
          margin: 32px auto 0; } }
      @media (min-width: 768px) {
        .lecture-wrapper .part-wrapper .column-box::before {
          content: "";
          background: #731628;
          height: 100%;
          width: 2px;
          position: absolute;
          top: 0;
          left: 50%; } }
      @media (min-width: 768px) {
        .lecture-wrapper .part-wrapper .column-box .content {
          max-width: 295px;
          width: 48%; } }
      .lecture-wrapper .part-wrapper .column-box .content + .content {
        border-top: 1px solid #731628;
        margin-top: 1.25rem; }
        @media (min-width: 768px) {
          .lecture-wrapper .part-wrapper .column-box .content + .content {
            border-top: none;
            margin-top: 0; } }
      @media (min-width: 768px) {
        .lecture-wrapper .part-wrapper .column-box .content .head {
          margin-top: 0; } }
      @media (min-width: 768px) {
        .lecture-wrapper .part-wrapper .column-box .content .desc {
          margin-top: 2rem;
          padding-bottom: 1rem; } }
    .lecture-wrapper .part-wrapper .desc {
      font-weight: 400;
      margin-top: .75rem; }
      @media (min-width: 768px) {
        .lecture-wrapper .part-wrapper .desc {
          font-size: 14px !important; } }

/*lecture-wrapper*/
.public-event-wrapper {
  background: #fff;
  padding: 48px 0 62px; }
  @media (min-width: 768px) {
    .public-event-wrapper {
      box-shadow: 0px 0px 10px #003a04;
      max-width: 100%;
      margin: auto; } }
  .public-event-wrapper .inner {
    margin: auto;
    width: 92%; }
    @media (min-width: 768px) {
      .public-event-wrapper .inner {
        display: flex;
        justify-content: space-between;
        gap: 5%;
        max-width: 980px; } }
  .public-event-wrapper .event-wrapper {
    padding-bottom: 1rem;
    position: relative; }
    @media (min-width: 768px) {
      .public-event-wrapper .event-wrapper {
        width: 100%; } }
    .public-event-wrapper .event-wrapper::before {
      content: "";
      border: 1px solid #003a04;
      border-radius: 10px;
      display: block;
      height: 95%;
      width: 100%;
      position: absolute;
      top: 5%;
      left: 0; }
    .public-event-wrapper .event-wrapper::after {
      content: "";
      background: #fff;
      display: block;
      height: 83%;
      width: calc(100% + 4px);
      position: absolute;
      top: 11%;
      left: -1px;
      z-index: 0; }
    .public-event-wrapper .event-wrapper p {
      position: relative;
      z-index: 1; }
    .public-event-wrapper .event-wrapper .date {
      color: #003a04;
      font-size: clamp(45px, 4.5vw, 45px);
      text-align: center; }
      .public-event-wrapper .event-wrapper .date small {
        font-size: clamp(16px, 1.6vw, 16px); }
      .public-event-wrapper .event-wrapper .date span {
        background: #fff;
        padding: 0 1rem;
        position: relative; }
    .public-event-wrapper .event-wrapper .time {
      color: #003a04;
      font-size: clamp(24px, 2.4vw, 24px);
      margin-top: .25rem;
      text-align: center; }
    .public-event-wrapper .event-wrapper .head {
      font-size: clamp(41px, 4.1vw, 41px);
      font-family: "Noto Serif JP", serif;
      font-weight: 400;
      line-height: 1.2;
      margin-top: 1.5rem;
      text-align: center; }
      .public-event-wrapper .event-wrapper .head span {
        background: #731628;
        display: block;
        color: #fff;
        letter-spacing: -2px;
        padding-right: 5px;
        padding-bottom: 3px;
        position: relative;
        z-index: 1;
        /*&::before {
            content: "";
            background: $red;
            display: block;
            height: 78%;
            width: 100%;
            position: absolute;
            top: 9px;
            left: 0;
            z-index: -1;
        }*/ }
      .public-event-wrapper .event-wrapper .head small {
        font-size: clamp(24px, 2.4vw, 24px);
        display: block; }
    .public-event-wrapper .event-wrapper .place {
      font-size: clamp(15px, 1.5vw, 15px);
      margin-top: 1.5rem;
      text-align: center; }
    .public-event-wrapper .event-wrapper .desc {
      font-weight: 400;
      margin-top: .75rem;
      padding: 0 1.5rem; }
    .public-event-wrapper .event-wrapper.event2 {
      margin-top: 52px; }
      @media (min-width: 768px) {
        .public-event-wrapper .event-wrapper.event2 {
          margin-top: 0; } }
      .public-event-wrapper .event-wrapper.event2 .head span {
        padding-right: 0;
        padding-left: 3px; }
      .public-event-wrapper .event-wrapper.event2 .time {
        display: none; }
        @media (min-width: 768px) {
          .public-event-wrapper .event-wrapper.event2 .time {
            display: block; } }
    .public-event-wrapper .event-wrapper .flex-box {
      display: inherit; }
      @media (min-width: 768px) {
        .public-event-wrapper .event-wrapper .flex-box {
          display: flex;
          padding: 0 2rem; } }
      .public-event-wrapper .event-wrapper .flex-box .head {
        white-space: nowrap; }
      .public-event-wrapper .event-wrapper .flex-box .desc {
        padding: 0 0 0 1.5rem; }

/*public-event-wrapper*/
.access-wrapper {
  background: #f0ebd5;
  padding: 38px 0; }
  @media (min-width: 768px) {
    .access-wrapper {
      padding: 62px 0 62px;
      width: 100%;
      margin: auto; } }
  .access-wrapper .inner {
    margin: auto;
    width: 92%; }
    @media (min-width: 768px) {
      .access-wrapper .inner {
        width: 100%; } }
  .access-wrapper .head {
    color: #003a04;
    font-size: clamp(25px, 2.5vw, 25px);
    font-weight: 700;
    text-align: center; }
  .access-wrapper .note {
    color: #731628;
    font-size: clamp(18px, 1.8vw, 18px);
    font-weight: 700;
    padding: 1rem 0 .75rem;
    position: relative;
    margin: 32px auto 0;
    max-width: 280px;
    text-align: center; }
    @media (min-width: 768px) {
      .access-wrapper .note {
        max-width: 450px; } }
    .access-wrapper .note span {
      position: relative;
      z-index: 1; }
    .access-wrapper .note::before {
      content: "";
      border: 3px solid #731628;
      display: block;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0; }
    .access-wrapper .note::after {
      content: "";
      background: #f0ebd5;
      display: block;
      height: calc(100% + 10px);
      width: 90%;
      position: absolute;
      top: -3px;
      left: calc(5% + 3px);
      z-index: 0; }
  .access-wrapper .name {
    font-size: clamp(20px, 2vw, 20px);
    margin-top: 2rem;
    text-align: center; }
  .access-wrapper .address {
    font-weight: 400;
    margin-top: .25rem;
    text-align: center; }
  @media (min-width: 768px) {
    .access-wrapper .column-box {
      display: flex;
      justify-content: space-between;
      max-width: 765px;
      margin: auto; } }
  @media (min-width: 768px) {
    .access-wrapper .column-box .text-box {
      width: 48%; } }
  .access-wrapper .sub-head {
    background: #003a04;
    border-radius: 25px;
    color: #fff;
    font-size: clamp(16px, 1.6vw, 16px);
    padding: 2px 0 4px 1rem;
    margin-top: 2rem; }
  .access-wrapper .cross-head {
    color: #731628;
    font-size: clamp(15px, 1.5vw, 15px);
    font-weight: 700;
    margin-top: .75rem; }
    @media (min-width: 768px) {
      .access-wrapper .cross-head {
        margin-top: 1rem; } }
  .access-wrapper .googlemap {
    margin-top: 1rem;
    aspect-ratio: 16 / 7;
    max-width: 1000px;
    width: 100%;
    height: auto; }
    @media (min-width: 768px) {
      .access-wrapper .googlemap {
        aspect-ratio: 16 / 4;
        max-width: inherit; } }
    @media (min-width: 768px) {
      .access-wrapper .googlemap iframe {
        height: 350px; } }

/*access-wrapper*/
/********************************************************************************
footer
********************************************************************************/
footer {
  background: #fff;
  padding: 48px 0 0; }
  @media (min-width: 768px) {
    footer {
      width: 100%;
      margin: auto; } }
  footer .logo {
    margin: auto;
    width: 172px; }
    @media (min-width: 768px) {
      footer .logo {
        margin: 0 auto;
        width: 200px; } }
  footer .address {
    font-size: clamp(13px, 1.3vw, 13px);
    margin-top: 1rem;
    text-align: center; }
  footer .note {
    font-size: clamp(12px, 1.2vw, 12px);
    margin-top: 1rem;
    text-align: center; }
  footer .home-btn {
    margin: auto;
    width: 90%;
    text-align: center; }
    @media (min-width: 768px) {
      footer .home-btn {
        max-width: 380px; } }
    footer .home-btn a {
      background: #731628;
      border-radius: 30px;
      color: #fff;
      display: block;
      font-size: clamp(15px, 1.5vw, 15px);
      padding: 1rem;
      margin-top: 1.5rem; }
  footer .sns-list {
    display: flex;
    justify-content: space-between;
    margin: 24px auto 0;
    max-width: 220px; }
    @media (min-width: 768px) {
      footer .sns-list {
        margin-top: 32px; } }
    footer .sns-list li img {
      width: 40px; }
  footer .copy {
    background: #000;
    color: #fff;
    font-size: clamp(11px, 1.1vw, 11px);
    padding: 2px 0;
    margin-top: 30px;
    text-align: center; }

/*footer*/
/********************************************************************************
opne school
********************************************************************************/
.open-school-wrapper {
  border-top: 6px solid #fff;
  display: inherit;
  position: relative;
  box-shadow: 0px 0px 10px;
  /*overflow: hidden;*/
  /*schedule-wrapper*/
  /*reservation-date*/
  /*reservation-prigram*/ }
  @media (min-width: 768px) {
    .open-school-wrapper {
      border-top: 6px solid #731628;
      display: flex; } }
  .open-school-wrapper .os-btn {
    position: sticky;
    right: 0;
    top: 20px;
    padding-top: 62px; }
    @media (min-width: 768px) {
      .open-school-wrapper .os-btn {
        padding-top: 0; } }
    .open-school-wrapper .os-btn img {
      width: 33px; }
  .open-school-wrapper .left-images,
  .open-school-wrapper .right-images {
    /*position: sticky;
    top: 0;
    background: url("../images/open-school/left-image.jpg")no-repeat 0 0;
    background-size: cover;*/
    /*img{
        height: 100vh;
        width: auto;
        object-fit: cover;
    }*/ }
  .open-school-wrapper .content-wrapper {
    background: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 0 42px 33px; }
    @media (min-width: 768px) {
      .open-school-wrapper .content-wrapper {
        align-items: baseline;
        /*padding: 75px 0 65px 65px;*/
        padding: 170px 0 65px 65px;
        max-width: calc(1000px - 65px);
        min-width: calc(1000px - 65px);
        width: 300%; } }
  .open-school-wrapper .os-head {
    position: absolute;
    top: -24px;
    left: 0;
    z-index: 9; }
    @media (min-width: 768px) {
      .open-school-wrapper .os-head {
        top: 48px;
        left: -40px; } }
    .open-school-wrapper .os-head img {
      width: 320px; }
      @media (min-width: 768px) {
        .open-school-wrapper .os-head img {
          width: 622px; } }
  .open-school-wrapper .end-text {
    background: #fff;
    border: 1px solid #731628;
    color: #731628;
    padding: 1rem 0;
    margin: 0 auto 24px;
    text-align: center;
    width: 100%; }
    @media (min-width: 768px) {
      .open-school-wrapper .end-text {
        padding: 1.5rem 0;
        margin-bottom: 42px; } }
  .open-school-wrapper .sticky-inner {
    padding-top: 62px;
    width: 94%; }
    @media (min-width: 768px) {
      .open-school-wrapper .sticky-inner {
        padding-top: 0; } }
  .open-school-wrapper .schedule-wrapper {
    /*date-wrapper*/ }
    @media (min-width: 768px) {
      .open-school-wrapper .schedule-wrapper {
        display: flex;
        gap: 0 10%; } }
    .open-school-wrapper .schedule-wrapper .date-wrapper,
    .open-school-wrapper .schedule-wrapper .place-wrapper {
      color: #003a04;
      display: flex;
      align-items: center; }
      .open-school-wrapper .schedule-wrapper .date-wrapper .image,
      .open-school-wrapper .schedule-wrapper .place-wrapper .image {
        margin-right: 1rem;
        width: 75px; }
      .open-school-wrapper .schedule-wrapper .date-wrapper .date,
      .open-school-wrapper .schedule-wrapper .place-wrapper .date {
        font-size: clamp(45px, 4.5vw, 16px);
        margin-top: .5rem; }
        @media (min-width: 768px) {
          .open-school-wrapper .schedule-wrapper .date-wrapper .date,
          .open-school-wrapper .schedule-wrapper .place-wrapper .date {
            margin-top: 0; } }
        .open-school-wrapper .schedule-wrapper .date-wrapper .date small,
        .open-school-wrapper .schedule-wrapper .place-wrapper .date small {
          font-size: clamp(16px, 1.5vw, 16px); }
      .open-school-wrapper .schedule-wrapper .date-wrapper .time,
      .open-school-wrapper .schedule-wrapper .place-wrapper .time {
        font-size: clamp(14px, 1.4vw, 16px);
        line-height: 140%;
        margin-left: .5rem; }
    .open-school-wrapper .schedule-wrapper .place-wrapper {
      margin-top: 16px; }
      @media (min-width: 768px) {
        .open-school-wrapper .schedule-wrapper .place-wrapper {
          margin-top: 0; } }
      .open-school-wrapper .schedule-wrapper .place-wrapper .place {
        font-size: clamp(16px, 1.8vw, 20px); }
  .open-school-wrapper .reservation-date {
    margin-top: 18px; }
    @media (min-width: 768px) {
      .open-school-wrapper .reservation-date {
        margin-top: 32px; } }
    .open-school-wrapper .reservation-date .image {
      border: 2px solid #a08700;
      border-left: none;
      border-right: none;
      padding: 1rem 0; }
      .open-school-wrapper .reservation-date .image img {
        margin: auto;
        width: 80%; }
        @media (min-width: 768px) {
          .open-school-wrapper .reservation-date .image img {
            width: 537px; } }
    .open-school-wrapper .reservation-date .text {
      font-family: "Noto Serif JP", serif;
      font-weight: 700;
      font-size: clamp(14px, 1.5vw, 17px);
      margin-top: 1.5rem; }
  .open-school-wrapper .reservation-program,
  .open-school-wrapper .free-program {
    margin-top: 48px; }
    .open-school-wrapper .reservation-program .cross-head,
    .open-school-wrapper .free-program .cross-head {
      background: #a08700;
      border-radius: 25px;
      color: #fff;
      padding: .5rem 0;
      padding-left: 0rem;
      text-align: center; }
      @media (min-width: 768px) {
        .open-school-wrapper .reservation-program .cross-head,
        .open-school-wrapper .free-program .cross-head {
          padding-left: 2.5rem;
          text-align: left; } }
      .open-school-wrapper .reservation-program .cross-head .name,
      .open-school-wrapper .free-program .cross-head .name {
        font-size: clamp(18px, 2vw, 20px); }
        .open-school-wrapper .reservation-program .cross-head .name small,
        .open-school-wrapper .free-program .cross-head .name small {
          border-left: 1px solid #fff;
          font-size: clamp(15px, 1.6vw, 18px);
          margin-left: 1rem;
          padding-left: 1rem; }
          @media (min-width: 768px) {
            .open-school-wrapper .reservation-program .cross-head .name small,
            .open-school-wrapper .free-program .cross-head .name small {
              margin-left: 2rem;
              padding-left: 2rem; } }
      .open-school-wrapper .reservation-program .cross-head + p,
      .open-school-wrapper .free-program .cross-head + p {
        font-family: "Noto Serif JP", serif;
        font-weight: 700;
        font-size: clamp(13px, 1.5vw, 16px);
        margin-top: 1rem; }
    .open-school-wrapper .reservation-program .time,
    .open-school-wrapper .free-program .time {
      color: #731628;
      font-size: clamp(17px, 1.7vw, 17px);
      margin-top: 1rem;
      text-align: center; }
    .open-school-wrapper .reservation-program ul,
    .open-school-wrapper .free-program ul {
      display: inherit;
      margin-top: 24px; }
      @media (min-width: 768px) {
        .open-school-wrapper .reservation-program ul,
        .open-school-wrapper .free-program ul {
          display: flex;
          gap: 0 3%;
          margin-top: 46px; } }
      .open-school-wrapper .reservation-program ul li,
      .open-school-wrapper .free-program ul li {
        flex: 1; }
        .open-school-wrapper .reservation-program ul li + li,
        .open-school-wrapper .free-program ul li + li {
          margin-top: 24px; }
          @media (min-width: 768px) {
            .open-school-wrapper .reservation-program ul li + li,
            .open-school-wrapper .free-program ul li + li {
              margin: 0; } }
        .open-school-wrapper .reservation-program ul li .subject,
        .open-school-wrapper .free-program ul li .subject {
          background: #d2b400;
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
          color: #fff;
          margin: auto;
          padding: .25rem 0;
          text-align: center;
          width: 70%; }
          @media (min-width: 768px) {
            .open-school-wrapper .reservation-program ul li .subject,
            .open-school-wrapper .free-program ul li .subject {
              padding: .5rem 0; } }
        .open-school-wrapper .reservation-program ul li .content,
        .open-school-wrapper .free-program ul li .content {
          background: #ebeddb;
          border-radius: 8px;
          color: #731628;
          flex-grow: 1;
          font-size: clamp(24px, 2.4vw, 25px);
          font-weight: 700;
          line-height: 1.3;
          padding: 1.2rem 0;
          text-align: center; }
          @media (min-width: 768px) {
            .open-school-wrapper .reservation-program ul li .content,
            .open-school-wrapper .free-program ul li .content {
              padding: 2rem 0; } }
        .open-school-wrapper .reservation-program ul li .desc,
        .open-school-wrapper .free-program ul li .desc {
          font-size: clamp(13px, 1.3vw, 14px);
          margin-top: .5rem; }
          @media (min-width: 768px) {
            .open-school-wrapper .reservation-program ul li .desc,
            .open-school-wrapper .free-program ul li .desc {
              margin-top: 1rem; } }
  .open-school-wrapper .free-program {
    margin-top: 56px; }
    .open-school-wrapper .free-program .cross-head {
      background: #005139; }
      .open-school-wrapper .free-program .cross-head .name small {
        border-left: none;
        margin-left: 0rem;
        padding-left: 0rem; }
    .open-school-wrapper .free-program ul li .subject {
      background: #83a811; }
    .open-school-wrapper .free-program ul li .desc {
      font-size: clamp(14px, 1.4vw, 14px);
      margin-top: 1rem; }
    .open-school-wrapper .free-program ul li:nth-child(2) .content {
      padding: 1.2rem 0; }
      @media (min-width: 768px) {
        .open-school-wrapper .free-program ul li:nth-child(2) .content {
          padding: 3rem 0; } }
  .open-school-wrapper .stand-wrapper {
    background: #ffffe3;
    border: 2px solid #a08700;
    border-radius: 12px;
    margin-top: 46px;
    padding: 1rem; }
    @media (min-width: 768px) {
      .open-school-wrapper .stand-wrapper {
        display: flex;
        gap: 0 5%;
        padding: 2rem; } }
    .open-school-wrapper .stand-wrapper .head {
      color: #005139;
      font-size: clamp(20px, 2.2vw, 22px); }
    .open-school-wrapper .stand-wrapper .text {
      font-family: "Noto Serif JP", serif;
      font-weight: 700;
      font-size: clamp(13px, 1.5vw, 16px);
      margin-top: 1rem; }
    .open-school-wrapper .stand-wrapper img {
      margin-top: 24px; }
      @media (min-width: 768px) {
        .open-school-wrapper .stand-wrapper img {
          margin: 0; } }

/*open-school-wrapper*/
/********************************************************************************
infinit-slide
********************************************************************************/
.infinit-slide {
  overflow: hidden; }
  .infinit-slide .slide-inner {
    display: flex;
    overflow: hidden; }
  .infinit-slide ul {
    animation: band 80s linear infinite 0.5s both;
    display: flex;
    list-style: none;
    padding: 0; }
  .infinit-slide img {
    pointer-events: none;
    max-width: inherit;
    height: 182px; }

/*infinit-slide*/
@keyframes band {
  0% {
    transform: translateX(0%); }
  100% {
    transform: translateX(-100%); } }
.infinit-slide-vertical {
  width: 100%;
  position: relative;
  overflow: hidden; }
  .infinit-slide-vertical img {
    width: 100%; }
  .infinit-slide-vertical .slide-inner {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0; }
  .infinit-slide-vertical ul {
    animation: band-vertical 150s linear infinite 0.5s both;
    list-style: none;
    padding: 0; }
  .infinit-slide-vertical img {
    pointer-events: none;
    max-width: inherit; }

/*infinit-slide*/
@keyframes band-vertical {
  0% {
    transform: translateY(0%); }
  100% {
    transform: translateY(-100%); } }
/********************************************************************************
menu
********************************************************************************/
.drawer-overlay {
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 8; }

.side-btn .drawer-hamburger {
  /*background: $gold;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  font-family: $font;
  font-size: 16px;
  padding: 1rem .15rem 1rem .25rem;
  top: 176px;
  right: 0;
  width: auto;
  z-index: 9;*/
  padding: 0 0 0 1rem;
  top: 176px;
  width: 33px;
  z-index: 9; }
  @media (min-width: 768px) {
    .side-btn .drawer-hamburger {
      box-shadow: 0px 0px 10px #003a04;
      border-bottom-left-radius: 10px;
      border-top-left-radius: 10px;
      padding: 0 0 0 0rem;
      top: 311px;
      width: 105px; } }
.side-btn .sr-only {
  /*color: #fff;*/
  clip: inherit;
  overflow: inherit;
  position: relative;
  margin: 0;
  padding: inherit;
  height: auto;
  /*writing-mode: vertical-rl;*/ }
  @media (min-width: 768px) {
    .side-btn .sr-only img {
      border-bottom-left-radius: 10px;
      border-top-left-radius: 10px; } }
.side-btn .drawer-nav {
  height: auto;
  width: 80%;
  padding: 1.5rem 1rem 1rem;
  top: 176px;
  right: calc(-80% - 2rem);
  z-index: 9; }
  @media (min-width: 768px) {
    .side-btn .drawer-nav {
      width: 50%;
      top: 311px;
      padding: 1.5rem 5rem 1rem 2rem;
      right: calc(-50% - 7rem); } }
  .side-btn .drawer-nav p {
    font-size: clamp(15px, 1.5vw, 15px); }
    @media (min-width: 768px) {
      .side-btn .drawer-nav p {
        text-align: center; } }
  .side-btn .drawer-nav .note {
    font-size: clamp(12px, 1.2vw, 14px);
    font-weight: 400;
    line-height: 140%; }
    @media (min-width: 768px) {
      .side-btn .drawer-nav .note {
        font-weight: 500;
        text-align: center; } }
  .side-btn .drawer-nav ul {
    margin-top: 1rem; }
  .side-btn .drawer-nav li {
    text-align: center; }
    .side-btn .drawer-nav li + li {
      margin-top: 1rem; }
    .side-btn .drawer-nav li:first-child a {
      padding: 1.8rem 0; }
  .side-btn .drawer-nav a {
    background: #003a04;
    border-radius: 12px;
    color: #fff;
    display: block;
    font-size: clamp(20px, 2vw, 20px);
    padding: 1rem 0;
    position: relative; }
    .side-btn .drawer-nav a span {
      font-size: clamp(14px, 1.4vw, 14px); }
    .side-btn .drawer-nav a::before {
      content: "";
      background: url("../../images/arrow.svg") no-repeat 0 0;
      background-size: cover;
      display: block;
      height: 22px;
      width: 22px;
      position: absolute;
      top: 50%;
      right: -11px;
      transform: translate(0, -50%); }
  .side-btn .drawer-nav .close {
    margin: 1rem auto 0;
    width: 20px; }
    @media (min-width: 768px) {
      .side-btn .drawer-nav .close:hover {
        cursor: pointer; } }

/*side-btn*/
.drawer--right.drawer-open .drawer-hamburger {
  right: calc(80% + 2rem) !important; }
  @media (min-width: 768px) {
    .drawer--right.drawer-open .drawer-hamburger {
      right: calc(50% + 7rem) !important; } }