@charset "UTF-8";

/* id(#) は一意, class(.) は複数の要素で使用可, サンプルのコピペも class(.) をそのまま使用 */



@media screen and (min-width: 481px) {

    /* Index, etc. */
    div#pagebase {
       margin-left : auto;    /* 左側マージンを自動的に空ける */
       margin-right : auto;   /* 右側マージンを自動的に空ける */
       text-align : left;     /* 中身を左側表示に戻す */
       width : 800px;         /* 幅を決定する */
       -webkit-box-shadow: 0 0 30px #000; box-shadow: 0 0 30px #000;
    }
    table#basetable {
        border: 0px;
        border-collapse: collapse;
        border-spacing: 0px;
        padding: 0px;
        height: 500px;
        width: 800px;
    }
    tr#basemenutr {
        text-align: left;
        vertical-align: top;
    }
    tr#basemenutr__ {
        display: none;
    }
    tr#basemaintr {
        text-align: left;
        vertical-align: top;
    }
    tr#baseuppertr__ {
        display: none;
    }
    tr#baselowertr__ {
        display: none;
    }
    td#basefoottd {
        vertical-align: top;
        background-color : #3070cc;
        color : #ffffff;
        margin : 0px;
        padding : 5px;
    }
    td#basefoottd__ {
        display: none;
    }


    /* Head */
    img.headsp {
        display: none;
    }
    div#headtitile {
        position: absolute; top: 45px; left: 50px; width: 700px; font-weight: bold; font-size: 32pt; color: royalblue; text-shadow:2px 2px 2px #000000; font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
    }
    div#headsub {
        position: absolute; top: 100px; left: 80px; width: 350px; font-size: 16pt; color: lightpink; text-shadow:1px 1px 1px #000000; font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
    }
    div#headaddr {
        position: absolute; top: 110px; left: 520px; width: 330px; font-size: 16pt; color: #ffffff; text-shadow:1px 1px 1px #000000; font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
    }


    /* Head2 */
    img.head2sp {
        display: none; 
    }
    div#head2titile {
        position: absolute; top: 25px; left: 50px; width: 700px; font-weight: bold; font-size: 32pt; color: royalblue; text-shadow:2px 2px 2px #000000; font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
    }
    div#head2sub {
        position: absolute; top: 60px; left: 450px; width: 350px; font-size: 16pt; color: lightpink; text-shadow:1px 1px 1px #000000; font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
    }


    /* Main */
    table#maintable {
        border-collapse: separate;
        border-spacing: 15px;
        border: 0px;
        height: 100px;
        width: 600px;
    }
    td#maintd {
        padding: 15px;
        text-align: left;
        vertical-align: top;
        height: 100px;
        width: 600px;
    }


    /* Foot */
    table.foottable {
        border: 0px;
        border-collapse: collapse;
        border-spacing: 0px;
        padding: 0px;
    }
    td.foottd {
        text-align: center;
        vertical-align: middle;
        background-color : #3070cc;
        color : #ffffff;
        margin : 0px;
        padding: 5px;
    }


    /* Product */
    table#producttable {
        border-collapse: separate;
        border-spacing: 15px;
        border: 0px;
        height: 300px;
        width: 600px;
    }
    td#producttd {
        padding: 15px;
        text-align: left;
        vertical-align: top;
        height: 300px;
        width: 600px;
    }
    div.productdiv {
        margin: 20px;
    }


    /* Company */
    table#companytable {
        border-collapse: separate;
        border-spacing: 15px;
        border: 0px;
        height: 100px;
        width: 600px;
    }
    td#companytd {
        padding: 15px;
        text-align: left;
        vertical-align: top;
        height: 100px;
        width: 600px;
    }
    div.companydiv {
        text-align: center;
    }

    #map {
      position: relative;
      width: 100%;
      padding-top: 300px;
      overflow: hidden;
    }
    #map iframe {
      position: absolute;
      top: -150px;
      left: 0;
      width: 100%;
      height: calc(100% + 150px + 150px);
      pointer-events: none;
    }


    /* Saiyo */
    table#saiyotable {
        border-collapse: separate;
        border-spacing: 15px;
        border: 0px;
        height: 100px;
        width: 600px;
    }
    td#saiyotd {
        padding: 15px;
        text-align: left;
        vertical-align: top;
        height: 100px;
        width: 600px;
    }


    /* Contact */
    table#contacttable {
        border-collapse: separate;
        border-spacing: 15px;
        border: 0px;
        height: 100px;
        width: 600px;
    }
    td#contacttd {
        padding: 15px;
        text-align: left;
        vertical-align: top;
        height: 100px;
        width: 600px;
    }


    /* Consend */
    table#consendtable {
        border-collapse: separate;
        border-spacing: 15px;
        border: 0px;
        height: 100px;
        width: 600px;
    }
    td#consendtd {
        padding: 15px;
        text-align: left;
        vertical-align: top;
        height: 100px;
        width: 600px;
    }


    /* Schedule */
    table#scheduletable {
        border-collapse: separate;
        border-spacing: 15px;
        border: 0px;
        height: 100px;
        width: 600px;
    }
    td#scheduletd {
        padding: 15px;
        text-align: left;
        vertical-align: top;
        height: 100px;
        width: 600px;
    }
    div.schedulediv {
        text-align: center;
    }


}



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

    /* Index */
    div#pagebase {
       margin-left : auto;    /* 左側マージンを自動的に空ける */
       margin-right : auto;   /* 右側マージンを自動的に空ける */
       text-align : left;     /* 中身を左側表示に戻す */
       width : 480px;         /* 幅を決定する */
       -webkit-box-shadow: 0 0 30px #000; box-shadow: 0 0 30px #000;
    }
    table#basetable {
        border: 0px;
        border-collapse: collapse;
        border-spacing: 0px;
        padding: 0px;
        height: 500px;
        width: 480px;
    }
    tr#basemenutr {
        display: none;
    }
    tr#basemenutr__ {
        text-align: left;
        vertical-align: top;
    }
    tr#basemaintr {
        display: none;
    }
    tr#baseuppertr__ {
        text-align: left;
        vertical-align: top;
    }
    tr#baselowertr__ {
        text-align: left;
        vertical-align: top;
    }
    td#basefoottd {
        display: none;
    }
    td#basefoottd__ {
        text-align: left;
        vertical-align: top;
        background-color : #3070cc;
        color : #ffffff;
        margin : 0px;
        padding : 0px;
    }


    /* Head */
    img.headpc {
        display: none; 
    }
    div#headtitile {
        position: absolute; top: 45px; left: 0px; width: 460px; font-weight: bold; font-size: 32pt; color: royalblue; text-shadow:2px 2px 2px #000000; font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
    }
    div#headsub {
        position: absolute; top: 100px; left: 0px; width: 350px; font-size: 11pt; color: lightpink; text-shadow:1px 1px 1px #000000; font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
    }
    div#headaddr {
        position: absolute; top: 130px; left: 0px; width: 330px; font-size: 11pt; color: #ffffff; text-shadow:1px 1px 1px #000000; font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
    }


    /* Head2 */
    img.head2pc {
        display: none; 
    }
    div#head2titile {
        position: absolute; top: 25px; left: 0px; width: 700px; font-weight: bold; font-size: 32pt; color: royalblue; text-shadow:2px 2px 2px #000000; font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
    }
    div#head2sub {
        position: absolute; top: 80px; left: 0px; width: 350px; font-size: 11pt; color: lightpink; text-shadow:1px 1px 1px #000000; font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
    }


    /* Main */
    table#maintable {
        border-collapse: separate;
        border-spacing: 0px;
        border: 0px;
        height: 100px;
        width: 380px;
    }
    td#maintd {
        padding: 0px;
        text-align: left;
        vertical-align: top;
        height: 100px;
        width: 380px;
    }


    /* Foot */
    table.foottable {
        border: 0px;
        border-collapse: collapse;
        border-spacing: 0px;
        padding: 0px;
    }
    td.foottd {
        text-align: left;
        vertical-align: middle;
        background-color : #3070cc;
        color : #ffffff;
        margin : 0px;
        padding: 0px;
    }


    /* Product */
    table#producttable {
        border-collapse: separate;
        border-spacing: 0px;
        border: 0px;
        height: 300px;
        width: 380px;
    }
    td#producttd {
        padding: 0px;
        text-align: left;
        vertical-align: top;
        height: 300px;
        width: 380px;
    }
    div.productdiv {
        margin: 0px;
    }


    /* Company */
    table#companytable {
        border-collapse: separate;
        border-spacing: 0px;
        border: 0px;
        height: 100px;
        width: 380px;
    }
    td#companytd {
        padding: 0px;
        text-align: left;
        vertical-align: top;
        height: 100px;
        width: 380px;
    }
    div.companydiv {
        text-align: left;
    }

    #map {
      position: relative;
      width: 100%;
      padding-top: 300px;
      overflow: hidden;
    }
    #map iframe {
      position: absolute;
      top: -150px;
      left: 0;
      width: 100%;
      height: calc(100% + 150px + 150px);
      pointer-events: none;
    }


    /* Saiyo */
    table#saiyotable {
        border-collapse: separate;
        border-spacing: 0px;
        border: 0px;
        height: 100px;
        width: 380px;
    }
    td#saiyotd {
        padding: 0px;
        text-align: left;
        vertical-align: top;
        height: 100px;
        width: 380px;
    }


    /* Contact */
    table#contacttable {
        border-collapse: separate;
        border-spacing: 0px;
        border: 0px;
        height: 100px;
        width: 380px;
    }
    td#contacttd {
        padding: 0px;
        text-align: left;
        vertical-align: top;
        height: 100px;
        width: 380px;
    }


    /* Consend */
    table#consendtable {
        border-collapse: separate;
        border-spacing: 0px;
        border: 0px;
        height: 100px;
        width: 380px;
    }
    td#consendtd {
        padding: 0px;
        text-align: left;
        vertical-align: top;
        height: 100px;
        width: 380px;
    }


    /* Schedule */
    table#scheduletable {
        border-collapse: separate;
        border-spacing: 0px;
        border: 0px;
        height: 100px;
        width: 380px;
    }
    td#scheduletd {
        padding: 0px;
        text-align: left;
        vertical-align: top;
        height: 100px;
        width: 380px;
    }
    div.schedulediv {
        text-align: left;
    }


}