@charset "utf-8";


/* 変数 */
  :root {
    --leMusic-color:var(--color-red);
    --leButai-color:var(--color-pink);
    --leOuyo-color:var(--color-bleu);

    --color-white: #fff;

    --color-orange: rgb(var(--color-orange-rgb));/* #f2ae31 */;
    --color-orange-rgb: 242, 174, 49;
    --color-bleu: rgb(var(--color-bleu-rgb)); /* #3fa9f5 */
    --color-bleu-rgb: 63, 169, 245;
    --color-red: rgb(var(--color-red-rgb)); /* #ff7661 */
    --color-red-rgb: 255, 118, 97;

    --color-blue2: #7fb8dd;
    --reverse-color: var(--color-white);
    --base-bgcolor: var(--color-white);

    --btn-bgcolor: var(--brand-color);
    --btn-bgcolor1: var(--color-orange);

    /* --box-bgcolor: #ecf8f9; */
    --tab-off-bgcolor: #a7c6d4;

    --bgcolor-pink: rgba(var(--color-pink-rgb), 0.3);

    --bgcolor-lightpink: #fff0f0; /*table*/
    --bgcolor-darkpink: #ffacac; /*table*/
    --bgcolor-gray: #f2f2f2; /*table*/
    --bgcolor-green: #f0fff7; /*table*/

    --border-color: #999999;
    --border-color1: #b3b3b3; /*table*/

    --content-max-width: 1164px;
    --content-width-lg: 1054px;
    --content-width-sm: 690px;
    --content-width: 954px;

    --font-weight-Bold: 700;
    --font-weight-Heavy: 900;

    --circle-diameter: min(13.98vw ,160px);

    /* font-size */
    /* 1rem → 16px */
    --font-size-sm: 1.125rem;  /* 18px */
    --font-size-md: 1.25rem;  /* 20px */
    --font-size-lg: 1.5rem;  /* 24px */
    --font-size-xl: 1.875rem;  /* 30px */
    --font-size-xxl: min(3.52vw,2.375rem);  /* 38px */

    --font-size-pageTtl: min(4.7vw , 3.8rem);
    --font-size-secTtl: 2.25rem;  /* 36px */
    --font-size-evDay: min(3.85vw,3rem);  /* 48px */

    /* Spacing */
    --spacing-unit: 50px;
    --spacing-vertical: calc(var(--inner-padding) * 2);

    --inner-padding: 50px;
    --border-ttl-width: 5px;
    --border-radius: 7px;
  }

/* common */
body {
background: #D7FFFA;
background: linear-gradient(180deg, rgba(215, 255, 250, 1) 0%, rgba(215, 255, 250, 1) 48%, rgba(255, 255, 255, 1) 48%, rgba(255, 255, 255, 1) 100%);
}
  .clearfix::after {
    content: "";
    display: block;
    clear: both;
  }
  .-inBlock {
    display: inline-block;
  }
  .txt-center {
    text-align: center;
  }
  a.txt-lnk,
  .txt-lnk a {
    color: var(--brand-color);
    font-family: var(--font-family);
    font-weight: var(--font-weight-Bold);
    position: relative;
  }
  a.txt-lnk:hover,
  .txt-lnk a:hover {
    text-decoration: none;
  }
  a.txt-lnk::after,
  .txt-lnk a::after {
    position: absolute;
    right: -1em;
    content: "";
    width: 1em;
    height: .9em;
    bottom: .25em;
    background: url('/img/page/examinee/opencampus2024/icn_arw.svg') no-repeat;
    background-position: center;
    background-size: contain;
  }

  header .header {
    margin-bottom: 12px;
  }
  #ocLayout  header .header {
    margin-bottom: 0;
  }
  footer {
    margin-top: 0;
  }
  .wrapInner {
    position: relative;
    overflow: hidden;
  }
  .back-top {
    position: fixed;
    bottom: -70px;
    right: 0;
    width: 60px;
    height: 60px;
    transition: bottom .3s ease, opacity .3s ease;
  }
  .back-top.is-fixed {
    bottom: 0;
  }
  .back-top.is-stop {
    position: absolute;
  }
  .back-top:hover {
    opacity: .8;
  }
  .ocContent {
    line-height: 1.8;
    background: var(--base-bgcolor);
    margin: auto;
  }
  .ocContent ul:not([class]) {
    padding: 0;
    margin: 1.5rem auto;
    list-style: none;
  }

  .ocContent ul li > div {
    margin: 0 0 0 .8em;
  }
  .ocContent ul.disc {
    margin: .7em auto;
    padding-left: .7em;
    list-style: none;
  }
  .ocContent ul.disc li {
    position: relative;
  }
  .ocContent ul.disc li::before {
    content: "・";
    position: absolute;
    left: -1em;
  }
  .ocContent .disc li {
    margin: 0;
  }

/* ttl */
  .ocContent .ttl-has-under {
    position: relative;
    text-align: center;
  }

  .ocContent .sec-ttl {
    font-size: var(--font-size-secTtl);
    font-family: var(--font-family);
    font-weight: var(--font-weight-Heavy);
    margin: 0;
    text-align: center;
    display: inline-block;
    padding: 0.5em;
    margin-top: 10px;
  }
  .ocContent .sec-ttlwrap {
    text-align: center;
    position: relative;
    border-radius: 16px;
  }
  .ocContent .sec-ttl.in-view::after {
    width: 100%;
  }
  .ocContent .-color1 > .sec-ttl::after,
  .ocContent .-color1 > .ttl-under {
    background: var(--color-pink);
  }
  .ocContent .page-ttl::after,
  .ocContent .sec-ttl::after {
    bottom: 0;
  }
  @media screen and (min-width: 960px) {
  .ocContent .sec-ttl {
    font-size: 1.75rem
  }
}

