@charset "UTF-8";

/*@import url("");*/
@import "reset.css";
@import "fonts.css";
@import url(//fonts.googleapis.com/css?family=Maven+Pro:400,500,700);
/* bases-----------------------*/

// Base Grad @
@baseA: #b4ac88;
@baseB: #977239;
@baseC: #fff;
@Link: #977239;
@mainColor: #015087;
@vRadius:    6px;
@mainWidth: 970px;

// Single Corner Border Radius
.border-top-left-radius(@vRadius) {
  -webkit-border-top-left-radius: @vRadius;
      -moz-border-radius-topleft: @vRadius;
          border-top-left-radius: @vRadius;
}
.border-top-right-radius(@vRadius) {
  -webkit-border-top-right-radius: @vRadius;
      -moz-border-radius-topright: @vRadius;
          border-top-right-radius: @vRadius;
}
.border-bottom-right-radius(@vRadius) {
  -webkit-border-bottom-right-radius: @vRadius;
      -moz-border-radius-bottomright: @vRadius;
          border-bottom-right-radius: @vRadius;
}
.border-bottom-left-radius(@vRadius) {
  -webkit-border-bottom-left-radius: @vRadius;
      -moz-border-radius-bottomleft: @vRadius;
          border-bottom-left-radius: @vRadius;
}
//Liner
.gradLiner(@topcol:#000000, @bottomcol:#ffffff) {
  background: @topcol;
  background: -moz-linear-gradient(top, @topcol 0%, @bottomcol 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@topcol), color-stop(100%,@bottomcol));
  background: -webkit-linear-gradient(top, @topcol 0%,@bottomcol 100%);
  background: -o-linear-gradient(top, @topcol 0%,@bottomcol 100%);
  background: -ms-linear-gradient(top, @topcol 0%,@bottomcol 100%);
  background: linear-gradient(to bottom, @topcol 0%,@bottomcol 100%);
// IE
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@topcol),argb(@bottomcol))); // IE9 and down
}
/* ------------------------------------------------------------
  box-sizing
------------------------------------------------------------ */
.borderbox{
  -webkit-box-sizing: border-box; /* Safari,Google Chrome用 */
  -moz-box-sizing: border-box; /* Firefox用 */
  -ms-box-sizing: border-box; /* Internet Explorer 8用 */
  box-sizing: border-box; /* Opera用 */
}

* {
  .borderbox;
}
* { // コピペ スマホで消す
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

}

canvas {
  -webkit-backface-visibility: hidden;
}
svg {
  -webkit-backface-visibility: hidden;
}


html {
  min-height: 100%;
  background:url(../img/background5.jpg) no-repeat center;
  background-size:cover;
}
body {
  width: 100%;
  height: 100%;
  text-align: left;
  font-family: 'Maven Pro', sans-serif;
  padding-top: 1em;
}
#wrapper0 {
  width: @mainWidth;
  margin: 0em auto;

  position: relative;
  z-index: 0;

  //border-right: 1px solid @baseA;
  //border-bottom: 1px solid @baseC;
  //border-left: 1px solid @baseC;
}

#wrapper1 {
  width: @mainWidth;
  margin: 0em auto 0px auto;

  position: relative;
  z-index: 1;

  //border-right: 1px solid @baseC;
  //border-bottom: 1px solid @baseA;
  //border-left: 1px solid @baseA;

  font-size: 15px;
  //text-shadow: 1px 1px 1px #fff;
  color: @mainColor;
}
#svg1 {
  position: relative;
  text {
    fill : @mainColor;
  }
  color: @baseB;
}
#svg2 {
  position: relative;
  text {
    fill : @mainColor;
  }
  color: @baseB;
}
#svg3 {
  position: relative;
  text {
    fill : @mainColor;
  }
  color: @baseB;
}

/* --sw ----- D3 -------------------------------------- */
body.index-0 {
  #svg2 {
    height: 640px;
  }

  // sw treemap ------------------
  .chart {     // wrapper
    position: absolute;
    top: 0px; left:0;
    display: block;
    font-size: 11px;
    background-color: @baseA;
    //padding: 1px;
    //overflow: hidden;
  }
  .chart .swFobjDiv {
    word-wrap: break-word;
    padding: 0.2rem;
  }
  .chart a.swFobjA {
    display: none;
  }

  .chart.active  a.swFobjA {
    display: inline;
    font-size: 0.9rem;
    text-decoration: none;
  }
  .chart .parents {
    position: absolute;
    //float: left;
    //display: inline-block;
    font-size: 1.1rem;
    //z-index: 111;
  }
  .chart .parents.classed {
    display: none;
  }
  .chart.active .parents {
    display: none;
  }


  .chart .parentsRoot {
      text {
        fill : #999999 !important;
        fill-opacity: 0.8;
        font-size: 1.9rem;
      }

      &.classed {
          display: none;
        }
  } // parentsRoot

  .chart.active .parentsRoot {
    display: none;
  }

  g.cell {
    rect {
      stroke: #bab5a7;
      stroke-width: 1.0px;
      stroke-dasharray: 3, 3;
    }
  }


} // index-0

