@charset "utf-8";

/*-------------------------------------
変数
-------------------------------------*/

:root {
  --ZenKakuGothicNew: "Zen Kaku Gothic New", sans-serif;
  --PTSans: "PT Sans", sans-serif;
  --ShipporiMincho: "Shippori Mincho B1", serif;
}





/*-------------------------------------
共通
-------------------------------------*/

/********************/
/* タグ */
/********************/

body {
  font-family: var(--ZenKakuGothicNew);
  line-height: 1.5;
  color: #555;
  background-color: #FEFEFE;
}
body.home {
  background-color: #fff;
}
body.no-scroll {
  overflow: hidden;
}

img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

figure {
  margin: 0;
}



/********************/
/* PC版とsp版で表示非表示の切り替え */
/********************/

.sp-only {
  display: none;
}

@media screen and (max-width: 767.98px) {
  .sp-only {
    display: block;
  }
  .pc-only {
    display: none;
  }
}



/********************/
/* スマホはタップで通話できるが、PCではクリックさせない */
/********************/

@media screen and (min-width: 768px) {
	a[href^="tel:"] {
		pointer-events: none;
	}
}



/********************/
/* ボタン */
/********************/

a {
  display: block;
  transition: all 0.45s;
}
@media (hover: hover) {
  a:hover {
    opacity: 0.7;
  }
}

button {
  display: block;
  transition: all 0.45s;
}
@media (hover: hover) {
  button:hover {
    opacity: 0.7;
  }
}

@keyframes transformLeftRight {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes transformRightLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(110%);
  }
}

/* 楕円ボタン */
.common-ellipse-button {
  display: flex;
}
.common-ellipse-button.common-ellipse-button--center {
  justify-content: center;
}
.common-ellipse-button.common-ellipse-button--right {
  justify-content: flex-end;
}

.common-ellipse-button__link {
  width: min(calc(100vw / 375 * 300), 300px);
  height: 50px;
  border-radius: 999px;
  background-color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
}
.common-ellipse-button__link.common-ellipse-button__link--white {
  background-color: #fff;
}

.common-ellipse-button__text {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.03em;
  color: #fff;
  padding-left: 27px;
  position: relative;
}
.common-ellipse-button__link--white .common-ellipse-button__text {
  color: #555;
}

@media (hover: hover) {
  .common-ellipse-button__link:hover {
    opacity: 1;
    background-color: #287ACC;
  }
}

.common-ellipse-button__arrow {
  position: absolute;
  top: 2px;
  left: 2px;
  bottom: 0;
  height: 16px;
  width: 16px;
  margin: auto 0;
  line-height: 1;
  transform: rotate(-45deg);
  overflow: hidden;
}
.common-ellipse-button__arrow:before,
.common-ellipse-button__arrow:after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 14px;
  height: 14px;
  background-image: url(../image/common/icon_arrow_white.svg);
  background-repeat: no-repeat;
  background-size: contain;
  animation-fill-mode: both;
  animation-duration: 0.45s;
}
.common-ellipse-button__link--white .common-ellipse-button__arrow:before,
.common-ellipse-button__link--white .common-ellipse-button__arrow::after {
  background-image: url(../image/common/icon_arrow_black.svg);
}
.common-ellipse-button__arrow:after {
  transform: translateX(-110%);
}
.common-ellipse-button__link.is-hover .common-ellipse-button__arrow:before {
  animation-name: transformLeftRight;
  animation-delay: 0.15s;
}
.common-ellipse-button__link.is-hover .common-ellipse-button__arrow:after {
  animation-name: transformRightLeft;
}
.common-ellipse-button__link.is-hover:hover .common-ellipse-button__arrow:before {
  animation-name: transformRightLeft;
  animation-delay: 0s;
}
.common-ellipse-button__link.is-hover:hover .common-ellipse-button__arrow:after {
  animation-name: transformLeftRight;
  animation-delay: 0.15s;
}


/* 下線ボタン */
.common-underLine-button {
  display: flex;
}

.common-underLine-button__link {
  padding-top: 4px;
  padding-bottom: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #333;
}
.common-underLine-button__link.common-underLine-button__link--white {
  border-bottom: 1px solid #fff;
}

