/*--- 動画ローディング ---*/
.dot-spin {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  z-index: 50;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: transparent;
  color: transparent;
  box-shadow: 0 -18px 0 0 #d70000, 12.72984px -12.72984px 0 0 #d70000, 18px 0 0 0 #d70000, 12.72984px 12.72984px 0 0 rgba(152, 128, 255, 0), 0 18px 0 0 rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 0 rgba(152, 128, 255, 0), -18px 0 0 0 rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 0 rgba(152, 128, 255, 0);
  animation: dot-spin 1.5s infinite linear;
}
#loadingback {
  content: '';
  position: absolute;
  background-color: #fbf5f1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
@keyframes dot-spin {
  0%,
  100% {
    box-shadow: 0 -18px 0 0 #d70000, 12.72984px -12.72984px 0 0 #d70000, 18px 0 0 0 #d70000, 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
  }
  12.5% {
    box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 0 #d70000, 18px 0 0 0 #d70000, 12.72984px 12.72984px 0 0 #d70000, 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
  }
  25% {
    box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 0 #d70000, 12.72984px 12.72984px 0 0 #d70000, 0 18px 0 0 #d70000, -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
  }
  37.5% {
    box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 0 #d70000, 0 18px 0 0 #d70000, -12.72984px 12.72984px 0 0 #d70000, -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
  }
  50% {
    box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 0 #d70000, -12.72984px 12.72984px 0 0 #d70000, -18px 0 0 0 #d70000, -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
  }
  62.5% {
    box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 0 #d70000, -18px 0 0 0 #d70000, -12.72984px -12.72984px 0 0 #d70000;
  }
  75% {
    box-shadow: 0 -18px 0 0 #d70000, 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 0 #d70000, -12.72984px -12.72984px 0 0 #d70000;
  }
  87.5% {
    box-shadow: 0 -18px 0 0 #d70000, 12.72984px -12.72984px 0 0 #d70000, 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 0 #d70000;
  }
}

html , body {
  position: relative;
  font-family: Avenir, "Helvetica Neue", Helvetica, Arial, "Yu Gothic Medium", "游ゴシック Medium", YuGothic, 游ゴシック体, "Hiragino Sans", ヒラギノ角ゴシック, メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 16px;
  color: #333;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  animation: fadeIn 2s ease 0s 1 normal;
  -webkit-animation: fadeIn 2s ease 0s 1 normal;
  z-index: -2;
}

/*--- 画面全体をフェードイン(animation設定) ---*/
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
a {
  color: #000;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
a:hover, a:active, a:focus {
  outline: none;
  text-decoration: none;
  color: rgba(0, 0, 0, 0.5);
}
a img {
  opacity: 1;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
a img:hover {
  opacity: 0.7;
}
h3 {
  font-family: 'Noto Serif JP', serif;
  font-size: 2em;
  color: #fff;
  margin: 0;
  padding: 35px 0;
  text-align: center;
  letter-spacing: 5px;
}
h4 {
  font-family: 'Noto Serif JP', serif;
  font-size: 25px;
  font-weight: bold;
  line-height: 1.3;
  letter-spacing: 2px;
}
h4 span {
  display: block;
  font-size: 15px;
  letter-spacing: 1px;
}
h5 {
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 2px;
}

/*--- 要素のフェードイン ---*/
.effect-fade {
    opacity : 0;
    transform : translate(0, 30px);
    transform: none !important;
    transition : all 800ms;
}
.effect-fade.effect-scroll {
    opacity : 1;
    transform : translate(0, 0);
    transform: none !important;
}

/* --------------------------------------------
    nav
-------------------------------------------- */
#drawer-checkbox {
  display: none;
}
#drawer-icon {
  cursor: pointer;
  display: inline-block;
  height: 50px;
  width: 60px;
  margin: 25px auto;
  padding: 10px;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0%);
  -webkit-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  z-index: 999;
  cursor: pointer;
}
#drawer-icon::before {
  content: "MENU";
  font-family: 'Libre Baskerville', serif;
  font-size: .7em;
  letter-spacing: 0.5px;
  position: absolute;
  top: 92%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
