/* car-lp-dialog.css */
/* ========== 基本設定・変数 ========== */

.js-scrollArea{
  scroll-behavior: smooth;
}

#lp-dialog {
  --COLOR_BASE_DARK: #000;
  --COLOR_BASE_LIGHT: #fff;
  --COLOR_BRAND_PRIMARY: #009786;
  --COLOR_BRAND_SECONDARY: #00665a;
  --COLOR_ROLE_ACCENT: #ff9926;
  --COLOR_ROLE_ACCENT_2: #ffe000;
  --COLOR_ROLE_LINK: #004090;
  --COLOR_ROLE_IMPORTANT: #ed115e;
  --COLOR_FOREGROUND_DARK: #222222;
  --COLOR_FOREGROUND_LIGHT: #515756;
  --COLOR_BACKGROUND: #f4f4f4;
  --COLOR_BACKGROUND_2: #e2f8f5;
  --COLOR_OUTLINE: #cccccc;
  --SIZE_MODULE_MARGIN: 32px;
  --SIZE_NESTED_MODULE_MARGIN: 16px;
  --FONT_SIZE: 1.5rem;
  --FONT_SIZE_NOTE: 1.3rem;
  --LINE_HEIGHT: 1.5;
  --TRANSITION: 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  --Z_INDEX_LAYER2: 200;
  --Z_INDEX_LAYER1: 100;
  font-family: メイリオ, Meiryo, "ＭＳ Pゴシック", sans-serif;
}
#lp-dialog p{
  margin-bottom: unset;
}

/* ========== グローバルスタイル (ネスト対象外) ========== */
#lp-dialog:has(dialog[open]) {
  overflow-y: clip;
}
@media (width >= 768px){
  #lp-dialog {
    --FONT_SIZE: 1.6rem;
    --FONT_SIZE_NOTE: 1.4rem;
    --LINE_HEIGHT: 1.5;
    --SIZE_MODULE_MARGIN: 40px;
    --SIZE_NESTED_MODULE_MARGIN: 24px;
  }
}

