@charset "UTF-8";

/*===============-
  mainvisual
==========================================*/
.mainvisual_container {
	background-color: #fff;
	padding-top: 80px;
}

.mainvisual {
	/* background: #a0dcf2; */
	background: #A5DFF4;
}

.logo_content {
	position: relative;
	z-index: 3;
	overflow: hidden;
}

.logo_inner {
	width: 100%;
	height: 100%;
}

.logo_inner video {
	display: block;
	margin: 0 auto;
	max-width: 1200px;
	width: 100%;
}

@media screen and (min-width:1921px) {
	.logo_inner {
		display: block;
		margin: 0 auto;
		width: 1920px;
		height: auto;
	}
}

/*===============-
  資料ダウンロード
==========================================*/
.top_download {
	padding: 0;
	background: #8cc8de;
}

.top_download .dl_box {
	display: flex;
	align-items: end;
	justify-content: center;
	flex-wrap: wrap;
}
.top_download .dl_box li {
	display: block;
	margin: 1%;
	width: 20%;
	height: 20%;
	text-align: center;
}
.top_download .dl_box li img {max-width: 100%; max-height: 100%;}
.top_download .dl_box li iframe {width: 100%;}

.top_download p{
	color: #6e6e6e;
	text-align: center;
}
.top_download .dl_box li figcaption{
	margin-top: 0.5em;
	line-height: 1.2;
}

.top_download .top_text1{
	font-weight: bold;
	font-size: 1.25em;
}
.top_download .top_text2 {
	margin-top: 10px;
}
.top_download .top_text2 span {
	display: block;
	color: #1a9191;
	font-size: 3em;
	font-weight: bold;
}

.top_download .top_text3{
	margin-top: 50px;
	font-size: 2em;
}

@media all and (max-width: 768px){
	.top_download .dl_box li {margin: 0 auto; width: 48%;}
	.top_download .top_text1{
		font-weight: bold;
		font-size: 4vw;
	}
	.top_download .top_text2 span {
		font-size: 8vw;
		line-height: 1.4;
	}
	.top_download .top_text3{
		margin-top: 20px;
		font-size: 4vw;
	}
}

@media all and (max-width: 360px){
	.top_download .dl_box li {width: 98%;}
}


/*===============-
  コンテンツ共通
==========================================*/
.content_title {
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 80px auto 20px;
}
.content_title img {
	width: 80%;
	max-width: 1200px;
	filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
}

@media all and (max-width:1248px){
	.content_title {
		padding: 0 1.5em;
	}
}
@media all and (max-width:768px){
	.content_title img {width: 100%;}
}


/*===============-
  製品情報
==========================================*/
.product{
	display: flex;
	justify-content: space-between;
	overflow: hidden;
}
.product_box {
	position: relative;
	width: calc(50% - 20px);
	padding: 1.5em;
	border-radius: 10px;
	background: #fff;
}
.product_box hr {
	color: #69b3a4;
	width: 100%;
}
.product_text {margin-bottom: 2em;}
.product h3 {font-size: 1.5em; font-weight: bold;}
.product_text ul li {font-size: 0.8em;}

.product_irisu {margin-top: -2.5em;}

.stopper {margin: 2em 0 0;}
.stopper_box {
	display: grid;
	margin-top: 2em;
	grid-template-columns: 180px 1fr 60px;
}
.stopper_box figure {padding-right: 1em;}
.stopper_box figure img {width: 100%;}
.stopper_text h3 {font-size: 1.2em;}
.stopper_text ul li {font-size: 0.8em;}

.stopper_scene {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 2em;
}
.stopper_scene_text {width: 48%;}
.stopper_scene_text h3 {font-size: 1.2em;}
.stopper_scene figure {width: 48%;}
.stopper_scene figure img {margin: 0 auto; width: 100%; max-width: 240px;}

.product_attention {
	display: block;
	margin-top: 2em;
	width: 100%;
}
.product_attention p {
	margin: 0 auto;
	width: 100%;
	max-width: 1200px;
}

@media all and (max-width:1248px){
	.product_attention p {
		padding: 0 1.5em;
		box-sizing: border-box;
	}
}
@media all and (max-width:768px){
	.product{display: block;}
	.product_box{
		width: 100%;
		margin: 50px 0 20px;
	}
	.product_irisu {margin-top: -5em;}
}
@media all and (max-width:480px){
	.product_irisu {margin-top: -2.5em;}
	.stopper_box {
		grid-template-columns:none;
	}
	.stopper_box figure {
		margin: 0 auto;
		max-width: 240px;
		padding-right: 0;
		grid-column: 1 / 3;
	}
	.stopper_scene_text {width: 98%;}
	.stopper_scene figure {width: 98%; margin-top: 0.5em;}
}

