@charset "utf-8";

/* ------------------------------------------------------- */
/* PC・タブレット・スマホ共通設定                          */
/* ------------------------------------------------------- */

/* 全体の設定
---------------------------------------------------------------------------*/
body {
	margin: 0px;
	padding: 0px;
	color: #666;				/* 全体の文字色 */
	font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-size: 16px;			/* 文字サイズ */
	line-height: 2;				/* 行間 */
	background: #f4f3f3 url(../images/bg1.jpg);	/* 背景色と壁紙 */
	-webkit-text-size-adjust: none;
	overflow-y: scroll;			/* スクロールバー常時表示 TBASE */
}

h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;font-size: 100%;}
ul {list-style-type: none;}
ol {padding-left: 40px;padding-bottom: 15px;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
video {max-width: 100%;}
iframe {width: 100%;}


input,select,textarea {
	font-size: 16px;
}


/* 共通定義
---------------------------------------------------------- */
.clearfix::after{
	content: "";
	display: block;
	clear: both;
}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: #666;			/* リンクテキストの色 */
	transition: 0.2s;		/* マウスオン時の移り変わるまでの時間設定。0.2秒 */
	text-decoration:none;
}
a:hover {
	color: #e88800;			/* マウスオン時の文字色 */
	text-decoration: none;	/* マウスオン時に下線を消す設定。残したいならこの１行削除 */
}

/* 疑似属性（マウスオーバー）
---------------------------------------------------------------------------*/
.alpha a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

.alpha input:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

/* inner共通（header内と、contents内で使っています）
---------------------------------------------------------------------------*/
.inner {
	max-width: 1200px;				/* 最大幅 */
	margin: 0 auto;
}

/* ヘッダー（サイト名が入ったブロック）
---------------------------------------------------------------------------*/

/* ヘッダーブロック*/
header {
	background: url(../images/bg.jpg);	/* 背景画像の読み込み */
}

/* ヘッダーのinnerへの追加設定 */
header .inner {
	position: relative;
	/*height: 200px;		/*高さ*/
	height: 150px;			/*高さ*/
}

/* ヘッダーのinnerへの追加設定（トップページへの追加設定） */
.top header .inner {
	height: 550px;
	background: url(../images/mainimg.jpg) no-repeat center center;			/* 背景画像の読み込み（古いブラウザ用） */
	background: url(../images/mainimg.jpg) no-repeat center center /100%;	/* 背景写真の読み込み。幅100% */
}

/* ロゴ画像の設定 */
header #logo {
	position: absolute;
	left: 3%;				/* ヘッダーブロックに対して左から3%の位置に配置 */
	/*TBASEtop: 40px;		/* ヘッダーブロックに対して上から40pxの位置に配置 */
	top: 15px;				/* ヘッダーブロックに対して上から40pxの位置に配置 */
	width: 400px;			/* 画像の幅 */
}

/* 上部のメインメニュー
---------------------------------------------------------------------------*/

/* メニューブロック全体の設定 */
#menubar {
	position: absolute;
	bottom: 0px;			/* headerブロックの下から0pxの場所に配置 */
	left: 3%;				/* headerブロックの左から3%の場所に配置 */
	width: 94%;				/* 幅。上で3%使っているので、右にも同じ3%を残すとすると、残りが94% */
}

/* メニュー１個ごとの設定 */
#menubar li {
	float: left;
	width: 20%;				/* メニューの幅。５個にしたいなら、20%にすればOK */
}
#menubar li a {
	text-decoration: none;display: block;text-align: center;
	background: #e88800;		/* 背景色 */
	border: 2px solid #e88800;	/* 枠線の幅、線種、色 */
	border-bottom: none;		/* 下の線だけ消す設定 */
	color: #FFF;				/* 文字色 */
	border-radius: 10px 10px 0px 0px;	/* 角丸の指定。左上、右上、右下、左下への順 */
	margin-left: 5%;			/* 左に空けるスペース。メニュー間の余白になります */
	padding: 15px 5px;			/* 上下、左右へのメニュー内の余白 */
}

/* １つ目のメニューへの設定 */
#menubar li:first-child a {
	margin-left: 0;				/* 左へ空けたスペースをなくす設定 */
}

/* マウスオン時と現在表示中メニューの設定 */
#menubar li a:hover,
#menubar li.current a {
	background: #fff;			/* 背景色 */
	color: #e88800;				/* 文字色 */
}

/* スマホ用メニューを表示させない */
#menubar-s {display: none;}

/* ３本バーアイコンを表示させない */
#menubar_hdr {display: none;}

/* コンテンツ（mainとsubを囲むブロック）
---------------------------------------------------------------------------*/
#contents {
	clear: both;
	overflow: hidden;
	background: #FFF;
	padding: 20px;				/* ボックス内の余白 */
}

/* コンテンツ内のフッター（プライバシーポリシー等） TBASE ADD
---------------------------------------------------------------------------*/
#contents_footer {
	clear: both;
	overflow: hidden;
	background: #FFF;			/* 背景色 */
	padding: 10px 0;			/* ボックス内の余白 */
}

/* メインコンテンツ
---------------------------------------------------------------------------*/
#main {
	width: 100%;					/* ボックスの幅 */
	padding-bottom: 20px;
}

/* １カラム時のmainコンテンツ */
.c1 #main {
	float: none;
	width: auto;
}

#main h1 {
    color: #393939;
    font-size: 24px;
}

/* mainコンテンツのh2タグの設定 */
#main h2 {
	clear: both;
	margin-bottom: 15px;
	color: #e88800;
	border-bottom: 3px solid #e88800;
	padding-left: 10px;
	font-size: 20px;
}

