a:hover{
    background-color:rgb(255, 160, 160);
    text-decoration-line: none;
}
article ul{
background-color: pink;
}
section h3{
text-align: center;
}

html{
font-size: 16px;
}
body{
width: 960px;
margin: auto;
padding: 0;
}
h1 {
font-size: 0.5rem;
color: purple;
font-weight: normal;
padding: 0 0 0 1rem;
min-height: 1rem;
}
.headgazou {
width:760px;
height:60px;
background: url("http://yamabun.net/logo12.jpg") no-repeat;
}


#ham-menu {
    display: none;              /* ｐｃ非表示 */
    background-color: white;		/*ハンバーガー背景色*/
    box-sizing: border-box;
    height: 100%;
    padding: 0;				/*ハンバーガー内左右上下余白*/
    position: fixed;
    left: -18rem;			/*ハンバーガー横幅 width と合わせる*/
    top: 0;
    transition: transform 0.3s linear 0s;/*0.3s はアニメーションにかかる時間*/
    width: 18rem;			/*ハンバーガー横幅*/
    z-index: 1000;
}

#menu-background {

    background-color: #333; 		/*黒背景*/
    display: block;
    height: 100%;
    opacity: 0;
    position: fixed;
    left: 0;
    top: 0;
    transition: all 0.3s linear 0s;	/*0.3s はアニメーションにかかる時間*/
    width: 100%;
    z-index: -1;
    display: none;          /* PC非表示 */
}

#menu-icon {				/*アイコン　アイコン*/

    background-color: lightgreen;		/*アイコン部分背景色*/
    border-radius: 0 0.31rem 0.31rem 0.31rem;	/*角丸*/
    color: black;			/*アイコン（フォント）色*/
    cursor: pointer;
    display: block;
    font-weight: bold;
    font-size: 2rem;			/*アイコン（フォント）サイズ*/
    height: 2rem;			/*アイコン縦高さ*/
    width: 2rem;			/*アイコン横幅*/
    line-height: 2rem;			/*縦位置中央化*/
    position: fixed;
    left: 0;
    text-align: center;
    top: 0;
    transition: all 0.3s linear 0s;	/*0.3s はアニメーションにかかる時間*/
    z-index: 1000;
    display: none;              /* PC非表示 */
}

#menu-cb {
    display: none;			/*チェックボックス本体は消しておく*/
}

#menu-cb:checked ~ #ham-menu,
#menu-cb:checked ~ #menu-icon {
transform: translate(18rem);		/*メニュー本体横幅 width と合わせる*/
}

#menu-cb:checked ~ #menu-background {
    opacity: 0.5;
    z-index: 999;
}



ul.mainmenu{
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
ul.mainmenu li{
font-size: 1.1rem;
width : calc(100% / 5);
box-sizing: border-box;
border: solid 1px #AAAAAA;
border-bottom: solid 5px rgb(0, 110, 0);
list-style-type: none;
}
.mainmenu a{
text-align: center;
display:block;
padding: 0.5rem 0;
width: 100%;
background-color: black;
color: white;
}
.mainmenu a:hover{
background-color: green;
color: white;
}

.breadcrumb {
  padding-left:0;
  margin-left:0;
}

.breadcrumb li{
  display:inline;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
}

.breadcrumb li:after{/* >を表示*/
  content: '>';
  padding: 0 3px;
  color: #555;
}

.breadcrumb li:last-child:after{
  content: '';
}

.breadcrumb li a {
    text-decoration: none;
    color: #52b5ee;/*色*/
}

.breadcrumb li a:hover {
text-decoration: underline;
}
/* oooooooooooooo	メインとサイドの表示方法	ooooooooooo */
div.main-box{
display: flex;
}

/* 表示画面 */
#stage {
	position: relative;
	width: 100%;
	height:240;
    margin: 0 auto;
    overflow: hidden;
}
/* 表示枠 */
#frame {
	width: 640px;
	height: 240px;
    position: relative;
    margin:auto;
