@charset "UTF-8";

:root {
  --shape-triangle-left: polygon(0 50%, 100% 0, 100% 100%);
}

#opc-2025 {
  letter-spacing: 0.1rem;
}
h2 {
  color: var(--text-color-02);
  font-size: 2rem;
  font-weight: 400;
}
.container {
  max-width: 1000px;
}
.container-flex {
  display: flex;
}

#opc-top{
  background-color: #F9EFEE;
}
.opc-top {
  padding-top: 100px;
  color: var(--primary-color-01);
  border-bottom: 2px solid;

  & h1 {
    max-width: 100%;
    margin-inline: auto;
  }
  & ul {
    padding: 10px 10px 6px;
    background-color: #fff;
    border: 1px solid;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    text-align: center;
    max-width: 1000px;
    margin: 1px auto -1px;
    border-radius: 20px 20px 0 0;
  }
  & li {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
  }
  & li:nth-child(-n + 4) {
    border-bottom: 1px solid;
  }
  & li:nth-child(-n + 3),
  li:nth-child(n + 5):nth-child(-n + 7) {
    border-right: 1px solid;
  }
  & a {
    color: var(--primary-color-01);
  }
  & p {
    max-width: 1000px;
    font-weight: 900;
    margin: 5px auto;
  }
  & span {
    font-size: 0.8rem;
  }
}

#opc-point {
  padding-bottom: 20px;
  background-color: #F9EFEE;
}
#opc-point .w-backttl {
  background-color: #ffffffc4;
  padding: 0 0 30px 0;
}
.opcpoint-ttl {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 53px 0 20px;

  & span {
    font-size: 1rem;
  }
  & h2 {
    margin: 0;
    line-height: 2rem;
  }
  & p {
    margin: 0;
    font-size: 0.9rem;
  }
}
.opcpoint-group {
  padding-top: 7vw;

  & ul {
    padding: 0;
    display: flex;
    justify-content: space-evenly;
    gap: 1vw;
  }
  & li {
    background-color: #fff;
    position: relative;
    padding: 1vw;
    text-align: center;
  }
  .point-no {
    position: absolute;
    left: 0;
    top: -17%;
    width: 34%;
  }
  & p {
    font-size: 1.5rem;
    letter-spacing: 0.1rem;
    z-index: 1;
    position: relative;
    -webkit-text-stroke: 3px #fff;
    text-stroke: 3px #fff;
    paint-order: stroke;
    margin: 10px 0;
  }
  & span {
    font-size: 0.9rem;
  }
}
.opcpoint-bottom {
  position: relative;
  margin: 50px auto 3px;
  padding: 0 112px;
  text-align: center;
  width: fit-content;

  & p {
    margin: 5px auto;
    letter-spacing: 0.1rem;
  }
  .text01 {
    color: #db6687;
  }
  .text-g {
    font-size: 1.4rem;
  }
}
.opcpoint-bottom:before,
.opcpoint-bottom:after {
  content: "";
  position: absolute;
  top: 53%;
  display: inline-block;
  width: 115px;
  height: 2px;
  background-color: #db6687;
}
.opcpoint-bottom:before {
  left: 0;
  transform: rotate(52deg);
}
.opcpoint-bottom:after {
  right: 0;
  transform: rotate(-52deg);
}

