@charset "utf-8";

#wrapper {
width: 100%;
margin: 0 auto;
z-index: 600;
overflow: hidden;
}
	
#contents {
width: 100%;
max-width: 1000px;
margin: 30px auto 15px auto;
box-sizing: border-box;
}
@media only screen and (max-width: 1000px) {
#contents {
max-width: 100%;
padding: 0 3%;
}
}

#header {
width: 100%;
}

#header .headerbox {
width: 1000px;
margin: 0 auto;
padding-top:12px;
padding-bottom: 25px;
}

#header .headerbox .leftblock {
float: left;
padding-top: 10px;
}


#header .headerbox .rightblock {
float: right;
width: 215px;
padding-top: 10px;
}

#header .headerbox .rightblock .hdbtns li{
	display: block;
	margin: 5px 5px 0 0;
	float: left;
}


@media only screen and (max-width: 900px) {
#header {
display: none;
}
}



/*---------spnavi---------*/

#spnavi {
display: none;
overflow: hidden;
}

#splogo {
position: absolute;
top: 25px;
padding: 0 0 0 10px;
}


/*---------spheader---------*/

ul#spheader {
display: none;
}

@media only screen and ( max-width : 800px ) {
ul#spheader {
display: block;
}

ul#spheader li.left {
float: left;
padding: 2% 0 2% 2%;
}

ul#spheader li.left p.tel {
font-size: 17px;
font-family: 'Montserrat', sans-serif;
color: #d03f38;
font-weight: 600;
padding: 1% 0 0.5% 0;
}

ul#spheader li.left p.tel a {
font-size: 17px;
font-weight: 600;
color: #d03f38;
text-decoration: none;
}

ul#spheader li.right {
float: right;
margin: 3% 1% 0 1%;
}

ul#spheader li.right img {
padding-right: 5px;
}
}



#gnavi {
	width: 100%;
	padding-top:20px;
	padding-bottom:20px;
	clear:both;
	background-color:#FFF;
}

#gnavi .gnavibox {
	width: 1000px;
	margin: 0 auto;
}

#gnavi .gnavibox ul li {
	float: left;
}

#underline{
	width: 100%;
	height: 8px;
	background-color:#CC3333;
	clear:both;
}

@media only screen and (max-width: 900px) {
#gnavi {
display: none;
}
}

	
#mainimg {
width: 100%;
background-image:url(../images/topmain_bg.jpg);
}

#mainimg .mainimgbox {
width: 1000px;
margin: 0 auto;
padding-top: 15px;
padding-bottom:15px;
}


@media only screen and ( max-width : 850px ) {
#mainimg .mainimgbox {
width: 100%;
margin: 0 auto;
padding:0;
}
}


#sidenavi{
width:200px;
float:left;
}

#sidenavi ul {
overflow: hidden;
list-style-type: none;
}

#sidenavi ul li {
float: none;
padding-bottom:5px;
}

#sidenavi li a p{
font-size: 12px;
font-weight: bold;
text-decoration: none;
color: #333333;
}

#sidenavi .sidemainttl{
display:block;
margin-top: 10px;
margin-bottom: 5px;
}

@media only screen and ( max-width : 1000px ) {
#sidenavi{
display: none;
}
}


.ftcontact{
width: 780px;
height: 142px;
overflow: hidden;
background:url(../images/ft_contactbnr.png) no-repeat;
position: relative;
}

.ftcontact .ft_contactbtn{
position: absolute;
right: 17px;
bottom: 15px;
display:block;
}

.ftcontact .ft_contactp{
position: absolute;
left: 180px;
bottom: 11px;
font-weight: bold;
font-size:14px;
display:block;
line-height: 1.5em;
}

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



/*---------pagetop---------*/

#page-top a {
display: flex;
justify-content: center;
align-items :center;
background: #222;
border-radius: 2px;
width: 48px;
height: 48px;
color: #fff;
text-align: center;
text-transform: uppercase; 
text-decoration: none;
letter-spacing: 0.1em;
font-family: 'Montserrat', sans-serif;
transition:all 0.3s;
opacity: 0.9;
}

#page-top a:hover {
opacity: 0.6;
}

#page-top {
position: fixed;
right: 10px;
bottom: 20px;
z-index: 2;
opacity: 0;
transform: translateY(100px);
}

#page-top.UpMove {
animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime{
from {
opacity: 0;
transform: translateY(100px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

#page-top.DownMove{
animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime{
from {
opacity: 1;
transform: translateY(0);
}

to {
opacity: 1;
transform: translateY(100px);
}
}


#flink {
width: 1000px;
margin: 0 auto;
padding: 25px 0 10px 0;
clear:both;
}

#flink p {
font-size: 12px;
font-weight: bold;
color: #444444;
}

#flink p a {
font-size: 12px;
font-weight: bold;
color: #444444;
text-decoration: none;
}

#flink p a:hover {
text-decoration: underline;
}

@media only screen and ( max-width : 850px ) {
#flink {
display: none;
}
}

#ftlinkbnr{
width: 95%;
margin: 0 auto;
}


/*---------footer---------*/

#footer {
width: 100%;
background: #CC3333;
}

#footer .footerbox {
width: 100%;
max-width: 1000px;
margin: 0 auto;
}

#footer .footerbox ul.infobox {
float: left;
width: 50%;
padding: 2% 0;
}

#footer .footerbox ul.infobox p {
font-size: 13px;
line-height: 120%;
color: #fff;
margin: 10px 0;
}

#footer .footerbox ul.infobox p a {
text-decoration: none;
color: #fff;
}

#footer .footerbox ul.infobox .ftlogo {
padding-bottom: 12px;
}

#footer .footerbox ul.copy {
clear: both;
width: 100%;
padding: 2% 0;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.07em;
text-align: center;
color: #fff;
}

#footer .footerbox ul.ftnavi {
float: right;
width: 25%;
padding: 3% 0;
}

#footer .footerbox ul.ftnavi li {
float: left;
margin-right: 30px;
}

#footer .footerbox ul.ftnavi li p {
line-height: 250%;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.08em;
}

#footer .footerbox ul.ftnavi li p a {
font-size: 14px;
font-weight: bold;
text-decoration: none;
}

@media only screen and ( max-width : 1200px ) {
#footer .footerbox {
width: 98%;
margin: 0 auto;
}

#footer .footerbox ul.ftnavi {
width: 35%;
padding: 5% 0 3% 0;
}
}

@media only screen and (max-width: 900px) {
#footer {
text-align: center;
padding: 3% 0;
}

#footer .footerbox {
width: 100%;
margin: 0 auto;
}

#footer .footerbox ul.infobox {
width: 97%;
margin: 0 auto;
}