@charset "utf-8";

/* ↓↓ページ構成↓↓ */
html,body{
    margin: 0 auto;
    min-width: 1300px;
    width: auto;
    font-size: 18px;
    font-family: "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;
}
main {
    padding-top: initial;
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
}
img{
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

#left_side {
    width: 260px;
    float: left;
    margin-right: 1em;
}
#main_content {
    width: 730px;
    float: left;
}
#main_content.width-100 {
    width: 100%;
}
#main_content.width-450px {
    width: 470px;
}
#right_side {
    width: 260px;
    float: right;
    margin-left: 1em;
}

/* ↑↑ページ構成↑↑ */

/* =====================
  Utilty
==================== */
/* color */
.c-grey{color: #818181;}
.c-blue{color: #114191;}

.df{display: flex;}
/* =====================
  Effect
==================== */
.hover-op{
    transition: opacity 250ms ease 0s;
}
.hover-op:hover{
    opacity: 0.7;
}
.hover-blue{
    transition: color 250ms ease 0s;
}
.hover-blue:hover{
    color: #114191;
}


/* ↓↓ヘッダー用↓↓ */
    #header-menu, #header-menu-portal {
        background-color: #003b84;
        height: 57px;
        padding: 0px;
        color: #ffffff;
        font-size: 14px;
    }

    #header-menu ul, #header-menu-portal ul {
        margin: 0;
        padding: 0;
        width: 1200px;
        margin: 0 auto;
    }

    #header-menu li, #header-menu-portal li {
        width: 20%;
        height: 55px;
        float: left;
        padding: 0;
        list-style-type: none;
        text-align: center;
    }

    #header-menu li a, #header-menu-portal li a {
        width: auto;
        height: 100%;
        color: #fff;
        font-size: 100%;
        font-weight: bold;
        padding: 6px 0 0 0;
        text-decoration: none;
        display: block;
        background: #003b84;
        border-left: 1px solid #999;
        box-shadow: 1px 0px 0px rgba(225,225,225,0.3) inset, -1px 0px 0px rgba(225,225,225,0.3) inset, 0px 1px 1px rgba(0,0,0,0.1) inset, 0px -1px 1px rgba(0,0,0,0.3) inset, 0px 1px 2px #ccc;
    }

    #header-menu li:nth-of-type(1) a, #header-menu-portal li:nth-of-type(1) a {
        padding: 17px 0 0 0;
    }

    #header-menu li:last-of-type a, #header-menu-portal li:last-of-type a {
        padding: 17px 0 0 0;
    }


    .header{
        border-bottom: 4px solid #114191;
        height: 163px;
        margin-bottom: 1em;
    }
    .header .inner{
        font-size: 12px;
        height: 100px;
        padding-left: 30px;
        position: relative;
    }
    .header .inner::after{
        content: "";
        display: block;
        clear: both;
    }
    /* head */
    .header .inner .head{
        width: 276px;
        float: left;
    }
    .header .inner .head a{
        width: 100%;
        height: 100px;
        display: inline-flex;
        -webkit-justify-content: center;
                justify-content: center;
        -webkit-align-items: center;
                align-items: center;
        -webkit-flex-direction: column;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .header .inner .head a > h1{
        position: relative;
        top: 8px;
    }
    .header .inner .head .text{
        position: relative;
        top: -9px;
        left: 12px;
    }
    .header .inner .head .text span{
        display: block;
        text-align: center;
        line-height: 1;
    }
    .header .inner .head .text span:last-child{
        font-size: 10px;
        font-weight: bold;
        padding-top: 5px;
        letter-spacing: 0.06em;
    }
    /* search */
    .header .inner .search{
        float: right;
    }
    .header .inner .search .df{
        height: 100px;
        -webkit-align-items: center;
                align-items: center;
    }
    .header .inner .search .anchor{
        margin-right: 22px;
    }
    .header .inner .search .anchor a{
        display: inline-flex;
        -webkit-justify-content: center;
                justify-content: center;
        -webkit-align-items: center;
                align-items: center;
        position: relative;
        left: 5px;
        top: 3px;
        font-size: 11px;
    }
    .header .inner .search .anchor a::before{
        content: "";
        display: block;
        -webkit-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url("../img/icon/about.png");
        width: 20px;
        height: 20px;
        position: relative;
        left: -5px;
    }
    .header .inner .search .anchor span{
        display: inline-flex;
        -webkit-justify-content: center;
                justify-content: center;
        -webkit-align-items: center;
                align-items: center;
        position: relative;
        left: 5px;
        top: 3px;
        font-size: 11px;
    }
    .header .inner .search .anchor span.avator::before{
        content: "";
        display: block;
        -webkit-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url("../img/icon/avator.png");
        width: 20px;
        height: 20px;
        position: relative;
        left: -5px;
    }
    /* form */
    .header .inner .search .form{
        border: 1px solid #c7c7c7;
        -webkit-border-radius: 50rem;
                border-radius: 50rem;
        height: 41px;
        width: 200px;
        display: flex;
        -webkit-align-items: center;
                align-items: center;
        background: #FFF;
        margin-right: 23px;
        position: relative;
        top: 0px;
        padding-right: 2px;
        padding-left: 8px;
        position: relative;
        transition: width 250ms ease 0s;
    }
    .header .inner .search .form.on{
        width: 290px;
    }
    .header .inner .search .form::before{
        content: "";
        display: block;
        position: absolute;
        left: 12px;
        top: 50%;
        -webkit-transform: translateY(-50%);
           -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
             -o-transform: translateY(-50%);
                transform: translateY(-50%);
        background-image: url("../img/icon/search.png");
        width: 20px;
        height: 20px;
        -webkit-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        -webkit-flex: 1;
            -ms-flex: 1;
                flex: 1;
    }
    .header .inner .search .form input[type="text"]{
        font-weight: normal;
        font-size: 14px;
        width: 117px;
        padding: 0 7px;
        height: 35px;
        margin-bottom: 0;
        margin-left: 25px;
    }
    .header .inner .search .form.on input[type="text"]{
        width: 208px;
    }
    .header .inner .search .form input[type="submit"]{
        position: absolute;
        top: 50%;
        right: 2px;
        -webkit-transform: translateY(-50%);
           -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
             -o-transform: translateY(-50%);
                transform: translateY(-50%);
        background: #114191;
        padding-left: 5px;
        color: #fff;
        width: 45px;
        height: 35px;
        -webkit-border-radius: 3px 50rem 50rem 3px;
                border-radius: 3px 50rem 50rem 3px;
        cursor: pointer;
        transition: opacity 300ms ease 0s;
        text-align: center;
        vertical-align: middle;
        letter-spacing: 0.25em;
    }
    .header .inner .search .form input[type="submit"]:hover{
        opacity: 0.7;
    }
    .header .inner .header-buttons{
        float: right;
    }
    .header .inner .header-buttons > .header-buttons-in{
        display: flex;
    }
    .header .inner .header-buttons > .header-buttons-in a{
        display: block;
        width: 100px;
        height: 100px;
        color: #fff;
        font-size: 13px;
        text-align: center;
        padding-top: 17px;
    }
    .header .inner .header-buttons > .header-buttons-in .mypage a{
        padding-top: 22px;
    }
    .header .inner .header-buttons > .header-buttons-in .logout a{
        padding-top: 22px;
    }
    .header .inner .header-buttons > .header-buttons-in .manage a{
        padding-top: 22px;
    }
    .header .inner .header-buttons > .header-buttons-in a::before{
        content: "";
        display: block;
        margin-left: auto;
        margin-right: auto;
        -webkit-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
        background-position: center;
        position: relative;
        background-repeat: no-repeat;
    }
    .header .inner a span{
        font-weight: bold;
        display: block;
        line-height: 1.3;
    }
    .header .inner a span:first-child{
        margin-top: 17px;
    }
    .header .inner .header-buttons > .header-buttons-in .logout a span{
        margin-top: 15px;
    }
    .header .inner .header-buttons > .header-buttons-in .manage a span{
        margin-top: 15px;
    }
    .bg-color-blue{
        background: #114191;
    }
    .bg-color-orange{
        background: #e55d42;
    }
    .bg-color-sky{
        background: #3c7cf1;
    }
    .header .inner .regist a span:first-child{
        margin-top: 12px;
    }
    .header .inner .regist a::before{
        background-image: url("../img/icon/pen.png");
        width: 28px;
        height: 29px;
    }
    .header .inner .login a::before{
        background-image: url("../img/icon/key.png");
        width: 21px;
        height: 29px;
    }
    .header .inner .mypage a::before{
        background-image: url("../img/icon/house.png");
        width: 22px;
        height: 25px;
    }
    .header .inner .logout a::before{
        background-image: url("../img/icon/logout.png");
        width: 31px;
        height: 28px;
        left: 5px;
    }
    .header .inner .manage a::before{
        background-image: url("../img/icon/manage.png");
        width: 28px;
        height: 28px;
    }

    .header input[type='text']{
        background: transparent;
        -webkit-appearance: none;
        appearance: none;
        border: none;
        outline: none;

    }
    .header a{
        outline:none;
        text-decoration: none;
        color: inherit;
    }

/* ↑↑ヘッダー用↑↑ */


/* ↓↓フッター用↓↓ */
    #footer-placeholder{
      clear: both;
    }

    /* contents */
    .footer-contents{
        background: #333333;
        color: #fff;
        padding: 34px 0 40px;
    }
    .footer-contents a{
        outline:none;
        text-decoration: none;
        color: inherit;
    }
    .footer-contents h3{
        color: #fefefe;
        font-size: 14px;
        font-weight: bold;
    }
    .footer-contents h3 span{
        font-size: 11px;
    }
    .footer-contents .body{
        margin-top: 28px;
    }
    .footer-contents .df{
    }
    .footer-contents .unit{
    }
    .footer-contents .df > .unit:nth-child(1){
        width:255px;
    }
    .footer-contents .df > .unit:nth-child(2){
        width:185px;
    }
    .footer-contents .df > .unit:nth-child(3){
        width:264px;
    }
    .footer-contents .df > .unit:nth-child(4){
        width:172px;
    }
    .footer-contents .df > .unit:nth-child(5){
    }
    .footer-contents .unit ul{
        margin-top: 23px;
    }
    .footer-contents .unit li,
    .footer-contents .unit li a{
        color: #cccccc;
        font-size: 12px;
        font-weight: normal;
    }
    .footer-contents .unit li a{
        -webkit-transition: opacity 250ms ease 0s;
           -moz-transition: opacity 250ms ease 0s;
            -ms-transition: opacity 250ms ease 0s;
             -o-transition: opacity 250ms ease 0s;
                transition: opacity 250ms ease 0s;
    }
    .footer-contents .unit li a:hover{
        opacity: 0.7;
        text-decoration: underline;
    }
    .footer-contents .unit li + li{
        margin-top: 7px;
    }
    .footer-contents .unit li strong{
        font-weight: bold;
        font-size: 16px;
        color: #fffc00;
    }
    /* links */
    .footer-links{
        background: #5d5d5d;
        color: #fff;
        padding: 18px 0;
    }
    .footer-links a{
        outline:none;
        text-decoration: none;
        color: inherit;
    }
    .footer-links li{
        display: inline-block;
        margin-right: 1.5em;
        line-height: 2;
    }
    .footer-links li,
    .footer-links li a{
        font-weight: normal;
        font-size: 13px;
        color: #FFF;
    }
    .footer-links li a{
        -webkit-transition: opacity 250ms ease 0s;
           -moz-transition: opacity 250ms ease 0s;
            -ms-transition: opacity 250ms ease 0s;
             -o-transition: opacity 250ms ease 0s;
                transition: opacity 250ms ease 0s;
    }
    .footer-links li a:hover{
        opacity: 0.7;
        text-decoration: underline;
    }
    .footer-links li a::before{
        content: "";
        width: 9px;
        height: 9px;
        border-top: 1px solid #fff;
        border-left: 1px solid #fff;
        display: inline-block;
        margin-right: 10px;
        -webkit-transform: rotate(135deg);
           -moz-transform: rotate(135deg);
            -ms-transform: rotate(135deg);
             -o-transform: rotate(135deg);
                transform: rotate(135deg);
    }
    /* copy */
    .footer-copy{
        padding: 12px 0;
    }
    .footer-copy .inner-02{
        position: relative;
    }
    .footer-copy small{
        position: absolute;
        font-weight: normal;
        top: 50%;
        right: 0;
        -webkit-transform: translateY(-50%);
           -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
             -o-transform: translateY(-50%);
                transform: translateY(-50%);
        font-size: 10px;
        color: #666666;
    }

