@charset "UTF-8";
/*font*/
@font-face {
  font-family: 'Gravity Regular';
  font-style: normal;
  font-weight: normal;
  src: local("Gravity Regular"), url("..//font/Gravity-Regular.woff") format("woff"); }
@font-face {
  font-family: 'Gravity Book';
  font-style: normal;
  font-weight: normal;
  src: local("Gravity Book"), url("..//font/Gravity-Book.woff") format("woff"); }
@font-face {
  font-family: 'Gravity Bold';
  font-style: normal;
  font-weight: normal;
  src: local("Gravity Bold"), url("..//font/Gravity-Bold.woff") format("woff"); }
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  line-height: 1;
  vertical-align: baseline;
  background: transparent;
  font-family: 'GJ_m', "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }

html {
  font-size: 62.5%; }


body {
  line-height: 1.6;
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  color: #000;
  width: 100%;
 }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

ul, li {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  color: #000;
  transform: rotate(0.05deg); }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

.cf:after {
  content: " ";
  display: block;
  clear: both; }

img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto; }

body {
  position: relative; }

img {
  max-width: 100%;
  height: auto; }

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; }

.lato {
  font-family: 'Lato', sans-serif; }

.sp {
  display: none; }

.pc {
  display: block; }

#header {
  background-color: #fff; }

.header_in {
  max-width: 1190px;
  width: 100%;
  margin: 0 auto;
  padding: 30px 0;
  position: relative; }
  .header_in h1 {
    text-align: center; }
  .header_in #share {
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translate(0%, -50%);
    transform: translate(0%, -50%); }
    .header_in #share p {
      cursor: pointer; }
      .header_in #share p img {
        width: 35px; }
  .header_in .share_area {
    display: none;
    background-color: #fff;
    border: 1px solid #cccccc;
    width: 200px;
    position: absolute;
    right: 0;
    top: 45px;
    padding: 30px 18px; }
    .header_in .share_area ul:first-of-type {
      padding-bottom: 20px;
      border-bottom: 1px solid #cccccc; }
      .header_in .share_area ul:first-of-type li a {
        -webkit-justify-content: center;
        justify-content: center; }
    .header_in .share_area ul:last-of-type {
      padding-top: 20px; }
      .header_in .share_area ul:last-of-type li a {
        padding-left: 8px; }
    .header_in .share_area ul .icon_twitter {
      width: 16px; }
    .header_in .share_area ul .icon_fb {
      width: 10px; }
    .header_in .share_area ul .icon_instagram {
      width: 14px; }
    .header_in .share_area ul li {
      margin-bottom: 10px; }
      .header_in .share_area ul li:last-child {
        margin-bottom: 0; }
      .header_in .share_area ul li a {
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        border-radius: 4px;
        border: 1px solid #cccccc;
        padding: 12px 5px;
        text-decoration: none; }
        .header_in .share_area ul li a i {
          margin-right: 5px; }
        .header_in .share_area ul li a span {
          font-size: 12px;
          font-size: 1.2rem;
          letter-spacing: 0; }

article {
  padding-top: 90px;
  background-color: #fff; }

.line {
  height: 150px;
  width: 1px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  margin-bottom: 30px; }
  .line:after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #cccccc;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: scroll 1.7s infinite;
    animation: scroll 1.7s infinite; }

@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translateY(-100%); }
  100% {
    -webkit-transform: translateY(100%); } }
@keyframes scroll {
  0% {
    transform: translateY(-100%); }
  100% {
    transform: translateY(100%); } }

#cover_wrap {
  height: 100vh;
  overflow-y: auto; }


.mCSB_scrollTools {
  margin: 13vh 2vw 13vh 0;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 1; }

.mCSB_inside > .mCSB_container {
  margin: 0; }

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #444444;
  width: 6px; }

.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #444444; }

.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
  background-color: #444444; }

.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #cccccc;
  width: 6px; }

.container {
  max-width: 1190px;
  width: 100%;
  margin: 0 auto; }

@keyframes show {
  0% {
    opacity: 0;
    transform: scale(1.3, 1.3); }
  100% {
    opacity: 1;
    transform: scale(1, 1); } }
#flow-obi {
  width:100%;
  text-align:center;
  background: #fff;
  position:fixed;
  z-index: 100;
  bottom:0;
}
#fixed_nav {
  position: fixed;
  top: 20%;
  left: 50px;
  border: 2px solid #cccccc;
  padding: 40px 22px 40px 20px;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 1000; }
  #fixed_nav ul li {
    padding-bottom: 40px; }
    #fixed_nav ul li:last-child {
      padding-bottom: 0px; }
    #fixed_nav ul li span {
      border-left: 1px solid transparent;
      display: inline-block;
      padding-left: 2px;
      cursor: pointer; }
      #fixed_nav ul li span:hover {
        border-left: 1px solid #000; }
      #fixed_nav ul li span img {
        width: 9px;
        height: auto; }

