@charset "utf-8";

/*==================================================
	Base Layout
	Header Area
	Global Navigation
	Main Visual
	Contents Area
	Main Area
	Aside Area
	Footer Area
==================================================*/


/*--------------------------------------------------
	Base Layout
--------------------------------------------------*/

body{
background-color:#666565;
background-image:url(/shared/images/back.png);
background-position:center top;
background-repeat:no-repeat;
}

div#container {
font-family:"メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
max-width:1800px;
margin:30px auto 0px auto;
padding:0px 10px;
}

div#container a img:hover{
opacity:0.7;
filter:alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
background:none!important;
}


/*--------------------------------------------------
	Header Area
--------------------------------------------------*/

div#header{
position:relative;
}

div#logo{
float:left;
width:275px;
}

div#logo img{
width:100%;
}


div#navi{
background-color:#f7f7f6;
padding:10px 10px 0px 10px;
float:left;
z-index:3;
}

div#navi ul{
margin:0px;
}

div#navi ul li{
float:left;
font-family: 'Archivo Narrow', sans-serif;
padding:5px 8px;
font-size:110%;
}

div#navi ul li a{
color:#333;
}

div#navi ul li a:hover{
text-decoration:none;
color:#666;
}

h1 {
position:relative;
}

h1 span{
position:absolute;
top:-9999px;
}

.mobile{
display:none;
}



p.head-antena{
position:absolute;
right:10px;
top:-60px;
z-index:2;
}

p.head-contact{
position:absolute;
right:30px;
top:-45px;
z-index:2;
}

p.head-contact img{
	width:80%;
}

p.head-rl{
position:absolute;
right:120px;
top:-60px;
z-index:2;
}

p.head-rl img{
	width:80%;
}

p.head-face{
position:absolute;
right:230px;
top:-45px;
z-index:2;
}

p.head-face img{
	width:80%;
}

p.head-twit{
position:absolute;
right:325px;
top:-60px;
z-index:2;
}

p.head-twit img{
	width:80%;
}


/*--------------------------------------------------
	Contents Area
--------------------------------------------------*/

div#content{
background-color:#f7f7f6;
padding:20px 0px 0px 0px;
position:relative;
}


/*--------------------------------------------------
	Main Visual
--------------------------------------------------*/
div#mv{
width:90%;
height:auto;
padding:10px;
margin:0px auto 20px auto;
background-color:#dbd8d8;
box-sizing:border-box;
position:relative;
}

p.mv-logo{
position:absolute;
z-index:99999;
left:30px;
top:30px;
display:block;
width:30%;
}

p.mv-logo img{
width:100%;
height:auto;
}


div.navpaged, div.navboth{
margin-bottom:0px !important;
}

/*--------------------------------------------------
	Main Area
--------------------------------------------------*/

div#grid{
padding:0px 10px;
margin:0px auto;
}

div#grid div.box{
margin:10px;
width:225px;
float:left;
position:relative;
}

div.news{
background-color:#FFF;
height:283px;
overflow:hidden;
}

div.news h2{
font-size:95%;
margin-bottom:0px;
font-weight: bold !important;
padding:0px 10px 10px 10px;
line-height:105%;
font-family:"メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
}

div.news h2 a{
color:#C03;
}

div.news p.date{
font-size:65%;
margin-bottom:0px;
color:#999;
padding:10px 10px 5px 10px;
}

div.news p.exc{
font-size:70%;
margin-bottom:0px;
padding:0px 10px 10px 10px;
line-height:105%;
}

div.news div.c01{
background-color:#d5aea9;
}

div.news div.c01:hover{
background-color: #666;
}

div.news div.c02{
background-color:#f0dcc4;
}

div.news div.c02:hover{
background-color: #666;
}


div.news div.c03{
background-color:#a1afa2;
}

div.news div.c03:hover{
background-color: #666;
}

div.news iframe{
width:100%;
}

div.banner p img{
width:100%;
height:auto;
}

div.banner p{
margin-bottom:0px;
}


div.thum{
width:225px;
background-color:#d5aea9;
}

div.thum p{
margin-bottom:0px;
}

div.thum p img{
width:100%;
height:auto;
}


div.btn{
position:absolute;
bottom:0px;
text-align:center;
width:100%;
}

div.btn p{
text-align:center;
font-family: 'Archivo Narrow', sans-serif;
margin:0px;
font-size:120%;
}

div.btn p a{
padding:5px 0px;
color:#FFF;
width:100%;
display:block;
text-decoration:none;
}

div.thum h3{
text-align:center;
font-family:"メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
margin:0px;
font-size:85%;
background-color:#d5aea9;
font-weight: bold !important;
padding:5px 0px;
color:#FFF;
}

