/*--------------------------------
reset
--------------------------------*/
html,body,div,p,img,iframe,a,span,blockquote,q,address,cite,
pre,code,em,small,strong,b,i,
header,article,section,nav,figure,figcaption,hgroup,menu,aside,footer,time,
h1,h2,h3,h4,h5,h6,
ul,ol,li,dl,dt,dd,
table,tbody,thead,tfoot,th,tr,td,
form,fieldset,legend,label,select,input,textarea,button{
	margin: 0;
	padding: 0;
	border: 0;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	vertical-align: baseline;
}
header,article,section,nav,figure,figcaption,hgroup,menu,aside,footer{
	display: block;
}
ul li{
	list-style-type: none;
}
h1,h2,h3,h4,h5,h6{
	font-weight: 500;
}
body{
	line-height: 1;
}
a{
	color:#333;
	text-decoration: none;
}

table{
	border-collapse: collapse;
	border-spacing: 0;
}
select,option,input:not([type=checkbox]):not([type=radio]),textarea,button{
	/*font: inherit;*/
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: none;
}
blockquote::before,blockquote::after,q::before,q::after{
	content: '';
	content: none;
}
[type=submit],[type=button],[type=reset],[type=file],button{
	cursor: pointer;
}
:focus{
	outline: none;
}

html{
	font-size:62.5%;
}
body{
	background:#a81183;
	color:#FFF;
	line-height:1.8rem;
	font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;

	background-image:url(../images/office01.png);
	background-repeat:no-repeat;
	background-size:100%;
	background-position:left top;
}
a{
	text-decoration:none;
	color:#333;
}

