@charset"UTF-8";

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

h2.ttl{
  position: relative;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.8rem;
  color: #c71236;
  padding: 0 0 15px 0;
}

@media only screen and (min-width:768px) {
h2.ttl{
  font-size: 2.4rem;
  padding: 0 0 30px 0;
  }
}

h2.ttl::after{
  content: "";
  width:60px;
  height: 1px;
  background: #C71F3E;
  position: absolute;
  bottom: 0;
  left:50%;
  transform: translateX(-50%);
}

div.ttl-box{
  position: relative;
  width:95%;
  padding: 0 2.5%;
  margin: 0 auto;
}

@media only screen and (min-width:768px) {
 div.ttl-box{  
  max-width: 1600px;
  padding: 0 5%;
  margin: 0 auto;
  }
}

div.ttl-box::after{	
  font-family: 'Times New Roman', Times, 'serif';
  font-size:6rem;
  color: #FFF;
  font-weight: 400;
  line-height: 100%;
  position: absolute;
  bottom: -40px;
  right: 0;
  z-index: 300;
}

@media only screen and (min-width:768px) {
div.ttl-box::after{	
  font-size:16rem;
  position: absolute;
  bottom: -87px;
  right: 0px;
  }
}

div.ttl-box h2{
  position: relative;
  text-align: center;  
  z-index: 301;
}

div.ttl-box h3{
  position: relative;
  font-size: 1.8rem;
  line-height: 1.75em;
  text-align: center;
  font-weight: 600;
  letter-spacing:inherit;
  margin: 30px 0 30px 0;
  z-index: 301;
}

@media only screen and (min-width:768px) {
div.ttl-box h3{
  position: relative;
  font-size: 2.4rem; 
  line-height: 2em;
  letter-spacing:0.05em;
  margin: 60px 0;
  z-index: 301;
  }
}

div.ttl-box figure{
  position: relative;
  margin: 30px 0 30px 0;  
  z-index: 301;
}  

@media only screen and (min-width:768px) {
div.ttl-box figure{
  margin: 60px 0 60px 0;
  }
}

div.ttl-box figure img{
  display: block;
  width:100%;
  margin: 0 auto;
}

@media only screen and (min-width:768px) {
div.ttl-box figure img{
  display: block;
  width:95%;
  max-width: 620px;
  margin: 0 auto;
  }
}

div.ttl-box figure figucaption{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 25px;
  border: 1px solid #444;
  font-size:1.3rem;
  line-height: 1em;
  font-weight: 600;
  margin: 0 auto 30px auto;
}

@media only screen and (min-width:768px) {
div.ttl-box figure figucaption{
  width: 140px;
  height: 35px;
  font-size:1.5rem;
  line-height: 1em;
  margin: 0 auto 50px auto;
  }
}

#access div.ttl-box::after{
  content: "Access";	
}

#lifeinformation div.ttl-box::after{
  content: "Life";
  color: #EEE;
}

#plan div.ttl-box::after{
  content: "Plan";	
}

#model div.ttl-box::after{
  content: "Model";	  
  color: #EEE;
}

#equipment div.ttl-box::after{
  content: "Equipment";
}

#map div.ttl-box::after{
  content: "Map";  
  color: #EEE;
}

#model div.ttl-box h2{
  margin: 0 0 30px 0;
}
@media only screen and (min-width:768px) {
#model div.ttl-box h2{
  margin: 0 0 60px 0;
  }
}

/* font
========================================================================================================
*/

.font01{
	font-family: 'Noto Serif JP', serif;
}

.font02{
	font-family: 'Noto Sans JP', sans-serif;
}

.font-num{
  font-family: "Times New Roman", Times, "serif";
}

/* txt
========================================================================================================
*/

/* txt
========================================================================================================
*/

.txt-ss{
  font-size:1.3rem;
}

.txt-s{
  font-size:1.4rem;
}

.txt-m{
  font-size:1.8rem;
}

.txt-l{
  font-size:2.2rem;
}

