/*!
 * default.css
 * modified : 2015.08.03
 */

/*--------------------------------------------------
  CLASSES
--------------------------------------------------*/
a.hover,
a img.hover {
  transition: opacity 0.2s;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
}
a.hover:hover,
a:hover img.hover {
  opacity: 0.7;
}
.ss-enable {
  display: none;
}
.img-box img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 640px) {
  a.hover:hover,
  a:hover img.hover {
    opacity:1.0;
  }
}
@media screen and (max-width: 479px) {
  .ss-enable {
    display: block;
  }
  .ss-disable {
    display: none;
  }
}

/*--------------------------------------------------
  .container
--------------------------------------------------*/
.container {}

/*--------------------------------------------------
  .mainvisual
--------------------------------------------------*/
.mainvisual {
  overflow: hidden;
}
.mainvisual h2 {
  margin: 0;
  line-height: 0;
}
.mainvisual img {
  width: 100%;
  height: auto;
}

/*--------------------------------------------------
  nav
--------------------------------------------------*/
nav {
  margin: 50px 0 0;
  margin: 4.166666% 0 0;
  line-height: 0;
}
nav:after {
  clear: both;
  display: block;
  content: "";
}
nav strong {
  display: block;
  line-height: 0;
  overflow: hidden;
}
nav strong img {
  width: 100%;
  height: auto;
}
nav .menu {
  position: relative;
  z-index: 1;
  float: left;
  margin: -6px 0 0 32px;
  margin: -6px 0 0 2.666666%;
  width: 267px;
  width: 22.25%;
}
nav > strong + .menu {
  margin-left: 36px;
  margin-left: 3%;
}
nav a {
  display: block;
}
nav .menu img {
  margin-left: -36px;
  margin-left: -13.483146%;
  width: 303px;
  width: 113.483146%;
  height: auto;
}

@media screen and (max-width: 479px) {
  nav {
    margin: 20px 0 0;
    padding-bottom: 25px;
    border-bottom: 1px solid #eee;
  }
  nav strong img {
    margin-left: -20%;
    width: 140%;
  }
  nav .menu {
    margin: -4px 0 0 !important;
    width: 40%;
  }
  nav .menu:nth-child(odd) {
    margin: 8px 5% 0 5% !important;
  }
  nav .menu:nth-child(even) {
    margin: 8px 5% 0 5% !important;
  }
}

/*--------------------------------------------------
  section
--------------------------------------------------*/
section {
  margin: 0 71px 0 69px;
  margin: 0 5.916666% 0 5.75%;
  max-width: 1060px;
}
section .heading {
  position: relative;
  padding-top: 52px;
  padding-top: 4.90566%;
}
section .heading .flag {
  position: absolute;
  left: -69px;
  left: -6.509433%;
  top: 0;
  max-width: 219px;
  width: 20.660377%;
}
section .heading h3 {
  display: none;
}
section .heading span {
  display: block;
  margin: 0 0 0 165px;
  margin: 0 0 0 15.566037%;
  line-height: 0;
}
section .heading span img {
  width: 100%;
  height: auto;
}
section .main.img-box {
  position: relative;
  z-index: 1;
  padding-top: 60px;
  padding-top: 5.660377%;
  line-height: 0;
  text-align: center;
}
section .img-box img {
  margin-left: -3px;
}
section p {
  margin: 40px 0 0;
  margin: 3.773584% 0 0;
  font-size: 106.3%;
  line-height: 1.5;
  color: #626262;
}
section p.note {
  margin-top: 6px;
  font-size: 75%;
}

@media screen and (max-width: 940px) {
  section {
    margin: 0 3%;
  }
}
@media screen and (max-width: 479px) {
  section {
    margin: 35px 0 0 !important;
    padding-top: 15px !important;
  }
  section .heading .flag {
    left: -10px;
    width: 18%;
  }
  section .heading h3 {
    display: block;
    margin: 0;
    padding-left: 18%;
    font-size: 160%;
    line-height: 1.4;
    color: #626262;
  }
  section .heading span {
    display: none;
  }
  section p {
    margin-top: 20px;
    font-size: 120%;
    line-height: 1.7;
  }
}

/* .one-point
--------------------------------------------------*/
section .one-point {
  position: relative;
  margin-top: 50px;
  margin-top: 4.716981%;
  padding: 40px 0 45px 54px;
  padding: 3.773584% 0 4.245283% 5.094339%;
  background: #fff6e9;
}
section .one-point:after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 33px;
  height: 33px;
  background: url(../img/point_end.png) no-repeat;
  content: "";
}
section .one-point .inner:after {
  clear: both;
  display: block;
  content: "";
}
section .one-point h4 {
  margin: 0;
  line-height: 0;
}
section .one-point h4 img {
  width: 100%;
  height: auto;
}
section .one-point p {
  margin: 0;
  color: #000;
}
section .one-point p.note {
  margin-top: 6px;
  font-size: 75%;
}

