@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

* {
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: 'Noto Sans JP', sans-serif;
  background-color: white;
}
main {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  box-sizing: border-box;
}
img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  box-sizing: border-box;
}
video {
  pointer-events: none;
}

.img-wrap {
  display: block;
  vertical-align: bottom;
  margin: 0 auto;
  box-sizing: border-box;
}

/*********floating*********/
#floatingmenu {
  display: none;
}
.floatingmenu {
  background-color:rgba(250, 250, 250, 0.65);
  backdrop-filter: blur(4px);
  position: fixed;
  bottom: 0;
  z-index: 99;
  width: 100%;
  max-width: 640px;
  padding: 16px 0 8px;
  box-sizing: border-box;
}
.floating-box {
  margin: 0 auto;
}
@media screen and (max-width:640px) {
  .floatingmenu {
    padding: 3vw 0 2vw;
  }
}

/*********CTAボタン*********/
.relative {
  position: relative;
}
.absolute {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 100%;
  max-width: 640px;
}
.absolute-fv-men {
  padding: 0;
  bottom: 98px;
}
.absolute-hand {
  width: 10%;
  bottom: 116px;
  left: 82.8%;
  animation: yurayura 1.8s linear infinite;
}
.absolute-fv-women {
  padding: 0;
  bottom: -30px;
}
.absolute-women01 {
  padding: 0;
  bottom: 0;
}
.absolute-hand-f {
  width: 8.5%;
  bottom: 0;
  left: 83%;
  animation: yurayura 1.8s linear infinite;
}
.absolute-m {
  left: 50.0333%;
  bottom: -10.879393%;
  padding: 0 41.32px;
  width: 100%;
}
@keyframes yurayura {
  0% , 100%{
      transform: rotate(6.2deg);
  }
  50%{
      transform: rotate(-6.2deg);
  }
}
.reflection {
  display:block;
  position:relative;
  overflow:hidden;
  width: 86%;
  height: auto;
  margin: 0 auto;
  border-radius: 55px;
}
.reflection:after {
  content:"";
  height:100%;
  width:30px;
  position:absolute;
  top:-180px;
  left:0;
  background-color: rgba(255, 255, 255, 0.7);
  opacity:0;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: rotate(45deg);
  -webkit-animation: reflection 3s ease-in-out infinite;
}
  @keyframes reflection {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
  }

@media screen and (max-width:640px) {
  .absolute-fv-men {
    padding: 0;
    bottom: 15.5vw;
  }
  .absolute-hand {
    bottom: 18.9vw;
    animation: yurayura 1.7s linear infinite;
  }
  .absolute-fv-women {
    padding: 0;
    bottom: -3.6vw;
  }
  .absolute-hand-f {
    bottom: 0.5vw;
    animation: yurayura 1.7s linear infinite;
  }
  .absolute-m {
    padding: 0 6.1575vw;
    bottom: -11.8181818vw;
  }
  .reflection:after {
    -webkit-animation: reflection 4s ease-in-out infinite;
  }
}