/* mainコンテンツのh3タグの設定*/
#main h3 {
	clear: both;
	margin-bottom: 20px;
	background: #FFF;			/* 背景色 */
	padding: 4px 20px;			/* 上下、左右への余白 */
	border-radius: 30px;		/* 角丸のサイズ */
	border: 1px solid #ccc;		/* 枠線の幅、線種、色 */
}

/* mainコンテンツの段落タグ設定 */
#main p {
	padding: 0 10px 10px;		/* 上、左右、下への余白 */
}

/* 他 */
#main h2 + p,
#main h3 + p {
	margin-top: -5px;
}
#main p + p {
	margin-top: -10px;
}

/* メインコンテンツ内の「list」ボックス
---------------------------------------------------------------------------*/

/* ボックス１個あたりの設定 */
#main .list {
	position: relative;overflow: hidden;
	margin-bottom: 20px;		/* ボックスの外（下）に空けるスペース */
}
#main .list a {
	display: block;text-decoration: none;overflow: hidden;
	padding: 20px;				/* ボックス内の余白 */
	border: 1px solid #ccc;		/* 枠線の幅、線種、色 */
}

/* マウスオン時 */
#main .list a:hover {
	border: 1px solid #e88800;	/* 枠線の幅、線種、色 */
	background: #f4fafb;		/* 背景色 */
}

/* 写真 */
#main .list figure img {
	width: 25%;					/* 写真の幅 */
	float: left;				/* 左に回り込み */
	border-radius: 50%;			/* 円形にくり抜く指定。通常通りに表示させたいならこの１行削除 */
}

/* h4タグ */
#main .list h4 {
	margin-left: 28%;			/* 左に空けるスペース。写真(figure)のwidth指定とバランスをとって指定する */
	color: #e88800;				/* 文字色 */
	font-size: 18px;			/* 文字サイズ */
	border-bottom: dashed 1px #e88800;	/* 枠線の幅、線種、色 */
	margin-bottom: 10px;		/* 下に空けるスペース */
}

/* 段落(p)タグ */
#main .list p {
	padding: 0 !important;
	margin-left: 28%;			/* 左に空けるスペース。写真(figure)のwidth指定とバランスをとって指定する */
}

/* メインコンテンツ内の「list2」ボックス
---------------------------------------------------------------------------*/

/* ボックス１個あたりの設定 */
#main .list2 {
	overflow: hidden;
	position: relative;
	width: 22%;					/* 幅 */
	float: left;				/* 左に回り込み */
	text-align: center;			/* 内容をセンタリング */
	margin-left: 2.4%;			/* ボックス同士に空ける左右間のスペース */
	font-size: 12px;			/* 文字サイズ */
	margin-bottom: 20px;		/* ボックスの下に空ける上下間のスペース */
}
#main .list2 a {
	display: block;text-decoration: none;overflow: hidden;
}

/* h4タグ */
#main .list2 h4 {
	height: 1.5em;				/* 高さ。レイアウトが崩れるのを防ぐ為、２行目以降は非表示になります */
}

/* 写真のマウスオン時 */
#main .list2 a:hover figure img {
	opacity: 0.7;				/* 透明度 */
}

#main .list2 .photo {
	height: 180px;
}

/* サブコンテンツ
---------------------------------------------------------------------------*/
#sub {
	width: 21%;					/* ボックスの幅 */
	float: left;				/* 左に回り込み */
	padding-bottom: 30px;
}

/* １カラム時のsubコンテンツ */
.c1 #sub {
	display: none;				/* 非表示 */
}

/* h2タグ */
#sub h2 {
	background: #999;			/* 背景色 */
	color: #fff;				/* 文字色 */
	text-align: center;			/* 文字をセンタリング */
	padding: 8px 0;				/* 上下、左右へのh2内の余白 */
	border-radius: 10px 10px 0px 0px;	/* 角丸のサイズ。左上、右上、右下、左下への順 */
}

/* サブコンテンツ内のメニュー
---------------------------------------------------------------------------*/
/* メニュー全体の設定*/
ul.submenu {
	margin-bottom: 20px;		/* メニューブロックの下に空けるスペース */
	border: solid 1px #ccc;		/* 枠線の幅、線種、色 */
	border-bottom: none;		/* 下の線だけ消す設定 */
	text-align: center;			/* 文字をセンタリング */
}

/* メニュー１個ごとの設定 */
ul.submenu li {
	border-bottom: solid 1px #ccc;	/* 下の線の線種、幅、色 */
}
ul.submenu li a {
	text-decoration: none;display: block;
	padding: 5px;					/* メニュー内の余白 */
}

/* サブコンテンツ内のlistボックス
---------------------------------------------------------------------------*/

/* ボックス１個あたりの設定 */
#sub .list {
	position: relative;overflow: hidden;

	/*font-size: 11px;	/*文字サイズを少し小さくする（デフォルトは最上段のbody内にあります）*/
	/*line-height: 1.3;	/*行間を少し狭くする（デフォルトは最上段のbody内にあります）*/

	font-size: 14px;
}
#sub .list a {
	display: block;text-decoration: none;overflow: hidden;
	padding: 8px 0;					/* 上下、左右へのメニュー内の余白 */
	border-bottom: 1px solid #ccc;	/* 下線の幅、線種、色 */
}

/* 写真 */
#sub .list figure img {
	width: 25%;						/* 写真の幅 */
	float: left;					/* 左に回り込み */
	margin-right: 5px;				/* 写真の右に空けるスペース */
}

/* フッター設定
---------------------------------------------------------------------------*/
footer {
	clear: both;
	text-align: center;
	padding: 15px;
	color: #fff;
}
footer .pr {
	display: block;
	font-size: 80%;
}
footer a {
	text-decoration: none;
	color: #fff;
}

/* トップページ内「更新情報・お知らせ」ブロック
---------------------------------------------------------------------------*/
#new {
	margin-bottom: 20px;
	font-size: 90%;
}

