@charset "utf-8";
/* CSS Document */

@import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);
body {
    font-family: 'Noto Sans JP', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
img{max-width:100%;}
.br-sp {
  display: none;
}

@media screen and (max-width: 960px) {
  .br-pc {
    display: none;
  }

  .br-sp {
    display: inline-block;
  }
}

.jumbotron {background:rgba(0,0,0,0);}
.jumbotron-bg {
    position: relative;
    height: 90vh;
    min-height: 300px;
	background:rgba(0,0,0,0);
	background-image:url("../images/bg.jpg");
	background-color:rgba(255,255,255,0.5);
    background-position:center;
	background-blend-mode:lighten;
	background-size: cover;
}

.jumbotron-container {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.btn-warning {
    color: #ffffff;
    background-color:#ec9c50;
    border-color:#ec9c50;
}

.btn-primary {
    color: #fff;
    background-color: #4ba0fb;
    border-color: #007bff;
}

.body-bg{
    background:#eee;
}

a,a .btn, a:hover .btn{
	opacity: 1;
	transition:all 0.1s ease-out;	
}

a:hover{text-decoration:none;}

a img{transition:all 0.1s ease-out;}

a:hover img{
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3));
	-webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}
/*
.card{
    overflow: hidden;
}
*/
.fadein a img{
    transform: scale(1) rotate(0deg);
    transition-duration: 0.2s;
}
.fadein a:hover img{
    transform: scale(1.05) rotate(2deg);
    transition-duration: 0.2s;
}
.sns{
	display:inline-block;
	width:120px;
	height:120px;
	margin:auto;
}

.sns a{
	display:block;
	background:#aaa;
	border-radius: 50px;
	width:100px;
	height:100px;
	margin:auto;
	margin-tpp:10px;
}

.sns img{
    width:100%;
}
.sns a:hover{
    background:#0295FF;
	-webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
	border-radius:55px;
}
.sns a:hover img{
    opacity:1!important;
}

.footer{
	color:#fff;
	background:#423F3B;
	margin:0;
	padding:20px 0;
	border-top:#9E9E9E 5px solid;
}



.fadein {
  opacity : 0;
 /* transform : translate(0, 100px);
  transition : all 1s;*/
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
/*
.fadein.active{
  opacity : 1;
  transform : translate(0, 0);
}
*/

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 20%, 0);
    transform: translate3d(0, 20%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 20%, 0);
    transform: translate3d(0, 20%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadein.active {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

.fadein.delay-0 {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.fadein.delay-1 {
  -webkit-animation-delay: 0.25s;
  animation-delay: 0.25s;
}
.fadein.delay-2 {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

@media screen and (max-width: 560px) {
    .jumbotron-bg{height:100vh;}
	.jumbotron-container {top: 50%;}
    h1{font-size:2rem;}
	h5{font-size:1rem;}
	.btn-lg{font-size:1rem;}
	.sns{width:80px;}
    .sns a{width:80px;height:80px;border-radius: 40px;}
    .fadein{opacity:1!important;}
    .large-img{width:300px;}
}

.shop{
    text-align:center;
    padding:20px;
}

.swiper-text-btn{
    margin:auto;
    width:250px;
	border:#000000 solid 1px;
	padding: 0px;
}

.shop li{
/*	background:#fdce94; */
	display:block;
	margin:10px 10px;
}

.shop li a{
	display:block;
	cursor: pointer;
	width:100%;
	height:100%;
	padding: 10px 0px;
}

.shop li a:hover{
 background:rgba(255,255,255,0.20);
}


.shop a:hover{text-decoration:none;}

.shop a img{transition:all 0.1s ease-out;}

.shop a:hover img{
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3));
	-webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}