@charset "UTF-8";
@font-face {
  font-family: "myself";
  src: url("/scss/fonts/myself.eot");
  src: url("/scss/fonts/myself.eot#iefix") format("embedded-opentype"), url("/scss/fonts/myself.woff") format("woff"), url("/scss/fonts/myself.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, main,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
  min-height: 0;
  min-width: 0;
}

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

ol, ul {
  list-style: none;
}

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

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

pre {
  white-space: pre-wrap;
}

a {
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  color: #005799;
}
a:hover {
  color: #ef7e17;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.8;
  color: #675042;
  background: url(/image/common/bg.webp);
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  text-justify: inter-ideograph;
}
body.fixed {
  overflow-y: hidden;
}
body.fixed #overlay {
  display: block;
}
@media (max-width: 640px) {
  body {
    font-size: 16px;
    font-size: 1rem;
  }
}

main {
  margin-left: 280px;
}
@media (max-width: 1024px) {
  main {
    margin-left: 0;
  }
}

.stage {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  margin: 64px auto;
  background: white;
  padding: 32px 0;
  border-radius: 12px;
}
@media (max-width: 640px) {
  .stage {
    width: 100%;
    margin-top: 32px;
  }
}
.stage section {
  margin-top: 64px;
}
.stage section:first-child {
  margin-top: 0;
}
.stage h2 + .section, .stage h3 + .section {
  margin-top: 0;
}
.stage.ontop {
  padding-top: 32px;
}
.stage.ontop > .bnr:first-child {
  margin-top: 0;
}
.stage.notop {
  padding-top: 0;
  overflow: hidden;
}
.stage.parts {
  padding: 32px 64px;
}

article.stage {
  margin-top: 0;
  margin-bottom: 128px;
  position: relative;
  top: 64px;
}

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

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

#bread {
  font-size: 12px;
  font-size: 0.75rem;
  background: white;
  line-height: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
#bread span:first-child a {
  padding-left: 8px;
}
#bread span:first-child a::before {
  content: none;
}
#bread span:last-child {
  padding: 4px 8px 4px 16px;
  min-height: 24px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
#bread a {
  color: white;
  background: #005799;
  padding-left: 16px;
  padding-right: 8px;
  position: relative;
  height: 24px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
#bread a::before, #bread a::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 8px;
  border-color: transparent;
  position: absolute;
}
#bread a::before {
  top: 0;
  left: 2px;
  z-index: 1;
  border-left-color: white;
}
#bread a::after {
  top: 0;
  left: 100%;
  z-index: 2;
  border-left-color: #005799;
}

#teltrial {
  display: none;
}
#teltrial > div {
  text-align: center;
}
#teltrial a {
  display: block;
  margin: 16px;
  position: relative;
  border-radius: 12px;
  padding: 16px;
  padding-left: 56px;
  line-height: 1.4;
  color: white;
}
#teltrial a.tel_inquiry {
  background: #ef7e17;
}
#teltrial a.tel_member {
  background: #005799;
}
#teltrial a i {
  font-size: 30px;
  font-size: 1.875rem;
  position: absolute;
  line-height: 1;
  top: calc(50% - 0.5em);
  left: 16px;
}
#teltrial.fancybox-content {
  padding: 32px 0 16px;
  border-radius: 12px;
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 8;
  display: none;
}

.mainimg {
  text-align: center;
}

.grecaptcha-badge {
  visibility: hidden;
}

.hidenav #snav, .hidenav #logoarea, .hidenav #bread, .hidenav footer {
  display: none;
}
.hidenav main, .hidenav #copy {
  margin-left: 0;
}

a.call {
  pointer-events: none;
}
@media (max-width: 640px) {
  a.call {
    pointer-events: auto;
  }
}

#logoarea {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 12;
  width: 280px;
  background: white;
  border-bottom: 1px solid rgba(178, 167, 160, 0.6);
  display: grid;
  grid-template-areas: "logoTarget" "logoImg" "logoTel";
  height: 184px;
  grid-template-rows: auto auto 1fr;
}
@media (max-width: 1024px) {
  #logoarea {
    position: sticky;
    width: 100%;
    height: 76px;
    grid-template-areas: "logoTarget logoMenu" "logoImg logoMenu";
    grid-template-columns: 1fr 64px;
  }
}
#logoarea #logo {
  grid-area: logoImg;
  padding: 8px;
}
#logoarea #logo img {
  max-height: 100%;
}
#logoarea .going_target {
  grid-area: logoTarget;
  max-width: none;
  width: auto;
  width: 100%;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1;
  padding: 0;
}
@media (max-width: 1024px) {
  #logoarea .going_target {
    display: flex;
  }
}
#logoarea .going_target em, #logoarea .going_target i, #logoarea .going_target span {
  display: block;
  text-align: center;
  padding: 4px;
}
#logoarea .going_target em, #logoarea .going_target span {
  background: #ef7e17;
  color: white;
}
@media (max-width: 1024px) {
  #logoarea .going_target em {
    display: none;
  }
}
#logoarea .going_target span {
  display: none;
}
@media (max-width: 1024px) {
  #logoarea .going_target span {
    display: block;
  }
}
#logoarea .going_target i {
  background: #fff570;
  color: black;
  flex: 1;
}
#logoarea .tel {
  grid-area: logoTel;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
@media (max-width: 1024px) {
  #logoarea .tel {
    display: none;
  }
}
#logoarea .tel img {
  width: 80%;
}
#logoarea #menuopen {
  grid-area: logoMenu;
  background: #52a7cc;
  display: none;
  line-height: 1;
}
@media (max-width: 1024px) {
  #logoarea #menuopen {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
}
#logoarea #menuopen i, #logoarea #menuopen em {
  font-size: 12px;
  font-size: 0.75rem;
  color: white;
  display: block;
  padding-top: 2px;
}
#logoarea #menuopen em {
  display: none;
}
#logoarea #menuopen span {
  display: block;
  width: 48%;
  height: 2px;
  background: white;
  position: relative;
  margin: 12px 0;
  transition: all 0.2s ease-in-out;
}
#logoarea #menuopen span:before, #logoarea #menuopen span:after {
  content: "";
  width: 100%;
  height: 2px;
  background: white;
  position: absolute;
  left: 0;
  transition: all 0.2s ease-in-out;
}
#logoarea #menuopen span:before {
  top: -7px;
}
#logoarea #menuopen span:after {
  bottom: -7px;
}
#logoarea #menuopen.active i {
  display: none;
}
#logoarea #menuopen.active em {
  display: block;
}
#logoarea #menuopen.active span {
  background: rgba(255, 255, 255, 0);
}
#logoarea #menuopen.active span:before {
  top: 0;
  transform: rotate(45deg);
}
#logoarea #menuopen.active span:after {
  bottom: 0;
  transform: rotate(-45deg);
}

#snav {
  width: 280px;
  height: 100vh;
  padding-top: 184px;
  background: white;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 11;
  padding-bottom: 64px;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
}
@media (max-width: 1024px) {
  #snav {
    padding-top: 0;
    position: fixed;
    height: auto;
    left: auto;
    right: 0;
    top: 0;
    width: 360px;
    height: 100dvh;
    padding: 76px 0 128px;
    overflow-y: auto;
    box-shadow: 0px 1px 3px rgba(103, 80, 66, 0.2);
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    transform: translateX(110%);
  }
  #snav.open {
    transform: translateX(0);
  }
}
@media (max-width: 640px) {
  #snav {
    width: 100%;
  }
}
#snav a {
  display: block;
  font-size: 16px;
  font-size: 1rem;
  color: #675042;
  position: relative;
}
#snav a::after {
  content: "\f054";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  padding-right: 0em;
  line-height: 1;
  font-size: 10px;
  font-size: 0.625rem;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.2s ease-in-out;
  color: #756154;
}
#snav a:hover {
  background: #fcf6db;
}
#snav a:hover::after {
  right: 8px;
}
#snav .actionbtn {
  margin-top: 16px;
}
#snav .actionbtn li {
  text-align: center;
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  margin: 0 auto;
  padding: 4px;
}
#snav .actionbtn a {
  border-radius: 12px;
  border: 3px solid white;
  box-shadow: 0 0 3px rgba(103, 80, 66, 0.3);
  padding: 12px 16px;
  font-weight: bold;
  font-size: 15px;
  font-size: 0.9375rem;
  position: relative;
}
#snav .actionbtn a.trial {
  background: #fff570;
}
#snav .actionbtn a.form {
  background: #ef7e17;
  color: white;
}
#snav .actionbtn a.form::after {
  color: white;
}
#snav .actionbtn a.contact {
  background: #908075;
  color: white;
}
#snav .actionbtn a.contact::after {
  color: white;
}
#snav .otherlink {
  border-top: 1px solid white;
  margin-top: 16px;
}
#snav .otherlink li {
  border-bottom: 1px solid white;
}
#snav .otherlink a {
  background: #f4f2f1;
  padding: 12px;
}
#snav .close {
  display: none;
}
@media (max-width: 1024px) {
  #snav .close {
    display: block;
    text-align: center;
    margin-top: 16px;
  }
  #snav .close span {
    display: inline-block;
    background: #005799;
    color: white;
    border-radius: 12px;
    padding: 0.6em 2.4em;
    cursor: pointer;
  }
  #snav .close span i {
    margin-right: 0.6em;
  }
}

@media (max-width: 640px) {
  .gnav {
    display: none;
  }
}
.gnav a, .gnav span {
  display: block;
  padding: 14px 16px 14px 8px;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.4;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  position: relative;
  color: #675042;
  position: relative;
}
.gnav a::after, .gnav span::after {
  content: "\f054";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  padding-right: 0em;
  line-height: 1;
  font-size: 10px;
  font-size: 0.625rem;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.2s ease-in-out;
  color: #756154;
}
.gnav a:hover, .gnav span:hover {
  background: #fcf6db;
}
.gnav a img, .gnav span img {
  margin-right: 8px;
}
.gnav a i, .gnav span i {
  font-size: 22px;
  font-size: 1.375rem;
  display: inline-block;
  text-align: center;
  width: 40px;
  color: #ef7e17;
}
.gnav a:hover::after {
  right: 8px;
}
.gnav .haschild > span::after {
  content: "+";
}
.gnav .haschild > span.open span::after {
  content: "\f068";
}
.gnav .childnav {
  background: #fe9;
  display: none;
}
.gnav .childnav li {
  border-bottom: 1px solid white;
}
.gnav .childnav a {
  padding-left: 24px;
}
.gnav .cambnr a img {
  margin-right: 0;
}

.cambnr {
  display: none;
}
@media (max-width: 640px) {
  .cambnr {
    display: block;
  }
  .cambnr a {
    padding: 0;
  }
  .cambnr a::after {
    content: none;
  }
}

.gnavsp {
  display: none;
}
@media (max-width: 640px) {
  .gnavsp {
    display: block;
  }
}
.gnavsp dt {
  background: #fe9;
  padding: 8px 16px;
  border-bottom: 1px solid #b2a7a0;
  font-size: 16px;
  font-size: 1rem;
}
.gnavsp dd ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.gnavsp dd li {
  width: 50%;
}
.gnavsp dd li:nth-of-type(odd) {
  border-right: 1px solid #b2a7a0;
}
.gnavsp dd a {
  background: #fcf6db;
}
.gnavsp li {
  border-bottom: 1px solid #b2a7a0;
}
.gnavsp a {
  background: #fe9;
  padding: 16px;
}

