/* ==================================================
  base
================================================== */

.main_content {
  overflow-x: clip;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.main_content img {
  height: auto;
}
.main_content video {
  vertical-align: bottom;
  width: 100%;
}
.main_content sup {
  vertical-align: top;
  position: relative;
  top: .7em;
  font-size: 10px;
  line-height: 0;
}

@media (min-width: 768px) {
  .main_content {
    font-size: 15px;
  }
}



/* ----------------------------------------
  breadcrumbs, title
---------------------------------------- */

.page_title_area_aem {
  display: none;
}

@media (min-width: 1024px) {
  .breadcrumbs.for_pc {
    width: 100vw !important;
    padding: 10px 20px 0;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    background: #f3f3f2;
  }
  .breadcrumbs.for_pc .breadcrumbs_list {
    max-width: 1220px;
    margin-inline: auto;
  }
}



/* ----------------------------------------
  page_top
---------------------------------------- */

/* .page_top {
  border-top: none;
} */





/* ==================================================
  CSS変数
================================================== */

:root {
  --side-padding: 24px;
}

@media (min-width: 768px) {
  :root {
    --side-padding: 32px;
  }
}





/* ==================================================
  common
================================================== */

/* ----------------------------------------
  section_content
---------------------------------------- */

.section_content {
  width: 100%;
  max-width: 1220px;
}



/* ----------------------------------------
  heading
---------------------------------------- */

.main_content h1,
.main_content h2,
.main_content h3,
.main_content h4,
.main_content h5,
.main_content h6 {
  font-weight: normal;
}



/* ----------------------------------------
  title
---------------------------------------- */

/* 320～1280pxの間で可変 */
.title_l {
  font-size: clamp(30px, 2.08vw + 23.33px, 50px);
  line-height: 1.5;
}
.title_m {
  font-size: clamp(22px, 1.67vw + 16.67px, 38px);
  line-height: 1.5;
}
.title_s {
  font-size: clamp(20px, 0.83vw + 17.33px, 28px);
  line-height: 1.5;
}



/* ----------------------------------------
  section_title
---------------------------------------- */

.section_title {
  display: flex;
  flex-direction: column;
  gap: 12px 32px;
}
.section_title h2 {
  font-size: clamp(34px, 2.71vw + 25.33px, 60px); /* 320～1280pxの間で可変 */
  line-height: 1.5;
}
.section_title .jp_text {
  font-size: 11px;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .section_title {
    flex-direction: row;
    align-items: center;
  }
  .section_title .jp_text {
    font-size: 13px;
  }
}



/* ----------------------------------------
  button
---------------------------------------- */

.button.arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 39px;
  padding-right: 24px;
  padding-left: 24px;
  font-size: 14px;
  background: #000;
  border: 1px solid #000;
  border-radius: 4px;
}
.button.arrow span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
}
.button.arrow span::after {
  content: "";
  width: 15px;
  height: 6px;
  background: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 15 6" xmlns="http://www.w3.org/2000/svg"><path d="M15 2.88672L10 -3.26633e-05V5.77347L15 2.88672ZM0 2.88672V3.38672H10.5V2.88672V2.38672H0V2.88672Z" fill="black"/></svg>') no-repeat center center;
  filter: invert(1);
}
.button.arrow:hover {
  background: #fff;
}
.button.arrow:hover span {
  color: #000;
}
.button.arrow:hover span::after {
  filter: invert(0);
}

@media (min-width: 1280px) {
  .button.arrow {
    min-height: 45px;
    font-size: 15px;
  }
}





/* ==================================================
  背景色の切り替え
================================================== */

.main_content {
  transition: background-color 1s ease;
  background-color: #f3f3f2;
}
.main_content.is_hero {
  background-color: #f3f3f2;
}
.main_content.is_benefit {
  background-color: #fff;
}
.main_content.is_lineup {
  background-color: #252629;
  color: #fff;
}
.main_content.is_topics {
  background-color: #fff;
}

/* 背景色を透明にする */
.main_content.is_hero #hero,
.main_content.is_benefit #benefit,
.main_content.is_lineup #lineup,
.main_content.is_topics #topics {
  background-color: transparent !important;
}





/* ==================================================
  fade
================================================== */

/* ----------------------------------------
  単体フェード（js_fade）
---------------------------------------- */

.js_fade {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 1s ease, transform 1s ease;
}
.js_fade.is_show {
  opacity: 1;
  transform: translateY(0);
}



