@charset "utf-8";

/*===============================================
●sp.css 画面の横幅が480px未満
===============================================*/
@media screen and (max-width: 479px){
    /* ページベース */
    html    {
        height:100%;
        font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    }
    body {
        max-width: 640px;
        height:100%;
        margin:0;
    }
    
    img{
        max-width: 100%;
        height: auto;
        width /***/:auto;　
    }
    h1  {
        background: #9C5418 url(../img/bg_menu_04.jpg) left top repeat-x;
        margin-top: 0.5em;
        padding: 0.5em 1em;
        font-size: 150%;
        color: #ffffff;
        letter-spacing: 0.1em;
        text-shadow: 2px 2px 2px #000000;
    }
    h1.message  {
        margin: 0 0 20px;
        padding: 10px 1em;
        font-size: 125%;
        border-top: 1px solid #cccccc;
        border-bottom: 1px solid #cccccc;
    }
    h2  {
        font-size: 125%;
        margin:0.5em 0;
        padding:5px 2% 0;
        border-bottom:2px solid #cccccc;
    }
    h3  {
        margin: 0;
        padding-left: 1.5em;
        position: relative;
    }
    h3:after   {
        display: block;
        content: "";
        position: absolute;
        top: 0.2em;
        left: 0em;
        width: 15px;
        height: 15px;
        background-color: #9C5418;
        border-radius: 100%;
    }
    p   {
        line-height: 1.8;
    }
    p.subtitle  {
        font-size:middle;
        font-weight:bold;
        margin:0;
    }
    p.caution   {
        margin-left:1em;
        text-indent:-1em;
    }
    hr   {
        height: 5px;
        margin: 0;
        border: 0;
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#421500+0,ff9933+50,421500+100 */
        background: #421500; /* Old browsers */
        background: -moz-linear-gradient(left, #421500 0%, #ff9933 50%, #421500 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(left, #421500 0%,#ff9933 50%,#421500 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right, #421500 0%,#ff9933 50%,#421500 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#421500', endColorstr='#421500',GradientType=0 ); /* IE6-9 */
        Color format:     Co
    }
    .left   {
        float: left;
    }
    .right  {
        float: right;
    }
    img.left, img.right {
        float: none;
    }
    .bold   {
        font-weight:bold;
    }
    .clear  {
        clear:both;
    }
    .nomargin   {
        margin:0;
    }
    .pc {
        display: none !important;
    }
    .indent:before  {
        content:"\A";
        white-space: pre;
    }
    /* レイアウト全般 */
    #container{
        width:100%;
        min-height:100%;
        position: relative;
    }
    /* ヘッダー */
    header    {
        width:100%;
        margin:0;
    }
    header a    {
        text-decoration: none;
        color: #000000;
    }
    #head_text  {
        display：block;
        position: relative;
        left: 0px;
        top: 0px;
        font-size: 84%;
        width: 50%;
        margin: 0;
    } 
    #head_name  {
        margin: 0;
        /*font-size: 200%;
        font-weight: bold;*/
        width: 80%;
        padding: 10px 10%;
        text-align:center;
    }
    #head_name img  {
        width: 90%;
    }
    #head_info  {
        height: auto;
        margin: 0;
        /*font-size: 84%;*/
        text-align: center;
        font-weight: bold;
    }
    #head_tel   {
        height:auto;
        margin: 0;
        font-size:100%;
        text-align:center;
     }
    #head_fax   {
        height:auto;
        margin: 0;
        font-size:100%;
        text-align:center;
     }
    #head_mail  {
        height:auto;
        margin: 0;
        font-size:100%;
        text-align:center;
    }
    /* メニュー*/
    #menu{
        display: none;
        position: fixed;
        right: 0px;
        top: 40px;
        z-index:10;
        margin: 0 0 0 -40px;
    }
    #menu li{
        width: 200px;
        list-style: none;
    }
    #menu li a{
        display: block;
        padding: 12px 0 10px;
        background: #e4c9ae;
        opacity: 0.95;
        color: #000;
        text-align: center;
        text-decoration: none;
    }
    #menu li a:hover{
        background: #9C5418;
        color: #fff;
    }
    #toggle{
        display: block;
        position: fixed;
        right: 0px;
        top: 0px;
        z-index: 11;
        width: 40px;
        height: 40px;
        background: #9C5418;
        opacity: 0.7;
    }
    #toggle a{
        display: block;
        position: relative;
        padding: 19px 0 19px;
        /*border: 1px solid #ccc;*/
        color: #000;
        text-align: center;
        text-decoration: none;
    }
    #toggle:before{
        display: block;
        content: "";
        position: absolute;
        top: 50%;
        left: 10px;
        width: 20px;
        height: 20px;
        margin-top: -10px;
        background: #333;
    }
    #toggle a:before, #toggle a:after{
        display: block;
        content: "";
        position: absolute;
        top: 50%;
        left: 10px;
        width: 20px;
        height: 4px;
        background: #9C5418;
    }
    #toggle a:before{
        margin-top: 3px;
    }
    #toggle a:after{
        margin-top: -5px;
    }
    main    {
        box-sizing: border-box;
        width: 100%;
        padding: 0 5%;
        font-size: 14px;
    }
    main #content    {
        width:96%;
        padding:10px 2%;
    }
    main #side   {
        width: 96%;
        padding: 10px 2%;
    }
    main img.contents_top   {
        display: none;
    }