#opc-schedule {
  background-color: #A3A3A3;
  padding: 60px 0;

  & h2 {
    color: #fff;
    font-weight: 300;
    margin: 0;
  }
  .text-b {
    font-size: 1.4rem;
    margin: 0;
  }
}
.text-b.white{
  color: white;
}
.opcschedule-ttl {
  background-color: white;
  padding-top: 10px;
  padding-bottom: 10px;

  .container-flex {
    justify-content: space-between;
    text-align: center;
    width: 50%;
    margin-left: auto;
    margin-bottom: 5px;

    & p {
      border-left: 5px solid;
      padding: 10px 20px 5px 20px;
      font-size: 1.3rem;
      margin: 0;
    }
  }
  .sche-eisei {
    color: #CC99B9;
    font-weight: 600;
  }
  .sche-gishi {
    color: #33B482;
    font-weight: 600;
  }
  .text-s {
    font-size: 0.8rem;
    width: 50%;
    margin: 0 0 0 auto;
  }
}
ul.opc-schedule-cantainer {
    margin: 1em 0 0 0;
}
.opc-schedule-cantainer {


   & li img{
    width: 76%;
   }

}
.e_jishu_label{
  background-color: #CC99B9;
  color: white;
}
.opcdate {
  position: relative;
  color: var(--text-color-01);
  display: flex;
  justify-content: space-between;
  width: 100px;
  height: 90px;
  background-image: linear-gradient(
    to left top,
    transparent 47%,
    #3b9175 50%,
    #3b9175 51%,
    transparent 51%
  );
      margin-bottom: 5%;

  & p {
    position: absolute;
    line-height: 2.4rem;
    margin: 0;
    -webkit-text-stroke: 3px var(--primary-color-01);
    text-stroke: 3px var(--primary-color-01);
    paint-order: stroke;
  }
  .day {
    left: 14%;
    font-size: 1.9rem;
  }
  .month {
    bottom: 0%;
    right: -29%;
    font-size: 1.9rem;
  }
}
.opcweekday {
  color: var(--text-color-02);
  font-size: 1.5rem;
  margin-top: auto;
  margin-bottom: 5%;
  font-weight: 600;
}
/*スケジュール*/
.opc-schedule-cantainer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5vw;
  list-style: none;
  padding: 0;
  margin: 0;
}

.opc-schedule-cantainer li {
  border: 1px solid #ccc;
  border-radius: 0;
    padding: 0.5vw 1vw;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 140px;
  text-align: center;
  margin-bottom: 0;
}

.opcdate p {
  margin: 0;
  color: ##333333;
}

.opcdate .slash {

}

.opcweekday {
  font-size: 1rem;
  color: #333333;
  margin-left: 0.3em;
}

.with-label {
  align-items: flex-start;
}

.with-label .opcdate {
  justify-content: flex-start;
}

.label {
  padding: 0.3em 0.5em;
  font-size: 0.85rem;
  line-height: 1.4;
  color: white;
  border-radius: 0;
  width: 100%;
  text-align: left;
  margin-block-start: 0;
  margin-block-end: 0.3em;
}

.label-purple {
  background-color: #CC99B9;
      text-align: center;
}

.label-green {
  background-color: #33B482;
      text-align: center;
}
/* 特殊な最終枠（イラスト） */
.opc-schedule-cantainer li:last-child {
  background: no-repeat url(../img/opc/pict_man.svg);
  background-size: 40%;
  background-position: 100% 100%;
  background-color: white;
  color: #3B9175;
    font-size: 1.2rem;
    justify-content: center;
    align-items: center;
    font-weight: 600;
  }

