/*
Theme Name:     Lightning-child
Description:    Lightningの子テーマ
Author:         mirai-todoke
Template:       lightning

(optional values you can add: Theme URI, Author URI, Version, License, License URI, Tags, Text Domain)
*/


/* =========================
   Lightningのh2の横棒を消す
========================= */

h2 {
	border-top: none !important;
	padding-top: 0 !important;
}

/* -----------------------------
        改行
----------------------------- */

.hidden {
        display: none;
}

.hidden.pcBlock {
        display: inline;
}

@media screen and (max-width: 640px) {
        .hidden.pcBlock {
                display: none;
        }

        .hidden.spBlock {
                display: inline;
        }
}


/* ------------------------------------
   PCは中央寄せ、スマホだけ左寄せ
------------------------------------ */

.mobile-left {
  text-align: center !important;
}

@media screen and (max-width: 640px) {
  .mobile-left {
    text-align: left !important;
  }
}

/* -----------------------------
        汎用
----------------------------- */

.clear {
    clear:both;
}

.floatL{
        float:left;
        margin: 0;
}

.floatR{
        float:right;
        margin: -15px 0 0 20px;
}

.center{
        text-align:center;
}

.right{
        text-align:right;
}

.left{
        text-align:left;
}

.underline {
    text-decoration:underline;
}

strong {
        font-weight:bold;
}

em {
        font-weight:bold;
}

.font-bold {
        font-weight:bold;
}

.font-normal {
        font-weight:normal;
}

.indent-1 {
        margin:0 0 0 1em;
        text-indent: -1em;
}

.indent1 {
        text-indent: 1em;
}

/* =========================================================
   Photo Exhibition Maker
   Sales Page - Blue Theme
========================================================= */

.pem-sales {
	--pem-bg: #f4f8fc;
	--pem-white: #ffffff;
	--pem-ink: #18324a;
	--pem-text: #4a5d70;
	--pem-muted: #74879a;
	--pem-line: #dbe6f0;
	--pem-blue: #2f80c9;
	--pem-blue-dark: #175a94;
	--pem-soft: #edf5fc;

	background: var(--pem-white);
	color: var(--pem-text);
	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Helvetica Neue",
		"Yu Gothic",
		"YuGothic",
		"Meiryo",
		sans-serif;
	font-size: 16px;
	line-height: 1.9;
}

.pem-sales *,
.pem-sales *::before,
.pem-sales *::after {
	box-sizing: border-box;
}

.pem-sales img {
	display: block;
	max-width: 100%;
	height: auto;
}

.pem-sales h1,
.pem-sales h2,
.pem-sales h3,
.pem-sales p,
.pem-sales ul {
	margin-top: 0;
}

.pem-sales h1,
.pem-sales h2,
.pem-sales h3 {
	border: 0 !important;
	background: none !important;
	color: var(--pem-ink);
	font-weight: 700;
	line-height: 1.45;
}

.pem-container {
	width: min(1120px, calc(100% - 48px));
	margin: 0 auto;
}

.pem-section {
	padding: 100px 0;
}

.pem-section-label,
.pem-eyebrow {
	margin-bottom: 15px;
	color: var(--pem-blue);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.16em;
	line-height: 1.5;
}

.pem-heading {
	max-width: 760px;
	margin: 0 auto 55px;
	text-align: center;
}

.pem-heading h2 {
	margin-bottom: 18px;
	font-size: clamp(28px, 3vw, 38px);
}

.pem-heading > p:last-child {
	margin-bottom: 0;
}

.pem-center {
	margin-top: 42px;
	text-align: center;
}


/* =========================================================
   Buttons
========================================================= */

.pem-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 13px 27px;
	border: 1px solid transparent;
	border-radius: 5px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none !important;
	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease;
}

.pem-btn-main {
	background: var(--pem-blue);
	color: #fff !important;
}

.pem-btn-main:hover {
	background: var(--pem-blue-dark);
}

.pem-btn-sub {
	border-color: #afc2d4;
	background: #fff;
	color: var(--pem-ink) !important;
}

.pem-btn-sub:hover {
	border-color: var(--pem-ink);
}

.pem-btn-light {
	background: #fff;
	color: var(--pem-blue-dark) !important;
}

