/*各ページ共通*/
.pagewrapper {margin-top:10vh;}
/* cmn-2.jpg : ページタイトルエリア背景画像 */
.titlearea {padding:6vw 10vw;
	background-color:#1a1a2e;
	/* 画像の上に暗いグラデーションを重ねて、白文字の可読性を確保する */
	background-image:linear-gradient(90deg, rgba(10,10,20,0.82) 0%, rgba(10,10,20,0.66) 45%, rgba(10,10,20,0.34) 100%), url(../img/cmn/bg_header.jpg);
	background-repeat:no-repeat, no-repeat;
	background-position:center center, center center;
	background-size:cover, cover;}
.titlearea h1, .titlearea h2, .titlearea p, .pankuzu {text-shadow:0 1px 4px rgba(0,0,0,0.55);}
.titlearea h1 {font-size:3.5rem;margin-bottom:1rem;color:#fff;}
.titlearea h2 {font-size:2.0rem;margin-bottom:1rem;color:#fff;}
.titlearea p {font-size:1.6rem;color:#fff;}
.pankuzuarea {padding-bottom:1rem;}
.pankuzu {color:#fff;}
.pankuzu span,.pankuzu a {color:#fff;}
/*SP*/
@media (max-width: 896px){
	.titlearea {background-image:linear-gradient(rgba(10,10,20,0.7), rgba(10,10,20,0.7)), url(../img/cmn/bg_header.jpg);}
	.titlearea h1 {font-size:1.8rem;}
	.titlearea h2 {font-size:1.4rem;}
	.titlearea p {font-size:1.2rem;}
}

.ariclepage {}
.ariclepage .contents01 {}
.ariclepage .contents01 h2 {margin-top:1.5em;margin-bottom:0.5em;}
.ariclepage .contents01 h2.mb0 {margin-bottom:0em;}
.ariclepage .contents01 h3 {font-size:1.8rem;margin-bottom:1.5em;}
.ariclepage .contents01 p {margin-bottom:2em;}
.ariclepage .contents01 img {max-width:100%;width:68%;margin-bottom:1rem;}

/*faqwrap*/
.faqwrap {padding-top:7vw;}
.faqwrap h1 {font-size:3.5rem;}

/*SP*/
@media (max-width: 896px){
	.ariclepage .contents01 img {width:100%;}
	.ariclepage .contents01 h3 {font-size:1.4rem;}
}

/*privacy*/
.privacy .contents01 {}
.privacy .contents01 h2 {font-size:1.4rem;font-weight:normal;margin-top:2em;margin-bottom:10px;}
.privacy .contents01 li {list-style-type:decimal;list-style-position:inside;}
.privacy .contents01 li ul {padding:10px 0px 10px 1.5em;}
/*SP*/
@media (max-width: 896px){
	.privacy .contents01 h2 {font-size:1.2rem;}
}

/*sitemap*/
.sitemap .contents01 {}
.sitemap .contents01 p {font-size:1.2rem;line-height:2.5em;}
.sitemap .contents01 p a {color:#000;text-decoration:underline;}

/*faqarea*/
.faqpage .contents01 {background:#eee;}
.faq {background:#fff;border-radius:1rem;padding:2rem 5rem;margin-bottom:0.5rem;}
.faq > summary {cursor: pointer;list-style: none;font-size:1.4rem;font-weight:bold;color:#39a8e1;}
.faq > summary::-webkit-details-marker {display: none;}
.faq > summary::after {content: "+";float: right;}
.faq[open] > summary::after {content: "−";}
.faq .answer {margin-top:1rem;}
.faq .answer p {font-size:1.2rem;font-weight:normal;color:#333;}

/*SP*/
@media (max-width: 896px){
	.faqarea .faq {padding:15px;}
	.faqarea .faq summary {font-size:1.2rem;}
}

/*本文中の表（共通）*/
.content table {width:100%;border-collapse:collapse;font-size:1.2rem;line-height:1.75;margin:1.6rem 0 2.6rem;
	background:#fff;}
.content table th,
.content table td {padding:1.1rem 1.3rem;text-align:left;vertical-align:top;border-bottom:solid #e8ecef 1px;}
.content table th {background:#f6f8fa;font-weight:bold;color:#14171a;width:26%;}
.content table td {color:#2c333a;}
.content table tr:last-child th,
.content table tr:last-child td {border-bottom:none;}
.tablewrap {border:solid #e2e6ea 1px;border-radius:0.7rem;overflow:hidden;margin:1.6rem 0 2.6rem;}
.tablewrap table {margin:0;}

/*料金プランの比較表*/
.plantable {font-size:1.15rem;}
.plantable thead th {background:#14171a;color:#fff;text-align:center;font-size:1.3rem;white-space:nowrap;
	border-bottom:none;width:auto;padding:1.2rem 1rem;}
.plantable thead th:first-child {width:24%;background:#14171a;}
.plantable thead th.reco {background:#fa7014;}
.plantable thead th .badge {display:inline-block;margin-left:0.7rem;font-size:0.88rem;font-weight:bold;
	background:#fff;color:#fa7014;border-radius:2rem;padding:0.2em 0.9em;vertical-align:middle;}
.plantable tbody th {background:#f6f8fa;width:24%;font-size:1.15rem;white-space:normal;}
.plantable tbody td {text-align:left;}
.plantable tbody td.reco {background:#fff7f1;}
.plantable tbody tr.pricerow td {font-size:1.9rem;font-weight:bold;color:#14171a;padding-top:1.4rem;padding-bottom:1.4rem;}
.plantable tbody tr.pricerow td small {font-size:1.1rem;font-weight:bold;margin-left:0.15em;}
.plantable tbody tr.pricerow td.reco {color:#e05f08;}
.plantable .yes {color:#fa7014;font-weight:bold;}
.plantable .no {color:#aeb6bd;}
.plantable .note {display:block;font-size:0.95rem;color:#6b737b;margin-top:0.25rem;line-height:1.6;}
/*SP：横スクロールで読ませる*/
@media (max-width: 896px){
	.content table {font-size:1.0rem;}
	.content table th, .content table td {padding:0.8rem 0.9rem;}
	.tablewrap {overflow-x:auto;-webkit-overflow-scrolling:touch;}
	.plantable {min-width:640px;}
	.plantable thead th {font-size:1.05rem;}
	.plantable tbody th {font-size:0.95rem;}
	.plantable tbody tr.pricerow td {font-size:1.4rem;}
	.scrollhint {display:block;font-size:0.95rem;color:#6b737b;margin:-1rem 0 1.6rem;}
}
@media (min-width: 897px){ .scrollhint {display:none;} }

/*本文中のリスト（common.css で list-style:none にしているため、ここで体裁を作る）*/
.content ul {margin:1.2rem 0 2.4rem;padding:0;}
.content ul li {font-size:1.3rem;line-height:1.95;color:#2c333a;padding-left:1.6em;position:relative;margin-bottom:0.2em;}
.content ul li::before {content:"";position:absolute;left:0.35em;top:0.82em;width:0.45em;height:0.45em;
	border-radius:50%;background:#fa7014;}
.content ol {margin:1.2rem 0 2.4rem;padding:0;counter-reset:num;}
.content ol li {font-size:1.3rem;line-height:1.95;color:#2c333a;padding-left:2.0em;position:relative;margin-bottom:0.2em;list-style:none;}
.content ol li::before {counter-increment:num;content:counter(num);position:absolute;left:0;top:0.5em;
	width:1.4em;height:1.4em;border-radius:50%;background:#fa7014;color:#fff;font-size:0.8em;font-weight:bold;
	display:flex;align-items:center;justify-content:center;}
/*SP*/
@media (max-width: 896px){
	.content ul li, .content ol li {font-size:1.05rem;line-height:1.85;}
}

/*お問い合わせの2導線*/
.ctaroutes {display:flex;gap:1.5rem;margin:1rem 0 3rem;}
.ctaroute {flex:1;display:block;border:solid #e2e6ea 2px;border-radius:0.8rem;padding:2rem;text-decoration:none;
	background:#fff;transition:0.2s;}
.ctaroute:hover {border-color:#fa7014;text-decoration:none;transform:translateY(-3px);}
.ctaroute .ctaicon {width:3.4rem;height:3.4rem;border-radius:50%;background:#fa7014;display:flex;
	align-items:center;justify-content:center;margin-bottom:1.2rem;}
.ctaroute .ctaicon svg {width:1.7rem;height:1.7rem;fill:#fff;}
.ctaroute b {display:block;font-size:1.5rem;color:#14171a;margin-bottom:0.5rem;}
.ctaroute .ctanote {display:block;font-size:1.1rem;line-height:1.7;color:#6b737b;}
.ctaroute.line .ctaicon {background:#06c755;}
.ctaroute.line:hover {border-color:#06c755;}
/*SP*/
@media (max-width: 896px){
	.ctaroutes {display:block;}
	.ctaroute {margin-bottom:1rem;padding:1.5rem;}
	.ctaroute .ctaicon {width:2.8rem;height:2.8rem;margin-bottom:0.8rem;}
	.ctaroute .ctaicon svg {width:1.4rem;height:1.4rem;}
	.ctaroute b {font-size:1.25rem;}
	.ctaroute .ctanote {font-size:1.0rem;}
}

/*formarea*/
.formarea {width:100%;max-width:660px;}
.formarea iframe {width:100%;max-width:640px;height:1300px;border:0;display:block;margin:0 auto;}
.formarea .formfallback {font-size:1.1rem;color:#6b737b;margin-top:1rem;}
.formarea .formfallback a {text-decoration:underline;}
.formarea form {}
.formarea form table {width:100%;border-collapse:collapse;margin-bottom:2rem;}
.formarea form input[type=text],.formarea form textarea {border:solid #000 1px;outline:none;padding:1rem;width:100%;font-family:inherit;}
.formarea form textarea {height:8rem;resize:vertical;}
.formarea form input[type=submit] {font-size:1.2rem;width:50%;padding:1rem 0rem;background:#39a8e1;border:solid #39a8e1 3px;color:#fff;font-weight:bold;border-radius:4px;cursor:pointer;}
.formarea form input[type=submit]:hover {background:#fff;color:#39a8e1;}
.formarea form table td {padding:0.5rem 0;}
.formarea form table td:nth-child(1){width:18rem;font-size:1.2rem;font-weight:bold;}
.formarea form table td:nth-child(2){width:calc(100% - 18rem);}
.formarea form table td:nth-child(2) div {font-size:0.8rem;color:#666;margin-bottom:0.3rem;}
/*SP*/
@media (max-width: 896px){
	.formarea {width:100%;}
	.formarea iframe {height:1500px;}
	.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%;}
}

/**************************************** 自動化SEO（記事ページ・記事一覧） ****************************************/
/*記事の要点／サービス案内のボックス*/
.ariclepage .contents01 .notebox {border:solid #000 1px;background:#fafafa;padding:2rem 2.5rem;margin:2.5em 0;}
.ariclepage .contents01 .notebox h3 {font-size:1.4rem;margin:0 0 0.8em 0;}
.ariclepage .contents01 .notebox p {margin:0;}

/*本文中のリンクはボタン扱いしない（.contentarea p a の打ち消し。.btn は除外）*/
.ariclepage .contents01 p a:not(.btn) {font-size:inherit;margin-top:0;border-radius:0;text-decoration:underline;}

/*記事末尾のCTAボタン（2つ横並び）*/
.ariclepage .contents01 .ctabtns {display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;padding:2.5rem 0 1rem;}
.ariclepage .contents01 .ctabtns a.btn {margin:0;}

/*記事一覧のカード*/
.ariclepage .contents01 .columncard {border-bottom:solid #ddd 1px;padding-bottom:3rem;margin-bottom:3rem;}
.ariclepage .contents01 .columncard:last-of-type {border-bottom:none;}
.ariclepage .contents01 .columncard img {width:100%;margin-bottom:1.5rem;}
.ariclepage .contents01 .columncard .date {font-size:1.0rem;color:#666;margin:0 0 0.5em 0;}
.ariclepage .contents01 .columncard h3 {font-size:2.0rem;margin:0 0 0.5em 0;}
.ariclepage .contents01 .columncard h3 a {color:#000;text-decoration:none;}
.ariclepage .contents01 .columncard h3 a:hover {text-decoration:underline;}

/*SP*/
@media (max-width: 896px){
	.ariclepage .contents01 .notebox {padding:1.5rem;}
	.ariclepage .contents01 .columncard {padding-bottom:2rem;margin-bottom:2rem;}
	.ariclepage .contents01 .ctabtns a.btn {width:100%;text-align:center;}
	.ariclepage .contents01 .columncard h3 {font-size:1.6rem;}
}
