@charset "utf-8";

/* ? PROGRESSIVE */

/* ! FOR PRODUCTION */


@font-face {
  font-family: "jins_next_ttregular";
  src: url("/jp/client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextRegular.eot");
  src: url("/jp/client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextRegular.eot?#iefix") format('embedded-opentype'),
       url("/jp/client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextRegular.woff") format('woff'),
       url("/jp/client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextRegular.ttf") format('truetype'),
       url("/jp/client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextRegular.svg#jins_next_ttregular") format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "jins_next_ttlight";
  src: url("/jp/client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextLight.eot");
  src: url("/jp/client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextLight.eot?#iefix") format('embedded-opentype'),
       url("/jp/client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextLight.woff") format('woff'),
       url("/jp/client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextLight.ttf") format('truetype'),
       url("/jp/client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextLight.svg#jins_next_ttlight") format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "jins_next_ttmedium";
  src: url("/jp/client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextMedium.eot");
  src: url("/jp/client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextMedium.eot?#iefix") format('embedded-opentype'),
       url("/jp/client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextMedium.woff") format('woff'),
       url("/jp/client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextMedium.ttf") format('truetype'),
       url("/jp/client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextMedium.svg#jins_next_ttmedium") format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "jins_next_ttbold";
  src: url("/jp/client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextBold.eot");
  src: url("/jp/client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextBold.eot?#iefix") format('embedded-opentype'),
       url("/jp/client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextBold.woff") format('woff'),
       url("/jp/client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextBold.ttf") format('truetype'),
       url("/jp/client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextBold.svg#jins_next_ttbold") format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Noto Sans Japanese Light";
  src: local('Noto Sans CJK JP'),
       url("/jp/client_info/JINSJINS/view/userweb/ext/common/fonts/notosansjp_subset/NotoSansCJKjp-Light_sub.woff") format('woff'),
       url("/jp/client_info/JINSJINS/view/userweb/ext/common/fonts/notosansjp_subset/NotoSansCJKjp-Light_sub.otf") format('opentype');
  font-weight: normal;
  font-weight: 300;
  font-weight: lighter;
  font-style: normal;
}

@font-face {
  font-family: "Noto Sans Japanese";
  src: local('Noto Sans CJK JP'),
       url("/jp/client_info/JINSJINS/view/userweb/ext/common/fonts/notosansjp_subset/NotoSansCJKjp-DemiLight_sub.woff") format('woff'),
      url("/jp/client_info/JINSJINS/view/userweb/ext/common/fonts/notosansjp_subset/NotoSansCJKjp-DemiLight_sub.otf") format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Noto Sans Japanese Bold";
  src: local('Noto Sans CJK JP'),
       url("/jp/client_info/JINSJINS/view/userweb/ext/common/fonts/notosansjp_subset/NotoSansCJKjp-Bold_sub.woff") format('woff'),
       url("/jp/client_info/JINSJINS/view/userweb/ext/common/fonts/notosansjp_subset/NotoSansCJKjp-Bold_sub.otf") format('opentype');
  font-weight: 300;
  font-style: normal;
}


/* ! FOR MK SERVER & LOCAL TEST ONLY */

/* @font-face {
  font-family: "jins_next_ttregular";
  src: url("../../client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextRegular.eot");
  src: url("../../client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextRegular.eot?#iefix") format('embedded-opentype'),
       url("../../client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextRegular.woff") format('woff'),
       url("../../client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextRegular.ttf") format('truetype'),
       url("../../client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextRegular.svg#jins_next_ttregular") format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "jins_next_ttlight";
  src: url("../../client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextLight.eot");
  src: url("../../client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextLight.eot?#iefix") format('embedded-opentype'),
       url("../../client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextLight.woff") format('woff'),
       url("../../client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextLight.ttf") format('truetype'),
       url("../../client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextLight.svg#jins_next_ttlight") format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "jins_next_ttmedium";
  src: url("../../client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextMedium.eot");
  src: url("../../client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextMedium.eot?#iefix") format('embedded-opentype'),
       url("../../client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextMedium.woff") format('woff'),
       url("../../client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextMedium.ttf") format('truetype'),
       url("../../client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextMedium.svg#jins_next_ttmedium") format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "jins_next_ttbold";
  src: url("../../client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextBold.eot");
  src: url("../../client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextBold.eot?#iefix") format('embedded-opentype'),
       url("../../client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextBold.woff") format('woff'),
       url("../../client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextBold.ttf") format('truetype'),
       url("../../client_info/JINSJINS/view/userweb/ext/common/fonts/JINS_NextBold.svg#jins_next_ttbold") format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Noto Sans Japanese Light";
  src: local('Noto Sans CJK JP'),
       url("../../client_info/JINSJINS/view/userweb/ext/common/fonts/notosansjp_subset/NotoSansCJKjp-Light_sub.woff") format('woff'),
       url("../../client_info/JINSJINS/view/userweb/ext/common/fonts/notosansjp_subset/NotoSansCJKjp-Light_sub.otf") format('opentype');
  font-weight: normal;
  font-weight: 300;
  font-weight: lighter;
  font-style: normal;
}

@font-face {
  font-family: "Noto Sans Japanese";
  src: local('Noto Sans CJK JP'),
       url("../../client_info/JINSJINS/view/userweb/ext/common/fonts/notosansjp_subset/NotoSansCJKjp-DemiLight_sub.woff") format('woff'),
       url("../../client_info/JINSJINS/view/userweb/ext/common/fonts/notosansjp_subset/NotoSansCJKjp-DemiLight_sub.otf") format('opentype');
  font-weight: normal;
  font-weight: 300;
  font-weight: lighter;
  font-style: normal;
}

@font-face {
  font-family: "Noto Sans Japanese Bold";
  src: local('Noto Sans CJK JP'),
       url("../../client_info/JINSJINS/view/userweb/ext/common/fonts/notosansjp_subset/NotoSansCJKjp-Bold_sub.woff") format('woff'),
       url("../../client_info/JINSJINS/view/userweb/ext/common/fonts/notosansjp_subset/NotoSansCJKjp-Bold_sub.otf") format('opentype');
  font-weight: normal;
  font-style: normal;
} */

#mainContainer #mainArea, #contentContainer #contentArea {
  width: 100%;
}