/* 見出しを含まないお知らせブロック */
#new dl {
	padding: 0px 10px;				/* 上下、左右へのブロック内の余白 */
}

/* 日付設定 */
#new dt {
	float: left;
	/*width: 9em;					/* 幅 */
	color: #666;					/* 文字色 */
	letter-spacing: 0.1em;
}

/* 記事設定 */
#new dd {
	padding-left: 8em;
}

/* 「更新情報・詳細」ブロック
---------------------------------------------------------------------------*/
#new-detail {
	margin-bottom: 20px;
}

/* 見出しを含まないお知らせブロック */
#new-detail dl {
	padding: 0px 20px;				/* 上下、左右へのブロック内の余白 */
}

/* 日付設定 */
#new-detail dt {
	float: left;
	width: 9em;						/* 幅 */
	color: #666;					/* 文字色 */
	letter-spacing: 0.1em;
}

/* 記事設定 */
#new-detail dd {
	padding-left: 9em;
}

/* 写真エリア */
#new-detail .photo-block {
	width: 100%;
	padding: 0px 20px;				/* 上下、左右へのブロック内の余白 */
}
/* 写真エリア */
.photo-block .photo {
	float: left;
	width: 31%;
	margin-right: 4px;
}


/* 写真エリア */
#new-detail .link-block {
	width: 100%;
	padding: 0px 20px;				/* 上下、左右へのブロック内の余白 */
}


/* 「降籏ケンネルについて」ブロック
---------------------------------------------------------------------------*/
#about {
}

#about .map_access {
	margin: 20px 0;
}

/* テーブル１
---------------------------------------------------------------------------*/
/* テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	border: 1px solid #ccc;			/* テーブルの枠線の幅、線種、色 */
	border-bottom: none;			/* 下線だけ消す */
	text-align: left;				/* 文字を左寄せ */
	background: #eee;				/* 背景色 */
	font-weight: bold;				/* 太字に */
	padding: 10px;					/* ボックス内の余白 */
}

/* テーブル設定*/
.ta1 {
	width: 100%;
	margin: 0px auto 20px;
}
.ta1, .ta1 td, .ta1 th {
	border: 1px solid #ccc;			/* テーブルの枠線の幅、線種、色 */
	padding: 10px;					/* ボックス内の余白 */
	word-break: break-all;
}

/* 左側ボックス*/
.ta1 th {
	width: 180px;					/* 幅 */
	text-align: center;				/* 背景色 */
}

/* テーブル１行目に入った見出し部分 */
.ta1 th.tamidashi{
	width: auto;
	text-align: left;
	background: #eee;				/* 背景色 */
}

/* こだわり検索のフロート指定(CMS用) */
.ta1 td .specialbox {
	float: left;
	width: 45%;
}

/* テーブル（お問い合わせフォーム）
---------------------------------------------------------------------------*/
.ta_contact {
	width: 100%;
	margin-bottom: 15px;
}
.ta_contact, .ta_contact td, .ta_contact th {
	border: 1px solid #ccc;			/* テーブルの枠線の幅、線種、色 */
	padding: 6px;					/* ボックス内の余白 */
	font-size: 12px;
	word-break: break-all;
}
/* テーブル１行目に入った見出し部分 */
.ta_contact th {
	width: 180px;
	text-align: left;				/* 左よせ */
	background: #eeece1;			/* 背景色 */
	color: #000;
	font-weight: bold;				/* 太字に */
	font-size: 12px;
	text-align: left;				/* センタリング */
}

/* テーブル（会社概要）
---------------------------------------------------------------------------*/
.ta_company {
	width: 100%;
	margin-bottom: 15px;
}
.ta_company, .ta_company td, .ta_company th {
	border: 1px solid #ccc;			/* テーブルの枠線の幅、線種、色 */
	padding: 6px;					/* ボックス内の余白 */
	font-size: 12px;
	word-break: break-all;
}
/* テーブル１行目に入った見出し部分 */
.ta_company th {
	width: 150px;
	text-align: left;				/* 左よせ */
	background: #eeece1;			/* 背景色 */
	color: #000;
	font-weight: bold;				/* 太字に */
	font-size: 12px;
	text-align: left;				/* センタリング */
}

/* 「必須」マーク
---------------------------------------------------------------------------*/
.required {
}

.required:after {
	padding: 0px 4px;
    color: #FFF;
	position: relative;
	float: right;
    content: " 必須 ";
	background: #FF0000;
	font-size: 11px;
}

/* inputボタン
---------------------------------------------------------------------------*/
#contents input[type="submit"].btn,
#contents input[type="button"].btn,
#contents input[type="reset"].btn {
	padding: 5px 20px;				/* 上下、左右へのボックス内の余白 */
	border: 1px solid #ccc;			/* 枠線の幅、線種、色 */
	font-size: 20px;				/* 文字サイズ */
	border-radius: 3px;				/* 角丸のサイズ */
	background: #eee;				/* 背景色 */
}

/* マウスオン時の設定 */
#contents input[type="submit"].btn:hover,
#contents input[type="button"].btn:hover,
#contents input[type="reset"].btn:hover {
	border: 1px solid #999;			/* 枠線の幅、線種、色 */
	background: #fff;				/* 背景色 */
}

/* ページの上部に戻る「↑」ボタン
---------------------------------------------------------------------------*/
@keyframes scroll {
0% {opacity: 0;}
100% {opacity: 1;}
}

/* 通常時のボタンは非表示 */
body .nav-fix-pos-pagetop a {
	display: none;
}