#lead {
  padding-bottom: 95px; }
  #lead .lead_tit {
    font-family: 'Gravity Bold';
    font-size: 40px;
    font-size: 4.0rem;
    line-height: 1;
    text-align: center;
    letter-spacing: 0.12;
    margin-bottom: 70px; }
    #lead .lead_tit span {
      font-family: 'Gravity Bold';
      display: inline-block;
      opacity: 0;
      transform: scale(1.3, 1.3); }
    #lead .lead_tit.is-active span:nth-child(0) {
      animation: show 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) forwards 0s; }
    #lead .lead_tit.is-active span:nth-child(1) {
      animation: show 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) forwards 0.1s; }
    #lead .lead_tit.is-active span:nth-child(2) {
      animation: show 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) forwards 0.2s; }
    #lead .lead_tit.is-active span:nth-child(3) {
      animation: show 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) forwards 0.3s; }
    #lead .lead_tit.is-active span:nth-child(4) {
      animation: show 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) forwards 0.4s; }
    #lead .lead_tit.is-active span:nth-child(5) {
      animation: show 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) forwards 0.5s; }
    #lead .lead_tit.is-active span:nth-child(6) {
      animation: show 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) forwards 0.6s; }
    #lead .lead_tit.is-active span:nth-child(7) {
      animation: show 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) forwards 0.7s; }
    #lead .lead_tit.is-active span:nth-child(8) {
      animation: show 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) forwards 0.8s; }
    #lead .lead_tit.is-active span:nth-child(9) {
      animation: show 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) forwards 0.9s; }
    #lead .lead_tit.is-active span:nth-child(10) {
      animation: show 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) forwards 1s; }
    #lead .lead_tit.is-active span:nth-child(11) {
      animation: show 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) forwards 1.1s; }
    #lead .lead_tit.is-active span:nth-child(12) {
      animation: show 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) forwards 1.2s; }
    #lead .lead_tit.is-active span:nth-child(13) {
      animation: show 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) forwards 1.3s; }
    #lead .lead_tit.is-active span:nth-child(14) {
      animation: show 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) forwards 1.4s; }
    #lead .lead_tit.is-active span:nth-child(15) {
      animation: show 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) forwards 1.5s; }
    #lead .lead_tit.is-active span:nth-child(16) {
      animation: show 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) forwards 1.6s; }
    #lead .lead_tit.is-active span:nth-child(17) {
      animation: show 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) forwards 1.7s; }
    #lead .lead_tit.is-active span:nth-child(18) {
      animation: show 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) forwards 1.8s; }
    #lead .lead_tit.is-active span:nth-child(19) {
      animation: show 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) forwards 1.9s; }
    #lead .lead_tit.is-active span:nth-child(20) {
      animation: show 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) forwards 2s; }
    #lead .lead_tit.is-active span:nth-child(21) {
      animation: show 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) forwards 2.1s; }
    #lead .lead_tit.is-active span:nth-child(22) {
      animation: show 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) forwards 2.2s; }
    #lead .lead_tit.is-active span:nth-child(23) {
      animation: show 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) forwards 2.3s; }
    #lead .lead_tit.is-active span:nth-child(24) {
      animation: show 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) forwards 2.4s; }
    #lead .lead_tit.is-active span:nth-child(25) {
      animation: show 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) forwards 2.5s; }
    #lead .lead_tit.is-active span:nth-child(26) {
      animation: show 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) forwards 2.6s; }
    #lead .lead_tit.is-active span:nth-child(27) {
      animation: show 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) forwards 2.7s; }
    #lead .lead_tit.is-active span:nth-child(28) {
      animation: show 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) forwards 2.8s; }
    #lead .lead_tit.is-active span:nth-child(29) {
      animation: show 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) forwards 2.9s; }
    #lead .lead_tit.is-active span:nth-child(30) {
      animation: show 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) forwards 3s; }
    #lead .lead_tit.is-active span:nth-child(31) {
      animation: show 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) forwards 3.1s; }
    #lead .lead_tit.is-active span:nth-child(32) {
      animation: show 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) forwards 3.2s; }
    #lead .lead_tit.is-active span:nth-child(33) {
      animation: show 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) forwards 3.3s; }
  #lead .lead_txt {
    line-height: 2.25;
    text-align: center; }

@media screen and (max-width: 900px) {
  #lead .lead_tit {
    font-size: calc(40 / 900 * 100vw); } }
h3 {
  font-family: 'Gravity Book';
  font-size: 34px;
  font-size: 3.4rem;
  letter-spacing: 0.1em;
  text-align: center;
  padding-bottom: 25px;
  line-height: 1; }

.main_txt {
  text-align: center;
  line-height: 2.25;
  padding-bottom: 70px;
  max-width: 800px;
  margin: 0 auto; }

.flex {
  display: flex;
  flex-wrap: wrap; }

