@charset "utf-8";

#workers.workers--index .visual__inner { background-image: url("/common_old/img/formunicipalofficewoker/bg_index.jpg"); background-position: 50% 0; }
#workers.workers--index .visual__inner--title h1 { font-size: 2.5em; margin-bottom: 0; margin-top: 10px; }

/*============================
ClearFix
============================*/
.clearFix::after { clear: both; display: block; content: ""; height: 0; line-height: 0; }

.md_container { padding: 0 20px; }

/*============================
#firstArea
============================*/
#firstArea { margin-top: 50px; }
#firstArea .title { font-size: 2.4rem; text-align: center; }
#firstArea .content {}
#firstArea .content ul {}
#firstArea .content ul li { margin-top: 30px; }
#firstArea .content ul li .image { text-align: center; }
#firstArea .content ul li .image img { width: 240px; height: auto; display: inline; }
#firstArea .content ul li .data {}
#firstArea .content ul li .data .text { margin-top: 20px; }
#firstArea .content ul li .data .name { margin-top: 15px; font-weight: bold; text-align: center; }
#firstArea .content ul li:nth-child(2) { padding-top: 30px; border-top: dotted 1px #ccc; }
#firstArea .graph { margin-top: 40px; background: url("/common_old/img/formunicipalofficewoker/bg_graph.png") no-repeat center; background-size: cover; border: solid 1px #eee; padding: 30px; }
#firstArea .graph .subTitle { font-weight: bold; text-align: center; }
#firstArea .graph .image { margin-top: 10px; text-align: center; }
#firstArea .graph .image img { width: 100%; height: auto; }
#firstArea .graph .text { margin-top: 20px; line-height: 1.5; }
#firstArea .graph .text br.pc { display: none; }

/*============================
#exampleArea
============================*/
#exampleArea { margin-top: 50px; padding-top: 50px; border-top: solid 1px #ddd; }
#exampleArea .title { font-size: 2.4rem; text-align: center; }
#exampleArea .content {}
#exampleArea .content ul {}
#exampleArea .content ul li { margin-top: 30px; }
#exampleArea .content ul li .image {}
#exampleArea .content ul li .image img { width: 100%; height: auto; }
#exampleArea .content ul li .subTitle { border-bottom: solid 1px #eee; padding: 12px 0 9px; position: relative; }
#exampleArea .content ul li .subTitle span.name { color: #777; }
#exampleArea .content ul li .subTitle span.problem { position: absolute; right: 0; font-weight: bold; }
#exampleArea .content ul li .text { margin-top: 15px; line-height: 1.5; }
#exampleArea .content ul li .button { margin-top: 15px; }
#exampleArea .content ul li .button a { display: block; border: solid 1px #777; padding: 14px 0 12px; text-align: center; color: #777; position: relative; }
#exampleArea .content ul li .button a::after { content: ""; display: block; position: absolute; right: 10px; top: 50%; margin-top: -17px; background: url("/common_old/img/formunicipalofficewoker/icon_pdf.png") no-repeat center; background-size: 24px auto; width: 24px; height: 36px; }
#exampleArea .banner { margin-top: 30px; text-align: center; }
#exampleArea .banner a { display: block; margin: 0 auto; width: 100%; padding: 30px 0; background: url("/common_old/img/formunicipalofficewoker/banner_tokachi.png") no-repeat center; background-size: cover; font-weight: bold; color: #fff; font-size: 1.125em; }

/*============================
#sharedvalueArea
============================*/
#sharedvalueArea { margin-top: 50px; padding-top: 50px; border-top: solid 1px #ddd; }
#sharedvalueArea .title { font-size: 2.4rem; text-align: center; }
#sharedvalueArea .copy { line-height: 1.75; margin-top: 20px; }
#sharedvalueArea .copy br.pc { display: none; }
#sharedvalueArea .button { margin-top: 20px; }
#sharedvalueArea .button a { display: block; border: solid 1px #777; padding: 14px 0 12px; text-align: center; color: #777; }
#sharedvalueArea .beltImage { margin-top: 60px; }
#sharedvalueArea .beltImage img { float: left; width: 50%; height: auto; }

