@charset "UTF-8";

*{font-family:'Noto Sans JP', sans-serif;font-weight: 400;}

body.top{background: url("../images/bg-top.jpg") no-repeat;background-size: cover;
}
@media screen and (max-width: 768px) {
	body.top{background: url("../images/bg-top-sp.jpg") no-repeat;background-size: cover;
}
}

body.message{background: url("../images/bg-message.jpg") ;background-size: cover;background-repeat: no-repeat;background-color: #e9e8e9;
}
@media screen and (max-width: 768px) {
	body.message{background: url("../images/bg-message-sp.jpg") no-repeat;background-size: cover;
}
}

body.story{background: url("../images/bg-story.jpg") no-repeat;background-size: cover;
}
@media screen and (max-width: 768px) {
	body.story{background: url("../images/bg-story-sp.jpg") no-repeat;background-size: cover;
}
}

body.menu{background: url("../images/bg-menu.jpg") no-repeat;background-size: cover;
}
@media screen and (max-width: 768px) {
	body.menu{background: url("../images/bg-menu-sp.jpg") no-repeat;background-size: cover;
}
}

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

img {
  vertical-align: bottom;
}

@media screen and (max-width: 768px) {
  .pc {
    display: none;
	}
  .sp{display: inherit;
	}
}
@media screen and (min-width: 769px) {
  .sp {
    display: none;
  }
}
body {
  margin: 0;
  padding: 0;
}

main {
  max-width: 1000px;
  margin: 50px auto;
}
@media screen and (max-width: 768px) {
  main {
    margin: 0;
  }
}



@media screen and (max-width: 768px) {
header {
}
  header .hmenu h1 {
    width: calc(100% - 80px);
    margin: 0;
    height: auto;
  }

  header .hmenu h1 img {
    width: auto;
    height: 55px;
  }
}



@media screen and (max-width: 768px) {
  header #nav {
    height: inherit;
    position: fixed;
    top: 54px;
  }
}
header #nav ul {
  margin: 0 0 0 40px;
  padding: 0;
  list-style: none;
  display: flex;
	flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 768px) {
  header #nav ul {
    display: inherit;
	  margin:0;
  }
}
header #nav ul li {
  flex: 1;
  font-size: 20px;
  line-height: 20px;
	background: url("../images/nav-icon.png") no-repeat;
	background-size: 30px;
	padding:0 0 0 40px;
	transition: 0.3s all;
	opacity: 0.6;
}
header #nav ul li.current {
	transform:scale(1.25);
	opacity: 1.0;
}
header #nav ul li:hover{
	transform:scale(1.15);transition:0.3s all;
	opacity: 1.0;
}
header #nav ul li a {
  color: #000;
  display: block;
  padding: 10px 0;
  font-weight: bold;
}
header #nav ul li a:hover {
  text-decoration: none;
}

header #nav ul .current {
}
header #nav ul .current a {
  color: #333;
}
header #nav ul .current a:hover {
  text-decoration: none;
}
@media screen and (max-width: 768px) {
header #nav{
	padding:50px 0;
	}
header #nav ul{
	margin:0 0 0 -40px;
	}
header #nav ul li {
	background: url("../images/nav-icon-sp.png") no-repeat;
	background-size: 30px;
	padding:0 0 0 40px;
  background-position: top 10px left 40%;
	padding-left:50%;
}
header #nav ul li a{
	color: #fff!important;
	}
header #nav ul li.current {
	transform:inherit;
}
}


#cont {
  margin:0 20px;
  padding: 0;
  widhth: 100%;
}
#cont .left{
	width:45%;float: left;
	margin:120px 0;
}
#cont .right{
	width:45%;float: right;
	margin:120px 0;
}

