@charset "utf-8";

/* CSS Document -------------
/* Last up date: 2024.06.20
/* Last up date user: yamaguchi
/* Shiryou BOX
--------------------------*/
.teikyoOc {
  --tkBlue: 42, 65, 152;
  --tkAqua: 50, 195, 226;
  --tkYamabuki: 255, 188, 90;
  --tkMikan: 255, 174, 94;
  --tkYellow: 249, 241, 113;
  --tkOrange: 255, 129, 107;
  --tkPink: 227, 85, 134;
  --tkRed: 222, 38, 38;
  overflow: hidden;
}

.teikyoOc .gratitude{
  position: relative;
  margin: 1rem auto 1.5rem;
  padding: 1rem;
  width: 95%;
  max-width: 65rem;
  background: #fff;
  border: solid 3px #ccc;
  border-radius: 2rem;
  text-align: center;
}

.teikyoOc .gratitude::before {
  content: '';
  z-index: 1;
  top: 100%;
  left: 50%;
  width: 1.75rem;
  height: 1.75rem;
  background: inherit;
  border: solid 3px #fff;
  border-bottom-color: #ccc;
  border-right-color: #ccc;
  transform-origin: center;
  transform: translate(-50%, -50%) rotate(45deg);
}

.teikyoOc .gratitude p{
  position: relative;
  z-index: 2;
  color: rgba(var(--tkBlue), 1);
  font-size: 1.5rem;
  line-height: 1.6;
  font-weight: bold;
}

.teikyoOc .gratitude p + p{
  margin-top: 1rem;
}
  

.teikyoOc .outer{
  container: tkocBox / inline-size;
}

.teikyoOc .outer *{
  --tkBorder: solid 2px rgba(var(--tkBlue), 1);
  --tkVP5: 5px;
  --tkVP10: 10px;
  --tkVP15: 15px;
  --tkVP30: 10px;
  --tkVP40: 30px;
  --tkVP60: 60px;
  --tkVP90: 90px;
}

/* main visual */
.teikyoOc .mv {
  position: relative;
  height: 90vw;
  min-height: 340px;
  max-height: 45rem;
  border-top: 5px solid rgba(var(--tkBlue), 1);
  container: mvBox / inline-size;
}

.teikyoOc .mv .inner {
  position: relative;
  z-index: 3;
  display: grid;
  margin: 0 auto;
  padding: 0 0 15px;
  max-width: 1800px;
  height: 100%;
  background: url('../../../../img/page/LP/teikyo_oc/bg_campus.webp') 30% top / auto min(100%, 500px) no-repeat;
  overflow: hidden;
  container: mvBoxInner / inline-size;
}

@container tkocBox (width >=1000px) {
  .teikyoOc .mv {
    background: none;
  }

  .teikyoOc .mv .inner {
    background: url('../../../../img/page/LP/teikyo_oc/bg_campus.webp') left top / auto min(100%, 500px) no-repeat;
  }

  .teikyoOc .mv .inner::after {
    content: '';
    z-index: -1;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    background:
    linear-gradient(to left, rgba(255, 255, 255, 1) 2px, rgba(255, 255, 255, 0) 20%),
    radial-gradient(circle, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0) 0) 0 0 / 9px 9px,
    radial-gradient(circle, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0) 0) 4.5px 4.5px / 9px 9px,
      linear-gradient(to bottom left, rgba(var(--tkOrange), 1) 10%, rgba(var(--tkYamabuki), 1) 20%, rgba(var(--tkYellow), 1) 60%);
    mask-size: cover;
    mask-position: 0 50%;
    mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    -webkit-mask-position: 0 50%;
    -webkit-mask-repeat: no-repeat;
    mask-image: url('../../../../img/page/LP/teikyo_oc/bg_map.svg');
    -webkit-mask-image: url('../../../../img/page/LP/teikyo_oc/bg_map.svg');
  }
}

.teikyoOc .mv hgroup {
  position: relative;
  z-index: 4;
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
}

.teikyoOc .mv h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 5px;
  margin: 0 15px 15px;
}

.teikyoOc .mv hgroup h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 5px;
  margin: 0 20vw 30px 15px;
}

.teikyoOc .mv img{
  -webkit-backface-visibility:hidden;
  backface-visibility: hidden;  
}

.teikyoOc .mv .areaTxt {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 5px;
  margin: 0 auto 20px;
  padding: 0 15px 5px;
  background: rgba(var(--tkBlue), 1);
}

.teikyoOc .mv .txt01 {
  height: 5.3vw;
  max-height: 2.4rem;
  width: auto;
}

.teikyoOc .mv .txt02 {
  height: 3.2vw;
  max-height: 1.5rem;
  width: auto;
}

.teikyoOc .mv .txt03 {
  align-self: center;
  height: 1.33vw;
  max-height: 0.5rem;
  width: auto;
}

.teikyoOc .mv .txt04 {
  width: 8vw;
  max-width: 4rem;
}

.teikyoOc .mv .txt05 {
  height: 5.5vw;
  max-height: 3.8rem;
  width: auto;
  transform: translateZ(0);
  filter: drop-shadow(0 0 0.5px #fff) drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 -1px 0 #fff);
}

.teikyoOc .mv .txt06 {
  height: 6.2vw;
  max-height: 4rem;
  width: auto;
  transform: translateZ(0);
  filter: drop-shadow(0 0 0.5px #fff) drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 -1px 0 #fff);
}

.teikyoOc .mv .txt07 {
  width: 11vw;
  max-width: 5.5rem;
}

.teikyoOc .mv .txt08 {
  width: 10.5vw;
  max-width: 5rem;
}

.teikyoOc .mv .panel {
  display: flex;
  gap: 2px;
  width: fit-content;
  background: rgba(var(--tkBlue), 1);
  border: var(--tkBorder);
}

.teikyoOc .mv .panel span {
  display: grid;
  padding: 5px 3px;
  background: #fff;
}

.teikyoOc .mv .panel img {
  align-self: center;
}

.teikyoOc .mv .shadow {
  position: relative;
}

.teikyoOc .mv .shadow img {
  position: relative;
  z-index: 2;
}

.teikyoOc .mv .shadow::before {
  content: '';
  z-index: 1;
  top: 7px;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 1) 25%, rgba(255, 255, 255, 0) 0) 0 0 / 4px 4px,
    radial-gradient(circle, rgba(255, 255, 255, 1) 25%, rgba(255, 255, 255, 0) 0) 2px 2px / 4px 4px;
  mask-size: cover;
  mask-position: 50% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  -webkit-mask-position: 50% 100%;
  -webkit-mask-repeat: no-repeat;
}

.teikyoOc .mv .shadow.hachi::before {
  mask-image: url('../../../../img/page/LP/teikyo_oc/ttl_hachiouji.svg');
  -webkit-mask-image: url('../../../../img/page/LP/teikyo_oc/ttl_hachiouji.svg');
}

.teikyoOc .mv .shadow.opca::before {
  mask-image: url('../../../../img/page/LP/teikyo_oc/ttl_oc.svg');
  -webkit-mask-image: url('../../../../img/page/LP/teikyo_oc/ttl_oc.svg');
}

.teikyoOc .mv .eventDays {
  align-self: flex-end;
  margin-right: 30%;
  max-width: 1260px;
}

.teikyoOc .mv .eventDays div {
  position: relative;
  margin: 0 auto 0 5px;
  padding: 0 10px 10px;
  width: fit-content;
}

.teikyoOc .mv .eventDays div::before {
  content: '';
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background: rgba(var(--tkBlue), 1);
  border-radius: 20px;
}

