@charset "UTF-8";
/*------------------------
ルール共通
------------------------*/
/*--------共通--------*/
#top-ttl {
	background: url(../img/incentive/topttl_incentive.jpg) no-repeat center;
	background-size: cover;
}
.image img{
	width: 100%;
	height: 100%;
}

/*--------pc--------*/
@media screen and (min-width:768px) {
	
}

/*--------sp--------*/
@media screen and (max-width:767px) {
}

/*------------------------
謝礼について
------------------------*/
/*--------共通--------*/
#about .inner .ttl-wrap .ef{
	display: block;
	color: var(--inccolor);
}
#about .inner .ttl-wrap h2{
	line-height: 1;
	font-weight: 500;
	color: var(--inctxt);
}
#about .top-cont .txt li{
	font-weight: 500;
	color: var(--inctxt);
	display: flex;
	align-items: flex-start;
}
#about .top-cont .txt li::before{
	content: "";
	background: var(--inctxt);
	border-radius: 50vw;
	display: inline-block;
}
/* pattern */
#about .pattern .item{
	background: var(--mygray);
	border-radius: 6px;
	color: var(--inctxt);
	position: relative;
}
#about .pattern .item h3{
	display: flex;
	align-items: center;
	font-weight: 500;
	line-height: 1;
}
#about .pattern .item h3 span{
	background: var(--inctxt);
	display: inline-block;
	position: relative;
}
#about .pattern .item h3 span::before, 
#about .pattern .item h3 span::after {
	content: '';
	position: absolute;
	background: var(--inctxt);
}
#about .pattern .item .btn{
	width: 100%;
}
#about .pattern .item .btn a{
	background: var(--inccolor);
	border: .2rem solid var(--inccolor);
	text-align: center;
}
#about .pattern .item .btn a span::after{
	-webkit-transform: rotate(-45deg);
	transform: rotate(45deg);
}
#about .pattern .item .btn a span::before{
	background: var(--inccolor);
}
/*--------pc--------*/
@media screen and (min-width:768px) {
	#about .inner{
		max-width: 120rem;
		margin: 0 auto;
	}
	#about .inner .ttl-wrap{
		margin-bottom: 2rem;
	}
	#about .inner .ttl-wrap .ef{
		font-size: 3.8rem;
		line-height: .8;
		margin-bottom: 2rem;
		font-weight: 500;
	}
	#about .inner .ttl-wrap h2{
		font-size: 4.4rem;
		letter-spacing: -.04em;
	}
	#about .inner{
		padding: 10rem 0;
	}
	#about .inner .ttl-wrap h2{
		margin-bottom: -4px;
	}
	#about .top-cont {
		justify-content: space-between;
		/* margin-bottom: 5rem; */
	}
	#about .top-cont .bounce{
		width: 49rem;
		margin-left: 2rem;
	}
	#about .top-cont .bounce img{
		height: auto;
	}
	#about .top-cont .txt li{
		font-size: 2.3rem;
		line-height: 1.4;
		margin-bottom: 8px;
	}
	#about .top-cont .txt li::before{
		width: .8rem;
		height: .8rem;
		margin-right: 1.2rem;
		margin-top: 1rem;
	}

	/* pattern */
	#about .pattern{
		justify-content: space-between;
		align-items: stretch;
	}
	#about .pattern .item{
		width: 58rem;
		padding: 3rem;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	#about .pattern .item .ashi1{
		position: absolute;
		bottom: 8.7rem;
		width: 18.3rem;
		height: 17.2rem;
		right: 1rem;
	}
	#about .pattern .item .ashi2{
		position: absolute;
		bottom: 7.6rem;
		width: 12.5rem;
		height: 20.3rem;
		right: 1rem;
	}
	#about .pattern .item h3{
		font-size: 2.6rem;
		letter-spacing: .04em;
		margin-bottom: 1rem;
	}
	#about .pattern .item h3 span{
		width: 1.2rem;
		height: 1.2rem;
		margin: 0 1.5rem .5rem 0;
	}
	#about .pattern .item h3 span::before{
		bottom: -.3rem;
		right: -.3rem;
		width: 100%;
		height: 1px;
	}
	#about .pattern .item h3 span::after{
		top: .3rem;
		right: -.3rem;
		width: 1px;
		height: 100%;
	}
	#about .pattern .item p{
		font-size: 1.8rem;
		margin-bottom: 2rem;
	}
	#about .pattern .item:nth-child(2) p{
		letter-spacing: -.06em;
	}
	#about .pattern .item .btn a:hover{
		color: var(--inccolor);
	}
	#about .pattern .item .btn a span::before{
		width: 0.2rem;
		height: 2.2rem;
		right: 2.8rem;
		bottom: 1.6rem;
		top: auto;
	}
	#about .pattern .item .btn a:hover span::before{
		animation: .6s ease-in ink-btnanm;
		transform-origin: bottom; /* 下から上に変化させる基準 */
	}
	#about .pattern .item .btn a span::after{
		right: 2.4rem;
		bottom: -1.2rem;
		border-bottom: .2rem solid var(--inccolor);
		border-right: .2rem solid var(--inccolor);
	}
	
}
@keyframes ink-btnanm{
	0% {
		height: 2.2rem;
	}
	50% {
		height: 0;
	}
	100% {
		height: 2.2rem;
	}
}
/*--------sp--------*/
@media screen and (max-width:767px) {
	#about .inner{
		margin: 10vw 4.5% 10.667vw;
	}
	#about .inner .ttl-wrap{
		margin-bottom: 3.667vw;
		line-height: 1;
	}
	#about .inner .ttl-wrap .ef{
		font-size: 4.54vw;
		margin-bottom: 2vw;
	}
	#about .inner .ttl-wrap h2{
		font-size: 7.2vw;
	}
	#about .top-cont {
		flex-direction: column;
		position: relative;
	}
	#about .top-cont .bounce{
		position: absolute;
		top: -17vw;
		right: 0;
		width: 34.267vw;
		height: 26vw;
	}
	#about .top-cont .txt ul{
		margin-bottom: 5.33vw;
	}
	#about .top-cont .txt li{
		font-size: 4.27vw;
		line-height: 1.4;
		letter-spacing: 0;
	}
	#about .top-cont .txt li:not(:last-of-type) {
		margin-bottom: 2vw;
	}
	#about .top-cont .txt li::before{
		width: 1.6vw;
		height: 1.6vw;
		margin-right: 2vw;
		margin-top: 2%;
	}

	/* pattern */
	#about .pattern{
		flex-direction: column;
	}
	#about .pattern .item{
		width: 100%;
		padding: 6vw 4.5vw 4.5vw;
		margin-bottom: 4vw;
	}
	#about .pattern .item .ashi1{
		position: absolute;
		right: 0;
		width: 28vw;
		height: 26.93vw;
		bottom: 18.67vw;
	}
	#about .pattern .item .ashi2{
		position: absolute;
		right: 2vw;
		width: 24vw;
		height: 38.8vw;
		bottom: 18.67vw;
	}
	#about .pattern .item h3{
		font-size: 5.34vw;
		letter-spacing: .04em;
		margin-bottom: 2vw;
	}
	#about .pattern .item h3 span{
		width: 3.2vw;
		height: 3.2vw;
		margin: 0 2.67vw 1.33vw 0;
	}
	#about .pattern .item h3 span::before{
		bottom: -0.8vw;
		right: -0.8vw;
		width: 100%;
		height: 1px;
	}
	#about .pattern .item h3 span::after{
		top: .8vw;
		right: -.8vw;
		width: 1px;
		height: 100%;
	}
	#about .pattern .item p{
		margin-bottom: 4.8vw;
	}
	#about .pattern .item:nth-child(2) p{
		letter-spacing: -.06em;
	}
	#about .pattern .item .btn a span::before{
		width: 2px;
		height: 5vw;
		right: 6.67vw;
		bottom: 4.53vw;
		top: auto;
	}
	#about .pattern .item .btn a span::after{
		right: 5.87vw;
		bottom: -2.67vw;
		border-bottom: 2px solid var(--inccolor);
		border-right: 2px solid var(--inccolor);
	}
	
}


