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

#under #plan {
	padding-bottom: 100px;
}
.plan_search {
	background: #fff;
	max-width: 1100px;
	margin: 0 auto;
	padding: 45px 0 50px;
}
@media screen and (max-width: 896px) {
	.plan_search {
		padding: 45px 5% 50px;
	}
}
@media screen and (max-width: 896px) {
	.plan_search {
		padding: 30px 5% 40px;
	}
}

.beatrate_bnr {
	text-align: center;
	margin-top: 60px;
	padding: 0 5%;
}
@media screen and (max-width: 480px) {
	#under #plan {
		padding-bottom: 0;
	}
	.beatrate_bnr {
		margin-top: 30px;
	}
}

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

	planList

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

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

	plan_list

================================================= */
#plan_list {
	padding: 60px 5%;
	background: #f8f7f5;
}
.plan_listBox {
	max-width: 1180px;
	margin: 0 auto;
}
.plan_listBox article {
	display: flex;
	flex-flow: row-reverse;
	align-items: flex-start;
	justify-content: space-between;
	border: 1px solid #d6d1c6;
	padding: 30px;
	background: #fff;
}
.plan_listBox article:not(:last-child) {
	margin-bottom: 40px;
}
.plan_listInfo {
	width: 60%;
	padding: 0 0 0 30px;
	margin-bottom: 20px;
}
.plan_listTtl {
	margin: 20px 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;
}
.plan_priceBox > p small {
	font-size: 1.1rem;
}
.plan_priceBoxArea {
	padding: 10px 0;
	border-top: 1px solid #beb8ab;
	border-bottom: 1px solid #beb8ab;
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.plan_priceBoxInner {
	display: inline-flex;
	flex-flow: column;
	align-items: flex-end;
}
.plan_priceBoxInner > div {
	display: flex;
	align-items: baseline;
	justify-content: center;
	font-size: 3rem;
}
.plan_priceBox div p {
	font-size: 1.5rem;
	margin-right: 20px;
}
.plan_priceBox div span {
	font-size: 2rem;
}
.plan_listBox figure {
	aspect-ratio: 42 / 45;
	width: 40%;
}
.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 #BEB8AB;
}
.plan_listDtl dl dt {
	width: 70px;
	text-align: center;
	padding: 10px 0;
	color: #6f5c19;
}
.plan_listDtl dl dd {
	width: calc(100% - 90px);
	padding: 10px;
	line-height: 150%;
	color: #222;
}

@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;
		margin-bottom: 25px;
	}
	.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: center;
		justify-content: space-between;
	}
	.plan_listInfo_dtlTxt {
		width: 50%;
	}
	.plan_listInfo_dtl {
		width: 100%!important;
	}
	.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 div p {
		font-size: 1.2rem;
		letter-spacing: 0;
	}
	#plan_list .plan_priceBoxInner > div {
		font-size: 2.4rem;
	}
	#plan_list .plan_priceBox div span {
		font-size: 1.4rem;
	}
}
@media screen and (max-width: 640px) {
	#plan_list {
		padding: 60px 3%;
	}
	.plan_listBox article {
		padding: 15px 20px 30px;
	}
}
@media screen and (max-width: 480px) {
	#plan_list {
		padding: 40px 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_list .plan_priceBox > p {
		font-size: 1.1rem;
		font-weight: 500;
	}
	#plan_list .plan_priceBox > p small {
		font-size: 1.0rem;
	}
	#plan_list .plan_priceBox div p {
		font-size: 1.1rem;
		margin-right: 5px;
	}
	.plan_listInfo_dtlTxt {
		width: 55%;
	}
	#plan_list .plan_priceBoxInner > div {
		font-size: 2rem;
		letter-spacing: 0;
	}
	#plan_list .plan_priceBox div span {
		font-size: 1.2rem;
	}
	.plan_listDtl dl dd {
		width: calc(100% - 70px);
		line-height: 140%;
	}
	.plan_priceBox div p {
		font-size: 1.3rem;
	}
	.plan_priceBoxInner > div {
		font-size: 2.6rem;
	}
	.plan_priceBox div span {
		font-size: 1.3rem;
	}
}




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

	plan_dtlInfo

================================================= */
#planDtl {
	background: #FAFAF8;
}
#planDtl .plan_listInfo {
	padding: 0;
	width: 53.6%;
	margin-bottom: 0;
	background: none;
}
#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;
}
#plan_dtlInfo .plan_listTtl {
	margin-top: 0;
}
.plan_listTxt {
	font-size: 1.3rem;
	line-height: 153%;
	font-weight: 500;
}
#plan_dtlInfo .plan_listTxt {
	font-size: 1.3rem;
	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 #BEB8AB;
}
.plan_dtlNotes dl:first-child {
	border-top: 1px solid #BEB8AB;
}
.plan_dtlNotes dl dt {
	width: 80px;
	text-align: center;
	padding: 10px 0;
	color: #7e6930;
}
.plan_dtlNotes dl dd {
	width: calc(100% - 80px);
	padding: 10px;
	line-height: 150%;
	color: #222;
	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;
	}
	.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: 140px;
}
#plan_dtlBft .cmn_ttl_h2_under {
	margin-bottom: 25px;
}
#plan_dtlBft .benefits_dtlBox h3 {
	letter-spacing: 0.2rem;
}
#plan_dtlBft .benefits_dtlBox div {
	background: #FAFAF8;
	padding: 25px 35px;
	line-height: 184%;
	width: calc(100% - 155px);
}

/*---------------------------------------------
	plan_benefits
---------------------------------------------*/
.plan_benefits_inner {
	background: #f3f0eb;
	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;
}
@media screen and (max-width: 1366px) {
	#plan_dtlBft .benefits_dtl {
		padding: 0 7%;
	}
	.plan_benefits_inner {
		padding: 45px 5%;
	}
}
@media screen and (max-width: 1024px) {
	#plan_dtlBft .benefits_dtl {
		padding: 0 5%;
	}
}
@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_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: 60px 7% 45px;
	background: #ffffff;
}
.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;
}
.plan_dtlContInner ul li {
	width: 21.8%;
	margin: 0 1.6% 40px;
}
.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: #7e6930;
	margin-bottom: 12px;
	line-height: 133%;
	text-align: center;
}
.plan_dtlContInner ul li div p {
	font-size: 1.2rem;
	line-height: 133%;
}
@media screen and (max-width: 1024px) {
	#plan_dtlCont {
		padding: 60px 5%;
	}
}
@media screen and (max-width: 768px) {
	.plan_dtlContInner ul li {
		width: calc(90.4% / 3);
	}
}
@media screen and (max-width: 480px) {
	.plan_dtlContInner ul li {
		width: 47%;
		margin: 0 0 30px;
	}
	.plan_dtlContInner ul li:nth-child(odd) {
		margin-right: 6%
	}
}
@media screen and (max-width: 480px) {
	#plan_dtlCont {
		padding: 60px 5%;
		margin-bottom: 0;
	}
	.plan_dtlContInner ul li figure {
		margin-bottom: 10px;
		height: 160px;
	}
	.plan_dtlContInner ul li div h3 {
		font-size: 1.4rem;
		margin-bottom: 5px;
	}
}


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

	plan_listBack

================================================= */
.plan_listBack {
	margin-bottom: 55px;
}
@media screen and (max-width: 768px) {
	.plan_listBack {
		margin: 30px auto 20px!important;
	}
}
@media screen and (max-width: 480px) {
	.plan_listBack {
		margin: 20px auto 0!important;
	}
}