@charset "UTF-8";

/* =========================================================
   assets/pdf-page/css/pdf-page.css
   ---------------------------------------------------------
   PDFダウンロードページ専用スタイル（20260922 新規）

   対象：/pet-pdf/ ／ /book-pdf/ ／ /book-pdf/thanks/ ／ /book-pdf/download/

   ・assets/css/style.css ・customize.css には一切追記していない
   ・フォーム（Contact Form 7）の見た目は customize.css に既にある
     div#form 配下のスタイルをそのまま利用する
   ・他ページへ影響させないよう、すべて .pdfPage / .pdfHeadline 配下にスコープした
     （body の id／class は他ページと重複しうるためセレクタに使わない）
   ・このファイルは wp_head() で読み込まれ、customize.css より前に出力されるため、
     既存ルールを上書きする箇所はセレクタの詳細度を必ず customize.css より高くすること
   ・ブレークポイントは rev2 に合わせて max-width:766px / min-width:767px
========================================================= */

/* --- 見出し（#headline の h1 内リード文） ---
   div#headline h1 i は本来アイコン画像用だが、
   本件では「◯◯をお読みいただいた方へ」というリード文に転用している。
   他ページの #headline に影響させないよう .pdfHeadline 配下に限定する。 */
div#headline.pdfHeadline h1 {
	width: 100%;
}

div#headline.pdfHeadline h1 i {
	display: block;
	width: 100%;
	margin-bottom: 0.5rem;
	font-style: normal;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	color: #4E3516;
}

/* 既定（2.5rem／SP 2.9rem）は本件のような長いタイトルでは収まらないため、
   .pdfHeadline のときだけ小さくして折り返せるようにする */
div#headline.pdfHeadline h1 strong {
	width: 100%;
	line-height: 1.4;
	text-align: center;
}

/* --- セクション共通 --- */
/* フォーム下の関連リンクブロック（/book-pdf/ のみ）
   ---------------------------------------------------------
   20260923 関連ページ誘導の見せ方を /book-pdf/download/ に統一する。
   ダウンロードページ側は #maincontents 配下にあり、style.css の
     div#maincontents div.bodytext { padding }
     div#maincontents div.bodytext p { font-size }
   が効いている。#pdflinks には当たらず文字サイズがずれるため、
   同じ値をここで与えて見た目をそろえる。
   （style.css は無変更。セレクタも本ブロック限定） */
div#pdflinks {
	padding-top: 0;
	background-color: #f4f4f4;
}

div#pdflinks div.bodytext {
	padding: 1rem 2rem;
}

/* 白いパネル。div.wrap 自体には余白が無いため、ここで内側の余白を持たせる */
div.pdfPage div.wrap {
	padding: 2.5rem;
	background: #ffffff;
	border-radius: 0.5rem;
}

div.pdfPage h2.pdfPage__lead {
	margin: 0 0 1.5rem 0;
	text-align: center;
	line-height: 1.6;
}

div.pdfPage div.pdfPage__contents h2 {
	margin: 0 0 1rem 0;
	text-align: center;
}

div.pdfPage p.pdfPage__free {
	color: #666666;
}

div.pdfPage p.pdfPage__caution {
	color: #666666;
}

div.pdfPage .text-danger {
	color: #df5b41;
}


/* --- ボタン（閲覧／ダウンロード） --- */
div.pdfPage div.pdfPage__btnArea {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 1rem;
	margin: 2rem 0;
}

div.pdfPage p.pdfPage__btn {
	margin: 0;
	display: flex;
	text-align: center;
}

/* 「見る」側は別窓アイコンの分だけ行の高さが増えるため、
   flex＋min-height＋border-box で2つのボタンの高さをそろえる */
div.pdfPage p.pdfPage__btn a {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	min-width: 16rem;
	min-height: 4rem;
	padding: 0.6rem 2rem;
	font-weight: 900;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	border-radius: 4rem;
	transition: opacity 0.3s;
}

div.pdfPage p.pdfPage__btn a:hover {
	opacity: 0.7;
}

/* ダウンロード＝優先ボタン（フォーム送信ボタンと同じ黄色） */
div.pdfPage p.pdfPage__btn--primary a {
	color: #000000;
	background: #ffff00;
}

/* 閲覧＝副次ボタン */
div.pdfPage p.pdfPage__btn--secondary a {
	color: #4E3516;
	background: #ffffff;
	border: 2px solid #4E3516;
}


