@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/css?family=Modern+Antiqua);

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}


/* 全体 */
body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  background: #fff;
  color: var(--text);
  line-height: 1.8;
　　-webkit-text-size-adjust:100%;
	overflow-x: hidden;
	color: #000;
	background: #fffff9;}
}

a{
	color: #2cc7e6
	text-decoration: none;
}

a:hover, .active{
  text-decoration: underline;
}

a:active, a:focus,input:active, input:focus{outline:0;}


/* ヘッダー
------------------------------------------------------------*/
#mainnav a{
	color: #000;
	font-family: sans-serif;
}
header#mainnav a{
	color: #000;
	font-family: sans-serif;
}
header>h1{                    /*　*　 ----- 開館/閉館表示　-----　*　**/
   font-size: 1.6em;
    text-decoration: underline;
   color:#006644;
   text-align: center;
  
} 

/** ***上部の館住所など***　**/
#hpb-headerExtra1 {
    width:60%;
    height : 35px;
    margin-top: 0;
    margin-right: 45px;
    margin-bottom: 0;
    margin-left: 0;
    padding-top: 0px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    font-size: 0.8em;
    line-heiht:1.1em;
    float: left;
    
}
#hpb-headerExtra1 p.tel {
    /* 電話番号の文字設定 */
    margin-top: 0;
    margin-right: 0;
    margin-bottom: auto;
    margin-left: 0;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 30%;
    font-size: 0.6em;
    font-weight: normal;
    color: #000000;
    font-size: 0.9em;
    line-height : 1.1em;
    text-align: left;
    font-family : メイリオ;
   }



#hpb-headerExtra1 p.address {
    /* 住所文字設定 */
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 30%;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    font-size: 0.6em;
    line-height: 1.1em;
    text-align: left;
   }

.sns img{
    /*display: flex; */
    flex-wrap: nowrap;
   /*justify-content: flex-end;*/
    margin: 0 0 0 1.2em;

}
.title-box3{
  margin: 1em 0;
  background-color: #e3f2fd;
  border: 2px solid #2196f3;
  letter-spacing: .3px;
}
.title-box3-title{
  color: #fff;
  font-weight: bold;
  background-color: #2196f3;
  padding: 4px 6px;
  text-align: center;
}

.title-box3 p{
  margin: 0;
  padding: 1em;
}
.box01{
margin: 2em auto;
 
 padding: 2em 5em;
    text-decoration: none;
                  font-size:1.1em;
                  font-weight:600;
 align:center;
 width: 40%;
 color:#000; /* 文字色 */
 
 border: 1px solid gray; /* 枠線 */
}
     
　　}


/* フッター
------------------------------------------------------------*/
#footer{
	clear: both;
	padding: 30px 10px 40px 10px;
            font-size: 11px;
	text-align: center;
	font-size: 0.9em;
}


/* 共通
------------------------------------------------------------*/
h1{
         font-family: 'Modern Antiqua', 'Noto Sans JP',serif;

}
h2{
         font-family: 'Modern Antiqua', 'Noto Sans JP',serif;
         /*margin-top:3.5em;
         margin-bottom:1em;*/
         text-align: center;         
}

img{
	max-width: 100%;
	height: auto;
}

.resizeimage img { 
        width: 100%; 
}

.space{
       margin: 0 1.2em;
}

.panel li p{　
       color:#a0522d; 
}


#menuWrap{
　　　　margin-top:0;
　}

.sideline{
  padding: 0.1em/*縦の長さ*/ 0.8em/*文字との距離*/;
  border-left: 8px solid #add8e6;
}
 .enclosed{
	padding:2px 8px; /* 枠と文字の空間 */
	margin:15px 15px; /* 枠の外の空間 */
	background-color:#f9f9f9; /* 枠の背景色 */
	border:1px solid #777; /* 枠の線の太さ・種類・色 */
	border-radius:2px; /* 枠の角を丸くする */
	box-shadow: 1px 2px 2px #ddd; /*影をいれる*/
	font-family:inherit; /* フォントの種類を継承する */
	font-size:0.85em;	/* フォントの大きさ */
}