body.index-4 {
  #wrapper0, #wrapper1 {
    width: 100%;
    padding: 5px 15px;
  }
  // do it
  .chartGroup .background {
    fill: rgba(255, 255, 255, 0);
    stroke-width: 0.3;
  }

  .node {
  }

  .node rect {
    cursor: pointer;
    fill: #FFFFFF;
    fill-opacity: 0.55;
    stroke: #8f7e58;
    //stroke-width: 1px;
  }

  .node text {
    font-size: 0.8rem;
    pointer-events: none;
  }
  .swFobjDiv {
    padding: 3px 0 0 3px;
    font-size: 0.7rem;
    line-height: 0.8rem;
  }
} // index-4


body.index-7 {
  #svg1,#svg2 {
    border: 1px dotted rgba(1, 85, 132, 0.31);
  }
  #svg1
  {
    float: none;

    .swFobjDiv {
    }
    .node {
      cursor: crosshair;

      .nodeText {

        stroke: #fff;
        stroke-width:   4px;
        stroke-opacity: .4;
      }
      .inCircle {
        stroke: #fff;
        stroke-width: 3px;
        stroke-opacity: .75;
      }

      .swRoot {
        fill: #B62C64;
      }
      .swChild {
        fill: #3db1cc;
      }
      // plus
      &.node_selected .inCircle {
        //fill: #ff7f0e;
        stroke: #ff7f0e;
        stroke-opacity: .75;
      }
      &.node_msddrag .inCircle {
        stroke-width: 3px;
        stroke: #c7ae99;
        stroke-opacity: .75;
      }
      &.node_longPress .inCircle
      {
        stroke-width: 7px;
        stroke: #d200cb;
        stroke-opacity: .5;
      }
      &.node_longPressHasLine .inCircle
      {
        stroke-width: 5px;
        stroke: rgb(17, 182, 92);
        stroke-opacity: .5;
      }
      &.node_longPressDoubleForSMP .inCircle
      {
        stroke-width: 9px;
        stroke: #0069a9;
        stroke-opacity: .5;
      }

    } // node

    .drag_line {
      stroke: #999;
      stroke-width: 5;
      pointer-events: none;
    }

    .drag_line_hidden {
      stroke: #999;
      stroke-width: 0;
      pointer-events: none;
    }

    .link {
      stroke: #b5a68c;
      stroke-width: 5;
      cursor: crosshair;
      stroke-opacity: .7;
    }

    .link_selected {
      stroke: #ff7f0e;
      stroke-opacity: .7;
    }

  } // #svg1

  #info {
    width: 830px;
  }

  .Res {
    color: #b62c64;
    cursor: pointer;
  }
  hr {
    margin: 10px 0;
  }
  .marker {
    fill: #b5818a;
  }
  #svg2 {
    cursor: pointer;
    .link {
      fill: none;
      stroke: #b5a68c;
      stroke-width: 1;
      stroke-opacity: .8;
    }
    .node circle {
      opacity: 0.4;
    }
    .node circle:hover {
      opacity: 0.75;
    }
    .nodeText {
      fill: #b62c64;
      fill-opacity: 1 !important;
      //stroke: #fff;
      //stroke-width:   4px;
      //stroke-opacity: .4;
    }
  }
}  // index-7


.test {
  color: #fd8d3c;
}





// Base Grad @
@baseA: #b4a88a;
@baseB: #688594;
@baseC: #fff;
@Link: #977239;
@Roses: #be3f67;
@vRadius:    6px;

body.index-5
{
  .mainFocus path {
    fill: @Roses;
    fill-opacity: .5;
  }
  .resFocus path {
    fill: #2b98a0;
    fill-opacity: .5;
  }
  hr {
    margin: 5px 0;
  }
  text {
    font-size: 11px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  #svg3 {
    path.domain {
      fill: none;
      stroke: @baseB;
    }
    rect {
      fill: #4c80a0;
    }

  } // svg3

  #svg2, #svg4
  {
    float: none;

    .axis path,
    .axis line {
      fill: none;
      stroke: #999;
      shape-rendering: crispEdges;
    }

    .subFocus path {
      fill: @baseB;
      fill-opacity: .55;
    }
    .brush .extent {
      /*stroke: #fff;
      fill-opacity: .125;*/
      shape-rendering: crispEdges;
    }
    .background {
      cursor: col-resize !important;
    }

    .minor line {
      stroke: #777;
      stroke-dasharray: 2,2;
    }
    .overlay {
      fill: none;
      pointer-events: all;
    }

    .tip {
        circle {
          fill: #fff;
          stroke: #be3f67;
        }
        text {
          font-size: 13px;
        }

    }

  }
} // #index-5





/* ie6hack-----------------------*/
body{
    position : relative;
}
/* ie6hack-----------------------*/