.teikyoOc .mv .eventDays p {
  position: relative;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 3px 5px;
  transform: translateZ(0);
  filter: drop-shadow(0 0 0.5px #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 -2px 0 #fff);
}

.teikyoOc .mv .eventDays img {
  height: 8vw;
  max-height: 5rem;
  width: auto;
}

.teikyoOc .mv .picBus {
  position: absolute;
  z-index: 2;
  bottom: 0;
  right: -5%;
  width: 60%;
  max-width: 418px;
  aspect-ratio: 418 / 191;
}

.teikyoOc .mv .picGirl {
  position: absolute;
  z-index: 3;
  bottom: 0;
  right: -15%;
  width: 55%;
  max-width: 461px;
  aspect-ratio: 461 / 666;
}

.teikyoOc .mv .tenjouin {
  position: absolute;
  z-index: 5;
  bottom: 10px;
  right: 2px;
  display: grid;
  place-content: center;
  grid-template-columns: 3.5fr 6.5fr 1fr;
  width: 35vw;
  max-width: 280px;
  aspect-ratio: 291 / 199;
}

.teikyoOc .mv .tenjouin::before {
  content: '';
  z-index: 1;
  top: 0;
  right: 7px;
  height: 100%;
  aspect-ratio: 1 / 1;
  background: url('../../../../img/page/LP/teikyo_oc/bg_tenjouin.svg') center / contain no-repeat;
  filter: drop-shadow(0 0 0.5px #fff) drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 -1px 0 #fff);
  animation: roll 2s 0s infinite linear;
  transform-origin: center;
}

.teikyoOc .mv .tenjouin .tenjouin01 {
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 3;
  width: 100%;
  aspect-ratio: 379 / 238;
  transform-origin: center;
  transform: translate(0, -50%);
  filter: drop-shadow(0 0 0.5px #fff) drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 -1px 0 #fff);
}

.teikyoOc .mv .tenjouin .tenjouin02 {
  position: relative;
  z-index: 2;
  grid-column: 2 / 3;
  padding: 0 5px;
  text-align: center;
}

@keyframes roll {
  to {
    transform: rotate(-45deg);
  }
}

@container mvBoxInner (width >=420px) {
  .teikyoOc .mv .areaTxt {
    margin: 0 auto 30px;
  }

  .teikyoOc .mv hgroup h2 {
    margin: 0 15px 20px;
    gap: 15px;
  }

  .teikyoOc .mv hgroup h3 {
    gap: 15px;
  }
}

@container mvBoxInner (width >=460px) {
  .teikyoOc .mv .areaTxt {
    padding: 10px clamp(15px, 3vw, 30px) 15px;
    width: fit-content;
    border-radius: 0 0 1.5rem 1.5rem;
  }

  .teikyoOc .mv .shadow::before {
    top: 10px;
  }

  .teikyoOc .mv .eventDays p {
    filter: drop-shadow(0 0 0.5px #fff) drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 -3px 0 #fff);
  }
}

@keyframes tokotoko {
  0% {
    transform: translate(0, -50%) rotate(0);
  }

  100% {
    transform: translate(0, -50%) rotate(-2deg);
  }
}

@container mvBoxInner (width >=600px) {
  .teikyoOc .mv .picGirl {
    bottom: auto;
    top: -10%;
  }
}

@container mvBoxInner (width >=650px) {
  .teikyoOc .mv .picBus {
    right: -10%;
    width: 70%;
  }

  .teikyoOc .mv .picGirl {
    right: -20%;
  }
}

@container mvBox (width >=700px) {
  .teikyoOc .mv .inner {
    padding: 0 20px 20px;
  }

  .teikyoOc .mv .panel span {
    padding: 7px;
  }
}

@container mvBox (width >=900px) {
  .teikyoOc .mv .inner {
    padding: 0 30px 30px;
  }
}

@container mvBoxInner (width >=750px) {
  .teikyoOc .mv .picBus {
    bottom: 10%;
    right: -2%;
  }

  .teikyoOc .mv .picGirl {
    right: -13%;
  }
}

@container mvBoxInner (width >=769px) {
  .teikyoOc .mv .txt01 {
    height: 3rem;
  }

  .teikyoOc .mv .txt02 {
    height: 1.5rem;
  }
}

@container mvBoxInner (width >=850px) {
  .teikyoOc .mv .eventDays p {
    padding: 0 20px 5px;
  }

  .teikyoOc .mv .eventDays p::before {
    height: 30px;
    border-radius: 30px;
  }
}


@container mvBoxInner (width >=900px) {
  .teikyoOc .mv .areaTxt {
    margin: 0 auto 50px;
  }

  .teikyoOc .mv hgroup h2 {
    margin: 0 15px 30px;
  }

  .teikyoOc .mv .picGirl {
    top: auto;
    bottom: 0;
    right: -5%;
  }

  .teikyoOc .mv .picBus {
    right: 10%;
    bottom: 15%;
  }

  .teikyoOc .mv .tenjouin {
    right: 15px;
    bottom: 15px;
  }

  .teikyoOc .mv .tenjouin::before {
    right: 10px;
  }
}

@container mvBoxInner (width >=1050px) {
  .teikyoOc .mv .eventDays {
    margin: 0 auto;
    width: 100%;
  }

  .teikyoOc .mv .txt06 {
    max-height: 4.5rem;
  }

  .teikyoOc .mv .txt07 {
    max-width: 6.5rem;
  }

  .teikyoOc .mv .txt08 {
    max-width: 6rem;
  }
  
  .teikyoOc .mv .eventDays img {
    max-height: 6rem;
  }
}

@container mvBoxInner (width >=1100px) {
  .teikyoOc .mv hgroup h3 {
    margin: 0 15vw 30px 15px;
  }
}

@container mvBoxInner (width >=1200px) {
  .teikyoOc .mv hgroup h2 {
    margin: 0 0 30px;
  }

  .teikyoOc .mv hgroup h3 {
    margin: 0 0 30px;
  }

  .teikyoOc .mv .txt06 {
    height: 6vw;
    max-height: 3.8rem;
  }

  .teikyoOc .mv .picGirl {
    right: -5%;
  }

  .teikyoOc .mv .picBus {
    bottom: 0;
    right: 5%;
  }
}

@container mvBoxInner (width >=1300px) {
  .teikyoOc .mv .picBus {
    right: 10%;
  }
}

@container mvBoxInner (width >=1560px) {
  .teikyoOc .mv .picGirl {
    right: 0;
  }

  .teikyoOc .mv .picBus {
    right: 300px;
  }

  .teikyoOc .mv .tenjouin {
    right: 200px;
    bottom: 15px;
  }
}


/* common title */
.teikyoOc .blueTtl {
  position: relative;
  z-index: 2;
  margin: 0 auto var(--tkVP40);
  padding: 15px 30px;
  width: fit-content;
  background: rgba(var(--tkBlue), 1);
  border-radius: 2em;
  font-size: 3rem;
  text-align: center;
}

.teikyoOc .blueTtl::before {
  content: '';
  top: 100%;
  left: 50%;
  width: 2rem;
  height: 2rem;
  background: inherit;
  transform-origin: center;
  transform: translate(-50%, -50%) rotate(45deg);
}

.teikyoOc .blueTtl .ttl {
  height: 6.6vw;
  max-height: 2.5rem;
  width: auto;
}

/* common brack */
.teikyoOc .brak {
  display: inline-block;
}

/* common bas stop image */
.teikyoOc .basStopImg {
  position: absolute;
  z-index: -1;
  top: -15px;
  left: 50%;
  max-width: 1200px;
  width: calc(100% - 30px);
  transform: translate(-50%, 0);
}

.teikyoOc .imgBusStop {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateZ(0);
  filter: drop-shadow(0 0 0.5px #fff) drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 -1px 0 #fff);
}

.teikyoOc .imgBus {
  position: absolute;
  top: 12px;
  left: 100vw;
  transform: translateZ(0);
  filter: drop-shadow(0 0 0.5px #fff) drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 -1px 0 #fff);
}

.teikyoOc .runningCar .imgBus {
  --bustime: 3s;
  animation: runLeft var(--bustime) 0s forwards 1 ease-out;
}

@container (width >=700px) {
  .teikyoOc .runningCar .imgBus {
    --bustime: 6s;
  }
}

@container (width >=1000px) {
  .teikyoOc .runningCar .imgBus {
    --bustime: 9s;
  }
}


/* common button */
.teikyoOc .appBtn a{
  display: grid;
  place-content: center;
  padding: var(--tkVP5) var(--tkVP10);
  width: 80%;
  max-width: 400px;
  min-height: 44px;
  background: rgba(var(--tkPink), 1);
  border: solid 2px #fff;
  border-radius: 2em;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
}

.teikyoOc .appBtn .icn {
  position: relative;
  padding: 5px 0.5em 5px 2.25em;
  background: url('../../../../img/page/LP/teikyo_oc/icn_bus_02.svg') left center / 2em auto no-repeat;
}

.teikyoOc .fixedAppBtn{
  z-index: 700;
  width: 100%;
}

.teikyoOc .bigAppBtn{
  position: relative;
  margin: var(--tkVP90) auto 0;
  width: 90%;
  max-width: 450px;
}

.teikyoOc .bigAppBtn .appBtn{
  padding-bottom: min(30px, 2.5vw);
}

.teikyoOc .bigAppBtn img{
  position: absolute;
  z-index: 1;
  filter: drop-shadow(0 0 0.5px #fff) drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 -1px 0 #fff);
}

.teikyoOc .bigAppBtn .left{
  bottom: 75%;
  left: 2%;
  width: 14vw;
  max-width: 60px;
  transform: rotate(-3deg);
}

.teikyoOc .bigAppBtn .right{
  bottom: 80%;
  right: 2%;
  width: 12vw;
  max-width: 50px;
  transform: rotate(3deg);
}

.teikyoOc .bigAppBtn .center{
  bottom: 110%;
  left: 50%;
  width: 60vw;
  max-width: 295px;
  transform: translate(-50%, 0);
}

.teikyoOc .bigAppBtn .appBtn a{
  position: relative;
  z-index: 2;
  font-size: 2.2rem;
  min-height: 60px;
  width: 100%;
  max-width: 100%;
}

.teikyoOc .bigAppBtn .appBtn .icn {
  padding: 5px 0.25em 5px 2em;
  background: url('../../../../img/page/LP/teikyo_oc/icn_bus_02.svg') left center / 1.75em auto no-repeat;
}

/* .fixedAppBtn.noFixed{
  position: relative;
  bottom: auto;
  left: auto;
}

.fixedAppBtn:not(.noFixed){
  position: fixed;
  bottom: 0;
  left: 0;
} */

/* section cachcopy */
.teikyoOc .cachCopy {
  padding: 50px 0 60px;
  container: inline-size;
}

.teikyoOc .cachCopy .blueTtl {
  padding: 15px 30px 15px 90px;
}

.teikyoOc .cachCopy .blueTtl .left {
  position: absolute;
  bottom: 5px;
  left: 15px;
  /* transform: translateZ(0); */
  filter: drop-shadow(0 0 0.5px #fff) drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 -1px 0 #fff);
}

.teikyoOc .cachCopy .blueTtl .right {
  display: none;
}

.teikyoOc .cachCopy p {
  margin: 0 auto;
  padding: 0 var(--tkVP15);
  max-width: 894px;
}

@container (width >=700px) {
  .teikyoOc .cachCopy .blueTtl {
    padding: 15px 120px;
  }
}

@container (width > 769px) {
  .teikyoOc .cachCopy .blueTtl .left {
    left: 30px;
    bottom: 5px;
    width: 60px;
  }

  .teikyoOc .cachCopy .blueTtl .right {
    display: inline;
    position: absolute;
    bottom: 10px;
    /* transform: translateZ(0); */
    filter: drop-shadow(0 0 0.5px #fff) drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 -1px 0 #fff);  
  }

  .teikyoOc .cachCopy .blueTtl .right01 {
    right: 75px;
    width: 20px;
  }

  .teikyoOc .cachCopy .blueTtl .right02 {
    right: 15px;
    width: 60px;
  }
}


/* section application method */
.teikyoOc .appMethod {
  position: relative;
  margin: 0 auto;
  padding: 0 var(--tkVP15) var(--tkVP90);
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.25) 25%, rgba(255, 255, 255, 0) 0) 0 0 / 8px 8px,
    radial-gradient(circle, rgba(255, 255, 255, 0.25) 25%, rgba(255, 255, 255, 0) 0) 4px 4px / 8px 8px,
    linear-gradient(to top, rgba(var(--tkAqua), 1) 0, rgba(var(--tkAqua), 1) 70%, rgba(255, 255, 255, 0) 70%);
}

.teikyoOc .appMethod::before {
  content: '';
  z-index: 1;
  top: 20%;
  left: -2.5%;
  width: 105%;
  height: min(400px, 30%);
  background: #fff;
  border-radius: 0 0 100% 80%;
}

.teikyoOc .appMethod .inner {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  max-width: 1050px;
  container-type: inline-size;
}


.teikyoOc .appMethod .txt {
  position: relative;
  z-index: 2;
  margin: 0 auto var(--tkVP15);
  color: rgba(var(--tkBlue), 1);
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.2;
  text-align: center;
}

.teikyoOc .appMethod .inPageLink {
  margin: 0 auto 30px;
  width: fit-content;
  max-width: 1050px;
  background: rgba(var(--tkBlue), 1);
  border-radius: 1rem;
}


.teikyoOc .appMethod .inPageLink li {
  position: relative;
  counter-increment: count 1;
  padding-top: 5px;
}

.teikyoOc .appMethod .inPageLink li:first-child {
  padding-top: 0;
}

.teikyoOc .appMethod .inPageLink li::before {
  content: '';
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
}

.teikyoOc .appMethod .inPageLink li::after {
  content: '';
  top: 100%;
  left: 50%;
  width: 2rem;
  height: 2rem;
  background: rgba(var(--tkBlue), 1);
  border-bottom: solid 2px #fff;
  border-right: solid 2px #fff;
  transform-origin: center;
  transform: translate(-50%, -50%) rotate(45deg);
}

.teikyoOc .appMethod .inPageLink li:last-child::before,
.teikyoOc .appMethod .inPageLink li:last-child::after {
  content: none;
}

.teikyoOc .appMethod .inPageLink a {
  position: relative;
  display: grid;
  place-content: center;
  gap: 5px;
  padding: 15px 15px 15px 40px;
  font-weight: bold;
  font-size: 1.6rem;
  line-height: 1.4;
  color: #fff;
  text-align: center;
}

.teikyoOc .appMethod .inPageLink a::before {
  content: counter(count);
  top: 50%;
  left: -10px;
  display: grid;
  place-content: center;
  width: 1.4em;
  height: 1.4em;
  font-size: 3rem;
  background: #fff;
  color: rgba(var(--tkBlue), 1);
  border: var(--tkBorder);
  border-radius: 50%;
  font-weight: bold;
  transform: translate(0, -50%);
}

.teikyoOc .appMethod .inPageLink .url {
  font-size: 1.2rem;
  font-weight: normal;
}


@container (width >=460px) {
  .teikyoOc .appMethod .inPageLink {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .teikyoOc .appMethod .inPageLink li {
    padding: 0;
  }

  .teikyoOc .appMethod .inPageLink li::before {
    bottom: 0;
    left: inherit;
    right: 10px;
    width: 1px;
    height: 54%;
    background: #fff;
    border: none;
    transform: translate(-50%, 0) rotate(30deg);
  }

  .teikyoOc .appMethod .inPageLink li::after {
    top: 0;
    left: inherit;
    right: 10px;
    width: 1px;
    height: 54%;
    background: #fff;
    border: none;
    transform: translate(-50%, 0) rotate(-30deg);
  }

  .teikyoOc .appMethod .inPageLink a {
    padding: 15px 20px 15px 65px;
    height: 100%;
    font-size: 1.8rem;
  }

  .teikyoOc .appMethod .inPageLink li:first-child a {
    padding: 15px 15px 15px 40px;
  }

  .teikyoOc .appMethod .inPageLink li a::before {
    left: 10px;
  }

  .teikyoOc .appMethod .inPageLink li:first-child a::before {
    left: -10px;
  }
}


.teikyoOc .freeBus {
  position: relative;
  margin: 0 auto;
  padding: 10px 15px;
  max-width: 1050px;
  border: var(--tkBorder);
  border-radius: 1.5rem;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0) 0) 0 0 / 8px 8px,
    radial-gradient(circle, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0) 0) 4px 4px / 8px 8px,
    linear-gradient(to top, rgba(var(--tkBlue), 1) 0, rgba(var(--tkBlue), 1) 33%, rgba(255, 255, 255, 1) 33%);
}

.teikyoOc .freeBus h4 {
  position: relative;
  margin: 0 auto 15px;
  padding: var(--tkVP5) var(--tkVP5) var(--tkVP5) 1.75em;
  border-bottom: var(--tkBorder);
  color: rgba(var(--tkBlue), 1);
  font-weight: bold;
  font-size: 2.4rem;
  line-height: 1.2;
}

.teikyoOc .freeBus h4::before {
  content: '';
  top: 50%;
  left: 0.25em;
  width: 1.25em;
  height: 1.25em;
  background: url('../../../../img/page/LP/teikyo_oc/icn_bus.svg') center / contain no-repeat;
  transform: translate(0, -50%);
}

.teikyoOc .freeBus h4+p {
  margin: 0 0 5px;
  font-size: 1.6rem;
}

.teikyoOc .freeBus p {
  font-weight: bold;
  line-height: 1.4;
}

.teikyoOc .freeBus .limit {
  margin: 0 auto;
  container: limitBox / inline-size;
}

.teikyoOc .freeBus .limitDate {
  padding: 15px 0 0;
  text-align: center;
}

.teikyoOc .freeBus .limitDate h5 {
  margin: 0 auto 5px;
  padding: 3px 15px;
  width: fit-content;
  background: rgba(var(--tkBlue), 1);
  color: #fff;
  font-weight: bold;
  font-size: 1.3rem;
}

.teikyoOc .freeBus .limitDate p {
  margin: 0 auto 15px;
  padding: 0 10px 3px;
  background: linear-gradient(to top, rgba(var(--tkYellow), 1) 0, rgba(var(--tkYellow), 1) 0.8em, rgba(255, 255, 255, 0) 0.8em);
  font-size: 1.6rem;
  font-weight: bold;
}

.teikyoOc .freeBus .limitDate em {
  font-size: 180%;
}

.teikyoOc .freeBus .limitDate .finished,
.teikyoOc .pastPeriod{
  position: relative;
}

.teikyoOc .pastPeriod a{
  pointer-events: none;
}

.teikyoOc .freeBus .limitDate .finished *{
  opacity: 0.6;
}

.teikyoOc .freeBus .limitDate .finished::before,
.teikyoOc .bigAppBtn.pastPeriod::before{
  content: '';
  z-index: 10;
  top: 50%;
  left: 50%;
  width: 6em;
  height: 1.6em;
  background: url('../../../../img/page/LP/teikyo_oc/txt_manin.svg') center / auto 1em no-repeat, rgba(var(--tkRed), 1);
  text-align: center;
  font-size: 2.6rem;
  transform: translate(-50%, -70%) rotate(-7deg);
}

.teikyoOc .bigAppBtn.pastPeriod::before{
  font-size: 3.2rem;
}

.teikyoOc .bigAppBtn.pastPeriod a,
.teikyoOc .pastPeriod.appBtn a{
  box-shadow: none;
  background: #ccc;
}

.teikyoOc .bigAppBtn.pastPeriod img{
  filter: grayscale(100%) drop-shadow(0 0 0.5px #fff) drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 -1px 0 #fff);
}

.teikyoOc .route .days .pastPeriod{
  opacity: 0.5;
}

.teikyoOc .freeBus .setLocation {
  position: relative;
  margin: 0 auto;
  padding: 30px 0;
  min-height: 150px;
}

.teikyoOc .freeBus .setLocation p {
  margin-right: 140px;
  padding: 5px;
  background: #fff;
  font-size: 1.4rem;
  border-radius: 1em;
}

.teikyoOc .freeBus .setLocation em {
  color: rgba(var(--tkPink), 1);
}

.teikyoOc .freeBus .picFlag {
  position: absolute;
  z-index: 1;
  top: 0;
  right: -15px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25);
}

.teikyoOc .freeBus .picFlag img {
  border-radius: 50%;
  overflow: hidden;
}

.teikyoOc .freeBus .arrow {
  position: absolute;
  z-index: 2;
  bottom: -15px;
  right: 70px;
  width: 130px;
  transform: scale(1, -1) rotate(40deg);
  /* filter: drop-shadow(0 0 0.5px #fff) drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 -1px 0 #fff); */
}
 /*
.teikyoOc .freeBus .arrow path{
  fill:none;
  stroke:#2a4198;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width: 4px;
  stroke-dasharray: 1000;
  stroke-dashoffset: -1000; 
}*/

/* .teikyoOc .freeBus .arrow.arrowAnime path{
  stroke-dasharray: 1000;
  stroke-dashoffset: -1000;
}

.teikyoOc .freeBus .arrowAnime.playAmime .path01{
  animation: arrowAnime 0.5s 0s forwards 1 ease-out;
}
.teikyoOc .freeBus .arrowAnime.playAmime .path02{
  animation: arrowAnime 0.5s 0.5s forwards 1 ease-out;
}
.teikyoOc .freeBus .arrowAnime.playAmime .path03{
  animation: arrowAnime 1.5s 1s forwards 1 ease-out;
}
.teikyoOc .freeBus .arrowAnime.playAmime .path04{
  animation: arrowAnime 0.5s 2.5s forwards 1 ease-out;
}

@keyframes arrowAnime {
  0% {
    stroke-dashoffset: -1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
} */


.teikyoOc .freeBus .contact {
  display: grid;
  border: var(--tkBorder);
}

.teikyoOc .freeBus h5 {
  padding: 3px;
  background: #fff;
  color: rgba(var(--tkBlue), 1);
  text-align: center;
  font-size: 1.3rem;
  line-height: 1.2;
}

.teikyoOc .freeBus .contact .right {
  padding: 10px;
  background: rgba(var(--tkBlue), 1);
}

.teikyoOc .freeBus .contact .right span {
  margin-right: 5px;
}

.teikyoOc .freeBus .contact .right * {
  color: #fff;
  line-height: 1.4;
  word-break: break-all;
}

.teikyoOc .freeBus .contact .right p {
  margin: 0 auto 10px;
  font-size: 1.6rem;
}

.teikyoOc .freeBus .contact ul{
  display: grid;
  gap: 5px;
  align-items: center;
}

.teikyoOc .freeBus .contact .tel {
  padding: 0 0 0 1.25em;
  background: url('../../../../img/page/LP/teikyo_oc/icn_tel.svg') 0 0.2em / 1em auto no-repeat;
}

.teikyoOc .freeBus .contact .mail {
  padding: 0 0 0 1.25em;
  background: url('../../../../img/page/LP/teikyo_oc/icn_mail.svg') 0 0.4em / 1em auto no-repeat;
}

@container (width >=600px) {
  .teikyoOc .freeBus {
    padding: 15px 15cqw 10px 50px;
    background:
      radial-gradient(circle, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0) 0) 0 0 / 8px 8px,
      radial-gradient(circle, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0) 0) 4px 4px / 8px 8px,
      linear-gradient(to top, rgba(var(--tkBlue), 1) 0, rgba(var(--tkBlue), 1) 40%, rgba(255, 255, 255, 1) 40%);
  }

  .teikyoOc .freeBus::before {
    content: '';
    top: 50%;
    left: -3px;
    width: 40px;
    height: 100px;
    background: #fff;
    border-top: var(--tkBorder);
    border-right: var(--tkBorder);
    border-bottom: var(--tkBorder);
    border-radius: 0 100% 100% 0% / 50%;
    transform: translate(0, -50%);
  }

  .teikyoOc .freeBusPanch {
    position: relative;
  }

  .teikyoOc .freeBusPanch::before {
    content: '';
    top: 30px;
    left: 100%;
    background:
      radial-gradient(circle, #fff 9px, rgba(255, 255, 255, 0) 10px) center 0 / 60px 37px repeat-y,
      radial-gradient(circle, rgba(var(--tkBlue), 1) 12px, rgba(255, 255, 255, 0) 13px) center 0 / 60px 37px repeat-y;
    width: 60px;
    height: calc(100% - 60px);
  }

  .teikyoOc .freeBusPanch::after {
    content: '';
    top: -18px;
    left: 100%;
    background:
      radial-gradient(circle, #fff 26px, rgba(255, 255, 255, 0) 27px) center -35px / 80px 66px no-repeat,
      radial-gradient(circle, rgba(var(--tkBlue), 1) 29px, rgba(255, 255, 255, 0) 30px) center -35px / 80px 66px no-repeat,
      radial-gradient(circle, rgba(var(--tkAqua), 1) 26px, rgba(255, 255, 255, 0) 27px) center calc(100% + 35px) / 80px 66px no-repeat,
      radial-gradient(circle, rgba(var(--tkBlue), 1) 29px, rgba(255, 255, 255, 0) 30px) center calc(100% + 35px) / 80px 66px no-repeat;
    width: 60px;
    height: calc(100% + 31px);
  }

  .teikyoOc .freeBus .setLocation p {
    margin-right: 15cqw;
    padding: 10px 15px;
    border: var(--tkBorder);
    border-radius: 2em;
  }

  .teikyoOc .freeBus .picFlag {
    top: -60px;
    right: -16cqw;
    width: 200px;
    height: 200px;
  }

  .teikyoOc .freeBus .arrow {
    bottom: 0;
    width: 150px;
    transform: scale(1, -1) rotate(40deg);
  }

  .teikyoOc .freeBus .contact {
    grid-template-columns: 6em auto;
  }

  .teikyoOc .freeBus h5 {
    display: grid;
    align-items: center;
    font-size: 1.4rem;
  }

  .teikyoOc .freeBus .contact .right {
    padding: 15px 20px;
  }
}

@container limitBox (width >=450px) {
  .teikyoOc .freeBus .limitDate {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .teikyoOc .freeBus .limitDate p {
    font-size: 1.8rem;
  }
}

@container limitBox (width >=700px) {
  .teikyoOc .freeBus .limitDate {
    gap: 30px;
    padding: 30px 0 0;
    width: fit-content;
  }

  .teikyoOc .freeBus .limitDate p {
    font-size: 2rem;
  }
}


.areaInner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.areaInner .areaMenu {
  grid-column: 1 / 4;
}

@container (width >=700px) {
  .teikyoOc .freeBus .picFlag {
    right: -16cqw;
  }
}

@container (width >=910px) {
  .teikyoOc .freeBus .setLocation {
    min-height: auto;
  }

  .teikyoOc .freeBus .setLocation p {
    margin-right: 0;
  }

  .teikyoOc .freeBus .arrow {
    bottom: 65px;
    right: 0;
    width: 200px;
    transform: scale(1) rotate(0deg);
  }

  .teikyoOc .freeBus .picFlag {
    top: -180px;
    width: 250px;
    height: 250px;
  }
  
  .teikyoOc .freeBus .contact ul{
    grid-auto-flow: column;
    justify-content: flex-start;
    gap: 30px;
  }
}

@container (width >=1025px) {
  .teikyoOc .freeBus .arrow {
    bottom: 70px;
  }
}


/* section checkRoute */
.teikyoOc .checkRoute {
  position: relative;
  margin: 0 auto;
  padding: 0 var(--tkVP15) var(--tkVP90);
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.25) 25%, rgba(255, 255, 255, 0) 0) 0 0 / 8px 8px,
    radial-gradient(circle, rgba(255, 255, 255, 0.25) 25%, rgba(255, 255, 255, 0) 0) 4px 4px / 8px 8px,
    linear-gradient(to bottom, rgba(var(--tkAqua), 1) 0, rgba(var(--tkAqua), 1) 30px, rgba(255, 255, 255, 0) 30px);
  container-type: inline-size;
}

.teikyoOc .checkRoute .blueTtl .txt {
  position: absolute;
  top: 0;
  left: 10%;
  height: 7vw;
  max-height: 2.5rem;
  width: auto;
  transform: translate(0, -60%);
}

.teikyoOc .checkRoute .inner {
  position: relative;
  margin: 0 auto;
  max-width: 1100px;
}

.teikyoOc .checkRoute .basStopImg {
  display: none;
}

@keyframes runLeft {
  to {
    left: 35px;
  }
}

.teikyoOc .checkRoute .inPageLinks {
  margin: 0 auto;
  max-width: 800px;
}

@container (width >=1050px) {
  .teikyoOc .checkRoute .inner {
    position: relative;
    z-index: 2;
    background: url('../../../../img/page/LP/teikyo_oc/pic_girl_02.webp') left top / auto 100% no-repeat;
  }

  .teikyoOc .checkRoute .inPageLinks {
    margin: 0 0 0 auto;
    width: 800px;
  }

  .teikyoOc .checkRoute .basStopImg {
    display: block;
    z-index: 1;
  }
}

.teikyoOc .checkRoute .inPageLinks ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 auto 15px;
}

.teikyoOc .checkRoute .inPageLinks a {
  position: relative;
  display: block;
  padding: 15px 5px;
  background: #fff;
  border: var(--tkBorder);
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.2));
  text-align: center;
  color: rgba(var(--tkBlue), 1);
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.2;
}

.teikyoOc .checkRoute .inPageLinks ul a::before {
  content: '';
  z-index: 1;
  bottom: 5px;
  right: 3px;
  width: 80%;
  height: 110%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.25) 30%, rgba(255, 255, 255, 0) 0) 0 0 / 15px 15px,
    radial-gradient(circle, rgba(255, 255, 255, 0.25) 30%, rgba(255, 255, 255, 0) 0) 7px 7px / 15px 15px,
    #5bcae3;
  mask-size: contain;
  mask-position: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}

