/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}

body{
	font: 14px/1.6 "brandon-grotesque", "vdl-v7gothic",  Arial, Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
	font-weight: 500;
	-webkit-text-size-adjust:100%;
	overflow-x: hidden;
	color: #333;
	max-width: 100%;
}


/* common
------------------------------------------------------------*/
section { width: 100%; margin: 0 auto; clear: both; overflow: hidden; padding: 3rem 0 0; box-sizing: border-box;}
.inner  { width: 90%; margin: 0 auto; padding: 0; max-width: 1024px;}
img{width:100%;}

a{ color: #349de5; text-decoration: none;}
a:hover, .active{ text-decoration: underline;}
a:active, a:focus,input:active, input:focus{outline:0;}

.sp{display: none;}
.pc{display: inherit;}

.col2 {width: 100%; display: table; margin: 0 auto 2%;}
.col2 li{
	width: 50%; padding: 3% 3%;
	display: table-cell; text-align: center;
	vertical-align: bottom;
	font-size: 1rem; line-height: 1.6;
	margin-bottom: 30px;
}
.txt-large{ font-size: 150%;}
a.btn{
  display: block; width: 50%;
  padding: 1em; margin: 0 auto 3rem;
  color: #fff; text-decoration: none;
	font-size: 1.2rem; line-height: 2.4rem; 
  background-color: #fff; text-align: center;
  border-radius: 8px; font-weight: bold;
}
a.btn:active{
    -ms-transform: translateY(2px);
    -webkit-transform: translateY(2px);
    transform: translateY(2px);/*下に動く*/
    border-bottom: none;/*線を消す*/
}

 #page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  background: #000;
  opacity: 0.6;
  border-radius: 50%;
	 z-index: 99;
  }
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: FontAwesome;
  content: '\f062';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 50%;
  height: 50%;
  top: 0;
  bottom: 25%;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
