@import url("https://fonts.googleapis.com/css2?family=LINE+Seed+JP:wght@400;700&display=swap");
/* ---------- reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  font-size: 100%;
  font-style: normal;
  margin: 0;
  padding: 0;
  vertical-align: baseline; }

/* ---------- body ---------- */
body {
  color: #333;
  font-family: "LINE Seed JP", sans-serif;
  font-weight: 400;
  line-height: 1;
  text-size-adjust: 100%;
  transition: background-color .3s; }
  @media only screen and (max-width: 520px) {
    body.open {
      background-color: #F8F5EB; } }

p, dl, ul, ol, th {
  font-size: 0.9375rem;
  line-height: 1.8;
  padding: 0 0 20px; }
  @media only screen and (max-width: 520px) {
    p, dl, ul, ol, th {
      font-size: 0.875rem;
      line-height: 1.7; } }

ul, ol {
  list-style: none; }

a {
  color: #333; }

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

/* ---------- header ---------- */
.header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  height: 100px;
  width: 100%; }
  @media only screen and (max-width: 834px) {
    .header {
      height: 70px; } }
  .header > .logo {
    padding: 0 20px; }
    @media only screen and (max-width: 834px) {
      .header > .logo {
        padding: 0 10px; }
        .header > .logo img {
          height: 50px;
          width: auto; } }
  .header p.menu {
    display: none; }
    @media only screen and (max-width: 834px) {
      .header p.menu {
        align-items: center;
        background-color: #006F39;
        border-radius: 3px;
        display: flex;
        flex-direction: column;
        gap: 5px 0;
        height: 40px;
        justify-content: center;
        padding: 0;
        position: fixed;
        right: 15px;
        top: 15px;
        width: 40px;
        z-index: 10000; }
        .header p.menu span {
          background-color: #fff;
          height: 2px;
          transition: all .3s;
          width: 26px; }
          .header p.menu span:nth-of-type(1) {
            top: 0; }
            .open .header p.menu span:nth-of-type(1) {
              background-color: #fff;
              transform: translateY(3.5px) rotate(-30deg); }
          .header p.menu span:nth-of-type(2) {
            top: calc(50% - 1px); }
            .open .header p.menu span:nth-of-type(2) {
              display: none; }
          .header p.menu span:nth-of-type(3) {
            bottom: 0; }
            .open .header p.menu span:nth-of-type(3) {
              background-color: #fff;
              transform: translateY(-3.5px) rotate(30deg); } }
  .header nav {
    align-items: center;
    display: flex;
    padding: 0 30px 0 0;
    white-space: nowrap; }
    @media only screen and (max-width: 834px) {
      .header nav {
        background-color: #006F39;
        display: none;
        height: 100vh;
        left: 0;
        padding: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 9999; } }
    .header nav p.logo {
      display: none; }
      @media only screen and (max-width: 834px) {
        .header nav p.logo {
          display: block;
          padding: 10px; }
          .header nav p.logo img {
            height: 50px;
            width: auto; } }
    .header nav ul {
      align-items: center;
      display: flex;
      gap: 0 25px;
      padding: 0; }
      @media only screen and (max-width: 834px) {
        .header nav ul {
          display: block;
          margin: 0 auto;
          text-align: center; } }
      @media only screen and (max-width: 834px) {
        .header nav ul li {
          padding: 15px 0 0; } }
      .header nav ul li a {
        display: block;
        font-weight: 700;
        padding: 1px 0 0;
        text-decoration: none; }
        @media only screen and (max-width: 834px) {
          .header nav ul li a {
            color: #fff;
            font-size: 1.25rem;
            font-weight: 400; } }
    .header nav div {
      align-items: center;
      display: flex;
      gap: 3px 20px;
      padding: 0 0 0 25px; }
      @media only screen and (max-width: 1024px) {
        .header nav div {
          flex-direction: column; } }
      @media only screen and (max-width: 834px) {
        .header nav div {
          gap: 15px 20px;
          padding: 30px 0 0; } }
      .header nav div p.form {
        padding: 0; }
        @media only screen and (max-width: 1024px) {
          .header nav div p.form {
            order: 1; } }
        @media only screen and (max-width: 834px) {
          .header nav div p.form {
            order: 0; } }
        .header nav div p.form a {
          background-color: #E60012;
          border-radius: 99px;
          color: #fff;
          display: block;
          font-weight: 700;
          padding: 3px 10px 2px;
          text-decoration: none; }
          @media only screen and (max-width: 834px) {
            .header nav div p.form a {
              font-size: 1.25rem;
              font-weight: 400;
              padding: 3px 15px 5px; } }
      .header nav div p.phone {
        padding: 0; }
        @media only screen and (max-width: 1024px) {
          .header nav div p.phone {
            order: 0; } }
        @media only screen and (max-width: 834px) {
          .header nav div p.phone {
            order: 1; } }
        .header nav div p.phone a {
          background-image: url("../img/base/phone.svg");
          background-position: 0 8px;
          background-repeat: no-repeat;
          color: #E60012;
          display: block;
          font-size: 1.25rem;
          font-weight: 700;
          padding: 0 0 0 25px;
          text-decoration: none; }
          @media only screen and (max-width: 834px) {
            .header nav div p.phone a {
              font-size: 1.375rem; } }

/* ---------- contact ---------- */
.contact {
  padding: 0 50px 80px; }
  @media only screen and (max-width: 834px) {
    .contact {
      padding: 0; } }
  .contact div {
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 360px;
    margin: 0 auto;
    max-width: 960px;
    overflow: hidden;
    padding: 20px 50px 0;
    position: relative;
    z-index: 0; }
    @media only screen and (max-width: 834px) {
      .contact div {
        background-color: #E0F1F8;
        border-radius: 0;
        min-height: inherit;
        padding: 60px 5vw 40px;
        text-align: center; } }
    @media only screen and (max-width: 520px) {
      .contact div {
        text-align: left; } }
    .contact div::before {
      background-image: url("../img/base/contact.jpg");
      background-position: center 0;
      background-repeat: no-repeat;
      background-size: auto 100%;
      content: "";
      height: 100%;
      position: absolute;
      right: 0;
      top: 0;
      width: 50%;
      z-index: -10; }
      @media only screen and (max-width: 834px) {
        .contact div::before {
          display: none; } }
    .contact div::after {
      background: linear-gradient(90deg, #E0F1F8 90%, rgba(224, 241, 248, 0));
      content: "";
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      width: 60%;
      z-index: -1; }
      @media only screen and (max-width: 834px) {
        .contact div::after {
          display: none; } }
    .contact div p.title {
      font-size: 1.5rem;
      font-weight: 700;
      padding: 0 0 15px; }
      @media only screen and (max-width: 834px) {
        .contact div p.title {
          font-size: 1.25rem;
          text-align: center; } }
      .contact div p.title em {
        color: #E60012;
        display: block;
        font-size: 1.125rem;
        font-weight: 700; }
    .contact div ul {
      display: grid;
      gap: 10px 20px;
      grid-template-columns: repeat(2, 1fr);
      max-width: 560px; }
      @media only screen and (max-width: 834px) {
        .contact div ul {
          margin: 0 auto; } }
      @media only screen and (max-width: 520px) {
        .contact div ul {
          grid-template-columns: repeat(1, 1fr); } }
      .contact div ul li {
        display: grid;
        gap: 0;
        grid-row: span 2;
        grid-template-rows: subgrid; }
        .contact div ul li a {
          align-items: center;
          border-radius: 99px;
          display: flex;
          gap: 0 5px;
          font-weight: 700;
          justify-content: center;
          padding: 2px 10px;
          text-decoration: none; }
          @media only screen and (max-width: 834px) {
            .contact div ul li a {
              padding: 2px 20px; } }
        .contact div ul li span {
          display: block;
          font-weight: 700;
          padding: 5px 0 0;
          text-align: center; }
        .contact div ul li.form a {
          background-color: #E60012;
          color: #fff;
          font-size: 1.25rem; }
          @media only screen and (max-width: 834px) {
            .contact div ul li.form a {
              font-size: 1.125rem; } }
          @media only screen and (max-width: 520px) {
            .contact div ul li.form a {
              padding: 5px 20px; } }
        .contact div ul li.form span {
          color: #E60012; }
        .contact div ul li.phone a {
          background-color: #E0F1F8;
          border: #0066CC 2px solid;
          color: #0066CC;
          font-size: 1.375rem; }
          @media only screen and (max-width: 834px) {
            .contact div ul li.phone a {
              font-size: 1.25rem; } }
          .contact div ul li.phone a::before {
            aspect-ratio: 1 / 1;
            background-image: url("../img/base/phone_bl.svg");
            background-position: 0 0;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            content: "";
            height: 18px; }
        .contact div ul li.phone span {
          color: #0066CC; }
          .contact div ul li.phone span em {
            padding: 0 0 0 3px; }

/* ---------- footer ---------- */
.footer {
  align-items: center;
  background-color: #006F39;
  display: flex;
  gap: 0 30px;
  padding: 20px 20px 0; }
  .footer ul {
    align-items: center;
    display: flex;
    gap: 0 20px; }
    .footer ul li a {
      color: #fff;
      text-decoration: none; }
  .footer p.copyright {
    color: #fff;
    font-size: 0.75rem;
    margin: 0 0 0 auto; }

/* ---------- main ---------- */
.main-header {
  padding: 0 0 100px; }
  @media only screen and (max-width: 834px) {
    .main-header {
      padding: 0 0 60px; } }
  .main-header h1 {
    background-color: #006F39;
    color: #fff;
    font-size: 1.75rem;
    font-weight: 500;
    padding: 80px 0;
    text-align: center; }

.main-contents {
  margin: 0 auto;
  max-width: 1260px;
  padding: 0 5vw; }
  #guide .main-contents {
    max-width: 1920px; }
  #overseas .main-contents {
    max-width: 1600px; }

.section {
  padding-bottom: 80px; }
  @media only screen and (max-width: 834px) {
    .section {
      padding-bottom: 40px; } }

p.summary {
  padding: 0 0 30px;
  text-align: center; }
  @media only screen and (max-width: 834px) {
    p.summary {
      text-align: left; }
      p.summary br {
        display: none; } }

/* ---------- title ---------- */
.title-l {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.6;
  padding: 0 0 25px;
  text-align: center; }
  .title-l em {
    font-weight: 700; }
  .title-l span {
    color: #E60012;
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    padding: 0 0 5px; }
  .title-l br {
    display: none; }
    @media only screen and (max-width: 520px) {
      .title-l br {
        display: block; } }

.title-m {
  align-items: center;
  display: flex;
  gap: 0 10px;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 30px; }
  .title-m::before, .title-m::after {
    background-color: #eee;
    content: "";
    display: block;
    flex: 1;
    height: 1px; }

.title-s {
  border-bottom: #eee 1px solid;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 25px;
  padding: 0 0 15px; }

/* ---------- list ---------- */
.disc {
  display: flex;
  flex-direction: column;
  gap: 10px 0;
  list-style: disc;
  margin: 0 0 0 20px; }

/* ---------- keyvisual ---------- */
#keyvisual {
  margin: 0 0 80px; }
  @media only screen and (max-width: 1024px) {
    #keyvisual {
      margin: 0 0 60px; } }
  #keyvisual p {
    padding: 0;
    text-align: center; }
    #keyvisual p img.pc {
      display: inline-block; }
      @media only screen and (max-width: 834px) {
        #keyvisual p img.pc {
          display: none; } }
    #keyvisual p img.sp {
      display: none; }
      @media only screen and (max-width: 834px) {
        #keyvisual p img.sp {
          display: inline-block; } }

