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

/* トップ画像 */
.top{
	position:relative;
}
.top-gif{
	width:100%;
	z-index:-99;
    animation: Topimg 3.0s ease-in-out 0s forwards; 
}
@keyframes Topimg {
    0% { opacity: 0; }
    4% { opacity: 0; }
    17% { opacity: 1; }
    25% { opacity: 1; }
    100% { opacity: 1; }
}
.top-icon{
	width:25%;
	position:absolute;
	bottom:7.5%;
	right:3.5%;
	z-index:99;
	opacity:0;
    animation: TopIcon 3s linear .5s forwards; 
}
.top-icon img{
	width:100%;
}
@keyframes TopIcon {
    0% { opacity: 0; }
    4% { opacity: 0; }
    17% { opacity: 1; }
    25% { opacity: 1; }
    100% { opacity: 1; }
}

.text-right{
	width:57%;
	position:absolute;
	top:1%;
	right:0;
	z-index:1;
	opacity:0;
    animation: TextRight 3s linear 1s forwards; 
}
@keyframes TextRight {
    0% { opacity: 0; }
    4% { opacity: 0; }
    17% { opacity: 1; }
    25% { opacity: 1; }
    100% { opacity: 1; }
}
.text-left{
	width:48%;
	position:absolute;
	top:1%;
	left:0.5%;
	z-index:1;
	opacity:0;
    animation: TextLeft 3s linear 2s forwards; 
}
@keyframes TextLeft {
    0% { opacity: 0; }
    4% { opacity: 0; }
    17% { opacity: 1; }
    25% { opacity: 1; }
    100% { opacity: 1; }
}

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

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

.img-box{
	padding:0;
	position:relative;
}
.img-box-img{
	width:100%;
}

/* アプリアイコン位置調整 */
.img02-icon{
	width:25%;
	position:absolute;
	top:2.5%;
	left:3.5%;
	z-index:99;
}
.img02-icon img{
	width:100%;
}

.img03-icon{
	width:24%;
	position:absolute;
	top:1.2%;
	left:2%;
	z-index:99;
}
.img03-icon img{
	width:100%;
}

.img04-icon{
	width:24.5%;
	position:absolute;
	top:13.2%;
	left:2.7%;
	z-index:99;
	transform: rotate(-12deg);
}
.img04-icon img{
	width:100%;
}

/* エロい女子ズ */
.flex-container {
	margin-top:0.5rem;
    padding:0.8rem 0.8rem 0 0.8rem;
	width:100%;
	background:#3f3f3f;
	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:hover{
	cursor: pointer;
	box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
	transform: translateY(-5px);
	transition-duration: 0.5s;
}
.flex-item img{
	width: 100%;
}
.flex-spacing{
	margin:0 1.5% 1.5% 1.5%;
}

/* コメント男子ズ */
.voices-bg{
	margin:0 1rem 1rem 1rem;
	background:url(../img/voices-bg.jpg) no-repeat center/cover;
	border-left:1px solid #707070;
	border-right:1px solid #707070;
}
.voices{
	background:rgba(40,40,40,0.65);
	display: flex;
	font-size:1.5rem;
	line-height:2.0rem;
	border-top:1px solid #707070;
	border-bottom:1px solid #707070;
	position:relative;
}
.voices-spacing{
	margin-bottom:1rem;
}
.items-left{
	padding:1rem 0 1rem 1rem;
	width:20%;
}
.man{
	width:100%;
	border:1px solid #858585;
}
.items-right{
	padding:1rem;
	width:80%;
}
.profile{
	margin-bottom:0.8rem;
	font-size:2.0rem;
	font-weight:bold;
	display:block;
}

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