@font-face {
  font-family: "WebEagleLake";
  src: url('/fonts/EagleLake-Regular.woff2');
}

@font-face {
  font-family: "WebKdamThmorPro";
  src: url('/fonts/KdamThmorPro-Regular.woff2');
}

@font-face {
  font-family: "SMBodySerif";
  src: url('/fonts/Brygada1918-Medium.woff2');
  font-style: normal;
}

@font-face {
  font-family: "SMBodySerif";
  src: url('/fonts/Brygada1918-MediumItalic.woff2');
  font-style: italic;
}

body {
  background-color: #fcf7f4;
  color: #333;
}

h1, h2, h3, h4, h5, h6, strong {
  font-family: "Kdam Thmor Pro", "WebKdamThmorPro", sans-serif;
}

a {
  color: #0a7ec2;
}

article h1 {
  border-bottom: 1px solid;
}

.top-container {
  border: 2px solid #999999a8;
  border-radius: 18px;
  box-shadow: 5px 5px 5px #66666666;
  margin-block-end: 12px;
  margin-left: auto;
  margin-right: auto;
}

.top-container, .topnav-tab {
  background-color: #ffffffb8;
}

.topnav-tab {
  cursor: pointer;
}

.topnav-tab a {
  text-decoration: none;
}

.sitetitle a {
  text-decoration: none;
  color: inherit;
}

.sitetitle h1 {
  margin-block-end: 0.15em;
  margin-block-start: 0.15em;
  text-align: center;
  font-family: "Eagle Lake", "WebEagleLake", sans-serif;
}

#TopNav {
  display: flex;
  max-width: 1034px;
  box-sizing: border-box;
}

#TopNav > div {
  flex: 1 1;
  border: 2px #bfc5fb solid;
  border-radius: 8px;
  text-align: center;
}

.main-wrapper, .top-container {
  max-width: 1050px;
  box-sizing: border-box;
}

.main-wrapper, #TopNav {
  margin: auto;
}

.main-wrapper {
  border: 3px solid #d5a9f3;
  border-radius: 18px;
  padding: 1em 0.5em 0.5em 0.5em;
  background: linear-gradient(#fcf7f4, #fffcfe 25%, #fffafd 86%,#fcf7f4 99.95%);
}

#SideBar {
  display: none;
}

.icon {
  border-radius: 50%;
}

.toc {
  max-width: 800px;
  margin: auto;
  border: 2px solid #94b7eb;
  border-radius: 6px;
}

body, article p, article li, article td {
  font-family: 
    /* --- Serif (Specified & Webfont ) --- */
    "Brygada1918",
    "SMBodySerif",
    
    /* --- イワタUD明朝シリーズ (かなC優先) --- */
    "I-OTF UDMincho KanaC Pr6N",
    "イワタUD明朝かなC Pr6N",
    "I-OTF UDMincho KanaC Pro",
    "イワタUD明朝かなC Pro",
    "I-OTF UDMincho KanaD Pr6N",
    "イワタUD明朝かなD Pr6N",
    "I-OTF UDMincho KanaD Pro",
    "イワタUD明朝かなD Pro",
    "I-OTF UDMincho KanaB Pr6N",
    "イワタUD明朝かなB Pr6N",
    "I-OTF UDMincho KanaB Pro",
    "イワタUD明朝かなB Pro",
    "I-OTF UDMincho KanaA Pr6N",
    "イワタUD明朝かなA Pr6N",
    "I-OTF UDMincho KanaA Pro",
    "イワタUD明朝かなA Pro",
    "I-OTF UDMincho Pr6N",
    "イワタUD明朝 Pr6N",
    "I-OTF UDMincho Pro",
    "イワタUD明朝 Pro",

    /* --- 游明朝 (Windows/Mac) --- */
    "Yu Mincho Medium", /* Windows 10でのMウェイト指定用 */
    "YuMincho",        /* Mac用 (font-weight: 500でMが当たる) */
    "游明朝", 

    /* --- ヒラギノ明朝 (非UD) --- */
    /* UDはStdしかない */
    "HiraMinProN-W4",
    "HiraMinProN-W3",

    /* --- Fallback --- */
    serif;
  font-weight: 500;
}

