@charset "utf-8";

/*--------------------------------------

　求人ページ

---------------------------------------*/
/*レイアウト*/
.c--container {
	width: min(100%, 1024px);
	margin: 0 auto;
	padding: 32px 24px;
	background: var(--color-bg);
}
.content-box{
	max-width:976px;
	margin:0 auto
}

/* トップ */
#top {
	width:100%;
	overflow: hidden;
	background: var(--color-accent);
}
.c-content-wrapper1 {
	position: relative;
	padding: 170px 16px 160px;
	background: var(--background-top) no-repeat 55%;
	background-size: cover;
}
.c-content-wrapper2 {
	position: relative;
	max-width:1024px;
	margin:0 auto;
	padding: 32px 24px;
	background: var(--color-accent);
}
.c-content-wrapper2::before {
	content: "";
	position: absolute;
	top: -100px;
	left: 50%;
	width: 0;
	height: 0;
	border-bottom: 101px solid var(--color-accent);
	border-left: 100vw solid transparent;
	transform: translateX(-50%);
}
.c--title-copy {
	display: block;
	margin: 16px auto 0;
}
.c--title-logo {
	position: absolute;
	right: 6%;
	bottom: 0%;
	width: 46%;
	height: auto;
	z-index: 2;
}
.c--day-part,
.c--night-part {
	padding: 16px 16px 32px;
	border: solid 2px var(--color-text);
	border-radius: var(--round-m);
	background: var(--color-bg);
	text-align: center;
}
.c--title-day {
	font-family: var(--font-jp);
	font-size: var(--font-size-title-m);
	font-weight: bold;
	line-height: var(--line-m);
}
.c--title-day::before {
	content: url(../../../images/common/icon/icon_day.png);
	display: block;
	width: 64px;
	margin: 0 auto;
}
.c--title-night {
	font-family: var(--font-jp);
	font-size: var(--font-size-title-m);
	font-weight: bold;
	line-height: var(--line-m);
}
.c--title-night::before {
	content: url(../../../images/common/icon/icon_night.png);
	display: block;
	width: 64px;
	margin: 0 auto;
}
.c--title-m2 {
	color: var(--color-primary);
	font-family: var(--font-en);
	font-size: var(--font-size-price);
	font-weight: bold;
}
.day--part_salary{
	line-height:var(--line-1);
}
.c--title-m3 {
	color: var(--color-primary);
	font-family: var(--font-en);
	font-size: var(--font-size-price);
	font-weight: bold;
}
.night--part_salary {
	line-height: var(--line-1);
}
.c--title-m2::before {
	content: "体験時給";
	display: inline-block;
	margin:0 16px 6px 0;
	padding: 8px 16px;
	border-radius: var(--round-l);
	background: var(--color-primary);
	font-family: var(--font-jp);
	font-size: var(--font-size-paragraph);
	color: var(--color-accent);
	vertical-align: middle;
	line-height:var(--line-1);
}
.c--title-m2::after {
	content: "円～";
	display: inline-block;
	font-family: var(--font-jp);
	font-size: var(--font-size-title-m);
	color: var(--color-primary);
	line-height:18px;
}
.c--title-m3::before {
	content: "入店時給";
	display: inline-block;
	margin: 0 16px 6px 0;
	padding: 8px 16px;
	border-radius: var(--round-l);
	background: var(--color-primary);
	font-family: var(--font-jp);
	font-size: var(--font-size-paragraph);
	color: var(--color-accent);
	vertical-align: middle;
	line-height: var(--line-1);
}
@media screen and (min-width: 600px) {
.c--title-logo {
	position: absolute;
	right: 6%;
	bottom: 0%;
	width: 23%;
	height: auto;
	z-index: 1;
}
.c--title-m2 {
	color: var(--color-primary);
	font-family: var(--font-en);
	font-size: var(--font-size-price_l);
	font-weight: bold;
}
.c--title-m2::before {
	content: "体験時給";
	display: inline-block;
	margin: 0 16px 12px 0;
	padding: 8px 16px;
	border-radius: var(--round-l);
	background: var(--color-primary);
	font-family: var(--font-jp);
	font-size: var(--font-size-paragraph);
	color: var(--color-accent);
	vertical-align: middle;
	line-height: var(--line-1);
}
.c--title-m3 {
	color: var(--color-primary);
	font-family: var(--font-en);
	font-size: var(--font-size-price_l);
	font-weight: bold;
}
.c--title-m3::before {
	content: "入店時給";
	display: inline-block;
	margin: 0 16px 12px 0;
	padding: 8px 16px;
	border-radius: var(--round-l);
	background: var(--color-primary);
	font-family: var(--font-jp);
	font-size: var(--font-size-paragraph);
	color: var(--color-accent);
	vertical-align: middle;
	line-height: var(--line-1);
}
}
@media screen and (min-width: 865px) {
.c-content-wrapper1 {
	position: relative;
	padding: 300px 16px 160px;
	background: var(--background-top) no-repeat 55%;
	background-size: cover;
}
}
.c--title-m3::after {
	content: "円～";
	display: inline-block;
	font-family: var(--font-jp);
	font-size: var(--font-size-title-m);
	color: var(--color-primary);
	line-height: 18px;
}
.c--title-m3 {
	color: var(--color-primary);
	font-family: var(--font-en);
	font-weight: bold;
}

