@charset "UTF-8";
/* CSS Document */


@media only screen and (max-width : 480px){
/* スマホ用ナビメニュー ここから */
header {
  padding:10px;
  background: #288ec1;
 margin: 0;
   position: fixed;
   width: 100%;
   top: 0px;
   z-index: 99;
}/* ヘッダーは上に固定表示してます */

#nav-drawer {
  position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 24px;
  vertical-align: middle;
}

/*ハンバーガーの形をCSSで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 5px;/*線の太さ*/
  width: 40px;/*長さ*/
  border-radius: 3px;
  background: #FEFEFE;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒箇所*/
#nav-close {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*メニューの中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 75%;
  max-width: 340px;/*最大幅（お好みで調整を）*/
  height: 100%;
  background: #FEFEFE;
  transition: .3s ease-in-out;
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);
}

/*チェックがついたら表示させる*/
#nav-input:checked ~ #nav-close {
  display: block;
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

.header-logo-menu{
 display: flex;
 display: -moz-flex;
 display: -o-flex;
 display: -webkit-flex;
 display: -ms-flex;
 flex-direction: row;
 -moz-flex-direction: row;
 -o-flex-direction: row;
 -webkit-flex-direction: row;
 -ms-flex-direction: row;
}

/*ロゴやサイトタイトルをセンタリング*/
.logo-area{
 text-align: left;
 padding-left: 30px;
 color: #FEFEFE;
 font-weight: bold;
 vertical-align: middle;
}

.logo-area2{
 text-align: ceneter;
 margin: auto;
}
}
/* スマホ用ナビメニュー　ガワ 終 */

@media only screen and (max-width : 480px){
/* スマホ用ナビメニュー　中身 */
nav#head {
 margin: 12px auto;
 text-align:center;
 width: 100%;
 z-index: 20;
 position: relative;
}

#nav-content ul, ol {
  padding: 0;
  position: relative;
}

#nav-content ul li, ol li {
  color: #2d8fdd;
  border-left: solid 6px #2d8fdd;/*左側の線*/
  background: #cfe0fe;/*背景色*/
  margin-bottom: 3px;/*下のバーとの余白*/
  line-height: 1.5;
  padding: 0.5em 0.5em 0.5em 2em;
  list-style-type: none!important;/*ポチ消す*/
  font-size: 108%;
	font-weight: bold;
}

#nav-content p.rogo {
 text-align: center;
 margin: 10px auto;
}
}
/* スマホ用ナビメニュー　中身終 */


/* フッター nav */
nav#footer {
 margin: 0 auto;
 padding: 30px 0;
 background-color: #9181a0;
 color: #FEFEFE;
 font-size: 90%;
 text-align: center;
 line-height: 2em;
}

nav#footer table.footer {
 margin: auto;
}

nav#footer table.footer td {
 padding: 6px 20px;
 text-align: left;
 vertical-align:top;
 color: #FEFEFE;
 font-size: 85%;
 line-height: 2em;
 background-color: #9181a0;
 border-left: solid 2px #DDDDDD;
}

table.footer td.line {
 border-right: solid 2px #DDDDDD;
}

table.footer td p {
 line-height:1.4;
}

div#copy {
 text-align: center;
 font-size: 80%;
}

/* フッターのリンク設定 */
nav#footer a:link {
 color:#FEFEFE;
 text-decoration:none;
}

nav#footer a:visited {
 color:#EEEEEE;
 text-decoration:none;
}

nav#footer a:hover {
 color:#936eb2;
 font-weight: normal;
}
/* フッターのリンク設定　ここまで */
/* フッター nav　終 */

/* TOPへ戻る */
p.gotop {
 width: 90%;
 margin: 10px;
 text-align: right;
 color: #333333;
 font-weight: bold;
}

p.gotop a:link {
 color:#333333;
 text-decoration:none;
}

p.gotop a:visited {
 color:#333333;
 text-decoration:none;
}

p.gotop a:hover {
 color:#333333;
 text-decoration:none;
}