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

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

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

pre {
  white-space: pre-wrap;
}

/* width -------------------
---------------------------*/
/* mixin -------------------
---------------------------*/
@font-face {
  font-family: "youko";
  src: url("/font/youko.eot#iefix") format("embedded-opentype"), url("/font/youko.ttf") format("truetype"), url("/font/youko.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* color -------------------
---------------------------*/
footer {
  margin-top: 64px;
  padding-top: 32px;
  background: url(/image/layout/footer/bg.webp) repeat-x center top;
}
@media (max-width: 979px) {
  footer {
    background: none;
  }
}
footer nav {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  -moz-column-gap: 16px;
       column-gap: 16px;
}
@media (max-width: 979px) {
  footer nav {
    display: block;
  }
}
footer nav dt {
  padding-bottom: 4px;
  font-weight: bold;
}
footer nav dt::before {
  content: "\f0a9";
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
  color: #2ca12c;
  font-size: 0.9rem;
}
footer nav dd {
  padding: 0 0 16px 16px;
}
footer nav dd.area {
  display: block;
}
footer nav dd.area dt {
  border-bottom: 1px dotted rgba(54, 42, 20, 0.4);
  padding: 0.6em 0.6em 0;
  font-size: 0.9em;
  margin-bottom: 0.6em;
}
footer nav dd.area dt::before {
  content: none;
}
footer nav dd.area dd {
  padding-bottom: 8px;
  display: block;
}
footer nav dd.area ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
footer nav dd.area li {
  width: 50%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: auto;
  border-radius: unset;
}
footer nav dd.area li a {
  width: 100%;
}
footer nav a {
  color: #362a14;
  font-size: 0.9rem;
  padding: 4px 0;
  display: block;
}
footer nav a::before {
  content: "\f0da";
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
}
footer .group {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  max-width: 1120px;
}
footer .group .title {
  border-bottom: 1px dotted #362a14;
  font-weight: bold;
  padding: 0 8px;
}
footer .group address {
  font-size: 0.9rem;
  font-style: normal;
  padding: 16px 8px;
}
@media (max-width: 768px) {
  footer .group address span {
    display: inline-block;
  }
}
footer .group address dt {
  padding-bottom: 8px;
}
footer .group address dd {
  padding-bottom: 24px;
}

#copy {
  text-align: center;
  font-size: 0.86rem;
  padding: 8px;
}

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

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

#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;
  line-height: 1.4;
}
#line_popup .title-box span {
  display: inline-block;
}
#line_popup form {
  padding: 32px;
  text-align: center;
}
@media (max-width: 768px) {
  #line_popup form {
    padding: 32px 16px;
  }
}
#line_popup .small {
  text-align: left;
}
#line_popup .title {
  margin: 0 0 16px;
  font-weight: bold;
}
#line_popup input[type=tel] {
  border-radius: 6px;
  font-size: 1.125rem;
  padding: 0.6em;
  width: 12em;
  border: 1px solid #00b900;
  transition: all 0.2s ease-in-out;
  outline: none;
}
@media (max-width: 768px) {
  #line_popup input[type=tel] {
    width: 8em;
  }
}
#line_popup button {
  outline: none;
  font-size: 1.125rem;
  border-radius: 6px;
  padding: 0.6em 1.2em;
  cursor: pointer;
}
@media (max-width: 768px) {
  #line_popup button {
    padding: 0.6em 0.8em;
  }
}
#line_popup #line-show {
  background: #00b900;
  border: none;
  color: white;
}
#line_popup .line-reset {
  background: white;
  border: 2px solid #00b900;
  color: #00b900;
  margin-top: 32px;
}
#line_popup .line-form {
  text-align: center;
  padding-bottom: 16px;
}
#line_popup .line-code {
  text-align: center;
}
#line_popup .line-btn {
  display: none;
}
#line_popup .line-address {
  padding-bottom: 16px;
}
#line_popup .line-address span {
  font-weight: bold;
}

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

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

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

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