.opc-entry {
  background-image: linear-gradient(
    90deg,
    rgba(244, 178, 193, 1),
    rgba(249, 230, 204, 1) 50%,
    rgba(245, 178, 196, 1)
  );
  clip-path: polygon(0 0, 95% 0%, 100% 20%, 100% 100%, 5% 100%, 0% 80%);
  max-width: 635px;
  margin: 50px auto 0;
  padding: 10px 0 35px;
  color: var(--text-color-01);
  justify-content: center !important;
  gap: 1vw;
  text-align: center;
  align-items: cente !important;
  font-size: 1.2rem;

  & img {
    width: 22%;
    padding-top: 1vw;
  }
}
.opcentry-btn {
  gap: 2vw;

  .opc-btn {
    border: 2px solid #cc99b9;
    border-radius: 13px;
  }
  & a {
    color: #333333;
    padding: 10px 17px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: no-repeat url(../img/common/icon_arrow-w.svg);
    background-size: 13px;
    background-position: 95%;
  }
  .sche-eisei {
    background-color: #fff;
  }
  .sche-gishi {
    background-color: #66bd99;
  }
  & span {
    font-size: 0.9rem;
    display: block;
  }
}
/*実習*/
#opc-program {
  background-color: #ffffe1;
  text-align: center;
  padding-bottom: 5%;

  .check {
    padding: 100px 50px;
  }

}
.jishu_pic_corner{
  display: flex;
}
.jishu_pic_eisei{
  width: 50%;
}
.ji_ei_1{
  padding-top: 42px;
}
.ji_ei_2{}
.ji_ei_3{}
.ji_ei_1 img{
  display: block; 
  width: 80%;
  height: auto;
}
.ji_ei_2 img{
  display: block; 
    width: 100%;
    margin: 3vh 0;
}
.ji_ei_3 img{
  display: block; 
  width: 97%;
}
.ji_ei_1_mask{
-webkit-mask-image: url(../img/opc/202507/img_pro03-1_mask.png);
  mask-image: url(../img/opc/202507/img_pro03-1_mask.png);
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.ji_ei_2_mask{
-webkit-mask-image: url(../img/opc/202507/img_pro03-3-2_mask.png);
  mask-image: url(../img/opc/202507/img_pro03-3-2_mask.png);
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.ji_ei_5_mask{
-webkit-mask-image: url(../img/opc/202507/img_pro03-5_mask.png);
  mask-image: url(../img/opc/202507/img_pro03-5_mask.png);
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}


.jishu_pic_gikoushi{
  width: 50%;
}
.ji_gi_1{
  padding-top: 45px;
}
.ji_gi_2{
  padding-left: 40px;
  padding-top: 38px;
}
.ji_gi_3{}
.ji_gi_4{
  padding-top: 18px;
  padding-left: 56px;
  padding-right: 70px;
}
.ji_gi_1 img{
  display: block; 
  width: 100%;
}
.ji_gi_2 img{
  display: block; 
  width: 80%;
}
.ji_gi_3 img{
  display: block; 
  width: 92%;
}
.ji_gi_4 img{
    display: block; 
  width: 100%;
}
.ji_gi_3_mask{
-webkit-mask-image: url(../img/opc/202507/img_pro03-2_mask.png);
  mask-image: url(../img/opc/202507/img_pro03-2_mask.png);
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.ji_gi_4_mask{
-webkit-mask-image: url(../img/opc/202507/img_pro03-4_mask.png);
  mask-image: url(../img/opc/202507/img_pro03-4_mask.png);
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.ji_gi_6_mask{
-webkit-mask-image: url(../img/opc/202507/img_pro03-6_mask.png);
  mask-image: url(../img/opc/202507/img_pro03-6_mask.png);
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.ji_gi_7_mask{
-webkit-mask-image: url(../img/opc/202507/img_pro03-7_mask.png);
  mask-image: url(../img/opc/202507/img_pro03-7_mask.png);
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/*タイムスケジュール*/
.sc-title{
  width: 30%;
  margin: 4% auto;
}
.sc-title img{}
.timeline-container {
  position: relative;
  font-family: sans-serif;
  max-width: 535px;
  margin: 0px auto;
  padding: 20px 20px 20px 20px;
}

.timeline-title {
  background-color: #B76699;
  color: #fff;
  text-align: left;
  width: fit-content;
  padding: 6px 15px;
  font-size: 1.4rem;
}
.timeline-title_green {
  background-color: #3B9175;
  color: #fff;
  text-align: left;
  width: fit-content;
  padding: 6px 15px;
  font-size: 1.4rem;
}

.timeline-line {
  position: absolute;
  top: 83px;
  bottom: 0;
  left: 140px; /* ← 時間の右側に配置 */
  width: 3px;
  background-color: #B76699;
}
.timeline-line_gray {
  position: absolute;
  top: 98px;
  bottom: 98px;
  left: 140px; /* ← 時間の右側に配置 */
  width: 3px;
  background-color: #A5A5A5;
}
.timeline-line_green {
  position: absolute;
  top: 84px;
  bottom: 218px;
  left: 140px; /* ← 時間の右側に配置 */
  width: 3px;
  background-color: #3B9175;
}

.timeline-content {
  margin-top: 20px;
}

.timeline-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px;
  position: relative;
}

.time {
  width: 120px;
  color: #B76699;
  font-size: 1.3rem;
  text-align: right;
  padding-right: 20px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.time_black{
    width: 120px;
  color: #333333;
  font-size: 1.3rem;
  text-align: right;
  padding-right: 20px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.time_green{
    width: 120px;
  color: #3B9175;
  font-size: 1.3rem;
  text-align: right;
  padding-right: 20px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.content {
    padding-left: 32px;
    flex: 1;
    font-size: 1.3rem;
    line-height: 1.6;
    text-align: left;
    font-weight: 600;
}

.note {
  font-size: 0.8rem;
}
.dotted-line {
  border-top: 3px dotted #555; /* 線の色と太さを調整 */
  width: 100%;                 /* 必要に応じて例: 80%などに変更可 */
  margin: 40px 0;              /* 上下の余白 */
}
.message-image {
  margin-top: 20%;
}

.message-image img {
  max-width: 100%;
  object-fit: contain;
}
/*SNS　Instagram*/
div#ig-image {
    color: #db6687;
    font-size: 20px;
}
#sns_insta{
 padding: 5vh 5vw;
}
div#sb_instagram {
    margin-top: 4%;
}
.program-ttl {
  width: 35%;
}
.programcontainer01 {
  position: relative;
  justify-content: space-between;

  .pro-img {
    width: 45%;
  }
  .pro-text {
    position: absolute;
    width: 21%;
    left: 33%;
    top: 12%;
  }
}
.programcontainer02 {
  margin: 1vw auto 0;

  .pro-text {
    width: 50%;
  }
  .pro-img img {
    width: 100%;
    object-fit: cover;
    display: block;
  }
}
.programcontainer03 img {
  width: 70%;
}
.programcontainer04 {
  position: relative;

  .pro-img {
    width: 60%;
  }
  .pro-img02 {
    width: 40%;
    margin-top: auto;
  }
}
.pro-textend {
  width: 10%;
  display: block;
  margin-left: auto;
}

#opc-tour {
  background: no-repeat url(../img/opc/bg_tour.svg);
  background-size: cover;
  padding: 150px 0;

  & h2 {
    padding: 0;
  }
}
.opc-slideshow-container {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  position: relative;
  overflow: hidden;
}
.opc-slideshow {
  padding: 30px 60px;
  background: no-repeat url(../img/opc/back_tour.png);
  background-size: 100%;
}
.opc-slide {
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  display: none;
  padding-top: 5%;

  & img {
    width: 65%;
    height: 100%;
    border: solid 4px #997a83;
    outline: solid 5px #b399a6;
    margin: 6px;
  }
}
.opc-slide.active {
  opacity: 1;
  display: flex;
  gap: 30px;
}
.opcslide-content {
  padding: 40px 20px 40px;
  background: rgba(255, 255, 255, 0.3);
}
.opcslide-name {
  font-size: 1.5rem;
  text-align: center;
}
.opc-slide-nav {
  position: absolute;
  top: 50%;
  background: no-repeat url(../img/opc/icon_tour_arrow.svg);
  width: 25px;
  aspect-ratio: 1;
  transform: translateY(-50%);
  border: none;
  cursor: pointer;
  z-index: 1;
}
.opc-slide-nav:hover {
  opacity: 0.5;
}
.opcprev {
  left: 10px;
  transform: rotate(180deg);
}
.opcnext {
  right: 10px;
}

#opc-voice {
  background-color:#f9efeeb5;
  padding: 50px 0;

  .container-flex {
    justify-content: space-between;
    align-items: end;
  }
}
.opcvoice-group {
  padding: 0;
  margin: 1vw auto;
  max-width: 900px;

  & li {
    display: flex;
    gap: 1vw;
    justify-content: center;
    margin: 7vh auto;
  }
}
.opcvoice-img {
  text-align: center;
  font-size: 0.9rem;
  width: 30%;
}
.opcvoice-img img {
  width: 60%;
  margin-block-end: -1em;
}
.opcvoice-text {
  background-color: #fff;
  width: 100%;
  overflow-wrap: break-word;
  position: relative;
  padding: 2vw 3vw;
  border-radius: 25px;

  & span {
    font-weight: 600;
  }
  &::after {
    --_size: 25px;
    position: absolute;
    content: "";
  }
}
[data-position="left"]::after {
  inline-size: calc(var(--_size) / 2 * tan(60deg));
  block-size: var(--_size);
  inset-block: 0;
  inset-inline-end: 100%;
  margin-block: auto;
  clip-path: var(--shape-triangle-left);
  background-color: inherit;
}

#opc-date {
  background-color: #fff;
  text-align: center;
  padding: 100px 0;

  .topdate-container {
    max-width: 1200px;
    margin-inline: auto;
  }
}
.opc-date-ttl {
  grid-column: auto;
  text-align: left;
  display: flex;
  flex-direction: column;

  & h2 {
    margin: 0;
    font-size: 2.2rem;
    letter-spacing: 0.5rem;
  }
  & p {
    color: var(--text-color-01);
    font-size: 1rem;
    font-weight: 300;
  }
  .text-s {
    margin-top: auto;
  }
}
.topdate01 {
  /*grid-column: auto;*/
}

.opc-icatch {
  margin-top: 5%;
}
.opc-entry02 {
  margin: 0 auto 50px;
  background-color: #ffffe1;
  background-image: none;
  max-width: 900px;
}

.opc-Essential {
  background-color: #dff1dd;

  .w-backttl {
    padding: 50px 0;
  }
  .toppoint-ttl {
    padding: 50px 0;

    & h2 {
      color: var(--text-color-01);
      font-size: 2rem;
    }
  }
}
.opcsenior-ttl {
  text-align: center;
  padding: 50px 0 10px;
  background-color: #fff;

  & h2 {
    margin: 5px;
  }
  & p {
    margin: 0;
  }
}
.opcsenior {
  padding: 4vw 5vw;
  margin: 0 auto;
  max-width: 1200px;
}

#opc-faq {
  background-color:#F9EFEE;
.w-backttl {
    padding: 100px 0 0;

    & h2 {
      margin: 0;
      font-weight: normal;
    }
    & span {
      font-size: 2.4rem;
      letter-spacing: 0.15em;
      display: block;
    }
  }
}
.opcfaq-group {
  padding: 50px 0;
  max-width: 900px;

  & li {
    margin: 2vw auto;
  }
  .opc-q {
    color: var(--primary-color-01);
    font-size: 1.3rem;
    font-weight: 600;
  }
  .opc-a {
    font-size: 1.1rem;
    background-color: #fff;
    margin-left: 1rem;
    padding: 1vw 2vw;
    clip-path: polygon(0 0, 98% 0%, 100% 20%, 100% 100%, 0% 100%, 0% 100%);
  }
}

#opc-access {
  background-color: #fff;
  padding: 50px 0;

  & h2 {
    margin: 0;
  }
}
.opcaccess-bus {
  border-top: 1px solid #ffabb5;
  border-bottom: 1px solid #ffabb5;
  padding: 2vw 0;
  margin: 1vw 0;
  width: 80%;

  & span {
    color: #cc668a;
    display: block;
    font-size: 1.3rem;
  }
  & p {
    font-weight: 500;
    margin: 1vw 0 0;
    font-size: 1.1rem;
  }
}
.opcaccess-text {
  line-height: 1.9rem;

  & p {
    margin: 0;
  }
  & span {
    color: var(--text-color-01);
  }
  .text-g {
    font-weight: 500;
  }
  & a {
    color: var(--primary-color-01);
  }
  .text-s {
    font-size: 0.9rem;
  }
}

