/* アユタヤ ABOUT：配置・色・文字・アニメーション・レスポンシブ設定 */

.fa-phone:before {
 content: "\f095";
 }


[class*="material-symbols-"] {

    font-style: normal;

    font-variation-settings: "FILL" var(--material-symbol-fill, 0), "wght" var(--material-symbol-weight, 400);

    visibility: hidden;

  }


  body[data-material-symbols-loaded="true"] [class*="material-symbols-"] {

    visibility: visible;

  }


:root {
 --s-font-ad99516a:'Noto Serif JP';
--s-font-889455e3:'Noto Sans JP';
 }


html {

  height: 100%;

  padding: 0;

  margin: 0;

  scroll-behavior: smooth;

  -webkit-font-smoothing: antialiased;

}


@media (prefers-reduced-motion: reduce) {

  html {

    scroll-behavior: auto;

  }

}


body {

  display: block;


  min-height: 100vh;

  min-height: 100dvh;

  background: #fff;

  font-family: sans-serif;

  line-height: 1;

  transition: background 0.5s cubic-bezier(0.4, 0.4, 0, 1);

  padding: 0;

  margin: 0;

}


a {

  background: transparent;

  color: rgb(51, 51, 51);

  font-size: 100%;

  margin: 0;

  padding: 0;

  vertical-align: baseline;

  border: none;

  text-decoration: none;

}


button {

  background: transparent;

  color: inherit;

  font-size: 100%;

  margin: 0;

  padding: 0;

  vertical-align: baseline;

  border: none;

}


button {

  pointer-events: all;

  cursor: pointer;

  user-select: none;

}


hr {

  border: 0;

  border-top: 1px solid #ccc;

  display: block;

  height: 1px;

  margin: 1em 0;

  padding: 0;

}


h1, h2, h3, h4, h5, h6 {

  color: rgb(51, 51, 51);

  line-height: 1;

}


.img,
.box,
.text,
.frame,
.section,
.section-inner,
.input,
.toggle,
.icon,
.video,
.video-container {

  border: 0;

  box-sizing: border-box;

  max-width: 100%;

  z-index: 0;

  position: relative;

  margin: 0;

  padding: 0;

  flex: none;

}


.img {

  height: auto;

}


.img,
.box,
.text,
.frame,
.section,
.section-inner,
.toggle,
.icon,
.video-container {

  transition: all 0.3s cubic-bezier(0.4, 0.4, 0, 1);

  transition-property: all, --g-angle, --g-color-0, --g-position-0, --g-color-1, --g-position-1, --g-color-2, --g-position-2, --g-color-3, --g-position-3, --g-color-4, --g-position-4, --g-color-5, --g-position-5, --g-color-6, --g-position-6, --g-color-7, --g-position-7, --g-color-8, --g-position-8, --g-color-9, --g-position-9, --g-color-10, --g-position-10, --g-color-11, --g-position-11;

  list-style: none;

  margin: 0;

  padding: 0;

  text-decoration: none;

  align-content: center;

}


.input,
.select {


  font-family: inherit !important;

  font-size: inherit;

  font-style: inherit;

  font-weight: inherit;

  letter-spacing: inherit;

  line-height: inherit;

}


:where(textarea.input) {

  resize: vertical;

}


input[type="email"],
input[type="tel"],
input[type="text"],
select,
textarea {

  -webkit-appearance: none;

}


.input,
.richText * {

  transition: all 0.3s cubic-bezier(0.4, 0.4, 0, 1);

  transition-property: all, --g-angle, --g-color-0, --g-position-0, --g-color-1, --g-position-1, --g-color-2, --g-position-2, --g-color-3, --g-position-3, --g-color-4, --g-position-4, --g-color-5, --g-position-5, --g-color-6, --g-position-6, --g-color-7, --g-position-7, --g-color-8, --g-position-8, --g-color-9, --g-position-9, --g-color-10, --g-position-10, --g-color-11, --g-position-11;

  list-style: none;

  margin: 0;

  padding: 0;

  text-decoration: none;

  align-content: normal;

  z-index: 0;

}


.input:where(textarea) {

  transition-property: background, border, border-radius, box-shadow, color, filter, opacity, outline, transform, translate, scale, rotate, --g-angle, --g-color-0, --g-position-0, --g-color-1, --g-position-1, --g-color-2, --g-position-2, --g-color-3, --g-position-3, --g-color-4, --g-position-4, --g-color-5, --g-position-5, --g-color-6, --g-position-6, --g-color-7, --g-position-7, --g-color-8, --g-position-8, --g-color-9, --g-position-9, --g-color-10, --g-position-10, --g-color-11, --g-position-11;

}


.richText s,
.richText del,
.richText u {

  text-decoration: revert;

}


.box,
.frame,
.section,
.toggle,
.video-container {

  display: flex;

  flex-direction: column;

  align-items: center;

}


.img,
.text,
.icon {

  align-items: center;

  display: flex;

  flex-direction: row;

  justify-content: center;

  overflow-wrap: anywhere;

  word-break: break-word;

  z-index: 0;

}


.box::-webkit-scrollbar {

  display: none;

}


:where(table.studio-table).box {

  display: table;


  max-width: none;

  min-width: max-content;

  flex-direction: unset;

  align-items: unset;

  align-content: unset;

}


:where(table.box) {

  border-collapse: collapse;

  border-spacing: 0;

}

:where(thead).box {

  display: table-header-group;

}

:where(tbody).box {

  display: table-row-group;

}

:where(tr).box {

  display: table-row;

}

:where(th).box,
:where(td).box {

  display: table-cell;

}


:where(th.box, td.box) {

  text-align: left;

  vertical-align: middle;

  height: inherit;

}

:where(colgroup).box {

  display: table-column-group;

}

:where(col).box {

  display: table-column;

}


