/* ===== Reset CSS ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;

  -webkit-text-size-adjust: 100%;
}

main {
  display: block;
  min-width: 1200px;
}

p {
  margin-bottom: 16px;
}

ul,
ol {
  list-style: none;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
  text-decoration: underline;
}
a:hover,
a:active,
a:focus {
  text-decoration: none;
}

abbr[title] {
  border-bottom: 0;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bold;
}

em {
  font-weight: bold;

  font-style: normal;
}

dfn,
cite {
  font-style: normal;
}

code,
kbd,
samp {
  font-family: monospace;
  font-size: 1em;
}

small {
  font-size: 100%;
}

i {
  font-style: italic;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;

  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

img {
  max-width: 100%;
  border-style: none;

  vertical-align: bottom;
}

table {
  width: 100%;

  border-collapse: collapse;
}

button,
input,
optgroup,
select,
textarea {
  border-radius: 0;
  font-family: inherit;
  font-size: 100%;
  line-height: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  border: 0;
  background: none;
  cursor: pointer;

  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: none;
}

legend {
  display: table;
  max-width: 100%;
  color: inherit;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  font: inherit;

  -webkit-appearance: button;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

video {
  display: block;
  max-width: 100%;
}
/* ===== End Reset CSS ===== */

:root {
  --color-text-primary: #2a2b2d;
  --color-white: #fff;
  --color-gray: #7c8b9a;
  --color-accent-primary: #ff9059;
  --color-accent-secondary: #f27349;
  --color-border: #6c758e;
  --color-text-light: #ececec;
  --color-danger: #dc002f;
  --gradient-orange: linear-gradient(90deg, #e57200 0%, #ec4f0e 100%);
  --font-family-numeric: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.u-font-numeric {
  font-family: var(--font-family-numeric);
}

/* body */
body {
  min-width: 1200px;
  color: #2a2b2d;
  font-family: source-han-sans-japanese, "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "MS PGothic", sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

/* header */
.lp-header {
  position: relative;
  min-width: 1200px;
  height: 70px;
}

.lp-header-content {
  display: flex;
  max-width: 1640px;
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;
  justify-content: space-between;
  align-items: center;
}

.lp-header-logo > a {
  display: block;
  line-height: 1;
}

.lp-header-logo {
  margin-bottom: 0;
}

.lp-header-logo img {
  width: 125px;
}

/* footer */
.lp-footer {
  display: flex;
  min-width: 1200px;
  padding-bottom: 24px;
  justify-content: center;
}

.lp-footer__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 60px;
}

.lp-footer__links {
  display: flex;
  gap: 0 60px;
  color: var(--color-text-primary);
  font-size: 1.3rem;
}

.lp-footer__link {
  position: relative;
}

.lp-footer__link a {
  color: var(--color-text-primary);
  text-decoration: none;
}

.lp-footer__link + .lp-footer__link::before {
  position: absolute;
  top: 50%;
  left: -30px;
  display: block;
  width: 1px;
  height: 16px;
  background-color: var(--color-text-primary);
  transform: translateY(-50%);
  content: "";
}

.lp-footer__copy-right {
  position: relative;
  margin-bottom: 0;
  color: var(--color-text-primary);
  font-size: 1.3rem;
  line-height: 1.4;
}

.lp-footer__copy-right::before {
  position: absolute;
  top: 50%;
  left: -30px;
  display: block;
  width: 1px;
  height: 16px;
  background-color: var(--color-text-primary);
  transform: translateY(-50%);
  content: "";
}

/* main */
.lp-layout-container {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background: url(/img/products/lj-s8000/188753001/188753001_img_01_bg.jpg) top 70px left / cover no-repeat;
}

.lp-main-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  margin-bottom: 44px;
  padding-top: 44px;
}

.lp-jumbotron {
  padding: 0 20px;
  margin-inline: auto;
}

.lp-jumbotron-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(40px, calc((98 / 1920) * 100vw), 98px);
}

