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

/* ウィッグコラム */
#free_area {margin-top: 5%!important;}
div.page_title h1 {border: none!important;}
.ttl_no span {background-color: #c6b78e; color: #fff; padding: 1%; font-weight: bold;}
.page_box h2.decol {border: none!important; background-color: #f8efe6; border-radius: 0!important;}
.page_box h2.deco_none  {background-color: inherit; font-weight: normal!important; border: none;}
#free_area h2 {text-align: left!important;}
.common_btn a {text-decoration: none!important;}
.Pic_tx_fl {margin: 11% 0%; border: 1px solid #ccc; padding: 3% 2%;}
.Pic_tx_fl dl dt {float: left; width: 24%; padding-right: 1%;}
.Pic_tx_fl dl dt figure {text-align: center;}
.Pic_tx_fl dl dt img {vertical-align: text-top;}
.Pic_tx_fl dl dd {float: right; width: 74%; line-height: 2em; text-align: left;}
#WigCol_sublist {margin-bottom: 8%;}
#free_area p {margin-bottom: 2em;}
.contents_box h3 {border: none!important; border-radius: 0!important; border-left: 8px solid #faaeae!important; text-align: left!important;}
#free_area .section_title h4 {border-color: #fde4df!important; background-color: #fde4df!important; text-align: left!important;} 
.listmk {text-align: left; padding-left: 1em;}
.listmk_dia {color: #faaeae;}

.column_TableArea {margin-bottom: 10%; margin-top: 5%;}
.column_TableArea table {width: 100%; margin-bottom: 10px;}
.column_TableArea table th {
	padding: 10px;
	text-align: left;
	vertical-align: top;
	width: 16%;
	border: 1px solid #cdcdcd;
	background-color: #fde4df;
	color: #333333;
	white-space: nowrap;
	text-align: center;
	vertical-align: middle;
}
.column_TableArea table td {
	text-align: left;
	padding: 10px;
	border: 1px solid #cdcdcd;
	font-weight: normal;
}

/* リライト202510 */
.p_link {
	text-align: left;
	padding: 1.5rem;
	font-size: 1.4rem;
}	
.p_link li {line-height: 2;}		
.border_conts {
	border: 1px solid #faaeae;
	padding: 1rem 0.2rem;
	margin-bottom: 3rem;
}						
.recom_items {
	display: flex;
	flex-wrap: nowrap;
	gap: 0 20px;
	width: 100%;
	box-sizing: border-box;
	margin: auto;
	padding: 1.5rem;
}
.recom_items .recom_items_dt {
	flex-basis: calc(50% - 10px);
	box-sizing: border-box;
}	
.recom_items .recom_items_dt img {
	width: 100%;
	max-width: 280px;
	text-align: center;
	margin-bottom: 10px;
}
.recom_items .recom_items_dt .ft_m {
	font-size: 12px;
}
.border_conts_half {
	border: 1px solid #faaeae;
	padding: 1rem 0.2rem;
	width: 100%;
	max-width: 400px;
	margin: 0 auto 3rem;
	box-sizing: border-box;
}						
.recom_item_sgle {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;	
	flex-wrap: nowrap;
	width: 100%;
	box-sizing: border-box;
	margin: auto;
	padding: 1.5rem;
}
.recom_item_sgle .recom_items_dt {
	flex-basis: calc(100%);
	box-sizing: border-box;
}	
.recom_item_sgle .recom_items_dt img {
	width: 100%;
	max-width: 280px;
	text-align: center;
	margin-bottom: 10px;
}
.recom_item_sgle .recom_items_dt .ft_m {
	font-size: 12px;
}	
	
.recom_items_img {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;	
	flex-wrap: wrap;
	width: 100%;
	box-sizing: border-box;
	margin: auto;
	padding: 1.5rem;
	gap: 15px 0;
}
.recom_items_img .recom_items_dt {
	flex-basis: calc(50% - 10px);
	box-sizing: border-box;
}	
.recom_items_img .recom_items_dt img {
	width: 100%;
	max-width: 280px;
	text-align: center;
	margin-bottom: 10px;
}
ul.icon {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;	
	flex-wrap: wrap;
	width: 100%;
	box-sizing: border-box;
}
ul.icon li {
	margin: 0.6rem;
	font-size: 13px;
	font-weight: bold;
}
ul.icon li span {
	background-color: #f8efe6;
	padding: 0.2rem 0.8rem;
	color: #666;
	border-radius: 8px;
	display: block;
}
.bg_color_howto {
	background-color: #f8efe6;
	padding: 0.5% 1.5%;
	margin-bottom: 3rem;
}
.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;
}

/* 一覧デザイン変更 */
.h_ttl_deco {
	text-align: center;
	background-color: #FFFFFF;
	border: 1px solid #D6D6D6;
	padding: 10px;
	font-size: 123.1%;
	font-weight: bold;
	border-radius: 5px;
	margin: 3% auto;
}
#column {margin-bottom: 5%;}
#column #column_list {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	gap: 10px 10px;
	padding: 2%;
	justify-content: center;
	-webkit-align-items: center;
    align-items: center;
}
#column #column_list li {
	width: calc(100% / 2 - 5px);
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 3px;
	text-align: left;
}
#column #column_list li:hover {
	border: 1px solid #999;
	color: #000;
	box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1);
}	
#column #column_list li a {
	text-decoration: none;
	display: block;
	width: 100%;
	padding: 3%;
	font-weight: normal;
}	
#column_list li a img {
	width: 100%;
	height: 140px;
	object-fit: cover;
	margin-bottom: 8px;
	border-radius: 2px;
}
#column_list li a div {font-size: 1.3rem;}
	