.richText {

  display: block;


  flex-direction: column;

  flex: none;


  position: relative;

  z-index: 0;

  word-break: break-word;

  -webkit-font-smoothing: antialiased;

  box-sizing: border-box;

  line-height: 1;


* {

    border: 0;

    list-style: none;

    margin: 0;

    padding: 0;

    text-decoration: none;

    -webkit-font-smoothing: antialiased;

    -webkit-backface-visibility: hidden;

    box-sizing: border-box;

    word-spacing: 1px;


    backface-visibility: visible;

    color: inherit;

    font-family: inherit;

    font-size: inherit;

    font-style: inherit;

    font-weight: inherit;

    letter-spacing: inherit;

    line-height: inherit;

    text-align: inherit;

  }

  h1 {

    font-size: 3em;

    font-weight: 700;

    margin: 20px 0;

  }


  h2,
    h3 {

    font-weight: 700;

    margin: 10px 0;

  }

  h2 {

    font-size: 2em;

  }

  h3 {

    font-size: 1em;

  }

  h4,
    h5,
    h6 {

    display: block;

    font-size: 1em;

    margin: 10px 0;

  }

  h4,
    h5 {

    font-weight: 600;

  }

  h6 {

    font-weight: 500;

  }

p {

    margin: 10px 0;

  }

> p {

    min-height: 1em;

  }


  hr {

    border-top: 1px solid #ccc;

    margin: 10px 0;

  }


  em {

    font-style: italic;

  }


> blockquote {

    border-left: 3px solid rgba(0, 0, 0, 0.15);

    font-style: italic;

    margin: 10px 0;

    padding: 10px 15px;

  }


  strong {

    color: inherit;

    display: inline;

    font-family: inherit;

    font-weight: 900;

  }


> [data-type="table_of_contents"] {

    line-height: 1;

    list-style: none;

    padding: 24px 24px 8px;

    margin: 0;

    border-radius: 2px;

    font-size: 16px;

    background-color: #f5f5f5;

    text-decoration: underline;

    color: #616161;


  .toc_list {

      margin: 0;

      padding: 0;

    }


  .toc_item {

      font-size: inherit;

      font-weight: inherit;

      color: currentColor;

      list-style: none;

      margin: 0 0 16px 0;


      padding-left: 2rem;


    &.toc_item--1 {

        margin: 0 0 16px 0;


        padding-left: 0;

      }

    &.toc_item--2 {

        margin: 0 0 16px 0;

        padding-left: 2rem;

      }

    &.toc_item--3 {

        margin: 0 0 16px 0;

        padding-left: 4rem;

      }


    > a {

        font-size: inherit;

        font-weight: inherit;

        color: currentColor;

        border: none;

        text-decoration: none;

      }

    }

  }


> [data-type="table"] {

    overflow-x: auto;

    p {

      white-space: pre-line;

      word-break: break-all;

    }

  }

  table {

    table-layout: auto;

    border-collapse: collapse;

    border-spacing: unset;

    margin: 10px 0 10px 0;

    font-size: 14px;

    border: 1px solid #f2f2f2;

    color: #1a1a1a;

    line-height: 1.4;

  }

  th {

    background: rgba(245, 245, 245, 0.5);

  }

  th,
    td {

    min-width: 100px;

    max-width: 240px;

    border: 1px solid #f2f2f2;

    padding: 12px;


    p {

      margin: 0;

    }

  }


p > code {

    background: #eee;

    border: 1px solid rgba(0, 0, 0, 0.1);

    border-radius: 6px;

    display: inline;

    margin: 2px;

    padding: 0 5px;

  }

  ol {

    margin: 0 0 0 20px;

    padding: 0;

    list-style: none;

    li {

      list-style: decimal;

      margin: 10px 0;

    }

  }


  ul {

    margin: 0 0 0 20px;

    padding: 0;

    list-style: none;

    li {

      list-style: disc;

      margin: 10px 0;

    }

  }

  li > p {

    margin: 0;

  }

  pre {

    margin: 20px 0 20px 0;

    padding: 25px 35px 25px 35px;

    background: #eeeeee;

    border-radius: 6px;

    white-space: pre-wrap;

    font-family: Menlo, Monaco, "Courier New", monospace;


    code {

      padding: 0;

      border: none;

    }

  }


  img,
    video {

    height: auto;

    max-width: 100%;

    vertical-align: bottom;

  }


  a {

    color: #007cff;

    display: inline;

    text-decoration: underline;

  }


  [data-type="embed_code"] {

    position: relative;

    margin: 20px 0;

    .height-adjuster {

      position: relative;


      .wrapper {

        position: relative;

      }


      .wrapper[style*='padding-top'] {

        iframe {

          position: absolute;

          top: 0;

          left: 0;

          width: 100%;

          height: 100%;

        }

      }

    }

  }

}


.section {

  width: 100%;

}


.section-inner {

  position: static;

}


dialog {

  border: none;

  background-color: transparent;

  padding: 0;

  margin: 0;

  width: 100%;

  height: 100%;

  position: fixed;

  max-width: none;

  max-height: none;

  box-sizing: border-box;


  overflow: visible;


&[open] {

    display: flex;

  }


&::backdrop {

    background: transparent;

  }

}


.modal-container {


  box-sizing: border-box;

  position: relative;

  width: 100%;

  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  pointer-events: none;

  z-index: 1;

}


.modal-container > * {

  pointer-events: auto;

}


.modal-backdrop {

  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: 0;

}


dialog[open][data-modal-transition-base]:not(.modal-ready) .modal-container * {

  transition: none !important;

}


dialog[open][data-modal-transition-base] > .modal-container {

  opacity: 0;


}


dialog[open][data-modal-transition-base] > .modal-backdrop {

  opacity: 0;

}


dialog[open][data-modal-transition-base].modal-ready > .modal-container {

  opacity: 1;

  transform: none;

  transition: opacity 400ms cubic-bezier(.4,.4,0,1), transform 400ms cubic-bezier(.4,.4,0,1);

}


dialog[open][data-modal-transition-base].modal-ready > .modal-backdrop {

  opacity: 1;

  transition: opacity 400ms cubic-bezier(.4,.4,0,1);

}


dialog[data-modal-transition-base].modal-closing > .modal-container {

  opacity: 0;

  transition: opacity 400ms cubic-bezier(.4,.4,0,1), transform 400ms cubic-bezier(.4,.4,0,1);

}


dialog[data-modal-transition-base].modal-closing > .modal-backdrop {

  opacity: 0;

  transition: opacity 400ms cubic-bezier(.4,.4,0,1);

}


@media (prefers-reduced-motion: reduce) {

  dialog[open][data-modal-transition-base] > .modal-container,
  dialog[open][data-modal-transition-base].modal-ready > .modal-container,
  dialog[data-modal-transition-base].modal-closing > .modal-container {

    transition: none;

    opacity: 1;

    transform: none !important;

  }


  dialog[open][data-modal-transition-base] > .modal-backdrop,
  dialog[open][data-modal-transition-base].modal-ready > .modal-backdrop,
  dialog[data-modal-transition-base].modal-closing > .modal-backdrop {

    transition: none;

    opacity: 1;

  }

}


.image__bg-container {

  container-type: size;

  container-name: image-container;

  display: block;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

  z-index: -2;

  border-radius: inherit;

  transition: inherit;

}


.image__bg-container::before {

  content: '';

  display: block;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-image: var(--img-current);

  background-position: 50%;

  background-size: cover;

  border-radius: inherit;

  transition-duration: inherit;

  transition-timing-function: inherit;

  transition-delay: inherit;


  transition-property:
    filter, backdrop-filter, opacity, color,
    background-color, background-position, background-size,
    border, border-color, border-width, border-radius,
    outline, outline-color, outline-width, outline-offset,
    box-shadow, text-shadow, transform, transform-origin,
    width, height, margin, padding,
    top, left, right, bottom, z-index, gap,
    letter-spacing, word-spacing, line-height, font-size, font-weight,
    clip-path;

}