/* kv */


  .ocContent .kvJpg {
    --kvJpg-diameter: 230px;
    width: var(--kvJpg-diameter);
    height: var(--kvJpg-diameter);
    border-radius: 50%;
    overflow: hidden;
  }
  .ocContent .kvJpg.img1 {
    position: relative;
    z-index: 1;
    margin-top: var(--spacing-vertical);
  }
  .ocContent .kvJpg.img2 {
    margin-left: auto;
    margin-top: calc(var(--spacing-unit) * -.4);
  }
  .ocContent .kvJpg img {
    width: var(--kvJpg-diameter);
    height: var(--kvJpg-diameter);
    object-fit: cover;
  }
  .ocContent .kvText .ttl-has-under {
    margin: 0 0 auto 0;
    text-align: left;
  }
  .ocContent .kvText > .btnF {
    text-align: left;
    margin: 1rem 0;
  }

/* 日程　*/
  .evList {
    display: flex;
    margin: auto;
    padding: 0;
    padding-bottom: 0px;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
  }
  .evList li {
    width: 49%;
    padding: .3rem;
    border: 1px solid var(--color-black);
    margin-bottom: .4rem;
  }
  .evList li p {
    padding: 0;
    margin: 0;
    font-weight: 700;
  }
  .evList li span.date {
    font-size: 2rem;
    margin-right: .3rem;
  }
  .evList li span.week {
    color: #fff;
    background: var(--color-pink);
    padding: 0 .1rem .1rem .1rem;
    line-height: 1.2;
    border-radius: 4px;
  }
  .evList li span {
    display: inline-block;
    font-weight: 700;
    font-size: 0.75rem;
  }
  .ocContent .evList li p span.date-udr {
    width: 100%;
    background: rgba(var(--color-pink-rgb), 0.3);
    padding: 0 .3em;
  }

  .evList .period {
    display: block;
    margin-left: .3em;
    font-feature-settings: "palt";
    border-top: 1px solid #000;
  }
    .evList .period > span {
     display: inline-block;
     font-size: 0.8em;
    }
    .ocBox.schedule {
    margin-top: 0;
    }
  @media screen and (min-width: 960px) {
    .ocBox.schedule {
      margin-bottom: 0;
    }
    .ocBox.program {
     margin-top: 0;
    }
    .soudanArea .ob-tgt > div .eventTime {
      margin: 0 2rem;
    }
    .evList {
      margin: .3rem 2rem 0 2rem;
      border-top: 1px solid var(--color-black);
      flex-wrap: wrap;
      align-items: stretch;
      justify-content: center;
    }
    .evList li span.date {
      font-size: 2.5rem;
      line-height: 1em;
      margin-top: .4em;
      margin-bottom: .5em;
    }
    .evList li {
      width: 25%;
      padding: .3rem;
      border: none;
      margin-bottom: 0;
      border-bottom: 1px solid var(--color-black);
      border-right: 1px solid #000;
    }
    .evList li:nth-of-type(1),
    .evList li:nth-of-type(5) {
      border-left: 1px solid #000;
    }
    .ocContent .evList li p span.date-udr {
      display: block;
      align-items: center;
      line-height: 1.3em;
      padding: 3px;
      font-size: 0.875rem;
    }
    .ocContent .evList li p span.date-udr span.period {
      border-top: 1px solid #000;
    }
    
    .evList li span {
      font-size: 1rem;
    }
    .evList li span.date-udr {
      font-size: min(1.5vw, 1.3.3rem);
    }
    .evList li span.date-udr span {
      display: block;
    }
    .evList li span.date-udr span.period > span {
      display: inline-block;
    }
    .evList li:not(:last-of-type) {
      border-right: 1px solid var(--color-black);
    }
    .soudanArea .ob-tgt > div ul li span small {
      margin-right: 1rem;
    }
    .soudanArea a.btn-o-b {
      width: min(80%, 260px);
      margin: 2rem auto 4rem;
    }
  }
/* ocBox */
  .ocBox {
    max-width: var(--content-max-width);
    margin: var(--inner-padding) auto;
    padding: 0 2rem;
    box-sizing: content-box;
  }
  .ocBox .round-both:after, .ocBox .round-both:before,
  .ocBox .round-both {
    background-color: var(--brand-color);
    border-radius: 1000px;
    width: max( 50% , 270px);
  }

  .ocBox .wrap {
    padding: 0;
  }
  .ocBox-bg {
    border-radius: 30px;
    padding: 1em;
    margin: auto;
  }
  .ocBox-inner {
    max-width: var(--content-width-lg);
    margin: auto;
  }
  .ocBoxCont {
    text-align: center;
    padding: var(--spacing-unit) var(--inner-padding) ;
  }
  .program .ocBoxCont {
    padding: var(--spacing-unit) 0 0;
  }
  .ocBoxCont.ocBg + .ocBg {
    margin-top: var(--spacing-unit);
  }
  .ocBoxCont.timeTableArea {
    padding: 0;
  }
  .ocBoxCont-inner {
    text-align: left;
    margin: var(--spacing-unit) auto;
  }

  .ocBoxCont-inner.-sm {
    max-width: var(--content-width-sm);
  }
  .ocBoxCont-inner.-inbox {
    display: inline-block;
    text-align: left;
  }

  .ocBox .datelabel {
    font-size: var(--font-size-lg);
    text-align: center;
    margin: 1.5em 0 0;
    font-family: var(--font-family);
    font-weight: var(--font-weight-Bold);
  }
  .ocBox .datelabel > span::before {
    content: "：";
  }

  .ocBoxCont:not(.ocBg) > :first-child,
  .ocBoxCont-inner > :first-child,
  .ocContent li:first-child {
    margin-top: 0!important;
  }
  .ocBoxCont > :last-child,
  .ocBoxCont-inner > :last-child {
    margin-bottom: 0!important;
  }

