@charset "UTF-8";
/* CSS Document */



.container {
background: linear-gradient(-135deg, #ea617c,#f4a894, #f7cbde,#f3a5ab)!important;
z-index: 10;
}

.container .menu__single>a{
color: #fff!important;
}

.box1:after{
	content:"　toppics!";
	color: #fff;
	font-size: 1.2em;
	font-family: 'Staatliches', cursive;
}

.box2 a{
	display: inline-block;
	position: relative;
	color: #fff;
 	text-decoration: none;
}
.box2 a:before{
	content: "";
	position: absolute;
	 left: 0;
	bottom: -4px;
	width: 100%;
	height: 1px;
	background: #fff!important;
	transform: scale(0, 1);
	transform-origin: left;
	transition: 0.2s;
}
.box2 a:hover:before {
	transform: scale(1);
}

.box3 a{
	color: #fff!important;
}

.box3 li{
border-left: solid 2px #fff!important;
}

body{
max-width: 100%;
letter-spacing : 0.1em;
font-family: 'Kiwi Maru', serif!important;
margin: 0;
padding: 0;
}

.scrolldown4 span{
color: #0F1021!important;
}

/* 矢印の描写 */
.scrolldown4:before {
background:#0F1021!important;
}

.scrolldown4:after{
background:#0F1021!important;
}




/*.shutter{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:#1e1e1e;
z-index:9999;
animation: byeShutter 2.6s forwards; 
}*/

.shutter{
position:absolute;
top:0;
left:0;
bottom:0;
margin:auto;
background-color:#0F1021;
height:1px;
animation: shutterOpen 1.5s forwards;
}





/*@keyframes byeShutter{
70%{
opacity:1;
}
100%{
opacity:0;
display:none;
z-index:1;
}
}*/

@keyframes shutterOpen{
0%{
width:0;
height:1px;
}
50%{
width:100%;
height:1px;
}

100%{
width:100%;
height:30%;
opacity:  0.4;
}
}

/*@keyframes contentScale{
70%{
transform:perspective(800px) scale(0.9) rotateX(15deg);
}
100%{
transform:perspective(800px) scale(1) rotateX(0);
}
}
*/		


.monotop{
position: relative;
}

.fadeIn{
position: absolute;
top: 42%;
left: 0;
right: 0;
bottom: 0;
margin: auto;
animation-name:fadeInAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
color: #fff;
z-index: 9999;
}

@keyframes fadeInAnime{
0% {
opacity: 0;
}
50% {
opacity: 0;
}

100% {
opacity: 1;
}
}

.monotop{
z-index: -1;
}





/*========= レイアウトのためのCSS ===============*/


#header{
width:100%;
height: 100vh;
position: relative;
} 

#header:before{
content: '';
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height: 100vh;
}

#container{

z-index:1;
background:#fff;
width: 1200px;
margin: 0 auto;
}

.a_1 {
position: relative;
width: 85%;
margin: 0 auto;
margin-top: 200px;
}



.a_1 img{
margin-top: 200px;
}


.a_1 p{
top: 350px;
left: 180px;
font-size: 2.2em;
line-height: 2em;
}


.flipLeftTrigger{
position: absolute;
z-index: 99;
}

.f-1{
top: 415px;
left: 180px;
}

.f-2{
    top: 485px;
left: 180px;
}

/* 左へ */
.flipLeft{
animation-name:flipLeftAnime;
-webkit-animation: flipLeftAnime 0.6s;
animation: flipLeftAnime 0.6s;
animation-duration:0.6s;
border-color: #6aa;
-webkit-transform: scaleX(-1) rotate(135deg);
transform: scaleX(-1) rotate(135deg);
-webkit-transform-origin: left top;
transform-origin: left top;
border-right: 5px solid #F55941;
border-top: 5px solid #F55941;
display: block;
height: 30px;
width: 20px;
z-index: 9999!important;

}



@keyframes flipLeftAnime{
0% {
height: 0;
width: 0;
}
50% {
height: 0px;
width: 20px;
}
100% {
height: 30px;
width: 20px;
}
}


.a_2{
position: relative;
width: 100%;
margin-top: 200px;
}

.a_2 img:first-child{
width: 80%;
}

.a_2 img:last-child{
display: inline-block;
position: absolute;
width: 80%;
left:-10px;
}



.a_3{
position: relative;
width: 80%;
margin-top: 200px;
margin-left: auto;
margin-right: 0px;
}




.a_3 img:last-child{
display: inline-block;
position: absolute;
width: 95%;
top: 30px;
left:30px;
}


.a_4{
position: relative;
width: 80%;
margin: 0 auto;
margin-top: 200px;
}




.a_4 img:last-child{
display: inline-block;
position: absolute;
width: 90%;
top: 57%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}


.a_5{
margin-top: 200px;
}

.a_5 img{
display: block;
width: 60%;
margin: 0 auto;
}


.a_6 {
display: flex;
width: 900px;
margin: 0 auto;
margin-top: 200px;
}

.a_6 div:nth-child(2){
display: block;
padding-left: 3em;
}

.a_6 p{
font-size: 1.4em;
padding-top: 7em;
}

.a_6 a{
width: 100px;
text-decoration: none;
color:  #06233E;
border-radius: 5px;
box-shadow: 0.5px 1px 3px #B1BFC8;
font-size: 0.8em;
padding: 6px 10px;
margin-left: 80%;
}

.a_6 a:hover{
color: #06233E;
box-shadow: 0.5px 1px 3px #82A7B6 inset;
background-color: #fff;
opacity: 0.8;
}


.a_7 img{
display: block;
margin: 0 auto;
text-align: center;
padding: 50px;
box-shadow: 0.5px 1px 3px #B1BFC8;
border-radius: 30px;
}


.a_7{
position: relative;
margin-top: 200px;

}



.a_7 h2{
font-size: 2.5em;
display: block;
width: 80%;
margin: 0 auto;
margin-top: 5em;
margin-bottom: 1em;
text-align: left;
border-bottom: solid 2px #000;
}

.a_7 a{

display: block;
width: 80%;
margin: 0 auto;
text-decoration: none;
}

.a_7 p{
font-size: 1.5em;
margin-top: 1em;
text-align: center;

color: #000;
}

.a_7 a:hover{
text-decoration: underline!important;
color: #000;

}


.a_7 img:hover{
color: #06233E;
box-shadow: 0.5px 1px 3px #82A7B6 inset;
background-color: #fff;
opacity: 0.8;
}

/*.a_7 img:hover{
color: #06233E;
box-shadow: 0.5px 1px 3px #82A7B6 inset;
background-color: #fff;
opacity: 0.7;
}*/

.f-3{	
top: 270px;	
left: 120px;
}

.f-4{
	top: 890px;	
	left: 120px;
	
}

.f-5{
	top: 1480px;	
	left: 120px;
	
}

.a_8 p{	color:  #06233E;
border-radius: 5px;
box-shadow: 0.5px 1px 3px #B1BFC8;
padding: 15px 10px;
display: block;
width: 200px;
margin: 0 auto;
text-align: center;
margin-top: 2em;

}

.a_8{
margin-top: 200px;
padding-bottom: 100px;
}

.a_8 a{
text-decoration: none;
}

.a_8 p:hover{
color: #06233E;
box-shadow: 0.5px 1px 3px #82A7B6 inset;
background-color: #fff;
opacity: 0.8;
}