footer {
  margin-left: 280px;
  background: white;
  border-top: 3px solid #ef7e17;
  line-height: 1.4;
  padding-bottom: 16px;
  font-size: 16px;
  font-size: 1rem;
}
@media (max-width: 1024px) {
  footer {
    margin-left: 0;
    padding-top: 0;
  }
}
footer nav {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
footer nav dl {
  width: 25%;
  padding: 8px;
}
footer nav dl a {
  color: #675042;
}
footer nav dt {
  border-left: 6px solid #ef7e17;
  font-weight: bold;
  padding-left: 8px;
  margin-bottom: 8px;
}
footer nav dd {
  padding-bottom: 24px;
}
footer nav dd a {
  display: block;
  color: #675042;
  padding: 0 8px;
  font-size: 15px;
  font-size: 0.9375rem;
  margin-top: 6px;
}
footer .infomation {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
footer address {
  font-size: 15px;
  font-size: 0.9375rem;
  padding: 8px 0;
  font-style: normal;
}
@media (max-width: 640px) {
  footer address {
    padding: 0 16px;
  }
}
footer .enquete {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
footer .enquete li {
  padding: 4px;
}
footer .enquete li:last-child a {
  background: rgb(47.8126582278, 150.9873417722, 139.6632911392);
  border-color: rgb(28.1873417722, 89.0126582278, 82.3367088608);
}
footer .enquete a {
  display: block;
  padding: 12px 24px;
  border-radius: 12px;
  text-align: center;
  background: #005799;
  color: white;
  border: 1px solid rgb(0, 63.8, 112.2);
  font-size: 16px;
  font-size: 1rem;
}
footer .navlist {
  display: none;
}
footer .entrybox > div {
  padding: 32px 0;
}
footer .entrybox > div:last-child {
  background: #e8f4f9;
}
footer .entrybox dt, footer .entrybox dd {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  margin: 0 auto;
}
footer .entrybox dt {
  font-weight: bold;
  font-size: 18px;
  font-size: 1.125rem;
}
footer .entrybox dd {
  padding: 16px 0;
}
footer .entrybox dd div {
  margin-top: 16px;
}
footer .about {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  margin-top: 0;
}
footer .about li {
  border-bottom: 1px dotted #675042;
}
footer .about a {
  display: block;
  padding: 16px;
  color: #675042;
  font-size: 15px;
  font-size: 0.9375rem;
}

#copy {
  text-align: center;
  background: white;
  font-size: 14px;
  font-size: 0.875rem;
  padding: 32px 0 16px;
  max-width: none;
  width: auto;
  margin-left: 280px;
}
@media (max-width: 1024px) {
  #copy {
    margin-left: 0;
    padding-bottom: 72px;
  }
}

#fixdevise {
  display: none;
}
@media (max-width: 1024px) {
  #fixdevise {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 7;
    background: white;
    width: 100%;
    padding: 8px 4px;
    box-shadow: 0 -1px 3px rgba(103, 80, 66, 0.2);
    line-height: 1;
  }
}
#fixdevise ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
#fixdevise li {
  flex: 1;
  padding: 0 4px;
}
@media (max-width: 640px) {
  #fixdevise li.tel {
    flex: none;
    width: 64px;
  }
  #fixdevise li.tel span {
    display: none;
  }
}
#fixdevise li.tel a {
  border-color: #005799;
}
#fixdevise li.trial a {
  color: white;
  border-color: #ef7e17;
  background: #ef7e17;
  flex-direction: column;
  justify-content: center;
  font-size: 1.1em;
}
#fixdevise a {
  height: 52px;
  text-align: center;
  border-radius: 12px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  border: 2px solid transparent;
  padding: 0 8px;
}
#fixdevise a i {
  text-align: center;
  font-size: 12px;
  font-size: 0.75rem;
}
#fixdevise a i::before {
  display: block;
  font-size: 22px;
  font-size: 1.375rem;
  color: #675042;
  margin-bottom: 4px;
}
#fixdevise a small {
  font-size: 14px;
  font-size: 0.875rem;
  display: block;
  margin-top: 2px;
}
#fixdevise a em {
  font-size: 18px;
  font-size: 1.125rem;
}
#fixdevise a span {
  flex: 1;
}
@media (max-width: 640px) {
  #fixdevise.trialpage li.tel {
    flex: 1;
    width: auto;
  }
}
#fixdevise.trialpage li.tel a {
  border-color: #ef7e17;
  background: #ef7e17;
}
#fixdevise.trialpage li.line a {
  border-color: #3cb900;
  background: #3cb900;
}
#fixdevise.trialpage li.form a {
  border-color: #005799;
  background: #005799;
}
#fixdevise.trialpage a {
  height: 40px;
  justify-content: center;
  color: white;
}
#fixdevise.trialpage a i {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  justify-content: center;
}
#fixdevise.trialpage a i::before {
  margin-right: 4px;
  font-size: 24px;
  font-size: 1.5rem;
  color: white;
  margin-bottom: 0;
}

#totop {
  position: fixed;
  right: 1%;
  bottom: -230px;
  animation: none;
  transition: all 0.2s ease-in-out;
  z-index: 6;
}
#totop.show {
  bottom: -98px;
}
@media (max-width: 640px) {
  #totop.show {
    bottom: -64px;
  }
}
#totop a {
  display: block;
  animation: none;
}
#totop a:hover {
  animation: totop_hover 0.1s infinite;
}
@media (max-width: 640px) {
  #totop a:hover {
    animation: none;
  }
}
#totop.push {
  animation: totop_push 0.6s cubic-bezier(0.3, 0, 1, 0.3) backwards;
}
@media (max-width: 640px) {
  #totop.push {
    animation: totop_pushsp 0.6s cubic-bezier(0.3, 0, 1, 0.3) backwards;
  }
}

@keyframes totop_hover {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-1px);
  }
}
@keyframes totop_push {
  0% {
    bottom: -98px;
  }
  100% {
    bottom: 120%;
  }
}
@keyframes totop_pushsp {
  0% {
    bottom: -64px;
  }
  100% {
    bottom: 120%;
  }
}
#line-popup {
  max-width: 460px;
  margin: 0 auto;
  border-radius: 12px;
}
#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: 640px) {
  #line-popup .title-box {
    padding: 32px 16px;
  }
}
#line-popup .title-box i {
  color: white;
  font-size: 64px;
  font-size: 4rem;
  margin-right: 16px;
}
#line-popup .title-box p {
  flex: 1;
  color: white;
  font-weight: bold;
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.2;
}
#line-popup form {
  padding: 32px;
  text-align: center;
}
@media (max-width: 640px) {
  #line-popup form {
    padding: 32px 16px;
  }
}
#line-popup .small {
  text-align: left;
}
#line-popup .title {
  margin: 0 0 16px;
  font-weight: bold;
  padding: 0;
}
#line-popup input[type=tel] {
  border-radius: 12px;
  font-size: 16px;
  font-size: 1rem;
  padding: 0.6em;
  width: 12em;
  border: 1px solid #00b900;
  transition: all 0.2s ease-in-out;
  outline: none;
}
@media (max-width: 640px) {
  #line-popup input[type=tel] {
    width: 8em;
  }
}
#line-popup button {
  outline: none;
  font-size: 16px;
  font-size: 1rem;
  border-radius: 12px;
  padding: 0.6em 1.2em;
  cursor: pointer;
}
@media (max-width: 640px) {
  #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: 0;
  font-weight: bold;
}
#line-popup span.message {
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  color: red;
  font-weight: bold;
}

h1, h2, h3, h4, h5 {
  line-height: 1.4;
}

.title-flag {
  background: url(/image/common/head_bg.webp) repeat-x bottom;
  font-size: 18px;
  font-size: 1.125rem;
  text-align: center;
  padding-top: 16px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  line-height: 1.4;
  font-weight: bold;
}
@media (max-width: 640px) {
  .title-flag {
    font-size: 16px;
    font-size: 1rem;
    margin-bottom: 4px;
  }
}

.title-info01, .title-info02, .title-info03, .title-info04 {
  width: 100%;
  max-width: 1024px;
  margin: 32px auto;
  font-weight: bold;
  line-height: 1.4;
}
.title-info01 + p, .title-info02 + p, .title-info03 + p, .title-info04 + p {
  padding-top: 0;
}

.title-info01 {
  margin-bottom: 32px;
  padding-bottom: 16px;
  position: relative;
  font-size: 32px;
  font-size: 2rem;
  text-align: center;
}
@media (max-width: 640px) {
  .title-info01 {
    font-size: 26px;
    font-size: 1.625rem;
  }
}
.title-info01:after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  background: #52a7cc;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.title-info01 small {
  display: block;
  font-size: 18px;
  font-size: 1.125rem;
}

.title-info02 {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  padding: 16px 24px;
  position: relative;
  font-size: 26px;
  font-size: 1.625rem;
}
@media (max-width: 640px) {
  .title-info02 {
    font-size: 20px;
    font-size: 1.25rem;
  }
}
.title-info02::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background-image: repeating-linear-gradient(-45deg, #005799, #52a7cc 2px, transparent 1px, transparent 4px);
}
.title-info02 img {
  display: block;
}
.title-info02 small {
  display: block;
  font-size: 16px;
  font-size: 1rem;
  font-weight: normal;
}

.title-info03 {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  font-size: 22px;
  font-size: 1.375rem;
  position: relative;
  padding: 32px 16px 0 24px;
  background: url(/image/common/headline/info03-blue.webp) no-repeat left top;
  min-height: 56px;
}
.title-info03.yellow {
  background-image: url(/image/common/headline/info03-yellow.webp);
  color: #675042;
}

.title-post01, .title-post02, .title-post03, .title-post04, .title-post05 {
  width: 100%;
  max-width: 1024px;
  margin: 32px auto;
  line-height: 1.4;
  font-weight: bold;
}
.title-post01 + p, .title-post02 + p, .title-post03 + p, .title-post04 + p, .title-post05 + p {
  padding-top: 0;
}

.title-post01 {
  background: url(/image/common/headline/post01_head.webp) repeat-x top, url(/image/common/headline/post01_foot.webp) repeat-x bottom;
  font-size: 24px;
  font-size: 1.5rem;
  text-align: center;
  padding: 28px 20px;
}
@media (max-width: 640px) {
  .title-post01 {
    font-size: 22px;
    font-size: 1.375rem;
    padding: 24px 16px;
    text-align: left;
  }
}

.title-post02 {
  background: url(/image/common/headline/post02_bg.webp);
  font-size: 22px;
  font-size: 1.375rem;
  padding: 20px 8px 16px 56px;
  position: relative;
}
.title-post02::before {
  content: url(/image/common/headline/post02_img.webp);
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
}
@media (max-width: 640px) {
  .title-post02 {
    font-size: 20px;
    font-size: 1.25rem;
    text-align: left;
  }
}

.title-post03 {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  color: #ef7e17;
  font-size: 20px;
  font-size: 1.25rem;
  padding: 0.8em;
  background: url(/image/common/headline/post03_bg.webp) repeat-x bottom;
}
@media (max-width: 640px) {
  .title-post03 {
    font-size: 18px;
    font-size: 1.125rem;
  }
}

.title-post04 {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  margin: 0 auto;
  font-size: 20px;
  font-size: 1.25rem;
}
.title-post04::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background: #ef7e17;
  position: relative;
  top: 2px;
  margin-right: 4px;
}
@media (max-width: 640px) {
  .title-post04 {
    font-size: 18px;
    font-size: 1.125rem;
    padding-left: 8px;
  }
}

.title-head {
  font-size: 22px;
  font-size: 1.375rem;
  padding: 4px 16px;
  line-height: 1.4;
  font-weight: bold;
  background: #fe9;
  text-align: center;
}
@media (max-width: 640px) {
  .title-head {
    font-size: 16px;
    font-size: 1rem;
    text-align: left;
  }
}