.normal {
  font-weight: normal;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.outline-red {
  background: #dd5231;
}

.outline-blue {
  background: #266280;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@keyframes headron {
  0% {
    bottom: 0;
    opacity: 0;
  }
  50% {
    bottom: 100%;
    opacity: 1;
  }
  60% {
    bottom: 94%;
    opacity: 1;
  }
  70% {
    bottom: 98%;
    opacity: 1;
  }
  80% {
    bottom: 94%;
    opacity: 1;
  }
  90% {
    bottom: 96%;
    opacity: 1;
  }
  100% {
    bottom: 94%;
    opacity: 1;
  }
}
.title-tag {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin: 0 auto;
  background: #f7f3de;
  border-left: 24px solid #d2ebb2;
  padding: 16px;
  text-align: left;
  font-weight: bold;
  font-size: 1.25rem;
}
@media (max-width: 768px) {
  .title-tag {
    font-size: 1.125rem;
    border-left-width: 16px;
  }
}

.title-grass, .pencil {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  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, .pencil:before {
  content: "\f4d8";
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
  color: #2ca12c;
  font-size: 1.4rem;
  position: absolute;
  color: #71cc5f;
  bottom: 12px;
  left: 0;
}
@media (max-width: 768px) {
  .title-grass, .pencil {
    font-size: 1.125rem;
    padding: 8px 0 12px 32px;
  }
}

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

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

[class^=bg-], [class*=" bg-"] {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  border-radius: 6px;
  background: #e7f5f5;
  border: 1px solid transparent;
  padding: 16px 24px;
}

.bg-blue {
  background: #e7f5f5;
}

.bg-yellow {
  background: #fffbb4;
}

.bg-white {
  background: white;
}

.bg-pink {
  background: #fcf4f4;
}

.bg-green {
  background: #ebfab6;
}

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

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

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

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

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

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

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

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

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

.titlebox-pink {
  background: #ffe1de;
}

.titlebox-blue {
  background: #c3eef7;
}

.titlebox-green {
  background: #d2ebb2;
}

.titlebox-brown {
  background: #eeede9;
}

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

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

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

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

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

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

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

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

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

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

.board {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  max-width: 640px;
  background: url(/image/content/page/trial/box01_head.webp) no-repeat center top/100%, url(/image/content/page/trial/box01_foot.webp) no-repeat center bottom/100%, url(/image/content/page/trial/box01_bg.webp) repeat-y center/100%;
  padding: 80px 32px 30px;
  text-align: center;
}
@media (max-width: 768px) {
  .board {
    padding: 2em 1em 1em;
  }
}
.board .checklist {
  padding: 0;
  text-align: left;
}
.board .outline-green {
  display: inline-block;
  font-weight: bold;
}

ul.line {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
ul.line li {
  width: 33.3333333333%;
  padding: 4px;
}
@media (max-width: 640px) {
  ul.line li {
    width: 100%;
  }
}

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

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

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

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

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

.disc {
  list-style: disc;
}

.decimal {
  list-style: decimal;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.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(109.6203389831, 150.3576271186, 24.4423728814);
  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;
}

[class^=face-] li, [class*=" face-"] li {
  padding: 8px 0 8px 32px;
  background: no-repeat left 6px;
}

.face-smile li {
  background-image: url(/image/common/list/smile.webp);
}

.face-sad li {
  background-image: url(/image/common/list/sad.webp);
}

.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;
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  border-radius: 32px;
  padding: 16px 0;
}
@media (max-width: 768px) {
  .cta_bottom li {
    border-radius: 0px;
    background: none;
    margin: 0 auto;
    padding: 0;
  }
}
.cta_bottom .title span {
  display: none;
}
@media (max-width: 768px) {
  .cta_bottom .title span {
    display: block;
    font-weight: bold;
    font-size: 1rem;
  }
}
@media (max-width: 768px) {
  .cta_bottom .title img {
    display: none;
  }
}
.cta_bottom .btn {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.cta_bottom .btn::before {
  content: url(/image/parts/device/img06.webp);
}
@media (max-width: 768px) {
  .cta_bottom .btn::before {
    content: none;
  }
}
.cta_bottom .btn a {
  display: block;
  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;
}

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

.telbtn {
  pointer-events: none;
}
@media (max-width: 768px) {
  .telbtn {
    pointer-events: auto;
  }
}

.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;
}
#popup_trial ul {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  min-width: 560px;
}
@media (max-width: 768px) {
  #popup_trial ul {
    min-width: unset;
  }
}
#popup_trial li {
  padding: 8px 0;
  margin: 0 auto;
}
#popup_trial li a {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: white;
  padding: 24px 8px;
  border-radius: 6px;
  line-height: 1;
  font-weight: bold;
  font-size: 1.25rem;
}
@media (max-width: 768px) {
  #popup_trial li a {
    flex-direction: column;
    font-size: 1.125rem;
    text-align: center;
  }
}
#popup_trial li a::before {
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
  margin-right: 4px;
}
@media (max-width: 768px) {
  #popup_trial li a::before {
    margin-right: 0;
    margin-bottom: 16px;
  }
}
#popup_trial li a small {
  font-size: 1rem;
  font-weight: normal;
}
@media (max-width: 768px) {
  #popup_trial li a small {
    font-size: 0.875rem;
  }
}
#popup_trial li.pc {
  text-align: center;
}
#popup_trial li.tel a {
  background: #dd5231;
}
#popup_trial li.tel a::before {
  content: "\f3cd";
  font-size: 2.25rem;
}
#popup_trial li.web {
  max-width: 500px;
}
#popup_trial li.web a {
  background: #266280;
}
#popup_trial li.web a::before {
  content: "\f0e0";
  font-size: 1.5rem;
}
#popup_trial li.line {
  max-width: 500px;
}
#popup_trial li.line a {
  background: #2ca12c;
}
#popup_trial li.line a::before {
  content: "\f3c0";
  font-family: "Font Awesome 5 Brands";
  font-size: 2rem;
  font-weight: normal;
}
#popup_trial.fancybox-content {
  padding: 8px;
}
@media (max-width: 768px) {
  #popup_trial.fancybox-content {
    width: 80%;
  }
}

.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(226.78, 111.41, 84.02);
}
.cta ul li.contact a {
  background: #5697B8;
}
.cta ul li.contact a:hover {
  background: rgb(114.73, 168.68, 196.07);
}
.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;
}

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

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

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

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

.link_area {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
}
.link_area dt {
  color: #2ca12c;
  font-weight: bold;
  border-bottom: 2px dotted #2ca12c;
  font-size: 1.1rem;
}
.link_area dd {
  padding: 8px 0 32px;
}
.link_area li {
  display: inline-block;
  margin: 8px 0;
}
.link_area a {
  display: block;
  text-decoration: none;
  color: #2ca12c;
  border: 1px solid #71cc5f;
  border-radius: 6px;
  padding: 4px 16px;
  font-size: 1rem;
}

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

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

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

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

.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 toform {
  0% {
    transform: translate(0);
  }
  25% {
    transform: translate(4px);
  }
  50% {
    transform: translate(-3px);
  }
  75% {
    transform: translate(2px);
  }
  100% {
    transform: translate(0);
  }
}
#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: hsl(39.1304347826, 22.7722772277%, 112.1960784314%);
}
#line-popup input[type=tel]::placeholder {
  color: hsl(39.1304347826, 22.7722772277%, 112.1960784314%);
}
@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;
}

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

