@charset "UTF-8";
/* width -------------------
---------------------------*/
/* mixin -------------------
---------------------------*/
@font-face {
  font-family: "icon";
  src: url("/image/fonts/icon.eot");
  src: url("/image/fonts/icon.eot#iefix") format("embedded-opentype"), url("/image/fonts/icon.ttf") format("truetype"), url("/image/fonts/icon.woff") format("woff"), url("/image/fonts/icon.svg#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
[class^=icon-], [class*=" icon-"] {
  font-family: "icon" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-pen:before {
  content: "\e927";
}

.icon-heart:before {
  content: "\e9da";
}

.icon-saleft:before {
  content: "\e981";
}

.icon-saright:before {
  content: "\e982";
}

.icon-01:before {
  content: "\e902";
}

.icon-n17:before {
  content: "\e017";
}

.icon-n21:before {
  content: "\e021";
}

.icon-n23:before {
  content: "\e023";
}

.icon-handarrow:before {
  content: "\e907";
}

.icon-no1:before {
  content: "！";
}

.icon-no2:before {
  content: "＂";
}

.icon-no3:before {
  content: "＃";
}

.icon-no4:before {
  content: "＄";
}

.icon-no5:before {
  content: "％";
}

.icon-no6:before {
  content: "＆";
}

.icon-no7:before {
  content: "＇";
}

.icon-no8:before {
  content: "（";
}

.icon-no9:before {
  content: "）";
}

.icon-no0:before {
  content: "＀";
}

.icon-no1-b:before {
  content: "묁";
}

.icon-no2-b:before {
  content: "묂";
}

.icon-no3-b:before {
  content: "묃";
}

.icon-no4-b:before {
  content: "묄";
}

.icon-no5-b:before {
  content: "묅";
}

.icon-no6-b:before {
  content: "묆";
}

.icon-no7-b:before {
  content: "묇";
}

.icon-no8-b:before {
  content: "묈";
}

.icon-no9-b:before {
  content: "묉";
}

.icon-no0-b:before {
  content: "묀";
}

.icon-plus:before {
  content: "\f067";
}

.icon-minus:before {
  content: "\f068";
}

.icon-star:before {
  content: "\f005";
}

.icon-check:before {
  content: "\f00c";
}

.icon-close:before {
  content: "\f00d";
}

.icon-home:before {
  content: "\e925";
}

.icon-map:before {
  content: "\f041";
}

.icon-play:before {
  content: "\ea1c";
}

.icon-stop:before {
  content: "\ea1e";
}

.icon-chleft:before {
  content: "\f077";
}

.icon-chright:before {
  content: "\f078";
}

.icon-question:before {
  content: "\f059";
}

.icon-aleft:before {
  content: "\ea38";
}

.icon-aright:before {
  content: "\ea34";
}

.icon-aup:before {
  content: "\ea32";
}

.icon-adown:before {
  content: "\ea36";
}

.icon-gift:before {
  content: "\f06b";
}

.icon-chart:before {
  content: "\f080";
}

.icon-uncheck:before {
  content: "\f00b";
}

.icon-arrleft:before {
  content: "\e92c";
}

.icon-arright:before {
  content: "\f0a9";
}

.icon-arrup:before {
  content: "\e92a";
}

.icon-arrdown:before {
  content: "\e92b";
}

.icon-tdown:before {
  content: "\f05e";
}

.icon-tup:before {
  content: "\f05d";
}

.icon-tleft:before {
  content: "\f05b";
}

.icon-tright:before {
  content: "\f05c";
}

.icon-mail:before {
  content: "\f0e0";
}

.icon-angle-left:before {
  content: "\f104";
}

.icon-angle-right:before {
  content: "\f105";
}

.icon-angle-up:before {
  content: "\f106";
}

.icon-angle-down:before {
  content: "\f107";
}

.icon-ch-left:before {
  content: "\f137";
}

.icon-ch-right:before {
  content: "\f138";
}

.icon-ch-up:before {
  content: "\f139";
}

.icon-ch-down:before {
  content: "\f13a";
}

.icon-tri:before {
  content: "\f144";
}

.icon-plane:before {
  content: "\f1d8";
}

.icon-yen:before {
  content: "\f157";
}

.icon-phone:before {
  content: "\f095";
}

.icon-comments:before {
  content: "\f086";
}

.icon-smile:before {
  content: "\e9e1";
}

.icon-sad:before {
  content: "\e9e5";
}

.icon-line:before {
  content: "\e900";
}

.icon-twitter:before {
  content: "\e901";
}

/* color -------------------
---------------------------*/
/* align -----------
----------------------------- */
.center.center {
  text-align: center;
}

.right.right {
  text-align: right;
}

.left.left {
  text-align: left;
}

.bold, em {
  font-weight: bold;
}

.normal {
  font-weight: normal;
}

/* size -----------
----------------------------- */
.big {
  font-size: 1.2em;
  font-weight: bold;
}

.bigger {
  font-size: 1.4em;
  font-weight: bold;
  line-height: 1.2;
}

.biggest {
  font-size: 1.6em;
  font-weight: bold;
  line-height: 1.1;
}

.small, small {
  font-size: 0.86em;
}

/* color -----------
----------------------------- */
.red, .orange {
  color: #dd5231;
  font-weight: bold;
}

.blue {
  color: #266280;
  font-weight: bold;
}

.green {
  color: #2ca12c;
  font-weight: bold;
}

.yellow {
  color: #f0e53B;
  font-weight: bold;
}

.brown {
  color: #362a14;
  font-weight: bold;
}

/* pen -----------
----------------------------- */
.pen_cream {
  background: #fffbb4;
  font-weight: bold;
}

.pen {
  background: linear-gradient(transparent 50%, #fffbb4 50%);
  font-weight: bold;
}

.pen_blue {
  background: #e7f5f5;
  font-weight: bold;
}

.pen_red {
  background: #fcf4f4;
  font-weight: bold;
}

.pen_white {
  background: white;
  font-weight: bold;
}

[class^=penline-], [class*=" penline-"], .penline {
  font-weight: bold;
  background-repeat: repeat-x;
  background-position: left bottom;
}
@media (max-width: 768px) {
  [class^=penline-], [class*=" penline-"], .penline {
    padding-bottom: 6px;
  }
}

.penline, .penline-red {
  background-image: url(/image/common/line/pen-red.webp);
}

.penline-green {
  background-image: url(/image/common/line/pen-green.webp);
}

.outline, .outline-brown, [class^=outline-] {
  display: inline-block;
  font-weight: bold;
  color: white;
  background: #362a14;
  border-radius: 6px;
  padding: 4px 8px;
  margin: 0 4px;
  line-height: 1;
}

.outline-red {
  background: #dd5231;
}

.outline-blue {
  background: #266280;
}

a {
  transition: all 0.2s ease-in-out;
}

/* ruby -----------
----------------------------- */
[class^=ruby-], [class*=" ruby-"] {
  -webkit-text-emphasis: filled circle #dd5231;
  text-emphasis: filled circle #dd5231;
  font-weight: bold;
}

.ruby-red {
  -webkit-text-emphasis: filled circle #dd5231;
  text-emphasis: filled circle #dd5231;
}

.ruby-orange {
  -webkit-text-emphasis: filled circle #f1a04e;
  text-emphasis: filled circle #f1a04e;
}

.ruby-green {
  -webkit-text-emphasis: filled circle #2ca12c;
  text-emphasis: filled circle #2ca12c;
}

.ruby-brown {
  -webkit-text-emphasis: filled circle #362a14;
  text-emphasis: filled circle #362a14;
}

.dash {
  text-decoration: none;
  color: #266280;
  border-bottom: 2px dashed #266280;
}
.dash:hover {
  color: #dd5231;
  border-color: #dd5231;
}

/* wa -----------
----------------------------- */
.wa02, .wa03, .wa04 {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  font-weight: bold;
  display: inline-block;
  padding: 0.3em;
}

.wa02 {
  background-image: url(/image/common/line/wa02.webp);
}

.wa03 {
  background-image: url(/image/common/line/wa03.webp);
}

.wa04 {
  background-image: url(/image/common/line/wa04.webp);
}

h1, h2, h3 {
  text-align: center;
  font-weight: bold;
}

.headron, .title-page01 {
  background: url(/image/common/headline/headron_head.webp) repeat-x left top, url(/image/common/headline/headron_foot.webp) repeat-x left bottom, url(/image/common/headline/headron_bg.webp) repeat;
  color: white;
  padding: 24px;
  font-size: 1.375rem;
  text-align: left;
  font-weight: bold;
  margin: 24px auto 0;
}
.headron i, .title-page01 i {
  font-size: 1rem;
  display: block;
}
@media (max-width: 768px) {
  .headron, .title-page01 {
    font-size: 1.25rem;
    padding: 16px;
  }
}

.title-postit.title-postit {
  display: inline-block;
  background: url(/image/common/headline/postit_head.webp) no-repeat left top/contain, url(/image/common/headline/postit.webp) no-repeat right top/cover;
  text-align: left;
  font-weight: bold;
  padding: 16px 48px;
  margin: 24px 16px 0;
  font-size: 1.125rem;
}
.title-postit.title-postit i {
  display: block;
  font-size: 0.8em;
}

.title-line.title-line, .line-title {
  font-weight: bold;
  background: none;
  border-top: 4px dotted #2ca12c;
  border-bottom: 4px dotted #2ca12c;
  padding: 16px 8px;
  text-align: left;
  font-size: 1.375rem;
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  max-width: 1376px;
  margin: 24px auto;
}
@media (max-width: 768px) {
  .title-line.title-line, .line-title {
    font-size: 1.25rem;
  }
}

h1.line-title {
  text-align: center;
}

.title-arch {
  color: #2ca12c;
  font-size: 1.5625rem;
  font-weight: bold;
  margin-top: 32px;
}
.title-arch::before {
  content: url(/image/common/headline/arch.webp);
  display: block;
}
@media (max-width: 768px) {
  .title-arch {
    font-size: 1.25rem;
  }
}

.title-balloon {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  min-height: 96px;
  margin: 24px auto 0;
  background: url(/image/content/area/parts/balloon/bg.webp);
  border: 12px solid #fe6;
  font-weight: bold;
  padding: 0 0.8em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-size: 1.25rem;
  border-radius: 16px;
  position: relative;
  text-align: center;
}
@media (max-width: 768px) {
  .title-balloon {
    font-size: 1.125rem;
    text-align: left;
  }
}
.title-balloon:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-top-color: #fe6;
  position: absolute;
  top: calc(100% + 12px);
  left: calc(50% - 12px);
}

.title-grass {
  margin-top: 32px;
  background: url(/image/common/headline/line.webp) repeat-x left bottom;
  font-size: 1.25rem;
  font-weight: bold;
  text-align: left;
  padding: 8px 8px 12px 40px;
  position: relative;
}
.title-grass:before {
  content: "\f4d8";
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
  font-size: 2rem;
  position: absolute;
  color: #71cc5f;
  bottom: 12px;
  left: 0;
}

.title-num {
  background: #f7f3de;
  text-align: left;
  padding: 16px;
  padding-left: 108px;
  position: relative;
  font-weight: bold;
}
@media (max-width: 768px) {
  .title-num {
    padding-left: 16px;
    margin-top: 80px;
  }
}
.title-num::before {
  content: url(/image/common/headline/num/icon01.webp);
  position: absolute;
  bottom: 0;
  left: 0;
}
@media (max-width: 768px) {
  .title-num::before {
    bottom: calc(100% - 16px);
  }
}
.title-num.n1::before {
  content: url(/image/common/headline/num/icon01.webp);
}
.title-num.n2::before {
  content: url(/image/common/headline/num/icon02.webp);
}
.title-num.n3::before {
  content: url(/image/common/headline/num/icon03.webp);
}
.title-num.n4::before {
  content: url(/image/common/headline/num/icon04.webp);
}
.title-num.n5::before {
  content: url(/image/common/headline/num/icon05.webp);
}
.title-num.ano1::before {
  content: url(/image/common/headline/num/ano01.webp);
}
.title-num.ano2::before {
  content: url(/image/common/headline/num/ano02.webp);
}
.title-num.ano3::before {
  content: url(/image/common/headline/num/ano03.webp);
}

.title-under {
  font-size: 2.25rem;
  font-weight: bold;
  position: relative;
  padding: 0 8px 16px;
  margin: 128px auto 64px;
}
@media (max-width: 768px) {
  .title-under {
    font-size: 1.625rem;
  }
}
.title-under::after {
  content: "";
  display: block;
  width: 128px;
  height: 10px;
  border-radius: 6px;
  background: #71cc5f;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.title-under i {
  display: block;
  color: white;
  font-size: 1.125rem;
  border-radius: 6px;
  color: #2ca12c;
  padding-bottom: 8px;
}

.title-tri {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin-top: 48px;
  background: #71cc5f;
  color: white;
  font-weight: bold;
  position: relative;
  border-radius: 6px;
  padding: 16px;
  padding-left: 48px;
  font-size: 1.25rem;
  line-height: 1.4;
}
.title-tri::before {
  content: "";
  display: block;
  height: 64px;
  width: 40px;
  background: url(/image/common/headline/title-tri.svg) no-repeat right center/cover;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.title-tri i {
  display: block;
  position: absolute;
  font-weight: normal;
  bottom: 100%;
  left: 16px;
  color: #2ca12c;
  background: white;
  border: 1px solid #2ca12c;
  border-bottom: none;
  padding: 4px 16px 0;
  font-size: 1rem;
  border-radius: 6px 6px 0 0;
}

.title-headron {
  text-align: left;
  color: white;
  font-size: 1.625rem;
  font-weight: bold;
  line-height: 1.4;
  margin: 96px auto 0;
  position: relative;
}
@media (max-width: 768px) {
  .title-headron {
    font-size: 1.375rem;
  }
}
.title-headron.on::after {
  animation: headron 0.6s ease-in-out forwards;
}
.title-headron > em {
  display: block;
  background: url(/image/common/headline/headron/line.webp) repeat-x left 4px, url(/image/common/headline/headron/line.webp) repeat-x left calc(100% - 4px), url(/image/common/headline/headron/bg.webp) repeat;
  padding: 24px;
  position: relative;
  z-index: 2;
}
.title-headron::after {
  content: url(/image/common/headline/headron/icon.webp);
  position: absolute;
  bottom: 0;
  opacity: 0;
  left: 16px;
  z-index: 1;
  font-size: 0;
}
.title-headron i {
  display: block;
  font-size: 1rem;
}

@keyframes headron {
  0% {
    bottom: 0;
    opacity: 0;
  }
  50% {
    bottom: 100%;
    opacity: 1;
  }
  60% {
    bottom: 94%;
    opacity: 1;
  }
  70% {
    bottom: 98%;
    opacity: 1;
  }
  80% {
    bottom: 94%;
    opacity: 1;
  }
  90% {
    bottom: 96%;
    opacity: 1;
  }
  100% {
    bottom: 94%;
    opacity: 1;
  }
}
.sp {
  display: none;
}
@media (max-width: 768px) {
  .sp {
    display: block;
  }
}

@media (max-width: 768px) {
  .pc {
    display: none;
  }
}

.bnr {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  text-align: center;
  margin: 16px auto;
}

.iblock, .i-block {
  display: inline-block;
}

[class^=bg-], [class*=" bg-"] {
  border-radius: 6px;
  background: #e7f5f5;
  border: 1px solid transparent;
  padding: 16px 24px;
}

.bg-blue {
  background: #e7f5f5;
}

.bg-yellow {
  background: #fffbb4;
}

.bg-white {
  background: white;
}

.bg-pink {
  background: #fcf4f4;
}

.bg-green {
  background: #ebfab6;
}

hr {
  border: none;
}
hr.lineblank {
  margin: 32px 0;
}

hr {
  border: none;
  margin: 32px auto;
}
hr.star {
  background: url(/image/common/line/star.webp) repeat-x left;
  min-height: 22px;
}
hr.cut {
  background: url(/image/common/line/cut.webp) no-repeat center;
  min-height: 32px;
  margin-bottom: 1.6em;
}
hr.dash {
  background: url(/image/common/line/dash.webp) repeat-x center;
  min-height: 6px;
}

/* box -----------
----------------------------- */
.imgbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
}
@media (max-width: 768px) {
  .imgbox {
    flex-direction: column;
  }
  .imgbox.side {
    flex-direction: row;
  }
  .imgbox.reverse {
    flex-direction: column-reverse;
  }
}
.imgbox > p, .imgbox > ul, .imgbox > ol, .imgbox > dl, .imgbox > table, .imgbox > div {
  width: auto;
  margin-left: 0;
  margin-right: 0;
  padding: 16px 0;
}
.imgbox > img, .imgbox > picture, .imgbox > a > img, .imgbox > a > picture {
  margin: 8px;
  max-width: 40%;
}
@media (max-width: 768px) {
  .imgbox > img, .imgbox > picture, .imgbox > a > img, .imgbox > a > picture {
    max-width: 80%;
    margin: 16px auto;
  }
}
.imgbox > p, .imgbox > ul, .imgbox > ol, .imgbox > dl, .imgbox > table, .imgbox > div {
  flex: 1;
}
.imgbox.top {
  align-items: flex-start;
}

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
}
@media (max-width: 768px) {
  .flex {
    flex-direction: column;
  }
}
.flex > li, .flex > div {
  padding: 8px;
  text-align: center;
}
@media (max-width: 768px) {
  .flex > li, .flex > div {
    width: 100%;
  }
}
.flex.half > li, .flex.half > div {
  width: 50%;
}
@media (max-width: 768px) {
  .flex.half > li, .flex.half > div {
    width: 100%;
  }
}
.flex.center {
  justify-content: center;
}

.tri {
  text-align: right;
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
}
.tri a {
  display: inline-block;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: bold;
  color: #2ca12c;
  font-weight: bold;
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
  background: #ebfab6;
  padding: 16px 24px;
  padding-right: 40px;
  position: relative;
  margin-bottom: 8px;
}
.tri a::after {
  content: "\f04b";
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  transition: all 0.2s ease-in-out;
}
.tri a:hover {
  background: rgb(245.4615384615, 252.6153846154, 220.1846153846);
}
.tri a:hover::after {
  right: 4px;
}
.tri a img {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 16px;
}

.img-left, .img-right,
[class^=dotbox-], [class*=" dotbox-"],
[class^=bg-], [class*=" bg-"],
[class^=box-], [class*=" box-"],
[class^=titlebox-], [class*=" titlebox-"] {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
}
.img-left p, .img-left ul, .img-left ol, .img-left dl, .img-left table, .img-left div, .img-right p, .img-right ul, .img-right ol, .img-right dl, .img-right table, .img-right div,
[class^=dotbox-] p,
[class^=dotbox-] ul,
[class^=dotbox-] ol,
[class^=dotbox-] dl,
[class^=dotbox-] table,
[class^=dotbox-] div, [class*=" dotbox-"] p, [class*=" dotbox-"] ul, [class*=" dotbox-"] ol, [class*=" dotbox-"] dl, [class*=" dotbox-"] table, [class*=" dotbox-"] div,
[class^=bg-] p,
[class^=bg-] ul,
[class^=bg-] ol,
[class^=bg-] dl,
[class^=bg-] table,
[class^=bg-] div, [class*=" bg-"] p, [class*=" bg-"] ul, [class*=" bg-"] ol, [class*=" bg-"] dl, [class*=" bg-"] table, [class*=" bg-"] div,
[class^=box-] p,
[class^=box-] ul,
[class^=box-] ol,
[class^=box-] dl,
[class^=box-] table,
[class^=box-] div, [class*=" box-"] p, [class*=" box-"] ul, [class*=" box-"] ol, [class*=" box-"] dl, [class*=" box-"] table, [class*=" box-"] div,
[class^=titlebox-] p,
[class^=titlebox-] ul,
[class^=titlebox-] ol,
[class^=titlebox-] dl,
[class^=titlebox-] table,
[class^=titlebox-] div, [class*=" titlebox-"] p, [class*=" titlebox-"] ul, [class*=" titlebox-"] ol, [class*=" titlebox-"] dl, [class*=" titlebox-"] table, [class*=" titlebox-"] div {
  width: auto;
  margin-left: 0;
  margin-right: 0;
  padding: 16px 0;
  max-width: unset;
}
.img-left p:first-of-type, .img-left ul:first-of-type, .img-left ol:first-of-type, .img-left dl:first-of-type, .img-left table:first-of-type, .img-left div:first-of-type, .img-right p:first-of-type, .img-right ul:first-of-type, .img-right ol:first-of-type, .img-right dl:first-of-type, .img-right table:first-of-type, .img-right div:first-of-type,
[class^=dotbox-] p:first-of-type,
[class^=dotbox-] ul:first-of-type,
[class^=dotbox-] ol:first-of-type,
[class^=dotbox-] dl:first-of-type,
[class^=dotbox-] table:first-of-type,
[class^=dotbox-] div:first-of-type, [class*=" dotbox-"] p:first-of-type, [class*=" dotbox-"] ul:first-of-type, [class*=" dotbox-"] ol:first-of-type, [class*=" dotbox-"] dl:first-of-type, [class*=" dotbox-"] table:first-of-type, [class*=" dotbox-"] div:first-of-type,
[class^=bg-] p:first-of-type,
[class^=bg-] ul:first-of-type,
[class^=bg-] ol:first-of-type,
[class^=bg-] dl:first-of-type,
[class^=bg-] table:first-of-type,
[class^=bg-] div:first-of-type, [class*=" bg-"] p:first-of-type, [class*=" bg-"] ul:first-of-type, [class*=" bg-"] ol:first-of-type, [class*=" bg-"] dl:first-of-type, [class*=" bg-"] table:first-of-type, [class*=" bg-"] div:first-of-type,
[class^=box-] p:first-of-type,
[class^=box-] ul:first-of-type,
[class^=box-] ol:first-of-type,
[class^=box-] dl:first-of-type,
[class^=box-] table:first-of-type,
[class^=box-] div:first-of-type, [class*=" box-"] p:first-of-type, [class*=" box-"] ul:first-of-type, [class*=" box-"] ol:first-of-type, [class*=" box-"] dl:first-of-type, [class*=" box-"] table:first-of-type, [class*=" box-"] div:first-of-type,
[class^=titlebox-] p:first-of-type,
[class^=titlebox-] ul:first-of-type,
[class^=titlebox-] ol:first-of-type,
[class^=titlebox-] dl:first-of-type,
[class^=titlebox-] table:first-of-type,
[class^=titlebox-] div:first-of-type, [class*=" titlebox-"] p:first-of-type, [class*=" titlebox-"] ul:first-of-type, [class*=" titlebox-"] ol:first-of-type, [class*=" titlebox-"] dl:first-of-type, [class*=" titlebox-"] table:first-of-type, [class*=" titlebox-"] div:first-of-type {
  padding-top: 0;
}

.img-left > img, .img-left > a > img, .img-left > picture, .img-left > a > picture, .img-right > img, .img-right > a > img, .img-right > picture, .img-right > a > picture {
  max-width: 46%;
}
.img-left::after, .img-right::after {
  content: "";
  display: block;
  clear: both;
}
@media (max-width: 768px) {
  .img-left, .img-right {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    margin: 16px auto;
  }
  .img-left > img, .img-left > a > img, .img-left > picture, .img-left > a > picture, .img-right > img, .img-right > a > img, .img-right > picture, .img-right > a > picture {
    max-width: 90%;
    float: none;
    order: 16;
  }
  .img-left.reverse, .img-right.reverse {
    flex-direction: column-reverse;
  }
  .img-left.reverse > p:first-of-type, .img-left.reverse > ul:first-of-type, .img-left.reverse > ol:first-of-type, .img-left.reverse > dl:first-of-type, .img-left.reverse > table:first-of-type, .img-left.reverse > div:first-of-type, .img-right.reverse > p:first-of-type, .img-right.reverse > ul:first-of-type, .img-right.reverse > ol:first-of-type, .img-right.reverse > dl:first-of-type, .img-right.reverse > table:first-of-type, .img-right.reverse > div:first-of-type {
    padding-top: 16px;
  }
  .img-left.side, .img-right.side {
    display: block;
  }
}

.img-left > img, .img-left > a > img, .img-left > picture, .img-left > a > picture {
  float: left;
  margin-right: 16px;
}
@media (max-width: 768px) {
  .img-left > img, .img-left > a > img, .img-left > picture, .img-left > a > picture {
    margin-right: 0;
  }
}

.img-right > img, .img-right > a > img, .img-right > picture, .img-right > a > picture {
  float: right;
  margin-left: 16px;
}
@media (max-width: 768px) {
  .img-right > img, .img-right > a > img, .img-right > picture, .img-right > a > picture {
    margin-left: 0;
  }
}

[class^=titlebox-], [class*=" titlebox-"] {
  border-radius: 12px;
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  padding: 8px;
  background: #d2ebb2;
}
[class^=titlebox-] dt, [class^=titlebox-] .title, [class*=" titlebox-"] dt, [class*=" titlebox-"] .title {
  font-weight: bold;
  padding: 8px;
  text-align: left;
  margin: 0 auto;
}
[class^=titlebox-] dt .name, [class^=titlebox-] .title .name, [class*=" titlebox-"] dt .name, [class*=" titlebox-"] .title .name {
  font-weight: normal;
  display: inline-block;
  font-size: 0.8em;
}
[class^=titlebox-] dt.center, [class^=titlebox-] .title.center, [class*=" titlebox-"] dt.center, [class*=" titlebox-"] .title.center {
  text-align: center;
}
[class^=titlebox-] h1 + *, [class^=titlebox-] h2 + *, [class^=titlebox-] h3 + *, [class^=titlebox-] h4 + *, [class*=" titlebox-"] h1 + *, [class*=" titlebox-"] h2 + *, [class*=" titlebox-"] h3 + *, [class*=" titlebox-"] h4 + * {
  margin-top: 0;
}
[class^=titlebox-] dd, [class^=titlebox-] > div, [class*=" titlebox-"] dd, [class*=" titlebox-"] > div {
  border-radius: 8px;
  background: white;
  padding: 16px 24px;
}
@media (max-width: 768px) {
  [class^=titlebox-] dd, [class^=titlebox-] > div, [class*=" titlebox-"] dd, [class*=" titlebox-"] > div {
    padding: 16px 8px;
  }
  [class^=titlebox-] dd p, [class^=titlebox-] > div p, [class*=" titlebox-"] dd p, [class*=" titlebox-"] > div p {
    padding: 16px;
  }
}
[class^=titlebox-] dd > *:first-child, [class^=titlebox-] > div > *:first-child, [class*=" titlebox-"] dd > *:first-child, [class*=" titlebox-"] > div > *:first-child {
  margin-top: 0;
  padding-top: 0;
}
[class^=titlebox-] dd > *:last-child, [class^=titlebox-] > div > *:last-child, [class*=" titlebox-"] dd > *:last-child, [class*=" titlebox-"] > div > *:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

.titlebox-pink {
  background: #ffe1de;
}

.titlebox-blue {
  background: #c3eef7;
}

.titlebox-green {
  background: #d2ebb2;
}

.titlebox-brown {
  background: #eeede9;
}

.arrow_d {
  text-align: center;
  margin-top: 32px;
}
.arrow_d img {
  margin: 0 8px;
}

.round {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  text-align: center;
}
.round a {
  display: block;
  max-width: 640px;
  margin: 0 auto;
  background: #dd5231;
  color: white;
  font-weight: bold;
  border-radius: 3em;
  padding: 16px 32px;
  text-decoration: none;
  font-size: 1.375rem;
  border: 3px solid white;
  box-shadow: 0 0 5px rgba(54, 42, 20, 0.3);
}
.round a:hover {
  background: rgb(223.89, 96.705, 66.51);
  box-shadow: 0 0 3px rgba(54, 42, 20, 0.5);
  color: #fffbb4;
  transform: scale(99%);
}

.movie {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
}
.movie iframe {
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
}

.pagination {
  text-align: center;
  padding: 16px 0;
  width: 100%;
}
.pagination .current {
  display: inline-block;
  font-weight: bold;
  padding: 0.6em;
  color: rgb(56.6795180723, 146.1734939759, 190.9204819277);
}
.pagination a {
  display: inline-block;
  line-height: 1;
  border: 1px solid rgb(84.1277108434, 164.2240963855, 204.2722891566);
  padding: 0.6em;
  text-decoration: none;
  color: rgb(56.6795180723, 146.1734939759, 190.9204819277);
  font-weight: bold;
}
.pagination a:hover {
  background: rgb(154.913253012, 201.8289156627, 225.286746988);
  border-color: rgb(115.5879518072, 180.9373493976, 213.6120481928);
  color: white;
}
.pagination a.prev, .pagination a.next {
  border: none;
  font-weight: normal;
  font-size: 0.9em;
}

.dl_title {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  max-width: 800px;
}
.dl_title dt {
  display: inline-block;
  background: url(/image/common/headline/postit_head.webp) no-repeat left top/contain, url(/image/common/headline/postit.webp) no-repeat right top/cover;
  text-align: left;
  font-weight: bold;
  padding: 16px 32px;
  font-size: 1rem;
  margin: 24px 0;
}
.dl_title dd {
  padding-bottom: 32px;
}
.dl_title ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.dl_title li {
  width: 25%;
  padding: 4px;
}
@media (max-width: 768px) {
  .dl_title li {
    width: 50%;
  }
}
.dl_title li a {
  display: block;
  border: 1px solid #266280;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.86em;
  padding: 0.4em 0.3em;
  color: #266280;
}
@media (max-width: 768px) {
  .dl_title li a {
    padding: 0.8em 0.4em;
  }
}
.dl_title li a:hover {
  color: #dd5231;
  border-color: #dd5231;
}
.dl_title .subtitle {
  border-bottom: 2px dotted #2ca12c;
  display: inline-block;
  color: #2ca12c;
  font-weight: bold;
  margin-bottom: 8px;
}

.stage {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
}

.dl_balloon {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  max-width: 960px;
}
.dl_balloon dt {
  background: #2ca12c;
  color: white;
  font-weight: bold;
  display: inline-block;
  padding: 16px;
  border-radius: 6px;
  position: relative;
  margin-bottom: 16px;
}
.dl_balloon dt::after {
  content: "";
  display: block;
  width: 16px;
  height: 8px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: #2ca12c;
  position: absolute;
  top: 100%;
  left: 32px;
  transform: translateY(-1px);
}
.dl_balloon dd {
  background: white;
  border-top: 8px solid #d8d0c1;
  box-shadow: 1px 1px 3px #362a14;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 8px;
  margin-bottom: 32px;
}

.table_graph {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
}
.table_graph caption {
  caption-side: bottom;
  font-size: 0.86em;
  text-align: right;
  padding-top: 8px;
}
.table_graph th, .table_graph td {
  border: 1px solid #d8d0c1;
  padding: 16px 8px;
  text-align: left;
}
.table_graph thead th {
  text-align: center;
}
.table_graph.center td {
  text-align: center;
}
.table_graph .cell {
  width: 24%;
}
.table_graph .sum.sum {
  background: #fff8ec;
  font-weight: bold;
}

.scroll_x {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  overflow-x: auto;
  position: relative;
}
@media (max-width: 768px) {
  .scroll_x.show::before {
    content: "スライドできます";
  }
  .scroll_x.show::after {
    content: "";
  }
  .scroll_x.show.yet::before {
    content: none;
  }
  .scroll_x.show.yet::after {
    content: none;
  }
  .scroll_x::before, .scroll_x::after {
    position: absolute;
    left: 50%;
    z-index: 2;
  }
  .scroll_x::before {
    content: none;
    color: white;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    top: 50%;
    width: 128px;
    height: 64px;
    padding: 4px;
    font-size: 0.75rem;
    transform: translateX(-50%) translateY(-50%);
    background: rgba(54, 42, 20, 0.8);
    border-radius: 6px;
    animation: fingerbg 2s ease-out 1 forwards;
  }
  .scroll_x::after {
    content: none;
    display: block;
    width: 30px;
    height: 36px;
    background: url(/image/content/note/cause/finger.svg) center/contain;
    top: 49%;
    animation: finger 1s ease-out 2 forwards;
  }
}
.scroll_x .table_graph {
  width: 100%;
  min-width: 680px;
}

@keyframes finger {
  0% {
    transform: translateX(100%) translateY(-50%);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    transform: translateX(-150%) translateY(-50%);
    opacity: 0;
  }
}
@keyframes fingerbg {
  0% {
    opacity: 0;
  }
  24% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.link-tagbox {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin: 24px auto;
}
.link-tagbox i {
  background: #362a14;
  color: white;
  font-size: 0.875rem;
  font-weight: bold;
  display: inline-block;
  padding: 4px 12px;
}
.link-tagbox a {
  border: 1px solid #362a14;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  padding: 16px 8px;
  color: #362a14;
}
.link-tagbox a:hover {
  color: #dd5231;
}
.link-tagbox a img {
  max-width: 24%;
  line-height: 1;
}
@media (max-width: 768px) {
  .link-tagbox a img {
    max-width: unset;
    margin-bottom: 16px;
  }
}
.link-tagbox a div {
  flex: 1;
}
@media (max-width: 768px) {
  .link-tagbox a div {
    display: block;
  }
}
.link-tagbox a p {
  width: auto;
  margin: 0 8px;
  max-width: none;
  padding: 0;
  line-height: 1.4;
}
.link-tagbox a p.title {
  font-size: 1.25rem;
  font-weight: bold;
  padding-bottom: 8px;
}
.link-tagbox a p.excerpt {
  font-size: 1rem;
}

.gradientbtn {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  text-align: center;
  padding: 0 32px;
}
.gradientbtn a {
  display: inline-block;
  border-radius: 2.4em;
  background: linear-gradient(#266280, rgb(19.3204819277, 49.8265060241, 65.0795180723));
  box-shadow: 0px 0px 8px rgba(54, 42, 20, 0.2);
  text-align: center;
  color: white;
  padding: 24px 64px;
  text-decoration: none;
  font-weight: bold;
  margin: 0 auto;
  max-width: 800px;
  min-width: 240px;
  border: 3px solid white;
  position: relative;
}
.gradientbtn a:hover {
  opacity: 0.8;
}
.gradientbtn a::after {
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
  position: absolute;
  right: 8px;
  top: calc(50% - 0.5em);
}
.gradientbtn.pink a, .gradientbtn.red a {
  background: linear-gradient(#ffb0a9, rgb(255, 101.0418604651, 87.4));
}
.gradientbtn.orange a {
  background: linear-gradient(#f1a04e, rgb(238.0094240838, 139.7068062827, 40.1905759162));
}
.gradientbtn.green a {
  background: linear-gradient(#2ca12c, rgb(35.2429268293, 128.9570731707, 35.2429268293));
}
.gradientbtn.white a {
  background: white;
  border: 2px solid #71cc5f;
  color: #2ca12c;
}

.disc, .decimal, ul.star, ol.star,
ul.circle, ul.circle, .list-circle, .checklist, .list-check,
ul.kome, .list-kome, .hanalist, dl.square,
.list-arrow {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px 0;
}
.disc li, .decimal li, ul.star li, ol.star li,
ul.circle li, ul.circle li, .list-circle li, .checklist li, .list-check li,
ul.kome li, .list-kome li, .hanalist li, dl.square li,
.list-arrow li {
  margin-left: 32px;
  padding: 8px 0;
}
@media (max-width: 768px) {
  .disc li, .decimal li, ul.star li, ol.star li,
  ul.circle li, ul.circle li, .list-circle li, .checklist li, .list-check li,
  ul.kome li, .list-kome li, .hanalist li, dl.square li,
  .list-arrow li {
    margin-left: 24px;
  }
}
.disc li p, .disc li div, .decimal li p, .decimal li div, ul.star li p, ul.star li div, ol.star li p, ol.star li div,
ul.circle li p,
ul.circle li div, ul.circle li p, ul.circle li div, .list-circle li p, .list-circle li div, .checklist li p, .checklist li div, .list-check li p, .list-check li div,
ul.kome li p,
ul.kome li div, .list-kome li p, .list-kome li div, .hanalist li p, .hanalist li div, dl.square li p, dl.square li div,
.list-arrow li p,
.list-arrow li div {
  width: auto;
}
.disc li p:first-child, .disc li div:first-child, .decimal li p:first-child, .decimal li div:first-child, ul.star li p:first-child, ul.star li div:first-child, ol.star li p:first-child, ol.star li div:first-child,
ul.circle li p:first-child,
ul.circle li div:first-child, ul.circle li p:first-child, ul.circle li div:first-child, .list-circle li p:first-child, .list-circle li div:first-child, .checklist li p:first-child, .checklist li div:first-child, .list-check li p:first-child, .list-check li div:first-child,
ul.kome li p:first-child,
ul.kome li div:first-child, .list-kome li p:first-child, .list-kome li div:first-child, .hanalist li p:first-child, .hanalist li div:first-child, dl.square li p:first-child, dl.square li div:first-child,
.list-arrow li p:first-child,
.list-arrow li div:first-child {
  padding-top: 0;
}

ul.star li, ol.star li, ul.circle li, ul.circle li, .list-circle li, .checklist li, .list-check li {
  text-indent: -26px;
}
ul.star li::before, ol.star li::before, ul.circle li::before, ul.circle li::before, .list-circle li::before, .checklist li::before, .list-check li::before {
  margin-right: 6px;
  font-size: 1.25rem;
}
ul.star li *, ol.star li *, ul.circle li *, ul.circle li *, .list-circle li *, .checklist li *, .list-check li * {
  text-indent: 0;
}

.checklist li::before, .list-check li::before {
  content: url(/image/common/list/check.webp);
}

.disc {
  list-style: disc;
}

.decimal {
  list-style: decimal;
}

.list_up .tags, .link_trial .tags, .list_trial .tags, .list__trial .tags {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin: 32px 0 8px;
  font-size: 0rem;
}
.list_up .tags i, .list_up .tags a, .link_trial .tags i, .link_trial .tags a, .list_trial .tags i, .list_trial .tags a, .list__trial .tags i, .list__trial .tags a {
  color: white;
  display: inline-block;
  background: #d8d0c1;
  border-radius: 6px;
  font-size: 0.875rem;
  padding: 6px 8px;
  margin: 4px;
}
.list_up .tags a, .link_trial .tags a, .list_trial .tags a, .list__trial .tags a {
  background: #266280;
  text-decoration: none;
}
.list_up .tags a:hover, .link_trial .tags a:hover, .list_trial .tags a:hover, .list__trial .tags a:hover {
  background: #dd5231;
}
.list_up .connect, .link_trial .connect, .list_trial .connect, .list__trial .connect {
  margin: 8px 4px;
}
.list_up .connect a, .link_trial .connect a, .list_trial .connect a, .list__trial .connect a {
  display: block;
  border: 1px solid #266280;
  color: #266280;
  position: relative;
  border-radius: 6px;
  font-size: 0.875rem;
  padding: 8px 24px 8px 12px;
  margin-bottom: 4px;
}
@media (max-width: 768px) {
  .list_up .connect a, .link_trial .connect a, .list_trial .connect a, .list__trial .connect a {
    padding: 12px 24px 12px 12px;
  }
}
.list_up .connect a:hover, .link_trial .connect a:hover, .list_trial .connect a:hover, .list__trial .connect a:hover {
  color: #dd5231;
  background: #ffffe9;
  border-color: #dd5231;
}
.list_up .connect a::after, .link_trial .connect a::after, .list_trial .connect a::after, .list__trial .connect a::after {
  content: "\f054";
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
  font-weight: 900;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 8px;
}

.list-star {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  padding-left: 24px;
  line-height: 1.4;
}
.list-star li {
  padding: 8px 0 8px 8px;
}
@media (max-width: 768px) {
  .list-star {
    margin: 32px auto;
  }
}
.list-star > li::marker {
  content: url(/image/common/list/star.webp);
}

.link_trial {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
}
.link_trial li {
  width: calc(33.3333333333% - 5.3333333333px);
  margin-bottom: 16px;
  padding: 8px;
  border: 1px solid #74664b;
  border-radius: 6px;
}
@media (max-width: 768px) {
  .link_trial li {
    width: 94%;
    margin: 24px auto;
    max-width: 1120px;
    margin: 0 auto 16px;
  }
}
.link_trial a {
  text-decoration: none;
  background: white;
  color: #266280;
}
.link_trial a.title {
  display: block;
  font-size: 1rem;
  padding: 4px 8px;
  position: relative;
  margin-top: 16px;
  font-weight: bold;
}
.link_trial a.title::before, .link_trial a.title::after {
  content: "";
  display: block;
  background: #266280;
  position: absolute;
  bottom: 0;
  right: 0;
  transition: all 0.2s ease-in-out;
}
.link_trial a.title::before {
  width: 1px;
  height: 18px;
  transform: rotate(-60deg);
  transform-origin: bottom right;
}
.link_trial a.title::after {
  width: 100%;
  height: 1px;
}
.link_trial a.title:hover {
  color: #dd5231;
}
.link_trial a.title:hover::before, .link_trial a.title:hover::after {
  right: -6px;
  background: #dd5231;
}

.list_up {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
}
.list_up li {
  width: calc(50% - 8px);
  margin: 0 4px 32px;
  padding: 0 8px 120px;
  border: 1px solid #fff8ec;
  text-align: center;
  border-radius: 6px;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
  background: white;
  position: relative;
}
@media (max-width: 768px) {
  .list_up li {
    width: 100%;
    padding: 0 8px 8px;
  }
}
.list_up li.japanese .title {
  background-color: rgba(221, 82, 49, 0.3);
}
.list_up li.math .title {
  background-color: rgba(38, 98, 128, 0.3);
}
.list_up li.science .title {
  background-color: rgba(44, 161, 44, 0.3);
}
.list_up li.social .title {
  background-color: rgba(241, 160, 78, 0.3);
}
.list_up li.english .title {
  background-color: rgba(54, 42, 20, 0.3);
}
.list_up li.change .title {
  background-color: rgba(128, 0, 128, 0.3);
}
.list_up li .title {
  background-image: url(/image/parts/list_up/paper.webp);
  position: relative;
  top: -8px;
  border-radius: 6px;
  font-weight: bold;
  padding: 16px;
  padding-right: 100px;
  box-shadow: 1px 1px 2px rgba(54, 42, 20, 0.3);
  margin-bottom: 8px;
  text-align: left;
}
.list_up li .title:before {
  content: "";
  display: block;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  border-radius: 6px;
  border: 2px dashed white;
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 2;
}
.list_up li em {
  display: block;
}
.list_up li span {
  display: block;
  width: 98px;
  height: 90px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  text-align: center;
  font-size: 1.25rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding-bottom: 14px;
}
.list_up li span.up {
  background: url(/image/parts/uplist/up.webp) no-repeat center top;
}
.list_up li span.keep {
  background: url(/image/parts/uplist/keep.webp) no-repeat center top;
}
.list_up li span.get {
  background: url(/image/parts/uplist/get.webp) no-repeat center top;
}
.list_up li span.fight {
  background: url(/image/parts/uplist/fight.webp) no-repeat center top;
}
.list_up li span.good {
  background: url(/image/parts/uplist/good.webp) no-repeat center top;
}
.list_up li span i {
  position: absolute;
  width: 100%;
  display: block;
  font-size: 0.8125rem;
  top: 10px;
  left: 0;
  text-align: center;
}
.list_up li p {
  line-height: 1.4;
}
.list_up li p.name {
  margin: 0;
  text-align: right;
  font-size: 0.875rem;
  font-weight: bold;
  padding: 4px 8px;
}
.list_up li p.txt {
  text-align: left;
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  border-radius: 6px;
  margin: 8px auto;
  border: 3px dashed rgba(54, 42, 20, 0.6);
  padding: 0.6em 0.8em;
}
@media (max-width: 768px) {
  .list_up li p.txt {
    width: 100%;
  }
}
.list_up li .addlink {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin: 0;
  position: absolute;
  bottom: 8px;
  left: 3%;
}
@media (max-width: 768px) {
  .list_up li .addlink {
    position: static;
  }
}
.list_up li .tags, .list_up li .connect {
  text-align: left;
}
.list_up li .tags a, .list_up li .connect a {
  text-decoration: none;
}
.list_up li .tags i {
  position: relative;
}
.list_up li .tags i::after {
  content: "";
  display: block;
  width: 16px;
  height: 8px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: #d8d0c1;
  position: absolute;
  top: 100%;
  left: 16px;
}

.list_interview {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
@media (max-width: 768px) {
  .list_interview {
    flex-direction: column;
  }
}
.list_interview li {
  width: 50%;
  padding: 8px;
}
@media (max-width: 768px) {
  .list_interview li {
    width: 100%;
  }
}
.list_interview a {
  display: block;
  background: #fffbb4;
  border-radius: 6px;
  text-decoration: none;
  overflow: hidden;
  text-align: center;
  height: 100%;
  position: relative;
  padding-bottom: 64px;
  border: 2px solid #f0e53B;
}
.list_interview a img {
  margin: 0 auto;
}
.list_interview a:hover {
  background: #ffffe9;
}
.list_interview a:hover img {
  opacity: 1;
}
.list_interview p {
  max-width: none;
  padding: 0;
  line-height: 1.4;
  text-align: left;
}
.list_interview .title {
  background: #266280;
  color: white;
  font-size: 1.25rem;
  font-weight: bold;
  padding: 16px 16px 4px;
  position: relative;
  width: auto;
}
.list_interview .title::after {
  content: "";
  display: block;
  position: absolute;
  background: #266280;
  height: 16px;
  width: 100%;
  top: 100%;
  transform: translateY(-1px);
  left: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.list_interview .title i {
  display: block;
  font-size: 1rem;
  margin-bottom: 8px;
}
.list_interview .title i::before {
  content: url(/image/content/voice/interview/list/icon_before.svg);
  display: inline-block;
  width: 100px;
  height: 26px;
  margin-right: 8px;
  vertical-align: bottom;
}
.list_interview .after {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin: 0 auto;
  background: white;
  border: 3px solid #f0e53B;
  border-radius: 6px;
  padding: 16px;
  color: #362a14;
}
.list_interview .after::before {
  content: url(/image/content/voice/interview/list/icon_after.svg);
  display: block;
  width: 100px;
  height: 26px;
  transform: translateY(-4px);
}
.list_interview .after em {
  font-size: 1.2em;
  color: red;
  line-height: 1;
}
.list_interview .next {
  display: block;
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin: 0 auto;
  padding: 4px 16px;
  text-align: left;
  border-radius: 16px;
  background: #266280;
  color: white;
  position: absolute;
  bottom: 8px;
  left: 3%;
  font-size: 1rem;
}
.list_interview .next::after {
  content: "\f138";
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.list_trial {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  text-align: center;
  border: 1px solid #d8d0c1;
  border-radius: 6px;
  padding: 16px;
  background: white;
  max-width: 960px;
}
.list_trial .childimg, .list_trial .parentimg {
  padding: 24px 8px 8px;
  border: 2px solid #fff8ec;
  position: relative;
  display: inline-block;
  margin: 24px auto 0;
  text-align: center;
}
@media (max-width: 768px) {
  .list_trial .childimg, .list_trial .parentimg {
    display: block;
  }
}
.list_trial .childimg::after, .list_trial .parentimg::after {
  content: url("/image/content/voice/trial/bg.webp");
  position: absolute;
  top: -12px;
  left: calc(50% - 136px);
}
.list_trial .childimg::before, .list_trial .parentimg::before {
  display: block;
  font-weight: bold;
  font-size: 0.9em;
}
.list_trial .childimg em, .list_trial .parentimg em {
  display: block;
  font-size: 0.9em;
}
.list_trial .childimg::before {
  content: "お子さんの声";
}
.list_trial .parentimg::before {
  content: "保護者の方の声";
}
.list_trial p, .list_trial dl {
  text-align: left;
}
.list_trial .trialimg {
  width: 100%;
  text-align: center;
}
.list_trial a, .list_trial .tags {
  text-align: left;
}
.list_trial .title {
  background: #f0e53B;
  font-size: 1.1em;
  padding: 0.8em;
  border-radius: 6px;
  position: relative;
  width: 100%;
}
.list_trial .title::after {
  content: "";
  display: block;
  border: 16px solid transparent;
  border-top-color: #f0e53B;
  position: absolute;
  top: 100%;
  left: calc(50% - 16px);
}
.list_trial .title span {
  font-size: 0.9em;
  display: block;
  margin-bottom: 8px;
}
.list_trial .box {
  margin: 64px auto 0;
}
.list_trial .box.child .headline::before {
  content: "";
  display: inline-block;
  width: 46px;
  height: 46px;
  background: url(/image/content/voice/trial/icon03.webp) no-repeat center #f0e53B;
  border: 8px solid white;
  border-radius: 50%;
  position: absolute;
  top: -12px;
  right: calc(100% - 16px);
}
.list_trial .box.child .headline.motivation::before {
  background-image: url(/image/content/voice/trial/icon01.webp);
}
.list_trial .box.child .headline.enjoy::before {
  background-image: url(/image/content/voice/trial/icon02.webp);
}
.list_trial .box.child .headline.good::before {
  background-image: url(/image/content/voice/trial/icon03.webp);
}
.list_trial .img {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin: 8px auto;
  position: relative;
  padding: 8px;
}
.list_trial .img::before, .list_trial .img::after {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  position: absolute;
}
.list_trial .img::before {
  border-top-color: #d8d0c1;
  border-left-color: #d8d0c1;
  top: 0;
  left: 0;
}
.list_trial .img::after {
  border-right-color: #d8d0c1;
  border-bottom-color: #d8d0c1;
  bottom: 0;
  right: 0;
}
.list_trial .text {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin: 16px auto;
  border-radius: 6px;
  padding: 1em;
  line-height: 1.4;
  background: #ffffe9;
}
.list_trial .headline {
  display: inline-block;
  background: #f0e53B;
  font-weight: bold;
  width: auto;
  padding: 0 32px;
  line-height: 40px;
  position: relative;
  border-radius: 6px;
  top: -28px;
  border: 8px solid white;
  margin-bottom: -24px;
}
.list_trial .comment {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin: 0 auto;
}
.list_trial .comment dt {
  font-weight: bold;
}
.list_trial .comment dd {
  padding: 0.8em 0;
}
.list_trial.single .box {
  width: 100%;
}

.list__trial {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  border: 1px solid #d8d0c1;
  border-radius: 6px;
  padding: 16px;
  background: white;
  max-width: 960px;
}
.list__trial .trialimg {
  width: 100%;
  text-align: center;
}
.list__trial .title {
  background: #f0e53B;
  font-size: 1.1em;
  padding: 0.8em;
  border-radius: 6px;
  position: relative;
  width: 100%;
}
.list__trial .title::after {
  content: "";
  display: block;
  width: 32px;
  height: 16px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: #f0e53B;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.list__trial .box {
  margin: 16px auto 0;
}
.list__trial .box.child .headline {
  padding-left: 16px;
}
.list__trial .box.child .headline span::before {
  content: "";
  display: inline-block;
  width: 46px;
  height: 46px;
  background: url(/image/content/voice/trial/icon03.webp) no-repeat center #f0e53B;
  border: 8px solid white;
  border-radius: 50%;
  position: absolute;
  top: -12px;
  right: calc(100% - 16px);
}
.list__trial .box.child .headline span.motivation::before {
  background-image: url(/image/content/voice/trial/icon01.webp);
}
.list__trial .box.child .headline span.enjoy::before {
  background-image: url(/image/content/voice/trial/icon02.webp);
}
.list__trial .box.child .headline span.good::before {
  background-image: url(/image/content/voice/trial/icon03.webp);
}
.list__trial .headline {
  text-align: left;
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin: 0 auto;
}
.list__trial .headline span {
  display: inline-block;
  font-weight: bold;
  background: #f0e53B;
  border: 8px solid white;
  padding: 0 32px;
  position: relative;
  border-radius: 6px;
  line-height: 40px;
}
.list__trial .rank {
  background: #fcf4f4;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 16px;
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  max-width: 640px;
  margin: 16px auto;
}
@media (max-width: 768px) {
  .list__trial .rank {
    flex-direction: column;
  }
}
.list__trial .rank .star, .list__trial .rank .starlabel {
  height: 32px;
}
.list__trial .rank .star img, .list__trial .rank .starlabel img {
  height: 100%;
}
.list__trial .rank .name {
  font-weight: bold;
  padding: 0 16px;
}
@media (max-width: 768px) {
  .list__trial .rank .name {
    padding: 8px 8px 0;
    text-align: center;
  }
}

.box_voice {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin-top: 32px;
  border: 1px solid #d8d0c1;
  border-radius: 6px;
  padding: 16px;
  background: white;
  max-width: 960px;
}
.box_voice.evidence .title {
  background: #ebfab6;
}
.box_voice.evidence .title::after {
  background: #ebfab6;
}
.box_voice.evidence .from span {
  background: #ebfab6;
}
.box_voice.male .intro {
  background: #e7f5f5;
}
.box_voice.multi .intro {
  background: #fff8ec;
}
.box_voice .title {
  width: auto;
  max-width: unset;
  text-align: center;
  line-height: 1.4;
  font-size: 1.1em;
  font-weight: bold;
  background: #f0e53B;
  padding: 16px;
  border-radius: 6px;
  position: relative;
}
.box_voice .title::after {
  content: "";
  display: block;
  width: 32px;
  height: 16px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: #f0e53B;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.box_voice .intro {
  background: #fcf4f4;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 16px;
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  max-width: 640px;
  margin: 16px auto;
}
@media (max-width: 768px) {
  .box_voice .intro {
    flex-direction: column;
  }
}
.box_voice .intro .star, .box_voice .intro .starlabel {
  height: 32px;
}
.box_voice .intro .star img, .box_voice .intro .starlabel img {
  height: 100%;
}
.box_voice .name {
  font-weight: bold;
  padding: 0 16px;
}
@media (max-width: 768px) {
  .box_voice .name {
    padding: 8px 8px 0;
    text-align: center;
  }
}
.box_voice .box {
  margin: 32px auto 0;
}
.box_voice .box.child .from {
  padding-left: 16px;
}
.box_voice .box.child .from span {
  position: relative;
}
.box_voice .box.child .from span::before {
  content: "";
  display: inline-block;
  width: 46px;
  height: 46px;
  position: absolute;
  top: -10px;
  right: calc(100% - 16px);
  border: 6px solid white;
  border-radius: 50%;
  background: url(/image/content/voice/icon/icon03.webp) no-repeat center;
}
.box_voice .box.child .from span.motivation::before {
  background-image: url(/image/content/voice/icon/icon01.webp);
}
.box_voice .box.child .from span.enjoy::before {
  background-image: url(/image/content/voice/icon/icon02.webp);
}
.box_voice .box.child .from span.good::before {
  background-image: url(/image/content/voice/icon/icon03.webp);
}
.box_voice .from {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin: 0 auto;
}
.box_voice .from span {
  display: inline-block;
  font-weight: bold;
  background: #f0e53B;
  padding: 0 32px;
  border-radius: 6px;
  line-height: 40px;
}
.box_voice .tags {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin: 32px auto 8px;
  font-size: 0rem;
  text-align: right;
}
.box_voice .tags i, .box_voice .tags a {
  display: inline-block;
  background: #d8d0c1;
  color: white;
  border-radius: 6px;
  font-size: 0.875rem;
  padding: 6px 8px;
  margin: 4px;
}
.box_voice .tags a {
  background: #266280;
  text-decoration: none;
}
.box_voice .tags a:hover {
  color: #f0e53B;
}

dl.square dt {
  font-weight: bold;
}
dl.square dt:before {
  content: "\f0c8";
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
  margin-right: 6px;
}
dl.square dd {
  padding: 8px 0 32px 24px;
}
dl.square dd p, dl.square dd ul, dl.square dd ol, dl.square dd dl, dl.square dd li, dl.square dd table, dl.square dd div {
  width: auto;
  max-width: unset;
}
dl.square dd p:first-child, dl.square dd ul:first-child, dl.square dd ol:first-child, dl.square dd dl:first-child, dl.square dd li:first-child, dl.square dd table:first-child, dl.square dd div:first-child {
  padding-top: 0;
}
dl.square dd:last-child {
  padding-bottom: 8px;
}

.box_evidence {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  border-radius: 6px;
  margin-top: 32px;
  border: 1px solid rgb(113.5459459459, 88.3135135135, 42.0540540541);
  padding: 0;
}
.box_evidence dt {
  border-radius: 6px;
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  position: relative;
  top: -32px;
  margin-bottom: -32px;
  background: rgb(206.0810810811, 176.7297297297, 122.9189189189);
  font-weight: bold;
  padding: 0.6em 1.2em;
}
.box_evidence .voiceimg {
  text-align: center;
}
.box_evidence .voiceimg img {
  border-radius: 6px;
}
.box_evidence .name {
  text-align: right;
  font-weight: bold;
  margin: 0 auto;
  padding: 8px 0;
}
.box_evidence ul {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin: 0 auto;
}
.box_evidence ul p.from {
  font-size: 0.9em;
  font-weight: bold;
  padding-bottom: 0;
}
.box_evidence ul li {
  background: url(/image/common/line/dash.webp) repeat-x center bottom;
  padding-bottom: 16px;
  margin-bottom: 16px;
}
.box_evidence ul li:last-child {
  background: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.box_evidence.boy {
  border-color: rgb(56.6795180723, 146.1734939759, 190.9204819277);
}
.box_evidence.boy dt {
  background: rgb(209.9686746988, 231.0771084337, 241.6313253012);
}
.box_evidence.boy .voiceimg img {
  border: 2px solid rgb(209.9686746988, 231.0771084337, 241.6313253012);
}
.box_evidence.girl {
  border-color: rgb(232.56, 140.82, 119.04);
}
.box_evidence.girl dt {
  background: rgb(238.34, 170.23, 154.06);
}
.box_evidence.girl .voiceimg img {
  border: 2px solid rgb(238.34, 170.23, 154.06);
}

.sns {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.sns li {
  padding: 8px;
  width: 50%;
}
@media (max-width: 768px) {
  .sns li {
    width: 100%;
  }
}
.sns a {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
  padding: 16px;
  color: #362a14;
  border-radius: 12px;
  font-size: 0.8em;
  flex-wrap: nowrap;
}
.sns a:hover {
  background: #ffffe9;
}
.sns a img {
  width: 64px;
}
.sns a div {
  padding: 4px 8px;
}

.link_grade, .link_course {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.link_grade li, .link_course li {
  width: 33.3333333333%;
}

@media (max-width: 768px) {
  .link_grade li {
    width: 100%;
    margin-bottom: 4px;
  }
}

.cta_bottom {
  text-align: center;
  margin-top: 32px;
}
.cta_bottom aside {
  max-width: 736px;
  margin: 0 auto;
  padding: 8px 0;
  background: url(/image/parts/cta/bg_head.webp) no-repeat center top/contain, url(/image/parts/cta/bg_foot.webp) no-repeat center bottom/contain, url(/image/parts/cta/bg.webp) repeat-y center/contain;
}
.cta_bottom li {
  background: white;
  border: 3px solid white;
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin: 0 auto 24px;
  border-radius: 12px;
}
.cta_bottom li.web {
  padding: 8px 0;
}
.cta_bottom a {
  display: block;
}
.cta_bottom .btn {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
}
@media (max-width: 768px) {
  .cta_bottom .btn {
    margin-top: 0;
  }
}
.cta_bottom .btn a {
  border-radius: 6px;
  color: white;
  text-decoration: none;
  padding: 12px 8px;
  font-size: 1rem;
  border-radius: 6px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  line-height: 1;
  margin: 0 4px;
  width: 36%;
}
@media (max-width: 768px) {
  .cta_bottom .btn a {
    width: 48%;
    padding: 24px 8px;
    margin: 0 1%;
  }
}
.cta_bottom .btn a::before {
  font-size: 1.5rem;
  margin-right: 4px;
}
.cta_bottom .btn a.line {
  background: #2ca12c;
}
.cta_bottom .btn a.line::before {
  content: "\f3c0";
  font-family: "Font Awesome 5 Brands";
  line-height: 1;
  font-weight: 400;
  padding: 0 4px;
}
.cta_bottom .btn a.form {
  background: #266280;
}
.cta_bottom .btn a.form::before {
  content: "\f0e0";
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
}
.cta_bottom .btn a:hover {
  opacity: 0.8;
}
.cta_bottom .ps {
  text-align: left;
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  background: url(/image/common/paper.webp);
  border-radius: 32px;
  padding: 8px 32px;
}
.cta_bottom .ps p {
  padding: 8px 0;
  width: auto;
  font-size: 1rem;
  line-height: 1.4;
  text-align: left;
}
.cta_bottom .ps p:first-child {
  color: #2ca12c;
  font-weight: bold;
  font-size: 1.25rem;
}

.tellink {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin: 0 auto 24px;
  display: none;
}
@media (max-width: 768px) {
  .tellink {
    display: block;
  }
}
.tellink a {
  background: #dd5231;
  display: block;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  padding: 16px 8px;
}
.tellink a:before {
  font-weight: normal;
  content: "\f3cd";
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
  font-size: 1.75rem;
  padding-right: 0.3em;
}

.reccomend_page {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  max-width: 800px;
}
.reccomend_page dt {
  padding: 0 8px;
}
.reccomend_page dd {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  background: url(/image/parts/reccomend/bg01.webp) repeat-x left top, url(/image/parts/reccomend/bg02.webp) repeat-x left bottom;
  padding: 32px 16px;
}
@media (max-width: 768px) {
  .reccomend_page dd {
    display: block;
    text-align: center;
  }
}
.reccomend_page dd a {
  display: inline-block;
  margin: 8px 0;
  width: calc(50% - 8px);
}
@media (max-width: 768px) {
  .reccomend_page dd a {
    width: 100%;
  }
}

.cta_box {
  max-width: 800px;
  width: calc(94% - 32px);
  margin: 24px auto;
  border-radius: 12px;
  border: 2px dashed #71cc5f;
  padding: 16px 0;
  position: relative;
  background: white;
}
.cta_box::before {
  content: "";
  display: block;
  width: calc(100% + 32px);
  height: calc(100% + 32px);
  background: #ebfab6;
  border-radius: 12px;
  position: absolute;
  top: -16px;
  left: -16px;
  z-index: -1;
}
.cta_box.wide {
  border: none;
  width: 100%;
  max-width: none;
  background: #ebfab6;
}
@media (max-width: 768px) {
  .cta_box.wide {
    border-radius: 0px;
  }
}
.cta_box.wide::before {
  content: none;
}
.cta_box .tel {
  background: #dd5231;
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  border-radius: 6px;
  padding: 16px 32px;
  margin: 0 auto 24px;
  border: 3px solid white;
  box-shadow: 0 2px 3px rgba(54, 42, 20, 0.3);
}
@media (max-width: 768px) {
  .cta_box .tel {
    display: none;
  }
}
.cta_box ul {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin: 0 auto 24px;
  max-width: 800px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (max-width: 768px) {
  .cta_box ul {
    flex-direction: column;
  }
}
.cta_box ul li {
  width: 49%;
  margin-bottom: 16px;
}
@media (max-width: 768px) {
  .cta_box ul li {
    width: 100%;
  }
}
.cta_box p {
  width: 100%;
  padding: 16px 32px;
}
@media (max-width: 768px) {
  .cta_box p {
    padding: 16px;
  }
}
.cta_box a, .cta_box .telbtn {
  border-radius: 12px;
  height: 80px;
  line-height: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.cta_box a {
  color: white;
  text-decoration: none;
  border: 3px solid white;
  box-shadow: 0 2px 3px rgba(54, 42, 20, 0.3);
  font-weight: bold;
}
.cta_box a:before {
  font-weight: normal;
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
  font-size: 1.75rem;
  padding-right: 0.3em;
}
.cta_box a.line {
  background: #00b900;
}
.cta_box a.line:before {
  font-family: "Font Awesome 5 Brands";
  line-height: 1;
  font-weight: 400;
  padding: 0 4px;
  content: "\f3c0";
  font-size: 1.375rem;
}
.cta_box a.form {
  background: #5697B8;
}
.cta_box a.form:before {
  content: "\f0e0";
  font-size: 1.25rem;
}
.cta_box a small {
  font-weight: normal;
}
.cta_box .telbtn {
  background: #dd5231;
  border: 3px solid white;
  box-shadow: 0 2px 3px rgba(54, 42, 20, 0.3);
}
@media (max-width: 768px) {
  .cta_box .telbtn {
    border: none;
    box-shadow: unset;
  }
}
.cta_box .telbtn img {
  width: 80%;
  max-width: 320px;
}

#beforeafter {
  display: none;
  width: 84%;
  max-width: 800px;
  padding: 16px 8px;
}
#beforeafter ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin: 0 auto;
}
#beforeafter li {
  width: 50%;
  padding: 8px;
}
#beforeafter a {
  display: block;
  text-align: center;
  color: white;
  font-weight: bold;
  padding: 32px 8px;
  border-radius: 6px;
  text-decoration: none;
}
#beforeafter a.before {
  background: #2ca12c;
}
#beforeafter a.after {
  background: #dd5231;
}
#beforeafter a:hover {
  filter: brightness(120%);
}
#beforeafter p {
  margin-top: 0;
  text-align: center;
}
@media (max-width: 768px) {
  #beforeafter p {
    text-align: left;
  }
}

#popup_trial {
  display: none;
  background: url(/image/parts/cta/bg_head.webp) no-repeat center top/contain, url(/image/parts/cta/bg_foot.webp) no-repeat center bottom/contain, url(/image/parts/cta/bg.webp) repeat-y center/contain;
}
#popup_trial ul {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
}
#popup_trial li {
  background: white;
  border: 3px solid white;
  margin: 0 auto 24px;
  border-radius: 12px;
}
#popup_trial li.web {
  padding: 8px 0;
}
#popup_trial a {
  display: block;
}
#popup_trial .btn {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
#popup_trial .btn::before {
  content: url(/image/parts/cta/img01.webp);
}
@media (max-width: 768px) {
  #popup_trial .btn::before {
    content: none;
  }
}
#popup_trial .btn a {
  border-radius: 6px;
  color: white;
  text-decoration: none;
  padding: 12px 8px;
  font-size: 1rem;
  border-radius: 6px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  line-height: 1;
  margin: 0 4px;
  width: 36%;
}
@media (max-width: 768px) {
  #popup_trial .btn a {
    width: 48%;
    padding: 24px 8px;
    margin: 0 1%;
  }
}
#popup_trial .btn a::before {
  font-size: 1.5rem;
  margin-right: 4px;
}
#popup_trial .btn a.line {
  background: #2ca12c;
}
#popup_trial .btn a.line::before {
  content: "\f3c0";
  font-family: "Font Awesome 5 Brands";
  line-height: 1;
  font-weight: 400;
  padding: 0 4px;
}
#popup_trial .btn a.form {
  background: #266280;
}
#popup_trial .btn a.form::before {
  content: "\f0e0";
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
}
#popup_trial .btn a:hover {
  opacity: 0.8;
}

