@charset "utf-8";
/* CSS Document */

/* ==============================================

	plan　main_bestrate

================================================= */
#plan #main_bestrate {
	margin-bottom: 90px;
}
@media screen and (max-width: 480px) {
	#plan #main_bestrate {
		margin-bottom: 50px;
	}
}


/* ==============================================

	plan_search

================================================= */
.plan_search {
	background: #fdfdfd;
	max-width: 1100px;
	margin: 0 auto;
	padding: 45px 0 50px;
	border-radius: 5px;
}
@media screen and (max-width: 896px) {
	.plan_search {
		padding: 45px 5% 50px;
	}
}
@media screen and (max-width: 896px) {
	.plan_search {
		padding: 30px 5% 40px;
	}
}


/* ==============================================

	planList

================================================= */
#planList .under_listTxt {
	margin-bottom: 55px;
}
#planList .main_bestrate {
	margin-bottom: 90px;
}

/* ==============================================

	plan_list

================================================= */
#plan_list {
	padding: 80px 5%;
}
.plan_listBox {
	max-width: 1100px;
	margin: 0 auto;
}
.plan_listBox article {
	display: flex;
	flex-flow: row-reverse;
	align-items: flex-start;
	justify-content: space-between;
	border: 1px solid #9f9f9f;
	padding: 30px;
	background: #fdfdfd;
	gap: 30px;
}
.plan_listBox article:not(:last-child) {
	margin-bottom: 40px;
}
.plan_listInfo {
	width: 56.7%;
}
.plan_listTtl {
	margin: 0 0 35px;
}
.plan_listTtl h1, .plan_listTtl h2 {
	display: inline;
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 164%;
}
.plan_listTtl h2 {
	font-size: 1.7rem;
}
.plan_priceBox > p {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	font-size: 1.4rem;
	letter-spacing: 0.1rem;
	font-weight: 400;
	white-space: nowrap;
	margin-bottom: 10px;
	color: #222;
}
.plan_priceBox > p small {
	font-size: 1.1rem;
}
.plan_priceBox .plan_price {
	margin: 10px 0 20px;
}
.plan_priceBox .plan_price_s {
	flex-flow: row wrap;
	gap: 5px 20px;
}
.plan_listBox figure {
	aspect-ratio: 14 / 15;
	width: 40.3%;
}
.plan_listBox figure img{
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}
.plan_listDtl {
	margin: 20px 0 25px;
}
.plan_listDtl dl {
	display: flex;
	justify-content: space-between;
	font-size: 1.2rem;
	border-bottom: 1px dotted #b9b9b9;
}
.plan_listDtl dl dt {
	width: 70px;
	text-align: center;
	padding: 10px 0;
	line-height: 150%;
}
.plan_listDtl dl dd {
	width: calc(100% - 90px);
	padding: 10px;
	line-height: 150%;
	color: #222;
}
.plan_listBtn {
	max-width: inherit!important;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
.plan_listBtn li {
	width: 48%;
	font-size: 1.3rem;
	letter-spacing: 0.05em;
}
.plan_listBtn a {
	height: 46px!important;
}
.plan_listBtn li:first-child a,
.plan_listBtn li:last-child a:hover {
	background: #103381;
	color: #fff;
}
.plan_listBtn li:first-child a:hover,
.plan_listBtn li:last-child a {
	background: #fff;
	border: 1px solid #103381;
	color: #103381;
}

@media screen and (max-width: 1024px) {
	.plan_listBox article {
		padding: 30px 35px;
	}
	.plan_listInfo {
		width: 100%!important;
		padding: 0;
		margin-bottom: 0;
	}
	.plan_listBox figure {
		width: 45%!important;
	}
	.plan_listInfo_box {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	.plan_listInfo_dtl {
		width: 51%;
	}
	.plan_listTtl {
		margin: 0 0 15px;
	}
}
@media screen and (max-width: 768px) {
	.plan_listInfo_dtl_imgTxt {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}
	.plan_listInfo_dtl {
		width: 100%!important;
	}
	.plan_listInfo_dtlTxt {
		width: 50%;
	}
	.plan_listInfo_dtlTxt .cmn_tag {
		margin-bottom: 0;
	}
	.plan_listBox figure {
		height: 220px;
	}
	#plan_list .plan_priceBox > p {
		font-size: 1.3rem;
	}
	#plan_list .plan_priceBox > p small {
		font-size: 1.1rem;
		letter-spacing: 0;
	}
	#plan_list .plan_priceBox .plan_price {
		margin: 10px 0;
	}
	.plan_listDtl {
		margin: 20px 0;
	}
	.plan_listBox article:not(:last-child) {
		margin-bottom: 30px;
	}
}
@media screen and (max-width: 640px) {
	#plan_list {
		padding: 60px 5%;
	}
	.plan_listBox article {
		padding: 15px 20px 30px;
	}
}
@media screen and (max-width: 480px) {
	#plan_list {
		padding: 60px 3%;
	}
	.plan_listBox article {
		padding: 15px 4% 20px;
	}
	.plan_listBox article:not(:last-child){
		margin-bottom: 20px;
	}
	.plan_listTtl {
		margin: 0 0 15px;
	}
	.plan_listTtl h1, .plan_listTtl h2 {
		font-size: 1.5rem;
		line-height: 140%;
	}
	.plan_listBox figure {
		width: 40%!important;
		height: 150px;
	}
	.plan_listBtn {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-flow: column;
		        flex-flow: column;
	}
	.plan_listBtn li {
		width: 100%;
		letter-spacing: inherit;
	}
	.plan_listBtn li:not(:last-child) {
		margin-bottom: 15px;
	}
	.plan_priceBoxArea {
		font-weight: 500!important;
		margin-bottom: 10px;
	}
	.plan_priceBox > p {
		letter-spacing: inherit;
	}
	#plan_list .plan_priceBox > p {
		font-size: 1.1rem;
		font-weight: 500;
	}
	#plan_list .plan_priceBox > p small {
		font-size: 1.0rem;
	}
	.plan_listInfo_dtlTxt {
		width: 55%;
	}
	.plan_listDtl dl dt {
		line-height: 140%;
	}
	.plan_listDtl dl dd {
		width: calc(100% - 70px);
		line-height: 140%;
	}
}




