header {
  position: fixed;
  z-index: 8888;
  width: 100%;
  left: 0;
  top: 0; }

.header_all {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%; }
  .header_all .logo {
    height: 88px;
    text-align: left;
    max-width: 412px;
    width: 100%;
    display: block;
    padding: 24px 0 2px 220px;
    text-decoration: none;
    background: url("../images/common/logo.svg") left 30px top 23px no-repeat;
    background-size: 170px auto;
    font: 2.1rem/1em "Inter", sans-serif;
    font-weight: 200;
    letter-spacing: 0.05em; }
    .header_all .logo span {
      font: 1.5rem/1em dnp-shuei-gothic-kin-std, sans-serif;
      font-weight: 500;
      display: block;
      letter-spacing: 0.02em;
      margin: 0 0 5px; }
  .header_all .header_link {
    width: calc(100% - 412px);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center; }
    .header_all .header_link a {
      display: block;
      margin: 0 10px 0 0;
      font: 1.4rem/1em "Noto Sans JP", sans-serif;
      font-weight: 400;
      letter-spacing: 0.03em;
      border: 1px solid #868786;
      text-decoration: none;
      padding: 7px 10px 8px; }
      .header_all .header_link a img {
        display: none; }
      .header_all .header_link a p span, .header_all .header_link a p small {
        display: none; }
      .header_all .header_link a .more {
        display: none; }

