/*main
===================================*/
main#contents {
    margin-top: 195px;
}
body{
        width: 100vw;
}
.nav-box{
	background-color: #fff;
}
.pc-Element{
	display: block;
}
.sp-Element{
	display: none;
}
main{
	background: #f6ead9;
}
.main-bg{
	width: 90%;
	max-width: 1280px;
    margin-inline: auto;
    padding-top: 10px;
    padding-bottom: 80px;
}
.btn01{
	max-width: 444px;
	width: 35%;
	margin-inline: auto;
    margin-bottom: 30px;
}
.sec{
	margin-bottom: 18px;
}

/* 追記 */
.main-box-wrap{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    position: relative;
}
.main-box{
    max-width: 1280px;
    margin-inline: auto;
    width: 100%;
}
.main-box-wrap::after{
    content: "";
  position: absolute;
  inset: 0; 
    top: -10px;
    background: #ffffffe6;
}
.main-box-wrap::before{
      content: "";
  display: inline-block;
  position: absolute;
  background: url(./images/main-img.png)no-repeat;
  background-size: contain;
    background-position-y: bottom;
    width: 57%;
    height: 95%;
    max-width: 760px;
  top:0;
  bottom: 0;
  left:0;
  right:0;
  margin: auto;
    z-index: 6;
}
.ttl{
    width: 66%;
    max-width: 800px;
    margin-inline: auto;
    position: relative;
    z-index: 6;
}
.sec02{
    position: relative;
}
.kyara{
    position: absolute;
    max-width: 314px;
    bottom: 99.8%;
    left: 7%;
    z-index: 5;
}

@media all and (max-width: 1420px) {
    .kyara{
        left: 5%;
            width: 28%;
    }
}
@media all and (max-width: 1365px) {
    .kyara{
        left: 4%;
    }
}
@media all and (max-width: 1335px) {
    .kyara{
        left: 3%;
    }
}
@media all and (max-width: 1280px) {
    .kyara{
        left: 2%;
    }
}
/*main SP
===================================*/
@media all and (max-width: 768px) {
	html{
    overflow-x: hidden;
}
	.sec {
    margin-bottom: 5px;
}
	    main#contents {
        margin-top: 61px;
    }
	body{
		padding: 0;
	}
.pc-Element{
	display: none;
}
.sp-Element{
	display: block;
}
.main-bg{
	max-width: 400px;
    padding-bottom: 30px;
    padding-top: 5px;
}
.main-img01{
	max-width: 442px;
    margin-inline: auto;
	width: 100%;
        /* width: 100vw; */
        /* padding-right: 40px; */
}
.btn01{
	    max-width: 393px;
    width: 100%;
    margin-top: -55px;
    margin-bottom: 20px;
}
.ttl{
width: 100%;
}
.kyara{
    width: 38%;
    z-index: 6;
}
.ttl{
    z-index: 7;
}
.main-box-wrap::before {
    content: "";
    display: inline-block;
    position: absolute;
    background: url(./images/main-img.png) no-repeat;
    background-size: contain;
    background-position-y: center;
    width: 95%;
    height: 95%;
    max-width: 460px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 6;
}
.main-box-wrap {
    margin-top: -25px;
}
.main-box-wrap::after{
    top: 0;
}
}