@charset "UTF-8";
/* CSS Document */
//ブレイクポイントを指定------ここから
$xl: 1399px;
$lg: 1199px;
$md: 991px;
$sm: 767px;
$xs: 575px;

@mixin xl {
  @media screen and (max-width: ($xl)) {
    @content;
  }
}
@mixin lg {
  @media screen and (max-width: ($lg)) {
    @content;
  }
}
@mixin md {
  @media screen and (max-width: ($md)) {
    @content;
  }
}
@mixin sm {
  @media screen and (max-width: ($sm)) {
    @content;
  }
}
@mixin xs {
  @media screen and (max-width: ($xs)) {
    @content;
  }
}
//ブレイクポイントを指定------ここまで

//メインカラー指定
$color-main: #F18D00;
$color-main-font: #C25800;
$color-main-back: #FEF4E5;
$color-sub: #88CBC1;
$color-sub-half: #C3E5E0;
$color-sub-font: #339999;
//table
$color-thead: #ACDBD4;
$color-th:  #E0F1F1;
//footer
$color-footer: #CE7933;


#wrapper{
	overflow: hidden;
}

.pdf-link {
	display: block;
	width: 60%;
	background-color: #ca464f;
	color: #fff;
	line-height: 1;
	padding: 1.5rem 2rem;
	margin-bottom: 1rem;
	border: solid 1px #ca464f;
	border-radius: 23px;
	@include lg {
		width: 70%;
	}
	@include md {
		width: 80%;
	}
	@include sm {
		width: 100%;
		text-indent: -2.2rem;
		padding-left: 4.2rem;
		line-height: 1.4;
		border-radius: 45px;
	}
	@include xs {
		padding: 1rem 2rem 1rem 4rem; 
	}
	&::before {
		content: "";
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		content: "\f1c1";
		margin-right: 1rem;
	}
	&:hover {
		background-color: #fff;
		color: #ca464f;
	}
}



//header------ここから
header{
	background-color: $color-sub-half;
	h2{
		text-align: center;
		font-weight: bold;
		font-size: 3.5rem;
		font-size: 35px;
		color: $color-main!important;
		text-shadow:1px 1px 1px white,0 0 9px white; 
		@include sm{
			font-size: 3rem;
			font-size: 30px;
			line-height: 5rem;
		}
		span{
			margin-left: -1.5rem;
			font-size: 4rem;
			font-size: 40px;
			@include sm{
				margin-left: 0rem;
			}
		}
	}
}
//header------ここまで


//article------ここから
article {
	background-color: inherit!important;
}

.orange-back{
	background: $color-main-back;
	padding-bottom: 10rem;
}
//article------ここまで


//breadcrumb------ここから
.breadcrumb {
	padding: 3rem 2rem 1rem;
	list-style: none;
	background: none;
	li{
		display: inline;
		list-style: none;
		a{
			text-decoration: none;
			color: #000;
			&:hover{
				color: $color-main;
			}
		}
		&:after{
			font-family: "Font Awesome 5 Free";
			content: '\f105';
			padding: 0 0.5em;
			font-weight: 900;
		}
	}
	li:last-child{
		&:after{
			content:"";
		}
		a{
			color: $color-main;
		}
	}
}
//breadcrumb------ここまで



