@charset "UTF-8";
/*____________________________________________________________________________

SITE TITLE: OASYS TOP
TITLE: トップページ　スマホ用
UPDATED:2018.12 CMS
____________________________________________________________________________*/

/*----------------------------------------------------------------------------
  (1) Box Layout & Top Page Common Setting
----------------------------------------------------------------------------*/
.container_top {
  overflow: hidden;
}
#item_ranking,
#remind {
  overflow: hidden;
}
.main_content__section {
  margin: 0 0 40px;
  padding: 0 0 40px;
  border-bottom: 10px solid #EEE;
}

.container_top .main_content__section:first-of-type {
  margin: 40px 0;
}
.container_top .main_content__section:last-of-type {
  margin: 40px 0;
  padding: 0;
  border-bottom: none;
}

.main_content__section .section__btn {
  position: relative;
  display: block;
  width: 35%;
  font-size: 14px;
  text-align: center;
  margin: 24px auto 0;
  padding: 14px 0;
  border: 1px solid #666;
}
.main_content__section .section__btn.section__btn--instagram{
  /* アイコン分ずらす */
  padding-right: 1rem;
}

.main_content__section .section__btn:after {
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: auto;
  content: '';
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
}

.section__btn.section__btn--instagram .ion-social-instagram-outline {
  font-size: 1.2em;
  position: relative;
  top: 1px;
  padding-right: 5px;
}


.instafeed.icon-instagram:before {
  font-size: 18px;
  vertical-align: sub;
}

#remind {
  margin: 40px 0;
}
/*----------------------------------------------------------------------------
  (1.5) LP
----------------------------------------------------------------------------*/

.mainBlock {
  margin-bottom: 2rem;
}

.mainBlock img {
  width: 100%;
  height: auto;
}

.mainBlock__title {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 2rem;
  color: #0073be;
  letter-spacing: .4rem;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 1rem;
}

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

/* アイキャッチ */

.mainBlock--images img {
  margin-bottom: 1rem;
}

/* 着用シーン */

.timeTable__item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

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

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

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

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

.timeTable__item__text h3 {
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.8;
}

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

/* 機能の特徴 */

.mainBlock--function img {
  margin-bottom: 2rem;
}

/* コーディネート */
.mainBlock--coordinate__eyecatch {
  margin-bottom: 1rem;
}

.coordinate__item {
  margin-bottom: 1rem;
}

.youtube-responsive {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.youtube-responsive iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

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

.all-item__list__item {
  width: 48%;
  margin-bottom: 5%;
}

.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: 2.2rem;
  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;
}

.all-item__list__item .price,
.all-item__list__item .price.sale_price,
.all-item__list__item .price.old_price {
  font-size: 1.1rem;
}
.all-item__list__item .price.sale_price {
  color: #dd0000;
}
.all-item__list__item .price.old_price {
   color: #999;
   font-weight: normal !important;
   text-decoration: line-through;
 }
/*----------------------------------------------------------------------------
  (2) Hero Image & Service Msg
----------------------------------------------------------------------------*/
#service_msg {
  text-align: center;
  font-size: 10px;
  font-weight: normal;
  color: #6D6F71;
  margin: 0 0 8px;
  letter-spacing: 0.1em;
}
/*----------------------------------------------------------------------------
  (4) Category, Price
----------------------------------------------------------------------------*/
.category-list-block,
#price ul.list-block {
  border-bottom: 1px solid #D7D7D8;
}
.list-block .title {
  color: #1b1b1b;
}
.list-block .arw:after {
  top: 0;
}

/*----------------------------------------------------------------------------
  (5) Remind
----------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------
  (9) New Arrival / Pre Order
----------------------------------------------------------------------------*/
.carousel-wrapper {
  padding: 0 10px;
}
.carousel-wrapper .carousel {
  width: 100%;
}

.carousel-wrapper .carousel li {
  width: 30.333%;
  margin-right: 0.4rem;
}
.container_top .carousel-wrapper .carousel li:first-child {
  margin-left: 0px;
}
.container_top .carousel-wrapper .carousel li:last-child {
  margin-left: 0px;
}
.container_top .carousel-wrapper .slick-dots li {
  float: none;
  width: 20px;
}

