@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i);

.clearfix:after {
	clear:both;
	content:" ";
	display:block;
}
.none {display: none !important;}

/* animation */
.fade_up {
  display: inline-block;
  opacity: 0;
}
.fade_up.alternate {
  opacity: 1;
  animation: fade_up 1s forwards;
}
.cloud {
	-webkit-animation: cloud 2s ease infinite;
	-moz-animation: cloud 2s ease infinite;
	-ms-animation: cloud 2s ease infinite;
	animation: cloud 2s ease infinite;
}
.cloud.alternate {
	-webkit-animation: cloud 2s ease infinite alternate;
	-moz-animation: cloud 2s ease infinite alternate;
	-ms-animation: cloud 2s ease infinite alternate;
	animation: cloud 2s ease infinite alternate;
}
@keyframes fade_up {
	0% { opacity: 0; transform: translateY(8%); }
	100% { opacity: 1; transform: translateY(0); }
}
@keyframes move {
	0% { transform: translateX(0px); }
	30% { transform: translateX(5px); }
	100% { transform: translateX(0px); }
}
@keyframes cloud {
	0% { transform: translateY(0px); }
	30% { transform: translateY(-6px); }
	100% { transform: translateY(0px); }
}






@media only screen and (max-width: 736px){
  
#main_cp .pc {
  display:none;
}
body {}


#main_cp {
	font-size: 3vw;
	font-family: 'Noto Sans Japanese', sans-serif;;
}
#main_cp img {
	width: 100%;
}


/* ------------------

 mainimg
 
------------------ */
#main_cp .cp_bg1 {
  position: relative;
  background:#ddd url(../img/bg-sp.jpg) left top repeat-x;
  background-size:auto 102%;
  z-index: 5;
}
#main_cp .mainimg {}
#main_cp .mainimg h1 {
	position:relative;
	width:76%;
	margin:0 auto;
  animation-duration: 3s;
	animation: fade_up 1s;
}
#main_cp .mainimg .date {
	width:100%;
	margin:0.2em auto 0 auto;
}
#main_cp .mainimg .mnav {
  background:url(../img/mnav_bg.png) center 5vw no-repeat;
  background-size: 100% auto;
}
#main_cp .mainimg .mnav ul {
  display:flex;
  width:95%;
  margin:1em auto 0 auto;
  justify-content:space-between;
}
#main_cp .mainimg .mnav ul li {
  width:31%;
}
#main_cp .mainimg .btn {
  position: relative;
  width:67.2%;
  margin:2.2em auto 0 auto;
  z-index: +1;
}
#main_cp .mainimg .btn .close {
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(../img/btn_close.png) left top no-repeat;
  background-size: contain;
  z-index: +2;
}
  

/* ------------------

 cp_pouch
 
------------------ */
#main_cp #cp_pouch {
  margin: -60px auto 0 auto;
  padding: 100px 0 0 0;
}
#main_cp #cp_pouch .inner {
  position: relative;
  width:95%;
  margin:0 auto;
}
#main_cp #cp_pouch .inner .icons span {
  display: block;
  position: absolute;
  z-index: +1;
}
#main_cp #cp_pouch .inner .icons span:nth-child(1) {
  width: 29%;
  top: -4%;
  left: 0;
}
#main_cp #cp_pouch .inner .icons span:nth-child(2) {
  width: 26%;
  top: 35%;
  right: 1.5%;
}
#main_cp #cp_pouch .inner .icons span:nth-child(3) {
  width: 20%;
  bottom: 10%;
  left: 6%;
}
#main_cp #cp_pouch .inner h2 {
  position: absolute;
  top: 10%;
  left: 0;
}
#main_cp #cp_pouch .inner ul.item {
  position: absolute;
  top: 28%;
  left: 0;
}
#main_cp #cp_pouch .inner ul.item li {
  margin:6% 0 0 0;
}
#main_cp #cp_pouch .inner ul.item li:nth-child(2) {
  margin:4% 0 0 0;
}
#main_cp #cp_pouch .inner ul.item li:nth-child(3) {
  margin:4% 0 0 0;
}
#main_cp #cp_pouch .inner ul.item li:last-child {
  margin:13% 0 0 0;
}
#main_cp #cp_pouch .inner .close {
  position: absolute;
  display: flex;
  width:100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(../img/pouch_close-sp.png) left top no-repeat;
  background-size: cover;
  z-index: +2;
}


