@charset "UTF-8";

/*---------------------------------
main-visual
----------------------------------*/

#main-visual{
	width: 100%;
	background-image: url(../img_top/mvisual_sp.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size:cover;
	padding: 60px 0 100px 0;
}
#main-visual h1{
	display: block;
	width:50%;
	line-height: 1;
	background-image:url(../img_top/mvis_txtbox.png);
	background-repeat:no-repeat;
	background-position: center top;
	background-size:contain;
	padding: 45% 0 0 0;
	margin: 0 auto;
}
#main-visual h1 span{
	display:none;
}

/*---------------------------------
category-job
----------------------------------*/
.category-job{
	background-color: #f8b500;
	padding: 10px 0;
}
.category-job ul{
	text-align: center;
	color: #ffffff;
}

.category-job li{
	display: block;
	width: 86%;
	font-size: 3.2rem;
	font-weight: bold;
	border: solid 2px #ffffff;
	margin: 10px auto;
}

.category-job a {
	color: #FFFFFF;
	text-decoration: none;
} 

.category-job a:hover {
	color: #996600;
} 

/*---------------------------------
about-us
----------------------------------*/
.about-us{
	background-image:url(../img_top/bg_aboutus_02.png), url(../img_top/bg_aboutus_01.png);
	background-repeat: no-repeat, no-repeat;
	background-position: left bottom, left bottom;
	background-size:100% auto, 100% auto;
	padding-bottom: 60%;
}
.about-us h1{
	display: block;
	font-size: 2.4rem;
	line-height: 2;
	text-align: center;
	border-bottom: solid 3px #000;
	margin: 20px auto;
}
.about-us p{
	width: 90%;
	font-size: 1.5rem;
	line-height: 1.4;
	text-align: left;
	margin: 0 auto;
}


/*---------------------------------
for-someone
----------------------------------*/

.someone{
	background-image:url(../img_top/bg_forsomeone_sp.png);
	background-repeat: no-repeat;
	background-position:center bottom;
	background-size: 100% auto;
	margin: 0;
	border-top: solid 1px #ffffff;
}
.someone h1{
	font-size: 2.4rem;
	line-height: 2;
	text-align: center;
	border-bottom: solid 3px #000000;
	margin: 20px auto;
}
.someone h2{
	font-size: 2.4rem;
	line-height: 2;
	text-align: center;
	background-color: #f8b500;
	padding-top: 20px;
}
.someone p{
	width: 90%;
	font-size: 1.5rem;
	line-height: 1.4;
	text-align: left;
	margin: 0 auto;
	padding-bottom: 60%;
}

/*---------------------------------
point
----------------------------------*/
.point{
	background-color: #f8b500;
	border: solid 1px #f8b500;
}
.point ul{
}

.point li{
	display: block;
	width: 82%;
	color: #000000;
	background-color: #ffffff;
	margin: 20px auto;
	padding: 4%;
}

.point h1{
	font-size: 2rem;
	line-height: 1.4;
	margin-bottom: 10px;
}
.point p{
	width: 96%;
	font-size: 1.5rem;
	line-height: 1.4;
	margin: 0 auto;
}

/*---------------------------------
message
----------------------------------*/