@keyframes show_img {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.swiper1 {
  opacity: 0; }
  .swiper1.is-active {
    animation: show_img 1s forwards .3s; }

.swiper2 {
  opacity: 0; }
  .swiper2.is-active {
    animation: show_img 1s forwards .6s; }

.slide {
  position: relative; }
 


  .slide .swiper-container img {
    width: 100%;
    height: auto; }

.color_li {
  font-size: 0;
  padding-top: 10px; }
  .color_li li {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 26px; }
    .color_li li:last-child {
      margin-right: 0px; }
.itemlist ul {
  padding-left: 50px;
  padding-bottom: 20px;
  position: relative; }
  .itemlist ul:before {
    font-family: 'Gravity Bold';
    font-size: 24px;
    font-size: 2.4rem;
    line-height: 1;
    position: absolute;
    top: 0;
    left: 0; }
  .itemlist ul.num1:before {
    content: "0I"; }
  .itemlist ul.num2:before {
    content: "02"; }
  .itemlist ul.num3:before {
    content: "03"; }
  .itemlist ul.num4:before {
    content: "04"; }
  .itemlist ul.num5:before {
    content: "05"; }
  .itemlist ul li {
    padding-bottom: 30px;
    display: flex;
    flex-wrap: wrap; }
    .itemlist ul li .item_info {
      width: calc(100% - 100px); }
      .itemlist ul li .item_info .name {
        font-size: 18px;
        font-size: 1.8rem;
        padding-bottom: 12px; }
      .itemlist ul li .item_info .code {
        font-size: 14px;
        font-size: 1.4rem;
        font-family: 'Gravity Regular';
        padding-bottom: 12px; }
      .itemlist ul li .item_info .price {
        font-size: 14px;
        font-size: 1.4rem; }
    .itemlist ul li .btn {
      width: 80px; }
      .itemlist ul li .btn a {
        display: block;
        color: #fff;
        background-color: #000;
        text-align: center;
        font-family: 'Lato', sans-serif;
        letter-spacing: 0.1em;
        line-height: 1;
        padding: 4px 0;
        text-decoration: none; }


#bottoms {
  padding-bottom: 150px; }
  #bottoms #bottoms_block01 {
    max-width: 1160px;
    width: 100%;
    padding-bottom: 100px; }
    #bottoms #bottoms_block01 .bottoms01 {
      width: 50.4%; }
      #bottoms #bottoms_block01 .bottoms01 .num {
        top: -20px;
        left: 10px; }
      #bottoms #bottoms_block01 .bottoms01 .plus {
        right: 20px;
        top: 20px; }
      #bottoms #bottoms_block01 .bottoms01 .other ul li:first-child {
        padding-top: 50px; }
      #bottoms #bottoms_block01 .bottoms01 .other ul li:last-child {
        margin-left: auto; }
    #bottoms #bottoms_block01 .bottoms02 {
      padding-top: 210px;
      width: 38.2%;
      margin-left: auto; }
      #bottoms #bottoms_block01 .bottoms02 .num {
        top: -20px;
        left: 10px; }
      #bottoms #bottoms_block01 .bottoms02 .plus {
        right: 20px;
        top: 20px; }
      #bottoms #bottoms_block01 .bottoms02 .other ul {
        max-width: 460px;
        margin: 0 auto; }
        #bottoms #bottoms_block01 .bottoms02 .other ul li:last-child {
          padding-top: 40px;
          margin-left: auto; }
  #bottoms #bottoms_block02 .bottoms03 {
    width: 43.7%; }
    #bottoms #bottoms_block02 .bottoms03 .slide,
    #bottoms #bottoms_block02 .bottoms03 .color_li {
      max-width: 400px;
      margin-left: auto; }
    #bottoms #bottoms_block02 .bottoms03 .num {
      top: -18px;
      right: 10px; }
    #bottoms #bottoms_block02 .bottoms03 .plus {
      left: 20px;
      top: 20px; }
    #bottoms #bottoms_block02 .bottoms03 .other ul {
      max-width: 460px;
      margin: 0 auto; }
      #bottoms #bottoms_block02 .bottoms03 .other ul li:first-child {
        padding-top: 40px; }
      #bottoms #bottoms_block02 .bottoms03 .other ul li:last-child {
        margin-left: auto; }
  #bottoms #bottoms_block02 .bottoms04 {
    margin-left: auto;
    padding-top: 40px;
    width: 43.1%; }
    #bottoms #bottoms_block02 .bottoms04 .slide,
    #bottoms #bottoms_block02 .bottoms04 .color_li {
      max-width: 450px; }
    #bottoms #bottoms_block02 .bottoms04 .num {
      top: -18px;
      left: 10px; }
    #bottoms #bottoms_block02 .bottoms04 .plus {
      right: 20px;
      top: 20px; }
    #bottoms #bottoms_block02 .bottoms04 .other ul {
      max-width: 460px;
      margin-left: auto; }
      #bottoms #bottoms_block02 .bottoms04 .other ul li:last-child {
        padding-top: 40px;
        margin-left: auto; }
  #bottoms #bottoms_block03 {
    padding-bottom: 75px; }
    #bottoms #bottoms_block03 .bottoms05 {
      width: 44.8%; }
      #bottoms #bottoms_block03 .bottoms05 .slide,
      #bottoms #bottoms_block03 .bottoms05 .color_li {
        max-width: 395px; }
      #bottoms #bottoms_block03 .bottoms05 .num {
        top: -18px;
        left: 20px; }
      #bottoms #bottoms_block03 .bottoms05 .plus {
        right: 20px;
        top: 20px; }
      #bottoms #bottoms_block03 .bottoms05 .other ul {
        max-width: 460px;
        margin-left: auto; }
        #bottoms #bottoms_block03 .bottoms05 .other ul li:last-child {
          padding-top: 40px;
          margin-left: auto; }
          #bottoms #bottoms_block03 .bottoms06 {
            padding-top: 210px;
            width: 38.2%;
            margin-left: auto; }
            #bottoms #bottoms_block03 .bottoms06 .num {
              top: -20px;
              left: 10px; }
            #bottoms #bottoms_block03 .bottoms06 .plus {
              right: 20px;
              top: 20px; }
            #bottoms #bottoms_block03 .bottoms06 .other ul {
              max-width: 460px;
              margin: 0 auto; }
              #bottoms #bottoms_block03 .bottoms06 .other ul li:last-child {
                padding-top: 40px;
                margin-left: auto; }
    #bottoms #bottoms_block03 #bottoms_item01 {
      padding-top: 70px;
      margin-left: auto;
      width: 43.1%; }
        #bottoms #bottoms_block03 {
    padding-bottom: 75px; }
    #bottoms #bottoms_block03 .bottoms05 {
      width: 44.8%; }
      #bottoms #bottoms_block03 .bottoms05 .slide,
      #bottoms #bottoms_block03 .bottoms05 .color_li {
        max-width: 395px; }
      #bottoms #bottoms_block03 .bottoms05 .num {
        top: -18px;
        left: 20px; }
      #bottoms #bottoms_block03 .bottoms05 .plus {
        right: 20px;
        top: 20px; }
      #bottoms #bottoms_block03 .bottoms05 .other ul {
        max-width: 460px;
        margin-left: auto; }
        #bottoms #bottoms_block03 .bottoms05 .other ul li:last-child {
          padding-top: 40px;
          margin-left: auto; }
          #bottoms #bottoms_block03 .bottoms06 {
            padding-top: 210px;
            width: 38.2%;
            margin-left: auto; }
            #bottoms #bottoms_block03 .bottoms06 .num {
              top: -20px;
              left: 10px; }
            #bottoms #bottoms_block03 .bottoms06 .plus {
              right: 20px;
              top: 20px; }
            #bottoms #bottoms_block03 .bottoms06 .other ul {
              max-width: 460px;
              margin: 0 auto; }
              #bottoms #bottoms_block03 .bottoms06 .other ul li:last-child {
                padding-top: 40px;
                margin-left: auto; }
    #bottoms #bottoms_block03 #bottoms_item01 {
      padding-top: 70px;
      margin-left: auto;
      width: 43.1%; }

      #bottoms #bottoms_block04 {
        max-width: 1160px;
        width: 100%;
        padding-bottom: 100px; }
        #bottoms #bottoms_block04 .bottoms07 {
          width: 50.4%; }
          #bottoms #bottoms_block04 .bottoms07 .num {
            top: -20px;
            left: 10px; }
          #bottoms #bottoms_block04 .bottoms07 .plus {
            right: 20px;
            top: 20px; }
          #bottoms #bottoms_block04 .bottoms07 .other ul li:first-child {
            padding-top: 50px; }
          #bottoms #bottoms_block04 .bottoms07 .other ul li:last-child {
            margin-left: auto; }
        #bottoms #bottoms_block04 .bottoms08 {
          padding-top: 210px;
          width: 38.2%;
          margin-left: auto; }
          #bottoms #bottoms_block04 .bottoms08 .num {
            top: -20px;
            left: 10px; }
          #bottoms #bottoms_block04 .bottoms08 .plus {
            right: 20px;
            top: 20px; }
          #bottoms #bottoms_block04 .bottoms08 .other ul {
            max-width: 460px;
            margin: 0 auto; }
            #bottoms #bottoms_block04 .bottoms08 .other ul li:last-child {
              padding-top: 40px;
              margin-left: auto; }
              #bottoms #bottoms_block05 .bottoms09 {
                width: 43.7%; }
                #bottoms #bottoms_block05 .bottoms09 .slide,
                #bottoms #bottoms_block05 .bottoms09 .color_li {
                  max-width: 400px;
                  margin-left: auto; }
                #bottoms #bottoms_block05 .bottoms09 .num {
                  top: -18px;
                  right: 10px; }
                #bottoms #bottoms_block05 .bottoms09 .plus {
                  left: 20px;
                  top: 20px; }
                #bottoms #bottoms_block05 .bottoms09 .other ul {
                  max-width: 460px;
                  margin: 0 auto; }
                  #bottoms #bottoms_block05 .bottoms09 .other ul li:first-child {
                    padding-top: 40px; }
                  #bottoms #bottoms_block05 .bottoms09 .other ul li:last-child {
                    margin-left: auto; }
              #bottoms #bottoms_block05 .bottoms10 {
                margin-left: auto;
                padding-top: 40px;
                width: 43.1%; }
                #bottoms #bottoms_block05 .bottoms10 .slide,
                #bottoms #bottoms_block05 .bottoms10 .color_li {
                  max-width: 450px; }
                #bottoms #bottoms_block05 .bottoms10 .num {
                  top: -18px;
                  left: 10px; }
                #bottoms #bottoms_block05 .bottoms10 .plus {
                  right: 20px;
                  top: 20px; }
                #bottoms #bottoms_block05 .bottoms10 .other ul {
                  max-width: 460px;
                  margin-left: auto; }
                  #bottoms #bottoms_block05 .bottoms10 .other ul li:last-child {
                    padding-top: 40px;
                    margin-left: auto; }

                    

