@charset"UTF-8";

/* 
***********************************************************
* Copyright(C) CIDARIO Inc.
* URI:https://cidario.co.jp
* Editor:Hiromi Yoshino
***********************************************************
*/

#separate{
  background:#4AB8CF;  
}

#separate main{
  width:100%;
  background:#4AB8CF;  
}

#separate header{
  position: relative;
  width:95%;
	height:80px;
  margin: 0 auto;
  z-index: 500;
}

@media print, screen and (min-width:768px) {
#separate header{
  width:95%;
  max-width: 1200px;
	height:110px;
  }
}

#separate p.hd-logo{
  position:absolute;
  top:10px;
  left:0px;  
  width: 40%;
}

@media print, screen and (min-width:768px) {
#separate p.hd-logo{
  position:absolute;
  top:20px;
  left:0px;  
  width: 285px;
  height: 60px; 
  }
}

#separate p.hd-logo svg{
  width: 100%;
  min-width: 180px;
  height: 60px;
  fill: #FFF;
}

@media print, screen and (min-width:768px) {
#separate p.hd-logo svg{
  display: block;
  width: 100%; 
  height: 60px;
 }
}

/*#separate aside.sidebar{
  display: block;
  width:100%;
  height:50px;
  background: #FF8000;
  position: fixed;
  bottom:0;
  right: 0;
  padding: 0;
  z-index: 501;  
}*/  

@media print, screen and (min-width:1100px) {
#separate aside.sidebar{
  width:70px;
  height: 100vh;
  background: transparent;
  position: fixed;
  top:110px;
  right: 0;
  display:grid;
  grid-template-columns:100%;
  grid-template-rows: auto 440px;
  justify-content: space-between;
  padding: 0 0 50px 0;
  z-index: 501;
  }
}

aside.sidebar .side-btn{
  display: block;
}

@media print, screen and (min-width:1100px) {
aside.sidebar .side-btn{
  height: 440px;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 50% 50%;
  }
}

aside.sidebar .side-btn li a{ 
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media print, screen and (min-width:1100px) {
aside.sidebar .side-btn li a{ 
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  }
}

aside.sidebar .side-btn li span{
  font-size: 1.6rem;
  font-weight: 500;
  color: #FFF;
}
@media print, screen and (min-width:1100px) {
aside.sidebar .side-btn li span{
  writing-mode: vertical-rl;
  }
}

#separate footer{
  display: block;
  margin: 45px 0;
}
@media print, screen and (min-width:1100px) {
#separate footer{
  display: block;
  margin: 45px 0 0 0;
  }
}
#separate footer small{
  display: block;
  width:100%;
  max-width: 1200px;
  font-size: 1.4rem;
  color: #FFF;
  text-align: center;
  margin: 0 auto;
}

/* buy-detail
========================================================================================================
*/

.buy-ct-wrap{
  width:95%;
  background: #FFF;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  padding: 15px;
  margin: 0 auto;
}

@media print, screen and (min-width:768px) {
.buy-ct-wrap{
  width:95%;
  padding: 40px; 
  margin: 0 auto;
  }
}

@media print, screen and (min-width:1200px) {
.buy-ct-wrap{
  width:95%;
  max-width: 1200px;
  padding: 60px 60px 40px 60px; 
  margin: 0 auto;
  }
}

#buy-detail h1{
  font-size: 2.4rem;
  line-height: 1.3em;
  font-weight: 700;
  margin: 35px 0 10px 0;
}

@media print, screen and (min-width:768px) {
#buy-detail h1{
  font-size: 3.0rem;
  margin: 45px 0 20px 0;
  }
}

#buy-detail h1 + span{
  font-weight: 700;
  color: #666;
}

#buy-detail .status{
  position: relative;
  top:0;
  left:0;
}

#buy-detail .status{
  position: relative;
  top:0;
  left:0;
}

.buy-detail-box01{
  width:100%;
  display: grid;
  grid-template-columns: 1fr;
  margin: 40px auto;
}

@media print, screen and (min-width:1000px) {
.buy-detail-box01{
  width:100%;
  display: grid;
  grid-template-columns: 60% 1fr;
  column-gap: 60px;
  margin: 40px auto;
  }
}

.buy-swiper{
  position: relative;
  overflow: hidden;
  list-style: none;
  display: block;
  padding: 0 0 30px 0; 
  z-index: 100;
}

