@charset "utf-8";
/* CSS Document */

#free_area a {text-decoration: none!important; font-weight: normal!important;}
.help_navi {margin-bottom: 5%;}	
.page_contents .help_navi li {border: none; float: left;}	
	
.help_navi ul {width: 100%; margin: auto;}
.help_navi li {width: 33.2%; padding: 0 0.5%;}
.help_navi li a {
	display: block;
	border: 1px solid #E0DFE3;
	margin-bottom: 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: none;
	color: #363636;
	text-align: center;
	font-weight: bold;
}	
	
.clearfix::after {clear: both; content: "."; display: block; font-size: 0; height: 0; visibility: hidden;}
.ht_wear {margin-bottom: 5%;}	
.ht_wear ul li img {width: 100%; max-width: 100%;}
.ht_wear ul li dt {margin-bottom: 5px;}
.ht_wear ul li dd {font-size: 12px; text-align: left; color: #333;}
.ht_wear ul li dd span {font-weight: bold; font-size: 14px;}
	
.Movie_area {width: 70%; margin: auto; padding: 1% 0;}	
.movie {position: relative; width: 100%; padding-top: 56.25%;}
.movie iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
.Movie_area .Mov_ttl {font-size: 12px; font-weight: bold; color: #706E6E; display: block; margin-top: 5px;}
	
/*================================================
 *  PC向けデザイン (ワイド)
 ================================================*/
@media print, screen and (min-width:1280px) {
}
/*================================================
 *  PC向けデザイン
 ================================================*/
@media print, screen and (min-width:980px) {
	.help_navi li a {
		font-size: 15px;
		padding: 8% 0;
		border-radius: 6px;
		width: 100%;
	}
	.ht_wear ul li {width: 24.3%; padding: 1%; display: inline-block; vertical-align: text-top; margin-bottom: 3%;}
	
	h3.secttl {font-size: 14px; font-weight: bold; color: #777777; text-align: left!important; padding-left: 2%; border: none!important; margin-bottom: 15px; background-color: #f8f6f3!important;}
	div.point {font-size: 18px; padding: 0 2%; background-color: #f8efe6; width: 14%; margin-bottom: 1%;}
	dl.blaze {margin-bottom: 50px;}
	dl.blaze dt {margin-bottom: 20px;}
	dl.blaze dt img {max-width: 640px; margin: auto;}
	dl.blaze dd {text-align: left; padding-left: 5%;}
	#free_area .ht_wear p {padding: 1% 0 0 2%!important; margin: 0!important;}
	.Pcn {display: none!important;}
}
/*================================================
 *  タブレット向けデザイン
 ================================================*/
/* スクロールバーを考慮して20px大きいサイズで切り替え */
@media screen and (min-width:768px) and ( max-width:979px) {
	#free_area a.anchor_link {font-size: 14px;}
	.help_navi li a {
		font-size: 15px;
		padding: 8% 0;
		border-radius: 6px;
		width: 100%;
	}
	.ht_wear ul li {width: 24.3%; padding: 1%; display: inline-block; vertical-align: text-top;}
	
	h3.secttl {font-size: 14px; font-weight: bold; color: #777777; text-align: left!important; padding-left: 2%; border: none!important; margin-bottom: 15px; background-color: #f8f6f3!important;}
	div.point {font-size: 16px; padding: 0 2%; background-color: #f8efe6; width: 15%;}
	dl.blaze {margin-bottom: 50px;}
	dl.blaze dt {margin-bottom: 20px;}
	dl.blaze dt img {max-width: 690px; margin: auto;}
	dl.blaze dd {text-align: left; padding-left: 3%;}
	#free_area .ht_wear p {padding: 1% 0 0 2%!important; margin: 0!important;}
	.Pcn {display: none!important;}
}
/*================================================
 *  スマートフォン向けデザイン
 ================================================*/
@media screen and (max-width:767px) {
	.sysItemCategoryPankuzu {padding: 2% 0}
	.page_box h2 {font-size: 14px!important;}
	.contents_box {padding: 0!important}
	.contents_box h3 {font-size: 12px!important;}
	.help_navi ul {width: 100%; margin: auto;}
	.help_navi ul li a {font-size: 10px;}
	.help_navi li {width: 50%; padding: 0 0.1%;}
	.help_navi li a {
		/*width: 100%;*/
		display: block;
		border: 1px solid #E0DFE3;
		padding: 6% 0;
		margin: 1px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-decoration: none;
	}	
	.help_navi ul li a {border-radius: 4px;}
	.ht_wear {width: 100%; margin: 0 auto 5%;}
	.ht_wear ul {padding: 0;}
	.ht_wear ul li {width: 32.3%; padding: 1%; display: inline-block; vertical-align: text-top; margin-bottom: 3%;}
	.ht_wear ul li img {width: 100%; max-width: 156px;}
	.ht_wear ul li dt {margin-bottom: 5px;}
	.ht_wear ul li dd {font-size: 8px!important;}
	.ht_wear ul li dd span {font-weight: bold; font-size: 10px;}
	
	h3.secttl {font-size: 12px; font-weight: bold; color: #777777; text-align: left!important; padding-left: 2%; border: none!important; margin-bottom: 15px; background-color: #f8f6f3!important;}
	div.point {font-size: 12px; padding: 0 2% 0 1%; background-color: #f8efe6; width: 20%; margin-bottom: 1%;}
	dl.blaze {margin-bottom: 50px;}
	dl.blaze dt {margin-bottom: 20px;}
	dl.blaze dt img {max-width: 100%; margin: auto; padding: 0 2%;}
	dl.blaze dd {text-align: left; padding-left: 3%; font-size: 10px;}
	#free_area .ht_wear p {padding: 1% 0 0 0!important; margin: 0!important; font-size: 10px;}
	.Spn {display: none!important;}
	p.inf {font-size: 10px!important;}
	
	h2.Mov_ttl {font-size: 14px;}
	.Movie_area {width: 90%; margin: 0 auto; float: none; padding: 2% 0;}
	
}