/* Google Font M PLUS 1p + Noto Sans JP */
/* body */
body {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* heading */
h1, h2, h3, h4, h5, h6 {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* h2 a element */
h2.item-title a {
  text-decoration: none;
}

h2.item-title a:hover {
  text-decoration: underline;
}

/* h3 at article page */
.com-content-article__body h3 {
    padding: 0.1em;
    background: #f0f4fb;
    border-bottom: solid 2px #224faa;
}

/*
h4 at article page
reference: saruwaka
https://saruwakakun.com/html-css/reference/h-design
fa ver: Font Awesome 6 Free
*/

.com-content-article__body h4 {
  position: relative;
  padding: 0.5em 0.5em 0 1.5em;
  line-height: 1.2;
}

.com-content-article__body h4:before {
  font-family: "Font Awesome 6 Free";
  content: "\f152";
  font-weight: 900;
  position: absolute;
  font-size: 1em;
  left: 0.25em;
  top: 0.5em;
  color: #224faa;
}

/* pre code element for google-code-prettify */
pre.prettyprint ol li span {
  padding: 0;
}

pre.prettyprint ol{
  margin: 0 0.25rem;
  white-space: pre-wrap;
}

pre.prettyprint ol.linenums > li {
  list-style-type: decimal !important;
  border-left: solid 1px #339933;
  padding-left: 0.5em;
  line-height: 1em;
}

/* prism.jp */
/* Set the padding specified in the tag class to zero */
pre code * {
  padding: 0 !important;
}

/*
blockquote by saruwaka
https://saruwakakun.com/html-css/reference/blockquote
fa ver: Font Awesome 6 Free
*/
blockquote {
    position: relative;
    margin-top: 5px; 
    padding: 10px 15px 10px 60px;
    box-sizing: border-box;
    font-style: italic;
    background: #f5f5f5;
    color: #777777;
    border-left: 4px solid #9dd4ff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
}

blockquote:before{
    display: inline-block;
    position: absolute;
    top: 15px;
    left: 15px;
    content: '\f10d';
    font-family: 'Font Awesome 6 Free';
    color: #9dd4ff;
    font-size: 30px;
    line-height: 1;
    font-weight: 900;
}

blockquote p {
    padding: 0;
    margin: 7px 0;
    line-height: 1.7;
}

blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

/*
article information in a line
https://joomla.center/en/knowledge-base/cassiopeia
*/

.article-info dd {
    padding: 0;
    display: inline-block;
    margin-right: 1em;
}

/*
emphasis like line-marker
https://web-camp.io/magazine/archives/85927/
*/
em.line_marker-p {
      background: linear-gradient(transparent 60%, pink 30%);
      display: inline-block;
    }

em.line_marker-y {
      background: linear-gradient(transparent 60%, yellow 30%);
      display: inline-block;
    }
/*
emphasis under-line
https://saruwakakun.com/html-css/reference/border
*/
em.under_line-o {
      border-bottom: dotted 3px orange;
  }

/* emphasis background color */
em.back_ground-g {
      background-color: #cccccc;  
}

/* emphasis bolder */
/* Corrected line height to prevent underlines from being cut off */
em.bolder {
      font-weight: bolder;
}
ul li {
      line-height: 1.55;
}
ol li {
      line-height: 1.55;
}

/* strong */
strong.headline-r {
      color: rgb(254,254,254);
      background-color: red;
      padding: 0 10px;
      display: inline-block;
}

strong.headline-g {
      color: rgb(254,254,254);
      background-color: rgb(14,56,41);
      padding: 0 10px;
      display: inline-block;
}

/*
images layout flex-start
https://momdo.github.io/html/grouping-content.html#the-figure-element
https://saruwakakun.com/html-css/basic/display
*/
div.images-start {
  display: flex;
  align-items: flex-start;
}

div.images-start figure {
  margin: 1em;
}

div.images-start figure figcaption {
  display: block;
  text-align: center;
  margin-top: 0.5em;
}

/* table */
table, td, th {
  border: 1px #cccccc solid;
}

td, th {
  padding: 0.5em;
}

thead {
  background-color: #eeeeee;
}

div.table-wrapper {
  overflow-x: auto; /* 横スクロールを有効にする */
}

div.table-wrapper table {
  min-width: 768px; /* スマホ標準幅768px以上で横スクロール */
  white-space: nowrap; /* テキストを折り返さない */
}

/*
Google Adsense ad_block_01
https://saruwakakun.com/html-css/basic/display
*/
div.ad_inline-block {
  text-align: center;
}

div.ad_inline-block div {
  display: inline-block;
  width: 49%;
  margin: 3px;
}

/* read more text-align: left; */
.btn-secondary {
  text-align: left;
}

/* blog card */
.blog_card_link {
  text-decoration: none;
}

.blog_card_container {
  width: 75%;
  border: 1px solid #999999;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  margin-bottom: 4px;
  padding: 4px;
}

.blog_card_container:hover {
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
}

.blog_card_text-container {
  display: flex;
  flex-direction: column;
}

.blog_card_heading {
  align-self: flex-start;
  margin: -5px 0 0 -5px;
  color: rgb(254,254,254);
  background-color: rgb(17,40,85);
  border-radius: 6px 0 0 0;
  padding: 0 4px;
}

.blog_card_title {
  font-weight: 700;
  margin: 0;
}

.blog_card_excerpt {
  font-size: 0.8em;
  color: #666666;
}

/* dl dd dt */
.com-content-article__body dd {
  margin-left: 1em;
  padding-left: 0.5em;
  border-left: 2px solid #999999;
}

/*
Articles by Category
*/
h5.mod-articles-title {
  transform: rotate(0.05deg);
}

/*
Articles by Carousel
*/
.carousel-text {
  background-color: rgb(0 0 0 / 0.5);
  color: #ffffff;
}

.carousel-text h5 {
  transform: rotate(0.05deg); 
}

@media (max-width: 768px) {
  .carousel-text h5 {
    font-size: 0.8rem;
  }
  .carousel-text p {
    font-size: 0.6rem;
  }
}