@charset "UTF-8";

body{
    background-image: url("../images/keikoku.jpeg");
    background-size: contain;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;

    font-family: 'Noto Serif', serif;
}
main{
    margin-left: 20%;
    margin-right: 20%;
    background-color:#C0C0C05f;
    border-radius: 20px;
}
select{
    height: 30px;
    width: 50px;
    font-size: 17px;
    margin-top: 10px;
}
select option {
    width: 40px;
    font-size: 17px;

}
input {
    margin-top: 10px;
    width: 150px;
    height: 25px;
}
header {
    color: aqua;
    text-align: center;
}
table{
    border-collapse: collapse;
}
th, td{
    width: 200px;
    height: 30px;
    border: 3px solid black;
    padding: 8px;
}
label{
    margin-top: 20px;
}

.fortune {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    margin: 0px 15px;
    font-size: 20px;
    color : white;

}
#hol {
    display: flex;
    padding: 10px;
}
#sign{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 50px;

    color : white;
    font-size: 20px;
    font-weight: bold;
}
#personal{
    border-collapse: separate;
}
#name{
    font-size: 30px;
}
#txt   {
    margin: 0 30px 20px 30px;
}
.btn{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
	overflow: hidden;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
   	border: 1px solid #04273b;/* ボーダーの色と太さ */
    padding: 10px 30px;
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
}
.btn span {
	position: relative;
    font-size: 17px;
    font-weight: bold;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color:#333;
}
.btn:hover span{
	color:#d9ff00;
}
.b_change{
    background-color: rgba(135, 206, 250, 0.5);
    border-radius: 10px;
}
.b_change::before{
	content: '';
	position: absolute;
	top: 0;
	left: -150%;
	background: rgb(30, 214, 214);
	width:120%;
	height: 100%;
	transform: skewX(-25deg);
}
.b_change:hover::before {
	animation: sha .5s forwards;/*アニメーションの名前と速度を定義*/
}

.instates {
    width: 200px;
}
.mark {
    width: 20%;

    vertical-align: middle;
}
.about_fee{
    display: flex;
    text-align: center;
    align-items:center;
    height:100px;
    width:420px;
}
.money{
    font-size: 50px;
    font-weight: bold;
    color: rgb(255, 230, 0);
}
.foot_fee{
    display: flex;
    text-align: center;
    align-items: center;
}
.up1{
    font-size: 300%;
}
.ty{
    color: black;
    font-size: 400%;
}
.link{
    text-decoration: none;
    color: aqua;
}
.link:hover, .link2:hover{
    color: red;
}
.link2{
    font-size: 40px;
    text-decoration: none;
    color: aqua;
}
.afili1{
    width: 10%;
    position: absolute;
    top: 100px;
    left: 80px;
}
.afili2{
    width: 10%;
    position: absolute;
    top: 100px;
    right: 80px;
}
#loading {
    width: 100vw;
    height: 100vh;
    transition: all 1s;
    background-color: #0bd;
  }
.spinner {
    width: 100px;
    height: 100px;
    margin: 200px auto;
    background-color: #fff;
    border-radius: 100%;
    animation: sk-scaleout 1.0s infinite ease-in-out;
}
.loaded {
    opacity: 0;
    visibility: hidden;
  }


@media (max-width: 1300px){
 .afili1{
    display: none;
 }
 .afili2{
    display: none;
 }
}
@keyframes sha {
    100% {
		left: -10%;
	}
}