@charset "utf-8";

@import "base.less";
@import "ancient_base.less";
@import "base_lower.less";

/*
  File Name   : csr.css
  Description : コンテンツエリア共通
*/

/* headding
============================================================ */
.headding{
  .bg{
    @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
      left: inherit !important;
      right: 0;
      transform: translate(0, -50%) !important;
      height: 100px;
      width: auto !important;
    }
  }
}


/* menkyo News
============================================================ */

.news__contents{
  width: 100%;
  max-width: 1200px;
  margin: auto;
  @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
    max-width: calc(~"100% - 40px");
  }

  .l-news__title{
    display: block;
    padding-bottom: .8em;
    position: relative;
    border-bottom: solid 3px @black;
    h2 {
      text-align: center;
      span {
        color: @black;
        display: inline-block;
        font-size: 24px;
        @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
          font-size: 18px;
        }
      }
    }
    .newslist__link{
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      font-size: 12px;
      text-decoration: none;
      &::after{
        display: inline-block;
        content: ">";
        font-size: 16px;
        transform: scale(0.6, 1);
        margin-left: .4em;
        transition: margin-left 0.4s ease-in-out;
      }
      &:hover{
        &::after{
          margin-left: .2em;
        }
      }
    }
  }
  
  .list {
    display: table;
    width: 100%;
    padding: 20px 0 !important;
    @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
      display: block;
    }
    >div {
      display: table-row;
      @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
        display: block;
      }
      >div {
        display: table-cell;
        padding: 0;
        text-align: center;
        @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
          display: block;
          padding:  0;
        }
        &:nth-of-type(1) {
          padding: 10px 10px 10px 0;
          @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
            display: inline-block;
            text-align: left;
            font-size: .8rem;
            font-weight: bold;
          }
        }
        &:nth-of-type(2) {
          padding: 10px 10px 10px 0;
          @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
            display: inline-block;
            text-align: left;
          }
          >span {
            display: block;
            padding: 5px 10px;
            color: @white;
            text-align: center;
            font-weight: bold;
            font-size: .8rem;
            width: 150px;
            white-space: nowrap;
            &:extend(.moz05);
            @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
              width: initial;
              font-size: .6rem;
              padding: 0 10px;
            }
          }
          .ad-info{
            background-color: @news_color_exam;
          }
          .info{
            background-color: @news_color_info;
          }
        }
        &:nth-of-type(3) {
          text-align: left;
          @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
            margin-bottom: 10px;
          }
          a {
            text-decoration: none;
            @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
              font-size: .8rem;
            }
          }
        }
      }
    }
  }
} /* menkyo News */


/* menkyo
============================================================ */
.l-menkyo{
  .menkyo__link{
    display: block;
    margin: 40px auto;
    font-size: 20px;
    text-align: center;
    line-height: 1.75;
    font-weight: bold;
    @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
      font-size: 18px;
    }
  }

  .l-img{
    display: block;
    width: 100%;
    img{
      display: block;
      width: 100%;
    }
  }
}


/* note common
============================================================ */
.l-sec__note{
  display: block;
  width: 100%;
  margin-top: 40px;
  @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
    margin-top: 20px;
  }
  &__inner{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    background-color: @beige;
    .note{
      span{
        display: inline-block;
        margin-right: 1em;
        font-weight: 500;
        &:last-of-type{
          margin-right: 0;
        }
        a{
          text-decoration: none;
        }
      }
    }
  }
}


/* exchange school
============================================================ */
.l-school{
  /* map */
  .l-sec__map{
    .l-img{
      width: 80%;
      margin: auto;
      @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
        width: 100%;
      }
      &::before {
        padding-top: percentage(426.7664/900.8693);
      }
    }
  }

  /* list */
  .l-sec__list{
    .l-list{
      display: flex;
      justify-content: space-between;
      @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
        flex-direction: column;
      }

      &__content{
        width: calc(~"(100% - 80px) / 2");
        @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
          width: 100%;
        }

        &:last-of-type{
          @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
            margin-top: 20px;
          }
        }
      }
    }
  }
}


