html,
body,
p,
li {
  /* font-family: YakuHanJP, 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif, 'Material Icons'!important; */
  font-family: YakuHanJP, sans-serif, "Material Icons" !important;
}

body {
  font-feature-settings: "pkna" 1;
  margin: 0;
  padding: 0;
  /* text-align: justify; */
}
body .janone {
  display: none !important;
}

/*菊水電子公式共通フォントCSS*/

.none {
  display: none !important;
}

ul.ps li,
ol.ps li,
.ps {
  font-size: 12.5px !important;
  opacity: 0.8;
  font-weight: normal;
}

.wht {
  color: #fff !important;
}

.blk {
  color: #000 !important;
}

/*流動フォント設定*/

/* 0.9375rem(15px) @ 26.25rem(420px) increasing to 1.25rem(20px) @ 75rem(1200px) */

/* #page {
    font-size: clamp(0.9375rem, calc(0.9375rem + ((1vw - 0.2625rem) * 0.641)), 1.15rem);
    /* Where: 0.641 = 100 * font-size_difference / viewport_width_difference */

/*20201211*/

/* 0.9rem(14.4px) @ 48rem(768px) increasing to 1.45rem(23.2px) @ 80rem(1280px) */

#page,
#site-main {
  /* font-size: clamp(0.9rem, calc(0.9rem + (1.125 - 0.9) * ((100vw - 48rem) / (80 - 48))), 1.05rem); */
  /* Where: calc = min_font_size_in_rem + (max_font_size - min_font_size) * ((100vw - min_viewport_including_rem_unit) / (max_viewport - min_viewport)) */
  /* Safari resize fix */
  min-height: 0vw;
}

/*流動フォント設定*/

/*containerはMaterializecssで定義済み*/

.container {
  margin: 0 auto;
}

.site-main h1 {
  color: #222;
  font-size: 1.8em;
  font-weight: 700;
  word-break: break-all;
}

/* サイトタイトルのアフターを消すと同時に左寄せのPXBみたいな */

.site-main h2 {
  color: #454545;
  font-size: 2.7em;
  line-height: 3.2rem;
  display: block !important;
  font-weight: bold !important;
  text-align: left !important;
  margin: 3.2rem auto 3.2rem auto !important;
  max-width: 1980px;
}

.site-main h3 {
  color: #174e9f;
  font-size: 1.8em;
  margin-top: 2.5rem;
  margin-left: 0rem !important;
  line-height: 2.4rem;
  font-weight: 500;
  /* background: #174e9f; */
  /* color: #fff; */
  /* padding: .5rem 1rem; */
}

aside h3 {
  margin-top: 0rem !important;
}
.wpml-ls-statics-footer {
  display: none !important;
}
.site-main h4 {
  font-size: 1.25rem;
  line-height: 165%;
  margin: 2.52rem 0 1.52rem 0;
  font-weight: 500;
  padding-left: 0;
  color: #232323;
  word-wrap: break-word;
}

.site-main h4:after {
  content: "";
  background: #555;
  width: 3rem;
  height: 1px;
  display: block;
  margin: 1rem 0;
}

.site-main h5 {
  font-size: 1.065rem;
  opacity: 0.85;
}

.site-main p,
.site-main li,
#eckb-article-content p {
  color: #111;
  letter-spacing: 0.0525265rem;
  text-align: justify;
  word-break: break-all;
  margin: 1rem 0;
  font-size: 1rem;
  line-height: calc(1ex / 0.3);
  margin: calc(1ex / 0.32) 0;
}

#eckb-article-content #eckb-article-content-body li {
  color: #111;
  letter-spacing: 0.05rem;
  text-align: justify;
  word-break: break-all;
  margin: 0.5rem 0 !important;
  font-size: 1.1rem;
  line-height: calc(1ex / 0.32);
  margin: calc(1ex / 0.32) 0;
}

ul.epkb-articles {
  margin-top: 1rem !important;
}

header li {
  font-size: 0.9rem;
}

.nomt {
  margin-top: 0 !important;
  display: inline;
}

h1 small {
  display: block;
}

h1 .large {
  font-family: "Archivo Black", sans-serif;
  font-size: 4rem;
  line-height: 100%;
}

h1 .large span {
  display: inline-block;
  margin: 0 1rem;
  font-size: 85%;
  vertical-align: 0.3rem;
}

table,
td,
th {
  font-family: "IBM Plex Sans", "Noto Sans JP", "ヒラギノ角ゴ ProN",
    "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック",
    "MS PGothic", sans-serif;
}

/* 多言語向けの折り返し統一 */
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
td,
th,
input,
textarea,
label,
button,
span,
a,
strong,
em,
dt,
dd,
caption,
blockquote,
figcaption {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
}