.title-guts {
  display: inline-block;
  max-width: calc(94% - 100px);
  margin-left: calc(100px + 3%);
  font-weight: bold;
  background: #fee7d1;
  position: relative;
  padding: 16px 32px;
  border-radius: 12px;
  font-size: 22px;
  font-size: 1.375rem;
}
@media (max-width: 640px) {
  .title-guts {
    font-size: 20px;
    font-size: 1.25rem;
    padding: 16px;
  }
}
.title-guts small {
  display: block;
}
.title-guts::before {
  content: "";
  position: absolute;
  right: calc(100% + 8px);
  bottom: 0;
  transform: translateY(16%);
  width: 100px;
  height: 160px;
  background: url(/image/common/headline/guts/init.webp) no-repeat center/contain;
}
@media (max-width: 640px) {
  .title-guts::before {
    width: 80px;
    height: 128px;
  }
}
.title-guts::after {
  content: "";
  display: block;
  width: 16px;
  height: 24px;
  background: #fee7d1;
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

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

.right {
  text-align: right;
}

.left {
  text-align: left;
}

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

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

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

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

@media (max-width: 640px) {
  .big {
    font-size: 1.1em;
  }
  .bigger {
    font-size: 1.2em;
  }
  .biggest {
    font-size: 1.3em;
  }
  .small, small {
    font-size: 0.9em;
  }
}
/* weight -----------
----------------------------- */
em, i {
  font-style: normal;
}

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

.normal {
  font-weight: normal;
}

/* color -----------
----------------------------- */
.blue {
  color: #005799;
  font-weight: bold;
}

.orange {
  color: #ef7e17;
  font-weight: bold;
}

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

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

/* pen -----------
----------------------------- */
.penline {
  background: url(/image/common/line/penline.webp) repeat-x left bottom;
  font-weight: bold;
}

.pen {
  font-weight: bold;
  background: repeating-linear-gradient(#fff570, #fff570) 0 100%/0 10px no-repeat;
  transition: all 0.6s ease-in-out;
}
.pen.active {
  background-size: 100% 10px;
}

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

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

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

[class^=outline-], [class*=" outline-"] {
  color: white;
  border-radius: 4px;
  padding: 0 0.4em;
  background-color: #675042;
}

.outline-brown {
  background-color: #675042;
}

.outline-green {
  background-color: #005799;
}

.outline-red {
  background-color: #ef7e17;
}

.outline-blue {
  background-color: #005799;
}

hr {
  border: none;
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
}
hr.lineblank {
  padding: 32px 0;
}
hr.dash-brown {
  background: url(/image/common/line/dash-brown.webp) repeat-x left center;
  min-height: 16px;
}

.text-sideline {
  text-align: center;
  font-size: 20px;
  font-size: 1.25rem;
  color: #ef7e17;
  font-weight: bold;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .text-sideline {
    display: block;
    position: relative;
    z-index: 1;
    padding-bottom: 10px;
    text-align: left;
  }
}
.text-sideline::before, .text-sideline::after {
  content: "|";
  display: inline-block;
  font-size: 1.2em;
  color: #756154;
}
.text-sideline::before {
  transform: rotate(-20deg);
  margin-right: 1em;
}
@media (max-width: 640px) {
  .text-sideline::before {
    content: "";
    margin-left: 0;
    transform: rotate(0);
    display: block;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 10px;
    background-image: repeating-linear-gradient(transparent, transparent 10%, #fff570 70%, #fff570);
    z-index: 1;
  }
}
.text-sideline::after {
  transform: rotate(20deg);
  margin-left: 1em;
}
@media (max-width: 640px) {
  .text-sideline::after {
    content: none;
  }
}

.text_logo::before {
  content: url(/image/common/logo.svg);
  display: inline-block;
  width: 240px;
}

p {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  max-width: 800px;
  margin: 0 auto;
  padding: 16px 0;
}

.maxwidth {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  max-width: 1024px;
}

.boxwidth {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  max-width: 800px;
}

.bnr {
  text-align: center;
  margin: 32px 0;
}
@media (max-width: 640px) {
  .bnr {
    margin: 32px 8px;
  }
}
@media (max-width: 640px) {
  .bnr.mid img {
    max-width: 54%;
  }
}

[class^=box-], [class*=" box-"] {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  padding: 16px;
}
[class^=box-] p, [class^=box-] .tri,
[class^=box-] .img-right.img-right, [class^=box-] .img-left.img-left, [class^=box-] .disc.disc, [class^=box-] .decimal.decimal,
[class^=box-] .list-star.list-star, [class^=box-] .imgbox.imgbox, [class^=box-] .list-check.list-check,
[class^=box-] .checkdl.checkdl, [class*=" box-"] p, [class*=" box-"] .tri,
[class*=" box-"] .img-right.img-right, [class*=" box-"] .img-left.img-left, [class*=" box-"] .disc.disc, [class*=" box-"] .decimal.decimal,
[class*=" box-"] .list-star.list-star, [class*=" box-"] .imgbox.imgbox, [class*=" box-"] .list-check.list-check,
[class*=" box-"] .checkdl.checkdl {
  width: auto;
}

.box-memo {
  border-top: solid 10px #f3a45b;
  box-shadow: 0px 2px 2px rgba(103, 80, 66, 0.2);
}
.box-memo .title {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  line-height: 1.4;
}
.box-memo .title p {
  flex: 1;
  max-width: none;
  width: auto;
  padding: 0;
}

.box-shadow {
  padding: 32px;
  background: url(/image/parts/box-shadow/bg.webp) center top;
  border-radius: 12px;
  position: relative;
}
.box-shadow * {
  position: relative;
  z-index: 2;
}
.box-shadow::before {
  content: "";
  display: block;
  background: white;
  border-radius: 12px;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
}
@media (max-width: 640px) {
  .box-shadow::before {
    width: calc(100% - 24px);
    height: calc(100% - 24px);
    top: 12px;
    left: 12px;
  }
}
.box-shadow.imgbox {
  max-width: 1024px;
}
.box-shadow.img {
  max-width: 1024px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
@media (max-width: 640px) {
  .box-shadow.img {
    flex-direction: column;
  }
}
.box-shadow.img > img, .box-shadow.img > picture {
  max-width: 42%;
  margin: 12px;
}
@media (max-width: 640px) {
  .box-shadow.img > img, .box-shadow.img > picture {
    max-width: 80%;
    margin: 12px auto;
  }
}
.box-shadow.img > p, .box-shadow.img > ul, .box-shadow.img > .inbox, .box-shadow.img > div {
  flex: 1;
  max-width: none;
  width: auto;
}

.img-left, .img-right {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
}
.img-left > img, .img-left > picture, .img-right > img, .img-right > picture {
  max-width: 42%;
  margin: 0 16px;
}
.img-left p, .img-left .disc, .img-left .list-star, .img-right p, .img-right .disc, .img-right .list-star {
  width: auto;
}
.img-left p:first-of-type, .img-left .disc:first-of-type, .img-left .list-star:first-of-type, .img-right p:first-of-type, .img-right .disc:first-of-type, .img-right .list-star:first-of-type {
  margin-top: 0;
  padding-top: 0;
}
.img-left p:last-of-type, .img-left .disc:last-of-type, .img-left .list-star:last-of-type, .img-right p:last-of-type, .img-right .disc:last-of-type, .img-right .list-star:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
}
.img-left::after, .img-right::after {
  content: "";
  display: block;
  clear: both;
}
@media (max-width: 640px) {
  .img-left, .img-right {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
  }
  .img-left p, .img-right p {
    max-width: none;
    width: auto;
  }
  .img-left > img, .img-left > picture, .img-right > img, .img-right > picture {
    max-width: 86%;
  }
  .img-left > img, .img-left > picture, .img-right > img, .img-right > picture {
    float: none;
    order: 100;
  }
  .img-left.reverse img, .img-left.reverse picture, .img-right.reverse img, .img-right.reverse picture {
    order: unset;
  }
}

.img-left > img, .img-left > picture {
  float: left;
}
@media (max-width: 640px) {
  .img-left.side > img, .img-left.side > picture {
    float: left;
  }
}

.img-right > img, .img-right > picture {
  float: right;
}
@media (max-width: 640px) {
  .img-right.side > img, .img-right.side > picture {
    float: right;
  }
}

.imgbox {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  max-width: 800px;
}
@media (max-width: 640px) {
  .imgbox {
    flex-direction: column;
  }
}
.imgbox > img, .imgbox > picture {
  max-width: 42%;
  margin: 12px;
}
@media (max-width: 640px) {
  .imgbox > img, .imgbox > picture {
    max-width: 80%;
    margin: 12px auto;
  }
  .imgbox > img.reverse, .imgbox > picture.reverse {
    flex-direction: column-reverse;
  }
}
.imgbox > p, .imgbox > ul, .imgbox > .inbox, .imgbox > div {
  flex: 1;
  max-width: none;
  width: auto;
  margin: 0;
}
.imgbox p {
  width: auto;
  padding: 16px;
}
.imgbox p:first-of-type {
  margin-top: 0;
}
.imgbox p:last-of-type {
  margin-bottom: 0;
}
@media (max-width: 640px) {
  .imgbox p {
    margin-top: 0;
    margin-bottom: 32px;
  }
}

.box-ringnote {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  padding: 52px 16px 32px;
  background: url(/image/parts/ringnote/bg.webp) repeat-x center top #fcf6db;
}
@media (max-width: 640px) {
  .box-ringnote {
    padding: 48px 16px 24px;
  }
}
.box-ringnote .flex {
  justify-content: center;
  margin-bottom: 0;
}
.box-ringnote .flex li, .box-ringnote .flex div {
  text-align: center;
  margin-bottom: 0;
}

.box-consul {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  border: 14px solid;
  -o-border-image: url(/image/parts/box-consul/bg.webp) 16 repeat;
     border-image: url(/image/parts/box-consul/bg.webp) 16 repeat;
  background: white;
  padding: 16px 32px;
}

[class^=box-bg-], [class*=" box-bg-"] {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  border-radius: 12px;
  background: #fcf6db;
}

.box-bg-yellow {
  background: #fcf6db;
}

.box-bg-orange {
  background: #fee7d1;
}

.box-bg-blue {
  background: #e8f4f9;
}

.box-bg-white {
  background: white;
}

dl.section dt {
  margin-bottom: 8px;
}
dl.section dd {
  padding-bottom: 64px;
}

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

[class^=box-border-], [class*=" box-border-"] {
  border-radius: 12px;
  border: 3px solid #ef7e17;
}

.box-border-blue {
  border-color: #005799;
}

.box-border-orange {
  border-color: #ef7e17;
}

.box-border-brown {
  border-color: rgb(217.4307692308, 204.3384615385, 196.3692307692);
}

.fancybox-content.fancybox-content {
  max-width: 928px;
  width: 94%;
  padding: 32px;
  border-radius: 12px;
}

.slick-slide {
  padding: 0 8px;
}

#usp_sp {
  display: none;
}
@media (max-width: 750px) {
  #usp_sp {
    display: block;
  }
}

#usp {
  background: white;
  position: relative;
}
@media (max-width: 640px) {
  #usp {
    margin-bottom: -16px;
  }
}
#usp .title {
  width: 60%;
}
@media (max-width: 640px) {
  #usp .title {
    width: 100%;
  }
}
#usp .img {
  position: absolute;
  right: 0;
  top: 0;
  width: 40%;
  height: 100%;
}
@media (min-width: 1620px) {
  #usp .img {
    width: calc(100vw - 280px - 800px);
  }
}
@media (max-width: 640px) {
  #usp .img {
    display: none;
  }
}
#usp .img::after {
  content: "";
  display: block;
  width: calc(100% + 32px);
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background: linear-gradient(45deg, #e26800, #ffee99 80%);
  clip-path: polygon(46% 0, 100% 0, 100% 100%, 0 100%);
  z-index: 1;
}
#usp .img img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}

