@charset "UTF-8";

/* ---- display------- */
.pc-block {
  display: block
}

.pc-inline {
  display: inline
}

.sp-block,
.sp-inline {
  display: none
}

@media screen and (max-width: 768px) {
  .pc-block {
    display: none
  }

  .sp-block {
    display: block
  }
}

@media screen and (max-width: 480px) {
  .pc-inline {
    display: none
  }

  .sp-inline {
    display: inline
  }
}

/* CSS Document */
::selection {
  background: #1abc9c;
  color: #ffffff;
}

* {
  margin: 0px;
  padding: 0px;
}

a {
  text-decoration: none;
  color: #333;
  transition: 0.3s;
}

a:hover {
  opacity: 0.7;
}

a:hover {
  opacity: 0.7;
}

p {
  line-height: 2;
}

html {
  font-size: 62.5%;
}

body {
  margin: 0;
  font-family: 'Zen Maru Gothic', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(1.5rem, 1.459rem + 0.18vw, 1.6rem);
  font-style: normal;
  position: relative;
  background: #fff;
  color: #333333;
  min-height: 0;
}

main {
  background: url(../images/top/top_back_long.jpg) no-repeat right center / cover;
  height: 660px;
  max-height: 660px;
  display: flex;
  align-items: center;
}

.wrapper_inner {
  padding: 0 1rem;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  height: 80%;
  width: 100%;
}

.link_area {
  background: #fff;
  text-align: center;
  width: 30vw;
  max-width: 370px;
  height: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.link_area ul {
  width: 80%;
  display: flex;
  gap: 3rem;
  flex-direction: column;
  align-items: flex-start;
}

.nav_logo {
  width: 90% !important;
  margin: 0 auto 2rem auto;
}
.nav_link {
  height: 20px;
}
.catchcopy {
  text-align: right;
}

.catchcopy img {
  width: 90vw;
  max-width: 500px;
  height: auto;
}

@media print, screen and (max-width: 768px) {
  main {
    align-items: center;
    display: flex;
    flex-direction: column;
      height: 540px;
  }

  .wrapper_inner {
    padding: 4rem 2rem;
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-direction: column-reverse;
        height: auto;
        width: 100%;
        gap:3rem;
  }

  .link_area {
    background: #fff;
        text-align: center;
        width: 100%;
        max-width: 370px;
        height: 80%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem;
  }

  .link_area ul {
    width: 100%;
    display: flex;
    gap: 3rem;
    flex-direction: column;
    align-items: flex-start;
  }

  .nav_logo {
    width: 90% !important;
    margin: 0 auto 2rem auto;
  }
  .nav_link {
    height: 20px;
  }
  .catchcopy {
    text-align: right;
  }

  .catchcopy img {
    width: 90vw;
    max-width: 500px;
    height: auto;
  }
}

.container {
  padding: 0 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

footer {
  text-align: center;
  padding: 2rem 0;
}

.footer_logo {
  width: 50%;
  max-width: 149px;
  margin: 0 auto 1rem auto;
}

.copyright {
  font-size: 1.2rem;
}