.container_top .carousel-wrapper .slick-arrow {
  position: absolute;
  z-index: 100;
  top: 40%;
  color: #000;
  font-size: 2.4em;
  opacity: 0.8;
  cursor: pointer;
  transition-duration: .4s;
}

.container_top .carousel-wrapper .slick-arrow:hover {
  opacity: 1;
}

.container_top .carousel-wrapper .ion-ios-arrow-left.slick-arrow {
  left: -2%;
}

.container_top .carousel-wrapper .ion-ios-arrow-right.slick-arrow {
  right: -2%;
}
.container_top .carousel-wrapper .slick-dots li {
  margin: 0;
}
/*----------------------------------------------------------------------------
  (99) Other
----------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------
  CMS-coordinate
----------------------------------------------------------------------------*/
#recommend_contents {
  margin-bottom: 20px;
}
#staff_snap {
  margin-top: 32px;
}
#staff_snap h2 {
  box-sizing: border-box;
  margin-bottom: 10px;
  width: 100%;
  height: 32px;
  padding-top: 9px;
  text-align: center;
  font-size: 14px;
  font-weight: bold !important;
  letter-spacing: .2em;
  background-color: #000;
  color: #fff;  
}
#staff_snap_ul {
  margin-bottom: 8px;
  width: 100%;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  white-space: nowrap;  
}
#staff_snap_ul li {
  display: inline-block;
  vertical-align: top;
  margin-left: 10px;
  margin-right: -4px;
  width: 130px;
}
#staff_snap_ul li:last-child {
  margin-right: 40px;
}
#staff_snap_ul a {
  display: block;
  width: 130px;
  overflow: hidden;  
  text-decoration: none;  
}
#staff_snap_ul img {
  margin-bottom: 4px;
  width: 130px;
  height: auto;
}
#staff_snap_ul p {
  margin-bottom: 0;
  font-size: 13px;
  text-overflow: ellipsis;  
  overflow: hidden;
  white-space: nowrap;
  color: #2b2b2b;
}
.wrap_staff_snap_slider {
  position: relative;
}  
.wrap_staff_snap_slider .loading {
  position: absolute;
  top: 71px;
  left: 50%;
  transform: translateX(-50%);
}
#staff_snap_ul .text-caption {
  font-size: 11px;
  color: #888;
}
#staff_snap .linkToPage,#cms-contents .linkToPage{
  margin-top: 12px;
  text-align: right;
}
#staff_snap .linkToPage a, #cms-contents .linkToPage a {
  position: relative;
  margin-top: -8px;
  padding-right: 28px;
}
#staff_snap .linkToPage a:after, #cms-contents .linkToPage a:after {
position: absolute;
  top: -10%;
  right: 16px;
  bottom: 0;
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: auto;
  content: '';
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
}
/*----------------------------------------------------------------------------
  CMS-NEWS
----------------------------------------------------------------------------*/

#category {
  border: none !important;
}
#smp_main_content #cms-contents{
  margin:20px 0 0 0;
  padding: 0 0 0 0;
  overflow: hidden;
}
#smp_main_content #cms-contents.news-archive #arc-news {
  border-bottom: none;
}
#arc-news-contents{
  border-top: 1px solid #D7D7D8;
}
#smp_main_content .news-archive h2{
  border: none;
  text-align: center;
  margin: 0px 0 16px 0;
  padding: 0;
}
#smp_main_content #cms-contents .news-title {
  background: none !important;
}
#smp_main_content #cms-contents.news-archive .display-table {
  box-sizing: border-box;
  margin: 0px 0 0 0;
  width:100%;
  position:relative;
  padding: 0;
  border-top:none;
  border-bottom: 1px solid #D7D7D8;
}
#smp_main_content #cms-contents.news-archive .display-table:after {
  position: absolute;
  right: 16px;
  bottom: 0;
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: auto;
  content: '';
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
}

#smp_main_content #cms-contents.news-archive .display-table a{
	display:block;
  padding: 16px;
}
#smp_main_content #cms-contents.news-archive .news-thumbnail{
  width: 80px;
}
#smp_main_content #cms-contents.news-archive .news-thumbnail figure{
  width: 80px;
  height: 80px;
  overflow: hidden;
  margin: 0;
  text-align: center;
}