@charset "UTF-8";
/* Break point
---------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Jost&family=Noto+Sans+JP:wght@100..900&display=swap");
/* ==========================================================================//
//
//　変数
//
// ========================================================================== */
:root {
  /* Color
  ---------------------------------------------------------- */
  --color-font: #000000;
  --color-gray: #7B7B7B;
  --color-gray02:#BCBCBC;
  --color-main: #002A74;
  --color-sub: #0085A1;
  --color-back: #E7EAEB;
  --color-line01:#E8EDEF;
  --color-line02:#D9E1E3;
  --color-line03:#DCDCDC;
  --color-red: #EB0000;
  --color-highlight: #FFE600;
  /* Font
  ---------------------------------------------------------- */
  --font-jp: "Noto Sans JP", sans-serif;
  --font-en: "Jost", sans-serif;
  --font-m: 500;
  --font-b: 700;
  --font11: 0.7rem;
  --font12: 0.79rem;
  --font13: 0.81rem;
  --font14: 0.88rem;
  --font16: 1rem;
  --font17: 1.06rem;
  --font18: 1.12rem;
  --font19: 1.19rem;
  --font20: 1.25rem;
  --font22: 1.42rem;
  --font24: 1.5rem;
  --font25: 1.6rem;
  --font28: 1.8rem;
  --font30: 1.875rem;
  --font32: 2rem;
  --font35: 2.18rem;
  --font36: 2.28rem;
  --font40: 2.5rem;
  --font43: 2.68rem;
  --font44: 2.75rem;
  --font45: 2.81rem;
  --font46: 2.88rem;
  --font48: 3rem;
  --font60: 3.75rem;
  --font80: 5rem;
  /* Radius
  ---------------------------------------------------------- */
  --radius: 2px;
  /* letter-spacing
  ---------------------------------------------------------- */
  --ls20: 0.02em;
  /* hight
  ---------------------------------------------------------- */
  --headerH: 60px;
  /* shadow
  ---------------------------------------------------------- */
  --shadow: 0 0 10px rgba(0,0,0,0.1) ;
}
@media screen and (min-width: 960px) {
  :root {
    --headerH: 98px;
  }
}

/* Placeholder
---------------------------------------------------------- */
/* ==========================================================================//
//
//　KV
//
// ========================================================================== */
.p-top_sec_kv .catch_kv .catch_en, .p-top_sec_kv .catch_kv .catch_big, .p-top_sec_kv .catch_kv .catch_small {
  background: -webkit-gradient(linear, left top, right top, from(rgb(0, 0, 0)), color-stop(50%, rgb(0, 0, 0)), color-stop(61%, rgb(18, 86, 168)), color-stop(72%, rgb(61, 228, 255)), color-stop(77%, rgb(141, 239, 255)), color-stop(80%, rgb(255, 255, 255)), color-stop(83%, rgb(15, 178, 213)), to(rgb(0, 0, 0)));
  background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 50%, rgb(18, 86, 168) 61%, rgb(61, 228, 255) 72%, rgb(141, 239, 255) 77%, rgb(255, 255, 255) 80%, rgb(15, 178, 213) 83%, rgb(0, 0, 0) 100%);
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-transition: text-shadow 1s, color 0.5s;
  transition: text-shadow 1s, color 0.5s;
}

@-webkit-keyframes gradientAnim_big {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 27em 0;
  }
}