/* ==============================================

	plan_dtlInfo

================================================= */
#planDtl .plan_listInfo {
	padding: 0;
	width: 53.6%;
	margin-bottom: 0;
}
#planDtl .plan_listBox figure {
	width: 41.6%;

}
/* ==============================================

	plan_dtlInfo

================================================= */
#plan_dtlInfo {
	display: flex;
	flex-flow: row-reverse;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 80px;
	gap: 50px;
}
#plan_dtlInfo .plan_listTtl {
	margin-top: 0;
}
#plan_dtlInfo .plan_priceBoxInner div div {
	font-weight: 400!important;
}
.plan_listTxt {
	font-size: 1.3rem;
	line-height: 153%;
	font-weight: 500;
}
#plan_dtlInfo .plan_listTxt {
	font-size: 1.4rem;
	line-height: 175%;
	margin: 30px 0;
	color: #222;
}
.plan_dtlNotes dl {
	display: flex;
	justify-content: space-between;
	font-size: 1.3rem;
	border-bottom: 1px solid #b9b9b9;
	line-height: 150%;
}
.plan_dtlNotes dl:first-child {
	border-top: 1px solid #b9b9b9;
}
.plan_dtlNotes dl dt {
	width: 80px;
	text-align: center;
	padding: 15px 0;
}
.plan_dtlNotes dl dd {
	width: calc(100% - 80px);
	padding: 15px 10px;
	flex: 1;
}
@media screen and (max-width: 1366px) {
	#plan_dtlInfo {
		padding: 0 7%;
		max-width: inherit;
	}
	#plan_dtlInfo .plan_listTtl {
		margin-bottom: 30px;
	}
}
@media screen and (max-width: 1024px) {
	#plan_dtlInfo {
		padding: 0 5%;
	}
	#plan_dtlInfo .plan_listInfo_box {
		margin-bottom: 0;
	}
	#plan_dtlInfo .plan_listInfo_box figure img {
		height: 450px;
	}
}
@media screen and (max-width: 768px) {
	#plan_dtlInfo .plan_listTtl {
		margin-bottom: 30px;
	}
	#plan_dtlInfo .plan_listInfo_box {
		flex-flow: column;
	}
	#plan_dtlInfo .plan_listInfo_box figure {
		width: 80%!important;
		height: 600px;
		margin: 0 auto 50px;
	}
	#plan_dtlInfo .plan_listInfo_box figure img {
		height: 100%;
	}
	#plan_dtlInfo .plan_listInfo_dtl {
		width: 90%!important;
		margin: 0 auto;
	}
}
@media screen and (max-width: 480px) {
	#plan_dtlInfo {
		margin-bottom: 40px;
	}
	#plan_dtlInfo .plan_listInfo_box figure {
		height: 350px;
		margin-bottom: 30px;
		width: 90%!important;
	}
	#plan_dtlInfo .plan_listTxt {
		margin: 20px 0 30px;
		font-size: 1.3rem;
	}
	.plan_dtlNotes {
		font-size: 1.2rem;
	}
	.plan_dtlNotes dl dt {
		width: 70px;
		letter-spacing: 0;
	}
	.plan_dtlNotes dl dd {
		width: calc(100% - 85px);
	}
	.plan_listInfo_box {
		margin-bottom: 0;
	}
	#plan_dtlInfo .plan_listInfo_dtl {
		width: 96%!important;
	}
	#plan_dtlInfo .plan_listTtl {
		margin-bottom: 15px;
	}
}

/* ==============================================

	plan_dtlBft

================================================= */
#plan_dtlBft {
	margin-bottom: 100px;
}
#plan_dtlBft .cmn_ttl_h2_under {
	margin-bottom: 25px;
}
#plan_dtlBft .benefits_dtlBox h3 {
	letter-spacing: 0.1em;
}
#plan_dtlBft .benefits_dtlBox div {
	background: #fff;
	padding: 25px 35px;
	line-height: 184%;
	width: calc(100% - 155px);
	color: #222;
}