.pagelink {
  margin: 16px auto;
  padding: 4px 0;
  background: rgb(211.5945945946, 185.5513513514, 137.8054054054);
}
.pagelink ul {
  margin: 4px auto;
  padding: 24px 8px 8px;
  border-top: 4px dotted rgb(197.8108108108, 163.4972972973, 100.5891891892);
  border-bottom: 4px dotted rgb(197.8108108108, 163.4972972973, 100.5891891892);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.pagelink ul:before, .pagelink ul:after {
  display: block;
  width: 100%;
  content: "";
}
@media (max-width: 768px) {
  .pagelink ul {
    justify-content: center;
  }
}
.pagelink li {
  margin: 0 1% 16px;
  width: 48%;
  text-align: center;
}
.pagelink li.current {
  background: hsl(60, 100%, 100.6862745098%);
}
.pagelink li.wide {
  width: 98%;
}
@media (max-width: 768px) {
  .pagelink li {
    width: 92%;
  }
}
.pagelink li a, .pagelink li > span {
  display: block;
  cursor: pointer;
  font-size: 0.9375rem;
  border-radius: 6px;
  padding: 16px 8px 8px;
  background: white;
  width: 100%;
  height: 100%;
  color: #362a14;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}
.pagelink li a em, .pagelink li > span em {
  display: block;
  font-size: 1.125rem;
  border-radius: 6px;
  padding: 0.5em;
  padding-left: 1.8em;
  background: #362a14;
  color: white;
  margin-top: 8px;
  position: relative;
}
.pagelink li a em:before, .pagelink li > span em:before {
  content: "\f144";
  font-family: icon;
  position: absolute;
  left: 0.5em;
  top: 0.6em;
  line-height: 1;
  color: #ffffe9;
}
.pagelink li a:hover, .pagelink li > span:hover {
  opacity: 0.8;
}
.pagelink.three li, .pagelink.block03 li {
  width: 30%;
}
.pagelink.block06 li {
  width: 15%;
}

.courselink {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  background: hsl(30.1840490798, 85.3403141361%, 102.5490196078%);
  border-radius: 6px;
  padding: 16px;
  border: 2px solid rgb(252.9623036649, 241.1727748691, 229.2376963351);
  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;
}
@media (max-width: 768px) {
  .courselink ul {
    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(83.772972973, 65.1567567568, 31.027027027);
  border-radius: 6px;
  text-decoration: none;
  padding: 8px 24px;
  box-shadow: 2px 2px 0px hsl(38.8235294118, 45.9459459459%, -1.4901960784%);
}
.courselink a:hover {
  transform: translate(2px, 2px);
  box-shadow: 0px 0px 0px hsl(38.8235294118, 45.9459459459%, -1.4901960784%);
  color: #f0e53B;
}
@media (max-width: 768px) {
  .courselink a {
    padding: 16px 4px;
  }
}

.pagenavi {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin-top: 86px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  background: #ffffe9;
  border: 1px dashed #71cc5f;
  border-radius: 6px;
}
@media (max-width: 768px) {
  .pagenavi {
    margin-top: 64px;
  }
}
.pagenavi li {
  padding: 4px;
  flex: 1;
  position: relative;
  font-size: 0.86em;
}
.pagenavi li i {
  position: absolute;
  text-align: center;
  width: 70%;
  bottom: calc(100% + 10px);
  left: 15%;
}
.pagenavi a {
  display: block;
  border-radius: 6px;
  background: #f0e53B;
  height: 64px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  color: #362a14;
  font-weight: bold;
  padding: 8px 4px;
  line-height: 1.4;
}
@media (max-width: 768px) {
  .pagenavi a {
    font-size: 0.875rem;
  }
}

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

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

.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;
}
@media (max-width: 768px) {
  .dl_title li a {
    padding: 0.8em 0.4em;
  }
}
.dl_title li a:hover {
  border-color: #dd5231;
}
.dl_title .subtitle {
  border-bottom: 2px dotted #2ca12c;
  display: inline-block;
  color: #2ca12c;
  font-weight: bold;
  margin-bottom: 8px;
}

.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, 232.9684210526, 195.2);
}
.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);
}

body {
  font-size: 1.125rem;
  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;
}

p {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  max-width: 800px;
  margin: 0 auto;
  padding: 16px 0;
  line-height: 1.8;
}

#wrap {
  background: none;
}

.movie {
  max-width: 800px;
  padding: 16px;
  text-align: center;
}

.catch {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  position: relative;
  max-width: 960px;
  margin: 0 auto 64px;
  padding: 16px 24px;
}
@media (max-width: 768px) {
  .catch {
    padding: 16px 0;
  }
}
.catch::before, .catch::after {
  border-top: 3px solid #74664b;
  display: block;
  content: "";
  height: 20px;
  width: 48%;
  position: absolute;
  top: 100%;
}
@media (max-width: 768px) {
  .catch::before, .catch::after {
    width: 45%;
  }
}
.catch::before {
  border-right: 3px solid #74664b;
  transform: translateX(-6px) skew(34deg);
  right: 50%;
}
.catch::after {
  border-left: 3px solid #74664b;
  transform: translateX(6px) skew(-34deg);
  left: 50%;
}
.catch p {
  width: 100%;
}

.prev_next {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin: 64px auto;
}
.prev_next li {
  margin-bottom: 24px;
}
.prev_next li.prev {
  text-align: left;
}
.prev_next li.prev a {
  padding-left: 1.6em;
}
.prev_next li.prev a::before {
  content: "";
  left: 0;
  transform-origin: left bottom;
  transform: skew(-32deg);
}
.prev_next li.next {
  text-align: right;
}
.prev_next li.next a {
  padding-right: 1.6em;
}
.prev_next li.next a::after {
  content: "";
  right: 0;
  transform-origin: right bottom;
  transform: skew(32deg);
}
.prev_next a {
  display: block;
  border-bottom: 1px solid #5697B8;
  text-decoration: none;
  padding: 0.6em;
  position: relative;
  color: #266280;
}
.prev_next a::before, .prev_next a::after {
  position: absolute;
  bottom: 0;
  display: block;
  height: 40%;
  width: 1px;
  background: #5697B8;
}
.prev_next a:hover {
  color: #dd5231;
}

.bg-white {
  max-width: 960px;
}
.bg-white .img-right {
  max-width: 800px;
}

