@charset "UTF-8";
/* sp(320px) */

/* 「電話占い遥華（はるか）」占い師募集のお知らせ */
#pageHaruka #intro .hl {
	font-size: 20px;
	font-weight: bold;
	line-height: 1.4;
	color: var(--fcolor);
	text-align: center;
}
#pageHaruka #intro .hl span {
	display: block;
	font-size: 15px;
	color: #000;
	margin-block-end: .4em;
}
#pageHaruka #intro .hl span br {
	display: inline-block;
}
#pageHaruka #intro p {
	max-inline-size: 800px;
	margin-inline: auto;
	line-height: 1.9;
}

/*電話占い遥華とは？*/
#pageHaruka #about_haruka .grid {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto;
	column-gap: 0;
	row-gap: 4em;
}
#pageHaruka #about_haruka .grid li .ttl {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	color: #000;
	padding-block: 1.4em 1.0em;
}

/* こんな方にオススメです */
#pageHaruka #recommend ul {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto;
	column-gap: 0;
	row-gap: 1em;
}
#pageHaruka #recommend ul li {
	background-color: #fcf1f7;
	border-radius: .5em;

	padding-inline: 1.3em;
	min-block-size: 5.4em;

	display: grid;
	align-items: center;
	font-size: 15px;
	line-height: 1.4;
}
#pageHaruka #recommend ul li .in {
	display: grid;
	grid-template-columns: 20px auto;
	grid-template-rows: auto;
	column-gap: .8em;
	row-gap: 0;
	align-items: center;
}

/* 採用担当者からのメッセージ */
#pageHaruka #message_haruka p {
	max-inline-size: 800px;
	margin-inline: auto;
	line-height: 1.9;
}

/* 募集要項 */
#pageHaruka #Job_description dl {
	display: grid;
	grid-template-columns: 6em auto;
	grid-template-rows: auto;
	column-gap: 0;
	row-gap: 0;
	max-inline-size: 800px;
	margin-inline: auto;
}
#pageHaruka #Job_description dl dt,
#pageHaruka #Job_description dl dd {
	padding-block: 1.2em;
}
#pageHaruka #Job_description dl dt:not(:last-of-type),
#pageHaruka #Job_description dl dd:not(:last-of-type) {
	border-block-end: 1px dotted #cacaca;
}
#pageHaruka #Job_description dl dt.br {
	display: inline-block;
}
#pageHaruka #Job_description dl dd {
	line-height: 1.9;
}

/* 応募からデビューまでの流れ */

/* 電話またはメールで応募 */
/* 電話 */
.apl_phone {
	display: grid;
	grid-template-columns: 26px auto;
	grid-template-rows: auto;
	column-gap: .6em;
	row-gap: 0;
}
.apl_phone a {
	color: var(--fcolor);
}
.apl_phone a:hover {
	text-decoration: none;
}
.apl_phone .icn {
	position: relative;
	inset-block-start: .2em;
}
.apl_phone .tx .num {
	font-size: 26px;
	font-weight: bold;
	line-height: 1.0;
	color: var(--fcolor);
}
.apl_phone .tx .nb {
	margin-block-start: .4em;
}
/* メール */
.apl_mail {
	display: grid;
	grid-template-columns:26px auto;
	grid-template-rows: auto;
	column-gap: .6em;
	row-gap: 0;
}
.apl_mail a {
	color: var(--fcolor);
}
.apl_mail a:hover {
	text-decoration: none;
}
.apl_mail .icn {
	position: relative;
	inset-block-start: -.3em;
}
.apl_mail .tx .adr {
	font-size: 18px;
	font-weight: bold;
	line-height: 1.0;
	color: var(--fcolor);
}
.apl_mail .tx .nb {
	margin-block-start: .4em;
}


/*応募からデビューまでの流れ*/
#pageHaruka #flow_haruka ol li {
	background-color: #fcf1f7;
	padding: 1.2em 1.4em;
	border-radius: .6em;
	margin-block-end: 1.5em;
	position: relative;
}
#pageHaruka #flow_haruka ol li:not(:last-of-type)::after {
	content: '';
	inline-size: 2em;
	block-size: .8em;
	background: #fcf1f7;
	display: inline-block;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	position: absolute;
	inset: auto auto -.8em 50%;
	transform: translateX(-50%);;
}