#drawer-checkbox:checked ~ #drawer-icon::before {
  content: "CLOSE";
}
#drawer-icon span {
  background:  #333;
  border-radius: 0px;
  display: block;
  height: 2px;
  left: 10px;
  margin: 0;
  position: absolute;
  top: 50%;
  transition: all 0.3s ease-in-out;
  width: 32px;
}
#drawer-icon span::before,
#drawer-icon span::after {
  -webkit-transform: rotate(0);
  background: #333;
  border-radius: 0px;
  content: "";
  display: block;
  height: 100%;
  left: 50%;
  margin: -8% 0 0 -50%;
  position: absolute;
  top: 50%;
  transform: rotate(0);
  transition: all 0.3s ease-in-out;
  width: 100%;
}
#drawer-icon span::before {
  margin-top: -37%;
  width: 40px;
}
#drawer-icon span::after {
  margin-top: 32%;
  width: 27px;
}
#drawer-checkbox:checked ~ #drawer-icon span {
  background: rgba(51, 51, 51, 0);
}
#drawer-checkbox:checked ~ #drawer-icon span::before,
#drawer-checkbox:checked ~ #drawer-icon span::after {
  content: "";
  display: block;
  height: 100%;
  left: 50%;
  margin: -8% 0 0 -42%;
  position: absolute;
  top: 50%;
  width: 100%;
}
#drawer-checkbox:checked ~ #drawer-icon span::before {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
#drawer-checkbox:checked ~ #drawer-icon span::after {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
/*--- メニューコンテンツ ---*/
#drawer-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 80px;
  z-index: 40;
  width: 300px;
  /*height: 500px;*/
  background: #fff;
  transition: all 0.3s ease-in-out 0s;
  transform: translateX(-390px);
}
#drawer-content .menu-box {
  margin: 10px;
  padding: 25px 25px 20px;
  background-color: #f5f8f5;
}
#drawer-content .menu-box img {
  /*zoom: 0.32;*/
  height: 58px;
}
#drawer-content .menu-box .menu-list {
  margin-top: 25px;
}
#drawer-content .menu-box:last-of-type {
  padding: 0px 25px 20px;
}
#drawer-content .menu-box .menu-list li {
  position: relative;
  font-size: 15px;
  line-height: 1.8;
  list-style-type: none;
}
#drawer-content .menu-box .menu-list li:before {
  content: "";
  width: 15px;
  height: 1.5px;
  background-color: #000;
  position: absolute;
  top: 50%;
  left: -25px;
  transform: translate(-50%, 0%);
  -webkit-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
}
#drawer-content .menuicon {
  width: 100%;
  /*margin: 75px auto 80px;*/
  margin: 25px auto 30px;
  text-align: center;
}
#drawer-content .menuicon img {
  /*zoom:0.35;*/
  width: 24px;
}

#drawer-checkbox:checked ~ #drawer-content {
  transform: translateX(0);
  /*box-shadow: 6px 0 25px rgba(0, 0, 0, 0.16);*/
}
#drawer-close {
  display: none;
  position: fixed;
  z-index: 39;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background: #000;*/
  opacity: 0;
  transition: all 0.3s ease-in-out 0s;
}
#drawer-checkbox:checked ~ #drawer-close {
  display: block;
  opacity: 0.3;
}


/* --------------------------------------------
    sidebar
-------------------------------------------- */
#sidebar {
  position: fixed;
  width: 80px;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: #fff;
  filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.1));
  z-index: 999;
}
#sidebar .logo01 {
  width: 46px;
  margin: 0;
  position: relative;
  z-index: 999;
}
.navbar-brand {
  height: auto;
  padding: 10px 17px 25px;
}
.sidebtn {
  margin: 25px 0 0;
  position: absolute;
  z-index: 100;
  bottom: 25px;
  margin: 25px 0 0;
  padding: 0;
}
.sidebtn  li {
  list-style: none;
  margin: 5px 0;
}
.sidebtn  li img {
  /*zoom:0.3;*/
  width: 67px;
}

