@charset "UTF-8";
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap);
/*! de-style.css v1.0.5 | MIT License | https://github.com/nicolas-cusan/destyle.css */

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

::after, ::before {
  -webkit-box-sizing: inherit;
  box-sizing: inherit
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent
}

body {
  margin: 0
}

main {
  display: block
}

address, blockquote, dl, figure, form, iframe, p, pre, table {
  margin: 0
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0
}

ol, ul {
  margin: 0;
  padding: 0;
  list-style: none
}

dt {
  font-weight: 700
}

dd {
  margin-left: 0
}

hr {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid;
  margin: 0;
  clear: both
}

pre {
  font-family: monospace, monospace;
  font-size: inherit
}

address {
  font-style: inherit
}

a {
  background-color: transparent;
  text-decoration: none;
  color: inherit
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted
}

b, strong {
  font-weight: bolder
}

code, kbd, samp {
  font-family: monospace, monospace;
  font-size: inherit
}

small {
  font-size: 80%
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sub {
  bottom: -.25em
}

sup {
  top: -.5em
}

img {
  border-style: none;
  vertical-align: bottom
}

embed, iframe, object {
  border: 0;
  vertical-align: bottom
}

button, input, optgroup, select, textarea {
  vertical-align: middle;
  color: inherit;
  font: inherit;
  border: 0;
  background: 0 0;
  padding: 0;
  margin: 0;
  outline: 0
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0
}

button, input {
  overflow: visible
}

button, select {
  text-transform: none
}

[type=button], [type=reset], [type=submit], button {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none
}

[type=button][disabled], [type=reset][disabled], [type=submit][disabled], button[disabled] {
  cursor: default
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
  border-style: none;
  padding: 0
}

[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring {
  outline: 1px dotted ButtonText
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0
}

legend {
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal
}

progress {
  vertical-align: baseline
}

textarea {
  overflow: auto
}

[type=checkbox], [type=radio] {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

::-webkit-input-placeholder {
  font: inherit
}

:-ms-input-placeholder {
  font: inherit
}

::-ms-input-placeholder {
  font: inherit
}

::-moz-placeholder {
  font: inherit
}

::placeholder {
  font: inherit
}

label[for] {
  cursor: pointer
}

details {
  display: block
}

summary {
  display: list-item
}

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

caption {
  text-align: left
}

td, th {
  vertical-align: top
}

th {
  text-align: left;
  font-weight: 700
}

template {
  display: none
}

[hidden] {
  display: none
}

.wrapper {
  max-width: 1080px;
  margin: 0 auto
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

html {
  font-size: 62.5%;
  overflow-x: hidden
}

body {
  font-family: "Noto Sans JP", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem
}

:root, body, html {
  width: 100%
}

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

.pd-top0 {
  padding-top: 0
}

.pd-bottom0 {
  padding-bottom: 0
}

.pd-top6 {
  padding-top: 6px
}

.pd-bottom6 {
  padding-bottom: 6px
}

.pd-top12 {
  padding-top: 12px
}

.pd-bottom12 {
  padding-bottom: 12px
}

.pd-top18 {
  padding-top: 18px
}

.pd-bottom18 {
  padding-bottom: 18px
}

.pd-top24 {
  padding-top: 24px
}

.pd-bottom24 {
  padding-bottom: 24px
}

.pd-top30 {
  padding-top: 30px
}

.pd-bottom30 {
  padding-bottom: 30px
}

.pd-top36 {
  padding-top: 36px
}

.pd-bottom36 {
  padding-bottom: 36px
}

.pd-top42 {
  padding-top: 42px
}

.pd-bottom42 {
  padding-bottom: 42px
}

.pd-top48 {
  padding-top: 48px
}

.pd-bottom48 {
  padding-bottom: 48px
}

.pd-top54 {
  padding-top: 54px
}

.pd-bottom54 {
  padding-bottom: 54px
}

.pd-top60 {
  padding-top: 60px
}

.pd-bottom60 {
  padding-bottom: 60px
}

.mg-top0 {
  padding-top: 0
}

.mg-bottom0 {
  padding-bottom: 0
}

.mg-top6 {
  padding-top: 6px
}

.mg-bottom6 {
  padding-bottom: 6px
}

.mg-top12 {
  padding-top: 12px
}

.mg-bottom12 {
  padding-bottom: 12px
}

.mg-top18 {
  padding-top: 18px
}

.mg-bottom18 {
  padding-bottom: 18px
}

.mg-top24 {
  padding-top: 24px
}

.mg-bottom24 {
  padding-bottom: 24px
}

.mg-top30 {
  padding-top: 30px
}

.mg-bottom30 {
  padding-bottom: 30px
}

.mg-top36 {
  padding-top: 36px
}

.mg-bottom36 {
  padding-bottom: 36px
}

.mg-top42 {
  padding-top: 42px
}

.mg-bottom42 {
  padding-bottom: 42px
}

.mg-top48 {
  padding-top: 48px
}

.mg-bottom48 {
  padding-bottom: 48px
}

.mg-top54 {
  padding-top: 54px
}

.mg-bottom54 {
  padding-bottom: 54px
}

.mg-top60 {
  padding-top: 60px
}

.mg-bottom60 {
  padding-bottom: 60px
}

.center {
  text-align: center
}

.right {
  text-align: right
}

[class^=material-] {
  vertical-align: middle
}

.mont {
  font-family: Montserrat, sans-serif
}

.green {
  color: #0d7b63
}

header {
  padding-top: 12px;
  height: 210px;
  background-image: url(/img/header.png);
  background-position: center bottom;
  background-size: 1080px 210px;
  border-bottom: 10px solid #077d15
}

nav {
  background-color: #0d7b63
}

ul.naviContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between
}

.naviContainer li:nth-child(1n) {
  position: relative;
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 48px;
  line-height: 4.8rem
}

.naviContainer li:nth-child(1n) a {
  color: #fff
}

.naviContainer li:nth-child(1n) a::before {
  font-family: "Material Symbols Outlined";
  content: "\e88a";
  font-size: 28px;
  font-size: 2.8rem;
  left: -36px;
  bottom: 0;
  position: absolute
}

.naviContainer li:nth-child(1n) a:hover {
  color: #f8ea97
}

.naviContainer li:nth-child(2n) {
  position: relative;
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 48px;
  line-height: 4.8rem
}

.naviContainer li:nth-child(2n) a {
  color: #fff
}

.naviContainer li:nth-child(2n) a::before {
  font-family: "Material Symbols Outlined";
  content: "\ea40";
  font-size: 28px;
  font-size: 2.8rem;
  left: -36px;
  bottom: 0;
  position: absolute
}

.naviContainer li:nth-child(2n) a:hover {
  color: #f8ea97
}

.naviContainer li:nth-child(3n) {
  position: relative;
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 48px;
  line-height: 4.8rem
}

.naviContainer li:nth-child(3n) a {
  color: #fff
}

.naviContainer li:nth-child(3n) a::before {
  font-family: "Material Symbols Outlined";
  content: "\ea99";
  font-size: 28px;
  font-size: 2.8rem;
  left: -36px;
  bottom: 0;
  position: absolute
}

.naviContainer li:nth-child(3n) a:hover {
  color: #f8ea97
}

.naviContainer li:nth-child(4n) {
  position: relative;
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 48px;
  line-height: 4.8rem
}

.naviContainer li:nth-child(4n) a {
  color: #fff
}

.naviContainer li:nth-child(4n) a::before {
  font-family: "Material Symbols Outlined";
  content: "\e851";
  font-size: 28px;
  font-size: 2.8rem;
  left: -36px;
  bottom: 0;
  position: absolute
}

.naviContainer li:nth-child(4n) a:hover {
  color: #f8ea97
}

.mobile__menu #mobile__bar {
  color: #fff;
  position: absolute;
  right: 6px;
  top: 0
}

.mobile__menu .mobile__item {
  border-bottom: 1px solid #0d7b63
}

.mobile__menu .mobile__item a {
  display: block;
  padding: 12px;
  color: #0d7b63
}

.mobile__menu .mobile__item a:hover {
  background-color: #0f9276;
  color: #fff
}

.openbtn {
  position: relative;
  background: #fff;
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: 5px
}

.openbtn span {
  display: inline-block;
  -webkit-transition: all .4s;
  transition: all .4s;
  position: absolute;
  left: 14px;
  height: 3px;
  border-radius: 2px;
  background: #0d7b63;
  width: 45%
}

.openbtn span:nth-of-type(1) {
  top: 15px
}

.openbtn span:nth-of-type(2) {
  top: 23px
}

.openbtn span:nth-of-type(3) {
  top: 31px
}

.active span:nth-of-type(1) {
  top: 18px;
  left: 18px;
  -webkit-transform: translateY(6px) rotate(-45deg);
  transform: translateY(6px) rotate(-45deg);
  width: 30%
}

.active span:nth-of-type(2) {
  opacity: 0
}

.active span:nth-of-type(3) {
  top: 30px;
  left: 18px;
  -webkit-transform: translateY(-6px) rotate(45deg);
  transform: translateY(-6px) rotate(45deg);
  width: 30%
}

.mainVisual {
  position: relative;
  background-image: url(/img/mainVisual.png);
  background-size: cover;
  padding-top: 24px;
  padding-bottom: 24px;
  height: 50vh;
  background-position: bottom
}

.mainContainer__right {
  background-color: rgba(255, 255, 255, .5);
  margin-top: 120px
}

.hero {
  position: relative;
  padding-left: 130px
}

.hero__osaka {
  position: absolute;
  top: -110px;
  right: 180px
}

.hero__osaka img {
  width: 380px
}

.profile {
  background-color: rgba(13, 123, 99, .2)
}

.profile__container {
  padding-top: 48px;
  padding-bottom: 48px
}

.profile__container h2 {
  font-size: 18px;
  font-size: 1.8rem
}

.profile__container h2 span {
  font-weight: 700;
  font-size: 24px;
  font-size: 2.4rem
}

.profile__container p {
  line-height: 30px;
  line-height: 3rem
}

.goal {
  text-align: center;
  padding-top: 24px;
  padding-bottom: 24px
}

.goal__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 12px;
  padding-top: 48px;
  padding-bottom: 48px
}

.goal h3 {
  font-weight: 600;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 30px;
  line-height: 3rem
}

.circle-1 {
  background-color: #7f8ea9;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: inline-block;
  position: relative
}

.circle-1 span {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 200px;
  text-align: center
}

.circle-2 {
  background-color: #71c8d9;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: inline-block;
  position: relative
}

.circle-2 span {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 200px;
  text-align: center
}

.circle-3 {
  background-color: #f8b797;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: inline-block;
  position: relative
}

.circle-3 span {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 200px;
  text-align: center
}

.circle-4 {
  background-color: #bae6ee;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: inline-block;
  position: relative
}

.circle-4 span {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 200px;
  text-align: center
}

.circle-5 {
  background-color: #f897c1;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: inline-block;
  position: relative
}

.circle-5 span {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 200px;
  text-align: center
}

footer {
  background-color: #0d7b63;
  padding-top: 24px;
  padding-bottom: 24px
}

.footer__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 24px
}