/*SPサイズ*/
@media screen and (max-width: 767px) {
  .container {
    padding: 2vw 0;
  }
  .opc-top {
    padding-top: 10vh;

    & p {
      width: 90%;
      font-size: 1rem;
    }
    & span {
      font-size: 0.7rem;
    }
    & ul {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(4, 1fr);
      width: 90%;
    }
    & li:nth-child(-n + 6) {
      border-bottom: 1px solid;
    }
    & li:nth-child(odd) {
      border-right: 1px solid;
    }
    & li:nth-child(even) {
      border-right: none;
    }
    & li:nth-child(6) {
      border-right: none !important;
    }
  }
  #opc-point {
    padding-bottom: 1vh;
  }
  .opcpoint-ttl {
    flex-direction: column-reverse;
    padding: 7vw 0 4vw;
    width: 90%;
    align-items: inherit;

    & p {
      font-size: 0.8rem;
      margin-top: 7vw;
    }
    & h2 {
      margin: 0;
      margin-left: auto;
    }
  }
  .opcpoint-group {
    padding-top: 4vh;
    padding-right: 2vh;
    width: 90%;

    & ul {
      flex-direction: column;
      gap: 3vw;
    }
    & li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 3vw;
      gap: 2vw;
    }
    & p {
      font-size: 1.2rem;
    }
    .point-no {
      width: 50%;
      position: revert;
    }
    .opcpoint-img {
      width: 60%;
      height: 100%;
    }
  }
  .opcpoint-bottom {
    margin: 5vh auto 2vh;
    padding: 0;
    width: 95%;

    .text01 {
      font-size: 1.1rem;
    }
    .text-g {
      font-size: 1rem;
    }
  }
  .opcpoint-bottom:before,
  .opcpoint-bottom:after {
    top: 5%;
    width: 20vw;
  }
  .opcpoint-bottom:before {
    transform: rotate(70deg);
    transform-origin: left;
  }
  .opcpoint-bottom:after {
    transform: rotate(-70deg);
    transform-origin: right;
  }
  /*スケジュール*/