/* study abroad
============================================================ */
.l-abroad{
  .l-sec__abroad{
    .l-abroad__table{
      .l-abroad__table__title{
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        .abroad__table__title{
          font-weight: 500;
          @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
            font-size: 13px;
          }
        }
        .abroad__table__title--date{
          font-size: 11px;
          @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
            font-size: 9px;
          }
        }
      }

      table{
        table-layout: fixed;
        tr, th, td{
          border: 1px solid rgba(35,24,21,.4);
        }
        th,td{
          width: 25%;
          padding: 5px;
          font-weight: 500;
          text-align: center;
        }
        th,.td-total{
          background-color: @beige;
        }
      }
    }

    .l-abroad__img{
      display: flex;
      justify-content: space-between;
      @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
        flex-direction: column;
      }
      .l-img{
        width: calc(~"(100% - 60px) / 3");
        @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
          margin-bottom: 20px;
          width: 100%;
          &:last-of-type{
            margin-bottom: 0;
          }
        }
        &::before {
          padding-top: percentage(204.3213/297.6192);
        }
      }
    }
  }
}


/* icc
============================================================ */
.l-icc{
  /* description */
  .l-sec__description{
    .l-description__col{
      display: flex;
      justify-content: space-between;
      @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
        flex-direction: column;
      }
      .ol-circle{
        width: calc(~"(100% - 40px) / 2");
        @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
          width: 100%;
        }
        &:last-of-type{
          counter-reset: inherit;
        }
      }
    }

    a{
      display: block;
    }
  }

  /* results */
  .l-sec__results{
    .l-results{
      display: flex;
      justify-content: space-between;
      padding: 40px 0;
      border-bottom: 3px solid @beige;
      @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
        flex-direction: column;
        padding: 20px 0;
      }
      &:first-of-type{
        padding-top: 0;
      }
      &:last-of-type{
        display: block;
        border-bottom: none;
        .l-results__content{
          width: 100%;
        }
      }

      .l-results__content{
        width: calc(~"(100% - 20px) / 2");
        @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
          width: 100%;
        }
        a{
          word-break: break-all;
        }
      }

      .l-results__images{
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        width: calc(~"(100% - 20px) / 2");
        @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
          flex-direction: column;
          width: 100%;
          margin-top: 20px;
        }

        .l-img{
          width: calc(~"(100% - 20px) / 2");
          @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
            width: 100%;
            margin-bottom: 20px;
          }
          &::before {
            padding-top: percentage(204.3081/247.1893);
          }
        }
      }
    }
  }
}


/* shakai renkei
============================================================ */
.l-shakai{
  .l-group{
    border-top: 3px solid @beige;
    padding: 40px 0;
    @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
      padding: 20px 0;
    }

    .l-group__inner{
      display: flex;
      justify-content: space-between;
      @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
        flex-direction: column;
      }

      .l-group__content{
        width: calc(~"100% - 350px - 30px");
        @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
          width: 100%;
        }
      }
      .l-img{
        width: 350px;
        @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
          width: 100%;
          margin-top: 20px;
        }
        
        &::before {
          padding-top: percentage(221.6169/343.6367);
        }
      }
    }

    &:last-of-type{
      .l-group__content{
        width: 100%;
      }
    }
  }
}


/* open lecture
============================================================ */
.l-open{
  .news__contents{
    .l-news__title{
      padding-bottom: 0;
      h2 span{
        font-weight: bold;
      }
    }
    .news-csr{
      background-color: @blue;
    }

    .newslist__link{
      &::after{
        display: none;
      }
      &::before{
        display: inline-block;
        content: ">";
        font-size: 16px;
        transform: scale(0.6, 1);
        margin-right: .4em;
        transition: margin-right 0.4s ease-in-out;
      }
      &:hover{
        &::before{
          margin-right: .2em;
        }
      }
    }
  }

  .l-sec__open{
    .l-sec__open__inner{
      display: flex;
      justify-content: space-between;
      @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
        flex-direction: column;
      }
      .l-open_content{
        width: calc(~"100% - 500px - 20px");
        @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
          width: 100%;
        }

        .l-open__link{
          display: block;
        }

        .open__link{
          display: inline-block;
          text-decoration: none;
          color: @blue;
          opacity: 1;
          transition: opacity 0.4s ease-in-out;
          &::before{
            display: inline-block;
            content: "＞";
            font-size: 16px;
            transform: scale(0.6, 1);
            margin-right: .4em;
          }
          &:hover{
            opacity: .7;
          }
        }

        .link__pdf{
          position: relative;
          &::after{
            display: inline-block;
            content: "";
            font-size: 16px;
            width: 1em;
            height: 100%;
            background-image: url(../images/common/icon_pdf.svg);
            background-repeat: no-repeat;
            background-size: contain;
            position: absolute;
            top: 25%;
            right: -1.5em;
          }
        }
      }
      .l-img{
        width: 500px;
        @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
          margin-top: 20px;
          width: 100%;
        }
        &::before {
          padding-top: percentage(282.6907/471.9845);
        }
      }
    }
  }
}


