@charset "UTF-8";

/* =========================================
   資料ダウンロード詳細ページ専用CSS
   既存の pikapika_pro.css とは独立した名前空間で記述する。
   Source: download-single.scss
   ========================================= */

/* 詳細ページ全体のスコープ（WordPress が `single-download` body class を付与する）。 */
body.single-download {
  --font-size: 10;
}

/* 本文ラッパ */
.single-download__body {
  font-size: calc(15 * 1rem / var(--font-size));
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: #222;
  word-wrap: break-word;
}
.single-download__body > * + * {
  margin-block-start: calc(24 * 1rem / var(--font-size));
}
/* 見出し2（download modifier の header_title スタイル：4px ライトブルー縦線 + テキスト） */
.single-download__body h2.wp-block-heading {
  display: flex;
  align-items: flex-start;
  column-gap: calc(16 * 1rem / var(--font-size));
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  font-size: calc(18 * 1rem / var(--font-size));
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: #333;
}
.single-download__body h2.wp-block-heading::before {
  content: "";
  flex-shrink: 0;
  width: calc(4 * 1rem / var(--font-size));
  align-self: stretch;
  background-color: #33c0e3;
  border-radius: calc(200 * 1rem / var(--font-size));
}
/* 見出し3（左 2px 青ボーダー） */
.single-download__body h3.wp-block-heading {
  margin-block-start: calc(64 * 1rem / var(--font-size));
  margin-block-end: calc(16 * 1rem / var(--font-size));
  padding-inline-start: calc(16 * 1rem / var(--font-size));
  border-inline-start: 2px solid #1360bf;
  font-size: calc(20 * 1rem / var(--font-size));
  font-weight: 700;
  line-height: 1.7;
  color: #333;
}
/* 見出し4 */
.single-download__body h4.wp-block-heading {
  margin-block-start: calc(64 * 1rem / var(--font-size));
  margin-block-end: calc(12 * 1rem / var(--font-size));
  font-size: calc(20 * 1rem / var(--font-size));
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: #333;
}
/* 段落 */
.single-download__body p:not([class]) {
  margin: 0;
  margin-block-end: calc(16 * 1rem / var(--font-size));
  font-size: calc(16 * 1rem / var(--font-size));
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.05em;
  color: #333;
}
.single-download__body strong,
.single-download__body b {
  font-weight: 700;
}
.single-download__body em,
.single-download__body i {
  font-style: italic;
}
.single-download__body ul,
.single-download__body ol {
  margin: 0;
  padding-inline-start: calc(24 * 1rem / var(--font-size));
}
.single-download__body ul li + li,
.single-download__body ol li + li {
  margin-block-start: calc(6 * 1rem / var(--font-size));
}
.single-download__body ul {
  list-style: disc;
}
.single-download__body ol {
  list-style: decimal;
}
.single-download__body img {
  max-width: 100%;
  height: auto;
  display: block;
}
.single-download__body figure {
  margin: 0;
}
.single-download__body figure.wp-block-image {
  margin-block: calc(32 * 1rem / var(--font-size));
}
.single-download__body figure.wp-block-image img {
  margin: 0 auto;
}
.single-download__body figure.wp-block-image figcaption {
  margin-block-start: calc(8 * 1rem / var(--font-size));
  font-size: calc(13 * 1rem / var(--font-size));
  color: #666;
  text-align: center;
}
.single-download__body figure.alignwide,
.single-download__body figure.alignfull {
  width: 100%;
}
.single-download__body .wp-block-embed {
  margin-block: calc(32 * 1rem / var(--font-size));
}
.single-download__body .wp-block-embed__wrapper {
  position: relative;
}
.single-download__body .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper {
  aspect-ratio: 16 / 9;
}
.single-download__body .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.single-download__body .wp-block-embed iframe {
  max-width: 100%;
}
.single-download__body blockquote {
  margin: calc(24 * 1rem / var(--font-size)) 0;
  padding: calc(16 * 1rem / var(--font-size)) calc(24 * 1rem / var(--font-size));
  border-left: calc(4 * 1rem / var(--font-size)) solid #d9e1ec;
  background-color: #f4f7fb;
  font-style: italic;
}
.single-download__body table {
  width: 100%;
  border-collapse: collapse;
  margin-block: calc(24 * 1rem / var(--font-size));
  font-size: calc(14 * 1rem / var(--font-size));
}
.single-download__body th,
.single-download__body td {
  padding: calc(10 * 1rem / var(--font-size)) calc(12 * 1rem / var(--font-size));
  border: 1px solid #d9e1ec;
  text-align: left;
}
.single-download__body th {
  background-color: #f4f7fb;
  font-weight: 700;
}
.single-download__body a {
  color: #008ee7;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.single-download__body a:hover {
  text-decoration: none;
}
.single-download__body hr {
  margin-block: calc(40 * 1rem / var(--font-size));
  border: none;
  border-top: 1px solid #d9e1ec;
}
.single-download__body .wp-block-button {
  margin-block: calc(24 * 1rem / var(--font-size));
}
.single-download__body .wp-block-button__link {
  display: inline-block;
  padding: calc(12 * 1rem / var(--font-size)) calc(32 * 1rem / var(--font-size));
  background-color: #008ee7;
  color: #ffffff;
  border-radius: calc(4 * 1rem / var(--font-size));
  text-decoration: none;
  font-weight: 700;
}
.single-download__body .wp-block-button__link:hover {
  opacity: 0.85;
}

