@charset "UTF-8";

/*
コンポーネント
*/

/*======================================================
見出し
======================================================*/

/*------------------------------------------------------
ページタイトル（ページトップ・下にドットのタイトル）
------------------------------------------------------*/

.page-title{
    font-size: clamp(2.0 rem, 4vw, 3.0rem);
    position: relative;
    margin-bottom:1em;
    text-align: center;
    margin-bottom:80px;
}

@media(max-width:767px){
    .page-title{
        margin:20px 0 50px 0;
    }
}

.page-title::after{
    border-bottom: 15px dotted #F4A580;
    content: "";
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
}

.page-title-about::after{border-color: #62B5B2;}/*社協って？*/
.page-title-service::after{border-color: #7AC67B;}/*事業一覧*/
.page-title-consul::after{border-color: #F3C517;}/*相談したい*/
.page-title-active::after{border-color: #F4A580;}/*地域で活動したい*/
.page-title-know::after{border-color: #F4B3C2;}/*知りたい*/
.page-title-donation::after{border-color: #986FAD;}/*寄付したい*/
.page-title-other::after{border-color: #3551A2;}/*その他*/


/*------------------------------------------------------
ページタイトル（ページタイトルの下の横にボーダー）
------------------------------------------------------*/
.title-border-center{
    display:flex;
    align-items:center;
    margin-bottom:3em;
}

.title-border-center::before,
.title-border-center::after{
    content:"";
    height:3px;
    flex-grow: 1;
    background:#21937D;
}

.title-border-center::before{
    margin-right:1em;
}

.title-border-center::after{
    margin-left:1em;
}

/* 階層ごとにボーダーの色を変える */

/* 社協って？ */
.title-border-center-about::before,
.title-border-center-about::after{
    background: #62B5B2;
}
/* 事業一覧 */
.title-border-center-service::before,
.title-border-center-service::after{
    background: #F4A580;
}
/* 相談したい */
.title-border-center-consul::before,
.title-border-center-consul::after{
    background: #F3C517;
}
/* 地域で活動したい */
.title-border-center-active::before,
.title-border-center-active::after{
    background: #F4A580;
}
/* 知りたい */
.title-border-center-know::before,
.title-border-center-know::after{
    background: #F4B3C2;
}
/* 寄付したい */
.title-border-center-donation::before,
.title-border-center-donation::after{
    background: #986FAD;
}
/* その他 */
.title-border-center-other::before,
.title-border-center-other::after{
    background: #3551A2;
}
/*------------------------------------------------------
TOPページなど　下に矢印つきボーダー
------------------------------------------------------*/

.title-border-arrow{
    font-size: clamp(1.6rem, 2.2vw, 1.8rem);
    font-weight: bold;
    padding-bottom:10px;
    position:relative;
    margin:0 auto 40px;
    display: inline-block;
    border-bottom:2px solid #999;
    padding-bottom:10px;
}

.title-border-arrow::after{
    border: 10px solid transparent;
        border-top-color: #999;
        border-bottom-width: 0;
        bottom: -10px;
        content: "";
        display: block;
        left: 50%;
        position: absolute;
        width: 0;
}

/* 背景を白にする場合 */
.title-border-arrow-bg-white{
    background: #fff;
    padding:10px 50px;
}

@media(max-width:767px){
    .title-border-arrow-bg-white{
        width:100%;
    }
}

/* 色違い設定 */
.title-border-arrow-green{
    border-color:#83CBD1;
}
.title-border-arrow-green::after{
    border-top-color:#83CBD1;
}

.title-border-arrow-pink{
    border-color:#E68B8B;
}
.title-border-arrow-pink::after{
    border-top-color:#E68B8B;
}


@media(min-width:768px){
    .title-border-arrow{
        text-align: center;
    }
}

/*------------------------------------------------------
角丸設定
------------------------------------------------------*/

.radius10{border-radius:10px;}
.radius20{border-radius:20px;}
.radius30{border-radius:30px;}
.radius40{border-radius:40px;}

/*------------------------------------------------------
セクションタイトル　下に短いボーダー
------------------------------------------------------*/

.title-short-border{
    margin-bottom: 40px; 
    text-align: center;
}

.title-short-border p{    
    display:inline-block;
    margin: 0 auto;
    text-align: center;
    line-height: 1.5em;
}

.title-short-border span{
    font-size: clamp(1.6rem, 2.2vw, 1.8rem);
    border-bottom:4px solid #999;
    padding:10px 10px;
}

.title-short-border-pink span{
    border-color:#E68B8B !important;
}

.title-short-border-blue span{
    border-color:#589AAA;
}

/*------------------------------------------------------
セクションタイトル　第4階層ページタイトル　背景色あり
------------------------------------------------------*/

/* 背景に色付きのタイトル・背景色の色変更は、bg-color-スラッグ名で指定（color.cssにて） */

.title-bg{
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    background:#F5F5F5;
    padding:0.5em;
    margin-bottom:2em;
}


/* 下に長いボーダーのタイトル　ライン高さ5px（主にh3・セクションタイトル）↓↓細いラインは下に別途指定あり↓↓ */

.title-underline{
    border-bottom:5px solid #ccc;
    padding-bottom:0.75em;
    margin-bottom:1em;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
}

/* ボーダーの色変更 */

.title-underline-about{border-color: #62B5B2;}/*社協って？*/
.title-underline-service{border-color: #7AC67B;}/*事業一覧*/
.title-underline-consul{border-color: #F3C517;}/*相談したい*/
.title-underline-active{border-color: #F4A580;}/*地域で活動したい*/
.title-underline-know{border-color: #F4B3C2;}/*知りたい*/
.title-underline-donation{border-color: #986FAD;}/*寄付したい*/
.title-underline-other{border-color: #3551A2;}/*その他*/


/*------------------------------------------------------
項目タイトル　下にアンダーライン（主にh4）
------------------------------------------------------*/

/* 下に長いボーダーのタイトル　幅3pxの細めのライン（主にh4・項目タイトル） */
.title-underline-slim{
    border-bottom:solid 3px #ccc;
    padding-bottom:0.75em;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    }


/*======================================================
ボックスシャドウ
======================================================*/

.box-shadow{
    box-shadow: 4px 4px 4px rgba(70, 70, 70, 0.3);
}

/*======================================================
リスト表示テキストのみ・ボーダー区切り＜新着情報等＞
======================================================*/

.c-list-text li{
    padding:0.5em 0;
}

.c-list-text li:not(:last-of-type){
    border-bottom: 1px solid #ccc;
}

/* <ul>ではなく<dl>の場合 */
dl.c-list-text{
    padding:0.5em 0;
}

dl.c-list-text:not(:last-of-type){
    border-bottom: 1px solid #ccc;
}
/* 日付の右にマージン設定 */
dl.c-list-text dt{
    width: 14%;
}
/* カテゴリーの配置 */
dl.c-list-text .c-list-cat{
    font-size:1.1rem;
    padding:1px 6px;
    border-radius: 2px;
    display: inline-block;
    margin-left:auto;
}

.c-list-cat-wrapper{
    margin-left:auto;
}

@media(max-width:767px){
    dl.c-list-text dt{
        width:100%;
    }
    dl.c-list-text dd{
        width: 100%;
    }
    dl.c-list-text .c-list-cat{
        display: block;
        width:100%;
        text-align: center;
        max-width:130px;
        margin-right:auto;
        margin-left:0;
    }

}
/*======================================================
カード型レイアウト
======================================================*/

.c-card-box{
    background:#fff;
    padding:10px 20px;
    margin-bottom:20px;
    flex-direction: column;
    width: 100%;
}

.c-card-box img{
    border-radius: 20px;
}

.c-card-date{
    font-weight: bold;
}


/* カテゴリー名　 地域活動レポートのみで使用 */

.c-card-cat-report{
    margin-top:1em;
}
.c-card-cat-report,.c-card-cat-report a{
    color:#fff;
    font-size:1.3rem;
    text-align: center;
    border-radius: 8px;
    /* margin-top:0.8em; */
    display: block;
    padding:2px 0;
    text-decoration: none;
}

.c-card-cat-report a:link
.c-card-cat-report a:visited{
    text-decoration: none;
}

/* アニメーション */

.c-card-img{
    text-align: center;
    border-radius:20px;
    overflow: hidden;
    height:160px;
}

.c-card-img img{
    /* height:160px; */
    width:100%;
    min-height:160px;
}

/* @media(max-width:767px){    
    .c-card-img img{
        width:100%;
        height:auto;
    }
} */

/* .c-card-img a{
    display: block;
    border-radius: 20px;    
} */

.c-card-img a:hover{
    transition:transform .3s;
    overflow:hidden;
}

.c-card-img a:hover img{
    transform:scale(1.1);
    border-radius: 20px;
}


/*------------------------------------------------------
カード型レイアウト（丸ボタン付）
------------------------------------------------------*/

.btn-card-wrapper{
    position:relative;
    margin-bottom:40px;
}

.btn-card-wrapper img{
    border-radius: 20px;
}

.btn-card-wrapper .btn-radius-shadow{
    margin:auto;
    position:absolute;
    bottom:-20px;
    left:50%;
    transform:translateX(-50%);  
    width:60%;
    color:#333;
    cursor: pointer;
}

@media(max-width:767px){
    .btn-card-wrapper .btn-radius-shadow{
        width:80%;
    }
}

/* アニメーション */
.btn-card-wrapper:hover{
    transition:transform .3s;
}

.btn-card-wrapper:hover img{
    border-radius:unset;
}


/*======================================================
パネル型レイアウト
======================================================*/

.panel-wrapper{
    border:1px solid #ccc;
    padding:0;
    margin-bottom:40px;
}

.panel-photo{
    flex-basis: 30%;
}

.panel-txt{
    flex-basis: 68%;
    padding:10px 0 10px 30px;
}

@media(max-width:767px){
    .panel-photo{
        flex-basis:100%;
    }
    .panel-txt{
        flex-basis: 100%;
        margin-left:0;
    }
    .panel-wrapper{
        margin:20px 20px 40px 20px;
    }
}

/*======================================================
ボタン
======================================================*/


/*------------------------------------------------------
基本ボタン（影付き角丸）
------------------------------------------------------*/

.btn-radius-shadow{
    text-align:center;
    border-radius:40px;
    padding:10px 20px;
    box-shadow: 4px 4px 4px rgba(3, 3, 3, 0.16),-1px -1px 0px #ccc;
    background: #fff;
    font-size:1.6rem;
    border-color:transparent;
}

/* リンクボタン　右矢印追加 */

.btn-arrow-right{
    position:relative;
}
.btn-arrow-right::after{
    font-family:FontAwesome;
    content:"\f105";
    position:absolute;
    right:20px;
    top:50%;
    transform:translateY(-50%);
    font-weight: normal;
    margin-left:0.5em;
  }

  /* 矢印の色変更  */

.btn-arrow-green::after{
    color:#21937D;
  }
  
.btn-arrow-pink::after{
    color:#E68B8B;
}

/*------------------------------------------------------
基本ボタン（影なし角あり・アイコンなし）
------------------------------------------------------*/

.btn-radius-corner-none{
    text-align:center;
    border:transparent;
    background: transparent;
    outline:none;
    display: block;
    width:100%;
}

.btn-radius-corner-none 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: #f2f2f2;
}

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


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

.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;
}

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

@media(max-width:479px){
    .list-radius{
        flex-basis: 100%;
    }
    .list-radius a{
        height:60px;
    }
    .btn-radius-corner a,
    .btn-radius-corner-dl a{
        text-align: left;
    } 
}


/* 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;
}

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



/*----------------------------------------
詳細へボタン
----------------------------------------*/

.btn-detail{
    text-align: right;
    font-size:1.3rem;
}

/* パネル内の詳細ボタンの位置 */

.panel-wrapper{
    position: relative;
}

.panel-txt .btn-detail{
    position: absolute;
    bottom:20px;
    right:20px;
}



/* font family noto */
.font-noto{
    font-family: 'Noto Sans JP', sans-serif;
}

/* カテゴリーで色分けする場合はカテゴリーに下記クラス名付与 */


/*------------------------------------------------------
角が10px　細めの四角ボタン　ボーダー色は別途指定
------------------------------------------------------*/
/*----------------------------------------------------
ボーダーの色とホバー時の背景色のみ、各階層CSSで指定してください
-----------------------------------------------------*/

.btn-radius10{
    text-align:center;
    border:transparent;
    background: transparent;
    outline:none;
    display: block;
    width:100%;
    text-align: center;
    margin-bottom:20px;
}

.btn-radius10 a{
    display: block;
    padding:1.2em 1em;
    border:2px solid #ccc;
    border-radius:10px;
    background: #fff;
    font-size:1.8rem;
}

.btn-radius10 a:hover{
    background: #999;
    color:#fff;
}

.btn-radius10 a:hover::before{
    color:#fff;
}


/*======================================================
アイコン　※アイコンは<a>タグにクラス設定
======================================================*/

/* ●の中を塗りつぶしたい時 */

.ico-bold::before,.ico-bold::after{
    font-weight: bold;
}


/*------------------------------------------------------
矢印系
------------------------------------------------------*/

/* 丸付き矢印・矢印細いバージョン（右向き）　ボタンの前に配置 */
.ico-arrow-circle-right-before::before{
    content:"\f138";
    font-family:"Fontawesome";
    font-weight: normal;
    margin-right:0.5em;
}


/* 丸付き矢印・矢印細いバージョン（右向き）　ボタンの後ろに配置 */
.ico-arrow-circle-right-after::after{
    content:"\f138";
    font-family:"Font Awesome 6 Pro";
    font-weight: normal;
    margin-left:0.5em;
}

/* 丸の中に矢印・矢印が三角バージョン ▶（右向き）　ボタンの前に配置 */

.ico-triangle-circle-right-before::before{
    font-family:"Font Awesome 6 Pro";
    content:"\f330";
    margin-right:0.5em;
    font-weight: 400;
}

/* 丸の中に矢印・矢印が三角バージョン ▶（右向き）　ボタンの後ろに配置*/

.ico-triangle-circle-right-after::after{
    font-family:"Font Awesome 6 Pro";
    content:"\f330";
    margin-right:0.5em;
    font-weight: 400;
    margin-left:0.5em;
}

/* シンプルな矢印（右向き）　ボタンの前に配置 */

.ico-arrow-simple-right-before::before{
    content:"\f0da";
    font-family:"Font Awesome 6 Pro";
    color:#333;
    margin-right:0.5em;
    font-weight: bold;
  }

/* シンプルな矢印（右向き）　ボタンの後ろに配置 */

.ico-arrow-simple-right-after::after{
    content:"\f0da";
    font-family:"Font Awesome 6 Pro";
    color:#333;
    margin-left:0.5em;
    font-weight: bold;
}

/* シンプルな矢印（右向き）　ボタンの後ろに配置 */

.ico-link::after{
    content: "\f35d";
    font-family: "Font Awesome 6 Pro";
    margin-left: 5px;
    color: #21937D;;
}

.ico-file::after{
    content: "\f15c";
    font-family: "Font Awesome 6 Pro";
    margin-left: 5px;
    color: #E68B8B;;    
}


/*------------------------------------------------------
ダウンロード系
------------------------------------------------------*/  

/* ダウンロードアイコン */

.ico-dl-before::before,.ico-dl-after::after{
    content:"\e094";
    font-family:"Font Awesome 6 Pro";
    color:#333;
    margin-right:0.5em;
    font-weight: 400;
}

.ico-dl-after::after{
    margin-left:0.5em;
    margin-right:0;
}

/*------------------------------------------------------
バックナンバー系
------------------------------------------------------*/  

.ico-doc-before::before,.ico-doc-after::after{
    content:"\e178";
    font-family:"Font Awesome 6 Pro";
    color:#333;
    margin-right:0.5em;
    font-weight: 400;   
}

.ico-dl-after::after{
    margin-left:0.5em;
    margin-right:0;
}


/*------------------------------------------------------
○印　枠線のみ
------------------------------------------------------*/  

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

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

@media(max-width:767px){
    span.ico-circle-before{
        display: inline-block;
    }
    span.ico-circle-before::before{
        left:0;
    }

}


/*------------------------------------------------------
新着　NEW表示
------------------------------------------------------*/

.new-mark{
    color:#fff;
    font-size:1.1rem;
    text-align: center;
    margin-left:0.4em;
    padding:4px 6px;
    background: #186CBA;
}



/*======================================================
テーブル
=====================================================*/
.ta{
    width:100%;
    margin-bottom:30px;
}

.ta th,.ta td{
    padding:1em 0.5em;
    border:1px solid #999;
}
/* テーブル見出しが上の場合は高さを低く。見出しが左の場合は適用されない。 */
.ta thead th{
    padding:0.5em;
}
/* テーブル見出しの色 */
.ta-gray th{
    background:#EFEFEF;
}
.ta-yellow th{
    background:#FEF6E2;
}

.ta-blue th{
    background:#d3e2f4;
}

/* 行ごとに色変え　*/

.ta-line tr:nth-child(odd) th,
.ta-line tr:nth-child(odd) td{
    background:#d3e2f4;
}

.ta-line tr:nth-child(even) th
.ta-line tr:nth-child(even) th{
    background:#fff;
}

/*------------------------------------------------------
テーブルレスポンシブ表示（複雑な表の場合は別途設定してください。）
------------------------------------------------------*/

@media(max-width:600px){
    /* 見出しが1行目（1番上）の場合にスマホでは1列表示にする */

    .ta-res-line thead{
        display:none;
    }
    .ta-res-line td{
        display: block;
        width:100%;
        border-bottom:none;
    }
    .ta-res-line td:first-of-type{
        background:#EFEFEF;
        font-weight: bold;
    }
    .ta-res-line tr:last-of-type{
        border-bottom:solid 1px #999;
    }

    /* 見出しが1列目（左）の場合にスマホでは1列表示にする */
    .ta-res-row th,.ta-res-row td{
        display:block;
        width:100%;
        border-bottom:none;        
    }
    .ta-res-row tr:last-of-type td:last-of-type{
        border-bottom:1px solid #999;
    }    
    
    /* スマホの場合、はみ出た部分をスクロールさせる */
    .ta-res-wrapper{
        width:100%;
        overflow:scroll;
    }
    .ta-res-scroll{
        width:1200px;
    }

    /* スマホの場合、１列目（左）を見出しにして、１行目（1番上）の見出しをセルの中に太字で表示させる
       その際、２列目以降の<td>には、data-label="１行目の見出し"を入れる。
       色等細かい設定は個別に・・・  */

    @media screen and (max-width: 767px) {
        .ta-res-line-title thead {
          display: none;
        }
        .ta-res-line-title tr {
          width: 100%;
        }
        .ta-res-line-title td {
          display: block;
          /* text-align: right; */
          width: 100%;
        }
        .ta-res-line-title td:first-child {
          background: #FEF6E2;
          font-weight: bold;
          /* text-align: center; */
        }
        .ta-res-line-title td:before {
          content: attr(data-label);
          /* float: left; */
          font-weight: bold;
          margin-right: 10px;
        }
      }
}

/*------------------------------------------------------
テーブルレスポンシブ 横にスクロールさせる場合
------------------------------------------------------*/

@media(min-width:768px){
    .ta-scroll-wrapper{
        overflow-x:auto;
    }
}

/*------------------------------------------------------
下層ページ目次部分（アコーディオン）
------------------------------------------------------*/
/* 目次全体指定 */
.page-mokuji{
    margin:40px 0;
}

/* // 閉じた時の高さ = タイトル部分の高さ で計算するので、borderを使うとその分ずれることに注意 */
.accordion {
    box-shadow: 0 0 0 1px #bbb;
    overflow: hidden;
}

.accordion + .accordion {
    margin-top: -1px;
}

/* display:list-item 以外にしてデフォルトの三角アイコンを非表示にする */
.accordion__title {
  display: flex;
  /* align-items: center; */
  /* justify-content: space-between; */
  padding: 1em;
  background: #f7f7f7;
  cursor: pointer;
  position:relative;
}

/* Safariで表示されるデフォルトの三角形アイコンを削除 */
.accordion__title::-webkit-details-marker {
  display: none;
}

.accordion__title::after {
    content: "OPEN";
    display: block;
    margin: 0 .5em;
    /* clip-path: polygon(50% 80%, 0 20%, 100% 20%); */
    transition: transform .25s;
    font-weight: bold;
    color:#999;
    position:absolute;
    right:20px;
    top:50%;
    transform: translateY(-50%);
}

.accordion__title::before {
    content:"\e1d0";
    font-family:"Font Awesome 6 Pro";
    font-weight: 400;
    margin-right:10px;
    background:#6F6F6E;
    border-radius: 50%;
    width:24px;
    height:24px;
    color:#fff;
    font-size:1.4rem;
    text-align: center;
}

.accordion.is-opened > .accordion__title::after{
  /* transform: rotate(180deg); */
  content:"CLOSE";
}

.accordion__content {
    padding: 1em;
    border-left:5px solid #ccc;
    background: #fff;
}

.accordion__content-about{ border-color: #62B5B2; }
.accordion__content-service{ border-color: #7AC67B; }
.accordion__content-consul{ border-color: #F3C517; }
.accordion__content-active{ border-color: #F4A580; }
.accordion__content-know{ border-color: #F4B3C2; }
.accordion__content-donation{ border-color: #986FAD; }
.accordion__content-other{ border-color: #3551A2; }


/* アコーディオン内リストの装飾 */

.c-accordion_txt li{
    margin-bottom:1em;
}

.c-accordion_txt li::before{
    content: "\f0da";
    font-family: "Fontawesome";
    right: 16px;
    font-weight: 400;
    margin-right:10px;
    color:#999;
}


/*------------------------------------------------------
準備中ページ
------------------------------------------------------*/

.bg-town {
    background: url(../img/junbi/img-town2.jpg);
    background-repeat : repeat-x  ;
    background-position : bottom center;
    background-size: contain;
}
.junbi-box{
    min-height : 300px ;
}

@media (min-width:769px){
    /* PCの時だけ */
    .junbi-box{
        min-height : 700px ;
    }
    .bg-town {
        background-size: contain;
    }
}