@charset "utf-8";

/*----------------------------------------------------------------

layout Set

----------------------------------------------------------------*/

/* Header
----------------------------------------------- */
#header {
width: 100%;
padding: 0 0 10px;
margin-bottom: 10px;
z-index: 100;
position: relative;
border-bottom: 1px solid #e5e5e5;
border-top: 10px solid #0351A4;
}
#header.collabopink {
border-top: 10px solid #ee99bb;
padding: 0 0 0 ;
}
#header h1{
font-size: 1em; 
margin: 10px 0 0;
padding: 0 0 0 10px;
max-width: 60%;
}

/* ナビゲーション */
#global-nav {
position: absolute;
margin: 0;
height: auto;
overflow: hidden;
z-index: 1000;
top: 2px;
right: 0;
}
#menu {
display: none;
}

/* 768px～ Header用メディアクエリ開始 */
@media screen and (min-width : 768px) {
#header {
font-size: 0.75em;
margin-bottom: 15px;
padding: 0;
}
#header h1 {
font-size: 1em; 
margin: 20px 0 15px;
padding: 0 0 0 ;
text-align: center;
max-width: 100%;
height: auto;
}

/* ナビゲーション */
#global-nav {
clear: both;
position: relative;
font-size: 1.3em;
}
#menu {
display: block;
height: auto;
margin: 0 auto 0;
padding: 0;
overflow: hidden;
text-align: center;
}
/* 728px以下スクロール用 */
@media screen and (max-width : 768px) {
#global-nav {
box-sizing: border-box;
border-right: 3px solid #666;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
#menu { border-right: none;margin-bottom: 0;}
}
/* End 728px以下スクロール用 */

#menu li {
list-style: none none;
display: inline-block;
height: 40px;
padding: 16px 26px 3px 18px;
margin: 0;
font-weight: normal;
background: url(images/common/nav_dots.png) no-repeat right center;
}
#menu li:first-child {
background: url(images/common/nav_dots.png) no-repeat right center,url(images/common/nav_dots.png) no-repeat left center;
padding: 16px 26px 3px 26px;
}
#menu li a {
border-top: none;
border-right: none;
background: none;
padding: 0 0 3px;
color: #444;
position: relative;
text-decoration: none;
display: inline-block;
margin: auto;
}
#menu li a:before {
position: absolute;
content: '';
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
opacity: 0;
top: 25%;
bottom: 15%;
left: 0;
right: 0;
border-bottom: 2px solid;
}
#menu li a:hover,
#menu li.current a {
color: #666;
}
#menu li a:hover:before,
#menu li .current a:before {
opacity: 1;
top: 0;
bottom: 0;
}
.slicknav_menu {
display: none;
}
}
/* 1024px～ Header用メディアクエリ開始 */
@media screen and (min-width : 1024px) {
/* ヘッダー */
#header {
margin-bottom: 30px;
}
#header .logo {
max-width: 100%;
height: auto;
}
}
/* END Header
----------------------------------------------- */


/* コンテンツ枠 */
#content {
width : 100%;
margin : 0 auto;
}
.toppage {
text-align: center;
}

section{
width : 94%;
margin : 0 auto;
}

/* アイキャッチ */
#eyecatch {
margin: 0 auto 20px;
text-align: center;
}
#eyecatch img{
margin: 0 auto 0;
max-width: 100%;
height: auto;
}

/* PageTOP */
#pagetop {
position: fixed;
bottom: 10px;
right: 10px;
text-align: right;
padding: 0;
z-index: 1000;
}
#pagetop a img {
vertical-align: bottom;
width: 50px;
}

/* フッター */
#footer {
background: #f2f2f2;
font-size:14px;
margin: 30px 0 0;
padding:30px 0 0;
}

#footer ul{
padding:0 0 10px;
text-align:center;
border-top: 1px dotted #ccc;
}

#footer li{
padding: 10px 20px;
border-bottom: 1px dotted #ccc;
}

#footer li a{
text-decoration:none;
color:#444;
-webkit-transition: 0.2s ease-in-out;  
-moz-transition: 0.2s ease-in-out;  
-o-transition: 0.2s ease-in-out;  
transition: 0.2s ease-in-out;
}

#footer li a:hover{color:#999;text-decoration: underline;}

#footer ul ul{display:none;}

#copyright{
clear:both;
padding:10px 0 15px;
text-align:center;
font-size:10px;
}
#copyright a{ color:#444; text-decoration: none;}
#copyright a:hover{ text-decoration: underline;}

/* 768px～ メディアクエリ開始 */
@media screen and (min-width : 768px) {
.post{padding: 15px;}

/* PageTOP */
#pagetop {
bottom: 10px;
right: 10px;
}
#pagetop a img {
vertical-align: bottom;
width: 70px;
}

#footer {
margin: 80px 0 0;
padding: 40px 0 20px;
}

#footer ul{
border-top: none;
}
#footer li{
display: inline-block;
padding: 10px 20px;
border-bottom: none;
border-right: 1px dotted #ccc;
margin-bottom: 5px;
}
#footer li:first-child{
border-left: 1px dotted #ccc;
}

}

/* 1024px～ メディアクエリ開始 */
@media screen and (min-width : 1024px) {

.inner{
width: 980px;
margin: 0 auto;
}

/* メインコンテンツ */
#content {
width: 780px;
margin: 0 auto;
}
section{
margin: 0 auto 20px;
width: 100%;
}
section p{
}

/* PageTOP */
#pagetop {
bottom: 30px;
right: 30px;
}



} /* 1024px～ メディアクエリ終了 */