@charset "UTF-8";
/* =================================================================================================

　基本スタイル

================================================================================================= */
/* CSS Document */
/* ----------------------------------------------------------------------------
　画像のぼやけ防止
---------------------------------------------------------------------------- */
#main img {
  -webkit-backface-visibility: hidden;
}

/* ----------------------------------------------------------------------------
　パンくず
---------------------------------------------------------------------------- */
.mod_topicPath {
  width: 960px;
  margin: 0 auto 30px;
}

.mod_topicPath ul li {
  padding-right: 8px;
}

/* ----------------------------------------------------------------------------
　メインエリア
---------------------------------------------------------------------------- */
#main #main_area {
  margin-bottom: 25px;
}

#main #main_area .logo {
  width: 135px;
  margin-bottom: 20px;
}
#main #main_area .logo img {
  width: 100%;
}

#main #main_area .photo img {
  width: 100%;
}

#main h1 {
  font-size: 34px;
  text-align: center;
  margin-bottom: 25px;
  color: #333;
}
#main h1 .width_short {
  transform: scale(0.8, 1);
  display: inline-block;
}

/* ----------------------------------------------------------------------------
　アンカーリンク
---------------------------------------------------------------------------- */
#main #anchor {
  margin-bottom: 50px;
}

#main #anchor li {
  width: 24%;
  float: left;
  margin-right: 1.33333%;
}
#main #anchor li.lastItem {
  margin-right: 0%;
}

#main #anchor li a {
  display: block;
  text-align: center;
  color: #22a652;
  border: 1px solid #22a652;
  text-decoration: none;
  padding: 15px 0;
  font-size: 20px;
  font-weight: 600;
  transition: 0.4s ease-in-out;
}
#main #anchor li a:hover {
  color: #fff;
  background-color: #22a652;
}

#main #anchor li a span {
  background: url("/resource/club_com/special/aonestore/images/anchor_arrow.png") right 0 top 50% no-repeat;
  background-size: 19px auto;
  padding-right: 28px;
  display: inline-block;
}

#main #anchor li a:hover span {
  background: url("/resource/club_com/special/aonestore/images/anchor_arrow_white.png") right 0 top 50% no-repeat;
  background-size: 19px auto;
}

/* ----------------------------------------------------------------------------
　共通見出し
---------------------------------------------------------------------------- */
#main .common_title {
  background: url("/resource/club_com/special/aonestore/images/common_title.png") 8px 50% no-repeat;
  background-size: 22px auto;
  background-color: #333;
  color: #fff;
  padding: 8px 0 8px 35px;
  font-size: 20px;
  font-weight: normal;
  line-height: 100%;
  margin-bottom: 18px;
}
#main .common_title.no_icon {
  background-image: none;
  padding: 8px 0 8px 8px;
}

/* ----------------------------------------------------------------------------
　用途から探す・機能から探す
---------------------------------------------------------------------------- */
#main #use,
#main #function {
  margin-bottom: 50px;
}

#main #use .inner .photo,
#main #function .inner .photo {
  width: 44%;
  float: left;
}
#main #use .inner .photo img,
#main #function .inner .photo img {
  width: 100%;
}

#main #use .inner .list,
#main #function .inner .list {
  width: 53.5%;
  float: right;
}

#main #use .inner ul li,
#main #function .inner ul li {
  box-sizing: border-box;
  width: 32%;
  float: left;
  display: table;
  margin: 0 2% 3.7% 0;
}
#main #use .inner ul li.lastItem,
#main #function .inner ul li.lastItem {
  margin-right: 0%;
}

#main #use .inner ul li a,
#main #function .inner ul li a {
  box-sizing: border-box;
  width: 100%;
  display: block;
  text-align: center;
  border: 1px solid #22a652;
  padding: 15px 0;
  text-decoration: none;
  color: #22a652;
  font-size: 16px;
  font-weight: 600;
  line-height: 130%;
  display: table-cell;
  vertical-align: middle;
  transition: 0.4s ease-in-out;
}
#main #use .inner ul li a:hover,
#main #function .inner ul li a:hover {
  background-color: #22a652;
  color: #fff;
}
#main #use .inner ul li a .small,
#main #function .inner ul li a .small {
  display: inline-block;
  font-weight: normal;
  font-size: 12px;
  line-height: 100%;
  position: relative;
  top: -1px;
}

#main #function .inner ul .spc_top a {
  padding: 16px 0 14px;
}

/* ----------------------------------------------------------------------------
　サイズから探す
---------------------------------------------------------------------------- */
#main #size {
  margin-bottom: 50px;
}

#main #size ul li {
  float: left;
  width: 24%;
  margin-right: 1.3333%;
  margin-bottom: 15px;
}
#main #size ul li.lastItem {
  margin-right: 0%;
}

#main #size ul li a {
  display: block;
  border: 1px solid #22a652;
  color: #22a652;
  text-decoration: none;
  padding: 12px 20px 12px 15px;
  transition: 0.4s ease-in-out;
}
#main #size ul li a:hover {
  background-color: #22a652;
  color: #fff;
}

#main #size ul li a .text {
  font-size: 14px;
  line-height: 140%;
  font-weight: 600;
  width: 52%;
  float: left;
  position: relative;
}

#main #size ul li a .photo {
  width: 45%;
  float: right;
}
#main #size ul li a .photo img {
  width: 100%;
}

/* ----------------------------------------------------------------------------
　プリンタから探す
---------------------------------------------------------------------------- */
#main #printer {
  margin-bottom: 60px;
}

#main #printer ul li {
  float: left;
  width: 48.5%;
  margin-right: 3%;
}
#main #printer ul li.lastItem {
  margin-right: 0%;
}

