@charset "urf-8";

/****************************************
　color
*****************************************/
:root {
    --main-color: #111111;
    --main-blue: #3E81D3;
    --main-pink: #EF8293;
    --sub-text-color: #6C747E;
    --border-color: #CFD2D6;
    --pale-blue: #D6ECFF;
    --important-red: #D61516;
}



/****************************************
  common
*****************************************/
* {
    box-sizing: border-box;
}

html {
    height: 100%;
    font-size: 62.5%;
}

body {
    height: 100%;
    font-size: 1.4rem;
    font-family: Arial, "游ゴシック", "Yu Gothic", Helvetica, source-han-sans-japanese, sans-serif;
    color: var(--main-color);
    margin: 0;
    position: relative;
    min-width: 34.5rem;
}

a {
    display: block;
}

input {
    font-size: 1.5rem;
}

.page-ttl {
    min-width: 19.2rem;
    position: relative;
    font-weight: 600;
    font-size: 2.4rem;
    margin: 2rem 2rem 4rem 2rem;
}

.page-ttl::before {
    content: "";
    position: absolute;
    background-image: url("../img/title_deco.svg");
    background-size: 4rem;
    background-repeat: no-repeat;
    background-position: center;
    width: 5rem;
    height: 6.8rem;
    left: -2rem;
}

.sakura-ttl {
    margin-left: 1rem;
}

select {
    background-color: #ffffff;
    color: var(--main-color);
    font-size: 1.4rem;
}

/* password
--------------------------------------- */
div:has(> .toggle-password) {
    position: relative;
}
.toggle-password {
    position: absolute;
    top: 0;
    right: 0;
    height: 4rem;
    width: 4rem;
    background-image: url(../img/ic_visibility_off.svg);
    background-repeat: no-repeat;
    background-size: 1.8rem;
    background-position: center;
    background-color: transparent;
    border: none;
}
.toggle-password.view {
    background-image: url(../img/ic_visibility.svg);
}
input[type="password"]::-ms-reveal,
input[type="password"]::-webkit-reveal {
    display: none;
}
input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-autofill-button,
input[type="text"]:has(+ .toggle-password)::-webkit-credentials-auto-fill-button,
input[type="text"]:has(+ .toggle-password)::-webkit-autofill-button {
    margin: 0;
    width: 0;
    background-color: transparent;
}

/* button 
--------------------------------------- */
button {
    display: block;
    white-space: nowrap;
    border: initial;
    background-color: initial;
    color: var(--main-color);
}

/* icon button */
.ic-btn {
    background-repeat: no-repeat;
    background-position: center;
}

.btn-caption {
    z-index: 2;
    position: absolute;
    top: 4.4rem;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    display: none;
    padding: .2rem 1.5rem;
    background-color: rgb(0 0 0 / 63%);
    border-radius: 30px;
    white-space: nowrap;
    color: #ffffff;
    font-size: 1.2rem;
}

/* main button */
.normal-btn {
    width: 90%;
    min-width: 15rem;
    max-width: 28rem;
    height: 4.6rem;
    color: #ffffff;
    border-radius: 2.3rem;
    font-weight: 600;
    font-size: 1.5rem;
    background-color: var(--main-color);
    margin-right: auto;
    margin-left: auto;
}

.white {
    background-color: #ffffff;
    color: #111111;
    outline: .2rem solid var(--main-color);
    outline-offset: -.2rem;
    line-height: 4.5rem;
}

/* text button */
.text-btn-area {
    display: flex;
    justify-content: center;
}

.text-btn {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: 1.5rem;
    font-weight: 600;
    padding: .4rem;
    margin-top: 2rem;
}

.text-btn::after {
    content: "";
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    background-image: url(../img/arrow1.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

/* round button */
.round-btn {
    display: block;
    background-image: url("../img/arrow_acc.svg");
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(90deg);
    width: 3.7rem;
    height: 3.7rem;
    background-size: 1.6rem;
    border: .2rem solid #111111;
    border-radius: 2rem;
    background-color: #ffffff;
}

.round-btn:disabled {
    filter: brightness(0) saturate(100%) invert(81%) sepia(0%) saturate(2418%) hue-rotate(194deg) brightness(109%) contrast(85%);
    background-color: transparent;
}

.round-right {
    transform: rotate(-90deg);
}

/* square button */
.square-btn {
    border: .2rem solid var(--main-color);
    align-items: center;
    gap: .4rem;
    color: var(--main-color);
    border-radius: .4rem;
    height: 4rem;
    padding: 0 1.2rem;
}


/* header 
--------------------------------------- */
header {
    width: 100%;
    height: 5.6rem;
    background-color: #ffffff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .8rem 1.6rem;
}

.header-inner img {
    display: block;
    width: auto;
    height: 3.4rem;
    margin: auto;
}

.header-inner .btn-area {
    display: flex;
}

header .btn-area-content {
    position: relative;
}

header .btn-area-content .ic-btn {
    width: 3rem;
    height: 3rem;
    border-radius: .4rem;
    background-color: #ffffff;
    background-size: 2.4rem;
}

.btn-logout .btn-caption {
    left: unset;
    right: 0;
    transform: unset;
    -webkit-transform: unset;
    -ms-transform: unset;
}

header .btn-area-content .btn-account{
    position: relative;
    background-image: url(../img/ic_account.svg);
    background-position: left center;
    width: 4rem;
    margin-right: 1rem;
}

.btn-information {
    background-image: url(../img/ic_info.svg);
    margin-right: 1rem;
}

.btn-question {
    background-image: url(../img/ic_question.svg);
}

header .btn-logout,
.nav-btn {
    display: none;
}

.nav-btn {
    background-color: var(--main-color);
}

.nav-btn::before,
.nav-btn::after,
.nav-btn span {
    background-color: #ffffff;
}

.btn-account::after{
    content: "";
    position: absolute;
    top: 50%;
    right: .2rem;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    border-right: .6rem solid transparent;
    border-left: .6rem solid transparent;
    border-top: .8rem solid var(--main-color);
    border-bottom: 0;
}

.btn-account.open::after {
  border-top: 0;
  border-bottom: .8rem solid var(--main-color);
}


/* nav 
--------------------------------------- */
nav {
    display: block;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: var(--main-color);
    border-top: .2rem solid var(--main-color);
    z-index: 1000;
}

.nav-closed {
    display: none;
}

nav ul {
    display: flex;
    align-items: center;
}

nav li {
    width: 25%;
}

nav a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 6.8rem;
    text-decoration: none;
    text-align: center;
    color: #ffffff;
}

nav a::before {
    content: "";
    display: block;
    margin: .4rem auto .5rem;
    width: 2.4rem;
    height: 2.4rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: brightness(20);
}

.nav-home a::before {
    background-image: url(../img/ic_home.svg);
}

.nav-pay a::before {
    background-image: url(../img/ic_pay.svg);
}

.nav-history a::before {
    background-image: url(../img/ic_history.svg);
}

.nav-news a::before {
    background-image: url(../img/ic_news.svg);
}

.nav-other a::before {
    background-image: url(../img/ic_other.svg);
}

nav a span {
    font-size: 1.3rem;
    letter-spacing: .03rem;
}

/* current */
nav .current a {
    color: var(--main-color);
    background-color: #ffffff;
}

nav .current a::before {
    filter: none;
}

/****************************************
  loading
*****************************************/

.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    transition: all 1s;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: rgba(255, 255, 255, 0.5);
}