@media (max-width: 1300px) {
  .lp-jumbotron-inner {
    justify-content: flex-start;
  }
}

.lp-jumbotron-label {
  margin-bottom: 12px;
  color: var(--color-text-primary);
  font-size: clamp(1.8rem, calc((24 / 1920) * 100vw), 2.4rem);
  font-weight: 400;
}

.lp-jumbotron-title {
  margin-bottom: 20px;
  color: var(--color-text-primary);
  font-size: clamp(4.4rem, calc((54 / 1920) * 100vw), 5.4rem);
  font-weight: 700;
  letter-spacing: 1.08px;
}

.lp-jumbotron-subTitle {
  display: block;
  margin-bottom: 11px;
  color: var(--color-text-primary);
  font-size: clamp(2.8rem, calc((38 / 1920) * 100vw), 3.8rem);
  font-weight: 700;
  letter-spacing: 1.14px;
}

.lp-jumbotron-title-highlight {
  display: inline-flex;
  margin-right: 13px;
  padding: 13px 26px;
  background: linear-gradient(270deg, #0080ff -10.87%, #7096ff 111.96%), linear-gradient(270deg, #0d2e88 -10.87%, #0073e5 111.96%), linear-gradient(90deg, #ee8e2f 0%, #ea622a 100%);
  color: var(--color-white);
  font-size: clamp(4.8rem, calc((68 / 1920) * 100vw), 6.8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 2.72px;
}

.lp-jumbotron-title-highlight--large {
  font-size: clamp(5.8rem, calc((78 / 1920) * 100vw), 7.8rem);
  letter-spacing: 1.56px;
}

.lp-jumbotron-body {
  min-width: 0;
  max-width: 984px;
}

.lp-jumbotron-main-image {
  flex-shrink: 0;
}

.lp-slide {
  width: clamp(400px, calc((504 / 1920) * 100vw), 504px);
  max-width: 100%;
}

.lp-slide-inner {
  overflow: hidden;
}

.lp-slide-navigation {
  display: flex;
  margin-top: 24px;
  justify-content: center;
  align-items: center;
}

.lp-slide-pagination {
  position: relative;
  inset: 0;
  margin: 0 24px;
}

.lp-slide-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  margin: 0 10px;
  border-radius: 0;
  background: linear-gradient(90deg, rgba(255, 144, 89, 0.00) 0%, rgba(242, 115, 73, 0.00) 100%), var(--color-gray);
  opacity: 1;
}

.lp-slide-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: linear-gradient(90deg, var(--color-accent-primary) 0%, var(--color-accent-secondary) 100%), var(--color-gray);
}

.lp-slide-button {
  position: relative;
  inset: 0;
  width: 32px;
  height: 32px;
  margin: 0;
  flex-shrink: 0;
  background: linear-gradient(to right, var(--color-accent-primary) 0%, var(--color-accent-secondary) 100%);
}

.lp-slide-button + .lp-slide-button {
  margin-left: 8px;
}

.lp-slide-button::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to left, #e67339, #d9572b);
  transition: opacity 0.3s ease;
  content: "";
  opacity: 0;
}

@media (hover:hover) {
  .lp-slide-button:hover::before {
    opacity: 1;
  }
}

.lp-slide-button::after {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 32px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
}

.lp-slide-button.lp-slide-button-prev::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'><path d='M18.2856 21.7143L12.5713 16.3572L18.2856 10.2857' stroke='white' stroke-width='1.14286' stroke-linecap='square'/></svg>");
}

.lp-slide-button.lp-slide-button-next::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'><path d='M13.7144 21.7143L19.4287 16.3572L13.7144 10.2857' stroke='white' stroke-width='1.14286' stroke-linecap='square'/></svg>");
}

.lp-slide-play-toggle {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-left: 16px;
  background: linear-gradient(to right, var(--color-accent-primary) 0%, var(--color-accent-secondary) 100%);
}