.list_training, .list_lecture {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
}
.list_training li, .list_lecture li {
  border: 2px solid #fff8ec;
  border-radius: 6px;
  width: calc(50% - 8px);
  margin: 16px 4px;
  background: white;
}
@media (max-width: 768px) {
  .list_training li, .list_lecture li {
    width: 100%;
  }
}
.list_training .img, .list_lecture .img {
  text-align: center;
}
.list_training p, .list_lecture p {
  margin: 0 auto;
  padding: 16px;
}
@media (max-width: 768px) {
  .list_training p, .list_lecture p {
    padding: 16px 0;
  }
}
.list_training p.title, .list_lecture p.title {
  background: #fff8ec;
  text-align: left;
  margin-bottom: 16px;
  font-weight: bold;
  line-height: 1.4;
  width: 100%;
}
@media (max-width: 768px) {
  .list_training p.title, .list_lecture p.title {
    padding: 16px;
  }
}
.list_training p.name, .list_lecture p.name {
  text-align: right;
  font-size: 0.9375rem;
}

.list_message {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.list_message.box02 > li {
  padding-bottom: 240px;
}
@media (max-width: 768px) {
  .list_message.box02 > li {
    padding-bottom: 0;
  }
}
.list_message > li {
  width: calc(33.3333333333% - 16px);
  position: relative;
}
@media (max-width: 768px) {
  .list_message > li {
    width: 100%;
    border-bottom: 3px dotted #2ca12c;
    padding: 16px 0;
  }
  .list_message > li:first-child {
    padding-top: 0;
  }
}
.list_message ol {
  margin: 16px auto;
}
.list_message ol li {
  border-bottom: 1px dashed #362a14;
  background: no-repeat left 10px;
  padding: 8px 8px 4px 32px;
}
.list_message ol li.a1 {
  background-image: url(/image/content/voice/index/chap04/no1.webp);
}
.list_message ol li.a2 {
  background-image: url(/image/content/voice/index/chap04/no2.webp);
}
.list_message ol li.a3 {
  background-image: url(/image/content/voice/index/chap04/no3.webp);
}
.list_message .balloon {
  position: absolute;
  bottom: 0;
  left: 3%;
}
@media (max-width: 768px) {
  .list_message .balloon {
    position: static;
  }
}

.list_interview li {
  width: 33.3333333333%;
}
@media (max-width: 768px) {
  .list_interview li {
    width: 100%;
  }
}

.list_up li {
  width: calc(33.3333333333% - 8px);
}
@media (max-width: 768px) {
  .list_up li {
    width: 100%;
  }
}

.list_evidence {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.list_evidence li {
  padding: 0 4px;
}
.list_evidence span {
  display: block;
  background: #ffb0a9;
  border-radius: 6px;
  padding: 0.3em 0.6em 0.2em;
  margin: 8px 0;
  position: relative;
}
.list_evidence span::after {
  content: "\f138";
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
  position: absolute;
  top: calc(50% - 0.5em);
  right: 8px;
}
.list_evidence a {
  color: white;
  text-decoration: none;
}

#index > section {
  margin: 64px auto 160px;
  max-width: 1120px;
}
#index > section:last-of-type {
  margin-bottom: 64px;
}
#index > section section {
  margin: 16px auto 48px;
}
#index > p, #index section > p:not(.catch) {
  max-width: 800px;
  margin: 0 auto;
  padding: 16px 0;
}
#index .mainimg {
  background: #ebfab6;
  text-align: center;
  position: relative;
}
#index .mainimg h1 {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: 4px 32px;
  border-radius: 6px;
  box-shadow: 0 0 2px 8px white;
}
@media (max-width: 768px) {
  #index .mainimg h1 {
    position: static;
    transform: translateX(0);
    font-size: 0.875rem;
    padding: 8px;
    box-shadow: 0 0 0 0 white;
  }
}
#index .pagenav {
  max-width: 94%;
  margin: 24px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  flex-wrap: nowrap;
}
@media (max-width: 768px) {
  #index .pagenav {
    display: block;
  }
}
#index .pagenav li {
  padding: 8px;
}
@media (max-width: 768px) {
  #index .pagenav li {
    padding: 4px 0;
  }
}
#index .pagenav li a {
  display: block;
  border: 1px solid #d8d0c1;
  border-radius: 6px;
  box-shadow: 2px 2px 3px rgba(54, 42, 20, 0.2);
  overflow: hidden;
}
#index .pagenav li a:hover {
  box-shadow: 0px 0px 1px rgba(54, 42, 20, 0.4);
}
#index h2 {
  text-align: center;
}

/* trial
-----------------------------*/
#voice #interview {
  max-width: 100%;
}

#solution {
  max-width: 100%;
}
#solution .mainimg {
  background: #fffbb4;
  padding-bottom: 32px;
}
#solution .mainimg div {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  max-width: 960px;
  background: white;
  border-radius: 12px;
  padding: 16px 32px;
}
#solution h2.catch i {
  font-size: 1.125rem;
  background: #ffb0a9;
  color: white;
  border-radius: 6px;
  padding: 4px 16px;
  display: inline-block;
  margin-bottom: 16px;
  font-weight: normal;
}
#solution h2.catch small {
  font-size: 1rem;
  display: block;
  text-align: right;
  font-weight: normal;
}
@media (max-width: 768px) {
  #solution h2.catch {
    text-align: left;
  }
}
#solution .flex {
  margin-top: 64px;
}
#solution .solution {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  max-width: 960px;
  margin: 64px auto 0;
  border-radius: 12px;
  border: 6px solid #d8d0c1;
  background: #fffbb4;
  padding: 16px 0;
}
#solution .solution dl {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  max-width: 800px;
}
#solution .solution dl p {
  width: auto;
}
#solution .solution .title-grass {
  width: 100%;
}
#solution .teacher {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  max-width: 960px;
  margin: 64px auto 0;
  border-radius: 12px;
  background: #ebfab6;
  padding: 16px 0;
}
#solution .teacher .title {
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.4;
}
#solution .teacher ul {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  max-width: 800px;
}
#solution .teacher li {
  background: white;
  margin: 16px 0;
  border-radius: 6px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  padding: 8px 16px;
}
#solution .teacher li p {
  flex: 1;
  width: auto;
  padding: 16px;
  padding-right: 0;
}
#solution .teacher li::before {
  content: url(/image/content/voice/page/worry/img07.webp);
}
#solution .teacher li.male::before {
  content: url(/image/content/voice/page/worry/img08.webp);
}
#solution .epilogue {
  background: #fffbb4;
  padding: 32px 0;
}
#solution .epilogue.balloon {
  max-width: 100%;
  width: 100%;
}