/* --- ページ内PDFビューア（PCのみ表示） --- */
div.pdfPage div.pdfPage__viewer {
	margin: 0 auto 2rem auto;
}

div.pdfPage div.pdfPage__viewer object {
	display: block;
	width: 100%;
	height: 40rem;
	border: 1px solid #dddddd;
	border-radius: 0.5rem;
	background: #f4f4f4;
}


/* --- 「PDFでご紹介していること」「資料一覧」の番号付きリスト --- */
div.pdfPage ol.pdfPage__list {
	max-width: 40rem;
	margin: 1.5rem auto;
	padding: 0;
	list-style: none;
	counter-reset: pdfitem;
}

div.pdfPage ol.pdfPage__list li {
	position: relative;
	margin: 0 0 0.8rem 0;
	padding: 0.8rem 1rem 0.8rem 3.5rem;
	line-height: 1.6;
	background: #f7f2e9;
	border-radius: 0.5rem;
	counter-increment: pdfitem;
}

div.pdfPage ol.pdfPage__list li::before {
	content: counter(pdfitem);
	position: absolute;
	top: 50%;
	left: 1rem;
	width: 1.8rem;
	height: 1.8rem;
	line-height: 1.8rem;
	font-weight: 900;
	text-align: center;
	color: #ffffff;
	background: #4E3516;
	border-radius: 50%;
	transform: translateY(-50%);
}

div.pdfPage ol.pdfPage__list li strong {
	display: block;
}

div.pdfPage ol.pdfPage__list li span {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.9em;
	color: #666666;
}


/* --- ダウンロード専用ページの資料カード --- */
div.pdfPage ul.pdfPage__cards {
	margin: 2rem 0;
	padding: 0;
	list-style: none;
}

div.pdfPage li.pdfPage__card {
	margin: 0 0 1.5rem 0;
	padding: 1.5rem;
	background: #f7f2e9;
	border-radius: 0.5rem;
}

div.pdfPage li.pdfPage__card h2 {
	margin: 0;
	text-align: center;
	line-height: 1.5;
}

div.pdfPage li.pdfPage__card p.pdfPage__cardNote {
	margin: 0.5rem 0 0 0;
	text-align: center;
	color: #666666;
}

div.pdfPage li.pdfPage__card div.pdfPage__btnArea {
	margin: 1.2rem 0 0 0;
}


/* --- 関連ページへのリンク --- */
div.pdfPage p.pdfPage__linkItem {
	margin: 0 0 1rem 0;
	padding: 0 0 0 1.2em;
	text-indent: -1.2em;
}

div.pdfPage p.pdfPage__linkItem::before {
	content: "■";
	margin-right: 0.2em;
	color: #4E3516;
}

div.pdfPage p.pdfPage__linkItem a {
	font-weight: 700;
	text-decoration: underline;
}

div.pdfPage p.pdfPage__linkItem span {
	display: block;
	margin-top: 0.2rem;
	padding-left: 1.2em;
	text-indent: 0;
	font-size: 0.85em;
	color: #666666;
}


/* --- サンクスページ --- */
div#form div#thanks p.btn a.pdfPage__backTop {
	display: inline-block;
	min-width: 16rem;
	margin-top: 2rem;
	padding: 1rem 2rem;
	font-weight: 900;
	text-align: center;
	text-decoration: none;
	color: #000000;
	background: #ffff00;
	border-radius: 4rem;
}

div#form div#thanks p.pdfPage__caution {
	margin-top: 1.5rem;
	color: #666666;
}

/* メールが届かない方向けの導線 */
div#form div#thanks div.thanks__direct {
	max-width: 32rem;
	margin: 2.5rem auto 0 auto;
	padding: 1.5rem 1rem;
	background: #f7f2e9;
	border-radius: 0.5rem;
}

div#form div#thanks div.thanks__direct p {
	margin: 0;
}

div#form div#thanks p.thanks__directBtn {
	margin-top: 1rem !important;
}

div#form div#thanks p.thanks__directBtn a {
	display: inline-block;
	min-width: 16rem;
	padding: 0.8rem 2rem;
	font-weight: 900;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	color: #4E3516;
	background: #ffffff;
	border: 2px solid #4E3516;
	border-radius: 4rem;
	transition: opacity 0.3s;
}

div#form div#thanks p.thanks__directBtn a:hover {
	opacity: 0.7;
}