.pem-btn-outline-light {
	border-color: rgba(255,255,255,.6);
	color: #fff !important;
}


/* =========================================================
   HERO
========================================================= */

.pem-hero {
	overflow: hidden;
	background: var(--pem-bg);
}

.pem-hero-inner {
	display: grid;
	grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
	gap: clamp(50px, 7vw, 90px);
	align-items: center;
	min-height: 690px;
	padding-top: 80px;
	padding-bottom: 80px;
}

.pem-hero-copy h1 {
	max-width: 600px;
	margin-bottom: 25px;
	font-size: clamp(24px, 4vw, 38px);
	letter-spacing: .01em;
}

.pem-hero-lead {
	max-width: 610px;
	margin-bottom: 32px;
	font-size: 17px;
	line-height: 2;
}

.pem-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 32px;
}

.pem-hero-points {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	font-weight: 700;
}

.pem-hero-points li::before {
	content: "\2713";
	margin-right: 7px;
	color: var(--pem-blue);
}

.pem-hero-gallery {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	grid-template-rows: repeat(2, 190px);
	gap: 12px;
}

.pem-hero-photo {
	overflow: hidden;
	border-radius: 7px;
	background: #ddd;
}

.pem-hero-photo-large {
	grid-row: 1 / 3;
}

.pem-hero-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* =========================================================
   Problem
========================================================= */

.pem-intro {
	background: #fff;
}

.pem-problem-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--pem-line);
	border-bottom: 1px solid var(--pem-line);
}

.pem-problem {
	padding: 38px;
}

.pem-problem + .pem-problem {
	border-left: 1px solid var(--pem-line);
}

.pem-problem span {
	display: block;
	margin-bottom: 22px;
	color: var(--pem-blue);
	font-size: 13px;
	font-weight: 800;
}

.pem-problem h3 {
	margin-bottom: 12px;
	font-size: 21px;
}

.pem-problem p {
	margin-bottom: 0;
}


/* =========================================================
   Solution
========================================================= */

.pem-solution {
	background: var(--pem-bg);
}

.pem-solution-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(45px, 7vw, 85px);
	align-items: center;
}

.pem-solution-image {
	overflow: hidden;
	border-radius: 7px;
}

.pem-solution-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.pem-solution-copy h2 {
	margin-bottom: 25px;
	font-size: clamp(28px, 3vw, 38px);
}

.pem-solution-copy p {
	margin-bottom: 17px;
}


/* =========================================================
   Demo
========================================================= */

.pem-demo-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.pem-demo-photo {
	overflow: hidden;
	border-radius: 6px;
	background: #eee;
}

.pem-demo-photo img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}


/* =========================================================
   Features
========================================================= */

.pem-features {
	background: #173b5c;
}

.pem-features .pem-heading h2 {
	color: #fff;
}

.pem-features .pem-heading {
	color: #d3e4f1;
}

.pem-features .pem-section-label {
	color: #9bc9ea;
}

.pem-feature-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: rgba(255,255,255,.13);
	border: 1px solid rgba(255,255,255,.13);
}

.pem-feature {
	padding: 45px;
	background: #173b5c;
}

.pem-feature-number {
	margin-bottom: 24px;
	color: #8fc4eb;
	font-size: 12px;
	font-weight: 800;
}

.pem-feature h3 {
	margin-bottom: 23px;
	color: #fff;
	font-size: 23px;
}

.pem-feature ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 7px 25px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: #e2edf5;
}

.pem-feature li {
	position: relative;
	padding-left: 18px;
}

.pem-feature li::before {
	content: "";
	position: absolute;
	top: .85em;
	left: 0;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #72b5e6;
}


/* =========================================================
   Pagination
========================================================= */

.pem-pagination-section {
	background: var(--pem-bg);
}

.pem-pagination-inner {
	display: grid;
	grid-template-columns: 1fr .85fr;
	gap: 80px;
	align-items: center;
}

.pem-pagination-inner h2 {
	margin-bottom: 25px;
	font-size: clamp(28px, 3vw, 38px);
}

.pem-pagination-demo {
	padding: 35px;
	border: 1px solid var(--pem-line);
	border-radius: 8px;
	background: #fff;
}