.enclosed-l{
	padding:5px 5px; /* 枠と文字の空間 */
	margin:15px 0px; /* 枠の外の空間 */
	background-color:#f9f9f9; /* 枠の背景色 */
	border:1px solid #777; /* 枠の線の太さ・種類・色 */
	border-radius:2px; /* 枠の角を丸くする */
	box-shadow: 1px 2px 2px #ddd; /*影をいれる*/
	font-family:inherit; /* フォントの種類を継承する */
	font-size:1.1em;/* フォントの大きさ */
        line-height: 2.8;
}
.titlebar{
    margin: 48px 0 32px;
    padding: 8px 0 8px 12px;
    border-left: 4px solid #800000;
    color: #444;
    font-size: 24px;
    font-weight: bold !important;
    line-height: 1.5;
}
section{
  clear: both;
}
section p{
  color:#5c6366;
}

section h2{
	width: 75%;
         margin-top:1.7em;
          margin-bottom:0.7em;
        padding-bottom:2px;/*テキストから下線までの間隔*/
  	font-size: 1.4em;
	font-weight:normal;
	text-align: center;
           /* border-bottom:1px solid #666666; /*下線の太さと色*/*/
}

section2 h1{
	width: 80%;
	font-size: 1.2em;
	font-weight:normal;
	text-align: center;
}


/*section h2 span {
    font-size:1.3em;
    line-height:3.5;
}*/
section h3 p {
    font-size:1.2em;
    line-height: 1.3em;
}

.inner{
	width: 92%;
	padding-top: 40px;
	padding-bottom: 40px;
        margin: 0px auto;
}
}

#sec h1{
         text-align:center; 
         font-family: 'Modern Antiqua', 'Noto Sans JP',serif;
         
         margin-bottom:1em;
}

#sec01 h1 p{
    padding-top:5px;
    padding-bottom:2px;/*テキストから下線までの間隔*/
    font-size:1.8em;
    text-align: center;
    letter-spacing: 0.1em;
    line-height: 1.5;
    border-bottom:3px solid #666666; /*下線の太さと色*/
}

#sec03 .inner, #sec04 .inner{
	border-bottom: 1px solid #a0a0a0;
}

.innerS{
	width: 60%;
	margin: 0 auto;
	padding-bottom: 80px;
}
.innerS2{
	width: 60%;
	margin: 10 ;
	padding-bottom: 80px;
}



figure {
    border: 0;
   display: inline-block;
    flex-flow: column;
    padding: 5px;
    max-width: 350px;
    margin: auto;
}

figure>img {
    
      display:block;
      max-width: 350px;
      max-height: auto;
    
}

figcaption {
    background-color: #222;
    color: #fff;
    font: italic smaller sans-serif;
   font-size: 0.9em;
    padding: 1px;
    text-align: center;
}

figcaption a{
  
text-decoration: none;
color:#99FFCC;
}




/* SEC02 tile画像
----スクロール------------------------------------------*/


.scroll_content { /* リスト全体のスタイル */
  display: flex;
  max-width: 900px;
  margin: auto;
  overflow-x: auto;
}
 
.scroll_content li { /* 各リストのスタイル */
  width: 90%;
  padding: 8px;
  margin: 3px;
  flex-shrink: 0;
  list-style: none;
}
 
.scroll_content img { /* 画像のスタイル */
  width: auto;
  max-height: 100%;
  object-fit: cover;
}
 
.scroll_content::-webkit-scrollbar {
  height: 15px; /* スクロールバーの高さ */
}
 
.scroll_content::-webkit-scrollbar-thumb {
  background: #aaa; /* ツマミの色 */
  border-radius: 6px; /* ツマミ両端の丸み */
}
 
.scroll_content::-webkit-scrollbar-track {
  background: ; /* トラックの色 */
  border-radius: 6px; /* トラック両端の丸み */
}
 

/******　スクロールここまで　******/

#sec02{
	padding: 0 !important;
}

#sec02 header{
	display: none;
           text-align:center;
}

#tile{
	overflow: hidden;
}

