@charset "UTF-8";

html {
    overflow-x: hidden;
    line-break:strict;
}

.zen-kaku-gothic-new-bold {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-style: normal;
}
.zen-kaku-gothic-antique-bold {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 700;
  font-style: normal;
}

body p,
body a,
body span,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-style: normal;
    line-break:strict;
}

body {
  background-color: #E4E5DD;
}
.row,
.relative {
    position: relative;
}
a {
    word-break: break-all;
    text-decoration: none;
}
a.unpublished {
    pointer-events: none;
    opacity: .7;
}
.hidden {
    display: none;
}
.black {
    color: #4D4D4D;
}
.text-right {
    text-align: right;
}
.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-justify {
    text-align: justify;
}

img {
    max-width: 100%;
}

.ls-0 {
    letter-spacing: 0;
}
.lh-2 {
    line-height: 2;
}
.font16 {
    /* font-size: 16px; */
    font-size: 15px;
}
.font14 {
    font-size: 14px;
}

hr {
    margin-top: 35px;
    margin-bottom: 35px;
    border: 1px;
    border-top: 1px solid #ffffff;
    width: 100%;
    opacity: 1;
}

section {
    position: relative;
}

.mb-0 {
    margin-bottom: 0;
}
.mb-40 {
    /* margin-bottom: 40px; */
    margin-bottom: 25px;
}
.mb-70 {
    /* margin-bottom: 70px; */
    margin-bottom: 60px;
}

