@charset "utf-8";
/* -------------------------------------
     sp CSS
 (c) Copyright 2020 Sketches of Design
     version 2020-12-26
------------------------------------- */

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


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

  .titlearea h1 span{
    font-size: 4.0rem;
  }
  #career-idx span,
  #content-inner #entryarea h2{
    font-size: 3.0rem;
  }
  #content-inner h2{
    font-size: 2.4rem;
  }
  #content-inner h3,
  #recruit-header h1 a{
    font-size: 2.0rem;
  }
  #guide-idx #content-inner dl dt{
    font-size: 1.8rem;
  }
  .titlearea h1,
  #career-idx h2,
  #content-inner h4{
    font-size: 1.6rem;
  }
  #recruit-header .entrybtn em,
  #content-inner table,
  #content-inner li,
  #content-inner dl,
  #content-inner p{
    font-size: 1.4rem;
  }
  #recruit-header .entrybtn a{
    font-size: 1.2rem;
  }
  /**/
  .titlearea h1{
    padding: 50px 20px;
  }
  #career-idx #message-area,
  #career-idx #lv02-01 .item{
    padding: 40px 0;
  }
  #content-inner section .inner{
    padding: 0 20px;
  }
  #content-inner #entryarea .inner{
    margin: 0 20px;
    padding: 40px;
  }
  #recruit-header,
  #recruit-header .entrybtn a,
  #hamburger{
    height: 59px;
  }
  #recruit-header h1 a{
    line-height: 59px;
  }
  #hamburger,
  #recruit-header .entrybtn a{
    width: 60px;
  }
  #hamburger{
    right: 60px;
  }
  #hamburger span{
    width: 22px;
  }
  .line01{
    top: 22px;
  }
  .line02{
    top: 30px;
  }
  .line03{
    top: 38px;
  }
  .open .line01,
  .open .line03{
    top: 30px;
  }
  #content-inner #lv02-01 h2{
    margin-top: 0;
  }
  #welfare-idx #content-inner section:not(#entryarea) h2{
    margin: 40px 0 20px 0;
  }
  #welfare-idx #lv02-02 .block .inner {
    padding: 0;
  }
  #message-idx #mainpic{
    padding: 0 20px 40px 20px;
  }
  #message-idx section h2{
    padding: 0 0 0 40px;
    margin: 60px 0 20px 0;
  }
  #message-idx section h2 span{
    width: 30px;
    height: 30px;
    line-height: 28px;
  }
  #message-idx .messageimage,
  #message-idx .boxarea{
    width: 100%;
  }
  #message-idx .boxarea .box{
    font-size: 1.6rem;
  }
  #alumni-idx #lead .box{
    margin: 40px 20px !important;
  }


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

  #career-idx #lv02-01 .column3 div .pic img{
    height: 220px;
  }