/* bunbun
============================================================ */
.l-bunbun__title{
  display: flex;
  justify-content: center;
  @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
    flex-direction: column;
  }
  .l-title__logo{
    width: 650px;
    @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
      width: 100%;
    }
    .title__logo{
      width: 100%;
      &::before {
        padding-top: percentage(265.9057/788.5479);
      }
      img{
        object-fit: contain;
        font-family: 'object-fit: contain;';
      }
    }
  }
  
  .title__img{
    width: 350px;
    margin-left: 40px;
    &::before {
      padding-top: percentage(193.7231/300.385);
    }
    @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
      width: 100%;
      margin-left: 0;
      margin-top: 40px;
    }
  }
}

.l-bunbun{
  .news__contents{
    .l-news__title{
      padding-bottom: 0;
      h2 span{
        font-weight: bold;
      }
    }
    .news-csr{
      background-color: @blue;
    }

    .newslist__link{
      &::after{
        display: none;
      }
      &::before{
        display: inline-block;
        content: ">";
        font-size: 16px;
        transform: scale(0.6, 1);
        margin-right: .4em;
        transition: margin-right 0.4s ease-in-out;
      }
      &:hover{
        &::before{
          margin-right: .2em;
        }
      }
    }
  }

  .l-sec__about{
    .l-title__h3__about{
      .l-img{
        width: 100%;
        &::before {
          padding-top: percentage(142.4326/949.5507);
        }
        img{
          object-fit: contain;
          font-family: 'object-fit: contain;';
        }
      }
    }

    .l-about__dllist{
      .about__dl{
        display: flex;
        align-items: center;
        border-top: 1px solid rgba(204,200,164, .6);
        @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
          flex-direction: column;
          margin-bottom: 10px;
        }
        &:nth-of-type(odd){
          background-color: @bunbun_color;
          @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
            background-color: inherit;
          }
        }
        &:last-of-type{
          border-bottom: 1px solid rgba(204,200,164, .6);
        }
        .about__dt{
          width: 140px;
          text-align: center;
          @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
            width: 100%;
            background-color: @bunbun_color;
            border-bottom: 1px solid rgba(204,200,164, .6);
          }
          .l-justify-title{
            display: flex;
            justify-content: space-between;
            width: 4em;
            margin: auto;
          }
        }
        .about__dd{
          width: calc(~"100% - 140px");
          padding: 5px 30px;
          border-left: 1px solid rgba(204,200,164, .6);
          @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
            width: 100%;
            padding: 5px 10px;
            border-left: none;
          }
        }
      }
    }

    .l-about__img{
      display: flex;
      justify-content: space-between;
      @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
        flex-direction: column;
      }
      .l-img{
        width: calc(~"(100% - 40px ) / 2");
        @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
          width: 100%;
        }
        &::before {
          padding-top: percentage(334.5162/460.6021);
        }
        &:first-of-type{
          @media all and (min-width: @layout-min-width) and (max-width: @layout-max-width) {
            margin-bottom: 20px;
          }
        }
      }
    }
  }

  .l-sec__schedule{
    .l-title__h3__schedule{
      .l-img{
        width: 100%;
        &::before {
          padding-top: percentage(116.32/949.5507);
        }
      }

      .lower__h3-01{
        font-size: 17px;
        &::before{
          font-size: 15px;
          top: .1em;
        }
      }
    }
  }
}