.txt-red{
  color:#BF0000;
}

.txt-weight01{
  font-weight: 400;
}


/* caption
========================================================================================================
*/

.caption{
  display: none;
}

.outline .caption{
  display: block;
}

@media only screen and (min-width:900px) {
.caption{
  display: block;
  }
}

.caption{
  width: 95%;
  max-width: 1600px;
  margin: 30px auto 0 auto;
}

.caption li{
  position: relative;	
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  color: #666;
  line-height: 1.75em;
  padding: 0 0 0 15px;
  margin: 0 0 5px 0;
}

@media only screen and (min-width:900px) {
  .caption li{
  font-size: 1.2rem;
  }
}
.caption li::before{
  content: "※";
  position: absolute;
  top:0;
  left:0;    
}

.sp-caption{
  width:90%;
  margin: 0 auto 20px auto;
}

.sp-caption li{
  position: relative;	
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.1rem;  
  font-weight: 400;
  color: #666;
  line-height: 1.75em;
  padding: 0 0 0 15px;
  margin: 0 0 5px 0;
}

.sp-caption li::before{
  content: "※";
  position: absolute;
  top:0;
  left:0;    
}

.sp-caption li + li{
  margin: 15px 0;
}

.sp-bn{
  width:80%;
  margin: 0 auto;
}

.outline .sp-bn{
  width:80%;
  margin: 20px auto 0 auto;
}

.sp-bn img{
  display: block;
  width:100%;
}

@media only screen and (min-width:900px) {
.sp-caption{
  display: none;
  }
.sp-bn{
  display: none;
  }
}

/* btn
========================================================================================================
*/

.btn01{
  width:200px;
  height: 50px; 
  background: #20202F;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 1s;
}

.btn02{
  width:100%;
  height: 50px; 
  background: #20202F;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 1s;
}

.btn01 span{
  font-size: 1.6rem;
  color: #FFF;
}

.btn02 span{
  font-size: 1.6rem;
  color: #FFF;
}

.btn02 span span.txt-s{
	font-size: 1.3rem;
}

.btn01:hover,
.btn02:hover{
  background: #535362;
}

/* link
========================================================================================================
*/

/*-- hover-underline01 --*/

.hover-underline01{
  padding-bottom: .1em;
  background: linear-gradient(#000, #000) 0 100%/0 1px no-repeat;
  transition: background .8s;
  text-decoration: none;
}

.hover-underline01:hover {
  background-size: 100% 1px;
}

/*-- hover-underline02 --*/
.hover-underline02{
  padding-bottom: .2em;
  background: linear-gradient(#000, #000) 0 100%/0 1px no-repeat;
  transition: background .8s;
  text-decoration: none;
}

.hover-underline02:hover {
  background-size: 100% 1px;
}

/*-- hover-underline03 --*/
.hover-underline03{
  padding-bottom: .2em;
  background: linear-gradient(#FFF, #FFF) 0 100%/100% 1px no-repeat;
  transition: background .5s;
  text-decoration: none;
}

.hover-underline03:hover {
  background-size: 0 1px;
}

/*-- hover-underline04 --*/
.hover-underline04{
  padding-bottom: .2em;
  background: linear-gradient(#FFF, #FFF) 0 100%/0 1px no-repeat;
  transition: background .5s;
  text-decoration: none;
}

.hover-underline04:hover {
  background-size: 100% 1px;
}

/* disolay none
========================================================================================================
*/

/*-- 768以下 非表示--*/
@media only screen and (max-width:768px) { 
  .sm-hide{
	  display:none;	
   }
}

/*-- 1200以下 非表示--*/
@media only screen and (max-width:1200px) { 
  .sm-hide2{
	  display:none;	
   }
}

/*-- 768以上 非表示--*/
@media print, screen and (min-width:768px) {
  .lg-hide{
    display:none;	
  }
}

/*-- 1050以上 非表示--*/
@media print, screen and (min-width:1200px) {
  .lg-hide2{
	 display:none;	
  }
}