.loading .loading-msg {
    position: fixed;
    color: var(--sub-text-color);
    font-size: 1.8rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

/****************************************
  main
*****************************************/
main {
    min-height: calc(100% - 7rem);
    padding: 5.6rem 1.6rem 8.6rem;
}

/* section 
--------------------------------------- */
.section {
    border: .2rem solid var(--main-color);
    border-radius: .6rem;
    padding: 2rem 1.6rem;
}

.section:not(:last-child) {
    margin-bottom: 2rem;
}

.sec-ttl {
    font-size: 2.2rem;
    font-weight: 600;
    margin-left: .4rem;
    position: relative;
}

.sec-ttl::before {
    content: "";
    display: block;
    width: .8rem;
    height: 100%;
    background-color: var(--main-color);
    border-radius: 0 .4rem .4rem 0;
    position: absolute;
    top: 0;
    left: -2rem;
}

.sec-sub-ttl {
    display: block;
    font-size: 1.4rem;
    margin-top: .2rem;
    margin-left: .4rem;
}

.sec-content {
    padding-top: 2rem;
}

/* section - usage data */
.home .section {
    min-width: 30rem;
}

.total-cost {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}

.total-cost p:first-child {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.total-cost .main-cost {
    position: relative;
    z-index: 1;
    font-size: 4.8rem;
    font-weight: 600;
    /* background: linear-gradient(transparent 50%, var(--pale-blue) 50%); */
    padding: 0 1rem;
    margin-bottom: 1rem;
}

.total-cost .main-cost::before {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2rem;
    background-color: var(--pale-blue);
    border-radius: 60rem;
}

.total-cost .main-cost span {
    font-size: 1.8rem;
    font-weight: 600;
    margin-left: .6rem;
}

.total-cost .past-cost {
    color: var(--sub-text-color);
    font-size: 1.8rem;
}

.cost-detail .app-money,
.normal-btn .app-money {
    font-size: 1.2rem;
    font-weight: 500;
    width: calc(100% + 2rem);
    margin-left: -1rem;
}

.app-money span {
    color: var(--main-blue);
}

.home .cost-detail .app-money {
    font-size: 1rem;
}


.home .usage-data .sec-content {
    border-top: .1rem solid var(--main-color);
    margin-top: 2rem;
}

.home .paid::after,
.history .paid::after {
    background-size: 3.4rem;
}

.bun-ttl {
    font-weight: 600;
    font-size: 1.6rem;
    margin: 1rem 0 .4rem 0;
}

.home .sec-sub-ttl {
    margin-left: 0;
}

.home .normal-btn {
    border-radius: 4rem;
}

/* section - cost detail */
.cost-detail {
    display: flex;
    gap: .8rem;
    margin-bottom: 2rem;
}

.cost-detail div {
    width: calc(50% - .4rem);
    text-align: center;
    border: .1rem solid var(--main-color);
    border-radius: .4rem;
    padding: 1.6rem 1rem;
}

.cost-detail div p,
.cost-detail div span {
    font-weight: 600;
    font-size: 1.6rem;
}

.cost-detail div .cost-detail-yen {
    font-size: 2.4rem;
    margin-top: 1rem;
}

.cost-detail div span {
    margin-left: .4rem;
}

.usage-amount:has(.app-money) {
    padding: 1.6rem 1rem .8rem;
}

/* section - news */
.home .news,
.news-pg .news {
    padding-right: 0;
    padding-left: 0;
}

.news-important {
    border-color: var(--important-red);
    padding-bottom: 0;
}

.news .sec-ttl {
    margin-left: 2rem;
}

.news-important .sec-ttl::before {
    background-color: var(--important-red);
}

.home .news .sec-content,
.news-pg .news .sec-content {
    padding-top: 0;
}

.news-list a {
    position: relative;
    text-decoration: none;
    padding: 1.4rem 2.4rem 0 2.4rem;
}

.news-pg .news-list li:not(.important):last-child a {
    padding-bottom: 1rem;
}

.news-pg .news-list li a::after {
    content: "";
    display: block;
    height: .1rem;
    margin-top: 1rem;
    border-bottom: .1rem solid var(--main-color);
}

.home .news .sec-content .news-content .news-list li a {
    padding: 1.4rem 2rem 0 2rem;
}

.home .news .sec-content .news-content .news-list li a::after {
    content: "";
    display: block;
    height: .1rem;
    border-bottom: .1rem solid var(--main-color);
    margin-top: 1rem;
}

.news-important .sec-content .news-content .news-list li:last-child a:after {
    border-bottom: 0;
}

.home .news,
.news-pg .news-important {
    .sec-content .news-content .news-list li:first-child {
        position: relative;
        margin-top: 1rem;

        &::before {
            content: "";
            display: block;
            height: .1rem;
            border-top: .1rem solid var(--main-color);
            width: calc(100% - 4rem);
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
        }
    }
}

.news-list li a .news-ttl {
    font-size: 1.4rem;
    margin-right: 1.8rem;
}

.news-list li:not(.no-news) a::before {
    content: "";
    position: absolute;
    background-image: url("../img/arrow2.svg");
    background-size: 1rem;
    background-repeat: no-repeat;
    background-position: center;
    width: 2rem;
    height: 2rem;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.news-list li a div p:first-child {
    color: var(--sub-text-color);
    font-size: 1.3rem;
}

.news-ttl {
    font-size: 1.8rem;
    color: var(--main-color);
}

/* section pay */
.payment .section {
    display: grid;
    align-items: flex-start;
    grid-template-rows: auto auto 1fr;
}

.payment .section .undecid::after,
.home .section .undecid::after,
.history .undecid::after {
    content: "速報";
    font-size: 1.5rem;
    padding-left: 1rem;
    color: var(--main-blue);
}

.payment .sec-content div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.2rem;
}

.payment .section .sec-ttl {
    font-size: 1.7rem;
    font-weight: 600;
    margin-left: 0;
}

.payment .sec-content {
    display: grid;
    align-items: flex-start;
    grid-template-rows: auto 1fr auto;
    height: 100%;
}

.payment .section p:not(.app-money):last-of-type {
    padding-top: .8rem;
}

.payment .section .app-money {
    display: block;
    padding-top: 0;
    text-align: right;
}

.payment .normal-btn {
    margin-top: 1.2rem;
}

.payment .sec-content div p:first-child {
    font-size: 1.8rem;
    font-weight: 650;
    margin: auto 0;
}

.payment .sec-content div .sec-content-yen {
    position: relative;
    font-size: 3rem;
    font-weight: 650;
}

.payment .sec-content div p:last-child span {
    font-size: 1.8rem;
    font-weight: 600;
    margin-left: .8rem;
}

.paid {
    position: relative;
}

.paid::after {
    content: "";
    position: absolute;
    background-image: url("../img/ic_paid.svg");
    background-size: 4rem;
    background-position: center;
    background-repeat: no-repeat;
    width: 4rem;
    height: 4rem;
    top: 3rem;
    right: 1rem;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.pay-sections .section {
    min-width: 28rem;
    padding: 1.6rem 2rem;
}

/* year-switch */
.year-switch {
    min-width: 24rem;
    display: flex;
    gap: 1.4rem;
    align-items: center;
    justify-content: center;
    padding-top: 1.4rem;
    margin-bottom: 2rem;
}

.year-ttl {
    font-weight: 600;
    font-size: 2.4rem;
    line-height: 3.7rem;
    display: flex;
    justify-content: center;
}

/*section - history - detail */
.history .his {
    min-width: 34rem;
}

.history .cost-detail {
    margin-top: 2rem;
}

.history .cost-detail div {
    border-width: .2rem;
}


.year-detail-switch {
    min-width: 33rem;
    display: flex;
    gap: 1.4rem;
    justify-content: center;
    align-items: center;
    margin: 2rem 0;
}


.year-texts p {
    font-size: 2.2rem;
}

.year-texts span {
    color: var(--sub-text-color);
}


.history .detail-main div:last-child div {
    display: flex;
    justify-content: space-between;
    border-bottom: .1rem solid var(--border-color);
    padding: .6rem .6rem .4rem .6rem;
    height: 3.4rem;
}

.history .detail-main div:last-child div p {
    font-size: 1.4rem;
}

.history .detail-main div:last-child div p span {
    font-weight: 600;
    font-size: 2rem;
}

.detail-main {
    display: flex;
    flex-direction: column;
}

.nofu-dead {
    font-size: 1.8rem;
    text-align: center;
    margin-top: 2rem;
}

.sec-content .app-money {
    text-align: center;
}

.limit-wrapper {
    width: 100%;
    margin: 1rem auto 0 auto;
    text-align: center;
}

.weblimit {
    display: inline-block;
    text-align: left;
}

.history .total-cost {
    margin-bottom: 1rem;
}

.history-graph {
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.history-graph p:first-child {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.history-graph .tab-list:first-of-type {
    padding: 0;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.history-graph div button {
    background-color: #ffffff;
    color: var(--main-color);
    height: 4rem;
    width: 50%;
    float: left;
    outline: none;
    cursor: pointer;
    padding: 0;
    font-size: 1.8rem;
}

.history-graph div button:last-child {
    border-radius: 0 .6rem .6rem 0;
}

.history .square-btn{
    width: 25rem;
    margin: 0 auto;
}

.history .square-btn p{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-size: 1.5rem;
}

.history .square-btn p::before{
    content: "";
    display: block;
    background-image: url(../img/ic_pdf.svg);
    background-size: 1.7rem;
    background-position: center;
    background-repeat: no-repeat;
    width: 2.2rem;
    height: 2.2rem;
}

.history .refund,
.history .fund{
    margin-top: 1rem;
}

.open-tab-content {
    position: relative;
    z-index: 1;
    width: 90%;
    min-width: 32rem;
    height: 38rem;
}

.chartjs-render-monitor {
    display: inline-block;
}

.chart-over {
    position: absolute;
    display: flex;
    height: 67%;
    width: 105%;
    bottom: 0;
    right: 1%;
}

.column-name {
    position: absolute;
    text-align: center;
    width: 3rem;
    top: 25%;
    color: var(--sub-text-color);
}

.chart-over div:not(:first-child) {
    position: relative;
    flex: 1;
    height: 100%;
}

.chart-over .chose span {
    position: relative;
    display: block;
    background-color: #7ba2d158;
    z-index: -1;
    width: 100%;
    height: 100%;
}

.chart-over div:first-child {
    position: relative;
    height: 100%;
    width: 5.6rem;
}

.chart-over div:hover {
    display: block;
}

.chart-over .chose::before {
    content: "";
    position: absolute;
    display: inline-block;
    width: .3rem;
    height: 4.6rem;
    background-color: var(--main-color);
    top: -4.5rem;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);

}

.chart-over .chose::after {
    content: "";
    position: absolute;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-color: var(--main-color);
    border-radius: 50%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

.tooltip {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 90%;
    height: 10rem;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

.tooltip div {
    display: flex;
    height: 4rem;
    width: 100%;
}

.tooltip .this-year {
    border: .3rem solid var(--main-color);
}

.tooltip .last-year {
    border-right: .3rem solid var(--main-color);
    border-bottom: .3rem solid var(--main-color);
    border-left: .3rem solid var(--main-color);
}

.this-year .chart-color {
    width: 5%;
    height: 100%;
    background-color: var(--main-color);
}

.last-year .chart-color {
    width: 5%;
    height: 100%;
    background-size: auto auto;
    background-color: rgba(255, 255, 255, 1);
    background-image: repeating-linear-gradient(135deg, transparent, transparent .3rem, #6c747e .2rem, #6c747e .5rem);
}

.this-date,
.last-date {
    font-size: 1.6rem;
    margin: auto 0;
    padding-left: 1rem;
}

.this-pay,
.last-pay {
    margin: auto 2rem auto auto;
    font-size: 1.6rem;
    font-weight: 500;
}

.this-pay span,
.last-pay span {
    font-weight: 600;
    font-size: 2.2rem;
    margin-right: .4rem;
}


/* タブコンテンツ */
.tab-list {
    display: flex;
}

.tab-list .open {
    border-radius: .6rem 0 0 .6rem;
    background-color: var(--main-color);
    color: #ffffff;
}

.tab-list .total-btn {
    border-radius: .6rem 0 0 .6rem;
}

/* section pay kind */
.pay-kind .page-ttl {
    min-width: 17rem;
}

.pay-kind .year-texts {
    min-width: 26.8rem;
}

.pay-kind .section {
    min-width: 28.4rem;
}

.pay-kind .year-texts .year-sub-ttl {
    display: block;
    text-align: center;
    margin-bottom: 1rem;
}

.pay-kind .sec-content .conv-pay,
.pay-kind .sec-content .paypay {
    margin-bottom: 2rem;
}

/* section pay comp */
.pay-comp .page-ttl {
    min-width: 31.2rem;
}

.pay-comp .txt {
    width: 90%;
    margin: 0 auto 1.4rem auto;
}

/* section news */
.news-sec {
    min-width: 32.2rem;
    padding: 0;
}

.news-pg .news-important {
    min-width: 32.2rem;
}

.news-sec .sec-content {
    padding-top: 0;
}

.news-content .news-list {
    border-top: 0;
}

.news-content .news-list li:last-child {
    border-bottom: 0;
}

.news-pg .news-important {
    margin-bottom: 0;
}

.news-sec .news-content .news-list li:last-child a::after {
    height: 0;
    margin: 0;
    border-bottom: 0;
}

.news-content ul .notice a::before {
    filter: brightness(0) saturate(100%);
}

.news-content ul .important a::before {
    filter: brightness(0) saturate(100%) invert(34%) sepia(69%) saturate(7417%) hue-rotate(346deg) brightness(80%) contrast(111%);
}

.news-content ul li a div {
    display: flex;
    align-items: center;
    gap: 1rem;
    line-height: 2rem;
    padding-bottom: .2rem;
}

.news-content ul .notice a div p:last-child {
    display: inline-block;
    padding: 0 .6rem;
    font-size: 1.2rem;
    height: 2rem;
}

.news-content ul .notice a div p:last-child {
    color: #111111;
    border: solid .1rem #111111;
}

.news-content ul .important a div .kind {
    color: #D61516;
    border: solid .1rem #D61516;
}

/* section news detail */
.news-detail-pg .section {
    min-width: 29.6rem;
    position: relative;
    padding: 3rem 2rem;
}

.news-detail-pg .section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 20%;
    height: 20%;
    background-image: url("../img/triangle.svg");
    background-repeat: no-repeat;
    border-radius: .4rem;
}

.news-detail-pg .important::before {
    filter: brightness(0) saturate(100%) invert(15%) sepia(48%) saturate(6745%) hue-rotate(350deg) brightness(98%) contrast(100%);
}

.news-back {
    margin-top: 0;
}

.news-back::after {
    content: none;
}

.news-back::before {
    content: "";
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    background-image: url("../img/arrow1.svg");
    background-repeat: no-repeat;
    background-size: contain;
    transform: rotate(180deg);
}

.news-detail-pg .section div {
    display: flex;
    align-items: flex-start;
    flex-direction: column-reverse;
    line-height: 2rem;
}

.news-detail-pg .section div p:first-child {
    padding-top: 0;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.3;
}

.news-detail-pg .section div p:last-child {
    font-size: 1.2rem;
    padding: 0 .6rem;
    margin-bottom: 1rem;
}

.news-detail-pg .section div p:last-child {
    color: #111111;
    border: solid .1rem #111111;
}

.news-detail-pg .important div p:last-child {
    color: #D61516;
    border: solid .1rem #D61516;
}

.section .news-detail-date {
    text-align: right;
    padding-top: 1rem;
    color: var(--sub-text-color);
}

.section .news-detail-txt {
    padding-top: 1rem;
}

.section .news-detail-txt-line {
    border-top: .2rem solid var(--border-color);
    margin-top: 2rem;
}

.section .news-file {
    word-break: break-all;
    align-items: center;
    line-height: 1.6rem;
    padding-top: 1.5rem;
    color: var(--main-blue);
}

.section .news-file::after {
    content: "";
    display: inline-block;
    background-image: url("../img/ic_download.svg");
    background-size: 1.6rem;
    background-repeat: no-repeat;
    background-position: bottom;
    width: 1.8rem;
    height: 1.8rem;
    margin-left: .4rem;
    filter: brightness(0) saturate(100%) invert(40%) sepia(96%) saturate(731%) hue-rotate(183deg) brightness(94%) contrast(75%);
}

.section .news-detail-txt a,
.law .section .info-detail p a,
.contact-detail a {
    word-break: break-all;
    color: var(--main-blue);
}

.section .news-detail-txt a::after,
.law .section .info-detail p a::after,
.contact-detail a::after {
    content: "";
    display: inline-block;
    background-image: url("../img/ic_link.svg");
    background-size: 1rem;
    background-repeat: no-repeat;
    background-position: bottom;
    width: 1.4rem;
    height: 1.4rem;
}

.bus-day {
    margin-top: .4rem;
}

/* section other */
.other-pg .section.section:not(:last-child),
.kakushu-pg .section {
    margin-bottom: 1rem;
}

.other-pg div {
    min-width: 23.8rem;
    padding: 0;
}

.other-pg div ul li a {
    position: relative;
    text-decoration: none;
}

.other-pg div ul li a p {
    color: #111111;
    display: flex;
    align-items: center;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 2.2rem;
}


.other-pg div ul li a {
    padding: 1.8rem 2.4rem 0 2.4rem;
}

.other-pg div ul li:last-child a {
    padding-bottom: 1.8rem;
}

.last-other-data {
    padding: 0 1.2rem;
}

.other-pg div:first-of-type ul li:not(:last-child) a::after {
    content: "";
    display: block;
    height: .1rem;
    margin-top: 1.8rem;
    border-bottom: .1rem solid var(--border-color);
}


.other-pg div ul li a::before {
    content: "";
    position: absolute;
    background-image: url("../img/arrow2.svg");
    background-size: 1rem;
    background-repeat: no-repeat;
    background-position: center;
    width: 2rem;
    height: 2rem;
    top: 50%;
    right: 2%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    filter: brightness(0);
}

.other-register::before,
.other-pass::before,
.other-mail::before,
.other-reg-cancel::before,
.other-tetsuduki::before,
.other-law::before,
.other-qa::before,
.other-logout::before,
.other-mobile::before,
.other-account-connect::before {
    content: "";
    display: block;
    background-image: url("../img/ic_register_user.svg");
    background-size: 1.6rem;
    background-repeat: no-repeat;
    background-position: center;
    width: 2rem;
    height: 2.2rem;
    margin-right: 1rem;
}

.other-pass::before {
    background-image: url("../img/ic_key.svg");
    background-size: 1.68rem;
    filter: brightness(0) saturate(100%);
}

.other-mail::before {
    background-image: url("../img/ic_mail.svg");
    background-size: 1.8rem;
    filter: brightness(0) saturate(100%);
}

.other-mobile::before {
    background-image: url("../img/ic_phone.svg");
    background-size: 1.8rem;
    filter: brightness(0) saturate(100%);
}

.other-account-connect::before {
    background-image: url("../img/ic_line.svg");
    background-size: 2rem;
    filter: brightness(0) saturate(100%);
}

.other-tetsuduki::before {
    background-image: url("../img/ic_tetsuduki.svg");
    background-size: 2rem;
}

.other-reg-cancel::before {
    background-image: url("../img/ic_delete.svg");
    background-size: 1.6rem;
    filter: brightness(0) saturate(100%);
}

.other-law::before {
    background-image: url("../img/ic_info.svg");
    background-size: 2rem;
}

.other-qa::before {
    background-image: url("../img/ic_conctact.svg");
    background-size: 2rem;
}

.other-logout::before {
    background-image: url("../img/ic_logout.svg");
    background-size: 1.7rem;
}

.other-confirm{
        width: 90%;
    margin: 0 auto 4rem auto;
}

/* section other user-info
--------------------------------------- */
.user-info {
    min-width: 36rem;
}

.user-info .section {
    padding: 1rem 1.6rem;
    margin-bottom: 1rem;
}

.user-info .section div:not(.sec-ttl) {
    padding: 0 .6rem 1rem .4rem;
}

.user-info .section div .info-detail {
    padding: 0;
    line-height: 2.4rem;
}

.user-info:not(.law) .section .crowd .info-detail {
    width: calc(100% - 16rem);
}

.user-info .section div .info-detail p {
    word-break: break-all;
}

.user-info .section div:first-child {
    padding-top: 0;
    padding-bottom: 1rem;
}

.user-info .section div:last-child {
    padding-bottom: 0;
}

.user-info .first-info div:not(:last-child),
.user-info .section:not(.first-info) div:not(:first-child, :last-child, .dott-line) {
    border-bottom: .1rem solid var(--border-color);
    margin-bottom: 1rem;
}

.user-info .section .crowd {
    display: flex;
    align-items: flex-start;
    line-height: 2rem;
}

.user-info .section div:not(.crowd) .info-title {
    padding-bottom: .6rem;
}

.user-info div div .info-title {
    display: flex;
    align-items: flex-start;
    width: 29rem;
    color: var(--sub-text-color);
    font-weight: 600;
}

.user-info .section div .kana p:first-child {
    padding-right: 1rem;
}

.user-info .kana p:last-child {
    color: var(--sub-text-color);
}

.user-info div .sec-ttl {
    font-size: 1.8rem;
}

.user-info div .sec-ttl::before {
    height: 2.7rem;
}

/* section other pass change */
.other-change {
    min-width: 30rem;
}

.other-change .page-ttl {
    width: 85%;
    margin-right: auto;
    margin-left: auto;
}


.other-change .log-input div input {
    margin-bottom: 0;
}

.other-change .login-pass div::before {
    top: 50%;
}

.other-change .new-pass {
    margin-top: 2rem;
}

/* section other pass change comp */
.pass-change-comp .forgot-detail {
    margin-bottom: 4rem;
    text-align: center;
}

/* section other mail change */
.mail-change div div:first-child div {
        font-weight: 600;
        border-bottom: .2rem solid var(--main-color);
        line-height: 4rem;
    }

.mail-change div .log-input{
    margin-bottom: 2rem;
}

.mail-change,
.mobile-change {
    div .log-input div {
        position: relative;
    }
}

.mail-change div .log-input div::before {
    content: "";
    background-image: url('../img/ic_mail.svg');
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    top: 50%;
    width: 1.6rem;
    height: 1.4rem;
    left: 1rem;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.mail-change {
    .log-input:first-child div::before {
        content: none;
    }
}

.other-change .login-mobile-no div::before {
    top: 50%;
}

/* section other mobile change */
.mobile-change .log-input .mobile-now{
    font-weight: 600;
    border-bottom: .2rem solid var(--main-color);
    line-height: 4rem;
    margin-bottom: 2rem;
}

.mobile-change .log-input select {
    padding-left: 1rem;
    margin-bottom: 0;
}

.mobile-change .log-input .select::after {
    top: 50%;
}

.mobile-change .control-checkbox{
    display: block;
}

.mobile-change div .log-input:not(label),
.mobile-change .normal-btn {
        margin-top: 2rem;
    }

.mobile-change .control-checkbox .register-checkbox{
    margin: 0;
}

.check-text{
    margin-left: 2.8rem;
    margin-top: .6rem;
}

.sms-cancel-alert {
    display: flex;
    align-items: center;
    margin: 2rem auto 0 auto;
    padding: .6rem 1rem;
    width: 90%;
    max-width: 50rem;
    border: .1rem solid #D61516;
    background-color: #fff4f4;
    border-radius: .2rem;
}

.sms-cancel-alert p{
    display: block;
    background-image: url("../img/ic_error.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 2rem;
    width: 2.6rem;
    height: 2.2rem;
    margin-right: .6rem;
}

/* section other account link */
.account-link .account-list-title{
    text-align: center;
    font-weight: 600;
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.account-link .section,
.account-cancel .account-info-area{
    display: flex;
    justify-content: space-around;  
    width: 100%;
}

.account-cancel .register-checkbox{
    margin: 0;
}

.account-link .section .account-info,
.account-cancel .section .account-info{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.account-link .account-info p,
.account-cancel .account-info p{
    display: inline-block; 
    vertical-align: middle;
}

.account-link .info-title,
.account-cancel .info-title{
    font-weight: 600;
    font-size: 1.5rem;
    text-align: center;
    min-width: 7rem;
    margin-right: 0;
    color: var(--sub-text-color);
}

.account-link .info-detail,
.account-cancel .info-detail{
    font-weight: 600;
    font-size: 1.8rem;
    word-break: break-all;
    margin-top: .5rem;
}

.account-link .account-add-link,
.account-link .account-cancel-link{
    justify-content: center;
    width: 100%;
    margin: 2rem 0;
}

.account-cancel-link{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font-weight: 600;
    font-size: 1.5rem;
}

.account-cancel-link::before{
    content: "";
    display: inline-block;
    width: 1.8rem;
    height: 1.8rem;
    background-image: url(../img/ic_cancel2.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

/* section other account cancel */
.account-cancel .normal-btn{
    margin-top: 2rem;
}

.account-cancel .section{
    display: flex;
    align-items: center;
}

.account-cancel .log-input{
    width: auto;
    margin-right:0 ;
    margin-left: 0;
}

.account-cancel .register-checkbox{
    width: 100%;
}

/* section other kakushu */
.kaku-arrow {
    content: "";
    background-image: url("../img/arrow1.svg");
    background-size: 2.6rem;
    background-repeat: no-repeat;
    background-position: center;
    width: 4rem;
    height: 5rem;
    left: -2rem;
    transform: rotate(180deg);
    filter: brightness(0) saturate(100%);
}


.kakushu-sec .section {
    min-width: 35rem;
    padding: 0;
}

.kakushu-sec p:first-child {
    margin-bottom: 2rem;
}

.kakushu-sec .section .kaku-ttl {
    position: relative;
    width: 100%;
    font-size: 1.6rem;
    padding: 1.4rem 1.4rem 1.4rem 2.4rem;
    font-weight: 600;
    text-align: left;
}

.kakushu-sec .open .kaku-ttl::before {
    position: absolute;
    content: "";
    display: block;
    width: 95%;
    height: .2rem;
    background-color: var(--main-color);
    top: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.kakushu-sec .open .kaku-ttl::after {
    content: "";
    position: absolute;
    background-image: url("../img/arrow_acc.svg");
    background-size: 1.4rem;
    background-repeat: no-repeat;
    background-position: center;
    width: 3rem;
    height: 3rem;
    top: 20%;
    right: 2%;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
}

.kakushu-sec .close .kaku-ttl::after {
    content: "";
    position: absolute;
    background-image: url("../img/arrow_acc.svg");
    background-size: 1.4rem;
    background-repeat: no-repeat;
    background-position: center;
    width: 3rem;
    height: 3rem;
    top: 50%;
    right: 2%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.kakushu-sec .open p {
    padding: 1rem 2rem 2rem 2rem;
}

.kakushu-sec .open .normal-btn {
    position: relative;
    margin-bottom: 1.4rem;
}

.kakushu-sec .open .normal-btn a {
    padding-right: 2rem;
}

.kakushu-sec .open .normal-btn::after {
    content: "";
    position: absolute;
    background-image: url("../img/ic_page.svg");
    background-size: 1.3rem;
    background-repeat: no-repeat;
    background-position: center;
    width: 2rem;
    height: 2rem;
    top: 50%;
    right: 18%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
}

.kakushu-sec .close .kaku-ttl {
    border-bottom: none;
}

.kakushu-sec .section p a {
    position: relative;
    display: inline;
    color: var(--main-blue);
    margin-right: 1.8rem;
}

.contact-detail {
    padding: 2rem;
}

/* section other liq */
.liquiry .pc-line .forgot-detail {
    display: block !important;
}


/* pagination 
--------------------------------------- */
.pagination-area {
    line-height: 3.6rem;
    padding: .6rem 0;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    min-width: 32.2rem;
}

.pagination .paging-btn {
    display: flex;
    gap: .4rem;
}

.pagination .paging-btn button {
    display: flex;
    align-items: center;
    justify-content: center;
    border: .2rem solid var(--border-color);
    border-radius: .4rem;
    background-color: #ffffff;
    min-width: 2.2rem;
    height: 2.4rem;
}

.pagination .paging-btn button:first-child,
.pagination .paging-btn button:last-child {
    max-width: 2.2rem;
    width: 2.2rem;
}

.pagination .paging-btn button:first-child div {
    border-top: 0.6rem solid transparent;
    border-bottom: 0.6rem solid transparent;
    border-right: 0.7rem solid var(--main-color);
}

.pagination .paging-btn button:last-child div {
    border-top: 0.6rem solid transparent;
    border-bottom: 0.6rem solid transparent;
    border-left: 0.7rem solid var(--main-color);
}

.pagination .paging-btn .now-page {
    color: #ffffff;
    background-color: var(--main-color);
    border: var(--main-color);
}

.pagination .paging-btn button:disabled {
    opacity: .4;
    background-color: #fdfdfd;
    cursor: default;
}

/****************************************
  login
*****************************************/
/* login
--------------------------------------- */

main .login-logo {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.login-logo img {
    display: block;
    width: auto;
    height: 3.8rem;
    margin-right: auto;
    margin-bottom: 5.4rem;
}

.login-sec {
    min-width: 20rem;
    max-width: 38rem;
    margin: 0 auto;
}

.login-sec .pc-line .normal-btn {
    max-width: none;
    margin-bottom: 2rem;
}

/* .login-sec .pc-line {
    min-width: 26.2rem;
} */

.login .login-ttl,
.register .login-ttl,
.register-full .login-ttl,
.pass-forgot .login-ttl {
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 2.4rem;
}


.log-input {
    width: 90%;
    margin-right: auto;
    margin-left: auto;
}

.log-input p {
    font-weight: 600;
    margin-bottom: .6rem;
    font-size: 1.3rem;
}

.log-input .section {
    min-width: 15rem;
    padding: .4rem .4rem .4rem 3.2rem;
    width: 100%;
    height: 4rem;
    margin-bottom: 2rem;
}

.log-input div {
    position: relative;
}

.login-id div::before,
.login-pass div::before,
.login-mobile-no div::before {
    content: "";
    position: absolute;
    background-image: url("../img/ic_id.svg");
    background-size: 1.8rem;
    background-repeat: no-repeat;
    background-position: center;
    width: 2rem;
    height: 2rem;
    top: 32%;
    left: 1rem;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.login-pass div::before {
    background-image: url("../img/ic_key.svg");
    background-size: 1.4rem;
}

.login-mobile-no div::before {
    background-image: url("../img/ic_phone.svg");
}

.login-mobile-ohter .section {
    padding-left: 1rem;
}

.login-sec .login-mobile-owner select {
    -webkit-appearance: none;
    appearance: none;
    padding: 0 3rem 0 1rem;
}

.login-mobile-owner .select::after {
    content: "";
    position: absolute;
    top: 35%;
    right: 1rem;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    border-right: .8rem solid transparent;
    border-left: .8rem solid transparent;
    border-top: 1rem solid var(--main-color);
    border-bottom: 0;
    pointer-events: none;
}

.login-mobile-owner select {
    -webkit-appearance: none;
    appearance: none;
}


.login button:not(:last-child) {
    margin-bottom: 2rem;
}

.fogot-group {
    position: relative;
    margin-bottom: 2rem;
}

.fogot-group a {
    margin-bottom: 1rem;
    line-height: 1.4rem;
    text-align: center;
    text-decoration: none;
    color: #111111;
}

.fogot-group a:first-child::after {
    content: "";
    position: absolute;
    background-image: url("../img/arrow1.svg");
    background-size: 1.4rem;
    background-repeat: no-repeat;
    background-position: center;
    width: 2rem;
    height: 1.4rem;
}

.fogot-group a:last-child::after {
    content: "";
    position: absolute;
    background-image: url("../img/arrow1.svg");
    background-size: 1.4rem;
    background-repeat: no-repeat;
    background-position: center;
    width: 2rem;
    height: 1.4rem;
}

.login .auto-login {
    text-align: center;
    margin-bottom: 2rem;
}

.login .register-checkbox {
    justify-content: center;
}

.login .text-name {
    font-weight: 500;
}

/* register temp
--------------------------------------- */

.rules-txt {
    margin-bottom: 0;
    overflow-y: auto;
}

.use-rules .section {
    padding: .4rem;
    height: 12rem;
    margin-bottom: 2rem;
}

.register-checkbox {
    display: flex;
    gap: .8rem;
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 2rem;
}

.register-checkbox input[type=checkbox] {
    display: none;
}

.control_indicator {
    height: 2rem;
    width: 2rem;
    background: white;
    border-radius: .3rem;
    border: .2rem solid var(--main-color);
}

.text-name {
    font-weight: 600;
    margin: auto 0;
}

.control input:checked+.control_indicator {
    background: var(--main-color);
}

.control_indicator::before {
    content: '';
    display: block;
    position: relative;
    left: .6rem;
    top: .2rem;
    width: .3rem;
    height: .8rem;
    border: solid var(--main-color);
    border-width: 0 .3rem .3rem 0;
    transform: rotate(45deg);
    opacity: 0;
}

.control_indicator::after {
    content: '';
    display: block;
    position: relative;
    left: .6rem;
    top: -.8rem;
    width: .3rem;
    height: .8rem;
    border: solid #ffffff;
    border-width: 0 .3rem .3rem 0;
    transform: rotate(45deg);
    opacity: 0;
}

.control input:checked+.control_indicator::after {
    opacity: 1;
}

.user-num div::before {
    content: "";
    position: absolute;
    background-image: url("../img/ic_user.svg");
    background-size: 1.4rem;
    background-repeat: no-repeat;
    background-position: center;
    width: 2rem;
    height: 2rem;
    top: 32%;
    left: 3%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.sui-num div::before {
    content: "";
    position: absolute;
    background-image: url("../img/ic_suidou.svg");
    background-size: 1.8rem;
    background-repeat: no-repeat;
    background-position: center;
    width: 2rem;
    height: 2rem;
    top: 32%;
    left: 3%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.mail-add div::before {
    content: "";
    position: absolute;
    background-image: url("../img/ic_mail.svg");
    background-size: 1.6rem;
    background-repeat: no-repeat;
    background-position: center;
    width: 2rem;
    height: 2rem;
    top: 32%;
    left: 3%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

/* register temp sent
  --------------------------------------- */
.register {
    padding-bottom: 2.6rem;
}

.reg-mail-ttl,
.pas-mail-ttl {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 2rem;
    width: 90%;
    margin-right: auto;
    margin-left: auto;
}

.reg-warning {
    display: flex;
    gap: .4rem;
    align-items: center;
    font-weight: 600;
    font-size: 1.8rem;
    margin-bottom: 2rem;
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    line-height: 1.8rem;
    min-width: 25.2rem;
}

.reg-warning::before {
    content: "";
    display: block;
    background-image: url("../img/ic_error.svg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 2.2rem;
    height: 2.2rem;
}

.warning-red {
    color: #D61516;
    margin-bottom: 1.4rem;
}

.warning-detail,
.register-mail .warning-red {
    width: 90%;
    margin-right: auto;
    margin-left: auto;
}

.register-mail .login-sec .section {
    padding: 1.4rem;
    margin-bottom: 2rem;
    width: 90%;
    margin-right: auto;
    margin-left: auto;
}

.pass-mail .text-btn-area,
.pass-forgot .text-btn-area {
    margin-top: 2rem;
}

.register-mail .login-sec .text-btn-area,
.pass-mail .login-sec .text-btn-area {
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    text-decoration: none;
}

.register-mail .login-sec .text-btn-area button,
.pass-mail .login-sec .text-btn-area button {
    margin: 0;
    font-size: 1.4rem;
}

.register-back {
    display: flex;
    gap: .4rem;
    line-height: 1.4rem;
    margin: 0 auto;
}

.register-back::before {
    content: "";
    display: block;
    width: 2rem;
    height: 1.4rem;
    background-image: url("../img/arrow1.svg");
    background-repeat: no-repeat;
    background-size: 1.4rem;
    transform: rotate(180deg);
}

/* register
--------------------------------------- */
.register-full .login-pass-same {
    margin-bottom: 0;
}

.register-full .login-sec .pc-line .normal-btn {
    margin-bottom: 0;
    margin-top: 1rem;
}

/* register comp
--------------------------------------- */
.register-comp .login-sec .pc-line .warning-detail {
    margin-bottom: 2rem;
}

.login-back {
    text-decoration: none;
}

/* password forgot
--------------------------------------- */

.forgot-detail {
    width: 90%;
    margin: 0 auto 1.4rem auto;
}

.pass-id-btn {
    color: #ffffff;
    text-decoration: none;
}

.pass-forgot .text-btn-area {
    text-decoration: none;
}

.login-pass-same {
    margin-bottom: 2rem;
}

/* password forgot sent
--------------------------------------- */
.pass-mail .warning-detail {
    margin-bottom: 1.4rem;
    width: 90%;
    margin-right: auto;
    margin-left: auto;
}

.pass-mail .section {
    padding: 1.4rem;
    width: 90%;
    margin-right: auto;
    margin-left: auto;
}

/* password reset2
--------------------------------------- */
.login-pass .pass-first::before,
.pass-res2 .log-input:last-of-type div input::before {
    top: 50%;
}

.pass-res2 .log-input:first-of-type .section {
    margin-bottom: 0;
}

.detail-gray {
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 2rem;
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--sub-text-color);
}

/* id forgot sent
--------------------------------------- */
.id-mail .normal-btn {
    margin-top: 2rem;
}

/* error
--------------------------------------- */
.error-area {
    display: flex;
    align-items: center;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 1.6rem;
    padding: .6rem 1rem;
    width: 90%;
    border: .1rem solid #D61516;
    background-color: #fff4f4;
    border-radius: .2rem;
}

.err-msg {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 1.6rem;
    padding: .6rem 1rem;
    width: 90%;
    border: .1rem solid #D61516;
    background-color: #fff4f4;
    border-radius: .2rem;
}

.err-msg::before {
    content: "";
}

.error-area p,
.err-msg::before {
    display: block;
    background-image: url("../img/ic_error.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 2rem;
    height: 2.2rem;
    margin-right: .6rem;
}

.error-area p {
    width: 2.6rem;
}

.err-msg::before {
    width: 3.4rem;
}

.error .pc-line {
    background-color: #ffffff;
    border: .2rem solid var(--main-color);
    border-radius: .6rem;
    padding: 2rem 1.6rem;
}

.error .login-sec .pc-line p {
    margin: 0 auto;
    text-align: center;
}

.error .login-sec .pc-line p:first-child {
    background-image: url("../img/ic_error.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12rem;
    height: 12rem;
    width: 12rem;
    filter: brightness(0) saturate(100%) invert(47%) sepia(14%) saturate(325%) hue-rotate(173deg) brightness(92%) contrast(85%);
}

.error .login-sec .pc-line p:nth-child(2) {
    font-size: 4rem;
    font-weight: 600;
    margin: 2rem auto;
    width: 14rem;
    color: #6C747E;
}

.error .login-sec .pc-line p:last-of-type {
    margin-bottom: 2rem;
}

/* account link section
--------------------------------------- */
.account-link-section{
    position: fixed;
    top: 5rem;
    border: .3rem solid var(--main-color);
    border-radius: 0 0 2rem 2rem;
    height: auto;
    width: 100%;
    z-index: 2000;
    background-color: #ffffff;
}

.account-link-section::before{
    content: "";
    display: block;
    width: 5rem;
    height: .8rem;
    background-color: var(--main-color);
    border-radius: .4rem .4rem 0 0;
    position: absolute;
    bottom: 0;
    left: calc(50% - 2.5rem);
}

.account-link-body{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    z-index: 2000;
}

.active-account{
    display: flex;
    margin-right: 2rem;
    margin-left: 2rem;
}

.active-account{
    justify-content: space-around;
    margin-top: 1rem;
}

.linked-account{
    display: flex;
    position: relative;
    justify-content: space-around;
    text-decoration: none;
    padding: 1rem 2rem;
    width: 100%;
}

.linked-account::before{
    content: "";
    position: absolute;
    background-image: url(../img/arrow2.svg);
    background-size: 1rem;
    background-repeat: no-repeat;
    background-position: center;
    width: 2rem;
    height: 2rem;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    filter: brightness(0) saturate(50%);
}

.linked-account::after{
    content: "";
    position: absolute;
    display: block;
    width: calc(100% - 4rem);
    height: .1rem;
    border-bottom: .1rem solid var(--main-color);
    margin-top: .9rem;
    transform: translateY(4rem);
}

.linked-account .account-info-detail{
    color: var(--main-color);
}

.account-info-title{
    font-size: 1.3rem;
    font-weight: 600;
    width: 8rem;
    text-align: center;
    color: var(--sub-text-color);
}

.account-info-detail{
    font-weight: 600;
    font-size: 1.6rem;
    width: 8rem;
    margin-top: .4rem;
    text-align: center;
}

.other-account-linked-title{
    font-weight: 600;
    margin: 2rem 2rem 0 2rem;
    padding-bottom: .5rem;
    border-bottom: .1rem solid var(--main-color);
}

.account-add-link{
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 600;
    font-size: 1.5rem;
    margin: 2rem 0 2rem 2rem;
}

.account-add-link::before{
    content: "";
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    background-image: url(../img/ic_plus.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

body.modal-open a,
body.modal-open .text-btn,
body.modal-open .btn-logout,
body.modal-open .nav-btn{
    pointer-events: none;
}

body.modal-open li:hover{
    background: inherit !important;
    cursor: default !important;
}

/* account link add
--------------------------------------- */
.account-add .login-id .id-input::before{
    top: 50%;
}

.account-add .login-pass{
    margin-bottom: 2rem;
}

/* account link cancel
--------------------------------------- */
.account-cancel .normal-btn:disabled {
    background-color:var(--border-color);
}



/****************************************
  responsive
*****************************************/
@media screen and (min-width: 768px) {

    /* header 
  --------------------------------------- */
    header {
        display: flex;
        align-items: center;
        height: 5rem;
        border-bottom: .2rem solid var(--main-color);
        padding: .4rem;
    }

    .header-inner {
        width: calc(100% - 4.4rem);
        justify-content: space-between;
    }

    /* header - logo */
    .header-inner img {
        height: 3rem;
    }

    /* header - button */
    header .btn-logout {
        display: block;
    }

    header .btn-area {
        display: flex;
        align-items: center;
        gap: .6rem;
    }

    header .manual {
        border-right: .1rem solid var(--border-color);
        padding-right: 1rem;
        margin-right: 1rem;
    }

    header .btn-area button:not(:last-child) {
        border-right: .1rem solid var(--border-color);
    }

    .btn-logout {
        background-image: url(../img/ic_logout.svg);
        background-size: 2rem !important;
    }

    @media (hover) {
        header .btn-area-content .ic-btn:hover {
            background-color: #edeeee;
        }

        header .btn-area-content .ic-btn:hover .btn-caption {
            display: block;
        }
    }

    .nav-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 4rem;
        height: 4rem;
        border-radius: .4rem;
    }

    .button-closed .nav-btn {
        background-color: #ffffff;
    }

    .nav-btn span {
        margin: .5rem 0;
    }

    .nav-btn span,
    .nav-btn::before,
    .nav-btn::after {
        display: block;
        width: 1.8rem;
        height: .2rem;
        background-color: #ffffff;
    }

    .button-closed .nav-btn span,
    .button-closed .nav-btn::before,
    .button-closed .nav-btn::after {
        background-color: var(--main-color);
    }

    .nav-btn::before,
    .nav-btn::after {
        content: "";
    }

    .account-link-section{
        max-width: 40rem;
        right: 0;
        border-top: none;
    }


    /* nav 
  --------------------------------------- */
    nav {
        position: fixed;
        width: 22rem;
        top: 5rem;
        left: 0;
    }

    nav ul {
        display: block;
        padding: .8rem 1rem;
    }

    nav li {
        width: 100%;
        margin-bottom: 1.2rem;
    }

    nav a {
        height: auto;
        flex-direction: row;
        justify-content: flex-start;
        gap: 1.2rem;
        border-radius: .4rem;
        padding: 1rem 1.6rem;
        margin: 0 auto;
    }

    nav a::before {
        margin: 0;
    }

    nav a span {
        font-size: 1.5rem;
    }


    /* main 
  --------------------------------------- */
    main {
        max-width: 1420px;
        height: auto;
        padding: 8rem 3rem 2rem 25rem;
        margin: 0 auto;
    }

    .main-closed {
        padding-left: 3rem;
    }

    body {
        background-color: #F6F6F6;
    }

    .section:not(.history-graph div button) {
        background-color: #ffffff;
    }

    .home {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 2rem;
        height: auto;
    }

    .history .detail-main h2 {
        display: block !important;
        text-align: center;
        font-size: 1.8rem;
        font-weight: 600;
    }

    .sec-ttl {
        font-size: 2rem;
    }

    .sec-sub-ttl {
        font-size: 1.5rem;
    }

    /* hover */
    button:hover,
    nav a:hover,
    .kaku-arrow:hover,
    .fogot-group a:hover,
    .linked-account:hover,
    .btn-account:hover,
    .square-btn:hover,
    .toggle-password:hover {
        cursor: pointer;
    }

    .normal-btn:not(.white):not(:disabled):hover,
    .round-btn:not(:disabled):hover,
    .history-graph .tab-list .open:hover,
    .kaku-arrow:hover,
    .news-file:hover,
    .contact-detail a:hover,
    .section .news-detail-txt a:hover,
    .law .info-detail p a:hover {
        opacity: .75;
    }

    .home .text-btn:hover,
    .news-detail-pg .text-btn:hover,
    .fogot-group a:hover,
    .register-back:hover,
    .account-add-link:hover,
    .account-cancel-link:hover,
    .toggle-password:hover {
        opacity: .5;
    }

    .tab-list .section:not(.open):hover,
    .square-btn:hover {
        background-color: #edeeee;
    }

    .nav-btn:hover::before,
    .nav-btn:hover::after {
        content: none;
    }

    .nav-btn:hover span {
        height: 2rem;
        width: 2rem;
        background-color: transparent;
        background-image: url(../img/arrow1.svg);
        background-position: center;
        background-repeat: no-repeat;
        filter: grayscale(1) brightness(5);
        transform: rotate(180deg);
    }

    .button-closed .nav-btn:hover span {
        filter: brightness(0);
        transform: rotate(0deg);
    }

    nav li:hover {
        background-color: #555555;
        border-radius: .4rem;
    }

    .home .news-list li:not(.no-news):hover,
    .other-pg .section ul li:hover,
    .other-pg div:first-of-type ul li:hover:not(:first-child, :last-child):hover,
    .ic-btn:hover,
    .linked-account:hover {
        background-color: #edeeee;
    }

    .news-pg .news-list li:not(.no-news):hover {
        background-color: #edeeee;
    }

    .other-pg div:first-of-type ul li:first-child:hover,
    .news-pg .news-list li:not(.no-news, :last-child):first-child:hover {
        background-color: #edeeee;
        border-radius: .4rem .4rem 0 0;
    }

    .other-pg div:first-of-type ul li:last-child:hover,
    .news-pg .news-list li:not(.no-news, :first-child):last-child:hover {
        background-color: #edeeee;
        border-radius: 0 0 .4rem .4rem;
    }

    .news-pg .news-list li:first-child:last-child:hover,
    .other-pg .section ul li:hover {
        border-radius: .4rem;
    }

    .white:hover,
    .round-btn:not(:disabled):hover,
    .history-graph div:not(.tab-list) button:last-child:hover {
        background-color: #edeeee;
    }

    .kaku-ttl:hover::after {
        background-color: #edeeee;
        border-radius: 2rem;
    }

    .fe-tab:hover {
        border-radius: .6rem 0 0 .6rem;
        padding: .2rem;
    }

    .history-graph div button:last-child:hover {
        border-radius: 0 .6rem .6rem 0;
        padding: .2rem;
    }


    /* section usage-data */
    .home .section {
        min-width: 28rem;
    }

    .usage-data {
        width: 36rem;
    }

    /* section news TODO 確認 */
    /* .news {
        width: 60rem;
    } */

    .home .right {
        width: calc(100% - 36rem);
    }

    /* section pay */
    .pay-sections {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, auto);
        gap: 0 2rem;
    }

    .pay-sections .section {
        margin-bottom: 2rem;
    }

    /*payment page-ttl */
    .page-ttl {
        position: relative;
        font-weight: 600;
        font-size: 2.4rem;
        margin: 2rem 2rem;
    }

    /* year-switch */
    .year-switch {
        padding-top: 1.3rem;
        gap: 2rem;
    }


    /* history detail graph */
    .history .his {
        min-width: 68rem;
    }

    .detail-main {
        margin-top: 4rem;
    }

    .history .cost-detail {
        margin-top: 1rem;
    }

    .detail-graph {
        gap: 4rem;
        width: 100%;
    }

    .detail-graph .detail-main,
    .history-graph {
        width: calc(50% - 2rem);
    }

    .detail-main .pc {
        font-size: 1.8rem;
        font-weight: 600;
        text-align: center;
    }

    .detail-graph {
        display: flex;
        justify-content: center;
        min-width: 64rem;
    }

    .detail-graph .detail-main,
    .detail-graph .history-graph {
        max-width: 42rem;
        min-width: 28.4rem;
    }

    /* news */
    .news-sec {
        width: 100%;
        margin-top: 0;
    }

    .news-pg .news-important {
        margin-top: 4rem;
    }

    /* news detail */
    .news-detail-pg .page-ttl {
        margin-bottom: 4rem;
    }

    .news-detail-pg .section {
        padding: 4rem;
    }

    /* other */
    .other-pg .page-ttl {
        margin-bottom: 2rem;
    }

    .other-pg div:first-of-type {
        margin-top: 4rem;
    }

    /* other kakushu */
    .kakushu-pg .page-ttl {
        padding-bottom: 2rem;
    }

    .kakushu-sec .open .kaku-ttl::before {
        width: 97%;
    }

    .kakushu-sec .section:last-child {
        margin-bottom: 2rem;
    }

    /* other user info */
    .user-info .section div {
        display: flex;
    }

    .user-info .first-info {
        margin-top: 4rem;
    }

    .user-info .section div:not(.crowd) .info-title {
        padding-bottom: 0;
    }

    .user-info .section div:not(.under) .info-detail {
        flex-wrap: wrap;
        max-width: none;
        width: calc(100% - 16rem);
    }

    .user-info .section div .kana p:first-child {
        padding-bottom: 0;
    }

    .user-info .section .under .mail {
        width: calc(100% - 16rem);
    }

    .user-info .section:last-child {
        margin-bottom: 0;
    }

    /* other mail-change */
    .mail-change .forgot-detail,
    .mobile-change .forgot-detail,
    .pass-change .forgot-detail,
    .account-add .forgot-detail,
    .account-cancel .forgot-detail {
        margin-left: 0;
    }

    .pass-res1 .forgot-detail,
    .pass-res2 .forgot-detail {
        margin-left: auto;
    }



    /* other pass-change */
    .other-change {
        min-width: 33rem;
    }

    .other-change .page-ttl {
        width: 97%;
    }

    .other-change:not(.account-cancel) .pc-line {
        background-color: #ffffff;
        border: .2rem solid var(--main-color);
        border-radius: .6rem;
        padding: 2rem 1.6rem;
    }

    .account-cancel .pc-line{
        padding: 2rem 1.6rem;
    }

    /* other pass change comp */
    .pass-change-comp .pc-line {
        margin-top: 4rem;
    }

    .pass-change-comp .pc-line div {
        margin-right: auto;
        margin-left: auto;
        display: block;
    }

    .pass-change-comp .pc-line .forgot-detail {
        display: flex;
        justify-content: center;
        margin-top: 0;
        text-align: left;
    }

    .other-change .pc-line .log-input,
    .account-add .error-area {
        max-width: 50rem;
    }

    /* section account link */
    .account-add .err-msg{
        max-width: 50rem;
    }

    /* section other liq */
    .liquiry .pc-line .forgot-detail {
        margin-left: 0;
    }

    .mail-change .err-msg {
        max-width: 50rem;
    }


    /* login
  --------------------------------------- */
    .login-input {
        padding: 8rem 8rem 2rem;
        margin: 0 auto;
    }

    .login-sec {
        margin: auto;
        min-width: 15rem;
        max-width: 42rem;
    }

    .login .login-logo a img,
    .register .login-logo a img,
    .register-mail .login-logo a img,
    .register-full .login-logo a img,
    .register-comp .login-logo a img,
    .pass-forgot .login-logo a img,
    .pass-mail .login-logo a img {
        margin: 0 auto 2rem auto;
    }

    .login-ttl,
    .reg-mail-ttl {
        text-align: center;
    }

    .login-id,
    .login-pass {
        width: 90%;
        margin-right: auto;
        margin-left: auto;
    }

    .detail-gray {
        max-width: 50rem;
    }

    .login-sec .pc-line {
        background-color: #ffffff;
        border: .2rem solid var(--main-color);
        border-radius: .6rem;
        padding: 2rem 1.6rem;
    }


    .login-sec .pc-line .normal-btn {
        max-width: none;
    }

    .login-id .section,
    .login-pass .section {
        max-width: none;
    }

    /* register-temp
  --------------------------------------- */
    .register {
        padding-bottom: 2rem;
    }

    /* register temp sent
  --------------------------------------- */
    .register-mail .login-sec .section {
        padding: .8rem 2rem .8rem 2rem;
    }

    .register-mail,
    .pass-mail {
        padding: 8rem 8rem 2rem;
    }

    .register-mail .login-sec .pc-line,
    .pass-mail .login-sec .pc-line:not(.id-line),
    .pass-forgot .login-sec .pc-line {
        margin-bottom: 2rem;
    }

    .reg-mail-ttl {
        margin-top: 2rem;
    }

    .reg-warning {
        font-size: 1.6rem;
        margin-bottom: 2rem;
    }

    .warning-detail,
    .warning-red {
        font-size: 1.4rem;
    }

    .warning-red {
        margin-bottom: 2rem;
    }

    .register-mail .login-sec .text-btn-area button {
        font-weight: 600;
    }

    /* register temp sent
  --------------------------------------- */

    .register-mail .login-sec .pc-line .section {
        margin-bottom: 0;
    }

    .reg-mail-ttl {
        margin-top: 0;
    }

    .register-full {
        padding: 8rem 8rem 2rem;
    }


    .register-mail .login-back {
        margin-bottom: 1.2rem;
    }

    /* register comp
  --------------------------------------- */

    /* password forgot
  --------------------------------------- */
    .pass-forgot-btn:not(.id-forgot-btn) {
        margin-bottom: 0;
    }

    /* password reset1
  --------------------------------------- */

    .login .pass-res1-btn {
        margin-bottom: 0;
    }
}

@media screen and (min-width: 870px) {
    .pay-sections {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, auto);
        gap: 0 2rem;
    }

}

@media screen and (min-width: 1160px) {
    .pay-sections {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, auto);
        gap: 0 2rem;
    }

}

@media screen and (max-width: 767px) {
    nav {
        display: block !important;
    }
}

/* password reset1
  --------------------------------------- */
.login-input .detail-gray {
    width: 90%;
}

/* id forgot
  --------------------------------------- */
.pass-forgot .forgot-detail {
    margin-left: auto;
}

.id-mail .login-sec .pc-line .normal-btn {
    margin-bottom: 0;
}

.id-mail .login-sec .pc-line {
    margin-bottom: 2rem;
}