@charset "utf-8";

/* -----------------------------
	サーバープラン
-------------------------------- */
.server-area .inner1100 > div:has( + div ) {
	margin-bottom:80px;
}

.server-area .min-ttl {
	font-size: 2.4rem;
	margin: 0 0 30px;
	display: block;
	width: 100%;
}

.server-area .min-ttl .min {
	font-size: 1.8rem;
}

.server-area .min-ttl:has( + .min-catch ) {
	margin: 0 0 10px;
}

.server-area .min-ttl::before {
	top: 14px;
}

.server-area .min-catch {
	font-size: 1.7rem;
	color: var(--blue);
	margin: 0 0 30px;
}

.server-area .min-catch .min {
	font-size: 1.4rem;
}



@media screen and (max-width: 768px){
	.server-area .inner1100 > div:has( + div ) {
		margin-bottom: 40px;
	}
	
	.server-area .min-ttl {
		font-size: 2.1rem;
		margin: 0 0 20px;
	}

	.server-area .min-ttl::before {
		top: 11px;
	}
	
	.server-area .min-ttl .min {
		font-size: 1.6rem;
	}

	.server-area .min-ttl:has( + .min-catch ) {
		margin: 0 0 10px;
	}

	.server-area .min-catch {
		font-size: 1.6rem;
		margin: 0 0 20px;
		letter-spacing: 0;
	}

	.server-area .min-catch .min {
		font-size: 1.3rem;
	}
}

/* -----------------------------
	サーバープラン一覧
-------------------------------- */
.server-area {
	padding: 100px 0;
}

.block-list {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	justify-content: flex-start;
	border: 1px solid #ccc;
}

.block-list-item {
	width: 50%;
	padding: 40px 40px 50px;
}

.block-list-item:nth-child( -n + 2 ) {
	border-bottom: 1px solid #ccc;
}

.block-list-item:nth-child(odd) {
	border-right: 1px solid #ccc;
}

.block-list-name {
	text-align: center;
	font-size: 2.1rem;
}

.block-list-name .large {
	font-size: 3.2rem;
	font-weight: bold;
	display: inline-block;
	margin-right: 10px;
}

.block-list-catch{
	font-size: 1.8rem;
	text-align: center;
	color: var(--blue);
}

.block-list-img {
	margin: 20px 0;
	text-align: center;
}

.block-list-img img {
	max-width: 100%;
	width: initial;
}
.block-list .btn-more {
	text-align: center;
}

.block-in-list {
	width: 100%;
	margin: 20px 0 0;
}

.block-in-list-item {
	width: 100%;
	border-bottom: 1px solid #ccc;
}

.block-in-list-item a {
	display: block;
	padding: 25px 0 25px 20px;
	position: relative;
}

.block-in-list-item a::after {
	content: "\f061";
	display: inline-block;
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	color: var(--blue);
	font-size: 1.4rem;
	transition: all .4s;
}

@media (hover: hover) and (pointer: fine) {
	.block-in-list-item a:hover {
		color: var(--blue);
		background: var(--paleblue);
	}
	
	.block-in-list-item a:hover::after {
		right: 10px;
	}
}

@media screen and (max-width: 768px){
	.server-area {
		padding: 30px 0;
	}
	
	.block-list-item {
		width: 100%;
		padding: 20px 20px 30px;
	}
	
	.block-list-item:nth-child(odd) {
		border-right: none;
	}
	
	.block-list-item:nth-child( -n + 2 ) {
		border-bottom: none;
	}
	
	.block-list-item:not(:last-child) {
		border-bottom: 1px solid #ccc;
	}
	
	.block-list-name {
		font-size: 2.0rem;
		line-height: 1.4;
	}
	
	.block-list-name .large {
		font-size: 2.6rem;
		margin-right: 0;
	}
	
	.block-list-catch {
		font-size: 1.7rem;
		margin: 10px 0 0;
	}
	
	.block-in-list {
		margin: 15px 0 0;
	}
}


/* -----------------------------
	サーバープラン詳細
-------------------------------- */