/* ------------------

 cp_menu
 
------------------ */
#main_cp #cp_menu {
  padding: 80px 0 4em 0;
  background:url(../img/menu_bg2-sp.png), url(../img/menu_bg-sp.png);
  background-position: left top, left bottom;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
#main_cp #cp_menu .inner {
  position: relative;
  width: 95%;
  margin: 0 auto;
}
#main_cp #cp_menu .inner .icons span {
  display: block;
  position: absolute;
  z-index: +1;
}
#main_cp #cp_menu .inner .icons span:nth-child(1) {
  width: 34%;
  top: -6%;
  right: -2%;
}
#main_cp #cp_menu .inner .icons span:nth-child(2) {
  width: 33%;
  bottom: 22%;
  left: -1%;
}



/* ------------------

 cp_mugcup
 
------------------ */
#main_cp .cp_bg2 {
  position: relative;
  background:url(../img/bg2.png) left top;
  z-index: 4;
}
#main_cp #cp_mugcup {
  margin: -60px 0 0 0;
  padding: 120px 0 0 0;
}
#main_cp #cp_mugcup .inner {
  position: relative;
	width: 96%;
  margin: 0 auto;
}
#main_cp #cp_mugcup .inner .icons span {
  display: block;
  position: absolute;
  z-index: +1;
}
#main_cp #cp_mugcup .inner .icons span:nth-child(1) {
  width: 16.4%;
  top: 11.5%;
  right: 3%;
}
#main_cp #cp_mugcup .inner .close {
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(../img/mugcup_close-sp.png) left top no-repeat;
  background-size: cover;
  z-index: +2;
}



/* ------------------

 cp_howto
 
------------------ */
#main_cp #cp_howto {}
#main_cp #cp_howto .inner {
	width: 95%;
  margin: 10px auto 0 auto;
}



/* ------------------

 cp_outline
 
------------------ */
#main_cp #cp_outline {
  padding: 0 0 40px 0 !important;
}
#main_cp #cp_outline .inner {
  position: relative;
	width: 94%;
  margin: 40px auto 0 auto;
  padding: 0 0 40px 0;
}
#main_cp #cp_outline .inner .outline_in {
  overflow-y: scroll;
  height: 500px;
  padding: 1em 1.5em 2em 1.5em;
  background: #fff;
  border:2px solid #5993d2;
  line-height: 1.6;
}
#main_cp #cp_outline .inner .outline_in a {
  border-bottom:1px solid #5993d2;
  color: #5993d2;
  text-decoration: none;
}
#main_cp #cp_outline .inner .outline_in p {
  margin: 0.6em 0 0 0;
}
#main_cp #cp_outline .inner .outline_in p.article {
  margin: 1.5em 0 0 0;
  color: #5993d2;
  font-size: 120%;
  font-weight: 700;
}
#main_cp #cp_outline .inner .outline_in ul.dot {
  margin: 1em 0 0 0;
}
#main_cp #cp_outline .inner .outline_in ul.dot li {
  margin: 0 0 0 1em;
  padding: 0.2em 0;
  text-indent: -1em;
}
#main_cp #cp_outline .inner .icons span {
  display: block;
  position: absolute;
  z-index: +1;
}
#main_cp #cp_outline .inner .icons span:nth-child(1) {
  width: 10%;
  top: -2%;
  left: 3%;
}
#main_cp #cp_outline .btn {
  position: relative;
  width:67.2%;
  margin:0 auto;
}
#main_cp #cp_outline .btn .icons span {
  display: block;
  position: absolute;
}
#main_cp #cp_outline .btn .icons span:nth-child(1) {
  width: 24%;
  top: 58%;
  right: -23%;
  z-index: 8;
}
#main_cp #cp_outline .btn .close {
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(../img/btn_close.png) center center no-repeat;
  background-size: 99% auto;
  z-index: +2;
}



/* ------------------

 cp_about
 
------------------ */
#main_cp #cp_about {
  position: relative;
  margin:-60px 0 0 0;
  padding: 100px 0 40px 0;
	background:#98d7e1;
  z-index: 3;
}
#main_cp #cp_about .inner {
	position:relative;
  width: 95%;
	margin: 0 auto;
}
#main_cp #cp_about .inner .btn {
	position: absolute;
	width: 60%;
  left: 20%;
  bottom: 7.5%;
}


