@charset "UTF-8";
/*共通css
----------------------------------------------------------------*/
body {color: #333; overflow-x: hidden;letter-spacing: 0.2em;line-height: 1.8;}
p {line-height: 1.8;font-size: 13.5px; margin-bottom: 15px;}
h3{font-size: 25px; font-weight: bold;  padding-bottom: 2px; margin: 30px 0 15px 0;}
main {overflow-x: hidden;}
.sp {display: none;}
.pc {display: block;}
.bold {font-weight: bold;}
.container {max-width: 1000px;margin: 0 auto;width: 95%;}
a {color: #333;}
a:hover {color: #4865b2;}
img {display: block;width: 100%;height: auto;}
.object-fit-img {object-fit: cover;object-position: bottom;font-family: "object-fit: cover; object-position: bottom;";}

/*トップページ戻るボタン*/
#pageTop {position: fixed;bottom: 100px;right: 16px;}
#pageTop a {display: block;z-index: 999;padding: 0px;border-radius: 30px;width: 62px;height: 62px;background-color: #bbb3a9;color: #fff;font-weight: bold;text-decoration: none;text-align: center;}
#pageTop i {padding: 23px 0 0 2px;font-size: 15px;color: #fff;display: block;}
#pageTop a:hover {text-decoration: none;opacity: 0.7;}

/*マーカーアニメーション*/
.marker.active {background-position: -100% .5em;}
.marker{
  background-image: -webkit-linear-gradient(left, transparent 50%, #f5e0ff 50%);
  background-image: -moz-linear-gradient(left, transparent 50%, #f5e0ff 50%);
  background-image: -ms-linear-gradient(left, transparent 50%, #f5e0ff 50%);
  background-image: -o-linear-gradient(left, transparent 50%, #f5e0ff 50%);
  background-image: linear-gradient(left, transparent 50%, #f5e0ff 50%);
  background-repeat: repeat-x;
  background-size: 200% .8em;
  background-position: 0 .5em;
  transition: all 3.5s ease;}

/* PV数表示 */
.post-views{display: inline; position: fixed; bottom: 170px; right:4%; z-index:101;}
/* 光るボタン ---------------------- */
.button {text-align: center;margin: 1rem; width: 100%; max-width: 400px; margin: 0 auto;}
/* リンク部分 */
.button a {display: inline-block;padding: 15px 45px;background: #a46bca;color: #fff;text-decoration: none;border-radius: 100vh;box-shadow: 0px 3px 11px rgb(175 175 175);transition: 0.3s; width: 100%; }
.button a:hover {opacity: 1;box-shadow: none;transform: scale(0.99, 0.99) translateY(1px);}
/*** ボタンを光らせる ***/
.btn-shine a {position: relative;overflow: hidden;}
/*** ボタンをキラッとさせる ***/
.btn-shine a:after {content: "";position: absolute;top: -50%;left: -50%;width: 10%;height: 150%;opacity: 0.5;filter: blur(1px);background: rgba(255, 255, 255, 0.5); transform: rotate(45deg);animation: reflect 3s ease-in-out infinite;}
/*** 光のアニメーション ***/
@keyframes reflect {
  0%,
  75% {transform: rotate(45deg) scale(0);opacity: 1;}
  100% {transform: rotate(45deg) scale(100);opacity: 0;}
}

#lp .contact{width: 60%; margin: 30px auto;}
#lp .contact p{text-align: center; font-size: 16px;}
#lp .contact a{transition: 0.3s; display: block; margin: 0 auto 15px auto; width: 75%; }
#lp .contact a:hover{opacity: 0.5;}

footer{background-color: #212121; color: #E5E5E4; padding: 20px 0;}
footer .container{ max-width:1200px; margin: 0 auto; width:90%!important;} 
footer .ttl{position: inherit!important; top:0; }
footer .other{padding-bottom: 30px;}
footer .other .cards{display: flex;}
footer .other .cards .card{width:28%; margin-right: 3%;}
footer .other .cards .img{padding-top: 66%; margin-bottom: 10px;}
footer .other .cards .card1 .img{background-image:url(../img/footer_1.jpg);}
footer .other .cards .card2 .img{background-image:url(../img/footer_2.jpg);}
footer .other .cards .card3 .img{background-image:url(../img/footer_3.jpg);}

footer .other h3{font-size:18px; margin-bottom: 12px;}
footer .menu{border-top: 1px solid #707070; border-bottom: 1px solid #707070; padding: 30px 0;}
footer a{color: #fff!important;} 
footer .menu ul{display:flex; flex-wrap: wrap;}
footer .menu ul li { padding:0 30px 0 0; margin-bottom: 10px;}
footer .info{padding-top: 30px;}
footer .info h3{font-size: 16px; margin-bottom: 15px;}
footer .info p{font-size: 13px;}
footer .info .map .address{color:#9A9A9A;}
footer .info .map i{font-size: 11px; padding-left: 5px;} 
footer .sns {display: flex; }
footer .sns p {margin: 0 10px 0 0;}
footer .sns i{font-size: 15px;}
footer .copy{text-align: center;}
@media screen and (max-width:768px){
  footer .menu ul{justify-content: space-between;}
  footer .menu ul li {width: 33%; padding:0;}
  footer .other .cards {display:block;}
  footer .other .cards .card {width:100%; margin: 0 auto 25px auto;}
}







/*top*/
#lp .top{max-width: 1000px;margin: 0 auto; padding-top: 108%; background-image:url(../img/lp_restaurants/top_bg2.jpg); position: relative;}
#lp .top .txt h1{position: absolute; width:40%; max-width: 480px; left: 5%; top:20%;}
#lp .top .txt p{width: 70%; margin: 0 auto; position: absolute; bottom: 30%;}
#lp .top .label{width: 20%; position: absolute; right:2%; bottom: 20%;}

#lp .worries{position: relative; max-width: 1000px;margin: -20% auto 0 auto; background-image: url(../img/lp_restaurants/worries_bg2.png); padding-top: 78%;}
#lp .worries .Features{position: absolute; top:25%; left:50%;  transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%);  z-index: 2; }
#lp .worries .list{margin: 0 auto; width:46%; max-width: 600px; position: absolute; top:27%; left:50%;  transform: translateX(-50%); -webkit-transform:translateX(-50%); }
#lp .worries .imges .img01{position: absolute; left:10%; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); width: 10%;}
#lp .worries .imges .img02{position: absolute; right:10%; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); width: 10%}
#lp .worries .imges .img03{position: absolute; right:10%; bottom:3%; width:25%}
#lp .worries .contact{position: absolute; top:54%; left:50%;  transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%);  z-index: 2; }


#lp .Concerns{position: relative; max-width: 1000px;margin:0 auto; }
#lp .Concerns h2 img{margin: 0 auto; width: 60%;}
#lp .Concerns h2{text-align: center; font-size: 25px; margin-bottom: 30px;}
#lp .Concerns .list{margin: 0 auto 60px auto; width: 70%;}



#lp .solution .ttl h2{margin: 0 auto; width: 80%;}
#lp .solution .imges{display: flex; justify-content: space-around; margin: 50px 0;}
#lp .solution .imges .img{width:20%;}
#lp .solution .txt{margin-bottom: 70px;}


#lp .solution .cards{display: flex; justify-content: space-between; flex-wrap: wrap;}
#lp .solution .txt .imgtxt{width: 48%; display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 7px;}
#lp .solution .txt .imgtxt .img{width: 35%;}
#lp .solution .txt .imgtxt .txt{width: 62%; margin: 0;}
#lp .solution .txt .imgtxt .txt p{margin-bottom: 0;}

#lp .solution .txt .Collabo .imgtxt{display: block; width: 32%;}
#lp .solution .txt .Collabo .img {width: 100%;}
#lp .solution .txt .Collabo .txt {width: 100%;}

#lp .voice {max-width: 1000px; margin: 0 auto; padding:100px 0 0 0; background-image: url(../img/lp_restaurants/voice_bg.jpg);}
#lp .voice .ttl{text-align: center;}
#lp .voice .ttl h2{font-family: futura-pt, sans-serif; font-size: 80px; color: #B081BC; font-weight: bold;}
#lp .voice .imgtxt{max-width:800px; margin: 0 auto;}

#lp .now .big{text-align: center; font-size: 20px;}

/*responsive*/
@media screen and (max-width: 768px) {
  .pc {display: none;}
  .sp {display: block;}main {overflow: hidden;}
  footer .container {width: 95%;}
  h3{font-size: 20px;}
  #lp .contact {width: 100%;}



  #lp .top {padding-top: 0%; height: 100vh;}
  #lp .top .txt h1 {width: 80%;}
  #lp .top .txt p {width: 100%;bottom: 12%; left: -2%; z-index: 2;}
  #lp .top .label {width: 60%; display: flex;} 

  #lp .worries .Features {top: 28%;width: 80%;}
  #lp .worries .contact {top: 56%; width: 100%;}

  #lp .worries { padding-top: 130%; margin-top: -30%;}
  #lp .worries h2 {font-size: 25px; line-height: 1.5;}
  #lp .worries .list {width:100%;top: 31%;}
  #lp .worries .imges .img01 { left: 2%; top: 51%;}
  #lp .worries .imges .img02 { right:2%; top: 51%;}
  #lp .worries .button {bottom: 25%;left: 50%;}
  #lp .worries .imges .img03 {right: 0%;bottom: -11%;width: 38%;}

  #lp .Concerns {padding: 70px 0 0 0;}
  #lp .Concerns h2 img {width: 100%;}
  #lp .Concerns .list {width: 100%;}
  #lp .solution .ttl h2 {width: 100%;}
  #lp .solution .imges .img {width: 26%;}
  #lp .solution .cards {display:block;}
  #lp .solution .Collabo {display:flex;}
  #lp .solution .txt .imgtxt {width: 100%;}
  #lp .voice .container{width: 100%;}
  #lp .voice .ttl h2 {font-size: 60px;}
  #lp .voice .imgtxt { display: flex;flex-wrap: wrap; justify-content: space-between;}
  #lp .voice .imgtxt img{width: 80%;margin-top:-85px; }
  #lp .voice .imgtxt img:first-child{margin-top: 0;}
  #lp .voice .imgtxt img:nth-of-type(2n){margin: -85px 0 0 auto;}

  #lp .now .big {text-align: left;font-size: 18px;}

}