/* ----------------------------------------
  時間差グループ（js_fade_group）
---------------------------------------- */

.js_fade_item {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 1s ease, transform 1s ease;
}
.js_fade_group.is_show .js_fade_item {
  opacity: 1;
  transform: translateY(0);
}





/* ==================================================
  local_navi
================================================== */

.local_navi {
  padding-top: 8px;
}
.local_navi_menu_level1 {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}
.local_navi_menu_level1 > li {
  position: relative;
}
.local_navi_menu_level1 > li:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -1px;
  transform: translateY(-50%);
  width: 2px;
}
.local_navi_menu_level1 > li a {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .4s;
}
.local_navi_menu_level1 > li a::after {
  content: "";
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.local_navi_menu_level1 > li a span {
  display: flex;
  flex-direction: column;
  gap: 8px;
  line-height: 1;
}



/* ----------------------------------------
  sp
---------------------------------------- */

@media (max-width: 1023px) {
  #local_navi .local_navi_menu {
    display: block;
    position: static;
    padding: 0 8px;
  }
  .local_navi_menu_level1 {
    overflow-y: clip;
    background: #E7E6E3;
    border: 2px solid #F6F6F6;
    border-radius: 4px;
  }
  .local_navi_menu_level1 > li {
    flex: 1;
    background: none;
    border: none !important;
  }
  .local_navi_menu_level1 > li:not(:first-child)::before {
    height: calc(100% - 32px);
    background: #F3F3F2;
  }
  .local_navi_menu_level1 > li a {
    gap: 8px;
    padding: 12px 10px;
  }
  .local_navi_menu_level1 > li a::after {
    width: 11px;
    height: 11px;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"><path d="M12.0736 0V17.4399L20.7109 10.1002L22 11.8121L10.011 22V0H12.0736Z"/><path d="M0 11.7308L6.18788 18.3044L7.64622 16.7552L1.45834 10.1815L0 11.7308Z"/></svg>');
  }
  .local_navi_menu_level1 > li a span {
    color: #000;
    font-size: clamp(14px, 1.34vw + 9.71px, 20px); /* 320～768pxの間で可変 */
  }
  .local_navi_menu_level1 .jp_text {
    font-size: clamp(10px, 0.45vw + 8.57px, 12px); /* 320～768pxの間で可変 */
  }
}

@media (min-width: 480px) and (max-width: 1024px) {
  .local_navi_menu_level1 > li a {
    padding: 16px 20px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .local_navi_menu_level1 > li a::after {
    width: 16px;
    height: 16px;
  }
}



/* ----------------------------------------
  pc
---------------------------------------- */

@media (min-width: 1024px) {
  .local_navi {
    width: 100%;
    padding-right: 24px;
    padding-left: 24px;
  }
  .local_navi_menu_level1 {
    overflow: hidden;
    max-width: 1000px;
    margin: 0 auto;
    background: rgb(0 0 0 / 20%);
    border-radius: 8px;
  }
  .local_navi_menu_level1 > li {
    flex: 1;
  }
  .local_navi_menu_level1 > li:not(:first-child)::before {
    height: calc(100% - 44px);
    background: rgb(255 255 255 / 30%);
  }
  .local_navi_menu_level1 > li a {
    gap: 16px;
    min-height: 71px;
  }
  .local_navi_menu_level1 > li a:hover {
    background: rgb(255 255 255 / 40%);
  }
  .local_navi_menu_level1 > li a::after {
    width: 13px;
    height: 13px;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg"><path d="M7.13441 0V10.3054L12.2382 5.96829L13 6.97987L5.91558 13V0H7.13441Z"/><path d="M0 6.93182L3.65647 10.8163L4.51822 9.90079L0.861747 6.01634L0 6.93182Z"/></svg>');
    filter: invert(1);
  }
  .local_navi_menu_level1 > li a span {
    color: #fff;
    font-size: 18px;
  }
  .local_navi_menu_level1 .jp_text {
    font-size: 11px;
    opacity: .6;
  }
}





/* ==================================================
  hero
================================================== */

@media (max-width: 1023px) {
  .hero {
    display: flex;
    flex-direction: column;
  }
  .hero_video { order: 1; }
  .hero_title { order: 2; }
  .local_navi { order: 3; }
  .intro { order: 4; }
}



/* ----------------------------------------
  hero_title
---------------------------------------- */

.hero_title {
  padding: 40px var(--side-padding);
}
.hero_title_inner {
  width: max-content;
  margin: 0 auto;
}
.hero_badge {
  display: flex;
  flex-direction: column;
  gap: 8px 16px;
  margin-top: 32px;
}
.hero_badge a:hover img {
  opacity: 1;
}

@media (min-width: 1024px) {
  .hero_title {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .hero_title_inner {
    width: 100%;
    max-width: 1000px;
  }
  .hero_badge {
    flex-direction: row;
  }
}


/* link_detail -------------------- */

@media (max-width: 1023px) {
  .link_detail {
    display: none;
  }
}

@media (min-width: 1024px) {
  .hero_title .section_content {
    position: relative;
  }
  .link_detail {
    position: absolute;
    right: 0;
    bottom: -130px;
  }
  .link_detail a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-decoration: none;
    line-height: 1;
  }
  .link_detail_text {
    color: #B4B4B4;
    font-size: 14px;
    letter-spacing: 12%;
    writing-mode: vertical-rl;
  }
  .link_detail_arrow {
    position: relative;
    transition: .4s;
    width: 100px;
    height: 100px;
    background: rgb(0 0 0 / 30%);
    border-radius: 50%;
  }
  .link_detail_arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 17px;
    height: 36px;
    background: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 17 36" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.35718 0V34L16.3572 26.1159" stroke="white"/><path d="M5.85718 31.6169L0.353577 26.116" stroke="white"/></svg>') no-repeat center center / cover;
  }
  .link_detail a:hover .link_detail_arrow {
    background: rgb(255 255 255 / 30%);
  }
}



