@charset "UTF-8";
/* CSS Document */
/* template */
@media screen and (max-width: 1190px) {
  html {
    overflow-x: auto;
  }
}

/* パンくずリスト */
.breadcrumbs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin-top: 10px;
  font-size: 13px;
  font-size: 1.3rem;
}

.breadcrumbs h1 {
  font-family: "ヒラギノUD角ゴ W4 JIS2004";
  font-size: 13px;
  font-size: 1.3rem;
}

.breadcrumbs li {
  position: relative;
  height: 18px;
  margin: 0 10px;
  font-family: "ヒラギノUD角ゴ W4 JIS2004";
}

.breadcrumbs li:after {
  position: absolute;
  top: -7px;
  right: -15px;
  font-family: "FontAwesome";
  content: "\f105";
  font-size: 21px;
  font-size: 2.1rem;
}

.breadcrumbs li:nth-of-type(2) {
  background: transparent;
  padding: 0;
  border-radius: 0;
  margin-top: 0;
}

.breadcrumbs li:last-child:after {
  content: '';
}

.breadcrumbs span {
  font-family: "ヒラギノUD角ゴ W4 JIS2004";
}

#header_movable_area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

/* ____ 一覧ページ ここから ____ */
/* 背景画像 */
.container {
  position: relative;
}

.bg-image01 {
  position: absolute;
  top: 80px;
  right: 0;
  width: 100%;
  height: calc(100% - 100px);
  background: url(../../common/img/product_mv01.png) no-repeat top right;
  z-index: 0;
}

.bg-image02 {
  position: absolute;
  top: 80px;
  right: -611px;
  width: 100%;
  height: calc(100% - 100px);
  background: url(../../common/img/product_mv02.png) no-repeat top right;
  z-index: 0;
}

@media screen and (max-width: 1000px) {
  .bg-image02 {
    width: 0;
    height: 0;
  }
}

/* コンテンツ */
.contents {
  position: relative;
  margin: 0 80px;
  padding-bottom: 20px;
  z-index: 1;
}

@media screen and (max-width: 480px) {
  .contents {
    margin: 0 10px;
  }
}

/* トップテキスト */
.billboard-text {
  font-size: 22px;
  font-size: 2.2rem;
  line-height: 40px;
  font-weight: 700;
  font-family: "ヒラギノUD角ゴ W6 JIS2004";
  text-align: center;
  margin-bottom: 90px;
  text-shadow: 0 0 4px #fff;
}

/* カテゴリメニューボタン */
.category-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  width: 820px;
  margin: 0 auto 50px;
}

.category-menu li {
  font-family: "ヒラギノUD角ゴ W4 JIS2004";
  font-size: 16px;
  font-size: 1.6rem;
  background: #eee;
  padding: 5px 15px;
  border-radius: 20px;
  -webkit-box-shadow: 0 0 5px #eee;
          box-shadow: 0 0 5px #eee;
  cursor: pointer;
}

.category-menu li:hover {
  background: #ffe279;
}

.category-menu .active {
  background: #ffc800;
}

/* テンプレート一覧 */
.template-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 80px 160px;
}

.template-list .tile {
  position: relative;
  height: 293px;
  margin-bottom: 30px;
  background: rgba(250, 250, 250, 0.5);
  border: 8px solid #eee;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: center;
}

.template-list .list-title {
  margin: 10px 0;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 700;
  font-family: "ヒラギノUD角ゴ W6 JIS2004";
}

.template-list .img-outer {
  height: 200px;
  position: relative;
  margin-bottom: 30px;
  padding: 0 5px;
}

.template-list .img-inner-w,
.template-list .img-inner-h {
  position: absolute;
  left: 50%;
  top: 50%;
}

.template-list .img-inner-w {
  width: calc(100% - 10px);
}

.template-list .shrink.img-inner-w {
  width: calc(75% - 10px);
}

.template-list .img-inner-h {
  height: calc(100% - 5px);
}