/* btn */
  .ocContent .btnF {
    text-align: center;
    margin: var(--spacing-unit) auto;
    padding-bottom: 7px;
  }
  .ocContent .btnF a {
    display: inline-block;
    text-decoration: none;
    width: 100%;
    max-width: 476px;
    color: inherit;
    font-family: var(--font-family);
    font-weight: var(--font-weight-Bold);
    font-size: var(--font-size-sm);
    position: relative;
    z-index: 1;
  }
  .ocContent .btnF a > span {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 5.2em;
    border: 3px solid var(--btn-bgcolor);
    border-radius: var(--border-radius);
    padding: .4em 1.6em;
    background: var(--reverse-color);
    transition: all 0.3s ease;
  }
  .ocContent .btnF.-sm {
    margin: 0;
    text-align: left;
  }
  .ocContent .btnF.-sm a {
    max-width: 400px;
    font-size: inherit;
  }
 .ocContent .btnF.-sm a > span {
    min-height: auto;
    border-width: 0;
    color: var(--reverse-color);
    background: var(--brand-color);
    padding-top: 0.65em;
    padding-bottom: 0.65em;
    border: 2px solid transparent;
 }

  .ocContent .btnF a::after {
    position: absolute;
    top: calc(50% - min(1.35vw,18px) /2);
    right: 10px;
    width: 18px;
    height: min(1.35vw,18px);
    content: '';
    background: url('/img/page/examinee/opencampus2024/icn_arw.svg') no-repeat;
    background-position: center;
    background-size: contain;
    transition: all 0.3s ease;
  }
  .ocContent .btnF.-sm a::after {
    right: .875rem;
    width: .8em;
    height: .8em;
    top: calc(50% - .4em);
    transform: rotate(45deg);
    border: solid var(--reverse-color);
    border-width: 2px 2px 0 0;
    background-image: none;
  }

  .ocContent .btnF:not(.-mm) a:hover > span,
  .ocContent .btnF:not(.-mm) a:hover::after {
    transform: translate(7px, 7px);
  }
  .ocContent .btnF.-sm a:hover > span {
    background: var(--reverse-color);
    color: var(--brand-color);
    border-color: var(--brand-color);
  }
  .ocContent .btnF.-sm a:hover::after {
    border-color: var(--brand-color);
  }

  .ocContent .btnF a::before {
    content: "";
    position: absolute;
    border-radius: var(--border-radius);
    width: 100%;
    height: 100%;
    background: var(--brand-color);
    z-index: -1;
    bottom: -7px;
    right: -7px;
  }
  .ocContent .btnF.-sm a::before {
    display: none;
  }
  .ocContent .ttl-has-under + p.btnF  {
    margin: calc(var(--spacing-unit) * 1/4) auto var(--spacing-unit);
  }

/* schedule */
  .ocContent .scheduleBg {
  }
  .ocContent .scheduleOuter {
    position: relative;
    z-index: 2;
    margin: var(--spacing-unit) auto 0;
  }

  .ocContent .tabBtn {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
  }
  .ocContent .tabBtn li {
    font-size: var(--font-size-lg);
    font-family: var(--font-family);
    font-weight: var(--font-weight-Bold);
    line-height: 1.3;
    position: relative;
    display: flex;
    width: 50%;
    height: 3em;
    margin: 0;
    padding: 0 .5em;
    cursor: pointer;
    text-align: center;
    color: var(--reverse-color);
    background: var(--tab-off-bgcolor);
    border: 3px solid transparent;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
  }

  .ocContent .tabBtn li.active {
    background: var(--base-bgcolor);
    color: inherit;
  }
  .ocContent .tabBtn li span {
    display: inline-block;
  }
  .ocContent .tabContent {
    display: none;
  }
  .ocContent .tabContent.active {
    display: block;
  }
  .ocContent .tabBtn li:not(.active):hover {
    background: var(--reverse-color);
    color: var(--tab-off-bgcolor);
    border-color: var(--tab-off-bgcolor);
  }

  .ocContent .tabArea h3 {
    font-size: var(--font-size-xxl);
    color: var(--brand-color);
    margin: .5rem auto .8em;
    border: 1px solid;
  }
  .ocContent .tabH2 {
    margin: 2.25rem auto;
    text-align: center;
  }
  .ocContent .tabH2 span {
    font-size: var(--font-size-md);
    letter-spacing: .1em;
  }
  .ocContent .tex.pink {
    background: var(--bgcolor-pink);
    text-align: center;
    padding: .5em;
  }
  .ocContent .tex.pink > span {
    display: inline-block;
    text-align: left;
  }
  .ocContent .tabArea h3 + p {
    text-align: center;
    letter-spacing: .1em;
    margin-top: 0.2em;
  }



  .ocEvList .cell::after {
    content: "";
    position: absolute;
    width: 18px;
    height: min(1.35vw,18px);
    background: url('/img/page/examinee/opencampus2024/icn_arw.svg') no-repeat;
    background-position: center;
    background-size: contain;
    top: 50%;
    transform: translateY(-50%);
    right: min(0.31vw,10px);
  }
.ocEvList.comming .cell.coming,
  .ocEvList.comming .cell {
    background: var(--color-blue2);
    border-color: var(--color-blue2);
    pointer-events: none;
  }
