// Scss Document
html {
   /*font-size: 62.5%;*/
   /* 16px * 62.5% = 10px */
  box-sizing: border-box;
}


body {
  background-color: #F7F7F7;
  text-align: center;
  color: #0C36A7; 
}
.br{
	display: none;
}
.section-1{
		max-width: 1280px;
		width: 100%;
	    margin: 0 auto;
			header{
				max-width: 880px;
				margin: 0 auto;
    			padding-top: 100px;
				text-align: right;
				border-bottom: 1.8px solid;
				padding-bottom: 50px;
				margin-bottom: 50px;
				a{
				  text-align: right;
					img{
						width: 42px;
				}
			}
				h1{
					text-align: center;
    				margin-top: -40px;
					font-size: 28px;
			}
		}
	}
.section-1 nav{
	div{
		display: none;
	}
	ul{
		
		li{
			text-align: left;
			margin-bottom: 30px;
    		font-size: 26px;
			font-weight: 900;
			a{
				  text-orientation: sideways;
			      color: #0C36A7;
				  letter-spacing: 2px;
			}
		}
	}
	a{
		img{
			display: none;
		}
	}
}
.top-view {
    display: flex;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 100px;
}

.section-3{
	background-color: #0C36A7;
	margin-top: 200px;
	p{
		    text-align: right;
		    padding: 10px;
		a{
			    color: #ffffff;
    			text-decoration: none;
			    font-size: 24px;
		}
	}
	footer{
		max-width: 880px;
		margin: 0 auto;
		color: #ffffff;
		padding: 30px 0 10px;
		div{
		    display: flex;
			justify-content: space-between;
			padding-bottom: 36px;
				nav{
					text-align: left;
					text-decoration: none;
					ul{
						li{
							margin-bottom: 10px;
							a{
								color: #ffffff;
								font-size: 20px;
							}
						}
					}
				}
				div{
					text-align: right;
					a{
						padding-left: 10px;
							img{
								width: 40px;
						}
					}
				}
			}
		small{
			font-size: 14px;
			margin: 10px 0;
		}
	}
}

@media (max-width:930px) {
	.br{
		display: block;
	}
	.section-1 header{
			padding-top: 0px;
		a{
			img{
				display: none;
			}
		}
	}
	.open-button {
    display: block;
    position: absolute;
    right: 30px;
    top: 50px;
	padding-right: 30px;
    
	}
	.open-button span, .open-button span:before, .open-button span:after {
    position: absolute;
    height: 3px;
    width: 30px;
    border-radius: 3px;
    background-color: #0C36A7;;
    display: block;
    content: "";
  }
  .open-button span:before {
    bottom: -10px;
  }
  .open-button span:after {
    bottom: -20px;
  }
  .top-view nav{
		z-index: 1000;
		position: fixed;
		top: 0;
		right: 0;
		background-color: #D66080;
		width: 60%;
		height: 100%;
		padding: 50px 30px 0 50px;
		display: none;
	div{
			display: block;
			color: #EFDDD1;
			font-size: 2.6rem;
		    text-align: right;
		    font-weight: 100;
	}
	ul{
		
		li{
			font-size: 1.6rem;
			font-weight: bold;
			margin-bottom: 1.8rem;
			a{
				writing-mode: unset;
				color: #EFDDD1;
			}
		}
	}
	span{
	    display: flex;
		width: 80px;
		a{

			img{
				display: block;
				margin-top: 5rem;
				margin-right: 10px;
				width: 40px;
			}
		}
	}
}
	.section-3{
		margin-top: 150px;
		p{
			a{
				font-size: 16px;
			}
		}
	footer{
		    padding: 70px 0 20px;
		div{
			margin: 0 auto;
			padding: 0;
			nav{
				display: none;
				ul{
					li{
						a{
							
						}
					}
				}
			}
			div{
				a{
					img{
						width: 30px;
						margin-bottom: 10px;
					}
				}
			}
			
		}
		small{
			    font-size: 12px;
				font-weight: 100;
		}
		
	}
		
    }

	
	
}

//ローディング//
/* Loading背景画面設定　*/
#splash {
/*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background:#D66080;
  text-align:center;
  color:#fff;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width:300px;
}

/* fadeUpをするアイコンの動き */
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:3s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
  opacity: 0;
  transform: translateY(50px);
  }

  to {
  opacity: 1;
  transform: translateY(0);
  }
}
//ローディング終わり//

//fadein ふわっと　開始//
/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

//fadein ふわっと　終了//