/* ----------------------------------------
  hero_video
---------------------------------------- */

@media (min-width: 1024px) {
  .hero_video {
    max-width: 1440px;
    padding: 0 16px;
    margin: 0 auto -103px;
  }
}



/* ----------------------------------------
  あなたの挑戦を支えるワンランク上の性能を
---------------------------------------- */

.intro_inner {
  display: flex;
}
.intro_desc p {
  line-height: 1.9;
}
.intro_desc p + p {
  margin-top: 1em;
}

@media (max-width: 1023px) {
  .intro {
    padding: 80px 20px clamp(144px, 32.14vw + 41.14px, 288px);
    text-align: center;
  }
  .intro_inner {
    flex-direction: column;
  }
  .intro_title.for_pc {
    display: none;
  }
  .intro_media {
    margin-top: 40px;
  }
  .intro_content {
    order: 3;
    margin-top: 24px;
  }
}

@media (min-width: 1024px) {
  .intro {
    padding: 128px 32px;
  }
  .intro_inner {
    gap: 80px;
  }
  .intro_title.for_sp {
    display: none;
  }
  .intro_content {
    width: calc(50% - 80px);
    max-width: 412px;
    padding-top: 24px;
    margin-left: auto;
  }
  .intro_desc {
    margin-top: 32px;
  }
  .intro_media {
    width: 50%;
  }
}





/* ==================================================
  benefit
================================================== */

/* ----------------------------------------
  benefit_top
---------------------------------------- */

.benefit_top {
  position: relative;
}
.benefit_top_inner {
  position: relative;
  padding: 80px clamp(32px, 7.143vw + 9.14px, 64px) 0;
}
.benefit_top_desc {
  padding-left: clamp(20px, 4.46vw + 5.71px, 40px);
  margin-top: clamp(48px, 10.71vw + 13.71px, 96px);
  border-left: 1px solid #CACACA;
}
.benefit_top_desc p {
  line-height: 1.9;
}
.benefit_top_media {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(calc((-116 / 546) * 100%), calc((-176 / 430) * 100%));
  width: calc((546 / 750) * 100%);
}

@media (max-width: 1023px) {
  .benefit_top_content {
    padding-bottom: clamp(48px, 10.71vw + 13.71px, 96px);
    border-bottom: 1px solid #CACACA;
  }
  .benefit_top_content .section_title {
    flex-direction: column;
    align-items: flex-start;
    width: calc((352 / 622) * 100%);
    margin-left: auto;
  }
  .benefit_top_desc p + p {
    margin-top: 1em;
  }
}

