html {
  background: #fff;
  font-family: 'Cabin', sans-serif;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 62.5%;
}

.cabin {
  font-family: 'Cabin', sans-serif;
  /* number*/
}

body {
  max-width: 1080px;
  margin: 0 auto;
  /* background-color: pink; */
  text-align: center;
  font-size: 1.6rem;
  /* 16px */
  line-height: 2;

}

h1 {
  font-size: 36px;
  /* u-IE8 & u-Android4.3 */
  font-size: calc(2.4rem + ((1vw - 0.64rem) * 2.1429));
  /* 24~36px */
  line-height: 1.3;
}

h2 {
  font-size: 24px;
  /* u-IE8 & u-Android4.3 */
  font-size: calc(2rem + ((1vw - 0.64rem) * 0.7143));
  /* 20~24px */
  line-height: 1.3;
}

a {
  text-decoration: none;
  display: block;
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
  transition: all 0.2s ease-out;
}

/* === 下スペース === */
.space-s {
  margin-bottom: 10px;
}

.space-m {
  margin-bottom: 30px;
}

.space-l {
  margin-bottom: 60px;
}

.space-xl {
  margin-bottom: 80px;
}

/* === pc === */
.pc_only {
  display: block;
}

.sp_only {
  display: none;
}

/* === 改行禁止 === */
.nobr {
  display: inline-block;
}


/* === テキスト === */
.red {
  color: red;
}

.bold {
  font-weight: bold;
}


/* =================================== header */
header {
  /* background-color: gold; */
  /* margin-bottom: 30px; */
}

header h1 {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin: 0;
}

.h_logo {
  flex-basis: 46%;
}

.h_logo a {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  margin: 10px 0;
}

.h_logo img {
  display: block;
  height: auto;
}

.h_logo img.head_20Logo {
  width: 32%;
}

.h_logo img.head_Logo {
  width: 68%;
}


.h_contact {
  flex-basis: 50%;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: flex-end;
  align-items: center;
}

.h_contact .pc_only:first-child {
  flex-basis: 50%;
  display: block;
  /* display: flex;
  flex-wrap: wrap;
  justify-content: center; */
  padding-top: 5px;
  margin-bottom: 20px;
  /* background-color: #00afc9; */
}

.sp_only .items {
  display: none;
}

.items:last-child {
  flex-basis: 45%;
  font-size: min(max(1.8rem, calc(1.8rem + ((1vw - 7.68rem) * 0.1923))), 2.4rem);
  font: weight 500px;
  color: #fff;
  background-color: #ec5384;
  padding: 0 1em;
  border-radius: 40px;
  height: 2.5em;
  line-height: 2.5em;
}

.items:last-child a {
  min(max(1.8rem, calc(1.8rem + ((1vw - 7.68rem) * 0.3205))), 2.8rem);
}

.pc_only .in-items-kusatsu,
.pc_only .in-items-osaka,
.pc_only .in-items-inq {
  color: #ec5384;
  font-size: 20px;
  font-weight: 500;
  /* background-color: aqua; */
}

.sp_only.in-items-kusatsu,
.sp_only.in-items-osaka,
.sp_only.in-items-inq {
  font-size: 14px;
}

.in-items-kusatsu {
  /* border: 2px solid #333; */
  margin-right: 30px;
}

.pc_only .in-items-kusatsu img,
.pc_only .in-items-osaka img {
  width: 16px;
  height: auto;
}

.pc_only .in-flex {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}

.sp_only .in-items-kusatsu:before {
  content: '';
  display: block;
  background-image: url(../img/tel1.png);
  background-size: contain;
  width: 66px;
  height: 66px;
}

.sp_only .in-items-osaka:before {
  content: '';
  display: block;
  background-image: url(../img/tel2.png);
  background-size: contain;
  width: 66px;
  height: 66px;
}

.in-items-data {
  color: #333;
  flex-basis: 100%;
}

.in-items-data p {
  margin: 5px auto 0 auto;
  font-size: 0.4em;
  font-weight: 500;
}

.cam_title {
  margin-bottom: 30px;
}

.h_catch {
  /* padding: 10px; */
  position: relative;
  width: 100%;
  height: 260px;
  padding: 80px;
  background-color: #ffe8f3;
  background-image:
    repeating-linear-gradient(-45deg,
      #ffffe6, #ffffe6 5px,
      transparent 0, transparent 12px);
  font-size: 1.8em;
}

