@charset "utf-8";

/*------------------------------------------------*/
/*  template ver1.0  */
/*------------------------------------------------*/
/*  templatename [--]  */
/*  update []  */
/*  ID [NT]  */
/*------------------------------------------------*/

/*　hc　*/
/* -----------------------------------------------*/

/*　Resize　*/
/* -----------------------------------------------*/
.is-resize #header nav,
.is-resize #header nav ul li .subfield {
transition:none;
}

/*　Plugin　*/
/* -----------------------------------------------*/

/*　error　*/
/* -----------------------------------------------*/

/*　All Reset　*/
/* -----------------------------------------------*/
* {
color:#222222;
/*font-size:clamp(12px, 1.0vw, 15px);*/
letter-spacing:0px;
}
*:not(br) {
line-height:1.65;
}
*:focus {
outline:none;
}
h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd {
margin:0;
padding:0;
font-weight:400;
word-break:break-all;
}
ul,li {
list-style:none;
}
input[type="button"],input[type="submit"] {
border-radius:0;
-webkit-appearance:none;
appearance:none;
}
input, select {
-moz-appearance:none;
-webkit-appearance:none;
appearance:none;
}
::-ms-reveal {
display:none;
}
a {
color:#000000;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-webkit-touch-callout:none;
}
a:hover {
text-decoration:none;
}

select {
padding-right:20px;
font-family:"IBM Plex Sans JP", sans-serif;
font-weight:400;
font-style:normal;
border:none;
background:none;
-webkit-appearance:none;
appearance:none;
}
select::-ms-expand {
display:none;
}

::selection {
background-color:#333333;
color:#ffffff;
}
::-moz-selection {
background-color:#333333;
color:#ffffff;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color:#bebebe;
font-family:"IBM Plex Sans JP", sans-serif;
font-weight:400;
font-style:normal;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color:#bebebe;
font-family:"IBM Plex Sans JP", sans-serif;
font-weight:400;
font-style:normal;
}
::placeholder { /* Others */
color:#bebebe;
font-family:"IBM Plex Sans JP", sans-serif;
font-weight:400;
font-style:normal;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
-webkit-appearance:none !important ;
margin:0 !important ;
-moz-appearance:textfield !important ;
}

button, a, input, textarea, .navline, .close {
-webkit-tap-highlight-color:transparent;
}

input:-webkit-autofill {
box-shadow: 0 0 0 1000px #eef4eb inset;
}


/*　Base Set　*/
/* -----------------------------------------------*/
body {
margin:0;
padding:0;
font-family:"IBM Plex Sans JP", sans-serif;
font-weight:400;
font-style:normal;
line-height:1.65;
/*background-color:rgba(0,0,0,0.02);*/
background-color:rgb(255,255,255,1.0);
}
img {
max-width:100%;
box-sizing:border-box;
border:none;
pointer-events:none;
}
.fit {
width:100%;
height:100%;
position:absolute;
top:0; 
left:0;
}
.fit img,
.fit video {
width:100%;
height:100%;
object-fit:cover;
object-position:center center;
font-family:'object-fit: cover; object-position: center center;'
}
.clearfix {
display:block;
}
.clearfix:after {
content:"";
display:block;
clear:both;
} 
.clearfix:before {
content:"";
display:block;
clear:both;
}

/*　Wrapper　*/
/* -----------------------------------------------*/
div#Wrapper {
margin:0px auto;
width:100%;
text-align:center;
position:relative;
}
div.Container {
margin:0px auto;
width:100%;
}

/*　header　*/
/* -----------------------------------------------*/
.headnav {
width:95%;
width:-webkit-calc(100% - 20px);
width:calc(100% - 20px);
height:70px;
/*border:rgb(255,255,255,1.0) solid 1px;*/
box-sizing:border-box;
/*background-color:rgb(72,149,37,1.0);*/
background-image:linear-gradient(90deg, rgba(72,148,37,1) 57%, rgba(183,184,0,1));
box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);
border-radius:10px;
user-select:none;
position:fixed;
top:10px;
left:10px;
z-index:5;
}
.headnav nav {
width:100%;
display:flex;
justify-content:space-between;
}
.headnav nav p {
width:25%;
display:inline-block;
}
.headnav nav p a {
width:100%;
height:70px;
overflow:hidden;
color:rgb(255,255,255,1.0);
display:block;
font-size:clamp(9px, 3.0vw, 14px);
font-weight:600;
line-height:95px;
text-align:center;
text-decoration:none;
position:relative;
}
.headnav nav p a:before {
margin-top:-10px;
content:"";
width:20%;
max-width:20px;
min-width:20px;
aspect-ratio:1 / 1;
overflow:hidden;
display:block;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.headnav nav p:nth-child(1) a:before {
background:url(../images/icon_dashboard.svg) center center no-repeat;
background-size:83% 83%;
}
.headnav nav p:nth-child(2) a:before {
background:url(../images/icon_task.svg) center center no-repeat;
background-size:83% 83%;
}
.headnav nav p:nth-child(3) a:before {
background:url(../images/icon_shared.svg) center center no-repeat;
background-size:95% 95%;
}
.headnav nav p:nth-child(4) a:before {
background:url(../images/icon_group.svg) center center no-repeat;
background-size:100% 100%;
}
.headnav nav p a:after {
content:"";
width:1px;
height:70%;
display:block;
background-color:rgb(255,255,255,0.5);
position:absolute;
top:50%;
right:0px;
transform:translateY(-50%);
}
.headnav nav p:nth-child(4) a:after {
display:none;
}

/*　setting　*/
/* -----------------------------------------------*/
.setting {
width:95%;
width:-webkit-calc(100% - 20px);
width:calc(100% - 20px);
height:50px;
display:flex;
justify-content:space-between;
box-sizing:border-box;
background-image:linear-gradient(90deg, rgba(183,184,0,1) 15%, rgba(72,148,37,1));
box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);
border-radius:10px;
user-select:none;
position:fixed;
bottom:10px;
left:10px;
z-index:5;
}
.setting p,
.setting form {
width:25%;
display:inline-block;
color:rgb(255,255,255,1.0);
font-size:clamp(10px, 1.0vw, 14px);
font-weight:600;
line-height:50px;
text-align:center;
box-sizing:border-box;
position:relative;
}
.setting .account {
width:35%;
display:table;
}
.setting .account p {
width:100%;
display:table-cell;
text-align:center;
vertical-align:middle;
}
.setting .account p strong {
margin-left:5px;
width:95%;
width:-webkit-calc(100% - 10px);
width:calc(100% - 10px);
overflow:hidden;
white-space:nowrap;
}
.setting .qr {
width:15%;
height:100%;
}
.setting .qr p {
width:100%;
height:100%;
position:relative;
}
.setting .qr p button {
width:100%;
height:100%;
display:inline-block;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
position:relative;
z-index:2;
}
.setting .qr p span {
height:60%;
aspect-ratio:1 / 1;
display:inline-block;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
background:url(../images/icon_qr.svg) center center no-repeat;
background-size:100% 100%;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index:1;
}
.setting p:after {
content:"";
width:1px;
height:100%;
display:block;
background-color:rgb(255,255,255,0.5);
position:absolute;
top:50%;
right:0px;
transform:translateY(-50%);
}
.setting p.logout {
width:100%;
}
.setting p.logout:after {
display:none;
}
.setting p a {
width:100%;
display:block;
color:rgb(255,255,255,1.0);
font-size:clamp(11px, 1.5vw, 14px);
font-weight:600;
line-height:52px;
text-align:center;
text-decoration:none;
position:relative;
}
.setting p a span {
display:inline-block;
color:rgb(255,255,255,1.0);
font-size:clamp(11px, 1.5vw, 14px);
font-weight:600;
line-height:52px;
text-decoration:none;
text-indent:30px;
position:relative;
}
.setting p a span:before {
margin-top:-1px;
content:"";
height:40%;
aspect-ratio:1 / 1;
overflow:hidden;
display:block;
position:absolute;
top:50%;
left:0px;
transform:translateY(-50%);
}
.setting p.profile a span:before {
background:url(../images/icon_setting.svg) center center no-repeat;
background-size:100% 100%;
}
.setting p.logout a span:before {
background:url(../images/icon_logout.svg) center center no-repeat;
background-size:100% 100%;
}
.setting p strong {
display:block;
color:rgb(255,255,255,1.0);
font-size:clamp(11px, 1.5vw, 14px);
font-weight:600;
line-height:1.2;
text-decoration:none;
}

