@charset "utf-8";

.page-top{
	background:none;
}
.page_mv_cta{
	max-width:340px;
	width:100%;
}

.page_mv_cta a{
	max-width:260px;
	width:100%;
	margin-left:0;
}

.font-s{
	font-size: 13px;
	display:inline-block;
}


/*
ボタン
*************************/
.btn-blue{
	display: flex;
	justify-content: center;
	align-items: center;
	color:#fff;
	background: var(--secondary);
	text-decoration: none;
	width:200px;
	height:60px;
	border-radius: 50px;
	border:2px solid var(--secondary);
	font-weight:bold;
	line-height:1.0;
	transition: all 0.2s ease;
}
.btn-blue:hover{
	color: var(--secondary);
	background:#fff;
}

.btn-white{
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--text);
	background: #fff;
	border: 2px solid #fff;
	text-decoration: none;
	width:200px;
	height:60px;
	border-radius: 50px;
	font-weight:bold;
	line-height:1.0;
	border:1px solid var(--text);
	margin-top:70px;
	transition: all 0.2s ease;
}

.btn-white:hover{
	color:var(--primary);
	border: 1px solid var(--primary);
}

/*
fee
*************************/
.fee-set{
	gap:64px;
	position: relative;
	z-index: 0;
}
.fee-item{
	display: flex;
	flex-flow: column;
	border-radius: 20px;
	background:#fff;
	border:6px solid #fff;
	box-shadow: 0 3px 12px rgba(0,0,0,0.04);
	position: relative;
}

.fee-item.recomend{
	border:6px solid var(--secondary);
}

.shadow{
	position: absolute;
	left:calc(50% - 170px);
	bottom:-6px;
	z-index:-1;
}


.fee-item.recomend .label-recomend{
	position: absolute;
	top:-30px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	width:128px;
	height:auto;
}
.fee-head{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-flow: column;
	gap:17px;
	padding:40px 0;
	position: relative;
	min-height:360px;
}
.fee-head h2{
	font-size:48px;
	font-family: "Barlow Semi Condensed", serif;
	letter-spacing: 0.05rem;
	line-height:1.0;
	color: var(--secondary);
	padding:0;
	margin:0;
	border:none;
	text-align:center;
	margin-top: -25px;
}

.fee-head h2 .fee-name-sub{
	font-size:16px;
	font-weight:bold;
	font-family: Noto Sans JP, sans-serif;
	color: var(--text);
	line-height:1.0;
	display:inline-block;
}

.fee-head .fee-name-disc{
	font-size:13px;
	font-weight:500;
	line-height:1.4;
	text-align:center;
}

.fee-head .fee-price{
	font-size:40px;
	font-weight:bold;
	font-family: "Barlow Semi Condensed", serif;
	line-height:1.25;
	color: var(--text);
	text-align:center;
	margin-bottom:10px;
}
.fee-item:first-child .fee-body,
.fee-item:last-child .fee-body{
	margin-left:-6px;
	margin-right:-6px;
}

.fee-item:last-child .fee-body{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column;
	height:100%;
	font-size:20px;
	font-weight:bold;
	color: var(--text);
	padding:20px;
}
.fee-body table {
	margin:0;
}
.fee-body table th,
.fee-body table td{
	line-height:1.0;
	border:none;
	height:65px;
}

.fee-body table tr:first-child th,
.fee-body table tr:first-child td{
	height:80px;
}

.fee-body table tr:first-child td .font-s{
	margin-top:2px;
	display:block;
}

.fee-body table tr{
    border-top: 1px solid var(--border);
}
.fee-item:last-child .fee-body{
    border-top: 1px solid var(--border);
}

.fee-body table th{
	font-size:13px;
	color: #bbb;
	text-align: left;
	padding-left:17px;
}

.fee-body table td{
	font-size:20px;
	font-weight:bold;
	color: var(--text);
	text-align: left;
	padding-right:15px;
}