#interview h1 {
  margin: 0;
}
#interview h1 + * {
  margin-top: 0;
}
#interview.index h1 {
  text-align: center;
  padding: 16px 8px;
}
#interview.index .index_title {
  margin: 0 128px 0 16px;
  color: #266280;
  font-size: 2rem;
  border: 3px solid #266280;
  border-radius: 16px;
  text-align: left;
  padding: 16px 120px 16px 24px;
  position: relative;
  font-weight: bold;
}
@media (max-width: 768px) {
  #interview.index .index_title {
    font-size: 1.5rem;
    padding: 16px 24px;
    margin: 0 16px 32px;
  }
}
#interview.index .index_title::after {
  content: "";
  display: block;
  width: 200px;
  height: 200px;
  background: no-repeat center/contain;
  position: absolute;
  left: calc(100% - 84px);
  top: 50%;
  transform: translateY(-50%) rotate(8deg);
}
@media (max-width: 768px) {
  #interview.index .index_title::after {
    width: 100px;
    height: 100px;
    left: auto;
    top: 0;
    right: 0;
    transform: translateY(-84%) rotate(8deg);
  }
}
#interview.index section.best3 .index_title::after {
  background-image: url(/image/content/voice/interview/icon/best3.webp);
}
#interview.index section.good .index_title::after {
  background-image: url(/image/content/voice/interview/icon/good.webp);
}
#interview.index section.gradeup .index_title::after {
  background-image: url(/image/content/voice/interview/icon/gradeup.webp);
}
#interview.index section.other .index_title::after {
  background-image: url(/image/content/voice/interview/icon/other.webp);
}
#interview.index section.over100 .index_title::after {
  background-image: url(/image/content/voice/interview/icon/over100.webp);
}
#interview.index section.up30 .index_title::after {
  background-image: url(/image/content/voice/interview/icon/up30.webp);
}
#interview.index section.pass .index_title::after {
  background-image: url(/image/content/voice/interview/icon/pass.webp);
}
#interview section {
  max-width: 1120px;
  margin: 64px auto 128px;
}
#interview.archive h1, #interview.single h1 {
  background: url(/image/content/voice/interview/archive/bg.webp) no-repeat center bottom/cover;
}
#interview .intro {
  background: #f0e53B;
}
#interview .intro p {
  font-weight: bold;
}
#interview .intro p.title {
  font-weight: bold;
  display: inline-block;
  width: auto;
  background: white;
  border: 2px solid #362a14;
  padding: 0 16px;
}
#interview .intro .inner {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin: 0 auto;
  max-width: 960px;
  padding: 32px 16px;
}
#interview .intro table {
  border-collapse: separate;
  border-spacing: 0 8px;
  margin-top: 8px;
}
#interview .intro th {
  background: #362a14;
  color: white;
  font-size: 1rem;
  padding: 4px;
  border-radius: 6px;
  width: 8em;
  vertical-align: middle;
}
#interview .intro td {
  padding: 4px 8px;
}
#interview .beforeafter .change {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  background: url(/image/content/voice/interview/single/img01.webp) no-repeat center;
}
@media (max-width: 768px) {
  #interview .beforeafter .change {
    display: block;
    background: none;
    width: 94%;
    margin: 24px auto;
    max-width: 1120px;
    margin: 0 auto;
  }
}
#interview .beforeafter dl {
  width: calc(50% - 64px);
  border-radius: 6px;
}
@media (max-width: 768px) {
  #interview .beforeafter dl {
    width: 100%;
    margin-bottom: 94px;
  }
}
#interview .beforeafter dl.before {
  border: 8px solid #362a14;
}
@media (max-width: 768px) {
  #interview .beforeafter dl.before {
    position: relative;
  }
  #interview .beforeafter dl.before::after {
    content: url(/image/content/voice/interview/single/img01.webp);
    position: absolute;
    top: calc(100% + 39px);
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
  }
}
#interview .beforeafter dl.before dt {
  background: #362a14;
  color: white;
}
#interview .beforeafter dl.after {
  border: 8px solid #f0e53B;
}
#interview .beforeafter dl.after dt {
  background: #f0e53B;
}
#interview .beforeafter dt {
  font-weight: bold;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
