@charset "utf-8";
/* 
00 404.html
01 index.html
02 beginner.html      はじめての方へ
03 industry/          お仕事内容ガイド
04 money.html         お金のこと

05 chart/             お仕事診断
06 interview.html     体験談インタビュー
07 faq.html           よくあるご質問

08 inquiry/           お問合せ
09 terms.html         利用規約
10 about.html         キラーラについて
11 sitemap.html       サイトマップ

------------------------------------------------
20 advertise.html                             広告掲載について
21 introduction/linkkit.html                  リンクバナー
22 introduction/ad_rule.html・free_rule.html  登録規約(有料・無料)
23 introduction/ad.php・free.php              掲載申込み(有料・無料)

------------------------------------------------
30 result/
31 s/xxxx (有料掲載) -> s/temp/temp_basic.html
32 list/
-----------------------------------------------------*/

/* 
-------------------------------------------------------------------------------- */
.forpc{display: none;}
/* @media screen and (orientation: landscape) {}
@media screen and (min-width: 560px) {}
@media screen and (min-width: 768px) {} */

/* -- PCview用
-------------------------------------------------------------------------------- */
@media screen and (min-width: 960px) {
	*{word-break: break-word;}
	.forpc{display: block;}
	.forsp{display: none;}


/* 01 index.html
-------------------------------------------------------------------- */
	#index{
		width: 1000px;
		opacity: 0;
		transition: opacity 0.5s ease;
	}
	#index.visible{opacity: 1;}
	#index .breadcrumb{flex: 0 0 100%;}

	#indCont{
		display: -webkit-flex;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
	}
	#indCont #mClm{flex: 0 0 680px; width: 680px;}
	#indCont #rClm{flex: 0 0 300px; display: block;}

	#indMain{height: 350px;}
	#indMain::before{
		width: 320px;
		height: 100%;
		right: 150px;
	}
	#indInner{
		width: 480px;
		padding: 30px 10px 10px;
		margin-left: 130px;
	}
	#indInner #maintitle {width: 480px;}
	#indInner #maintitle h2 img{max-width: 474px;}
	#indInner #maincaps{margin-top: 10px;}

	/* 働き方から探す ----------------------------------------- */
	#ways{padding: 40px 100px;}
	#ways ul{grid-template-columns: repeat(6 ,1fr);}
	#ways ul li:not(:last-child) a{border-right: 1px solid #b4bfce;}

	/* エリア・条件から探す ----------------------------------------- */
	#searchwrap{padding: 40px 160px;}
	#searchbox ul {gap: 6px 15px;}
	#searchbox ul li dl dt span{display: inline;}

	/* 特集 ----------------------------------------- */
	#splwrap{padding: 40px 0px 0;}
	/* お役立ちコンテンツ ----------------------------------------- */
	#ind_useful ul li dl dd{padding: 20px 5px;}
	/* 更新情報 ----------------------------------------- */
	#updwrap ul{padding: 25px 20px;}

/* 02 beginner.html
-------------------------------------------------------------------- */
	#bgnr_cont{padding: 30px 20px;}
	#bgnr_steps > li.step dl{
		padding: 25px 50px;
	}
	#bgnr_steps > li.step dl dd ul{
		width: 300px;
		padding: 10px 20px;
	}
	#matters dl dd{padding: 7px 50px;}
	#matters dl dd ul{
		width: 300px;
		padding: 10px 20px;
	}

/* 03 industry/
-------------------------------------------------------------------- */
	#inds_cont ul{
		margin: 20px 0;
		display: grid;
		grid-template-columns: repeat(3 ,1fr);
		gap: 10px;
	}
	#inds_cont ul li a{padding: 10px 20px;}

	/* お仕事詳細---------------------*/

	#guide_point{padding: 20px 45px;}
	#guide_point dl dd{
		/*text-align: center;*/
		margin-bottom: 20px;
	}
	#guide_foot{padding: 30px 30px;}

/* 04 money.html
-------------------------------------------------------------------- */
	#mney_cont{padding: 15px 20px;}
	#mney_cont > dl dd ul{
		width: 300px;
		padding: 10px 20px;
	}
	#mney_cont .stepcont{width: 400px;}