#cont .left .logo{
	margin-bottom:70px;
}
#cont .left .logo img{
	width:100%;
} 
#cont .memo{

}
#cont .memo p{
	background-image: url("../images/top-memo-top.png");
	background-repeat: no-repeat;
	background-size:100%;
	background-position: top 0 left 0;
	margin:0;
	padding:60px 40px 15px 40px;
	font-size: 24px;
	font-weight: bold;
}
#cont .memo dl{
	background-image:url("../images/top-memo-bottom.png");
	background-repeat: no-repeat;
	background-size:100%;
	background-position:bottom 0 left 0;
	margin:0;
	padding:0 30px 50px 40px;
}
#cont .memo dl dt{
	margin:0;
	padding:0;
	font-size: 18px;
	line-height: 30px;
}
#cont .memo dl dd{
	margin:0;
	padding:0;
	font-size: 16px;
	line-height: 26px;
}
#cont .memo dl dd a{
	color: #87232d;
}

#cont .right .mv{
	position: relative;
}
#cont .right .mv .bottle{
	position: absolute;
	bottom:120px;
	right:-70px;
	width:190px;
}
#cont .right .mv .cat{
	position: absolute;
	bottom:-70px;
	right:-70px;
	width:190px;
	animation: cat 3s ease infinite;
}
@keyframes cat {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-15px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-15px) }
  50% { transform:translateY(0) }
  100% { transform:translateY(0) }
}
@media screen and (max-width: 768px) {
  #cont {
    width: calc(100% - 30px);
	margin:15px;
  }
#cont .left{
	width:100%;float: left;
	margin:0;
}

#cont .left .logo{
	margin-bottom:50px;
}
#cont .right{
	width:100%;float: right;
	margin:50px 0 0 0;
}
#cont .logo{
	margin:30px 30px 50px 30px;
}
#cont .mv{
	padding-bottom:100px;
	overflow: hidden!important;
	position: relative;
}	
#cont .mv .bottle{
	position: absolute;
	bottom:190px;
	right:-67px;
	width:190px;
}
#cont .mv .cat{
	position: absolute;
	bottom:20px;
	right:0;
	width:190px;
}
}





@media screen and (min-width: 769px) {
  #header-nenu {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  #header-nenu {
    float: right;
    width: 40px;
    height: 40px;
    margin: 0;
    overflow: hidden;
    position: absolute !important;
    top: 10px !important;
    right: 10px;
    z-index: 777;
  }

  #header-nenu img {
    position: relative;
    top: 0;
  }

  #header-nenu img.clicked {
    position: relative;
    top: -40px;
  }

  .sp-menu {
    display: none;
    margin: 0;
    top: 0;
    bottom: 0;
    overflow: scroll;
    position: fixed;
    z-index: 3;
    width: calc(100% - 2px);
    background: rgba(0, 0, 0, 0.6);
  }

  .sp-menu ul {
    margin: 0;
    padding: 0 0 0 0;
  }

  .sp-menu li {
    box-sizing: border-box;
    padding: 0;
    list-style: none;
    position: relative;
    text-align: left;
  }

  .sp-menu li a {
    box-sizing: border-box;
    color: #0e3c6d;
    display: block;
    font-size: 16px;
    line-height: 26px;
    padding: 5px 10px;
    text-decoration: none;
    width: 100%;
  }
}

/*メッセージ*/
.message-pc{
	margin:80px 0;
	position: relative;
}
.message-mv-0{position: absolute;top:0;left:0;z-index: 2;}
.message-mv-1{position: absolute;top:310px;left:80px;z-index: 2;width:320px;}
.message-mv-2{position: absolute;top:370px;left:0;z-index: 1;}
.message-mv-3{position: absolute;top: 510px;left: -80px;z-index: 3;}
.message-mv-4{position: absolute;top:380px;left:40px;z-index: 4;}
.message-mv-5{position: absolute;top: 990px;left: 30px;z-index: 8;width: 410px;}
.message-mv-6{position: absolute;top: 920px;right: 200px;z-index: 7;width: 280px;}
.message-mv-7{position: absolute;top: 1000px;right: -10px;z-index: 8;width: 170px;}
.message-mv-8{position: absolute;top: 1200px;right: 30px;z-index: 7;width: 410px;}