.pem-mini-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.pem-mini-grid span {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: 3px;
	background:
		linear-gradient(
			135deg,
			#d9e7f3 0%,
			#eef5fa 100%
		);
}

.pem-page-numbers {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 25px;
}

.pem-page-numbers span,
.pem-page-numbers b {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 35px;
	height: 35px;
	padding: 0 10px;
	border: 1px solid var(--pem-line);
	border-radius: 3px;
	font-size: 13px;
}

.pem-page-numbers b {
	border-color: var(--pem-blue);
	background: var(--pem-blue);
	color: #fff;
}


/* =========================================================
   Use case
========================================================= */

.pem-usecase-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.pem-usecase-item {
	padding: 28px 30px;
	border: 1px solid var(--pem-line);
	border-radius: 5px;
	background: #fff;
}

.pem-usecase-item strong {
	display: block;
	margin-bottom: 7px;
	color: var(--pem-ink);
	font-size: 18px;
}

.pem-usecase-item p {
	margin-bottom: 0;
	font-size: 14px;
}


/* =========================================================
   Steps
========================================================= */

.pem-howto {
	background: var(--pem-bg);
}

.pem-howto .pem-heading {
	margin-bottom: 45px;
}

.pem-steps {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
}

.pem-step {
	position: relative;
	display: block;
	width: 100%;
	min-width: 0;
	padding: 28px 20px 25px;
	border: 1px solid var(--pem-line);
	border-radius: 6px;
	background: #fff;
	text-align: left;
}

.pem-step > span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	min-width: 38px;
	margin: 0 0 18px;
	padding: 0;
	border-radius: 50%;
	background: var(--pem-blue);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
}

