/*===============================

	iOS タップハイライト対策

================================*/


/* ===== iOS タップハイライト対策 ===== */
a,
a * {
  -webkit-tap-highlight-color: transparent;
}

a {
  -webkit-touch-callout: none;
}

/* ===== 画像リンクの当たり判定安定 ===== */
a img {
  display: block;
}

/* ===== iOS/モバイルで押した瞬間の青文字を防止 ===== */
.taskbtn,
.taskbtn:active,
.taskbtn:focus,
.startitem,
.startitem:active,
.startitem:focus {
  color: inherit;
  outline: none;
}

.taskbtn a,
.taskbtn a:active,
.taskbtn a:focus {
  color: inherit;
  text-decoration: none;
}

/* ===== iOS: buttonタップ時の青いハイライト対策 ===== */
html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

button,
button *,
.btn,
.btn *,
[role="button"],
[role="button"] * {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* ===== iOSの青いフォーカス枠/ハイライトが出る場合の保険 ===== */
button:focus,
button:focus-visible,
.btn:focus,
.btn:focus-visible {
  outline: none;
}


/*===============================

	スクロールバー

================================*/

:root {
  --sb-track: #ffffff;
  --sb-thumb: #ffdb2b;
  --sb-border: #000000;
  --sb-size: 14px;
  --sb-radius: 4px;
}

/* ===== Firefox ===== */
* {
  scrollbar-width: auto;
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}

/* ===== WebKit (Chrome / Edge / Safari) ===== */
::-webkit-scrollbar {
  width: var(--sb-size);
  height: var(--sb-size);
}

::-webkit-scrollbar-track {
  background: var(--sb-track);
  border-left: 1px solid var(--sb-border);
  border-top: 1px solid var(--sb-border);
}

::-webkit-scrollbar-thumb {
  background: var(--sb-thumb);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
}

::-webkit-scrollbar-thumb:hover {
  background: #ffe86a;
}

::-webkit-scrollbar-corner {
  background: var(--sb-track);
  border-left: 1px solid var(--sb-border);
  border-top: 1px solid var(--sb-border);
}

/*===============================

	カーソル

================================*/

/* ===== 基本カーソル ===== */
html,
body {
  cursor: url("/img/cursor.png") 0 0, auto;
}

a,
button,
[role="button"],
.icon-item,
.icon-menu a,
.startitem,
.taskbtn,
.task-mail,
.task-music {
  cursor: url("/img/cursor.png") 0 0, pointer;
}

input,
textarea {
  cursor: text;
}

select {
  cursor: default;
}

/* ===== grabbing ===== */
body.grabbing,
body.grabbing * {
  cursor: grabbing !important;
}

/*===============================

	フォント

================================*/

:root {
  --font-ja: "MS PGothic", "MS UI Gothic", "Osaka", "Meiryo", sans-serif;
  --font-en: "Neuton", serif;
}

/* ===== ベース ===== */
html,
body {
  font-family: var(--font-ja) !important;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: auto;
  font-smooth: never;
  line-height: 1.55;
}

body {
  letter-spacing: -0.01em;
}

/* ===== 英語 ===== */
:lang(en),
.en {
  font-family: var(--font-en) !important;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: none !important;
  filter: none !important;
  letter-spacing: .02em;
}

h1,
h2,
h3 {
  font-weight: bold;
  letter-spacing: .01em;
}