.usp_note {
  max-width: unset;
  width: auto;
  padding: 4px 16px 0;
  line-height: 1.4;
  font-size: 12px;
  font-size: 0.75rem;
  text-align: right;
  position: absolute;
  bottom: 4px;
  right: 4px;
  z-index: 3;
  background: rgba(255, 255, 255, 0.86);
  border-radius: 4px;
}
@media (max-width: 640px) {
  .usp_note {
    bottom: auto;
    right: auto;
    top: 100%;
    left: 0;
    text-align: left;
    background: none;
  }
}
.usp_note small {
  font-size: 12px;
  font-size: 0.75rem;
}

.usp_attention {
  padding: 0 32px;
}
@media (max-width: 640px) {
  .usp_attention {
    padding: 0 16px;
  }
}
.usp_attention li {
  line-height: 1.4;
  font-size: 22px;
  font-size: 1.375rem;
  margin: 16px 0;
  padding: 0 0 0 24px;
  background: url(/image/content/index/usp/list.webp) no-repeat left 12px;
}
@media (max-width: 640px) {
  .usp_attention li {
    font-size: 18px;
    font-size: 1.125rem;
    background-position: left 6px;
  }
}

.intro-box01 {
  background: url(/image/content/index/usp/bg02.webp);
  text-align: center;
  position: relative;
  padding: 16px 0;
}

.usp-up .title {
  padding-bottom: 8px;
  text-align: center;
}
.usp-up ul {
  display: none;
}
.usp-up ul.slick-initialized {
  display: block;
}

.top-info {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  max-width: 928px;
  background: #fcf6db;
  padding: 8px 16px;
  text-align: left;
  border-radius: 12px;
  border: 3px solid #b2a7a0;
}
.top-info p.title {
  font-weight: bold;
  border-bottom: 2px dashed #675042;
}

.strength a:hover, .course a:hover, .difference a:hover {
  opacity: 0.6;
}
.strength .list-content, .strength .list-course, .course .list-content, .course .list-course, .difference .list-content, .difference .list-course {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.strength .list-content li, .strength .list-course li, .course .list-content li, .course .list-course li, .difference .list-content li, .difference .list-course li {
  width: 33.3333333333%;
}
@media (max-width: 640px) {
  .strength .list-content li, .course .list-content li, .difference .list-content li {
    width: 100%;
    margin-bottom: 4px;
  }
}
.strength .list-course, .course .list-course, .difference .list-course {
  margin-bottom: 0px;
  padding-bottom: 64px;
}

.strength {
  background: white;
  padding-top: 64px;
}

.course {
  background: white;
  padding: 32px 0 8px;
}

.difference {
  background: white;
  padding: 80px 0 32px;
}
@media (max-width: 640px) {
  .difference {
    padding-top: 32px 0;
  }
}

.best3 {
  background: white;
  padding: 64px 0;
}
.best3 .best3-list {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  margin: 0 auto;
  background: #191919;
}
.best3 .best3-list li {
  padding: 16px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  border: 1px solid white;
}
@media (max-width: 640px) {
  .best3 .best3-list li {
    display: block;
  }
}
.best3 .best3-list li .top3 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
.best3 .best3-list li .top3 > img {
  margin-right: 8px;
}
.best3 .best3-list li .bookblock {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.6) inset;
}
@media (max-width: 640px) {
  .best3 .best3-list li .bookblock {
    flex: 1;
  }
}
.best3 .best3-list li:nth-of-type(1) div.open {
  background: url(/image/content/index/best3/no01.webp) no-repeat center/contain;
}
.best3 .best3-list li:nth-of-type(2) div.open {
  background: url(/image/content/index/best3/no02.webp) no-repeat center/contain;
}
.best3 .best3-list li:nth-of-type(3) div.open {
  background: url(/image/content/index/best3/no03.webp) no-repeat center/contain;
}
.best3 .best3-list li a {
  position: relative;
  display: block;
  color: white;
  flex: 1;
  background: #e26800;
  font-weight: bold;
  line-height: 1.4;
  padding: 4px 16px;
  border: 4px solid transparent;
  border-top-color: rgb(242.9483870968, 157.8338709677, 80.2516129032);
  border-left-color: rgb(242.9483870968, 157.8338709677, 80.2516129032);
  border-right-color: rgb(130.5935483871, 66.985483871, 9.0064516129);
  border-bottom-color: rgb(130.5935483871, 66.985483871, 9.0064516129);
  margin-left: 16px;
  transform: scaleX(0);
  transform-origin: left;
}
.best3 .best3-list li a:hover {
  border-width: 2px;
}
@media (max-width: 640px) {
  .best3 .best3-list li a {
    width: 100%;
    margin-left: 0;
    margin-top: 4px;
  }
  .best3 .best3-list li a:hover {
    border-width: 4px;
  }
}
.best3 .best3-list li a::after {
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  padding-right: 0.3em;
  line-height: 1;
  position: absolute;
  right: 16px;
  top: calc(50% - 0.5em);
}
.best3 .best3-list li.open a {
  transform: scaleX(100%);
}

.reccomend {
  background: white;
  padding: 64px 0;
}
.reccomend .headline {
  text-align: center;
  background: url(/image/parts/reccomend/line.webp) no-repeat center;
}
.reccomend .headline img {
  background: white;
  padding: 16px;
}
.reccomend ul {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  margin: 0 auto;
  padding-bottom: 32px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  background: url(/image/parts/reccomend/line.webp) no-repeat center bottom;
}
.reccomend li {
  width: 50%;
  text-align: center;
  padding: 8px;
}
@media (max-width: 640px) {
  .reccomend li {
    width: 100%;
  }
}
.reccomend a img {
  transition: all 0.2s ease-in-out;
}
.reccomend a img:hover {
  filter: brightness(1.1);
}

.tab-section {
  position: relative;
  padding: 32px 0 128px;
  top: 64px;
}
.tab-section:last-child {
  margin-bottom: 64px;
}
.tab-section:nth-of-type(odd) {
  background: white;
}
.tab-section:nth-of-type(odd) h3 {
  background: white;
}
.tab-section h3 {
  position: absolute;
  bottom: 100%;
  left: 10%;
  background: url(/image/common/bg.webp);
  color: #ef7e17;
  font-size: 16px;
  font-size: 1rem;
  padding: 8px 32px;
  border-radius: 12px 12px 0 0;
  font-weight: bold;
}
@media (max-width: 640px) {
  .tab-section h3 {
    font-size: 14px;
    font-size: 0.875rem;
    left: 2%;
  }
}

