@charset "UTF-8";
@font-face {
  font-family: "TirelesslyLoveYou";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/TirelesslyLoveYou.woff2") format("woff2"); }

@font-face {
  font-family: "Philosopher";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/Philosopher-Regular.woff2") format("woff2"); }

@font-face {
  font-family: "Philosopher";
  font-style: italic;
  font-weight: 400;
  src: url("/fonts/Philosopher-Italic.woff2") format("woff2"); }

@font-face {
  font-family: "Philosopher";
  font-style: normal;
  font-weight: 600;
  src: url("/fonts/Philosopher-Bold.woff2") format("woff2"); }

@font-face {
  font-family: "Philosopher";
  font-style: italic;
  font-weight: 600;
  src: url("/fonts/Philosopher-BoldItalic.woff2") format("woff2"); }

/* Noto Sans */
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/NotoSansJP-Regular.woff2") format("woff2"); }

@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 700;
  src: url("/fonts/NotoSansJP-Bold.woff2") format("woff2"); }

/* Noto Serif */
@font-face {
  font-family: "Noto Serif";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/NotoSerifJP-Regular.woff2") format("woff2"); }

@font-face {
  font-family: "Noto Serif";
  font-style: normal;
  font-weight: 700;
  src: url("/fonts/NotoSerifJP-Bold.woff2") format("woff2"); }

/* Lato - Normal */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 100;
  src: url("/fonts/Lato-Thin.woff2") format("woff2"); }

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 300;
  src: url("/fonts/Lato-Light.woff2") format("woff2"); }

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/Lato-Regular.woff2") format("woff2"); }

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  src: url("/fonts/Lato-Bold.woff2") format("woff2"); }

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 900;
  src: url("/fonts/Lato-Black.woff2") format("woff2"); }

#category {
  /************************テキスト幅*****************************************/ }
  #category p {
    color: #122b88; }
  #category h1.masthead {
    display: block;
    text-align: center;
    /***テキスト中央寄せ***/
    font-family: "Noto Serif";
    padding: 0.3em 0 0.3em;
    /****タイトルの下部に余白追加*****/
    color: #122b88;
    text-indent: 0.5em;
    line-height: 2;
    background-color: #f2f2f2;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto; }
  #category .oomidashi {
    color: #ffffff;
    font-weight: normal;
    /*太字を解除 */
    font-weight: 600;
    /* 程よい強調（bold未満） */
    display: block;
    width: 100%;
    text-align: left;
    border-color: #28008A;
    text-indent: 1.5em;
    margin-top: 1.2em;
    margin-bottom: 1.2em;
    line-height: 2;
    background: linear-gradient(to right, #122b88, #3c65ff, #6ba4ff);
    /* 左→右グラデーション */
    font-size: 1.2em;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    /* 立体感 */
    border-radius: 4px;
    /* 角丸で柔らかく */ }
  @media screen and (max-width: 768px) {
    #category .oomidashi {
      font-size: 1em;
      /* 好みで0.9emや0.8emなどにも変更可能 */
      text-align: center;
      /* 必要ならスマホで中央寄せ */ } }
  #category .table-edit {
    max-width: 1200px;
    /* PCでは1200pxまで広がる */
    width: 100%;
    /* スマホでは画面幅いっぱいで表示 */
    line-height: 1.8;
    /* 行間を1.2倍に広げる */
    padding-left: 1.0em;
    box-sizing: border-box;
    /* ← 内側余白を含めて1200pxに収まる！ */
    color: #4c4c4c;
    /* フォントカラー  */
    font-size: 18px; }