#opc-schedule {
  padding: 0vh 0 6vh;
}

#opc-schedule .text-b {
  padding-left: 5vw;
}

#opc-schedule h2 {
  padding-left: 5vw;
  font-size: 2.2rem;
  line-height: 2rem;
}

.opcschedule-ttl {
  margin-top: 3vh;
  padding-top: 13px;
  padding-bottom: 8px;
}

.opcschedule-ttl .container-flex {
  width: 100%;
  justify-content: space-around;
  margin-bottom: 5vw;
}

.opcschedule-ttl .container-flex p {
  padding: 1%;
  font-size: 1rem;
  text-align: left;
}

.opcschedule-ttl .text-s {
  width: 97%;
  padding-bottom: 2%;
}

.opc-schedule-cantainer {
    grid-template-columns: repeat(3, 1fr);
}
.opc-schedule-cantainer li {
    border: 1px solid #ccc;
    border-radius: 0;
    padding: 3vw 1vw 2vw;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 140px;
    text-align: center;
    margin-bottom: 0;
}
   .opcdate .day {
        left: 22%;
        font-size: 1.5rem;
        top: 6%;
    }
   .opcdate .month {
        bottom: 0%;
        right: -9%;
        font-size: 1.4rem;
    }
    .label{
    width: 91%;
    font-size: 0.8rem;
  }
  .jishu_pic_corner {
    display: unset;
}
.jishu_pic_eisei {
    width: 100%;
}
.ji_ei_2 {
    padding-left: 14px;
    padding-right: 14px;
  }
  .ji_ei_3 {
    margin-top: 15px;
    padding-left: 14px;
    padding-right: 14px;
  }
