@charset "UTF-8";

@media only screen and (max-width: 1000px) {

/* common /////////////////////////////////////////////////////////////////////////////////////////// */

.spNone {
    display: none;
}

.pcNone {
    display: block;
}

.cmn_maxbox {
    padding: 0 3%;
}

.home_main_wrapper p,
.sub_main_wrapper p,
.home_main_wrapper dt,
.sub_main_wrapper dt,
.home_main_wrapper dd,
.sub_main_wrapper dd,
.home_main_wrapper li,
.sub_main_wrapper li,
.home_main_wrapper a,
.sub_main_wrapper a {
    font-size: 1.4rem;
}




/* header */
.cmn_header_top > div {
    height: 60px;
    padding: 0 16px;
}

.cmn_header_logo img{
    height: 36px;
}

.cmn_header_right > a {
    position: relative;
    display: inline-block;
}

.cmn_header_right > a img {
    display: inline-block;
    height: 24px;
}

#cmn_drawer {
    display: block;
    height: 24px;
}

#cmn_drawer_check {
    display: none;
}

#cmn_drawer_close_bg {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 89;
    display: none;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
}

#cmn_drawer_check:checked ~ #cmn_drawer_close_bg {
    display: inline-block;
}

#cmn_drawer_close_btn {
    position: absolute;
    top: 20px;
    right: 16px;
    display: inline-block;
    width: 23px;
    height: 23px;
    background: url(../img/header_ico_close.svg) no-repeat left top / 100% 100%;
    cursor: pointer;
}

#cmn_drawer_open {
    display: inline-block;
    width: 26px;
    height: 100%;
    margin: 0 0 0 24px;
    background: url(../img/header_ico_spmenu.svg) no-repeat left top / 100% 100%;
    cursor: pointer;
}

#cmn_drawer_conts {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 99;
    transform: translate(100%, 0);
    display: block;
    width: 200px;
    height: 100%;
    background: rgba(4,106,118,0.8);
    transition: transform .3s;
}

#cmn_drawer_conts ul {
    margin: 60px 0 0 0;
}

#cmn_drawer_conts li {
    border-bottom: 1px solid #FFF;
}

#cmn_drawer_conts li:first-of-type {
    border-top: 1px solid #FFF;
}

#cmn_drawer_conts a {
    display: block;
    height: 60px;
    line-height: 60px;
    padding: 0 20px;
}

#cmn_drawer_conts a span {
    display: inline-block;
    width: 36px;
    margin: 0 2px 0 0;
    text-align: center;
    text-shadow: 2px 2px 2px rgba(30, 41, 86, 0.5);
}

#cmn_drawer_conts a p {
    display: inline-block;
    color: #FFF;
    text-shadow: 2px 2px 2px rgba(30, 41, 86, 0.5);
}

#cmn_drawer_check:checked ~ #cmn_drawer_conts {
    transform: none;
}

.cmn_header_right {
    align-items: center;
    margin: 4px 0 0 0;
}

.cmn_header_right > p,
.cmn_header_right > span {
    display: none;
}


.home_mainimg li[class^="slide"] {
    height: 540px;
}

.home_mainimg li.slide01 {
    background-image: url(../img/home_mainimg01.jpg);
    background-position: left 64% center;
}

.home_mainimg li.slide02 {
    background-image: url(../img/home_mainimg02.jpg);
    background-position: left 76% center;
}

.home_mainimg li.slide03 {
    background-image: url(../img/home_mainimg03.jpg);
    background-position: left 58% center;
}

.home_mainimg li.slide04 {
    background-image: url(../img/home_mainimg04.jpg);
    background-position: left 58% center;
}

.home_mainimg li.slide05 {
    background-image: url(../img/home_mainimg05.jpg);
    background-position: left 84% center;
}

.home_mainimg h2 {
    padding: 30px 0 0 24px;
    margin: 0;
    font-size: calc(24px + (36 - 24)*(100vw - 375px)/(1000 - 375));
}


.sub_header .cmn_header_gnav {
    display: none;
}

.cmn_header_gnav ul {
    justify-content: space-between;
    flex-wrap: wrap;
}

.cmn_header_gnav li {
    width: 33.333%;
}

.cmn_header_gnav a {
    height: 80px;
    padding: 12px 0 0 0;
}

.cmn_header_gnav img {
    display: inline-block;
    height: 28px;
}

.cmn_header_gnav p {
    margin: 7px 0 0 0;
    font-size: 1.5rem;
    letter-spacing: 0;
}







/* footer */
footer {
    padding: 50px 0 0 0;
}

.footer_top {
    display: block;
    text-align: center;
}

.footer_top > p:first-of-type {
    margin: 24px 0 0 0;
    font-size: 1.4rem;
}

.footer_top > p:last-of-type {
    margin: 22px 0 30px 0;
}

