/* 下層ページ共通CSS（参考サイト esv の設計言語に準拠） */

/*==================== ページタイトル ====================*/
.pagewrapper {margin-top:10vh;}
.titlearea {padding:6vw 5vw 5vw 5vw;position:relative;overflow:hidden;
	background:linear-gradient(180deg,#eef4fb 0%,#f7fafd 70%,#fff 100%);
	border-bottom:solid var(--line-2) 1px;}
.titlearea .inner {width:65vw;max-width:100%;margin:0 auto;}
.titlearea .label {font-size:0.9rem;font-weight:700;color:var(--label);
	letter-spacing:0.18em;text-transform:uppercase;display:block;margin-bottom:1.2rem;}
.titlearea h1 {font-size:3.0rem;font-weight:500;margin-bottom:1.2rem;color:var(--navy);line-height:1.5em;}
.titlearea h2 {font-size:1.3rem;font-weight:500;margin-bottom:1.2rem;color:var(--blue);line-height:1.7em;}
.titlearea p {font-size:1.1rem;color:var(--ink-2);line-height:2.0em;}
.pankuzuarea {padding-bottom:2rem;}
.pankuzu {color:var(--ink-3);font-size:0.85rem;letter-spacing:0.03em;}
.pankuzu span,.pankuzu a {color:var(--ink-3);}
.pankuzu a:hover {color:var(--blue);}
/*SP*/
@media (max-width: 896px){
	.pagewrapper {margin-top:8.5vh;}
	.titlearea {padding:6vh 6vw 5vh 6vw;}
	.titlearea .inner {width:100%;}
	.titlearea h1 {font-size:1.85rem;}
	.titlearea h2 {font-size:1.15rem;}
	.titlearea p {font-size:1.05rem;}
	.pankuzuarea {padding-bottom:1.5rem;}
}

/*==================== 記事本文 ====================*/
.ariclepage .contents01 {padding-top:5vw;}
.ariclepage .contents01 h2 {margin-top:3em;margin-bottom:0.6em;font-size:2.2rem;font-weight:500;line-height:1.55em;
	color:var(--navy);padding-bottom:0.5em;border-bottom:solid var(--navy) 2px;}
.ariclepage .contents01 h2.mb0 {margin-bottom:0.6em;}
.ariclepage .contents01 h2:first-of-type {margin-top:1.5em;}
.ariclepage .contents01 h3 {font-size:1.45rem;font-weight:500;margin-top:2.2em;margin-bottom:1em;color:var(--blue);line-height:1.6em;}
.ariclepage .contents01 h4 {font-size:1.2rem;font-weight:700;margin-top:1.8em;margin-bottom:0.8em;color:var(--navy);}
.ariclepage .contents01 p {margin-bottom:1.8rem;font-size:1.1rem;line-height:2.15em;color:var(--ink-2);}
.ariclepage .contents01 b {color:var(--navy);}
.ariclepage .contents01 img {max-width:100%;width:100%;margin:1.5rem 0 2.5rem 0;}
.ariclepage .contents01 a {color:var(--blue);text-decoration:underline;text-underline-offset:0.2em;}
.ariclepage .contents01 a:hover {color:var(--navy);}
.ariclepage .contents01 a.btn {color:var(--navy);text-decoration:none;}
.ariclepage .contents01 a.btn:hover {color:#fff;}
.ariclepage .contents01 a.btn.cv {color:#fff;}
/*SP*/
@media (max-width: 896px){
	.ariclepage .contents01 {padding-top:7vh;}
	.ariclepage .contents01 h2 {font-size:1.6rem;margin-top:2.4em;}
	.ariclepage .contents01 h3 {font-size:1.25rem;}
	.ariclepage .contents01 h4 {font-size:1.1rem;}
	.ariclepage .contents01 p {font-size:1.08rem;line-height:2.0em;}
}

/*ページ内アンカー：固定ヘッダーの下に見出しが隠れないようにする*/
[id] {scroll-margin-top:13vh;}

/*==================== 準備中ブロック（料金ページ） ====================*/
.preparing {background:var(--bg-1);border-top:solid var(--orange) 2px;
	padding:4rem 3rem;margin:2rem 0 3.5rem 0;text-align:center;}
.preparing .preparing-label {display:inline-block;background:var(--orange);color:#fff;
	font-size:0.85rem;font-weight:700;letter-spacing:0.12em;padding:0.6em 1.6em;margin-bottom:1.8rem;}
.preparing h3 {font-size:1.9rem !important;font-weight:500;color:var(--navy);margin:0 0 1.5rem 0 !important;}
.preparing p {font-size:1.05rem !important;line-height:2.0em;margin-bottom:1.2rem !important;}
@media (max-width: 896px){
	.preparing {padding:2.5rem 1.5rem;}
	.preparing h3 {font-size:1.4rem !important;}
	.preparing p {font-size:1.0rem !important;text-align:left;}
}

/*==================== 料金プラン ====================*/
/* 初期費用 */
.initialfee {display:flex;gap:1.5rem;margin:2.5rem 0 4rem 0;}
.initialfee .box {flex:1;border:solid var(--line-2) 1px;border-top:solid var(--navy) 2px;padding:2.2rem 2rem;}
.initialfee .box.opt {border-top-color:var(--line);background:var(--bg-1);}
.initialfee .box .ttl {font-size:0.9rem;font-weight:700;color:var(--label);letter-spacing:0.14em;margin-bottom:1rem;}
.initialfee .box .amount {font-size:2.6rem;font-weight:700;color:var(--navy);line-height:1.2em;letter-spacing:-0.01em;}
.initialfee .box .amount small {font-size:0.38em;font-weight:500;margin-left:0.3em;color:var(--ink-2);}
.initialfee .box .dsc {font-size:0.95rem;color:var(--ink-3);line-height:1.85em;margin-top:1rem;}
@media (max-width: 896px){
	.initialfee {display:block;margin:2rem 0 3rem 0;}
	.initialfee .box {margin-bottom:1rem;padding:1.8rem 1.4rem;}
	.initialfee .box .amount {font-size:2.1rem;}
}

/* 月額プラン */
.planlist {display:flex;gap:1.2rem;margin:2.5rem 0 2rem 0;align-items:stretch;}
.planlist .plan {flex:1;border:solid var(--line-2) 1px;background:#fff;padding:2.4rem 1.9rem;
	display:flex;flex-direction:column;position:relative;}
.planlist .plan.rec {border:solid var(--blue) 2px;box-shadow:0 6px 24px rgba(18,115,230,0.1);}
.planlist .plan .badge {position:absolute;top:-0.9rem;left:50%;transform:translateX(-50%);
	background:var(--blue);color:#fff;font-size:0.78rem;font-weight:700;letter-spacing:0.1em;
	padding:0.5em 1.4em;white-space:nowrap;}
.planlist .plan .pname {font-size:1.35rem;font-weight:700;color:var(--navy);margin-bottom:0.4rem;}
.planlist .plan .pfor {font-size:0.88rem;color:var(--ink-3);line-height:1.75em;margin-bottom:1.5rem;
	padding-bottom:1.5rem;border-bottom:solid var(--line-2) 1px;min-height:3.2em;}
.planlist .plan .pprice {font-size:2.5rem;font-weight:700;color:var(--navy);line-height:1.15em;letter-spacing:-0.01em;}
.planlist .plan .pprice small {font-size:0.34em;font-weight:500;margin-left:0.25em;color:var(--ink-2);letter-spacing:0;}
.planlist .plan .ptax {font-size:0.82rem;color:var(--ink-3);margin-top:0.5rem;}
.planlist .plan ul {margin:1.8rem 0 0 0;padding:0;list-style:none;flex:1;}
.planlist .plan ul li {position:relative;padding:0 0 0.9rem 1.7rem;font-size:0.95rem;line-height:1.8em;color:var(--ink-2);}
.planlist .plan ul li::before {content:"";position:absolute;left:0;top:0.62em;width:0.72em;height:0.38em;
	border-left:solid var(--blue) 2px;border-bottom:solid var(--blue) 2px;transform:rotate(-45deg);}
.planlist .plan ul li.inherit {color:var(--ink-3);font-weight:500;}
.planlist .plan ul li.inherit::before {border-color:var(--line);}
@media (max-width: 896px){
	.planlist {display:block;margin-top:3rem;}
	.planlist .plan {margin-bottom:2.2rem;padding:2rem 1.5rem;}
	.planlist .plan .pfor {min-height:0;}
	.planlist .plan .pprice {font-size:2.2rem;}
}

/*==================== お問い合わせカード ====================*/
.contactcards {display:flex;flex-wrap:wrap;gap:1.5rem;margin:2.5rem 0 3.5rem 0;}
.contactcards .card {flex:1 1 20rem;background:#fff;border:solid var(--line-2) 1px;
	border-top:solid var(--navy) 2px;padding:3rem 2.5rem;text-align:center;}
.contactcards .card.line {border-top-color:#06c755;}
.contactcards .card .cardicon {display:block;margin:0 auto 1.2rem;width:2.6rem;height:2.6rem;}
.contactcards .card h3 {font-size:1.5rem !important;font-weight:500;margin:0 0 1.2rem 0 !important;color:var(--navy);}
.contactcards .card p {font-size:1.0rem !important;line-height:2.0em;margin-bottom:2rem !important;text-align:left;}
.contactcards .card .btn {width:100%;text-align:center;padding:1.25em 0;}
.contactcards .card.form .btn {background:var(--navy);border-color:var(--navy);color:#fff;}
.contactcards .card.form .btn:hover {background:#fff;color:var(--navy);}
.contactcards .card.line .btn {background:#06c755;border-color:#06c755;color:#fff;}
.contactcards .card.line .btn:hover {background:#fff;color:#06c755;}
.contactcards .card .btn.disabled {background:#e6e6e6;border-color:#e6e6e6;color:#999;cursor:default;pointer-events:none;}
@media (max-width: 896px){
	.contactcards {display:block;}
	.contactcards .card {margin-bottom:1.5rem;padding:2.2rem 1.5rem;}
	.contactcards .card h3 {font-size:1.3rem !important;}
}

/*==================== Googleフォーム埋め込み ====================*/
/* Googleフォームは別オリジンのため、中身の高さに合わせた自動リサイズができない。
   そのため高さを固定し、収まらない場合はiframe内でスクロールさせる。 */
.formembed {margin:2.5rem 0;background:#fff;border:solid var(--line-2) 1px;overflow:hidden;}
.formembed iframe {display:block;width:100%;height:1150px;border:0;margin:0;}
@media (max-width: 896px){
	.formembed {margin:2rem 0;}
	.formembed iframe {height:1450px;}
}

/*==================== コラム一覧 ====================*/
.columnlist {margin:2.5rem 0 3.5rem 0;}
.columnlist .item {border-bottom:solid var(--line) 1px;padding:2.2rem 0;}
.columnlist .item .date {font-size:0.85rem;color:var(--label);letter-spacing:0.08em;margin-bottom:0.7rem;}
.columnlist .item .title {font-size:1.45rem;font-weight:500;margin-bottom:0.7rem;line-height:1.6em;}
.columnlist .item .title a {color:var(--navy);text-decoration:none;}
.columnlist .item .title a:hover {color:var(--blue);text-decoration:underline;}
.columnlist .item .dsc {font-size:1.0rem;color:var(--ink-2);line-height:1.9em;}
.columnlist .empty {background:var(--bg-1);padding:4.5rem 2rem;text-align:center;}
.columnlist .empty p {font-size:1.1rem !important;color:var(--ink-3);margin-bottom:0 !important;}
@media (max-width: 896px){
	.columnlist .item .title {font-size:1.2rem;}
}

/*==================== カテゴリ一覧 ====================*/
.catlist {display:flex;flex-wrap:wrap;gap:1px;background:var(--line-2);border:solid var(--line-2) 1px;
	margin:2.5rem 0 3.5rem 0;}
.catlist .cat {background:#fff;padding:1.8rem 1.6rem;flex:1 1 15rem;}
.catlist .cat b {display:block;font-size:1.15rem;font-weight:700;color:var(--navy);margin-bottom:0.6rem;}
.catlist .cat span {font-size:0.92rem;color:var(--ink-3);line-height:1.85em;display:block;}
@media (max-width: 896px){
	.catlist {display:block;}
	.catlist .cat {border-bottom:solid var(--line-2) 1px;}
}

/*==================== FAQページ ====================*/
.faqwrap {padding-top:6vw;}
.faqpage .contents01 {background:var(--bg-1);}
.faq {background:#fff;border:solid var(--line-2) 1px;border-bottom:none;padding:1.8rem 2.5rem;margin:0;}
.faqcat .faq:last-of-type {border-bottom:solid var(--line-2) 1px;}
.faq > summary {cursor:pointer;list-style:none;font-size:1.15rem;font-weight:700;color:var(--navy);
	line-height:1.7em;padding-right:2rem;position:relative;}
.faq > summary::-webkit-details-marker {display:none;}
.faq > summary::after {content:"";position:absolute;right:0;top:0.6em;width:0.75em;height:0.75em;
	border-bottom:solid var(--blue) 2px;border-right:solid var(--blue) 2px;transform:rotate(45deg);transition:0.25s;}
.faq[open] > summary::after {transform:rotate(-135deg);top:0.85em;}
.faq .answer {margin-top:1.2rem;padding-top:1.2rem;border-top:solid var(--line-2) 1px;}
.faq .answer p {font-size:1.0rem !important;font-weight:400;color:var(--ink-2);line-height:2.0em;margin-bottom:1.2rem !important;}
.faq .answer p:last-child {margin-bottom:0 !important;}
.faqcat {margin-bottom:4.5rem;}
.faqcat h2 {margin-top:0 !important;}
/*SP*/
@media (max-width: 896px){
	.faq {padding:1.3rem 1.2rem;}
	.faq > summary {font-size:1.05rem;}
	.faq .answer p {font-size:1.0rem !important;}
}

/*==================== 規約系ページ ====================*/
.privacy .contents01 h2, .tokusho .contents01 h2 {font-size:1.5rem;font-weight:700;margin-top:3em;margin-bottom:1em;
	padding-bottom:0.6em;border-bottom:solid var(--line) 1px;color:var(--navy);}
.privacy .contents01 ul, .tokusho .contents01 ul {margin:0 0 1.8rem 0;}
.privacy .contents01 li, .tokusho .contents01 li {list-style-type:disc;list-style-position:outside;
	margin-left:1.4em;font-size:1.05rem;line-height:2.1em;margin-bottom:0.7rem;color:var(--ink-2);}
/*SP*/
@media (max-width: 896px){
	.privacy .contents01 h2, .tokusho .contents01 h2 {font-size:1.25rem;}
	.privacy .contents01 li, .tokusho .contents01 li {font-size:1.0rem;}
}

/*==================== サイトマップ ====================*/
.sitemap .contents01 p {font-size:1.05rem;line-height:2.6em;}
.sitemap .contents01 p a {color:var(--navy);text-decoration:none;font-weight:500;border-bottom:solid var(--line) 1px;}
.sitemap .contents01 p a:hover {color:var(--blue);border-color:var(--blue);}
.sitemap .contents01 .smgroup {margin-bottom:3.5rem;}
.sitemap .contents01 .smgroup h2 {font-size:1.5rem !important;margin-top:0 !important;}

/*==================== フォーム ====================*/
.formarea {width:50vw;}
.formarea form table {width:100%;border-collapse:collapse;margin-bottom:2rem;}
.formarea form input[type=text],.formarea form textarea {border:solid var(--line) 1px;outline:none;padding:1rem;
	width:100%;font-family:inherit;background:#fdfdfd;}
.formarea form input[type=text]:focus,.formarea form textarea:focus {border-color:var(--blue);}
.formarea form textarea {height:8rem;resize:vertical;}
.formarea form input[type=submit] {font-size:1.1rem;width:50%;padding:1.2rem 0rem;background:var(--navy);
	border:solid var(--navy) 1px;color:#fff;font-weight:700;cursor:pointer;}
.formarea form input[type=submit]:hover {background:#fff;color:var(--navy);}
.formarea form table td {padding:0.5rem 0;}
.formarea form table td:nth-child(1){width:18rem;font-size:1.0rem;font-weight:700;}
.formarea form table td:nth-child(2){width:calc(100% - 18rem);}
/*SP*/
@media (max-width: 896px){
	.formarea {width:100%;}
	.formarea form table td {display:block;width:100%;}
	.formarea form table td:nth-child(1){width:100%;}
	.formarea form table td:nth-child(2){width:100%;}
	.formarea form input[type=submit] {width:100%;}
}

/* --- サイトマップ：カテゴリごとの記事 --- */
.smcat {margin-top:2.2rem;padding-left:1.2rem;border-left:solid var(--line-2) 3px;}
.smcat h3 {font-size:1.15rem;font-weight:700;color:var(--navy);margin-bottom:0.6rem;}
.smcat h3 a {color:var(--navy);}
.smcat h3 a:hover {color:var(--blue);}
.smcat p {font-size:0.98rem !important;line-height:2.1em !important;}