.message{
	background-color: #f8b500;
}
.L-message{
	text-align: center;
	background: linear-gradient(#ffffff 40%, rgba(255,255,255,0) 40%);
	padding-top: 20px;
}
.message h1{
	font-size: 1.6rem;
	line-height: 2;
	text-align: center;
}
.message h2{
	font-size: 2.8rem;
	line-height: 2.4;
	text-align: center;
}
.message h3{
	font-size: 1.4rem;
	line-height: 2;
	text-align: center;
	background-color: #ffffff;
	border-bottom: solid 2px #000000;
	padding: 4px 0;
}
.message p{
	width: 90%;
	font-size: 1.5rem;
	line-height: 1.4;
	text-align: left;
	margin: 0 auto;
	padding-bottom: 20px;
}
.message .name_pc{
	display: none;
}

/*---------------------------------
job
----------------------------------*/

.job{
	color: #ffffff;
	background-image: url(../img_top/bg_job_sp.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% auto;
	padding-bottom: 65%;
}
.L-job{
	background-color: #000000;
	border-top: solid 1px #000;
	margin: 0;
}
.job h1{
	font-size: 2.4rem;
	line-height: 2;
	text-align: center;
	border-bottom: solid 3px #ffffff;
	margin: 20px auto;
}
.job h2, .job p{
	width: 90%;
	font-size: 1.5rem;
	line-height: 1.4;
	text-align: left;
	margin: 0 auto;
	padding-bottom: 20px;
}

/*---------------------------------
works
----------------------------------*/

.works h1{
	position: relative;
	width: 64%;
	font-size: 1.8rem;
	line-height: 1;
	text-align: center;
	color: #ffffff;
	background: #535353;
	border-radius: 6px; 
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	margin: 30px auto;
	padding: 14px 0;
}
.works h1:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(83, 83, 83, 0);
	border-top-color: #535353;
	border-width: 20px;
	margin-left: -20px;
}

.works a{
	color: #535353;
	font-weight: bold;
}
.works a:hover {
	color: #996600;
} 

.works ul{
	text-align: center;
	margin: 0 auto;
}

.works li{
	display: inline-block;
	width: calc((84% * 1/3) );
	font-size: 1.5rem;
	text-align: center;
	color: #000000;
	background-color: #d2d2d2;
	border-radius: 6px; 
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	padding: 5px 0;
	margin: 5px;
}
.works table{
	width: 92%;
	border: solid 1px #cacaca;
	margin: 20px auto;
}
.works table th{
	width: 92%;
	background-color: #f8f8f8;
	padding: 10px 0;
	border-bottom: solid 1px #cacaca;
}
.works table td{
	border-bottom: solid 1px #cacaca;
	padding: 20px;
}

/* 表組の基本設定 */
.works dt,
.works dd
{
	text-align: center;
    padding: 8px 0; /* 枠内 padding： 数値で指定する */
}

.works dt{
	font-size: 1.6rem; /* 文字サイズ */
	font-weight: bold;
	border-bottom: dashed 1px #bfbfbf;
}
.works dd{
	font-size: 1.5rem; /* 文字サイズ */
	line-height: 1.4;
}
.works .br::before {
	content: "\A" ;
	white-space: pre ;
}
.works .br2::before {
	content: "\A" ;
	white-space: pre ;
}

/*---------------------------------
FAQ
----------------------------------*/
.faq{
	padding: 10px 0;
}
.faq h1{
	position: relative;
	width: 64%;
	font-size: 1.8rem;
	line-height: 1;
	text-align: center;
	color: #ffffff;
	background: #535353;
	border-radius: 6px; 
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	margin: 30px auto;
	padding: 14px 0;
}

.faq h1:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(83, 83, 83, 0);
	border-top-color: #535353;
	border-width: 20px;
	margin-left: -20px;
}

/*=======　アコーディオン　=======*/
.accordionbox{
	width: 100%;
	font-size: 18px;
}

.accordionlist dt{
    display:block;
	color: #ffffff;
    background-color: #707070;
	border-bottom: solid 1px #ffffff;
}
.accordionlist dt:last-child{
    border-bottom: none;
}
.accordionlist dt .title{
	float: left;
	width: 80%;
	padding: 10px 14px;
}
.accordionlist dd{
    display:none;
	background: #fff;
	padding:20px;
}
.accordion_icon,
.accordion_icon span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
.accordion_icon {
	position: relative;
	width: 30px;
	height: 30px;
	float: right;
}
.accordion_icon span {
	position: absolute;
	margin-top: 17px;
    left: 0;
    width: 50%;
	height: 2px;
    background-color: #ffffff;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-ms-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
}
.accordion_icon span:nth-of-type(1) {
    top: 5px;
	transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}
.accordion_icon span:nth-of-type(2) {
    top: 5px;
	transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}
/*＋、－切り替え*/
.accordion_icon.active span:nth-of-type(1) {
	display:none;
}
.accordion_icon.active span:nth-of-type(2) {
	top: 5px;
	transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

ul#col01, ul#col02{
	display: none;
}

.faq h3{
	font-size: 2.6rem;
	line-height: 2;
	text-align: center;
	color: #535353;
}
.faq img{
	display: block;
	margin: 0 auto;
}

/*---------------------------------
company
----------------------------------*/
.company{
	text-align: center;
}

.company h2{
	font-size: 2.2rem;
	line-height: 1.2;
	background-color: #edeae3;
	padding: 15px 0;
}
.company dl{
	padding: 4px 0;
}
.company dt{
	font-weight: bold;
}
.company dt, .company dd{
	line-height: 1.6;
}
.even{
	background-color: #edeae3;
}


/*---　メールフォーム　---*/
.mailform-area{
	padding: 10px 14px;
}
.mailform-area dd{
	margin-bottom: 10px;
}
.must{
	display:inline-block;
	font-size: 1.3rem;
	color: #ffffff;
	background-color: #ce0909;
	border-radius: 6px; 
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	margin-right: 8px;
	padding: 2px 4px;
}
input, textarea{
	width: 100%;
}
.mfp_buttons{
	text-align: center;
}