/*　home　*/
/* -----------------------------------------------*/
body.home {
/*background-color:rgb(34,31,32,1.0);*/
background-color:rgb(255,255,255,1.0);
}
body.home #main {
width:100%;
height:100vh;
display:table;
}
body.home #main .inner {
width:100%;
display:table-cell;
text-align:center;
vertical-align:middle;
}
body.home #main .servicelogo {
margin-top:70px;
}
body.home #main .copy {
margin-bottom:10px;
/*color:rgb(255,255,255,0.7);*/
color:rgb(0,0,0,0.5);
font-size:14px;
font-weight:600;
letter-spacing:6px;
}
body.home #main .sitename {
margin:0px auto;
width:80%;
max-width:310px;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
aspect-ratio:60 / 11;
background:url(../images/logo.png) center center no-repeat;
background-size:100% 100%; 
}
body.home #main .loginset {
margin:30px auto 0px auto;
width:80%;
max-width:300px;
display:flex;
justify-content:center;
gap:0px 20px;
}
body.home #main .loginset p {
width:50%;
width:-webkit-calc((100% - 20px) / 2);
width:calc((100% - 20px) / 2);
display:inline-block;
}
body.home #main .loginset p a {
width:100%;
height:50px;
display:block;
color:rgb(255,255,255,1.0);
font-size:15px;
font-weight:600;
line-height:50px;
text-decoration:none;
letter-spacing:0px;
box-sizing:border-box;
/*background-color:rgba(255,255,255,0.05);*/
background-color:rgba(0,0,0,1.0);
border-radius:25px;
}
body.home #main .about {
margin:50px auto 0px auto;
padding:50px 50px;
width:80%;
max-width:650px;
text-align:left;
box-sizing:border-box;
background-color:rgba(0,0,0,0.05);
border-radius:25px;
}
body.home #main .about h2 {
margin:20px 0px;
padding:7px 0px;
color:rgb(0,0,0,0.4);
font-size:16px;
font-weight:500;
text-align:center;
border-bottom:rgba(0,0,0,0.1) solid 1px;
border-top:rgba(0,0,0,0.1) solid 1px;
box-sizing:border-box;
}
body.home #main .about p {
font-size:14px;
}
body.home #main .about p.notes {
margin-top:10px;
}
body.home #main .about p strong {
font-size:14px;
font-weight:500;
}
body.home #main .about p span {
color:rgb(0,0,0,0.7);
font-size:13px;
}
body.home #main .about p code {
color:rgb(0,0,0,0.7);
font-size:13px;
}
body.home #main .about ul li {
margin:5px 0px 5px 20px;
list-style:disc;
}
body.home #main .about ul li strong {
display:block;
font-size:14px;
font-weight:500;
}
body.home #main .about ul li span {
display:block;
color:rgb(0,0,0,0.4);
font-size:13px;
}

/*　staticpage　*/
/* -----------------------------------------------*/
body.static {
/*background-color:rgb(34,31,32,1.0);*/
background-color:rgb(255,255,255,1.0);
}
body.static #main {
width:100%;
}
body.static #main .inner {
margin:0px auto;
width:90%;
position:relative;
}
body.static #main .inner .head {
padding:50px 0px;
background-color:rgb(255,255,255,1.0);
position:sticky;
top:0px;
left:0px;
z-index:4;
}
body.static #main .copy {
margin-bottom:10px;
/*color:rgb(255,255,255,0.7);*/
color:rgb(0,0,0,0.5);
font-size:14px;
font-weight:600;
letter-spacing:6px;
}
body.static #main .sitename {
margin:0px auto;
width:80%;
max-width:310px;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
aspect-ratio:60 / 11;
background:url(../images/logo.png) center center no-repeat;
background-size:100% 100%; 
}
body.static #main .pagetitle {
margin-top:30px;
color:rgb(0,0,0,1.0);
font-size:20px;
font-weight:600;
letter-spacing:0px;
}
body.static .textcontents {
margin:0px auto;
/*padding-bottom:50px;*/
width:100%;
max-width:700px;
text-align:left;
}
body.static .textcontents p {
margin:5px 0px;
font-size:14px;
}
body.static .textcontents p strong {
margin:20px 0px;
display:inline-block;
font-size:15px;
font-weight:500;
}
body.static .textcontents p.title {
margin:20px 0px;
font-size:18px;
font-weight:500;
}
body.static .textcontents ul li {
margin:5px 0px;
font-size:14px;
}
body.static .textcontents ul.number li {
margin-left:30px;
list-style:decimal;
}
body.static .textcontents ul.number li ul.number li {
list-style:disc;
}
body.static .textcontents ul.number li strong {
font-weight:400;
text-decoration:underline;
}
body.static #main .about {
margin:0px auto;
width:80%;
max-width:650px;
text-align:left;
box-sizing:border-box;
}
body.static #main .about p {
font-size:14px;
}
body.static #main .outline p {
margin:15px 0px;
position:relative;
}
body.static #main .outline p strong {
display:block;
font-size:14px;
font-weight:500;
line-height:1.5;
position:absolute;
top:0px;
left:0px;
}
body.static #main .outline p span {
padding-left:150px;
display:block;
font-size:14px;
line-height:1.5;
}