.bg_skew_border_pc {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 95%;
  height: 80%;
  margin: 0 auto;
  background-color: #fbf9f3;
  border-radius: 20px;
}

.bg_skew_border_sp {
  display: none;
}

.bg_skew_border_pc::before {
  content: '個性とニーズに合わせた発達・学習・自立支援で20年\Aアットスクールは発達に凸凹のある\A子どもたちへの専門的な支援に強い塾です';
  white-space: pre;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  margin: auto;
  font: size 2.2rem;
  min-height: 0vw;
  line-height: 1.8;
  color: #c62673;
  font-weight: 500;

}

/* .backImg {
  height: 200px;
  background-image: url(../img/smile.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
} */
.backImg {
  /* height: 400px; */
  margin-bottom: 40px;
}

.backImg img {
  width: 100%;
  /* max-width: 1000px; */
  height: auto;
}


/* =================================== main */
main {
  /* background-color: coral; */
}

/* section,div {
  border: 3px solid rgb(148, 170, 127);
} */

/* ~~~~~~~~~~~~~~~~~~~~~~~~＜トップへ戻る＞ */
.totop,
.tohome {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #ec5384;
  box-shadow: #333 2px 3px 4px;
  position: fixed;
  right: 3%;
  z-index: 2;
}

#top .totop {
  bottom: 90px;
}

#inquiry .totop,
#thanks .totop {
  bottom: 155px;
}

#inquiry .tohome,
#thanks .tohome {
  bottom: 80px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~＜index＞ */

/* ~~~~~~~~~~~~~~~~~~~~~~~~＜キャンペーンについて＞ */
#top section.about_cam {
  /* background: linear-gradient(#82cef5, #fff); */
  background-color: #fff;
  margin-bottom: 60px;
}

section.about_cam div {
  /* max-width: 900px; */
  width: 90%;
  margin: 0 auto 30px;
}

section.about_cam div.cam_title {
  max-width: 1080px;
}

.cam_title img,
.cam_bottom_title img {
  width: 100%;
  max-width: 1080px;
}

/* ____________________【初回相談無料】 */
section.about_cam div.soudan {
  background-color: #fefff5;
  margin-bottom: 0;
}

section.about_cam div.soudan a {
  padding-top: 20px;
  padding-bottom: 20px;
}

.soudan img {
  width: 100%;
  max-width: 900px;
}

/* ____________________【入会特典】 */
.tokuten {
  display: block;
  background: brown url(../img/bg.gif) repeat;
  width: 100%;
  padding: 30px;
}

.tokuten img {
  display: block;
  width: 100%;
  max-width: 960px;
  height: auto;
  margin: 0 auto 20px;
}

.tokuten img.sp_only {
  display: none;
}

/* ____________________【支援事例集プレゼント】 */
.jirei {
  margin-top: 40px;
  border: 7px solid #e9fbd7;
  background-color: #fff;
  padding: 40px;
}

.jirei h1 {
  display: block;
  margin: 0 auto 30px;
  font-size: 2.1rem;
  font-size: calc(2.1rem + ((1vw - 0.64rem) * 2.1429));
  font-weight: 500;
  padding: 10px;
  width: 97%;
  color: #fff;
  background: #ec5384;
  border-radius: 50px;
  margin-bottom: 10px;
}

.jirei .container {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}

.items-left {
  flex-basis: 60%;
  /* background: slateblue; */
  text-align: left;
}

.items-left img {
  display: block;
  width: 90%;
  margin: 0 auto;
}

.items-right {
  flex-basis: 38%;
  /* background: #ffa0c1; */
}

.items-right img {
  display: block;
  width: 100%;
  /* max-width: 100px; */
  height: auto;
  margin: 0 auto;
}

p.item-title {
  font-size: 2em;
  font-weight: 500;
  margin: 1.5rem;
  line-height: 1.6;
}

p.item-dct {
  font-size: 1.2em;
  line-height: 2;
}

section.about_cam div.items-left,
section.about_cam div.items-right,
section.about_cam div.kensa {
  margin-bottom: 10px;
}

section.about_cam div.kensa {
  width: 90%;
}