/*----------------------------
マイナーーブレイクポイント
----------------------------*/
@media only screen and (min-width: 28em){	/* 448px */

/*---------------------------------
main-visual
----------------------------------*/

#main-visual{
	padding: 30px 0 0px 0;
}

#main-visual h1{
	width:40%;
	padding: 50% 0 0 0;
}

} /* end 448px*/

/*----------------------------
ミディアムサイズ
----------------------------*/
@media only screen and (min-width: 40em){	/* 640px */
	
/*---------------------------------
main-visual
----------------------------------*/
#main-visual h1{
	width:40%;
	padding: 380px 0 0 0;
}
#main-visual h1{
	width:34%;
}

/*---------------------------------
category-job
----------------------------------*/
.category-job li{
	display:inline-block;
	width: 40%;
	font-size: 2.8rem;
	margin: 10px 20px;
}

/*---------------------------------
about-us
----------------------------------*/
.about-us{
	background-position: right bottom, left bottom;
	background-size:auto, 50%;
	padding-bottom: 15%;
}

.right-box{
	float: right;
	width: 50%;
	text-align: left;
}
.about-us h1{
	text-align: left;
}

/*---------------------------------
someone
----------------------------------*/

.someone{
	background-image:url(../img_top/bg_someone_bottom.png), url(../img_top/bg_forsomeone_pc.png);
	background-repeat: no-repeat, no-repeat;
	background-position: left bottom, left bottom;
	background-size:cover, auto;
	margin: 0;
	border-top: solid 1px #ffffff;
}
.someone{
	padding-bottom: 2%;
}
.someone h1{
	text-align: left;
}
.someone h2{
	text-align: left;
	background-color: transparent;
	border-bottom: solid 3px #000;
	padding-top: 20px;
	margin-bottom: 30px;
}
.someone p{
	padding-bottom: 20%;
}


} /* end 640px*/


/*----------------------------
マイナーブレイクポイント ipadmin
----------------------------*/
@media only screen and (min-width: 48em){	/* 768px */

/*---------------------------------
main-visual
----------------------------------*/

#main-visual{
	background-image: url(../img_top/mvisual_pc.jpg);
}

#main-visual h1{
	width:212px;
}

/*---------------------------------
category-job
----------------------------------*/
.category-job li{
	display: inline-block;
	width: 24%;
	color: #FFF;
}

/*---------------------------------
point
----------------------------------*/
.point ul{
	text-align: center;
}

.point li{
	display:inline-block;
	vertical-align: top;
	width: 38%;
	color: #000000;
	background-color: transparent;
	border-top: solid 2px #000;
	border-left: solid 2px #000; 
	margin: 20px;
	padding: 20px 2%;
}
.point li div{
	background-color: #ffffff;
	padding: 20px;
}

.point h1{
	text-align: left;
}
.point p{
	width: 70%;
	text-align: left;
	margin: 0 0 0 10px;
}

.pointo01, .pointo02, .pointo03, .pointo04{
	background-repeat: no-repeat;
	background-position: right 10px bottom 10px;
}
.pointo01{
	background-image: url(../img_top/bg_point01.png);
}
.pointo02{
	background-image: url(../img_top/bg_point02.png);
}
.pointo03{
	background-image: url(../img_top/bg_point03.png);
}
.pointo04{
	background-image: url(../img_top/bg_point04.png);
}

/*---------------------------------
message
----------------------------------*/

.message{
	background: linear-gradient(#ffffff 30%, #f8b500 30%);
	padding-bottom: 30px;
}
.L-message{
	float: left;
	width: 30%;
	text-align: center;
	background: linear-gradient(rgba(255,255,255,0) 30%, rgba(255,255,255,0) 30%);
	padding-top: 40px;
}
.R-message{
	float: right;
	width: 69%;
	text-align: left;
	background-color: transparent;
	padding-top: 20px;
}
.message h1{
	font-size: 2rem;
	font-weight: normal;
	text-align: right;
	margin-bottom: 30px;
}
.message h2{
	font-size: 2.8rem;
	line-height: 2.4;
	text-align: left;
}
.message h3{
	text-align: left;
	padding: 20px 0 4px 7%;
}
.message p{
	width: 100%;
	font-size: 1.5rem;
	line-height: 1.4;
	text-align: left;
	margin: 0 auto;
	padding-bottom: 20px;
}

.message .name_pc{
	display: block;
	margin-bottom: 40px;
}
.message .name_sp{
	display: none;
}
	

} /* end 768px*/

