/* このページの編集は基本不可（３ページ共通） */
/* alex-std.css, alex-pro.css, alex-ic.css でページ毎に上書き対応 */

/* page common */
.tag-new--red {
  display: grid;
  place-items: center;
  background-color: var(--color-accent-red);
  color: var(--color-white);
  font-size: 1rem;
  font-weight: 400;
  width: 4.25rem;
  height: 1.75rem;
  border-radius: 200px;
  line-height: 1;
}
.tag-new--blue {
  display: grid;
  place-items: center;
  background-color: var(--color-brand-blue);
  color: var(--color-white);
  font-size: 1rem;
  font-weight: 400;
  height: 1.75rem;
  border-radius: 200px;
  line-height: 1;
  width: fit-content;
  padding-inline: 1rem;
}

section.productHead .button,
section.width .button,
section.software .button {
  font-size: .875rem;
  font-weight: 400;
  height: 2.5rem;
  padding-inline: 1.3125rem;
  margin-top: 1.75rem;
}
section.width .button,
section.software .button {
  margin-inline: auto;
  padding-inline: 2rem;
}
.button.icon-download::before {
  width: 1.0625rem;
  height: 1rem;
  margin-right: .5rem;
}

@media screen and (max-width: 1180px) {
  .tag-new--blue {
    font-size: .875rem;
    margin-bottom: .25rem;
  }
}

/* ファーストビュー */
.productHead {
  padding-top: 4rem;
}
.productHead__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  column-gap: 2.5rem;
}
.productHead__details {
  flex: 1;
}
.productHead__label {
  font-weight: 100;
  font-size: clamp(3rem, 2.257rem + 3.05vw, 5rem);
  line-height: 1.1;
  color: var(--color-gray);
  text-transform: uppercase;
}
.productHead__product-title {
  font-size: clamp(1.5rem, 1.314rem + 0.76vw, 2rem);
  font-weight: 400;
  margin-top: 4rem;
}
.productHead__product-text {
  font-size: .875rem;
  font-weight: 400;
}
.productHead__image {
  flex: 0 1 48.75%;
  aspect-ratio: 624 / 416;
  border-radius: 18px;
  width: 100%;
  overflow: hidden;
  position: relative;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

@media screen and (max-width: 1000px) {
  .productHead__inner {
    flex-direction: column-reverse;
  }
  .productHead__details,
  .productHead__image {
    flex: unset;
  }
  .productHead__details {
    margin-top: 2.5rem;
    width: 100%;
  }
  .productHead__product-title {
    margin-top: 1.5rem;
  }
}
@media screen and (max-width: 767px) {
  .productHead {
    padding-top: 2.5rem;
  }
}
/* =============== */
/* section:特徴 */
/* =============== */
.point {
  padding-top: 6.25rem;
}
.point__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 2.5rem;
  margin-top: 5rem;
}
.pointCard {
  display: grid;
  align-content: start;
  justify-content: center;
  background-color: var(--color-panel);
  border-radius: 12px;
  padding: 2.5rem;
}
.pointCard__title {
  font-size: 1.25rem;
  font-weight: 400;
  margin-top: 1.25rem;
}
.pointCard__text {
  font-size: .875rem;
  font-weight: 400;
  margin-top: 0.75rem;
}
.pointCard__image {
  display: block;
  width: 20rem;
  max-width: 100%;
  margin-inline: auto;
}

@media screen and (max-width: 1000px) {
  .point__cards {
    gap: 1rem;
    margin-top: 2.5rem;
  }
  .pointCard {
    padding: 1.5rem;
  }
  .pointCard__title {
    line-height: 1.8;
  }
  .pointCard__text {
    margin-top: 0.5rem;
  }
}
@media screen and (max-width: 767px) {
  .point {
    padding-top: 5rem;
  }
  .point__cards {
    grid-template-columns: 1fr;
  }
  .pointCard {
    text-align: center;
  }
  .pointCard__title {
    font-size: 1.125rem;
  }
}

/* =============== */
/* section:使いやすさを支える機能 */
/* =============== */
.feature {
  padding-top: 6.25rem;
}
.feature__contents {
  display: flex;
  gap: 0;
  position: relative;
  margin-top: 4.7244rem;
  padding-left: 8.125%;
}
.feature__lists {
    max-width: 22rem;
}
.featureList {
  position: relative;
}