/* 欧文は辞書ベースのハイフネーションを許可 */
:lang(de),
:lang(en) {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

.bline {
  line-height: 200%;
}

/*菊水青の置き換え*/

.blue {
  background-color: #174f9e !important;
}

.blue-text {
  color: #174f9e !important;
}

/*マーカーアニメーション*/

.marker-animation.active {
  background-position: -100% 0.5em;
}

.marker-animation {
  background-image: -webkit-linear-gradient(
    left,
    transparent 50%,
    rgb(255, 242, 0) 0%
  );
  background-image: -moz-linear-gradient(
    left,
    transparent 50%,
    rgb(255, 242, 0) 0%
  );
  background-image: -ms-linear-gradient(
    left,
    transparent 50%,
    rgb(255, 242, 0) 0%
  );
  background-image: -o-linear-gradient(
    left,
    transparent 50%,
    rgb(255, 242, 0) 0%
  );
  background-image: linear-gradient(left, transparent 50%, rgb(255, 242, 0) 0%);
  background-repeat: repeat-x;
  background-size: 200% 0.8em;
  background-position: 0 0.5em;
  transition: all 2s ease;
  font-weight: bold;
}

.marker-animation2.active {
  background-position: -100% 1.45em;
  background-size: 200% 1.5rem;
}

.marker-animation2 {
  background-image: -webkit-linear-gradient(
    left,
    transparent 50%,
    rgb(255, 242, 0) 0%
  );
  background-image: -moz-linear-gradient(
    left,
    transparent 50%,
    rgb(255, 242, 0) 0%
  );
  background-image: -ms-linear-gradient(
    left,
    transparent 50%,
    rgb(255, 242, 0) 0%
  );
  background-image: -o-linear-gradient(
    left,
    transparent 50%,
    rgb(255, 242, 0) 0%
  );
  background-image: linear-gradient(left, transparent 50%, rgb(255, 242, 0) 0%);
  background-repeat: repeat-x;
  background-size: 200% 1em;
  transition: all 0.25s;
  font-weight: bold;
  background-position: 200% 1.3rem;
}

/*ぼたん*/

.pbut {
  background: #174f9e;
  border-radius: 10px;
  font-size: 0.8rem;
  padding: 0.3rem 1rem;
  color: #fff;
  text-decoration: none;
  transition: all 0.2s;
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  border: none;
  cursor: pointer;
}

.pbut:hover {
  background: rgb(31, 139, 211);
}

.pbut:after {
  content: "\e5c8";
  padding: 0 0 0 0.5rem;
  font-family: Material Icons;
  top: 0.1rem;
  position: relative;
  transition: all 0.2s;
}

.pbut:hover:after {
  padding: 0 0 0 1rem;
  position: relative;
}

/* a */

.site-main a {
  color: mediumblue;
}

.site-main a:hover {
  color: mediumblue;
}

.site-main a:hover {
  color: dodgerblue;
}

.search .site-main h4:after {
  display: none;
}

.tabdownload h3 {
  font-size: 1.25rem;
  line-height: 110%;
  margin: 2.52rem 0 1.52rem 0;
  font-weight: 500;
  padding-left: 0;
  color: #232323;
}

#tab4_cnt p.tit {
  font-size: 11px;
  font-weight: normal;
}

#tab4_cnt p.tit b {
  font-size: 12.2px;
  font-weight: bold;
  color: #174f9e;
}

.updatebadge:after,
#menu-item-45219:after {
  content: "UPDATE";
  font-size: 8px;
  background: cornflowerblue;
  color: #fff;
  font-weight: bold;
  padding: 2px 5px;
  border-radius: 5px;
  display: inline-block;
  margin-left: 0.5rem;
  top: -2px;
  position: relative;
  letter-spacing: 0.05rem;
}

.newbadge:after,
#menu-item-182101:after,
#menu-item-170219:after {
  content: "NEW";
  font-size: 8px;
  background: cornflowerblue;
  color: #fff;
  font-weight: bold;
  padding: 2px 5px;
  border-radius: 5px;
  display: inline-block;
  margin-left: 0.5rem;
  top: -2px;
  position: relative;
  letter-spacing: 0.05rem;
}

/*まだ決まってないページデザイン部分 */
.nupt {
  background: #f5f5f5;
  padding: 0 0 4rem 0;
  border-top: 0.5px solid #fff;
  margin-bottom: 3rem;
  position: relative;
  overflow: hidden;
}
.nupt h1.entry-title,
.nupt h2.entry-title {
  color: #434343;
  max-width: 1980px;
  margin: 0 auto;
  padding: 5rem 3rem 10px 3rem !important;
  letter-spacing: 0.00721rem;
  font-size: 2rem;
  position: relative;
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 500 !important;
  font-style: normal;
}
.nupt h1.entry-title:before,
.nupt h2.entry-title:before {
  height: 5px;
  content: "";
  display: block;
  width: 2rem;
  position: absolute;
  bottom: 0;
  background: red;
}

.dlgrid img {
  max-width: 48px !important;
}

.site-main h2.pxbh2title {
  max-width: 1980px !important;
  padding-left: calc(2vw + 1.5rem) !important;
}