.balloon {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: flex-start;
  flex-wrap: nowrap;
}
@media (max-width: 768px) {
  .balloon {
    margin: 32px auto;
  }
}
section .balloon {
  width: 100%;
}
.balloon > img {
  max-width: 34%;
}
.balloon > p, .balloon > div {
  background: white;
  border-radius: 16px;
  position: relative;
  border: 3px solid #beb7aa;
  margin-right: 16px;
  width: auto;
}
.balloon > p::before, .balloon > p::after, .balloon > div::before, .balloon > div::after {
  content: "";
  display: block;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.balloon > p::before, .balloon > div::before {
  background: #beb7aa;
  width: 16px;
  height: 24px;
}
.balloon > p::after, .balloon > div::after {
  background: white;
  width: 11px;
  height: 17px;
}
.balloon > p p, .balloon > div p {
  padding: 16px 0;
}
.balloon > p {
  padding: 16px 32px;
}
@media (max-width: 768px) {
  .balloon > p {
    padding: 16px;
  }
}
.balloon > div {
  padding: 0 32px;
}
@media (max-width: 768px) {
  .balloon > div {
    padding: 0 16px;
  }
}
.balloon.yellowbox > p, .balloon.yellowbox > div {
  border-color: #f0e53B;
}
.balloon.yellowbox > p::before, .balloon.yellowbox > div::before {
  background: #f0e53B;
}
.balloon.pinkbox > p, .balloon.pinkbox > div {
  border-color: #ffb0a9;
}
.balloon.pinkbox > p::before, .balloon.pinkbox > div::before {
  background: #ffb0a9;
}
.balloon.bluebox > p, .balloon.bluebox > div {
  border-color: #c3eef7;
}
.balloon.bluebox > p::before, .balloon.bluebox > div::before {
  background: #c3eef7;
}
.balloon.greenbox > p, .balloon.greenbox > div {
  border-color: #d2ebb2;
}
.balloon.greenbox > p::before, .balloon.greenbox > div::before {
  background: #d2ebb2;
}
.balloon.leftside {
  flex-direction: row;
}
.balloon.leftside > p, .balloon.leftside > div {
  margin-right: 0;
  margin-left: 16px;
}
.balloon.leftside > p::before, .balloon.leftside > p::after, .balloon.leftside > div::before, .balloon.leftside > div::after {
  left: auto;
  right: 100%;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.balloon.leftside {
  flex-direction: row;
}
.balloon.leftside > p, .balloon.leftside > div {
  margin-right: 0;
  margin-left: 16px;
}
.balloon.leftside > p::before, .balloon.leftside > p::after, .balloon.leftside > div::before, .balloon.leftside > div::after {
  left: auto;
  right: 100%;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.balloon.upside > p, .balloon.upside > div, .balloon.downside > p, .balloon.downside > div {
  margin-right: 0;
}
.balloon.upside > p::before, .balloon.upside > p::after, .balloon.upside > div::before, .balloon.upside > div::after, .balloon.downside > p::before, .balloon.downside > p::after, .balloon.downside > div::before, .balloon.downside > div::after {
  left: 50%;
  transform: translateX(-50%);
}
.balloon.upside > p::before, .balloon.upside > div::before, .balloon.downside > p::before, .balloon.downside > div::before {
  width: 24px;
  height: 16px;
}
.balloon.upside > p::after, .balloon.upside > div::after, .balloon.downside > p::after, .balloon.downside > div::after {
  width: 17px;
  height: 11px;
}
.balloon.upside {
  flex-direction: column;
}
.balloon.upside > p, .balloon.upside > div {
  margin-top: 16px;
}
.balloon.upside > p::before, .balloon.upside > p::after, .balloon.upside > div::before, .balloon.upside > div::after {
  top: auto;
  bottom: 100%;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.balloon.downside {
  flex-direction: column-reverse;
}
.balloon.downside > p, .balloon.downside > div {
  margin-bottom: 16px;
}
.balloon.downside > p::before, .balloon.downside > p::after, .balloon.downside > div::before, .balloon.downside > div::after {
  top: 100%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
@media (max-width: 768px) {
  .balloon.spup > p, .balloon.spup > div, .balloon.spdown > p, .balloon.spdown > div {
    margin-right: 0;
  }
  .balloon.spup > p::before, .balloon.spup > p::after, .balloon.spup > div::before, .balloon.spup > div::after, .balloon.spdown > p::before, .balloon.spdown > p::after, .balloon.spdown > div::before, .balloon.spdown > div::after {
    left: 50%;
    transform: translateX(-50%);
  }
  .balloon.spup > p::before, .balloon.spup > div::before, .balloon.spdown > p::before, .balloon.spdown > div::before {
    width: 24px;
    height: 16px;
  }
  .balloon.spup > p::after, .balloon.spup > div::after, .balloon.spdown > p::after, .balloon.spdown > div::after {
    width: 17px;
    height: 11px;
  }
  .balloon.spup {
    flex-direction: column;
  }
  .balloon.spup > p, .balloon.spup > div {
    margin-top: 16px;
  }
  .balloon.spup > p::before, .balloon.spup > p::after, .balloon.spup > div::before, .balloon.spup > div::after {
    top: auto;
    bottom: 100%;
    clip-path: polygon(0 100%, 50% 0, 100% 100%);
  }
  .balloon.spdown {
    flex-direction: column-reverse;
  }
  .balloon.spdown > p, .balloon.spdown > div {
    margin-bottom: 16px;
  }
  .balloon.spdown > p::before, .balloon.spdown > p::after, .balloon.spdown > div::before, .balloon.spdown > div::after {
    top: 100%;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
}

/*
.balloon{
	max-width:$boxsize;
	@include flex;
	align-items:center;
	flex-direction:row-reverse;
	@include inwidth;
	flex-wrap:nowrap;
	&>img{
		max-width:34%;
	}
	&>p,&>div{
		background:white;
		@include radius(16);
		padding:16px 24px;
		position:relative;
		margin:0 12px 0 0;
		border:3px solid $gray-light;
		line-height:1.4;
		flex:1;
		&::before,&::after{
			content:"";
			display:block;
			width:0;
			height:0;
			position:absolute;
			border:8px solid transparent;
			left:100%;
		}
		&::before{
			border-width:12px;
			border-left-color:$gray-light;
			top:calc(50% - 12px);
		}
		&::after{
			border-left-color:white;
			top:calc(50% - 8px);
		}
		p{
			margin:32px 0 0;
			padding:0;
			width:auto;
			max-width:unset;
			&:first-child{
				margin:0;
			}
		}
		&.yellowbox{
			&>p,&>div{
				&::before{
					border-color:transparent;
					border-left-color:$yellow;
				}
			}
		}
		&.pinkbox{
			&>p,&>div{
				&::before{
					border-color:transparent;
					border-left-color:$red-light;
				}
			}
		}
		&.bluebox{
			&>p,&>div{
				&::before{
					border-color:transparent;
					border-left-color:$blue-thin;
				}
			}
		}
		&.greenbox{
			&>p,&>div{
				&::before{
					border-color:transparent;
					border-left-color:$green-thin;
				}
			}
		}
	}
	&.leftside{
		flex-direction:row;
		&>p,&>div{
			margin:0 0 0 12px;
			&::before,&::after{
				left:auto;
				right:100%;
				border-color:transparent;
			}
			&::before{
				border-right-color:$gray-light;
			}
			&::after{
				border-right-color:white;
			}
		}
		&.yellowbox{
			&>p,&>div{
				&::before{
					border-color:transparent;
					border-right-color:$yellow;
				}
			}
		}
		&.pinkbox{
			&>p,&>div{
				&::before{
					border-color:transparent;
					border-right-color:$red-light;
				}
			}
		}
		&.bluebox{
			&>p,&>div{
				&::before{
					border-color:transparent;
					border-right-color:$blue-thin;
				}
			}
		}
		&.greenbox{
			&>p,&>div{
				&::before{
					border-color:transparent;
					border-right-color:$green-thin;
				}
			}
		}
	}
	&.upside{
		flex-direction:column;
		&>img{
			max-width:100%;
		}
		&>p,&>div{
			margin:12px 0 0 0;
			&::before,&::after{
				left:auto;
				bottom:100%;
				border-color:transparent;
			}
			&::before{
				border-bottom-color:$gray-light;
				top:auto;
				left:calc(50% - 16px);
			}
			&::after{
				border-bottom-color:white;
				top:auto;
				left:calc(50% - 12px);
			}
		}
		&.yellowbox{
			&>p,&>div{
				&::before{
					border-color:transparent;
					border-bottom-color:$yellow;
				}
			}
		}
		&.pinkbox{
			&>p,&>div{
				&::before{
					border-color:transparent;
					border-bottom-color:$red-light;
				}
			}
		}
		&.bluebox{
			&>p,&>div{
				&::before{
					border-color:transparent;
					border-bottom-color:$blue-thin;
				}
			}
		}
		&.greenbox{
			&>p,&>div{
				&::before{
					border-color:transparent;
					border-bottom-color:$green-thin;
				}
			}
		}
	}
	&.downside{
		flex-direction:column-reverse;
		&>img{
			max-width:100%;
		}
		&>p,&>div{
			margin:0 0 12px 0;
			&::before,&::after{
				left:auto;
				top:100%;
				border-color:transparent;
			}
			&::before{
				border-top-color:$gray-light;
				left:calc(50% - 16px);
			}
			&::after{
				border-top-color:white;
				left:calc(50% - 12px);
			}
		}
		&.yellowbox{
			&>p,&>div{
				&::before{
					border-color:transparent;
					border-top-color:$yellow;
				}
			}
		}
		&.pinkbox{
			&>p,&>div{
				&::before{
					border-color:transparent;
					border-top-color:$red-light;
				}
			}
		}
		&.bluebox{
			&>p,&>div{
				&::before{
					border-color:transparent;
					border-top-color:$blue-thin;
				}
			}
		}
		&.greenbox{
			&>p,&>div{
				&::before{
					border-color:transparent;
					border-top-color:$green-thin;
				}
			}
		}
	}
	&.yellowbox{
		&>p,&>div{
			border-color:$yellow;
			&::before{
				border-color:transparent;
				border-left-color:$yellow;
			}
		}
	}
	&.pinkbox{
		&>p,&>div{
			border-color:$red-light;
			&::before{
				border-color:transparent;
				border-left-color:$red-light;
			}
		}
	}
	&.bluebox{
		&>p,&>div{
			border-color:$blue-thin;
			&::before{
				border-color:transparent;
				border-left-color:$blue-thin;
			}
		}
	}
	&.greenbox{
		&>p,&>div{
			border-color:$green-thin;
			&::before{
				border-color:transparent;
				border-left-color:$green-thin;
			}
		}
	}
@include media{
	&>p,&>div{
		padding:1.6em 1em;
	}
	&.spup{
		flex-direction:column;
		&>img{
			max-width:60%;
		}
		&>p,&>div{
			margin:12px 0 0 0;
			&::before,&::after{
				left:auto;
				bottom:100%;
				border-color:transparent;
			}
			&::before{
				border-bottom-color:$gray-light;
				top:auto;
				left:calc(50% - 16px);
			}
			&::after{
				border-bottom-color:white;
				top:auto;
				left:calc(50% - 12px);
			}
		}
		&.yellowbox{
			&>p,&>div{
				&::before{
					border-color:transparent;
					border-bottom-color:$yellow;
				}
			}
		}
		&.pinkbox{
			&>p,&>div{
				&::before{
					border-color:transparent;
					border-bottom-color:$red-light;
				}
			}
		}
		&.bluebox{
			&>p,&>div{
				&::before{
					border-color:transparent;
					border-bottom-color:$blue-thin;
				}
			}
		}
		&.greenbox{
			&>p,&>div{
				&::before{
					border-color:transparent;
					border-bottom-color:$green-thin;
				}
			}
		}
	}
	&.spdown{
		flex-direction:column-reverse;
		&>img{
			max-width:60%;
		}
		&>p,&>div{
			margin:0 0 12px 0;
			&::before,&::after{
				left:auto;
				top:100%;
				border-color:transparent;
			}
			&::before{
				border-top-color:$gray-light;
				left:calc(50% - 16px);
			}
			&::after{
				border-top-color:white;
				left:calc(50% - 12px);
			}
		}
		&.yellowbox{
			&>p,&>div{
				&::before{
					border-color:transparent;
					border-top-color:$yellow;
				}
			}
		}
		&.pinkbox{
			&>p,&>div{
				&::before{
					border-color:transparent;
					border-top-color:$red-light;
				}
			}
		}
		&.bluebox{
			&>p,&>div{
				&::before{
					border-color:transparent;
					border-top-color:$blue-thin;
				}
			}
		}
		&.greenbox{
			&>p,&>div{
				&::before{
					border-color:transparent;
					border-top-color:$green-thin;
				}
			}
		}
	}
}
}

*/
.list_passschool {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  background: #e7f5f5;
  border: 1px solid #fff8ec;
  border-radius: 6px;
  padding: 16px 16px 2px;
}
.list_passschool ul {
  display: none;
}
.list_passschool ul.slick-initialized {
  display: block;
}
.list_passschool li {
  margin: 8px auto;
}
@media (max-width: 768px) {
  .list_passschool li {
    margin: 2px auto;
  }
}
.list_passschool li a, .list_passschool li i {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  font-size: 1.25rem;
  font-weight: bold;
  border: 4px solid #fff8ec;
  padding: 16px;
  border-radius: 6px;
  background: white;
  position: relative;
  text-decoration: none;
  color: #362a14;
}
@media (max-width: 768px) {
  .list_passschool li a, .list_passschool li i {
    flex-direction: column;
    align-items: flex-start;
    font-size: 1.125rem;
    padding-bottom: 8px;
  }
}
.list_passschool li a:hover {
  background: #ffffe9;
  color: #dd5231;
}
.list_passschool li span {
  display: inline-block;
  padding-left: 54px;
  width: 160px;
  font-size: 1rem;
  position: relative;
}
@media (max-width: 768px) {
  .list_passschool li span {
    width: auto;
    margin-bottom: 8px;
  }
}
.list_passschool li span::before {
  content: "";
  display: inline-block;
  width: 46px;
  height: 46px;
  background: no-repeat center/contain;
  position: absolute;
  left: 0;
  top: calc(50% - 23px);
}
.list_passschool li em::after {
  content: "合格おめでとう";
  display: inline-block;
  margin-left: 16px;
}
.list_passschool li small {
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  padding: 4px 8px;
  border-radius: 0 0 0 6px;
  background: #fff8ec;
}
@media (max-width: 768px) {
  .list_passschool li small {
    padding: 4px 4px 2px;
  }
}
.list_passschool li.male span::before {
  background-image: url(/image/content/voice/parts/list_passschool/child_m.webp);
}
.list_passschool li.female span::before {
  background-image: url(/image/content/voice/parts/list_passschool/child_f.webp);
}
.list_passschool li.kanto a {
  border-color: #fcf4f4;
}
.list_passschool li.kanto small {
  background: #ffb0a9;
  color: white;
}
.list_passschool li.north a {
  border-color: #5697B8;
}
.list_passschool li.north small {
  background: #5697B8;
  color: white;
}
.list_passschool li.tohoku a {
  border-color: #d2ebb2;
}
.list_passschool li.tohoku small {
  background: #d2ebb2;
  color: #362a14;
}
.list_passschool li.niigata a {
  border-color: #889eea;
}
.list_passschool li.niigata small {
  background: #889eea;
  color: white;
}
.list_passschool li.kyushu a {
  border-color: #fff8ec;
}
.list_passschool li.kyushu small {
  background: #fff8ec;
  color: #362a14;
}

.box_pass, .list_pass {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
}
@media (max-width: 768px) {
  .box_pass, .list_pass {
    width: 100%;
  }
}
.box_pass .header, .list_pass .header {
  position: relative;
  background: white;
}
.box_pass .header > span, .list_pass .header > span {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
.box_pass .header > span .area, .list_pass .header > span .area {
  background: #f1a04e;
  color: white;
  font-weight: bold;
  padding: 8px 16px;
}
@media (max-width: 768px) {
  .box_pass .header > span .area, .list_pass .header > span .area {
    padding: 4px 8px;
    font-size: 0.9375rem;
  }
}
.box_pass .header > span .area.kanto, .list_pass .header > span .area.kanto {
  background: #ffb0a9;
}
.box_pass .header > span .area.north, .list_pass .header > span .area.north {
  background: #5697B8;
}
.box_pass .header > span .area.tohoku, .list_pass .header > span .area.tohoku {
  background: #71cc5f;
}
.box_pass .header > span .area.niigata, .list_pass .header > span .area.niigata {
  background: #889eea;
}
.box_pass .header > span .area.kyushu, .list_pass .header > span .area.kyushu {
  background: #889eea;
}
.box_pass .header > span .way, .list_pass .header > span .way {
  font-size: 0.875rem;
  margin-right: 8px;
  display: inline-block;
  border: 1px dashed #d8d0c1;
  padding: 4px 8px;
}
@media (max-width: 768px) {
  .box_pass .header > span .way, .list_pass .header > span .way {
    font-size: 0.75rem;
    padding: 2px 4px;
  }
}
.box_pass .school, .list_pass .school {
  padding: 16px 8px 8px 140px;
}
@media (max-width: 768px) {
  .box_pass .school, .list_pass .school {
    font-size: 1.125rem;
    padding: 24px 8px 8px 72px;
  }
}
.box_pass .school::after, .list_pass .school::after {
  content: url(/image/content/voice/parts/list_achievement/img02.webp);
  font-size: 0rem;
  display: block;
}
.box_pass .school i, .list_pass .school i {
  font-weight: bold;
  font-size: 1.375rem;
}
.box_pass .title, .list_pass .title {
  text-align: center;
  font-weight: bold;
  padding: 4px;
}
@media (max-width: 768px) {
  .box_pass .title, .list_pass .title {
    text-align: left;
    padding: 8px 16px;
  }
}
.box_pass .title span, .box_pass .title h1, .list_pass .title span, .list_pass .title h1 {
  display: inline-block;
  padding: 16px;
  padding-left: 64px;
  background: no-repeat left center;
}
.box_pass .title.student.male span, .box_pass .title.student.male h1, .list_pass .title.student.male span, .list_pass .title.student.male h1 {
  background-image: url(/image/content/voice/parts/list_achievement/child_m.webp);
}
.box_pass .title.student.female span, .box_pass .title.student.female h1, .list_pass .title.student.female span, .list_pass .title.student.female h1 {
  background-image: url(/image/content/voice/parts/list_achievement/child_f.webp);
}
.box_pass .title.teacher.male span, .box_pass .title.teacher.male h1, .list_pass .title.teacher.male span, .list_pass .title.teacher.male h1 {
  background-image: url(/image/content/voice/parts/list_achievement/teacher_m.webp);
}
.box_pass .title.teacher.female span, .box_pass .title.teacher.female h1, .list_pass .title.teacher.female span, .list_pass .title.teacher.female h1 {
  background-image: url(/image/content/voice/parts/list_achievement/teacher_f.webp);
}
.box_pass .name, .list_pass .name {
  padding: 16px;
  padding-left: 64px;
  margin-bottom: 8px;
  background: no-repeat left center;
  font-weight: bold;
}
.box_pass .name.parent, .list_pass .name.parent {
  background-image: url(/image/content/voice/parts/list_achievement/parent.webp);
}
.box_pass .name.teacher.male, .list_pass .name.teacher.male {
  background-image: url(/image/content/voice/parts/list_achievement/teacher_m.webp);
}
.box_pass .name.teacher.female, .list_pass .name.teacher.female {
  background-image: url(/image/content/voice/parts/list_achievement/teacher_f.webp);
}
.box_pass .message, .list_pass .message {
  background: white;
  margin: 0 auto 8px;
  max-width: unset;
  border-radius: 12px;
  padding: 16px 32px;
  text-align: left;
  font-weight: normal;
  line-height: 1.4;
}
@media (max-width: 768px) {
  .box_pass .message, .list_pass .message {
    padding: 16px;
  }
}

.box_pass, .list_pass a {
  border-radius: 6px;
  box-shadow: 1px 1px 4px rgba(51, 51, 51, 0.3);
  position: relative;
  overflow: hidden;
}
.box_pass::before, .list_pass a::before {
  content: "";
  display: block;
  width: 130px;
  height: 130px;
  background: url(/image/content/voice/parts/list_achievement/img01.webp) no-repeat center/contain;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
@media (max-width: 768px) {
  .box_pass::before, .list_pass a::before {
    width: 64px;
    height: 64px;
  }
}

.list_pass {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.list_pass .to {
  display: block;
}
.list_pass .title span:empty {
  display: none;
}
.list_pass > li {
  width: 50%;
  padding: 16px 8px;
}
@media (max-width: 768px) {
  .list_pass > li {
    width: 100%;
  }
}
.list_pass a {
  display: block;
  background: #fff8ec;
  padding-bottom: 16px;
  text-decoration: none;
  color: #362a14;
  height: 100%;
}
.list_pass a:hover {
  background: #ebfab6;
}
.list_pass a:hover .more {
  color: #dd5231;
}
.list_pass .more {
  color: #266280;
  text-decoration: underline;
  transition: all 0.2s ease-in-out;
}

.box_pass {
  max-width: 960px;
  background: white;
}
.box_pass .title {
  background: #fff8ec;
}
.box_pass .title h1 {
  margin-bottom: 0;
}
.box_pass .content {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
}
@media (max-width: 768px) {
  .box_pass .content {
    padding: 0 16px;
  }
}
.box_pass .content dt {
  display: inline-block;
  background: #f0e53B;
  border-radius: 12px;
  font-weight: bold;
  padding: 4px 16px 8px 16px;
  position: relative;
}
.box_pass .content dt::before {
  content: "";
  display: block;
  width: calc(100% - 3px);
  height: calc(100% - 3px);
  position: absolute;
  top: -6px;
  left: -6px;
  border: 3px solid #d8d0c1;
  border-radius: 12px;
}
.box_pass .content dd {
  padding: 16px 32px 64px;
}
@media (max-width: 768px) {
  .box_pass .content dd {
    padding: 16px 8px 32px;
  }
}
.box_pass .content dd p {
  width: auto;
  padding-top: 0;
  max-width: unset;
}
.box_pass .content .check {
  display: inline-block;
  font-size: 1rem;
  font-weight: bold;
  margin-right: 8px;
}
.box_pass .content .check::before {
  content: url(/image/common/list/check.webp);
  margin-right: 4px;
  position: relative;
  top: 2px;
}
.box_pass .content .check + p {
  padding-top: 24px;
}
.box_pass .content .icon01 {
  display: block;
  font-size: 1rem;
  margin-bottom: 8px;
}
.box_pass .content .icon01::before {
  content: url(/image/common/list/icon01.webp);
  margin-right: 8px;
  position: relative;
  top: 2px;
}
.box_pass .enquete li {
  padding-bottom: 32px;
}
.box_pass .enquete p {
  padding: 0;
}
.box_pass .enquete p.q {
  font-weight: bold;
}
.box_pass .enquete p.q::before {
  content: "-- ";
}
.box_pass .enquete p.a {
  padding-left: 32px;
}

.postlist {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: 1120px;
  margin: 16px auto;
}
.postlist li {
  width: 33.3333333333%;
  height: 320px;
  padding: 8px;
}
@media (max-width: 768px) {
  .postlist li {
    width: 100%;
    height: auto;
  }
}
.postlist a {
  display: block;
  height: 100%;
  box-shadow: 0 2px 4px rgba(54, 42, 20, 0.2);
  border: 1px solid rgba(54, 42, 20, 0.1);
  overflow: hidden;
  color: #362a14;
  border-radius: 6px;
  text-decoration: none;
  position: relative;
}
@media (max-width: 768px) {
  .postlist a {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}
.postlist a:hover {
  border-color: #f1a04e;
}
.postlist .img {
  height: 170px;
  background-color: #ffffe9;
}
@media (max-width: 768px) {
  .postlist .img {
    width: 20vw;
    height: 20vw;
  }
}
.postlist .img img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
  width: 100%;
  height: 100%;
}
.postlist .title {
  font-size: 1rem;
  padding: 8px;
  margin: 0;
  width: auto;
}
@media (max-width: 768px) {
  .postlist .title {
    flex: 1;
    padding-bottom: 24px;
  }
}
.postlist .category {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 6px 0;
  padding: 4px 12px;
  color: white;
  font-size: 0.8em;
  background-color: #362a14;
}
@media (max-width: 979px) {
  .postlist .category {
    top: auto;
    left: auto;
    right: 0;
    bottom: 0;
  }
}
.postlist .category.adhd, .postlist .category.goto, .postlist .category.touch {
  background: #f1a04e;
}
.postlist .category.ld, .postlist .category.study, .postlist .category.hint, .postlist .category.freestudy, .postlist .category.submission {
  background: #266280;
}
.postlist .category.as, .postlist .category.care, .postlist .category.method, .postlist .category.winter {
  background: #2ca12c;
}
.postlist .category.yearend, .postlist .category.exam {
  background-color: #dd5231;
}

.price-table {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
}
.price-table dt {
  font-weight: bold;
  font-size: 1.25rem;
}
.price-table dt span {
  display: inline-block;
  font-weight: normal;
  padding-left: 12px;
  font-size: 1rem;
}
.price-table dt::before {
  content: "■";
}
.price-table dd {
  padding-top: 16px;
}
.price-table dd ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .price-table dd ul {
    display: block;
  }
}
.price-table dd li {
  flex: 1;
  border-right: 2px solid #f1a04e;
  padding: 8px 16px;
}
@media (max-width: 768px) {
  .price-table dd li {
    border-right: none;
    border-bottom: 2px solid #f1a04e;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
  }
}
.price-table dd li:last-child {
  border: none;
}
.price-table dd li em {
  display: inline-block;
  background: #ebfab6;
  border: 2px solid #71cc5f;
  padding: 8px 16px;
  border-radius: 6px;
}
.price-table dd li p, .price-table dd li i {
  display: block;
  font-size: 2rem;
  font-weight: bold;
  padding: 0;
  margin-top: 8px;
  text-align: center;
}
@media (max-width: 768px) {
  .price-table dd li p, .price-table dd li i {
    flex: 1;
    margin: 0;
  }
}
.price-table dd li small {
  font-size: 1.25rem;
}
.price-table dd p.small {
  padding-top: 8px;
}

.plan dl {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin: 0 auto;
}
.plan dl > div {
  border: 3px solid #266280;
  border-radius: 0 0 12px 12px;
  margin-top: 16px;
  background-color: #ffffe9;
  background-repeat: no-repeat;
  padding: 8px 16px;
}
.plan dl dt {
  font-size: 1.2em;
  font-weight: bold;
  color: #dd5231;
  padding: 8px 16px;
  background: url(/image/common/line/dash.webp) repeat-x center bottom;
}
.plan dl dt small {
  color: #362a14;
  font-size: 0.875rem;
}
.plan dl dd {
  padding: 8px 16px;
}
@media (max-width: 768px) {
  .plan dl dd {
    padding: 8px 0;
  }
}
.plan dl dd p {
  margin: 16px 0 0;
  width: auto;
  max-width: unset;
}
.plan dl dd p i {
  font-size: 1.5rem;
  font-weight: bold;
  color: #dd5231;
  display: inline-block;
  padding: 0 4px;
}
.plan dl dd p i::before {
  content: "\f0a9";
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
  font-size: 1.125rem;
}

.areaselect {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin-bottom: 32px;
}
.areaselect .btns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.areaselect button:not([title=Close]) {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  flex: 1;
  background: #fff8ec;
  box-shadow: 0px 2px 2px rgba(51, 51, 51, 0.3);
  border-radius: 6px;
  font-size: 1rem;
  padding: 10px 4px;
  margin: 4px 2px;
  font-weight: bold;
  color: white;
}
.areaselect button:not([title=Close])[value=kanto] {
  background: #dd5231;
}
.areaselect button:not([title=Close])[value=north] {
  background: #f1a04e;
}
.areaselect button:not([title=Close])[value=tohoku] {
  background: #2ca12c;
}
.areaselect button:not([title=Close])[value=koshinetsu] {
  background: #266280;
}
.areaselect button:not([title=Close])[value=shikoku] {
  background: #362a14;
}
.areaselect button:not([title=Close])[value=kyushu] {
  background: #f0e53B;
  color: #362a14;
}
@media (max-width: 768px) {
  .areaselect button:not([title=Close]) {
    width: calc(50% - 4px);
    flex: none;
  }
}
.areaselect ul {
  width: 100%;
  position: relative;
}
@media (max-width: 768px) {
  .areaselect ul {
    display: none;
  }
}
.areaselect li {
  position: absolute;
  bottom: calc(100% + 12px);
  background: #c3eef7;
  padding: 16px 32px;
  font-size: 1rem;
  border-radius: 6px;
  display: none;
}
.areaselect li::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-top-color: #c3eef7;
  position: absolute;
  top: 100%;
}
.areaselect li.kanto {
  left: 0;
  background: #fcf4f4;
}
.areaselect li.kanto::after {
  left: 32px;
  border-top-color: #fcf4f4;
}
.areaselect li.north {
  left: 25%;
  background: #f6deb9;
}
.areaselect li.north::after {
  left: 32px;
  border-top-color: #f6deb9;
}
.areaselect li.tohoku {
  right: 20%;
  background: #d2ebb2;
}
.areaselect li.tohoku::after {
  right: 40%;
  border-top-color: #d2ebb2;
}
.areaselect li.koshinetsu {
  right: 25%;
  background: #e7f5f5;
}
.areaselect li.koshinetsu::after {
  right: 32%;
  border-top-color: #e7f5f5;
}
.areaselect li.shikoku {
  right: 0;
  background: #fff8ec;
}
.areaselect li.shikoku::after {
  right: 32%;
  border-top-color: #fff8ec;
}
.areaselect li.kyushu {
  right: 0;
  background: #ffffe9;
}
.areaselect li.kyushu::after {
  right: 32px;
  border-top-color: #ffffe9;
}
.areaselect li span {
  display: inline-block;
}
.areaselect li span::after {
  content: "・";
}
.areaselect li span:last-child::after {
  content: none;
}
.areaselect#areaselect {
  width: auto;
  display: block;
  padding-bottom: 128px;
  margin-top: 0;
  display: none;
}
@media (max-width: 768px) {
  .areaselect#areaselect {
    padding-bottom: 32px;
  }
}
.areaselect#areaselect .btns {
  display: block;
}
.areaselect#areaselect button:not([title=Close]) {
  display: block;
  width: 16em;
}
.areaselect#areaselect ul {
  margin-top: 16px;
}
.areaselect#areaselect li {
  padding: 16px;
  bottom: auto;
  width: 100%;
  top: 100%;
}
.areaselect#areaselect li::after {
  content: none;
}
.areaselect#areaselect li.kanto, .areaselect#areaselect li.north, .areaselect#areaselect li.tohoku, .areaselect#areaselect li.koshinetsu, .areaselect#areaselect li.shikoku, .areaselect#areaselect li.kyushu {
  left: 0;
  right: auto;
}

