/* ==================================================
  記事タイトル
================================================== */

.p-entry__header-title {
  padding-bottom: 16px;
  font-size: 24px;
  font-weight: normal;
  line-height: 1.5;
  border-bottom: 1px solid #000;
}
.p-entry__header-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  padding-top: 16px;
}

@media (min-width: 1024px) {
  .p-entry__header-title {
    font-size: 32px;
  }
}



/* ----------------------------------------
  タグ
---------------------------------------- */

.p-entry__header-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.p-entry__header-tags a {
  display: inline-flex;
  align-items: center;
  position: relative;
  transition: .2s;
  height: 2em;
  padding: 0 1em;
  margin-left: 1em;
  color: #000;
  font-size: 14px;
  text-decoration: none;
  line-height: 1;
  background-color: #ddd;
  border-radius: 0 2px 2px 0;
}
.p-entry__header-tags a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1em;
  transition: .2s;
  border-width: 1em 1em 1em 0;
  border-style: solid;
  border-color: transparent #ddd transparent transparent;
}
.p-entry__header-tags a::after {
  content: "\25CF";
  position: absolute;
  top: 50%;
  left: -3px;
  transform: translateY(-50%);
  color: #fff;
}
.p-entry__header-tags a:hover {
  background: #ccc;
}
.p-entry__header-tags a:hover::before {
  border-color: transparent #ccc transparent transparent;
}





/* ==================================================
  entry__body
================================================== */

.p-entry__body {
  padding-top: 32px;
  font-size: 16px;
  overflow-wrap: break-word;
}
.p-entry__body img {
  max-width: 100%;
  height: auto;
}
.p-entry__body .hpj-freeHTML >  div > * + * {
  margin-top: 32px;
}
.p-entry__body p + p {
  margin-top: 16px;
}

@media (min-width: 1024px) {
  .p-entry__body {
    padding-top: 40px;
  }
  .p-entry__body .hpj-freeHTML >  div > * + * {
    margin-top: 40px;
  }
}





/* ==================================================
  リード
================================================== */

.p-entry__lead {
  font-size: 18px;
  line-height: 1.5;
}





/* ==================================================
  この記事でわかること
================================================== */

.p-entry__summary {
  padding: 16px;
  background: var(--Light-gray);
  border-radius: 16px;
}
.p-entry__summary > * + * {
  margin-top: 16px;
}
.p-entry__summary-title {
  font-size: 20px;
  line-height: 1.5;
}
.p-entry__summary-list li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  line-height: 1.6;
}
.p-entry__summary-list li::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 5px;
  height: 5px;
  margin: 7px;
  background: #000;
  border-radius: 50%;
}
.p-entry__summary-list li + li {
  margin-top: 8px;
}

@media (min-width: 1024px) {
  .p-entry__summary {
    padding: 24px;
  }
}





/* ==================================================
  目次
================================================== */

.p-entry__toc {
  padding: 4px 0 4px 16px;
  border-left: 1px solid #000;
}
.p-entry__toc > * + * {
  margin-top: 16px;
}
.p-entry__toc-title {
  font-size: 20px;
  line-height: 1.5;
}

@media (min-width: 1024px) {
  .p-entry__toc {
    padding-left: 24px;
  }
}



/* ----------------------------------------
  リスト
---------------------------------------- */

.p-entry__toc-list li {
  font-size: 14px;
  line-height: 1.6;
}
.p-entry__toc-list li + li {
  margin-top: 8px;
}
.p-entry__toc-list li a:link,
.p-entry__toc-list li a:visited {
  color: #000;
}
.p-entry__toc-list li a:hover {
  text-decoration: none;
  background: rgba(0 0 0 / .1);
}


/* ul -------------------- */

ul.p-entry__toc-list li {
  position: relative;
  padding-left: 28px;
}
ul.p-entry__toc-list li::before {
  content: "";
  top: 2px;
  left: 0;
  position: absolute;
  width: 5px;
  height: 5px;
  margin: 7px;
  background: #000;
  border-radius: 50%;
}


/* ol -------------------- */

ol.p-entry__toc-list {
  counter-reset: toc-count;
}
ol.p-entry__toc-list li a {
  counter-increment: toc-count;
  display: flex;
  gap: 4px;
  transition: .2s;
  width: fit-content;
}
ol.p-entry__toc-list li a::before {
  content: counter(toc-count) ".";
  min-width: 24px;
  text-align: center;
}





/* ==================================================
  本文
================================================== */

.p-entry__section > * + * {
  margin-top: 16px;
}