article p strong, article th {
  font-family: sans-serif;
}

article strong {
  color: #d44503;
  text-decoration: underline;
}

table {
  margin: auto;
}

table td {
  border-top: 1px solid;
  border-bottom: 1px solid;
}

article img {
  max-width: 100%;
  max-height: 70vh;
}

article figure {
  width: fit-content;
  margin: auto;
}

a[rel=external]:after {
  content: '(外部リンク)';
  font-size: 70%;
  vertical-align: super;
}

#DocumentFooter {
  text-align: right;
  font-size: 80%;
}

#WrapWindow {
  visibility: hidden;
  z-index: 55000;
  background-color: #000; /* for RGBa Unsupported browseres */
  background-color: rgba(0,0,0,0);
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0px;
  left: 0px;
}
  
#WrapWindow img {
  margin : 0px auto;
  max-width: 100vw;
  max-height: 100vh;
  display: block;
}

#SocialContact {
  text-align: right;
}

.othbtn {
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #94b7eb;
  box-shadow: 1px 2px 2px #66666666;
  padding: 4px;
  transition: all, 0.1s;
  cursor: pointer;
}

.othbtn:active, .othbtn.btn_activated {
  box-shadow: 0 0 0 transparent;
  transform: translate(2px, 2px)
}

/***** Source Code *****/
pre code.sourceCode .al {color: #282828;font-weight: bold;} /*Alert*/
pre code.sourceCode .an {color: #17448c;} /*Annotation*/
pre code.sourceCode .at {color: #086a48;} /*Attribute*/
pre code.sourceCode .dt {color: #ba740b;} /*BaseN*/
pre code.sourceCode .du {color: #9b129b;} /*Builtin*/
pre code.sourceCode .cf {color: #15438e;} /*ControlFlow*/
pre code.sourceCode .ch {color: #82122f;} /*Char*/
pre code.sourceCode .cn {color: #b01bb0;} /*Constant*/
pre code.sourceCode .co {color: #293da1;} /*Comment*/
pre code.sourceCode .cv {color: #ba740b;} /*CommentVar*/
pre code.sourceCode .do {color: #218B97;} /*Documentation*/
pre code.sourceCode .dt {color: #2dad86;} /*DataType*/
pre code.sourceCode .dv {color: #af16af;} /*DecVal*/
pre code.sourceCode .er {color: #282828; text-decoration: underline;} /*Error*/
pre code.sourceCode .ex {color: #2dad86;} /*Extension*/
pre code.sourceCode .fl {color: #af16af;} /*Float*/
pre code.sourceCode .fu {color: #b51d3e;} /*Function*/
pre code.sourceCode .im {color: #2dad86;} /*Import*/
pre code.sourceCode .in {color: #01a8ad;} /*Infomation*/
pre code.sourceCode .kw {color: #82122f;} /*Keyword*/
pre code.sourceCode .op {color: #17448c;} /*Operator*/
pre code.sourceCode .ot {color: #5d5e61;} /*Other*/
pre code.sourceCode .pp {color: #A85E3D;} /*PreProcessor*/
pre code.sourceCode .sc {color: #1076ad; background-color: #4E163E} /*SpecialChar*/
pre code.sourceCode .ss {color: #82122f;} /*SpecialString*/
pre code.sourceCode .st {color: #295698;} /*String*/
pre code.sourceCode .va {color: #15438e;} /*Variable*/
pre code.sourceCode .vs {color: #218B97; font-style: italic;} /*VerbatimString*/
pre code.sourceCode .wa {color: #5d5e61;} /*Warning*/
/**********************/

@media screen and (min-width: 1050px) {
  .main-wrapper {
    display: grid;
    grid-template-columns: 1fr 280px;
  }

  #MainArticle {
    padding: 8px;
  }

  #SideBar {
    display: unset;
    box-sizing: border-box;
    padding: 10px;
    font-size: 90%;
    border-left: #33335542 dashed 1px;
  }

  #SideBar img {
    max-width: 100%;
  }
}