/* == COMMON STYLEs ==  */
::-webkit-scrollbar,
::scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}
html {
  -ms-overflow-x: hidden;
  overflow-x: hidden;
  overflow-y: scroll;
}

body {
  font: 100%/1 "jins_next_ttlight", proxima-nova, "Proxima Nova", "Helvetica Neue", Helvetica, "Noto Sans CJK JP", "Noto Sans Japanese", 游ゴシック, YuGothic, sans-serif;
  -ms-overflow: hidden;
  overflow: hidden;
  overflow-y: unset;
  font-weight: 400;
}

ul {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'jins_next_ttlight', 'Noto Sans CJK JP', sans-serif;
  font-weight: 300;
}

h2 {
  margin-bottom: 30px;
  font-size: 50px; }

  #introduction h2 {
    margin-bottom: 80px;
  }

h3 {
  margin-bottom: 30px;
  font-size: 32px;
  line-height: 1.694;
  }

  .content__section__inner > h3 {
    text-align: center;
  }

h4 {
  margin-bottom: 20px;
  font-size: 25px;
  font-weight: 300;
  line-height: 1.694;
}

h5 {
  font-size: 20px;
  line-height: 1.6;
  color: #8991A2;
}

h6 {
  font-size: 18px;
  color: #8991A2;
}


p {
  font-size: 18px;
  color: #8991A2;
  line-height: 2.0555556;
  letter-spacing: 0.15em;
  margin-bottom: 0;
  /* white-space: pre-wrap; */
  }

  p._center {
    text-align: center;
  }

  .content__section__inner > p {
    text-align: center;
  }

  .caution p {
    font-size: 16px;
    text-align: center;
  }

figure {
  position: relative; }

  figure figcaption {
    padding-top: 20px;
  }

.punctuation {
  display: inline-block;
  width: 0.5em;
}

.only-tab--landscape {
  display: none;
}

.clear {
  float: none;
  clear: both; }

  .clear::before,
  .clear::after {
    content: '';
    display: block;
    float: none;
    clear: both;
  }

.btn-wrapper {
  position: relative;
  text-align: center;
}

.btn-wrapper a,
.btn-wrapper .btn {
  display: inline-block;
  height: 40px;
  width: 183px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  background-color: transparent;
  border: 1px solid #3a4763;
  color: #3a4763;
  font-size: 16px;
  text-align: center;
  line-height: 44px;
  letter-spacing: 0.2em;
  text-decoration: none;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
  text-indent: 0.2em; }

  .btn-wrapper a.btn:hover {
    background-color: #333E58;
    color: #fff;
  }

  #line-up .btn-wrapper a.btn {
    text-indent: 8px;
  }

#header #headersub {
  display: none !important;
}

#contentContainer {
  width: 100vw;
  padding-top: 80px;
  overflow: hidden;
}

.content small {
  font-size: 0.65625em;
  letter-spacing: 0.15em;
}

.content__section {
  overflow: hidden;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  padding: 0 0px; }

  .content__section.bg--gray {
    background-color: #f9f9fa;
  }

  .content__section::before,
  .content__section::after {
    content: '';
    display: block;
    float: none;
    clear: both;
  }

  .content__section__inner {
    max-width: 1230px;
    margin-right: auto;
    margin-left: auto;
    padding: 120px 30px 60px;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .content__section .block-title {
    margin-bottom: 45px;
    width: 100%;
    height: 65px;
    line-height: 70px;
    background-color: #333e58;
    color: #fff;
    text-align: center;
    font-size: 25px;
    letter-spacing: 0.16em;
    white-space: nowrap;

  }

  .list-wrapper block-title2 {
    margin-bottom: 10%;
    width: 100%;
    padding: 2%;
    background-color: #9adae2;
    color: #fff;
    text-align: center;
    font-size: 3.75vw;
    letter-spacing: 0.16em;
    font-weight: 500;
}

  .section-title {
    line-height: 1.823125;
    text-transform: uppercase; }

    .section-title._main {
      font-size: 50px;
      margin-bottom: 30px;
      line-height: 1;
    }
    .section-title._sub {
      font-size: 32px;
      margin-bottom: 30px;
      margin-right: -30px;
      margin-left: -30px;
    }

    .section-title._center {
      text-align: center;
    }
    .section-title._red {
      color: #6ECD9C;
      letter-spacing: 0.1em;
    }
    .section-title._banner {
      margin-bottom: 0;
      height: 174px;
      background-color: #333E58;
      color: #fff;
      font-weight: 400;
      font-size: 32px;
      line-height: 174px;
      text-align: center;
    }

  .section-summary {
    color: #8991A2;
    line-height: 2.229;
    margin-right: -15px;
    margin-left: -15px;
  }

.content hr {
  max-width: 1400px;
  margin-right: auto;
  margin-left: auto;
  border-color: #333e58;
}

.box-card {
  border-radius: 15px;
  background-color: #fff;
  padding: 80px;
}

.box-card:not(:last-child) {
  margin-bottom: 50px;
}

.box-card > h4,
.box-card > p {
  text-align: center;
}

.row {
  /* display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap; */
  margin-right: -30px;
  margin-left: -30px;
  }

  .row.no-gutters {
    margin-right: unset;
    margin-left: unset;
  }

  .row.justify-center {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .row.justify-between {
    justify-content: space-between;
  }
  .row.align-center {
    align-items: center;
  }

  .row::before,
  .row::after {
    content: '';
    display: block;
    clear: both;
    float: none;
	padding:30px;
  }

  .col {
    padding-right: 30px;
    padding-left: 30px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box; }

  .row > .col {
    float: left;
  }

  .col-3 {
    width: 25%;
  }

  .col-4 {
    width: 33.333%;
  }

  .col-6 {
    width: 50%;
  }

  .col-8 {
    width: 66.666%;
    /* width: calc(100% / 3 * 2) */
  }

  .col-12 {
    flex: 12;
    width: 100%;
  }

  .col:first-child::before,
  .col:last-child::after {
    /* content: ''; */
    display: block;
    float: none;
    clear: both;
  }

.content ul {
  margin-top: 0;
  padding-left: 0; }

  .content ul li {
    position: relative;
    color: #8991A2;
    list-style: none;
    font-size: 18px;
    letter-spacing: 0.15em;
  }

.content ._checklist li {
  padding-left: 50px;
  line-height: 1.688;
  padding-top: 10px;
  padding-bottom: 10px;
}
.content ._checklist li::before {
  content: '';
  display: inline-block;
  position: absolute;
  left: 0;
  top: 48%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle fill='%236ECD9C' cx='15' cy='15' r='15'/%3E%3Cpolyline fill='none' stroke='%23fff' stroke-width='1' points='23.9,9 12,21 6,15 '/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: 100% 100%;
          background-size: 100%;
}

.hero {
  width: 100vw;
  -ms-overflow-style: hidden;
  /* overflow: hidden; */
  background-color: #f9f9fa;
  }

  .hero__inner {
    position: relative; }

  .hero__bg {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    white-space: nowrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    width: 100vw;
    overflow: visible;
    }

    .hero__bg::before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.2);
    }

    .hero__bg__container {
      display: inline-block;
      width: 50vw;
      height: 46.35417vw;
      max-height: 90vh;
      background-position: center;
      -webkit-background-size: cover;
      background-size: cover;
      background-repeat: no-repeat;
      }

      .hero__bg__container._first {
        background-image: url('img/hero-1.jpg'); }

      .hero__bg__container._last {
        background-image: url('img/hero-2.jpg'); }

        .msie9 .hero__bg__container._last {
          margin-left: -9px; }

      .hero__bg__container img {
        display: none; }

    .hero__title {
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      text-align: center;
      color: white;
      font-size: 52px;
      line-height: 1.5;
      letter-spacing: 0.1em;
      font-weight: lighter;
      font-family: 'Noto Sans Japanese';
    }

      .hero__title-badge {
        display: inline-block;
        width: 460px;
        background-color: #fff;
        position: absolute;
        bottom: 0;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        white-space: nowrap;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        }

      @media only screen and (max-width: 768px) {
        .hero__title-badge {
          width: 360px;
        }
      }
      @media only screen and (max-width: 480px) {
        .hero__title-badge {
          width: 100%;
        }
      }

      .hero__title-badge img {
        display: block;
        margin: auto;
      }

      .hero__title span {
        display: block;
        text-align: center;
      }

      .hero__title span:nth-child(1) {
        text-indent: .8em;
      }
      .hero__title span:nth-child(2) {
        text-indent: .3em;
      }


