@charset "UTF-8";
.futura-b {
  font-family: "futura-pt", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.futura-n {
  font-family: "futura-pt", sans-serif;
  font-weight: 600;
  font-style: normal;
}

html.fixed {
  overflow: hidden !important;
}

body {
  font-family: "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #3e3e3e;
  line-height: 24px;
  overflow: hidden;
}

.header {
  position: absolute;
  width: 100%;
  z-index: 100;
}
@media (min-width: 768px) {
  .header {
    display: flex;
    justify-content: space-between;
    height: 80px;
  }
}
@media (max-width: 767px) {
  .header {
    height: 50px;
  }
}
.header[aria-expanded=true] .header__menu {
  display: block;
}
@media (min-width: 768px) {
  .header[aria-expanded=true] .header__hr_top {
    transform: translateY(9px) rotate(45deg);
  }
}
@media (max-width: 767px) {
  .header[aria-expanded=true] .header__hr_top {
    transform: translateY(6px) rotate(45deg);
  }
}
.header[aria-expanded=true] .header__hr_mid {
  opacity: 0;
  transform: rotate(90deg);
}
@media (min-width: 768px) {
  .header[aria-expanded=true] .header__hr_btm {
    transform: translateY(-9px) rotate(135deg);
  }
}
@media (max-width: 767px) {
  .header[aria-expanded=true] .header__hr_btm {
    transform: translateY(-6px) rotate(135deg);
  }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .header__left {
    display: block;
  }
}
@media (min-width: 768px) {
  .header__logo {
    margin-left: 15px;
  }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .header__logo {
    margin-top: 10px;
  }
}
@media (max-width: 767px) {
  .header__logo {
    position: absolute;
    top: 2.67vw;
    left: 2.67vw;
    width: 64.53vw;
    max-width: 484px;
  }
}
@media (min-width: 768px) {
  .header__logoimg {
    width: 284px;
  }
}
@media (max-width: 767px) {
  .header__logoimg {
    width: 54vw;
  }
}
@media (min-width: 768px) {
  .header__logoflag {
    width: 70px;
    margin-left: 20px;
  }
}
@media (max-width: 767px) {
  .header__logoflag {
    width: 7.47vw;
    margin-left: 2.67vw;
    margin-top: 1.33vw;
  }
}
.header__desc {
  color: #000;
}
@media (min-width: 768px) {
  .header__desc {
    height: 56px;
    margin-left: 20px;
  }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .header__desc {
    margin-left: 10px;
  }
}
@media (max-width: 767px) {
  .header__desc {
    margin-top: 14.67vw;
    margin-left: 2.67vw;
    font-size: 10px;
  }
}
@media (min-width: 768px) {
  .header__switch {
    position: absolute;
    top: 0px;
    right: 312px;
    height: 80px;
  }
}
.header__switch_tx {
  position: relative;
  padding-left: 22px;
}
.header__switch_tx + .header__switch_tx {
  margin-left: 40px;
}
.header__switch_tx::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.header__switch_tx.jp::before {
  background-image: url(../img/common/icon_JP.svg);
}
.header__switch_tx.ph::before {
  background-image: url(../img/common/icon_PH.svg);
}
.header__switch_tx.ph::after {
  content: "／";
  display: block;
  position: absolute;
  font-weight: bold;
  top: 0;
  left: -30px;
}
.header__contact {
  background-color: #ff4627;
  color: #fff;
  max-width: 100%;
}
@media (min-width: 768px) {
  .header__contact {
    position: absolute;
    top: 0;
    right: 80px;
    width: 212px;
    height: 80px;
    margin-left: 20px;
  }
}
@media (max-width: 767px) {
  .header__contact {
    position: fixed;
    top: 0;
    right: 50px;
    width: 50px;
    height: 50px;
    font-size: 10px;
    z-index: 10002;
  }
}
@media (max-width: 767px) {
  .header__contact span {
    position: relative;
    padding-top: 20px;
  }
}
@media (max-width: 767px) {
  .header__contact span::before {
    content: "";
    display: block;
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    margin: auto;
    width: 22px;
    height: 14px;
    background-image: url(../img/common/icon_mail.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }
}
.header__navbtn {
  position: fixed;
  top: 0;
  right: 0;
  background-color: #fff;
  color: #ff4627;
  line-height: 1.6;
  z-index: 10001;
}
@media (min-width: 768px) {
  .header__navbtn {
    width: 80px;
    height: 80px;
  }
}
@media (max-width: 767px) {
  .header__navbtn {
    width: 50px;
    height: 50px;
  }
}
.header__hr {
  background-color: #ff4627;
  border: none;
  display: block;
  transition: transform 0.3s;
}
@media (min-width: 768px) {
  .header__hr {
    height: 3px;
    width: 34px;
  }
}
@media (max-width: 767px) {
  .header__hr {
    height: 2px;
    width: 21px;
  }
}
@media (min-width: 768px) {
  .header__hr_top {
    margin-bottom: 6px;
  }
}
@media (max-width: 767px) {
  .header__hr_top {
    margin-top: 3px;
    margin-bottom: 4px;
  }
}
@media (min-width: 768px) {
  .header__hr_mid {
    margin-bottom: 6px;
  }
}
@media (max-width: 767px) {
  .header__hr_mid {
    margin-bottom: 4px;
  }
}
@media (min-width: 768px) {
  .header__hr_btm {
    margin-bottom: 6px;
  }
}
@media (max-width: 767px) {
  .header__hr_btm {
    margin-bottom: 4px;
  }
}
.header__menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(86, 175, 121, 0.9);
  z-index: 10000;
}
@media (min-width: 768px) {
  .header__menu {
    height: 100vh;
  }
}
@media (max-width: 767px) {
  .header__menu {
    height: 100vh;
    height: 100dvh;
    padding: 0 13.33vw;
  }
}
@media (min-width: 768px) {
  .header__menuwrap {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    height: 100vh;
  }
}
@media (max-width: 767px) {
  .header__menuwrap {
    height: 100vh;
    height: 100dvh;
  }
}
.header__menuitems {
  list-style: none;
}
@media (min-width: 768px) {
  .header__menuitems {
    width: 50%;
    height: 100vh;
  }
}
@media (max-width: 767px) {
  .header__menuitems {
    width: 100%;
  }
}
.header__menuitem a {
  color: #fff;
  text-decoration: underline;
}
.header__menuicon {
  width: 40px;
}
.header__sub {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  z-index: 10001;
}
@media (min-width: 768px) {
  .header__sub {
    height: 100vh;
  }
}
@media (max-width: 767px) {
  .header__sub {
    height: 100vh;
    height: 100dvh;
    padding: 0 13.33vw;
  }
}
.header__sub.open {
  display: block;
}
@media (min-width: 768px) {
  .header__subwrap {
    height: 100vh;
  }
}
@media (max-width: 767px) {
  .header__subwrap {
    height: 100vh;
    height: 100dvh;
  }
}
.header__subtitle {
  line-height: 36px;
}
.header__subimg {
  width: 202px;
}
.header__subinfo {
  line-height: 29px;
}
.header__submail span {
  text-decoration: underline;
}
.header__subbtn {
  width: 320px;
  height: 50px;
  background-color: #ff4627;
  border: 2px solid #fff;
  border-radius: 100px;
  color: #fff;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.3);
}

.footer {
  background-color: #56af79;
  color: #fff;
}
@media (min-width: 768px) {
  .footer {
    padding: 45px 0 5px;
  }
}
@media (max-width: 767px) {
  .footer {
    padding: 35px 0 15px;
  }
}
@media (min-width: 768px) {
  .footer__wrapper {
    max-width: 1300px;
    padding: 0 25px;
  }
}
.footer__flex {
  gap: 0 30px;
}
@media (max-width: 767px) {
  .footer__logo img {
    width: 68.53vw;
  }
}
.footer__addr {
  line-height: 22px;
  letter-spacing: 0.06rem;
}
.footer__mail span {
  text-decoration: underline;
}
@media (min-width: 768px) and (max-width: 960px) {
  .footer__link {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 1166px) {
  .footer__link_wrap {
    display: block;
  }
}
.footer__link_items {
  list-style: none;
}
@media (min-width: 768px) {
  .footer__link_items + .footer__link_items {
    margin-left: 50px;
  }
}
@media (min-width: 768px) and (max-width: 1166px) {
  .footer__link_items + .footer__link_items {
    margin-left: 0;
  }
}
.footer__link_item {
  line-height: 30px;
  letter-spacing: 0.12rem;
}
.footer__link_item a {
  text-decoration: underline;
}
.footer__link_img {
  width: 39px;
}
.footer__btn {
  position: relative;
  width: 320px;
  height: 50px;
  background-color: #ff4627;
  border: 2px solid #fff;
  border-radius: 100px;
  color: #fff;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.3);
}
.footer__btn::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 15px;
  bottom: 0;
  margin: auto;
  width: 7px;
  height: 8px;
  background: #fff;
  clip-path: polygon(100% 50%, 0 0, 0 100%);
}
.footer__items {
  list-style: none;
}
@media (min-width: 768px) {
  .footer__item + .footer__item {
    margin-left: 20px;
  }
}
.footer__item a {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .sidebar {
    position: fixed;
    display: block;
    top: 100px;
    right: 0;
    width: 80px;
    height: 300px;
    z-index: 1000;
    display: none;
  }
}

@media (min-width: 768px) {
  .link {
    padding: 100px 0 90px;
  }
}
@media (max-width: 767px) {
  .link {
    padding: 35px 0;
  }
}
@media (min-width: 768px) {
  .link__wrapper {
    max-width: 1020px;
    padding: 0 20px;
  }
}
.link__items {
  list-style: none;
}
@media (min-width: 768px) {
  .link__items {
    gap: 50px;
  }
}
@media (max-width: 767px) {
  .link__items {
    gap: 5.33vw;
  }
}
@media (min-width: 768px) {
  .link__item {
    width: calc(33.3333333333% - 50px);
  }
}
@media (max-width: 767px) {
  .link__item {
    width: calc(50% - 5.33vw);
  }
}

.page__head {
  background-image: url(../img/common/pagetitle_bg.png?v0);
  background-color: #56af79;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .page__head {
    height: 400px;
    background-position: center;
  }
}
@media (max-width: 767px) {
  .page__head {
    height: 52.8vw;
    background-position: bottom 6.67vw center;
    background-size: 86vw auto;
  }
}
.page__title {
  color: #fff;
  letter-spacing: 0.08rem;
}
@media (min-width: 768px) {
  .page__title {
    font-size: 42px;
    line-height: 54px;
  }
}
@media (max-width: 767px) {
  .page__title {
    line-height: 27px;
  }
}