@media (min-width: 1024px) {
  .benefit_top_content {
    width: calc((790 / 1220) * 100%);
    margin-left: auto;
  }
  .benefit_top_inner {
    padding-bottom: 80px;
    border-bottom: 1px solid #CACACA;
  }
  .benefit_top_desc {
    display: flex;
    gap: 40px;
    margin-top: 56px;
  }
  .benefit_top_media {
    transform: translate(calc((-57 / 470) * 100%), calc((-40 / 370) * 100%));
    width: calc((470 / 1220) * 100%);
  }
}



/* ----------------------------------------
  point_list
---------------------------------------- */

.point_list {
  padding: 0 clamp(32px, 7.143vw + 9.14px, 64px) 56px;
}
.point_list > li {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
  position: relative;
  padding: clamp(48px, 10.71vw + 13.71px, 96px) 0;
}
.point_list > li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 20px);
  max-width: 896px;
  height: 1px;
  background: #CACACA;
}
.point_list_en_text p {
  font-size: clamp(18px, 0.833vw + 15.333px, 26px); /* 320～1280pxの間で可変 */
  line-height: 1;
}
.point_list_desc {
  margin-top: 24px;
  color: #535353;
}
.point_list_desc p {
  line-height: 1.9;
}

@media (min-width: 1024px) {
  .point_list {
    max-width: 1220px;
    padding: 0 0 80px;
    margin: 0 auto;
  }
  .point_list > li {
    flex-direction: row;
    column-gap: 80px;
    padding: 80px 32px;
  }
  .point_list > li:nth-child(even) {
    flex-direction: row-reverse;
  }
  .point_list_media,
  .point_list_content {
    flex: 1;
  }
  .point_list_content {
    align-self: flex-end;
  }
  .point_list_desc {
    margin-top: 48px;
  }
}

@media (max-width: 1279px) {
  .point_list_en_text {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 24px;
  }
}

@media (min-width: 1280px) {
  .point_list_media {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 32px;
  }
  .point_list > li:nth-child(even) .point_list_media {
    flex-direction: row-reverse;
  }
  .point_list_media img {
    flex-shrink: 0;
    width: 428px;
  }
  .point_list_en_text {
    margin-bottom: 16px;
  }
}


/* point_stripe -------------------- */

.point_stripe {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  color: #024AD8;
  font-size: 14px;
  line-height: 1;
}
.point_stripe_text {
  transform: translateY(3px);
}
.point_stripe::after {
  content: "";
  height: 34px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
}

/* point1 */
.point1 .point_stripe::after {
  width: 16px;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 16 34" xmlns="http://www.w3.org/2000/svg"><path d="M12.1991 0L0 34H3.79672L16 0H12.1991Z" fill="%23024AD8"/></svg>');
}
/* point2 */
.point2 .point_stripe::after {
  width: 24px;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 34" xmlns="http://www.w3.org/2000/svg"><path d="M20.1991 0L8 34H11.7967L24 0H20.1991Z" fill="%23024AD8"/><path d="M12.1991 0L0 34H3.79672L16 0H12.1991Z" fill="%23024AD8"/></svg>');
}
/* point3 */
.point3 .point_stripe::after {
  width: 32px;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 32 34" xmlns="http://www.w3.org/2000/svg"><path d="M20.1991 0L8 34H11.7967L24 0H20.1991Z" fill="%23024AD8"/><path d="M28.1991 0L16 34H19.7967L32 0H28.1991Z" fill="%23024AD8"/><path d="M12.1991 0L0 34H3.79672L16 0H12.1991Z" fill="%23024AD8"/></svg>');
}

@media (max-width: 1279px) {
  .point_list_media .point_stripe {
    display: none;
  }
}

@media (min-width: 1280px) {
  .point_list_en_text .point_stripe {
    display: none;
  }
}





/* ==================================================
  lineup
================================================== */

.lineup {
  padding: 80px var(--side-padding);
}
.lineup .section_title {
  align-items: center;
  justify-content: center;
}



/* ----------------------------------------
  lineup_list
---------------------------------------- */

.lineup_list {
  display: grid;
  row-gap: 24px;
  margin-top: 56px;
}
.lineup_list > li {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: 0;
}
.lineup_list a {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  background: #252629;
  border-radius: 0 0 4px 4px;
}
.lineup_list a:hover {
  text-decoration: none;
}

@media (min-width: 360px) {
  .lineup_list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 16px;
  }
}

