@charset "UTF-8";
/*TOPここから------------------------------------*/
.headerWrap {
  position: relative; }
  .headerWrap .sns_icon {
    position: absolute;
    right: 4vw;
    top: 4vw; }
    .headerWrap .sns_icon a .insta {
      width: 35px;
      height: auto; }

.topPage .kv .baseMovie {
  padding: 38% 0 0;
  background: url(https://www.footmark.co.jp/footmarknatural/assets/img/kvimg.jpg) center top no-repeat;
  background-size: 100% auto; }

.globalNavi ul li + li {
  margin-left: 5vw; }

.topPage .bgimgWrap .sec03 {
  padding: 80px 0 20px !important; }

.bx-controls {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 40px; }

.aquahole_title {
  padding-top: 2vw;
  display: block;
  background-color: #fff;
  line-height: 2;
  text-align: center;
  width: 100%; }
  .aquahole_title .title {
    font-size: 4.16vw;
    color: #009bcf;
    position: relative;
    display: inline-block;
    font-weight: 500;
    z-index: 0; }
    .aquahole_title .title::before {
      content: "";
      background-color: #c6d4ec;
      height: 20px;
      width: 97%;
      display: block;
      bottom: 1.5vw;
      position: absolute;
      z-index: -1; }
  .aquahole_title .sub {
    font-size: 2vw;
    color: #009bcf;
    font-weight: 500; }
  .aquahole_title .aqualogo {
    margin-top: 2vw; }
    .aquahole_title .aqualogo > span {
      font-size: 4vw;
      color: #fff;
      font-weight: 300;
      background-color: #009bcf;
      display: inline-block;
      line-height: 1;
      padding: 0 25rem 5rem 5rem;
      position: relative;
      margin-left: -130px; }
      .aquahole_title .aqualogo > span > span {
        position: absolute;
        bottom: -5px;
        font-size: 30px; }
    .aquahole_title .aqualogo .icon {
      width: 110px;
      margin: 0 0 0 20px;
      position: absolute; }

.topPage .sec02 .functionBox .midCol01 .spec .flexCol {
  background-color: #fff; }

.topPage .sec02 .functionBox .midCol01 .whats {
  padding: 20px 0 20px 240px;
  background: #fff url(../img/chara.jpg) no-repeat left 4vw center/contain; }

.movie_container {
  background-color: #fff;
  padding: 50px 0 80px 0;
  width: 100%; }
  .movie_container .movie {
    text-align: center; }
    .movie_container .movie .banner {
      width: 70%; }

.modal_video {
  width: 100%; }

.storelist {
  padding: 40px; }
  .storelist .storelist-button {
    display: block;
    width: 40%;
    margin: auto;
    text-align: center;
    border: 1px solid #000;
    font-size: 16px;
    font-weight: 300;
    padding: 20px 0;
    position: relative;
    background-color: #fff;
    transition: 0.2s; }
    .storelist .storelist-button .fas {
      margin: 0 10px; }
    .storelist .storelist-button::after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      left: auto;
      right: 10px;
      background: url(../img/store/arrow.svg) center center no-repeat;
      width: 25px;
      height: 6px;
      background-size: contain;
      transform: scale(-1, 1); }
    .storelist .storelist-button:hover {
      background-color: #000;
      color: #fff;
      text-decoration: none; }
      .storelist .storelist-button:hover::after {
        background: url(../img/store/arrow-w.svg) center center no-repeat; }

.topPage .sec03 .coodList li {
  flex-basis: 33.33%; }
  @media only screen and (max-width: 767px) {
    .topPage .sec03 .coodList li {
      flex-basis: 50%;
      margin: auto; } }
  @media only screen and (max-width: 767px) {
    .topPage .sec03 .coodList li .colTitle {
      font-size: 4.4vw; } }
  .topPage .sec03 .coodList li .clickBtn {
    width: 60%; }
    @media only screen and (max-width: 767px) {
      .topPage .sec03 .coodList li .clickBtn {
        max-width: 383px;
        width: 100%; } }
    .topPage .sec03 .coodList li .clickBtn em {
      width: 100%; }

.sp {
  display: none !important; }

@media only screen and (max-width: 767px) {
  .headerWrap .sns_icon {
    right: 7vw;
    top: 7vw; }
    .headerWrap .sns_icon a .insta {
      width: 7vw; }

  .bx-controls {
    bottom: 10px; }

  .storelist .storelist-button {
    width: 90%; }

  .sp {
    display: block !important; }

  .pc {
    display: none !important; }

  .bx-wrapper {
    margin-top: 0;
    bottom: 0; }

  .topPage .sec02 .functionBox .midCol01 .whats {
    padding: 10px 0 250px;
    background: #fff url(../img/chara.jpg) no-repeat center bottom/150px; }

  .movie_container {
    background-color: #fff;
    padding: 40px 0; }
    .movie_container .movie {
      text-align: center; }
      .movie_container .movie .banner {
        width: 90%; }

  .aquahole_title .title {
    font-size: 6.5vw; }
    .aquahole_title .title::before {
      height: 2vw;
      bottom: 2vw; }
  .aquahole_title .sub {
    font-size: 3vw; }
  .aquahole_title .aqualogo > span {
    font-size: 6vw;
    margin-top: 2vw;
    padding: 0 25rem 5rem 5rem;
    position: relative;
    margin-left: -120px; }
    .aquahole_title .aqualogo > span > span {
      position: absolute;
      bottom: -5px;
      font-size: 20px; }
  .aquahole_title .aqualogo .icon {
    width: 70px;
    margin: 2vw 0 0 20px;
    position: absolute; } }
/*TOPここまで------------------------------------*/
/*store共通ここから------------------------------------*/
.globalNavi ul li + li {
  margin-left: 5vw; }

.storecommon {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
  .storecommon .kv::after {
    content: '';
    display: block;
    width: 407px;
    height: 114px;
    background: url(../img/store/footmarknatural.svg) center center no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    bottom: 0;
    right: auto;
    left: 0;
    margin: auto;
    -webkit-transform: translate(40%, 0);
    -ms-transform: translate(40%, 0);
    transform: translate(40%, 0); }
  .storecommon .kv .hoverTitle {
    left: auto;
    right: 0; }
    .storecommon .kv .hoverTitle .jp {
      border-left: none; }
  .storecommon .hero {
    background: url(../img/store/bg.png) center center;
    background-size: cover;
    height: 30vw; }
  .storecommon .MainContents {
    max-width: 1160px;
    margin: auto;
    padding: 20px; }
    .storecommon .MainContents .breadcrumb .crumbchild {
      font-size: 14px;
      font-weight: 300;
      display: inline-block; }
      .storecommon .MainContents .breadcrumb .crumbchild::after {
        content: '>';
        margin: 5px; }
      .storecommon .MainContents .breadcrumb .crumbchild:last-child::after {
        content: none; }
    .storecommon .MainContents .area {
      margin: 3em 0; }
      .storecommon .MainContents .area .areaname {
        font-size: 25px;
        font-weight: 600;
        border-bottom: 1px solid #000;
        line-height: 2;
        margin: 40px 0 20px; }

@media only screen and (max-width: 767px) {
  .storecommon .kv::after {
    width: 40%;
    height: auto;
    top: -10vw;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none; }
  .storecommon .kv .hoverTitle {
    left: 0;
    right: 0;
    margin: auto;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none; }
  .storecommon .hero {
    height: 51.25vw; } }
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*index: 商品 */
@media only screen and (max-width: 767px) {
  .productPage .kv .hoverTitle .hover-sp {
    display: grid; } }
@media only screen and (max-width: 767px) {
  .productPage .kv .hoverTitle .hover-sp .en {
    font-size: 7.6vw; } }
@media only screen and (max-width: 767px) {
  .productPage .kv .hoverTitle .hover-sp .jp {
    width: 65%;
    font-size: 5.4vw;
    margin: 0.25em auto 0;
    padding: 0.25em 0; } }
.productPage .kv .kvlist li {
  flex-basis: 33.33%; }
  @media only screen and (max-width: 767px) {
    .productPage .kv .kvlist li {
      margin: auto; } }
  .productPage .kv .kvlist li.hovered:before, .productPage .kv .kvlist li.active:before {
    background: rgba(0, 0, 0, 0); }

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*index: 店舗詳細 */
@media only screen and (max-width: 767px) {
  .storeareapage .return {
    width: 90%; } }
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*index: トップページ　動画エリア */
#home-special {
  overflow: hidden; }
  #home-special .image {
    float: left; }
    @media only screen and (max-width: 768px) {
      #home-special .image {
        float: none; } }
  #home-special .caption {
    float: right;
    position: relative !important;
    z-index: 2;
    margin-left: -20%; }
    @media only screen and (max-width: 768px) {
      #home-special .caption {
        float: none; } }

#home-special .yt-box-wrap {
  margin: 0 auto;
  max-width: 660px;
  padding: 6rem 3% 0;
  clear: both; }
  @media only screen and (max-width: 767px) {
    #home-special .yt-box-wrap {
      padding: 2rem 3% 4rem;
      width: 94vw; } }
  #home-special .yt-box-wrap .yt-box {
    padding-top: 56.2%; }

/*# sourceMappingURL=add-style.css.map */