/*  追記ここから */

                  #bottoms #bottoms_block06 .bottoms11 {
                width: 43.7%; }
                #bottoms #bottoms_block06 .bottoms11 .slide,
                #bottoms #bottoms_block06 .bottoms11 .color_li {
                  max-width: 400px;
                  margin-left: auto; }
                #bottoms #bottoms_block06 .bottoms11 .num {
                  top: -18px;
                  right: 10px; }
                #bottoms #bottoms_block06 .bottoms11 .plus {
                  left: 20px;
                  top: 20px; }
                #bottoms #bottoms_block06 .bottoms11 .other ul {
                  max-width: 460px;
                  margin: 0 auto; }
                  #bottoms #bottoms_block06 .bottoms11 .other ul li:first-child {
                    padding-top: 40px; }
                  #bottoms #bottoms_block06 .bottoms11 .other ul li:last-child {
                    margin-left: auto; }
              #bottoms #bottoms_block06 .bottoms12 {
                margin-left: auto;
                padding-top: 40px;
                width: 43.1%; }
                #bottoms #bottoms_block06 .bottoms12 .slide,
                #bottoms #bottoms_block06 .bottoms12 .color_li {
                  max-width: 450px; }
                #bottoms #bottoms_block06 .bottoms12 .num {
                  top: -18px;
                  left: 10px; }
                #bottoms #bottoms_block06 .bottoms12 .plus {
                  right: 20px;
                  top: 20px; }
                #bottoms #bottoms_block06 .bottoms12 .other ul {
                  max-width: 460px;
                  margin-left: auto; }
                  #bottoms #bottoms_block06 .bottoms12 .other ul li:last-child {
                    padding-top: 40px;
                    margin-left: auto; }

            .item-category{
              text-align: center;
              margin:100px 0;
              font-size: 3em;
            }
            
