@charset "UTF-8";

/*!
Theme Name: Cocoon Child 教室検索
Template:   cocoon-master
Version:    1.1.2
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

body {
  line-height: inherit !important;
}
.content {
  margin: 0 auto;
}
.main {
  padding: 0 !important;
  /* width: 900px; */
}
a {
  color:darkblue;
}

/* top非表示用 */
/* .logo {
	display: none;
}
.navi {
	display: none;
} */
.tagline {
	display: none;
}
#mini-menu {
  display: none;
}
.type-page {
  margin: 10px;
}

/*サイトヘッダー統一設定*/
.header-container-in {
  width: 100%;
  padding: 0 0 0 20px;
}
.fixed-header .site-logo-image {
  width: 200px;
}
#navi .navi-in > ul > li > a {
  padding: 0 0.8em;
}
.navi-in a {
  font-weight: bold;
  font-size: 0.8em;
}
/*ヘッダーメニューの最後を装飾*/
.header .header-in {
  min-height: initial;
}
.menu-pc li:hover {
  background-color: #999 !important;
}
.menu-pc li:last-child a {
  background-color: #333;
  color: #fff !important;
  /* border-radius: 50px; */
}
.menu-pc li:last-child a:hover {
  background-color: #999 !important;
  color: #000 !important;
}
.sub-menu li a:hover {
  background-color: #333 !important;
  color: #fff !important;
}
.sub-menu li:last-child a {
  background-color: #999;
  color: #000 !important;
  border-radius: initial;
}
.sub-menu li:last-child a:hover {
  background-color: #333 !important;
  color: #fff !important;
}



.header-container,
.main,
.sidebar,
.footer {
  background-color: #fff;
}
.no-sidebar .content .main {
  margin: 0;
  width: 900px;
  background-image: url(img/site_bg_teach.gif);
}
.no-sidebar .content-in {
  display: block;
  width: 900px;
}
#mv {
	/* background: #dee3e6;  */
	/* border-top: 1px solid #ffd5d5;
  border-bottom: 1px solid #ffd5d5; */
	width: 100%;
}
#mv img {
	margin: 0 auto;
	display: block;
}




/* 検索フォーム用 */
div.search_box {
  text-align: left;
  margin: 15px;
}
#srch {
  margin: -10px 200px 50px;
  text-align: center;
  text-decoration: none;
  color: #666;
  background-color: #fff;
  border: solid 3px #7ebbd9;
  border-radius: 10px;
  z-index: 1;
  position: relative;
  /* font-size: 0.8em;
  padding: 10px 5px;
  margin: auto; */
}

.pc-header {
  margin: 0 auto 30px;
  width: 900px;
  height: 322px;
}
.srch-pc {
  margin: -260px 50px 50px 400px;
  text-align: center;
  text-decoration: none;
  color: #666;
  background-color: #fff;
  border: solid 3px #7ebbd9;
  border-radius: 10px;
  z-index: 1;
  position: relative;
  /* font-size: 0.8em;
  padding: 10px 5px;
  margin: auto; */
}


.search_container{
  position: relative;
  box-sizing: border-box;
  border: 2px solid #999;
  display: block;
  /* padding: 3px 10px; */
  border-radius: 5px;
  height: 2em;
  width: 100%;
  overflow: hidden;
}
.search_container input[type="text"]{
  border: none;
  height: 1.8em;
  font-size: 0.8em;
}
.search_container input[type="text"]:focus {
  outline: 0;
}
.search_container input[type="submit"]{
  cursor: pointer;
  font-family: FontAwesome;
  border: none;
  background: #999;
  color: #fff;
  position: absolute;
  width: 3.5em;
  height: 3.5em;
  right:-1px;
  top: -5px;
  outline : none;
}
.search_container input[type="button"]{
  cursor: pointer;
  font-family: FontAwesome;
  border: none;
  background: #fff;
  color: #7ebbd9;
  position: absolute;
  width: 3.5em;
  height: 3.5em;
  right:-1px;
  top: -5px;
  outline : none;
}


/* エリア一覧 */
#area {
  width: 600px;
  margin: auto;
}
#area h2 {
  color: #0086c8;
  padding-left: 0.5em;
  border-left: solid 5px #7db4e6;/*左線*/
  border-bottom: solid 1px #0086c8;
  /* background: #f4f4f4; */
}
#area li {
  width: 18%;
  margin: 2px;
}
#area li a {
  text-decoration: none;
  color: #333;
  margin: 0 5px;
  display: block;
	padding: 3px 5px;
	background: #fff;
	font-size: 0.9em;
	border-radius: 5px;
	border: 1px solid darkgray;
  text-align: center;
  width: 100%;
}
.left {
  list-style:  none;
  display: flex;
  flex-wrap: wrap;
  margin: 3px;
  padding: 5px 5px 30px 0 !important;
}

