@CHARSET "UTF-8";


* {
    margin: 0;
    padding: 0;
    /*font-size:var(--default-font-size);*/
}
html > body{
    background-color: var(--white-col) !important;
    min-width:var(--default-width) !important;
}
div.center_div{
    margin: 0 auto;
    width: var(--default-width);
}
div.default_font_div{
    font-size:var(--default-font-size);
}
:root {
    --water-col: #e1f0f4;   /* 土曜に使用 */
    --blue-col: #1c77af;
    --snow-col: #f2f2f2;
    --ghost-col: #eaeeef;
    --silver-col: #e6e6e6;
    --dsilver-col: #cccccc;
    --gray-col: #999999;
    --dgray-col: #666666;
    --sakura-col: #ffe9e9;  /* 日曜に使用 */
    --pink-col: #f19eb8;
    --dred-col: #9b2424;
    --red-col: #da3737;
    --green-col: #008000 ;
    --white-col: #ffffff ;
    --yellow-col: #ecc629 ;
    --aliceblue-col:#f0f8ff;
    --midashiblue-col:#b2cdd8;

    --emerald-col: #0b6888;
    --celadon-col: #e4eff2;
    --header-shadow-col: #dad5ce;
    --shadow-col: #bfbfbf;
    --cream-col: #fff9c5;
}
:root {
  --default-width: 1050px;
  --default-font-size: 1.2rem;
}
/*基本要素*/
html > body input{
    background-color: var(--white-col) ;
}
html > body select{
    background-color: var(--white-col) ;
}
html > body textarea{
    background-color: var(--white-col);
}

a {
    text-decoration: none;
}
a:hover, a:active {
    text-decoration: underline;
}
a:hover, a:active, button:hover, .hover_obj:hover {
    opacity: 0.6;
    cursor: pointer;
}

/* header */
body#web header {
    background-color: var(--white-col);
    box-shadow: 0 5px 10px -4px var(--header-shadow-col);
    z-index: 99;
    position: relative;
    display: flex;
    justify-content: space-between;
}
body.keep {
    overflow: hidden;
}

body#web header a.header_title {
    display: flex;
    align-items: center;
}
body#web header a.header_title:hover,
body#web header a.header_title:active {
    text-decoration: none;
}
body#web header div.city {
    color: var(--blue-col);
    display: block;
    font-weight: bold;
    letter-spacing: 0.4rem;
    font-size: 1.65rem;
    padding-left: 1rem;
}
body#web header div.title {
    color: var(--blue-col);
    font-weight: bold;
    font-size: 1.65rem;
    padding-top: 0;
}
body#web header div.title > div {
    background-color: var(--yellow-col);
    border-radius: 2rem;
    display: inline;
    padding: 0.4rem;
    margin-right: 0.5rem;
}

header span {
    padding: 1rem 1rem 1rem 5rem;
    display: block;
    float: left;
    font-family: serif;
}
header button.header_link {
    float: right;
    padding: 0.5rem 2rem 0.5rem 1rem;
    margin: 0.5rem;
    border: 1px solid var(--blue-col);
    color: var(--blue-col);
    border-radius: 0.3rem;
    /*background-image: url(/seisanhanbai/src/tsuyama/css/img/header_link.png);*/
    background-size: 1rem;
    background-repeat: no-repeat;
    background-position: calc(100% - 0.5rem) center;
    background-color: unset;
}
header div.header_menu_link{
    cursor:pointer;
    margin-left:1rem;
    margin-right:1rem;
}
header div#menu_blank{
    position:absolute;
    top:0px;
    left:0px;
    width: 100vw;
    height: 100vw;
    background:white;
    opacity: 0;
    display:none;
}
header div.bou{
    height:1rem;
    border-left:2px solid var(--header-shadow-col);
}

header div.header_user {
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}
header div.header_user div.header_name {
    padding: 0 1.5rem 0 1.75rem;
    /*background-image: url(/seisanhanbai/src/tsuyama/css/img/header_name.png);*/
    background-size: 1.25rem;
    background-repeat: no-repeat;
    background-position-y: center;
}
header div.header_user #base_login_btn {
    display: none;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    background-color: var(--yellow-col);
    color: black;
    margin: 0 1rem 0 0;
    border-radius: 0.5rem;
    border: 2px solid var(--yellow-col);
}
header div.header_user #base_login_btn.logout_btn {
    background-color: var(--white-col);
}

header div.header_user button.menu {
    font-size: 0.8rem;
    color: var(--white-col);
    margin: 0;
    border-radius:0;
    background-color: var(--emerald-col);
    height: calc(40px + 1rem);
    width: 8rem;
    padding: 0;
}
button#menu_btn div.menu_txt {
    display: initial;
    margin-left: 2rem;
}
button#menu_btn div.menu_line {
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 1.75rem;
    height: 3px;
    border-radius: 2px;
    background-color: var(--white-col);
    width: 1rem;
}
button#menu_btn div.menu_line:nth-of-type(1) {
    top: 1.1rem;
}
button#menu_btn div.menu_line:nth-of-type(2) {
    top: 1.6rem;
}
button#menu_btn div.menu_line:nth-of-type(3) {
    top: 2.1rem;
}
button#menu_btn.menu_active div.menu_line:nth-of-type(1) {
    top: 1.25rem;
    left: 1rem;
    transform: translateY(6px) rotate(-45deg);
    width: 1.4rem;
}
button#menu_btn.menu_active div.menu_line:nth-of-type(2) {
    opacity: 0;
}
button#menu_btn.menu_active div.menu_line:nth-of-type(3) {
    top: 2rem;
    left: 1rem;
    transform: translateY(-6px) rotate(45deg);
    width: 1.4rem;
}
button#menu_btn div.menu_line::before {
    content: "";
    background-color: var(--white-col);
    width: 3px;
    height: 3px;
    display: block;
    margin-left: -0.4rem;
    border-radius: 2px;
}
button#menu_btn.menu_active div.menu_line::before {
    content: none;
}

