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



body{
min-width: 1200px;
letter-spacing : 0.1em;
background-color:#fff;
font-family: 'Sawarabi Gothic', sans-serif;
margin: 0;
padding: 0;
}

.container {
background: linear-gradient(-135deg, #6694a0,#62a7a4, #9fd2be,#a8c77d)!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;
	background-color: #f7f7f7;
}

/*.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:#602b35;
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:#f7f7f7;
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: 130px;
font-size: 2.2em;
line-height: 2em;
}


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

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

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

/* 左へ */
.flipLeft{
animation-name:flipLeftAnime;
-webkit-animation: flipLeftAnime 0.6s;
animation: flipLeftAnime 0.6s;
animation-duration:0.7s;
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;
}
}



.to-to{
	display: block;
padding: 100px 0;
}

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

.a_2 img:first-child{
	padding-bottom: 50px;
}

.a_2 a{
	position: absolute;
	bottom:24px;
	left: 194px;
	background-color: #fff;;
	padding: 1px;
	color: #000;
}

.a_2 a:hover{
	color: #ccc;
}


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







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




.a_5{
position: relative;
width: 90%;
margin: 0 auto;
}

.aa2_5{
	position: relative;
	display: block;
	width: 90%;
	margin: 0 auto;
	height:  500px;
}



.a2_5{
display: block;
width: 60%;
margin-left: 120px;
	margin-bottom: 100px;
}


.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: 1565px;	
	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;
}



@media (max-width: 1200px){
	
	#header{
		width: 1200px;
		margin: 0 auto;
		display: block;
	}

.back{
	display: block;
	position:relative;
text-align: center;
width: 1200px;
margin: 0 auto;
z-index: -10;
}
	

}

@media (max-width: 767px){
	
	#mobile_header{
		display: none;
	}
	
	

.sidebar__item--fixed {
	display: inline;
position: sticky;
margin-bottom: 0;
top: 0px;
z-index: 10;
}

.container {
padding: 0px 10px;
background-color: #fff;
z-index: 10;
box-shadow: 0.5px 1px 3px #B1BFC8;
}

.box1{
display: block;
margin: 0px auto;
padding: 20px 0;
text-align: center;
}


.box2 {
display: flex;
justify-content:space-between;
margin: 0 auto;
padding: 0px;
width: 90%
}



.box3 {
position: absolute;
left: 85%;
top: 0px;
}

.box3 li{
list-style: none;
white-space: nowrap;
padding-left: 10px;
border-left: solid 2px #ccc;
}

.box3 ul{
padding: 0;
}

.box3 a{
color: #000;
text-decoration: none;
font-size: 0.8em;
}

footer{
height: auto;
margin: 0;
padding: 0;
margin-top: 100px;

}

.foot_icon{
padding-top: 50px;
text-align: center;
/*border-bottom: solid 1px #000;*/
}

.foot_icon img{
padding: 10px;
}

footer>div{
max-width: 1100px;
margin: 0 auto;
}

footer>div>div{
margin: 50px auto;
}

footer>div>div>img{
margin:100px 30px 0px 0px;
}



footer table td {
font-size:  0.8em;
padding: 5px 40px 5px 0px;
text-align: left;
border: none!important;
}
}