@charset "utf-8";
/* 1. All Devices
-------------------------------------------------------------------------------- */
/*
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Oswald:wght@200..700&display=swap'); */

@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");

body,
html {
  color: #14785a;
  letter-spacing: 0.05rem;
  height: 100%;
  width: 100%;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  /* font-family: 'Noto Sans JP', sans-serif; */
  font-weight: 500;
  background: #ebf5eb;
  -webkit-font-smoothing: antialiased;
}

.f-p {
  font-family: "Poppins", sans-serif;
}

.main {
  overflow-x: hidden;
  overflow-y: hidden;
}

a {
  color: #005046;
  transition: all 0.3s ease;
}

a:hover {
  opacity: 0.7;
  text-decoration: none;
}

p {
  text-align: justify;
}

.c-p-green {
  color: #b4c8b4;
}

.c-p-beige {
  color: #fafae6;
}

.c-green {
  color: #005046;
}

.c-gray {
  color: #3c3c3c;
}

/* .arrow-l,
.arrow-r,
.arrow-b,
.arrow-t {
  position: relative;
  display: inline-block;
  padding: 0;
  vertical-align: middle;
  text-decoration: none;
  font-size: 2rem;
}

.arrow-l::before,
.arrow-l::after,
.arrow-r::before,
.arrow-r::after,
.arrow-b::before,
.arrow-b::after,
.arrow-t::before,
.arrow-t::after {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}

.arrow-r::before {
  right: 20px;
  width: 15px;
  height: 15px;
  border-top: 2px solid #006230;
  border-right: 2px solid #006230;
  transform: rotate(45deg);
}

.arrow-b::before {
  top: -5px;
  right: 20px;
  width: 15px;
  height: 15px;
  border-top: 2px solid #006230;
  border-right: 2px solid #006230;
  transform: rotate(135deg);
}

.arrow-t::before {
  right: 20px;
  width: 15px;
  height: 15px;
  border-top: 2px solid #006230;
  border-right: 2px solid #006230;
  transform: rotate(-45deg);
} */

.anc-wrap {
  position: relative;
}

.anc-wrap span {
  top: -40px;
  position: absolute;
}

/* ::selection {
  background: #FAF032;
  color:#fff;
} */

/* toggle menu
----------------------------------------------- */
.menu-button {
  display: none;
}

.toggle-menu {
  display: none;
}

.header {
  padding: 20px;
  height: 880px;
  background: linear-gradient(150deg, rgba(20, 120, 90, 1) 20%, rgba(0, 80, 70, 1) 80%);
}

.header h1 {
  top: 0;
  left: 0;
  padding: 10px 20px;
  border-radius: 0 0 20px 0;
  background: #fff;
}

.header .kv {
  background: url("images/kv-bg.png") no-repeat center;
  background-size: cover;
}

.nav ul li {
  margin-top: 10px;
  margin-bottom: 10px;
}

.nav ul li a {
  letter-spacing: 0.3rem;
  padding: 10px 20px;
  text-decoration: none;
  display: block;
  border-right: 2px dotted #005046;
}

.nav ul li:last-child a {
  border-right: none;
}

.bg-beige {
  background: #fafae6;
}

.bg-green {
  background: #005046;
}

.sec {
  padding-left: 20px;
  padding-right: 20px;
}

.sec-num {
  margin-bottom: 20px;
}

.sec-num img {
  height: 60px;
}

.sec-title {
  font-weight: 400;
  position: relative;
}

.bg-green .sec-title {
  color: #fafae6;
}

.sec-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  width: 100%;
  border-bottom: 1px solid #14785a;
}

.bg-green .sec-title::before {
  border-bottom: 1px solid #fafae6;
}

.sec-title span {
  display: inline-block;
  background: #fafae6;
  position: relative;
  z-index: 1;
}

.bg-green .sec-title span {
  background: #005046;
}

.sec-title .jp {
  font-size: 4rem;
  padding: 0 20px;
  margin-bottom: -40px;
}

.sec-title .en {
  margin-top: 16px;
  font-size: 1.6rem;
}

.box-profile {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

.box-profile .l-box {
  padding: 10px;
}

.box-profile p {
  letter-spacing: 0;
}

.tooltip {
  text-align: center;
}

.tooltip span {
  color: #005046;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.5;
  padding: 8px 70px;
  background: #faf032;
  border-radius: 30px;
  display: inline-block;
  position: relative;
}

.tooltip span::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -12px;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #faf032;
}