/* ---------- feature ---------- */
#feature {
  padding: 0 5vw 30px; }
  #feature section {
    align-items: center;
    display: flex;
    margin: 0 auto 50px;
    max-width: 1260px; }
    @media only screen and (max-width: 1024px) {
      #feature section {
        margin: 0 -5vw 50px 0; } }
    @media only screen and (max-width: 834px) {
      #feature section {
        flex-direction: column;
        margin: 0 0 20px; } }
    #feature section div {
      flex: 1;
      padding: 0 50px; }
      @media only screen and (max-width: 1366px) {
        #feature section div {
          padding: 0 50px 0 0; } }
      @media only screen and (max-width: 834px) {
        #feature section div {
          padding: 0; } }
      #feature section div h3 {
        padding: 0 0 20px; }
        @media only screen and (max-width: 834px) {
          #feature section div h3 {
            padding: 0 0 10px; } }
        #feature section div h3::before {
          background-color: #E60012;
          color: #fff;
          content: attr(data-en);
          font-size: 0.875rem; }
        #feature section div h3 span {
          display: block;
          font-size: 1.75rem;
          font-weight: 400;
          line-height: 1.5;
          padding: 10px 0 0; }
          @media only screen and (max-width: 834px) {
            #feature section div h3 span {
              font-size: 1.5rem; } }
          #feature section div h3 span em {
            font-weight: 700; }
    #feature section img {
      border-radius: 20px;
      margin: 0 0 20px;
      width: 55%; }
      @media only screen and (max-width: 1366px) {
        #feature section img {
          aspect-ratio: 3 / 2.5;
          object-fit: cover;
          width: 50%; } }
      @media only screen and (max-width: 1024px) {
        #feature section img {
          border-radius: 20px 0 0 20px; } }
      @media only screen and (max-width: 834px) {
        #feature section img {
          aspect-ratio: 16 / 9;
          border-radius: 20px;
          margin: 0 0 30px;
          width: 100%; } }
    @media only screen and (max-width: 1024px) {
      #feature section:nth-child(even) {
        margin: 0 0 50px -5vw; } }
    @media only screen and (max-width: 834px) {
      #feature section:nth-child(even) {
        margin: 0 0 20px; } }
    #feature section:nth-child(even) div {
      order: 1; }
      @media only screen and (max-width: 1366px) {
        #feature section:nth-child(even) div {
          padding: 0 0 0 50px; } }
      @media only screen and (max-width: 834px) {
        #feature section:nth-child(even) div {
          order: 0;
          padding: 0; } }
    @media only screen and (max-width: 1024px) {
      #feature section:nth-child(even) img {
        border-radius: 0 20px 20px 0; } }
    @media only screen and (max-width: 834px) {
      #feature section:nth-child(even) img {
        border-radius: 20px; } }

