@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);

/* ===============================================
#　基本設定
=============================================== */


/* --- 全体の背景・テキスト --- */

body {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    background: #ffffff;
    /* 全体の背景色 */
    color: #404040;
    /* 全体の文字色 */
    line-height: 1.6;
    font-size: 16px;
    -webkit-print-color-adjust: exact;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* --- ヘッダとフッタのリンクテキスト --- */

a:link {
    color: #404040;
}

a:visited {
    color: #404040;
}

a:hover {
    color: #c0c0c0;
    opacity: 0.5;
}


/*** レスポンシブ・画面サイズ768px以下になった場合)***/

@media (max-width:768px) {
    body {
        max-width: 100%;
    }
}


/* ===============================================
#　ヘッダ
=============================================== */

/* --- ヘッダ --- */

header {
    width: 100%;
    margin: 0 auto;
    /* 中央配置 */
    padding: 0;
    /* 上下左右 */
    background-color: #87cefa !important;
    /* 背景色 */
    overflow: hidden;
    /* はみ出した箇所は消去 */
}

header .container{
    max-width: 1000px;
    padding: 0;
}

.logo {
    max-width: 100%;
}

.logo img{
    margin-top: 5px;
}

.menu-btn {
    display: none;
}

.menu-btn:hover {
    opacity: 0.3;
}

.globalNav {
    width: 100%;
    margin: 0 auto;
    display: -ms-flexbox; /* IE10 */
    display: -webkit-box; /* Android4.3以下、Safari3.1〜6.0 */
    display: -webkit-flex; /* Safari6.1以降 */
    display: flex;
    color: #404040;
    background-color: #fff;
    /*background-color: #f8f4e6;*/
    font-size: 90%;
}

.globalNav ul {
    width: 1000px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: -ms-flexbox; /* IE10 */
    display: -webkit-box; /* Android4.3以下、Safari3.1〜6.0 */
    display: -webkit-flex; /* Safari6.1以降 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .container-small{
    width: 1000px;
    display: -ms-flexbox; /* IE10 */
    display: -webkit-box; /* Android4.3以下、Safari3.1〜6.0 */
    display: -webkit-flex; /* Safari6.1以降 */
    display: flex;
    align-items: center;
}

.main-info{
    padding: 15px;
    color: #fff;
    flex: 0 0 1;
    margin-left: 280px;
}

.phone{
    font-size: 220%;
    margin-top:5px;
}

.add{
    margin-left: 35px;
    font-size: 93%
}

/* リンクエリア */

.globalNav a {
    display: block;
    text-decoration: none;
    padding: 5px;
}

/* マウスオン時の動き*/

.globalNav a:hover {
    background-color:#005B93;
}

.clear {
    clear: both; /* フロートの解除 */
}

/*** ヘッダ部レスポンシブ ***/

@media (max-width:768px) {
    header {
        max-width: 100%;
    }

    header .container{
        display: block;
    }

    .logo{
        max-width: 100%;
        height: auto;
    }

    .logo img{
        max-width: 100%;
        height: auto;
    }

    header .container-small{
        max-width: 100%;
        justify-content:center;
    }

    .main-info{
        display: none;
    }

    .menu-btn{
        border: none;
        outline: none;
        background: none;
        font-size: 200%;
        opacity: 0.8;
        color: #fff;
        cursor: pointer;
        transition: all .4s;
        display: -ms-flexbox; /* IE10 */
        display: -webkit-box; /* Android4.3以下、Safari3.1〜6.0 */
        display: -webkit-flex; /* Safari6.1以降 */
        display: flex;
        padding: 20px;
    }

    .globalNav{
        display: none;
        font-size: 90%;
    }

    .globalNav ul {
        width: 100%;
        margin: 0;
        padding: 0;
        font-size: 100%;
        display: block;
    }

    .globalNav li {
        max-width: 100%;
        padding: 8px;
        border-top: 1px solid #ffffff;
    }

    .globalNav a {
        padding: 5px;
    }

}

/* ===============================================
#　コンテンツ
=============================================== */


/* --- 共通部分（コンテナ） --- */

.container{
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.top-img{
    width: 100%;
    height: 300px;
    display: block;
    text-align: center;
    background: url(../image/haikei2.jpg);
    background-position: left;
}

.main{
    width: 100%;
}

.top-content {
    width: 700px;
    margin:0 auto;
    float: left;
}

.content{
    width: 1000px;
    margin: 0 auto;
}

#message{
    padding: 10px;
    margin-top: 32px;
    border-radius: 10px;
    border: 3px dotted #9acd32;
    font-weight: bolder;
    text-align: center;
}


.main-title {
    padding: 10px;
    text-align: center;
    color: #b79e84;
    border-bottom: 3px solid;
}

.line {
    width:100%;
    margin-top: 64px;
    margin-bottom: 64px;
    text-align: center;
    color: #b79e84;
}

.strike{
    text-decoration:line-through #ff6347 2px;
} 

.u-line{
    text-decoration: underline;
}

/*** レスポンシブ ***/
@media (max-width: 768px) {

    .main{
        max-width: 100%;
    }

    .content {
        max-width: 100%;
    }

    #message{
        width: 80%;
        display: block;
        margin: 0 auto;
        margin-top: 24px;
        font-size: 80%;
    }

    .top-content {
        width: 100%;
    }

    .top-img{
        height: auto;
        background: none;
    }

    .top-img img{
        width: 100%;
        height: auto;
    }

    .main-title{
        font-size: 120%;
        color: #b79e84;
    }

}


