@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　merit
 * 
 */

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/




/*--------------------------------------------------------------------------
   Animation
---------------------------------------------------------------------------*/

.fade,.fade01,.fade02,.fade03,.fade04,
.delay01,.delay02,.delay03,.delay04,.delay05 {
	transition: 1.3s;
}
.fade {
	opacity: 0;
	transform: translate(0,0); 
}
.fade01{
	opacity: 0;
	transform: translate(0,50px); 
}
 .fade02 {
	opacity: 0;
	transform: translate(0,-50px); 
}
.fade03 {
	opacity: 0;
	transform: translate(-50px,0); 
}
.fade04 {
	opacity: 0;
	transform: translate(50px,0); 
}
.delay01{
	transition-delay: 0.3s;		
}
.delay02{
	transition-delay: 0.6s;		
}
.delay03{
	transition-delay: 0.9s;		
}
.delay04{
	transition-delay: 1.2s;		
}
.delay05{
	transition-delay: 1.5s;		
}

.mv {
	opacity: 1;
  -webkit-filter: blur(0);
	filter: blur(0);
	transform: translate(0,0) scale(1,1); 
}


/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/
.inner{
  max-width: 1290px;
  margin: 0 auto;
  padding: 0 20px; 
}
.layout-box{
  display: flex;
  justify-content: space-between;  
}
.merit .en{
  letter-spacing: .04em;
  font-family: "EB Garamond", serif;  
}
.sp{
	display: none;
}


/* kv
-----------------------------------------------------------------*/
.kv{
  position: relative;
  background: #fff;
	overflow: hidden;  
}
.kv h1{
  position: absolute;
  left: 0;
  top: 50%;
	z-index: 10;
	transform: translateY(-50%);
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 3.5rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-shadow: 2px 2px 10px rgba(0,0,0,.3);  
}
.kv .caption{
  position: absolute;
  left: 15px;
  bottom: 10px;
  font-size: 1.3rem;
  line-height: 1; 
}
.kv .pic{
	transform: scale(1.1);
	transition: 3s;
}
.kv .pic.mv{
	transform: scale(1);
}

/* merit
-----------------------------------------------------------------*/
.merit{
  padding: 140px 0 200px;
  background: #fff;
}
.merit h2{
  margin-bottom: 60px;
  font-size: 3rem;
  line-height: 1.8;
  text-align: center;
}
.merit .double-certificate{
  max-width: 954px;
  margin: 0 auto 140px;  
}

