@charset "UTF-8";
/* ボックスレイアウト
=========================================== */
.flex.col_1 > div {
  width: 100%; }
  @media only screen and (max-width: 767px) {
    .flex.col_1 > div {
      width: 100%; } }

.flex.flex-between.col_1 > div {
  width: 98.5%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_1 > div {
      width: 100%; } }

.flex.col_2 > div {
  width: 50%; }
  @media only screen and (max-width: 767px) {
    .flex.col_2 > div {
      width: 100%; } }

.flex.flex-between.col_2 > div {
  width: 48.5%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_2 > div {
      width: 100%; } }

.flex.col_3 > div {
  width: 33.3333333333%; }
  @media only screen and (max-width: 767px) {
    .flex.col_3 > div {
      width: 100%; } }

.flex.flex-between.col_3 > div {
  width: 31.8333333333%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_3 > div {
      width: 100%; } }

.flex.col_4 > div {
  width: 25%; }
  @media only screen and (max-width: 767px) {
    .flex.col_4 > div {
      width: 100%; } }

.flex.flex-between.col_4 > div {
  width: 23.5%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_4 > div {
      width: 100%; } }

.flex.col_5 > div {
  width: 20%; }
  @media only screen and (max-width: 767px) {
    .flex.col_5 > div {
      width: 100%; } }

.flex.flex-between.col_5 > div {
  width: 18.5%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_5 > div {
      width: 100%; } }

.flex.col_6 > div {
  width: 16.6666666667%; }
  @media only screen and (max-width: 767px) {
    .flex.col_6 > div {
      width: 100%; } }

.flex.flex-between.col_6 > div {
  width: 15.1666666667%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_6 > div {
      width: 100%; } }

.flex.col_7 > div {
  width: 14.2857142857%; }
  @media only screen and (max-width: 767px) {
    .flex.col_7 > div {
      width: 100%; } }

.flex.flex-between.col_7 > div {
  width: 12.7857142857%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_7 > div {
      width: 100%; } }

.flex.col_8 > div {
  width: 12.5%; }
  @media only screen and (max-width: 767px) {
    .flex.col_8 > div {
      width: 100%; } }

.flex.flex-between.col_8 > div {
  width: 11%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_8 > div {
      width: 100%; } }

.flex.col_9 > div {
  width: 11.1111111111%; }
  @media only screen and (max-width: 767px) {
    .flex.col_9 > div {
      width: 100%; } }

.flex.flex-between.col_9 > div {
  width: 9.6111111111%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_9 > div {
      width: 100%; } }

.flex.col_10 > div {
  width: 10%; }
  @media only screen and (max-width: 767px) {
    .flex.col_10 > div {
      width: 100%; } }

.flex.flex-between.col_10 > div {
  width: 8.5%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_10 > div {
      width: 100%; } }

.flex.col_11 > div {
  width: 9.0909090909%; }
  @media only screen and (max-width: 767px) {
    .flex.col_11 > div {
      width: 100%; } }

.flex.flex-between.col_11 > div {
  width: 7.5909090909%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_11 > div {
      width: 100%; } }

.flex.col_12 > div {
  width: 8.3333333333%; }
  @media only screen and (max-width: 767px) {
    .flex.col_12 > div {
      width: 100%; } }

.flex.flex-between.col_12 > div {
  width: 6.8333333333%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_12 > div {
      width: 100%; } }

/* 游ゴシック
=========================================== */
@font-face {
  font-family: "Yu Gothic","Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  src: local("Yu Gothic Medium");
  font-weight: 100; }
@font-face {
  font-family: "Yu Gothic","Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  src: local("Yu Gothic Medium");
  font-weight: 200; }
@font-face {
  font-family: "Yu Gothic","Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  src: local("Yu Gothic Medium");
  font-weight: 300; }
@font-face {
  font-family: "Yu Gothic","Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  src: local("Yu Gothic Medium");
  font-weight: 400; }
@font-face {
  font-family: "Yu Gothic","Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  src: local("Yu Gothic Bold");
  font-weight: bold; }
