@charset "utf-8";
/* CSS Document */
section{
	min-width:1400px;
	padding-top:30px;
}
.w1000{
	margin:0 auto;
}
.w1230{
	width:1230px;
	margin:0 auto;
}
/*base.cssの.btn_mainと組み合わせて使用。幅とマージンのみ上書き*/
.btn_pink{
	width:50%;
	margin:60px auto;
}

.content h2{
	font-size: 25px;
	font-weight: bold;
	text-align: center;
	margin:50px 0 80px;
	padding: 0;
	position: relative;
}
.content h2:after {
  content: "";
  display: inline-block;
  width: 120px;
  height: 6px;
  border-radius: 3px;
	position: absolute;
	top:120%;
	left:0;
	right:0;
	margin:auto;
  background: linear-gradient(-25deg, #F13F79, #FFC778); 
}
.mainimg{
	background-color:#F6F9FD;
	background-image: url("../img/baito_keisai/topimg_baito_keisai.webp");
	background-position: calc(50% - 152px + 300px) center;
 	background-repeat: no-repeat;
	height: 100%;
	padding:1px 0;
}
.ttl_baito{
	width:400px;
	margin:50px auto 0px 200px;
	text-align: center;
}
.mainimg h2{
	font-size: 35px;
	font-weight: bold;
	padding: 0;
}
.mainimg .h2_subttl{
	font-size: 30px;
}
.ttl_sub{
	display: flex;
	margin:30px auto 50px 50px;
}
.circle_ttl{
	width: 218px;
	height: 218px;
	background: linear-gradient(#fff35d 0%, #f1e11e 100%);
	filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
	border-radius: 50%;
	text-align: center;
	font-weight: bold;
}
.ttl_sub .circle_ttl:nth-child(2){
	margin:0 25px;
}
.circle_ttl i{
	font-size: 25px;
	color: #f96c84;
	margin:15px 0 10px;
}
.circle_ttl h3{
	font-size: 20px;
	margin-bottom: 10px;
	padding: 0;
}
.circle_ttl p{
	font-size: 15px;
	line-height: 1.5em;
}

.con_step{
	width:900px;
	margin:150px auto 70px;
	display: flex;
	background-color: #f96c84; /* 背景色を指定 */
 	height: 65px; /* 高さを指定 */
	align-items: center; /* 要素を垂直方向中央に配置 */
	justify-content: center; /* 要素を水平方向中央に配置 */
	position: relative;
}
.step{
	width:160px;
	padding:25px 20px 20px;
	border-radius: 20px;
	border: 1px solid #f96c84;
	box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.16);
	font-size: 18px;
	font-weight: bold;
	color: #f96c84;
	margin:0 13px;
	background-color: white;
	text-align: center;
	position: relative;
}
.step::before{
	content: attr(data-step); /* data-step属性の値を表示 */
  	position: absolute;
	font-size: 25px;
	color:white;
	width: 58px;
	height: 58px;
	background: #f96c84;
	border: 2px solid #fff;
	border-radius: 50%;
	filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
	top: -40px;
	line-height: 58px;
	left:50px;
}
.con_step .step:first-child {
	margin-left:0;
}
.con_step .step:last-child {
	margin-right:0;
}

/*料金表*/
.sc_price{
	background-color: #F9F9F9;
}
.sc_price>.w1000{
	padding:0 100px;
}

.table_plan{
	margin:50px 0;
	text-align: center;
	/*box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.16);*/
	line-height: 35px;
	position: relative;
}

.table_plan td{
	padding:23px 10px 12px;
	font-weight: bold;
}
.table_plan td:nth-child(2) {
	width:205px;
	border-left:1px solid #707070;
	font-size: 18px;
}
.item_sp{
	display: none;
}
.item_pc{
	display: block;
}
.table_plan tr:first-child{
	padding:18px 10px 12px;	
}
.table_plan tr:nth-child(n+2){
	box-shadow: 0 8px 3px -3px #E2E2E2 inset;/*1段ごとのかげ*/
}
.table_plan tr{
  background-color: #EEE8E8;
}
.table_plan tr:nth-child(even) {
  background-color: white;/*しましま*/
}
/*プライスリストベース*/
.table_plan:before{
	width:200px;
	text-align: center;
	padding:20px 0;
	color:white;
	filter:drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));
	top:-70px;
	position: absolute;
	right: 0;
}
.table_plan td:before {
  content: "";
  position: absolute;
  top: 3px;
  right: 90px;
  margin-left: -15px;
  border: 15px solid transparent;
}
/*色分け*/
.table_plan:nth-child(1):before{
	content: "ライトプラン";
	background-color: #F9B32D;	
}
.table_plan:nth-child(1) td:before {
  border-top: 15px solid #F9B32D;
}

.table_plan:nth-child(2):before{
	content: "スタンダードプラン";
	background-color: #72E0DB;	
}
.table_plan:nth-child(2) td:before {
  border-top: 15px solid #72E0DB;
}

.table_plan:nth-child(3):before{
	content: "プレミアムプラン";
	background-color: #EF617B;
}
.table_plan:nth-child(3) td:before {
  border-top: 15px solid #EF617B;
}