.ocEvList.comming .cell.coming,::before
  .ocEvList.comming .cell::before {
    font-size: 28.57%;
    font-weight: var(--font-weight-Bold);
    position: absolute;
    background: var(--color-blue2);
    right: 5px;
    bottom: -3px;
    width: 8em;
    content: 'COMING SOON';
    color: var(--color-white);
    text-shadow:2px 2px 0 var(--brand-color), -2px -2px 0 var(--brand-color),
                -2px 2px 0 var(--brand-color), 2px -2px 0 var(--brand-color),
                0px 2px 0 var(--brand-color),  0 -2px 0 var(--brand-color),
                -2px 0 0 var(--brand-color), 2px 0 0 var(--brand-color);
  }

  .ocEvList .cell .date,
  .eventList .cell .date {
    margin: auto;
  }
  .ocEvList .cell .week,
  .eventList .cell .week {
    font-size: 32%;
    line-height: 1.4;
    display: inline-block;
    width: 1.39em;
    height: 1.39em;
    position: relative;
    bottom: 0.3em;
    color: var(--reverse-color);
    border-radius: 50%;
    background: var(--color-pink);
    margin-left: 0.15em;
  }
  .eventList .period {
    display: block;
    line-height: 1.8;
    font-size: 27%;
  }
  .eventList .period > span:not([class]) {
    display: block;
    font-size: 1rem;
    background: var(--brand-color);
    color: var(--reverse-color);
    width: 85%;
    margin: 0.2em auto .3em;
  }
  .eventList + .period-time {
    font-family: var(--font-family);
    font-weight: var(--font-weight-Bold);
    font-size: var(--font-size-lg);
    text-align: center;
    margin-top: var(--inner-padding);
  }

  .eventList-ttl {
    font-family: var(--font-family);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-Bold);
    line-height: 1;
    margin-bottom: 0;
    text-align: center;
  }
  .eventList .cell .label {
    font-size: .8rem;
    line-height: 1.6;
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 8.2em;
    color: #fff;
  }
  .eventList .cell .label.bg-pink {
    background: #ed1e79;
  }
  .eventList .cell .label.bg-orange {
    background: #f7931e;
  }
  .eventList .cell .label.bg-green {
    background: #39b54a;
  }
  .eventList.-has-label .cell {
    padding-top: 25px;
    padding-bottom: 46px;
  }
  .detail-list {
    font-size: .775rem;
    width: 94%;
    margin: .6em auto;
    padding: 0;
  }
  .detail-list li {
    display: flex;
    margin: 0;

    align-items: flex-start;
  }
  .detail-list li > span:first-child {
    font-size: .68rem;
    line-height: 1.6;
    margin-right: .4em;
    color: var(--brand-color);
    background: #e8f0f7;

    flex: 0 0 4.7em;
  }
  .detail-list li + li {
    margin-top: .5em;
  }
  .detail-list li > span:last-child {
    padding-top: .15em;
    text-align: left;
  }
  .eventList .cell .lnk {
    font-size: 1rem;
    line-height: 1.8;
    position: absolute;
    bottom: .85em;
    left: 50%;
    display: block;
    width: 93%;
    margin: auto;
    transition: all .3s ease;
    transform: translateX(-50%);
    text-decoration: none;
    color: var(--reverse-color);
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    background: var(--brand-color);
  }
  .eventList .cell .lnk.disabled {
    pointer-events: none;
    background: #ccc;
  }
  .eventList .cell .lnk::after {
    position: absolute;
    top: 50%;
    right: min(.73vw, 7px);
    width: 8px;
    height: min(1.35vw, 13px);
    content: '';
    transition: all .3s ease;
    transform: translateY(-50%);
    background: url('/img/page/examinee/opencampus2024/icn_arw_w.svg') no-repeat;
    background-position: center;
    background-size: contain;
  }
  .eventList .cell .lnk:not(.disabled):hover {
    color: var(--brand-color);
    border-color: var(--brand-color);
    border-color: var(--brand-color);
    background: var(--reverse-color);
  }
  .eventList .cell .lnk:not(.disabled):hover::after {
    background-image: url('/img/page/examinee/opencampus2024/icn_arw.svg');
  }
  .eventList .cell .map {
    position: relative;
    top: -1px;
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    transition: all .3s ease;
  }
  .eventList .cell .map:hover {
    opacity: .7;
  }

/* program */
.program-ttl {
  margin: 1.6em auto;
  width: auto;
  overflow: hidden;
}
.program-ttl span {
  background: #fff;
  padding: 0.3em 2em;
  display: table;
  border-radius: 1000px;
  position: relative;
  z-index: 1;
}
.program-ttl img {
  width: 159px;
  height: auto;
}
.program-ttl::after {
  content: "";
  display: block;
  background: var(--color-pink);
  height: 1px;
  position: absolute;
  top: 58%;
  left: 50%;
  width: 1200px;
  transform: translateX(-50%)
}
.programText {
  background: var(--color-bage);
  border-radius: 40px 40px 16px 16px;
}
.programText p {
  padding:0 16px 16px;
}
.programText h3 {
  background: #F8A9E3;
  background: linear-gradient(126deg, rgba(248, 169, 227, 1) 0%,rgba(252, 212, 113, 1) 48%);
  font-size: 1.125rem;
  padding: .6em 1.5em;
  margin-bottom: 0;
  margin-top: 0;
  border-radius: 1000px;
}
.ocContent .program .programText h3 {
  margin-top: 0;
}
/* tyousei */
.programText h3 {
}
  .ocBox .tyousei {
    text-align: center;
  }
  .ocBox .tyousei > :last-child {
    margin-bottom: 0;
  }
  .ocBox .tyousei .datelabel {
    font-size: var(--font-size-secTtl);
    display: inline-block;
    padding: 0 0.25em;
    position: relative;
    top: -0.4em;
    margin-bottom: -.4em;
  }
  .ocBox .tyousei .datelabel::after {
    position: absolute;
    content: "";
    display: block;
    left: 0;
    width: 100%;
    height: var(--border-ttl-width);
    background: var(--color-orange);
    border-radius: calc(var(--border-ttl-width) /2);
  }
  .ocBox .tyousei p:not([class]) {
    text-align: center;
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    font-weight: var(--font-weight-Bold);
  }