.template-list .shrink.img-inner-h {
  height: calc(75% - 10px);
}

.template-list .list-img-w,
.template-list .list-img-h {
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.template-list .list-img-w {
  width: 100%;
  height: auto;
}

.template-list .list-img-h {
  height: 100%;
  width: auto;
}

.list-button-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  width: calc(100% + 16px);
  position: absolute;
  left: -8px;
  bottom: -8px;
  font-size: 14px;
  font-size: 1.4rem;
}

.list-button-wrap .sp-button {
  background: #eee;
  width: 50%;
  padding: 10px;
}

.list-button-wrap .sp-button:hover {
  background: #0094DA;
  color: #fff;
  opacity: 1;
}

.list-button-wrap a.pc-button {
  background: #eee;
  width: 50%;
  padding: 10px;
}

.list-button-wrap a.pc-button:hover {
  background: #20B14A;
  color: #fff;
  opacity: 1;
}

.list-button-wrap div.pc-button {
  background: #eee;
  width: 50%;
  padding: 10px;
}

.list-button-wrap div.pc-button .pc-button-list {
  display: none;
  position: absolute;
  top: 41px;
  right: 0;
  width: 50%;
  font-size: 14px;
  font-size: 1.4rem;
  white-space: nowrap;
  background: #eee;
  z-index: 1000;
}

.list-button-wrap div.pc-button .pc-button-list a {
  padding: 10px;
  display: block;
}

.list-button-wrap div.pc-button .pc-button-list a:hover {
  background: #20B14A;
  color: #fff;
  opacity: 1;
}

.tile#here {
  position: relative;
  border-color: #c1c1c1;
  background: #fff;
}

.tile#here:after {
  content: '';
  position: absolute;
  top: calc(50% - 10px);
  right: -14px;
  border: 10px solid #c1c1c1;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  z-index: -1;
}

.tile#here .img-outer {
  background: #fff;
}

.tile#here .list-button-wrap .sp-button {
  background: #c1c1c1;
}

.tile#here .list-button-wrap .sp-button:hover {
  background: #0094DA;
}

.tile#here .list-button-wrap a.pc-button {
  background: #c1c1c1;
}

.tile#here .list-button-wrap a.pc-button:hover {
  background: #20B14A;
}

.tile#here .list-button-wrap div.pc-button {
  background: #c1c1c1;
}

.tile#here .list-button-wrap div.pc-button .pc-button-list {
  background: #c1c1c1;
}

#loader {
  position: absolute;
  top: 400px;
  left: calc(50% - 16px);
  width: 32px;
  height: 32px;
}

#detail-page #loader {
  top: 150px;
}

/* ____ 一覧ページ ここまで ____ */
/* ____ 詳細ページ ここから ____ */
/* 詳細ページのみの指定、上書き */
#detail-page .header-outer {
  background-color: transparent;
}

#detail-page .container {
  padding-top: 0px;
  margin-top: 132px;
}

#detail-page .container > .wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

#detail-page .contents {
  width: calc(100% - 240px);
  margin: 0;
}

/* sidebar */
#detail-page .sidebar {
  position: relative;
  width: 240px;
  height: calc(100vh - 178px);
  overflow: hidden;
  margin-top: 44px;
}

#detail-page .sidebar.pc-active {
  border-top: 2px solid #20B14A;
}

#detail-page .sidebar.sp-active {
  border-top: 2px solid #0094DA;
}

#detail-page .sidebar .template-list {
  display: block;
  margin: 10px;
  margin-right: 25px;
}

#detail-page .sidebar .template-list .tile {
  height: 223px;
}

#detail-page .sidebar .template-list .img-outer {
  height: 130px;
}

#detail-page .sidebar .pc-button-list li:first-child a {
  font-size: 95%;
}

/* デバイス選択タブ */
.device-tab {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  padding-left: calc(50% - 130px);
  padding-right: calc(50% - 130px);
}