/*　login　*/
/* -----------------------------------------------*/
div.login_inner {
margin:0px auto;
width:80%;
max-width:400px;
height:100vh;
display:table;
box-sizing:border-box;
}
div.login_inner .loginset {
width:100%;
display:table-cell;
text-align:center;
vertical-align:middle;
}
.loginset .input_set {
margin-top:10px;
}
.loginset .input_set label {
padding:0px 5px;
display:inline-block;
color:rgb(0,0,0,0.7);
font-size:14px;
font-weight:bold;
transform:translateY(-5px);
/*background-color:rgba(248,249,253,1.0);
background-color:rgba(252,250,246,1.0);*/
position:relative;
z-index:2;
}
.loginset .input_set input[type="text"],
.loginset .input_set input[type="password"],
.loginset .input_set input[type="email"] {
padding:0px 30px;
width:100%;
height:60px;
font-family:"IBM Plex Sans JP", sans-serif;
font-size:18px;
font-weight:500;
letter-spacing:0px;
border:rgb(72,149,37,0.3) solid 1px;
box-sizing:border-box;
background-color:rgba(72,149,37,0.1);
border-radius:30px;
}
.loginset .input_set input[type="text"]:focus,
.loginset .input_set input[type="password"]:focus,
.loginset .input_set input[type="email"]:focus {
background-color:rgba(72,149,37,0.05);
}
.loginset .input_set ul {
margin-top:10px;
}
.loginset .input_set ul li {
color:rgba(209,0,3,1.00);
font-size:13px;
font-weight:500;
letter-spacing:0px;
}
.loginset .rememberme {
margin-top:10px;
}
.loginset .rememberme input[type="checkbox"] {
appearance:auto;
transform:translateY(1px);
}
.loginset .rememberme span {
display:inline-block;
font-size:13px;
font-weight:500;
letter-spacing:0px;
}
.loginset .passwordrequest {
margin-top:20px;
}
.loginset .passwordrequest a {
display:inline-block;
font-size:13px;
font-weight:500;
letter-spacing:0px;
}
.loginset .submit {
margin-top:20px;
}
.loginset .submit a,
.loginset .submit input[type="submit"],
.loginset .submit button {
margin-top:30px;
padding:0px 20px;
width:100%;
height:60px;
display:table;
font-family:"IBM Plex Sans JP", sans-serif;
color:#ffffff;
font-size:15px;
font-weight:600;
line-height:60px;
text-align:center;
text-decoration:none;
cursor:pointer;
border:none;
/*background-color:rgba(72,149,37,1.0);*/
background-image:linear-gradient(90deg, rgba(72,148,37,1) 57%, rgba(183,184,0,1));
border-radius:30px;
}
.loginset .message {
margin:20px 0px;
color:rgba(0,0,0,0.5);
font-size:13px;
font-weight:500;
letter-spacing:0px;
}
.loginset .snslogin {
margin-top:30px;
}
.loginset .snslogin a {
padding:0px 20px;
width:100%;
height:60px;
display:block;
font-family:"IBM Plex Sans JP", sans-serif;
font-size:15px;
font-weight:600;
line-height:60px;
text-align:center;
text-decoration:none;
text-indent:30px;
cursor:pointer;
box-sizing:border-box;
border:rgb(0,0,0,0.1) solid 1px;
border-radius:30px;
}
.loginset .snslogin .google a {
background:rgba(0,0,0,0.03) url(../images/logo_google.png) 30px 50% no-repeat;
background-size:24px 24px;
}

/*　form　*/
/* -----------------------------------------------*/
.commonform input[type="text"],
.commonform input[type="password"],
.commonform input[type="email"],
.commonform input[type="date"] {
margin:5px 0px;
padding:7px 10px;
width:100%;
font-family:"IBM Plex Sans JP", sans-serif;
font-size:14px;
font-weight:500;
letter-spacing:0px;
border:rgb(72,149,37,0.3) solid 1px;
box-sizing:border-box;
background-color:rgba(72,149,37,0.1);
border-radius:5px;
}
.commonform input[type="text"]:focus,
.commonform input[type="password"]:focus,
.commonform input[type="email"]:focus,
.commonform input[type="date"]:focus {
border:rgb(0,200,255,0.3) solid 1px;
background-color:rgba(72,149,37,0.05);
}
.commonform textarea {
margin:5px 0px;
padding:7px 10px;
width:100%;
height:100px;
font-family:"IBM Plex Sans JP", sans-serif;
font-size:13px;
letter-spacing:0px;
border:rgb(72,149,37,0.3) solid 1px;
box-sizing:border-box;
background-color:rgba(72,149,37,0.1);
border-radius:5px;
resize:none;
}
.commonform textarea:focus {
border:rgb(72,149,37,0.3) solid 1px;
background-color:rgba(72,149,37,0.05);
}
.commonform button {
padding:0px 15px;
height:40px;
display:inline-block;
font-family:"IBM Plex Sans JP", sans-serif;
color:#ffffff;
font-size:clamp(13px, 1.2vw, 16px);
font-weight:600;
line-height:40px;
text-align:center;
text-decoration:none;
cursor:pointer;
box-sizing:border-box;
border:none;
/*background-color:rgba(0,200,255,1.0);*/
background-color:rgba(0,0,0,1.0);
border-radius:5px;
}
.commonform.category input[type="text"] {
padding:10px 10px;
font-size:15px;
border:rgb(0,0,0,0.3) solid 1px;
background-color:rgba(0,0,0,0.1);
}
.commonform.category input[type="text"]:focus {
border:rgb(0,0,0,0.3) solid 1px;
background-color:rgba(0,0,0,0.05);
}
/*
.commonform button.add {
width:100%;
display:block;
}
*/
.commonform button.save {
height:30px;
font-size:14px;
line-height:30px;
}
.commonform button.cancel-edit {
height:30px;
font-size:14px;
line-height:30px;
}
.commonform .ai_check {
margin-bottom:5px;
user-select:none;
}
.commonform .ai_check label {
cursor:pointer;
}
.commonform .ai_check input[type="checkbox"],
.commonform .ai_check input[type="radio"] {
margin:0;
width:0;
opacity:0;
}
.commonform .ai_check strong {
width:14px;
height:14px;
display:inline-block;
box-sizing:border-box;
border:rgb(0,0,0,0) solid 1.5px;
background-color:rgb(0,0,0,0.2);
border-radius:2px;
position:relative;
transform:translateY(2px);
}
.commonform .ai_check span {
margin-left:5px;
display:inline-block;
color:rgb(0,0,0,0.3);
font-size:14px;
font-weight:500;
}
.commonform .ai_check input[type="checkbox"] + strong::before {
margin-top:-5px;
margin-left:-2px;
content:"";
display:none;
position:absolute;
top:50%;
left:50%;
width:5px;
height:3px;
border-radius:2px;
transform:translate(-2px, 5px) rotateZ(-135deg);
transform-origin:2px 2px;
background-color:#f1f1f1;
}
.commonform .ai_check input[type="checkbox"] + strong::after {
margin-top:-4px;
content:"";
display:none;
position:absolute;
top:50%;
left:50%;
width:10px;
height:3px;
border-radius:2px;
transform:translate(-2px, 5px) rotateZ(-50deg);
transform-origin:2px 2px;
background-color:#f1f1f1;
}
.commonform .ai_check input[type="checkbox"]:checked + strong {
border:none;
background-color:rgb(0,0,0,1.0);
}
.commonform .ai_check input[type="checkbox"]:checked + strong + span {
color:rgb(0,0,0,1.0);
}
.commonform .ai_check input[type="checkbox"]:checked + strong::before {
display:block;
background:rgb(255,255,255,1.0);
}
.commonform .ai_check input[type="checkbox"]:checked + strong::after {
display:block;
background:rgb(255,255,255,1.0);
}