#tile li{
	float: left;
	width: calc(100%/4);
        line-height: 0;
}
#tile li.wide{
	width: 100%;
    max-height:600px;
    object-fit: cover;
}


#tile img{
	display: block;
	width: 100%;
	height: auto;
}


.history {
  list-style: none;
}
.history > li {
  margin-bottom: 60px;
}


        

/* SEC03 催事　講座
------------------------------------------------------------*/
.col4 .img{
	/*margin: 0 auto;*/
float: center;
	margin: 5px 20px 20px;
}
p.cap{
   font-size:0.8em;
   font-color:  #2F4F4F; 
   font-weight: 300;
}


/* SEC04 おしらせ
------------------------------------------------------------*/
#sec04{
	padding-bottom: 0 !important;
}

.article{
	clear: both;
	overflow: hidden;
	padding-bottom: 30px;
}

.article img{
	float: left;
	margin: 5px 20px 20px;
}

.article p{
	margin-bottom: 20px;
}


.dt  {
line-height: 2.5;
}
 
.dd {
  margin-left: 50px;
}
/* SEC05 館情報
------------------------------------------------------------*/
#sec05 p{
	margin-bottom: 5px;
}

.col2 li{
	display: inline-block;
	width: 100%;
          margin: 20px 0;
}

#map{
	position: relative;
	padding-bottom: 75%;
	height: 0;
	overflow: hidden;
	z-index: 0;
}

#map iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
}





/* RESPONSIVE 設定
------------------------------------------------------------*/

@media only screen and (min-width: 800px){  /**------min800px-----***/
	body{    
		font-size:14px;
	}
	
	#wrapper{
		width: 100%;
	}
	
	#content{
		width: 80%;
	}
	
	#sidebar{
		width: 15%;
		position: fixed;
		top: 0;
		right: 4%;
		background: #fffff9;

           }
           li span {
                  display:block;
                 font-size:1em;
                        letter-spacing: -0.1em;
           }


         a#menu{
		display:none;
	}	

	.panel{
		display:block !important;
	}
         .panel ul li{
                 margin:10px 15px 10px auto;
                text-decoration:none;
　　　　　color:#665c52 /*濃灰茶*/
                font-size:1.3em;
          }
	
          #sidebar h1{
               display: flex; 

	    padding: 25px 0;
                margin-bottom:10px;
                line-height:2.5em;
                font-size:1.5em;
                font-weight:800;
           }
 #sidebarWrap h1{
          display: flex;   
          justify-content: flex-end;    
   }

#sidebarWrap h1.sns{
          display:none;       
   }
         #mainnav wrap h1{
                margin:20px 15px;
               
       }

                
	#mainnav li{
		font-size: 14px;
		padding: 10px 0;
                /*border-bottom: 1px solid #99655a;*/
      }
	#mainnav .panel li p{
            font-size: 14px;
            padding: 0;
           color:#a0522d;
         
        }
/*	#sns{
		margin-top: -20px;
	}
*/	
	#sns li{
        display: flex;
        flex-direction: row-reverse;
		display: inline-block;
		padding-right: 8px;
        }
   

	#sns a:hover img{
		opacity: .8;
	}


 .panel span.enclosed{
           display:none;
        }
	


/* for Desktop */

  .history > li {
    overflow: hidden;
    margin: 0;
    position: relative;
  }
  .history-date {
    width: 133px;
    float: left;
    font-size: 0.8em;
    margin-top: 20px;
  }
  .history-content {
    width: 75%;
    float: left;
    border-left: 3px #e5e5d1 solid;
    padding-left: 30px;
  }
  .history-content:before {
    content: '';
    width: 12px;
    height: 12px;
    background: #085c44;
    position: absolute;
    left: 128px;
    top: 24px;
    border-radius: 100%;
  }

	/* SEC03 催事　講座
	-----------------*/
	.col4{
		text-align: center;
	}

	.col4 li{
		display: inline-block;
		width: 19%;
		padding: 0 3%;
		vertical-align: top;
		text-align: left;
	}
	
	#map iframe{
		height: 200px !important;
  }
	
  #footer{
		padding: 30px 10px 40px 10px;
                        font-size: 11px;
	}
}