.kensa p {
  display: inline-block;
  text-align: center;
  color: #ec5384;
  /* text-indent: -1em;
  padding-left: 1em; */
  font-size: 2.2rem;
  font-weight: bold;
}

ul.subsc {
  width: 80%;
  margin: 0 auto;
}

ul.subsc a {
  display: block;
  font-size: 2rem;
  color: #fff;
  font-weight: bold;
  letter-spacing: 0.05em;
  transition: all 0.2s ease-out;
}

ul.subsc a:hover {
  opacity: 0.5;
}

ul.subsc li {
  list-style-type: none;
  padding: 10px;
  margin-bottom: 16px;
  background-color: #ec5384;
  border-radius: 20px;

}




/* ____________________【キャンペーン実施教室】 */
#top section.about_cam .jirei,
#top section.about_cam .class {
  max-width: none;
  width: 90%;
}

.class {
  padding: 30px 0;
  /* background: #faffe2; */
  background: linear-gradient(155deg, #fbfff2 20%, #ffffe5 50%, #b6f8ed);
  /* border-radius: 30px; */
}

.class img {
  display: block;
  max-width: 640px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.class p:first-of-type {
  font-size: 1.8em;
  line-height: 2;
  margin-bottom: 30px;
}

/* ____________________【ボーダー】 */
.border {
  /* background: url(../img/bg-line.gif) repeat-x; */
  background-color: #ec5384;
  width: 100%;
  height: 3px;
  margin-bottom: 60px;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~＜アットスクールについて＞ */

/* ____________________【タイトル】 */
.at-bg {
  position: relative;
  background: url("../img/at_back.png") no-repeat right/180px;
  width: 100%;
  height: 177px;
  background-color: #e9f5f1;
}

.at-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.about_at {
  margin-bottom: 80px;
}

.about_at h1 {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 1.8em;
  font-weight: bold;
  color: #2aa179;
  /* background: #ec5384; */
}

.about_at h1 span {
  font-size: 0.8em;
  font-weight: 300;
  color: #333;
}

/* ____________________【各コース紹介】 */
.course-list {
  background-color: #fdfeef;
  padding: 30px 0;
}

.course {
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  margin: 0 auto 30px;
  justify-content: center;
}

.course:not(:last-of-type) div:first-child {
  margin-right: 30px;
}

.course div {
  flex-basis: 48%;
  border-radius: 15px;
  background-color: #fff;
  padding: 10px;
}

.course .lecture .container {
  display: block;
}

.course div h2 {
  font-size: 1.4em;
  margin-top: 0.4em;
  padding-bottom: 0.3em;
  margin-bottom: 0.4em;
}

.course div .container {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  justify-content: space-between;
  margin: 0 auto;
}

.course div.course-txt {
  flex-basis: 75%;
  text-align: left;
  padding: 0;
  line-height: 1.8;
  /* font-size: 0.9em; */
  /* background-color:cadetblue; */
}

.course div.course-img {
  flex-basis: 25%;
  padding: 0;
}

.course-img img {
  width: 130px;
  height: 130px;
}

/* 個別指導 */
.course .kobetsu {
  box-sizing: border-box;
  border: 3px solid #e3241d;
  box-shadow: 4px 6px #af1c16;
}

.course .kobetsu h2 {
  color: #e3241d;
  border-bottom: 1px solid #e3241d;
}

/* 学びの教室 */
.course .manabi {
  box-sizing: border-box;
  border: 3px solid #00afc9;
  box-shadow: 4px 6px #007a89;
}

.course .manabi h2 {
  color: #00afc9;
  border-bottom: 1px solid #00afc9;
}

/* 家庭教師 */
.course .katekyo {
  box-sizing: border-box;
  border: 3px solid #f18700;
  box-shadow: 4px 6px #cc7200;
}

.course .katekyo h2 {
  color: #f18700;
  border-bottom: 1px solid #f18700;
}

/* 心理教育相談 */
.course .sinri {
  box-sizing: border-box;
  border: 3px solid #b680b3;
  box-shadow: 4px 6px #876184;
}

.course .sinri h2 {
  color: #b680b3;
  border-bottom: 1px solid #b680b3;
}

/* 知能・発達検査 */
.course .kensa {
  box-sizing: border-box;
  border: 3px solid #ec6c00;
  box-shadow: 4px 6px #a54c00;
}

.course .kensa h2 {
  color: #ec6c00;
  border-bottom: 1px solid #ec6c00;
}

/* issp */
.course .issp {
  box-sizing: border-box;
  border: 3px solid #2aa179;
  box-shadow: 4px 6px #1e7356;
}

.course .issp h2 {
  color: #2aa179;
  border-bottom: 1px solid #2aa179;
}

/* アットスクール高等学院 */
.course .snec {
  box-sizing: border-box;
  border: 3px solid #0071ba;
  padding: 5px 25px;
  box-shadow: 4px 6px #004573;
}

.course .snec h2 {
  color: #0071ba;
  border-bottom: 1px solid #0071ba;
}

/* 研修・講演・支援者養成 */
.course .lecture {
  box-sizing: border-box;
  border: 3px solid #1a3081;
  padding: 5px 25px;
  box-shadow: 4px 6px #0f1c4d;
}

.course .lecture h2 {
  color: #1a3081;
  border-bottom: 1px solid #1a3081;
}

/* フリースクール「A-COLORS」 */
.course .free {
  box-sizing: border-box;
  border: 3px solid #ee7b72;
  padding: 5px 25px;
  box-shadow: 4px 6px #934f49;
}

.course .free h2 {
  color: #ee7b72;
  border-bottom: 1px solid #ee7b72;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~＜問合せ・資料請求＞ */
.contact {
  /* background: linear-gradient(#fff, #fffaa3); */
  background-color: #ffffff;
}

.contact h1 {
  display: block;
  margin: 0 auto;
  font-size: 2.3em;
  font-weight: 500;
  padding: 12px;
  width: 85%;
  color: #fff;
  background: #ec5384;
  border-radius: 50px;
  margin-bottom: 20px;
}

.contact-list {
  margin: 40px auto;
  border: 7px solid #e9fbd7;
  background-color: #fff;
  padding: 20px 0 30px;
  width: 85%;
}

.contact-list p {
  display: inline-block;
  font-size: 1.9em;
  font-weight: 600;
  line-height: 1.7;
  text-align: left;
  margin: 10px;
}

.shiga-list,
.osaka-list,
.other-list {
  width: 80%;
  margin: 0 auto;
}

.shiga-list {
  background-color: #fdfeef;
  padding-bottom: 10px;
}

.shiga-list h2 {
  background-color: #07bb5e;
  color: #fff;
  padding: 2px;
  font-weight: 300;
  letter-spacing: 0.1em;
}

.contact-class {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 15px auto;
}

.contact_kasugai {
  justify-content: flex-start;
}

.contact-class div {
  /* padding: 5px; */
}

.contact-class div:first-child {
  text-align: left;
  font-size: 1.2em;
  font-weight: 500;
  width: 10em;
}

.contact_kasugai div:first-child {
  margin-right: 1.8em;
}




.contact-class .cabin {
  font-size: 1.6em;
  font-weight: bold;
  text-align: left;
}

.contact-class div.pc_only {
  font-size: 1.1em;
  color: #fff;
  border-radius: 50px;
  text-align: right;
  padding: 5px 10px;
  width: 15em;
}

/* .contact-class .toClass {
  width: 10em;
} */

.shiga-list .contact-class .cabin {
  color: #07bb5e;
}

.shiga-list .contact-class div.pc_only {
  background-color: #07bb5e;
}

.osaka-list {
  background-color: #fdfeef;
  padding-bottom: 10px;
  margin-bottom: 30px;
}

.osaka-list h2 {
  background-color: #3ab4ec;
  color: #fff;
  padding: 2px;
  font-weight: 300;
  letter-spacing: 0.1em;
}

.osaka-list .contact-class div.pc_only {
  background-color: #3ab4ec;
}

.osaka-list .contact-class .cabin {
  color: #3ab4ec;
}

.other-list {
  background-color: #fdfeef;
  padding-bottom: 10px;
  margin-bottom: 30px;
}

.other-list h2 {
  background-color: #c76df8;
  color: #fff;
  padding: 2px;
  font-weight: 300;
  letter-spacing: 0.1em;
}

.other-list .contact-class div.pc_only {
  background-color: #c76df8;
}

.other-list .contact-class .cabin {
  color: #c76df8;
}


/* =================================== footer */
footer {
  /* background-color: aquamarine; */
}

.b_logo {
  background-color: #2aa179;
  padding: 10px;
}

.b_logo img {
  width: 110px;
  height: auto;
  margin: 0 auto;
}

.copyrights {
  text-align: left;
}

.copyrights img {
  width: 134px;
}

.cabin {
  color: #2aa179;
  font-size: 12px;
  font-weight: bold;
}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~＜inquiry＞ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~＜お問合せ・資料請求＞ */

#inquiry .about_cam {
  background: linear-gradient(#fef5f9, #fff 20%);
  margin-bottom: 60px;
  padding: 40px 60px;
}

#inquiry .about_cam>h1 {
  display: block;
  margin: 0 auto;
  font-size: 1.6em;
  font-weight: 500;
  padding: 12px;
  width: 80%;
  color: #fff;
  background: #ec5384;
  border-radius: 50px;
}

#inquiry .about_cam h1+p,
#inquiry .about_cam h2+p {
  display: inline-block;
  width: 70%;
  text-align: left;
  line-height: 2;
}

#inquiry .link {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  width: 70%;
  margin: 0 auto;
}

#inquiry .link a {
  width: 48%;
}