.ji_ei_1 img {
    display: unset;
    width: 93%;
  }
  .ji_ei_2 img {
    display: unset;
    width: 100%;x;
  }
  .ji_ei_3 img{
    width: 100%;
  }
.jishu_pic_gikoushi {
    width: 100%;
}
.ji_gi_1 {
    margin-top: 40px;
}
.ji_gi_2 {
    margin-top: 18px;
}
.ji_gi_3 {
    dmargin-top: 18px;
    padding-left: 14px;
    padding-right: 14px;
}
.ji_gi_4 {
    margin-top: 30px;
    padding-left: 14px;
    padding-right: 14px
}

.ji_gi_1 img {
    display: unset;
    width: 100%;
}
.ji_gi_2 img {
    display: unset;
    width: 92%;
}
.ji_gi_3 img {
    display: unset;
    width: 100%;
}
.ji_gi_4 img{
    display: unset;
    width: 100%;;
}

  .opcweekday {
    font-size: 0.8rem;
    margin-bottom: 0;
  }
  .opc-entry {
    clip-path: unset;
    width: 100%;
  }
  .opcentry-btn {
    gap: 5vw;
    & a {
      padding: 2vw 5vw;
      border-radius: 10px;
      background-size: 10px;
      font-size: 0.9rem;
      color: black;
    }
    & span {
      font-size: 0.7rem;
      display: block;
    }
  }

 .opcentry-btn {
    .sche-eisei {
        background-color: #fff;
    }
}