/**/
/*
main section .inner{
  width: auto !important;
  height: 100%;
}
main section .inner{
  margin: 0 5%;
}
#{
  float: none !important;
  display: block !important;
}
#{
  display:block;
}
#{
  display:none;
}
#{
  margin: 0;
  padding: 0;
}
#{
  padding: 0 5%;
}
#{
	background-size: 100px 100px !important;
	-webkit-background-size: 100px 100px !important;
	-moz-background-size: 100px 100px !important;
	-ms-background-size: 100px 100px !important;
	-o-background-size: 100px 100px !important;
  width: 100px;
  height: 100px;
}
*/


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

  img{
    max-width: 100%;
    height: auto;
    width /***/:auto;
  }
  /* diagram */
  .diagram .sp{
    display: block !important;
  }
  .diagram .image{
    display: none;
  }
  .diagram{
    position: relative;
  }
  .diagram span{
    display: block;
    position: absolute;
    width: 30px !important;
    height: 30px !important;
    right: 10px;
    margin: -40px 0 0 0;
  }
  .diagram img{
    max-width: 100%;
    height: auto;
    width /***/:100%;
  }
  /**/
    #guide-idx #content-inner dl dt{
      font-size: 1.6rem;
    }

  /**/
  br.sp{
    display: block;
  }
  #content-inner h2{
    margin: 40px 0 20px 0;
  }
  #content-inner h3 {
    margin: 0 0 10px 0;
  }
  .guide-leaf #content-inner section h4 {
    margin-top: 20px;
  }
  #guide-idx #content-inner dl dt{
    padding: 14px 40px 14px 14px;
  }
  #guide-idx #content-inner dl dt::after{
    right: 15px;
    height: 2px;
    width: 15px;
  }
  #guide-idx #content-inner dl dt::before{
    right: 22px;
    height: 15px;
    width: 2px;
  }
  #content-inner #entryarea h2{
    margin: 0 0 10px 0;
  }
  #content-inner #entryarea .inner{
    padding: 20px 20px 30px 20px;
  }
  #content-inner #entryarea{
    padding: 40px 0 0 0;
  }
  footer{
    margin: 40px 0 0 0;
  }
  #welfare-idx #lv02-01 img{
    width: 100px;
  }
  #welfare-idx #lv02-01 .lv03-02 img{
    width: 140px;
  }
  #welfare-idx #lv02-02 img{
    width: 200px;
  }
  #welfare-idx #lv02-02 .block .inner {
    width: calc(100% - 220px);
  }
  #welfare-idx #lv02-01 .block,
  #welfare-idx #lv02-02 .block{
    padding: 15px;
  }
  #welfare-idx #content-inner section:not(#entryarea) h2 {
    margin: 20px 0 15px 0;
  }
  #message-idx section .images{
    width: 40%;
  }
  #message-idx section .text{
    width: calc(60% - 40px);
  }
  #alumni-idx h3{
    margin: 40px 0 20px 0;
  }
  #career-idx #lv02-01 .column3 div .pic img{
    height: 170px;
  }


}
/*  667
--------------------------------------*/
@media screen and (max-width: 667px) {
  #guide-idx #content-inner dl dt,
  #recruit-header li a{
    font-size: 1.4rem;
  }
  #content-inner h4{
    font-size: 1.5rem !important;
  }
  #welfare-idx .inner .block h3,
  #content-inner h3,
  #recruit-header h1 a{
    font-size: 1.8rem;
  }
  #content-inner h2,
  #recruit-header li a span{
    font-size: 2.0rem;
  }
  #welfare-idx #lv02-01 .data .number span,
  #content-inner #entryarea h2,
  #career-idx span{
    font-size: 2.4rem;
  }
  #welfare-idx #lv02-01 .data .number span em{
    font-size: 6.0rem;
  }
  #message-idx #content-inner #entryarea .link,
  #message-idx #content-inner #entryarea .link a,
  #message-idx section .text,
  #welfare-idx #lv02-01 .lv03-01 .data,
  #welfare-idx #lv02-03 .block,
  #welfare-idx #lv02-02 .images,
  #welfare-idx #lv02-02 .block .inner,
  #welfare-idx #lv02-01 .lv03-01 .text,
  #career-idx #lv02-01 .flex div,
  #career-idx .item .text,
  #career-idx .item .pic{
    width: 100%;
  }
  #career-idx h2{
    margin: 5px 0 10px 0 !important;
    font-size: 1.4rem;
  }
  #welfare-idx #lv02-01 .lv03-01 .data{
    margin: 0 auto;
  }
  #welfare-idx #lv02-02 img{
    width: 100%;
    height: 300px;
    object-fit: cover;
  }
  #message-idx section h2 span {
    width: 25px;
    height: 25px;
    line-height: 23px;
    font-size: 1.8rem;
  }
  #message-idx section .images{
    margin: 0 auto;
    width: 100%;
  }
  #message-idx section .images img{
    object-position: 0 0;
    width: 100%;
    height: 260px;
    object-fit: cover;
  }
  #message-idx #mainpic img,
  #message-idx .messageimage img,
  #message-idx .pic img{
    width: 100%;
    height: 300px;
    object-fit: cover;
  }
  #message-idx .messageimage img{
    height: 400px;
  }
  #message-idx .boxarea{
    padding: 0 20px;
  }
  #message-idx .boxarea .box {
    padding: 20px;
    font-size: 1.4rem;
  }
  #alumni-idx #lead .box{
    margin: 0 20px 40px 20px !important;
  }
  #career-idx #lv02-01 .column3 div .pic img{
    height: 100%;
  }

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

  #recruit-header{
    padding: 0 10px;
  }
  #recruit-header h1 a{
    font-size: 1.6rem;
  }
  #recruit-header .entrybtn em{
    font-size: 1.2rem;
  }
  #recruit-header .entrybtn a{
    font-size: 1.0rem;
  }
  #hamburger {
    right: 50px;
  }
  #hamburger,
  #recruit-header .entrybtn a {
    width: 50px;
  }
  #recruit-header,
  #recruit-header .entrybtn a,
  #hamburger {
    height: 49px;
  }
  #recruit-header h1 a {
    line-height: 49px;
  }
  #hamburger span {
    width: 20px;
  }
  .line01{
    top: 18px;
  }
  .line02{
    top: 24px;
  }
  .line03{
    top: 30px;
  }
  .open .line01,
  .open .line03{
    top: 24px;
  }
  #recruit-header nav{
    width: 90%;
  }
  #recruit-header li a{
    padding: 5px 0;
  }
  #welfare-idx #lv02-02 .lv03-02 li,
  #welfare-idx #lv02-01 .block{
    width: 100%;
  }
  #welfare-idx #lv02-02 img{
    height: 200px;
  }
  #welfare-idx #lv02-02 .lv03-01 img{
    object-position: 0 -30px;
  }
  #message-idx #mainpic img,
  #message-idx .messageimage img,
  #message-idx .pic img{
    width: 100%;
    height: 260px;
    object-fit: cover;
  }



}
/*  375
--------------------------------------*/
@media screen and (max-width: 375px) {
  #welfare-idx #lv02-02 img{
    height: 150px;
  }
  #message-idx .boxarea .box br{
    display: none;
  }



}