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

/*
font-family: 'Gloria Hallelujah', cursive;
font-family: 'Josefin Sans', sans-serif;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-family: 'Yusei Magic', sans-serif;
*/

*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box
}
html {
font-size: 62.5%;
scroll-behavior: smooth;
}
body{
font-size: 1.6rem;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-weight: 400;
}
p{
text-align: justify;
}
a,a:hover{
text-decoration: none;
}
ul,li{
list-style: none;
padding: 0;
}
li{
display: inline-block;
}
.contents-box{
max-width: 1200px;
margin: auto;
padding: 0 20px;
}
@media (max-width: 768px) {
.pc-dn {display:block;}
.sp-dn {display:none;}
}
@media (min-width: 769px) {
.pc-dn {display:none;}
.sp-dn {display:block;}
}

header {
  width: 100%;
  text-align: center;
}
.menu {
  width: 100%;
  background: url(/img/menu_back.png) repeat-x bottom;
  padding: 15px 25px 30px 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative; 
  margin-bottom: 30px;
  z-index: 99;
}
h1 img{
width: 150px;
}
.gnavi__pc-style {
margin: 0 0 0 auto;
}
.gnavi__pc-style ul {
display: flex;
justify-content: space-between;
}
.gnavi__pc-style li {
padding: 0 15px;
border-right: 1px solid #5F4415;
color: #5F4415;
vertical-align: middle;
display: table;
letter-spacing: 0.1rem;
}
.gnavi__pc-style li a{
display: table-cell;
vertical-align: middle;
color: #5F4415;
cursor: pointer;
transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
.gnavi__pc-style li a:hover {
transition: .4s;
transform: translateY(-5px);
}
.gnavi__pc-style li:nth-child(7),.gnavi__pc-style li.sns-i{
border: none;
}
.gnavi__pc-style li.sns-i img{
width: 25px;
display: inline-block;
margin-right: 10px;
}
.sp-menu{
display: none;
}
/*ここから下がハンバーガーメニューのスタイル*/
.fixed{
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1130px) {
.menu {padding: 15px 15px 30px 15px;}
.gnavi__pc-style li {padding: 0 8px;letter-spacing: 0rem;font-size: 1.4rem;}
.gnavi__pc-style li.sns-i img{width: 20px;display: inline-block;margin-right: 5px;}
}
@media screen and (max-width: 865px) {
.pc-menu{display: none;}
.sp-menu{display: block;}
.gnavi__pc-style {display: none;}
.gnavi__sp-style {display: block;}
.menu-btn {
display : block;
position: fixed;
z-index : 3;
right : 30px;
top   : 20px;
width : 42px;
height: 42px;
cursor: pointer;
}
.menu-btn span {
display : block;
position: absolute;
width   : 30px;
height  : 2px ;
left    : 6px;
background : #555;
-webkit-transition: 0.3s ease-in-out;
-moz-transition   : 0.3s ease-in-out;
transition        : 0.3s ease-in-out;
}
.menu-btn span:nth-of-type(1) {top: 10px;}
.menu-btn span:nth-of-type(2) {top: 20px;}
.menu-btn span:nth-of-type(3) {top: 30px;}
.menu-btn.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  background :#fff;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}
.menu-btn.active span:nth-child(2),
.menu-btn.active span:nth-child(3) {
  top: 16px;
  background :#fff;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}
.gnavi__sp-style {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  color: #fff;
  background-color: rgba(207,129,140,0.9);
  text-align: center;
  width: 100%;
	height: 100vh;
  opacity: 0;
  transition: opacity .6s ease, visibility .6s ease;
	display: flex;
	align-items: center;
  visibility: hidden;
}
.gnavi__sp-style ul {margin: 0 auto;padding: 0;width: 100%;}
.gnavi__sp-style ul li {list-style-type: none;padding: 0;width: 100%;transition: .4s all;font-size: 1.6rem;font-weight: 700;display: none;}
.gnavi__sp-style ul li:last-of-type {padding-bottom: 0;}
.gnavi__sp-style ul li:hover{background :#965563;}
.gnavi__sp-style ul li a {display: block;color: #fff;padding: 13px 0;text-decoration :none;letter-spacing: 0.1rem;}
.gnavi__sp-style li.sns-i a{display: inline-block;margin: 10px 10px 0;}
.gnavi__pc-style li.sns-i img{width: 13px;}
.gnavi__sp-style.active {opacity: 1;visibility: visible;}
.gnavi__sp-style.active ul li{display: block;}
}
@media screen and (max-width: 768px) {
.menu {background: url(/img/menu_back.png) no-repeat bottom/ 150%;padding: 10px 25px 25px 25px;}
h1 img{width: 100px;}
}

/*スクロールアニメ*/
.fadeIn{
animation-name:fadeInAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeInAnime{
  from {opacity: 0;}
  to {opacity: 1;}
}
.fadeInTrigger{opacity: 0;}

.invisible {visibility: hidden;}
.anime_wrap {overflow: hidden;}


/*共通ボタン*/
.button a{
background: #fff;
border: #271914 1px solid;
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
padding: 15px 25px;
color: #271914;
transition: 0.3s ease-in-out;
font-family: 'Josefin Sans', sans-serif;
font-size: 1.8rem;
font-weight: 400;
letter-spacing: 0.2rem;
max-width: 150px;
}
.button a::before {
content: '';
position: absolute;
bottom: -7px;
right: -7px;
width: 100%;
height: 1px;
background-color: #271914;
transition: 0.2s ease 0s;
}
.button a::after {
content: '';
position: absolute;
top: 7px;
right: -7px;
width: 1px;
height: 100%;
background-color: #271914;
transition: 0.2s ease 0.2s;
}
.button a:hover::before {
width: 0%;
}
.button a:hover::after {
height: 0%;
}
.button a:hover {
text-decoration: none;
background-color: #ECCACA;
}

/*footer*/
#s-menu{
background: url("/img/s-menu_back.jpg") top center / cover;
padding-top: 80px;
position: relative;
}
#s-menu .dot{
display: block;
position: absolute;
top: -20px;
left: 20px;
}
#s-menu .line-stripe{
width: 100%;
height: 95px;
background: url("/img/line-stripe.jpg") repeat-x top center;
}
#s-menu .text-box{
max-width: 800px;
margin: 0 auto 0;
padding: 0 20px;
position: relative;
}
#s-menu h3{
font-family: 'Gloria Hallelujah', cursive;
font-size: 8rem;
letter-spacing: 0.8rem;
text-shadow:2px 2px 3px #999;
text-align: center;
color: #fff;
transform: rotate( -5deg );
animation-duration: 2.5s;
}
#s-menu h2{
margin: 50px auto 0;
padding-bottom: 2rem;
border-bottom: 1px solid #6B4D05;
color: #6B4D05;
text-align: center;
font-size: 3rem;
letter-spacing: 0.8rem;
max-width: 800px;
}
#s-menu p{
margin: 2rem auto;
font-size: 1.8rem;
max-width: 800px;
color: #6B4D05;
line-height: 4rem;
}
#s-menu .text-box img{
animation-duration: 3s;
width: 100%;
}
#s-menu .button{
margin: 50px auto 100px;
}
@media screen and (max-width: 768px) {
#s-menu{padding-top: 30px;}
#s-menu .dot{width: 80px;}
#s-menu .text-box{margin-top: 0px; padding: 0 20px;}
#s-menu h3{margin-top: 0;font-size: 5rem;letter-spacing: 0.8rem;}
#s-menu h2{margin: 30px auto 0;font-size: 2rem;letter-spacing: 0.2rem;}
#s-menu p{font-size: 1.6rem;line-height: 3rem;}
#s-menu .button{margin-bottom: 70px;}
}

