/*--------------------------------
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:#FFF;
	color:#202020;
	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;
}
img{
	vertical-align:bottom;
}
/************************************************************/
.wrapper{
	margin:0 auto;
	padding:0;
	width:100%;
}

/* トップ画像 */
.top{
	position:relative;
}
.top-gif{
	width:100%;
	z-index:1;
    animation: TopGif 3.0s ease-in-out 0s forwards; 
}
@keyframes TopGif {
    0% { opacity: 0; }
    4% { opacity: 0; }
    17% { opacity: 1; }
    25% { opacity: 1; }
    100% { opacity: 1; }
}
.top-bg{
	width:100%;
	z-index:-99;
}

.logo{
	width:40%;
	position:absolute;
	top:0%;
	left:0;
	z-index:2;
	opacity:0;
    animation: Logo 3s linear 0.25s forwards; 
}
@keyframes Logo {
    0% { opacity: 0; }
    4% { opacity: 0; }
    17% { opacity: 1; }
    25% { opacity: 1; }
    100% { opacity: 1; }
}
.sukebe{
	width:55%;
	position:absolute;
	top:15%;
	left:0;
	z-index:2;
	opacity:0;
	transform: rotate(-5deg);
    animation: Sukebe 3s linear 0.5s forwards; 
}
@keyframes Sukebe {
    0% { opacity: 0; }
    4% { opacity: 0; }
    17% { opacity: 1; }
    25% { opacity: 1; }
    100% { opacity: 1; }
}
.echi{
	width:55%;
	position:absolute;
	top:23.2%;
	left:5%;
	z-index:2;
	opacity:0;
	transform: rotate(-3deg);
    animation: Echi 3s linear 1s forwards; 
}
@keyframes Echi {
    0% { opacity: 0; }
    4% { opacity: 0; }
    17% { opacity: 1; }
    25% { opacity: 1; }
    100% { opacity: 1; }
}
.eroero{
	width:55%;
	position:absolute;
	top:32.5%;
	left:10%;
	z-index:2;
	opacity:0;
	transform: rotate(2deg);
    animation: Eroero 3s linear 1.5s forwards; 
}
@keyframes Eroero {
    0% { opacity: 0; }
    4% { opacity: 0; }
    17% { opacity: 1; }
    25% { opacity: 1; }
    100% { opacity: 1; }
}

.gachinama{
	width:55%;
	position:absolute;
	bottom:3.5%;
	right:1%;
	z-index:2;
	opacity:0;
	transform: rotate(-5deg);
    animation: Gachinama 3s linear 2.0s forwards; 
}
@keyframes Gachinama {
    0% { opacity: 0; }
    4% { opacity: 0; }
    17% { opacity: 1; }
    25% { opacity: 1; }
    100% { opacity: 1; }
}

/* ボタン */
.button01{
	margin:1.0rem 0 1.0rem 0;
	text-align:center;
	position:relative;
}
.button-img{
	width:95%;
}
.button02{
	margin:-0.5rem 0 1.0rem 0;
	text-align:center;
	position:relative;
}
.stretchy{
    animation: Stretchy 1.2s infinite;
}

@keyframes Stretchy {
	0% 		{transform: scale3d(0.95,0.95,0.95);}
	50% 	{transform: scale3d(1.0,1.0,1.0);}
	100% 	{transform: scale3d(0.95,0.95,0.95);}
}

/* おすすめポイント */
.points{
	padding:0.3rem 0.3rem 0 0.3rem;
	position:relative;
	opacity:0;
}
.points.active{
    animation: Points 2.0s ease-in-out 0.2s forwards; 
}
@keyframes Points {
    0% { opacity: 0; }
    4% { opacity: 0; }
    17% { opacity: 1; }
    25% { opacity: 1; }
    100% { opacity: 1; }
}
.points-img{
	width:100%;
}