.bt-wrap a {
  color: #005046;
  font-size: 1.8rem;
  text-align: center;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  max-width: 440px;
  padding: 14px 70px;
  margin-left: auto;
  margin-right: auto;
  background: #faf032 url("images/arrow-right.svg") no-repeat right 20px center;
  background-size: 28px auto;
  border: 1px solid #005046;
  border-radius: 30px;
  display: block;
}

.bt-wrap a:hover {
  color: #faf032;
  background: #005046;
  border: 1px solid #faf032;
  opacity: 1;
}

.box-border {
  padding: 6px 20px 10px;
  border: 1px solid #fafae6;
}

.box-border h3 {
  padding-bottom: 6px;
  border-bottom: 1px solid #fafae6;
}

.num-box-list li {
  margin-bottom: 10px;
}

.num-box-list .num {
  font-size: 2.4rem;
  font-weight: 500;
  font-family: "Poppins", sans-serif;
  color: #005046;
  text-align: center;
  width: 48px;
  background: #fafae6;
}

.num-box-list .text {
  color: #fff;
  padding: 10px 12px;
  width: calc(100% - 48px);
  background: #14785a;
}

.contents-wrap {
  padding: 40px;
  background: #ebf5eb;
}

.contents-wrap h3 {
  color: #fff;
  font-size: 1.6rem;
  line-height: 1.5;
  padding: 6px 20px 8px;
  background: #14785a;
}

.contents-wrap p {
  color: #14785a;
  font-size: 1.6rem;
  line-height: 1.7;
  padding: 12px 20px 30px;
}

.c-beige {
  color: #ebf5eb;
}

.c-g {
  color: #14785a;
}

.box-course {
  margin-bottom: 24px;
}

.box-course h3 {
  color: #fff;
  padding: 14px 28px;
  background: #14785a;
}

.box-course .row {
  padding: 24px 28px;
  background: #ebf5eb;
}

.box-course .row h4 {
  color: #14785a;
  padding: 0px 0px 10px;
  border-bottom: 1px solid #005046;
}

.box-course .row p {
  color: #3c3c3c;
  padding-top: 16px;
}

.icon-pin {
  position: relative;
  margin-right: 2px;
  bottom: -3px;
}

.box-course .row p a {
  color: #3c3c3c;
}

.box-course .row .c-g,
.box-course .row .c-g a {
  color: #14785a;
}

.list-1 li {
  position: relative;
  padding-left: 20px;
}

.list-1 li::before {
  content: "●";
  font-size: 80%;
  color: #14785a;
  position: absolute;
  left: 0;
  top: 4px;
}

.detailed-wrap h3 {
  text-align: center;
  font-weight: 500;
  padding: 10px;
  border: 1px solid #14785a;
  border-radius: 40px;
}

.detailed-wrap .box-wrap {
  padding: 20px 0;
  background: #ebf5eb;
}

.detailed-wrap .box-wrap .l-block {
  width: 150px;
  border-right: 3px dotted #b4c8b4;
}

.detailed-wrap .box-wrap .r-block {
  width: calc(100% - 150px);
}

.detailed-wrap .box-wrap .block-yen {
  width: 160px;
}

.detailed-wrap .box-wrap .block-text {
  width: calc(100% - 160px);
}

.detailed-wrap table tr:first-child th {
  border: none;
}

.detailed-wrap table tr th {
  font-weight: 400;
  font-family: "Poppins", sans-serif;
  width: 120px;
  border: 1px solid #14785a;
}

.detailed-wrap table tr td {
  font-size: 1.8rem;
  padding: 10px;
  position: relative;
}

.detailed-wrap table tr td:nth-of-type(1) {
  padding-left: 30px;
}

.detailed-wrap table tr td:nth-of-type(1):after {
  position: absolute;
  left: 20px;
  bottom: 0;
  width: calc(100% - 40px);
  content: "";
  border-bottom: 1px solid #14785a;
}

.detailed-wrap table tr td:nth-of-type(2):after {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  content: "";
  border-bottom: 1px solid #14785a;
}

