@media only screen and (max-width: 768px) {
    input[type="submit"],
    input[type="text"],
    select,
    button,
    input[type="email"],
    input[type="password"],
    input[type="date"],
    input[type="tel"],
    input[type="time"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        -webkit-text-size-adjust: 100%;
    }
}

p.logout {
    margin: 10px 10px 0 0;
}

p.logout a {
    color: #fff;
}

td textarea {
    height: 100px;
}

@media only screen and (max-width: 768px) {
    p.logout {
        margin: 7px 10px 0 0;
    }
}

.mt25 {
    margin-top: 25px !important;
}

body {
    color: #323232;
    margin: 0;
}

.all-hidden {
    overflow: hidden;
}

body.top {
    background: url(../img/back.png) #f1f2f5;
}

html {
    min-height: 100%;
}

.no {
    display: none;
}

:placeholder-shown {
    color: #999;
}

::-webkit-input-placeholder {
    color: #999;
}

:-moz-placeholder {
    color: #999;
    opacity: 1;
}

::-moz-placeholder {
    color: #999;
    opacity: 1;
}

:-ms-input-placeholder {
    color: #999;
}

ul.license-list {
    overflow: hidden;
    clear: both;
}

ul.license-list li {
    float: left;
    width: 25%;
    margin-bottom: 10px;
}

@media only screen and (max-width: 1400px) {
    ul.license-list li {
        width: 33.3%;
    }
}

@media only screen and (max-width: 768px) {
    ul.license-list li {
        width: auto;
        float: none;
    }
}

.short {
    width: 100px !important;
}

.long {
    min-width: 300px !important;
    text-align: left !important;
}

@media only screen and (max-width: 768px) {
    .short {
        width: auto !important;
    }
}

select.year,
select.month,
select.days {
    width: 20%;
    margin-right: 10px;
}

select.age,
select.call {
    width: 33%;
    margin-right: 10px;
}

select.age:nth-child(2),
select.call:nth-child(2) {
    margin-left: 10px;
}

/*===========================================================================================*/
/*===============================================================================*/
h1.logo-top {
    text-align: center;
    margin: 20px 0;
}

h1.logo-top img {
    max-width: 100%;
}

h1.logo {
    width: 230px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 15;
    padding: 20px 0 0 0;
    box-sizing: border-box;
    margin: 0;
    text-align: center;
    background: #053358;
}

h1.logo img {
    width: 30%;
}

#leftside {
    background: #053358;
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    width: 230px;
    position: fixed;
    left: 0;
    top: 0;
    box-shadow: 0 0 30px #ccc;
    z-index: 10;
}

@media only screen and (max-width: 768px) {
    #leftside {
        display: none;
        height: auto;
        min-height: auto;
        margin: 0;
        padding: 0;
        width: 100%;
        height: calc(100vh - 54px);
        left: 0;
        top: 54px;
        box-shadow: none;
        z-index: 9999999;
        overflow-y: scroll;
    }

    h1.logo {
        width: 51px;
        position: fixed;
        left: 50px;
        top: 10px;
        z-index: 9999;
        padding: 5px 5px 1px 5px;
    }

    h1.logo img {
        width: 100%;
    }

    a#btn span {
        width: 18px;
        height: 2px;
        display: block;
        position: relative;
        background: #fff;
        top: 11px;
        left: 4px;
    }

    a#btn span:before {
        content: "";
        display: block;
        position: absolute;
        top: -7px;
        background: #fff;
        width: 18px;
        height: 2px;
        transition: all 0.3s ease-in-out;
    }

    a#btn span:after {
        content: "";
        display: block;
        position: absolute;
        top: 7px;
        background: #fff;
        width: 18px;
        height: 2px;
        transition: all 0.3s ease-in-out;
    }

    a#btn span.change {
        height: 0;
    }

    a#btn span.change:before {
        transform: rotate(-45deg);
        top: 0;
    }

    a#btn span.change:after {
        transform: rotate(45deg);
        top: 0;
    }

    a#btn {
        margin: 0;
        padding: 0;
        cursor: pointer;
        width: 46px;
        height: 46px;
        padding: 5px 10px;
        box-sizing: border-box;
        border-radius: 7px;
        z-index: 9999;
        position: fixed;
        top: 8px;
        left: 2px;
        text-align: center;
    }
}

#rightside {
    width: 100%;
    padding-left: 230px;
    box-sizing: border-box;
}

p.back span {
    padding: 10px 30px;
    border: 1px solid #999;
    border-radius: 50px;
}

p.back img {
    width: 12px;
}

@media only screen and (max-width: 768px) {
    #rightside {
        padding-left: 0;
        padding-bottom: 50px;
    }

    p.back {
        display: block;
    }

    .acc {
        display: none;
    }
}

.centre {
    text-align: center;
}

ul.first {
    margin: 20px auto;
}

ul.first li a {
    display: block;
    margin: 0 0 5px 0;
    transition: all 0.2s ease-in-out;
}

ul.first li span {
    text-decoration: underline;
    color: #f27e95;
}

ul.first li a:hover {
    opacity: 0.7;
}

input[type="text"],
input[type="password"],
input[type="time"],
input[type="number"] {
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    border: none;
    border-radius: 10px;
    padding: 7px;
    box-sizing: border-box;
    border: 1px solid #ddd;
}

#login input[type="checkbox"] + label {
    font-size: 13px;
}

#login input[type="submit"]:hover {
    background: #fff;
    color: #f27e95;
}

.nav {
    margin: 80px 0 0 0;
    padding: 0;
}

/*メニュー*/
#dropmenu {
    list-style-type: none;
    width: 100%;
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#dropmenu li {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0;
    padding: 0;
}

#dropmenu li a {
    display: block;
    margin: 0;
    padding: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    color: #fff;
}

#dropmenu li a:after {
    content: ">";
    display: inline-block;
    transform: scale(0.8, 1);
    font-size: 80%;
    margin: 2px 0 0 0;
    opacity: 0.7;
    position: absolute;
    right: 16px;
}

#dropmenu li button:after {
    content: "";
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAANhJREFUSEvtldERgjAQRHc70U6kFCrRTqQT6USsZJ2bSWaSGEgC4vhB/iCbe9zd5iB2Xtw5PpoAkmQfRLL6XLXQAh+AYr+PEplLLgDuAE5hvbwt0xL550A7AehJjv5dZFNJDwAGiVYDwM5NJM9zgMWLVGpybj/N4PcASVcAtxkPDyR7v7c6A0nPtPEARpJdCN4CMFeZAby7okZuzsANuhDShVb8CsBBrB8vkkOuJ6tLVBxSTvAXgOxNrs3A6SJ3pRfNxoTV+WNcVEKWZ1FlkCZZ0z+5KbITvwGDJasZMaUYCgAAAABJRU5ErkJggg==)
        no-repeat;
    background-size: 100%;
    width: 20px;
    height: 20px;
    display: block;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

#dropmenu li ul {
    list-style: none;
    position: absolute;
    z-index: 100;
    top: 0;
    left: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.w-w1 {
    width: 190% !important;
}

#dropmenu li ul li ul li {
    width: 100%;
}

.w-w2 {
    width: 140% !important;
}

#dropmenu li ul li a,
#dropmenu li ul li button {
    padding: 15px 15px;
    background: #f49e96;
    text-align: left;
    color: #fff;
}

#dropmenu li ul li:first-child button {
    border-radius: 0 5px 0 0;
}

#dropmenu li ul li button {
    width: 100%;
    border: none;
    display: block;
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    color: #fff;
}

#dropmenu li ul li:first-child a {
    border-radius: 0 5px 0 0;
}

#dropmenu li ul li:last-child a {
    border-radius: 0 0 5px 0;
}

@media only screen and (max-width: 768px) {
    #dropmenu li ul li:first-child a {
        border-radius: 0;
    }

    #dropmenu li ul li:last-child a {
        border-radius: 0;
    }
}

#dropmenu > li:hover > a,
#dropmenu > li:hover > div {
    background: #f49e96;
    color: #fff;
}

#dropmenu > li:hover li:hover > a {
    background: #e93d2c;
    color: #eee;
}

#dropmenu li ul li {
    overflow: hidden;
    width: 100%;
    height: 0;
    color: #fff;
    transition: 0.2s;
}

#dropmenu > li:hover > ul > li {
    overflow: visible;
    height: 45px;
    white-space: nowrap;
}

#dropmenu li ul li ul {
    top: 0;
    left: 100%;
}

#dropmenu li .en {
    font-size: 85% !important;
}

@media only screen and (max-width: 736px) {
    #dropmenu li p:after {
        display: none;
    }

    .nav {
        margin: 0;
    }

    #dropmenu li ul li {
        width: 100%;
        height: 45px;
    }

    #dropmenu li ul,
    #dropmenu li ul li ul {
        position: static !important;
        display: none;
    }

    #dropmenu > li:hover > ul > li {
        height: 45px;
        overflow: inherit;
    }

    #dropmenu li ul li a {
        padding: 15px 15px 15px 30px;
        background: #fff;
        font-size: 13px;
        color: #222;
    }

    #dropmenu li:not(:last-child) a:after {
        transform: rotate(90deg) scale(0.8, 1);
    }

    #dropmenu li:first-child a.on:after {
        transform: rotate(-90deg) scale(0.8, 1);
    }

    #dropmenu li:first-child ul li a:after {
        transform: rotate(0deg) scale(0.8, 1);
    }

    #dropmenu li:nth-child(5) a:after {
        transform: rotate(90deg) scale(0.8, 1);
    }

    #dropmenu li:nth-child(5) a.on:after {
        transform: rotate(-90deg) scale(0.8, 1);
    }

    #dropmenu li:nth-child(5) ul li a:after {
        transform: rotate(0deg) scale(0.8, 1);
    }
}

#dropmenu li ul li ul:before {
    position: absolute;
    content: ">";
    top: 7px;
    left: -20px;
    color: #f39700;
    font-size: 12px;
    display: inline-block;
    transform: scale(0.8, 1);
}

#dropmenu li ul li:hover > ul > li {
    overflow: visible;
    height: 32px;
}

@media only screen and (max-width: 736px) {
    #dropmenu li span:before {
        position: absolute;
        content: ">";
        color: #f39700;
        font-size: 12px;
        display: inline-block;
        top: 15px;
        right: 20px;
        transform: scale(1.2, 1) rotate(90deg);
    }

    #dropmenu li span.acc:before {
        transform: scale(1.2, 1) rotate(-90deg);
    }

    #dropmenu li ul li ul:before {
        display: none;
    }

    #dropmenu li:nth-child(1) ul li span:before,
    #dropmenu li:nth-child(3) ul li span:before,
    #dropmenu li:nth-child(5) ul li span:before,
    #dropmenu li:nth-child(6) ul li span:before {
        display: none;
    }
}

#dropmenu li ul li ul li a {
    background: #f0edea;
}

#dropmenu li:hover ul li ul li a:hover {
    background: #f7941e;
    color: #fff;
}

@media only screen and (max-width: 736px) {
    #dropmenu li ul li ul li a {
        background: rgba(247, 148, 30, 0.1);
    }
}

.navi-wrap {
    background: rgba(1, 48, 114, 0.9);
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
    height: 100vh;
    position: fixed;
    top: 54px;
    display: none;
    padding: 25px 0 0 0;
    z-index: 9999;
}

.navi-wrap a {
    display: block;
    font-size: 15px;
    padding: 10px 10px;
    color: #fff;
}

.navi-wrap a:hover {
    background: rgba(255, 255, 255, 0.2);
}

@media only screen and (max-width: 768px) {
    .navi-wrap {
        width: 60%;
        top: 43px !important;
    }

    .navi-wrap a {
        font-size: 13px;
    }
}

