@charset "utf-8";
/* CSS Document */
body{
font-family: "Noto Sans JP", sans-serif;
  padding: 0;
  margin: 0;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}


a {
  text-decoration: none;
  transition: 0.3s;
}



p {
  line-height: 1.4;
}

img{
	width: 100%;
}

.pc_only {
  display: block;
}
@media screen and (max-width: 768px) {
  .pc_only {
    display: none;
  }
}

.sp_only {
  display: none;
}
@media screen and (max-width: 768px) {
  .sp_only {
    display: block;
  }
}


.logo {
	position: absolute;
	z-index: 2;
	width: 80px;
	left: 10px;
	top: 10px;
}

@media screen and (max-width: 767px) {
	.logo {
		width:60px;
	}
}

/*****************fv******************/
#fv{
	background-color: #FFEBF2;
	background-image: url("../img/housha.svg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center bottom;
	position: relative;
}


.triangle1,.triangle2,.triangle3,.triangle4{
	position: absolute;
}

.triangle1{
	width: 20%;
	top: 0%;
	left: 0%;
}

.triangle2{
	width: 20%;
	top: 0%;
	right: 0%;
}


.triangle3{
	width: 20%;
	bottom: 0%;
	right: 0%;
	line-height: 0;
}


.triangle4{
	width: 20%;
	bottom: 0%;
	left: 0%;
	line-height: 0;
}




.fv-wrap{
	padding-top: 3em;
	position: relative;
}


.main-copy{
	max-width: 45%;
	margin: 0 auto;
}

.main-ttl{
	max-width:59%;
	margin: 0 auto;
}

.target-ttl{
	max-width: 35%;
	margin: 0 auto;
}

.pre-ttl{
	max-width: 57%;
	margin: 0 auto;
    margin-top: -2%;
}


.day{
	background-color: #23A6B7;
	padding: 10px;
}

.day-flex{
	display: flex;
	justify-content: center;
	    max-width: 58%;
	margin: 0 auto;
	width: 100%;
}

.day-cp{
	width: 28%;
	
}

.day-img{
	width: 35%;
	
}


/*************con******************/

#con{
	margin-top: 5em;
	padding: 0 10px;
}

.aboutFlex{
	display: flex;
	justify-content: space-between;
	max-width: 1000px;
	margin: 0 auto;
	flex-wrap: wrap;
	
}


.aboutFlex-inner{
	background-color: #FFEBF2;
	width: calc((100% - 30px) / 2);
	padding: 5px;
	margin-bottom: 1.5em;
}


.aboutFlex-inner_flex{
	display: flex;
	justify-content: center;	
}


.leftbox{
	max-width: 40%;
	margin: inherit;
}


.rightbox{
	max-width: 60%;
	margin: 0 auto;
	padding-top: 2em;
}

.bold-txt{
	text-align: center;
	font-size: 1.2em;
	line-height: 1.4em;
	color: #252525;
	font-weight: bold;

}

.step{
	text-align: center;
    background-color: #E00086;
    padding: 5px 10px;
    border-radius: 50px;
    color: #fff;
    font-weight: 900;
    display: table;
    /* margin: 0 auto; */
    /* text-align: center; */
    max-width: 50%;
    margin: 1em auto;
	font-size: 0.8em;
}






.arrow{
	max-width: 11%;
	margin: 0 auto;
	margin-top: 1em;
}




.rgl-txt{
	text-align: center;
	font-size: 1.3em;
    line-height: 1.5em;
	color: #252525;
	font-weight: bold;
	margin-top: 20px;
}


.pink-txt{
	color: #E00086;
}


/*****************entry-info**********************/
.entry-info{
	max-width: 1100px;
	margin: 0 auto;
	background-color: #FFFDE9;
	padding: 1em;
	border: solid 5px #23A6B7;
	border-radius: 40px;
	margin-top: 13em;
	padding-bottom: 4em;
}

.entry-ttl{
    max-width: 64%;
    margin: 0 auto;
    margin-top: -6em;
}

.entry-inner{
	    margin-top: 2em;
}



.entry-notice{
	background-color: #fff;
	border: solid 1px #E00086;
	box-shadow: 3px 3px 6px 0px rgba(242, 90, 148, 0.33);
	border-radius: 20px;
	padding: 20px;
	max-width: 815px;
	margin: 0 auto;
	margin-top: 2em;
	position: relative;
}


.entry-notice p{
	text-align: center;
	font-size: 1.2em;
	font-weight: 900;
	color: #E00086;
	line-height: 1.6em;
}


.entry-img{
    position: absolute;
    max-width: 22%;
    right: -5%;
    bottom: -75%;
	
}

/*******entry-overview*********/

.entry-overview{	
	margin: 0 auto;
	margin-top:8em;
	max-width: 1000px;

}

.overview-category{
	margin-bottom: 3em;
}


.overview-bold{
	text-align: left;
	font-size: 1.1em;
	font-weight: bold;
	color: #2A2A2A;
}

.overview-txt{
	text-align: left;
	font-size: 1em;
	font-weight: 400;
	color: #2A2A2A;
	margin-top: 10px;
	line-height: 1.6em;
}


.overview-notice{
	text-align: left;
	font-size: 1em;
	font-weight: 400;
	color: #2A2A2A;
	margin-top: 1.5em;
	line-height: 1.6em;
}


