@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed);
html {
  font-size: 62.5%; 
}

body {
     margin: 0;
     padding: 0;
     background: #f8f8f8;
     font-family: "Roboto Condensed", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo" sans-serif;
     font-size: 1.8rem;
     font-weight: normal;
     color: #444;
     word-wrap: break-word;
     overflow-x: visible;
     -webkit-text-size-adjust: none;
}

header {
     margin : 0 auto;
     padding: 15px;
     width: 90%;
     height: 40px;
     background-color:#FFFFFF;
     border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px;
}

a {
     color: #953735;
     text-decoration: none;
     cursor: pointer;
     -moz-transition: all, 0.25s, linear;
     -o-transition: all, 0.25s, linear;
     -webkit-transition: all, 0.25s, linear;
     transition: all, 0.25s, linear; 
}

a:hover {
     color: #953735;
     text-decoration: none; 
}


ul {
     margin: 0;
     padding: 0;
     list-style-type: none; 
}

.contents {
     margin: 0 auto;
     padding: 20px 0;
     min-width: 320px;
     max-width: 920px; 
}

#submenu {
     border-top: 1px solid #953735;
     margin-left: 0px;
     padding-top: 35px;
     padding-left: 0px;
     width: 100%;
     height: 50px;
     background: white;
     color: #953735;
}

#submenucontact {
     border-top: 1px solid #953735;
     border-bottom: 1px solid #953735;
     margin: 0px;
     padding-top: 30px;
     padding-left: 0px;
     width: 100%;
     height: 50px;
     background: white;
     color: #953735;
}

#submenuparent {
     margin: 0px;
     padding-left: 0px;
     width: 100%;
     height: 50px;
     background: white;
}

#submenuchildkigyoujyouhou, #submenuchildjigyounaiyou {
     border-top: 1px solid #953735;
     margin: 0px;
     padding-top: 35px;
     padding-left: 0px;
     width: 100%;
     height: 50px;
     background: white;
     color: #953735;
}

#kigyoujyouhou {
     border-top: 1px solid #953735;
}

.text {
     margin: 0; 
}

.sub {
     font-size: 1.15rem; 
}

.demo {
     margin: 0 16px 200px; 
}

.switch .menu:after {
     position: absolute;
     top: 50%;
     right: 10px;
     margin-top: -1.4rem;
     content: '>';
     font-size: 1.4rem;
     font-weight: bold;
     -moz-transform: rotate(90deg);
     -ms-transform: rotate(90deg);
     -webkit-transform: rotate(90deg);
     transform: rotate(90deg);
     -moz-transition: all, 0.25s, linear;
     -o-transition: all, 0.25s, linear;
     -webkit-transition: all, 0.25s, linear;
     transition: all, 0.25s, linear; 
}

.switch .menu.active:after {
     -moz-transform: translate(0, 50%);
     -ms-transform: translate(0, 50%);
     -webkit-transform: translate(0, 50%);
     transform: translate(0, 50%);
     -moz-transform: rotate(-90deg);
     -ms-transform: rotate(-90deg);
     -webkit-transform: rotate(-90deg);
     transform: rotate(-90deg); 
}

.child {
     text-align :left;
     padding-left: 0px;
     width: 100%;
     height: 100%;
     display: none;
     top: 0;
     left: 0px;
     position: relative;
}


.menu {
     visibility: hidden;
}


#logo {
     width: 100px;
     margin-top: 0px;
     margin-left: 10px;
     padding: 0;
}


#logofont {
     font-size: 6px;
     float: right;
     margin-top: 35px;
     margin-left: 10px;
}


section {
     margin-top: 30px;
     margin-bottom: 30px;
     padding: 15px;
     width: 90%;
     background-color: #FFFFFF;
     border-radius: 20px 20px 20px 20px;
}

#diagram {
     width: 90%;
}

#ssumaimoneyplanner {
     width:100px;
}

#tssumaimoneyplanner {
     margin-left:20px;
     font-size: 10px;
}

#smenu {
     margin-top: 10px;
}

#hssumaimoneyplanner {
     font-size: 12px;
     color: red;
     font-weight: 900;
}

footer {
     color: white;
     margin-top: 10px;
     padding: 15px;
     width: 90%;
     height: 60px;
     background-color: #FFFFFF;
     border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px;
     font-size: 10px;
     vertical-align: middle;
     background: url('../images/footerbackground.png');
}

#footerbutton {
     text-decoration: underline;
     color: #953735;
     padding: 5px;
     font-weight: 900;
}

#lbutton {
     width: 100px;
     margin-top: 5px;
     padding: 0;
}

#bar1 {
     width: 95%;
     margin-top: 0;
}

#bar2 {
    width: 95%;
    margin-top: 0px;
}

#table1 {
     width: 90%;
     font-size: 12px;
}

#bar3 {
     width: 95%;
     margin-top: 0px;
}

#table2 {
     width: 86%;
     font-size: 10px;
     margin-left: 10px;
}

#tablefont1 {
     font-size: 12px;
     font-family: 'Meiryo';
     vertical-align: middle;
     padding-left: 3px;
     height: 18px;
}

