/* セクション：料金プラン表 */
.l-plan {
	padding: 70px 0 100px;
	background: radial-gradient(#fff,#dedede);
}
.l-plan_inr {
	max-width: 1080px;
	margin: 0 auto;
}
table {
	border-spacing: 0;
}
th,td {
	position:relative;
	padding: 0;
	border: none;
}
.plan-img{
	margin-top:40px;
    border-radius: 30px;
	background:#ECECEC;
    padding:30px
}
.plan-img h3{
    font-size:2.5rem;
}
.img-inner{
    border-radius: 30px;
    background: #ffffff;
    padding:30px;
    margin-top: 25px;
    text-align:center;
}
.img-inner img{
	width:80%;
	height:auto;   

}
@media screen and (max-width: 820px) {
	.tablescroll p{
		width: 700px;
		overflow-x: scroll;
	}
}
@media screen and (max-width: 600px) {
	.plan-img{
		width:700px;
		overflow-x: scroll;
	}
}
/* プラン紹介テーブル */
.type-plan_area{
	padding: 40px;
	margin-top: 0;
	background: #ffffff;
	border-radius: 25px;
}
.type-plan_table {
	width: 100%;
	table-layout: fixed;
	background: #D8D8D8;
	border: none; 
	outline: 10px solid #D8D8D8; 
	border-radius: 20px 0px 0px 20px;
	outline-offset: -5px;
}
.sub-title + span::before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	margin: 8px auto;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid #fff;
}
div.sub-contents {
	display: block;
	background-color: #fff;
	padding: 15px 10px;
	margin: 0;
	border-radius: 10px; 
	font-size: 1.55rem;
}
.type-plan_col {
	text-align:center;
}
.type-plan_table thead th:first-child,
.type-plan_table th {
	width: 46%;
	padding: 20px;
	background: #D8D8D8;
	position:relative;
}
@media screen and (max-width: 820px) {
	.type-plan_area p:first-child{
		font-size:medium;
	}
	.type-plan_table thead th:first-child,
	.type-plan_table th {
		width: 32%;
	}
    .headerscroll {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .type-plan_table {
        margin: 0 0 0 0px;
        width: 750px;
        overflow: hidden;
		border:solid 5px #D8D8D8; 
		outline:none;
    }
}
/*強調表示*/
.title-primary {
    display: flex;
    justify-content: center;
    background: #fff;
    border-radius: 30px;
    width: 80%;
    height: 40px;
    margin: auto;
    align-items: center;
}
/*罫線*/
.type-one-topic::before{
	content: "";
	display: block;
	position: absolute;
	bottom:0;
	left: 50%;
	transform: translateX(-50%); 
	width:90%;
	height: 1px;
	background-color:#fff;
	z-index: 1;
}
.type-left-topic::before{
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	right:0;
	width:90%;
	height: 1px;
	background-color:#fff;
	z-index: 1;
}
.type-right-topic::before{
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left:0;
	width:90%;
	height: 1px;
	background-color:#fff;
	z-index: 1;
}
.type-sep::before {
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    background-color: #fff;
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    margin-left: 0;
}
.type-cnt-sep::before {
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    background-color: #D8D8D8;
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    margin-left: 0;
}
.type-left-cnt::before{
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	right:0;
	width:95%;
	height: 1px;
	background-color:#D8D8D8;
	z-index: 1;
}
.type-center-cnt::before{
	content: "";
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width:100%;
	height: 1px;
	background-color: #D8D8D8;
	z-index: 1;
}
.type-right-cnt::before{
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left:0;
	width:95%;
	height: 1px;
	background-color:#D8D8D8;
	z-index: 1;
}



/* 各タイプ表 */
.plan-title {
	text-align: center;
	font-size: 2.4rem;
	margin-bottom: 40px;
	position:relative;
}
@media screen and (max-width: 820px) {
	.plan-title {
        position: static;
    }
}
.plan_type-order_table tbody tr:nth-child(1) .with-sep::after,
.plan_type-temp_table tbody tr:nth-child(1) .with-sep::after,
.plan_type-shindan_table tbody tr:nth-child(1) .with-sep::after{
    content: "";
    width: 1px;
    height: 75%;
    background-color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 5px;
    margin: auto;
}
.plan_col{
    background-color: #fff;
    padding: 10px;
    height: 145px;
    vertical-align: middle;
	text-align:left;
}


/* テンプレート型 */
.plan_type-temp_area{
	padding:40px;
	margin-top: 80px;
	outline: 10px solid #A9D18E;
	background: #ffffff;
	border-radius: 25px;
}
#AI-data-plan .plan_type-temp_area{
    outline: 10px solid #FFF2CC;
}
.plan_type-temp_table {
	width: 100%;
	table-layout: fixed;
	background: #6C7E5B;
	outline: 10px solid #6C7E5B;
	border-radius: 20px 20px 0px 0px;  
	outline-offset: -5px;
}
#AI-data-plan .plan_type-temp_table{
    background: #DBB950;
	outline: 10px solid #DBB950;
}
@media screen and (max-width: 820px) {
	.plan_type-temp_table{
		margin: 0 0 0 0px;
		font-size:1.5rem;
        width: 750px;
		overflow: hidden;
		outline:none;
		border:solid 5px #6C7E5B; 
    }
}
.plan_type-temp_table th{
    border: none;
	padding: 20px;
}
.plan_type-temp_table tbody tr:first-child th {
    position: relative;
    background: #6C7E5B;
}
#AI-data-plan .plan_type-temp_table tbody tr:first-child th {
    background: #DBB950;
}
.plan_type-temp_table tr:not(first-child) th {
	position: relative;
	background: #fff;
}
/*縦線区切り（左側の要素用）*/
.plan_type-temp_table tbody tr .first_contents span::after {
    content: "";
    display: block;
    width: 1px;
    height: 90%;
    background-color: #6C7E5B;
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    margin-left: 0;
}
#AI-data-plan .plan_type-temp_table tbody tr .first_contents span::after {
    background-color: #DBB950;   
}
/*縦線区切り（左側の要素用・最初の行以外）*/
.plan_type-temp_table tbody tr .first_middle_contents span::after {
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    background-color: #6C7E5B;
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    margin-left: 0;
}
#AI-data-plan .plan_type-temp_table tbody tr .first_middle_contents span::after {
    background-color: #DBB950;   
}
/*横線区切り（左側の要素用）*/
.plan_type-temp_table tbody tr .first_contents span::before,
.plan_type-temp_table tbody tr:not(:last-child) .first_middle_contents span::before {
	content: "";
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	width:95%;
	height: 1px;
	background-color: #6C7E5B;
	z-index: 1;
}
#AI-data-plan .plan_type-temp_table tbody tr .first_contents span::before,
#AI-data-plan .plan_type-temp_table tbody tr:not(:last-child) .first_middle_contents span::before {
    background-color: #DBB950;     
}
/*横線区切り（中央の要素用）*/
.plan_type-temp_table tbody tr .middle_contents span::before,
.plan_type-temp_table tbody tr:not(:last-child) .middle_contents span::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width:100%;
	height: 1px;
	background-color: #6C7E5B;
	z-index: 1;
}
#AI-data-plan .plan_type-temp_table tbody tr .middle_contents span::before,
#AI-data-plan .plan_type-temp_table tbody tr:not(:last-child) .middle_contents span::before {
    background-color: #DBB950;       
}
/*縦線区切り（右側の要素用）*/
.plan_type-temp_table tbody tr .last_contents span::after {
    content: "";
    display: block;
    width: 1px;
    height: 90%;
    background-color: #6C7E5B;
    position: absolute;
    z-index: 1;
    left: -1px;
    bottom: 0;
    margin-left: 0;
}
#AI-data-plan .plan_type-temp_table tbody tr .last_contents span::after {
    background-color: #DBB950;     
}
/*縦線区切り（右側の要素用・最初の行以外）*/
.plan_type-temp_table tbody tr .last_middle_contents span::after {
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    background-color: #6C7E5B;
    position: absolute;
    z-index: 1;
    left: -1px;
    bottom: 0;
    margin-left: 0;
}
#AI-data-plan .plan_type-temp_table tbody tr .last_middle_contents span::after {
    background-color: #DBB950;      
}
/*横線区切り（右側の要素用）*/
.plan_type-temp_table tbody tr .last_contents span::before,
.plan_type-temp_table tbody tr:not(:last-child) .last_middle_contents span::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width:95%;
	height: 1px;
	background-color: #6C7E5B;
	z-index: 1;
}
#AI-data-plan .plan_type-temp_table tbody tr .last_contents span::before,
#AI-data-plan .plan_type-temp_table tbody tr:not(:last-child) .last_middle_contents span::before {
    background-color: #DBB950;       
}
.col-center {
	vertical-align: middle;
	text-align: left;
}