.footer__container li a {
  display: block;
  position: relative;
  color: #fff
}

.footer__container li a::before {
  font-family: "Material Symbols Outlined";
  content: "\e409";
  position: absolute;
  top: 2px;
  left: -18px
}

.footer__container li a:hover {
  color: #f8ea97
}

.container {
  padding-top: 48px;
  padding-bottom: 48px
}

.container h2 {
  text-align: center;
  color: #0d7b63;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 20px;
  letter-spacing: 2rem
}

.container h2 span {
  display: block;
  color: #00427c;
  letter-spacing: 2px;
  letter-spacing: .2rem;
  font-size: 12px;
  font-size: 1.2rem
}

.container .table-1 {
  width: 80%;
  margin: 24px auto 48px
}

.container .table-1 tr {
  border-bottom: 1px solid #ddd
}

.container .table-1 td {
  line-height: 36px;
  line-height: 3.6rem;
  padding: 12px
}

.container .table-1 td:first-child {
  white-space: nowrap
}

.container .table-2 {
  margin-top: 0;
  width: 100%
}

.container .table-2 tr {
  border-bottom: none
}

.container .table-2 td {
  padding-top: 0
}

.container .table-2 td:nth-of-type(1) {
  padding-left: 0;
  white-space: nowrap
}

.container .table-2 td:nth-of-type(3) {
  white-space: nowrap;
  text-align: center
}

