@charset "utf-8";

a:link,a:active,a:visited {
  color: #FF3366;
  text-decoration: none;
}
a:hover {
  color: #0066FF;
  text-decoration: none;
}
a:hover img{
  opacity:0.8;
  filter:alpha(opacity=80);
  -ms-filter: "alpha( opacity=80 )";
}
.clr {clear: both;}
body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: #222;
  text-align:center;
}
#wrapper {
  width: 792px;
  margin:0px auto;
  padding:0px 10px;
  border-right: 1px solid #CCC;
  border-left: 1px solid #CCC;
  text-align:left;
}

#header {
  height: 490px;
  background-image: url(https://taneo.net/img/header_bg.jpg);
  background-repeat: no-repeat;
  background-position: center bottom;
  border-bottom-width: 3px;
  border-bottom-style: solid;
  border-bottom-color: #FF999A;
  margin-bottom: 10px;
}
#header h1 {
  display: block;
  background-image: url(https://taneo.net/img/title.gif);
  background-repeat: no-repeat;
  background-position: left top;
  height: 63px;
}
#header h1 a {
  display: block;
  width: 240px;
  height: 46px;
  margin-bottom: 17px;
  margin-right: 530px;
  text-indent: -9999px;
}
#header h1 a:focus{
  outline:none;
  overflow:hidden;
}

#header,#recruit,#profile,#buy,#flow,#join,#voice{margin-bottom: 5px;}

#recruit .box1 {
  background-image: url(https://taneo.net/img/recruit_bg.gif);
  background-repeat: no-repeat;
  background-position: center top;
  height: 305px;
  margin-bottom: 5px;
  padding-top: 130px;
  padding-left: 10px;
  padding-right: 10px;
}
#recruit .box1 h2, #recruit .box1 p {display: none;}
#recruit .box1 ul {
  display: block;
  width: 162px;
  float: left;
}
#recruit .box1 strong {
  display: block;
  float: left;
  width: 368px;
  height: 33px;
  text-indent: -9999px;
  margin-bottom: 3px;
}
#recruit .box1 iframe {
  display: block;
  float: left;
  margin-left: 15px;
}
#recruit .box2 h2, #recruit .box2 p {
  float: right;
  display: block;
  text-indent: -9999px;
  height: 180px;
}
#recruit .box2 h2 {
  background-image: url(https://taneo.net/img/recruit_under.jpg);
  background-repeat: no-repeat;
  width: 475px;
}
#recruit .box2 p {
  background-image: url(https://taneo.net/img/recruit_arrow.gif);
  background-repeat: no-repeat;
  width: 75px;
}
#profile {
  height: 475px;
  background-color: #FFC;
  padding: 5px;
}
#profile h2 {
  display: block;
  height: 32px;
  line-height: 22px;
  font-size: 14px;
  font-weight: bold;
  border: 1px solid #F90;
  margin-bottom: 5px;
  background-color: #FFF;
  color: #F06;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 25px;
  background-position: 5px center;
  background-repeat: no-repeat;
}
#profile .prf {background-image: url(https://taneo.net/img/icon_book.gif);}
#profile .send {background-image: url(https://taneo.net/img/icon_phoneto.gif);}
#profile .data {
  margin-bottom: 5px;
  background-color: #FFF;
  padding: 4px;
  border: 1px solid #CCC;
}
#profile dl {
  display: block;
  width: 530px;
  float: left;
}
#profile dt {
  height: 120px;
  width: 90px;
  float: left;
  display: block;
  margin-bottom: 5px;
}
#profile dd {
  display: block;
  margin-left: 5px;
  float: left;
  width: 215px;
  height: 120px;
  padding: 5px;
  line-height: 22px;
  margin-bottom: 5px;
}
#profile dd em {
  display: block;
  height: 20px;
  font-weight: bold;
  line-height: 22px;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: #F69;
  background-image: url(https://taneo.net/img/icon_clover.gif);
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 20px;
  color: #390;
}
#profile dd li {
  display: block;
  border-bottom-width: 1px;
  border-bottom-style: dashed;
  border-bottom-color: #CCC;
  line-height: 23px;
  height: 23px;
  font-size: 12px;
}
#profile dd li span {font-weight: bold;}
#profile .data p {
  display: block;
  margin-right: auto;
  margin-left: auto;
  border: 1px solid #CCC;
  padding: 5px;
  height: 58px;
  background-color: #EEE;
}
#buy {
  background-image: url(https://taneo.net/img/buy_bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  height: 350px;
}
#buy h2, #buy p, #buy table{display: none;}