/* ------------------

 cp_contact
 
------------------ */
#main_cp #cp_contact {
	background:#fff;
}
#main_cp #cp_contact .contact_in {
	position:relative;
  width: 87%;
  margin: 0 auto;
	padding: 40px 0 0 0;
	color:#7e634c;
  line-height: 1.8;
	text-align:center;
}
#main_cp #cp_contact .contact_in h3 {
	margin:0 auto;
	padding: 0.2em 0;
	border: 1px solid #7e634c;
  font-size:95%;
}
#main_cp #cp_contact .contact_in p {
	margin: 0 auto;
	font-weight:700;
	text-align:center;
}
#main_cp #cp_contact .contact_in p.article {
	margin-top: 0.5em;
  font-size:120% !important;
}
#main_cp #cp_contact .contact_in p.tel {
	margin-top:1em;
	padding:0 0 1em 0;
	border-bottom:1px solid #7e634c;
  letter-spacing:0.1em;
}
#main_cp #cp_contact .contact_in p.copy {
	margin-top: 1em;
	font-size: 80%;
	font-weight: 700;
}
#main_cp #col_pagetop {
	position: fixed !important;
	right: 1em !important;
	bottom: 1em !important;
  width: 20%;
	z-index: 5 !important;
}
  
#hz-content {
  padding-bottom:30px;
}



/* ------------------

 cp_nav_sp
 
------------------ */

#main_cp #cp_nav_sp {
	position:fixed;
  width:54vw;
	right:-40.5vw;
	top:60px;
	font-size:0;
	z-index:11;
  /*transition: left 0.5s, right 0.5s;*/
}
#main_cp #cp_nav_sp .cp_nav_btn {
	float:left;
	width:13.5vw;
	cursor:pointer;
}
#main_cp #cp_nav_sp .cp_nav_btn.active {}
#main_cp #cp_nav_sp ul {
	float:left;
	width:40.5vw;
}
#main_cp #cp_nav_sp a img:hover {
 opacity:1 !important;
}
#main_cp #cp_nav_sp #cp_nav_bg_sp {
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.7);
	z-index:-1;
}
  
#main_cp #cp_nav,
#main_cp #cp_nav #cp_nav_bg {
  display:none;
}
  
  
}















@media only screen and (min-width: 737px){
  
#main_cp .sp {
  display:none;
}
body {}
  
.zoom {
  transform: scale(0.9);
  transition: 0.3s;
}
.zoom:hover {
  transform: scale(1);
}


#main_cp {
	font-size: 15px;
	font-family: 'Noto Sans Japanese', sans-serif;;
}
#main_cp img {
	width: 100%;
}


/* ------------------

 mainimg
 
------------------ */
#main_cp .cp_bg1 {
  position: relative;
  background:url(../img/bg.jpg) left top repeat-x;
  background-size:auto 102%;
  z-index: 5;
}
#main_cp .mainimg {}
#main_cp .mainimg h1 {
	position:relative;
	width:42%;
  max-width:570px;
	margin:0 auto;
  animation-duration: 3s;
	animation: fade_up 1s;
}
#main_cp .mainimg .date {
	width:93%;
  max-width:1240px;
	margin:2.2em auto 0 auto;
}
#main_cp .mainimg .mnav {
  background:url(../img/mnav_bg.png) center center no-repeat;
}
#main_cp .mainimg .mnav ul {
  display:flex;
  width:78%;
  max-width: 1060px;
  margin:3em auto 0 auto;
  justify-content:space-between;
}
#main_cp .mainimg .mnav ul li {
  width:31%;
  max-width: 326px;
}
#main_cp .mainimg .btn {
  position: relative;
  width:41%;
  max-width: 552px;
  margin:2.2em auto 0 auto;
  z-index: +1;
}
#main_cp .mainimg .btn .close {
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(../img/btn_close.png) left top no-repeat;
  background-size: cover;
  transform: scale(0.9);
  z-index: +2;
}
  