.source {
    margin: 0;
    padding: 30px 0 0;
}

.acc .menu {
    color: #fff;
    padding: 0 10px;
}

.acc .menu:hover {
    background: rgba(255, 255, 255, 0.2);
    text-decoration: none;
    cursor: pointer;
}

#r-head {
    background: #9bd8f6;
    width: calc(100% - 230px);
    padding: 0;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    z-index: 10;
}

@media only screen and (max-width: 736px) {
    #r-head {
        width: 100%;
    }
}

#r-head input[type="search"] {
    font-size: 14px;
    padding: 5px;
    box-sizing: border-box;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

#r-head input[type="submit"] {
    border: none;
    background: url(../img/icon_scope.png) no-repeat center 50%
        rgba(255, 255, 255, 0.2);
    background-size: 15px;
    padding: 3px 20px;
    position: relative;
    top: 6px;
}

#r-head input[type="search"]::-webkit-input-placeholder {
    color: #fff;
}

#r-head input[type="search"]:-ms-input-placeholder {
    color: #fff;
}

#r-head input[type="search"]::-moz-placeholder {
    color: #fff;
}

#r-head input[type="search"]::-placeholder {
    color: #fff;
}

#r-head-left {
    float: left;
}

#r-head-right {
    float: right;
    margin-right: 0;
}

p.bk {
    float: left !important;
    margin-left: 50px;
}

p.bk a {
    color: #fff;
    font-size: 14px;
    transition: all 0.3s ease-in-out;
}

p.bk a:hover {
    opacity: 0.7;
}

p.bk a:before {
    content: "<";
    margin: 0 10px 0 0;
}

#r-head-right ul {
    display: flex;
}

#r-head-right ul li {
    margin: 0 30px 0 0;
    position: relative;
}

#r-head-right ul li p {
    margin: 15px 0 0 0;
    font-size: 12px;
    color: #fff;
    opacity: 0.7;
}

#r-head-right ul li input.logout {
    color: #fff;
    font-size: 13px;
}

@media only screen and (max-width: 768px) {
    #r-head-right ul li input.logout {
        font-size: 12px;
    }

    #r-head-right ul li {
        margin-right: 0;
    }

    #r-head-right ul li:first-child {
        display: none;
    }

    p.bk {
        display: none;
    }

    #r-head {
        padding: 3px 5px 15px 10px;
        background: #053358;
        position: fixed;
        top: 0;
        left: 0;
    }

    #r-head-right {
        margin-right: 0;
    }

    #r-head-right ul li {
        margin-left: 15px;
        font-size: 12px;
    }
}

#r-head-right ul li .bell span {
    position: absolute;
    background: #f27e95;
    font-size: 9px;
    color: #fff;
    border-radius: 50%;
    right: -5px;
    top: -5px;
    width: 15px;
    height: 15px;
    line-height: 15px;
    vertical-align: middle;
    text-align: center;
}

#r-head-right ul li .bell {
    cursor: pointer;
}

.bell-content {
    display: none;
    position: absolute;
    top: 40px;
    right: 200px;
    background: #fff;
    padding: 15px;
    box-shadow: 0 0 20px #ddd;
    border-radius: 10px;
}

.welcom-member span {
    margin-left: 10px;
    letter-spacing: 2;
}

.welcom-member {
    font-size: 13px;
    color: #fff;
}

@media only screen and (max-width: 768px) {
    .bell-content {
        right: 15px;
        z-index: 999999 !important;
        top: 50px;
    }

    .welcom-member {
        font-size: 11px;
    }
}

.bell-content ul li {
    padding: 5px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #eee;
}

.bell-content h2 {
    font-size: 15px !important;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.bell-content p {
    font-size: 13px;
}

.bell-content ul li:last-child {
    border: none;
}

.bell-content ul li dt {
    font-size: 11px;
    color: #666;
}

#r-head-right ul li .welcom-member {
    margin-left: 0;
    padding-top: 2px;
}

#r-head-right ul li img {
    height: 20px;
}

#r-head-right input {
    border: none;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAS9JREFUSEvNVcGNAjEM9HRyVMJRCVDJQSVAJXCVHJ3MaVY28i5kc4lY6SKt9pHYE8/YE9jCCwvnt/8BQPLDzLZm9unf3czi+wZwLjExW0FKfKhQeQBwfHWmCODJf1KQQHTbm++pqrWZBbgq2ms/A9Uq+HJKFKgET8vBTkEdgNWfAVo6jOTVQc4A9hE7R9EpH6yBTSjdBFVPALlkAE1tTFKUSpOH6KMEJNWGKnVYHQARfwOwGXJEMpI7M5NYTStfItF0D7EzQJTXDaBAkszVTylSb4si/XsoChYenVQSeQDp0GBe5KTH4D2l8Z8ZuJj8cps2CZAONw+aCxYWoBu91yq85UJwJZclv93s4h2o2fXIf5rNzidc1jx9cGTNlxJ9o0nuFbcW12RmtWSv9hcH+AUTaZgZnbWY2wAAAABJRU5ErkJggg==")
        no-repeat left 90%;
    background-size: 20px;
    padding: 15px 20px 3px 30px;
    cursor: pointer;
}

#wrapper {
    margin: 30px;
}

#r-content {
    padding: 30px;
    margin: 20px 0 40px 0;
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0 0 30px #eee;
    border-radius: 10px;
    min-height: 90vh;
}

#r-content:before,
#r-content:after {
    content: "";
    display: block;
    overflow: hidden;
    clear: both;
}

@media only screen and (max-width: 768px) {
    #r-content {
        padding: 15px 15px 30px 15px;
        margin-top: 65px;
        margin-bottom: 25px;
    }

    #wrapper {
        margin: 15px;
    }

    .bell-content h2 {
        font-size: 13px;
    }

    .bell-content ul li dd {
        font-size: 13px;
    }
}

#r-content h2.title {
    font-size: 18px;
    margin: 0 20px 10px 0;
    border-left: 3px solid #e83f30;
    color: #333;
    padding-left: 10px;
    letter-spacing: 1px;
}

#r-content h2.title.middle {
    font-size: 110%;
}

@media only screen and (max-width: 768px) {
    #r-content h2.title.middle {
        font-size: 90%;
    }

    #r-content h2.title {
        margin-bottom: 10px;
    }
}

#r-content h2.title + p {
    margin-bottom: 20px;
    font-size: 14px;
}

#r-content h2.title2 {
    font-size: 18px;
    margin: 0;
    color: #161e20;
    letter-spacing: 1px;
}

/*===============================ドロワーメニュー=======================================*/
p.other-btn {
    position: fixed;
    right: 30px;
    top: 13px;
    z-index: 99999 !important;
    cursor: pointer;
}

@media only screen and (max-width: 768px) {
    #r-content h2.title + p {
        font-size: 11px;
    }

    #r-content h2.title {
        font-size: 16px;
    }

    p.other-btn {
        right: 10px;
        top: 10px;
    }
}

p.other-btn img {
    height: 20px;
}

.peke {
    background-position: -35px 0;
}

.drawr {
    display: none;
    background-color: rgba(255, 255, 255, 1);
    position: absolute;
    top: 0;
    right: 0;
    width: 220px;
    padding: 60px 0 20px 0;
    z-index: 100;
    box-shadow: 0 0 30px #ddd;
    text-align: left;
}

#menu,
#menu li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    z-index: 9999;
}

#menu li {
    width: 200px;
}

#menu li a {
    color: #343434;
    display: block;
    padding: 10px 0;
}

/*===============================SUBMIT=======================================*/
p.ok a,
input[type="submit"].ok,
button.ok {
    background: #e83f30;
    border: none;
    padding: 15px 100px;
    border-radius: 50px;
    color: #fff;
    letter-spacing: 2px;
    margin: 20px 0 0 0;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 2px 0 #c4332c;
}

@media only screen and (max-width: 768px) {
    p.ok a,
    input[type="submit"].ok,
    button.ok {
        padding: 15px 30px;
    }
}

input[type="reset"] {
    border: none;
    color: #666;
    background: #eee;
    padding: 15px 50px;
    border-radius: 50px;
    letter-spacing: 2px;
    margin: 20px 0 0 0;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 2px 0 #ccc;
}

input[type="button"].back {
    border: 2px solid #e83f30;
    padding: 12px 100px;
    border-radius: 50px;
    color: #e83f30;
    letter-spacing: 2px;
    margin: 20px 0 0 0;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    background: #fff;
}

.decide {
    background: #666;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 3px 10px;
}

.edit {
    border: 2px solid #698bb4;
    background: none;
    padding: 12px 50px;
    border-radius: 7px;
    color: #698bb4;
    letter-spacing: 2px;
    margin: 0;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    margin-right: 20px;
}

ul.list-radio li {
    float: left;
}

p.ok a:hover,
input[type="submit"].ok:hover {
    opacity: 0.7;
}

p.ok a:after {
    content: "↓";
    margin: 0 0 0 10px;
}

@media only screen and (max-width: 768px) {
    ul.list-radio li {
        float: none;
    }

    ul.list-radio li:first-child {
        margin-bottom: 7px;
    }

    input[type="submit"].ok,
    .edit,
    p.ok a {
        padding: 10px 50px;
    }

    input[type="button"].back {
        padding: 15px 20px;
    }
}

/*===============================================================================*/
ul.thename {
    overflow: hidden;
    clear: both;
    margin: 0 0 25px 0;
}

ul.thename li {
    float: left;
    margin-right: 20px;
}

ul.thename li:last-child {
    margin-right: 0;
}

ul.thename li:nth-child(1) {
    padding: 7px 0 0 0;
}

@media only screen and (max-width: 768px) {
    ul.thename li {
        float: none;
        margin-right: 10px;
        margin-bottom: 10px;
        font-size: 13px;
    }

    ul.thename.two li:not(:first-child) {
        float: left !important;
    }

    ul.thename li select {
        width: 100%;
    }
}

select {
    padding: 7px;
    border: 1px solid #ddd;
    border-radius: 7px;
    background: #fff;
    font-weight: 500;
    width: 100%;
    box-sizing: border-box;
    font-size: 15px;
}

/* オリジナルボタン */
.original_btn {
    border: 1px solid #ddd;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
    color: #666;
    background: linear-gradient(to bottom, #fff 0, #f4f4f4 100%);
    box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.09);
}

/* 未選択時のアイコン */
.icon {
    font-size: 12px;
    margin: 0 10px 0 15px;
    padding: 3px 30px;
    border-radius: 15px;
    background: #666;
    color: #fff;
    display: inline-block;
}

/* 選択時のアイコン */
.icon.select {
    background: #ff5050;
    color: #fff;
}

/* ファイル名 */
.filename {
    display: inline-block;
    font-size: 12px;
}

textarea {
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 7px;
    background: #fff;
    font-weight: 500;
    width: 100%;
    box-sizing: border-box;
    margin: 5px 0 0 0;
}

table.table {
    width: 100%;
    background: #fff;
}

table.table2 {
    width: 100%;
    background: #fff;
    margin: auto 0;
}

table.table thead th {
    background: #f7f7f7;
    padding: 10px;
    border: 1px solid #eee;
    color: #666;
    font-size: 14px;
}

table.table td {
    padding: 10px;
    border: 1px solid #eee;
    font-size: 14px;
    vertical-align: middle;
}

table.table td small.inp {
    font-size: 70%;
    display: block;
    line-height: 2;
    margin-left: 30px;
}

tbody tr.table-row:hover td {
    background: rgba(98, 13, 53, 0.1);
    cursor: pointer;
}

tbody tr.catable:hover td:not(:first-child) {
    background: rgba(98, 13, 53, 0.1);
    cursor: pointer;
}