.buy-swiper img{
  display: block;
  width:100%;
  height: 480px;
  object-fit: contain;
  background: #EEE;
}

.buy-swiper .swiper-controller .swiper-button-prev{
  width:18px;
  height: 32px;
  background: url("/common/images/icon05.png") no-repeat 0 0;
  background-size: 100%; 
  filter: drop-shadow(4px 2px 2px rgba(0, 0, 0, 0.6));
  position: absolute;
  top:50%;
  left:15px;
  transform: translateY(-50%);  
  z-index: 101;
}

.buy-swiper .swiper-controller .swiper-button-next{
  width:18px;
  height: 32px;
  background: url("/common/images/icon06.png") no-repeat 0 0;
  background-size: 100%; 
  filter: drop-shadow(-4px 2px 2px rgba(0, 0, 0, 0.6));
  position: absolute;
  top:50%;
  right:15px;
  transform: translateY(-50%);  
  z-index: 101;
}

.swiper-controller .swiper-pagination {
  width:100%;
  text-align: center;   
  transition: 300ms opacity; 
  position: absolute;
  bottom:0;
  left:50%;
  transform: translateX(-50%);   
  opacity: 0.8; 
  z-index: 103;
}

.swiper-controller .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%;
  background: #CCC;
}

.swiper-controller .swiper-pagination-bullet.swiper-pagination-bullet-active{
  background: #4AB8CF;
}

.data-box01{
  width:100%;
  border-top: 1px solid #CCC;
  display: grid;
  grid-template-columns: 100px 1fr;
  margin: 30px auto 0 auto;
}

@media print, screen and (min-width:768px) {
.data-box01{
  display: grid;
  grid-template-columns: 120px 1fr;
  margin: 30px auto 0 auto;
  }
}

@media print, screen and (min-width:1000px) {
.data-box01{
  display: grid;
  grid-template-columns: 120px 1fr;
  margin: 0;
  }
}

.data-box01 dt{
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  padding: 0 10px;  
  border-bottom: 1px solid #CCC;
}

@media print, screen and (min-width:768px) {
.data-box01 dt{
  font-size: 1.6rem;
  padding: 0 15px;
  }
}

.data-box01 dd{
  font-size: 2.4rem;
  font-weight: 700;
  padding: 10px;
  text-align: right;
  border-bottom: 1px solid #CCC;
}

@media print, screen and (min-width:768px) {
.data-box01 dd{
  font-size: 3.0rem;
  padding: 15px;
  }
}

.data-box01 dd span{
  display: inline-block;
  font-size: 1.4rem;  
  margin: 0 0 0 8px;
}

.data-box02{
  width:100%;
  display: grid;
  grid-template-columns: 80px 1fr;  
  column-gap: 20px;
  margin: 30px 0;
}

@media print, screen and (min-width:768px) {
.data-box02{
  display: grid;
  grid-template-columns: 80px 1fr;  
  column-gap: 25px;
  margin: 40px 0;
 }
}

.data-box02 dt{
  height: 24px;
  background: #EEE;
  font-size: 1.2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 15px 0;
}

.data-box02 dd{
  font-size: 1.3rem;
  font-weight: 700;
  padding: 6px 0 0 0;
  margin: 0 0 15px 0;
}
@media print, screen and (min-width:768px) {
.data-box02 dd{
  font-size: 1.4rem;
  padding: 4px 0 0 0;
  margin: 0 0 15px 0;
  }
}

.data-box02 dd span + span{
  display: block;
  margin: 5px 0 0 0;
}
@media print, screen and (min-width:768px) {
.data-box02 dd span + span{
  display: block;
  margin: 15px 0 0 0;
  }
}

.buy-detail-box01-02 a{
  display: flex;
  margin: 0 auto;  
}

.buy-detail-box03{
  width:100%;
  background: #EEE;
  padding: 30px 5% 30px 5%;
}

@media print, screen and (min-width:768px) {
.buy-detail-box03{
  width:100%;
  background: #EEE;
  padding: 50px 5% 50px 5%;
  }
}

.buy-detail-box03 h2{
	font-size:2.2rem;
	font-weight:700;
  line-height:200%;
  border: none;
  padding: 0;
	margin: 0 0 20px 0;
}

@media print, screen and (min-width:1050px) {
  .buy-detail-box03 h2{
	 font-size:2.4rem;
  }
}