/* お役立ち情報	 */
.useful{
  text-decoration: none;
  color: #666;
  background-color: #fff;
  border: solid 3px #7ebbd9;
  border-radius: 10px;
  z-index: 1;
  position: relative;
  margin: 10px;
}
.useful h3 {
  color: #0086c8;
  padding-left: 0.5em;
  border-bottom: solid 1px #0086c8;
}
.useful li {
  padding: 0.5em 0.5em 0.5em 2em;
}
.useful li a {
  text-decoration: none;
  color: #333;
  margin: 0 5px;
  display: block;
  text-align: left;
  width: 80%;
}


/* 検索一覧書換用 */
.items-center {
  background-color: #ddd;
}
.border {
  background-color: #fff;
}
.toast-wrapper {
  bottom: 60px !important;
}
.border-2 {
  border-width: 2px;
  border-radius: 10px;
  background-color: aliceblue;
}


/* 教室シングル用 */
/* .no-sidebar .content .main {
  font-size: 0.8em;
} */
.mb-4 {
  margin-left: 20px;
}
.lg\:w-1\/4 {
  width: 50% !important;
}

.bc-top{
  background-color: #ddd;
  margin: 0;
  padding: 5px;
}
.glay-back{
  background-color: #ccc;
  margin: 10px;
  padding: 2px;
}
#school-1 {
  /* width:95%; */
  background-color: #fff;
  border: 1px solid #ddd;
  margin: 10px;
  border-radius: 10px;
}
#school-1 .gnd {
  text-align: left;
}
#school-1 h3 {
  padding: 10px;
  font-size: 12px;
}
.text-sm {
  font-size: 11px !important;
}

#school-2 {
  /* width:95%; */
  background-color: #fff;
  border: 1px solid #ddd;
  margin: 10px;
  border-radius: 10px;
}
#school-2 h3 {
  color: #fff;
  text-align: center;
  background-color: darkblue;
  padding: 10px;
  font-size: 12px;
}
#school-2 h5 {
  padding: 10px;
  font-size: medium;
}
#school-2 ul li{
  display: inline-block;
}


.school-menu {
  text-align: center;
  padding-left: 0;
  margin: 15px;
}
.school-menu li +li{
  /* border-left: 1px solid #333; */
  padding: 0 5px 0 5px;
}
.school-menu a {
  font-size: 12px;
  font-weight: bold;
  color: darkblue;
  /* text-decoration-line: underline; */
}
.school-menu a::before {
  font-family: FontAwesome !important;
  content: "\f138" !important;
  position: relative;
  right: 0.3em !important;
  color: #7ebbd9 !important;
}


#school-3 {
  /* width:95%; */
  background-color: #fff;
  border: 1px solid #ddd;
  margin: 10px;
  border-radius: 10px;
}
#school-3 .qa-box {
  background-color: #fff;
  width: 90%;
  padding: 10px;
  margin: auto;
}
#school-3 .que {
  margin: 5px;
  color:brown;
  font-weight: bold;
}
#school-3 .anc1 {
  margin: 5px;
  color: #000;
  font-weight: bold;
  margin-bottom: 10px;
}
#school-3 .anc2 {
  margin: 5px;
  color: #000;
  font-weight: bold;
}
#school-3 hr.line {
  margin: 20px 0;
	border-top: 1px dashed #8c8b8b;
}


.school-id {
  padding-right: 5px;
  text-align: right;
}
.school-img img{
  margin: auto;
}
.school-msg {
  padding: 10px;
}
.font-bold {
  color:darkblue;
  margin-left: 10px;
  border-bottom: 1px solid #000;
}

.fixed {
  background:#fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  box-shadow:0 0 5px;
}

.k-logo img {
  margin: auto;
}



#pc-menu {
  margin-left: auto;
}
#pc-menu ul {
  padding-left: 0;
}
#pc-menu li{
  float: left;
  list-style: none;
  margin: 0 30px 0 0;
}
#pc-menu li a {
  vertical-align: middle;
}
.pc-menu {
  text-align: center;
  padding-left: 0;
  margin: 15px;
}
.pc-menu li +li{
  /* border-left: 1px solid #333; */
  padding: 0 5px 0 5px;
}
.pc-menu a {
  font-size: 12px;
  font-weight: bold;
  color: darkblue;
  /* text-decoration-line: underline; */
}
.pc-menu a::before {
  font-family: FontAwesome !important;
  content: "\f138" !important;
  position: relative;
  right: 0.3em !important;
  color: darkblue!important;
}



.boxContainer{
  display: flex;
  background-color: #fff;
}

