/*
@font-face {
font-family: 'LSFont';
src: url(./LINESeedJP_OTF_Rg.woff) format("woff");
}
*/
:root {
--border-radius: 0px;
--border-radius: 4px;
--base-bgcolor: #ffffff;
--base-border: 1px solid #cccccc;
--base-text-color: #333333;
--main-color: #3399cc;
}
a {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
}
*:not {
-webkit-user-select: none;
}
selector {
height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
/*
font-family: "LSFont",-apple-system,BlinkMacSystemFont,Hiragino Kaku Gothic ProN,Hiragino Sans,Yu Gothic Medium,Yu Gothic,sans-serif;
*/
font-family: "BIZ UDPGothic",-apple-system,BlinkMacSystemFont,Hiragino Kaku Gothic ProN,Hiragino Sans,Yu Gothic Medium,Yu Gothic, sans-serif;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-webkit-text-size-adjust: none;
box-sizing: border-box;
font-size: 1.0rem;
scroll-behavior: smooth;
}
html {
width: 100%;
height: 100%;
position: relative;
scroll-behavior: smooth;
overflow: hidden;
padding-bottom: env(safe-area-inset-bottom);
}
body {
width: 100%;
height: 100%;
position: relative;
background: #ffffff;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
button {
outline: none;
border: 1px solid #cccccc;
border-radius: var(--border-radius);
transition: 0.1s linear;
font-size: large;
cursor: pointer;
color: #333333;
}
button:hover {
opacity: 0.7;
}
button:active {
transform: scale(0.99);
}
.noanime * {
animation: none !important;
transition: none !important;
}
.noanime *::before {
animation: none !important;
transition: none !important;
}
.noanime *::after {
animation: none !important;
transition: none !important;
}
/* blue */
.blue_base {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.blue_main {
width: 100%;
height: 100%;
position: absolute;
z-index: 100;
display: grid;
grid-template-rows: 100px 1fr 100px;
}
.blue_main_header {
width: 100%;
height: 100%;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
z-index: 120;
display: flex;
}
.blue_main_header_logo {
width: 100%;
height: 100%;
padding: 10px 20px;
width: 70%;
}
.blue_main_header_logo_inner {
width: 100%;
height: 100%;
background-image: url(./bluestep_web.png);
background-repeat: no-repeat;
background-size: contain;
}
.blue_main_header_actions {
width: 100%;
height: 100%;
align-items: center;
justify-items: right;
padding: 10px;
overflow: hidden;
}
.blue_main_contents {
width: 100%;
height: 100%;
overflow: auto;
z-index: 110;
padding: 0 0 1.5em 0;
}
.blue_main_footer {
width: 100%;
height: 100%;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
z-index: 120;
position: relative;
box-shadow: 0px -8px 10px rgba(0, 0, 0, 0.1);
}
.blue_main_footer_contents {
width: 100%;
height: 100%;
padding: 0px 100px;
position: relative;
}
.blue_main_footer_contents_inner {
width: 100%;
height: 100%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.blue_action {
width: 80px;
height: 80px;
border-radius: 50%;
margin: 0 10px;
border: none;
overflow: hidden;
background: transparent none;
float: right;
position: relative;
}
.blue_action.login {
width: 140px;
height: 60px;
margin: 10px;
border-radius: 40px;
background: linear-gradient(45deg, #10a0e0, #1630f0);
color: #ffffff;
}
/*
*/
.blue_action.threeline {
background: transparent url('data:image/svg+xml;charset=UTF-8,') no-repeat center center !important;
}
.blue_action.settings {
background: transparent url('data:image/svg+xml;charset=UTF-8,') no-repeat center center !important;
}
.blue_action.options {
background: transparent url('data:image/svg+xml;charset=UTF-8,') no-repeat center center !important;
}
.blue_action.home {
background: transparent url('data:image/svg+xml;charset=UTF-8,') no-repeat center center !important;
}
.blue_action.apps_main {
background: transparent url('data:image/svg+xml;charset=UTF-8,') no-repeat center center !important;
}
.blue_action.notification {
background: transparent url('data:image/svg+xml;charset=UTF-8,') no-repeat center center !important;
}
.blue_action.reload {
background: transparent url('data:image/svg+xml;charset=UTF-8,') no-repeat center center !important;
}
.blue_action.cross {
background: transparent url('data:image/svg+xml;charset=UTF-8,') no-repeat center center !important;
}
.blue_action.add {
background: transparent url('data:image/svg+xml;charset=UTF-8,') no-repeat center center !important;
}
.blue_action.edit {
background: transparent url('data:image/svg+xml;charset=UTF-8,') no-repeat center center !important;
}
.blue_action.bell {
background: transparent url('data:image/svg+xml;charset=UTF-8,') no-repeat center center !important;
}
.blue_action.search {
background: transparent url('data:image/svg+xml;charset=UTF-8,') no-repeat center center !important;
}
.blue_action.more {
background: transparent url('data:image/svg+xml;charset=UTF-8,') no-repeat center center !important;
}
.blue_action.more_double {
background: transparent url('data:image/svg+xml;charset=UTF-8,') no-repeat center center !important;
}
.blue_action.auto_reload {
background: transparent url('data:image/svg+xml;charset=UTF-8,') no-repeat center center !important;
}
.blue_action.options:active {
transform: scale(1);
}
.blue_action.options:hover {
overflow: visible;
border-radius: 0;
opacity: 1;
}
.blue_action.options ul {
width: 200px;
display: block;
position: absolute;
top: 90%;
right: 0;
list-style: none;
opacity: 0;
border-radius: var(--border-radius);
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
background-color: var(--base-bgcolor);
border: var(--base-border);
}
.blue_action.options ul li {
height: 80px;
display: grid;
align-items: center;
position: relative;
border-bottom: var(--base-border);
}
.blue_action.options ul li:last-child {
border-bottom: none;
}
.blue_action.options:hover ul:first-child {
opacity: 1;
}
.blue_action.options ul li a {
height: 100%;
position: relative;
display: grid;
align-items: center;
justify-items: left;
padding: 0 10px;
}
.blue_action.options ul li a ul {
position: absolute;
top: 0;
right: 100%;
display: block;
display: none;
border-radius: var(--border-radius);
transform: translate(0, -1px);
}
.blue_action.options ul li a:hover ul {
display: block;
}
.blue_action.options ul li a ul li {
display: grid;
align-items: center;
justify-items: left;
}
.blue_action.options ul li a ul li {
display: grid;
align-items: center;
justify-items: left;
padding: 0 10px;
}
.blue_action svg {
margin: 8px 0 0 0;
}
.blue_action_main {
width: 90px;
height: 90px;
background: linear-gradient(45deg, #10a0e0, #1630f0);
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
display: grid;
align-items: center;
justify-items: center;
transition: 0.2s ease-in-out;
position: relative;
}
.button_inner {
width: 70px;
height: 70px;
border-radius: 50%;
background: #f0f0f0 none;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
display: grid;
align-items: center;
justify-items: center;
font-size: 50px;
line-height: 50px;
font-weight: 600;
position: relative;
}
.txt01 {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: -webkit-linear-gradient(45deg, #10a0e0, #1630f0);
color: #ffffff;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* toast */
.toast {
width: 580px;
height: 170px;
padding: 20px;
z-index: 820;
position: absolute;
left: -700px;
bottom: 110px;
color: #ffffff;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
}
.toast.active {
left: 0px;
}
.toast::before {
content: '';
width: 680px;
height: 170px;
background: #ffffff none;
background: linear-gradient(45deg, #10a0e0, #1630f0);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
z-index: -1;
position: absolute;
left: -120px;
bottom: 0px;
transform: skewX(45deg);
}
.toast_title {
width: 470px;
height: auto;
font-size: larger;
padding: 0 0 10px 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-weight: bold;
padding: 10px 0 20px 0;
}
.toast_contents {
width: 490px;
height: 100px;
font-size: larger;
padding: 0;
text-overflow: ellipsis;
overflow: hidden;
line-height: 32px;
}
/* popup */
.popup_base {
width: 100%;
height: 100%;
background: transparent none;
position: absolute;
top: 0;
left: 0;
z-index: 1000;
pointer-events: none;
opacity: 1;
transition-duration: 2s;
}
.popup_base.active {
transition-duration: 0s;
pointer-events: auto;
}
.popup_bg_base {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
z-index: 1100;
transition-delay: 0.4s;
transition-duration: 0.2s;
}
.popup_base.active .popup_bg_base {
transition-delay: 0s;
transition-duration: 0.2s;
opacity: 1;
}
.popup_contents_base {
position: absolute;
width: 600px;
height: 0px;
margin: 0;
padding: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: transparent none;
z-index: 1200;
overflow: hidden;
transition-duration: 0.3s;
pointer-events: none;
}
.popup_base.active .popup_contents_base {
height: 600px;
transition-delay: 0.3s;
overflow: visible;
pointer-events: auto;
}
.popup_contents_base .module {
display: grid;
margin: 0;
width: 100%;
height: 100%;
grid-template-rows: 80px 1fr 80px;
transition-delay: 0.3s;
opacity: 0;
}
.popup_base.active .popup_contents_base .module {
transition-delay: 0.4s;
opacity: 1;
}
@media screen and (max-width: 800px) {
.popup_contents_base {
width: 100%;
padding: 0 1em;
}
.popup_contents_base .module {
grid-template-rows: 80px 1fr 100px;
}
}
/* sheet */
.sheet_base {
width: 100%;
height: 100%;
background: transparent none;
position: absolute;
top: 0;
left: 0;
z-index: 1000;
pointer-events: none;
opacity: 1;
overflow: hidden;
}
.sheet_base.active {
transition-duration: 0s;
pointer-events: auto;
}
.sheet_bg_base {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
z-index: 1250;
transition-delay: 0.4s;
transition-duration: 0.2s;
}
.sheet_base.active .sheet_bg_base {
transition-delay: 0.2s;
transition-duration: 0.2s;
opacity: 1;
}
.sheet_contents_base {
position: absolute;
width: 100%;
height: 95%;
margin: 0;
padding: 0;
bottom: -100%;
background: transparent none;
z-index: 1280;
overflow: hidden;
transition-duration: 0.5s;
pointer-events: none;
}
.sheet_base.active .sheet_contents_base {
bottom: 0%;
transition-delay: 0.1s;
overflow: visible;
pointer-events: auto;
}
.sheet_contents_base .module {
display: grid;
margin: 0;
width: 100%;
height: 100%;
grid-template-rows: 80px 1fr 80px;
/*
*/
transition-duration: 0.3s;
transition-delay: 0.2s;
opacity: 0;
}
.sheet_base.active .sheet_contents_base .module {
/*
*/
transition-delay: 0.1s;
opacity: 1;
}
@media screen and (max-width: 800px) {
.sheet_contents_base {
width: 100%;
}
.sheet_contents_base .module {
grid-template-rows: 80px 1fr 100px;
}
}
/* sidebar */
.sidebar_base {
width: 100%;
height: 100%;
background: transparent none;
position: absolute;
top: 0;
left: 0;
z-index: 1000;
pointer-events: none;
opacity: 1;
transition-duration: 2s;
overflow: hidden;
}
.sidebar_base.active {
transition-duration: 0s;
pointer-events: auto;
}
.sidebar_bg_base {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
background: transparent none;
opacity: 0;
z-index: 1100;
/*
transition-delay: 0.4s;
*/
transition-duration: 0.1s;
}
.sidebar_base.active .sidebar_bg_base {
transition-delay: 0s;
transition-duration: 0.2s;
opacity: 1;
}
.sidebar_contents_base {
position: absolute;
width: 500px;
height: 100%;
margin: 0;
padding: 0;
right: -500px;
background: transparent none;
z-index: 1200;
overflow: hidden;
transition-duration: 0.3s;
pointer-events: none;
}
.sidebar_base.active .sidebar_contents_base {
right: 0;
/*
transition-delay: 0.3s;
*/
overflow: visible;
pointer-events: auto;
}
.sidebar_contents_base .module {
display: grid;
margin: 0;
width: 100%;
height: 100%;
grid-template-rows: 80px 1fr;
transition-delay: 0.3s;
opacity: 0;
}
.sidebar_base.active .sidebar_contents_base .module {
transition-delay: 0s;
opacity: 1;
}
.sidebar_base .module .contents {
overflow-y: auto;
}
.sidebar_base .contents_inner {
padding: 0 10px;
}
.sidebar_contents_entry {
width: 100%;
height: 120px;
overflow: hidden;
}
.sidebar_contents_entry .sce_base {
width: 100%;
height: 100%;
border-bottom: var(--base-border);
display: grid;
grid-template-columns: 120px 1fr;
}
.sce_date {
display: grid;
align-items: center;
}
.sce_category {
display: flex;
align-items: center;
}
.sce_category div {
border-radius: 120px;
background: #444444;
color: #eeeeee;
padding: 0 10px;
line-height: 30px;
}
.sce_title {
grid-column-start: 1;
grid-column-end: none;
}
/* blue_menu */
.blue_menu_base {
width: 100%;
height: 100%;
background: transparent none;
position: absolute;
top: 0;
left: 0;
z-index: 1000;
pointer-events: none;
opacity: 1;
transition-duration: 2s;
overflow: hidden;
}
.blue_menu_base.active {
transition-duration: 0s;
pointer-events: auto;
}
.blue_menu_bg_base {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
background: transparent none;
opacity: 0;
z-index: 1100;
/*
transition-delay: 0.4s;
*/
transition-duration: 0.1s;
}
.blue_menu_base.active .blue_menu_bg_base {
transition-delay: 0s;
transition-duration: 0.2s;
opacity: 1;
}
.blue_menu_contents_base {
position: absolute;
width: 100px;
height: 100px;
margin: 0;
padding: 0;
left: 50%;
bottom: 120px;
background: transparent none;
z-index: 1200;
transition-duration: 0.3s;
pointer-events: none;
transform: translate(-50%, 0);
transition-delay: 0s;
}
.blue_menu_base.active .blue_menu_contents_base {
width: 600px;
/*
*/
transition-delay: 0.5s;
overflow: visible;
pointer-events: auto;
transition-timing-function: ease-in-out;
}
.blue_menu_contents_base .module {
display: grid;
margin: 0;
width: 100%;
height: 100%;
grid-template-rows: 1fr;
transition-delay: 0.8s;
opacity: 0;
transition-duration: 0.5s;
}
.blue_menu_base.active .blue_menu_contents_base .module {
transition-delay: 0.2s;
opacity: 1;
}
.blue_menu_base .contents_inner {
width: 100%;
height: 100%;
padding: 0 10px;
opacity: 0;
transition-duration: 0.5s;
display: grid;
align-items: center;
justify-items: center;
transition-delay: 0s;
transition-duration: 0.1s;
}
.blue_menu_base.active .contents_inner {
transition-delay: 1s;
transition-duration: 0.5s;
opacity: 1;
}
/* picklist */
.picklist_base {
width: 100%;
height: 100%;
background: transparent none;
position: absolute;
top: 0;
left: 0;
z-index: 1000;
pointer-events: none;
opacity: 1;
transition-duration: 2s;
}
.picklist_base.active {
transition-duration: 0s;
pointer-events: auto;
}
.picklist_bg_base {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
z-index: 1100;
transition-delay: 0.4s;
transition-duration: 0.2s;
}
.picklist_base.active .picklist_bg_base {
transition-delay: 0s;
transition-duration: 0.2s;
opacity: 1;
}
.picklist_contents_base {
position: absolute;
width: 600px;
height: 0px;
margin: 0;
padding: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: transparent none;
z-index: 1200;
overflow: hidden;
transition-duration: 0.3s;
pointer-events: none;
}
.picklist_base.active .picklist_contents_base {
height: 600px;
transition-delay: 0.3s;
overflow: visible;
pointer-events: auto;
}
.picklist_contents_base .module {
display: grid;
margin: 0;
width: 100%;
height: 100%;
grid-template-rows: 80px 1fr 80px;
transition-delay: 0.3s;
opacity: 0;
}
.picklist_base.active .picklist_contents_base .module {
transition-delay: 0.4s;
opacity: 1;
}
@media screen and (max-width: 800px) {
.picklist_contents_base {
width: 100%;
padding: 0 1em;
}
.picklist_contents_base .module {
grid-template-rows: 80px 1fr 100px;
}
}
/* confirm */
.confirm_base {
width: 100%;
height: 100%;
background: transparent none;
position: absolute;
top: 0;
left: 0;
z-index: 1000;
pointer-events: none;
opacity: 1;
transition-duration: 2s;
}
.confirm_base.active {
transition-duration: 0s;
pointer-events: auto;
}
.confirm_bg_base {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
z-index: 1100;
transition-delay: 0.4s;
transition-duration: 0.1s;
/*
background: rgba(255, 255, 255, 0.5);
*/
}
.confirm_base.active .confirm_bg_base {
transition-delay: 0s;
transition-duration: 0.2s;
opacity: 1;
}
.confirm_contents_base {
position: absolute;
width: 700px;
height: 0px;
margin: 0;
padding: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: transparent none;
z-index: 1200;
overflow: hidden;
transition-duration: 0.3s;
pointer-events: none;
}
.confirm_base.active .confirm_contents_base {
height: 400px;
transition-delay: 0.3s;
overflow: visible;
pointer-events: auto;
}
.confirm_contents_base .module {
display: grid;
margin: 0;
width: 100%;
height: 100%;
grid-template-rows: 80px 1fr 80px;
transition-delay: 0.3s;
opacity: 0;
}
.confirm_base.active .confirm_contents_base .module {
transition-delay: 0.4s;
opacity: 1;
}
.confirm_base .contents_inner {
padding: 0 10px;
}
@media screen and (max-width: 800px) {
.confirm_contents_base {
width: 100%;
padding: 0 1em;
}
.confirm_contents_base .module {
grid-template-rows: 80px 1fr 100px;
}
}
/* alert */
.alert_base {
width: 100%;
height: 100%;
background: transparent none;
position: absolute;
top: 0;
left: 0;
z-index: 1000;
pointer-events: none;
opacity: 1;
transition-duration: 2s;
}
.alert_base.active {
transition-duration: 0s;
pointer-events: auto;
}
.alert_bg_base {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
z-index: 1100;
transition-delay: 0.4s;
transition-duration: 0.1s;
}
.alert_base.active .alert_bg_base {
transition-delay: 0s;
transition-duration: 0.2s;
opacity: 1;
}
.alert_contents_base {
position: absolute;
width: 700px;
height: 0px;
margin: 0;
padding: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: transparent none;
z-index: 1200;
overflow: hidden;
transition-duration: 0.3s;
pointer-events: none;
}
.alert_base.active .alert_contents_base {
height: 400px;
transition-delay: 0.3s;
overflow: visible;
pointer-events: auto;
}
.alert_contents_base .module {
display: grid;
margin: 0;
width: 100%;
height: 100%;
grid-template-rows: 80px 1fr 80px;
transition-delay: 0.3s;
opacity: 0;
}
.alert_base.active .alert_contents_base .module {
transition-delay: 0.4s;
opacity: 1;
}
.alert_base .contents_inner {
padding: 0 10px;
}
@media screen and (max-width: 800px) {
.alert_contents_base {
width: 100%;
padding: 0 1em;
}
.alert_contents_base .module {
grid-template-rows: 80px 1fr 100px;
}
}
/* cgrid */
/*
.contents_grid {
width: 100%;
position: relative;
display: grid;
grid-template-columns: 25% 50% 25%;
}
.cgrid_1 {
order: 1;
}
.cgrid_2 {
order: 2;
}
.cgrid_3 {
order: 3;
}
.cgrid_2 .module {
margin: 1.5em 0;
}
@media screen and (max-width: 800px) {
.contents_grid {
width: 100%;
grid-template-columns: 1fr;
}
.cgrid_1 {
order: 2;
}
.cgrid_2 {
order: 1;
}
.cgrid_3 {
order: 3;
}
.cgrid_2 .module {
margin: 1.5em 1.5em 0 1.5em;
}
}
*/
/* loader */
.loader_base {
width: 100%;
height: 100%;
position: absolute;
top: 0;
display: grid;
align-items: center;
justify-items: center;
z-index: 1300;
background: transparent none;
opacity: 0;
pointer-events: none;
}
.loader_base::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
background: rgba(0, 0, 0, 0.3);
opacity: 0.9;
border-radius: var(--border-radius);
}
.module.loading .loader_base {
opacity: 1;
pointer-events: auto;
}
.loader {
--uib-size: 80px;
--uib-color: black;
--uib-speed: 1.4s;
--uib-stroke: 5px;
--uib-bg-opacity: .1;
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: var(--uib-stroke);
width: var(--uib-size);
border-radius: calc(var(--uib-stroke) / 2);
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.loader::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: var(--uib-color);
opacity: var(--uib-bg-opacity);
transition: background-color 0.3s ease !important;
}
.loader::after {
content: '';
height: 100%;
width: 100%;
border-radius: calc(var(--uib-stroke) / 2);
animation: zoom var(--uib-speed) ease-in-out infinite !important;
transform: translateX(-100%);
background-color: var(--uib-color);
transition: background-color 0.3s ease !important;
}
@keyframes zoom {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
/* module */
.module {
margin: 1.5em;
border-radius: var(--border-radius);
background: #fff;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 1050;
}
.module:hover {
z-index: 1350;
}
.module:last-child {
margin-bottom: 0;
}
.module .header {
height: auto;
margin: 0 1em 0 1em;
border-bottom: 1px solid #cccccc;
display: flex;
position: relative;
z-index: 200;
}
.module .header .title {
width: 100%;
height: auto;
font-size: larger;
padding: 1em 0 0.8em 0.1em;
display: grid;
align-items: center;
}
.module.schedule .header .title {
padding: 0.5em 0 0.2em 0.1em;
}
.module .header .title .inner {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: large;
}
.module .header .search {
width: 100%;
height: auto;
font-size: larger;
padding: 1em 0 0.8em 0.1em;
display: grid;
align-items: center;
}
.module .header .actions {
padding: 1em 0 0.8em 0.1em;
display: flex;
padding: 1em 0;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
padding: 0;
}
.module.schedule .header .actions {
padding: 0.5em 0 0.2em 0;
}
.module .header .actions .action {
margin-left: 1em;
background: transparent;
}
.module .header .actions .action {
background: transparent;
}
.module .header .actions .action button {
height: 100%;
padding: 1em;
border: none;
background: transparent none;
cursor: pointer;
white-space: nowrap;
}
.module .contents {
width: 100%;
height: auto;
padding: 1em;
position: relative;
overflow: hidden;
z-index: 150;
}
.module .contents .inner {
width: 100%;
height: 100%;
position: relative;
overflow: auto;
}
.module.schedule .contents .inner {
display: grid;
gap: 10px;
}
.module .contents .inner:has(>iframe) {
overflow: hidden;
}
.module .contents iframe {
width: 100%;
height: 100%;
border: none;
}
.module .footer {
height: auto;
margin: 0 1em 0 1em;
border-top: 1px solid #cccccc;
display: flex;
flex-direction: row-reverse;
}
.module .footer .actions {
padding: 1em 0 1em 1em;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
}
.module .footer .actions .action {
margin-left: 1em;
background: transparent;
}
.module .footer .actions .action button {
width: 100px;
height: 100%;
padding: 0.5em 1em 0.4em 1em;
background: #eeeeee none;
cursor: pointer;
}
@media screen and (max-width: 800px) {
.module .footer {
display: grid;
align-items: center;
justify-items: center;
}
.module .footer .actions {
display: inline-flex;
padding: 1em;
}
.module .footer .actions .action {
margin: 0;
padding: 0 1em;
min-width: 260px;
height: 60px;
}
.module .footer .actions .action button {
width: 100%;
}
}
/* carousel */
.carousel .container {
width: 100%;
height: auto;
overflow: hidden;
}
.carousel .container ul {
display: grid;
grid-template-columns: repeat(5, 100%);
scroll-snap-type: x mandatory;
overflow-x: auto;
scroll-behavior: smooth;
-ms-overflow-style: none;
scrollbar-width: none;
margin: 0 0 0 0;
grid-template-columns: repeat(var(--cmax), 100%);
}
.carousel .container ul li {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 150px;
list-style: none;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.carousel .bullets {
}
.carousel .bullets button {
width: 15px;
height: 15px;
margin: 0 10px;
border-radius: 50%;
border: none;
background: #cccccc none;
}
.carousel .bullets button.selected {
background: #3399cc none;
}
/* slide_banner */
/*
.module .contents:has(.slide_banner) {
padding: 0;
}
*/
.slide_banner {
width: 100%;
height: 120px;
position: relative;
overflow: hidden;
/*
mask-image: linear-gradient(
to right,
rgba(0,0,0,0),
rgba(0,0,0,1) 5%,
rgba(0,0,0,1) 95%,
rgba(0,0,0,0)
);
*/
}
.slide_banner_item {
--sb-width: 280px;
--sb-left: -280px;
--sb-time: 15s;
--sb-time: calc(5s * var(--smax));
width: var(--sb-width);
height: 100%;
position: absolute;
left: max(calc(280px * var(--smax)), 100%);
animation-name: slideBanner;
animation-duration: var(--sb-time);
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.slide_banner_item {
padding: 10px;
display: grid;
grid-template-columns: 1fr;
animation-delay: calc(var(--sb-time) / var(--smax) * (var(--smax) - var(--sn) + 1) * -1);
}
.bitem_img {
width: 100%;
height: 100%;
display: grid;
align-items: center;
justify-items: center;
position: relative;
}
.bitem_img img {
width: 100%;
height: 80px;
object-fit: contain;
}
.bitem_img_title {
display: grid;
align-items: center;
justify-items: center;
}
/*
.bitem_1 {
animation-delay: calc(var(--sb-time) / var(--smax) * (var(--smax) - 1) * -1);
}
.bitem_2 {
animation-delay: calc(var(--sb-time) / var(--smax) * (var(--smax) - 1) * -1);
}
.bitem_3 {
animation-delay: calc(var(--sb-time) / var(--smax) * (var(--smax) - 1) * -1);
}
*/
@keyframes slideBanner {
to {
left: var(--sb-left);
}
}
@media screen and (max-width: 800px) {
/*
.slide_banner {
height: auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
justify-items: center;
gap: 10px;
}
.slide_banner_item {
width: auto;
height: 90px;
aspect-ratio: 18/9;
animation: none;
position: relative;
left: auto;
}
*/
.blue_main_footer_contents_inner {
justify-content: space-between;
padding: 0 30px;
}
.module:has(.slide_banner) {
margin: 1.5em 0;
padding: 0;
box-shadow: none;
}
.module:has(.slide_banner) .header {
margin: 0 2.5em;
border: none;
}
.module .contents:has(.slide_banner) {
padding: 0;
}
.slide_banner {
display: grid;
height: auto;
scroll-snap-type: x mandatory;
overflow-x: auto;
scroll-behavior: smooth;
-ms-overflow-style: none;
scrollbar-width: none;
margin: 0 0 0 0;
grid-template-columns: repeat(6, 100%);
grid-template-columns: repeat(var(--smax), 100%);
}
.slide_banner_item {
animation: none;
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 200px;
list-style: none;
scroll-snap-align: start;
scroll-snap-stop: always;
overflow: visible;
padding: 0.5em 1.5em;
left: calc(-2em * var(--sn));
}
.bitem_img {
border-radius: var(--border-radius);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
.bitem_img img {
height: 100px;
}
}
/* slider */
.slider {
width: 100%;
height: 100%;
text-align: center;
position: relative;
}
.slider input[type=radio] {
display: none;
}
.slider label {
cursor: pointer;
text-decoration: none;
}
.slides {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
overflow: visible;
}
.slide_overflow {
width: 100%;
height: 100%;
overflow: hidden;
}
.slides .slide_inner {
transition: margin-left 1s cubic-bezier(0.77, 0, 0.175, 1);
width: 400%;
height: 300px;
}
.slides .slide {
width: 25%;
height: 100%;
float: left;
display: block;
}
.slide1 {
background: rgba(0, 0, 0, 0.2);
}
.slide2 {
background: rgba(0, 0, 0, 0.5);
}
.slide_contents {
padding: 10px;
}
.controls {
width: 100%;
height: 50px;
z-index: 3;
position: absolute;
top: 50%;
left: 50%;
margin: 0;
transform: translate(-50%, -50%);
}
.controls label {
transition: opacity 0.2s ease-out;
display: none;
width: 50px;
height: 50px;
opacity: 0.4;
position: absolute;
margin: -15px 10px 0 10px;
border-radius: 50%;
}
.controls label:hover {
opacity: 1;
}
.bullets {
margin: 100px 0 0;
text-align: center;
margin: 15px 0 0 0;
}
.bullets label {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 100%;
background: #cccccc none;
margin: 0 10px;
transition-duration: 0.7s;
}
.slides .slide_inner {
width: 400%;
height: 300px;
}
.slides .slide {
width: 25%;
}
#slide1:checked ~ .slides .slide_inner {
margin-left: 0;
}
#slide2:checked ~ .slides .slide_inner {
margin-left: -100%;
}
#slide3:checked ~ .slides .slide_inner {
margin-left: -200%;
}
#slide4:checked ~ .slides .slide_inner {
margin-left: -300%;
}
#slide1:checked ~ .controls label:nth-child(2),
#slide2:checked ~ .controls label:nth-child(3),
#slide3:checked ~ .controls label:nth-child(4),
#slide4:checked ~ .controls label:nth-child(1) {
background: #eeeeee url('data:image/svg+xml;charset=UTF-8,') no-repeat 21px center;
display: block;
right: 0;
}
#slide1:checked ~ .controls label:nth-last-child(1),
#slide2:checked ~ .controls label:nth-last-child(4),
#slide3:checked ~ .controls label:nth-last-child(3),
#slide4:checked ~ .controls label:nth-last-child(2) {
background: #eeeeee url('data:image/svg+xml;charset=UTF-8,') no-repeat 17px center;
display: block;
left: 0;
}
#slide1:checked ~ .bullets label:nth-child(1),
#slide2:checked ~ .bullets label:nth-child(2),
#slide3:checked ~ .bullets label:nth-child(3),
#slide4:checked ~ .bullets label:nth-child(4) {
background: #444444 none;
}
/* panel */
.slider_panel {
width: 100%;
height: 100%;
text-align: center;
position: relative;
}
.slider_panel input[type=radio] {
display: none;
}
.slider_panel label {
cursor: pointer;
text-decoration: none;
}
.slide_panels {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
overflow: visible;
margin: 15px 0 0 0;
}
.slide_panel_overflow {
width: 100%;
height: 100%;
overflow: hidden;
}
.slide_panels .slide_panel_inner {
transition: margin-left 1s cubic-bezier(0.77, 0, 0.175, 1);
width: 200%;
height: 300px;
}
.slide_panels .slide_panel {
width: 50%;
height: 100%;
float: left;
display: block;
}
.slide_panel1 {
background: rgba(0, 0, 0, 0.2);
}
.slide_panel2 {
background: rgba(0, 0, 0, 0.5);
}
.slide_panel_contents {
width: 100%;
height: 100%;
padding: 10px;
overflow: auto;
}
.slide_panels .slide_panel_inner {
width: 200%;
height: 300px;
}
.slide_panels .slide_panel_panel {
width: 25%;
}
.bullets.panel {
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
position: relative;
border-bottom: 1px solid #cccccc;
}
.bullets.panel::before {
content: '';
width: 50%;
height: 4px;
position: absolute;
bottom: -2px;
left: 50%;
background: #10a0e0 none;
border-radius: 2px;
transition: left 1s cubic-bezier(0.77, 0, 0.175, 1);
}
.bullets.panel label {
display: grid;
align-items: center;
justify-items: center;
width: 100%;
height: 60px;
border-radius: 0;
margin: 0;
transition-duration: 0.7s;
background: transparent none;
}
#panel1:checked ~ .slide_panels .slide_panel_inner {
margin-left: 0;
}
#panel2:checked ~ .slide_panels .slide_panel_inner {
margin-left: -100%;
}
#panel1:checked ~ .bullets.panel::before {
left: 0;
}
#panel2:checked ~ .bullets.panel::before {
left: 50%;
}
/* schedule */
/*
.schedule {
width: 100%;
height: auto;
display: grid;
}
*/
.schedule_header {
width: 100%;
height: 80px;
margin: 0 0 10px 0;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
position: relative;
z-index: 1300;
}
.schedule_header_title {
width: 100%;
height: 100%;
position: relative;
}
.schedule_header_title_contents {
height: 80px;
aspect-ratio: 1/1;
display: grid;
align-items: end;
justify-items: center;
font-size: 40px;
font-weight: 600;
position: relative;
overflow: hidden;
padding: 10px 0;
}
.schedule_header_title_contents::before {
width: 100%;
height: 20px;
position: absolute;
top: 2px;
font-size: 12px;
text-align: center;
display: grid;
align-items: end;
}
.schedule_header_title_contents.mon::before {
content: 'MON';
}
.schedule_header_title_contents.tue::before {
content: 'TUE';
}
.schedule_header_title_contents.wed::before {
content: 'WED';
}
.schedule_header_title_contents.thu::before {
content: 'THU';
}
.schedule_header_title_contents.fri::before {
content: 'FRI';
}
.schedule_header_title_contents.sat::before {
content: 'SAT';
}
.schedule_header_title_contents.sun::before {
content: 'SUN';
}
.schedule_header .schedule_header_actions {
width: 100%;
height: 100%;
display: grid;
justify-items: center;
align-items: center;
grid-template-columns: 1fr 1fr;
}
.schedule_header .schedule_header_actions .blue_action {
margin: 0;
}
.module .auto_reload {
display: none;
}
.module.auto_reload .auto_reload {
display: grid !important;
}
.module.auto_reload .reload {
display: none;
}
.blue_action.options ul li.auto_reload_off {
display: none;
}
.module.auto_reload .blue_action.options ul li.auto_reload_off {
display: grid !important;
}
.module.auto_reload .blue_action.options ul li.auto_reload_on {
display: none !important;
}
.schedule_contents {
width: 100%;
display: grid;
row-gap: 10px;
overflow: auto;
z-index: 1100;
}
.schedule_contents_entry {
width: 100%;
min-height: 60px;
padding: 5px 10px 5px 15px;
position: relative;
cursor: pointer;
transition-duration: 0.1s;
}
.schedule_contents_entry:hover {
background: rgba(0, 0, 0, 0.2);
}
.schedule_contents_entry::before {
content: '';
position: absolute;
width: 5px;
height: 100%;
background: orange none;
border-radius: 2.5px;
top: 0;
left: 0;
}
.schedule_contents_entry.appoint::before {
background: blue none;
}
.schedule_entry_title {
font-size: large;
line-height: 30px;
}
.schedule_entry_contents {
line-height: 30px;
}
/* graph */
.graph_base {
width: 100%;
height: 100%;
display: grid;
align-items: center;
justify-items: center;
overflow: hidden;
position: relative;
}
.graph_base svg {
width: 100%;
height: 100%;
display: grid;
align-items: center;
justify-items: center;
transform: rotate(-90deg);
position: relative;
}
.graph_base .progress-bar {
stroke-width: 10;
stroke: #cccccc;
fill: transparent;
stroke-dasharray: 502;
stroke-dashoffset: 120;
stroke-linecap: round;
}
.graph_base .path {
stroke-width: 10;
stroke: #3399cc;
stroke: url(#g1);
fill: transparent;
stroke-dasharray: 502;
stroke-dashoffset: 502;
stroke-linecap: round;
animation: animate-bar 1s ease-in-out 1s forwards;
}
@property --sdonum {
syntax: "";
inherits: false;
initial-value: 502;
}
@keyframes animate-bar {
100% {
/* max 502 -120 = 382 = 100% */
/* (382 * (100 - x) / 100 + 120 x% */
stroke-dashoffset: 120; /* 100% */
stroke-dashoffset: 311; /* 50% */
stroke-dashoffset: 406; /* 15% */
stroke-dashoffset: 350; /* 40% */
stroke-dashoffset: 196; /* 80 */
--sdonum: var(--sdo);
stroke-dashoffset: var(--sdonum);
}
}
.comment {
display: grid;
align-items: center;
justify-items: center;
font-size: larger;
line-height: 40px;
text-align: center;
}
@media screen and (max-width: 800px) {
.inner:has(.graph_base) {
display: grid;
grid-template-columns: 1fr 1fr;
}
.business .inner:has(.graph_base) {
display: grid;
grid-template-columns: 1fr;
}
.comment {
border-left: var(--base-border);
text-align: left;
font-size: medium;
}
}
/* table */
.module .contents:has(.table) {
padding: 0 1em 1em 1em;
}
.table {
width: 100%;
height: 100%;
display: grid;
position: relative;
}
.th {
min-height: 40px;
padding: 0 5px;
display: grid;
align-items: center;
justify-items: center;
grid-template-columns: 200px 160px 1fr 1fr;
border-bottom: var(--base-border);
background: #e0e0e0 none;
}
.tr {
min-height: 50px;
padding: 0 5px;
display: grid;
align-items: center;
grid-template-columns: 200px 160px 1fr 1fr;
border-bottom: var(--base-border);
position: relative;
overflow: hidden;
}
.tr:nth-child(2n + 1) {
background: #f5f5f5 none;
}
@media screen and (max-width: 800px) {
.th {
grid-template-columns: 200px 1fr;
grid-template-rows: 40px 40px;
}
.th div:nth-child(2) {
grid-row-start: 2;
grid-column-start: 1;
}
.th div:nth-child(3) {
grid-row-start: 1;
grid-column-start: 2;
}
.th div:nth-child(4) {
grid-row-start: 2;
grid-column-start: 2;
}
.tr {
grid-template-columns: 200px 1fr;
grid-template-rows: 40px 40px;
padding: 1em;
}
.tr div:nth-child(2) {
grid-row-start: 2;
grid-column-start: 1;
display: grid;
align-items: center;
}
.tr div:nth-child(3) {
grid-row-start: 1;
grid-column-start: 2;
}
.tr div:nth-child(4) {
grid-row-start: 2;
grid-column-start: 2;
}
}
@property --barpercent {
syntax: "";
inherits: false;
initial-value: 0;
}
@property --maxbarpercent {
syntax: "";
inherits: false;
initial-value: 100;
}
.tr .data {
margin: 5px 55px 5px 5px;
height: 15px;
background: #cccccc none;
position: relative;
border-radius: 40px;
counter-set: dataBar var(--barpercent);
animation: dataBar 1s 1;
animation-delay: 1s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
.tr .data::before {
content: counter(dataBar) "%";
width: 60px;
height: 40px;
display: grid;
align-items: center;
position: absolute;
top: 50%;
right: -50px;
text-align: right;
transform: translate(0, -20px);
}
.tr .data::after {
content: "";
width: 0%;
height: 15px;
display: block;
position: absolute;
top: 0;
border-radius: 40px;
background: linear-gradient(45deg, #10a0e0, #1630f0);
background: #10a0e0 none;
animation: dataBarAnime 1s 1;
animation-delay: 1s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
@keyframes dataBar {
100% {
--barpercent: var(--maxbarpercent);
}
}
@keyframes dataBarAnime {
100% {
width: var(--maxwidth);
}
}
/* module menu */
.module.menu {
position: relative;
}
.module.menu ul {
position: relative;
}
.module.menu ul li {
min-height: 50px;
position: relative;
display: grid;
align-items: center;
margin: 5px 0;
}
.module.menu ul li.category {
padding: 0 0.5em;
border-bottom: 1px solid #cccccc;
overflow: hidden;
}
.module.menu ul li.category::before {
content: "";
width: 1px;
height: 50%;
position: absolute;
right: 0;
bottom: 0;
background: #cccccc none;
transform-origin: 100% 100%;
transform: rotate(-45deg);
}
.module.menu ul li a {
width: 100%;
height: 100%;
display: grid;
align-items: center;
text-decoration: none;
padding: 0 1em;
color: var(--base-text-color);
position: relative;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
}
.module.menu ul li a:hover {
background: #eeeeee none;
}
.module.menu ul li a::after {
content: "";
width: 8px;
height: 8px;
position: absolute;
right: 10px;
border-right: 3px solid #999999;
border-bottom: 3px solid #999999;
transform: rotate(-45deg);
}
@media screen and (max-width: 800px) {
.module.menu ul li {
min-height: 60px;
}
}
.sample {
width: 100%;
height: 200px;
}
/* countup */
@property --count {
syntax: "";
inherits: false;
initial-value: 0;
}
@property --maxcount {
syntax: "";
inherits: false;
initial-value: 100;
}
.countUp {
counter-set: countUp var(--count);
animation: countUp 1s 1;
animation-delay: 1s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.2, 0.1, 0.2, 1);
animation-timing-function: ease-in-out;
font-variant-numeric: tabular-nums;
font-size: 3.4rem;
width: 100%;
height: 100%;
display: grid;
align-items: center;
justify-items: center;
position: absolute;
overflow: hidden;
}
.countUp::after {
/*
content: counter(countUp) "件";
*/
content: counter(countUp) "";
/*
width: 30%;
*/
height: 40%;
aspect-ratio: 1 / 1;
display: grid;
align-items: center;
justify-items: center;
/*
transform: translate(-0.5rem, 0);
*/
position: absolute;
font-size: clamp(20px, 2.5vw, 3.4rem);
font-variant-numeric: tabular-nums;
}
.countUp::before {
/*
content: counter(countUp) "件";
*/
content: "%";
/*
height: 60%;
*/
aspect-ratio: 1/1;
font-size: 1.4rem;
position: absolute;
display: grid;
align-items: center;
justify-items: end;
/*
transform: translate(-2.4rem, 0.5rem);
*/
font-size: clamp(12px, 1.5vw, 1.4rem);
/*
height: 40%;
transform: translate(0, 0.5rem);
background-color: #1630f0;
opacity: 0.5;
*/
width: 60%;
justify-items: center;
transform: translate(-10%, clamp(0.2em, 1vw, 0.5rem));
transform: translate(clamp(30px, 3.7vw, 4rem), 0.5rem);
}
@keyframes countUp {
100% {
--count: var(--maxcount);
}
}
@media screen and (max-width: 800px) {
.countUp::after {
font-size: 3.4rem;
}
.countUp::before {
width: auto;
height: 60%;
font-size: 1.4rem;
/*
transform: translate(-15%, clamp(0.2em, 1vw, 0.5rem));
*/
transform: translate(4.5rem, 0.5rem);
}
}
/* badge */
.blue_action[data-badge=""]::after {
opacity: 0;
}
.blue_action[data-badge]::after {
/*
content: var(--badge-count);
*/
content: attr(data-badge);
width: 28px;
height: 28px;
aspect-ratio: 1/1;
display: grid;
align-items: center;
justify-items: center;
position: absolute;
top: 10px;
right: 10px;
background: red;
border-radius: 50%;
font-size: 1rem;
line-height: 1rem;
color: #ffffff;
opacity: 1;
}
/* ul */
.search_ul {
height: 300px;
overflow: auto;
/*
scrollbar-color: #6969dd #e0e0e0;
scrollbar-width: thin;
*/
}
.search_ul li {
height: 60px;
background: #eeeeee none;
display: grid;
align-items: center;
}
.search_ul .category {
position: sticky;
top: 0px;
}
.top_cover {
width: 100%;
height: 100%;
position: absolute;
top: 0;
background: #222222 none;
z-index: 3000;
overflow: hidden;
transition-duration: 0.3s;
transition-timing-function: linear;
transition-duration: 1s;
transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
display: none;
}
.top_cover.active {
background: greenyellow none;
background: green none;
}
.top_cover_base_left {
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: 3000;
filter: drop-shadow(4px 0px 6px rgba(0, 0, 0, 0.9));
transition-delay: 0.2s;
transition-duration: 2s;
transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.top_cover.active .top_cover_base_left {
filter: drop-shadow(4px 0px 6px rgba(0, 0, 0, 0.3));
}
.top_cover_base_left::before {
content: "";
width: 100%;
height: 100%;
background: #ffffff none;
position: absolute;
top: 0;
clip-path: polygon(0 100%, 4% 96%, 4% 4%, 0 0, 100% 0, 96% 4%, 96% 96%, 100% 100%, 80% 100%, 75% 90%, 25% 90%, 20% 100%, 0 100%);
clip-path: polygon(0 100%, 4% 96%, 4% 4%, 0 0, 100% 0, 96% 4%, 96% 96%, 100% 100%, 90% 100%, 86% 96%, 80% 96%, 76% 92%, 24% 92%, 20% 96%, 14% 96%, 10% 100%, 0 100%);
display: block;
clip-path: polygon(0 100%, 4% 96%, 4% 4%, 0 0, 10% 0, 14% 4%, 20% 4%, 24% 8%, 76% 8%, 80% 4%, 86% 4%, 90% 0, 100% 0, 96% 4%, 96% 96%, 100% 100%, 90% 100%, 86% 96%, 80% 96%, 76% 92%, 24% 92%, 20% 96%, 14% 96%, 10% 100%, 0 100%);
clip-path: polygon(0 100%, 4% 96%, 4% 4%, 0 0, 10% 0, 14% 4%, 20% 4%, 24% 8%, 76% 8%, 80% 4%, 86% 4%, 90% 0, 100% 0, 96% 4%, 96% 96%, 100% 100%, 90% 100%, 82% 92%, 70% 92%, 62% 100%, 38% 100%, 30% 92%, 18% 92%, 10% 100%, 0 100%);
clip-path: polygon(0 100%, 0 0, 10% 0, 14% 4%, 20% 4%, 24% 8%, 76% 8%, 80% 4%, 86% 4%, 90% 0, 100% 0, 96% 4%, 96% 96%, 100% 100%, 90% 100%, 82% 92%, 70% 92%, 62% 100%, 38% 100%, 30% 92%, 18% 92%, 10% 100%, 0 100%);
clip-path: polygon(0 100%, 0 0, 50% 0, 46% 4%, 46% 96%, 46% 100%, 0 100%);
left: 0;
left: 3%;
transition-delay: 0.2s;
transition-duration: 2s;
transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.top_cover.active .top_cover_base_left::before {
left: -10%;
}
.top_cover_base {
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: 3000;
filter: drop-shadow(-4px 0px 4px rgba(0, 0, 0, 0.9));
transition-delay: 0.2s;
transition-duration: 2s;
transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.top_cover.active .top_cover_base {
filter: drop-shadow(-4px 0px 4px rgba(0, 0, 0, 0.3));
}
.top_cover_base::after {
content: "";
width: 100%;
height: 100%;
background: #eeeeee none;
position: absolute;
top: 0;
right: 0;
display: block;
transition-delay: 0.2s;
transition-duration: 2s;
transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
clip-path: polygon(0 100%, 4% 96%, 4% 4%, 0 0, 10% 0, 14% 4%, 20% 4%, 24% 8%, 76% 8%, 80% 4%, 86% 4%, 90% 0, 100% 0, 96% 4%, 96% 96%, 100% 100%, 90% 100%, 86% 96%, 80% 96%, 76% 92%, 24% 92%, 20% 96%, 14% 96%, 10% 100%, 0 100%);
clip-path: polygon(0 100%, 4% 96%, 4% 4%, 0 0, 10% 0, 14% 4%, 20% 4%, 24% 8%, 76% 8%, 80% 4%, 86% 4%, 90% 0, 100% 0, 96% 4%, 96% 96%, 100% 100%, 90% 100%, 82% 92%, 70% 92%, 62% 100%, 38% 100%, 30% 92%, 18% 92%, 10% 100%, 0 100%);
clip-path: polygon(50% 100%, 50% 4%, 54% 0, 100% 0, 100% 90%, 70% 90%, 64% 100%, 50% 100%);
clip-path: polygon(50% 100%, 50% 4%, 54% 0, 100% 0, 100% 100%, 50% 100%);
}
.top_cover.active .top_cover_base::after {
/*
right: -10%;
*/
}
.top_cover_contents {
width: 400px;
height: 400px;
position: absolute;
top: 40%;
right: 10%;
z-index: 3100;
background: #111111 none;
border: 1px solid #111111;
box-shadow: 2px 2px 4px inset;
clip-path: polygon(0 100%, 0 8%, 8% 0, 100% 0, 100% 92%, 92% 100%, 0 100%);
}
.arrows_right {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
height: 120px;
}
.arrows_right div {
width: 60px;
height: 100%;
background: transparent none;
position: relative;
display: inline-block;
transform: translate(-25%, 0);
}
.arrows_right div::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 50%;
transform: skew(45deg) translate(100%, 0);
background-color: #10a0e0;
background-color: #333333;
background: rgb(211, 211, 4) none;
}
.arrows_right div::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 50%;
height: 50%;
transform: skew(-45deg) translate(100%, 0);
background-color: #10a0e0;
background-color: #333333;
background: rgb(211, 211, 4) none;
}
.arrows_left {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
height: 120px;
}
.arrows_left div {
width: 60px;
height: 100%;
background: transparent none;
position: relative;
display: inline-block;
transform: translate(-25%, 0);
}
.arrows_left div::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 50%;
transform: skew(-45deg) translate(100%, 0);
background-color: #10a0e0;
background-color: #333333;
background: rgb(211, 211, 4) none;
}
.arrows_left div::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 50%;
height: 50%;
transform: skew(45deg) translate(100%, 0);
background-color: #10a0e0;
background-color: #333333;
background: rgb(211, 211, 4) none;
}
.arrows_base {
width: 100%;
height: 120px;
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr;
background: rgb(211, 211, 4) none;
background: #000000 none;
}
.arrows_left div {
--sb-width: 120px;
--sb-left: -120px;
--sb-time: calc(1s * var(--smax));
width: var(--sb-width);
height: 100%;
position: absolute;
left: max(calc(120px * var(--smax)), 100%);
animation-name: slideArrowsLeft;
animation-duration: var(--sb-time);
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.arrows_left div {
padding: 10px;
display: grid;
grid-template-columns: 1fr;
animation-delay: calc(var(--sb-time) / var(--smax) * (var(--smax) - var(--sn) + 1) * -1);
}
@keyframes slideArrowsLeft {
to {
/*
*/
left: var(--sb-left);
}
}
.arrows_right div {
--sb-width: 120px;
--sb-left: -120px;
--sb-time: calc(1s * var(--smax));
width: var(--sb-width);
height: 100%;
position: absolute;
right: max(calc(120px * var(--smax)), 100%);
animation-name: slideArrowsRight;
animation-duration: var(--sb-time);
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.arrows_right div {
padding: 10px;
display: grid;
grid-template-columns: 1fr;
animation-delay: calc(var(--sb-time) / var(--smax) * (var(--smax) - var(--sn) + 1) * -1);
}
@keyframes slideArrowsRight {
to {
/*
*/
right: var(--sb-left);
}
}
.arrows_message {
width: 100%;
height: 80%;
position: absolute;
top: 50%;
left: 50%;
background: #ffffff none;
background: rgb(211, 211, 4) none;
background: #000000 none;
color: rgb(211, 211, 4);
transform: translate(-50%, -50%);
display: grid;
align-content: center;
justify-content: center;
font-size: larger;
font-weight: 600;
}
.module .contents:has(.arrows_base) {
padding: 0;
}
/* hazard_base */
.hazard_base {
width: 100%;
height: 180px;
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: 1fr;
background: #000000 none;
padding: 10px 0;
}
@keyframes hazardAnime {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.hazard {
width: 100%;
height: 100%;
position: relative;
animation-name: hazardAnime;
animation-duration: 1s;
animation-iteration-count: 5;
background: url(./hazard_bg.png) repeat 0 0;
}
.hazard div {
--sb-width: 10px;
width: var(--sb-width);
height: 100%;
position: absolute;
left: calc((100%/var(--smax))*var(--sn)*1.8);
background: red none;
transform: skew(-30deg) translate(-30px, 0);
display: none;
}
.hazard_message {
width: 100%;
height: 60%;
position: absolute;
background: #000000 none;
color: red;
font-size: 2rem;
font-weight: 600;
top: 20%;
left: 0;
transform: none;
display: block;
text-align: center;
}
.hazard_message .hazard_title {
font-family: 'Noto Serif JP', serif;
font-weight: 900;
font-size: 30px;
text-align: center;
transform: scaleY(1.5);
letter-spacing: -0.05rem;
position: relative;
display: grid;
align-items: center;
height: 50%;
animation-name: hazardAnime;
animation-duration: 1s;
animation-iteration-count: 5;
}
.hazard_message .hazard_subtitle {
font-family: 'Noto Serif JP', serif;
font-weight: 900;
font-size: 18px;
text-align: center;
transform: scaleY(1.5);
letter-spacing: -0.05rem;
border: 1px solid red;
position: relative;
display: grid;
align-items: center;
display: inline-block;
padding: 0 10px;
margin: 10px 0 0 0;
animation-name: hazardAnime;
animation-duration: 1s;
animation-iteration-count: 5;
}
.module .contents:has(.hazard_base) {
padding: 0px;
border-radius: var(--border-radius);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
/* splash */
.layer_splash {
position: absolute;
width: 100%;
height: 100%;
top: 0;
display: grid;
align-items: center;
justify-content: center;
background: #cccccc;
background: #ffffff;
opacity: 1;
pointer-events: none;
z-index: 10000;
}
.layer_splash.off {
animation-name: splash_off;
animation-duration: 1s;
opacity: 0;
}
.page_logo {
width: 100%;
height: 100%;
background: url(./bluestep_web.png) no-repeat center center;
background-size: contain;
background-position: 30px center;
}
.logo_first {
width: 500px;
height: 300px;
background: url(./bluestep_web_bg.png) no-repeat center center;
background-size: contain;
position: relative;
opacity: 1;
}
.logo_cover {
width: 500px;
height: 300px;
background: url(./bluestep_web.png) no-repeat center center;
background-size: contain;
position: relative;
opacity: 0;
animation-duration: 3s;
}
.layer_splash.on .logo_cover {
animation-name: splash;
opacity: 1;
}
.layer_splash.off .logo_cover {
animation-name: splash_off;
animation-duration: 1s;
opacity: 0;
}
.bullet {
position: relative;
width: 25px;
height: 25px;
border: 5px solid #fff;
opacity: 0;
border-radius: 50%;
border: none;
position: absolute;
right: 56px;
bottom: 78px;
}
.bullet.second_step {
right: 18px;
bottom: 114px;
}
.layer_splash.on .bullet {
position:absolute;
opacity: 1;
animation-name: explode;
animation-duration: 0.350s;
}
.layer_splash.on .bullet.second_step {
animation-delay: 0.350s;
}
.line {
position: absolute;
width: 10px;
height: 2px;
background-color: #fff;
background-color: var(--main-color);
opacity:0;
}
.line.zero {
left: 11px;
top: -21px;
transform: translateY(20px);
width: 2px;
height: 10px;
}
.line.one {
right: -7px;
top: -11px;
transform: rotate(-55deg) translate(-9px);
}
.line.two {
right: -20px;
top: 11px;
transform: translate(-9px);
display: none;
}
.line.three {
right: -8px;
top: 35px;
transform: rotate(55deg) translate(-9px);
display: none;
}
.line.four {
left: -8px;
top: -11px;
transform: rotate(55deg) translate(9px);
}
.line.five {
left: -20px;
top: 11px;
transform: translate(9px);
display: none;
}
.line.six {
left: -8px;
top: 35px;
transform: rotate(-55deg) translate(9px);
display: none;
}
.line.seven {
left: 11px;
bottom: -21px;
transform: translateY(-20px);
width: 2px;
height: 10px;
display: none;
}
.layer_splash.on .bullet .line.zero{
animation-name: drop-zero;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
.layer_splash.on .bullet .line.one{
animation-name: drop-one;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
.layer_splash.on .bullet .line.two{
animation-name: drop-two;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
.layer_splash.on .bullet .line.three{
animation-name: drop-three;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
.layer_splash.on .bullet .line.four{
animation-name: drop-four;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
.layer_splash.on .bullet .line.five{
animation-name: drop-five;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
.layer_splash.on .bullet .line.six{
animation-name: drop-six;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
.layer_splash.on .bullet .line.seven{
animation-name: drop-seven;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
.layer_splash.on .bullet.second_step .line.zero{
animation-delay: 0.600s;
}
.layer_splash.on .bullet.second_step .line.one{
animation-delay: 0.600s;
}
.layer_splash.on .bullet.second_step .line.four{
animation-delay: 0.600s;
}
@keyframes splash_off {
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
@keyframes splash {
0%{
opacity: 0;
}
40%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes splash_button {
0%{
opacity: 0;
}
80%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes explode {
0%{
opacity: 0;
transform: scale(1);
}
60%{
opacity: 1;
transform: scale(0.5);
}
100%{
opacity: 1;
transform: scale(1);
}
}
@keyframes explode_start {
0%{
opacity: 0;
transform: scale(1);
}
30%{
opacity: 1;
transform: scale(0.9);
}
90%{
opacity: 0;
}
100%{
opacity: 0;
transform: scale(1.5);
}
}
@keyframes drop-zero {
0% {
opacity: 0;
transform: translateY(20px);
height: 10px;
}
20% {
opacity:1;
}
100% {
transform: translateY(-2px);
height: 0px;
opacity:0;
}
}
@keyframes drop-one {
0% {
opacity: 0;
transform: rotate(-55deg) translate(-20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: rotate(-55deg) translate(9px);
width: 0px;
opacity:0;
}
}
@keyframes drop-two {
0% {
opacity: 0;
transform: translate(-20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: translate(9px);
width: 0px;
opacity:0;
}
}
@keyframes drop-three {
0% {
opacity: 0;
transform: rotate(55deg) translate(-20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: rotate(55deg) translate(9px);
width: 0px;
opacity:0;
}
}
@keyframes drop-four {
0% {
opacity: 0;
transform: rotate(55deg) translate(20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: rotate(55deg) translate(-9px);
width: 0px;
opacity:0;
}
}
@keyframes drop-five {
0% {
opacity: 0;
transform: translate(20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: translate(-9px);
width: 0px;
opacity:0;
}
}
@keyframes drop-six {
0% {
opacity: 0;
transform: rotate(-55deg) translate(20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: rotate(-55deg) translate(-9px);
width: 0px;
opacity:0;
}
}
@keyframes drop-seven {
0% {
opacity: 0;
transform: translateY(-20px);
height: 10px;
}
20% {
opacity:1;
}
100% {
transform: translateY(2px);
height: 0px;
opacity:0;
}
}
.sidebar_contents_base .module {
grid-template-rows: 7rem 1fr;
}
.blue_main {
grid-template-rows: 100px 1fr;
grid-template-rows: 7rem 1fr;
}
.blue_main_header_actions {
display: flex;
justify-content: end;
padding: 0 20px 0 0;
}
.blue_main_header_actions a {
padding: 0 20px;
color: var(--base-text-color);
font-weight: 700;
text-decoration: none;
height: 100%;
display: grid;
align-items: center;
position: relative;
transition-duration: 0.3s;
transition-timing-function: ease-in;
outline: none;
}
.blue_main_header_actions a:hover {
background: #f0f0f0 none;
}
.blue_main_header_actions {
container-type: inline-size;
/*
resize: horizontal;
*/
}
.blue_main_header_actions button {
display: none;
}
@container (width < 500px) {
.blue_main_header_actions a {
display: none;
}
.blue_main_header_actions button {
display: inline-block;
}
}
.about_business {
container-type: inline-size;
}
.about_business_inner {
display: grid;
grid-template-columns: 50% 50%;
}
@container (width < 1700px) {
.about_business_inner {
grid-template-columns: 1fr;
}
}
.blue_main_footer {
position: absolute;
width: auto;
height: 100px;
bottom: 15px;
right: 20px;
box-shadow: none;
}
.blue_main_footer .blue_action {
display: none;
}
.blue_main_footer .blue_action.blue_action_main {
display: inline-grid;
}
.blue_main_footer .blue_action.blue_action_main a {
display: block;
}
.blue_main_header_logo {
padding: 0 40px;
}
.blue_main_footer_contents_inner {
justify-content: end;
}
.contents_grid .module {
margin: 0 0 5rem 0;
box-shadow: none;
}
.contents_grid .module .contents {
/*
width: 80%;
margin: 0 auto;
*/
}
.contents_grid .module .contents .inner {
width: 80%;
margin: 0 auto;
}
.module.business .inner {
width: auto;
height: 500px;
aspect-ratio: 1 / 1;
}
.module.business .inner_contents {
width: 100%;
height: 100%;
display: grid;
align-items: center;
}
.module.business .contents .inner {
border-radius: 30px;
/*
background: linear-gradient(rgb(51 153 204 / 30%), rgb(51 153 204 / 50%));
*/
}
.module.business .graph_base {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.company {
background: #00012e none;
}
.company .contents {
height: 600px;
overflow: hidden;
position: relative;
padding: 0;
}
.company_title {
display: grid;
align-items: center;
justify-items: center;
color: #3f6682;
font-size: 2rem;
line-height: 2.5;
font-weight: 700;
letter-spacing: 0.1em;
color: #8cd8ea;
}
.company_top {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: grid;
align-items: center;
justify-items: center;
color: #3f6682;
font-size: 2rem;
line-height: 2.5;
font-weight: 700;
letter-spacing: 0.1em;
color: #8cd8ea;
transition-delay: 0.3s;
transition-duration: 0.5s;
transition-timing-function: ease-in;
font-family: 'Orbitron';
}
.company.on .company_top {
opacity: 0;
transition-delay: 1s;
transition-duration: 0.5s;
transition-timing-function: ease-in;
}
.company_contents {
display: grid;
grid-template-columns: 30% 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
.company_contents div {
display: grid;
align-items: center;
color: #3f6682;
font-size: 1.4rem;
line-height: 2.5;
font-weight: 700;
letter-spacing: 0.1rem;
color: #8cd8ea;
}
.company_contents div:nth-child(2n+1) {
font-size: 1.2rem;
justify-items: end;
}
.company_contents div:nth-child(2n) {
justify-items: normal;
padding: 0 0 0 30px;
}
.contents_grid .module.company .contents .inner {
width: 100%;
margin: 0;
padding: 50px 50px;
width: 500px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
transition-delay: 1s;
transition-duration: 0.3s;
transition-timing-function: ease-in;
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
transform: translate(-50%, -50%);
}
.contents_grid .module.company.on .contents .inner {
width: 100%;
height: 450px;
padding: 50px 125px;
}
.company_base {
width: 100%;
height: 100%;
border: 3px solid #8cd8ea;
overflow: hidden;
position: relative;
overflow: visible;
container-type: inline-size;
}
.company_base::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: 3px solid #8cd8ea;
overflow: visible;
filter: blur(15px);
}
.company_inner {
height: 100%;
display: grid;
grid-template-columns: 50% 50%;
opacity: 0;
transition-delay: 0s;
transition-duration: 0.2s;
transition-timing-function: ease-in;
}
.company.on .company_inner {
opacity: 1;
transition-delay: 1.5s;
transition-duration: 0.5s;
transition-timing-function: ease-in;
}
@container (width < 700px) {
.company_inner {
grid-template-columns: 1fr;
padding: 0 0 20px 0;
}
}
#topcontents {
height: 400px;
height: calc(95vh - 5rem);
}
#topcontents .contents {
height: 100%;
}
#topcontents .contents .inner {
display: grid;
align-items: center;
}
.tc_title {
font-size: 2rem;
line-height: 2.5;
font-weight: 700;
letter-spacing: 0.1em;
}
.tc_contents {
font-size: 1.125rem;
line-height: 2.5;
font-weight: 700;
}
.tc_contents div {
display: inline-block;
}
.topcontents_bg {
position: absolute;
width: 100%;
height: calc(90vh - 5rem);
top: 0;
overflow: hidden;
}
#topcontents .bg {
position: absolute;
width: 200%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center bottom;
opacity: 0;
}
#topcontents .bg_1 {
animation-name: bg-1-anime;
animation-iteration-count: infinite;
animation-duration: 12s;
animation-timing-function: ease-in-out;
background-image: url(./line_1.png);
bottom: 0;
}
#topcontents .bg_2 {
animation-delay: 1s;
animation-name: bg-2-anime;
animation-iteration-count: infinite;
animation-duration: 13s;
animation-timing-function: ease-in-out;
background-image: url(./line_2.png);
}
#topcontents .bg_3 {
animation-delay: 2s;
animation-name: bg-3-anime;
animation-iteration-count: infinite;
animation-duration: 14s;
animation-timing-function: ease-in-out;
background-image: url(./line_3.png);
}
@keyframes bg-1-anime {
0% {
opacity: 0;
left: 0%;
}
50% {
opacity:1;
}
100% {
opacity: 0;
left: -80%;
}
}
@keyframes bg-2-anime {
0% {
opacity: 0;
left: -20%;
}
50% {
opacity:1;
}
100% {
opacity: 0;
left: -90%;
}
}
@keyframes bg-3-anime {
0% {
opacity: 0;
left: 0%;
}
50% {
opacity:1;
}
100% {
opacity: 0;
left: -80%;
}
}
.module.about .contents .inner {
overflow: visible;
}
.about_title {
font-size: 2rem;
line-height: 2.5;
font-weight: 700;
letter-spacing: 0.1em;
border-bottom: var(--base-border);
}
.about_contents {
font-size: 1.125rem;
line-height: 2.5;
font-weight: 700;
padding: 20px 0 0 0;
}
.about_animation_base {
display: flex;
justify-content: end;
}
.contact_contents {
display: grid;
justify-items: center;
}
.contact_contents a {
display: inline-flex;
justify-content: center;
color: #eeeeee;
font-weight: 700;
text-decoration: none;
font-size: 1.3rem;
border-radius: 2rem;
height: 4rem;
background-color: #999999;
padding: 0 2rem;
align-items: center;
}
.business_title {
font-size: 2rem;
line-height: 2.5;
font-weight: 700;
letter-spacing: 0.1em;
/*
border-bottom: var(--base-border);
*/
text-align: center;
padding: 20px 0 0 0;
}
.business_contents {
font-size: 1.125rem;
line-height: 2.5;
font-weight: 700;
padding: 20px 0 0 0;
text-align: center;
padding: 20px 0 40px 0;
}
.module.credit .contents .inner {
display: flex;
align-items: center;
justify-content: space-between;
}
.module.credit .contents .inner a {
color: var(--base-text-color);
font-weight: 700;
text-decoration: underline;
}
.module.producedby {
margin: 0;
}
.module.producedby .contents .inner {
display: flex;
align-items: center;
justify-content: center;
}
.tc_grid {
display: grid;
align-items: center;
}
.tcg_left {
display: grid;
align-items: center;
}
.tc_grid p {
display: inline-block;
}
.tc_title p {
font-size: 2.4rem;
line-height: 2.5;
font-weight: 700;
letter-spacing: 0.1em;
position: relative;
}
.tc_title p.rashisa::before {
content: "";
width: 100%;
height: 10%;
position: absolute;
bottom: 25%;
background: #10a0e0 none;
z-index: -1;
border-radius: 30px;
transition-duration: 0.1s;
transition-timing-function: ease-out;
transition-delay: 1.8s;
}
.noanime .tc_title p.rashisa::before {
width: 0%;
}
.tc_title .p_plus {
font-size: 2.4rem;
line-height: 2.5;
font-weight: 700;
letter-spacing: 0.1em;
margin: 0 40px 0 0;
position: relative;
display: inline-block;
}
.sce_title a {
display: grid;
height: 100%;
align-items: center;
padding: 0 20px;
text-decoration: none;
color: var(--base-text-color);
font-size: 1.2rem;
font-weight: 700;
}
.loading_base {
width: 500px;
height: 120px;
margin: 40px;
background: url(./bluestep_web_loading.png) no-repeat right bottom;
position: relative;
}
.loading_bullet {
position: relative;
width: 25px;
height: 25px;
border: 5px solid #fff;
border: 5px solid #cccccc;
border: none;
opacity: 1;
border-radius: 50%;
position: absolute;
right: 70px;
bottom: -10px;
}
.loading_bullet.second_step {
right: 34px;
bottom: 20px;
}
.loading_bullet.third_step {
right: 2px;
bottom: 50px;
}
.loading_bullet .line {
position: absolute;
width: 10px;
height: 2px;
background-color: #fff;
background-color: var(--main-color);
opacity: 0;
animation-iteration-count: infinite;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-duration: 2.7s;
animation-fill-mode: forwards;
}
.loading_bullet .line.zero {
left: 11px;
top: -21px;
transform: translateY(20px);
width: 2px;
height: 10px;
}
.loading_bullet .line.one {
right: -7px;
top: -11px;
transform: rotate(-55deg) translate(-9px);
}
.loading_bullet .line.four {
left: -8px;
top: -11px;
transform: rotate(55deg) translate(9px);
}
.loading_bullet .line.zero{
animation-name: loading-drop-zero;
}
.loading_bullet .line.one{
animation-name: loading-drop-one;
}
.loading_bullet .line.four{
animation-name: loading-drop-four;
}
.loading_bullet.second_step .line.zero{
animation-delay: 0.900s;
}
.loading_bullet.second_step .line.one{
animation-delay: 0.900s;
}
.loading_bullet.second_step .line.four{
animation-delay: 0.900s;
}
.loading_bullet.third_step .line.zero{
animation-delay: 1.800s;
}
.loading_bullet.third_step .line.one{
animation-delay: 1.800s;
}
.loading_bullet.third_step .line.four{
animation-delay: 1.800s;
}
@keyframes loading-drop-zero {
0% {
opacity: 0;
transform: translateY(20px);
height: 10px;
}
6% {
opacity:1;
}
33% {
transform: translateY(-2px);
height: 0px;
opacity:0;
}
100% {
transform: translateY(-2px);
height: 0px;
opacity:0;
}
}
@keyframes loading-drop-one {
0% {
opacity: 0;
transform: rotate(-55deg) translate(-20px);
width: 10px;
}
6% {
opacity:1;
}
33% {
transform: rotate(-55deg) translate(9px);
width: 0px;
opacity:0;
}
100% {
transform: rotate(-55deg) translate(9px);
width: 0px;
opacity:0;
}
}
@keyframes loading-drop-four {
0% {
opacity: 0;
transform: rotate(55deg) translate(20px);
width: 10px;
}
6% {
opacity:1;
}
33% {
transform: rotate(55deg) translate(-9px);
width: 0px;
opacity:0;
}
100% {
transform: rotate(55deg) translate(-9px);
width: 0px;
opacity:0;
}
}
#topcontents .inner {
overflow: visible;
}
.plus_base {
position: absolute;
right: 0;
width: 30%;
aspect-ratio: 1 / 1;
background: #10a0e0 none;
background: #10a000 none;
background: transparent none;
width: 80px;
position: relative;
display: inline-block;
/*
top: 10px;
left: -30px;
*/
position: absolute;
top: -10px;
right: -60px;
}
/*
.plus:before {
content: "";
width: 15px;
height: 15px;
background: #fff;
position: absolute;
left: 7px;
top: calc(50% - 13px);
box-sizing: border-box;
border-radius: 50%;
}
*/
.plus_bullet {
position: relative;
width: 25px;
height: 25px;
left: -3px;
top: 2px;
border: 5px solid #fff;
opacity: 0;
border-radius: 50%;
position: absolute;
width: 50%;
height: 50%;
top: 25%;
left: 25%;
border: 5px solid #10a0e0;
border: none;
}
.plus:active {
transform: scale(0.5);
transition-duration: 0.5s;
}
.on .plus_base .plus_bullet {
position: absolute;
opacity: 1;
animation-name: explode_plus;
animation-duration: 0.350s;
animation-duration: 0.50s;
}
.plus_bullet_line {
position: absolute;
width: 20px;
height: 2px;
background-color: #fff;
opacity: 0;
background-color: #10a000;
width: 30px;
background-color: #10a0e0;
}
.plus_bullet_line.zero {
left: 11px;
top: -21px;
transform: translateY(20px);
width: 2px !important;
height: 10px;
top: -20%;
left: 50%;
width: 2px !important;
height: 20px;
transform: none;
height: 30px;
}
.plus_bullet_line.one {
right: -7px;
top: -11px;
transform: rotate(-55deg) translate(-9px);
transform: rotate(-45deg) translate(-9px);
top: 0;
right: 0;
}
.plus_bullet_line.two {
right: -20px;
top: 11px;
transform: translate(-9px);
right: -20%;
top: 50%;
}
.plus_bullet_line.three {
right: -8px;
top: 35px;
transform: rotate(55deg) translate(-9px);
transform: rotate(45deg) translate(-9px);
right: 0;
top: 100%;
}
.plus_bullet_line.four {
left: -8px;
top: -11px;
transform: rotate(55deg) translate(9px);
transform: rotate(45deg) translate(9px);
top: 0;
left: 0;
}
.plus_bullet_line.five {
left: -20px;
top: 11px;
transform: translate(9px);
left: -20%;
top: 50%;
}
.plus_bullet_line.six {
left: -8px;
top: 35px;
transform: rotate(-55deg) translate(9px);
transform: rotate(-45deg) translate(9px);
top: 100%;
left: 0;
}
.plus_bullet_line.seven {
left: 11px;
bottom: -21px;
transform: translateY(-20px);
width: 2px;
height: 10px;
left: 50%;
bottom: -20%;
transform: none;
height: 20px;
height: 30px;
}
.on .plus_base .plus_bullet .plus_bullet_line {
animation-duration: 1.5s !important;
}
.on .plus_base .plus_bullet .plus_bullet_line.zero{
animation-name: plus-drop-zero;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
.on .plus_base .plus_bullet .plus_bullet_line.one{
animation-name: plus-drop-one;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
.on .plus_base .plus_bullet .plus_bullet_line.two{
animation-name: plus-drop-two;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
.on .plus_base .plus_bullet .plus_bullet_line.three{
animation-name: plus-drop-three;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
.on .plus_base .plus_bullet .plus_bullet_line.four{
animation-name: plus-drop-four;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
.on .plus_base .plus_bullet .plus_bullet_line.five{
animation-name: plus-drop-five;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
.on .plus_base .plus_bullet .plus_bullet_line.six{
animation-name: plus-drop-six;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
.on .plus_base .plus_bullet .plus_bullet_line.seven{
animation-name: plus-drop-seven;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
@keyframes explode_plus {
0%{
opacity: 0;
transform: scale(10);
}
60%{
opacity: 1;
transform: scale(0.5);
}
100%{
opacity: 1;
transform: scale(1);
}
}
@keyframes plus-drop-zero {
0% {
opacity: 0;
transform: translateY(20px);
height: 10px;
}
20% {
opacity:1;
}
100% {
transform: translateY(-2px);
height: 0px;
opacity:0;
}
}
@keyframes plus-drop-one {
0% {
opacity: 0;
transform: rotate(-55deg) translate(-20px);
width: 10px;
transform: rotate(-45deg) translate(-20px);
}
20% {
opacity:1;
}
100% {
transform: rotate(-55deg) translate(9px);
width: 0px;
opacity:0;
transform: rotate(-45deg) translate(9px);
}
}
@keyframes plus-drop-two {
0% {
opacity: 0;
transform: translate(-20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: translate(9px);
width: 0px;
opacity:0;
}
}
@keyframes plus-drop-three {
0% {
opacity: 0;
transform: rotate(55deg) translate(-20px);
width: 10px;
transform: rotate(45deg) translate(-20px);
}
20% {
opacity:1;
}
100% {
transform: rotate(55deg) translate(9px);
width: 0px;
opacity:0;
transform: rotate(45deg) translate(9px);
}
}
@keyframes plus-drop-four {
0% {
opacity: 0;
transform: rotate(55deg) translate(20px);
width: 10px;
transform: rotate(45deg) translate(20px);
}
20% {
opacity:1;
}
100% {
transform: rotate(55deg) translate(-9px);
width: 0px;
opacity:0;
transform: rotate(45deg) translate(-9px);
}
}
@keyframes plus-drop-five {
0% {
opacity: 0;
transform: translate(20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: translate(-9px);
width: 0px;
opacity:0;
}
}
@keyframes plus-drop-six {
0% {
opacity: 0;
transform: rotate(-55deg) translate(20px);
width: 10px;
transform: rotate(-45deg) translate(20px);
}
20% {
opacity:1;
}
100% {
transform: rotate(-55deg) translate(-9px);
width: 0px;
opacity:0;
transform: rotate(-45deg) translate(-9px);
}
}
@keyframes plus-drop-seven {
0% {
opacity: 0;
transform: translateY(-20px);
height: 10px;
}
20% {
opacity:1;
}
100% {
transform: translateY(2px);
height: 0px;
opacity:0;
}
}
.plus_base svg {
width: 100%;
height: 100%;
display: grid;
align-items: center;
justify-items: center;
position: absolute;
opacity: 0;
}
.plus_base line {
stroke-width: 8;
stroke: #3399cc;
stroke: #ffffff;
fill: transparent;
stroke-linecap: round;
/*
stroke: url(#g2);
animation: animate-bar 1s ease-in-out 1s forwards;
*/
}
.on .plus_base svg {
animation-name: explode_plus;
animation-duration: 0.350s;
animation-duration: 0.50s;
opacity: 1;
}
.business .graph_base {
z-index: -1;
}
.business .graph_base .progress-bar {
stroke-width: 10;
stroke: #cccccc;
fill: transparent;
stroke-dasharray: 716;
stroke-dashoffset: 120;
stroke-linecap: round;
}
.graph_base .path {
stroke-width: 10;
stroke: #3399cc;
stroke: url(#g1);
fill: transparent;
stroke-dasharray: 716;
stroke-dashoffset: 716;
stroke-linecap: round;
/*
animation: animate-bar-business 1s ease-in-out 1s forwards;
*/
}
.business.on .graph_base .path {
animation: animate-bar-business 1s ease-in-out 1s forwards;
}
@keyframes animate-bar-business {
100% {
/* max 716 -120 = 596 = 100% */
/* (596 * (100 - x) / 100 + 120 x% */
stroke-dashoffset: 120; /* 100% */
stroke-dashoffset: 418; /* 50% */
stroke-dashoffset: 626; /* 15% */
stroke-dashoffset: 477; /* 40% */
stroke-dashoffset: 239; /* 80 */
--sdonum: var(--sdo);
stroke-dashoffset: var(--sdonum);
}
}
.business .countUp {
display: none;
}
.business.on .countUp {
counter-set: countUp var(--count);
animation: countUp 1s 1;
animation-delay: 1s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.2, 0.1, 0.2, 1);
animation-timing-function: ease-in-out;
font-variant-numeric: tabular-nums;
font-size: 3.4rem;
width: 100%;
height: 100%;
display: grid;
align-items: end;
justify-items: end;
position: absolute;
overflow: hidden;
font-family: 'Orbitron';
}
.business .countUp::after {
/*
content: counter(countUp) "件";
*/
content: counter(countUp) "";
/*
width: 30%;
*/
height: 40%;
aspect-ratio: 1 / 1;
display: grid;
align-items: center;
justify-items: center;
/*
transform: translate(-0.5rem, 0);
*/
position: absolute;
font-size: clamp(20px, 2.5vw, 3.4rem);
font-variant-numeric: tabular-nums;
align-items: end;
justify-items: end;
font-size: clamp(20px, 3.5vw, 4rem);
padding: 20px;
}
.business .countUp::before {
/*
content: counter(countUp) "件";
*/
content: "%";
/*
height: 60%;
*/
aspect-ratio: 1/1;
font-size: 1.4rem;
position: absolute;
display: grid;
align-items: center;
justify-items: end;
/*
transform: translate(-2.4rem, 0.5rem);
*/
font-size: clamp(12px, 1.5vw, 1.4rem);
/*
height: 40%;
transform: translate(0, 0.5rem);
background-color: #1630f0;
opacity: 0.5;
*/
width: 60%;
justify-items: center;
transform: translate(-10%, clamp(0.2em, 1vw, 0.5rem));
transform: translate(clamp(30px, 3.7vw, 4rem), 0.5rem);
display: none;
}