@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');


/* reset.css */
/*! destyle.css v2.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */

/* Reset box-model and set borders */
/* ============================================ */


/*********************/
/***** reset.css *****/
/*********************/

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, button, form {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  font-family: "Noto Sans JP", "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo, sans-serif;
  vertical-align: baseline;
  word-break: break-all;
}

*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1.25;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

a{
    text-decoration: none;
    color: unset;
}

input,select,textarea {
  /*-webkit-appearance: none;*/
}

/*************************/
/***** reset.css END *****/
/*************************/



/* base */

[data-theme = "dark"]{

    --theme-color :              #1F3250;

    --light-text-color:          #D7DFEB;
    --dark-text-color:           #D5D5D5;
    --heading-text-color:        #1F3250;
    --heading-background-color:  #F2F5F6;
    --balance-border-color:      #FFFFFF;

    --top-username-bg:           rgba(0,0,0,0.3);

    --border-color:              #2E3E75;

    --form-bg-color:             #F0F4F4;
    --form-border-color:         #2E3E75;
    --form-text-color:           #343445;
    --form-placeholder-color:    #AAAAAA;

    --customer-box-bg-color:     #304668;
    --customer-box-text-color:   #ABB6C7;
    --customer-name-text-color:  #E5E8EC;
    --customer-name-kana-text-color:  #E5E8EC;

    --customer-box-shadow:       inset 5px 5px 10px #19295f, inset -5px -5px 10px #1f3374;
    --customer-buttons-bg-color: transparent linear-gradient(179deg, #4770AA 0%, #375A8B 48%);

    --button-bg-color:           linear-gradient(145deg, #19295f, #1e3170);
    --main-button-bg-color:      linear-gradient(175deg, #446CA5 0%, #40659A 50%, #4B70A5 50%);
    --sub-button-bg-color:       linear-gradient(175deg, #E2882B 0%, #D5731B 50%, #E1811F 50%, #D56209 100%);

    --button-box-shadow:         7px 7px 14px #182759, 3px -7px 14px #203579;
    --pushed-button-bg-color:    #1c2e69;
    --pushed-button-box-shadow:  inset 5px 5px 10px #19295f, inset -5px -5px 10px #1f3374;

    --table-customer-bg-color:    #263A5A;
    --table-result-odd-color:     #1E3351;
    --table-result-even-color:    #405678;

    --toggle-color:               #D7DFEB;

    --parts-shop-main-button:     linear-gradient(175deg, #446CA5 0%, #40659A 50%, #4B70A5 50%);
    --parts-shop-sub-button:      linear-gradient(175deg, #E2882B 0%, #D5731B 50%, #E1811F 50%, #D56209 100%);


    --customer-contact-tel-after-bg: url(/img/dark/tel_tel_icon_blue.png) no-repeat;
    --customer-contact-mobile-after-bg: url(/img/dark/tel_mobile_blue.png) no-repeat;
    --customer-contact-sms-after-bg: url(/img/dark/tel_sms_blue.png) no-repeat;


    --result-next-arrrow-bg:     #FFFFFF;

    --nav-text-color:             #FFFFFF;
    --nav-light-button-border:    #5D7CAA;

    --next-arrow-size:           15px 10px;
    --pulldown-arrow-size:       20px 10px;


    --link-arrow-image:          url(/img/light/link_arrow_white.png);
    --login-link-arrow-image:    url(/img/light/link_arrow_blue.png);
    --next-arrow-bg:             url(/img/dark/small_link_next_white.png);
    --pulldown-arrow-image:      url(/img/light/open_icon_white.png);
    --result-next-arrrow-image:  url(/img/light/link_arrow_blue.png);
    --memo-image:                url(/img/dark/customer_btn_memo_white.png);
    --tell-image:                url(/img/dark/customer_btn_tel_white.png);
    --map-image:                 url(/img/dark/customer_btn_map_whit.png);
    --top-button-search-image:   url(/img/dark/top_seach_white.png);
    --top-button-register-image: url(/img/pc/top_register_white.png);
    --top-button-image:          url(/img/dark/top_parts_white.png);
    --profile-tel-image:         url(/img/dark/customer_profile_tel_white.png);
    --profile-address-image:     url(/img/dark/customer_profile_address_white.png);
    --contact-tel-image:         url(/img/dark/tel_tel_icon_blue.png);
    --contact-mobile-image:      url(/img/dark/tel_mobile_blue.png);
    --contact-sms-image:         url(/img/dark/tel_sms_blue.png);
    --login-inner-image:         url(/img/dark/mdp_logo_white.png);
    --nav-mail-image:            url(/img/dark/menu_mail_white.png);
    --nav-tel-image:             url(/img/dark/menu_tel_white.png);
    --pc-nav-image:              url(/img/light/mdp_logo_blue.png);
    --pc-nav-tel-image:          url(/img/light/menu_tel_blue.png);
    --pc-link-arrow-image:       url(/img/light/link_arrow_blue.png);
    --pc-pulldown-arrow-image:   url(/img/light/open_icon_blue.png);

    --payment-history-prev-bg:   url(/img/dark/small_link_prev_white.png);
    --payment-history-next-bg:   url(/img/dark/small_link_next_white.png);

    --pc-nav-bg-color:           #F0F4F4;
    --pc-nav-text-color:         #1D3557;
    --pc-customer-box-bg:        #FFFFFF;
    --pc-toogle-color:           #F0F4F4;
    --login-copylight-boder : 1px solid #607d8b;

    --box-split-bg-color : #182b49;


}

[data-theme = "light"]{

    --theme-color :              #F0F4F4;

    --light-text-color:          #333333;
    --dark-text-color:           #333333;
    --heading-text-color:        #F2F5F6;
    --heading-background-color:  #1F3250;
    --balance-border-color:              #294282;

    --top-username-bg:           rgba(29,53,87,0.65);

    --border-color:              #EEEEEE;

    --form-bg-color:             #F0F4F4;
    --form-border-color:         #E8ECEF;
    --form-text-color:           #343445;
    --form-placeholder-color:    #AAAAAA;

    --customer-box-bg-color:     #FFFFFF;
    --customer-box-text-color:   #3D3D3D;
    --customer-name-text-color:  #1D3557;
    --customer-name-kana-text-color:  #1D3557;
    --customer-box-shadow:       0 0 10px -5px rgb(0 0 0 / 20%);
    --customer-buttons-bg-color: transparent linear-gradient(179deg, #F6F9FF 0%, #F6F7F8 48%);

    --button-bg-color:           #F5F5F5;
    --main-button-bg-color:      linear-gradient(175deg, #23418E 0%, #1E3982 49%, #21408F 50%, #223977 64%, #23418E 100%);
    --sub-button-bg-color:       linear-gradient(175deg, #F6F7F8 0%, #F6F7F8 50%, #FEFEFE 50%);

    --button-box-shadow:         7px 7px 12px #e6e6e6, 3px -7px 12px #ffffff;
    --pushed-button-bg-color:    #F5F5F5;
    --pushed-button-box-shadow:  inset 5px 5px 10px #00000029, inset -5px -5px 10px #E5E9E9;

    --customer-contact-tel-after-bg: url(/img/light/tel_tel_icon_white.png) no-repeat;
    --customer-contact-mobile-after-bg: url(/img/light/tel_mobile_white.png) no-repeat;
    --customer-contact-sms-after-bg: url(/img/light/tel_sms_white.png) no-repeat;

    --table-customer-bg-color:   #F6F8F8;
    --table-result-odd-color:    #E8EEEF;
    --table-result-even-color:   #F9F9F9;

    --toggle-color:               #F0F4F4;

    --parts-shop-main-button:     linear-gradient(175deg, #F6F7F8 0%, #F6F7F8 50%, #FEFEFE 50%);
    --parts-shop-sub-button:      linear-gradient(175deg, #23418E 0%, #1E3982 49%, #21408F 50%, #223977 64%, #23418E 100%);

    --result-next-arrrow-bg:     #294282;

    --nav-text-color:            #1D3557;
    --nav-light-button-border:   #294282;

    --next-arrow-size:           20px 15px;
    --pulldown-arrow-size:       30px 15px;

    --link-arrow-image:          url(/img/light/link_arrow_blue.png);
    --login-link-arrow-image:    url(/img/light/link_arrow_white.png);

    --next-arrow-bg:             url(/img/light/small_link_next_blue.png);
    --pulldown-arrow-image:      url(/img/light/open_icon_blue.png);
    --result-next-arrrow-image:  url(/img/light/link_arrow_white.png);
    --memo-image:                url(/img/light/customer_btn_memo_blue.png);
    --tell-image:                url(/img/light/customer_btn_tel_blue.png);
    --map-image:                 url(/img/light/customer_btn_map_blue.png);
    --top-button-search-image:   url(/img/light/top_seach_blue.png);
    --top-button-register-image:   url(/img/pc/top_register_blue.png);
    --top-button-image:          url(/img/light/top_parts_blue.png);
    --profile-tel-image:         url(/img/common/customer_profile_tel_blue.png);
    --profile-address-image:     url(/img/common/customer_profile_address_blue.png);
    --contact-tel-image:         url(/img/light/tel_tel_icon_white.png);
    --contact-mobile-image:      url(/img/light/tel_mobile_white.png);
    --contact-sms-image:         url(/img/light/tel_sms_white.png);
    --login-inner-image:         url(/img/light/mdp_logo_blue.png);
    --nav-mail-image:            url(/img/light/menu_mail_blue.png);
    --nav-tel-image:             url(/img/light/menu_tel_blue.png);
    --pc-nav-image:              url(/img/dark/mdp_logo_white.png);
    --pc-nav-tel-image:          url(/img/dark/menu_tel_white.png);
    --pc-link-arrow-image:       url(/img/light/link_arrow_white.png);
    --pc-pulldown-arrow-image:   url(/img/light/open_icon_white.png);


    --payment-history-prev-bg:   url(/img/light/small_link_prev_blue.png);
    --payment-history-next-bg:   url(/img/light/small_link_next_blue.png);

    --pc-nav-bg-color:           #1F3250;
    --pc-nav-text-color:         #FFFFFF;
    --pc-customer-box-bg:        #304668;
    --pc-toogle-color:           #D7DFEB;
    --login-copylight-boder : 1px solid #eee;

    --box-split-bg-color : #e5edef;

}


html {
    font-size: calc(0.75rem + ((1vw - 3.2px) * 4.2553)); /* 12 ~ 16 */
}

html[data-font-size = "large"]{
    font-size: calc(0.875rem + ((1vw - 3.2px) * 4.2553)); /* 12 ~ 16 */
}

html[data-font-size = "small"]{
    font-size: calc(0.625rem + ((1vw - 3.2px) * 4.2553)); /* 12 ~ 16 */
}

html[data-font-size = "large"] .setting-font-size__button[data-font-size = "large"] {
    color: #fff;
    background: linear-gradient(180deg, #3252A2, #223977);
    border: 1px ridge #83a2ff;
    font-size: 14px;
}

html[data-font-size = "medium"] .setting-font-size__button[data-font-size = "medium"] {
    color: #fff;
    background: linear-gradient(180deg, #3252A2, #223977);
    border: 1px ridge #83a2ff;
    font-size: 14px;
}

html[data-font-size = "small"] .setting-font-size__button[data-font-size = "small"] {
    color: #fff;
    background: linear-gradient(180deg, #3252A2, #223977);
    border: 1px ridge #83a2ff;
    font-size: 14px;
}

@media screen and (min-width:481px) { 
    html{
        font-size: 16px;
    }
    html[data-font-size = "large"]{
        font-size: 18px;
    }
    html[data-font-size = "small"]{
        font-size: 14px;
    }
}

@media screen and (max-width:480px) { 
    html{
        font-size: 16px;
    }
    html[data-font-size = "large"]{
        font-size: 18px;
    }
    html[data-font-size = "small"]{
        font-size: 14px;
    }
}


body{
    width: 100%;
    font-family: "Noto Sans JP", "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo, sans-serif;
}

img{
    max-width: 100%;
}

ol, ul {
    list-style: none;
}

header{
    width: 100%;
    height: 50px;
    background: #ffffff;
    display: flex;
    position: fixed;
    z-index: 2;
}

header:after {
    content: "";
    background-image: url(/img/common/top_btn_bg.png);
    width: 100%;
    background-size: 100% 80%;
    height: 50px;
    background-repeat: no-repeat;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: -1;
}

.header__search-link {
    position: absolute;
    top: calc(50% - (24px * 0.8 / 2));
    right: 17%;
    width: calc(24px * 0.8);
    height: calc(24px * 0.8);
}

.header__search-link a {
    display: inline-block;
}


input[type="text"], input[type="number"]{
    width: 100%;
    border: 1px solid var(--form-border-color);
    border-radius: 5px;
    background: var(--form-bg-color);
    color: #333;
    font-size: 16px;
    padding: 10px;
    margin: 0 0 10px;
}

select{
    width: 100%;
    border: 1px solid var(--form-border-color);
    border-radius: 5px;
    background: var(--form-bg-color);
    color: #333;
    font-size: 16px;
    padding: 8 10px;
    margin: 0 0 10px;
}

textarea{
    width: 100%;
    height: 150px;
    border: 1px solid var(--form-border-color);
    border-radius: 5px;
    background: var(--form-bg-color);
    color: #333;
    font-size: 16px;
    padding: 10px;
    margin: 0 0 5px;
}


::placeholder{
    color: var(--form-placeholder-color);
}

label.for-text{
    width: 100%;
    display: block;
    margin:  0 0 5px;
}

label.for-text:nth-last-of-type(1){
    margin: 0;
}

button{
    cursor: pointer;
}

.add-parts-shop__text{
    color: var(--customer-name-text-color);
    font-weight: bold;
    font-size: 16px;
}

.datauplode-title{
    color: var(--customer-name-text-color);
    font-size: 1.5rem;
    padding-bottom: 10px ;
}


.visual-setting{
    display: flex;
    padding: 25px 25px 15px;
}

.visual-setting__title{
    display: none;
    font-size: 0.875rem;
    font-weight: bold;
}

.setting-font-size{
    width: 55%;
    position: relative;
    text-align: center;
}

.setting-font-size:before{
    content: "文字サイズ";
    font-size: 12px;
    color: var(--nav-text-color);
    padding: 2px 12px;
    text-align: center;
    display: inline-block;
    position: absolute;
    top: -25px;
    left: calc(50% - 42px);
    border-radius: 9px;
    word-break: keep-all;
    white-space: nowrap;
}

.setting-font-size__button{
    font-size: 14px;
    font-weight: bold;
    background-color: #E5E9E9;
    border: 1px solid #CCC;
    border-radius: 2px;
    color: #1F3250;
    padding: 5px;
    display: inline-block;
    text-align: center;
    width: calc(1em + 12px);
    height: calc(1em + 12px);
    line-height: 1;
    cursor: pointer;
}

.setting-theme{
    width: 45%;
    position: relative;
}

.setting-theme:before{
    content: "ダークモード";
    font-size: 12px;
    color: var(--nav-text-color);
    padding: 2px 12px;
    text-align: center;
    display: inline-block;
    position: absolute;
    top: -25px;
    left: calc(50% - 48px);
    border-radius: 9px;
    word-break: keep-all;
    white-space: nowrap;
}

.setting-theme:after{
    content: "";
    display: block;
    width: 40px;
    height: 16px;
    border-radius: 10px;
    background: #dedede;
    z-index: -1;
    top: calc( 50% - 8px );
    left: calc( 50% - 20px );
    position: absolute;
}

.toggle-theme{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    position: absolute;
    transition: all .2s;
    background-color: var(--toggle-color);
    display: block;
    left: calc(50% - 25px);
    top: calc(50% - 12.5px);
    cursor: pointer;
    box-shadow: 0 0 5px rgb(0 0 0 / 20%);
}

[data-theme = "dark"] .toggle-theme {
    left: 50%;
}

.input__title{
    width: 20%;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    margin: 0 3% 0 0;
    text-align: center;
}

.input__title + input[type = "text"],
.input__title + input[type = "number"]{
    width: 77%;
}


.has--next{
    position: relative;
    display: block;
}

.has--next:after{
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    top: calc( 50% - 5px );
    right: 3px;
    background-image: var(--next-arrow-bg);
    background-size: 10px 10px;
    position: absolute;
}

.has--next-white{
    position: relative;
    display: block;
}

.has--next-white:after{
    content: "";
    width: 12px;
    height: 21px;
    top: calc( 50% - 10px );
    right: 10px;
    background-image: url(/img/light/link_arrow_white.png);
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
}

.login__button.has--next-white:after {
    background-image: url(/img/light/link_arrow_blue.png);
}



.has--next-arrow{
    position: relative;
    display: block;
}

.has--next-arrow:after{
    content: "";
    width: 12px;
    height: 21px;
    top: calc( 50% - 10px );
    right: 10px;
    background-image: var(--link-arrow-image);
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
}

.customer-box .table-customer-list .has--next {
    display: table-cell;
}

.customer-box .table-customer-list .has--next:after,
.customer-box .table-car-history .has--next:after {
    
}

.table-toggle-trigger{
    position: relative;
}

.table-toggle-trigger:after, .search-next__button:after {
    content: "";
    display: block;
    width: 30px;
    height: 15px;
    background: var(--pulldown-arrow-image) no-repeat center center;
    background-size: var(--pulldown-arrow-size);
    top: 0;
    right: 0;
    position: absolute;
    transition: transform .5s;
    transform-origin: center center;
}

.table-toggle-trigger.show:after{
    transform: rotate(-180deg);
}

.search-next__button {
    color: #3399ff;
    font-weight: bold;
    position: relative;
    text-align: center;
}

.customer-box.search-next__button_outer {
    cursor: pointer;
    margin: 60px 0 30px;
}



/* parts */

header{
    background: #263B5A;
    border-radius: 0 0 6px 6px;
    border-bottom: 2px solid #E47878;
}

.header__back-button,
.header__pagetitle,
.header__nav-button{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
}

.header__pagetitle{
    width: calc( (100% - 50px) * 0.6) ;
    padding-right: calc( ((100% - 50px) * 0.3) - 50px ) ;
    color: #FFFFFF;
    font-size: 0.875rem;
    font-weight: bold;
    word-break: keep-all;
    white-space: nowrap;
}

.header__nav-button{
    width: 50px;
    cursor: pointer;
}




.header__nav-button-icon {
    height: 3px;
    width: 23px;
    border-radius: 15px;
    background-color: #E47878;
    transform: rotate(0deg);
    transition: all ease 0.5s;
}

.header__nav-button-icon::before, .header__nav-button-icon::after {
    content: "";
    position: absolute;
    height: inherit;
    border-radius: inherit;
    background-color: inherit;
    margin: auto;
    width: 138%;
    transition: all ease 0.5s;
}

.header__nav-button-icon::before {
    top: -10px;
    left: 0;
    transform-origin: left;
    background-color: #fff;
}

.header__nav-button-icon::after {
    bottom: -10px;
    left: 0;
    transform-origin: right;
    background-color: #fff;
}

[data-nav-state = "open"] .header__nav-button-icon{
    /*transform: rotate(135deg);*/
    transform: translateX(50%) translateY(-100%) rotate(135deg)
}
[data-nav-state = "open"] .header__nav-button-icon::before {
    top: 0;
    /*transform: translateX(100%) rotate(-90deg);*/
}
[data-nav-state = "open"] .header__nav-button-icon::after {
    /*
    bottom: 0;
    transform: translateX(-100%) rotate(-90deg);
    */
    bottom: 16px;
    transform: translateX(-50%) rotate(-90deg);
}



.header__back-button {
    width: calc( (100% - 50px) * 0.37) ;
    cursor: pointer;
    display: flex;
    justify-content: start;
}

.header__back-button-icon{
    width: 32px;
    height: 100%;
    display: block;
}

.header__back-button-title{
    height: 100%;
    font-size: 0.875rem;
    font-weight: bold;
    color: #FFFF;
    background: url(/img/light/pageback_arrow.png) no-repeat left 15px center;
    padding: 0 0 0 32px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav {
    width: 70%;
    height: calc(100% - 50px);
    display: block;
    position: fixed;
    overflow-y: scroll;
    top: 50px;
    right: -100%;
    background-color: var(--theme-color);
    transition: right 0.4s;
    z-index: 2;
    -webkit-overflow-scrolling: touch;
}

@media screen and (min-width:481px) { 
    .nav {
        width: 320px;
        right: -320px;
    }
}

[data-nav-state = "open"] .nav {
    right: 0%;
}

.nav__list{

}

.nav__item:not(:last-child){
    box-shadow: inset 0 -1px rgb(0 0 0 / 5%);
    border-bottom: 1px solid rgba(255,255,255,.7);
    position: relative;
    transition: opacity .4s;
}

.nav__item[data-page="register"] {
    display: none;
}

.nav__item--current{
    background-color: var(--customer-box-bg-color);
}

.nav__item a{
    width: 100%;
    color: var(--nav-text-color);
    font-weight: bold;
    display: block;
    padding: 10px 25px;
    font-size: 14px;
    position: relative;
}

.nav__item .nav__item_dealer_outer {
    display: none;
}

.nav__item .nav__item_dealer_link_outer {
    padding: 0 20px;
    border-top: 1px solid rgba(255,255,255,.7);
}

/*
.nav__item .nav__item_dealer_outer {
    height: 0;
    opacity: 0;
    padding: 0 20px;
    transition: height .5s;
    z-index: -1;
}

.nav__item .nav__item_dealer_outer.show {
    height: 100px;
    opacity: 1;
    z-index: 1;
}
*/

.nav__item .nav__item_dealer_tel {
    box-shadow: inset 0 -1px rgb(0 0 0 / 5%);
}


.nav__item[data-page="setting"]:after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 15px;
    background-image: var(--pulldown-arrow-image);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: var(--next-arrow-size);
    top: 10px;
    right: 8px;
    position: absolute;
}

.nav__item[data-page="setting"].show:after {
    transform: rotate(-180deg);
}

.nav__contact{
    width: 100%;
    max-height: 190px;
    color: var(--nav-text-color);
    background: var(--theme-color);
    /*
    border-top: 0.5px solid rgba(0,0,0,.05);
    box-shadow: inset 0 1px rgb(255 255 255 / 60%);
    */
    font-size: 0.875rem;
    font-weight: bold;
    display: block;
    padding: 0px 10px;
    bottom: 0;
    text-align: center;
}

.nav__contact-title{
    font-size: 0.75rem;
    background: var(--nav-text-color);
    color: var(--theme-color);
    font-weight: normal;
    text-align: center;
    padding: 5px 15px;
    line-height: 1;
    width: auto;
    margin: 0 auto 0.75rem;
    box-sizing: border-box;
    border-radius: 10px;

}

.nav__contact-tel,
.nav__contact-mail{
    padding: 0 0 0 10px;
}

.nav__contact-tel{
    margin: 0 0 10px;
}

.nav__contact-mail {
    padding: 10px;
    background: var(--parts-shop-main-button);
    border: 1px solid #294282;
    border-radius: 5px;
    color: var(--customer-name-text-color);
    position: relative;
}

.nav__contact-telnum{
    font-size: 1.25rem;
    margin: 0 0 0.25rem;
    position: relative;
}

.nav__contact-telnum:before{
    content: "";
    background: var(--nav-tel-image) no-repeat center center;
    background-size: 100%;
    display: block;
    width: 15px;
    height: 100%;
    position: absolute;
    left: -15px;
    top: 0;
}

.nav__contact-address{
    position: relative;
    font-size: 12px;
}


.nav__contact-address:after{
    content: "";
    background: var(--nav-mail-image) no-repeat center center;
    background-size: 20px 15px;
    display: inline-block;
    height: 15px;
    margin: 0 2px;
    vertical-align: middle;
    width: 20px;
}

.nav__contact-open-close{
    font-size: 0.729rem;
    margin: 0 0 0.25rem;
}

.nav__contact-open-close .nav__contact-open-close-title {
    margin-right: 5px;
    display: inline-block;
    font-size: 11px;
}

.nav__contact-open-close .nav__contact-open-close-time {
    display: inline-block;
    text-align: left;
    font-size: 11px;
}

.nav__contact-open-close .nav__contact-open-close-time span {
    display: inline;
}

.nav__contact-item .open_day_of_the_week {
    font-size: 12px;
}


.overlay{
    width: 100%;
    height: calc(100% - 50px);
    display: block;
    position: fixed;
    top: 50px;
    background: rgba(0,0,0,0.8);
    opacity: 0;
    transition: opacity .3s;
    z-index: -1;
}

[data-nav-state = "open"] .overlay{
    opacity: 1;
    z-index: 1;
}

.wrapper{
    width: 100%;
    min-height: 100%;
    background: var(--theme-color);
    padding-top: 70px;
    padding-bottom: 70px;
    transition: right .4s;
    position: relative;
    right: 0;
}

[data-nav-state="open"] .wrapper{
    right: 20px;
}

.container{
    
}

.contents{
    width: 95%;
    max-width: 720px;
    padding: 0;
    position: relative;
    box-sizing: border-box;
    margin: 0 auto;
    z-index: 1;
}

.contents>div{
    position: relative;
    box-shadow: 0px 0px 29px -8px #e5edef;
}

.contents h2{
    color: var(--heading-text-color);
    background: var(--heading-background-color);
    border-radius: 0 15px 15px 0;
    font-size: 0.9rem;
    margin: 0 0 15px 0;
    padding: 5px 20px;
    text-align: center;
    display: inline-block;
    position: absolute;
    left: -23px;
    z-index: 1;
    top: -15px;
}


/*.contents h2:nth-of-type(1){
    margin: 0.5rem 0 0.75rem;
}*/

.form__submit{
    text-align: center;
    margin: 15px 0;
    position: relative;
}

.form__submit.form__submit_dealer{
    margin: 15px;
}

.form__submit button{
    width: 100%;
    background: var(--parts-shop-sub-button);
    border-radius: 5px;
    color: #FFF;
    display: inline-block;
    font-size: 18px;
    padding: 10px;
    text-align: center;
}

.form-customer-search{
    padding: 25px 15px;
    background-color: var(--customer-box-bg-color);
    border-radius: 10px;
}

.form-customer-search__message {
    font-size: 12px;
    text-align: center;
    color: var(--dark-text-color);
    margin: 10px 0;
}


table{
    width: 100%;
}

tr,td{
    vertical-align: middle;
}

td a{
    display: block;
}

.table-result tr:nth-of-type(odd){
    background: var(--table-result-odd-color);
}

.table-result tr:nth-of-type(even){
background: var(--table-result-even-color);
}

.table-result tr:nth-of-type(1){
    background: none;
}


.table-result th{
    background: #333;
    color: #FFF;
    font-size: 0.665rem;
    padding: 7px 5px;
    line-height: 1;
}

.table-result td{
    color: #343445;
    padding: 10px;
    height: 45px;
    display: table-cell;
}

.table-noborder,
.table-noborder tr,
.table-noborder td
{
    border: none;
    vertical-align: middle;
}

.table-noborder th{
    font-size: 0.925rem;
    padding: 5px 0;
}

.table-noborder td{
    font-size: 0.925rem;
    padding: 5px;
    font-weight: bold;
}

.table--hide{
    display: none;
}



.links__button{
    color: #D7DFEB;
    font-size: 16px;
    font-weight: bold;
    padding: 5%;
    display: block;
    position: relative;
    text-align: center;
    display: block;
    width: 100%;
    margin: 0 0 15px;
    border-radius: 10px;
    box-shadow: var(--button-box-shadow);
}

.links__button:not(:last-child){
    background: var(--parts-shop-sub-button);
}

.links__button:last-child{
    background: var(--parts-shop-main-button);
    border-radius: 10px;
    border: 1px solid #294282;
    color: var(--customer-name-text-color);
    margin:30px 0;
}

a .icon--outside {
   /* position: absolute;
    top: calc(50% - 8px);
    margin: 0 0 0 5px;*/
}

a .icon--outside:after{
    /*content :"";
    display: block;
    background: url(/img/common/link_outside.png) no-repeat center center;
    width: 16px;
    height: 16px;*/
}


.like--link{
    color: #39F;
    cursor: pointer;
    font-size: 0.875rem;
    text-decoration: underline;
}

.amount{
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid var(--border-color);
    margin: 0.5rem 0 0;
}

.amount__title{
    width: 78%;
    color: var(--light-text-color);
    font-size: 0.875rem;
    font-weight: bold;
    text-align: right;
    padding: 10px 8px;
}

.amount__num{
    width: 40%;
    color: var(--light-text-color);
    font-size: 1.25rem;
    font-weight: bold;
    text-align: right;
    padding: 10px 8px;
    word-break: keep-all;
    white-space: nowrap;
}


.flex{
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* pages
 *
 * 01: ログイン login
 * 02: ユーザーTOP top
 * 03: 顧客惁E??検索 customer
 * 04: 串刺し検索 skewers
 * 05: 部品商連絡 parts-shop
 * 06: 設定画面 setting
 * 07: CSV関連 csv
 */


/* 01: ログイン login */
.login{
    margin-top: 2%;
    min-height: 80vh;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.login header {
    top: 0;
}

.login .header__back-button-title {
    display: none;
}

.login .wrapper{
    padding-top: 20%;
}

.login__title{
   /* font-size: 28px;*/
    margin: 30px 0 20px;
    color: #9D9D9D;
   /* font-weight: bold;
    font-family: Noto Sans JP, Medeum;*/
}

.login__inner{
    max-width: 600px;
    width: 96%;
    box-sizing: border-box;
    padding: 60px;
    background: #FFF;
    text-align: center;
    padding: 30px;
    box-shadow: 5px 5px 10px rgba(45,133,115,.1);
    border-radius: 12px;
    overflow: hidden;
}


.login__inner:after{
    content: "";
    background-image: var(--login-inner-image);
    background-size: contain;
    background-repeat: no-repeat;
    width: 165px;
    height: 47px;
    position: absolute;
    top: 55px;
    right: calc(50% - 82px);
}

.login__form .form__item {
    height: auto;
    font-size: 16px;
    color: #A9ABAB;
    padding: 15px;
    margin: 0 0 15px;
    box-sizing: border-box;
}

.login__form{
    padding: 100px 15px 15px;
    margin-bottom: 30px;
}

.login__form .form__item:focus {
    z-index: 2;
}

.login__form input.form__item[type="text"],
.login__form input.form__item[type="password"] {
    width: 100%;
    border: none;
    border-radius: 5px;
    background: var(--theme-color);
    color: var(--light-text-color);
}

.login-copylight__outer {
    font-size: 14px;
    text-align: center;
    color: #999;
}

.login-copylight__name {
   margin: 0 auto 15px;
   padding-bottom: 10px;
   font-size: 16px;
   border-bottom: var(--login-copylight-boder);
   padding-bottom: 5px;
   letter-spacing: 1px;
   width: 350px;
}

.login-copylight__message {
    margin: 0 auto 20px;
    font-size: 14px !important;
    width: 400px;
}

.login-copylight__inner {
    font-size: 12px;
}

.login-copylight__title {
    margin: 0 10px 0 0;
}

.login-copylight__year {
    margin: 0 10px 0 0;
}

.login-copylight__inner_name {
    text-decoration: underline;
}

.login__button {
    text-align: center;
    margin: 10px 0 0;
}
.login__button button{
    width: 100%;
    padding: 14px 0;
    border-radius: 5px;
    display: inline-block;
    font-size: 18px;
    font-family: "Noto Sans JP", "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo, sans-serif;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.08em;
    /*background: var(--parts-shop-sub-button);*/
    background: var(--parts-shop-main-button);
    border: 1px solid #294282;
    color: var(--customer-name-text-color);
}

.login-border-image{
    position: absolute;
    left: 0;
    top: 0;
}

.login .nav__item[data-page="top"],
.login .nav__item[data-page="customer"],
.login .nav__item[data-page="setting"],
.login .nav__item[data-page="login"],
.login .nav__item[data-page="register"] {
    display: none;
}

.login .nav__contact {
}

.login .nav__list {
    margin: 15px 0;
}

.login-info__frame {
    width: 86%;
    height: 200px;
    box-sizing: border-box;
}

.login-copylight__name {
    width: 80%;
}

.login-copylight__message {
    width: 80%;
}


/* 02: ユーザーTOP top */
.top{}

.top .wrapper{
    padding-top: 50px;
}

.top .header__back-button{
    visibility: hidden;
}

.top-contents__user-image-outer {
    overflow: hidden;
    position: relative;
    height: 320px;
}

.top-contents__user-image{
    width: 100%;
    height: 320px;
    background-image: url("/img/light/main_img.jpg");
    background-size: cover;
    background-position: center;
    overflow: hidden;
    margin: 0 auto 30px;
    position: relative;
    opacity: 1;
    z-index:1;
    animation-name:zoomin;
    animation-duration:30s;
    animation-fill-mode:forwards;
    animation-iteration-count: infinite;
    will-change: animation;
}

.top-contents-client-count {
    font-weight: normal;
    font-size: ;
}

.top-contents__user-info{
    width: 100%;
    padding: 15px;
    background: var(--top-username-bg);
    bottom : 0;
    box-sizing: border-box;
    color: #FFF;
    font-weight: bold;
    font-size: 1.5em;
    left: 0;
    margin: 0 auto;
    position: absolute;
    text-shadow: 1px 1px rgba(0,0,0,0.9);
    z-index: 1;
}

.top-contents__user-info_shop_name {
    margin-bottom: 5px;
}


.top-contents__user-info_shop_count,
.top-contents__user-info_shop_updatetime {
    font-size: 14px;
    font-weight: normal;
}

.top-contents__user-info_shop_count {
    margin-bottom: 2px;
}

.top-contents__user-info_shop_count .shop_count_subject,
.top-contents__user-info_shop_updatetime .shop_updatetime_subject {
    display: inline-block;
    margin-right: 10px;
    font-size: 90%;
}

.top-contents__user-info_shop_count .shop_count_string,
.top-contents__user-info_shop_updatetime .shop_updatetime_string {
    letter-spacing: 1px;
    font-weight: bold;
}

.top-button{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 45px;
    padding-top: 30px;
    align-items: center;
    justify-content: space-between;
}

.top-button__item{
    width: 90%;
    height: 200px;
    background: var(--customer-box-bg-color);
    box-shadow: var(--button-box-shadow);
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 auto 30px;
    padding: 25px 10px;
    position: relative;
    overflow: hidden;
}

.top-button__item:after {
    content: "";
    background: url(/img/common/top_btn_bg.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 340px;
    height: 199px;
    position: absolute;
    top: 0;
    right: 0;
}

.top-button__item.top-button__item_search .top-button__item-title{
    letter-spacing: 0.3125rem;
}

.top-button__item.top-button__item_search:before {
    content: "";
    width: 40px;
    height: 3px;
    background: #EE8A27;
    left: calc(50% - 20px);
    position: absolute;
    top: 0;
}

.top-button__item.top-button__item_register:before {
    content: "";
    width: 40px;
    height: 3px;
    background: #E47878;
    left: calc(50% - 20px);
    position: absolute;
    top: 0;
}

.top-button__item.top-button__item_parts {
    display: none;
}

.top-button__item.top-button__item_parts:before {
    content: "";
    content: "";
    width: 40px;
    height: 3px;
    background: #8BCC34;
    left: calc(50% - 20px);
    position: absolute;
    top: 0;
}

.top-button__item_register {
    display: none;
}

.top-button__item_parts {
    display: none;
}


.item_register_messsage {
    text-align: center;
    margin: 15px 0;
    font-size: 13px;
    color: var(--light-text-color);
}


.top-button__item-title,
.top-button__item-detail{
    width: 100%;
    color: var(--customer-name-text-color);
    display: block;
    font-weight: bold;
    text-align: center;
    margin: 0;
    padding: 3%;
}

.top-button_search-image{
    background-image: var( --top-button-search-image );
    background-size: cover;
    background-repeat: no-repeat;
    width: 39px;
    height: 41px;
}

.top-button_register-image {
    background-image: var( --top-button-register-image );
    background-size: cover;
    background-repeat: no-repeat;
    width: 42px;
    height: 41px;
}

.top-button__item-image{
    background-image: var( --top-button-image );
    background-size: cover;
    background-repeat: no-repeat;
    width: 46px;
    height: 39px;
}

.top-button__item-title{
    font-size: 1.25rem;
    word-break: keep-all;
}

.top-button__item_parts .top-button__item-title{
    letter-spacing: -1px;
}

.top-button__item-detail{
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.05em;
    text-align:left;
}

/* 03: 顧客惁E??検索 customer */
.customer{}

.search-result {
    padding-top: 70px;
}

.client-search__contents_form {
    height: 380px;
}

.result{
    color: var(--light-text-color);
    font-size: 1.25rem;
    font-weight: bold;
    text-align: center;
}

.result-num{
    font-size: 1.75rem;
    display: inline-block;
    margin: 0 2px;
}

.table-search-conditions{
    margin: 1rem 0 0;
}

.table-search-conditions[data-table-state="show"] {
    display: block;
}

.table-search-conditions th{
    width: 40%;
    text-align: left;
    padding: 4px 0;
    color: var(--dark-text-color);
}

.table-search-conditions td{
    width: 60%;
    color: var(--dark-text-color);
    padding: 4px 0;
}

.table-search-conditions__button{
    color: var(--customer-name-text-color);
    font-weight: bold;
    text-align: center;
}

.customer-box{
    background: var(--customer-box-bg-color);
    border-radius: 10px;
    color: var(--customer-name-text-color);
    margin: 15px 0;
    padding: 20px 15px 20px;
    position: relative;
}

.customer-car-detail.customer-box{
    margin-bottom: 40px;
}

.customer-box.customer-box__owner_list {
    padding: 20px;
}

.payment-history.customer-box {
    padding: 1.35rem 0.9375rem 0.9375rem 0.9375rem;
}

.payment-history .payment-history__data_outer {
    padding: 0 2.5% 0 2.5%;
    display: flex;
    justify-content: space-between;
    font-size: 0.825rem;
    font-weight: bold;
    width: 100%;
    margin: 15px 0 25px;
    text-align: left;
}

.payment-history .payment-history__data {
    margin-bottom: 5px;
}

.payment-history .payment-history__data_title {
    font-weight: bold;
}

.payment-history__page_outer {
    margin-bottom: 25px;
    font-size: 0.85rem;
    font-weight: bold;
    text-align: center;
}

.payment-history__prev,
.payment-history__next {
    position: relative;
}

.payment-history__prev:after {
    content: "";
    background: var(--payment-history-prev-bg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 8px;
    height: 8px;
    position: absolute;
    top: calc(50% - 2px);
    left: -12px;
}

.payment-history__next:after {
    content: "";
    background-image: var(--payment-history-next-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 8px;
    height: 8px;
    vertical-align: middle;
    display: inline-block;
    margin: 0 0 3px 5px;
}

.payment-history__prev.payment-history__empty,
.payment-history__next.payment-history__empty {
    color: #aaa;
    cursor: default;
}


.payment-history__prev.payment-history__empty:after,
.payment-history__next.payment-history__empty:after {
    background: none;

}

.payment-history__page_bar {
    padding: 0 25px;
}

.customer-box.customer-box--result{
    background: var(--customer-box-bg-color);
    box-shadow: var(--button-box-shadow);
    margin: 0 0 15px;
    padding: 20px 20px 20px 15px;
    position: relative;
    display: block;
    overflow: hidden
}

.customer-box--result:after{
    content: "";
    width: 20px;
    height: 100%;
    position: absolute;
    top:0;
    right: 0;
    background-color: var(--result-next-arrrow-bg);
    background-image: var(--result-next-arrrow-image);
    background-position: center;
    background-repeat: no-repeat;
}

.customer-box.links{
    padding: 0;
}


.car-owner .customer-info {
    padding: 20px 15px 10px;
}

.customer-info.customer-box .table-customer-info{
    padding: 10px;
}

.customer-info__name_link .customer-info__name {
    width: 100%;
}

.customer-info__name_link .customer-info__message {
    display: block;
    text-align: right;
    padding: 0 5px;
    font-size: 0.975rem;
}

.customer-info__name_kana {
    font-size: 0.9rem;
    margin-bottom: 3px;
    letter-spacing: 1.6;
    color: var(--customer-name-kana-text-color);
    max-width: 90%;
    min-width: 90%;
}

.customer-detail .customer-info__name_kana {
    max-width: 100%;
    min-width: 100%;
}

.customer-info__name{
    font-weight: bold;
    font-size: 1.3rem;
    margin: 0 0 0.4em
}

.customer-info__name span{
    font-size: 16px;
}

.customer-history-detail .customer-info__name {
    font-size: 1.25rem;
}

.customer-history-detail .customer-info__car_name-title {
    font-size: 0.95rem;
}

.customer-history-detail .customer-info {
    padding-bottom: 15px;
}

.customer-info__address{
    color: #3D3D3D;
    font-size: 0.875rem;
    margin: 0 0 0.25em;
    padding: 5px 0;
    letter-spacing: 1px;
}

.customer-info__tel-1:before {
    content: "";
    background: var(--profile-tel-image);
    background-repeat: no-repeat;
    background-size: cover;
    width: 10px;
    height: 12px;
    position: absolute;
    top: 2;
    left: -3;
}


.customer-info__address:before {
    content: "";
    background: var(--profile-address-image);
    background-repeat: no-repeat;
    background-size: cover;
    width: 10px;
    height: 12px;
    position: absolute;
    top: 8px;
    left: -2;
}

.customer-info__tel{
    color:#3D3D3D;
    font-size: 0.925rem;
    display: flex;
    flex-wrap: wrap;
}

.customer-info__tel img,
.customer-info__address img{
    padding: 0 0.5em;
}


.customer-info__tel-1,
.customer-info__tel-2,
.customer-info__address{
    color: var(--customer-box-text-color);
    letter-spacing: -1px;
    position: relative;
    padding-left: 10px;
    font-size: 0.9rem;
    font-weight: bold;
}

.customer-info__tel-1{
    margin: 0 15px 0 0;
}

.search-result .customer-info__tel {
    margin-bottom: 10px;
}



.customer-info .table-toggle-trigger:after,
.customer-car-detail .table-toggle-trigger:after{
    top: calc(50% - 3px);
}

.customer-info__car_name-title {
    width: 100%;
    color: var(--dark-text-color);
    font-weight: bold;
    margin-right: 5px;
    text-align: left;
}


.customer-balance{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    line-height: 1;
}

.customer-balance.customer-box {
    background: var(--box-split-bg-color);
    border-radius: 0;
    width: 100vw;
    margin-left: -2.5%;
}

.customer-balance.customer-box div {
    background: var(--customer-box-bg-color);
    border-radius: 10px;
    padding: 10px;
}

.customer-balance.customer-box > div{
    display: flex;
    width: 100%;
    justify-content: space-between;
    position: relative;
    align-items: center;
}

.customer-balance.customer-box > div:before {
    content: "";
    width: 1px;
    background-color:var(--balance-border-color);
    position: absolute;
    opacity: 0.15;
    height: calc( 100% - 10px );
    left: calc( 32px + 20px );
}

.customer-balance.customer-box div div{
    display: flex;
    flex-direction: column;
    align-items: center;
}



.customer-balance__title{
    color: var(--customer-name-text-color);
    font-size: 1rem;
    font-weight: bold;
    word-break: keep-all;
}

.customer-balance__number{
    width: 100%;
    margin: 0 0 5px;
    color: var(--customer-name-text-color);
    font-size: 1.875rem;
    font-weight: bold;
    text-align: right;
}


.customer-balance__date, .customer-balance__date_empty {
    padding: 5px;
    margin: 0 0 0 auto;
    background: var(--theme-color);
    border-radius: 10px;
    color: var(--customer-box-text-color);
    text-align: center;
}

.customer-balance__date_empty {
    font-size: 12px;
}

.customer-car-detail__name {
    font-weight: bold;
    font-size: 1rem;
    margin: 0 0 30px;
    word-break: keep-all;
    white-space: nowrap;
}


.customer-car-detail__top{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 20px;
}
.customer-car-detail__top-plate, .customer-car-detail__top-image{
    width: 50%;
    margin: 0 5% 0 0;
    background: #F9F9F9;
    border: 1px solid #B5B4B3;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 3%;
    color: #0e3c21;
}

.customer-car-detail__top-image:after {
    content: "*Google検索より引用";
    background: rgba(0,0,0,0.8);
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    font-size: 10px;
    padding: 8px 0px;
    width: 100%;
    text-align: center;
    text-shadow: 1px 1px 0.15px rgb(0 0 0);
}

.customer-detail .customer-car-detail__top-plate {
    margin: 0;
    width: 170px;
}

.customer-detail .customer-car-detail__top-image {
    margin: 0 5% 0 0;
    position: relative;
    height: 110px;
    padding: 0;
    overflow: hidden;
}

.customer-car-detail__top-image.changing:after {
    content: "";
    background: url(/img/common/ajax-loader_p.gif) no-repeat top center;
    position: absolute;
    top: 35px;
    left: 0;
    width: 100%;
    height: 100%;
}

.customer-car-detail__top-image.changing:before {
    content: "画像を取得中です";
    position: absolute;
    top: 75px;
    left: calc(50% - 52px);
    width: 105px;
    text-align: center;
    font-size: 13px;
    color: #FFFFFF;
    z-index: 1;
}

.customer-car-detail__top-image.changing .customer-car-detail__top-switch-image {
    opacity: .5;
}

.customer-car-detail__top-image .customer-car-detail__top-switch-image {
    transition: opacity .5s;
    opacity: 1;
    height: 100%;
}

.customer-car-detail__top-plate--kei{
    border: none;
    background: #e4d620;
    color: #26130a;
}

.customer-car-detail__top-plate--jigyo{
    border: none;
    background: #0e703d;
    color: #FFF;
}

.customer-car-detail__top-plate-info{
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    margin: 0 0 0.25rem;
}

.customer-car-detail__top-plate-chiiki,
.customer-car-detail__top-plate-bunrui,
.customer-car-detail__top-plate-hira{
    font-size: 0.875rem;
    text-align: center;
    word-break: keep-all;
    white-space: nowrap;
}

.customer-car-detail__top-plate-chiiki{
    margin: 0 5% 0 0;
}

.customer-car-detail__top-plate-bunrui{
    margin: 0 5% 0 0;
}

.customer-car-detail__top-plate-hira{
}

.customer-car-detail__top-plate-num{
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    letter-spacing: -0.6px;
    word-break: keep-all;

}

.search-result .customer-car-detail__top-plate-num {
    font-size: 2rem;
}

.search-back {
    text-align: center;
}

.search-back .search-back__link {
    color: #3399ff;
    text-decoration: underline;
}

.search-condition :not(.js-tableSearchConditionsButton){
    background: var(--sub-button-bg-color);
    border: 1px solid var(--customer-name-text-color);
}


/* 自家用 乗用軁E*/
.customer-car-detail__top-plate.privatePlate.ordinary {
    background: #F9F9F9;
    color: #0e3c21;
}

/* 自家用 小型軁E*/
.customer-car-detail__top-plate.privatePlate.tiny {
    background: #F9F9F9;
    color: #0e3c21;
}

/* 自家用 軽自動軁E*/
.customer-car-detail__top-plate.privatePlate.light {
    background: #ffd110;
    color: #333;
}


/* 事業用 乗用軁E*/
.customer-car-detail__top-plate.businessPlate.ordinary {
    background: #0e3c21;
    color: #F9F9F9;
}

/* 事業用 乗用軁E*/
.customer-car-detail__top-plate.businessPlate.tiny {
    background: #0e3c21;
    color: #F9F9F9;
}

/* 事業用 乗用軁E*/
.customer-car-detail__top-plate.businessPlate.light {
    background: #333;
    color: #ffd110;
}



.customer-car-detail__top-link{
    width: 45%;
}

.customer-car-detail__top-link a{
    width: 100%;
    background: #F90;
    box-sizing: border-box;
    border-radius: 3px;
    color: #FFF;
    padding: 20% 10%;
    display: block;
    text-align: center;
}

.customer-car-detail__bottom{
    /*padding: 0 5%;*/
}

.customer-car-detail__bottom div{
    background: var(--table-customer-bg-color);
    padding: 10px 34px;
    border-radius: 4px;
}


.customer-car-detail__bottom .table--hide{
    padding: 0px 34px 10px;
    margin: 0;
}


.customer-car-detail__title {
    margin-bottom: 15px;
}

.customer-car-detail__title_maker {
    margin-right: 5px;
}

.customer-car-detail__title_name {

}

.customer-car-detail__bottom dt{
    clear: both;
    font-size: 1rem;
    font-weight: bold;
    margin-top: 20px;
}

.customer-car-detail__bottom dd{
    clear: both;
    font-size: 0.875rem;
    margin-top: -20px;
    padding-left: 30%;
}

.table-customer-list tr {
    position: relative;
    cursor: pointer;
}

.table-customer-list tr:nth-of-type(1) {
    cursor: default;
}

.table-customer-list th{
    background: none;
    color: var(--light-text-color);
    border-bottom: 1px solid var(--border-color);
    padding: 7px 5px 12px;
}

.table-customer-list td{
    color: var(--dark-text-color);
    text-align: center;
    font-size: 0.82rem;
    font-weight: bold;
}


.car-owner .table-customer-list .table-customer-list__date {
    word-break: keep-all;
}


.table-customer-list--no{
    width: 33%;
}

.table-customer-list--car-name{
    width: 40%;
}

.table-customer-list--customer-name{
    width: 25%;
}

.customer-box__owner_list .table-customer-list--no {
    width: 40%;
}

.customer-box__owner_list .table-customer-list--car-name {
    width: 25%;
}

.customer-box__owner_list .table-customer-list--limit {
    width: 30%;
}

.table-customer-info{
    margin: 15px 0 0;
    padding: 11px 34px;
    background: var(--table-customer-bg-color);
    border-radius: 4px;
    color: #3C3C3C;
}

.table-customer-info th{
    width: 40%;
    color: var(--customer-box-text-color);
    text-align: left;
    padding: 8px 0;
}

.table-customer-info td{
    width: 60%;
    color: var(--dark-text-color);
    padding: 8px 0;
}


.table-customer-car-detail th{
    width: 26%;
    text-align: left;
    color: var(--dark-text-color);
    word-break: keep-all;
    white-space: nowrap;
}

.table-customer-car-detail td{
    width: 60%;
    color: var(--dark-text-color);
    word-break: keep-all;
}


.table-customer-car-detail__button{
    border-top: 1px solid #95A1C0;
    color: var(--customer-name-text-color);;
    font-weight: bold;
    margin: 15px 0 0;
    padding: 5% 0 2%;
    cursor: pointer;
    text-align: center;
}

.customer-car-detail__info-table{
    width: 65%;
}

.customer-car-detail__info-outer {
    font-weight: bold;
}

.customer-car-detail__info-outer .customer-car-detail__info-parts {
    color: var(--dark-text-color);
    font-size: 0.925rem;
    padding: 5px;
}

.car-history {
    margin-bottom: 45px;
}

.car-history .car-history__nodata {
    color: var(--dark-text-color);
    font-size: 13px;
    font-weight: bold;
}

.table-car-history tr {
    cursor: pointer;
}

.table-car-history tr:nth-of-type(1) {
    cursor: default;
}

.table-car-history th{
    background: none;
    color: var(--light-text-color);
    font-weight: bold;
    border-bottom: 1px solid var(--border-color);
    padding: 7px 5px 12px;
}

.table-car-history td{
    color: var(--dark-text-color);
    text-align: center;
    word-break: keep-all;
    white-space: nowrap;
    height: 50px;
    font-size: 0.825rem;
    font-weight: bold;
}

.table-car-history--type{
    width: 40%;
}

.table-car-history--mileage{
    width: 30%;
}

.table-car-history--date {
    word-break: keep-all;
}

.table-car-history .matched-string {
    font-size: 12px;
    position: absolute;
    right: 5px;
    bottom: 5px;
    background: #fc0;
    word-break: keep-all;
    white-space: nowrap;
    padding-left: 40px;
    padding-right: 10px;
    border-radius: 5px;
}

.table-car-history .matched-string:before {
    content: "HIT";
    font-size: 11px;
    line-height: 16px;
    width: 30px;
    height: 15px;
    position: absolute;
    top: 0;
    left: 5px;
    background: #333;
    opacity: 0.9;
    color: #FFFFFF;
    border-radius: 5px;
}

.table-car-history .table-car-history__click_target {
    height: 65px;
}

body[data-theme="dark"] .table-car-history .matched-string {
    color: #333;
}

.table-payment-history th{
    background: none;
    color: var(--light-text-color);
    font-weight: bold;
    border-bottom: 1px solid var(--border-color);
    padding: 7px 3px 12px;
}

.table-payment-history td{
    color: var(--dark-text-color);
    font-size: 0.825rem;
    font-weight: bold;
}

th.table-payment-history--name{
    width: 40%;
}

th.table-payment-history--num{
    width: 20%;
}

th.table-payment-history--cost{
    width: 22%;
}

td.table-payment-history--name{
    text-align: left;
    font-size: 0.825rem;
}

td.table-payment-history--num{
    text-align: right;
    word-break: keep-all;
    white-space: nowrap;
}

td.table-payment-history--cost{
    text-align: right;
    word-break: keep-all;
    white-space: nowrap;
}

.payment-history__no_receipt {
    text-align: center;
    font-size: 14px;
    color: var(--dark-text-color);
}

.search-parts{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 15px;
}


.search-parts form{
    width: 100%;
    display: block;
    margin-bottom: 15px;
}

.search-parts input[type = "text"]{
    width: 69%;
    margin: 0 3% 0 0;
    border-radius: 5px;
}

.search-parts button{
    width: calc(30% - 3% - 5px);
    padding: 10px 5px;
    border-radius: 5px;
    background: var(--main-button-bg-color);
    color: #F0F4F4;
}

.search-parts img{
    vertical-align: -15%;
    padding: 0 2px 0;
}

.search-parts .search-parts__reset_link {
    font-size: 13px;
    color: #39F;
    cursor: pointer;
    text-decoration: underline;
    display: none;
}

.search-parts .search-parts__reset_link.show {
    display: block;
}

.customer-memo__textarea {
    margin-bottom: 15px;
}

.customer-memo__button--save{
    width: 100%;
    padding: 10px 100px;
    background: var(--parts-shop-sub-button);
    box-sizing: border-box;
    border-radius: 5px;
    color: #FFF;
    display: block;
    text-align: center;
}

.customer-buttons{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 15px 0 36px;
    box-sizing: content-box;
    z-index: 1;
}


.customer-buttons__item img{
    padding-bottom: 8px;

}

.customer-buttons__item.customer-buttons__item--current{
    background: var(--pushed-button-bg-color);
    border-radius: 10px;
    box-shadow: var(--pushed-button-box-shadow);
    text-indent: 0px;
    cursor: default;
}

.customer-buttons__item--current:after{
    content: "";
}

.customer-contact-tel,
.customer-contact-mobile,
.customer-contact-sms,
.parts-shop__item{
    display: flex;
    line-height: 1;
    border-right: 26px solid  var(--result-next-arrrow-bg);
    box-shadow: 5px 5px 5px 10px rgba(45,133,115,.1);
    background: var(--parts-shop-main-button);
    align-items: center;
    padding: 0px 15px 0px;
}

/*
.customer-contact-tel:before,
.customer-contact-mobile:before,
.customer-contact-sms:before{
    content: "";
    background: url(/img/common/top_btn_bg@2x.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
*/

.customer-contact-tel{
    margin-top: 50px;
}

.customer-contact-tel:after {
    content: "";
    background: var(--customer-contact-tel-after-bg);
    background-size: 14px 17px;
    width: 14px;
    height: 17px;
    position: absolute;
    top: calc(50% - 8.5px);
    right: -21px
}
.customer-contact-mobile:after {
    content: "";
    background: var(--customer-contact-mobile-after-bg);
    background-size: 14px 22px;
    width: 14px;
    height: 22px;
    position: absolute;
    top: calc(50% - 8.5px);
    right: -21px
}
.customer-contact-sms:after {
    content: "";
    background: var(--customer-contact-sms-after-bg);
    background-size: 17px 12px;
    width: 17px;
    height: 12px;
    position: absolute;
    top: calc(50% - 8.5px);
    right: -21px
}

.customer-contact-sms h2{
    top: -40;
}

.customer-contact-tel__title,
.customer-contact-mobile__title{
    width: 15%;
    box-sizing: border-box;
    margin: 0 3% 0 0;
    font-size: 0.875rem;
    font-weight: bold;
    text-align: center;
}

.customer-contact-tel__num,
.customer-contact-mobile__num{
    width: 100%;
    box-sizing: border-box;
    margin: 0 5% 0 0;
    font-size: 1.25rem;
    font-weight: bold;
    word-break: keep-all;
}

.customer-contact__num_link,
.customer-contact-not__contact {
    display: inline-block;
    width: 100%;
    height: 100px;
    line-height: 100px;
}

/*
.customer-contact-buttons{
    width: 25%;
    text-align: right;
}
*/

.customer-contact-buttons__item{
    width: 24px;
    height: 24px;
    display: inline-block;
}

.customer-contact-buttons__tel{
    background: url(/img/common/customer_tel.png) no-repeat center center;
    background-size: 22px 22px;
}

.customer-contact-buttons__mail{
    background: url(/img/common/customer_mail.png) no-repeat center center;
    background-size: 22px 22px;
}

.customer-contact-not__contact {
    box-sizing: border-box;
    margin: 0 5% 0 0;
    color: var(--dark-text-color);
    font-weight: bold;
}


/* 04: 串刺し検索 skewers */
.skewers{}

.table-skewers-list th{
    background: none;
    color: var(--light-text-color);
    font-weight: bold;
    border-bottom: 1px solid var(--border-color);
    padding: 7px 5px 12px;
}

.table-skewers-list td{
    color: var(--dark-text-color);
    text-align: center;
}

.table-skewers-list--no{
    width: 33%;
}

.table-skewers-list--car-name{
    width: 42%;
}

.table-skewers-list--customer-name{
    width: 25%;
}

/* 05: 部品商連絡 parts-shop */
.parts-shop{}

.parts-shop__item{
    width: 100%;
    background: var(--parts-shop-main-button);
    border-radius: 10px;
    box-shadow: var(--button-box-shadow);
    color: var(--light-text-color);
    display: block;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    margin: 0 0 15px;
    padding: 25px 5px;
    /*display: block;*/
    text-align: center;
}

.parts-shop__item{
    position: relative;
}

.parts-shop__item:after{
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    top: 36%;
    right: -22px;
    background-image: var(--contact-tel-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 15px 15px;
    position: absolute;
}

.parts-shop__no_data {
    width: 100%;
    background: var(--button-bg-color);
    border-radius: 10px;
    box-shadow: var(--button-box-shadow);
    color: var(--light-text-color);
    display: block;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    margin: 0 0 15px;
    padding: 25px 5px;
    text-align: center;
}


.parts-shop__no_data_str {
    margin-bottom: 15px;
}

.parts-shop__no_data_link,
.parts-shop-setting_link,
.dealer-list-link{
    width: 70%;
    max-width: 480px;
    background: var(--parts-shop-sub-button);
    border-radius: 10px;
    box-shadow: var(--button-box-shadow);
    color: #D7DFEB;
    display: block;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    margin: 50px auto 0;
    padding: 20px 5px;
    text-align: center;
}


/* 06: 設定画面 setting */
.setting{}

.setting__item{
    width: 100%;
    background: var(--button-bg-color);
    border-radius: 10px;
    box-shadow: var(--button-box-shadow);
    color: var(--light-text-color);
    display: block;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    margin: 0 0 15px;
    padding: 25px 5px;
    text-align: center;
}

.setting-delete{
    margin: 0 0 0.5rem;
    text-align: right;
}

.setting-delete .setting-delete__checkbox {
    margin: 0;
    vertical-align: middle;
    cursor: pointer;
}

.setting-delete__button{
    border-radius: 12px;
    background: url(/img/common/setting_delete.png) no-repeat center right 5px;
    background-size: 16px 16px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: bold;
    display: inline-block;
    padding: 3px 25px 3px 3px;
}


.add-parts-shop{
    border: 2px dashed var(--border-color);
    padding: 2rem;
    margin: 0 0 2rem;
    text-align: center;
    color: var(--light-text-color);
    background: var(--parts-shop-main-button);
    position: relative;

}

.add-parts-shop:after{
    content: "";
    width: 100px;
    height: 100%;
    position: absolute;
    top: 0;
    left: calc(10% - 26px);
    background-image: url(/img/common/upload_csv.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;
}

/* 07: CSV関連 csv */
.csv{}


/* **: 管琁E??イチE*/
.admin .header__logo,
.admin .header__nav-button{
    display: flex;
    justify-content: center;
    align-items: center;
}

.admin .header__logo{
    /*justify-content: left;*/
    padding-left: 2rem;
}

.admin .header__logo{
    width: calc(100% - 50px);
    color: #AAA;
    font-size: 14px;
    font-weight: bold;
}

/*.header__back-button,
.header__nav-button{
    width: 50px;
    cursor: pointer;
}


.header__nav-button{

}*/


/*.admin .wrapper{
    background: #F5F5F5;
    padding-top: 120px;
}*/

.admin .container{
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

.admin .csv-upload-order-string {
    font-size: 14px;
    text-align: center;
    margin-bottom: 15px;
    font-weight: bold;
}

.admin .admin-box-outer {
    position: relative;
    display: none;
}

.admin[data-current-form="1"] .admin-box-outer[data-phase-id="1"],
.admin[data-current-form="2"] .admin-box-outer[data-phase-id="2"],
.admin[data-current-form="3"] .admin-box-outer[data-phase-id="3"],
.admin[data-current-form="4"] .admin-box-outer[data-phase-id="4"],
.admin[data-current-form="5"] .admin-box-outer[data-phase-id="5"],
.admin[data-current-form="6"] .admin-box-outer[data-phase-id="6"] {
    display: block;
}

.admin .admin-box-overlay.active {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}


.admin .admin-box{
    margin: 0 0 3rem;
    text-align: center;
    border-radius: 17px;
    background: var(--customer-box-bg-color);
    padding: 2.5rem;
}

.admin .admin-box.has--error{
    border-radius: 17px;
    background: #f8d7da;
    box-shadow: inset 5px 5px 11px #eeced1,
                inset -5px -5px 11px #ffe0e3;
}


.admin .admin-box.csvfile-select{
    opacity: 0;
    transition: opacity .8s;
}


.admin h2{
    font-size: 1.45rem;
    font-weight: bold;
    margin: 0 0 2rem;
    text-align: center;
}

.admin .upload-csv-table-name {
    font-size: 14px;
    margin-bottom: 15px;
}

.admin .select-shop__list{
    background: #FFF;
    border: 1px solid #CCC;
    color: #343445;
    padding: 10px;
    width: 100%;
    margin: 0 auto 1rem;
    text-align: center;
}

.admin .select-shop__attention{
    text-align: right;
}

.admin .select-shop__attention .like--link{
    margin: 0 0 15px;
}

.admin .select-shop__attention-text{
    width: 100%;
    display: none;
    padding: 1.5rem;
    background: #FFF;
    border: 1px solid #EEE;
    color: #999;
    font-size: 0.875rem;
    text-align: left;
    margin-bottom: 15px;
}

.admin .form-csv-upload{

}

.admin .form-csv-upload input[type="file"].csv-upload-file{
    width: 100%;
    display: none;
    margin: 0 0 2rem;
}

.admin .form-csv-upload .upload-box,
.admin .form-csv-upload .upload-box-test {
    width: 100%;
    position: relative;
    padding: 1.25rem;
    border: 2px dashed #CCC;
    border-radius: 5px;
    background: var(--parts-shop-main-button);
    margin: 0 0 1rem;
    cursor: pointer;
}

.admin .form-csv-upload .upload-box:after{
    content: "";
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(/img/common/upload_csv.png);
    background-size: 50px 50px;
    display: inline-block;
    height: 50px;
    width: 50px;
    vertical-align: top;
}



.admin .form-csv-upload .upload-box.file-selected,
.admin .form-csv-upload .upload-box-test.file-selected {
    background: #FFF;
    cursor: default;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}

/*
.admin .form-csv-upload .upload-box.file-selected:before,
.admin .form-csv-upload .upload-box-test.file-selected:before {
    content: 'ファイル吁E;
    left: calc(50% - 100px);
    width: 100px;
    position: absolute;
    top: 25px;
    height: 25px;
    border-radius: 20px;
    background: #eee;
    z-index: 1;
    border: 1px solid #eee;
    text-align: center;
    line-height: 25px;
    color: #555;
    font-size: 11px;
}
*/

.admin .form-csv-upload .upload-box.file-selected .fileTitle,
.admin .form-csv-upload .upload-box-test.file-selected .fileTitle {
    width: 100px;
    height: 25px;
    border-radius: 20px;
    background: #eee;
    z-index: 1;
    border: 1px solid #eee;
    text-align: center;
    line-height: 25px;
    color: #555;
    box-sizing: border-box;
    font-size: 11px;
    display: inline-block;
    vertical-align: top;
}

.admin .form-csv-upload .upload-box .fileName,
.admin .form-csv-upload .upload-box-test .fileName,
.admin .form-csv-upload .upload-box .fileChange,
.admin .form-csv-upload .upload-box-test .fileChange,
.admin .form-csv-upload .upload-box .fileTitle,
.admin .form-csv-upload .upload-box-test .fileTitle {
    display: none;
}


.admin .form-csv-upload .upload-box.file-selected .fileChange,
.admin .form-csv-upload .upload-box-test.file-selected .fileChange {
    color: #36f;
    display: block;
    position: absolute;
    bottom: 10px;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    right: 30px;
    vertical-align: top;
}

.admin .form-csv-upload .upload-box.file-selected .fileName,
.admin .form-csv-upload .upload-box-test.file-selected .fileName {
    display: block;
    font-weight: bold;
    color: #999;
    position: relative;
    font-size: 14px;
    display: inline-block;
    text-align: left;
    margin: 0 0 0 5px;
}

.admin .form-csv-upload .upload-box:hover,
.admin .form-csv-upload .upload-box-test:hover {
    opacity: 0.7;
}

.admin .form-csv-upload .upload-box.file-selected:hover,
.admin .form-csv-upload .upload-box-test.file-selected:hover {
    opacity: 1;
}

/* varが使えるブラウザは適用 */
.admin .form-csv-upload .admin-box .upload-button {
    background: var(--parts-shop-sub-button);
}

.admin .form-csv-upload .upload-button{
    background: linear-gradient(175deg, #446CA5 0%, #40659A 50%, #4B70A5 50%);
    border-radius: 5px;
    color: #FFF;
    display: inline-block;
    font-size: 1.25rem;
    max-width: 480px;
    width: 70%;
    padding: 10px 20px;
    text-align: center;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}

.admin .form-csv-upload .upload-button:hover {
    opacity: 0.8;
}


.admin .error-attention{
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    margin: 0 0 1.5rem;
    border-radius: 17px;
    padding: 1.5rem;
}

.admin .error-attention__title{
    font-weight: bold;
    margin: 0 0 1rem;
}

.admin .error-attention__list{
    max-height: 4.8em;
    overflow-y: scroll;
}

.admin .error-attention__list::-webkit-scrollbar {
    width: 8px;
}

.admin .error-attention__list::-webkit-scrollbar-track {
    border-radius: 4px;
    background: #F5F5F5;
}

.admin .error-attention__list::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background:#721c24;
}

.admin .after-links a{
    width: 100%;
    color: #39F;
    display: block;
    font-size: 0.875rem;
    margin: 0 0 1rem;
    text-decoration: underline;
    position: relative;
}

.admin .after-links .close-window{
    margin: 3rem 0 0;
}

.admin #csv-upload-overlay {
    width: 100%;
    height: 100%;
    background: #000;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    transition: opacity .3s;
    -webkit-transition: opacity .3s;
    z-index: -1;
}

#search-overlay {
    width: 100%;
    height: calc( 100% - 10vh );
    top: 39px;
    position: fixed;
    display: block;
    position: fixed;
    background: rgba(0,0,0,0.8);
    opacity: 0;
    transition: opacity .3s;
    z-index: -1;
}

.admin #csv-upload-alert {
    width: 510px;
    height: 160px;
    background: #fbfbfb;
    border: 1px solid #EEE;
    border-radius: 5px;
    color: #999;
    font-size: 13px;
    box-sizing: border-box;
    margin: 0px auto 60px;
    position: absolute;
    padding: 40px 15px 15px;
    text-align: center;
    top: calc(50% - 80px);
    left: calc(50% - 255px);
    transition: opacity .6s;
    -webkit-transition: opacity .6s;
    display: none;
}

#search-alert {
    width: 80%;
    height: 150px;
    background: #fbfbfb;
    border: 1px solid #EEE;
    border-radius: 5px;
    color: #999;
    display: none;
    font-size: 13px;
    box-sizing: border-box;
    margin: 0px auto 60px;
    position: fixed;
    padding: 40px 15px 15px;
    text-align: center;
    top: calc(50% - 75px);
    opacity: 0;
    left: 10%;
    transition: opacity .6s;
    -webkit-transition: opacity .6s;
    z-index: -5;
}

.admin #csv-upload-alert:after, #search-alert:after {
    content: "アップロード中です";
    height: 30px;
    color: #fff;
    left: calc(50% - 75px);
    line-height: 17px;
    position: absolute;
    text-align: center;
    padding: 5px 10px;
    top: -14px;
    z-index: 1;
    border-radius: 20px;
    border-width: 1px;
    border-style: solid;
    border-color: #999;
    border-image: initial;
    background: #333;
}

.admin #csv-upload-alert:after {
    left: calc(50% - 70px);
}

 #search-alert:after {
    content: "検索中です";
    left: calc(50% - 45px);
}

#search-alert.reset-alert:after {
    content: "リセット中です";
    left: calc(50% - 55px);
}

#search-alert.resist-alert:after {
    content: "登録中です";
    left: calc(50% - 43px);
}


.admin #csv-upload-overlay.show, #search-overlay.show {
    opacity: 0.3;
    z-index: 2;
}

.admin #csv-upload-alert.show, .admin #csv-uploading-loader.show,
#search-alert.show, #search-loader.show {
    opacity: 1;
    z-index: 3;
    display: block;
}

.admin #csv-upload-alert .text,
#search-alert .text {
    font-size: 0.85rem;
    margin-bottom: 5px;
    color: #333;
}

.admin #csv-upload-alert .csv-upload-alert-string {
    margin-bottom: 15px;
}

.admin #csv-uploading-loader, #search-loader {
    width: 37px;
    height: 32px;
    background: url(/img/common/ajax-loader_p.gif) no-repeat top left;
    background-size: contain;
    left: calc(50% - 18.5px);
    opacity: 0;
    position: absolute;
    top: 95px;
    transition: all .6s;
    -webkit-transition: all .6s;
    z-index: -1;
}

#search-loader {
    top: 100px;
}


.upload-caption {
    width: 95%;
    color: #999;
    display: block;
    font-size: 13px;
    margin: 30px auto 15px;
    text-align: center;
}

.upload-guide {
    width: 90%;
    background: #FFF;
    border: 1px solid #EEE;
    border-radius: 5px;
    color: #999;
    display: block;
    font-size: 13px;
    margin: 30px auto 60px;
    position: relative;
    padding: 30px 15px 15px;
    text-align: center;
}

.upload-guide:before {
    content: "ご注意";
    width: 100px;
    height: 30px;
    border-radius: 20px;
    border: 1px solid #EEE;
    color: #555;
    background: #fff;
    left: calc(50% - 50px);
    line-height: 30px;
    position: absolute;
    text-align: center;
    top: -15px;
    z-index: 1;
}

.upload-guide:before {
    content: 'このページについて';
    width: 150px;
    left: calc(50% - 75px);
    text-align: center;
}

.upload-caption .text, .upload-guide .text {
    display: block;
    margin-bottom: 5px;
}

.upload-caption .text span {
    font-weight: bold;
}

.upload-guide .attention {
    color: #f00;
    margin-bottom: 10px;
}



.progressbar-item__display:before {
    width: 40px;
    color: #aaa;
    font-size: 9px;
    position: absolute;
    left: -17px;
    top: 12px;
    transition: all 2s;
}

.progressbar-item:not(.progressbar-item-last):after {
    content: "";
    width: 50px;
    height: 2px;
    background: #ddd;
    left: 6px;
    position: absolute;
    top: calc( 50% - 1px );
}

.progressbar-item__display:nth-of-type(1):before {
    content: "拠点";
    color: #aaa;
    font-size: 10px;
    font-weight: normal;
}

.js-upload-box.js-upload-box{
    background: var(--sub-button-bg-color);
}

.js-progressbar[data-current-progress="1"] .progressbar-item__display:nth-of-type(1):before {
    content: "拠点";
    color: var(--customer-name-text-color);
    font-weight: bold;
    font-size: 11px;
}


.progressbar-item__display:nth-of-type(2):before {
    content: "顧客";
    color: #aaa;
    font-size: 10px;
    font-weight: normal;
}

.js-progressbar[data-current-progress="2"] .progressbar-item__display:nth-of-type(2):before {
    content: "顧客";
    color: #333;
    font-weight: bold;
    font-size: 11px;
}

.progressbar-item__display:nth-of-type(3):before {
    content: "車両";
    color: #aaa;
    font-size: 10px;
    font-weight: normal;
}

.js-progressbar[data-current-progress="3"] .progressbar-item__display:nth-of-type(3):before {
    content: "車両";
    color: #333;
    font-weight: bold;
    font-size: 11px;
}

.progressbar-item__display:nth-of-type(4):before {
    content: "伝票";
    color: #aaa;
    font-size: 10px;
    font-weight: normal;
}

.js-progressbar[data-current-progress="4"] .progressbar-item__display:nth-of-type(4):before {
    content: "伝票";
    color: #333;
    font-weight: bold;
    font-size: 11px;
}

.progressbar-item__display:nth-of-type(5):before {
    content: "伝票詳細";
    color: #aaa;
    font-size: 10px;
    font-weight: normal;
}

.js-progressbar[data-current-progress="5"] .progressbar-item__display:nth-of-type(5):before {
    content: "伝票詳細";
    color: #333;
    font-weight: bold;
    font-size: 11px;
    word-break: keep-all;
}


.admin .form-csv-upload .upload{
    width: 200px;
    background: #1c2e69;
    color: #FFF;
    display: inline-block;
    font-size: 1.25rem;
    padding: 10px;
    text-align: center;
    transition: opacity 0.3s;
    -webkit-transition: opacity 0.3s;
}

.admin .form-csv-upload .upload:hover {
    opacity: 0.8;
}

.admin .progressbar-box {
    margin: 15px 0 60px;
    text-align: center;
}

.admin .progressbar-box .progressbar {
    display: inline-block;
    position: relative;
}

.admin .progressbar-current-image {
    width: 13px;
    height: 13px;
    border-radius: 20px;
    display: block;
    position: absolute;
    top: -6px;
    transition: 1s;
    z-index: 2;
}

.admin .progressbar-item__display {
    width: 6px;
    height: 6px;
    background-color: #ddd;
    border-radius: 100%;
    float: left;
    margin: 0 50px 0 0;
    position: relative;
    transition: all .5s;
}

.admin .progressbar-item__display.progressbar-item-last {
    margin: 0;
}

.admin .progressbar-item__display .progressbar-order {
    width: 10px;
    color: var(--customer-name-text-color);
    display: block;
    font-size: 12px;
    font-weight: bold;
    left: -2px;
    position: absolute;
    top: -25px;
    text-align: center;
}


.js-progressbar[data-current-progress="1"] .progressbar-current-image{
    -webkit-transform: translate(-4px, 2px);
    transform: translate(-4px, 2px);

}
.js-progressbar[data-current-progress="2"] .progressbar-current-image{
    -webkit-transform: translate(53px, 2px);
    transform: translate(53px, 2px);
}
.js-progressbar[data-current-progress="3"] .progressbar-current-image{
    -webkit-transform: translate(108px, 2px);
    transform: translate(108px, 2px);
}
.js-progressbar[data-current-progress="4"] .progressbar-current-image{
    -webkit-transform: translate(164px, 2px);
    transform: translate(164px, 2px);
}
.js-progressbar[data-current-progress="5"] .progressbar-current-image{
    -webkit-transform: translate(221px, 2px);
    transform: translate(221px, 2px);
}
.js-progressbar[data-current-progress="6"] .progressbar-current-image{
    -webkit-transform: translate(277px, 2px);
    transform: translate(277px, 2px);
}

.js-progressbar .progressbar-item-current {

}

.js-progressbar .progressbar-item-current .progressbar-order {
    -webkit-transform: scale(1.25);
    transform: scale(1.25);
}

.admin .progressbar-item__finished {
    background: #ff8d00;
}

.progressbar-item__finished:before {
    content: "";
    font-size: 9px;
    opacity: 1;
}

.pc-contact-form{
    display: none;
}

.admin .progressbar-progress-line{
    height: 2px;
    margin-top: 2px;
    background: #ff8d00;
    position: absolute;
    width: 0%;
    transition: width .7s;
}

.admin .js-progressbar[data-current-progress="2"] .progressbar-progress-line {
    width: 25%;
}

.admin .js-progressbar[data-current-progress="3"] .progressbar-progress-line {
    width: 50%;
}

.admin .js-progressbar[data-current-progress="4"] .progressbar-progress-line {
    width: 75%;
}

.admin .js-progressbar[data-current-progress="5"] .progressbar-progress-line {
    width: 98%;
}

.admin .js-progressbar[data-current-progress="6"] .progressbar-progress-line {
    width: 98%;
}

.admin .csv-upload-form-outer .admin-box-outer {
    opacity: 0;
    transition: opacity 1s;
}

.admin .csv-upload-form-outer .admin-box-outer.csv-form-select {
    opacity: 1;
}

.admin .form-back-outer {
    margin: 15px 0;
    text-align: center;
}

.admin .form-back-link {
    text-decoration: underline;
}

.admin .hi-icon-now:after{
    width: 10px;
    height: 10px;
    opacity: 1;
    background: #ff8d00;
    color: #fff;
    padding: 1px;
    display: block;
    position: absolute;
    font-size: 10px;
    top: 0px;
    right: 0px;
    border-radius: 100%;
    content: '';
    z-index: 130;
    box-sizing: content-box;
    animation: sonarEffect 1.3s ease forwards infinite;
}

.login .error_message {
    font-size: 12px;
    color: #F00;
    margin-bottom: 10px;
}

.customer-memo .error_message, .customer-memo .success_message {
    font-size: 12px;
    color: #F00;
    margin: 10px 0;
    text-align: center;
}


.parts-shop__list .dealer-box[data-display="0"] {
    display: none;
}

.dealer-result{
    padding: 20px 30px;
    background: var(--customer-box-bg-color);
    border-radius: 10px;
    color: var(--customer-name-text-color);
    font-weight: bold;
    font-size: 20px;
    text-align: center;
}

.parts-shop__list {
    margin: 0;
    background: ;
}



.call__nav_string {    font-size: 12px;
    padding: 0 0 0 2.5%;
    margin-bottom: 15px;
    color: var(--dark-text-color);
}

.sortarrow {
    display: none;
    /*display: inline-block;
    background: #2a3f60;
    margin-left: 2px;
    opacity: .8;*/
}

.sortarrow img {
    display: inline-block;
    width: 12px;
}

.notClick {
    z-index: -1;
}



.customer-buttons__item {
    position: relative;
    background: var(--customer-buttons-bg-color) 0% 0% no-repeat padding-box;
    box-shadow: 0px 5px 10px #1F44734D;
    width: 70px;
    height: 50px;
    box-sizing: border-box;
    margin: 0 30px 0 0;
    color: var(--customer-name-text-color);
    font-size: 0.875rem;
    font-weight: bold;
    border-radius: 10px;
}

.customer-buttons__item:last-child{
    margin: 0;
}

.customer-buttons__item:before{
    content: "";
    width: 20px;
    height: 2px;
    background-color: #fc0;
    position: absolute;
    top: 0;
    left: calc( 50% - 10px );
}

.customer-buttons__item[data-type = "memo"]:before{
    background-color: #8BCC34;
}

.customer-buttons__item[data-type = "tel"]:before{
    background-color: #EC6E6E;
}

.customer-buttons__item[data-type = "map"]:before{
    background-color: #EE8A27;
}


.customer-buttons__item:after{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.customer-buttons__item[data-type = "memo"]:after{
    content:var(--memo-image);
}

.customer-buttons__item[data-type = "tel"]:after{
    content:var(--tell-image);
}

.customer-buttons__item[data-type = "map"]:after{
    content: var(--map-image);
}

.customer-buttons__item span {
    position: absolute;
    bottom: -30px;
    width: 100%;
    text-align: center;
    left: 0;
}

.customer-contact-tel.customer-box h2{
    top: -45px;
}

.customer-contact-tel.customer-box:after,
.customer-contact-mobile.customer-box:after
{
    content: "";
    width: 20px;
    height: 100%;
    position: absolute;
    top: 0;
    right: -23px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%;
}

.customer-contact-tel.customer-box:after{
    background-image: var(--contact-tel-image);
}

.customer-contact-mobile.customer-box:after{
     background-image: var(--contact-mobile-image);
}

.customer-contact-sms.customer-box:after{
     background-image: var(--contact-sms-image);
}

.footer-title{
     text-align: center;
     background: linear-gradient(180deg, #29456D 0%, #1D3250 100%);
     width:100%;
     margin: 0 auto;
}

.footer-bar {
    margin: 0 auto;
    padding: 10px 0;
    align-items: center;
    color: #FFFFFF;
    background: linear-gradient(180deg, #29456D 0%, #1D3250 100%);
    font-weight: bold;
    font-size: 20px;
    height: 50px;
    text-align: center;
    position: relative;
}

footer{
    position: relative;
}

footer:after{
    content: "";
    width: 100%;
    height: 100%;
    background-image: url(/img/pc/bottom_bg_pc.png);
    background-size: 100%;
    position: absolute;
    top: -50px;
    left: 0;
    background-position: center;
    background-repeat: no-repeat;
}

footer{
    width: 100%;

}

.show {
    display: block;
}

.hide {
    display: none;
}

.registerHide {
    display: none !important;
}


.table-toggle-trigger.hide{
    display: block;
}

.no-client__label {
    background-color: #999;
    color: #fff;
    font-size: 0.85rem;
    font-weight: normal;
    padding: 0px 20px 2px;
    border-radius: 20px;
    position: absolute;
    right: 30px;
    top: 15px;
    text-shadow: 1px 1px 0.15px rgb(0 0 0 / 50%);
    display: none;
}

.no-client-car__label {
    background-color: #999;
    color: #fff;
    font-size: 0.85rem;
    font-weight: normal;
    padding: 0px 20px 2px;
    border-radius: 20px;
    position: absolute;
    right: 30px;
    top: 15px;
    text-shadow: 1px 1px 0.15px rgb(0 0 0 / 50%);
    display: none;
}


.no-client__label.show, .no-client-car__label.show {
    display: block !important;
}

.customer-detail-no__label.no-client__label {
    right: 10px;
    bottom: auto;
    top: 10px;
}

.no-client-car__label.no-client-car_detail__label {
    right: 20px;
    bottom: auto;
    top: 20px;
}

.no-client-car__label.no-client-car_history__label {
    right: 10px;
    bottom: auto;
    top: 10px;
}


.customer-box.noClientLabelOuterClass, .customer-box.noClientCarLabelOuterClass {
    padding-top: 40px;
}


@media screen and (min-width:481px) and (max-width: 1020px) {

    .nav .nav__contact{
        display: inline-grid !important;
    }

    .nav .nav__contact-item{
        margin: 0 0 15px 0;
    }

    .nav .nav__contact-item.nav__contact-tel{
        margin: 0 0 15px;
    }

    /*.pc-contact-form{
        display: block;
    }

    .sp-contact-form{
        display: 
    }*/
}


@media screen and (min-width:481px) {

    .login .wrapper{
        padding-top: 5%;
    }

    .wrapper {
        width: calc(100% - 280px);
        right: 0;
        position: absolute;
        padding-bottom: 180px;
    }

    .top .wrapper {
        padding-top: 32px
    }

    header {
        background: #294282;
        border-radius: unset;
        border-bottom: none;
        justify-content: space-between;
        height: 32px;
    }

    header:after {
        height: 32px;
    }

    .header__search-link {
        display: none;
    }

    .login{
        margin-top: 0;
    }

    .login-copylight__name {
        width: 65%;
    }

    .add-parts-shop{
        width: 100%;
        margin: 0 auto 45px;
    }

    .header__pagetitle {
        width: calc( (100% - 280px) * 0.6);
        padding-right: calc( ((100% - 280px) * 0.4) );
    }

    .header__back-button-title {
        margin-left: 280px;
        word-break: break-all;
        white-space: nowrap;
    }

    .header__nav-button {
        display: none;
    }

    .admin .header__logo, .admin .header__nav-button{
        display: none;
    }

    .top-contents__user-image-outer {
        height: 163px;
        margin: 0 auto 30px;
    }

    .top-contents__user-image {
        width: 100%;
        height: 163px;
        background-image: url(/img/pc/main_img_pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        overflow: hidden;
        margin: 0 auto 30px;
        position: relative;
        z-index: 1;
    }

    .toggle-theme{
        left: calc(30% - 25px);
    }

    [data-theme = "dark"] .toggle-theme{
        left: 35%;
    }



    .nav {
        width: 280px;
        background: var(--pc-nav-bg-color);
        font-weight: normal;
        height: 100%;
        left: 0;
        overflow: hidden;
        top: 0;
        transition: none;
        padding: 35px 0 0;
    }

    .nav:after{
        content: "";
        background-image: var(--pc-nav-image);
        background-size: 180px 50px;
        background-repeat: no-repeat;
        width: 180px;
        height: 50px;
        position: absolute;
        bottom: 210px;
        right: calc(50% - 100px);
        font-size: 26px;
        font-weight: bold;
        color: var(--pc-nav-text-color);
        text-align: center;
    }

    .nav:before {
        content: "";
        width: 4px;
        height: 140px;
        background-color: #E47878;
        position: absolute;
        right: 0px;
        top: 50%;
        transform: translateY(-50%);
    }

    .nav__contact-address:after{
        vertical-align: top;
    }

    .nav .has--next-arrow:after{
        background-image: var(--pc-link-arrow-image);
    }

    .nav__item[data-page="setting"]:after{
        top: 15px;
        background: var(--pc-pulldown-arrow-image) no-repeat center center;
    }

    .nav .nav__contact {
        /*
        background: rgba(255,255,255,0.5);
        border-radius: 10px 0 0 0;
        position:fixed;
        right:0;
        display:flex;
        align-items: center;
        justify-content:center;
        */
        width: auto;
    }

    .nav .nav__contact-item {
        margin: 0 20px 0 0;
    }

     .nav .nav__contact .nav__contact-item:last-child{
        margin:0 5px;
    }


    .nav .nav__contact-item.nav__contact-tel {
        padding: 0;
        display: inline-block;
        margin: 10px 0;
        width: auto;
    }

    .nav .nav__contact-item.nav__contact-mail {
        display: inline-block;
        margin: 10px 0;
        vertical-align: top;
        padding: 10px 20px;
        width: auto;
    }

    .nav__contact-telnum{
        font-size: 1.6875rem;
    }

    .nav__contact-telnum:before {
            content: "";
        background: var(--nav-tel-image) no-repeat center center;
        background-size: 24px 24px;
        display: inline-block;
        width: 24px;
        height: 24px;
        left: -11%;
        top: 20%;
    }

    .nav__contact-address:after {
        left: -25px;
        top: -2px;
    }

    .nav .nav__contact-title {
        margin: 0 30px;
        background: #1D3557;
        font-size: 0.875rem;
        color: #E5E8EC;
    }

    .nav__contact-open-close .nav__contact-open-close-title {
        width: auto;
    }

    .nav__contact-open-close .nav__contact-open-close-time span {
        display: inline-block;
    }

    .nav__list {
        overflow: hidden;
        position: relative;
        height: 100vh;
    }

    .nav__item_dealer_outer {
        display: block;
    }

    .nav .nav__item[data-page="login"] {
        width: 100%;
    }

    .nav__item:not(:last-child){
        border: none;
        display: block;
    }

    .nav__list .nav__item p {
        border: none;
        color: var(--pc-nav-text-color);
    }

    .nav__item[data-page="setting"] {
        display: block;
    }


    .nav__item:not(:last-child){
        border-bottom: none;
    }

    .nav__item a {
        color: var(--pc-nav-text-color);
        padding: 15px 25px;
        font-size: 16px;
    }

    .nav__item--current {
        background: var(--pc-customer-box-bg);
    }

    .nav__item--current a {
        color: var(--pc-nav-text-color);
    }

    .nav__item .nav__item_dealer_link_outer {
        padding: 0;
        border: none;
    }



    .nav__item .nav__item_dealer_outer {
        display: block;
    }

    .nav__item .nav__item_dealer_tel {
        border: none;
    }

    .visual-setting {
        display: flex;
        padding: 40px 0px 10px;
        flex-direction: column;
    }

    #search-alert{
        left: calc(50% - 280px + 160px);
        top: calc(50vh - 75px);
        width: 500px;
    }

    .setting-theme {
        width: 50%;
        position: relative;
        padding: 15px 0;
        text-align: center;
        cursor: pointer;
    }

    .setting-theme:before {
        content: "ダークモード";
        font-size: 16px;
        font-weight: bold;
        color: var(--pc-nav-text-color);
        background: none;
        padding: 2px 12px;
        text-align: center;
        display: inline-block;
        position: absolute;
        top: -30px;
        left: 12px;
        border-radius: 9px;
    }

    .setting-theme:after {
        content: "";
        display: block;
        width: 40px;
        height: 16px;
        border-radius: 10px;
        background: #dedede;
        z-index: -1;
        top: calc( 50% - 8px );
        left: 24px;
        position: absolute;
    }

    .setting-font-size {
        width: 50%;
        position: relative;
        text-align: center;
        margin-bottom: 60px;
    }

    .setting-font-size:before{
        content: "文字サイズ";
        font-size: 16px;
        font-weight: bold;
        color: var(--pc-nav-text-color);
        background: none;
        padding: 2px 12px;
        text-align: center;
        display: inline-block;
        position: absolute;
        top: -30px;
        left: 12px;
    }

    .setting-font-size__button{
        font-size: 14px;
        font-weight: bold;
        background: #E5E9E9;
        border: 1px solid #CCC;
        border-radius: 2px;
        color: #343445;
        padding: 5px;
        display: inline-block;
        text-align: center;
        width: calc(1em + 12px);
        height: calc(1em + 12px);
        line-height: 1;
        cursor: pointer;
    }

    .form__submit .add-parts-shop__submit_button{
        width: 70%;
        max-width: 480px;
        padding: 15px;
    }

    .add-parts-shop:after {
        left: calc(20% - 60px);
    }

    .top-button__item {
        width: 45%;
        height: 200px;
        justify-content: start;
        flex-direction: column;
    }

    .top-button__item.top-button__item_parts {
        display: flex;
    }

    .top-button__item_search, .top-button__item_register, .top-button__item_parts {
        display: flex;
        flex-wrap: nowrap;
    }

    .contents{
        max-width: 900px;
        width: 75%;
    }

    .client-search__contents_form {
        margin-top: calc(50vh - 160px - 75px);
        height: 380px;
    }

    .contents h2{
        left: 0;
    }

    img{
        width: 140px;
        height: 120px;
    }

    .login-border-image img{
        width: auto;
        height: auto;
    }

    .login-info__frame {
       max-width: 600px;
       width: 96%;
    }

    .customer-memo.customer-box{
        padding: 5%;
    }

    .customer-memo__button--save{
        width: 50%;
        max-width: 480px;
        margin: 0 auto;
    }

    .customer-car-detail__info-table{
        display: flex;
        align-items: center;
    }

    .customer-balance.customer-box{
        width: 100%;
        box-sizing: border-box;
        margin: 0 auto;
    }

    .customer-buttons{
        padding: 20px 0 80px
    }

    .customer-buttons__item:before{
        transform: rotate(90deg);
        top: 47%;
        left: -8;
    }
    .customer-buttons__item:after{
        top: 50%;
        left: 30%;
    }

    .customer-buttons__item{
        width: 180px;
        height: 80px;
        position: relative;
    }

    .customer-buttons__item span{
        position: absolute;
        top: 37%;
        font-size: 18px;
    }

    .customer-car-detail.flex {
        align-items: center;
    }

    .customer-detail .customer-car-detail__top {
        width: 50%;
        margin-right: 15px;
    }

    .customer-detail .customer-car-detail__bottom {
        width: 50%;
    }

    .table-customer-car-detail table {
        width: 100%;
    }


    .customer-car-detail__top-plate,
    .customer-car-detail__top-image{
        width: 170px;
        padding: 1%;
    }

    .customer-car-detail__top-image {
        width: 140px;
    }

    .customer-box.customer-box__owner_list{
        margin: 50px 0;
    }

    .customer-car-detail__top{
        justify-content: left;
    }


    .customer-car-detail.customer-box{
        display: flex;
    }

    .customer-car-detail__bottom:after{
        content: "";
        clear: both;
        display: block;
    }

    .customer-car-detail__top-plate.privatePlate.light {
        padding:  10px 0;
    }

    .customer-car-detail__top-plate.privatePlate.tiny {
        padding: 10px 0;
    }

    .search-conditions {
        cursor: pointer;
    }


    .customer-links__buttom.links__button:after{
        content: "";
        clear: left;
        display: block;
    }

    .customer-box.search-next__button_outer {
        cursor: pointer;
        width: 70%;
        max-width: 480px;
        margin: 60px auto;
        box-shadow: 0px 5px 10px #1f44734d;
        border: 1px solid #294282;
        padding: 15px;
        color: #294282;
    }

    .customer-links__buttom.links__button{
        width: calc( ( 100% - 40px ) / 3 );
        font-size: 15px;
        float: left;
        margin: 0 10px;
    }

    a.customer-links__buttom.links__button:last-child {
        margin: 0 0 0 10px;
    }

    a.customer-links__buttom.links__button:first-child {
        margin: 0 10px 0 0;
    }

    a.customer-links__buttom.links__button:first-child:last-child {
        margin: 0 auto;
        width: 480px;
        max-width: 480px;
        float: none;
        text-align: center;
    }

    .customer-detail .customer-info.customer-box{
        height: auto;
    }

    .customer-info__name_link .customer-info__name {
        width: 85%;
        display: inline-block;
    }

    .customer-info__name_link .customer-info__message {
        display: inline-block;
        text-align: right;
    }

    .customer-info__name {
        width: 100%;
        font-size: 1.5rem;
    }

    .customer-links__buttom.links__button:after{
        content: "";
        clear: left;
        display: block;
    }

    .form-customer-search {
        padding: 25px 100px;
    }

    .form__submit button {
        width: 70%;
    }

    .links__button{
        padding: 15px;
    }

    .customer-links__buttom.g-map__link_btn{
        width: 80%;
        clear: left;
        margin: 0 auto;
    }

    .search-parts__button img{
        width: 18px;
        height: 15px;
    }

    #search-overlay{
        width: 100%;
        height: 100%;
        top: 0;
    }

    .search-alert{
        width: 50%;
    }

    .search-result .customer-car-detail__top-plate{
        width: 20%;
        width: 170px;
        padding: 10px 0;
        text-align: left;
    }

    table {
        width: 100%;
    }


    .customer .table-customer-car-detail th{
        width: 25%;
    }

    .top-button__item{
        width: 40%;
        margin: 0 25px 30px;
    }

    .customer-detail .customer-info .table-customer-car-detail__button{
        display: block;
        cursor: pointer;
    }

    .customer-car-detail__name {
        position: absolute;
        top: 50px;
        left: 15px;
    }

    .customer-car-detail__bottom .table-customer-car-detail__button {
        display: block;
    }

    .table-customer-info {
       border-radius: 5px
       padding: 10px;
    }

    .table-customer-info.table--hide{
        /*display: flex;*/
    }

    .customer-detail .customer-info.customer-box .table-customer-info{
        width: 100%;
        padding: 10px 34px;
    }

    .customer-detail .table-customer-car-detail th{
        width: 40%;
    }

    .customer-detail .table-customer-car-detail td{
        width: 50%;

    }

    .customer .customer-info__inner, .customer-detail .customer-info__inner {
        width: 100%;
        padding: 25px 0 0;
        box-sizing: border-box;
    }

    .customer-detail .customer-info.customer-box {
        display: flex;
        flex-direction: column;
    }

    .customer-detail .table-customer-info.table--hide {
        display: none;
    }

    .table--hide {
        display: none;
    }

    [data-table-state="show"] {
        display: block !important;
    }


    .table-search-conditions__button{

    }

    .item_register_messsage {
        display: none;
    }


    .nav__contact{
        width: 100%;
        max-height: 220px;
        color: var(--nav-text-color);
        background: var(--theme-color);
        border-top: 0.5px solid rgba(0,0,0,.05);
        box-shadow: inset 0 1px rgb(255 255 255 / 60%);
        font-size: 0.875rem;
        font-weight: bold;
        display: block;
        padding: 20px 10px;
        position: absolute;
        bottom: 0;
        text-align: center;
    }

    .nav__contact-title{
        font-size: 0.75rem;
        background: var(--nav-text-color);
        color: var(--theme-color);
        font-weight: normal;
        text-align: center;
        padding: 5px 15px;
        line-height: 1;
        width: auto;
        margin: 0 auto 0.75rem;
        box-sizing: border-box;
        border-radius: 10px;

    }

    .nav__contact-tel,
    .nav__contact-mail{
        padding: 0 0 0 10px;
    }

    .nav__contact-tel{
        margin: 0 0 1rem;
    }

    .nav__contact-mail {
        padding: 5px 10px;
        background: var(--parts-shop-main-button);
        border: 1px solid #294282;
        border-radius: 5px;
        color: var(--customer-name-text-color);
        position: relative;
    }

    .nav__contact-telnum{
        font-size: 1.35rem;
        margin: 0 0 0.25rem;
        position: relative;
    }

    .nav__contact-telnum:before{
        content: "";
        background: var(--nav-tel-image) no-repeat center center;
        background-size: 100%;
        display: block;
        width: 15px;
        height: 100%;
        position: absolute;
        left: -15px;
        top: 0;
    }

    .nav__contact-address{
        position: relative;
        font-size: 0.75rem;
    }


    .nav__contact-address:after{
        content: "";
        background: var(--nav-mail-image) no-repeat center center;
        background-size: 20px 15px;
        display: inline-block;
        height: 15px;
        margin: 0 2px;
        vertical-align: middle;
        width: 20px;
    }

    .nav__contact-open-close{
        font-size: 0.729rem;
        margin: 0 0 0.25rem;
    }

    .nav__contact-open-close .nav__contact-open-close-title {
        display: inline-block;
        font-size: 11px;
    }




    .nav__contact-item .open_day_of_the_week {
        font-size: 0.729rem;
    }

    footer {
        position: fixed;
        bottom: 0;
    }

    footer:after {
        content: "";
        width: calc(100% - 280px);
        height: 180px;
        background-image: url(/img/pc/bottom_bg_pc.png);
        background-size: 100%;
        position: absolute;
        bottom: 0;
        right: 0;
        left: auto;
        top: auto;
        background-position: center bottom;
        background-repeat: no-repeat;  
    }

    .footer-bar {
        margin: 0 auto;
        align-items: center;
        background: none;
        color: #FFFFFF;
        font-weight: bold;
        font-size: 20px;
        height: 60px;
        box-sizing: border-box;
        text-align: center;
        position: relative;
    }

    .footer-title {
        display: none;
    }

    .no-client-car__label {
        font-size: 1.0rem;
    }


    .no-client__label, .no-client-car__label {
        background-color: #999;
        color: #fff;
        font-size: 1.0rem;
        font-weight: normal;
        padding: 0px 20px 2px;
        border-radius: 20px;
        position: absolute;
        right: 40px;
        bottom: auto;
        top: 20px;
        text-shadow: 1px 1px 0.15px rgb(0 0 0 / 50%);
        display: none;
    }

    .no-client-car__label.no-client-car_detail__label {
        background-color: #999;
        color: #fff;
        font-size: 1.0rem;
        font-weight: normal;
        padding: 0px 20px 2px;
        border-radius: 20px;
        position: absolute;
        right: 20px;
        top: 10px;
        bottom: auto;
        text-shadow: 1px 1px 0.15px rgb(0 0 0 / 50%);
        display: none;
    }

    .no-client-car__label.no-client-car_history__label {
        right: 20px;
        bottom: auto;
        top: 20px;
    }


    .customer-detail-no__label {
        right: 20px;
        bottom: auto;
        top: 20px;
    }

    .customer-detail-no__label.no-client__label {
        right: 20px;
        bottom: auto;
        top: 20px;
    }

    .customer-car-detail.noClientCarLabelOuterClass {
        padding-top: 40px;
    }

}


@media screen and (max-height:660px) and (min-width: 481px) {

    .nav .nav__contact {
        background: rgba(255,255,255,0.5);
        border-radius: 10px 0 0 0;
        position:fixed;
        right:0;
        display:flex;
        align-items: center;
        justify-content:center;
        width: auto;
    }

    .nav:after {
        bottom: 30px;
    }

}

@media screen and (max-height:660px) and (min-width: 481px) and (max-width: 580px) {

    .nav .nav__contact {
        width: 40%;
    }

}



/* アニメーションフレーム */

@keyframes enhanceCurrentProgress{
    0% { margin-left  : 0px; }
    50% { margin-left : 1px; }
    100% { margin-left: 0px; }
}

@keyframes sonarEffect {
    0% {
        opacity: 1.0;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5);
        transform: scale(1.5);
        opacity: 0;
    }
}


@keyframes zoomin{
    0%{
        transform:scale(1);
        -webkit-transform: transform:scale(1);
    }
    50%{
        transform:scale(1.2);
        -webkit-transform: transform:scale(1.2);
    }
    100%{
        transform:scale(1);
        -webkit-transform: transform:scale(1);
    }
}