div.thum h3 a{
color:#FFF;
width:100%;
display:block;
text-decoration:none;
}

div.thum h3 a:hover{
background-color:#666;
}

div.thum iframe{
width:100%;
}


h2.cat-h{
background-color: #666;
color:#FFF;
font-family:"メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
font-weight: bold !important;
margin:0px 20px 10px 20px;
text-align:center;
padding:5px 20px;
font-size:130%;
}

div.post-twitter{
float:left;
padding-left:10px;
padding-top:5px;
}

div.post-twitter iframe{
width:90px !important;
}

div.post-facebook{
float:left;
}


div.banner-img{
height:283px;
}

.more{
	font-size:70% !important;
font-family:"メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
font-weight: bold !important;

}


/*--------------------------------------------------
	Page
--------------------------------------------------*/

div.post iframe{
max-width:100%;
}

div.postpage div.post{
padding:0px 20px;
font-size:70%;
}

div.postpage div.post p img{
max-width:100%;
height:auto;
}

div.postpage h2{
margin-bottom:20px;
font-family:"メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
}

div.postsingle{
background-color:#fff;
margin:0px 20px;
}

div.postsingle div.post{
padding:0px 10px;
font-size:70%;
}

div.postsingle div.post p img{
max-width:100%;
height:auto;
}

div.postsingle p.date{
padding:0px 10px;
font-size:60%;
margin-bottom:20px;
color:#999;
}

h2.single-h{
background-color: #a1afa2;
color:#FFF;
font-family:"メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
font-weight: bold !important;
margin:0px 0px 10px 0px;
text-align:left;
padding:5px 20px;
font-size:110%;
}

h3.single-h{
background-color: #a1afa2;
color:#FFF;
font-family:"メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
font-weight: bold !important;
margin:10px;
text-align:left;
padding:5px 20px;
font-size:110%;
}

/*--------------------------------------------------
	CAT
--------------------------------------------------*/

p.livecat{
font-size:45%;
position:absolute;
right:10px;
top:10px;
color:#FFF;
padding:1px 3px;
}

p.sauetoroyoshi{
background-color:#C63;
}

p.legend{
background-color:#969;
}

p.saue{
background-color:#366;
}

p.roberuto{
background-color: #066;
}

/*--------------------------------------------------
	FOOTER
--------------------------------------------------*/

div#footer{
min-height:200px;
margin-top:20px;
}

div.footer_l{
float:left;
position:relative;
width:30%;
box-sizing : border-box ;
min-height:200px;
}

div.footer_l p{
position:absolute;
bottom:-20px;
left:20px;
}

div.footer_r p img{
width:100%;
}

div.footer_r{
float:left;
width:60%;
max-width:600px;
box-sizing : border-box ;
padding:0px 10px;
position:relative;
}

div.footer_r div.list{
float:left;
width:33%;
}

div.footer_r div.list ul{
margin-bottom:0px;
}

div.footer_r div.list ul li{
margin-bottom:10px;
}

div.footer_r div.list ul li{
	line-height:80%;
}

div.footer_r div.list ul li a{
font-family: 'Archivo Narrow', sans-serif;
color:#333;
font-size:80%;
}

div.wht{
background:#fff;
padding:20px;
}

div#copy{
width:auto;
background-color:#372f2f;
padding:20px 0px;
}

div#copy div.wrapper p{
margin-bottom:0px;
font-size:70%;
text-align:right;
color:#FFF;
}

div#copy div.wrapper{
max-width:1000px;
position:relative;
margin:0px auto;
}

div.footer_r p.icon{
bottom:-45px;
left:-320px;
position:absolute;
}

div#copy div.wrapper p.tree{
bottom:30px;
right:-50px;
position:absolute;
}



.m-00{
	margin:0px !important;
}

.rela{
	position:relative;
}


@media screen and (max-width:900px){
	p.cloud{
display:none;
}
}


@media screen and (max-width:768px){
	
div#container {
margin:20px auto 0px auto;
}


div#logo{
width:70%;
box-sizing : border-box ;

}

p.headbtn{
display:block;
width:30%;
float:right;
box-sizing : border-box ;

}

p.mv-logo{
display:none !important;
}

p.headbtn img{
width:100%;
}

div#navi{
display:none !important;
}

.mobile{
display:inherit;
}

p.cloud{
display:none;
}

div.news h2{
word-break: break-all;
}
div.news p.exc{
word-break: break-all;
}

div.footer_r p.icon{
display:none;
}

div#copy div.wrapper p.tree{
display:none;
}

div.footer_l{
display:none;
}

div.footer_r{
width:100%;
float:inherit;
margin:0px auto;
}


}