@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　zeh-m
 * 
 */

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/
.bg-wrap{
	background-image: url(../img/common/ft_bg_pc.jpg);
	background-color: #E6E6E6;
}
.page-notes li{
	text-indent: -1.5em;
	padding-left: 1.5em;
}
.page-notes a:hover{
  text-decoration: underline;
}
.txt{
	font-size: 1.6rem;
	letter-spacing: .1em;
}


/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

/* intro
-----------------------------------------------------------------*/
.intro{
  padding: 180px 0;
	background: url(../img/common/cont_upper_bg.png) no-repeat left top var(--light);
	background-size: 100% auto;
	text-align: center;
}
.intro h2{
  margin-bottom: 60px;
	font-size: 4.5rem;
	font-weight: 400;
	letter-spacing: .2em;
}
.intro .txt-sec-lead{
  margin-bottom: 50px;
}
.intro .txt{
	font-size: 2rem;
	line-height: 2.2;
	letter-spacing: .4em;
}

/* zeh
-----------------------------------------------------------------*/
.zeh{
  padding: 0 0 80px;
	background: url(../img/zeh-m/sec_bg_pc.jpg) no-repeat left top 150px var(--light);  
}
.zeh .logo{
  margin-bottom: 50px;
  text-align: center;
  line-height: 1; 
}
.zeh .logo img{
	max-width: 250px;
}
.zeh h2{
	margin-bottom: 60px;
}
.zeh h2 .en{
	text-transform: none;
}
.zeh .txt-sec-lead{
  margin-bottom: 100px;
	font-size: 2.6rem;
}
.ttl-topic{
	margin-bottom: 45px;
	text-align: center;
	font-size: 2.6rem;
	font-weight: 400;
	letter-spacing: .2em;
}
.ttl-topic .num{
	display: block;
	margin-bottom: 30px;
	font-size: 1.6rem;
	letter-spacing: .04em;
	line-height: 1;
	color: var(--gold);
}
.ttl-topic .num strong{
	display: block;
	margin-top: 5px;
	font-size: 3rem;
	font-weight: 400;
}
.ttl-topic .num::after{
	display: block;
	margin-top: 10px;
	content: "|";
	font-size: 2rem;
}
.ttl-topic + .txt{
	max-width: 800px;
	margin: 0 auto 80px;
	text-align: left;
}
.zeh .zeh-cont + .zeh-cont{
  margin-top: 100px;  
}
.zeh .graph-area{
  position: relative;
	max-width: 1000px;
	margin-inline: auto;
}
.zeh .graph-area .swipe{
  display: none;
}

.zeh .standard{
  max-width: 1000px;
  margin: 100px auto 0;
  padding: 80px 20px;
  background: var(--light);
}
.zeh .standard h4{
	max-width: 740px;
  margin: 0 auto 20px;
	padding-bottom: 15px;
  border-bottom: 1px solid var(--dark);
  text-align: center;
  font-size: 2rem;
	letter-spacing: .2em;
  font-weight: normal;  
}
.zeh .standard .txt{
	max-width: 740px;
  margin: 0 auto 40px;
  text-align: left;
	letter-spacing: .2em; 
}
.zeh .standard .txt sup{
  display: inline-block;
  transform: translateY(-20%);
  font-size: 80%;  
}
.zeh .standard  .pic{
  text-align: center;
}


/* merit
-----------------------------------------------------------------*/
.merit{
  padding: 0 0 100px; 
}
.merit h2{
  margin-bottom: 60px;
	font-size: 2.6rem;
	line-height: 2;
	letter-spacing: .2em;
}
.merit-list{
  max-width: 1000px;
  margin-inline: auto;
  padding: 80px 20px;
  background: var(--light);
}
.merit-list li:nth-child(n+2){
	margin-top: 80px;
}
.merit-list h3{
	max-width: 740px;
  margin: 0 auto 40px;
  padding: 20px;
  background:#78979d;
  text-align: center;
  color: var(--light);
  font-size: 2.6rem;
  font-weight: normal;
  line-height: 1.2;
}
.merit-list .thumb{
  position: relative;
	max-width: 740px;
	margin-inline: auto;  
}
.merit-list .thumb .caption{
  position: absolute;
  right: 10px;
  bottom: 5px;
}
.merit-list .txt{
  max-width: 740px;
  margin: 0 auto 40px;
	letter-spacing: .2em;
}
.merit-list .note{
	max-width: 740px;
  margin: 5px auto 0;
	text-align: right;
	font-size: 0.8rem;
}


/* roan
-----------------------------------------------------------------*/
.roan{
  padding: 0 0 180px;  
}
.roan h2{
  margin-bottom: 80px;  
}
.roan-cont + .roan-cont{
  margin-top: 80px;  
}
.roan-cont .graph-area{
  position: relative;  
}
.roan-cont .graph{
  text-align: center;  
}
.roan-cont .graph-area .swipe{
  display: none;  
}
.roan-cont .txt-area{
  max-width: 740px;
  margin: 80px auto 0;
  text-align: center;
}
.roan-cont .txt-area h3{
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--dark);
  font-weight: normal;
  font-size: 2rem; 
	letter-spacing: .2em;  
}
.roan-cont .txt-area .txt{
	letter-spacing: .2em; 
}
.flat35{
	max-width: 1000px;
	margin-inline: auto;
  padding: 80px 8%;
  background: var(--light); 
}
.flat35 h4{
	max-width: 730px;
  margin: 0 auto 40px;
  padding: 15px;
  background:#78979d;
  text-align: center;
  color: var(--light);
  font-size: 2.6rem;
  font-weight: normal;
  line-height: 1.6; 
}
.flat35 h4 + .txt{
	max-width: 730px;
  margin: 0 auto 40px;
}
.flat35 sup{
  display: inline-block;
  padding: 0 2px;
  transform: translateY(-20%);
  font-size: 80%;  
}
.roan-cont sup{
  display: inline-block;
  padding: 0 2px;
  transform: translateY(-20%);
  font-size: 80%;  
}
















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

	.txt{
		font-size: 1.3rem;
	}