.pem-step > div {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.pem-step h3 {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0 0 8px;
	padding: 0;
	border: 0 !important;
	background: transparent !important;
	font-size: 17px;
	line-height: 1.55;
	text-align: left;
}

.pem-step p {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.8;
	text-align: left;
}


/* =========================================================
   Steps - Tablet
========================================================= */

@media (max-width: 900px) {

	.pem-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}


/* =========================================================
   Steps - Smartphone
========================================================= */

@media screen and (max-width: 640px) {

	.pem-howto {
		padding: 65px 0 !important;
	}

	.pem-howto .pem-heading {
		margin: 0 0 30px !important;
		text-align: left !important;
	}

	.pem-howto .pem-heading h2 {
		margin: 0 !important;
		font-size: 26px !important;
		line-height: 1.5 !important;
		text-align: left !important;
	}

	/*
	 * スマホではグリッドを使わない。
	 * HTML構造に左右されず、5項目を確実に縦一列にする。
	 */
	.pem-sales .pem-steps {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.pem-sales .pem-step {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin: 0 0 12px !important;
		padding: 20px 18px !important;
		border: 1px solid var(--pem-line) !important;
		border-radius: 6px !important;
		background: #fff !important;
		text-align: left !important;
	}

	.pem-sales .pem-step:last-child {
		margin-bottom: 0 !important;
	}

	.pem-sales .pem-step::after {
		display: none !important;
		content: none !important;
	}

	.pem-sales .pem-step > span {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 38px !important;
		height: 38px !important;
		min-width: 38px !important;
		max-width: 38px !important;
		margin: 0 0 12px !important;
		padding: 0 !important;
		border-radius: 50% !important;
		background: var(--pem-blue) !important;
		color: #fff !important;
		font-size: 13px !important;
		font-weight: 700 !important;
		line-height: 1 !important;
	}

	/*
	 * HTMLが
	 * span + div(h3,p)
	 * でも
	 * span + h3 + p
	 * でも崩れないよう両方を指定。
	 */
	.pem-sales .pem-step > div,
	.pem-sales .pem-step h3,
	.pem-sales .pem-step p {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		float: none !important;
		clear: none !important;
		writing-mode: horizontal-tb !important;
		text-orientation: mixed !important;
		white-space: normal !important;
		word-break: normal !important;
	}

	.pem-sales .pem-step > div {
		margin: 0 !important;
		padding: 0 !important;
	}

	.pem-sales .pem-step h3 {
		margin: 0 0 6px !important;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
		font-size: 17px !important;
		font-weight: 700 !important;
		line-height: 1.55 !important;
		text-align: left !important;
	}

	.pem-sales .pem-step p {
		margin: 0 !important;
		padding: 0 !important;
		font-size: 14px !important;
		line-height: 1.8 !important;
		text-align: left !important;
		overflow-wrap: break-word !important;
	}

}


/* =========================================================
   Shortcode
========================================================= */

.pem-shortcode-box {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
	padding: 55px;
	border: 1px solid var(--pem-line);
	border-radius: 7px;
}

.pem-shortcode-box h2 {
	margin-bottom: 15px;
	font-size: clamp(27px, 3vw, 35px);
}

.pem-code {
	padding: 27px 25px;
	border-radius: 5px;
	background: #173b5c;
	color: #fff;
	font-family: Consolas, Monaco, monospace;
	font-size: clamp(14px, 2vw, 18px);
	text-align: center;
}


/* =========================================================
   Price
========================================================= */

.pem-price {
	background: var(--pem-bg);
}

.pem-price-box {
	max-width: 1000px;
	margin: 0 auto;
	padding: 60px;
	border: 1px solid var(--pem-line);
	border-radius: 8px;
	background: #fff;
	text-align: center;
}

.pem-price-box h2 {
	margin-bottom: 16px;
	font-size: clamp(27px, 3vw, 36px);
}

.pem-price-description {
	max-width: 600px;
	margin: 0 auto 35px;
}

.pem-price-value {
	padding: 30px 0;
	border-top: 1px solid var(--pem-line);
	border-bottom: 1px solid var(--pem-line);
}

.pem-price-value > span {
	display: block;
	margin-bottom: 3px;
	font-size: 13px;
	font-weight: 700;
}

.pem-price-value strong {
	display: block;
	color: var(--pem-ink);
	font-size: clamp(42px, 5vw, 56px);
	line-height: 1.3;
}

.pem-price-value small {
	margin-left: 7px;
	font-size: 17px;
}

.pem-price-value p {
	margin: 4px 0 0;
	font-weight: 700;
}

.pem-price-feature-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 30px 0;
}

.pem-price-feature-list span {
	padding: 6px 13px;
	border-radius: 30px;
	background: var(--pem-soft);
	font-size: 13px;
	font-weight: 700;
}

.pem-license {
	padding-top: 25px;
	border-top: 1px solid var(--pem-line);
	color: var(--pem-muted);
	font-size: 13px;
}

.pem-license p {
	margin-bottom: 5px;
}


/* =========================================================
   Final CTA
========================================================= */

.pem-final {
	padding: 95px 0;
	background: var(--pem-blue-dark);
	color: #deebf5;
}

.pem-final-inner {
	max-width: 850px;
	text-align: center;
}

.pem-final .pem-section-label {
	color: #a5cee9;
}

.pem-final h2 {
	margin-bottom: 20px;
	color: #fff;
	font-size: clamp(24px, 4vw, 38px);
}

.pem-final-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 35px;
}


/* =========================================================
   Tablet
========================================================= */