/* ---------- home-course ---------- */
#home-course {
  background: linear-gradient(160deg, rgba(0, 111, 57, 0.07), rgba(255, 204, 0, 0.07));
  margin: 0 0 80px;
  overflow: hidden;
  padding: 80px 5vw;
  position: relative; }
  @media only screen and (max-width: 834px) {
    #home-course {
      margin: 0;
      padding: 60px 5vw; } }
  #home-course h2 {
    font-size: 0.875rem;
    padding: 0 20px 50px; }
    @media only screen and (max-width: 834px) {
      #home-course h2 {
        text-align: center; } }
    #home-course h2::before {
      color: #006F39;
      content: attr(data-en);
      display: block;
      font-size: 1.5rem;
      font-weight: 700;
      padding: 0 0 15px; }
  #home-course .slick-list {
    overflow: visible; }
  #home-course .slick-track {
    display: flex; }
  #home-course .slick-slide {
    height: auto !important; }
    #home-course .slick-slide > div {
      height: 100%; }
  #home-course button {
    aspect-ratio: 1 / 1;
    background-color: #006F39;
    border: 0;
    color: #fff;
    cursor: pointer;
    height: 50px;
    position: absolute;
    top: calc(50% - 25px);
    z-index: 99; }
    #home-course button._prev {
      left: -5vw; }
    #home-course button._next {
      right: -5vw; }
  #home-course > p {
    position: absolute;
    right: calc(5vw + 20px);
    top: 85px; }
    @media only screen and (max-width: 834px) {
      #home-course > p {
        padding: 40px 0 0;
        position: static;
        text-align: center; } }
    #home-course > p a {
      background-image: url("../img/base/arrow1.svg");
      background-position: right 10px center;
      background-repeat: no-repeat;
      border: #006F39 2px solid;
      border-radius: 99px;
      color: #006F39;
      display: inline-block;
      font-size: 1rem;
      font-weight: 700;
      line-height: 1;
      padding: 10px 30px 9px 15px;
      text-decoration: none; }