@media screen and (max-width: 479px) {
  section .one-point {
    margin-top: 30px;
    padding: 30px;
  }
}

/*--------------------------------------------------
  #Zoom
--------------------------------------------------*/
#Zoom {
  padding-top: 35px;
  padding-top: 2.916666%;
}
#Zoom .heading span {
  width: 748px;
  width: 70.566037%;
}
#Zoom .one-point h4 {
  /*1006*/
  padding-bottom: 35px;
  padding-bottom: 3.479125%;
  width: 784px;
  width: 77.932405%;
}
#Zoom .one-point .left-box {
  position: relative;
  float: left;
  width: 432px;
  width: 42.942345%;
}
#Zoom .one-point .left-box:after {
  position: absolute;
  right: -46px;
  right: -10.648148%;
  top: 0;
  width: 1px;
  height: 100%;
  background: #0f91d3;
  content: "";
}
#Zoom .one-point .left-box .img-box {
  padding-top: 30px;
  padding-top: 6.944444%;
}
#Zoom .one-point .right-box {
  float: right;
  margin-right: 42px;
  margin-right: 4.1749502%;
  width: 444px;
  width: 44.135188%;
}

@media screen and (max-width: 479px) {
  #Zoom .one-point h4 {
    padding-bottom: 15px;
  }
  #Zoom .one-point h4 img {
    width: 126%;
  }
  #Zoom .one-point .left-box {
    float: none;
    width: auto;
  }
  #Zoom .one-point .left-box:after {
    display: none;
  }
  #Zoom .one-point .right-box {
    margin-top: 30px;
    float: none;
    width: auto;
  }
}

/*--------------------------------------------------
  #FHD
--------------------------------------------------*/
#FHD {
  padding-top: 75px;
  padding-top: 6.25%;
}
#FHD .heading span {
  width: 860px;
  width: 81.132075%;
}
#FHD .main.img-box img {
  max-width: 886px;
  width: 83.584905%;
}
#FHD .one-point .left-box {
  position: relative;
  float: left;
  width: 420px;
  width: 41.7495029%;
}
#FHD .one-point h4 {
  padding-bottom: 20px;
  padding-bottom: 4.7619047%;
  width: 100%;
}
#FHD .one-point .right-box {
  float: right;
  margin-right: 53px;
  margin-right: 5.2683896%;
  width: 474px;
  width: 47.117296%;
}

@media screen and (max-width: 479px) {
  #FHD .one-point .left-box {
    float: none;
    width: auto;
  }
  #FHD .one-point h4 {
    padding-bottom: 15px;
  }
  #FHD .one-point h4 img {
    width: 60%;
  }
  #FHD .one-point .right-box {
    float: none;
    margin: 20px 0 0;
    width: auto;
  }
}

/*--------------------------------------------------
  #Focus
--------------------------------------------------*/
#Focus {
  padding-top: 75px;
  padding-top: 6.25%;
}
#Focus .heading span {
  width: 839px;
  width: 79.1509433%;
}
#Focus .one-point {
  padding-bottom: 0;
}
#Focus .one-point h4 {
  padding-bottom: 20px;
  padding-bottom: 1.988071%;
  width: 775px;
  width: 77.037773%;
}
#Focus .one-point .img-box {
  margin: 30px 0 0 -25px;
  margin: 2.982107% 0 0 -2.4850894%;
  width: 974px;
  width: 96.819085%;
}

@media screen and (max-width: 479px) {
  #Focus .one-point {
    padding-bottom: 20px;
  }
  #Focus .one-point h4 {
    padding-bottom: 15px;
  }
  #Focus .one-point h4 img {
    width: 130%;
  }
  #Focus .one-point .img-box {
    margin: 30px 0 0;
    width: auto;
  }
}

/*--------------------------------------------------
  #Stamina
--------------------------------------------------*/
#Stamina {
  padding-top: 75px;
  padding-top: 6.25%;
}
#Stamina .heading {
  /*padding-top: 22px;
  padding-top: 2.075471%;*/
}
#Stamina .heading span {
  width: 772px;
  width: 72.830188%;
}
#Stamina .main.img-box {
  padding-top: 25px;
  padding-top: 2.35849%;
}
#Stamina .main.img-box img {
  margin-left: 52px;
  margin-left: 4.90566%;
}