/*============================
#howtoArea
============================*/
#howtoArea { padding-top: 50px; }
#howtoArea .title { font-size: 2.4rem; text-align: center; }
#howtoArea .content {}
#howtoArea .content ul {}
#howtoArea .content ul li { display: table; margin-top: 20px; width: 100%; }
#howtoArea .content ul li .subTitle { display: table-cell; width: 30%; text-align: center; background: #000; color: #fff; border-radius: 5px 0 0 5px; vertical-align: middle; position: relative; }
#howtoArea .content ul li .subTitle::after { content: ""; display: block; position: absolute; right: -15px; top: 50%; margin-top: -15px; border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid #6aa7cd; }
#howtoArea .content ul li .subText { display: table-cell; width: 70%; padding: 10px 10px 10px 25px; line-height: 1.5; border: solid 1px #eee; font-size: 0.9125em; vertical-align: middle; border-radius: 0 5px 5px 0; }
#howtoArea .content ul li .subText a { text-decoration: underline; }
#howtoArea .content ul li .subText a.linkRed { color: #ff5a5f; }
#howtoArea .content ul li .subText br.pc { display: none; }
#howtoArea .content ul li .subText .sub { font-size: 0.9125em; margin-top: 5px; }
#howtoArea .content ul li:nth-child(1) .subTitle { background: #aaa; }
#howtoArea .content ul li:nth-child(1) .subTitle::after { border-left: 15px solid #aaa; }
#howtoArea .content ul li:nth-child(2) .subTitle { background: #888; }
#howtoArea .content ul li:nth-child(2) .subTitle::after { border-left: 15px solid #888; }
#howtoArea .content ul li:nth-child(3) .subTitle { background: #666; }
#howtoArea .content ul li:nth-child(3) .subTitle::after { border-left: 15px solid #666; }
#howtoArea .content ul li:nth-child(4) .subTitle { background: #444; }
#howtoArea .content ul li:nth-child(4) .subTitle::after { border-left: 15px solid #444; }
#howtoArea .content ul li:nth-child(5) .subTitle { background: #222; }
#howtoArea .content ul li:nth-child(5) .subTitle::after { border-left: 15px solid #222; }
#howtoArea .content ul li:nth-child(6) .subTitle { background: #ff5a5f; }
#howtoArea .content ul li:nth-child(6) .subTitle::after { border-left: 15px solid #ff5a5f; }
#howtoArea .copy { margin-top: 40px; line-height: 1.5; }
#howtoArea .copy br.pc { display: none; }
#howtoArea .copy a { text-decoration: underline; }

/*============================
#faqArea
============================*/
#faqArea { margin-top: 50px; padding-top: 50px; border-top: solid 1px #ddd; }
#faqArea .title { font-size: 2.4rem; text-align: center; }
#faqArea .content {}
#faqArea .content ul {}
#faqArea .content ul li { margin-top: 20px; }
#faqArea .content ul li .question { border-top: solid 1px #ddd; border-bottom: solid 1px #ddd; font-size: 1.125em; padding: 15px 50px 14px 10px; text-align: center; position: relative; }
#faqArea .content ul li .question::before { content:""; position: absolute; display: block; right: 20px; top: 50%; width: 20px; height: 1px; background: #555; }
#faqArea .content ul li .question::after { content:""; position: absolute; display: block; right: 30px; top: 50%; margin-top: -10px; width: 1px; height: 20px; background: #555; }
#faqArea .content ul li .question.close::before {}
#faqArea .content ul li .question.close::after { display: none; }
#faqArea .content ul li .question span {}
#faqArea .content ul li .answer { position: relative; padding: 30px 15px 15px 80px; }
#faqArea .content ul li .answer span { position: absolute; left: 20px; top: 50%; margin-top: -25px; display: block; width: 40px; height: 40px; line-height: 40px; border-radius: 40px; background: #ff5a5f; color: #fff; text-align: center; }
#faqArea .content ul li .answer em { font-weight: bold; font-style: normal; }
#faqArea .content ul li .answer .sub {}