.kome{
	font-size:13px;
	font-weight:600;
	position: relative;
	padding-left:1.2rem;
	margin-top:20px;
}

.kome:before{
	content:"※";
	position: absolute;
	top:0;
	left:0;
}
@media(min-width:768px) and (max-width:991px){
	section#fee{
		padding-top:80px;
	}
	.fee-set{
		gap:15px;
	}
	.fee-item.recomend .label-recomend{
		top:-50px;
	}
	.fee-head h2{
		font-size:36px;
	}
	
	.fee-body table th{
		font-size:12px;
		line-height:1.4;
		padding-left:15px;
	}
	.fee-body table td{
		font-size:16px;
	}
	
	.fee-item:last-child .fee-body{
		font-size:16px;
	}
	.shadow{
		left: calc(50% - 125px);
		width:367px;
	}
}
@media(max-width:767px){
	.col-3.fee-set{
		grid-template-columns: 1fr;
	}
	.btn-white{
		margin-top:7px;
	}
	.fee-head{
		gap:7px;
		min-height:initial;
		padding:20px 0;
	}
	.fee-head .fee-price{
		margin-bottom:0;
	}

	.fee-item.recomend .fee-head{
		padding-top:50px;
	}
	
	.shadow{display:none !important;}
}

/*
option
**********************************/
section#option{
	padding:0;
}
#option .col-2{
	gap:64px;
}
#option h3{
	font-size:22px;
	font-weight:bold;
	padding:0 0 0 1.3rem;
	margin-bottom:20px;
	position: relative;
}
#option h3:before{
	content:"";
	width:8px;
	height:8px;
	background:var(--secondary);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	left: 0;
	border-radius: 10px;
}
#option .item{
	letter-spacing: 0.06rem;
	padding:35px ;
	border: 1px solid var(--border);
	border-radius: 16px;
}
#option .item:first-child{
	background:url(https://ai.cloudcircus.jp/dcms_media/image/pages/option01.svg) no-repeat right 20px bottom -20px;
}

#option .item:last-child{
	background:url(https://ai.cloudcircus.jp/dcms_media/image/pages/option02.svg) no-repeat right bottom -20px;
}

#option .item h4{
	font-size:28px;
	font-weight:bold;
	margin-bottom:10px;
}

#option .item p{
	font-weight:500;
}
@media(min-width:768px) and (max-width:991px){
	#option .col-2{
		gap:30px;
	}
	
	#option .item h4{
		font-size:20px;
	}
	.faq-item dl dt{
		font-size:18px;
	}
}

@media(max-width:767px){
	#option .item{
		padding:20px;
	}
	#option .item h4{
		font-size:20px;
	}
	#option .item:first-child{
    	background: url(https://ai.cloudcircus.jp/dcms_media/image/pages/option01.svg) no-repeat right 0px center;
		background-size:130px auto;
	}
	#option .item:last-child{
    	background: url(https://ai.cloudcircus.jp/dcms_media/image/pages/option02.svg) no-repeat right -100px bottom -25px;
		background-size:240px auto;
	}
}

/*
faq
**********************************/
section#faq{
	padding-bottom:0;
}
.faq-set{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap:40px;
}

.faq-item{
	position: relative;
	background:#fff;
	border-radius: 16px;
	padding:20px 20px 20px 65px;
}
.faq-item:before{
	content:"Q";
	font-size: 48px;
	font-weight: bold;
	font-family: "Barlow Semi Condensed", serif;
	line-height: 1;
	color: var(--secondary);
	position: absolute;
	top:7px;
	left:23px;
}
.faq-item dl{
	display:flex;
	flex-flow: column;
	gap:8px;
}
.faq-item dl dt{
	font-size:20px;
	font-weight:bold;
}

.faq-item dl dd{
	font-weight:500;
}

.top-section15{
	margin-top:70px;
}

@media(max-width:767px){
	.faq-set{
		grid-template-columns: 1fr;
		gap:20px;
	}
	.faq-item dl dt{
		font-size:18px;
	}
}