#main #printer ul li a {
  display: block;
  border: 1px solid #22a652;
  color: #22a652;
  text-decoration: none;
  padding: 15px;
  transition: 0.4s ease-in-out;
}
#main #printer ul li a:hover {
  background-color: #22a652;
  color: #fff;
}

#main #printer ul li a .copy {
  width: 60%;
  float: left;
  position: relative;
}

#main #printer ul li a .copy h3 {
  font-size: 16px;
  margin-bottom: 10px;
}

#main #printer ul li a .copy .text {
  font-size: 14px;
  line-height: 140%;
}

#main #printer ul li a .photo {
  width: 35%;
  float: right;
}
#main #printer ul li a .photo img {
  width: 100%;
  border-radius: 5px;
}

/* ----------------------------------------------------------------------------
　無料ソフト
---------------------------------------------------------------------------- */
#main #free {
  margin-bottom: 80px;
}

#main #free .title {
  width: 95%;
  margin: 0 auto 50px;
}
#main #free .title img {
  width: 100%;
}

#main #free ul {
  width: 95%;
  margin: 0 auto 15px;
}

#main #free li {
  width: 23.5%;
  float: left;
  margin-right: 2%;
  box-sizing: border-box;
  border: 1px solid #22a652;
  color: #22a652;
  position: relative;
  padding: 20px 15px 15px;
}
#main #free li.lastItem {
  margin-right: 0%;
}

#main #free li .no {
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  background-color: #22a652;
  color: #fff;
  font-size: 18px;
  line-height: 100%;
  font-weight: 600;
  border-radius: 100px;
  text-align: center;
  position: absolute;
  top: -10px;
  left: -10px;
  padding-top: 7px;
}

#main #free li h3 {
  text-align: center;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 120%;
}
#main #free li h3 span {
  position: relative;
}

#main #free li .pict {
  width: 60px;
  margin: 0 auto 15px;
}
#main #free li .pict img {
  width: 100%;
}

#main #free li .text {
  font-size: 12px;
  font-weight: 600;
  line-height: 140%;
}

#main #free .cap {
  width: 95%;
  margin: 0 auto;
  font-size: 10px;
}

/* ----------------------------------------------------------------------------
　バナー
---------------------------------------------------------------------------- */
#main .bnr {
  margin: 0 auto 30px;
}

#main .bnr li {
  width: 47%;
}

#main .bnr li:first-child {
  float: left;
}

#main .bnr li.lastItem {
  float: right;
}

#main .bnr li.only {
  float: none;
  margin: 0 auto;
}

#main .bnr li a {
  display: block;
}
#main .bnr li a img {
  width: 100%;
}
#main .bnr li a:hover {
  opacity: 0.8;
}

#main .m3 {
  border-top: 30px solid #29b15c;
  padding-top: 20px;
}

#main .m3 .text {
  width: 50%;
  float: left;
  margin-left: 30px;
  font-size: 10px;
}

#main .m3 .logo {
  float: right;
  width: 50px;
  margin-right: 30px;
}
#main .m3 .logo img {
  width: 100%;
}

/* ----------------------------------------------------------------------------
　clearfix
---------------------------------------------------------------------------- */
#main .clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* ----------------------------------------------------------------------------
　担当者おすすめランキング・pick up!
---------------------------------------------------------------------------- */
#main #sub .ranking_title {
  border-bottom: 1px solid #0c7bec;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 130%;
  background: url("/resource/club_com/special/aonestore/images/ranking_title.png") 0 7px no-repeat;
  background-size: 25px auto;
  padding: 0 0 8px 30px;
}

#main #sub .pickup_title {
  border-bottom: 1px solid #0c7bec;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 130%;
  background: url("/resource/club_com/special/aonestore/images/pickup_title.png") 0 0 no-repeat;
  background-size: 25px auto;
  padding: 2px 0 8px 30px;
}

#main #sub ul {
  margin-bottom: 30px;
}

#main #sub ul li {
  border: 1px solid #ccc;
  margin-bottom: 10px;
  position: relative;
}

#main #sub ul .rank1 {
  border: 1px solid #fdcf51;
}

#main #sub ul .rank2 {
  border: 1px solid #d1d1d1;
}

#main #sub ul .rank3 {
  border: 1px solid #fed4a7;
}

#main #sub ul .rank4 {
  border: 1px solid #42bafd;
}

#main #sub ul .rank5 {
  border: 1px solid #42bafd;
}

#main #sub ul .pickup {
  border: 1px solid #f7797a;
}

#main #sub ul li a {
  padding: 25px 8px 8px;
  display: block;
  text-decoration: none;
}
#main #sub ul li a:hover {
  opacity: 0.8;
}

#main #sub ul .pickup a {
  padding: 15px 8px 8px;
}

#main #sub ul li a .rank {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 45px;
}
#main #sub ul li a .rank img {
  width: 100%;
}

#main #sub ul li a .photo {
  text-align: center;
  margin-bottom: 10px;
}
#main #sub ul li a .photo img {
  width: 100%;
}

#main #sub ul li a .title {
  color: #000;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 10px;
}

#main #sub ul li a .text {
  font-size: 12px;
  line-height: 130%;
  margin-bottom: 5px;
}

#main #sub ul li a .price {
  font-size: 12px;
  color: #000;
}

#main #sub ul li a .price span {
  font-size: 16px;
  color: #cc0000;
  font-weight: 600;
}

#main #sub ul li a .cap {
  color: #000;
  font-size: 11px;
  line-height: 140%;
  margin-top: 10px;
}