#interview .beforeafter dd {
  background: white;
  padding: 0 16px;
}
#interview .beforeafter dd p {
  width: auto;
}
#interview .headline-line {
  border-bottom: 3px solid #f0e53B;
  position: relative;
  text-align: left;
  padding: 8px;
  font-size: 2rem;
  line-height: 1.4;
  margin-bottom: 32px;
}
@media (max-width: 768px) {
  #interview .headline-line {
    font-size: 1.5rem;
  }
}
#interview .headline-line::after {
  content: "";
  display: block;
  width: 30%;
  height: 3px;
  background: #362a14;
  position: absolute;
  top: 100%;
  left: 0;
}
#interview .headline-line img {
  margin-right: 8px;
  width: 64px;
  vertical-align: bottom;
}
#interview .headline-icon {
  text-align: left;
  font-size: 1.625rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  line-height: 1.4;
}
@media (max-width: 768px) {
  #interview .headline-icon {
    font-size: 1.25rem;
  }
}
#interview .headline-icon span {
  flex: 1;
}
#interview .headline-icon::before {
  content: "";
  display: inline-block;
  width: 48px;
  height: 48px;
  background: url(/image/content/voice/interview/icon/mic.webp) no-repeat center/contain;
  position: relative;
  top: -10px;
  margin-right: 8px;
}
#interview section.flow {
  max-width: none;
}
#interview section.flow li {
  padding: 16px 8px 64px;
}
#interview section.flow .level1 {
  background: rgba(86, 151, 184, 0.1);
}
#interview section.flow .level1 .title::before {
  background-image: url(/image/content/voice/interview/icon/level1.webp);
}
#interview section.flow .level2 {
  background: rgba(38, 98, 128, 0.1);
}
#interview section.flow .level2 .title::before {
  background-image: url(/image/content/voice/interview/icon/level2.webp);
}
#interview section.flow .level3 {
  background: rgba(241, 160, 78, 0.1);
}
#interview section.flow .level3 .title::before {
  background-image: url(/image/content/voice/interview/icon/level3.webp);
}
#interview section.flow .level4 {
  background: rgba(221, 82, 49, 0.1);
}
#interview section.flow .level4 .title::before {
  background-image: url(/image/content/voice/interview/icon/level4.webp);
}
#interview section.flow .goal {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  max-width: 1120px;
  margin: 0 auto;
  background: no-repeat right 16px/240px;
  min-height: 256px;
}
@media (max-width: 768px) {
  #interview section.flow .goal {
    background-position: center bottom;
  }
}
#interview section.flow .goal .title {
  font-size: 1.5rem;
}
#interview section.flow .goal .title::before {
  background-image: url(/image/content/voice/interview/icon/level5.webp);
}
#interview section.flow .goal p:not(.title) {
  padding-right: 92px;
}
@media (max-width: 1120px) {
  #interview section.flow .goal p:not(.title) {
    padding-right: 180px;
  }
}
@media (max-width: 960px) {
  #interview section.flow .goal p:not(.title) {
    padding-right: 200px;
  }
}
@media (max-width: 768px) {
  #interview section.flow .goal p:not(.title) {
    padding-right: 0;
    padding-bottom: 240px;
  }
}
#interview section.flow .title {
  font-weight: bold;
  font-size: 1.25rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  line-height: 1.4;
}
#interview section.flow .title span {
  flex: 1;
}
#interview section.flow .title::before {
  content: "";
  display: inline-block;
  width: 48px;
  height: 48px;
  margin-right: 8px;
  background: no-repeat center/contain;
}
#interview section.flow .point {
  font-weight: bold;
  font-size: 1.25rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  line-height: 1.4;
}
#interview section.flow .point span {
  flex: 1;
}
#interview section.flow .point::before {
  content: "";
  display: inline-block;
  width: 36px;
  height: 36px;
  margin-right: 8px;
  background: url(/image/content/voice/interview/icon/point.webp) no-repeat center/contain;
}
#interview section.flow p:empty {
  display: none;
}
#interview section.flow .img {
  text-align: center;
  margin-top: 32px;
}
#interview.up30 section.flow .goal {
  background-image: url(/image/content/voice/interview/icon/up30.webp);
}
#interview.over100 section.flow .goal {
  background-image: url(/image/content/voice/interview/icon/good.webp);
}
#interview.over100 section.flow .goal {
  background-image: url(/image/content/voice/interview/icon/good.webp);
}
#interview.good section.flow .goal {
  background-image: url(/image/content/voice/interview/icon/good.webp);
}
#interview.other section.flow .goal {
  background-image: url(/image/content/voice/interview/icon/other.webp);
}
#interview.pass section.flow .goal {
  background-image: url(/image/content/voice/interview/icon/pass.webp);
}
#interview.gradeup section.flow .goal {
  background-image: url(/image/content/voice/interview/icon/gradeup.webp);
}
#interview .summary section {
  width: calc(94% - 32px);
  max-width: 800px;
}
#interview .summary .title {
  font-weight: bold;
  font-size: 1.5rem;
  margin-top: 32px;
  border-bottom: 3px dotted #266280;
  padding: 0 4px;
}
@media (max-width: 768px) {
  #interview .summary .title {
    font-size: 1.125rem;
  }
}
#interview .summary dl {
  margin: 32px 0 64px;
}
#interview .summary dt {
  font-weight: bold;
  border-left: 8px solid #f1a04e;
  padding: 4px 8px;
}
#interview .summary dd {
  margin: 16px 0 32px;
}
#interview .epilogue {
  background: #ebfab6;
  padding: 32px 0 16px;
}
#interview .epilogue .title {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  line-height: 1.4;
  font-weight: bold;
  padding: 0;
}
#interview .epilogue .title span {
  flex: 1;
}
#interview .epilogue .title::before {
  content: "";
  display: inline-block;
  width: 48px;
  height: 48px;
  background: url(/image/content/voice/interview/icon/mic.webp) no-repeat center/contain;
  position: relative;
  top: -10px;
  margin-right: 8px;
}

#h-nav {
  background: linear-gradient(hsl(48, 12.8205128205%, 108.3529411765%), #eeede9);
  box-shadow: 0px 0px 2px rgba(54, 42, 20, 0.4);
  position: sticky;
  top: 0;
  z-index: 10;
}
@media (max-width: 979px) {
  #h-nav {
    position: fixed;
    left: 100%;
    width: 100%;
    height: 100vh;
    padding-top: 64px;
    transition: all 0.2s ease-in-out;
  }
  #h-nav.open {
    left: 0;
  }
}
#h-nav ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 979px) {
  #h-nav ul {
    border-top: 1px dashed #2ca12c;
    display: block;
    overflow-y: scroll;
  }
}
#h-nav ul > li {
  position: relative;
}
#h-nav ul > li:hover a::after {
  background: #2ca12c;
}
#h-nav ul > li > a {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  padding-right: 32px;
  color: #362a14;
  position: relative;
}
@media (max-width: 979px) {
  #h-nav ul > li > a {
    justify-content: flex-start;
    border-bottom: 1px dashed #2ca12c;
  }
}
#h-nav ul > li > a::after {
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  background: transparent;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: all 0.2s ease-in-out;
}
@media (max-width: 979px) {
  #h-nav ul > li > a::after {
    content: none;
  }
}
#h-nav ul > li > a img {
  width: 46px;
  margin-right: 8px;
}
#h-nav ol {
  display: none;
  background: white;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 4;
}
@media (max-width: 979px) {
  #h-nav ol {
    display: block;
    position: static;
  }
}
#h-nav ol a {
  display: block;
  border-bottom: 1px dotted #2ca12c;
  padding-left: 1em;
  text-indent: -1em;
}
#h-nav ol a::before {
  content: "・";
  color: #2ca12c;
}
#h-nav ol > li {
  padding: 0 8px;
}
#h-nav ol > li:last-child a {
  border: none;
}
@media (max-width: 979px) {
  #h-nav ol > li:last-child a {
    border-bottom: 1px dotted #2ca12c;
  }
}
#h-nav a {
  line-height: 1.4;
  text-decoration: none;
  font-size: 1rem;
  padding: 8px;
}
@media (max-width: 979px) {
  #h-nav a {
    padding: 16px;
  }
}
#h-nav .closebtn {
  display: none;
}
@media (max-width: 979px) {
  #h-nav .closebtn {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 2.5rem;
    background: green;
    color: white;
    font-family: "Font Awesome 5 Free";
    line-height: 1;
    padding: 0 4px;
    font-weight: 900;
    padding: 8px;
    cursor: pointer;
  }
}
#h-nav > div {
  display: none;
}
@media (max-width: 768px) {
  #h-nav > div {
    display: block;
  }
  #h-nav > div a {
    color: #362a14;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px dotted #2ca12c;
  }
  #h-nav > div a i {
    font-size: 2rem;
    margin: 0 16px 0 8px;
  }
}