/* --- トップページ（新着情報） --- */

.info{
    padding: 16px 16px 32px 16px;
    background-color: #f8f4e6;
    border-radius: 10px;
    overflow: hidden;
    font-size: 85%;
}

.info table{
    width:100%;
    display: block;
}

.info td{
    margin: 0;
    padding: 10px;
    border-style: none;
}

.info a{
    text-decoration: none;
}

.list{
    float: right;
    padding: 5px;
    background-color: #b79e84;
    border-radius: 10px;
}

.list a{
    padding: 5px;
    color: #fff;
    text-decoration: none;
}

/*** レスポンシブ ***/

@media (max-width: 768px) {

    .info{
        padding: 16px 16px 10px 16px;
        width: 100%;
        font-size: 80%;
        border-radius: 0px;
    }

    .info table{
        max-width: 100%;
    }

    .list{
        margin-right: 30px;
    }

}


/* --- トップページ（コンテンツ） --- */

.content-box {
    width: 1000px;
    overflow: hidden;
    margin: 0 auto;
    display: -ms-flexbox; /* IE10 */
    display: -webkit-box; /* Android4.3以下、Safari3.1〜6.0 */
    display: -webkit-flex; /* Safari6.1以降 */
    display: flex;
}

.content-box ul{
    margin: 0;    /* listのインデントを解除 */
    padding: 0;
    display: -ms-flexbox; /* IE10 */
    display: -webkit-box; /* Android4.3以下、Safari3.1〜6.0 */
    display: -webkit-flex; /* Safari6.1以降 */
    display: flex;
    flex-wrap: wrap;
}

.content-box li {
    flex: 1 1 400px;
    text-align: center;
    margin: 16px;
    padding: 32px;
    list-style: none;
    font-size: 140%;
}

.content-box a {
    display: block;
    flex: 1;
    margin: 0 auto;
    text-decoration: none;
    color: #fff;
    background: #88c8be !important;
    font-weight: bolder;
    border-radius: 10px;
}

/*** レスポンシブ ***/

@media (max-width: 768px) {
    .content-box {
        max-width: 100%;
    }

    .content-box ul{
        max-width: 100%;
        flex-direction: -webkit-column;/* safari用 */
        flex-direction: column;/* 要素を縦並びにする */
        display: block;
        margin: 0 auto;
    }

    .content-box li {
        font-size: 120%;
    }

    .sum img{
        max-width: 100%;
        height: auto;
    }
}

/* --- トップページ（サイドバー） --- */

.side{
    width: 230px;
    float: right;
    margin: 30px 10px;
    margin-top: 48px;
    display: block;
}

.side ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.side li{
    margin-top: 16px;
    font-size: 120%;
    text-align: center;
    border-top: 1px solid #fff;
}

.side li:first-child{
    background-color: #fff;
    margin-top: 0px;
    border-bottom: 1px dashed #b79e84;
    color: #b79e84;
}

.side li:nth-child(11){
    visibility: hidden;
}

.side a{
    padding-top: 34px;
}

.side a:hover{
    background-color: transparent; /* IE6対応 */
}

.side a:hover img{
    visibility: hidden;
}

.side #kurabiraki{
    background: url(../image/kurabiraki1.png) no-repeat;
}

.side #jyutaku{
    background: url(../image/jyutaku1.png) no-repeat;
}

.side #fnomise{
    background: url(../image/fnomise1.png) no-repeat;
}

.side #fussapaper{
    background: url(../image/fussapaper1.png) no-repeat;
}

.side #fussadog{
    background: url(../image/fussadog1.png) no-repeat;
}

.side #anime{
    background: url(../image/anime1.png) no-repeat;
}

