/*--------リンク・フォント--------*/
.linkStyle{color: #333333; text-decoration: underline;}


/*--------全体--------*/
#header .logo.width_20per {width: 12%!important;}
.main_txt{
   width: 40vw;
    overflow: hidden;
    letter-spacing: 5px;
    font-weight: 900;
    text-shadow: 0 0 10px rgba(0,0,0,0.8);
    color:#fff;
    position: relative;
}
#contents .box .box_item{
    background-color: rgba(255,255,255,0.75);
    background-blend-mode: lighten;
}
/*--------下層--------*/
.cate_list li a {
    background-color: rgba(255, 255, 255, .75);
}
.cate_title{position:relative;}
.cate_title::before {
    background-color: #fff;
    width: 3px;
    height: calc(100% - 8px);
    position: absolute;
    top: 3px;
    left: 0;
    content: '';
}
.cate_title::after {
    background-color: #4388cd;
    width: 3px;
    height: 43%;
    position: absolute;
    bottom: 2px;
    left: 0;
    content: '';
}
#cms_6-b .cate_box, #cms_6-b .cate_box .box_txt1, #cms_6-b .cate_box .box_txt2{
	border-color: #b8bcc1;
	word-break: break-all;
}
#cms_6-b .cate_box:first-of-type{
	border-top: 1px solid #b8bcc1;
}
.cms_6-b .cate_box, .cms_6-b .cate_box .box_txt1, .cms_6-b .cate_box .box_txt2{
	border-color: #b8bcc1;
	word-break: break-all;
}
.cms_6-b .cate_box:first-of-type{
	border-top: 1px solid #b8bcc1;
}

/*--------タブレット--------*/
@media screen and (max-width: 768px){
    .main_txt {width: 70vw;}
    #header .logo.width_20per {
    width: 27%!important;
}
}

/*--------スマートフォン--------*/
@media screen and (max-width: 667px){
    .main_txt {
    width: 90vw;
    letter-spacing: 2px;
    line-height: 1.5;
}

#main .sns_link {
    top: 21%;
    right: 22px;
}
#main .sns_link li {
    margin-bottom: 5px;
}
.shop_info.more a:first-of-type:before, .shop_info.more a:last-child:before {
    height: 100%;
}
.shop_info .info_box:first-of-type h2 {
    left: 34%;
    font-size: 9vw;
}
.shop_info .info_box:last-of-type h2 {
    left: 46%;
    transform: translate(-40%,-50%) skewX( 0deg);
    font-size: 8vw;
}
.page_title_box p{    font-size: 7vw;}
.cate_list li a {
    padding: 8px 10px;
}
.page8 .tel a{font-size:4.5vw;}
.page10 .more a {
    font-size: 3.8vw;
}
}


/*--------------------------------------------
IE
--------------------------------------------*/
@media all and (-ms-high-contrast:none){
.cms_1-a figure img{width:100%!important;height:auto!important;}
.shop_info.more a:first-of-type:before, .shop_info.more a:last-child:before {
    height: 100%;
}
}







.main_txt span {
    padding: 0px;
}
.main_txt .catch_line {
  content: "";
  position: absolute;
  height: 2px;
  width: 100%;
  display: block;
  background-color: #fff;
  bottom: calc(50% - 1px);
  -webkit-animation: line 2000ms;
          animation: line 2000ms;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
          animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
          animation-delay: 2.7s;
  transform-origin: left;
  transform: translateX(0) scaleX(0);
}
.main_txt .char {
  display: inline-block;
  position: relative;
  -webkit-animation-duration: 2000ms;
          animation-duration: 2000ms;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-name: kern;
          animation-name: kern;
  -webkit-animation-delay: calc(var(--char-index) * 5ms);
          animation-delay: calc(var(--char-index) * 5ms);
  -webkit-animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
          animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
          animation-delay: 2.7s;
  opacity: 0;
}

@-webkit-keyframes line {
  45% {
    transform: translateX(2%) scaleX(0);
  }
  70% {
    transform: translateX(0) scaleX(0.98);
  }
  100% {
    transform: translateX(98%) scaleX(0);
  }
}

@keyframes line {
  45% {
    transform: translateX(2%) scaleX(0);
  }
  70% {
    transform: translateX(0) scaleX(0.98);
  }
  100% {
    transform: translateX(98%) scaleX(0);
  }
}
@-webkit-keyframes kern {
  0%, 70% {
    transform: translateX(calc((var(--char-index)) * 40px));
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
    -webkit-animation-timing-function: none;
            animation-timing-function: none;
  }
}
@keyframes kern {
  0%, 70% {
    transform: translateX(calc((var(--char-index)) * 40px));
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
    -webkit-animation-timing-function: none;
            animation-timing-function: none;
  }
}