@charset "UTF-8";
/*
	common
----------------------------------------------------------------------------------------*/
.ctsArea{
	padding: 170px 0 100px;
	text-align: center;
}
.cts__ttl {
	margin: 0 0 40px 0;
	height: auto;
	display: inline-block;
}
.cts__ttl::before {
	height: 40px;
	left: -40px;
	transform: none;
	transform: translateY(-50%);
	top: 50%;
}
@media screen and (max-width: 768px){
	.hamburger {
		background-color: #9ADC15;
	}
}
@media screen and (max-width:668px){
	.ctsArea{
		padding: 80px 5% 100px;
		text-align: center;
	}
	.cts__ttl::before {
		left: 11px;
		top: 39%;
	}
	.hamburger {
		background-color: #9ADC15;
	}
	.ttl-h2 {
		padding: 0 0 10px 40px;
	}
}
/*header
----------------------------------------------------------------------------------------*/
.header__ttl a {
	min-width: 370px;
	height: 115px;
	padding: 10px 20px 20px 3%;
	border-radius: 0 0 40px 0;
	background-color: #FFF;
	position: absolute;
	top: 0;
	left: 0;
}
.header__ttl img{
	width: 212px;
	height: 60px;
	margin: 0;
}
.header__menu {
	width: 62%;
	max-width: 1000px;
	margin: 0 40px 0 auto;
}
.h1__box-txt {
	margin: 27px 0 0 5px;
		display: inline-block;
}
.sub__menu li:first-child a::after {
    border-color: transparent transparent #9ADC15 transparent;
}
.sub__menu li:hover a {
	background-color: #B8EA3D;
}
@media screen and (max-width:668px){
	.header__ttl a {
		height: 80px;
		min-width: 240px;
		padding: 10px 20px 20px 2%;

	}
	.header__ttl img{
		width: 141px;
		height: 40px;
	}
	.h1__box-txt {
		margin: 17px 0 0 5px;
	}
}

/*
	kv
----------------------------------------------------------------------------------------*/

#kv::after{
	height: 112px;
	width: 426px;
	background: url( "../images/ebetsu_kv_img01.png") no-repeat center center/contain;
	left: 2%;
	animation: fuwafuwa 1s 2.5 ease-in-out .8s alternate;
}
#kv::before{
	width: 92px;
	height: 45px;
	background: url( "../images/footer_img02.png") no-repeat center center/contain;
	right: 15%;
	z-index: 1;
}
.kv__copy {
	text-align: right;
	left: auto;
	transform: none;
	right: 10%;
}
.pading {
	padding: 0 180px 0 0 ;
}
.slider__photo-01 {
	background: url("../images/ebetsu_slider_photo01.png") no-repeat center center/cover;
}
.slider__photo-02 {
	background: url("../images/ebetsu_slider_photo02.png") no-repeat center center/cover;
	
}
.slider__photo-03 {
	background: url("../images/ebetsu_slider_photo03.png") no-repeat center center/cover;
	
}
.slider__photo-04 {
	background: url("../images/ebetsu_slider_photo04.png") no-repeat center center/cover;
}
@media screen and (max-width:668px){
	#kv::after{
		height: 140px;
		width: 154px;
		background: url( "../images/ebetsu_kv_img01_sp.png") no-repeat center center/contain;
		left: 2%;
	}
	#kv::before{
		width: 61px;
		right: 8%;
	}

	.kv__copy {
		right: auto;
		left: 47%;
		transform: translate(-50%,-15%);
	}
	.copy {
		font-size: 3.2rem;
	}
	.pading {
		padding: 0 38px 0 0 ;
	}
	.slider__photo-03 {
		background: url("../images/ebetsu_slider_photo03.png") no-repeat center right/cover;

	}
	.slider__photo-04 {
		background: url("../images/ebetsu_slider_photo04.png") no-repeat center right/cover;
	}
}
/*
	#preparation
----------------------------------------------------------------------------------------*/
#preparation .ctsArea {
	margin: 80px auto 30px;
	padding: 0 50px 0 50px;
	/*background-color: #E2F5BB;*/
	border-radius: 10px;
}
.preparation-ttl {
	font-size: 5rem;
	margin: 0 auto;
	max-width: 700px;
	border-top: 2px solid #333333;
	border-bottom: 2px solid #333333;
}
.preparation-txt {
	margin: 15px auto 0;
}
@media screen and (max-width:668px){
	#preparation .ctsArea {
		margin: 20px auto 30px;
		padding: 30px 40px 0px 40px;
	}
	.preparation-ttl {
		font-size: 3rem;
	}
}
/*
	#read
----------------------------------------------------------------------------------------*/
#read .ctsArea {
	padding: 90px 0 0 0
}
.read-txt {
	text-align: center;
	font-weight: 700;
	position: relative;
	line-height: 2.2;
}
.read-txt::after,
.read-txt::before,
.aisatsu::after{
	position: absolute;
	content: "";
	display: block;
}
.read-txt::after{
	background: url("../images/read_img01.png")no-repeat center center/cover;
	width: 230px;
	height: 183px;
	top: 0;
	left: 0;
}
.read-txt::before{
	background: url("../images/read_img02.png")no-repeat center center/cover;
	width: 130px;
	height: 135px;
	top: 0px;
	right: 60px;
}
.aisatsu {
	background-color: #E2F5BB
}