#price .areatitle {
  margin-bottom: -16px;
  border-top: 3px solid #71cc5f;
  border-bottom: 3px solid #71cc5f;
  background: #ebfab6;
  padding: 16px 32px;
}
#price .areatitle dt {
  font-weight: bold;
  font-size: 1.25rem;
}
#price .areatitle dd {
  font-size: 0.9375rem;
}
#price .areatitle.kanto {
  background: #fcf4f4;
  border-color: #dd5231;
}
#price .areatitle.north {
  background: #fff8ec;
  border-color: #f1a04e;
}
#price .areatitle.tohoku {
  background: #ebfab6;
  border-color: #2ca12c;
}
#price .areatitle.koshinetsu {
  background: #c3eef7;
  border-color: #266280;
}
#price .areatitle.shikoku {
  background: #fff8ec;
  border-color: #362a14;
}
#price .areatitle.kyushu {
  background: #fffbb4;
  border-color: #362a14;
}
#price .selecttype {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin: 0 auto 64px;
}
#price .selecttype .gradientbtn a {
  max-width: none;
  width: 100%;
  text-align: left;
}
#price .tabarea {
  display: none;
  margin-top: 16px;
}
#price .tabarea.show {
  display: block;
  animation: show 0.6s ease-in-out 0s;
}
#price .board {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  padding: 8px 0 32px;
  text-align: center;
  background: url(/image/content/page/price/bg01_foot.webp) no-repeat center bottom/100%, url(/image/content/page/price/bg01.webp) repeat-y center top/100%;
}
#price .board ul {
  padding: 0 64px;
  text-align: left;
}
#price .board li {
  font-weight: bold;
  font-size: 1.1em;
  padding: 0.4em 0 0.4em 1em;
  text-indent: -1em;
}
#price .board li:before {
  content: "\ea1e";
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
  color: #2ca12c;
}
#price .board p {
  margin: 16px 32px 0;
  text-align: left;
}
#price .board span {
  border-bottom: 3px solid #f0e53B;
}
#price .board small {
  font-weight: normal;
}
@media (max-width: 768px) {
  #price .board {
    background: none;
    padding: 16px 16px 32px;
    border: 2px dashed #d2ebb2;
    border-radius: 6px;
  }
  #price .board ul {
    padding: 0;
  }
  #price .board p {
    padding: 0.8em 0;
  }
}
#price .gradebox {
  display: none;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  margin: 0;
  padding: 32px 0;
}
#price .gradebox.show {
  display: block;
}
#price .gradebox#grade_el {
  border-color: #ffe1de;
}
#price .gradebox#grade_jr {
  border-color: #f6deb9;
}
#price .gradebox#grade_hi {
  border-color: #c3eef7;
}
#price .gradebox.neo {
  padding: 16px 0;
  border-bottom: none;
}
#price .gradebox.neo section:first-child {
  margin-top: 0;
}
#price .grade_select {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  align-items: flex-end;
  margin: 64px auto 0;
}
#price .grade_select li {
  width: 33.3333333333%;
  text-align: center;
  padding: 24px 8px 8px;
  font-size: 1.25rem;
  font-weight: bold;
  border: 3px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