.common-underLine-button__text {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.03em;
  line-height: calc(20 / 14);
  color: #333;
  padding-left: 25px;
  position: relative;
  transition: all 0.45s;
}
.common-underLine-button__link--white .common-underLine-button__text {
  color: #fff;
}

@media (hover: hover) {
  .common-underLine-button__link:hover {
    opacity: 1;
  }
  .common-underLine-button__link:hover .common-underLine-button__text {
    color: #555;
  }
  .common-underLine-button__link--white:hover .common-underLine-button__text {
    color: #fff;
  }
}

.common-underLine-button__arrow {
  position: absolute;
  top: 2px;
  left: 2px;
  bottom: 0;
  height: 16px;
  width: 16px;
  margin: auto 0;
  line-height: 1;
  transform: rotate(-45deg);
  overflow: hidden;
}
.common-underLine-button__arrow:before,
.common-underLine-button__arrow:after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 14px;
  height: 14px;
  background-image: url(../image/common/icon_arrow_black02.svg);
  background-repeat: no-repeat;
  background-size: contain;
  animation-fill-mode: both;
  animation-duration: 0.45s;
}
.common-underLine-button__link--white .common-underLine-button__arrow:before,
.common-underLine-button__link--white .common-underLine-button__arrow::after {
  background-image: url(../image/common/icon_arrow_white.svg);
}
.common-underLine-button__arrow:after {
  transform: translateX(-110%);
}
.common-underLine-button__link.is-hover .common-underLine-button__arrow:before {
  animation-name: transformLeftRight;
  animation-delay: 0.15s;
}
.common-underLine-button__link.is-hover .common-underLine-button__arrow:after {
  animation-name: transformRightLeft;
}
.common-underLine-button__link.is-hover:hover .common-underLine-button__arrow:before {
  animation-name: transformRightLeft;
  animation-delay: 0s;
}
.common-underLine-button__link.is-hover:hover .common-underLine-button__arrow:after {
  animation-name: transformLeftRight;
  animation-delay: 0.15s;
}


/* 円ボタン */
.common-circle-button {
  position: relative;
}
@media (hover: hover) {
  .common-circle-button:hover {
    opacity: 1;
  }
}

.common-circle-button__area {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #333;
}

.common-circle-button__arrow {
  position: absolute;
  top: 2px;
  left: 18px;
  bottom: 0;
  height: 16px;
  width: 16px;
  margin: auto 0;
  line-height: 1;
  transform: rotate(-45deg);
  overflow: hidden;
}
.common-circle-button__arrow:before,
.common-circle-button__arrow:after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 14px;
  height: 14px;
  background-image: url(../image/common/icon_arrow_white.svg);
  background-repeat: no-repeat;
  background-size: contain;
  animation-fill-mode: both;
  animation-duration: 0.45s;
}
.common-circle-button__arrow:after {
  transform: translateX(-110%);
}
.common-circle-button.is-hover .common-circle-button__arrow:before {
  animation-name: transformLeftRight;
  animation-delay: 0.15s;
}
.common-circle-button.is-hover .common-circle-button__arrow:after {
  animation-name: transformRightLeft;
}
.common-circle-button.is-hover:hover .common-circle-button__arrow:before {
  animation-name: transformRightLeft;
  animation-delay: 0s;
}
.common-circle-button.is-hover:hover .common-circle-button__arrow:after {
  animation-name: transformLeftRight;
  animation-delay: 0.15s;
}

@media screen and (max-width: 767.98px) {
  .common-circle-button__area {
    width: 42px;
    height: 42px;
  }
  .common-circle-button__arrow {
    left: 14px;
  }
}



/********************/
/* インナー */
/********************/

/* コンテンツ幅1312px */
.common-inner {
  margin-inline: auto;
  max-width: 1352px;
  padding-inline: 20px;
}
/* コンテンツ幅1240px */
.article-inner {
  margin-inline: auto;
  max-width: 1300px;
  padding-inline: 30px;
}
/* コンテンツ幅1057px */
.narrow-inner {
  margin-inline: auto;
  max-width: 1137px;
  padding-inline: 40px;
}