/* timeTable / tableSchedule */
.ocContent .time-wrap .sec-ttl {
  color:#eb6cda;
}
  .ocContent .timeTable {
    overflow-x: scroll;
    width: 100%;
  }
  .ocContent .timeTable + .ocBoxCont-inner {
    margin-top: 1rem;
  }
  .ocContent  .timeTableArea + .comment {
    margin-bottom: 0;
  }
  .ocContent .tableSchedule {
    font-size: .875em;
    font-family: var(--font-family);
    font-weight: var(--font-weight-Bold);
  }
  .timeTable {
    border: 1px solid var(--border-color);
  }

  .ocContent .tableSchedule .meridian {
    height: 3.786em;
    border-width: 0 0 1px 0;
  }
  .ocContent .tableSchedule .time {
    font-size: 93%;
    height: 3.846em;
    white-space: nowrap;
    border-bottom: none;
  }
  .ocContent .tableSchedule tr > * {
    background: var(--color-white);
  }
  .ocContent .tableSchedule .time > * {
    background: var(--bgcolor-darkpink);
  }
  .ocContent .tableSchedule .musicCourse > * {
    background: var(--bgcolor-lightpink);
  }
  .ocContent .tableSchedule .bgGray > * {
    background: var(--bgcolor-gray);
  }
  .ocContent .tableSchedule tr {
    border-top: 1px solid var(--border-color1);
    border-bottom: 1px solid var(--border-color1);
  }
  .ocContent .tableSchedule tr > * {
    border-right: 1px solid var(--border-color1);
  }
  .ocContent .tableSchedule tr:last-child {
    border-bottom: 1px solid var(--border-color1);
  }
  .ocContent .timeTable th::after,
  .ocContent .th::after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background: var(--border-color1);
  }
  .ocContent .tableSchedule tr > th,
  .ocContent .tableSchedule .th {
    padding: .4em;
    text-align: left;
    position: sticky;
    white-space: nowrap;
    left: 0;
    border: none;
  }
  .ocContent .tableSchedule tr:not([class]) {
    border-top: none;
    border-bottom: none;
  }
  .ocContent .tableSchedule td:last-child {
    border-right: none;
  }

  .ocContent .tableSchedule .musicCourse th {
    padding: .2em;
  }
  .ocContent .tableSchedule td {
    width: 3.857em;
    min-width: 3.4em;
  }
  .ocContent .tableSchedule .time td {
    text-align: left;
    padding-left: .4em;
    padding-right: .4em;
  }
  .ocContent .tableSchedule td > span {
    font-size: 93%;
    line-height: 1;
    display: flex;
    margin: auto .2em;
    border: 1px solid var(--border-color1);
    background: var(--bgcolor-green);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 2em;
  }

  /* :15、:45 */
  .ocContent .tableSchedule .st-half {
    padding-left: 2%;}
  .ocContent .tableSchedule .ed-half {
    padding-right: 2%;}

  /* :05、:10、:35、:40 */
  .ocContent .tableSchedule .st-quart {
    padding-left: 1%;}
  .ocContent .tableSchedule .ed-3quart {
    padding-right: 3%;}

  /* :20、:25、:50、:55 */
  .ocContent .tableSchedule .st-3quart {
    padding-left: 3%;}
  .ocContent .tableSchedule .ed-quart {
    padding-right: 1%;}

/* access */
  .ocContent .access {
    display: none;
  }
  .ocContent .access.active {
    display: block;
  }

  .ocContent .access-txtArea li {
    margin: 0;
  }
  .ocContent .access-txtArea p + .btnF {
    margin-top: -.5em;
  }
  .ocContent .access-map img {
    width: 100%;
  }
  .ocContent .access-iframe {
    position: relative;
    overflow: hidden;
    height: 228px;
  }
  .ocContent .access-iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }


/* ocSoudan */
  .ocSoudan .kvImg {
    position: relative;
    align-self: flex-end;
  }
  .ocSoudan .kvImg > div {
    margin: auto;
    max-width: 492px;
    margin-bottom: -2%;
  }
  .ocSoudan .ttl-has-under + .txt-lnk-wrap {
    text-align: center;
    margin-top: 0;
    margin-bottom: var(--inner-padding);
    font-size: var(--font-size-md);
  }
  .ocSoudan .annualSchedule p:last-of-type {
    margin-bottom: 0;
  }
  .ocSoudan .ocBox .tyousei .datelabel {
    margin-top: 1.3em;
  }


/* ocBriefing */
  .ocBriefing .kvImg {
    position: relative;

    align-self: flex-end;
  }
  .ocBriefing .kvImg > div {
    margin: auto;
    max-width: 433px;
  }
  .ocBriefing .kvArea > div:nth-of-type(2) {
    flex-basis: 64%;
  }
  .ocBriefing .kvText > p:first-of-type {
    margin-top: 2.7em;
  }


/* 960px以上 */
@media screen and (min-width: 960px){
  .sp-only {
    display: none;
  }
  .ocContent .sec-ttl + .ttl-under {
    bottom: auto;
    top: -1.5em;
  }
}

@media screen and (max-width: 1160px){
/* ocSoudan */
  .ocSoudan .ttl-has-under.-color1 {
    display: block;
    padding: 0 var(--circle-diameter);
    margin-bottom: var(--spacing-unit);
  }
  .ocSoudan .ttl-has-under.-color1 .sec-ttl {
    display: inline;
    transition: background 1s .6s ease;
    text-decoration: none;
    background-image: linear-gradient(90deg, var(--color-pink), var(--color-pink));
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0 calc(var(--border-ttl-width) + .5px);
    padding-bottom: 0.15em;
    line-height: 1.7;
  }
  .ocSoudan .ttl-has-under.-color1 .sec-ttl::after {
    display: none;
  }
  .ocSoudan .ttl-has-under.-color1 .sec-ttl.js-anime.in-view {
    background-size: 100% calc(var(--border-ttl-width) + .5px);
  }
}