.product_attention_item {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 1em auto;
	width: 100%;
	max-width: 1200px;
	padding: 1.5em;
	border-radius: 10px;
	background: #fff;
}
.product_attention_item_left {
	display: grid;
	grid-template-columns: 120px 1fr 60px;
	width: 48%;
}
.product_attention_item_left figure {padding-right: 1em;}
.product_attention_item_left figure img {width: 100%;}
.product_attention_item_text h3 {margin-bottom: 0.5em; font-size: 1.2em; font-weight: bold;}
.product_attention_item_text ul li {font-size: 0.9em;}

.product_attention_item_right {
	display: flex;
	justify-content: space-between;
	width: 48%;
}
.product_attention_item_right figure {width: 50%; padding-right: 1em;}
.product_attention_item_right figure img {margin: 0 auto; width: 100%; max-width: 240px;}
.product_attention_item_right p {width: 50%;}

@media all and (max-width:768px){
	.product_attention_item_left,
	.product_attention_item_right {margin-top: 1em; width: 100%;}
}
@media all and (max-width:480px){
	.stopper_box {grid-template-columns: none;}
	.product_attention_item_right figure {
		margin: 0.5em auto;
		max-width: 240px;
		width: 98%;
		grid-column: 1 / 3;
	}
	.product_attention_item_right p {width: 98%;}
}

/*===============-
  製品特長
==========================================*/
.side_hatopro {
	position: relative;
}
.side_hatopro .side_hatopro_img {
  position: absolute;
	left: 50%;
	top: -120px;
	z-index: -1;
	display: block;
	margin-left: -800px;
  width: 100%;
  max-width: 1600px;
	text-align: right;
  overflow: hidden;
}
.side_hatopro .side_hatopro_img img {
	display: block;
	margin-left: auto;
  width: 100%;
	max-width: 512px;
  height: auto;
  display: block;
}
@media all and (max-width:1600px){
	.side_hatopro .side_hatopro_img {
		margin-left: calc(-100vw / 2);
	}
}
@media all and (max-width:768px){
	.side_hatopro .side_hatopro_img img {opacity: 0.5;}
}

.feature {
	display: flex;
	justify-content: space-between;
}

.feature li {
	display: block;
	margin: 1% 1% 5%;
	width: 31.333333%;
	padding: 0 2%;
}
.feature li .feature_title {
	padding: 0 0.5em;
	font-size: 1.2em;
	/* background: rgba(0,180,200,0.5); */
}
.feature li img {width: 100%;}
.feature li .feature_caption {margin-top: 0.5em; font-size: 1em;}

@media all and (max-width:1200px){
	.feature li .feature_title {font-size: 1.1em;}
}
@media all and (max-width:768px){
	.feature {flex-wrap: wrap;}
	.feature li {width: 48%;}
}
@media all and (max-width:480px){
	.feature li {width: 98%;}
}