/* 05 chart/
-------------------------------------------------------------------- */
	#chrt_cont{padding: 30px 170px;}
	.chrt_inner{padding: 30px 60px;}

/* 06 interview.html
-------------------------------------------------------------------- */
	#intv_hdinner{max-width: 400px; }
	#intv_cont h4 span{display: block;}
	#intv_cont ul{padding: 30px 20px;}
	#from_editor dl{padding: 20px;}

/* 07 faq.html
-------------------------------------------------------------------- */
	#faq_cont ol > li{
		padding-bottom: 30px;
		margin-bottom: 30px;
		display: -webkit-flex;
		display: flex;
		flex-flow: row nowrap;
		gap: 10px;
		border-bottom: 2px dotted #ddd;
	}
	#faq_cont ol > li p{flex:0 0 350px;}
	#faq_cont ol > li dl{padding: 0;}

/* 08 inquiry/
-------------------------------------------------------------------- */
	#inq_cont{padding: 30px;}
	.carrer_set{
		padding: 0 20px;
		display: -webkit-flex;
		display: flex;
		flex-flow: row nowrap;
		gap: 10px;
	}
	.carrer{flex:1;}
	.carrer span{display: block;}

	.undfunc{
		display: grid;
		grid-template-columns: repeat(2 ,1fr);
	}
	.undfunc li{width: 100%;}
/* 09 terms.html
-------------------------------------------------------------------- */
/* 10 about.html
-------------------------------------------------------------------- */
	#abut_hd{padding: 20px 80px;}
	#abut_hd .holder{width: 300px; margin: 20px auto;}
	#abut_cont{padding: 20px 20px 0;}

/* 11 sitemap.html
-------------------------------------------------------------------- */
	#stmp_cont .sm_areas{
		border-width: 0 1px 1px 0;
		border-style: solid;
		border-color: #bbb;
	}
	#stmp_cont .sm_areas > p{flex:1 0 25%;}
	#stmp_opt ul li,
	#stmp_other ul li{flex:1 0 25%;}


/* 20 advertise.html
-------------------------------------------------------------------- */
	#adv_cont{border-bottom: none;}
	#adv_cont h3 img{max-width: 700px;}

/* 21 introduction/linkkit.html
-------------------------------------------------------------------- */
/* 22 introduction/ad_rule.html・free_rule.html
-------------------------------------------------------------------- */
/* 23 introduction/ad.php・free.php
-------------------------------------------------------------------- */
	#intr_cont{padding: 10px 30px 30px;}


/* 30 result/
-------------------------------------------------------------------- */
	#resCont{
		display: -webkit-flex;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
	}
	#resCont #mClm{flex: 0 0 680px; width: 680px;}
	#resCont #rClm{flex: 0 0 300px; display: block;}

	#subBig{
		padding: 10px 5px;
		border: 1px solid #bbb;
		border-radius: 8px;
	}
	#subTop{
		padding: 0 5px;
		margin: 15px 0;
		border: 1px solid #bbb;
		border-radius: 8px;
	}
	#subTop li{padding: 10px 0;}
	#subTop li:not(:last-child){border-bottom: 1px dashed #bbb;}

	#subTop li a{
		display: -webkit-flex;
		display: flex;
		flex-flow: row nowrap;
		gap: 3px;
	}
	#subTop li a p{flex: 0 0 165px;}
	#subTop li a dl dt{color: #fc4e92;}
	#subTop li a dl dd{font-size: .86rem;}

	/* bigtopバナー -------------------------*/
	/* 一覧card -------------------------*/
	.pLayout{
		padding: 10px;
		display: -webkit-flex;
		display: flex;
		flex-flow: row nowrap;
	}
	.pleft{flex:0 0 360px;}
	.pright{flex:1;}
	.shp_info{margin: 0;}

	.card_func ul{justify-content: center;}
	.card_func ul li{flex:0 0 200px; margin: 0;}
	.card_func ul li.keep{flex:0 0 200px; margin: 0;}


