@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, main,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
  min-height: 0;
  min-width: 0;
  scroll-behavior: auto;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img, svg {
  max-width: 100%;
  vertical-align: top;
  height: auto;
}

html {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

pre {
  white-space: pre-wrap;
}

/* width -------------------
---------------------------*/
/* mixin -------------------
---------------------------*/
/* color -------------------
---------------------------*/
@font-face {
  font-family: "youko";
  src: url("/style/font/youko.eot#iefix") format("embedded-opentype"), url("/style/font/youko.ttf") format("truetype"), url("/style/font/youko.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "asunaro";
  src: url("/image/fonts/asunaro.eot");
  src: url("/image/fonts/asunaro.eot#iefix") format("embedded-opentype"), url("/image/fonts/asunaro.ttf") format("truetype"), url("/image/fonts/asunaro.woff") format("woff"), url("/image/fonts/asunaro.svg") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
[class^=ic-], [class*=" ic-"] {
  font-family: "asunaro" !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;
  color: #5b4b2b;
}

.ic-home:before {
  content: "\e101";
}

.ic-pen:before {
  content: "\e102";
}

.ic-wallet:before {
  content: "\e103";
}

.ic-pin:before {
  content: "\e104";
}

.ic-heart:before {
  content: "\e105";
}

.ic-mail:before {
  content: "\e106";
}

.ic-clover:before {
  content: "\e107";
}

.ic-leaf:before {
  content: "\e108";
}

.ic-comment:before {
  content: "\e109";
}

.ic-gift:before {
  content: "\e110";
}

.ic-graph:before {
  content: "\e111";
}

.ic-plane:before {
  content: "\e112";
}

.ic-star:before {
  content: "\e113";
}

.ic-question:before {
  content: "\e114";
}

.ic-close:before {
  content: "\e115";
}

body {
  font-size: 1.125rem;
  background: white;
  color: #362a14;
  line-height: 1.4;
  font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "Meiryo", "メイリオ", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-style: normal;
  position: relative;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (max-width: 979px) {
  body {
    font-size: 1rem;
  }
  body.telopen #overlay {
    display: block;
    opacity: 1;
  }
}
body.fixed {
  overflow-y: hidden;
}
body.fixed #overlay {
  display: block;
}

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

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

.notop.notop {
  margin-top: 0;
}

a {
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  color: #266280;
}
a img {
  transition: all 0.2s ease-in-out;
}
a:hover {
  color: #dd5231;
}
a:hover img {
  opacity: 0.8;
}

sup, sub {
  font-size: 0.625rem;
}

sup {
  vertical-align: super;
}

sub {
  vertical-align: sub;
}

#overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  z-index: 6;
}

#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;
  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;
}
#line-popup input[type=tel]::-moz-placeholder {
  color: rgb(228.48, 223.04, 212.84);
}
#line-popup input[type=tel]::placeholder {
  color: rgb(228.48, 223.04, 212.84);
}
@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;
}

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

.none {
  display: none;
}

video {
  max-width: 100%;
}