#menu {
    position: fixed;
    z-index: 999;
    top: calc(40px + 1rem);;
    right: -120%;
    width: 100%;
    background: var(--celadon-col);
    transition: all 0.6s;
    filter: drop-shadow(0px 6px 3px #dad5ceb2); /* --header-shadow-colの半透明 */
}
#menu.active {
    right: 0;
}

ul.menu_top,
ul.menu_bottom {
    display: flex;
    justify-content: space-around;
    padding: 0;
}
ul.menu_bottom {
    justify-content: start;
}
ul.menu_top > li,
ul.menu_bottom > li {
    list-style-type: none;
}
ul.menu_top > li {
    width: 30%;
    background-color: var(--white-col);
    margin: 4rem 0 1rem;
    padding: 2rem 0;
    border-radius: 0.5rem;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: 1rem;
    cursor: pointer;
}
ul.menu_top > li.web16 {
    background-image: url(./images/menu_web16.png);
}
ul.menu_top > li.web17 {
    background-image: url(./images/menu_web17.png);
}
ul.menu_top > li.web14 {
    background-image: url(./images/menu_web14.png);
}
ul.menu_top > li > div {
    padding-left: 4.5rem;
    color: var(--emerald-col);
    font-weight: bold;
    position: relative;
    font-size: 1rem;
}
ul.menu_top > li > div::after {
    content: "";
    display: block;
    width: 0.75rem;
    height: 0.75rem;
    position: absolute;
    border-top: 2px solid var(--emerald-col);
    border-left: 2px solid var(--emerald-col);
    top: calc(50% - 0.4rem);
    transform: rotate(135deg);
    right: 1.5rem;
}
ul.menu_bottom > li {
    margin: 1rem 4rem 2rem 1.5rem;
    padding: 0 1rem 0 0;
    position: relative;
    cursor: pointer;
}
ul.menu_bottom > li::after {
    content: "";
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    position: absolute;
    border-top: 2px solid var(--emerald-col);
    border-left: 2px solid var(--emerald-col);
    top: calc(50% - 0.3rem);
    transform: rotate(135deg);
    right: 0;
}
ul.menu_bottom > li > div {
    color: var(--emerald-col);
}

header h1 {
    clear: both;
    background-color: var(--blue-col);
    color: var(--white-col);
    padding: 0 2rem;
    font-weight: bold;
    font-size: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 4rem;
}
header h1 button {
     background-color: var(--white-col);
     color: var(--blue-col);
     padding: 0.5rem 1rem;
}
header div.flow {
    background-color: var(--ghost-col);
    padding: 1rem 2rem;
    font-size: 0.9rem;
    font-weight: bold;
    line-height: 1rem;
}
header div.flow h2 {
    font-size: 0.9rem;
    color: var(--blue-col);
    display: flex;
}
header div.flow h2 ol {
    list-style-type:none;
    counter-reset:list;
    display: flex;
}
header div.flow h2 ol li {
    padding-right: 4rem;
}
header div.flow h2 ol li {
    color: var(--dgray-col);
}
header div.flow h2 ol li.sel {
    color: var(--blue-col);
}
header div.flow h2 ol li::before {
    counter-increment: list;
    content: "STEP"counter(list);
    background-color: var(--dgray-col);
    color: var(--white-col);
    padding: 0 0.5rem;
    margin-right: 1rem;
}
header div.flow h2 ol li.sel::before {
    background-color: var(--blue-col);
}
header div.flow h2 ol li:last-child::before {
    content: none;
}
header div.flow h2 ol li::after {
    content: '';
    position: absolute;
    display: block;
    width: 2rem;
    height: 2rem;
    border-top: solid 1px var(--gray-col);
    border-right: solid 1px var(--gray-col);
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    margin-top: -1.5rem;
}
header div.flow h2 ol li:last-child::after {
    content: none;
}


/*ヘッダーメニュー*/
header div.header_menu{
    /*
    width:40%;
    font-size:1.5rem;
    */
    width: 380px;
    font-size: 1.2rem;

}
header div.header_menu > table  td.batten{
    vertical-align:top;
}

div.header_menu_row {
    padding-left:1rem;
    padding-right:1rem;
}
div.header_menu_row:hover {
    background-color:var(--midashiblue-col);
}



/* main */
button {
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    border: none;
    background-color: var(--emerald-col);
    border: 2px solid var(--emerald-col);
    color: var(--white-col);
    margin: 1rem 2rem;
    display: block;
    cursor: pointer;
    font-size: 1.1rem;
    position: relative;
}
button.prev {
    padding: 0.75rem 2rem 0.75rem 3rem;
    background-color: var(--white-col);
    color: var(--emerald-col);
    border-radius: 2rem;
    border: 2px solid var(--emerald-col);
}
button.next {
    padding: 0.75rem 3rem 0.75rem 2rem;
    border-radius: 2rem;
    border: 2px solid var(--emerald-col);
}
button.search {
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    background-image: url(/seisanhanbai/src/tsuyama/css/img/search.png);
    background-size: 1rem;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: right 0.75rem;
}
button.prev::after,
button.next::after {
    content: "";
    display: block;
    width: 0.6rem;
    height: 0.6rem;
    position: absolute;
    border-top: 2px solid;
    border-left: 2px solid;
    top: calc(50% - 0.35rem);
}
button.prev::after {
    transform: rotate(-45deg);
    left: 1.5rem;
}
button.next::after {
    transform: rotate(135deg);
    right: 1.5rem;
}

input, select, textarea {
    height: 2.4rem;
    border-radius: 0.3rem;
    border: solid 1px var(--gray-col);
    background-color: var(--snow-col);
    padding: 0 0.5rem;
    font-size: 1.2rem;
    vertical-align: middle;
    margin: 0.5rem 0 0.5rem 0.5rem;
}
table {
    border-collapse: collapse;
}

