@charset "UTF-8";
/*____________________________________________________________________________

SITE TITLE: OASYS公式オンラインストア
TITLE: トップページ　PC用

(1) メインバナー（bxSlider）
(2) メインコンテンツエリア
UPDATED:2018.12 CMS
____________________________________________________________________________*/

/*----------------------------------------------------------------------------
  (1) Box Layout & Top Page Common Setting
----------------------------------------------------------------------------*/
.container_top_default2_boem {
  margin-top: 20px;
}
.container_top_default2_boem #nav_left {
  float: left;
  width: 200px;
  padding-right: 24px;
}
.container_top_default2_boem #contents_right {
  float: right;
  width: 800px;
}
.container_top_default2_boem #contents_bottom {
  clear: both;
}
.container_top_default2_boem #hero_image {
  margin-bottom: 30px;
}

.contents_right__contents {
  width: 800px;
  margin-bottom: 40px;
}

.contents_right__contents .section__btn {
  position: relative;
  display: block;
  width: 35%;
  padding: 14px 0;
  font-size: 0.9rem;
  font-weight: bold;
  letter-spacing: .1rem;
  text-align: center;
  color: #fff;
  border: 1px solid #0073be;
  background: #0073be;
  margin: 24px auto 0;
  transition-duration: .3s;
}

.contents_right__contents .section__btn:hover {
  color: #0073be;
  background: #fff;
}

.section__btn:before {
  position: relative;
  top: -4px;
  right: 10px;
  bottom: 0;
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: auto;
  content: '';
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
.section__btn:hover:before {
  border-right: 1px solid #0073be;
  border-bottom: 1px solid #0073be;
}

.container_top_default2_boem h2 {
  color: #555;
  font-family: 'Roboto Condensed',sans-serif;
  text-transform: uppercase;
  letter-spacing: .1rem;
  line-height: 120%;
}
#contents_right h2 {
  margin-bottom: 30px;
  font-size: 24px;
  text-align: center;
  position: relative;
}
.container_top_default2_boem .none {
  display: none;
}
.container_top_default2_boem .price {
  display: inline-block;
  color: #111;
  padding: 0 .15em;
}
.container_top_default2_boem .price.sale_price {
  color: #dd0000;
}
.container_top_default2_boem .price.old_price {
  color: #999;
  font-weight: normal !important;
  text-decoration: line-through;
}
.container_top_default2_boem .price,
.container_top_default2_boem .price.sale_price,
.container_top_default2_boem .price.old_price {
  font-size: 1.1rem;
}
/*----------------------------------------------------------------------------
  (2) Left Nav
----------------------------------------------------------------------------*/
#nav_left a {
  color: #666;
  display: block;
}
#nav_left .nav_left--list {
  margin: 0 0 40px;
}
#nav_left #nav_search {
  border-bottom: 1px solid #ddd;
  margin: 0 0 20px;
  padding: 0 0 10px;
}
#nav_left .nav_left--list:first-child {
  padding-top: 0;
}
#nav_left .nav_left--list:last-child {
  border: none;
}
#nav_left h2 {
  font-size: 20px;
  margin-bottom: 16px;
}
#nav_left h2 a {
  color: #000;
}
#nav_left h3 {
  font-size: 14px;
  margin-bottom: 10px;
}
#nav_left #nav_category h3 {
  /*font-size: 14px;*/
}
#nav_left h3 a {
  color: #000;
}
#nav_left li, #nav_left dt, #nav_left dd {
  margin-bottom: 12px;
  font-size: 13px;
}
#nav_left dl {
  margin-bottom: 30px;
}
#nav_left dt {
  margin-top: 30px;
}
#nav_left dt:first-child {
  margin-top: 0;
}
#nav_left ul.redlist li a {
  color: #ef5350;
}
/* category */
/* size */
#nav_size ul#tab_size {
  margin-bottom: 22px;
}
#nav_size ul#tab_size li {
  display: inline-block;
  color: #b4b4b4;
  border-right: 1px solid #eee;
  line-height: 1.1;
  padding: 0 15px;
  margin-bottom: 0;
}
#nav_size ul#tab_size li:first-child {
  padding-left: 0;
}
#nav_size ul#tab_size li h3 {
  margin: 0;
  padding-bottom: 3px;
}
#nav_size ul#tab_size li.select {
  color: #000;
}
#nav_size ul#tab_size li.select h3 {
  border-bottom: 2px solid #000;
}
#nav_size ul#tab_size li:hover {
  cursor: pointer;
}
#nav_size ul#tab_size li:hover h3 {
  border-bottom: 2px solid #b4b4b4;
}