/* 959px以下 */
@media screen and (max-width: 959px){
/* 変数 */
  :root {
    --circle-diameter: min(21vw,140px);

    /* font-size */
    --font-size-base: 0.9375rem; /* 15px */
    --font-size-sm: 1rem;  /* 16px */
    --font-size-md: 1.125rem;  /* 18px */
    --font-size-lg: 1.25rem;  /* 20px */
    --font-size-xl: 1.5rem;  /* 24px */
    --font-size-xxl: min(5.4vw,2rem);

    --font-size-pageTtl: min(6.69vw, 3rem);
    --font-size-secTtl: min(5.16vw ,2rem);
    --font-size-evDay: min(7.47vw,2rem);

    /* Spacing */
    --spacing-unit: min(5.33vw , 50px);


    --inner-padding: min(3.91vw , 50px);
    --border-ttl-width: min(0.63vw , 5px);
    --border-radius: min(1.87vw, 7px);
  }

/* common */
  .pc-only {
    display: none;
  }
  .back-top {
    width: 35px;
    height: 35px;
  }
  .back-top.is-fixed {
    bottom: 65px;
  }
  .back-top.is-stop {
    bottom: 0;
  }

  .ocContent.leContent {
    padding-bottom: 0 !important;
  }
  .ocBox {
    font-size: var(--font-size-base);
    line-height: 1.5;
    padding: 0 var(--inner-padding);
  }
  .ocBox-bg {
    border-radius: min(2.85vw , 30px);
  }
  .ocContent .btnF a,
  .ocContent .btnF.-sm a {
    max-width: 370px;
  }
  .ocContent .btnF.-sm a {
    width: 100%;
    font-size: var(--font-size-sm);
  }
  .ocContent .btnF a > span {
    min-height: 4em;
    border-width: 2px;
    flex-wrap: wrap;
    padding-left: .5em;
    padding-right: .5em;
  }
  .ocContent .btnF a::after {
    top: calc(50% - 10px  /2);
    height: 10px;
    right: min(0.41vw,10px);
  }
  .ocContent .btnF.-sm a::after {
    right: 0.5rem;
    border-width: 1px 1px 0 0;
    width: 0.6em;
    height: 0.6em;
    top: calc(50% - 0.3em);
  }
  .ocContent .btnF:not(.-sm) {
    padding-right: 3px;
    padding-bottom: 3px;
  }
  .ocContent .btnF a::before {
    right: -3px;
    bottom: -3px;
  }
  .ocContent .btnF:not(.-sm) a:hover > span,
  .ocContent .btnF:not(.-sm) a:hover::after {
    transform: translate(3px, 3px);
  }

  .ocContent .tabBtn li {
    flex-wrap: wrap;
  }
  .ocContent .kvArea {
    flex-direction: column-reverse;
    margin-top: .5rem;
  }
  .ocContent .kvArea > div:nth-of-type(2) {
    min-width: auto;
  }
  .ocContent .kvText > .btnF {
    padding-left: calc(var(--inner-padding) * 2 + var(--border-ttl-width));
    padding-right: calc(var(--inner-padding) * 2 +
     var(--border-ttl-width) + 3px);
  }
  .ocContent .tabH2 {
    margin: 1rem auto;
  }
  .ocContent .tabH2 span {
    letter-spacing: inherit;
  }


/* ttl */
  .ocContent .ttl-under span {
    font-size: 82%;
    line-height: 1.3;
  }
  .ocContent .ttl-under {
    top: -1em;
    bottom: auto;
  }
  .ocContent .sec-ttl + .ttl-under {
    top: -1.5em;
    right: -0.5em;
  }
  .ocContent .ttl-has-under + p.btnF {
    margin-top: var(--spacing-unit);
    padding-left: var(--inner-padding);
    padding-right: calc(var(--inner-padding) + 3px);
  }

/* eventList */
  ul.ocEvList {
    --box-padding-left: 0px;
  }
  ul.ocEvList:first-child {
    margin-top: -28px!important;
  }
  ul.eventList:first-child {
    margin-top: -20px!important;
  }
  .ocEvList li.cellOuter {
    margin-top: 20px!important;

    flex-basis: calc(100% / 3);
  }
  .ocEvList .cell::after {
    height: 10px;
  }
  .ocEvList .cell,
  .eventList .cell {
    border-width: 2px;
  }
  .ocEvList .cellOuter::before {
    top: 3px;
    right: 17px;
    border-width: 2px;
  }
  .ocEvList.comming .cell::before {
    bottom: -2px;
  }
  .ocEvList:not(.comming) .cellOuter:hover .cell {
    transform: translate(3px, 3px);
  }

  .eventList li.cell {
    margin-top: 20px!important;
    flex-basis: calc(100% / 3);
  }
   .eventList li.cell:nth-of-type(4n-3) {
    border-left-width: 0;
  }
 .eventList li.cell:nth-of-type(3n-2) {
    border-left-width: 1px;
  }
  .eventList .period {
    font-size: 38%;
  }
  .eventList .period > span:not([class]) {
    font-size: var(--font-size-base);
  }
  .eventList + .period-time {
    font-size: var(--font-size-md);
  }
.eventList .cell .lnk {
font-size: var(--font-size-base);
}

/* timeTable */
  .ocContent .timeTable {
    /*
    width: calc(100% + var(--inner-padding) - var(--border-ttl-width));
    */
    max-width: calc(var(--content-max-width) - var(--inner-padding) * 2 - var(--border-ttl-width) * 2 );
  }

  /* access */
  .ocContent .access-iframe {
    height: 50vw;
    max-height: 228px;
  }

/* ocSoudan */
  .ocSoudan .kvArea {
    margin-bottom: var(--spacing-unit);
  }
  .ocSoudan .kvImg > div {
    margin-right: auto;
  }
  .ocSoudan .ttl-has-under.-color1 {
    margin-bottom: 1.2rem;
    text-align: left;
    padding-left: 0;
  }
  .ocSoudan .ttl-has-under + .txt-lnk-wrap {
    margin-top: var(--spacing-unit);
    margin-bottom: var(--spacing-unit);
  }
  .ocSoudan .eventList .date {
        font-family: var(--font-family);
      font-size: var(--font-size-evDay);
  }
  .ocSoudan.ocSoudan .eventList .date p {
    text-align: center;
    border: 1px solid #4194d0;
        margin-top: 0;
  }
.ocSoudan .eventList .date p .period {
  font-feature-settings: "palt";
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
  text-align: center;
}
  .ocSoudan .eventList .date p .week{
font-size: 32%;
    line-height: 1.4;
    display: inline-block;
    width: 1.39em;
    height: 1.39em;
    position: relative;
    bottom: 0.3em;
    color: var(--reverse-color);
    border-radius: 50%;
    background: var(--color-pink);
    margin-left: 0.15em;
      text-align: center;
}
  .ocSoudan .eventList .date p .period .exDay {
      font-size: 1rem;
  }
}
@media screen and (min-width: 960px){
  .ocSoudan .eventList .date {
        font-family: var(--font-family);
      font-size: var(--font-size-evDay);
  }
  .ocContent .eventList .date p {
    text-align: center;
    border: 1px solid #4194d0;
    margin-top: 0;
  }
.ocSoudan .eventList .date p .period {
  font-feature-settings: "palt";
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
  text-align: center;
}
  .ocSoudan .eventList .date p .week{
    font-size: 32%;
    line-height: 1.4;
    display: inline-block;
    width: 1.39em;
    height: 1.39em;
    position: relative;
    bottom: 0.3em;
    color: var(--reverse-color);
    border-radius: 50%;
    background: var(--color-pink);
    margin-left: 0.15em;
    text-align: center;
}
  .ocSoudan .eventList .date p .period .exDay {
      font-size: 1.15rem;
      font-feature-settings: "palt";
  }
  .ocSoudan .kaisaiTime {
    text-align: center;
  }
}
.ocSoudan .kaisaiTime {
  font-weight: 700;
}

 @media screen and (min-width: 960px) {
.kaisaiTime span{
	display: inline-block;
	text-align: right;}
}

 @media screen and (max-width: 959px) {
.kaisaiTime span br{
	display: none;}
}

