SPトップ改修（STEP1）

sp/shared/css/common.css

@@ -871,10 +871,6 @@ a:visited {
  font-weight: bold;
 }
 
-#footer #subnavi > div {
- display: none;
-}
-
 #footer #subnavi strong,
 #footer #subnavi em {
  display: block;
@@ -887,6 +883,7 @@ a:visited {
  font-size: 128.6%;
 }
 
+/*
 #footer #subnavi strong:after {
  content: "\e910";
  display: inline-block;
@@ -900,7 +897,7 @@ a:visited {
  -moz-border-radius: 50%;
  text-align: center;
  font-family: "icomoon" !important;
-}
+}*/
 
 #footer #subnavi strong.active:after {
  transform: rotate(-90deg);
@@ -1993,13 +1990,14 @@ a:visited {
 
 -----------------------------------------------------------*/
 .toppage #showcase p {
- padding: 1em;
+ padding: 10px 10px 0 10px;
  font-size: 85.7%;
+ color: #00b7ce;
 }
 
 .toppage #showcase p:nth-child(2) {
- padding-bottom: 0;
- color: #00b7ce;
+ padding-bottom: 10px;
+ color: #333;
 }
 
 .toppage #showcase p:nth-child(3) {
@@ -2028,13 +2026,12 @@ a:visited {
 }
 
 .toppage .section .tbl {
- display: table;
- border-collapse: separate;
- border-spacing: 1em;
+ display: block;
+ margin: 10px auto;
 }
 
 .toppage .section .tbl .row {
- display: table-row;
+ display: flex;
 }
 
 .toppage .section .tbl .box {
@@ -2043,13 +2040,12 @@ a:visited {
  background-color: #fff;
  box-sizing: border-box;
  border: solid 1px #e1e4ed;
+ width: 33.3333%;
 }
 
 .toppage .section .tbl .box .ttl {
- margin-bottom: .5em;
- border-bottom: solid 1px #ebeced;
  text-align: center;
- font-size: 128.6%;
+ font-size: 110%;
  color: #00b7ce;
 }
 
@@ -2060,9 +2056,9 @@ a:visited {
 .toppage .section .tbl .box .ttl:before {
  content: "";
  display: block;
- width: 60px;
- height: 60px;
- margin: 0 auto .2em;
+ width: 50px;
+ height: 50px;
+ margin: 0 auto 8px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
@@ -2180,3 +2176,13 @@ table#table02 td.no {
  color: #ff5b4b;
  font-weight: bold;
 }
+
+/* slilder */
+.slick-dotted.slick-slider{
+ padding:0 0 30px 0;
+ height: 190px;
+}
+
+.slick-dots{
+position: relative;
+}
\ No newline at end of file

sp/shared/css/slick.css

+/*!
+ * Slider
+ */
+/* Slider */
+.main-MV .slick-slider {
+ position: relative;
+ display: block;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ -ms-touch-action: pan-y;
+ touch-action: pan-y;
+ -webkit-tap-highlight-color: transparent;
+ overflow: hidden;
+}
+
+.main-MV .slick-list {
+ position: relative;
+ display: block;
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+}
+
+.slick-list:focus {
+ outline: none;
+}
+
+.slick-list.dragging {
+ cursor: pointer;
+ cursor: hand;
+}
+
+.slick-slider .slick-track,
+.slick-slider .slick-list {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+}
+
+.slick-track {
+ position: relative;
+ left: 0;
+ top: 0;
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.slick-track:before,
+.slick-track:after {
+ content: "";
+ display: table;
+}
+
+.slick-track:after {
+ clear: both;
+}
+
+.slick-loading .slick-track {
+ visibility: hidden;
+}
+
+.slick-slide {
+ float: left;
+ height: 100%;
+ min-height: 1px;
+ -webkit-transition: opacity .3s ease;
+ transition: opacity .3s ease;
+ opacity: .5;
+ display: none;
+}
+
+[dir="rtl"] .slick-slide {
+ float: right;
+}
+
+.slick-slide a {
+ display: block;
+ outline: none;
+}
+
+.slick-slide a {
+ width: 100% !important;
+}
+
+.slick-slide[aria-hidden*="false"] {
+ opacity: 1;
+}
+
+.slick-slide.slick-loading img {
+ display: none;
+}
+
+.slick-slide.dragging img {
+ pointer-events: none;
+}
+
+.slick-initialized .slick-slide {
+ display: block;
+}
+
+.slick-loading .slick-slide {
+ visibility: hidden;
+}
+
+.slick-vertical .slick-slide {
+ display: block;
+ height: auto;
+ border: 1px solid transparent;
+}
+
+.slick-arrow.slick-hidden {
+ display: none;
+}
+
+/* Slider */
+.slick-loading .slick-list {
+ background: #fff url("/assets/libs/slick/ajax-loader.gif") center center no-repeat;
+}
+
+/* Icons */
+@font-face {
+ font-family: "slick";
+ src: url("/assets/libs/slick/fonts/slick.eot");
+ src: url("/assets/libs/slick/fonts/slick.eot?#iefix") format("embedded-opentype"), url("/assets/libs/slick/fonts/slick.woff") format("woff"), url("/assets/libs/slick/fonts/slick.ttf") format("truetype"), url("/assets/libs/slick/fonts/slick.svg#slick") format("svg");
+ font-weight: normal;
+ font-style: normal;
+}
+
+/* Arrows */
+.slick-prev,
+.slick-next {
+ position: absolute;
+ z-index: 999;
+ display: block;
+ height: 40px;
+ width: 40px;
+ border-radius: 40px;
+ line-height: 0px;
+ font-size: 0px;
+ cursor: pointer;
+ background: transparent;
+ color: transparent;
+ top: 50%;
+ -webkit-transform: translate(0, -50%);
+ transform: translate(0, -50%);
+ background-color: transparent;
+ padding: 0;
+ border: none;
+ outline: none;
+}
+
+.slick-prev:hover,
+.slick-prev:focus,
+.slick-next:hover,
+.slick-next:focus {
+ outline: none;
+}
+
+.slick-prev:hover:before,
+.slick-prev:focus:before,
+.slick-next:hover:before,
+.slick-next:focus:before {
+ opacity: 1;
+}
+
+.slick-prev.slick-disabled:before,
+.slick-next.slick-disabled:before {
+ opacity: 0.25;
+}
+
+.slick-prev:before,
+.slick-next:before {
+ content: "";
+ position: absolute;
+ top: 12px;
+ display: block;
+ width: 20px;
+ height: 20px;
+ border-top: solid 3px #6B6E71;
+ border-right: solid 3px #6B6E71;
+ border-radius: 0px;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+.slick-prev:before {
+ box-shadow: 2px -2px 2px rgb(255 255 255 / 20%);
+}
+
+.slick-next:before {
+ box-shadow: 2px -2px 2px rgb(255 255 255 / 20%);
+}
+
+.main-MV .slick-prev:before {
+ margin-right: -40px;
+}
+
+.main-MV .slick-next:before {
+ margin-left: -40px;
+}
+
+.slick-prev {
+ left: 5px;
+ top: 90px;
+}
+
+[dir="rtl"] .slick-prev {
+ left: auto;
+ right: 0px;
+}
+
+.slick-prev:before {
+ left: 5px;
+ -webkit-transform: rotate(225deg);
+ transform: rotate(225deg);
+}
+
+[dir="rtl"] .slick-prev:before {
+ left: 0px;
+ -webkit-transform: rotate(225deg);
+ transform: rotate(225deg);
+}
+
+.slick-next {
+ right: 5px;
+ top: 90px;
+}
+
+[dir="rtl"] .slick-next {
+ left: 0px;
+ right: auto;
+}
+
+.slick-next:before {
+ right: 5px;
+ -webkit-transform: rotate(45deg);
+ transform: rotate(45deg);
+}
+
+[dir="rtl"] .slick-next:before {
+ right: 0px;
+ -webkit-transform: rotate(45deg);
+ transform: rotate(45deg);
+}
+
+/* Dots */
+.slick-dotted.slick-slider {
+ padding: 8px 0 30px 0;
+ z-index: 99;
+}
+
+.slick-dots {
+ position: absolute;
+ bottom: 0;
+ list-style: none;
+ display: block;
+ text-align: center;
+ padding: 0;
+ margin: 0;
+ width: 100%;
+}
+
+.slick-dots li {
+ position: relative;
+ display: inline-block;
+ height: 30px;
+ width: 30px;
+ margin: 0;
+ padding: 0;
+ cursor: pointer;
+}
+
+.slick-dots li button {
+ border: 0;
+ background: transparent;
+ display: block;
+ height: 30px;
+ width: 30px;
+ outline: none;
+ line-height: 0px;
+ font-size: 0px;
+ color: transparent;
+ padding: 5px;
+ cursor: pointer;
+}
+
+.slick-dots li button:hover,
+.slick-dots li button:focus {
+ outline: none;
+}
+
+.slick-dots li button:hover:before,
+.slick-dots li button:focus:before {
+ opacity: 1;
+}
+
+.slick-dots li button:before {
+ position: absolute;
+ top: 0;
+ left: 0;
+ content: "";
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ width: 10px;
+ height: 10px;
+ border-radius: 10px;
+ text-align: center;
+ background-color: #DCDDDD;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-box-shadow: 0 3px 6px rgba(51, 51, 51, 0.2);
+ box-shadow: 0 3px 6px rgba(51, 51, 51, 0.2);
+}
+
+.slick-dots li.slick-active button:before {
+ background-color: #be648e;
+}
+
+.slick-slider div {
+ transition: none;
+}
+
+.slick-slider,
+.main-MV,
+.availableList,
+.recommendList,
+.beginnersList {
+ opacity: 0;
+ transition: opacity .3s ease;
+}
+
+.slick-initialized {
+ opacity: 1;
+}
+
+.slick-prev,
+.slick-next {
+ position: absolute;
+}

sp/shared/js/common.js

@@ -18,7 +18,7 @@ $(function(){
       return false;
     }
   });
-  /* footer menu */
+  /* footer menu 
   $('#subnavi strong').click(function() {
     if ($('#subnavi > div').css('display') == 'block') {
       $('#subnavi > div').slideUp("fast");
@@ -29,7 +29,7 @@ $(function(){
       $('#subnavi strong').addClass('active');
       return false;
     }
-  });
+  });*/
 
   var header_height = 0;