/*----------------------------
マイナーブレイクポイント
----------------------------*/

 @media only screen and (min-width: 50em) {	/*800px*/


} /* end 800px*/



/*----------------------------
ラージサイズ
----------------------------*/

 @media only screen and (min-width: 60em) {	/*960px*/

.right-box{
	max-width: 500px;
	margin-left:50%;
}

/*---------------------------------
category-job
----------------------------------*/
.category-job ul{
	max-width: 960px;
	margin: 0 auto;
}
.category-job li{
	width: 280px;
	margin: 10px 10px;
}
.category-job a {
	color: #FFF;
	text-decoration: underline;
}

/*---------------------------------
job
----------------------------------*/

.job{
	background-image: url(../img_top/bg_job_pc.jpg);
	background-position: center;
	padding-bottom: 0;
	border-top:none;
}
.L-job{
	float: left;
	width: 36%;
	background-color: transparent;
	border-top: none;
	padding: 0 0 20px 20px;
}

.job h1{
	text-align: left;
}
.job h2, .job p{
	width: 90%;
	font-size: 1.5rem;
	line-height: 1.4;
	text-align: left;
	margin: 0 auto;
	padding-bottom: 20px;
}

/*---------------------------------
works
----------------------------------*/

.works h1{
	max-width: 320px;
}

.works li{
	display: inline-block;
	width: calc((84% * 1/3) );
	font-size: 1.5rem;
	text-align: center;
	color: #000000;
	background-color: #d2d2d2;
	border-radius: 6px; 
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	padding: 5px 0;
	margin: 5px;
}
.works li{
	width: calc((84% * 1/6) );
	font-size: 1.7rem;
	font-weight: bold;
}
/* 表組の基本設定 */
.works dt,
.works dd
{
	text-align: left;
    padding: 8px 0; /* 枠内 padding： 数値で指定する */
}
 .works dt{
	 float: left;
	 clear:left;
	 width: 250px;
	 line-height: 1.4;
	 padding: 10px 0;
	 border-top: dashed 1px #bfbfbf;
	 border-bottom: none;
 }
.works dd{
	 width: 600px;
	line-height: 1.4;
	padding: 10px 0 11px 7em;
	border-top: dashed 1px #bfbfbf;
	margin-left: 20%;
 }

.works .br::before {
	display: none;
}

/*---------------------------------
FAQ
----------------------------------*/
.faq{
	background-color: #edeae3;
	background-image: url(../img_top/bg_faq_left.png), url(../img_top/bg_faq_right.png), url(../img_top/bg_faq.png);
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position: left top, right bottom, center bottom;
	background-size: auto, auto, contain;
	padding-bottom: 40px;
}	 
.faq h1{
	max-width: 320px;
}
#accordion{
 	display: none;
}
ul#col01, ul#col02{
	display: block;
	text-align: center;
}
ul#col01 li, ul#col02 li{
	display: inline-block;
	text-align: left;
	vertical-align: top;
	background-color: #ffffff;
	border-radius: 10px; 
	-webkit-border-radius: 10px; 
	-moz-border-radius: 10px; 
	padding: 20px;
	margin: 10px;
}
 ul#col01 li{
	width: calc((86% * 1/2) );
 }
 ul#col02 li{
	width: calc((80% * 1/3) );
 }
.faq ul h2{
	 font-size: 2rem;
	 margin-bottom: 10px;
 }
.faq ul p{
	 font-size: 1.4rem;
 }

/*---------------------------------
company
----------------------------------*/
 .company{
	 background: url(../img_top/bg_company_pc.jpg);
	 background-repeat: no-repeat;
	 background-position: center;
	 background-size:cover;
	 padding-bottom: 40px;
 }
.L-company{
	float: left;
	width: 36%;
	background-color: transparent;
	border-top: none;
	padding: 0 0 20px 20px;
}
.company h2{
	display: block;
	font-size: 2.4rem;
	line-height: 2;
	text-align: left;
	border-bottom: solid 3px #ffffff;
	color: #ffffff;
	background-color: transparent;
	margin: 20px auto;
}
	 
/* 表組の基本設定 */
.company dt,
.company dd
{
	font-size: 1.4rem;
	line-height: 1.4;
	text-align: left;
	font-weight: bold;
	color: #ffffff;
}
.company dt{
	 float: left;
	 clear:left;
	 width: 60px;
 }
.company dd{
	 width: 600px;
	margin-left: 20%;
 }
.even{
	background-color: transparent;
}


 } /* end 960px*/