@charset "UTF-8";

:root {
	--pss-link-hover-bg: #b0e0e6; /*pdf-link BOX*/
	--pss-link-box-border: #3f3f3f;
}

/* =========================================== Original BOX === */
/* my-box内の見出しリセット */
.entry-content [class^="pss-"] :is(h2, h3, h4, h5) {
	padding: 0;
	border: unset;
}

/* -----------------------------------
   - アイコン付きタイトル BOX
----------------------------------- */

.pss-accent-box {
	margin: 2rem auto 0;
	padding: .5rem 2rem;
	border: solid 1px var(--pss-color-key);
	border-radius: 0.5rem;
	max-width: 95%;
	width: 600px;
}
@container article (max-width: 500px) {
    .pss-accent-box {
        padding: .5rem 1rem;
    }
}
.pss-accent-box > .pss-accent-box__heading {
  position: relative;
	font-size: font-size: clamp(1.2rem, 1.15rem + 0.25vw, 1.3rem);
  font-weight:bold;
  text-align: center;
	line-height: 1.5;
  margin: 0 auto 1.5rem;
	&::before {
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
		content: "\f0eb";
		display: block;
		margin: 10px 0 20px;
		color: var(--pss-color-key);
		font-size: 35px;
	}
	&::after {
		content: '';
		position: absolute;
		top: 58px;
		left: 50%;
		transform: translateX(-50%);
		width: 60px;
		height: 2px;
		background-color: var(--pss-color-key);
	}
}



/* ----------------------------------------------------------- 
  無料ダウンロードページ
------------------------------------------------------------ */

/* === 使用上の注意 === */
.caution-box {
	margin: 3rem 6rem 5rem;
	padding: 1rem;
	background: #b0e0e6;
	border-radius: 10px;
}
.article .caution-box > h2 {
	margin: 0;
	padding: 1rem 0;
	text-align: center;
	border: none;
	font-weight: bold;
	font-size: 1.2rem;
	background-color: transparent;
}
.caution-box > ul {
	margin: 0;
	padding: 0;
}
.caution-box > ul li {
	margin: 1rem;
	padding: 0 0 0 1.5rem;
	position: relative;
	list-style: none;
	font-size: 1rem;
	&:before {
		content: "";
		position: absolute;
		top: .35rem;
		left: 0;
		width: 1rem;
		height: 1rem;
		border-radius: 50%;
		border: 1px solid #333;
	}
}
/* === FREE download image link === */
.pdf-imagelink {
	width: 100%;
	margin: 0 auto; /*中央*/
}
.pdf-imagelink__image {
	width: 100%;
}
.pdf-imagelink__anchor {
	display: block;
	position: relative;
	margin: 5rem 1rem 3rem;
}
.pdf-imagelink__anchor::before {
	content: "DOWNLOAD";
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	color: #f1f1f1;
	font-size: 1.5rem;
	letter-spacing: 0.3rem;
	text-indent: 0.3rem;
	font-weight: bold;
	border-radius: 0;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: all 1s ease-in-out;
}
.pdf-imagelink__anchor:hover::before {
	opacity: 1;
}
/* === FREE PDF 概要 === */
.free-refill-info {
	margin: 0 1.5rem;
}
.free-refill-info .free-refill-info__title {
	padding: 0 1rem .8rem;
	margin-bottom: 1rem;
	border: none;
}

.free-refill-info .free-refill-info__list {
	margin: 0;
	padding: 0 1rem;
	list-style: none;
}
.free-refill-info .free-refill-info__item {
	display: flex;
	margin-bottom: .3rem;
	line-height: 2;
}
.free-refill-info .free-refill-info__item::before {
	content: "・";
	flex: 0 0 auto;
	margin-right: .5rem;
}

