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

/* 愛鳥週間プレゼントキャンペーン */

/* 初期化 */

h3, h4, p, li { letter-spacing: 0.08em; font-feature-settings: "palt";}

/* 文字 */
h2 { font-size: 30px; color: #228FE3; line-height: 1.4em; margin: 0 0 40px 0; padding: 0;}
h3 { font-size: 24px; font-weight: normal;}
h4 { color: #333;}

@media screen and (max-width: 768px) {
	h2 { font-size: 22px;}
	h3 { font-size: 18px;}
}

/* pc版クリアランス */
.cl_pc80 { margin-bottom: 80px !important;}
.cl_pc50 { margin-bottom: 50px !important;}
.cl_pc30 { margin-bottom: 30px !important;}

@media screen and (max-width: 768px) {
.cl_pc80 { margin-bottom: 40px !important;}
.cl_pc50 { margin-bottom: 25px !important;}
.cl_pc30 { margin-bottom: 15px !important;}
}

/* smp版クリアランス */
.cl_sm20 { margin-bottom: 10px !important;}
.cl_sm40 { margin-bottom: 20px !important;}

@media screen and (max-width: 768px) {
.cl_sm20 { margin-bottom: 20px !important;}	
.cl_sm40 { margin-bottom: 40px !important;}	
}


#campaignvisual { width: 100%; height: 400px; margin-top: 80px; background-image: url("../images/header.jpg"); background-repeat: no-repeat; background-size: cover; background-position: right top; position: relative;}
#campaignvisual .h1_headline { width: 557px; height: 115px; background: url("../images/h1.png") no-repeat; background-size: 100% auto; position: absolute; top: 40%; right: 10%;}
.campaign_overview_wrapper { padding: 30px; min-height: 230px; background-color: #eef8ff; position: relative;}
.campaign_overview_wrapper ul { margin: 0; padding: 0; list-style-type: none; position: relative; z-index: 1;}
.campaign_overview_wrapper ul li { margin: 16px 0;}
.campaign_overview_wrapper ul li span { display: inline-block; width: 100px; padding: 6px; text-align: center; line-height: 1; color: #fff; background-color: #2591e0; margin-right: 16px;}
.campaign_overview_wrapper .cover { width: 36%; height: auto; position: absolute; bottom: 20px; right: 20px;}
.campaign_overview_wrapper .deco { width: 240px; transform: rotate(-6deg); position: absolute; top: -40px; left: 30px;}

ol { margin: 0 0 10px 100px; padding: 0;}
ol li { padding: 3px 0;}
.icon_wrapper { position: relative;}
.icon_wrapper img.icon { width: 60px; height: auto; position: absolute; top: 12px; left: 0;}

ul { margin: 0 0 10px 20px; padding: 0;}
ul li { padding: 3px 0;}

.cta_wrapper { text-align: center; background: #e9f6ff; padding: 30px; border-radius: 30px;}
.cta_wrapper h2 { text-align: center;}
.cta_wrapper img { width: 40%; height: auto; margin: 0 auto 40px auto;}
.cta_wrapper ul { display: flex; flex-wrap: wrap; justify-content: center; margin: 20px 0 0 0; padding: 0; list-style-type: none;}
.cta_wrapper ul li { width: 14%;}
.cta_wrapper ul li img { display: block; width: 60%; margin: 0 auto 10px auto;}

@media screen and (max-width: 768px) {
	#campaignvisual { width: 100%; height: 160px;}
	#campaignvisual .h1_headline { width: 80%; background-size: 100% auto;}
	.campaign_overview_wrapper { padding: 20px 15px 20px 15px; background-size: 80% auto; background-image: none;}
	.campaign_overview_wrapper ul li span { display: block; margin: 0 0 10px 0;}
	.campaign_overview_wrapper .cover { position: relative; width: 100%; margin: 30px auto 0 auto !important; bottom: 0; left: 0; right: 0;}
	.campaign_overview_wrapper .deco { width: 160px; top: -30px; left: 10px;}
	ol { margin: 0 0 10px 60px; padding: 0;}
	.icon_wrapper img.icon { width: 30px;}
	.cta_wrapper { padding: 15px; border-radius: 15px;}
	.cta_wrapper img { width: 80%;}
	.cta_wrapper ul li { width: 30%; margin: 0 20px;}
}