.course {
  height: 100%;
  padding: 0 20px; }
  .course a {
    background-color: #fff;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 0 25px;
    text-decoration: none; }
    .course a img {
      aspect-ratio: 16 / 10;
      margin: 0 0 25px;
      object-fit: cover; }
    .course a p {
      font-size: 1.125rem;
      padding: 15px 20px 10px; }
    .course a .course-category {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      padding: 0 20px; }
      .course a .course-category li {
        background-color: #006F39;
        border-radius: 3px;
        color: #fff;
        line-height: 1;
        padding: 3px 5px 2px; }
    .course a .course-tag {
      margin: auto 0 0;
      display: flex;
      flex-wrap: wrap;
      gap: 10px 15px;
      padding: 0 20px; }
      .course a .course-tag li {
        color: #006F39; }
        .course a .course-tag li::before {
          content: "#"; }

/* ---------- thema ---------- */
#thema ul.tag {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 15px;
  justify-content: center;
  padding: 20px 0 60px; }
  @media only screen and (max-width: 834px) {
    #thema ul.tag {
      padding: 0 0 40px; } }
  #thema ul.tag li a {
    font-weight: 600;
    text-decoration: none; }
    #thema ul.tag li a::before {
      content: "#"; }
#thema ul.banner {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(2, 1fr); }
  @media only screen and (max-width: 834px) {
    #thema ul.banner {
      gap: 20px; } }
  @media only screen and (max-width: 520px) {
    #thema ul.banner {
      grid-template-columns: repeat(1, 1fr); } }

