@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-dark: #824f9b;
.color-dark {
	color: $color-dark;
}
$color-light: #ebe6f2;
.color-dark {
	color: $color-light;
}

/*---------- header ----------*/
header #global-nav {
	background-color: transparent;
    transition: background-color .5s, color .5s;
	h1 {
		color: #fff;
		font-size: 10px;
		font-size: 1rem;
		font-weight: bold;
		margin: 1rem;
		position: relative;
		left: 25%;
		@include xl {
			left: 15%;
		}
		@include lg {
			left: 5%;
			top: 5%;
		}
		span {
			font-size: 30px;
			font-size: 3rem;
			@include md {
				font-size: 27px;
				font-size: 2.7rem;
			}
		}
		a {
			color: #fff;
		}
	}
	.header-inner ul li {
		border-left: solid 1px rgba(255,255,255,0.5);
		&:first-child {
			border-left: none;
		}
//		&:last-child {
//			border-left: none;
//		}
		a {
			color: #fff;
			&:hover {
				color: $color-dark;
				opacity: 1;
			}
		}
	}
}

/* headerの色を変える */
.header.change-color {
    background-color: #fff!important;
	h1 {
		a {
			color: $color-dark!important;
		}
	}
	.header-inner ul li {
		border-left: solid 1px $color-dark!important;
		&:first-child {
			border-left: none!important;
		}
//		&:last-child {
//			border-left: none!important;
//		}
		a {
			color: $color-dark!important;
			&:hover {
				opacity: 0.6!important;
			}
		}
	}
}



/*---------- main-img ----------*/
#main-img {
	background-image: url("../img/top-img.jpg");
	background-size: cover;
	background-position: center;
	@include md {
		background-position: center right 40%;
	}
	@include sm {
		background-position: center right 35%;
	}
	@include xs {
		background-position: center right 30%;
	}
	.container {
		text-align: center;
	}
	img {
		text-align: center;
		width: 62%;
		margin-top: 6rem;
		@include md {
			width: 72%;
			margin-top: 3rem;
		} 
		@include xs {
			width: 82%;
			margin-top: 1rem;
		} 
		}
	.expiration {
		display: inline-block;
		background-color: $color-dark;
		border: solid 5px #fff;
		border-radius: 3rem;
		padding: 0.7rem 2rem;
		font-size: 21px;
		font-size: 2.1rem;
		font-weight: bold;
		color: #f0ec61;
		margin-bottom: 6rem;
		@include md {
			margin-bottom: 4rem;
		}
		@include sm {
			margin-bottom: 3rem;
			font-size: 18px;
			font-size: 1.8rem;
		}
		@include xs {
			margin-bottom: 2rem;
			font-size: 14px;
			font-size: 1.4rem;
			padding: 0.7rem 1rem;
			font-weight: 500;
			border: solid 3px #fff;
		}
		span {
			font-size: 36px;
			font-size: 3.5rem;
			padding: 0.7rem;
			@include sm {
				font-size: 30px;
				font-size: 3rem;
			}
			@include xs {
				font-size: 23px;
				font-size: 2.3rem;
				padding: 0.4rem;
			}
		}
		i {
			font-family: "Font Awesome 5 Free";
			font-style: normal;
			font-weight: 900;
			padding: 0 1rem;
			@include xs {
				padding: 0 0.4rem;
			}
		}
	}
}


/*---------- shops ----------*/
#shops {
	position: relative;
	overflow: hidden;
//	padding-bottom: 5rem;
	padding-bottom: 8rem;
	background-color: $color-light;
	.container {
		position: relative;
		z-index: 1;
	}
	p {
		font-size: 26px;
		font-size: 2.6rem;
		font-weight: bold;
		text-align: center;
		vertical-align: middle;
		margin-bottom: 2rem;
		position: relative;
		@include xs {
			line-height: 1.4;
		}
		span {
			color: $color-dark;
			span {
				font-size: 140%;
			}
		}
		&::after {
			content: '';
			display: inline-block;
			width: 170px;
			height: 170px;
			bottom: -3.7rem;
			left: 0;
			background-image: url("../img/chuppy.png");
			background-size: contain;
			background-repeat: no-repeat;
			position: absolute;
			z-index: 2;
			@include md {
				width: 125px;
				height: 125px;
				bottom: -3.4rem;
			}
			@include sm {
				display: none;
			}
		}
	}
}

