@charset "UTF-8";
--font-normal/*@import url("custom_property.css");*/
/*---------------------------------

---------------------------------*/
/*----- 印刷時設定　----- */
@page {
    margin: 0 10mm;
    height: 100%;
}
@media print {
    #originalHeader, #navi, #scrollHeader, #sideNavi, #footer, .twoButton, .oneButton, #topic-path {
        display: none !important
    }
}


/*----- HTMLの基本設定　----- */
html, :root {
    box-sizing: border-box;
    font-size: 62.5%;
    line-height: 1.75;
    letter-spacing: 0.06em;
    font-family: var(--font-normal), sans-serif;
    height: 100%
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    text-align: left;
    line-height: 1.75;
    font-size: 1.6rem;
    position: relative;
    font-family: var(--font-normal), sans-serif;
    color: var(--color-text);
    height: 100%
}

#aspnetForm {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

:focus {
    outline: none;
}
em {
    font-style: normal;
}
/*----- リンク　----- */
a, a:visited{
    color: var(--color-text);
    text-decoration: none;
    font-style: normal !important;
}

    a i:hover, a:hover {
        color: var(--color-main);
        text-decoration: none;
    }

    a img:hover {
        opacity: 0.7
    }
    a[onclick="history.back()"]:hover {
       cursor:pointer
    }
    /*----- アイコン　----- */
    i:hover {
        font-style: normal !important;
    }

/*----- 黄ボタン対応 ----- */

.yellowHover, .yellowHover:visited {
    color: var(--color-text);
    text-decoration: none;
    font-style: normal !important;
}

    .yellowHover i:hover, .yellowHover:hover {
        color: var(--color-houkaisei)!important;
        text-decoration: none;
    }

    .yellowHover img:hover {
        opacity: 0.7
    }

    .yellowHover[onclick="history.back()"]:hover {
        cursor: pointer
    }

/*----- アイコン　----- */
i:hover {
    font-style: normal !important;
}

/*----- 見出し ----- */
h1, h2, h3, h4, h5 {
    font-family: var(--font-normal);
    font-weight: 400;
}

h1 {
    font-size: 2.8rem;
    margin: 0 0 15px 0;
    color: var(--color-text);
    text-align: center
}

    h1 span {
        display: block;
        font-size: 2.2rem;
    }

h2 {
    font-size: 2.2rem;
    margin: 0 0 30px 0;
    color: var(--color-text);
    text-align: center;
    padding: 0 0 20px 0;
    background-image: linear-gradient(90deg, rgb(0 0 0 / 0.0) 0% 40%, #dcdcdc 40% 60%, rgb(0 0 0 / 0.0) 60%);
    background-repeat: no-repeat;
    background-size: 100% 0.3rem;
    background-position: bottom;
}

h3 {
    font-size: 2.0rem;
    margin: 0 0 30px 0;
    text-align: center
}

h4 {
    font-size: 1.8rem;
    margin: 0 0 30px 0;
    text-align: center
}
/*----- 汎用Style設定　---- */
.rightText {
    text-align: right
}

.centerText {
    text-align: center;
}

.centerImg {
    display: block;
    margin: 20px auto 0 auto;
    text-align: center
}
.fontSmall{
    font-size:1.2rem!important
}

.red {
    color: var(--color-attention);
}
.blue {
    color: #1E83BE;
}
#seminarDetailBox p a {
    color: var(--color-main) !important;
    text-decoration: underline !important;
}
#seminarDetailBox p a:hover {
    text-decoration: none !important
}

.fontBold{
    font-weight: bold;
    font-family: var(--font-bold)
}
.mb0 {
    margin-bottom: 0 !important
}
.mb20 {
    margin-bottom: 20px !important
}
.mb40 {
    margin-bottom: 40px !important
}
.mb60 {
    margin-bottom: 60px !important
}
.mb80 {
    margin-bottom: 80px !important
}
.mb120 {
    margin-bottom: 120px
}

.mr20 {
    margin-right: 20px !important;
}

.padding0 {
    padding: 0!important;
}

.notice {
    font-size: 1.4rem;
    color: var(--color-support);
}
.rednotice {
    font-size: 1.4rem;
    color: var(--color-attention);
}
.bold{
    font-weight:600;
    font-family: var(--font-bold), sans-serif;
}
.attention {
    color: var(--var-attention);
}

    .attention:before {
        font-family: "Font Awesome 5 Free";
        content: '\f071';
        font-weight: 900;
        margin-right: 5px;
        color: var(--color-attention);
    }


