/* ============================================
     3. ここから下に自分のスタイルを書いていく
     ============================================ */
html{
   scroll-behavior: smooth;
}

main{
   background-color: #f0e9d7;
}
main a{
   cursor: pointer;
}
.line{
   border-bottom: 1px solid var(--clr-blue);
   margin: 0 2.5px;
   color: var(--clr-blue);
}
.yesterday a{
   transition: all 0.2s ease;
}
.yesterday a:hover{
   transform: translateY(3px);
   text-shadow: 0 0 1px;
}
.underline{
   border-bottom: 1px solid var(--clr-text);
   margin: 0 2.5px;
   color: var(--clr-text);
   font-weight: bold;
}
.title-pin{
   margin: 0 auto;
}

.title{
   margin-bottom: 50px;
}
.plan{
   margin: 0 auto;
   width: 85%;
}
.fix{
   position: relative;
   width: 100%;
   max-width: 700px;
   margin: 0 auto;
}

.sunday{
   color: #ca6621;
}

.saturday{
   color: #007075;
}




.marks{
   font-size: clamp(12px, 2vw, 16px);
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    gap: 10px;
    text-align: justify;
    margin-top: 20px;
    max-width: 700px;
    width: 85%;
}
.star::before{
   content: "";
   position: absolute;
   width: 15px;
   height: 15px;
   left: -20px;
   top: 2px;
   background-image: url(https://ikkyosai.com/shinkan/57/img/event/star.svg);
   background-size: cover;
}
.star{
   position: relative;
   margin-left: 25px;
   font-size: clamp(12px, 2vw, 16px)
}



.subtitle{
   margin-bottom: 25px;
}
.compus-font{
   font-weight: normal;
}
.intro{
   padding-top: 75px;
}
.voice{
   font-size: 12px;
   border: 2px solid;
   border-radius: 4px;
   padding-left: 10px;
   padding-top: 2px;
   padding-bottom: 2px;
   margin: 0 auto;
   width: 315px;
}

.photo{
   width: 100%;
   border-radius: 10px;
}

.letter {
   width: 100%;
}







.dekkaiyoko{
   display: flex;
   flex-direction: row;
   gap: 5%;
   align-items: center;
}
.ticket_2, .ticket_3, .ticket_day, .ticket_1, .ticket_meal{
   background-color: var(--clr-lightorange);
   padding: 10px;
   width: 130px;
   padding-bottom: 40px;
   position: relative;
   z-index: 1;
}
.number{
   font-size: 10px;
   color: var(--clr-orange);
}
.yoko{
   display: flex;
   gap: 10px;
}
.tate{
   display: flex;
   flex-direction: column;
   gap: 10px;
}
.date{
   font-size: 14px;
   display: flex;
   flex-direction: column;
}
.youbi{
   font-size: 10px;
   display: flex;
   flex-direction: column;
}
.bottom{
   margin-top: auto;
   display: flex;
   gap: 10px;
   align-items: baseline;
}
.time, .location{
   font-size: 12px;
}
.tate{
   display: flex;
   flex-direction: column;
   gap: 20px;
}
.kugiri::after{
   content: "";
   position: absolute;
   width: 100%;
   left: 0;
   background-image: linear-gradient(to right, var(--clr-beige) 3px, transparent 6px);
   background-repeat: repeat-x;
   z-index: 30;
   background-size: 10px 3px;
   background-position: left bottom;
   padding-top: 10px;
}

.ticket_2::after, .ticket_3::after, .ticket_day::after, .ticket_1::after, .ticket_meal::after{
   content: "";
   background-color: var(--clr-lightbeige);
   width: 100%;
   height: 90%;
   position: absolute;
   top: 0;
   left: 0;
   z-index: -1;
}
.ticket_3::after{
   height: 93%;
}
.ticket_day::after{
   height: 92%;
}
.ticket_circle {
   content: '';
   position: absolute;
   display: inline-block;
   width: 10px;
   height: 10px;
   border-radius: 100% 0 0 0;
   background: var(--clr-beige);
}
.cir1 {
   top: -1px;
   left: -1px;
   transform: rotate(180deg);
}
.cir2 {
   top: -1px;
   right: -1px;
   transform: rotate(270deg);
}
.cir3 {
   bottom: -1px;
   left: -1px;
   transform: rotate(90deg);
}
.cir4 {
   bottom: -1px;
   right: -1px;
   transform: rotate(0deg);
}
.ikkyosai{
   position: absolute;
   font-size: 10px;
   bottom: 3px;
   right: 13px;
   color: var(--clr-lightbeige);
}
.fes, .simpo, .ansou, .josen{
   font-size: 12px;
}
.fes{
   color: var(--clr-fes);
}
.simpo{
   color: var(--clr-simpo);
}
.ansou{
   color: var(--clr-ansou);
}
.josen{
   color: var(--clr-josen)
}








.text, .text_nophoto{
   text-align: justify;
   font-size: clamp(12px, 2vw, 16px);
}
.contents-wrapper {
   width: 85%;
   margin: 0 auto;
}

.details-wrapper {
   display: flex;
   flex-direction: column;
   gap: 150px;
   margin-bottom: 60px;
}

.details {
   display: flex;
   flex-direction: column;
   gap: 20px;
}


#circleintro, #course, #fun, #lecture, #day, #zyosen, #oneone, #entry_interview, #meal{
   position: relative;
   scroll-margin-top: 100px;
}