table.table th {
    padding: 10px;
    border: 1px solid #eee;
    font-size: 14px;
    vertical-align: middle;
    width: 200px;
    background: #f7f7f7;
}

table.table th span {
    color: #e83f30;
    font-size: 12px;
    float: right;
}

.w80 {
    width: 80px !important;
}

.w110 {
    width: 110px !important;
}

.w140 {
    width: 140px !important;
}

table.table td h3 {
    margin-bottom: 5px;
}

table.table td h3:not(:first-child) {
    margin-top: 10px;
}

.left-box {
    float: left;
    width: 48%;
}

.right-box {
    float: right;
    width: 48%;
}

@media only screen and (max-width: 768px) {
    .left-box,
    .right-box {
        float: none;
        width: auto;
    }

    select,
    textarea {
        font-size: 13px;
    }

    table {
        width: 100%;
    }

    table.table th,
    table.table td {
        display: block;
        padding: 5px 0;
        width: auto;
        font-size: 13px;
        box-sizing: border-box;
    }

    table.table td {
        padding-top: 0;
    }

    .scroll table.table th,
    .scroll table.table td {
        white-space: nowrap;
    }

    .scroll {
        overflow: auto;
        white-space: nowrap;
        margin-right: -15px !important;
    }

    .scroll td.number {
        min-width: 50px !important;
    }

    .scroll::-webkit-scrollbar {
        /*tableにスクロールバーを追加*/
        height: 5px;
    }

    .scroll::-webkit-scrollbar-track {
        /*tableにスクロールバーを追加*/
        background: #f1f1f1;
    }

    table.table th,
    table.table td {
        font-size: 13px;
        border: none;
    }

    table.table th {
        padding: 5px;
    }

    table.table td {
        padding-top: 10px;
        padding-bottom: 15px;
    }

    ul.t-btn li {
        float: none;
    }

    ul.t-btn li:nth-child(1) a {
        font-size: 12px;
        width: 100%;
        display: block;
        margin-bottom: 10px;
        background-image: none;
        padding: 5px 10px;
        text-align: center;
    }

    ul.t-btn li:nth-child(2) input {
        font-size: 12px;
        background-image: none;
        padding: 5px 10px;
    }

    ul.t-btn li:nth-child(2) input.on {
        background-image: none;
    }

    ul.t-btn li:nth-child(1) {
        margin: 0;
    }
}

.btn-wrap {
    margin: 25px 0 0 0;
}

.btn-wrap ul {
    overflow: hidden;
    clear: both;
    padding-bottom: 20px;
}

.btn-wrap ul li {
    float: left;
    font-size: 15px;
}

.btn-wrap ul li h2 {
    margin: 5px 20px 0 0 !important;
    border-right: 1px solid #ccc;
    padding-right: 20px;
}

@media only screen and (max-width: 768px) {
    .btn-wrap ul li h2 {
        margin: 0 0 10px 0 !important;
        border-right: none;
    }

    .btn-wrap ul {
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        z-index: 9999;
        flex-wrap: inherit;
        display: flex;
    }

    .btn-wrap ul li h2 {
        position: absolute;
    }

    .btn-wrap ul li:not(:first-child) {
        flex: 0 40%;
        margin-right: 0;
        margin-top: 30px;
        width: auto;
        font-size: 12px;
        white-space: nowrap;
    }
}

.btn-wrap ul li a {
    transition: all 0.3s ease-in-out;
}

.btn-wrap ul li a:hover {
    opacity: 0.7;
}

.type {
    position: relative;
    top: 10px;
    margin-right: 30px !important;
}

@media only screen and (max-width: 768px) {
    .type {
        margin-right: 0 !important;
    }
}

.btn-wrap ul li a.active {
    background: rgba(98, 13, 53, 0.5);
    color: #fff;
    padding: 7px 30px;
    display: block;
    margin-right: 30px;
    text-align: center;
    position: static;
    pointer-events: none;
}

@media only screen and (max-width: 768px) {
    .btn-wrap ul li a.active {
        text-align: left;
    }
}

ul.topnews {
    margin: 0;
}

ul.topnews li {
    clear: both;
    overflow: hidden;
    margin-bottom: 15px;
    font-size: 14px;
}

ul.topnews li a {
    display: block;
}

ul.topnews li:last-child {
    margin-bottom: 0;
}

ul.topnews li dl {
    overflow: hidden;
    clear: both;
}

ul.topnews li dl dt {
    clear: left;
    float: left;
    width: 10%;
    color: #999;
    width: 100px;
}

ul.topnews li dl dd {
    margin: 0 0 0 0;
    width: auto;
}

@media only screen and (max-width: 768px) {
    ul.topnews li dl dt {
        clear: both;
        float: none;
        width: auto;
    }

    ul.topnews li dl dd {
        margin: 0;
        float: none;
        width: auto;
    }

    ul.topnews li {
        font-size: 13px;
    }
}

textarea.textbox {
    width: 100%;
    padding: 10px;
    height: 100px;
    margin: 0 0 10px 0;
    border-radius: 7px;
}

.write {
    margin: 0 0 30px 0;
    color: #620d35;
    border: 2px solid #620d35;
    padding: 7px 10px 7px 40px;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    background: url(../img/icon-write.png) no-repeat 10px 50%;
    background-size: 20px auto;
    font-size: 16px;
}

.write:hover {
    opacity: 0.7;
}

@media only screen and (max-width: 768px) {
    textarea.textbox {
        font-size: 13px;
        margin: 0 0 5px 0;
    }

    .write {
        font-size: 13px;
    }
}

ul.chatlist li {
    margin-bottom: 10px;
}

ul.chatlist li a {
    background: #f7f7f7;
    display: block;
    padding: 20px;
    overflow: hidden;
    clear: both;
    transition: all 0.3s ease-in-out;
}

ul.chatlist li a:hover {
    opacity: 0.7;
}

ul.chatlist li div {
    float: left;
}

ul.chatlist li div.notread {
    background: #8c3969;
    color: #fff;
    width: 80px;
    text-align: center;
    margin-right: 2%;
    font-size: 14px;
}

.chatname {
    position: absolute;
    margin-left: 100px;
    color: #333;
}

ul.chatlist li div.notread + .chatname {
    margin-left: 100px;
}

ul.chatlist li div.date {
    float: right;
    color: #666;
    font-size: 14px;
}

@media only screen and (max-width: 768px) {
    ul.chatlist li a {
        padding: 10px 10px 10px 10px;
    }

    ul.chatlist li div.notread {
        font-size: 11px;
        width: 20%;
        padding: 3px 0;
    }

    .chatname {
        position: static;
        margin-left: 24%;
        font-size: 13px;
        width: 54%;
    }

    ul.chatlist li div.notread + .chatname {
        margin-left: 2%;
    }

    ul.chatlist li div.date {
        font-size: 10px;
    }
}

.line-bc {
    padding: 20px 10px;
    margin: 15px auto;
    text-align: right;
    font-size: 14px;
    background: #f7f7f7;
}

/*以下、②左側のコメント*/
.balloon {
    width: 100%;
    margin: 10px 0;
    overflow: hidden;
}

.balloon .faceicon {
    float: left;
    margin-right: -50px;
    width: 40px;
}

.balloon .faceicon img {
    width: 70%;
    height: auto;
    border-radius: 50%;
}

.balloon .chatting {
    width: 100%;
    text-align: left;
}

.says {
    display: inline-block;
    position: relative;
    margin: 0 0 0 50px;
    padding: 10px;
    max-width: 70%;
    border-radius: 12px;
    background: #fff;
}

.says:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 3px;
    left: -19px;
    border: 8px solid transparent;
    border-right: 18px solid #fff;
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
}

.says p {
    margin: 0;
    padding: 0;
}

/*以下、③右側の緑コメント*/
.mycomment {
    margin: 10px 0;
}

.mycomment p {
    display: inline-block;
    position: relative;
    margin: 0 10px 0 0;
    padding: 8px;
    max-width: 70%;
    border-radius: 12px;
    background: #eadde3;
    font-size: 15px;
}

.mycomment p:after {
    content: "";
    position: absolute;
    top: 3px;
    right: -19px;
    border: 8px solid transparent;
    border-left: 18px solid #eadde3;
    -webkit-transform: rotate(-35deg);
    transform: rotate(-35deg);
}

.comment {
    width: 100%;
    box-sizing: border-box;
    margin: 10px 0 0 0;
    position: fixed;
    bottom: 10px;
    padding-right: 270px;
}

.comment ul li:nth-child(1) {
    float: left;
    width: 87%;
}

.comment ul li:nth-child(2) {
    float: left;
    width: 12%;
    margin-left: 1%;
}

.comment textarea {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 7px;
    font-size: 15px;
    max-height: 100px;
    height: 35px;
    box-shadow: 0 0 20px #ccc;
    border: none;
    border: 1px solid #ccc;
}

.comment input[type="submit"] {
    background: #e83f30;
    border: none;
    color: #fff;
    width: 100%;
    padding: 7px 0;
    letter-spacing: 2px;
    border-radius: 7px;
}

@media only screen and (max-width: 768px) {
    .comment {
        padding-right: 60px;
        bottom: 0;
    }

    .comment textarea {
        font-size: 13px;
    }

    .comment input[type="submit"] {
        font-size: 13px;
        letter-spacing: 1px;
    }
}

.cancer-size ul.cancer-size-list {
    clear: both;
    overflow: hidden;
}

.cancer-size ul.cancer-size-list li {
    float: left;
    margin-right: 20px;
}

.cancer-size ul.cancer-size-list li:nth-child(1) {
    margin-top: 5px;
}

.cancer-size ul.cancer-size-list li:nth-child(2) {
    margin-right: 40px;
}

.cancer-size ul.cancer-size-list li:nth-child(3):after {
    content: "×";
    margin-left: 20px;
}

.cancer-size ul.cancer-size-list li input[type="text"] {
    width: 100px;
    border: 1px solid #ccc;
    margin-right: 10px;
    font-size: 15px;
    box-sizing: border-box;
    padding: 5px;
}

@media only screen and (max-width: 768px) {
    .cancer-size ul.cancer-size-list li {
        margin-right: 10px;
    }

    .cancer-size ul.cancer-size-list li:nth-child(3) {
        clear: both;
        margin-left: 0;
    }

    .cancer-size ul.cancer-size-list li input[type="text"] {
        margin-right: 5px;
        width: 80px;
    }

    .cancer-size ul.cancer-size-list li:nth-child(3):after {
        content: "×";
        margin-left: 10px;
    }
}

.mb {
    margin-bottom: 25px;
}

.mb2 {
    margin-bottom: 15px;
}

ul.coil-list {
    margin-top: 7px;
    overflow: hidden;
    clear: both;
}

ul.coil-list li {
    margin-right: 15px;
    float: left;
}

input[type="radio"],
input[type="checkbox"] {
    display: none;
    /* checkboxを非表示にする */
}

input[type="checkbox"].block {
    display: block;
    margin: 0 auto;
}

ul.coil-list li label,
.check label {
    position: relative;
    /* ボックスの位置を指定する */
    padding: 0 0 0 25px;
    /* ボックス内側の余白を指定する */
}

ul.coil-list li label:hover:after,
.check label:hover:after {
    border-color: #e83f30;
    /* ボックスの境界線を実線で指定する */
}

ul.coil-list li label:after,
ul.coil-list li label:before,
.check label:after,
.check label:before {
    position: absolute;
    /* ボックスの位置を指定する */
    content: "";
    /* ボックスのコンテンツ */
    display: block;
    /* ブロックレベル要素化する */
    top: 50%;
    /* 上部から配置の基準位置を決める */
}