/*----- 既存Styleの打ち消し　---- */
#errorBox font[color="blue"] {
    color: var(--color-attention) !important;
}

/*----- アイコン設定　---- */
.greenIcon {
    background: var(--back-green);
    color: var(--color-main);
    border: 1px solid var(--color-main);
    text-align: center;
    font-size: 1.2rem;
    padding: 5px;
    margin: 0 5px 0 0
}

.whiteIcon {
    background: var(--color-base);
    color: var(--color-main);
    border: 1px solid var(--color-main);
    text-align: center;
    font-size: 1.2rem;
    padding: 5px;
    margin: 0 5px 0 0
}

.grayIcon {
    background: var(--back-gray);
    color: var(--color-text);
    border: 1px solid var(--color-text);
    text-align: center;
    font-size: 1.2rem;
    padding: 5px;
    margin: 0 5px 0 0
}

.blueIcon {
    background: var(--color-sub);
    color: var(--color-base);
    border: 1px solid var(--color-sub);
    text-align: center;
    font-size: 1.2rem;
    padding: 5px;
    margin: 0 5px 0 0
}

.redIcon {
    background: var(--color-attention);
    color: var(--color-base);
    border: 1px solid var(--color-attention);
    text-align: center;
    font-size: 1.2rem;
    padding: 5px;
    margin: 0 5px 0 0
}

.normalTable .greenIcon,
.normalTable .grayIcon,
.normalTable .blueIcon,
.normalTable .redIcon {
    min-width: 60px;
    display: block;
}
/*----- ボタン色設定　---- */
button {
    font-weight: 900;
    font-size: 1.4rem
}

