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

/* ナルホド！ワカチク 共通 */
@media (min-width: 768px){
	.article_box{ margin: 50px 0 -10px;}
	.article_box .inner_box{ margin: 70px 80px 0; font-size: 18px;}
	.article_box .container{ padding: 0;}
	.container.article_top{ padding: 0;}
	.article_box .container.blue_back{ background-color: #00a0e9; color: #fff; margin: 0 auto 30px;}
	.article_box .container.yellow_back{ background-color: #fdf100; color: #231815; margin: 0 auto 30px;}
	.back_mb0{ margin: 0 auto!important;}
	
	.article_box .blue_back .title1{ color: #fff100; font-size: 30px; margin: 0 0 30px 0;}
	.article_box .blue_back .title2{ color: #fff100; font-size: 26px; margin: 0 0 18px 0;}
	.article_box .yellow_back .title1{ color: #00a0e9; font-size: 30px; margin: 0 0 30px 0;}
	.article_box .yellow_back .title2{ color: #00a0e9; font-size: 26px; margin: 0 0 25px 0;}
	
	.article_box .blue_back .common_ul{ color: #fff100; font-size: 20px; margin: 35px 0; padding: 0 0 0 10px; list-style: none;}
	.article_box .yellow_back .common_ul{ color: #00a0e9; font-size: 20px; margin: 35px 0; padding: 0 0 0 10px; list-style: none;}
	.article_box .common_ul li{ margin: 0 0 20px 0; position: relative; padding: 0 0 0 30px;}
	.article_box .common_ul li::after{ content: ""; display: inline-block; width: 20px; height: 20px; position: absolute; left: 0; top: 5px; background-color: #fff100; border-radius: 50%;}
	.article_box .blue_back .common_ul li::after{ background-color: #fff100;}
	.article_box .yellow_back .common_ul li::after{ background-color: #00a0e9;}
	
	.article_box .main_image{ margin: 0; width: calc(100% - 80px); height: 540px; background-size: cover; position: relative; font-family: 'Zen Maru Gothic', sans-serif; border-radius: 0 0 60px 0;}
	.article_box .main_image_title{ border-radius: 10px 0 0 10px; font-size: 54px; width: 720px; position: absolute; right: -80px; top: 30px; padding: 10px 20px;}
	.article_box .blue_back .main_image_title{ border-top: 5px solid #00a0e9; border-bottom: 5px solid #00a0e9; border-left: 5px solid #00a0e9; background-color: rgba(255,255,255,0.85); color: #00a0e9; margin: 0;}
	.article_box .blue_back .main_image_lead{ color: #fff; position: absolute; bottom: 30px; left: 30px; font-size: 48px; margin: 0; text-shadow: 2px 2px 0 rgba(0,0,0,0.5), -2px -2px 0 rgba(0,0,0,0.5), -2px 2px 0 rgba(0,0,0,0.5), 2px -2px 0 rgba(0,0,0,0.5); line-height: 1.3;}
	.article_box .yellow_back .main_image_title{ border-top: 5px solid #fff100; border-bottom: 5px solid #fff100; border-left: 5px solid #fff100; background-color: rgba(13,54,123,0.45); color: #fff100; margin: 0;}
	.article_box .yellow_back .main_image_lead{ color: #fff; position: absolute; bottom: 30px; left: 30px; font-size: 48px; margin: 0; text-shadow: 2px 2px 0 rgba(0,0,0,0.5), -2px -2px 0 rgba(0,0,0,0.5), -2px 2px 0 rgba(0,0,0,0.5), 2px -2px 0 rgba(0,0,0,0.5); line-height: 1.3;}
	
	.article_btn{ border-radius: 50px; display: inline-block; margin: 0; padding: 10px 30px 12px; position: relative;}
	.article_btn.yellow{ background-color: #fdf100; color: #231815;}
	.article_btn.blue{ background-color: #00a0e9; color: #fff100;}
	.article_btn::after{ content: ""; display: block; width: 13px; height: 13px; position: absolute; top: 47%; right: 12px; margin-top: -6px; margin-left: 20px; border-top: 1px solid #231815; border-right: 1px solid #231815; transform: rotate(45deg);}
	.article_btn.blue::after{ border-top: 1px solid #fff100; border-right: 1px solid #fff100;}
	.article_btn:hover{ text-decoration: none;}
}
@media (max-width: 889.98px){
	.article_box { margin: 50px 0 -10px;}
}
@media (max-width: 767.98px){
	.article_box{ margin: 0; font-size: 14px;}
	.article_box .inner_box{ margin: 50px 0 0;}
	.article_box .container{ padding: 0 15px;}
	.container.article_top{ padding: 0;}
	.article_box .container.blue_back{ background-color: #00a0e9; color: #fff; margin: 0 auto 30px;}
	.article_box .container.yellow_back{ background-color: #fdf100; color: #231815; margin: 0 auto 30px;}
	.back_mb0{ margin: 0 auto!important;}
	
	.article_box .blue_back .title1{ color: #fff100; font-size: 22px; margin: 0 0 20px 0;}
	.article_box .blue_back .title2{ color: #fff100; font-size: 18px; margin: 0 0 10px 0;}
	.article_box .yellow_back .title1{ color: #00a0e9; font-size: 22px; margin: 0 0 20px 0;}
	.article_box .yellow_back .title2{ color: #00a0e9; font-size: 18px; margin: 0 0 10px 0;}
	
	.article_box .blue_back .common_ul{ color: #fff100; font-size: 16px; padding: 0 0 0 10px; list-style: none; margin: 20px 0;}
	.article_box .yellow_back .common_ul{ color: #00a0e9; font-size: 16px; padding: 0 0 0 10px; list-style: none; margin: 20px 0;}
	.article_box .common_ul li{ margin: 0 0 10px 0; position: relative; padding: 0 0 0 20px;}
	.article_box .common_ul li::after{ content: ""; display: inline-block; width: 15px; height: 15px; position: absolute; left: 0; top: 5px; background-color: #fff100; border-radius: 50%;}
	.article_box .blue_back .common_ul li::after{ background-color: #fff100;}
	.article_box .yellow_back .common_ul li::after{ background-color: #00a0e9;}
	
	.article_box .main_image{ margin: 0 0 0 -15px; width: calc(100% + 15px); height: 400px; background-size: cover; position: relative; font-family: 'Zen Maru Gothic', sans-serif; border-radius: 0 0 40px 0;}
	.article_box .main_image_title{ border-radius: 10px 0 0 10px; font-size: 30px; width: 90%; position: absolute; right: -15px; top: 20px; padding: 10px 20px;}
	.article_box .blue_back .main_image_title{ border-top: 5px solid #00a0e9; border-bottom: 5px solid #00a0e9; border-left: 5px solid #00a0e9; background-color: rgba(255,255,255,0.85); color: #00a0e9; margin: 0;}
	.article_box .blue_back .main_image_lead{ position: absolute; bottom: 10px; left: 10px; font-size: 26px; margin: 0; text-shadow: 2px 2px 0 rgba(0,0,0,0.5), -2px -2px 0 rgba(0,0,0,0.5), -2px 2px 0 rgba(0,0,0,0.5), 2px -2px 0 rgba(0,0,0,0.5); line-height: 1.3;}
	.article_box .yellow_back .main_image_title{ border-top: 5px solid #fff100; border-bottom: 5px solid #fff100; border-left: 5px solid #fff100; background-color: rgba(13,54,123,0.45); color: #fff100; margin: 0;}
	.article_box .yellow_back .main_image_lead{ color: #fff; position: absolute; bottom: 10px; left: 10px; font-size: 26px; margin: 0; text-shadow: 2px 2px 0 rgba(0,0,0,0.5), -2px -2px 0 rgba(0,0,0,0.5), -2px 2px 0 rgba(0,0,0,0.5), 2px -2px 0 rgba(0,0,0,0.5); line-height: 1.3;}
	
	.article_btn{ border-radius: 50px; display: inline-block; margin: 0; padding: 10px 30px 12px; position: relative;}
	.article_btn.yellow{ background-color: #fdf100; color: #231815;}
	.article_btn.blue{ background-color: #00a0e9; color: #fff100;}
	.article_btn::after{ content: ""; display: block; width: 13px; height: 13px; position: absolute; top: 47%; right: 12px; margin-top: -6px; margin-left: 20px; border-top: 1px solid #231815; border-right: 1px solid #231815; transform: rotate(45deg);}
	.article_btn.blue::after{ border-top: 1px solid #fff100; border-right: 1px solid #fff100;}
	.article_btn:hover{ text-decoration: none;}	
}


@media (min-width: 768px){
}
@media (max-width: 767.98px){
}