@charset "UTF-8";

/*======================================================
「社協って？」の設定
======================================================*/

.bg-right{
    background-image: url(../img/about/bg-right.jpg);
    background-repeat: no-repeat;
    background-size: 250px;
    background-position: right -100px top;
}

.bg-left{
    background-image: url(../img/about/bg-left.jpg);
    background-repeat: no-repeat;
    background-size: 250px;
    background-position: left -50px top;
}


/*------------------------------------------------------
●印
------------------------------------------------------*/

.ico-circle-before{
    position:relative;
    padding-left:1.5em;
}

.ico-circle-before::before{
    font-family:"Font Awesome 6 Pro";
    content:"\f111";
    color:#5F9186;
    font-size:80%;
    position:absolute;
    top:50%;
    left:10px;
    transform:translateY(-50%);
}

.title-bg-about{
    background: #DEEFEB;
}

/*------------------------------------------------------
その他見出し
------------------------------------------------------*/

h3.page-title-about2{
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    background: #DEEFEB;
    padding: 0.5em 1em;
}

h3.title-bg-about2{
    background: #F5F5F5;
}


/*------------------------------------------------------
枠
------------------------------------------------------*/

.box-line-about{
    border: 1px solid #5F9186;
    background: #fff;
}
.box-line-excepttop{
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
}

/*------------------------------------------------------
見出し
------------------------------------------------------*/

.title-underline-about{
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    padding:0.5em;
    border-bottom: 4px solid #5F9186;
}


.ico-h3about-before{
    position:relative;
    padding-left:3em;
}


.ico-h3about-before::before{
    content: url('../img/about/ico-h3.png');
    font-size:50%;
    position:absolute;
    top:60%;
    left:0;
    transform:translateY(-50%);
}

/*------------------------------------------------------
角丸ボーダー・ボックスシャドウ・丸矢印付（下層ページ目次でも使用）
------------------------------------------------------*/

/* 丸に三角アイコン */
.btn-radius-corner{
    text-align:center;
    border:transparent;
    background: transparent;
    outline:none;
    display: block;
    width:100%;
}

.btn-radius-corner a{
    display: block;
    display: flex;
    align-items: center;
    padding:1.5em 1em;
    /* padding:10px 20px; */
    border:1px solid #ccc;
    border-radius:20px;
    box-shadow: 3px 3px 3px rgba(3, 3, 3, 0.2);
    background: #fff;
    font-size:1.6rem;
}

/* ダウンロードアイコン */
.btn-radius-corner-dl{
    text-align:center;
    border:transparent;
    background: transparent;
    outline:none;
    display: block;
    width:100%;
}

.btn-radius-corner-dl a{
    display: block;
    display: flex;
    align-items: center;
    padding:1.5em 1em;
    /* padding:10px 20px; */
    border:1px solid #ccc;
    border-radius:20px;
    box-shadow: 3px 3px 3px rgba(3, 3, 3, 0.2);
    background: #fff;
    font-size:1.6rem;
}
.btn-radius-corner-dl a:hover{
    //background:#D6EBE8;
    color: #333;
}

@media(max-width:767px){
    .list-radius a{
        height:100px;
    }
}

@media(max-width:479px){
    .list-radius{
        flex-basis: 100%;
    }
    .list-radius a{
        height:60px;
    }
}

