/* =========================================================
   accessibility.css
   - body class によるアクセシビリティ切替
   - 背景色変更は black / blue のみ付与
   - white は「標準状態に戻す」
   - 文字サイズは large のみ付与、default は解除
========================================================= */

/* -------------------------
   ベース変数
------------------------- */
body {
  --acc-bg: #ffffff;
  --acc-bg-soft: #f7f7f7;
  --acc-text: #222222;
  --acc-text-muted: #555555;
  --acc-link: #005bac;
  --acc-link-hover: #003f7a;
  --acc-border: #bfbfbf;
  --acc-focus: #ff9900;
  --acc-font-scale: 1;
}

/* -------------------------
   基本
------------------------- */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--acc-bg);
  color: var(--acc-text);
  font-size: calc(1rem * var(--acc-font-scale));
  line-height: 1.75;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

/* 文字色の継承を広めに確保 */
body,
body p,
body li,
body dt,
body dd,
body th,
body td,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body span,
body small,
body strong,
body em,
body label,
body legend,
body caption,
body figcaption,
body address,
body blockquote,
body cite,
body time,
body div,
body section,
body article,
body aside,
body nav,
body main,
body header,
body footer,
body ul,
body ol,
body dl,
body form {
  color: inherit;
}

/* 見出し */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  color: var(--acc-text);
  line-height: 1.4;
}

/* 補足文字 */
body small,
body .small,
body .note,
body .caption,
body .sub,
body .txt-small {
  color: var(--acc-text-muted);
}

/* 罫線系 */
body table,
body th,
body td,
body fieldset,
body input,
body textarea,
body select,
body button,
body hr {
  border-color: var(--acc-border);
}

/* テーブル */
body table {
  border-collapse: collapse;
}

/* フォーム */
body input,
body textarea,
body select,
body button {
  color: var(--acc-text);
  background-color: #ffffff;
  border: 1px solid #333;
}

/* プレースホルダー */
body input::placeholder,
body textarea::placeholder {
  color: #777777;
}

/* よくある白背景・白文字指定の緩和用 */
body .bg-white,
body .background-white,
body .white,
body .panel,
body .unit,
body .module {
  color: inherit;
}

/* 画像などは原則そのまま */
body img,
body svg,
body video,
body canvas,
body picture,
body iframe,
body object,
body embed {
  max-width: 100%;
  height: auto;
}

/* -------------------------
   文字サイズ
------------------------- */
body.font-large {
  --acc-font-scale: 1.125;
}

body.font-large p,
body.font-large li,
body.font-large dt,
body.font-large dd,
body.font-large th,
body.font-large td,
body.font-large label,
body.font-large a,
body.font-large button,
body.font-large input,
body.font-large select,
body.font-large textarea,
body.font-large small,
body.font-large span {
  font-size: 110%;
}
body.font-large h1{
  font-size: 2.6em;
}
body.font-large h2{
  font-size: 2.5em;
}
body.font-large h3{
  font-size: 2.4em;
}
body.font-large h4{
  font-size: 2.3em;
}
body.font-large h5{
  font-size: 2.2em;
}
body.font-large h6{
  font-size: 2.1em;
}
body.font-large footer > p:nth-of-type(1) {
  font-size: 2em;
}

/* -------------------------
   黒背景テーマ
------------------------- */
body.theme-black {
  --acc-bg: #000000;
  --acc-bg-soft: #111111;
  --acc-text: #ffffff;
  --acc-text-muted: #e0e0e0;
  --acc-link: #7ec8ff;
  --acc-link-hover: #b8e3ff;
  --acc-border: #ffffff;
  --acc-focus: #ffd54f;
}

body.theme-black,
body.theme-black main,
body.theme-black header,
body.theme-black footer,
body.theme-black nav,
body.theme-black section,
body.theme-black dl,
body.theme-black h2,
body.theme-black h3,
body.theme-black div,
body.theme-black a,
body.theme-black article,
body.theme-black aside,
body.theme-black .block,
body.theme-black .wrapper,
body.theme-black .container,
body.theme-black .inner,
body.theme-black .content,
body.theme-black .contents {
  background-color: #000000 !important;
  color: #ffffff !important;
}

body.theme-black h1,
body.theme-black h2,
body.theme-black h3,
body.theme-black h4,
body.theme-black h5,
body.theme-black h6,
body.theme-black p,
body.theme-black li,
body.theme-black dt,
body.theme-black dd,
body.theme-black th,
body.theme-black td,
body.theme-black span,
body.theme-black strong,
body.theme-black em,
body.theme-black small,
body.theme-black label,
body.theme-black legend,
body.theme-black caption {
  color: inherit;
}