.lp-slide-play-toggle::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to left, #e67339, #d9572b);
  transition: opacity 0.3s ease;
  content: "";
  opacity: 0;
}

@media (hover:hover) {
  .lp-slide-play-toggle:hover::before {
    opacity: 1;
  }
}

.lp-slide-play-toggle::after {
  position: absolute;
  inset: 0;
  display: inline-block;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  transform: scale(0.4);
  transition: opacity 0.3s ease, transform 0.3s ease;
  content: "";
  opacity: 0;
}

/* Pause icon */
.lp-slide-play-toggle.is-playing::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'><path d='M11.4287 20.5714L11.4287 11.4286' stroke='white' stroke-width='1.14286' stroke-linecap='square'/><path d='M20.5713 20.5714L20.5713 11.4286' stroke='white' stroke-width='1.14286' stroke-linecap='square'/></svg>");
  transform: scale(1);
  opacity: 1;
}

/* Play icon */
.lp-slide-play-toggle:not(.is-playing)::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'><path d='M20.5714 16L12.5714 21.7143L12.5714 10.2857L20.5714 16Z' fill='white'/></svg>");
  transform: scale(1);
  opacity: 1;
}


.lp-media-block {
  display: flex;
  margin-bottom: 40px;
  gap: 24px;
  background-color: var(--color-white);
}

.lp-media-section {
  position: relative;
  z-index: 10;
  min-width: clamp(340px, calc((426 / 984) * 100%), 426px);
  padding-top: clamp(30px, calc(30px + ((1vw - 12px) * 2.083)), 45px);
  padding-bottom: clamp(25px, calc(25px + ((1vw - 12px) * 1.806)), 38px);
}

.lp-media-section:first-of-type::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: inline-block;
  width: clamp(282px, calc((484 / 426) * 100%), 484px);
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='484' height='240' viewBox='0 0 484 240' fill='none'%3E%3Cpath d='M0 0H423L484 120L423 240H0V0Z' fill='url(%23paint0_linear_158_779)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_158_779' x1='534' y1='120' x2='0' y2='120' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23E8EBED'/%3E%3Cstop offset='0.3' stop-color='%23FDFDFD'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  background-position: center right;
  background-size: cover;
  background-repeat: no-repeat;
  content: "";
}

.lp-media-section:first-of-type .lp-media-content {
  padding-left: clamp(30px, calc((40 / 1920) * 100vw), 48px);
}

.lp-media-content {
  display: flex;
  margin-top: 17px;
  padding-right: 10px;
  align-items: center;
  gap: 16px;
}
.lp-media-content--wide {
  padding-left: clamp(38px, calc(38px + ((1vw - 12px) * 3.056)), 60px);
}

.lp-media-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(16px, calc(16px + ((1vw - 12px) * 0.5556)), 20px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.4px;
}

.lp-media-heading::before {
  display: inline-block;
  width: 36px;
  height: 1px;
  background: var(--color-border);
  content: "";
}


