@charset "utf-8";
/* COMMON STYLE */
.ul-osusume { margin-top: 0; margin-bottom: 0}
.ul-osusume li { margin-bottom: 0!important; list-style-type: disc!important; line-height: 1.5!important}
.icon.review { display: inline-block; width: 30px; height: 28px; background: url(../img/common/icon-review.png) no-repeat left top/30px auto}
.text-no { margin-bottom: 10px!important}
@media screen and (min-width: 751px) {
  .post_content { padding: 0 20px}
  .text-no { margin-bottom: 20px!important}
}
/* タブ */
.tabs {  margin-top: 60px}
.tab_item { display: block; float: left; width: 24.5%; height: 50px; line-height: 50px; color: #999; font-weight: bold; text-align: center; background: #d1d3d3; border-radius: 4px 4px 0 0; transition: all 0.2s ease}
.tab_item:nth-of-type(2) { margin: 0 0.65%}
.tab_item:nth-of-type(3) { margin-right: 0.7%}
.tab_item:hover { opacity: 0.75}
input[name="tab_item"] { display: none}
.tab_content { display: none; clear: both; overflow: hidden; padding: 10px 10px 0; border: 2px solid #41aea2}
#all:checked ~ #all_content,
#branch:checked ~ #branch_content,
#faq:checked ~ #faq_content,
#review:checked ~ #review_content { display: block; width: 100%}
.tabs input:checked + .tab_item {  color: #fff; background: #41aea2}
@media screen and (max-width: 750px) {
  .tab_item { font-size: 14px}
}
@media screen and (min-width: 751px) {
  .tab_content { padding: 40px 40px 10px}
}
/* 概要 */
.prep-school .outline .ad { display: none}
.prep-school .ad-prep-school { padding: 20px; text-align: center; background: #eee; border-radius: 3px}
.prep-school .ad-prep-school figcaption { margin-bottom: 20px; font-weight: normal}
.prep-school .outline .text { margin-top: -30px}

.btn-area { display: flex; justify-content: center; flex-wrap: wrap}
.btn-area .btn { display: flex; justify-content: center; align-items: center; height: 50px; color: #fff; font-size: 13px; font-weight: bold; border-radius: 8px}
.btn-area .btn.official { background: #ec6c8f; box-shadow: 5px 5px 0 #f5b5c7}
.btn-area .btn.documents { background: #4a9bcf; box-shadow: 5px 5px 0 #a4cde7}
.btn-area .btn.seminar { background: #4cb577; box-shadow: 5px 5px 0 #a5dabb}
.btn-area .btn.online { background: #8a6b8c; box-shadow: 5px 5px 0 #c4b5c5}
.btn-area .btn { width: 48.5%}
.btn-area .btn:nth-of-type(2), .btn-area .btn:nth-of-type(4)  { margin-left: 3%}
.btn-area .btn:nth-of-type(3), .btn-area .btn:nth-of-type(4)  { margin-top: 16px}
@media screen and (max-width: 750px) {
  .prep-school .outline .img-prep-school { height: 200px; margin-bottom: 30px; border-bottom: 1px solid #ddd; overflow: hidden}
  .prep-school .outline .img-prep-school img { width: 100%; height:  200px;  object-fit: cover; object-position: 0 0}
  .prep-school .outline .text { margin-top: 20px}
}
@media screen and (min-width: 751px) {
  .prep-school .outline { display: flex; justify-content: space-between}
  .prep-school .outline figure { width: 33%}
  .prep-school .outline .text { width: calc(100% - 33% - 50px)}
  .prep-school .ad-prep-school img { max-width: 250px}
  .btn-area .btn { position: relative; height: 60px; font-size: 18px; border-radius: 100vh}
  .btn-area .btn:nth-of-type(3), .btn-area .btn:nth-of-type(4)  { margin-top: 15px}
  .btn-area .btn::before { content: ""; position: absolute; left: 20px}
  .btn-area .btn.official::before {  width: 25px; height: 25px; background: #ec6c8f url(../img/common/icon-site.svg) no-repeat left center/25px auto}
  .btn-area .btn.documents::before {  width: 25px; height: 25px; background: #4a9bcf url(../img/common/icon-shiryou.svg) no-repeat left center/25px auto}
  .btn-area .btn.seminar::before {  width: 25px; height: 25px; background: #4cb577 url(../img/common/icon-sodan.svg) no-repeat left center/25px auto}
  .btn-area .btn.online::before {  width: 25px; height: 25px; background: #8a6b8c url(../img/common/icon-online.svg) no-repeat left center/25px auto}
}
/* 基本情報 */


.pr-area { max-width: 900px; margin: 50px auto 0; padding: 20px; background: #eee; border-radius: 3px}
.pr-area .ad { display: none!important}
.pr-area .text { margin-bottom: 20px; line-height: 1.5}
.pr-area .text::after, .prep-school .ad-prep-school figcaption::after { content: "PR"; padding: 2px 5px; font-size: 14px; border: 1px solid #333}
.chart-area { display: flex; justify-content: space-between; margin-top: 50px}
.chart-area figure { width: 60%}
.chart-area .text { display: flex; align-items: center; width: 38%}
.chart-area .text dl { display: flex; justify-content: space-between; flex-wrap: wrap}
.chart-area .text dl dt { width: 80%; font-weight: normal}
.chart-area .text dl dt.last { font-size: 18px; font-weight: bold; border-top: 1px solid #333}
.chart-area .text dl dd { width: 20%; text-align: center}
.chart-area .text dl dd.last { color: #e86596; font-size: 18px; font-weight: bold; border-top: 1px solid #333}

.chart-summary { width: 100%; margin-top: 30px; padding: 20px; border: 1px solid #ddd; border-radius: 8px}
.chart-summary .ttl { font-size: 18px; font-weight: bold}
.chart-summary .ttl + p { margin-bottom: 20px}
.chart-summary dl dt { font-weight: bold}
.chart-summary dl dd { margin-bottom: 10px}
.chart { height: 200px!important;}
.top-content { margin-bottom: 50px}
.btm-content { margin-top: 50px}
@media screen and (max-width: 750px) {
  .pr-area .text { font-size: 14px}
  .pr-area .text::after, .prep-school .ad-prep-school figcaption::after { font-size: 12px}
  .chart-area .text dl { font-size: 8px}
}
@media screen and (min-width: 751px) {
  .chart-area { justify-content: center; max-width: 80%; margin-left: auto; margin-right: auto}
  .chart-area figure { width: 41%}
  .chart-area .text { width: 40%; margin-left: 5%}
  .chart-area .text dl dt, .chart-area .text dl dd { margin-bottom: 0px}
}
.text-summary { line-height: 1.5!important}
.osusume-area { margin-bottom: 10px; padding: 10px; background: #eee; border-radius: 10px}
.osusume-area .ttl { margin: 0; font-weight: bold}
.table-area { margin: 30px 0 10px}
.table-area .table-header, .table-area .table-date { padding: 10px; border: 1px solid #d1d3d3; border-top: 0}
.table-area .table-header { background: #ecf7f6}
.table-area .table-date .ul-osusume { margin-bottom: 0}
@media screen and (max-width: 750px) {
  .table-area .table-header { padding: 5px 10px}
  .table-area .table-header:first-of-type { border-top: 1px solid #d1d3d3}
}
@media screen and (min-width: 751px) {
  .osusume-area { margin-bottom: 20px; padding: 20px}
  .table-area { display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; margin: 40px 0 30px}
  .table-area .table-header { width: 30%}
  .table-area .table-date { width: 70%; border-left: 0}
  .table-area .table-header:first-of-type, .table-area .table-date:nth-of-type(2) { border-top: 1px solid #d1d3d3}
}
/* 教室一覧 */
.teacher-area h2 { margin-top: 40px}
.dl-teacher dt { position: relative}
.dl-teacher dt:nth-of-type(n+2) {  padding-top: 20px; border-top: 1px dashed #d1d3d3}
.dl-teacher dd { line-height: 1.5}
.dl-branch dt, .dl-branch dd { margin: 0; padding: 3px 10px!important; border: 1px solid #d1d3d3; border-top: 0}
.dl-branch dt { border-right: 0; background: #ecf7f6}
@media screen and (max-width: 750px) {
  .dl-branch dt:first-of-type { border-top: 1px solid #d1d3d3}
}
@media screen and (min-width: 751px) {
  .dl-branch { display: flex; justify-content: space-between; flex-wrap: wrap}
  .dl-branch dt { width: 20%}
  .dl-branch dd { width: 80%}
  .dl-branch dt:first-of-type, .dl-branch dd:first-of-type { border-top: 1px solid #d1d3d3}
}
/* よくある質問 */
.dl-faq span { display: inline-block; width: 30px; height: 30px; line-height: 30px; margin-right: 5px; color: #fff; text-align: center;  border-radius: 100vh}
.dl-faq dt span { background: #41aea2}
.dl-faq dd { padding-left: 35px}
.dl-faq dd span { margin-left: -35px; color: #41aea2; font-weight: bold!important; background: #ecf7f6}
/* 口コミ */
.dl-review dt { display: flex; align-items: center}
.dl-review dt .icon { margin-right: 5px}
.dl-review dt:nth-of-type(n+2) {  padding-top: 20px; border-top: 1px dashed #d1d3d3}
.dl-review dd { line-height: 1.5}
@media screen and (max-width: 750px) {
  .dl-review dt .icon { background-size: 25px auto}
}
.bnr-area { margin-top: 50px}
.bnr-area button { -webkit-appearance: none; appearance: none; padding: 0; background: none; border: none}
.bnr-area .banner { display: block; padding: 10px; border-radius: 10px; box-shadow: 2px 3px 3px rgba(0,0,0,.1)}
.bnr-area .banner p { margin-bottom: 15px!important; font-size: 20px; font-weight: bold; text-align: center; line-height: 1.3!important}
.bnr-area .banner big { font-size: 22px}
.bnr-area .banner small { font-size: 12px}
.bnr-area .banner button { display: block; margin: auto; padding: 10px 16px; color: #fff; background: #141414; font-size: 13px; border-radius: 100vh}
.bnr-area .banner.ichioshi { color: #141414; background: linear-gradient(135deg, #95d597 10%, #fec45c 90%);}
.bnr-area .banner.ichioshi .border { padding: 5px 10px 10px; border: 1px dashed #fff}
.bnr-area .banner.shindan { position: relative; background: #d9efec}
.bnr-area .banner.shindan img { position: absolute; left: -10px; bottom: 0; width: 22%; height: auto}
.bnr-area .banner.shindan p { margin: 10px 0 0 30px}
.bnr-area .banner.daigaku { margin-top: 20px; color: #fff; background: #fc7da6}
.bnr-area .banner.daigaku ul { display: flex; justify-content: center; flex-wrap: wrap; margin: 0 auto 20px}
.bnr-area .banner.daigaku ul li { width: 19%; margin: 0 0.5%}
.bnr-area .banner.daigaku ul li a { display: flex; justify-content: center; align-items: center; width: 100%; height: 40px; font-weight: bold; color: #ff6586; background: #fff}
@media screen and (max-width: 999px) {
  .bnr-area .banner.shindan { margin-top: 20px}
  .bnr-area .banner.shindan img { max-width: 100px}
  .bnr-area .banner.daigaku ul li:nth-of-type(n+6) { margin-top: 3px}
}
@media screen and (min-width: 1000px) {
  .bnr-area { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 70px}
  .bnr-area .banner big { font-size: 30px}
  .bnr-area .banner small { font-size: 14px}
  .bnr-area .banner.ichioshi, .bnr-area .banner.shindan { width: 49%}
  .bnr-area .banner.shindan img { left: 0; width: auto; height: 170px}
  .bnr-area .banner.daigaku { width: 80%; margin: 20px auto 0}
  .bnr-area .banner.daigaku ul { margin-bottom: 10px}
  .bnr-area .banner.daigaku ul li { width: 10.5%; margin: 0 0.25%}
  .bnr-area .banner.daigaku ul li a { height: 50px; font-size: 18px}
}