@charset "utf-8";

*, ::after, ::before {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

:host, html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  margin: 0;
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: inherit;
}

blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
  margin: 0;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

img, video {
  max-width: 100%;
  height: auto;
}

audio, canvas, embed, iframe, img, object, svg, video {
  display: block;
  vertical-align: middle;
}

[role=button], button {
  cursor: pointer;
}

.container {
  width: 100%;
}
@media (min-width: 640px) {
  .container {
      max-width: 640px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .container {
      max-width: 1024px;
  }
}
@media (min-width: 1280px) {
  .container {
      max-width: 1280px;
  }
}
@media (min-width: 1400px) {
  .container {
      max-width: 1400px;
  }
}

/* =========================================================================
   1024〜1279px：サイドバー＋メインの2カラムページ（#contents > .container > .row
   > #aside + #main）の共通レイアウト調整。全ページに効く根本対応。

   背景: 上の .container は ≤1279px で max-width:1024px に縮んで中央寄せになるため、
   1024〜1279px ではコンテンツ全体が右に寄り、サイドバー左端がヘッダの JapaTalk
   ロゴ（左端 2rem）よりかなり右に取り残され、列も狭くサイドバーとメインが詰まる。

   対応: この範囲だけ、#aside を持つページのコンテンツ枠を全幅（左右2rem）に広げる。
     ・サイドバー左端 = 2rem となり、ヘッダロゴ（前後ヘッダとも ≤1279px は左端2rem）と
       一直線に揃う（ロゴ側の変更は不要）。
     ・列が広がり、さらに #main に左paddingを足してサイドバーとの間隔を確保。
   ※ #aside の無い1カラムページや ≥1280px は対象外（:has(#aside) で限定）。
   ========================================================================= */
@media (min-width: 1024px) and (max-width: 1279px) {
  #contents > .container:has(#aside) {
    max-width: none;
    padding-left: 2rem;
    padding-right: 2rem;
  }
  #contents .row > #aside + #main {
    padding-left: 1.5rem;
  }
}

.min-h-screen {
  min-height: 100vh;
}

button, 
input:where([type=button]), 
input:where([type=reset]), 
input:where([type=submit]) {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}
button, select {
  text-transform: none;
}
button, input, optgroup, select, textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
[type='text'], input:where(:not([type])), [type='email'], [type='url'], [type='password'], [type='number'], [type='date'], [type='datetime-local'], [type='month'], [type='search'], [type='tel'], [type='time'], [type='week'], [multiple], textarea, select {
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}
menu, ol, ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}
[type='checkbox'], [type='radio'] {
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  -webkit-user-select: none;
  user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #2563eb;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  --tw-shadow: 0 0 #0000;
}
[type='radio'] {
  border-radius: 100%;
}

.teach-box .panel-body .teach-box-R .ellipsis-pc {
    display: -webkit-box;
    -webkit-line-clamp: 12;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* max-height: calc(1.2em * 12); */
}

img.akimark-img {
  display: inline-block;
}
.note-list-main .alert-danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    text-align: center;
}
.note-list-main .alert-danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    text-align: center;
}