@charset "UTF-8";
@import "/_common/themes/gis/css/base/init.css";
@import "/_common/themes/gis/css/base/style.css";

/*------------------------------------------------
 content
------------------------------------------------*/

/*----- banner -----*/
#banner {
  margin-bottom: 30px;
}
#banner img {
  width: 100%;
  height: auto;
  max-width: 950px;
}

/*----- info -----*/
#info {
  position: relative;
  margin-bottom: 20px;
  padding: 5px 0px;
  border: solid 1px #858585;
  border-radius: 3px;
  box-shadow: 1px 3px 3px #C2C2C2;
  overflow: hidden;
  zoom: 1;
}
:root #info {
  border-radius: 5px \0/; /* IE9 */
}
#infoWrapper {
  display: table;
}
#info .left {
  /float: left;
  padding: 20px 15px;
  border-right: dotted 1px #858585;
  color: #077E3F;
  font-size: 120%;
  font-weight: bold;
}
#info .right{
  display: table-cell;
  padding: 0 15px;
  vertical-align: middle;
  overflow: hidden;
}

/*----- docInfo -----*/
#docInfo:after {
  content: "";
  clear: both;
  display: table;
  height: 0;
}
#docInfo {
  margin-bottom: 20px;
  padding: 10px 15px;
  border: 1px solid #858585;
  border-radius: 3px;
  box-shadow: 1px 3px 3px #C2C2C2;
  zoom: 1;
}
#docInfo .pieceHeader {
  float: left;
}
#docInfo .pieceHeader h2 {
  color: #077E3F;
  font-size: 145%;
  font-weight: bold;
  -webkit-text-stroke-width: 0.1px;
  -webkit-text-stroke-color: #077E3F;
  -webkit-text-fill-color: #077E3F;
}
#docInfo .pieceBody {
  padding: 3px 0 0 15px;
  overflow: hidden;
}
#docInfo .info {
  margin-bottom: 3px;
  padding-left: 10px;
  background-image: url("/_common/themes/gis/images/ic/ic_dot_06.gif");
  background-position: left 0.6em;
  background-repeat: no-repeat;
  word-break: break-all;
  word-wrap: break-word;
}
#docInfo .next {
  text-align: right;
}

/*------------------------------------------------
 menu
------------------------------------------------*/

/*----- relation -----*/
#relation {
  margin-bottom: 20px;
}
#relation .pieceHeader {
  margin-bottom: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 23px;
  background-image: url(/_common/themes/gis/images/ic/tl_ic_link.png);
  background-repeat: no-repeat;
  background-position: left center;
}
#relation .pieceHeader h2 {
  font-size: 125%;
  font-weight: bold;
}
#relation .pieceBody {
  word-break: break-all;
  word-wrap: break-word;
}
#relation ul li {
  margin-bottom: 3px;
  padding-left: 10px;
  background-image: url(/_common/themes/gis/images/ic/ic_dot_01.gif);
  background-repeat: no-repeat;
  background-position: left 0.6em;
}

/*----- rules,howto,rulesBottom,howtoBottom -----*/
#about,
#rules,
#howto {
  display: block;
  margin-bottom: 13px;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 23px;
  background-repeat: no-repeat;
  background-position: left center;
}
#about {
  background-image: url(/_common/themes/gis/images/ic/tl_ic_infomation.png);
}
#rules {
  display: none;
  background-image: url(/_common/themes/gis/images/ic/tl_ic_agreement.png);
}
#howto {
  background-image: url(/_common/themes/gis/images/ic/tl_ic_handle.png);
}
#about h2,
#rules h2,
#howto h2 {
  font-size: 100%;
  font-weight: bold;
}
#rulesBottom,
#howtoBottom {
  display: none;
}

/*----- aboutBottom -----*/
#aboutBottom {
  /display: none;
  display: none\9;
}

/*----- qrCode -----*/
#qrCode {
  margin-bottom: 13px;
}
#qrCode .pieceHeader {
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 23px;
  background-image: url(../../images/ic/tl_ic_smartphone.png);
  background-repeat: no-repeat;
  background-position: left center;
}
#qrCode .pieceHeader h2 {
  font-size: 125%;
  font-weight: bold;
  -webkit-text-stroke-width: 0.1px;
  -webkit-text-stroke-color: black;
  -webkit-text-fill-color: black;
}
#qrCode .pieceBody {
  padding: 5px;
  font-size: 90%;
  font-weight: bold;
  text-align: center;
}
#qrCode .pieceBody p {
  margin-bottom: 10px;
}
#qrCode img {
  margin: 0 0 0 3px;
  vertical-align: middle;
}


/*=============================================================
 タブレット・スマホ向けスタイル
=============================================================*/
@media only screen and (max-width: 799px) {

/*------------------------------------------------
 content
------------------------------------------------*/

/*----- info -----*/
#info {
  display: none;
}

/*----- docInfo -----*/
#docInfo .pieceHeader {
  float: none;
  margin-bottom: 5px;
}
#docInfo .pieceBody {
  padding: 0 0 0 5px;
}
#docInfo .info {
  margin-bottom: 20px;
}


/*------------------------------------------------
 menu
------------------------------------------------*/

/*----- relation -----*/
#relation {
  display: none;
}


/*----- qrCode -----*/
#qrCode .pieceBody {
  text-align: left;
}

}


/*=============================================================
 PC向けスタイル
=============================================================*/

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

/*------------------------------------------------
 menu
------------------------------------------------*/

/*----- rules,howto,rulesBottom,howtoBottom -----*/
#about,
#rules,
#howto {
  display: block;
  margin-bottom: 13px;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 23px;
  background-repeat: no-repeat;
  background-position: left center;
}
#about {
  background-image: url(/_common/themes/gis/images/ic/tl_ic_infomation.png);
}
#rules {
  display: none;
  background-image: url(/_common/themes/gis/images/ic/tl_ic_agreement.png);
}
#howto {
  background-image: url(/_common/themes/gis/images/ic/tl_ic_handle.png);
}
#about h2,
#rules h2,
#howto h2 {
  font-size: 125%;
  font-weight: bold;
}
#rulesBottom,
#howtoBottom {
  display: none;
}

/*----- relation -----*/
#relation {
  display: block;
}

}