.gradationButtonColor {
    color: var(--color-base) !important;
    text-align: center;
    border: solid 1px var(--color-main);
    transition: background 0.4s;
    background-image: linear-gradient(to right, #007e5f 0% 50%, #0cbb8f 100%);
    background-position: right center;
    background-size: 200% auto;
}

    .gradationButtonColor:hover {
        color: var(--color-base) !important;
        background-image: linear-gradient(to left, #0cbb8f 0% 50%, #007e5f 100%);
        background-position: left center;
    }
    .gradationButtonColor.withRightWhiteArrow:after{
        color:var(--color-base)!important
    }

.normalButtonColor {
    background: var(--color-main);
    color: var(--color-base) !important;
    text-align: center;
    border: solid 1px var(--color-main);
    transition: background 0.4s;
}

    .normalButtonColor:hover {
        background: var(--color-base);
        color: var(--color-main) !important;
        border-color: var(--color-main);
    }
    .normalButtonColor:hover a {
        color: var(--color-main) !important;
    }

    .normalButtonColor:hover input {
        color: var(--color-main) !important;
    }

.normalButtonColorEventDc {
    background: var(--color-sub);
    color: var(--color-base) !important;
    text-align: center;
    border: solid 1px var(--color-sub);
    transition: background 0.4s;
}

    .normalButtonColorEventDc:hover {
        background: var(--color-base);
        color: var(--color-sub) !important;
        border-color: var(--color-sub);
    }

        .normalButtonColorEventDc:hover a {
            color: var(--color-sub) !important;
        }

        .normalButtonColorEventDc:hover input {
            color: var(--color-sub) !important;
        }

    .normalButtonColorEventDc.withRightWhiteArrow:hover:after {
        color: var(--color-sub) !important;
    }

.YellowButtonColor {
    background: var(--color-houkaisei);
    color: var(--color-base) !important;
    text-align: center;
    border: solid 1px var(--color-houkaisei);
    transition: background 0.4s;
}

    .YellowButtonColor:hover {
        background: var(--color-base);
        color: var(--color-houkaisei) !important;
        border-color: var(--color-houkaisei);
    }

    .YellowButtonColorr:hover a {
        color: var(--color-houkaisei) !important;
    }

    .YellowButtonColor:hover input {
        color: var(--color-houkaisei) !important;
    }

        .normalButtonColor a, .YellowButtonColor a {
            color: var(--color-base) !important;
            display: inline-block;
            width: 100%;
            height: 100%;
        }
        .normalButtonColor input, .YellowButtonColor input {
            color: var(--color-base) !important;
        }

.orangeButtonColor {
    background: #ea5504;
    color: var(--color-base) !important;
    text-align: center;
    border: solid 1px #ea5504;
    transition: background 0.4s;
}

    .orangeButtonColor:hover {
        background: var(--color-base);
        color: #ea5504 !important;
        border-color: var(--color-houkaisei);
    }

        .orangeButtonColor:hover a {
            color: #ea5504 !important;
        }

        .orangeButtonColor:hover input {
            color: #ea5504!important;
        }

    .normalButtonColor a, .orangeButtonColor a {
        color: var(--color-base) !important;
        display: inline-block;
        width: 100%;
        height: 100%;
    }

.normalButtonColor input, .orangeButtonColor input {
    color: var(--color-base) !important;
}

.blueButtonColor {
    background: var(--color-sub);
    color: var(--color-base);
    text-align: center;
    border: solid 1px var(--color-sub);
    transition: background 0.4s;
}

    .blueButtonColor:hover {
        background: var(--color-base);
        color: var(--color-sub);
        border-color: var(--color-sub);
    }
    .blueButtonColor input {
        color: var(--color-base);
    }
    .blueButtonColor:hover input {
        color: var(--color-sub);
    }
    .blueButtonColor.withRightWhiteArrow:hover:after {
        color: var(--color-sub);
    }

.blueButtonColorEventDC {
    background: var(--color-main);
    color: var(--color-base);
    text-align: center;
    border: solid 1px var(--color-main);
    transition: background 0.4s;
}

    .blueButtonColorEventDC:hover {
        background: var(--color-base);
        color: var(--color-main);
        border-color: var(--color-main);
    }

    .blueButtonColorEventDC input {
        color: var(--color-base);
    }

    .blueButtonColorEventDC:hover input {
        color: var(--color-main);
    }

    .blueButtonColorEventDC.withRightWhiteArrow:hover:after {
        color: var(--color-main);
    }

    .grayButtonColor {
        background: var(--back-gray);
        border-radius: 50%;
        color: var(--color-text);
        text-align: center;
        border: solid 1px;
        border-color: var(--color-border);
        transition: background 0.4s;
    }

    .grayButtonColor:hover {
        background: var(--color-base);
        color: var(--color-text);
        border-color: var(--color-border);
    }
        .grayButtonColor input {
            color: var(--color-text) !important;
        }

.grayButtonColor inputr:hover {
    color: var(--color-text) !important;
}

.inactiveButtonColor {
    background: var(--color-border);
    border-radius: 50%;
    color: var(--color-base);
    font-weight: normal !important;
    text-align: center;
    border: solid 1px;
    border-color: var(--color-border);
    transition: background 0.4s;
}

    .inactiveButtonColor:hover {
        background: var(--color-border);
        color: var(--color-base);
        font-weight: normal !important;
        border-color: var(--color-border);
    }

    .inactiveButtonColor input {
        color: var(--color-base) !important;
    }

.listButtonColor {
    background: var(--color-base);
    border: solid 1px var(--color-border);
    transition: background 0.4s;
    color:var(--color-text);
}

    .listButtonColor:hover {
        border-color: var(--color-main);
    }
    .listButtonColor:hover a,
    .listButtonColor:hover input[type="submit"] {
        color: var(--color-main) !important;
    }
    .listButtonColor[disabled="disabled"],
    .listButtonColor[disabled="disabled"]:hover {
        background: var(--back-gray);
        color: var(--color-support);
        border-color: var(--color-border);
    }

/*----- ボタンのビュレット(矢印)設定　---- */
.withRightGreenArrow {
    position: relative;
}
    .withRightGreenArrow:after {
        font-family: "Font Awesome 5 Free";
        content: '\f105';
        font-weight: 900;
        margin-left: 5px;
        color: var(--color-main);
        position: absolute;
        right: 54px;
        top: 30%;
    }
    .withRightGreenArrow:hover:after {
        color: var(--color-main)!important;
    }

.withRightWhiteArrow{
    position:relative
}
.withRightWhiteArrow:after {
    font-family: "Font Awesome 5 Free";
    content: '\f105';
    font-weight: 900;
    position: absolute;
    right: 54px;
    top: 30%;
    color: var(--color-base);
}
    .withRightWhiteArrow:hover::after {
        color: var(--color-main);
    }

.withRightWhiteArrowMini {
    position: relative
}

    .withRightWhiteArrowMini:after {
        font-family: "Font Awesome 5 Free";
        content: '\f105';
        font-weight: 900;
        position: absolute;
        right: 20px;
        color: var(--color-base);
    }

    .withRightWhiteArrowMini:hover::after {
        color: var(--color-main);
    }

/*-- 草川追記　ここから --*/

.withRightWhiteRoundArrow {
    position: relative;
}

    .withRightWhiteRoundArrow:after {
        font-family: "Font Awesome 5 Free";
        content: '\f358';
        /* font-weight: 900; */
        position: absolute;
        right: 40px;
        top: 20%;
        color: var(--color-base);
    }

    .withRightWhiteRoundArrow:hover::after {
        color: #00A060;
    }

.withUnderWhiteRoundArrow {
    position: relative;
}

    .withUnderWhiteRoundArrow:after {
        font-family: "Font Awesome 5 Free";
        content: '\f35a';
        /* font-weight: 900; */
        position: absolute;
        right: 40px;
        top: 20%;
        color: var(--color-base);
    }

    .withUnderWhiteRoundArrow:hover::after {
        color: #00A060;
    }

/*-- 草川追記　ここまで --*/

    .YellowButtonColor.withRightWhiteArrowMini:hover::after,
    .YellowButtonColor.withRightWhiteArrow:hover::after {
        color: var(--color-houkaisei) !important;
    }

.withRightWhiteMovie {
    position: relative
}

    .withRightWhiteMovie:after {
        font-family: "Font Awesome 5 Free";
        content: '\f008';
        font-weight: 900;
        position: absolute;
        right: 54px;
        top: 30%;
        color: var(--color-base);
    }

    .withRightWhiteMovie:hover::after {
        color: var(--color-main);
    }



 .withRightWhiteGreenArrow {
        position: relative
    }

    .withRightWhiteGreenArrow:after {
        font-family: "Font Awesome 5 Free";
        content: '\f105';
        font-weight: 900;
        position: absolute;
        right: 54px;
        top: 30%;
        color: var(--color-base);
    }

    .withRightWhiteGreenArrow:hover:after {
        color: var(--color-main);
    }


.withRightWhiteBlueArrow {
    position: relative
}

    .withRightWhiteBlueArrow:after {
        font-family: "Font Awesome 5 Free";
        content: '\f105';
        font-weight: 900;
        position: absolute;
        right: 54px;
        top: 30%;
        color: var(--color-base);
    }

    .withRightWhiteBlueArrow:hover:after {
        color: var(--color-sub);
    }


.withRightGrayArrow {
    position: relative
}

.withRightGrayArrow:after {
    font-family: "Font Awesome 5 Free";
    content: '\f105';
    font-weight: 900;
    margin-left: 5px;
    color: var(--color-support);
    position: absolute;
    right: 54px;
    top: 30%;
}

.withRightGrayArrow:hover:after {
    color: var(--color-base);
}
.withRightBlackArrow {
    position: relative
}
.withRightBlackArrow:after {
    font-family: "Font Awesome 5 Free";
    content: '\f105';
    font-weight: 900;
    margin-left: 5px;
    color: var(--color-text);
    position: absolute;
    right: 54px;
    top: 30%;
}

.withRightBlackArrow:hover:after {
    color: var(--color-text);
}
/*----- 非活性　---- */
.inactiveBtn{
    pointer-events:none;
    opacity:0.25;
}
/*----- ボタンの書類、ダウンロードマーク設定　---- */
.withRightWhiteDoc:after {
    font-family: "Font Awesome 5 Free";
    content: '\f15c';
    font-weight: 900;
    margin-left: 5px;
    color: var(--color-base);
    position: absolute;
    right: 54px;
    top: 30%;
}
    .withRightWhiteDoc:hover:after {
        color: var(--color-main);
    }

.withRightGreenDoc:after {
    font-family: "Font Awesome 5 Free";
    content: '\f15c';
    font-weight: 900;
    margin-left: 5px;
    color: var(--color-main);
    position: absolute;
    right: 54px;
    top: 30%;
}

.withRightGreenDoc:hover:after {
    color: var(--color-main);
}


.withRightWhiteDL:after {
    font-family: "Font Awesome 5 Free";
    content: '\f019';
    font-weight: 600;
    margin-left: 5px;
    color: var(--color-base);
    position: absolute;
    right: 54px;
    top: 30%;
}

.withRightWhiteDL:hover:after {
    color: var(--color-main);
}

.withRightGreenDL:after {
    font-family: "Font Awesome 5 Free";
    content: '\f019';
    font-weight: 600;
    margin-left: 5px;
    color: var(--color-main);
    position: absolute;
    right: 54px;
    top: 30%;
}

.withRightGreenDL:hover:after {
    color: var(--color-main);
}

.withRightWhitePdf:after {
    font-family: "Font Awesome 5 Free";
    content: '\f1c1';
    font-weight: 400;
    margin-left: 5px;
    color: var(--color-base);
    position: absolute;
    right: 54px;
    top: 30%;
}

.withRightWhitePdf:hover:after {
    color: var(--color-main);
}

/*----- ボタンの動画　---- */

.withRightWhiteVideo:after {
    font-family: "Font Awesome 5 Free";
    content: '\f008';
    font-weight: 900;
    margin-left: 5px;
    color: var(--color-base);
    position: absolute;
    right: 54px;
    top: 30%;
}

.withRightWhiteVideo:hover:after {
    color: var(--color-main);
}


/*----- ボタンの書類、追加　---- */

.withRightWhiteBluePlus:after {
    font-family: "Font Awesome 5 Free";
    content: '\f067';
    font-weight:600;
    margin-left: 5px;
    color: var(--color-base);
    position: absolute;
    right: 54px;
    top: 30%;
}

.withRightWhiteBluePlus:hover:after {
    color: var(--color-sub);
}


/*---- ボタンの長さ設定 ----- */

.longButtonStyle {
    padding: 18px;
    min-width: 500px;
    border-radius: 33px;
    font-size: 1.6rem;
    display: block;
    margin: 0 auto;
    text-align: center;
    position: relative;
    box-shadow: 0px 1px 2px 2px rgba(100, 100, 100, 0.05);
    max-width: fit-content;
}

.middleButtonStyle {
    padding: 18px;
    min-width: 400px;
    border-radius: 33px;
    font-size: 1.6rem;
    display: block;
    margin: 0 auto;
    text-align: center;
    position: relative;
    box-shadow: 0px 1px 2px 2px rgba(100, 100, 100, 0.05);
    max-width: fit-content;
}

.shortButtonStyle {
    padding: 5px;
    min-width: 200px;
    border-radius: 0px;
    font-size: 1.6rem;
    display: block;
    text-align: center;
    position: relative;
    box-shadow: 0px 1px 2px 2px rgba(100, 100, 100, 0.05);
    max-width: fit-content;
}

    .shortButtonStyle:after {
        top: 17%;
        right: 10%;
    }

.miniButtonStyle {
    padding: 5px;
    min-width: 300px;
    border-radius: 5px;
    font-size: 1.6rem;
    display: block;
    text-align: center;
    position: relative;
    box-shadow: 0px 1px 2px 2px rgba(100, 100, 100, 0.05);
    max-width: fit-content;
}

    .miniButtonStyle:after {
        top: 17% !important;
        right: 5% !important;
    }

.smallButtonStyle {
    padding: 5px;
    min-width:100px;
    border-radius: 0px;
    font-size: 1.6rem;
    display: block;
    text-align: center;
    position: relative;
    box-shadow: 0px 1px 2px 2px rgba(100, 100, 100, 0.05);
    max-width: fit-content;
}

    .smallButtonStyle:after {
        top: 12%;
        right: 10%;
    }

.flexButtonStyle {
    padding: 5px;
    border-radius: 0px;
    font-size: 1.6rem;
    display: block;
    text-align: center;
    position: relative;
    box-shadow: 0px 1px 2px 2px rgba(100, 100, 100, 0.05);
    max-width: fit-content;
    min-height: 2em;
    min-width: 2em;
}

.blockButtonStyle {
    width: 550px;
    height: 100px;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
    box-shadow: 0px 5px 2px 2px rgba(100, 100, 100, 0.05);
    font-size: 1.5em;
    
}

.multipleButtonStyle {
    padding: 5px;
    min-width: 200px;
    border-radius: 33px;
    font-size: 1.6rem;
    display: block;
    text-align: center;
    position: relative;
    box-shadow: 0px 1px 2px 2px rgba(100, 100, 100, 0.05);
    max-width: fit-content;
}

.iouListButtonStyle {
    padding: 5px 15px 5px 15px;
    border-radius: 0px;
    font-size: 1.6rem;
    text-align: center;
    position: relative;
    box-shadow: 0px 1px 2px 2px rgba(100, 100, 100, 0.05);
    max-width: fit-content;
}

.longButtonStyle input,
.middleButtonStyle input,
.shortButtonStyle input,
.miniButtonStyle input {
    width: 100%
}
/*---- レイアウト設定 ----- */
#originalHeader, nav, #scrollHeader {
    border-bottom: 1px solid;
    border-color: var(--color-border);
}

    #originalHeaderInner, #navi > div, .naviSubMenu > div, #scrollHeader > div > div {
        width: 940px;
        margin: 0 auto;
        padding: 10px 0;
        display: flex;
    }