/* --------------------------------------------
    main-contents
-------------------------------------------- */
#content-main {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  padding-left: 80px;
}
.img-main01 {
  height: auto;
  overflow: hidden;
  margin-bottom: 80px;
  position: relative;
}
.img-main01 img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
/*--- 動画 ---*/
#video-container {
    overflow: hidden;
    /*position: relative;*/
    height: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#background_video {
    width: 100%;
    height: auto;
}
/*--- 再生ボタン ---*/
.smovie {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
#main_v .smovie img {
  width: 100%;
}


/*--- #sec01 ---*/
.sec01-box {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 50px auto;
  padding: 80px 35px 90px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.sec01-box:first-child { background-image: url(../img/sec01-bg01.png); }
.sec01-box:nth-child(2) { background-image: url(../img/sec01-bg02.png); }

.sec01-box::before {
  position: absolute;
  content: "";
  display: inline-block;
  width: 160px;
  height: 160px;
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
.sec01-box:first-child::before {
  background-image: url(../img/sec01-img01.png);
  top: 30%;
  left: 15%;
}
.sec01-box:nth-child(2)::before {
  background-image: url(../img/sec01-img02.png);
  top: 25%;
  right: 0%;
}
.sec01-tit {
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
}
.sec01-tit::after {
  position: relative;
  content: "";
  display: block;
  width: 6px;
  height: 35px;
  background-image: url(../img/sec01-titaft.png);
  background-size: contain;
  background-repeat: no-repeat;
  margin: 12px auto;
  left: 0%;
  -webkit-transform: translate(-50%,0%);
  transform: translate(-50%,0%);
}
.sec01-tit img {
  width: auto!important;
  /*zoom: 0.3;*/
  height: 34.5px;
}
.sec01-txt {
  width: 100%;
  max-width: 600px;
  line-height: 1.8;
  margin: 10px auto 0;
  padding: 0;
}
.sec01-box:first-child .sec01-txt , .sec01-box:nth-child(2) .sec01-txt {
  padding: 0 25px;
}

#sec01 .row {
  max-width: 960px;
  padding: 35px;
}
#sec01 .row img {
  width: 100%;
}
#sec01 .row .sec01-txt {
  line-height: 2;
  margin-top: 25px;
}
#sec01 .row .clearfix {
  margin-bottom: 35px;
}

/*--- #sec02 ---*/
#sec02 h3 {
  position: relative;
  background-color: #344631;
}
#sec02 h3::before {
  position: absolute;
  content: "";
  display: inline-block;
  width: 80px;
  height: 80px;
  background-image: url(../img/sec02-titimg.png);
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0;
  top: 50%;
  left: 25%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
#sec02 .sec02-icon {
  display: block;
  width: 25px;
  object-fit: contain;
  margin: 35px auto;
}
#sec02 .sec02-tit01 {
  width: 100%;
  max-width: 380px;
  text-align: center;
  background-image: url(../img/prod-titbg01.png);
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0 auto;
}
#sec02 .sec02-tit01 img {
  /*zoom: 0.3;*/
  height: 90px;
}
#sec02 .sec02-box {
  width: 100%;
  max-width: 900px;
  margin: 50px auto;
}
#sec02 .sec02-box h5 {
  margin-top: 35px;
}
#sec02 .sec02-box img {
  width: 100%;
}
#sec02 .sec02-txt {
  margin-top: 25px;
  line-height: 1.8;
}
#sec02 .sec02-img {
  margin: 0 -15px;
  padding: 0;
}
#sec02 .sec02-img img {
  width: 100%;
  height: 600px;
  object-fit: cover;
  object-position: center;
}