@media (max-width: 900px) {

	.pem-hero-inner {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.pem-hero-gallery {
		max-width: 700px;
	}

	.pem-solution-inner,
	.pem-pagination-inner {
		grid-template-columns: 1fr;
		gap: 45px;
	}

	.pem-problem-grid {
		grid-template-columns: 1fr;
	}

	.pem-problem + .pem-problem {
		border-top: 1px solid var(--pem-line);
		border-left: 0;
	}

	.pem-usecase-grid {
		grid-template-columns: repeat(2, 1fr);
	}

}


/* =========================================================
   Smartphone
========================================================= */

@media (max-width: 640px) {

	.pem-container {
		width: min(100% - 32px, 1120px);
	}

	.pem-section {
		padding: 70px 0;
	}

	.pem-heading {
		margin-bottom: 38px;
		text-align: left;
	}

	.pem-heading h2 {
		font-size: 27px;
		line-height: 1.55;
	}

	.pem-pc {
		display: none;
	}

	/* Hero */

	.pem-hero-inner {
		gap: 40px;
		padding-top: 55px;
		padding-bottom: 60px;
	}

	.pem-hero-copy h1 {
		font-size: 34px;
		line-height: 1.5;
	}

	.pem-hero-lead {
		font-size: 16px;
		line-height: 1.9;
	}

	.pem-hero-actions {
		display: grid;
		grid-template-columns: 1fr;
	}

	.pem-btn {
		width: 100%;
	}

	.pem-hero-points {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 8px 12px;
	}

	.pem-hero-gallery {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 200px 130px;
		gap: 8px;
	}

	.pem-hero-photo-large {
		grid-column: 1 / 3;
		grid-row: auto;
	}

	/* Problems */

	.pem-problem {
		padding: 28px 5px;
	}

	/* Solution */

	.pem-solution-copy h2,
	.pem-pagination-inner h2 {
		font-size: 27px;
	}

	/* Demo */

	.pem-demo-gallery {
		grid-template-columns: 1fr;
	}

	.pem-demo-photo img {
		aspect-ratio: 16 / 10;
	}

	/* Features */

	.pem-feature-grid {
		grid-template-columns: 1fr;
	}

	.pem-feature {
		padding: 32px 25px;
	}

	.pem-feature ul {
		grid-template-columns: 1fr;
	}

	/* Pagination */

	.pem-pagination-demo {
		padding: 20px;
	}

	/* Use cases */

	.pem-usecase-grid {
		grid-template-columns: 1fr;
	}

	.pem-usecase-item {
		padding: 23px;
	}


	/* Shortcode */

	.pem-shortcode-box {
		grid-template-columns: 1fr;
		gap: 30px;
		padding: 30px 22px;
	}

	.pem-code {
		overflow-x: auto;
		font-size: 13px;
		white-space: nowrap;
	}

	/* Price */

	.pem-price-box {
		padding: 38px 20px;
		text-align: left;
	}

	.pem-price-description {
		margin-left: 0;
	}

	.pem-price-value {
		text-align: center;
	}

	.pem-price-feature-list {
		justify-content: flex-start;
	}

	/* Final */

	.pem-final {
		padding: 70px 0;
	}

	.pem-final-inner {
		text-align: left;
	}

	.pem-final h2 {
		font-size: 29px;
	}

	.pem-final-actions {
		display: grid;
		grid-template-columns: 1fr;
	}

}





/* =========================================================
   写真展メーカー for WordPress
   操作マニュアル
========================================================= */

.pem-doc-page {
	--pem-doc-bg: #f6f7f4;
	--pem-doc-white: #ffffff;
	--pem-doc-ink: #202824;
	--pem-doc-text: #4d5852;
	--pem-doc-muted: #707a75;
	--pem-doc-line: #dfe4df;
	--pem-doc-green: #315c50;
	--pem-doc-green-dark: #23473d;
	--pem-doc-green-soft: #edf4f0;
	--pem-doc-warn: #fff8e8;
	--pem-doc-warn-line: #e4c66f;

	/*
	 * Lightning の固定ページ本文幅から抜けて、
	 * マニュアル全体をブラウザ幅いっぱいに広げる。
	 */
	position: relative;
	left: 50%;
	width: 100vw;
	max-width: none !important;
	margin-left: -50vw;
	margin-right: -50vw;
	overflow-x: clip;

	background: var(--pem-doc-white);
	color: var(--pem-doc-text);
	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Helvetica Neue",
		"Yu Gothic",
		"YuGothic",
		"Meiryo",
		sans-serif;
	font-size: 16px;
	line-height: 1.9;
}

.pem-doc-page *,
.pem-doc-page *::before,
.pem-doc-page *::after {
	box-sizing: border-box;
}

.pem-doc-page h1,
.pem-doc-page h2,
.pem-doc-page h3,
.pem-doc-page p,
.pem-doc-page ul,
.pem-doc-page ol {
	margin-top: 0;
}

.pem-doc-page h1,
.pem-doc-page h2,
.pem-doc-page h3 {
	padding: 0;
	border: 0 !important;
	background: transparent !important;
	color: var(--pem-doc-ink);
	font-weight: 700;
}

.pem-doc-page a {
	color: var(--pem-doc-green);
}

.pem-doc-page code {
	font-family: Consolas, Monaco, "Courier New", monospace;
}

.pem-doc-container {
	width: min(1200px, calc(100% - 64px));
	max-width: 1200px;
	margin: 0 auto;
}


/* =========================================================
   Hero
========================================================= */

.pem-doc-hero {
	padding: 76px 0 68px;
	background:
		linear-gradient(135deg, rgba(49,92,80,.08), rgba(255,255,255,.85)),
		var(--pem-doc-bg);
	border-bottom: 1px solid var(--pem-doc-line);
}

.pem-doc-hero-inner {
	width: min(1200px, calc(100% - 64px));
	max-width: 1200px;
	margin: 0 auto;
}

.pem-doc-kicker {
	margin-bottom: 12px;
	color: var(--pem-doc-green);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .16em;
}

.pem-doc-hero h1 {
	margin-bottom: 20px;
	font-size: clamp(30px, 4vw, 44px);
	line-height: 1.45;
	letter-spacing: .01em;
}

.pem-doc-lead {
	max-width: 760px;
	margin-bottom: 28px;
	font-size: 16px;
	line-height: 2;
}

.pem-doc-quick {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pem-doc-quick span {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 5px 12px;
	border: 1px solid #cfdad4;
	border-radius: 999px;
	background: rgba(255,255,255,.82);
	color: var(--pem-doc-green-dark);
	font-size: 13px;
	font-weight: 700;
}


/* =========================================================
   TOC
========================================================= */

.pem-doc-toc {
	padding: 32px 0;
	border-bottom: 1px solid var(--pem-doc-line);
	background: #fff;
}

.pem-doc-toc-title {
	margin: 0 0 14px;
	color: var(--pem-doc-ink);
	font-weight: 800;
}

.pem-doc-toc-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

.pem-doc-toc-grid a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 9px 13px;
	border: 1px solid var(--pem-doc-line);
	border-radius: 5px;
	background: #fff;
	color: var(--pem-doc-ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
}

.pem-doc-toc-grid a:hover {
	border-color: var(--pem-doc-green);
	color: var(--pem-doc-green);
}


/* =========================================================
   Sections
========================================================= */

.pem-doc-section {
	padding: 84px 0;
	scroll-margin-top: 30px;
}

.pem-doc-soft {
	background: var(--pem-doc-bg);
}

.pem-doc-heading {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	margin-bottom: 34px;
}

.pem-doc-heading > span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	min-width: 46px;
	border-radius: 50%;
	background: var(--pem-doc-green);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
}

.pem-doc-heading p {
	margin: 1px 0 4px;
	color: var(--pem-doc-green);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .13em;
}

.pem-doc-heading h2 {
	margin: 0;
	font-size: clamp(25px, 3vw, 33px);
	line-height: 1.5;
}

.pem-doc-intro {
	max-width: 1000px;
	margin-bottom: 32px;
}

.pem-doc-subtitle {
	margin: 42px 0 15px;
	font-size: 21px;
	line-height: 1.55;
}


/* =========================================================
   Cards
========================================================= */

.pem-doc-card-grid {
	display: grid;
	gap: 14px;
}

.pem-doc-card-grid-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pem-doc-card-grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pem-doc-card-grid-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pem-doc-card {
	padding: 25px;
	border: 1px solid var(--pem-doc-line);
	border-radius: 7px;
	background: #fff;
}

.pem-doc-card-num {
	display: block;
	margin-bottom: 18px;
	color: var(--pem-doc-green);
	font-size: 12px;
	font-weight: 800;
}

.pem-doc-card h3 {
	margin-bottom: 9px;
	font-size: 18px;
	line-height: 1.55;
}

.pem-doc-card p {
	margin-bottom: 0;
	font-size: 14px;
	line-height: 1.8;
}


/* =========================================================
   Step list
========================================================= */

.pem-doc-step-list {
	border-top: 1px solid var(--pem-doc-line);
}

.pem-doc-step {
	position: relative;
	display: block;
	width: 100%;
	min-width: 0;
	padding: 24px 0 24px 60px;
	border-bottom: 1px solid var(--pem-doc-line);
}

/* 手順番号 */
.pem-doc-step > b {
	position: absolute;
	top: 24px;
	left: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 38px;
	height: 38px;
	min-width: 38px;

	margin: 0;
	padding: 0;

	border-radius: 50%;
	background: var(--pem-doc-green-soft);
	color: var(--pem-doc-green-dark);

	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

/* 本文部分 */
.pem-doc-step > div {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.pem-doc-step h3 {
	display: block;
	width: 100%;
	max-width: 100%;

	margin: 0 0 6px;
	padding: 0;

	font-size: 18px;
	line-height: 1.55;

	word-break: normal;
	overflow-wrap: break-word;
}

.pem-doc-step p {
	display: block;
	width: 100%;
	max-width: 100%;

	margin: 0;
	padding: 0;

	line-height: 1.9;

	word-break: normal;
	overflow-wrap: break-word;
}

.pem-doc-step code {
	padding: 2px 6px;
	border-radius: 4px;
	background: #edf1ee;
	color: var(--pem-doc-green-dark);
}


/* =========================================================
   Operation / Note / Tip / Warning
========================================================= */

.pem-doc-operation {
	margin: 0 0 30px;
	padding: 18px 20px;
	border-left: 4px solid var(--pem-doc-green);
	background: var(--pem-doc-green-soft);
}

.pem-doc-operation-label {
	margin-bottom: 4px;
	color: var(--pem-doc-green);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
}

.pem-doc-operation p {
	margin: 0;
	color: var(--pem-doc-ink);
}

.pem-doc-note,
.pem-doc-tip,
.pem-doc-warning {
	margin-top: 28px;
	padding: 20px 22px;
	border-radius: 6px;
}

.pem-doc-note,
.pem-doc-tip {
	border: 1px solid #cfe0d8;
	background: var(--pem-doc-green-soft);
}

.pem-doc-warning {
	border: 1px solid var(--pem-doc-warn-line);
	background: var(--pem-doc-warn);
}

.pem-doc-note strong,
.pem-doc-tip strong,
.pem-doc-warning strong {
	display: block;
	margin-bottom: 5px;
	color: var(--pem-doc-ink);
}

.pem-doc-note p,
.pem-doc-tip p,
.pem-doc-warning p {
	margin: 0;
}


/* =========================================================
   Manager fields
========================================================= */

.pem-doc-field-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	border: 1px solid var(--pem-doc-line);
	background: var(--pem-doc-line);
}

.pem-doc-field {
	padding: 20px 22px;
	background: #fff;
}

.pem-doc-field strong {
	display: block;
	margin-bottom: 6px;
	color: var(--pem-doc-green-dark);
	font-size: 15px;
}

.pem-doc-field p {
	margin: 0;
	font-size: 14px;
	line-height: 1.8;
}


/* =========================================================
   Settings
========================================================= */

.pem-doc-settings-list {
	border-top: 1px solid var(--pem-doc-line);
}

.pem-doc-setting {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 32px;
	padding: 21px 0;
	border-bottom: 1px solid var(--pem-doc-line);
}

.pem-doc-setting > div strong {
	display: block;
	margin-bottom: 4px;
	color: var(--pem-doc-ink);
}

.pem-doc-setting > div span {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--pem-doc-green-soft);
	color: var(--pem-doc-green);
	font-size: 12px;
	font-weight: 700;
}

.pem-doc-setting p {
	margin: 0;
}


/* =========================================================
   Shortcode
========================================================= */

.pem-doc-code-box {
	margin: 30px 0;
	padding: 30px;
	border-radius: 7px;
	background: #202724;
	text-align: center;
}

.pem-doc-code-box span {
	display: block;
	margin-bottom: 12px;
	color: #becac4;
	font-size: 12px;
	font-weight: 700;
}

.pem-doc-code-box code {
	display: inline-block;
	max-width: 100%;
	padding: 12px 18px;
	border-radius: 5px;
	background: #fff;
	color: #183c32;
	font-size: clamp(15px, 2vw, 19px);
	font-weight: 700;
	white-space: nowrap;
}


/* =========================================================
   FAQ
========================================================= */

.pem-doc-faq-list {
	border-top: 1px solid var(--pem-doc-line);
}

.pem-doc-faq {
	border-bottom: 1px solid var(--pem-doc-line);
	background: transparent;
}

.pem-doc-faq summary {
	position: relative;
	padding: 21px 44px 21px 0;
	color: var(--pem-doc-ink);
	font-weight: 700;
	line-height: 1.65;
	cursor: pointer;
	list-style: none;
}

.pem-doc-faq summary::-webkit-details-marker {
	display: none;
}

.pem-doc-faq summary::after {
	content: "+";
	position: absolute;
	top: 19px;
	right: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--pem-doc-green-soft);
	color: var(--pem-doc-green);
	font-size: 19px;
	font-weight: 400;
	line-height: 1;
}

