.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background: #fff;
}

.logo {
  font-size: 24px;
}

/* ここから下がハンバーガーメニューに関するCSS */
  
/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上にする */
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #333;
  transition: 0.5s;
  position: absolute;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 8px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}
  
/* メニューのデザイン*/
.nav_content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background: #fff;
  transition: .5s;
}

/* メニュー黒ポチを消す */
.nav_list {
  list-style: none;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  left: 0;/* メニューを画面に入れる */
}
body       { font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; text-align: center; margin: 0 auto; padding: 0 }
a  { color: gray; text-decoration: none }
a:link { color: gray }
a:visited { color: #3c3c3c }
a:hover { color: #cc0066 }
a:active { color: #cc0066 }
h1  { font-size: 1em; font-weight: bold; text-decoration: none; padding: 1em 0 0.8em }
h2 { font-size: 1em; line-height: 1.5em; padding-top: 1em; padding-bottom: 0.8em }
main_access#h2      { font-size: 0.9em; font-weight: bold; text-decoration: none; margin-top: 0.3em; margin-bottom: 0.3em; padding: 0 }
main_access#p { font-size: 1em; font-weight: 100 }
p     { font-size: 0.9em; font-weight: lighter; line-height: 1.5 }
table   { font-size: 1em; font-weight: 100; line-height: 3; text-decoration: none; border-style: dotted none none; border-width: 3px 0 0; border-color: silver }
td   { text-align: left; letter-spacing: 1px; margin: 0; padding: 15px; vertical-align: top; border-style: none none dotted; border-width: 0 0 3px; border-color:   silver; border-spacing: 0
  }
#wrapper   { text-align: left; margin: 0 auto; padding: 0; width: 950px }
#header        { margin-top: 0; margin-bottom: 0; width: 950px; height: 64px }
#logo             { margin-top: 0; padding-top: 0; width: 190px; height: 64px; float: left; vertical-align: top }
#menu        { padding-top: 40px; padding-right: 30px; width: 700px; height: 64px; float: right }
#container { }
#title_a        { background-image: url("../img/t_about.jpg"); background-repeat: no-repeat; background-position: left center; margin-left: 8px; padding-top: 10px; padding-bottom: 20px; width: 950px; height: 60px; clear: both }
#title_sa        { background-image: url("../img/t_satsuei.jpg"); background-repeat: no-repeat; background-position: left center; margin-left: 8px; padding-top: 10px; padding-bottom: 20px; width: 950px; height: 60px; clear: both }
#title_st        { background-image: url("../img/t_studio.jpg"); background-repeat: no-repeat; background-position: left center; margin-left: 8px; padding-top: 10px; padding-bottom: 20px; width: 950px; height: 60px; clear: both }
#title_p        { background-image: url("../img/t_photo.jpg"); background-repeat: no-repeat; background-position: left center; margin-left: 8px; padding-top: 10px; padding-bottom: 20px; width: 950px; height: 60px; clear: both }
#title_c        { background-image: url("../img/t_contact.jpg"); background-repeat: no-repeat; background-position: left center; margin-left: 8px; padding-top: 10px; padding-bottom: 20px; width: 950px; height: 60px; clear: both }
#contents  { font-size: 0.8em; font-weight: lighter; line-height: 2; text-decoration: none; margin: 5px 0 120px; padding: 0; width: 730px; float: right }
#sub      { margin: 0; padding: 0; width: 200px; float: left }
#footer     { font-size: 0.7em; font-weight: lighter; text-decoration: none; text-align: center; padding: 0.5em 0; clear: both }
#f_ad { }
p#s_s_menu { padding: 0 0 0 60px; font-size:small; line-height:190%;}
.logo_link a      { background-image: url("../img/studioyu.jpg"); background-repeat: no-repeat; background-position: center; display: block; width: 185px; height: 60px; vertical-align: top } 
.logo_link span  { visibility: hidden; }

/*----------------------------------------
  menu ロールオーバー 
  ----------------------------------------*/

#g_navi    {  text-align: center; height: 20px;
　position: relative;
  overflow: hidden; }
#g_navi ul { margin: 0; padding: 0 ;
  float: right; }
#g_navi li { list-style-type: none; display: inline;
  float: left; }
