@charset "shift_jis";



.main {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  background-color: #e6e6e6;
}

.main * img {
  width: 100%;
}


@media screen and (max-width: 428px) {
  .main {
    padding-top: 0;
  }
}

.contents {
  background-color: #FFF;
  padding: 1%;
  overflow: hidden;
  max-width: 980px;
  margin: 0 auto;
}

.contents:after {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

/*商品情報index*/
.products-box ul {
  display: flex;
  flex-wrap: wrap;
}

.products-box li {
  margin-bottom: 1em;
  flex-basis: 50%;
}

.products-box li a,
.item_lineup li a {
  display: block;
  padding: 3%;
}

.products-box li a:before,
.item_lineup li a:before {
  content: "\f054";
  font-family: FontAwesome;
  margin-right: 0.5em;
}

.products-box li a:hover,
.products-box li a:active,
.item_lineup li a:hover,
.item_lineup li a:active {
  background: rgba(173, 215, 225, .8);
}

/*見出し*/

.contents h2 {
  font-size: 2.2rem;
  font-weight: bold;
}


h3 {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
  padding: 12px;
  text-align: center;
}

h4 {
  text-align: center;
  background: #a9a9a9 none repeat scroll 0 0;
  padding: 1%;
  color: #fff;
  font-size: 80%;
}

/*ナビボタン*/

.nav-box {
  background: rgba(255, 255, 255, 1) none repeat scroll 0 0;
  overflow: hidden;
}

.nav-box p {
  width: 100%;
  background: rgba(51, 51, 51, 1) none repeat scroll 0 0;
  color: rgb(255, 255, 255);
  font-weight: bold;
  text-align: center;
}

.nav-box ul {
  width: 98%;
  margin: 0 auto 10px;
  overflow: hidden;
  font-size: 90%;
}

.nav-box li {
  border-bottom: 1px solid #ccc;
  border-collapse: collapse;
  display: table;
  width: 100%;
}

.nav-box li a {
  display: block;
  padding: 6px;
}

.nav-box li a:before {
  content: "\f054";
  font-family: FontAwesome;
}

/*商品画像下小見出し*/
.text1 {
  font-size: 20px;
  font-weight: bold;
  padding: 1% 0 0;
}

/*リンクボタン*/

.button_wrap {
  width: 100%;
  margin: 0 auto;
}

.button_wrap:after {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

.button_wrap ul {
  width: 100%;
}

.button_wrap li a, .item_lineup p a {
  width: 46.8%;
  float: left;
  margin-right: 20px;
  border: 3px solid #1272b4;
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
  color: #1272b4 !important;
  text-decoration: none;
  font-size: 16px;
  -webkit-transition: 1.5s;
  -moz-transition: 1.5s;
  -o-transition: 1.5s;
  -ms-transition: 1.5s;
  transition: 1.5s;
  margin-bottom: 50px;
}

.button_wrap li a:hover, .item_lineup p a:hover, .dl_button a:hover, .button_wrap-txt a:hover {
  background-color: #1272b4;
  color: #fff !important;
}

.button_wrap-txt {
  width: 100%;
  overflow: hidden;
}

.button_wrap-txt ul {
  width: 105%;
  overflow: hidden;
  margin-bottom: 3%;
}

.button_wrap-txt li {
  float: left;
  width: 46.5%;
  margin-right: 2%;
  box-sizing: border-box;
}

.button_wrap-txt.box-3colomn li {
  width: 30.4%;
}

.box-5colomn {
  overflow: hidden;
  width: 100%;
}

.box-5colomn .left {
  width: 60%;
  float: left;

}

.box-5colomn .right {
  width: 39%;
  float: right;
}


.box-5colomn .left li {
  width: 30.333%;
}

.box-5colomn .right li {
  width: 46.5%;
}


.button_wrap-txt li a {
  width: 100%;
  border: 3px solid #1272b4;
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
  color: #1272b4 !important;
  text-decoration: none;
  font-size: 16px;
  -webkit-transition: 1.5s;
  -moz-transition: 1.5s;
  -o-transition: 1.5s;
  -ms-transition: 1.5s;
  transition: 1.5s;
  margin-bottom: 3%;
  display: block;
}


.dl_button {
  display: block;
  margin: 0 0 6%;
}

.dl_button a {
  border: 3px solid #1272b4;
  color: #1272b4 !important;
  display: block;
  font-size: 16px;
  padding: 10px 0;
  margin: 0 auto;
  outline: medium none;
  text-align: center;
  text-decoration: none;
  width: 98%;
  -webkit-transition: 1.5s;
  -moz-transition: 1.5s;
  -o-transition: 1.5s;
  -ms-transition: 1.5s;
  transition: 1.5s;
}

.dl_button i {
  margin-right: 10px;
}



/*2カラム*/
.calamn2 li {
  float: left;
  padding: 2%;
  width: 46%;
}


/*製品ラインナップ*/

.item_lineup ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item_lineup li {
  flex-basis: 30%;
  margin-bottom: 1em;
}

/*.item_lineup li {
    display: list-item;
    float: left;
    list-style: inside none disc;
    width: 30%;
}*/

/*.item_lineup li a {
  padding:5%;
  display: inline-block;
}*/

/*kasatsuki*/
.kasatsuki {
  border: 1px solid #9e9e9e;
  border-radius: 15px;
  width: 100%;
  margin-bottom: 5%;
  box-sizing: border-box;
}

.kasatsuki dl {
  padding: 2%;
  overflow: hidden;
}

.kasatsuki dt {
  border-bottom: 1px solid #333;
  font-size: 24px;
}

.kasatsuki .d_lef {
  float: left;
  font-size: 17px;
  margin: 5%;
  padding: 1%;
  width: 35%;
}

.kasatsuki .d_ri {
  float: left;
  line-height: 1.6;
  padding: 1%;
  width: 48%;
}

.kasatsuki .d_lef02 {
  float: left;
  font-size: 17px;
  margin: 4%;
  padding: 1%;
  width: 60%;
}

.kasatsuki .d_ri02 {
  float: left;
  line-height: 1.6;
  padding: 1%;
  width: 28%;
}


.philips {
  clear: both;
  padding: 16px 0 0;
  text-align: center;
  margin-bottom: 5%;
}

div#wrapper .philips a {
  color: #1272b4;
  font-weight: bold;
  text-decoration: underline;
  font-size: 90%;
}

/*movie*/
.movie {
  display: block;
  height: 320px;
  margin: 5% auto;
  width: 60%;
}


.col {
  overflow: hidden;
  padding: 0 8px;
}


.col.col4>li {
  width: 23%;
}

.col>li {
  float: left;
  margin: 3% 1%;
}

.gray-box {
  padding: 1%;
  text-align: center;
  border: 2px solid #696969;
  color: #696969;
}


/*===============================================
  画面の横幅が480px以下
===============================================*/
@media screen and (max-width: 480px) {

  /*商品情報index*/
  .products-box ul,
  .item_lineup ul {
    display: flex;
    flex-direction: column;
  }

  .products-box li {
    margin-bottom: 1em;
    flex-basis: 100%;
  }


  /*ナビボタン*/
  /*アコーディオン-------*/
  label {
    background: rgba(102, 102, 102, 1);
    color: #fff;
    padding: 10px;
    display: block;
    margin: 0;
    border: 1px solid #fff;
  }

  label .fa {
    float: right;
    display: inline-block;
    font-size: 20px;
  }

  input[type="checkbox"].on-off {
    display: none;
  }

  .nav-box ul {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .nav-box li {
    padding: 5px;
  }

  input[type="checkbox"].on-off+ul {
    height: 0;
    overflow: hidden;
  }

  input[type="checkbox"].on-off:checked+ul {
    height: auto;
  }

  /*アコーディオン-------*/

  .nav-box li {
    border-bottom: 1px solid #ccc;
    border-collapse: collapse;
    display: table;
    float: left;
    margin-right: 3%;
    width: 47%;
  }


  .button_wrap li a, .item_lineup p a {
    margin-right: 3%;
  }


  /*製品ラインナップ*/

  .item_lineup li {
    float: none;
    width: 100%;
  }

  .item_lineup li a {
    padding: 3%;
  }

  /*movie*/
  .movie {
    height: 250px;
    width: 100%;
  }

}

@media only screen and (min-device-width:481px) and (max-device-width:767px) {

  /*ナビボタン*/

  .nav-box {
    background: rgba(255, 255, 255, 1) none repeat scroll 0 0;
    overflow: hidden;
  }

  .nav-box ul {
    width: 98%;
    margin: 0 auto 10px;
    overflow: hidden;
  }

  .nav-box li {
    border-bottom: 1px solid #ccc;
    border-collapse: collapse;
    display: table;
    float: left;
    width: 33%;
  }

  .nav-box li a {
    display: block;
    padding: 6px;
  }

  .nav-box li a:before {
    content: "\f054";
    font-family: FontAwesome;
  }

  input[type="checkbox"].on-off {
    display: none;
  }

  .nav-box .fa {
    display: none;
  }


  .button_wrap li a, .item_lineup p a {
    margin-right: 3%;
    margin-bottom: 7%;
  }

  /*製品ラインナップ*/

  .item_lineup li {
    float: left;
    width: 50%;
  }

  .item_lineup li a {
    padding: 3%;
  }



}



/*===============================================
 iPad Portrait(縦)
===============================================*/
@media only screen and (min-device-width:768px) and (max-device-width:1024px) {

  /*ナビボタン*/

  .nav-box {
    background: rgba(255, 255, 255, 1) none repeat scroll 0 0;
    overflow: hidden;
  }

  .nav-box ul {
    width: 98%;
    margin: 0 auto 10px;
    overflow: hidden;
  }

  .nav-box li {
    border-bottom: 1px solid #ccc;
    border-collapse: collapse;
    display: table;
    float: left;
    width: 24.7%;
  }

  .nav-box li a {
    display: block;
    padding: 6px;
  }

  .nav-box li a:before {
    content: "\f054";
    font-family: FontAwesome;
  }

  input[type="checkbox"].on-off {
    display: none;
  }

  .nav-box .fa {
    display: none;
  }
}

/*===============================================
PC
===============================================*/

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

  .content-right {
    float: right;
    width: 19%;
    position: relative;
  }

  .content-left {
    float: left;
    width: 80%;
    position: relative;
  }

  /*ナビボタン*/

  /*アコーディオン-------*/
  label {
    background: rgba(102, 102, 102, 1) none repeat scroll 0 0;
    color: #fff;
    display: block;
    font-weight: bold;
    text-align: center;
    width: 100%;
  }

  /*--------------------*/

  .nav-box {
    background: rgba(255, 255, 255, 1) none repeat scroll 0 0;
    overflow: hidden;
    position: relative;
    /*position: absolute;
  right: 0;*/
    width: 180px;
  }

  .nav-box ul {
    width: 98%;
    margin: 0 auto 10px;
    overflow: hidden;
    font-size: 90%;
  }

  .nav-box li {
    border-bottom: 1px solid #ccc;
    border-collapse: collapse;
    display: table;
    width: 100%;
  }

  .nav-box li a {
    display: block;
    padding: 3px 6px;
  }

  .fixed {
    position: fixed;
    top: 190px;
    z-index: 1;
  }



  input[type="checkbox"].on-off {
    display: none;
  }

  .nav-box .fa {
    display: none;
  }

}