/*  追記ここまで */


  #bottoms .other {
    padding-top: 35px; }
    #bottoms .other h5 {
      font-size: 20px;
      font-size: 2.0rem;
      line-height: 1;
      font-family: 'Gravity Bold';
      padding-bottom: 30px;
      letter-spacing: 0.1em; }
    #bottoms .other ul {
      display: flex;
      flex-wrap: wrap; }
      #bottoms .other ul li img {
        max-width: 400px; }
        
   .number{font-size:50px;position:relative;top:25px;z-index:100;}

  /*visual*/
  .mainVisual {
    margin-bottom: 28px;
  }
@media screen and (max-width: 1120px) {
  #bottoms .other ul li {
    width: 60; }
    #bottoms .other ul li img {
      width: 100%; } }
#footer_photo {
  padding-bottom: 150px; }

#pagetop {
  cursor: pointer;
  position: fixed;
  bottom: 120px;
  right: 50px;
  z-index: 100; }
  #pagetop img {
    width: 60px; }

footer {
  text-align: center;
  background-color: #fff; 
  margin-bottom: 100px;
  }
  footer img {
    max-width: 394px;
    margin-top: 10px; }
  footer small {
    display: block;
    font-size: 12px;
    font-size: 1.2rem;
    padding: 25px 0 20px; }

@media screen and (max-width: 1190px) {
  #header {
    padding: 0 20px; }

  .container {
    padding-left: 20px;
    padding-right: 40px; }

  .mCSB_scrollTools {
    margin: 13vh 1vw 13vh 0;
    position: absolute;
    top: 0;
    right: 0; }

  #fixed_nav {
    left: 10px; } }