.balloon {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex-direction: row-reverse;
  align-items: center;
  flex-wrap: nowrap;
}
.balloon > img {
  max-width: 26%;
  flex-shrink: 0;
}
.balloon > p, .balloon > div {
  background: #e8f4f9;
  border-radius: 12px;
  position: relative;
  line-height: 1.4;
  margin: 0 16px 0 0;
}
.balloon > p::after, .balloon > div::after {
  content: "";
  display: block;
  width: 16px;
  height: 24px;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  background: #e8f4f9;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.balloon p {
  max-width: none;
  width: auto;
  padding: 16px 32px;
}
.balloon.yellowbox > p, .balloon.yellowbox > div {
  background: #fff3bc;
}
.balloon.yellowbox > p:after, .balloon.yellowbox > div:after {
  background: #fff3bc;
}
.balloon.pinkbox > p, .balloon.pinkbox > div {
  background: #fee7d1;
}
.balloon.pinkbox > p:after, .balloon.pinkbox > div:after {
  background: #fee7d1;
}
.balloon.leftside {
  flex-direction: row;
}
.balloon.leftside > p, .balloon.leftside > div {
  margin: 0 0 0 16px;
}
.balloon.leftside > p::after, .balloon.leftside > div::after {
  left: auto;
  right: 100%;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.balloon.upside {
  flex-direction: column;
}
.balloon.upside > p, .balloon.upside > div {
  margin: 16px 0 0 0;
}
.balloon.upside > p::after, .balloon.upside > div::after {
  width: 24px;
  height: 16px;
  left: 50%;
  top: auto;
  bottom: 100%;
  transform: translateY(0) translateX(-50%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.balloon.downside {
  flex-direction: column-reverse;
}
.balloon.downside > p, .balloon.downside > div {
  margin: 0 0 16px 0;
}
.balloon.downside > p::after, .balloon.downside > div::after {
  width: 24px;
  height: 16px;
  left: 50%;
  top: 100%;
  transform: translateY(0) translateX(-50%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
@media (max-width: 640px) {
  .balloon.spup {
    flex-direction: column;
  }
  .balloon.spup > p, .balloon.spup > div {
    margin: 16px 0 0 0;
  }
  .balloon.spup > p::after, .balloon.spup > div::after {
    width: 24px;
    height: 16px;
    left: 50%;
    top: auto;
    bottom: 100%;
    transform: translateY(0) translateX(-50%);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
  }
}
@media (max-width: 640px) and (max-width: 640px) {
  .balloon.spup > img {
    max-width: 54%;
  }
}
@media (max-width: 640px) {
  .balloon.spdown {
    flex-direction: column-reverse;
  }
  .balloon.spdown > p, .balloon.spdown > div {
    margin: 0 0 16px 0;
  }
  .balloon.spdown > p::after, .balloon.spdown > div::after {
    width: 24px;
    height: 16px;
    left: 50%;
    top: 100%;
    transform: translateY(0) translateX(-50%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
}
@media (max-width: 640px) and (max-width: 640px) {
  .balloon.spdown > img {
    max-width: 54%;
  }
}

.list-area {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
}
.list-area dt {
  background: #ef7e17;
  color: white;
  padding: 8px 40px 8px 16px;
  border-radius: 4px;
  border: 1px solid #fcf6db;
  line-height: 1.4;
}
.list-area dt::before {
  content: "\f041";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  padding-right: 0.3em;
  line-height: 1;
  font-size: 20px;
  font-size: 1.25rem;
}
.list-area dt a {
  color: white;
}
.list-area dt a:hover {
  color: #fff570;
}
.list-area dd ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 8px 0 32px;
}
.list-area dd li {
  width: 25%;
  padding: 4px;
}
@media (max-width: 640px) {
  .list-area dd li {
    width: 50%;
  }
}
.list-area dd a {
  display: block;
  padding: 4px 8px;
  border-bottom: 1px dotted #b2a7a0;
  color: #675042;
  font-size: 16px;
  font-size: 1rem;
}
.list-area dd a::before {
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  padding-right: 0.3em;
  line-height: 1;
  color: #ef7e17;
}
.list-area dd .title {
  font-weight: bold;
  color: #ef7e17;
  border-bottom: 2px dashed #fff570;
  padding: 4px 8px;
  max-width: none;
  width: auto;
}

.teacher_list {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  background: #fcf6db;
  padding: 16px;
  border-radius: 12px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
@media (max-width: 640px) {
  .teacher_list {
    display: block;
    width: 100%;
    border-radius: 0px;
  }
}
.teacher_list .prof {
  padding: 0 16px 0 8px;
  width: 32%;
}
@media (max-width: 640px) {
  .teacher_list .prof {
    width: 100%;
  }
}
.teacher_list .photo {
  width: 172px;
  margin: 0 auto;
  background: url(/image/content/search/bg02.svg) no-repeat left bottom, url(/image/content/search/bg02.svg) no-repeat right top, url(/image/content/search/bg01.svg) no-repeat center/contain;
  padding: 8px 8px 24px 24px;
}
.teacher_list .photo img {
  width: 140px;
  height: 140px;
  display: block;
  clip-path: circle(70px at 50% 50%);
}
.teacher_list ul {
  margin-left: 16px;
}
@media (max-width: 640px) {
  .teacher_list ul {
    margin: 0 16px;
  }
}
.teacher_list li {
  font-size: 15px;
  font-size: 0.9375rem;
  line-height: 1.4;
  margin: 8px 0;
}
.teacher_list li.name {
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: bold;
  margin: 16px 0;
  border-bottom: 2px dashed #b2a7a0;
}
@media (max-width: 640px) {
  .teacher_list li.name {
    padding-bottom: 4px;
  }
}
.teacher_list li i, .teacher_list li span {
  display: inline-block;
}
.teacher_list .introduce {
  flex: 1;
  background: white;
  margin-top: 32px;
  border-radius: 12px;
}
@media (max-width: 640px) {
  .teacher_list .introduce {
    margin-top: 16px;
  }
}
.teacher_list .introduce dt {
  display: inline-block;
  background: #fff570;
  border-radius: 12px;
  position: relative;
  top: -32px;
  left: -8px;
  font-weight: bold;
  padding: 8px 16px;
  margin-bottom: -16px;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .teacher_list .introduce dt {
    display: block;
    top: 0;
    left: 0;
    margin-bottom: 0;
    padding: 16px;
    padding-right: 32px;
    cursor: pointer;
  }
}
.teacher_list .introduce dt::before {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: 32px;
  background: #fff570;
  width: 16px;
  height: 16px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
@media (max-width: 640px) {
  .teacher_list .introduce dt::before {
    content: "\f138";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-right: 0.3em;
    line-height: 1;
    padding: 0;
    top: 50%;
    left: auto;
    right: 8px;
    background: none;
    width: auto;
    height: auto;
    clip-path: initial;
    transition: all 0.2s ease-in-out;
    transform: translateY(-50%) rotate(0);
  }
}
.teacher_list .introduce dt.open::before {
  transform: translateY(-50%) rotate(90deg);
}
.teacher_list .introduce dd {
  padding: 0 16px 16px;
  font-size: 16px;
  font-size: 1rem;
}
@media (max-width: 640px) {
  .teacher_list .introduce dd {
    padding: 16px 24px;
    display: none;
  }
}

.postlist {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
}
.postlist li {
  border-bottom: 1px solid rgba(103, 80, 66, 0.2);
}
.postlist a {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex-direction: row-reverse;
  align-items: center;
  padding: 8px;
  color: #675042;
  position: relative;
}
.postlist a:hover {
  color: #ef7e17;
}
.postlist a:hover .img img {
  transform: scale(1.06);
}
.postlist .img {
  width: 140px;
  height: 92px;
  overflow: hidden;
}
.postlist .img img {
  -o-object-fit: cover;
     object-fit: cover;
  min-height: 100%;
  min-width: 100%;
  transition: all 0.8s linear;
}
.postlist .title {
  flex: 1;
  width: auto;
  font-weight: bold;
  line-height: 1.4;
  max-width: none;
}

.cates {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 10px 0 10px 0;
  padding: 2px 8px;
  font-size: 14px;
  font-size: 0.875rem;
  background: #675042;
  color: white;
}
@media (max-width: 640px) {
  .cates {
    top: auto;
    left: auto;
    right: 0;
    bottom: 0;
    width: auto;
  }
}
.cates.adhd, .cates.goto, .cates.touch, .cates.exam {
  background: #ef7e17;
}
.cates.ld, .cates.study, .cates.grow {
  background: #005799;
}
.cates.as, .cates.care, .cates.homework {
  background: #5b993d;
}
.cates.hint, .cates.info {
  background: #f85523;
}

section.news {
  padding: 32px 0;
}
section.news ul {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
}
section.news li {
  border-bottom: 2px dashed #e3dfdc;
  padding: 8px 16px;
}
section.news a {
  color: #675042;
}
@media (max-width: 640px) {
  section.news a {
    display: block;
    margin-top: 8px;
    line-height: 1.4;
  }
}
section.news i {
  background: #fff570;
  display: inline-block;
  width: 8.6em;
  color: white;
  font-size: 14px;
  font-size: 0.875rem;
  padding: 0 6px;
  margin-right: 8px;
  border-radius: 4px;
}
section.news i.info {
  color: #675042;
}
section.news i.refusal {
  background: #ef7e17;
}
section.news i.develop {
  background: #e6998a;
}
section.news i.study {
  background: #005799;
}

aside.news {
  padding: 32px 0;
}
aside.news dl {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  background: white;
  border-radius: 12px;
  padding: 32px;
  position: relative;
}
aside.news dl::before {
  content: url(/image/content/index/img17.webp);
  position: absolute;
  top: 0;
  right: 0;
}
aside.news dt {
  border-bottom: 4px dotted #fff570;
  font-weight: bold;
  padding: 0 8px 4px;
  margin-top: 64px;
}
aside.news dt:first-of-type {
  margin-top: 0;
}
aside.news dd {
  margin: 0 8px;
  padding: 8px 16px;
  border-bottom: 2px dashed #e3dfdc;
}
@media (max-width: 640px) {
  aside.news dd {
    padding: 8px;
  }
}
aside.news a {
  color: #675042;
}
@media (max-width: 640px) {
  aside.news a {
    display: block;
    margin-top: 8px;
    line-height: 1.4;
  }
}
aside.news i {
  background: #fff570;
  display: inline-block;
  width: 8.6em;
  color: white;
  font-size: 14px;
  font-size: 0.875rem;
  padding: 0 6px;
  margin-right: 8px;
  border-radius: 4px;
}
aside.news i.info {
  color: #675042;
}
aside.news i.refusal {
  background: #ef7e17;
}
aside.news i.develop {
  background: #e6998a;
}
aside.news i.study {
  background: #005799;
}

#beforeafter {
  display: none;
  width: 84%;
  max-width: 800px;
}

.twobtns {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  max-width: 580px;
  text-align: center;
}
.twobtns a {
  display: block;
  border-radius: 64px;
  font-weight: bold;
  margin-bottom: 16px;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .twobtns a {
    border-radius: 12px;
  }
}
.twobtns .detail {
  background: #ef7e17;
  color: white;
  font-size: 28px;
  font-size: 1.75rem;
  box-shadow: 0 3px 0 rgb(168.7612903226, 86.5629032258, 11.6387096774);
  padding: 16px;
}
.twobtns .detail small {
  display: block;
  font-size: 16px;
  font-size: 1rem;
}
@media (max-width: 640px) {
  .twobtns .detail {
    font-size: 4.5454545455vw;
    padding: 18px 6px;
  }
}
.twobtns .detail:hover {
  background: rgb(241.6322580645, 147.2225806452, 61.1677419355);
  transform: translateY(3px);
  box-shadow: 0 0 0 #ef7e17;
}
.twobtns .toform {
  border: 2px solid #ef7e17;
  background: white;
  color: #ef7e17;
  padding: 8px 16px;
  font-size: 25px;
  font-size: 1.5625rem;
}
.twobtns .toform:hover {
  background: #fcf6db;
}
@media (max-width: 640px) {
  .twobtns .toform {
    font-size: 4.1666666667vw;
    padding: 12px 6px;
  }
}

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

.cta {
  background: white;
  padding: 32px 0 64px;
}
.cta > dl {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  position: relative;
}
.cta > dl.tel dd {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  background: url(/image/parts/response/tel_head.webp) no-repeat center top/contain, url(/image/parts/response/tel_foot.webp) no-repeat center bottom/contain, url(/image/parts/response/tel_bg.webp) repeat-y center/contain;
}
@media (max-width: 768px) {
  .cta > dl.tel dd {
    flex-direction: column;
    background: url(/image/parts/response/sp/tel_head.webp) no-repeat center top/contain, url(/image/parts/response/sp/tel_foot.webp) no-repeat center bottom/contain, url(/image/parts/response/sp/tel_bg.webp) repeat-y center/contain;
  }
}
@media (max-width: 768px) {
  .cta > dl.tel a {
    background: #ef7e17;
    border: 3px solid white;
    border-radius: 12px;
    box-shadow: 2px 2px 4px rgba(103, 80, 66, 0.3);
  }
}
.cta > dl.web dd {
  background: url(/image/parts/response/form_head.webp) no-repeat center top/contain, url(/image/parts/response/form_foot.webp) no-repeat center bottom/contain, url(/image/parts/response/form_bg.webp) repeat-y center/contain;
}
@media (max-width: 768px) {
  .cta > dl.web dd {
    background: url(/image/parts/response/sp/form_head.webp) no-repeat center top/contain, url(/image/parts/response/sp/form_foot.webp) no-repeat center bottom/contain, url(/image/parts/response/sp/form_bg.webp) repeat-y center/contain;
  }
}
.cta > dl.web ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
@media (max-width: 768px) {
  .cta > dl.web ul {
    flex-direction: column;
  }
}
.cta > dl.web li {
  flex: 1;
}
.cta > dl.web li.btn-line a::before {
  content: "\f3c0";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}
.cta > dl.web li.btn-blue a::before {
  content: "\f0e0";
}
.cta > dl.web a {
  font-weight: normal;
  font-size: 18px;
  font-size: 1.125rem;
}
.cta > dl.web a::before {
  font-size: 28px;
  font-size: 1.75rem;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  padding-right: 0.3em;
  line-height: 1;
}
.cta > dl.contact dd {
  background: url(/image/parts/response/contact_head.webp) no-repeat center top/contain, url(/image/parts/response/contact_foot.webp) no-repeat center bottom/contain, url(/image/parts/response/contact_bg.webp) repeat-y center/contain;
}
@media (max-width: 768px) {
  .cta > dl.contact dd {
    background: url(/image/parts/response/sp/contact_head.webp) no-repeat center top/contain, url(/image/parts/response/sp/contact_foot.webp) no-repeat center bottom/contain, url(/image/parts/response/sp/contact_bg.webp) repeat-y center/contain;
  }
}
.cta > dl.contact dd p {
  margin-bottom: 32px;
}
.cta > dl dt {
  transform: translateY(8px);
}
.cta > dl dd {
  padding: 32px;
  padding-top: 96px;
}
@media (max-width: 768px) {
  .cta > dl dd {
    padding: 16px;
    padding-top: 30%;
  }
}
.cta > dl dd p {
  padding: 0;
  max-width: unset;
}

.pageindex {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  border: dotted 3px #b2a7a0;
  border-radius: 12px;
  background: white;
}
.pageindex p {
  max-width: none;
  width: auto;
}
.pageindex .title {
  display: inline-block;
  padding: 8px 64px 8px 32px;
  color: white;
  background: #b2a7a0;
  position: relative;
  font-size: 14px;
  font-size: 0.875rem;
  top: 8px;
  left: -20px;
}
@media (max-width: 640px) {
  .pageindex .title {
    display: block;
  }
}
.pageindex .title:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  display: block;
  width: 20px;
  height: 16px;
  background: #675042;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.pageindex ul {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  margin: 16px auto;
}
.pageindex li {
  padding: 8px 0 0 12px;
  border-bottom: 1px dotted #b2a7a0;
}
.pageindex a {
  display: block;
  font-size: 16px;
  font-size: 1rem;
  color: #675042;
  line-height: 1.4;
  padding-bottom: 8px;
}
@media (max-width: 1024px) {
  .pageindex a {
    text-indent: -18px;
    padding: 8px 0 8px 12px;
  }
}
.pageindex a::before {
  content: "\f150";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  padding-right: 0.3em;
  line-height: 1;
}
.pageindex a:hover {
  color: #ef7e17;
}

.middleup {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
@media (max-width: 640px) {
  .middleup {
    flex-direction: column;
  }
}
.middleup > div {
  width: 49%;
  margin: 16px 0.5%;
  border: 2px dashed #675042;
  border-radius: 12px;
  overflow: hidden;
}
@media (max-width: 640px) {
  .middleup > div {
    width: 100%;
  }
}
.middleup dt {
  font-size: 20px;
  font-size: 1.25rem;
  font-weight: bold;
  background: #fff570;
  line-height: 1.4;
  padding: 8px 16px;
}
.middleup dt br {
  display: none;
}
.middleup dd {
  position: relative;
  padding: 8px;
  overflow: hidden;
}
.middleup .point {
  font-size: 32px;
  font-size: clamp(32px, 3vw, 48px);
  font-weight: bold;
  line-height: 0.8;
  max-width: none;
  width: auto;
  padding: 0 0 16px;
  text-align: center;
  text-shadow: 2px 2px 0 white, -2px 2px 0 white, 2px -2px 0 white, -2px -2px 0 white;
  background: url(/image/content/voice/up/middleup/img02.webp) no-repeat right top/contain;
}
@media (max-width: 768px) {
  .middleup .point {
    text-align: left;
    line-height: 1;
    padding: 16px 0;
  }
}
.middleup .point i {
  font-size: clamp(120px, 16vw, 140px);
  color: #ef7e17;
}
.middleup .point::before {
  content: url(/image/content/voice/up/middleup/img01.webp);
  position: absolute;
  top: 0;
  left: 8px;
}
.middleup .from {
  position: absolute;
  top: 16px;
  right: 0;
  max-width: none;
  width: auto;
  padding: 0 16px;
  line-height: 1.4;
  text-shadow: 2px 2px 0 white, 2px -2px 0 white, -2px 2px 0 white, -2px -2px 0 white, 2px 0 0 white, -2px 0 0 white, 0 2px 0 white, 0 -2px 0 white;
  font-size: 22px;
  font-size: 1.375rem;
}
.middleup .from .fa-solid {
  padding: 0 8px;
}
@media (max-width: 1024px) {
  .middleup .from em {
    display: block;
  }
}
.middleup .textimg {
  padding: 16px 8px;
  text-align: center;
}
.middleup .name {
  text-align: right;
  max-width: none;
  width: auto;
  padding: 0 16px;
}

.voice-interview {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.voice-interview li {
  width: 50%;
  padding: 0 4px 16px;
}
@media (max-width: 640px) {
  .voice-interview li {
    width: 100%;
  }
}
.voice-interview a {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  height: 100%;
  background: #fff3bc;
  padding: 8px;
  box-shadow: 0 0 3px rgba(103, 80, 66, 0.3);
  border-radius: 12px;
  line-height: 1.4;
}
.voice-interview a:hover {
  background: #fff570;
}
.voice-interview p {
  max-width: none;
  width: auto;
  font-size: 16px;
  font-size: 1rem;
  color: #675042;
  font-weight: bold;
  flex: 1;
  padding: 8px;
}
.voice-interview p span {
  border-radius: 3px;
  display: inline-block;
  background: #fff570;
  padding: 4px 8px;
  font-size: 14px;
  font-size: 0.875rem;
  margin-bottom: 12px;
  font-weight: normal;
}
.voice-interview img {
  border-radius: 12px;
  width: 30%;
}
.voice-interview.online a {
  display: block;
}
.voice-interview.online img {
  width: 100%;
  margin-top: 16px;
}

.voice-trial {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
}
.voice-trial.slick-slider {
  width: 100%;
}
.voice-trial li {
  border-radius: 12px;
  border: 6px solid #ef7e17;
  background: white;
  margin: 32px 0;
}
.voice-trial p {
  max-width: none;
  width: auto;
}
.voice-trial .title {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 3px dotted #ef7e17;
}
.voice-trial .title p {
  flex: 1;
}
.voice-trial .title span, .voice-trial .title i {
  display: block;
  line-height: 1.4;
}
.voice-trial .title span {
  font-weight: bold;
  font-size: 20px;
  font-size: 1.25rem;
}
@media (max-width: 640px) {
  .voice-trial .title span {
    font-size: 16px;
    font-size: 1rem;
  }
}
.voice-trial .title i {
  font-size: 16px;
  font-size: 1rem;
  padding: 4px 8px 0;
}
.voice-trial .title img {
  margin: 0 4px;
}
@media (max-width: 640px) {
  .voice-trial .title img.icon_staff {
    display: none;
  }
}
@media (max-width: 640px) {
  .voice-trial .title img.icon_child {
    width: 54px;
  }
}
.voice-trial .img {
  text-align: center;
  padding: 16px 0;
}
.voice-trial .trial_img {
  text-align: center;
  padding: 8px;
}
.voice-trial .trial_txt {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  margin: 0 auto;
}
.voice-trial .trial_txt dt {
  font-weight: bold;
  border-bottom: 1px dashed #675042;
  padding: 0 8px 4px;
  line-height: 1.4;
}
.voice-trial .trial_txt dd {
  padding-bottom: 32px;
}
.voice-trial .trial_txt dd i {
  display: block;
  font-weight: bold;
}
.voice-trial .trial_txt dd i::before {
  position: relative;
  top: 4px;
  left: -12px;
}
.voice-trial .trial_txt dd .child::before {
  content: url(/image/content/voice/trial/icon-child.webp);
}
.voice-trial .trial_txt dd .parent::before {
  content: url(/image/content/voice/trial/icon-parent.webp);
}
.voice-trial .comment {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  margin: 0 auto;
}
.voice-trial p {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  margin: 0 auto;
}
.voice-trial p.title {
  max-width: none;
  width: auto;
  font-weight: bold;
  border-bottom: 2px dotted #675042;
  padding: 0 8px;
}

.voice-evidence {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  align-items: flex-start;
}
.voice-evidence.slick-slider {
  width: 100%;
}
@media (max-width: 640px) {
  .voice-evidence {
    display: block;
  }
}
.voice-evidence li {
  width: 49%;
  border-radius: 12px;
  border: 2px solid transparent;
  margin-top: 16px;
}
@media (max-width: 640px) {
  .voice-evidence li {
    width: 100%;
  }
}
.voice-evidence li.type01 {
  border-color: #ef7e17;
  background: rgba(239, 126, 23, 0.4);
}
.voice-evidence li.type01 .type {
  background: #ef7e17;
}
.voice-evidence li.type02 {
  border-color: #005799;
  background: rgba(0, 87, 153, 0.4);
}
.voice-evidence li.type02 .type {
  background: #005799;
}
.voice-evidence li.type03 {
  border-color: #fff570;
  background: rgba(255, 245, 112, 0.4);
}
.voice-evidence li.type03 .type {
  background: #fff570;
}
.voice-evidence li.type04 {
  border-color: #f85523;
  background: rgba(248, 85, 35, 0.4);
}
.voice-evidence li.type04 .type {
  background: #f85523;
}
.voice-evidence .start {
  padding: 8px;
}
.voice-evidence .intro, .voice-evidence .comment {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  padding: 0 8px;
}
.voice-evidence .intro p, .voice-evidence .comment p {
  flex: 1;
  line-height: 1.4;
  font-size: 16px;
  font-size: 1rem;
}
.voice-evidence .intro img {
  margin-right: 8px;
}
.voice-evidence .content {
  background: rgba(255, 255, 255, 0.5);
  margin-top: 40px;
}
.voice-evidence .content .center {
  position: relative;
  top: -48px;
  margin-bottom: -48px;
}
.voice-evidence .title, .voice-evidence .name {
  padding: 0;
  font-weight: bold;
}
.voice-evidence .title {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.4;
}
.voice-evidence .name {
  margin: 8px auto;
  text-align: right;
}
.voice-evidence .txt {
  text-align: center;
  background: white;
  padding: 8px;
}
.voice-evidence .txt p {
  text-align: left;
  line-height: 30px;
  margin-top: 24px;
  padding: 0;
  background: url(/image/common/line/note.webp);
}

.bigup dd {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
}
.bigup .graph {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}
.bigup .img-graph {
  max-width: 32%;
  position: relative;
  margin: 0 8px;
}
@media (max-width: 768px) {
  .bigup .img-graph {
    width: 64%;
    max-width: none;
    margin: 0;
  }
}
.bigup .upnum {
  background: url(/image/content/voice/up/parts/uplist/bg01.webp) no-repeat center/contain;
  max-width: 140px;
  min-height: 140px;
  width: 26%;
  text-align: center;
  line-height: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  transform: rotate(-6deg);
  text-shadow: 2px 2px 0 white, -2px 2px 0 white, 2px -2px 0 white, -2px -2px 0 white;
}
@media (max-width: 768px) {
  .bigup .upnum {
    transform: rotate(0);
    width: 32%;
    flex: 1;
  }
}
.bigup .upnum span {
  font-size: 64px;
  font-size: 4rem;
  font-weight: bold;
  color: #ef7e17;
  font-family: "myself";
  line-height: 0.9;
}
.bigup .upnum small {
  font-size: 24px;
  font-size: 1.5rem;
}
.bigup .upnum i {
  display: block;
  font-size: 32px;
  font-size: 2rem;
  font-family: "myself";
}
.bigup .text {
  flex: 1;
  border: 2px dashed #b2a7a0;
  border-radius: 12px;
  padding: 8px;
  text-align: center;
}
.bigup .text p {
  text-align: right;
}
@media (max-width: 768px) {
  .bigup .text {
    width: 100%;
    flex: auto;
    margin-top: 16px;
  }
}

.postlist, .postcard {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  margin: 24px auto;
}
.postlist a, .postcard a {
  color: #675042;
  text-decoration: none;
  background: white;
}
.postlist a:hover .img img, .postcard a:hover .img img {
  transform: scale(1.06);
}

@media (max-width: 640px) {
  .postlist {
    width: 94%;
    max-width: 1024px;
    margin: 32px auto;
  }
}
.postlist li {
  border-bottom: 1px solid rgba(103, 80, 66, 0.2);
}
.postlist a {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex-direction: row-reverse;
  align-items: center;
  padding: 8px;
  position: relative;
}
.postlist .img {
  width: 140px;
  height: 92px;
  margin-left: 16px;
}
.postlist .title {
  flex: 1;
  width: auto;
  font-weight: bold;
  line-height: 1.4;
  max-width: none;
}

.postcard {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
@media (max-width: 640px) {
  .postcard {
    flex-direction: column;
  }
}
.postcard li {
  width: calc(25% - 8px);
  height: 320px;
  position: relative;
  line-height: 1.4;
  margin: 8px 4px;
}
@media (max-width: 640px) {
  .postcard li {
    width: 100%;
    height: auto;
  }
}
.postcard a {
  display: block;
  height: 100%;
  box-shadow: 1px 1px 3px rgba(103, 80, 66, 0.2);
  border: 1px solid rgba(103, 80, 66, 0.1);
  overflow: hidden;
  border-radius: 6px;
}
@media (max-width: 640px) {
  .postcard a {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}
.postcard .img {
  height: 170px;
  background: #fcf6db;
}
@media (max-width: 640px) {
  .postcard .img {
    width: 20vw;
    height: 20vw;
  }
}
.postcard .title {
  font-size: 16px;
  font-size: 1rem;
  padding: 8px 12px;
}
@media (max-width: 640px) {
  .postcard .title {
    flex: 1;
  }
}

#sidenav .wpp-list {
  width: 100%;
  margin: 0;
}
#sidenav .wpp-list .img {
  width: 100px;
  height: 72px;
  margin-right: 8px;
}
#sidenav .wpp-list .title {
  font-size: 15px;
  font-size: 0.9375rem;
}

.ranking .wpp-list {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  margin: 24px auto;
}
.ranking .wpp-list li {
  border-bottom: 1px solid rgba(103, 80, 66, 0.2);
}
.ranking .wpp-list a {
  color: #675042;
  text-decoration: none;
  background: white;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex-direction: row;
  align-items: flex-start;
  padding: 8px;
  position: relative;
}
.ranking .wpp-list a:hover {
  background: #fcf6db;
}
.ranking .wpp-list a:hover .img img {
  transform: scale(1.06);
}
.ranking .wpp-list .img {
  margin-right: 8px;
}
.ranking .wpp-list .title {
  flex: 1;
  width: auto;
  font-weight: bold;
  line-height: 1.4;
  max-width: none;
  padding: 0;
  font-weight: normal;
}

.tel-contact .balloon {
  justify-content: center;
  margin: 0 auto;
}
.tel-contact .telbtn {
  margin-top: 0;
}

.list-movie {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.list-movie li {
  width: 50%;
  padding: 0 8px 16px;
}
@media (max-width: 640px) {
  .list-movie li {
    width: 100%;
  }
}
.list-movie iframe {
  width: 100%;
  aspect-ratio: 16/9;
}
.list-movie .title {
  font-weight: bold;
  background: white;
  min-height: 4em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  border-radius: 12px;
  margin-bottom: 8px;
  width: auto;
  padding: 8px 12px;
  border: 1px solid #fee7d1;
}
.list-movie a {
  display: block;
  position: relative;
  background: #fcf6db;
  border-radius: 12px;
  line-height: 1.4;
  box-shadow: 0 0 3px rgba(103, 80, 66, 0.3);
  padding: 8px;
  color: #675042;
}
.list-movie a:hover .img {
  opacity: 0.8;
}
.list-movie a .img {
  position: relative;
}
.list-movie a .img::before {
  content: "\f111";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  padding-right: 0.3em;
  line-height: 1;
  font-size: 40px;
  font-size: 2.5rem;
  color: white;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.list-movie a .img::after {
  content: "\f167";
  font-family: "Font Awesome 6 Brands";
  line-height: 1;
  font-size: 80px;
  font-size: 5rem;
  color: #f00;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 400;
}

.list-voice {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.list-voice li {
  width: 49%;
  margin-bottom: 16px;
  padding: 8px;
  border-radius: 12px;
  border: 2px solid #ef7e17;
}
@media (max-width: 640px) {
  .list-voice li {
    width: 100%;
  }
}
.list-voice .title {
  font-weight: bold;
  min-height: 4em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 8px;
  width: auto;
  padding: 8px 12px;
  background: white;
  border-bottom: 2px dashed #ef7e17;
}
.list-voice .text {
  background: url(/image/common/line/note.webp) white;
  line-height: 30px;
  padding: 0 16px 8px;
  width: auto;
  margin-top: 32px;
}

.pager {
  text-align: center;
  padding: 16px 0;
  width: 100%;
}
.pager .current, .pager a {
  display: inline-block;
  font-weight: bold;
  line-height: 40px;
  width: 40px;
  box-sizing: content-box;
  border-radius: 50%;
}
.pager .current {
  background: #52a7cc;
  border: 2px solid #52a7cc;
  color: white;
}
.pager a {
  display: inline-block;
}
.pager a:not(.next, .prev) {
  border: 2px solid #005799;
}
.pager a:not(.next, .prev):hover {
  background: #52a7cc;
  border-color: #52a7cc;
  color: white;
}
.pager a.next, .pager a.prev {
  margin: 0 4px;
}

.dl-flag {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
}
.dl-flag > div {
  margin: 32px 0;
}
.dl-flag > div:first-child {
  margin-top: 16px;
}
.dl-flag dt {
  border: 2px solid #f4f2f1;
  border-bottom: none;
  display: inline-block;
  font-weight: bold;
  border-radius: 12px 12px 0 0;
  padding: 8px 24px 0;
}
.dl-flag dt::before {
  content: url(/image/parts/dl-flag/img01.webp);
  margin-right: 6px;
}
.dl-flag dd {
  background: #f4f2f1;
  padding: 32px 0;
}

#beforeafter {
  display: none;
  width: 84%;
  max-width: 800px;
}
#beforeafter ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  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: 12px;
}
#beforeafter a.before {
  background: #ef7e17;
}
#beforeafter a.after {
  background: #005799;
}
#beforeafter p {
  margin-top: 0;
  text-align: center;
}
@media (max-width: 640px) {
  #beforeafter p {
    text-align: left;
  }
}

#trial .mainvisual, #trialad .mainvisual {
  background: url(/image/content/page/trial/bg.webp);
  text-align: center;
}
#trial .grade, #trialad .grade {
  background: white;
  max-width: 928px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  font-weight: bold;
}
#trial .grade p, #trialad .grade p {
  flex: 1;
  padding: 8px 16px;
}
#trial .grade a, #trialad .grade a {
  display: block;
  background: #005799;
  color: white;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  padding: 0 16px;
}
#trial .grade a:hover, #trialad .grade a:hover {
  background: #52a7cc;
  color: #fff570;
}
#trial .grade a::after, #trialad .grade a::after {
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  padding-right: 0.3em;
  line-height: 1;
  padding: 0;
  padding-left: 16px;
}