/* ------------------

 cp_pouch
 
------------------ */
#main_cp #cp_pouch {
  margin: -60px auto 0 auto;
  padding: 120px 0 0 0;
}
#main_cp #cp_pouch .inner {
  position: relative;
  width:82%;
  max-width: 1100px;
  margin: 0 auto;
}
#main_cp #cp_pouch .inner .icons span {
  display: block;
  position: absolute;
  z-index: +1;
}
#main_cp #cp_pouch .inner .icons span:nth-child(1) {
  width: 20%;
  max-width: 220px;
  top: -2%;
  left: -3%;
}
#main_cp #cp_pouch .inner .icons span:nth-child(2) {
  width: 20%;
  max-width: 210px;
  top: 23%;
  right: 4%;
}
#main_cp #cp_pouch .inner .icons span:nth-child(3) {
  width: 14%;
  max-width: 150px;
  bottom: 7%;
  left: 3%;
}
#main_cp #cp_pouch .inner h2 {
  position: absolute;
  top: 12%;
  left: 0;
}
#main_cp #cp_pouch .inner ul.item {
  position: absolute;
  top: 31%;
  left: 0;
}
#main_cp #cp_pouch .inner ul.item li {}
#main_cp #cp_pouch .inner ul.item li:nth-child(2) {
  margin:-1.5% 0 0 0;
}
#main_cp #cp_pouch .inner ul.item li:nth-child(3) {
  margin:-0.5% 0 0 0;
}
#main_cp #cp_pouch .inner ul.item li:last-child {
  margin:5% 0 0 0;
}
#main_cp #cp_pouch .inner .close {
  position: absolute;
  display: flex;
  width:100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(../img/pouch_close.png) left top no-repeat;
  background-size: cover;
  z-index: +2;
}


/* ------------------

 cp_menu
 
------------------ */
#main_cp #cp_menu {
  padding: 3em 0 2.5em 0;
  background:url(../img/menu_bg.png) center bottom no-repeat;
}
#main_cp #cp_menu .inner {
  position: relative;
  width: 68%;
  max-width: 908px;
  margin: 0 auto;
}
#main_cp #cp_menu .inner .icons span {
  display: block;
  position: absolute;
  z-index: +1;
}
#main_cp #cp_menu .inner .icons span:nth-child(1) {
  width: 29%;
  max-width: 260px;
  top: -3%;
  right: -18.5%;
}
#main_cp #cp_menu .inner .icons span:nth-child(2) {
  width: 28%;
  max-width: 250px;
  bottom: 6%;
  left: -19%;
}



/* ------------------

 cp_mugcup
 
------------------ */
#main_cp .cp_bg2 {
  position: relative;
  background:url(../img/bg2.png) left top;
  z-index: 4;
}
#main_cp #cp_mugcup {
  margin: -60px 0 0 0;
  padding: 120px 0 0 0;
}
#main_cp #cp_mugcup .inner {
  position: relative;
	width: 82%;
  max-width: 1094px;
  margin: 0 auto;
}
#main_cp #cp_mugcup .inner .icons span {
  display: block;
  position: absolute;
  z-index: +1;
}
#main_cp #cp_mugcup .inner .icons span:nth-child(1) {
  width: 11%;
  max-width: 113px;
  top: 4%;
  right: 2.5%;
}
#main_cp #cp_mugcup .inner .close {
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(../img/mugcup_close.png) left top no-repeat;
  background-size: cover;
  z-index: +2;
}



/* ------------------

 cp_howto
 
------------------ */
#main_cp #cp_howto {}
#main_cp #cp_howto .inner {
	width: 68%;
  max-width: 900px;
  margin: 3em auto 0 auto;
}



/* ------------------

 cp_outline
 
------------------ */
#main_cp #cp_outline {
  padding: 0 0 40px 0 !important;
}
#main_cp #cp_outline .inner {
  position: relative;
	width: 74%;
  max-width: 1004px;
  margin: 5em auto 0 auto;
  padding: 0 0 40px 0 !important;
}
#main_cp #cp_outline .inner .outline_in {
  overflow-y: scroll;
  height: 500px;
  padding: 1em 2em 3em 2em;
  background: #fff;
  border:3px solid #5993d2;
  line-height: 1.6;
}
#main_cp #cp_outline .inner .outline_in a {
  border-bottom:1px solid #5993d2;
  color: #5993d2;
  text-decoration: none;
  transition: 0.3s;
}
#main_cp #cp_outline .inner .outline_in a:hover {
  border-bottom:1px solid transparent;
}
#main_cp #cp_outline .inner .outline_in p {
  margin: 0.6em 0 0 0;
}
#main_cp #cp_outline .inner .outline_in p.article {
  margin: 1.5em 0 0 0;
  color: #5993d2;
  font-size: 120%;
  font-weight: 700;
}
#main_cp #cp_outline .inner .outline_in ul.dot {
  margin: 1em 0 0 0;
}
#main_cp #cp_outline .inner .outline_in ul.dot li {
  margin: 0 0 0 1em;
  padding: 0.2em 0;
  text-indent: -1em;
}
#main_cp #cp_outline .inner .icons span {
  display: block;
  position: absolute;
  z-index: +1;
}
#main_cp #cp_outline .inner .icons span:nth-child(1) {
  width: 7.5%;
  max-width: 73px;
  top: -4%;
  left: 2.5%;
}
#main_cp #cp_outline .btn {
  position: relative;
  width:41%;
  max-width: 552px;
  margin:0 auto;
}
#main_cp #cp_outline .btn .icons span {
  display: block;
  position: absolute;
}
#main_cp #cp_outline .btn .icons span:nth-child(1) {
  width: 25%;
  max-width: 130px;
  top: -7%;
  right: -21%;
}
#main_cp #cp_outline .btn .close {
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(../img/btn_close.png) center top no-repeat;
  background-size: contain;
  transform: scale(0.9);
  z-index: +2;
}



