@charset "utf-8";
/* CSS Document */

@media only screen and (max-width:1320px){
    
    .top_water_text{ width: 41%; top: 8%;}
    .pc_menu .contact-btn p { margin-top: -5px;}
    .suisha_page_head{ height: 350px;}
    .company_page_head{ height: 350px;}
    .commitment_page_head{ height: 350px;}
    .works_page_head{ height: 350px;}
    .contact_page_head{ height: 350px;}
    .inner_tit { padding-top: 160px;}
}

@media only screen and (max-width:1024px){
    
    .pc_menu{ padding: 10px 0 10px 35px;}
    .pc_menu h1 img { width: 155px; margin-top: 10px;}
    .pc_menu .contact-btn p { margin-top: -6px;}
    .pc_menu a{ font-size: 1.1em;}
    
    .catch h1{ font-size: 3.6em;}
    
    .top_commit .inner{ padding: 90px 0;}
    .commit_tit h2{ font-size: 1.6em;}
    .commit_item img { width: 240px;}
    
    .top_works .inner{ padding: 90px 0;}
    .top_btn{ margin: 65px auto 0 auto;}
    
    .top_water .inner{ padding: 90px 0;}
    .top_water_text h2{ font-size: 1.5em;}
    .top_water_text{ padding: 40px; top:4%; width: 44%;}
    .top_water_img{width: 64%;}
    
    .contact_item02 h3{ font-size: 2.2em;}
    .top_contact .inner{ padding: 90px 0;}
    .contact_img{ width: 270px;}
    .top_btn_contact{ margin: 55px auto 0 auto;}
    
    footer .inner{ width: 80%;}
    footer .footer_img01 img{ width: 240px;}
    footer .footer_img02 img{ height: 160px;}
    footer .flex_footer{ margin-top: 50px;}
    
    .suisha_page_head{ height: 350px;}
    .page_tit h1 { font-size: 2.2em;}
    /*.inner_tit{ padding-top: 135px;}*/
    .suisha_content01 .inner { padding: 60px 0;}
    .suisha_tit_img { max-width: 380px;}
    .suisha_content03 .inner { padding: 60px 0;}
    
    .works_item dl h3{ font-size: 1.3em;}
    .works_content .inner{ padding: 90px 0;}
    .works_detail_content .inner{ padding: 90px 0;}
    .works_btn a{ font-size: 1em;}
    
    .comm_item_box{ flex-direction: column; padding: 60px;}

    .comm_img{ width: 100%;}
    .comm_img img{width: 100%;}
    .comm_text{
        width: 100%;
        box-sizing: border-box;
        padding-top: 20px;
        padding-bottom: 0;
        padding-left: 0;
        padding-right: 0;
    }
    
    .comm_text p{ font-size: 1.3em;}
    
    .comm_span01 img{ width: 170px;}
    .comm_span02 img{ width: 170px;}
    .comm_span03 img{ width: 170px;}
    .comm_span01,.comm_span02,.comm_span03{ top: 10px; left: 20px;}
    
}