/* fixmenu_pagetop.jsで設定している設定値になったら出現するボタンスタイル */
body.is-fixed-pagetop .nav-fix-pos-pagetop a {
	display: block;text-decoration: none;text-align: center;
	width: 50px;					/* ボタンの幅 */
	line-height: 50px;				/* ボタンの高さ */
	z-index: 100;
	position: fixed;
	bottom: 50px;					/* ウィンドウの下から50pxの場所に配置 */
	right: 5%;						/* ウィンドウの右から5%の場所に配置 */
	background: #000;				/* 背景色（古いブラウザ用） */
	background: rgba(0,0,0,0.6);	/* 背景色。0,0,0は黒の事で0.6は60%色がついた状態 */
	color: #fff;					/* 文字色 */
	border-radius: 50%;				/* 角丸指定。50%にすると円形になる。四角形がいいならこの１行削除 */
	animation-name: scroll;			/* 上のアニメーションで指定しているkeyframesの名前（scroll） */
	animation-duration: 1S;			/* アニメーションの実行時間 */
	animation-fill-mode: forwards;	/* アニメーションの完了後、最後のキーフレームを維持する */
}

/* マウスオン時の背景色 */
body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {
	background: #999;
}

/* 一覧ページのボックス内のアイコン
（CMSの場合は管理ページの「オプション1」～のプルダウンと、setup.phpの「オプション選択肢」に関連します）
---------------------------------------------------------------------------*/
/* option1,option2,option3共通 */
span.option1, span.option2, span.option3 {
	text-align: center;
	display: block;
	font-size: 10px;				/* 文字サイズ */
	width: 120px;					/* 幅 */
	position: absolute;
	right: 0px;						/* ボックスに対して右から0pxの場所に配置 */
	top: 0px;						/* ボックスに対して上から0pxの場所に配置 */
	transform: rotate(45deg) translate(36px,-15px);	/* 45度回転、右へ,下へ(マイナス設定なので上へ向けての指定)の移動距離 */
	color: #FFF;					/* 文字色 */
	/*background: #585858;			/* 背景色 */
	background: #14af37;			/* 背景色 */
}

/* option1への追加設定 */
span.option1 {
	color: #FFF;					/* 文字色 */
	background: #F00;				/* 背景色 */
}
/* option2への追加設定 */
span.option2 {
	color: #000;					/* 文字色 */
	background: #FFFF00;			/* 背景色 */
}

/* h2タグ内で使った場合のoption1とoption2とoption3 */
h2 span.option1, h2 span.option2, h2 span.option3 {
	width: auto;
	position: static;
	transform: none;
	display: inline-block;
	font-size: 14px;
	margin-left: 10px;
	padding: 0px 5px;
	margin-bottom: 3px;
}

/*トップページのNEWアイコン
---------------------------------------------------------------------------*/
.newicon {
	background: #F00;				/* 背景色 */
	color: #FFF;					/* 文字色 */
	font-size: 70%;					/* 文字サイズ */
	line-height: 1.5;
	padding: 2px 5px;
	border-radius: 2px;
	margin: 0px 5px;
	vertical-align: text-top;
}

/* checkブロック。赤い注意書きブロックです。
---------------------------------------------------------------------------*/
p.check {
	background: #ff0000;			/* 背景色 */
	color:#fff;						/* 文字色 */
	padding: 10px 25px !important;	/* 上下、左右へのボックス内余白 */
	margin-bottom: 20px;
}
p.check a {color: #fff;}

/* その他
---------------------------------------------------------------------------*/
.look {background: #ccc;padding: 5px 10px;border-radius: 4px;}
.mb15,.mb1em {margin-bottom: 15px !important;}
.mb20 {margin-bottom: 20px !important;}
.clear {clear: both;}
ul.disc {padding: 0em 25px 15px;list-style: disc;}
.color1, .color1 a {color: #f95f9c !important;}
.pr {font-size: 10px;}
.wl {width: 96%;}
.ws {width: 50%;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.l {text-align: left !important;}
.fl {float: left;}
img.fl {float: left;width:30%;margin-right: 20px;margin-bottom: 20px;}
.fr {float: right;}
img.fr {float: right;width:30%;margin-left: 20px;margin-bottom: 20px;}
.mini1 {font-size: 11px;display: inline-block;line-height: 1.5;}
.sh {display: none;}

/* プライバシーポリシー
---------------------------------------------------------------------------*/
#privacy .heading {
	width: 100%; /* 見出しエリアの幅 */
	margin-bottom: 1em;
	padding: 4px 0; /* 見出しエリアのパディング（上下、左右） */
	border-bottom: 1px #c0c0c0 solid; /* 見出しエリアの下境界線 */
}

/* --- 見出し --- */
#privacy .heading h3 {
	margin: 0;
	padding: 3px 3px 0 5px; /* 見出しのパディング（上右下左） */
	border-left: 5px #73b5e4 solid; /* 見出しの左境界線 */
	font-size: 110%; /* 見出しの文字サイズ */
	line-height: 100%;
	background: #fff;
}

#privacy {
	background-color: #FFFFFF;
	margin-bottom: 5px;
	padding: 10px;
	font-family: "メイリオ","Meiryo",arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	line-height: 200%;
}

#privacy ul {
	display: block;
	list-style-type: decimal;
	-webkit-margin-before: 1em;
	-webkit-margin-after: 1em;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	-webkit-padding-start: 10px;
}

#privacy li {
	list-style-type: decimal;
	display: list-item;
	margin-left: 15px;
	text-align: -webkit-match-parent;
}

/* 利用規約
---------------------------------------------------------------------------*/
/* --- 見出しエリア --- */
#term .heading {
	width: 100%; /* 見出しエリアの幅 */
	margin-bottom: 1em;
	padding: 4px 0; /* 見出しエリアのパディング（上下、左右） */
	border-bottom: 1px #c0c0c0 solid; /* 見出しエリアの下境界線 */
}