#tablefont2 {
     font-size: 10px;
     font-family: 'Meiryo';
}

#tablefont3 {
     font-size: 8px;
     font-family: 'Meiryo';
}

#tablewidth1 {
     width: 6px;
     font-size: 12px;
     font-family: 'Meiryo';
     vertical-align: middle;
     background: url('../images/titlesp.jpg');
}


@media only screen and (min-width: 800px){
     header {
          margin : 0 auto;
          padding: 15px;
          width: 1000px;
          height: 160px;
          background-color:#FFFFFF;
          border-radius: 0 0 20px 20px;
     }

     .menu {
          visibility: visible;
     }

    
     .menu ul#main {
          padding: 0;
          margin-top:120px;
          margin-left: 0;
          width: 960px;
          height: 40px;
          border: solid;
          border-color: #953735;
          border-width: 2.0px; 
          border-radius: 10px 10px 10px 10px;
          background-image: url('../images/nav.png')
     }

     .menu ul li {
          text-align: center;
          margin: 0px;
          list-style-type: none;
          width: 160px;
          height: 40px;
          float: left;
          vertical-align: middle;
     }

     .menu ul#main li#topbutton a:hover {
          border-radius: 8px 0px 0px 8px;
     }

     .menu ul#main li#contactbutton a:hover {
          border-radius: 0px 8px 8px 0px;
     }

     .menu ul li a {
          vertical-align: middle;
          padding: 0;
          margin: 0;
          width: 160px;
          height: 40px;
          text-decoration: none;
          color: #FFFFFF;
          font-weight: 900px;
          font-size: 24px;
          display: table-cell;
     }

     .menu ul li a#builder{
          background-image: url('../images/jigyoushasamabutton.png');
     }

     .menu ul li a#builder:hover{
          background-image: url('../images/jigyoushasamabuttonactive.png');
     }

     .menu ul li#customer a{
          background-image: url('../images/kojinnookyakusamabutton.png');
     }

     .menu ul li#customer a:hover{
          background-image: url('../images/kojinnookyakusamabuttonactive.png');
     }

     .menu ul li a:hover {
          padding: 0px;
          width: 160px;
          height: 40px;
          background-color: #FFFFFF;
          color: #953735;
     }

     .menu ul li:hover ul#sub li{
          visibility: visible;
     }

     .menu ul li ul {
          position: relative;
          left: 0px;
          top: 0px;
     }

     .menu ul#sub li{
          visibility: hidden;
          margin-left: 1px;
          width:380px;
          height: 40px;
          border: solid;
          border-color: #953735;
          border-width: 1.0px;
          background-color: #953735;
     }

     .menu ul#sub li a{
          margin-left: 1px;
          width: 380px;
          height: 40px;
          border: solid;
          border-color: #953735;
          border-width: 1.0px;
          background-color: #953735;
     }

     .menu ul#sub li a:hover {
          pading: 0;
          width: 380px;
          height: 40px;
          background: #FFFFFF;
          color: #953735;
          border-bottom: solid;
          border-bottom-color: #953735;
          border-bottom-width: 2.0px;
     }

     #logo {
          float: left;
          width: 200px;
          margin-top: 5px;
          margin-left: 15px;
          padding: 0;
     }

     #logofont {
          font-size: 15px;
          margin-top: 70px;
          width: 450px;
     }

     #diagram {
          width: 1000px;
          margin-top: -15px;
     }

     section {
          margin-top: -30px;
          margin-bottom: 30px;
          padding: 15px;
          width: 1000px;
          background-color: #FFFFFF;
          border-radius: 20px 20px 20px 20px;
     }

     #smenu {
          visibility: hidden;
     }

     #bar1, #bar2, #bar3 {
          width: 960px;
          margin-top: 15px;
     }

     #table1 {
          width: 900px;
          font-size: 20px;
     }

     #table2 {
          width: 850px;
          font-size: 20px;
          font-family:  "Roboto Condensed", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo" sans-serif;
          margin-left: 26px;
     }

     #table3 {
          width: 900px;
          font-size: 24px;
          font-family:  "Roboto Condensed", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo" sans-serif;
          margin-top: 25px;
     }

     #table4 {
          width: 850px;
          font-size: 16px;
          font-family: "Roboto Condensed", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo" sans-serif;
          margin-left: 26px;
     }

     #tablefont1 {
          font-size:24px;
          padding-left: 5px;
          height: 30px;
     }

     #lbutton {
          width: 150px;
          margin-top: 30px;
          margin-right: 5px;
          padding: 0;
     }

     #tablewidth1 {
          width: 15px;
          height: 28px;
          padding-top: 5px;
          padding-bottom: 5px;
          background: url('../images/title.jpg');
     }

     footer {
          padding: 15px;
          width: 1000px;
          height: 50px;
          background-color: #FFFFFF;
          border-radius: 20px 20px 20px 20px;
          font-size: 10px;
          vertical-align: middle;
          display: table-cell;
          background: url('../images/footerbackground.png');
     }

     #footerbutton {
          text-decoration: underline;
          color: #953735;
          padding: 5px;
          font-weight: 900;
     }
}