@charset "UTF-8";

/*======================================================
下層ページ共通の設定（コンポーネントはcomponent.cssにて設定）
======================================================*/

/*======================================================
各ページ<h1>部分 
======================================================*/

.page-big-title img{
    width:140px;
    text-align: center;
}
@media(min-width:768px){
    .page-big-title img{
        width:180px;
    }
}

/* 白い街のイラスト */
.page-big-title{
    background-image:url(../img/header/bg-page-header-town.png);
    background-position:center bottom;
    background-repeat: repeat-x;
    background-size:contain;
    padding:20px 0;
}

@media(min-width:768px){
    .page-big-title{
        min-height:260px;
        padding:40px 0;
    }
}

/* 第2階層ごとに背景色差し替え
第2階層のスラッグ名で振り分け
第3階層以下はスラッグ名+childで振り分け（functions.phpでbodyにクラス名をつける設定済）*/
.page-big-title-about{background-color:#62B5B2;}/*社協って？ */
.page-big-title-service{background-color:#7AC67B;}/*事業一覧*/
.page-big-title-consul{background-color:#F3C517;}/*相談したい*/
.page-big-title-active{background-color:#F4A580;}/*地域で活動したい*/
.page-big-title-know{background-color:#F4B3C2;}/*知りたい*/
.page-big-title-donation{background-color:#986FAD;}/*寄付したい*/
.page-big-title-support{background-color:#986FAD;}/*社会福祉事業所への支援*/
.page-big-title-website{background-color:#3551A2;}/*ホームページについて*/
.page-big-title-other{background-color:#3551A2;}/*その他*/


/*======================================================
第2階層
======================================================*/

/*------------------------------------------------------
第2階層トップ　左にテキスト、右に画像（テキストは一部画像にかぶせる）
------------------------------------------------------*/

.page-top-wrapper{
    background:#f2f2f2;
    margin-bottom:2em;
}

.page-top-text p{
    font-size: 1.8rem;
    background: rgba(255, 255, 255, 0.8);
    padding:50px 20px;
    box-shadow: 4px 4px 4px rgba(70, 70, 70, 0.3);
    margin-bottom:20px;
}

/* PCの場合は絶対配置で */
@media(min-width:768px){
    .page-top-inner{
        position:relative;
        min-height:360px;
    }
    .page-top-img{
        position:absolute;
        max-width:660px;
        top:50%;
        transform:translateY(-50%);
        right:50px;
    }
    .page-top-text{
        max-width:540px;
        position:absolute;
        top:50%;
        left:0;
        transform:translateY(-50%);
        z-index:1; 
    }
}
@media(max-width:767px){
    .page-top-img{
        position:static;
    }
    .page-top-text{
        position: static;
    }
}






/*------------------------------------------------------
第3階層
------------------------------------------------------*/


/*------------------------------------------------------
第4階層
------------------------------------------------------*/






/*======================================================
リスト（下層へのナビゲーションボタン、ダウンロードアイコンのボタン）
======================================================*/

/*------------------------------------------------------
第3階層目次リスト　
同じ形式でダウンロードアイコンの場合は.page-list-dlを使用
------------------------------------------------------*/

.page-list,
.page-list-dl {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap:2%;
}

.page-list li,
.page-list-dl li{
    flex-basis:48%;
    margin-bottom:2em;
    display: block;
}

.page-list li a,
.page-list-dl li a{
    display: block;
    display: flex;
    align-items: center;
    padding:0 0.75em;
    height:90px;
    line-height: 1.5em;
    text-decoration:none;
}

@media(max-width:767px){
    .page-list li a,
    .page-list-dl li a{
        height:100px;
    }   
}

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

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

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

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

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

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

/* hover時　デフォルト */

.page-list li a:hover,
.page-list-dl li a:hover{
    background:#f2f2f2;
    color:#333;
    border-radius:20px;
}

/* hover時の色を変更する <ul>にhover-○○○のクラスを指定 */

.hover-silver li a:hover{background:#82BAF2;}
.hover-handicap li a:hover{background:#6EB7A9;}
.hover-child li a:hover{background:#F7BA8D;}
.hover-life li a:hover{background:#F4C0C0;}

/*------------------------------------------------------
第4階層目次リスト　
------------------------------------------------------*/