@charset "Shift_JIS";

/*
	================================================================================================
		support handycam enjoy css index.css
	================================================================================================
*/


/*===========================================
	会話形式で学ぶ！ ハンディカム豆知識
=============================================*/

ul.bnr_area {
	margin-left: 0!important;
}
	ul.bnr_area li {
	float: left;
	padding: 0;
	margin-right: 8px;
	margin-bottom: 1em;
	width: 360px;
	list-style: none outside none;
	margin-left: 1em\9;
}


/*===========================================
	アプリの使いかた
=============================================*/

#contents #app dl dt {
	width: 190px;
	text-align: right;
	float: left;
	margin: 0 0 30px 10px;
	padding: 10px 15px 0 0;
	border: solid #ccc 1px;	
	box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
	clear: both;
}
#contents #app dl dd {
	width: 490px;
	float:left;
	padding-top: 10px;
	margin-bottom: 30px;
}
.mq-show {
	display: none;
}

/*===========================================
	beans
=============================================*/

#contents #beans dl dt {
    width: 347px;
    text-align: right;
    float: left;
    margin: 0 0 30px 10px;
    /* padding: 10px 15px 0 0; */
    /* border: solid #ccc 1px; */
    /* box-shadow: 5px 5px 5px rgba(0,0,0,0.2); */
    clear: both;
}

#contents #beans dl dd {
    width: 350px;
    float: left;
    padding-top: 10px;
}
.mq-show {
	display: none;
}

/*
----------------------------------------------------------------------------
	画面幅��E40px＞以下のときに適用
----------------------------------------------------------------------------
*/
@media screen and (max-width: 640px) {

/*===========================================
	使いこなし 活用ガイド
=============================================*/

	#contents .pregBox dl dt {
		margin: 0 0 5px 0;
		float: none;
	}
	#contents .pregBox dl dd {
		float: none;
		width: auto;
		margin-bottom: 0;
	}
	ul.btn_area_text .mod-linkButton .figure {
		width: auto!important;
		height: auto!important;
	}
	ul.btn_area_text .mod-linkButton .figure {
		width: auto!important;
		height: auto!important;
	}
	#contents #master ul {
		margin-bottom: 15px!important;
		padding-bottom: 0;
	}


/*===========================================
	会話形式で学ぶ！ ハンディカム豆知識
=============================================*/
	ul.bnr_area li {
		width: 100%;
		float: none;
		text-align: left;
	}

/*===========================================
	アプリの使いかた
=============================================*/
	#contents #app dl dt {
		margin: 0 0 5px 0;
		float: none;
	}
	#contents #app dl dd {
		float: none;
		width: auto;
		padding-bottom: 10px;
		border-bottom: dotted #ccc 1px;
		margin-bottom: 20px;
	}
	#contents .mq-show {
		display: block;
	}
/*===========================================
	beans
=============================================*/
	#contents #beans dl dt {
		margin: 0 0 5px 0;
		float: none;
	}
	#contents #beans dl dd {
		float: none;
		width: auto;
		padding-bottom: 10px;
		border-bottom: dotted #ccc 1px;
		margin-bottom: 20px;
	}
	#contents .mq-show {
		display: block;
	}
}

/* 20220215 */

#contents .bnrArea{
    margin: 2em 0 2em 1em;
}

#contents .flex{
	display: flex;
	flex-direction: row;
}

#contents .bnrArea.flex .pct a{
    display: block;
    font-size: 0;
    border: 1px solid #7ea981;
}

#contents .bnrArea.flex span{
    display: inline-block;
}


@media (max-width: 640px){
    #contents .bnrArea{
        margin-left: 0;
    }
    
    
    #contents .bnrArea.flex .pct{
        margin-bottom: 1em;
    }
    
    #contents .flex{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 400px){
    #contents .pct img{
        max-width: 300px;
        height: auto;
    }
    
    #contents #beans dl dt{
        width: 100%;
        max-width: 347px;
        text-align: left;
    }
}