.plan-ttl {
	font-size: 2.4rem;
	font-weight: bold;
	margin: 0 0 10px;
}

.plan-ttl .large {
	font-size: 4.0rem;
}

.plan-ttl .min {
	font-size: 1.8rem;
}

.plan-catch {
	font-size: 2.1rem;
	font-weight: bold;
	line-height: 1.5;
	color: var(--blue);
	margin: 0 0 30px;
}


.plan-img {
	margin: 0 0 80px;
}

.merit-block {
	padding: 60px 0 0;
	border-top: 1px solid #ccc;
}

.icon-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 25px;
	margin: 80px 0 0;
}

.icon-list-item {
	width: calc( ( 100% - 50px ) / 3 );
	padding: 70px 20px 30px;
	position: relative;
	border: 1px solid var(--blue);
}

.icon-list-img {
	position: absolute;
	width: 100px;
	height: 100px;
	background: var(--blue);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50px;
	left: 50%;
	transform: translateX(-50%);
	top: -50px;
}

.icon-list-img img {
	width: 50px;
	height: 50px;
}

.icon-list-name {
	text-align: center;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.3;
}


.icon-list-name .en {
	font-size: 1.3rem;
	color: var(--blue);
}

.icon-list-txt {
	margin: 15px 0 0;
}

.def-list-block {
	margin: 60px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0 60px;
}

.def-list {
	width: calc( ( 100% - 60px ) / 2 );
}

.def-list:has( .def-img ) {
	width: 100%;
}

.def-list:nth-child(3n + 1 ) {
	margin: 30px 0 0;
}

.def-ttl {
	width: 100%;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.5;
	position: relative;
	padding-left: 20px;
}

.def-ttl::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 12px;
	left: 0;
	width: 12px;
	height: 2px;
	background: var(--blue);
}


.def-desc {
	margin: 5px 0 0;
}

.def-desc {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.def-txt {
	font-size: 1.5rem;
	line-height: 1.8;
}

.def-list:has( .def-img ) .def-txt {
	width: calc( 100% - 550px );
}

.def-img {
	width: 520px;
}

.simple-table {
	border-collapse: collapse;
	width: 100%;
	border-bottom: 1px solid #ccc;
	margin: 0 0 30px;
}

.simple-table th {
	border-top: 1px solid #ccc;
	padding: 25px 20px;
	width: 40%;
	text-align: left;
	line-height: 1.5;
}

.simple-table td {
	border-top: 1px solid #ccc;
	padding: 25px 0;
	width: 60%;
	line-height: 1.5;
}

.normal-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #ccc;
	margin: 0 0 30px;
}

.normal-table th {
	width: 25%;
	padding: 25px;
	text-align: left;
	background: #f3f3f3;
	border-right: 1px solid #ccc;
	line-height: 1.5;
}

.normal-table th:not(:last-child) {
	border-bottom: 1px solid #ccc;
}

.normal-table td {
	padding: 25px;
	text-align: center;
	line-height: 1.5;
}

.point-box .normal-table td {
	text-align: left;
}

.normal-table tr:not(:last-child) td {
	border-bottom: 1px solid #ccc;
}

.normal-table td:nth-child(2),
.normal-table td:nth-child(3) {
	border-right: 1px solid #ccc;
}

.normal-table .min {
	font-size: 1.4rem;
}

.normal-table .btn-more {
	margin: 0;
}

.kome {
	font-size: 1.4rem;
	line-height: 1.6;
	padding-left: 1.6rem;
	text-indent: -1.6rem;
}

.kome::before {
	content: "※";
}

.kome + .kome {
	margin: 5px 0 0;
}

.disc-list {
	text-align: left;
}

.disc-list li {
	line-height: 1.5;
	padding-left: 20px;
	position: relative;
	font-size: 1.5rem;
}

.disc-list li::before {
	content: "\030fb";
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}

.disc-list li:has( + li ) {
	margin: 0 0 5px;
}

.disc-list.flex {
	display: flex;
	flex-wrap: wrap;
}

.disc-list.flex li {
	width: calc( 100% / 2 );
}

.table-list-block {
	margin-top: 80px;
}