@media screen and (max-width: 1024px) {
    header h1 {
        padding: 0.75rem 1rem;
    }
    header div.flow {
        padding: 0.75rem 1rem;
    }
    header div.flow h2 ol {
        display: block;
    }
    header div.flow h2 ol li::after {
        content: none;
    }
    header div.flow h2 ol li:last-child::before {
    content: "　　　 ";
    background-color: unset;
    }
    header div.flow h2 ol {
        margin: 0 auto;
    }
}/* max-width: 1024px */
@media screen and (max-width: 400px) {
    header button.header_link {
        font-size: 3.5vw;
    }
    header span {
        font-size: 4vw;
    }
    header h1 {
        font-size: 5vw;
    }
}/* max-width: 400px */





/********************
    テキスト幅
********************/
.text-size-0 {
    width: 0.4375rem;
}
.text-size-1 {
    width: 0.875rem;
}
.text-size-2 {
    width: 1.3125rem;
}
.text-size-3 {
    width: 1.75rem;
}
.text-size-4 {
    width: 2.1875rem;
}
.text-size-5 {
    width: 2.625rem;
}
.text-size-6 {
    width: 3.0625rem;
}
.text-size-7 {
    width: 3.5rem;
}
.text-size-8 {
    width: 3.9375rem;
}
.text-size-9 {
    width: 4.375rem;
}
.text-size-10 {
    width: 4.8125rem;
}
.text-size-11 {
    width: 5.25rem;
}
.text-size-12 {
    width: 5.6875rem;
}
.text-size-13 {
    width: 6.125rem;
}
.text-size-14 {
    width: 6.5625rem;
}
.text-size-15 {
    width: 7rem;
}
.text-size-16 {
    width: 7.4375rem;
}
.text-size-17 {
    width: 7.875rem;
}
.text-size-18 {
    width: 8.3125rem;
}
.text-size-19 {
    width: 8.75rem;
}
.text-size-20 {
    width: 9.1875rem;
}
.text-size-21 {
    width: 9.625rem;
}
.text-size-22 {
    width: 10.0625rem;
}
.text-size-23 {
    width: 10.5rem;
}
.text-size-24 {
    width: 10.9375rem;
}
.text-size-25 {
    width: 11.375rem;
}
.text-size-26 {
    width: 11.8125rem;
}
.text-size-27 {
    width: 12.25rem;
}
.text-size-28 {
    width: 12.6875rem;
}
.text-size-29 {
    width: 13.125rem;
}
.text-size-30 {
    width: 13.5625rem;
}
.text-size-31 {
    width: 14rem;
}
.text-size-32 {
    width: 14.4375rem;
}
.text-size-33 {
    width: 14.875rem;
}
.text-size-34 {
    width: 15.3125rem;
}
.text-size-35 {
    width: 15.75rem;
}
.text-size-36 {
    width: 16.1875rem;
}
.text-size-37 {
    width: 16.625rem;
}
.text-size-38 {
    width: 17.0625rem;
}
.text-size-39 {
    width: 17.5rem;
}
.text-size-40 {
    width: 17.9375rem;
}
.text-size-41 {
    width: 18.375rem;
}
.text-size-42 {
    width: 18.8125rem;
}
.text-size-43 {
    width: 19.25rem;
}
.text-size-44 {
    width: 19.6875rem;
}
.text-size-45 {
    width: 20.125rem;
}
.text-size-46 {
    width: 20.5625rem;
}
.text-size-47 {
    width: 21rem;
}
.text-size-48 {
    width: 21.4375rem;
}
.text-size-49 {
    width: 21.875rem;
}
.text-size-50 {
    width: 22.3125rem;
}
.text-size-51 {
    width: 22.75rem;
}
.text-size-52 {
    width: 23.1875rem;
}
.text-size-53 {
    width: 23.625rem;
}
.text-size-54 {
    width: 24.0625rem;
}
.text-size-55 {
    width: 24.5rem;
}
.text-size-56 {
    width: 24.9375rem;
}
.text-size-57 {
    width: 25.375rem;
}
.text-size-58 {
    width: 25.8125rem;
}
.text-size-59 {
    width: 26.25rem;
}
.text-size-60 {
    width: 26.6875rem;
}
.text-size-61 {
    width: 27.125rem;
}
.text-size-62 {
    width: 27.5625rem;
}
.text-size-63 {
    width: 28rem;
}
.text-size-64 {
    width: 28.4375rem;
}
.text-size-65 {
    width: 28.875rem;
}
.text-size-66 {
    width: 29.3125rem;
}
.text-size-67 {
    width: 29.75rem;
}
.text-size-68 {
    width: 30.1875rem;
}
.text-size-69 {
    width: 30.625rem;
}
.text-size-70 {
    width: 31.0625rem;
}
.text-size-71 {
    width: 31.5rem;
}
.text-size-72 {
    width: 31.9375rem;
}
.text-size-73 {
    width: 32.375rem;
}
.text-size-74 {
    width: 32.8125rem;
}
.text-size-75 {
    width: 33.25rem;
}
.text-size-76 {
    width: 33.6875rem;
}
.text-size-77 {
    width: 34.125rem;
}
.text-size-78 {
    width: 34.5625rem;
}
.text-size-79 {
    width: 35rem;
}
.text-size-80 {
    width: 35.4375rem;
}
.text-size-81 {
    width: 35.875rem;
}
.text-size-82 {
    width: 36.3125rem;
}
.text-size-83 {
    width: 36.75rem;
}
.text-size-84 {
    width: 37.1875rem;
}
.text-size-85 {
    width: 37.625rem;
}
.text-size-86 {
    width: 38.0625rem;
}
.text-size-87 {
    width: 38.5rem;
}
.text-size-88 {
    width: 38.9375rem;
}
.text-size-89 {
    width: 39.375rem;
}
.text-size-90 {
    width: 39.8125rem;
}
.text-size-91 {
    width: 40.25rem;
}
.text-size-92 {
    width: 40.6875rem;
}
.text-size-93 {
    width: 41.125rem;
}
.text-size-94 {
    width: 41.5625rem;
}
.text-size-95 {
    width: 42rem;
}
.text-size-96 {
    width: 42.4375rem;
}