/*--------------------------------------------------
  #Finder
--------------------------------------------------*/
#Finder {
  margin-top: 80px;
  margin-top: 6.666666%;
  padding: 10px;
  padding: 0.833333%;
  box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.2);
  background: #d5f0fd;
}
#Finder .inner {
  /*950*/
  position: relative;
  padding: 45px;
  padding: 4.326923%;
  background: #fff;
}
#Finder .bg {
  position: absolute;
  right: -31px;
  right: -2.980769%;
  bottom: 0;
  width: 531px;
  width: 51.0576923%;
}
#Finder h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  width: 696px;
  width: 73.2631578%;
}
#Finder h3 img {
  width: 100%;
  height: auto;
}
#Finder .left-box {
  position: relative;
  z-index: 1;
  padding-top: 45px;
  padding-top: 4.736842%;
  width: 473px;
  width: 49.789473%;
}
#Finder .left-box strong {
  display: block;
  font-size: 112.5%;
  line-height: 1.2;
  color: #008bd2;
}
#Finder .left-box p {
  margin-top: 15px;
  font-size: 93.8%;
  line-height: 1.7;
}
#Finder .left-box .img-box {
  margin-top: 20px;
  line-height: 0;
}
#Finder .left-box .img-box img {
  max-width: 467px;
}
#Finder .btn {
  margin-top: 15px;
}
#Finder .btn br {
  display: none;
}
#Finder .btn a {
  position: relative;
  display: block;
  padding: 17px 5px;
  font-size: 87.5%;
  line-height: 1.2;
  color: #fff;
  text-align: center;
  background: #060675;
  transition: background 0.2s;
  -ms-transition: background 0.2s;
  -moz-transition: background 0.2s;
  -webkit-transition: background 0.2s;
}
#Finder .btn a:after {
  position: absolute;
  left: 17px;
  left: 8.1730769%;
  top: 50%;
  margin-top: -5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 9px;
  border-color: transparent transparent transparent #fff;
  content: "";
}
#Finder .btn a:hover {
  background: #202093;
  text-decoration: none;
}

@media screen and (max-width: 479px) {
  #Finder {
    margin-top: 40px;
    padding: 4px !important;
    box-shadow: none;
  }
  #Finder .inner {
    padding: 20px 15px 30px;
  }
  #Finder h3 {
    width: 98%;
  }
  #Finder .left-box {
    padding-top: 15px;
    width: auto;
  }
  #Finder .left-box strong {
    font-size: 100%;
  }
  #Finder .left-box p {
    font-size: 115%;
  }
  #Finder .bg {
    width: 120px;
  }
  #Finder .btn {
    position: relative;
    z-index: 2;
    margin-top: 50px;
    width: 75%;
  }
  #Finder .btn br {
    display: block;
  }
  #Finder .btn a {
    padding: 15px 5px;
    font-size: 100%;

  }
}

/*--------------------------------------------------
  #Lineup
--------------------------------------------------*/
#Lineup {
  margin: 100px 71px 0 69px;
  margin: 8.333333% 5.916666% 0 5.75%;
  max-width: 1060px;
}
#Lineup h3 {
  margin: 0 0 40px;
  margin: 0 0 3.773584%;
  font-size: 200%;
  font-weight: normal;
  line-height: 1.2;
}
#Lineup .item-box:after {
  clear: both;
  display: block;
  content: "";
}
#Lineup .item .img-box {
  float: left;
}
#Lineup .item .txt-box {
  float: left;
}
#Lineup .txt-box h4 {
  margin: 0;
  line-height: 0;
}
#Lineup .txt-box h4 img {
  width: 100%;
  height: auto;
}
#Lineup .txt-box p {
  font-size: 87.5%;
  line-height: 1.6;
}

@media screen and (max-width: 940px) {
  #Lineup {
    margin: 8.333333% 3%;
  }
}
@media screen and (max-width: 640px) {
  #Lineup {
    margin: 40px 0 0;
  }
  #Lineup .txt-box p {
    font-size: 100%;
  }
}
@media screen and (max-width: 479px) {
  #Lineup h3 {
    margin-bottom: 20px;
    font-size: 180%;
    text-align: center;
  }
  #Lineup .item {
    margin-top: 40px;
    padding: 0 20px;
  }
  #Lineup .item-box .item:first-child {
    margin-top: 0;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
  }
  #Lineup .item .img-box {
    float: none;
    margin: 0 auto !important;
  }
  #Lineup .item .txt-box {
    float: none;
    margin: 20px 0 0 !important;
    width: auto !important;
  }
  #Lineup .txt-box h4 {
    width: 65%;
  }
  #Lineup .txt-box p {
    font-size: 130%;
  }
  #Lineup .txt-box p br {
    display: none;
  }
}