#price .grade_select li[data-grade=el] {
  border-color: #ffb0a9;
  background: #fcf4f4;
}
#price .grade_select li[data-grade=jr] {
  border-color: #edb967;
  background: #fff8ec;
}
#price .grade_select li[data-grade=hi] {
  border-color: #5697B8;
  background: #e7f5f5;
}
#price .grade_select li.active {
  padding-bottom: 24px;
}
#price .grade_select li:not(.active):hover {
  padding-bottom: 16px;
}
#price .method {
  border-top: 4px solid #2ca12c;
  margin-top: 64px;
  padding-bottom: 64px;
}
#price .method .title {
  text-align: center;
  line-height: 1;
}
#price .method .title span {
  display: inline-block;
  background: #2ca12c;
  color: white;
  font-weight: bold;
  border-radius: 3em;
  padding: 12px 32px 8px;
  font-size: 1.5rem;
  transform: translateY(-50%);
}
#price .method h3 {
  border-bottom: 3px solid #2ca12c;
  text-align: left;
  padding: 0 16px 16px;
  line-height: 1.4;
}
#price .method .bg-yellow {
  margin-top: 0;
}

.area_teacher {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  padding: 16px;
}
@media (max-width: 768px) {
  .area_teacher {
    padding: 16px 8px;
  }
}
.area_teacher.male {
  background: url(/image/content/area/teacher/box/m_head.webp) no-repeat center top/contain, url(/image/content/area/teacher/box/m_foot.webp) no-repeat center bottom/contain, url(/image/content/area/teacher/box/m_bg.webp) repeat-y center/contain;
}
.area_teacher.male th, .area_teacher.male td {
  border-bottom: 1px solid #5697B8;
  border-right: 1px solid #5697B8;
}
.area_teacher.male th {
  background: #e7f5f5;
}
.area_teacher.female {
  background: url(/image/content/area/teacher/box/f_head.webp) no-repeat center top/contain, url(/image/content/area/teacher/box/f_foot.webp) no-repeat center bottom/contain, url(/image/content/area/teacher/box/f_bg.webp) repeat-y center/contain;
}
.area_teacher.female th, .area_teacher.female td {
  border-bottom: 1px solid #ffb0a9;
  border-right: 1px solid #ffb0a9;
}
.area_teacher.female th {
  background: #fcf4f4;
}
.area_teacher dl {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
@media (max-width: 768px) {
  .area_teacher dl {
    flex-direction: column;
  }
}
.area_teacher dt {
  width: 200px;
  text-align: center;
}
@media (max-width: 768px) {
  .area_teacher dt {
    width: 100%;
  }
}
.area_teacher dd {
  flex: 1;
  padding: 0 8px;
}
.area_teacher dd table {
  width: 100%;
  font-size: 0.9em;
  border-collapse: separate;
  border-spacing: 2px;
}
.area_teacher dd table small {
  display: inline-block;
  padding-left: 0.4em;
}
.area_teacher dd th, .area_teacher dd td {
  text-align: left;
  padding: 0.4em;
}
@media (max-width: 768px) {
  .area_teacher dd th, .area_teacher dd td {
    display: block;
  }
}
.area_teacher dd th {
  width: 7em;
  font-size: 0.9em;
}
@media (max-width: 768px) {
  .area_teacher dd th {
    width: 100%;
  }
}
.area_teacher dd td {
  background: white;
}
.area_teacher .message {
  background: url(/image/content/area/teacher/box/message_head.webp) no-repeat center top/contain, url(/image/content/area/teacher/box/message_foot.webp) no-repeat center bottom/contain, url(/image/content/area/teacher/box/message_bg.webp) repeat-y center/contain;
  margin: 16px auto 0;
  padding: 8px 16px;
}
@media (max-width: 768px) {
  .area_teacher .message {
    padding: 0;
  }
}
.area_teacher .message p {
  padding: 0.8em;
  margin: 0;
}
.area_teacher .teacher_btn {
  text-align: center;
  padding: 16px 0;
}

.records {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  background: url(/image/content/area/category/records/bg02_head.webp) no-repeat center top/contain, url(/image/content/area/category/records/bg02_foot.webp) no-repeat center bottom/contain, url(/image/content/area/category/records/bg02.webp) repeat-y center top/100%;
  padding: 0 32px 32px;
  position: relative;
  text-align: center;
}
.records:before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  content: url(/image/content/area/category/records/icon02.webp);
}
@media (max-width: 768px) {
  .records:before {
    content: none;
  }
}
.records dt {
  display: inline-block;
  min-height: 40px;
  position: relative;
  font-weight: bold;
  color: white;
  padding: 0.2em 1em 0;
  background: url(/image/content/area/category/records/title02.webp) repeat-x;
}
@media (max-width: 768px) {
  .records dt {
    padding: 0.2em 0.2em 0;
  }
}
.records dt:before, .records dt:after {
  content: "";
  display: block;
  width: 46px;
  height: 50px;
  position: absolute;
  top: 0;
}
.records dt:before {
  background: url(/image/content/area/category/records/title02before.webp) no-repeat;
  right: calc(100% - 15px);
}
.records dt:after {
  background: url(/image/content/area/category/records/title02after.webp) no-repeat;
  left: calc(100% - 15px);
}
.records p {
  margin: 16px;
}
.records dd {
  text-align: left;
}
.records .lead {
  text-align: center;
  padding-top: 1em;
  padding-bottom: 16px;
  font-weight: bold;
  font-size: 1.1em;
  background: url(/image/content/area/category/records/line.webp) repeat-x bottom;
}
.records .lead span {
  display: block;
  font-weight: normal;
  font-size: 0.72em;
}
.records .lead span em {
  font-weight: bold;
  color: red;
  font-size: 1.75rem;
  padding-right: 8px;
}
.records .lead span em i {
  font-size: 0.8em;
}

