.maindesign h1 img{
width:100%;
}

.maindesign h1 span.heading01{
color: #fff;
/* text-shadow: 1px 1px 2px rgb(10 10 10 / 70%); */
text-align: center;
font-weight: bold;
font-size: 3em;
/* margin: 0 0 0px 0; */
padding: 0 3.5rem 0.5rem;
line-height: 1.2;
position: absolute;
background-color: #000;
letter-spacing: 0.05em;
width: auto;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.maindesign h1 span.heading01 span{
font-size: 4.6rem;
}
@media screen and (max-width: 767px) {
.maindesign h1 span.heading01 {
font-size: 9vw;
padding: 0 0.5rem 0.5rem;
line-height: 1.2;
width: 62%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
    .maindesign h1 span.heading01 span{
font-size: 13vw;
}}
	.maindesign .description{
		margin-top: -2px
	}
	.maindesign h3{
		font-weight: bold;
		margin: 20px 0;
		font-size: 1.2em;
		text-align: left;
		line-height: 1.3
	}
	.maindesign .colRe{
	display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;	
	}
	.maindesign .colRe p{
		  align-self: flex-end;
	}
	.maindesign ul.flexList{
		display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
	}
	.maindesign ul.flexList li{
		width: 200px;
		border: 1px solid #ccc;
		box-sizing: border-box;
		padding: 8px;

		margin-bottom: 20px
	}
	.maindesign ul.flexList li a img{
		margin-bottom: 10px
	}
	.maindesign .howtoList{
				display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
	}
	.maindesign ul.howtoList li{
		text-align: center;
		margin-bottom: 20px;
		width: 49%
	}
	.maindesign a.w490{
		
	}
	.maindesign .bnrList{		display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
	margin-top: 20px}
	.maindesign .bnrList li{
width:  calc(50% - 20px);
		margin-bottom: 20px
	}
	.maindesign .bnrList li img{
		width: 100%
	}
	.maindesign .sonaeList li{
		list-style-type:disc;
		margin-bottom: 0.7em;
		margin-left: 1.5em;
		text-align: left
	}
	
		@media screen and (min-width:768px) {
	.maindesign .container::after{
  content:"";
  display: block;
  width:420px;
			}}
	@media screen and (max-width:767px) {
		.maindesign .colRe{
		flex-direction: column;	
		}
		.maindesign .colRe p{
			text-align: center;
			  align-self: center;
			margin-top: 20px
		}
		.maindesign .sonaeList li{
			line-height: 1.4
		}
		
		.maindesign ul.flexList li{
			width: 49%;
			margin-bottom: 2%
		}
		.maindesign .howtoList{
		flex-direction: column;
		}
		.maindesign ul.howtoList li{
			width: 100%
		}
		.maindesign .bnrList li {
			width: 100%;
    margin-bottom: 10px;
}
	}
    .maindesign .eventbnr{
        display: flex;
        flex-wrap: wrap;
    }
    .maindesign .eventbnr li{
    width: calc(50% - 5px);
    margin: 0 10px 20px 0;
    position: relative;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
    }
    .maindesign .eventbnr li:nth-child(2n){
    margin: 0 0 20px 0;
    }
    .maindesign .eventbnr li a{
    display: flex;
        height: 8em;
    }
    .maindesign .eventbnr li .linksTxt{
    font-size: 1.2em;
    margin: auto auto auto 10px;
    display: flex;
    flex-wrap: wrap;
    width: calc(80% - 20px);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    }
    .maindesign .eventbnr li .linksTxt p{
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 10px;
    padding: 0.5em 0;
	font-weight: 700;
}
.maindesign .eventbnr li .linksTxt p span {
    font-size: 0.75em;
    width: calc(90% - 10px);
    line-height: 1.2;
    font-weight: 400;
    padding-top: 0.5em;
    display: block;
}
    .maindesign .eventbnr li .linksImg{
    margin: auto 15px auto auto;
    width: calc(30% - 20px);
    display: flex;
    align-items: center;
    }
    .maindesign .eventbnr li .linksImg img {
    width: 100%;
}
    @media only screen and (max-width: 767px) {
    .maindesign .eventbnr li{
    width: 100%;
    margin: 0 0 20px 0;
    padding: 0.3em;
    }
    .maindesign .eventbnr li .linksImg{
    margin: auto auto auto auto;
    width: calc(38% - 20px);
    display: flex;
    align-items: center;
    }
    .maindesign .eventbnr li a{
    display: flex;
    flex-direction: row-reverse;
        height: 30vw;
    }
    .maindesign .eventbnr li .linksTxt p span {
    width: calc(100%);
        }
    .maindesign .eventbnr li .linksTxt p {
    margin-left: 0;
}
}
.maindesign h3.checkPoint {
    position: relative;
    font-size: 1.25em;
    font-weight: bold;
    margin: 60px 0 20px 0;
    padding: 0 0 10px 0;
    text-align: left;
    border-bottom: #aaaaaa 2px solid;
    display: flex;
    align-items: center;
}
.maindesign h3.checkPoint .st0{fill:#aaaaaa;}
.maindesign h3.checkPoint .st1{fill:none;stroke:#ffffff;stroke-width:3;stroke-miterlimit:10;}
.maindesign h3.checkPoint.h2under {
    margin: 20px 0 20px 0;
}
.maindesign h3.checkPoint span {
    margin: 0 0 0 20px;
}

.maindesign .breadcrumb {
    box-sizing: border-box;
    color: #83838f;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.875em;
    line-height: 1.5;
    margin-bottom: 10px;
}
.maindesign .subTxt{
        line-height: 1.2;
    margin: 0.5em 0 1em;
    }
    .maindesign .subTxt span{
        font-weight: bold;
    }


/* =====================================================

	220712_防災特集_商品入れ替え、ページ構成変更依頼　修正01

===================================================== */
.maindesign .flexList li a {
    text-align: center;
}

/*kokoroのみ*/
.maindesign ul li a:hover {
    opacity: 0.5;
}

.maindesign ul.howtoList li a:hover {
    opacity: 1;
}

.maindesign h1 span.heading01_kokoro {
    padding: 0 2.5rem 0.5rem;

}

.maindesign ul.flexList_kokoro li{
	width: 185px;
}