.teikyoOc .checkRoute .inPageLinks ul a[href="#routeYamanashi"]::before {
  mask-image: url('../../../../img/page/LP/teikyo_oc/img_yamanashi.svg');
  -webkit-mask-image: url('../../../../img/page/LP/teikyo_oc/img_yamanashi.svg');
}

.teikyoOc .checkRoute .inPageLinks ul a[href="#routeNiigata"]::before {
  mask-image: url('../../../../img/page/LP/teikyo_oc/img_niigata.svg');
  -webkit-mask-image: url('../../../../img/page/LP/teikyo_oc/img_niigata.svg');
}

.teikyoOc .checkRoute .inPageLinks ul a[href="#routeTakasaki"]::before {
  mask-image: url('../../../../img/page/LP/teikyo_oc/img_takasaki.svg');
  -webkit-mask-image: url('../../../../img/page/LP/teikyo_oc/img_takasaki.svg');
}

.teikyoOc .checkRoute .inPageLinks ul a[href="#routeShizuoka"]::before {
  mask-image: url('../../../../img/page/LP/teikyo_oc/img_shizuoka.svg');
  -webkit-mask-image: url('../../../../img/page/LP/teikyo_oc/img_shizuoka.svg');
}

.teikyoOc .checkRoute .inPageLinks ul a[href="#routeNagano"]::before,
.teikyoOc .checkRoute .inPageLinks ul a[href="#routeMatsumoto"]::before {
  mask-image: url('../../../../img/page/LP/teikyo_oc/img_nagano.svg');
  -webkit-mask-image: url('../../../../img/page/LP/teikyo_oc/img_nagano.svg');
}

