@charset "UTF-8";
.allura {
  font-family: "Allura", cursive;
  font-weight: 400;
  font-style: normal;
}

.lexend {
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.cormorant {
  font-family: "Cormorant", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* 変数ファイルをインポート */
/*
  Made by Elly Loel - https://ellyloel.com/
  参考記事:
    - Josh W Comeau - https://courses.joshwcomeau.com/css-for-js/treasure-trove/010-global-styles/
    - Andy Bell - https://piccalil.li/blog/a-modern-css-reset/
    - Adam Argyle - https://unpkg.com/open-props@1.3.16/normalize.min.css / https://codepen.io/argyleink/pen/KKvRORE
*/
/* ====== 基本のリセット ====== */
/* すべての要素の余白とパディングをリセット */
* {
  margin: 0;
  padding: 0;
}

/* ボックスサイズを境界内に収める設定 */
*,
::before,
::after {
  box-sizing: border-box;
}

/* フィールドセットや特定の要素を除き、デフォルトのボーダー設定を削除 */
*:where(:not(fieldset, progress, meter)) {
  border-width: 0;
  border-style: solid;
  background-origin: border-box; /* 背景位置の基準 */
  background-repeat: no-repeat; /* 背景の繰り返しを無効化 */
}

/* ====== HTMLタグのグローバル設定 ====== */
html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* モバイルのタップ時のハイライト無効化 */
  box-sizing: border-box;
  overflow-y: scroll; /* 縦スクロールの常時表示 */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%; /* Android端末対応 */
  scroll-behavior: smooth; /* スムーズスクロールを有効化 */
}

/* ====== bodyの設定 ====== */
body {
  background-color: #fbf7f1;
  box-sizing: border-box;
  color: #3C3C3C;
  font-family: "Zen Kaku Gothic Antique", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 16px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.03em; /* 字間の調整 */
  line-height: 1.45; /* 行間 */
  text-indent: 0.03em;
  position: relative;
  word-wrap: break-word;
  -webkit-font-smoothing: antialiased; /* フォントのスムージング */
}

/* ====== メディア関連のスタイル ====== */
/* 画像、動画などをブロック要素として扱う */
:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
}

/* 画像や動画の最大幅を親要素に合わせる */
:where(img, svg, video) {
  block-size: auto;
  max-inline-size: 100%;
}

/* 画像の縦横比を維持 */
img {
  height: auto;
  max-width: 100%;
  aspect-ratio: auto;
}

/* SVGの基本スタイル */
:where(svg) {
  stroke: none;
  fill: currentColor;
}

/* SVGの属性未指定時の色のデフォルトスタイル */
:where(svg):where(:not([fill])) {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* SVGの属性未指定時の大きさのデフォルトスタイル */
:where(svg):where(:not([width])) {
  inline-size: auto;
  block-size: auto;
}

/* ====== フォーム要素のスタイル ====== */
/* フォーム要素のデフォルトを継承 */
:where(input, button, textarea, select),
:where(input[type=file])::-webkit-file-upload-button {
  color: inherit;
  font: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}

/* テキストエリアのリサイズを垂直方向に制限 */
:where(textarea) {
  resize: vertical;
}

/* リサイズがブロック対応の場合の条件付きスタイル */
@supports (resize: block) {
  :where(textarea) {
    resize: block;
  }
}
/* ====== タイポグラフィの設定 ====== */
/* タイトルや段落の折り返し設定 */
:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
}

/* 見出しのデフォルトサイズ */
h1 {
  font-size: 2em;
}

/* ====== リストのリセット ====== */
/* リストスタイルを削除 */
:where(ul, ol)[role=list] {
  list-style: none;
}

ul, ol {
  list-style: none;
}

/* モノスペースフォントを使用する要素（<code>, <kbd>, <pre>, <samp>） */
code, kbd, pre, samp {
  font-family: monospace, monospace; /* 等幅フォントを設定 */
}