/* 矢印
=========================================== */
/* 角丸
=========================================== */
/* ページ設定
=========================================== */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; }

html {
  font-family: "-apple-system", BlinkMacSystemFont,"Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-family: sans-serif,"Yu Gothic", YuGothic,"Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic";
  font-weight: 500; }

.min {
  font-family: 'Noto Serif JP', serif; }

.min2 {
  font-family: Times New Roman , "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", Hiragino Mincho ProN , "MSP明朝","MS PMincho","MS 明朝",serif;
  font-weight: normal; }

.linkBox {
  cursor: pointer; }
  .linkBox:hover {
    opacity: 0.8; }

figure img {
  max-width: 100%; }

.container {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto; }
  @media only screen and (max-width: 1520px) {
    .container {
      padding-left: 3%;
      padding-right: 3%; } }

img {
  max-width: 100%; }

/* font size
=========================================== */
html {
  font-size: 62.5%; }

body {
  font-size: 16px;
  font-size: 1.6rem;
  /* 16px*/
  line-height: 1.6; }

.ce {
  text-align: center; }

@media only screen and (max-width: 960px) {
  html, body {
    overflow-x: hidden; } }
h1 {
  font-size: 36px;
  /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(2.4rem + ((1vw - 0.64rem) * 2.1429));
  /* 24px~36pxで可変*/
  line-height: 1.3; }

h1#logo img{width: 338px}


h2 {
  font-size: 24px;
  /* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(2rem + ((1vw - 0.64rem) * 0.7143));
  /* 20px~24pxで可変*/
  line-height: 1.3; }

@media (min-width: 1200px) {
  /* 1200px以上*/
  h1 {
    font-size: 3.6rem;
    /* 36px*/ }

  h2 {
    font-size: 2.4rem;
    /* 24px*/ } }
@media screen and (max-width: 640px) {
  /* 640px以下*/
  body {
    line-height: 2;
    font-size: 1.4rem; }

  h1 {
    font-size: 2.4rem;
    /* 24px*/ }

  h2 {
    font-size: 2rem;
    /* 20px*/ } }
/* iOSでのデフォルトスタイルをリセット
=========================================== */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer; }

input[type="submit"]:-webkit-search-decoration,
input[type="button"]:-webkit-search-decoration {
  display: none; }

input[type="submit"]:focus,
input[type="button"]:focus {
  outline-offset: -2px; }

input[type=radio] {
  margin-top: 0;
  margin-right: 5px; }

/* clearfix
=========================================== */
.clearfix:before,
.clearfix:after {
  content: "";
  display: block;
  overflow: hidden; }

.clearfix:after {
  clear: both; }

.clearfix {
  zoom: 1; }

.left {
  float: left; }

.right {
  float: right; }
  @media only screen and (max-width: 960px) {
    .right {
      float: none;
      margin-left: auto;
      margin-right: auto;
      display: block;
      margin-bottom: 20px; } }

/* リスト
=========================================== */
ul {
  list-style: none; }

/* リンク
=========================================== */
a {
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }

/* flexbox
=========================================== */
.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: -webkit-flexbox;
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; }
  @media only screen and (max-width: 767px) {
    .flex {
      flex-direction: column; } }

.flex.flex-between {
  justify-content: space-between; }

.flex.reverse {
  flex-direction: row-reverse; }
  @media only screen and (max-width: 767px) {
    .flex.reverse {
      flex-direction: row; } }

@media only screen and (max-width: 767px) {
  .spFlexRow {
    flex-direction: row; } }
/* header
=========================================== */
header #hdMenu {
  justify-content: flex-end;
  border-bottom: 1px #f2f2f2 solid;
  padding: 4px 0; }
  @media only screen and (max-width: 960px) {
    header #hdMenu {
      display: none; } }
  header #hdMenu li {
    padding: 0 2em; }
    header #hdMenu li a {
      font-size: 14px;
      color: #000;
      font-family: "Yu Gothic", sans-serif;
      line-height: 1; }



