@charset "UTF-8";
#wrap {
  border: 10px solid #000; }

.anchor {
  display: block;
  margin: -100px 0 0;
  padding: 100px 0 0 0;
  pointer-events: none; }

@media (max-width: 768px) {
  #wrap {
    border: 8px solid #000; } }
/*max-width:768px*/
/*max-width:480px*/
/***************************************************/
header {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%; }

.header_flex {
  width: 100%;
  max-width: 1980px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 40px; }

.header_box {
  width: 370px;
  height: 185px;
  background-color: #fff;
  border-radius: 0 0 20px 20px;
  border: 3px solid #000;
  border-top: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center; }
  .header_box .header_item {
    width: fit-content;
    margin: 0 auto;
    background: url("img/logo.svg") center left no-repeat;
    background-size: 60px;
    padding: 5px 0 5px 70px; }
    .header_box .header_item p {
      font: 14px/1em "M PLUS 1", sans-serif;
      font-weight: 500;
      margin: 0 0 8px; }
    .header_box .header_item h1 {
      font: 29px/1em "M PLUS 1", sans-serif;
      font-weight: 500;
      letter-spacing: 0.1em; }
      .header_box .header_item h1 br {
        display: none; }
  .header_box > a {
    color: #000;
    background-image: radial-gradient(circle, #B2B0B0 1px, transparent 1px);
    background-position: left top;
    background-repeat: repeat-x;
    background-size: 8px 2px;
    width: calc(100% - 40px);
    font: 18px/1em "M PLUS 1", sans-serif;
    font-weight: 500;
    letter-spacing: 0.046em;
    margin: 10px 0 0 0;
    padding: 15px 0 0 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center; }
    .header_box > a .logo {
      overflow: hidden;
      text-indent: 100%;
      white-space: nowrap;
      margin: 0 0 0 5px;
      display: block;
      aspect-ratio: 204/45;
      width: 100%;
      max-width: 204px;
      height: auto;
      background: url("img/head.svg") center center no-repeat;
      background-size: contain; }

.header_nav {
  width: calc(100% - 370px);
  max-width: 540px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 40px 0 0 0; }
  .header_nav a {
    display: block;
    width: 260px;
    text-align: center;
    color: #fff;
    border-radius: 40px;
    height: 80px;
    border: 4px solid #000;
    border-bottom: 10px solid #000;
    font: 20px/65px "M PLUS 1", sans-serif;
    font-weight: 500;
    letter-spacing: 0.054em; }
  .header_nav .head_contact {
    background-color: #FF4943; }
  .header_nav .header_home {
    background-color: #1823FF;
    margin: 0 0 0 20px; }

@media (hover: hover) {
  .header_nav a:hover {
    color: #000 !important; }
  .header_nav .head_contact:hover {
    background-color: #FCDCDB; }
  .header_nav .header_home:hover {
    background-color: #DAE7FE; } }
/*max-width:1280px*/
@media (max-width: 1024px) {
  .header_flex {
    align-items: center;
    padding: 0 40px; }

  .header_nav {
    width: calc(100% - 370px);
    max-width: 260px;
    padding: 20px 0 0 0;
    display: block; }
    .header_nav a {
      width: 260px;
      border-radius: 40px;
      height: 75px;
      font: 18px/60px "M PLUS 1", sans-serif;
      font-weight: 500; }
    .header_nav .header_home {
      margin: 8px 0 0 0; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .header_flex {
    padding: 0 30px;
    align-items: flex-start; }

  .header_nav {
    width: calc(100% - 200px);
    max-width: 180px; }
    .header_nav a {
      width: 180px;
      border-radius: 40px;
      height: 60px;
      font: 18px/45px "M PLUS 1", sans-serif;
      font-weight: 700;
      border: 3px solid #000;
      border-bottom: 8px solid #000; }
    .header_nav .header_home {
      margin: 8px 0 0 0; }
    .header_nav span {
      display: none; }

  .header_box {
    width: 200px;
    height: 160px; }
    .header_box .header_item {
      width: fit-content;
      margin: 0 auto;
      background: url("img/logo.svg") center left no-repeat;
      background-size: 55px;
      padding: 5px 0 5px 65px; }
      .header_box .header_item p {
        display: none; }
      .header_box .header_item h1 {
        font: 20px/1.3em "M PLUS 1", sans-serif;
        font-weight: 500;
        letter-spacing: 0.1em; }
        .header_box .header_item h1 br {
          display: block; }
    .header_box > a .txt {
      display: none; }
    .header_box > a .logo {
      margin: 0;
      display: block; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .header_flex {
    padding: 0 25px;
    align-items: flex-start; }

  .header_nav {
    width: calc(100% - 140px);
    max-width: 150px; }
    .header_nav a {
      width: 150px;
      border-radius: 40px;
      height: 55px;
      font: 16px/45px "M PLUS 1", sans-serif;
      font-weight: 700;
      border-bottom: 7px solid #000; }
    .header_nav .header_home {
      margin: 8px 0 0 0; }
    .header_nav span {
      display: none; }

  .header_box {
    width: 140px;
    height: 110px; }
    .header_box .header_item {
      width: fit-content;
      margin: 0 auto;
      background: url("img/logo.svg") center left no-repeat;
      background-size: 33px;
      padding: 5px 0 5px 45px; }
      .header_box .header_item p {
        display: none; }
      .header_box .header_item h1 {
        font: 14px/1.3em "M PLUS 1", sans-serif;
        font-weight: 500;
        letter-spacing: 0.1em; }
        .header_box .header_item h1 br {
          display: block; }
    .header_box > p {
      margin: 5px 0 0;
      width: calc(100% - 30px);
      padding: 15px 0 10px 0; }
      .header_box > p .logo {
        margin: 0;
        display: block; } }
/*max-width:480px*/
/***************************************************/
.mv {
  background: url("img/mv.jpg") center center no-repeat;
  background-size: auto 100%;
  width: 100%;
  height: 980px;
  background-size: cover;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end; }
  .mv .anime {
    aspect-ratio: 788/805;
    width: calc(100% - 80px);
    max-width: 788px;
    height: auto;
    text-align: center;
    margin: 0 auto -60px;
    position: relative; }
    .mv .anime h1,
    .mv .anime span, .mv .anime:before, .mv .anime:after {
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
      text-indent: 100%;
      white-space: nowrap;
      aspect-ratio: 788/805;
      width: 100%;
      height: auto;
      display: block;
      opacity: 0; }
    .mv .anime h1 {
      background: url("img/mv_pc02.svg") center center no-repeat;
      background-size: contain;
      z-index: 5;
      animation: fadeIn 1s ease-in-out 1s forwards; }
    .mv .anime span {
      z-index: 3;
      background: url("img/mv_pc01.png") center center no-repeat;
      background-size: contain;
      animation: fadeIn 1s ease-in-out 0s forwards; }
    .mv .anime:before {
      content: "";
      background: url("img/mv_pc03.png") center center no-repeat;
      background-size: contain;
      animation: blinkFade 1s ease-in-out 1s infinite alternate; }
    .mv .anime:after {
      content: "";
      background: url("img/mv_pc04.png") center center no-repeat;
      background-size: contain;
      animation: blinkFade 0.5s ease-in-out 1.5s infinite alternate; }

@keyframes fadeIn {
  to {
    opacity: 1; } }
@keyframes blinkFade {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
/*max-width:1280px*/
@media (max-width: 1024px) {
  .mv {
    height: 840px; }
    .mv h1 {
      aspect-ratio: 788/805;
      width: calc(100% - 80px);
      max-width: 630px;
      margin: 0 auto -60px; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .mv {
    height: 768px; }
    .mv .anime {
      width: calc(100% - 20px);
      margin: 0 auto -40px; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .mv {
    height: 620px; }
    .mv .anime {
      aspect-ratio: 330/458;
      width: calc(100% - 10px); }
      .mv .anime h1,
      .mv .anime span, .mv .anime:before, .mv .anime:after {
        aspect-ratio: 330/458; }
      .mv .anime h1 {
        background: url("img/sp_pc02.svg") center center no-repeat;
        background-size: contain; }
      .mv .anime span {
        background: url("img/sp_pc01.png") center center no-repeat;
        background-size: contain; }
      .mv .anime:before {
        background: url("img/sp_pc03.png") center center no-repeat;
        background-size: contain; }
      .mv .anime:after {
        background: url("img/sp_pc04.png") center center no-repeat;
        background-size: contain; } }
/*max-width:480px*/
/***************************************************/
.why {
  background: url("img/why_bg.svg") top center repeat;
  border-top: 10px solid #000;
  padding: 160px 0; }

.why_flex {
  max-width: 1480px;
  width: calc(100% - 100px);
  margin: 0 auto 250px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch; }

.why_left {
  width: calc(100% - 870px);
  max-width: 480px;
  height: 100%;
  position: sticky;
  top: 20px; }
  .why_left p, .why_left h1 {
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap; }
  .why_left .ttl {
    background: url("img/why_ttl.svg") center top no-repeat;
    background-size: contain;
    aspect-ratio: 381/28;
    width: 100%;
    max-width: 381px;
    height: auto;
    margin: 0 0 25px 40px; }
  .why_left h1 {
    background: url("img/why_txt.svg") center top no-repeat;
    background-size: contain;
    aspect-ratio: 350/332;
    width: 100%;
    max-width: 350px;
    height: auto;
    margin: 0 0 70px 40px; }
  .why_left .character {
    background: url("img/mr_hukidashi.svg") center top no-repeat;
    background-size: contain;
    aspect-ratio: 481/348;
    width: 100%;
    max-width: 100%;
    height: auto; }

.why_right {
  width: 790px; }
  .why_right .red,
  .why_right .blue {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    margin-bottom: 50px; }
  .why_right p {
    font: 24px/2em "M PLUS 1", sans-serif;
    font-weight: 400;
    letter-spacing: 0.03em;
    max-width: 598px;
    max-width: calc(100% - 180px);
    background-color: #fff;
    padding: 35px 40px;
    border-radius: 30px;
    position: relative; }
    .why_right p .mark {
      font-weight: 600;
      background: linear-gradient(transparent 0%, #F4FB19 0%);
      display: inline; }
    .why_right p b {
      font-weight: 600; }
  .why_right .red {
    align-items: flex-start; }
    .why_right .red img {
      margin: 0 0 0 50px; }
    .why_right .red p:before {
      position: absolute;
      content: " ";
      aspect-ratio: 36/40;
      width: 100%;
      max-width: 36px;
      height: auto;
      top: 10px;
      left: auto;
      right: -36px;
      transform: translate(0%, 0%);
      background: url("img/arrow_right.svg") center center no-repeat;
      background-size: contain; }
  .why_right .blue {
    align-items: center; }
    .why_right .blue img {
      margin: 0 50px 0 0; }
  .why_right p:before {
    position: absolute;
    content: " ";
    aspect-ratio: 36/40;
    width: 100%;
    max-width: 36px;
    height: auto;
    top: 10px;
    left: -36px;
    transform: translate(0%, 0%);
    background: url("img/arrow_left.svg") center center no-repeat;
    background-size: contain; }

.fade {
  opacity: 0;
  top: 100px;
  transition: .3s;
  position: relative; }
  .fade.fadeUp {
    opacity: 1;
    top: 0px; }

@media (max-width: 1280px) {
  .why_flex {
    max-width: 860px;
    width: calc(100% - 100px);
    margin: 0 auto 250px;
    display: block; }

  .why_left {
    max-width: 860px;
    width: 100%;
    margin: 0 auto 120px;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start; }
    .why_left .ttl {
      aspect-ratio: 381/28;
      width: 100%;
      max-width: 100%;
      height: 28px;
      margin: 0 0 25px; }
    .why_left h1 {
      aspect-ratio: 350/332;
      width: 43%;
      max-width: 350px;
      height: auto;
      margin: 10px 0 0; }
    .why_left .character {
      aspect-ratio: 481/348;
      width: 55%;
      max-width: 480px;
      height: auto; } }
/*max-width:1280px*/
@media (max-width: 1024px) {
  .why_flex {
    max-width: 860px;
    width: calc(100% - 60px); }

  .why_left {
    align-items: center; }

  .why {
    background: url("img/why_bg.svg") top center repeat;
    border-top: 10px solid #000;
    padding: 160px 0 100px; }

  .why_right {
    max-width: 768px;
    width: 100%;
    margin: 0 auto; }
    .why_right .red,
    .why_right .blue {
      max-width: 650px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      -webkit-justify-content: flex-start;
      justify-content: flex-start;
      margin-bottom: 50px; }
      .why_right .red img,
      .why_right .blue img {
        width: 130px; }
    .why_right p {
      font: 20px/2em "M PLUS 1", sans-serif;
      font-weight: 400;
      letter-spacing: 0.03em;
      max-width: 690px;
      max-width: calc(100% - 180px); }
    .why_right .red {
      margin: 0 0 50px auto;
      align-items: flex-start; }
      .why_right .red img {
        margin: 0 0 0 50px; }
      .why_right .red p:before {
        position: absolute;
        content: " ";
        aspect-ratio: 36/40;
        width: 100%;
        max-width: 36px;
        height: auto;
        top: 10px;
        left: auto;
        right: -36px;
        transform: translate(0%, 0%);
        background: url("img/arrow_right.svg") center center no-repeat;
        background-size: contain; }
    .why_right .blue {
      align-items: center; }
      .why_right .blue img {
        margin: 0 50px 0 0; }
    .why_right p:before {
      position: absolute;
      content: " ";
      aspect-ratio: 36/40;
      width: 100%;
      max-width: 36px;
      height: auto;
      top: 10px;
      left: -36px;
      transform: translate(0%, 0%);
      background: url("img/arrow_left.svg") center center no-repeat;
      background-size: contain; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .why {
    border-top: 8px solid #000;
    padding: 100px 0 100px; }

  .why_flex {
    margin: 0 auto 200px; }

  .why_left {
    max-width: 860px;
    width: 100%;
    margin: 0 auto 80px;
    position: relative;
    display: block; }
    .why_left .ttl {
      aspect-ratio: 381/28;
      width: 100%;
      max-width: 380px;
      margin: 0 auto 25px; }
    .why_left h1 {
      aspect-ratio: 350/332;
      width: 100%;
      max-width: 380px;
      margin: 0 auto 35px; }
    .why_left .character {
      aspect-ratio: 481/348;
      width: 100%;
      max-width: 380px;
      margin: 0 auto; }

  .why_right {
    max-width: 540px;
    width: 100%;
    margin: 0 auto; }
    .why_right .red img,
    .why_right .blue img {
      width: 100px;
      position: absolute;
      top: 0;
      z-index: 15; }
    .why_right p {
      font: 18px/2em "M PLUS 1", sans-serif;
      font-weight: 400;
      letter-spacing: 0.03em;
      max-width: 100%;
      width: fit-content;
      background-color: #fff;
      padding: 35px 40px;
      border-radius: 30px;
      position: relative; }
      .why_right p:before {
        display: none; }
    .why_right .red {
      margin: 0 0 50px auto;
      align-items: flex-start; }
      .why_right .red img {
        margin: 0;
        right: 0; }
      .why_right .red p {
        text-align: justify;
        text-justify: inter-ideograph;
        margin: 0 60px 0 0;
        padding: 25px 60px 25px 25px; }
        .why_right .red p br {
          display: none; }
        .why_right .red p .block {
          display: block; }
    .why_right .blue {
      align-items: center; }
      .why_right .blue img {
        margin: 0;
        left: 0; }
      .why_right .blue p {
        text-align: justify;
        text-justify: inter-ideograph;
        margin: 0 0 0 60px;
        padding: 25px 25px 25px 60px; }
        .why_right .blue p .block {
          display: block; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .why {
    background: url(img/why_bg.svg) top center repeat;
    border-top: 10px solid #000;
    padding: 50px 0 60px; }

  .why_flex {
    width: calc(100% - 40px);
    margin: 0 auto 200px; }

  .why_left {
    margin: 0 auto 60px; }
    .why_left .ttl {
      aspect-ratio: 381/28;
      width: 100%;
      max-width: 310px;
      margin: 0 auto 25px; }
    .why_left h1 {
      aspect-ratio: 350/332;
      width: 100%;
      max-width: 270px;
      margin: 0 auto 35px; }
    .why_left .character {
      aspect-ratio: 481/348;
      width: 100%;
      max-width: 335px;
      margin: 0 auto; }

  .why_right {
    max-width: 540px;
    width: 100%;
    margin: 0 auto; }
    .why_right .red img,
    .why_right .blue img {
      width: 80px;
      position: absolute;
      top: 0;
      z-index: 15; }
    .why_right p {
      font: 17px/1.8em "M PLUS 1", sans-serif;
      font-weight: 400;
      letter-spacing: 0.03em;
      max-width: 100%;
      width: fit-content;
      background-color: #fff;
      padding: 35px 40px;
      border-radius: 30px;
      position: relative; }
      .why_right p:before {
        display: none; }
    .why_right .red {
      margin: 0 0 25px auto;
      align-items: flex-start; }
      .why_right .red img {
        margin: 0;
        right: 0; }
      .why_right .red p {
        margin: 0 30px 0 0;
        padding: 25px 60px 25px 25px; }
    .why_right .blue {
      margin-bottom: 25px;
      align-items: center; }
      .why_right .blue img {
        margin: 0;
        left: 0; }
      .why_right .blue p {
        margin: 0 0 0 30px;
        padding: 25px 25px 25px 60px; }
        .why_right .blue p br {
          display: none; } }
/*max-width:480px*/
/********************************************/
.why_list {
  max-width: 1610px;
  width: calc(100% - 100px);
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
  z-index: 10; }
  .why_list .list01,
  .why_list .list02,
  .why_list .list03 {
    opacity: 1;
    top: 0;
    width: calc((100% - 80px)/3);
    max-width: 510px;
    position: relative;
    border-radius: 250px;
    border: 3px solid #000;
    border-bottom: 8px solid #000; }
    .why_list .list01:before,
    .why_list .list02:before,
    .why_list .list03:before {
      position: absolute;
      content: "";
      aspect-ratio: 180/299;
      width: calc(100% - 40px);
      max-width: 180px;
      height: auto;
      top: -165px;
      left: 50%;
      transform: translate(-50%, 0%);
      background: url("img/why_list.svg") center center no-repeat;
      background-size: contain;
      z-index: 10; }
    .why_list .list01 div,
    .why_list .list02 div,
    .why_list .list03 div {
      min-height: 740px;
      width: 100%;
      height: 100%;
      border-radius: 250px;
      position: relative;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: center;
      padding: 180px 60px 0;
      border: 13px solid #fff; }
  .why_list span {
    display: block;
    aspect-ratio: 284/77;
    width: 100%;
    max-width: 284px;
    height: auto;
    margin: 0 auto;
    overflow: hidden;
    text-indent: 150%;
    white-space: nowrap;
    margin-bottom: 45px;
    padding: 50px 50px 0; }
  .why_list h2 {
    font: 52px/1em "M PLUS 1", sans-serif;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 25px 0 30px;
    margin: 0 auto 35px;
    display: block;
    max-width: 330px;
    width: 100%;
    text-align: center;
    background-image: linear-gradient(to right, #000 3px, transparent 2px), linear-gradient(to right, #000 3px, transparent 2px);
    background-size: 7px 1px,7px 1px;
    background-position: left bottom,left top;
    background-repeat: repeat-x,repeat-x; }
  .why_list p {
    text-align: justify;
    text-justify: inter-ideograph;
    font: 25px/1.8em "M PLUS 1", sans-serif;
    font-weight: 500;
    letter-spacing: 0.03em; }
  .why_list .list01 {
    background-color: #FCDCDB; }
    .why_list .list01 span {
      background: url("img/why01.svg") center center no-repeat;
      background-size: contain; }
  .why_list .list02 {
    background-color: #DAE7FE; }
    .why_list .list02 span {
      background: url("img/why02.svg") center center no-repeat;
      background-size: contain; }
  .why_list .list03 {
    background-color: #FCDCDB; }
    .why_list .list03 span {
      background: url("img/why03.svg") center center no-repeat;
      background-size: contain; }

@media (max-width: 1500px) {
  .why_list .list01 div,
  .why_list .list02 div,
  .why_list .list03 div {
    padding: 180px 50px 0; }
  .why_list h2 {
    font: 3vw/1em "M PLUS 1", sans-serif;
    font-weight: 500; }
  .why_list p {
    font: 1.75vw/1.8em "M PLUS 1", sans-serif;
    font-weight: 500;
    letter-spacing: 0.03em; } }
/*max-width:1280px*/
@media (max-width: 1280px) {
  .why_list .list01,
  .why_list .list02,
  .why_list .list03 {
    width: calc((100% - 60px)/3);
    max-width: 510px; }
    .why_list .list01 div,
    .why_list .list02 div,
    .why_list .list03 div {
      min-height: 540px;
      padding: 130px 30px 50px; }
    .why_list .list01:before,
    .why_list .list02:before,
    .why_list .list03:before {
      max-width: 130px;
      top: -123px;
      left: 50%; }
  .why_list span {
    max-width: 210px;
    height: auto;
    margin-bottom: 25px;
    padding: 50px 50px 0; }
  .why_list h2 {
    font: 3vw/1em "M PLUS 1", sans-serif;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 25px 0 30px;
    margin: 0 auto 20px; }
  .why_list p {
    text-align: justify;
    text-justify: inter-ideograph;
    font: 19px/1.8em "M PLUS 1", sans-serif;
    font-weight: 500;
    letter-spacing: 0.03em; } }
/*max-width:1280px*/
@media (max-width: 1024px) {
  .why_list {
    max-width: 1610px;
    width: calc(100% - 60px);
    margin: 0 auto;
    display: block;
    z-index: 10; }
    .why_list .list01,
    .why_list .list02,
    .why_list .list03 {
      transform: scale(0.9);
      transform-origin: top center;
      opacity: 0;
      top: 100px;
      width: 100%;
      max-width: 510px;
      margin: 0 auto 100px; }
      .why_list .list01.fadeUp,
      .why_list .list02.fadeUp,
      .why_list .list03.fadeUp {
        opacity: 1;
        top: 0; }
      .why_list .list01:before,
      .why_list .list02:before,
      .why_list .list03:before {
        max-width: 180px;
        height: auto;
        top: -165px; }
      .why_list .list01 div,
      .why_list .list02 div,
      .why_list .list03 div {
        min-height: 740px;
        padding: 180px 60px 0; }
    .why_list span {
      max-width: 284px; }
    .why_list h2 {
      font: 52px/1em "M PLUS 1", sans-serif;
      font-weight: 500;
      letter-spacing: 0.01em;
      padding: 25px 0 30px;
      margin: 0 auto 35px;
      display: block;
      max-width: 330px;
      width: 100%; }
    .why_list p {
      font: 25px/1.8em "M PLUS 1", sans-serif;
      font-weight: 500;
      letter-spacing: 0.03em; }
    .why_list .list03 {
      margin-bottom: 0 !important; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .why_list {
    width: calc(100% - 100px); }
    .why_list .list01,
    .why_list .list02,
    .why_list .list03 {
      transform: scale(1);
      width: 100%;
      max-width: 350px;
      margin: 0 auto 170px; }
      .why_list .list01:before,
      .why_list .list02:before,
      .why_list .list03:before {
        max-width: 150px;
        height: auto;
        top: -130px; }
      .why_list .list01 div,
      .why_list .list02 div,
      .why_list .list03 div {
        min-height: auto;
        padding: 135px 30px 80px; }
    .why_list span {
      max-width: 200px; }
    .why_list h2 {
      font: 40px/1em "M PLUS 1", sans-serif;
      font-weight: 500;
      margin: 0 auto 20px; }
    .why_list p {
      font: 18px/2em "M PLUS 1", sans-serif;
      font-weight: 500;
      letter-spacing: 0.03em; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .why_list {
    width: calc(100% - 40px); }
    .why_list .list01,
    .why_list .list02,
    .why_list .list03 {
      transform: scale(1);
      width: 100%;
      max-width: 350px;
      margin: 0 auto 170px; }
      .why_list .list01:before,
      .why_list .list02:before,
      .why_list .list03:before {
        max-width: 150px;
        height: auto;
        top: -130px; }
      .why_list .list01 div,
      .why_list .list02 div,
      .why_list .list03 div {
        min-height: auto;
        padding: 130px 30px 80px; }
    .why_list span {
      max-width: 200px; }
    .why_list h2 {
      font: 34px/1em "M PLUS 1", sans-serif;
      font-weight: 500; } }
/*max-width:480px*/
/***************************************************/
.spec {
  background: url("img/spec_bg.svg") top center repeat;
  border-top: 10px solid #000;
  padding: 160px 0; }
  .spec h1 {
    margin: 0 0 60px; }
    .spec h1 span {
      overflow: hidden;
      text-indent: 100%;
      white-space: nowrap;
      display: block;
      background: url("img/ttl_spec.svg") center center no-repeat;
      background-size: contain;
      aspect-ratio: 35/11;
      width: 100%;
      max-width: 350px;
      height: auto; }
    .spec h1 small {
      font: 30px/1em "M PLUS 1", sans-serif;
      font-weight: 500;
      letter-spacing: 0.15em;
      display: block;
      margin: 20px 0 0;
      position: relative;
      padding: 0 0 0 35px; }
      .spec h1 small:before {
        position: absolute;
        content: "";
        display: block;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background-color: #FF4943;
        top: 52%;
        left: 0%;
        transform: translate(0%, -50%); }

.spec_box {
  max-width: 1460px;
  width: calc(100% - 100px);
  margin: 0 auto; }
  .spec_box dl {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    border: 2px solid #000;
    border-bottom: 5px solid #000;
    border-radius: 35px;
    background-color: #fff;
    width: fit-content;
    padding: 0;
    margin: 0 auto 75px;
    font: 26px/1em "M PLUS 1", sans-serif;
    font-weight: 500;
    letter-spacing: 0.05em; }
  .spec_box dt {
    padding: 10px 0 13px 5px;
    width: 105px;
    text-align: center;
    border-right: 2px solid; }
  .spec_box dd {
    text-align: center;
    padding: 10px 30px 13px;
    width: calc(100% - 105px); }
    .spec_box dd br {
      display: none; }
  .spec_box ul {
    width: 100%;
    max-width: 1390px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    margin: 0 auto;
    position: relative;
    z-index: 10; }
    .spec_box ul li {
      text-align: center;
      max-width: 280px;
      width: calc((100% - 60px)/4); }
    .spec_box ul img {
      max-width: 100%; }
    .spec_box ul p {
      display: block;
      text-align: center;
      width: 90px;
      margin: 15px auto 0;
      height: 46px;
      padding: 0 0 0 0.5em;
      font: 22px/43px "M PLUS 1", sans-serif;
      font-weight: 500;
      letter-spacing: 0.5em;
      border: 2px solid #000;
      background-color: #fff;
      position: relative; }
      .spec_box ul p:before {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        content: "";
        background-color: #000;
        top: 5px;
        right: -5px;
        z-index: -1; }

/*max-width:1280px*/
@media (max-width: 1024px) {
  .spec_box {
    width: calc(100% - 60px); }
    .spec_box dl {
      font: 22px/1em "M PLUS 1", sans-serif;
      font-weight: 500;
      letter-spacing: 0.05em; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .spec {
    border-top: 8px solid #000;
    padding: 100px 0; }
    .spec h1 {
      margin: 0 0 60px; }
      .spec h1 span {
        max-width: 240px; }

  .spec_box dl {
    width: fit-content;
    padding: 0;
    margin: 0 auto 75px;
    font: 22px/1.5em "M PLUS 1", sans-serif;
    font-weight: 500;
    letter-spacing: 0.05em; }
  .spec_box dt {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    width: 90px; }
  .spec_box dd {
    text-align: left;
    padding: 10px 30px 13px;
    width: calc(100% - 90px); }
    .spec_box dd br {
      display: block; }
  .spec_box ul {
    max-width: 540px; }
    .spec_box ul li {
      margin: 0 0 20px;
      width: calc((100% - 20px)/2); }
    .spec_box ul p {
      width: 80px;
      height: 40px;
      font: 20px/38px "M PLUS 1", sans-serif;
      font-weight: 500;
      letter-spacing: 0.5em; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .spec {
    padding: 60px 0; }
    .spec h1 {
      margin: 0 0 40px; }
      .spec h1 span {
        max-width: 146px; }
      .spec h1 small {
        font: 19px / 1em "M PLUS 1", sans-serif;
        font-weight: 500;
        padding: 0 0 0 20px; }
        .spec h1 small:before {
          width: 12px;
          height: 12px; }

  .spec_box dl {
    width: fit-content;
    padding: 0;
    margin: 0 auto 40px;
    font: 18px/1.5em "M PLUS 1", sans-serif;
    font-weight: 500;
    letter-spacing: 0.05em; }
  .spec_box dt {
    width: 70px; }
  .spec_box dd {
    text-align: left;
    padding: 10px 20px 13px;
    width: calc(100% - 70px); }
  .spec_box ul {
    max-width: 250px; }
    .spec_box ul li {
      margin: 0 auto 30px;
      width: 100%; }
      .spec_box ul li:last-of-type {
        margin: 0 auto; }
    .spec_box ul p {
      width: 80px;
      height: 40px;
      font: 20px/38px "M PLUS 1", sans-serif;
      font-weight: 500;
      letter-spacing: 0.5em; }
    .spec_box ul img {
      max-width: 220px; } }
/*max-width:480px*/
/***************************************************/
.contact {
  background: url("img/why_bg.svg") top center repeat;
  border-top: 10px solid #000;
  padding: 160px 0; }
  .contact h1 {
    margin: 0 0 60px; }
    .contact h1 span {
      display: block;
      background: url("img/ttl_contact_.svg") center center no-repeat;
      background-size: contain;
      aspect-ratio: 684/108;
      width: 100%;
      max-width: 684px;
      height: auto; }
    .contact h1 small {
      font: 30px/1em "M PLUS 1", sans-serif;
      font-weight: 500;
      letter-spacing: 0.15em;
      display: block;
      margin: 20px 0 0;
      position: relative;
      padding: 0 0 0 35px; }
      .contact h1 small:before {
        position: absolute;
        content: "";
        display: block;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background-color: #FF4943;
        top: 52%;
        left: 0%;
        transform: translate(0%, -50%); }

.contact_box {
  max-width: 1460px;
  width: calc(100% - 100px);
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start; }
  .contact_box .left {
    width: calc(100% - 600px);
    max-width: 795px; }
    .contact_box .left p {
      font: 24px/2em "M PLUS 1", sans-serif;
      font-weight: 500;
      letter-spacing: 0.03em; }
      .contact_box .left p span {
        background: linear-gradient(transparent 10%, #F4FB19 0%);
        display: inline; }
  .contact_box .right {
    width: 560px; }
    .contact_box .right p {
      font: 21px/1em "M PLUS 1", sans-serif;
      font-weight: 500;
      letter-spacing: 0.03em;
      width: fit-content;
      padding: 15px 25px;
      background-color: #fff;
      border-radius: 50px;
      border: 2px solid #000;
      margin: 0 0 35px;
      position: relative; }
      .contact_box .right p br {
        display: none; }
      .contact_box .right p:before {
        position: absolute;
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-right: 12px solid transparent;
        border-left: 12px solid transparent;
        border-top: 21px solid #ffffff;
        border-bottom: 0;
        top: auto;
        bottom: -21px;
        left: 50%;
        transform: translate(-50%, 0%);
        z-index: 5; }
      .contact_box .right p:after {
        position: absolute;
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-right: 15px solid transparent;
        border-left: 15px solid transparent;
        border-top: 25px solid #000000;
        border-bottom: 0;
        top: auto;
        bottom: -25px;
        left: 50%;
        transform: translate(-50%, 0%);
        z-index: 1; }
  .contact_box .btn {
    color: #fff;
    display: block;
    background-color: #FF4943;
    max-width: 560px;
    width: 100%;
    margin: 0 0 40px;
    height: 150px;
    border-radius: 30px;
    border: 4px solid #000;
    border-bottom: 10px solid #000;
    transition: .3s; }
    .contact_box .btn span {
      position: relative;
      font: 35px/135px "M PLUS 1", sans-serif;
      font-weight: 700;
      letter-spacing: 0.06em;
      display: block;
      width: fit-content;
      margin: 0 auto;
      padding: 0 80px 0 0; }
      .contact_box .btn span br {
        display: none; }
      .contact_box .btn span:before, .contact_box .btn span:after {
        transition: .3s;
        display: block;
        width: 70px;
        height: 70px;
        position: absolute;
        content: "";
        top: 50%;
        left: auto;
        right: -5px;
        transform: translate(0%, -50%); }
      .contact_box .btn span:before {
        background: url("img/arrow01-01.svg") center center no-repeat;
        background-size: contain; }
      .contact_box .btn span:after {
        background: url("img/arrow01-02.svg") center center no-repeat;
        background-size: contain;
        opacity: 0; }
  .contact_box .tell {
    pointer-events: none;
    display: block;
    color: #000;
    font: 50px/1em "M PLUS 1", sans-serif;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0 0 0 50px;
    background: url("img/icon_tel.svg") left top 10px no-repeat; }
    .contact_box .tell small {
      font: 20px/1em "M PLUS 1", sans-serif;
      font-weight: 500;
      letter-spacing: 0.04em;
      margin: 15px 0 0 0;
      display: block; }

@media (hover: hover) {
  .contact_box .right .btn:hover {
    color: #000;
    background-color: #FCDCDB; }
    .contact_box .right .btn:hover span:before {
      opacity: 0; }
    .contact_box .right .btn:hover span:after {
      opacity: 1; } }
@media (max-width: 1366px) {
  .contact_box .left {
    transform: scale(0.9);
    transform-origin: left center;
    width: calc(100% - 520px);
    max-width: 795px; }
  .contact_box .right {
    transform: scale(0.9);
    transform-origin: right center;
    width: 520px; } }
/*max-width:1280px*/
@media (max-width: 1280px) {
  .contact_box {
    display: block; }
    .contact_box .left {
      transform: scale(1);
      transform-origin: left center;
      width: 100%;
      margin: 0 0 60px; }
    .contact_box .right {
      transform: scale(1);
      transform-origin: right center;
      width: 100%; } }
/*max-width:1280px*/
@media (max-width: 1024px) {
  .contact {
    border-top: 8px solid #000; }

  .contact_box {
    max-width: 1460px;
    width: calc(100% - 60px); } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .contact {
    padding: 100px 0; }
    .contact h1 {
      margin: 0 0 60px;
      max-width: 400px; }
      .contact h1 span {
        height: auto; }

  .contact_box .left {
    max-width: 795px; }
    .contact_box .left p {
      font: 20px/2em "M PLUS 1", sans-serif;
      font-weight: 500; }
  .contact_box .right {
    width: 100%; }
    .contact_box .right p {
      font: 21px/1.5em "M PLUS 1", sans-serif;
      font-weight: 500;
      letter-spacing: 0.03em;
      width: fit-content;
      padding: 15px 40px;
      background-color: #fff;
      border-radius: 25px;
      border: 2px solid #000;
      margin: 0 0 35px;
      position: relative; }
      .contact_box .right p br {
        display: block; }
      .contact_box .right p:before {
        position: absolute;
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-right: 12px solid transparent;
        border-left: 12px solid transparent;
        border-top: 21px solid #ffffff;
        border-bottom: 0;
        top: auto;
        bottom: -21px;
        left: 50%;
        transform: translate(-50%, 0%);
        z-index: 5; }
      .contact_box .right p:after {
        position: absolute;
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-right: 15px solid transparent;
        border-left: 15px solid transparent;
        border-top: 25px solid #000000;
        border-bottom: 0;
        top: auto;
        bottom: -25px;
        left: 50%;
        transform: translate(-50%, 0%);
        z-index: 1; }
  .contact_box .btn {
    height: 110px; }
    .contact_box .btn span {
      font: 24px/95px "M PLUS 1", sans-serif;
      font-weight: 700;
      letter-spacing: 0.06em;
      padding: 0 65px 0 0; }
      .contact_box .btn span:before, .contact_box .btn span:after {
        width: 50px;
        height: 50px; }
  .contact_box .tell {
    pointer-events: all;
    display: block;
    color: #000;
    font: 40px/1em "M PLUS 1", sans-serif;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0 0 0 37px;
    background: url("img/icon_tel.svg") left top 5px no-repeat;
    background-size: 25px auto; }
    .contact_box .tell small {
      font: 18px/1em "M PLUS 1", sans-serif;
      font-weight: 500;
      margin: 10px 0 0 0; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .contact {
    padding: 60px 0; }
    .contact h1 {
      margin: 0 0 40px;
      max-width: 290px; }
      .contact h1 span {
        height: auto; }
      .contact h1 small {
        font: 19px / 1em "M PLUS 1", sans-serif;
        font-weight: 500;
        padding: 0 0 0 20px; }
        .contact h1 small:before {
          width: 12px;
          height: 12px; }

  .contact_box {
    width: calc(100% - 40px); }
    .contact_box .left {
      max-width: 795px;
      margin-bottom: 40px; }
      .contact_box .left p {
        max-width: 295px;
        margin: 0 auto 0px;
        font: 18px/2em "M PLUS 1", sans-serif;
        font-weight: 500;
        text-align: justify;
        text-justify: inter-ideograph; }
        .contact_box .left p br {
          display: none; }
    .contact_box .right {
      width: 100%; }
      .contact_box .right p {
        font: 18px/1.5em "M PLUS 1", sans-serif;
        font-weight: 500;
        padding: 15px 25px; }
    .contact_box .btn {
      height: auto;
      padding: 15px 0 18px;
      margin: 0 auto 30px; }
      .contact_box .btn span {
        font: 24px/1.5em "M PLUS 1", sans-serif;
        font-weight: 700;
        letter-spacing: 0.06em;
        padding: 0 85px 0 0; }
        .contact_box .btn span:before, .contact_box .btn span:after {
          width: 60px;
          height: 60px; }
        .contact_box .btn span br {
          display: block; }
    .contact_box .tell {
      font: 32px/1em "M PLUS 1", sans-serif;
      font-weight: 700; } }
/*max-width:480px*/
/***************************************************/
footer {
  border-top: 10px solid #000;
  padding: 150px 0 0;
  background-color: #35D3ED;
  overflow: hidden; }

.footer_box {
  max-width: 1660px;
  width: calc(100% - 100px);
  margin: 0 auto 50px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center; }

.f-left {
  width: 760px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center; }
  .f-left p {
    transition: .3s;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    white-space: nowrap;
    display: block;
    background: url("img/footer_txt.svg") center center no-repeat;
    background-size: contain;
    aspect-ratio: 550/236;
    width: 100%;
    max-width: 550px;
    height: auto; }
  .f-left img {
    transition: .3s;
    animation: huwahuwa 3s infinite linear both; }

@keyframes huwahuwa {
  0% {
    transform: translatey(0); }
  50% {
    transform: translatey(-10px); }
  100% {
    transform: translatey(0%); } }
.f-right {
  transition: .3s;
  width: 410px; }
  .f-right .footer_logo {
    position: relative;
    background: url("img/logo_black.svg") left center no-repeat;
    padding: 10px 0 10px 90px;
    margin: 0 0 20px auto; }
    .f-right .footer_logo p {
      font: 17px/1em "M PLUS 1", sans-serif;
      font-weight: 500;
      margin: 0 0 10px; }
    .f-right .footer_logo h1 {
      font: 36px/1em "M PLUS 1", sans-serif;
      font-weight: 500;
      letter-spacing: 0.1em; }
  .f-right a {
    transition: .3s;
    font: 20px/70px "M PLUS 1", sans-serif;
    font-weight: 500;
    letter-spacing: 0.046em;
    display: block;
    margin: 0 0 20px auto;
    border: 3px solid #000;
    border-bottom: 6px solid #000;
    width: 260px;
    height: 80px;
    border-radius: 50px;
    color: #fff;
    background-color: #1823FF;
    text-align: center; }
  .f-right small {
    display: block;
    text-align: right;
    font: 15px/1em "M PLUS 1", sans-serif;
    font-weight: 400;
    letter-spacing: 0.05em; }

@media (hover: hover) {
  .f-right a:hover {
    color: #000;
    background-color: #DAE7FE; } }
@media (max-width: 1366px) {
  .f-left {
    transition: .3s;
    width: 635px; }
    .f-left p {
      max-width: 460px;
      height: auto; }
    .f-left img {
      width: 150px; }

  .f-right {
    transform: scale(0.9);
    transform-origin: right center; } }
/*max-width:1280px*/
@media (max-width: 1280px) {
  .footer_box {
    margin: 0 auto 25px;
    display: block; }

  .f-left {
    width: 100%;
    max-width: 760px;
    margin: 0 auto 50px; }
    .f-left p {
      max-width: 550px; }
    .f-left img {
      width: 178px; }

  .f-right {
    transform: scale(1);
    transition: .3s;
    width: 100%;
    max-width: 760px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    position: relative;
    z-index: 100; }
    .f-right .footer_logo {
      margin: 0; }
    .f-right a {
      margin: 0 0 0 45px; }
    .f-right small {
      display: block;
      position: absolute;
      width: 100%;
      text-align: center;
      bottom: -105px; } }
/*max-width:1280px*/
@media (max-width: 1024px) {
  .footer_box {
    width: calc(100% - 60px);
    margin: 0 auto 50px; }

  .f-left {
    width: 100%;
    max-width: 610px;
    margin: 0 auto 50px; }
    .f-left p {
      max-width: 440px; }
    .f-left img {
      width: 150px; }

  .f-right {
    transition: .3s;
    max-width: 700px;
    width: 100%; }
    .f-right .footer_logo {
      position: relative;
      background: url("img/logo_black.svg") left center no-repeat;
      padding: 10px 0 10px 90px;
      margin: 0 0 20px auto; }
      .f-right .footer_logo p {
        font: 16px/1em "M PLUS 1", sans-serif;
        font-weight: 500;
        margin: 0 0 10px; }
      .f-right .footer_logo h1 {
        font: 34px/1em "M PLUS 1", sans-serif;
        font-weight: 500;
        letter-spacing: 0.1em; }
    .f-right a {
      transition: .3s;
      font: 18px/70px "M PLUS 1", sans-serif;
      font-weight: 500;
      letter-spacing: 0.046em;
      display: block;
      margin: 0 0 20px auto;
      border: 3px solid #000;
      border-bottom: 6px solid #000;
      width: 250px;
      height: 80px;
      border-radius: 50px;
      color: #fff;
      background-color: #1823FF;
      text-align: center; }
    .f-right small {
      bottom: -127px; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  footer {
    border-top: 8px solid #000;
    padding: 100px 0 0; }

  .f-left {
    max-width: 440px;
    margin: 0 auto 50px;
    display: block; }
    .f-left p {
      max-width: 440px; }
    .f-left img {
      width: 150px;
      display: block;
      margin: 0 auto 30px; }

  .f-right {
    display: block; }
    .f-right .footer_logo {
      margin: 0 auto 15px;
      width: fit-content; }
    .f-right a {
      margin: 0 auto; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .footer_box {
    width: calc(100% - 40px);
    margin: 0 auto 70px; }

  footer {
    padding: 40px 0 0; }

  .f-left {
    max-width: 440px;
    margin: 0 auto 50px;
    display: block; }
    .f-left p {
      max-width: 440px; }
    .f-left img {
      width: 130px;
      display: block;
      margin: 0 auto 30px; }

  .f-right .footer_logo {
    position: relative;
    background: url("img/logo_black.svg") left center no-repeat;
    background-size: 52px;
    padding: 10px 0 10px 65px;
    margin: 0 0 20px auto; }
    .f-right .footer_logo p {
      font: 13px/1em "M PLUS 1", sans-serif;
      font-weight: 500;
      margin: 0 0 10px; }
    .f-right .footer_logo h1 {
      font: 28px/1em "M PLUS 1", sans-serif;
      font-weight: 500;
      letter-spacing: 0.1em; }
  .f-right a {
    margin: 0 auto;
    width: 238px;
    height: 75px;
    font: 18px /68px "M PLUS 1", sans-serif;
    font-weight: 500; }
  .f-right small {
    bottom: -110px; } }
/*max-width:480px*/
/***************************************************/
@keyframes infinity-scroll-right {
  0% {
    transform: translateX(0%); }
  100% {
    transform: translateX(-100%); } }
.scroll-infinity {
  overflow: hidden;
  position: relative; }

.scroll-infinity__wrap {
  display: flex; }

.scroll-infinity__list {
  display: flex;
  list-style: none;
  margin: 0 65px 0 0;
  padding: 0;
  animation: infinity-scroll-right 20s linear infinite; }

.scroll-infinity__item {
  flex-shrink: 0;
  width: 1866px; }

.scroll-infinity__item img {
  width: 100%;
  display: block; }

/*max-width:1280px*/
/*max-width:1024px*/
/*max-width:768px*/
@media (max-width: 480px) {
  .scroll-infinity__item {
    flex-shrink: 0;
    width: 1257px; } }
/*max-width:480px*/
/***************************************************/
.page-top {
  background: url("img/page_top.svg") center center no-repeat;
  background-size: contain;
  aspect-ratio: 90/82;
  width: 100%;
  max-width: 90px;
  height: auto;
  position: fixed;
  bottom: -100px;
  right: 20px;
  z-index: 888;
  transition: .3s; }
  .page-top.active {
    bottom: 20px; }

@media (hover: hover) {
  .page-top:hover {
    cursor: pointer;
    bottom: 30px; } }
/*max-width:1280px*/
/*max-width:1024px*/
/*max-width:768px*/
@media (max-width: 480px) {
  .page-top {
    max-width: 70px; } }
/*max-width:480px*/
/***************************************************/
@keyframes huwahuwa02 {
  0% {
    transform: translate(-50%, 0%) translatey(0); }
  50% {
    transform: translate(-50%, 0%) translatey(-10px); }
  100% {
    transform: translate(-50%, 0%) translatey(0%); } }
.form {
  background: url("img/why_bg.svg") top center repeat;
  padding: 260px 0; }
  .form h1 {
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    margin: 0 auto 40px;
    display: block;
    background: url("img/ttl_contact_.svg") center bottom no-repeat;
    background-size: contain;
    aspect-ratio: 684/108;
    width: 100%;
    max-width: 684px;
    height: auto;
    position: relative;
    padding: 350px 0 0; }
    .form h1:before {
      position: absolute;
      content: "";
      display: block;
      animation: huwahuwa02 3s infinite linear both;
      aspect-ratio: 178/247;
      width: 100%;
      max-width: 164px;
      height: auto;
      top: 0;
      left: 50%;
      transform: translate(-50%, 0%);
      background: url("img/character.svg") center center no-repeat;
      background-size: contain; }
  .form .h1txt {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: center;
    justify-content: center;
    align-items: center;
    font: 30px/1em "M PLUS 1", sans-serif;
    font-weight: 500;
    letter-spacing: 0.15em;
    position: relative;
    padding: 0 35px;
    width: fit-content;
    margin: 0 auto 75px; }
    .form .h1txt span {
      overflow: hidden;
      text-indent: 100%;
      white-space: nowrap;
      margin: 0 10px 0 0;
      display: block;
      aspect-ratio: 204 / 45;
      width: 100%;
      max-width: 204px;
      height: auto;
      background: url(img/head.svg) center center no-repeat;
      background-size: contain; }
    .form .h1txt:before {
      position: absolute;
      content: "";
      display: block;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background-color: #FF4943;
      top: 52%;
      left: 0%;
      transform: translate(0%, -50%); }
    .form .h1txt:after {
      position: absolute;
      content: "";
      display: block;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background-color: #FF4943;
      top: 52%;
      right: 0%;
      transform: translate(0%, -50%); }

/*max-width:1280px*/
/*max-width:1024px*/
@media (max-width: 768px) {
  .form h1 {
    max-width: 400px;
    padding: 265px 0 0; }
    .form h1:before {
      max-width: 140px; }
  .form .h1txt {
    display: block;
    font: 25px/1em "M PLUS 1", sans-serif;
    font-weight: 500; }
    .form .h1txt span {
      margin: 0 auto 15px; }
    .form .h1txt:before {
      top: 52%;
      left: 0%;
      transform: translate(0%, -50%); }
    .form .h1txt:after {
      top: 52%;
      right: 0%;
      transform: translate(0%, -50%); } }
/*max-width:768px*/
@media (max-width: 480px) {
  .form {
    padding: 190px 0; }
    .form h1 {
      max-width: 290px;
      padding: 195px 0 0; }
      .form h1:before {
        max-width: 100px; }
    .form .h1txt {
      display: block;
      font: 20px/1em "M PLUS 1", sans-serif;
      font-weight: 500; } }
/*max-width:480px*/
/**********************************************************/
.form .box {
  padding: 80px 50px;
  max-width: 1400px;
  width: calc(100% - 100px);
  margin: 0 auto;
  background-color: #fff;
  border-radius: 25px;
  border: 2px solid #000;
  border-bottom: 4px solid #000; }
.form h2 {
  font: 30px/1.8em "M PLUS 1", sans-serif;
  font-weight: 700;
  letter-spacing: 0.03em;
  display: block;
  width: fit-content;
  margin: 0 auto 55px;
  padding: 10px 50px;
  border-radius: 50px;
  background-color: #A0EEFB;
  border: 2px solid #000;
  border-bottom: 4px solid #000; }
  .form h2 br {
    display: none; }
.form .phone {
  max-width: 1100px;
  margin: 0 auto 80px;
  border-bottom: 1px solid #8E8B8B;
  padding: 0 0 80px; }
  .form .phone.thanks {
    margin: 0 auto 0;
    border-top: 1px solid #8E8B8B;
    border-bottom: none;
    padding: 80px 0 40px; }
    .form .phone.thanks dl {
      margin-bottom: 80px; }
  .form .phone dl {
    text-align: center; }
  .form .phone dt {
    font: 35px/1em "M PLUS 1", sans-serif;
    font-weight: 700;
    margin: 0 0 30px; }
  .form .phone dd {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center; }
    .form .phone dd span {
      padding: 5px 0 0 25px;
      font: 24px/1em "M PLUS 1", sans-serif;
      font-weight: 500;
      letter-spacing: 0.05em; }
    .form .phone dd a {
      width: fit-content;
      pointer-events: none;
      display: block;
      color: #000;
      font: 50px/1em "M PLUS 1", sans-serif;
      font-weight: 700;
      letter-spacing: 0.06em;
      padding: 0 0 0 45px;
      background: url("img/icon_tel.svg") left top 8px no-repeat;
      background-size: 30px auto; }
      .form .phone dd a small {
        font: 18px/1em "M PLUS 1", sans-serif;
        font-weight: 500; }
.form .mail {
  max-width: 1120px;
  margin: 0 auto; }
  .form .mail p {
    text-align: center;
    font: 20px/2.4em "M PLUS 1", sans-serif;
    font-weight: 400;
    margin: 0 0 100px; }
.form .form_box dl {
  margin: 0 auto 60px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start; }
  .form .form_box dl.conf dd {
    padding: 25px 0 0; }
.form .form_box dt {
  padding: 15px 0;
  font: 19px/28px "M PLUS 1", sans-serif;
  font-weight: 500;
  padding: 25px 15px 0 0;
  width: 330px; }
  .form .form_box dt.flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start; }
  .form .form_box dt span {
    width: 50px;
    height: 30px;
    font: 14px/28px "M PLUS 1", sans-serif;
    font-weight: 500;
    letter-spacing: 0.05em;
    display: block;
    background-color: #FF4943;
    text-align: center;
    color: #fff; }
  .form .form_box dt small {
    padding: 10px 0;
    font: 16px/1em "M PLUS 1", sans-serif;
    font-weight: 400;
    display: block; }
.form .form_box dd {
  font: 16px/28px "M PLUS 1", sans-serif;
  font-weight: 400;
  padding: 15px 0;
  width: calc(100% - 330px); }

/*max-width:1280px*/
@media (max-width: 1024px) {
  .form .box {
    width: calc(100% - 80px); }
  .form h2 {
    font: 30px/1.6em "M PLUS 1", sans-serif;
    font-weight: 700;
    padding: 10px 50px;
    border-radius: 25px;
    text-align: center; }
    .form h2 br {
      display: block; }
  .form .phone {
    max-width: 1100px;
    margin: 0 auto 80px;
    border-bottom: 1px solid #8E8B8B;
    padding: 0 0 80px; }
    .form .phone dl {
      text-align: center; }
    .form .phone dt {
      font: 35px/1em "M PLUS 1", sans-serif;
      font-weight: 700;
      margin: 0 0 30px; }
    .form .phone dd {
      display: block; }
      .form .phone dd a {
        margin: 0 auto; }
        .form .phone dd a small {
          font: 18px/1em "M PLUS 1", sans-serif;
          font-weight: 500; }
  .form .mail {
    max-width: 1120px;
    margin: 0 auto; }
    .form .mail p {
      text-align: justify;
      text-justify: inter-ideograph;
      font: 20px/2.4em "M PLUS 1", sans-serif;
      font-weight: 400;
      margin: 0 auto 100px;
      max-width: 632px; }
      .form .mail p br {
        display: none; }
      .form .mail p span {
        display: block; }
  .form .form_box dl {
    margin: 0 auto 20px;
    display: block; }
  .form .form_box dt {
    padding: 15px 0;
    font: 19px/28px "M PLUS 1", sans-serif;
    font-weight: 500;
    padding: 0 15px 0 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center; }
    .form .form_box dt span {
      margin: 0 0 0 auto; }
    .form .form_box dt small {
      padding: 0 0 0 10px; }
  .form .form_box dd {
    font: 16px/28px "M PLUS 1", sans-serif;
    font-weight: 400;
    width: 100%;
    padding: 15px 0 45px !important; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .form .box {
    padding: 80px 30px 60px;
    width: calc(100% - 60px); }
  .form h2 {
    font: 23px/1.6em "M PLUS 1", sans-serif;
    font-weight: 700;
    padding: 15px 00px;
    border-radius: 25px;
    text-align: center;
    width: 100%;
    max-width: 375px; }
  .form .phone {
    max-width: 1100px;
    margin: 0 auto 80px;
    border-bottom: 1px solid #8E8B8B;
    padding: 0 0 80px; }
    .form .phone dl {
      text-align: center; }
    .form .phone dt {
      font: 30px/1em "M PLUS 1", sans-serif;
      font-weight: 700;
      margin: 0 0 15px; }
    .form .phone dd {
      display: block; }
      .form .phone dd a {
        font: 38px / 1em "M PLUS 1", sans-serif;
        font-weight: 700;
        padding: 0 0 0 30px;
        background: url(img/icon_tel.svg) left top 8px no-repeat;
        background-size: 20px auto; }
      .form .phone dd span {
        display: block;
        padding: 10px 0 0;
        font: 18px / 1em "M PLUS 1", sans-serif;
        font-weight: 500;
        letter-spacing: 0.05em; }
  .form .mail p {
    font: 18px/2.4em "M PLUS 1", sans-serif;
    font-weight: 400;
    margin: 0 auto 100px; }
  .form .form_box dl {
    margin: 0 auto 20px;
    display: block; }
  .form .form_box dt {
    font: 18px/28px "M PLUS 1", sans-serif;
    font-weight: 500; }
    .form .form_box dt span {
      margin: 0 0 0 auto; }
    .form .form_box dt small {
      display: block;
      width: calc(100% - 50px);
      padding: 0; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .form .box {
    padding: 80px 20px 30px;
    width: calc(100% - 20px); }
  .form h2 {
    font: 19px/1.6em "M PLUS 1", sans-serif;
    font-weight: 700;
    padding: 13px 00px;
    margin: 0 auto 35px; }
  .form .phone {
    margin: 0 auto 50px;
    padding: 0 0 50px; }
    .form .phone dt {
      font: 25px/1em "M PLUS 1", sans-serif;
      font-weight: 700;
      margin: 0 0 15px; }
    .form .phone dd {
      display: block; }
      .form .phone dd a {
        font: 30px / 1em "M PLUS 1", sans-serif;
        font-weight: 700;
        padding: 0 0 3px 25px;
        background: url(img/icon_tel.svg) left top 6px no-repeat;
        background-size: 18px auto; }
      .form .phone dd span {
        display: block;
        padding: 10px 0 0;
        font: 16px / 1em "M PLUS 1", sans-serif;
        font-weight: 500;
        letter-spacing: 0.05em; }
  .form .mail p {
    font: 16px/2.4em "M PLUS 1", sans-serif;
    font-weight: 400;
    margin: 0 auto 50px; }
  .form .form_box dl {
    margin: 0 auto 20px;
    display: block; }
  .form .form_box dt {
    font: 17px/28px "M PLUS 1", sans-serif;
    font-weight: 500; }
    .form .form_box dt span {
      margin: 0 0 0 auto; }
    .form .form_box dt small {
      font: 14px/28px "M PLUS 1", sans-serif;
      display: block;
      width: calc(100% - 50px);
      padding: 0; } }
/*max-width:480px*/
/*********************************************/
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  /* 行間と列間の余白調整 */ }
  .radio-group .radio-label {
    display: flex;
    align-items: center;
    font-size: 16px;
    cursor: pointer;
    position: relative;
    width: calc(50% - 12px);
    /* 2列に分ける（列間のgapを差し引く） */
    box-sizing: border-box; }
    .radio-group .radio-label:nth-of-type(1) {
      order: 1; }
    .radio-group .radio-label:nth-of-type(2) {
      order: 2; }
    .radio-group .radio-label:nth-of-type(3) {
      order: 5; }
    .radio-group .radio-label:nth-of-type(4) {
      order: 3; }
    .radio-group .radio-label:nth-of-type(5) {
      order: 4; }

.radio-label input[type="radio"] {
  display: none; }

.custom-radio {
  font: 16px/1.8em "M PLUS 1", sans-serif;
  width: 20px;
  height: 20px;
  border: 2px solid #666;
  border-radius: 50%;
  margin-right: 8px;
  position: relative; }

.radio-label input[type="radio"]:checked + .custom-radio::after {
  content: '';
  width: 12px;
  height: 12px;
  background-color: #35D3ED;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

input[type="text"],
input[type="email"] {
  width: 100%;
  padding: 15px;
  background-color: #F5F7F9;
  border: 1px solid #ccc;
  border-radius: 4px;
  font: 16px/1.8em "M PLUS 1", sans-serif;
  box-sizing: border-box;
  transition: border-color 0.3s, box-shadow 0.3s; }

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  outline: none;
  border-color: #35D3ED;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2); }

textarea {
  width: 100%;
  padding: 15px;
  height: 250px;
  background-color: #F5F7F9;
  border: 1px solid #ccc;
  border-radius: 4px;
  font: 16px/1.8em "M PLUS 1", sans-serif;
  box-sizing: border-box;
  transition: border-color 0.3s, box-shadow 0.3s; }

input[type="submit"],
input[type="button"] {
  font: 25px/1.8em "M PLUS 1", sans-serif;
  font-weight: 500;
  background-color: #FF4943;
  display: block;
  margin: 0 auto;
  color: #fff;
  border-radius: 50px;
  width: 340px;
  letter-spacing: 0.1em;
  height: 100px;
  border: 2px solid #000;
  border-bottom: 4px solid #000;
  transition: .36s; }

input[type="submit"]:hover,
input[type="button"]:hover {
  cursor: pointer;
  background-color: #FCDCDB;
  color: #000; }

/*max-width:1280px*/
/*max-width:1024px*/
@media (max-width: 768px) {
  input[type="submit"] {
    font: 22px/1.8em "M PLUS 1", sans-serif;
    font-weight: 500;
    width: 280px;
    height: 80px; } }
/*max-width:768px*/
@media (max-width: 480px) {
  input[type="submit"] {
    font: 18px/1.8em "M PLUS 1", sans-serif;
    font-weight: 500;
    width: 200px;
    height: 60px; }

  .radio-group {
    display: block;
    flex-wrap: wrap;
    gap: 12px 24px;
    /* 行間と列間の余白調整 */ }
    .radio-group .radio-label {
      display: flex;
      align-items: center;
      font-size: 16px;
      cursor: pointer;
      position: relative;
      width: 100%;
      /* 2列に分ける（列間のgapを差し引く） */
      box-sizing: border-box;
      margin-bottom: 15px; } }
/*max-width:480px*/