#menuopen_voice {
  display: none;
}
@media (max-width: 979px) {
  #menuopen_voice {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background: #2ca12c;
    position: fixed;
    top: 0;
    right: 0;
    width: 62px;
    height: 62px;
    cursor: pointer;
    z-index: 11;
  }
}
#menuopen_voice span {
  display: block;
  width: 64%;
  height: 2px;
  background: white;
  position: relative;
  margin: 10px 0 12px 0;
  transition: all 0.2s ease-in-out;
}
#menuopen_voice span::before, #menuopen_voice span::after {
  content: "";
  width: 100%;
  height: 2px;
  background: white;
  position: absolute;
  left: 0;
  transition: all 0.2s ease-in-out;
}
#menuopen_voice span::before {
  top: -10px;
}
#menuopen_voice span::after {
  bottom: -10px;
}
#menuopen_voice.active span {
  background: transparent;
}
#menuopen_voice.active span::before, #menuopen_voice.active span::after {
  top: 0;
  bottom: 0;
}
#menuopen_voice.active span::before {
  transform: rotate(45deg);
}
#menuopen_voice.active span::after {
  transform: rotate(-45deg);
}

.list-terms {
  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-terms {
    display: block;
  }
}
.list-terms li {
  width: 33.3333333333%;
  padding: 8px;
}
@media (max-width: 768px) {
  .list-terms li {
    width: 100%;
  }
}
.list-terms a {
  display: block;
  text-decoration: none;
  font-weight: bold;
  border: 3px solid #266280;
  border-radius: 0 12px 12px 0;
  padding: 24px 8px 24px 24px;
  min-height: 180px;
  background: white;
  position: relative;
  color: #362a14;
  box-shadow: 1px 1px 3px rgba(54, 42, 20, 0.4);
}
@media (max-width: 768px) {
  .list-terms a {
    min-height: 160px;
  }
}
.list-terms a::before {
  content: "";
  display: block;
  width: 8px;
  height: 100%;
  background: #5697B8;
  position: absolute;
  top: 0;
  left: 0;
}
.list-terms a:hover {
  background: #fffbb4;
}
.list-terms i {
  display: block;
  margin-bottom: 8px;
  color: #dd5231;
  font-size: 1.25rem;
}

.stage {
  max-width: 1120px;
  margin: 64px auto;
}

.slick-slide.slick-slide {
  max-width: 100vw;
  height: auto;
}

.slider_card ul {
  transform: scaleY(0);
  transform-origin: top;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
.slider_card ul.slick-initialized {
  transform: scaleY(1);
  opacity: 1;
}
.slider_card img {
  max-width: 100%;
}
.slider_card .slick-arrow {
  z-index: 10;
  width: 32px;
  height: 32px;
}
@media (max-width: 768px) {
  .slider_card .slick-arrow {
    top: -8px;
  }
}
.slider_card .slick-arrow::before {
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
  color: #362a14;
  font-size: 2rem;
  background: white;
  border-radius: 50%;
  padding: 0;
}
@media (max-width: 979px) {
  .slider_card .slick-prev {
    left: 8px;
  }
}
.slider_card .slick-prev::before {
  content: "\f137";
}
@media (max-width: 979px) {
  .slider_card .slick-next {
    right: 8px;
  }
}
.slider_card .slick-next::before {
  content: "\f138";
}

.slider a {
  display: block;
  background: url(/image/content/voice/interview/archive/bg.webp) no-repeat center bottom/cover;
}

.cate_evidence {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.cate_evidence li {
  width: 50%;
  text-align: center;
  padding: 8px;
}
@media (max-width: 768px) {
  .cate_evidence li {
    width: 100%;
  }
}
.cate_evidence a {
  display: block;
  background: #e7f5f5;
  border: 1px solid #5697B8;
  border-radius: 6px;
}

.cate_trial {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin: 32px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 768px) {
  .cate_trial {
    display: block;
  }
}
.cate_trial li {
  padding: 4px;
}
.cate_trial a {
  display: block;
  background: #fffbb4;
  border-radius: 6px;
  border: 2px solid #f0e53B;
}
.cate_trial a:hover {
  opacity: 0.8;
}

#trial h1.bnr {
  margin-bottom: 0;
}
#trial h1 + div.bnr {
  margin-top: 0;
}