/*============================
#moriageArea
============================*/
#moriageArea { margin-top: 50px; padding-top: 50px; border-top: solid 1px #ddd; }
#moriageArea .title { font-size: 2.4rem; text-align: center; }
#moriageArea .copy { line-height: 1.75; margin-top: 20px; }
#moriageArea .copy br.pc { display: none; }
#moriageArea .mission { margin-top: 30px; }
#moriageArea .mission .catch { font-size: 1.8rem; text-align: center; }
#moriageArea .mission ul {}
#moriageArea .mission ul li { border-left: solid 1px #ddd; border-right: solid 1px #ddd; padding: 15px; position: relative; margin-top: 20px; }
#moriageArea .mission ul li::before { content: ""; position: absolute; left: 0; top: 0; display: block; width: 15px; height: 100%; border-top: solid 1px #ddd; border-bottom: solid 1px #ddd; }
#moriageArea .mission ul li::after { content: ""; position: absolute; right: 0; top: 0; display: block; width: 15px; height: 100%; border-top: solid 1px #ddd; border-bottom: solid 1px #ddd; }
#moriageArea .mission ul li .subTitle { text-align: center; font-weight: bold; }
#moriageArea .mission ul li .subText { margin-top: 10px; }
#moriageArea .categoly { margin-top: 30px; }
#moriageArea .categoly .catch { font-size: 1.8rem; text-align: center; }
#moriageArea .categoly ul {}
#moriageArea .categoly ul li { border: solid 1px #ddd; background: #f5f5f5; margin-top: 20px; padding: 15px; }
#moriageArea .categoly ul li .subTitle { text-align: center; font-weight: bold; }
#moriageArea .categoly ul li .subText { margin-top: 10px; }
#moriageArea .button { margin-top: 20px; }
#moriageArea .button a { display: block; border: solid 1px #777; padding: 10px 25px; text-align: center; color: #777; }
#moriageArea .partners { margin-top: 30px; }
#moriageArea .partners .catch { font-size: 1.8rem; text-align: center; }
#moriageArea .partners .copy { line-height: 1.75; margin-top: 20px; }
#moriageArea .partners .copy br.pc { display: none; }
#moriageArea .partners .partnersList {}
#moriageArea .partners .partnersList ul {}
#moriageArea .partners .partnersList ul li { float: left; width: 48%; margin-right: 4%; border: solid 1px #ddd; padding: 15px; margin-top: 20px; box-sizing: border-box; }
#moriageArea .partners .partnersList ul li:nth-child(2n) { margin-right: 0; }
#moriageArea .partners .partnersList ul li {}
#moriageArea .partners .partnersList ul li .company { text-align: center; }
#moriageArea .partners .partnersList ul li .company img { height: 40px; width: auto; display: inline;}
#moriageArea .partners .partnersList ul li .company .name { font-weight: bold; }
#moriageArea .partners .partnersList ul li .content { margin-top: 10px; }
#moriageArea .partners .partnersList ul li .content .subTitle {}
#moriageArea .partners .partnersList ul li .content .subText { font-size: 0.9125em; text-indent: -1em; padding-left: 1em; margin-top: 5px; }

/*============================
#contactArea
============================*/
#contactArea { margin-top: 50px; padding-bottom: 50px; padding-top: 50px; border-top: solid 1px #ddd; }
#contactArea .content { border: solid 1px #ddd; padding: 30px; }
#contactArea .content .title { font-size: 2rem; text-align: center; position: relative; }
#contactArea .content .title::before { content: "";
    background: url("/common_old/img/formunicipalofficewoker/icon_check.png") 0 0 no-repeat;  width: 25px; height: 27px; display: inline-block; position: relative; top: 5px; margin-right: 8px; }
#contactArea .content .subTitle { margin-top: 20px; font-weight: bold; text-align: center; }
#contactArea .content .button { margin-top: 10px; }
#contactArea .content .button a { display: block; border: solid 1px #777; padding: 14px 0 12px; text-align: center; color: #777; }

