/*--------------------------------
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.0;
}
a{
	color:#FFF;
	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:#000;
		color:#ccc;
		font-size:1.6em;
		line-height:1.8em;
		font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}

a{
		text-decoration:none;
}

/*ラップ*/

.wrapper {
		width:1024px;
		margin: 0 auto;
	}

/* トップ */

.top{
		margin:0 auto;
		height:611px;
		width: 100%;

		/*height: 0;*/

		/* (画像の高さ / 画像の横幅) × 100 */
		/*padding-top: 81.4666666667%;*/
		background: url('../image/top_bg.jpg');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;

		position:relative;
}

.photo01, .photo02, .photo03, .photo04{
		width:30%;
		border:2px solid #FFF;
		z-index:1;
}
.photo01{
		position:absolute;
		top:8%;
		left:20%;
		transform:rotate(10deg);
		opacity : 0;
		transition : all 0.3s;
		animation: Photo01 0.5s both 0s;
}

@keyframes Photo01{
    0%{
        opacity: 0;
		transform:rotate(-100deg) scale(.1);
    }
    60%{
        opacity: 1;
    }
    100%{
        opacity: 1;
		transform:rotate(10deg) scale(1.0);
    }
}

.photo02{
		position:absolute;
		top:10%;
		right:20%;
		transform:rotate(-20deg);
		opacity : 0;
		transition : all 0.3s;
		animation: Photo02 0.5s both 0.3s;
}

@keyframes Photo02{
    0%{
        opacity: 0;
		transform:rotate(100deg) scale(.1);
    }
    60%{
        opacity: 1;
    }
    100%{
        opacity: 1;
		transform:rotate(-20deg) scale(1.0);
    }
}

.photo03{
		position:absolute;
		bottom:22%;
		left:20%;
		transform:rotate(-10deg);
		opacity : 0;
		transition : all 0.3s;
		animation: Photo03 0.5s both 0.6s;
}

@keyframes Photo03{
    0%{
        opacity: 0;
		transform:rotate(100deg) scale(.1);
    }
    60%{
        opacity: 1;
    }
    100%{
        opacity: 1;
		transform:rotate(-10deg) scale(1.0);
    }
}

.photo04{
		position:absolute;
		bottom:22%;
		right:20%;
		transform:rotate(10deg);
		opacity : 0;
		transition : all 0.3s;
		animation: Photo04 0.5s both 0.9s;
}

@keyframes Photo04{
    0%{
        opacity: 0;
		transform:rotate(-100deg) scale(.1);
    }
    60%{
        opacity: 1;
    }
    100%{
        opacity: 1;
		transform:rotate(10deg) scale(1.0);
    }
}

.forgive{
		width:70%;
		position:absolute;
		bottom:45%;
		left:15%;
		z-index:2;
		opacity : 0;
		transition : all 0.3s;
		animation: Forgive 1.0s both 1.1s;
	}

@keyframes Forgive{
    0%{
        opacity: 0;
    }
    20%{
        opacity: 0;
    }
    60%{
        opacity: 1;
    }
    100%{
        opacity: 1;
    }
}

.logo{
		width:40%;
		position:absolute;
		bottom:1%;
		left:2%;
		z-index:1;
	}

.bangumi{
		width:35%;
		position:absolute;
		bottom:1%;
		right:2%;
		z-index:1;
	}

/* 吹き出し */

.balloon{
		text-align:center;
}
.balloon img{
		width:65%;
		vertical-align:bottom;
}

/***** 若妻熟女妻セレブ妻母乳妻 *****/

/* 共通部分 */

.type01, 
.type02, 
.type03, 
.type04{
		position:relative;
		width:100%;
}

[class^="star"]{
		width:8%;
}

[class^="hentaido"]{
		width:20%;
}

/* 範囲に入った時にクラスactiveを付与で発動 */

.star01, 
.star02, 
.star03, 
.star04, 
.star05, 
.star06, 
.star07{
		opacity:0;
}