.buy-detail-box03 h3{
	font-size:1.8rem;
	font-weight:700;
	line-height:200%;
	margin: 0 0 20px 0;	
}

@media print, screen and (min-width:1050px) {
  .buy-detail-box03 h3{
	  font-size:1.8rem;
  }
}

.buy-detail-box03 p{
	line-height: 250%;
}

.buy-detail-box03 p + p{
	margin: 40px 0 0 0;
}

.buy-detail-box03 ul{
	list-style-type: disc;
	list-style-position: outside;
	margin: 0 0 40px 0;
}

.buy-detail-box03 ul li{
	line-height: 200%;
	padding: 0;
	margin: 0 0 15px 30px;	
}

.buy-detail-box03 ol{
	list-style-type: decimal;
	list-style-position: outside;
	margin: 0 0 40px 0;
}

.buy-detail-box03 ol li{
	line-height: 200%;
	padding: 0;
	margin: 0 0 15px 30px;	
}


#outline{
  width:100%;
  margin: 40px 0 0 0;
}

@media print, screen and (min-width:1050px) {
#outline{
  margin: 80px 0 0 0;
  }
}

#outline h2{
  font-size:1.8rem;
  font-weight: 700;
  text-align: center;
}

@media print, screen and (min-width:1050px) {
#outline h2{
  font-size: 2.4rem;
  }
}

#outline h2 span{
  position: relative;
  display: inline-block;
  padding: 0 30px;
}
@media print, screen and (min-width:1050px) {
#outline h2 span{
  padding: 0 60px;
  }
}  

#outline h2 span::before{
  content: "";
  width:20px;
  height: 1px;
  background: #000;
  position: absolute;
  top:50%;
  left:0;
}

#outline h2 span::after{
  content: "";
  width:20px;
  height: 1px;
  background: #000;
  position: absolute;
  top:50%;
  right:0;
}

@media print, screen and (min-width:1050px) {
#outline h2 span::before{
  content: "";
  width:40px;
  height: 1px;
  background: #000;
  position: absolute;
  top:50%;
  left:0;
}

#outline h2 span::after{
  content: "";
  width:40px;
  height: 1px;
  background: #000;
  position: absolute;
  top:50%;
  right:0;
  }
}

#outline dl.outline-box01{
  width:100%;
  border-top: 1px solid #CCC;
  border-left: 1px solid #CCC;
  border-right: 1px solid #CCC;
  display: grid;
  grid-template-columns: 30% 1fr;
  grid-template-rows: auto;
  margin: 40px 0 0 0;
}

@media print, screen and (min-width:768px) {
#outline dl.outline-box01{
  display: grid;
  grid-template-columns: 20% 1fr;
  grid-template-rows: auto;
  margin: 40px 0 0 0;
  }
}
.outline-box01 dt{
  min-height: 60px;
  border-bottom: 1px solid #CCC; 
  border-right: 1px solid #CCC;
  font-size: 1.3rem;
  text-align: center;
  font-weight: 700;
  padding: 30px 10px;
}

@media print, screen and (min-width:768px) {
 .outline-box01 dt{
  min-height: 80px;
  font-size: 1.6rem;
  padding: 30px 10px;
 }
}
.outline-box01 dd{
  border-bottom: 1px solid #CCC;
  padding: 30px 10px;
}
  
@media print, screen and (min-width:768px) {
.outline-box01 dd{
  padding: 30px;
  }
}

.outline-box01 dd br{
  display: block;
  content: "";
  margin: 10px 0 0 0;
}

.outline-box01 dd span{
  line-height: 1.5em;
}
.outline-box01 dd span + span{
  display: block;
  margin: 10px 0 0 0;
}

#outline dl.outline-box02{
  width:100%;
  display:flex;
  flex-flow: row wrap;
  color: #666;
  margin: 20px 0;
}
@media print, screen and (min-width:768px) {
#outline dl.outline-box02{
  width:100%;
  display:flex;
  flex-flow: row nowrap; 
  margin: 40px 0;
  }
}
.outline-box02 dd{
  width:50%;
  margin: 0 20px 10px 0;
}
@media print, screen and (min-width:480px) {
.outline-box02 dd{
  display: inline-block;
  width:auto;
  margin: 0 20px 0 0;
  }
}

.caption-box{
  width:100%;  
}