.campaign_grade {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  max-width: 720px;
  padding: 16px 8px 8px;
  border-radius: 6px;
  border: 2px solid #ffb0a9;
  background: url(/image/content/campaign/toppage/grade/bg01.webp) no-repeat right center/26%, url(/image/content/campaign/toppage/grade/bg02.webp) no-repeat center top #fcf4f4;
}
@media (max-width: 768px) {
  .campaign_grade {
    background: url(/image/content/campaign/toppage/grade/sp/bg01.webp) no-repeat right bottom/46%, url(/image/content/campaign/toppage/grade/sp/bg02.webp) no-repeat center top #fcf4f4;
  }
}
.campaign_grade .img img {
  max-width: 74%;
}
@media (max-width: 768px) {
  .campaign_grade .img img {
    max-width: 100%;
  }
}
.campaign_grade ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 16px;
}
@media (max-width: 768px) {
  .campaign_grade ul {
    display: block;
  }
}
.campaign_grade li {
  padding: 8px 4px;
  flex: 1;
}
@media (max-width: 768px) {
  .campaign_grade li {
    width: 54%;
  }
}
.campaign_grade li.grade01 a {
  background: #fffbb4;
}
.campaign_grade li.grade02 a {
  background: #d2ebb2;
}
.campaign_grade li.grade03 a {
  background: #ffb0a9;
}
.campaign_grade a {
  display: block;
  background: white;
  text-decoration: none;
  padding: 16px;
  color: #362a14;
  font-weight: bold;
  position: relative;
  border-radius: 6px;
}
.campaign_grade a::after {
  content: "\f138";
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 0px;
  font-weight: 900;
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}