#shops .search-map {
	background-image: linear-gradient(260deg, rgba(241, 157, 166, 1), rgba(228, 135, 180, 1) 30%, rgba(210, 152, 193, 1) 40%, rgba(187, 138, 187, 1) 50%, rgba(120, 76, 208, 1) 80%, rgba(88, 112, 180, 1) 94%);
	font-size: 36px;
	font-size: 3.6rem;
	color: #fff;
	font-weight: bold;
	text-align: center;
	padding: 1.5em 0;
	border-radius: 17px;
	transition: 0.2s;
	margin-bottom: 10rem;
	@include sm {
		padding: 1.2em 0;
		margin-bottom: 4rem;
		font-size: 33px;
		font-size: 3.3rem;
	}
	@include xs {
		padding: 1em 0;
		margin-bottom: 4rem;
	}
	&:hover {
		background-image: linear-gradient(100deg, rgba(241, 157, 166, 1), rgba(228, 135, 180, 1) 30%, rgba(210, 152, 193, 1) 40%, rgba(187, 138, 187, 1) 50%, rgba(120, 76, 208, 1) 80%, rgba(88, 112, 180, 1) 94%);
	}
	span {
		font-size: 70%;
	}
}

#shops .search-job-type {
	h3 {
		font-size: 36px;
		font-size: 3.6rem;
		text-align: center;
		span {
			font-size: 70%;
		}
	}
}
/*----------アコーディオン部分----------*/
.accordion-container {
  	position: relative;
  	width: 100%;
	cursor: pointer;
}
.accordion-container .accordion-title {
	display: block;
	position: relative;
	background: #fff;
	cursor: pointer;
	font-size: 22px;
	font-size: 2.2rem;
	color: $color-dark;
	text-align: left;
	padding: 1.2rem;
	border-left: solid 1rem $color-dark;
	margin-top: 2rem;
	@include md {
		font-size: 20px;
		font-size: 2rem;
	}
	@include xs {
		font-size: 16px;
		font-size: 1.6rem;
		text-align: justify;
		padding-right: 4rem;
		line-height: 1.5;
	}
}
.accordion-container .accordion-title:hover,
.accordion-container .accordion-title:active,
.accordion-container .content-entry.open .accordion-title {
	background: #dacdde;
}
.accordion-container .accordion-title.open {
	background: #dacdde;
}
.accordion-title,.accordion-content{
  position: relative;
}
.accordion-title::after {
	font-family: "Font Awesome 5 Free";
	content: "\f054";
    font-size: 22px;
    font-weight: 900;
    position: absolute;
    right: 25px;
    top: 25%;
    display: block;
    color: #bababa;
	@include sm {
		right: 10px;
	}
	@include xs {
		top: 15%;
	}
}
.accordion-title.open::after {
	font-family: "Font Awesome 5 Free";
	content: "\f078";
    font-size: 22px;
    font-weight: 900;
    position: absolute;
    right: 25px;
    top: 25%;
    display: block;
    color: #bababa;
	@include sm {
		right: 10px;
	}
	@include xs {
		top: 15%;
	}
}

.accordion-content {
	display: none;
    background: #ffffff;
	font-size: 17px;
	font-size: 1.7rem;
    padding: 1rem;
	margin-bottom: 2rem;
	ul {
		margin: 0;
		li {
			border-bottom: solid 1px #dcdddd;
			&:hover {
				background: $color-light;
				a {
					color: $color-dark;
				}
			}
			@include md {
				padding: 0;
			}
			a {
				color: #000;
				display: block;
				padding: 1rem;
				&::before {
					font-family: "Font Awesome 5 Free";
					font-weight: 900;
					content: "\f105";
					color: #824f9b;
					padding-right: 0.5rem;
				}
				&:hover {
				color: $color-dark;
				}
			}
			
		}
	}
}
/*---------- アコーディオン部分 ----------*/

#shops .register {
	display: block;
	background-color: #fff;
	border: solid 1px $color-dark;
	margin: 5rem auto;
	width: 85%;
	font-size: 18px;
	font-size: 1.8rem;
	text-align: center;
	padding: 1.5rem 0;
	color: $color-dark;
	transition: 0.3s;
	&:hover {
		background-color: $color-dark;
		color: #fff;
	}
}