.teikyoOc .checkRoute .inPageLinks a span {
  position: relative;
  z-index: 2;
}

.teikyoOc .checkRoute .programBtn {
  margin: 0 auto;
  width: 80%;
  max-width: 580px;
}

.teikyoOc .checkRoute .programBtn a {
  padding: 10px 35px 10px 45px;
  font-size: 2.4rem;
}

.teikyoOc .checkRoute .programBtn .left {
  position: absolute;
  left: -25px;
  top: 50%;
  width: 70px;
  transform: translate(0, -50%);
}

.teikyoOc .checkRoute .programBtn .right01 {
  position: absolute;
  right: -3px;
  top: 50%;
  width: 40px;
  transform: translate(0, -50%);
}

.teikyoOc .checkRoute .programBtn .right02 {
  position: absolute;
  right: -40px;
  top: 5px;
  width: 50px;
}

@container (width >=500px) {
  .teikyoOc .checkRoute .inPageLinks a {
    font-size: 2.6rem;
  }

  .teikyoOc .checkRoute .programBtn a {
    font-size: 3rem;
  }
}

@container (width >=700px) {
  .teikyoOc .checkRoute .programBtn a {
    padding: 15px 100px;
  }

  .teikyoOc .checkRoute .programBtn .left {
    position: absolute;
    left: -15px;
    width: 120px;
    transform: translate(0, -40%);
  }

  .teikyoOc .checkRoute .programBtn .right01 {
    position: absolute;
    right: 15px;
    width: 65px;
  }

  .teikyoOc .checkRoute .programBtn .right02 {
    position: absolute;
    right: -70px;
    top: -10px;
    width: 90px;
  }
}


