body {
    font-family: "Helvetica Neue",
        Arial,
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        Meiryo,
        sans-serif;
    background-color:#ffffff;
    color:#222222;
}

.page-header {
    background-color: #ffffff;
    margin-top: 0;
    margin-bottom: 0;
    padding: 20px 20px 10px 20px;
    text-align: center;
    border-bottom: 1px solid;
    border-color: #dddddd;
}

.page-content {
    background-color: #f8f8f8;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid;
    border-color: #dddddd;
}

.page-footer {
    padding: 2.5rem 0;
    text-align: center;
    background-color: #ffffff;
}
.page-footer-link {
    font-size: 0.5rem;
}


.page-header-logo {
    margin-bottom: 0;
}

.logotype text {
    font-weight:        bold;
    font-size:          3.0rem;
    font-family:        'Slackey', cursive;
    stroke:             #222222;
    fill:               #ffa8ba;
    letter-spacing:     0.2rem;
    text-anchor:        middle;
    dominant-baseline:  alphabetic;
}
.logotype > svg > use:nth-of-type(1) {
    stroke-width      : 0.5rem;
    paint-order       : stroke;
}
.logotype > svg > use:nth-of-type(2) {
    stroke-width      : 0;
}


.page-header-subtitle {
    font-size: 0.8rem;
    color: #222222;

}


.site {
    margin-top: 1.0rem;
    margin-bottom: 1.0rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    /* background-color: #eeffff; */
}
.site-header {
    font-weight: bold !important;
    background-color: #ffffff;
    padding-top: 1.00rem;
    padding-bottom: 0.5rem;
    padding-left: 0rem;
    padding-right: 0rem;
    border-radius:  0.5rem 0.5rem 0 0 ;
    border: 1px solid;
    border-color: #dddddd;
}
.site-body {
    background-color: #ffffff;
    padding-top: 1.00rem;
    padding-bottom: 1.0rem;
    padding-left: 1.00rem;
    padding-right: 1.0rem;
    border-radius:  0 0 0.5em 0.5em;
    border-top: 0;
    border-bottom: 1px solid;
    border-left: 1px solid;
    border-right: 1px solid;
    border-color: #dddddd;
}
.site-description {
    font-weight: normal !important;
    font-size: 0.5rem;
    color:#757575;
}

.article {
    background-color: #ffffff;
}
.article-meta {
    font-size: 0.5rem;
}

/* @media screen and (max-width:576px) {
    .nvbr {
        background-color:#ffffff !important;
        border-top: 1px solid;
        border-bottom: 1px solid;
        border-color: #dddddd;
        font-weight: bold;
        padding-bottom: 24px;
    }
}
@media screen and (min-width:576px){ */
    .nvbr {
        background-color:#ffffff !important;
        border-bottom: 1px solid;
        border-color: #dddddd;
        font-weight: bold;
    }
/* } */

a.nav-link {
    color: #222222 !important;
}

li.nav-item {
    display: inline-block;
    float: none;
}


.scroll {
    display: inline-block;
    white-space: nowrap;
    float: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
.scroll::-webkit-scrollbar {
    display: none;
}

.fbox-msg {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-left: 1.0rem;
    padding-right: 1.0rem;
    margin-top: 2.0rem;
    margin-bottom: 2.0rem;
    margin-left: 1.0rem;
    margin-right: 1.0rem;
}


.fbox {
    margin-top: 2.0rem;
    margin-bottom: 2.0rem;
    margin-left: 1.0rem;
    margin-right: 1.0rem;
}
.fbox-header {
    font-weight: bold !important;
    background-color: #ffffff;
    padding-top: 1.00rem;
    padding-bottom: 0.5rem;
    padding-left: 1.00rem;
    padding-right: 1.00rem;
    border-radius:  0.5rem 0.5rem 0 0 ;
    border: 1px solid;
    border-color: #dddddd;
    border-bottom: 1px solid;
    border-color: #dddddd;
}
.fbox-body {
    background-color: #ffffff;
    padding-top: 1.00rem;
    padding-bottom: 1.0rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border-radius:  0 0 0.5em 0.5em;
    border-top: 0;
    border-bottom: 1px solid;
    border-left: 1px solid;
    border-right: 1px solid;
    border-color: #dddddd;
}

/*
 * General Elements
 */
a {
    text-decoration: none;
    color: #222222;
}

h3 a {
    color: #222222;
}
h6 a {
    color: #222222;
}

h1, h2, h3, h4 {
    text-decoration: none;
    font-weight: bold !important;
}
h6 {
    text-decoration: none;
    font-size: 0.875rem;
}


/* Override Bootstrap default color*/
/* === Bootstrap 5.3 の primary をサイト色に統一 === */
/* デフォルト(ライト)テーマ用。ダークテーマを使うなら data-bs-theme="dark" 用も足せます */
:root,
:root[data-bs-theme="light"] {
  --bs-primary: #f78fa7;            /* ロゴのピンク */
  --bs-primary-rgb: 247, 143, 167;
  --bs-link-color: #f56f8f;         /* 任意：リンク色も寄せる */
}

/* ボタンのトークン（5.3はボタン専用のCSS変数を見ます） */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #f56f8f;               /* 少し濃い */
  --bs-btn-hover-border-color: #f56f8f;

  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #f56f8f;
  --bs-btn-active-border-color: #f56f8f;

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #f8c7d4;           /* 薄いピンク */
  --bs-btn-disabled-border-color: #f8c7d4;
}

/* チェック済みの色をブランド色に */
.form-check-input:checked {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

/* フォーカス時の枠＆影も合わせる */
.form-check-input:focus {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25) !important;
}

/* 中間状態（indeterminate）があれば */
.form-check-input:indeterminate {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

/* スイッチ型（.form-switch）も同様に */
.form-switch .form-check-input:checked {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}


/* 背景・テキストの primary ユーティリティも自動で切り替わるが、
   もし効きが弱い箇所があれば下記フォールバックを追加 */
.bg-primary { background-color: #f78fa7 !important; }
.text-primary { color: #f78fa7 !important; }