.device-tab.pc-active {
  border-bottom: 2px solid #20B14A;
}

.device-tab.sp-active {
  border-bottom: 2px solid #0094DA;
}

.device-tab > li {
  position: relative;
  width: 130px;
  padding: 10px 0;
  font-size: 16px;
  font-size: 1.6rem;
  text-align: center;
  background: #eee;
  color: #aaa;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.device-tab > li:hover {
  opacity: 0.7;
}

.device-tab .tab-sp {
  padding-left: 20px;
}

.device-tab .tab-sp.active {
  background: #0094DA;
}

.device-tab .tab-sp:before {
  content: "\f3cd";
  position: absolute;
  top: 7px;
  left: 15px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 22px;
}

.device-tab .tab-pc {
  padding-left: 30px;
}

.device-tab .tab-pc.active {
  background: #20B14A;
}

.device-tab .tab-pc:before {
  content: "\f109";
  position: absolute;
  top: 6px;
  left: 18px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 22px;
}

.device-tab .active {
  position: relative;
  z-index: 1;
  color: #fff;
}

.device-tab .active:hover {
  opacity: 1;
}

/* main */
.main-wrapper {
  position: relative;
  overflow: hidden;
  height: calc(100vh - 178px);
}

/* 切り替わる内容部分 */
.outer-panel {
  position: relative;
  width: 100%;
  padding-top: 20px;
}

/* テンプレート名 */
.template-name-outer {
  position: relative;
  margin: 0 auto 20px;
  width: 865px;
}

.template-name-outer:before {
  display: block;
  content: 'テンプレート名';
  width: 865px;
  margin: 0 auto;
  font-family: "ヒラギノUD角ゴ W6 JIS2004";
  font-size: 14px;
  font-size: 1.4rem;
}

.template-name-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.template-name-wrapper .descryption-mark {
  position: absolute;
  bottom: 30px;
  left: 105px;
}

.template-name-wrapper .descryption-mark:after {
  content: "\f059";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 16px;
  font-size: 1.6rem;
  color: #008cd6;
}

.name-descryption-message {
  display: none;
  position: fixed;
  padding: 10px;
  font-size: 14px;
  line-height: 1.5;
  background: #E6F3FE;
  color: #656667;
  z-index: 10;
  white-space: nowrap;
  opacity: 1;
  -webkit-box-shadow: 2px 2px 2px #e3e3e3;
          box-shadow: 2px 2px 2px #e3e3e3;
}

.template-name {
  font-size: 12px;
  font-size: 1.3rem;
  width: 840px;
  margin: 0 7px 0 0;
  padding: 5px 0;
  border: 1px solid #ccc;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* コピーボタン */
.template-name-copy {
  position: relative;
  width: 18px;
  padding-top: 5px;
  font-size: 10px;
  font-size: 1rem;
  cursor: pointer;
}

.template-name-copy:before {
  content: "\f0c5";
  position: absolute;
  top: 0;
  right: 0;
  font-family: "Font Awesome 5 Free";
  color: #989898;
  font-size: 20px;
}

/* コピー完了メッセージ */
.copy-completion-message {
  display: none;
  position: fixed;
  padding: 10px;
  font-size: 14px;
  line-height: 14px;
  background: #E6F3FE;
  color: #656667;
  z-index: 10;
  white-space: nowrap;
  opacity: 0.9;
  -webkit-box-shadow: 2px 2px 2px #e3e3e3;
          box-shadow: 2px 2px 2px #e3e3e3;
}

/* 対応サービス表記 */
.applicable-service-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  position: absolute;
  top: 0px;
  right: 30px;
}

.applicable-service-wrapper p {
  font-size: 10px;
  font-size: 1rem;
  margin-right: 5px;
}

.applicable-service-wrapper .descryption-mark {
  position: relative;
  width: 12px;
}