ul.coil-list li label:after,
.check label:after {
    left: 0;
    /* 左から配置の基準位置を決める */
    margin-top: -10px;
    /* チェック枠の位置 */
    width: 15px;
    /* ボックスの横幅を指定する */
    height: 15px;
    /* ボックスの高さを指定する */
    border: 2px solid #ccc;
    /* ボックスの境界線を実線で指定する */
    border-radius: 6px;
    /* ボックスの角丸を指定する */
}

ul.coil-list li label:before,
.check label:before {
    left: 5px;
    /* 左から配置の基準位置を決める */
    margin-top: -5px;
    /* チェックマークの位置 */
    width: 4px;
    /* ボックスの横幅を指定する */
    height: 4px;
    /* ボックスの高さを指定する */
    border-right: 5px solid #e83f30;
    /* 境界線（右）のスタイルを指定する */
    border-bottom: 5px solid #e83f30;
    /* 境界線（下）のスタイルを指定する */
    opacity: 0;
    /* 要素を透過指定する */
    border-radius: 3px;
}

input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
    opacity: 1;
    /* 要素を表示する */
}

@media only screen and (max-width: 768px) {
    ul.coil-list li label {
        font-size: 14px;
    }
}

p.coil {
    margin: 20px 0 0 0;
}

p.coil a {
    margin: 0;
    color: #620d35;
    border: 2px solid #620d35;
    padding: 7px 10px;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
    font-size: 16px;
}

p.coil a:hover {
    color: #620d35;
}

.cancer-size-list2 li {
    float: left;
    margin-right: 40px;
}

.cancer-size-list2 li:nth-child(2) {
    margin: 19px 20px 0 0;
}

.cancer-size-list2 li:nth-child(3) {
    margin: 13px 20px 0 0;
}

.cancer-size-list2 li:nth-child(4) {
    position: absolute;
    top: 10px;
    right: 0;
}

.cancer-size-list2 li:nth-child(4) ul li {
    padding-right: 0 !important;
    margin: 0 !important;
    text-align: center;
}

.cancer-size-list2 li:nth-child(4) ul li a {
    border-bottom: 2px solid #e83f30;
    box-sizing: border-box;
    padding-right: 0 !important;
}

.cancer-size-list2 li:nth-child(4) .btn-wrap {
    margin: 100px 20px 0 0 !important;
}

.jyuten {
    display: none;
}

.cancer-size-list2 li input[type="text"] {
    width: 100px;
    border: 2px solid #ccc;
    margin-right: 10px;
    font-size: 15px;
    box-sizing: border-box;
    padding: 5px;
}

.cancer-size-list2 {
    overflow: hidden;
    clear: both;
    padding-bottom: 10px;
}

@media only screen and (max-width: 768px) {
    p.coil a {
        font-size: 14px;
    }

    .cancer-size-list2 li {
        margin-right: 20px;
    }

    .cancer-size-list2 {
        margin: 10px 0 0 0;
    }

    .cancer-size-list2 li:nth-child(1) {
        margin-bottom: 20px;
    }

    .cancer-size-list2 li:nth-child(2) {
        margin: 20px 20px 0 0;
        clear: both;
    }

    .cancer-size-list2 li:nth-child(4) {
        position: static;
        clear: both;
        margin: 30px 0 0 0;
    }

    .cancer-size-list2 li:nth-child(4) ul {
        overflow: hidden;
    }

    .cancer-size-list2 li:nth-child(4) .btn-wrap {
        margin-left: 0 !important;
        margin-top: 0 !important;
    }
}

.delateall span {
    border: 2px solid #ccc;
    padding: 7px 10px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 14px;
}

.delateall {
    margin-bottom: 20px;
    margin-top: 30px;
}

ul.favoritelist li {
    background: #f7f7f7;
    display: block;
    padding: 20px;
    transition: all 0.3s ease-in-out;
    margin-bottom: 20px;
}

ul.favoritelist li:before,
ul.favoritelist li:after {
    content: "";
    display: block;
    overflow: hidden;
    clear: both;
}

ul.favoritelist li div {
    float: left;
    margin-right: 20px;
}

ul.favoritelist li div.delate {
    color: #e83f30;
    text-decoration: underline;
}

ul.favoritelist li div.folder {
    float: right;
    position: relative;
    font-size: 14px;
}

ul.favoritelist li div.folder span {
    cursor: pointer;
    background: #999;
    color: #fff;
    padding: 5px 10px;
    margin-left: 10px;
    border-radius: 7px;
}

.folder {
    position: relative;
}

.folder-contents {
    display: none;
    position: absolute;
    top: 40px;
    right: 0;
    background: #fff;
    padding: 15px;
    box-shadow: 0 0 20px #ddd;
    border-radius: 10px;
    z-index: 99999;
    font-size: 14px;
}

.close-folder {
    position: absolute;
    top: 5px;
    right: -10px;
    cursor: pointer;
}

.folder-contents input[type="text"] {
    margin: 10px 0;
    border: 1px solid #ccc;
    clear: both;
    overflow: hidden;
}

.folder-all {
    margin-bottom: 20px;
}

.folder-all ul {
    overflow: hidden;
    clear: both;
}

.folder-all ul li {
    padding: 5px 20px;
    float: left;
    border-bottom: 2px solid #ccc;
}

.folder-all ul li.active {
    border-bottom: 2px solid #e83f30;
    background: #fff;
    z-index: 99;
    padding: 5px 20px;
}

@media only screen and (max-width: 768px) {
    p.delateall {
        font-size: 14px;
    }

    ul.favoritelist li div {
        margin-right: 10px;
        font-size: 13px;
    }

    ul.favoritelist li div.name {
        clear: both;
        font-size: 15px;
        margin: 15px 0 0 0;
    }

    .folder-contents input[type="text"] {
        width: 100%;
    }

    ul.favoritelist li div.maker {
        margin: 17px 0 0 10px;
    }

    ul.favoritelist li div.folder {
        float: none;
        clear: both;
        margin: 0;
        padding-top: 10px;
    }
}

.changing {
    position: relative;
}

.select-wrap:before,
.select-wrap:after {
    overflow: hidden;
    clear: both;
    content: "";
    display: block;
}

.select-wrap li {
    float: left;
    margin-right: 15px;
}

.select-wrap li:first-child .delateall span:before {
    content: "×";
}

.notposi .close-folder {
    right: 5px !important;
}

@media only screen and (max-width: 768px) {
    .notposi {
        position: static !important;
        float: none;
        margin: 20px 0 0 0 !important;
    }

    .notposi .close-folder {
        top: 50px;
        right: 20px;
    }

    .notposi input[type="text"] {
        width: 100%;
    }

    .notposi input[type="submit"] {
        clear: both;
        overflow: hidden;
        float: none;
    }

    .select-wrap {
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        z-index: 9999;
        flex-wrap: inherit;
        display: flex;
    }

    .select-wrap li {
        flex: 0 0 40%;
        margin-top: 30px;
        width: auto;
        font-size: 12px;
        white-space: nowrap;
    }
}

.three-column {
    width: 32%;
    float: left;
    margin-right: 2%;
}

.three-column:last-child {
    margin-right: 0;
}

@media only screen and (max-width: 736px) {
    .three-column {
        width: auto;
        float: none;
        margin-right: 0;
    }
}

.two-column {
    width: 48%;
    float: left;
    margin-right: 4%;
}

.two-column:last-child {
    margin-right: 0;
}

.mt {
    margin-top: 113px;
}

.mt2 {
    margin-top: 53px;
}

@media only screen and (max-width: 736px) {
    .mt {
        margin-top: 0;
    }

    .mt2 {
        margin-top: 20px;
    }
}

ul.service-list li {
    margin-bottom: 5px;
}

.table2 {
    width: 100%;
}

.bo-btm {
    width: 100%;
    height: 2px;
    background: #eee;
    display: block;
    margin: 10px 0 10px 0;
    overflow: hidden;
    clear: both;
}

table.table2 th,
table.table2 td,
th.table2_th {
    padding: 7px 10px;
    font-size: 14px;
    border: 1px solid #eee;
}

table.table2 th,
th.table2_th {
    padding: 15px;
    background: #f7f7f7;
    font-size: 12px;
}

.one-check {
    width: 5%;
    text-align: center;
}

.one-check input[type="checkbox"] + label {
    padding: 0;
}

table.table2 th.tanpo {
    width: 15%;
}

table.table2 th.tanpo2 {
    width: 8%;
}

table.table2 th a,
th.table2_th a {
    text-decoration: underline;
    font-size: 110%;
    color: rgba(1, 48, 115, 1);
}

table.table2 img,
th.table2_th img {
    max-width: 100%;
}

@media only screen and (max-width: 736px) {
    table.table2 td p {
        margin: 0 0 0 10px;
    }
}

table.table td input[type="text"].text,
table.table2 td input[type="text"].text,
table.table td input[type="email"].text,
table.table2 td input[type="email"].text,
table.table td input[type="tel"].text,
table.table td input[type="date"].text {
    width: 100%;
}

table.table td input[type="date"].text.half {
    width: 33% !important;
}

table.table td textarea,
table.table td input[type="text"],
table.table td input[type="time"],
table.table2 td input[type="text"],
table.table2 td input[type="password"],
table.table td input[type="email"].text,
table.table2 td input[type="email"].text,
table.table td input[type="tel"].text,
table.table td input[type="date"].text {
    border: none;
    border: 1px solid #ddd;
    border-radius: 7px;
    padding: 7px;
    background: #fff;
    box-sizing: border-box;
    font-weight: normal;
}

ul.with-btn li:first-child {
    width: 70%;
}

ul.with-btn li:last-child {
    width: 30%;
}

ul.with-btn li input[type="text"] {
    border-radius: 7px 0 0 7px !important;
}

ul.with-btn li button {
    background: #053358;
    color: #fff;
    border: none;
    padding: 9px 16px;
    border-radius: 0 7px 7px 0;
    font-weight: normal;
    width: 100%;
    box-sizing: border-box;
}

ul.table-list {
    max-width: 320px;
}

ul.table-list li {
    float: left;
    width: 26.5%;
    margin-right: 4%;
}

ul.image-list li:last-child {
    margin-right: 0;
}

ul.image-list img {
    max-width: 100%;
}

ul.table-list li:nth-child(even) {
    width: 2%;
    padding-top: 5px;
}

ul.table-list li:last-child {
    margin-right: 0;
}

ul.table-list li input[type="text"] {
    width: 100%;
}

ul.table-list2 {
    max-width: 460px;
}

ul.table-list2 li {
    float: left;
    width: 43%;
    margin-right: 4%;
}

ul.table-list2 li:nth-child(even) {
    width: 5%;
    padding-top: 5px;
}

ul.table-list2 li:last-child {
    margin-right: 0;
}

ul.table-list2 li input[type="date"] {
    width: 100%;
    padding: 7px;
    border-radius: 7px;
    background: url("img/calender.png") no-repeat 90% 50%;
    background-size: 18px;
}

@media only screen and (max-width: 736px) {
    table.table2.sp-block th,
    table.table2.sp-block td {
        display: block;
    }

    table.table2 th,
    table.table2 td {
        font-size: 13px;
    }

    table.table2 th {
        width: 80px;
        padding: 5px;
        width: auto;
    }

    table.table2 td {
        padding: 7px;
    }
}

.text-centre th,
.text-centre td {
    text-align: center;
}

input[type="search"].text {
    border: none;
    background: #fff;
    border: 1px solid #ddd;
    padding: 5px;
    box-sizing: border-box;
    width: 70%;
}

input[type="submit"].search-btn {
    background: #00468c;
    color: #fff;
    border: none;
    padding: 5px;
    -webkit-border-radius: 0 7px 7px 0 / 0 7px 7px 0;
    -moz-border-radius: 0 7px 7px 0 / 0 7px 7px 0;
    border-radius: 0 7px 7px 0 / 0 7px 7px 0;
    cursor: pointer;
    position: relative;
    left: -5px;
}