#i-shop{
background: url("/img/i-shop_back.jpg") top center / cover;
position: relative;
padding-bottom: 100px;
}
#i-shop .line-shop{
width: 100%;
height: 100px;
background: url("/img/i-shop_line.png") repeat-x top center;
}
#i-shop .i-shop_img01 img{
width: 290px;
animation-duration: 3s;
position: absolute;
top: 150px;
left: 0;
}
#i-shop .text-box{
max-width: 800px;
margin: 80px auto 0;
padding: 0 20px;
position: relative;
}
#i-shop h3{
margin: 30px 0 0;
font-family: 'Gloria Hallelujah', cursive;
font-size: 8rem;
letter-spacing: 0.8rem;
text-align: center;
color: #6B4D05;
animation-duration: 2.5s;
}
#i-shop h2{
margin: 50px auto 0;
padding-bottom: 2rem;
color: #6B4D05;
text-align: center;
font-size: 3rem;
letter-spacing: 0.8rem;
max-width: 800px;
}
#i-shop .container{
max-width: 800px;
}
#i-shop .row div{
margin: 30px auto 0;
}
#i-shop .row img{
width: 100%;
}
#i-shop .button{
margin: 50px auto 0;
}
#i-shop .i-shop_img02 img{
animation-duration: 3s;
position: absolute;
bottom: 0;
left: 0;
}
#i-shop .i-shop_img03 img{
animation-duration: 3s;
position: absolute;
bottom: 0;
right: 0;
}
@media screen and (max-width: 1100px) {
#i-shop .i-shop_img01 img{width: 200px;top: 160px;left: 0;}
}
@media screen and (max-width: 900px) {
#i-shop .i-shop_img01 img{width: 180px;top: 160px;left: 0;}
}
@media screen and (max-width: 768px) {
#i-shop{padding-bottom: 150px;}
#i-shop .i-shop_img01 img{width: 150px;top: 120px;left: 0;}
#i-shop .text-box{margin: 0 auto;}
#i-shop h3{margin-top: 20px;font-size: 5rem;letter-spacing: 0.8rem;text-align: right;}
#i-shop h2{margin: 30px auto 0;font-size: 2rem;letter-spacing: 0.2rem;}
#i-shop .i-shop_img02 img{width: 280px;}
#i-shop .i-shop_img03 img{display: none;}
}