.featureList__title {
  color: var(--color-brand-blue);
  font-size: 1.125rem;
  font-weight: 700;
}
.featureList__text {
  font-size: .875rem;
  font-weight: 400;
}
.featureList__text-s {
  font-size: .75rem;
  font-weight: 400;
}
.featureList.list-1::after {
  content: "";
  background: url(/assets/images/pages/alex-std/feature-line-1.svg) no-repeat center center / contain;
  width: 6.0625rem;
  aspect-ratio: 97 / 50;
  position: absolute;
  bottom: -3.75rem;
  right: 1.5rem;
  z-index: 2;
}

.feature__image {
  max-width: 30.2906rem;
  margin-left: -3rem;
  position: relative;
  img {
    width: 100%;
  }
}
.feature__image::before {
  content: "";
  background: url(/assets/images/pages/alex-std/feature-line-2.svg) no-repeat center center / contain;
  width: 11.3594rem;
  aspect-ratio: 181.75 / 120.73;
  position: absolute;
  bottom: 3.75rem;
  left: 0.25rem;
  z-index: 2;
}
.feature__image::after {
  content: "";
  background: url(/assets/images/pages/alex-std/feature-line-4.svg) no-repeat center center / contain;
  width: 18.5525rem;
  aspect-ratio: 185.84 / 113.46;
  position: absolute;
  top: 5.75rem;
  right: 2.65rem;
}

.mt-minus-3 {
  margin-top: -0.1875rem;
}
.mt-5 {
  margin-top: .3125rem;
}