/* section route detailes */
.teikyoOc .routeDetailes {
  margin: 0 auto;
  padding: 0 var(--tkVP15) var(--tkVP90);
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.25) 25%, rgba(255, 255, 255, 0) 0) 0 0 / 8px 8px,
    radial-gradient(circle, rgba(255, 255, 255, 0.25) 25%, rgba(255, 255, 255, 0) 0) 4px 4px / 8px 8px,
    linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 30px, rgba(var(--tkAqua), 1) 30px);
}

.teikyoOc .route {
  margin: 0 auto 30px;
  padding: var(--tkVP15);
  max-width: 1150px;
  background: #fff;
  border-radius: 1.5rem;
}

.teikyoOc .route .nameDays {
  position: relative;
  display: grid;
  grid-template-columns: auto auto;
  align-items: flex-start;
  gap: 10px;
}

.teikyoOc .route h4 {
  padding: 0 var(--tkVP10) var(--tkVP5);
  border-bottom: var(--tkBorder);
  font-size: 2rem;
  color: rgba(var(--tkBlue), 1);
}

.teikyoOc .route h4 em {
  font-size: 150%;
}

.teikyoOc .route .days {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  justify-self: flex-end;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  margin-top: -20px;
}

.teikyoOc .route .days div{
  position: relative;
  display: grid;
  gap: 3px;
  padding: 10px 3px 3px;
  min-width: 3em;
  background: #fff;
  border: var(--tkBorder);
  border-radius: 0.5rem;
  text-align: center;
  font-size: 2.2rem;
}

