@charset "UTF-8";

.dfs-btn-type-01 {display: inline-block; border: 1px solid #dadada; border-radius: 4px; padding: 4px 20px; cursor: pointer; transition: background .2s;}
.dfs-btn-type-01:hover {background: #f0f0f0;}
.dfs-btn-type-01:active {background: #e0e0e0;}

.dfs-btn-type-01.selected {background: #12ac00; color: white;}
.dfs-btn-type-01.selected:hover {background: #1fb50d;}
.dfs-btn-type-01.selected:active {background: #33c521;}

.dfs-btn-type-02 {display: inline-block; border: 1px solid #dadada; background: #12ac00; color: white; border-radius: 4px; padding: 4px 20px; cursor: pointer; transition: background .2s;}
.dfs-btn-type-02:hover {background: #1fb50d;}
.dfs-btn-type-02:active {background: #33c521;}

.dfs-btn-type-01.shape-01,
.dfs-btn-type-02.shape-01 {width: 100%; box-sizing: border-box; text-align: center; padding: .5rem 4px;}

.dfs-hover-type01 {cursor: pointer; transition: background .2s;}
.dfs-hover-type01:hover {background: #f0f0f0;}
.dfs-hover-type01:active {background: #e0e0e0;}

.dfs-hover-type01.selected {background: #12ac00; color: white;}
.dfs-hover-type01.selected:hover {background: #1fb50d;}
.dfs-hover-type01.selected:active {background: #33c521;}

.dfs-hover-type02 {cursor: pointer; transition: background .2s;}
.dfs-hover-type02:hover {background: rgba(0,0,0,.05);}
.dfs-hover-type02:active {background: rgba(0,0,0,.1);}

.dfs-input-type-01 {width: 100%; border: 1px solid #dadada; border-radius: 4px; padding: 10px; outline: none; transition: background .2s;}

.dfs-login-popup {position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 10000; display: none;}
.dfs-login-popup.on {display: flex; justify-content: center; align-items: center;}
.dfs-login-popup::after {position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; background: black; opacity: 0; transition: opacity .2s; content:'';}
.dfs-login-popup.on::after {opacity: .3;}
.dfs-login-popup>.content {background: white; width: 100%; max-width: 480px; max-height: 90vh; min-height: 10vh; padding: 20px;}
.dfs-login-popup .dfs-close {padding: 10px; line-height: 0; display: inline-block;}