/* オープニングキャスト募集 */
#cast {
	width: 100%;
	background: var(--color-primary);
}
.c--cast-text {
	color: var(--color-bg);
	font-size: var(--font-size-base);
	font-weight: lighter;
	line-height: var(--line-m);
}
.c--cast-text span {
	display: inline-block;
}
.c--cast-text span::before,
.c--cast-text span::after {
	display: inline-block;
	content: '';
	width: 1px;
	height: 20px;
	background-color: var(--color-bg);
	vertical-align: middle;
}
.c--cast-text span::before {
	margin-right: 8px;
	transform: rotate(-35deg)
}
.c--cast-text span::after {
	margin-left: 8px;
	transform: rotate(35deg)
}
@media screen and (min-width: 600px) {
.opening-swiper {
	width: 50vw;
}
}

/* スワイパ―オープニングキャストーぺジネーション */
.swiper-slide_box {
	height: 100%;
}
.swiper-slide span {
	display: inline-block;
	color: var(--color-primary);
	font-size: var(--font-size-title-m);
	font-weight: bold;
	line-height: var(--line-1);
}
.cast-pagination {
	width: 60px;
	background: var(--color-CR1200);
}

/* なかよしフォト */
#photo {
	width:100%;
	background-color: #D8EAFF;
	background-image: radial-gradient(#fff 10%, transparent 13%), radial-gradient(#fff 10%, transparent 13%);
	background-size: 60px 60px;
	background-position: 0 0, 30px 30px;
}
.horizontal-wrapper {
	position: relative;
	margin-right: -24px;
	margin-left: -24px;
	overflow-x: hidden;
}
.horizontal {
	display: flex;
	padding-left: 24px;
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
}
.horizontal ul {
	display: flex;
	padding-right:24px;
}
.horizontal ul li {
	display: grid;
	place-items: center;
	width: 124px;
	height: 165px;
	margin-left: 8px;
	display: inline-block;
	white-space: nowrap;
}
.horizontal ul li:first-child {
	margin-left: 0;
}
.horizontal ul li img {
	width:100%;
	height:100%;
	border: solid 1px var(--color-bg);
	border-radius: var(--round-s);
	object-fit: cover;
}

/* 募集要項 */
#job {
	width:100%;
	background: var(--background-job);
}
.map {
	width: 100%;
	height: 100%;
}
.map iframe {
	width: 100%;
	height: calc(100% + 360px);
	object-fit:cover
}

/* テーブル募集要項 */
.c--table_data {
	width: 100%;
	table-layout: fixed;
	border: solid 1px var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-jp);
	font-weight: normal;
	font-size: var(--font-size-paragraph);
}
.c--table_data th {
	width: 27%;
	padding: 16px;
	line-height: var(--line-s);
	background: var(--color-primary-sub);
	border-bottom: solid 1px var(--color-bg);
	color: var(--color-CR100);
	font-weight: normal;
	vertical-align: top;
}
.c--table_data td {
	padding: 16px;
	background: var(--color-CR100);
}
.c--table_data ul.bullet_points li::before {
	content: "✦";
}
.c--table_data a.text {
	color: var(--color-link);
	text-decoration-line: underline;
	text-decoration-color: var(--color-link);
}

/* 料金システム */
#fee {
	width: 100%;
	background-color: #9EDCFF;
	background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #88D2FC), color-stop(.25, transparent), to(transparent)), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #88D2FC), color-stop(.25, transparent), to(transparent)), -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #88D2FC)), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #88D2FC));
	background-size: 35px 35px;
}

/* テーブル料金システム */
.c--table_data_fee {
	width: 100%;
	table-layout: auto;
	border: solid 1px var(--color-text);
	color: var(--color-text);
	font-family: var(--font-jp);
	font-weight: normal;
	font-size: var(--font-size-paragraph);
}
.c--table_data_fee th {
	padding: 16px;
	background: var(--color-link);
	border-bottom: solid 1px var(--color-text);
	color: var(--color-CR100);
	font-weight: var(--font-weight-base);
	vertical-align: top;
	text-align: center;
}
.c--table_data_fee td {
	padding: 16px;
	background: var(--color-CR100);
}
.c--table_data_fee tr td:first-of-type {
	text-align: center;
}
.c--table_data_fee p {
	text-align: center;
}
.table--data_p {
	line-height: var(--line-1);
}
.c--td-right {
	text-align: right;
}
.td-box1 {
	border-right: solid 1px var(--color-text);
}
.tr-box1 {
	border-bottom: solid 1px var(--color-text);
}
td {
	line-height: 1.4;
	vertical-align: middle;
}
td.td-first {
	width: 44%;
	line-height: 1.4;
	background: var(--color-CR160);
}

/* グループ店紹介 */
#group {
	width: 100%;
	background: var(--color-secondary);
}
#group .swiper-wrapper {
    margin-bottom: 16px;
}
.sns-container {
	text-align: center;
}

/* スワイパ―グループーぺジネーション */
.group-pagination {
	width: 60px;
	background: var(--color-CR1200);
}

/* 採用担当者より */
#staff {
	width: 100%;
	background: var( --color-accent);
}
.c--staff-text {
	font-size: var(--font-size-paragraph);
	font-weight: normal;
}
.thumb_movie {
	display: block;
	width: 100%;
	margin: 0 auto;
	border-radius: var(--round-m);
}

/* フッター */
#footer small {
	padding: 8px 0;
}
.footer_wrapper {
	width: 100%;
	margin: 0 auto;
	padding: 0px 24px;
	background-color: var(--color-text);
	color: var(--color-CR160);
	text-align: center;
}
.footer_wrapper small {
	display: block;
	padding-bottom: 8px;
	color: var(--color-CR160);
	font-size: var(--font-size-caption);
	line-height: var(--line-1);
}
.btn-container {
	position: fixed;
	left: 50%;
	bottom: 0%;
	z-index: 5;
	width: 100%;
	margin: 0 auto;
	padding: 24px;
	background-color: rgba(54,54,54,.9);
	transform: translateX(-50%);
}