/********************
    テキスト高さ
********************/
.text-row-size-1 {
    height: 1.3rem;
}
.text-row-size-2 {
    height: 2.375rem;
}
.text-row-size-3 {
    height: 3.35rem;
}
.text-row-size-4 {
    height: 4.325rem;
}
.text-row-size-5 {
    height: 5.3rem;
}
.text-row-size-6 {
    height: 6.275rem;
}
.text-row-size-7 {
    height: 7.25rem;
}
.text-row-size-8 {
    height: 8.225rem;
}
.text-row-size-9 {
    height: 9.2rem;
}
.text-row-size-10 {
    height: 10.175rem;
}

/********************
    高さ指定
********************/
.h-02rem {
    height: 0.2rem;
}
.h-05rem {
    height: 0.5rem;
}
.h-1rem {
    height: 1rem;
}
.h-2rem {
    height: 2rem;
}
.h-3rem {
    height: 3rem;
}
.h-4rem {
    height: 4rem;
}
.h-5rem {
    height: 5rem;
}
.h-6rem {
    height: 6rem;
}
.h-7rem {
    height: 7rem;
}
.h-8rem {
    height: 8rem;
}
.h-9rem {
    height: 9rem;
}
.h-10rem {
    height: 10rem;
}

/********************
    入力種類
********************/
/* 数値入力 */
.inputtype-numeric {
    text-align: right;
}
/* ファイル選択 */
.inputtype-fileselect {
  display: none;
}

/********************
    ファイル選択
********************/
.fileselect-group > button[type="button"] {
  flex: none;
}
.fileselect-group > input[type="text"] {
  background-color: #00000000;
  border-color: #00000000;
  padding-left: 4px;
}
.fileselect-group > input[type="text"]::placeholder {
  color: #000000;
}
.fileselect-group > input[type="text"]:disabled::placeholder {
  color: #000000;
}