.points dl {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
}
.points dl dt {
  border-bottom: 3px dotted #362a14;
  margin: 64px auto 16px;
}

.pagetitle {
  background: #d2ebb2;
  font-weight: bold;
  text-align: center;
  padding: 16px;
}

.mainvisual {
  margin: 0 auto;
  position: relative;
  text-align: center;
  background: url(/image/content/course/newpage/common/bg02.webp);
}
.mainvisual .catchbox {
  text-align: left;
  background: url(/image/content/course/newpage/common/bg01.svg) no-repeat center 64px/100%;
  padding-bottom: 96px;
  transform: translateY(-120px);
  margin-bottom: -120px;
}
@media (max-width: 768px) {
  .mainvisual .catchbox {
    transform: translateY(-80px);
    margin-bottom: -80px;
  }
}
.mainvisual .catchbox > div {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin: 0 auto;
  max-width: 780px;
  background: url(/image/content/course/newpage/common/catchbox/bg.webp) no-repeat center top/100%;
  position: relative;
}
.mainvisual .catchbox > div::after {
  content: "";
  display: block;
  width: 100%;
  height: 28px;
  background: url(/image/content/course/newpage/common/catchbox/bg_foot.webp) no-repeat center top/100%;
  position: absolute;
  top: 100%;
  left: 0;
}
.mainvisual .catchbox > div::before {
  content: url(/image/content/course/newpage/common/catchbox/img01.webp);
  position: absolute;
  bottom: 0;
  left: 100%;
  transform: translate(-24px, 24px);
}
@media (max-width: 768px) {
  .mainvisual .catchbox > div::before {
    bottom: auto;
    left: auto;
    top: 100%;
    right: 0;
    transform: translate(0, -24px);
    z-index: 6;
  }
}
.mainvisual .catchbox p {
  padding: 32px 32px 16px;
}

