/* ------------------------------
    parts
------------------------------ */
body {
  background-image: url(../image/top/background.webp);
  background-size: cover;
}

.inner {
  width: 900rem;
  margin-inline: auto;
}

.button {
  font-size: 17rem;
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 309rem;
  aspect-ratio: 309/60;
  padding-inline: 15rem;
  background-image: linear-gradient(45deg, #dc9576 0%, #bb5535 100%);
}
.button .buttonArrow {
  display: block;
  width: 46rem;
}
.button .buttonArrow .cls-1 {
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-width: 0.69px;
}
@media screen and (min-width: 769px) {
  .button .buttonArrow {
    transition: all 0.3s;
  }
  .button:hover .buttonArrow {
    transform: translateX(8rem);
  }
  .button.button-window {
    transition: opacity 0.3s;
  }
  .button.button-window:hover {
    opacity: 0.7;
  }
}
.button .icon-window {
  width: 21rem;
}

@media screen and (max-width: 768px) {
  .inner {
    width: 90%;
  }
  .button {
    font-size: 28rem;
    width: 500rem;
  }
  .button .buttonArrow {
    width: 80rem;
  }
  .button .icon-window {
    width: 42rem;
  }
}
/* ------------------------------
    mv
------------------------------ */
.mv {
  padding-block: 150rem 100rem;
  margin-bottom: 90rem;
}
.mv .mainvisual {
  width: 626rem;
  margin-inline: auto;
}
.mv .scroll {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 87rem;
  height: 87rem;
  border: 1px solid #898989;
  border-radius: 50%;
  margin: 100rem auto 0;
}
.mv .scroll img {
  width: 42rem;
}
.mv .scroll::after {
  position: absolute;
  content: "";
  animation: scroll 2s infinite;
  width: 1px;
  height: 100rem;
  background: #898989;
  left: 50%;
  top: calc(100% - 15rem);
  margin-inline: auto;
}

@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}
@media screen and (max-width: 768px) {
  .mv .mainvisual {
    width: 90%;
  }
  .mv .scroll {
    width: 150rem;
    height: 150rem;
    margin-top: 100rem;
  }
  .mv .scroll img {
    width: 80rem;
  }
  .mv .scroll::after {
    height: 150rem;
    top: calc(100% - 30rem);
  }
}
/* ------------------------------
    news
------------------------------ */
.news .newsTitle {
  width: 112rem;
  margin: 0 auto 25rem;
}
.news .newsList {
  padding: 30rem;
  border-top: 1px solid #898989;
  border-bottom: 1px solid #898989;
}
.news .newsList .newsListItem + .newsListItem {
  margin-top: 17rem;
}
.news .newsList .newsListItem a {
  display: flex;
  align-items: center;
  -moz-column-gap: 20rem;
       column-gap: 20rem;
}
.news .newsList .newsListItem a .date {
  color: #9d8447;
  flex-shrink: 0;
min-width:7em;
}
.news .newsList .newsListItem a .category {
  font-size: 12rem;
  color: #898989;
  text-align: center;
  line-height: 1;
  width: 103rem;
  background-color: #fff;
  padding-block: 10rem;
  flex-shrink: 0;
}
@media screen and (min-width: 769px) {
  .news .newsList .newsListItem a {
    transition: opacity 0.3s;
  }
  .news .newsList .newsListItem a:hover {
    opacity: 0.7;
  }
}
.news .newsLink {
  display: flex;
  justify-content: center;
  -moz-column-gap: 25rem;
       column-gap: 25rem;
  margin-top: 60rem;
}

@media screen and (max-width: 768px) {
  .news .newsTitle {
    width: 168rem;
    margin-bottom: 50rem;
  }
  .news .newsList {
    padding: 60rem 30rem;
  }
  .news .newsList .newsListItem + .newsListItem {
    margin-top: 50rem;
  }
  .news .newsList .newsListItem a {
    flex-wrap: wrap;
    row-gap: 20rem;
  }
  .news .newsList .newsListItem a .category {
    font-size: 28rem;
    width: auto;
    padding: 10rem 20rem;
  }
  .news .newsList .newsListItem a .title {
    width: 100%;
  }
  .news .newsLink {
    flex-wrap: wrap;
    row-gap: 30rem;
  }
}
/* ------------------------------
    support
------------------------------ */
.support {
  margin-top: 130rem;
}
.support .supportBox {
  position: relative;
  width: 1030rem;
  margin-inline: auto 0;
  padding: 35rem 80rem 90rem;
  background: #fff;
}
.support .supportBox .supportTitle {
  position: absolute;
  width: 45rem;
  top: 10rem;
  left: 0;
  transform: translateX(-50%);
}
.support .supportBox .supportSubtitle {
  font-size: 35rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  margin-bottom: 35rem;
}
.support .supportBox .supportList {
  display: flex;
  flex-wrap: wrap;
  gap: 40rem 34rem;
  margin-bottom: 70rem;
}
.support .supportBox .supportList li {
  font-size: 18rem;
  line-height: 1.6111111111;
  font-feature-settings: "palt";
  display: flex;
  align-items: center;
  width: 250rem;
  height: 87rem;
  border: 1px solid #000;
}
.support .supportBox .supportList li a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  padding-left: 25rem;
}