.star01.active {
	animation: Star 0.8s both 1 0s;
}
.star02.active {
	animation: Star 0.8s both 1 0.2s;
}
.star03.active {
	animation: Star 0.8s both 1 0.5s;
}
.star04.active {
	animation: Star 0.8s both 1 0.7s;
}
.star05.active {
	animation: Star 0.8s both 1 0.9s;
}
.star06.active {
	animation: Star 0.8s both 1 1.1s;
}
.star07.active {
	animation: Star 0.8s both 1 1.3s;
}

@keyframes Star{
    0%{
        opacity: 0;
        transform: scale(.5) rotate( -100deg );
    }
    20%{
        opacity: 1;
        transform: scale(1.0) rotate( -50deg );
    }
    40%{
        opacity: 1;
        transform: scale(.7) rotate( -20deg );
    }
    60%{
        opacity: 1;
        transform: scale(1.0) rotate( 0deg );
    }
    80%{
        opacity: 1;
        transform: scale(.9) rotate( 0deg );
    }
    100%{
        opacity: 1;
        transform: scale(1.0) rotate( 0deg );
    }
}

@keyframes Hentaido01{
     0%{
        opacity: 0;
        transform: scale(.5) rotate(5deg);
    }
    20%{
        opacity: 1;
        transform: scale(1.0) rotate(5deg);
    }
    40%{
        opacity: 1;
        transform: scale(.7) rotate(5deg);
    }
    60%{
        opacity: 1;
        transform: scale(1.0) rotate(5deg);
    }
    80%{
        opacity: 1;
        transform: scale(.90) rotate(5deg);
    }
    100%{
        opacity: 1;
        transform: scale(1) rotate(5deg);
    }
}

@keyframes Hentaido02{
     0%{
        opacity: 0;
        transform: scale(.5) rotate(-5deg);
    }
    20%{
        opacity: 1;
        transform: scale(1.0) rotate(-5deg);
    }
    40%{
        opacity: 1;
        transform: scale(.7) rotate(-5deg);
    }
    60%{
        opacity: 1;
        transform: scale(1.0) rotate(-5deg);
    }
    80%{
        opacity: 1;
        transform: scale(.90) rotate(-5deg);
    }
    100%{
        opacity: 1;
        transform: scale(1) rotate(-5deg);
    }
}

.young, 
.adult, 
.celeb, 
.milk{
		width:100%;
		vertical-align:bottom;
}

/* 若妻 */

.stars01{
		width:98%;
		text-align:left;
		position:absolute;
		bottom:5%;
		left:1%;
		z-index:1;
		transform:rotate(5deg);
}

.hentaido-young{
		position:absolute;
		top:18%;
		left:1%;
		z-index:1;
        opacity:0;
		transform:rotate(5deg);
}

.hentaido-young.active{
		animation: Hentaido01 0.8s ease 0s both;
}

.label01{
		width:8%;
		position:absolute;
		bottom:9%;
		right:5%;
		z-index:1;
		transform:rotate(5deg);
}

/* 熟女妻 */

.stars02{
		width:100%;
		text-align:right;
		position:absolute;
		bottom:5%;
		right:1%;
		transform:rotate(-5deg);
}

.hentaido-adult{
		position:absolute;
		top:18%;
		right:1%;
		z-index:1;
        opacity:0;
		transform:rotate(-5deg);
}

.hentaido-adult.active{
		animation: Hentaido02 0.8s ease 0s both;
}

.label02{
		width:8%;
		position:absolute;
		bottom:9%;
		left:5%;
		transform:rotate(-5deg);
}

/* セレブ妻 */

.stars03{
		width:98%;
		text-align:left;
		position:absolute;
		bottom:5%;
		left:1%;
		transform:rotate(5deg);
}

.hentaido-celeb{
		position:absolute;
		top:18%;
		left:1%;
		z-index:1;
        opacity:0;
		transform:rotate(5deg);
}

.hentaido-celeb.active{
		animation: Hentaido01 0.8s ease 0s both;
}

.label03{
		width:8%;
		position:absolute;
		bottom:9%;
		right:5%;
		transform:rotate(5deg);
}

/* 母乳妻 */

.stars04{
		width:100%;
		text-align:right;
		position:absolute;
		bottom:5%;
		right:1%;
		transform:rotate(-5deg);
}

.hentaido-milk{
		position:absolute;
		top:18%;
		right:1%;
		z-index:1;
        opacity:0;
		transform:rotate(-5deg);
}

