@charset "utf-8";

.mt200 {
    margin-top:200px;
}

.text-center {
    text-align:center;
}

.my_photo {
    max-width: 1000px;
    margin: 0 auto 1rem;
}

/*サムネイル画像*/
.thumbnail .thumbnail_bgimg {
    width: 100px;		/*サムネイルの幅*/
    margin: 2px;		/*サムネイル間のスペース*/
    cursor: pointer;	/*リンクタグではないが、クリックできる事をわかりやすくする為にリンクと同じポインターにしておきます。*/
    transition: 0.3s;	/*マウスオンまでにかける時間。3秒。*/
}
.thumbnail .thumbnail_bgimg:hover {
    opacity: 0.8;	/*マウスオン時に80%だけ色を出す。つまり薄くなります。*/
}

/* サムネイル用背景イメージ */
.list_bgimg, .thumbnail_bgimg {
    max-width:100%;

    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.list_bgimg {
    min-height:240px;
}

.thumbnail_bgimg {
    min-height:80px;
}

.header img {
    display:block;
    margin:15px auto;
}

@media screen and (min-width:800px){

.header img {
    max-width:80%;
}

}

/*button
---------------------------------------------------------------------------*/
button.btn {
	padding: 5px 10px;		/*上下、左右へのボタン内の余白*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	border-radius: 3px;		/*角丸のサイズ*/
	background: #eee;		/*背景色*/
}
/*マウスオン時の設定*/
button.btn:hover {
	border: 1px solid #999;	/*枠線の幅、線種、色*/
	background: #fff;		/*背景色*/
}

.member_list .list-grid {
    margin:2rem 0 3rem 0;
}


/*１つ目のメニューのアイコン*/
.category-menu li:nth-of-type(1) a::before {
	content: "\f304";	/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
}

/*２つ目のメニューのアイコン*/
.category-menu li:nth-of-type(2) a::before {
	content: "\f66f";	/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
}

/*３つ目のメニューのアイコン*/
.category-menu li:nth-of-type(3) a::before {
	content: "\f133";	/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
}

/*４つ目のメニューのアイコン*/
.category-menu li:nth-of-type(4) a::before {
	content: "\f0e0";	/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
}

/*日付(dt)設定*/
.new dt {
    width: 48%;
}

/*記事(dd)設定*/
.new dd {
    margin-left:1%;
    width: 48%;
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {

    /*日付(dt)設定*/
    .new dt {
        width: 24em;  /*幅。14文字(em)分。アイコン分も含んだ幅にします。*/
    }

    /*日付の横のマーク（共通設定）*/
    .new dt span {
        width: 14em;        /*幅。7文字(em)分。*/
        background: #4b0082;/*背景色*/
    }

    /*記事(dd)設定*/
    .new dd {
        margin-left:0%;
        width: calc(100% - 24em);  /*「14em」は上の「.new dt」のwidthの値です。*/
    }

    .home #container {
        max-width:100%;
    }

    .home header .slide1, .home header .slide2, .home header .slide3 {
        height:80%;
    }

    .home header .category-menu {
        bottom:20%;
    }

    .home #contents {
        margin-top:-13%;
    }
}/*画面幅900px以上の追加指定ここまで*/

.fc-event {
    border: 1px solid #4b0082;
    background-color: #4b0082;
}

/*詳細ページ（item.html）で使っている「前のページに戻る」ボタン
---------------------------------------------------------------------------*/
.link {
    text-align: center;
}
.link a {
    text-decoration: none;display: inline-block;
    padding: 0.5rem 2rem; /*ボタン内の余白。上下、左右。*/
    border-radius: 30px;  /*角を丸くする指定。ある程度大きければ適当でいいです。*/
    background: #eee;     /*背景色*/
}
.link a::after {
    font-family: "Font Awesome 5 Free";    /*Font Awesomeを使う指定*/
    content: "\f0da";     /*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
    padding-left: 0.8em; /*アイコンとテキストの間の余白*/
    font-weight: bold;    /*この設定がないとアイコンが出ない場合があります*/
    opacity: 0.5;         /*色を50%だけ出す*/
}

.anchor {
    display: block;
    padding-top: 109px!important;
    margin-top: -96px;
}

/* 団体検索 */
.search_box {
    text-align:center;
}

.search_box p {
    line-height:1.25rem;
    text-align:left;
    margin:.25rem 0;
}

/* 団体一覧 */
.c { text-align: center; }
.r { text-align: right; }
.l { text-align: left; }
.fr { float: right; }
.fl { float: left; }
.mb { margin-bottm: 2rem; }
.clear { clear: both; }
.w40p { width: 40%; }
.w60p { width: 60%; }

/* フッター用 */
.mt2rem {
    margin-top:2rem;
}