/* 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;
}

i, em {
  font-style: 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 {
  background: linear-gradient(transparent 50%, #fffbb4 50%);
  font-weight: bold;
}

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

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

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

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

.penline {
  font-weight: bold;
  background-repeat: repeat-x;
  background-position: left bottom;
  background-image: url(/image/common/line/pen-red.webp);
}
@media (max-width: 768px) {
  .penline {
    padding-bottom: 6px;
  }
}

.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;
}

.outline-green {
  background: #71cc5f;
}

.outline-gray {
  background: #eeede9;
  color: #362a14;
}

.outline-yellow {
  background: #f0e53B;
  color: #362a14;
}

/* 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, [class^=wa-], [class*=" wa-"] {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  font-weight: bold;
  display: inline-block;
  padding: 0.3em;
}

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

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

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

.wave {
  background: url(/image/common/line/wave-red.webp) repeat-x bottom;
  font-weight: bold;
}

.youko {
  font-family: "youko";
}

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

.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 i {
  display: block;
  font-size: 0.8em;
}

.title-tag {
  background: #f7f3de;
  border-left: 24px solid #d2ebb2;
  text-align: left;
  padding: 16px 8px;
}
@media (max-width: 768px) {
  .title-tag {
    border-left-width: 16px;
  }
}

.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-dotline {
  background: url(/image/common/headline/line.webp) repeat-x left bottom;
  margin: 24px 3% 0;
  display: inline-block;
  text-align: left;
  font-weight: bold;
  font-size: 1.1em;
  padding: 0 4px 8px;
}

.title-line {
  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 {
    font-size: 1.25rem;
  }
}

.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-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;
}

.headron {
  text-align: left;
  color: white;
  font-size: 1.375rem;
  font-weight: bold;
  line-height: 1.4;
  margin: 96px auto 0;
  position: relative;
}
@media (max-width: 768px) {
  .headron {
    font-size: 1.25rem;
  }
}
.headron.on::after {
  animation: headron 0.6s ease-in-out forwards;
}
.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;
}
.headron::after {
  content: url(/image/common/headline/headron/icon.webp);
  position: absolute;
  bottom: 0;
  opacity: 0;
  left: 16px;
  z-index: 1;
  font-size: 0;
}
.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;
  }
}
.bnr {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  text-align: center;
  margin: 16px auto;
}

.iblock {
  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;
  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 -----------
----------------------------- */
.inwidth {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin: 0 auto;
}

.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(236.6, 250.4, 187.84);
}
.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^=dotbox-], [class*=" dotbox-"] {
  border-radius: 6px;
  border: 3px dotted rgb(159.8010471204, 142.0305759162, 107.7589528796);
}

.dotbox-blue {
  background: #e7f5f5;
  border-color: #5697B8;
}

.dotbox-cream {
  background: #ffffe9;
  border-color: #ffb0a9;
}

.dotbox-pink {
  background: #fcf4f4;
  border-color: #ffb0a9;
}

.dotbox-brown {
  background: white;
}

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

.bg-blue {
  background: #e7f5f5;
}

.bg-yellow {
  background: #fffbb4;
}

.bg-white {
  background: white;
}

.bg-pink {
  background: #fcf4f4;
}

.bg-green {
  background: #ebfab6;
}

[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;
}

.maintable {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  border-collapse: separate;
  border-spacing: 4px;
}
.maintable th, .maintable td {
  border-right: 1px solid #fff8ec;
  border-bottom: 1px solid #fff8ec;
  text-align: left;
  padding: 12px;
  empty-cells: hide;
}
.maintable th {
  width: 28%;
  background: rgba(221, 82, 49, 0.1);
}
.maintable .disc, .maintable .decimal {
  margin-left: 0;
}
@media (max-width: 768px) {
  .maintable {
    border-spacing: 8px;
  }
  .maintable th, .maintable td {
    display: block;
    border-left: 1px solid #fff8ec;
  }
  .maintable th {
    width: 100%;
    border-top: 1px solid #fff8ec;
  }
}

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