/*Headerの採用情報のリンクに『募集中』を追加*/

/*採用募集中はここを表示する*/

header #hdMenu li a[href*="recruit"] {
  display: inline-block;
	position: relative;
	padding-right: 52px;
}
header #hdMenu li a[href*="recruit"]::after {
content: "募集中";
background-color: #ffe7e7;
padding: 0.2em 0.5em;
border-radius: 4px;
text-align: center;
color: red;
font-size: 12px;
line-height: 1;
white-space: nowrap;
position: absolute;
right: 0;
bottom: -1px;
}

header #hdMenu li a[href*="saiyo"] {
  display: inline-block;
	position: relative;
	padding-right: 52px;
}
header #hdMenu li a[href*="saiyo"]::after {
content: "募集中";
background-color: #ffe7e7;
padding: 0.2em 0.5em;
border-radius: 4px;
text-align: center;
color: red;
font-size: 12px;
line-height: 1;
white-space: nowrap;
position: absolute;
right: 0;
bottom: -1px;
}

/*採用募集中はここを表示する*/


@media only screen and (max-width: 1060px) {
  header #ab_contents #logo img {
    width: 220px; } }
header #page_title {
  margin-top: 12px; }
  header #page_title .container {
    max-width: 1880px;
    margin-left: auto;
    margin-right: auto;
    position: relative; }
  header #page_title #ab_contents {
    padding: 10px 0; }
  header #page_title .page_title {
    background: url(/material/img/highschool/bg_pagetitle.jpg) no-repeat top center;
    background-size: cover;
    height: 340px;
    margin-top: 10px;
    /*display: flex;*/
    align-items: center; }
    @media only screen and (max-width: 960px) {
      header #page_title .page_title {
        height: 200px; } }
    header #page_title .page_title h1 {
      max-width: 1400px;
      margin: auto;
      /*padding: 3.4em 0;*/
      display: flex;
      align-items: center;
      height: inherit; }
      @media only screen and (max-width: 960px) {
        header #page_title .page_title h1 {
          padding: 2.9em 15px; } }
header #spMenu {
  display: none;
  position: absolute;
  width: 64px;
  height: 64px;
  background-color: #000;
  right: 0;
  top: 0;
  padding: 24px 13px; }
  @media only screen and (max-width: 960px) {
    header #spMenu {
      display: block; } }
  header #spMenu:before {
    content: "MENU";
    position: absolute;
    bottom: 3px;
    left: 0;
    color: #fff;
    font-size: 10px;
    text-align: center;
    width: 100%;
    font-weight: bold;
    letter-spacing: 1px; }
  header #spMenu span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #fff;
    position: relative; }
    header #spMenu span:before {
      content: "";
      width: 100%;
      height: 2px;
      background-color: #fff;
      position: absolute;
      top: -11px;
      left: 0;
      transition: .2s; }
    header #spMenu span:after {
      content: "";
      width: 100%;
      height: 2px;
      background-color: #fff;
      position: absolute;
      bottom: -11px;
      left: 0;
      transition: .2s; }
  header #spMenu.open {
    z-index: 10000;
    background-color: #1bb8ce;
    position: fixed; }
    header #spMenu.open:before {
      display: none; }
    header #spMenu.open span {
      background-color: transparent; }
      header #spMenu.open span:before {
        transform: rotate(45deg);
        top: 0px; }
      header #spMenu.open span:after {
        transform: rotate(-225deg);
        top: 0px; }
@media only screen and (max-width: 960px) {
  header #gnavi .parent_menu {
    padding-top: 44px;
    overflow-y: scroll;
    position: fixed;
    width: 100vw;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: #1bb8ce;
    z-index: 10;
    display: none;
    height: 100%;
    /*滑らかスクロール*/
    -webkit-overflow-scrolling: touch; } }