input[type="button"].custom-btn {
    background: #fff;
    border: none;
    border: 2px solid #00468c;
    color: #00468c;
    padding: 5px 20px;
    box-sizing: border-box;
    margin: 0;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    letter-spacing: 2px;
    transition: 0.3s all ease-in-out;
}

@media only screen and (max-width: 768px) {
    input[type="button"].custom-btn {
        font-size: 14px;
        padding: 10px 20px;
        margin-right: 5px;
    }
}

.float-l {
    float: left;
}

.float-r {
    float: right;
}

.new-wrire {
    margin-left: 20px;
}

.tour-content h2.title + ul li {
    float: left;
    margin: 0 0 0 15px;
}

@media only screen and (max-width: 768px) {
    .tour-content h2.title + ul li {
        margin: 0 15px 15px 0;
        font-size: 13px;
    }

    .new-wrire {
        margin-left: 0;
        margin-bottom: 20px;
        display: block;
        float: none !important;
        clear: both;
    }
}

p.pdf a {
    background: url("img/pdf.png") 15px 50% no-repeat #eee;
    background-size: 20px;
    padding: 15px 15px 15px 45px;
    border-radius: 5px;
    box-shadow: 0 0 2px #999;
}

.tour-content {
    margin: 10px 0;
    text-align: center;
}

.tour-content2 {
    margin: 15px 0 0 0;
}

.tour-content:before,
.tour-content:after {
    content: "";
    display: block;
    overflow: hidden;
    clear: both;
}

.new-tour-confirm-btn {
    background: #e83f30;
    border: none;
    color: #fff;
    padding: 10px 30px;
    box-sizing: border-box;
    margin: 0;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    letter-spacing: 2px;
    transition: 0.3s all ease-in-out;
    color: #fff !important;
    text-decoration: none !important;
}

.two-navi-wrap {
    margin: 30px 0 0 0;
}

@media only screen and (max-width: 768px) {
    .two-navi-wrap {
        margin: 10px 0 0 0;
    }
}

input[type="date"] {
    width: 100%;
    max-width: 150px;
    position: relative;
    border: 1px solid #ddd;
    padding: 7px;
    border-radius: 10px;
}

input[type="date"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type="date"]::-webkit-clear-button {
    -webkit-appearance: none;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
}

p.detail {
    margin: 10px 0;
}

p.detail a {
    color: #e83f30;
    border: 2px solid #e83f30;
    padding: 7px 30px;
    border-radius: 10px;
    text-decoration: none !important;
}

p a.add-btn {
    color: #e83f30;
    border: 2px solid #e83f30;
    border-radius: 10px;
    padding: 7px 28px;
    transition: all 0.3s ease-in-out;
}

p a.add-btn:after {
    content: "+";
    margin-left: 10px;
}

p a.add-btn:hover {
    background: #e83f30;
    color: #fff;
}

.pagecount {
    margin: 10px 0 0 0;
    color: #999;
    font-size: 80%;
}

@media only screen and (max-width: 768px) {
    p a.add-btn {
        font-size: 14px;
    }

    .pagecount {
        margin: 3px 0 0 20px;
    }
}

.add-btn {
    text-decoration: none !important;
}

.pager {
    text-align: center;
    margin: 50px 0 50px 0;
}

@media only screen and (max-width: 768px) {
    .pager {
        margin: 25px 0;
    }
}

ul.btn-list li {
    float: left;
    width: 49%;
    margin-right: 2%;
    margin-bottom: 2%;
}

ul.btn-list2 {
    min-width: 200px;
}

ul.btn-list2 li {
    float: left;
    width: 32%;
    margin-right: 2%;
    margin-bottom: 2%;
}

ul.btn-list2 li:nth-child(3n) {
    margin-right: 0;
}

ul.btn-list li:nth-child(2n) {
    margin-right: 0;
}

ul.btn-list li:nth-child(n + 3) {
    margin-bottom: 0;
}

ul.btn-list li a,
ul.btn-list2 li a,
ul.btn-list2 li button {
    width: 100%;
    display: block;
    border: 1px solid #ccc;
    background: #eee;
    border-radius: 10px;
    padding: 5px 5px;
    box-sizing: border-box;
    color: #e83f30;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    font-size: 13px;
}

ul.btn-list li a:hover,
ul.btn-list2 li a:hover {
    background: #e83f30;
    color: #fff;
}

@media only screen and (max-width: 1200px) {
    ul.btn-list2 {
        min-width: 70px;
    }

    ul.btn-list li,
    ul.btn-list2 li {
        float: none;
        width: auto;
        margin-bottom: 10px !important;
    }

    ul.btn-list li:last-child {
        margin-bottom: 0 !important;
    }
}

ul#deal-list {
    overflow: hidden;
    clear: both;
    margin-bottom: 20px;
}

ul#deal-list li {
    float: left;
    width: 50%;
}

ul#deal-list li a {
    padding: 10px 0;
    display: block;
    border-bottom: 3px solid #eee;
    text-align: center;
}

ul#deal-list li a.active {
    display: block;
    border-bottom: 3px solid #e83f30;
    color: #e83f30;
}

.back-btn {
    border: none;
    padding: 10px;
    border-radius: 10px;
    margin-left: 20px;
    cursor: pointer;
}

.tab-group {
    overflow: hidden;
    clear: both;
    margin: 0 0 25px 0;
}

.tab {
    float: left;
    width: 50%;
    box-sizing: border-box;
    padding: 5px;
    list-style: none;
    text-align: center;
    cursor: pointer;
    border-bottom: 3px solid #eee;
    font-size: 110%;
}

@media only screen and (max-width: 768px) {
    ul#deal-list li a {
        padding: 5px 0;
    }

    ul#deal-list li,
    .tab {
        font-size: 14px;
    }
}

.panel-group {
    border-top: none;
    background: #f7f7f7;
}

.panel {
    display: none;
}

.tab.is-active {
    border-bottom: 3px solid #e83f30;
    color: #e83f30;
    transition: all 0.2s ease-out;
}

.panel.is-show {
    display: block;
}

ul.list-btn {
    display: flex;
    justify-content: center;
}

ul.list-btn li {
    white-space: nowrap;
    margin: 0 10px;
}

ul.list2 {
    margin: 5px 0 0 0;
}

ul.list2 li {
    float: left;
    width: 48%;
    margin-right: 4%;
}

ul.list2 li:last-child {
    margin-right: 0;
}

ul.list2 li h3 {
    margin: 5px 0 0 0;
    float: left;
    width: 15%;
}

ul.list2 li h3.part1 + input {
    width: 85% !important;
}

ul.list2 li h3.part2 + input,
ul.list2 li h3.part2 + input + input,
ul.list2 li h3.part2 + input + input + input {
    width: 25% !important;
    margin-right: 5%;
}

ul.list2 li h3.part2 + input + input + input {
    margin-right: 0;
}

@media only screen and (max-width: 736px) {
    ul.list2 li h3.part2 + input,
    ul.list2 li h3.part2 + input + input,
    ul.list2 li h3.part2 + input + input + input {
        width: 24% !important;
        margin-right: 2%;
    }
}

ul.list3 li {
    width: 32%;
    float: left;
    margin: 0 2% 0 0;
}

ul.list3 li:last-child {
    margin-right: 0;
}

ul.list3x li {
    width: 12%;
    float: left;
    margin: 0 2% 0 0;
}

ul.list3x li:last-child {
    margin-right: 0;
    width: 72% !important;
}

ul.list3xx li {
    width: 12%;
    float: left;
    margin: 0 2% 0 0;
}

ul.list3xx li:last-child {
    margin-right: 0;
    width: 86% !important;
}

ul.flow {
    overflow: hidden;
    clear: both;
    width: 99.7%;
    margin: 0 0 25px 0;
}

ul.flow li {
    float: left;
    width: 32%;
    background: rgba(1, 48, 115, 0.2);
    padding: 10px;
    margin-right: 2%;
    text-align: center;
    position: relative;
}

ul.flow li.active {
    background: rgba(1, 48, 115, 0.5);
    color: #fff;
}

ul.flow li:last-child {
    margin-right: 0;
}

ul.flow li span {
    font-size: 70%;
    margin: 0 10px 0 0;
}

ul.flow li:after {
    content: "";
    width: 0;
    height: 0;
    border-left: 22px solid rgba(1, 48, 115, 0.2);
    border-top: 23px solid transparent;
    border-bottom: 22px solid transparent;
    position: absolute;
    right: -22px;
    z-index: 99;
    top: 0;
}

ul.flow li.active:after {
    border-left: 22px solid rgba(1, 48, 115, 0.5);
}

ul.flow li:last-child:after {
    display: none;
}

@media only screen and (max-width: 768px) {
    ul.flow li span {
        display: none;
    }

    ul.flow li {
        font-size: 11px;
    }
}

.wrap {
    background: #f7f7f7;
}

.text90 {
    width: 80% !important;
    margin-right: 10px !important;
}

.text80 {
    width: 70% !important;
    margin-right: 10px !important;
}

table.bigsize td p,
table.bigsize select {
    font-size: 110%;
}

ul.classname {
    overflow: hidden;
    clear: both;
    margin: 0 0 25px 0;
}

ul.classname li {
    float: left;
    border-right: 1px solid #ccc;
    padding: 0 10px;
}

ul.classname li:first-child {
    padding-left: 0;
}

ul.classname li:last-child {
    padding-right: 0;
    border: none;
}

/*トーナメント*/
table.tournament {
    width: 100%;
    margin-bottom: 50px;
}

.bottom-red {
    border-bottom: solid rgba(255, 0, 0, 1) 3px;
}

.right-red {
    border-right: solid rgba(255, 0, 0, 1) 3px;
}

.right-black {
    border-right: solid rgba(0, 0, 0, 0.3) 3px;
}

.bottom-black {
    border-bottom: solid rgba(0, 0, 0, 0.3) 3px;
}

td.name {
    width: 200px;
}

@media only screen and (max-width: 768px) {
    td.name {
        width: 70px;
    }
}

input[type="text"].icon-move.on {
    background: #bb2225 !important;
    color: #fff;
}

.tab-group {
    display: flex;
    justify-content: center;
}

.tab {
    flex-grow: 1;
    padding: 5px;
    list-style: none;
    text-align: center;
    cursor: pointer;
}

.panel-group {
    background: none !important;
}

.panel {
    display: none;
}

.tab.is-active {
    background: rgba(1, 48, 115, 0.5);
    color: #fff;
    transition: all 0.2s ease-out;
}

.panel.is-show {
    display: block;
}

.tab-group-inside,
.tab-group-inside2,
.tab-group-inside3 {
    display: flex;
    justify-content: center;
}

.tab-inside,
.tab-inside2,
.tab-inside3 {
    flex-grow: 1;
    padding: 5px;
    list-style: none;
    border: 2px solid #eee;
    text-align: center;
    cursor: pointer;
}

.panel-group-inside,
.panel-group-inside2,
.panel-group-inside3 {
    background: none !important;
}

.panel-inside,
.panel-inside2,
.panel-inside3 {
    display: none;
}

.tab-inside.is-active-inside,
.tab-inside2.is-active-inside2,
.tab-inside3.is-active-inside3 {
    border: 2px solid #e83f30;
    color: #e83f30;
    transition: all 0.2s ease-out;
}

.panel-inside.is-show-inside,
.panel-inside2.is-show-inside2,
.panel-inside3.is-show-inside3 {
    display: block;
}

.winner {
    overflow: hidden;
    clear: both;
    margin: 20px 0 0 0;
}

.winner p {
    float: left;
    width: 10%;
    padding: 5px 0 0 0;
}

.winner select {
    float: left;
    width: 90%;
}

