@charset "UTF-8";
/* 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 -------------------
---------------------------*/
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;
  vertical-align: baseline;
  box-sizing: border-box;
  min-height: 0;
  min-width: 0;
  scroll-behavior: auto;
}

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

ol, ul {
  list-style: none;
}

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

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

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

i, em {
  font-style: normal;
}

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

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

header {
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px;
  display: grid;
  grid-template-rows: 24px 1fr 24px;
  grid-template-columns: 420px 1fr;
  grid-template-areas: "headerLogo headerNav" "headerLogo headerTel" "headerLogo headerArea";
  -moz-column-gap: 8px;
       column-gap: 8px;
  font-size: 0.9375rem;
}
@media (max-width: 979px) {
  header {
    display: block;
    height: 54px;
    position: sticky;
    top: 0;
    background: white;
    border-bottom: 1px solid #2ca12c;
    z-index: 10;
  }
}
header a {
  color: #362a14;
  display: inline-block;
}
header #logo {
  grid-area: headerLogo;
  display: block;
  position: relative;
}
@media (max-width: 979px) {
  header #logo {
    width: 80%;
    max-width: 260px;
  }
}
header #logo i {
  position: absolute;
  top: 0;
  left: 0;
}
@media (max-width: 768px) {
  header #logo i {
    display: none;
  }
}
header .info-nav {
  grid-area: headerNav;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 979px) {
  header .info-nav {
    display: none;
  }
}
header .info-nav li {
  padding-left: 32px;
}
header .info-nav li::before {
  content: "\f061";
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
  position: relative;
  top: 2px;
}
header .info-tel {
  grid-area: headerTel;
  text-align: right;
}
@media (max-width: 979px) {
  header .info-tel {
    display: none;
  }
}
header .info-area {
  grid-area: headerArea;
  text-align: right;
}
@media (max-width: 979px) {
  header .info-area {
    display: none;
  }
}
header .info-area a {
  font-weight: bold;
}
header .info-area a::before {
  content: "\f041";
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
  margin-right: 8px;
  font-size: 1.2em;
  position: relative;
  top: 2px;
}

#menuopen {
  display: none;
}
@media (max-width: 979px) {
  #menuopen {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    background: #2ca12c;
    height: 100%;
    width: 48px;
  }
}
#menuopen span {
  display: block;
  width: 64%;
  height: 2px;
  background: white;
  position: relative;
  transition: all 0.2s ease-in-out;
}
#menuopen span::before, #menuopen span::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: white;
  position: absolute;
  left: 0;
  transition: all 0.2s ease-in-out;
}
#menuopen span::before {
  top: -8px;
}
#menuopen span::after {
  bottom: -8px;
}

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

#totop {
  position: fixed;
  right: 2%;
  bottom: 0;
  transform: translateY(120px);
  transition: all 0.2s ease-in-out;
  z-index: 99;
}
@media (max-width: 979px) {
  #totop {
    bottom: 68px;
  }
}
#totop.active {
  transform: translateY(0);
}
#totop picture {
  filter: drop-shadow(0 0 2px rgba(51, 51, 51, 0.3));
  transition: all 0.2s ease-in-out;
}
#totop:hover picture {
  filter: drop-shadow(0 0 0 rgba(51, 51, 51, 0));
}

section {
  margin: 64px auto;
}

#wrap {
  max-width: 1120px;
  background: url(/image/layout/crk-l.webp) no-repeat left top, url(/image/layout/crk-r.webp) no-repeat right top;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 324px 1fr;
  grid-template-areas: "areaNav areaMain";
  -moz-column-gap: 16px;
       column-gap: 16px;
}
@media (max-width: 979px) {
  #wrap {
    background: none;
    width: 100%;
    display: block;
  }
}

main {
  grid-area: areaMain;
  position: relative;
  background: url(/image/layout/note_foot.webp) no-repeat center bottom/contain, url(/image/layout/note_bg.webp) center/contain;
  padding: 8px 8px 64px;
  margin-top: 40px;
  min-height: 1000px;
  z-index: 2;
}
@media (max-width: 979px) {
  main {
    background: none;
    margin-top: 0;
  }
}
main::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: -20px;
  width: 100%;
  height: 36px;
  background: url(/image/layout/note_head.webp) no-repeat center top/100%;
  z-index: 1;
}
@media (max-width: 979px) {
  main::before {
    content: none;
  }
}