/*　category　*/
/* -----------------------------------------------*/
.categorylist.space {
margin-bottom:10px;
}
.categorylist ul li {
margin-top:10px;
overflow:hidden;
box-sizing:border-box;
border:rgb(72,149,37,0.5) solid 1px;
background-color:rgba(72,149,37,0.15);
border-radius:5px;
position:relative;
}
.categorylist ul li p {
width:90%;
width:-webkit-calc(100% - 160px);
width:calc(100% - 160px);
}
.categorylist ul li p .img {
margin:5px 0px 5px 5px;
width:40px;
height:40px;
display:inline-block;
overflow:hidden;
vertical-align:middle;
background-color:rgba(72,149,37,0.5);
border-radius:50%;
}
.categorylist ul li p .img img {
width:100%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
}
.categorylist ul li p a {
display:flex;
gap:0px 10px;
overflow:hidden;
font-size:15px;
font-weight:600;
line-height:1.3;
text-decoration:none;
box-sizing:border-box;
}
.categorylist ul li p a .title {
margin-top:16px;
margin-bottom:10px;
width:80%;
width:-webkit-calc(100% - 110px);
width:calc(100% - 110px);
display:block;
font-size:15px;
font-weight:600;
line-height:1.3;
}
.categorylist ul li p a .title i {
margin-left:5px;
padding:0px 3px;
display:inline-block;
font-size:13px;
font-weight:500;
font-style:normal;
line-height:1.3;
border:rgb(0,0,0,0.5) solid 1px;
box-sizing:border-box;
background-color:rgba(0,0,0,0.05);
border-radius:3px;
}
.categorylist ul li p a .status {
margin-top:8px;
width:40px;
display:inline-block;
font-size:12px;
font-weight:500;
line-height:1.3;
text-align:center;
vertical-align:middle;
}
.categorylist ul li p a .status i {
display:block;
font-size:13px;
font-weight:600;
font-style:normal;
line-height:1.3;
border:rgb(0,0,0,1.0) solid 1px;
box-sizing:border-box;
background-color:rgba(255,246,0,1.0);
border-radius:3px;
}
.categorylist ul li input[type="text"] {
margin:5px 5px;
padding:5px 7px;
width:80%;
width:-webkit-calc(100% - 250px);
width:calc(100% - 250px);
font-family:"IBM Plex Sans JP", sans-serif;
font-size:14px;
font-weight:500;
letter-spacing:0px;
border:rgb(0,0,0,0.3) solid 1px;
box-sizing:border-box;
background-color:rgba(255,255,255,1.0);
border-radius:5px;
}
.categorylist ul li input[type="file"] {
margin:0px 5px 5px 5px;
font-family:"IBM Plex Sans JP", sans-serif;
font-size:13px;
font-weight:400;
letter-spacing:0px;
}
.categorylist ul li .edit-category {
padding:0px 20px;
height:30px;
display:inline-block;
font-family:"IBM Plex Sans JP", sans-serif;
color:rgba(255,255,255,1.0);
font-size:14px;
font-weight:600;
line-height:30px;
text-align:center;
text-decoration:none;
cursor:pointer;
border:none;
background-color:rgba(72,149,37,1.0);
border-radius:15px;
position:absolute;
top:10px;
right:85px;
}
.categorylist ul li .delete-category-form {
position:absolute;
top:10px;
right:10px;
}
.categorylist ul li .delete-category {
padding:0px 20px;
height:30px;
display:inline-block;
font-family:"IBM Plex Sans JP", sans-serif;
color:#ffffff;
font-size:14px;
font-weight:600;
line-height:30px;
text-align:center;
text-decoration:none;
cursor:pointer;
border:none;
background-color:rgba(72,149,37,0.5);
border-radius:15px;
}
.categorylist ul li .save {
padding:0px 20px;
height:30px;
display:inline-block;
font-family:"IBM Plex Sans JP", sans-serif;
color:rgba(255,255,255,1.0);
font-size:13px;
font-weight:600;
line-height:30px;
text-align:center;
text-decoration:none;
cursor:pointer;
border:none;
background-color:rgba(0,0,0,1.0);
border-radius:15px;
position:absolute;
top:8px;
right:120px;
}
.categorylist ul li .cancel-edit {
padding:0px 20px;
height:30px;
display:inline-block;
font-family:"IBM Plex Sans JP", sans-serif;
color:rgba(255,255,255,1.0);
font-size:13px;
font-weight:600;
line-height:30px;
text-align:center;
text-decoration:none;
cursor:pointer;
border:none;
background-color:rgba(0,0,0,0.6);
border-radius:15px;
position:absolute;
top:8px;
right:10px;
}
.categorylist ul li.none {
border:none;
background:none;
border-radius:0px;
}
.categorylist ul li.none p {
font-size:14px;
font-weight:500;
}