body.theme-black input,
body.theme-black textarea,
body.theme-black select,
body.theme-black button {
  background-color: #111111;
  color: #ffffff;
  border-color: #ffffff;
}

body.theme-black input::placeholder,
body.theme-black textarea::placeholder {
  color: #cccccc;
}

body.theme-black table,
body.theme-black th,
body.theme-black td,
body.theme-black fieldset,
body.theme-black hr,
body.theme-black .btn,
body.theme-black .button,
body.theme-black [class*="btn-"],
body.theme-black [class*="button-"] {
  border-color: #ffffff;
}

body.theme-black [style*="color:"] {
  color: var(--acc-text) !important;
}

body.theme-black [style*="background-color:#fff"],
body.theme-black [style*="background-color: #fff"],
body.theme-black [style*="background:#fff"],
body.theme-black [style*="background: #fff"],
body.theme-black [style*="background-color:white"],
body.theme-black [style*="background-color: white"] {
  background-color: transparent !important;
}

body.theme-black img,
body.theme-black svg,
body.theme-black video,
body.theme-black canvas,
body.theme-black iframe {
  background-color: transparent !important;
  color: initial !important;
}
html body.theme-black a,
html body.theme-blue a {
  color: #FF0 !important;
}

/* -------------------------
   青背景テーマ
------------------------- */
body.theme-blue {
  --acc-bg: #003c88;
  --acc-bg-soft: #0d4ea6;
  --acc-text: #ffffff;
  --acc-text-muted: #e8f0ff;
  --acc-link: #ffeb3b;
  --acc-link-hover: #fff27a;
  --acc-border: #ffffff;
  --acc-focus: #ffd54f;
}

body.theme-blue,
body.theme-blue main,
body.theme-blue header,
body.theme-blue footer,
body.theme-blue nav,
body.theme-blue section,
html body.theme-blue main h2,
body.theme-blue h3,
body.theme-blue dl,
body.theme-blue div,
body.theme-blue a,
body.theme-blue div.sp-header,
body.theme-blue article,
body.theme-blue aside,
body.theme-blue .block,
body.theme-blue .wrapper,
body.theme-blue .container,
body.theme-blue .inner,
body.theme-blue .content,
body.theme-blue .contents {
  background-color: #003c88 !important;
  color: #ffffff !important;
}

body.theme-blue h1,
body.theme-blue h2,
body.theme-blue h3,
body.theme-blue h4,
body.theme-blue h5,
body.theme-blue h6,
body.theme-blue p,
body.theme-blue li,
body.theme-blue dt,
body.theme-blue dd,
body.theme-blue th,
body.theme-blue td,
body.theme-blue span,
body.theme-blue strong,
body.theme-blue em,
body.theme-blue small,
body.theme-blue label,
body.theme-blue legend,
body.theme-blue caption {
  color: inherit;
}

body.theme-blue input,
body.theme-blue textarea,
body.theme-blue select,
body.theme-blue button {
  background-color: #0d4ea6;
  color: #ffffff;
  border-color: #ffffff;
}

body.theme-blue input::placeholder,
body.theme-blue textarea::placeholder {
  color: #dbe7ff;
}

body.theme-blue table,
body.theme-blue th,
body.theme-blue td,
body.theme-blue fieldset,
body.theme-blue hr,
body.theme-blue .btn,
body.theme-blue .button,
body.theme-blue [class*="btn-"],
body.theme-blue [class*="button-"] {
  border-color: #ffffff;
}

body.theme-blue [style*="color:"] {
  color: var(--acc-text) !important;
}

body.theme-blue [style*="background-color:#fff"],
body.theme-blue [style*="background-color: #fff"],
body.theme-blue [style*="background:#fff"],
body.theme-blue [style*="background: #fff"],
body.theme-blue [style*="background-color:white"],
body.theme-blue [style*="background-color: white"] {
  background-color: transparent !important;
}

body.theme-blue img,
body.theme-blue svg,
body.theme-blue video,
body.theme-blue canvas,
body.theme-blue iframe {
  background-color: transparent !important;
  color: initial !important;
}

body.theme-blue #about section > p img,
body.theme-black #about section > p img,
body.theme-blue #about .about-wrap > p img,
body.theme-black #about .about-wrap > p img,
body.theme-blue .kasou_logo img,
body.theme-black .kasou_logo img,
body.theme-blue .sp-header p img,
body.theme-black .sp-header p img{
  background: #FFF !important;
}