/*main
===================================*/
main#contents {
    margin-top: 195px;
}
body{
        width: 100vw;
}
.pc-Element{
	display: block !important;
}
main{
	background: #d5ebf1;
}
.main-bg{
	/* width: 80%;
	max-width: 1050px; */
    margin-inline: auto;
}
.sp-Element{
	display: none !important;
}
.main-box{
	position: relative;
	z-index: 1;
    /* background: linear-gradient(to bottom, #d5ebf1 93%, #fdf8ed 7%); */
}
.main-img01{
	    /* max-width: 1440px; */
    margin-inline: auto;
    width: 100%;
}
.sec01{
	background-color: #fdf8ed;
    position: relative;
    margin-top: -50px;
    z-index: 0;
    height: 275px;
}
.img01,.sec02 p,.sec03 img,.sec04-box{
	width: 80%;
	max-width: 1050px;
    margin-inline: auto;
	display: block;
}
.sec02{
	background-color: #fff;
    padding-block: 35px;
}
.sec03{
	background: url(./images/kosodate-05.png)no-repeat;
	background-size: cover;
}
.sec04{
	background: url(./images/kosodate-08.jpg)no-repeat;
	background-size: cover;
	background-position-y: bottom;
    background-position-x: center;
}
.img01{
	position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: -260px;
}
.sec-txt{
	position: relative;
    padding-left: 25px;
    margin-bottom: 1px;
}
.sec-txt::before{
	  content: "";
  display: inline-block;
  position: absolute;
	background: url(./images/kosodate-03.png)no-repeat;
  background-size: contain;
    width: 20px;
    height: 20px;
    left: 0;
    top: 2px;
    margin: auto 0;
}
.sec04-box{
	position: relative;
}
.img03{
	position: absolute;
    width: 18%;
    max-width: 190px;
    left: 0px;
    top: -30px;
}
.img04{
	margin-inline: auto;
    width: 63%;
    max-width: 670px;
    padding-block: 40px 6px;
    display: block;
}
@media all and (max-width: 989px) {
.img01 {
    bottom: -230px;
}
}
@media all and (max-width: 880px) {
.img01 {
    bottom: -210px;
}
.sec01{
    height: 250px;
}
}
/*main SP
===================================*/
@media all and (max-width: 768px) {
	    main#contents {
        margin-top: 61px;
    }
	body{
		padding: 0;
	}
.sec01{
	height: auto;
}
.img01{
	    position: static;
    padding-top: 55px;
    width: 70%;
        max-width: 340px;
}
.sec-txt{
	font-size: 14px;
}
.sec02 {
    padding-block: 22px;
}
.img03 {
    width: 15%;
    max-width: 110px;
    left: 0px;
    top: -10px;
}
.img04 {
    padding-block: 11px 4px;
    min-width: 270px;
}
.pc-Element{
	display: none !important;
}
.sp-Element{
	display: block !important;
}
.sec03 {
    padding-block: 0;
    position: relative;
}
.img02{
    position: relative;
    top: -20px;
}
.sec04{
    margin-top: -20px;
    z-index:9;
    position: relative;
}
}
@media (max-width: 550px) {
.img02{
    top: -10px;
}
.sec04{
    margin-top: -10px;
}
.img02{
    width: 85% !important;
}
}
@media (max-width: 500px) {
    .sec-txt {
        font-size: 13px;
    }
}
@media (max-width: 445px) {
    .sec-txt {
        font-size: 12px;
    }
}
@media all and (max-width: 385px) {
	.sec01{
		margin-top: -30px;
	}
	.img01 {
        padding-top: 35px;
        width: 70%;
        min-width: 280px;
    }
	.sec02 p, .sec03 img, .sec04-box {
    width: 90%;
	}
    .img04 {
	    padding-left: 20px;
    }
	.img03{
		top: 0;
	}
    .img02{
            width: 95% !important;
    margin-inline: 0 auto;
    }
        .sec-txt {
        font-size: 12px;
    }
}
@media (max-width: 365px) {
    .img03 {
        left: -13px;
    }
}