@charset "utf-8";


/* responsive
---------------------------------------------- */


/*=====================================================
	  タブレット 1024px
===================================================== */
@media screen and (max-width: 1024px) {

body {
    box-sizing: border-box;
}


/* トップページ
---------------------------------------------- */

p#header_tel img {
    width: 150px;
}

.slider-pro {
    padding: 20px;
    box-sizing: border-box !important;
}

.sp-mask.sp-grab {
    width: 100% !important;
}

.news_area {
    display: block;
    box-sizing: border-box;
    margin-bottom: 80px !important;
}

.news_tit {
    padding-top: 0;
}

.news_tit h2 {
    text-align: center;
}

.news_tit p {
    text-align: right;
    margin-top: 0;
    padding-right: 10px;
}

.news_t_list ul {
    width: 100%;
}

.cls_area {
    background-position: 34% bottom;
    background-size: auto 100%;
    height: auto;
}

.cls_cnt {
    box-sizing: border-box;
}

.cls_cnt h2 {
    position: absolute;
    right: 50px;
}

a.clsgid_btn {
    top: -60px;
    right: 150px;
}

a.clsgid_btn img {
    width: 120px;
    height: auto;
}

.cls_area h3 {
    font-size: 220%;
    margin-bottom: 50px;
}

ul.clsrm_list {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}

.crs_area {
    box-sizing: border-box;
}

ul.crs_list li h3 {
    font-size: 150%;
}

.link_box {
    box-sizing: border-box;
}

div#js-scroll-fadein {
    right: 20px;
}

div#footer_innner {
    padding: 20px;
    box-sizing: border-box;
}

.ft_logo {
    width: 168px;
    margin-right: 30px;
    margin-top: 10px;
}

.ft_logo img {
    width: 100%;
    height: auto;
}

}/* 1024px ============================= */




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

.sp-thumbnails-container {
    display: none;
}

.sp-buttons {
    display: block;
}

.sp-selected-button {
    background-color: #858585 !important;
}

.sp-button {
    width: 10px !important;
    height: 10px !important;
    border: 2px solid #858585 !important;
}


.news_t_list ul li a.t_new_lk {
    display: block;
    margin-top: 15px;
    width: 100%;
}

ul.crs_list li h3 {
    font-size: 114%;
}

.event_box a.event-button,
.event_box.evt04 + p {
    font-size: 100%;
}

}/* 820px ============================= */

/*=====================================================
	  スマートフォン 600px
===================================================== */
@media screen and (max-width: 600px) {

/* トップページ
---------------------------------------------- */
div.wrap_header {
    display: none;
}

header {
    padding-top: 10px;
    margin-top: 0;
}

h2#h2_logo {
    text-align: left;
    margin-bottom: 15px;
    position: relative;
    z-index : 1;
}

p#header_tel {
    position: static;
    text-align: center;
}

h2#h2_logo {
    background: none !important;
    display: inline-block;
}

/*　ハンバーガーメニューボタン
---------------------------------------------- */

.hamburger {
  display : block;
  position: absolute;
  z-index : 9600;
  right: 15px;
  top: 8px;
  width : 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
}

.hamburger.active {
    position: fixed;
    top: 8px;
}

.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 3px ;
  left    : 6px;
  background : #1f2868;;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 20px;
}
.hamburger span:nth-child(3) {
  top: 30px;
}

/* スマホメニューを開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 16px;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

/* メニュー背景　*/
nav.globalMenuSp {
  position: fixed;
  z-index : 9500;
  top  : 0;
  left : 0;
  background: white;
  text-align: center;
  width: 100%;
  opacity: 0;
  display: none;
  transition: opacity .6s ease, visibility .6s ease;
}

nav.globalMenuSp ul {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

nav.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  transition: .4s all;
}
nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
}
nav.globalMenuSp ul li:hover{
  background :#ddd;
}

/* クリックでjQueryで追加・削除 */
nav.globalMenuSp.active {
  opacity: 100;
  display: block;
}

ul#navi_global_t2 {
    display: block;
    padding-top: 60px;
}

ul#navi_global_t2 li {
    width: 100%;
}

ul#navi_global_t2 li a {
    padding-top: 10px;
}

.slider-pro {
    margin-bottom: 0 !important;
    padding: 0px;
}

.sp-thumbnails.sp-grab {
    height: auto !important;
}

.sp-thumbnail-container {
    width: 146px !important;
    height: 55px !important;
}

.news_tit p {
    margin: 20px 0 10px;
}

.news_t_list ul li {
    padding: 20px 0;
    padding-left: 0;
    padding-right: 40px;
}

span.new_mark {
    position: absolute;
    left: auto;
    right: 0;
    top: 20px;
    transform: translateY(-50%);
    text-align: center;
    display: inline-block;
    width: 48px;
    height: 20px;
    color: white;
    background: #ff7a7a;
    border: none;
    border-radius: 24px;
    font-size: 90%;
    font-weight: bold;
    padding-top: 2px;
    box-sizing: border-box;
}

span.cat_box {
    vertical-align: 1px;
}

.cls_area {
    background-position: 28%;
}
.cls_cnt {
    padding-top: 80px;
}

.cls_cnt h2 {
    position: absolute;
    right: 20px;
    top: -94px;
}

a.clsgid_btn {
    top: -60px;
    right: auto;
}

.cls_area h3 {
    font-size: 150%;
    margin-bottom: 50px;
    text-align: left;
}

ul.clsrm_list li {
    width: calc(50% - 16px);
}

ul.crs_list {
    display: block;
}

ul.crs_list li {
    width: 100%;
    margin: 40px 0 0;
}

ul.crs_list li h3 {
    font-size: 180%;
}

.cnt_area ul {
    display: block;
    text-align: center;
}

.cnt_area ul li {
    margin: 20px 0 0;
}

ul#link_ls li {
    width: 47%;
}

ul.event_list {
    display: block;
}

ul.event_list li {
    width: 100%;
    margin: 40px 0 0;
}

div#js-scroll-fadein {
    width: 40px;
    height: 40px;
    z-index: 9000;
}

div#js-scroll-fadein span {
    font-size: 300%;
}

div#footer_innner {
    padding-top: 40px;
}

.ft_logo {
    width: 100%;
    margin-right: 0;
    margin-top: 10px;
    float: none;
}

div#wrap_navi_footer,
ul.navi_footer {
    width: 100%;
    float: none;
}

ul.navi_footer.mb_15 {
    margin: 0 !important;
}

ul.navi_footer li {
    float: none;
    font-size: 100%;
    line-height: 1.2;
    margin: 15px 20px 0;
    margin-right: 0;
}

}/* 600px ============================= */