@media only screen and (min-width: 641px){    /**------min641px-----***/
	.col2 li{
		width: 60%;
		vertical-align: top;
	}
	.col2 li:first-child{
		width: 35%;
		padding-right: 4%;
	}
}
@media only screen and (max-width: 640px){   /**------max640px-----***/
  /* #wrapper h1 img{
        width: 100%;
        margin-top:-120px; 
	}
*/

	.innerS{
		width: 94%;
		padding-bottom: 30px;
	}
	#tile li{
		float: none;
                width: calc((100%) / 2)-10px;
	}
	.article img{
		float: none;
		display: block;
		margin: 0 auto 20px;
	}
  #mainnav h1 span{
           display:inline-block;
 }

           
	

#sidebar{
		
                   margin-top:0;
                   padding:0;
                    position: fixed;
		width: 100%;
		z-index:500;


	}
#sec01 h1 p{
    padding-top:5px;
    padding-bottom:2px;/*テキストから下線までの間隔*/
    font-size:1.4em;
    letter-spacing: 0.1em;
    line-height: 1.5;
    border-bottom:3px solid #666666; /*下線の太さと色*/
}
section h2{
         margin:0;
	width: 90%;
	font-size: 1.2em;
	font-weight:normal;
	text-align: center;
}
section h2 span.{
    margin: 0; 
    font-size:1em;
    line-height: 1.5;   
   
}
section h2 span.s{
     margin:0;
    font-size:1em;
    line-height: 1.5;
   
}
 .history-date:before {
    content: '';
    width: 10px;
    height: 10px;
    background: #d9a62e;
    position: absolute;
    left: 15px;
    top: 24px;
    border-radius: 100%;
}

 

 #article ul li{
  position: relative;
  padding-left: 15px;
}
 
 #article ul li:before {
  content: "";
  position: absolute;
  top: .4em;
  left: 0;
  width: 10px;
  height: 10px;
  background-color: #d9a62e;
  border-radius: 50%;
}




/** ***上部の館住所など***　**/
#hpb-headerExtra1 {
    width:60%;
    height : 35px;
    margin-top: 0;
    margin-right: 45px;
    margin-bottom: 0;
    margin-left: 0;
    padding-top: 0px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    font-size: 0.8em;
    line-heiht:1.1em;
    float: right;
    
}
#hpb-headerExtra1 p.tel {
    /* 電話番号の文字設定 */
    margin-top: 0;
    margin-right: 0;
    margin-bottom: auto;
    margin-left: 0;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    font-size: 0.6em;
    font-weight: normal;
    color: #000000;
    font-size: 0.9em;
    line-height : 1.1em;
    text-align: right;
    font-family : メイリオ;
   }

#hpb-headerExtra1 p.address {
    /* 住所文字設定 */
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    font-size: 0.6em;
    line-height: 1.1em;
    text-align: right;
   }
	#map iframe{
		width: 96% !important;
		left: 2%;
	}
    #footer{
	padding: 15px 10px 10px 10px;
     　 font-size:0.4em;
      　color:#696969
	}
}

@media only screen and (max-width: 799px){    /**--max799px--***/
       
#sidebar{
                margin-top:0;
                padding:0;
                position: fixed;
		width: 100%;
		z-index:500;
                background: #fffff9;
　}


      
       #sidebar h1{
                   display: flex;
		   padding: 0px 10px;
	}
/*#sidebar h1{
		text-align: left;
		padding-top: 20px;
　　　　　　background: #fffff9;
	}
	*/
	#sidebar h1 img{
		width: auto !important;
		max-height: 25px;
                        
	}
       #mainnav h1 span{
           display:block-inline;
        }

	
#mainnav h1 img{
max-height: 25px;
             /* height: 70%;
              width:70%;*/
}
#sns a:hover img{
		opacity: .9;
 }
  .sns img{
   
    display: flex; 
 /*  justify-content: flex-end;*/
    max-height:20px;
    flex-wrap: nowrap;
    padding: 3 4 0 6em;
    z-index:700;
}
  #sidebarWrap h1 div{
      font-size:0.8em;
   }
  #sidebarWrap h1 div img {
     width: 80%;
     height: auto;
   }