/********************
    フレックス関連
********************/
.flex {
    display: flex;
}
.flex-end {
    display: flex;
    justify-content: flex-end;
}
.flex-center {
    display: flex;
    justify-content: center;
}
.flex-size-auto {
    display: flex;
    flex: auto;
}
.flex-size-05 {
    display: flex;
    flex-basis: 0.5rem;
}
.flex-size-half {
    display: flex;
    flex-basis: 0.5rem;
}
.flex-size-1 {
    display: flex;
    flex-basis: 1rem;
}
.flex-size-2 {
    display: flex;
    flex-basis: 2rem;
}
.flex-size-3 {
    display: flex;
    flex-basis: 3rem;
}
.flex-size-4 {
    display: flex;
    flex-basis: 4rem;
}
.flex-size-5 {
    display: flex;
    flex-basis: 5rem;
}
.flex-size-6 {
    display: flex;
    flex-basis: 6rem;
}
.flex-size-7 {
    display: flex;
    flex-basis: 7rem;
}
.flex-size-8 {
    display: flex;
    flex-basis: 8rem;
}
.flex-size-9 {
    display: flex;
    flex-basis: 9rem;
}
.flex-size-10 {
    display: flex;
    flex-basis: 10rem;
}
.flex-size-11 {
    display: flex;
    flex-basis: 11rem;
}
.flex-size-12 {
    display: flex;
    flex-basis: 12rem;
}
.flex-size-13 {
    display: flex;
    flex-basis: 13rem;
}
.flex-size-14 {
    display: flex;
    flex-basis: 14rem;
}
.flex-size-15 {
    display: flex;
    flex-basis: 15rem;
}
.flex-size-16 {
    display: flex;
    flex-basis: 16rem;
}
.flex-size-17 {
    display: flex;
    flex-basis: 17rem;
}
.flex-size-18 {
    display: flex;
    flex-basis: 18rem;
}
.flex-size-19 {
    display: flex;
    flex-basis: 19rem;
}
.flex-size-20 {
    display: flex;
    flex-basis: 20rem;
}
.flex-size-21 {
    display: flex;
    flex-basis: 21rem;
}
.flex-size-22 {
    display: flex;
    flex-basis: 22rem;
}
.flex-size-23 {
    display: flex;
    flex-basis: 23rem;
}
.flex-size-24 {
    display: flex;
    flex-basis: 24rem;
}
.flex-size-25 {
    display: flex;
    flex-basis: 25rem;
}
.flex-size-26 {
    display: flex;
    flex-basis: 26rem;
}
.flex-size-27 {
    display: flex;
    flex-basis: 27rem;
}
.flex-size-28 {
    display: flex;
    flex-basis: 28rem;
}
.flex-size-29 {
    display: flex;
    flex-basis: 29rem;
}
.flex-size-30 {
    display: flex;
    flex-basis: 30rem;
}
.flex-size-31 {
    display: flex;
    flex-basis: 31rem;
}
.flex-size-32 {
    display: flex;
    flex-basis: 32rem;
}
.flex-size-33 {
    display: flex;
    flex-basis: 33rem;
}
.flex-size-34 {
    display: flex;
    flex-basis: 34rem;
}
.flex-size-35 {
    display: flex;
    flex-basis: 35rem;
}
.flex-size-36 {
    display: flex;
    flex-basis: 36rem;
}
.flex-size-37 {
    display: flex;
    flex-basis: 37rem;
}
.flex-size-38 {
    display: flex;
    flex-basis: 38rem;
}
.flex-size-39 {
    display: flex;
    flex-basis: 39rem;
}
.flex-size-40 {
    display: flex;
    flex-basis: 40rem;
}
.flex-size-41 {
    display: flex;
    flex-basis: 41rem;
}
.flex-size-42 {
    display: flex;
    flex-basis: 42rem;
}
.flex-size-43 {
    display: flex;
    flex-basis: 43rem;
}
.flex-size-44 {
    display: flex;
    flex-basis: 44rem;
}
.flex-size-45 {
    display: flex;
    flex-basis: 45rem;
}
.flex-size-46 {
    display: flex;
    flex-basis: 46rem;
}
.flex-size-47 {
    display: flex;
    flex-basis: 47rem;
}
.flex-size-48 {
    display: flex;
    flex-basis: 48rem;
}
.flex-size-49 {
    display: flex;
    flex-basis: 49rem;
}
.flex-size-50 {
    display: flex;
    flex-basis: 50rem;
}
.flex-size-51 {
    display: flex;
    flex-basis: 51rem;
}
.flex-size-52 {
    display: flex;
    flex-basis: 52rem;
}
.flex-size-53 {
    display: flex;
    flex-basis: 53rem;
}
.flex-size-54 {
    display: flex;
    flex-basis: 54rem;
}
.flex-size-55 {
    display: flex;
    flex-basis: 55rem;
}
.flex-size-56 {
    display: flex;
    flex-basis: 56rem;
}
.flex-size-57 {
    display: flex;
    flex-basis: 57rem;
}
.flex-size-58 {
    display: flex;
    flex-basis: 58rem;
}
.flex-size-59 {
    display: flex;
    flex-basis: 59rem;
}
.flex-size-60 {
    display: flex;
    flex-basis: 60rem;
}
.flex-size-61 {
    display: flex;
    flex-basis: 61rem;
}
.flex-size-62 {
    display: flex;
    flex-basis: 62rem;
}
.flex-size-63 {
    display: flex;
    flex-basis: 63rem;
}
.flex-size-64 {
    display: flex;
    flex-basis: 64rem;
}
.flex-size-65 {
    display: flex;
    flex-basis: 65rem;
}
.flex-size-66 {
    display: flex;
    flex-basis: 66rem;
}
.flex-size-67 {
    display: flex;
    flex-basis: 67rem;
}
.flex-size-68 {
    display: flex;
    flex-basis: 68rem;
}
.flex-size-69 {
    display: flex;
    flex-basis: 69rem;
}
.flex-size-70 {
    display: flex;
    flex-basis: 70rem;
}
.flex-size-71 {
    display: flex;
    flex-basis: 71rem;
}
.flex-size-72 {
    display: flex;
    flex-basis: 72rem;
}
.flex-size-73 {
    display: flex;
    flex-basis: 73rem;
}
.flex-size-74 {
    display: flex;
    flex-basis: 74rem;
}
.flex-size-75 {
    display: flex;
    flex-basis: 75rem;
}
.flex-size-76 {
    display: flex;
    flex-basis: 76rem;
}
.flex-size-77 {
    display: flex;
    flex-basis: 77rem;
}
.flex-size-78 {
    display: flex;
    flex-basis: 78rem;
}
.flex-size-79 {
    display: flex;
    flex-basis: 79rem;
}
.flex-size-80 {
    display: flex;
    flex-basis: 80rem;
}
.flex-size-81 {
    display: flex;
    flex-basis: 81rem;
}
.flex-size-82 {
    display: flex;
    flex-basis: 82rem;
}
.flex-size-83 {
    display: flex;
    flex-basis: 83rem;
}
.flex-size-84 {
    display: flex;
    flex-basis: 84rem;
}
.flex-size-85 {
    display: flex;
    flex-basis: 85rem;
}
.flex-size-86 {
    display: flex;
    flex-basis: 86rem;
}
.flex-size-87 {
    display: flex;
    flex-basis: 87rem;
}
.flex-size-88 {
    display: flex;
    flex-basis: 88rem;
}
.flex-size-89 {
    display: flex;
    flex-basis: 89rem;
}
.flex-size-90 {
    display: flex;
    flex-basis: 90rem;
}
.flex-size-91 {
    display: flex;
    flex-basis: 91rem;
}
.flex-size-92 {
    display: flex;
    flex-basis: 92rem;
}
.flex-size-93 {
    display: flex;
    flex-basis: 93rem;
}
.flex-size-94 {
    display: flex;
    flex-basis: 94rem;
}
.flex-size-95 {
    display: flex;
    flex-basis: 95rem;
}
.flex-size-96 {
    display: flex;
    flex-basis: 96rem;
}


span.red{
    color:var(--red-col);
}

.input_error{
    border:2px solid var(--red-col);
}

button.small_btn{
    margin: 0;
    font-size: 1em;
    padding: 3px 15px;
}

div.header_menu{
    display:none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2147483647;
    border: 2px solid var(--dgray-col);
    height: 100%;
    background-color: var(--white-col);
    opacity: 1;
}
div.header_menu_left{
    display:none;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2147483646;
    border: none;
    height: 100%;
    width:100%;
    background-color: var(--dgray-col);
    opacity: 0.5;
    cursor:pointer;
}
tr.menu_list > td{
    padding-bottom:2rem;
}

div.loading{
    height:100%;
    width:100%;
    position: absolute;
    top:0px;
    left:0;
    background-color:var(--gray-col);
    opacity: 0.5;
    z-index: 2147483647;
}
div.loading > div{
    text-align:center;
    position: absolute;
    top: 45%;
    width:100%;
    color:var(--white-col);
    font-size:3rem;
}

div.div_circle{
    background-color:black;
    height:50px;
    width:50px;
    border-radius:50%;
    line-height:50px;
    text-align:center;
    position: absolute;
    top: -25px;
    left: -25px;
    color:white;
    font-size:1.4rem;
    font-weight:bold;
}

div.bg_celadon {
    background-color: var(--celadon-col);
}