.aisatsu::after {
	background: url("../images/top_header_img.png")no-repeat center center/cover;
	width: 48px;
	height: 66px;
	top: -64px;
	right: 30px;
}
.aisatsu .cts__ttl {
	margin: 0 auto;
}
.aisatsu .cts__ttl::before {
	width: 78px;
	height: 22px;
	background: url( "../images/aisatsu_img01.png") no-repeat center center/contain;
	left: -85px;
	transform: translateY(-50%);
	top: 50%;
}
.aisatsu .cts__ttl::after {
	position: absolute;
	content: "";	
	width: 78px;
	height: 22px;
	background: url( "../images/aisatsu_img02.png") no-repeat center center/contain;
	left: -auto;
	right: -85px;
	transform: translateY(-50%);
	top: 50%;
	z-index: 1;
}
.aisatsu__box {
	text-align: left;
	align-items: center;
}
.aisatsu__img {
	width: 206px;
	height: 206px;
}
.aisatsu__txt {
	margin: 30px 0 0 0;
	width: 75%;
}
.aisatsu__txt p{
	letter-spacing: 0;
}
.txt-right {
	text-align: right;
	margin: 10px 0 0 0;
}
.aisatsu__txt {
	margin: 30px 0 0 0;
	width: 100%;
}
@media screen and (max-width:668px){
	#read .ctsArea {
		padding: 50px 5% 0
	}
	.read-txt {
		line-height: 2;
	}
	.read-txt::after{
		width: 115px;
		height: 90px;
		top: 80px;
		z-index: -1;
	}
	.read-txt::before{
		width: 65px;
		height: 68px;
		top: -10px;
		right: 20px;
		z-index: -1;
	}
	.aisatsu .ttl-h2 {
		padding: 0 0 10px 0;
	}
	.aisatsu::after {
		width: 24px;
		height: 33px;
		top: -32px;
	}
.aisatsu .cts__ttl::before {
	width: 78px;
	height: 22px;
	background: url( "../images/aisatsu_img01.png") no-repeat center center/contain;
	left: -85px;
	transform: translateY(-50%);
	top: 50%;
}
.aisatsu .cts__ttl::after {
	position: absolute;
	content: "";	
	width: 78px;
	height: 22px;
	background: url( "../images/aisatsu_img02.png") no-repeat center center/contain;
	left: -auto;
	right: -85px;
	transform: translateY(-50%);
	top: 50%;
	z-index: 1;
}
	.aisatsu__img {
		width: 137px;
		height: 137px;
		margin: 10px auto 0;
	}
	.aisatsu__txt {
		margin: 20px 0 0 0;
		width: 100%;
	}
}
/* #hoshin
----------------------------------------------------------------------------------------*/
#hoshin {
	padding: 10px ;
}
#hoshin .ctsArea {
	padding: 130px 0 150px;
	margin: 0px auto 0;
}
#hoshin .cts__ttl {
	margin: 0 0 0 40px;
}
#hoshin .hoshin__txt {
	margin: 15px 0 0 0;
	padding: 0 0 17px 20px;
	font-size: 1.6rem;}
.hoshin {
	margin: 15px auto  0 20px;
}
.hoshin__box {
	width: 50%;
	padding: 0 20px;
	text-align: left;
}
.hoshin::after,
.hoshin::before{
	content: none;
}
.hoshin__box-img {
	margin: 70px 50px 0 0;
	position: relative;
	width: 410px;
	height: 252px;
	text-align: center;
}