.underbar {
   border-bottom: dashed #a4d3d3 1.5px;
}

.imgdate_intro {
   display: grid;
   grid-template-columns: 35fr 60fr;
   gap: 5%;
   align-items: center;
   margin-bottom: 30px;
}
.imgdate_intro_nophoto{
   display: grid;
   gap: 5%;
   align-items: center;
   grid-template-areas: "ticket_nophoto text_nophoto";
}
.ticket_nophoto{
   grid-area: ticket_nophoto;
}
.text_nophoto{
   grid-area: text_nophoto;
}
.photo{
   width: 100%;
   height: auto;
}
.text{
   grid-column: 1 / 3;
}
.fb_accordion {
   width: 100%;
   border: solid var(--clr-text) 1px;
   border-radius: 10px;
   position: relative;
   background-color: var(--clr-lightbeige);
}

.fb_title {
   font-size: clamp(12px, 2vw, 16px);
   width: 100%;
   padding: 5px;
   padding-left: 20px;
   background-color: #f0e9d7;
   transition: .4s;
   font-weight: bold;
   position: relative;
   border-radius: 10px;
   cursor: pointer;
}
.fb_title:before {
   content: '';
   position: absolute;
   top: 48%;
   right: 2px;
   transform: translate(-50%);
   width: 17px;
   height: 2px;
   background: var(--clr-text);
   z-index: 30;
}
.fb_title:after {
   content: '';
   position: absolute;
   top: 50%;
   right: 18px;
   transform: translateY(-50%);
   transition: all .4s;
   width: 2px;
   height: 17px;
   background: var(--clr-text);
   z-index: 30;
}
.fb_title.active:after{
   transform: translateY(-50%) rotate(90deg);
   transform-origin: center;
}
.fb_title.active{
   background-color: var(--clr-lightblue);
}
@media(hover: hover){
   .fb_title:hover{
      background-color: var(--clr-lightblue);
   }
}

.fb_box{
   display: none;
}
.midashi_honbun1{
   text-align: justify;
   font-size: clamp(12px, 2vw, 16px);
   color: var(--clr-text);
   gap: 15px;
   display: flex;
   margin: 3% 21px 0 21px;
}
.midashi_honbun2{
   text-align: justify;
   font-size: clamp(12px, 2vw, 16px);
   color: var(--clr-text);
   gap: 15px;
   display: flex;
   margin: 5% 21px 3% 21px;
}
.circle_icon_blue {
   width: 1em;
   height: 1em;
   border-radius: 50%;
   border: 1px solid var(--clr-blue);
   position: relative;
   margin-top: 3px;
   flex-shrink: 0;
}
.circle_icon_blue::before {
   content: "";
   position: absolute;
   top: 1px;
   left: 4px;
   width: inherit;
   height: inherit;
   border-radius: 50%;
   background-color: var(--clr-lightblue);
   z-index: 1;
}
.circle_icon_orange {
   width: 1em;
   height: 1em;
   border-radius: 50%;
   border: 1px solid var(--clr-orange);
   position: relative;
   margin-top: 3px;
   flex-shrink: 0;
}
.circle_icon_orange::before {
   content: "";
   position: absolute;
   top: 1px;
   left: 4px;
   width: inherit;
   height: inherit;
   border-radius: 50%;
   background-color: var(--clr-lightorange);
   z-index: 1;
}

.entries{
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
}

.limit{
   font-size: clamp(12px, 2vw, 16px);
   text-align: center;
   width: 100%;
}
.bold{
   font-weight: bold;
   border-bottom: solid #007075 1px;
   font-size: clamp(14px, 2.5vw, 20px);
}
.entry_button{
   text-align: center;
}
.detail-decoration{
   left: 60px;
}
.detail-line{
   width: 40px;
}
.yesterday{
   font-size: clamp(12px, 2vw, 16px);
   text-align: justify;
   width: 100%;
   display: inline-block;
}
.period{
   display: flex;
   flex-direction: column;
   gap: 10px;
}
.apply_period{
   font-size: 12px;
   justify-content: center;
   margin-top: 20px;
   width: fit-content;
   margin: 0 auto;
}
.limitover{
   text-align: center;
   font-size: clamp(12px, 2vw, 16px);
}
.hidden{
   display: none;
}