#pageHaruka #flow_haruka ol li .in {
	display: grid;
	grid-template-columns: 1.5em 5.5em auto;
	grid-template-rows: auto;
	column-gap: 0;
	row-gap: 0;
}
#pageHaruka #flow_haruka ol li:nth-of-type(1) .in {
	grid-template-columns: 1.5em 3.0em auto;
}
#pageHaruka #flow_haruka ol li .in .no {
	font-family: "League Spartan", sans-serif;
	font-size: 20px;
	font-weight: bold;
	line-height: 1;
	color: var(--fcolor);
	position: relative;
	inset-block-start: .16em;
}
#pageHaruka #flow_haruka ol li .in .ttl {
	font-size: 15px;
	font-weight: bold;
	line-height: 1.4;
	color: #000;
}
/* grid */
#pageHaruka #flow_haruka ol li .grid {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto;
	column-gap: 0;
	row-gap: 1.5em;
	margin-block-start: 1.5em;
}
#pageHaruka #flow_haruka ol li .grid .lside {
	padding-inline-start: 0;
}
#pageHaruka #flow_haruka ol li .grid .rside {
	padding-block-start: 0;
}

/* よくある質問 */
#pageHaruka #faq_haruka dl {
	border: 2px solid #fce2ef;
	border-radius: .6em;
	padding: 1.8em 1.2em;
}
#pageHaruka #faq_haruka dl:not(:first-of-type) {
	margin-block-start: 1.3em;
}
#pageHaruka #faq_haruka dl dt,
#pageHaruka #faq_haruka dl dd {
	padding-inline-start: 38px;
	position: relative;
}
#pageHaruka #faq_haruka dl dt {
	font-size: 15px;
	font-weight: bold;
	line-height: 1.4;
	color: #000;
}
#pageHaruka #faq_haruka dl dd {
	margin-block-start: 1.6em;
}
#pageHaruka #faq_haruka dl dt::before,
#pageHaruka #faq_haruka dl dd::before {
	font-family: "League Spartan", sans-serif;
	font-size: 17px;
	font-weight: bold;
	text-align: center;
	border-radius: 50%;
	inline-size: 1.7em;
	block-size: 1.7em;
	line-height:1.7em;
	position: absolute;
}
#pageHaruka #faq_haruka dl dt::before {
	content: 'Q';
	color: #fff;
	background: var(--fcolor);
	inset: -.20em auto auto 0;
}
#pageHaruka #faq_haruka dl dd::before {
	content: 'A';
	color: var(--fcolor);
	background: #fce2ef;
	inset: -.10em auto auto 0;
}

/* ご応募はこちら */
#pageHaruka #gooubo {
	display: grid;
	align-items: center;
	grid-template-columns: auto;
	grid-template-rows: auto;
	column-gap: 0;
	row-gap: 1.0em;
	background-color: #fcf1f7;
	padding: 1.8em 0;
}
#pageHaruka #gooubo > div {

}
#pageHaruka #gooubo > div:nth-of-type(1) {
	/*border-inline-end: 1px solid var(--fcolor);*/
}
#pageHaruka #gooubo > div:nth-of-type(1) .tl {
	font-size: 16px;
	font-weight: bold;
	line-height: 1.4;
	color: #000;
	text-align: center;
	position: relative;

	inline-size: fit-content;
	margin-inline: auto;
	padding: 0 1em .5em 1em;
	margin-block-end: .3em;
	border-block-end: 1px solid var(--fcolor);


}
#pageHaruka #gooubo > div:nth-of-type(2) {
	display: grid;
	place-items: center; 
}
#pageHaruka #gooubo > div:nth-of-type(3) {
	display: grid;
	place-items: center; 
}

@media handheld, print, screen and (min-width: 375px) {
/* iphone6 */

/* 「電話占い遥華（はるか）」占い師募集のお知らせ */
#pageHaruka #intro .hl span br {
	display: none;
}

/* end of media query(iphone6) */	
}



@media handheld, print, screen and (min-width: 414px) {
/*  iPhone6 Plus */

/* end of media query(iPhone6 Plus) */	
}



@media handheld, print, screen and (min-width: 480px) {
/* tablet */

/* 「電話占い遥華（はるか）」占い師募集のお知らせ */
#pageHaruka #intro .hl {
	font-size: 21px;
}
#pageHaruka #intro .hl span {
	font-size: 16px;
	margin-block-end: .4em;
}

/*電話占い遥華とは？*/
#pageHaruka #about_haruka .grid li .ttl {
	font-size: 17px;
}

#pageHaruka #recommend ul li .in {
	grid-template-columns: 21px auto;
	column-gap: .6em;
}

/* 募集要項 */
#pageHaruka #Job_description dl {
	grid-template-columns: 10em auto;
}
#pageHaruka #Job_description dl dt.br {
	display: none;
}