/*	overflow: hidden; */
}
/*全ての写真を水平一列に格納したdiv、#photosに,
スライドショーの animation を設定*/
#photos {
	position:absolute;
	top:0;
width: 4480px;
	animation: imgPassToLeft0 30s infinite;
}
/*各写真の並び位置を設定
#photo0と#photo5、#photo6と#photo1は同じスライド*/
#photo0, #photo1, #photo2, #photo3, #photo4, #photo5, #photo6 {
    display: block;
	float:left;
	position:relative;
}
/* 全てのラジオボタンを非表示に */
#back1,#back2,#back3,#back4,#back5,#next1,#next2,#next3,#next4,#next5{
	display: none;
}
/*送りボタン文字（＜、＞）の設定*/
.b_left span, .b_right span {
	position: absolute;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 40px;
	font-weight: bold;
	opacity:0;
	top: 80px;
	color:#EEE;
}
.b_left span {
	left: 10px;
}
.b_right span {
	left: 600px
}
/*ボタン文字hover時の設定*/
.pic:hover > label div span {
	opacity:1;
	color:#EEE;
}
.pic label div span:hover {
	color:#f00;
	cursor:pointer;
}
/* 各送りボタンクリック時のanimation設定 */
#next1:checked ~ #photos {
	animation: imgPassToLeft1 30s infinite;
	animation-delay: -4.8s;
}
#next2:checked ~ #photos {
	animation: imgPassToLeft2 30s infinite;
	animation-delay: -10.8s;
}
#next3:checked ~ #photos {
	animation: imgPassToLeft3 30s infinite;
	animation-delay: -16.8s;
}
#next4:checked ~ #photos {
	animation: imgPassToLeft4 30s infinite;
	animation-delay: -22.8s;
}
#next5:checked ~ #photos {
	animation: imgPassToLeft5 30s infinite;
	animation-delay: -28.8s;
}
#back1:checked ~ #photos {
	animation: imgPassToRight1 30s infinite;
	animation-delay: -28.8s;
}
#back2:checked ~ #photos {
	animation: imgPassToRight2 30s infinite;
	animation-delay: -22.8s;
}
#back3:checked ~ #photos {
	animation: imgPassToRight3 30s infinite;
	animation-delay: -16.8s;
}
#back4:checked ~ #photos {
	animation: imgPassToRight4 30s infinite;
	animation-delay: -10.8s;
}
#back5:checked ~ #photos {
	animation: imgPassToRight5 30s infinite;
	animation-delay: -4.8s;
}
/* animation設定 */
@keyframes imgPassToLeft0 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@keyframes imgPassToLeft1 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@keyframes imgPassToLeft2 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@keyframes imgPassToLeft3 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@keyframes imgPassToLeft4 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@keyframes imgPassToLeft5 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@keyframes imgPassToRight1 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}
@keyframes imgPassToRight2 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}
@keyframes imgPassToRight3 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}
@keyframes imgPassToRight4 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}
@keyframes imgPassToRight5 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}
article{
box-sizing: border-box;
width: 760px;
border: solid 1px #AAAAAA;
}
.main-box div.side-bar{
box-sizing: border-box;
width: 200px;
border-right: solid 1px #AAAAAA;
border-bottom: solid 1px #AAAAAA;
border-top: solid 1px #AAAAAA;
}
/* side-menu スタイル */
.side-bar{
background-color: lightgreen;
}
.migi-menu {
    padding: 0;
    width: 199px;
}
.migi-menu a {
    display: block;
    margin: 1.5px 0;
	padding : 11px 12px;
	background : rgb(155, 171, 241);
    color : black;
    font-weight: bold;
    cursor :pointer;
    transition: all 0.5s;
}
.migi-menu a:hover{
	background: green;
}
.migi-menu .migi-title {
    background :rgb(247, 96, 126);
}
.migi-menu .migi-title:hover {
    background :rgb(247, 96, 126);
}



footer{
clear: both;
font-size: 0.5em;
color: purple;
font-weight: normal;
}