.opcentry-btn {
    .opc-btn {
        border: 2px solid #CC99B9;
        border-radius: 13px;
        margin: auto;
    }
}
  /**/
  #opc-program {
    font-size: 0.7rem;

    .check {
      padding: 6vh 0;
      width: 94%;
      background-size: 13px 13px;
    }
  }
  .program-ttl {
    width: 70%;
  }
  .programcontainer01 {
    display: block;
    text-align: left;

    .pro-img {
      width: 65%;
    }
    .pro-text {
      width: 45%;
      left: 50%;
      top: -24%;
    }
    .pro-img02 {
      margin-left: auto;
      display: block;
    }
  }
  .message-image {
    width: 80%;
    margin: auto;
  }
  .programcontainer02 {
    margin: 8vw auto 0;

    .pro-text {
      width: 87%;
    }
  }
  .programcontainer03 img {
    width: 100%;
  }
  .programcontainer04 {
    display: block;
    text-align: left;

    .pro-img {
      width: 100%;
      margin-inline: auto;
      display: unset;
    }
    .pro-img02 {
      width: 65%;
    }
  }
  .pro-textend {
    width: 17%;
    padding-right: 6vw;
  }
.sc-title {
    width: 60%;
    margin-top: 13%;
  }
.timeline-container {
    padding: 0 2% 0 4%;
}
  .timeline-title,
  .timeline-title_green  {
    padding: 6px;
    font-size: 1.2rem;
  }
  .time,
  .time_black,
  .time_green  {
    width: 20%;
    font-size: 1rem;
  }
.timeline-line{
    top: 14%;
    left: 25%;
  }
.timeline-line_gray{
    top: 24%;
    left: 25%;
}
.timeline-line_green{
    top: 9%;
    left: 25%;
    bottom: 25%;
  }
  .content {
    padding-left: 8%;
    font-size: 1rem;
    line-height: 1.4;
  }