/* 
    main #side .fb-page {
        width: 100%;
    }
    main #side .fb-page span  {
        width: 100% !important;
        height: 300px !important;
    }
*/
    main #side #contact_box {
        margin: 10px 2%;
        border: 5px solid #9C5418;
        background: #f1ece8 url(../img/bg_menu_03.jpg) left top;
        color: #ffffff;
    }
    main #side #contact_box p {
        text-align: center;
        margin: 5px 0;
        text-shadow: 2px 2px 2px #000000;
    }
    main #side #contact_box a {
        display: block;
        width: 90%;
        margin: 5px auto;
        border: 2px inset #9C5418;
        padding: 0.3em 0;
        text-align: center;
        font-size: 125%;
        background: #ffffff;
        color: #000000;
        font-weight: bold;
        text-decoration: none;
    }
    main #side #contact_box a:hover {

        border: 2px outset #9C5418;
        padding: 0.3em 0;
        text-align: center;
        background: #e4c9ae;
    }

    address {
        padding: 15px;
        font-style:normal;
    }
    address span.small  {
        font-size:84%;
    }
    address span.big    {
        font-size: 184%;
        font-weight: bold;
    }
    /* フッター */
    footer  {
        width:100%;
    }
    footer ul {
        width:100%;
        margin:10px auto;
        padding:0;
    }
    footer li   {
        display: inline-block;
        min-width:6.5em;
        margin: 5px 10px;
        text-indent:1.5em;
        background: url('../img/icon_triangle.png') left no-repeat;
    }
    footer li a {
        color:#000000;
        text-decoration:none;
    }
    footer ul#footlinks {
        width:90%;
        padding-left:5%;
    }
    footer div#color_frame  {
        width:100%;
        height:100%;
        border-top:5px solid #9e1442;
        background:#f8eae7;
    }
    footer div#color_frame div {
        width:70%;
        margin:10px auto 0;
        text-align:center;
    }
    footer div#color_frame img  {
        width:60%;
        max-width:131px;
        margin:0;
    }
    footer div#color_frame ul   {
        padding:0;
    }
    footer div#color_frame li   {
        display: inline-block;
        min-width:0;
        margin:0 0.5em 0 0;
        background: none;
        text-indent: 0;
    }
    footer div#color_frame li.space   {
        
    }

    footer p#copyright    {
        /*clear:both;*/
        margin:0 auto;
        padding:5px 0;
        font-size: 84%;
        text-align: center;
    }
    /* トップページ */
    div.topslide img    {
        max-width: 100%;
    }
    .part   {
        position: relative;
    }
    .part h1 {
        background: #9C5418 url(../img/bg_menu_04.jpg) left top repeat-x;
        padding: 0.5em;
        font-size: 136%;
        color: #ffffff;
        text-shadow: 2px 2px 2px #000000;
    }
    .part h2 {
        padding: 0.5em 1em 0;
        font-size: 124%;
        border-bottom: 2px solid #999999;
    }
    .part h2:after {
        background: none;
    }
    .part p  {
        padding: 0.5em 1em;
    }
    .part p span    {
        color: #000099;
        font-weight: bold;
    }
    .part img  {
        position: relative;
        float: right;
        width: 35%;
        padding: 2% 3%;
        z-index: 5;

    }
    hr.dash {
        border-bottom: 3px dashed #999999;
        background: none;
    }
    .banner  {
        display: block;
        position: relative;
        width: 86%;
        min-height: 40px;
        margin: 10px 5%;
        padding: 17% 2%;
        border: 2px solid #9C5418;
        border-radius: 10px;
        /*font-size: 150%;*/
        font-weight: bold;
        box-shadow: 5px 5px 5px #000000;
    }
    .bannerw {
        display: block;
        position: relative;
        width: 86%;
        margin: 10px 5%;
        padding: 25% 2%;
        border: 2px solid #9C5418;
        border-radius: 10px;
        font-size: 100%;
        font-weight: bold;
        box-shadow: 5px 5px 5px #000000;
    }
    a.banner:hover, a.bannerw:hover {
        opacity: 0.7;
        box-shadow: 2px 2px 2px #000000;
    }
    .bg_a   {
        color: #000000;
        background: url(../img/index/banner_bg_a_2.jpg) left top no-repeat;
        background-size: cover;
    }
    .bg_a p  {
        position: absolute;
        right: 2em;
        top: 2.5em;
        width: 85%;
        color: #ffffff;
        font-size: 84%;
        text-align: right;
        text-shadow: 0px 0px 5px #000000;
    }  
    .bg_a .big  {
        position: absolute;
        right: 1em;
        top: 0em;
        margin: 0.5em 0 0 0;
        text-align: right;
        font-size: 150%;
        border-bottom: none;
        text-shadow: 2px 2px 2px #999999;
        color: #000000;
    }
    .bg_b   {
        background: url(../img/index/banner_bg_b_2.jpg) left top no-repeat;
        background-size: cover;
        margin-bottom:2em;
    }
    .bg_b p  {
        position: absolute;
        left: 2em;
        top: 30%;
        width: 80%;
        color: #ffffff;
        font-size: 84%;
        text-align: left;
        text-shadow: 2px 2px 2px #000000;
    }
    .bg_b .big  {
        position: absolute;
        left: 1em;
        top: 0%;
        color: #ffffff;
        font-size: 150%;
        border-bottom: none;
        text-shadow: 2px 2px 2px #000000;
    }
    .bg_c   {
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 84%;
        font-weight: normal;
        text-shadow: none;
    }
    .bg_c h3    {
        width: 100%;
        text-align: center;
        margin: 0;
        padding: 0;
    }
    .bg_c p  {
        margin: 0;
        color: #000000;
        line-height: 150%;
    }
    .bg_c p span  {
        color: #ff0000;
        font-weight: bold;
    }
    div.lined-paper {
        width: 80%;
        margin: 5px auto;
        background-color: #ffffe7;
        font-weight: bold;
        border: 1px solid #000;
        padding: 0.5em;
        box-shadow: 5px 5px 2px #000;
    }
    div.lined-paper ul {
        list-style: none;
        margin: 0;
        padding: 0 0 0.1em;
        background-color: #ffffe7;
        background-image:
        linear-gradient(rgba(241,207,164,0.5) .1em, transparent .1em);
        background-size: 100% 1.5em;
    }
    div.lined-paper ul li   {
        margin: 0;
        padding: 0;
        text-align: center;
    }
    div.lined-paper ul li:after   {
        content: "\a↓";
        white-space: pre;
    }
    div.lined-paper ul li:nth-last-of-type(1):after   {
        content: none;
    } 
    .bg_d   {
        padding-top: 10px;
        padding-bottom: 10px;
        background: #f1ece8;
        font-size: 84%;
        font-weight: normal;
        text-shadow: none;
    }
    .bg_d h3    {
        width: 100%;
        text-align: center;
        margin: 0;
        padding: 0;
        color: #9C5418;
        font-size: 124%;
    }
    .bg_d p  {
        
    }
    .bg_d p span  {
        font-size: 75%;
        font-weight: normal;
    }    
    .staff {
        display: block;
        position: relative;
        width: 90%;
        height: 360px;
        margin: 10px auto;
    }
    .staff .box {
        position: relative;
        background: url(../img/index/comment_back_02.png) center top no-repeat;
        background-size: 100% auto;
        width: 14em;
        padding: 1.5em 4em 12em 2em;
        /*
        border: 2px solid #9C5418;
        border-radius: 10px;
        font-size: 86%;
        */
        z-index: 2;
    }
    .staff .box span {
        color: #000099;
        font-weight: bold;
    }    