#lp-dialog {
  /* ========== 内にスコープされたスタイル ========== */
  [class^=l-] {
    all: revert;
    font-family: revert;
    font-size: revert;
    line-height: revert;
    margin: revert;
    padding: revert;
    -webkit-text-size-adjust: revert;
  }
  [class^=l-] :where(h1, h2, h3, h4, h5, h6) {
    font-size: revert;
    margin: revert;
  }
  [class^=l-] :where(p) {
    margin: revert;
  }
  [class^=l-] :where(em, b, i, cite) {
    font-style: revert;
  }
  [class^=l-] :where(ul, ol, dl, dd, blockquote) {
    margin: revert;
    padding: revert;
  }
  [class^=l-] :where(a) {
    color: revert;
    text-decoration: revert;
  }
  [class^=l-] :where(button) {
    font-family: revert;
    font-size: revert;
    vertical-align: revert;
  }
  .m-widget-dialog__content > :first-child, .m-list-description__content > :first-child {
    margin-top: 0 !important;
  }
  .m-widget-dialog__content > :last-child, .m-list-description__content > :last-child {
    margin-bottom: 0 !important;
  }
  [class^=l-] :where(*, *:before, *:after) {
    box-sizing: border-box;
  }
  [class^=l-] :where(h1, h2, h3, h4, h5, h6) {
    font-size: var(--FONT_SIZE);
    margin: 0;
  }
  [class^=l-] :where(p, ul, ol, li, dl, dt, dd) {
    margin: 0;
    padding: 0;
  }
  [class^=l-] :where(em) {
    color: var(--COLOR_ROLE_IMPORTANT);
    font-style: normal;
    font-weight: bold;
  }
  [class^=l-] :where(a) {
    color: var(--COLOR_ROLE_LINK);
  }
  [class^=l-] :where(a):hover {
    text-decoration: none;
  }
  [class^=l-] :where(button) {
    color: var(--COLOR_FOREGROUND_DARK);
    font-family: メイリオ, Meiryo, "ＭＳ Pゴシック", sans-serif;
    font-size: var(--FONT_SIZE);
    line-height: var(--LINE_HEIGHT);
  }
  .l-cta__section--left,
  .l-cta__section--right {
    position: relative;
  }
  .l-cta__section--left::before,
  .l-cta__section--right::before {
    background-image: url("/shared/v2/images/icon/icon-ctaSectionDownArrow.svg");
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    height: 17px;
    left: calc(25% - 18px);
    position: absolute;
    top: 8px;
    width: 23px;
  }
  :is(.l-cta__section--left, .l-cta__section--right) .js-showMore__contentInner > :first-child {
    margin-top: 33px;
  }
  .l-cta__section--right::before {
    left: auto;
    right: calc(25% - 14px);
  }
  .m-button {
    --local-foreground: var(--COLOR_BRAND_PRIMARY);
    --local-background: var(--COLOR_BASE_LIGHT);
    --local-outline: var(--COLOR_BRAND_PRIMARY);
    align-items: center;
    background-color: var(--local-background);
    border: 1px solid var(--local-outline);
    border-radius: 4px;
    color: var(--local-foreground);
    cursor: pointer;
    display: inline-flex;
    fill: var(--local-foreground);
    font-size: 1.5rem;
    font-weight: normal;
    justify-content: center;
    min-width: 180px;
    padding: 9px 41px 7px 15px;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--TRANSITION), color var(--TRANSITION);
    vertical-align: middle;
  }
  .m-button:visited {
    color: var(--local-foreground);
  }
  .m-button::after {
    --borderWidth: 2px;
    --innerPosition: calc(100% - var(--borderWidth));
    background-color: var(--COLOR_BRAND_PRIMARY);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 var(--innerPosition), var(--innerPosition) var(--innerPosition), var(--innerPosition) 0);
    content: "";
    display: inline-block;
    height: 9px;
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translate(0, -50%) rotate(-45deg);
    transition: right var(--TRANSITION);
    width: 9px;
  }
  .m-button__smallText {
    align-self: flex-end;
    font-size: 1.2rem;
  }
  .m-button:has(.m-button__smallText) {
    flex-wrap: wrap;
  }
  .m-button--cta {
    --local-foreground: #333;
    --local-background: transparent;
    background: linear-gradient(180deg, rgb(255, 224, 97) 0%, rgb(255, 206, 55) 100%);
    border: none;
    box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.2) inset;
    font-size: 1.6rem;
    font-weight: bold;
    padding: 10px 34px 9px 24px;
  }
  .m-button--cta::after {
    background-color: transparent;
    background-image: url("/shared/v2/images/icon/icon-arrowCta.svg");
    clip-path: none;
    height: 18px;
    right: 8px;
    transform: translateY(-50%);
    width: 18px;
  }
  .m-button--cta .m-button__smallText {
    flex: 1 1 100%;
    font-size: 1.1rem;
    font-weight: bold;
  }
  .m-button-list {
    margin-top: 24px;
    display: grid;
  }
  .m-button-list > * {
    height: 100%;
  }
  .m-button-list__item {
    align-items: center;
    display: flex;
    flex-direction: column;
    list-style: none;
    row-gap: 8px;
  }
  .m-button-list__item :where(.m-button) {
    height: 100%;
  }
  .m-heading-type3 {
    margin-top: 48px;
  }
  .m-heading-type3__title {
    display: block;
    font-size: 2rem;
  }
  .m-heading-type3__title--marker {
    border-left: 3px solid var(--COLOR_BRAND_PRIMARY);
    padding-left: 0.5em;
  }
  .m-list {
    margin-top: 24px;
    display: grid;
  }
  .m-list > * {
    height: 100%;
  }
  .m-list__item {
    list-style: none;
    padding-left: 1em;
    position: relative;
  }
  .m-list__item::before {
    background-color: var(--COLOR_FOREGROUND_DARK);
    border-radius: 50%;
    content: "";
    display: block;
    height: 6px;
    left: 0;
    position: absolute;
    top: 0.55em;
    width: 6px;
  }
  .m-list__text {
    font-size: 1.5rem;
  }
  .m-list-description {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
    width: fit-content;
  }
  .m-list-description__item {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    font-size: 1.5rem;
    gap: 8px;
    position: relative;
    width: 100%;
  }
  .m-list-description__title,
  .m-list-description__content {
    flex: 0 0 auto;
    width: 100%;
  }
  .m-list-description__title {
    font-weight: bold;
  }
  .m-list-description--marker {
    gap: 24px;
    margin-top: 24px;
  }
  .m-list-description--marker :where(.m-list-description__title) {
    border-left: 3px solid var(--COLOR_ROLE_ACCENT);
    padding-left: 0.5em;
  }
  .m-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
  }
  .m-text__item {
    flex: 0 0 auto;
    font-size: 1.5rem;
  }
  .m-widget-dialog {
    background-color: transparent;
    border: 0;
    display: none;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    overscroll-behavior: none;
    padding: 0 19px;
    scrollbar-width: none;
    width: 100%;
  }
  .m-widget-dialog[open] {
    align-items: center;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    max-width: 650px;
  }
  .m-widget-dialog::backdrop {
    background-color: rgba(34, 34, 34, 0.7);
  }
  .m-widget-dialog__inner {
    position: relative;
  }
  .m-widget-dialog__content {
    background-color: var(--COLOR_BASE_LIGHT);
    max-height: 60vh;
    max-width: 960px;
    min-height: 180px;
    overflow-y: auto;
    padding: 16px;
    width: 100%;
    box-sizing: border-box;
  }
  .m-widget-dialog__closeButton {
    background-color: var(--COLOR_BASE_LIGHT);
    border: 0;
    border: 1px solid var(--COLOR_BRAND_PRIMARY);
    border-radius: 4px;
    bottom: calc(100% + 12px);
    cursor: pointer;
    display: block;
    height: 44px;
    overflow: hidden;
    padding: 44px 0 0 44px;
    position: absolute;
    right: 0;
    transition: background-color var(--TRANSITION);
    width: 44px;
  }
  .m-widget-dialog__closeButton::before {
    background-image: url("data:image/svg+xml;base64,IDxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgZmlsbD0iIzAwOTc4NiI+PHBhdGggZD0iTTEwMCAxMy4zMzNsLTEzLjMzMi0xMy4zMzMtMzYuNjY5IDM2LjY2OS0zNi42NjctMzYuNjY3LTEzLjMzMiAxMy4zMzIgMzYuNjY3IDM2LjY2Ny0zNi42NjUgMzYuNjY1IDEzLjMzMyAxMy4zMzIgMzYuNjY0LTM2LjY2NSAzNi42NjYgMzYuNjY3IDEzLjMzMy0xMy4zMzMtMzYuNjY2LTM2LjY2NiAzNi42NjgtMzYuNjY4eiIvPjwvc3ZnPg==");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 20px;
    inset: 0;
    margin: auto;
    position: absolute;
    transition: background-image var(--TRANSITION);
    width: 20px;
  }
  .js-showMore {
    overflow: clip;
  }
  .js-showMore:has(> .js-showMore__content--hide) {
    position: relative;
  }
  .js-showMore:has(> .js-showMore__content--hide)::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 48%, rgb(255, 255, 255) 100%);
    bottom: 0;
    content: "";
    height: 160px;
    pointer-events: none;
    position: absolute;
    width: 100%;
  }
  .js-showMore__content {
    --max-content-height: 1fr;
    --min-content-height: 0fr;
    display: grid;
    grid-template-rows: var(--max-content-height);
    transition: grid-template-rows var(--TRANSITION);
  }
  .js-showMore__content--hide {
    grid-template-rows: var(--min-content-height);
  }
  .js-showMore__contentInner {
    grid-row: 1/3;
  }
  .js-showMore__button {
    position: relative;
    z-index: var(--Z_INDEX_LAYER1);
  }
  .js-showMore__button .m-button {
    filter: drop-shadow(0 3px 10px rgba(81, 87, 86, 0.2));
    z-index: var(--Z_INDEX_LAYER1);
  }
  .js-scrollArea__hint {
    transition: opacity var(--TRANSITION);
  }
  .js-scrollArea--scrolledRightEnd .js-scrollArea__hint {
    opacity: 0;
  }
  .hidden {
    display: none !important;
  }
  .justify-center {
    justify-content: center;
  }

  @media (768px <= width < 1101px){
    .m-widget-dialog__inner {
      max-width: 90%;
    }
  }
  @media (width >= 768px){
    .m-button {
      font-size: 1.6rem;
      min-width: 200px;
      padding: 12px 54px 10px 24px;
    }
    .m-button::after {
      right: 26px;
    }
    .m-button__smallText {
      font-size: 1.4rem;
    }
    .m-button--cta {
      box-shadow: 0 -4px 0 0 rgba(0, 0, 0, 0.2) inset;
      font-size: 1.8rem;
      min-width: 352px;
      padding: 8px 46px 8px 40px;
    }
    .m-button--cta::after {
      right: 16px;
    }
    .m-button--cta .m-button__smallText {
      font-size: 1.4rem;
    }
    .m-button-list {
      gap: 16px;
      grid-template-columns: repeat(var(--col-pc-buttonList, 1), minmax(1px, 1fr));
      margin-top: 32px;
    }
    .m-button-list[style*="--col-pc-buttonList: auto;"] {
      display: flex;
      flex-wrap: wrap;
    }
    .m-button-list[style*="--col-pc-buttonList: auto;"] > * {
      flex: 0 0 auto;
      max-width: 100%;
    }
    .m-button-list:not([style*="--col-pc-buttonList: auto;"]) :where(.m-button) {
      min-width: auto;
      width: 100%;
      box-sizing: border-box;
    }
    .m-heading-type3 {
      margin-top: 56px;
    }
    .m-heading-type3__title {
      font-size: 2.4rem;
    }
    .m-heading-type3__subText {
      font-size: 1.4rem;
    }
    .m-list__text {
      font-size: 1.6rem;
    }
    .m-list-description--marker :where(.m-list-description__title) {
      font-size: 1.6rem;
    }
    .m-text__item {
      font-size: 1.6rem;
    }
    .m-widget-dialog {
      padding: 0;
    }
    .m-widget-dialog__inner {
      min-height: 200px;
    }
    .m-widget-dialog__content {
      padding: 32px;
      box-sizing: border-box;
    }
    .md\:hidden {
      display: none !important;
    }
    .md\:mx-auto {
      margin-left: auto;
      margin-right: auto;
    }
  }

  @media (width < 768px){
    .m-button-list {
      gap: 16px;
      grid-template-columns: repeat(var(--col-sp-buttonList, 1), minmax(1px, 1fr));
    }
    .m-button-list[style*="--col-sp-buttonList: auto;"] {
      display: flex;
      flex-wrap: wrap;
    }
    .m-button-list[style*="--col-sp-buttonList: auto;"] > * {
      flex: 0 0 auto;
      max-width: 100%;
    }
    .m-button-list:not([style*="--col-sp-buttonList: auto;"]) :where(.m-button) {
      min-width: auto;
      width: 100%;
      box-sizing: border-box;
    }
  }

  @media (hover: hover){
    .m-button:hover, .m-button:focus {
      --local-foreground: var(--COLOR_BRAND_SECONDARY);
      --local-background: var(--COLOR_BACKGROUND_2);
      --local-outline: var(--COLOR_BRAND_PRIMARY);
      color: var(--local-foreground);
    }
    :where(.m-button:not(.m-button--more, .m-button--cta)):hover::after, :where(.m-button:not(.m-button--more, .m-button--cta)):focus::after {
      right: 24px;
    }
    .m-button--cta:hover, .m-button--cta:focus {
      --local-foreground: #333;
      background: linear-gradient(180deg, rgb(255, 206, 55) 0%, rgb(255, 224, 97) 100%);
    }
    .m-widget-dialog__closeButton:hover, .m-widget-dialog__closeButton:focus {
      background-color: var(--COLOR_BRAND_PRIMARY);
    }
    .m-widget-dialog__closeButton:hover::before, .m-widget-dialog__closeButton:focus::before {
      background-image: url("data:image/svg+xml;base64,IDxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgZmlsbD0iI2ZmZiI+PHBhdGggZD0iTTEwMCAxMy4zMzNsLTEzLjMzMi0xMy4zMzMtMzYuNjY5IDM2LjY2OS0zNi42NjctMzYuNjY3LTEzLjMzMiAxMy4zMzIgMzYuNjY3IDM2LjY2Ny0zNi42NjUgMzYuNjY1IDEzLjMzMyAxMy4zMzIgMzYuNjY0LTM2LjY2NSAzNi42NjYgMzYuNjY3IDEzLjMzMy0xMy4zMzMtMzYuNjY2LTM2LjY2NiAzNi42NjgtMzYuNjY4eiIvPjwvc3ZnPg==");
    }
  }
}