@media only screen and (max-width:912px){
    
    .swiper-container{ height: 530px;}
    .swiper-wrapper{ height: 530px;}
    .swiper-slide img{ height: 530px;}
    .swiper-slide{ height: 530px;}
    
    .pc_menu{ display: none; }
    
    .sp_menu{
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100000;
        width: 100%;
        height: 80px;
        background: #fff;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    }
    
    .sp_menu h1{
        box-sizing: border-box;
        margin-left: 20px;
        width: 140px;
    }
    
    .sp_menu h1 img{ width: 100%; padding-top: 10px;}
    
    /*ハンバーガーメニュー*/
    
    .menu-btn {
        position: fixed;
        top: 10px;
        right: 10px;
        display: flex;
        height: 60px;
        width: 60px;
        justify-content: center;
        align-items: center;
        z-index: 99999;
        background-color: #2F0F09;
        border-radius: 60px;
    }
    .menu-btn span,
    .menu-btn span:before,
    .menu-btn span:after {
        content: '';
        display: block;
        height: 3px;
        width: 25px;
        border-radius: 3px;
        /*ボタンの線の色*/
        background-color: #fff;
        position: absolute;
        transition: all 300ms 0s ease;
    }
    .menu-btn span:before {
        bottom: 8px;
    }
    .menu-btn span:after {
        top: 8px;
    }

    #menu-btn-check {
        display: none;
    }
    #menu-btn-check:checked ~ .menu-btn span {
        background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
        transition: all 300ms 0s ease;
    }
    #menu-btn-check:checked ~ .menu-btn span::before {
        bottom: 0;
        transform: rotate(45deg);
        background-color: #ccc;
        transition: all 300ms 0s ease;
    }
    #menu-btn-check:checked ~ .menu-btn span::after {
        top: 0;
        transform: rotate(-45deg);
        background-color: #ccc;
        transition: all 300ms 0s ease;
    }

    .menu-content {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        top: -100%;
        z-index: 80;
        background-color: #EDEAE2;
        color: #222;
        transition: all 500ms 0s ease;
    }

    #menu-btn-check:checked ~ .menu-content {
        top: 0;/*メニューを画面内へ*/
    }

    .menu-content ul {
        padding-top: 35px;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        justify-content: flex-start;
    }
    .menu-content ul li {
        /*border-bottom: solid 1px #ccc;*/
        list-style: none;
        text-align: center;
        height: 15%;
    }
    .menu-content ul li a {
        display: block;
        width: 100%;
        height: 100%;
        font-size: 3em;
        box-sizing: border-box;
        text-decoration: none;
        padding: 40px 15px 0px 15px;
        position: relative;
        color: #2F0F09;
        font-weight: bold;
    }
    
    .catch h1{ font-size: 2.6em;}
    
    .commit_item img{ width: 190px;}
    .commit_tit h2 { font-size: 1.2em;}
    
    .top_works_item dl h3{ font-size: 1.4em; }
    
    .top_water_box{ flex-direction: column;}
    .top_water_img { width: 100%;}
    .top_water_text,.top_water_img{ position: static;}
    .top_water_text{ width: 100%; margin-top: 35px; box-sizing: border-box;}
    .top_water_text p{ font-size: 1.4em;}
    .top_water_text h2{ font-size: 2em;}
    
    .contact_img { width: 200px;}
    .contact_item02 h3 { font-size: 1.6em;}
    .contact_item02 { padding-left: 25px;}
    .contact_item01 p{ font-size: 0.9em;}
    
    footer li a{ font-size: 1.2em;}
    footer .footer_img02 img { height: 115px; padding-top: 25px;}
    footer .fb{ background: #042D65;}
    
    .suisha_page_head{ height: 350px;}
    .inner_tit{padding-top: 160px;}
    .suisha_content02-l,.suisha_content02-r{ background-size: 200px 320px;}
    .size{ font-size: 1.3em;}
    
    .works_content .inner{ flex-direction: column; align-items: center;}
    .works_box{ width: 100%;}
    .works_category{ width: 60%; margin: 0 auto;}
    .sp_background{
        width: 100%;
        padding: 40px;
        background: #F9F9F6;
        box-sizing: border-box;
    }
    
    .works_btn a{ font-size: 0.8em;}
    
    .commitment_page_head{
        background: #333 url("../img/commitment/commitment_page_head_tb.jpg") no-repeat;
        background-size: cover;
    }
    

    }