.prod-point {
  margin: 60px auto 35px;
}
.prod-point .point-tit {
  text-align: center;
  margin: 35px auto 25px;
}
.prod-point .point-tit img {
  /*zoom:0.3;*/
  height: 50px;
  max-width: 100%;
}
.prod-point .sec02-box {
  margin: 25px auto 0px!important;
}
/*--- 商品紹介 ---*/
#sec02 .sec02-tit02 {
  position: relative;
  width: 100%;
  max-width: 320px;
  text-align: center;
  background-image: url(../img/);
  background-size: contain;
  background-repeat: no-repeat;
  margin: 80px auto 50px;
}
#sec02 .sec02-tit02 img {
  /*zoom: 0.3;*/
  height: 82px;
}
#sec02 .sec02-tit02::before, #sec02 .sec02-tit02::after {
  content: "";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 150px;
  height: 7px;
  background-image: url(../img/tit-bg02.png);
  background-size:  contain;
  background-repeat: no-repeat;
  background-position: center;
}
#sec02 .sec02-tit02::before { left: -70px; }
#sec02 .sec02-tit02::after { right: -70px; }
#sec02 .sec02-box h4 {
  position: relative;
  display: inline-block;
  letter-spacing: 10px;
  margin-bottom: 25px;
  margin-left: 25px;
}
#sec02 .sec02-box h4 span {
  display: inline-block;
  letter-spacing: 4px;
  margin-left: 5px;
}
#sec02 .sec02-box h4::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 105%;
  width: 37px;
  height: 7px;
  background-image: url(../img/tit-bg01.png);
  background-size:  contain;
  background-repeat: no-repeat;
  background-position: center;
}
#sec02 .prod-tit {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 1px;
  margin-top: 5px;
  margin-left: 10px;
}
#sec02 .prod-tit span {
  font-size: 15px;
  margin-left: 5px;
}
#sec02 .prod-time {
  font-size: 15px;
}

.apple-box .col-xs-12 img {
  margin: 0 auto;
}
.apple-box .col-xs-12 .prod-tit {
  margin: 25px auto 15px!important;
}
/*
.apple-box .prod-time {
  margin: 15px auto!important;
}
*/
@media screen and (max-width: 767px) {
  .apple-box .col-xs-12 .lightup-img { max-width: 230px!important; margin: 25px auto 50px; }
}


/*--- #sec03 ---*/
#sec03 {
  background-color: #fbf5f1;
  text-align: center;
  margin: 0 -15px;
}
#sec03 .sec03-box {
  width: 100%;
  max-width: 900px;
  margin: 50px auto;
}
#sec03 .sec03-box img {
  width: 100%;
}
#sec03 .sec03-tit {
  width: 100%;
  text-align: center;
  background-image: url(../img/sec03-titbg.png);
  background-size: contain;
  background-repeat: repeat-x;
  background-position: bottom;
  margin: 50px 0;
}
#sec03 .sec03-tit img {
  /*zoom: 0.3;*/
  height: 58px;
  padding: 0 7px;
  background-color: #fbf5f1;
}


/*--- インスタ ---*/
.eapps-instagram-feed-title {
   display: none!important;
}
.fa-instagram { margin-bottom: 25px; }
.fa-instagram:before {
    content: "\f16d";
    color: #009245;
    font-size: 32px;
}


/*--- #sec04 ---*/
#sec04 .sec04-box {
  width: 100%;
  max-width: 900px;
  margin: 50px auto;
  text-align: center;
}
#sec04 .sec04-box img {
  width: 100%;
}
#sec04 .sec04-tit img {
  zoom: 0.3;
  background-color: #fbf5f1;
  padding: 0 25px;
}
#sec04 .sec04-box a img {
  /*zoom: 0.3;*/
  height: 52px;
  margin: 20px auto;
  width: auto!important;
}
.map01 {
  border: 5px solid #fbf5f1;
}


/* --------------------------------------------
    footer
-------------------------------------------- */
#ft01 {
  background-color: #fbf5f1;
  position: relative;
  width: 100%;
  color: #000;
  font-size: 0.9em;
}
#ft01 .row {
  position: relative;
  padding: 25px 15px;
}
#ft01 p {
  font-size: 15px;
  text-align: center;
}
#ft01 .ft-menu {
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
#ft01 .ft-menu li {
  display: inline-block;
  margin: 15px 0;
}
#ft01 .ft-menu li a {
  margin: 0 15px;
  padding: 3px;
  color: #000;
  border-bottom: 0.5px solid #000;
}
#ft01 .ft-menu li a:hover {
  color: rgba(0, 0, 0, 0.5);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.5);
}