a.confirm {
    background: #e83f30;
    color: #fff;
    border-radius: 7px;
    padding: 7px 20px;
    text-decoration: none;
    display: block;
}

.tournament-list {
    overflow: hidden;
    clear: both;
    margin: 20px 0 0 0;
    background: #eee;
    padding: 10px;
}

.tournament-list p {
    float: left;
    width: 15%;
    padding: 5px 0 0 0;
}

.tournament-list select {
    float: left;
    width: 85%;
}

@media only screen and (max-width: 769px) {
    .tournament-list p,
    .tournament-list select,
    .winner p,
    .winner select {
        float: none;
        width: auto;
    }
}

.info-btn {
    border: 2px solid #e83f30;
    color: #e83f30;
    padding: 10px 20px;
    border-radius: 10px;
    background: #fff;
}

.info-btn:before {
    content: "";
    background: url("../img/people.svg") no-repeat left 50%;
    background-size: 18px;
    width: 18px;
    display: inline-block;
    height: 18px;
    margin-right: 10px;
    position: relative;
    top: 5px;
}

.message-btn {
    border: 2px solid #e83f30;
    color: #e83f30;
    padding: 10px 20px;
    border-radius: 10px;
    background: #fff;
}

.message-btn:before {
    content: "";
    background: url("../img/comment.svg") no-repeat left 50%;
    background-size: 20px;
    width: 20px;
    display: inline-block;
    height: 18px;
    margin-right: 10px;
    position: relative;
    top: 5px;
}

.edit-btn {
    background: #e83f30;
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}

.pdf-btn {
    background: none;
    border: 2px solid #e83f30;
    color: #333;
    padding: 8px;
    border-radius: 50px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}

.pdf-btn:before {
    content: "";
    display: inline-block;
    margin: 0 10px 0 0;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAQ5JREFUSEvtlcENwjAMRb8zBdzKBp0AwiSFSYBJgElomaAbACeYgo8cEQlB1aSpijiQW9LGz/5JvgUDDxk4Pj4AV5tbIVYAbBucxHp8rDehBD8At1l+ApCFNur3GEgTgKHgGlgE6xhIEmBU1XKd5qsYSDJAs4+B9ALEQHoD3iEq3+sZJgHaLsEfEHoi+C2J3IOyeYY7Cpe6wV5txBDFnTj7uRAHX1qnCiiYCLGlYKkQI8gIWArmDmpQvRtjZ4C6qgYhsXsCMg+EwcUQMwKLPhWouzrn1IxVIiEKEqWuez9KAgSvTMMPnSQaChDdcBoSOI+qetLqRc+WuY3tai/BSgo247J2Z+PH95t+iu5tex4TD6sZGVraPQAAAABJRU5ErkJggg==")
        no-repeat 20% 50%;
    background-size: 100%;
    width: 15px;
    height: 15px;
    position: relative;
    top: 2px;
}

.detail-btn {
    border: none;
    border: 1px solid #e83f30;
    color: #e83f30;
    padding: 10px;
    background: #fff;
    border-radius: 50px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}

.input_flexbox2 .edit-btn {
    background: #e83f30;
    border: none;
    padding: 8px 20px;
    border-radius: 50px;
    color: #fff;
    letter-spacing: 2px;
    margin: 0;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
}

.delete-btn {
    background: #666;
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    white-space: nowrap;
}

.delete-btn:before {
    content: "×";
    margin: 0 5px 0 0;
}

@media only screen and (max-width: 769px) {
    .info-btn,
    .message-btn {
        padding: 5px 10px;
    }
}

.scroll2 {
    margin-bottom: 5vh;
}

.make {
    background: #053358;
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}

.make-edit {
    background: #053358;
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}

table.no-th-w th,
table.no-th-w td {
    border: none !important;
}

table.no-th-w th {
    width: 80px;
    text-align: left;
    padding: 0 !important;
}

@media only screen and (max-width: 769px) {
    table.no-th-w th {
        width: auto;
        text-align: left;
    }
}

p.office {
    float: right;
}

p.office a {
    border: solid 2px #e83f30;
    color: #e83f30;
    padding: 5px;
    border-radius: 5px;
}

.talkline-all {
    padding: 50px 25px 100px 25px;
    background: #fffafa;
    min-height: 60vh;
}

@media only screen and (max-width: 769px) {
    .talkline-all {
        padding: 25px 10px 25px 10px;
        min-height: 50vh;
    }
}

.talkline-all time {
    text-align: center;
    color: #bcbec0;
    display: block;
    margin: 0 auto 5px auto;
    width: 100px;
    font-size: 0.7rem;
}

.talkline {
    overflow: hidden;
    clear: both;
    padding: 5px 15px 15px 5px;
}

.talkline-all .right-message {
    float: right;
    max-width: 50%;
    margin: 0;
}

.talkline-all .right-message .thename {
    font-size: 11px;
    color: #999;
}

.talkline-all .left-message .thename {
    font-size: 11px;
    color: #999;
    margin-left: 50px;
}

.talkline-all ul.fukidashi {
    clear: both;
    width: 450px;
}

.talkline-all ul.fukidashi li {
    float: left;
}

ul.fukidashi li p,
div.fukidashi p {
    font-size: 14px !important;
}

@media only screen and (max-width: 736px) {
    .talkline-all .right-message {
        float: right;
        max-width: 65%;
        margin: 0;
    }

    ul.fukidashi li p,
    div.fukidashi p {
        font-size: 13px !important;
    }

    .talkline-all ul.fukidashi {
        clear: both;
        width: 250px;
    }
}

.talkline-all div.fukidashi {
    width: 100%;
    max-width: 400px;
    background: #9bd8f6;
    padding: 5px 10px;
    border-radius: 10px;
    position: relative;
}

@media only screen and (max-width: 736px) {
    .talkline-all div.fukidashi {
        max-width: 200px;
    }
}

.talkline-all div.fukidashi:after {
    position: absolute;
    right: -5px;
    top: 10px;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-color: transparent transparent transparent #9bd8f6;
}

.talkline-all .left-message {
    float: left;
}

.talkline-all .left-message ul.fukidashi li {
    width: 82%;
    background: #fff;
    padding: 5px 10px;
    box-sizing: border-box;
    border-radius: 10px;
    position: relative;
}

.talkline-all .left-message ul.fukidashi li:before {
    position: absolute;
    left: -5px;
    top: 10px;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 5px 0;
    border-color: transparent #fff transparent transparent;
}

.sendbox {
    position: fixed;
    bottom: 30px;
    background: #fff;
    width: calc(100% - 540px);
    padding: 0 3%;
    box-sizing: border-box;
    padding-top: 5px;
    padding-bottom: 5px;
    z-index: 9999;
}

@media only screen and (max-width: 736px) {
    .sendbox {
        width: 100%;
        bottom: 0;
        left: 0;
    }
}

.sendbox.estimate-ver {
    background: #1c75bc;
}

ul.bottom-list {
    position: relative;
}

ul.bottom-list li {
    float: left;
}

ul.bottom-list li:nth-child(1) {
    width: 8%;
    padding: 5px 0 0 0;
    line-height: 1.3;
    color: #fff;
}

ul.bottom-list li:nth-child(2) {
    width: 82%;
}

ul.bottom-list li:nth-child(2) textarea,
ul.bottom-list li:nth-child(2) input[type="number"] {
    width: 100%;
    border-radius: 5px;
    height: 40px;
    max-height: 300px;
    padding: 8px;
    line-height: 20px;
}

textarea.waku1 {
    border: none;
    background: #fff;
    border: 1px solid #d1d3d4;
}

input.waku2 {
    background: #fff;
    border: none;
    width: 88% !important;
    margin: 0 5px 0 10px;
}

input.waku2 + span {
    color: #fff;
}

ul.bottom-list li:nth-child(2) div {
    position: absolute;
    left: 5px;
    top: 6px;
}

ul.bottom-list li:nth-child(2) div img {
    width: 16px;
}

ul.bottom-list li:nth-child(3) {
    width: 7%;
    padding: 10px 0 0 2%;
}

.dn {
    display: none;
}

th.v-top {
    vertical-align: top !important;
}

.btn_fileupload {
    background: transparent url(../img/clip.svg) no-repeat top left;
    background-size: 14px;
    border: none;
    width: 14px;
    height: 28px;
    cursor: pointer;
    margin: 7px 0 0 0;
}

.btn_fileupload_over {
    background: transparent url(../img/clip.svg) no-repeat top left;
    background-size: 14px;
    border: none;
    width: 14px;
    height: 28px;
    cursor: pointer;
}

input[type="submit"].paperplane {
    background: url("../img/paperplane.svg") #e83f30 50% 50% no-repeat;
    background-size: 20px;
    width: 32px;
    height: 32px;
    color: #fff;
    border: none;
    border-radius: 50%;
    padding: 0 5px;
    display: block;
    text-align: center;
    letter-spacing: 0;
    transition: all 0.3s ease-in;
    font-size: 1rem;
    box-sizing: border-box;
    margin: 0;
    box-shadow: 0 0 30px #ccc;
}

input[type="submit"].paperplane2 {
    background: url("../img/paperplane2.svg") #fff 50% 50% no-repeat;
    background-size: 20px;
    width: 32px;
    height: 32px;
    color: #fff;
    border: none;
    border-radius: 50%;
    padding: 0 5px;
    display: block;
    text-align: center;
    letter-spacing: 0;
    transition: all 0.3s ease-in;
    font-size: 1rem;
    box-sizing: border-box;
    margin: 0;
    box-shadow: 0 0 30px #ccc;
}

input.pluralBtn {
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 5px;
    padding: 0;
    margin: 0;
}

.eighty {
    width: 80%;
    margin-right: 0;
}

@media only screen and (max-width: 736px) {
    .eighty {
        width: 65%;
    }
}

.city-box:not(:first-child) {
    margin-top: 10px;
}

.pager span,
.pager a {
    margin: 0 10px;
    font-size: 13px;
}

.pager span {
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    display: inline-block;
    background: #80b8de;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    margin: 0 5px;
    position: relative;
    top: -1px;
}

.cal-box {
    overflow: hidden;
    clear: both;
    margin-bottom: 10px;
}

.cal-box select {
    margin-left: 10px;
}

.cal-box:nth-child(2) {
    margin-bottom: 0;
}

h3.title {
    margin: 15px 0;
    color: #e83f30;
}

h3.title:before {
    content: "■";
    margin: 0 10px 0 0;
}

.radio-text {
    display: none;
    margin-top: 10px;
}

.radio-box ul {
    display: flex;
}