#inquiry .item {
  background-color: #fbffc6;
  color: #ec5384;
  font-size: 1.2em;
  font-weight: bold;
  padding: 20px;
  border-radius: 30px;
}

#inquiry .about_cam h2 {
  display: inline-block;
  width: 80%;
  text-align: left;
  font-weight: 500;
  font-size: 1.4em;
  color: #ec5384;
  border-bottom: #ec5384 1px dotted;
  margin-bottom: 0;
}

#inquiry .about_cam h2:nth-of-type(2) {
  margin-bottom: 20px;
}

/* ____________________【FAXでの問合せ】 */
section.about_cam div.fax {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 80%;
}

.hearing h3,
.clg h3 {
  display: inline-block;
  width: 90%;
  text-align: center;
  font-weight: 500;
  font-size: 1.2em;
  color: #ec5384;
  border-bottom: #ec5384 1px dotted;
  margin: 5px auto;
}

.clg h3 {
  color: #90a75d;
  border-bottom: #90a75d 1px dotted;
}

section.about_cam div.hearing,
section.about_cam div.clg {
  flex-basis: 49%;
  margin: 10px auto 20px;
  border: 4px solid #ec5384;
  border-radius: 10px;
  background-color: #fff;
  padding: 8px;
}

.hearing p,
.clg p {
  width: 90%;
  margin: 0 auto;
  padding: 10px 0;
}