.footer_nav ul {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

.footer_nav li {
    width: 33%;
    height: auto;
    line-height: 1.5;
    margin: 0;
    text-align: center;
}

.footer_nav li:first-of-type {
    width: 100%;
}

.footer_nav li:first-of-type a {
    padding: 12px 6px 10px;
}

.footer_nav a {
    display: block;
    width: 100%;
    padding: 10px 6px;
}

.footer_copyright {
    padding: 10px 3%;
}


/* 共通ボタン */
.cmn_btn a {
    padding: 14px 26px 14px 16px;
    font-size: 1.6rem;
}

/* 共通タイトル（ペンキローラー） */
.home_main_wrapper h4,
.sub_main_wrapper:not(.case_single_wrapper) h2 {
    max-width: 360px;
    height: 76px;
    padding: 0 40px 0 0;
    margin: 0 auto 30px;
    width: 100%;
    color: #FFF;
    font-size: 1.9rem;
    letter-spacing: .01em;
    background: url(../img/cmn_tit_paint_sp.png) no-repeat center / auto 100%;
}

/* 共通タイトル（下線両端正方形） */
.service_wrapper h3,
.case_single_wrapper h2 {
    margin: 0 0 22px 0;
}

.service_wrapper h3 span,
.case_single_wrapper h2 span {
    font-size: 1.6rem;
}

.service_wrapper h3 small,
.case_single_wrapper h2 small {
    padding: 2px 8px;
    font-size: 1.3rem;
}


/* 共通 表レイアウト（背景色あり） */
.cmn_table_bg dt,
.cmn_table_bg dd {
    padding: 16px 14px;
}

.cmn_table_bg dt {
    min-width: 130px;
    font-size: 1.5rem;
}

/* 共通 表レイアウト（ドットあり） */
.cmn_table_dot div {
    display: block;
}

.cmn_table_dot dt {
    display: block;
    width: 100%;
    padding: 16px 0 4px;
    font-size: 1.5rem;
}

.cmn_table_dot dd {
    padding: 4px 10px 16px;
}



/* SUB 塗装背景など */
.home_news,
.home_propo,
.recruit_contact,
.faq_list,
.service_case,
.sub_main_wrapper > section:not(.sub_mainimg)
{
    padding: 40px 0 40px;
}

.home_about,
.home_case,
.company_outline,
.company_results,
.recruit_jobinfo,
.contact_form
{
    padding: 40px 0 40px;
}



/* SUB メイン画像 */
.sub_mainimg {
    height: 200px;
}

.sub_mainimg h1 {
    font-size: 2.6rem;
}




/* home /////////////////////////////////////////////////////////////////////////////////////////// */



.home_case h3,
.home_news h3 {
    margin: 0 0 26px 0;
}

.home_case h3 span,
.home_news h3 span {
    font-size: 2.0rem;
}

.home_case ul,
.case_list ul {
    display: block;
    margin: 0 0 38px 0;
}

.home_case ul::after,
.case_list ul::after {
    display: none;
}

.home_case li,
.case_list li {
    width: 100%;
    margin: 0 0 14px 0;
}

.case_list > div > p {
    margin: 0 0 32px 0;
}

.home_case li > a,
.case_list li > a {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}


.home_case .imgbox,
.case_list .imgbox {
    flex-shrink: 0;
    width: 44%;
    min-width: 150px;
    height: auto;
    padding: 0;
}

.home_case .imgbox img:not(.new),
.case_list .imgbox img:not(.new) {
    position: static;
    transform: none;
}

.home_case li > a:hover img:not(.new),
.case_list li > a:hover img:not(.new) {
    transform: none;
}


.home_case .imgbox span,
.case_list .imgbox span {
    font-size: 1.2rem;
}

.home_case .txtbox,
.case_list .txtbox {
    width: 100%;
    display: block;
    padding: 0 0 0 14px;
}

.home_case .txtbox > span,
.case_list .txtbox > span {
    width: 100%;
    margin: 2px 0 4px 0;
}

.home_case .txtbox p,
.case_list .txtbox p {
    width: 100%;
}




.home_news dl {
    padding: 0 16px;
    height: 400px;
}

.home_news dt {
    padding: 20px 6px 4px;
}

.home_news dt span {
    font-size: 1.2rem;
}

.home_news dt p {
    font-size: 1.6rem;
}

.home_news dd {
    padding: 4px 6px 16px;
}





/* case /////////////////////////////////////////////////////////////////////////////////////////// */


.case_article {
    padding: 40px 3% 120px;
}




/* company /////////////////////////////////////////////////////////////////////////////////////////// */







/* contact /////////////////////////////////////////////////////////////////////////////////////////// */


.contact_form > div > p {
    margin: 0 0 28px 0;
}

.contact_form_table {
    margin: 0 0 42px 0;
}

.contact_form_table > div {
    display: block;
}

.contact_form_table dt {
    width: 100%;
    border-width: 1px;
}

.contact_form_table div:last-of-type dt {
    border-width: 1px;
}

.contact_form_table dd {
    border-width: 0 1px 0 1px;
}

.contact_form_table div:last-of-type dd {
    border-width: 0 1px 1px 1px;
}

.contact_form_table #fax,
.contact_form_table #toiawase,
.contact_form_table #addr,
.contact_form_table #tel,
.contact_form_table #name_kana,
.contact_form_table #username {
    width: 100%;
}