#navi > div{
    padding: 0;
}

#content {
    width: 940px;
    margin: 0 auto;
}

.contentFullBox {
    margin: 0 auto;
    padding: 60px 0;
}

.contentBox {
    width: var(--width-main);
    margin: 0 auto;
    padding:40px 0 60px 0;
    font-family: var(--font-normal), sans-serif;
}

#main {
    padding-bottom: 120px;
    min-height: 550px;
    flex-grow: 1;
}

.bnrBox {
    margin: 0 0 40px 0;
    text-align: center
}

    .bnrBox li {
        margin: 0 0 20px 0
    }

        .bnrBox li:last-child {
            margin: 0
        }

.threeBnr {
    display: flex;
    flex-wrap: wrap;
    width: 700px;
    margin: 0 auto;
}

    ul.threeBnr li {
        margin: 0 50px 20px 0;
    }

ul.threeBnr li a img{
    width: 200px;
}

        ul.threeBnr li img {
            width: 200px;
        }

        ul.threeBnr li:nth-child(3n) {
            margin: 0 0 20px 0
        }

.oneButton {
    text-align: center
}
.oneButton li{
   margin:0 0 20px 0
}
    .oneButton li:last-child{
        margin:0
    }

.multipleButton li {
    margin: 0 0 10px 0
}
.multipleeButton li:last-child {
    margin: 0
}

