/* web font: NotoSansJapanese */


/* @import url('https://fonts.googleapis.com/earlyaccess/notosansjapanese.css'); */

@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

/* web font: Arvo, Epilogue, Hahmlet, JetbrainsMono, SourceCodePro */

@import url('https://fonts.googleapis.com/css2?family=Arvo&family=Epilogue&family=Hahmlet&family=JetBrains+Mono:wght@300&family=Source+Code+Pro&display=swap');

/* override syntax highliting code */

code[class*=language-],
pre[class*=language-],
.line-numbers-rows {
  padding-top: 24px;
    /* font-family: "JetBrains Mono", "Source Code Pro", "Roboto Mono", monospace; */
    font-family: "Source Code Pro", "Noto Sans JP", "Roboto Mono", monospace;
    font-size: 16px;
    /* font-size: 92.5%; */
    /* font-size: 20px; */
    /* background-color: #1a2638; */
}


/* override h1~h5 fonts */

div.content h1,
div.content h2,
div.content h3,
div.content h4,
div.content h5 {
    font-family: 'Noto Sans JP';
    font-weight: 300;
    border-bottom: solid 1px #0c344b !important;
    border-left: solid 6px #0c344b !important;
    padding-left: 8px;
    background: #fefeff;
    margin-top: 1.5em;
    /* font-size: 1.12rem; */
}
div.content h1 {
  border-bottom: solid 0.3rem #0c344b28 !important;
}
div.content h2 {
  border-bottom: solid 0.2rem #0c344b28 !important;
  border-radius: 4px;
  background-color: #f4fbff;
}
div.content h3 {
  border-bottom: solid 0.1rem #0c344b28 !important;
}
div.content h4 {
  border-bottom: solid 0.05rem #0c344b28 !important;
}
div.content h5 {
  border-bottom: solid 0.03rem #0c344b28 !important;
}

div.content a {
  word-wrap: break-word !important;
}

/* override created date font */

.text-muted.text-uppercase {
    font-family: "Epilogue";
}


/* tagcloud taglink font */

section.taxonomy-terms h1 {
    padding-top: 60px;
}

section.taxonomy-terms a {
    /* font-family: 'Noto Sans Japanese', 'Source Code Pro'; */
    font-family: 'JetbrainsMono', 'Noto Sans JP';
}


/* override blog content font */

.content {
    font-family: 'Noto Sans JP', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ', Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: 300;
    color: #242834;
}

/*! Custom CSS */
.gsc-comments > .gsc-comment-box {
    order: 2;
    margin-bottom: 1rem;
  }
  
  .gsc-comments > .gsc-timeline {
    order: 3;
  }
  
  .gsc-timeline {
    flex-direction: column-reverse;
  }
  
  .gsc-header {
    padding-bottom: 1rem;
  }


  /* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #45a049;
}

/* Add a background color and some padding around the form */
.form_container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

/* summary style customize color like a submit button. */
summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  width: auto;
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
}
summary::-webkit-details-marker {
  display: none;
}
summary:hover,details[open] summary {
  background-color: #45a049;
}
details[open] summary {
  border-radius: 4px 4px 0 0;
}
summary::after {
  content: 'Open';
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  transition: transform 0.5s;
}
details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}
details>div {
  padding: 12px 20px;
  background-color: #effff8;
  border: none;
  border-radius: 0 0 4px 4px;
}
details[open]>summary::after {
  display: inline-block;
  content: "Close";
}

/* figure */
figure.highlight {
  margin-left: 0;
  margin-right: 0;
}
figure.highlight .chroma {
  padding-top: 24px;
}
figure.images {
  width: 100%;
}
figure.images img {
  object-fit: cover;
  object-position: 100% 30%;
  width: 100%;
  height: 240px !important;
}