@charset "utf-8";


@media all and (min-width: 0) and (max-width: 736px) {
	.topBox h2 img {
		width: 60%;
	}
	
	#main .text {
		margin-bottom: 13px;
		line-height: 1.5;
		text-align: left;
	}
	
	#main .note {
		font-size: 10px;
	}
	
	#main .spSubBox {
		display: block;
	}
	
	#main .spSubBox .title {
		margin-bottom: 15px;
		padding: 5px 0 7px;
		font-weight: bold;
		text-align: center;
		line-height: 1.4;
		border: 1px solid #CCC;
	}
	
	#main .spSubBox .title span {
		margin: 0 auto 5px;
		padding-bottom: 2px;
		width: 200px;
		display: block;
		border-bottom: 2px dotted #EEE;
	}
	
	#main .spSubBox .title01 {
		padding: 30px 0 35px;
	}
	
	#main .spSubBox .title01 span {
		width: auto;
		border-bottom: none;
	}
	
	#main .spSubBox .title01 span a {
		text-decoration: underline;
	}
	
	#main .spSubBox .txtUl {
		margin-bottom: 15px;
		position: relative;
	}
	
	#main .spSubBox .txtUl > li {
		padding: 6px 1%;
		width: 45.5%;
		float: left;
		display: table;
		color: #FFF;
		background: url(../../img/flow/txt_bg01.gif) repeat;
		position: relative;
	}
	
	#main .spSubBox .txtUl > li:nth-child(1),
	#main .spSubBox .txtUl > li:nth-child(2) {
		margin-bottom: 15px;
	}
	
	#main .spSubBox .txtUl > li:nth-child(2n) {
		float: right;
		background: url(../../img/flow/txt_bg02.gif) repeat;
	}
	
	#main .spSubBox .txtUl > li:before {
		margin-top: -15px;
		width: 12px;  
		height: 15px;
		background: url(../../img/flow/sp_arrow01.gif) no-repeat;
		background-size: 12px 15px;
		position: absolute;  
		top: 0;
		left: 50%; 
		content: "";
	}
	
	#main .spSubBox .txtUl > li:nth-child(2):before {
		background: url(../../img/flow/sp_arrow02.gif) no-repeat;
		background-size: 12px 15px;
	}
	
	#main .spSubBox .txtUl > li:nth-child(4):before {
		background: url(../../img/flow/sp_arrow02.gif) no-repeat;
		background-size: 12px 15px;
	}
	
	#main .spSubBox .txtUl > li:nth-child(3):after {
		margin-bottom: -15px;
		width: 12px;  
		height: 15px;
		background: url(../../img/flow/sp_arrow01.gif) no-repeat;
		background-size: 12px 15px;
		position: absolute;  
		bottom: 0;
		left: 50%; 
		content: "";
	}
	
	#main .spSubBox .txtUl > li:nth-child(4):after {
		margin-bottom: -15px;
		width: 12px;  
		height: 15px;
		background: url(../../img/flow/sp_arrow02.gif) no-repeat;
		background-size: 12px 15px;
		position: absolute;  
		bottom: 0;
		left: 50%; 
		content: "";
	}
	
	#main .spSubBox .txtUl > li .txtBox {
		display: table-cell;
		vertical-align: middle;
	}
	
	#main .spSubBox .txtUl > li .txtBox p {
		padding-bottom: 4px;
		font-size: 14px;
		font-weight: bold;
		text-align: center;
		line-height: 1.1;
	}
	
	#main .spSubBox .txtUl > li .txtBox p.nopd {
		padding-bottom:0;
	}
	
	
	#main .spSubBox .txtUl > li .txtBox p a {
		color: #FFF;
		text-decoration: underline;
	}
	
	#main .subBox .txtUl > li .txtBox p a:hover {
		text-decoration: none;
	}
	
	#main .spSubBox .txtUl > li .txtBox li {
		padding-left: 1em;
		text-indent: -1em;
		font-size: 11px;
		line-height: 1.4;
	}
	
	#main .spSubBox .textImg {
		margin-bottom: 15px;
		position: relative;
	}
	
	#main .spSubBox .textImg:before {
		margin-bottom: -15px;
		width: 12px;  
		height: 15px;
		background: url(../../img/flow/sp_arrow03.gif) no-repeat;
		background-size: 12px 15px;
		position: absolute;  
		bottom: 0;
		left: 50%; 
		content: "";
	}
	
	#main .spSubBox .textImg img {
		width: 100%;
	}
}