/*================================================
 *  PC向けデザイン
 ================================================*/
@media print, screen and (min-width:1121px) {
	div.page_title h1 { font-size: 22px!important;}
	#free_area p {font-size: 16px!important;}
	.ttl_no span {font-size: 14px;}
	.common_btn a {max-width: 500px!important;}
	.Pic_tx_fl dl dd {font-size: 14px;}
	.listmk li {font-size: 16px;}
	.column_TableArea table {font-size: 15px;}
	.recom_item_sgle .recom_items_dt img {max-width: 360px;}
}
/*================================================
 *  タブレット向けデザイン
 ================================================*/
/* スクロールバーを考慮して20px大きいサイズで切り替え */
@media screen and (min-width:768px) and ( max-width:1120px) {
	div.page_title h1 { font-size: 22px!important;}
	#free_area p {font-size: 14px!important;}
	.ttl_no span {font-size: 12px;}
	.Pic_tx_fl {width: 92%; margin: 10% auto;}
	.Pic_tx_fl dl dd {font-size: 12px;}
	#free_area .section_title h4 {padding: 0.5em!important;}
	.listmk li {font-size: 14px;}
	.column_TableArea table {font-size: 15px;}
	.recom_item_sgle .recom_items_dt img {max-width: 320px;}
}
/*================================================
 *  スマートフォン向けデザイン
 ================================================*/
@media screen and (max-width:767px) {
	div.page_title h1 { font-size: 16px!important;}
	#free_area p {font-size: 14px!important;}
	.ttl_no span {font-size: 10px;}
	.Pic_tx_fl {width: 92%; margin: 10% auto;}
	.Pic_tx_fl dl dd {font-size: 11px;}
	#free_area .section_title h4 {padding: 0.5em!important;}
	.listmk li {font-size: 14px;}
	.column_TableArea {margin-bottom: 12%;}
	.column_TableArea table td {font-size: 11px;}
	br.Mb_none {display: none!important;}
	.Mb_fts {font-size: 14px!important;}
	
	/* リライト202510 */
	.p_link li {margin-bottom: 5px;}
	.border_conts .listmk {padding-left: 0.2em;}
	.recom_items {display: inherit;}
	.recom_items .recom_items_dt {margin-bottom: 20px;}
	.recom_items_img {
		padding: 1.5rem 0;
		gap: 15px 5px;
	}
	.recom_items_img .recom_items_dt .ft_s {font-size: 10px;}	
	.Movie_area {width: 90%; margin: 0 auto; float: none; padding: 2% 0;}
	
	/* 一覧デザイン変更 */
	#wigcolumn #column #column_list {gap: 10px 5px;}
	#wigcolumn #column #column_list li {width: calc(100% / 2 - 4px); box-sizing: border-box;}
	#column_list li a img {height: 80px;}
	#column_list li a div {font-size: 10px;}
}