.arrow_n {
  text-align: center;
  margin-top: 16px;
}
.arrow_n 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(222.36, 88.92, 57.24);
  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(50.5995180723, 130.4934939759, 170.4404819277);
}
.pagination a {
  display: inline-block;
  line-height: 1;
  border: 1px solid rgb(56.8992771084, 146.7402409639, 191.6607228916);
  padding: 0.6em;
  text-decoration: none;
  color: rgb(50.5995180723, 130.4934939759, 170.4404819277);
  font-weight: bold;
}
.pagination a:hover {
  background: rgb(101.153253012, 173.2689156627, 209.326746988);
  border-color: rgb(74.6279518072, 159.1773493976, 201.4520481928);
  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(31.92, 82.32, 107.52));
  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, 113.6818604651, 101.16));
}
.gradientbtn.orange a {
  background: linear-gradient(#f1a04e, rgb(239.1294240838, 147.3068062827, 54.3505759162));
}
.gradientbtn.green a {
  background: linear-gradient(#2ca12c, rgb(40.48, 148.12, 40.48));
}
.gradientbtn.white a {
  background: white;
  border: 2px solid #71cc5f;
  color: #2ca12c;
}

.usp {
  border-radius: 6px 6px 0 0;
  margin: 32px 0;
  padding-bottom: 16px;
  position: relative;
}
@media (max-width: 768px) {
  .usp {
    padding: 0 8px 16px;
  }
}
.usp h1 {
  position: relative;
  top: -24px;
  margin-bottom: -24px;
}
.usp .bnr {
  margin-top: 0;
}

.section-box {
  margin: 64px 0;
}

.maxwidth {
  max-width: 1120px;
  margin: 0 auto;
}

.box-wood {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  max-width: 720px;
  background: url(/image/parts/wood/head.webp) no-repeat center top/contain, url(/image/parts/wood/foot.webp) no-repeat center bottom/contain, url(/image/parts/wood/bg.webp) repeat-y center/contain;
  padding: 32px 48px;
}

.box_balloon {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  border: 2px solid #ffb0a9;
  border-radius: 6px;
  position: relative;
  padding: 32px;
  margin-top: 48px;
}
@media (max-width: 768px) {
  .box_balloon {
    padding: 24px 16px 16px;
  }
}
.box_balloon::before, .box_balloon::after {
  display: block;
  position: absolute;
}
.box_balloon::before {
  content: attr(data-title);
  background: #ffb0a9;
  font-weight: bold;
  font-size: 1.25rem;
  padding: 8px 16px;
  border-radius: 6px;
  top: 0;
  left: 8px;
  transform: translateY(-50%);
}
.box_balloon::after {
  content: "";
  width: 16px;
  height: 20px;
  background: #ffb0a9;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  top: 16px;
  left: 16px;
}
.box_balloon p {
  width: auto;
}
.box_balloon [class^=bg-], .box_balloon [class*=" bg-"] {
  width: auto;
}

.block01, .block03, .block04 {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.block01 li, .block03 li, .block04 li {
  padding: 4px;
}
.block01 li a, .block01 li > span, .block03 li a, .block03 li > span, .block04 li a, .block04 li > span {
  display: block;
  border: 1px solid rgb(173.4, 173.4, 173.4);
  text-decoration: none;
  border-radius: 6px;
  padding: 0.8em;
  font-size: 0.9em;
  background: white;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.block01 li a:hover, .block01 li > span:hover, .block03 li a:hover, .block03 li > span:hover, .block04 li a:hover, .block04 li > span:hover {
  background: rgb(241.5, 231.6, 78.6);
}
.block01 li a small, .block01 li a span, .block01 li > span small, .block01 li > span span, .block03 li a small, .block03 li a span, .block03 li > span small, .block03 li > span span, .block04 li a small, .block04 li a span, .block04 li > span small, .block04 li > span span {
  font-weight: normal;
}

.block01 li {
  width: 100%;
}

.block03 li {
  width: 33.3333333333%;
}

.block04 li {
  width: 25%;
}

.courselink {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  background: rgb(246.6, 198, 148.8);
  border-radius: 6px;
  padding: 16px;
  border: 2px solid rgb(245.48, 190.4, 134.64);
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
}
.courselink dt {
  font-weight: bold;
  border-left: 8px solid #362a14;
  padding-left: 8px;
}
.courselink dd {
  padding: 8px 0 32px;
}
.courselink dd:last-of-type {
  padding-bottom: 0;
}
.courselink ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.courselink li {
  width: 33.3333333333%;
  padding: 4px;
}
@media (max-width: 768px) {
  .courselink li {
    width: 100%;
    text-align: center;
  }
}
.courselink a {
  display: block;
  color: white;
  background: rgb(79.452972973, 61.7967567568, 29.427027027);
  border-radius: 6px;
  text-decoration: none;
  padding: 8px 24px;
  box-shadow: 2px 2px 0px rgb(45.36, 35.28, 16.8);
}
.courselink a:hover {
  transform: translate(2px, 2px);
  box-shadow: 0px 0px 0px rgb(45.36, 35.28, 16.8);
  color: #f0e53B;
}
@media (max-width: 768px) {
  .courselink a {
    padding: 16px 4px;
  }
}

.bboard {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  padding: 8px 8px 64px;
  margin-bottom: 32px;
  background: url(/image/parts/bboard/bg_head.webp) no-repeat center top/contain, url(/image/parts/bboard/bg_foot.webp) no-repeat center bottom/contain, url(/image/parts/bboard/bg.webp) repeat-y center/cover;
}
@media (max-width: 768px) {
  .bboard {
    padding: 8px 8px 32px;
    width: 100%;
  }
}

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

.cta {
  background: #ebfab6;
  text-align: center;
  padding: 16px;
}
.cta ul {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (max-width: 768px) {
  .cta ul {
    flex-direction: column;
    margin-top: 0;
  }
}
.cta ul li {
  width: 48%;
}
@media (max-width: 768px) {
  .cta ul li {
    width: 100%;
    padding: 8px 0;
  }
}
.cta ul li span {
  font-size: 0.9375rem;
  font-weight: bold;
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 16px;
  border-radius: 2em;
  background: white;
  position: relative;
  box-shadow: 0px 2px 2px rgba(54, 42, 20, 0.3);
  line-height: 1.4;
}
.cta ul li span::after {
  content: "";
  display: block;
  border: 6px solid transparent;
  border-top-color: white;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.cta ul li span i {
  color: #dd5231;
}
.cta ul li.trial a {
  background: #dd5231;
}
.cta ul li.trial a:hover {
  background: rgb(223.72, 95.84, 65.48);
}
.cta ul li.contact a {
  background: #5697B8;
}
.cta ul li.contact a:hover {
  background: rgb(99.52, 159.32, 189.68);
}
.cta ul a {
  display: block;
  padding: 16px;
  border: 3px solid white;
  border-radius: 6px;
  color: white;
  box-shadow: 0px 2px 2px rgba(54, 42, 20, 0.3);
  text-decoration: none;
  font-weight: bold;
  position: relative;
}
@media (max-width: 768px) {
  .cta ul a {
    font-weight: bold;
    font-size: 1.125rem;
  }
}
.cta ul a::after {
  content: "\f0da";
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
  position: absolute;
  padding: 0;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}
.cta.center ul {
  justify-content: center;
}
.cta .bnr img {
  width: 64%;
  max-width: 320px;
}

.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: flex-start;
  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 {
  content: "\e900";
  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;
}

.gradeselect {
  margin-bottom: 16px;
}
.gradeselect dt {
  text-align: center;
  color: #2ca12c;
  font-weight: bold;
  font-size: 0.9em;
}
.gradeselect dd {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.gradeselect dd a {
  display: block;
  width: 50%;
  text-align: center;
  text-decoration: none;
  background: #ebfab6;
  color: #74664b;
  font-weight: bold;
  padding: 8px;
  font-size: 1.1em;
  position: relative;
}
@media (max-width: 768px) {
  .gradeselect dd a {
    font-size: 1em;
  }
}
.gradeselect dd a.current {
  background: #71cc5f;
  color: white;
}
.gradeselect dd a.current:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: 100%;
  left: calc(50% - 4px);
  border: 8px solid transparent;
  border-top-color: #71cc5f;
}
.gradeselect dd a:hover {
  opacity: 0.8;
}

.sitenav {
  background: linear-gradient(-45deg, white 25%, rgba(44, 161, 44, 0.16) 25%, rgba(44, 161, 44, 0.16) 50%, white 50%, white 75%, rgba(44, 161, 44, 0.16) 75%, rgba(44, 161, 44, 0.16));
  background-size: 10px 10px;
  text-align: center;
  border-radius: 6px;
  margin: 16px auto;
  padding: 16px;
  line-height: 1.4;
}
.sitenav .title {
  display: inline-block;
  background: white;
  padding: 0.2em 0.8em;
  font-weight: bold;
  margin-bottom: 0.8em;
  border-radius: 6px;
}
.sitenav ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
@media (max-width: 768px) {
  .sitenav ul {
    width: 94%;
    margin: 24px auto;
    max-width: 1120px;
    margin: 0 auto;
    flex-direction: column;
  }
}
.sitenav li {
  width: 32%;
}
@media (max-width: 768px) {
  .sitenav li {
    width: 94%;
    margin: 24px auto;
    max-width: 1120px;
    margin: 8px auto 0;
  }
}
.sitenav li.here a {
  background-color: #f96c7B;
}
.sitenav a {
  display: block;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  background: url(/image/parts/sitenav/bg.webp) rgb(130.24, 178.64, 29.04);
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
  padding: 10px 8px 8px;
  font-weight: bold;
  text-align: center;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  height: 100%;
}
.sitenav a:hover {
  background-color: #f96c7B;
}

.area_school dd {
  font-size: 0.8em;
}
.area_school ul {
  max-width: 90%;
  margin: 20px auto 0;
}
.area_school li {
  font-size: 0.8em;
}
.area_school span {
  display: inline-block;
}
.area_school span:before {
  content: "・";
}

.warranty {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
}
.warranty dt, .warranty .title {
  font-size: 1.1em;
  font-weight: bold;
  margin-top: 1.6em;
  text-align: left;
}
.warranty dt img, .warranty .title img {
  position: relative;
  top: -4px;
}
.warranty dd, .warranty > p {
  padding: 0.8em 1.6em 1.6em;
  margin-bottom: 24px;
  background: url(/image/common/line/dash.webp) repeat-x center bottom;
}

.two_way {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
}
.two_way .title {
  text-align: center;
  font-weight: bold;
  font-size: 1.6em;
  padding-bottom: 0;
}
@media (max-width: 768px) {
  .two_way .title {
    font-size: 1.4em;
  }
}
.two_way ol {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (max-width: 768px) {
  .two_way ol {
    flex-direction: column;
    align-items: center;
  }
}
.two_way li {
  width: 49%;
  font-weight: bold;
  border-radius: 6px;
  font-size: 1.1em;
  padding: 8px;
}
.two_way li:nth-of-type(1) {
  background: rgba(221, 82, 49, 0.1);
  border: 2px solid #dd5231;
}
.two_way li:nth-of-type(2) {
  background: rgba(38, 98, 128, 0.1);
  border: 2px solid #266280;
}
@media (max-width: 768px) {
  .two_way li {
    width: 70%;
    margin-bottom: 8px;
  }
}
.two_way li:before {
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
  font-weight: normal;
  font-size: 1.3em;
  position: relative;
  top: 3px;
  padding-right: 0.1em;
}
.two_way li:nth-of-type(1):before {
  content: "묁";
}
.two_way li:nth-of-type(2):before {
  content: "묂";
}

.youtube {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  margin-bottom: 40px;
}
.youtube iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.page_index {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  border-top: 2px dashed #fff8ec;
  border-bottom: 2px dashed #fff8ec;
  padding: 8px 16px;
  background: #ffffe9;
}
.page_index.btn03 li {
  min-width: 33.3333333333%;
}
.page_index li {
  flex: 1;
  padding: 2px;
}
@media (max-width: 768px) {
  .page_index li {
    width: 100%;
    flex: auto;
  }
}
.page_index a {
  display: block;
  padding: 8px;
  padding-right: 16px;
  text-decoration: none;
  background: #fff8ec;
  color: #362a14;
  font-weight: bold;
  font-size: 0.84em;
  height: 100%;
  border-radius: 6px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  box-shadow: 1px 1px 0px rgba(116, 102, 75, 0.6);
  position: relative;
}
@media (max-width: 768px) {
  .page_index a {
    border-radius: 0px;
    padding: 12px;
  }
}
.page_index a:hover {
  background: rgb(255, 233.5284210526, 196.72);
}
.page_index a::after {
  content: "\f107";
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
  position: absolute;
  right: 8px;
  top: calc(50% - 0.5em);
}

.headnews {
  padding: 0 8px;
}
.headnews a {
  border: 2px solid #dd5231;
  padding: 16px 8px;
  color: #362a14;
  display: block;
  background: #fffbb4;
  border-radius: 6px;
  font-weight: bold;
  line-height: 1.4;
}
@media (max-width: 768px) {
  .headnews a {
    padding: 16px 8px;
  }
}
.headnews a:hover {
  background: #f0e53B;
}
.headnews a::before {
  content: "【重要】";
  color: #dd5231;
}
.headnews a::after {
  content: " \f105\f105";
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
}

.index_voice {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
@media (max-width: 768px) {
  .index_voice {
    display: block;
  }
}
.index_voice li {
  width: calc(50% - 8px);
  border-radius: 6px;
  border: 1px solid #fff8ec;
  margin: 8px 4px;
  box-shadow: 0px 0px 2px rgba(54, 42, 20, 0.3);
  text-align: center;
}
@media (max-width: 768px) {
  .index_voice li {
    width: 100%;
  }
}

.sep_grade {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin-bottom: 64px;
}
.sep_grade p {
  padding: 0;
}
.sep_grade dl {
  background: #ebfab6;
  margin: 24px auto;
  padding: 24px 32px 8px;
  border-radius: 6px;
}
.sep_grade dl.point {
  background: url(/image/content/training/online/bg01.webp) no-repeat left top #ebfab6;
  padding-top: 48px;
}
.sep_grade dt {
  font-weight: bold;
  background: url(/image/common/line/dash.webp) repeat-x left bottom;
  padding-bottom: 4px;
  font-size: 1.375rem;
}
.sep_grade dt span {
  display: inline-block;
  padding: 0 8px;
  background: #71cc5f;
  color: white;
  font-size: 1rem;
  border-radius: 6px;
  margin-bottom: 8px;
}
.sep_grade dd {
  padding: 16px 0;
}
.sep_grade dd p {
  width: auto;
}

.recommend {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin-bottom: 24px;
}
.recommend .recommend_board {
  background: url(/image/content/training/online/bg02.webp) no-repeat right bottom/contain #fffbb4;
  padding: 32px;
}
.recommend .recommend_next {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  text-align: center;
  align-items: center;
  margin: 24px auto;
}
.recommend .recommend_next span {
  display: inline-block;
  padding: 8px;
  font-weight: bold;
}

.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(104.9059459459, 81.5935135135, 38.8540540541);
  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(196.0810810811, 160.7297297297, 95.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(50.5995180723, 130.4934939759, 170.4404819277);
}
.box_evidence.boy dt {
  background: rgb(138.2886746988, 192.9971084337, 220.3513253012);
}
.box_evidence.boy .voiceimg img {
  border: 2px solid rgb(138.2886746988, 192.9971084337, 220.3513253012);
}
.box_evidence.girl {
  border-color: rgb(226.44, 109.68, 81.96);
}
.box_evidence.girl dt {
  background: rgb(229.16, 123.52, 98.44);
}
.box_evidence.girl .voiceimg img {
  border: 2px solid rgb(229.16, 123.52, 98.44);
}

.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;
  }
}

.mobilenav {
  position: fixed;
  right: 0;
  top: 0;
  background: #d2ebb2;
  width: 100%;
  max-width: 480px;
  height: 100vh;
  z-index: 102;
  transform: translateX(100%);
  transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  line-height: 1;
  overflow: scroll;
  padding-bottom: 80px;
}
@media (max-width: 768px) {
  .mobilenav {
    max-width: unset;
  }
}
.mobilenav a {
  text-decoration: none;
  display: block;
}
.mobilenav.open {
  transform: translateX(0);
}
.mobilenav .title {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  background: white;
  border-bottom: 1px solid #2ca12c;
  position: sticky;
  top: 0;
  z-index: 2;
}
.mobilenav .title a {
  padding: 4px;
  width: 64%;
}
.mobilenav .title .closebtn {
  font-size: 1.625rem;
  background: #2ca12c;
  color: white;
  line-height: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 100%;
}
.mobilenav .title .closebtn i {
  color: white;
}
.mobilenav .about {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 24px 0;
}
.mobilenav .about li {
  flex: 1;
}
.mobilenav .about li:nth-of-type(odd) {
  border-right: 1px solid #d8d0c1;
}
.mobilenav p.closebtn {
  width: 46%;
  margin: 24px auto;
  max-width: 1120px;
  text-align: center;
  background: white;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  font-size: 0.875rem;
  padding: 16px;
  transition: all 0.2s ease-in-out;
}
.mobilenav p.closebtn:hover {
  background: #ffffe9;
}
.mobilenav p.closebtn i {
  color: #dd5231;
  margin-right: 8px;
}
.mobilenav .box01 {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  border-radius: 12px;
  border: 2px dashed #71cc5f;
  font-size: 1.125rem;
  background: white;
  padding: 16px 0;
}
.mobilenav .box01 a {
  display: block;
  text-align: center;
  font-size: 1rem;
}
.mobilenav .box01 .center {
  font-weight: bold;
  padding: 0;
}
.mobilenav .box01 .btns {
  padding-top: 8px;
}
.mobilenav .box01 .btns dl {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin: 0 auto;
}
.mobilenav .box01 .btns dt {
  text-align: center;
  font-size: 0.9em;
  margin-bottom: 8px;
  font-weight: bold;
}
.mobilenav .box01 .btns dd {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  -moz-column-gap: 16px;
       column-gap: 16px;
}
.mobilenav .box01 .btns dd a {
  color: white;
  border-radius: 6px;
  width: calc(50% - 8px);
  padding: 8px;
}
.mobilenav .box01 .btns dd a:before {
  font-weight: normal;
  padding-right: 8px;
  display: block;
  margin-bottom: 4px;
}
.mobilenav .box01 .btns dd a.line {
  background: #2ca12c;
}
.mobilenav .box01 .btns dd a.line:before {
  font-family: "Font Awesome 5 Brands";
  line-height: 1;
  font-weight: 400;
  padding: 0 4px;
  content: "\f3c0";
  font-size: 1.875rem;
}
.mobilenav .box01 .btns dd a.form {
  background: #5697B8;
}
.mobilenav .box01 .btns dd a.form:before {
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
  content: "\f0e0";
  font-size: 1.75rem;
}

.snav dt {
  background: #fffbb4;
  padding: 16px;
  border-bottom: 1px solid #d8d0c1;
  font-size: 1rem;
}
.snav ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.snav ul li {
  width: 50%;
}
.snav ul li:nth-of-type(odd) {
  border-right: 1px solid #d8d0c1;
}
.snav ul a {
  background: #ffffe9;
}
.snav li {
  border-bottom: 1px solid #d8d0c1;
}
.snav a {
  display: block;
  padding: 16px;
  color: #362a14;
  position: relative;
  background: #fffbb4;
  font-size: 1rem;
}
.snav a::after {
  content: "\f054";
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 0.4px;
  font-weight: 900;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}
.snav i {
  margin-right: 8px;
}

.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;
  border-radius: 6px;
  padding: 16px 8px;
  line-height: 1.4;
}
.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;
}

#teacher_energy .push {
  font-weight: bold;
}
#teacher_energy .push:before {
  content: url(/image/common/list/up.webp);
  position: relative;
  top: 8px;
  margin-right: 0.3em;
}
@media (max-width: 768px) {
  #teacher_energy .push:before {
    content: none;
  }
}
#teacher_energy .teacherbox {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px;
}
@media (max-width: 816px) {
  #teacher_energy .teacherbox {
    padding: 16px 0;
  }
}
#teacher_energy .teacherbox.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;
}
#teacher_energy .teacherbox.male .headline {
  color: rgb(44.2997590361, 114.246746988, 149.2202409639);
}
#teacher_energy .teacherbox.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;
}
#teacher_energy .teacherbox.female .headline {
  color: rgb(213.21, 69.345, 35.19);
}
#teacher_energy .teacherbox .headline {
  font-weight: bold;
  font-size: 1.1em;
}
@media (max-width: 768px) {
  #teacher_energy .teacherbox .headline {
    padding: 8px 8px 0;
  }
}
#teacher_energy .teacherbox .headline:before {
  content: url(/image/common/list/hana.webp);
  margin-right: 0.3em;
  position: relative;
  top: 8px;
}
@media (max-width: 768px) {
  #teacher_energy .teacherbox .headline:before {
    content: none;
  }
}
#teacher_energy .teacherbox .content p {
  padding: 0.6em 0;
}
#teacher_energy .teacherbox ul {
  padding: 16px;
}
#teacher_energy .teacherbox li {
  background: url(/image/common/line/dash.webp) repeat-x bottom;
  font-size: 1rem;
  padding: 8px;
}
#teacher_energy .teacherbox li span {
  background: #f1a04e;
  color: white;
  display: inline-block;
  border-radius: 6px;
  font-weight: bold;
  font-size: 0.875rem;
  padding: 0 0.6em;
  margin-right: 0.6em;
  width: 6em;
  text-align: center;
}