.marker{
	background: linear-gradient(transparent 60%, #fff500 60%);
}


#margin {
	margin-top: -20px;
}
.ocSoudan .moushikomi {
  font-weight: 700;
  text-align: center;
  color: var(--color-pink);
  margin-top: 0.2em;
}
.ocContent .btnF.soudanDisabled a {
      pointer-events: none;
}
.ocContent .btnF.soudanDisabled a > span {
    background: #a7c6d4;
    border-color: #a7c6d4;
    opacity: .7;
}
.ocContent .btnF.soudanDisabled a::before {
  display: none;

}
.ocContent .eventList .date.disabled p .period {
  background: transparent;

}
.ocContent .eventList .date.disabled p .period span:first-child {
  opacity: .7;
}

.period_02 {
	font-size: 0.5em;	
}

#time_02 {
	font-size: 200%;
	font-weight: bold;
}

ul.flow_list{
 list-style: none;
 padding: 0;
 margin: 0;
}
ul.flow_list li{
 border: 2px solid #ccc;
 margin-bottom: 35px;
 padding: 10px;
 position: relative;
}
ul.flow_list li::after{bottom: -40px;
 color:#4194d0;
 content: "▼";
 font-size: 24px !important;
 left: 48%;
 position: absolute;
}
ul.flow_list li.last::after{/*最後の▼を外す*/
 content: "";
}

#eventlist {
	display: block;
}



@media screen and (max-width: 659px){
  .ocEvList li.cellOuter,
  .eventList li.cell {
    flex-basis: 50%;
  }
  .eventList li.cell:nth-of-type(3n-2) {
    border-left-width: 0;
  }
  .eventList li.cell:nth-of-type(2n-1) {
    border-left-width: 1px;
  }
}
@media screen and (max-width: 559px){
/* 変数 */
  :root {
    /* font-size */
    --font-size-base: 0.875rem; /* 14px */
    --font-size-sm: 0.8125rem;  /* 13px */
    --font-size-md: 0.875rem;  /* 14px */
    --font-size-lg: 0.9375rem;  /* 15px */
    --font-size-xl: 1rem;  /* 16px */

    --font-size-pageTtl: 7.19vw;  /* 23px */
  }
  .ocContent .tabBtn li {
    font-size: var(--font-size-base);

    flex-wrap: wrap;
  }
  .ocSoudan .ttl-has-under + .txt-lnk-wrap {
    font-size: 85%;
  }

/* .eventList */
.eventList.-has-label .cell {
  padding-top: 14px;
  padding-bottom: 24px;
}
.eventList .cell .label {
  font-size: .5rem;
  width: 7.4em;
}
.detail-list {
  width: 90%;
}
.detail-list li {
  display: block;
}
.detail-list li > span:first-child {
  font-size: .625rem;
  display: block;
  width: 4.7em;
  margin-right: 0;
  margin-bottom: .15em;
}
.detail-list li > span:last-child {
  font-size: .6875rem;
  display: block;
}
.eventList .cell .map {
  width: 1.2em;
  height: 1.2em;
  top: 0;
}
.eventList .cell .lnk {
  font-size: .625rem;
  line-height: 1.4;
  width: 90%;
  border-radius: 4px;
}
.eventList .cell .lnk::after {
  right: 5px;
  width: 5px;
  height: 7px;
}
}

.date{
  display: flex;
    margin: 0%;
    padding: 0%;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    flex-direction: row;
  }
  .date p{
      flex-basis: 33%;
  }

  @media screen and (max-width: 959px) {
      .date p{  flex-basis: 50%;
    }
}
/* WEBオープンキャンパス */
.css-br {
word-break:break-all;
overflow-wrap: normal;
}
.h3_img {
position: relative;
margin-top: 120px;
}
.h3_img .message_01 {
position: absolute;
top: -95px;
right: 145px;
width: 260px;
}

.h3-ttl{
margin:  0;
font-size: min(3.5vw ,1rem);
border-radius: 5px;
padding: 0 1.5%;
font-weight: var(--font-weight-Heavy);
text-align: center;
display: inline-block;
position: relative;

}

.tticon{
width: 100%;
vertical-align: bottom;
}

.textExam{
    margin-bottom: 0;
    text-align: center;
    font-size: 1rem;
    color: #0179CF;
    font-weight: 700;
    font-feature-settings: "palt";
    letter-spacing: 2px;
}
.ocContent .btnG {
    text-align: center;
    margin: var(--spacing-unit) auto;
    padding-bottom: 7px;
}

.ocContent .btnG a {
    display: inline-block;
    text-decoration: none;
    width: 80%;
    max-width: 300px;
    color: inherit;
    font-family: var(--font-family);
    font-weight: var(--font-weight-Bold);
    font-size: 0.8rem;
    position: relative;
    z-index: 1;
}
.ocContent .btnG a::before {
    content: "";
    position: absolute;
    border-radius: var(--border-radius);
    width: 100%;
    height: 100%;
    background: var(--color-blue2);
    z-index: -1;
    bottom: -7px;
    right: -7px;
}
.ocContent .btnG a::after {
    position: absolute;
    top: calc(50% - min(1.35vw, 18px) / 2);
    right: 10px;
    width: 18px;
    height: min(2.35vw, 18px);
    content: '';
    background: none;
    background-position: center;
    background-size: contain;
    transition: all 0.3s ease;
}

.ocContent .btnG a > span {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 5.2em;
    border: 3px solid var(--color-blue2);
    border-radius: var(--border-radius);
    padding: .4em 1.6em;
        background: var(--reverse-color);
    transition: all 0.3s ease;
}

.woc_baner{
  max-width:60%;
}