@keyframes gradientAnim_big {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 27em 0;
  }
}
@-webkit-keyframes gradientAnim_small {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 30em 0;
  }
}
@keyframes gradientAnim_small {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 30em 0;
  }
}
@-webkit-keyframes gradientAnim_en {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 70em 0;
  }
}
@keyframes gradientAnim_en {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 70em 0;
  }
}
.p-top_sec_kv {
  --kvW: 36%;
  position: relative;
}
@media screen and (min-width: 768px) {
  .p-top_sec_kv {
    display: grid;
    grid-template-columns: var(--kvW) var(--kvW);
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
.p-top_sec_kv .catch_kv {
  --shadow: 0 0 15px #fff;
  text-align: center;
  margin: 1.5rem 0;
}
@media screen and (min-width: 768px) {
  .p-top_sec_kv .catch_kv {
    position: absolute;
    top: 15vw;
    width: 100%;
    z-index: 1;
  }
}
.p-top_sec_kv .catch_kv .catch_small {
  font-size: clamp(1.5rem, 1.29rem + 1.05vw, 4rem);
  font-weight: var(--font-b);
  letter-spacing: 0.25em;
  background-size: 30em;
}
@media screen and (min-width: 768px) {
  .p-top_sec_kv .catch_kv .catch_small {
    letter-spacing: 0.36em;
  }
}
.p-top_sec_kv .catch_kv .catch_big {
  font-size: clamp(2.8rem, 2.19rem + 3.05vw, 6rem);
  font-weight: var(--font-b);
  display: block;
  letter-spacing: 0.2em;
  background-size: 27em 100%;
}
.p-top_sec_kv .catch_kv .catch_en {
  font-size: clamp(0.938rem, 0.788rem + 0.75vw, 1.688rem);
  letter-spacing: 0.2em;
  margin-top: 1rem;
  background-size: 70em;
}
.p-top_sec_kv .catch_kv.animation .catch_small {
  -webkit-animation: gradientAnim_small 2s cubic-bezier(0.87, 0, 0.13, 1) forwards;
          animation: gradientAnim_small 2s cubic-bezier(0.87, 0, 0.13, 1) forwards;
}
.p-top_sec_kv .catch_kv.animation .catch_big {
  -webkit-animation: gradientAnim_big 2s cubic-bezier(0.87, 0, 0.13, 1) forwards;
          animation: gradientAnim_big 2s cubic-bezier(0.87, 0, 0.13, 1) forwards;
}
.p-top_sec_kv .catch_kv.animation .catch_en {
  -webkit-animation: gradientAnim_en 2s cubic-bezier(0.87, 0, 0.13, 1) forwards;
          animation: gradientAnim_en 2s cubic-bezier(0.87, 0, 0.13, 1) forwards;
}
.p-top_sec_kv .catch_kv.animationEnd .catch_small,
.p-top_sec_kv .catch_kv.animationEnd .catch_big,
.p-top_sec_kv .catch_kv.animationEnd .catch_en {
  text-shadow: var(--shadow);
  color: var(--color-font);
}
.p-top_sec_kv .kv_slider {
  min-width: 190px;
  width: var(--kvW);
}
@media screen and (min-width: 768px) {
  .p-top_sec_kv .kv_slider {
    width: 100%;
  }
}
.p-top_sec_kv .kv_slider .splide__slide::before {
  content: "";
  display: block;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
  background: linear-gradient(315deg, rgba(0, 83, 155, 0.9) 0%, rgba(0, 63, 155, 0.9) 100%);
  position: absolute;
  top: 0;
  left: 0;
}
.p-top_sec_kv .kv_slider.slider_02 {
  margin: 0 0 0 auto;
}
@media screen and (min-width: 768px) {
  .p-top_sec_kv .kv_slider.slider_02 {
    padding-top: 15vw;
  }
}
.p-top_sec_kv .kv_slider img {
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
  -webkit-transition: -webkit-clip-path 0.5s cubic-bezier(0.65, 0.05, 0.36, 1), -webkit-transform 8s;
  transition: -webkit-clip-path 0.5s cubic-bezier(0.65, 0.05, 0.36, 1), -webkit-transform 8s;
  transition: clip-path 0.5s cubic-bezier(0.65, 0.05, 0.36, 1), transform 8s;
  transition: clip-path 0.5s cubic-bezier(0.65, 0.05, 0.36, 1), transform 8s, -webkit-clip-path 0.5s cubic-bezier(0.65, 0.05, 0.36, 1), -webkit-transform 8s;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.p-top_sec_kv .kv_slider .is-active img {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.p-top_sec_kv .video_kv {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -1;
  -webkit-filter: drop-shadow(0px 0px rgba(0, 0, 0, 0));
          filter: drop-shadow(0px 0px rgba(0, 0, 0, 0));
  outline: none;
  border: none;
}

/* ==========================================================================//
//
//　News
//
// ========================================================================== */
.p-top_sec_news {
  padding: 5rem 0 8rem 0;
}
@media screen and (min-width: 768px) {
  .p-top_sec_news {
    padding-bottom: 11rem;
  }
}
@media screen and (min-width: 768px) {
  .p-top_sec_news .block_newsSec {
    display: grid;
    grid-template-columns: 38% 1fr;
    gap: 0 5rem;
  }
}
.p-top_sec_news .ttl_newsSec {
  font-size: var(--font35);
  letter-spacing: 0.05em;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media screen and (min-width: 768px) {
  .p-top_sec_news .ttl_newsSec {
    font-size: var(--font40);
  }
}
.p-top_sec_news .block_topics {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
}
.p-top_sec_news .block_topics .l-item_news {
  border-bottom: none;
}
.p-top_sec_news .block_news {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  margin-top: 4rem;
}
@media screen and (min-width: 768px) {
  .p-top_sec_news .block_news {
    margin-top: 9rem;
  }
}
.p-top_sec_news .btn_news {
  margin: 3rem 0 0 4.2rem;
}

/* ==========================================================================//
//
//　メニュー
//
// ========================================================================== */
@-webkit-keyframes movingImage {
  0% {
    object-position: right;
  }
  45% {
    object-position: left;
  }
  55% {
    object-position: left;
  }
  100% {
    object-position: right;
  }
}
@keyframes movingImage {
  0% {
    -o-object-position: right;
       object-position: right;
  }
  45% {
    -o-object-position: left;
       object-position: left;
  }
  55% {
    -o-object-position: left;
       object-position: left;
  }
  100% {
    -o-object-position: right;
       object-position: right;
  }
}
.p-top_sec_menu .image_menuHeader {
  height: 380px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
@media screen and (min-width: 768px) {
  .p-top_sec_menu .image_menuHeader {
    height: 620px;
  }
}
.p-top_sec_menu .image_menuHeader .image_back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: right;
     object-position: right;
  -webkit-animation: movingImage 100s linear infinite;
          animation: movingImage 100s linear infinite;
}
@media screen and (min-width: 768px) {
  .p-top_sec_menu .image_menuHeader .image_back {
    -o-object-position: center;
       object-position: center;
    -webkit-animation: none;
            animation: none;
  }
}
.p-top_sec_menu .image_menuHeader .catch_menuHeader {
  color: #fff;
  padding: 0 20px 2rem 20px;
}
@media screen and (min-width: 768px) {
  .p-top_sec_menu .image_menuHeader .catch_menuHeader {
    padding: 0 70px 4rem 70px;
  }
}
.p-top_sec_menu .image_menuHeader .catch_header_main {
  font-size: var(--font14);
  font-weight: var(--font-b);
  letter-spacing: 0.04em;
  margin-top: 1em;
}
@media screen and (min-width: 768px) {
  .p-top_sec_menu .image_menuHeader .catch_header_main {
    font-size: var(--font20);
  }
}
.p-top_sec_menu .image_menuHeader .catch_header_sub {
  font-size: var(--font35);
  letter-spacing: var(--ls20);
  line-height: 1.4;
}
@media screen and (min-width: 768px) {
  .p-top_sec_menu .image_menuHeader .catch_header_sub {
    font-size: var(--font60);
  }
}
.p-top_sec_menu .block_menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 1rem;
}
@media screen and (min-width: 960px) {
  .p-top_sec_menu .block_menu a:hover {
    color: var(--color-sub);
  }
  .p-top_sec_menu .block_menu a:focus {
    color: var(--color-sub);
  }
}
.p-top_sec_menu .name_menu {
  text-align: center;
  margin-top: 1rem;
}
@media screen and (min-width: 768px) {
  .p-top_sec_menu .name_menu {
    font-size: var(--font20);
  }
}
@media screen and (min-width: 768px) {
  .p-top_sec_menu.about .block_menu {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (min-width: 768px) {
  .p-top_sec_menu.product .block_menu {
    grid-template-columns: repeat(3, 1fr);
  }
}
.p-top_sec_menu.product .block_menu .item_menu:first-child {
  grid-column: 1/-1;
}
@media screen and (min-width: 768px) {
  .p-top_sec_menu.product .block_menu .item_menu:first-child {
    grid-column: 1;
  }
}

/* ==========================================================================//
//
//　TOPのモノづくり
//
// ========================================================================== */
.p-top_sec_manufacturing {
  padding-top: 6rem;
}
@media screen and (min-width: 768px) {
  .p-top_sec_manufacturing {
    padding-top: 9rem;
  }
}
.p-top_sec_manufacturing .ttl_sub {
  font-size: var(--font14);
  font-weight: var(--font-b);
  letter-spacing: 0.04em;
  margin-top: 0.5em;
}
@media screen and (min-width: 768px) {
  .p-top_sec_manufacturing .ttl_sub {
    font-size: var(--font20);
  }
}
.p-top_sec_manufacturing .block_manufacturing {
  position: relative;
  padding-bottom: 4rem;
}
@media screen and (min-width: 768px) {
  .p-top_sec_manufacturing .block_manufacturing {
    padding-bottom: 12rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    -webkit-column-gap: 3rem;
       -moz-column-gap: 3rem;
            column-gap: 3rem;
  }
}
.p-top_sec_manufacturing .block_ttl .video_motor {
  -webkit-filter: drop-shadow(0px 0px rgba(0, 0, 0, 0)) !important;
          filter: drop-shadow(0px 0px rgba(0, 0, 0, 0)) !important;
  outline: none !important;
  border: none !important;
}
@media screen and (min-width: 768px) {
  .p-top_sec_manufacturing .block_ttl .video_motor {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    width: 60vw;
    max-width: none;
  }
}
.p-top_sec_manufacturing .list_manufacturing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}
.p-top_sec_manufacturing .list_manufacturing .item_manufacturing {
  aspect-ratio: 1/1;
  color: #fff;
}
.p-top_sec_manufacturing .list_manufacturing .item_manufacturing > a {
  --backGradient: linear-gradient(315deg, rgba(0,18,54,0.7) 0%, rgba(0,40,101,0.7) 100%);
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 5px;
}
@media screen and (min-width: 960px) {
  .p-top_sec_manufacturing .list_manufacturing .item_manufacturing > a:hover {
    --backGradient: linear-gradient(315deg, rgba(0,83,155,0.9) 0%, rgba(0,63,155,0.9) 100%);
  }
  .p-top_sec_manufacturing .list_manufacturing .item_manufacturing > a:focus {
    --backGradient: linear-gradient(315deg, rgba(0,83,155,0.9) 0%, rgba(0,63,155,0.9) 100%);
  }
}
.p-top_sec_manufacturing .list_manufacturing .item_manufacturing .num {
  font-size: clamp(2.813rem, 2.396rem + 2.08vw, 5rem);
}
.p-top_sec_manufacturing .list_manufacturing .item_manufacturing .title {
  font-size: clamp(0.875rem, 0.804rem + 0.36vw, 1.25rem);
  letter-spacing: var(--ls20);
}
.p-top_sec_manufacturing .list_manufacturing .item_manufacturing:first-of-type a {
  background: var(--backGradient), url(/images/img_manufacturing_01.jpg);
  background-size: cover;
}
.p-top_sec_manufacturing .list_manufacturing .item_manufacturing:nth-of-type(2) a {
  background: var(--backGradient), url(/images/img_manufacturing_02.jpg);
  background-size: cover;
}
.p-top_sec_manufacturing .list_manufacturing .item_manufacturing:nth-of-type(3) a {
  background: var(--backGradient), url(/images/img_manufacturing_03.jpg);
  background-size: cover;
}
.p-top_sec_manufacturing .list_manufacturing .item_manufacturing:nth-of-type(3) {
  grid-column: 1/-1;
  aspect-ratio: 2/1;
}

/* ==========================================================================//
//
//　Recruit
//
// ========================================================================== */
@-webkit-keyframes loop {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@keyframes loop {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@-webkit-keyframes loop2 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-200%);
            transform: translateX(-200%);
  }
}
@keyframes loop2 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-200%);
            transform: translateX(-200%);
  }
}
.p-top_sec_recruit {
  padding: 10rem 0 8rem;
}
.p-top_sec_recruit .text_scroll {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  overflow: hidden;
  position: relative;
  top: 5vw;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .p-top_sec_recruit .text_scroll {
    top: 2em;
  }
}
.p-top_sec_recruit .text_scroll img {
  min-width: 250vw;
  width: 100%;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  padding: 0 1rem;
}
@media screen and (min-width: 768px) {
  .p-top_sec_recruit .text_scroll img {
    min-width: auto;
    width: 150vw;
    max-width: 1600px;
  }
}
.p-top_sec_recruit .text_scroll img:first-of-type {
  -webkit-animation: loop 20s -10s linear infinite;
          animation: loop 20s -10s linear infinite;
}
.p-top_sec_recruit .text_scroll img:nth-of-type(2) {
  -webkit-animation: loop2 20s linear infinite;
          animation: loop2 20s linear infinite;
}
.p-top_sec_recruit .image_recruit {
  display: grid;
}
@media screen and (min-width: 768px) {
  .p-top_sec_recruit .image_recruit {
    grid-template-columns: 1fr 1fr;
  }
}
.p-top_sec_recruit .catch_recruit {
  width: 65%;
  margin: 2rem auto;
  display: grid;
  gap: 1rem 0;
}
@media screen and (min-width: 768px) {
  .p-top_sec_recruit .catch_recruit {
    grid-template-columns: 23% 35% 1fr;
    gap: 0 1.2rem;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.p-top_sec_recruit .catch_recruit .catch_03 {
  display: grid;
  grid-template-columns: 1fr 8%;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 0 0.5rem;
}
.p-top_sec_recruit a.link_recruit::after {
  width: 10px;
  height: 10px;
  margin-left: 4px;
}

/* ==========================================================================//
//
//　Loading
//
// ========================================================================== */
@-webkit-keyframes clipPath {
  0% {
    -webkit-clip-path: ellipse(2% 3% at calc(50vw - 118px) 50%);
            clip-path: ellipse(2% 3% at calc(50vw - 118px) 50%);
  }
  100% {
    -webkit-clip-path: ellipse(100% 100% at 50% 50%);
            clip-path: ellipse(100% 100% at 50% 50%);
  }
}
@keyframes clipPath {
  0% {
    -webkit-clip-path: ellipse(2% 3% at calc(50vw - 118px) 50%);
            clip-path: ellipse(2% 3% at calc(50vw - 118px) 50%);
  }
  100% {
    -webkit-clip-path: ellipse(100% 100% at 50% 50%);
            clip-path: ellipse(100% 100% at 50% 50%);
  }
}
.p-top_loadingBody {
  height: 100vh;
  overflow: hidden;
  -webkit-clip-path: ellipse(0 0 at calc(50vw - 131px) 49%);
          clip-path: ellipse(0 0 at calc(50vw - 131px) 49%);
}
.p-top_loadingBody.loaded {
  -webkit-animation: clipPath 0.8s cubic-bezier(0.83, 0, 0.17, 1) 0s 1 forwards;
          animation: clipPath 0.8s cubic-bezier(0.83, 0, 0.17, 1) 0s 1 forwards;
  overflow: initial;
}

.p-top_loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 1000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.p-top_loading .logo_loading {
  max-width: 300px;
}
@media screen and (min-width: 768px) {
  .p-top_loading .logo_loading {
    max-width: 450px;
  }
}

/* ==========================================================================//
//
//　Modal
//
// ========================================================================== */
.p-top-modal__bg {
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
.p-top-modal__box {
  width: calc(100% - 20px);
  background: #EDF2F6;
  padding: 40px;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 9999;
}
@media screen and (min-width: 768px) {
  .p-top-modal__box {
    width: calc(100% - 80px);
    max-width: 720px;
  }
}
@media screen and (min-width: 960px) {
  .p-top-modal__box {
    max-width: 850px;
    width: 100%;
    padding: 70px 70px;
  }
}
.p-top-modal__box .-ttl {
  font-size: var(--font18);
  font-weight: var(--font-b);
}
@media screen and (min-width: 768px) {
  .p-top-modal__box .-ttl {
    font-size: var(--font25);
  }
}
@media screen and (min-width: 960px) {
  .p-top-modal__box .-ttl {
    font-size: var(--font40);
  }
}
.p-top-modal__box .-ttl span {
  display: block;
}
.p-top-modal__box .-ttl em {
  color: var(--color-main);
}
.p-top-modal__box > p {
  font-size: var(--font14);
  margin-top: 20px;
  font-weight: 400;
}
@media screen and (min-width: 768px) {
  .p-top-modal__box > p {
    font-size: var(--font16);
  }
}
@media screen and (min-width: 960px) {
  .p-top-modal__box > p {
    margin-top: 30px;
  }
}
.p-top-modal__box > p br {
  display: none;
}
@media screen and (min-width: 960px) {
  .p-top-modal__box > p br {
    display: block;
  }
}
.p-top-modal__box .-btn {
  margin-top: 20px;
}
@media screen and (min-width: 768px) {
  .p-top-modal__box .-btn {
    margin-top: 40px;
  }
}
@media screen and (min-width: 960px) {
  .p-top-modal__box .-btn {
    margin-top: 50px;
  }
}
.p-top-modal__box .-btn a {
  display: grid;
  grid-template-columns: auto auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  justify-items: center;
  padding: 15px 20px;
  background: var(--color-main);
  color: #fff;
  font-size: var(--font14);
  text-align: center;
  max-width: 430px;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .p-top-modal__box .-btn a {
    padding: 30px;
    gap: 20px;
    font-size: var(--font16);
  }
}
@media screen and (min-width: 960px) {
  .p-top-modal__box .-btn a {
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }
  .p-top-modal__box .-btn a:hover {
    background: #638CD4;
  }
}
.p-top-modal__box .-btn a p span {
  display: inline-block;
}
.p-top-modal__box .-btn a::after {
  background-image: url(/assets/images/icon_external_white.svg);
}
@media screen and (min-width: 960px) {
  .p-top-modal__box .-btn a:hover::after {
    background-image: url(/assets/images/icon_external_white.svg);
  }
}
.p-top-modal__close {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .p-top-modal__close {
    top: 30px;
    right: 30px;
  }
}
.p-top-modal__close::before, .p-top-modal__close::after {
  content: "";
  width: 2px;
  height: 25px;
  background: var(--color-main);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}
.p-top-modal__close::after {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}
@media screen and (min-width: 960px) {
  .p-top-modal__close:hover::before, .p-top-modal__close:hover::after {
    background: #638CD4;
  }
}
.p-top-modal__check {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 20px;
  font-size: var(--font12);
}
@media screen and (min-width: 768px) {
  .p-top-modal__check {
    margin-top: 30px;
    font-size: var(--font14);
  }
}
.p-top-modal__check input[type=checkbox] {
  display: none;
}
.p-top-modal__check input[type=checkbox] + label {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
}
.p-top-modal__check input[type=checkbox] + label:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 20px;
  height: 20px;
  background: #fff;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-box-shadow: inset 0 0 0 1px #B9C9E6;
          box-shadow: inset 0 0 0 1px #B9C9E6;
}
.p-top-modal__check input[type=checkbox]:checked + label::after {
  content: "";
  position: absolute;
  top: 30%;
  left: 11px;
  width: 9px;
  height: 5px;
  border-bottom: 2px solid var(--color-main);
  border-left: 2px solid var(--color-main);
  -webkit-transform: rotate(-45deg) translate(-50%, -50%);
          transform: rotate(-45deg) translate(-50%, -50%);
}
.p-top-modal__bg {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.p-top-modal__box {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate(-50%, calc(-50% + 50px));
          transform: translate(-50%, calc(-50% + 50px));
  -webkit-transition: all 0.3s 0.2s;
  transition: all 0.3s 0.2s;
}
.p-top-modal.-active .p-top-modal__bg {
  opacity: 1;
  visibility: visible;
}
.p-top-modal.-active .p-top-modal__box {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}