@charset "UTF-8";
/********************************************************************************

page-campaign.css　キャンペーン用css

********************************************************************************/

/*######################################################################
 一覧
######################################################################*/
/*============================================================
 セクション
*============================================================*/
#page-campaign-list #sec-post-list h2 {
	margin-bottom: 32px;
}
#page-campaign-list #sec-post-list .list {
	margin-bottom: 80px;
}
#page-campaign-list #sec-post-list .list:last-child {
	margin-bottom: 0;
}
#page-campaign-list #sec-post-list .item {
	gap: 32px;
	transition: all .3s;
	margin-bottom: 48px;
}
#page-campaign-list #sec-post-list .item:last-child {
	margin-bottom: 0;
}
#page-campaign-list #sec-post-list .item:hover {
	opacity: 0.7;
}
#page-campaign-list #sec-post-list .item-img {
	width: 344px;
}
#page-campaign-list #sec-post-list .item-info {
	width: calc(100% - 376px);
	padding-right: 40px;
}
#page-campaign-list #sec-post-list .item-info h3 {
	margin-bottom: 8px;
}
#page-campaign-list #sec-post-list .item-info p {
	font-size: 14px;
	color: #666;
}

/*######################################################################
 詳細
######################################################################*/
/*============================================================
 共通
*============================================================*/
#page-campaign #main-contents {
	margin-bottom: 0;
}
#page-campaign .cta h2 {
	text-align: center;
}

/*============================================================
 価格・プラン
*============================================================*/
#page-campaign #price-list {
	background: var(--common-color-background1);
	padding: 64px 24px 40px;
	border-radius: 24px;
}

/*============================================================
 安心スタート(解約金無料キャンペーン)
*============================================================*/
#page-campaign .safe-start {
	background: var(--common-color-background1);
	border-radius: 24px;
	padding: 32px 40px;
}
#page-campaign .safe-start .parts-boxes {
	gap: 100px;
}
#page-campaign .safe-start .parts-boxes .contents {
	width: 64%;
}
#page-campaign .safe-start .parts-boxes .img {
	width: 20%;
}

/*============================================================
 申し込み方法と概要(解約金無料キャンペーン)
*============================================================*/
#page-campaign .bg-blue {
	background: var(--common-color-background1);
	border-radius: 24px;
	padding: 64px 60px;
}
#page-campaign .bg-blue h2 {
	color: var(--common-color-accent);
}
#page-campaign .bg-blue ul {
	background: #fff;
}

/*============================================================
 ダウンロードボタン(解約金無料キャンペーン)
*============================================================*/
#page-campaign .parts-btn.download {
	text-align: left;
}

/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
 Tablet
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
@media screen and (max-width: 1008px) {
	/*######################################################################
	 詳細	
	######################################################################*/
	/*============================================================
	 価格・プラン
	*============================================================*/
	#page-campaign #price-list {
		padding-left: 0;
		padding-right: 0;
		border-radius: 0;
	}
	
	/*============================================================
	 安心スタート(解約金無料キャンペーン)
	*============================================================*/
	#page-campaign .safe-start .parts-boxes {
		gap: 40px;
		align-items: center;
	}
	#page-campaign .safe-start .parts-boxes .contents {
		width: 68%;
	}
	#page-campaign .safe-start .parts-boxes .contents h2 {
		font-size: 24px;
	}
	#page-campaign .safe-start .parts-boxes .img {
		width: 24%;
	}
	
	#page-campaign .bg-blue {
		padding: 64px 40px;
	}
	
}

/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
 SP
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
@media screen and (max-width: 767px) {
	/*######################################################################
	 一覧	
	######################################################################*/
	#page-campaign-list #sec-post-list .item {
		max-width: 480px;
		margin: 0 auto 48px;
		gap: 16px;
	}
	#page-campaign-list #sec-post-list .item-img {
		width: 100%;
	}
	#page-campaign-list #sec-post-list .item-info {
		width: 100%;
	}
	
	/*######################################################################
	 詳細
	######################################################################*/
	#page-campaign #mainvisual {
		margin-bottom: 32px;
	}
	
	#page-campaign .safe-start {
		padding: 32px 24px;
	}
	#page-campaign .safe-start .parts-boxes {
		gap: 12px;
	}
	#page-campaign .safe-start .parts-boxes .contents {
		width: 100%;
	}
	#page-campaign .safe-start .parts-boxes .contents .label{
		margin-bottom: 16px;
	}
	#page-campaign .safe-start .parts-boxes .img {
		width: 200px;
		margin: 0 auto;
	}
	
	#page-campaign .bg-blue {
		padding: 32px 16px;
	}
	
}