#g_navi li a  { text-decoration: none; text-indent: -9999em; display: block; height: 20px; float: left; overflow: hidden}

/*-----  menu  ----- */
   
#g_navi li.m_about a    { background-image: url("../img/menu.jpg"); background-repeat: no-repeat; background-position: 0 0; width: 75px }
#g_navi li.m_satsuei a { background-image: url(../img/menu.jpg); background-repeat: no-repeat; background-position: -75px 0; width: 140px }
#g_navi li.m_studio a  { background-image: url(../img/menu.jpg); background-repeat: no-repeat; background-position: -215px 0; margin: 0; padding: 0; width: 100px }
#g_navi li.m_photo a  { background-image: url(../img/menu.jpg); background-repeat: no-repeat; background-position: -315px 0; margin: 0; padding: 0; width: 95px }
#g_navi li.m_contact a  { background-image: url(../img/menu.jpg); background-repeat: no-repeat; background-position: -410px 0; margin: 0; padding: 0; width: 110px }
#g_navi li.m_blog a  { background-image: url(../img/menu.jpg); background-repeat: no-repeat; background-position: -520px 0; margin: 0; padding: 0; width: 70px }

/*-----  menu hover ----- */

#g_navi li.m_about a:hover  { background-image: url(../img/menu.jpg); background-repeat: no-repeat; background-position: 0 -40px; width: 75px }
#g_navi li.m_satsuei a:hover  { background-image: url(../img/menu.jpg);background-repeat: no-repeat; background-position:-75px -40px; margin: 0; padding: 0; width: 140px }
#g_navi li.m_studio a:hover  { background-image: url(../img/menu.jpg); background-repeat: no-repeat; background-position: -215px -40px; margin: 0; padding: 0; width: 100px }
#g_navi li.m_photo a:hover  { background-image: url(../img/menu.jpg); background-repeat: no-repeat; background-position: -315px -40px; margin: 0; padding: 0; width: 95px }
#g_navi li.m_contact a:hover  { background-image: url(../img/menu.jpg); background-repeat: no-repeat; background-position: -410px -40px; margin: 0; padding: 0; width: 110px }
#g_navi li.m_blog a:hover  { background-image: url(../img/menu.jpg); background-repeat: no-repeat; background-position: -520px -40px; margin: 0; padding: 0; width: 70px }

/*-----  menu on ----- */

#g_navi li.m_about_on a  { background-image: url(../img/menu.jpg); background-repeat: no-repeat; background-position: 0 -20px; width: 75px }
#g_navi li.m_satsuei_on a  { background-image: url(../img/menu.jpg);background-repeat: no-repeat; background-position:-75px -20px; margin: 0; padding: 0; width: 140px }
#g_navi li.m_studio_on a  { background-image: url(../img/menu.jpg); background-repeat: no-repeat; background-position: -215px -20px; margin: 0; padding: 0; width: 100px }
#g_navi li.m_photo_on a  { background-image: url(../img/menu.jpg); background-repeat: no-repeat; background-position: -315px -20px; margin: 0; padding: 0; width: 95px }
#g_navi li.m_contact_on a  { background-image: url(../img/menu.jpg); background-repeat: no-repeat; background-position: -410px -20px; margin: 0; padding: 0; width: 110px }
#g_navi li.m_blog_on a  { background-image: url(../img/menu.jpg); background-repeat: no-repeat; background-position: -520px -20px; margin: 0; padding: 0; width: 70px }

/*----------------------------------------
  footer
  ----------------------------------------*/

#footer #f_navi {
	text-align:center;
}
#footer #f_navi li {
	display:inline;
	list-style-type:none;
	margin-right:6px;
	padding-left:10px;
}
#footer #f_navi li+li {
	border-left:1px solid #999;
}