/* --- 見出し --- */
#term .heading h3 {
	margin: 0;
	padding: 3px 3px 0 5px; /* 見出しのパディング（上右下左） */
	border-left: 5px #73b5e4 solid; /* 見出しの左境界線 */
	font-size: 110%; /* 見出しの文字サイズ */
	line-height: 100%;
	background: #fff;
}

#term {
	background-color: #FFFFFF;
	margin-bottom: 5px;
	padding: 10px;
	font-family: "メイリオ","Meiryo",arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	line-height: 200%;
}

#term ul {
	display: block;
	list-style-type: decimal;
	-webkit-margin-before: 1em;
	-webkit-margin-after: 1em;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	-webkit-padding-start: 10px;
}

#term li {
	list-style-type: decimal;
	display: list-item;
	margin-left: 15px;
	text-align: -webkit-match-parent;
}

/* 引退犬について
---------------------------------------------------------------------------*/
#retired .heading {
	width: 100%; /* 見出しエリアの幅 */
	margin-bottom: 1em;
	padding: 4px 0; /* 見出しエリアのパディング（上下、左右） */
	border-bottom: 1px #c0c0c0 solid; /* 見出しエリアの下境界線 */
}

/* --- 見出し --- */
#retired .heading h3 {
	margin: 0;
	padding: 3px 3px 0 5px; /* 見出しのパディング（上右下左） */
	border-left: 5px #73b5e4 solid; /* 見出しの左境界線 */
	font-size: 110%; /* 見出しの文字サイズ */
	line-height: 100%;
	background: #fff;
}

#retired {
	background-color: #FFFFFF;
	margin-bottom: 5px;
	padding: 6px;
	font-family: "メイリオ","Meiryo",arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	line-height: 200%;
}

#retired ul {
	display: block;
	list-style-type: decimal;
	-webkit-margin-before: 0.2em;
	-webkit-margin-after: 1em;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	-webkit-padding-start: 10px;
	font-weight: bold;
}

#retired li {
	list-style-type: decimal;
	display: list-item;
	margin-left: 15px;
	text-align: -webkit-match-parent;
	margin-bottom: 20px;
}
#retired li span {
	font-weight: normal;
}

#retired li a {
	text-decoration: underline;
}


/* ページャー
---------------------------------------------------------------------------*/
ul.pager {
	margin: 0px;
	font-size: 12px;
}
ul.pager li {
	float: left;
	margin-right: 5px;
	border: 1px #e88800 solid;
	font-weight: bold;
}
ul.pager li.prev,
ul.pager li.next {
	border: none;
}
ul.pager li a {
	position: relative;
	display: block;
	padding: 2px 5px;
	color: #e88800;
}
ul.pager li a:link,
ul.pager li a:visited {
	text-decoration: none;
}

ul.pager li a:hover,
ul.pager li a:active {
	background-color: #AADDFF;
	text-decoration: none;
}

ul.pager li em {
	display: block;
	padding: 2px 5px;
	background: #e88800;
	color: #FFFFFF;
}

ul.pager li.active {
	display: block;
	padding: 2px 5px;
	background: #e88800;
	color: #ffffff;
}

/* 入力欄の注釈
---------------------------------------------------------------------------*/
.guide_msg {
	padding: 0px 0 0;
	font-size: 12px;
	color: #808080;
	line-height: 120%;
}

.update_msg {
	background-color: #afafaf;
	text-align:center;
}

/* --- button Area --- */

.btn_area_1cl {
	padding-top: 1em;
}

ul.btn_area_1cl li {
	margin-bottom: 1em;
}
ul.btn_area_1cl li a,
ul.btn_area_1cl li button {
	padding: 0.4em 0.4em 0.4em;
}
ul.btn_area_1cl li span {
	font-size: 10px;
	font-size: 0.9rem;
}

ul.btn_area_1cl {
	width: 35%;
	margin: 0 auto;
	overflow: hidden;
}
ul.btn_area_1cl li.button02 {
	text-align: center;
}
ul.btn_area_1cl li.button03 {
	float: left;
	width: 45%;
}
ul.btn_area_1cl li.button05 {
	float: right;
	width: 45%;
}
ul.btn_area_1cl li.button05Dis {
	float: right;
	width: 45%;
}
ul.btn_area_1cl li.bt_left {
	float: left;
}
ul.btn_area_1cl li.bt_right {
	float: right;
}

/* 「確認画面へ」 */
.button_conf {
	/*TBASEbackground: #747474;*/
	background: #FF8000;
	text-align: center;
	padding: 2px;
}
.button_conf:hover {
	/*background: #747474;*/
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
}

.button_conf a {
	padding: 0.2em 0 0.6em;
	display: block;
	color: #fff;
}
.button_conf button {
	background: none;
	border: none;
	padding: 0.2em 0 0.6em;
	color: #fff;
	cursor: pointer;
	width: 100%;
}
.button_conf a:link { text-decoration: none;}
.button_conf a:visited { text-decoration: none;}
.button_conf a:hover { text-decoration: none;}
.button_conf a:active { text-decoration: none;}

/* 「ご家族募集中の引退犬をもっと見る」 */
.button_list {
	background: #e88800;
	text-align: center;
	padding: 2px;
}
.button_list:hover {
	/*background: #747474;*/
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
}

.button_list a {
	padding: 0.2em 0 0.6em;
	display: block;
	color: #fff;
}
.button_list button {
	background: none;
	border: none;
	padding: 0.2em 0 0.6em;
	color: #fff;
	cursor: pointer;
	width: 100%;
}
.button_list a:link { text-decoration: none;}
.button_list a:visited { text-decoration: none;}
.button_list a:hover { text-decoration: none;}
.button_list a:active { text-decoration: none;}

/* 「ご家族募集中の引退犬をもっと見る」禁止 */
.button_list_dis {
	background: #d3d3d3;
	text-align: center;
	padding: 2px;
}

