/* WordPress上では、このページのCSSが <div class="lparea"> の外（テーマのフッターなど）にも
   効いてしまうため、全体にかかる指定は :where(.lparea) で中だけに限定している。
   :where() は詳細度0なので、素のセレクタだったときと強さは変わらない。 */

/* Box sizing rules */
/* Box sizingの定義 */
:where(.lparea),
:where(.lparea) *,
:where(.lparea) *::before,
:where(.lparea) *::after {
  box-sizing: border-box;
}

/* Remove default padding */
/* デフォルトのpaddingを削除 */
:where(.lparea) ul[class],
:where(.lparea) ol[class] {
  padding: 0;
}

/* Remove default margin */
/* デフォルトのmarginを削除 */
body,
:where(.lparea) h1,
:where(.lparea) h2,
:where(.lparea) h3,
:where(.lparea) h4,
:where(.lparea) p,
:where(.lparea) ul[class],
:where(.lparea) ol[class],
:where(.lparea) li,
:where(.lparea) figure,
:where(.lparea) figcaption,
:where(.lparea) blockquote,
:where(.lparea) dl,
:where(.lparea) dd {
  margin: 0;
}

/* Set core body defaults */
/* bodyのデフォルトを定義 */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
}
/* line-height はテーマのフッターに波及させたくないので .lparea の中だけに当てる */
:where(.lparea) {
  line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
/* class属性を持つul、ol要素のリストスタイルを削除 */
:where(.lparea) ul[class],
:where(.lparea) ol[class] {
  list-style: none;
}

/* A elements that don't have a class get default styles */
/* classを持たない要素はデフォルトのスタイルを取得 */
:where(.lparea) a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
/* img要素の扱いを簡単にする */
:where(.lparea) img {
  /*max-width: 100%;*/
  display: block;
}

/* Natural flow and rhythm in articles by default */
/* article要素内の要素に自然な流れとリズムを定義 */
:where(.lparea) article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
/* inputやbuttonなどのフォントは継承を定義 */
:where(.lparea) input,
:where(.lparea) button,
:where(.lparea) textarea,
:where(.lparea) select {
  font: inherit;
}

/* buttonのスタイルを打ち消し */
:where(.lparea) button {
  padding: 0;
  background: none;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
/* inputのスタイルを打ち消し */
/* ラジオ・チェックボックスは除く。appearance:none を当てると四角や丸ごと消えて、
   Contact Form 7 の選択肢がラベルだけになってしまう（テーマの webforms.css は
   ネイティブ表示のまま 19px に揃える前提で書かれている）。
   :where() で包んでいるので、除外しても詳細度は input のままで変わらない。 */
:where(.lparea) input:where(:not([type="radio"]):not([type="checkbox"])) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    border: none;
    border-radius: 0;
    outline: none;
    background: transparent;
}
:where(.lparea) input[type="text"] {
    padding: 0;
    border: none;
    border-radius: 0;
    outline: none;
    background: none;
}

/* textareaのスタイルを打ち消し */
:where(.lparea) textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    resize: none;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
}

/* selectのスタイルを打ち消し */
:where(.lparea) select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    background: transparent;
}

/* Remove all animations and transitions for people that prefer not to see them */
/* 見たくない人用に、すべてのアニメーションとトランジションを削除 */
@media (prefers-reduced-motion: reduce) {
  :where(.lparea),
  :where(.lparea) * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