.title_dotline {
  text-align: center;
  font-weight: bold;
  font-size: 2rem;
  padding-top: 64px;
  margin-bottom: 32px;
  line-height: 1.4;
}
@media (max-width: 768px) {
  .title_dotline {
    font-size: 1.5rem;
  }
}
.title_dotline span {
  display: inline-block;
  padding-bottom: 16px;
  border-bottom: 4px dotted #2ca12c;
}
.title_dotline small {
  display: block;
  font-size: 1.5rem;
  margin-bottom: 8px;
}
.title_dotline small::before, .title_dotline small::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 32px;
  background: #362a14;
}
.title_dotline small::before {
  transform: translateX(-16px) translateY(4px) rotate(-24deg);
}
.title_dotline small::after {
  transform: translateX(16px) translateY(4px) rotate(24deg);
}

.chap01, .chap02, .chap03 {
  padding-bottom: 128px;
}
.chap01 h3, .chap02 h3, .chap03 h3 {
  text-align: left;
}
.chap01 h3 span, .chap02 h3 span, .chap03 h3 span {
  display: inline-block;
}

.chap03 {
  position: relative;
}
.chap03::before, .chap03::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 80px;
}
.chap03::before {
  background: url(/image/content/course/newpage/common/bg-top.svg) no-repeat center top/cover;
  top: 0;
}
.chap03::after {
  background: url(/image/content/course/newpage/common/bg-btm.svg) no-repeat center bottom/cover;
  bottom: 0;
}