/* === FREE PDF download link box === */
.pdf-download {
	margin: 2rem 2rem;
	max-width: 100%;
	border: 1px solid var(--pss-link-box-border);
	border-radius: 10px;
	overflow: hidden;
	container: pdf-download / inline-size;
}
.pdf-download > .pdf-download__link {
	display: flex;
	gap: 20px;
	padding: 1.2rem;
	color: #3f3f3f;
	text-decoration: none;
	background: none;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	transition: background-color 1s ease;
}
/* icon（幅広いときは右線） */
.pdf-download > .pdf-download__link::before {
	content: "\f1c1";
	font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 1.5rem;
	line-height: 2;
	color: gray;
	padding: 0 1.2rem 0 .5rem;
	border-bottom: none;
	border-right: 1px solid #ddd;
	flex: 0 0 auto;
}
/* button（幅広いときは固定幅140px） */
.pdf-download .pdf-download__button {
	display: block;
	padding: .8rem 1rem;
	text-align: center;
	border-radius: 12px;
	color: #fefefe;
	background: #3f3f3f;
	font-size: .9rem;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	width: auto;
	flex: 0 0 140px;
	transition: transform 0.2s ease;
}
/*【コンテナクエリ】パーツの横幅が 400px 未満*/
@container pdf-download (max-width: 399px) {
	.pdf-download > .pdf-download__link {
		flex-direction: column;
		align-items: stretch;
	}
	/* アイコン（狭いときは下線） */
	.pdf-download > .pdf-download__link::before {
		padding-bottom: .8rem;
		padding-right: 0;
		line-height: 1;
		border-bottom: 1px solid #ddd;
		border-right: none;
	}
	/* ボタン（狭いときは横幅100%） */
	.pdf-download .pdf-download__button {
		width: 100%;
		flex: none;
	}
}
/* 共通スタイル */
.pdf-download .pdf-download__meta {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	flex: 1;
	text-align: left;
}
.pdf-download .pdf-download__filename {
	font-size: 1rem;
	font-weight: 600;
	word-break: break-all;
	line-height: 1.4;
}
.pdf-download .pdf-download__size {
	color: gray;
	font-size: .7rem;
	margin-top: 0.5rem;
}
.pdf-download .pdf-download__tag {
	color: gray;
	font-size: .8rem;
	line-height: 1;
}
/* link -focus-visible- */
.pdf-download__link:focus-visible {
	outline: 2px solid var(--pss-link-box-border);
	outline-offset: -2px;
	border-radius: 10px;
	background: var(--pss-link-hover-bg);
}
/* link -hover- */
@media (any-hover: hover) {
	.pdf-download__link:hover {
		background: var(--pss-link-hover-bg);
	}
	.pdf-download__button:hover {
		transform: translateY(1px);
	}
}

/* ----------------------------------------------------------- 
  有料PDF紹介ページ
------------------------------------------------------------ */
/* === SHOP PDF download link box === */
.shop-product {
	border: 1px solid var(--pss-link-box-border);
	border-radius: 10px;
	overflow: hidden;
	margin: 1.5rem .5rem;
}
.shop-product__link {
	display: flex;
	flex-wrap: wrap;
	column-gap: 20px;
	padding: .5rem 1rem;
	text-decoration: none;
	transition: background-color 1s ease;
}
.shop-product__image {
	flex-basis: 120px;
	display: flex;
	align-items: center;
	margin: .5rem auto;
}
.shop-product__image img {
	width: 100%;
	height: auto;
	margin: 0;
	border-radius: 10px;
}
.shop-product__info {
	flex: 1 1 195px;
	margin: .5rem 0;
	display: flex;
	flex-direction: column;
}
.shop-product__title {
	color: #3f3f3f;
	flex-grow: 1;
}
.shop-product__data {
	display: block;
	font-size: .8rem;
	color: gray;
	margin-bottom: 10px;
}
.shop-product__button {
	padding: .5rem;
	background: #3f3f3f;
	border-radius: 10px;
	text-align: center;
	color: #fefefe;
	font-size: .8rem;
	font-family: "Inter", sans-serif;
	font-weight: 400;
	transition: transform 0.2s ease;
}
/* link -focus-visible- */
.shop-product__link:focus-visible {
	outline: 2px solid var(--pss-link-box-border);
	outline-offset: -2px;
	border-radius: 10px;
	background: var(--pss-link-hover-bg);
}
/* link -hover- */
@media (any-hover: hover) {
	.shop-product__link:hover {
		background: var(--pss-link-hover-bg);
	}
	.shop-product__button:hover {
		transform: translateY(1px);
	}
}


/* ========================================
   リフィル概要
======================================== */

.pss-refill-info {
  width: 100%;
}

/* タイトル */
.pss-refill-info__title:not(h2.entry-content) {
	position: relative;
	display: flex;
	align-items: center;
	margin: 3rem 0 1rem;
	font-weight: 700;
	line-height: 1.4;
	border-left: unset;
	
	&::before {
		content: "REFILL INFO";
		position: absolute;
		top: -1.1rem;
		left: 0;
		color: var(--pss-color-key);
		font-size: clamp(.55rem, .5rem + .3vw, .675rem);
		font-weight: 600;
		letter-spacing: .35rem;
		line-height: 1.4;
	}
	
	&::after {
		content: "";
		flex: 1;
		height: 1px;
		margin-left: 1rem;
		background: var(--pss-color-key);
	}
}