@media (min-resolution: 1.5dppx) {


  .image--horizontal .image__bg-container::before {

    --img-current: var(--img-small);

  }


  @container (aspect-ratio < 1) and (width < 300px) {

    .image--horizontal .image__bg-container::before {

      --img-current: var(--img-middle);

    }

  }


  @container (aspect-ratio < 0.5) and (width < 300px) {

    .image--horizontal .image__bg-container::before {

      --img-current: var(--img-regular);

    }

  }


  @container (300px <= width) and (aspect-ratio >= 1) {

    .image--horizontal .image__bg-container::before {

      --img-current: var(--img-middle);

    }

  }


  @container (300px <= width < 500px) and (aspect-ratio < 1) {

    .image--horizontal .image__bg-container::before {

      --img-current: var(--img-regular);

    }

  }


  @container (300px <= width < 500px) and (aspect-ratio < 0.5) {

    .image--horizontal .image__bg-container::before {

      --img-current: var(--img-origin);

    }

  }


  @container (500px <= width) and (aspect-ratio >= 1) {

    .image--horizontal .image__bg-container::before {

      --img-current: var(--img-regular);

    }

  }


  @container (500px <= width < 901px) and (aspect-ratio < 1) {

    .image--horizontal .image__bg-container::before {

      --img-current: var(--img-origin);

    }

  }


  @container (901px <= width) {

    .image--horizontal .image__bg-container::before {

      --img-current: var(--img-origin);

    }

  }


  .image--vertical .image__bg-container::before {

    --img-current: var(--img-small);

  }


  @container (aspect-ratio < 0.5) and (width < 300px) {

    .image--vertical .image__bg-container::before {

      --img-current: var(--img-middle);

    }

  }


  @container (aspect-ratio < 0.25) and (width < 300px) {

    .image--vertical .image__bg-container::before {

      --img-current: var(--img-regular);

    }

  }


  @container (300px <= width < 500px) and (aspect-ratio >= 0.5) {

    .image--vertical .image__bg-container::before {

      --img-current: var(--img-middle);

    }

  }


  @container (300px <= width < 500px) and (aspect-ratio < 0.5) {

    .image--vertical .image__bg-container::before {

      --img-current: var(--img-regular);

    }

  }


  @container (300px <= width < 500px) and (aspect-ratio < 0.25) {

    .image--vertical .image__bg-container::before {

      --img-current: var(--img-origin);

    }

  }


  @container (500px <= width < 901px) and (aspect-ratio >= 0.5) {

    .image--vertical .image__bg-container::before {

      --img-current: var(--img-regular);

    }

  }


  @container (500px <= width < 901px) and (aspect-ratio < 0.5) {

    .image--vertical .image__bg-container::before {

      --img-current: var(--img-origin);

    }

  }


  @container (901px <= width) {

    .image--vertical .image__bg-container::before {

      --img-current: var(--img-origin);

    }

  }

}


@media (min-resolution: 1dppx) and (max-resolution: 1.5dppx) {


  .image--horizontal .image__bg-container::before {

    --img-current: var(--img-small);

  }


  @container (aspect-ratio < 1) and (width < 400px) {

    .image--horizontal .image__bg-container::before {

      --img-current: var(--img-middle);

    }

  }


  @container (aspect-ratio < 0.5) and (width < 400px) {

    .image--horizontal .image__bg-container::before {

      --img-current: var(--img-regular);

    }

  }


  @container (400px <= width) and (aspect-ratio >= 1) {

    .image--horizontal .image__bg-container::before {

      --img-current: var(--img-middle);

    }

  }


  @container (400px <= width < 667px) and (aspect-ratio < 1) {

    .image--horizontal .image__bg-container::before {

      --img-current: var(--img-regular);

    }

  }


  @container (400px <= width < 667px) and (aspect-ratio < 0.5) {

    .image--horizontal .image__bg-container::before {

      --img-current: var(--img-origin);

    }

  }


  @container (667px <= width) and (aspect-ratio >= 1) {

    .image--horizontal .image__bg-container::before {

      --img-current: var(--img-regular);

    }

  }


  @container (667px <= width < 1201px) and (aspect-ratio < 1) {

    .image--horizontal .image__bg-container::before {

      --img-current: var(--img-origin);

    }

  }


  @container (1201px <= width) {

    .image--horizontal .image__bg-container::before {

      --img-current: var(--img-origin);

    }

  }


  .image--vertical .image__bg-container::before {

    --img-current: var(--img-small);

  }


  @container (aspect-ratio < 0.5) and (width < 400px) {

    .image--vertical .image__bg-container::before {

      --img-current: var(--img-middle);

    }

  }


  @container (aspect-ratio < 0.25) and (width < 400px) {

    .image--vertical .image__bg-container::before {

      --img-current: var(--img-regular);

    }

  }


  @container (400px <= width < 667px) and (aspect-ratio >= 0.5) {

    .image--vertical .image__bg-container::before {

      --img-current: var(--img-middle);

    }

  }


  @container (400px <= width < 667px) and (aspect-ratio < 0.5) {

    .image--vertical .image__bg-container::before {

      --img-current: var(--img-regular);

    }

  }


  @container (400px <= width < 667px) and (aspect-ratio < 0.25) {

    .image--vertical .image__bg-container::before {

      --img-current: var(--img-origin);

    }

  }


  @container (667px <= width < 1201px) and (aspect-ratio >= 0.5) {

    .image--vertical .image__bg-container::before {

      --img-current: var(--img-regular);

    }

  }


  @container (667px <= width < 1201px) and (aspect-ratio < 0.5) {

    .image--vertical .image__bg-container::before {

      --img-current: var(--img-origin);

    }

  }


  @container (1201px <= width) {

    .image--vertical .image__bg-container::before {

      --img-current: var(--img-origin);

    }

  }

}