/************************************************
①画面幅480px以下はスマホ表示
*************************************************/
@media screen and (max-width: 480px) {

img{
	vertical-align:bottom;
	max-width:100%;
}
.top-box{
	margin:0 0 30px 0;
	background-image:url(../images/top.jpg);
	background-size:cover;
	background-repeat:no-repeat;
    background-position:center;
	position:relative;
	z-index:1;
	animation: step 1.0s ease-in-out 0.0s forwards; 
}
.balloon01{
	width:80%;
	position:absolute;
	top:3.0%;
	left:3.0%;
	z-index:2;
	opacity: 0;
	animation: bound 0.5s both;
}
@keyframes bound{
    0%{
        opacity: 0;
        transform: scale(.5);
    }
    20%{
        opacity: 1;
        transform: scale(1.0);
    }

    50%{
        opacity: 1;
        transform: scale(.8);
    }
    100%{
        opacity: 1;
        transform: scale(1);
    }
}
.balloon02{
	width:80%;
	position:absolute;
	top:21.5%;
	right:3.0%;
	z-index:2;
	opacity: 0;
	animation: bound 0.5s both 0.5s;
}
.balloon03{
	width:80%;
	position:absolute;
	top:38.0%;
	left:2.0%;
	z-index:2;
	opacity: 0;
	animation: bound 0.5s both 1.0s;
}
.text01{
	width:95%;
	position:absolute;
	top:50.0%;
	left: 0;
	right: 0;
	margin: auto;
	z-index:2;
	opacity: 0;
	animation: Balloon-L 0.5s both 1.3s;
}
.top-btn{
	width:80%;
	position:absolute;
	top:80.0%;
	left: 0;
	right: 0;
	margin: auto;
	z-index:3;
	opacity: 0;
	animation: bound 0.5s both 1.6s;
}
.heading01{
	margin-top:-40px;
	position:relative;
	z-index:2;
	opacity: 0;
	animation: Balloon-L 0.5s both 1.9s;
}
@keyframes Balloon-L {
  0% {
    opacity: 0;
    transform: translateX(-64px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.necessities{
	margin-bottom:0px;
	padding:0 10px;
	opacity:0;
}
.necessities.active{
    animation: step 1.0s ease-in-out 0.2s forwards; 
}
.step{
	margin-top:20px;
	margin-bottom:20px;
	padding:0 10px;
	opacity:0;
}
.step.active{
    animation: step 1.0s ease-in-out 0.2s forwards; 
}
@keyframes step {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 1; }
}
.step3{
	padding:0 12px;
	position:absolute;
	top:0;
	left:0;
	right:0;
	margin: auto;
	z-index:5;
	opacity:0;
}
.step3.active{
    animation: step 1.0s ease-in-out 0.2s forwards; 
}
.swiper-top{
	position:relative;
	padding-top:80px;
}
.step4{
	width:100%;
	position:absolute;
	top:-31%;
	left:0;
	z-index:2;
    animation: purupuru2 0.1s infinite;
}
@keyframes purupuru2 {
    0% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(0.98, 0.95);
    }
}

.onapet{
	margin-bottom:20px;
	padding:0;
	position:relative;
	z-index:1;
}
.step5{
	position:absolute;
	top:-81px;
	left:0;
	z-index:2;
    animation: purupuru2 0.1s infinite;
}
.sex{
	margin-top:0;
	padding:0;
	position:relative;
}
.button{
	margin:20px 0 20px 0;
	padding:0 2.0rem;
	animation: button 2s ease-out infinite;
}
@keyframes button {
    0% {
        transform: translate(2px, 0px);
    }
    5% {
        transform: translate(-2px, 0px);
    }
    10% {
        transform: translate(2px, 0px);
    }
    15% {
        transform: translate(-2px, 0px);
    }
    20% {
        transform: translate(2px, 0px);
    }
    25% {
        transform: translate(-2px, 0px);
    }
    30% {
        transform: translate(0px, 0px);
    }
}
.footer{
	padding:1.0rem;
	color:#FFF;
	font-size:1.3rem;
	background:#f64b7b;
	text-align: center;
	line-height:2.0rem;
}

}
/************************************************
スマホ表示ここまで
*************************************************/



/************************************************
②画面幅480px以上はPC表示
*************************************************/
@media screen and (min-width: 481px) {

img{
	vertical-align:bottom;
	max-width:100%;
}
.wrapper{
	margin:0 auto;
	padding:0;
	width:500px;
}
.top-box{
	margin:0 0 30px 0;
	background-image:url(../images/top.jpg);
	background-size:cover;
	background-repeat:no-repeat;
    background-position:center;
	position:relative;
	z-index:1;
}
.balloon01{
	width:80%;
	position:absolute;
	top:3.0%;
	left:3.0%;
	z-index:2;
	opacity: 0;
	animation: bound 0.5s both;
}
@keyframes bound{
    0%{
        opacity: 0;
        transform: scale(.5);
    }
    20%{
        opacity: 1;
        transform: scale(1.0);
    }

    50%{
        opacity: 1;
        transform: scale(.8);
    }
    100%{
        opacity: 1;
        transform: scale(1);
    }
}
.balloon02{
	width:80%;
	position:absolute;
	top:21.5%;
	right:3.0%;
	z-index:2;
	opacity: 0;
	animation: bound 0.5s both 0.5s;
}
.balloon03{
	width:80%;
	position:absolute;
	top:38.0%;
	left:2.0%;
	z-index:2;
	opacity: 0;
	animation: bound 0.5s both 1.0s;
}
.text01{
	width:80%;
	position:absolute;
	bottom:22.0%;
	left: 0;
	right: 0;
	margin: auto;
	z-index:2;
	opacity: 0;
	animation: Balloon-L 0.5s both 1.3s;
}
.top-btn{
	width:80%;
	position:absolute;
	top:80.0%;
	left: 0;
	right: 0;
	margin: auto;
	z-index:3;
	opacity: 0;
	animation: bound 0.5s both 1.6s;
}
.heading01{
	margin-top:-40px;
	position:relative;
	z-index:2;
	opacity: 0;
	animation: Balloon-L 0.5s both 1.9s;
}
@keyframes Balloon-L {
  0% {
    opacity: 0;
    transform: translateX(-64px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.necessities{
	margin-bottom:0px;
	padding:0 10px;
	opacity:0;
}
.necessities.active{
    animation: step 1.0s ease-in-out 0.2s forwards; 
}
.step{
	margin-top:20px;
	margin-bottom:20px;
	padding:0 10px;
	opacity:0;
}
.step.active{
    animation: step 1.0s ease-in-out 0.2s forwards; 
}
@keyframes step {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 1; }
}
.step3{
	padding:0 12px;
	position:absolute;
	top:0;
	left:0;
	right:0;
	margin: auto;
	z-index:5;
	opacity:0;
}
.step3.active{
    animation: step 1.0s ease-in-out 0.2s forwards; 
}
.swiper-top{
	position:relative;
	padding-top:80px;
}
.step4{
	width:100%;
	position:absolute;
	top:-31%;
	left:0;
	z-index:2;
    animation: purupuru2 0.1s infinite;
}
@keyframes purupuru2 {
    0% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(0.98, 0.95);
    }
}

.onapet{
	margin-bottom:20px;
	padding:0;
	position:relative;
	z-index:1;
}
.step5{
	position:absolute;
	top:-81px;
	left:0;
	z-index:2;
    animation: purupuru2 0.1s infinite;
}
.sex{
	margin-top:0;
	padding:0;
	position:relative;
}
.button{
	margin:20px 0 20px 0;
	padding:0 2.0rem;
	animation: button 2s ease-out infinite;
}
@keyframes button {
    0% {
        transform: translate(2px, 0px);
    }
    5% {
        transform: translate(-2px, 0px);
    }
    10% {
        transform: translate(2px, 0px);
    }
    15% {
        transform: translate(-2px, 0px);
    }
    20% {
        transform: translate(2px, 0px);
    }
    25% {
        transform: translate(-2px, 0px);
    }
    30% {
        transform: translate(0px, 0px);
    }
}
.footer{
	padding:1.0rem;
	color:#FFF;
	font-size:1.3rem;
	background:#f64b7b;
	text-align: center;
	line-height:2.0rem;
}

}
/************************************************
PC表示ここまで
*************************************************/