.applicable-service-wrapper .descryption-mark:after {
  content: "\f059";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  top: -1px;
  left: 0px;
  font-weight: 900;
  font-size: 12px;
  font-size: 1.2rem;
  color: #008cd6;
}

.applicable-service {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.applicable-service a {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  margin: 0 5px;
}

.applicable-service a:hover {
  opacity: 1;
}

.applicable-service .r3 a {
  background: url(../img/applicable-service_icon01_gray.png) no-repeat;
  background-size: contain;
  width: 20px;
}

.applicable-service .r3.active a {
  background-image: url(../img/applicable-service_icon01.png);
}

.applicable-service .rmix a {
  background: url(../img/applicable-service_icon02_gray.png) no-repeat;
  background-size: contain;
}

.applicable-service .rmix.active a {
  background-image: url(../img/applicable-service_icon02.png);
}

.applicable-service .osusume a {
  background: url(../img/applicable-service_icon03_gray.png) no-repeat;
  background-size: contain;
}

.applicable-service .osusume.active a {
  background-image: url(../img/applicable-service_icon03.png);
}

.applicable-service .rakuraku a {
  background: url(../img/applicable-service_icon04_gray.png) no-repeat;
  background-size: contain;
}

.applicable-service .rakuraku.active a {
  background-image: url(../img/applicable-service_icon04.png);
}

.applicable-service .tooltip {
  background: #aaa;
}

.applicable-service .tooltip:before {
  border-color: #aaa;
}

.applicable-service .active .tooltip {
  background: #008cd6;
}

.applicable-service .active .tooltip:before {
  border-color: #008cd6;
}

/* 対応サービス表記説明 */
.service-descryption-message {
  display: none;
  position: fixed;
  padding: 10px;
  font-size: 14px;
  line-height: 1.5;
  background: #E6F3FE;
  color: #656667;
  z-index: 10;
  white-space: nowrap;
  opacity: 0.9;
  -webkit-box-shadow: 2px 2px 2px #e3e3e3;
          box-shadow: 2px 2px 2px #e3e3e3;
}

/* タイルスタイル、お気に入り追加ボタン用 */
/* 注意書き */
.notice {
  text-align: center;
  font-size: 22px;
  font-size: 2.2rem;
  font-family: "ヒラギノUD角ゴ W5 JIS2004";
  color: #000;
  margin-bottom: 20px;
}

/* テンプレートタイプ名 */
.template-type-name {
  text-align: center;
  font-size: 24px;
  font-size: 2.4rem;
  font-family: "ヒラギノUD角ゴ W5 JIS2004";
  margin-bottom: 20px;
}

/* 切替メニュー */
/* 商品名価格切替 */
.display-type-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin: 0 auto 40px;
}

.display-type-menu .wrapper {
  position: relative;
  width: auto;
}

.display-type-menu .wrapper:nth-of-type(1) {
  margin-right: 20px;
}

.display-type-menu .wrapper:nth-of-type(3) {
  margin-left: 20px;
}

.display-type-menu .menu-name {
  height: 20px;
  font-family: "ヒラギノUD角ゴ W6 JIS2004";
  font-size: 14px;
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.display-type-menu .descryption-mark {
  position: absolute;
  top: -2px;
  left: 145px;
}

.display-type-menu .descryption-mark:after {
  content: "\f059";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 16px;
  font-size: 1.6rem;
  color: #008cd6;
  margin-left: 5px;
}

#sp .display-type-menu {
  margin-bottom: 30px;
}

/* 商品名価格タイプ説明 */
.type-descryption-message {
  display: none;
  position: fixed;
  padding: 10px;
  font-size: 14px;
  line-height: 1.5;
  background: #E6F3FE;
  color: #656667;
  z-index: 10;
  white-space: nowrap;
  opacity: 0.9;
  -webkit-box-shadow: 2px 2px 2px #e3e3e3;
          box-shadow: 2px 2px 2px #e3e3e3;
}