.button_list_dis a {
	padding: 0.2em 0 0.6em;
	display: block;
	color: #fff;
}
.button_list_dis button {
	background: none;
	border: none;
	padding: 0.2em 0 0.6em;
	color: #fff;
	width: 100%;
}
.button_list_dis a:link { text-decoration: none;}
.button_list_dis a:visited { text-decoration: none;}
.button_list_dis a:hover { text-decoration: none;}
.button_list_dis a:active { text-decoration: none;}


/* --- button Area --- */

.btn_area {
	padding-top: 1em;
}

ul.btn_area li {
	margin-bottom: 1em;
}
ul.btn_area li a,
ul.btn_area li button {
	padding: 0.4em 0.4em 0.4em;
}
ul.btn_area li span {
	font-size: 10px;
	font-size: 0.9rem;
}

ul.btn_area {
	width: 80%;
	margin: 0 auto;
	overflow: hidden;
}
ul.btn_area li.button02 {
	text-align: center;
}
ul.btn_area li.button03 {
	float: left;
	width: 45%;
}
ul.btn_area li.button05 {
	float: right;
	width: 45%;
}
ul.btn_area li.bt_left {
	float: left;
}
ul.btn_area li.bt_right {
	float: right;
}

ul.btn_area li.button03 {
	float: left;
	width: 45%;
}
ul.btn_area li.button05 {
	float: right;
	width: 45%;
}

/* 「戻る」ボタン */
.button03 {
	text-align: center;
	/*background: #002060;*/
	background: #747474;
	padding: 2px;
}
.button03:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
}

.button03 a {
	padding: 0.6em 0 0.5em;
	display: block;
	color: #fff;
}
.button03 a:link { text-decoration: none;}
.button03 a:visited { text-decoration: none;}
.button03 a:hover { text-decoration: none;}
.button03 a:active { text-decoration: none;}

.button03 button {
	background: none; border: none;
	padding: 0.6em 0 0.5em;
	color: #fff;
	width: 100%;
	cursor: pointer;
}

/* 「送信」ボタン */
.button05 {
	/*background: #747474;*/
	background: #e88800;
	text-align: center;
	padding: 2px;
}
.button05:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
}

.button05 a {
	padding: 0.6em 0 0.6em;
	display: block;
	color: #fff;
}
.button05 button {
	background: none; border: none;
	padding: 0.6em 0 0.6em;
	color: #fff;
	cursor: pointer;
	width: 100%;
}

.button05 a:link { text-decoration: none;}
.button05 a:visited { text-decoration: none;}
.button05 a:hover { text-decoration: none;}
.button05 a:active { text-decoration: none;}

/* 詳細画面用配置ブロック（２個）
---------------------------------------------------------------------------*/
.blk-item-wrap {
	width: 100%;
}

.blk-item-wrap .blk-left {
	float: left;
	width: 48%;
	margin-right: 10px;
}

.blk-item-wrap .blk-right {
	float: left;
	width: 50%;
}
.blk-item-wrap .youtube {
  float: left;
  width: 98%;
  aspect-ratio: 16 / 9;
}
.blk-item-wrap .youtube iframe {
  width: 100%;
  height: 100%;
}


/* 画像配置ブロック（２個）
---------------------------------------------------------------------------*/
.blk-wrap2 {
	width: 100%;
}

.blk-wrap2 .blk-left {
	float: left;
	width: 48%;
	margin-right: 10px;
}

.blk-wrap2 .blk-right {
	float: left;
	width: 48%;
}

/* 画像配置ブロック（３個）
---------------------------------------------------------------------------*/
.blk-wrap3 {
	width: 100%;
}

.blk-wrap3 .blk-left {
	float: left;
	width: 32%;
	margin-right: 10px;
}

.blk-wrap3 .blk-center {
	float: left;
	width: 32%;
	margin-right: 10px;
}

.blk-wrap3 .blk-right {
	float: left;
	width: 32%;
}

/* YOUTUBE配置ブロック（２個）
---------------------------------------------------------------------------*/
.blk-youtube2 {
	width: 100%;
}

.blk-youtube2 .blk-left {
	float: left;
	width: 50%;
}

.blk-youtube2 .blk-right {
	float: right;
	width: 50%;
}

/* TOPページ Message
---------------------------------------------------------------------------*/
#top-msg {
	margin-bottom: 5px;
	padding: 10px;
	font-family: "メイリオ","Meiryo",arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	line-height: 200%;
}
#top-msg .blkWrap {
	width: 100%;
}

#top-msg .blkWrap .blkLeft {
	float: left;
	width: 48%;
	margin-right: 10px;
}

#top-msg .blkWrap .blkRight {
	float: left;
	width: 48%;
}

/* 動画 */
.video{
	position:relative;
	width:100%;
	padding-top:56.25%;
}
.video iframe{
	position:absolute;
	top:0;
	right:0;
	width:100%;
	height:100%;
}

/* 動画 */
.video{
	position:relative;
	width:100%;
	padding-top:56.25%;
}
.video iframe{
	position:absolute;
	top:0;
	right:0;
	width:100%;
	height:100%;
}

/* 入力エラーメッセージ
---------------------------------------------------------------------------*/
.error_msg {
	padding: 0 0 0 ;
	font-size: 12px;
	font-weight: bold;
	color: red;
}

.inputCol {
    padding          : 8px;
    background       : #ffffff;
    font-size        : 14px;
    line-height      : 1.8em;
    text-align       : left;
    border:1px solid #778899;
    FONT-FAMILY      : "メイリオ";
}
.inputColError {
    padding          : 5px;
    background       : #FEE;
    font-size        : 14px;
    line-height      : 1.8em;
    text-align       : left;
    border:1px solid #778899;
    FONT-FAMILY      : "メイリオ";
}

