@charset "UTF-8";
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0;
}

fieldset, img {
  border: 0;
}

address, caption, code, em, th {
  font-style: normal;
  font-weight: normal;
}

img {
  vertical-align: bottom;
}

table {
  border-spacing: 0;
  width: 100%;
}

ol, ul {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}

caption, th {
  text-align: left;
}

hr {
  display: none;
}

input, textarea {
  font-family: "Hiragino Kaku Gothic Pro","Meiryo",sans-serif;
  font-size: 86%;
}

sub {
  vertical-align: middle;
}

label {
  cursor: pointer;
}

pre {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -o-pre-wrap;
  white-space: -pre-wrap;
  word-wrap: break-word;
  font-size: 86%;
}

/*===================================

	base

===================================*/
body {
  line-height: 2;
  color: black;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  font-size: 75%;
  -webkit-text-size-adjust: none;
}

/*===================================

	header

===================================*/
#header {
  margin: 0 auto 20px auto;
  padding: 22px 6px 0 0;
  width: 984px;
}
#header:after {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}
#header #list-lang {
  float: right;
  width: 55px;
  background: url(/about/hatsumei-vision/img/bg_lang_01.gif) no-repeat 19px center;
}
#header #list-lang:after {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}
#header #list-lang .jp {
  float: left;
}
#header #list-lang .en {
  float: right;
}

/*===================================

	contents

===================================*/
#cnts-container {
  position:relative;
  padding-top: 60px;
  margin: 0 auto;
  width: 990px;
}
#cnts-container:after {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}
#cnts-container .list-lang-01 {
  position: absolute;
  top: 0;
  right: -6px;
  z-index:1;
}
#cnts-container .list-lang-01:after{
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}
#cnts-container .list-lang-01 li{
  float: left;
}
#cnts-container .cnts-clm-01 {
  position:fixed;
  top:60px;
  width: 186px;
}
#cnts-container .cnts-clm-02 {
  float: right;
  width: 748px;
}
#cnts-container .cnts-clm-02 .hdg-l1-tab{
  display:none;
  margin-bottom:20px;  
}
#cnts-container .img-intro-01 {
  padding-left: 4px;
  margin-bottom: 32px;
}
#cnts-container .hdg-l2-01 {
  margin-bottom: 40px;
  padding-left: 4px;
}
#cnts-container .lyt-clm-01 {
  width: 748px;
}
#cnts-container .lyt-clm-01 .clm-01 {
  margin-right: 34px;
  float: left;
  width: 226px;
}
#cnts-container .lyt-clm-01 .clm-02 {
  float: left;
  width: 226px;
}
#cnts-container .lyt-clm-01 .clm-03 {
  float: right;
  width: 226px;
}
#cnts-container .list-thumb-01 li {
  padding: 8px;
  width: 210px;
  height: 141px;
  margin-bottom: 34px;
  background: url(/about/hatsumei-vision/img/bg-thumb-01.gif) no-repeat;
}

/*===================================

	modal

===================================*/
#modal-area {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
}
#modal-area #modal-bg {
  position: fixed;
  top:0;
  left:0;
  background: #FFF;
  z-index: 1;
}
#modal-area #btn-back,
#modal-area #btn-next {
  width: 21px;
  position: absolute;
  z-index: 4;
}
#modal-area #btn-modal-close {
  position: absolute;
  z-index: 4;
}

#modal-cnts {
  overflow: hidden;
  width: 3776px;
  position: absolute;
  z-index: 3;
}
#modal-cnts #modal-cnts-inner {
  padding-bottom: 20px;
  width: 13440px;
  z-index: 3;
}
#modal-cnts #modal-cnts-inner:after {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}
#modal-cnts .modal-container-01,
#modal-cnts .modal-container-02 {
  margin-right: 64px;
  float: left;
}

.modal-container-01 {
  margin-top: 20px;
  width: 896px;
  padding-top: 20px;
  background: url(/about/hatsumei-vision/img/bg-modal-top-01.png) no-repeat top;
}

.modal-inner-01 {
  padding-bottom: 20px;
  background: url(/about/hatsumei-vision/img/bg-modal-btm-01.png) no-repeat bottom;
}

.modal-cnts-01 {
  padding: 20px 40px;
  background: url(/about/hatsumei-vision/img/bg-modal-mid-01.png) repeat-y center;
}

.modal-container-02 {
  padding: 8px;
  width: 880px;
  height: 592px;
  background: url(/about/hatsumei-vision/img/bg-modal-01.png) no-repeat top;
}

