@charset "UTF-8";


body	{margin: 0;
	font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif}


/* サイト名 */
.site h1 a	{color: #000000;
	text-decoration: none}

.site h1	{margin: 0;
	font-size: 30px}


/* カウンター */
.counter {float: right}


/* ヘッダー画像 */
.topimg	{max-width: 100%;
	height: auto;
	vertical-align: bottom}


/* キャッチコピー */
.catch {margin: 0;
    padding: 8px;
    background-color: rgba(204,0,0,0.7);
    font-size: 20px;
    color: floralwhite;
    font-weight: bold}


/* ヘッダー画像にキャッチコピーを重ねる */
.top {position: relative}

.catch {position: absolute;
    top: 7%;
    right: 4%}


/* コンテンツ概要 */
.contents a {display: block;
    background-color: #222222;
    color: #ffffff;
    text-align: center;
    text-decoration: none}

.contens a:hover {opacity: 0.8}

.contents i {display: block;
    padding-top: 25px;
    padding-bottom: 25px;
    font-size: 38px}

.contents .fa-paw {background-color: #bfbd13}

.contents .fa-map-marker-alt {background-color: #c58839}

.contents .fa-image {background-color: #859f46}

.contents h2 {margin-top: 0;
    margin-bottom: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 20px;
    font-weight: normal}

.contents p {margin-top: 0;
    margin-bottom: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #524e3c;
    font-size: 12px}

/* ポリシー */
.policy {padding: 20px;
    border: solid 5px #dddddd}

.policy h1	{margin-top: 0;
	margin-bottom: 5px;
	font-size: 18px;
	color: #666666}

/* 更新履歴 */
.news h3	{margin-top: 0;
    padding-left: 5px;
        margin-bottom: 0;
	font-size: 16px;
	color: #666666}

.news ul	{margin: 0;
	padding: 0;
	list-style: none}

.news li a	{display: block;
	padding: 5px;
	border-bottom: dotted 2px #dddddd;
	color: #000000;
	font-size: 14px;
	text-decoration: none}

.news li a:hover	{background-color: #eeeeee}

.news time	{color: #888888;
	font-weight: bold}

.news a:after	{content: "";
	display: block;
	clear: both}

.news time	{float: left;
	width: 60px}

.news .text	{float: none;
	width: auto;
	margin-left: 60px}


/* リンク集 */
.link h3	{margin-top: 20px;
    padding-left: 5px;
    margin-bottom: 0;
	font-size: 16px;
	color: #666666}

.link ul	{margin: 0;
	padding: 0;
	list-style: none}

.link li a	{display: block;
	padding: 5px;
	border-bottom: dotted 2px #dddddd;
	color: #000000;
	font-size: 14px;
	text-decoration: none}

.link li a:hover	{background-color: #eeeeee}

.link a:after	{content: "";
	display: block;
	clear: both}



/* コピーライト */
.copyright p	{margin: 0;
	color: #666666;
	font-size: 14px}


/* BOX5をバーの形にする */
.box5	{padding-top: 15px;
	padding-bottom: 15px;
	background-color: #dddddd}


/* ボックスの左右 */
.boxA, .box4, .box5, .box6
	{padding-left: 15px;
	padding-right: 15px}


/* ボックスの上下 */
.boxA	{padding-top: 20px;
	padding-bottom: 10px}

.box4	{padding-top: 20px;
	padding-bottom: 20px}

.box6 {padding-top: 25px}

.box6-1, .box6-2, .box6-3 {padding-bottom: 10px}

/* boxAとbox4の背景色 */
.boxA {background-color: #333333}

.box4-1 {background-color: #e8e8c4}



/* ########### 599px以下 ########### */
@media (max-width: 599px) {

/* ナビゲーション */
.menu li a	{padding: 10px 7px;
	font-size: 11px}
 

/* キャッチコピー */
 .catch {padding: 5px 10px;
     font-size: 16px;
     font-weight: bold}
 
}

/* ########### 767px以下 ########### */
@media (max-width: 767px) {
 
/* ナビゲーションメニュー縦並び */
.menu ul	{margin: 0;
	padding: 0;
	list-style: none}

.menu li a	{display: block;
	padding: 5px;
	color: #ffffff;
	font-size: 14px;
	text-decoration: none}

.menu li a:hover	{background-color: #eeeeee}
 
 


}


/* ########### 768px以上 ########### */
@media (min-width: 768px) {

/* PCでの電話無効化 */
a[href^="tel:"] {pointer-events: none}

/* BOX1とBOX2を横に並べる設定 */
.boxA:after	{content: "";
	display: block;
	clear: both}

.box1	{float: left;
	width: auto}

.box2	{float: right;
    width: auto}
 
/* ナビゲーションメニュー横並び */
.menu ul	{margin: 0;
	padding: 0;
	list-style: none}

.menu li a	{display: block;
	padding: 10px 15px;
	color: #ffffff;
	font-size: 14px;
	text-decoration: none}

.menu li a:hover	{background-color: #eeeeee}

.menu ul:after	{content: "";
	display: block;
	clear: both}

.menu li	{float: left;
	width: auto}
 
/* BOX6-1、BOX6-2を、box6-3を横に並べる設定 */
.box6:after	{content: "";
	display: block;
	clear: both}

.box6-1	{float: left;
	width: 32%;
    margin-right: 2%}

.box6-2	{float: left;
	width: 32%;
    margin-right: 2%}
  
.box6-3	{float: left;
	width: 32%}

/* BOX4-1とBOX4-2を横に並べる設定 */
.box4:after	{content: "";
	display: block;
	clear: both}

.box4-1	{float: left;
	width: 70%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box}

.box4-2	{float: right;
	width: 30%}

}


/* ########### 1190px以上 ########### */
@media (min-width: 1190px) {

/* 全体の横幅を固定 */
.box3, .box4, .boxA-inner, .box5-inner, .box6
	{width: 1140px;
	margin-left: auto;
	margin-right: auto}

/* BOX Aの下に罫線を挿入 */
.boxA	{margin-bottom: 20px;
	border-bottom: solid 1px #dddddd}

}