/********* form *********/
.cta img {
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.cta:hover img {
  filter: saturate(115%);
}
.cta-wrap {
  background-color: #fff;
  padding: 36px 0;
}
.cta-wrap p.tit {
  position: relative;
  vertical-align: middle;
  padding: 0 0 6px;
  text-align: center;
  margin: 0 auto;
  font-size: 36px;
  font-weight: 600;
  color: #2F2F2F;
  line-height: 1.5;
  width: 50%;
}

.cta-wrap p.tit::before,
.cta-wrap p.tit::after {
  content: "";
  position: absolute;
  top: 55%;
  width: 52px;
  height: 3px;
  background-color: #0DC857;
}
.cta-wrap p.tit::before {
  left: -42px;
  transform: translateY(-50%) rotate(55deg);
}
.cta-wrap p.tit::after {
  right: -42px;
  transform: translateY(-50%) rotate(-55deg);
}
.cta-wrap p.tit span {
  font-size: 64px;
  font-weight: 700;
  letter-spacing: 2px;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  margin: 0 10px;
  line-height: 1;
  background: linear-gradient(180deg, #EE8608 0%, #F86131 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.cta-wrap p.txt {
  padding: 6px 0 4px;
  text-align: center;
  font-size: 24px;
  font-weight: 500;
  color: #b6b6b6;
  line-height: 1.5;
}
@media screen and (max-width:640px) {
  .cta-wrap {
    padding: 5.6vw 0;
  }
  .cta-wrap p.tit {
    padding: 0 0 0.9vw;
    font-size: calc((35.84 / 640) * 100vw);
  }
  .cta-wrap p.tit::before,
  .cta-wrap p.tit::after {
    width: 8.1vw;
    height: 0.5vw;
  }
  .cta-wrap p.tit::before {
    left: -6.6vw;
  }
  .cta-wrap p.tit::after {
    right: -6.6vw;
  }
  .cta-wrap p.tit span {
    font-size: calc((64 / 640) * 100vw);
    letter-spacing: 0.3vw;
    margin: 0 1.6vw;
  }
  .cta-wrap p.txt {
    padding: 0.9vw 0 0.6vw;
    font-size: calc((24 / 640) * 100vw);
  }
}


/********* footer *********/
footer {
  padding: 36px 0 0;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}
footer .logo-t{
  width: 45%;
  margin: 0 auto;
}
footer .f-tit-box {
  width: 82%;
  margin: 36px auto;
  border-top: 4px solid #006648;
  border-bottom: 4px solid #006648;
  padding: 4px 0;
}
footer .f-tit {
  width: 100%;
  margin: 0 auto;
  border-top: 2px solid #006648;
  border-bottom: 2px solid #006648;
  padding: 18px 0;
  text-align: center;
  line-height: 1.5;
  color: #006648;
  font-size: 28px;
  letter-spacing: 4px;
  font-weight: 600;
}
footer .f-contents {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  background-color: #006648;
}
footer .f-contents-txt {
  color: #fff;
  text-align: center;
  font-size: 22px;
  letter-spacing: 1px;
  font-weight: 600;
  line-height: 1.72;
  margin: 264px 0 0;
}
footer .f-contents-txt span.bold {
  display: block;
  font-size: 32px;
  padding: 12px 0 24px;
}
footer .f-contents-txt span.yellow {
  display: block;
  color: yellow;
  font-size: 32px;
  padding: 0 0 32px;
}
footer .float-box {
  position: absolute;
  left: 50%;
  top:480px;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 90%;
  border-radius: 20px;
  background-color: #fff;
}
footer .float-box .float-tit {
  text-align: center;
  background-color: #006648;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 2px 0;
  color: #fff;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 3px;
  line-height: 1.5;
}
footer .float-box .float-tit span.nun {
  display: inline-block;
  font-size: 54px;
  margin: 0 9px;
}
footer .float-box .float-txt {
  background-color: #fff;
  text-align: center;
  padding: 24px 0  20px;
  color: #2E2E2E;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 4px;
  line-height: 1.5;
}
footer .float-box .float-cont {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 0 30px 36px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}
footer .float-box .float-cont .circle {
  border: solid 4px #006648;
  border-radius: 50%;
  width: 160px;
  height: 160px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #2E2E2E;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1.5;
  padding: 10px;
  box-sizing: border-box;
}
footer .float-box .float-cont .circle span {
  color: #006648;
}
footer .address {
  width: 100%;
  background-color: #fff;
  padding: 36px 0;
}
footer .address p.tit {
  color: #006648;
  text-align: center;
  font-size: 36px;
  font-weight: 700;
  padding: 0 0 32px;
}
footer .address .txt-box {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  font-size: 22px;
  line-height: 1.6;
  padding: 2px;
}
footer .address .txt-box p.left-t {
  width: 36%;
  text-align: right;
  margin-right: 16px;
}
footer .address .txt-box p.right-t {
  width: 64%;
  text-align: left;
  margin-left: 16px;
}
footer .address p.law {
  color: #2E2E2E;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1px;
  padding: 24px 0 0;
}
footer .address p.law a {
  text-decoration: underline;
  color: #1558D6;
}
footer .logo-f-box {
  width: 100%;
  background-color:#F1F1F1;
  padding: 116px 0;
}
footer .logo-f-box .logo-f {
  width: 60%;
  margin: 0 auto;
}

@media screen and (max-width:640px) {
  footer {
  padding: calc((36 / 640) * 100vw) 0 0;
  }
  footer .logo-t {
  width: calc((288 / 640) * 100vw);
  }
  footer .f-tit-box {
  width: calc((524.8 / 640) * 100vw);
  margin: calc((36 / 640) * 100vw) auto;
  border-top: calc((4 / 640) * 100vw) solid #006648;
  border-bottom: calc((4 / 640) * 100vw) solid #006648;
  padding: calc((4 / 640) * 100vw) 0;
  }
  footer .f-tit {
  border-top: calc((2 / 640) * 100vw) solid #006648;
  border-bottom: calc((2 / 640) * 100vw) solid #006648;
  padding: calc((18 / 640) * 100vw) 0;
  line-height: 1.5;
  font-size: calc((28 / 640) * 100vw);
  letter-spacing: calc((4 / 640) * 100vw);
  }
  footer .f-contents-txt {
  font-size: calc((22 / 640) * 100vw);
  letter-spacing: calc((1 / 640) * 100vw);
  margin: calc((264 / 640) * 100vw) 0 0;
  }
  footer .f-contents-txt span.bold {
  font-size: calc((32 / 640) * 100vw);
  padding: calc((12 / 640) * 100vw) 0 calc((24 / 640) * 100vw);
  }
  footer .f-contents-txt span.yellow {
  font-size: calc((32 / 640) * 100vw);
  padding: 0 0 calc((32 / 640) * 100vw);
  }
  footer .float-box {
  left: 50%;
  top: calc((480 / 640) * 100vw);
  width: calc((576 / 640) * 100vw);
  border-radius: calc((20 / 640) * 100vw);
  }
  footer .float-box .float-tit {
  border-top-left-radius: calc((20 / 640) * 100vw);
  border-top-right-radius: calc((20 / 640) * 100vw);
  padding: calc((2 / 640) * 100vw) 0;
  font-size: calc((24 / 640) * 100vw);
  letter-spacing: calc((3 / 640) * 100vw);
  line-height: 1.5;
  }
  footer .float-box .float-tit span.nun {
  font-size: calc((54 / 640) * 100vw);
  margin: 0 calc((9 / 640) * 100vw);
  }
  footer .float-box .float-txt {
  padding: calc((24 / 640) * 100vw) 0 calc((20 / 640) * 100vw);
  font-size: calc((24 / 640) * 100vw);
  letter-spacing: calc((4 / 640) * 100vw);
  }
  footer .float-box .float-cont {
  padding: 0 calc((30 / 640) * 100vw) calc((36 / 640) * 100vw);
  border-bottom-right-radius: calc((20 / 640) * 100vw);
  border-bottom-left-radius: calc((20 / 640) * 100vw);
  }
  footer .float-box .float-cont .circle {
  border: solid calc((4 / 640) * 100vw) #006648;
  border-radius: 50%;
  width: calc((160 / 640) * 100vw);
  height: calc((160 / 640) * 100vw);
  font-size: calc((20 / 640) * 100vw);
  letter-spacing: calc((2 / 640) * 100vw);
  }
  footer .address {
  padding: calc((36 / 640) * 100vw) 0;
  }
  footer .address p.tit {
  font-size: calc((36 / 640) * 100vw);
  padding: 0 0 calc((32 / 640) * 100vw);
  }
  footer .address .txt-box {
  font-size: calc((22 / 640) * 100vw);
  padding: calc((2 / 640) * 100vw);
  }
  footer .address .txt-box p.left-t {
  margin-right: calc((16 / 640) * 100vw);
  }
  footer .address .txt-box p.right-t {
  margin-left: calc((16 / 640) * 100vw);
  }
  footer .address p.law {
  font-size: calc((18 / 640) * 100vw);
  letter-spacing: calc((1 / 640) * 100vw);
  padding: calc((24 / 640) * 100vw) 0 0;
  }
  footer .logo-f-box {
  padding: calc((116 / 640) * 100vw) 0;
  }
  footer .logo-f-box .logo-f {
  width: calc((384 / 640) * 100vw);
  margin: 0 auto;
  }
}

/********* 注釈 *********/
.annotation-wrap {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding-inline: 24px;
  padding-block: 36px;
}
.annotation-wrap .main-tit h3 {
  position: relative;
  width: 90%;
  padding: 12px 0;
  margin: 0 auto;
  font-size: 32px;
  letter-spacing: 2px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  color: #216FE5;
}
.annotation-wrap .main-tit h3::before,
.annotation-wrap .main-tit h3::after {
  position: absolute;
  top: 0;
  width: 32px;
  height: 100%;
  content: '';
  border-top: solid 3px #216FE5;
  border-bottom: solid 3px #216FE5;
}
.annotation-wrap .main-tit h3::before {
  border-left: solid 3px;
  left: 0;
}
.annotation-wrap .main-tit h3::after {
  border-right: solid 3px;
  right: 0;
}
.annotation-wrap .main-tit2 h3 {
  position: relative;
  width: 100%;
  padding: 36px 0 16px;
  margin: 0 auto;
  font-size: 24px;
  letter-spacing: 0.25px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}
.annotation-wrap .main-tit2 h3::after {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  border-radius: 1.5px;
  background-color: #216FE5; 
  margin: 8px auto 0;
}
.annotation-wrap .main-tit p{
  font-size: 24px;
  letter-spacing: 1px;
  font-weight: 500;
  line-height: 1.5;
  margin: 30px auto 24px;
}
.annotation-wrap p.tit {
  color: #216FE5;
  font-weight: 600;
  font-size: 28px;
  padding: 0 0 12px;
}
.annotation-wrap p.tit-m {
  padding: 24px 0 12px;
}
.annotation-wrap table {
  width: 100%;
  border-collapse: collapse;
}
.annotation-wrap th,
.annotation-wrap td {
  padding: 14px;
  text-align: left;
  font-size: 16px;
  vertical-align: middle;
}
.annotation-wrap th {
  background-color: #f5f5f5;
  width: 25%;
  font-weight: 600;
  text-align: center;
  line-height: 1.6;
  border-top: 1px solid #DADADA;
  border-bottom: 1px solid #DADADA;
}
.annotation-wrap td {
  width: 75%;
  font-weight: 400;
  line-height: 1.6;
  border-top: 1px solid #DADADA;
  border-bottom: 1px solid #DADADA;
}
.annotation-wrap  td a {
  color: #216FE5;
  text-decoration: underline;
}

@media screen and (max-width:640px) {
    .annotation-wrap {
      padding-inline: calc((24 / 640) * 100vw);
      padding-block: calc((36 / 640) * 100vw);
    }
    .annotation-wrap .main-tit h3 {
      padding: calc((12 / 640) * 100vw) 0;
      font-size: calc((32 / 640) * 100vw);
      letter-spacing: calc((2 / 640) * 100vw);
    }
    .annotation-wrap .main-tit h3::before,
    .annotation-wrap .main-tit h3::after {
      width: calc((32 / 640) * 100vw);
      border-top: solid calc((3.2 / 640) * 100vw) #216FE5;
      border-bottom: solid calc((3.2 / 640) * 100vw) #216FE5;
    }
    .annotation-wrap .main-tit h3::before {
      border-left: solid calc((3.2 / 640) * 100vw) #216FE5;
      left: 0;
    }
    .annotation-wrap .main-tit h3::after {
      border-right: solid calc((3.2 / 640) * 100vw) #216FE5;
      right: 0;
    }
    .annotation-wrap .main-tit2 h3 {
      padding: calc((36 / 640) * 100vw) 0 calc((16 / 640) * 100vw);
      font-size: calc((24 / 640) * 100vw);
      letter-spacing: calc((0.25 / 640) * 100vw);
    }
    .annotation-wrap .main-tit2 h3::after {
      width: calc((32 / 640) * 100vw);
      height: calc((3 / 640) * 100vw);
      border-radius: calc((1.5 / 640) * 100vw);
      background-color: #216FE5; 
      margin: calc((8 / 640) * 100vw) auto 0;
    }
    .annotation-wrap .main-tit p {
      font-size: calc((24 / 640) * 100vw);
      letter-spacing: calc((1 / 640) * 100vw);
      margin: calc((30 / 640) * 100vw) auto calc((24 / 640) * 100vw);
    }
    .annotation-wrap p.tit {
      font-size: calc((28 / 640) * 100vw);
      padding: 0 0 calc((12 / 640) * 100vw);
    }
    .annotation-wrap p.tit-m {
      padding: calc((24 / 640) * 100vw) 0 calc((12 / 640) * 100vw);
    }
    .annotation-wrap th,
    .annotation-wrap td {
      padding: calc((14 / 640) * 100vw);
      font-size: calc((16 / 640) * 100vw);
    }
    .annotation-wrap th {
      border-top: calc((1 / 640) * 100vw) solid #DADADA;
      border-bottom: calc((1 / 640) * 100vw) solid #DADADA;
    }
    .annotation-wrap td {
      border-top: calc((1 / 640) * 100vw) solid #DADADA;
      border-bottom: calc((1 / 640) * 100vw) solid #DADADA;
    }
  }

/********* 注釈 *********/

/********* その他 *********/
h1.meta-tit {
  font-size: 24px;
  font-weight: 800;
  top:-200px;
}
h2.meta-tit {
  font-size: 20px;
  font-weight: 700;
  top:0;
}
p.meta-txt {
  font-size: 16px;
  font-weight: 600;
  top:100px
}
.meta-tit,
.meta-txt {
  position: absolute;
  left: -9999px;
  line-height: 1.5;
  color: #222;
}