/* ============================================================
   共通スタイル(common.css)
   全ページで共通のレイアウト・ハンバーガーメニュー機構をまとめたもの。
   ページごとの色やフォントサイズの違いは、各ページのCSS
   (top.css / caption.css / pcyohi.css / rule.css / link.css)
   側で --wrap-bg / --accent / --p-line-height を上書きして調整する。
   ============================================================ */

body{
margin-top:0;
background:url("../images/wall01.jpg");
}

#wrap{
max-width:820px;
width:100%;
margin-top:0;
margin-left:auto;
margin-right:auto;
/*background:var(--wrap-bg, #3399cc);*/
background:var(--wrap-bg, #ffffff);
display:flex;
flex-wrap:wrap;
box-sizing:border-box;
}

/* ハンバーガーメニューの開閉状態を保持するチェックボックス本体は非表示 */
#menu-toggle{
display:none;
}

#header{
margin-top:0;
margin-bottom:0;
width:100%;
box-sizing:border-box;
position:relative;
display:flex;
align-items:center;
justify-content:center;
padding:10px 0;
}

#header img{
max-width:90%;
height:auto;
}

/* ハンバーガーボタン(通常のPC幅では非表示) */
.hamburger-label{
display:none;
position:absolute;
left:12px;
top:50%;
transform:translateY(-50%);
width:32px;
height:24px;
flex-direction:column;
justify-content:space-between;
cursor:pointer;
z-index:20;
}

.hamburger-label span{
display:block;
height:4px;
border-radius:2px;
background:var(--accent, #3399ff);
transition:transform 0.3s ease, opacity 0.3s ease;
}

/* メニューが開いている間は「≡」を「×」に変形させ、閉じられることを分かりやすくする */
#menu-toggle:checked ~ #header .hamburger-label span:nth-child(1){
transform:translateY(10px) rotate(45deg);
}
#menu-toggle:checked ~ #header .hamburger-label span:nth-child(2){
opacity:0;
}
#menu-toggle:checked ~ #header .hamburger-label span:nth-child(3){
transform:translateY(-10px) rotate(-45deg);
}

#side1{
width:200px;
flex:0 0 200px;
background:white;
margin-top:0;
box-sizing:border-box;
}

#side2{
flex:1 1 300px;
min-width:0;
background:white;
padding-left:5px;
padding-right:5px;
margin-top:0;
box-sizing:border-box;
overflow-wrap:break-word;
}

#side1 #menu{
margin-left:0.2em;
margin-right:0.2em;
}

#side1 #menu ul{
line-height:2;
border-width:4px;
border-style:double;
border-color:var(--accent, #3399ff);
list-style-type:none;
font-size:11pt;
text-indent : 0.5em;
margin-left:0;
padding-left:0;
}

#side1 #menu ul li{
  line-height: 2.5;
}

#side1 #menu ul li a{
 text-decoration : none;
 width : 100%;
 display : block;
}

#sel {
  background-color :yellow;
}

#side1 #menu ul li a:visited {
color:maroon;
text-decoration:none;
}

#side1 #menu ul li a:hover
{
 background-color : yellow;
 text-decoration:none;
font-weight:bold;

}

/* 不要・・・あるとリストのポチが表示されない
ul {
list-style-type:none;
}

li
 {
line-height:2.5;
}
*/

h1{
font-size:16pt;
}

h2{
font-size:14pt;
}

h3{
font-size:13pt
}

p
{font-size:12pt;
line-height:var(--p-line-height, 1.5)
}

address{
text-align:center;
}

#foot{
  clear:both;
  max-width:820px;
  width:100%;
  box-sizing:border-box;
  margin-left:auto;
  margin-right:auto;
}

#copyrightframe{
  border: 0px;
  margin:auto;
  padding:0px;
  width: 100%;
  height: 50px;
  vertical-align: middle;
}

#copyright{
  padding:0px;
  width:100%;
  height:50px;
  text-align: center;
  vertical-align: middle;
}

#copyrightbody{
  margin: 0px;
  padding:0px;
}

#copyrightp{
  margin-block-start:0px;
  margin-block-end: 0px;
  width:100%;
  height:50px;
  text-align: center;
  line-height: 50px;
  background:#33ccff;
}

/* ============ スマホ・タブレット幅 (700px以下) ============ */
@media (max-width:700px){

  #wrap{
    flex-direction:column;
  }

  #header{
    justify-content:flex-start;
    padding-left:52px;
  }

  .hamburger-label{
    display:flex;
  }

  #side1{
    flex:1 1 100%;
    width:100%;
  }

  /* リンク一覧(#menu)だけを畳む。更新日など#menuの外の要素は常に表示される */
  #side1 #menu{
    max-height:0;
    overflow:hidden;
    transition:max-height 0.35s ease;
  }

  /* チェックボックスがONの時だけメニューを開く */
  #menu-toggle:checked ~ #side1 #menu{
    max-height:700px;
    overflow-y:auto;
  }

  #update-date{
    text-align:center;
    margin:0;
    padding:8px 0;
    border-bottom:1px solid #cce6f5;
  }

  #side2{
    flex:1 1 100%;
    width:100%;
  }

  /* コピーライト表示が2行になっても切れないように */
  #copyrightframe{
    height:70px;
  }
  #copyrightp{
    height:70px;
    line-height:1.3;
    padding-top:10px;
    font-size:10pt;
    box-sizing:border-box;
  }
}