.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;
}

.twobtns {
  width: 84%;
  margin: 24px auto;
  max-width: 1120px;
  margin-top: 32px;
  text-align: center;
}
.twobtns a {
  display: block;
  position: relative;
  border-radius: 12px;
  border: 3px dotted #dd5231;
  margin-top: 16px;
}
.twobtns a.totrial, .twobtns a.btn {
  padding: 8px;
}
.twobtns a.totrial:hover span, .twobtns a.btn:hover span {
  background: rgba(221, 82, 49, 0.9);
}
.twobtns a.totrial:hover span::before, .twobtns a.btn:hover span::before {
  animation: asunaron 0.2s ease-out;
}
.twobtns a.totrial span, .twobtns a.btn span {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease-in-out;
  background: #dd5231;
  border-radius: 8px;
  padding-left: 80px;
  position: relative;
  height: 84px;
}
@media (max-width: 768px) {
  .twobtns a.totrial span, .twobtns a.btn span {
    padding-left: 0;
    height: auto;
  }
}
.twobtns a.totrial span::before, .twobtns a.btn span::before {
  content: url(/image/btn/icon03.svg);
  line-height: 0;
  width: 76px;
  height: 106px;
  position: absolute;
  bottom: 0;
  left: 6px;
}
@media (max-width: 768px) {
  .twobtns a.totrial span::before, .twobtns a.btn span::before {
    content: none;
  }
}
.twobtns a.toform {
  height: 82px;
  background: white;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
@media (max-width: 768px) {
  .twobtns a.toform {
    height: auto;
  }
}

.addtxt {
  font-weight: bold;
  position: relative;
  display: inline-block;
  margin-bottom: 8px;
}
.addtxt::before, .addtxt::after {
  content: "";
  display: block;
  width: 50%;
  height: 8px;
  position: absolute;
  top: 100%;
  border: 1px solid transparent;
  border-top-color: #beb7aa;
}
.addtxt::before {
  left: -1px;
  transform: skew(40deg);
  transform-origin: right bottom;
  border-right-color: #362a14;
}
.addtxt::after {
  right: -1px;
  transform: skew(-40deg);
  transform-origin: left bottom;
  border-left-color: #362a14;
}

@keyframes asunaron {
  0% {
    transform: translate(0);
  }
  25% {
    transform: translate(4px);
  }
  50% {
    transform: translate(-3px);
  }
  75% {
    transform: translate(2px);
  }
  100% {
    transform: translate(0);
  }
}
.line_block {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin-top: 32px;
  text-align: center;
}
.line_block ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-bottom: 16px;
}
.line_block ul li {
  flex: 1;
  padding: 4px;
}
@media (max-width: 768px) {
  .line_block ul {
    display: block;
  }
  .line_block ul li {
    width: 80%;
    margin: 24px auto;
    max-width: 1120px;
    margin: 0 auto;
  }
}

.faqbox {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  max-width: 960px;
}
@media (max-width: 768px) {
  .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: 768px) {
  .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: 768px) {
  .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: 768px) {
  .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%;
}/*# sourceMappingURL=page.css.map */