@charset "UTF-8";
@import url(//fonts.googleapis.com/css?family=Roboto:400,300,100,500,700);
@import url(//fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700);
@import url(//fonts.googleapis.com/css?family=Libre+Baskerville);
@import url(//fonts.googleapis.com/css?family=EB+Garamond);
@import url(//fonts.googleapis.com/css?family=Noto+Serif+JP);
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);

body {
  font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',Helvetica,Arial,sans-serif;
  color:#000;
  font-weight:400;
  font-size:16px;
  margin: 0;
  padding: 0;
  position:relative;
  word-wrap: break-word;
  background:#FFF;
}


h1,h2,h3,h4,h5,
ol,ul,li,dl,dd,
address,
div,img{
	margin		: 0;
	padding		: 0;
	}

ol,ul,li,
dl,dd{
	list-style	: none;
	}
	
	
h1,h2,h3,h4,h5{
	font-size		: 100%;
	}

p {margin:0;padding:0;}

table{
	border-collapse: collapse;
	border-spacing: 0;
	}

img{
	border		: none;
	margin:0;padding:0;
	vertical-align:middle
	}

 figure{margin:0}
 
/* .a
-------------------------------------------------- */
a {
	text-decoration: none;
	outline:none!important;
	}
a:hover {
  text-decoration: none;
}

/* .line
-------------------------------------------------- */
hr {
	display		: none;
	}
	
.clr {
	height		: 0;
	clear		: both;
	}

.clearfix:after {
	display:block;
    clear:both;
    height:0px;
    visibility:hidden;
    content:".";
}

/* wrapper
--------------------------------------------------*/
#wrapper {
  width: 100%;
  line-height:1.6;
  min-height: 70vh;
  letter-spacing : 0.05em;
}

@media only screen and  (max-width: 568px) {
#wrapper {
  min-height: initial;
}
}

.bg_sub {
  padding-top:80px;
}
@media only screen and  (max-width: 810px) {
.bg_sub {
  padding-top:70px;
}
}

@media only screen and  (max-width: 568px) {
.bg_sub {
  padding-top:80px;
}
}

#bg-gy{
  background:#F5F5F5;
}

/* #container
--------------------------------------------------*/
#container{
  width:100%;
  max-width:1280px;

  margin:0 auto;
}

@media screen and (max-width: 1280px) {
#container {
  box-sizing: border-box;
  padding: 0 1%;
}
}

/* p_navi
---------------------------------------------------------------------------*/
.p_navi{
  width:100%;
  box-sizing: border-box;
  margin:0 auto;
  font-size :0.8em;
  padding:1% 5%;
  color: #898989;
}

.p_navi a {
  color: #898989;
  text-decoration: none;
}

.p_navi a:hover {  
  opacity: 0.7;
  text-decoration: underline;
}

@media screen and (max-width: 568px) {
.p_navi{display:none;}
}


/* cation
--------------------------------------- */
.cation{
  width: 100%;
  margin: 0 auto;
  padding:4% 0 4%;
  position: relative;
  text-align: center;
}

.cation-ttl{
  font-weight:500;
  font-size:1.5em;
  font-family: 'Noto Serif JP', serif;
  color:#000;
  text-align: center;
  margin-bottom:3%;
}

@media screen and (max-width: 810px) {
.cation{
  padding:5% 0%;
}

.cation-ttl{
  line-height:1.4;
  font-size:1.45em;
  padding:0 2% 2%;
}
}

@media screen and (max-width: 568px) {
.cation{
  padding:5% 0 4%;
}

.cation-ttl{
  font-size:1.4em;
  padding:1% 1% 0;
}
}

.cation-sy{
  display:inline-block;
  vertical-align: top;
  box-sizing: border-box;
  padding:2% 2% 0;
}


.cation #w45{
  width:45%;
}

.cation #w55{
  width:55%;
}

.cation #w50{
  width:50%;
}

@media screen and (max-width: 810px) {
.cation-sy{
  display:block;
  padding:2% 4% 0;
}

.cation #w45{
  width:100%;
}

.cation #w55{
  width:100%;
}

.cation #w50{
  width:100%;
}
}

@media screen and (max-width: 568px) {
.cation-sy{
  display:block;
  padding:2% 2% 0;
}
}

.cation-sy ul{
  padding-top:10px;
}

.cation-tit{
  margin:0 auto;
  text-align: left;
}