.hoshin__box-img::after,
.hoshin__box-img::before{
	content: "";
	position: absolute;
	display: block;
	bottom: -20px;
}
.hoshin__box-img::after {
	background: url( "../images/hoshin_img01.png") no-repeat center center/contain;
	width: 188px;
	height: 142px;
	right: 0;
	bottom: -80px;
}
.hoshin__box-img::before {
	background: url( "../images/hoshin_img02.png") no-repeat center center/contain;
	width: 383px;
	height: 312px;
	left: 0;
	bottom: -40px;
	z-index: -1;
}
.hoshin__txt {
	width: 100%;
	position: relative;
}
@media screen and (max-width:668px){
#hoshin .ctsArea {
	padding: 40px 0 170px 0;
	display: block;
}
	#hoshin .cts__ttl {
		margin: 0;
	}
	#hoshin .hoshin__txt {
		margin: 10px 0 0 0;
		padding: 0 0 10px 15px;
	}
	.hoshin {
		margin: 10px auto  0 0px;
	}
	.hoshin__box {
		width: 	100%;
		max-width: 500px;
		margin: 0 auto;
		padding: 0 20px;
		text-align: left;
	}
	.hoshin::after,
	.hoshin::before{
		content: none;
	}
	.hoshin__box-img {
		margin: 60px auto 0;
		width: 100%;
		height: auto;
	}
	.hoshin__box-img::after {
		width: 125px;
		height: 94px;
		bottom: -40px;
	}
	.hoshin__box-img::before {
		width: 100%;
		height: 260px;
		bottom: -20px;
		z-index: -1;
	}
	.hoshin__txt::after {
		top: 1px;
	}
}
/* #yousu
----------------------------------------------------------------------------------------*/
#yousu::before {
	height: 206px;
	width: 200px;
	background: url( "../images/ebetsu_yousu_photo01.png") no-repeat top center/cover;
	top: -25px;
	left: 90px;
	z-index: 1;
	animation: fuwafuwa02 1s infinite ease-in-out .8s alternate;
}
#yousu .cts__ttl::before {
	width: 35px;
	height: 35px;
	background: url(../images/icon-06.svg) no-repeat center center/contain;
	left: -40px;
}
.bnr__box {
	margin: 60px auto 0;
	width: 100%;
	max-width: 850px;
}
.bnr-1 a,
.bnr-2 a{
	width: 400px;
	height: 100px;
	display: block;
}
.bnr-1{
	border: #EB8700 solid 2px;
	z-index: 1;
}
.bnr-2{
	border: #FF7680 solid 2px;
}
.autoplay {
	margin: 120px 0 0 0;
	position: relative;
}
.autoplay::before,
.autoplay::after{
	position: absolute;
	content: "";
	display: block;
}
.autoplay::before{
	width: 246px;
	height: 122px;
	background: url( "../images/yousu_img02.png") no-repeat center center/contain;
	top: -100px;
	left: 50%;
	transform: translateX(-50%);
}
.autoplay::after {
	width: 244px;
	height: 168px;
	background: url( "../images/yousu_img03.png") no-repeat center center/contain;
	top: -160px;
	right: 0;
	z-index: 1;
	animation: fuwafuwa 1s 2.5 ease-in-out .8s alternate;
}
.autoplay-img  {
	max-height: 200px;
	border-right: solid 4px #FFF;
	border-top: solid 4px #FFF;
}
@media screen and (max-width:668px){
	#yousu .ctsArea{
		width: 100%;
		padding: 80px 5% 70px;
	}
	#yousu::before {
		height: 103px;
		width: 100px;
		top: -25px;
		left: 5%;
	}
	#yousu .cts__ttl::before {
		left: 0px;
	}
	.bnr__box {
		width: 90%;
	}
	.bnr-1 a,
	.bnr-2 a{
		width: 100%;
		height: auto;
		display: block;
	}
	.bnr-2{
		margin: 30px 0 0 0;
	}
	.autoplay {
		margin: 90px 0 0 0;
	}
	.autoplay::after {
		width: 122px;
		height: 94px;
		top: -85px;
	}
	.autoplay::before {
		width: 164px;
		height: 81px;
		top: -60px;
		
	}
}
/*table
----------------------------------------------------------------------------------------*/