.pem-doc-faq[open] summary::after {
	content: "?";
}

.pem-doc-faq > div {
	padding: 0 44px 20px 0;
}

.pem-doc-faq p {
	margin: 0;
}


/* =========================================================
   Finish
========================================================= */

.pem-doc-finish {
	padding: 72px 0;
	background: var(--pem-doc-green-dark);
	color: #d9e2de;
	text-align: center;
}

.pem-doc-finish .pem-doc-kicker {
	color: #a9c5ba;
}

.pem-doc-finish h2 {
	margin-bottom: 15px;
	color: #fff;
	font-size: clamp(26px, 3vw, 34px);
}

.pem-doc-finish p {
	margin-bottom: 24px;
}

.pem-doc-top-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 9px 20px;
	border: 1px solid rgba(255,255,255,.55);
	border-radius: 4px;
	color: #fff !important;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none !important;
}

.pem-doc-top-link:hover {
	background: #fff;
	color: var(--pem-doc-green-dark) !important;
}


/* =========================================================
   Tablet
========================================================= */

@media (max-width: 900px) {

	.pem-doc-toc-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pem-doc-card-grid-3,
	.pem-doc-card-grid-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pem-doc-setting {
		grid-template-columns: 220px minmax(0, 1fr);
		gap: 24px;
	}

}