@media screen and (max-width: 768px) {
  .support .supportBox {
    width: 90%;
    margin-inline: auto;
    padding: 50rem;
  }
  .support .supportBox .supportSubtitle {
    font-size: 40rem;
    text-align: center;
    margin-bottom: 50rem;
  }
  .support .supportBox .supportList {
    row-gap: 30rem;
  }
  .support .supportBox .supportList li {
    font-size: 32rem;
    width: 100%;
  }
  .support .button {
    margin-inline: auto;
  }
}
/* ------------------------------
    tool
------------------------------ */
.tool {
  margin-top: 100rem;
}
.tool .toolBox {
  position: relative;
  width: 735rem;
  padding: 35rem 100rem 90rem;
  background: #fff;
}
.tool .toolBox .toolTitle {
  position: absolute;
  width: 45rem;
  top: 10rem;
  right: 0;
  transform: translateX(50%);
}
.tool .toolBox .toolSubtitle {
  font-size: 35rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  margin-bottom: 35rem;
}
.tool .toolBox .toolList {
  display: flex;
  flex-wrap: wrap;
  gap: 40rem 34rem;
  margin-bottom: 70rem;
}
.tool .toolBox .toolList li {
  font-size: 18rem;
  line-height: 1.6111111111;
  font-feature-settings: "palt";
  display: flex;
  align-items: center;
  width: 250rem;
  height: 87rem;
  border: 1px solid #000;
}
.tool .toolBox .toolList li a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  padding-left: 25rem;
}

@media screen and (max-width: 768px) {
  .tool .toolBox {
    width: 100%;
    padding: 50rem;
  }
  .tool .toolBox .toolSubtitle {
    font-size: 40rem;
    text-align: center;
    margin-bottom: 50rem;
  }
  .tool .toolBox .toolList {
    row-gap: 30rem;
  }
  .tool .toolBox .toolList li {
    font-size: 32rem;
    width: 100%;
  }
  .tool .button {
    margin-inline: auto;
  }
}
/* ------------------------------
    link
------------------------------ */
.link {
  margin-block: 120rem 60rem;
}
.link .linkInner {
  width: 1100rem;
  margin-inline: auto;
}
.link .linkInner .linkTop {
  display: flex;
  justify-content: center;
  -moz-column-gap: 50rem;
       column-gap: 50rem;
  padding-block: 80rem 50rem;
  border-top: 1px solid #898989;
  border-bottom: 1px solid #898989;
}
.link .linkInner .linkTop .linkTopItem {
  width: 285rem;
}
.link .linkInner .linkTop .linkTopItem .button {
  line-height: 1.5882352941;
  width: 100%;
  height: 94rem;
}
.link .linkInner .linkTop .linkTopItem p {
  font-size: 15rem;
  line-height: 1.8666666667;
  margin-top: 20rem;
}
.link .linkInner .linkBottom {
  display: flex;
  justify-content: center;
  -moz-column-gap: 50rem;
       column-gap: 50rem;
  margin-block: 100rem 70rem;
}
.link .linkInner .linkBottom .linkBottomItem a {
  font-size: 15rem;
  font-weight: 500;
  color: #9d8447;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 285rem;
  aspect-ratio: 285/70;
  padding-inline: 15rem;
  border: 1px solid #9d8447;
  background: #fff;
}
.link .linkInner .linkBottom .linkBottomItem a svg {
  width: 21rem;
}
.link .linkInner .linkBottom .linkBottomItem a svg .cls-1 {
  fill: #9d8447;
}
.link .linkInner .linkBottom .linkBottomItem a svg .cls-2 {
  stroke: #9d8447;
}
@media screen and (min-width: 769px) {
  .link .linkInner .linkBottom .linkBottomItem a {
    transition: all 0.3s;
  }
  .link .linkInner .linkBottom .linkBottomItem a svg .cls-1,
  .link .linkInner .linkBottom .linkBottomItem a svg .cls-2 {
    transition: all 0.3s;
  }
  .link .linkInner .linkBottom .linkBottomItem a:hover {
    color: #fff;
    background: #9d8447;
  }
  .link .linkInner .linkBottom .linkBottomItem a:hover svg .cls-1 {
    fill: #fff;
  }
  .link .linkInner .linkBottom .linkBottomItem a:hover .cls-2 {
    stroke: #fff;
  }
}
.link::after {
  content: "";
  display: block;
  animation: scroll 2s infinite;
  width: 1px;
  height: 120rem;
  background: #898989;
  margin-inline: auto;
}

@media screen and (max-width: 768px) {
  .link .linkInner {
    width: 90%;
  }
  .link .linkInner .linkTop {
    flex-wrap: wrap;
    row-gap: 50rem;
    padding-block: 60rem;
  }
  .link .linkInner .linkTop .linkTopItem {
    width: 500rem;
  }
  .link .linkInner .linkTop .linkTopItem .button {
    height: 120rem;
  }
  .link .linkInner .linkTop .linkTopItem p {
    font-size: 24rem;
  }
  .link .linkInner .linkBottom {
    flex-wrap: wrap;
    row-gap: 30rem;
  }
  .link .linkInner .linkBottom .linkBottomItem a {
    font-size: 28rem;
    width: 500rem;
    padding-inline: 20rem;
  }
  .link .linkInner .linkBottom .linkBottomItem a svg {
    width: 42rem;
  }
}
.catAll {
  background: linear-gradient(to left, #d99071, #bc5737) !important;
}

.cat01 {
  color: #fff !important;
  background: #cf7487 !important;
}

.cat02 {
  color: #fff !important;
  background: #5893c0 !important;
}

.cat03 {
  color: #fff !important;
  background: #7da655 !important;
}

.cat04 {
  color: #fff !important;
  background: #d59533 !important;
}

.cat05 {
  color: #fff !important;
  background: #b6ae59 !important;
}/*# sourceMappingURL=index.css.map */