#i-sns{
background: url("/img/i-sns_back.jpg") top center / cover;
position: relative;
padding-bottom: 80px;
}
#i-sns .line-stripe{
width: 100%;
height: 95px;
background: url("/img/line-stripe.jpg") repeat-x top center;
}
#i-sns h2{
max-width: 700px;
margin: 50px auto 0;
vertical-align: middle;
padding: 15px 50px;
font-size: 2.6rem;
font-family: 'Yusei Magic', sans-serif;
letter-spacing: 0.5rem;
text-align: center;
background-image: url("/img/i-sns_title01.png"), url("/img/i-sns_title02.png");
background-position: left center, right center;
background-repeat: no-repeat;
background-size: auto, auto;
}
#i-sns .i-sns_img01 img{
animation-duration: 4s;
animation-delay: 1s;
position: absolute;
top: 120px;
right: 150px;
}
#i-sns .container{
max-width: 1500px;
}
#i-sns .sns-box{
background: url("/img/i-sns_back02.png") repeat #D9AAB7;
margin-top: 30px;
padding: 20px;
text-align: center;
width: 100%;
}
#i-sns .sns-box a img{
width: 100%;
}
#i-sns .col-lg-4:nth-of-type(2) .sns-box{
background-color: #88AFD7;
}
#i-sns .col-lg-4:nth-of-type(3) .sns-box{
background-color: #87C3B6;
padding-bottom: 5px;
}
#i-sns h3{
margin-bottom: 20px;
font-family: 'Yusei Magic', sans-serif;
letter-spacing: 0.5rem;
font-size: 2.6rem;
text-align: center;
color: #fff;
}
#i-sns h3 img{
display: block;
}
@media screen and (max-width: 1300px) {
#i-sns .i-sns_img01 img{right: 50px;}
}
@media screen and (max-width: 992px) {
#i-sns .i-sns_img01 img{right: 10px;}
}
@media screen and (max-width: 768px) {
#i-sns{padding-bottom: 50px;}
#i-sns h2{
width: calc(100% - 100px);
margin: 20px auto 0 15px;
padding: 15px 35px 0;
font-size: 2rem;
letter-spacing: 0.1rem;
background-position: left bottom,right bottom;
background-repeat: no-repeat;
background-size: 30px, 30px;
}
#i-sns .i-sns_img01 img{animation-delay: 0s;width: 70px;top: 120px;right: 10px;}
#i-sns .sns-box .sns-icon{width: 30px;margin-right: 10px; display: inline-block;}
#i-sns blockquote{margin-top: 0;}
#i-sns h3{font-size: 2rem;display: inline-block;}
}