.side #shigotokurashi{
    background: url(../image/sigotokurashi1.png) no-repeat;
}

.side #keieihattatsu{
    background: url(../image/keieihattatsu1.png) no-repeat;
}

.side #syouhinken{
    background: url(../image/syouhinken1.png) no-repeat;
}

.side #kaigishitsu{
    background: url(../image/kaigishitsu2.png) no-repeat;
}

.side #tyushajyo{
    background: url(../image/tyusyajyo2.png) no-repeat;
}

/*** レスポンシブ ***/

@media (max-width: 768px) {

    .side{
        margin: 0 auto;
        width: 100%;
        float: none;
        display: -ms-flexbox; /* IE10 */
        display: -webkit-box; /* Android4.3以下、Safari3.1〜6.0 */
        display: -webkit-flex; /* Safari6.1以降 */
        display: flex;
        margin-top: 0px;
        text-align: center;
    }

    .side ul{
        padding: 16px;
    }

    .side ul:after {
        content:"";
        display: inline-block;
        width: 100%;
        line-height:0;
        height: 0;
    }

    .side li{
        display: inline-block;
    }

    .side li:first-child{
        display: block;
        margin: 10px;
        margin-top: 32px;
    }

}

/* --- トップページ（バナー） --- */

.banner{
    width: 1000px;
    margin-top: 40px;
    margin:0 auto;
}

.banner ul{
    display: -ms-flexbox; /* IE10 */
    display: -webkit-box; /* Android4.3以下、Safari3.1〜6.0 */
    display: -webkit-flex; /* Safari6.1以降 */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    list-style: none;
}

.banner li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: auto;
    box-sizing: border-box;
}

.banner img{
    margin-top: 10px;
    margin-left: 8px;
}

.back{
    padding: 30px;
    background-color: #f8f4e6;
}

/*** レスポンシブ ***/

@media (max-width: 768px) {

    .banner{
        width: 100%;
        text-align: center;
    }

    .banner ul{
        width: 100%;
        display: inline-block;
    }

    .banner li{
        width: auto;
    }

    .banner ul:after {
        content:"";
        display: inline-block;
        width: 100%;
        line-height:0;
        height: 0;
    }

    .banner img{
        margin-top: 20px;

    }
}


/*　　新着情報・お知らせ　　*/

.inner-r,
.inner-l{
   padding: 10px;
}

.inner-l{
    background-color: #f5f5dc;
}

.news-title{
    padding: 10px;
    border-bottom: 3px solid #b79e84;
}

.date{
    float:right;
    font-weight: 100;
}

.inner-r td{
    padding: 10px;
}

.inner-l td{
    padding: 10px;
}

.inner-r img{
    border: 1px solid #dcdcdc;
}

.title-block{
    color: #fff;
    padding: 10px;
    background-color: #b79e84;
    border-radius: 10px;
}

.news{
/*    display: none;*/
}

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

span.first{
    margin-right: 8px;
    padding: 8px;
    border: 1px solid #b79e84;
    border-radius: 3px;
}

span.prev{
    margin-right: 8px;
    padding: 8px;
    border: 1px solid #b79e84;
    border-radius: 3px;
}

span.next{
    margin-left: 8px;
    padding: 8px;
    border: 1px solid #b79e84;
    border-radius: 3px;
}

span.last{
    margin-left: 8px;
    padding: 8px;
    border: 1px solid #b79e84;
    border-radius: 3px;
}

span.current{
    margin-left: 8px;
    padding: 8px;
    background-color: #9acd32;
    color: #fff;
    border-radius: 3px;
    font-weight: bold;
}

span.num{
    margin-left: 8px;
    padding: 8px;
}

span:hover{
    cursor: pointer;
}

.inner-table-m{
    width: 100%;
}

.inner-table-m td{
    vertical-align:top;
}

.inner-ul-m{
    margin: 0;
    list-style: none;
}

.td_l{
    width: 100%;
}

/*** レスポンシブ ***/

@media (max-width: 768px) {

    .inner-r,
    .inner-l{
        max-width: 100%;
    }

    .news-title{
        max-width: 100%;
        font-size: 100%;
        padding: 24px;
    }

    .inner-r td{
        display: block;
        font-size: 90%;
    }

    .inner-l td{
        display: block;
        font-size: 90%;
    }

    .inner-r img{
        max-width: 100%;
    }

    .inner-l img{
        max-width: 100%;
    }

    .title-block{
        font-size:120%;
        border-radius: 0px;
    }

}

/*　　専門家派遣    */
.example{
    border-radius: 10px;
    border: 3px solid #9acd32;
}

.example li{
    padding: 5px;
}