/*===================================

	#cnts-00

===================================*/
#cnts-00 p {
  font-size: 108%;
  line-height: 2.2;
}
#cnts-00 a {
  color: #00a3ff;
}
#cnts-00 .hdg-l2-01 {
  margin-bottom: 70px;
  text-align: center;
}
#cnts-00 .hdg-l3-01 {
  margin-bottom: 57px;
  padding-left: 125px;
}

.txt-balloon {
  padding-left: 125px;
}

.box-doc {
  margin-bottom: 65px;
}

.balloon {
  margin-bottom: 15px;
  display: none;
  position: relative;
  width: 560px;
  padding: 0 30px 25px;
}

.balloon.b01 {
  max-height: 354px;
  background: url(/about/hatsumei-vision/img/bg_baloon_01.png) no-repeat 0 0;
}

.balloon.b02 {
  max-height: 264px;
  background: url(/about/hatsumei-vision/img/bg_baloon_02.png) no-repeat 0 0;
}

.balloon.b03 {
  max-height: 239px;
  background: url(/about/hatsumei-vision/img/bg_baloon_03.png) no-repeat 0 0;
}

.balloon.b04 {
  max-height: 291px;
  background: url(/about/hatsumei-vision/img/bg_baloon_04.png) no-repeat 0 0;
}

.balloon.b05 {
  max-height: 291px;
  background: url(/about/hatsumei-vision/img/bg_baloon_05.png) no-repeat 0 0;
}

.balloon.b06 {
  max-height: 349px;
  background: url(/about/hatsumei-vision/img/bg_baloon_06.png) no-repeat 0 0;
}

.balloon .btn-close {
  position: absolute;
  top: 51px;
  right: 29px;
  cursor: pointer;
}

.balloon dl dt {
  margin-bottom: 23px;
  padding-top: 58px;
}

.balloon dl dd {
  font-size: 100% !important;
  line-height: 2.2em;
  letter-spacing: 0.18em;
}

/*===================================

	cnts-detail

===================================*/
.modal-container-02 .cnts-inner-01 {
  margin: 0 auto;
  width: 474px;
  line-height: 2.2;
}
.modal-container-02 .hdg-l3-02 {
  padding: 126px 0 0 204px;
  margin-bottom: 45px;
}

/*===================================

	footer

===================================*/
#footer {
  border-top: solid 1px #e5e5e5;
  margin-bottom: 13px;
}
#footer .inner {
  padding: 13px 8px 0 0;
  margin: 0 auto;
  width: 984px;
}
#footer .inner:after {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}
#footer .box-l {
  float: left;
}
#footer .box-l ul li {
  float: left;
  margin-right: 30px;
}
#footer .box-r {
  float: right;
}

/*===================================

	utility

===================================*/
.mgb00 {
  margin-bottom: 0px !important;
}

.mgb05 {
  margin-bottom: 5px !important;
}

.mgb10 {
  margin-bottom: 10px !important;
}

.mgb15 {
  margin-bottom: 15px !important;
}

.mgb20 {
  margin-bottom: 20px !important;
}

.mgb25 {
  margin-bottom: 25px !important;
}

.mgb30 {
  margin-bottom: 30px !important;
}

.mgb35 {
  margin-bottom: 35px !important;
}

.mgb40 {
  margin-bottom: 40px !important;
}

.mgb45 {
  margin-bottom: 45px !important;
}

.mgb50 {
  margin-bottom: 50px !important;
}

.mgb55 {
  margin-bottom: 55px !important;
}

.mgb60 {
  margin-bottom: 60px !important;
}

.mgb65 {
  margin-bottom: 65px !important;
}

.mgb70 {
  margin-bottom: 70px !important;
}

.mgb75 {
  margin-bottom: 75px !important;
}

.mgb80 {
  margin-bottom: 80px !important;
}

.ta-c {
  text-align: center !important;
}

.ta-r {
  text-align: right !important;
}

.ta-l {
  text-align: left !important;
}

.fsize10 {
  font-size: 67%;
}

.fsize11 {
  font-size: 74%;
}

.fsize12 {
  font-size: 80%;
}

.fsize14 {
  font-size: 94%;
}

.fsize16 {
  font-size: 107%;
}

.fsize18 {
  font-size: 120%;
}

.italic{
  font-style: italic;
}


/*===================================

	Tablet

===================================*/

body.tab .cnts-clm-01{
  display:none;
}

body.tab #cnts-container{
  float:none;
  width:748px;
  margin:0 auto;
}

body.tab #cnts-container .cnts-clm-02 .hdg-l1-tab{
  display:block;
}

body.tab #footer .inner{
    padding:0 10px;
}