@media (max-width: 768px) {
  .single-download__body h2.wp-block-heading {
    font-size: calc(16 * 1rem / var(--font-size));
  }
  .single-download__body h3.wp-block-heading {
    margin-block-start: calc(48 * 1rem / var(--font-size));
    margin-block-end: calc(12 * 1rem / var(--font-size));
    font-size: calc(18 * 1rem / var(--font-size));
  }
  .single-download__body h4.wp-block-heading {
    margin-block-start: calc(48 * 1rem / var(--font-size));
    margin-block-end: calc(8 * 1rem / var(--font-size));
    font-size: calc(18 * 1rem / var(--font-size));
  }
  .single-download__body p:not([class]) {
    margin-block-end: calc(12 * 1rem / var(--font-size));
    font-size: calc(14 * 1rem / var(--font-size));
  }
}

/* =========================================
   download-detail Lazy Block の出力スタイル
   ========================================= */
.m-download-single__recommend {
  margin-block-start: calc(40 * 1rem / var(--font-size));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: calc(24 * 1rem / var(--font-size));
  width: 100%;
}

.m-download-single__recommend-header {
  display: flex;
  align-items: stretch;
  column-gap: calc(16 * 1rem / var(--font-size));
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
}

.m-download-single__recommend-accent {
  flex-shrink: 0;
  width: calc(4 * 1rem / var(--font-size));
  align-self: stretch;
  background-color: #00afef;
  border-radius: calc(200 * 1rem / var(--font-size));
}

.m-download-single__recommend-title {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: calc(18 * 1rem / var(--font-size));
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: #222;
}

/* チェックリスト */
.m-download-single__check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  row-gap: calc(8 * 1rem / var(--font-size));
  width: 100%;
}

.m-download-single__check-item {
  display: flex;
  align-items: flex-start;
  column-gap: calc(6 * 1rem / var(--font-size));
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

.m-download-single__check-item::before {
  content: none;
}

.m-download-single__check-icon {
  flex-shrink: 0;
  width: calc(28 * 1rem / var(--font-size));
  height: calc(28 * 1rem / var(--font-size));
  display: inline-flex;
}

.m-download-single__check-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.m-download-single__check-text {
  margin: 0;
  flex: 1;
  font-size: calc(15 * 1rem / var(--font-size));
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.05em;
  color: #222;
}

/* 資料内容テーブル */
.m-download-single__contents-table {
  width: 100%;
  border: 1px solid #d9e1ec;
  border-radius: calc(4 * 1rem / var(--font-size));
  overflow: hidden;
}

.m-download-single__contents-header {
  background-color: #f4f7fb;
  box-shadow: 0 calc(8 * 1rem / var(--font-size)) calc(24 * 1rem / var(--font-size)) rgb(19 96 191 / 0.1);
  padding-block: calc(8 * 1rem / var(--font-size));
  padding-inline: calc(24 * 1rem / var(--font-size));
  font-size: calc(16 * 1rem / var(--font-size));
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: #222;
}

.m-download-single__contents-body {
  background-color: #ffffff;
  padding-block: calc(16 * 1rem / var(--font-size));
  padding-inline: calc(24 * 1rem / var(--font-size));
  display: flex;
  flex-direction: column;
}

.m-download-single__contents-row {
  display: flex;
  align-items: baseline;
}

.m-download-single__contents-num {
  flex-shrink: 0;
  width: calc(24 * 1rem / var(--font-size));
  font-size: calc(14 * 1rem / var(--font-size));
  font-weight: 700;
  line-height: 2.3;
  letter-spacing: 0.05em;
  color: #008ee7;
}

.m-download-single__contents-text {
  flex: 1;
  font-size: calc(14 * 1rem / var(--font-size));
  font-weight: 500;
  line-height: 2.3;
  letter-spacing: 0.05em;
  color: #222;
}

/* プレビュー画像 */
.m-download-single__preview {
  position: relative;
  width: 100%;
  margin-block-start: calc(8 * 1rem / var(--font-size));
}

.m-download-single__preview-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(4 * 1rem / var(--font-size));
}

@media (max-width: 768px) {
  .m-download-single__recommend {
    row-gap: calc(16 * 1rem / var(--font-size));
  }
  .m-download-single__recommend-title {
    font-size: calc(16 * 1rem / var(--font-size));
  }
  .m-download-single__check-text {
    font-size: calc(13 * 1rem / var(--font-size));
  }
  .m-download-single__contents-header {
    font-size: calc(14 * 1rem / var(--font-size));
  }
  .m-download-single__contents-num,
  .m-download-single__contents-text {
    font-size: calc(12 * 1rem / var(--font-size));
  }
}