.detailed-wrap .text-time {
  padding: 10px 5px;
  color: #fff;
  background: #14785a;
}

.box-border-green {
  border: 1px solid #b4c8b4;
}

.dots-line li {
  letter-spacing: 0;
  padding: 16px 2px;
  border-bottom: 2px dotted #b4c8b4;
}

.dots-line li:last-child {
  border-bottom: none;
}

.dots-table > div {
  padding: 10px 10px;
  border-bottom: 2px dotted #b4c8b4;
}

.dots-table > div:first-child {
  border-top: 2px dotted #b4c8b4;
}

.dots-table > div:nth-child(2) {
  border-top: 2px dotted #b4c8b4;
}

.dots-table .l-block {
  width: 140px;
}

.dots-table .r-block {
  width: calc(100% - 160px);
}

.footer {
  color: #ebf5eb;
  background: #005046;
}

.sec {
  position: relative;
}

.bg {
  width: 100%;
}

.bg div {
  top: -99px;
  left: -20px;
  width: 100%;
  position: absolute;
  height: 200px;
}

.bg-1 div {
  background: url("images/city-01.svg") center no-repeat;
  background-size: 1400px auto;
}

.bg-2 div {
  left: 20px;
  background: url("images/city-02.svg") center no-repeat;
  background-size: 1400px auto;
}

.bg-3 div {
  background: url("images/city-03.svg") center no-repeat;
  background-size: 1400px auto;
}

.bg-4 div {
  background: url("images/city-04.svg") center no-repeat;
  background-size: 1400px auto;
}

.bg-5 div {
  background: url("images/city-05.svg") center no-repeat;
  background-size: 1400px auto;
}

.bg-6 div {
  background: url("images/city-06.svg") center no-repeat;
  background-size: 1400px auto;
}

.bg-7 div {
  background: url("images/city-07.svg") center no-repeat;
  background-size: 1400px auto;
}

.page-top {
  width: 80px;
  height: 80px;
  border-radius: 40px;
  position: fixed;
  right: 100px;
  bottom: 50px;
  background: url("images/pege-top.svg") no-repeat center;
  background-size: cover;
}

@media only screen and (max-width: 1200px) {
}

@media only screen and (min-width: 768px) and (max-width: 960px) {
}