@media screen and (min-width:769px) {
	
#workers.workers--index .visual__inner--title h1 { font-size: 4em; margin-top: 20px; }
.md_container { max-width: 1000px; padding: 0 20px; margin: 0 auto; box-sizing: border-box; }
	
/*============================
#firstArea
============================*/
#firstArea { margin-top: 100px; }
#firstArea .title { font-size: 3.2rem; }
#firstArea .content {}
#firstArea .content ul {}
#firstArea .content ul li { margin-top: 50px; position: relative; padding-left: 340px; min-height: 400px; }
#firstArea .content ul li .image { position: absolute; left: 0; top: 0; }
#firstArea .content ul li .image img { width: 300px; }
#firstArea .content ul li .data {}
#firstArea .content ul li .data .text { margin-top: 0; padding-top: 40px; }
#firstArea .content ul li .data .name { margin-top: 20px; text-align: left; }
#firstArea .content ul li:nth-child(2) { padding-top: 40px; margin-top: 40px; padding-left: 0; padding-right: 340px;  }
#firstArea .content ul li:nth-child(2) .image { position: absolute; left: inherit; right: 0; top: 40px; }
#firstArea .content ul li:nth-child(2) .data .text { padding-top: 20px; }
#firstArea .graph { margin-top: 60px; padding: 40px; }
#firstArea .graph .subTitle { font-weight: bold; text-align: center; }
#firstArea .graph .image { margin-top: 20px; }
#firstArea .graph .image img { width: 601px; height: auto; display: inline; }
#firstArea .graph .text { margin-top: 30px; text-align: center; }
#firstArea .graph .text br.pc { display: inline; }

/*============================
#exampleArea
============================*/
#exampleArea { margin-top: 100px; padding-top: 100px; }
#exampleArea .title { font-size: 3.2rem; }
#exampleArea .content {}
#exampleArea .content ul {}
#exampleArea .content ul li { margin-top: 40px; float: left; width: 450px; margin-right: 60px; }
#exampleArea .content ul li:nth-child(2n) { margin-right: 0; }
#exampleArea .content ul li .image {}
#exampleArea .content ul li .image img 
#exampleArea .content ul li .subTitle { padding: 14px 0 11px; }
#exampleArea .content ul li .subTitle span.name {}
#exampleArea .content ul li .subTitle span.problem {}
#exampleArea .content ul li .text { margin-top: 20px; }
#exampleArea .content ul li .button { margin-top: 20px; }
#exampleArea .content ul li .button a { padding: 15px 0 13px; }
#exampleArea .content ul li .button a::after {}
#exampleArea .banner { margin-top: 60px; }
#exampleArea .banner a { display: block; margin: 0 auto; width: 480px; padding: 30px 0; }
	
/*============================
#sharedvalueArea
============================*/
#sharedvalueArea { margin-top: 100px; padding-top: 100px; }
#sharedvalueArea .title { font-size: 3.2rem; }
#sharedvalueArea .copy { line-height: 1.75; margin-top: 30px; text-align: center; }
#sharedvalueArea .copy br.pc { display: inline; }
#sharedvalueArea .button  { margin-top: 30px; text-align: center; }
#sharedvalueArea .button a { display: inline-block; width: 380px; }
#sharedvalueArea .beltImage { position: relative; height: 0; padding-top: 25%; margin-top: 100px; }
#sharedvalueArea .beltImage img:nth-child(1) { position: absolute; bottom: 0; right: 50%; width: 50%; }
#sharedvalueArea .beltImage img:nth-child(2) { position: absolute; bottom: 0; left: 50%; width: 50%; }

/*============================
#howtoArea
============================*/
#howtoArea { padding-top: 100px; }
#howtoArea .title { font-size: 3.2rem; }
#howtoArea .content {}
#howtoArea .content ul {}
#howtoArea .content ul li { margin-top: 30px; height: 80px; }
#howtoArea .content ul li .subTitle { width: 230px; border-radius: 10px 0 0 10px; font-size: 1.25em; }
#howtoArea .content ul li .subTitle::after { right: -29px; top: 0; margin-top: 0; border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 30px solid #6aa7cd; }
#howtoArea .content ul li .subText { width: 730px; padding: 0 15px 0 40px; border-radius: 0 10px 10px 0; font-size: 1em; }
#howtoArea .content ul li .subText a {}
#howtoArea .content ul li .subText a.linkRed {}
#howtoArea .content ul li .subText br.pc { display: inline; }
#howtoArea .content ul li .subText .sub {}
#howtoArea .content ul li:nth-child(1) .subTitle {}
#howtoArea .content ul li:nth-child(1) .subTitle::after { border-left: 30px solid #aaa; }
#howtoArea .content ul li:nth-child(2) .subTitle {}
#howtoArea .content ul li:nth-child(2) .subTitle::after { border-left: 30px solid #888; }
#howtoArea .content ul li:nth-child(3) .subTitle {}
#howtoArea .content ul li:nth-child(3) .subTitle::after { border-left: 30px solid #666; }
#howtoArea .content ul li:nth-child(4) .subTitle {}
#howtoArea .content ul li:nth-child(4) .subTitle::after { border-left: 30px solid #444; }
#howtoArea .content ul li:nth-child(5) .subTitle {}
#howtoArea .content ul li:nth-child(5) .subTitle::after { border-left: 30px solid #222; }
#howtoArea .content ul li:nth-child(6) .subTitle {}
#howtoArea .content ul li:nth-child(6) .subTitle::after { border-left: 30px solid #ff5a5f; }
#howtoArea .copy { text-align: center; }
#howtoArea .copy br.pc { display: inline; }
#howtoArea .copy a {}

/*============================
#faqArea
============================*/
#faqArea { margin-top: 100px; padding-top: 100px; }
#faqArea .title { font-size: 3.2rem; }
#faqArea .content {}
#faqArea .content ul {}
#faqArea .content ul li { margin-top: 40px; }
#faqArea .content ul li .question { padding: 20px 50px 18px 10px; cursor: pointer; }
#faqArea .content ul li .question::before { right: 30px; width: 31px; }
#faqArea .content ul li .question::after { right: 45px; top: 50%; margin-top: -15px; width: 1px; height: 31px; }
#faqArea .content ul li .question.close::before {}
#faqArea .content ul li .question.close::after {}
#faqArea .content ul li .question span {}
#faqArea .content ul li .answer { position: relative; padding: 0 30px 0 240px; margin-top: 40px; margin-bottom: 60px; }
#faqArea .content ul li .answer span { left: 100px; top: 50%; margin-top: -40px; display: block; width: 80px; height: 80px; line-height: 80px; border-radius: 80px; font-size: 2em; }
#faqArea .content ul li .answer em { font-weight: bold; font-style: normal; }
#faqArea .content ul li .answer .sub {}
#faqArea .content ul li .answer a { text-decoration: underline; }

/*============================
#moriageArea
============================*/
#moriageArea { margin-top: 100px; padding-top: 100px; }
#moriageArea .title { font-size: 3.2rem; }
#moriageArea .copy { line-height: 1.75; margin-top: 30px; text-align: center; }
#moriageArea .copy br.pc { display: inline; }
#moriageArea .mission { margin-top: 40px; }
#moriageArea .mission .catch { font-size: 2.4rem; }
#moriageArea .mission ul {}
#moriageArea .mission ul li { margin-top: 30px; float: left; width: 290px; margin-right: 45px; padding: 30px; box-sizing: border-box; }
#moriageArea .mission ul li:nth-child(3n) { margin-right: 0; }
#moriageArea .mission ul li::before { content: ""; position: absolute; left: 0; top: 0; display: block; width: 15px; height: 100%; border-top: solid 1px #ddd; border-bottom: solid 1px #ddd; }
#moriageArea .mission ul li::after { content: ""; position: absolute; right: 0; top: 0; display: block; width: 15px; height: 100%; border-top: solid 1px #ddd; border-bottom: solid 1px #ddd; }
#moriageArea .mission ul li .subTitle { text-align: center; font-weight: bold; font-size: 1.125em; }
#moriageArea .mission ul li .subText { margin-top: 15px; }
#moriageArea .categoly { margin-top: 40px; }
#moriageArea .categoly .catch { font-size: 2.4rem; }
#moriageArea .categoly ul {}
#moriageArea .categoly ul li { margin-top: 30px; float: left; width: 290px; margin-right: 45px; padding: 30px; box-sizing: border-box; }
#moriageArea .categoly ul li:nth-child(3n) { margin-right: 0; }	
#moriageArea .categoly ul li .subTitle { text-align: center; font-weight: bold; font-size: 1.125em; }
#moriageArea .categoly ul li .subText { margin-top: 15px; }
#moriageArea .button { margin-top: 30px; text-align: center; }
#moriageArea .button a { display: inline-block; width: 380px; }
#moriageArea .partners { margin-top: 60px; }
#moriageArea .partners .catch { font-size: 2.4rem; }
#moriageArea .partners .copy { line-height: 1.75; margin-top: 20px; }
#moriageArea .partners .copy br.pc { display: inline; }
#moriageArea .partners .partnersList {}
#moriageArea .partners .partnersList ul {}
#moriageArea .partners .partnersList ul li { float: left; width: 290px; margin-right: 45px; border: solid 1px #ddd; padding: 30px 20px; margin-top: 35px; box-sizing: border-box; }
#moriageArea .partners .partnersList ul li:nth-child(2n) { margin-right: 45px; }
#moriageArea .partners .partnersList ul li:nth-child(3n) { margin-right: 0; }
#moriageArea .partners .partnersList ul li {}
#moriageArea .partners .partnersList ul li .company { }
#moriageArea .partners .partnersList ul li .company img { height: 60px; width: auto; }
#moriageArea .partners .partnersList ul li .company .name {}
#moriageArea .partners .partnersList ul li .content { margin-top: 15px; }
#moriageArea .partners .partnersList ul li .content .subTitle {}
#moriageArea .partners .partnersList ul li .content .subText { }

/*============================
#contactArea
============================*/
#contactArea { margin-top: 100px; padding-bottom: 100px; padding-top: 100px; }
#contactArea .content { padding: 50px 0 60px; }
#contactArea .content .title { font-size: 2.6rem; }
#contactArea .content .title::before { content: "";
    background: url("/common_old/img/formunicipalofficewoker/icon_check.png") 0 0 no-repeat;  width: 25px; height: 27px; display: inline-block; position: relative; top: 5px; margin-right: 8px; }
#contactArea .content .subTitle { margin-top: 20px; font-weight: bold; text-align: center; }
#contactArea .content .button { margin-top: 10px; text-align: center; }
#contactArea .content .button a { display: inline-block; width: 380px; }
	
}