@charset "UTF-8";
/* CSS Document */

@media screen and (max-width: 768px) {

  /*outline +++++++++++++++++++++++++++++++++++*/
  .outline-intro-top .top-list{
    grid-template-columns: min(600px,100%);
    place-content:center;
    gap: min(40px, 8vw);
  }
  .outline-about_happy .happy-link{
    grid-template-columns: auto;
  }
  .outline-about_happy .happy-link .logo{
    width: min(400px,80%);
    margin-left: auto;
    margin-right: auto;
  }
  /*facilities +++++++++++++++++++++++++++++++++++*/
  .page-fac_point
  ,.fac_thumb_list{
    grid-template-columns: repeat(2, 1fr);
  }
  .page-fac_point > li .comment p{
    font-size: min(18px,calc(100vw/25));
  }
  /*curriculum　+++++++++++++++++++++++++++++++++++*/
  .page-curric-intro{
    padding-top: min(50px,8vw);
    padding-bottom: min(50px,8vw);
  }
  .page-curric-intro::before{
    width: 100vw;
    aspect-ratio:auto;
    height: 100%;
    left: 50%;
    translate:-50% 0;
    opacity: .2;
  }
  .curric-intro_detail{
    width: 100%;
  }
  /*message ++++++++++++++++++++++++++++++++++++++*/
  .page-message-box.chair
  ,.page-message-box.principal{
    grid-template-columns: 1fr;
    place-items:center;
    gap:min(30px,5vw);
  }
  .page-message-box .thumb{
    width: min(500px,100%);
  }
  .page-message-box .comment{
    width: 100%;
  }
  .page-message-box.chair .thumb{
    grid-area: 1 / 1 / 2 / 2;
  }
  .page-message-box.chair .comment{
    grid-area: 2 / 1 / 3 / 2;
  }
  /*access ++++++++++++++++++++++++++++++++++++++*/
  .access-area__detail{
    grid-template-columns: repeat(2, 1fr);
  }
  .access-map__route .in-title{
    position: relative;
  }

  /*feature +++++++++++++++++++++++++++++++++++++*/
  .page-feature_intro{
    overflow: hidden;
  }
  .feature-intro__explan{
    padding-top: min(50px,8vw);
    grid-template-columns: 1fr;
  }
  .feature-intro__explan .thumb{
    aspect-ratio:1;
    overflow: hidden;
  }
  .feature-intro__explan .thumb img{
    object-fit: cover;
    height: 100%;
    object-position: center;
  }
  .feature-intro__explan .thumb {
    position: absolute;
    top: 0;
    width: 100%;
    grid-area:auto;
    opacity: .15;
  }
  .feature-intro__explan .thumb figure{
    width: 100%;
    height: 100%;
  }
  .feature-intro__explan .thumb figure::after{
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(255,255,255,0) 70%,rgba(255,255,255,1) 90%);
    position: absolute;
    top: 0;
    left: 0;
  }
  .feature-intro__explan .comment{
    z-index: 2;
  }
  .feature_pickup__intro .comment{
    width: 100%;
  }

  /*feature1 カリキュラム*/
   .feature-curric__explan .thumb{
    z-index: 0;
  }
  .f-curric__intro{
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
  }
  .f-curric__intro .comment{
    width: 100%;
    padding-right: 0;
  }
  .f-curric__intro .comment .explan{
    width: 50%;
  }
  .f-curric__intro .thumb{
    left: auto;
    right: 0;
  }
  .f-curric_learning{
    grid-template-columns: min(500px,100%);
    justify-content: center;
  }
  .f-curric_learning > li .board::after{
    content: none;
  }
  .feature-curric_pickup .pick-thumb{
    display: none;
  }
  .curric_pickup__message{
    grid-template-columns: 1fr;
  }
  .curric_pickup__message::before{
    width: 100vw;
    height: 60%;
    top: auto;
    bottom: 0;
    left: 50%;
    translate:-50% 0;
  }
  /*feature2 method*/
  .feature-method__explan .comment{
    grid-area: 1 / 1 / 2 / 2;
    z-index: 1;
  }
  .feature-method__explan .diagram{
    grid-area: 2 / 1 / 3 / 2;
    z-index: 1;
  }
  .feature-method_pickup .pick-thumb{
    display: none;
  }
  /*feature3 神戸マツダの支援*/
  .spt__detail-list > li{
    grid-template-columns: 1fr;
  }
  .spt__detail-list > li > div{
    padding-right: min(50px,4vw);
  }
  .feature-spt_pickup {
    padding-top: min(50px,8vw);
  }
  .spt_pickup__intro{
    margin-top: max(-37.5px, -7.5vw);
  }
  .feature-spt_pickup .pick-thumb{
    position: relative;
    width: min(500px, calc(100vw - min(100px, 8vw)));
    margin-left: auto;
    margin-right: auto;
    top: 0;
  }

  /*career ++++++++++++++++++++++++++++++++++++++*/
  .page-quals-item{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    gap:min(30px,5vw);
  }
  .page-quals-item .comment{
    width: 100%;
  }
  .page-quals-item .thumb{
    position: relative;
    width: 100%;
    left: auto;
  }
  .page-quals-item:nth-child(1) .thumb{
     translate:0 0;
  }
  .page-career_detail{
    margin-top: 0;
  }

  .career-emp_head .thumb{
    width: 100%;
    position: relative;
    top: auto;
    left:max(-50px,-5vw);
    translate: 0 0;
  }
  .career-emp_head .comment{
    margin-top: min(30px,6vw);
    width: 100%;
  }
  .career-emp_head .comment .more-text{
    position: relative;
    right: auto;
    top: auto;
    border-radius: 10px;
    width: auto;
    aspect-ratio:auto;
    grid-template-columns: 1fr;
    translate:0 0;
    margin-top: min(40px, 5vw);
  }
  .career-emp_head .comment .more-text p{
    width: auto;
    translate:0 0;
    padding: min(20px,5vw);
  }
  .page-career-voice{
    grid-template-columns: 1fr;
    gap:min(30px,5vw);
  }
  .page-career-voice .title-area{
/*    grid-area: 2 / 1 / 3 / 2;*/
    text-align: center;
  }
  .page-career-voice .comment-area{
/*     grid-area: 1 / 1 / 2 / 2;*/
  }
  /*news +++++++++++++++++++++++++++++++++++++++++++++++++++++*/
  .clm_contents{
    grid-template-columns: 1fr;
  }
  /*contact*/
  .form-list > div{
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
  }
  .form-list dd{
    width: 100%;
  }
}
@media (480px <= width < 768px) {
  #l-side{
    grid-template-columns: 1fr 1fr;
    gap:0 min(40px,4vw);
  }

}