/* =========================================================
   Smartphone
========================================================= */

@media (max-width: 640px) {

	.pem-doc-container,
	.pem-doc-hero-inner {
		width: calc(100% - 32px);
		max-width: 1200px;
	}

	.pem-doc-hero {
		padding: 52px 0 48px;
	}

	.pem-doc-hero h1 {
		font-size: 30px;
		line-height: 1.5;
	}

	.pem-doc-lead {
		font-size: 15px;
	}

	.pem-doc-quick {
		gap: 6px;
	}

	.pem-doc-quick span {
		font-size: 12px;
	}

	.pem-doc-toc {
		padding: 25px 0;
	}

	.pem-doc-toc-grid {
		grid-template-columns: 1fr;
	}

	.pem-doc-section {
		padding: 62px 0;
	}

	.pem-doc-heading {
		gap: 13px;
		margin-bottom: 27px;
	}

	.pem-doc-heading > span {
		width: 40px;
		height: 40px;
		min-width: 40px;
	}

	.pem-doc-heading h2 {
		font-size: 25px;
		line-height: 1.55;
	}

	.pem-doc-heading p {
		font-size: 10px;
	}

	.pem-doc-card-grid-2,
	.pem-doc-card-grid-3,
	.pem-doc-card-grid-4,
	.pem-doc-field-list {
		grid-template-columns: 1fr;
	}

	.pem-doc-card {
		padding: 21px 19px;
	}

	
	.pem-doc-step {
		display: block;
		padding: 20px 0 20px 52px;
	}

	.pem-doc-step > b {
		top: 20px;
		width: 36px;
		height: 36px;
		min-width: 36px;
	}

	.pem-doc-step h3 {
		font-size: 17px;
		line-height: 1.55;
	}

	.pem-doc-step p {
		font-size: 14px;
		line-height: 1.85;
	}


	.pem-doc-operation,
	.pem-doc-note,
	.pem-doc-tip,
	.pem-doc-warning {
		padding: 17px 18px;
	}

	.pem-doc-setting {
		display: block;
		padding: 19px 0;
	}

	.pem-doc-setting > div {
		margin-bottom: 10px;
	}

	.pem-doc-code-box {
		padding: 24px 14px;
		text-align: left;
		overflow-x: auto;
	}

	.pem-doc-code-box code {
		font-size: 14px;
	}

	.pem-doc-faq summary {
		padding-right: 38px;
	}

	.pem-doc-faq > div {
		padding-right: 0;
	}

	.pem-doc-finish {
		padding: 60px 0;
		text-align: left;
	}

	.pem-doc-pc {
		display: none;
	}

}