@media (max-resolution: 1dppx) {


  .image--horizontal .image__bg-container::before {

    --img-current: var(--img-small);

  }


  @container (aspect-ratio < 1) and (width < 600px) {

    .image--horizontal .image__bg-container::before {

      --img-current: var(--img-middle);

    }

  }


  @container (aspect-ratio < 0.5) and (width < 600px) {

    .image--horizontal .image__bg-container::before {

      --img-current: var(--img-regular);

    }

  }


  @container (600px <= width) and (aspect-ratio >= 1) {

    .image--horizontal .image__bg-container::before {

      --img-current: var(--img-middle);

    }

  }


  @container (600px <= width < 1000px) and (aspect-ratio < 1) {

    .image--horizontal .image__bg-container::before {

      --img-current: var(--img-regular);

    }

  }


  @container (600px <= width < 1000px) and (aspect-ratio < 0.5) {

    .image--horizontal .image__bg-container::before {

      --img-current: var(--img-origin);

    }

  }


  @container (1000px <= width) and (aspect-ratio >= 1) {

    .image--horizontal .image__bg-container::before {

      --img-current: var(--img-regular);

    }

  }


  @container (1000px <= width < 1801px) and (aspect-ratio < 1) {

    .image--horizontal .image__bg-container::before {

      --img-current: var(--img-origin);

    }

  }


  @container (1801px <= width) {

    .image--horizontal .image__bg-container::before {

      --img-current: var(--img-origin);

    }

  }


  .image--vertical .image__bg-container::before {

    --img-current: var(--img-small);

  }


  @container (aspect-ratio < 0.5) and (width < 600px) {

    .image--vertical .image__bg-container::before {

      --img-current: var(--img-middle);

    }

  }


  @container (aspect-ratio < 0.25) and (width < 600px) {

    .image--vertical .image__bg-container::before {

      --img-current: var(--img-regular);

    }

  }


  @container (600px <= width < 1000px) and (aspect-ratio >= 0.5) {

    .image--vertical .image__bg-container::before {

      --img-current: var(--img-middle);

    }

  }


  @container (600px <= width < 1000px) and (aspect-ratio < 0.5) {

    .image--vertical .image__bg-container::before {

      --img-current: var(--img-regular);

    }

  }


  @container (600px <= width < 1000px) and (aspect-ratio < 0.25) {

    .image--vertical .image__bg-container::before {

      --img-current: var(--img-origin);

    }

  }


  @container (1000px <= width < 1801px) and (aspect-ratio >= 0.5) {

    .image--vertical .image__bg-container::before {

      --img-current: var(--img-regular);

    }

  }


  @container (1000px <= width < 1801px) and (aspect-ratio < 0.5) {

    .image--vertical .image__bg-container::before {

      --img-current: var(--img-origin);

    }

  }


  @container (1801px <= width) {

    .image--vertical .image__bg-container::before {

      --img-current: var(--img-origin);

    }

  }

}


.image--shift-1 .image__bg-container::before {

  --img-current: var(--img-middle);

}


@container (min-width: 600px) {

  .image--shift-1 .image__bg-container::before {

    --img-current: var(--img-regular);

  }

}


@container (min-width: 1000px) {

  .image--shift-1 .image__bg-container::before {

    --img-current: var(--img-origin);

  }

}


.image--shift-2 .image__bg-container::before {

  --img-current: var(--img-regular);

}


@container (min-width: 600px) {

  .image--shift-2 .image__bg-container::before {

    --img-current: var(--img-origin);

  }

}


.text {


  -webkit-font-smoothing: antialiased;

  position: relative;

  line-height: 1;

  word-spacing: 1px;


}


.frame {

  display: block;

  overflow: hidden;


  line-height: 1;


}


.frame > iframe {

  border: none;

  width: 100%;

  height: 100%;

}


.file {

  box-sizing: border-box;

  display: flex;

  align-items: center;

  flex-direction: row;

  word-break: break-word;

  overflow-wrap: anywhere;

  cursor: pointer;

  outline: 2px solid transparent;

  outline-offset: -1px;

  position: relative;


  font-family: inherit !important;

}


.file:focus-within {

  outline-color: rgba(56, 110, 220, 0.5);

}


.file > input[type='file'] {

  opacity: 0;

  position: absolute;

  pointer-events: none;

  inset: 0;

  width: 100%;

  height: 100%;

}


.toggle[data-toggle-overlay]:not([open]):not([data-toggle-closing]) > [data-toggle-content] {

  display: none;

}


@media (prefers-reduced-motion: reduce) {

  .toggle,
  .toggle *:not([data-sd-carousel-duration], [data-sd-carousel-transform]) {

    transition-duration: 0.01ms !important;

    transition-delay: 0s !important;

  }

}


sd-video {

  display: block;

  overflow: hidden;

  object-fit: contain;

}


sd-video > video {

  display: block;

  max-width: 100%;

  max-height: 100%;

  object-fit: inherit;

}


div[data-type="video_block"] > sd-video {

  display: inline-block;

  max-width: 100%;

  vertical-align: bottom;

}


div[data-type="video_block"] > sd-video[data-sd-video-sized] > video {

  width: 100%;

}


.video-container {

  user-select: none;

}


.video-container[data-video-state="paused"] [data-video-label="pause"],
.video-container[data-video-state="playing"] [data-video-label="play"] {

  display: none;

}


.video-container[data-video-state="paused"] [data-video-label="play"],
.video-container[data-video-state="playing"] [data-video-label="pause"] {

  display: inline;

}


sd-carousel {

  display: flex;

  flex-direction: column;

  align-items: center;

}


sd-carousel:not([is-playing]) [slot="pause"],
sd-carousel[is-playing] [slot="play"] {

  display: none !important;

}


sd-carousel :where([slot="prev"], [slot="next"], [slot="play-toggle"]) {

  cursor: pointer;

}


@property --g-angle {

  syntax: "<angle>";

  inherits: false;

  initial-value: 180deg;

}

@property --g-color-0 {

  syntax: "<color>";

  inherits: false;

  initial-value: transparent;

}

@property --g-position-0 {

  syntax: "<percentage>";

  inherits: false;

  initial-value: 0.01%;

}

@property --g-color-1 {

  syntax: "<color>";

  inherits: false;

  initial-value: transparent;

}

@property --g-position-1 {

  syntax: "<percentage>";

  inherits: false;

  initial-value: 100%;

}

@property --g-color-2 {

  syntax: "<color>";

  inherits: false;

  initial-value: transparent;

}

@property --g-position-2 {

  syntax: "<percentage>";

  inherits: false;

  initial-value: 100%;

}

@property --g-color-3 {

  syntax: "<color>";

  inherits: false;

  initial-value: transparent;

}

@property --g-position-3 {

  syntax: "<percentage>";

  inherits: false;

  initial-value: 100%;

}

@property --g-color-4 {

  syntax: "<color>";

  inherits: false;

  initial-value: transparent;

}

@property --g-position-4 {

  syntax: "<percentage>";

  inherits: false;

  initial-value: 100%;

}

@property --g-color-5 {

  syntax: "<color>";

  inherits: false;

  initial-value: transparent;

}

@property --g-position-5 {

  syntax: "<percentage>";

  inherits: false;

  initial-value: 100%;

}

@property --g-color-6 {

  syntax: "<color>";

  inherits: false;

  initial-value: transparent;

}

@property --g-position-6 {

  syntax: "<percentage>";

  inherits: false;

  initial-value: 100%;

}

@property --g-color-7 {

  syntax: "<color>";

  inherits: false;

  initial-value: transparent;

}

@property --g-position-7 {

  syntax: "<percentage>";

  inherits: false;

  initial-value: 100%;

}

@property --g-color-8 {

  syntax: "<color>";

  inherits: false;

  initial-value: transparent;

}

@property --g-position-8 {

  syntax: "<percentage>";

  inherits: false;

  initial-value: 100%;

}

