@charset="utf-8";

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/


ul, li {
    list-style:none;
    margin:0;
    padding:0;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
  display:block;
}

nav ul {
  list-style:none;
}

blockquote, q {
  quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content:'';
  content:none;
}

a {
  margin:0;
  padding:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

/* change colours to suit your needs */
ins {
  background-color:#ff9;
  color:#000;
  text-decoration:none;
}

/* change colours to suit your needs */
mark {
  background-color:#ff9;
  color:#000;
  font-style:italic;
   font-weight:bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom:1px dotted;
  cursor:help;
}

table {
  border-collapse:collapse;
  border-spacing:0;
}

/* change border colour to suit your needs */
hr {
  display:block;
  height:1px;
  border:0;
  border-top:1px solid #cccccc;
  margin:1em 0;
  padding:0;
}

input, select {
  vertical-align:middle;
}

/*start from here */
html {
    overflow-y:scroll;
}

header h1 {
    text-align:center;
    font-size: 10px;
    font-weight: lighter;
    color:#666666;
    line-height:1.2;
    margin:6.7px;
}



main {
    width:1024px;
    margin:0 auto;
    list-style:none;
}

.top-wrapper ul{
    list-style:none;
}

.top-wrapper li {
    display:inline-block;
    float:left;
    padding-left:7px;
}

.top-wrapper li::after {
    clear:both;
}

.top-menu {
    width:1000px;
    margin:0 auto;
}

.top-menu img {
    width:125px;
    height:51.25px;
    float:left;
}

.top-menu img::after {
    clear:both;
}

.top-wrapper .brandlogo{
    padding-top:40px;
}

.top-wrapper .guide {
    padding-top:50px;
    padding-bottom:15px;
}

.top-wrapper .guide2 {
    padding-bottom:20px;
}

.toppics li{
    display:inline-block;
    float:left;
}

.toppics li::after {
    clear:both;
}

.upper-pic {
   padding:35px 0px 15px 18px;
}

.bottom-pic {
    padding-left:16px;
    padding-bottom:30px;
}

.main ul {
    list-style:none;
}

.aboutbrand .description {
    padding-bottom:20px;
}

.aboutbrand .rank {
    width:450px;
    height:19px;
    background-color:#003366;
    color:white;
    text-align:left;
    font-size:12px;
    font-weight:bold;
    padding-left:30px;
    padding-top:2px;
}

.ranking {
    float: right;
    display:inline-block;
    width:480px;
    padding-right:20px;
}

.ranking::after {
    clear:both;
}

.ranking-left {
    width:480px;
    float:left;
    display:inline-block;
}

.ranking-left::after {
    clear:both;
}

.rank-pic {
    float:left;
    display:inline-block;
    padding-top:5px;
    padding-left:23px;
}

.rank-pic::after {
    clear:both;
}

.rank-letter1 {
    float:left;
    font-size:11px;
    padding-left:20px;
    font-weight:bold;
}

.rank-letter1::after {
    clear:both;
}

.rank-letter2 {
    float:left;
    font-size:11px;
    padding-left:63px;
    font-weight:bold;
}

.rank-letter2::after {
    clear:both;
}

.rank-letter3 {
    float:left;
    font-size:11px;
    padding-left:19px;
    font-weight:bold;
}

.rank-letter3::after {
    clear:both;
}

.bags {
    float:left;
    padding-left:33px;
    padding-right:33px;
}

.bags::after {
    clear:both;
}

.bags-letter1 {
    float:left;
    font-size:13px;
    padding-left:55px;
    padding-right:53px;
}

.bags-letter1::after {
    clear:both;
}

.bags-letter2 {
    float:left;
    font-size:13px;
    padding-left:65px;
    padding-right:53px;
}

.bags-letter2::after {
    clear:both;
}

.bags-letter3 {
    float:left;
    font-size:13px;
    padding-left:60px;
}

.bags-letter3::after {
    clear:both;
}

.news1 {
    float:left;
    display:inline-block;
    padding-left:14px;
    padding-right:14px;
}

.news1::after {
    clear:both;
}

.Topic {
    color:black;
    font-weight:bold;
    font-size:12px;
}

.WhatsNew p {
    padding-bottom:0px;
}

.news2 {
    overflow:auto;
    width:315px;
    height:260px;
    font-size:10px;
    display:inline-block;
    padding-left:14px;
    line-height:1.5;
}

.news2 a {
    text-decoration: none;
    color:#3572B0;
}

.news2 a:hover {
    text-decoration: underline;
    color:cornflowerblue;
}

.news3 {
    float:left;
    display:inline-block;
    padding:30px 14px 10px 14px;
}

.news3::after {
    clear:both;
}

.aboutbrand {
    text-align:center;
}

.new-pics p {
    color:#3c3c3c;
    font-size:10px;
    padding:15px 0;
    text-align:center;
}

.new-pics li {
    display:inline-block;
    float:left;
    padding-left:5px;
    padding-right:5px;
}

@media (orientation: landscape) and (max-width: 1024px){
  ul.new-pics li {
    display:inline-block;
    float:left;
    padding-right:5px;
}
}

.new-pics li::after {
    clear:both;
}

.moa {
    float:left;
    display:inline-block;
    padding-bottom:30px;
}

.moa::after {
    clear:both;
}

.moa2 {
    float:left;
    padding-right:20px;
    padding-bottom:30px;
}

.moa2::after {
    clear:both;
}

.contents li {
    display:inline-block;
    float:left;
}

@media (orientation: landscape) and (max-width: 1024px){
  .contents li {
      display:block;
      float:none;
  }
}

.contents li::after {
    clear:both;
}

.contents p {
    font-size:13px;
    color:#3c3c3c;
    line-height:20px;
}

.square {
    padding:0px 15px 0px 15px;
}

.square2 {
    padding:0px 15px 30px 15px;
}
1
@media screen and (max-width: 1024px){
ul.contents1{width:980px;}
ul.contents2{width:980px;}
  li.square {
    display:inline-block;
      padding:0px 10px;
  }

  li.square2 {
        display:inline-block;
      padding:0px 10px 30px 10px;
  }
}

.square p {
    padding-top:15px;
}

.square2 p {
    padding-top:15px;
}

.line {
    padding:20px 0 5px 0;
}

.order p {
    text-align:center;
    line-height:20px;
}

div.order p.pink {
    font-weight:bold;
    color:#FF6666;
    font-size:16px;
}

div.order p.page {
    font-size:14px;
    color:gray;
}

.order li {
    float:left;
    display:inline-block;
    padding: 0px 25px 5px 25px;
}

.order li::after {
    clear:both;
}

.bagname {
    color:#999999;
    font-size:10px;
    padding-top:10px;
}

.bottom li {
    float:left;
    display:inline-block;
}

.bottom li::after {
    clear:both;
}

.bottom ul{
    margin:0 auto;
}

.nosale {
    padding-left:30px;
}

.linelink {
    padding-left:20px;
}

.lastbanner {
    padding: 40px 0 96px 25px;
}

.top-wrapper {
    width:1024px;
    margin:0 auto;
}

.changesize img {
    padding-top:30px;
    width:300px;
    padding-right:15px;
}

div.bottom ul li.page_top{
  width: 32px;
  height: 32px;
  margin-left: 1070px;
  margin-bottom:10px;
  background:#3c3c3c;
  opacity:0.8;
}

.page_top a{
  position: relative;
  display: block;
  width: 32px;
  height: 32px;
  text-decoration: none;
}

.page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 10px;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

.css-hover:hover {
    opacity:0.5;
}

.bluesquare {
    padding-left:36px;
    padding-right:15px;
}

div.lastborder {
    border-bottom:solid 1px gray;
    padding-top:70px;
}


div.order {
   width:1024px;
    float:left;
}

div.order::after {
    clear:both;
}

.bluesquare2 {
    padding-right:15px;
}

.new-collection {
    float:left;
}

.new-collection {
    clear:both;
}
.News {
    padding-top:20px;
    padding-left:10px;
}
.new-pics {
    padding-top:10px;
}

.rank-box li {
    float:left;
    padding-left:20px;
    padding-right:10px;
}

.rank-box li::after {
    clear:both;
}
.rank-box li{
    padding-bottom:40px;
}