/*.table_plan th:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
	filter:drop-shadow(2px 4px 3px rgba(0, 0, 0, 0.1));
}*/
.table_menu{
	width:150px;
}
.table_plan:nth-child(1) th:nth-child(2){
	background-color: #F9B32D;	
	border-right:2px solid #F9F9F9;
}
.table_plan:nth-child(1) th:nth-child(2):before{
	border-top: 15px solid #F9B32D;
}
.table_plan:nth-child(1) td:nth-child(2){
	color:#F9B32D;
}
.table_plan:nth-child(2) th{
	background-color: #72E0DB;;
	border-right:1px solid #F9F9F9;
	border-left:1px solid #F9F9F9;
}
.table_plan:nth-child(2) th:before{
	border-top: 15px solid #72E0DB;
}
.table_plan:nth-child(2) td:nth-child(2){
	color:#72E0DB;
}
.table_plan:nth-child(3) th{
	background-color: #EF617B;
	border-left:2px solid #F9F9F9;
}
.table_plan:nth-child(3) th:before{
	border-top: 15px solid #EF617B;
}
.table_plan:nth-child(3) td:nth-child(2){
	color:#EF617B;
}
.table_plan i{
	font-size: 25px;
}
.txt_min{
	font-weight: normal;
}

/*媒体について*/
.content:nth-child(4){
	width:100%;
	background-image: url("../img/baito_keisai/bg_about.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size:cover;
	background-color:#F6F9FD;
	margin: 0;
}
.cont_about{
	width:800px;
	margin:0 auto 0 80px;
	display: flex; /* flexbox */
	flex-wrap: wrap; /* 折返し指定 */
}
.no_about{
	font-size: 120px;
	color: #F96C84;
	font-weight: bold;
	line-height: 1.0em;
	opacity: 80%;
	margin-right: 20px;
	flex-shrink: 0;
}
.point_about{
	width:45%;
	padding-bottom: 30px;
}
.point_about h3{
	color:#F96C84;
	font-weight: bold;
	font-size: 23px;
	text-align: left;
	padding: 0;
}

/*よくある質問*/
.question{
	background-image: url("../img/011-subtle-light-patterns.jpg");
}
.qa_item{
	width:1000px;
	margin:10px auto 50px;
	display: flex;
	padding:0 50px;
}
.no_circle{
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background-color: #F96C84;
	color: white;
	font-weight: bold;
	font-size: 25px;
	line-height: 58px;
	text-align: center;
	flex-shrink: 0; 
	margin-right: 30px;
}
.question h3{
	font-weight: bold;
	font-size: 18px;
	text-align: left;
	padding: 0 0 5px;
}
.q_disc{
	flex-grow: 1;
}
@media screen and (max-width : 800px ){
	section {
		min-width:350px;
		padding:20px 0;
	}
	.w1000{
		width:100%;
		padding:0;
	}
	.w1230{
		width:100%;
		padding:0;
	}
	.btn_pink{
		width:90%;
	}
	.item_sp{
		display: block;
	}
	.item_pc{
		display: none;
	}
	.mainimg{
		background-position: center;
		background-size:cover;
	}
	.mainimg h2,.mainimg .h2_subttl{
		font-size: 19px;
	}
	.ttl_baito{
		width:50%;
		margin:50px auto 50px 10px;
	}
	.ttl_sub{
		margin:10px auto;
		padding:10px;
	}
	.circle_ttl{
		width:33%;height: auto;
		aspect-ratio:1/1;
		margin:0px;
		filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.16));
	}
	.ttl_sub .circle_ttl:nth-child(2){
	margin:0 3px;
	}
	.circle_ttl i{
		font-size: 15px;
		margin-bottom: 2px;
	}
	.circle_ttl h3{
		font-size: 12px;
		line-height: 1.2em;
		margin-bottom: 5px;
	}
	.circle_ttl p{
		font-size: 9px;
		line-height: 1.2em;
		font-weight: normal;
	}
	
	.content h2{
		font-size: 18px;
		margin:30px 0 40px;
	}
	.con_step{
		width:90%;
		margin:80px auto 30px;
		display: block;	
		height: auto;
		background-color: transparent;
	}
	.con_step::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 65px;
    height: 100%;
    background-color: #F96C84;
		transform: translateX(-50%);
	}
	.step{
		width:100%;
		margin:10px auto;
	}
	.step::before{
		top:50%;
		transform: translateY(-50%);
		left:10px;
	}
	.content:nth-child(3)>.w1000{
		padding:0;
	}
	.table_plan{
		margin:100px 10px 40px;
		line-height: 25px;
	}
	.table_plan:before{
		width:100%;
		top:-60px;
	}
	.table_plan td:before {
		right: 50%;
	}
	.cont_about{
		width:95%;
		margin:10px;
	}
	.no_about{
		font-size: 80px;
		margin-right: 10px;
	}
	.point_about:nth-child(2n){
		margin-left: 5px;
	}
	.point_about h3{
		font-size: 20px;
		line-height: 1.2em;
		margin-bottom: 5px;
	}
	.qa_item{
		width:100%;
		display: block;
	}
	.no_circle{
		margin:10px auto;
	}
}