/* mfp */
#contactButton button[type="reset"],
#contactButton button[type="submit"] {
    display: block;
}

#contactButton button[type="reset"] {
    margin: 0 auto 22px;
}

#contactButton button[type="submit"] {
    margin: 0 auto;
}







/* faq /////////////////////////////////////////////////////////////////////////////////////////// */


.faq_list {
    padding: 40px 3% 40px;
}

.faq_list dt {
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.faq_list dt span {
    margin: -4px 8px 0 0;
    font-size: 2.0rem;
}

.faq_list dd {
    padding: 0 0 0 20px;
    margin: 0 0 32px 0;
}





/* recruit /////////////////////////////////////////////////////////////////////////////////////////// */








/* service /////////////////////////////////////////////////////////////////////////////////////////// */


.service_category {
    padding: 50px 3% 10px;
    margin: 0 auto;
}


.service_wrapper > section:not(.sub_mainimg) {
    padding: 12px 0 12px;
}


.service_category li {
    width: 48%;
}

.service_wrapper h3 {
    margin: 8px 0 0 0;
    font-size: 1.6rem;
}

.sub_main_wrapper.service_wrapper h2 {
    max-width: 360px;
    height: 0;
    padding: 7% 26px 6% 0;
    margin: 0 auto 24px;
    font-size: 1.8rem;
}

.service_wrapper .service_okugai h2 {
    background: url(../img/service_tit_paint_okugai.png) no-repeat center / 100% auto;
}

.service_wrapper .service_okunai h2 {
    background: url(../img/service_tit_paint_okunai.png) no-repeat center / 100% auto;
}

.service_wrapper .service_bousui h2 {
    background: url(../img/service_tit_paint_bousui.png) no-repeat center / 100% auto;
}

.service_wrapper .service_other h2 {
    background: url(../img/service_tit_paint_other.png) no-repeat center / 100% auto;
}


.service_other h3 {
    margin: 10px 0 16px;
}










}












