@charset "UTF-8";
:root {
  --viewport-width: min(100vw, 1600px);
  --b: calc(var(--viewport-width) / 160);
}

/*
Theme Name: Twenty Twenty-one Child
Version: 1.6
Template: twentytwentyone
*/
* {
  color: #2F2F2F;
  font-family: YakuHanJP, "Noto Sans JP", sans-serif;
  font-size: max(1.6rem, 14px);
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.1em;
}

body {
  background-color: #F4F4F4;
}

a > *,
button > * {
  pointer-events: none;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

a,
button {
  display: block;
}

span {
  display: inline-block;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

a,
button {
  color: #2F2F2F;
  padding: max(1.6rem, 16px) 0;
  font-size: max(1.4rem, 10px);
}
a.white, a.blue,
button.white,
button.blue {
  padding: max(1rem, 10px) max(3.5rem, 20px);
  display: inline-block;
  font-weight: 500;
  color: #F4F4F4;
  background: linear-gradient(to right, #72D5E6, #2142AF);
  border-radius: 40px;
  border: none;
  cursor: pointer;
  font-family: "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
  transition: all 0.2s ease;
  text-decoration: none;
}
a.white:hover, a.blue:hover,
button.white:hover,
button.blue:hover {
  opacity: 1;
  transform: translate(1px, 2px);
  box-shadow: inset 2px 2px 8px rgba(41, 28, 111, 0.18), inset -2px -2px 2px rgba(255, 255, 255, 0.4);
}
a.white,
button.white {
  color: #0C81C5;
  background: #F4F4F4;
  box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.4), inset -2px -2px 2px rgba(41, 28, 111, 0.18), 3px 3px 8px rgba(177, 182, 193, 0.51), -3px -3px 2px rgba(255, 255, 255, 0.6);
}
a.blue,
button.blue {
  color: #F4F4F4;
  background: linear-gradient(to right, #3dd4ff, #0b49c0);
  box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.4), inset -2px -2px 2px rgba(41, 28, 111, 0.18), 3px 3px 8px rgba(114, 121, 137, 0.62), -3px -3px 2px rgba(255, 255, 255, 0.6);
}
a.arrow,
button.arrow {
  display: flex;
  align-items: center;
  padding: max(2.5rem, 20px);
  max-width: 600px;
  margin: 0 auto;
}
a.arrow span,
button.arrow span {
  line-height: 0;
  font-size: max(1.6rem, 14px);
}
a.arrow span:nth-of-type(1),
button.arrow span:nth-of-type(1) {
  width: 100%;
  text-align: center;
}

.shadow {
  position: relative;
}
@media screen and (max-width: 768px) {
  .shadow {
    width: 100%;
  }
}
@media screen and (max-width: 550px) {
  .shadow {
    width: 65%;
    display: block;
    margin: 0 auto 15%;
  }
}
.shadow .img {
  overflow: hidden;
}
.shadow .img img {
  opacity: 0;
}
.shadow::after {
  content: "";
  background-image: url(./images/shadow.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 25%;
  position: absolute;
  top: 100%;
  left: 0%;
  z-index: -1;
  opacity: 0;
}
.shadow.loaded .img img, .shadow.active .img img {
  animation: fadeInUp 1.2s ease forwards;
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(300px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.shadow.loaded::after, .shadow.active::after {
  animation: fadeInDown 1.2s ease forwards;
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-300px);
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.triangle {
  position: relative;
}
.triangle::before {
  content: "";
  border-style: solid;
  border-right: max(1.7rem, 12px) solid transparent;
  border-left: max(1.7rem, 12px) solid transparent;
  border-top: max(3rem, 25px) solid #ffffff;
  position: absolute;
  transform: translate(-50%, -1%);
  top: 100%;
  left: 50%;
}

.band {
  background-color: #0C81C5;
  font-size: max(3.6rem, 20px);
  color: #ffffff;
  padding: max(3.6rem, 20px) 5%;
  text-align: center;
}
.band::before {
  border-right: max(2.6rem, 21px) solid transparent;
  border-left: max(2.6rem, 21px) solid transparent;
  border-top: max(4rem, 35px) solid #0C81C5;
}

section.h1 {
  margin-top: 80px;
  background: linear-gradient(to top, #72D5E6, #2142AF);
  padding: max(5%, 50px) 0;
}
@media screen and (max-width: 768px) {
  section.h1 {
    margin-top: 65px;
  }
}
section.h1 h1 {
  color: #ffffff;
  font-size: max(3.6rem, 20px);
  line-height: 120%;
}
section.h1 h1 span {
  display: block;
  font-family: "Roboto", sans-serif;
  font-size: max(1.6rem, 12px);
  padding-left: max(2rem, 20px);
  position: relative;
}
section.h1 h1 span::before {
  content: "●";
  font-size: max(0.9rem, 6px);
  position: absolute;
  transform: translate(0%, -50%);
  top: 50%;
  left: 0;
}

/* 全体公開時削除ーーーーーーー */
header a,
footer a {
  pointer-events: none;
  opacity: 0;
}
.download__flex-textbox a{
	pointer-events: none;
}
/* 全体公開時削除ーーーーーーー */

#header {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: max(3rem, 30px);
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: max(8rem, 80px);
  padding: 0 max(3rem, 30px);
  background-color: #F4F4F4;
  z-index: 9999;
  box-shadow: 0px 3px 56px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 550px) {
  #header {
    height: 65px;
  }
}
#header .header__logo {
  width: max(20rem, 160px);
}
#header .header__logo a {
  padding: 0;
	/* 全体公開時削除ーーーーーーー */
	opacity: 1;
	/* 全体公開時削除ーーーーーーー */
}
#header .header__nav {
  flex: 1;
  max-width: 800px;
  display: flex;
  justify-content: flex-end;
  gap: max(3rem, 10px);
}
#header .header__nav--list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: max(3rem, 10px);
}
#header .header__nav--list:nth-of-type(2) {
  gap: 1.5rem;
}
@media screen and (max-width: 768px) {
  #header .header__nav--list {
    display: none;
  }
}
#header .header__nav--item {
  text-align: center;
}
#header .header__nav--item a {
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  #header .header__nav--item .blue, #header .header__nav--item .white {
    margin-top: 5%;
    width: 100%;
  }
}
#header .header__toggle {
  display: none;
}
@media screen and (max-width: 768px) {
  #header .header__toggle {
    position: relative;
    display: block;
    width: max(2.6rem, 20px);
    height: max(2.6rem, 20px);
    z-index: 99999;
  }
}
#header .header__toggle--line {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: max(0.4rem, 3px);
  background: #0C81C5;
}
#header .header__toggle--line:nth-of-type(1) {
  top: 0;
}
#header .header__toggle--line:nth-of-type(2) {
  top: 50%;
  transform: translateY(-50%);
}
#header .header__toggle--line:nth-of-type(3) {
  bottom: 0;
}
#header .header__menu {
  display: none;
}
@media screen and (max-width: 768px) {
  #header .header__menu {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100svh;
    background: #F4F4F4;
    z-index: 9999;
  }
  #header .header__menu--list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }
}
#header.active .header__toggle--line:nth-of-type(1) {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}
#header.active .header__toggle--line:nth-of-type(2) {
  opacity: 0;
}
#header.active .header__toggle--line:nth-of-type(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(45deg);
}
#header.active .header__menu {
  display: block;
}