#introduction h2 {
  margin-bottom: 80px;
}

#our-lens .difference .row h3 {
  position: relative;
  text-align: center;
  white-space: nowrap;
}

#our-lens .difference > h4 {
  margin-bottom: 50px;
}

#our-lens .difference .caution {
  margin-top: 20px;
}

#our-lens .difference .caution p {
  font-size: 15px;
  line-height: 1.6;
  max-width: 710px;
  margin: auto;
}

.difference .new h3::before {
  content: 'new';
  display: inline-block;
  vertical-align: text-bottom;
  line-height: 40px;
  height: 36px;
  background-color: #6ECD9C;
  color: #fff;
  text-align: center;
  font-size: 20px;
  padding: 0 15px;
  border-radius: 36px;
  text-transform: capitalize;
  text-indent: 0.2em;
  margin-right: 15px;
}

.services h3._duplicate {
  display: none;
  text-align: center;
}

.services .caution {
  margin-top: 60px;
}

#progressive-lens > .content__section__inner > h3 {
  text-indent: 0.25em;
}

#progressive-lens .row {
  max-width: 1240px;
  margin: auto;
}

#progressive-lens .texts {
  max-width: 32em;
}

.cases {
  margin-top: 80px;
}
.case {
  max-width: 860px;
  margin: auto;
  }

  .case img {
    width: 100%;
  }

  .case-1 {
    margin-bottom: 70px;
  }

  .case h4 {
    text-align: center;
  }

  .case h4._bubble {
    margin-bottom: 35px;
  }

  .case h4._bubble span {
    display: inline-block;
    text-align: center;
    text-transform: capitalize;
    background-color: #6ECD9C;
    height: 40px;
    line-height: 46px;
    border-radius: 40px;
    text-indent: 0.125em;
    color: #fff;
    padding: 0px 24px;
    font-size: 21px;
  }

  .case h4._bubble2 {
    margin-bottom: 85px;
  }

  .case h4._bubble2 span {
    display: inline-block;
    text-align: center;
    text-transform: capitalize;
    background-color: #6ECD9C;
    height: 100px;
    line-height: 46px;
    border-radius: 10px;
    text-indent: 0.125em;
    color: #fff;
    padding: 20px 54px;
    font-size: 21px;
    line-height: 1.444444444444444;
  }

  .case figcaption h3 {
    text-align: center;
    color: #6ECD9C;
  }

._out .arrow {
  width: 0% !important;
  opacity: 0;
}
.case-1 .arrow {
  top: 33%;
  width: 44%;
}

.case-2 .arrow-1 {
  top: 30%;
  width: 35%;
}

.case-2 .arrow-2 {
  top: 60%;
  width: 45%;
  -webkit-transition-delay: .5s;
       -o-transition-delay: .5s;
          transition-delay: .5s;
}

.arrow {
  position: absolute;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  height: 2px;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transition: width 1s cubic-bezier(0.23, 1, 0.32, 1), opacity .25s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: width 1s cubic-bezier(0.23, 1, 0.32, 1), opacity .25s cubic-bezier(0.23, 1, 0.32, 1);
  transition: width 1s cubic-bezier(0.23, 1, 0.32, 1), opacity .25s cubic-bezier(0.23, 1, 0.32, 1);
}

.arrow span {
  display: block;
  position: relative;
  width: 100%;
  height: inherit;
  background-color: white;
}