.merit-item-box + .merit-item-box{
  margin-top: 190px;  
}
.merit-item-hd{
  display: flex;
	flex-direction: row-reverse;
  justify-content: space-between;
  margin-bottom: 50px;    
}
.merit-item-hd .ttl-area{
  width: 48%;
}
.merit-item-hd .ttl-area h3{
  margin-bottom: 40px;
}
.merit-item-hd .ttl-area .txt{
  padding-left: 20%;
  font-size: 1.8rem;
  line-height: 1.8;
}
.merit-item-hd .ttl-area .notes{
	padding-left: 20%;
}
.merit-item-hd .pic{
  position: relative;
  width: 48%;  
}
.merit-item-hd .pic .caption{
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 1.2rem;
  line-height: 1;
  color: #fff;   
}
.merit-item-box table{
  width: 100%;
  porder-collapse: collapse;
  text-align: center;  
}
.merit-item-box table tr{
  border-bottom: 1px solid #9fa0a0;  
}
.merit-item-box table th,
.merit-item-box table td{
  vertical-align: middle;
  padding: 10px;
  font-size: 1.8rem;
  line-height: 1.4;
}
.merit-item-box table tr th:nth-child(n+2),
.merit-item-box table tr td:nth-child(n+2){
  border-left: 1px dotted #9fa0a0;  
}
.merit-item-box table th{
  background: #e6e6e6;  
}
.merit-item-box table .feature td{
  background: #ffe55f;  
}
.merit-item-box table .feature .house{
  font-size: 2.2rem;  
}
.merit-item-box table .feature .price{
  font-size: 4.5rem;
  color: #8f0108;
}
.merit-item-box table .feature .price small{
  font-size: 3.5rem; 
}
.merit-item-box table sup{
  display: inline-block;
  transform: translateY(-30%);
  font-size: 60%;
}
.merit-item-box table .end{
  border-top: 1px solid #9fa0a0; 
}
.merit-item-box table .end th{
  font-size: 2.3rem;
  border-bottom: none;  
}
.merit-item-box table .end .note{
  margin-top: 5px;
  font-size: 1.3rem;  
}
.merit-item-box .notes{
  margin-top: 20px;
  font-size: 1.1rem;  
}
.merit-item-box .notes li{
  text-indent: -1em;
  padding-left: 1em; 
	font-size: 1.1rem;  
}
.merit-item-box .txt-merit{
  margin-top: 40px;
  padding: 20px;
  background : linear-gradient(135deg, rgba(0, 113, 171, .2) 0%, rgba(0, 82, 146, .2) 100%);
  text-align:center;
  font-size: 3.2rem;
  font-weight: 500;
  color: #00598a;  
}
.merit-item-box .flat35{
	display: flex;
	margin: 50px 0 70px;
}
.merit-item-box .flat35 > div{
	position: relative;
	width: calc(100% /3);
	padding: 0 3% 0 2%;
	border-left: 1px solid #231815;
}
.merit-item-box .flat35 > div:nth-child(3){
	padding-right: 0;
}
.merit-item-box .flat35 dt{
	margin-bottom: 20px;
	font-size: 2rem;
	color: #005293;
}
.merit-item-box .flat35 dd{
	font-size: 1.7rem;
}
.merit-item-box .flat35 .note{
	position: absolute;
	right: 0;
	bottom: -5px;
	transform: translateY(100%);
	font-size: 1.2rem;	
}
.merit-item-box .special-case{
	display: flex;
	border-right: 1px solid #9FA0A0;
}
.merit-item-box .special-case p{
	display: flex;
	justify-content: center;
	align-items: center;
	border-left: 1px solid #9FA0A0;
	line-height: 1;
}
.merit-item-box .special-case .ordinary{
	width: 37.6%;
	padding: 30px 20px;
	font-size: 2.4rem;
}
.merit-item-box .special-case .ordinary .price{
	margin-left: 8px;
	font-size: 5rem;
}
.merit-item-box .special-case .ordinary .price small{
	font-size: 2.8rem;
}
.merit-item-box .special-case .special{
	width: 62.4%;
	padding: 15px 20px;
	background: #FFE55F;
	color: #8F0108;
	font-size: 2.7rem;
}
.merit-item-box .special-case .special .price{
	margin-left: 8px;
	font-size: 7rem;
}
.merit-item-box .special-case .special .price small{
	font-size: 4rem;
}
.merit-item-box .graph-list{
	display: flex;
	justify-content: space-between;
	margin-top: 50px;
}

.merit-item-box .graph-list li{
	width: 48%;	
}





