.yousu__box table{
	margin: 10px auto 0;
	padding: 20px;
	min-width: 520px;
	background-color: #FFF;
	border-radius: 10px;
	min-height: 870px;
}
.yousu__box-table{
	margin: 20px 0;
}
.yousu__box-table .txt-left{ 
	text-align: left;
}
.oneday__table-head th,
.oneyear__table-head th{
	margin: 10px 0 0 0;
	display: revert;
	max-width: 200px;
	font-weight: 400;
	font-size: 1.8rem;
}
.oneday__table tbody th,
.oneyear__table tbody th{
	margin: 15px 20px 0 0;
	border-bottom: dashed 1px #333333;
}
.oneday__table td,
.oneyear__table td{
	padding: 0 20px;
	border-bottom: dashed 1px #333333;
}
.oneday__table td{
	max-width: 227px;
	min-width: 220px;
}
.oneyear__table td{
	text-align: left;
}
.oneday__table p,
.oneyear__table p{
	line-height: 1.4;
}
.right-dashed {
	border-right: dashed 1px #333333;
}
.oneyear__table,
.oneday__table{
	position: relative;
}
.oneday__table::before,
.oneyear__table::before{
	position: absolute;
	content: "";
	display: block;
}
.oneyear__table::before{
	width: 230px;
	height: 154px;
	background: url("../images/sapporo_yousu_photo02.png") no-repeat center center/contain; 
	top: -125px;
	right: 0;
	animation: fuwafuwa 1s 2.5 ease-in-out .8s alternate;
}
.oneday__table::before{
	width: 226px;
	height: 110px;
	background: url("../images/yousu_img01.png") no-repeat center center/contain; 
	bottom: -100px;
	left: -300px;
	animation: fuwafuwa02 1s infinite ease-in-out .8s alternate;
}
@media all and (-ms-high-contrast: none) {
	.oneday__table-head th,
	.oneyear__table-head th{
		display: table-cell
	}
}
@media screen and (max-width:668px){
	.yousu__box table{
		padding: 20px 10px;
		width: 100%;
		max-width: 500px;
		min-width: auto;
		min-height: auto;
	}
	.yousu__box {
		display: block;
		margin: 0 auto;
	}
	.oneday__table td{
		max-width: auto;
		min-width: auto;
	}
	.oneday__table-head th,
	.oneyear__table-head th{
		min-width: 70px;
		max-height: 50px;
		font-weight: 700;
		font-size: 1.4rem;
	}
	.oneday__table td,
	.oneyear__table td{
		padding: 5px 10px;
		border-bottom: dashed 1px #333333;
	}
	.oneyear__table::before{
		width: 165px;
		height: 77px;
		top: -60px;
	}
	.oneday__table::before{
		width: 113px;
		height: 55px;
		bottom: -22px;
		left: -50px;
	}
	.oneyear__first-td td:nth-child(3){
			padding: 10px 0px 10px 10px;
			min-width: 75px;
	}
}

/*#nyuuen
----------------------------------------------------------------------------------------*/
#nyuuen .cts__ttl::before {
	width: 26px;
	height: 31px;
	background: url(../images/icon-07.svg) no-repeat center center/contain;
}
#nyuuen {
	position: relative;
}
.nyuuen__box {
	border-radius: 10px;
}
.nyuuen__table {
	margin: 20px auto 0;
	width: 900px;
	text-align: left;
	background-color: #FFF;
	position: relative;
}
#nyuuen::before,
#nyuuen::after,
.nyuuen__table::before,
.attention:before{
	content: "";
	position: absolute;
	display: block;
	z-index: -1;
}
#nyuuen::before {
	background: url( "../images/nyuuen_bg01.png") no-repeat center center/contain;
	width: 312px;
	height: 240px;
	top: 80px;
	left: 0;
}
#nyuuen::after{
	background: url( "../images/nyuuen_bg01.png") no-repeat center center/contain;
	width: 312px;
	height: 240px;
	top: 280px;
	right: 0;
}
.nyuuen__table::before {
	background: url( "../images/nyuuen_img01.png") no-repeat center center/contain;
	width: 180px;
	height: 70px;
	top: -64px;
	right: 20px;
	z-index: 1;
}
.nyuuen__table-head th{
	border-bottom: solid 2px #9ADC15;
}
.nyuuen__table-body th{
	background-color: #F8F8F8;
	text-align: center;
}

