@charset"utf-8";
@media screen and (max-width: 799px) {
#logo_main{
 position: relative;
 top:40px;
 width:176px;
 margin-bottom:70px;
}
#left_bot_box_01{
 width:70vw;
 margin-left:6vw;
}
#left_bot_01{
 position:relative;
 top:24vw;
 left:20vw;
}
#left_bot_02{
 position:relative;
 top:30vw;
 left:20vw;
}
#left_bot_03{
 position:relative;
 top:36vw;
 left:20vw;
}
#left_bot_04{
 position:relative;
 top:42vw;
 left:20vw;
}
#left_bot_05{
 position:relative;
 top:48vw;
 left:20vw;
}
#left_bot_06{
 position:relative;
 top:54vw;
 left:20vw;
}
#left_bot_07{
 position:relative;
 top:60vw;
 left:20vw;
}
#left_bot_08{
 position:relative;
 top:66vw;
 left:20vw;
}
#left_bot_09{
 position:relative;
 top:72vw;
 left:20vw;
}
#left_bot_10{
 position:relative;
 top:18vw;
 left:16vw;
}
#left_bot_10 a{
 font-size:120%;
 color:#ffffff;
 text-decoration:none;
 text-align:left;
 font-weight:bold;
}
.slid_b a{
 color:#ffffff;
 text-decoration:none;
 text-align:left;
 font-size:240%;
 font-weight:bold;
}
}
@media screen and (min-width: 800px) {
#logo_main{
 position: relative;
 top:40px;
 width:176px;
 margin-bottom:70px;
}
#left_tit_01{
 margin-bottom:40px;
}
#left_bot_box_01{
 width:176px;
 margin-left:20%;
}
#left_bot_01{
 position:relative;
 top:6vw;
 left:22vw;
}
#left_bot_02{
 position:relative;
 top:9vw;
 left:22vw;
}
#left_bot_03{
 position:relative;
 top:12vw;
 left:22vw;
}
#left_bot_04{
 position:relative;
 top:15vw;
 left:22vw;
}
#left_bot_05{
 position:relative;
 top:18vw;
 left:22vw;
}
#left_bot_06{
 position:relative;
 top:21vw;
 left:22vw;
}
#left_bot_07{
 position:relative;
 top:24vw;
 left:22vw;
}
#left_bot_08{
 position:relative;
 top:27vw;
 left:22vw;
}
#left_bot_09{
 position:relative;
 top:30vw;
 left:22vw;
}
#left_bot_10{
 position:relative;
 top:2vw;
 left:6vw;
}
#left_bot_10 a{
 font-size:200%;
 color:#ffffff;
 text-decoration:none;
 text-align:left;
 font-weight:bold;
}

.slid_b a{
 color:#ffffff;
 text-decoration:none;
 text-align:left;
 font-size:300%;
 font-weight:bold;
}
}

#slidemenu{
 position: fixed;
 top: 80px;
 left: 0px;
 width: 40px;
 height: 40px;
 z-index:1000;
}
/* ラジオボタンを消す */
#slidemenu input{
 display: none;
 z-index:200;
}

@media screen and (max-width: 799px){
/* 開閉ボタン */
#button_open{
 position: fixed;
 top:2vw;
 left:0px;
 width: 40px;
 height: 40px;
 text-align: right;
 cursor: pointer;
 z-index:1000;
 background:url('../images/menu_0.gif');
 background-position:left top;
 background-repeat:no-repeat;
}
#button_close {
 position: fixed;
 top:14px;
 left:0px;
 width: 40px;
 height: 40px;
 text-align: right;
 cursor: pointer;
 z-index:300;
 background:url('../images/menu_1.gif');
 background-position:left top;
 background-repeat:no-repeat;
}
#face_bt{
 position: fixed;
 top:2vw;
 right:0px;
 width: 40px;
 height: 40px;
 z-index:100;
}
#tweet_bt{
 position: fixed;
 top:2vw;
 right:36px;
 width: 40px;
 height: 40px;
 z-index:100;
}
}
@media screen and (min-width: 800px){
/* 開閉ボタン */
#button_open{
 position: fixed;
 top:calc(50vh - 20px);
 left:0px;
 width: 40px;
 height: 40px;
 text-align: right;
 cursor: pointer;
 z-index:300;
 background:url('../images/menu_0.gif');
 background-position:left top;
 background-repeat:no-repeat;
}
#button_close {
 position: fixed;
 top:calc(50vh - 20px);
 left:0px;
 width: 40px;
 height: 40px;
 text-align: right;
 cursor: pointer;
 z-index:300;
 background:url('../images/menu_1.gif');
 background-position:left top;
 background-repeat:no-repeat;
}
#face_bt{
 position: fixed;
 top:calc(50vh - 20px);
 right:20px;
 width: 40px;
 height: 40px;
 z-index:99999;
}
#tweet_bt{
 position: fixed;
 top:calc(50vh + 20px);
 right:20px;
 width: 40px;
 height: 40px;
 z-index:99999;
}
}

/* 初期値はオープンボタンはblock、クローズボタンはnone */
#button_open {
 display: block;
}
#button_close {
 display: none;
}

/****************************************
メニューのスタイル ここから
****************************************/
@media screen and (max-width: 799px) {
#menu {
 margin: 0;
 padding: 0;
 width: 0; /* 初期値は横幅が0で見えない状態 */
 position:fixed;
 top: 0vw;
 left: 0px;
 color: #FFFFFF;
 z-index: 100;
 overflow: hidden;
 /* 表示するときにアニメーションさせる */
 -webkit-transition: all ease-in-out;
 -webkit-transition-delay: 0.5s;
 -moz-transition: all ease-in-out 0.5s;
 -o-transition: all ease-in-out 0.5s;
 transition: all ease-in-out 0.5s;
}
}
@media screen and (min-width: 800px) {
#menu {
 margin: 0;
 padding: 0;
 width: 0; /* 初期値は横幅が0で見えない状態 */
 position:fixed;
 top: 0px;
 left: 20px;
 color: #FFFFFF;
 z-index: 100;
 overflow: hidden;
 /* 表示するときにアニメーションさせる */
 -webkit-transition: all ease-in-out;
 -webkit-transition-delay: 0.5s;
 -moz-transition: all ease-in-out 0.5s;
 -o-transition: all ease-in-out 0.5s;
 transition: all ease-in-out 0.5s;
}
}
/****************************************
メニューのスタイル ここまで
****************************************/

/****************************************
オープンボタンにチェック時の処理 ここから
****************************************/
/* オープンボタンを非表示 */
#open:checked ~ #button_open {
  display: none;
}
/* クローズボタンを表示 */
#open:checked ~ #button_close {
  display: inline;
}
/* メニューを表示（横幅をつける） */
@media screen and (max-width: 799px) {
   /* 表示領域が640px以上の場合に適用するスタイル */
 #open:checked ~ #menu {
 width:90vw;
 height:100vh;
 overflow:hidden;
 float:left;
 text-align:left;
 background:url('../images/kasa.gif');
 background-size:cover;
 background-position:center right;
 background-repeat:no-repeat;
 }
}
@media screen and (min-width: 800px) {
 /* 表示領域が800px以上の場合に適用するスタイル */
 #open:checked ~ #menu {
 width:90vh;
 height:100vh;
 overflow:hidden;
 float:left;
 text-align:left;
 background:url('../images/kasa.gif');
 background-size:cover;
 background-position:center right;
 background-repeat:no-repeat;
 }
}

/****************************************
オープンボタンにチェック時の処理 ここまで
*****************************************/