#gnav {
  grid-area: areaNav;
}

#bread {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin: 0 auto;
  font-size: 0.75rem;
  position: relative;
  z-index: 3;
  transform: translateY(-10px);
  padding: 0 16px;
}
@media (max-width: 979px) {
  #bread {
    display: none;
  }
}
#bread h1 {
  font-size: 0.8rem;
  font-weight: normal;
  text-align: left;
}
#bread > span::before {
  content: "\f054";
  padding: 0 0.8em;
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
}
#bread > span:first-child:before {
  content: none;
}

article > p, section > p {
  width: 94%;
  margin: 24px auto;
  max-width: 1120px;
  margin: 0 auto;
}

p {
  padding: 16px 0;
  line-height: 1.8;
}

#plain main {
  background: none;
  margin-top: 0;
  min-height: unset;
  padding: 0;
  position: static;
}
#plain main::before {
  content: none;
}

#gnav {
  position: relative;
  z-index: 2;
}
@media (max-width: 979px) {
  #gnav {
    position: fixed;
    top: 0;
    left: 0;
    background: #d2ebb2;
    width: 100%;
    height: 100vh;
    padding-top: 54px;
    transform: translateX(100%);
    transition: all 0.2s ease-in-out;
  }
}
@media (max-width: 979px) {
  #gnav #trialbtn {
    display: none;
  }
}
#gnav .course {
  margin-top: 16px;
  margin-left: 16px;
  background: url(/image/layout/side/carpet.webp) no-repeat left bottom/100%;
  padding: 8px 16px;
}
@media (max-width: 979px) {
  #gnav .course {
    background: none;
    margin-top: 0;
    margin-left: 0;
    padding: 0;
  }
}
#gnav .course dt {
  font-family: "youko";
  border-bottom: 2px dashed rgba(116, 102, 75, 0.6);
  text-align: center;
  padding-bottom: 4px;
  font-size: 1.2rem;
}
@media (max-width: 979px) {
  #gnav .course dt {
    font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "Meiryo", "メイリオ", "Helvetica", "Arial", sans-serif;
    border-bottom: 1px solid #d8d0c1;
    padding: 12px 16px;
    text-align: left;
    font-size: 1rem;
    background: #fffbb4;
  }
  #gnav .course dt::before {
    content: "\f303";
    font-family: "Font Awesome 5 Free";
    line-height: 1;
    padding: 0 4px;
    font-weight: 900;
    margin-right: 8px;
  }
}
#gnav .course ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 8px;
}
@media (max-width: 979px) {
  #gnav .course ul {
    padding: 0;
  }
}
#gnav .course li {
  width: 50%;
}
@media (max-width: 979px) {
  #gnav .course li {
    border-bottom: 1px solid #d8d0c1;
  }
  #gnav .course li:nth-of-type(odd) {
    border-right: 1px solid #d8d0c1;
  }
}
#gnav .course a {
  display: block;
  font-weight: bold;
  padding: 4px 0;
}
@media (max-width: 979px) {
  #gnav .course a {
    position: relative;
    padding: 16px;
    background: #ffffe9;
    font-weight: normal;
    color: #362a14;
    font-size: 0.96rem;
  }
}
#gnav .course a::before {
  content: "\f138";
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
  color: #362a14;
  font-size: 0.8em;
}
@media (max-width: 979px) {
  #gnav .course a::before {
    content: "\f054";
    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.8rem;
    z-index: 2;
  }
}
#gnav .postit {
  padding-left: 16px;
  margin-top: 32px;
}
@media (max-width: 979px) {
  #gnav .postit {
    padding-left: 0;
    margin-top: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}