@media screen and (max-width: 767.98px) {
  .common-inner,
  .article-inner,
  .narrow-inner {
    padding-inline: min(calc(100vw / 375 * 15), 15px);
  }
}



/********************/
/* セクションタイトル */
/********************/

.common-title {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.common-title.common-title--left {
  align-items: flex-start;
}

.common-title__en {
  font-family: var(--PTSans);
  letter-spacing: 0.03em;
}
.common-title--topBig .common-title__en {
  font-size: 120px;
  line-height: calc(144 / 120);
}
.common-title--topSmall .common-title__en {
  font-size: 80px;
  line-height: calc(96 / 80);
  margin-bottom: -4px;
}
.common-title--mv .common-title__en {
  font-size: 82px;
  line-height: calc(120 / 82);
}
.common-title--page .common-title__en {
  font-size: 62px;
  line-height: calc(120 / 62);
}
.common-title--white .common-title__en {
  color: #fff;
}
.common-title--gradation .common-title__en {
  background: linear-gradient(106.8deg, #A7A7A7 2.46%, #287ACC 88.4%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.common-title__ja {
  margin-top: 10px;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: 0.03em;
}
.common-title--white .common-title__ja {
  color: #fff;
}
.common-title--gradation .common-title__ja {
  background: linear-gradient(106.8deg, #A7A7A7 2.46%, #287ACC 88.4%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.common-title--page .common-title__ja {
  margin-top: -20px;
}

@media screen and (max-width: 767.98px) {

  .common-title--topBig .common-title__en {
    font-size: min(calc(100vw / 375 * 82), 82px);
  }
  .common-title--topSmall .common-title__en {
    font-size: min(calc(100vw / 375 * 64), 64px);
  }
  .common-title--mv .common-title__en {
    font-size: min(calc(100vw / 375 * 64), 64px);
  }

  .common-title__ja {
    margin-top: 10px;
    font-size: min(calc(100vw / 375 * 20), 20px);
    line-height: 1;
  }
}



/********************/
/* テキストループ */
/********************/

.common-loop {
  overflow: hidden;
  width: max-content;
}

.common-loop__group {
  display: flex;
  white-space: nowrap;
}

.common-loop__text {
  flex-shrink: 0;
  font-size: calc(100vw / 1440 * 120);
  line-height: calc(155 / 120);
  letter-spacing: 0.03em;
  color: #BEDEFB;
  opacity: 0.6;
  padding-right: 2vw;
  animation: loopSlide 30s linear infinite;
}
@keyframes loopSlide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@media screen and (max-width: 767.98px) {
  .common-loop__text {
    font-size: calc(100vw / 375 * 77);
    animation: loopSlide 40s linear infinite;
  }
}



/********************/
/* 下層MV */
/********************/

.common-page-mv {
  margin-top: 190px;
  position: relative;
  z-index: 1;
}
.common-page-mv--mark::before {
  position: absolute;
  top: 70%;
  right: calc(50% - 720px);
  transform: translateY(-50%);
  content: "";
  width: min(calc(100vw / 1280 * 394), 394px);
  height: auto;
  aspect-ratio: 788 / 916;
  background-image: url(../image/common/common_mark.webp);
  background-repeat: no-repeat;
  background-size: contain;
  z-index: -1;
}

.common-title--mv .common-title__ja {
  margin-top: -5px;
}

.common-page-mv__image {
  margin-top: 42px;
}

.common-page-mv__image img {
  aspect-ratio: 82 / 25;
}

@media screen and (max-width: 1439.98px) {
  .common-page-mv--mark::before {
    right: 0;
  }
}

@media screen and (max-width: 767.98px) {

  .common-page-mv {
    margin-top: 80px;
  }
  .common-page-mv--mark::before {
    top: 10px;
    transform: unset;
    width: 150px;
  }

  .common-page-mv__image {
    margin-top: 36px;
  }

  .common-page-mv__image img {
    aspect-ratio: 2 / 1;
  }

}

@media screen and (max-width: 499.98px) {
  .common-page-mv--mark::before {
    top: 50px;
    transform: unset;
    width: 115px;
  }
}



/********************/
/* 投稿が無い時のテキスト */
/********************/

.common-none-text {
  padding: 20px;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.03em;
}



/********************/
/* 投稿詳細 */
/********************/

.wp-block-buttons .wp-block-button__link.common-underLine-button__link {
  margin-bottom: 16px;
  padding: 4px 0 12px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #333;
  background-color: unset;
  border-radius: 0;
}
@media (hover: hover) {
  .wp-block-buttons .wp-block-button__link.common-underLine-button__link:hover .common-underLine-button__text {
    color: #555;
  }
}

.wp-block-buttons .wp-block-button__link.common-ellipse-button__link {
  margin-top: 24px;
  margin-bottom: 32px;
  width: auto;
  min-width: min(calc(100vw / 375 * 300), 300px);
  height: 50px;
  padding: 0 30px;
  border-radius: 999px;
  background-color: #333;
  display: flex;
}
@media (hover: hover) {
  .wp-block-buttons .wp-block-button__link.common-ellipse-button__link:hover {
    background-color: #287ACC;
  }
}





/*-------------------------------------
ヘッダー
-------------------------------------*/

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 126px;
  z-index: 999;
}

.header__inner {
  width: 100%;
  height: 100%;
  padding-inline: min(calc(100vw / 1440 * 70), 70px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.header__logo {
  width: 129px;
  height: auto;
  aspect-ratio: 129 / 40;
  position: relative;
  z-index: 9999;
}

.header__logo-link {
  position: relative;
  width: 100%;
  height: 100%;
}

.header__pc-menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  column-gap: min(calc(100vw / 1440 * 40), 40px);
}

.header__menu {
  height: 100%;
  display: flex;
}

.header__nav-list {
  height: 100%;
  display: flex;
  align-items: center;
  column-gap: min(calc(100vw / 1440 * 40), 40px);
}

.header__nav-item {
  position: relative;
}

.header__nav-link {
  display: inline-block;
  font-weight: 500;
  font-size: 14px;
  line-height: calc(20 / 14);
  color: #333;
}
@media (hover: hover) {
  .header__nav-link:hover {
    opacity: 1;
    color: #287ACC;
  }
}
.header__nav-link.header__nav-link--sub {
  padding-right: 19px;
  transition: all 0.45s;
  position: relative;
}
.header__nav-link.header__nav-link--sub::before {
  position: absolute;
  top: 30%;
  right: 0;
  transform: rotate(45deg);
  content: "";
  width: 6px;
  height: 6px;
  border-right: 3px solid #333;
  border-bottom: 3px solid #333;
  transition: all 0.45s;
}
@media (hover: hover) {
  .header__nav-link:hover.header__nav-link--sub::before {
    top: 40%;
    transform: rotate(-135deg);
  }
}

.header__nav-subList {
  position: absolute;
  top: 100%;
  left: 0;
  width: max-content;
  background: #fff;
  padding: 8px 14px;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.45s;
  opacity: 0;
  visibility: hidden;
}
.header__nav-link--sub:hover + .header__nav-subList,
.header__nav-subList:hover {
  opacity: 1;
  visibility: visible;
}

.header__nav-subItem:not(:first-child) {
  margin-top: 12px;
}

.header__nav-subLink {
  width: fit-content;
  font-size: 14px;
  color: #333;
}
@media (hover: hover) {
  .header__nav-subLink:hover {
    opacity: 1;
    color: #287ACC;
  }
}

.header__contact .common-ellipse-button__link {
  width: min(calc(100vw / 900 * 152), 152px);
  height: 44px;
}

.header__contact .common-ellipse-button__text {
  font-weight: 500;
}

.hamburger {
  display: none;
}

.no-scroll {
  overflow: hidden;
}


@media screen and (max-width: 767px) {

  .header {
    height: 86px;
  }

  .header__inner {
    padding-inline: min(calc(100vw / 375 * 15), 15px);
  }

  .header__logo {
    width: 118px;
  }

  .header__pc-menu {
    display: contents;
  }

  .header__menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 103px;
    background-image: url(../image/common/hamburger_bg.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.45s;
    z-index: 999;
  }
  .header__menu.is-active {
    opacity: 1;
    visibility: visible;
  }

  .header__nav {
    width: 100%;
    padding-bottom: 80px;
    overflow: auto;
  }

  .header__nav-list {
    width: 100%;
    height: auto;
    padding-inline: min(calc(100vw / 375 * 18), 18px);
    flex-direction: column;
    align-items: flex-start;
  }

  .header__nav-item {
    width: 100%;
  }
  .header__nav-item:not(:first-child) {
    margin-top: 40px;
    border-top: 1px solid #D9D9D9;
    padding-top: 40px;
  }

  .header__nav-link {
    font-size: 16px;
    line-height: calc(22 / 16);
    color: #fff;
  }
  @media (hover: hover) {
    .header__nav-link:hover {
      opacity: 0.7;
      color: #fff;
    }
  }
  .header__nav-link.header__nav-link--sub {
    cursor: pointer;
  }
  .header__nav-link.header__nav-link--sub::before {
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
  }
  @media (hover: hover) {
    .header__nav-link:hover.header__nav-link--sub::before {
      top: 30%;
      transform: rotate(45deg);
    }
  }
  .header__nav-link.header__nav-link--sub.is-active::before {
    top: 40%;
    transform: rotate(-135deg);
  }

  .header__nav-subList {
    position: relative;
    top: auto;
    background-color: unset;
    box-shadow: unset;
    padding: 30px 0 0;
    transition: unset;
    opacity: 1;
    visibility: visible;
    display: none;
  }

  .header__nav-subItem:not(:first-child) {
    margin-top: 24px;
  }

  .header__nav-subLink {
    font-size: 16px;
    color: #fff;
  }
  @media (hover: hover) {
    .header__nav-subLink:hover {
      opacity: 0.7;
      color: #fff;
    }
  }

  .header__sp-download-zone {
    margin-top: 40px;
    padding-inline: min(calc(100vw / 375 * 15), 15px);
  }

  .header__sp-download.common-ellipse-button {
    border-top: 1px solid #D9D9D9;
    padding-top: 26px;
    display: flex;
    justify-content: center;
  }

  .header__contact {
    margin-right: 56px;
    position: relative;
    z-index: 9999;
  }

  .header__contact .common-ellipse-button__link {
    width: 128px;
    height: 42px;
  }

  .header__contact .common-ellipse-button__text {
    font-size: 12px;
  }

  .hamburger {
    display: block;
    position: fixed;
    top: 21px;
    right: min(calc(100vw / 375 * 15), 15px);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #333;
    cursor: pointer;
    transition: all 0.45s;
    z-index: 9999;
  }

  .hamburger__text-zone {
    display: inline-block;
    width: 100%;
    height: 100%;
    position: relative;
  }

  .hamburger__text {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    font-family: var(--PTSans);
    font-size: 12px;
    letter-spacing: 0.03em;
    color: #fff;
    text-transform: uppercase;
    transition: all 0.45s;
  }
  .hamburger__text:nth-child(2) {
    opacity: 0;
    visibility: hidden;
  }

  .hamburger.is-active .hamburger__text:nth-child(1) {
    opacity: 0;
    visibility: hidden;
  }
  .hamburger.is-active .hamburger__text:nth-child(2) {
    opacity: 1;
    visibility: visible;
  }

}





/*-------------------------------------
フッター
-------------------------------------*/

.footer {
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.footer__contact {
  position: relative;
}

.footer__contact-bg {
  padding-top: 110px;
  padding-bottom: 141px;
  background-image: url(../image/common/footer_bg.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.footer__contact-flex {
  margin-top: 76px;
  display: flex;
  justify-content: center;
  column-gap: min(calc(100vw / 1440 * 40), 40px);
}

.footer__contact-block {
  width: calc((100% - min(calc(100vw / 1440 * 40), 40px)) / 2);
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
  position: relative;
}

.footer__contact-image {
  overflow: hidden;
}

.footer__contact-image img {
  transform: scale(1.2);
  transition: all 0.45s;
}
@media (hover: hover) {
  .footer__contact-block:has(.common-ellipse-button__link:hover) .footer__contact-image img {
    transform: scale(1);
  }
}

.footer__contact-body {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 30px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer__contact-title {
  text-align: center;
  font-weight: 500;
  font-size: min(calc(100vw / 1280 * 34), 34px);
  line-height: 1.8;
  letter-spacing: 0.03em;
  color: #fff;
}

.footer__contact-button {
  margin-top: 32px;
}

.footer__contact-loop {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateY(40%);
}

.footer__main {
  padding-top: 120px;
  padding-bottom: 54px;
}

.footer__body {
  display: flex;
  justify-content: space-between;
}

.footer__body-logo {
  width: 129px;
}

.footer__body-list {
  display: flex;
  justify-content: flex-end;
  column-gap: 32px;
}

.footer__body-link {
  font-size: 15px;
  line-height: calc(22 / 15);
  color: #333;
}
@media (hover: hover) {
  .footer__body-link:hover {
    opacity: 1;
    color: #287ACC;
  }
}

.footer__bottom {
  margin-top: 64px;
  display: flex;
  justify-content: space-between;
}

.footer__bottom-link,
.footer__copy {
  font-size: 13px;
  line-height: calc(19 / 13);
  color: #333;
}
@media (hover: hover) {
  .footer__bottom-link:hover {
    opacity: 1;
    color: #287ACC;
  }
}


@media screen and (max-width: 767.98px) {

  .footer__contact-bg {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .footer__contact-flex {
    margin-top: 46px;
    flex-direction: column;
    gap: 28px;
  }

  .footer__contact-block {
    width: 100%;
  }

  .footer__contact-title {
    font-size: 21px;
  }

  .footer__main {
    padding-top: 64px;
    padding-bottom: 24px;
  }

  .footer__body {
    flex-direction: column;
    gap: 16px;
  }

  .footer__body-list {
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 12px;
  }

  .footer__bottom {
    margin-top: 40px;
    flex-direction: column;
    row-gap: 16px;
  }

}





/*-------------------------------------
共通一覧ページ
-------------------------------------*/

.taxonomy-works-genre {
  margin-top: 24px;
  font-weight: 700;
  font-size: 24px;
  color: #287ACC;
}

.common-archive {
  margin-top: 56px;
  margin-bottom: 120px;
  position: relative;
  z-index: 2;
}

.common-archive__list {
  display: flex;
  flex-wrap: wrap;
  gap: min(calc(100vw / 1280 * 44), 44px);
}

.common-archive__item {
  width: calc((100% - min(calc(100vw / 1280 * 44), 44px) * 2) / 3);
}

.common-archive__link {
  height: 100%;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  overflow: hidden;
}

.common-archive__image img {
  aspect-ratio: 384 / 240;
}

.common-archive__body {
  background-color: #fff;
}
.common-archive__body--download {
  padding: 16px 16px 24px;
}
.common-archive__body--work {
  padding: 24px 10px 25px;
}

.common-archive__title {
  font-weight: 700;
  font-size: min(calc(100vw / 1100 * 24), 24px);
  line-height: 1.8;
  color: #287ACC;
}
.common-archive__title--work {
  text-align: center;
}

.common-archive__text {
  margin-top: 8px;
  padding-inline: min(calc(100vw / 1440 * 20), 20px);
  font-size: 15px;
  line-height: 2;
}

.common-archive__button {
  margin-top: 56px;
}

@media screen and (max-width: 767.98px) {

  .taxonomy-works-genre {
    font-size: 21px;
  }

  .common-archive {
    margin-top: 48px;
    margin-bottom: 90px;
  }

  .common-archive__list {
    gap: 15px;
  }

  .common-archive__item {
    width: calc((100% - 15px) / 2);
  }

  .common-archive__body {
    padding: 10px 12px 16px;
  }

  .common-archive__title {
    font-size: 15px;
  }

  .common-archive__text {
    padding-inline: 0;
    font-size: 14px;
  }

}