.point-box {
	padding: 60px;
	border: 1px solid #ccc;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 0 40px;
}

.point-box:has( + .point-box ) {
	border-bottom: none;
}

.point-ttl {
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1.5;
	color: var(--blue);
	margin: 0 0 30px;
	font-feature-settings: "palt";
	width: 100%;
}

.point-txt-wrap {
	width: calc( 100% - 440px);
}

.point-img-wrap {
	width: 400px;
}

@media screen and (max-width: 768px){
	.plan-ttl {
		font-size: 2.0rem;
		font-weight: bold;
		margin: 0 0 10px;
	}
	
	.plan-ttl .large {
		font-size: 2.8rem;
	}
	
	.plan-ttl .min {
		font-size: 1.8rem;
	}
	
	.plan-catch {
		font-size: 1.8rem;
		margin: 0 0 20px;
	}
	
	.plan-img {
		margin: 0 0 40px;
	}

	.merit-block {
		padding: 30px 0 0;
	}
	
	.icon-list {
		gap: 20px;
		margin: 30px 0 0;
	}
	
	.icon-list-item {
		width: 100%;
		padding: 20px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
	}
	
	.icon-list-img {
		width: 70px;
		height: 70px;
		border-radius: 35px;
		top: initial;
		left: initial;
		transform: none;
		position: relative;
	}
	
	.icon-list-img img {
		width: 36px;
		height: 36px;
	}
	
	.icon-list-name {
		width: calc( 100% - 70px );
		padding-left: 20px;
		text-align: left;
	}
	
	.def-list {
		width: 100%;
	}
	
	.def-list:nth-child(3n + 1 ) {
		margin: 0;
	}
	
	.def-list + .def-list {
		margin: 20px 0 0;
	}
	
	.def-desc {
		gap: 10px;
	}
	
	.def-list:has( .def-img ) .def-txt {
		width: 100%;
	}
	
	.def-img {
		width: 100%;
	}
	
	.simple-table {
		margin: 0 0 15px;
	}
	
	.simple-table th {
		padding: 10px 15px;
		width: 100%;
		display: block;
		background: #f5f5f5;
	}
	
	.simple-table td {
		padding: 15px;
		width: 100%;
		display: block;
	}
	
	.normal-table {
		margin: 0 0 15px;
	}
	
	.point-box .normal-table {
		order: 2;
	}
	
	.normal-table th {
		width: 27%;
		padding: 10px 5px;
		font-size: 1.4rem;
		font-weight: 400;
		line-height: 1.4;
		letter-spacing: 0;
		font-feature-settings: "palt";
	}
	
	.normal-table td {
		padding: 10px 5px;
		font-size: 1.4rem;
		line-height: 1.4;
	}
	
	.normal-table .min {
		font-size: 1.2rem;
	}
	
	.table-list-block {
		margin-top: 30px;
	}
	
	.normal-table.sp-block th {
		width: 100%;
		display: block;
		border-right: none;
		padding: 15px 20px;
		text-align: center;
		font-size: 1.6rem;
		font-weight: bold;
	}

	.normal-table.sp-block td {
		width: 100%;
		display: block;
		padding: 20px;
		font-size: 1.6rem;
	}
	
	.normal-table.sp-block td:has( .btn-more ) {
		padding: 0 0 20px;
	}
	
	.normal-table.sp-block td:nth-last-child(2) {
		border-bottom: none;
	}
	
	.normal-table.sp-block td:nth-child(2),
	.normal-table.sp-block td:nth-child(3) {
		border-right: none;
	}
	
	.disc-list.flex li {
		width: 100%;
	}
	
	.point-box {
		padding: 20px;
		gap: 0;
	}

	.point-ttl {
		font-size: 1.8rem;
		margin: 0 0 15px;
		order: 1;
	}

	.point-txt-wrap {
		width: 100%;
		order: 3;
	}

	.point-img-wrap {
		max-width: 400px;
		width: 100%;
		order: 2;
		margin: 0 0 15px;
	}
	
	.point-box .kome {
		order: 3;
	}
}