.entry_button{
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 15px;
}

.zenhan, .kouhan{
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 10px;
}

.lecture_date{
   font-size: clamp(12px, 2vw, 16px);
   color: var(--clr-text);
   width: 130px;
   text-align: left;
}


/* レスポンシブ用 */
@media screen and (min-width:1024px){
   .a1, .a2, .g{
      font-size: 12px;
   }
   .b, .c, .d, .e, .f, .h, .i{
      font-size: 16px;
   }
   .day, th{
      font-size: 16px;
   }
   .schoolevent{
      font-size: 14px;
   }
   .notification{
      font-size: 16px;
   }
   .enrollmentdate{
      font-size: 16px;
   }
   .hidden_table{
      height: 5px;
   }
   .underline_table{
      height: 25px;
   }
   #circleintro, #course, #fun, #lecture, #fes, #zyosen, #oneone, #entry_interview, #meal {
      scroll-margin-top: 80px;
   }
   .star::before{
      width: 20px;
      height: 20px;
      left: -25px;
      top: 3px;
   }


   .compus-title{
      width: 100%;
   }
   .plan{
      width: 70%;
   }
   .contents-wrapper{
      width: 70%;
   }
   .details-wrapper{
      gap: 200px;
      margin-bottom: 120px;
   }
   .imgdate_intro{
      grid-template-areas: "ticket photo" "ticket text";
      align-items: start;
   }
   .ticket{
      grid-area: ticket;
   }
   .photo{
      grid-area: photo;
   }
   .text{
      grid-area: text;
   }
   .photo{
      margin: 0 auto;
      width: 60%;
   }

   .ticket_2, .ticket_3, .ticket_day, .ticket_1, .ticket_meal{
      background-color: var(--clr-lightorange);
      padding: 20px;
      width: 300px;
      padding-bottom: 60px;
      position: relative;
      z-index: 1;
   }
   .number{
      font-size: 14px;
      color: var(--clr-orange);
   }
   .yoko{
      display: flex;
      gap: 20px;
   }
   .date{
      font-size: 25px;
      display: flex;
      flex-direction: column;
   }
   .youbi{
      font-size: 14px;
      display: flex;
      flex-direction: column;
   }
   .bottom{
      margin-top: auto;
   }
   .time{
      font-size: 20px;
   }
   .location{
      font-size: 20px;
   }
   .tate{
      display: flex;
      flex-direction: column;
      gap: 20px;
   }
   .kugiri::after{
      content: "";
      position: absolute;
      width: 100%;
      left: 0;
      background-image: linear-gradient(to right, var(--clr-beige) 3px, transparent 6px);
      background-repeat: repeat-x;
      z-index: 30;
      background-size: 10px 5px;
      background-position: left bottom;
      padding-top: 10px;
   }
   .ticket_2::after, .ticket_3::after, .ticket_day::after, .ticket_1::after, .ticket_meal::after{
      content: "";
      background-color: var(--clr-lightbeige);
      width: 100%;
      height: 90%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
   }
   .ticket_3::after{
      height: 93%;
   }
   .ticket_day::after{
      height: 93%;
   }
   .ticket_1::after{
      height: 85%;
   }
   .ticket_circle {
      content: '';
      position: absolute;
      display: inline-block;
      width: 15px;
      height: 15px;
      border-radius: 100% 0 0 0;
      background: var(--clr-beige);
   }
   
   .ikkyosai{
      position: absolute;
      font-size: 14px;
      bottom: 7px;
      right: 13px;
      color: var(--clr-lightbeige);
   }
   .fes, .simpo, .ansou, .josen{
      font-size: 20px;
   }


   .fb_title{
      padding: 10px;
      padding-left: 20px;
   }
   .fb_title:before, .fb_title:after {
      transition: all 0.4s;
  }

   .detail-decoration{
      left: 80px;
   }
   .detail-line{
      width: 80px;
   }

   .title{
      margin-bottom: 45px;
   }



   .yesterday{
      margin-top: 20px;
      text-align: center;
   }
   .entry_yesterday{
      margin-top: 0px;
   }
   .period{
      margin-top: 10px;
   }
   .apply_period{
      font-size: 16px;
   }

   .lecture_date{
      width: 170px;
   }
}