/*要素*/ body { /*行間の設定*/ line-height: 1.6; /*文字配置の設定*/ text-align: center; /*背景の設定*/ background: linear-gradient(90deg, #375623 0%, #375623 50%, white 50%, white 100%); /*はみ出し部分の設定*/ overflow: hidden; } .box { /*上位置の設定*/ top: 0; /*左位置の設定*/ left: 0; /*横幅の設定*/ width: 50%; /*縦幅の設定*/ height: 100%; /*要素配置の設定*/ float: left; /*座標指定の設定*/ position: relative; } .left { display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .input { background: white; width: 400px; height: 330px; padding: 25px; text-align: center; border: 1px solid #cccccc; border-radius: 10px; margin: 50px auto; } .logo { font-style: italic; font-size:45px; color: white; font-family: serif; // transform: rotate(-8deg); animation: blink 1s ease-in-out infinite alternate; } /*点滅*/ @keyframes blink { 0%{opacity:0;} 100%{opacity:1;} } /**/ select,input[type = "password"],input[type = "text"],.Auth { width: 400px; height: 50px; } input[type = "password"],input[type = "text"],select { border-radius: 4px; border: 1px solid lightgray; font-size:15px; padding: 10px; } input[type = "password"]:focus,input[type = "text"]:focus,select:focus { border-color: blue; box-shadow: 0px 0px 5px -1px rgba(0,0,255,1.0); outline: none; } .user,.pass { margin: 10px auto; } .user div,.pass div { font-size: 14px; color: dimgray; text-align: left; transform: translateY(-5px); } .input .check { transform: translate(0px,50px); text-align:left; font-size: 14px; color: black; } /*ログインボタン*/ .Auth { padding: 0.25em 0.5em; text-decoration: none; color: #FFF; /*背景色の設定*/ /*background: mediumblue;*/ background: #006600; /*枠線(内側)の設定*/ /*border: solid 1px #0f9ada;*/ border: solid 1px #009900; border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); font-size: 17px; text-shadow: 0 1px 0 rgba(0,0,0,0.2); margin: 5px auto; outline: none; } .Auth:active { /*box-shadow: 1px 1px 2px darkblue inset;*/ box-shadow: 1px 1px 2px darkgreen inset; } /* .f_link { font-size: 14px; transform:translate(0px,70px); text-align:left; } .f_link a { text-decoration:none; //下線を削除 } */ .box2 { // background: darkseagreen; top:0; left:0; width:50%; height:100%; float: right; position: relative; } .right { display:inline-block; // background: gray; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .right .test { background: white; /* width: 400px; height: 400px; */ width: 400.5px; height: 261px; padding: 20px; text-align: center; /* border: 1px solid #cccccc; border-radius: 5px; */ margin: 50px auto; } .flower { width: 400.5px; height: 261px; display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }