@charset "utf-8";
/*========= モーダル表示のためのCSS ===============*/

/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
	display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}

/*確認を促すモーダル：タイトルの色を変更したい場合*/
#modaal-title{
}

/*動画表示のモーダル：余白を変更したい場合*/
.modaal-video .modaal-inner-wrapper{
	padding:0; 
}



/*========= レイアウトのためのCSS ===============*/

.m_bg_g{ background: #E0ECE0; padding: 60px 70px; overflow-y: scroll}
.m_bg_f{ background: #F8EBE4; padding: 60px 70px; overflow-y: scroll}
.m_bg_j{ background: #E9F4F0; padding: 60px 70px; overflow-y: scroll}
.m_work_bg{ overflow-y: scroll}

.mdl_ttl{ text-align: center; font-size: 17px; letter-spacing: 3px; color: #5A3F28; margin-bottom: 50px }
.mdl_flex{display: flex; justify-content: space-between}

.mdl_prof{ width: 35%; min-width: 340px; margin-right: 5%; line-height: 1.6;}
.mdl_prof img{ width: 100%}
.mdl_prof_f{ width: 35%; min-width: 340px; margin-right: 0; line-height: 1.6;}
.mdl_prof_f img{ width: 65%}
.mdl_prof_ttl{ font-size: 18px; color: #008842; margin-bottom: 15px; margin-top: 20px}
.mdl_prof_ttl_f{ font-size: 18px; color: #E60012; margin-bottom: 15px; margin-top: 20px}
.mdl_prof_ttl_jgd{ font-size: 16px; color: #34997B; margin-bottom: 10px; margin-top: 20px}
.mdl_prof_txt{font-size: 13px;}
.mdl_prof_txt span{font-size: 16px}
.mdl_txt{font-size: 13px; width: 60%; line-height: 2.2; text-align: justify; }
.mdl_txt_f{font-size: 13px; width: 65%; line-height: 2.2; text-align: justify; }
.mdl_txt_ttl{color: #34997B; font-size: 20px; letter-spacing: 3px; margin-bottom: 20px}

.m_work_bg{width: 700px; margin: 0 auto}
.m_work_bg img{width: 100%}
.m_work_txt{font-size: 14px; background: #fff; padding: 25px; line-height: 2; margin-top: -1px}





@media screen and (width <= 900px) {
.m_bg_g{ padding: 30px 30px;}
.m_bg_f{ padding: 30px 30px;}
.m_bg_j{ padding: 30px 30px;}
.mdl_flex{display: block; }
.mdl_prof{ max-width: 300px; min-width: auto; width: 100% }
.mdl_txt{width: 100%; margin-top: 40px}
.mdl_prof_f{ max-width: 300px; min-width: auto; width: 100%; margin-left: auto; margin-right: auto  }
.mdl_prof_f div{ width: 200px; margin-left: auto; margin-right: auto }
.mdl_prof_f div img{ width: 100%;}
.mdl_txt_f{width: 100%; margin-top: 40px}

.mdl_prof_ttl{ font-size: 16px; }
.mdl_prof_ttl_f{ font-size: 16px; }
.mdl_prof_ttl_jgd{ font-size: 16px; }
.mdl_prof_txt{font-size: 13px;}
.mdl_prof_txt span{font-size: 15px}
	
.m_work_bg{width: 100%; margin: 0 auto}
.m_work_txt{font-size: 13px; background: #fff; padding: 25px; line-height: 1.6; margin-top: -1px}

}