/* ---------- overseas ---------- */
#overseas h3 {
  align-items: center;
  color: #006F39;
  display: flex;
  font-size: 1.125rem;
  gap: 0 15px;
  padding: 0 0 35px; }
  #overseas h3::before, #overseas h3::after {
    background: #006F39;
    content: "";
    display: block;
    height: 1px;
    flex: 1; }
#overseas section {
  padding: 40px 0 0; }
  #overseas section ul {
    display: grid;
    padding: 0 0 20px; }

#overseas-service ul {
  gap: 40px;
  grid-template-columns: repeat(5, 1fr); }
  @media only screen and (max-width: 1024px) {
    #overseas-service ul {
      grid-template-columns: repeat(3, 1fr); } }
  @media only screen and (max-width: 834px) {
    #overseas-service ul {
      gap: 30px;
      grid-template-columns: repeat(2, 1fr); } }
  #overseas-service ul li p.illust {
    align-items: center;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    position: relative; }
    #overseas-service ul li p.illust::after {
      aspect-ratio: 1 / 1;
      background-color: rgba(0, 111, 57, 0.05);
      border-radius: 9999px;
      content: "";
      left: 5%;
      position: absolute;
      top: 5%;
      width: 90%; }
  #overseas-service ul li h4 {
    color: #006F39;
    padding: 15px 0 5px;
    text-align: center; }
  #overseas-service ul li p {
    padding: 0; }

#overseas-point ul {
  gap: 40px;
  grid-template-columns: repeat(3, 1fr); }
  @media only screen and (max-width: 834px) {
    #overseas-point ul {
      gap: 20px;
      grid-template-columns: repeat(2, 1fr); } }
  #overseas-point ul li {
    border: #eee 1px solid; }
    #overseas-point ul li img {
      max-width: none;
      width: 100%; }
    #overseas-point ul li h4 {
      color: #006F39;
      padding: 15px 15px 5px; }
    #overseas-point ul li p {
      padding: 0 15px 15px; }

/* ---------- guide ---------- */
#guide-howto ol {
  display: grid;
  gap: 0 30px;
  grid-template-columns: repeat(5, 1fr); }
  @media only screen and (max-width: 1366px) {
    #guide-howto ol {
      grid-template-columns: repeat(4, 1fr); } }
  @media only screen and (max-width: 1024px) {
    #guide-howto ol {
      grid-template-columns: repeat(3, 1fr); } }
  @media only screen and (max-width: 834px) {
    #guide-howto ol {
      grid-template-columns: repeat(2, 1fr); } }
  #guide-howto ol li h3 {
    color: #47AA9A;
    font-size: 1rem;
    line-height: 1.4;
    text-align: center; }
    @media only screen and (max-width: 520px) {
      #guide-howto ol li h3 {
        font-size: 0.9375rem; } }
    #guide-howto ol li h3::before {
      content: attr(data-num);
      display: block;
      font-size: 2.5rem; }
  #guide-howto ol li p:nth-child(2) {
    align-items: center;
    aspect-ratio: 1 / 1;
    background-color: #EAF5F4;
    border-radius: 9999px;
    display: flex;
    justify-content: center;
    margin: -15% 0 -10%;
    padding: 2% 0 0; }
    #guide-howto ol li p:nth-child(2) img {
      height: auto;
      width: 70%; }
  #guide-howto ol li p:nth-child(3) {
    padding: 0 10px 20px; }