#flow {
  background-color: #FE4588;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 10px;
  padding-left: 5px;
  overflow:hidden;
  zoom:1;
}
#flow h2,#voice h3 {
  display: block;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  font-size: 16px;
  line-height: 25px;
  height: 26px;
  letter-spacing: 0.1em;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #FFF;
  margin-bottom: 5px;
}
#flow h2 span:before,#flow h2 span:after,#voice h3 span:before,#voice h3 span:after {
  content:url(https://taneo.net/img/icon_kaeru.gif);
  vertical-align:middle;
  display:inline-table;
}
#flow ol {
  display: block;
  float: left;
  width: 540px;
}
#flow li ,#flow dl{
  display: block;
  float: left;
}
#flow dl {
  padding: 5px;
  background-image: url(https://taneo.net/img/bg_w.gif);
  width: 120px;
}
#flow ol dt {
  display: block;
  margin-bottom: 5px;
}
#flow ol dd {
  display: block;
  font-size: 11px;
}
#flow ol .step1, #flow ol .step2, #flow ol .step3 {
  padding-right: 13px;
  background-repeat: no-repeat;
  background-position: right center;
  margin-left: 4px;
}
#flow ol .step1 {background-image: url(https://taneo.net/img/ar1.gif);}
#flow ol .step2 {background-image: url(https://taneo.net/img/ar2.gif);}
#flow ol .step3 {background-image: url(https://taneo.net/img/ar3.gif);}
#flow ol .step4 {margin-left: 4px;}

#join {
  #height: 320px;
}
#join h2, #join .entry {
  display: block;
  float: left;
  background-repeat: no-repeat;
}
#join h2 {
  width: 75px;
  background-image: url(https://taneo.net/img/join_arrow.gif);
  text-indent: -9999px;
  height: 320px;
}
#join .entry {
  background-image: url(https://taneo.net/img/join_bg.jpg);
  width: 475px;
  padding-top: 70px;
  padding-right: 190px;
  padding-bottom: 10px;
  padding-left: 15px;
  height: 320px;
}

#voice {
  background-color: #6CF;
  padding: 5px;
  overflow:hidden;
  zoom:1;
}
#voice dl {
  display: block;
  float: left;
  width: 265px;
  padding: 5px;
  background-color: #FFF;
}
#voice .v2 {margin-left: 10px;}
#voice dt {
  height: 80px;
  width: 80px;
  display: block;
  float: left;
  margin-bottom: 5px;
}
#voice dd ul {
  display: block;
  float: left;
  margin-left: 5px;
  width: 170px;
  margin-bottom: 5px;
  font-weight: bold;
  color: #630;
}
#voice dd p {
  display: block;
  font-size: 11px;
}

#enquete {
  background-image: url(https://taneo.net/img/enquete_bg.gif);
  background-repeat: no-repeat;
  background-position: center bottom;
  height: 280px;
  background-color: #FF5A84;
  padding: 5px;
}
#enquete h3, #enquete ol {
  text-indent: -9999px;
}

#side {
  width: 215px;
  margin-left: 5px;
  float: left;
  margin-bottom: 5px;
}
#w_login, #m_login {margin-bottom: 10px;}
#w_login h4,#m_login h4,#system h4 {
  background-repeat: no-repeat;
  background-position: center top;
  display: block;
  height: 30px;
  text-indent: -9999px;
}
#w_login div, #m_login div, #system div {
  background-repeat: no-repeat;
  background-position: center bottom;
  padding: 5px;
}
#w_login h4 {background-image: url(https://taneo.net/img/side_w_title.gif);}
#m_login h4 {background-image: url(https://taneo.net/img/side_m_title.gif);}
#system h4 {background-image: url(https://taneo.net/img/side_system_title.gif);}
#w_login div {background-image: url(https://taneo.net/img/side_w_bg.gif);}
#m_login div {background-image: url(https://taneo.net/img/side_m_bg.gif);}