@media only screen and (max-width: 780px) {











/* common /////////////////////////////////////////////////////////////////////////////////////////// */



/* home /////////////////////////////////////////////////////////////////////////////////////////// */

.home_about > div > ul {
    display: block;
    margin: 0 0 14px 0;
}

.home_about > div > ul li {
    width: 64%;
    padding: 0 0 10px 0;
}

.home_about > div > ul li:nth-of-type(2) {
    margin: 0 auto;
}

.home_about > div > ul li:nth-of-type(3) {
    margin: 0 0 0 auto;
}

.home_about h3,
.home_propo h3 {
    margin: 0 0 20px 0;
    font-size: 2.4rem;
}

.home_about > div > p,
.home_propo > div > p {
    margin: 0 0 30px 0;
}

.home_about_flow .pc {
    display: none;
}

.home_about_flow .sp {
    display: block;
    margin: 0 auto 40px;
}

.home_propo_paint {
    padding: 26px 20px 26px;
    margin: 0 0 40px 0;
}

.home_propo_paint ul {
    display: block;
}

.home_propo_paint li {
    width: 100%;
    margin: 0 0 22px 0;
}

.home_propo_paint img {
    margin: 0 0 14px 0;
}

.home_propo_paint h5 {
    margin: 0 0 8px 0;
    font-size: 1.8rem;
}







.home_propo_service ul {
    display: block;
    margin: 0 0 34px 0;
}

.home_propo_service li {
    position: static;
    display: flex;
    align-items: stretch;
    width: 100%;
    height: auto;
    min-height: 120px;
    margin: 0 0 12px 0;
}

.home_propo_service li::before {
    flex-shrink: 0;
    width: 20%;
    min-width: 120px;
    height: auto;
}

.home_propo_service li div {
    position: static;
    width: 100%;
    height: auto;
    padding: 16px 12px;
}

.home_propo_service h5 {
    margin: 0 0 6px 0;
    font-size: 1.8rem;
}




/* case /////////////////////////////////////////////////////////////////////////////////////////// */


.case_article {
    overflow: hidden;
}

.case_article .change {
    display: block;
    margin: 0 0 40px 0;
}

.case_article .before {
    width: 100%;
}

.case_article .before span,
.case_article .after span {
    margin: 16px 0 0 0;
}

.case_article .arr {
    width: 100%;
    text-align: center;
    margin: 34px 0 46px 2%;
}

.case_article .arr img {
    transform: rotate(50deg);
}

.case_article .gallery {
    margin: 0 0 44px 0;
}

.case_article .gallery li {
    width: 48%;
    margin: 0 0 26px 0;
}

.case_article .gallery::after {
    display: none;
}

.case_article .gallery a {
    margin: 0 0 8px 0;
}

.case_article .pager {
    justify-content: space-between;
    position: relative;
}

.case_article .pager .prev,
.case_article .pager .back,
.case_article .pager .next {
    width: 140px;
}


.case_article .pager .back {
    position: absolute;
    left: 50%;
    top: 70px;
    transform: translate(-50%,0);
    margin: 0;
}

.case_article .pager .prev a,
.case_article .pager .back a,
.case_article .pager .next a {
    font-size: 1.5rem;
}

.case_article .pager .prev a {
    background-position: left .8em center;
}

.case_article .pager .back a,
.case_article .pager .next a {
    background-position: right .8em center;
}




/* company /////////////////////////////////////////////////////////////////////////////////////////// */

.company_msg_card {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
}

.company_msg_card p > span {
    margin: 28px 20px 0 0;
}

.company_msg_card img {
    max-width: 84%;
    margin: 0 auto 24px;
}

.company_access > div > div {
    margin: 0 0 26px 0;
}

.company_access address {
    font-size: 1.6rem;
}

.company_access dl div {
    display: block;
    margin: 0 0 22px;
}

.company_access dt {
    width: 250px;
    margin: 0 0 8px 0;
}







/* contact /////////////////////////////////////////////////////////////////////////////////////////// */

.contact_info section {
    padding: 26px 28px 16px;
}

.contact_info h3 {
    font-size: 2.8rem;
}

.contact_info h3 > span {
    font-size: 2.6rem;
}

.contact_info h3 span span {
    font-size: 2.2rem;
}

.contact_info dl {
    display: block;
}

.contact_info dl div {
    justify-content: center;
    width: 100%;
    margin: 0 0 10px 0;
}

.contact_info dd {
    width: 230px;
}

.contact_info dd span,
.contact_info dd a {
    font-size: 2.2rem;
}

.contact_info dd a {
    pointer-events: all;
}

.contact_info address {
    font-size: 1.4rem;
}






/* faq /////////////////////////////////////////////////////////////////////////////////////////// */







/* recruit /////////////////////////////////////////////////////////////////////////////////////////// */

.recruit_contact {
    padding: 40px 3% 40px;
}

.recruit_contact_card {
    padding: 18px 14px;
    background: none;
}

.recruit_contact_card > div {
    width: 100%;
}

.recruit_contact_card p {
    margin: 0 0 14px 0;
    text-align: center;
}

.recruit_contact_card dl {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 18px 0;
}

.recruit_contact_card dt {
    display: inline-block;
    border-radius: 0.4rem;
    padding: 1px 6px;
    margin: 0 8px 12px 0;
    color: #FFF;
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    background: #046A76;
}

.recruit_contact_card dd a {
    font-size: 2.8rem;
    pointer-events: all;
}









/* service /////////////////////////////////////////////////////////////////////////////////////////// */


.service_okugai > div > p,
.service_okunai > div > p,
.service_bousui > div > p {
    margin: 0 auto 40px;
}

.service_okugai li,
.service_okunai li,
.service_bousui li,
.service_other li {
    width: 48%;
    margin: 0 0 18px 0;
}

.service_okugai ul::after,
.service_okunai ul::after,
.service_bousui ul::after,
.service_other ul::after {
    display: none;
}

.service_case {
    padding: 40px 3% 40px;
}

.service_case_card {
    padding: 18px 14px;
    background: none;
}

.service_case_card > div {
    width: 100%;
}

.service_case_card p {
    margin: 0 0 14px 0;
    text-align: center;
}

.service_case_card dd a {
    font-size: 2.8rem;
    pointer-events: all;
}







}














@media only screen and (max-width: 480px) {













/* common /////////////////////////////////////////////////////////////////////////////////////////// */


/* home /////////////////////////////////////////////////////////////////////////////////////////// */







/* case /////////////////////////////////////////////////////////////////////////////////////////// */







/* company /////////////////////////////////////////////////////////////////////////////////////////// */







/* contact /////////////////////////////////////////////////////////////////////////////////////////// */







/* faq /////////////////////////////////////////////////////////////////////////////////////////// */







/* recruit /////////////////////////////////////////////////////////////////////////////////////////// */








/* service /////////////////////////////////////////////////////////////////////////////////////////// */












}