/* 応募からデビューまでの流れ */
#pageHaruka #flow_haruka ol li .in .no {
	font-size: 22px;
	inset-block-start: .10em;
}
#pageHaruka #flow_haruka ol li .in .ttl {
	font-size: 17px;
}

/* よくある質問 */
#pageHaruka #faq_haruka dl {
	border: 3px solid #fce2ef;
	padding: 2.0em 2.0em;
}
#pageHaruka #faq_haruka dl dt,
#pageHaruka #faq_haruka dl dd {
	padding-inline-start: 45px;
}
#pageHaruka #faq_haruka dl dt {
	font-size: 16px;
}
#pageHaruka #faq_haruka dl dd {
	margin-block-start: 1.6em;
}
#pageHaruka #faq_haruka dl dt::before,
#pageHaruka #faq_haruka dl dd::before {
	font-size: 18px;
}
#pageHaruka #faq_haruka dl dt::before {
	inset: -.22em auto auto 0;
}
#pageHaruka #faq_haruka dl dd::before {
	inset: 0em auto auto 0;
}
/* ご応募はこちら */
#pageHaruka #gooubo > div:nth-of-type(1) .tl {
	font-size: 17px;
}








/* end of media query(tablet) */	
}



@media handheld, print, screen and (min-width: 620px) {
/* iPad */

/* 「電話占い遥華（はるか）」占い師募集のお知らせ */
#pageHaruka #intro .hl {
	font-size: 26px;
}
#pageHaruka #intro .hl span {
	font-size: 17px;
	margin-block-end: .4em;
}

/*電話占い遥華とは？*/
#pageHaruka #about_haruka .grid {
	grid-template-columns: 1fr 1fr;
	column-gap: 4%;
	row-gap: 4em;
}
#pageHaruka #about_haruka .grid li .ttl {
	font-size: 18px;
}

/* 募集要項 */
#pageHaruka #Job_description dl {
	grid-template-columns: 11em auto;
}

/* 応募からデビューまでの流れ */

/* 電話またはメールで応募 */
/* 電話 */
.apl_phone {
	grid-template-columns: 30px auto;
}
.apl_phone .icn {
	inset-block-start: .2em;
}
.apl_phone .tx .num {
	font-size: 28px;
}
/* メール */
.apl_mail {
	grid-template-columns: 28px auto;
}
.apl_mail .icn {
	inset-block-start: -.3em;
}
.apl_mail .tx .adr {
	font-size: 19px;
}

#pageHaruka #flow_haruka ol li {
	padding: 1.6em 2.4em;
}
#pageHaruka #flow_haruka ol li .in {
	grid-template-columns: 2.2em 7em auto;
}
#pageHaruka #flow_haruka ol li:nth-of-type(1) .in {
	grid-template-columns: 2.2em 7em auto;
}
#pageHaruka #flow_haruka ol li .in .no {
	font-size: 26px;
	inset-block-start: .11em;
}
#pageHaruka #flow_haruka ol li .in .ttl {
	font-size: 18px;
}
/* grid */
#pageHaruka #flow_haruka ol li .grid {
	grid-template-columns: 1fr 1fr;
	column-gap: 2%;
	row-gap: 0;
}
#pageHaruka #flow_haruka ol li .grid .rside {
	padding-block-start: 7px;
}

#pageHaruka #flow_haruka {
	container-type: inline-size;
	container-name: flow-container;
}
@container flow-container (width < 730px) {
	#pageHaruka #flow_haruka ol li:nth-of-type(1) .in {
		grid-template-columns: 2.2em 4.0em auto;
	}
	#pageHaruka #flow_haruka ol li .grid {
		grid-template-columns: auto;
		column-gap: 0;
		row-gap: 1.5em;
	}
	#pageHaruka #flow_haruka ol li .grid .rside {
		padding-block-start: 0px;
	}	
}

/* よくある質問 */
#pageHaruka #faq_haruka dl {
	padding: 2.4em 2.5em;
}
#pageHaruka #faq_haruka dl dt,
#pageHaruka #faq_haruka dl dd {
	padding-inline-start: 50px;
}
#pageHaruka #faq_haruka dl dt {
	font-size: 17px;
}
#pageHaruka #faq_haruka dl dd {
	margin-block-start: 1.6em;
}
#pageHaruka #faq_haruka dl dt::before,
#pageHaruka #faq_haruka dl dd::before {
	font-size: 20px;
}
#pageHaruka #faq_haruka dl dt::before {
	inset: -.22em auto auto 0;
}
#pageHaruka #faq_haruka dl dd::before {
	inset: -.10em auto auto 0;
}