/*----- 中央配置　---- */
        .centerText {
    text-align: center
}
/*----- 未読設定　---- */
.midoku a {
    font-weight: 900;
    font-weight: bold;
    font-family: var(--font-bold);
}
    .midoku a:before {
        content: "未読";
        color: var(--color-support);
        background: var(--back-gray);
        margin-right: 5px;
        padding:5px;
        font-size: 1.2rem;
        font-family: var(--font-bold);
        border: 1px solid var(--color-support);
    }



    /*----- 強調 ----- */
    strong {
    font-weight: 600;
    color: var(--color-main);
}


/*----- thありテーブル（表） ----- */
.normalTable {
    border-collapse: collapse;
    width: 100%;
    margin: 0 0 60px 0;
    border: none !important;
}

    .normalTable tr {
        border-bottom: 1px solid var(--color-border);
    }

    .normalTable th, td {
        padding: 15px 5px 15px 0;
        line-height: 1.3;
        word-break: break-all;
    }

    .normalTable th {
        color: var(--color-support);
        font-weight: normal;
    }
/*----- 必須 ----- */
.required {
    color: var(--color-attention);
    font-family: var(--font-bold-conde);
    margin: 0 0 0 5px;
    font-weight: 900;
}

/*----- ページング ----- */
.paging {
    text-align: center;
    margin:0 0 60px 0
}

    .paging ul {
        display: flex;
        justify-content: center;
    }
    .paging li{
        margin:0 0 0 0 
    }
    .paging li:last-child{
        margin:0
    }
        .paging li a, .paging li.current {
        padding: 5px 15px;
        text-align: center;
        background: var(--back-gray);
        margin: 0 10px 0 0;
        color: var(--color-text);
        border: 1px solid var(--back-gray);
        display: block;
    }

        .paging li a:hover {
            background: var(--color-base);
            border: 1px solid var(--color-main);
        }


        .paging li a:hover {
            color: var(--color-main) !important;
        }
            .paging li a:hover{
                color: var(--color-main) !important;
            }

        .paging li.active {
            background: var(--color-main);
            color: var(--color-base);
            border: none !important;
            padding: 5px 15px;
            margin: 0 10px 0 0;
        }

    .paging li.current {
        background: var(--color-main);
        color: var(--color-base);
        border: none !important
    }