@media screen and (max-width: 600px) {

  /*feature ++++++++++++++++++++++++++++++++++++++*/
  .f-curric__intro .comment .explan{
    width: 100%;
  }
  .f-curric__intro .thumb{
    position: relative;
    width: 100%;
    right: auto;
    bottom: auto;
    margin-top: min(30px,5vw);
    aspect-ratio:1/.6;
    overflow: hidden;
  }
  .f-curric__intro .thumb img{
    object-fit: cover;
    height: 100%;
    object-position: center;
  }

  .method_pickup__intv{
    grid-template-columns: 1fr;
    gap:min(30px,5vw);
  }
  .method_pickup__intv .thumb figure{
    width: 100%;
    aspect-ratio:1;
    overflow: hidden;
  }
  .method_pickup__intv .thumb figure img{
    object-fit: cover;
    height: 100%;
    object-position: top;
  }

}
@media screen and (max-width: 480px) {

  /*outline ++++++++++++++++++++++++++*/
  .happy-feature .point-list >li{
    grid-template-columns: auto auto;
  }

  /*policy　+++++++++++++++++++++++++++++++++++*/
  .policy-contents{
    background-size: auto 100vw;
  }

  .page-policy_detail .graph-area{
    -ms-align-items: center;
    align-items: center;
  }
  .page-policy_detail .c-arw-list{
    display: block;
  }
  .page-policy_detail .c-arw-list > li:nth-child(n+2){
    margin-top: 1.5em;
  }
  .page-policy-blc .text-area{
    text-align: left;
  }

  /*facilities +++++++++++++++++++++++++++++++++++*/
  .page-fac_point{
    grid-template-columns: 1fr;
  }
  .page-fac_point > li .comment p{
    font-size: min(18px,calc(100vw/24));
  }
  /*feature +++++++++++++++++++++++++++++++++++*/

  /*feature2 method*/
  .method_contents{
    background-size: auto 100vw;
  }

  .wid-num-list > li{
    padding-left: 4em;
  }
  .wid-num-list > li::before{
    font-size: 2em;
    top: 0;
    translate: 0 0;
  }
  /*feature3 support*/
  .spt_pickup__health .in-head{
    grid-template-columns: 1fr;
    gap:min(30px,5vw);
  }
  .spt_pickup__health .in-head .thumb{
    display: grid;
    grid-template-columns: min(380px,70vw);
    place-content:center;
  }
  .health-thumb-list{
    grid-template-columns: min(380px,100%);
   justify-content: center;
  }
  /*career ++++++++++++++++++++++++++++++++++++++*/
  .page-career_detail.clm
  ,.page-career_detail dd .dot-list{
    grid-template-columns: 1fr;
  }
  /* teacher ++++++++++++++++++++++++++++++++++++++++*/
  .page-teacher-box{
    grid-template-columns: 1fr;
  }
  /*event archive ++++++++++++++++++++++++++++++++++++++*/
  .event-term-head{
    justify-content: space-between;
  }
    /*facilities ++++++++++++++++++++++++++++++++++++++*/
    .fac_dorm_blc {
      width: 100%;
    }
    .fac_dorm_list {
      padding: 0 20px;
    }
    .fac_dorm_list li{
      display: flex;
      flex-direction: column;
      margin-bottom: 40px;
      width: 100%;
    }
    .fac_dorm_list li:nth-child(even) {
      display: flex;
      flex-direction: column;
    }
    .fac_dorm_list li img {
      width: 100%;
    }
    .fac_dorm_list li dl {
      padding: 20px 0;
    }
}