@charset "utf-8";

/* department index */
@media screen and (min-width:576px){
  .c-department-index__pickup .c-accordion{
    display: none;
  }
} 
@media screen and (max-width:575px){
  .c-department-index__pickup{
    & .column__item.pict{
      display: none;
    }
  }
  .c-accordion{
    width: 100%;
    padding: 30px 20px 0;
    background: #ECF0F3;
    border-radius: 20px;
    & h3{
      display: grid;
      align-items: center;
      grid-template-columns: 56px 1fr;
      border-radius: 16px;
      margin: initial;
      padding: initial;
      padding: .5em 1em;
      border-bottom: none;
      color: #fff;
      &::before,&::after{
        display: none;
      }
      & > span:first-of-type{
        display: grid;
        place-items: center;
        & img{
          max-width: 100%;
        }
      }
      & > span + span > span:first-of-type{
        display: block;
        font-family: Noto Sans JP;
        font-weight: 400;
        font-size: 14px;
        leading-trim: NONE;
        line-height: 150%;
        letter-spacing: 0%;
      }
      & > span + span > span:last-of-type{
        font-family: Noto Sans JP;
        font-weight: 600;
        font-size: 20px;
        leading-trim: NONE;
        line-height: 130%;
        letter-spacing: 0%;
      }
    } /* h3 */
    details{
      padding: 30px 0;
      background: #ECF0F3;

      &:first-of-type{
        padding-block-start: 20px;
      }
      &:not(:first-of-type){
        position: relative;
        &::before{
          display: block;
          content: "";
          width: calc(100% + 20px + 20px);
          height: 5px;
          background-color: #fff;
          position: absolute;
          top: 0;
          left: -20px;
        }
      }
    } /* details */
    summary{
      display: block;
      list-style: none;
      &::marker,
      &::-webkit-details-marker{
        display: none;
      }
      & .label{
        display: grid inline;
        place-items: center;
        padding: 6px 10px;
        border-radius: 6px 6px 0 0;
        color: #fff;
        font-family: Noto Sans JP;
        font-weight: 700;
        font-style: Bold;
        font-size: 12px;
        leading-trim: NONE;
        line-height: 1;
        letter-spacing: 0%;
        &:has( + .label){
          margin-inline-end: .25em;
        }
      }
      & h4{
        display: grid;
        align-items: center;
        justify-content: space-between;
        grid-template-columns: 1fr auto;
        gap: 16px;
        margin-top: 10px;
        padding-inline: 0;
        color: #000;
        font-family: Noto Sans JP;
        font-weight: 700;
        font-style: Bold;
        font-size: 18px;
        leading-trim: NONE;
        line-height: 28px;
        letter-spacing: 0%;
        & .arrow{
          display: inline-block;
          width: 24px;
          height: 12px;
          position: relative;
          transition: rotate 0.24s ease-in-out;
          &::before, &::after{
            content: "";
            position: absolute;
            bottom: 0;
            left: calc(50% - 1px);
            width: 2px;
            height: 16.9px;
            border-radius: 9999px;
            background-color: #000000;
            transform-origin: 50% calc(100% - 1px);
          }
          &::before{
            transform: rotate(47.75deg);
          }
          &::after{
            transform: rotate(-47.75deg);
          }
        }
      }
    } /* summary */
    .c-accordion__content{
      margin-block-start: 10px;
      p:has(> img){
        display: block;
        aspect-ratio: 350/234;
        padding: 0;
        & > img{
          max-width: 100%;
          max-height: 100%;
          object-fit: contain;
          object-position: center;
        }
      }
      p:not(:has(> img)){
        margin-block-start: 10px;
        color: #000;
        font-family: Noto Sans JP;
        font-weight: 500;
        font-style: Medium;
        font-size: 15px;
        leading-trim: NONE;
        line-height: 24px;
        letter-spacing: 0%;
      }
    } /* accordion content */
    .c-accordion__wrapper{
      overflow: hidden;
    }
    /* open */
    details {
      &::details-content {
        content-visibility: unset;
        display: block grid;
        @media (prefers-reduced-motion: no-preference) {
          transition-duration: 300ms;
          transition-property: grid-template-rows;
        }
      }
      &:not([open])::details-content {
        grid-template-rows: 0fr;
      }
      &[open]::details-content {
        grid-template-rows: 1fr;
      }
      &[open] .arrow{
        rotate: calc(180deg - 360deg - 360deg);
        transform-origin: center center;
      }
    }
  }
  /* color */
  /* humanities */
  [data-location-path^="/education/undergraduate/humanities"] .c-accordion .label,
  [data-location-path^="/education/undergraduate/humanities"] .c-accordion h3{
    background-color: #13A4D4;
  }
  /* law */
  [data-location-path^="/education/undergraduate/law"] .c-accordion .label,
  [data-location-path^="/education/undergraduate/law"] .c-accordion h3{
    background-color: #4da1a3;
  }
  /* economics */
  [data-location-path^="/education/undergraduate/economics"] .c-accordion .label,
  [data-location-path^="/education/undergraduate/economics"] .c-accordion h3{
    background-color: #e99537;
  }
  /* commerce */
  [data-location-path^="/education/undergraduate/commerce"] .c-accordion .label,
  [data-location-path^="/education/undergraduate/commerce"] .c-accordion h3{
    background-color: #5372a9;
  }
  /* commerce_evening */
  [data-location-path^="/education/undergraduate/commerce_evening"] .c-accordion .label,
  [data-location-path^="/education/undergraduate/commerce_evening"] .c-accordion h3{
    background-color: #5372a9;
  }
  /* science */
  [data-location-path^="/education/undergraduate/science"] .c-accordion .label,
  [data-location-path^="/education/undergraduate/science"] .c-accordion h3{
    background-color: #8666a6;
  }
  /* engineering */
  [data-location-path^="/education/undergraduate/engineering"] .c-accordion .label,
  [data-location-path^="/education/undergraduate/engineering"] .c-accordion h3{
    background-color: #25795d;
  }
  /* medicine */
  [data-location-path^="/education/undergraduate/medicine"] .c-accordion .label,
  [data-location-path^="/education/undergraduate/medicine"] .c-accordion h3{
    background-color: #8c373f;
  }
  /* pharmaceutical */
  [data-location-path^="/education/undergraduate/pharmaceutical"] .c-accordion .label,
  [data-location-path^="/education/undergraduate/pharmaceutical"] .c-accordion h3{
    background-color: #d95f7c;
  }
  /* sports_health */
  [data-location-path^="/education/undergraduate/sports_health"] .c-accordion .label,
  [data-location-path^="/education/undergraduate/sports_health"] .c-accordion h3{
    background-color: #c72c2c;
  }
} 

