/* material icons */
/* Reference: https://developers.google.com/fonts/docs/material_icons#setup_method_2_self_hosting */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url('/assets/fonts/MaterialIcons-Regular.eot'); /* For IE6-8 */
src: local('Material Icons'), local('MaterialIcons-Regular'),
url('/assets/fonts/MaterialIcons-Regular.woff2')
  format('woff2');
}
.material-icons {
display: flex;
font-family: Material Icons;
font-size: 24px;
font-style: normal;
font-weight: 400;
letter-spacing: normal;
line-height: 1;
text-transform: none;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased
}



  /* Material Symbols - 基本スタイル */
  [class*="material-symbols-"] {
    font-style: normal;
    font-variation-settings: "FILL" var(--material-symbol-fill, 0), "wght" var(--material-symbol-weight, 400);
    visibility: hidden;
  }
  
  /* Material Symbolsフォント読み込み完了後 */
  body[data-material-symbols-loaded="true"] [class*="material-symbols-"] {
    visibility: visible;
  }


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;
  background: #fff;
  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;
}

/* --- Common Base Styles --- */
.content-image,
.layout-box,
.content-text,
.page-section,
.page-section__inner,
.content-icon,
.media-video__element {
  border: 0;
  box-sizing: border-box;
  max-width: 100%;
  z-index: 0;
  position: relative;
  margin: 0;
  padding: 0;
  flex: none;
}

.content-image {
  height: auto;
}

.content-image,
.layout-box,
.content-text,
.page-section,
.page-section__inner,
.content-icon,
.media-video__element {
  transition: all 0.3s cubic-bezier(0.4, 0.4, 0, 1);
  list-style: none;
  margin: 0;
  padding: 0;
  text-decoration: none;
  align-content: center;
}

.rich-text * {
  transition: all 0.3s cubic-bezier(0.4, 0.4, 0, 1);
  list-style: none;
  margin: 0;
  padding: 0;
  text-decoration: none;
  align-content: normal;
  z-index: 0;
}

/* Restore text decoration for semantic HTML elements */
.rich-text s,
.rich-text del,
.rich-text u {
  text-decoration: revert;
}

/* legacy base equivalent: column segment containers (see JSDoc) */
.layout-box,
.page-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content-image,
.content-text,
.content-icon {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  overflow-wrap: anywhere;
  word-break: break-word;
  z-index: 0;
}

.layout-box::-webkit-scrollbar {
  display: none;
}

/* --- Rich Text --- */
.rich-text {
  display: block;
  /* Workaround: レスポンシブCSSで display:flex に切り替わった際に
     flex-direction がデフォルト row になるのを防止する。
     display:block 時は無視され、display:flex 時のみ有効。
     HRC ではノードCSS生成時に flex-direction を補完すると
     ユーザー設定の flex-direction を上書きするリスクがあるため、
     低優先度のデフォルト値としてここで設定する。 */
  flex-direction: column;
  flex: none;
  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"] {
    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;
    }
  }
  /* Images & Videos */
  img,
    video {
    height: auto;
    max-width: 100%;
    vertical-align: bottom;
  }

  /* Links */
  a {
    color: #007cff;
    display: inline;
    text-decoration: underline;
  }

}

/* --- Section --- */
.page-section {
  width: 100%;
}

/* section-inner のスタイル
 * position: static は studio-preview との表示互換性のために維持している。
 * 元々は考慮漏れで設定されたものだが、既に使用されているため互換性維持のために必要。
 * .layout-box クラスも同時に付与されるため、display: flex 等の基本レイアウトは継承される。
 */
.page-section__inner {
  position: static;
}

/* --- Dialog --- */
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;
  /* UA stylesheet の overflow: auto を打ち消し、モーダル内コンテンツがはみ出した際の水平パンを防ぐ (#2438) */
  /* コンテンツが dialog 表示領域を超える場合は overflow: auto に戻さず、子要素側で内部スクロール領域を確保する (studio-preview 互換) */
  overflow: visible;

&[open] {
    display: flex;
  }

&::backdrop {
    background: transparent;
  }
}

/* --- Image Background Element --- */
/* .media__background 単体構造で::before疑似要素を使用 */
.media__background {
  container-type: size;  /* 幅と高さを監視（aspect-ratioクエリに必要） */
  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;
}

.media__background::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;
  /* background-image を除外: WebKit が transition: all 継承時に
     container query による --img-current 変更を cross-fade() でアニメーションし、
     低解像度バリアントが表示され続ける問題を回避 (issue #2389) */
  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;
}

/* IMPORTANT: 3つの DPR tier はソース順に依存 — ÷2.0 → ÷1.5 → ÷1.0 の順で配置し、
   境界値(DPR 1.0, 1.5)での overlap を後段 tier の勝ちで解決する。並び替え禁止。 */

