@charset "utf-8";
/********************************/
/*          スライダー          */
/********************************/
.slider-wrapper {
    overflow: hidden;
}
.slider {
    position: relative;
    overflow: visible !important;
}
@media (min-width: 1000px){
.slider {
    left: calc(((100vw - 1000px) / 2) - 1000px - 20px - 8px);
}
.slide {
    width: 1000px !important;
    height: 500px;
}
}
@media (max-width: 999px){
.slider {
    left: calc(((100vw - 80vw) / 2) - 80vw - 10px - 8px);
}
.slide {
    width: 80vw !important;
    height: 300px;
}
.slide img {
    height: 300px;
    width: 100%;
    object-fit: cover;
}
}
.bx-wrapper {
    box-shadow: none;
    border: none;
    margin: 0;
}
/********************************/
/*            メイン            */
/********************************/
main {
    padding-top: 40px;
    padding-bottom: 50px;
    margin: 0 auto;
}
@media (min-width: 1000px){
main {
    width: 100%;
}
}
@media (max-width: 999px){
main {
    width: 95%;
}
}
/********************************/
/*      マイナンバーカード      */
/********************************/
.cs_mynumber {
    margin: 0 auto 50px;
}
@media (min-width: 900px){
.cs_mynumber {
    width: 900px;
}
.cs_mynumber a {
/*
    background-image: url(../images/icon_mynumber.png)
                     ,url(../images/icon_mynachan.png);
    background-repeat: no-repeat
                      ,no-repeat;
    background-position: left 60px bottom
                        ,right 100px center;
*/
    background-image: url(../images/icon_mynumber.png);
    background-repeat: no-repeat;
    background-position: left 60px bottom;
}
}
@media (max-width: 899px){
.cs_mynumber {
    width: 90%;
}
}
.cs_mynumber a:last-child {
    text-decoration: none;
    display: block;
    width: 100%;
    background-color: var(--numbaryellow);
    padding: 30px 0 25px;
    border-radius: 60px;
    text-align: center;
    font-size: 2.0rem;
    font-weight: 900;
}
.cs_mynumber a:link,
.cs_mynumber a:visited {
    color: var(--black);
    text-shadow: 3px 3px var(--white);
}
/********************************/
/*      インフォメーション      */
/********************************/
.cs_info {
    padding-top: 30px;
    padding-bottom: 50px;
}
.cs_info .cs_main_h3 {
    background-image: url(../images/icon_news.png);
}
.cs_info .cs_main_h3 span {
    color: var(--skyblue);
}
.cs_info dl {
    margin-bottom: 50px;
    font-size: 1.1rem;
    display: flex;
    flex-flow: row wrap;;
}
@media (min-width: 750px){
.cs_info dl {
    width: 750px;
}
}
@media (max-width: 749px){
.cs_info dl {
    width: 95%;
}
}
.cs_info dl {
    margin-left: auto;
    margin-right: auto;
}
.cs_info dl dt {
    width: 110px;
    margin-bottom: 5px;
    white-space: nowrap
}
.cs_info dl dd {
    width: calc(100% - 110px);
    margin-bottom: 25px;
}
/********************************/
/*           新着情報           */
/********************************/
.cs_news {
    margin-top: 50px;
    padding-bottom: 20px;
}
.cs_news .cs_main_h3 {
    background-image: url(../images/icon_news.png);
}
.cs_news .cs_main_h3 span {
    color: var(--skyblue);
}
.cs_news dl {
    margin-bottom: 50px;
    font-size: 1.1rem;
}
@media (min-width: 700px){
.cs_news dl {
    width: 700px;
    margin-left: auto;
    margin-right: auto;
}
}
@media (max-width: 699px){
.cs_news dl {
    width: 100%;
}
}
.cs_news dl dt {
    margin-bottom: 5px;
}
.cs_news dl dt span {
    display: inline-block;
    padding: 7px 10px 3px 10px;
}
.cs_news dl dd {
    margin-bottom: 25px;
}
/********************************/
/*         ＴＯＰ見出し         */
/********************************/
.cs_main_h3 {
    background-repeat: no-repeat;
    background-position: center top;
    font-family: "Rounded M+ 1c", sans-serif;
    padding-top: 75px;
    margin-bottom: 25px;
    text-align: center;
    color: var(--gray);
    font-size: 1.6rem;
    letter-spacing: 0.2em;
}
.cs_main_h3 span {
    font-size: 1.2rem;
}
/********************************/
/*          もっと見る          */
/********************************/
.cs_more {
    width: 260px;
    margin: 0 auto 50px;
}
.cs_more a {
    text-decoration: none;
    display: block;
    width: 100%;
    background-color: var(--skyblue);
    padding: 20px 0 20px;
    border-radius: 40px;
    text-align: center;
    font-size: 1.0rem;
    font-weight: 200;
}
.cs_more a:link,
.cs_more a:visited {
    color: var(--black);
}
/********************************/
/*        国保連合会とは        */
/********************************/
.cs_kokuhoren {
    width: 100%;
    background-color: var(--lightpink);
    padding: 100px 0;
}
.cs_kokuhoren h3 {
    background-image: url(../images/icon_h3_pink.png);
}
.cs_kokuhoren h3 span {
    color: var(--pink);
}
.cs_kokuhoren > p {
    text-align: center;
    margin-bottom: 15px;
}
.cs_kokuhoren > p img {
    width: 1000px;
    height: 300px;
    object-fit: cover;
    border-radius: 20px;
}
.cs_kokuhoren > div {
    margin: 0 auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
@media (min-width: 1000px){
.cs_kokuhoren > div {
    width: 1000px;
}
}
@media (max-width: 999px){
.cs_kokuhoren > div {
    width: 95%;
}
}
.cs_kokuhoren > div p img {
    border-radius: 20px;
}
@media (min-width: 450px){
.cs_kokuhoren > div p img {
    width: 450px;
    height: 250px;
    object-fit: cover;
}
}
@media (max-width: 449px){
.cs_kokuhoren > div p img {
    width: 100%;
}
}
.cs_kokuhoren > div > div {
    padding-top: 20px;
}
@media (min-width: 500px){
.cs_kokuhoren > div > div {
    width: 500px;
}
}
@media (max-width: 499px){
.cs_kokuhoren > div > div {
    width: 100%;
}
}
.cs_kokuhoren > div > div p {
    margin-bottom: 30px;
}
/********************************/
/*            広報誌            */
/********************************/
.cs_magazine {
    margin: 50px auto 0;
}
@media (min-width: 900px){
.cs_magazine {
    width: 900px;
}
}
@media (max-width: 899px){
.cs_magazine {
    width: 90%;
}
}
.cs_magazine a {
    text-decoration: none;
    display: block;
    width: 100%;
    background-color: var(--lightgreen);
    padding: 30px 0 25px;
    border-radius: 60px;
    text-align: center;
    font-size: 2.0rem;
    font-weight: 900;
}
.cs_magazine a:link,
.cs_magazine a:visited {
    color: var(--black);
    text-shadow: 3px 3px var(--white);
}
/********************************/
/*        こんなときには        */
/********************************/
.cs_trouble {
    padding: 100px 0 50px;
}
.cs_trouble h3 {
    background-image: url(../images/icon_h3_white.png);
    margin-bottom: 50px;
}
.cs_trouble h3 span {
    color: var(--green);
}
.cs_trouble_flex {
    margin: 0 auto;
}
@media (min-width: 1000px){
.cs_trouble_flex {
    width: 1000px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
}
@media (max-width: 999px){
.cs_trouble_flex {
    width: 95%;
}
}
.cs_trouble_flex > a {
    display: block;
    text-decoration: none;
    font-family: "Rounded M+ 1c", sans-serif;
    font-size: 2.0rem;
    font-weight: 200;
    border-radius: 20px;
    margin-bottom: 50px;
}
.cs_trouble_service > a {
    padding: 70px 0 70px 40px;
}
@media (min-width: 475px){
.cs_trouble_service > a,
.cs_trouble_etc > a,
.cs_trouble_group > a {
    width: 475px;
}
}
@media (max-width: 474px){
.cs_trouble_service > a,
.cs_trouble_etc > a,
.cs_trouble_group > a {
    width: 100%;
}
.cs_trouble_service {
    text-shadow: 
        var(--white) 2px  0px, var(--white) -2px  0px,
        var(--white) 0px -2px, var(--white)  0px  2px,
        var(--white) 2px  2px, var(--white) -2px  2px,
        var(--white) 2px -2px, var(--white) -2px -2px,
        var(--white) 1px  2px, var(--white) -1px  2px,
        var(--white) 1px -2px, var(--white) -1px -2px,
        var(--white) 2px  1px, var(--white) -2px  1px,
        var(--white) 2px -1px, var(--white) -2px -1px;
}
}
.cs_trouble_flex > a:link,
.cs_trouble_flex > a:visited {
    color: var(--gray);
}
.cs_trouble_accident {
    border: solid 5px var(--green);
    background-image: url(../images/button_accident.png);
    background-repeat: no-repeat;
    background-position: right 30px center;
}
.cs_trouble_contact {
    border: solid 5px var(--yellow);
    background-image: url(../images/button_contact.png);
    background-repeat: no-repeat;
    background-position: right 10px center;
}
.cs_trouble_recruit,
.cs_trouble_etc {
    margin-bottom: 0px;
}
.cs_trouble_recruit > a {
    position: relative;
    width: 310px;
    text-align: center;
    padding: 50px 0 80px;
    margin-left: auto;
    margin-right: auto;
}
.cs_trouble_staff {
    background-color: var(--skyblue);
}
.cs_trouble_student {
    background-color: var(--trueyellow);
}
.cs_trouble_worker {
    background-color: var(--green);
}
.cs_trouble_recruit > a > span {
    display: block;
    font-size: 1.0rem;
    width: 250px;
}
.cs_trouble_txt {
    text-align: left;
    min-height: 100px;
    margin: 30px auto 0;
}
.cs_trouble_button {
    position: absolute;
    font-family: sans-serif;
    color: var(--black);
    background-color: var(--white);
    font-weight: 200;
    left: 30px;
    bottom: 30px;
    padding: 10px 0;
    border-radius: 40px;
}
.cs_trouble_button:after {
    position: absolute;
    content: "＞";
    right: 15px;
    top: 10px;
}
/*
.cs_trouble_staff .cs_trouble_button {
    color: var(--skyblue);
}
.cs_trouble_worker .cs_trouble_button {
    color: var(--green);
}
*/
.cs_trouble_etc > a {
    color: var(--white) !important;
    background-color: var(--blue);
}
.cs_trouble_etc > a {
    padding: 20px 25px 20px 0;
    text-align: center;
    background-image: url(../images/icon_arrow.png);
    background-repeat: no-repeat;
    background-size: 35px;
    background-position: right 15px center;
}
.cs_trouble_group > a {
    text-align: center;
}
.cs_trouble_kyogikai {
    background-color: var(--lightgreen);
    padding: 95px 0 95px;
}
.cs_trouble_nadesiko {
    background-color: var(--pink);
    padding: 70px 0 70px;
}
/********************************/
/*            リンク            */
/********************************/
@media (min-width: 1000px){
.cs_link {
    width: 1000px;
    margin: 0 auto;
}
}
@media (max-width: 999px){
.cs_link {
    width: 100%;
}
}
.cs_link div {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
}
.cs_link div a {
    display: block;
}
@media (min-width: 431px){
.cs_link div a {
    margin: 0 25px 30px;
}
}
@media (max-width: 430px){
.cs_link div a {
    margin: 0 5px 10px;
}
.cs_link div a{
    width: calc(50% - 10px);
}
.cs_link div a img {
    width: 100%;
}
}