/* --- カード一覧（左ラベル＋右コンテンツ）枠組み --- */

.pss-refill-info__cards {
  display: grid;
  gap: .6rem;
}

/*  カード  */
.pss-refill-info__card {
  display: grid;
	grid-template-columns: 28% 1fr;
  overflow: hidden;
  background: #fefefe;
  border: 1px solid #e3e5e6;
  border-radius: .5rem;
}


/* --- 左ラベル --- */

.pss-refill-info__label {
  display: flex;
  align-items: flex-start;
  gap: .6rem; /*アイコンと文字の間幅*/
  padding: 1.3rem 1rem;
  background: #f6f7f8;
  border-right: 1px solid #e3e5e6;
}

/* アイコン */
.pss-refill-info__label::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--pss-color-key);
  flex-shrink: 0;
  width: 1.8rem;
  height: 1.8rem;
  display: flex;
  align-items: center; /*1.8remの枠内で中央*/
  justify-content: center;
}
.pss-refill-info__label--items::before {
  content: "\f03a";
}
.pss-refill-info__label--size::before {
  content: "\f424";
}
.pss-refill-info__label--pages::before {
  content: "\f15c";
}

/* ラベルタイトル */
.pss-refill-info__label > .pss-refill-info__label-title {
  margin: 0;
  font-weight: 700;
  height: 1.8rem; /*アイコンと揃える*/
  display: flex;
  align-items: center; /*1.8remの枠内で中央*/
  line-height: 1;
}


/* --- 右コンテンツ --- */

.pss-refill-info__content {
  min-width: 0;
  padding: 1.3rem 1.5rem;
  background: #fefefe;
}

/* 1. 記載項目(タグ) */
.pss-refill-info__tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
	justify-content: flex-start;
  width: 100%;
  gap: .4rem;
  margin: 0;
  min-height: 1.8rem; /*1行目を1.8remに同期*/
}

.pss-refill-info__tags span {
  display: inline-block;
  margin: 0;
  background: #f6f7f8;
  font-size: .8rem;
  padding: .2rem .7rem;
  border: 1px solid #e3e5e6;
  border-radius: 12px;
  font-weight: 500;
  line-height: 1.4;
}

/* 2. サイズ */
.pss-refill-info__size-value,
.pss-refill-info__size-unit,
.pss-refill-info__size-detail {
  line-height: 1.8rem; /*1.8remに同期*/
  display: inline-block;
  vertical-align: middle;
}
.pss-refill-info__size-value {
  font-size: 1.5rem;
  font-weight: 700;
}
.pss-refill-info__size-unit {
  font-size: .95rem;
  margin-left: .1rem;
}
.pss-refill-info__size-detail {
  font-size: .9rem;
  margin-left: .4rem;
}

/* 3. 収録ページ */
.pss-refill-info__page-count {
  font-size: 1.2rem;
  font-weight: 700;
  height: 1.8rem; /*1.8remに同期 枠を作成*/
  display: flex;
  align-items: center; /*左ラベル1行目と垂直中央揃え*/
  margin-bottom: 0.3rem;
}

.pss-refill-info__page-count span {
	margin: 0 .2rem;
	color: var(--pss-color-key);
}

/* リスト共通 */
.pss-refill-info__pages,
.pss-refill-info__pages ul {
	list-style: none;
	padding: 0;
	font-size: .95rem;
	line-height: 1.6;
}

/* 親リスト */
ul.pss-refill-info__pages {
	margin: unset;
	
	> li {
    position: relative;
    padding-left: 1rem;
		&::before {
			content: "•";
			position: absolute;
			left: 0;
			top: 0;
			color: var(--pss-color-key);
			font-weight: 700;
		}
	}
}

/* 子リスト */
.pss-refill-info__pages ul {
	padding-left: .3rem;
	margin-top: .2rem;
	
	> li {
		position: relative;
		padding-left: 1rem;
	  
		&::before {
			content: "-";
			position: absolute;
			left: 0;
			top: 0;
			color: var(--pss-color-key);
			font-weight: 700;
		}
	}
}


/* --- 狭幅時 縦並び切替 --- */

@container article (max-width: 550px) {

  .pss-refill-info__card {
    grid-template-columns: 1fr;
  }

  .pss-refill-info__label {
    border-right: none;
    border-bottom: 1px solid #e3e5e6;
    padding: .8rem 1rem;
  }

}