#nav_brand .nav_brand__list {
  font-size: 14px;
}

/* price */
/* color */
#nav_left #nav_color li a {
  padding: 1px 0 0 24px;
}

/*-- カラーチップ指定 --*/
li.color_col174 a {
  background: url("//sc3.locondo.jp/contents/img-default-v2-boem/pc/bg_leftnav_sprite.gif") 0 -460px no-repeat;
}
li.color_col185 a {
  background: url("//sc3.locondo.jp/contents/img-default-v2-boem/pc/bg_leftnav_sprite.gif") 0 -730px no-repeat;
}
li.color_col184 a {
  background: url("//sc3.locondo.jp/contents/img-default-v2-boem/pc/bg_leftnav_sprite.gif") 0 -490px no-repeat;
}
li.color_col188 a {
  background: url("//sc3.locondo.jp/contents/img-default-v2-boem/pc/bg_leftnav_sprite.gif") 0 -760px no-repeat;
}
li.color_col180 a {
  background: url("//sc3.locondo.jp/contents/img-default-v2-boem/pc/bg_leftnav_sprite.gif") 0 -520px no-repeat;
}
li.color_col186 a {
  background: url("//sc3.locondo.jp/contents/img-default-v2-boem/pc/bg_leftnav_sprite.gif") 0 -790px no-repeat;
}
li.color_col173 a {
  background: url("//sc3.locondo.jp/contents/img-default-v2-boem/pc/bg_leftnav_sprite.gif") 0 -850px no-repeat;
}
li.color_col168 a {
  background: url("//sc3.locondo.jp/contents/img-default-v2-boem/pc/bg_leftnav_sprite.gif") 0 -640px no-repeat;
}
li.color_col175 a {
  background: url("//sc3.locondo.jp/contents/img-default-v2-boem/pc/bg_leftnav_sprite.gif") 0 -910px no-repeat;
}
li.color_col187 a {
  background: url("//sc3.locondo.jp/contents/img-default-v2-boem/pc/bg_leftnav_sprite.gif") 0 -670px no-repeat;
}
li.color_col181 a {
  background: url("//sc3.locondo.jp/contents/img-default-v2-boem/pc/bg_leftnav_sprite.gif") 0 -940px no-repeat;
}
li.color_col183 a {
  background: url("//sc3.locondo.jp/contents/img-default-v2-boem/pc/bg_leftnav_sprite.gif") 0 -700px no-repeat;
}
li.color_col179 a {
  background: url("//sc3.locondo.jp/contents/img-default-v2-boem/pc/bg_leftnav_sprite.gif") 0 -610px no-repeat;
}
li.color_col171 a {
  background: url("//sc3.locondo.jp/contents/img-default-v2-boem/pc/bg_leftnav_sprite.gif") 0 -820px no-repeat;
}
li.color_col182 a {
  background: url("//sc3.locondo.jp/contents/img-default-v2-boem/pc/bg_leftnav_sprite.gif") 0 -970px no-repeat;
}
li.color_col170 a {
  background: url("//sc3.locondo.jp/contents/img-default-v2-boem/pc/bg_leftnav_sprite.gif") 0 -580px no-repeat;
}
li.color_col167 a {
  background: url("//sc3.locondo.jp/contents/img-default-v2-boem/pc/bg_leftnav_sprite.gif") 0 -550px no-repeat;
}
li.color_col169 a {
  background: url("//sc3.locondo.jp/contents/img-default-v2-boem/pc/bg_leftnav_sprite.gif") 0 -880px no-repeat;
}
li.color_col178 a {
  background: url("//sc3.locondo.jp/contents/img-default-v2-boem/pc/bg_leftnav_sprite.gif") 0 -1000px no-repeat;
}
li.color_col177 a {
  background: url("//sc3.locondo.jp/contents/img-default-v2-boem/pc/bg_leftnav_sprite.gif") 0 -1030px no-repeat;
}
li.color_col176 a {
  background: url("//sc3.locondo.jp/contents/img-default-v2-boem/pc/bg_leftnav_sprite.gif") 0 -1060px no-repeat;
}
li.color_col998 a {
  background: url("//sc3.locondo.jp/contents/img-default-v2-boem/pc/bg_leftnav_sprite.gif") 0 -1090px no-repeat;
}
li.color_col999 a {
  background: url("//sc3.locondo.jp/contents/img-default-v2-boem/pc/bg_leftnav_sprite.gif") 0 -1120px no-repeat;
}
li.color_col200 a {
  background: url("//sc3.locondo.jp/contents/img-default-v2-boem/pc/bg_leftnav_sprite.gif") 0 -1090px no-repeat;
}
li.color_col201 a {
  background: url("//sc3.locondo.jp/contents/img-default-v2-boem/pc/bg_leftnav_sprite.gif") 0 -1120px no-repeat;
}
#nav_left a:hover {
  text-decoration: none;
  color: #999;
}