.youtube {
  float: left;
  width: 46%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}

.youtube2 {
  float: left;
  width: 98%;
  aspect-ratio: 16 / 9;
}
.youtube2 iframe {
  width: 100%;
  height: 100%;
}

/* スマートフォン専用メニュー */
.spMenu1 {
	display:none;
}


/* ------------------------------------------------------- */
/* max-width:800px tablet Base --------------------------- */
/* スマートフォン */
/* ------------------------------------------------------- */

/* 800pxまでの幅の場合に適応される
---------------------------------------------------------------------------*/
@media screen and (max-width:800px){

	/* ヘッダー（サイト名が入ったブロック）
	-----------------------------------------------------------------------*/
	/* ヘッダーのinnerへの追加設定*/
	header .inner {
		height: 80px;			/* 高さ */
	}

	/* ヘッダーのinnerへの追加設定（トップページへの追加設定）*/
	.top header .inner {
		height: 250px;			/* 高さの再指定 */
	}

	/* ロゴ画像の設定*/
	header #logo {
		width: 300px;			/* 画像の幅 */
	}

	/* メインメニュー
	---------------------------------------------------------------------------*/
	/* アニメーションのフレーム設定。全100コマアニメーションだと思って下さい。透明(0%)から色を100%出すアニメーション指定。*/
	@keyframes menu1 {
		0% {opacity: 0;}
		100% {opacity: 1;}
	}

	/* スマホ用メニューブロック */
	#menubar-s {
		display: block;overflow: hidden;
		position: absolute;
		top: 120px;						/* 上から120pxの場所に配置 */
		border-top: 1px solid #fff;		/* 上の線の幅、線種、色 */
		width: 100%;
		z-index: 10;
		animation-name: menu1;			/* 上のkeyframesの名前 */
		animation-duration: 0.5S;		/* アニメーションの実行時間。0.5秒 */
		animation-fill-mode: both;		/* アニメーションの完了後、最後のキーフレームを維持する */
	}

	/* メニュー１個あたりの設定 */
	#menubar-s li a {
		display: block;text-decoration: none;
		padding: 15px 10px 15px 20px;	/* 上、右、下、左へのメニュー内の余白 */
		border-bottom: 1px solid #fff;	/* 下の線の幅、線種、色 */
		background: rgba(0,0,0,0.8);	/* 背景色 */
		font-size: 20px;
		color: #fff;					/* 文字色 */
	}

	/* PC用メニューを非表示にする */
	#menubar {display: none;}

	/* ３本バーアイコン設定
	---------------------------------------------------------------------------*/

	/* ３本バーブロック */
	#menubar_hdr {
		display: block;
		position: absolute;
		/*TBASEtop: 30px;				/* 上から30pxの場所に配置 */
		top: 10px;				/* 上から30pxの場所に配置 */
		right: 3%;				/* 右から3%の場所に配置 */
		border: 1px solid #000;	/* 枠線の幅、線種、色 */
	}

	/* アイコン共通設定 */
	#menubar_hdr.close,
	#menubar_hdr.open {
		width: 50px;			/* 幅 */
		height: 50px;			/* 高さ */
	}

	/* 三本バーアイコン */
	#menubar_hdr.close {
		background: #fff url(../images/icon_menu.png) no-repeat center top/50px;
	}

	/* 閉じるアイコン */
	#menubar_hdr.open {
		background: #fff url(../images/icon_menu.png) no-repeat center bottom/50px;
	}

	/* main,sub,side,contents-in
	---------------------------------------------------------------------------*/
	#main, #sub, .inner {
		float: none;
		width: auto;
	}

	/*sub,sideコンテンツ内のおすすめ一覧ブロック
	---------------------------------------------------------------------------*/

	/* ボックス内の写真設定 */
	#sub .list figure img, #side .list figure img {
		width: 20%;				/* 写真の幅 */
	}

	/* その他
	---------------------------------------------------------------------------*/
	body.s-n #sub,body.s-n #side,body.s-n #footermenu {display: none;}
	.sh {display:block;}
	.pc {display:none;}

	/* 里親募集 詳細
	---------------------------------------------------------------------------*/
	#parentDetail .blkWrap {
		width: 100%;
	}

	#top-msg .blkWrap .blkLeft {
		float: none;
		width: 100%;
	}

	#top-msg .blkWrap .blkRight {
		float: none;
		width: 100%;
		margin: 10px 0;
	}

	/* 画像配置ブロック（2個）
	---------------------------------------------------------------------------*/
	.blk-wrap2 .blk-left {
		float: none;
		width: 100%;
		margin-bottom: 10px;
		text-align: center;
	}

	.blk-wrap2 .blk-right {
		float: none;
		width: 100%;
		margin-bottom: 10px;
		text-align: center;
	}

	/* 画像配置ブロック（３個）
	---------------------------------------------------------------------------*/
	.blk-wrap3 .blk-left {
		float: none;
		width: 100%;
		margin-bottom: 10px;
		text-align: center;
	}

	.blk-wrap3 .blk-center {
		float: none;
		width: 100%;
		margin-bottom: 10px;
		text-align: center;
	}

	.blk-wrap3 .blk-right {
		float: none;
		width: 100%;
		margin-bottom: 10px;
		text-align: center;
	}

	/* 画像配置ブロック（2個）
	---------------------------------------------------------------------------*/
	.blk-youtube2 .blk-left {
		float: none;
		width: 100%;
		margin-bottom: 10px;
		text-align: center;
	}

	.blk-youtube2 .blk-right {
		float: none;
		width: 100%;
		margin-bottom: 10px;
		text-align: center;
	}

	/* 詳細画面用配置ブロック（２個）
	---------------------------------------------------------------------------*/
	.blk-item-wrap {
		width: 100%;
	}

	.blk-item-wrap .blk-left {
		float: none;
		width: 100%;
		margin-right: 10px;
	}

	.blk-item-wrap .blk-right {
		float: none;
		width: 100%;
	}
	.blk-item-wrap .youtube {
	  float: left;
	  width: 99%;
	  aspect-ratio: 16 / 9;
	}
	.blk-item-wrap .youtube iframe {
	  width: 100%;
	  height: 100%;
	}

	/* お問合せ
	---------------------------------------------------------------------------*/
	/* --- 見出しエリア --- */
	.ta_contact {
		width: 100%;
	}

	.ta_contact .last td:last-child {
		border-bottom: solid 1px #ccc;
		width: 100%;
	}

	.ta_contact th {
		border-bottom: none;
		display: block;
		width: 96%;
	}

	.ta_contact td {
		border-bottom: none;
		display: block;
		width: 96%;
	}

	.ta_contact th.tamidashi {
		width: 96%;
	}

	/* お問合せ
	---------------------------------------------------------------------------*/
	/* --- 見出しエリア --- */
	.ta_company {
		width: 100%;
	}

	.ta_company .last td:last-child {
		border-bottom: solid 1px #ccc;
		width: 100%;
	}

	.ta_company th {
		border-bottom: none;
		display: block;
		width: 96%;
	}

	.ta_company td {
		border-bottom: none;
		display: block;
		width: 96%;
	}

	.ta_company th.tamidashi {
		width: 96%;
	}

	body.is-fixed-pagetop .nav-fix-pos-pagetop a {
		bottom: 90px;					/* ウィンドウの下から50pxの場所に配置 */
	}
}