@media (hover: hover) {
  .header_all .logo:hover {
    opacity: 0.5; }
  .header_all .header_link a:hover {
    background-color: #fff; } }
@media (max-width: 1024px) {
  .header_all {
    padding: 0 10px 0 0;
    justify-content: space-between;
    align-items: flex-end; }
    .header_all.active {
      background-color: #DAFD21; }
    .header_all .header_link {
      transform: scale3d(0, 1, 0);
      transform-origin: center center;
      display: block;
      position: absolute;
      top: 80px;
      left: 0;
      padding: 15px 40px 15%;
      background-color: #DAFD21;
      width: 100%;
      height: 100vh;
      overflow: scroll;
      scrollbar-width: none; }
      .header_all .header_link.active {
        pointer-events: none;
        transition: transform .25s ease-out, opacity .25s ease-out;
        transform: scale3d(1, 1, 1);
        pointer-events: auto; }
      .header_all .header_link a {
        box-shadow: 0 6px 7px rgba(0, 0, 0, 0.2);
        max-width: 420px;
        width: 100%;
        margin: 0 auto 25px;
        padding: 0;
        border: none;
        background-color: #fff; }
        .header_all .header_link a > div {
          min-height: 150px;
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          justify-content: flex-start;
          align-items: flex-start; }
        .header_all .header_link a img {
          display: block;
          width: 100%; }
        .header_all .header_link a p {
          width: 100%;
          font: 1.8rem/1em "Noto Sans JP", sans-serif;
          font-weight: 500;
          flex: 1;
          padding: 25px 0;
          letter-spacing: 0.1em;
          display: flex;
          flex-direction: column;
          justify-content: center;
          text-align: center;
          margin: 0; }
          .header_all .header_link a p small {
            padding: 0 0 10px;
            margin: 0 0 10px;
            position: relative;
            letter-spacing: 0.05em;
            font: 1.4rem/1em "Noto Sans JP", sans-serif;
            font-weight: 500;
            display: block; }
            .header_all .header_link a p small:before {
              display: block;
              position: absolute;
              content: "";
              width: 70px;
              height: 1px;
              background-color: #BCC0C1;
              top: auto;
              bottom: -2px;
              left: 50%;
              transform: translate(-50%, 0%); }
        .header_all .header_link a .more {
          display: block;
          font: 1.3rem/1em dnp-shuei-gothic-kin-std, sans-serif;
          font-weight: 400;
          padding: 0 60px 0 0;
          margin: 0 auto 20px auto;
          width: fit-content;
          background: url("../images/common/footer_arrow.svg") right top 3px no-repeat;
          margin-top: auto; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .header_all .logo {
    max-width: 400px;
    padding: 24px 0 2px 190px;
    text-decoration: none;
    background: url("../images/common/logo.svg") left 20px top 23px no-repeat;
    background-size: 170px auto; }
  .header_all .header_link {
    transform: scale3d(0, 1, 0);
    padding: 15px 40px 50%; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .header_all {
    padding: 0 0 0 0;
    align-items: flex-start; }
    .header_all .logo {
      height: 65px;
      text-align: left;
      max-width: 305px;
      width: 100%;
      display: block;
      padding: 13px 0 2px 165px;
      text-decoration: none;
      background: url("../images/common/logo.svg") left 15px top 15px no-repeat;
      background-size: 135px auto;
      font: 1.8rem/1em "Inter", sans-serif;
      font-weight: 200;
      letter-spacing: 0.05em; }
      .header_all .logo span {
        font: 1.3rem/1em dnp-shuei-gothic-kin-std, sans-serif;
        font-weight: 500;
        display: block;
        letter-spacing: 0.02em;
        margin: 0 0 5px; }
    .header_all .header_link {
      transform: scale3d(0, 1, 0);
      padding: 15px 40px 80%;
      top: 60px; }
      .header_all .header_link a {
        max-width: 300px;
        width: 100%; }
        .header_all .header_link a > div {
          min-height: 120px; }
        .header_all .header_link a img {
          display: block;
          width: 100%; }
        .header_all .header_link a p {
          width: 100%;
          font: 1.5rem/1em "Noto Sans JP", sans-serif;
          font-weight: 500;
          flex: 1;
          padding: 20px 0 25px; }
          .header_all .header_link a p small {
            padding: 0 0 13px;
            margin: 0 0 13px;
            letter-spacing: 0.05em;
            font: 1.3rem/1em "Noto Sans JP", sans-serif;
            font-weight: 500; }
        .header_all .header_link a .more {
          font: 1.2rem/1em dnp-shuei-gothic-kin-std, sans-serif;
          font-weight: 400;
          padding: 0 65px 0 0;
          margin: 0 auto 20px auto;
          background: url("../images/common/footer_arrow.svg") right top 3px no-repeat;
          background-size: 40px auto;
          margin-top: auto; } }
/*max-width:480px*/
/***********************/
.toggle {
  display: none; }

/*min-width:1920px*/
/*max-width:1280px*/
@media (max-width: 1024px) {
  .toggle {
    display: block;
    position: relative;
    z-index: 777;
    width: 65px;
    height: 65px;
    position: relative;
    margin: 0 0 10px; }
    .toggle span {
      display: block;
      width: 60%;
      height: 1px;
      background-color: #000;
      position: absolute;
      transition: .3s; }
      .toggle span:nth-of-type(1) {
        top: 35%;
        left: 50%;
        transform: translate(-50%, -50%); }
      .toggle span:nth-of-type(2) {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); }
      .toggle span:nth-of-type(3) {
        top: 65%;
        left: 50%;
        transform: translate(-50%, -50%); }
    .toggle.active span:nth-of-type(1) {
      top: 50%;
      transform: translate(-50%, -50%) rotate(-150deg); }
    .toggle.active span:nth-of-type(2) {
      opacity: 0;
      transform: translate(-50%, -50%) rotate(-135deg); }
    .toggle.active span:nth-of-type(3) {
      top: 50%;
      transform: translate(-50%, -50%) rotate(150deg); } }
/*max-width:1024px*/
@media (max-width: 480px) {
  .toggle {
    width: 60px;
    height: 60px;
    margin: 0; }
    .toggle span {
      display: block;
      width: 53%;
      height: 1px; } }
/*max-width:480px*/
/*****************************************/
.page_top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  writing-mode: vertical-rl;
  font: 1.5rem/1em "Inter", sans-serif;
  font-weight: 400;
  letter-spacing: 0.05em;
  z-index: -9999;
  opacity: 0;
  pointer-events: none;
  transition: .3s; }
  .page_top.active {
    z-index: 777;
    opacity: 1;
    pointer-events: all; }
  .page_top span {
    position: relative;
    padding: 28px 0 0;
    display: block; }
    .page_top span:hover {
      cursor: pointer; }
      .page_top span:hover:before {
        top: -5px; }
    .page_top span:before {
      position: absolute;
      content: "";
      width: 38px;
      height: 5px;
      transform: rotate(-90deg);
      display: block;
      background: url("../images/index/arrow_black.svg") center center no-repeat;
      background-size: contain;
      left: -13px;
      top: 0; }

/*min-width:1920px*/
/*max-width:1280px*/
/*max-width:1024px*/
@media (max-width: 768px) {
  .page_top {
    position: fixed;
    bottom: 10px;
    right: 10px; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .page_top {
    writing-mode: vertical-rl;
    font: 1.3rem/1em "Inter", sans-serif;
    font-weight: 400;
    letter-spacing: 0.05em; }
    .page_top span {
      position: relative;
      padding: 28px 0 0;
      display: block; }
      .page_top span:hover {
        cursor: pointer; }
        .page_top span:hover:before {
          top: -5px; }
      .page_top span:before {
        position: absolute;
        content: "";
        width: 30px;
        height: 4px;
        left: -9px;
        top: 0; } }
/*max-width:480px*/
/*****************************************/
footer {
  position: relative;
  z-index: 5;
  background-color: #DAFD21;
  padding: 0;
  overflow: hidden; }

.footer_all {
  max-width: 1920px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-end; }
  .footer_all .footer_flex {
    flex: 1;
    padding: 0 60px 40px 55px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch; }
    .footer_all .footer_flex .footer_container {
      box-shadow: 0 6px 7px rgba(0, 0, 0, 0.2);
      width: calc((100% - 30px)/3);
      max-width: 300px;
      margin: 0 15px 0 0;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      text-decoration: none;
      position: relative;
      top: 0; }
      .footer_all .footer_flex .footer_container:nth-of-type(3n) {
        margin-right: 0; }
      .footer_all .footer_flex .footer_container > img {
        width: 100%;
        height: auto;
        display: block; }
      .footer_all .footer_flex .footer_container > div {
        flex: 1;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 0 20px 0; }
      .footer_all .footer_flex .footer_container p {
        width: 100%;
        font: 1.8rem/1em "Noto Sans JP", sans-serif;
        font-weight: 500;
        flex: 1;
        padding: 25px 0;
        letter-spacing: 0.1em;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        margin: 0; }
        .footer_all .footer_flex .footer_container p small {
          padding: 0 0 10px;
          margin: 0 0 10px;
          position: relative;
          letter-spacing: 0.05em;
          font: 1.4rem/1em "Noto Sans JP", sans-serif;
          font-weight: 500;
          display: block; }
          .footer_all .footer_flex .footer_container p small:before {
            display: block;
            position: absolute;
            content: "";
            width: 70px;
            height: 1px;
            background-color: #BCC0C1;
            top: auto;
            bottom: -2px;
            left: 50%;
            transform: translate(-50%, 0%); }
      .footer_all .footer_flex .footer_container .more {
        display: block;
        font: 1.3rem/1em dnp-shuei-gothic-kin-std, sans-serif;
        font-weight: 400;
        padding: 0 60px 0 0;
        margin: 0 auto 20px auto;
        width: fit-content;
        background: url("../images/common/footer_arrow.svg") right top 3px no-repeat;
        margin-top: auto; }
    .footer_all .footer_flex span {
      padding: 50px 0 0;
      width: 100%;
      font: 1.4rem/1em dnp-shuei-gothic-kin-std, sans-serif;
      font-weight: 500;
      letter-spacing: 0.05em; }
  .footer_all .txt {
    aspect-ratio: 114/450;
    flex: 0 0 6.5%;
    max-width: 114px;
    height: auto;
    background: url("../images/common/footer_txt.svg") center center no-repeat;
    background-size: contain;
    margin-left: auto;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    margin-bottom: 60px; }
  .footer_all .copy {
    aspect-ratio: 437/910;
    flex: 0 0 19.5%;
    max-width: 437px;
    height: auto;
    background: url("../images/index/mv_right.svg") center center no-repeat;
    background-size: contain;
    margin-left: 16px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap; }

@media (hover: hover) {
  .footer_all .footer_flex .footer_container:hover {
    top: -10px; } }
@media (max-width: 1280px) {
  .footer_all .footer_flex {
    padding: 0 40px 30px 40px; }
    .footer_all .footer_flex .footer_container > div {
      padding: 0; }
    .footer_all .footer_flex .footer_container p {
      font: 1.4rem/1em "Noto Sans JP", sans-serif;
      font-weight: 500;
      padding: 20px 0; }
      .footer_all .footer_flex .footer_container p small {
        font: 1.2rem/1em "Noto Sans JP", sans-serif;
        font-weight: 500; }
    .footer_all .footer_flex .footer_container .more {
      font: 1rem/1em dnp-shuei-gothic-kin-std, sans-serif;
      font-weight: 400;
      padding: 0 50px 0 0;
      margin: 0 auto 15px;
      background: url("../images/common/footer_arrow.svg") right top 1px no-repeat;
      background-size: 40px auto; }
    .footer_all .footer_flex span {
      padding: 40px 0 0;
      font: 1.4rem/1em dnp-shuei-gothic-kin-std, sans-serif;
      font-weight: 500;
      letter-spacing: 0.05em; }
  .footer_all .txt {
    flex: 0 0 7%; }
  .footer_all .copy {
    flex: 0 0 19%; } }
/*max-width:1280px*/
@media (max-width: 1024px) {
  .footer_all {
    align-items: flex-start;
    padding: 0 0 40px; }
    .footer_all .footer_flex {
      padding: 60px 6% 0 30px; }
      .footer_all .footer_flex .footer_container {
        width: calc((100% - 20px)/2);
        margin: 0 20px 20px 0;
        max-width: 240px; }
        .footer_all .footer_flex .footer_container:nth-of-type(2) {
          margin-right: 0; }
      .footer_all .footer_flex span {
        padding: 10px 0 0;
        font: 1.4rem/1em dnp-shuei-gothic-kin-std, sans-serif;
        font-weight: 500;
        letter-spacing: 0.05em; }
    .footer_all .txt {
      margin: auto 0 20px 0;
      flex: 0 0 11%; }
    .footer_all .copy {
      margin: 0 0 0 auto;
      flex: 0 0 25%; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .footer_all {
    justify-content: center;
    padding: 80px 40px 60px; }
    .footer_all .footer_flex {
      order: 3;
      width: 100%;
      padding: 85px 0 0;
      flex: none;
      display: block; }
      .footer_all .footer_flex .footer_container {
        width: 100%;
        margin: 0 auto 30px !important;
        max-width: 400px; }
        .footer_all .footer_flex .footer_container > div {
          flex: auto;
          min-height: 220px; }
        .footer_all .footer_flex .footer_container p {
          width: 100%;
          font: 2.1rem/1em "Noto Sans JP", sans-serif;
          font-weight: 500; }
          .footer_all .footer_flex .footer_container p small {
            padding: 0 0 20px;
            margin: 0 0 20px;
            letter-spacing: 0.05em;
            font: 1.7rem/1em "Noto Sans JP", sans-serif;
            font-weight: 500; }
        .footer_all .footer_flex .footer_container .more {
          display: block;
          font: 1.6rem/1em dnp-shuei-gothic-kin-std, sans-serif;
          font-weight: 400;
          padding: 0 75px 0 0;
          margin: 0 auto 35px auto;
          width: fit-content;
          background: url("../images/common/footer_arrow.svg") right top 5px no-repeat;
          background-size: 50px auto;
          margin-top: auto; }
      .footer_all .footer_flex span {
        padding: 20px 0 0;
        text-align: center;
        font: 1.4rem/1em dnp-shuei-gothic-kin-std, sans-serif;
        display: block;
        width: 100%;
        font-weight: 500;
        letter-spacing: 0.05em; }
    .footer_all .txt {
      width: calc(40% - 22px);
      max-width: 142px;
      margin: 0 22px 0 0;
      flex: none; }
    .footer_all .copy {
      width: 60%;
      max-width: 280px;
      order: 2;
      margin: 0;
      flex: none; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .footer_all {
    padding: 60px 25px 40px; }
    .footer_all .footer_flex {
      padding: 65px 0 0; }
      .footer_all .footer_flex .footer_container {
        max-width: 300px; }
        .footer_all .footer_flex .footer_container > div {
          min-height: 150px; }
        .footer_all .footer_flex .footer_container p {
          font: 1.5rem/1em "Noto Sans JP", sans-serif;
          font-weight: 500; }
          .footer_all .footer_flex .footer_container p small {
            padding: 0 0 13px;
            margin: 0 0 13px;
            letter-spacing: 0.05em;
            font: 1.3rem/1em "Noto Sans JP", sans-serif;
            font-weight: 500; }
        .footer_all .footer_flex .footer_container .more {
          font: 1.2rem/1em dnp-shuei-gothic-kin-std, sans-serif;
          font-weight: 400;
          padding: 0 65px 0 0;
          margin: 0 auto 20px auto;
          background: url("../images/common/footer_arrow.svg") right top 3px no-repeat;
          background-size: 40px auto;
          margin-top: auto; }
      .footer_all .footer_flex span {
        padding: 10px 0 0;
        font: 1.3rem/1em dnp-shuei-gothic-kin-std, sans-serif;
        font-weight: 500;
        letter-spacing: 0.05em; }
    .footer_all .txt {
      width: calc(41% - 15px);
      max-width: 100px;
      margin: 0 15px 0 0; }
    .footer_all .copy {
      width: 59%;
      max-width: 200px; } }
/*max-width:480px*/