/* 定義要素（<dfn>）のスタイル */
dfn {
  font-style: italic; /* イタリック体を適用 */
}

/* テーブルの間隔をリセット */
table {
  border-collapse: collapse; /* 隣接するセルのボーダーを結合 */
  border-spacing: 0; /* セル間のスペースを削除 */
}

/* 上付き文字（<sup>）と下付き文字（<sub>）のスタイル */
sub, sup {
  font-size: 70%; /* サイズを縮小 */
  line-height: 0; /* 行の高さを削除 */
  position: relative; /* 配置を調整可能にする */
  vertical-align: baseline; /* 基準線に揃える */
}

/* 住所（<address>）と強調文字（<em>）のデフォルトスタイルを無効化 */
address,
em {
  font-style: normal; /* 通常のスタイルに戻す */
}

/* リンク（<a>）のスタイル */
a {
  color: #3C3C3C; /* テキスト色を黒に設定 */
  cursor: pointer; /* クリック可能であることを示す */
  outline: none; /* アウトラインを削除 */
  text-decoration: none; /* 下線を削除 */
  text-underline-offset: 5px; /* 下線の位置をテキストから少し離す */
}

/* リンクのアクティブまたはホバー状態でアウトライン幅を削除 */
a:active,
a:hover {
  outline-width: 0; /* 不要なアウトラインを非表示 */
}

/* ====== リンクのスタイル ====== */
/* 特定のクラスがないリンクの装飾をスキップ */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* ====== 汎用的なリンクやボタンのスタイル ====== */
/* リンク、エリア、ボタン、フォーム要素など、ユーザー操作が可能な要素にポインターカーソルを設定 */
:where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
  cursor: pointer; /* クリック可能であることを示すカーソル */
  touch-action: manipulation; /* ジェスチャー（ピンチやズーム）を無効化し、操作を簡略化 */
}

/* ファイルアップロードボタン専用のスタイル */
/* input[type="file"]要素ではカーソルをデフォルトに設定 */
:where(input[type=file]) {
  cursor: auto; /* ユーザーにとって直感的な操作を保つ */
}

/* ファイルアップロードボタンのサブ要素にポインターカーソルを設定 */
:where(input[type=file])::-webkit-file-upload-button {
  cursor: pointer; /* ボタンがクリック可能であることを明示 */
}
:where(input[type=file])::-webkit-file-upload-button,
:where(input[type=file])::file-selector-button {
  cursor: pointer; /* ボタンがクリック可能であることを明示 */
}

/* ====== インタラクションとアクセシビリティ ====== */
/* キーボードフォーカス時の視覚的フィードバック */
:where(:not(:active)):focus-visible {
  border-radius: 1px;
  outline: 2px solid #005fcc;
  outline-offset: 5px;
}

/* フォーカス時の遷移アニメーションを設定 */
@media (prefers-reduced-motion: no-preference) {
  :focus-visible {
    transition: outline-offset 145ms cubic-bezier(0.25, 0, 0.4, 1);
  }
  :where(:not(:active)):focus-visible {
    transition-duration: 0.25s;
  }
}
/* 検索入力フィールドの特定のブラウザスタイルをリセット */
[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none; /* 特定のブラウザ独自のスタイルを削除 */
}

/* ====== ボタンとセレクト要素のスタイル ====== */
/* ボタンやセレクト要素のテキストを変形させないように設定 */
button, select {
  background-color: transparent;
  text-transform: none; /* テキストの大文字化や小文字化を無効化 */
}

/* セレクト要素のスタイルをブラウザデフォルトから解除 */
select {
  -moz-appearance: none; /* Firefox用のデフォルトスタイルを無効化 */
  -webkit-appearance: none; /* WebKitブラウザ用のデフォルトスタイルを無効化 */
}