.teikyoOc .route .days li {
  grid-column: 2 / 3;
}

.teikyoOc .route .days:has(li:nth-child(2)) li {
  grid-column: auto;
}

.teikyoOc .route .days div::before,
.teikyoOc .route .days div::after {
  content: '';
  bottom: calc(100% - 7px);
  left: 20%;
  width: 10px;
  height: 15px;
  background: rgba(var(--tkBlue), 1);
  border-radius: 0.4rem;
}

.teikyoOc .route .days div::after {
  left: inherit;
  right: 20%;
}

.teikyoOc .route .date {
  position: relative;
  padding: 0 2px;
  line-height: 1.2;
  font-weight: bold;
}

.teikyoOc .route .date::before {
  content: '';
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(var(--tkBlue), 1);
}

.teikyoOc .route .week {
  margin: 0 2px;
  padding: 3px;
  font-weight: bold;
  color: #fff;
  font-size: 1.4rem;
}

.teikyoOc .route .week.sun {
  background: rgba(var(--tkOrange), 1);
}

.teikyoOc .route .week.sat {
  background: rgba(var(--tkAqua), 1);
}

.teikyoOc .route .sde {
  grid-row: 2 / 3;
  grid-column: 1 / 3;
  margin: 0 auto;
  padding: 5px;
  border: solid 2px rgba(var(--tkRed), 1);
  font-weight: bold;
  color: rgba(var(--tkRed), 1);
  text-align: center;
}

.teikyoOc .route .sde p{
  font-weight: bold;
  line-height: 1.4;
}

.teikyoOc .route .sde .red{
  color: rgba(var(--tkRed), 1);
  font-size: 1.6rem;
}

.teikyoOc .route .appBtn {
  grid-row: 3 / 4;
  grid-column: 1 / 3;
  margin: 0 auto;
}

.teikyoOc .appBtn a {
  min-width: 200px;
}

.teikyoOc .trips {
  display: grid;
  justify-content: center;
  gap: 15px;
  padding: 15px 0 0;
}

.teikyoOc .trips .outward,
.teikyoOc .trips .return {
  display: grid;
  grid-template-columns: 1fr 9fr;
  gap: 5px;
  align-items: center;
  width: 100%;
}

.teikyoOc .trips h5 {
  padding: 5px 0;
  font-size: 2.2rem;
  color: rgba(var(--tkBlue), 1);
  text-align: center;
}

.teikyoOc .trips ol {
  position: relative;
  padding-top: 10px;
  background: rgba(var(--tkYellow), 1);
  border-radius: 1rem;
}

.teikyoOc .trips .return ol::before {
  content: '';
  bottom: calc(100% - 15px);
  right: 5px;
  height: 40px;
  aspect-ratio: 160 / 83;
  background: url('../../../../img/page/LP/teikyo_oc/img_buillding.svg') center / contain no-repeat;
}

.teikyoOc .trips ol li {
  padding: 0 15px 15px 20px;
}

.teikyoOc .trips .time {
  position: relative;
  margin: 0 0 10px;
  font-weight: bold;
  font-size: 1.6rem;
}

.teikyoOc .trips .time::before {
  content: '';
  z-index: 1;
  top: 50%;
  left: 13px;
  width: 95%;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}

.teikyoOc .trips .time span {
  position: relative;
  z-index: 2;
  margin-left: -5px;
  padding: 0 5px;
  background: rgba(var(--tkYellow), 1);
}

.teikyoOc .trips .time span::before {
  content: '';
  top: 50%;
  right: 100%;
  width: 20px;
  height: 20px;
  background: url('../../../../img/page/LP/teikyo_oc/icn_time.svg') center / contain no-repeat;
  transform-origin: center;  
  transform: translate(0, -50%);
}

.teikyoOc .trips .time.rollClock.playAmime span::before {
  animation: rollClockAnime 0.3s 0.5s 2 alternate linear;
}


@keyframes rollClockAnime {
  to {
    transform: translate(0, -50%) scale(1.2) rotate(170deg);
  }
}


.teikyoOc .trips h6 {
  padding: 5px 0;
}

.teikyoOc .trips .name {
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.2;
}

.teikyoOc .someDayEntry{
  margin: 0 auto 30px;
  padding: 5px;
  max-width: 800px;
  background: #fff;
  border: solid 2px rgba(var(--tkRed), 1);
  border-radius: 0.5rem;
}

.teikyoOc .someDayEntry .ttl{
  margin: 0 auto 10px;
  padding: 5px 2px;
  border-bottom: solid 2px rgba(var(--tkRed), 1);
  text-align: center;
}

.teikyoOc .someDayEntry .ttl h3{
  font-size: 2rem;
  color: rgba(var(--tkRed), 1);
  line-height: 1.4;
}

.teikyoOc .someDayEntry .ttl p{
  color: rgba(var(--tkRed), 1);
}

.teikyoOc .someDayEntry p{
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
}

.teikyoOc .someDayEntry .ttl + p{
  padding: 0 5px 5px;
}

