/*トップ　ウインドウ全体の設定*/
#body_top{
background-color: Black;
}

#wrap{
}

/*canvas*/
#canvas{
display: block;
margin: 0 auto;
}

/*トップ　メニュー*/
#gnav_top{
background: Black;
visibility: hidden;
}

#gnav_top ul{
list-style: none;
text-align: center;
}

#gnav_top li+li{
border-left: #222 2px solid;
}

@media screen and (min-width:641px){
#gnav_top li{
display: inline-block;
width: 140px;
}
#gnav_top a{
display: block;
padding: 2px 2px;
text-align: center;
text-decoration: none;
color: #888;
font-weight: bold;
font-size: 140%;
}
}

@media screen and (max-width:640px){
#gnav_top li{
display: inline-block;
width: 100px;
}
#gnav_top a{
display: block;
padding: 2px 2px;
text-align: center;
text-decoration: none;
color: #888;
font-weight: bold;
font-size: 110%;
}
}

/*h1トップの設定*/
#h1_top{
display: none;
}

/*ウインドウ全体の設定*/
.body{
width: 90%;
max-width: 800px;
margin: 0 auto;
background-color: #fff;
}

#wrap{
background-color: #fff;
}

#menu-btn-check{
display: none;
}

/*メニュー*/
@media screen and (min-width:641px){
#gnav{
background: #fff;
}

#gnav ul{
overflow: hidden;
list-style: none;
text-align: center;
}

#gnav li{
display: inline-block;
width: 120px;
border-bottom: #777 1px solid;
}

#gnav a{
display: block;
padding: 10px 2px;
text-align: center;
text-decoration: none;
color: #000;
}
}

@media screen and (max-width:640px){
.menu-btn {
/*	position: fixed;*/
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	height: 60px;
	width: 60px;
	justify-content: center;
	align-items: center;
	z-index: 99;
	background-color: #fff;
	cursor: pointer;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
	content: '';
	display: block;
	height: 3px;
	width: 25px;
	border-radius: 3px;
	background-color: #444;
	transition: 0.5s;
	position: absolute;
}
.menu-btn span:before {
	bottom: 8px;
}
.menu-btn span:after {
	top: 8px;
}

#menu-btn-check:checked ~ .menu-btn span {
	background-color: rgba(255, 255, 255, 0);
}
#menu-btn-check:checked ~ .menu-btn span::before {
	bottom: 0;
	transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
	top: 0;
	transform: rotate(-45deg);
}

#gnav {
	width: 200px;
	height: 100%;
	position: fixed;
	top: 0;
	right: -201px;
	z-index: 98;
	background-color: #fff;
	transition: all 0.5s;
border-left: solid 1px #ccc;
}
#gnav ul {
	padding: 70px 10px 0;
}
#gnav ul li {
	border-bottom: solid 1px #444;
	list-style: none;
}
#gnav ul li a {
	display: block;
	width: 100%;
	font-size: 110%;
	box-sizing: border-box;
	color:#000;
	text-decoration: none;
	padding: 9px 15px 10px 0;
	position: relative;
}
#gnav li a::before {
	content: "";
	width: 7px;
	height: 7px;
	border-top: solid 2px #444;
	border-right: solid 2px #444;
	transform: rotate(45deg);
	position: absolute;
	right: 11px;
	top: 16px;
}
#menu-btn-check:checked ~ #gnav {
	right: 0;
}
}

#gnav li.gnav_selected{
font-weight: bold;
}

/*コンテンツ*/
#page_comment{
margin-top: 40px;
text-align: center;
}

.main_contents{
margin-top: 40px;
text-align: center;
}

.hr-text{
font-size: 160%;
font-weight: bold;
position: relative;
outline: 0;
border: 0;
text-align: center;
height: 1.5em;
margin-bottom: 25px;
}
.hr-text::before{
content: '';
background: -webkit-linear-gradient(left, transparent, #818078, transparent);
background: linear-gradient(to left, transparent, #818078, transparent);
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 1px;
}
.hr-text::after{
content: attr(data-content);
position: relative;
display: inline-block;
/*color: black*/;
padding: 0 0.5em;
line-height: 1.5em;
color: #666;
background-color: #fff;
}

.detail_list{
text-align: left;
max-width: 300px;
margin: auto;
margin-bottom: 20px;
}

#notes{
text-align: left;
max-width: 500px;
margin: auto;
}

h2{
color: #222;
border-bottom: #bbb 2px solid;
padding: 5px 20px;
margin-bottom: 30px;
font-size :160%;
}

h3{
margin-bottom: 20px;
font-size :130%;
}

/*中央表示画像の設定*/
.photo_center{
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}

/*フッターの設定*/
footer{
padding-top: 20px;
}

#goto_top{
float: right;
}

#footer_menu{
margin: 0 20px 10px 0;
color: #888;
float: left;
}

#footer_menu > li > a{
text-decoration: underline;
color: #888;
}

#flex_shop_name{
clear: both;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}

#shop_name{
margin-left: 10px;
font-weight: bold;
font-size: 130%;
}

#copyright{
text-align: center;
}

/*お問い合わせページ*/
form.contact_form{
	font-size: 110%;
	width: 400px;
	margin: 0 auto;
	text-align: left;
}

input, textarea, select, button{
	font-size: 110%;
}

.contact_item{
	margin-bottom: 20px;
}

#design{
  position      : relative;            /* タイトル用に親要素定義  */
  box-sizing    : border-box;          /* 罫線・余白も含む大きさ  */
  margin        : 30px auto 20px auto;    /* BOXの位置               */
/*  max-width     : 500px;               /* BOXの最大横幅           */
/*  background    : #fff;                /* BOXの背景色             */
/*  padding       : 33px 10px 25px 10px; /* BOX内の余白             */
	padding: 20px 10px 0px 20px;
  border        : 3px solid #0059b3;   /* BOXの枠線               */
	border: 1px solid #aaa;
}
#design::before{
  position      : absolute;          /* 親からの相対位置の定義  */
  display       : inline-block;      /* インラインボックス定義  */
/*  box-sizing    : border-box;        /* 罫線・余白も含む大きさ  */
  line-height   : 1;                 /* 1行の高さを初期化       */
/*  background    : #0059b3;           /* タイトル背景色          */
	background: #fff;
/*  color         : #ffffff;           /* タイトルの文字色        */
  content       : attr(title);       /* タイトルに[title]を表示 */
/*  font-weight   : bold;              /* タイトルは太字          */
	font-size: 110%;
  padding       : 0 15px;          /* タイトル内の余白        */
/*  top           : -17px;             /* タイトル上位置はマイナス*/
	top: -0.5em;
/* left          : 16px;              /* タイトル右位置は1文字分 */
	left: 1em;
/*  border-radius : 16px;              /* タイトルの角丸          */
/*  font-size     : 16px;              /* タイトルの文字サイズ    */
}