/* 31 s/xxxx (有料掲載)
-------------------------------------------------------------------- */
	#detail{
		display: -webkit-flex;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
	}
	#detcont{flex: 0 0 700px;}

	/* 3連画像 -------------------- */
	#thumbs{width: 700px;}

	#detl_info{padding: 30px 20px;}
	#detl_info .shp_info{padding: 20px;}
	#detl_info .shp_info li{padding: 15px 0;}
	#detl_info .shp_info li dl dt{flex: 0 0 60px;}

	#message{padding: 25px 20px;}

	/* こだわり -------------------- */
	#focus{padding: 30px 20px;}

	#detl_cond{
		display: grid;
		grid-template-columns: repeat(5 ,1fr);
		gap: 5px;
	}
	.cond_txts{gap: 10px;}
	.cond_txts li{gap: 10px;}

	#detl_cont dl dt{padding: 8px 15px;}
	#detl_cont dl dd{padding: 8px 15px;}

	#applyTgt .forms{padding: 0 25px;}

	#flm-wrapper {display: none;}
	#sticky{
		padding: 10px 0;
		flex: 0 0 280px;
		position: relative;
		display: block;
	}
	#stickyinner{
		padding: 10px;
		background: #f2f0f9;
		border-radius: 10px;
		position: sticky;
		top: 90px;
		right: 0;
	}
	.stash #stickyinner{top: 10px;}

	#stickyinner ul li{margin: 10px 0;}
	#stickyinner ul li a{
		height: 52px;
		display: -webkit-flex;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		white-space: nowrap;
	}
	#stickyinner .keep a::before{
		width: 26px;
		height: 22px;
		margin-right: 5px;
		content: '';
		display: block;
		background-image: url(../img/icon/icn_fav.png);
		background-repeat: no-repeat;
		background-position: 0 0;
		-webkit-background-size: contain;
		background-size: contain;
	}
	#stickyinner .keep a.already::before{
		background-image: url(../img/icon/icn_fav_on.png);
	}

	#stickyinner .mail a{
		border: 2px solid #c6c0da;
		gap: 6px;
	}
	#stickyinner .mail a::before{
		width: 30px;
		height: 30px;
		content: '';
		display: block;
		background-image: url(../img/icon/det_mail.png);
		background-repeat: no-repeat;
		background-position: 0 0;
		-webkit-background-size: contain;
		background-size: contain;
	}

	#stickyinner > div{
		padding: 10px 0;
		border-top: 1px dashed #9188b0;
	}
	#stickyinner > div dl dt{
		display: -webkit-flex;
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		gap: 5px;
	}
	#stickyinner > div dl dt::before{
		width: 43px;
		height: 43px;
		content: '';
		display: block;
		background-repeat: no-repeat;
		background-position: 0 0;
		-webkit-background-size: contain;
		background-size: contain;
	}

	#st_tel p{font-size: .86rem;}
	#st_tel dl{text-align: center;}
	#st_tel dl dt{
		font-size: 1.72rem;
		font-weight: bold;
		justify-content: center;
	}

	#st_tel dl dt::before{background-image: url(../img/icon/det_phone.png);}
	#st_line dl dt{
		margin-bottom: 10px;
		font-size: 1rem;
		font-weight: bold;
	}
	#st_line dl dt::before{background-image: url(../img/icon/det_line.png);}
	#st_line dl dd{text-align: center;}
	#st_line dl dd p{
		padding: 10px;
		background: #fff;
		border: 1px solid #bbb;
		border-radius: 8px;
		text-align: left;
	}
	#st_line dl dd p span{color: #00c300;}
	#st_line dl dd img{
		padding: 5px;
		margin-top: 10px;
		border: 1px solid #bbb;
		background: #fff;
	}

	/* フローティング要素（TEL/MAIL/検討中リスト） ---------------------------------------*/

/* 32 list/ 
-------------------------------------------------------------------- */
	.favinfo{padding: 10px 30px;}
	/* 応募履歴 --------------------------*/
	#applyhistory{
		padding: 20px 30px;
	}
}