@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/
html {
  font-size: 62.5%; /* 16px * 0.625 = 10px */
}
/* 悩み */
.nayami-text{
	padding:15px !important;
	gap:5px !important;
	width:420px
}
@media screen and (max-width:599px) {
	.nayami-text{
width:96vw;
	}
}

.kaiketu-text img{
	width:80%;
	padding-right:5px;
}
.kaiketu-box{
	box-shadow: 0px 4px 18.8px 0px rgba(0, 0, 0, 0.25);
}


@media screen and (min-width:782px) {
	.kaiketu-img{
	text-align:left;
}
.kaiketu-box{
width: calc(100% + (63vw - 50%)) !important;
    margin-right: calc(50% - 55vw) !important;
}
}
/* 特徴 */
.feature-h2{
	display: flex;
    align-items: center;
    justify-content: center;
}
.feature-h2 img{
	width:350px;
}
@media screen and (max-width:599px) {
.feature-h2 img{
	width:200px;
}
}
.feature-box{
	background:linear-gradient(180deg, #fff 0%, #fff 14%, #f3f3f3 14%, #f3f3f3 85%, #fff 85%, #fff 100%);
	margin-left: calc(50% - 50vw);

}
.feature-flex{
  display: flex;
  align-items: center;
}
.feature-span{
	background:#F96E2A;
	color:#fff;
	margin-left:1.2rem;
	padding:0.3rem 0 0 0.5rem;
	line-height:2;
	display: inline-flex;
  　align-items: center;
}
@media screen and (max-width:599px) {
.feature-span{
	font-size:14px;
		display: inline-flex;
  　align-items: center;
}
}
@media screen and (max-width:999px) {
.feature-pc{
	display:none;
}
}
@media screen and (min-width:1000px) {
.feature-sp{
	display:none;
}
}
.feature-zoom_title{
	padding:1rem !important;
}
.feature-zoom_box{
	padding:0 !important;
	width:80%;
	margin:auto;
}
.feature-zoom_list{
	padding:1rem 3rem !important;
}

.zoom36-text{
	padding:10px !important;
}
@media screen and (max-width:599px) {
.feature-zoom_box{
	width:90%;
	}
}
.feature-36zoom{
	flex-direction: row-reverse;
}
/* 使い方 */
.use-card{
	background: #fff;
    padding: 10px !important;
}
.use-text{
	padding:0 10px !important;
}
.use-cardbox2{
flex-direction: row-reverse;	
}
/* 防犯カメラの比較表 */
.comparison-table table{
    border-bottom: solid 1px black !important;
    border-right: solid 1px black !important;
}


.comparison-table td{
	width:470px;
}
@media screen and (max-width:781px) {
.comparison-table td{
	width:211px;
}
}
.comparison-table th,
.comparison-table td{
    border: 1px solid #333;
    padding: 18px !important;
	    border-bottom: 1px solid #333;
}
 
.comparison-table tr:nth-child(2n) td {
    background-color: #fafafa;
}
 
.comparison-table th:nth-child(2),
.comparison-table td:nth-child(2) {
    border-left: 5px solid #EF8633;
    border-right: 5px solid #EF8633;
}
 
.comparison-table tr:first-child th:nth-child(2) {
    position: relative;
    background-color: #EF8633;
}
 
.comparison-table tr:last-child td:nth-child(2){
    border-bottom: 5px solid #EF8633;
}
.comparison-table tr:first-child th:first-child {
   border-left:none;
    border-top:none;
 
}

/* ご利用の流れ */

.step-card{
	width:18.8rem !important;
	background:#FBF8EF;
	position:relative;
	padding-top:50px !important;
	padding-bottom:8px !important;
}
.step-card:nth-of-type(n+2){
	margin-left:6rem !important;
	position:relative;
}

.step-card:nth-of-type(n+2):after {
			    content:"";
    position: absolute;
    top:50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 24px solid transparent;
  border-bottom: 24px solid transparent;
  border-left: 36px solid #ffffff;
  border-right: 0;
	transform:translateY(-50%);
	left:-25%;
}
.step-card:before{
		    content:"";
    position: absolute;
    top:-40px;
	left:0;
	font-size:48px;
	font-weight:900;
	color:#195775;
}
.step-card01:before{
	position:absolute;
		    content:"01";
}
.step-card02:before{
	position:absolute;
		    content:"02";
}
.step-card03:before{
	position:absolute;
		    content:"03";
}
.step-card04:before{
	position:absolute;
		    content:"04";
}

.step-cards .swell-block-columns__inner{
	justify-content:center !important;
}

@media screen and (max-width:959px) {
	.step-card{
		width:80% !important;
	}
	.step-card,
	.step-card:nth-of-type(n+2){
	margin-left:0 !important;
}
.step-cards .swell-block-columns__inner{
	gap:5rem;
}
	
.step-card:nth-of-type(n+2):after {
				    content:"";
    position: absolute;
    top:-18%;
	left:50%;
	transform:translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 24px solid transparent;
  border-left: 24px solid transparent;
  border-top: 36px solid #ffffff;
  border-bottom: 0;
}
	.step-card:before{
		left:0 !important;
}
}
/* 	CTA */
	.cta-push{
		background:#F96E2A;
		color:#fff;
		padding:5px 5px 5px 10px;
	}
.cta-number{
	font-size:4rem;
	font-weight:700;
}
.cta-yen{
	font-size:3.2rem;
	font-weight:700;
}

.cta-mainbox{
	border: 15px solid #78B3CE;
	padding:0 50px 30px 50px;
}
@media screen and (max-width:781px) {
.cta-mainbox{
	padding:20px;
}
	.cta-4gsp{
		display:flex;
		flex-wrap: nowrap !important;
		gap:0 !important;
	}
	
.cta-number{
	font-size:2.8rem;
	font-weight:700;
}
.cta-yen{
	font-size:2rem;
	font-weight:700;
}	
	.cta-spprice{
		width:250px !important;
	}
	.cta-postagefree{
/* 		flex-basis:33% !important; */
	}
	.cta-pricebox{
/* 		flex-basis: content !important;	 */
				flex-basis:50% !important;
	}


}
/* 詳細テーブル */
.detail-table table{
	border: solid 1px black;
    border-bottom: solid 1px black !important;
    border-right: solid 1px black !important;
}

.detail-table table td,
.detail-table table th{
border: solid 1px black;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
    border-bottom: solid 1px black !important;
    border-right: solid 1px black !important;
}