.main-inner,
.link-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.main-inner {
  /* padding: 130px 0; */
  height: calc(100vh - 241px);
}
.link-inner {
  border-top:1px solid #C9C9C9;
}
.main-child,
.link-child {
  width: 50%;
}
.link-child {
  padding: 0 100px;
  position: relative;
  height: 240px;
}
.link-child:last-child {
  border-left:1px solid #C9C9C9;
}
.main-child:first-child img {
  max-height: 360px;
}
.main-child:last-child img {
  max-height: 550px;
}
.main-child p {
  max-width: 492px;
  margin: 0 auto;
}
.link-child img {
  max-height: 70px;
}
.link-child-btn {
  position: absolute;
  /* right: 100px; */
  right: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
.link-child-height {
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    position: relative;
}
.link-child-height>p {
  width: calc(100% - 150px);
}

.link-button {
  cursor: pointer;
  border: none;
  background: #000000;
  color: #fff;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  display: grid;
  place-content: center;
  transition:
    background 300ms,
    transform 200ms;
  /* font-weight: 600; */
  padding: 0;
}
.link-button__text {
  position: absolute;
  inset: 0;
  animation: text-rotation 8s linear infinite;
  margin: 0;
  > span {
    position: absolute;
    /* transform: rotate(calc(19deg * var(--index))); */
    transform: rotate(calc(15deg * var(--index)));
    /* inset: 7px; */
    inset: 6px;
    font-size: 12px;
  }
}
.link-button__circle {
  position: relative;
  width: 40px;
  height: 40px;
  overflow: hidden;
  background: #fff;
  color: #000000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.link-button__icon--copy {
  position: absolute;
  transform: translate(-150%, 150%);
}
.link-button:hover {
  background: #000;
  transform: scale(1.05);
}
.link-button:hover .link-button__icon {
  color: #000;
}
.link-button:hover .link-button__icon:first-child {
  transition: transform 0.3s ease-in-out;
  transform: translate(150%, -150%);
}
.link-button:hover .link-button__icon--copy {
  transition: transform 0.3s ease-in-out 0.1s;
  transform: translate(0);
}
@keyframes text-rotation {
  to {
    rotate: 360deg;
  }
}

.fade-in {
  opacity: 0;
  animation: fadeIn 1.5s ease-in-out forwards;
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@media (max-width: 1700px) {
  .main-child:first-child {
    width: 45%;
  }
  .main-child:last-child {
    width: 55%;
  }
  .main-inner {
      /* padding: 120px 0; */
  }
  .link-child {
      /* padding: 50px 90px; */
      padding: 0 90px;
  }
  .link-child-btn {
      /* right: 90px; */
  }
}

@media (max-width: 1600px) {
  .main-inner {
      /* padding: 110px 0; */
  }
  .link-child {
      /* padding: 45px 80px; */
      padding: 0 80px;
  }
  .link-child-btn {
      /* right: 80px; */
  }
  .link-button {
      width: 90px;
      height: 90px;
  }
  .link-button__circle {
      width: 35px;
      height: 35px;
  }
  .link-button__text {
      > span {
          inset: 5px;
      }
  }
  .link-child-height>p {
      width: calc(100% - 140px);
  }

  .font16 {
      font-size: 14px;
  }
  .mb-70 {
      margin-bottom: 55px;
  }
  .mb-40 {
      margin-bottom: 20px;
  }
  .main-child:last-child img {
      max-height: 530px;
  }
  .link-child {
      height: 220px;
  }
  .main-inner {
      height: calc(100vh - 221px);
  }
  .main-child:first-child img {
      max-height: 350px;
  }
  .main-child p {
      max-width: 478px;
  }
  .lh-2 {
      line-height: 1.9em;
  }
}

@media (max-width: 1550px) {
  .main-child:first-child img {
      max-height: 340px;
  }
  .main-child p {
      max-width: 465px;
  }
  .main-child:last-child img {
      max-height: 530px;
  }
  .main-child:first-child {
      width: 43%;
  }
  .main-child:last-child {
      width: 57%;
  }
  .mb-70 {
      margin-bottom: 60px;
  }
  .mb-40 {
      margin-bottom: 30px;
  }
  .font16 {
      font-size: 15px;
  }
  .font14 {
      font-size: 13px;
  }
  div#main-wrapper {
      height: 100% !important;
  }
    .main-inner {
        padding: 110px 0;
        height: 100%;
    }
    .link-child {
        padding: 45px 80px;
        height: auto;
    }
    .link-child-height {
        top: 0;
        transform: none;
        -webkit-transform: none;
        position: relative;
    }
}

@media (max-width: 1500px) {
  .main-inner {
      padding: 100px 0;
  }
  .link-child {
      padding: 40px 70px;
  }
  .link-child-btn {
      /* right: 70px; */
  }
}

@media (max-width: 1450px) {
  .link-child {
      padding: 40px 65px;
  }
  .link-child-btn {
      /* right: 65px; */
  }
  .link-child-height>p {
      width: calc(100% - 130px);
  }
}

@media (max-width: 1400px) {
  .main-child:first-child img {
      max-height: 300px;
  }
  .main-child p {
      max-width: 410px;
  }
  .main-child:last-child img {
      max-height: 500px;
  }
  .main-inner {
      padding: 95px 0;
  }
  .main-child:first-child {
      width: 42%;
  }
  .main-child:last-child {
      width: 58%;
  }
  .link-child img {
      max-height: 66px;
  }
  .link-child-height>p {
      width: calc(100% - 150px);
  }
}

@media (max-width: 1350px) {
  .mb-40 {
      margin-bottom: 25px;
  }
}

@media (max-width: 1300px) {
  .main-child:first-child img {
      max-height: 280px;
  }
  .main-child p {
      max-width: 383px;
  }
  .mb-70 {
      margin-bottom: 55px;
  }
  .main-child:last-child img {
      max-height: 480px;
  }
  .link-child img {
      max-height: 62px;
  }
  .main-inner {
      padding: 90px 0;
  }
}

@media (max-width: 1250px) {
  .main-child:first-child img {
      max-height: 270px;
  }
  .main-child p {
      max-width: 369px;
  }
  .main-child:last-child img {
      max-height: 460px;
  }
  .link-child {
      padding: 40px 60px;
  }
  .link-child-btn {
      /* right: 60px; */
  }
  .link-child-height>p {
      width: calc(100% - 130px);
  }
}

@media (max-width: 1199px) {
  .font16 {
      font-size: 14px;
  }
  .main-child:first-child img {
      max-height: 260px;
  }
  .main-child p {
      max-width: 355px;
  }
  .mb-70 {
      margin-bottom: 50px;
  }
  .main-inner {
      padding: 85px 0;
  }
  .main-child:last-child img {
      max-height: 440px;
  }
  .link-child img {
      max-height: 58px;
  }
  .link-button {
      width: 80px;
      height: 80px;
  }
  .link-button__circle {
      width: 30px;
      height: 30px;
  }
  .link-button__text {
      > span {
          inset: 4px;
          font-size: 11px;
      }
  }
  .link-child-height>p {
      width: calc(100% - 110px);
  }
}

@media (max-width: 1150px) {
  .link-child {
      padding: 40px 50px;
  }
  .link-child-btn {
      /* right: 50px; */
  }
  .font14 {
      font-size: 12px;
  }
  .main-child:first-child img {
      max-height: 250px;
  }
  .main-child p {
      max-width: 342px;
  }
  .main-child:last-child img {
      max-height: 420px;
  }
  .mb-40 {
      margin-bottom: 20px;
  }
}

@media (max-width: 1100px) {
  .main-child:first-child img {
      max-height: 240px;
  }
  .main-child p {
      max-width: 328px;
  }
  .main-inner {
      padding: 80px 0;
  }
  .main-child:first-child {
      width: 41%;
  }
  .main-child:last-child {
      width: 59%;
  }
  .main-child:last-child img {
      max-height: 400px;
  }
  .mb-70 {
      margin-bottom: 45px;
  }
  .link-child img {
      max-height: 54px;
  }
}

@media (max-width: 1024px) {
  .main-child:first-child img {
      max-height: 230px;
  }
  .main-child p {
      max-width: 314px;
  }
  .main-child:last-child img {
      max-height: 385px;
  }
  .link-child {
      width: 100%;
  }
  .link-child:last-child {
      border-left: 0 solid #C9C9C9;
      border-top: 1px solid #C9C9C9;
  }
  .main-child:first-child {
      padding: 0 50px;
  }
  .main-inner {
      padding: 70px 0;
  }
  .font14 {
      font-size: 13px;
  }
  .link-button {
      width: 90px;
      height: 90px;
  }
  .link-button__circle {
      width: 40px;
      height: 40px;
  }
  .link-button__text {
      > span {
          inset: 4px;
      }
  }
  .link-child-height>p {
      width: calc(100% - 120px);
  }
}

@media (max-width: 991px) {
  .mb-70 {
      margin-bottom: 40px;
  }
  .lh-2 {
      line-height: 1.8em;
  }
  .main-child:last-child img {
      max-height: 345px;
  }
}

@media (max-width: 899px) {
  .none899 {
      display: none;
  }
  .main-child:first-child {
      width: 50%;
      padding: 0 40px 0 0;
      text-align: left !important;
  }
  .main-inner-sp {
      padding: 0 50px 70px;
      margin-top: 40px;
  }
  .main-child:last-child {
      width: 50%;
  }
  .main-inner {
      padding: 70px 50px 0;
  }
  .mb-70 {
      margin-bottom: 0;
  }
  .main-child:first-child img {
      max-height: 300px;
  }
}

@media (min-width: 900px) {
  .none900 {
      display: none;
  }
}

@media (max-width: 840px) {
  .main-inner {
      padding: 60px 50px 0;
  }
  .main-inner-sp {
      padding: 0 50px 60px;
      margin-top: 35px;
  }
}

@media (max-width: 767px) {
  .main-inner {
      padding: 55px 40px 0;
  }
  .main-inner-sp {
      padding: 0 40px 55px;
      margin-top: 30px;
  }
  .link-child {
      padding: 35px 40px;
  }
  .main-child:first-child {
      padding: 0 35px 0 0;
  }
  .link-child-btn {
      /* right: 40px; */
  }
}

@media (max-width: 699px) {
  .main-inner {
      padding: 50px 40px 0;
  }
  .main-inner-sp {
      padding: 0 40px 50px;
  }
  .link-button {
      width: 85px;
      height: 85px;
  }
  .link-button__circle {
      width: 35px;
      height: 35px;
  }
  .link-child-height>p {
      width: calc(100% - 115px);
  }
}

@media (max-width: 640px) {
  .font16 {
      font-size: 13px;
  }
  .font14 {
      font-size: 12px;
  }
  .link-child img {
      max-height: 52px;
  }
  .mb-40 {
      margin-bottom: 15px;
  }
}

@media (max-width: 575px) {
  .main-child:first-child {
      padding: 0;
      width: 100%;
  }
  .main-child:last-child {
      width: 100%;
      margin-top: 50px;
  }
  .main-inner {
      padding: 60px;
  }
  .main-inner-sp.none900 {
      display: none;
  }
  p.none899 {
      display: block;
  }
  .main-child p {
      max-width: 100%;
  }
  .mb-70 {
      margin-bottom: 35px;
  }
  .link-child {
      padding: 40px 60px;
  }
  .link-child-btn {
      /* right: 60px; */
  }
  .link-child-height>p {
      width: calc(100% - 125px);
  }
  .main-child:first-child img {
      max-height: 280px;
  }
}

@media (max-width: 540px) {
  .link-child-btn {
      /* bottom: 40px; */
      bottom: 0;
      top: auto;
        transform: none;
        -webkit-transform: none;
        -ms-transform: none;
  }
}

@media (max-width: 520px) {
  .link-child {
      padding: 35px 55px;
  }
  .link-child-btn {
      /* right: 55px;
      bottom: 35px; */
  }
  .link-child-height>p {
      width: calc(100% - 115px);
  }
  .main-inner {
      padding: 55px;
  }
  .main-child:last-child {
      margin-top: 40px;
  }
}

@media (max-width: 480px) {
  .link-child {
      padding: 35px 50px;
  }
  .main-inner {
      padding: 50px;
  }
  .mb-70 {
      margin-bottom: 30px;
  }
  .main-child:last-child {
      margin-top: 35px;
  }
  .link-button {
      width: 80px;
      height: 80px;
  }
  .link-button__circle {
      width: 30px;
      height: 30px;
  }
  .link-child-btn {
      /* right: 50px; */
  }
  .link-button__text {
      > span {
          inset: 3px;
          font-size: 10px;
      }
  }
}

@media (max-width: 430px) {
  .main-child:last-child {
      margin-top: 30px;
  }
  .link-child-btn {
      /* right: 40px; */
  }
  .link-child-height>p {
      width: calc(100% - 100px);
  }
  .link-child {
      padding: 35px 40px;
  }
  .main-inner {
      padding: 50px 40px;
  }
}

@media (max-width: 428px) {
  .link-button {
      width: 75px;
      height: 75px;
  }
  .link-button__circle {
      width: 28px;
      height: 28px;
  }
  .link-button__text {
      > span {
          inset: 5px;
          font-size: 9px;
      }
  }
  .link-child {
      padding: 30px 40px;
  }
  .link-child-btn {
      /* right: 30px; */
      right: -10px;
      /* bottom: 30px; */
  }
  .link-child-height>p {
      width: calc(100% - 90px);
  }
}

@media (max-width: 414px) {
  .link-child img {
      max-height: 50px;
  }
}

@media (max-width: 390px) {
  .main-child:last-child {
      margin-top: 25px;
  }
  .mb-70 {
      margin-bottom: 25px;
  }
  .link-child img {
      max-height: 48px;
  }
  .link-button {
      width: 70px;
      height: 70px;
  }
  .link-button__text {
      > span {
          inset: 4px;
      }
  }
  .main-inner {
      padding: 45px 35px;
  }
  .link-child {
      padding: 30px 35px;
  }
}

@media (max-width: 360px) {
  .main-inner {
      padding: 40px 30px;
  }
  .main-child:last-child {
      margin-top: 20px;
  }
  .link-child {
      padding: 30px;
  }
  .lh-2 {
      line-height: 1.7em;
  }
  .font14 {
      font-size: 11px;
  }
  .font16 {
      font-size: 12px;
  }
  .link-child img {
      max-height: 46px;
  }
  .link-child-btn {
      /* right: 25px; */
  }
}

@media (max-width: 340px) {
  .link-child-btn {
      /* right: 20px;
      bottom: 25px; */
      right: -5px;
  }
  .link-child {
      padding: 25px;
  }
  .mb-40 {
      margin-bottom: 12px;
  }
  .main-inner {
      padding: 35px 25px;
  }
  .main-child:last-child {
      margin-top: 15px;
  }
  .mb-70 {
      margin-bottom: 20px;
  }
}