.textarea .radio-box ul {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

ul.two-btns {
    display: flex;
    margin: 15px 0 15px 0;
    justify-content: center;
}

ul.two-btns li {
    margin: 0 10px;
}

ul.stick {
    position: sticky;
    position: -webkit-sticky;
    top: 44px;
    z-index: 9;
    display: flex;
    padding: 15px 0 30px 0;
    background: #fff;
}

ul.stick li a {
    padding: 7px 21px;
    background: #fff;
    border-bottom: 3px solid #eee;
    font-size: 15px;
}

@media only screen and (max-width: 736px) {
    ul.two-btns {
        margin-top: 5px;
    }

    ul.stick {
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        margin-right: -15px;
        margin-left: -15px;
        left: -15px;
    }

    ul.stick li {
        white-space: nowrap;
    }

    ul.stick li a {
        font-size: 13px;
        padding: 7px;
    }
}

ul.stick li a.active {
    border-bottom: 3px solid #e83f30;
    color: #e83f30;
}

.red {
    background: #c00;
    color: #fff;
}

button.cancel {
    background: #333;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 82px;
    display: block;
    margin: 25px auto;
    letter-spacing: 2px;
}

button {
    cursor: pointer;
}

button.ok {
    transition: all 0.3s;
}

button.ok:hover {
    opacity: 0.7;
    color: #fff !important;
}

@media only screen and (max-width: 736px) {
    button.cancel {
        background: #333;
        color: #fff;
        border: none;
        border-radius: 5px;
        padding: 10px 32px;
    }
}

.form__file input[type="file"] {
    display: none !important;
}

.form__file label {
    background: #fff;
    border: 2px solid #e83f30;
    color: #e83f30;
    font-size: 14px;
    padding: 8px 10px;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    cursor: pointer;
    margin-right: 8px;
}

.form__file label:hover {
    opacity: 0.7;
    transition: 0.3s ease-out;
}

.form__file label:after {
    content: "選択されていません";
    color: #333;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    position: absolute;
    right: -140px;
    top: calc(50% - 10px);
    font-weight: normal;
}

.form__file label.changed:after {
    content: "";
}

.form__file .filename {
    font-size: 12px;
}

ul.target-list {
    margin: 10px 0 0 0;
}

ul.target-list li {
    margin-bottom: 10px;
}

ul.sp-block {
    display: flex;
}

.target01,
.target02 {
    border-top: 1px dotted #ccc;
}

@media only screen and (max-width: 736px) {
    .form__file label {
        font-size: 13px;
    }

    .form__file label:after {
        font-size: 12px;
        right: -120px;
    }

    ul.target-list {
        display: block;
    }

    ul.sp-block {
        display: block;
    }

    ul.sp-block li {
        margin-bottom: 5px;
    }

    ul.sp-block li:last-child {
        margin-bottom: 0;
    }
}

/*contents2editnew*/
#wrapper .user_info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#wrapper .user_info .user_info_flex {
    display: flex;
    justify-content: flex-start;
    border: 1px solid #eee;
    padding: 10px;
}

#wrapper .user_info .user_info_flex li {
    width: 50%;
}

#wrapper .user_info .user_info_flex li:first-child {
    width: 25%;
}

#wrapper .user_info .user_info＿01 {
    width: 25%;
}

#wrapper .user_info .user_info＿02 {
    width: 25%;
}

#wrapper .user_info .user_info＿03 {
    width: 25%;
}

#wrapper .user_info .user_info＿04 {
    width: 25%;
}

.form_erea {
    display: flex;
    justify-content: space-between;
}

.form_erea .form_erea_left {
    width: 49%;
}

.form_erea .form_erea_right {
    width: 49%;
}

table .table_alert {
    background-color: #ff0000;
    text-align: center;
    color: #fff;
}

.table_margin {
    margin-bottom: 20px;
}

.table_margin a {
    color: #106ab2;
    text-decoration: underline;
}

.text-decoration_01 {
    text-align: center;
}

ul.input_flexbox,
ul.input_flexbox2 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 20px 0;
}

ul.input_flexbox li {
    width: 70%;
}

ul.input_flexbox li:last-child {
    width: 20%;
    padding-left: 2%;
}

ul.input_flexbox2 li {
    width: 55%;
}

ul.input_flexbox2 li:nth-child(2),
ul.input_flexbox2 li:nth-child(3) {
    width: auto;
    padding-left: 2%;
}

@media only screen and (max-width: 736px) {
    ul.input_flexbox2 li {
        width: 45%;
    }
}

input[type="submit"].tuika {
    background: #e83f30;
    border: none;
    padding: 8px 20px;
    border-radius: 7px;
    color: #fff;
    letter-spacing: 2px;
    margin: 0;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 736px) {
    #wrapper .user_info .user_info＿01 {
        width: 50%;
    }

    #wrapper .user_info .user_info＿02 {
        width: 50%;
    }

    #wrapper .user_info .user_info＿03 {
        width: 50%;
    }

    #wrapper .user_info .user_info＿04 {
        width: 50%;
    }

    #wrapper .user_info .user_info_flex li:first-child {
        width: 40%;
        font-size: 13px;
    }

    #wrapper .user_info .user_info_flex li {
        width: 60%;
        font-size: 13px;
    }

    #wrapper .user_info .user_info_flex {
        padding: 5px;
    }

    .form_erea {
        display: block;
        justify-content: space-between;
    }

    .form_erea .form_erea_left {
        width: 100%;
    }

    .form_erea .form_erea_right {
        width: 100%;
    }

    .form_erea table.table_margin td,
    .form_erea table.sp_table_border td {
        padding: 10px;
        border: 1px solid #eee;
        font-size: 13px;
        vertical-align: middle;
    }

    .form_erea table.sp_table_border {
        margin-bottom: 20px;
    }

    .form_erea table.table_margin .sp_table_sel td {
        display: table-cell;
    }
}

.text_flexbox ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.text_flexbox ul li:first-child {
    padding-right: 10px;
}

ul.list-list li {
    line-height: 2.5;
}

ul.list-list2 li {
    line-height: 1;
}

.btn-add {
    float: right;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 0 7px;
}

#form_area {
    overflow: hidden;
    width: 200px;
}

#form_area input {
    margin: 10px 0 0 0;
}

.image-crop {
    margin: 0;
}

.image-crop label > input {
    display: none;
}

.image-crop label {
    display: block;
    text-align: center;
    color: #000;
    border: 1px solid #ccc;
    padding: 10px 30px;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    font-size: 14px;
    width: 50%;
    box-sizing: border-box;
}

@media only screen and (max-width: 736px) {
    .image-crop label {
        width: 100%;
    }
}

.image-crop label:before {
    content: "";
    display: inline-block;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAP9JREFUSEvVlO0NwjAMRK+bwCYwCTAJYhLYBDaBTUCviiXXykejUgnyp2ra3rvaFw9aeQ0r62sOYCPpKmkXzDwknSS9aiZbgJK4aSK+r0FqAC+O0NY55dldEtcqxAMowTlTiihuHA/xVaJ0F0lcJz14JkfxZUpQWjXI+J3/g3dSafWlFbyJzlwATinfMdXcypBLUDcAccoXV6m53QDOAM4t94AsQezFHnUDrPkIjclISQOSS9hXATEo3HcDcMoZwa2NBhsdt7Tn+9MNWL3JuANySM3m3jc8pqv7D1oH63cAuVnU696P8XH6xmlKOqj3klWcpktEi98unZxNU/8P+ABq8EsZiHW7egAAAABJRU5ErkJggg==")
        no-repeat;
    background-size: 100%;
    width: 20px;
    height: 17px;
    position: relative;
    top: 3px;
    margin: 0 10px 0 0;
}

.image-crop label > input {
    display: none;
}

#preview #image,
#preview2 #image2,
#preview3 #image3,
#preview4 #image4,
#preview5 #image5,
#preview6 #image6,
#preview7 #image7,
#preview8 #image8,
#preview9 #image9,
#preview10 #image10 {
    max-width: 100%;
    margin: 0 0 2vh 0;
}

canvas {
    border: 1px solid #ccc;
    cursor: crosshair;
}

.mb15 {
    margin-bottom: 15px;
}

.flex {
    display: flex;
    justify-content: space-between;
}

.flex.justify-end {
    justify-content: end;
}

.flex.justify-center {
    justify-content: center;
}

.flex.justify-between {
    justify-content: space-between;
}

.flex.justify-start {
    justify-content: start;
}

.flex.justify-around {
    justify-content: space-around;
}

@media only screen and (max-width: 768px) {
    .flex.sp-no-flex {
        display: block !important;
    }
}

.flex.time {
    align-items: center;
}

.flex.time li:nth-child(2) {
    margin: 0 10px;
}

.flex.inline {
    justify-content: flex-start;
}

.flex.inline.auto li {
    width: auto !important;
}

.flex.two-list,
.flex.three-list {
    flex-wrap: wrap;
}

.flex.two-list li {
    width: 48%;
}

.flex.three-list li {
    width: 32%;
}

@media only screen and (max-width: 736px) {
    .flex.two-list li,
    .flex.three-list li {
        width: auto;
        margin-top: 10px;
    }
}

.flex.three-list li.get-no {
    margin-bottom: auto;
    padding-top: 10px;
}

.flex.three-list li ul li:nth-child(2) {
    width: 70%;
}

.flex.two-list li ul,
.flex.three-list li ul {
    align-items: center;
}

.flex.three-list li:nth-child(n + 4) {
    margin-top: 15px;
}

.flex-left {
    width: 49%;
}

.flex-right {
    width: 48%;
}

@media only screen and (max-width: 736px) {
    .flex.three-list li ul li:nth-child(1) {
        width: 30%;
    }

    .flex-left {
        width: auto;
    }

    .flex-right {
        width: auto;
    }
}

.dummy2 {
    display: none;
}

.radio-box {
    padding: 9.5px 0;
}

.filter-btns {
    display: flex;
    margin-bottom: 30px;
    font-size: 14px;
}

.filter-btns button,
.filter-btns p {
    margin: 0 20px 0 0;
    background: none;
    border: none;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}

.filter-btns button:after {
    content: ">";
    display: inline-block;
    transform: rotate(-90deg) scale(0.7, 1);
    margin: 0 0 0 10px;
}

.filter-btns button.on:after {
    transform: rotate(90deg) scale(0.7, 1);
}

.filter-btns p:after {
    content: "";
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAARxJREFUSEu1VdsRhCAMBCvxOtFS/NChi2vDgQ+vEy3FRiA3cWAmMjx9+EnCbnYTDGcvf/xlfPYIgRCi1Vp3SqmfX/CJQAjRGWMWxlibUtY0TT/P84Y54ziunPPO5u82trv7JwIvOcgRAXeAWNgupfwECaZpAgxIKbPWkWIOQLTJGLOiegAYnF0noFKCmC3u/BYBrdzacNgCALvtxTWL7KQsFITa4ppM/cezIotC4K6Jfi+SYxrqQS04jrob4ayCGHjiHN/RSqcwaVFIfkpRyIEkgX8hBY523CLIgd8i8CbjNOc0dlkBAYmCX1JQuyuqFTxOUPK7zpECwKaU6oO/a3yFWusvWSA5PD+OC2eIvuRatJL87GIpAUnlvE7wB4xzIijLvVUvAAAAAElFTkSuQmCC")
        no-repeat;
    background-size: 100%;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin: 0 0 0 10px;
    position: relative;
    top: 4px;
}

.filter-contents {
    font-size: 14px;
    margin-bottom: 35px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 25px;
}

@media only screen and (max-width: 768px) {
    .filter-contents {
        font-size: 14px;
        margin-bottom: 15px;
        border-bottom: 1px solid #ccc;
        padding-bottom: 15px;
    }
}

.filter-contents.no-bo {
    margin-bottom: 0;
    border-bottom: none;
}

.csv-btns {
    margin-bottom: 25px;
    position: sticky;
    background: #fff;
    top: 0;
    padding: 20px 0;
    width: 100%;
    /* z-index: 99; */
}

.csv-btns.mb0 {
    margin-bottom: 0;
}

.csv-btns li {
    margin-right: 15px;
}

@media only screen and (max-width: 768px) {
    .csv-btns {
        position: static;
    }

    .csv-btns li {
        text-align: center;
        margin-bottom: 15px;
        margin-right: 0;
    }
}

.select-box select {
    font-size: 14px;
}

.csv-btns label,
.csv-btns button.download {
    padding: 10px 30px;
    font-size: 14px;
    color: #ffffff;
    background: rgba(5, 51, 88, 0.7);
    cursor: pointer;
    border-radius: 50px;
    display: block;
}

.csv-btns button.build {
    padding: 10px 30px;
    font-size: 14px;
    background: none;
    color: #053358;
    border: 2px solid #053358;
    cursor: pointer;
    border-radius: 50px;
    display: block;
}