.PagingBorder th,
.PagingBorder td {
    border-bottom: none !important;
    text-align: center;
}
.PagingBorder table {
    width: 940px;
}
    .PagingBorder table tr {
        display: flex;
        justify-content: center;
    }
        .PagingBorder table tr span {
            background: var(--color-main);
            color: var(--color-base);
            border: none !important;
            padding: 5px 15px;
            display: block;
            margin:0 10px
        }
        .PagingBorder table tr a {
            padding: 5px 15px;
            text-align: center;
            background: var(--back-gray);
            margin: 0 10px 0 0;
            color: var(--color-text);
            border: 1px solid var(--back-gray);
            display: block;
        }
            .PagingBorder table tr a:hover {
                background: var(--color-base);
                border: 1px solid var(--color-main);
                color: var(--color-main);
            }

span.ellipse {
    pointer-events: none;
    display:block;
    margin:5px 10px 5px 0px

}
/*----- 入力フォームテーブル（表） ----- */
.formTable tr {
    vertical-align: top;
}
/*----- Form設定 ----- */

input[type="password"]:placeholder-shown,
input[type="text"]:placeholder-shown,
textarea:placeholder-shown {
    background: var(--back-blue);

}
table input[type="text"] {
    background: var(--color-base);
    border: 1px solid var(--color-border);
    padding: 5px;
    border-radius: 3px;
    color: var(--color-text);
  
}

    table input[type="text"]:hover,
    table input[type="text"]:focus {
        background: var(--back-base);
        border: 1px solid var(--color-sub);
        color: var(--color-text);
    }

