@charset "UTF-8";

/***
    The new CSS reset - version 1.8.4 (last updated 14.2.2023)
    GitHub page: https://github.com/elad2412/the-new-css-reset
***/

/*
 * "Noto Sans JP" is lisenced under the SIL Open Font License 1.1
 * http://fonts.googleapis.com
 * https://www.google.com/fonts/attribution
 * http://scripts.sil.org/OFL
 */
/*
 * "Roboto" is lisenced under the Apache License, version 2.0
 * http://fonts.googleapis.com
 * https://www.google.com/fonts/attribution
 * http://www.apache.org/licenses/LICENSE-2.0.html
 */
/*
 * "源柔ゴシック" is lisenced under the SIL Open Font License 1.1
 * http://jikasei.me/
 * http://jikasei.me/font/genjyuu/
 * http://scripts.sil.org/OFL
 */

/*
    ブラウザの「User-Agent-Stylesheet」のスタイルを、「display」プロパティ以外全て削除
    - 「symbol *"」の部分は、Firefox SVG スプライトのバグ対応
 */
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
  all: unset;
  display: revert;
}

/* box-sizingの優先値 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* アンカータグのポインタカーソルを再適用 */
a, button {
  cursor: revert;
}

/* リストのスタイル（箇条書き・番号）を削除 */
ol, ul, menu {
  list-style: none;
}

/* コンテナを超えないようにする */
img, video, iframe {
  max-inline-size: 100%;
  max-block-size: 100%;
  vertical-align: bottom;
}

/* テーブルのセル間のスペースを削除します */
table {
  border-collapse: collapse;
}

/* Safariで、テキスト入力でuser-select:noneを使用すると動作しない問題の対処。 */
input, textarea {
  -webkit-user-select: auto;
  appearance: auto;
}

/* Safariのtextarea要素の'white-space'プロパティを元に戻す */
textarea {
  white-space: revert;
}

/* meter要素のスタイルを最小限に */
meter {
  -webkit-appearance: revert;
  appearance: revert;
}

/* pre要素にのみ all:revert; を適用 */
:where(pre) {
  all: revert;
}

/* 強調、斜体、取り消しタグのスタイル */
strong, b{
  font-weight: bold;
}
em, i{
  font-style: italic;
}
u{
  text-decoration: underline;
}
del, s{
  text-decoration: line-through;
}

/* input要素のプレースホルダテキスト不透明度をリセット */
::placeholder {
    color: unset;
}

/* デフォルトのリストスタイル『•』を消す */
::marker {
  content: initial;
}

/* 'hidden'属性の機能を修正。display:revert; 属性ではなく、要素に戻す */
:where([hidden]) {
    display: none;
}

/* Chromeのバグ対応
   - 'contenteditable'属性が正しく動作するよう修正 */
:where([contenteditable]:not([contenteditable="false"])) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
    -webkit-user-select: auto;
}

/* draggable機能を復活させる（ChromeとSafariのみ） */
:where([draggable="true"]) {
    -webkit-user-drag: element;
}

/* dialog要素で、モーダルの初期動作をリセット */
:where(dialog:modal) {
  all: revert;
}

/* ルビの文字サイズデフォルト設定 */
ruby > rt{
  font-size: 50%;
  text-align: start;
}

/* 上付き、下付き文字デフォルト設定 */
sup{
  vertical-align: super;
  font-size: smaller;
}
sub{
  vertical-align: sub;
  font-size: smaller;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("../fonts/Roboto-Regular.woff2") format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: bold;
  font-display: swap;
  src: url("../fonts/Roboto-Bold.woff2") format('woff2');
}
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("../fonts/NotoSansJP-Regular.woff2") format('woff2');
}
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: bold;
  font-display: swap;
  src: url("../fonts/NotoSansJP-Bold.woff2") format('woff2');
}

@font-face {
  font-family: 'Genju Gothic';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("../fonts/GenJyuuGothic-Light.woff2") format('woff2');
}

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: normal;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}

@font-face {
  font-family: 'Genju Gothic';
  font-style: normal;
  font-weight: bold;
  font-display: swap;
  src: url("../fonts/GenJyuuGothic-Heavy.woff2") format('woff2');
}

body {
  -webkit-text-size-adjust : 100%;
  word-break: break-all;
  font-family: 'Roboto', Arial, 'Noto Sans JP', "Yu Gothic", YuGothic, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  line-height:1;
  font-size:1rem;
}
  
.clearfix { display: flow-root; }

@media screen and (max-width: 768px) {
  body{
    font-size: calc(17 / 18 * 100%);
  }
}
@media screen and (max-width: 540px) {
  body{
    font-size: calc(16.2 / 18 * 100%);
  }
}