.sns a:hover img{
		opacity: .75;
}

#sec01 header{
        /* margin-top:50px;   ***/
}
         
.space{
       margin: 0 1em;
}
         
         
          #sidebarWrap{
		position: relative;
		height: 100%;
		
                   
                   　background-color: #fffff9;　/*卵殻色*/
                  　 background-position: top left;
                  
		　　border-bottom: 1px solid #0055AA;
	}
	
	#sidebar h1{
		text-align: left;
		padding-top: 20px;
　　　　　　background: #fffff9;
   Z-index:800;
	}
	
	#sidebar h1 img{
		width: auto !important;
		max-height: 25px;
                        
	}
 #sidebarWrap div a{
      display:flex;
}
   #sidebarWrap h1{
            
            vertical-align: top;
            padding-top:10px;
        
        }
	
　p#menuWrap{
　　　　margin-top:0;
             box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.5);
　} 
  a#menu{
  	display: inline-block;
  	position: relative;
  	width: 55px;
  	height: 35px;
  	margin: 5px 25px 5px 0;
          
	}

#mainnav li .panel li p{
            margin:0;
           
        }

.panel{
                background:#e6e6cf;
                opacity: .95;
	    width: 100%;
	    display: none;
	    overflow: hidden;
		position: relative;
		left: 0;
		top: -5px;
		z-index: 100;
}
.panel li p{
       color:#737380; /*青紫灰色*/
       font-weight:700;
}
.panel ul li p a{
      font-family:sans-serif;
      font-weight:700;
      color : b22222; !important; /*赤茶色　#b22222　*/
}

/*ハンバーガー*/
	#menuBtn{
  	display: block;
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	width: 25px;
  	height: 3px;
  	margin: -6x 10px 0 -7px;
  	background: #000;
  	transition: .2.5s;
	}
/*ハンバーガー*/
	#menuBtn:before, #menuBtn:after{
  	display: block;
  	content: "";
  	position: absolute;
  	top: 50%;
  	left: 0;
  	width: 25px;
  	height: 3px;
  	background: #000;
  	transition: .3s;
	}
/*ハンバーガー*/
	#menuBtn:before{
  	margin-top: -7px;
	}

	#menuBtn:after{
  	margin-top: 6px;
	}

	a#menu .close{
  	background: transparent;
	}

	a#menu .close:before, a#menu .close:after{
  	margin-top: 0;
	}

	a#menu .close:before{
  	transform: rotate(-45deg);
  	-webkit-transform: rotate(-45deg);
	}

	a#menu .close:after{
  	transform: rotate(-135deg);
  	-webkit-transform: rotate(-135deg);
	}
  

	#mainnav{
		position: absolute;
		top: 0;
		width: 100%;
		text-align: right;
	}


	#mainnav ul {
		border-bottom: 1.5px solid #808000; /*　SP用メニューの一番下の線　オリーブ色*/
		background: #fffff9;
		text-align: left;　
                padding:-5px 0;
　　}
     
　　#mainnav li{
		position: relative;
		display: block;
		padding: -10px 35px;    
      
   }
/*　#mainnav ul#sns {
		position: relative;
		display: block;
		padding: -10px 0;    
                        margin: -10px 55px 0 0
      
   }*/
       #mainnav li>a{
		position: relative;
		display: block;
		padding: 8px 45px; 
                   border-bottom: 1px solid rgba(0,0,0,0.1);
                   
                   text-decoration: none;
                   font-size:1.2em
                   font-family:monospace;
                   margin:0em 0;
                   font-weight: 800;
     }
#mainnav li > p{
		position: relative;
		display: block;
		padding-left:2em;
                         font-size:0.75em;
                         letter-spacing: -0.07em;
}
#mainnav li > p span{
		position: relative;
		display: inline-block;
		font-size:1em;
                        letter-spacing: -0.1em;
} 