.timeline-line_gray {
    top: 26px;
    left: 25%;
    bottom: 16%;
}
.dotted-line {
    margin: 9% 0;
}
#sns_insta {
  padding: 0vh 0px 5vw;
}
  #opc-tour {
    background: no-repeat url(../img/opc/bg_tour_sp.svg);
    padding: 4vh 0;
    background-position: 100%;

    & h2 {
      font-size: 1.4rem;
      text-align: center;
      margin-bottom: 1vh;
    }
  }
  .opc-slideshow {
    padding: 6vw 0;
    background: no-repeat url(../img/opc/back_tour_sp.png);
    background-size: cover;
  }
  .opc-slide.active {
    flex-direction: column;
    gap: 3vw;
  }
  .opc-slide {
    padding-top: 8%;

    & img {
      width: 68%;
      margin: 0 auto;
    }
  }
  .opcslide-content {
    padding: 1vw 3vw;
    width: 67%;
    margin-inline: auto;
    font-size: 0.8rem;

    & p {
      margin: 0;
      line-height: 1.1rem;
    }
  }
  .opcslide-name {
    font-size: 1rem;
    margin: 0;
    text-align: left;
  }
  .opctour-bottom {
    width: 90%;
  }

  #opc-voice {
    padding: 5vh 5vw;

    .container-flex {
      & h2 {
        margin: 0;
      }
    }
  }
  .opcvoice-group {
    margin: 0vh auto;
    padding: 0;

    & li {
      margin: 4vh auto;
    }
  }
  .opcvoice-img img {
    width: 100%;
  }
  .opcvoice-img {
    font-size: 0.6rem;
    width: 23%;
  }
  .opcvoice-text {
    width: 53%;
    padding: 6vw 7vw;
    line-height: 1rem;

    & span {
      font-size: 0.8rem;
    }
    & p {
      font-size: 0.7rem;
      margin: 3vw 0;
    }
    &::after {
      --_size: 12px;
    }
  }
  [data-position="left"]::after {
    margin-top: 10vw;
  }
  details[open] summary {
    display: none;
  }
  summary {
    color: var(--primary-color-01);
    list-style: none;
    cursor: pointer;
    text-align: center;
    background-color: var(--bg-color-01);
    margin: 3px 53px 1px;
    padding: 3px;
  }
  summary::-webkit-details-marker {
    display: none;
  }

  #opc-date {
    padding: 6vh 5% 9vh;
  }
  .topdate-container {
    grid-template-rows: 15% 20% repeat(2, 1fr) 17% 16%;
  }
  .opc-date-ttl {
    grid-column: span 2 / span 2;
    text-align: center;

    & h2 {
      font-size: 1.7rem;
      letter-spacing: 0.1rem;
    }
    .text-s {
      margin-top: 4vw;
    }
  }
  .topdate01 {
    grid-column: span 2 / span 2;
    grid-row-start: 2;
  }

  .topdate02 {
    grid-row-start: 3;
  }
  .topdate03 {
    grid-row-start: 4;
  }
  .topdate04 {
    grid-row-start: 5;
  }
  .topdate05 {
    grid-row-start: 5;
  }
  .topdate06 {
    grid-row-start: 6;
  }
  .topdate07 {
    grid-row-start: 6;
  }

  .opc-icatch {
    width: 100%;
    margin-inline: auto;
    margin-top: 39%;
  }
  .opc-entry02 {
    margin: 0 auto 4vh;
  }

  .opc-Essential {
    text-align: center;

    .w-backttl {
      padding: 4vh 0 2vh;
      text-align: center;

      & h2 {
        margin: 1vw auto;
      }
    }
    .toppoint-ttl {
      padding: 1vh 0 0;

      & h2 {
        font-size: 1.3rem;
        line-height: 2.1rem;
      }
      & span {
        font-size: 1.3rem;
      }
    }
  }
  .toppoint-group {
    width: 90%;
    margin: 5vh auto;

    & p {
      margin: 2vh auto;
      font-size: 1.1rem;
    }
  }
  .opcsenior-ttl {
    padding: 4vh 0 3vw;

    & h2 {
      margin: 1vw;
      font-size: 1.5rem;
    }
    & p {
      font-size: 0.8rem;
    }
  }
  .opcsenior {
    padding: 5vh 5vw;
  }
  #opc-faq {
    padding-bottom: 5vh;

    .w-backttl {
      padding: 8vh 0 0;
      background-color: revert;
      text-align: center;

      & span {
        font-size: 1.3rem;
      }
    }
  }
  .opcfaq-group {
    padding: 0 4vw;

    & li {
      margin: 3vh auto;
    }
    .opc-q {
      font-size: 1rem;
      margin: 0;
    }
    .opc-a {
      margin: 2vw 0;
      padding: 3vw 5vw;
      font-size: 0.8rem;
    }
  }
  #opc-access {
    padding: 5vh 5vw;
  }
  .opcaccess-bus {
    padding: 4vw 0;
    margin: 3vh 0;
    width: 90%;

    & span {
      font-size: 1.1rem;
    }
    & p {
      margin: 2vw 0 0;
      font-size: 0.9rem;
    }
  }
  .opcaccess-text {
    line-height: 1.5rem;
    font-weight: 300;

    & span {
      font-size: 0.8rem;
      display: block;
    }
    .text-s {
      font-size: 0.7rem;
    }
  }
}