.hearing p,
.clg {
  color: #ec5384;
  font-size: 1.1em;
}

.clg p {
  color: #90a75d;
  padding: 5px 0;
}

section.about_cam div.filelink {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  margin: 0 auto 10px;
}

section.about_cam .hearing div.filelink {
  margin-top: 30px;
}

.hearing div span,
.clg div span {
  display: inline-block;
  background-color: #ec5384;
  color: #fff;
  font-size: 0.9em;
  font-weight: bold;
  height: 90px;
  width: 90px;
  line-height: 90px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
}

.clg div span {
  background-color: #90a75d;
}

.hearing div span:not(:last-of-type),
.clg div span:not(:last-of-type) {
  margin-right: 30px;
}

section.about_cam div.clg {
  border-color: #b6ce7f;
}

.faxnum {
  font-size: 2em;
  margin: 5px auto;
}


/* ____________________【問合せフォーム】 */
.mailform {
  width: 90%;
  margin: 0 auto;
  background-color: #fdfeef;
  padding: 10px;
}

.mailform table {
  border-collapse: separate;
  border-spacing: 14px;
  margin: 0 auto;
  width: 100%;
}

.mailform tr {
  /* margin-bottom: 10px; */
  padding: 10px;
}

.mailform th {
  background-color: #feeef3;
  font-weight: normal;
  font-size: 0.9em;
  /* margin-bottom: 10px; */
  padding: 10px;
  position: relative;
}

.mailform td {
  /* background-color: #fff; */
  text-align: left;
  padding: 10px 0 0 12px;
  position: relative;
}