.container .table-3 {
  margin: 24px auto;
  width: 90%
}

.container .table-3 tr {
  border-bottom: 1px solid #ddd
}

.container .table-3 td, .container .table-3 th {
  line-height: 36px;
  line-height: 3.6rem;
  padding: 12px
}

.container .table-3 th {
  color: #0d7b63;
  white-space: nowrap
}

.container .table-3 .figureContainer {
  margin-top: 24px;
  margin-bottom: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 24px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between
}

.container .tableWrapper {
  width: 100%;
  overflow: auto;
  white-space: nowrap
}

.container .table-4 {
  width: 940px;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 24px auto
}

.container .table-4 td, .container .table-4 th {
  vertical-align: middle;
  padding: 12px;
  border: 1px solid #ccc
}

.container .table-4 th {
  width: 220px
}

.container .table-4 th a {
  color: #0d7b63
}

.container .table-4 th a:hover {
  color: #00427c
}

.container .table-4 td:nth-of-type(1) {
  width: 160px;
  white-space: nowrap;
  padding-left: 24px
}

.container .table-4 td:nth-of-type(2) {
  white-space: wrap
}

.container .table-4 td:nth-of-type(3) {
  width: 140px;
  white-space: nowrap
}

@media only screen and (max-width:640px) {
  .wrapper {
    padding-left: 24px;
    padding-right: 24px
  }

  ul.naviContainer {
    display: none
  }

  .hero__osaka {
    display: none
  }

  .goal__container {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
  }

  .goal h3 {
    text-align: left
  }

  .circle-1 {
    margin-bottom: 6px
  }

  .circle-2 {
    margin-bottom: 6px
  }

  .circle-3 {
    margin-bottom: 6px
  }

  .circle-4 {
    margin-bottom: 6px
  }

  .circle-5 {
    margin-bottom: 6px
  }

  .container .table-1 {
    width: 100%
  }

  .container .table-1 td:first-child {
    background-color: rgba(13, 123, 99, .2)
  }

  .container .table-1 td {
    display: block
  }

  .container .table-2 {
    width: 100%
  }

  .container .table-2 td {
    display: table-cell
  }

  .container .table-2 td:nth-of-type(1) {
    background-color: #fff
  }

  .container .table-3 {
    width: 100%
  }

  .container .table-3 td, .container .table-3 th {
    display: block
  }

  .container .table-3 th {
    padding-bottom: 3px
  }

  .container .table-3 td {
    padding-top: 3px
  }

  .container .table-3 .figureContainer {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
  }

  .container .table-4 td, .container .table-4 th {
    padding: 6px
  }
}

@media only screen and (min-width:641px) {
  .mobile__menu {
    display: none
  }
}