.arrow span::before,
.arrow span::after {
  content: '';
  position: absolute;
  display: inline-block;
  width: 15px;
  height: 28px;
  top: 50%;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  -webkit-background-size: 100% 100%;
          background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.arrow span::before {
  left: 5px;
  -webkit-transform: translateX(-50%) translateY(-52%);
      -ms-transform: translateX(-50%) translateY(-52%);
          transform: translateX(-50%) translateY(-52%);
  background-image: url("data:image/svg+xml,%3Csvg stroke-width='2' stroke='%23fff' fill='none' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='15px' height='27.2px' viewBox='0 0 15 27.2' %3E%3Cpolyline points='14.3,0.7 1.4,13.6 14.3,26.5 '/%3E%3C/svg%3E");
}

.arrow span::after {
  right: 5px;
  -webkit-transform: translateX(50%) translateY(-52%);
      -ms-transform: translateX(50%) translateY(-52%);
          transform: translateX(50%) translateY(-52%);
  background-image: url("data:image/svg+xml,%3Csvg stroke-width='2' stroke='%23fff' fill='none' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='15px' height='27.2px' viewBox='0 0 15 27.2' %3E%3Cpolyline points='0.7,0.7 13.6,13.6 0.7,26.5 '/%3E%3C/svg%3E");
}


@media only screen and (max-width: 768px) {
  .case-1 .arrow { top: 28%; }
  .case-2 .arrow-1 { top: 40%; }
  .case-2 .arrow-2 { top: 72%; }
  .arrow span::before,
  .arrow span::after {
    width: 10px;
    height: 20px;
  }
  .arrow span::before {
    left: 4px;
    -webkit-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg stroke-width='3' stroke='%23fff' fill='none' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='15px' height='27.2px' viewBox='0 0 15 27.2' %3E%3Cpolyline points='14.3,0.7 1.4,13.6 14.3,26.5 '/%3E%3C/svg%3E");
  }
  .arrow span::after {
    right: 4px;
    -webkit-transform: translateX(50%) translateY(-50%);
        -ms-transform: translateX(50%) translateY(-50%);
            transform: translateX(50%) translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg stroke-width='3' stroke='%23fff' fill='none' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='15px' height='27.2px' viewBox='0 0 15 27.2' %3E%3Cpolyline points='0.7,0.7 13.6,13.6 0.7,26.5 '/%3E%3C/svg%3E");
  }
}

@media only screen and (max-width: 480px) {
  .case-1 .arrow { top: 28%; }
  .case-2 .arrow-1 { top: 33%; }
  .case-2 .arrow-2 { top: 64%; }
}

#progressive-lens .figure .image-wrapper,
.services .figure .image-wrapper {
  /* max-width: 300px; */
  margin: auto;
}

/* LENS ANIMATIONS */
svg,
svg:not(:root) {overflow: unset;width: auto;}

svg .s {
  stroke: #333E58;
  stroke-width: 1.5;
}
svg .f_null { fill: none; }
svg .f { fill: white; }
svg .f_g { fill: #6ECD9C; }
svg .outer-circle { fill: #E2F5EB; }
svg .inner-circle { fill: #FFFFFF; }
svg .oval { opacity: 0.2; fill: #6ECD9C; }

svg .text {
  fill: #333E58;
  stroke: none;
}

svg .outer-circle {
  opacity: 0.2;
  fill: #6ECD9C;
}

svg .inner-circle {
  fill: #FFFFFF;
}

svg .outer-circle,
svg .inner-circle {
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  -webkit-transition: all 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -o-transition: all 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
svg .speech,
svg .lens,
svg .hand,
svg .reflect,
svg .oval,
svg .lens,
svg .arch,
svg .word {
  -webkit-transition: all 2s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: all 2s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 2s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition-delay: 0.5s;
       -o-transition-delay: 0.5s;
          transition-delay: 0.5s;
}

._out svg .reflect {
  opacity: 0;
  transform: translateX(25px) translateY(25px);
}

svg .divider {  stroke-width: 1.5; stroke-dasharray: 4, 6; opacity: 1;}
._out svg .divider { opacity: 0; stroke-width: 0;  }

svg .outer-circle { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
._out svg .outer-circle { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); }

svg .inner-circle { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
._out svg .inner-circle { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); }

._out svg .oval,
._out svg .word { opacity: 0;}
._out svg .near { -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); }
._out svg .far { -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); }

svg .oval-top { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 0.2}
svg .oval-bottom { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 0.2}

svg .word {
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}

._out svg .speech { opacity: 0; transform: translateX(-50px); }
._out svg .lens { opacity: 0; transform: translateY(-50px); }
._out svg .hand { opacity: 0; transform: translateY(50px); }

._out svg .speech .dot {transform: translateY(25px); opacity: 0;}
svg .speech .dot { transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);}
._in svg .speech .dot:nth-of-type(1) { transition-delay: 1.0s;}
._in svg .speech .dot:nth-of-type(2) { transition-delay: 1.2s;}
._in svg .speech .dot:nth-of-type(3) { transition-delay: 1.4s;}

/* ._in svg .s,
._in svg .inner-circle,
._in svg .reflect,
._in svg .lens,
._in svg .arch {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
          animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: dash;
          animation-name: dash;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
}
._in svg .inner-circle,
._in svg .reflect,
._in svg .lens,
._in svg .arch {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

@-webkit-keyframes dash {to{stroke-dashoffset: 0;}}
@keyframes dash {to{stroke-dashoffset: 0;}} */



#price .p-frame-search{
  margin-bottom: 0 !important;
}

#price .content__section__inner {
  padding-top: 0;
}
#price .box-card {
  padding-top: 80px;
}
#price .box-card h2 {
  color: #6ECD9C;
  text-align: center;
  line-height: 32px;
  font-size: 35px;
}

#price .box-card h2 .em {
  display: inline-block;
  font-size: 1.4285714em;
  vertical-align: middle;
  line-height: 32px;
}

#price .box-card h2 .em::before,
#price .box-card h3 .em::before {
  display: inline-block;
  content: '+';
  margin-left: 15px;
  margin-right: 5px;
}

/* #price .box-card h2 .em::after,
#price .box-card h3 .em::after {
  content: '税';
} */

#price .box-card h3 {
  font-size: 30px;
  text-align: center;
  margin-bottom: 50px;
}

#price .box-card h4 {
  text-align: center;
  line-height: 1;
  margin-bottom: 30px;
}

#price .price__chart {
  position: relative;
  margin-bottom: 80px;
}

#price .price__chart .row {
  position: relative;
  max-width: 900px;
  margin: auto;
}

#price .price__chart h4 {
  margin-bottom: 80px;
}