span.required-srt {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  background-color: #ec5384;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 500;
  padding: 3px;
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="radio"],
input[type="checkbox"],
select,
textarea,
input[type="submit"] {
  font-size: 1.2em;
  font-weight: 500;
  line-height: 1.5;
  vertical-align: middle;
  padding: 4px;
  margin: 2px 0;
  border: 1px solid #cacab7;
}

input[type="submit"] {
  cursor: pointer;
  margin: 20px auto;
  width: 50%;
  line-height: 2.5;
  border: none;
  background-color: #ec5384;
  color: #fff;
  font-weight: bold;
}

td .checklist {
  column-count: 3;
}

td .checklist div {
  margin-bottom: 10px;
  font-size: 0.95em;
}

input[type="text"],
input[type="tel"],
input[type="email"] {
  width: 100%;
}

textarea {
  width: 100%;
}

input[type="text"].p-postal-code {
  width: 6em;
}

.soudan span input[type="radio"] {
  padding-right: 3px;
}

.soudan span:not(:first-child) input[type="radio"] {
  margin-left: 40px;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~＜thanks＞ */
#thanks section.about_cam {
  padding-top: 20px;
}

section.about_cam div.thanks {
  margin: 30px auto;
  width: 90%;
}

section.about_cam div.thanks p {
  display: inline-block;
  text-align: left;
}


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

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

@media (max-width: 971px) {

  /* === sp === */
  .pc_only {
    display: none;
  }

  .sp_only {
    display: block;
  }

  .sp_only_ib {
    display: inline-block;
  }

  .h_contact {
    flex-basis: 50%;
    justify-content: end;
  }

  .h_contact .sp_only .in-flex {
    display: flex;
    flex-basis: 100%;
    flex-wrap: nowrap;
    justify-content: space-around;
    padding-top: 10px;
    align-items: flex-end;
    /* background-color: #00afc9; */
  }

  .h_contact .sp_only .in-flex a {
    margin-right: 20px;
  }

  .h_contact .pc_only:first-child {
    display: none;
  }

  .sp_only .in-items-kusatsu,
  .sp_only .in-items-osaka {
    margin-right: 0;
  }

  .sp_only .in-items-kusatsu:before {
    content: '';
    width: 4.3em;
    height: 4.3em;
  }

  .sp_only .in-items-osaka:before {
    content: '';
    width: 4.3em;
    height: 4.3em;
  }

  .sp_only .in-items-inq:before {
    content: '';
    display: block;
    background-image: url(../img/inq.png);
    background-size: contain;
    width: 4.3em;
    height: 4.3em;
  }

  .sp_only .in-items-kusatsu,
  .sp_only .in-items-osaka,
  .sp_only .in-items-inq {
    font-size: min(max(1.2rem, calc(1.2rem + ((1vw - 3.75rem) * 0.1531))), 1.8rem);
  }

  .border {
    margin-bottom: 30px;
  }

  .contact-list p {
    font-size: 2.2rem;
  }

  .shiga-list h2,
  .osaka-list h2,
  .other-list h2 {
    width: 100%;
    padding: 6px;
  }

  .shiga-list .linkbtn,
  .osaka-list .linkbtn,
  .other-list .linkbtn {
    width: 5rem;
    height: 5rem;
    background-color: #07bb5e;
    border-radius: 50%;
    font-size: 3rem;
    line-height: 4.5rem;
  }

  .osaka-list .linkbtn {
    background-color: #3ab4ec;
  }

  .other-list .linkbtn {
    background-color: #c76df8;
  }

  #inquiry .link a {
    width: 90%;
  }

  /* ____________________【各コース紹介】 */

  .course {
    display: block;
    width: 95%;
    margin: 0 auto;
  }

  .course div {
    padding: 1rem;
    margin-bottom: 2rem;
  }

  .course div.container,
  .course div.course-txt {
    margin-bottom: 0;
  }

  .course div.container,
  .course div.course-txt {
    padding: 0;
  }

  .course:not(:last-of-type) div:first-child {
    margin-right: 3px;
  }

  .course div h2 {
    font-size: min(max(2rem, calc(2rem + ((1vw - 3.75rem) * 0.1276))), 2.5rem);
    text-align: left;
  }

  .course .course-txt {
    flex-basis: 90%;
  }

  .course div.course-img {
    flex-basis: 10%;
    padding: 3px;
  }

  .course div.course-img img {
    width: 80px;
    height: 80px;
  }

  section.about_cam div.hearing,
  section.about_cam div.clg {
    flex-basis: 80%;
  }
}