@media screen and (max-width: 959px) {
.h3_img .message_01 {
position: absolute;
top: -80px;
right: 18px;
width: 250px;
}
    .textExam {
        font-size: min(5.4vw,1.2rem);
    }
}

@media screen and (max-width: 767px) {
.h3_img .message_01 {

top: -82px;
    right: -15px;
    width: 185px;
}
    .textExam {
        font-size:  min(5.4vw,0.6rem);
    }
    .h3_img {
    margin-top: 60px;
    }
    .ocContent .btnG a {
        font-size: 0.65rem;
    }

    .woc_baner{
      max-width:100%;
    }
}

/* 交通　*/
#oc-information img {
  width: 100%;
}

/* 申込ボタン　*/
@media screen and (min-width: 960px) {
.ocContent .linkApply a {
  padding-top: 45px;
}
}

/* 応用　体験授業*/
.laTaikenDe {
  margin: 0 auto;
  max-width: 1100px;
  
}
a.lessonTaiken {
  background: var(--brand-color);
  display: block;
  color: #000;
  font-weight: 700;
  text-decoration:  none;
  line-height: 1em;
  padding: .8em 2.5em .8em .8em;
  margin-top: .5em;
  position: relative;
  z-index: 2;
  border: 1px solid #000;
  border-radius: 4px;
}
a.lessonTaiken:after {
  content: "";
  display: block;
  width: .7em;
  height: .7em;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  transform: rotate(135deg) translateY(-50%);
  position: absolute;
  top: calc(50% - 0.6em);
  right: 1em;
}
.laTaikenDe h3  {
  text-align: center;
  margin: 36px 0 0;
  position: relative;
  z-index: 1;
  font-family: var(--font-family);
  font-weight: var(--font-weight-Bold);
  background: var(--brand-color);
  color: #000;
  padding: .3em .2em;
  border-radius: 16px 16px 0 0;
}

.laTaikenDe h3 span:before {
  left: -1rem;
}
.laTaikenDe h3 span:after {
  right: -1rem;
}
.laTaikenDe h4 {
  margin: .8rem 0;
  font-family: var(--font-family);
  font-weight: var(--font-weight-Bold);
  font-size: 16px;
}
.laTaikenDe h4 span {
  display: block;
  color: var(--color-art-oc);
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: .2em;
}
.laTaikenDe dl {
  margin: 0;
  position: relative;
  background: #fff;
}
.laTaikenDe dl.disabled:before {
  content: "";
  display: block;
  position: absolute;
  inset: 0 0 0 0;
  background: rgba(226,226,226,.5);
  z-index: 1;
}
.laTaikenDe dl.disabled:after {
  font-size: 1.125rem;
  text-align: center;
  content: "終了しました";
  display: inline-block;
  background: var(--brand-color);
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #000;
  font-weight: 700;
  line-height: 1;
  padding: 0.5em;
  width: 50%;
  min-width: 8em;
}
.laTaikenDe dl dt{
  text-align: center;
  position: relative;
  font-family: var(--font-family);
  font-weight: var(--font-weight-Bold);
}
.laTaikenDe dl dt span{
  font-size: 0.85rem;
  display: inline-block;
  background: var(--color-pink);
  color: #fff;
  height: 18px;
  width: 18px;
  border-radius: 2px;
  line-height: 1em;
  text-align: center;
  padding-top: 2px;
  margin-left: 5px;
}
.laTaikenDe dl dt:after {
  content: "";
  display: block;
  background: var(--brand-color);
  height: 3px;
  border-radius: .5px;
  position: absolute;
}
.laTaikenDe dl:not(:first-child){
  border-top: 2px solid var(--brand-color);
}
.laTaikenDe dl dt{
  font-size: 1.75rem;
  font-weight: 700;
}

.laTaikenDe dl dd{
  margin: 0;
}

.laTaikenDe dl dd:nth-of-type(1) {
  border-bottom: 1px solid var(--brand-color);
}
.ocContent .laTaikenDe dl p{
  margin-top: 0;
}
@media screen and (max-width: 959px){
  .laTaikenDe dl {
    margin-bottom: 5px;
  }
  .laTaikenDe dl dt {
    padding: .5em;
  }
  .laTaikenDe dl dt:after {
      inset: auto 1rem 0 1rem;
  }
  .laTaikenDe dl dd {
    padding: 0 1em 1em;
  }
.ocContent .laTaikenDe dl p{
  margin-bottom: 0;
  }
}
@media screen and (min-width: 960px){
  .laTaikenDe {
    padding: 2em 0 0 0;
  }
  .laTaikenDeIn {
    overflow: hidden;
  }
  a.lessonTaiken {
    display: table;
    transition: .4s all;
  }
  a.lessonTaiken:hover {
    background: #EE699E;
    color: #fff;
  }
  a.lessonTaiken:visited {
    background: var(--brand-color);
  }
  .laTaikenDe dl {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 162px 1fr;
    border-top: 1px solid var(--brand-color);
    border-bottom: 1px solid var(--brand-color);
  }
  .laTaikenDe dl:not(:last-child) {
    margin-bottom: 8px;
  }
  .laTaikenDe dl dt{
    font-size: 2.312rem;
    grid-row: 1 / 3;
    grid-column: 1 / 2;
    border-right: 1px solid var(--brand-color);
padding-top: 0.8rem;
  }
.laTaikenDe dl dt span{
    font-size: 1.25rem;
    width: 25px;
    height: 25px;
  }
  .laTaikenDe dl dd{
    margin-left: 2rem;
    margin-right: 2em;
  }
  .laTaikenDe dl dd:nth-of-type(1) {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    border-top: none;
  }
  .laTaikenDe dl dd:nth-of-type(2) {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    border-bottom: none;
  }
  .laTaikenDe h3 {
    margin: 30px 0 0 0;
    font-size: var(--font-size-lg);
  }
.laTaikenDe h3 span:after {
    right: calc(-1rem - 100%);
    top: 50%;
    width: 100%;
}
.laTaikenDe h3 span:before {
    left: calc(-1rem - 100%);
    top: 50%;
    width: 100%;
}
  .laTaikenDe dl.disabled:after {
    font-size: 1.75rem;
  }
  .laTaikenDe h4 {
    font-size: 18px;
  }
  }