.lp-media-heading--orange {
  background: var(--gradient-orange);
          background-clip: text;
  color: transparent;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lp-media-heading--orange::before {
  background: var(--gradient-orange);
}

.lp-media-image {
  width: clamp(120px, calc((144 / 1920) * 100vw), 144px);
  flex-shrink: 0;
}

.lp-media-list {
  display: flex;
  flex-direction: column;

  row-gap: 26px;
  row-gap: clamp(16px, calc((18 / 1920) * 100vw), 26px);
}

.lp-media-list-item {
  position: relative;
  padding-left: 11px;
  font-size: clamp(14px, calc(14px + ((1vw - 12px) * 0.278)), 16px);
  font-weight: 400;
  line-height: 1;
}

.lp-media-list-item::before {
  position: absolute;
  left: 0;
  display: inline-block;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, #9091a3 0%, #777b99 100%);
  content: "";
}

.lp-media-list-text {
  display: block;
  margin-bottom: 12px;
}

.lp-media-list-text:last-child {
  margin-bottom: 0;
}

.lp-media-text {
  margin: 0;
  font-size: clamp(16px, calc(16px + ((1vw - 12px) * 0.833)), 22px);
  font-weight: 700;
  letter-spacing: 0.44px;
}

.lp-media-highlight {
  background: var(--gradient-orange);
          background-clip: text;
  color: transparent;
  font-size: clamp(20px, calc(20px + ((1vw - 12px) * 1.111)), 28px);
  letter-spacing: 0.56px;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lp-media-highlight--large {
  vertical-align: -2px;
  font-size: clamp(30px, calc(30px + ((1vw - 12px) * 1.389)), 40px);
  line-height: 1.2;
}

.lp-heading {
  display: flex;
  width: 158px;
  height: 40px;
  margin-bottom: 24px;
  padding-left: 11px;
  align-items: center;
  background: linear-gradient(to right, var(--color-accent-primary) 0%, var(--color-accent-secondary) 100%);
  color: var(--color-white);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(51, 8, 0, 0.20);

  clip-path: polygon(
  0% 0%,
  89.87% 0%,
  100% 50%,
  89.87% 100%,
  0% 100%,
  0.15% 50%
  );
}

.lp-list {
  display: flex;
  margin-bottom: 40px;

  flex-wrap: wrap;
}

.lp-list li {
  position: relative;
  font-size: clamp(16px, calc(16px + ((1vw - 12px) * 0.278)), 18px);
  font-weight: 400;
  line-height: 1.4;
}

.lp-list li + li::before {
  margin: 0 24px;
  content: "/";
}

.lp-text {
    width: clamp(720px, 50vw, 984px);
}

.lp-link {
  color: var(--color-danger);
}

.lp-seminar-grid {
  display: grid;
  grid-template-columns: repeat(5,clamp(140px, calc(140px + ((1vw - 12px) * 6.111)), 184px));
  gap: clamp(12px, calc(12px + ((1vw - 12px) * 0.5556)), 16px);
}

@media (max-width: 1300px) {
  .lp-seminar-grid {
    grid-template-columns: repeat(3,clamp(160px, calc(160px + ((1vw - 12px) * 3.333)), 184px));
  }
}

.lp-seminar-card {
  padding-top: 24px;
  background: radial-gradient(79.58% 61.41% at 49.46% 0%, #3574b2 0%, #1f3766 100%), #081026;
  text-align: center;
}

.lp-seminar-link {
  color: var(--color-white);
  text-decoration: none;
  transition: opacity 0.3s ease;
}

@media (hover:hover) {
  .lp-seminar-link:hover {
    opacity: 0.7;
  }
}

.lp-seminar-date {
  display: flex;
  margin-bottom: 4px;
  justify-content: center;
  align-items: center;
}

.lp-seminar-day {
  font-family: var(--font-family-numeric);
  font-size: clamp(32px, calc(32px + ((1vw - 12px) * 1.111)), 40px);
  font-weight: 700;
  line-height: 1;
}

.lp-seminar-day span {
  font-weight: 400;
}

.lp-seminar-weekday {
  position: relative;
  display: inline-flex;
  width: 28px;
  height: 28px;
  margin-left: 4px;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--color-text-light);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.lp-seminar-time {
  margin-bottom: 23px;
  font-family: var(--font-family-numeric);
  font-weight: 400;
  letter-spacing: 0.48px;
}

.lp-seminar-time {
  font-family: Arial;
  font-size: clamp(16px, calc(16px + ((1vw - 12px) * 0.5556)), 20px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.48px;
}

.lp-seminar-cta {
  position: relative;
  display: block;
  padding: 14px 0;
  background-color: var(--color-danger);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}

.lp-seminar-cta::after {
  position: absolute;
  top: 50%;
  right: 15px;
  display: inline-block;
  width: 6px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10' fill='none'%3E%3Cpath d='M1 9.32971L5 4.82971L1 0.329712' stroke='%23ECECEC'/%3E%3C/svg%3E");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateY(-50%);
  content: "";
}