@media screen and (max-width: 768px) {
  body {
    overscroll-behavior: none;
    font-size: 13px;
    font-size: 1.3rem; }

  .sp {
    display: block; }

  .pc {
    display: none; }

  .container {
    padding-left: 0px;
    padding-right: 0px; }

  #cover_wrap {
    height: auto;
    overflow: inherit; }

  #header {
    padding: 0; }

  .header_in {
    padding: 35px 0; }
    .header_in h1 img {
      width: 46%; }
    .header_in #share {
      right: 15px; 
    z-index:100;}
      .header_in #share p img {
        width: 20px; }
    .header_in .share_area {
      width: 200px;
      top: 45px;
      padding: 15px 10px; }
      .header_in .share_area ul:first-of-type {
        padding-bottom: 10px; }
      .header_in .share_area ul:last-of-type {
        padding-top: 10px; }
        .header_in .share_area ul:last-of-type li a {
          padding-left: 20px; }
      .header_in .share_area ul li {
        margin-bottom: 5px; }
        .header_in .share_area ul li a {
          border-radius: 4px;
          padding: 12px 5px; }
          .header_in .share_area ul li a i {
            margin-right: 5px; }
            .header_in .share_area ul li a i img {
              height: 12px;
              width: auto; }
          .header_in .share_area ul li a span {
            font-size: 10px;
            font-size: 1.0rem; }

  .line {
    height: 75px; }

  article {
    padding-top: 60px;
    background-color: #fff; }

  	/*
  	.mCSB_scrollTools{
  		margin:13vh 2vw 13vh 0;
  		position:absolute;
  		top:0;
  		right:0;
  	}
  	.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
  		width:4px;
  	}
  
  	.mCSB_scrollTools .mCSB_draggerRail{
  		width:4px;
  	}
  	*/
#flow-obi {
  width:100%;
  text-align:center;
  background: #fff;
  position:fixed;
  z-index: 100;
  bottom:0;
}
  #fixed_nav {
    position: fixed;
    top: 25vh;
    left: 0px;
    padding: 0;
    border: 0;
    background-color: rgba(255, 255, 255, 0); }
    #fixed_nav #close_menu {
      width: calc(85 / 768 * 100vw);
      cursor: pointer; }
      #fixed_nav #close_menu.open {
        display: none; }
    #fixed_nav #open_menu {
      display: none;
      border: 1px solid #cccccc;
      width: calc(140 / 768 * 100vw);
      background-color: rgba(255, 255, 255, 0.8);
      text-align: center;
      padding-top: calc(20 / 768 * 100vw); }
      #fixed_nav #open_menu.open {
        display: block; }
      #fixed_nav #open_menu #open_menu_icon {
        width: calc(28 / 768 * 100vw);
        margin: 0 auto calc(50 / 768 * 100vw);
        cursor: pointer; }
      padding-bottom:calc(50 / 768 * 100vw)
      #fixed_nav #open_menu ul li:nth-child(2) {
        padding-bottom: calc(50 / 768 * 100vw); }
      #fixed_nav #open_menu ul li:last-child {
        padding-bottom: calc(50 / 768 * 100vw); }
      #fixed_nav #open_menu ul li img {
        width: calc(14 / 768 * 100vw);
        margin: 0 auto; }
    #fixed_nav ul li {
      padding-bottom: 20px; }
      #fixed_nav ul li span {
        border-left: 1px solid transparent; }

  .Android #lead .lead_tit {
    font-weight: bold; }

  #lead {
    padding-bottom: 95px;
    padding-left: 15px;
    padding-right: 15px; }
    #lead .lead_tit {
      font-size: calc(44 / 768 * 100vw);
      line-height: 1.5;
      margin-bottom: 40px; }
    #lead .lead_txt {
      line-height: 2; }

  h3 {
    font-size: calc(50 / 768 * 100vw);
    padding-bottom: 20px; }

  .main_txt {
    line-height: 2;
    padding-bottom: 55px; }

  .flex {
    display: block; }

  .color_li li {
    margin-right: calc(40 / 750 * 100vw);
    width: calc(24 / 750 * 100vw);
    height: calc(24 / 750 * 100vw); }

  .itemlist ul {
    padding-left: calc(80 / 768 * 100vw);
    padding-bottom: 15px; }
    .itemlist ul:before {
      font-size: 2.1rem; }
    .itemlist ul li {
      padding-bottom: 25px;
      display: flex;
      flex-wrap: wrap; }
      .itemlist ul li .item_info {
        width: calc(100% - 60px); }
        .itemlist ul li .item_info .name {
          font-size: 1.6rem; }
        .itemlist ul li .item_info .code {
          font-size: 1.2rem;
          padding-bottom: 10px; }
        .itemlist ul li .item_info .price {
          font-size: 1.2rem; }
      .itemlist ul li .btn {
        width: 60px;
        margin-left: auto; }

  #bottoms {
    position: relative;
    padding-top: 25px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 50px; }
    #bottoms #bottoms_block01 {
      padding-bottom: 60px; }
      #bottoms #bottoms_block01 .bottoms01 {
        padding-top: 0px;
        padding-bottom: 55px;
        width: 90%; }
        #bottoms #bottoms_block01 .bottoms01 .num {
          top: -20px;
          left: 10px; }
        #bottoms #bottoms_block01 .bottoms01 .other ul li:first-child {
          padding-top: 30px; }
      #bottoms #bottoms_block01 .bottoms02 {
        width: 86.1%; }
        #bottoms #bottoms_block01 .bottoms02 .num {
          top: -20px;
          left: 10px; }
        #bottoms #bottoms_block01 .bottoms02 .other ul {
          width: 76.666vw;
          margin: 0 auto; }
          #bottoms #bottoms_block01 .bottoms02 .other ul li:last-child {
            padding-top: 20px;
            margin-left: auto; }
    #bottoms #bottoms_block02 .bottoms03 {
      width: 87.3%; }
      #bottoms #bottoms_block02 .bottoms03 .slide,
      #bottoms #bottoms_block02 .bottoms03 .color_li {
        width: 90%;
        margin-right: 8px;
        margin-left: auto; }
      #bottoms #bottoms_block02 .bottoms03 .num {
        top: -18px;
        right: 10px; }
      #bottoms #bottoms_block02 .bottoms03 .other ul {
        margin: 0 auto; }
        #bottoms #bottoms_block02 .bottoms03 .other ul li:first-child {
          padding-top: 20px; }
    #bottoms #bottoms_block02 .bottoms04 {
      padding-top: 55px;
      padding-bottom: 55px;
      width: 86.9%; }
      #bottoms #bottoms_block02 .bottoms04 .slide,
      #bottoms #bottoms_block02 .bottoms04 .color_li {
        max-width: 100%; }
      #bottoms #bottoms_block02 .bottoms04 .num {
        top: -18px;
        left: 10px; }
      #bottoms #bottoms_block02 .bottoms04 .other ul {
        width: 100%;
        margin-left: auto; }
        #bottoms #bottoms_block02 .bottoms04 .other ul li:last-child {
          padding-top: 20px; }
    #bottoms #bottoms_block03 {
      padding-bottom: 0px; }
      #bottoms #bottoms_block03 .bottoms05 {
        width: 100%;
        padding-bottom: 60px; }
        #bottoms #bottoms_block03 .bottoms05 .slide,
        #bottoms #bottoms_block03 .bottoms05 .color_li {
          max-width: 100%;
          width: 73.8%; }
        #bottoms #bottoms_block03 .bottoms05 .num {
          top: -18px;
          left: 10px; }
        #bottoms #bottoms_block03 .bottoms05 .other ul {
          max-width: 87.6%; }
          #bottoms #bottoms_block03 .bottoms05 .other ul li:last-child {
            padding-top: 20px; }
            #bottoms #bottoms_block03 .bottoms06 {
              width: 86.1%; }
              #bottoms #bottoms_block03 .bottoms06 .num {
                top: -20px;
                left: 10px; }
              #bottoms #bottoms_block03 .bottoms06 .other ul {
                width: 76.666vw;
                margin: 0 auto; }
                #bottoms #bottoms_block03 .bottoms06 .other ul li:last-child {
                  padding-top: 20px;
                  margin-left: auto; }
      
      #bottoms #bottoms_block03 #bottoms_item01 {
        padding-top: 0px;
        width: 100%; }

        #bottoms #bottoms_block04 {
          padding-bottom: 60px; }
          #bottoms #bottoms_block04 .bottoms07 {
            padding-top:210px;
            padding-bottom: 55px;
            width: 90%; }
            #bottoms #bottoms_block04 .bottoms07 .num {
              top: -20px;
              left: 10px; }
            #bottoms #bottoms_block04 .bottoms07 .other ul li:first-child {
              padding-top: 30px; }
          #bottoms #bottoms_block04 .bottoms08 {
            width: 86.1%; }
            #bottoms #bottoms_block04 .bottoms08 .num {
              top: -20px;
              left: 10px; }
            #bottoms #bottoms_block04 .bottoms08 .other ul {
              width: 76.666vw;
              margin: 0 auto; }
              #bottoms #bottoms_block04 .bottoms08 .other ul li:last-child {
                padding-top: 20px;
                margin-left: auto; }
                #bottoms #bottoms_block05 .bottoms09 {
                  width: 87.3%; }
                  #bottoms #bottoms_block05 .bottoms09 .slide,
                  #bottoms #bottoms_block05 .bottoms09 .color_li {
                    width: 90%;
                    margin-right: 8px;
                    margin-left: auto; }
                  #bottoms #bottoms_block05 .bottoms09 .num {
                    top: -18px;
                    right: 10px; }
                  #bottoms #bottoms_block05 .bottoms09 .other ul {
                    margin: 0 auto; }
                    #bottoms #bottoms_block05 .bottoms09 .other ul li:first-child {
                      padding-top: 20px; }
                #bottoms #bottoms_block05 .bottoms10 {
                  padding-top: 55px;
                  padding-bottom: 55px;
                  width: 86.9%; }
                  #bottoms #bottoms_block05 .bottoms10 .slide,
                  #bottoms #bottoms_block05 .bottoms10 .color_li {
                    max-width: 100%; }
                  #bottoms #bottoms_block05 .bottoms10 .num {
                    top: -18px;
                    left: 10px; }
                  #bottoms #bottoms_block05 .bottoms10 .other ul {
                    width: 100%;
                    margin-left: auto; }
                    #bottoms #bottoms_block05 .bottoms10 .other ul li:last-child {
                      padding-top: 20px; }


        /* 追記ここから　*/

                #bottoms #bottoms_block06 .bottoms11 {
                  width: 87.3%; }
                  #bottoms #bottoms_block06 .bottoms11 .slide,
                  #bottoms #bottoms_block06 .bottoms11 .color_li {
                    width: 90%;
                    margin-right: 8px;
                    margin-left: auto; }
                  #bottoms #bottoms_block06 .bottoms11 .num {
                    top: -18px;
                    right: 10px; }
                  #bottoms #bottoms_block06 .bottoms11 .other ul {
                    margin: 0 auto; }
                    #bottoms #bottoms_block06 .bottoms11 .other ul li:first-child {
                      padding-top: 20px; }
                #bottoms #bottoms_block06 .bottoms12 {
                  padding-top: 55px;
                  padding-bottom: 55px;
                  width: 86.9%; }
                  #bottoms #bottoms_block06 .bottoms12 .slide,
                  #bottoms #bottoms_block06 .bottoms12 .color_li {
                    max-width: 100%; }
                  #bottoms #bottoms_block06 .bottoms12 .num {
                    top: -18px;
                    left: 10px; }
                  #bottoms #bottoms_block06 .bottoms12 .other ul {
                    width: 100%;
                    margin-left: auto; }
                    #bottoms #bottoms_block06 .bottoms12 .other ul li:last-child {
                      padding-top: 20px; }

       /* 追記ここまで　*/
            
                
    #bottoms .other {
      padding-top: 18px; }
      #bottoms .other h5 {
        font-size: calc(28 / 768 * 100vw);
        padding-bottom: 20px; }
      #bottoms .other ul {
        display: flex;
        flex-wrap: wrap; }
        #bottoms .other ul li img {
          width: 70vw; }

             .number{font-size:45px;position:relative;top:20px;z-index:100;}

  #footer_photo {
    padding-bottom: 70px; }

  #pagetop {
    bottom: 45px;
    right: 15px; }
    #pagetop img {
      width: 45px; }

  footer img {
    max-width: 100%;
    width: 59.2%;
    margin: 0 auto; }
  footer small {
    font-size: 10px;
    font-size: 1.0rem; } 
  
  
    .mainVisual {
      position: relative;
      margin-bottom: 78px;
    }
    .mainVisual_img img {
      width: 100%;
    }
    .mainVisual_img p:first-child {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }
    .mainVisual_img p:last-child {
      opacity: 0;
      transition: 3s;
    }

    }
  
