/* Kiratt Permission 1.0.0 — このページ内に限定したスタイル */
#kiratt-permission {
  --kp-blue: #009adb;
  --kp-deep: #005fb9;
  --kp-cyan: #00cade;
  --kp-ink: #233f4d;
  --kp-muted: #576f7b;
  --kp-line: #dcebf0;
  --kp-pale: #f2fafe;
  margin: 0; padding: 0; width: 100%; min-height: 0;
  color: var(--kp-ink); background: #fff;
  font-family: "noto-sans-cjk-jp", "Noto Sans CJK JP", "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 16px; line-height: 1.85; font-weight: 400;
  font-feature-settings: "palt"; -webkit-font-smoothing: antialiased;
}
#kiratt-permission *, #kiratt-permission *::before, #kiratt-permission *::after { box-sizing: border-box; }
#kiratt-permission :where(h1,h2,h3,p,ol,dl,dt,dd,figure) { margin: 0; padding: 0; }
#kiratt-permission :where(h1,h2,h3) { background: none; border: 0; box-shadow: none; color: var(--kp-ink); font-family: inherit; font-weight: 600; line-height: 1.55; letter-spacing: .035em; text-align: left; }
#kiratt-permission :where(h1,h2,h3)::before, #kiratt-permission :where(h1,h2,h3)::after { content: none; }
#kiratt-permission a { color: inherit; text-decoration: none; transition: color .2s, background .2s, box-shadow .2s, transform .2s; }
#kiratt-permission a:hover { opacity: 1; }
#kiratt-permission :where(a,button):focus-visible { outline: 3px solid var(--kp-deep); outline-offset: 5px; }
#kiratt-permission button { font: inherit; cursor: pointer; }
#kiratt-permission img { max-width: 100%; height: auto; vertical-align: middle; }
#kiratt-permission .kp-en { font-family: "futura-pt", "Century Gothic", "Avenir Next", Arial, sans-serif; }
#kiratt-permission .kp-shell { width: min(1120px, calc(100% - 96px)); margin-inline: auto; }
#kiratt-permission .kp-eyebrow { font-size: 15px; font-weight: 500; letter-spacing: .13em; color: #087caa; }
#kiratt-permission .kp-hero { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(115deg, #f0fafe 0%, #f3fbfd 65%, #e7f7fb 100%); }
#kiratt-permission .kp-breadcrumb { position: relative; z-index: 2; padding-block: 23px; }
#kiratt-permission .kp-breadcrumb ol { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px 16px; list-style: none; font-size: 12px; line-height: 1.7; color: var(--kp-muted); }
#kiratt-permission .kp-breadcrumb li + li::before { content: "/"; color: #92a9b3; margin-right: 16px; }
#kiratt-permission .kp-breadcrumb a:hover { color: var(--kp-deep); text-decoration: underline; }
#kiratt-permission .kp-hero__inner { position: relative; z-index: 1; padding-top: 22px; padding-bottom: 70px; }
#kiratt-permission .kp-hero h1 { font-size: clamp(30px, 3.8vw, 46px); margin-top: 12px; letter-spacing: .075em; }
#kiratt-permission .kp-hero__lead { margin-top: 22px; color: var(--kp-muted); font-size: 16px; line-height: 2.05; letter-spacing: .035em; }
#kiratt-permission .kp-hero__index { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 34px; }
#kiratt-permission .kp-hero__index a { display: inline-flex; align-items: center; gap: 14px; padding-bottom: 9px; border-bottom: 1px solid #b9dbe7; font-size: 13px; }
#kiratt-permission .kp-hero__index a:hover { color: var(--kp-deep); border-color: var(--kp-deep); }
#kiratt-permission .kp-hero__index .kp-en { color: #097eaa; font-size: 12px; letter-spacing: .05em; }
#kiratt-permission .kp-hero__word { position: absolute; z-index: -1; right: 3.5%; bottom: -46px; font-size: clamp(100px, 15.5vw, 235px); letter-spacing: -.025em; font-weight: 400; line-height: 1; color: #fff; white-space: nowrap; pointer-events: none; }
#kiratt-permission .kp-hero__rings { position: absolute; z-index: -1; right: -65px; top: -220px; width: 630px; height: 630px; transform: rotate(-25deg); pointer-events: none; }
#kiratt-permission .kp-hero__rings i { position: absolute; inset: 0; border: 1px solid rgba(0,154,219,.11); border-radius: 50%; }
#kiratt-permission .kp-hero__rings i:nth-child(2) { inset: 55px; }
#kiratt-permission .kp-hero__rings i:nth-child(3) { inset: 110px; }
#kiratt-permission .kp-content { padding-top: 80px; padding-bottom: 90px; }
#kiratt-permission .kp-section { margin: 0; padding: 0; }
#kiratt-permission .kp-section, #kiratt-permission #kp-related { scroll-margin-top: calc(max(var(--header-height, 96px), 75px) + 24px); }
#kiratt-permission .kp-section + .kp-section { margin-top: 72px; }
#kiratt-permission .kp-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
#kiratt-permission .kp-section__number { display: inline-block; margin-right: 11px; padding-right: 15px; border-right: 1px solid #bddae5; }
#kiratt-permission h2 { margin-top: 9px; font-size: 30px; }
#kiratt-permission .kp-section__intro { margin-top: 12px; font-size: 14px; color: var(--kp-muted); }
#kiratt-permission .kp-count { display: flex; align-items: baseline; gap: 9px; white-space: nowrap; color: var(--kp-muted); font-size: 12px; }
#kiratt-permission .kp-count span { font-size: 23px; color: #168aaf; font-weight: 400; }
#kiratt-permission .kp-documents { display: grid; gap: 36px; }
#kiratt-permission .kp-document { display: grid; grid-template-columns: .83fr 1.17fr; border: 1px solid var(--kp-line); border-radius: 18px; overflow: hidden; background: #fff; }
#kiratt-permission .kp-document__visual { background: #f4f9fb; padding: 33px 40px 35px; text-align: center; }
#kiratt-permission .kp-document__caption { font-size: 12px; letter-spacing: .1em; color: #65818c; margin-bottom: 22px; }
#kiratt-permission .kp-document__image { display: block; max-width: 288px; margin-inline: auto; }
#kiratt-permission .kp-document__image img { display: block; width: 100%; height: auto; background: white; box-shadow: 0 10px 32px rgba(39,68,85,.10); transition: transform .25s, box-shadow .25s; }
#kiratt-permission .kp-document__image:hover img { transform: translateY(-3px); box-shadow: 0 14px 35px rgba(39,68,85,.17); }
#kiratt-permission .kp-document__zoom { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: 20px; font-size: 13px; color: #0a779f; }
#kiratt-permission .kp-document__zoom svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
#kiratt-permission .kp-document__info { padding: 42px 44px 38px; align-self: center; min-width: 0; }
#kiratt-permission .kp-label { display: inline-block; border: 1px solid #bfdeea; border-radius: 3px; color: #13799f; padding: 3px 12px; font-size: 12px; letter-spacing: .035em; }
#kiratt-permission .kp-document h3 { margin-top: 16px; font-size: 23px; letter-spacing: .015em; overflow-wrap: anywhere; }
#kiratt-permission .kp-document__summary { margin-top: 14px; font-size: 14px; color: var(--kp-muted); line-height: 1.95; }
#kiratt-permission .kp-data { margin-top: 26px; border-top: 1px solid var(--kp-line); }
#kiratt-permission .kp-data > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--kp-line); font-size: 13px; line-height: 1.8; }
#kiratt-permission .kp-data dt { color: var(--kp-muted); font-weight: 400; }
#kiratt-permission .kp-data dd { color: var(--kp-ink); font-weight: 500; overflow-wrap: anywhere; }
#kiratt-permission .kp-data > div:first-child dd { font-size: 15px; color: #006a99; letter-spacing: .04em; }
#kiratt-permission .kp-document__note { margin-top: 18px; font-size: 11px; color: #687f89; line-height: 1.9; }
#kiratt-permission .kp-related { padding: 66px 0 70px; background: #f5fafc; }
#kiratt-permission .kp-related__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
#kiratt-permission .kp-related__card { display: block; position: relative; min-height: 216px; border-radius: 12px; border: 1px solid #dfedf2; background: white; padding: 27px 29px; }
#kiratt-permission .kp-related__card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(29,105,132,.08); }
#kiratt-permission .kp-related__english { display: block; font-size: 25px; color: #0083b7; font-weight: 400; line-height: 1.4; letter-spacing: .01em; }
#kiratt-permission .kp-related__card h3 { margin-top: 6px; font-size: 16px; }
#kiratt-permission .kp-related__card p { margin-top: 15px; padding-right: 20px; color: var(--kp-muted); font-size: 12px; line-height: 1.95; }
#kiratt-permission .kp-related__arrow { display: flex; align-items: center; justify-content: center; position: absolute; right: 22px; bottom: 23px; width: 32px; height: 32px; border-radius: 50%; color: #087fab; border: 1px solid #cae4ee; font-size: 18px; }
#kiratt-permission .kp-contact { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 44px; padding-top: 34px; border-top: 1px solid #d7e8ef; }
#kiratt-permission .kp-contact p { font-size: 14px; letter-spacing: .06em; color: #1682aa; }
#kiratt-permission .kp-contact h3 { font-size: 16px; margin-top: 4px; }
#kiratt-permission .kp-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 36px; min-width: 240px; min-height: 55px; border: 1px solid #bddae7; background: white; color: #076c99; border-radius: 6px; padding: 13px 22px; font-size: 13px; }
#kiratt-permission .kp-button:hover { background: #e8f6fb; border-color: #008bc1; }
#kiratt-permission .kp-viewer:not([open]) { display: none; }
#kiratt-permission .kp-viewer { position: fixed; inset: 0; width: min(860px, calc(100vw - 32px)); max-width: none; height: auto; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); margin: auto; padding: 0; border: none; border-radius: 14px; background: white; color: var(--kp-ink); box-shadow: 0 24px 80px #112d4750; overflow: hidden; }
#kiratt-permission .kp-viewer[open] { display: flex; flex-direction: column; }
#kiratt-permission .kp-viewer::backdrop { background: rgba(14,36,49,.72); backdrop-filter: blur(4px); }
#kiratt-permission .kp-viewer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--kp-line); flex-shrink: 0; }
#kiratt-permission .kp-viewer__head h2 { font-size: 15px; margin: 0; }
#kiratt-permission .kp-viewer button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid #ccdee7; border-radius: 6px; background: white; color: #174f69; font-size: 23px; line-height: 1; flex-shrink: 0; }
#kiratt-permission .kp-viewer button:hover { background: #eaf6fb; }
#kiratt-permission .kp-viewer button:disabled { color: #9fb0b9; background: #f7f9fa; cursor: default; }
#kiratt-permission .kp-viewer__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 20px 5px; flex-shrink: 0; }
#kiratt-permission .kp-viewer__zoom { display: flex; align-items: center; gap: 9px; }
#kiratt-permission .kp-viewer__zoom output { min-width: 45px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }
#kiratt-permission .kp-viewer__toolbar a { color: #087aa8; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
#kiratt-permission #kp-viewer-help { padding: 4px 20px 13px; font-size: 11px; color: var(--kp-muted); flex-shrink: 0; }
#kiratt-permission .kp-viewer__canvas { overflow: auto; overscroll-behavior: contain; padding: 24px; background: #edf3f6; min-height: 0; touch-action: pan-x pan-y pinch-zoom; }
#kiratt-permission .kp-viewer__canvas img { display: block; height: auto; width: 100%; max-width: none; margin-inline: auto; box-shadow: 0 3px 16px #183a4819; }
body.kp-viewer-is-open { overflow: hidden; }
@media (max-width: 1000px) {
  #kiratt-permission .kp-shell { width: calc(100% - 56px); }
  #kiratt-permission .kp-document__visual { padding-inline: 28px; }
  #kiratt-permission .kp-document__info { padding-inline: 30px; }
  #kiratt-permission .kp-document h3 { font-size: 20px; }
  #kiratt-permission .kp-data > div { grid-template-columns: 70px minmax(0,1fr); }
  #kiratt-permission .kp-related__card { padding: 25px 22px; }
  #kiratt-permission .kp-related__card p br { display: none; }
}
@media (max-width: 720px) {
  #kiratt-permission { font-size: 15px; }
  #kiratt-permission .kp-shell { width: calc(100% - 40px); }
  #kiratt-permission .kp-breadcrumb { padding-block: 17px; }
  #kiratt-permission .kp-breadcrumb ol { font-size: 10px; gap: 6px 9px; }
  #kiratt-permission .kp-breadcrumb li + li::before { margin-right: 9px; }
  #kiratt-permission .kp-hero__inner { padding-top: 24px; padding-bottom: 47px; }
  #kiratt-permission .kp-eyebrow { font-size: 13px; letter-spacing: .1em; }
  #kiratt-permission .kp-hero h1 { font-size: clamp(25px, 7.8vw, 34px); margin-top: 12px; letter-spacing: .02em; }
  #kiratt-permission .kp-hero__lead { font-size: 13px; margin-top: 18px; line-height: 2.05; }
  #kiratt-permission .kp-hero__index { margin-top: 25px; gap: 20px; }
  #kiratt-permission .kp-hero__index a { gap: 9px; font-size: 11px; }
  #kiratt-permission .kp-hero__word { font-size: 104px; bottom: -19px; right: -30px; }
  #kiratt-permission .kp-hero__rings { width: 400px; height: 400px; top: -150px; right: -180px; }
  #kiratt-permission .kp-content { padding-top: 46px; padding-bottom: 50px; }
  #kiratt-permission .kp-section__head { gap: 14px; margin-bottom: 23px; }
  #kiratt-permission h2 { font-size: 25px; }
  #kiratt-permission .kp-section__intro { font-size: 12px; margin-top: 10px; }
  #kiratt-permission .kp-count { font-size: 10px; flex-shrink: 0; gap: 5px; }
  #kiratt-permission .kp-count span { font-size: 19px; }
  #kiratt-permission .kp-document { grid-template-columns: 1fr; border-radius: 13px; }
  #kiratt-permission .kp-document__visual { padding: 25px 24px 22px; }
  #kiratt-permission .kp-document__caption { font-size: 11px; margin-bottom: 20px; }
  #kiratt-permission .kp-document__image { max-width: 230px; }
  #kiratt-permission .kp-document__zoom { margin-top: 14px; font-size: 12px; }
  #kiratt-permission .kp-document__info { padding: 27px 23px 30px; }
  #kiratt-permission .kp-document h3 { font-size: 20px; line-height: 1.65; }
  #kiratt-permission .kp-document__summary { font-size: 13px; margin-top: 12px; }
  #kiratt-permission .kp-data { margin-top: 21px; }
  #kiratt-permission .kp-data > div { grid-template-columns: 64px minmax(0,1fr); padding-block: 13px; font-size: 12px; gap: 12px; }
  #kiratt-permission .kp-data > div:first-child dd { font-size: 14px; }
  #kiratt-permission .kp-document__note { font-size: 10px; }
  #kiratt-permission .kp-related { padding: 45px 0 46px; }
  #kiratt-permission .kp-related__grid { grid-template-columns: 1fr; gap: 12px; }
  #kiratt-permission .kp-related__card { min-height: auto; padding: 23px 24px; }
  #kiratt-permission .kp-related__english { font-size: 23px; }
  #kiratt-permission .kp-related__card h3 { font-size: 15px; margin-top: 1px; }
  #kiratt-permission .kp-related__card p { font-size: 11px; margin-top: 8px; padding-right: 36px; }
  #kiratt-permission .kp-related__arrow { bottom: 24px; }
  #kiratt-permission .kp-contact { flex-direction: column; align-items: stretch; margin-top: 30px; padding-top: 27px; gap: 19px; }
  #kiratt-permission .kp-contact h3 { font-size: 14px; }
  #kiratt-permission .kp-button { width: 100%; font-size: 13px; min-height: 52px; }
  #kiratt-permission .kp-viewer { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 10px; }
  #kiratt-permission .kp-viewer__head { padding: 10px 12px; }
  #kiratt-permission .kp-viewer__head h2 { font-size: 12px; }
  #kiratt-permission .kp-viewer__toolbar { padding: 10px 12px 5px; }
  #kiratt-permission .kp-viewer__toolbar a { font-size: 10px; }
  #kiratt-permission #kp-viewer-help { padding: 4px 12px 10px; font-size: 10px; }
  #kiratt-permission .kp-viewer__canvas { padding: 14px; }
}
@media (max-width: 360px) {
  #kiratt-permission .kp-count { display: none; }
  #kiratt-permission .kp-document__info { padding-inline: 18px; }
  #kiratt-permission .kp-document h3 { font-size: 18px; }
  #kiratt-permission .kp-hero__index { gap: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  #kiratt-permission *, #kiratt-permission *::before, #kiratt-permission *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  #kiratt-permission .kp-hero__index, #kiratt-permission .kp-related, #kiratt-permission .kp-document__zoom, #kiratt-permission .kp-viewer { display: none !important; }
  #kiratt-permission .kp-shell { width: 100%; }
  #kiratt-permission .kp-hero__inner, #kiratt-permission .kp-content { padding: 20px 0; }
  #kiratt-permission .kp-document { break-inside: avoid; }
}
