.plan_wrapp {}


.plan_wrapp .title {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  color: #163f6a;
  position: relative;
        width: 96%;
    padding-top: 0rem;
}

.plan_wrapp .title h2 {
    margin-bottom: 3rem;
    font-size: 2.4rem;
    line-height: 1.5;
}

.plan_wrapp .title figure {
  width: 20%;
  position: absolute;
  top: 50%;
  right: 0;
  z-index: -1;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
    min-width: 23rem;
    top: 95%;
}


.plan_wrapp .keyvisual {
    padding-top: 60%;
    overflow: hidden;
    position: relative;
    margin-bottom: 60px;
}

.plan_wrapp .keyvisual img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -2;
    -webkit-transform: translate3d(0, 0, -2px);
    transform: translate3d(0, 0, -2px);
}


.plan_wrapp .keyvisual .caption {
    position: absolute;
    right: 10px;
    bottom: 4rem;
    font-size: 1.1rem;
    color: #fff;
}


.plan_wrapp h3 {
	font-size: 25px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-align: center;
	margin-bottom: 60px;
	font-family: 'Noto Serif JP', 'A-OTF A1 Mincho Std', 'A1 Mincho', "游明朝体", "Yu Mincho", serif;
}

.plan_in {
	width: 96%;
	max-width: 1230px;
	margin: 0 auto;
	padding-bottom: 30px;
}
.plan_in ul {
    display: flex;
    flex-wrap: wrap;
	margin-bottom: 20px;
    /*justify-content: space-between;*/
}
.plan_in ul li {
width: calc(400 /1230 *100%);
    max-width: 400px;
	padding: 0px;
    margin-bottom: 40px;
	background:#F8F8F8;
  margin-right: 15px;
}
.plan_in ul li:nth-child(3), .plan_in ul li:nth-child(6), .plan_in ul li:nth-child(9) {
  margin-right: 0;
}

.plan_in .hanrei {
	text-align: right;
}

.plan_in .hanrei img {
width: calc(306 /1230 *100%);
    max-width: 306px;
}