/*p-usage-flow*/
.p-usage-flow{
	margin-top: 80px;
}
.p-usage-flow h2{
    font-size:2.2rem;
	color: #DB5000;
}
.p-usage-flow .img{
	width:100%;
	text-align: center;
	margin-top: 15px;
}
.p-usage-flow .img img{
	width:85%;
}

.common-inquiry-btn {
	position: relative;
	padding-top: 46px;
	margin-bottom: 46px;
}
.common-inquiry-btn--link {
	display: block;
	max-width: 700px;
	width: 100%;
	height: 90px;
	margin: 24px auto 0;
	position: relative;
}
.common-inquiry-btn--link img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 100%;
	display: block;
	transition: 0.3s;
}
.common-inquiry-btn--link:hover img:nth-of-type(2) {
	opacity: 0;
}


@media screen and (min-width:768px){
	/*お問い合わせボタン*/
	.inquiry-btn {
		padding-top: 0;
		margin-bottom: 20px;
	}
	.vision-btn::before {
		top: 15px;
	}
	.vision-btn--link {
		margin: 0 auto;
	}
}
@media screen and (max-width:820px){
	.p-usage-flow .img img{
		width:100%;
	}
	.p-usage-flow .common-inquiry-btn{
		padding-top: 20px;
		margin-bottom: 20px;
	}
}
@media screen and (max-width:600px){
	.common-inquiry-btn--link{
		margin: 0 auto ;
	}
}