header #gnavi .parent_menu li {
  padding: 1.3em 2em; }
  @media only screen and (max-width: 1270px) {
    header #gnavi .parent_menu li {
      padding: 0 1em; } }
  @media only screen and (max-width: 960px) {
    header #gnavi .parent_menu li {
      width: 100%;
      padding: 0;
      position: relative; }
      header #gnavi .parent_menu li:before {
        content: "";
        display: block;
        width: 8px;
        height: 8px;
        border-right: 2px #fff solid;
        border-bottom: 2px #fff solid;
        transform: rotate(-45deg);
        position: absolute;
        top: 23px;
        left: 20px; } }
  header #gnavi .parent_menu li a {
    font-size: 14px;
    color: #000;
    line-height: 1;
    font-family: "Yu Gothic", sans-serif;
    cursor: pointer; }
    header #gnavi .parent_menu li a.acctit {
      border: none; }
      header #gnavi .parent_menu li a.acctit:before {
        display: none; }
      header #gnavi .parent_menu li a.acctit:after {
        display: none; }
    @media only screen and (max-width: 1130px) {
      header #gnavi .parent_menu li a {
        font-size: 13px; } }
    @media only screen and (max-width: 960px) {
      header #gnavi .parent_menu li a {
        display: block;
        font-family: 'Noto Serif JP', serif;
        color: #fff;
        font-size: 15px;
        padding: 1.3em 3em 1.5em 3em;
        border-bottom: 1px #fff solid;
        border-bottom: 1px solid #fff;
        background-color: inherit;
        margin-top: 0;
        text-align: left; } }
  @media only screen and (max-width: 960px) {
    header #gnavi .parent_menu li.has_child a:hover {
      text-decoration: none; }
    header #gnavi .parent_menu li.has_child:after {
      content: "";
      position: absolute;
      display: block;
      background-image: url(/material/common/img/mrk_ac_open.png);
      background-repeat: no-repeat;
      background-size: 15px;
      width: 20px;
      height: 20px;
      right: 20px;
      top: 20px; } }
  @media only screen and (max-width: 960px) {
    header #gnavi .parent_menu li.open:before {
      transform: rotate(45deg); }
    header #gnavi .parent_menu li.open:after {
      background-image: url(/material/common/img/mrk_ac_close.png);
      top: 27px; } }
  header #gnavi .parent_menu li.sp_only {
    display: none; }
    @media only screen and (max-width: 960px) {
      header #gnavi .parent_menu li.sp_only {
        display: block; } }
  header #gnavi .parent_menu li.logo {
    text-align: center;
    padding: 20px 0 15px 0; }
    header #gnavi .parent_menu li.logo:before {
      display: none; }
  header #gnavi .parent_menu li ul.child {
    padding: 0;
    position: absolute;
    /*background: #333333c7;*/
    background: rgba(51,51,51,0.8);
    margin-left: -23px;
    z-index: 1;
    margin: 0; }
    @media only screen and (max-width: 960px) {
      header #gnavi .parent_menu li ul.child {
        padding-left: 4.5em;
        padding-top: 15px;
        padding-bottom: 15px;
        border-bottom: 1px #fff solid;
        position: inherit;
        background: inherit; } }
    header #gnavi .parent_menu li ul.child li {
      padding: 0; }
      @media only screen and (max-width: 960px) {
        header #gnavi .parent_menu li ul.child li:before {
          display: none; } }
      header #gnavi .parent_menu li ul.child li a {
        border: none;
        padding: 8px;
        padding: 20px 38px;
        border-bottom: 1px solid #fff;
        display: block;
        font-family: "Yu Gothic", YuGothic,"Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
        font-weight: 500;
        font-size: 13px;
        position: relative;
        color: #fff; }
        @media only screen and (max-width: 960px) {
          header #gnavi .parent_menu li ul.child li a {
            padding: 8px 8px 8px 14px !important;
            border-bottom: 0 !important; } }
        header #gnavi .parent_menu li ul.child li a:before {
          content: ">";
          display: block;
          position: absolute;
          top: 35%;
          border-radius: 50%;
          padding: 2px 3px;
          font-size: 10px;
          left: 14px;
          background: #ffffffd1;
          color: #000; }
          @media only screen and (max-width: 960px) {
            header #gnavi .parent_menu li ul.child li a:before {
              content: "";
              display: inline-block;
              width: 4px;
              height: 1px;
              background-color: #fff;
              position: absolute;
              left: 0;
              top: 14px;
              left: 0;
              top: 14px;
              border: none;
              padding: 0; } }
      @media only screen and (max-width: 960px) {
        header #gnavi .parent_menu li ul.child li {
          border: 0;
          text-align: left; } }
    header #gnavi .parent_menu li ul.child.flex-pc2 {
      flex-wrap: wrap;
      display: flex;
      width: 282px; }
      @media only screen and (max-width: 960px) {
        header #gnavi .parent_menu li ul.child.flex-pc2 {
          width: 100%; } }
      header #gnavi .parent_menu li ul.child.flex-pc2 li {
        width: 50%; }
        @media only screen and (max-width: 960px) {
          header #gnavi .parent_menu li ul.child.flex-pc2 li {
            width: 100%; } }
        header #gnavi .parent_menu li ul.child.flex-pc2 li.sub_tit {
          width: 100%;
          border-bottom: 2px solid #fff; }
          @media only screen and (max-width: 960px) {
            header #gnavi .parent_menu li ul.child.flex-pc2 li.sub_tit {
              border-bottom: 0; } }
          header #gnavi .parent_menu li ul.child.flex-pc2 li.sub_tit a {
            padding-left: 15px; }
            header #gnavi .parent_menu li ul.child.flex-pc2 li.sub_tit a:before {
              display: none; }
        header #gnavi .parent_menu li ul.child.flex-pc2 li:last-child {
          width: 100%; }
          header #gnavi .parent_menu li ul.child.flex-pc2 li:last-child a {
            border-bottom: none; }