@media screen and (max-width: 1280px) {
  .feature__contents {
    padding-left: 0
  }
}
@media screen and (max-width: 1180px) {
  .feature__contents {
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 2.5rem;
    position: relative;
  }
  .feature__image {
    max-width: 335px;
    height: 100%;
    position: sticky;
    top: 5rem;
    left: 0;
    margin-left: 0;
  }
  .feature__lists {
    display: grid;
    row-gap: 2.5rem;
    max-width: 100%;
  }
  .tag-new--red {
    font-size: .875rem;
  }
  .featureList__text.mt-5 {
    margin-top: 0;
  }
  .featureList.list-1::after,
  .feature__image::before,
  .feature__image::after {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .feature {
    padding-top: 5rem;
  }
  .feature__contents {
    flex-direction: column-reverse;
    margin-top: 1rem;
  }
  .feature__image {
    margin-top: 2.5rem;
    text-align: center;
    position: static;
    width: 100%;
    max-width: none;
    img {
      width: 56%;
      min-width: 210px;
      margin-inline: auto;
    }
  }
}

/* =============== */
/* section:
    選べる通信方式でデータ取り込み */
/* =============== */
.data {
  padding-top: 7.75rem;
}
.data__contents {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-top: 3rem;
}
.dataCard__titles {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.dataCard__image {
  margin-block: 1rem;
  img {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .data {
    padding-top: 5rem;
  }
  .data__contents {
    grid-template-columns: 1fr;
    margin-top: 1.5rem;
  }
  .dataCard__image {
    margin-block: 1rem;
  }
}
/* =============== */
/* section:
「サッと勤怠with」 */
/* =============== */
.width {
  padding-top: 7.5rem;
}
.width__contents {
  display: grid;
  grid-template-columns: auto 2.5rem auto;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
  margin-top: 2rem;
}
.widthCard__image {
  margin-block: 2.1875rem;
  img {
    width: 100%;
  }
}
.widthCard__arrow {
  display: block;
  img {
    margin-bottom: 2rem;
  }
}

@media screen and (max-width: 767px) {
  .width {
    padding-top: 5rem;
  }
  .width__contents {
    grid-template-columns: 1fr;
    flex-direction: column;
    gap: 0;
    margin-top: 2.5rem;
  }
  .widthCard__arrow {
    margin-bottom: 1rem;
    text-align: center;
    img {
      transform: rotate(90deg);
    }
  }
}

/* =============== */
/* section:
    各種給与ソフトと連携 */
/* =============== */
.software {
  padding-top: 7.75rem;
}
.software__text {
  margin-top: 5rem;
}
.software__logo-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 5rem;
}
.software__logo {
  display: block;
  width: auto;
  height: 2.5rem;
}
section.software .button {
  margin-top: 5rem;
}

@media screen and (max-width: 767px) {
  .software {
    padding-top: 5rem;
  }
  .software__text {
    margin-top: 2.5rem;
  }
  .software__logo-list {
    margin-top: 2.5rem;
  }
  .software__logo {
    height: 1.5rem;
  }
  section.software .button {
    margin-top: 2.5rem;
  }
}

/* =============== */
/* section:
    各種給与ソフトと連携 */
/* =============== */
.package {
  padding-top: 5rem;
}
.package__contents {
  border-radius: 8px;
  box-shadow: 0 0 10px rgb(0 0 0 / 0.14);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2.3525rem;
  padding: 2rem;
  margin-top: 5rem;
}
.package__image {
  flex: 0 1 48.2%;
  display: block;
}
.package-details__lists {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
	flex-wrap: wrap;
	margin-top: 2.5rem;
}
.package__details {
  flex: 1;
  width: 100%;
  p {
    font-size: 1.25rem;
    font-weight: 700;
  }
  ul {
    margin-inline: 1rem;
    display: grid;
    align-items: flex-start;
    grid-template-columns: 1fr;
    column-gap: 2.5rem;
    row-gap: 1.5rem;
		&:nth-of-type(2) {
			margin-right: 0;
		}
  }
  li {
    position: relative;
    padding-left: 1.5rem;
  }
  li::before {
    content: "";
    background-color: var(--color-black);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: .8125rem;
  }
}
@media screen and (max-width: 1440px) {
	.package-details__lists {
		margin-top: 1.5rem;
	}
	.package__details {
		margin-top: 1rem;
	}
	.package__contents {
    display: block;
  }
	.package__image {
    margin-left: 0;
    text-align: center;
  }
}

@media screen and (max-width: 1100px) {
	.package-details__lists {
		margin-top: 1rem;
	}
  .package__details {
    ul {
      grid-template-columns: 1fr;
      row-gap: 0.5rem;
    }
  }
}
@media screen and (max-width: 767px) {
  .package__contents {
    display: block;
    margin-top: 2.5rem;
		padding: 1.5rem;
  }
  .package-details__lists {
    margin-top: 1rem;
  }
}

.specificattions__lists {
  display: grid;
  align-items: stretch;
  grid-template-columns: 31.25% auto;
  border: 1px solid #C8CFD5;
  border-radius: 12px;
  margin-top: 5rem;

  dt {
    display: grid;
    align-items: center;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.2;
    padding: .25rem .9688rem;
    border-right: 1px solid #C8CFD5;
    min-height: 2.875rem;
  }
  dd {
    display: grid;
    align-items: center;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.2;
    padding: .25rem .9688rem;
    min-height: 2.875rem;
  }
  dt:not(:last-of-type),
  dd:not(:last-of-type) {
    border-bottom: 1px solid #C8CFD5;
  }
  dt:nth-of-type(2n),
  dd:nth-of-type(2n) {
    background-color: #F3F9FD;
  }
  .text-bold {
    font-weight: 700;
  }
}

.specificattions__attention {
  margin-top: 1.5rem;
}
.specificattions__attention li {
  font-size: .75rem;
  font-weight: 400;
  line-height: 2;
}

/* includeセクション調整 */
.lineup__banner {
  display: none;
}
.join {
  margin-bottom: 1rem;
}

.navCTA {
  padding-top: 11.25rem;
  padding-bottom: 0;
}

.specificattions,
.supply,
.lineup {
  padding-top: 6.25rem;
}
.supplyCards {
  margin-top: 4.8rem;
}
@media screen and (max-width: 767px) {
  .navCTA {
    padding-top: 5rem;
  }
  .specificattions,
  .supply,
  .lineup {
    padding-top: 5rem;
  }
  .specificattions__lists {
    margin-top: 2.5rem;
  }
  .supplyCards {
    margin-top: 2.5rem;
  }
}

/* =============== */
/* ユーティリティ */
/* =============== */
.fz-20 {
  font-size: 1.25rem;
  font-weight: 400;
}
.fz-14 {
  font-size: .875rem;
  font-weight: 400;
}
.fz-12 {
  font-size: .75rem;
  font-weight: 400;
}
.mt-8 {
  margin-top: 0.5rem;
}
.mb-9 {
  margin-bottom: .5625rem;
}