/* フッターバナー用 */
#service {
  display: flex;
  width: 900px;
  background-color: #fff;
}
#service img {
  margin-top: 10px;
  display: inherit;
}
.reg {
  width: 50%;
  text-align: center;
}
.con {
  width: 50%;
  text-align: center;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*768px以下*/
@media screen and (max-width: 768px){
  #srch {
    margin: -25px 20px 20px;
  }
  .footer {
    margin-top: 0;
  }
  .subtitle {
    font-size: 12px;
    color: #333;
    text-align: center;
    margin: 0;
    background-color: #7ebbd9;
  }

  .header__gnav__bottom {
    display: none;
  }

  .mobile-menu-buttons,
  .mobile-menu-buttons .menu-button>a {
    background-color: #343534;
    color: #fff;
  }
/* .navi-menu-content {
      background-color: #7ebbd9;
  } */
  .menu-content {
    background-color: #343534;
    color: #fff;
  }
  .menu-content a {
    color: #fff;
  }
  .menu-close-button {
    color: #fff;
  }


  /*サイトメニュー*/
  ul.menu-drawer {
    background-color: #fff;
    padding: 0 !important;
  }

  ul.menu-drawer a {
    padding-left: 35px;
    color: #000;
    text-decoration: none;
  }

  ul.menu-drawer li {
    border-bottom: dashed 1px silver;
  }

  ul.menu-drawer li:last-child {
    border: none;
    margin: 0;
  }

  ul.menu-drawer li:before {
    font-family: FontAwesome;
    /* font-family:"Font Awesome 5 Free"; */
    content: "\f054";
    position: absolute;
    right: 35px;
    font-size: 0.8em;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
    color: #000;
    padding: 0.8em;
  }

  /*オンキョウ統一メニュー*/
  .portal {
    margin: 55px 35px 15px 35px;
  }

  .portal a {
    text-decoration: none;
    /* color: #ffb03f; */
    color: #fff;
  }

  .portal ul {
    /* border: solid 2px #ffb03f; */
    border: solid 2px #fff;
    padding: 0.5em;
    position: relative;
    margin-top: 2em;
  }

  .portal ul li {
    line-height: 1.5;
    padding: 0.5em 0 0.5em 1.4em;
    border-bottom: dashed 1px silver;
    list-style-type: none !important;
  }

  .portal ul li:last-of-type {
    border-bottom: none;
  }

  .portal ul li:before {
    /*リスト内のアイコン*/
    font-family: FontAwesome;
    /* font-family:"Font Awesome 5 Free"; */
    content: "\f138";

    /*アイコン種類*/
    position: absolute;
    left: 0.5em;
    /*左端からのアイコンまで*/
    /* color: #ffb03f; */
    color: #fff;
    /*アイコン色*/
  }

  .portal ul li:after {
    /*タイトルタブ*/
    /* background: #ffb03f; */
    background: #fff;
    color: #000;
    font-weight: bold;
    position: absolute;
    left: -2px;
    bottom: 100%;
    padding: 1px 7px;
    content: "オンキョウメニュー";
    letter-spacing: 0.05em;
  }


  .mobile-logo {
    display: flex;
    width: 100%;
    /* background-color: #7ebbd9; */
    background-color: #fff;
    padding-left: 0;
  }
  .mobile-logo li {
    display: inline-block;
  }
  .mobile-logo img {
    width: 70%;
  }
  .srv-logo {
    width: 80%;
  }
  .search-icon {
    width: 20%;
    background-color: darkblue;
    color: #fff;
    padding: 10px 5px 0 5px;
    font-size: larger;
    text-align: center;
  }
  .srch {
    margin: auto;
  }
  .mb-4 {
    margin-left: 10px;
    margin-right: 10px;
  }
  .lg\:w-1\/4 {
    width: 100% !important;
  }

  /* モバイルサーチボックス表示 */
  .slide-contents {
    width: 100%;
    margin: 80px 0 1.6em 0;
    display: none;
    z-index: 100;
    position: absolute;
  }

  .mob-logo {
    background-color: #fff;
    vertical-align: middle;
    width: 80%;
  }
  .mob-logo img {
    width: 70%;
  }


}

/*480px以下*/
@media screen and (max-width: 480px){
  #header-in {
    display: none;
  }
  .boxContainer {
    height: 42px;
  }
  .h-12 {
    /* 申し込みボタン位置調整 */
    height: 5rem !important;
  }
  .school-menu li +li{
    /* border-left: 1px solid #333; */
    padding: 0 2px 0 2px;
  }
  .no-sidebar .content-in {
    /* display: block; */
    width: 100% !important;
  }
  .no-sidebar .content .main {
    /* margin: 0; */
    width: 100% !important;
    font-size: 0.9em;
  }
  #area {
    width: 90%;
    margin: auto;
  }
  #service {
    /* display: block; */
    width: 100%;
  }
  /* .reg {
    width: 100%;
  }
  .con {
    width: 100%;
  } */
}