/* ボタンやフォーム要素に対する基本的なスタイル */
:where(button, button[type], input[type=button], input[type=submit], input[type=reset]) {
  -webkit-tap-highlight-color: transparent; /* タップ時のハイライトを非表示 */
  -webkit-touch-callout: none; /* 長押しによるコンテキストメニューの非表示（モバイル向け） */
  -webkit-user-select: none; /* テキスト選択を無効化（Safari向け） */
  -moz-user-select: none;
       user-select: none; /* テキスト選択を無効化（全ブラウザ向け） */
  text-align: center; /* テキストを中央揃え */
}

/* 無効化されたボタンのスタイル */
:where(button, button[type], input[type=button], input[type=submit], input[type=reset])[disabled] {
  cursor: not-allowed; /* 無効状態であることを示すカーソル */
}

/* 省略形（<abbr>）のタイトルに下線を追加 */
abbr[title] {
  border-bottom: 1px dotted; /* 点線の下線を表示 */
  text-decoration: none; /* デフォルトのテキスト装飾を無効化 */
}

/* ====== フォーム関連要素のスタイル ====== */
/* legend要素をテーブル表示として設定 */
legend {
  display: table; /* フォーム内でのテキスト配置を整える */
  max-width: 100%; /* 最大幅を親要素に合わせる */
}

/* ファイルアップロードボタンのスタイルを調整 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* ボタンスタイルを適用 */
  font: inherit; /* 親要素のフォントスタイルを継承 */
}

/* ====== 検索ボックスのスタイル ====== */
/* 検索ボックスのアウトライン位置を調整 */
[type=search] {
  outline-offset: -2px; /* アウトラインを要素から少し内側に寄せる */
}

/* ====== プログレスバーのスタイル ====== */
/* プログレスバーの垂直方向の位置を調整 */
progress {
  vertical-align: baseline; /* テキストのベースラインに揃える */
}

/* サマリー要素（<summary>）をリスト項目として表示 */
summary {
  display: list-item; /* リスト内の項目のように振る舞う */
}

/* 小さい文字（<small>）のサイズを調整 */
small {
  font-size: 80%; /* 通常文字の80%のサイズ */
}

/* ====== メディアクエリによるスタイル ====== */
@media screen {
  /* [hidden~="screen"]属性が設定された要素のデフォルト表示を継承 */
  [hidden~=screen] {
    display: inherit; /* 親要素の表示方法を継承 */
  }
  /* 非アクティブ状態の[hidden~="screen"]属性要素を完全に非表示に設定 */
  [hidden~=screen]:not(:active):not(:focus):not(:target) {
    position: absolute !important; /* 要素をページレイアウトから除外 */
    clip: rect(0 0 0 0) !important; /* 要素を視覚的に見えないようにクリップ */
  }
}
/* ====== ARIA属性によるアクセシビリティ向上 ====== */
/* aria-busy属性がtrueの場合、処理中であることを示すカーソルを表示 */
[aria-busy=true] {
  cursor: progress; /* 処理中のインジケーター */
}

/* aria-controls属性が指定された要素にポインターカーソルを設定 */
[aria-controls] {
  cursor: pointer; /* クリック可能であることを明示 */
}

/* aria-disabled属性が指定された要素にデフォルトのカーソルを設定 */
[aria-disabled] {
  cursor: default; /* 操作不可であることを示す */
}

/* ====== テキスト選択時のスタイル ====== */
/* 選択されたテキストの背景色とテキスト色を設定 */
::-moz-selection {
  background-color: #b3d7ff; /* 背景色を淡い青に設定 */
  color: #000; /* テキスト色を黒に設定 */
  text-shadow: none; /* テキストシャドウを無効化 */
}
::-moz-selection,
::selection {
  background-color: #b3d7ff; /* 背景色を淡い青に設定 */
  color: #000; /* テキスト色を黒に設定 */
  text-shadow: none; /* テキストシャドウを無効化 */
}
/*# sourceMappingURL=reset.css.map */