/* ------------------------------------------------------- */
/* max-width:480px tablet Base --------------------------- */
/* スマートフォン */
/* ------------------------------------------------------- */

/* 480pxまでの幅の場合に適応される
---------------------------------------------------------------------------*/
@media screen and (max-width:480px){

	/* 全体の設定
	---------------------------------------------------------------------------*/
	body {
		font-size: 12px;			/* 文字サイズ */
		line-height: 1.5;			/* 行間 */
	}

	/* ヘッダー（サイト名が入ったブロック）
	---------------------------------------------------------------------------*/
	/* ヘッダーのinnerへの追加設定（トップページへの追加設定） */
	.top header .inner {
		height: 200px;	/* 高さの再指定 */
	}

	/* コンテンツ（mainとsubを囲むブロック）
	---------------------------------------------------------------------------*/
	#contents {
		padding: 15px;			/* ボックス内の余白 */
		margin: 20px 3% 0;		/* ボックスの外への余白。上、左右、下 */
	}

	/* mainコンテンツ（中央のブロック）
	---------------------------------------------------------------------------*/
	/* mainコンテンツのh2,h3タグ設定 */
	#main h2, #main h3 {
		font-size: 14px;		/* 文字サイズ */
		padding-left: 10px;
	}

	/* mainコンテンツの段落タグ設定 */
	#main p {
		padding: 0 10px 20px;	/* 上、左右、下への余白 */
	}

	/* メインコンテンツ内の「list」ボックス
	---------------------------------------------------------------------------*/
	#main .list a {
		padding: 10px;			/* ボックス内の余白 */
	}

	/* h4タグ */
	#main .list h4 {
		font-size: 12px;		/* 文字サイズ */
	}

	/* メインコンテンツ内の「list2」ボックス
	---------------------------------------------------------------------------*/

	/* ボックス１個あたりの設定 */
	#main .list2 {
		width: 45%;				/* 幅 */
		margin-left: 3%;		/* ボックス同士に空ける左右間のスペース */
	}

	#main .list2 .photo {
		height: 160px;
	}

	/* テーブル
	---------------------------------------------------------------------------*/

	/* テーブル１行目に入った見出し部分（※caption） */
	.ta1 caption {
		padding: 5px;
	}
	/* テーブル内の左側 */
	.ta1 th {
		width: 100px;
		padding: 5px;
	}
	/* テーブル内の右側 */
	.ta1 td {
		width: auto;
		padding: 5px;
	}

	/* その他
	---------------------------------------------------------------------------*/
	.ws,.wl {width: 94%;}
	img.fr,img.fl {float: none;margin: 0;width: 100%;}

	/* スマートフォン専用メニュー
	---------------------------------------------------------------------------*/
	.spMenu1 {
		display:block;
		position:fixed;
		bottom:0;
		left:0;
		overflow:hidden;
		/*background:#c8317a;*/
		background:#FF8000;
		z-index:9998;
		width:100%;
	}
	.spMenu1 ul {
		width:100%;
		display:table;
		table-layout:fixed;
		/*TBASEborder-top:1px solid #65ae5c;*/
		/*TBASEborder-bottom:1px solid #65ae5c;*/
		-moz-box-shadow: 0px 0px 5px #666666;
		-webkit-box-shadow: 0px 0px 5px #666666;
		box-shadow: 0px 0px 5px #666666;
	}
	.spMenu1 ul li {
		display:table-cell;
		/*TBASEbackground:#c8317a;*/
		background:#FF8000;
	}
	.spMenu1 a {
		text-decoration:none;
		color:#fff;
		padding:5px;
		display:block;
	}
	.spMenu1 a:hover {
		/*TBASEbackground:#c8317a;*/
		background:#FF8000;
	}
	.spMenu1 ul li span {
		display:block;
		text-align:center;
		font-size:0.85em;
	}
	.spMenu1 ul li span[class*="fa"] {
		font-size:1.9em;
	}

	/* ボタンエリア
	---------------------------------------------------------------------------*/
	ul.btn_area_1cl {
		width: 100%;
		margin: 0 auto;
		overflow: hidden;
	}

}


/* 400pxまでの幅の場合に適応される
---------------------------------------------------------------------------*/
@media screen and (max-width:400px){


}