/* c-voice */
.c-voice{
  & .column.split_3{
    column-gap: 14px;
  }
  & .column__item{
    margin-inline: 0 !important;
    border: 1px solid #DEDDDD;
    & a{
      display: grid;
      align-items: center;
      grid-template-columns: 1fr auto;
      gap: 16px;
      width: calc(100% - 14px - 14px);
      margin-inline: auto;
      padding: 10px 6px;
      color: #000;
      &:first-of-type{
        font-family: Noto Sans JP;
        font-weight: 600;
        font-style: SemiBold;
        font-size: 14px;
        leading-trim: NONE;
        line-height: 150%;
        letter-spacing: 0%;
        & span:last-of-type{
          margin-inline-start: .5em;
          font-size: 12px;
        }
      }
      & + &{
        border-top: 1px solid #C0C0C0;
        font-family: Noto Sans JP;
        font-weight: 600;
        font-style: SemiBold;
        font-size: 12px;
        leading-trim: NONE;
        line-height: 150%;
        letter-spacing: 0%;
      }
      & .arrow{
        position: relative;
        display: inline-block;
        width: 7.7px;
        height: 13.3px;
        transition: translate 0.24s ease-in-out;
        &::before, &::after{
          content: "";
          position: absolute;
          top: calc(50% - 1px);
          right: 0;
          width: 10px;
          height: 2px;
          border-radius: 9999px;
          background-color: #8d0000;
          transform-origin: calc(100% - 1px) 50%;
        }
        &::before{
          transform: rotate(45deg);
        }
        &::after{
          transform: rotate(-45deg);
        }
      }
      &:hover{
        & .arrow{
          translate: 4px 0;
        }
      }
    }
  }
}


