@charset "utf-8";

/* =base
------------------------------------------------------------------------------------------*/

*{ box-sizing: border-box;}
body {
	text-align: center;
	color: #000;
	font-family: "メイリオ","Meiryo","MS PGothic","Osaka",Arial,sans-serif;
	font-size: 16px;
	line-height: 1.5em;;
	height: 100%;
	background-image:url(../images/main.jpg), url(../images/bg.jpg);
	background-repeat:no-repeat,repeat; 
	background-position:center top; 
	background-size: 100%;
	background-color:#c9c7c8;
}
html {overflow-y:scroll; height:100%;}

a {color: #f00;text-decoration: none; outline:none;}
a:hover {color: #f00;text-decoration: underline;}
a:hover img{opacity:0.8;filter: alpha(opacity=80);}


@media only screen and (max-width: 639px){
body{  font-size:14px; line-height:1.5em; background-image: url(../images/main_sp.jpg), url(../images/bg.jpg);}
}

/* =fade
------------------------------------------------------------------------------------------*/
#js_fade2 {position : fixed;top : 0;left : 0;width: 100%; height : 100%;background-color: rgba(255,255,255,.7);background-image : url( ../images/loading.svg );background-repeat : no-repeat; background-position : 50% 50%; z-index:100;}

/* =header
------------------------------------------------------------------------------------------*/
header{ position:relative; }
header img{ width:100%;}

header h1{ width: 50%; padding-top:14.5vw; margin-left:4%; margin-bottom:3vw;}

header .main_txt{ width:94%; margin:0 auto;}
header .date{ width:61%; float:left;}
header .pht{ width:37%; float:right;}


@media only screen and (max-width: 639px){
header{ margin-bottom:20px;}
header h1{ width:90%; margin:0 auto; padding:5vw 0 66vw;}
header .main_txt{ width:96%; margin:0 auto;}
header p{ margin:0;}
header .date{ width:100%; float:none;}
header .pht{ width:100%; float:none;}
}



/* =main
-----------------------------------------------------------------------------------------*/
main{ padding-top:3vw; width:1100px; margin:0 auto; text-align:left;margin-bottom:80px;}

@media screen and (max-width: 639px){
main{ padding-top:0; width:94%;margin-bottom:30px;}
}

/* =foot
-----------------------------------------------------------------------------------------*/
footer{ background-color:#FFF; color:#333; text-align:left; padding:20px 0 40px;}
footer .hip_logo{ float:right;}
footer .hip_logo img{ width:120px;}
footer p{ float:left; margin:0;}

.foot_wrap{ width:1100px; margin:0 auto;}


@media only screen and (max-width: 639px){
footer{ padding:3vw;}
footer .hip_logo{ float:none; text-align:center;}
footer .hip_logo img{ width:120px;}
.foot_wrap{ width:100%;}
footer p{ float:none; font-size:12px; line-height:1.4em;}
}


.sharearea{margin: 0 auto;text-align:left;  width:230px;  font-family:'Oswald'; }
.sharearea h3{ float: left;  font-weight:bold; font-size:20px; line-height:70px; padding-right:15px;}
.sharearea ul{padding:0;}
.sharearea li {float:left;margin-right:5px;}
.sharearea li a{display: block;overflow: hidden;width: 70px;height:71px; background-size:100%; background-repeat:no-repeat; }
.sharearea li a span{ display:none;}
.sharearea li a:hover{ opacity:0.8;}
.sharearea li.fb a{ background-image:url(../images/icon_fb.png); }
.sharearea li.twt a{ background-image: url(../images/icon_tw.png);}
@media only screen and (max-width: 639px){

}


/* =ページトップ
------------------------------------------------------------------------------------------*/
.page_top{text-align: right;margin: 0;  width:80px;  text-align:center;position:fixed; right:30px; bottom:40px;  z-index:10}
.page_top a{background-color:#c00; display:block;border-radius: 50%;height:80px; width:80px; line-height:80px; color:#fff; font-family: 'Oswald';font-size:12px;}
.page_top a:hover{background-color:#e00; text-decoration:none; }


@media only screen and (max-width: 639px){
.page_top{ display:none;}
}

.clearfix:after{clear:both;display:block;height:0;line-height:0;visibility:hidden;font-size:0.1em;content:".";}

/* =見出し
------------------------------------------------------------------------------------------*/
h1{margin:0;}
h2{margin:0;}
h3{margin:0;}
h4{margin:0;}
h5{margin:0;}


/* font
------------------------------------------------------ */