@media all and (max-width: 767px) {
  body {
    line-height: 2;
  }

  h1 {
    font-size: 2.4rem;
  }

  h2 {
    font-size: 2rem;
  }

  /* =================================== header */
  header {
    /* margin-bottom: 10px; */
  }

  header h1 {
    align-items: center;
    margin-bottom: 5px;
  }

  .h_logo {
    flex-basis: 70%;
  }



  .h_catch {
    font-size: 0.9em;
  }

  .bg_skew_border_pc {
    display: none;
  }

  .bg_skew_border_sp {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 95%;
    height: 80%;
    margin: 0 auto;
    background-color: #fbf9f3;
    border-radius: 20px;
  }


  .bg_skew_border_sp::before {
    content: '個性とニーズに合わせた\A発達・学習・自立支援で19年\Aアットスクールは発達に凸凹のある\A子どもたちへの専門的な支援に強い塾です';
    white-space: pre;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    margin: auto;
    font-size: 2.2rem;
    min-height: 0vw;
    line-height: 1.8;
    color: rgb(198, 38, 115);
    font-weight: 700;
  }


  /* ~~~~~~~~~~~~~~~~~~~~~~~~＜トップへ戻る＞ */
  #top .totop,
    {
    bottom: 100px;
    right: 2%;
  }

  #inquiry .totop {
    bottom: 155px;
    right: 2%;
  }

  #inquiry .tohome {
    bottom: 80px;
    right: 2%;
  }

  /* =================================== main */

  section.about_cam {
    margin-bottom: 30px;
  }

  .cam_title img,
  .cam_bottom_title img {
    width: 100%;
    max-width: 767px;
  }

  /* ____________________【入会特典】 */
  .tokuten {
    padding: 10px 0 5px 0;
  }

  .tokuten img.pc_only {
    display: none;
  }

  .tokuten img.sp_only {
    display: block;
  }

  /* ____________________【支援事例集プレゼント】 */
  .jirei .container {
    flex-wrap: wrap;
    width: 100%;
  }

  section.about_cam div.items-left {
    flex-basis: 99%;
    margin: 0 auto;
    /* background: slateblue; */
  }

  .items-right {
    flex-basis: 50%;
    /* background: #ffa0c1; */
  }

  .jirei {
    padding: 10px;
  }

  .jirei h1 {
    margin: 12px auto 0;
    font-size: min(max(1.8rem, calc(1.8rem + ((1vw - 3.75rem) * 0.3061))), 3rem);
    min-height: 0vw;
    padding: 8px;
    width: 100%;
  }

  p.item-title {
    font-size: calc(2.8rem + ((1vw - 0.64rem) * 0.7143));
    line-height: 1.5;
    margin: 1rem;
  }

  p.item-dct,
  .kensa p {
    font-size: min(max(1.6rem, calc(1.6rem + ((1vw - 3.75rem) * 0.0765))), 1.9rem);
    line-height: 1.6;
  }

  p.item-dct {
    margin-bottom: 0;
  }

  .items-left img {
    width: 85%;
  }

  section.about_cam div.kensa {
    width: 90%;
  }

  ul.subsc {
    width: 100%;
    padding-left: 0;
  }

  ul.subsc a {
    font-size: 100%;
  }


  .class p:first-of-type {
    font-size: min(max(2rem, calc(2rem + ((1vw - 3.75rem) * 0.2041))), 2.8rem);
  }

  /* ~~~~~~~~~~~~~~~~~~~~~~~~＜アットスクールについて＞ */
  .about_at {
    margin-bottom: 30px;
  }

  /* ____________________【タイトル】 */
  .at-bg {
    height: 120px;
    background: url("../img/at_back.png") no-repeat right/120px;
    background-color: rgba(233, 245, 241, 0.6);
    background-blend-mode: lighten;
  }

  .about_at h1 span {
    font-size: 80%;
  }

  .about_at h1 {
    font-size: min(max(1.8rem, calc(1.8rem + ((1vw - 3.75rem) * 0.3061))), 3rem);
  }

  /* ____________________【キャンペーン実施教室】 */
  .class {
    padding: 30px 20px 5px 20px;
  }

  .class p:first-of-type {
    margin-bottom: 10px;
  }

  .class p:nth-of-type(2) {
    margin: 0.5rem;
  }




  /* ~~~~~~~~~~~~~~~~~~~~~~~~＜問合せ・資料請求＞ */

  .contact h1 {
    width: 90%;
    font-size: 2.2rem;
  }

  .contact-list {
    width: 90%;
    margin: 10px auto;
  }

  .contact-list p {
    font-size: min(max(2rem, calc(2rem + ((1vw - 3.75rem) * 0.1276))), 2.5rem);
  }

  .shiga-list,
  .osaka-list,
  .other-list {
    width: 95%;
  }

  .contact-class {
    flex-wrap: wrap;
    width: 95%;
    margin: 10px auto;
  }


  /* =================================== footer */
  .copyrights {
    padding: 0 30px;
  }


  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~＜inquiry＞ */

  #inquiry .about_cam {
    padding: 30px 0;
  }

  #inquiry .about_cam>h1 {
    font-size: min(max(1.8rem, calc(1.8rem + ((1vw - 3.75rem) * 0.102))), 2.2rem);
  }

  #inquiry .about_cam h1+p,
  #inquiry .about_cam h2+p {
    width: 85%;
  }

  #inquiry .link {
    width: 100%;
    justify-content: center;
  }

  #inquiry section.about_cam div.item {
    margin-bottom: 10px;
    padding: 12px;
    font-size: min(max(1.6rem, calc(1.6rem + ((1vw - 3.75rem) * 0.102))), 2rem);
  }

  #inquiry .link a:first-child {
    margin-right: 8px;
  }

  section.about_cam div.fax {
    width: 100%;
  }

  section.about_cam div.hearing,
  section.about_cam div.clg {
    flex-basis: 95%;
  }

  .hearing h3,
  .clg h3 {
    font-size: 2rem;
    font-weight: bold;
  }

  .faxnum {
    margin: 0 auto;
    display: inline-block;
    text-align: left;
  }

  .faxnum img {
    vertical-align: sub;
  }

  #inquiry .about_cam h2 {
    width: 90%;
  }

  .mailform {
    width: 100%;
  }

  .mailform table {
    border-collapse: collapse;
    width: 95%;
  }

  .mailform th,
  .mailform td {
    display: block;
    width: 100%;
  }

  span.required-srt {
    font-size: 1.3rem;
    font-weight: 500;
    padding: 3px;
    line-height: 2;
  }

  .mailform th {
    margin-bottom: 10px;
  }

  .mailform td {
    padding: 0;
  }

  .mailform td {
    margin-bottom: 20px;
  }

  td .checklist div {
    font-size: min(max(1.3rem, calc(1.3rem + ((1vw - 3.75rem) * 0.1276))), 1.8rem);
  }

  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~＜thanks＞ */
  section.about_cam div.thanks h1 {
    font-size: min(max(2.1rem, calc(2.1rem + ((1vw - 3.75rem) * 0.0765))), 2.4rem);
  }

}

@media all and (max-width: 580px) {
  .backImg {
    margin-bottom: 20px;
  }

  .h_contact {
    flex-basis: 25%;
  }

  .contact-class div:first-child {
    width: 100%;
  }

  .h_contact .sp_only .in-flex a {
    margin-right: 10px;
  }

  .course div h2 {
    text-align: center;
  }

  .contact h1 {
    font-size: 1.8rem;
  }

  .contact-class {
    line-height: 1;
  }

  .contact-list p {
    text-align: center;
    margin: 0 auto;
  }

  section.about_cam div {
    width: 100%;
  }

  .faxnum {
    font-size: 1.4em;
  }

}

@media all and (max-width: 425px) {

  .cam_title {
    margin-bottom: 14px;
  }

  .h_catch {
    height: 180px;
  }

  .h_contact .sp_only .in-flex a {
    margin-right: 3px;
  }

  .bg_skew_border_sp::before {
    font-size: 1.6rem;
  }

}

@media all and (max-width: 330px) {
  .contact-class .cabin {
    font-size: 1.4em;
  }
}