#gnav .postit > li {
  background: rgba(51, 51, 51, 0.2);
  box-shadow: 0px 0px 2px rgba(51, 51, 51, 0.2);
  margin-top: 24px;
  position: relative;
}
@media (max-width: 979px) {
  #gnav .postit > li {
    background: none;
    box-shadow: 0px 0px 0px transparent;
    margin-top: 0;
    width: 50%;
    border-bottom: 1px solid #d8d0c1;
  }
  #gnav .postit > li:nth-of-type(odd) {
    border-right: 1px solid #d8d0c1;
  }
}
#gnav .postit > li:nth-of-type(even) {
  transform: translateX(8px);
}
@media (max-width: 979px) {
  #gnav .postit > li:nth-of-type(even) {
    transform: translateX(0);
  }
}
#gnav .postit > li > a {
  display: block;
  line-height: 1;
  color: #362a14;
  font-size: 1.4rem;
  font-weight: bold;
}
@media (max-width: 979px) {
  #gnav .postit > li > a {
    position: relative;
    padding: 16px;
    background: #ffffe9;
    font-weight: normal;
    color: #362a14;
    font-size: 0.96rem;
  }
}
#gnav .postit > li > a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(/image/layout/side/postit.webp);
  transform: rotate(-2deg);
  transform-origin: left top;
}
@media (max-width: 979px) {
  #gnav .postit > li > a::after {
    background: none;
    width: auto;
    height: auto;
    left: auto;
    transform: rotate(0);
    content: "\f054";
    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.8rem;
    z-index: 2;
  }
}
#gnav .postit > li > a:hover {
  color: #2ca12c;
  background: url(/image/layout/side/postit.webp);
}
#gnav .postit > li > a:hover i {
  transform: rotate(0);
}
#gnav .postit > li > a:hover::after {
  background: none;
}
#gnav .postit > li > a i {
  position: relative;
  font-family: "youko";
  z-index: 1;
  display: block;
  transform: rotate(-2deg);
  transform-origin: left top;
}
@media (max-width: 979px) {
  #gnav .postit > li > a i {
    font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "Meiryo", "メイリオ", "Helvetica", "Arial", sans-serif;
    transform: rotate(0);
  }
}
#gnav .postit > li > a i::before {
  content: "\f0da";
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
  font-size: 1.4rem;
  display: inline-block;
  margin-right: 8px;
  padding: 12px 8px;
  color: white;
  background: #2ca12c;
  z-index: 2;
}
@media (max-width: 979px) {
  #gnav .postit > li > a i::before {
    content: none;
  }
}
#gnav .postit > li > a span {
  display: none;
}
@media (max-width: 979px) {
  #gnav .postit > li > a span {
    display: inline-block;
  }
}
#gnav .postit > li > a small {
  display: inline-block;
}
@media (max-width: 979px) {
  #gnav .postit > li > a small {
    display: none;
  }
}
#gnav .sub {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  width: 300px;
  background: #ffffe9;
  border: 4px solid #2ca12c;
  border-radius: 12px;
  padding: 8px;
  transform: translateX(8px);
}
#gnav .sub::before {
  content: "";
  display: block;
  width: 16px;
  height: 24px;
  background: #2ca12c;
  position: absolute;
  top: 8px;
  right: 100%;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
#gnav .sub li {
  padding: 4px;
}
#gnav .sub li::before {
  content: "\f138";
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
  color: #362a14;
  font-size: 0.8em;
  display: inline-block;
  transform: translateY(-2px);
}
#gnav .sub dt {
  font-weight: bold;
  border-bottom: 1px dashed #362a14;
}
#gnav .sub dd {
  padding: 8px 0 16px;
}
#gnav div.title {
  display: none;
}
@media (max-width: 979px) {
  #gnav div.title {
    display: block;
    font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "Meiryo", "メイリオ", "Helvetica", "Arial", sans-serif;
    border-bottom: 1px solid #d8d0c1;
    padding: 12px 16px;
    text-align: left;
    font-size: 1rem;
    background: #fffbb4;
  }
  #gnav div.title::before {
    content: "\f4d8";
    font-family: "Font Awesome 5 Free";
    line-height: 1;
    padding: 0 4px;
    font-weight: 900;
    margin-right: 8px;
  }
}
#gnav .closebtn {
  display: none;
}
@media (max-width: 979px) {
  #gnav .closebtn {
    display: block;
    text-align: center;
    padding-top: 32px;
  }
}
#gnav .closebtn span {
  display: inline-block;
  background: white;
  border-radius: 6px;
  padding: 16px 64px;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
}
#gnav .closebtn span::before {
  content: "\f00d";
  font-family: "Font Awesome 5 Free";
  line-height: 1;
  padding: 0 4px;
  font-weight: 900;
  color: red;
}

#floatbtn {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 64px;
  padding-top: 16px;
  position: sticky;
  top: 0;
}
@media (max-width: 979px) {
  #floatbtn {
    display: none;
  }
}
#floatbtn a {
  display: block;
  margin: 4px;
}

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);
}/*# sourceMappingURL=base.css.map */