/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {

.pc{
	display: none;
}
.sp{
	display: block;
}
img.sp,
br.sp{
	display: inline;
}


/* kv
-----------------------------------------------------------------*/
	.kv h1{
		font-size: 2.2rem;
	}
	.kv .caption{
		left: 10px;
		font-size: 1rem;
	}


/* merit
-----------------------------------------------------------------*/
	.merit{
		padding: 40px 0 70px;
	}
	.merit h2{
		margin-bottom:20px;
		font-size: 2rem;
	}
	.merit .double-certificate{
		max-width: 350px;
		margin: 0 auto 50px;  
	}
	
	.merit-item-box + .merit-item-box{
		margin-top: 70px;  
	}
	.merit-item-hd{
		display: block;
		margin-bottom: 20px;    
	}
	.merit-item-hd .ttl-area{
		width: 100%;
	}
	.merit-item-hd .ttl-area h3{
		margin-bottom: 15px;
	}
	.merit-item-hd .ttl-area .txt{
		padding-left: 0;
		font-size: 1.3rem;
		text-align: justify;
	}
	.merit-item-hd .ttl-area .notes{
		padding-left: 0;
	}
	.merit-item-hd .pic{
		width: 100%;  
	}
	.merit-item-hd .pic .caption{
		right: 10px;
		bottom: 10px;
		font-size: 1rem;   
	}
	.merit .table-area{
		width: calc(100% + 20px);
		overflow: auto;
	}
  .merit .table-area._noscroll{
    width: 100%;
    overflow: visible;  
  }
	.merit-item-box table{
		width: 800px;
		margin-right: 20px;
	}
	.merit-item-box .table02{
		width: 100%;
	}
	.merit-item-box table th,
	.merit-item-box table td{
		padding: 10px;
		font-size: 1.2rem;
	}
	.merit-item-box table .feature .house{
		font-size: 1.4rem;  
	}
	.merit-item-box table .feature .price{
		font-size: 3rem;
	}
	.merit-item-box table .feature .price small{
		font-size: 2.5rem; 
	}
	.merit-item-box table .end th{
		font-size: 1.5rem;
	}
	.merit-item-box table .end .note{
		font-size: 1rem;  
	}
	.merit-item-box .notes{
		margin-top: 10px;
		font-size: 1rem;  
	}
	.merit-item-box .notes li{
		font-size: 1rem;  
	}
	.merit-item-box .txt-merit{
		margin-top: 15px;
		padding: 15px 10px;
		text-align:center;
		font-size: 1.5rem;
	}
	.merit-item-box .flat35{
		display: block;
		margin: 25px 0 30px;
	}
	.merit-item-box .flat35 > div{
		width: 100%;
		padding: 0 0 0 15px;
		box-sizing: border-box;
	}
	.merit-item-box .flat35 > div:nth-child(n+2){
		margin-top: 15px;
	}
	.merit-item-box .flat35 dt{
		margin-bottom: 5px;
		font-size: 1.4rem;
	}
	.merit-item-box .flat35 dd{
		font-size: 1.2rem;
		text-align: justify;
	}
	.merit-item-box .flat35 .note{
		position: static;
		transform: none;
		margin-top: 5px;
		font-size: 1rem;
		text-indent: -1em;
		padding-left: 1em;	
	}
	.merit-item-box .special-case{
		display: block;
		border-right: none;
	}
	.merit-item-box .special-case p{
		border-right: 1px solid #9FA0A0;
	}
	.merit-item-box .special-case .ordinary{
		width: auto;
		padding: 15px 10px;
		font-size: 1.7rem;
	}
	.merit-item-box .special-case .ordinary .price{
		margin-left: 5px;
		font-size: 3.4rem;
	}
	.merit-item-box .special-case .ordinary .price small{
		font-size: 1.9rem;
	}
	.merit-item-box .special-case .special{
		width: auto;
		margin-top: 5px;
		padding: 10px;
		font-size: 1.6rem;
	}
	.merit-item-box .special-case .special .price{
		margin-left: 5px;
		font-size: 4.5rem;
	}
	.merit-item-box .special-case .special .price small{
		font-size: 2.5rem;
	}
	.merit-item-box .graph-list{
		display: block;
		margin-top: 10px;
	}
	
	.merit-item-box .graph-list li{
		width: auto;	
	}
	.merit-item-box .graph-list li:nth-child(n+2){
		margin-top: 10px;
	}

	.sp-notes{
		margin-top: 50px;
	}
	.sp-notes > div + div{
		margin-top: 5px;
	}
	.sp-notes dt{
		font-size: 1.1rem;
	}
	.sp-notes ul li{
		font-size: 1rem;
		text-align: justify;	
	}
}