/*------------------------
パターン
------------------------*/
/*--------共通--------*/
.pattern-wrap .inner .ttl-wrap .head{
	background: var(--inccolor);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 500;
	border-radius: 5px;
}
.pattern-wrap .inner .ttl-wrap h2{
	display: flex;
	align-items: center;
	font-weight: 500;
	line-height: 1;
}
.pattern-wrap .inner .ttl-wrap h2 span{
	background: var(--inctxt);
	display: inline-block;
	position: relative;
}
.pattern-wrap .inner .ttl-wrap h2 span::before,
.pattern-wrap .inner .ttl-wrap h2 span::after{
	content: '';
	position: absolute;
	background: var(--inctxt);
}

.pattern-wrap .pt-block{
	background: rgba(255, 255, 255, .6);
	position: relative;
}
.pattern-wrap .pt-block h3{
	background: var(--accentcolor);
	color: #fff;
	display: flex;
	align-items: center;
	font-weight: 500;
}
.pattern-wrap .pt-block .submit th{
	background: #93ceea;
	color: var(--accentcolor);
	font-weight: 500;
}
.pattern-wrap .pt-block .submit td b{
	background: linear-gradient(transparent 40%, rgba(237, 237, 128, .8) 80%);
}

/* 提出物仕様 */
.pattern-wrap .open-box h4{
	width: 100%;
	background: var(--inctxt);
	color: #fff;
	font-weight: 500;
	display: flex;
	align-items: center;
	position: relative;
}