/*　task　*/
/* -----------------------------------------------*/
.taskform {
padding-top:5px;
padding-bottom:10px;
}
.taskform.category {
padding-bottom:0px;
}
.taskform.category form {
width:100%;
display:flex;
align-items:center;
gap:0% 5%;
justify-content:space-between;
}
.taskform.category .category_name {
width:40%;
display:inline-block;
}
.taskform.category .category_icon {
width:40%;
display:inline-block;
}
.taskform .google_sync {
margin-bottom:5px;
width:100%;
}
.taskform .google_sync label {
font-size:13px;
font-weight:500;
}
.taskform .google_sync label input[type="checkbox"] {
display:inline;
vertical-align:middle;
transform:translateY(-2px);
}
.file-upload-input {
display:none;
}
.file-upload-wrapper {
margin:5px 0px;
display:block;
position:relative;
}
.file-upload-label {
display:block;
padding:10px 20px;
cursor:pointer;
background-color:rgba(0,0,0,0.05);
border-radius:5px;
}
.file-upload-label strong {
margin-right:10px;
display:inline-block;
color:rgba(0,0,0,1.0);
font-size:15px;
font-weight:500;
line-height:1.5;
}
#file-name {
display:inline-block;
font-size:13px;
line-height:1.5;
}
.categorylist ul li .file-upload-wrapper {
margin:0px 5px 5px 5px;
width:80%;
width:-webkit-calc(100% - 250px);
width:calc(100% - 250px);
}
.categorylist ul li .file-upload-label {
padding:7px 15px;
background-color:rgba(255,255,255,0.5);
}
.categorylist ul li .file-upload-label strong {
font-size:14px;
}
.categorylist ul li .file-upload-label span {
font-size:12px;
}
.taskform.category .category_add {
width:10%;
min-width:70px;
display:inline-block;
text-align:right;
}
#task-list {
padding-top:2px;
}
#task-list li {
position:relative;
}
.shared_readonly {
margin-top:10px;
}
.taskcheck {
margin:5px 0px;
padding:10px 15px;
width:100%;
min-height:50px;
display:flex;
font-family:"IBM Plex Sans JP", sans-serif;
font-size:15px;
font-weight:500;
letter-spacing:0px;
box-sizing:border-box;
background-color:rgba(72,149,37,1.0);
border-radius:5px;
cursor:pointer;
}
.taskcheck .title {
width:80%;
width:-webkit-calc(100% - 180px);
width:calc(100% - 180px);
display:inline-block;
}
.taskcheck .title strong {
color:rgba(255,246,0,1.0);
font-size:16px;
font-weight:600;
letter-spacing:0px;
line-height:1.3;
}
.taskcheck .title span {
color:rgba(255,246,0,0.7);
font-size:13px;
font-weight:500;
letter-spacing:0px;
line-height:1.3;
}
.taskcheck .title.end strong {
color:rgba(255,255,255,0.7);
text-decoration:line-through;
}
.taskcheck .title.end span {
color:rgba(255,255,255,0.7);
}
.taskcheck.readonly {
min-height:40px;
border:rgb(72,149,37,0.5) solid 1px;
background-color:rgba(72,149,37,0.15);
cursor:default;
}
.taskcheck.readonly .title {
line-height:1.3;
}
.taskcheck.readonly .title strong {
color:rgba(0,0,0,1.0);
}
.taskcheck.readonly .title span {
color:rgba(0,0,0,0.7);
}
.taskcheck.readonly .title.end strong {
color:rgba(0,0,0,0.3);
}
.taskcheck.readonly .title.end span {
color:rgba(0,0,0,0.3);
}
.taskcheck .check {
width:28px;
display:inline-block;
}
.taskcheck .check input[type="checkbox"],
.taskcheck .check input[type="radio"] {
margin:0;
width:0;
opacity:0;
}
.taskcheck .check strong {
margin-left:-16px;
margin-top:2px;
width:20px;
height:20px;
display:inline-block;
box-sizing:border-box;
position:relative;
}
.taskcheck.readonly .check strong {
margin-left:-3px;
margin-top:1px;
background:url(../images/check_ro_.svg) center center no-repeat;
background-size:100% 100%;
opacity:0.5;
}
.taskcheck.readonly .check.end strong {
background:url(../images/check_ro.svg) center center no-repeat;
background-size:100% 100%;
opacity:0.7;
}
.taskcheck .check input[type="checkbox"] + strong::before {
content:"";
display:block;
position:absolute;
top:0px;
left:0px;
width:20px;
height:20px;
background:url(../images/check_.svg) center center no-repeat;
background-size:100% 100%;
opacity:0.5;
}
.taskcheck .check input[type="checkbox"] + strong::after {
content:"";
display:none;
position:absolute;
top:0px;
left:0px;
width:20px;
height:20px;
background:url(../images/check.svg) center center no-repeat;
background-size:100% 100%;
}
.taskcheck .check input[type="checkbox"]:checked + strong::before {
display:none;
}
.taskcheck .check input[type="checkbox"]:checked + strong::after {
display:block;
}
.taskedit {
letter-spacing:-.4em;
position:absolute;
top:10px;
right:10px;
}
.taskedit .edit-task-link {
padding:0px 20px;
height:30px;
display:inline-block;
font-family:"IBM Plex Sans JP", sans-serif;
color:rgba(72,149,37,1.0);
font-size:14px;
font-weight:600;
line-height:30px;
text-align:center;
text-decoration:none;
cursor:pointer;
border:none;
background-color:rgba(255,255,255,1.0);
border-radius:15px;
}
.taskedit .task-delete-form {
margin-left:5px;
padding:0px 20px;
height:30px;
display:inline-block;
font-family:"IBM Plex Sans JP", sans-serif;
color:#ffffff;
font-size:14px;
font-weight:600;
line-height:30px;
text-align:center;
text-decoration:none;
cursor:pointer;
border:none;
background-color:rgba(255,255,255,0.2);
border-radius:15px;
}
.tasknote {
margin:10px 0px;
padding-left:50px;
color:rgba(0,0,0,0.5);
font-size:14px;
line-height:1.5;
box-sizing:border-box;
}
.tasknote p {
color:rgba(72,149,37,1.0);
font-size:14px;
font-weight:500;
line-height:1.5;
}
.taskai {
margin:15px 0px;
padding-left:100px;
color:rgba(0,0,0,0.5);
font-size:13px;
line-height:1.5;
box-sizing:border-box;
position:relative;
}
.taskai p {
color:rgba(0,0,0,0.5);
font-size:13px;
line-height:1.5;
}
.taskai p strong {
width:24px;
height:24px;
display:inline-block;
color:rgba(255,255,255,1.0);
font-size:10px;
font-weight:600;
line-height:24px;
text-align:center;
letter-spacing:0px;
box-sizing:border-box;
background-color:rgba(0,0,0,0.5);
border-radius:12px;
position:absolute;
top:0px;
left:60px;
}
.taskshare .title {
padding:7px 10px;
color:rgba(0,0,0,0.8);
font-size:14px;
font-weight:600;
line-height:1.5;
box-sizing:border-box;
background-color:rgba(0,0,0,0.08);
}
.taskshare ul li {
padding-top:10px;
width:100%;
min-height:30px;
position:relative;
}
.taskshare ul li:last-child {
padding-bottom:10px;
}
.taskshare ul li form.share-edit-form {
width:90%;
width:-webkit-calc(100% - 160px);
width:calc(100% - 160px);
display:flex;
justify-content:space-between;
}
.taskshare ul li form.share-edit-form p {
display:inline-block;
}
.taskshare ul li form.share-edit-form p.name {
padding-top:5px;
width:30%;
color:rgba(0,0,0,1.0);
font-size:14px;
font-weight:500;
line-height:1.5;
}
.taskshare ul li form.share-edit-form p.name strong {
display:inline-block;
font-size:14px;
font-weight:600;
line-height:1.5;
}
.taskshare ul li form.share-edit-form p.name span {
margin-left:5px;
padding:0px 5px;
display:inline-block;
color:rgba(0,0,0,0.5);
font-size:13px;
font-weight:500;
line-height:1.5;
box-sizing:border-box;
background-color:rgba(0,0,0,0.08);
border-radius:3px;
}
.taskshare ul li form.share-edit-form p.email {
padding-top:5px;
width:40%;
color:rgba(0,0,0,0.7);
font-size:12px;
font-weight:500;
line-height:1.5;
}
.taskshare ul li form.share-edit-form select {
padding:5px 10px;
width:30%;
color:rgba(0,0,0,0.7);
font-size:12px;
font-weight:500;
line-height:1.5;
box-sizing:border-box;
border:rgb(0,0,0,0.1) solid 1px;
background-color:rgba(0,0,0,0.05);
border-radius:3px;
}
.taskshare ul li form.share-edit-form .edit {
padding:0px 20px;
height:24px;
display:inline-block;
font-family:"IBM Plex Sans JP", sans-serif;
color:rgba(255,255,255,1.0);
font-size:13px;
font-weight:500;
line-height:24px;
text-align:center;
text-decoration:none;
cursor:pointer;
border:none;
background-color:rgba(0,0,0,0.6);
border-radius:12px;
position:absolute;
top:12px;
right:80px;
}
.taskshare ul li form.share-delete-form {
display:inline-block;
position:absolute;
top:10px;
right:10px;
}
.taskshare ul li form.share-delete-form .delete {
padding:0px 20px;
width:100%;
height:24px;
display:inline-block;
font-family:"IBM Plex Sans JP", sans-serif;
color:rgba(255,255,255,1.0);
font-size:13px;
font-weight:500;
line-height:24px;
text-align:center;
text-decoration:none;
cursor:pointer;
border:none;
background-color:rgba(222,0,0,1.0);
border-radius:12px;
}
.taskshare ul li .status {
width:10%;
display:inline-block;
}
.taskshare .group {
padding:10px 0px;
width:100%;
min-height:30px;
display:flex;
justify-content:space-between;
}
.taskshare .group {
width:100%;
position:relative;
}
.taskshare .group .inner {
width:90%;
width:-webkit-calc(100% - 160px);
width:calc(100% - 160px);
display:flex;
justify-content:space-between;
}
.taskshare .group label {
width:70%;
color:rgba(0,0,0,1.0);
font-size:14px;
font-weight:500;
line-height:1.5;
}
.taskshare .group select {
padding:5px 10px;
width:30%;
color:rgba(0,0,0,0.7);
font-size:12px;
font-weight:500;
line-height:1.5;
box-sizing:border-box;
border:rgb(0,0,0,0.1) solid 1px;
background-color:rgba(0,0,0,0.05);
border-radius:3px;
}
.taskshare .group .add {
padding:0px 20px;
height:24px;
display:inline-block;
font-family:"IBM Plex Sans JP", sans-serif;
color:rgba(255,255,255,1.0);
font-size:13px;
font-weight:500;
line-height:24px;
text-align:center;
text-decoration:none;
cursor:pointer;
border:none;
background-color:rgba(0,0,0,0.6);
border-radius:12px;
position:absolute;
top:12px;
right:80px;
}
.taskshare .group #scan-qr-btn {
padding:0px 15px 0px 35px;
height:24px;
display:inline-block;
font-family:"IBM Plex Sans JP", sans-serif;
color:rgba(255,255,255,1.0);
font-size:13px;
font-weight:500;
line-height:24px;
text-align:center;
text-decoration:none;
cursor:pointer;
border:none;
background:rgba(0,0,0,0.6) url(../images/icon_qr.svg) 15px 50% no-repeat;
background-size:14px 14px;
border-radius:12px;
position:absolute;
top:12px;
right:0px;
}
.taskshare .share-user-row {
padding:5px 0px;
width:90%;
min-height:30px;
width:-webkit-calc(100% - 160px);
width:calc(100% - 160px);
display:flex;
justify-content:space-between;
position:relative;
}
.taskshare .share-user-row input[type="text"] {
padding:3px 10px;
width:69%;
display:inline-block;
font-family:"IBM Plex Sans JP", sans-serif;
font-size:13px;
box-sizing:border-box;
}
.taskshare .share-user-row select {
padding:5px 10px;
width:30%;
min-width:120px;
color:rgba(0,0,0,0.7);
font-size:12px;
font-weight:500;
line-height:1.5;
box-sizing:border-box;
border:rgb(0,0,0,0.1) solid 1px;
background-color:rgba(0,0,0,0.05);
border-radius:3px;
}
.taskshare .share-user-row .remove-button {
padding:0px 20px;
height:24px;
display:inline-block;
font-family:"IBM Plex Sans JP", sans-serif;
color:rgba(255,255,255,1.0);
font-size:13px;
font-weight:500;
line-height:24px;
text-align:center;
text-decoration:none;
cursor:pointer;
border:none;
background-color:rgba(222,0,0,1.0);
border-radius:12px;
position:absolute;
top:7px;
right:-150px;
}
.taskshare .addform {
margin-top:5px;
width:100%;
display:flex;
gap:10px 10px;
letter-spacing:-.4em;
}
.taskshare .addform.leftright {
justify-content:space-between;
}
.taskshare .addform .add {
padding:0px 20px;
height:24px;
display:inline-block;
font-family:"IBM Plex Sans JP", sans-serif;
color:rgba(255,255,255,1.0);
font-size:13px;
font-weight:500;
line-height:24px;
text-align:center;
text-decoration:none;
letter-spacing:0px;
cursor:pointer;
border:none;
background-color:rgba(0,0,0,0.6);
border-radius:3px;
}
.taskshare .addform .send {
padding:0px 20px;
height:24px;
display:inline-block;
font-family:"IBM Plex Sans JP", sans-serif;
color:rgba(255,255,255,1.0);
font-size:13px;
font-weight:500;
line-height:24px;
text-align:center;
text-decoration:none;
letter-spacing:0px;
cursor:pointer;
border:none;
background-color:rgba(0,0,0,1.0);
border-radius:3px;
}