.csv-btns button.build:before {
    content: "＋";
    margin: 0 10px 0 0;
}

.csv-btns button.delete {
    padding: 10px 30px;
    font-size: 14px;
    background: #666;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 50px;
    display: block;
}

.csv-btns button.delete:before {
    content: "×";
    margin: 0 5px 0 0;
}

.csv-btns .express {
    border: none;
    padding: 10px 30px;
    font-size: 14px;
    color: #333;
    background: #9bd8f6;
    cursor: pointer;
    border-radius: 50px;
}

.csv-btns input[type="file"] {
    display: none;
}

.scroll {
    overflow-x: scroll;
}

.scroll table {
    border-collapse: collapse;
    white-space: nowrap;
}

.sat {
    color: #0380ce;
}

.sun {
    color: #e25586;
}

.pagenation {
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagenation h2 {
    color: #999;
}

.pagenation .number {
    margin-left: 20px;
}

.pagenation .number a {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
    text-align: center;
    border-radius: 50%;
    border: 1px solid #999;
    margin: 0 10px;
    font-family: "Roboto", sans-serif;
}

@media only screen and (max-width: 768px) {
    .csv-btns button.build {
        width: 100%;
        box-sizing: border-box;
    }

    .pagenation {
        display: block;
        text-align: center;
    }

    .pagenation h2 {
        margin-bottom: 10px;
    }

    .pagenation .number {
        margin: 0 0 15px 0;
    }

    .pagenation .number a {
        margin: 0 5px;
    }
}

.pagenation .number a.prev,
.pagenation .number a.next {
    border: none;
}

.move {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: auto;
    margin-left: 20px;
    font-size: 14px;
}

.move h2 {
    border-left: 1px solid #ccc;
    padding-left: 40px;
}

.move .select-wrap {
    margin: 0 15px;
}

.move .moveto {
    padding: 10px 30px;
    font-size: 14px;
    background: #e83f30;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 50px;
    display: block;
    margin-left: 15px;
    letter-spacing: 0.05em;
}

input[type="time"] {
    width: 150px;
}

.search-inside2 {
    width: 100%;
    position: relative;
}

.search-inside2 .bar2 input {
    font-size: 13px;
    padding: 7px 7px 7px 40px;
}

#search-button {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAWlJREFUSEvVld9tgzAQxu/MICUjIJvnwCSFSZpOUjpJyXOMGKEMAr7oEEYOxYACeSgSihDx/e7Pdx8IL77wxfHBC6jrOjTGvBNRAgB8NwBQImIjhPiOooifV69ZQFVVH0R0WTjdIGIhpfxcI/wBaK1/howBES/GmGscx+VQEVfy5sBLpVS6BHkAVFWVEdEXt4OIcg48d5hhXddxIiEnsVTJCBgO/XJAIkp9wS3wdrsliMiQxWRGgNP3QimVr/WW32utudpsqYoR4Pw5l1IWWwBOFd5ZuABuTxgEwWmrBJ22Nkqp01xSuwBDm4h/lVKzkncBvTy3DNhm6qjOO7dDhgwA64AdMoWluT21aI56+m3ftGi2r1auw3OBiFchRL/RbduGQojzxKeaIAhSn/KeNbs+cyLKWNq8zT7Iml2zqs7W/DgQIpa2Ja4n+SC7PzhrkN0Ans3EXR+s5hCAhRhjkqmPHQbwmeP/B9wBYbwHKIvkRNUAAAAASUVORK5CYII=)
        no-repeat;
    background-size: 100%;
    width: 25px;
    height: 25px;
    border: none;
    position: absolute;
    top: 5px;
    left: 10px;
}

ul.chat-list li a {
    display: block;
    padding: 20px 40px 20px 20px;
    border-bottom: 1px solid #ccc;
    position: relative;
    transition: all 0.2s ease-in-out;
}

ul.chat-list li a:hover {
    opacity: 0.7;
}

ul.chat-list li a i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
    width: 25px;
    border-radius: 50%;
    height: 25px;
    line-height: 25px;
    text-align: center;
    vertical-align: middle;
    color: #fff;
    font-size: 11px;
    background: rgb(232, 63, 48);
    font-family: "Roboto", sans-serif;
}

ul.chat-list li p {
    font-size: 12px;
    margin: 5px 0 0 0;
    color: #999;
}

.talk_date_area {
    text-align: center;
    padding: 0px 0px 10px;
}

.talk_date_area > p {
    background: rgba(184, 184, 184, 0.15);
    border-radius: 20px;
    padding: 5px 10px;
    display: inline-block;
    font-size: 11px !important;
}

.talk_area ul {
    margin-bottom: 15px;
}

.talk_area li {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: stretch;
    position: relative;
    margin-bottom: 0 !important;
}

.talk_area li > div {
    box-sizing: border-box;
}

.talk_area li .talk_icon {
    width: 28px;
}

.talk_area li .talk_icon img {
    width: 28px;
    height: 28px;
    overflow: hidden;
    object-fit: cover;
    border-radius: 50%;
}

.talk_kiji_ttl {
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: bold;
}

.talk_lesson_ttl {
    font-size: 14px !important;
}

.talk_area li .talk_balloon_box {
    padding: 10px 20px 10px 10px;
    max-width: 80%;
    position: relative;
}

.talk_area li .talk_balloon {
    padding: 14px;
    background: #fff;
    box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.1);
    border-radius: 0px 20px 20px 20px;
    position: relative;
    display: inline-block;
    width: 98%;
}

.talk_area li .talk_balloon.me {
    background: rgba(155, 216, 246, 0.2);
}

.myself {
    flex-flow: row-reverse;
}

.myself .talk_balloon_box {
    padding: 10px 0px 10px 10px !important;
}

.myself .talk_balloon {
    border-radius: 20px 0px 20px 20px !important;
}

.talk_area li .talk_balloon > p {
    font-size: 13px;
    line-height: 160%;
}

.talk_area li .talk_balloon small {
    font-size: 11px;
}

.myself .talk_balloon_box {
    padding: 10px 20px 10px 10px;
    width: 300px;
    position: absolute;
    top: 0px;
    margin-left: auto;
}

.talk_area li .send_time {
    font-size: 9px;
    color: #8d8c8c;
    position: relative;
}

.talk_area li .send_time > span {
    position: absolute;
    width: 60px;
    text-align: right;
}

.talk_area li .send_time > span.you {
    right: -55px;
}

.myself .send_time > span {
    bottom: 6px !important;
    left: -70px;
}

.talk_area_map {
    width: 200px;
    height: 160px;
    background: url("../img/map_dummy.png");
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center center;
    border-radius: 20px;
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.1));
}

.talk_area_map iframe {
    width: 100%;
    height: 100%;
}

.talk_area_btn {
    width: 347px;
    margin: 20px auto;
    border-radius: 10px;
    position: relative;
    text-align: center;
}

.talk_area_btn p {
    padding: 2px 0px;
}

.talk_area_btn p:nth-of-type(1) {
    font-size: 14px;
    font-weight: bold;
}

.talk_area_btn p:nth-of-type(2) {
    font-size: 11px;
    color: #878889;
}

.talk_area_btn a {
    display: block;
    padding: 12px 20px;
}

/* --------------------------------------------------------------------
トークルームのフッター
-------------------------------------------------------------------- */
.talkroom_menu {
    margin: 0px;
    background: #e6e7e8;
    position: fixed;
    width: calc(100% - 258px);
    bottom: 83px;
    left: 258px;
}

@media only screen and (max-width: 736px) {
    .talkroom_menu {
        width: 100%;
        left: 0;
        bottom: 71px;
    }
}

.talkroom_menu a {
    display: block;
}

.talkroom_menu .menu {
    position: relative;
    top: 1px;
}

.send_area {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start;
    width: calc(100% - 30px) !important;
    padding: 5px !important;
    top: 4px;
    left: 0;
    position: absolute;
    background: #9bd8f6;
    border-radius: 0 0 10px 10px;
}

@media only screen and (max-width: 736px) {
    .send_area {
        width: 100% !important;
        border-radius: 0;
    }
}

.send_area > div {
    box-sizing: border-box;
    padding: 5px;
}

.talkroom_menu .input-text {
    width: 84%;
}

.talkroom_menu .file {
    width: 10%;
}

.red-color {
    color: #e83f30;
    font-weight: bold;
}

.image-crop2 {
    margin: 0;
}

.image-crop2 label > input {
    display: none;
}

.image-crop2 label {
    display: block;
    text-align: center;
    color: #000;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}

.image-crop2 label:before {
    content: "";
    display: inline-block;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAMFJREFUSEvtltsNwjAMRU83oZuUUZgEdRJGKZvAJlQXtaiP1DYNkUDCP/mo4+NX7VQUlqqwfVKABjgDOrfkCpyAu+dgCnADDt7FwfjRg6QAj8H4VvrG71JTBCYkByDjitSE5ABqoPMgOQDdVQQmJAJY1mRag2UvKF2K7CV7AF6XzWxGAIGOfaoku+8rAFbO5fno5O4IigP+NVhl4J0f6yNF/r0aeKPAiig0i7QqL8GtNoVpjbaATnPYRXMe0iv+qugBP+A9GRdSZIoAAAAASUVORK5CYII=")
        no-repeat;
    background-size: 100%;
    width: 23px;
    height: 22px;
    position: relative;
    top: 2px;
    margin: 0 10px 0 0;
}

.image-crop2 label > input {
    display: none;
}

.talkroom_menu .pic {
    width: 10%;
}

.talkroom_menu .pic .image-crop label {
    border: none;
    padding: 0;
}

.talkroom_menu .pic .image-crop label:before {
    width: 23px;
    height: 22px;
}

.talkroom_menu .input-text.short-ver {
    width: 64%;
    margin-left: 2%;
}

.talkroom_menu .input-text textarea#textarea {
    width: 100%;
    padding: 10px !important;
    box-sizing: border-box;
    height: 37px;
    border: none;
}

.talkroom_menu .send_btn {
    width: 45px;
}

.send_area .send_btn img {
    filter: drop-shadow(0px 10px 10px rgba(252, 150, 103, 1));
}

.sat {
    color: #0380ce;
}

.sun {
    color: #e25586;
}

ul.good-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

ul.good-btn li {
    margin-bottom: 0 !important;
    width: 49%;
}

ul.good-btn li button {
    border-radius: 50px;
}

ul.good-btn li button.good-btn {
    background: url("../img/btn-good.svg") no-repeat #eee 20% 50%;
    background-size: auto 18px;
    border: none;
    padding: 10px;
    display: block;
    width: 100%;
    font-family: "Roboto", sans-serif;
}

ul.good-btn li button.good-btn.on {
    background: url("../img/btn-good-on.svg") no-repeat #eee 20% 50%;
    background-size: auto 18px;
    font-family: "Roboto", sans-serif;
}

ul.good-btn li button.comment-btn {
    background: url("../img/btn-comment.svg") no-repeat #eee 20% 50%;
    background-size: auto 16px;
    padding: 10px;
    display: block;
    width: 100%;
    border: none;
    font-family: "Roboto", sans-serif;
}

.real-time {
    margin: 10px 0 0 0;
    border-top: 1px solid #ccc;
}

.real-time button {
    background: none;
    border: none;
    padding: 10px;
}

/* ローディング
 ------------------------------------------*/
#loader,
#loader:before,
#loader:after {
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation: load7 1.8s infinite ease-in-out;
    animation: load7 1.8s infinite ease-in-out;
}

#loader {
    color: #ffffff;
    font-size: 10px;
    margin: 80px auto;
    position: relative;
    text-indent: -9999em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

#loader:before,
#loader:after {
    content: "";
    position: absolute;
    top: 0;
}

#loader:before {
    left: -3.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

#loader:after {
    left: 3.5em;
}