#price .price__chart .row .frame::before {
  display: inline-block;
  font-size: 46.5px;
  content: '+';
  position: absolute;
  bottom: 41%;
  left: 56%;
  transform: translateX(-50%) translateY(50%);
}

#price .price__chart h3 {
  margin-bottom: 0;
  line-height: 1; }

  #price .price__chart .frame h3 {
    font-size: 25px;
    white-space: nowrap;
    }

  #price .price__chart .lens h3 {
    text-indent: -0.25em; }

    #price .price__chart .lens h3::before {
      content: '+';
      margin-right: 5px; }

    /* #price .price__chart .lens h3::after {
      content: '税'; } */

#price .price__lens-spec .row {
  margin-left: -15px;
  margin-right: -15px;
}

#price .price__lens-spec .col {
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 25px;
}

#price .price__lens-spec .col .spec-box {
  border: 1px solid #6ECD9C;
  color: #333e58;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  text-align: center;
  font-size: 14px;
  white-space: nowrap;
}



#price .search-shops h3 {
  text-align: center;
}

#price .search-shops .btn-wrapper {
  margin-top: 50px;
}

#price .search-shops a {
  border-color: #333E58;
  background-color: #fff;
  max-width: 400px;
  width: 100%;
  height: auto;
  line-height: 96px;
  border-radius: 15px;
  font-size: 24px;
}

#price .search-shops a:hover {
  background-color: #333E58;
  color:  #fff;
}

#price .price__lens-spec {
  margin-bottom: 100px;
}

#price .price__types .col {
  /* padding-right: 0; */
  /* padding-left: 0; */
  }

  #price .price__types .col:not(:last-child){
    margin-bottom: 50px;
  }

#price .price__types .col h3,
#price .price__types .col h5,
#price .price__types .col p {
  text-align: center;
}
#price .price__types .col h5 {
  height: 2em;
}

#price .price__types .col p {
  font-size: 15px;
  height: 5.76em;
}

#price .price__types .col figure {
  margin: 30px auto 40px;
}


/* BANNER LINK */

.banner-link .image-wrapper {
  width: 100%;
  max-width: 1000px;
  margin: auto;
}

.banner-link .image-wrapper a {
  position: relative;
  display: block;
  width: 100%;
  padding-bottom: 24%;
  text-decoration: none;
  -webkit-transition: opacity 300ms ease;
  -o-transition: opacity 300ms ease;
  transition: opacity 300ms ease;
  background-image: url('img/banner-link.jpg');
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center;
  transition: opacity 0.3s ease;
}

.banner-link .image-wrapper a:hover {
  opacity: 0.75;
}

.banner-link .image-wrapper a::before {
  display: inline-block;
  /*   display: none; */
  content: '40歳からのメガネ選び';
  width: 6.16em;
  font-size: 28px;
  color: white;
  line-height: 1.4;
  white-space: pre-wrap;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-40%);
  -ms-transform: translateY(-40%);
  transform: translateX(0%) translateY(-45%);
  right: 10%;
  letter-spacing: 0.1em;
  font-weight: lighter;
  font-family: 'Noto Sans Japanese';
}

@media screen and (max-width: 960px) {
  .banner-link .image-wrapper a::before {
    font-size: 24px;
  }
  .hero__title {
    top: 46%;
    font-size: 40px;
  }
}

@media screen and (max-width: 768px) {
  .banner-link .content__section__inner {
    /* padding-top: 50px; */
    /* padding-bottom: 50px; */
  }
  .banner-link .image-wrapper a::before {
    font-size: 18px;
  }
  .hero__title {
    font-size: 30px;
    height: 96px;
  }

}
@media screen and (max-width: 480px) {
  .banner-link .content__section__inner {
    /* padding-top: 30px; */
    /* padding-bottom: 30px; */
  }

/*   .banner-link .image-wrapper a {
    padding-bottom: 50%;
    background-image: url('img/banner-link-sp.jpg')
  } */

  .banner-link .image-wrapper a::before {
    font-size: 14px;
    right: 10px;
  }
}

/* / BANNER LINK */



@media only screen and (max-width: 1300px) {
  .services .texts p br {
    display: none;
  }
}

@media only screen and (max-width: 1200px) {
  #price .price__types .col p br {
    display: none;
  }
}

@media screen and (max-width: 1024px) {
  #contentContainer {
    padding-top: 50px;
  }

  #progressive-lens .figure,
  #progressive-lens .texts,
  .services .figure,
  .services .texts {
    width: 100%;
    float: none;
  }
  .services h3._duplicate {
    display: block;
    margin-bottom: 50px;
  }
  .services .texts h3 {
    display: none;
  }
  #progressive-lens .figure,
  .services .figure {
    max-width: 50vw;
    margin-bottom: 50px;
  }
  #progressive-lens .texts {
    max-width: 75vw;
    margin: auto;
  }

  .difference h3 {
    line-height: 1;
    margin-bottom: 20px;
  }
  .difference .new h3::before {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
  }
  #price .price__lens-spec .col .spec-box {
    font-size: 12px;
    padding: 15px 0;
    line-height: 1;
    border-radius: 10px;
  }
}

@media only screen and (max-width: 1024px) and (min-width: 769px){
  #our-lens .difference > h4 {
    margin-bottom: 100px;
  }
}

@media only screen and (max-width: 960px) {
  .box-card {
      padding: 50px;
  }

  #price .box-card h2 {
    line-height: 70px;
    margin-bottom: 10px;
  }

  #price .price__lens-spec .col {
    width: 50%;
    margin-bottom: 15px;
    padding-right: 7.5px;
    padding-left: 7.5px;
  }

  #price .box-card {padding: 30px;}

}

@media only screen and (min-width: 769px) {
  .content__section__inner {
    max-width: 1366px;
    margin-right: auto;
    margin-left: auto;
  }

  .pc--nowrap {
    flex-wrap: nowrap;
  }

  #price .price__types .col:nth-child(2), #price .price__types .col:nth-child(3) {
    background-image: url("data:image/svg+xml,%3Csvg stroke-dasharray='6' stroke='%23333E58' fill='none' xmlns='http://www.w3.org/2000/svg' width='1px' height='36px' viewBox='0 0 1 36'%3E%3Cline class='st0' x1='0.5' y1='0' x2='0.5' y2='36'/%3E%3C/svg%3E%0A");
    background-repeat: repeat-y;
    background-position: left;
  }

}

