@charset "utf-8";
:root {
  /* base */
  --content-gutter-outside: 30px;
  --content-width: 1050px;
  /* color */
  --content-primary-bgcolor: #151515;
  --content-secondary-bgcolor: #000;
  --content-primary-color: #fff;
  --content-secondary-color: #C50000;
  /* font */
  --content-primary-font: "Noto Sans JP", sans-serif;
  /* Noto Sans
	Noto Sans JP Regular 400
	Noto Sans JP Medium 500
	Noto Sans JP Bold 700
	Noto Sans JP Black 900
	*/
  --content-secondary-font: "good-times", sans-serif;
  /* Good Times
	Good Times Book 400
	Good Times Regular 500
	Good Times Bold 700
	*/
  --content-primary-fontsize: clamp(10px, 2.67vw, 16px);
  /* easing */
  --linear: cubic-bezier(0.250, 0.250, 0.750, 0.750);
  --ease: cubic-bezier(0.250, 0.100, 0.250, 1.000);
}
/* LP共通汎用
____________________*/
#maincontent {
  overflow: hidden;
}
#container {
  width: 100%;
  margin: 0 auto;
}
.breadCrumb {
  margin: 12px auto !important;
  padding-bottom: 0 !important;
}
.pagetop {
  margin: 0 auto;
  width: 1050px;
}
#pagetop {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 55px;
}
#pagetop a {
  color: #fff;
  background-color: #333;
  border-radius: 5px;
  display: block;
  font-size: 12px;
  line-height: 1.5em;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
}
figure {
  margin: 0;
}
img {
  image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  backface-visibility: hidden;
}
#s_container .sp {
  display: none;
}
#s_container {
  font-family: var(--content-primary-font);
  width: 100%;
  margin: 0 auto;
}
#contentWrap {
  width: 100%;
  font-size: var(--content-primary-fontsize);
  color: var(--content-primary-color);
}
#contentWrap img {
  max-width: 100%;
}
.clearfix:after, #nav1:after, #nav2:after, #nav3:after, #container:after, #contents:after, #footerNav:after {
  content: none !important;
}
@media (max-width: 479px) {
  #s_container .pc {
    display: none;
  }
  #s_container .sp {
    display: block;
  }
}
/* コンテンツ汎用
____________________*/
#contentWrap {
  background: #fff;
}
.content {
  position: relative;
  padding-top: 1px;
  padding-bottom: 1px;
}
.content > * {
  padding-left: var(--content-gutter-outside);
  padding-right: var(--content-gutter-outside);
  box-sizing: border-box;
}
.content .contentInner {
  margin: 0 auto;
  text-align: center;
  width: clamp(320px, calc(100% - var(--content-gutter-outside) * 2), 1300px);
  padding: clamp(50px, 13.33vw, 130px) min(6.5vw, 120px) clamp(50px, 13.33vw, 100px) min(8vw, 150px);
  box-sizing: border-box;
}
.content h2 {}
.fade, .fadeUp, .fadeLeft {
  opacity: 0;
  transition: all .8s;
}
.fadeUp {
  transform: translatey(50px);
}
.fadeLeft {
  transform: translatex(50px);
}
.fade.fadeShow, .fadeUp.fadeShow, .fadeLeft.fadeShow {
  opacity: 1;
  transform: translate(0, 0);
}
@media (max-width: 479px) {
  .content .contentInner {
    padding-left: max(10px, 2.67vw);
    padding-right: max(10px, 2.67vw);
  }
  .content h2 {
    padding: 0 40px;
    margin-top: 20px;
  }
}
/* .mv
____________________*/
.content.mv {
  width: 100%;
  margin-bottom: 0;
  padding-bottom: 0;
  text-align: center;
}
.content.mv::before {
  content: none;
}
.content.mv img {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
/* .lineup
____________________*/
.lineup {
  background: url(img/collab-alelu/bg_lineup_pc.webp) no-repeat;
  background-size: cover;
  background-position: top center;
}
.lineup_box {
  margin: 60px auto 0;
  width: 1050px;
}
.lineup_flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 30px 0 30px 80px;
  position: relative;
}
.cate_bar {
  position: absolute;
  width: 40px;
  height: 100%;
  background: #DDFF13;
  top: 0;
  left: -80px;
  color: #000;
  font-size: 18px;
  font-weight: 900;
  line-height: 40px;
}
.cate_bar span {
  transform: rotate(90deg);
  display: block;
  margin-top: 20px;
}
.lineup_desk .cate_bar img {
  margin-top: 60px;
}
.lineup_note .cate_bar img {
  margin-top: 50px;
}
.model_box {
  width: 470px;
  background: #fff;
  color: #000096;
  border: 2px solid #000096;
  margin-right: 30px;
  padding: 30px;
  text-align: left;
  position: relative;
}
.model_box::before {
  content: "";
  top: 0;
  right: 0;
  border-bottom: 72px solid transparent;
  border-right: 72px solid #000096;
  position: absolute;
  z-index: 10;
}
.model_box:last-of-type {
  margin-right: 0;
}
.model_box .model_catch {
  font-size: 29px;
  font-weight: 800;
  margin-bottom: 20px;
}
.model_box .model_catch span {
  background-color: #DDFF13;
  padding: 4px 10px 6px;
  line-height: 2.1;
}
.model_box .model_img {
  text-align: center;
}
.model_box .model_img img {
  max-width: 80% !important;
}
.model_box .model_name {
  font-size: 26px;
  font-weight: 800;
  margin-top: 20px;
  margin-bottom: 10px;
  line-height: 1.4;
}
.model_box .model_spec {
  font-size: 16px;
  color: #000;
}
.model_box .model_price {
  font-size: 18px;
  margin-bottom: 20px;
  font-weight: bold;
}
.model_box .model_price span {
  font-size: 36px;
  font-weight: 800;
}
.model_box .model_url a {
  display: block;
  background: #000096;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 26px;
  font-weight: bold;
  text-align: center;
  padding: 6px 0 10px;
  position: relative;
  transition: all .2s var(--linear);
}
.model_box .model_url a::after {
  content: "";
  display: inline-block;
  width: 30px;
  height: 18px;
  background: url(img/collab-alelu/icon_arrow_w.webp) no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
}
.model_box .model_url a:hover {
  opacity: 0.6;
}
.model_box.model_wide {
  width: 970px;
  margin-right: 0;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
}
.model_box.model_wide .model_left {
  width: 50%;
}
.model_box.model_wide .model_right {
  width: 50%;
}
@media (max-width: 479px) {
  .lineup {
    background: url(img/collab-alelu/bg_lineup_sp.webp) no-repeat;
    background-size: cover;
    background-position: top center;
  }
  .lineup_box {
    margin: 30px auto 0;
    width: 100%;
  }
  .lineup_flex {
    flex-direction: column;
    margin: 20px 0 0 30px;
    width: calc(100% - 30px);
  }
  .cate_bar {
    width: 24px;
    left: -40px;
    font-size: 16px;
    line-height: 24px;
  }
  .lineup_desk .cate_bar img, .lineup_note .cate_bar img {
    width: 14px !important;
  }
  .model_box {
    width: 100%;
    margin-right: 0;
    padding: 20px;
  }
  .model_box:nth-of-type(n+3) {
    margin-top: 20px;
  }
  .model_box::before {
    border-bottom: 40px solid transparent;
    border-right: 40px solid #000096;
  }
  .model_box .model_catch {
    font-size: 4.8vw;
    margin-bottom: 10px;
  }
  .model_box .model_catch span {
    padding: 2px 6px 2px;
    line-height: 2;
  }
  .model_box .model_name {
    font-size: 4vw;
    margin-top: 10px;
  }
  .model_box .model_spec {
    font-size: 3.6vw;
  }
  .model_box .model_price {
    font-size: 3.8vw;
  }
  .model_box .model_price span {
    font-size: 6vw;
  }
  .model_box .model_url a {
    font-size: 4vw;
  }
  .model_box .model_url a::after {
    background-size: 60%;
    background-position: center;
    right: 15px;
  }
  .model_box .model_url a:hover {
    opacity: 0.6;
  }
  .model_box.model_wide {
    width: 100%;
    margin-bottom: 0;
  }
  .model_box.model_wide .model_right {
    width: 100%;
  }
}
/* .benefits
____________________*/
.benefits {
  background: url(img/collab-alelu/bg_benefit_pc.webp) no-repeat;
  background-size: cover;
  background-position: top center;
  text-align: center;
}
.benefits .contentInner .benefitsList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(80px, 10vw, 120px);
  width: 1050px;
  margin: 90px auto;
}
.benefits .contentInner .benefitsList li {
  width: 100%;
  background: #2E2E2E;
  padding: 30px 60px;
  position: relative;
  border: 2px solid #DDFF13;
}
.benefits .contentInner .benefitsList li .benefits_num {
  position: absolute;
  top: -40px;
  left: -90px;
}
.benefits .contentInner .benefitsList li .benefits_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.benefits .contentInner .benefitsList li .benefits_box span {
  display: block;
  font-size: 36px;
  font-weight: 900;
  color: #DDFF13;
  text-align: right;
  line-height: 1.4;
}
.benefits .contentInner .benefitsList li .benefits_ttl img {
  margin-left: 60px;
}
.benefits .contentInner .benefitsList li figure {
  margin-top: 30px;
}
.benefits .contentInner .benefitsList li figure figcaption {
  margin-top: clamp(10px, 3vw, 30px);
  letter-spacing: .05em;
  font-size: 16px;
}
.benefits .contentInner .benefitsList li figure figcaption a {
  transition: all .2s var(--linear);
  color: #DDFF13 !important;
  text-decoration: underline !important;
}
.benefits .contentInner .benefitsList li figure figcaption a:hover {
  text-decoration: none !important;
  opacity: .7;
}
@media (max-width: 479px) {
  .benefits {
    background: url(img/collab-alelu/bg_benefit_sp.webp) no-repeat;
    background-size: cover;
    background-position: top center;
  }
  .benefits .contentInner .benefitsList {
    gap: clamp(30px, 10vw, 120px);
    width: 100%;
    margin: 30px auto;
  }
  .benefits .contentInner .benefitsList li {
    width: 100%;
    background: #2E2E2E;
    padding: 20px 30px;
  }
  .benefits .contentInner .benefitsList li .benefits_num {
    position: static;
    text-align: left;
    width: 12vw;
  }
  .benefits .contentInner .benefitsList li .benefits_box {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .benefits .contentInner .benefitsList li .benefits_box span {
    font-size: 4vw;
    text-align: left;
    width: 100%;
    margin-top: 10px;
  }
  .benefits .contentInner .benefitsList li .benefits_box span br {
    display: none;
  }
  .benefits .contentInner .benefitsList li:last-of-type .benefits_box span br {
    display: block;
  }
  .benefits .contentInner .benefitsList li .benefits_ttl {
    width: calc(100% - 12vw);
    text-align: left;
  }
  .benefits .contentInner .benefitsList li .benefits_ttl img {
    margin-left: 10px;
    max-height: 10vw;
  }
  .benefits .contentInner .benefitsList li figure {
    margin-top: 10px;
  }
  .benefits .contentInner .benefitsList li figure figcaption {
    font-size: 3vw;
  }
}
/* .profile
____________________*/
.profile {
  background: url(img/collab-alelu/bg_profile_pc.webp) no-repeat;
  background-size: cover;
  background-position: top center;
}
.profile .contentInner .profileDetail {
  width: 720px;
  margin: 0 auto;
}
.profile .contentInner .profileDetail .profileDetailImg {}
.profile .contentInner .profileDetail .profileDetailImg img:nth-of-type(n+2) {
  margin-top: 50px;
}
.profile .contentInner .profileDetail .profileTxt {
  margin-top: 50px;
  font-size: 22px;
}
.profile .contentInner .profileDetail .profileTxt span {
  display: block;
}
.profile .contentInner .profileDetail .profileDetailHead {
  margin-top: 50px;
}
.profile .contentInner .profileDetail .profileDetailHead .profileSns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 670px;
  margin: 0 auto;
}
.profile .contentInner .profileDetail .profileDetailHead .profileSns li {
  width: 32%;
}
.profileSns a {
  display: block;
  background: #DDFF13;
  color: #000 !important;
  text-decoration: none !important;
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  padding: 6px 0 10px;
  position: relative;
  transition: all .2s var(--linear);
}
.profileSns a::after {
  content: "";
  display: inline-block;
  width: 30px;
  height: 18px;
  background: url(img/collab-alelu/icon_arrow_b2.webp) no-repeat;
  background-size: 65%;
  background-position: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 5px;
}
.profileSns a:hover {
  opacity: 0.6;
}
.profile .contentInner .profileLogo {
  display: inline-block;
  margin-top: clamp(50px, 14vw, 140px);
}
@media (max-width: 479px) {
  .profile {
    background: url(img/collab-alelu/bg_profile_sp.webp) no-repeat;
    background-size: cover;
    background-position: top center;
  }
  .profile .contentInner .profileDetail {
    width: 100%;
  }
  .profile .contentInner .profileDetail .profileDetailImg img:nth-of-type(n+2) {
    margin-top: 30px;
    width: 70%;
  }
  .profile .contentInner .profileDetail .profileTxt {
    margin-top: 30px;
    font-size: 4vw;
  }
  .profile .contentInner .profileDetail .profileDetailHead {
    margin-top: 30px;
  }
  .profile .contentInner .profileDetail .profileDetailHead .profileSns {
    flex-direction: column;
    justify-content: center;
    width: 100%;
  }
  .profile .contentInner .profileDetail .profileDetailHead .profileSns li {
    width: 100%;
  }
  .profile .contentInner .profileDetail .profileDetailHead .profileSns li:nth-of-type(n+2) {
    margin-top: 15px;
  }
  .profileSns a {
    font-size: 4vw;
  }
}