@container (width >=600px) {
  .teikyoOc .route .nameDays {
    padding-bottom: 5px;
  }

  .teikyoOc .route .nameDays::before {
    content: '';
    z-index: 1;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(var(--tkBlue), 1);
  }

  .teikyoOc .route h4 {
    z-index: 2;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    border-bottom: none;
  }

  .teikyoOc .route .nameDays {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .teikyoOc .route .sde {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }

  .teikyoOc .route .sde p,
  .teikyoOc .route .sde .red{
    font-size: 1.3rem;
  }

  .teikyoOc .route .appBtn {
    margin: 0 0 0 auto;
    z-index: 2;
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }

  .teikyoOc .appBtn a {
    width: auto;
  }

  .teikyoOc .route .days {
    z-index: 2;
    grid-column: 4 / 5;
    grid-row: 1 / 2;
  }
}

@container (width >=700px) {
  .teikyoOc .route h4 {
    font-size: 3rem;
  }

  .teikyoOc .route .days {
    margin-top: -32px;
    gap: 10px;
  }

  .teikyoOc .route .days div {
    padding: 20px 3px 5px;
    font-size: 3.4rem;
    border-radius: 1rem;
  }

  .teikyoOc .route .days div::before,
  .teikyoOc .route .days div::after {
    bottom: calc(100% - 15px);
    width: 12px;
    height: 25px;
  }

  .teikyoOc .route .week {
    font-size: 2rem;
  }

  .teikyoOc .trips {
    justify-content: flex-start;
    padding: 40px 0 10px;
  }

  .teikyoOc .trips ol {
    position: relative;
    display: flex;
    gap: clamp(70px, 7vw, 100px);
  }

  .teikyoOc .trips ol li {
    min-width: 10rem;
    padding: 0 15px 15px;
  }

  .teikyoOc .trips .outward {
    margin: 0 auto 30px;
  }

  .teikyoOc .trips .outward ol {
    margin-right: 60px;
    padding: 0 50px 0 0;
  }

  .teikyoOc .trips .outward ol::before,
  .teikyoOc .trips .return ol::before {
    content: '';
    bottom: auto;
    top: 50%;
    right: -60px;
    width: 110px;
    height: auto;
    aspect-ratio: 160 / 83;
    background: url('../../../../img/page/LP/teikyo_oc/img_buillding.svg') center / contain no-repeat;
    transform: translate(0, -50%);
  }

  .teikyoOc .trips .return ol::before {
    right: inherit;
    left: -50px;
  }

  .teikyoOc .trips .return ol {
    margin-left: 60px;
    padding: 0 0 0 50px;
  }

  .teikyoOc .trips li {
    position: relative;
    padding: 0 15px;
    text-align: center;
  }

  .teikyoOc .trips li::before {
    content: '';
    top: 50%;
    left: 100%;
    width: 6vw;
    min-width: 60px;
    max-width: 80px;
    aspect-ratio: 1 / 1;
    background: url('../../../../img/page/LP/teikyo_oc/img_strat.svg') center / contain no-repeat;
    transform: translate(clamp(5px, 1vw, 10px), -50%);
  }

  .teikyoOc .trips li:last-child::before {
    content: none;
  }

  .teikyoOc .trips .time {
    margin: 0;
    font-size: 1.8rem;
    transform: translate(0, -50%);
  }

  .teikyoOc .trips .time::before {
    content: none;
  }

  .teikyoOc .trips .time span {
    margin-left: 0;
    padding: 0 5px;
    background: none;
  }

  .teikyoOc .trips .name {
    display: block;
    font-size: 1.8rem;
  }

  .teikyoOc .trips h6 {
    padding-bottom: 10px;
  }
}


/* section program detailes */
.teikyoOc .programDetailes {
  margin: 0 auto;
  padding: 0 var(--tkVP15) var(--tkVP90);
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.25) 25%, rgba(255, 255, 255, 0) 0) 0 0 / 8px 8px,
    radial-gradient(circle, rgba(255, 255, 255, 0.25) 25%, rgba(255, 255, 255, 0) 0) 4px 4px / 8px 8px,
    linear-gradient(to bottom, rgba(var(--tkAqua), 1) 0, rgba(var(--tkAqua), 1) 30px, rgba(255, 255, 255, 0) 30px, rgba(255, 255, 255, 0) 60%, rgba(var(--tkAqua), 1) 60%);
  container-type: inline-size;
}

.teikyoOc .programDetailes .inner {
  position: relative;
  margin: 0 auto;
  max-width: 1200px;
}

@container (width >=980px) {
  .teikyoOc .programDetailes .inner {
    background: url('../../../../img/page/LP/teikyo_oc/pic_girl_03.webp') right top / 259px auto no-repeat;
  }
}

.teikyoOc .programDetailes .txt {
  margin: 0 auto 15px;
  max-width: 1050px;
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.2;
  text-align: center;
}

.teikyoOc .programDetailes h4 {
  margin: 0 0 var(--tkVP5);
  font-size: 1.8rem;
  color: rgba(var(--tkBlue), 1);
}

.teikyoOc .programDetailes ol {
  margin: 0 auto var(--tkVP15);
  max-width: 950px;
}

.teikyoOc .programDetailes .other {
  margin: 0 auto;
  max-width: 1000px;
}

.teikyoOc .programDetailes ol li {
  counter-increment: countpro 1;
  position: relative;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.2));
}

.teikyoOc .programDetailes ol li::before {
  content: '';
  z-index: 2;
  top: calc(1.4em - 10px);
  left: calc(1.4em - 20px);
  width: 8px;
  height: 2px;
  background: rgba(var(--tkBlue), 1);
  font-size: 3rem;
  transform: rotate(50deg);
}

.teikyoOc .programDetailes ol li::after {
  content: counter(countpro);
  z-index: 3;
  top: 0;
  left: -10px;
  display: grid;
  place-content: center;
  width: 1.4em;
  height: 1.4em;
  font-size: 3rem;
  background: #fff;
  color: rgba(var(--tkBlue), 1);
  border: var(--tkBorder);
  border-radius: 50%;
  font-weight: bold;
  transform: translate(0, -5px);
}

.teikyoOc .programDetailes ol .inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 100px auto;
  align-items: center;
  gap: 5px 15px;
  margin: 0 auto var(--tkVP10);
  padding: var(--tkVP15);
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--tkVP15)), calc(100% - var(--tkVP15)) 100%, 0 100%);
  box-shadow: 0 0 0 2px rgba(var(--tkBlue), 1) inset;
}

.teikyoOc .programDetailes ol .inner::before {
  content: '';
  bottom: 0;
  right: 0;
  width: var(--tkVP15);
  height: var(--tkVP15);
  background: rgba(var(--tkBlue), 1);
  clip-path: polygon(0 0, 0% 100%, 100% 0);
}

.teikyoOc .programDetailes ol .right {
  grid-area: 1 / 2/ 2 / 3;
}

.teikyoOc .programDetailes ol p {
  line-height: 1.4;
}

.teikyoOc .programDetailes ol figure {
  grid-area: 1 / 1 / 2 / 2;
}

.teikyoOc .programDetailes .other {
  padding: var(--tkVP15);
  background: #fff;
}

.teikyoOc .programDetailes .other h4 {
  text-align: center;
}

.teikyoOc .programDetailes .other li {
  position: relative;
  display: inline;
  line-height: 1.4;
}

.teikyoOc .programDetailes .other li::after {
  position: relative;
  content: '／';
  width: 1em;
  height: 1em;
}

.teikyoOc .programDetailes .other li:last-child::after {
  content: none;
}

@container (width >=700px) {
  .teikyoOc .programDetailes ol .inner {
    grid-template-columns: 180px auto;
    gap: 5px 20px;
    padding: var(--tkVP15) var(--tkVP15) var(--tkVP15) 45px;
    box-shadow: 0 0 0 3px rgba(var(--tkBlue), 1) inset;
  }

  .teikyoOc .programDetailes ol li::before {
    top: calc(50% + 0.45em);
    left: calc(1.4em - 25px);
    width: 10px;
    height: 3px;
    transform: rotate(40deg);
  }

  .teikyoOc .programDetailes ol li::after {
    top: 50%;
    left: -15px;
    transform: translate(0, -50%);
  }
}

.teikyoOc .programDetailes .basStopImg {
  display: none;
}

@keyframes runRight {
  to {
    right: 35px;
  }
}

@container (width >=1050px) {
  .teikyoOc .programDetailes .basStopImg {
    display: block;
  }

  .teikyoOc .programDetailes .imgBusStop {
    left: auto;
    right: 0;
  }

  .teikyoOc .programDetailes .imgBus {
    left: auto;
    right: 100vw;
    transform: scale(-1, 1);
  }

  .teikyoOc .programDetailes .runningCar .imgBus {
    animation: runRight 6s 0s forwards 1 ease-out;
  }
}


/* section application method detailes */
.teikyoOc .appMethodDetailes {
  margin: 0 auto;
  padding: var(--tkVP60) var(--tkVP15) var(--tkVP90);
  container: inline-size;
}

.teikyoOc .appMethodDetailes .ocyoyaku {
  position: relative;
  margin: 0 auto var(--tkVP60);
  max-width: 1050px;
  counter-increment: amdcount 1;
}

.teikyoOc .ocyoyaku:first-child:before {
  content: '';
  bottom: 0;
  left: 50%;
  width: 60px;
  height: 30px;
  background: rgba(var(--tkBlue), 1);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  transform: translate(-50%, 50px);
}

.teikyoOc .appMethodDetailes hgroup {
  margin: 0 auto var(--tkVP15);
  text-align: center;
}

.teikyoOc .appMethodDetailes hgroup a{
  display: inline-block;
  margin: 0 auto;
}

.teikyoOc .appMethodDetailes h4 {
  position: relative;
  margin: 0 auto var(--tkVP15);
  padding: 0.5em 15px 0.5em 2.25em;
  width: fit-content;
  background: rgba(var(--tkBlue), 1);
  border-radius: 2em;
  font-size: 1.8rem;
  color: #fff;
}

.teikyoOc .appMethodDetailes h4::after {
  content: counter(amdcount);
  z-index: 3;
  top: 50%;
  left: 0;
  display: grid;
  place-content: center;
  width: 2em;
  height: 2em;
  font-size: 1.8rem;
  background: #fff;
  color: rgba(var(--tkBlue), 1);
  border: var(--tkBorder);
  border-radius: 50%;
  font-weight: bold;
  transform: translate(0, -50%);
}