/*---------------------------------------------
	plan_benefits
---------------------------------------------*/
.plan_benefits {
	background: #F6F6F6;
	padding: 45px 100px;
	border-radius: 5px;
}
.plan_benefits h3 {
	font-size: 1.5rem;
	width: 100px;
}
.plan_benefits_inner {
	background: #fff;
	padding: 45px 100px;
}
.plan_benefits h3 {
	width: 150px;
}
.plan_benefitsBtn {
	display: flex;
	justify-content: center;
	gap: 0 50px;
	margin-top: 40px;
}
.plan_benefitsBtn li {
	width: 300px;
}
.plan_benefitsBtn .cmn_btnBg_brn a {
	background: #937954;
	color: #fff;
}
.plan_benefitsBtn .cmn_btnBg_brn a:hover {
	background: #fff;
	border: 1px solid #937954;
	color: #663f1c;
}
@media screen and (max-width: 1366px) {
	#plan_dtlBft {
		padding: 0 7%;
	}
	.plan_benefits {
		padding: 45px 5%;
	}
}
@media screen and (max-width: 1024px) {
	#plan_dtlBft {
		padding: 0 5%;
	}
	.plan_benefits h3 {
		width: 150px;
	}
}
@media screen and (max-width: 768px) {
	#plan_dtlBft .cmn_ttl_h2_under {
		margin-bottom: 20px;
	}
	.plan_benefits h3, #plan_dtlBft .benefits_dtlBox div {
		width: 100%;
		padding: 15px 20px;
	}
	.plan_benefitsBtn {
		gap: 0 30px;
	}
	.plan_benefitsBtn li {
		width: 48%;
	}
	.plan_benefits_inner {
		padding: 30px 25px 20px;
	}
	#plan_dtlBft {
		margin-bottom: 120px;
	}
}
@media screen and (max-width: 640px) {
	.plan_benefitsBtn {
		flex-flow: column;
		align-items: center;
		gap: 20px 0;
		margin-top: 30px;
	}
	.plan_benefitsBtn li {
		width: 80%;
	}
}
@media screen and (max-width: 480px) {
	.plan_benefits {
		padding: 30px 5%;
	}
	#plan_dtlBft {
		margin-bottom: 60px;
	}
	.plan_benefits h3 {
		font-size: 1.4rem;
	}
	.benefits_dtlBox ul li {
		font-size: 1.3rem;
	}
	.plan_benefitsBtn li {
		width: 100%;
	}
}

/* ==============================================

	plan_dtlCont

================================================= */
#plan_dtlCont {
	padding: 100px 7%;
	background: #F7F7F7;
	margin-bottom: 80px;
}
.plan_dtlContInner {
	max-width: 1080px;
	margin: 0 auto;
}
.plan_dtlContInner ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-flow: row wrap;
	        flex-flow: row wrap;
	align-items: flex-start;
	gap: 45px 40px;
}
.plan_dtlContInner ul li {
	width: calc((100% - 120px) / 4);
}
.plan_dtlContInner ul li figure {
	aspect-ratio: 1 / 1;
	margin-bottom: 15px;
}
.plan_dtlContInner ul li figure img {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}
.plan_dtlContInner ul li div h3 {
	font-size: 1.5rem;
	font-weight: 500;
	color: #103381;
	margin-bottom: 12px;
	line-height: 133%;
	text-align: center;
}
.plan_dtlContInner ul li div p {
	font-size: 1.2rem;
	line-height: 133%;
	color: #222222;
}
@media screen and (max-width: 1024px) {
	#plan_dtlCont {
		padding: 60px 5%;
	}
	.plan_dtlContInner ul {
		gap: 45px 30px;
	}
	.plan_dtlContInner ul li {
		width: calc((100% - 90px) / 4);
	}
}
@media screen and (max-width: 896px) {
	.plan_dtlContInner ul li {
		width: calc((100% - 60px) / 3);
	}
}
@media screen and (max-width: 640px) {
	.plan_dtlContInner ul li {
		width: calc((100% - 30px) / 2);
	}
}
@media screen and (max-width: 480px) {
	.plan_dtlContInner ul {
		gap: 30px 25px;
	}
	.plan_dtlContInner ul li {
		width: calc((100% - 25px) / 2);
	}
}
@media screen and (max-width: 480px) {
	#plan_dtlCont {
		margin-bottom: 60px;
	}
	.plan_dtlContInner ul li figure {
		margin-bottom: 10px;
	}
	.plan_dtlContInner ul li div h3 {
		font-size: 1.4rem;
		margin-bottom: 5px;
	}
}


/* ==============================================

	plan_form

================================================= */
#plan_form {
	background: #fff;
	margin-bottom: 100px;
}
@media screen and (max-width: 480px) {
	#plan_form {
		margin-bottom: 60px;
	}
}