/*　　共済・年金    */
.inner-table table{
    margin-top: 32px;
    border-collapse: separate;
    border-spacing:24px;
}

.inner-table td{
    padding: 24px;
    border-radius: 10px;
}

.inner-table td:first-child{
    text-align: center;
    border: 3px solid #9acd32;
    color: #404040;
}

.inner-table td:nth-child(2){
    font-size: 110%;
    font-weight: bolder;
}

.inner-table a{
    text-decoration: none;
}


/*　　商工会とは　　*/
.inner-txt{
    line-height: 32px;
    padding: 0px 40px;
}

.inner-txt p{
    width: 100%;
}

.inner-txt img{
    margin: 0 auto;
    margin-top: 40px;
    display: block;
}

.about-title{
    padding: 10px;
    margin-top: 32px;
    color: #b79e84;
    border-bottom: 3px dashed #b79e84;
    text-align: center;
}

.inner-dl{
    line-height: 32px;
}

.inner-dl dt{
    padding: 10px;
    font-size: 110%;
    font-weight: bolder;
}

.inner-dl dd{
   padding-right: 40px;
    word-break:break-all; /* urlを折り返してはみ出さないようにする*/
}

.inner-dl img{
    margin: 0 auto;
    margin-top: 40px;
    display: block;
}

.inner-ul{
    padding: 5px;
    line-height: 32px;
}

.inner-ul img{
    margin: 0 auto;
    margin-top: 40px;
    display: block;
}

.inner-ul ul{
    padding: 0;
    margin: 0;
    list-style: none;
}

.inner-ul .question{
    padding: 8px;
    font-size: 110%;
    color: #ff6347;
}

.dwn{
    width: 100%;
    text-align: center;
    margin-top: 48px;
    margin-bottom: 48px;
    border-radius: 10px;
}

.dwn a{
    text-decoration: none;
    padding: 24px;
    font-size: 120%;
    font-weight: bolder;
    background-color: #f5f5dc;
    border-radius: 10px;
}

/*** レスポンシブ ***/

@media (max-width: 768px) {
    .inner-table table{
        max-width: 100%;
        font-size: 90%;
        display: block;
    }

    .inner-table td{
        display: block;
    }

    .inner-txt{
        max-width: 100%;
        padding: 15px;
        font-size: 90%;
    }
    .inner-txt img{
        max-width: 100%;
    }

    .about-title{
        font-size: 100%;
        text-align: center;
    }

    .inner-dl dt{
        font-size: 100%;
    }

    .inner-dl dd{
        font-size: 90%;
        margin-left: 16px;
        padding: 10px;
    }

    .inner-dl img{
        max-width: 100%;
    }

    .inner-ul{
        padding: 10px;
    }

    .inner-ul .question{
        font-size: 100%;
        padding: 24px;
        text-align: center;
    }

    .inner-ul .answer{
        font-size: 90%;
    }

    .inner-ul img{
        max-width: 100%;
    }

    .dwn{
        display: block;
        margin: 0 auto;
        max-width: 90%;
        background-color: #f5f5dc;
    }

    .dwn a{
        font-size: 90%;
        background-color: transparent;
    }
}


/* お問い合わせ（電話番号） */
.box-tel{
    width: 43%;
    padding: 10px;
    margin: 0 auto;
    margin-bottom: 24px;
    display: block;
    text-align: center;
    font-weight: bolder;
    border-radius: 10px;
    border: 4px dotted #9acd32;
}

.box-tel p{
    font-size: 150%;
}

.box-movie{
    width: 65%;
    padding: 10px;
    margin: 0 auto;
    display: block;
    border-radius: 10px;
    border: 4px dotted #9acd32;
}

.shouhinken img{
    margin-bottom: 48px;
}

/*** レスポンシブ ***/

@media (max-width: 768px) {
    .box-tel p{
        font-size: 110%;
    }

    .box-tel .tel{
        font-size: 120%;
    }
}

/* --- お問合せフォーム --- */
.red{
    color: #ff6347;
    font-weight: bolder;
}

.red_u{
    color: #ff6347;
    font-weight: bolder;
    text-decoration: underline;
}

.note{
    color: #ff6347;
}

.note_blue{
    color:#0000ff;
    font-size: 120%;
    font-weight: bolder;
}


.contact-table{
    padding: 40px;
}

.contact-table tr{
    padding: 10px;
}