.caption-box li{
  position: relative;
  font-size: 1.2rem;
  font-weight: 400;
  color: #666;
  line-height: 1.5em;
  padding: 0 0 0 15px;
}

@media print, screen and (min-width:768px) {
.caption-box li{
  font-size: 1.4rem;
  padding: 0 0 0 20px;
  }
}
.caption-box li::before{
  content: "※";
  position: absolute;
  top:0;
  left:0;
}

.caption-box li + li{
  margin: 10px 0 0 0;
}
@media print, screen and (min-width:768px) {
.caption-box li + li{
  margin: 20px 0 0 0;
  }
}
#buy-inquiry{
  width:100%;
  display: grid;
  grid-template-columns: 1fr;
  margin: 40px 0 0 0;
}

@media print, screen and (min-width:768px) {
#buy-inquiry{
  width:100%;
  display: grid;
  grid-template-columns: 30% 1fr;
  margin: 60px 0 0 0;
  }
}

#buy-inquiry h2{
  background: #4AB8CF;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media print, screen and (min-width:768px) {
#buy-inquiry h2{
  min-height: 240px;
  }
}

#buy-inquiry h2 span{
  font-size:1.8rem;
  color: #FFF;
}

@media print, screen and (min-width:768px) {
#buy-inquiry h2 span{
  font-size: 2.4rem;
  color: #FFF;
  }
}

.buy-inquiry-box{
  background: #EEE;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
}

.buy-inquiry-box p{
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.5em;
  padding: 0 20px;
  margin: 30px 0;
}

@media print, screen and (min-width:768px) {
.buy-inquiry-box p{
  font-size: 2.0rem;
  font-weight: 700;
  margin: 0 0 30px 0;
  }
}

.buy-inquiry-box dl{
  display: flex;
  flex-flow: row nowrap;
  font-size: 1.3rem;
  margin: 30px 0;
}
@media print, screen and (min-width:768px) {
.buy-inquiry-box dl{
  font-size: 1.4rem;
  margin: 30px 0 0 0;
  }
}

.buy-inquiry-box dt::after{  
  content: "／";
}

.buy-inquiry-box dd{
  display: inline-block;
  margin: 0 20px 0 0;
}


/* buy-form
========================================================================================================
*/
#buy-form{
  width:100%; 
  max-width:1000px;
  background: #EEE;
  margin: 0 auto;
}

#buy-form .property{
  width:100%;
  background: #143841;
}

.property dl{
  width:90%;
  padding: 30px 0 20px 0;
  margin: 0 auto;
}
@media print, screen and (min-width:768px) {
.property dl{
  width:90%;
  padding: 40px 0;
  margin: 0 auto;
  }
}

.property dl dt{  
  font-size: 1.8rem;
  line-height: 1em;
  color: #FFF;
  font-weight: 700;
  text-align: center;
  margin: 0 0 30px 0!important;
}
@media print, screen and (min-width:768px) {
.property dl dt{  
  font-size: 2.4rem;  
  margin: 0 0 40px 0!important;
  }
}

.property dl dd{
  background: #FFF;
  font-size: 1.8rem;
  color: #999; 
  text-align: center;
  padding: 30px 10px;
  margin: 0; 
}

.property dl dd span{
  display: inline;
}

.property dl dd span input#property_name{
  display: block;
  width:90%;
  font-size: clamp(1.6rem,2.8vw,2.2rem);
  font-weight: 700;  
  white-space: normal;
  text-align: center;
  border:0;
  outline: 0;
  margin: 0 auto 10px auto;
}

@media print, screen and (min-width:768px) {
.property dl dd span input#property_name{
  font-size: 2.8rem; 
  margin: 0 auto 20px auto;
  }
}

.property dl dd span input#property_num{    
  display: block;
  width:90%;
  font-size: 1.4rem;
  color: #999;
  font-weight: 700;
  text-align: center;
  border:0;
  outline: 0;  
  margin: 0 auto;
}

@media print, screen and (min-width:768px) {
.property dl dd span input#property_num{
  font-size: 1.8rem;
  }
}

.property dl dd span input#property_name,
.property dl dd span input#property_num{
	font-family: 'Noto Sans JP', sans-serif;
}

#buy-form .form{
  width:100%;
  margin:0 auto;
}

#buy-form .form .form-wrap02{
  background: #EEE;
}