@media (min-width: 1280px) {
  .lineup_list {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* lineup_media -------------------- */

.lineup_media {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 260px;
  background: #d4d4d4;
}
.lineup_media .flag {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  min-height: 26px;
  padding: 0 8px;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  background: #6F00FF;
}
.lineup_media__logo {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
}
.lineup_media__image {
  transition: transform .3s ease;
}
.lineup_list a:hover .lineup_media__image {
  transform: scale(1.2);
  opacity: 1;
}

@media (min-width: 360px) and (max-width: 767px) {
  .lineup_media {
    height: auto;
    padding: 60px 10px 10px;
  }
}


/* lineup_name と lineup_spec の背景とボーダー -------------------- */

.lineup_name,
.lineup_spec {
  transition: all .3s ease;
  background: rgb(65 65 65 / 32%);
  border-style: solid;
  border-color: rgb(255 255 255 / 32%);
}
.lineup_list a:hover .lineup_name,
.lineup_list a:hover .lineup_spec {
  background: rgb(65 65 65 / 54%);
  border-color: rgb(255 255 255 / 54%);
}


/* lineup_name -------------------- */

.lineup_name {
  padding: 24px 16px;
  border-right-width: 1px;
  border-left-width: 1px;
}
.lineup_name h3 {
  margin-bottom: 8px;
  color: #fff;
  font-size: 20px;
  line-height: 1.3;
}
.lineup_name p {
  color: #007DBA;
  font-size: 16px;
  line-height: 1.3;
}

@media (min-width: 768px) {
  .lineup_name {
    padding: 24px;
  }
}


/* lineup_spec -------------------- */

.lineup_spec {
  padding: 0 10px 10px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-radius: 0 0 4px 4px;
}
.lineup_spec_list {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgb(255 255 255 / 32%);
}
.lineup_spec_list > li {
  flex: 1;
  max-width: 80px;
  text-align: center;
}
.lineup_spec_list img {
  opacity: .8;
}
.lineup_spec_list p {
  margin-top: 8px;
  color: #B6B6B6;
  font-size: 14px;
  line-height: 1;
}
.lineup_spec_list p span {
  font-size: 10px;
}

@media (min-width: 768px) {
  .lineup_spec {
    padding-right: 16px;
    padding-left: 16px;
  }
  .lineup_spec_list {
    gap: 16px;
  }
}





/* ==================================================
  topics
================================================== */

.topics {
  padding: 80px var(--side-padding);
}
.topics_list {
  display: grid;
  row-gap: 48px;
  margin-top: 48px;
}
.topics_list_title,
.topics_list_desc,
.topics_list_cta {
  margin-top: 24px;
}
.topics_list_desc {
  color: #535353;
}

@media (max-width: 767px) {
  .topics .section_title {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
  .topics_list_media {
    margin: 0 -24px;
  }
}

@media (min-width: 768px) {
  .topics_list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 16px;
    margin-top: 56px;
  }
  .topics_list_title,
  .topics_list_desc,
  .topics_list_cta {
    padding: 0 16px;
  }
}

@media (min-width: 1280px) {
  .topics_list_title,
  .topics_list_desc {
    margin-top: 40px;
  }
  .topics_list_title,
  .topics_list_desc,
  .topics_list_cta {
    padding: 0 48px;
  }
  .topics_list_cta {
    margin-top: 32px;
  }
}





/* ==================================================
  disclaimer
================================================== */

.disclaimer {
  padding: 40px var(--side-padding);
  background: #F3F3F3;
}
.disclaimer h3 {
  margin-bottom: 32px;
}
.disclaimer h3 span {
  display: inline-block;
  padding: 8px 10px;
  color: #000;
  font-size: 15px;
  line-height: 1;
  border: 1px solid #000;
}
.disclaimer ol {
  counter-reset: disclaimer_num;
  color: #535353;
  font-size: 13px;
  line-height: 1.5;
}
.disclaimer ol > li {
  position: relative;
  padding-left: 3em;
}
.disclaimer ol > li + li {
  margin-top: 24px;
}
.disclaimer ol > li::before {
  counter-increment: disclaimer_num;
  content: "\203B" counters(disclaimer_num, "-") "";
  position: absolute;
  left: 0;
  color: #000;
}

@media (max-width: 1023px) {
  .disclaimer h3 {
    text-align: center;
  }
}

@media (min-width: 1280px) {
  .disclaimer .section_content {
    padding-left: 48px;
  }
}