table textarea {
    background: var(--color-base);
    border: 1px solid var(--color-border);
    padding: 5px;
    border-radius: 3px;
    color: var(--color-text);
    width: 60%;
}

    table textarea:hover,
    table textarea:focus {
        background: var(--back-base);
        border: 1px solid var(--color-sub);
        color: var(--color-text);
    }

table span.notice {
    display: block;
    color: var(--color-support);
    font-size: 1.4rem;
}

table input[type="text"].form-w50{
    width: 400px!important
}
table textarea.form-w50 {
    width:600px !important;
    min-height:100px;
    display:block
}
/*----- ラジオボタン　----- */
table input[type="radio"] {
    margin: 0 5px 0 0;
    opacity: 0
}

    table input[type="radio"] + label:before {
        content: "";
        display: inline-block;
        border: 2px solid var(--color-border);
        border-radius: 100%;
        height: 20px;
        width: 20px;
        top: 3px;
        left: 0px;
        z-index: 5;
        opacity: 1;
        position: absolute;
    }

input[type=radio]:checked + label:before {
    border: 10px solid var(--color-sub);
}

table input[type="radio"] + label {
    margin: 0 20px 0 0;
    position: relative;
    color: var(--color-text);
    padding: 0 0 0 30px
}

table input[type="radio"]:checked + label {
    color: var(--color-sub)
}

/*----- 入力フォーム(チェックボックス)　----- */
input[type="checkbox"] {
    width: 17px;
    height: 17px;
    border: 10px solid var(--color-border);
    vertical-align: middle;
}

    input[type="checkbox"]:checked:hover,
    input[type="checkbox"]:checked {
        border: 10px solid var(--color-sub);
    }


/*----- セレクト　※.selectStyleで囲んで使うこと　----- */
select {
    width:100%
}

.selectStyle {
    border: 1px solid var(--color-border);
    background: var(--color-base);
    width: fit-content;
    width: -moz-fit-content;
    border-radius: 3px;
    /*padding: 5px 0px 5px 10px;*/
    position: relative;
    min-width: 300px;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
}

    .selectStyle:hover {
        border: 1px solid var(--color-sub);
        background: var(--back-base);
    }

    .selectStyle::after {
        font-family: "Font Awesome 5 Free";
        content: '\f107';
        font-weight: 600;
        color: var(--color-sub);
        font-size: 1.8rem;
        position: absolute;
        right: 10px;
        top: 5px;
        pointer-events: none;
    }

    .selectStyle select {
        padding: 5px 10px;
    }

option {
    font-size: 1.8rem
}


/*----- フォームの下の登録する／戻るボタン　and 2個並びのボタン　----- */
.twoButton,
.formButton {
    display: flex;
}

    .twoButton li,
    .formButton li {
        width: 50%;
        text-align: center;
        display: flex;
        justify-content: center;
    }

        .twoButton li :last-child,
        .formButton li :last-child {
            margin: 0
        }

/*----- 1個並びのボタン　----- */
.oneButton {
    margin: 0 auto;
    text-align: center;
    max-width: 500px;
}
    .oneButton li{

    }

/*----- 複数個縦並びのボタン　----- */
.multipleButton {
    padding: 0 5px;
    text-align: center;
    max-width: 250px;
}



    /*----- 同意する　----- */
#ctl00_MainContent_policyAgree,
#policyAgree {
    text-align: center;
    background: var(--back-gray);
    margin: 0 0 40px 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
    #ctl00_MainContent_policyAgree input,
    #policyAgree input {
        margin: 0 5px 0 0
    }
    #ctl00_MainContent_policyAgree .sFormError,
    #policyAgree .sFormError {
        margin: 0 0 0 5px !important
    }