/* 注釈 */
.hint-notes {
	position: relative;
}
.plan_notes {
	position: absolute;
	top: 10px;
	left: 85%;
	transform: translateX(-2.5%);
	z-index: 5;
	width: 450px;
	display: flex;
}
.plan_notes.plan_template {
	left: 92%;
}
.plan_notes-btn {
	width: 17px;
	height: 17px;
	padding: 0;
	border: none;
	background: none;
	position: relative;
	cursor: pointer;
}
.plan_notes-txt {
	width: calc((100% - 17px) - 40px);
	height: 100%;
	padding: 10px;
	border-radius: 3px;
	margin-left: 30px;
	margin-top: -7px;
	text-align: left;
	line-height: 1.5;
	background: #FFF2CC;
	position: relative;
	transition: all .2s ease-out;
	opacity: 0;
	z-index: 100;
}
.plan_template .plan_notes-txt {
	width: calc((100% - 25px) - 10px);
}
.js-notes-show .plan_notes-txt {
	opacity: 1;
}
.plan_notes-txt::before {
	content: "";
	width: 0;
	height: 0;
	border-right: 35px solid;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-right-color: #FFF2CC;
	position: absolute;
	top: 5px;
	left: -25px;
	z-index: 100;
}
hr {
	border-top: 3px dashed #707070;
}

@media screen and (min-width:821px){
	.plan-title p::before {
		left:70%;
	}
	.plan-title p::after {
		right:70%;
	}
	.plan-title p::before, 
	.plan-title p::after {
		content: '';
		display: block;
		width: 100px;
		height: 3px;
		background: #333333;
		position: absolute;
		top: 0;
		bottom: 0;
		margin-top: auto;
		margin-bottom: auto;
	}
	thead .title-primary:first-child {
		width: 50%;
	}
	.title-primary{
		width: 60%;
	}
}

@media screen and (max-width:820px){
	/* セクション：料金プラン表 */
	.l-plan {
		padding: 70px 20px;
	}
	/* テーブル */
	.tablescroll {
		overflow-x: scroll;
	}
	/* テンプレート型 */
	.type-order-link--blk {
		width: 100%;
	}

	/* 注釈 */
	.plan_notes {
		top:10px;
		left: 75%;
		margin: 0 auto;
		transform: translateX(0);
	}
	.plan_notes.plan_template  {
		left: 87%;
	}
	.plan_notes-btn::before {
		transform: rotate(0);
		margin: 0 auto;
		right: 0;
		left: 0;
	}
}

@media screen and (max-width:768px){
	/* 注釈 */
	.plan_notes {
		width: 250px;
	}
	.plan_notes-txt {
		font-size:small;
	}

}