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

　ルームプラン

###################################################################################### */
.pageRoom .wgra {background-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(223, 228, 234, 1));}


/*予告時*/
.pageRoom .room.contents { margin: 60px auto;}
.pageRoom .room.contents h2 { margin-bottom: 60px;}
.pageRoom .room.contents p { margin-bottom: 60px;}

.pageRoom .room.contents a {transition: .5s;}
.pageRoom .room.contents a:hover { opacity: 0.5;}

@media screen and (max-width: 767px) {
	.pageRoom .room.contents h2 { margin-bottom: 30px;}
	.pageRoom .room.contents p { margin-bottom: 30px;}
}

.pageRoom {}
.pageRoom .att {
    font-size:0.75rem;
    line-height: 1.3;
    text-align: left;
    /*margin-bottom: 80px;*/
    margin-top: 40px;
}
.spec { float: left; width: 350px; position: relative;}
.spec p { line-height: 1.5; margin-bottom: 10px; font-size: 85%;}
.spec p.jiki { font-size: 100%; font-weight: bold; background: #f5f5f5; padding: 4px; border-radius: 3px; text-align: center;}
.spec img { margin-bottom: 20px;}

.flex {
	display: flex;
	justify-content: space-between;
	align-items:flex-start;
}


.planImg { float: right; width: 800px; text-align: center; /*margin-bottom: 400px !important;*/}
.pdf {
    display: block;
    margin-top: 30px;
}
a.pdf {
    display: block;
    background:linear-gradient(to right, #46beb4, #1e7cda);
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    padding: 20px;
	border-radius: 4px;
}
a.pdf:hover { opacity: 0.5;}
p.sold { line-height: 1.8;}
p.nexttype { margin-bottom: 15px;}

.pageRoom .contentsM .spec .youtube-box {width:100%; margin-top: 40px; margin-bottom: 40px;}
	/*.pageRoom .contentsM .spec .youtube {
		position: relative;
		padding-bottom: 56.25%;
		width:100%;
		height: 0;
		margin:0 0 5px;
		overflow: hidden;
	}

	.pageRoom .contentsM .spec .youtube iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}*/
	
	.pageRoom .youtube {
		width: 100%;
		height: 0;
		position: relative;
		margin-top: 30px;
		padding-top: 56.25%;
		clear: both;
	}
	.pageRoom .youtube iframe {
	  position: absolute;
	  left: 0;
	  top:0;
	  width: 100%;
	  height: 100%;
	}	
	
.pageRoom .contentsM .spec { position: relative;}
.pageRoom .contentsM .spec .mitasmo {
	/*position: absolute;
	top:500px;*/
	z-index: 1111;
}
.mitasumo:after {
		content:"";
		display: block;
		clear: both;
}
.mitasumo .youtube-box { width: 350px;}
.mitasumo .youtube-box p { line-height: 1.5;}
.mitasumo .youtube-box iframe { margin-top: 20px;}

.view { /*margin-top:3em;*/ padding-bottom:0 !important;}
/*.view { width: 50%; margin:0 auto;}*/
/*.view img { width: 100%; height: auto;}*/



@media screen and (min-width: 768px) {
.premiumplan .view {width:1230px; margin-left:-15px; margin-right:-15px;}
}
@media screen and (min-width: 1200px) {
.premiumplan .view {width:100vw; margin-left:calc((100vw - 1200px) / -2); margin-right:calc((100vw - 1200px) / -2);}
}
@media screen and (max-width: 767px) {
.premiumplan .view {width:100vw; margin-left:-15px; margin-right:-15px;}
}


.wide_w { width: 45%;}
ul.roombtn { text-align: center; width: 100%; }
ul.roombtn:last-child { margin-bottom: 50px;}
ul.roombtn li { display: inline-block; /* width: 32.5%;  width: 40.5%;*/ width: 45%; text-align: center; margin-bottom: 15px;}
ul.roombtn li img { width: 100%; height: auto;}
ul.roombtn li.eqbanner { width:491px;}

/*ul.roombtn img { opacity: 0.2;}*/
ul.roombtn a img { opacity: 1;}


ul.listroombtn { text-align: center;}
ul.listroombtn.menutype { padding-top: 50px;}
ul.listroombtn li { display: inline-block; width: 15.5%; text-align: center; margin-bottom: 15px; vertical-align: top;}
ul.listroombtn li a:hover { opacity: 0.4;}
ul.listroombtn li.sp { display: none;}
/*ul.listroombtn li img { opacity: 0.5;}*/
ul.listroombtn li a img { opacity: 1;}

ul.listroombtnG { text-align: center;}
ul.listroombtnG li { display: inline-block; width: 28%; text-align: center; margin-bottom: 15px;}
ul.listroombtnG li a:hover { opacity: 0.7;}
ul.listroombtnG li.sp { display: none;}

.ag_both {	padding: 30px; border: solid 2px #ccc; border-radius: 0 0 4px 4px; margin-bottom: 40px; border-top: none;}
.ag_bothTitle { text-align: center; background: #222222; color: #fff; font-size: 18px; padding: 10px; border-radius:4px 4px 0 0;}

p.limitedsp { display: none;}
p.sp.simulation { display: none;}

.att p { line-height: 1.5; text-align: center;}

@media screen and (max-width: 767px) {
	.flex { display: block;}
	.wide_w { width: 100%; margin-top: 20px;}
	p.pc.simulation { display: none;}
	p.sp.simulation { display: block;}	
	.side_btn { display: none;}
	p.limitedsp {
		display: block;
		margin:0 auto 40px;
		text-align: center;
		width: 90%;
	}
	.planImg { margin-bottom: 80px;}
	.pageRoom .contentsM .spec .youtube-box {width:100%;}
	.view { width: 100%; margin: auto;}
	ul.roombtn { text-align: left; display: flex; justify-content: space-between; flex-wrap: wrap;}
	ul.roombtn li { display: block; width: 48%; text-align: center; margin-bottom: 10px;}
	.kanta{ margin-top: 30px;}
	.kanta .htitle img { float: none; margin-right: 0; text-align: center;}
	ul.listroombtn li.pc { display: none;}
	ul.listroombtn li.sp { display: block; width: 100%;}
	ul.listroombtnG li.pc { display: none;}
	ul.listroombtnG li.sp { display: block; width: 100%;}
	
	.pageRoom .contentsM .spec .mitasmo {
		position:inherit;
		top:0;
	}	
	.pageRoom .contents .spec .mitasmo img { width: 100%; height: auto;}
	ul.listroombtn li { display: inline-block; width: 32%;}
	.att p { line-height: 1.5; text-align: left;}
	
}

.btmcontents { /*border-top: solid 1px #ccc; padding-top: 50px;*/}

@media screen and (min-width: 768px) {

    .pageRoom .roomplan .planList.bottom { margin-bottom: 60px;}
    .pageRoom a.backlist { display: none;}

	.pageRoom .specG { border-bottom: solid 1px #cccccc; padding-bottom: 15px;}
}

@media screen and (max-width: 767px) {
	.pageRoom .contents.wide { padding-left: 15px; padding-right: 15px;}
    .spec { float: none; margin-bottom: 20px; margin-top: 40px; width: 100%;}
    .planImg { float: none; width: 100%;} 
}

#Atype { border-top: solid 1px #f5f5f5; padding-top: 80px; }

.tebra p { font-size: 16px; line-height: 1.5; margin-bottom: 15px;}
span.type {
	padding: 10px 20px;
	font-size: 16px;
	display: block;
	background: #f5f5f5;
	margin-bottom: 25px;
}
span.door { color:#fff; background: #111; padding: 8px 15px; font-size: 14px; margin-right: 10px; vertical-align: top;}
a.hapisapolink {
	text-align: center;
	padding: 30px 20px;
	margin: 10px auto 30px;
	display: block;
	width: 40%;
	background: #e50065;
	color: #fff;
	border-radius: 3px;
	text-decoration: none;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all  0.5s ease;
	font-size: 160%;
	border: solid 3px #e50065;
	font-weight: bold;
}
a.hapisapolink:hover { opacity: 0.7; border: solid 3px #e50065; background: #fff; color: #e50065; font-weight: bold;}
@media screen and (max-width: 767px) {
a.hapisapolink  { width: 100%; padding: 15px; font-size: 100%;}
}


p.flsize { font-size: 120%;}
/*タブ切り替え*/
.tab {
  display: flex;
  flex-wrap: wrap;
  /*margin-top: 50px;*/
  margin-top: 20px;
 }

/*inputを非表示にする*/
.input {
  position: absolute;
  opacity: 0; }

/*tabボタン部分*/
.tab-label{
  width: 100%;
  padding: 20px 60px;
  background: #ffffff;
  cursor: pointer;
  /*font-weight: bold;*/
  font-size: 16px;
  color: #837e84;
  margin-bottom: 0;
  transition: background 0.1s, color 0.1s;
    margin-right: 10px;
    border-radius: 4px 4px 0 0;
	border: solid 2px  #837e84;
	border-bottom: none;
}

.tab.normal {border-bottom: solid 2px #cccccc; margin-bottom: 60px;}
.tab .states {
    background: #ffffff;
    cursor: pointer;
    /* font-weight: bold; */
    font-size: 16px;
    color: #024882;
    margin-bottom: 0;
    transition: background 0.1s, color 0.1s;
    margin-right: 10px;
    border-radius: 4px 4px 0 0;
    border: solid 2px #024882;
    border-bottom: none;
}
.tab .states.active {
    background: #024882;
    color: #ffffff;
    border: solid 2px #024882;
}
.tab .states a { padding: 20px 60px; color: #024882; text-decoration: none; display: block;}
.tab .states.active a { color: #fff;}
.tab .states:hover {
    color: #ffff !important;
	background: #024882;
}
.tab .states:hover a { color: #fff;}


.tab .premium {
    background: #ffffff;
    cursor: pointer;
    /* font-weight: bold; */
    font-size: 16px;
    color: #837e84;
    margin-bottom: 0;
    transition: background 0.1s, color 0.1s;
    margin-right: 10px;
    border-radius: 4px 4px 0 0;
    border: solid 2px #837e84;
    border-bottom: none;
}
.tab .premium.active {
    background: #837e84;
    color: #ffffff;
    border: solid 2px #837e84;
}
.tab .premium a { padding: 20px 60px; color: #837e84; text-decoration: none; display: block;}
.tab .premium.active a{
    color: #ffffff;
}

.tab .premium:hover {
    color: #ffff !important;
	background: #837e84;
}
.tab .premium:hover a { color: #fff;}

.tab .executive {
    background: #ffffff;
    cursor: pointer;
    /* font-weight: bold; */
    font-size: 16px;
    color: #1e1612;
    margin-bottom: 0;
    transition: background 0.1s, color 0.1s;
    margin-right: 10px;
    border-radius: 4px 4px 0 0;
    border: solid 2px #1e1612;
    border-bottom: none;
}
.tab .executive.active {
    background: #1e1612;
    color: #ffffff;
    border: solid 2px #1e1612;
}
.tab .executive a { padding: 20px 60px; color: #1e1612; text-decoration: none; display: block;}
.tab .executive.active  a{
    color: #ffffff;
}
.tab .executive:hover {
    color: #ffff !important;
	background: #1e1612;
}
.tab .executive:hover a { color: #fff;}



.tab-label:hover{
  background: #837e84;
    color: #f6f6f6;
}

.tab-label:active{
    background: #837e84;
    color: #f6f6f6; }

.input:checked + .tab-label {
  background: #837e84;
  color: #fff;
    border: solid 2px #837e84;
}

  .tab-label {
    width: auto;
    }

.tab-label.bottom {
	display: block;
	width: 250px;
	margin: auto;
	text-align: center;
	border-radius: 4px;
	margin-top: 10px;
	
}
.tab .planImg { margin-bottom: 0px;}


/*tabボタン部分1階住戸*/
.tab-label_gf{
  width: 100%;
  padding: 20px 60px;
  background: #ffffff;
  cursor: pointer;
  /*font-weight: bold;*/
  font-size: 16px;
  color: #1e1612;
  margin-bottom: 0;
  transition: background 0.1s, color 0.1s;
    margin-right: 5px;
    border-radius: 4px 4px 0 0;
	border: solid 2px  #1e1612;
	border-bottom: none;
}

.tab-label_gf:hover{
  background: #1e1612;
    color: #f6f6f6;
}

.tab-label_gf:active{
    background: #1e1612;
    color: #f6f6f6; }

.input:checked + .tab-label_gf {
  background: #1e1612;
  color: #fff;
    border: solid 2px #1e1612;
}

  .tab-label_gf {
    width: auto;
    }

.tab-label_gf.bottom {
	display: block;
	width: 250px;
	margin: auto;
	text-align: center;
	border-radius: 4px;
	margin-top: 10px;
	
}
span.gftab { font-size: 80%; margin-left: 5px;}

/*tabの本文エリア*/
.tab-panel {
  display: none;
  padding: 40px 0 0;
  border-top: solid 2px #cccccc;
    width: 100%;
}
.tab-panel.menu { display: block;}

  .tab-panel {
    order: 99;
      margin: auto;
    }
.input:checked + .tab-label + .tab-panel,
.input:checked + .tab-label_gf + .tab-panel{
  display: block; 
}

.coming {
	background: #089d71;
	color: #fff;
	padding:2px 4px;
	line-height: 1;
	margin-left: 10px;
	font-size: 12px;
}
.soldi {
	background: #ff0000;
	color: #fff;
	padding:2px 4px;
	line-height: 1;
	margin-left: 10px;
	font-size: 12px;
}


@media screen and (max-width: 767px) {
    .tab { justify-content:space-between;}
	
	.tab-panel .spec { margin-top: 0;}
    .tab-label {
      width: 33%;
      padding: 10px;
      background: #ffffff;
      cursor: pointer;
      /*font-weight: bold;*/
      font-size: 14px;
      color: #837e84;
      margin-bottom: 0;
      transition: background 0.1s, color 0.1s;
      margin:0;
      border-radius: 4px;
      text-align: center;
		border-bottom: solid 2px #837e84;
    }
	.tab-label.multiple {padding: 10px 10px 10px;}
    .tab-label_gf {
      width: 33%;
      padding: 10px;
      background: #ffffff;
      cursor: pointer;
      /*font-weight: bold;*/
      font-size: 14px;
      color: #1e1612;
      margin-bottom: 0;
      transition: background 0.1s, color 0.1s;
      margin:0;
      border-radius: 4px;
      text-align: center;
		border-bottom: solid 2px #1e1612;
		
    }	
    .input:checked + .tab-label {
        border: solid 2px #837e84;
		background: #837e84;
    }
    .input:checked + .tab-label_gf {
        border: solid 2px #1e1612;
		background: #1e1612;
    }	
    .tab-panel {
      border-top:none;
		
    }
	.coming { display: block; margin-top:5px; margin-left: 0;} 
	span.gftab { font-size: 80%; display: block; margin-top:5px;}
	.tab.normal { border-bottom: none;}
	.tab .states {
		text-align: center;
		border: solid 2px #024882;
		border-radius: 4px;
		margin-right: 0;
	}
	.tab .premium {
		text-align: center;
		border: solid 2px #837e84;
		border-radius: 4px;
		margin-right: 0;
	}	
	.tab .executive {
		text-align: center;
		border: solid 2px #1e1612;
		border-radius: 4px;
		margin-right: 0;
	}
	.tab .states,
	.tab .premium,
	.tab .executive { width: 33%; margin: 0;}
	
	.tab .states a,
	.tab .premium a,
	.tab .executive a{ padding: 10px;}
	

}

.side_btn {
	background-color: rgba(0,0,0,0);
	border:0px;
	padding: 6px 6px;
	position: fixed;
	right: 10px;
	top: 163px;
	/*-webkit-animation-name:side;
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:ease;*
	
	-moz-animation-name:side;
	-moz-animation-duration:2s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function:ease;*/
}

@-webkit-keyframes side {
	0% {-webkit-transform:translate(0, 0);}
	50% {-webkit-transform:translate(0, -4px);}
	100% {-webkit-transform:translate(0, 0);}
}
@-moz-keyframes side {
	0% {-moz-transform:translate(0, 0);}
	50% {-moz-transform:translate(0, -4px);}
	100% {-moz-transform:translate(0, 0);}
}

.tab-label_menu {
	margin-right: 2px;
    border-radius: 4px 4px 0 0;
	border: solid 2px  #12abb6;
	border-bottom: none;
    background: #ffffff;
}
.tab-label_menu:hover,
.tab-label_menu.active{background: #12abb6;}
.tab-label_menu a{
    color: #12abb6;
    width: 100%;
    padding: 20px 60px;
    font-size: 16px;
    margin-bottom: 0;
    transition: background 0.1s, color 0.1s;
	text-decoration: none;
	display: block;
}
.tab-label_menu a:hover,
.tab-label_menu.active a{
	background: #12abb6;
	color: #f6f6f6;
}

span.btshiharai { font-size: 80%;}

@media screen and (max-width: 767px) {
	.tab-label_menu a{
		padding: 20px;
	}	
	.tab-label_menu {
		border-bottom: solid 2px #12abb6;
		border-radius: 4px;
		width: 48%;
		text-align: center;
	    margin: 0 2px 2px;
		
	}
	span.btshiharai { display: block; padding-top: 5px;}
}

/*シミュレーションボタン*/
 a.simulation  {
	background: #b63264;
	color: #fff;
	display: block;
    text-decoration: none;
    text-align: center;
    padding: 20px;
	border-radius: 4px;	 
}

a.simulation:hover { opacity: 0.7;}

.terrace .small { line-height: 1.5; text-align: left;}
.terrace .terrace_title {
	background: #048bcd;
	color: #fff;
	text-align: center;
	margin-bottom: 15px;
	padding: 15px;
	border-radius: 3px;
	}


/**** equipList（リスト） ****/
.pageRoom .equipList .listtitle {
    display: block;
    width: 100%;
    margin-bottom: 20px;
    font-size: 130%;
    /* background: #cccccc; */
    padding:60px 10px 10px;
    /* text-align: center; */
    border-bottom: solid 2px #ccc;
}
@media print, screen and (min-width: 768px) {

	.pageRoom .powderBox { display: flex; justify-content: space-between; align-content: flex-start;}
	.pageRoom .powderBox .Left, .pageEquipment .powderBox .Right { width: 46%;}
	.pageRoom .powderBox .equipList .list{ width: 48%;}	

	.pageRoom .equipList {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.pageRoom .equipList:before{
	  content:"";
	  display:block;
	  /*width: 32%;*/
	  width: 22.5%;
	  height:0;
	  order:1;
	}		
	.pageRoom .equipList:after{
	  content:"";
	  display:block;
	  /*width: 32%;*/
	  width: 22.5%;
	  height:0;
	}	
    .pageRoom .equipList .list{
        /*width: 32%;*/
		width: 22.5%;
		vertical-align: top;
		margin-bottom: 30px;
    }
    .pageRoom .security .equipList .list{
        width: 32%;
		vertical-align: top;
		margin-bottom: 30px;
    }	
	.pageRoom .equipList .list img { width: 100%; height: auto;}
}

@media screen and (max-width: 767px) {
	.pageRoom .equipList {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.pageRoom .equipList:after{
	  content:"";
	  display:block;
	  width: 48%;
	  height:0;
	}	
    .pageRoom .equipList .list{
        width: 48%;
		vertical-align: top;
		margin-bottom: 30px;
		line-height: 1.5;
    }

    
}

@media screen and (max-width: 340px){
    .pageRoom .equipList .title br{display: none;}
}

/**** キッチン ****/
@media print, screen and (min-width: 768px) {
    .pageRoom .equipment.kitchin{margin-top: 25px;}
    .pageRoom .kitchin .mainImg,.pageEquipment .bathroom .mainImg{margin-bottom: 25px;}
}
@media screen and (max-width: 767px) {
    .pageRoom .equipment.kitchin{margin-top: 2.2em;}
    .pageRoom .kitchin .mainImg{margin-bottom: 2em;}
}

/**** バスルーム ****/
.pageRoom .bathroom .equipList .title .small{display: inline-block;}
@media print, screen and (min-width: 768px) {
	.pageRoom .bath .mainImg{margin-bottom: 2em;}
    .pageRoom .bath .bottom{margin-top: 15px;}
    .pageRoom .bath .bottom .equipList .list{margin-right: 30px;}
    .pageRoom .bath .bottom .equipList .list.wide{width: 715px; margin-right: 0;}
}

/*Premium*/
.premiumplan { clear: both; padding-top: 60px;}
.pageRoom .premiumplan h2.t_title { text-align: center; margin-bottom: 20px; font-size: 120%;}
.premiumplan .borderBox {
	border: solid 1px #fff;
	padding: 15px;
	width: 49% !important;
	color: #fff;
	background: #666666;
}
.premiumplan dl { position: relative;}
.premiumplan .borderBox dt { margin-top: 10px; color: #fff;}
.premiumplan p.title { margin-bottom: 10px; font-weight: bold; margin-top: 8px; line-height: 1.5;}
.premiumplan p.text { line-height: 1.5; font-size: 90%;}
.premiumplan p.text span { display: block;}
.premiumplan .borderBox p { color: #fff;}
.premiumplan .borderBox.shower {
	display: flex;
	justify-content: space-between;
}
.premiumplan .borderBox.shower dt { width: 90%; margin-right: 10px;}

@media screen and (max-width: 767px) {
	.premiumplan .borderBox { width: 100% !important;}

}

.soldnone { display: none !important;}
.solidtab {pointer-events: none;}

.typechange ul {
	display: flex;
	justify-content: center;
}
.typechange ul li {
	width: 40%;
	margin: 20px;
	border: solid 1px #222;
}
.typechange ul li.active {
	background: #222222;
	color: #fff;
	padding: 20px;
	transition: .5s;
}

.typechange ul li a {
	padding: 20px;
	display: block;
	text-decoration: none;
	transition: .5s;
}
.typechange ul li a:hover {
	background: #222;
	color: #fff;
	opacity: 1;
}
.typechange.sp { display: none;}

@media screen and (max-width: 767px) {
	.typechange.pc { display: none;}
	.typechange.sp { display: block; width: 100%;}
	.tab.normal { margin-bottom: 0px;}
	.typechange ul { width: 100%;}
	.typechange ul li { width: 48%; text-align: center; margin: 10px;}

}

/* end */