#w_login div dl, #m_login div dl {
  display: block;
  padding: 5px;
  background-repeat: repeat;
  margin-bottom: 5px;
}
#w_login div dl {background-image: url(https://taneo.net/img/bg_w.gif);}
#m_login div dl {background-image: url(https://taneo.net/img/bg_m.gif);}
#w_login div dt, #m_login div dt {
  display: block;
  height: 120px;
  width: 90px;
  float: left;
  margin-bottom: 5px;
}
#w_login div dd ul ,#m_login div dd ul{
  display: block;
  height: 120px;
  float: left;
  width: 100px;
  margin-left: 5px;
  line-height: 15px;
  font-size: 11px;
  margin-bottom: 5px;
  overflow:hidden;
  zoom:1;
}
#w_login div dd ul li, #m_login div dd ul li {
  height: 30px;
  zoom:1;
  vertical-align: bottom;
}
#w_login div dl dd ul li em ,#m_login div dl dd ul li em{
  display: block;
  text-indent: -9999px;
  background-repeat: no-repeat;
  background-position: left center;
}
#w_login div dd p, #m_login div dd p {
  background-color: #FFF;
  padding: 5px;
  line-height: 1.3em;
  height: 35px;
  overflow:hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#side .name {background-image: url(https://taneo.net/img/prf_name.gif);}
#side .ages {background-image: url(https://taneo.net/img/prf_ages.gif);}
#side .area {background-image: url(https://taneo.net/img/prf_area.gif);}
#side .work {background-image: url(https://taneo.net/img/prf_work.gif);}
#system div {
  background-image: url(https://taneo.net/img/side_system_bg.gif);
  color: #FFF;
}
#system div em {
  display: block;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: #FF0;
  line-height: 20px;
  height: 20px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #FF0;
  margin-bottom: 3px;
}
#system div p {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
}
#system div .free {
  background-image: url(https://taneo.net/img/icon_free.gif);
  background-repeat: no-repeat;
  padding-left: 38px;
}
#system div .support {
  background-image: url(https://taneo.net/img/icon_support.gif);
  background-repeat: no-repeat;
  background-position: left top;
  padding-left: 38px;
}
#system div .mobile {
  background-image: url(https://taneo.net/img/qr.png);
  background-repeat: no-repeat;
  padding-left: 75px;
  height: 70px;
}
#footer {
  padding: 10px 0px;
  text-align: center;
}

.container {
  float: left;
  width: 550px;
  margin-bottom: 5px;
}

/* CSS marquee */
.marquee {
  width:100%;
  padding:0 0.2em;
  overflow:hidden;
  margin:0px auto 0px;
  position:relative;
  margin-left: 0px;
  height: 27px;
  line-height: 27px;
  background-image: url(https://taneo.net/img/header_marquee.gif);
  background-repeat: no-repeat;
  background-position: left top;
}
.marquee p {
  margin:0;
  padding-left:100%;
  display:inline-block;
  white-space:nowrap;
  -webkit-animation-name:marquee;
  -webkit-animation-timing-function:linear;
  -webkit-animation-duration:50s;
  -webkit-animation-iteration-count:infinite;
  -moz-animation-name:marquee;
  -moz-animation-timing-function:linear;
  -moz-animation-duration:50s;
  -moz-animation-iteration-count:infinite;
  -ms-animation-name:marquee;
  -ms-animation-timing-function:linear;
  -ms-animation-duration:50s;
  -ms-animation-iteration-count:infinite;
  -o-animation-name:marquee;
  -o-animation-timing-function:linear;
  -o-animation-duration:50s;
  -o-animation-iteration-count:infinite;
  animation-name:marquee;
  animation-timing-function:linear;
  animation-duration:50s;
  animation-iteration-count:infinite;
  font-size: 14px;
  font-weight: bold;
}
@-webkit-keyframes marquee {
  from { -webkit-transform: translate(0%);}
  99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes marquee {
  from { -moz-transform: translate(0%);}
  99%,to { -moz-transform: translate(-100%);}
}
@-ms-keyframes marquee {
  from { -ms-transform: translate(0%);}
  99%,to { -ms-transform: translate(-100%);}
}
@-o-keyframes marquee {
  from { -o-transform: translate(0%);}
  99%,to { -o-transform: translate(-100%);}
}
@keyframes marquee {
  from { transform: translate(0%);}
  99%,to { transform: translate(-100%);}
}