#ft01 .logoft {
  /*zoom: 0.3;*/
  height: 53px;
  margin: 6px 0 2px;
}
#ft01 h4 {
  text-align: center;
  margin: 25px 0;
}
#ft01 .ft-txt a {
  border-bottom: solid 1px #000;
}

#ft01 .cp {
  font-family: 'Libre Baskerville', serif;
  background-color: #fff;
  font-size: 0.85em;
  letter-spacing: 2px;
  text-align: center;
  padding: 15px 0;
}


/* --------------------------------------------
    top page
-------------------------------------------- */
#pagetop {
    position: fixed;
    right: 20px;
    bottom: 30px;
    cursor: pointer;
    z-index: 2;
}
#pagetop img {
   /*zoom: 0.3;*/
    width: 46px;
}


/* --------------------------------------------
    mfp-content
-------------------------------------------- */
.popup-modal img { width: 100%; }
.mfp-content .row {
  background-color: #fbf5f1;
  width: 70%;
  max-width: 600px;
  padding: 35px 60px;
  margin: 60px auto;
  position: relative;
}
.mfp-content .row::before {
  position: absolute;
  content: "";
  display: inline-block;
  width: 120px;
  height: 120px;
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0;
  top: 30px;
  left: 40px;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
#inline-wrap01 .row::before { background-image: url(../img/point01-number.png); }
#inline-wrap02 .row::before { background-image: url(../img/point02-number.png); }
#inline-wrap03 .row::before { background-image: url(../img/point03-number.png); }
.mfp-content .row .point-tit01 {
  display: inline-block;
  font-weight: bold;
  background: linear-gradient(transparent 40%, #fff 40%);
}
.mfp-content .row .point-box {
  margin: 25px 0;
  padding: 0;
}
.mfp-content .row h5 {
  color: #009245;
}
.mfp-content .row p {
  margin: 15px 0px;
  font-size: 16px;
  line-height: 1.8;
}
.mfp-content .row img {
  /*zoom: 0.3;*/
  width: 285px;
}
.mfp-content .row p.popup-modal-dismiss {
  display: block;
  text-align: center;
}
.popup-modal-dismiss a {
  text-align: center;
  color: #009245;
  padding: 0;
  margin: 0px 0 0;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 2px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.popup-modal-dismiss a span {
  display: block;
  margin-top: -5px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.popup-modal-dismiss a i {
  font-size: 13px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.popup-modal-dismiss a:hover i , .popup-modal-dismiss a:hover span {
  opacity: 0.6;
}
@media screen and (max-width: 991px) {
  #sec03 { margin: 0; }
  .sec03 ul.point-wrap {
    margin: 0 40px;
  }
}
@media screen and (max-width: 767px) {
/*
    .mfp-content .row p.popup-modal-dismiss {
      position: absolute;
      top: 45px;
      right: 60px;
    }
    .popup-modal-dismiss a {
        padding: 0 12px;
        font-size: 20px;
    }
*/
}
@media screen and (max-width: 700px) {
    .mfp-content .row::before {
        width: 100px;
        height: 100px;
        top: 25px;
        left: 40px;
    }
    .mfp-content .row {
        width: 96%;
        padding: 40px 15px;
    }
    .mfp-close-btn-in .mfp-close {
        display: none;
    }
}
/*------------*/







/* --------------------------------------------
    loader
-------------------------------------------- */
.gtco-loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url(../images/loader.gif) center no-repeat #fff;
}


/* --------------------------------------------
    Responsive
-------------------------------------------- */
@media screen and (min-width: 768px) {
  .xs-hidden { display: block; }
  .xs-block { display: none; }
  .box-xs-top , .box-xs-bottom { display: none!important; }
}

@media screen and (max-width: 992px) {
  h4 {  font-size: 23px; }
  .sec01-box:first-child::before { top: 20%; left: 10%; }
  .sec01-box:nth-child(2)::before { right: -10%; }
}

@media screen and (max-width: 767px) {
  .xs-hidden { display: none; }
  .xs-block { display: block; }
  html, body { font-size: 15px; }
  h3 { font-size: 1.5em; }
  h4 { font-size: 20px; letter-spacing: 1px; }

  #drawer-content { width: 320px; left: 0px; padding-top: 65px; }
  #drawer-icon { margin: 0px auto 10px; }
  /*#drawer-content .slogo { zoom:0.3; margin: 50px auto; }*/
  #drawer-content .menu-box { padding: 10px 25px 10px; }
  #drawer-content .menu-box .menu-list { margin-top: 15px; }
  /*--- sub ---*/
  #sidebar { width: 70px; height: 70px; filter: drop-shadow(0px 0px 0px rgba(0,0,0,0.1)); }
  .sidebtn {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: transparent;
    text-align: center;
    z-index: 999;
    margin: 0 0 15px;
    padding: 0;
  }
  .sidebtn li {
    position: relative;
    display: inline-block;
    width: 165px;
    height: 60px;
    margin: 0 3px;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #004173;
    border-radius: 50px;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    vertical-align: bottom;
  }
  .sidebtn li a {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 100%;
    height: auto;
    font-size: 15px;
    line-height: 1.3;
    color: #004173;
  }
  .sidebtn li a span {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 17px;
    font-weight: bold;
    letter-spacing: 2px;
  }
  .sidebtn li:first-child a { padding: 10px 0; }
  .sidebtn li:last-child a { padding: 20px 0; }
  .sidebtn li:hover { background-color: rgba(0, 65, 115, 0.9); border: 1px solid #fff; }
  .sidebtn li:hover a { color: #fff; }

  /*--- main ---*/
  #content-main { padding-left: 0px; }
  .box-xs-top , .box-xs-bottom { width: 100%; max-width: 100%!important; display: block; }
  .box-xs-top img , .box-xs-bottom img { width: 100%; max-width: 100%!important; }
  .box-xs-top { margin-bottom: 25px; }
  .box-xs-bottom { margin-top: 25px; }
  /*--- #sec ---*/
  #sec01 .row { max-width: 500px; padding: 0; }
  #sec01 .row img { margin-bottom: 5px; }
  #sec01 .row .sec01-txt { line-height: 1.8; }
  .sec01-box { max-width: 500px; background-image: none; padding: 0 15px; }
  .sec01-box:first-child { background-image: none; }
  .sec01-box:nth-child(2) { background-image: none; }
  .sec01-tit img { width: 100%!important; height: auto; }
  .sec01-tit::after { width: 0px; height: 0; display: none; background-image: none; }
  .sec01-box:first-child .sec01-txt , .sec01-box:nth-child(2) .sec01-txt { padding: 0; }
  .sec01-box::before { display: none; }
  #sec02 h3::before { left: 85%; }
  #sec02 .sec02-box { max-width: 500px; }
  #sec02 .sec02-box img { width: 100%; max-width: 300px; }
  #sec02 .style-box { text-align: center; margin-bottom: 15px; }
  #sec02 .sec02-tit01 img { /*zoom: 0.25;*/ height: 74px; }
  #sec02 .sec02-tit01 { max-width: 340px; }

  #sec02 .sec02-tit02::before, #sec02 .sec02-tit02::after { width: 100px; background-image: url(../img/tit-sbg02.png); }
  #sec02 .sec02-tit02::before { left: -15px; }
  #sec02 .sec02-tit02::after { right: -15px; }
  .sec02-box .col-xs-6.col-sm-3 { padding-right: 10px; padding-left: 10px; }
  #sec02 .prod-tit { font-size: 18px; }
  #sec02 .prod-tit span { font-size: 14px; }
  .prod-point .point-tit img { height: auto; }
  #sec03 .sec03-tit { background-position: center; background-size: 200%; }
  #ft01 .cp { font-size: 0.80em; letter-spacing: 0.5px; }
  #pagetop { position: absolute; right: 10px; bottom: 50px; }
}

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

}