/* ご応募はこちら */
#pageHaruka #gooubo > div:nth-of-type(1) .tl {
	font-size: 18px;
}








/* end of media query(iPad) */	
}


@media handheld, print, screen and (min-width: 750px) {

/* こんな方にオススメです */
#pageHaruka #recommend ul {
	grid-template-columns: 1fr 1fr;
	column-gap: 4%;
}
#pageHaruka #recommend ul li {
	padding-inline: 2em;
}
#pageHaruka #recommend ul li .in {
	grid-template-columns: 23px auto;
	column-gap: .8em;
	font-size: 17px;
}

/* end of media query(こんな方にオススメです) */	
}


@media handheld, print, screen and (min-width: 900px) {
/* pc */

/* 「電話占い遥華（はるか）」占い師募集のお知らせ */
#pageHaruka #intro .hl {
	font-size: 30px;
}
#pageHaruka #intro .hl span {
	font-size: 18px;
	margin-block-end: .4em;
}

/*電話占い遥華とは？*/
#pageHaruka #about_haruka .grid li .ttl {
	font-size: 20px;
}

/* こんな方にオススメです */
#pageHaruka #recommend ul li {
	padding-inline: 2em;
}
#pageHaruka #recommend ul li .in {
	grid-template-columns: 25px auto;
	column-gap: 1em;
	font-size: 18px;
}

/* 電話またはメールで応募 */
/* 電話 */
.apl_phone {
	grid-template-columns: 32px auto;
}
.apl_phone .icn {
	inset-block-start: .2em;
}
.apl_phone .tx .num {
	font-size: 30px;
}
/* メール */
.apl_mail {
	grid-template-columns: 31px auto;
}
.apl_mail .icn {
	inset-block-start: -.3em;
}
.apl_mail .tx .adr {
	font-size: 20px;
}


/* 応募からデビューまでの流れ */
#pageHaruka #flow_haruka ol li {
	padding: 1.6em 2.4em;
}
#pageHaruka #flow_haruka ol li .in {
	grid-template-columns: 2.2em 7em auto;
}
#pageHaruka #flow_haruka ol li .in .no {
	font-size: 30px;
	inset-block-start: .09em;
}
#pageHaruka #flow_haruka ol li .in .ttl {
	font-size: 20px;
}

/* よくある質問 */
#pageHaruka #faq_haruka dl {
	padding: 2.4em 2.5em;
}
#pageHaruka #faq_haruka dl dt,
#pageHaruka #faq_haruka dl dd {
	padding-inline-start: 50px;
}
#pageHaruka #faq_haruka dl dt {
	font-size: 18px;
}
#pageHaruka #faq_haruka dl dd {
	margin-block-start: 1.6em;
}
#pageHaruka #faq_haruka dl dt::before,
#pageHaruka #faq_haruka dl dd::before {
	font-size: 22px;
}
#pageHaruka #faq_haruka dl dt::before {
	inset: -.25em auto auto 0;
}
#pageHaruka #faq_haruka dl dd::before {
	inset: -.15em auto auto 0;
}



/* end of media query(pc) */
}



@media handheld, print, screen and (min-width: 980px) {
/*  pc over */

/* grid */
#pageHaruka #flow_haruka ol li .grid .lside {
	padding-inline-start: 148px;
}

/* ご応募はこちら */
#pageHaruka #gooubo {
	display: grid;
	align-items: center;
	grid-template-columns: 25.19% 34.81% 40.00%;
	grid-template-rows: auto;
	column-gap: 0;
	row-gap: 0;
	background-color: #fcf1f7;
	padding: .8em 0;
}
#pageHaruka #gooubo > div {
	padding-block: 1.8em;
}
#pageHaruka #gooubo > div:nth-of-type(1) {
	border-inline-end: 1px solid var(--fcolor);
}
#pageHaruka #gooubo > div:nth-of-type(1) .tl {
	font-size: 20px;
	font-weight: bold;
	line-height: 1.4;
	color: #000;
	text-align: center;
	position: relative;
	inset-inline-start: -.5em;

	inline-size: auto;
	margin-inline: auto;
	padding: 0 0 0 0;
	margin-block-end: .3em;
	border-block-end: none;
}
#pageHaruka #gooubo > div:nth-of-type(2) {
	display: grid;
	place-items: center; 
}
#pageHaruka #gooubo > div:nth-of-type(3) {
	display: block;
	padding-inline-start: 6%;
}



/* end of media query(pc over) */	
}