#enquete table.charts-css {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin: 32px auto 64px;
  --labels-size:300px;
}
@media (max-width: 768px) {
  #enquete table.charts-css {
    --labels-size:200px;
  }
}
#enquete table.charts-css th {
  font-weight: normal;
  font-size: 1rem;
  font-size: 16px;
  padding: 0 8px;
}
@media (max-width: 768px) {
  #enquete table.charts-css th {
    text-align: right;
    padding: 16px 0 0;
  }
}
#enquete table.charts-css td {
  padding: 8px;
  font-size: 16px;
}
#enquete table.charts-css caption {
  font-weight: bold;
}
#enquete .pointlist {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
}
#enquete .pointlist dd {
  padding-bottom: 32px;
  margin-bottom: 32px;
  background: url(/image/common/line/dash.webp) repeat-x bottom;
}
#enquete .charts-css.bar tbody {
  display: block;
}
@media (max-width: 768px) {
  #enquete .charts-css.bar tbody tr th {
    position: static;
    width: auto;
  }
}
@media (max-width: 768px) {
  #enquete .charts-css.bar:not(.reverse-labels):not(.reverse) tbody tr {
    margin-inline-start: unset;
  }
  #enquete .charts-css.bar:not(.reverse-labels):not(.reverse) tbody tr th {
    margin-inline-start: unset;
    background: white;
  }
}
#enquete .list_enquete {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin: 16px auto 64px;
  padding: 8px 0;
  background: rgb(211.5945945946, 185.5513513514, 137.8054054054);
}
#enquete .list_enquete ul {
  padding: 8px 16px;
  border-top: 4px dotted rgb(197.8108108108, 163.4972972973, 100.5891891892);
  border-bottom: 4px dotted rgb(197.8108108108, 163.4972972973, 100.5891891892);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
#enquete .list_enquete li {
  padding: 4px;
  width: 50%;
}
#enquete .list_enquete li.current {
  background: hsl(60, 100%, 100.6862745098%);
}
@media (max-width: 768px) {
  #enquete .list_enquete li {
    width: 100%;
  }
}
#enquete .list_enquete li a, #enquete .list_enquete li > span {
  display: block;
  cursor: pointer;
  border-radius: 6px;
  padding: 16px;
  background: white;
  font-size: 1rem;
  font-weight: bold;
  height: 100%;
  color: #362a14;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  line-height: 1.4;
}
#enquete .list_enquete li a:hover, #enquete .list_enquete li > span:hover {
  background: #ffffe9;
}
#enquete .pointlist dt {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
@media (max-width: 768px) {
  #enquete .pointlist dt {
    flex-direction: column;
  }
  #enquete .pointlist dt img {
    margin-bottom: 8px;
  }
}

#message > p, #message section > p {
  max-width: 800px;
  margin: 0 auto;
  padding: 16px 24px;
}
#message .imgbox {
  max-width: 800px;
  margin: 0 auto;
}
#message .titlebox-blue {
  background: #5697B8;
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  max-width: 928px;
  margin-bottom: 32px;
}
#message .titlebox-blue dt {
  color: white;
}
#message .titlebox-blue dd {
  padding-top: 16px;
}
#message .catch {
  font-size: 1.75rem;
}
@media (max-width: 768px) {
  #message .catch {
    font-size: 1.375rem;
  }
}
#message .slidebox {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin-bottom: 32px;
  max-width: 480px;
}
#message .slidebox dt {
  background: #266280;
  color: white;
  text-align: center;
  padding: 0.6em;
}
#message .slidebox-img {
  margin: 24px auto 32px;
}
#message .slidebox-img ul {
  display: none;
}
#message .slidebox-img ul.slick-initialized {
  display: block;
}
#message .slider-balloon, #message .slider-balloon-cheer {
  display: none;
  background: url(/image/content/voice/message/slider/balloon_bg.webp) no-repeat center top/cover #5697B8;
}
#message .slider-balloon.slick-initialized, #message .slider-balloon-cheer.slick-initialized {
  display: block;
}
#message .slider-balloon .slick-slide, #message .slider-balloon-cheer .slick-slide {
  text-align: right;
}
#message .slider-balloon .slick-slide:nth-of-type(odd), #message .slider-balloon-cheer .slick-slide:nth-of-type(odd) {
  text-align: left;
}
#message .slider-balloon .slick-slide:nth-of-type(odd) span::after, #message .slider-balloon-cheer .slick-slide:nth-of-type(odd) span::after {
  content: url(/image/content/voice/message/slider/balloon_l.webp);
  left: auto;
  right: calc(100% - 2px);
}
#message .slider-balloon .slick-slide li, #message .slider-balloon-cheer .slick-slide li {
  padding: 4px 0;
}
#message .slider-balloon .slick-slide li span, #message .slider-balloon-cheer .slick-slide li span {
  background: white;
  display: inline-block;
  padding: 8px 16px;
  margin: 0 24px;
  border-radius: 6px;
  position: relative;
  max-width: 80%;
  text-align: left;
}
#message .slider-balloon .slick-slide li span::after, #message .slider-balloon-cheer .slick-slide li span::after {
  content: url(/image/content/voice/message/slider/balloon_r.webp);
  position: absolute;
  left: calc(100% - 2px);
  right: auto;
  top: 4px;
}

#pass {
  max-width: unset;
}
#pass .mainimg {
  background: linear-gradient(rgb(200.92, 221.72, 232.28), white);
  text-align: center;
}
#pass .tri {
  max-width: 960px;
}
#pass.teacher .mainimg {
  background: url(/image/content/voice/pass/teacher/bg01.webp) no-repeat center/cover, linear-gradient(rgb(200.92, 221.72, 232.28), white);
}
@media (max-width: 768px) {
  #pass.teacher .mainimg {
    background: none;
  }
}

.prevnext {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  position: relative;
  margin: 64px auto 128px;
}
.prevnext li {
  width: 50%;
  position: absolute;
  top: 0;
}
.prevnext li.prev {
  right: 0;
  text-align: right;
}
.prevnext li.prev a::after {
  content: "\f061";
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
  padding: 0 0 0 8px;
}
.prevnext li.next {
  left: 0;
  text-align: left;
}
.prevnext li.next a::before {
  content: "\f060";
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
  padding: 0 8px 0 0;
}
.prevnext li a {
  display: inline-block;
  text-decoration: none;
  color: #266280;
  border: 2px solid #5697B8;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: bold;
}/*# sourceMappingURL=page.css.map */