div.panel_row div.div_box_title,
div.div_box_title.div_search_box_title {
    text-align: center;
    font-size: 2rem;
    color: var(--emerald-col);
    margin: 3rem 0 2rem;
}
div.panel_row div.div_box_title::before,
div.div_box_title.div_search_box_title::before {
    display: inline-flex;
    vertical-align: middle;
    transform: scale(0.9);
}
div.panel_row div.div_box_title::before {
    content: url(./images/hd_flow01.png);
}
div.div_box_title.div_search_box_title::before {
    content: url(./images/hd_search01.png);
}
div.panel_row div.div_pane_box {
    justify-content: center;
    height: 20rem;
}
div.div_panel {
    border-radius:0.5rem;
    /*border:3px solid var(--gray-col);*/
    border:3px solid var(--yellow-col);
    position: relative;
    font-weight: bold;
    font-size:1.2rem;
    width:10rem;
    margin-right:20px;
    text-align: center;
    align-content: center;
    background-color: var(--white-col);

}
div.div_panel2{
    border-radius:0.5rem;
    position: relative;
    font-weight: bold;
    font-size:1.2rem;
    text-align: center;
    align-content: center;
    display: grid;
}
div.div_panel2 > div {
    display:inline-block;
    font-size: 1rem;
}


div.div_panel_first{
    display: flex;
    width: 11%;
}
div.div_panel_title{
    border-radius: 0 0 0.5rem 0.5rem;
    border:3px solid var(--yellow-col);
    border-top:none;
    display:inline-block;
    font-weight: bold;
    width:7rem;
    text-align: center;
    background-color: var(--yellow-col);
    align-content: center;
    box-sizing:border-box;
}
div.div_panel2 > div.div_panel_title2{
    border-radius: 0.1rem ;
    border:3px solid var(--gray-col);
    border-top:none;
    display:inline-block;
    font-weight: bold;
    width:7rem;
    text-align: center;
    background-color: var(--gray-col);
    align-content: center;
    box-sizing:border-box;
    color:var(--white-col);
}
/*div.div_panel.selected{
    border:3px solid var(--blue-col);
    color:var(--gray-col);
}
div.div_panel.selected > div.div_panel_title{
    border:3px solid var(--blue-col);
    background-color: var(--blue-col);
    color:var(--white-col);
}
div.div_panel2.selected > div {
    color:var(--blue-col);
}
div.div_panel2.selected > div.div_panel_title2{
    border:3px solid var(--blue-col);
    background-color: var(--blue-col);
    color:var(--white-col);
}*/
div.div_panel2 > div.div_panel_title2 {
    border-radius: 2rem;
    border: none;
    background-color: var(--emerald-col);
    width: 14rem;
    padding: 0.5rem 0;
}
div.div_panel2 > div.div_panel_body2 {
    padding-top: 17rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-position-y: 1.5rem;
}
div#panel_step1 > div.div_panel_body2 {
    background-image: url(./images/img_flow01.png);
}
div#panel_step2 > div.div_panel_body2 {
    background-image: url(./images/img_flow02.png);
}
div#panel_step3 > div.div_panel_body2 {
    background-image: url(./images/img_flow03.png);
}
div.div_panel_body{
    margin-top:1rem;
    margin-bottom:1rem;
}

div.div_move_cursor{
    margin: 0 4rem;
    font-size: 5rem;
    color:var(--gray-col);
    text-align: center;
    transform: scale(1, 1.5);
}



div.div_category_panel{
    border-radius:0.5rem;
    border:3px solid var(--blue-col);
    padding:2rem;
    text-align:center;
    width:14em;
    height:100%;
    background-color: var(--white-col);
    font-weight:bold;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: 2rem;
    cursor: pointer;
}

div.div_category_panel.icn_pane01 {

}
div.div_category_panel.icn_pane02 {
    background-image: url(./images/pane_icn/icn_search26-kouho.png);
}
div.div_category_panel.icn_pane03 {
    background-image: url(./images/pane_icn/icn_search8-gomi.png);
}
div.div_category_panel.icn_pane04 {
    background-image: url(./images/pane_icn/icn_search27-bochi.png);
}
div.div_category_panel.icn_pane05 {
    background-image: url(./images/pane_icn/icn_search24-pet.png);
}
div.div_category_panel.icn_pane06 {
    background-image: url(./images/pane_icn/icn_search13-bousai.png);
}
div.div_category_panel.icn_pane07 {
}
div.div_category_panel.icn_pane08 {
    background-image: url(./images/pane_icn/icn_search28-ringyo.png);
}
div.div_category_panel.icn_pane09 {
    background-image: url(./images/pane_icn/icn_search30-seisyounen.png);
}
div.div_category_panel.icn_pane10 {
    background-image: url(./images/pane_icn/icn_search31-syougai-gakusyu.png);
}
div.div_category_panel.icn_pane11 {
    background-image: url(./images/pane_icn/icn_search32-bunkazai.png);
}
div.div_category_panel.icn_pane12 {
    background-image: url(./images/pane_icn/icn_search06-sumai.png);
}
div.div_category_panel.icn_pane13 {
    background-image: url(./images/pane_icn/icn_search02-ijuu.png);
}
div.div_category_panel.icn_pane14 {
    background-image: url(./images/pane_icn/icn_search33-kutyoukai.png);
}
div.div_category_panel.icn_pane15 {
}
div.div_category_panel.icn_pane16 {
    background-image: url(./images/pane_icn/icn_search04-zeikin.png);
}