/* =========================================================
   申込フォーム（Googleフォーム／customモード）
   ---------------------------------------------------------
   dt/dd の幅・必須バッジ・入力欄の枠線は customize.css / style.css の
   div#form 配下の指定がそのまま効くため、ここには書かない。
   Contact Form 7 のクラス（.wpcf7-*）に依存している部分だけ、
   自前のクラスで同じ見た目を作り直している。
========================================================= */

/* --- 送信用の隠しiframe --- */
div#form iframe#gformTarget {
	display: none;
}

/* --- 選択肢（現在気になっていること） ---
   customize.css の .wpcf7-list-item と同じ、折り返して並ぶ見た目にする */
div#form form.gform ul.gform__choices {
	margin: 0;
	padding: 0;
	list-style: none;
}

div#form form.gform ul.gform__choices li {
	display: inline-block;
	margin: 0 1.5em 0.3em 0;
	list-style: none;
}

div#form form.gform ul.gform__choices label {
	display: inline-block;
	position: relative;
	padding: 0 0 0 1.8em;
	line-height: 1.6;
	cursor: pointer;
}

/* 標準のチェックボックスは隠し、::before ／ ::after で描き直す
   （customize.css の CF7 チェックボックスと同じ作り） */
div#form form.gform ul.gform__choices input[type="checkbox"],
div#form form.gform div.gform__acceptance input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

div#form form.gform ul.gform__choices label > span,
div#form form.gform div.gform__acceptance label > span {
	display: inline-block;
	position: relative;
}

div#form form.gform ul.gform__choices label > span::before,
div#form form.gform div.gform__acceptance label > span::before {
	content: "";
	display: block;
	position: absolute;
	top: 0.2em;
	left: -1.8em;
	width: 1.2rem;
	height: 1.2rem;
	background: #ffffff;
	border: 1px solid #cccccc;
	border-radius: 0.2rem;
}

div#form form.gform ul.gform__choices input[type="checkbox"]:checked + span::after,
div#form form.gform div.gform__acceptance input[type="checkbox"]:checked + span::after {
	content: "";
	display: block;
	position: absolute;
	top: 0.35em;
	left: -1.7em;
	width: 0.95rem;
	height: 0.95rem;
	background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23df5b41%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M19.4%2C1c.6.5.8%2C1.4.3%2C2l-11.4%2C15.7c-.2.3-.6.5-1%2C.6-.4%2C0-.8-.1-1.1-.4L.4%2C13.2c-.6-.6-.6-1.5%2C0-2s1.5-.6%2C2%2C0l4.5%2C4.5L17.4%2C1.3c.5-.6%2C1.4-.8%2C2-.3h0Z%22%2F%3E%3C%2Fsvg%3E');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
}

/* キーボード操作でも今どこを触っているか分かるようにする */
div#form form.gform ul.gform__choices input[type="checkbox"]:focus-visible + span::before,
div#form form.gform div.gform__acceptance input[type="checkbox"]:focus-visible + span::before {
	outline: 2px solid #526388;
	outline-offset: 2px;
}


/* --- 個人情報の同意（customize.css の .form__acceptance と同じ見た目） --- */
div#form form.gform div.gform__acceptance {
	margin: 2em 0 0 0;
	text-align: center;
}

div#form form.gform div.gform__acceptance label {
	display: inline-block;
	padding: 0 0 0 1.8em;
	text-align: left;
	cursor: pointer;
}

div#form form.gform div.gform__acceptance a {
	text-decoration: underline;
}

div#form form.gform div.gform__acceptance--note {
	margin-top: 0.5em;
}

div#form form.gform div.gform__acceptance--note p {
	margin: 0;
	font-size: 0.9em;
	text-align: center;
	color: #666666;
}


/* --- 送信ボタン（customize.css の input.wpcf7-submit と同じ見た目） --- */
div#form form.gform div.form__submit {
	margin: 2em 0 0 0;
	text-align: center;
}

div#form form.gform div.form__submit p {
	margin: 0;
	text-align: center;
}

div#form form.gform button.gform__submit {
	width: auto;
	font-family: inherit;
	font-weight: 900;
	line-height: 1.4;
	color: #000000;
	background: #ffff00;
	border: 0 none;
	border-radius: 4rem;
	cursor: pointer;
	transition: opacity 0.3s;
}

div#form form.gform button.gform__submit:hover {
	opacity: 0.7;
}

div#form form.gform button.gform__submit:disabled {
	color: #888888;
	background-color: rgba(235, 235, 228, 1);
	opacity: 1;
	cursor: not-allowed;
}

div#form form.gform.is-sending button.gform__submit {
	opacity: 0.7;
	pointer-events: none;
}