@property --g-color-9 {

  syntax: "<color>";

  inherits: false;

  initial-value: transparent;

}

@property --g-position-9 {

  syntax: "<percentage>";

  inherits: false;

  initial-value: 100%;

}

@property --g-color-10 {

  syntax: "<color>";

  inherits: false;

  initial-value: transparent;

}

@property --g-position-10 {

  syntax: "<percentage>";

  inherits: false;

  initial-value: 100%;

}

@property --g-color-11 {

  syntax: "<color>";

  inherits: false;

  initial-value: transparent;

}

@property --g-position-11 {

  syntax: "<percentage>";

  inherits: false;

  initial-value: 100%;

}


sd-loop-box {

  overflow: hidden !important;

}


sd-loop-box > .img {

  max-width: 100%;

  height: auto;

}





:root {
 --s-color-f188e6d0: #033b0dff;
 --s-color-a0a515d3: #b34e4dff;
 --s-color-24ab5379: #322f2fff;
 --s-color-639ce974: #ffffffff;
 --s-color-5b89238f: #ffffffb3;
 --s-color-45bb9b06: #f9f3e5ff;
 --s-color-fc8b146f: #fff4f4ff;
 --s-color-ee8c7263: #fcf8f1ff;
 --s-color-7594452b: #f2e3caff;
 --s-color-14a75bf8: #b57206ff;
 --s-color-519345c4: #595959ff;
 --s-color-6aba209f: #7e54116e;
 }


.text.theme-0ca46e6a{
font-family:var(--s-font-ad99516a);
font-size:15px;
font-weight:500;
letter-spacing:0.04em;
line-height:1.60}