/* footer
=========================================== */
footer {
  background-color: #080808;
  padding: 3em 0 0 0; }
  footer h3 {
    font-size: 20px;
    color: #fff;
    font-weight: normal;
    margin-bottom: 10px; }
  footer p.ttl {
    font-size: 17px;
    color: #fff;
    padding-left: 30px; }
  footer a {
    color: #fff; }
  footer ul {
    padding-left: 30px;
    margin-top: 5px;
    margin-bottom: 20px; }
    footer ul li a {
      font-size: 15px; }
    footer ul li.mb20 {
      margin-bottom: 20px; }
  footer ul.pl {
    padding-left: 45px; }
  footer ul.textbok li a {
    display: block;
    position: relative;
    padding: 0 10px 0 0;
    font-family: "Yu Gothic", sans-serif;
    margin-right: 10px; }
    footer ul.textbok li a:before {
      content: "";
      display: block;
      width: 1px;
      height: 14px;
      background-color: #fff;
      position: absolute;
      right: 0;
      top: 4px; }
      @media only screen and (max-width: 1200px) {
        footer ul.textbok li a:before {
          display: none; } }
  footer ul.textbok li:last-child a:before {
    display: none; }
  footer .ftLink p.ttl {
    font-size: 17px;
    margin-bottom: 20px; }
    @media only screen and (max-width: 960px) {
      footer .ftLink p.ttl {
        padding-left: 0; } }
    footer .ftLink p.ttl a img {
      max-width: 100%; }
  footer .container .flex > div {
    width: 25%; }
    @media only screen and (max-width: 1200px) {
      footer .container .flex > div {
        width: 100%; } }
  footer .copyright {
    background-color: #fff;
    font-size: 14px;
    color: #505050;
    padding: 15px 0;
    text-align: center; }
.g-search{display: flex; justify-content: flex-end;}
@media only screen and (max-width: 767px) {
    .g-search {
        display: flex;
        justify-content: flex-start;
        width: auto; /* 幅を自動に設定し、要素の内容に応じて調整 */
        max-width: 200px; /* 最大幅を200pxに制限 */
        margin-right: auto; /* メニューが右上にある場合、右にスペースを空ける */
    }
}