.hentaido-milk.active{
		animation: Hentaido02 0.8s ease 0s both;
}

.label04{
		width:8%;
		position:absolute;
		bottom:9%;
		left:5%;
		transform:rotate(-5deg);
}

/* やめられない */

.cantstop img{
		width:100%;
		vertical-align:bottom;
}

/* 見出し */

.heading{
		margin:1% 0px 2% 0px;		
		padding:6px;
		color:#FFF;
		background:#f10e64;
		font-size:1.4em;
		text-align:center;
}

/* 利用者の声 */

.voices{
		margin:0;
		padding:0 5px;
		display: flex;
    	align-items: flex-start;
		justify-content: space-between;
		flex-wrap: wrap;
		max-width: 1024px;
}

.voices img{
		width:50%;
		vertical-align:bottom;
}

/* 遊び方 */

.howto01{
		text-align:center;
}

.howto01 img{
		vertical-align:bottom;
}

.text01{
		width:100%;
}

.howto01 .arrow, 
.howto02 .arrow, 
.howto03 .arrow{
		margin:5% auto;
		width:35%;
}

.howto04 .arrow{
		margin:5% auto 0 auto;
		width:35%;
}

.text02{
		margin-bottom:5%;
		width:100%;
}

/* 女性選択 */

@keyframes idle-anim {
		0% {opacity:0.3;}
		10% {opacity:0.3;}
		20% {opacity:0.3;}
		30% {opacity:0.3;}
		40% {opacity:0.3;}
		50% {opacity:0.3;}
		60% {opacity:0.3;}
		70% {opacity:0.3;}
		80% {opacity:0.3;}
		85% {opacity:0.3;}
		90% {opacity:1;}
		91% {opacity:1;}
		92% {opacity:1;}
		93% {opacity:1;}
		94% {opacity:1;}
		95% {opacity:1;}
		96% {opacity:1;}
		97% {opacity:1;}
		98% {opacity:1;}
		99% {opacity:1;}
		100% {opacity:1;}
}

@keyframes Border{
		10%{box-shadow: 0 1px 18px 1px #ffffff;}
}

.container {
		padding:3% 0;
        display: flex;
        flex-wrap:wrap;
        justify-content: space-around;
		align-content: space-around;

		background: url('../image/howto_bg.jpg');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
}

.container p{
		width:30%;
		background:#000;
}

.elem-common {
		position: relative;
}

.space{
		margin-bottom:3%;
}

.elem-open-1 {
		animation: idle-anim 900ms infinite 1500ms alternate, Border 1800ms infinite 2300ms;
}
.elem-open-2 {
		animation: idle-anim 900ms infinite 1700ms alternate, Border 1800ms infinite 2300ms;
}
.elem-open-3 {
		animation: idle-anim 900ms infinite 1900ms alternate, Border 1800ms infinite 2600ms;
}
.elem-open-4 {
		animation: idle-anim 900ms infinite 2100ms alternate, Border 1800ms infinite 2900ms;
}
.elem-open-5 {
		animation: idle-anim 900ms infinite 2300ms alternate, Border 1800ms infinite 3100ms;
}
.elem-open-6 {
		animation: idle-anim 900ms infinite 2500ms alternate, Border 1800ms infinite 3400ms;
}

.woman01, 
.woman02, 
.woman03, 
.woman04, 
.woman05, 
.woman06{
		width:100%;
		border:1px solid #FFF;
		vertical-align:bottom;
		opacity: 0.3;
}

.howto02{
		text-align:center;
}

.howto02 img{
		vertical-align:bottom;
}

.text03{
		margin-bottom:5%;
		width:100%;
}

.hello{
		width:100%;
}

.howto03{
		text-align:center;
}

.howto03 img{
		vertical-align:bottom;
}

.text03{
		margin-bottom:5%;
		width:100%;
}

.sex{
		width:100%;
}

.howto04{
		text-align:center;
}

.howto04 img{
		vertical-align:bottom;
}

.text03{
		margin-bottom:5%;
		width:100%;
}

.lastly{
		width:100%;
}

/* ボタン */

.button{
		margin:20px auto;
		padding:0;
		text-align:center;
}
.button img{
		width:65%;
}