//#pokapoka-about------ここから
section#pokapoka-about{
	margin-bottom: 8rem;
	h3{
		background: $color-main;
		color: #ffffff;
		font-size: 2.8rem;
		font-size: 28px;
		font-weight: bold;
		display: block;
		border-radius: 1rem;
		padding: 1.5rem 2rem;
		position: relative;
		margin-bottom: 2rem;
		@include xs{
			font-size: 2.3rem;
			font-size: 23px;
		}
		&:after{
			content: "";
			position: absolute;
			bottom: 0;
			right: 20px;
			background: url("../img/tree.svg");
			background-repeat: no-repeat;
			background-position: center center;
			background-size: auto;
			width: 90px;
			height: 90px;
			@include xs{
				right: -10px;
				width: 70px;
				height: 70px;
			}
		}
	}
	div.main-img{
		margin-bottom: 6rem;
		@include sm{
			margin-bottom: 9rem;
		}
		img{
			border-radius: 2rem;
			width: 100%;
		}
		p{
			margin-top: 3rem;
			margin-bottom: 0;
		}
		ul{
			padding: 0;
			position: relative;
			&:after{
				content: "";
				position: absolute;
				bottom: 0;
				right: 25%;
				background: url("../img/sore-poka.svg");
				background-repeat: no-repeat;
				background-position: center center;
				background-size: auto;
				width: 170px;
				height: 50px;
				@include md{
					right: 0;
				}
				@include sm{
					display: block;
					position: relative;
					float: right;
				}
			}
			li{
				&:before{
					content: "●";
					color: $color-main;
					padding-right: 0.5rem;
				}
				@include xs{
					text-indent: -1.4em;
					margin-left: 1.4em;
				}
			}
		}
	}
	section{
		margin-top: 4rem;
		h4{
			color: $color-main-font;
			font-size: 2.3rem;
			font-size: 23px;
			font-weight: bold;
			position: relative;
			padding-left: 4rem;
			&:before{
				content: "";
				position: absolute;
				top: -2px;
				left: 0;
				margin: auto;
				margin-right: 0.5rem;
				background: url("../img/sun.svg");
				background-repeat: no-repeat;
				background-position: center center;
				background-size: auto;
				width: 30px;
				height: 30px;
			}
		}
		dl{
			background: #ffffff;
			border-radius: 1rem;
			padding: 2rem 4.5rem;
			@include xs{
				padding: 2rem 2rem;
			}
			dt{
				display: inline-block;
				background: rgb(254,244,229);
				background: linear-gradient(180deg, rgba(254,244,229,0) 50%, rgba(254,244,229,1) 50%);
				color: $color-main-font;
				font-size: 2.3rem;
				font-size: 23px;
				font-weight: bold;
				margin-bottom: 1rem;
			}
			p{
				display: inline-block;
			}
			dd{
				ul{
					li{
						text-indent: -12.3em;
						margin-left: 13.3em;
						@include xs{
							text-indent: -1.4em;
							margin-left: 1.4em;
						}
						&:before{
							content: "●";
							color: $color-main;
							padding-right: 0.5rem;
						}
					}
				}
				p{
					margin-left: 1em;
					display:block;
				}
			}
		}
		table{
			border: 3px solid $color-sub-font;
			border-collapse: separate;
			border-spacing: 0;
			border-radius: 1.5rem;
			overflow: hidden;
			background: #ffffff;
			width: 95%;
			margin: auto;
			margin-top: 1.5rem;
			@include lg{
				width: 100%;
			}
			thead{
				background: $color-thead;
				th{
					border-bottom:2px solid $color-sub-font;
					border-right: 2px solid #ffffff;
					padding: 0.5rem 2rem;
					@include lg{
						padding: 0.5rem 1rem;
					}
					@include sm{
						padding: 1rem 2rem;
					}
					span{
						font-size: 12px;
						font-size: 1.2rem;
					}
				}
				th:last-child{
					border-right:none;
					line-height: 2rem;
				}
			}
			tbody{
				tr{
					th{
						background: $color-th;
						border-right: 1px solid $color-sub-font;
						font-weight: normal;
						padding: 0.5rem 2rem;
						@include lg{
							padding: 0.5rem 1rem;
						}
						@include md{
							width: 12%;
						}
						@include sm{
							padding: 0rem 2rem;
							width: auto!important;
							border: none;
						}
					}
					td{
						border-right: 2px solid $color-sub-font; 
						padding: 0.5rem 2rem;
						@include lg{
							padding: 0.5rem 1rem;
						}
						@include sm{
							padding: 0rem 2rem;
						}
						@include xs{
							border: none;
						}			
					}
					td:last-child{
						border-right: none;
					}
				}
				tr:first-child{
					th,td{
						@include sm{
							padding-top: 1rem;
						}
					}
				}
				tr:last-child{
					th,td{
						@include sm{
							padding-bottom: 1rem;
						}
					}
				}
			}
		}
		table.type2{
			thead{
				th{
					text-align: center;
					border-right: 1px solid $color-sub-font;
				}
				th:nth-child(2){
					border-right: 2px solid $color-sub-font;
				}
				th:last-child{
					border-right:none;
				}
				@include xs{
					border: none;
				}			
			}
			tbody{
				th{
					width: 7%;
					padding: 0.5rem 1rem;
					border-bottom: 1px solid $color-sub-font;
					@include md{
						width: 8%;
					}
					@include sm{
						width: 10%;
						text-align: center;
					}
					@include xs{
						width:auto!important;
						border: none;
					}
				}
				td{
					padding: 0.5rem 1rem;
					border-bottom: 1px solid $color-sub-font;
					@include xs{
						border: none;
					}
				}
				tr:last-child td,tr:last-child th{
					border-bottom:none;
				}
			}
		}
		table + p{
			margin-left: 3rem;
			@include sm{
				margin-left: 0rem;
			}
		}
	}
}
//#pokapoka-about------ここまで
//#pokapoka-guide------ここから
section#pokapoka-guide{
	h3{
		background: $color-main;
		color: #ffffff;
		font-size: 2.8rem;
		font-size: 28px;
		font-weight: bold;
		display: block;
		border-radius: 1rem;
		padding: 1.5rem 2rem;
		position: relative;
		margin-bottom: 2rem;
		@include xs{
			font-size: 2.3rem;
			font-size: 23px;
		}
		&:after{
			content: "";
			position: absolute;
			bottom: 0;
			right: 20px;
			background: url("../img/tree.svg");
			background-repeat: no-repeat;
			background-position: center center;
			background-size: auto;
			width: 90px;
			height: 90px;
		}
	}
	table{
		border: 3px solid $color-sub-font;
		border-collapse: separate;
		border-spacing: 0;
		border-radius: 1.5rem;
		overflow: hidden;
		background: #ffffff;
		width: 70%;
		margin: auto;
		margin-top: 1.5rem;
		@include lg{
				width: 100%;
			}
		th{
			background: $color-thead;
			border-bottom:1px solid $color-sub-font;
			border-right: 2px solid $color-sub-font;
			padding: 0.5rem 2rem;
			@include sm{
				display: block!important;
				border-right:none!important;
				width:auto!important;
			}
		}
		td{
			border-bottom:1px solid $color-sub-font;
			padding: 0.5rem 2rem;
			@include sm{
				display: block;
			}
		}
		tr:last-child td,tr:last-child th{
			border-bottom:none;
		}
	}
	section{
		margin-top: 4rem;
		h4{
			color: $color-main-font;
			font-size: 2.3rem;
			font-size: 23px;
			font-weight: bold;
			position: relative;
			padding-left: 4rem;
			&:before{
				content: "";
				position: absolute;
				top: -2px;
				left: 0;
				margin: auto;
				margin-right: 0.5rem;
				background: url("../img/sun.svg");
				background-repeat: no-repeat;
				background-position: center center;
				background-size: auto;
				width: 30px;
				height: 30px;
			}
		}
		ol{
			counter-reset:num;
			list-style-type: none!important;
		 	padding:0;
			margin:0;
			li{
				position: relative;
				padding-left: 30px;
				line-height: 1.5em;
				padding: 0.5em 0.5em 0.5em 30px;
				margin-bottom: 2rem;
				@include sm{
					text-align: justify;
				}
				&:before{
					position: absolute;
					counter-increment: num;
					content: counter(num);
					display:inline-block;
					background: $color-main-font;
					color: #FFF;
					font-family: 'Arial',sans-serif;
					font-weight:bold;
					font-size: 14px;
					border-radius: 50%;
					left: 0;
					width: 21px;
					height: 21px;
					line-height: 21px;
					text-align: center;
					top: 10px;
				}
				&:after{
					position: absolute;
					font-family: "Font Awesome 5 Free";
					font-weight: 900;
					content: "\f063";
					color: $color-main;
				}
				h5{
					font-size: 1.9rem;
					font-size: 19px;
					font-weight: bold;
					color: $color-main-font;
				}
			}
			li:last-child{
				&:after{
					display: none;
				}
			}
		}
		ul{
			padding: 0;
			position: relative;
			li{
				&:before{
					content: "●";
					color: $color-main;
					padding-right: 0.5rem;
					@include sm{
						text-align: justify;
					}
				}
			}
		}
	}
	section + div{
		margin: 3rem 0;
		display: flex;
		justify-content: center;
		align-items: center;
		img{
			width: 8%;
			margin-right: 2rem;
			@include sm{
				width: 13%;
				margin-right: 1rem;
			}
			@include xs{
				width: 15%;
			}
		}
		p{
			font-weight: bold;
			font-size: 2.5rem;
			font-size: 25px;
			line-height: 3rem;
			@include xs{
				font-size: 1.7rem;
				font-size: 17px;
				line-height: 2.5rem;
			}
		}
	}
}
//#pokapoka-guide------ここまで
//#pokapoka-pamphlet------ここから
section#pokapoka-pamphlet{
	margin-bottom: 6rem;
	h3{
		background: $color-main;
		color: #ffffff;
		font-size: 2.8rem;
		font-size: 28px;
		font-weight: bold;
		display: block;
		border-radius: 1rem;
		padding: 1.5rem 2rem;
		position: relative;
		margin-bottom: 2rem;
		@include xs{
			font-size: 2.3rem;
			font-size: 23px;
		}
	}
}
//#pokapoka-pamphlet------ここまで
//#staff------ここから
section#staff{
	h3{
		background: $color-main;
		color: #ffffff;
		font-size: 2.8rem;
		font-size: 28px;
		font-weight: bold;
		display: block;
		border-radius: 1rem;
		padding: 1.5rem 2rem;
		position: relative;
		margin-bottom: 2rem;
		@include xs{
			font-size: 2.3rem;
			font-size: 23px;
		}
	}
}
//#staff------ここまで
//#evaluation------ここから
section#evaluation{
	margin-bottom: 6rem;
	h3{
		background: $color-main;
		color: #ffffff;
		font-size: 2.8rem;
		font-size: 28px;
		font-weight: bold;
		display: block;
		border-radius: 1rem;
		padding: 1.5rem 2rem;
		position: relative;
		margin-bottom: 2rem;
		@include xs{
			font-size: 2.3rem;
			font-size: 23px;
		}
	}
}
//#evaluation------ここまで
//#recruit------ここから
section#recruit{
	h3{
		background: $color-main;
		color: #ffffff;
		font-size: 2.8rem;
		font-size: 28px;
		font-weight: bold;
		display: block;
		border-radius: 1rem;
		padding: 1.5rem 2rem;
		position: relative;
		margin-bottom: 2rem;
		@include xs{
			font-size: 2.3rem;
			font-size: 23px;
		}
	}
}
//#recruit------ここまで
//#footer------ここまで
footer .footer-upper {
	background-color: $color-main;
	#page-top a{
		background: $color-main;
	}
	.row a{
		background-color:$color-sub;
		color: #fff;
		&:hover{
			color:$color-sub;
		}
	}
}
footer .footer-lower{
	 background-color:$color-footer;
}
//#footer------ここまで