/* ------------------

 cp_about
 
------------------ */
#main_cp #cp_about {
  position: relative;
  margin-top: -60px;
  padding: 120px 0 60px 0;
	background:#98d7e1;
  z-index: 3;
}
#main_cp #cp_about .inner {
	position:relative;
  width: 74%;
	max-width: 980px;
	margin: 0 auto;
}
#main_cp #cp_about .inner .btn {
	position: absolute;
	width: 44%;
  max-width: 424px;
  left: 28%;
  bottom: 10%;
  transition: 0.3s;
}
#main_cp #cp_about .inner .btn:hover {
  opacity: 0.7;
}


/* ------------------

 cp_contact
 
------------------ */
#main_cp #cp_contact {
	background:#fff;
}
#main_cp #cp_contact .contact_in {
	position:relative;
	padding: 4em 0 0 0;
	color:#7e634c;
  line-height: 1.8;
	text-align:center;
}
#main_cp #cp_contact .contact_in h3 {
  width: 80%;
	max-width: 630px;
	margin:0 auto;
	padding: 0.2em 0;
	font-size: 150%;
	border: 1px solid #7e634c;
}
#main_cp #cp_contact .contact_in p {
  width: 80%;
	max-width: 630px;
	margin: 0 auto;
	font-weight:700;
	text-align:center;
}
#main_cp #cp_contact .contact_in p.article {
	margin-top: 0.3em;
	font-size: 150%;
}
#main_cp #cp_contact .contact_in p.tel {
	margin-top:6px;
	padding:0 0 1em 0;
	border-bottom:1px solid #7e634c;
  letter-spacing:0.1em;
}
#main_cp #cp_contact .contact_in p.copy {
	margin-top: 1em;
	font-size: 80%;
	font-weight: 700;
}
#main_cp #col_pagetop {
	position: fixed !important;
	right: 1em !important;
	bottom: 1em !important;
  width: 12.5%;
	width: 170px;
	z-index: 5 !important;
}
#main_cp #col_pagetop img {
	transition:0.3s;
}
#main_cp #col_pagetop img:hover {
	opacity:0.7;
}
  
#hz-content {
  padding-bottom:35px;
}
  




/* ------------------

 cp_nav
 
------------------ */

#main_cp #cp_nav {
	position:fixed;
  width:400px;
	right:-301px;
	top:60px;
	font-size:0;
	z-index:11;
  /*transition: left 0.5s, right 0.5s;*/
}
#main_cp #cp_nav .cp_nav_btn {
	float:left;
	width:100px;
	cursor:pointer;
}
#main_cp #cp_nav .cp_nav_btn.active {}
#main_cp #cp_nav ul {
	float:left;
	width:300px;
}
#main_cp #cp_nav a img:hover {
 opacity:1 !important;
}
#cp_main #nav_open {
  display:none;
  border:1px solid red !important
}
#main_cp #cp_nav #cp_nav_bg {
  display: none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.7);
	z-index:-1;
}
  
#main_cp #cp_nav_sp,
#main_cp #cp_nav #cp_nav_bg_sp {
  display:none;
}
  
}



@media only screen and (min-width: 737px) and (max-width: 1360px) {

#main_cp .mainimg .mnav {
  background:url(../img/mnav_bg.png) center center no-repeat;
  background-size: 100% auto;
}
  
#main_cp #cp_menu {
  background:url(../img/menu_bg.png) center bottom no-repeat;
  background-size: 100% auto;
}
  
}