@media only screen and (max-width: 768px) {
  p {
    font-size: 16px;
  }
  .only-pc {
    display: none;
  }
  .pc--nowrap {
    flex-wrap: wrap;
  }
  .md--nowrap {
    flex-wrap: nowrap;
  }
  .row {
    margin-left: -15px;
    margin-right: -15px; }

    .col {
      padding-right: 15px;
      padding-left: 15px;
      }

      .col-md-6 {
        width: 50%;
        }

      .col-md-12 {
        width: 100%;
        flex: none;
        float: none !important;
        clear: both;
        margin-bottom: 140px;
        }

      .col-md-12:last-child {
        margin-bottom: 0; }

    .hero__bg__container {
      height: 60vh;
    }
    .hero__bg__container._first {
      background-image: url('img/hero-1-tab.jpg');
    }

    .hero__bg__container._last {
      background-image: url('img/hero-2-tab.jpg');
    }

  .content__section ._symptoms .block-title {
    margin-bottom: 30px;
  }
  .content ._rate li {
    margin-bottom: 40px;
  }

  .box-card {
    padding: 50px 40px;
  }

  #progressive-lens .figure,
  .services .figure {
    width: 40%;
  }

  #progressive-lens .content__section__inner {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  #price .price__types .col {
    width: 50%;
  }
  #price .price__lens-spec {
    max-width: 500px;
    margin: 0 auto 100px;
  }

  #price .price__lens-spec .col .spec-box {
    font-size: 15px;
    line-height: 50px;
    height: 48px;
    padding: 0;
    white-space: nowrap;
  }

  #our-lens .services .row {
    display: block; }

    #our-lens .services .row .figure {
      max-width: 360px;
      margin: 0 auto 60px;
    }

  .difference .new {
    margin-top: 120px;
  }

  .case h4._bubble span {
    height: 40px;
    line-height: 44px;
    font-size: 18px;
    padding: 0 20px;
  }

  .case h4._bubble2 span {
    height: 85px;
    line-height: 24px;
    font-size: 18px;
    padding: 10 20px;
  }
  #price .search-shops a {
    max-width: 320px;
    line-height: 80px;
    font-size: 20px;
  }
}

@media screen and (max-width: 768px) and (min-width: 480px) {
  .col-md-6 {
    /* margin-bottom: 60px; */
  }

  #price .box-card h2 {
    font-size: 30px;
    white-space: nowrap;
  }
}

@media screen and (min-width: 481px) {
  .only-tab {
    display: block;
  }
}
@media screen and (max-width: 480px) {
  .only-pc,
  .only-tab {
    display: none;
  }

  .hero {
    margin-bottom: 50px
  }

  .hero__title {
    top: 50%;
    font-size: 30px;
    transform: translateX(-50%) translateY(-50%);
  }

  .hero__bg__container._last {
      background-image: url('img/hero-2-sp.jpg');
    }

  figure figcaption {
    padding-top: 30px;
  }

  .content__section__inner {
    padding: 100px 15px 20px ;
    }

  h2,
  .section-title._main {
    font-size: 36px;
    z-index: 2; }

  h3,
  .section-title._sub {
    font-size: 22px;
    text-align: left;
  }

  .box-card > h4 {
    text-align: left;
  }

  #price .box-card .price__lens-spec h3 {
    margin-bottom: 30px;
  }

  .services h3._duplicate {
    text-align: left;
  }

  h4 {
    font-size: 20px;
  }

  .cases h4:not(._bubble2) {
    font-size: 14px;
    white-space: nowrap;
   }
  .cases h4:not(._bubble2) {
    font-size: 14px;
    white-space: nowrap;
   }

  p {
    font-size: 15px; }

  .col-sm-6 {
    width: 50%;
  }

  .col-sm-12 {
    width: 100%;
    float: none !important;
    clear: both;
  }

  .row {
    margin-right: -15px;
    margin-left: -15px;
  }

  .col {
    padding-right: 15px;
    padding-left: 15px;
  }

  .hero__bg {
    display: block;
  }
  .hero__bg__container {
    display: block;
    width: 100vw;
    height: 36vh;
  }
  .hero__bg__container._last {
    /* margin-top: 19vw; */
  }

  .hero__bg__container._first {
    background-image: url(img/hero-1-sp.jpg);
  }

  .hero__title-badge {
    width: 100%;
    max-width: 100vw;
    top: unset;
    bottom: -1px;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(100%); }

    .hero__title-badge img {
      max-width: 80%;
    }

  #introduction .section-summary br {
    display: none;
  }
  .section-summary,
  .section-summary._center {
    text-align: justify;
    text-align-last: left;
    letter-spacing: 0.15em;
    margin-right: 0;
    margin-left: 2px;
  }
  .content__section .block-title {
    font-size: 18px;
  }
  .content ._checklist li {
    line-height: 1.688;
    font-size: 15px;
  }
  .content ._checklist li {
    margin-bottom: 5px;
    padding-bottom: 5px;
    padding-left: 35px;
    line-height: 1.414;
  }
  .content ._checklist li::before {
    width: 25px;
    height: 25px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .section-title._banner {
    font-size: 30px;
    height: auto;
    line-height: 90px;
  }
  #progressive-lens .content__section__inner {
    padding-top: 100px;
    padding-bottom: 100px;
  }
  #progressive-lens .content__section__inner,
  #our-lens .content__section__inner,
  #price .content__section__inner {
    padding-right: 15px;
    padding-left: 15px;
  }
  .box-card {
    padding: 6.4vw !important;
  }

  #progressive-lens .figure,
  #our-lens .services .row .figure {
    width: 60vw;
    padding: 0;
  }

   #progressive-lens .texts {
    max-width: 480px;
  }

  #price .box-card h2 {
    line-height: 70px;
    font-size: 30px;
  }

  #price .price__types .col {
    width: 100%;
  }

  #price .price__chart .frame, #price .price__chart .lens {
    margin: 0 auto 100px;
    width: 66vw;
  }


  #price .price__chart .row .frame::before {
    left: 50%;
    bottom: 54%;
  }

  #price .price__lens-spec .col {
    width: 100%;
  }

  #price .search-shops {
    padding-right: 15px;
    padding-left: 15px;
    margin-top: 0;
  }

  #price .search-shops p br {
    display: none;
  }

  #price .search-shops .btn-wrapper {
    margin-top: 30px;
  }

  #price .search-shops a {
    max-width: 80%;
    line-height: 60px;
    font-size: 18px;
  }
}