.contact-table td input{
    padding: 5px;
    font-size: 100%;
    margin-bottom: 16px;
}
.contact-table td textarea{
    padding: 5px;
    font-size: 100%;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.contact-btn input{
    padding: 10px 16px;
    font-size: 110%;
    border: none;
    border-radius: 8px;
    background-color: #87cefa;
    cursor: pointer;
    display: block;
    margin: 0 auto;
    margin-top: 24px;
}

.contact-btn input:hover{
    opacity: 0.5;
}

/*** レスポンシブ ***/

@media (max-width: 768px) {
    .contact-table{
        max-width: 100%;
        font-size: 80%;
    }

    .contact-table td input{
        width: 80%;
    }

    .contact-table td textarea{
        width: 80%;
    }

    .inner-txt ul{
        font-size: 90%;
    }
}

/* --- リンク集 --- */
.link{
    list-style:inside;
}

/* --- 追加ページ --- */
.box_tbl{
    display: block;
    margin: 24px 0;
}

.tbl_border{
    border-collapse: collapse;
    margin: 0 auto;
}

.tbl_border td{
    padding: 12px 8px;
    border: 1px solid #cfcfcf;
}

.tbl_border .td_bgc{
    padding: 16px;
    background-color: #f5f5dc;
}

.box_img{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}

.box_img figure{
    margin: 16px;
}

.box_img figcaption{
    text-align: center;
}

iframe{
    display: block;
    margin: auto;
}

/*** レスポンシブ ***/

@media (max-width: 768px) {
    iframe{
        max-width: 100%;
    }

}

/*　　新型コロナウイルス感染症のアンケートについて　　*/
.questionnaire table{
    margin-bottom: 40px;
}

.questionnaire th{
    padding: 0;
    vertical-align: top;
    text-align: left;
    font-weight: 100;
}

.questionnaire td{
    padding: 0;
}

.questionnaire a {
    word-break: break-all;
}

.questionnaire .second-th{
    width: 10%;
    min-width: 72px;
}

/* ===============================================
#　フッタ
=============================================== */


/* --- フッタ全体 --- */

footer {
    width: 100%;
    padding: 20px 0px 20px;
    background: #87cefa;
    overflow: hidden;
}

.footer_wapper{
    width: 1000px;
    margin: 0 auto;
}

.tbl_footer{
    width: 28%;
    float: right;
}

.td_s{
    text-align: left;
}

.td_img{
    padding: 5px;
}

.inner-box{
    width: 1000px;
    display: -ms-flexbox; /* IE10 */
    display: -webkit-box; /* Android4.3以下、Safari3.1〜6.0 */
    display: -webkit-flex; /* Safari6.1以降 */
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
}

/* --- 住所--- */
.adress{
    width: 100%;
    flex: 1;
    margin: 0 auto;
    line-height: 18px;
    color: #fff;
    line-height: 24px;
}

/* --- メニュー --- */
.menu-box{
    flex: 1 1 2;
}

.menu-box h3{
    color: #fff;
    border-bottom: 2px solid #fff;
}

.menu-box ul{
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 32px;

}

.menu-box a{
    text-decoration: none;
    color: #fff;
}

/* --- コピーライト --- */

.foot-a{
    font-size: 80%;
}

.foot-a a{
    color: #fff;
    text-decoration: none;
}

.copyright {
    font-style: normal;
    /* 文字のスタイル */
    font-size: 80%;
    color: #fff;
    /* 文字色 */
    text-align: center;
    margin-top: 40px;
    clear: both;
}

/*** レスポンシブ ***/

@media (max-width: 768px) {
    footer {
        width: 100%;
        padding: 0;
    }

    .footer_wapper{
        max-width: 100%;
    }

    .tbl_footer{
        width: 70%;
        margin: auto;
        text-align: right;
    }

    .td_img img{
        padding-top: 8px;
        width: 50px;
        height: 50px;
    }


    .foot-a{
        padding: 5px;
/*        text-align: center;*/
    }

    .foot-a a{
        float: none;
        font-size: 70%;
    }

    .copyright {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .inner-box{
        width: 100%;
        flex-direction: column;
    }

    .adress{
        padding: 10px;
    }

    .menu-box{
        padding: 10px;
        margin-top: 32px;
    }
}


/* ===============================================
#　TOPに戻るボタン
=============================================== */

#pageTop{
    width: 1000px;
    display: block;
    margin: 0 auto;
    margin-top: 40px;
    margin-bottom: 40px;
}

#pageTop a {
    display: block;
    text-decoration: none;
    text-align: center;
    padding: 10px;
    font-weight: bolder;
    color: #fff;
    background-color: #b79e84;
    border-radius: 10px;
}

#pageTop a:hover {
    text-decoration: none;
    opacity: 0.7;
}

/*** レスポンシブ ***/

@media (max-width: 768px) {
    #pageTop {
        width: 80%;
    }
}