.download__flex {
  padding: max(5%, 50px) 0;
  display: flex;
  align-items: center;
  width: 50%;
  gap: 15%;
}
@media screen and (max-width: 768px) {
  .download__flex {
    width: 80%;
    gap: 5%;
  }
}
@media screen and (max-width: 550px) {
  .download__flex {
    flex-direction: column-reverse;
    width: 70%;
  }
}
.download__flex-textbox {
  width: 50%;
}
@media screen and (max-width: 550px) {
  .download__flex-textbox {
    width: 100%;
  }
}
.download__flex-textbox h2 {
  margin-bottom: 10%;
}
.download__flex-textbox h2 img {
  width: 100%;
}
.download__flex-textbox h2 span {
  display: block;
  font-size: max(3rem, 20px);
  margin-top: 4%;
  text-align: center;
}
.download__flex-textbox h2 span.blue {
  display: inline;
  color: #0C81C5;
}
.download__flex-textbox p {
  text-align: center;
  font-size: max(1.9rem, 16px);
}
.download__flex-textbox a {
  width: 70%;
  margin: 0 auto;
}
.download__flex-itembox {
  flex: 1;
}
.download__flex-itembox img {
  max-height: 80vh;
  object-fit: contain;
}
@media screen and (max-width: 550px) {
  .download__flex-itembox img {
    max-height: initial;
  }
}