.nyuuen__table-body th,
.nyuuen__table-body td{
	padding: 10px;
	border-bottom: dashed 1px #333333;
}
.nyuuen__table-body td{
	padding: 10px 10px 10px 50px;
}
.nagare {
	margin: 120px auto 40px;
}
.nagare__ttl {
	display: inline-block;
}
.nagare__ttl .txt-middle{
	margin: 10px 0 0 0;
}
.nagare .area-orenge{
	padding: 5px 50px;
	border-radius: 30px;
}
.number__box {
	margin: 50px auto 40px;
	padding: 0 60px;
}
.number {
	position: relative;
	width: 200px;
	height: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.txt-number {
	z-index: 1;
	font-size: 2.4rem;
	position: relative;
}
.number::after {
	content: "";
	width: 15px;
	height: 15px;
	border-top: 3px solid #333333;
	border-right: 3px solid #333333;
	position: absolute;
	top: 50%;
	right: -10%;
	transform: rotate(
45deg)translateY(-75%);
}
.number:last-of-type::after {
	content: none;
}
.txt-number::after {
	font-size: 4.8rem;
	position: absolute;
	top: -80px;
	left: 50%;
	transform: translateX(-50%);
}
.number-1 .txt-number::after {
	content: "1";
}
.number-2 .txt-number::after {
	content: "2";
}
.number-3 .txt-number::after {
	content: "3";
}
.number-4 .txt-number::after {
	content: "4";
	top: -100px;
}
.number::before {
	content: "";
	width: 198px;
	height: 199px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	position: absolute;
	display: block;
}
.number-1::before {
	background: url( "../images/nyuuen_img02.png") no-repeat center center/contain;
}
.number-2::before {
	background: url( "../images/nyuuen_img03.png") no-repeat center center/contain;
}
.number-3::before {
	background: url( "../images/nyuuen_img04.png") no-repeat center center/contain;
}
.number-4::before {
	background: url( "../images/nyuuen_img05.png") no-repeat center center/contain;
	width: 199px;
}
.attention {
	margin: 80px auto 0;
	padding: 30px 15px;
	background-color: #FCEDD9 ;
	border-radius: 10px;
}
.attention .txt-middle{
	padding: 10px 0 0 0;
	letter-spacing: 0;
	line-height: 1.6;
}
@media screen and (max-width:668px){
	#nyuuen .cts__ttl::before {
		left: 10px;
	}
	.nyuuen__table {
		padding: 0;
		width: 100%;
	}
	#nyuuen::after{
		top: 400px;
	}
	.nyuuen__table::before {
		width: 90px;
		height: 35px;
		top: -30px;
	}
	.nyuuen__table-body td{
		padding: 10px 10px 10px 20px;
	}
	.nagare {
		margin: 80px auto 40px;
	}
	.nagare .area-orenge{
		font-size: 1.6rem;
		padding: 5px 39px;
	}
	.number__box {
		width: 50%;
		max-width: 200px;
		margin: 50px auto 40px;
		padding: 0 0px;
		justify-content: center;
	}
	.number {
		width: 130px;
		height: 130px;
	}
	.number::after {
		width: 10px;
		height: 10px;
		border-top: 3px solid #666666;
		border-right: 3px solid #666666;
		top: 115%;
		right: 50%;
		transform: rotate(
	135deg)translateY(-50%);
	}
	.txt-number {
		font-size: 1.8rem;
	}
	.number-1,
	.number-2,
	.number-3{
		margin: 0 0 80px 0;
	}
	.number-4 .txt-number::after {
		content: "4";
		top: -77px;
	}
	.txt-number::after {
		font-size: 4rem;
		top: -60px;
		left: 50%;
	}
	.number::before {
		width: 132px;
		height: 132px;
	}
	.attention {
		margin: 80px 5% 0;
		padding: 30px 20px;
	}
}
/*#
----------------------------------------------------------------------------------------*/
#gaiyo {
	background: repeating-linear-gradient(-45deg, #F7F7F7, #F7F7F7 8px, #F4F4F4 8px, #F4F4F4 20px);
}
#gaiyo::after {
	content: none;
}
#gaiyo .cts__ttl::before {
	width: 40px;
	background: url("../images/icon-03.svg") no-repeat center center/contain;
}
#gaiyo .mail .cts__ttl::before {
	width: 40px;
	background: url("../images/icon-05.svg") no-repeat center center/contain;
}
.access__table-head th {
	border-bottom: solid 2px #9ADC15;
	letter-spacing: -0.1rem;
}
@media screen and (max-width:668px){
	#gaiyo .cts__ttl::before {
		left: -3px;
		 top: 31%;
	}
}
/*
	#info
----------------------------------------------------------------------------------------*/
#info {
    padding: 0;
}
.info {
	padding: 40px;
	background-color: #FFF;
	border-radius: 10px;
	position: relative;
}
.info::after,
.info::before{
	content: none;
}
@media screen and (max-width:668px){
	.info {
		padding: 20px;
	}
	.info__box {
		text-align: left;
	}
}
.footer {
	background-color: #9ADC15;

}
.footer::after {
	background: url( "../images/ebetsu_footer_img.png") no-repeat top right/cover;
}