/*----------------------------------------------------------------------------
  (3) Hero Image
----------------------------------------------------------------------------*/
#hero_image {
  display: block;
  width: 100%;
  min-height: 440px;
  position: relative;
  overflow: hidden;
}

#hero_image .slider {
  opacity: 0;
  transition: opacity .8s linear;
}

#hero_image .slider.slick-initialized {
  opacity: 1;
}

#hero_image .slick-slide {
  opacity: 0.2;
  transition-delay: .6s;
  transition-duration: .6s;
}

#hero_image .slick-slide.slick-current {
  opacity: 1;
}

#hero_image .slick-arrow {
  position: absolute;
  z-index: 100;
  top: 50%;
  color: #000;
  font-size: 4em;
  margin-top: -24px;
  opacity: 0.8;
  cursor: pointer;
  transition-duration: .4s;
}

#hero_image .slick-arrow:hover {
  opacity: 1;
}

#hero_image .ion-ios-arrow-left.slick-arrow {
  left: calc(50% - 542px);
}
#hero_image .ion-ios-arrow-right.slick-arrow {
  right: calc(50% - 542px);
}

#hero_image .slick-dots li.slick-active button:before {
  opacity: 1.0;
}



/*----------------------------------------------------------------------------
  (4) LP
----------------------------------------------------------------------------*/
.rightBlock {
  margin-bottom: 4rem;
}
.rightBlock img {
  width: 100%;
  height: auto;
}

#contents_right h2.rightBlock__title {
  font-family: 'Roboto Condensed',sans-serif;
  font-size: 2.8rem;
  color: #0073be;
  letter-spacing: .6rem;
  line-height: 1.4;
}

.rightBlock__title__subTitle {
  display: block;
  font-size: .8rem;
  color: #666;
  letter-spacing: .4rem;
}

/* アイキャッチ */
.rightBlock--images img {
  margin-bottom: 2rem;
}

/* 着用シーン */
.timeTable__item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 4rem;
}

.timeTable__item:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  bottom: -2.5rem;
  left: calc(50% - 80px);
  border-style: solid;
  border-color: #0073be transparent transparent transparent;
  border-width: 20px 80px 0 80px;
  z-index: 1;
}

.timeTable__item:last-child:after {
  display: none;
}

.timeTable__item--reverse {
  flex-direction: row-reverse;
}

.timeTable__item__pic {
  display: block;
  width: 50%;
}

.timeTable__item__text {
  display: block;
  width: 50%;
  padding: 2rem;
  box-sizing: border-box;
}

.timeTable__item--reverse .timeTable__item__text {
  text-align: right;
}

.timeTable__item__text h3 {
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 2;
}

.timeTable__item__text p {
  font-size: 1rem;
  line-height: 2;
}

/* 機能の特徴 */
.rightBlock--function img {
  margin-bottom: 2rem;
}

/* コーディネート */
.rightBlock--coordinate__eyecatch {
  margin-bottom: 2rem;
}
.coordinate__item {
  margin-bottom: 2rem;
}

/* 商品一覧 */
.all-item__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.all-item__list__item {
  width: 23%;
  margin: 1% 1% 4%;
}
.all-item__list__item img {
  width: 100%;
  height: auto;
}

.all-item__list__item .product_name {
  display: block;
  margin: .2rem 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: .05rem;
  position: relative;
  width: 100%;
  height: 36px;
  white-space: unset !important;
  text-align: center !important;
  overflow: hidden;
  text-align: justify;
  background: #FFFFFF;
}

.all-item__list__item .product_name:before,
.all-item__list__item .product_name:after {
  position: absolute;
  background: #FFFFFF;
}

.all-item__list__item .product_name:before {
  content: "...";
  bottom: 0;
  right: 0;
}

.all-item__list__item .product_name:after {
  content: "";
  height: 100%;
  width: 100%;
}

.all-item__list__item .price-wrapper {
  display: block;
  font-size: 0.6rem;
  font-family: 'Roboto Condensed', sans-serif;
  text-align: right;
}

/*----------------------------------------------------------------------------
  (99) Other
----------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------
  CMS-coordinate
----------------------------------------------------------------------------*/
/* 既存cssをクリア */
#nav_left #staff_snap div {
  padding: 0;
  border-bottom: none;  
}
/* / 既存cssをクリア */