@media screen and (max-width: 500px) {
  .itemlist ul:before {
    font-size: calc(42 / 750 * 100vw); }
  .itemlist ul li .item_info .name {
    font-size: calc(32 / 750 * 100vw); }
  .itemlist ul li .item_info .code {
    font-size: calc(24 / 750 * 100vw); }
  .itemlist ul li .item_info .price {
    font-size: calc(24 / 750 * 100vw); } }
@media screen and (max-width: 530px) {
  #lead .lead_tit {
    font-size: calc(30 / 530 * 100vw); } }
@media screen and (max-width: 400px) {
  #lead .lead_tit {
    font-size: calc(20 / 400 * 100vw); } }



@media screen and (max-width: 480px) {
#banner{position:fixed;z-index:9999999;width:100%;bottom:0;}
}
@media screen and (min-width: 481px) { #banner{display:none;}
}




.mt10{margin-top:10px;}

.btn {
  margin-left: 10px;
  padding: 2px; 
  font-size:0.8em;
  text-decoration: underline;
}
.styling-list{
  margin:20px 0px;
}
.styling-list a{
  text-decoration: none;
  line-height: 2em;
}

/*  追記　*/

.planed_item{
line-height: 2em;
}

/*  追記ここまで　*/



.item-description{
  line-height:1.5em;
}