.message-mv-5{animation-delay: 0.2s;}
.message-mv-6{animation-delay: 0.5s;}
.message-mv-7{animation-delay: 1.0s;}
.message-mv-8{animation-delay: 1.4s;}

.box{
	opacity: 0;
}

.fadeUp {
animation-name:fadeUpAnime;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(10px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

@media screen and (max-width: 768px) {
.message-sp{
	margin:0 0 30px 0;
	position: relative;
}
.message-mv-sp-0{position: absolute;top:0;left:0;z-index: 1;}
.message-mv-sp-1{position: absolute;top: 175px;left: 20px;z-index: 1;width: 90%;}
.message-mv-sp-2{position: absolute;top:370px;left:0;z-index: 2;}
.message-mv-sp-3{position: absolute;top: 450px;left: 0;z-index: 3;width: 70%;}
.message-mv-sp-4{position: absolute;top: 520px;left: 120px;z-index: 4;width: 40%;display: none;}
.message-mv-sp-5{position: absolute;top: 660px;left: 18px;z-index: 5;width: 90%;}
.message-mv-sp-6{position: absolute;top: 1000px;left: 0;z-index: 5;width: 44%;}
.message-mv-sp-7{position: absolute;top: 680px;right: 10px;z-index: 5;width: 38%;}
.message-mv-sp-8{position: absolute;top: 1110px;right: 0;z-index: 5;width: 76%;}
	
.message-mv-sp-5{animation-delay: 0.2s;}
.message-mv-sp-7{animation-delay: 0.5s;}
.message-mv-sp-8{animation-delay: 0.5s;}	
	
	
	
	
}

.story-image{
	width:250px;
	float: left;
	margin:80px 50px 0 0;
}
.story-copy{
	width:calc(100% - 350px);
	float: left;
	margin:280px 50px 0 0;
}
.story-image ul{
	margin:0;
	padding:0;
}
.story-image ul li{
	margin:0;
	padding:0;
	list-style: none;
}

.story-image-1{
animation-delay: 0.2s;
}
.story-image-2{
animation-delay: 0.4s;
}
.story-image-3{
animation-delay: 0.6s;
}
.story-image-4{
animation-delay: 0.8s;
}
.box{
	opacity: 0;
}
.fade {
animation-name:fadeAnime;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media screen and (max-width: 768px) {
.story-image{
	width:150px;
	float: left;
	margin:30px 10px 0 0;
}
.story-copy{
	width:calc(100% - 160px);
	float: left;
	margin:180px 0 0 0;
}
}

.bons-image{
	width:calc(100% - 280px);
	margin:80px 0 50px 0;
	float:left;
}
.bons-right{
	width:280px;
	margin:100px 0 50px 0;
	float:right;
}

@media screen and (max-width: 768px) {
.bons-image{
	width:100%;
	margin:0 0 20px 0;
}
.bons-right{
	width:100%;
	margin:0 0 30px 0;
}
}
.menu-main{
	margin:80px 0 80px 0;
}
@media screen and (max-width: 768px) {
.menu-main{
	margin:30px 0;
	}
}

.links{
	
}

.links h2{
	width:400px;
	margin:0 auto;
}
.links h2 img{
	width:100%;
}
.links ul{
	margin:0;
	padding:0;
}
.links ul li{
	margin:0;
	padding:0;
	list-style: none;
}
.links ul li a{
	color:#87232d;
}
.links ul li img{
	float: left;
}
.links ul li p{
	font-size: 22px;
	line-height: 32px;
	margin:15px 0 0 0!important;
	padding-top:20px;
}
.cl{
	clear: both;
}

@media screen and (max-width: 768px) {
.links h2{
	width:80%;
	margin:0 auto;
}
.links h2 img{
	width:100%;
}
.links ul{
	margin:0;
	padding:0;
}
.links ul li{
	margin:0;
	padding:0;
	list-style: none;
}
.links ul li a{
	color:#87232d;
}
.links ul li img{
	width:100%;
	
}
.links ul li p{
	display: none;
}
}