@media only screen and (max-width:640px){
    
    .menu-content ul li a {
        font-size: 2em;
        padding: 60px 15px 10px 15px;
    }
    
    .catch{ padding: 0 0 0 10px;}
    .catch h1{ font-size: 1.7em;}
    
    .tit h1 { font-size: 2em;}
    .tit p { font-size: 1.4em;}
    
    .commit_box{ flex-direction: column;}
    .commit_item{ width: 100%; margin-bottom: 40px;}
    .commit_item img{ width: 240px;}
    .commit_tit h2 { font-size: 1.7em;}
    
    .top_works{ background-size: auto; background-repeat: repeat-y;}
    .top_works_box{ flex-direction: column;}
    .top_works_item{ width: 100%; margin-bottom: 25px;}
    
    .top_btn { margin: 50px auto 0 auto; }
    
    .top_water_text h2 {
        display: inline-block;
        font-weight: bold;
        font-size: 1.8em; 
        background: none;
        border-bottom: 10px solid #C59E27;
    }
    
    .top_water_text p{ font-size: 1.2em;}
    
    .top_contact_box{
        box-sizing: border-box;
        padding: 45px;
    }
    
    .top_contact_box{ margin-top: 40px;}
    .flex_contact{ flex-direction: column;}
    .contact_item01,.contact_item02{ width: 100%;}
    .contact_item01{
        border-bottom:solid 5px #EDEAE2;
        border-right:solid 5px #fff;
        padding-bottom: 30px;
    }
    .contact_item02{
        text-align: left;
        padding-left: 0;
        padding-top: 30px;
    }
    .contact_img { width: 150px;}
    .contact_item01 p { font-size: 1em;}
    
    .sp_br{ display: block; width: 0; height: 0;}
    
    footer ul{ display: none;}
    footer .flex_footer{ flex-direction: column; margin-top: 0;}
    footer .footer_item{ width: 100%; margin-bottom: 40px; text-align: center;}
    footer .footer_item p{ font-size: 1em;}
    footer .copyright{ font-size: 0.8em; margin-top: 4px;}
    footer .footer_img02 img { height: 100px; padding-top: 0px;}
    footer .footer_img01{ margin-bottom: 10px;}
    footer .footer_img01 img{ width: 190px;}
    
    .suisha_page_head{
        background: #333 url("../img/suisha/suisha_page_head_sp.jpg") no-repeat;
        background-size: cover;
        width: 100%;
    }
    
    .page_tit{ max-width: 245px; }
    .suisha_tit_img { max-width: 290px;}
    
    .inner_tit{padding-top: 160px;}
    .suisha_content02-l,.suisha_content02-r{ background-size: 120px 150px;}
    .suisha_content02-l .inner{ padding: 130px 0;}
    .suisha_box{ padding: 30px;}
    .ss_flex_img{ flex-direction: column;}
    .ss_item_img{ width: 100%;}
    .suisha_content03 {
        /*background: url(../img/suisha/suisha_background.png);*/
        background-size: auto;
        background-repeat: repeat-y;
    }
    .ss_text p { font-size: 1.2em;}
    
    .price_tit h2{ font-size: 2.2em;}
    .price_flex{ flex-direction: column;}
    .price_item{ width: 100%;}
    .p_item_text ul li{ font-size: 1em;}
    
    .suisha_contact_box{ padding: 45px; margin-top: 40px;}
    .suisha_contact_box .contact_item01{ border-right: solid 5px #fff;}
    .suisha_contact_box .contact_item01 .contact_img{
        width: 100%;
        background: #042D65;
        margin-bottom: 15px;
    }
    .suisha_btn_contact { margin: 50px auto 0 auto;}
    
    .company_box,
    .company_box tr,
    .company_box td,
    .company_box th {display:block;}
    .company_box th {width:auto;}
    
    .company_box { padding: 30px 20px 20px 20px;}
    .g_map{ padding: 0 20px 40px 20px; }
    
    .works_box .works_item { width: 100%;}
    .works_category{ width: 100%;}
    .works_detail_content .inner{ padding: 60px 0;}
    .works_tit_box{ flex-direction: column;}
    .works_tit{ margin-top: 10px; margin-left: 0; text-align: center;}
    .detail_text{ padding: 20px;}
    
    .works_btn a{ font-size: 1.2em;}
    
    .comm_text h2{ font-size: 1.7em;}
    .comm_text .fs{font-size: 0.6em;}
    
    .comm_item_box{ padding: 60px 40px;}

    .comm_img{ width: 100%;}
    .comm_img img{width: 100%;}
    .comm_text{
        width: 100%;
        box-sizing: border-box;
        padding-top: 20px;
        padding-bottom: 0;
        padding-left: 0;
        padding-right: 0;
    }
    
    .commitment_page_head{
        background: #333 url("../img/commitment/commitment_page_head_sp2.jpg") no-repeat;
        background-size: cover;
    }
    
    .comm_text p{ font-size: 1.3em;}
    
    .comm_span01 img{ width: 150px;}
    .comm_span02 img{ width: 150px;}
    .comm_span03 img{ width: 150px;}
    .comm_span01,.comm_span02,.comm_span03{ top: 20px; left: 4px;}
    
    .page_link a{ border-radius: 25px;}
    
    .textBox{ padding: 40px 25px;}
    .telBox{ padding: 20px 15px;}
    .telBox p{ font-size: 1.1em;}
    .telBox h2{ font-size: 1.4em;}

}

@media only screen and (max-width:375px){
    
    .swiper-container{ height: 430px;}
    .swiper-wrapper{ height: 430px;}
    .swiper-slide img{ height: 430px;}
    .swiper-slide{ height: 430px;}
    
    .comm_img img{ border-radius: 10px;}
    .comm_item_box{ padding: 60px 30px; border-radius: 15px;}
    .commitment_page_head{
        background: #333 url("../img/commitment/commitment_page_head_sp2.jpg") no-repeat;
        background-size: cover;
    }
    
    .comm_text p{ font-size: 1.2em;}
    
    .comm_span01 img{ width: 110px;}
    .comm_span02 img{ width: 110px;}
    .comm_span03 img{ width: 110px;}
    .comm_span01,.comm_span02,.comm_span03{ top: 15px; left: 4px;}
}

@media only screen and (max-width:320px){
    
    .sp_menu h1{ width: 125px; margin-left: 15px;}
    .sp_menu h1 img{ padding-top: 14px;}
    .menu-content ul li a {
        font-size: 1.6em;
        padding: 5px 15px 10px 0;
    }
    
    .catch h1{ font-size: 1.5em;}
    
    .tit h1 { font-size: 1.6em;}
    
    .commit_box{ margin-top: 40px;}
    .commit_item img{ width: 200px;}
    .commit_tit h2 { font-size: 1.6em;}
    
    .top_works_box{ margin-top: 40px;}
    .top_water_text h2 { font-size: 1.3em;}
    .top_works_section dd,.top_works_section dt { font-size: 1.2em;}
    
    .top_btn { margin: 28px auto 0 auto;}
    .top_water_text h2 { font-size: 1.6em;}
    
    .contact_item01 p { font-size: 0.8em;}
    .contact_item02 h3 { font-size: 1.3em;}
    .contact_img { width: 140px;}
    
    .top_btn a{ font-size:1.2em;}
    .top_btn_contact a{ font-size: 1em;}
    
    
    footer .copyright{ font-size:0.7em;}
    
    .suisha_content01 .inner h2{ font-size: 1.6em;}
    .suisha_box { padding: 25px;}
    .suisha_btn_contact a{ font-size: 1em;}
    
    .comm_text .fs{ font-size: 0.4em;}
    
}

@media only screen and (max-width:280px){
    
    .catch h1{ font-size: 1.3em;}
    .commit_tit h2{ font-size: 1.3em;}
    
    .top_water_text{ padding: 23px;}
    .top_contact_box{ padding: 23px;}
    .top_contact .inner { padding: 60px 0;}
    
    footer .footer_item p { font-size: 0.9em;}
    footer .footer_img02 img { height: 85px; padding-top: 3px;}
    footer .copyright p{ font-size: 1.1em;}
    
    .page_tit { max-width: 190px;}
    .page_tit h1{ font-size: 1.3em;}
    .page_tit p{ font-size: 1em;}
    
    .suisha_content01 .inner h2 { font-size: 1.2em;}
    .suisha_box { padding: 20px;}
    .suisha_contact_box{ padding: 23px;}
    .suisha_contact .inner{ padding: 60px 0;}
    
    .comm_text h2{ font-size: 1.3em;}
    .comm_text p{ font-size: 1em;}
}