.footer {
  background: linear-gradient(#2142AF, #72D5E6);
  width: 100%;
  padding-top: max(5%, 50px);
}
.footer__logo {
  width: 30%;
  margin-bottom: 3%;
}
@media screen and (max-width: 768px) {
  .footer__logo {
    width: 50%;
    margin-bottom: 5%;
  }
}
.footer__main {
  display: flex;
  justify-content: space-between;
  gap: 2%;
  border-top: 1px solid #fff;
  padding-top: 3%;
}
@media screen and (max-width: 768px) {
  .footer__main {
    flex-direction: column;
  }
}
.footer__main-textbox p {
  color: #fff;
  font-size: max(1.4rem, 12px);
  position: relative;
  padding-left: 22px;
}
.footer__main-textbox p::before {
  content: "";
  width: 16px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center;
}
.footer__main-textbox p.time::before {
  background-image: url(./images/footer-time.svg);
}
.footer__main-textbox p.mail::before {
  background-image: url(./images/footer-mail.svg);
}
.footer__main-abox {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  max-width: 800px;
}
@media screen and (max-width: 768px) {
  .footer__main-abox {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 5%;
  }
}
.footer__main-abox a {
  color: #fff;
  font-size: max(1.6rem, 14px);
  position: relative;
  padding-left: max(1.6rem, 16px);
  line-height: 100%;
}
.footer__main-abox a::before {
  content: "●";
  font-size: max(0.9rem, 6px);
  position: absolute;
  transform: translate(0%, -50%);
  top: 50%;
  left: 0;
}
.footer__main-abox a.circle {
  border: 1px solid;
  border-radius: 30px;
  padding: max(1.5rem, 10px);
  width: 25%;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .footer__main-abox a.circle {
    width: 100%;
    margin-top: 5%;
  }
}
.footer__main-abox a.circle::before {
  content: "";
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 5%;
  margin-top: 8%;
  padding: 16px 0;
}
@media screen and (max-width: 768px) {
  .footer__bottom {
    flex-direction: column;
  }
}
.footer__bottom-abox {
  display: flex;
  gap: 5%;
  flex: 1;
  justify-content: space-between;
  max-width: 700px;
}
@media screen and (max-width: 768px) {
  .footer__bottom-abox {
    flex-direction: column;
  }
}
.footer__bottom-abox a {
  font-size: max(1.4rem, 12px);
  color: #fff;
  padding: 0;
}
@media screen and (max-width: 768px) {
  .footer__bottom-abox a {
    margin-bottom: 5%;
  }
}
.footer__bottom p {
  font-size: max(1.4rem, 10px);
  font-family: "Roboto", sans-serif;
  color: #fff;
}

.delay05,
.delay05 > * {
  animation-delay: 0.5s !important;
}

.delay1,
.delay1 > * {
  animation-delay: 1s !important;
}

.delay15,
.delay15 > * {
  animation-delay: 1.5s !important;
}

.delay2,
.delay2 > * {
  animation-delay: 2s !important;
}

.slideanim {
  overflow: hidden;
}
.slideanim > * {
  opacity: 0;
  transform: translateX(-100%);
}
.slideanim.loaded > *, .slideanim.active > * {
  animation: slide 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes slide {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
  }
  80%, 100% {
    opacity: 1;
  }
}
.fadeIn {
  opacity: 0;
}
.fadeIn.loaded, .fadeIn.active {
  animation: fadeIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.popup {
  opacity: 0;
}
.popup.loaded, .popup.active {
  animation: popup 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes popup {
  0% {
    transform: translateY(40px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
  }
  80%, 100% {
    opacity: 1;
  }
}