/*///////li p a{
       margin:0.5em 0px;
       }
//////*/


#mainImg{
         margin-top:35px;
}

section01 header{
         margin-top:120px;
         padding-top:85px;
         }

  


section h2 {
                 text-decoration:none; 
                 text-align: center;
                  margin-top:15px;
                  text-decoration: none;
                  font-size:1.1em;
                  font-weight:700;
                  line-height:2;
}

section h2 span {
                  display:block;
                  text-decoration: none;
                  font-size:1.1em;
                  font-weight:700;
                  line-height:2;
}
  /****サイドバーのメニュー***/
　　#mainnav li a:before{
    content: "";
    display: block;
    height: 1em;
    border-left: 1px solid #999;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
	  /*display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 5px;
		width: 6px;
		height: 6px;
		margin: -4px 0 0 0;
		border-top: solid 2px #000;
		border-right: solid 2px #000;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
            */
    }
/*	
	#mainnav #sns li a{
		position: relative;
		display: flex;
                         flex-direction: row-reverse;
		padding: 0px 80px 0 10;
		border: 0;
	}
	
*/
	.col4 li{
		margin: 0 auto 50px;
		display: block;
		text-align: center;
                      
	}
            

 .scroll_content li{
    width: 35%;
  }
.mobile-scroll {
　width: 100%; 
　overflow-x: scroll;
　}
.article p{
	margin: 5px 5px;
}
   #footer{
	padding: 20px 15px 10px 15px;
      font-size:0.5em;
      color:#696969
	}
p span{
   display:block;
}
  .history-date:before {
    content: '';
    width: 10px;
    height: 10px;
    background: #d9a62e;
    position: absolute;
    left: 15px;
    top: 24px;
    border-radius: 100%;
}
:root {
  --accent: #6D4291;      /* 枠線色 */
  --accent-dark: #53326E; /* 見出し色 */
  --accent-light: #824FAD;
  --text: #333;
}

/* 全体 */
body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  background: #fff;
  color: var(--text);
  line-height: 1.8;
}

/* ヘッダー
------------------------------------------------------------*/
#mainnav a{
	color: #000;
	font-family: sans-serif;
}
header#mainnav a{
	color: #000;
	font-family: sans-serif;
}
header>h1{                    /*　*　 ----- 開館/閉館表示　-----　*　**/
   font-size: 1.6em;
    text-decoration: underline;
   color:#006644;
   text-align: center;
  
} 

/** ***上部の館住所など***　**/
#hpb-headerExtra1 {
    width:60%;
    height : 35px;
    margin-top: 0;
    margin-right: 45px;
    margin-bottom: 0;
    margin-left: 0;
    padding-top: 0px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    font-size: 0.8em;
    line-heiht:1.1em;
    float: left;
    
}
#hpb-headerExtra1 p.tel {
    /* 電話番号の文字設定 */
    margin-top: 0;
    margin-right: 0;
    margin-bottom: auto;
    margin-left: 0;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 30%;
    font-size: 0.6em;
    font-weight: normal;
    color: #000000;
    font-size: 0.9em;
    line-height : 1.1em;
    text-align: left;
    font-family : メイリオ;
   }



#hpb-headerExtra1 p.address {
    /* 住所文字設定 */
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 30%;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    font-size: 0.6em;
    line-height: 1.1em;
    text-align: left;
   }

.sns img{
    /*display: flex; */
    flex-wrap: nowrap;
   /*justify-content: flex-end;*/
    margin: 0 0 0 1.2em;

}
.title-box3{
  margin: 1em 0;
  background-color: #e3f2fd;
  border: 2px solid #2196f3;
  letter-spacing: .3px;
}
.title-box3-title{
  color: #fff;
  font-weight: bold;
  background-color: #2196f3;
  padding: 4px 6px;
  text-align: center;
}