/* ---------- faq ---------- */
#faq dl {
  border-top: rgba(0, 111, 57, 0.2) 1px solid;
  margin: 0 0 20px; }
  @media only screen and (max-width: 520px) {
    #faq dl {
      margin: 0 -20px 20px; } }
  #faq dl div {
    border-bottom: rgba(0, 111, 57, 0.2) 1px solid; }
    @media (hover) {
      #faq dl div:hover {
        background-color: rgba(0, 111, 57, 0.05); } }
    #faq dl div dt {
      background-image: url("../img/base/maat.svg");
      background-position: left 20px top 35px;
      background-repeat: no-repeat;
      background-size: 21px auto;
      color: #006F39;
      cursor: pointer;
      font-size: 1.125rem;
      font-weight: 700;
      letter-spacing: 0.1rem;
      line-height: 1.8;
      padding: 30px 40px 27px 50px;
      position: relative; }
      @media only screen and (max-width: 520px) {
        #faq dl div dt {
          background-position: left 20px top 29px;
          background-size: 18px auto;
          font-size: 1rem;
          letter-spacing: 0.05rem;
          padding: 25px 40px 23px 45px; } }
      #faq dl div dt::after {
        background-color: #006F39;
        clip-path: polygon(0 0, 50% 100%, 100% 0);
        content: "";
        height: 7px;
        position: absolute;
        right: 20px;
        transition: transform .5s;
        top: calc(50% - 3.5px);
        width: 14px; }
    #faq dl div.open {
      background-color: rgba(0, 111, 57, 0.05); }
      #faq dl div.open dt::after {
        transform: rotate(180deg); }
    #faq dl div dd {
      display: none;
      padding: 0 20px 15px 50px; }
      @media only screen and (max-width: 520px) {
        #faq dl div dd {
          padding: 0 20px 10px 20px; } }
      #faq dl div dd p {
        line-height: 2; }
      #faq dl div dd .table-cancel,
      #faq dl div dd .table-insurance {
        border-collapse: collapse;
        margin: 0 0 25px; }
        #faq dl div dd .table-cancel th,
        #faq dl div dd .table-cancel td,
        #faq dl div dd .table-insurance th,
        #faq dl div dd .table-insurance td {
          border: rgba(0, 111, 57, 0.2) 1px solid;
          font-weight: 500;
          padding: 10px;
          text-align: center; }
        #faq dl div dd .table-cancel th,
        #faq dl div dd .table-insurance th {
          background-color: rgba(0, 111, 57, 0.1);
          color: #006F39;
          font-weight: 700; }
      #faq dl div dd .table-cancel th {
        text-align: left; }

/* ---------- company ---------- */
#company table {
  border-collapse: collapse;
  border-top: #ddd 1px solid;
  margin: 0 0 25px;
  width: 100%; }
  #company table th,
  #company table td {
    border-bottom: #ddd 1px solid;
    font-weight: 500;
    font-size: 0.9375rem;
    line-height: 1.8;
    padding: 20px 0; }
  #company table th {
    color: #006F39;
    font-weight: 700;
    text-align: left; }

/* ---------- stipulation ---------- */
#stipulation .section section {
  padding: 30px 0 0; }
  #stipulation .section section section {
    padding: 20px 0 0; }
#stipulation .section h2,
#stipulation .section h3,
#stipulation .section h4 {
  font-size: 0.9375rem;
  line-height: 1.8; }
#stipulation .section p {
  font-size: 0.875rem;
  line-height: 1.8; }
#stipulation ul li {
  font-size: 0.875rem;
  line-height: 1.8;
  margin: 0 0 0 1.75rem;
  padding: 10px 0 0;
  text-indent: -1.75rem; }
#stipulation table {
  border: #333 1px solid;
  border-collapse: collapse;
  margin: 15px 0 25px;
  width: 100%; }
  #stipulation table th,
  #stipulation table td {
    border: #333 1px solid;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.8;
    padding: 10px;
    text-align: center;
    white-space: nowrap; }
    #stipulation table th.notice,
    #stipulation table td.notice {
      text-align: left;
      white-space: normal; }
      #stipulation table th.notice ul,
      #stipulation table td.notice ul {
        padding: 0; }
  #stipulation table th {
    text-indent: -1.75rem;
    padding: 10px 10px 10px calc(10px + 1.75rem);
    text-align: left;
    white-space: normal; }