/* intro
-----------------------------------------------------------------*/
	.intro{
		padding: 60px 0 40px;
	}
	.intro h2{
		margin-bottom: 30px;
		font-size: 2.4rem;
	}
	.intro .txt-sec-lead{
		margin-bottom: 20px;
	}
	.intro .txt{
		font-size: 1.3rem;
		line-height: 2;
	}


/* zeh
-----------------------------------------------------------------*/
	.zeh{
		padding: 40px 0 20px;
		background: url(../img/zeh-m/sec_bg_sp.jpg) no-repeat left top 300px var(--light);
		background-size: 100% auto;  
	}
	.zeh h2 {
    margin-bottom: 30px;
	}
	.zeh .logo {
		margin-bottom: 15px;
	}
	.zeh .logo img{
		max-width: 140px;
	}
	.zeh .txt-sec-lead {
    margin-bottom: 20px;
    font-size: 1.8rem;
	}
	.ttl-topic{
		margin: 0 auto 20px;
		font-size: 1.8rem;
	}
	.ttl-topic .num{
		margin-bottom: 10px;
		font-size: 1.3rem;
	}
	.ttl-topic .num strong{
		margin-top: 3px;
		font-size: 2.4rem;
	}
	.ttl-topic .num::after{
		margin-top: 5px;
		font-size: 1.3rem;
	}
	.ttl-topic + .txt {
    margin: 0 auto 30px;
	}	
	.zeh .zeh-cont,
	.zeh .zeh-cont + .zeh-cont{
		margin-top: 50px;  
	}
	.zeh .graph-area{
		width: calc(100% + 30px);
		overflow: auto;
		padding-bottom: 15px;
		margin-bottom: 20px;  
	}
	.zeh .graph-area .swipe{
		display: block;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		pointer-events: none;
	}
	.zeh .graph-area .graph{
		width: 600px;
		margin-right: 30px;
	}
	.zeh .txt{
		line-height: 2;
		font-size: 1.3rem;      
	}
	.zeh .standard{
		margin-top: 0;
		padding: 30px 20px;
	}
	.zeh .standard h4{
		margin: 0 auto 15px;
		padding-bottom: 5px;
		font-size: 1.6rem;
	}
	.zeh .standard .txt{
		margin: 0 auto 20px;
		text-align: left;
		letter-spacing: .2em;
		font-size: 1.2rem; 
	}
	.zeh .standard .txt sup{
		display: inline-block;
		transform: translateY(-20%);
		font-size: 80%;  
	}
	.zeh .standard  .pic{
		text-align: center;
	}


/* merit
-----------------------------------------------------------------*/
	.merit{
		padding: 40px 0 20px;  
	}
	.merit h2 {
    margin-bottom: 30px;
    font-size: 2rem;
	}
	.merit-list{
		padding: 25px 20px 35px;
	}
	.merit-list li:nth-child(n+2){
		margin-top: 30px;
	}
	.merit-list h3{
		margin-bottom: 20px;
		padding: 15px;
		font-size: 1.6rem;
	}
	.merit-list .thumb .caption{
		right: 5px;
	}
	.merit-list .txt{
		margin-bottom: 15px;
		font-size: 1.2rem;
	}


/* roan
-----------------------------------------------------------------*/
	.roan{
		padding: 40px 0;  
	}
	.roan h2{
		margin-bottom: 40px;  
	}
	.roan-cont + .roan-cont{
		margin-top: 50px;  
	}
	.roan-cont .graph-area{
		width: calc(100% + 30px);
		overflow: auto;
		padding-bottom: 15px;		
	}
	.roan-cont .graph-area .swipe{
		display: block;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		pointer-events: none;		  
	}
	.roan-cont .graph-area .graph img{
		max-width: none;
		width: auto;
		height: 160px;
		margin-right: 30px;
	}
	.roan-cont .txt-area{
		margin: 20px auto 0;
	}
	.roan-cont .txt-area h3{
		padding-bottom: 5px;
		margin-bottom: 15px;
		border-bottom: 1px solid var(--dark);
		font-size: 1.6rem;
		line-height: 1.5;   
	}
	.roan-cont .txt-area .txt{
		font-size: 1.3rem; 
	}
	.flat35{
		padding: 25px 20px 35px;
	}
	.flat35 h4{
		margin-bottom: 15px;
		font-size: 1.5rem;
	}
	.flat35 h4 + .txt{
		margin-bottom: 30px;
		text-align: center; 
		font-size: 1.2rem; 
	}
	.flat35 sup{
		transform: translateY(-15%);
	}
	.flat35 .graph-area{
		width: calc(100% + 20px);
	}
	.flat35 .graph-area .graph img{
		height: 220px;
		margin-right: 20px;
	}
	.flat35 .note{
		margin-top: 30px;
		font-size: 1.1rem;
		text-align: justify;  
	}
	.flat35 .note a:hover{
		text-decoration: underline;
	}


}