@charset "UTF-8";


@media screen and (max-width:767px) {/* 画面サイズが767pxまではここを読み込む */}

@media screen and (min-width:768px) and ( max-width:1023px) {/*画面サイズが768pxから1023pxまではここを読み込む*/}

@media screen and (min-width:1024px) {/* 画面サイズが1024からはここを読み込む */}





/* ========================================
　index
======================================== */


@media screen and (max-width:767px) {
/* 画面サイズが767pxまではここを読み込む */

	section {
		width: 100%;
		margin: 0 auto 50px;
	}

	/* top */

	.top {
		position: relative;
		width: 100%;
		background: url('../img/back_0717_sp.jpg');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		aspect-ratio: 9 / 16; /* アスペクト比を保持してレスポンシブ */
		max-width: 768px;
		max-height: 1152px;
	}

	.top .inner {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.top .bg {
		position: absolute;
		center: 0;
		bottom: 50px;
		background: url('../img/sp_top_waku.png');
		background-size: cover;
		background-repeat: no-repeat;
		aspect-ratio: 600 / 583; /* アスペクト比を保持してレスポンシブ */
	}

	.top .inner h1{
		position: absolute;
		top: 77%;
		center: 0;
		text-align: center;
		font-weight: 600;
		font-size: calc(100vw * 12 / 375);
		line-height: 1.1;
	}

	.top .inner h2{
		position: absolute;
		top: 5%;
		center: 0;
		text-align: center;
		font-size: calc(100vw * 24 / 375);
		font-weight: 600;
		color: #fff;
	}

	.top .inner p{
		position: absolute;
		top: 38%;
		center: 0;
		text-align: center;
		font-size: calc(100vw * 20 / 375);
		font-weight: 700;
	}
}



@media screen and (min-width:768px) {
/* 画面サイズが768からはここを読み込む */

	section {
		width: 100%;
		margin: 0 auto 100px;
	}

	.top {
		position: relative;
		width: 100%;
		height: 560px;
		max-width: 960px;
		max-height: 560px;
		background: url('../img/top1024.jpg');
		background-size: cover;
		background-position: top right;
		background-repeat: no-repeat;
	}

	.top .inner {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.top .bg {
		position: absolute;
		bottom: 0;
		background: url('../img/top_kazari.png');
		width: 500px;
		height: 502px;
		background-repeat: no-repeat;
	}

	.top .inner h1{
		position: absolute;
		bottom: 65px;
		left: 140px;
		text-align: center;
		font-weight: 600;
		font-size: 1.4rem;
		line-height: 1.4;
	}

	.top .inner h2{
		width: 100%;
		position: absolute;
		top: 40px;
		left:20px;
		text-align: center;
		font-size: 4rem;
		font-weight: 500;
		color: #fff;
	}

	.top .inner p{
		width: 100%;
		position: absolute;
		top: 180px;
		left: 40px;
		text-align: center;
		font-size: 3rem;
		font-weight: 600;
	}
}


/* キャンペーン */

@media screen and (max-width:767px) {
/* 画面サイズが767pxまではここを読み込む */

	.campaign {
		width: 100%;
		max-width: 768px;
		background: #fae5ea;
		padding: 20px;
	}

	.campaign_inner {
		display: flex;
		flex-direction: column;
		background: #fff;
	}

	.campaign_inner_left {display: none;}

	.campaign_img {}

	.line_img {}

	.campaign_inner_left img {}

	/* campaign h2 */

	.campaign_inner_center {margin-bottom: 20px;}

	.layer{
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		margin: 50px auto;
	}

	.layer-bg{
		background: url('../img/campaign_h2_waku_0719.png');
		width: 220px;
		height: 30px;
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.layer-txt{
		display: block;
		color: #000;
		margin-top: -26px;
		padding-left: 36px;
		font-size: 3rem;
		font-weight: 500;
	}

	.campaign_inner_center p {
		width: 100%;
		padding:  0 0 0;
		text-align: center;
		font-size: 1.6rem;
	}

	.campaign_inner_center .para {
		width: 60%;
		display: inline-block;
		background: #fd8183;
		border: 1px solid #fd8183;
		border-radius :10px;
		padding: 8px 30px;
		margin: 15px auto;
		color: #fff;
		font-size: 2rem;
	}

	.campaign_inner_right .container {display: none;}
}



@media screen and (min-width:768px) {
/* 画面サイズが768からはここを読み込む */


	.campaign_line_sp {display: none;}

	.campaign {
		width: 100%;
		max-width: 960px;
		margin: 0 auto 100px;
		padding: 40px;
		background: #fae5ea;
	}

	.campaign_inner {
		width: 100%;
		display: flex;
		margin: 0 auto;
		background: #fff;
		position: relative;
	}

	.campaign_inner_left {
		position: relative;
		width: 25%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.campaign_inner_left img {
		max-width: 200px;
		max-height: 266px;
		position: absolute;
		width: 75%;
		bottom: 20px;
	}

	.campaign_line {display: none;}

	.campaign_inner_center {
		width: 50%;
		height: 500px;
	}

	/* campaign h2 */

	.layer{
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		margin: 50px auto 0;
	}

	.layer-bg{
		background: url('../img/campaign_h2_waku_0719.png');
		width: 400px;
		height: 100px;
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.layer-txt{
		display: block;
		color: #000;
		margin-top: -80px;
		padding-left: 40px;
		font-size: 5rem;
		font-weight: 500;
	}

	.campaign_inner_center p {
		width: 100%;
		padding:  0 0 0;
		text-align: center;
		font-size: clamp(1.6rem, 2.5vw, 2.4rem); 
	}

	.campaign_inner_center .para {
		width: 60%;
		display: inline-block;
		background: #fd8183;
		border: 1px solid #fd8183;
		border-radius :10px;
		padding: 8px 30px;
		margin: 15px auto;
		color: #fff;
	}

	.campaign_inner_right {width: 10%;}

	.campaign_inner_right .container {
		position: absolute;
		bottom: 0;
		right: 0;
	}

}


/* キャバクラ派遣って？ */

@media screen and (max-width:767px) {
/* 画面サイズが767pxまではここを読み込む */

	.what_caba {
		width: 100%;
		max-width: 768px;
		margin: 0 auto 50px;
		background: #f7ecd0;
		padding: 50px 0;
	}

	.what_caba_left {
		display: flex;
		align-items:flex-start;
	}

	.what_caba_left h2 {
		width: 100%;
		margin-bottom: 30px;
		font-size: 1.8rem;
		font-weight: 600;
	}

	.what_caba_left .headline_3::after {left: 0;}

	.what_caba_left_img {margin-top: -30px;}

	.what_caba_left img{
		max-width: 150px;
		max-height: 200px;
	}

	.what_caba_left .what_caba_left_img{
		display: flex;
		justify-content: center;
	}

	.what_caba_right {
		width: 90%;
		margin: -50px auto 0;
		position: relative;
		z-index: 1 !important;
	}

	.what_caba_right .what_caba_right_inner_1 {
		width: 100%;
		background: #fff;
		margin: 0 0 50px 0;
		padding: 20px;
	}

	.what_caba_right .what_caba_right_inner_1 h3,
	.what_caba_right .what_caba_right_inner_2 h3 {font-weight: 500;}

	.what_caba_right  .what_caba_right_inner_2 {
		width: 100%;
		background: #fff;
		margin-bottom: 50px;
		padding: 20px;
	}

	.what_caba_right .what_caba_right_inner_1 p,
	.what_caba_right .what_caba_right_inner_2 p,
	.what_caba_right .what_caba_right_inner_1 ul li,
	.what_caba_right .what_caba_right_inner_2 ul li {
		margin-bottom: 20px;
	}

}


@media screen and (min-width:768px) {
/* 画面サイズが768からはここを読み込む */

	.what_caba {
		width: 100%;
		max-width: 960px;
		margin: 0 auto 100px;
		display: flex;
		background: #f7ecd0;
		padding: 50px 0;
	}

	.what_caba_left {
		width: 25%;
		height: 500px;
	}

	.what_caba_left h2 {
		width: 100%;
		margin-bottom: 50px;
		font-size: 1.6rem;
		font-weight: 600;
	}

	.what_caba_left .headline_3::after {left: 0;}

	.what_caba_left img{
		max-width: 200px;
		max-height: 266px;
	}

	.what_caba_left .what_caba_left_img{
		display: flex;
		justify-content: center;
	}

	.what_caba_right {
		width: 75%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 20px 0 0;
	}

	.what_caba_right  .what_caba_right_inner_1 {
		width: 100%;
		background: #fff;
		margin: 0 0 50px 0;
		padding: 20px;
	}

	.what_caba_right .what_caba_right_inner_1 h3,
	.what_caba_right .what_caba_right_inner_2 h3 {font-weight: 500;}

	.what_caba_right  .what_caba_right_inner_2 {
		width: 48%;
		background: #fff;
		padding: 20px;
	}

	.what_caba_right .what_caba_right_inner_1 p,
	.what_caba_right .what_caba_right_inner_2 p,
	.what_caba_right .what_caba_right_inner_1 ul li,
	.what_caba_right .what_caba_right_inner_2 ul li {
		margin-bottom: 20px;
	}

}


/* キャバクラ派遣の流れ */

@media screen and (max-width:767px) {
/* 画面サイズが767pxまではここを読み込む */

	.flow {
		position: relative;
		width: 100%;
		max-width: 768px;
		margin: 0 auto 50px;
		background: #fae5ea;
		padding: 50px 0;
	}

	.flow_top {
		display: flex;
		align-items:flex-start:
	}

	.flow h2 {
		width: 60%;
		margin-bottom: 50px;
		font-size: 1.8rem;
		font-weight: 600;
	}

	.flow .josei_img {
		max-width: 129px;
		max-height: 200px;
		position: absolute;
		top: 40px;
		right: 0;
	}

	.flow  .headline_3::after {left: 0;}

	.flow_box {
		width: 90%;
		margin: 0px auto 0;
	}

	.flow_inner {
		width: 100%;
		display: flex;
		flex-direction: column;
		position: relative;
		margin-bottom: 20px;
	}

	.flow_inner .flow_inner_num {
		width:80px;
		height:80px;
		border-radius: 50%;
		background-image: linear-gradient(to right, #d6a44b, #c35457);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
		line-height: 1.2;
		text-align: center;
		color:#fff;
		font-weight:bold;
		z-index: 1;
		margin-left: 10px;
	}

	.flow_inner .flow_inner_text,
	.flow_inner .flow_inner_none {
		position: relative;
		width: 100%;
		background-color: #fff;
		margin-top: -50px;
		padding: 20px 20px 10px;
		border-radius: 5px;
	}

	.flow_inner .flow_inner_text::after {
		content: "";
		position: absolute;
		right: 5%;
		bottom: -20px;
		width: 0;
		background-color: #fff;
		width: 50px;
		height: 30px;
		clip-path: polygon(0 0, 100% 0%, 50% 100%);
	}

	.flow_inner_text h3,
	.flow_inner_none h3 {
		text-align: center;
		margin-bottom: 20px;
		font-size: 2rem;
		color: #b76b64;
		font-weight: 600;
	}

	.flow_inner .flow_inner_text .turn_back,
	.flow_inner .flow_inner_none .turn_back {width: 75%;}

	.flow_inner .cap_img_1 {
		max-width: 80px;
		max-heigt: 105px;
		position: absolute;
		bottom: 10px;
		right: 10px;
		z-index: 3;
	}

	.flow_inner .cap_img_2 {
		max-width: 80px;
		max-heigt: 84px;
		position: absolute;
		bottom: 10px;
		right: 10px;
		z-index: 3;
	}

	.flow_inner .flow_inner_text p,
	.flow_inner .flow_inner_none p {
		margin-bottom: 20px;
	}

}

@media screen and (min-width:768px) {
/* 画面サイズが768からはここを読み込む */

	.flow {
		position: relative;
		width: 100%;
		max-width: 960px;
		margin: 0 auto 100px;
		background: #fae5ea;
		padding: 50px 0;
	}

	.flow h2 {
		width: 30%;
		margin-bottom: 50px;
		font-size: 1.8rem;
		font-weight: 600;
	}

	.flow .josei_img {
		max-width: 180px;
		max-height: 277px;
		position: absolute;
		top: 40px;
		right: 0;
	}

	.flow .headline_3::after {left: 0;}

	.flow_box {
		width: 94%;
		margin: 80px auto 0;
		display: flex;
		justify-content: space-between;
	}

	.flow_inner {
		width: 18%;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}


	.flow_inner .flow_inner_num {
		width:100px;
		height:100px;
		border-radius: 50%;
		background-image: linear-gradient(to right, #d6a44b, #c35457);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
		line-height: 1.2;
		text-align: center;
		color:#fff;
		font-weight:bold;
		z-index: 1;
	}

	.flow_inner .flow_inner_text,
	.flow_inner .flow_inner_none {
		position: relative;
		width: 100%;
		height: 400px;
		background-color: #fff;
		margin-top: -30px;
		padding: 50px 10px 10px;
		border-radius: 5px;
	}

	.flow_inner .flow_inner_text::after {
		content: "";
		position: absolute;
		top: 30%;
		right: -50px;
		width: 0;
		background-color: #fff;
		width: 50px;
		height: 30px;
		clip-path: polygon(0 0, 50% 50%, 0 100%);
	}

	.flow_inner_text h3,
	.flow_inner_none h3 {
		text-align: center;
		margin-bottom: 20px;
		font-size: 2rem;
		color: #b76b64;
		font-weight: 600;
	}



	.flow_inner .cap_img_1 {
		max-width: 80px;
		max-heigt: 105px;
		position: absolute;
		bottom: 0;
		left: 30%;
	}

	.flow_inner .cap_img_2 {
		max-width: 80px;
		max-heigt: 84px;
		position: absolute;
		bottom: 0;
		right: 10px;
	}

	.flow_inner .flow_inner_text p,
	.flow_inner .flow_inner_none p {
		margin-bottom: 20px;
	}

}


/* キャバクラ派遣 よくある質問 */

@media screen and (max-width:767px) {
/* 画面サイズが767pxまではここを読み込む */

	.question {
		width: 100%;
		margin: 0 auto 50px;
		background: #f7ecd0;
		padding: 50px 0;
	}

	.question h2{
		width: 100%;
		margin: 0 auto 20px;
		text-align: center;
	}

	.question h2 img {
		max-width: 250px;
		max-height: 76px;
	}

	.question_box {
		width: 94%;
		margin: 0 auto;
	}

	.question_inner {
		width: 100%;
		margin: 0 auto;
	}

	.question_inner .qanda dt,
	.question_inner .qanda dd {
		display: flex;
		align-items: baseline;
		margin: 0;
	}

	.question_inner .qanda dt {margin-bottom: 10px;}

	.question_inner .qanda dd {
		width: 100%;
		background: #fff;
		margin-bottom: 50px;
		padding-bottom: 10px;
	}

	.question_inner .qanda dt p {
		margin: 0;
		padding-left: 0;
		font-weight: 700;
		width: 100%;
		font-size: 1.6rem;
	}

	.question_inner .qanda dd p {
		margin: 0;
		padding-left: 0;
		width: 100%;
	}

	.question_inner .qanda dt::before {
		content: "Ｑ";
		display: flex;
		justify-content: flex-start;
		align-items: center;
		color: #f73b8f;
		width: 2em;
		height: 2em;
		font-size: 2rem;
		font-weight: 700;
		margin-left: 6px;
	}

	.question_inner .qanda dd::before {
		content: "Ａ";
		display: flex;
		justify-content: center;
		align-items: center;
		color: #687fe7;
		font-size: 2rem;
		font-weight: 700;
		width: 2em;
		height: 2em;
	}

	.question .img_link {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 50px 0 0;
	}

	.question .img_link img {
		max-width: 100%;
		max-height: 100%;
	}
}

@media screen and (min-width:768px) {
/* 画面サイズが768からはここを読み込む */

	.question {
		width: 100%;
		max-width: 960px;
		margin: 0 auto 100px;
		background: #f7ecd0;
		padding: 50px 0;
	}

	.question h2{
		width: 350px;
		margin-left: 10%;
		margin-bottom: 50px;
	}

	.question h2 img {
		max-width: 350px;
		max-height: 107px;
	}

	.question_box {
		width: 94%;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.question_inner {
		width: 48%;
	}

	.question_inner .qanda dt,
	.question_inner .qanda dd {
		display: flex;
		align-items: baseline;
		margin: 0;
	}

	.question_inner .qanda dt {margin-bottom: 0px;}

	.question_inner .qanda dd {
		background: #fff;
		margin-bottom: 50px;
		padding: 10px 10px;
	}

	.question_inner .qanda dt p {
		margin: 0;
		padding-left: 0;
		font-weight: 700;
		width: 100%;
		font-size: clamp(1.6rem, 1.5vw, 2rem); 
	}

	.question_inner .qanda dd p {
		margin: 0;
		width: 90%;
		margin: 0 auto;
	}

	.question_inner .qanda dt::before {
		content: "Ｑ";
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		color: #f73b8f;
		width: 2em;
		height: 2em;
		font-size: 2rem;
		font-weight: 700;
		margin-left: 10px;
	}

	.question_inner .qanda dd::before {
		content: "Ａ";
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		color: #687fe7;
		font-size: 2rem;
		font-weight: 700;
		width: 2em;
		height: 2em;
	}
}


@media screen and (min-width:768px) {
/* 画面サイズが768pxからはここを読み込む */

	.question .img_link {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 50px 0 0;
	}

	.question .img_link img {
		max-width: 100%;
		max-height: 100%;
	}

}