/* 吹き出し */
.sugu{
	margin-bottom:-30px;
	width:30%;
}
.sugu.active{
	animation: Sugu 0.5s ease 0.1s 1 forwards;
}
@keyframes Sugu{
     0%{
        opacity: 0;
        transform: scale(0.7);
    }
    20%{
        opacity: 1;
        transform: scale(1.0);
    }
    40%{
        opacity: 1;
        transform: scale(0.7);
    }
    60%{
        opacity: 1;
        transform: scale(1.0);
    }
    80%{
        opacity: 1;
        transform: scale(0.95);
    }
    100%{
        opacity: 1;
        transform: scale(1.0);
    }
}

/* 女子並べる */
.flex-container {
	margin-top:0.5rem;
    padding:0.8rem 0.8rem 0 0.8rem;
	width:100%;
	background:#f1f1f1;
	border-radius:4px;
	display: flex;
	flex-wrap: wrap;
	align-content: space-around;
}
.flex-item {
	margin-bottom:1.5%;
	width: 32.33%;
	transition-duration: 0.5s;
}
.flex-item img{
	width: 100%;
}
.flex-spacing{
	margin:0 1.5% 1.5% 1.5%;
}

.gal01.active{
	animation: Gal 0.5s ease 0.3s 1 both;
}
.gal02.active{
	animation: Gal 0.5s ease 0.4s 1 both;
}
.gal03.active{
	animation: Gal 0.5s ease 0.5s 1 both;
}
.gal04.active{
	animation: Gal 0.5s ease 0.6s 1 both;
}
.gal05.active{
	animation: Gal 0.5s ease 0.7s 1 both;
}
.gal06.active{
	animation: Gal 0.5s ease 0.8s 1 both;
}
.gal07.active{
	animation: Gal 0.5s ease 0.9s 1 both;
}
.gal08.active{
	animation: Gal 0.5s ease 1.0s 1 both;
}
.gal09.active{
	animation: Gal 0.5s ease 1.1s 1 both;
}
@keyframes Gal{
     0%{
        opacity: 0;
        transform: scale(0.7);
    }
    20%{
        opacity: 1;
        transform: scale(1.0);
    }
    40%{
        opacity: 1;
        transform: scale(0.7);
    }
    60%{
        opacity: 1;
        transform: scale(1.0);
    }
    80%{
        opacity: 1;
        transform: scale(0.95);
    }
    100%{
        opacity: 1;
        transform: scale(1.0);
    }
}

/* 女子並べる */
.gals{
	padding:0;
	position:relative;
	z-index:3;
}
.gals.active{
    animation: Gals 3.0s ease-in-out 0s forwards; 
}
@keyframes Gals {
    0% { opacity: 0; }
    4% { opacity: 0; }
    17% { opacity: 1; }
    25% { opacity: 1; }
    100% { opacity: 1; }
}

/* 1対1だから */
.vs{
	padding:0 0.3rem;
	position:relative;
	opacity:0;
}
.vs.active{
    animation: Vs 3.0s ease-in-out 0.5s forwards; 
}
@keyframes Vs {
    0% { opacity: 0; }
    4% { opacity: 0; }
    17% { opacity: 1; }
    25% { opacity: 1; }
    100% { opacity: 1; }
}
.vs-img{
	width:100%;
}

/* えち下着 */
.underwear{
	padding:0.3rem 0.3rem 0 0.3rem;
	position:relative;
	opacity:0;
}
.underwear.active{
    animation: Underwear 3.0s ease-in-out 0.5s forwards; 
}
@keyframes Underwear {
    0% { opacity: 0; }
    4% { opacity: 0; }
    17% { opacity: 1; }
    25% { opacity: 1; }
    100% { opacity: 1; }
}
.underwear-img{
	width:100%;
}

/* いつでもどこでも */
.everywhere{
	padding:0.3rem 0.3rem 0 0.3rem;
	position:relative;
	opacity:0;
}
.everywhere.active{
    animation: Everywhere 3.0s ease-in-out 0.5s forwards; 
}
@keyframes Everywhere {
    0% { opacity: 0; }
    4% { opacity: 0; }
    17% { opacity: 1; }
    25% { opacity: 1; }
    100% { opacity: 1; }
}
.everywhere-img{
	width:100%;
}



/* フッター */
.footer{
	padding:0.5rem;
	color:#FFF;
	font-size:1.4rem;
	background:#ff88ad;
	text-align: center;
}