@charset "utf-8";

/* style */
/* -------------------------------------------------------- */
.plan-sec + .plan-sec {margin-top:200px;}
.plan-sec .clm {margin:-10px 0 0 0; display:flex; flex-wrap:wrap;}
.plan-sec .clm > div {width:50%; text-align:left; padding:50px 130px 0 0; box-sizing:border-box;}
.plan-sec .img {max-width:460px; width:100%; box-sizing:border-box; display:block; position:relative;}
.plan-sec .img img {transition:opacity 0.3s ease;}
.plan-sec .img img:hover {opacity:0.7;}
.plan-sec .img .cap {font-size:3.4rem; font-weight:700; line-height:1.2; text-align:left; padding:0 0.5em; background-color:rgba(255,222,178,0.76); position:absolute; bottom:-0.2em; right:-1.5em;}
.plan-sec .img .cap::before {content:''; width:130px; height:53px; background:url(../img/common/arrow_02.svg) no-repeat right center; background-size:auto 100%; display:block; position:absolute; bottom:-21px; right:-60px;}
.plan-sec .btn {text-align:center; margin:100px 0 0 0;}
.plan-sec .btn a {margin:0 auto;}
 
@media screen and (max-width:1230px){
	.plan-sec .img .cap {font-size:2.7vw;}
}
@media screen and (max-width:767px){
	.plan-sec + .plan-sec {margin-top:144px;}
	.plan-sec .clm {margin:0; display:block;}
	.plan-sec .clm > div {width:auto; padding:60px 0 0 0; position:relative;}
	.plan-sec .clm > div:first-of-type {padding-top:50px;}
	.plan-sec .clm > div:nth-of-type(odd) {text-align:left; padding-right:21%;}
	.plan-sec .clm > div:nth-of-type(odd) .img .cap {right:-1.5em;}
	.plan-sec .clm > div:nth-of-type(even) {text-align:right;}
	.plan-sec .clm > div:nth-of-type(even) .img {padding-left:21%;}
	.plan-sec .clm > div:nth-of-type(even) .img .cap {left:0; right:auto;}
	.plan-sec .img {max-width:100%; width:100%;}
	.plan-sec .img .cap {font-size:2.3rem;}
	.plan-sec .img .cap::before {width:85px; height:34px; bottom:-14px; right:-40px;}
	.plan-sec .btn {margin:80px  0 0 0;}
	.plan-sec .btn a {margin:0 auto;}
}
@media screen and (max-width:428px){
	.plan-sec .img .cap {font-size:5.3vw;}
}