.header{
	position:fixed; overflow: hidden; clear: both;
	width:100%; margin: 0 auto; background-color: #fff;
	z-index: 100; border-bottom: 1px solid #ccc;
}
.logo{padding: 1rem; width:160px;}
footer{width: 100%; background-color: #cccccc; font-size: .8rem; color: #fff;}
.footer_inner{max-width: 1024px; margin:0 auto; padding:1rem 0; overflow: hidden;}
.footer_inner img {float: left; max-width: 100px; vertical-align: bottom;}
.footer_inner p { float: right; }
.footer_inner a {color: #fff;}
.footer_inner address { float: right; clear:both;}

#munchkin .orange {color: #f08300;}
#munchkin .pink   {color: #d3007f;}
#munchkin .blue   {color: #00a2d9;}
#munchkin .green  {color: #79bd28;}
#munchkin .purple {color: #7759a3;}

#munchkin{width: 100%; margin: 0 auto;}
h1{
	font-size: 1rem; display: inline-block; float: right;
	color: #f08300; font-weight: 700;
	padding: 1.5rem 1rem; vertical-align: middle;
}
h3{
	width: 100%; font-size: 2.4rem; text-align: center;
	color: #fff; font-weight: 700; margin-bottom: 2rem;
}

.container{padding-top:100px;}


div[class*="main"]{
	width: 100%; margin: 0 auto; padding: 0; 
	 position: absolute;
	top: 100px; left: 0; height: 783px
}
.main  {background:#78bc27;z-index: 2;}
.main2 {background:#fff; z-index: 1;}

.first-img{opacity: 1;}
.first-img {
  -webkit-animation: first 0.5s ease 2s 1 forwards;
  animation: first 0.5s ease 2s 1 forwards;
}
@-webkit-keyframes first {
  100% {opacity: 0}
}
@keyframes first {
  100% {opacity: 0;}
}

.main2 .innner{position: relative; display: block; max-width: 1024px; margin: 0 auto;}
p[class*="element"]{opacity: 0; position: absolute;}
.element01 {
	bottom: 15%; right: 8%;
  -webkit-animation: example 0.5s ease 2.5s 1 forwards;
  animation: example 0.5s ease 2.5s 1 forwards; z-index: 2;
}
.element02 {
	bottom: 3%; left: 20%;
  -webkit-animation: example 0.5s ease 3.5s 1 forwards;
  animation: example 0.5s ease 3.5s 1 forwards; z-index: 3;
}
.element03 {
	top: 20%; left: 6%;
  -webkit-animation: example 0.5s ease 4.5s 1 forwards;
  animation: example 0.5s ease 4.5s 1 forwards; z-index: 4;
}
.element04 {
	top: 10%; right: 3%;
  -webkit-animation: example 0.5s ease 5.5s 1 forwards;
  animation: example 0.5s ease 5.5s 1 forwards; z-index: 5;
}
.element05 {
top: 3%; left: 30%;
  -webkit-animation: example 0.5s ease 6.5s 1 forwards;
  animation: example 0.5s ease 6.5s 1 forwards; z-index: 1;
}
.element05 img{width: 80%;}
.element06 {
	top: 40%; left: 30%; text-align: center; line-height: 1.2;
	font-weight: 800; font-size: 4.8rem; color: #d30480;
  -webkit-animation: example 0.5s ease 7s 1 forwards; 
  animation: example 0.5s ease 7s 1 forwards; z-index: 10;
}
.element06 strong{display: block;  font-size: 6rem; font-weight: 800;}

@-webkit-keyframes example {
  100% {opacity: 1}
}
@keyframes example {
  100% {opacity: 1;}
}

.nayami {margin-top: 783px; padding-top: 0;}
.nayami h3{
	position: relative; margin: 0 auto;
	background-color: #8d8d8d; color: #fff; padding: 2rem 0;}
.nayami h3::after{
	content: '';
	position: absolute;
	width: 135px;
	height:100%;
	bottom: 0;
	right: 10%;
	background: #8d8d8d url(../images/illust02.png) no-repeat center;
	background-size:69%;}
.nayami-img{
	width: 100%; height: 0; padding-top: 59%;
	background: #d3007f url(../images/nayami.png) no-repeat center;
	background-size:contain; margin: 0;
	overflow:hidden;
}
.question {text-align: center;}
.question h3{
	color: #7759a3;
}
.question ul{margin-bottom: 3rem;}
.question .balloon{
	width: 80%; position: relative;
  display: inline-block;
  margin:0 auto 3rem;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #fff;
  font-size: 1.8rem;
  background: #7759a3;
	border-radius: 10px;
}
.question .balloon:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #7759a3;
}
.question .balloon p {
  margin: 0;
  padding: 0;
}
.question .kaiketsu {font-size: 1.8rem;}
.question .kaiketsu strong{
	color: #d30480;
	font-size: 250%;
	display: block;
	font-weight: 800;
}
.question img{max-width: 240px; margin-bottom: -2%;}


.answer{
	background-color: #d3007f;
	color: #fff;
	text-align: center;
}
.answer .inner{
	padding-bottom: 5%;
}
.answer img{ width: 80%; margin: 0 auto 2rem; text-align: center;}
.answer img[src*="feeder-img"]{ width: 100%; }
.answer p { font-size: 1rem; font-weight: normal; margin-bottom: 1rem;}
.answer h4{font-size: 1.6rem; font-weight: 800; margin-bottom: 1rem;}
.answer strong{ display: block; font-size: 150%; font-weight: 700;}

.answer .col2 { width: 90%; margin:0 auto;}
.answer .col2 > li { text-align: left; vertical-align: middle; line-height: 1.8; color: #fff;}
.answer .col2 > li img {width: 100%;}
.answer .col2 > li img[src*="icon-heart"] {max-width: 100px; margin-bottom:.5rem;}
.answer .col2 > li strong { font-size: 140%;}


.birthday{
	width: 100%; height: auto; overflow: hidden;
	background: #d3007f url(../images/bgimg-feeder.jpg) no-repeat center;
	background-size:100%; margin: 0;
}
.birthday .inner{ width: 100%;}

.birthday .inner .btn-area{
	width: 40%;  overflow: hidden; margin: 10% 0; padding: 5%;
	color: #666; background-color: #fff; border-radius: 20px;
	letter-spacing: 4px;
}
.birthday .inner .btn-area p{font-size: 2.4rem; line-height: 1.666; font-weight: 800;}
.birthday .inner .btn-area p.note{font-size: .6rem; color: #333; font-weight: normal; letter-spacing: 0;}
.birthday .inner .btn-area img{margin-bottom: 0; max-width: 260px;}
.birthday .inner .btn-area .btn{background-color: #009966; margin-bottom: 1rem;}

.shop-btn li .btn{
  display: inline-block; width: 50%;
  padding: 1em; margin: 0 auto;
  color: #fff; text-decoration: none;
	font-size: 1.2rem; line-height: 2.4rem; 
  background-color: #fff; text-align: center;
  border-radius: 8px; font-weight: bold;
}
.btn-shop {width: 100%;}
.btn-shop li {display: inline; width: 40%;}
.btn-shop li .btn{margin: 0 10px; line-height: 0; width: 24%; display: inline-block;}
.btn-shop li .btn > img{ margin-bottom: 0;}
.btn-shop li .btn:active{
    -ms-transform: translateY(2px);
    -webkit-transform: translateY(2px);
    transform: translateY(2px);/*下に動く*/
    border-bottom: none;/*線を消す*/
}


@media screen and (max-width: 1024px) {
.main2 .innner{display:inline; max-width: 100%; }
.element01 {bottom: 15%; right: 8%; z-index: 2;}
.element01 img{width: 80%;}
.element02 {bottom: 3%; left: 20%; z-index: 3;}
.element02 img{width: 80%;}
.element03 {top: 20%; left: 6%; z-index: 4;}
.element03 img{width: 80%;}
.element04 {top: 10%; right: 0; z-index: 5;}
.element04 img{width: 80%;}
.element05 {top: 3%; left: 15%; z-index: 1;}
.element05 img{width: 80%;}
.element06 {top: 45%; left: 24%; font-size: 4.2rem; z-index: 10;}
.element06 img{width: 70%;}
.element06 strong{display: block;  font-size: 5.2rem; font-weight: 800;}
	
}


@media screen and (max-width: 768px) {
.pc{display: none;}
.sp{display: inherit;}

.visual .inner{width: 100%;}
div[class*="main"]{
	width: 100%;
	top: 100px; left: 0; height: 425px
}
.main  {background:#78bc27;z-index: 2;}
.main2 {background:#fff; z-index: 1;}
.element01 {bottom: 15%; left:60%;}
.element02 {bottom: 3%; left: 20%; z-index: 3;}
.element02 img{width: 50%;}
.element03 {top: 50%; left: 10%; z-index: 4;}
.element03 img{width: 30%;}
.element04 {top: 10%; right: 0; z-index: 5;}
.element04 img{width: 30%;}
.element05 {top: 3%; left: 37%; z-index: 1;}
.element05 img{width: 100%;}
.element06 {top: 40%; left: 0; font-size: 2.4rem; z-index: 10;}
.element06 img{width: 20%;}
.element06 strong{display: block;  font-size: 3.2rem; font-weight: 800;}

h3{
	width: 100%; font-size: 1.8rem; text-align: center;
	color: #fff; font-weight: 700; margin-bottom: 2rem;
}
.nayami {margin-top: 425px;}
.nayami-img{
	width: 100%; height: 0; padding-top: 132%;
	background: #d3007f url(../images/nayami-sp.jpg) no-repeat center;
	background-size:contain; margin: 0;
	overflow:hidden;
}
.nayami h3::after{display: none;}
.nayami-title{
	text-align: center;  margin-bottom: -1%;
	background-color: #8d8d8d;
}
img[src*="illust02"]{ max-width: 25%; display: block;}
.question ul{margin-bottom: 1rem;}
.question .balloon { width: 90%; margin-bottom: 1.5rem; font-size: 1.4rem;}
.question .kaiketsu strong{font-size: 150%;}
img[src*="illust03"]{ max-width: 47%;}
	
.answer .col2 {width: 100%; display: inherit; margin: 0 auto;}
.answer .col2.last {margin-bottom: 10%;}
.answer .col2 li{
	width: 100%; padding: 0;
	display: inline-block;
	margin-bottom: 0;
}
.answer .col2 li img{margin-bottom: 0;}
.answer .col2 > li { width: 80%; }
.answer .col2 > li img[src*="icon-heart"] {max-width: 80px; margin-bottom:.5rem;}
.answer img[src*="seriese"]{ width: 100%; }

.birthday{
	width: 100%; height: auto; overflow: hidden;
	background-image: none;
	}
.birthday .inner .btn-area{
	width: 80%;  margin: 0 auto; padding: 5%;
}
.birthday .inner .btn-area p{font-size: 1.6rem; margin-bottom: .5rem;}
.birthday .inner .btn-area img{max-width: 160px; margin-bottom: .5rem;}
.btn-shop li {display: block; width: 100%; margin: 0 auto;}
.btn-shop li .btn{margin: 0 auto 1rem; line-height: 0; width: 60%;}
.btn-shop li .btn > img{width: 65%;}
a.btn{padding: .5rem; line-height: 2rem; width: 80%;}
	
}