div.div_category_panel.icn_pane010 {
    background-image: url(./images/pane_icn/icn_search01-koseki.png);
}
div.div_category_panel.icn_pane020 {
    background-image: url(./images/pane_icn/icn_search06-sumai.png);
}
div.div_category_panel.icn_pane030 {
    background-image: url(./images/pane_icn/icn_search02-ijuu.png);
}
div.div_category_panel.icn_pane040 {
    background-image: url(./images/pane_icn/icn_search03-hikkoshi.png);
}
div.div_category_panel.icn_pane050 {
    background-image: url(./images/pane_icn/icn_search18-kekkon.png);
}
div.div_category_panel.icn_pane060 {
    background-image: url(./images/pane_icn/icn_search15-kyouiku.png);
}
div.div_category_panel.icn_pane070 {
    background-image: url(./images/pane_icn/icn_search16-syokuiku.png);
}
div.div_category_panel.icn_pane080 {
    background-image: url(./images/pane_icn/icn_search17-gakkou.png);
}
div.div_category_panel.icn_pane090 {
    background-image: url(./images/pane_icn/icn_search23-sport.png);
}
div.div_category_panel.icn_pane100 {
    background-image: url(./images/pane_icn/icn_search04-zeikin.png);
}
div.div_category_panel.icn_pane110 {
    background-image: url(./images/pane_icn/icn_search8-gomi.png);
}
div.div_category_panel.icn_pane120 {
    background-image: url(./images/pane_icn/icn_search26-kouho.png);
}
div.div_category_panel.icn_pane130 {
    background-image: url(./images/pane_icn/icn_search07-kankyo.png);
}
div.div_category_panel.icn_pane140 {
    background-image: url(./images/pane_icn/icn_search13-bousai.png);
}
div.div_category_panel.icn_pane150 {
    background-image: url(./images/pane_icn/icn_search14-koutsu.png);
}
div.div_category_panel.icn_pane160 {
    background-image: url(./images/pane_icn/icn_search09-hoken.png);
}
div.div_category_panel.icn_pane170 {
    background-image: url(./images/pane_icn/icn_search10-fukushi.png);
}
div.div_category_panel.icn_pane180 {
    background-image: url(./images/pane_icn/icn_search11-iryou.png);
}
div.div_category_panel.icn_pane190 {
    background-image: url(./images/pane_icn/icn_search12-suidou.png);
}
div.div_category_panel.icn_pane200 {
    background-image: url(./images/pane_icn/icn_search24-pet.png);
}
div.div_category_panel.icn_pane210 {
    background-image: url(./images/pane_icn/icn_search19-rikon.png);
}
div.div_category_panel.icn_pane220 {
    background-image: url(./images/pane_icn/icn_search20-okuyami.png);
}
div.div_category_panel.icn_pane230 {
    background-image: url(./images/pane_icn/icn_search27-bochi.png);
}
div.div_category_panel.icn_pane240 {
    background-image: url(./images/pane_icn/icn_search05-mynumber.png);
}
div.div_category_panel.icn_pane250 {
    background-image: url(./images/pane_icn/icn_search34-passport.png);
}
div.div_category_panel.icn_pane260 {
    background-image: url(./images/pane_icn/icn_search35-hojokin.png);
}
div.div_category_panel.icn_pane270 {
    background-image: url(./images/pane_icn/icn_search36-kyuufukin.png);
}
div.div_category_panel.icn_pane280 {
    background-image: url(./images/pane_icn/icn_search28-ringyo.png);
}
div.div_category_panel.icn_pane290 {
    background-image: url(./images/pane_icn/icn_search29-gyogyo.png);
}
div.div_category_panel.icn_pane300 {
    background-image: url(./images/pane_icn/icn_search25-soudan.png);
}
div.div_category_panel.icn_pane310 {
    background-image: url(./images/pane_icn/icn_search21-machidukuri.png);
}
div.div_category_panel.icn_pane320 {
    background-image: url(./images/pane_icn/icn_search33-kutyoukai.png);
}
div.div_category_panel.icn_pane330 {
    background-image: url(./images/pane_icn/icn_search30-seisyounen.png);
}
div.div_category_panel.icn_pane340 {
    background-image: url(./images/pane_icn/icn_search31-syougai-gakusyu.png);
}
div.div_category_panel.icn_pane350 {
    background-image: url(./images/pane_icn/icn_search32-bunkazai.png);
}
div.div_category_panel.icn_pane360 {
    background-image: url(./images/pane_icn/icn_search22-rekishi.png);
}

header div.flow {
    background-color: var(--ghost-col);
    padding: 1rem 2rem;
    font-size: 0.9rem;
    font-weight: bold;
    line-height: 1rem;
}
header div.flow h2 {
    font-size: 0.9rem;
    color: var(--blue-col);
    display: flex;
}
header div.flow h2 ol {
    list-style-type:none;
    counter-reset:list;
    display: flex;
}
header div.flow h2 ol li {
    padding-right: 4rem;
}
header div.flow h2 ol li {
    color: var(--dgray-col);
}
header div.flow h2 ol li.sel {
    color: var(--blue-col);
}
header div.flow h2 ol li::before {
    counter-increment: list;
    content: "STEP"counter(list);
    background-color: var(--dgray-col);
    color: var(--white-col);
    padding: 0 0.5rem;
    margin-right: 1rem;
}
header div.flow h2 ol li.sel::before {
    background-color: var(--blue-col);
}
header div.flow h2 ol li:last-child::before {
    content: none;
}
header div.flow h2 ol li::after {
    content: '';
    position: absolute;
    display: block;
    width: 2rem;
    height: 2rem;
    border-top: solid 1px var(--gray-col);
    border-right: solid 1px var(--gray-col);
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    margin-top: -1.5rem;
}
header div.flow h2 ol li:last-child::after {
    content: none;
}

