.box {
  text-align: left; /* 左揃え */
  font-size: clamp(14px, 2vw, 18px); /* 画面幅でサイズ可変 */
}

.box li {
  line-height: 1.8;      /* 行間を広めに設定 */
  margin-bottom: 0.8em;  /* 項目間の隙間（文字サイズの0.8倍分） */
}


/* リストやテキストのはみ出し防止 */
ol, ul {
    padding-left: 25px;
    word-break: break-all; /* URLや長い論文タイトルの強制改行 */
  }


/* --- PC向け設定 --- */
#header_inner {
    display: flex;
    align-items: baseline; /* 文字の底辺を揃える */
    flex-wrap: wrap;       /* 入り切らない場合に備えて折り返しを許可 */
    padding: 10px 0;
}

#h_logo {
    margin-right: 20px;    /* SHIRAKASHI Lab. の右側の隙間 */
}

.sub-text {
    font-size: 0.8em;      /* ロゴより小さく設定 */
    line-height: 1.2;
    display: inline-block;
}

/* --- スマートフォン向け設定 --- */
/* 一般的なスマホサイズ（768px以下）の場合 */
@media screen and (max-width: 768px) {
    #header_inner {
        display: block;    /* 横並びを解除して縦に並べる */
    }
    
    #h_logo {
        margin-bottom: 5px; /* ロゴと下の文字の隙間 */
    }

    .sub-text {
        display: block;     /* 強制的に改行させる */
        font-size: 0.7em;   /* スマホではさらに少し小さく */
        word-wrap: break-word; /* 長い単語も折り返す */
    }
}