@charset "UTF-8";
/* ===============================================
#擬似要素中央配置 mixin
=============================================== */
/* ===============================================
# navigation
=============================================== */
:root {
  --key_color: #00CF47;
  --ac_color: #d1202d;
  --button-color:#000;
  --button-text-color:#fff;
  --bg_color:#fff;
  --menu_bg_color:rgba(242, 242, 242, 0.6);
  --txt_color:#000;
  --header_bg_color:transparent;
  --flex-gap:30px;
  --ham_menu_size:35px;
  --mediaquery_w:768px;
  --font01: "Zen Kaku Gothic New", sans-serif;
  --font02: "nimbus-sans", sans-serif;
}

/* ===============================================
# SNSカラー
=============================================== */
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeInTop {
  0% {
    opacity: 0;
    translate: 0px -50px;
  }
  100% {
    opacity: 1;
    translate: 0px 0px;
  }
}
@keyframes fadeInTop {
  0% {
    opacity: 0;
    translate: 0px -50px;
  }
  100% {
    opacity: 1;
    translate: 0px 0px;
  }
}
@-webkit-keyframes fadeInBottom {
  0% {
    opacity: 0;
    translate: 0px 50px;
  }
  100% {
    opacity: 1;
    translate: 0px 0px;
  }
}
@keyframes fadeInBottom {
  0% {
    opacity: 0;
    translate: 0px 50px;
  }
  100% {
    opacity: 1;
    translate: 0px 0px;
  }
}
@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    translate: -50px 0px;
  }
  100% {
    opacity: 1;
    translate: 0px 0px;
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    translate: -50px 0px;
  }
  100% {
    opacity: 1;
    translate: 0px 0px;
  }
}
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    translate: 0px -50px;
  }
  100% {
    opacity: 1;
    translate: 0px 0px;
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    translate: 0px -50px;
  }
  100% {
    opacity: 1;
    translate: 0px 0px;
  }
}
@-webkit-keyframes clipLeft {
  0% {
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
            clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}
@keyframes clipLeft {
  0% {
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
            clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipBottom {
  0% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
            clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}
@keyframes clipBottom {
  0% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
            clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipRight {
  0% {
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}
@keyframes clipRight {
  0% {
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipTop {
  0% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
            clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}
@keyframes clipTop {
  0% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
            clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}
@font-face {
  font-family: "PlusJakartaSans-Medium";
  src: url("../fonts/PlusJakartaSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@-webkit-keyframes cycleImg {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 1deg;
  }
}
@keyframes cycleImg {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 1deg;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
:root {
  --ease-level1:cubic-bezier(0.215, 0.61, 0.355, 1);
  --transition-slider: 12000ms;
  --font02:"PlusJakartaSans-Medium", sans-serif;
}

.fix_title {
  position: fixed;
  bottom: 0;
  width: min(330px, 40%);
  left: min(4%, 48px);
  z-index: 4;
}

.fix_title {
  display: flex;
  align-items: baseline;
}
.fix_title img {
  transform: translateY(100%);
}
.fix_title img:nth-of-type(1) {
  margin-right: 8px;
}
.fix_title img:nth-of-type(2) {
  margin-right: 14px;
}
.intro_on .fix_title img {
  transform: translateY(0%);
  transition: 1s;
}
.intro_on .fix_title img:nth-of-type(1) {
  transition: 1s;
  transition-delay: 2.6s;
}
.intro_on .fix_title img:nth-of-type(2) {
  transition: 0.7s;
  transition-delay: 2.6s;
}
.intro_on .fix_title img:nth-of-type(3) {
  transition: 1s;
  transition-delay: 2.6s;
}
.intro_on .fix_title img:nth-of-type(4) {
  transition: 1s;
  transition-delay: 3s;
}
.intro_on #fv .logo_wrap .logo {
  transform: translateX(0%);
  transition: 1.8s;
  opacity: 1;
}
.intro_on #fv .logo_wrap .logo01 {
  transition-delay: 1.7s;
}
.intro_on #fv .logo_wrap .logo02 {
  transition-delay: 1.8s;
}
.intro_on #fv .logo_wrap .logo03 {
  transition-delay: 1.9s;
}
.intro_on #fv .sign_wrap {
  opacity: 1;
  transition: 2s;
  transition-delay: 0.2s;
}
.intro_on .fix_content .show_content {
  transform: translateX(0%);
  transition: 1.2s;
  transition-delay: 1.5s;
}

@media screen and (max-width: 768px) {
  .fix_title {
    width: 80%;
    left: 50%;
    transform: translate(-50%, 0%);
  }
  .fix_title img {
    width: calc((100% - 22px) / 3);
  }
  .fix_title img:nth-of-type(4) {
    position: absolute;
    width: 14%;
    bottom: 0;
    right: -5.1%;
  }
}
#fv {
  height: 100vh;
  height: 100svh;
  position: relative;
  overflow: hidden;
}
#fv .logo_wrap {
  position: absolute;
  top: 60px;
  left: 60px;
  z-index: 5;
}
#fv .logo_wrap .logo {
  transform: translateX(30px);
  opacity: 0;
}
#fv .logo_wrap .logo a {
  transition: 0.3s;
  display: block;
}
#fv .logo_wrap .logo a img.hover {
  position: absolute;
  opacity: 0;
  transition: 0.3s;
  top: 0;
}
#fv .logo_wrap .logo a:hover {
  transform: scale(1.05);
  transition: 0.4s;
  opacity: 1;
}
#fv .logo_wrap .logo a:hover img {
  opacity: 0;
  transition: 0.3s;
}
#fv .logo_wrap .logo a:hover img.hover {
  opacity: 1;
  transition: 0.3s;
}
#fv .logo_wrap .logo:not(:last-of-type) {
  margin-bottom: 40px;
}
#fv .logo_wrap .logo:nth-of-type(2) {
  margin-bottom: 34px;
}
#fv .logo_wrap .logo01 {
  max-width: 120px;
}
#fv .logo_wrap .logo02 {
  max-width: 245px;
}
#fv .logo_wrap .logo03 {
  max-width: 96px;
}
#fv .sign_wrap {
  position: absolute;
  top: 50%;
  left: 57%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  opacity: 0;
  z-index: 3;
}
#fv .sign_wrap .sign {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: 3s;
  opacity: 0;
  aspect-ratio: 1/1;
}
#fv .sign_wrap .sign .txt {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 14%;
  font-size: min(1.8vw, 14px);
  color: #959595;
  opacity: 0;
  transition: 3s;
  z-index: 3;
}
@media screen and (max-width: 768px) {
  #fv .sign_wrap .sign .txt {
    font-size: 2.5vw;
  }
}
#fv .sign_wrap .sign .txt span {
  display: inline-block;
}
#fv .sign_wrap .sign .img {
  z-index: 2;
  position: absolute;
  width: 100%;
  height: 100%;
}
#fv .sign_wrap .sign .img img {
  -o-object-fit: contain;
     object-fit: contain;
  max-height: 100vh;
  max-width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  scale: 1;
  rotate: 0deg;
  transition: var(--transition-slider);
  transition-delay: 5s;
}
#fv .sign_wrap .sign.s02 .txt {
  top: 74%;
  left: 0;
}
@media screen and (max-width: 768px) {
  #fv .sign_wrap .sign.s02 .txt {
    left: 10%;
  }
}
#fv .sign_wrap .sign.s03 .txt {
  top: 60%;
}
#fv .sign_wrap .sign.s04 .txt {
  left: 4%;
}
#fv .sign_wrap .sign.s05 .txt {
  left: 50%;
  top: 48%;
}
#fv .sign_wrap .sign.s06 .txt {
  top: 60%;
}
#fv .sign_wrap .sign.s07 .txt {
  left: 50%;
  top: 56%;
}
#fv .sign_wrap .sign.s08 .txt {
  top: 16%;
  left: 64%;
}
@media screen and (max-width: 768px) {
  #fv .sign_wrap .sign.s08 .txt {
    top: 30%;
  }
}
#fv .sign_wrap .sign.s10 .txt {
  left: 50%;
  top: 74%;
}
#fv .sign_wrap .sign.s11 .txt {
  left: -5%;
  top: 70%;
}
@media screen and (max-width: 1024px) {
  #fv .sign_wrap .sign.s11 .txt {
    left: 2%;
  }
}
#fv .sign_wrap .sign.s12 .txt {
  left: 58%;
  top: 68%;
}
#fv .sign_wrap .sign.active {
  opacity: 1;
  transition: 3s;
}
#fv .sign_wrap .sign.active .img img {
  transition: 30s;
  scale: 1.04;
  rotate: 2deg;
}
#fv .sign_wrap .sign.active .txt {
  opacity: 1;
  transition: 2s;
  transition-delay: 1s;
}
@media screen and (max-width: 768px) {
  #fv .logo_wrap {
    top: 30px;
    left: 30px;
  }
  #fv .logo_wrap .logo:not(:last-of-type) {
    margin-bottom: 18px;
  }
  #fv .logo_wrap .logo01 {
    max-width: 70px;
  }
  #fv .logo_wrap .logo02 {
    max-width: 145px;
  }
  #fv .logo_wrap .logo03 {
    max-width: 57px;
  }
  #fv .sign_wrap {
    top: 50%;
  }
  #fv .sign_wrap .sign .img {
    height: 100%;
    width: 100%;
    scale: 1.6;
  }
  #fv .sign_wrap .sign .img img {
    max-height: 40vh;
  }
  #fv .sign_wrap .sign.s01 .img {
    scale: 1.55;
    rotate: -22deg;
  }
  #fv .sign_wrap .sign.s01 .txt {
    top: 58%;
  }
  #fv .sign_wrap .sign.s02 .img img {
    left: 46%;
    top: 50%;
  }
  #fv .sign_wrap .sign.s02 .txt {
    left: 60%;
    top: 27%;
  }
  #fv .sign_wrap .sign.s03 .txt {
    left: 64%;
    top: 74%;
  }
  #fv .sign_wrap .sign.s04 .img {
    scale: 1.7;
  }
  #fv .sign_wrap .sign.s04 .img img {
    left: 46%;
  }
  #fv .sign_wrap .sign.s04 .txt {
    left: 74%;
    top: 74%;
  }
  #fv .sign_wrap .sign.s05 .img img {
    left: 47%;
    top: 50%;
  }
  #fv .sign_wrap .sign.s05 .txt {
    left: 44%;
    top: 50%;
  }
  #fv .sign_wrap .sign.s06 .img {
    scale: 1.8;
  }
  #fv .sign_wrap .sign.s06 .img img {
    top: 50%;
  }
  #fv .sign_wrap .sign.s06 .txt {
    top: 24%;
    left: 66%;
  }
  #fv .sign_wrap .sign.s07 .img img {
    top: 50%;
  }
  #fv .sign_wrap .sign.s07 .txt {
    left: 53%;
    top: 60%;
  }
  #fv .sign_wrap .sign.s08 .img img {
    top: 53%;
  }
  #fv .sign_wrap .sign.s09 .img img {
    left: 61%;
  }
  #fv .sign_wrap .sign.s09 .txt {
    left: 33%;
    top: 48%;
  }
  #fv .sign_wrap .sign.s10 .img img {
    top: 50%;
  }
  #fv .sign_wrap .sign.s10 .txt {
    top: 70%;
  }
  #fv .sign_wrap .sign.s11 .img {
    scale: 1.7;
  }
  #fv .sign_wrap .sign.s11 .img img {
    left: 61%;
  }
  #fv .sign_wrap .sign.s11 .txt {
    left: 10%;
    top: 70%;
  }
  #fv .sign_wrap .sign.s12 .txt {
    top: 62%;
    left: 60%;
  }
}
.fix_content {
  position: fixed;
  top: 0;
  right: 0;
  width: min(400px, 100%);
  translate: calc(100% - 0px) 0;
  transition: 0.3s;
  z-index: 10;
  height: 100vh;
}
.fix_content .scroll_content {
  overflow-y: scroll;
  max-height: 100vh;
  max-height: 100svh;
  background: var(--menu_bg_color);
  padding: 80px 0 0px;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
.fix_content .scroll_content::-webkit-scrollbar {
  display: none;
}
.fix_content .scroll_content::-webkit-scrollbar-track {
  display: none;
}
.fix_content .show_content {
  width: 90px;
  height: 100vh;
  position: absolute;
  top: 0;
  right: 100%;
  cursor: pointer;
  transform: translateX(110%);
}
.fix_content .show_content:before {
  position: absolute;
  content: "";
  background: var(--key_color);
  width: 14px;
  height: 100%;
  top: 0;
  right: 0;
  transition: 0.4s;
  -webkit-clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
          clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}
.fix_content .show_content:hover:before {
  transition: 0.4s;
  -webkit-clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
          clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
}
.fix_content .show_content:hover .arrow_txt span.on {
  left: -10px;
  transition: 0.4s;
}
.fix_content .show_content .arrow_txt {
  position: absolute;
  top: 20px;
  width: 100%;
  font-family: var(--font02);
}
.fix_content .show_content .arrow_txt span {
  display: block;
  position: relative;
  font-size: 11px;
  line-height: 1.3em;
  white-space: nowrap;
}
.fix_content .show_content .arrow_txt span.on {
  padding-right: 32px;
  opacity: 1;
  transition: 0.4s;
  left: -2px;
}
.fix_content .show_content .arrow_txt span.on:before {
  position: absolute;
  content: "";
  background: url(../images/arrow_line.svg) no-repeat center;
  background-size: contain;
  width: 30px;
  height: 7px;
  top: 50%;
  transform: translateY(-50%);
  right: 3px;
}
.fix_content .show_content .arrow_txt span.off {
  padding-left: 38px;
  position: absolute;
  top: 0;
  left: 100%;
}
.fix_content .show_content .arrow_txt span.off:before {
  position: absolute;
  content: "";
  background: url(../images/arrow_line.svg) no-repeat center;
  background-size: contain;
  width: 30px;
  height: 7px;
  top: 50%;
  transform: translateY(-50%) scale(-1, 1);
  left: 0;
}
.fix_content.active {
  translate: 0% 0;
  transition: 0.3s;
}
.fix_content.active .show_content .arrow_txt span.on {
  opacity: 0;
  transition: 0.3s;
}
.fix_content.active .show_content:hover:before {
  -webkit-clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
          clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

@media screen and (max-width: 768px) {
  .fix_content .show_content:before {
    width: 8px;
  }
  .fix_content .show_content .arrow_txt span.on {
    left: 2px;
  }
  .fix_content .show_content .arrow_txt span.on:before {
    right: 5px;
  }
  .fix_content .show_content:hover .arrow_txt span.on {
    left: 2px;
    transition: 0.4s;
  }
  .fix_content .show_content:hover .arrow_txt span.on:before {
    right: 5px;
  }
  .fix_content .show_content:hover:before {
    -webkit-clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
            clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
  }
}
.h_outer .sec_h {
  font-size: 12px;
  line-height: 1.4em;
  color: var(--key_color);
  margin-bottom: 16px;
  font-weight: normal;
  font-family: var(--font02);
}
.h_outer .main_tit {
  position: relative;
  padding-bottom: 36px;
  font-size: 32px;
  line-height: 1.2em;
  margin-bottom: 30px;
  margin-top: -6px;
}
.h_outer .main_tit .c01 {
  color: var(--key_color);
}
.h_outer .main_tit:after {
  position: absolute;
  content: attr(data-tit_sub);
  font-size: 12px;
  bottom: 0;
  left: 0;
}

.text_block .text {
  font-size: 14px;
  line-height: 2.1em;
  font-weight: bold;
}
.text_block .text:not(:last-of-type) {
  margin-bottom: 2em;
}

.link_btn a {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 100vmax;
  padding: 10px 30px;
  justify-content: space-between;
  height: 71px;
  border: 2px solid #fff;
  transition: 0.3s;
}
.link_btn a img {
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: 0;
     object-position: 0;
  transition: 0.3s;
}
.link_btn a img.hover {
  position: absolute;
  opacity: 0;
  transition: 0.3s;
}
.link_btn a .text {
  color: var(--key_color);
  font-size: 12px;
  line-height: 1.2em;
}
.link_btn a:hover {
  border-color: var(--key_color);
  transition: 0.3s;
  opacity: 1;
}
.link_btn a:hover img {
  opacity: 0;
  transition: 0.3s;
}
.link_btn a:hover img.hover {
  opacity: 1;
  transition: 0.3s;
}

.link_wrap .link_btn:not(:last-of-type) {
  margin-bottom: 2px;
}

.outline_list dl {
  display: flex;
  font-size: 12px;
  line-height: 1.4em;
  font-weight: 500;
}
.outline_list dl:not(:last-of-type) {
  border-bottom: 1px solid #fff;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.outline_list dl dt {
  width: 80px;
}
.outline_list dl dd {
  width: calc(100% - 80px);
}

.footer .f_img {
  width: min(84%, 330px);
  margin: 0 auto;
}
/*# sourceMappingURL=style.css.map */