/* ############################## * Created on : 2022/11/03 * @version 1.00 * @copyright Heaven-studio.com * @author Myazou3(Toshiyasu.Tkamoto) ############################## */ /* ############################## 初期化 ############################## */ /*### Basic CSS ###*/ @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); body { margin: 0; padding: 0; display: block; width: 100%; height: 100%; font-family: 'Roboto', sans-serif; font-weight: 400; z-index: 0; color: #000; position: absolute;} * { margin: 0; padding: 0; } a { color: #000; text-decoration: none; } img { border-style: none; } .red { color: #f00; } .red_b { color: #f00; font-weight: bold; } .blue { color: #00F; } .blue_b { color: #00F; font-weight: bold; } #no_js { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 5000; } #no_js div { position: fixed; width: 320px; padding: 15px 0; top:50%; left: 50%; transform: translate(-50%,-60%); font-size: 14px; line-height: 22px; text-align: center; color: #f00; background: #fff; border-radius: 10px; } .hide { display: none !important; } .df_color { background: linear-gradient(180deg, rgba(189, 108, 255, 1) 0%, rgba(254, 159, 255, 1) 50%, rgba(189, 108, 255, 1) 100%); } /*### Main ###*/ main { width: 100%; height: 100%; max-height: 100vh; margin: 0; padding: 0; display: block; position: relative; overflow: hidden; } #gate_login_wrap { position: absolute; width: 300px; height: 200px; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); border: 1px #fff solid; box-sizing: border-box; border-radius: 5px; text-align: center; } #gate_login_wrap h1 { font-size: 22px; line-height: 30px; color: #fff; } #gate_login_wrap input { width: 80%; margin: 10px auto 5px; background: rgba(0,0,0,0.3); border: none; outline: none; padding: 10px; font-size: 14px; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.3); border: 1px solid rgba(0,0,0,0.3); border-radius: 4px; box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2); -webkit-transition: box-shadow .5s ease; -moz-transition: box-shadow .5s ease; -o-transition: box-shadow .5s ease; -ms-transition: box-shadow .5s ease; transition: box-shadow .5s ease;} #gate_login_wrap input:focus { box-shadow: inset 0 -5px 45px rgba(100,100,100,0.4), 0 1px 1px rgba(255,255,255,0.2); } /* checkbox */ #gate_login_wrap input[type="checkbox"] { display: none; } #gate_login_wrap .checkbox_label { box-sizing: border-box; cursor: pointer; display: block; padding: 5px 5px 5px 25px; position: relative; width: 150px; margin: 5px auto; font-size: 14px; line-height: 20px; } #gate_login_wrap .checkbox_label::before { background: rgba(255,255,255,0.2); border: 1px solid #231815; content: ''; display: block; height: 16px; left: 5px; margin-top: -10px; position: absolute; top: 50%; width: 16px; } #gate_login_wrap .checkbox_label::after { border-right: 3px solid #9400d3; border-bottom: 3px solid #9400d3; content: ''; display: block; height: 10px; left: 9px; margin-top: -10px; opacity: 0; position: absolute; top: 50%; transform: rotate(45deg); width: 8px; } #gate_login_wrap input[type="checkbox"]:checked + .checkbox_label::after { opacity: 1; } /* Log In btn */ #gate_way_open { display: block; width: 130px; height: 36px; font-size: 16px; color: #333; line-height: 34px; background: rgba(105, 234, 203, 1); border: 1px #FFF solid; border-radius: 5px; box-sizing: border-box; text-align: center; margin: 5px auto; cursor: pointer; } #gate_way_open:hover, #gate_way_open:active { background: rgba(102, 84, 241, 1); color: #fff; } /*### Back Ground ###*/ #back_ground { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; display: block; } /*### Dialog ###*/ #dialog_mess_back { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,.8); z-index: 9999; } #dialog_mess { width: 320px; padding: 20px 0; display: block; background: #fff; border: 3px #ccccff solid; border-radius: 5px; font-size: 14px; box-sizing: border-box; text-align: center; position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%); } /*### Concting ###*/ #conecting_load_animation { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,.5); z-index: 10000; } #conecting_load_svg_box { width: 80px; height: 80px; position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%); } /* ### フレキシブル ### */ @media (max-width: 319px) { #select_contents { width: calc(18.75rem + ((1vw - 3.2px) * 90.9091)); } } @media (min-width: 320px) and (max-width: 779px) { #global-nav { position: absolute; top: -500px; right: 0; width: 100%; text-align: center; clear: both; float: none; margin: 0; padding: 0; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; transition: .5s ease-in-out; margin-right: 0; } #global-nav ul { list-style: none; display: block; position: relative; right: 0; bottom: 0; font-size: 14px; background: #459dd7; width: 100%; margin: 0; padding-bottom: 10px; } #global-nav ul li { float: none; display: block; position: relative; margin: 0; height: 40px; border: none; border-top: 1px #fff solid;} #global-nav ul li:last-child { border-bottom: 1px #fff solid; } #global-nav ul li a { width: 100%; display: block; line-height: 40px;} #nav-toggle { display: block; } #login_data_area { font-size: calc(10px + 2 * (100vw - 320px)/760); right: 70px; width: 70%; } #login_data_area div { line-height: calc(14px + 6 * (100vw - 320px)/760); } #login_open { font-size: calc(12px + 2 * (100vw - 320px)/760); } #login_open svg { width: calc(12px + 2 * (100vw - 320px)/760); } /* #nav-toggle 切り替えアニメーション */ .open #nav-toggle span:nth-child(1) { top: 11px; -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); transform: rotate(315deg); } .open #nav-toggle span:nth-child(2) { width: 0; left: 50%; } .open #nav-toggle span:nth-child(3) { top: 11px; -webkit-transform: rotate(-315deg); -moz-transform: rotate(-315deg); transform: rotate(-315deg); } /* #global-nav スライドアニメーション */ .open #global-nav { -moz-transform: translateY(calc(540px + 40 * (100vw - 320px)/760)); -webkit-transform: translateY(calc(540px + 40 * (100vw - 320px)/760)); transform: translateY(calc(540px + 40 * (100vw - 320px)/760)); } } @media (min-width: 780px) and (max-width: 1279px) { } @media (min-width: 1280px) { #top_mes_area h1 { font-size: 16px; line-height: 80px; } #select_contents { width: 1080px; } main { padding-top: 125px; } .main_title { font-size: 18px; line-height: 34px; font-weight: bold; color: #459dd7; } .date_info { font-size: 14px; line-height: 26px; } .sub_title { font-size: 16px; line-height: 30px; font-weight: bold; color: #459dd7; } .sub_sbu_title { font-size: 15px; line-height: 28px; } .main_text { font-size: 14px; line-height: 26px; } }