#staff_snap {
  padding-top: 30px;
  width: 170px;
  overflow: hidden;
}
#staff_snap h2 {
  box-sizing: border-box;
  margin-bottom: 16px;
  padding: 0 12px;
  height:32px;
  line-height: 32px;
  text-align: left;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
  letter-spacing: .2em;
  color: #fff;
  background-color: #000;
  border-bottom: none;
}
#staff_snap .bx-viewport{
  padding-bottom: 64px !important;
}
#staff_snap_ul li {
  margin-bottom: 16px;
}
#staff_snap_ul img {
  margin-bottom: 4px;
  width: 170px;
  height: auto;
}
#staff_snap_ul p {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1.3;
  font-size: 13px;
}
#staff_snap_ul .text-caption {
  font-size: 11px;
  color: #888;
}
#staff_snap #snap_prevBtn ,
#staff_snap #snap_nextBtn {
  text-align: center;
}
#staff_snap #snap_prevBtn a ,
#staff_snap #snap_nextBtn a {
  height: 24px;
  font-size: 0;
  text-align: center;
}
#staff_snap #snap_prevBtn a:before, 
#staff_snap #snap_nextBtn a:before {
  position: relative;
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 2px solid #999;
  border-bottom: 2px solid #999;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#staff_snap #snap_prevBtn a:before {
  top: 10px; 
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);  
}
#staff_snap #snap_nextBtn a:before {
  top: 3px; 
}
#staff_snap #snap_prevBtn a:hover:before ,
#staff_snap #snap_nextBtn a:hover:before {
  border-color: #333;
}
#staff_snap .bx-next.disabled ,
#staff_snap .bx-prev.disabled {
  filter:alpha(opacity=10);
  -moz-opacity: 0.1;
  opacity: 0.1;
}
#staff_snap .linkToPage a {
  position: relative;
  text-align: right;
  margin-top: 8px;
  padding-right: 20px;
}
#staff_snap .linkToPage a:after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  margin:3px 0 0px 4px;
  border-right: 1px solid #666;
  border-bottom: 1px solid #666;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);  
}



/*----------------------------------------------------------------------------
  CMS-NEWS
----------------------------------------------------------------------------*/

#contents_ver4 #cms-contents{
  width: 100%;  
  margin: 0;
  padding: 0 0;
  overflow: hidden;
  border: none;
}
  #contents_ver4 #nav_left #cms-contents #arc-news{
    
    border-bottom: none;
    padding: 0;
  }
  #contents_ver4 #nav_left #cms-contents #arc-news-contents{
    border-top: 1px solid #eee;
    border-bottom: 1px solid #ddd;
    padding-bottom: 25px;
    margin-bottom: 25px;
  }

  #contents_ver4 .news-archive h2{
    line-height: 120%;
    color: #000;
    font-size: 18px;
    margin-bottom: 16px;
    letter-spacing: .05em;
    border: none;
    margin: 0;
  }
  #contents_ver4 .news-archive h6 {
    font-size: 14px;
  }
  #contents_ver4 .news-archive p {
    font-size: 10px;
  }
  #contents_ver4 .news-archive p.linkToPage{
    font-size: 12px;
    text-align: right;
    padding: 0 0 0 0;
    margin: 8px 0 0 0;
  }
  #contents_ver4 .news-archive .linkToPage a {
    position: relative;
    text-align: right;
    padding-right: 20px;
  }
  #contents_ver4 .news-archive .linkToPage a:after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    margin:6px 0 0px 4px;
    border-right: 1px solid #666;
    border-bottom: 1px solid #666;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);  
  }
  
  #contents_ver4 #cms-contents.news-archive .display-table {
    box-sizing: border-box;
    margin: 0px 0 0 0;
    width:100%;
    position:relative;
    padding: 0;
    float: none;
    border-bottom: 1px solid #eee;
  }
  #contents_ver4 #cms-contents.news-archive .display-table a{
    display:block;
    background: none;
    border: none;
    padding: 16px 0;
  }
  #contents_ver4 #cms-contents.news-archive .news-thumbnail{
    width: 50px;
    height: 50px;
    padding: 0;
  }
  #contents_ver4 #cms-contents.news-archive .news-thumbnail figure{
    width: 50px;
    height: 50px;
    overflow: hidden;
    margin: 0;
    text-align: center;
    background: #f5f5f5;
  }  
  #contents_ver4 #cms-contents.news-archive .news-title {
    padding: 0 0 0 15px;
    background: none !important;
}