/* samuraiWorks add */
.a_fl_R { float: right;}
.a_fl_L { float: left;}
.a_Tcenter { text-align: center;}
.a_TRight { text-align: right;}
.a_TLeft { text-align: left;}
.a_hidden { display: none;}
.a_hidden2 { position:absolute; left:-9999px; }
.a_opace0 { opacity: 0;}
.a_prelative { position: relative;}
.a_mar00auto { margin: 0px auto;}
.a_disp_none {	display: none;}

/* ------------------------------------------------------------
  Clearfix
------------------------------------------------------------ */
/* new clearfix */
.clf:before,
.clf:after {
    content: "";
    display: table;
}
.clf:after {clear: both;}
/* For IE 6/7 (hasL) */
.clf {zoom: 1;}
/* DW clearfix */
//.clf {overflow: hidden;}
/**/
/* ------------------------------------------------------------
    99. Clearfix
------------------------------------------------------------ */
/*.clear {clear: both; line-height: 0;}*/
/*-----------------------------------------------------------
 |px|%|
 |10|77|
 |11|85|
 |12|93|
 |13|100|
 |14|108|
 |15|116|
 |16|123.1|
 |17|131|
 |18|138.5|
 |19|146.5|
 |20|153.9|
 |21|161.6|
 |22|167|
 |23|174|
 |24|182|
 |25|189|
 |26|197|
 ex) 12px
 element {font-size: 93%;}
 ------------------------------------------------------------*/
.ft10 { font-size: 77%;}
.ft11 { font-size: 85%;}
.ft12 { font-size: 93%;}
.ft13 { font-size: 100%;}
.ft14 { font-size: 108%;}
.ft15 { font-size: 116%;}
.ft16 { font-size: 123.1%;}
.ft17 { font-size: 131%;}
.ft18 { font-size: 138.5%;}
.ft19 { font-size: 146.5%;}
.ft20 { font-size: 153.9%;}
.ft21 { font-size: 161.6%;}
.ft22 { font-size: 167%;}
.ft23 { font-size: 174%;}
.ft24 { font-size: 182%;}
.ft25 { font-size: 189%;}
.ft26 { font-size: 197%;}

/* padding-----------------------*/

.b_LH1 { line-height: 1.7em;}
.b_LH2 { line-height: 1.9em;}
.b_LH3 { line-height: 2.1em;}

.b_pad20 { padding: 20px;}
.b_pad15 { padding: 15px;}
.b_pad10 { padding: 10px;}
.b_pad5 { padding: 5px;}
.b_padB5 { padding: 0px 0px 5px 0px;}
.b_padT5 { padding-top: 5px;}
.b_padLT5 { padding: 5px 0px 0px 5px;}
.b_padT10 { padding-top: 10px;}
.b_padT30 { padding-top: 30px;}
.b_padTB5 { padding: 5px 0px;}
.b_padTB10 { padding: 10px 0px 10px 0px;}
.b_padTB20 { padding: 20px 0px 20px 0px;}

.b_padTB50 { padding: 50px 0px 50px 0px;}
.b_padTB30 { padding: 30px 0px 30px 0px;}
.b_padL20 { padding: 0px 0px 0px 20px;}
.b_padR5 { padding-right: 5px;}
.b_padR15 { padding-right: 15px;}
.b_padL5 { padding-left: 5px;}
.b_padL15 { padding-left: 15px;}
.b_padLR5 { padding-right: 5px; padding-left: 5px;}
.b_padLR10 { padding-right: 10px; padding-left: 10px;}
.b_padLR15 { padding-right: 15px; padding-left: 15px;}
.b_padLR1 { padding-right: 0px; padding-left: 1em;}
.b_padLR2 { padding-right: 1em; padding-left: 0px;}
.b_mar5 { margin: 5px;}
.b_marLR15 { margin: 0px 15px 0px 15px;}
.b_marB15 { margin: 0px 0px 15px 0px;}
.b_marB25 { margin: 0px 0px 25px 0px;}

/*text colour*/
.px_fff {
    color: #fff;
    text-shadow: 1px 1px 1px #666;
}
.px_fff_shadcha {
    color: #fff;
    text-shadow: 1px 1px 1px #766142;
}
.px_uspink {
    color: #906;
    text-shadow: 1px 1px 1px #fff;
}
.px_ao {
    color: #388ED4;
    font-weight: bold;    /*text-shadow: 1px 1px 1px #ccc;*/
}
.px_aomid {
    color: #099;
    text-shadow: 1px 1px 1px #fff;
}
.px_mizu {
    color: #76C3AB;
    text-shadow: 1px 1px 1px #fff;
}
.px_666 {
    color: #666;
    text-shadow: 1px 1px 1px #fff;
}
.px_org {
    color: #E53826;
    text-shadow: 1px 1px 1px #fff;
}
.px_pink {
    color: #930;
    text-shadow: 1px 1px 1px #fff;
}
.px_cha {
    color: #630;
    text-shadow: 1px 1px 1px #e7e7e7;
}
.px_bold {
    font-weight: bold;
}
/* TEMPLATE-----------------------*/
a:link    {
    text-decoration:underline;
}
a:visited {
    text-decoration:underline;
}
a:hover,
a:focus,
a:active  {
    text-decoration:underline;
}