[class^=btn-] a, [class*=" btn-"] a {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  margin: 0 auto;
  display: block;
  max-width: 640px;
  text-align: center;
  font-weight: bold;
  padding: 16px 32px;
  color: white;
  border-radius: 64px;
  position: relative;
  line-height: 1.4;
  font-size: 22px;
  font-size: 1.375rem;
  background: #756154;
  box-shadow: 0px 3px 0px #675042;
}
@media (max-width: 640px) {
  [class^=btn-] a, [class*=" btn-"] a {
    text-align: left;
    font-size: 16px;
    font-size: 1rem;
  }
}
[class^=btn-] a::after, [class*=" btn-"] a::after {
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  padding-right: 0.3em;
  line-height: 1;
  position: absolute;
  right: 16px;
  top: calc(50% - 0.5em);
}
[class^=btn-] a:hover, [class*=" btn-"] a:hover {
  background: #908075;
  transform: translateY(3px);
  box-shadow: 0px 0px 0px #675042;
  color: #fff570;
}
[class^=btn-] a i, [class*=" btn-"] a i {
  font-size: 18px;
  font-size: 1.125rem;
}
@media (max-width: 640px) {
  [class^=btn-] a i, [class*=" btn-"] a i {
    font-size: 16px;
    font-size: 1rem;
  }
}