/* ---------- contact ---------- */
#contact table {
  border-collapse: collapse;
  border-spacing: 0;
  border-top: #eee 1px solid;
  margin: 0 0 40px;
  width: 100%; }
  @media only screen and (max-width: 834px) {
    #contact table {
      margin: 0 -5vw 40px;
      width: calc(100% + 10vw); } }
  #contact table tr {
    border-bottom: #eee 1px solid; }
    #contact table tr.error {
      background-color: rgba(230, 0, 18, 0.1); }
    #contact table tr th {
      text-align: left;
      padding: 25px 20px;
      vertical-align: middle;
      white-space: nowrap;
      width: 240px; }
      @media only screen and (max-width: 834px) {
        #contact table tr th {
          display: block;
          padding: 20px 5vw 10px;
          width: 100%; } }
      #contact table tr th span {
        background-color: #E60012;
        border-radius: 99px;
        color: #fff;
        font-size: 0.8125rem;
        font-weight: 700;
        float: right;
        line-height: 1;
        margin: 2px 0 0;
        padding: 6px 5px; }
        @media only screen and (max-width: 834px) {
          #contact table tr th span {
            margin: 0; } }
    #contact table tr td {
      padding: 25px 20px 25px 0; }
      @media only screen and (max-width: 834px) {
        #contact table tr td {
          display: block;
          padding: 0 5vw 20px;
          width: 100%; } }
      #contact table tr td input[type="text"],
      #contact table tr td input[type="tel"],
      #contact table tr td input[type="email"],
      #contact table tr td textarea {
        background-color: #fff;
        border: rgba(0, 0, 0, 0.1) 1px solid;
        border-radius: 3px;
        font-size: 1.125rem;
        line-height: 1.6;
        outline: none;
        padding: 7px 10px;
        width: 100%; }
        @media only screen and (max-width: 834px) {
          #contact table tr td input[type="text"],
          #contact table tr td input[type="tel"],
          #contact table tr td input[type="email"],
          #contact table tr td textarea {
            font-size: 1rem; } }
      #contact table tr td input[name="name"],
      #contact table tr td input[name="kana"] {
        width: 400px; }
        @media only screen and (max-width: 834px) {
          #contact table tr td input[name="name"],
          #contact table tr td input[name="kana"] {
            width: 100%; } }
      #contact table tr td input[type="tel"] {
        width: 200px; }
        @media only screen and (max-width: 834px) {
          #contact table tr td input[type="tel"] {
            width: 100%; } }
      #contact table tr td textarea {
        height: 150px; }
      #contact table tr td p {
        padding: 0; }
      #contact table tr td p.errmsg {
        color: #BF0000;
        font-weight: 500;
        padding: 10px 0 0; }
#contact .button {
  display: flex;
  gap: 0 20px;
  line-height: 1;
  justify-content: center;
  padding: 20px 0; }
  #contact .button button {
    background-color: #E60012;
    border: 0;
    border-radius: 99px;
    color: #fff;
    cursor: pointer;
    font-weight: 500;
    letter-spacing: 0.05rem;
    line-height: 1;
    padding: 15px 20px;
    white-space: nowrap; }
    #contact .button button.back {
      background-color: #999;
      padding: 15px 20px; }
      @media only screen and (max-width: 1024px) {
        #contact .button button.back {
          border-radius: 99px; } }

/* ---------- privacy ---------- */
#privacy dl {
  padding: 0 0 15px; }
  #privacy dl div {
    padding: 0 0 35px; }
    #privacy dl div:last-child {
      padding: 0; }
    #privacy dl div dt {
      border-bottom: rgba(0, 111, 57, 0.15) 1px solid;
      font-size: 1rem;
      font-weight: 700;
      margin: 0 0 15px;
      padding: 0 0 5px; }
    #privacy dl div dd p,
    #privacy dl div dd ul {
      padding: 0 0 5px; }

/* ---------- course ---------- */
#course-header img {
  aspect-ratio: 16 / 9;
  margin: 0 0 20px;
  object-fit: cover;
  width: 100%; }
#course-header h1 {
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.5; }
  @media only screen and (max-width: 520px) {
    #course-header h1 {
      font-size: 1.375rem; } }
#course-header .course-category {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 20px 0; }
  #course-header .course-category li {
    background-color: #006F39;
    border-radius: 3px;
    color: #fff;
    line-height: 1;
    padding: 3px 5px 2px; }
#course-header .course-tag {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 15px;
  padding: 15px 0; }
  #course-header .course-tag li {
    color: #006F39; }
    #course-header .course-tag li::before {
      content: "#"; }