/* component.cssのlist-radiusと同じもの
 <ul class="page-list">とする事で子要素の<li>に適用される。*/

 .list-radius{
    border-radius:10px;
    border:1px solid #ccc;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

/* ico-triangle-circle-right-before::beforeと同じ */

.btn-radius-corner a::before{
    font-family:"Font Awesome 6 Pro";
    content:"\f330";
    margin-right:0.5em;
    font-weight: 400;
    color:#1064BB;
}

.btn-radius-corner-dl a::before{
    font-family:"Font Awesome 6 Pro";
    content:"\e094";
    margin-right:0.5em;
    font-weight: 400;
    color:#1064BB;
}

/* hover時 */
.btn-radius-corner a:hover:before{
    //background:#D6EBE8;
    color:#333;
}

.btn-radius-corner-dl a:hover:before{
    //background:#D6EBE8;
    color:#333;
}


/*===========
組織図　.scroll-box
===========*/
.scroll-box {
  overflow-x: auto;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}
.scroll-box div img {
  max-width: 100%;
  min-width: 600px;
  vertical-align: top;
}

/*===========
組織図　scrollbar
===========*/
/*スクロールバー全体の高さ*/
.scroll-box::-webkit-scrollbar {
  height: 4px;
}
/*スクロールバー全体の背景*/
.scroll-box::-webkit-scrollbar-track {
  background: #eee;
}
/*スクロールバーの動く部分*/
.scroll-box::-webkit-scrollbar-thumb {
  background: #aaa;
  border: none;
}
/*スクロールバーの動く部分のホバー（マウスオーバー）*/
.scroll-box::-webkit-scrollbar-thumb:hover {
  background: #999;
}


.yoko-scroll div img{
    max-width: 100px;
    display: block;
    margin: 10px auto;
}


/*===========
各区社会協議会
===========*/
.title-area {
    padding:15px 10px 15px 80px;
    margin-bottom:30px;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height:1.8;
    background-image:url(../img/about/ico-area.png);
    background-repeat: no-repeat;
    background-size:contain;
    background-position: top left;
}

.button-center{
    max-width: 500px;
    margin: 0 auto;
}

.button-left{
    max-width: 500px;
    margin: 0 auto 0 0;
}


@media(min-width:768px){
    /* 事業所の概要 */
    .jimusho-intro-box {
        padding-top: 8%;
    }
    img.img-map {
        float:right;
        margin:0 0 0 20px;
        max-width:50%;
    }
}

@media(max-width:767px){
    /* 事業所の概要 */
    .jimusho-intro-box {
        padding-top: 0;
    }
    img.img-map {
        float:none !important;
        clear: both !important;
        margin:0 auto 20px;
        display: block;
        max-width:400px;
        width:calc(100% - 60px);
    }
    /* 事業内容 */
    img.img-jigyo01, img.img-jigyo02 {
        float:none;
        display: block;
        margin:0 auto 20px;
        max-width:300px;
    }
}

@media(min-width:801px){
    /* 事業内容 */
    .jigyo-img-box {
        width:50%;
        float:left;
    }
    .jigyo-detail-box {
        width:50%;
        float:right;
    }
    .jigyo-img2-box {
        width:25%;
        float:left;
    }
    .jigyo-detail2-box {
        width:75%;
        float:right;
    }

    img.img-jigyo01, img.img-jigyo02 {
        float:left;
        margin:0 20px 0 0;
        width:calc(50% - 20px);
    }
    img.img-jigyo03 {
        margin:0 20px 0 0;
        width:calc(100% - 20px);

    }
}

@media(min-width:960px){
    /* 事業内容 */
    img.img-jigyo01, img.img-jigyo02 {
        float:left;
        margin:0 20px 0 0;
        max-width:calc(50% - 20px);
    }
}

@media(max-width:800px){
    /* 事業内容 */
    .jigyo-img-box {
        width:40%;
        float:left;
    }
    .jigyo-detail-box {
        width:60%;
        float:right;
    }
    .jigyo-img2-box {
        width:40%;
        float:left;
    }
    .jigyo-detail2-box {
        width:60%;
        float:right;
    }

    img.img-jigyo01, img.img-jigyo02 {
        float:none;
        margin:0 0 10px 0;
        width:calc(100% - 20px);
    }
    img.img-jigyo03 {
        float:none;
        margin:0 0 10px 0;
        width:calc(100% - 20px);

    }
}
@media(max-width:640px){
    /* 事業内容 */
    .jigyo-img-box, .jigyo-img2-box {
        width:100%;
        float:none;
    }
    .jigyo-detail-box, .jigyo-detail2-box {
        width:100%;
        float:none;
    }
    img.img-jigyo01, img.img-jigyo02, img.img-jigyo03 {
        display: block;
        margin:0 auto 10px;
        max-width:300px;
        width:80%;
    }
}

/* パンフレットbox */
.hakkou-box {
    display: flex;
    flex-wrap: wrap;
}

.pamph-box {
    width:calc(100% / 3);
    text-align: center;
    margin-bottom:20px;
}

.pamph-box4 {
    width:calc(100% / 4 - 20px);
    text-align: center;
    margin-bottom:20px;
    margin-right:20px;
}


@media(max-width:640px){
    .pamph-box {
        width:50%;
    }
    .pamph-box4 {
        width:45%;
        margin-right:15px;
    }

}

.pamph-box img {
    max-width:calc(100% - 20px);
    margin:0 auto 10px;
    display: block;
    max-height:300px;
    width:auto;
}

/* 若松区・八幡東区対応：ぷちぼBOX吹き出し */
.puchibo-box {
    background:url(../img/about/wakamatsu/img-puchibo.png) no-repeat right center;
    background-size: 100px auto;
}
.puchibo-box .fukidashi-box {
    position: relative;
    display: block;
    margin: 1.5em 0;
    padding: 7px 10px;
    width:calc(100% - 150px);
    color: #555;
    font-size: 16px;
    background: #e0edff;
    border-radius: 15px;
}

.fukidashi-box:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -15px;
    border: 15px solid transparent;
    border-left: 15px solid #e0edff;
}

.fukidashi-box p {
    padding:20px;
    text-align: center;
}