.btn-yellow a {
  background: #fff570;
  border: 1px solid #ef7e17;
  color: #675042;
  box-shadow: 0px 3px 0px #ef7e17;
}
.btn-yellow a::after {
  color: #ef7e17;
}
.btn-yellow a:hover {
  background: #fe9;
  color: #ef7e17;
}

.btn-blue a {
  background: #005799;
  box-shadow: 0 3px 0 rgb(0, 40.6, 71.4);
}
.btn-blue a:hover {
  background: rgb(0, 110.2, 193.8);
}

.btn-line a {
  background: #3cb900;
  box-shadow: 0 3px 0 rgb(33.5351351351, 103.4, 0);
}
.btn-line a:hover {
  background: rgb(66.6162162162, 205.4, 0);
}

.btn-green a {
  background: rgb(47.8126582278, 150.9873417722, 139.6632911392);
  box-shadow: 0 3px 0 rgb(28.1873417722, 89.0126582278, 82.3367088608);
}
.btn-green a:hover {
  background: rgb(57.6253164557, 181.9746835443, 168.3265822785);
}

div.round, .tri {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  text-align: right;
}
div.round a, .tri a {
  display: inline-block;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.4;
  text-align: left;
  color: #756154;
  font-weight: bold;
  border-radius: 48px;
  border: 1px solid #e3dfdc;
  padding: 16px 42px 16px 24px;
  box-shadow: 0px 3px 0px #b2a7a0;
  position: relative;
  background: white;
}
div.round a::after, .tri a::after {
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  padding-right: 0.3em;
  line-height: 1;
  position: absolute;
  top: calc(50% - 0.5em);
  right: 16px;
  color: #52a7cc;
}
div.round a:hover, .tri a:hover {
  background: #fcf6db;
}

.trialbtn, .submit button[type=submit] {
  display: inline-block;
  padding: 16px 48px;
  border: 3px solid white;
  border-radius: 12px;
  color: white;
  box-shadow: 0px 2px 2px rgba(103, 80, 66, 0.3);
  background: #f85523;
  font-size: 16px;
  font-size: 1rem;
  font-weight: bold;
}