.groupcreate {
margin:0px auto;
padding-top:5px;
width:100%;
/*max-width:600px;*/
}
.groupcreate .title {
padding:7px 10px;
color:rgba(0,0,0,0.8);
font-size:14px;
font-weight:600;
line-height:1.5;
box-sizing:border-box;
background-color:rgba(0,0,0,0.08);
}
.groupcreate .groupset {
width:100%;
}
.groupcreate .intitle {
font-size:14px;
font-weight:600;
line-height:1.5;
}
.groupcreate input[type="text"] {
padding:3px 10px;
width:100%;
font-family:"IBM Plex Sans JP", sans-serif;
font-size:13px;
box-sizing:border-box;
}
.groupcreate input[type="text"].edit {
width:90%;
width:-webkit-calc(100% - 100px);
width:calc(100% - 100px);
}
.groupcreate .member-row {
margin-bottom:5px;
width:100%;
position:relative;
}
.groupcreate .member-row .delete {
padding:0px 20px;
height:24px;
display:inline-block;
font-family:"IBM Plex Sans JP", sans-serif;
color:rgba(255,255,255,1.0);
font-size:13px;
font-weight:500;
line-height:24px;
text-align:center;
text-decoration:none;
cursor:pointer;
border:none;
background-color:rgba(222,0,0,1.0);
border-radius:12px;
position:absolute;
top:5px;
right:0px;
}
.groupform .addform {
margin-top:10px;
width:100%;
display:flex;
gap:10px 10px;
letter-spacing:-.4em;
}
.groupform .addform.leftright {
justify-content:space-between;
}
.groupform .addform .add {
padding:0px 20px;
height:24px;
display:inline-block;
font-family:"IBM Plex Sans JP", sans-serif;
color:rgba(255,255,255,1.0);
font-size:13px;
font-weight:500;
line-height:24px;
text-align:center;
text-decoration:none;
letter-spacing:0px;
cursor:pointer;
border:none;
background-color:rgba(0,0,0,0.6);
border-radius:3px;
}
.groupform .addform .create,
.groupform .addform .edit {
padding:0px 20px;
height:24px;
display:inline-block;
font-family:"IBM Plex Sans JP", sans-serif;
color:rgba(255,255,255,1.0);
font-size:13px;
font-weight:500;
line-height:24px;
text-align:center;
text-decoration:none;
letter-spacing:0px;
cursor:pointer;
border:none;
background-color:rgba(0,0,0,1.0);
border-radius:3px;
}
.groupform .addform .back {
padding:0px 20px;
height:24px;
display:inline-block;
font-family:"IBM Plex Sans JP", sans-serif;
color:rgba(0,0,0,0.8);
font-size:13px;
font-weight:500;
line-height:24px;
text-align:center;
text-decoration:none;
letter-spacing:0px;
cursor:pointer;
border:none;
background-color:rgba(0,0,0,0.07);
border-radius:3px;
}
.grouplist {
margin-top:10px;
}
.grouplist .title {
padding:7px 10px;
color:rgba(255,255,255,1.0);
font-size:14px;
font-weight:600;
line-height:1.5;
box-sizing:border-box;
background-color:rgba(0,0,0,1.0);
}
.grouplist .groupblock {
margin-top:10px;
padding:10px 10px;
box-sizing:border-box;
background-color:rgba(0,0,0,0.05);
border-radius:5px;
position:relative;
}
.grouplist .groupblock .inner {
width:90%;
width:-webkit-calc(100% - 160px);
width:calc(100% - 160px);
}
.grouplist .groupblock .name {
margin-bottom:10px;
padding-bottom:5px;
font-size:14px;
font-weight:600;
line-height:1.5;
box-sizing:border-box;
border-bottom:rgba(0,0,0,0.1) solid 1px;
}
.grouplist .groupblock ul li {
width:100%;
position:relative;
}
.grouplist .groupblock ul li p strong {
color:rgba(0,0,0,1.0);
font-size:14px;
font-weight:600;
line-height:1.5;
}
.grouplist .groupblock ul li p span {
color:rgba(0,0,0,0.5);
font-size:12px;
font-weight:500;
line-height:1.5;
}
.grouplist .groupblock .control {
position:absolute;
top:10px;
right:10px;
}
.grouplist .groupblock .control .edit {
padding:0px 20px;
height:24px;
display:inline-block;
font-family:"IBM Plex Sans JP", sans-serif;
color:rgba(255,255,255,1.0);
font-size:13px;
font-weight:500;
line-height:24px;
text-align:center;
text-decoration:none;
cursor:pointer;
border:none;
background-color:rgba(0,0,0,0.6);
border-radius:12px;
}
.grouplist .groupblock .control form {
display:inline-block;
}
.grouplist .groupblock .control .delete {
padding:0px 20px;
width:100%;
height:24px;
display:inline-block;
font-family:"IBM Plex Sans JP", sans-serif;
color:rgba(255,255,255,1.0);
font-size:13px;
font-weight:500;
line-height:24px;
text-align:center;
text-decoration:none;
cursor:pointer;
border:none;
background-color:rgba(222,0,0,1.0);
border-radius:12px;
}
.grouplist .none {
margin-top:10px;
font-size:14px;
font-weight:500;
}