/* ↑↑フッター用↑↑ */


/* ↓↓Common↓↓ */
.inner{
    width: 1300px;
    margin-left: auto;
    margin-right: auto;
}
.inner-02{
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
}
/* ↑↑Common↑↑ */


/* ↓↓入力・確認系ページ用↓↓ */
    .input-area dt, .input-area dd, .confirm-area dt, .confirm-area dd{
        float:left;
        padding:8px 5px 5px;
        line-height:1.8em;
    }
    .input-area dt, .confirm-area dt{
        font-weight:bold;
        margin-bottom:4px;
        border-top:2px dotted #c8c8c6;
        clear:both;
        width:28%;
    }
    .input-area dd, .confirm-area dd{
        margin:0 0 10px 0;
        border-top:2px dotted #c8c8c6;
        width:71%;
    }
    .input-area dt:first-of-type, .confirm-area dt:first-of-type
    , .input-area dd:first-of-type, .confirm-area dd:first-of-type{
        border: none;
    }
    .confirm-area dd .left-position{
        width:87%;
        float:left;
    }
    .confirm-area dd .right-position{
        float:right;
    }
    .four-column li{
        width:25%;
        float:left;
    }
    .two-column li{
        width:45%;
        float:left;
    }
    .cate-header{
        padding:5px;
        background-color:#d9edf7;
        margin-bottom:10px;
    }
/* ↑↑入力・確認系ページ用↑↑ */