@media (min-width: 1024px) {
  .p-entry__section {
    margin-top: 64px;
  }
}



/* ----------------------------------------
  大見出し（h2）
---------------------------------------- */

.p-entry__body {
  counter-reset: entry-count;
}
.p-entry__title {
  padding-bottom: .3em;
  margin-bottom: 24px;
  font-size: 20px;
  font-weight: normal;
  line-height: 1.5;
  border-bottom: 3px solid #000;
}

@media (min-width: 1024px) {
  .p-entry__title {
    margin-bottom: 32px;
    font-size: 24px;
  }
}


/* 数字付き（--num） -------------------- */

.p-entry__title.--num {
  counter-increment: entry-count;
  display: flex;
  gap: 4px;
}
.p-entry__title.--num::before {
  content: counter(entry-count) ". ";
  min-width: 1.25em;
  text-align: center;
}



/* ----------------------------------------
  サブタイトル（h3）
---------------------------------------- */

.p-entry__subtitle {
  padding: .4em 16px;
  margin: 24px 0 16px;
  color: var(--Electric-Blue);
  font-size: 20px;
  font-weight: normal;
  line-height: 1.5;
  background: #e5edfb; /* Electric Blueの10% */
}

@media (min-width: 1024px) {
  .p-entry__subtitle {
    margin: 32px 0 24px;
  }
}



/* ----------------------------------------
  サブタイトル（h4）
---------------------------------------- */

.p-entry__subsubtitle {
  padding-bottom: .3em;
  margin: 24px 0 16px;
  font-size: 18px;
  font-weight: normal;
  line-height: 1.5;
  border-bottom: 1px solid #000;
}

@media (min-width: 1024px) {
  .p-entry__subsubtitle {
    margin: 32px 0 24px;
  }
}



/* ----------------------------------------
  区切り線（hr）
---------------------------------------- */

.p-entry__body hr {
  margin: 24px 0;
  border-color: #000;
}

@media (min-width: 1024px) {
  .p-entry__body hr {
    margin: 32px 0;
  }
}



/* ----------------------------------------
  強調・太字
---------------------------------------- */

.p-entry__body strong {
  font-weight: bold;
}
.p-entry__body b {
  padding: 0 2px;
  font-weight: normal;
  background: linear-gradient(transparent 60%, rgba(255 80 80 / .3) 60%);
}



/* ----------------------------------------
  リスト（ul, ol）
---------------------------------------- */

.p-entry__list li {
  position: relative;
  padding-left: 28px;
}
.p-entry__list li::before {
  position: absolute;
  left: 0;
}
.p-entry__list li + li {
  margin-top: 8px;
}


/* ul -------------------- */

ul.p-entry__list li::before {
  content: "";
  top: 2px;
  width: 5px;
  height: 5px;
  margin: 7px;
  background: #000;
  border-radius: 50%;
}


/* ol -------------------- */

ol.p-entry__list {
  counter-reset: list-count;
}
ol.p-entry__list li {
  counter-increment: list-count;
}
ol.p-entry__list li::before {
  content: counter(list-count) ".";
  width: 24px;
  text-align: center;
}


/* .p-entry__section直下に置いた場合の上下の余白 -------------------- */

.p-entry__section > .p-entry__list {
  margin: 24px 0;
}

@media (min-width: 1024px) {
  .p-entry__section > .p-entry__list {
    margin: 32px 0;
  }
}



/* ----------------------------------------
  リスト（dl）
---------------------------------------- */

.p-entry__dl dt {
  font-size: 16px;
  line-height: 1.5;
  border-bottom: 1px solid #000;
}
.p-entry__dl * + dt {
  margin-top: 16px;
}
.p-entry__dl dd {
  margin-top: 16px;
  font-size: 14px;
}
.p-entry__dl dd p + p {
  margin-top: 8px;
}

@media (min-width: 1024px) {
  .p-entry__dl * + dt {
    margin-top: 24px;
  }
}


/* .p-entry__section直下に置いた場合の上下の余白 -------------------- */

.p-entry__section > .p-entry__dl {
  margin: 24px 0;
}

@media (min-width: 1024px) {
  .p-entry__section > .p-entry__dl {
    margin: 32px 0;
  }
}


/* アイコン付き -------------------- */