div.page_title {
    background-color: var(--celadon-col);
    box-shadow: 0 5px 10px -4px var(--header-shadow-col);
    position: relative;
}
div.page_title div.center_div {
    color: var(--emerald-col);
    font-size: 2rem;
    font-weight: bold;
    padding: 2rem 0;
    display: flex;
    justify-content: start;
    align-items: center;
}
div.page_title div.center_div span.page_title_step {
    background-color: var(--emerald-col);
    color: var(--white-col);
    border-radius: 2rem;
    padding: 0.25rem 2rem;
    font-size: 1.25rem;
    margin-right: 1rem;
}
div.breadcrumb {
    background-color: var(--cream-col);
    padding: 0.3rem 0;
}
div.breadcrumb a {
  color: var(--emerald-col) !important;
}
div.sub_title {
    margin: 3rem 0 2rem;
}
div.sub_title div.center_div {
    background-color: var(--emerald-col);
    color: var(--white-col);
    font-size: 1.5rem;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem 0.5rem 1.5rem;
    position: relative;
}
div.sub_title div.center_div::before {
    content: '';
    width: 5px;
    height: 2.25rem;
    background-color: var(--white-col);
    position: absolute;
    margin-left: -1rem;
    border-radius: 3px;
}
div.login_pc,
div.login_sp {
  margin: 3rem auto 2rem;
}
div.login_pc div.center_div,
div.login_sp div.center_div {
    background-color: var(--yellow-col);
    padding: 1rem 0 1rem 5rem;
    border-radius: 0.5rem;
    color: var(--emerald-col);
    font-size: 1.2rem;
    font-weight: bold;
    background-repeat: no-repeat;
    background-size: 3rem;
    background-position-y: center;
    background-position-x: 1rem;
}
div.login_pc div.center_div {
    background-image: url(./images/login_pc.png);
}
div.login_sp div.center_div {
    background-image: url(./images/login_sp.png);
}

div.qrcode div.main_title {
    color: var(--emerald-col);
    font-size: 1.5rem;
    text-align: center;
    margin: 1.5rem;
    font-weight: bold;
}
div.qrcode div.main_text {
    text-align: center;
}
div.qrcode div.api_dl {
    display: table;
    border-collapse: separate;
    border-spacing: 1.5rem;
}
div.qrcode div.apple_box,
div.qrcode div.line_box,
div.qrcode div.google_box {
    display: table-cell;
}
div.qrcode div.line_box {
    width: 1px;
    background-color: var(--emerald-col);
}
div.qrcode div.api_head {
    background-color: var(--yellow-col);
    color: var(--emerald-col);
    text-align: center;
    padding: 0.25rem 0;
    font-weight: bold;
}
div.qrcode div.dl_link {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 1rem;
}
div.qrcode div.spec {
    background-color: var(--ghost-col);
    padding: 1rem;
}
div.qrcode div.spec div.spec_title {
    color: var(--emerald-col);
    font-weight: bold;
    margin-bottom: 0.5rem;
}
div.qrcode div.spec div.spec_text a {
    color: var(--emerald-col);
    text-decoration: underline;
}
div.qrcode div.spec div.spec_text a::after {
    content: url(./images/target_blank.png);
}
div.qrcode div.spec div.spec_text ul {
    padding-left: 0;
    margin: 0.5rem 0 0 1.5rem;
}
div.qrcode div.spec div.spec_text li {
    list-style: none;
}
div.qrcode div.spec div.spec_text li::before {
    content: url(./images/sp_spec_li.png);
    width: 1rem;
    display: inline-block;
    vertical-align: 0.1rem;
    margin-left: -1em;
}
div.qrcode div.spec div.spec_text ul:last-child li::before {
    content: '※';
    width: 1rem;
    vertical-align: top;
}

div.sub_head {
    display: inline-block;
    position: relative;
    width: 100%;
    border-radius: 0.5rem;
    background-color: var(--celadon-col);
    padding: 1rem;
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 1rem;
}
div.sub_head::before {
    content: "";
    border: 10px solid transparent;
    border-top: 10px solid var(--celadon-col);
    margin-left: -10px;
    top: 100%;
    left: 50%;
    position: absolute;
}

button.save,
button.conf,
button.apply,
button.upd,
button.cancel {
    border-radius: 2rem;
    padding: 0.75rem 2rem 0.75rem 3.5rem;
    background-size: 1rem;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: 1.25rem;
}
button.save {
    background-image: url(./images/icon_save.png);
}
button.save.wsave {
    background-image: url(./images/icon_save_w.png);
}
button.conf {
    background-image: url(./images/icon_conf.png);
}
button.apply {
    background-image: url(./images/icon_apply.png);
}
button.upd {
    background-image: url(./images/icon_upd.png);
}
button.cancel {
    position: relative;
    background-color: var(--white-col);
    color: var(--emerald-col);
    border: 2px solid var(--emerald-col);
}
button.cancel::before,
button.cancel::after {
    content: "";
    width: 0.1rem;
    height: 1.25rem;
    position: absolute;
    background-color: var(--emerald-col);
    top: calc(50% - 0.65rem);
    transform: rotate(-45deg);
    left: 2rem;
}
button.cancel::after {
    transform: rotate(45deg);
}

span.new_flg,
span.highlight_flg,
span.required_flg {
    color: var(--white-col);
    border-radius: 0.25rem;
    padding: 0.1rem 0.5rem;
    margin-left: 1rem;
    font-size: 1rem;
    display: inline-block;
}
span.new_flg {
    background-color: var(--blue-col);
}
span.highlight_flg {
    background-color: var(--red-col);
}
span.required_flg {
    background-color: var(--red-col);
}
div.footer {
    display: flex;
    justify-content: space-between;
    margin: 1rem 0;
}
div.footer div.footer_link a {
    border-right: 1px solid var(--emerald-col);
    padding: 0 1.5rem;
    color: black;
    font-size: 0.7rem;
    display: inline-block;
    line-height: 1.25rem;
}
div.footer div.footer_link a:first-child {
    padding-left: 0;
}
div.footer div.footer_link a:last-child {
    border: none;
}
div.footer div.footer_copy {
    padding-right: calc(1rem + 120px);
    background-image: url(./images/bnr-sumaho-de-sumaso01.png);
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: center;
}