h4.item-name{
  font-size: 1.5em;
  z-index: 100;
}

.item-spec{font-size:0.8em;line-height:1.8em;}

#bottoms .other h5{padding-top:50px;}


.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.image-container{
  display: flex;
  overflow: hidden;
  margin-bottom:50px;
}

.image-container img{
  width: 100%;
  opacity: 0;
  animation: fadeIn 3s ease-in-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/*------------------------------------------------------------------
#shop-contents
-------------------------------------------------------------------*/
.shop-contents{
  margin:20px auto 50px;
  text-align: center;
  padding:10px;
}

.shop-contents h2{
  font-size:15px;
  text-align:center;
  vertical-align: middle;
  margin-bottom:50px;
  font-weight:500;
}

.shop-contents h2 img{
  vertical-align: baseline;
}

@media screen and (min-width: 769px) {
  .shop-contents{
    width:80%;
    margin:20px auto 50px;
  }

  .shop-contents h2{
    font-size:30px;
  }

  .shop-contents h2 img{
    height:30px;
    vertical-align: baseline;
  }
}

.shop-photo{
  display:flex;
}


.shop-contents p{
  margin:20px auto 40px;
  text-align: center;
  line-height:2em;
}

.link-design{
  margin:50px auto 0px;
  padding:10px;
  border:1px solid #000;
  text-align:center;
}

.link-design a{
  text-decoration: none;
}

a.link-design{
  display:block;
  color:#000;
  background-color: #fff;
  font-size:1em;
  padding:10px;
  box-sizing:border-box;
  border:1px solid #000000;
  text-decoration: none;
  text-align:center;
  margin:0 auto;
 }

 @media screen and (min-width: 768px){

  .shop-photo{
    margin:0px auto;
  }
  
  .shop-photo img{
  width:50%;
}
  .link-design{
    width:80%;
  }
 }

 @media screen and (min-width: 1200px){
  .shop-photo{
    margin:0px 200px;
  }
    .shop-photo img{
    width:50%;
  }
  .link-design{
    width:60%;
    max-width:800px;
  }
 }

 @media screen and (min-width: 1600px){
  .shop-photo{
    margin:0px 500px;
  }
  .shop-photo img{
  width:50%;
  }
  .link-design{
    width:50%;
    max-width:800px;
  }
 }

 @media screen and (max-width: 767px){
  .shop-contents p{
    font-size:12px;
  }

  a.link-design{
    padding:5px;
    font-size:12px;
  }

}