.p-entry__dl.--icon dt {
  position: relative;
  padding: 0 0 4px 32px;
}
.p-entry__dl.--icon dt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
.p-entry__dl.--icon dt.processor::before {
  background-image: url(/content/dam/jp-ext-hp-com/jp/ja/ec/common/images/processor.png);
}
.p-entry__dl.--icon dt.momery::before {
  background-image: url(/content/dam/jp-ext-hp-com/jp/ja/ec/common/images/momery.png);
}
.p-entry__dl.--icon dt.storage::before {
  background-image: url(/content/dam/jp-ext-hp-com/jp/ja/ec/common/images/storage.png);
}
.p-entry__dl.--icon dt.office::before {
  background-image: url(/content/dam/jp-ext-hp-com/jp/ja/ec/common/images/office.png);
}



/* ----------------------------------------
  注釈
---------------------------------------- */

.p-entry__notes {
  font-size: 12px;
}
.p-entry__notes > li + li {
  margin-top: 8px;
}


/* p, ul -------------------- */

p.p-entry__notes,
ul.p-entry__notes > li {
  padding-left: 1em;
  text-indent: -1em;
}


/* ol -------------------- */

ol.p-entry__notes {
  counter-reset: notes-count;
  font-size: 12px;
}
ol.p-entry__notes > li {
  counter-increment: notes-count;
  position: relative;
  padding-left: 28px;
}
ol.p-entry__notes > li::before {
  content: "\203B" counters(notes-count, "-") "";
  position: absolute;
  left: 0;
}



/* ----------------------------------------
  画像（figure）
---------------------------------------- */

.p-entry__figure {
  margin: 24px 0;
}
.p-entry__figure figcaption {
  margin-top: 8px;
  font-size: 13px;
}

@media (min-width: 768px) {
  .p-entry__figure {
    padding: 12px;
    text-align: center;
    background: var(--Light-gray);
  }
  /* 背景なし */
  .p-entry__figure.--none {
    padding: 0;
    background: none;
  }
}

@media (min-width: 1024px) {
  .p-entry__figure {
    margin: 32px 0;
  }
}


/* 回り込み -------------------- */

@media (min-width: 768px) {
  .p-entry__figure.--left,
  .p-entry__figure.--right {
    width: 40%;
    padding: 0;
    margin: 0 0 24px;
    background: none;
  }
  .p-entry__figure.--left {
    float: left;
    margin-right: 24px;
  }
  .p-entry__figure.--right {
    float: right;
    margin-left: 24px;
  }
}



/* ----------------------------------------
  ボックス
---------------------------------------- */

.p-entry__box {
  padding: 16px;
  background: var(--Light-gray);
  border-radius: 16px;
}
* + .p-entry__box,
.p-entry__box + * {
  margin-top: 24px;
}

@media (min-width: 1024px) {
  .p-entry__box {
    padding: 24px;
  }
}



/* ----------------------------------------
  コラム
---------------------------------------- */

.p-entry__column {
  overflow: hidden;
  position: relative;
  padding: 48px 16px 16px;
  margin-top: 24px;
  font-size: 14px;
  border: 1px solid #000;
  border-radius: 16px;
}

.p-entry__column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 32px;
  width: 240px;
  background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="360" height="70"><path d="M26.000,0.000 L359.1000,0.000 L333.1000,70.000 L-0.000,70.000 L26.000,0.000 Z" fill="%23024ad8"/></svg>') no-repeat top right;
}
.p-entry__column-title {
  position: relative;
  padding-bottom: .3em;
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: normal;
  line-height: 1.5;
  border-bottom: 1px solid #000;
}
.p-entry__column > * + * {
  margin-top: 16px;
}
.p-entry__column .p-entry__figure {
  padding: 0;
  background: none;
}

@media (min-width: 1024px) {
  .p-entry__column {
    padding: 48px 24px 24px;
    margin-top: 32px;
  }
  .p-entry__column::after {
    content: "";
    display: block;
    clear: both;
  }
  .p-entry__column-flag {
    padding: 0 24px;
  }
  .p-entry__column-title {
    flex-direction: row;
    margin-bottom: 24px;
  }
}





/* ==================================================
  製品
================================================== */

.p-products {
  padding: 24px 16px;
  background: var(--Standard-gray);
}
.p-products__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.p-product-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  row-gap: 8px;
  padding: 16px 8px 24px;
  text-align: center;
  background: #fff;
  border: 1px solid #000;
}
.p-product-card__figure {
  display: flex;
  justify-content: center;
  align-items: center;
}
.p-product-card__title {
  font-size: 20px;
  font-weight: normal;
  line-height: 1.3;
}
.p-product-card__cta .button {
  border-radius: 0;
}

@media (min-width: 768px) {
  .p-products__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .p-products__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .p-products {
    padding: 24px;
  }
  .p-products__list {
    gap: 24px;
  }
}