/*　pageheader　*/
/* -----------------------------------------------*/
.headfix {
margin-bottom:5px;
width:95vw;
width:-webkit-calc(100vw - 20px);
width:calc(100vw - 20px);
box-sizing:border-box;
border-bottom:rgba(0,0,0,0.1) solid 1px;
background-color:#f2f2f2;
transform:translateX(-10px);
position:sticky;
top:0px;
z-index:4;
}
.headfix.space {
margin-top:10px;
}
.headfix .img {
margin:5px 0px 5px 5px;
width:40px;
height:40px;
display:inline-block;
overflow:hidden;
vertical-align:top;
background-color:rgba(72,149,37,0.5);
border-radius:50%;
}
.headfix .img img {
width:100%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
}
.headfix .title {
margin-top:5px;
padding:10px 10px;
display:inline-block;
font-size:15px;
font-weight:600;
line-height:1.5;
vertical-align:top;
box-sizing:border-box;
}
.headfix .img + .title {
width:90%;
width:-webkit-calc(100% - 70px);
width:calc(100% - 70px);
}

body.page main {
margin-top:90px;
padding-left:10px;
padding-right:10px;
width:100%;
/*height:calc(var(--vh, 1vh) * 100 - 100px);*/
box-sizing:border-box;
position:relative;
/*z-index:2;*/
}

body.page main .maincontents {
padding:0px 10px 10px 10px;
width:100%;
height:calc(var(--vh, 1vh) * 100 - 160px);
overflow-y:auto;
overflow-x:hidden;
box-sizing:border-box;
box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);
border-radius:10px;
}

div.container {
margin:0px auto;
width:80%;
max-width:600px;
font-family:"IBM Plex Sans JP", sans-serif;
font-weight:500;
font-style:normal;
}

.footer {
margin-top:50px;
margin-bottom:50px;
width:100%;
/*height:70px;*/
text-align:center;
/*position:fixed;
bottom:0px;
left:0px;
z-index:5;*/
}
.footer p {
margin:0px 10px;
display:inline-block;
}
.footer p a {
color:rgba(0,0,0,0.5);
font-size:14px;
font-weight:500;
line-height:1.5;
}

.result {
margin:10px 0px;
}
.result .success {
color:rgba(72,148,37,1.0);
font-size:15px;
font-weight:500;
}
.result .error {
color:rgba(222,0,0,1.0);
font-size:15px;
font-weight:500;
}

@media screen and (max-width:700px) {
}

