@charset "utf-8";

/**
 *
 *  通勤サイクリングの魅力
 *
 */



/*--------------------------------------------------------------------------
   Overwrite
---------------------------------------------------------------------------*/


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

/* ContCharm
-----------------------------------------------------------------*/
#ContCharm .inner{
	padding: 207px 15px 95px;
}
#ContCharm .intro{
	margin-bottom: 45px;	
}
#ContCharm .merit{
	margin-bottom: 60px;
}
#ContCharm .merit .txt-merit{
	margin-bottom: 30px;	
}
#ContCharm .merit .lead{
	margin: 65px 0 35px;
}
#ContCharm .merit .txt{
	font-size:1.6rem;
	line-height:2.3;
}

#ContCharm .reason{
	position: relative;
	padding: 40px 60px 50px 145px;	
	margin-bottom: 85px;
	background:#F5F5F0;
	border-radius:10px;
	box-shadow: 0px 5px 0 0 #B5AA9E;
}
#ContCharm .reason h3{
	position: absolute;
	left:30px;
	top:-42px;
}
#ContCharm .txt{
	font-size:1.6rem;
	line-height:2.3;	
}
#ContCharm .reason01 .txt,
#ContCharm .reason03 .txt{
	float: left;
	width: 375px;
	padding-top: 35px;	
}
#ContCharm .reason02 .txt{
	margin-bottom: 45px;	
}
#ContCharm .reason01 .pic,
#ContCharm .reason03 .pic{
	float: right;	
}
#ContCharm .reason02 .pic p+p{
	margin-top: 45px;
}
#ContCharm .reason02 .pic span{
	display:block;
	padding: 10px 45px 0 0;
	text-align:right;
	font-size:1.2rem;	
}
#ContCharm .method{
	margin-bottom: 105px;
}
#ContCharm .method h3{
	margin-bottom: 40px;	
}
#ContCharm .method .lead-txt,
#ContCharm .method .txt{
	font-size:1.6rem;
	line-height:2.3;
}
#ContCharm .method .lead-txt{
	margin-bottom: 45px;	
}
#ContCharm .method .txt-area{
	width: 455px;
	float: left;	
}
#ContCharm .method .txt-area p:last-child{
	margin-top: 50px;	
}
#ContCharm .method .pic{
	float: right;	
}
#ContCharm .method ol li{
	text-indent:-1em;
	padding-left: 1em;	
}
#ContCharm .method .note{
	padding-top: 20px;
	clear:both;
	font-size:1.2rem;
}

#ContCharm .stage{
	margin-bottom: 95px;	
}
#ContCharm .stage .txt-area{
	float: left;
	width: 435px;
	padding-top: 5px;
	font-size:1.6rem;
	line-height:2.3;
}
#ContCharm .stage .txt-area p{
	margin-top: 45px;	
}
#ContCharm .stage .pic{
	float: right;	
}

#ContCharm .check{
	position: relative;
	width: 860px;
	margin: 0 auto;
	padding: 35px 45px;
	background:url(../images/cycling/charm/bg_check.png);
	border-radius:8px;
		
}
#ContCharm .check .ico{
	position: absolute;
	left:18px;
	top:-26px;
}
#ContCharm .check h4{
	margin-bottom: 10px;
	font-size:2rem;
	color:#32B166;
}
#ContCharm .check .txt{
	font-size:1.6rem;
	line-height:2em;
	margin-bottom: 20px;
}
#ContCharm .check .btn{
	width: 365px;
}
#ContCharm .check .btn a{
	background:#FFF;
	font-size:1.6rem;
	text-align:left;
	padding: 15px 0 15px 30px;
	font-weight:bold;
}

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

/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/
/* ContCharm
-----------------------------------------------------------------*/
#ContCharm .inner{
	padding: 30px 15px 45px;
}
#ContCharm .intro{
	margin-bottom: 25px;	
}
#ContCharm .merit{
	margin-bottom: 30px;
}
#ContCharm .merit .txt-merit{
	margin-bottom: 24px;	
}
#ContCharm .merit .lead{
	margin: 35px 0 20px;
}
#ContCharm .merit .txt{
	font-size:1.3rem;
	line-height:1.8;
}

#ContCharm .reason{
	position: relative;
	padding: 12px 12px 22px;	
	margin-bottom: 23px;
	border-radius:8px;
	box-shadow: 0px 3px 0 0 #B5AA9E;
}
#ContCharm .reason03{
	margin-bottom: 50px;	
}
#ContCharm .reason h3{
	position: static;
	margin-bottom: 10px;
}
#ContCharm .txt{
	font-size:1.3rem;
	line-height:1.8;	
}
#ContCharm .reason01 .txt,
#ContCharm .reason03 .txt{
	float: none;
	width: auto;
	padding-top: 0;	
	margin-bottom: 20px;
}
#ContCharm .reason02 .txt{
	margin-bottom: 15px;	
}
#ContCharm .reason01 .pic,
#ContCharm .reason03 .pic{
	float: none;	
}
#ContCharm .reason02 .pic p+p{
	margin-top: 25px;
}
#ContCharm .reason02 .pic span{
	padding: 5px 10px 0 0;
	font-size:1.1rem;	
}
#ContCharm .method{
	margin-bottom: 50px;
}
#ContCharm .method h3{
	margin-bottom: 20px;	
}
#ContCharm .method .lead-txt,
#ContCharm .method .txt{
	font-size:1.3rem;
	line-height:1.8;
}
#ContCharm .method .lead-txt{
	margin-bottom: 20px;	
}
#ContCharm .method .txt-area{
	width: auto;
	float: none;	
}
#ContCharm .method .txt-area p:last-child{
	margin-top: 20px;	
}
#ContCharm .method .pic{
	float: none;
	margin-top: 20px;	
}
#ContCharm .method .note{
	padding: 5px 10px 0;
	font-size:1.1rem;
	line-height:1.5em;
}

#ContCharm .stage{
	margin-bottom: 60px;	
}
#ContCharm .stage .txt-area{
	width: auto;
	float: none;	
	padding-top: 0;
	font-size:1.3rem;
	line-height:1.8;
}
#ContCharm .stage .txt-area p{
	margin-top: 20px;	
}
#ContCharm .stage .pic{
	float: none;
	margin-top: 20px;	
}

#ContCharm .check{
	width: 100%;
	padding: 15px 25px;
	background:url(../images/cycling/charm/bg_check.png);
	background-size:10px 10px;
	text-align:center;
		
}
#ContCharm .check .ico{
	position: absolute;
	width: 69px;
	left:50%;
	top:-20px;
	margin-left: -34px;
}
#ContCharm .check h4{
	margin-bottom: 8px;
	font-size:1.4rem;
	line-height:1.6em;
}
#ContCharm .check .txt{
	font-size:1.2rem;
	line-height:1.8em;
	margin-bottom: 10px;
}
#ContCharm .check .btn{
	width: 235px;
	margin: 0 auto;
}
#ContCharm .check .btn a{
	font-size:1.2rem;
	text-align:center;
	padding: 10px 0;
}
}