/*===============-
  製品利用シーン
==========================================*/
.scene_mark {
	display: block;
	margin: 1em 0;
	width: 100%;
	text-align: right;
}
.scene {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.scene li {
	display: block;
	margin: 1%;
	width: 31.333333%;
}
.scene li img {margin: 0 10%; width: 80%;}
.scene li figcaption {text-align: center; font-size: 1em;}

@media all and (max-width:1248px){
	.scene_mark {padding: 0 1.5em; box-sizing: border-box;}
}
@media all and (max-width:768px){
	.scene li {width: 48%;}
}
@media all and (max-width:480px){
	.scene li img {margin: 0; width: 100%;}
}
@media all and (max-width:360px){
	.scene li {width: 98%;}
}


/*===============-
  鳥のフン害
==========================================*/
.side_cat {
	position: relative;
}
.side_cat .side_cat_img {
  position: absolute;
	left: 50%;
	top: -120px;
	z-index: -1;
	display: block;
	margin-left: -800px;
  width: 100%;
  max-width: 1600px;
	text-align: right;
  overflow: hidden;
}
.side_cat .side_cat_img img {
	display: block;
	margin-left: auto;
  width: 100%;
	max-width: 296px;
  height: auto;
  display: block;
}
@media all and (max-width:1600px){
	.side_cat .side_cat_img {
		margin-left: calc(-100vw / 2);
	}
}

.damage_image ul {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	overflow: hidden;
}
.damage_image ul li {
	display: block;
	width: 33.333333%;
	padding: 1%;
	box-sizing: border-box;
}
.damage_image ul li img {margin:0 10%; width: 80%;}
.damage_image ul li p {
	margin-top: 0.5em;
	text-align: center;
}

.damage_senmon {
	margin: 1em 0 2em;
	padding: 0.5em 1em;
	box-sizing: border-box;
	text-align: center;
	color: #69b3a4;
	font-weight: bold;
	border-radius: 2em;
	background: #fff;
}

.damage_attention {
	margin: 20px 0;
}
.damage_attention figure {
	display: flex;
	align-items: center;
	margin: 0 auto;
	width: 100%;
	max-width: 1000px;
}
.damage_attention figure img {
	max-width: 134px;
	margin-right: 1em;
}
.damage_attention figure figcaption {
	font-size: 1.5em;
}

.damage_attention_box {
	position: relative;
	display: block;
	margin: 0.5em auto;
	width: 100%;
	max-width: 1000px;
	padding: 1.5em;
	box-sizing: border-box;
	border: 2px solid #69b3a4;
}
.damage_attention_box::before {
	content: "";
	position: absolute;
	top: -20px;
	left: -20px;
	border: 20px solid transparent;
	border-right: 20px solid #69b3a4;
	transform: rotate(45deg);
}

.damage_attention_box>p {
	padding-bottom: 1em;
	border-bottom: 1px dashed #69b3a4;
}
.attention1 ol {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 1em;
	width: 100%;
	max-width: 600px;
}
.attention1 ol li {
	width: 50%;
}
.attention2 .damage_attention2 {
	display: flex;
	justify-content: space-between;
	margin-top: 1em;
	width: 80%;
}
.attention2 .damage_attention2 .damage_attention2_box {
	margin: 0 2.5%;
	width: 45%;
	font-size: 0.8em;
}
.attention1 .damage_attention_box {background: url("/pigeon-protector/assets/img/hatos.png") no-repeat bottom 2.5em right 1.5em, rgba(255,255,255,0.8);}
.attention2 .damage_attention_box {background: url("/pigeon-protector/assets/img/ashi.png") no-repeat bottom 2.5em right 3.5em, rgba(255,255,255,0.8);}

@media all and (max-width:768px){
	.damage_image ul li {width: 33.333333%;}
	.attention2 .damage_attention2 {width: 100%;}
	.attention1 .damage_attention_box {background: rgba(255,255,255,0.8);}
	.attention2 .damage_attention_box {background: rgba(255,255,255,0.8);}
}
@media all and (max-width:480px){
	.damage_image ul {width: 100%;}
	.damage_image ul li {width: 50%;}
	.attention1 ol li {width: 100%;}
}


/*===============-
  セット品
==========================================*/
.set_box_area {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 30px;
	overflow: hidden;
}
.set_box {
	display: block;
	width: 48%;
	padding: 1.5em;
	border-radius: 10px;
	background: #fff;
}
.set_box .set_image {text-align: center;}
.set_box .set_image img {margin: 0 10%; width: 80%;}
.set_box h3 {
	margin-top: 0.5em;
	font-size: 1.3em;
	font-weight: bold;
}
.set_box p {font-size: 0.9em;}

@media all and (max-width:768px){
	.set_box h3 {font-size: 1.2em;}
}
@media all and (max-width:640px){
	.set_box {margin: 1em; width: 98%;}
}
@media all and (max-width:480px){
	.set_box {width: 98%;}
}


/*===============-
  エコマーク取得
==========================================*/
.eco {margin-top:5em; background: #fff;}
.eco_box_area {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 20px 0;
}
.eco_box {
	display: block;
	width: 48%;
}
.eco_box p {margin-top: 0.5em;}

@media all and (max-width:768px){
	.eco_box {margin: 1em; width: 98%;}
}
@media all and (max-width:480px){
	.eco_box {width: 98%;}
}


/*===============-
  取扱い・施工上の注意
==========================================*/
.alert {margin: 1em 0 2em;}
.alert .content p {
	display: block;
	width: 100%;
	padding: 0.1em 1em;
	box-sizing: border-box;
	text-align: center;
	font-weight: bold;
	background: #fff000;
}
.alert .content ul {
	display: block;
	width: 100%;
	padding: 0.5em 5em;
	box-sizing: border-box;
	background: #fff;
}

@media all and (max-width:1200px){
	.alert {margin: 1em 1.5em 2em;}
	.alert .content ul {padding: 0.5em 2em;}
}
@media all and (max-width:480px){
	.alert .content ul {padding: 0.5em 1em;}
}