._c0:where(:not(._c0 ._c0)){
min-height:100vh;
min-height:100dvh;
overflow:clip}
body{
background:var(--s-color-639ce974)}
._c1 > *{
--gap-h:8px;
--gap-v:0px}
._c2:hover{
filter:brightness(101%);
mix-blend-mode:normal;
--ha:1}
._c2:hover ._c3{
scale:1.07 1.07;
text-decoration:none;
transition-duration:200ms;
transition-timing-function:linear}
._c4:hover{
filter:brightness(101%);
mix-blend-mode:normal;
--ha:1}
._c4:hover ._c5{
scale:1.07 1.07;
text-decoration:none;
transition-duration:200ms;
transition-timing-function:linear}
._c6:hover{
filter:brightness(101%);
mix-blend-mode:normal;
--ha:1}
._c6:hover ._c7{
scale:1.07 1.07;
text-decoration:none;
transition-duration:200ms;
transition-timing-function:linear}
._c8:hover{
filter:brightness(101%);
mix-blend-mode:normal;
--ha:1}
._c8:hover ._c9{
scale:1.07 1.07;
text-decoration:none;
transition-duration:200ms;
transition-timing-function:linear}
._c10:hover{
filter:brightness(101%);
mix-blend-mode:normal;
--ha:1}
._c10:hover ._c11{
scale:1.07 1.07;
text-decoration:none;
transition-duration:200ms;
transition-timing-function:linear}
._c12:hover{
filter:contrast(140%);
mix-blend-mode:normal;
scale:1.05 1.05;
transition-duration:300ms;
transition-timing-function:ease-in-out;
--ha:1}
._c0{
background:var(--s-color-639ce974)}
._c13{
background:var(--s-color-5b89238f)}
._p0{
background:transparent}
._c12{
background:var(--s-color-a0a515d3)}
._c14{
background:var(--s-color-f188e6d0)}
._c15{
background:var(--s-color-6aba209f)}
._c0{
align-content:flex-end;
align-items:flex-end;
justify-content:flex-start}
._p1{
align-content:center;
align-items:center;
justify-content:space-between}
._p2{
align-content:center;
align-items:center;
justify-content:center}
._c16{
align-content:center;
align-items:center;
justify-content:flex-start}
._p3{
justify-content:flex-start}
._c17{
justify-content:center}
._p4{
flex-direction:column;
flex-wrap:nowrap}
._p5{
flex-direction:row;
flex-wrap:nowrap}
._c0{
height:100%;
width:100%;
max-width:100%}
._c13{
height:70px;
width:100%;
max-width:100%}
._c1{
min-width:0}
._c18{
height:58.516196447230925px;
width:200px;
max-width:100%}
._p6{
height:auto;
width:auto;
max-width:100%}
._p7{
height:70px;
width:auto;
max-width:100%}
._c12{
height:104px;
width:144px;
max-width:100%}
._c14{
height:70px;
width:70px;
max-width:100%}
._c19{
align-content:flex-end;
align-items:flex-end;
flex-direction:column;
flex-wrap:nowrap;
height:100%;
justify-content:flex-start;
width:100%}
._c20 > *{
--gap-h:8px;
--gap-v:0px}
._c21 > *{
--gap-h:0px;
--gap-v:0px}
._c22.appear{
opacity:0;
transition-duration:1000ms;
transition-timing-function:ease-in-out}
._c22 > .image__bg-container::before{
background-position:center center;
background-repeat:no-repeat;
background-size:100%}
._c23 > *{
--gap-h:0px;
--gap-v:72px}
._c24 > *{
--gap-h:0px;
--gap-v:120px}
._c25.appear{
opacity:0;
transition-duration:2000ms;
transition-timing-function:ease-in-out;
translate:0px 20px}
._c25 > *{
--gap-h:30px;
--gap-v:0px}
._c25.appear > *{
--gap-h:30px;
--gap-v:0px}
._c26:before{
background-position:center center;
background-repeat:no-repeat;
background-size:100%}
._c27 > *{
--gap-h:0px;
--gap-v:12px}
._c28.appear{
opacity:0;
transition-duration:2000ms;
transition-timing-function:ease-in-out;
translate:0px 20px}
._c28 > *{
--gap-h:120px;
--gap-v:0px}
._c28.appear > *{
--gap-h:120px;
--gap-v:0px}
._c29 > *{
--gap-h:0px;
--gap-v:24px}
._c30 > *{
--gap-h:0px;
--gap-v:12px}
._c31 > *{
--gap-h:24px;
--gap-v:0px}
._c32.appear{
opacity:0;
transition-duration:2000ms;
transition-timing-function:ease-in-out;
translate:0px 20px}
._c32 > *{
--gap-h:0px;
--gap-v:24px}
._c32.appear > *{
--gap-h:0px;
--gap-v:24px}
._c33 > *{
--gap-h:0px;
--gap-v:32px}
._c34:hover{
opacity:1;
--ha:1}
._c34:hover ._c35{
scale:1.05 1.05}
._c36 > *{
--gap-h:10px;
--gap-v:0px}
._c37 > *{
--gap-h:0px;
--gap-v:24px}
._c38 > *{
--gap-h:40px;
--gap-v:0px}
._c39 > *{
--gap-h:0px;
--gap-v:1px}
._c40 > *{
--gap-h:0px;
--gap-v:0px}
._c41 > *{
--gap-h:0px;
--gap-v:0px}
._c42 > *{
--gap-h:10px;
--gap-v:0px}
._c43 > *{
--gap-h:10px;
--gap-v:0px}
._c44 > *{
--gap-h:10px;
--gap-v:0px}
._c45 > *{
--gap-h:10px;
--gap-v:0px}
._c46 > *{
--gap-h:10px;
--gap-v:0px}
._p8{
padding:0px}
._c13{
padding:0px 32px 0px 64px}
._p7{
padding:0px 32px}
._c47{
padding:0px 24px}
._p9{
padding:24px 32px}
._c48{
padding:10px}
._c24{
padding:40px 140px 80px}
._c32{
padding:88px 140px 80px}
._c34{
padding:24px}
._c37{
padding:24px 0px 8px}
._c38{
padding:0px 76px 0px 80px}
._pa{
padding:16px 0px}
._c13{
left:0px;
top:0px}
._pb{
bottom:auto;
left:auto;
right:auto;
top:auto}
._c13{
position:fixed}
._pb{
position:relative}
._c13{
z-index:1}
._c37{
z-index:-1}
._pc{
gap:0px 8px}
._c23{
gap:72px}
._c24{
gap:120px 0px}
._c25{
gap:0px 30px}
._pd{
gap:12px 0px}
._c28{
gap:0px 120px}
._c29{
gap:24px 80px}
._c31{
gap:10px 24px}
._c32{
gap:24px 0px}
._c33{
gap:32px}
._c36{
gap:0px 10px}
._c37{
gap:24px}
._c38{
gap:40px}
._c39{
gap:1px}
._pe{
gap:0px}
._pa{
gap:10px}
._pf{
display:flex}
._c14{
display:none}
._pg{
color:var(--s-color-f188e6d0)}
._ph{
color:var(--s-color-639ce974)}
._c49{
color:#333333}
._c50{
color:var(--s-color-24ab5379)}
._c51{
color:var(--s-color-14a75bf8)}
._c52{
color:var(--s-color-519345c4)}
._pi{
text-align:left}
._pj{
text-align:center}
._c51{
text-align:center;
text-decoration:underline}
._c12{
border-radius:52px}
._pk{
border-radius:50%}
._c47{
border-radius:10px}
._c21{
border-radius:40px}
._pl{
border-bottom:1px solid var(--s-color-7594452b);
border-left:0px solid var(--s-color-7594452b);
border-right:0px solid var(--s-color-7594452b);
border-top:0px solid var(--s-color-7594452b)}
._c26{
border-radius:0px 0px 4px 4px}
._c34{
border-bottom:0px solid #9f371aff;
border-left:0px solid #9f371aff;
border-radius:122px;
border-right:0px solid #9f371aff;
border-top:0px solid #9f371aff}
._c37{
border-bottom:4px solid var(--s-color-f188e6d0);
border-left:0px solid var(--s-color-f188e6d0);
border-right:0px solid var(--s-color-f188e6d0);
border-top:0px solid var(--s-color-f188e6d0)}
._c12{
margin:64px 0px 0px}
._c14{
margin:24px 0px 0px}
._pm{
margin:0px}
._c53{
margin:0px 0px 32px}
._c20{
margin:16px 0px 0px 16px}
._c54{
margin:24px 16px 0px 0px}
._c50{
margin:0px 0px 48px}
._c39{
margin:0px 0px -1px}
._c52{
margin:1px 0px 0px}
._c17{
font-family:var(--s-font-ad99516a);
font-size:18px;
font-weight:700;
letter-spacing:0.14em;
line-height:1.50}
._pn{
font-size:35px}
._c55{
font-family:var(--s-font-ad99516a);
font-size:30px;
font-weight:400;
letter-spacing:0.02em;
line-height:1.60}
._c49{
font-size:24px}
._c56{
font-family:var(--s-font-ad99516a);
font-size:18px;
font-weight:600;
line-height:1.4}
._c50{
font-family:var(--s-font-889455e3);
font-size:14px;
font-weight:400;
line-height:1.4}
._po{
font-family:var(--s-font-ad99516a);
font-size:28px;
font-weight:500;
letter-spacing:0.15em;
line-height:1.4}
._pp{
font-family:var(--s-font-ad99516a);
font-size:18px;
font-weight:500;
letter-spacing:0.04em;
line-height:2.00}
._c57{
font-family:var(--s-font-ad99516a);
font-size:32px;
font-weight:500;
letter-spacing:0.15em;
line-height:1.60}
._c58{
font-family:var(--s-font-ad99516a);
font-size:20px;
font-weight:500;
letter-spacing:0.15em;
line-height:2.00}
._c59{
font-family:var(--s-font-ad99516a);
font-size:30px;
font-weight:600;
letter-spacing:0.14em;
line-height:1.4}
._c60{
font-family:var(--s-font-ad99516a);
font-size:34px;
font-weight:700;
letter-spacing:0.10em;
line-height:1.4}
._c61{
font-size:64px}
._c62{
font-family:var(--s-font-ad99516a);
font-size:64px;
font-weight:700;
letter-spacing:0.10em;
line-height:1.4}
._c63{
font-family:var(--s-font-889455e3);
font-size:24px;
font-weight:400;
letter-spacing:0.10em;
line-height:1.4}
._c51{
font-family:var(--s-font-ad99516a);
font-size:44px;
font-weight:500;
letter-spacing:0.10em;
line-height:1.4}
._pq{
font-family:var(--s-font-ad99516a);
font-size:15px;
font-style:normal;
font-weight:500;
letter-spacing:0.04em;
line-height:1.6}
._c52{
font-family:var(--s-font-ad99516a);
font-size:12px;
font-style:normal;
font-weight:400;
letter-spacing:0em;
line-height:1.6}
._c64{
--material-symbol-weight:400}
._c65{
--material-symbol-weight:300}
._c47{
align-content:space-between;
align-items:space-between;
justify-content:flex-start}
._pr{
align-content:center;
align-items:center;
justify-content:space-between}
._ps{
justify-content:flex-start}
._pt{
align-content:center;
align-items:center;
justify-content:center}
._pu{
align-content:flex-start;
align-items:flex-start;
justify-content:center}
._c23{
align-content:flex-end;
align-items:flex-end;
justify-content:flex-end}
._pv{
align-content:flex-start;
align-items:flex-start;
justify-content:flex-start}
._c28{
align-content:flex-start;
align-items:flex-start;
justify-content:flex-end}
._pw{
justify-content:center}
._c37{
align-items:center;
justify-content:flex-start}
._c38{
align-content:flex-end;
align-items:flex-end;
justify-content:space-between}
._px{
align-content:center;
align-items:center;
justify-content:flex-start}
._py{
background:var(--s-color-639ce974)}
._pz{
background:transparent}
._p10{
background:var(--s-color-f188e6d0)}
._c23{
background:var(--s-color-45bb9b06)}
._c33{
background:#ffffffff}
._c34{
background:var(--s-color-a0a515d3)}
._c37{
background:var(--s-color-ee8c7263)}
._c47{
box-shadow:0px 6px 15px 0px rgba(0,0,0,0.2)}
._p11{
flex-direction:column;
flex-wrap:nowrap}
._p12{
flex-direction:row;
flex-wrap:nowrap}
._p13{
flex:none}
._pd{
flex:1;
flex-direction:column;
flex-wrap:nowrap}
._c28{
flex:none;
flex-direction:row-reverse;
flex-wrap:nowrap}
._p14{
flex:none;
flex-direction:column;
flex-wrap:nowrap}
._p15{
flex:none;
flex-direction:row;
flex-wrap:nowrap}
._c37{
flex-direction:column}
._c38{
flex-direction:row}
._pa{
flex:1;
flex-direction:row;
flex-wrap:nowrap}
._c47{
height:auto;
width:540px;
max-width:100%}
._p16{
height:auto;
width:100%;
max-width:100%}
._c20{
max-width:calc(100% - 16px)}
._p17{
height:auto;
width:auto;
max-width:100%}
._c54{
height:70px;
width:70px;
max-width:calc(100% - 16px)}
._c48{
height:80vh;
width:100%;
max-width:100%}
._c22{
height:256px;
width:100%;
max-width:100%}
._c26{
height:auto;
width:calc(50% - (var(--gap-h) * 0.5));
max-width:calc(50% - (var(--gap-h) * 0.5))}
._p18{
height:auto;
width:auto;
max-width:100%;
min-width:0}
._c31{
width:100%;
max-width:100%}
._p19{
height:220px;
width:220px;
max-width:100%;
min-width:0}
._c33{
height:502px;
width:100%;
max-width:100%}
._c34{
height:216px;
width:668px;
max-width:100%}
._c35{
height:auto;
width:544px;
max-width:100%}
._c66{
height:auto;
width:260px;
max-width:100%}
._c40{
height:auto;
width:684px;
max-width:100%}
._p1a{
overflow-x:hidden;
overflow-y:auto}
._c37{
overflow-x:visible;
overflow-y:visible}
._c26{
aspect-ratio:auto 3169 / 2221}
._c66{
aspect-ratio:auto 957 / 280}
._c32{
transition-duration:0ms;
transition-timing-function:cubic-bezier(0.4,0.4,0,1)}


/* 画面幅の切り替え：(max-width: 1140px) */

@media (max-width: 1140px) {

._c1 > *{
--gap-h:8px;
--gap-v:0px}
._c20 > *{
--gap-h:8px;
--gap-v:0px}
._c21 > *{
--gap-h:10px;
--gap-v:0px}
._c24 > *{
--gap-h:0px;
--gap-v:120px}
._c28 > *{
--gap-h:64px;
--gap-v:0px}
._c28.appear > *{
--gap-h:64px;
--gap-v:0px}
._c29 > *{
--gap-h:0px;
--gap-v:24px}
._c31 > *{
--gap-h:18px;
--gap-v:0px}
._c38 > *{
--gap-h:8px;
--gap-v:0px}
._c40 > *{
--gap-h:0px;
--gap-v:0px}
._pc{
justify-content:space-between}
._c67{
justify-content:flex-end}
._c12{
align-content:center;
align-items:center;
justify-content:center}
._pf{
display:flex}
._c14{
display:none}
._p1b{
flex:none}
._c21{
flex-direction:row;
flex-wrap:nowrap}
._p19{
flex:1}
._c67{
height:auto;
width:188px;
max-width:100%}
._c12{
height:76px;
width:144px;
max-width:100%}
._c14{
height:70px;
width:70px;
max-width:100%}
._c24{
height:auto}
._p19{
width:auto;
max-width:100%}
._c12{
margin:24px 0px 0px}
._c14{
background:var(--s-color-f188e6d0)}
._c14{
border-radius:50%}
._c21{
gap:0px 10px}
._c28{
gap:0px 64px}
._c29{
gap:24px 64px}
._c31{
gap:0px 18px}
._c38{
gap:8px}
._c49{
color:#ffffffff}
._p1c{
color:var(--s-color-f188e6d0)}

}


/* 画面幅の切り替え：(max-width: 840px) */

@media (max-width: 840px) {

._c20 > *{
--gap-h:8px;
--gap-v:0px}
._c24 > *{
--gap-h:0px;
--gap-v:40px}
._c25 > *{
--gap-h:0px;
--gap-v:40px}
._c25.appear > *{
--gap-h:0px;
--gap-v:40px}
._c28 > *{
--gap-h:0px;
--gap-v:40px}
._c28.appear > *{
--gap-h:0px;
--gap-v:40px}
._c29 > *{
--gap-h:0px;
--gap-v:40px}
._c31 > *{
--gap-h:24px;
--gap-v:24px}
._c32 > *{
--gap-h:0px;
--gap-v:16px}
._c32.appear > *{
--gap-h:0px;
--gap-v:16px}
._c37 > *{
--gap-h:0px;
--gap-v:0px}
._c38 > *{
--gap-h:0px;
--gap-v:0px}
._c39 > *{
--gap-h:0px;
--gap-v:1px}
._c40 > *{
--gap-h:0px;
--gap-v:0px}
._c41 > *{
--gap-h:0px;
--gap-v:0px}
._c42 > *{
--gap-h:10px;
--gap-v:0px}
._c43 > *{
--gap-h:10px;
--gap-v:0px}
._c44 > *{
--gap-h:10px;
--gap-v:0px}
._c45 > *{
--gap-h:10px;
--gap-v:0px}
._c46 > *{
--gap-h:10px;
--gap-v:0px}
._c13{
padding:0px 32px 0px 40px}
._c32{
padding:60px}
._p1d{
display:none}
._p1e{
display:flex}
._c20{
margin:16px 0px 0px}
._c54{
margin:24px 0px 0px}
._c26{
margin:0px}
._p1f{
max-width:100%}
._c22{
height:300px}
._p1g{
height:auto}
._c26{
height:auto;
width:auto;
max-width:100%}
._p1h{
width:100%;
max-width:100%}
._p19{
height:200px;
width:calc(45% - (var(--gap-h) * 0.55));
max-width:calc(45% - (var(--gap-h) * 0.55));
min-width:auto}
._c66{
height:50px;
width:auto;
max-width:100%}
._pa{
width:auto;
max-width:100%;
min-width:auto}
._p1i{
flex:1}
._c25{
flex-direction:column-reverse;
flex-wrap:nowrap}
._p1j{
flex-direction:column;
flex-wrap:nowrap}
._c29{
flex-direction:column}
._c31{
flex-direction:row;
flex-wrap:wrap}
._p1k{
flex:none}
._c41{
flex-wrap:wrap}
._c24{
gap:40px 0px}
._p1l{
gap:40px 64px}
._c31{
gap:24px 24px}
._c32{
gap:16px 0px}
._p1m{
gap:0px}
._p1n{
align-content:center;
align-items:center}
._po{
font-size:26px}
._c57{
font-size:30px}
._c58{
font-size:18px}
._c62{
font-size:60px}
._c51{
font-size:28px}
._pq{
font-size:14px}
._c52{
font-size:13px}

}


/* 画面幅の切り替え：(max-width: 540px) */

@media (max-width: 540px) {

._c20 > *{
--gap-h:4px;
--gap-v:0px}
._c23 > *{
--gap-h:0px;
--gap-v:72px}
._c24 > *{
--gap-h:0px;
--gap-v:120px}
._c25 > *{
--gap-h:0px;
--gap-v:0px}
._c25.appear > *{
--gap-h:0px;
--gap-v:40px}
._c27 > *{
--gap-h:0px;
--gap-v:12px}
._c28 > *{
--gap-h:0px;
--gap-v:0px}
._c28.appear > *{
--gap-h:0px;
--gap-v:40px}
._c29 > *{
--gap-h:0px;
--gap-v:24px}
._c30 > *{
--gap-h:0px;
--gap-v:12px}
._c31 > *{
--gap-h:16px;
--gap-v:16px}
._c32 > *{
--gap-h:0px;
--gap-v:24px}
._c32.appear > *{
--gap-h:0px;
--gap-v:16px}
._c33 > *{
--gap-h:0px;
--gap-v:32px}
._c37 > *{
--gap-h:0px;
--gap-v:20px}
._c38 > *{
--gap-h:0px;
--gap-v:16px}
._c39 > *{
--gap-h:0px;
--gap-v:4px}
._c40 > *{
--gap-h:0px;
--gap-v:0px}
._c41 > *{
--gap-h:16px;
--gap-v:16px}
._c42 > *{
--gap-h:0px;
--gap-v:0px}
._c43 > *{
--gap-h:0px;
--gap-v:0px}
._c44 > *{
--gap-h:0px;
--gap-v:0px}
._c45 > *{
--gap-h:0px;
--gap-v:0px}
._c46 > *{
--gap-h:0px;
--gap-v:0px}
._c13{
padding:0px 20px}
._c47{
padding:0px 16px}
._p1o{
padding:0px}
._c24{
padding:40px 24px 80px}
._c32{
padding:40px}
._c33{
padding:0px 10px}
._c34{
padding:16px 24px 24px}
._c37{
padding:24px 20px}
._pa{
padding:8px 0px}
._p1p{
flex:none}
._c21{
flex-direction:row;
flex-wrap:nowrap}
._c41{
flex-direction:row;
flex-wrap:wrap}
._c18{
height:47px;
width:160px;
max-width:100%}
._c22{
height:200px}
._p1q{
height:auto}
._c26{
height:auto;
width:100%;
max-width:100%}
._p1r{
width:100%;
max-width:100%}
._p19{
height:180px;
width:calc(45% - (var(--gap-h) * 0.55));
max-width:calc(45% - (var(--gap-h) * 0.55))}
._c59{
width:calc(90% - (var(--gap-h) * 0.1));
max-width:calc(90% - (var(--gap-h) * 0.1))}
._c34{
height:182px;
width:486px;
max-width:100%}
._c66{
height:30px;
width:auto;
max-width:100%}
._p1s{
display:none}
._p1t{
display:flex}
._c67{
z-index:1}
._c37{
z-index:0}
._c20{
gap:0px 4px}
._p1u{
gap:16px 16px}
._c37{
gap:20px}
._c38{
gap:16px}
._c39{
gap:4px}
._pa{
gap:0px}
._c55{
font-size:28px;
letter-spacing:normal}
._p1v{
font-size:22px}
._p1w{
font-size:16px}
._c59{
font-size:20px}
._c60{
font-size:28px}
._c61{
font-size:36px}
._c62{
font-size:38px;
letter-spacing:normal}
._c63{
font-size:22px;
letter-spacing:normal}
._c51{
font-size:24px}
._p1x{
font-size:13px}
._c49{
color:#ffffffff}
._p1y{
align-content:center;
align-items:center;
justify-content:flex-start}
._c31{
align-content:flex-start;
align-items:flex-start;
justify-content:center}
._p1z{
justify-content:center}
._c41{
align-content:center;
align-items:center;
justify-content:center}
._p1z{
text-align:center}
._c34{
border-radius:122px}
._p20{
margin:0px}
._c39{
margin:0px 0px -1px}

}


/* 画面幅の切り替え：(max-width: 320px) */

@media (max-width: 320px) {

._c1 > *{
--gap-h:8px;
--gap-v:0px}
._c24 > *{
--gap-h:0px;
--gap-v:120px}
._c29 > *{
--gap-h:0px;
--gap-v:24px}
._c32 > *{
--gap-h:0px;
--gap-v:24px}
._c32.appear > *{
--gap-h:0px;
--gap-v:16px}
._c38 > *{
--gap-h:0px;
--gap-v:40px}
._c40 > *{
--gap-h:0px;
--gap-v:0px}
._c41 > *{
--gap-h:0px;
--gap-v:0px}
._p21{
padding:0px 16px}
._c24{
padding:88px 16px 80px}
._c32{
padding:40px 20px}
._c34{
padding:16px 24px}
._c1{
flex:1}
._p22{
flex:none}
._c1{
width:auto;
max-width:100%}
._c67{
height:auto;
width:122px;
max-width:100%}
._c14{
max-width:100%}
._c22{
height:160px}
._p19{
height:128px}
._c34{
height:126px;
width:288px;
max-width:100%}
._c35{
width:100%;
max-width:100%}
._p1s{
display:none}
._p1t{
display:flex}
._c14{
margin:24px 0px 0px}
._c55{
font-size:24px}
._c57{
font-size:20px}
._c60{
font-size:22px}
._c61{
font-size:28px}
._c62{
font-size:26px;
letter-spacing:normal}
._c63{
font-size:14px}
._c29{
gap:24px 64px}
._c41{
justify-content:space-around}

}


.apps-studio-banner {

    align-items: center;

    border-radius: 4px;

    bottom: 20px;

    height: 20px;

    justify-content: center;

    display: flex;

    left: 20px;

    perspective: 300px;

    position: fixed;

    width: 84px;

    z-index: 2000;

    transition: .4s cubic-bezier(.4,.4,0,1);

    background-color: #FFFFFF;

    padding: 0;

    box-sizing: border-box;

}

.apps-studio-banner .long-banner {

  display:none;

}

.apps-studio-banner:hover {

    width: 200px;

    height: 32px;

}

.apps-studio-banner:hover .long-banner {

  display:initial;

}

.apps-studio-banner:hover .short-banner {

  display:none;

}

.apps-studio-banner path {

  fill: #000000;

}