@media screen and (max-width: 810px) {
.cation-tit{
  margin:0 auto;
  text-align: center;
}
}

.cation-tit p{
  font-size: 14px;
  font-weight:bold;
  display:inline-block;
  vertical-align: top;  
  background:#FFF;
  color:#383838;
  border:1px solid #383838;
  padding:10px 30px;
  margin-bottom:20px;
  -webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;
  position: relative;
}

@media screen and (max-width: 810px) {
.cation-tit p{
  margin-bottom:10px;
}
}

.cation-tit p::after {
 position: absolute;
 top: 100%;
 left: 50%;
 margin-left: -5px;
 content: ' ';
 border: 10px solid transparent;
 border-top-color: #383838;
}

@media screen and (max-width: 810px) {
.cation-sy ul{
  margin-bottom:15px;
}
}

.cation-sy li{
  font-size:14px;
  padding:2px 0;
  text-align: left;
}

@media screen and (max-width: 810px) {
.cation-sy li{
  text-align: center;
}
}

.cation-sy li dl{
  width:100%;
}

.cation-sy li dt{
  display:inline-block;
  vertical-align: top;
  width:3%;
}

@media screen and (max-width: 810px) {
.cation-sy li dt{
  display:none;
  width:0%;
}
}

.cation-sy li dd{
  display:inline-block;
  vertical-align: top;
  width:97%;
}

@media screen and (max-width: 810px) {
.cation-sy li dd{
  display:block;
  width:100%;
}
}

.cation-sy li span{
  color:#EB6877;
  font-weight:bold;
}

.kiy-tx{
  font-size:14px;
  padding:2px 0;
  text-align: left;
}

@media screen and (max-width: 810px) {
.kiy-tx{
  text-align: center;
  padding:10px 0;
  line-height:1.8;
}
}

/* footer
--------------------------------------------------*/
footer{
  float:left;
  background:#FFF;
  border-top:1px solid #DDDDDD;
  box-sizing: border-box;
  width:100%;
  margin:0 auto;
  padding:2.5% 0 0;
}

@media only screen and  (max-width: 800px) {
footer {
padding:5% 0 0;
}
}

.footerArea {
  width:100%;
  max-width:1100px;
  box-sizing: border-box;
  padding:0 2%;
  margin:0 auto;
}

.footerL{
  width: 100%;
  box-sizing: border-box;
  padding:0 3%;
  text-align: center;
}

@media only screen and  (max-width: 810px) {
.footerL{
  padding:1% 2%;
}
}

.ftr_ttl{
  margin:0 auto 3%;
  font-size:0.9em;
  color:#2D2E30;
}

.ftr_ttl img{
  width:100%;
  max-width:320px;
  height:auto;
  margin-bottom:10px;
}

@media only screen and  (max-width: 568px) {
.ftr_ttl{
  letter-spacing:0em;
}

.ftr_ttl img{
  max-width:240px;
}
}

.ft_tx{
  margin:1%;
  color:#2D2E30;
  line-height:1.8;
  font-size:14px;
}

.ft_tx strong{
  font-size:1.6em;
  font-family: Roboto,sans-serif;
  font-weight:500;
  line-height:1.6;
}

@media only screen and  (max-width: 568px) {
.ft_tx{
  line-height:1.8;
}

.ft_tx strong{
  font-size:1.4em;
}
}

footer .fa{
  color:#2D2E30;
  margin-right:10px;
}

.ft_tx a {
  text-decoration: none;
  color:#2D2E30;
}

.ft_tx a:hover {
  color:#AA8F5D;
  text-decoration:none;
}

.ft_tx2{
  margin:0 auto 2%;
  color:#FFF;
  font-family: Roboto,sans-serif;
  font-weight:400;
}

.ft_tx2 a {
  text-decoration: none;
  color:#FFF;
}
.ft_tx2 a:hover {
  color:#FFF;
  text-decoration:underline;
}

footer .f_contact{
  width: 50%;
  float:left;
  box-sizing: border-box;
  padding:1px;
  margin-bottom:1%;
}

@media only screen and  (max-width: 1280px) {
footer .f_contact{
  width: 45%;
}
}

@media screen and (max-width: 800px) {
footer .f_contact{
  width: 94%;
  margin: 10px 3% 20px;
  float:none;
  clear:both;
}
}

footer .f_contact p{
  font-size:13px;
  margin:5px 0;
}