#single {
  /************************テキスト幅*****************************************/ }
  #single p {
    color: #122b88; }
  #single h1.masthead {
    display: block;
    text-align: center;
    /***テキスト中央寄せ***/
    font-family: "Noto Serif";
    padding: 0.3em 0 0.3em;
    /****タイトルの下部に余白追加*****/
    color: #122b88;
    text-indent: 0.5em;
    line-height: 2;
    background-color: #f2f2f2;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto; }
  #single .oomidashi {
    color: #ffffff;
    font-weight: normal;
    /*太字を解除 */
    font-weight: 600;
    /* 程よい強調（bold未満） */
    display: block;
    width: 100%;
    text-align: left;
    border-color: #28008A;
    text-indent: 1.5em;
    margin-top: 1.2em;
    margin-bottom: 1.2em;
    line-height: 2;
    background: linear-gradient(to right, #122b88, #3c65ff, #6ba4ff);
    /* 左→右グラデーション */
    font-size: 1.2em;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    /* 立体感 */
    border-radius: 4px;
    /* 角丸で柔らかく */ }
  @media screen and (max-width: 768px) {
    #single .oomidashi {
      font-size: 1em;
      /* 好みで0.9emや0.8emなどにも変更可能 */
      text-align: center;
      /* 必要ならスマホで中央寄せ */ } }
  #single .nakamidashi {
    color: #000000;
    display: block;
    width: 100%;
    text-align: left;
    text-indent: 1.5em;
    padding: 0.1em 0em 0.1em 0.5em;
    /* 上・右・下・左 */
    margin-top: 1.2em;
    margin-bottom: 1.2em;
    line-height: 2;
    font-size: 1.2em;
    background: linear-gradient(to right, #a1b5ff, #d9e2ff);
    text-indent: 0.5em;
    box-sizing: border-box;
    /* 横幅調整 */
    border-radius: 4px;
    /* 角丸で柔らかく */ }
  #single .komidashi {
    color: #122b88;
    /* 大見出しと同系色で統一感を */
    font-weight: bold;
    display: block;
    width: 100%;
    text-align: left;
    text-indent: 1em;
    padding: 0.1em 0 0em 0em;
    margin-top: 1.5em;
    margin-bottom: 1.2em;
    border-left: 5px solid #122b88;
    /* 左線で見出し感を強調 */
    background-color: #f0f4ff;
    /* 薄い青背景で優しい印象に */
    font-size: 1em;
    /* 大見出しより少し小さく */
    line-height: 2.0;
    border-radius: 4px;
    /* 角丸で柔らかく */ }
  #single .table-edit {
    max-width: 1200px;
    /* PCでは1200pxまで広がる */
    width: 100%;
    /* スマホでは画面幅いっぱいで表示 */
    line-height: 1.8;
    /* 行間を1.2倍に広げる */
    padding-left: 1.0em;
    box-sizing: border-box;
    /* ← 内側余白を含めて1200pxに収まる！ */
    color: #4c4c4c;
    /* フォントカラー  */
    font-size: 18px; }
  @media screen and (max-width: 768px) {
    #single .table-edit {
      width: 100%;
      /* スマホは横幅100%に */
      padding-left: 0.2em;
      /* ← スマホ時の左余白（調整可能） */
      font-size: 18px;
      /* 小さめにしたほうが読みやすい */ } }
