@charset "utf-8";


#main p,#main div{ font-family: 'YakuHanJP', Lato, Roboto, "メイリオ", "游ゴシック", YuGothic, 'Noto Sans Japanese', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif; }


#main img{ max-width: 100%; height: auto; }
#main .content{ overflow: hidden; }
#main .contents-wrap{ background-color: #ce131c; max-width: 1000px; margin: 0 auto; box-sizing: border-box; }
#main .contents-wrap .ttl-body{ padding: 65px 0 20px; text-align: center; position: relative; overflow: hidden; }
#main .contents-wrap .ttl-body .bubble{ position: absolute; left: 50%; top: 0; margin: 20px 0 0 330px; width: 250px; }
#main .contents-wrap .date{ background-color: #921d22; padding: 5px 0; text-align: center; color: #ffffff; font-size: 22px; font-weight: bold; line-height: 1.5; }
#main .contents-wrap .cp-content{ padding: 30px 50px; background: url(../image/bg01.gif) center center no-repeat; background-size: cover; }
#main .contents-wrap .cp-content .item{ border: 5px solid #d6bb00; border-radius: 10px; background-color: #ffffff; padding: 4%; position: relative; }
#main .contents-wrap .cp-content .item+.item{ margin-top: 20px; }
#main .contents-wrap .cp-content .item .ttl{ font-size: 34px; line-height: 1.5; color: #ce131c; }
#main .contents-wrap .cp-content .item .split-view{ display: flex; display: -ms-flex; justify-content: space-between; }
#main .contents-wrap .cp-content .item .split-view .txt-body{ flex: 1; }
#main .contents-wrap .cp-content .item .split-view .photo{ width: 200px; }
#main .contents-wrap .cp-content .item .txt{ font-size: 18px; line-height: 1.7; }
#main .contents-wrap .cp-content .item .txt .marker{ color: #ce131c; font-weight: bold; }
#main .contents-wrap .cp-content .item .caption{ font-size: 14px; line-height: 1.7; }
#main .contents-wrap .cp-content .item .icon{ position: absolute; right: 20px; top: 20px; }
#main .contents-wrap .cp-content .coupon{ border: 5px solid #d6bb00; border-radius: 10px; background-color: #ffffff; padding: 4%; position: relative; margin-top: 20px; overflow: hidden; }
#main .contents-wrap .cp-content .coupon .txt{ font-size: 18px; line-height: 1.7; margin: -70px auto 0; max-width: 680px; }
#main .contents-wrap .cp-content .coupon .caption{ font-size: 14px; line-height: 1.7; margin: 10px auto 0; max-width: 800px; }
#main .contents-wrap .cp-content .about{ border-radius: 10px; background: linear-gradient(to bottom, #0096d9 0%, #3650a1 100%); padding: 4%; position: relative; margin-top: 50px; }
#main .contents-wrap .cp-content .about .txt{ font-size: 18px; line-height: 1.7; color: #ffffff; }
#main .contents-wrap .cp-content .about .txt .marker{ color: #fff100; }
#main .contents-wrap .cp-content .about .navi{ max-width: 500px; margin: 20px auto 0; }
#main .contents-wrap .cp-content .about .navi a{ display: block; background-color: #000000; color: #ffffff; text-align: center; padding: 20px 0; font-size: 18px; line-height: 1.5; text-decoration: none; border-radius: 5px; position: relative; }
#main .contents-wrap .cp-content .about .navi a::before{ content: ""; position: absolute; right: 15px; top: 50%; border: solid transparent; border-width: 5px 0 5px 8px; border-left-color: #ffffff; transform: translateY(-50%); }



@media screen and (max-width: 480px){ /*480px以下のcss*/
	#main .content{ padding: 0; margin: 0; }
	#main .contents-wrap{ margin-top: 0; }
	#main .contents-wrap .ttl-body{ padding: 10% 5% 5%; }
	#main .contents-wrap .ttl-body .bubble{ left: 0; top: 0; margin: 0; width: 53.3333%; margin: 5% 0 0 66.6666%; }
	#main .contents-wrap .ttl-body .ttl{ position: relative; z-index: 10; }
	#main .contents-wrap .date{ font-size: 20px; }
	#main .contents-wrap .cp-content{ padding: 5%; }
	#main .contents-wrap .cp-content .item{ padding: 5%; }
	#main .contents-wrap .cp-content .item+.item{ margin-top: 5%; }
	#main .contents-wrap .cp-content .item .ttl{ font-size: 20px; }
	#main .contents-wrap .cp-content .item .split-view{ display: block; }
	#main .contents-wrap .cp-content .item .split-view .photo{ width: auto; text-align: center; }
	#main .contents-wrap .cp-content .item .txt{ font-size: 14px; }
	#main .contents-wrap .cp-content .item .caption{ font-size: 12px; }
	#main .contents-wrap .cp-content .item .icon{ position: static; float: right; padding: 0 0 10px 10px; }
	#main .contents-wrap .cp-content .item .photo{ margin-top: 5%; }
	#main .contents-wrap .cp-content .coupon{ margin-top: 5%; padding: 3% 5% 5%; }
	#main .contents-wrap .cp-content .coupon .ttl{ margin: 0 -8% 0 -12%; }
	#main .contents-wrap .cp-content .coupon .txt{ font-size: 14px; margin-top: -7%; max-width: none; }
	#main .contents-wrap .cp-content .coupon .caption{ font-size: 12px; display: block; }
	#main .contents-wrap .cp-content .about{ padding: 5%; margin-top: 5%; }
	#main .contents-wrap .cp-content .about .txt{ font-size: 14px; }
	#main .contents-wrap .cp-content .about .navi{ margin: 5% auto 0; }
	#main .contents-wrap .cp-content .about .navi a{ font-size: 14px; padding: 10px 0; }
}