/* DPR 2x（÷2.0）: 背景画像用 - 閾値（300px/500px/900px）= DPR 1x閾値 ÷ 2.0 */
@media (min-resolution: 1.5dppx) {
  /* --- horizontal (横長/正方形) - DPR 2x --- */
  /* デフォルト: < 300px → small */
  .media--horizontal .media__background::before {
    --img-current: var(--img-small);
  }

  /* aspect-ratio < 1 補正: small → middle (300px未満) */
  @container (aspect-ratio < 1) and (max-width: 299px) {
    .media--horizontal .media__background::before {
      --img-current: var(--img-middle);
    }
  }

  /* aspect-ratio < 0.5 補正: small → regular (300px未満、2段階アップ) */
  @container (aspect-ratio < 0.5) and (max-width: 299px) {
    .media--horizontal .media__background::before {
      --img-current: var(--img-regular);
    }
  }

  /* 300px以上 + aspect-ratio >= 1 → middle
     horizontalはmax-widthなし: aspect-ratio >= 1 が自然にスコープし、
     後続の幅帯ルールがソース順で上書きするためmax-width不要。
     verticalは明示的範囲限定（min-width + max-width + aspect-ratio >= 0.5）を使用。 */
  @container (min-width: 300px) and (aspect-ratio >= 1) {
    .media--horizontal .media__background::before {
      --img-current: var(--img-middle);
    }
  }

  /* 300px以上 + aspect-ratio < 1 補正: middle → regular */
  @container (min-width: 300px) and (max-width: 499px) and (aspect-ratio < 1) {
    .media--horizontal .media__background::before {
      --img-current: var(--img-regular);
    }
  }

  /* 300px以上 + aspect-ratio < 0.5 補正: middle → origin (2段階アップ) */
  @container (min-width: 300px) and (max-width: 499px) and (aspect-ratio < 0.5) {
    .media--horizontal .media__background::before {
      --img-current: var(--img-origin);
    }
  }

  /* 500px以上 + aspect-ratio >= 1 → regular */
  @container (min-width: 500px) and (aspect-ratio >= 1) {
    .media--horizontal .media__background::before {
      --img-current: var(--img-regular);
    }
  }

  /* 500px以上 + aspect-ratio < 1 補正: regular → origin */
  @container (min-width: 500px) and (max-width: 900px) and (aspect-ratio < 1) {
    .media--horizontal .media__background::before {
      --img-current: var(--img-origin);
    }
  }

  /* 500px以上 + aspect-ratio < 0.5: origin で上限キャップ（aspect-ratio < 1 と同じ結果） */

  /* 901px以上 → origin */
  @container (min-width: 901px) {
    .media--horizontal .media__background::before {
      --img-current: var(--img-origin);
    }
  }

}

/* DPR 1.5x（÷1.5）: DPR 1.01-1.5 の Android 端末等向け。
   対象デバイスは限定的だが、÷1.0 では解像度不足、÷2.0 では過剰ダウンスケールとなるため独立 tier として設置。
   閾値 = DPR 1x閾値 ÷ 1.5（端数は切り上げ: 600/1.5=400, 1000/1.5≈667, 1801/1.5≈1201） */
/* @media matches 1.0 ≤ DPR ≤ 1.5, effective 1.0 < DPR ≤ 1.5（DPR 1.0 は後段の ÷1.0 tier がソース順で勝つ） */
@media (min-resolution: 1dppx) and (max-resolution: 1.5dppx) {
  /* --- horizontal (横長/正方形) - DPR 1.5x --- */
  /* デフォルト: < 400px → small */
  .media--horizontal .media__background::before {
    --img-current: var(--img-small);
  }

  /* aspect-ratio < 1 補正: small → middle (400px未満) */
  @container (aspect-ratio < 1) and (max-width: 399px) {
    .media--horizontal .media__background::before {
      --img-current: var(--img-middle);
    }
  }

  /* aspect-ratio < 0.5 補正: small → regular (400px未満、2段階アップ) */
  @container (aspect-ratio < 0.5) and (max-width: 399px) {
    .media--horizontal .media__background::before {
      --img-current: var(--img-regular);
    }
  }

  /* 400px以上 + aspect-ratio >= 1 → middle */
  @container (min-width: 400px) and (aspect-ratio >= 1) {
    .media--horizontal .media__background::before {
      --img-current: var(--img-middle);
    }
  }

  /* 400px以上 + aspect-ratio < 1 補正: middle → regular */
  @container (min-width: 400px) and (max-width: 666px) and (aspect-ratio < 1) {
    .media--horizontal .media__background::before {
      --img-current: var(--img-regular);
    }
  }

  /* 400px以上 + aspect-ratio < 0.5 補正: middle → origin (2段階アップ) */
  @container (min-width: 400px) and (max-width: 666px) and (aspect-ratio < 0.5) {
    .media--horizontal .media__background::before {
      --img-current: var(--img-origin);
    }
  }

  /* 667px以上 + aspect-ratio >= 1 → regular */
  @container (min-width: 667px) and (aspect-ratio >= 1) {
    .media--horizontal .media__background::before {
      --img-current: var(--img-regular);
    }
  }

  /* 667px以上 + aspect-ratio < 1 補正: regular → origin */
  @container (min-width: 667px) and (max-width: 1200px) and (aspect-ratio < 1) {
    .media--horizontal .media__background::before {
      --img-current: var(--img-origin);
    }
  }

  /* 667px以上 + aspect-ratio < 0.5: origin で上限キャップ（aspect-ratio < 1 と同じ結果） */

  /* 1201px以上 → origin */
  @container (min-width: 1201px) {
    .media--horizontal .media__background::before {
      --img-current: var(--img-origin);
    }
  }

}