#course-list ol li {
  position: relative;
  z-index: 0; }
  #course-list ol li::after {
    background-color: #E50012;
    content: "";
    height: 100%;
    left: 49px;
    position: absolute;
    top: 0;
    width: 1px;
    z-index: -1; }
    @media only screen and (max-width: 520px) {
      #course-list ol li::after {
        left: 39px; } }
  #course-list ol li.start > div div .title, #course-list ol li.goal > div div .title {
    padding: 33px 0 0; }
    @media only screen and (max-width: 520px) {
      #course-list ol li.start > div div .title, #course-list ol li.goal > div div .title {
        padding: 28px 0 0; } }
  #course-list ol li > div {
    align-items: flex-start;
    display: flex;
    gap: 0 30px; }
    @media only screen and (max-width: 520px) {
      #course-list ol li > div {
        gap: 0 15px; } }
    #course-list ol li > div > p {
      align-items: center;
      aspect-ratio: 1 / 1;
      background-color: #fff;
      border: #E50012 1px solid;
      border-radius: 99px;
      display: flex;
      color: #E50012;
      flex-direction: column;
      font-weight: 700;
      justify-content: center;
      line-height: 1.4;
      padding: 0;
      width: 99px; }
      @media only screen and (max-width: 520px) {
        #course-list ol li > div > p {
          font-size: 0.8125rem;
          width: 79px; } }
      #course-list ol li > div > p span {
        font-size: 0.75rem; }
    #course-list ol li > div div {
      flex: 1;
      overflow: hidden; }
      #course-list ol li > div div p.title {
        color: #E50012;
        font-size: 1.125rem;
        padding: 15px 0 0; }
        @media only screen and (max-width: 520px) {
          #course-list ol li > div div p.title {
            font-size: 0.9375rem; } }
      #course-list ol li > div div p.name {
        font-size: 1.5rem; }
        @media only screen and (max-width: 520px) {
          #course-list ol li > div div p.name {
            font-size: 1.125rem; } }
      #course-list ol li > div div p.image,
      #course-list ol li > div div p:nth-child(3) {
        float: right;
        padding: 5px 0 20px 30px;
        width: 50%; }
        @media only screen and (max-width: 520px) {
          #course-list ol li > div div p.image,
          #course-list ol li > div div p:nth-child(3) {
            float: none;
            padding: 0 0 20px;
            width: 100%; } }
        #course-list ol li > div div p.image img,
        #course-list ol li > div div p:nth-child(3) img {
          aspect-ratio: 4 / 3;
          object-fit: cover;
          width: 100%; }
  #course-list ol li > p {
    align-items: flex-start;
    color: #E50012;
    margin: 0;
    padding: 20px 0 20px 70px;
    position: relative; }
    @media only screen and (max-width: 520px) {
      #course-list ol li > p {
        padding: 20px 0 20px 55px; } }
    #course-list ol li > p::before {
      background-color: #E50012;
      clip-path: polygon(0 0, 50% 100%, 100% 0);
      content: "";
      height: 12px;
      left: 42px;
      position: absolute;
      top: 27px;
      width: 15px; }
      @media only screen and (max-width: 520px) {
        #course-list ol li > p::before {
          left: 32px;
          top: 26px; } }

#course-index > ul {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(3, 1fr); }
  @media only screen and (max-width: 834px) {
    #course-index > ul {
      grid-template-columns: repeat(2, 1fr);
      gap: 5vw; } }
  @media only screen and (max-width: 520px) {
    #course-index > ul {
      grid-template-columns: repeat(1, 1fr); } }
  #course-index > ul .course {
    padding: 0; }

#course-nav {
  padding: 0 0 40px; }
  #course-nav div {
    display: flex;
    gap: 10px 20px; }
    #course-nav div p {
      font-weight: 700; }
    #course-nav div .course-category {
      display: flex;
      flex-wrap: wrap;
      gap: 10px; }
      #course-nav div .course-category li a {
        background-color: #006F39;
        border-radius: 99px;
        color: #fff;
        display: block;
        font-size: 1rem;
        line-height: 1;
        padding: 6px 15px 5px;
        text-decoration: none; }
    #course-nav div .course-tag {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 15px; }
      #course-nav div .course-tag li {
        color: #006F39; }
        #course-nav div .course-tag li a {
          color: #006F39; }
        #course-nav div .course-tag li::before {
          content: "#"; }