.teikyoOc .appMethodDetailes .url {
  margin: 0 auto;
  width: fit-content;
  color: rgba(var(--tkBlue), 1);
  line-height: 1.2;
}

.teikyoOc .appMethodDetailes ol {
  display: grid;
  justify-content: center;
  gap: 15px;
  margin: 0 auto;
  width: 90%;
}

.teikyoOc .appMethodDetailes ol li {
  padding: 15px 15px 0;
  max-width: 300px;
  background: rgb(var(--naviGray));
  border-radius: 1.5rem;
}

.teikyoOc .appMethodDetailes ol h5 {
  margin: 0 auto 5px;
  font-size: 1.8rem;
  line-height: 1.2;
  text-align: center;
}

.teikyoOc .appMethodDetailes ol p {
  margin: 0 auto 5px;
  line-height: 1.4;
  text-align: center;
}


.teikyoOc .appMethodDetailes figure{
  text-align: center;
}

@container (width >=700px) {
  .teikyoOc .ocyoyaku::before {
    bottom: -70px;
    width: 80px;
    height: 40px;
  }

  .teikyoOc .appMethodDetailes ol {
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
  }
}


/* section school detailes */
.teikyoOc .schoolDetailes {
  position: relative;
  background: rgba(var(--tkBlue), 1);
  container: inline-size;
}

.teikyoOc .schoolDetailes .basStopImg{
  z-index: 2;
  top: -50px;
}

.teikyoOc .imgBus {
  position: absolute;
  top: 30px;
}

.teikyoOc .schoolDetailes .inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 100px auto;
  gap: 10px 15px;
  margin: 0 auto;
  padding: 30px var(--tkVP15);
  max-width: var(--outerWidth);
}

.teikyoOc .schoolDetailes * {
  color: #fff;
  line-height: 1.4;
}

.teikyoOc .schoolDetailes hgroup p {
  font-size: 1.8rem;
  font-weight: bold;
}

.teikyoOc .schoolDetailes h3 {
  font-size: 2.6rem;
}


.teikyoOc .schoolDetailes .address {
  grid-column: 1 / 3;
  padding: 10px;
  border: solid 1px #fff;
}

.teikyoOc .schoolDetailes .course {
  grid-column: 1 / 3;
}

@container (width >=700px) {
  .teikyoOc .schoolDetailes .inner {
    grid-template-columns: 250px auto;
    gap: 15px 20px;
  }

  .teikyoOc .schoolDetailes hgroup * {
    display: inline;
  }

  .teikyoOc .schoolDetailes figure {
    grid-row: 1 / 4;
  }

  .teikyoOc .schoolDetailes .address {
    grid-column: 2 / 3;
  }

  .teikyoOc .schoolDetailes .course {
    grid-column: 2 / 3;
  }
}

@container tkocBox (width >=700px) {
  .teikyoOc .outer *{
    --tkVP5: 10px;
    --tkVP10: 15px;
    --tkVP15: 30px;
    --tkVP30: 30px;
    --tkVP40: 60px;
    --tkVP60: 100px;
    --tkVP90: 120px;
    --tkBorder: solid 3px rgba(var(--tkBlue), 1);
  }
}

@container tkocBox (width >=700px) {
  .teikyoOc .blueTtl {
    padding: 15px 90px;
  }

  .teikyoOc .blueTtl .ttl {
    max-height: 3.5rem;
  }
}

@media (hover: hover) {

  .teikyoOc .appMethod ol li a,
  .teikyoOc .appMethod .inPageLink a::before ,
  .teikyoOc .appMethodDetailes hgroup a h4,
  .teikyoOc .checkRoute .inPageLinks a,
  .teikyoOc .checkRoute .inPageLinks a::before,
  .teikyoOc .checkRoute .inPageLinks a .left,
  .teikyoOc .appBtn a,
  .teikyoOc .freeBus .contact .mail a{
    transition: all 0.15s 0s ease-out;
  }

  .teikyoOc .appMethod ol a:hover {
    opacity: 1;
    transform: translate(0, 5px);
  }

  .teikyoOc .checkRoute .inPageLinks a:hover {
    opacity: 1;
    transform: translate(0, 5px);
  }

  .teikyoOc .checkRoute .inPageLinks a:hover::before {
    animation: jumpingKen 0.4s 0s forwards 1 ease-out;
  }

  .teikyoOc .checkRoute .inPageLinks a:hover .left {
    animation: jumpingNote 0.4s 0s forwards 1 ease-out;
  }


  .teikyoOc .appBtn a:hover {
    opacity: 1;
    transform: scale(1.15);
  }

  .teikyoOc .appBtn a:hover .icn{
    animation: carGotGot 0.25s 0s infinite linear;
  }

  .teikyoOc .freeBus .contact .mail a:hover {
    opacity: 1;
    color: rgba(var(--tkYellow), 1);
  }

  .teikyoOc .appMethodDetailes hgroup a:hover{
    opacity: 1;
  }

  .teikyoOc .appMethodDetailes hgroup a:hover h4{
    transform: scale(1.1, 1.1);
  }
}

@keyframes carGotGot {
  0% {
    background-position-y: calc(50% + 2px);
  }

  100% {
    background-position-y: calc(50% - 1px);
  }
}

@keyframes jumpingNote {
  0% {
    transform: translate(0, -40%);
  }
  50% {
    transform: translate(0, calc(calc(40% + 5px) * -1));
  }
  70% {
    transform: translate(0, calc(calc(40% + 30px) * -1));
  }
  90% {
    transform: translate(0, calc(calc(40% + 5px) * -1));
  }
  100% {
    transform: translate(0, -40%);
  }
}

@keyframes jumpingKen {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(0, 5px);
  }
  70% {
    transform: translate(0, -30px);
  }
  90% {
    transform: translate(0, 5px);
  }
  100% {
    transform: translate(0);
  }
}

/* common animation */
.teikyoOc .hazumu.hasAnime {
  transform-origin: center;
  transform: scale(0.6);
  opacity: 0;
}

.teikyoOc .hazumu.hasAnime.playAmime {
  animation: hazumuAnime 0.75s 0s forwards 1 ease-out;
}

@keyframes hazumuAnime {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }

  60% {
    transform: scale(1.1);
  }

  80% {
    transform: scale(0.95);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* common slide in animation */
.teikyoOc .hasAnime h2 {
  transform-origin: center;
  transform: translate(100vw, 0);
}

.teikyoOc .hasAnime h3 {
  transform-origin: center;
  transform: translate(-100vw, 0);
}

.teikyoOc .hasAnime .picBus,
.teikyoOc .hasAnime .picGirl {
  transform: translate(0, 100%);
}

.teikyoOc .programDetailes ol li {
  opacity: 0;
}

.teikyoOc .hasAnime.playAmime h2 {
  animation: slideInRight 0.6s 0.75s forwards 1 ease-out;
}

.teikyoOc .hasAnime.playAmime h3 {
  animation: slideInLeft 0.6s 1.6s forwards 1 ease-out;
}

.teikyoOc .hasAnime.playAmime .picBus,
.teikyoOc .hasAnime.playAmime .picGirl {
  animation: jumpingIn 0.6s 2.75s forwards 1 ease-out;
}

@keyframes jumpingIn {
  0% {
    transform: translate(0, 150%);
  }

  60% {
    transform: translate(0, -20%);
  }

  80% {
    transform: translate(0, 10%);
  }

  100% {
    transform: translate(0);
  }
}

.teikyoOc .programDetailes ol li.playAmime:nth-child(odd) {
  animation: slideInLeft 0.75s 0s forwards 1 ease-out;
}

.teikyoOc .programDetailes ol li.playAmime:nth-child(even) {
  animation: slideInRight 0.75s 0s forwards 1 ease-out;
}

@keyframes slideInLeft {
  0% {
    opacity: 1;
    transform: translate(-100vw, 0);
  }

  60% {
    transform: translate(50px, 0);
  }

  80% {
    transform: translate(-50px, 0);
  }

  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@keyframes slideInRight {
  0% {
    opacity: 1;
    transform: translate(100vw, 0);
  }

  60% {
    transform: translate(-50px, 0);
  }

  80% {
    transform: translate(50px, 0);
  }

  100% {
    opacity: 1;
    transform: translate(0);
  }
}