#shops .decorate {
	img {
		&:first-child {
			position: absolute;
			top: 10rem;
			left: -4rem;
			width: 220px;
			z-index: 0;
			@include md {
				width: 190px;
				top: 5rem;
			}
			@include sm {
				width: 160px;
			}
			@include xs {
				width: 130px;
			}
		}
		&:nth-child(2) {
			position: absolute;
			top: 50rem;
			right: -5rem;
			width: 240px;
			z-index: 0;
			@include md {
				width: 210px;
				top: 45rem;
			}
			@include sm {
				width: 180px;
				top: 37rem;
			}
			@include xs {
				width: 150px;
				top: 43rem;
			}
		}
		&:last-child {
			position: absolute;
			bottom: 2rem;
			left: -4rem;
			width: 220px;
			z-index: 0;	
			@include md {
				width: 190px;
			}
			@include sm {
				width: 160px;
			}
			@include xs {
				width: 130px;
			}
		}
	}
}

/*---------- summary ----------*/
#summary {
	padding-bottom: 5rem;
	dl {
		display: flex;
		flex-wrap: wrap;
		@include sm {
			display: block;
		}
		dt {
			width: 20%;
			border-bottom: solid 1px $color-dark;
			font-size: 19px;
			font-size: 1.9rem;
			font-weight: normal;
			color: $color-dark;
			padding: 1em 0;
			@include sm {
				border-bottom: none;
				width: 100%;
				padding-bottom: 0;
			}
		}
		dd {
			width: 80%;
			border-bottom: solid 1px #dcdcdc;
			margin-bottom: 0;
			padding: 1em 0;
			@include sm {
				border-bottom: solid 1px $color-dark;
				width: 100%;
				padding-top: 0.5rem;
			}
		}
	}
	table {
		margin-bottom: 1rem;
		width: 100%;
			@include md {
				font-size: 15px;
				font-size: 1.5rem;
				line-height: 1.7;
			}
			@include xs {
				font-size: 12px;
				font-size: 1.2rem;
				line-height: 1.5;
			}
		tr {
			border-bottom: solid 1px #dcdcdc;
			&:first-child {
				border-top: solid 1px #dcdcdc;
				text-align: center;
			}
		}
		th {
			background-color: $color-light;
			font-weight: normal;
			padding: 1rem;
			width: 38%;
			@include md {
				width: 42%;
			}
			@include sm {
				width: 46%;
			}
		}
		td {
			width: 31%;
			@include md {
				width: 27%;
			}
			@include md {
				width: 27%;
			}
			p {
				display: table;
				margin: 0 auto;
			}
		}
	}
	ul {
		li {
			text-indent: -1em;
			padding-left: 1em;
			font-size: 14px;
			font-size: 1.4rem;
			text-align: justify;
			line-height: 1.7;
			&::before {
				content: "◆"
			}
		}
	}
}

/*---------- campaign ----------*/
#campaign {
	background-color: $color-light;
	.container {
		padding-top: 5rem; 
		padding-bottom: 5rem; 
		.left-box {
			padding-right: 6rem;
			@include lg {
				padding-right: 3rem;
			}
			@include sm {
				padding-right: 2rem;
			}
			@include xs {
				padding-right: 1.5rem;
			}
		}
		.right-box {
			padding-left: 5rem;
			@include lg {
				padding-left: 3rem;
			}
			@include sm {
				padding-left: 2rem;
			}
			@include xs {
				padding: 1.5rem 5rem 0;
			}
		}
	}
	h3 {
		font-size: 24px;
		font-size: 2.4rem;
		color: $color-dark;
		font-weight: bold;
		@include md {
			font-size: 21px;
			font-size: 2.1rem;
		}
		@include sm {
			font-size: 18px;
			font-size: 1.8rem;
		}
		span {
			font-size: 34px;
			font-size: 3.4rem;
			display: block;
			margin: 0.5rem 0 2rem;
			@include md {
				font-size: 30px;
				font-size: 3rem;
			}
			@include sm {
				font-size: 27px;
				font-size: 2.7rem;
			}
		}
	}
	p {
		letter-spacing: 0.03em;
		margin-bottom: 2rem;
	}
	a {
		display: block;
		background-color: $color-light;
		color: $color-dark;
		border: solid 1px $color-dark;
		text-align: center;
		font-size: 22px;
		font-size: 2.2rem;
		margin-bottom: 1rem;
		padding: 1rem;
		font-weight: 500;
		position: relative;
		transition: 0.3s;
		&::after {
			font-family: "Font Awesome 5 Free";
			font-weight: 900;
			content: "\f054";
			position: absolute;
			right: 1rem;
		}
		&:hover {
			background-color: $color-dark;
			color: #fff;
		}
		
	}
	.fin {
		color: red;
		font-weight: bold;
		text-indent: -1em;
		padding-left: 1em;
		line-height: 1.7;
	}
}