footer{
background: url("/img/footer_back01.jpg") top center / cover;
position: relative;
}
footer .line-stripe{
width: 100%;
height: 95px;
background: url("/img/line-stripe.jpg") repeat-x top center;
}
footer .container{
max-width: 1500px;
padding-top: 50px;
}
footer h3{
margin: 50px 0 0;
font-family: 'Gloria Hallelujah', cursive;
font-size: 8rem;
letter-spacing: 0.8rem;
text-shadow:2px 2px 3px #999;
text-align: center;
color: #fff;
transform: rotate( -5deg );
animation-duration: 2.5s;
}
footer .f-links{
margin-top: 70px;
}
footer h4{
font-size: 1.8rem;
font-weight: 300;
letter-spacing: 0.2rem;
line-height: 3rem;
border-left: 1px solid #271914;
margin: 0 0 0 5px;
padding-left: 1.5rem;
}
footer .button a{
max-width: 300px;
margin: 1rem 0 0;
}
footer .f-menu{
background: url("/img/footer_back02.png") top center repeat-x;
position: relative;
padding: 100px 0 10px;
}
footer .f-menu .container>img{
width: 250px;
display: block;
margin: 0 auto;
}
footer .f-menu .row{
max-width: 1000px;
margin: 0 auto;
}
footer .f-menu .row div{
text-align: center;
letter-spacing: 0.2rem;
margin-top: 30px;
}
footer .f-menu .row a{
color: #000;
display: inline-block;
width: 100%;
}
footer .f-menu .row a:hover {
transition: .4s;
transform: translateY(-5px);
}
.f-info{
margin-top: 50px;
width: 100%;
text-align: center;
font-size: 1.4rem;
}
.copyright{
margin-top: 50px;
width: 100%;
text-align: center;
font-size: 1.2rem;
}
@media (max-width: 1200px) {
footer .container{padding-top: 0px;}
footer .f-links{margin-top: 30px;}
footer .f-links .row>div{margin-top: 30px;}
footer .f-menu{padding-top: 150px;background: url("/img/footer_back02_sp.png") top center / cover;}
}
@media screen and (max-width: 768px) {
footer{background: url("/img/footer_back01.jpg") top center / cover;}
footer h3{font-size: 4rem;}
footer .f-links{margin-top: 10px;}
footer .button a{max-width: 100%;}
footer .f-menu{margin-top: 20px;padding-top: 100px;}
footer .f-menu .container>img{width: 200px;}
footer .f-menu .row{max-width: 1000px;margin: 0 auto;}
footer .f-menu .row div{margin-top: 20px;}
footer .f-menu .row a{
color: #000;
display: inline-block;
width: 100%;
}
footer .f-menu .row a:hover {
transition: .4s;
transform: translateY(-5px);
}
.f-info{
margin-top: 50px;
width: 100%;
text-align: center;
font-size: 1.4rem;
}
.copyright{
margin-top: 50px;
width: 100%;
text-align: center;
font-size: 1.2rem;
}



}