.pattern-wrap .open-box .wrap > li{
	font-weight: 500;
	display: flex;
	align-items: flex-start;
}
.pattern-wrap .open-box .wrap li p{
	flex: 1;
}
.pattern-wrap .open-box .wrap li::before{
	content: "";
	background: var(--inctxt);
	border-radius: 50vw;
	display: inline-block;
}
.pattern-wrap .open-box .wrap .f-box .sub{
	border-left: 2px solid var(--inctxt);
}
.pattern-wrap .open-box .come{
	background: #bdc6d9;
}
.pattern-wrap .open-box .example .ttl{
	background: #93ceea;
	color: var(--accentcolor);
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
}
.pattern-wrap .pt-block .submit td a{
	text-decoration: underline;
}
/* patternA */
#pattern-a{
	background: #fedbe4;
}
/* patternB */
#pattern-b{
	background: url(../img/incentive/bg_pattern_b.png);
}
.pattern-wrap .pt-block.a-2 .open-box .wrap .f-box .sub li:first-child::before{
	content: none;
}

/*--------pc--------*/
@media screen and (min-width:768px) {
	/* 共通 */
	.pattern-wrap .inner{
		padding: 10rem 0;
		color: var(--inctxt);
		width: 120rem;
		margin: 0 auto;
	}
	.pattern-wrap .inner .ttl-wrap{
		display: flex;
		align-items: center;
		position: relative;
		margin-bottom: 2.5rem;
	}
	.pattern-wrap .inner .ttl-wrap .head{
		height: 5rem;
		font-size: 2.4rem;
		margin-right: 2rem;
		padding: 0 2rem;
	}
	.pattern-wrap .inner .ttl-wrap .txt{
		flex:1;
	}
	.pattern-wrap .inner .ttl-wrap h2{
		font-size: 3.2rem;
		letter-spacing: .04em;
		margin-bottom: .4rem;
	}
	.pattern-wrap .inner .ttl-wrap h2 span{
		width: 1.2rem;
		height: 1.2rem;
		margin: 0 1.5rem .5rem 0;
	}
	.pattern-wrap .inner .ttl-wrap h2 span::before{
		bottom: -.3rem;
		right: -.3rem;
		width: 100%;
		height: 1px;
	}
	.pattern-wrap .inner .ttl-wrap h2 span::after{
		top: .3rem;
		right: -.3rem;
		width: 1px;
		height: 100%;
	}
	.pattern-wrap .inner .ttl-wrap .txt p{
		font-size: 2.3rem;
		font-weight: 500;
	}
	.pattern-wrap .inner .ttl-wrap h2 span{
		width: 1.2rem;
		height: 1.2rem;
		margin: 0 1.5rem .5rem 0;
	}

	.pattern-wrap .pt-block:not(:last-child){
		margin-bottom: 3rem;
	}
	.pattern-wrap .pt-block h3{
		height: 7rem;
		font-size: 3rem;
		padding: 0 3rem;
	}
	.pattern-wrap .pt-block .box{
		padding: 3rem;
	}
	.pattern-wrap .pt-block .submit{
		background: #f6f4f4;
		width: 114rem;
	}
	.pattern-wrap .pt-block .submit th{
		font-size: 2.4rem;
		padding: 0 3rem;
		height: 5rem;
	}
	.pattern-wrap .pt-block .submit th:nth-child(1){
		width: 84rem;
		border-right: 1px solid #fff;
	}
	.pattern-wrap .pt-block .submit th span{
		font-size: 1.9rem;
	}
	.pattern-wrap .pt-block .submit td{
		padding: 2.5rem 3rem;
		font-size: 2.2rem;
		line-height: 1.4;
	}
	.pattern-wrap .pt-block .submit td a:hover{
		color: var(--accentcolor);
	}
	.pattern-wrap .pt-block .submit td:not(.right){
		border-right: 1px solid var(--inctxt);
	}
	.pattern-wrap .pt-block .submit td:nth-child(1){
		border-right: 1px solid var(--inctxt);
	}
	.pattern-wrap .pt-block .submit td .ef{
		font-size: 3.2rem;
		font-weight: 500;
		color: var(--inccolor);
	}
	.pattern-wrap .pt-block .submit td.right{
		text-align: end;
	}
	.pattern-wrap .pt-block .submit td .flex{
		display: flex;
	}

	/* 提出物仕様 */
	.pattern-wrap .open-box{
		background: var(--mygray);
		padding: 5rem 5rem;
	}
	.pattern-wrap .open-box h4{
		font-size: 2.4rem;
		height: 6rem;
		padding: 0 3rem;
		cursor: pointer;
	}

	.pattern-wrap .open-box .in{
		background: #fff;
		padding: 2.5rem 3rem 3rem;
	}
	.pattern-wrap .open-box .wrap{
		margin-bottom: 2rem;
	}
	.pattern-wrap .open-box .wrap > li{
		font-size: 2.2rem;
	}
	.pattern-wrap .open-box .wrap > li::before{
		width: .8rem;
		height: .8rem;
		margin-right: 1.2rem;
		margin-top: 1rem;
	}
	.pattern-wrap .open-box .wrap .f-box .sub{
		padding-left: 2rem;
		line-height: 1.3;
		margin-top: 1rem;
		margin-bottom: 2.2rem;
	}
	.pattern-wrap .open-box .wrap .sub li{
		font-size: 2rem;
		line-height: 1.4;
		display: flex;
		align-items: center;
		font-weight: normal;
		margin-bottom: .2rem;
	}
	.pattern-wrap .open-box .wrap .sub li::before{
		width: .3rem;
		height: .3rem;
		margin-right: .8rem;
	}

	.pattern-wrap .open-box .come{
		padding: 1.5rem 1.5rem 1.3rem;
		font-size: 1.7rem;
	}
	.pattern-wrap .open-box .example .ttl{
		width: 26.4rem;
		height: 6rem;
		font-size: 2.4rem;
		margin-bottom: 2rem;
	}
	.pattern-wrap .open-box .example .image{
		background: var(--inctxt);
		width: 100%;
		height: auto;
	}
	.pattern-wrap .open-box .example .image img{
		height: auto;
	}
	.pattern-wrap .open-box .example .txt{
		font-size: 2rem;
		margin-bottom: .5rem;
		margin-top: -.5rem;
	}
	.pattern-wrap .open-box .example.none{
		margin-top: 4rem;
	}

	/* patternA */
	#pattern-a .ttl-wrap .ashi1 {
		position: absolute;
		top: -9rem;
		width: 19.7rem;
		height: 18.5rem;
		right: 0;
	}
	#pattern-a .pt-block.out .submit{
		margin: 0;
		width: 120rem;
	}

	/* patternB */
	#pattern-b{
		margin-bottom: 10rem;
	}
	#pattern-b .ttl-wrap .ashi1 {
		position: absolute;
		top: -9.5rem;
		width: 12.5rem;
		height: 20.3rem;
		right: 0;
	}
	#pattern-b .ttl-wrap .txt p{
		font-size: 1.8rem;
		letter-spacing: 0;
	}
	#pattern-b .pt-block.out .submit{
		margin: 0;
		width: 120rem;
		background: #fff;
	}

	/* other */
	#other.pattern-wrap .inner{
		padding: 0 0 10rem;
	}
	#other.pattern-wrap .standard{
		margin-bottom: 4rem;
	}
}
/*--------sp--------*/
@media screen and (max-width:767px) {

	/* 共通 */
	.pattern-wrap .inner{
		padding: 10vw 4.5% 10.667vw;
		color: var(--inctxt);
	}
	.pattern-wrap .inner .ttl-wrap{
		margin-bottom: 5.33vw;
		position: relative;
	}
	.pattern-wrap .inner .ttl-wrap .head{
		height: 9.6vw;
		font-size: 5.33vw;
		padding-top: 1.33vw;
		margin-bottom: 2.67vw;
		display: inline-flex;
		padding: 1.33vw 4% 0;
	}
	.pattern-wrap .inner .ttl-wrap h2{
		font-size: 5.87vw;
		letter-spacing: .04em;
		margin-bottom: 1.33vw;
	}
	.pattern-wrap .inner .ttl-wrap h2 span{
		width: 3.2vw;
		height: 3.2vw;
		margin: 0 2.67vw 1.33vw 0;
	}
	.pattern-wrap .inner .ttl-wrap h2 span::before{
		bottom: -0.8vw;
		right: -0.8vw;
		width: 100%;
		height: 1px;
	}
	.pattern-wrap .inner .ttl-wrap h2 span::after{
		top: .8vw;
		right: -.8vw;
		width: 1px;
		height: 100%;
	}

	.pattern-wrap .pt-block:not(:last-child){
		margin-bottom: 6vw;
	}
	.pattern-wrap .pt-block h3{
		height: 13.33vw;
		font-size: 6.4vw;
		padding: 0 4.5%;
	}
	.pattern-wrap .pt-block .box{
		padding: 4.5%;
	}
	.pattern-wrap .pt-block .submit{
		background: #f6f4f4;
		width: -webkit-fill-available;
	}
	.pattern-wrap .pt-block .submit .none{
		display: none;
	}
	.pattern-wrap .pt-block .submit th{
		height: 10.67vw;
		font-size: 4.8vw;
		display: flex;
		align-items: center;
		padding: 0 4.5%;
	}
	.pattern-wrap .pt-block .submit th span{
		font-size: 4vw;
	}
	.pattern-wrap .pt-block .submit td{
		display: block;
		position: relative;
		padding: 4.5% 4% 5%;
	}
	.pattern-wrap .pt-block .submit td p{
		line-height: 1.3;
		margin-bottom: 2%;
		font-size: 4vw;
		display: flex;
	}
	.pattern-wrap .pt-block .submit td .ef{
		font-size: 8.53vw;
		font-weight: 500;
		color: var(--inccolor);
		line-height: 1;
	}
	.pattern-wrap .pt-block .submit td.right{
		text-align: end;
	}
	.pattern-wrap .pt-block .submit td.right p{
		align-items: baseline;
	}
	
	/* 提出物仕様 */
	.pattern-wrap .open-box{
		padding-bottom: 4.5%;
	}
	.pattern-wrap .open-box h4{
		font-size: 4.8vw;
		height: 12vw;
		padding: 0 4.5%;
		cursor: pointer;
	}
	.pattern-wrap .open-box .in{
		background: #f6f4f4;
		padding: 4.5%;
		margin-bottom: 6vw;
	}
	.pattern-wrap .open-box .wrap{
		margin-bottom: 5.33vw;
	}
	.pattern-wrap .open-box .wrap > li{
		font-size: 4.27vw;
	}
	.pattern-wrap .open-box .wrap > li::before{
		width: 1.6vw;
		height: 1.6vw;
		margin-right: 2vw;
		margin-top: 2%;
	}
	.pattern-wrap .open-box .wrap .f-box{
		flex: 1;
	}
	.pattern-wrap .open-box .wrap .f-box .sub{
		padding-left: 3vw;
		line-height: 1.3;
		margin-top: 1vw;
		font-size: 3.43vw;
	}
	.pattern-wrap .open-box .wrap .sub li{
		font-size: 3.73vw;
		line-height: 1.4;
		display: flex;
		align-items: flex-start;
		margin-bottom: 1.33vw;
	}
	.pattern-wrap .open-box .wrap .sub li::before{
		width: 1.07vw;
		height: 1.07vw;
		margin-right: 2vw;
		margin-top: 2vw;
	}

	.pattern-wrap .open-box .come{
		padding: 4.5%;
		font-size: 3.73vw;
		margin-bottom: 6vw;
	}
	.pattern-wrap .open-box .example.none{
		margin-top: 6vw;
	}
	.pattern-wrap .open-box .example .ttl{
		width: 51vw;
		height: 10.6vw;
		font-size: 4.8vw;
		padding-top: 1.33vw;
		margin-bottom: 2.67vw;
	}
	.pattern-wrap .open-box .example .image{
		height: auto;
		width: 100%;
		position: relative;
		border: 1px solid #c9c9c9;
	}
	.pattern-wrap .open-box .example .image::after {
		content: "";
		background: url(../img/rule/icon_search.png) no-repeat;
		background-size: contain;
		position: absolute;
		right: 0;
		bottom: 0;
		width: 8vw;
		height: 8vw;
	}
	.pattern-wrap .open-box .example .image img{
		object-fit: contain;
		height: auto;
	}
	.pattern-wrap .open-box .example .txt{
		margin-bottom: 1.33vw;
		margin-top: -1.33vw;
	}

	
	.pattern-wrap .pt-block.out .submit td{
		padding: 4.5%;
	}
	.pattern-wrap .pt-block.out .submit td .ef{
		font-size: 6.4vw;
	}
	.pattern-wrap .pt-block.out .submit td:first-child{
		padding: 4.5% 4.5% 0;
	}


	/* patternA */
	#pattern-a .ttl-wrap .ashi1 {
		position: absolute;
		bottom: -5.33vw;
		width: 39.2vw;
		height: 36vw;
		right: -4vw;
	}
	#pattern-a .pt-block.out .submit{
		margin: 0;
		width: 100%;
	}

	/* patternB */
	#pattern-b{
	}
	#pattern-b .ttl-wrap .ashi1 {
		position: absolute;
		width: 29.33vw;
		height: 49.07vw;
		right: 0;
		bottom: -5.33vw;
	}
	#pattern-b .ttl-wrap .txt p{
		font-size: 4vw;
	}
	#pattern-b .pt-block.out .submit{
		margin: 0;
		width: 100%;
		background: #fff;
	}
}



/*------------------------
エフェクト
------------------------*/
.img-animation {
	overflow: hidden;
	position: relative;
	opacity: 0;
}
.img-animation.active{
	opacity: 1;
}
.img-animation.active::before {
	animation: img-animation 1s cubic-bezier(.4, 0, .2, 1) forwards;
	background: var(--accentcolor);
	content: '';
	pointer-events: none;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: -1px;
	z-index: 1;
}
@keyframes img-animation {
	100% {
		transform: translateX(100%);
	}
}



/*------------------------
ルール
------------------------*/
/*--------共通--------*/

/*--------pc--------*/
@media screen and (min-width:768px) {
}
/*--------sp--------*/
@media screen and (max-width:767px) {
}