.title-box3 p{
  margin: 0;
  padding: 1em;
}
.box01{
margin: 2em auto;
 
 padding: 2em 5em;
    text-decoration: none;
                  font-size:1.1em;
                  font-weight:600;
 align:center;
 width: 40%;
 color:#000; /* 文字色 */
 
 border: 1px solid gray; /* 枠線 */
}
     
　　}
/* 共通
------------------------------------------------------------*/
h1{
         font-family: 'Modern Antiqua', 'Noto Sans JP',serif;

}
h2{
         font-family: 'Modern Antiqua', 'Noto Sans JP',serif;
         /*margin-top:3.5em;
         margin-bottom:1em;*/
         text-align: center;         
}

img{
	max-width: 100%;
	height: auto;
}

.resizeimage img { 
        width: 100%; 
}

.space{
       margin: 0 1.2em;
}

.panel li p{　
       color:#a0522d; 
}


#menuWrap{
　　　　margin-top:0;
　}

.sideline{
  padding: 0.1em/*縦の長さ*/ 0.8em/*文字との距離*/;
  border-left: 8px solid #add8e6;
}
 .enclosed{
	padding:2px 8px; /* 枠と文字の空間 */
	margin:15px 15px; /* 枠の外の空間 */
	background-color:#f9f9f9; /* 枠の背景色 */
	border:1px solid #777; /* 枠の線の太さ・種類・色 */
	border-radius:2px; /* 枠の角を丸くする */
	box-shadow: 1px 2px 2px #ddd; /*影をいれる*/
	font-family:inherit; /* フォントの種類を継承する */
	font-size:0.85em;	/* フォントの大きさ */
}

.enclosed-l{
	padding:5px 5px; /* 枠と文字の空間 */
	margin:15px 0px; /* 枠の外の空間 */
	background-color:#f9f9f9; /* 枠の背景色 */
	border:1px solid #777; /* 枠の線の太さ・種類・色 */
	border-radius:2px; /* 枠の角を丸くする */
	box-shadow: 1px 2px 2px #ddd; /*影をいれる*/
	font-family:inherit; /* フォントの種類を継承する */
	font-size:1.1em;/* フォントの大きさ */
        line-height: 2.8;
}
.titlebar{
    margin: 48px 0 32px;
    padding: 8px 0 8px 12px;
    border-left: 4px solid #800000;
    color: #444;
    font-size: 24px;
    font-weight: bold !important;
    line-height: 1.5;
}
section{
  clear: both;
}
section p{
  color:#5c6366;
}

section h2{
	width: 75%;
         margin-top:1.7em;
          margin-bottom:0.7em;
        padding-bottom:2px;/*テキストから下線までの間隔*/
  	font-size: 1.4em;
	font-weight:normal;
	text-align: center;
           /* border-bottom:1px solid #666666; /*下線の太さと色*/*/
}

section2 h1{
	width: 80%;
	font-size: 1.2em;
	font-weight:normal;
	text-align: center;
}


/*section h2 span {
    font-size:1.3em;
    line-height:3.5;
}*/
section h3 p {
    font-size:1.2em;
    line-height: 1.3em;
}

.inner{
	width: 75%;
	margin: 0 auto;
	padding-bottom: 20px;
}

#sec h1{
         text-align:center; 
         font-family: 'Modern Antiqua', 'Noto Sans JP',serif;
         
         margin-bottom:1em;
}

#sec01 h1 p{
    padding-top:5px;
    padding-bottom:2px;/*テキストから下線までの間隔*/
    font-size:1.8em;
    text-align: center;
    letter-spacing: 0.1em;
    line-height: 1.5;
    border-bottom:3px solid #666666; /*下線の太さと色*/
}

#sec03 .inner, #sec04 .inner{
	border-bottom: 1px solid #a0a0a0;
}

.innerS{
	width: 60%;
	margin: 0 auto;
	padding-bottom: 80px;
}
.innerS2{
	width: 60%;
	margin: 0 auto;
	padding-bottom: 80px;
}



figure {
    border: 0;
   display: inline-block;
    flex-flow: column;
    padding: 5px;
    max-width: 350px;
    margin: auto;
}

figure>img {
    
      display:block;
      max-width: 350px;
      max-height: auto;
    
}