/* ----------- iPad 1, 2, Mini and Air ----------- */
/* iPad Portrait and Landscape */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 1) {
  .content__section__inner {
    padding-top: 100px;
    padding-bottom: 100px;
  }

}

/* Portrait */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 1) {
  ._checklist li {
    white-space: nowrap;
  }
  .hero__bg__container {
    height: 55vh;
  }
  ._checklist li:nth-child(2), ._checklist li:nth-child(5) {
    white-space: nowrap;
  }
}

/* Landscape */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 1) {
  ._checklist li:nth-child(2),
  ._checklist li:nth-child(5) {
    white-space: nowrap;
  }
  .only-tab--landscape {
    display: block;
  }
  .services .figure {
    padding-right: 0;
    padding-left: 0;
  }
  .services .texts {
    padding-left: 50px;
  }

  .services .row,
  #progressive-lens .row {
    display: flex;
    flex-wrap: nowrap;
    max-width: 90vw;
  }

  #progressive-lens .figure, .services .figure {
    width: 50%;
    margin-bottom: 0;
    padding-right: 0;
  }

  #progressive-lens .texts {
    padding-left: 50px;
  }
}

/* ----------- iPad Pro 12.9" ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 1024px)
  and (max-device-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2) {
  ._checklist li:nth-child(3) {
    white-space: unset;
  }
  .line-up__glasses > .row:first-child {
    margin-bottom: 120px;
  }
}

/* iPhone 6-7-8 Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
  .hero__bg__container {
    height: 70vh;
  }

  .col-4.col-md-12 {
    width: 33.333%;
  }
  .line-up__glasses .glasses-name._en {
    margin-bottom: 15px;
    margin-left: -0.05em;
  }
  #customize .col-4.col-md-12 {
    width: 100%;
  }
}

  /* ---------------------20200218 add
  --------------------------------------------------------------- */
  /* ---------------------Bnr
  --------------------------------------------------------------- */
  .bnr-20200218{
    width: 100%;
    max-width: 1250px;
    margin: auto;
    padding: 150px 20px 0;
  }
  .bnr-20200218 img{
    width: 100%;
  }


  /* ---------------------共通 add
--------------------------------------------------------------- */
#price .box-card h2 .em {
  display: inline-block;
  font-size: 1.4285714em;
  vertical-align: middle;
  line-height: 32px;
}

/* #price .box-card h2 .em::after {
  content: '税';
} */
#price .price__chart .lens h3 {
  width: 170px;
  margin: auto;
  text-indent: -0.25em; }
/* #price .price__chart .lens h3::after {
  content: '税';
} */
#price .price__chart {
  margin-bottom: 0;
}
.simulation{
  text-align: center;
  font-size: 20px;
  letter-spacing: .15em;
}
@media screen and (max-width: 768px) {
  .simulation{
    font-size:5.067vw;
  }
}
.simulation_btn{
  width: 500px;
  height: 80px;
  border-radius: 10px;
  background-color: #4f5b74;
  margin: 25px auto 90px;
  transition: .3s ease;
}
@media screen and (max-width: 768px) {
  .simulation_btn{
    width: 100%;
    height: 16vw;
    max-height: 120px;
    border-radius: 2.667vw;
    margin: 25px auto 83px;
    transition: .3s ease;
  }
}
.simulation_btn:hover{
  opacity: .8;
}
@media screen and (max-width: 768px) {
  .simulation_btn:hover{
    opacity: 1;
  }
}
.simulation_btn a{
  display: grid;
  color: #fff;
  line-height: 80px;
  text-align: center;
  letter-spacing: .05em;
  text-decoration: none;
}
@media screen and (max-width: 768px) {
  .simulation_btn a{
    line-height: 16vw;
  }
}
#price .price__lens-spec .col .spec-box {
  border: 1px solid #6ECD9C;
  color: #333e58;
  -webkit-border-radius: 35px;
          border-radius: 35px;
  text-align: center;
  font-size: 14px;
  white-space: nowrap;
  height: 60px;
  line-height: 60px;
}
@media screen and (max-width: 768px) {
  #price .price__lens-spec .col .spec-box {
    font-size: 4vw;
    height: 13.333vw;
    line-height: 13.333vw;
    border-radius: 6.667vw;

  }
}
#price .price__lens-spec .row {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  #price .price__lens-spec .row {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    flex-flow: column nowrap;
    align-content: flex-start;
  }
}
#price .price__lens-spec .col {
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 295px;
  height: 60px;
}
@media screen and (max-width: 768px) {
  #price .price__lens-spec .col {
    width: 100%;
    height: 13.333vw;
    padding-left: 0;
    padding-right: 0;

  }
}
.refractive{
  width: 100%;
  max-width: 626px;
  margin: 95px auto 80px;
}
@media screen and (max-width: 768px) {
  .refractive{
    max-width: 100%;
    margin: 74px auto 25px;
  }
}
.refractive ul{
  width: 100%;
  display: flex;
  justify-content: space-between;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .refractive ul{
    flex-flow: column nowrap;
    align-content: flex-start;
  }
}

.refractive li{
  width: 100%;
  max-width: 295px;
  height: 60px;
  border-radius: 35px;
}
@media screen and (max-width: 768px) {
  .refractive li{
    max-width: 100%;
    height: 13.333vw;
    max-height: 100px;
    border-radius: 6.667vw;
  }
}
.refractive li:nth-child(1){
  border: 1px solid #6ec3cd;
}
@media screen and (max-width: 768px) {
  .refractive li:nth-child(1){
    margin-bottom: 15px;
  }
}
.refractive li:nth-child(2){
  border: 1px solid #6e84cd;
}
.refractive li:nth-child(1) span{
 color:#6ec3cd;
}