/* --- エラー表示 --- */
div#form form.gform p.gform__error {
	margin: 0.3em 0 0 0;
	font-size: 0.9em;
	font-weight: 700;
	text-align: left;
	color: #df5b41;
}

div#form form.gform p.gform__error--form {
	margin-top: 1em;
	text-align: center;
}

div#form form.gform input.is-error {
	border-color: #df5b41;
}


/* --- ボット対策（人には見せない） --- */
div#form form.gform div.gform__honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}


/* --- iframeモード（Googleフォームをそのまま埋め込む場合） --- */
div#form div.gform__embed {
	margin: 0 auto;
}

div#form div.gform__embed iframe {
	display: block;
	width: 100%;
	height: 1400px;
	margin: 0 auto;
	border: 0 none;
}


@media screen and (min-width: 767px) {
	/* 関連ページ誘導の文字サイズ（#maincontents と同値） */
	div#pdflinks div.bodytext p {
		font-size: 1.2rem;
	}
	div#form form.gform button.gform__submit {
		margin: 0 1em;
		padding: 0.5em 1em;
		font-size: 1.5rem;
	}
	/* PCは2列にそろえる（幅がばらついて散らからないように） */
	div#form form.gform ul.gform__choices {
		display: flex;
		flex-wrap: wrap;
	}
	div#form form.gform ul.gform__choices li {
		width: 48%;
		margin: 0 2% 0.5em 0;
	}
	div#form form.gform ul.gform__choices label {
		font-size: 1.2rem;
	}
	div#headline.pdfHeadline h1 i {
		font-size: 1.1rem;
	}
	div#headline.pdfHeadline h1 strong {
		font-size: 2.1rem;
	}
	div#headline.pdfHeadline div.container {
		min-height: 13rem !important;
	}
	div.pdfPage h2.pdfPage__lead {
		font-size: 1.8rem;
	}
	div.pdfPage li.pdfPage__card h2 {
		font-size: 1.3rem;
	}
}

@media screen and (max-width: 766px) {
	/* 関連ページ誘導の文字サイズ（#maincontents と同値） */
	div#pdflinks div.bodytext p {
		font-size: 1.4rem;
	}
	div#form form.gform button.gform__submit {
		display: block;
		width: 85%;
		margin: 1em auto;
		padding: 0.8em 0;
		font-size: 1.8rem;
	}
	/* SPは選択肢を1行ずつ縦に並べる（押し間違いを減らす） */
	div#form form.gform ul.gform__choices li {
		display: block;
		margin: 0 0 0.6em 0;
	}
	div#form form.gform ul.gform__choices label {
		font-size: 1.5rem;
	}
	div#form form.gform p.gform__error {
		font-size: 1.3rem;
	}
	div#form div.gform__embed iframe {
		height: 1600px;
	}
	div#headline.pdfHeadline h1 i {
		font-size: 1.1rem;
	}
	div#headline.pdfHeadline h1 strong {
		font-size: 2.1rem;
	}
	div#headline.pdfHeadline div.container {
		padding-left: 1rem;
		padding-right: 1rem;
		min-height: 13rem !important;
	}
	div.pdfPage h2.pdfPage__lead {
		font-size: 1.4rem;
	}
	div.pdfPage li.pdfPage__card h2 {
		font-size: 1.15rem;
	}
	/* ボタンは縦積み・全幅 */
	div.pdfPage div.pdfPage__btnArea {
		flex-direction: column;
		gap: 0.8rem;
	}
	div.pdfPage p.pdfPage__btn a {
		min-width: 0;
		width: 100%;
		max-width: 20rem;
		margin: 0 auto;
	}
	/* スマートフォンはブラウザ内蔵PDFビューアの挙動が端末差で安定しないため、
	   埋め込みは出さず「PDFを見る」（別タブ）へ寄せる */
	div.pdfPage div.pdfPage__viewer {
		display: none;
	}
	div.pdfPage ol.pdfPage__list li {
		padding-left: 3rem;
	}
	div.pdfPage div.wrap {
		padding: 1.5rem 1rem;
	}
	div.pdfPage li.pdfPage__card {
		padding: 1.2rem 1rem;
	}
	div#form div#thanks p.btn a.pdfPage__backTop {
		width: 100%;
		max-width: 20rem;
	}
	div#form div#thanks p.thanks__directBtn a {
		display: block;
		width: 100%;
		max-width: 20rem;
		margin: 0 auto;
		min-width: 0;
	}
}