.chap01 {
  background: #d2ebb2;
  position: relative;
}
.chap01 ul {
  max-width: 1120px;
  margin: 0 auto;
}
.chap01 li {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  -moz-column-gap: 32px;
       column-gap: 32px;
  padding: 64px 16px;
}
.chap01 li:last-child {
  padding-bottom: 0;
}
@media (max-width: 960px) {
  .chap01 li {
    flex-direction: column-reverse;
    -moz-column-gap: 0;
         column-gap: 0;
    padding-top: 80px;
    padding-bottom: 128px;
    position: relative;
  }
}
.chap01 li:nth-of-type(odd) {
  flex-direction: row-reverse;
}
@media (max-width: 960px) {
  .chap01 li:nth-of-type(odd) {
    flex-direction: column-reverse;
  }
}
.chap01 li .content {
  flex: 1;
}
.chap01 li .img {
  max-width: 60%;
  text-align: center;
}
@media (max-width: 960px) {
  .chap01 li .img {
    width: 100%;
    max-width: unset;
  }
}
.chap01 h3 {
  font-weight: bold;
  font-size: 1.75rem;
  margin: 16px 0 32px;
}
@media (max-width: 960px) {
  .chap01 .title_eng {
    position: absolute;
    top: 0;
    left: 0;
    padding: 16px;
  }
}

.chap02 ul {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  position: relative;
}
.chap02 li {
  border-radius: 32px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  -moz-column-gap: 32px;
       column-gap: 32px;
  border: 1px solid #d8d0c1;
  padding: 16px;
  margin-bottom: 64px;
  background: white;
  box-shadow: 0 4px 2px rgba(54, 42, 20, 0.1);
  position: relative;
}
.chap02 li:nth-of-type(3) {
  margin-bottom: 0;
}
.chap02 li:nth-of-type(3) .img {
  position: relative;
}
.chap02 li:nth-of-type(3) .img .light {
  position: absolute;
  top: 6%;
  right: 6%;
  opacity: 0;
  max-width: 20%;
}
.chap02 li:nth-of-type(3) .img .light.show {
  animation: chap02_li03 0.4s 1 forwards;
}
@media (max-width: 960px) {
  .chap02 li {
    flex-direction: column-reverse;
    -moz-column-gap: 0;
         column-gap: 0;
  }
}
.chap02 h3 {
  color: #dd5231;
  border-bottom: 2px solid #dd5231;
  line-height: 1.4;
  font-weight: bold;
  font-size: 1.5rem;
  margin-bottom: 16px;
  padding-bottom: 16px;
}
.chap02 .img {
  width: 46%;
  text-align: center;
}
@media (max-width: 960px) {
  .chap02 .img {
    width: 100%;
  }
}
.chap02 .content {
  flex: 1;
  padding: 16px;
}
@media (max-width: 960px) {
  .chap02 .content {
    padding: 16px 0;
  }
}
.chap02 .btn a {
  background: #ffb0a9;
  box-shadow: 0 6px 0 #dd5231;
}
.chap02 .btn a:hover {
  box-shadow: 0 0 0 #dd5231;
}

@keyframes chap02_li03 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.btn {
  text-align: center;
}
.btn a {
  display: inline-block;
  background: #71cc5f;
  padding: 16px;
  width: 80%;
  max-width: 340px;
  margin-top: 64px;
  border-radius: 16px;
  color: #362a14;
  text-align: center;
  box-shadow: 0 6px 0 #2ca12c;
  position: relative;
  font-weight: bold;
}
.btn a:hover {
  box-shadow: 0 0 0 #2ca12c;
  transform: translateY(6px);
}
.btn a::after {
  content: "\f0da";
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.chap03 {
  background: url(/image/content/course/newpage/common/bg.webp) #fcf4f4;
}
.chap03 ul {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 12px;
}
@media (max-width: 960px) {
  .chap03 ul {
    flex-direction: column;
    align-items: center;
  }
}
.chap03 li {
  position: relative;
  width: calc(25% - 9px);
  text-align: center;
}
@media (max-width: 960px) {
  .chap03 li {
    width: 100%;
  }
}
.chap03 li:hover .sidea {
  transform: rotateY(180deg);
}
@media (max-width: 960px) {
  .chap03 li:hover .sidea {
    transform: unset;
  }
}
.chap03 li:hover .sideb {
  transform: rotateY(0);
}
@media (max-width: 960px) {
  .chap03 li:hover .sideb {
    transform: unset;
  }
}
.chap03 li.open .sideb {
  animation: flip_open 0.6s ease-out forwards;
}
.chap03 li.close .sideb {
  animation: flip_close 0.6s ease-out forwards;
}
.chap03 .sidea, .chap03 .sideb {
  height: 440px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex-direction: column;
  padding: 8px;
  border-radius: 32px;
  transition: all 0.2s ease-in-out;
  backface-visibility: hidden;
  box-shadow: 0 0 8px rgba(51, 51, 51, 0.3);
}
@media (max-width: 960px) {
  .chap03 .sidea, .chap03 .sideb {
    width: 80%;
    max-width: 480px;
  }
}
.chap03 .sidea {
  background: #ffb0a9;
  position: relative;
  z-index: 2;
}
.chap03 .sidea::after {
  content: none;
}
@media (max-width: 960px) {
  .chap03 .sidea::after {
    content: "";
    display: block;
    width: 54px;
    height: 54px;
    background: url(/image/content/course/newpage/common/tap.svg) center/contain;
    position: absolute;
    bottom: 8px;
    right: 8px;
    animation: tap_move 1.6s linear infinite;
  }
}
.chap03 .sideb {
  background: #fffbb4;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateY(-180deg);
  width: 100%;
}
@media (max-width: 960px) {
  .chap03 .sideb {
    transform: rotate(2deg);
    position: relative;
    z-index: 1;
    width: 80%;
    margin-top: -440px;
  }
}
.chap03 .sideb span {
  display: block;
  width: 100%;
  background: #f0e53B;
  border: 1px solid #f1a04e;
  text-align: center;
  padding: 16px;
  border-radius: 2.6em;
  box-shadow: 0 3px 0 #f1a04e;
}
@keyframes flip_open {
  0% {
    margin-top: -440px;
    transform: rotate(2deg);
  }
  30% {
    margin-top: -260px;
    transform: rotate(-2deg);
  }
  60% {
    margin-top: -140px;
    transform: rotate(3deg);
  }
  85% {
    margin-top: -30px;
    transform: rotate(-4deg);
  }
  100% {
    margin-top: 0;
    transform: rotate(3deg);
  }
}
@keyframes flip_close {
  0% {
    margin-top: 0;
    transform: rotate(3deg);
  }
  30% {
    margin-top: -30px;
    transform: rotate(-4deg);
  }
  60% {
    margin-top: -140px;
    transform: rotate(3deg);
  }
  85% {
    margin-top: -260px;
    transform: rotate(-2deg);
  }
  100% {
    margin-top: -440px;
    transform: rotate(2deg);
  }
}
@keyframes tap_move {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1);
  }
  45% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  55% {
    transform: scale(0.8);
  }
  60% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
.chap03 .img {
  height: 260px;
  background: white;
  border-radius: 24px 24px 0 0;
}
.chap03 .img img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
.chap03 .content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex: 1;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}
.chap03 .content p {
  padding: 16px;
  font-size: 1.25rem;
  line-height: 1.4;
}
.chap03 a {
  color: #362a14;
}

.faqbox {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  max-width: 960px;
}
@media (max-width: 960px) {
  .faqbox {
    width: 100%;
  }
}
.faqbox dt {
  font-weight: bold;
  border-radius: 6px;
  height: 64px;
  line-height: 1.4;
  padding: 0 32px 0 56px;
  margin-top: 16px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  font-size: 1.125rem;
  background: url(/image/content/page/trial/faq/q.webp) no-repeat 16px center/32px #ebfab6;
}
@media (max-width: 960px) {
  .faqbox dt {
    margin-top: 0;
    border-top: 1px dashed #71cc5f;
    border-radius: 0px;
    font-size: 1rem;
    background-position: 8px center;
    padding-left: 48px;
    height: 80px;
  }
  .faqbox dt:first-of-type {
    border-top: none;
  }
}
.faqbox dd {
  background: url(/image/content/page/trial/faq/a.webp) no-repeat 16px 16px/32px;
  padding: 6px 16px 32px 56px;
}
@media (max-width: 960px) {
  .faqbox dd {
    padding: 48px 16px 32px;
    background-position: center 16px;
  }
}
.faqbox dd .answer {
  font-weight: bold;
  line-height: 1.4;
}
.faqbox dd p {
  width: 100%;
  max-width: none;
}
.faqbox dd .img {
  text-align: center;
  margin-top: 32px;
}
.faqbox.toggle-dl dt {
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  position: relative;
}
.faqbox.toggle-dl dt:hover {
  background-color: #71cc5f;
  background-image: url(/image/content/page/trial/faq/q_open.webp);
  color: white;
}
.faqbox.toggle-dl dt::after {
  content: "+";
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
  position: absolute;
  right: 16px;
  top: calc(50% - 0.5em);
  color: #2ca12c;
  font-weight: normal;
}
@media (max-width: 960px) {
  .faqbox.toggle-dl dt::after {
    right: 8px;
  }
}
.faqbox.toggle-dl dt.open {
  background-color: #71cc5f;
  background-image: url(/image/content/page/trial/faq/q_open.webp);
  color: white;
}
.faqbox.toggle-dl dt.open::after {
  content: "\f068";
  color: white;
}
.faqbox.toggle-dl dd {
  display: none;
}
.faqbox .tri {
  width: 100%;
}

.tri {
  text-align: right;
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
}
.tri a {
  display: inline-block;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: bold;
  color: #2ca12c;
  font-weight: bold;
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
  background: #ebfab6;
  padding: 16px 24px;
  padding-right: 40px;
  position: relative;
  margin-bottom: 8px;
}
.tri a::after {
  content: "\f04b";
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  transition: all 0.2s ease-in-out;
}
.tri a:hover {
  background: rgb(245.4615384615, 252.6153846154, 220.1846153846);
}
.tri a:hover::after {
  right: 4px;
}

.big {
  font-size: 1.2em;
  font-weight: bold;
}

.red {
  color: #dd5231;
  font-weight: bold;
}

.answerbox p {
  padding: 16px 0;
}

#fixed_foot {
  background: white;
  border-top: 1px solid #fff8ec;
  line-height: 1.2;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 101;
  padding: 0 8px;
  display: none;
}
@media (max-width: 960px) {
  #fixed_foot {
    display: block;
  }
}
#fixed_foot.trialpage .fixed-page, #fixed_foot.trialpage .fixed-member {
  display: none;
}
#fixed_foot.page .fixed-member, #fixed_foot.page .fixed-trial {
  display: none;
}
#fixed_foot.member .fixed-page, #fixed_foot.member .fixed-trial {
  display: none;
}
#fixed_foot .fixed-trial {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
  height: 72px;
}
#fixed_foot .fixed-trial ul {
  flex: 1;
  width: 100%;
}
#fixed_foot .fixed-trial li.tel a {
  background: #dd5231;
}
#fixed_foot .fixed-page, #fixed_foot .fixed-member {
  height: 48px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex-direction: column;
}
#fixed_foot ul {
  flex: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  -moz-column-gap: 8px;
       column-gap: 8px;
}
#fixed_foot li {
  flex: 1;
  height: 100%;
  padding: 4px 0;
}
#fixed_foot a {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  border-radius: 6px;
  color: white;
  font-size: 0.8125rem;
  text-decoration: none;
}
#fixed_foot a::before {
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
  margin-right: 2px;
}
#fixed_foot a span {
  display: block;
  text-align: left;
}
#fixed_foot .tel a {
  background: #2ca12c;
}
#fixed_foot .tel a::before {
  content: "\f3cd";
  font-size: 1.125rem;
}
#fixed_foot .line a {
  background: #2ca12c;
}
#fixed_foot .line a::before {
  content: "\f3c0";
  font-family: "Font Awesome 5 Brands";
  line-height: 1;
  font-weight: 400;
  padding: 0 4px;
  font-size: 1.25rem;
}
#fixed_foot .form a {
  background: #266280;
}
#fixed_foot .form a::before {
  content: "\f0e0";
  font-size: 1rem;
}
#fixed_foot .totrial a {
  background: #dd5231;
}
#fixed_foot .totrial a::before {
  content: "\f303";
  font-size: 1rem;
}
#fixed_foot .toprice a {
  background: #266280;
}
#fixed_foot .toprice a::before {
  content: "\f02d";
  font-size: 1rem;
}

.telinfo {
  display: none;
}
.telinfo div {
  margin-bottom: 16px;
}
.telinfo a {
  display: block;
  font-size: 1rem;
  border-radius: 12px;
  margin: 0 auto 16px;
  padding: 12px;
  padding-left: 54px;
  position: relative;
  text-decoration: none;
  color: white;
}
.telinfo a::before {
  content: "\f3cd";
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
  font-size: 2.25rem;
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
}
.telinfo a i {
  font-size: 1.875rem;
  position: absolute;
  line-height: 1;
  top: calc(50% - 0.5em);
  left: 8px;
}
.telinfo .trial_inquiry, .telinfo .contact_inquiry {
  background: #2ca12c;
}
.telinfo .trial_member {
  background: #266280;
}
.telinfo.fancybox-content {
  padding: 16px;
  border-radius: 6px;
}

.plane {
  width: 100%;
  height: 80px;
  position: relative;
  z-index: 4;
  overflow-x: clip;
  animation: fly_box 1.6s linear infinite;
}
@media (max-width: 960px) {
  .plane {
    margin-bottom: -80px;
  }
}
.plane img {
  animation: fly_plane 16s linear infinite;
  position: absolute;
  top: 0;
}
@media (max-width: 960px) {
  .plane img {
    top: 32px;
    width: 32%;
    animation-duration: 8s;
  }
}

@keyframes fly_box {
  0% {
    transform: translateY(-100%);
  }
  50% {
    transform: translateY(-120%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes fly_plane {
  0% {
    left: 0;
    transform: translateX(-100%);
  }
  100% {
    left: 100%;
    transform: translateX(0);
  }
}
.trialbtn {
  position: fixed;
  bottom: 16px;
  right: 16px;
  display: none;
}
.trialbtn img {
  width: 160px;
  height: 160px;
}
.trialbtn img:hover {
  animation: totrial_hover 0.1s infinite;
}

@keyframes totrial_hover {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-2px);
  }
}
#line-popup {
  max-width: 460px;
  margin: 0 auto;
  border-radius: 6px;
}
#line-popup.fancybox-content {
  padding: 0;
}
#line-popup .title-box {
  background: #00b900;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  padding: 32px;
}
@media (max-width: 768px) {
  #line-popup .title-box {
    padding: 32px 16px;
  }
}
#line-popup .title-box img {
  border: 3px solid white;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  margin-right: 16px;
}
#line-popup .title-box p {
  flex: 1;
  color: white;
  font-weight: bold;
  font-size: 1.2em;
  line-height: 1.4;
}
#line-popup form {
  padding: 32px;
  text-align: center;
}
@media (max-width: 768px) {
  #line-popup form {
    padding: 32px 16px;
  }
}
#line-popup .small {
  text-align: left;
}
#line-popup .title {
  margin: 0 0 16px;
  font-weight: bold;
}
#line-popup input[type=tel] {
  border-radius: 6px;
  font-size: 1.125rem;
  padding: 0.6em;
  width: 12em;
  border: 1px solid #00b900;
  transition: all 0.2s ease-in-out;
  outline: none;
}
@media (max-width: 768px) {
  #line-popup input[type=tel] {
    width: 8em;
  }
}
#line-popup button {
  outline: none;
  font-size: 1.125rem;
  border-radius: 6px;
  padding: 0.6em 1.2em;
  cursor: pointer;
}
@media (max-width: 768px) {
  #line-popup button {
    padding: 0.6em 0.8em;
  }
}
#line-popup #line-show {
  background: #00b900;
  border: none;
  color: white;
}
#line-popup .line-reset {
  background: white;
  border: 2px solid #00b900;
  color: #00b900;
  margin-top: 32px;
}
#line-popup .line-form {
  text-align: center;
  padding-bottom: 16px;
}
#line-popup .line-code {
  text-align: center;
}
#line-popup .line-btn {
  display: none;
}
#line-popup .line-address {
  padding-bottom: 16px;
}
#line-popup .line-address span {
  font-weight: bold;
}/*# sourceMappingURL=page.css.map */