@charset "utf-8";


/*============================
#leadArea
============================*/
.md_lead {}
.md_lead .box { display: flex; align-items: center; }
.md_lead .box .text { flex: 1; font-size: 1em; text-align: left; }
.md_lead .box .button { width: 360px; margin-right: 20px; }
.md_lead .box .button a.md_btn_line { width: 100%; padding-top: 20px; padding-bottom: 20px; }
.md_lead { padding-bottom: 100px; }

/*============================
#communityArea
============================*/
#communityArea { margin-top: -50px; }
#communityArea .md_container {}
#communityArea .content { display: flex; align-items: center; padding: 25px 25px 25px 40px; border: solid 1px #222; background: #f7f6f4; }
#communityArea .content .data { flex: 1; }
#communityArea .content .data .title { font-weight: bold; line-height: 1.5; font-size: 1.125em; }
#communityArea .content .data .text { margin-top: 10px; line-height: 1.5; font-size: 0.9125em; }
#communityArea .content .banner { width: 380px; }
#communityArea .content .banner a { display: block; overflow: hidden; border-radius: 5px; position: relative; }
#communityArea .content .banner a::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0.05; transition: 0.3s all; }
#communityArea .content .banner a img { width: 100%; height: auto; transition: 0.3s all; }
#communityArea .content .banner a:hover img { transform: scale(1.05); }
#communityArea .content .banner a:hover::after { opacity: 0; }

/*============================
#frameArea
============================*/
#frameArea { margin-top: 100px; }
#frameArea .md_mainTitle {}
#frameArea .md_mainTitle .sub {}
#frameArea .md_mainTitle h2.main {}
#frameArea .content { margin-top: 40px; }
#frameArea .content .image { text-align: center; padding: 50px 0; background: url("/imageFile/forlocal/bg_local.png") no-repeat center; }
#frameArea .content .image img {}
#frameArea .content .image .text { margin-top: 30px; line-height: 2; font-weight: bold; font-size: 1em; text-align: center; }

/*============================
#exampleArea
============================*/
#exampleArea { margin-top: 100px; padding-top: 100px; border-top: solid 1px #ddd; }
#exampleArea .md_mainTitle {}
#exampleArea .md_mainTitle .sub {}
#exampleArea .md_mainTitle h2.main {}
#exampleArea .content {}
#exampleArea .content ul {}
#exampleArea .content ul li { margin-top: 40px; float: left; width: 48%; margin-right: 4%; }
#exampleArea .content ul li:nth-child(2n) { margin-right: 0; }
#exampleArea .content ul li .image {}
#exampleArea .content ul li .image img { width: 100%; height: auto; }
#exampleArea .content ul li .subTitle { margin-top: 20px; position: relative; padding-bottom: 15px; border-bottom: solid 1px #ddd; }
#exampleArea .content ul li .subTitle .name {}
#exampleArea .content ul li .subTitle .problem { position: absolute; right: 0; top: 0; font-weight: bold; }
#exampleArea .content ul li .text { margin-top: 15px; font-size: 0.875em; line-height: 1.5; }
#exampleArea .content ul li .button { margin-top: 20px; }
#exampleArea .content ul li .button a { display: block; }
#exampleArea .content ul li .button a::after {}

/*============================
#topicsArea
============================*/
#topicsArea { margin-top: 100px; }
#topicsArea .md_mainTitle {}
#topicsArea .md_mainTitle .sub {}
#topicsArea .md_mainTitle .title {}
#topicsArea .content { position: relative; }
#topicsArea .content ul {}
#topicsArea .content ul li { float: left; width: 340px; margin-right: 70px; margin-top: 40px; }
#topicsArea .content ul li:nth-child(3n) { margin-right: 0; }
#topicsArea .content ul li a {}
#topicsArea .content ul li a .image { overflow: hidden; position: relative; border-radius: 20px; }
#topicsArea .content ul li a .image::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0.05; transition: 0.3s all; }
#topicsArea .content ul li a .image img { object-fit: cover; width: 340px; height: 255px; transition: 0.3s all; }
#topicsArea .content ul li a .text { margin-top: 15px; line-height: 1.5; font-weight: bold; }
#topicsArea .content ul li a .sub { margin-top: 10px; line-height: 1.5; font-size: 0.875em; }
#topicsArea .content ul li a .date { margin-top: 10px; color: #777; font-size: 0.875em; line-height: 1.5; }
#topicsArea .content ul li a:hover .image img { transform: scale(1.05); }
#topicsArea .content ul li a:hover .image::after { opacity: 0; }
#topicsArea .content .button { position: absolute; right: 0; top: -40px; }
#topicsArea .content .button .md_btn_main {}