.cta-yellow {
  background: #fff570;
  text-align: center;
  padding: 16px;
}
.cta-yellow ul {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  max-width: 800px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (max-width: 640px) {
  .cta-yellow ul {
    flex-direction: column;
  }
}
.cta-yellow ul li {
  width: 48%;
}
@media (max-width: 640px) {
  .cta-yellow ul li {
    width: 100%;
    padding: 8px 0;
  }
}
.cta-yellow ul li span {
  font-size: 15px;
  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(103, 80, 66, 0.3);
  line-height: 1.4;
}
.cta-yellow 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-yellow ul li span i {
  color: #f85523;
}
.cta-yellow ul li.trial a {
  background: #f85523;
}
.cta-yellow ul li.contact a {
  background: #005799;
}
.cta-yellow ul a {
  display: block;
  padding: 16px;
  border: 3px solid white;
  border-radius: 12px;
  color: white;
  box-shadow: 0px 2px 2px rgba(103, 80, 66, 0.3);
}
@media (max-width: 640px) {
  .cta-yellow ul a {
    font-weight: bold;
    font-size: 18px;
    font-size: 1.125rem;
  }
}
.cta-yellow p {
  text-align: left;
}
.cta-yellow.center ul {
  justify-content: center;
}
.cta-yellow .action {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  max-width: 800px;
}
.cta-yellow .web {
  text-align: center;
  margin-top: 16px;
}
.cta-yellow .web dd {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.cta-yellow .web a {
  display: block;
  width: 49%;
  color: white;
  border-radius: 12px;
  height: 64px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  line-height: 1;
  text-decoration: none;
  border: 3px solid white;
  box-shadow: 0px 2px 3px rgba(103, 80, 66, 0.2);
}
.cta-yellow .web a:before {
  font-weight: normal;
  font-size: 28px;
  font-size: 1.75rem;
  padding-right: 0.3em;
}
.cta-yellow .web a.line {
  background: #00b900;
}
.cta-yellow .web a.line:before {
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
  padding-right: 0.3em;
  line-height: 1;
  content: "\f3c0";
  font-size: 22px;
  font-size: 1.375rem;
}
.cta-yellow .web a.form {
  background: #52a7cc;
}
.cta-yellow .web a.form:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  padding-right: 0.3em;
  line-height: 1;
  content: "\f0e0";
  font-size: 20px;
  font-size: 1.25rem;
}
.cta-yellow .bnr img {
  max-width: 340px;
}

.link_back {
  text-align: center;
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
}
.link_back a {
  display: inline-block;
  color: #675042;
  border-bottom: 6px double #b2a7a0;
}
.link_back a:hover {
  border-color: #f3a45b;
  color: #f85523;
}
.link_back a::before {
  content: "\f060";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  padding-right: 0.3em;
  line-height: 1;
}

.telbtn {
  text-align: center;
  margin: 24px auto;
}
.telbtn a {
  pointer-events: none;
  display: inline-block;
}
@media (max-width: 640px) {
  .telbtn a {
    pointer-events: auto;
    display: block;
  }
}
.telbtn a.svg {
  background: #ef7e17;
  border-radius: 12px;
  border: 3px solid white;
  padding: 8px;
  box-shadow: 2px 2px 2px rgba(103, 80, 66, 0.3);
}
.telbtn a.svg img {
  height: 64px;
}

.list-check, .list-star, .disc, .decimal, .list-arrow {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  line-height: 1.4;
  margin: 24px auto;
  max-width: 800px;
}
.list-check li, .list-star li, .disc li, .decimal li, .list-arrow li {
  padding: 12px 0;
}
.list-check p, .list-star p, .disc p, .decimal p, .list-arrow p {
  width: auto;
  padding: 0 0 16px;
}
.list-check p:last-child, .list-star p:last-child, .disc p:last-child, .decimal p:last-child, .list-arrow p:last-child {
  padding: 0;
}

.list-check li, .list-star li {
  padding-left: 32px;
  background: no-repeat left 12px;
}

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

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

.disc li, .decimal li {
  margin-left: 32px;
}

.disc {
  list-style: disc;
}

.decimal {
  list-style: decimal;
}
.decimal li {
  padding-left: 8px;
}

.link-block {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  line-height: 1.4;
  text-align: center;
}
.link-block dt {
  display: inline-block;
  background: white;
  border-radius: 12px 12px 0 0;
  font-weight: bold;
  padding: 16px 24px 12px;
  border: 2px dashed #b2a7a0;
  border-bottom: none;
  position: relative;
  top: 3px;
  font-size: 20px;
  font-size: 1.25rem;
}
@media (max-width: 640px) {
  .link-block dt {
    font-size: 16px;
    font-size: 1rem;
  }
}
.link-block dt small {
  display: block;
  font-size: 16px;
  font-size: 1rem;
}

ul.link-block, .link-block ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  background: #f4f2f1;
  border: 2px dashed #b2a7a0;
  border-radius: 12px;
  box-shadow: 8px 8px 0 white inset, 8px -8px 0 white inset, -8px 8px 0 white inset, -8px -8px 0 white inset;
  padding: 12px 12px 16px 12px;
}
@media (max-width: 1024px) {
  ul.link-block, .link-block ul {
    font-size: 16px;
    font-size: 1rem;
  }
}
ul.link-block li, .link-block ul li {
  width: 33.3333333333%;
  padding: 4px;
}
@media (max-width: 640px) {
  ul.link-block li, .link-block ul li {
    width: 100%;
  }
}
ul.link-block a, .link-block ul a {
  font-weight: bold;
  display: block;
  background: white;
  border-radius: 12px;
  border: 1px solid #e3dfdc;
  padding: 16px;
  padding-right: 24px;
  position: relative;
  color: #675042;
  text-align: left;
  font-size: 16px;
  font-size: 1rem;
  box-shadow: 0 3px 0 rgba(103, 80, 66, 0.3);
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}
ul.link-block a::after, .link-block ul a::after {
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  padding-right: 0.3em;
  line-height: 1;
  color: #ef7e17;
  position: absolute;
  top: calc(50% - 0.5em);
  right: 4px;
  font-size: 20px;
  font-size: 1.25rem;
}
ul.link-block a:hover, .link-block ul a:hover {
  transform: translateY(3px);
  box-shadow: 0 0 0 #675042;
  background: #fcf6db;
  color: #ef7e17;
}

.list-faq {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
}
.list-faq dt, .list-faq h2, .list-faq h3 {
  background: #f4f2f1;
  font-weight: bold;
  line-height: 1.4;
  padding: 16px 8px 16px 64px;
  position: relative;
  border-radius: 12px;
  font-size: 20px;
  font-size: 1.25rem;
  overflow: hidden;
}
@media (max-width: 640px) {
  .list-faq dt, .list-faq h2, .list-faq h3 {
    padding: 8px 8px 8px 56px;
    font-size: 16px;
    font-size: 1rem;
  }
}
.list-faq dt::before, .list-faq h2::before, .list-faq h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 48px;
  background: url(/image/parts/faqbox/q.svg) no-repeat center #52a7cc;
}
.list-faq dd, .list-faq > p {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  padding-bottom: 64px;
}

.list-arrow li {
  padding-bottom: 32px;
  background: url(/image/common/arrow_d.gif) no-repeat 16px bottom;
}
.list-arrow li:last-child {
  padding-bottom: 12px;
  background: none;
}

/* block
------------------------------------*/
.block01.block01 > li, .block01.block01 > div, .block01.block01 dd li {
  width: 100%;
}

.block02.block02 > li, .block02.block02 > div, .block02.block02 dd li {
  width: 50%;
}

.block03.block03 > li, .block03.block03 > div, .block03.block03 dd li {
  width: 33.3333333333%;
}

.block04.block04 > li, .block04.block04 > div, .block04.block04 dd li {
  width: 25%;
}

@media (max-width: 640px) {
  .block02.block02 > li, .block02.block02 > div, .block02.block02 dd li, .block03.block03 > li, .block03.block03 > div, .block03.block03 dd li, .block04.block04 > li, .block04.block04 > div, .block04.block04 dd li {
    width: 100%;
  }
}

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

dl.square {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
}
dl.square dt {
  font-weight: bold;
  line-height: 1.4;
  text-indent: -22px;
  margin-left: 20px;
  padding-left: 8px;
}
dl.square dt::before {
  content: "■";
  color: #ef7e17;
  margin-right: 4px;
}
dl.square dd {
  padding-bottom: 16px;
}
dl.square dd:last-child {
  padding-bottom: 0;
}
dl.square dd *:first-child {
  margin-top: 8px;
}

.list-priceplan {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  border: 12px solid #52a7cc;
  border-radius: 12px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
@media (max-width: 640px) {
  .list-priceplan {
    flex-direction: column;
  }
}
.list-priceplan li {
  flex: 1;
  text-align: center;
  border-left: 1px dashed #52a7cc;
}
.list-priceplan li:first-child {
  border: none;
}
@media (max-width: 640px) {
  .list-priceplan li {
    border-left: none;
    border-top: 1px dashed #756154;
  }
}
.list-priceplan a {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  line-height: 1.4;
  position: relative;
  padding: 16px 8px 24px;
  height: 100%;
}
.list-priceplan a::after {
  content: "\f107";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  padding-right: 0.3em;
  line-height: 1;
  position: absolute;
  margin: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.list-priceplan a p {
  padding: 0;
  width: auto;
  color: #ef7e17;
  font-size: 16px;
  font-size: 1rem;
}
.list-priceplan a p.title {
  font-weight: bold;
  color: #675042;
  padding: 8px 0;
  font-size: 20px;
  font-size: 1.25rem;
}
.list-priceplan a i {
  display: inline-block;
}

.privilege dt {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  background: no-repeat left center/58px;
  padding-left: 64px;
  margin-top: 64px;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .privilege dt {
    background-size: 48px;
  }
}
.privilege dt:nth-of-type(1) {
  margin-top: 0;
  background-image: url(/image/content/page/price/title04.webp);
}
.privilege dt:nth-of-type(2) {
  background-image: url(/image/content/page/price/title05.webp);
}

#news .newslist {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
}
#news .newslist > div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  background: url(/image/nav/border.webp) repeat-x bottom;
  align-items: flex-start;
  padding: 16px 0 24px;
}
#news .newslist dt {
  font-size: 0.8em;
  padding: 8px 16px;
}
#news .newslist dd {
  flex: 1;
  padding: 8px;
}
#news .newslist a {
  display: block;
}
#news .newslist p {
  max-width: none;
  width: auto;
  padding: 0;
  line-height: 1.4;
}

dl.titlebox {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
}
dl.titlebox > div {
  border-radius: 12px;
  border: 3px solid #52a7cc;
  overflow: hidden;
  margin-bottom: 32px;
}
dl.titlebox dt {
  background: #52a7cc;
  color: white;
  padding: 4px 16px;
}
dl.titlebox dd {
  padding: 16px;
}
dl.titlebox dd p:last-child {
  padding-bottom: 0;
}
dl.titlebox.half {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  -moz-column-gap: 16px;
       column-gap: 16px;
}
@media (max-width: 640px) {
  dl.titlebox.half {
    display: block;
  }
}
dl.titlebox.half > div {
  width: calc(50% - 8px);
}
@media (max-width: 640px) {
  dl.titlebox.half > div {
    width: auto;
  }
}

.table-round {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  max-width: 800px;
  border-collapse: separate;
  border-spacing: 2px 6px;
}
@media (max-width: 640px) {
  .table-round {
    border-spacing: 0 12px;
  }
}
.table-round thead td {
  background: none;
}
.table-round thead th {
  background: #52a7cc;
  width: auto;
  border-radius: 0;
  text-align: center;
  border-radius: 6px 6px 0 0;
}
.table-round thead th.point {
  background: rgb(46.5375, 124.1, 157.8625);
}
.table-round th, .table-round td {
  padding: 8px 12px;
  vertical-align: middle;
}
@media (max-width: 640px) {
  .table-round th, .table-round td {
    display: block;
  }
}
.table-round th {
  color: white;
  background: #756154;
  border-radius: 6px 0 0 6px;
  width: 30%;
}
@media (max-width: 640px) {
  .table-round th {
    border-radius: 6px 6px 0 0;
    width: 100%;
  }
}
.table-round td {
  background: #f4f2f1;
  border-radius: 0 6px 6px 0;
  text-align: center;
}
.table-round td.point {
  background: rgb(226.048, 220.784, 218.152);
}
@media (max-width: 640px) {
  .table-round td {
    border-radius: 0 0 6px 6px;
  }
}
.table-round td i {
  display: inline-block;
}
@media (max-width: 640px) {
  .table-round td i {
    display: block;
    width: 100%;
  }
}
.table-round caption {
  caption-side: bottom;
  text-align: right;
  font-size: 0.8em;
}
.table-round.block th, .table-round.block td {
  display: block;
  width: 100%;
}
.table-round.block th {
  border-radius: 6px 6px 0 0;
}
.table-round.block td {
  border-radius: 0 0 6px 6px;
}

.maintable {
  width: 94%;
  max-width: 1024px;
  margin: 32px auto;
  border-collapse: separate;
  border-spacing: 4px;
}
@media (max-width: 640px) {
  .maintable {
    border-spacing: 8px;
  }
}
.maintable caption {
  background: #005799;
  text-align: center;
  color: white;
  font-weight: bold;
  padding: 8px;
}
.maintable th, .maintable td {
  border-right: 1px solid rgba(103, 80, 66, 0.3);
  border-bottom: 1px solid rgba(103, 80, 66, 0.3);
  text-align: left;
  padding: 8px;
  line-height: 1.6;
}
@media (max-width: 640px) {
  .maintable th, .maintable td {
    display: block;
    border-left: 1px solid rgba(103, 80, 66, 0.3);
  }
}
.maintable th {
  width: 28%;
  background: rgba(255, 212, 56, 0.1);
}
@media (max-width: 640px) {
  .maintable th {
    width: 100%;
    border-top: 1px solid rgba(103, 80, 66, 0.3);
  }
}
.maintable thead th {
  background: none;
  text-align: center;
  width: auto;
}
@media (max-width: 640px) {
  .maintable thead {
    display: none;
  }
}
.maintable.half th {
  width: 50%;
}
@media (max-width: 640px) {
  .maintable.half th {
    width: 100%;
  }
}/*# sourceMappingURL=base.css.map */