/* DPR 1x（÷1.0）: 背景画像用 - 閾値（600px/1000px/1801px） */
@media (max-resolution: 1dppx) {
  /* --- horizontal (横長/正方形) - DPR 1x --- */
  /* デフォルト: < 600px → small */
  .media--horizontal .media__background::before {
    --img-current: var(--img-small);
  }

  /* aspect-ratio < 1 補正: small → middle (600px未満) */
  @container (aspect-ratio < 1) and (max-width: 599px) {
    .media--horizontal .media__background::before {
      --img-current: var(--img-middle);
    }
  }

  /* aspect-ratio < 0.5 補正: small → regular (600px未満、2段階アップ) */
  @container (aspect-ratio < 0.5) and (max-width: 599px) {
    .media--horizontal .media__background::before {
      --img-current: var(--img-regular);
    }
  }

  /* 600px以上 + aspect-ratio >= 1 → middle */
  @container (min-width: 600px) and (aspect-ratio >= 1) {
    .media--horizontal .media__background::before {
      --img-current: var(--img-middle);
    }
  }

  /* 600px以上 + aspect-ratio < 1 補正: middle → regular */
  @container (min-width: 600px) and (max-width: 999px) and (aspect-ratio < 1) {
    .media--horizontal .media__background::before {
      --img-current: var(--img-regular);
    }
  }

  /* 600px以上 + aspect-ratio < 0.5 補正: middle → origin (2段階アップ) */
  @container (min-width: 600px) and (max-width: 999px) and (aspect-ratio < 0.5) {
    .media--horizontal .media__background::before {
      --img-current: var(--img-origin);
    }
  }

  /* 1000px以上 + aspect-ratio >= 1 → regular */
  @container (min-width: 1000px) and (aspect-ratio >= 1) {
    .media--horizontal .media__background::before {
      --img-current: var(--img-regular);
    }
  }

  /* 1000px以上 + aspect-ratio < 1 補正: regular → origin */
  @container (min-width: 1000px) and (max-width: 1800px) and (aspect-ratio < 1) {
    .media--horizontal .media__background::before {
      --img-current: var(--img-origin);
    }
  }

  /* 1000px以上 + aspect-ratio < 0.5: origin で上限キャップ（aspect-ratio < 1 と同じ結果） */

  /* 1801px以上 → origin */
  @container (min-width: 1801px) {
    .media--horizontal .media__background::before {
      --img-current: var(--img-origin);
    }
  }

}

/* --- Text Specific --- */
.content-text {
  /* Note: Base styles are defined above in common group */
  /* Specific styles for .content-text */
  -webkit-font-smoothing: antialiased;
  position: relative; /* Already defined in base, maybe redundant */
  line-height: 1;
  word-spacing: 1px;
  /* margin: 0; is already defined in base */
}

/** root-element */
.service-layout-1 {
  min-height: 100vh;
  overflow: clip;
}

:root { --corporate-ink: #4a514cff; --corporate-bg: #fcfdffff; --corporate-soft: #f0f1f7ff; --corporate-muted: #616161ff; --corporate-accent: #017387ff; }

/* Shared shell values measured from the original Studio pages. */
.corporate-page {
  overflow: hidden;
}

.corporate-page .site-header {
  height: 117px;
}

.corporate-page .site-header__bar {
  height: 82px;
}

.services-main,
.pricing-main {
  display: contents;
}

/*
 * The rotated hero label has a bounding box that otherwise extends above the
 * shared header. Keep its visible top edge below the 117px header without
 * changing the section geometry.
 */
.service-section--hero .service-section__label {
  translate: 0 48px;
}

@media (max-width: 768px) {
  .service-section--hero .service-section__label {
    translate: 0 34px;
  }
}

@media (max-width: 480px) {
  .corporate-page .site-header__shortcuts {
    justify-content: center;
    gap: 40px;
    padding: 10px;
    font-size: 14px;
  }

  .service-section--hero .service-section__label {
    translate: 0 0;
  }
}