@charset "UTF-8";
@import url("grid.css");

body{
   background: url('../img/bg.jpg') center center;
}
img {
   max-width:100%;
   height: auto;/*高さ自動*/
}
a {
    display:inline-block;
    color: #555;
    text-decoration-line: none;
}
a:hover { 
    color: #000;
}
a img:hover {
   opacity: 0.8;
}
.underline {
   border-bottom: 3px solid #000;
   padding-bottom: 0.5rem;
}

#menu{
   position:fixed;
}

h2{
   text-align:center;
   padding:10px 0;
   background:#CC99CC;
   color:#fff;
}

/*ヘッダー
-------------------------------------*/
header {
   width: 100%;
   z-index: 999;
   top:0:
   left:0;
   /* background:#CC99CC; */
   background:url('../img/bg2.jpg');

}
header h1{
   margin:10px 0; padding:0;
}
header h1 a{
   color:#FE9901;
}
   
nav ul {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    list-style: none;
    margin-bottom: 0px;
}
nav li {
    display: block;
    flex: 1 0 auto;
}
nav li a {
    display: block;
    text-decoration: none;
    text-align: center;
    color:#fff;
}
nav a:hover {
    color: #fff;
    font-weight:bold;
}
nav a {
    padding: 1rem;
}
.button{
   display:block;
   background:#84B250;
   border:solid 1px #333;
   padding:0 0 2px;
   color:#fff;
   border-radius:8px;
   font-size:18px;
}


/*メイン画像
-------------------------------------*/
.mainimg {
   width: 100%;
   margin-bottom:-30px;
}
.mainimg img {
   width: 100%;
}

/*メインコンテンツ
-------------------------------------*/
main {
    margin:0;
}

/*新着情報
-------------------------------------*/
.news{
   height:300px;
   overflow-y:auto;
}
.news li {
   list-style-type: none;
   padding: 0.1rem 0;
   font-size:1em;
}
.news li a{
   display:inline;
   font-size:1em;
}

/*フッター
-------------------------------------*/
footer {
    background-color: #f7f7f7;
    padding: 5rem 0;
    margin-bottom:200px;
    opacity:0.5;
}
footer h5 {
    border-bottom: 3px solid #ccc;
}

footer ul    {
   text-align:center;
}
footer ul li {
   display:inline-block;
   margin-right:20px;
}



/*コピーライト
-------------------------------------*/
.copyright {
    text-align: center;
    padding: 1rem 0;
}
.copyright a:hover {
    color: #000;
    text-decoration: none;
    display: inline-block;
}

/*ページトップへ戻るボタン
-------------------------------------*/
#pagetop {
    position: fixed;
    bottom: 60px;
    right: 15px;
}
#pagetop a {
    display: block;
    width: 50px;
    padding: 10px 5px;
    text-align: center;
    opacity: 0.6;
}
#pagetop a:hover {
    opacity: 1;
}
/*パンくずリスト
-----------------------------------*/
.breadcrumb {
    margin: 0 0 1em 0;
    padding: 0;   
}
.breadcrumb li {
    list-style-type: none;
}
.breadcrumb li a {
    display: inline-block;
    color: #959fa5;
}

.list{
   border:solid 2px #ccc;
   background:#F5F5F5;
   border-radius:10px;
   padding:10px;
   overflow:hidden;
   margin-bottom:20px;
}

.icon {
   display: inline-block;
   line-height: 1;
   padding: 3px 8px; /*上下、左右へのアイコン内の余白*/
   background: #999; /*背景色。iconクラスだけ適用した場合に出る色です。*/
   color: #fff;      /*文字色*/
   font-size: 0.5em; /*文字サイズを70%に。*/
   margin: 1px;
}

/*枠線だけが入ったデザイン*/
.waku {
   background: #fff;    /*背景色*/
   color: #666;         /*文字色*/
   border: 1px solid #666; /*枠線の幅、線種、色*/
}

dl.line{ font-size:13px; clear: both; }
figure {
   float:left;
   width: 25%;       /*画像の幅*/
   margin-right: 10px;  /*画像の右側に空けるスペース*/
}
.map {
   float:right;
   width: 25%;       /*画像の幅*/
   margin-left: 10px;  /*画像の右側に空けるスペース*/
}

dl{
   overflow: auto;   /*高さ指定を超えるとiframe風にスクロールが出る設定。全部表示させたいならこの行と下のheightの行を削除。*/
   /*height: 400px; ボックスの高さ*/
   padding-left: 8px;
}
dt {
   font-weight: bold;   /*太字にする設定。標準がいいならこの行削除。*/
   float: left;
   width: 4em;
   }
dd {
   border-bottom: 2px dotted #ccc;   /*下線の幅、線種、色*/
   padding-left: 4em;
   margin-right:1em;
   margin-left:0;
   padding-bottom:3px;
   margin-bottom:2px;
}


@media screen and (min-width: 768px){
   /* PC時はMENUボタンを非表示 */
   #open,#close {
       margin-left:10%;
   }
   #navi {
       display: block !important;
       margin-bottom:10px;
   }
   main{ margin-top:0px; }
   #navi ul li{
      background:#F8DEE3;
      margin:0 2px;
      border-radius:10px;
   }
   #navi ul li a{
      color:#333;
      border-radius:10px;
   }
   #navi ul li a:hover{
      color:#fff;
      background:#F9DCA2;
   }
   
}

@media screen and (max-width: 768px){
   header {
       position: fixed;
       top:0;
       flex-direction: column;
       text-align: left;
       padding: 10px;
   }
   header h1{
      font-size:22px;
   }
   header #open,#close  {
      position: absolute;
      cursor:pointer;
       top: 2px;
       right: 12px;
   }
   nav ul {
      flex-direction: column;
      width:100%;
      opacity:1;
   }
   nav li {
      padding-top: 0;
      border-bottom: 1px dashed #ccc;
      margin-bottom: 0;
   }
   nav li a{
       color:#333;
   }
   nav li a:hover{
      color:#FE9901;
   }
   .mainimg{
      margin-top:80px;
      padding-bottom:20px;
   }
   /* スマホ時はMENUボタンを表示 */
   #open {
       display: block;
       background: url(../img/buttonA.png);
       background-repeat: no-repeat;
       background-size: contain;
       width: 50px;
       height: 50px;
       border: none;
       position: absolute;
       top: 2px;
       right: 12px;
   }
   #close  {
       display: block;
       background: url(../img/buttonB.png);
       background-repeat: no-repeat;
       background-size: contain;
       width: 50px;
       height: 50px;
       border: none;
       position: absolute;
       top: 2px;
       right: 12px;
   }
   /* スマホ時はメニューを非表示 */
   #navi {
       display: none;
   }
}