@charset "utf-8";

*{
  font-size: 12px;
}

hr {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid #323031;
}

hr.double {
  border-top: 3px double #323031;
}

hr.dashed {
  border-top: 1px dashed #323031;
}

hr.dotted {
  border-top: 1px dotted #323031;
}

hr.dashed_bold {
  border-top: 2px dashed #323031;
  background-color: white;
}

hr.dotted_bold {
  border-top: 2px dotted #323031;
  background-color: white;
}

hr.solid {
  border-top: 1px solid #323031;
  border-bottom: 1px solid white;
}

hr.solid_bold {
  border-top: 3px solid #323031;
  border-bottom: 3px solid white;
  margin: 5px 0 0;
}

hr.dotter_min {
  border-bottom: 1px dotted #333;
}

select, textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
  padding: 2px 5px;
  line-height: 1.5em;
}

input[type="radio"],
input[type="checkbox"] {
  position: relative;
  top: 1px;
}

input::-webkit-input-placeholder {
  color: #999;
}
input:-ms-input-placeholder {
  color: #999;
}
input::-moz-placeholder {
  color: #444;
}

.cfix {
  *zoom: 1;
}
.cfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.btn {
  cursor: pointer;
}

.tip, .stip, .rule, .err {
  font-size: 0.8em;
}

.stip {
  font-weight: bold;
}

.rule {
  color: #5499c7;
}

.err {
  color: #ed4960;
}

.tal{
  text-align: left;
}

.tac{
  text-align: center;
}

.tar{
  text-align: right;
}

.matb0 {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.malr0 {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.patb0 {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.palr0 {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

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

.malr5 {
  margin-left: 5px !important;
  margin-right: 5px !important;
}

.patb5 {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

.palr5 {
  padding-left: 5px !important;
  padding-right: 5px !important;
}

.matb8 {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

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

.malr10 {
  margin-left: 10px !important;
  margin-right: 10px !important;
}

.patb10 {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.palr10 {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

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

.malr15 {
  margin-left: 15px !important;
  margin-right: 15px !important;
}

.patb15 {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}

.palr15 {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

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

.malr20 {
  margin-left: 20px !important;
  margin-right: 20px !important;
}

.patb20 {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.palr20 {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.inline-block{
  display: inline-block;
}

.cont0 {
  width: 0px !important;
}

.cont20 {
  width: 20px !important;
}

.cont40 {
  width: 40px !important;
}

.cont60 {
  width: 60px !important;
}

.cont80 {
  width: 80px !important;
}

.cont100 {
  width: 100px !important;
}

.cont120 {
  width: 120px !important;
}

.cont140 {
  width: 140px !important;
}

.cont160 {
  width: 160px !important;
}

.cont180 {
  width: 180px !important;
}

.cont200 {
  width: 200px !important;
}

.cont220 {
  width: 220px !important;
}

.cont240 {
  width: 240px !important;
}

.cont260 {
  width: 260px !important;
}

.cont280 {
  width: 280px !important;
}

.cont300 {
  width: 300px !important;
}

.cont320 {
  width: 320px !important;
}

.cont340 {
  width: 340px !important;
}

.cont360 {
  width: 360px !important;
}

.cont380 {
  width: 380px !important;
}

.cont400 {
  width: 400px !important;
}

.cont420 {
  width: 420px !important;
}

.cont440 {
  width: 440px !important;
}

.cont460 {
  width: 460px !important;
}

.cont480 {
  width: 480px !important;
}

.cont500 {
  width: 500px !important;
}

.cont520 {
  width: 520px !important;
}

.cont540 {
  width: 540px !important;
}

.cont560 {
  width: 560px !important;
}

.cont580 {
  width: 580px !important;
}

.cont600 {
  width: 600px !important;
}

.cont620 {
  width: 620px !important;
}

.cont640 {
  width: 640px !important;
}

.cont660 {
  width: 660px !important;
}

.cont680 {
  width: 680px !important;
}

.cont700 {
  width: 700px !important;
}

.cont720 {
  width: 720px !important;
}

.cont740 {
  width: 740px !important;
}

.cont760 {
  width: 760px !important;
}

.cont780 {
  width: 780px !important;
}

.cont800 {
  width: 800px !important;
}

.cont820 {
  width: 820px !important;
}

.cont840 {
  width: 840px !important;
}

.cont860 {
  width: 860px !important;
}

.cont880 {
  width: 880px !important;
}

.cont900 {
  width: 900px !important;
}

.cont920 {
  width: 920px !important;
}

.cont940 {
  width: 940px !important;
}

.cont960 {
  width: 960px !important;
}

.cont980 {
  width: 980px !important;
}

.cont1000 {
  width: 1000px !important;
}

.cont1020 {
  width: 1020px !important;
}

/*-------------------------------
320 : iphone(tate)
480 : iphone(yoko)
768 : ipad(tate)
1024: ipad(yoko),PC
1920: PC
-------------------------------*/
/*-----------------------------
▼ Common
-------------------------------*/
a img:hover,
.link img:hover {
  opacity: 0.4;
  -ms-filter: alpha(opacity=40);
  filter: alpha(opacity=40);
}

a img:hover,
.link img .rewind:hover {
  opacity: 1.0;
  -ms-filter: alpha(opacity=100);
  filter: alpha(opacity=100);
}

a img:hover,
.link img .forward:hover {
  opacity: 1.0;
  -ms-filter: alpha(opacity=100);
  filter: alpha(opacity=100);
}

button.link:hover {
  opacity: 0.6;
  -ms-filter: alpha(opacity=60);
  filter: alpha(opacity=60);
}

/*-----------------------------
▼ Setting
-------------------------------*/
.contents_area {
  background: none repeat scroll 0 0 white;
  width: 100%;
  max-width: 810px;
  display: table;
  margin: 0 auto;
  padding: 10px 0;
}
.outside_contents {
  background: none repeat scroll 0 0 white;
  width: 100%;
  max-width: 810px;
  display: table;
  margin: 0 auto;
  margin-bottom:20px;
  padding: 10px 0;
}

#main {
  width: 490px;
  display: table-cell;
  position: relative;
  overflow: hidden;
}

#sub {
  width: 320px;
  vertical-align: top;
  display: table-cell;
}
#sub2 {
  width: 450px;
  vertical-align: top;
  display: table-cell;
}
#sub > *,
#sub2 > *{
  margin: 0 auto 5px;
}
#sub img,
#sub2 img, {
  max-width: 100%;
}

@media screen and (max-width: 960px) {
  .contents {
    width: 98%;
    display: block;
  }
  #main {
    width: 100%;
    display: block;
    position: relative;
    overflow: hidden;
    margin-bottom:10px;
  }
  #sub, #sub2 {
    width: 100%;
    display: block;
  }
}
/* End @media screen and (max-width: 960px) */