.link-btn{
	max-width: 310px;
	margin: 0 auto;
	background-color: #E00086;
	padding: 20px 10px;
	border-radius: 50px;
	box-shadow: 3px 3px 4px 0px rgba(0, 0, 0, 0.19);
	display: block;
	margin-top: -2em;
}

.link-btn:hover{
	box-shadow: none;

}


.link-btn p{
	color: #fff;
	text-align: center;
	font-size: 1.1em;
	font-weight: bold;
}



.cp-ttl{

	text-align: center;
}

.cp-ttl p{
	display: inline-block;
	background-color: #23A6B7;
	border-radius: 50px;
	font-size: 1.4em;
	color: #fff;
	font-weight: bold;
	padding: 8px 5em;
}


.cp-sub{

	text-align: center;
	margin-top: 10px;
	margin-bottom: 3em;
}

.cp-sub p{
	display: inline-block;
	border-bottom: solid 2px #E00086;

	font-size: 1.1em;
	color: #E00086;
	font-weight: bold;
	padding: 5px;
	
}


.txt-small{
	font-size: 0.8em;
	line-height: 0.1em;
}


.txt-bold{
	font-weight: bold;
}

.txt-red{
	color: #C40808;
}






/*****************SP***********************/
@media screen and (max-width: 950px){
	.entry-img {
    position: absolute;
    max-width: 18%;
    right: -1%;
    bottom: -46%;
}

	.bold-txt{
		    font-size: 1.1em;
	}
	
	.entry-ttl{
		    max-width: 77%;
		margin-top: -13%;
	}
	
	.main-copy{
		    max-width: 70%;
	}
	
	.main-ttl{
		    max-width: 76%;
	}
	
	.target-ttl{
		    max-width: 45%;
	}
	
	.pre-ttl{
		    max-width: 73%;
	}
	
	.day-flex{
		    max-width: 80%;
	}
}


@media screen and (max-width: 768px){
	.fv-wrap{
		    padding-top: 5em;
	}
	
	.triangle1,.triangle2,.triangle3,.triangle4{
		width: 44%;
	}
	
	.main-copy{
		max-width: 95%;
	}
	
	.target-ttl{
		max-width: 77%;
    	margin-top: 0.5em;
	}
	
	.pre-ttl{
		max-width: 91%;
	}
	
	.main-ttl {
		max-width: 97%;
	}
	
	
	.day {
		padding:10px;
	}
	
	.day-flex{
		    max-width: 86%;
		    display: grid;
	}
	
	.day-cp{
		    width: 48%;
		margin: 0 auto;
	}
	
	.day-img{
		    width: 84%;
		margin: 0 auto;
	}
	
	.entry-info{
		margin-top: 7em;
		border-radius: 20px;
	}
	
    .entry-ttl {
        max-width: 100%;
        margin-top: -18%;
    }	
	
	.aboutFlex-inner{
		    width: calc((100%) / 1);
		margin-bottom: 1em;
	}
	
	
	.rightbox{
		    max-width: 95%;
	}
	
	    .bold-txt {
        font-size: 1.1em;
    }
	
	.leftbox{
		max-width: 36%;
		    
	}
	
	.entry-notice p{
		    font-size: 0.9em;
	}
	
    .entry-img {
        max-width: 19%;
        right: -1%;
        bottom: -32%;
    }
	
	.entry-overview{
		margin-top: 6em;
	}
	
	.overview-bold{
		font-size: 1em;
	}
	
	.overview-txt{
		font-size:0.9em;
	}
	
	.link-btn{
		    width: 86%;
	}
	
	.link-btn p{
		font-size: 1em;
	}
	
	
	.cp-ttl p{
		    padding: 8px 2em;
		font-size: 1.3em;
	}
	
	.cp-sub p{
		    font-size: 1em;
	}
	
}


@media screen and (max-width: 450px){
	    .bold-txt {
        font-size: 0.9em;
    }
	
    .rightbox {
        max-width: 100%;
    }
	
/*
	    .entry-img {
        max-width: 33%;
        right: -1%;
        bottom: -52%;
    }
*/
	
}

@media screen and (max-width: 410px){
	    .entry-img {
        max-width:28%;
        right: -1%;
        bottom: -28%;
    }
}








/***************animation*****************/

/*マーカー*/
.marker {
	background: linear-gradient(transparent 70%, #FFEB5F 30%);
	display: inline;
	background-repeat: no-repeat;
	background-size: 0% 100%;
	transition: background-size 1.5s;
}

.marker.on {
	background-size: 100% 100%;
}

@media screen and (max-width: 768px) {
	.marker {
		background: linear-gradient(transparent 75%, #FFEB5F 25%);
	}
}



/*スクロールアップ*/
.scroll_up.on {
    transform: translateY(0);
    opacity: 1.0;
}

.scroll_up {
    transition: 0.8s ease-in-out;
    transform: translateY(30px);
    opacity: 0;
}

/*******fv******/
.poyon {
  opacity: 0;
  transform: translateY(80px);
  animation: poyonUp 1.0s ease-out forwards;
	
}

/* ポヨンアニメーション */
@keyframes poyonUp {
  0% {
    opacity: 0;
    transform: translateY(80px);
  }
  60% {
    opacity: 1;
    transform: translateY(-10px); /* 行き過ぎる */
  }
  80% {
    transform: translateY(5px); /* 戻る */
  }
  100% {
	  opacity: 1; 
    transform: translateY(0);
  }
}