footer .f_contact ul{
  width:100%;
  max-width:400px;
  margin: 2% 0;
}

@media only screen and  (max-width: 800px) {
footer .f_contact ul{
  margin: 2% auto;
}
}

footer .f_contact li{
  margin:3% 0;
  text-align: center;
}

footer .f_contact .line a {
  display:block;
  padding:12px 0 10px;
  border:1px solid #00B900;
  background:#00B900;
  color:#FFF;
  text-decoration: none;
  -webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;
}

footer .f_contact .line a:hover {
  color:#FFF;
  background:#2B972B;
  border:1px solid #2B972B;
  text-decoration: none;
}

footer .f_contact .line a .fa {
  color:#FFF;
}
footer .f_contact .line a:hover .fa {
  color:#FFF;
}

footer .f_contact .web a {
  display:block;
  padding:12px 0 10px;
  border:1px solid #2D2E30;
  color:#2D2E30;
  text-decoration: none;
  -webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;
}

footer .f_contact .web a:hover {
  color:#FFF;
  background:#2D2E30;
  text-decoration: none;
}

footer .f_contact .web a:hover .fa {
  color:#FFF;
}

footer .copy{
  text-align: center;
  font-size:13px;
  margin-top:2%;
  color:#2D2E30;
  padding:10px 0;
  width:100%;
  background:#F3F3F3;
  font-family: Roboto,sans-serif;
  font-weight:400;
  letter-spacing : 0.03em;
}

@media only screen and  (max-width: 568px) {
footer .copy{
  font-size:12px;
  margin-top:4%;
  letter-spacing : 0em;
}
}

footer .copy a {
  text-decoration: none;
  color:#2D2E30;
}
footer .copy a:hover {
  color:#2D2E30;
}


/* #side_navi
--------------------------------------------------------- */
#side_navi{
width:35px;
height:auto;
position:fixed;
top:150px;
right:0;
background: rgba(54, 39, 8, 0.8);
z-index: 110;
padding:7px 7px 2px 6px!important;
}

@media screen and (max-width: 810px) {
#side_navi{
width:38px;
top:100px;
overflow: hidden;
}
}

@media screen and (max-width: 568px) {
#side_navi{
display:none;
}
}

#side_navi li:hover {
	filter:alpha(opacity=80);  /* for IE */
	-moz-opacity: 0.8;  /* for Firefox */
	opacity: 0.8;  /* for Safari or Opera */
}

side_navi ul{
margin:0;
padding:0;
float:left;
}

#side_navi li img{
width:100%;
height:auto;
}

#side_navi li {
width:35px;
height:auto;
float:left;
margin-bottom:5px;
}

@media screen and (max-width: 810px) {
#side_navi li {
width:25px;
}
}

#side_navi li:hover {
	filter:alpha(opacity=80);  /* for IE */
	-moz-opacity: 0.8;  /* for Firefox */
	opacity: 0.8;  /* for Safari or Opera */
}

/* #spt_navi
--------------------------------------------------------- */
#spt_navi{display:none;}

@media screen and (max-width: 568px) {
#spt_navi{
width:100%;
height:32px;
position:fixed;
top:0;
left:0;
background: rgba(0, 0, 0, 1);
z-index: 110;
padding:0;
margin:0;
display:block;
overflow: hidden;
}
}

#spt_navi ul {
	width:100%;
	height:auto;
	display:table;
	border-collapse: separate;
	border-spacing: 0 0;
	padding:0 0;
}

#spt_navi ul li {
	display:table-cell;
	text-align:center;
	padding:4px 0 5px;
	border-right:0.05em solid #FFF;
}

#spt_navi ul li:last-child {
	border-right: none;
}

#spt_navi li img{
width:100%;
height:auto;
max-width:30px;
margin:0 auto;
}

/* page_top
========================================================================== */
#page_top {
  position: fixed;
  bottom: 2.5%;
  right: 0;
  z-index:998;
  width:40px;
  height:40px;
}

#page_top img{
  width:40px;
  height:40px;
}

/*HIDE
========================================================================== */
.pcHide{display: none;}

@media screen and (max-width: 1280px) {
.pcHide{display: block;}
.pcHides{display: none;}
}

@media screen and (max-width: 810px) {
.pcHide{display: block;}
.pcHides{display: block;}
.tbHide{display: none;}
}

@media screen and (max-width: 568px) {
.pcHide{display: block;}
.spHide{display: none;}
}