.refractive li:nth-child(2) span{
  color: #6e84cd;
}
.refractive li span{
  line-height: 60px;
  display: block;
  text-align: center;
  margin: auto;
  font-size: 14px;
}
@media screen and (max-width: 768px) {
  .refractive li span{
    line-height: 13.333vw;
  }
}
.price_note{
  width: 100%;
}
.price_note span{
  font-size: 17px;
  letter-spacing: .1em;
  margin-bottom: 10px;
  display: block;
}
@media screen and (max-width: 768px) {
  .price_note span{
    font-size: 3.733vw;
  }
}
.price_note ul{
  width: 100%;
  margin: 0 auto 120px;
}
@media screen and (max-width: 768px) {
  .price_note ul{
    margin: 0 auto 80px;
  }
}
.price_note ul li{
  font-size: 15px;
  letter-spacing: .05em;
  line-height: 2;
  padding-left: 1em;
  text-indent: -1em;
}
@media screen and (max-width: 768px) {
  .price_note ul li{
    font-size: 3.733vw;
    margin-bottom: 10px;
  }
}
.price_note ul li a{
  position: relative;
  text-decoration: none;
  color: #8991A2;
}
/* .price_note ul li a:after{
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  left: 0;
  bottom: -5px;
  background-color: #8991A2;
} */
.ff_normal{
  display: inline !important;
  font-family: YuGothic, /* Mac用 */'Yu Gothic', /* Windows用 */sans-serif !important;
}
.btn-200218 a{
  background-color: #4f5b74 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  transition: .3 ease;
}
.btn-200218 a:hover{
  opacity: .8;
}
#price .search-shops {
  margin-bottom: 100px;
  text-align: center;
}

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

#price .box-card h3 {
  margin-bottom: 30px;
}
.col-200218{
  margin-bottom: 0 !important;
}
}


/* ----------- LENS GUIDE TOP 導線追加 2020/08 ----------- */.spOnly {
  display: none !important;
}

@media only screen and (max-width: 768px) {
  .spOnly {
    display: block !important;
  }
}

.pcOnly {
  display: block !important;
}

@media only screen and (max-width: 768px) {
  .pcOnly {
    display: none !important;
  }
}

.lensguidetop-link {
  width: 84%;
  max-width: 1040px;
  margin: auto auto 80px;
}

.lensguidetop-link .banner-link {
  width: 100%;
  padding: 0;
  color: #3e3a39;
  background: #eeeeee;
}

@media only screen and (min-width: 769px) {
  .lensguidetop-link .banner-link {
    width: 100%;
    max-width: 660px;
    margin: auto;
  }
  .lensguidetop-link .banner-link a {
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
  }
  .lensguidetop-link .banner-link a:hover {
    opacity: 0.8;
  }
}



.bnr-area {
	margin:10% auto 15%;
	width:80%;
}
.bnr-area a {
  text-decoration: none;
}
@media only screen and (min-width: 769px) {
	.bnr-area {
	margin:  140px auto;
	max-width: 1100px;
	width: 100%;
	}
}
.bnr-area .bnr-big ul {
  list-style: none;
}
.bnr-area .bnr-big ul li {
  margin-bottom:8.359%;
}
.bnr-area .bnr-big ul li .text {
	text-align:center;
	font-size:3.25vw;
	color:#3e3a39;
	margin-top:3%;
        line-height: 1.3;
        letter-spacing: 0.05em;
}
.bnr-area .bnr-big ul li img {
	width:100%;
}
@media only screen and (min-width: 769px) {
	.bnr-area .bnr-big ul {
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		justify-content: center;
		width:100%;
		margin:0 auto;
	}
	.bnr-area .bnr-big ul li {
	margin-bottom:107px;
	width:48%;
	}
	.bnr-area .bnr-big ul li:nth-child(2n) {
	margin-left:4%;
	}
	.bnr-area .bnr-big ul li .text {
		font-size:18px;
		margin-top:25px;
	}
}


.bnr-area .bnr-small ul {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
      flex-wrap: wrap;
      list-style: none;
}
.bnr-area .bnr-small ul li:nth-child(2n) {
	margin-left:4%;
}
.bnr-area .bnr-small ul li {
	margin-bottom:5%;
	width:48%;
}
.bnr-area .bnr-small ul li .title {
	text-align:left;
	font-size:3.25vw;
	color:#3e3a39;
	margin-top:5%;
  font-weight: bold;
  line-height: 1.3;
  text-align: justify;
  text-justify: inter-ideograph;
  letter-spacing: 0;
}
.bnr-area .bnr-small ul li .text {
	text-align:left;
	font-size:2.35vw;
	color:#3e3a39;
  margin-top:5%;
  line-height: 1.7;
  letter-spacing: 0;
  text-align: justify;
  text-justify: inter-ideograph;
}
.bnr-area .bnr-small ul li img {
	width:100%;
}
@media only screen and (min-width: 769px) {
	.bnr-area .bnr-small ul {
		width:100%;
		margin:0 auto;
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		-ms-flex-wrap: nowrap;
		    flex-wrap: nowrap;
	}
	.bnr-area .bnr-small ul li:nth-child(2n) {
	margin-left:0%;
}
	.bnr-area .bnr-small ul li:last-child {
		margin-right:0%;
	}
	.bnr-area .bnr-small ul li {
		margin-bottom:5%;
		width:46%;
		max-width: 246px;
		margin-right:3.5%;
	}
	.bnr-area .bnr-small ul li .title {
		font-size:18px;
		margin-top:15px;
	}
	.bnr-area .bnr-small ul li .text {
		font-size:14px;
		margin-top:10px;
	}
	.bnr-area .bnr-small ul li img {
		width:100%;
	}
}

/* ipadリンク対応 */
#store__ipad #header {
	display: none;
  }

  #store__ipad #contentContainer {
	padding-top: 0px;
  }

  #store__ipad .p-under__mv {
	margin-top: 0px;
  }

  #store__ipad .p-frame-search .l-inner {
	display: none;
  }

  #store__ipad .p-howto__container a {
	display: none;
  }

  #store__ipad .bnr-area {
	display: none;
  }

  #store__ipad .simulation_btn {
	display: none;
  }

  #store__ipad .search-shops .btn-wrapper {
	display: none;
  }

  #store__ipad .footer {
	display: none;
  }

  #store__ipad .ipt_search {
	display: none;
  }

  .p-howto{
    margin-top: 80px;
  }