/* 表示タイプ切替 */
.name-display-type,
.additional-display-type,
.grid-type,
.type-select-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.name-display-type li,
.additional-display-type li,
.grid-type li,
.type-select-button li {
  font-size: 16px;
  font-size: 1.6rem;
  font-family: "ヒラギノUD角ゴ W4 JIS2004";
  background: #eee;
  padding: 5px 15px;
  margin: 0 7px;
  border-radius: 20px;
  -webkit-box-shadow: 0 0 5px #eee;
          box-shadow: 0 0 5px #eee;
  cursor: pointer;
}

.name-display-type li:first-child,
.additional-display-type li:first-child,
.grid-type li:first-child,
.type-select-button li:first-child {
  margin: 0 7px 0 0;
}

.name-display-type li:hover,
.additional-display-type li:hover,
.grid-type li:hover,
.type-select-button li:hover {
  background: #ffe279;
}

.name-display-type .active,
.additional-display-type .active,
.grid-type .active,
.type-select-button .active {
  background: #ffc800;
}

/* 一覧ページへのリンクボタン */
.list-return-button a {
  display: block;
  width: 300px;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 700;
  font-family: "ヒラギノUD角ゴ W6 JIS2004";
  text-align: center;
  background: rgba(255, 223, 0, 0.7);
  padding: 10px 0;
  margin: 0 auto 80px;
  border-radius: 50px;
}

/* テンプレート解説 */
.point-area {
  width: 800px;
  margin: 0 auto 80px;
  border: 2px solid #008cd6;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.point-area h3 {
  font-size: 22px;
  font-size: 2.2rem;
  color: #fff;
  text-align: center;
  background: #008cd6;
  padding: 10px 0;
  margin-bottom: 20px;
}

.point-area p {
  padding: 0 20px 20px;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 25px;
}

/* ランキング順位アイコン一覧 */
.ranking-design-list {
  display: none;
  width: 800px;
  margin: 0 auto 80px;
}

.ranking-design-list section {
  position: relative;
}

.ranking-design-list h3 {
  font-size: 22px;
  font-size: 2.2rem;
  text-align: center;
  margin-bottom: 40px;
  border-bottom: 3px solid #008cd6;
}

.ranking-design-list h3 + .descryption-mark {
  position: absolute;
  top: 6px;
  right: 233px;
}

.ranking-design-list h3 + .descryption-mark:after {
  content: "\f059";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 16px;
  font-size: 1.6rem;
  color: #008cd6;
  margin-left: 5px;
}

.ranking-design-list h4 {
  font-size: 18px;
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 20px;
}

.ranking-design-list h4 + .descryption-mark {
  position: absolute;
}

.ranking-design-list h4 + .descryption-mark:after {
  content: "\f059";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 16px;
  font-size: 1.6rem;
  color: #008cd6;
  margin-left: 5px;
}

.ranking-design-list h4.a + .descryption-mark {
  top: 2px;
  right: 294px;
}

.ranking-design-list h4.b + .descryption-mark {
  top: 2px;
  right: 239px;
}

.ranking-design-list h4.c + .descryption-mark {
  top: 2px;
  right: 239px;
}

.ranking-design-list h4.d + .descryption-mark {
  top: 2px;
  right: 311px;
}

.ranking-design-list h4.e + .descryption-mark {
  top: 2px;
  right: 284px;
}

.ranking-design-list .wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 800px;
  margin-bottom: 40px;
}

.ranking-design-list .tile {
  width: calc(20% - 20px);
  margin: 5px;
  padding: 10px 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
          box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
}

.ranking-design-list h5 {
  font-size: 14px;
  font-size: 1.4rem;
  text-align: center;
  margin-bottom: 10px;
}

.ranking-design-list .name {
  font-size: 12px;
  font-size: 1.2rem;
  text-align: center;
  height: 50px;
  margin-bottom: 10px;
  border-bottom: 2px dashed #EEE;
}