/* undergraduate index */
[data-location-path^="/education/undergraduate/"] {
  & .c-content-index-lv3__hero-text em > span,
  & .c-content-index-lv3__index{
    background: #f2f2f2;
  }

  & .c-content-main:has(.c-content-index-lv3__index-list){
    padding-inline: 0;
  }
  
  & .c-content-index-lv3__index-item{
    border-top: none;
  }

  & .c-content-index-lv3__index-item > nav{
    & ul{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      list-style: none;
      padding-inline-start: 0;
      & li{
        width: 100%;
        aspect-ratio: 164/48;
      }
      & a{
        display: grid;
        align-items: center;
        justify-content: space-between;
        grid-template-columns: 1fr 10px;
        gap: 10px;
        width: 100%;
        height: 100%;
        padding-inline: 15px;
        font-weight: 500;
        line-height: 1;
        position: relative;
        &::before{
          display: block;
          content: "";
          width: 2px;
          height: 46%;
          background-color: #a40002;
          position: absolute;
          top: 50%;
          left: 0;
          translate: 0 -40%;
        }
        &::after{
          display: block;
          content: "";
          width: 94%;
          height: 1px;
          background-color: #e6e6e6;
          position: absolute;
          bottom: 0;
          left: 50%;
          translate: -50% 0;
        }
        & > .arrow{
          position: relative;
          display: inline-block;
          width: 6.2px;
          height: 10.5px;
          translate: 0 .1em;
          transition: translate 0.24s ease-in-out;
          &::before,&::after{
            content: "";
            position: absolute;
            top: calc(50% - 0.5px);
            right: 0;
            width: 8px;
            height: 2px;
            border-radius: 9999px;
            background-color: #b73910;
            transform-origin: calc(100% - 1px) 50%;
          }
          &::before{
            transform: rotate(45deg);
          }
          &::after{
            transform: rotate(-45deg);
          }
        }
        @media (any-hover: hover) {
          &:hover .arrow{
            translate: 4px .1em;
          }
        }
      }
    }
  }
  @media screen and (min-width:576px){
    & nav a{
      font-size: 15px;
    }
  }
  @media screen and (max-width:575px){
    & nav a{
      font-size: 14px;
    }
  }
    
  & .c-content-index-lv2.--undergraduate{
    &:not(:first-of-type){
      margin-block-start: 48px;
    }
    & > a{
      width: 100%;
      height: 100%;
      position: relative;
      &::before{
        display: block;
        content: "";
        background-image: url(../img/icon-arrow.png);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        z-index: 10;
        translate: 0 0;
        transition: translate 0.24s ease-in-out;
      }
      @media screen and (min-width:576px){
        &::before{
          bottom: 6.6%;
          right: 4.4%;
        }
      }
      @media screen and (max-width:575px){
        &::before{
          top: 6%;
          right: 8%;
        }
      } 
      &::before{
        display: block;
        content: "";
        width: 6rem;
        aspect-ratio: 1;
      }
      @media screen and (min-width:576px){
        &::before{
          width: 4.4%;
        }
      }
      @media screen and (max-width:575px){
        &::before{
          width: 8%;
        }
      } 
      @media (any-hover: hover) {
        &:hover::before{
          translate: 4px 0;
        }
      }
    }
    & h2{
      margin: 0;
      padding: 0;
      border: none;
      &::after{
        display: none;
      }
    }
    & img{
      max-width: 100%;
    }
    & .column.split_2{
      align-items: stretch;
      gap: 12px;
      margin-block-start: 15px;
      & .column__item{
        width: 100%;
        flex: 1;
        margin: 0;
        & .btn-list{
          width: 100%;
          height: 100%;
          margin: 0;
          & a{
            width: 100%;
            height: 100%;
            margin: 0;
            text-align: left;
          }
        }
      }
    }
    @media screen and (min-width:576px){
      & .column.split_2{
        padding-inline: 2rem;
      }
    } 
    @media screen and (max-width:575px){
      & .column.split_2{
        flex-direction: column;
      }
    }
  }

  & .c-content-main:has(> p.center){
    margin-block-start: 80px;
  }
}


/* @media for copy */
/* @media screen and (min-width:576px){

} */
/* @media screen and (max-width:575px){

} */