figcaption {
    background-color: #222;
    color: #fff;
    font: italic smaller sans-serif;
   font-size: 0.9em;
    padding: 1px;
    text-align: center;
}

figcaption a{
  
text-decoration: none;
color:#99FFCC;
}



/* サイドメニュー */
.side-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  background: #fff;
  border-left: 2px solid var(--accent);
  box-shadow: -2px 0 6px rgba(0,0,0,0.2);
trabsform: translateX(100%);
  transition: transform  0.3s ease;
  padding: 20px;
  z-index: 1000;
}

.side-menu.open {
transform: translateX(0);
}

.side-menu h3 {
  margin: 0 0 12px;
  font-size: 18px;UTF

  color: var(--accent-dark);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 8px;
}

.side-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.side-menu li {
  margin: 20px 0;
font-size:18px;
border-bottom: 1px solod #ccc;
padding-bottom: 10px;
}

.side-menu a {
  color: var(--accent-dark);
  text-decoration: none;
  font-size: 16px;
}

.side-menu a:hover {
  color: var(--accent-light);
}

/* 背景オーバーレイ */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  opacity:0;
  visibility: hidden;
  transition: opacity0.3s ease;
  z-index: 900;
}

.overlay.show {
  display: block;
}
    /* スマホ用に調整 */

    @media (max-width: 768px) {

      .side-menu {

        width: 80%; /* 画面の80%を占める */

      }

    }

  </style>

</head>

<body>



  <!-- ヘッダー -->

  <header class="header">

    <div class="header-left">

     <img src="index/logo_canard鴨だけ.png" alt="サイトロゴ">

    </div>

    <div class="header-right">

     <a href="https://twitter.com/ShowaMuseum target="_blank">
   <img src="index/Twitter_logo.png" width="24" height="24" alt="X"> 

   <a href="https://www.instagram.com/showamuseum/?hl=ja" target="_blank">
   <img src="index/Instagram_Glyph_Gradient.png" width="24" height="24" alt="Instagram"></a ref>


      <span class="menu-btn">☰</span>

    </div>

  </header>

/* フッター
------------------------------------------------------------*/
#footer{
	clear: both;
	padding: 30px 10px 40px 10px;
            font-size: 11px;
	text-align: center;
	font-size: 0.9em;
}

  <!-- サイドメニュー -->

  <nav class="side-menu" id="sideMenu">

    <ul>

<li><a href="aboutus.html" class="side-menu">昭和美術館について</a></li>
<li><a href="map.html" class="side-menu">行き方　地図</a></li>
							<li><a href="exhibition.html" class="side-menu">展示について</a></li>
                                                        <li><a href="event_details.html" class="side-menu">催事・講座について</a></li>
							<li><a href="collections.html" class="side-menu">収蔵品について</a></li>
							<li><a href="annex.html" class="sideline">館内施設について</a></li>
						
							<li>
							<p><span>〒466-0837</span><span class="space">愛知県名古屋市昭和区汐見町4-1 </span><span class="enclosed"><a href="map.html#route_01">地図</a></span></p>
						
							<p>TEL 052-832-5851</p>
							<p><i class="fa fa-fw fa-envelope"></i>e-Mail:  <a href="mailto:shouwabi@shouwa-museum.com">shouwabi@shouwa-museum.com</a></p>
							<p>営業時間 10:00〜16:00</p>
                                                <p>※休館日は<a href="info.html#calendar">こちら</a></p>
							<p>※展示開催時以外は休館いたします</p>
							
                           </li> 



    </ul>

  </nav>



  <!-- オーバーレイ -->

  <div class="overlay" id="overlay"></div>



  <!-- JavaScript -->

  <script>

    const menuBtn = document.querySelector('.menu-btn');

    const sideMenu = document.getElementById('sideMenu');

    const overlay = document.getElementById('overlay');



    menuBtn.addEventListener('click', () => {

      sideMenu.classList.add('open');

      overlay.classList.add('show');

    });



    overlay.addEventListener('click', () => {

      sideMenu.classList.remove('open');

      overlay.classList.remove('show');

    });

  </script>