.ranking-design-list .name span {
  font-size: 10px;
  font-size: 1rem;
}

.ranking-design-list img {
  width: 140px;
  height: 40px;
  margin: 0 auto;
}

/* ランキングアイコン説明 */
.ranking-descryption-message {
  display: none;
  position: fixed;
  padding: 10px;
  font-size: 14px;
  text-align: left;
  line-height: 1.5;
  background: #E6F3FE;
  color: #656667;
  z-index: 10;
  white-space: nowrap;
  opacity: 0.9;
  -webkit-box-shadow: 2px 2px 2px #e3e3e3;
          box-shadow: 2px 2px 2px #e3e3e3;
}

/* ランキングカラー一覧 */
.ranking-color-list {
  display: none;
  position: relative;
  width: 800px;
  margin: 0 auto 80px;
}

.ranking-color-list h3 {
  font-size: 22px;
  font-size: 2.2rem;
  text-align: center;
  margin-bottom: 40px;
  border-bottom: 3px solid #008cd6;
}

.ranking-color-list h3 + .descryption-mark {
  position: absolute;
  top: 6px;
  right: 263px;
}

.ranking-color-list h3 + .descryption-mark:after {
  content: "\f059";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 16px;
  font-size: 1.6rem;
  color: #008cd6;
  margin-left: 5px;
}

.ranking-color-list .wrapper {
  width: 800px;
  margin-bottom: 40px;
}

.ranking-color-list .tile {
  width: calc(100% - 30px);
  margin: 10px 5px;
  padding: 10px;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
          box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
}

.ranking-color-list h4 {
  font-size: 14px;
  font-size: 1.4rem;
  text-align: center;
  margin-bottom: 10px;
}

.ranking-color-list .name {
  font-size: 12px;
  font-size: 1.2rem;
  text-align: center;
  height: 30px;
  margin-bottom: 10px;
  border-bottom: 2px dashed #EEE;
}

.ranking-color-list img {
  width: 770px;
  height: 40px;
  margin: 0 auto;
}

/* sp 固有設定*/
.outer-panel .sp-area .sp-frame,
.outer-panel .sp-area .sp-frame-s {
  position: relative;
  width: 500px;
  height: 400px;
  margin: 0 auto 80px;
  background: url(../img/iPhone_mockup.png) no-repeat center top;
}

.outer-panel .sp-area .sp-frame .iframe-wrapper,
.outer-panel .sp-area .sp-frame-s .iframe-wrapper {
  position: absolute;
  top: 120px;
  left: 94px;
}

.outer-panel .sp-area .sp-frame iframe,
.outer-panel .sp-area .sp-frame-s iframe {
  width: 100%;
  height: 100%;
}

.outer-panel .sp-area .sp-frame-s {
  background-image: url(../img/iPhone_mockup_s.png);
}

.outer-panel .sp-area .sp-frame-s .iframe-wrapper {
  top: 50px;
  left: 178px;
}

/* pc 固有設定*/
.pc-area {
  margin: 0 auto;
}

.pc-area .iframe-wrapper {
  margin: 0 auto 80px;
}

.pc-area .iframe-wrapper iframe {
  width: 100%;
  height: 100%;
}

/* perfect-scrollbar */
.ps > .ps__rail-x,
.ps > .ps__rail-y {
  background: #eee;
}

.main-wrapper.ps .ps__rail-y {
  opacity: 1;
}

.main-wrapper.ps .ps__rail-y,
.main-wrapper.ps .ps__rail-y:hover,
.main-wrapper.ps .ps__rail-y:focus,
.main-wrapper.ps .ps__rail-y.ps--clicking {
  background-color: #eee;
}

.ps__thumb-y {
  width: 7px;
}

.ps__rail-y {
  width: 11px;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
  background-color: #999;
  width: 7px;
}

/* ____ 詳細ページここまで ____ */
/*# sourceMappingURL=style.css.map */