.plan_in li div {
    width: 100%;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.plan_in li div span{
  display: block;
}
.plan_in li div::before, .plan_in li div::after{
  content:"";
  width: 0;
  height: 2px;
  position: absolute;
  transition: all 0.2s linear;
  background:#C4C4C4;
}

.plan_in li div span::before, .plan_in li div span::after{
  content:"";
  width:2px;
  height:0;
  position: absolute;
  transition: all 0.2s linear;
  background:#C4C4C4;
}
.plan_in li div:hover::before, .plan_in li div:hover::after{
  width: 100%;
	opacity: 1;
	z-index: 50;
}
.plan_in li div:hover span::before, .plan_in li div:hover span::after{
  height: 100%;
	opacity: 1;
	z-index: 50;
}


.plan_in li div::before, .plan_in li div::after{
  transition-delay: 0s;
}
.plan_in li div span::before, .plan_in li div span::after{
  transition-delay: 0.2s;
}
.plan_in li div::before{
  right: 0px;
  top: 0px;
}
.plan_in li div::after{
  left: 0px;
  bottom: 0px;
}
.plan_in li div span::before{
  left: 0px;
  top: 0px;
}
.plan_in li div span::after{
  right: 0px;
  bottom: 0px;
}
.plan_in li div:hover::before, .plan_in li div:hover::after{
  transition-delay: 0.2s;
}
.plan_in li div:hover span::before, .plan_in li div:hover span::after{
  transition-delay: 0s;
}

.plan_in li.new a {
    display: block;
    position: relative;
}

.plan_in li.new a::after {
    content: "NEW";
    position: absolute;
    top: 1px;
    left: 21px;
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    color: #fff;
    background: #F5933E;
    padding: 4px 4px 2px;
    font-size: 13px;
    line-height: 1;
    font-weight: 600;
}


/**トリカゴ**/
.plan_kago {
width: 96%;
    max-width: 1300px;
    margin: 0 auto 80px;
    position: relative;
}

.plan_kago figure {
    pointer-events: none;
    position: relative;
    z-index: 2;
}

.kago_link_wrapp {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.plan_kago a.popMadori {
position: absolute;
top: 7%;
left:7%;
z-index: 1;
background:#E8EBFF;
display: block;
height: 86.5%;
width: 4.8%;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
}
.plan_kago a.popMadori:hover {
background:#99A4E8;
}



.plan_kago a.popMadori.room_a {
 left: 4.9%;   
}

.plan_kago a.popMadori.room_f {
 left: 31.7%; 
    height: 80%;
}
.plan_kago a.popMadori.room_g {
left: 36.6%;
    height: 80%;
}
.plan_kago a.popMadori.room_i {
left: 46.3%;
    height: 80%;
}
.plan_kago a.popMadori.room_j {
left: 51.2%;
    height: 80%;
}
.plan_kago a.popMadori.room_m {
 left: 65.9%;
    height: 80%;
}
.plan_kago a.popMadori.room_n {
 left: 70.75%;
    height: 80%;
}
.plan_kago a.popMadori.room_o {
 left: 75.6%; 
    height: 80%;
}
.plan_kago a.popMadori.room_s {
 left:inherit; 
    right: 0.1%;
    height: 80%;
}

.scrool_arw {
    display: none;
}



/***詳細ページ***/

.plan_detail {
	width: 94%;
	max-width: 860px;
	margin: 0 auto 40px;
}
.plan_link_wrapp {
	width: 94%;
	max-width: 860px;
	margin: 0 auto 40px;
	position: relative;
}

.plan_link_wrapp .prev_button {
	width:70px;
	position:absolute;
	left: 15px;
	top: 0;
	-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.plan_link_wrapp .next_button {
	width:70px;
	position:absolute;
	right: 15px;
	top: 0;
	-webkit-transition: 1s;
-moz-transition:1s;
-o-transition: 1s;
transition: 1s;
}


.plan_link_wrapp .prev_button:hover {
	left: 0px;
}
.plan_link_wrapp .next_button:hover {
	right: 0px;
}
.plan_link {
	width: 216px;
	margin: 0 auto;
}
.plan_link a {
	display: block;
	text-align: center;
	padding: 10px 0;
	color: #fff;
	background: #000;
	text-decoration: none;
	font-size:12px; 
				-webkit-transition: 0.3s ease-in-out;
		-moz-transition: 0.3s ease-in-out;
		-o-transition: 0.3s ease-in-out;
		transition: 0.3s ease-in-out;	
}

.plan_link a:hover {
	background:#474747;
}



/*sp*/
@media screen and (max-width: 736px) {
    
.plan_wrapp .title h2 {
    margin-bottom: 3rem;
    font-size: 1.6rem;
    line-height: 1.5;
}
    
.plan_wrapp .title figure {
    width: 35%;
    min-width: inherit;
    top: 100%;
}
    
.plan_wrapp .keyvisual .caption {
    position: absolute;
    right: 10px;
    bottom: 20px;
    font-size: 0.9rem;
    color: #fff;
}
    
    
.plan_kago_border {
    border: 1px solid #ccc;
    width: 96%;
    padding: 20px;
    margin: 0 auto;
}   
    
    
.plan_kago_wrapp {
    width: 100%;
    margin: 0 auto;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}  
    
  .plan_kago {
    position: relative;
    width: 200vw;
    margin: 0 0 20px 0;
}  
    
    
.scrool_arw {
    display: block;
    width: 100%;
    margin: 0 auto;
}  
    
	
.plan_wrapp h3 {
font-size: 1.3rem;
font-weight: 400;
margin-bottom: 30px;
line-height: 180%;
}
	
	
	
.plan_in {
	width: 80%;
	margin: 0 auto;
	padding-bottom: 20px;
}
	

.plan_in ul {
    display:block;
	margin-bottom: 20px;
}
.plan_in ul li {
width: 100%;
    max-width:inherit;
	padding:0px;
	margin-bottom: 25px;
}	
	.plan_in ul li:last-child {
		margin-bottom: 0;
	}
	
	
.plan_in .hanrei {
	text-align: center;
}

.plan_in .hanrei img {
width: 90%;
    max-width:inherit;
}

	
	.plan_in li.third_remaining a::after, .plan_in li.second_remaining a::after {
    top: -29px !important;
    right: -61px !important;
    font-size: 12px !important;
    height: 60px !important;
  }
	
}
.third_remaining, .second_remaining {
  overflow: hidden;
}
.plan_in li.third_remaining a::after {
    content: "残3邸";
    position: absolute;
    top: -23px;
    right: -53px;
    color: #fff;
    background: #B10000;
    padding: 4px 4px 2px;
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
    width: 120px;
    height: 68px;
    transform: rotate(45deg);
    text-align: center;
    line-height: 100px;
    font-family: initial;
}

.plan_in li.second_remaining a::after {
    content: "残2邸";
    position: absolute;
    top: -23px;
    right: -53px;
    color: #fff;
    background: #B10000;
    padding: 4px 4px 2px;
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
    width: 120px;
    height: 68px;
    transform: rotate(45deg);
    text-align: center;
    line-height: 100px;
    font-family: initial;
}

@media screen and (min-width: 737px) and (max-width: 1280px) {

  .mainImgWrap {
    min-width: unset !important;
  }
  .blk01 {
    width: auto !important;
  }

  .plan_in ul {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-column-gap: 15px;
    margin-bottom: 20px; 
  }

  .plan_in ul li {
    width: auto;
    margin-right: 0;
  }

  .outpole_wrapp {
    width: 100%;
    overflow-x: hidden;
  }

  .c01 {
     width: unset !important; 
  }

  .plan_in li.second_remaining a::after, .plan_in li.third_remaining a::after {
    top: -24px !important;
    right: -50px !important;
    font-size: 10px !important;
    width: 100px !important;
    height: 50px !important;
    line-height: 88px !important;
  }
}