@charset "utf-8";

#csvalue.csvalue--index .visual__inner { background-image: url("/common_old/img/sharedvalue/bg_csvalue.jpg"); background-position: 50% 0; }
#csvalue.csvalue--index .visual__inner--title h1 { font-size: 2.5em; margin-bottom: 0; margin-top: 10px; }
#csvalue.csvalue--index .visual__inner--title h1 br.sp { display: inline; }

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

.md_container { padding: 0 20px; }

/*============================
#messageArea
============================*/
#messageArea { margin-top: 50px; }
#messageArea .title { font-size: 2.4rem; text-align: center; }
#messageArea .content {}
#messageArea .content ul {}
#messageArea .content ul li { margin-top: 30px; }
#messageArea .content ul li .image { text-align: center; }
#messageArea .content ul li .image img { width: 240px; height: auto; display: inline; }
#messageArea .content ul li .data {}
#messageArea .content ul li .data .text { margin-top: 20px; }
#messageArea .content ul li .data .name { margin-top: 15px; font-weight: bold; text-align: center; }
#messageArea .beltImage { margin-top: 60px; }
#messageArea .beltImage img { float: left; width: 50%; height: auto; }

/*============================
#approachArea
============================*/
#approachArea { text-align: center; margin-top: 50px; padding-top: 50px; border-top: solid 1px #ddd; }
#approachArea .title { font-size: 2.4rem; }
#approachArea .copy {}
#approachArea .content {}
#approachArea .content ul {}
#approachArea .content ul li { margin-top: 30px; }
#approachArea .content ul li .image {}
#approachArea .content ul li .image img { width: 100%; max-height: 230px; object-fit: cover; }
#approachArea .content ul li .subTitle { margin-top: 20px; text-align: center; }
#approachArea .content ul li .subTitle .name { display: inline-block; padding: 2px 20px 1px; color: #aaa; border: 1px solid #aaa; border-radius: 20px; font-size: 0.9125em; }
#approachArea .content ul li .subTitle .problem { margin-top: 10px; font-weight: bold; font-size: 1.75rem; }
#approachArea .content ul li .text { text-align: left; margin-top: 10px; line-height: 1.5; }

/*============================
#municipalityArea
============================*/
#municipalityArea { text-align: center; margin-top: 50px; padding-top: 50px; border-top: solid 1px #ddd; }
#municipalityArea .title { font-size: 2.4rem; }
#municipalityArea .copy { line-height: 1.75; margin-top: 20px; }
#municipalityArea .copy br.pc { display: none; }
#municipalityArea .content {}
#municipalityArea .content ul {}
#municipalityArea .content ul li { margin-top: 26px; }
#municipalityArea .content ul li .image {}
#municipalityArea .content ul li .image img { width: 100%; max-height: 230px; object-fit: cover; }
#municipalityArea .content ul li .areaName { margin-top: 10px; font-weight: bold; }
#municipalityArea .content .detail { margin-top: 30px; }
#municipalityArea .content .detail .text {}
#municipalityArea .content .detail .text br.sp {  }
#municipalityArea .content .detail .button { margin-top: 15px; text-align: center; }
#municipalityArea .content .detail .button a { display: block; border: solid 1px #777; padding: 14px 0 12px; text-align: center; color: #777; position: relative; }

/*============================
#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/workers/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){

#csvalue.csvalue--index .visual__inner--title h1 { font-size: 4em; margin-top: 20px; }
#csvalue.csvalue--index .visual__inner--title h1 br.sp { display: none; }
	
.md_container { max-width: 1000px; padding: 0 20px; margin: 0 auto; box-sizing: border-box; }
    
/*============================
#messageArea
============================*/
#messageArea { margin-top: 100px; position: relative; }
#messageArea .title { font-size: 3.2rem;  }
#messageArea .content {}
#messageArea .content ul {}
#messageArea .content ul li { margin-top: 50px; position: relative; padding-left: 340px; min-height: 400px; }
#messageArea .content ul li .image { position: absolute; left: 0; top: 0;  }
#messageArea .content ul li .image img { width: 300px; }
#messageArea .content ul li .data {}
#messageArea .content ul li .data .text { margin-top: 0; padding-top: 0; }
#messageArea .content ul li .data .name { margin-top: 20px; text-align: left; }
#messageArea .beltImage { position: relative; height: 0; padding-top: 25%; margin-top: 100px; }
#messageArea .beltImage img:nth-child(1) { position: absolute; bottom: 0; right: 50%; width: 50%; }
#messageArea .beltImage img:nth-child(2) { position: absolute; bottom: 0; left: 50%; width: 50%; }

/*============================
#approachArea
============================*/
#approachArea { margin-top: 100px; padding-top: 100px; }
#approachArea .title { font-size: 3.2rem; }
#approachArea .copy { margin-top: 20px; }
#approachArea .content {}
#approachArea .content ul {}
#approachArea .content ul li { float: left; display: block; width: 290px; margin-right: 44px; margin-top: 40px; }
#approachArea .content ul li:last-child { margin-right: 0; }
#approachArea .content ul li .image {}
#approachArea .content ul li .image img { width: 290px; max-height: 290px; }
#approachArea .content ul li .subTitle { margin-top: 30px; }
#approachArea .content ul li .subTitle .name {}
#approachArea .content ul li .subTitle .problem {}
#approachArea .content ul li .text { margin-top: 20px; }

/*============================
#municipalityArea
============================*/
#municipalityArea { margin-top: 100px; padding-top: 100px; }
#municipalityArea .title { font-size: 3.2rem; }
#municipalityArea .copy { margin-top: 20px; }
#municipalityArea .copy br.pc { display: inline; }	
#municipalityArea .content {}
#municipalityArea .content ul {}
#municipalityArea .content ul li { float: left; margin-top: 30px; }
#municipalityArea .content ul li:first-child { margin-right: 40px; }
#municipalityArea .content ul li:nth-child(n+3) { margin-right: 44px; }
#municipalityArea .content ul li:nth-child(5) { margin-right: 0; }
#municipalityArea .content ul li:nth-child(8) { margin-right: 0; }
#municipalityArea .content ul li .image {}
#municipalityArea .content ul li:nth-child(-n+2) .image img { width: 460px; max-height: inherit; }
#municipalityArea .content ul li:nth-child(n+3) .image img { width: 290px; max-height: auto; }
#municipalityArea .content ul li .image img {}
#municipalityArea .content ul li .areaName {}
#municipalityArea .content .detail {}
#municipalityArea .content .detail .text { margin-top: 50px; }
#municipalityArea .content .detail .text br.sp { display: none; }
#municipalityArea .content .detail .button { margin-top: 30px; }
#municipalityArea .content .detail .button a { display: inline-block; width: 380px; }

/*============================
#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; }
    
}