/* 1. SP
-------------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  /* toggle menu
  ----------------------------------------------- */
  .menu-button {
    display: block;
    width: 60px;
    height: 50px;
    z-index: 3;
    top: 0px;
    right: 0px;
    position: fixed;
  }

  .menu-button .inner {
    top: 0px;
  }

  .menu-button:hover {
    text-decoration: none;
    opacity: 1;
    cursor: pointer;
  }

  .menu-button span {
    display: block;
    background: #005046;
    width: 60%;
    height: 2px;
    position: absolute;
    left: 20%;
    transition: all 0.4s;
  }

  .menu-button span::before {
    content: "";
    height: 3px;
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    /* background: #ddd; */
  }

  .menu-button span:first-child {
    top: 35%;
  }

  .menu-button span:nth-child(2) {
    top: 50%;
  }

  .menu-button span:last-child {
    top: 65%;
  }

  .menu-button.active span {
    background: #fff;
  }

  .menu-button.active span:first-child {
    top: 30%;
    left: 20%;
    transform: translatey(10px) rotate(30deg);
  }

  .menu-button.active span:nth-child(2) {
    opacity: 0;
  }

  .menu-button.active span:last-child {
    top: 70%;
    right: -16%;
    transform: translatey(-10px) rotate(-30deg);
  }

  .toggle-menu {
    display: none;
    position: fixed;
    height: 100%;
    width: 60%;
    top: 0;
    right: 0;
    z-index: 2;
    background: linear-gradient(150deg, rgba(20, 120, 90, 1) 20%, rgba(0, 80, 70, 1) 80%);
  }

  .toggle-menu.active + header {
    display: block !important;
    opacity: 1 !important;
  }

  .toggle-menu .inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  .toggle-menu li {
    text-align: center;
    margin: 0 auto;
    position: relative;
  }

  .toggle-menu li a {
    padding: 20px;
    display: block;
  }

  .toggle-menu li::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    border-bottom: 1px dotted #fff;
  }

  .toggle-menu li:last-child::after {
    border-bottom: none;
  }

  .toggle-menu a {
    color: #fff;
    font-size: 1.6rem;
    line-height: 1.4;
    text-decoration: none;
  }

  .anc-wrap span {
    top: -80px;
  }

  .header {
    margin-top: 50px;
    padding: 10px;
    height: auto;
    /* height: calc(100vh - 60px); */
  }

  .header h1 {
    width: 100%;
    padding: 8px 8px;
    border-radius: 0;
    position: fixed;
    z-index: 1;
  }

  .header h1 img {
    width: 160px;
  }

  .header .kv {
    padding-left: 24px;
    padding-right: 24px;
    background: url("images/sp/kv-bg.png") no-repeat center;
    background-size: cover;
  }

  .scroll-block img {
    width: 20px;
  }

  .sec-num img {
    height: 50px;
  }

  .sec-title .jp {
    font-size: 2.4rem;
    padding: 0 8px;
  }

  .sec-title {
    margin-top: -10px;
  }

  .box-profile .l-box img {
    width: 180px;
  }

  .box-profile .l-box {
    padding: 30px 10px 0px;
  }

  .sec-title .en {
    margin-top: 10px;
    font-size: 1.2rem;
  }

  .sec-title::before {
    top: 13px;
  }

  .box-profile .r-box h3 {
    padding-top: 10px;
  }

  .tooltip span {
    font-size: 1.8rem;
  }

  .contents-wrap {
    padding: 15px;
  }

  .contents-wrap h3 {
    font-size: 1.5rem;
    padding: 6px 10px 8px;
  }

  .contents-wrap p {
    font-size: 1.4rem;
  }

  .contents-wrap p {
    padding: 12px 10px 30px;
  }

  .detailed-wrap .box-wrap .l-block {
    width: 90px;
  }

  .detailed-wrap .box-wrap .r-block {
    width: calc(100% - 90px);
  }

  .detailed-wrap .box-wrap .block-yen {
    width: 110px;
  }

  .detailed-wrap .box-wrap .block-text {
    width: calc(100% - 110px);
  }

  .detailed-wrap table tr th {
    width: 60px;
  }

  .detailed-wrap table tr td {
    font-size: 1.3rem;
    padding: 4px 10px;
  }

  .detailed-wrap table tr td:nth-of-type(1) {
    text-align: left;
    padding-left: 10px;
  }

  .detailed-wrap table tr td:nth-of-type(1):after {
    left: 10px;
    width: calc(100% - 20px);
  }

  .dots-line li {
    font-size: 12px;
  }

  .dots-line li:last-child {
    border-bottom: 2px dotted #b4c8b4;
  }

  .dots-table .l-block {
    width: 70px;
  }

  .dots-table .r-block {
    width: calc(100% - 80px);
  }

  .bg div {
    left: 0px;
    width: 100%;
  }

  .bg-1 div {
    background: url("images/city-01.svg") center no-repeat;
    background-size: 160% auto;
  }

  .bg-2 div {
    background: url("images/city-02.svg") center no-repeat;
    background-size: 160% auto;
  }

  .bg-3 div {
    background: url("images/city-03.svg") center no-repeat;
    background-size: 160% auto;
  }

  .bg-4 div {
    background: url("images/city-04.svg") center no-repeat;
    background-size: 160% auto;
  }

  .bg-5 div {
    background: url("images/city-05.svg") center no-repeat;
    background-size: 160% auto;
  }

  .bg-6 div {
    background: url("images/city-06.svg") center no-repeat;
    background-size: 160% auto;
  }

  .bg-7 div {
    background: url("images/city-07.svg") center no-repeat;
    background-size: 160% auto;
  }

  .page-top {
    width: 50px;
    height: 50px;
    right: 20px;
  }

  .list-1 li {
    margin-bottom: 10px;
  }
}

/* 2. PC
-------------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) {
  /* 2-1. TB
  -------------------------------------------------------------------------------- */
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    /* 2-1-1. TB (horaizontal)
    -------------------------------------------------------------------------------- */
    @media only screen and (min-width: 992px) and (max-width: 1024px) {
    }

    /* 2-1-2. TB (vertical)
    -------------------------------------------------------------------------------- */
    @media only screen and (min-width: 764px) and (max-width: 991px) {
    }
  }
}