/*----- アイコン付きボタンリスト　----- */
.buttonListWithArrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

    .buttonListWithArrow li {
        text-align: center;
        border: 1px solid var(--color-border);
        transition: background 0.4s;
        margin: 0 20px 20px 0;
        width: calc((100% - 80px) / 5);
        border-radius: 12px;
        background: var(--color-base);
        position: relative;
        align-self: stretch;
        text-align: center;
        display: -webkit-box;
        display: -ms-flexbox;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

        .buttonListWithArrow li:after {
            font-family: "Font Awesome 5 Free";
            content: '\f105';
            font-weight: 900;
            position: absolute;
            right: 20px;
            top: 35%;
            color: var(--color-main);
        }

        .buttonListWithArrow li:hover:after {
            color: var(--color-main);
        }

        .buttonListWithArrow li a {
            padding: 20px 0;
            display: block;
        }

        .buttonListWithArrow li:hover a {
            color: var(--color-main);
        }

        .buttonListWithArrow li:nth-child(5n) {
            margin: 0 0 20px 0;
        }

        .buttonListWithArrow li:hover {
            background: var(--color-base);
            color:var(--color-main);
            border: 1px solid var(--color-border);
        }


/*----- 入力フォーム(text)　----- */
input[type="text"], input[type="password"] {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--back-base);
    padding: 8px;
}

    input[type="text"]:focus,
    input[type="password"]:focus {
        border: 1px solid var(--color-sub);
        background: var(--color-base);
    }



  
    /*----- タブ　----- */
    .tabs {
        margin-top: 50px;
        padding-bottom: 40px;
        background-color: #fff;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        margin: 0 auto;
    }

.tab_item {
    width: calc(100%/3);
    height: 50px;
    border-bottom: 3px solid var(--color-main);
    background-color: var(--back-gray);
    line-height: 50px;
    font-size: 16px;
    text-align: center;
    color: var(--color-text);
    display: block;
    float: left;
    text-align: center;
    font-weight: bold;
    transition: all 0.2s ease;
}

    .tab_item:hover {
        opacity: 0.8;
        cursor:pointer
    }

input[name="tab_item"] {
    display: none;
}

.tab_content {
    display: none;
    padding: 40px 40px 0;
    clear: both;
    overflow: hidden;
}

#MJL_TAB_ITEM_0:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
    display: block !important;
}

.tabs input:checked + .tab_item {
    background-color:var(--color-main);
    color: #fff;
}

/*----- チェックマーク付きリスト　----- */
.withGreenCheckList li:before {
    font-family: "Font Awesome 5 Free";
    content: '\f00c';
    font-weight: 900;
    margin-right: 5px;
    color: var(--color-main);
    margin: 0 10px 0 0
}

/*----- ▶マーク付きリスト　----- */
.withSubMarkList li:before {
    font-family: "Font Awesome 5 Free";
    content: '\f0da';
    font-weight: 900;
    margin-right: 5px;
    color: var(--color-support);
    margin: 0 10px 0 0
}

/*----- ProgressBar ----- */
.progressbar {
    position: relative;
    margin: 40px 0 60px 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

    .progressbar li {
        position: relative;
        list-style-type: none;
        text-align: center;
        text-transform: uppercase;
        width: 33.333%;
        color: var(--color-border);
        font-weight: bold;
    }

        .progressbar li:before {
            display: block;
            width: 18px;
            height: 18px;
            margin: 7px auto 20px auto;
            content: '';
            text-align: center;
            border-radius: 50%;
            background-color: var(--color-border);
        }

        .progressbar li:after {
            position: absolute;
            z-index: -1;
            top: 15px;
            left: -50%;
            width: 100%;
            height: 2px;
            content: '';
            background-color:var(--color-border);
        }

        .progressbar li:first-child:after {
            content: none;
        }

        .progressbar li.active,
        .progressbar li.complete {
            color: var(--color-main);
        }

            .progressbar li.active:before,
            .progressbar li.complete:before {
                background-color: var(--color-main);
            }

            .progressbar li.active:after,
            .progressbar li.complete:after {
                background-color: var(--color-main);
            }

.jMovie{
    width:750px;
    margin:40px auto; 
}

.no-bg{
    background: none;
}

.white-space-pre{
    white-space: pre;
}