/*
    .staff .box:before {
        content: '';
        position: absolute;
        height: 20px;
        width: 20px;
        border: 2px solid #9C5418;
        border-radius: 11px;
        bottom: -30px;
        left: 40px;
    }
 
    .staff .box:after {
        content: '';
        position: absolute;
        height: 9px;
        width: 9px;
        border: 2px solid #9C5418;
        border-radius: 6px;
        bottom: -40px;
        left: 60px;
    }
*/ 
    .staff img{
        position: absolute;
        bottom: 0;
        right: 0;
        margin-left: 18%;
        margin-top: -100px;
        width: 90%;
        z-index: 3;
    }
    #index_links    {
        list-style: none;
        margin: 0;
        padding: 0 1em;
    }
    #index_links li {
        display: inline-block;
        margin: 5px;
        padding: 0;
    }
    #index_links li:before    {
        content: "■";
        margin: 0 0.5em;
        color: #000099;
        font-weight: bold;
    }
    #index_links a  {
        color: #000;
        text-decoration: none;
    }
    #index_links a:hover  {
        color: #999;
    }    
    /* 施工内容 */
    dl.service_list {
        
    }
    dl.service_list dt  {
        font-weight: bold;
        margin: 0;
    }
    dl.service_list dd  {
        font-size: 84%;
        margin: 0;
        padding: 0 0 1em;
    }
    dl.service_list ul {
        list-style: none;
        padding: 0;
    }
    dl.service_list li  {
        display: inline-block;
        position: relative;
        margin-left: 1em;
        padding-left: 2em;
    }
    dl.service_list li:after    {
        display: block;
        content: "";
        position: absolute;
        top: 0.3em;
        left: 0em;
        width: 10px;
        height: 10px;
        border-right: 1px solid #999999;
        border-bottom: 1px solid #999999;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    dl.service_list li:first-child:after    {
        display: block;
        content: "";
        border: none;
    }
    dl.service_list p   {
        margin:0 1.5em;
    }
    ul.service_photo  {
        list-style: none;
        margin: 50px 0 0;
        padding: 0;
        font-size: 84%;
    }
    ul.service_photo li {
       display: inline-block;
        width: 40%;
        padding: 5px 4.5%;
        text-align: center;
        vertical-align: top;
    }
    ul.
    /* 施工事例 */
    img.lbthumb {
        width: 90%;
        margin: 5px 5%;
    }
    ul#worksmenu    {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    ul#worksmenu li   {
        background: url(../img/bg_menu_03.jpg) left top;
        width: 90%;
        margin: 5px auto;
        padding: 0;
    }
    ul#worksmenu a  {
        display: block;
        padding: 0.5em 0;
        border: 1px solid #9c5418;
        color: #ffffff;
        text-shadow: 2px 2px 2px #000000;
        text-decoration: none;
        font-weight: bold;
        text-align: center;
    }
    ul#worksmenu a:hover{
        background: rgba(211,96,21,0.3);
        color: #ffffff;
    }
    ul.workslist    {
        list-style: none;
        margin: 5px 1em;
        padding: 0;
    }
    ul.workslist li {
        margin: 5px 0;
        padding: 5px;
        border-left: 10px solid #9c5418;
    }
    ul.workslist a    {
        color: #000000;
        text-decoration: none;
    }
    p.return    {
        text-align: right;
    }
    p.return a  {
        color: #000000;
        text-decoration: none;
    }
    /* 大森建装とは */
    img.greet_img   {
        width: 80%;
        margin: 0 10%;
    }
    p.signature {
        text-align: right;
        padding-right: 0em;
    }
    p.signature span {
        margin-right: 4em;
    }
    p.signature span:after {
        content: "     \a";
        white-space: pre;
    }
    iframe#access_map   {
        width: 100%;
        height: 300px;
        border: 0;
    }
    dl#company_info {
        width: 90%;
        margin: 10px 5%;
    }
    dl#company_info dt {
        border-bottom: 1px dotted #999999;
        font-weight: bold;
    }
    dl#company_info dd {
        margin: 0;
        padding: 0 1em 1em;
    }
    dl#company_info dd span    {
        display: inline-block;
        width: 6em;
    }
    ul.company_list  {
        list-style: none;
        width: 90%;
        margin: auto;
        padding: 0;
        font-size: 92%;
    }
    ul.company_list li  {
        margin-left: 1em;
        margin-bottom: 1em;
    }
    /* 採用情報 */
    p.recruit   {
        font-size: 124%;
        padding: 1em;
    }
    dl#recruitlist  {
        width: 90%;
        margin: 10px 5%;
    }
    dl#recruitlist dt  {
        border-bottom: 1px dotted #999999;
        font-weight: bold;
    }
    dl#recruitlist dd  {
        margin-left: 1em;
        margin-bottom: 1em;
    }
    /* お問い合わせ */
    form dl {
        width: 96%;
        margin: 10px auto;
        font-size: 92%;
    }
    form dt {
        background: #dddddd;
        padding: 0.5em 0.5em 0.5em 1em;
    }
    form dd {
        margin: 0;
        padding: 1em;
    }
    form span   {
        color: #ff0000;
    }

}

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

    /* ウェブサイト翻訳ウィジェット（G Translate） */
    .gt_switcher_wrapper {
        right: 11% !important;
    }

    /* Instagram Timeline（サイドコンテンツ） */
    .insta_list li{
        width: calc((100% - 25px)/2);
    }
}