/* HX90V
--------------------------------------------------*/
#Lineup .HX90V .img-box {
  margin: 36px 0 0 7px;
  margin: 3.3962264% 0 0 0.6603773%;
  width: 219px;
  width: 20.6603773%;
}
#Lineup .HX90V .txt-box {
  margin-left: 35px;
  margin-left: 3.3018867%;
  width: 208px;
  width: 19.6226415%;
}

@media screen and (max-width: 479px) {
  #Lineup .HX90V .img-box {
    width: 60%;
  }
}

/* WX500
--------------------------------------------------*/
#Lineup .WX500 .img-box {
  margin: 36px 0 0 76px;
  margin: 3.3962264% 0 0 7.1698113%;
  width: 275px;
  width: 25.9433962%;
}
#Lineup .WX500 .txt-box {
  margin-left: 32px;
  margin-left: 3.0188679%;
  width: 208px;
  width: 19.6226415%;
}
#Lineup .WX500 .txt-box p {
  width: 106%;
}

@media screen and (max-width: 479px) {
  #Lineup .WX500 .img-box {
    width: 70%;
  }
  #Lineup .WX500 .txt-box p {
    width: auto;
  }
}

/* RX10M3
--------------------------------------------------*/
#Lineup .RX10M3 {
  /*994*/
  margin-top: 70px;
  margin-top: 6.603773%;
  padding: 30px 30px 30px 36px;
  padding: 2.830188% 2.830188% 2.830188% 3.396226%;
  color: #fff;
  background: #4c4c4c;
}
#Lineup .RX10M3 strong {
  display: block;
  padding-bottom: 35px;
  padding-bottom: 3.521126%;
  font-size: 175%;
  font-weight: normal;
  line-height: 1.2;
}
#Lineup .RX10M3 strong br {
  display: none;
}
#Lineup .RX10M3 .img-box.img {
  float: left;
  padding-top: 27px;
  padding-top: 2.716297%;
  width: 218px;
  width: 21.9315895%;
  text-align: center;
}
#Lineup .RX10M3 .img-box.img img {
  max-width: 218px;
}
#Lineup .RX10M3 .txt-box {
  float: left;
  margin: 0 0 0 24px;
  margin: 0 0 0 2.4144869%;
  width: 190px;
  width: 19.114688%;
}
#Lineup .RX10M3 .img-box.feat {
  float: right;
  width: 518px;
  width: 52.112676%;
  line-height: 0;
}
#Lineup .RX10M3 p.note {
  margin: 15px 0 0;
  font-size: 68.8%;
  line-height: 1.4;
  text-align: right;
}

@media screen and (max-width: 640px) {
  #Lineup .RX10M3 p.note {
    text-align: left;
  }
}
@media screen and (max-width: 479px) {
  #Lineup .RX10M3 {
    margin-top: 40px;
    padding: 20px;
  }
  #Lineup .RX10M3 strong {
    padding-bottom: 15px;
    font-size: 185%;
  }
  #Lineup .RX10M3 strong br {
    display: block;
  }
  #Lineup .RX10M3 .img-box.img {
    float: none;
    margin: 0 auto;
    width: 65%;
  }
  #Lineup .RX10M3 .txt-box {
    float: none;
    margin: 20px 0 0;
    width: auto;
  }
  #Lineup .RX10M3 .img-box.feat {
    float: none;
    margin-top: 20px;
    width: auto;
  }
  #Lineup .RX10M3 p.note {
    font-size: 75%;
  }
}

/* .btn
--------------------------------------------------*/
#Lineup .btn {
  margin-top: 15px;
}
#Lineup .btn a {
  position: relative;
  display: block;
  padding: 7.2115384% 5px;
  font-size: 87.5%;
  line-height: 1.2;
  color: #000;
  text-align: center;
  background: #e3e3e3;
  transition: background 0.2s;
  -ms-transition: background 0.2s;
  -moz-transition: background 0.2s;
  -webkit-transition: background 0.2s;
}
#Lineup .btn a:after {
  position: absolute;
  left: 17px;
  left: 8.1730769%;
  top: 50%;
  margin-top: -5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 9px;
  border-color: transparent transparent transparent #000;
  content: "";
}
#Lineup .btn a:hover {
  background: #eee;
  text-decoration: none;
}

@media screen and (max-width: 479px) {
  #Lineup .btn a {
    padding: 15px 5px;
    font-size: 130%;
  }
}