#page {
  /************************テキスト幅*****************************************/
  /************************リスト*****************************************/ }
  #page p {
    color: #122b88; }
  #page h1.masthead {
    display: block;
    text-align: center;
    /***テキスト中央寄せ***/
    font-family: "Noto Serif";
    padding: 0.3em 0 0.3em;
    /****タイトルの下部に余白追加*****/
    color: #122b88;
    text-indent: 0.5em;
    line-height: 2;
    background-color: #f2f2f2;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto; }
  #page .oomidashi {
    color: #ffffff;
    font-weight: normal;
    /*太字を解除 */
    font-weight: 600;
    /* 程よい強調（bold未満） */
    display: block;
    width: 100%;
    text-align: left;
    border-color: #28008A;
    text-indent: 1.5em;
    margin-top: 1.2em;
    margin-bottom: 1.2em;
    line-height: 2;
    background: linear-gradient(to right, #122b88, #3c65ff, #6ba4ff);
    /* 左→右グラデーション */
    font-size: 1.2em;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    /* 立体感 */
    border-radius: 4px;
    /* 角丸で柔らかく */ }
  @media screen and (max-width: 768px) {
    #page .oomidashi {
      font-size: 1em;
      /* 好みで0.9emや0.8emなどにも変更可能 */
      text-align: center;
      /* 必要ならスマホで中央寄せ */ } }
  #page .nakamidashi {
    color: #000000;
    display: block;
    width: 100%;
    text-align: left;
    text-indent: 1.5em;
    padding: 0.1em 0em 0.1em 0.5em;
    /* 上・右・下・左 */
    margin-top: 1.2em;
    margin-bottom: 1.2em;
    line-height: 2;
    font-size: 1.2em;
    background: linear-gradient(to right, #a1b5ff, #d9e2ff);
    text-indent: 0.5em;
    box-sizing: border-box;
    /* 横幅調整 */
    border-radius: 4px;
    /* 角丸で柔らかく */ }
  #page .komidashi {
    color: #122b88;
    /* 大見出しと同系色で統一感を */
    font-weight: bold;
    display: block;
    width: 100%;
    text-align: left;
    text-indent: 1em;
    padding: 0.1em 0 0em 0em;
    margin-top: 1.5em;
    margin-bottom: 1.2em;
    border-left: 5px solid #122b88;
    /* 左線で見出し感を強調 */
    background-color: #f0f4ff;
    /* 薄い青背景で優しい印象に */
    font-size: 1em;
    /* 大見出しより少し小さく */
    line-height: 2.0;
    border-radius: 4px;
    /* 角丸で柔らかく */ }
  #page .free {
    color: #122b88;
    /* 濃い青で統一感 */
    font-family: "Noto Sans JP", sans-serif;
    /* 洗練された和文ゴシック */
    font-weight: 600;
    /* 見出しらしい程よい強調 */
    display: block;
    width: 100%;
    max-width: 1000px;
    margin: 1.5em auto 1.2em;
    padding: 0.7em 1em;
    text-align: left;
    line-height: 1.8;
    font-size: 1.1em;
    background: linear-gradient(to right, #f0f4ff, #ffffff);
    /* 左から白へのグラデ背景 */
    border-left: 6px solid #122b88;
    /* アクセントの左線 */
    border-radius: 4px;
    /* 柔らかい角丸 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    /* さりげない立体感 */ }
  #page .table-edit {
    max-width: 1200px;
    /* PCでは1200pxまで広がる */
    width: 100%;
    /* スマホでは画面幅いっぱいで表示 */
    line-height: 1.8;
    /* 行間を1.2倍に広げる */
    padding-left: 1.0em;
    box-sizing: border-box;
    /* ← 内側余白を含めて1200pxに収まる！ */
    color: #4c4c4c;
    /* フォントカラー  */
    font-size: 18px; }
  @media screen and (max-width: 768px) {
    #page .table-edit {
      width: 100%;
      /* スマホは横幅100%に */
      padding-left: 0.2em;
      /* ← スマホ時の左余白（調整可能） */
      font-size: 18px;
      /* 小さめにしたほうが読みやすい */ } }
  #page .list_test-wrap {
    list-style: none;
    /* デフォルトのアイコンを消す */
    margin: 0;
    /* デフォルト指定上書き */
    padding: 0;
    /* デフォルト指定上書き */
    margin: 0 0 0 2em;
    /* 左に2emの余白を入れる*/ }
  #page .list_test-wrap li {
    margin-bottom: 0.6em;
    /* リスト間のスペースを広げる */ }
  #page .list_test:before {
    content: "";
    /* 空の要素作成 */
    width: 7px;
    /* 幅指定 */
    height: 7px;
    /* 高さ指定 */
    display: inline-block;
    /* インラインブロックにする */
    background-color: #a2b5ff;
    /* 背景色指定 */
    border-radius: 50%;
    /* 要素を丸くする */
    position: relative;
    /* 位置調整 */
    right: 0.8em;
    top: -2px;
    /* 丸の上下調整 */ }