@media screen and (max-width:650px) {

input, textarea, select {
font-size:16px !important ;
}

/*　category　*/
/* -----------------------------------------------*/
/*.categorylist.owner ul li {
padding-bottom:40px;
}*/
.categorylist.owner ul li p a {
padding-bottom:40px;
}
.categorylist ul li p {
width:100%;
width:-webkit-calc(100%);
width:calc(100%);
}
.categorylist ul li .edit-category {
top:inherit;
bottom:10px;
}
.categorylist ul li .delete-category-form {
top:inherit;
bottom:10px;
}
.categorylist ul li .save {
top:inherit;
bottom:8px;
}
.categorylist ul li .cancel-edit {
top:inherit;
bottom:8px;
}
/*　task　*/
/* -----------------------------------------------*/
.file-upload-label strong {
margin-right:0px;
display:block;
}
#file-name {
display:block;
font-size:12px;
}
.taskshare .group label {
width:50%;
}
.taskshare .group select {
width:50%;
}

/*　login　*/
/* -----------------------------------------------*/
div.login_inner {
height:calc(var(--vh, 1vh) * 100);
}

/*　home　*/
/* -----------------------------------------------*/
body.home #main {
height:calc(var(--vh, 1vh) * 100);
}

}

@media screen and (max-width:500px) {

/*　home　*/
/* -----------------------------------------------*/
body.home #main .about {
padding:25px 25px;
}

/*　setting　*/
/* -----------------------------------------------*/
.setting p a span {
text-indent:18px;
}
.setting p a span:before {
margin-top:-1px;
height:30%;
}

/*　category　*/
/* -----------------------------------------------*/
.categorylist ul li input[type="text"] {
width:95%;
width:-webkit-calc(100% - 10px);
width:calc(100% - 10px);
}
.categorylist ul li input[type="file"] {
font-size:13px !important ;
}
.categorylist ul li .file-upload-wrapper {
width:95%;
width:-webkit-calc(100% - 10px);
width:calc(100% - 10px);
}
/*　task　*/
/* -----------------------------------------------*/
.taskform.category form {
flex-wrap:wrap;
position:relative;
}
.taskform.category .category_name {
width:80%;
width:-webkit-calc(100% - 80px);
width:calc(100% - 80px);
display:block;
}
.taskform.category .category_icon {
width:80%;
width:-webkit-calc(100% - 80px);
width:calc(100% - 80px);
display:block;
}
.taskform.category .category_add {
position:absolute;
top:50%;
right:0px;
transform:translateY(-50%);
}
.taskcheck {
flex-wrap:wrap;
}
.taskcheck .title {
margin-top:5px;
width:100%;
width:-webkit-calc(100%);
width:calc(100%);
display:block;
}
.taskcheck .title span {
display:block;
}
.taskshare .group .inner {
flex-wrap:wrap;
}
.taskshare .group label {
width:100%;
display:block;
}
.taskshare .group select {
margin-top:5px;
width:100%;
display:block;
}
.taskshare .share-user-row {
flex-wrap:wrap;
}
.taskshare .share-user-row input[type="text"] {
width:100%;
display:block;
}
.taskshare .share-user-row select {
margin-top:5px;
width:100%;
display:block;
}
.taskshare ul li form.share-edit-form {
flex-wrap:wrap;
}
.taskshare ul li form.share-edit-form p.name {
width:50%;
}
.taskshare ul li form.share-edit-form p.email {
width:50%;
}
.taskshare ul li form.share-edit-form select {
margin-top:5px;
width:100%;
display:block;
}
.tasknote {
padding-left:0px;
}
.taskai {
padding-left:50px;
}
.taskai p strong {
left:10px;
}

.grouplist .groupblock .inner {
width:100%;
width:-webkit-calc(100%);
width:calc(100%);
}
.grouplist .groupblock .name {
width:80%;
width:-webkit-calc(100% - 160px);
width:calc(100% - 160px);
}
}



.scroll-container {
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  position: relative;
  height: 3em;
  background: #f5f5f5;
}

.scroll-word {
  display: inline-block;
  margin-right: 2em;
  animation-name: scroll-left;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: normal;
  cursor: pointer;
  color: #333;
  font-weight: bold;
}

@keyframes scroll-left {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

#ai-overlay {
display:none;
position:fixed;
top:0;
left:0;
width:100vw;
height:calc(var(--vh, 1vh) * 100);
background:rgba(0,0,0,0.8);
z-index:9999;
}
#ai-overlay .inner {
width:100%;
height:100%;
display:table;
}
#ai-overlay .inner p {
display:table-cell;
color:rgba(255,255,255,1.0);
font-size:15px;
font-weight:600;
line-height:1.5;
text-align:center;
vertical-align:middle;
}

.calendar-color-options {
margin-top:15px;
display:flex;
gap:8px;
}
.calendar-color-label {
position:relative;
display:inline-block;
cursor:pointer;
}
.calendar-color-input-hidden {
position:absolute;
opacity:0;
pointer-events:none;
width:0;
height:0;
}
.calendar-color-circle {
width:28px;
height:28px;
border-radius:50%;
border:2px solid transparent;
display:inline-block;
transition:all 0.2s ease;
}
.calendar-color-label.selected .calendar-color-circle {
border:4px solid #ffffff;
box-shadow:0 0 0 2px rgba(0,0,0,0.5);
}

body.page #qr-modal {
width:100vw;
height:calc(var(--vh, 1vh) * 100);
background:rgba(0,0,0,0.8);
position:fixed;
top:0px;
left:0px;
z-index:9999;
display:none;
}
body.page #qr-modal .inner {
width:100%;
height:100%;
display:table;
}
body.page #qr-modal .inner .block {
width:100%;
display:table-cell;
text-align:center;
vertical-align:middle;
}
body.page #qr-modal .inner .block #qr-code-output {
display:inline-block;
text-align:center;
}
#qr-modal .inner .block #qr-code-output canvas {
display:inline-block;
}

body.page .modal {
width:100vw;
height:calc(var(--vh, 1vh) * 100);
background:rgba(0,0,0,0.8);
position:fixed;
top:0px;
left:0px;
z-index:9999;
display:none;
}
body.page .modal-inner {
margin:10% auto 0% auto;
width:80%;
max-width:400px;
height:80%;
display:table;
padding:20px;
border-radius:10px;
box-sizing:border-box;
/*box-shadow:0 0 15px rgba(0,0,0,0.3);
background:rgba(255,255,255,1.0);*/
position:relative;
text-align:center;
}
body.page .modal-inner .block {
width:100%;
display:table-cell;
text-align:center;
vertical-align:middle;
}
body.page .modal-inner button {
margin-top:15px;
}


@media screen and (max-width:500px) {
.calendar-color-options {
flex-wrap: wrap;
}
}


/*　user uniq layout　*/
/* -----------------------------------------------*/
body.menu_above .headnav {
top:10px;
}
body.menu_under .headnav {
top:inherit;
bottom:10px;
}
body.menu_above .setting {
bottom:10px;
}
body.menu_under .setting {
bottom:inherit;
top:10px;
}
body.page.menu_above main {
margin-top:90px;
}
body.page.menu_under main {
margin-top:70px;
}