@charset "utf-8";
/**
 * @file    style.css
 * @brief   システム管理画面に関するスタイル
 * @author  k.takahashi
 * @date    2025.07.01
*/
@import url(//use.fontawesome.com/releases/v5.4.2/css/all.css);

/* リセットCSS（ress.css）の読み込み
---------------------------------------------------------------------------*/
@import url("https://unpkg.com/ress/dist/ress.min.css");

/* Font Awesomeの読み込み
---------------------------------------------------------------------------*/
/*@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");*/

/* slick.cssの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");

/* --------------------------------------------------------------

home トップページ

-------------------------------------------------------------- */
/* ----------------------------------------------
    共通設定
-----------------------------------------------*/

/* 全体の設定
---------------------------------------------------------------------------*/
html,body {
	font-size: 12px;	/* 基準となるフォントサイズ。下の方にある「画面幅800px以上」で基準を大きなサイズに変更しています。*/
}

body {
	overflow-x: hidden;
	font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	-webkit-text-size-adjust: none;
	background: #fff;					/* 背景色		*/
	color: #333;						/* 全体の文字色 */
	line-height: 2;						/* 行間			*/
}

/* table全般の設定 */
table {border-collapse:collapse;}

/* 画像全般の設定 */
img {
	border: none;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

/* section全般の設定 */
section + section {
	padding-top: 30px;					/* sectionの間に空けるスペース */
}

/* フォームタグ全般の設定 */
input, textarea, select {
	border: 1px solid #999;				/* 枠線の幅、線種、色 */
	padding: 0 10px;
	font-size: 1.2rem;
}

input::placeholder {
	font-size: 1.0rem;
}

/* ress.cssでselectで矢印が消えてしまうのを戻す */
select {
	-moz-appearance: menulist;
	-webkit-appearance: menulist;
	appearance: menulist;
}
select::-ms-expand {
    display: block;	/*IE用*/
}

/* videoタグ */
video {max-width: 100%;}

/* iframeタグ */
iframe {width: 100%;}

/* ulタグ、olタグ */
ul,ol {
	margin: 0 5px 30px 25px;			/*上、右、下、左へ空けるスペース*/
}

.al-center {
	text-align: center;
}
.al-left {
	text-align: left;
}
.al-right {
	text-align: right;
}

/* opa1（透明から着色状態に）
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

/* リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: #333;	/* 文字色 */
}

a:hover {
	color: #389168;						/* マウスオン時の文字色 */
}

a.board-link {
	color: #1e90ff;	/* 文字色 */
}

.board-link a:hover {
	color: #389168;						/* マウスオン時の文字色 */
}

/* container。サイト全体を囲むブロック。
---------------------------------------------------------------------------*/
#container {
	margin: 0 auto;
	max-width: 1200px;					/* 最大幅。これ以上幅が広がらないように。*/
}

/* header。ロゴなどが入った最上段のボックス。
---------------------------------------------------------------------------*/
header {
	display: flex;						/* flexボックスを使う指定 */
	flex-direction: column;				/* 子要素を縦並びにする */
	text-align: center;					/* テキストをセンタリング */
	padding: 10px 0;					/* 上下、左右のボックス内の余白 */
}

/* logo画像*/
header #logo {
	width: 260px;						/* 画像の幅 */
	margin: 0 auto;						/* 左右中央に配置する */
}

/* 電話番号*/
header address {
	font-style: normal;					/* addressタグがデフォルトで斜体なので、通常にする。*/
}

/* 電話番号のアイコン（アイコンにはFont Awesomeを使用）*/
header i {
	padding-right: 5px;				/* 右側に空ける余白 */
}

/* address内のspanタグ。受付時間などの行です。*/
header address span {
	/*TBASEdisplay: block;*/
	font-size: 0.8rem;					/* 文字サイズ */
}

/* ３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/* ３本バーブロック*/
#menubar_hdr {
	display: block;
	position: fixed;z-index: 100;
	top: 15px;							/* 上からの配置場所 */
	right: 10px;						/* 左からの配置場所 */
	width: 40px;						/* 幅 */
	height: 40px;						/* 高さ */
	border-radius: 50%;
/*	background: #389168 url(../images/icon_menu.png) no-repeat center top/50px;	/* 背景色、背景画像の読み込み、画像の上半分（３本マーク）を表示。幅は50px。*/
	background: #52e252 url(../images/icon_menu.png) no-repeat center top/40px;	/* 背景色、背景画像の読み込み、画像の上半分（３本マーク）を表示。幅は50px。*/
}

/* 小さな端末用のメニューが開いた段階の３本バーの設定。×印が出ている状態の設定。*/
#menubar_hdr.close {
	background: #ff0000 url(../images/icon_menu.png) no-repeat center bottom/40px;	/* 背景色、背景画像の読み込み、画像の下半分（×マーク）を表示。幅は50px。*/
}

/* 大きな端末用のメインメニューの設定
---------------------------------------------------------------------------*/
#menubar {
	display: none;						/* 非表示にしておく*/
}

/* 小さな端末用のメインメニューの設定
---------------------------------------------------------------------------*/
/* ボックス全体の設定*/
#menubar-s {
	display: none;						/* デフォルトで非表示にしておく*/
	animation-name: opa1;				/* keyframes.cssで使う@keyframesの指定*/
	animation-duration: 1S;				/* アニメーションの実行時間*/
	animation-fill-mode: both;			/* アニメーションの待機中は最初のキーフレームを維持、終了後は最後のキーフレームを維持。*/
	background: #389168;				/* 背景色*/
	position: fixed;overflow: auto;z-index: 99;	/* fixedはスクロールしても動かない為の指定*/
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	padding: 50px;						/* ボックス内の余白。色がついた部分と、メニューがある白いブロックとの差です。*/
	text-align: center;					/* テキストをセンタリング*/
}

/* nav要素 */
#menubar-s nav {
	height: 100%;
	background: #fff;					/* 背景色。下の「#menubar-s ul」と揃えておいて下さい。*/
	padding: 20px;						/* ボックス内の余白。メニューにスクロールバーが出た場合に適度な余白をとる為です。*/
	border-radius: 30px;				/* 角を丸くする指定。直角がいいならこの１行を削除。*/
}

/* ul要素。メニュー１個１個を囲む親のボックス。*/
#menubar-s ul {
	margin: 0;
	height: 100%;
	list-style: none;
	padding: 20px;						/* ボックス内の余白*/
	background: #fff;					/* 背景色。上の「#menubar-s nav」と揃えておいて下さい。*/
	overflow: auto;						/* 中身が高さを超える場合に自動でスクロールを出す設定*/
}

/*メニュー１個あたりの設定*/
#menubar-s li {
	margin-bottom: 20px;				/* メニュー同士の余白。*/
}

/*リンクテキスト*/
#menubar-s a {
	text-decoration: none;
	display: block;
	color: #333;						/* 文字色*/
	padding: 10px 0;					/* 上下、左右への余白*/
	transition: 0.3s;					/* 0.3秒かけてアニメーションする設定。マウスオン時に影響します。*/
}

/* アイコン画像（アイコンにはFont Awesomeを使用）*/
#menubar-s i {
	display: block;						/* 改行が入るようにblock指定。もし横に並べたいならこの１行を削除し、下のpadding-bottomをpadding-rightに変更すればOK。*/
	padding-bottom: 10px;				/* テキストとの余白調整*/
	color: #389168;						/* 文字色＝アイコン色になります。*/
}

/* 英字の装飾テキスト*/
#menubar-s li span {
	display: block;
	font-size: 0.5rem;					/* 文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
	color: #ccc;						/* 文字色*/
	letter-spacing: 0.2em;				/* 文字間隔を少し広くとる指定。*/
}

/* スクロールバーのカスタマイズ（※対応しているブラウザは限られます）*/
#menubar-s ul::-webkit-scrollbar {
	width: 8px;	/*スクロールバーの幅*/
}

/* スクロールバー本体（色のついた部分）*/
#menubar-s ul::-webkit-scrollbar-thumb {
    background: #389168;
}

/* スクロールバーの背景部分（グレー色の部分）*/
#menubar-s ul::-webkit-scrollbar-track {
    background: #eee;
}

/* 共通設定。角を丸くする指定。直角がいいならブロックごと削除。*/
#menubar-s ul::-webkit-scrollbar-thumb,
#menubar-s ul::-webkit-scrollbar-track {
    border-radius: 50px;				/* ある程度大きければ適当でOKです*/
}

h1 {
    position: relative;
    padding: 0.15em 0.5em;
    color: #393939;
    font-size: 20px;
}
h1:before {
    content: " ";
    position: absolute;
    top: -10px;
    left: 0;
    /*width: -webkit-calc(100% - 16px);*/
    /*width: calc(100% - 16px);*/
    height: 0;
}

/* mainブロック設定
---------------------------------------------------------------------------*/
/* mainブロックの設定*/
main {
	/*padding: 50px 20px 20px 20px;		/* 上、右、下、左へのボックス内の余白*/
	padding: 10px 10px 10px 10px;		/* 上、右、下、左へのボックス内の余白 ★TBASE*/
}

/* mainブロック内のh2タグ*/
main h2 {
	padding: 5px;						/* ボックス内の余白*/
	margin-bottom: 5px;					/* 下に空けるスペース*/
	position: relative;					/* アニメーションに必要な設定*/
	letter-spacing: 0.1em;				/* 文字間隔を少しだけ広くとる設定*/
	font-size: 1.2rem;
}

/* h2タグのbefor（下線のデフォルトの状態の設定）*/
main h2::before {
	background: #d9d9d9;				/* 線となる背景の色*/
}

/* h2タグのbefor,after 共通設定*/
main h2::before ,main h2::after {
	content: "";
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 3px;						/* ラインの高さ*/
}

/* h2タグのafter（アニメーションの初期設定）*/
main h2::after {
	/*TBASEbackground: #389168;				/* 線となる背景の色 */
	background: #52e252;					/* 線となる背景の色 */
	/*TBASE transition: 1s 0.5s;			/* 1sはアニメーションの実行時間は1秒。0.5秒遅れてスタートする指定。*/
	/*TBASE transform: scaleX(0);			/* 幅。最初は0にして見えなくしておく。*/
	/*TBASE transform-origin: left top;		/* 線の出現起点が左からになるように。中央からの出現がよければこの１行削除。*/
}

/* h2タグのアニメーション結果。ライン幅が100%になる。*/
main h2.linestyle::after {
	transform: scaleX(1);
}

/* mainブロックのh3タグ*/
main h3 {
	padding: 3px;						/* ボックス内の余白 */
	margin-bottom: 10px;				/* 下に空けるスペース */
	letter-spacing: 0.1em;				/* 文字間隔を少しだけ広くとる設定 */
	border-bottom: 1px solid #ccc;		/* 下線の幅、線種、色 */
}

/* mainブロックのpタグ*/
main p {
	margin: 0 5px 5px;					/*上、左右、下へ空けるスペース*/
}

main .title {
	font-weight: bold;
	font-size: 1.2rem;
	color: #01a750;
}

#contents {
	width: 1200px;
}

/* 一覧ブロック設定
---------------------------------------------------------------------------*/

/* listボックスを囲むボックス*/
.list-container {
	display: flex;						/* flexボックスを使う指定*/
	flex-wrap: wrap;					/* 折り返す指定*/
	/*justify-content: space-between;	（削除またはコメントアウトする。2022/09/22更新）*/
	padding: 0 5px;						/* 上下、左右へのボックス内の余白*/
}

/* 1個あたりのボックス*/
.list {
	width: 49%;							/* ボックスの幅*/
	margin-bottom: 15px;				/* ボックス同士の上下間の余白*/
	margin-right: 2%;					/* （2022/09/22更新）*/
	padding: 10px;						/* ボックス内の余白*/
	position: relative;
	overflow: hidden;
	transition: 0.3s;					/* アニメーションにかける時間。0.3秒。*/
	box-shadow: 0px 0px 10px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒の事で0.2は色が20%ついた状態。*/
	background: #fff;					/* 背景色*/
}

/* 偶数のボックスの右側マージンをなくす（2022/09/22更新）*/
.list:nth-of-type(even) {
	margin-right: 0;
}

/* マウスオン時にボックスの影を少し濃くする */
.list:hover {
	box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
}

/* オスの背景色 TBASE */
.list-male {
	background-color: #dbeef4;
	padding: 6px;
	height: 100%;
}

/* メスの背景色 TBASE */
.list-female {
	background-color: #f2dcdb;
	padding: 6px;
	height: 100%;
}

/* リンクテキスト */
.list a {
	text-decoration: none;
	color: #333;	/* 文字色 */
}

/* ボックス内のh4タグ */
.list h4 {
	line-height: 1.5;					/* 行間を少し狭くする*/
	color: #389168;						/* 文字色*/
	margin: 5px 0;						/* 上下、左右に空けるスペース*/
	font-size: 1.1rem;
}

/* ボックス内のh5タグ */
.list h5 {
	line-height: 1.2;					/* 行間を少し狭くする*/
	color: #389168;						/* 文字色*/
	margin: 5px 0;						/* 上下、左右に空けるスペース*/
	font-size: 0.8rem;
}

/* ボックス内のpタグ。指定した行数までを表示。*/
.list p {
	margin: 0!important;				/*「main p」のマージンをリセットする*/
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	/*-webkit-line-clamp: 3;			/* 表示させたい行数。変更する際は、下の「IE対策」の「height」も変更して下さい。*/
	-webkit-line-clamp: 6;				/* 表示させたい行数。変更する際は、下の「IE対策」の「height」も変更して下さい。*/
	font-size: 0.8rem;					/* 文字サイズ */
	/*line-height: 1.5em;				/* IE対策。行間。１行あたりの高さの事。1.5文字分。*/
	/*max-height: 4.5em;				/* IE対策。最大の高さ。1.5emの3倍の4.5emになっているので、3行分という事。*/
	line-height: 1.5em;					/* IE対策。行間。１行あたりの高さの事。1.5文字分。*/
	max-height: 9.0em;					/* IE対策。最大の高さ。1.5emの3倍の4.5emになっているので、3行分という事。*/
}

/* NEW,UPアイコン
---------------------------------------------------------------------------*/
/*NEW,UPアイコン 共通*/
.newicon, .upicon {
	display: inline-block;
	text-align: center;
	padding: 0 5px;
	border-radius: 3px;
	transform: scale(0.7);
}

/* newiconへの追加指定。*/
.newicon {
	background: #f00;
	color: #fff;
}

/* upiconへの追加指定。*/
.upicon {
	background: #257dce;
	color: #fff;
}

/* option帯リボン
---------------------------------------------------------------------------*/
/* option1,option2 共通 */
.option1, .option2, .option3 {
	font-size: 0.8rem;	/* 文字サイズ */
	display: inline-block;
	width: 200px;
	text-align: center;
	position: absolute;
	top: 0px;
	left: 0px;
	transform: translate(-60px, 20px) rotate(-30deg);	/* translateは配置場所の指定。rotateは回転。*/
	box-shadow: 0px 3px 2px rgba(0,0,0,0.2);			/* 影*/
}

/* h2タグ内で使った場合のoption1,option2 共通（※CMS用）*/
h2 .option1, h2 .option2, h2 .option3  {
	width: auto;
	position: relative;
	transform: translate(0px, -4px) rotate(0deg);
	padding: 5px 20px;
	margin-left: 10px;
}

/* option1への追加指定。*/
.option1 {
	background: #ff0000;
	color: #fff;
}

/* option2への追加指定。*/
.option2 {
	background: #389168;
	color: #fff;
}

/* option3への追加指定。*/
.option3 {
	background: #0dff7a;
	color: #000;
}

/* フッターメニュー設定
---------------------------------------------------------------------------*/

/* ボックス全体の設定 */
#footermenu {
	background: #222;					/* 背景色 */
	color: #999;						/* 文字色 */
	font-size: 0.5rem;					/* 文字サイズ */
	padding: 10px 15px;					/* 上下、左右へのボックス内の余白 */
	display: flex;						/* flexボックスを使う指定 */
	justify-content: space-between;		/* 並びかたの種類の指定 */
}

/* ボックス内のリンクテキスト設定*/
#footermenu a {
	text-decoration: none;
	color: #999;						/*文字色*/
}

/* リンクテキストのマウスオン時*/
#footermenu a:hover {
	color: #ccc;						/*文字色*/
}

/* ulタグ（列単位）*/
#footermenu ul {
	margin: 0;
	list-style: none;
	font-size: 0.9rem;
	/* メニューは上寄せとする ★TBASE */
	/*align-self: center;					/* フッターメニューをブロックの上下中央に配置する。上によせたいならこの１行削除。*/
}

/* title*/
#footermenu .title {
	font-weight: bold;					/*太字にする*/
	color: #ccc;						/*文字色*/
	padding-bottom: 5px;				/*下に空けるスペース*/
}

/* フッター右側の装飾画像*/
#footermenu .kazari {
	display: none;						/*スペースが狭いので飾りを非表示にしておく*/
}

/* フッター設定
---------------------------------------------------------------------------*/
footer small {font-size: 120%;}

footer {
	/*background: #52e252;				/* 背景色*/
	color: #000;						/* 文字色*/
	text-align: center;					/* 内容をセンタリング*/
	padding: 2px;						/* ボックス内の余白*/
	margin-bottom: 60px;
}

/* リンクテキスト*/
footer a {color: #fff;text-decoration: none;}

/* リンクテキストのマウスオン時*/
footer a:hover {color: #fff;}

/* 著作部分*/
footer .pr {display: block;}

/* テーブル
---------------------------------------------------------------------------*/
/* テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	border-top: 1px solid #ccc;			/* 上の枠線の幅、線種、色*/
	font-weight: bold;					/* 太字に*/
	padding: 10px 5px;					/* 上下、左右へのボックス内の余白。基本的に数行下の「.ta1 th, .ta1 td」のpaddingと揃えておけばOKです。*/
	background: #fafafa;				/* 背景色*/
}

/* ta1テーブルブロック設定*/
.ta1 {
	border-top: 1px solid #ccc;			/* テーブルの一番上の線。幅、線種、色*/
	table-layout: fixed;
	width: calc(100% - 10px);			/* テーブルの両サイドに合計10px（左右各5pxずつ）の余白を作った残りを幅にします*/
	margin: 0 auto 30px;				/* 最後の「30px」がテーブルの下に空けるスペースです*/
}

/* tr（１行分）タグ設定*/
.ta1 tr {
	border-bottom: 1px solid #ccc;		/* テーブルの下線。幅、線種、色*/
}

/* th（左側）、td（右側）の共通設定*/
.ta1 th, .ta1 td {
	padding: 10px 5px;					/* 上下、左右へのボックス内の余白*。基本的に数行上の「.ta1 caption」のpaddingと揃えておけばOKです。*/
	word-break: break-all;				/* 英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/* th（左側）のみの設定*/
.ta1 th {
	width: 30%;							/* 幅*/
	text-align: left;					/* 左よせにする*/
}

/* ペット里親チャンネルとは
---------------------------------------------------------------------------*/
#about {
	min-height: 500px;
}
#about .title {
	font-weight: bold;
	font-size: 1.1rem;
	color: #01a750;
	padding: 4px 0;
}

/* よく頂く質問
---------------------------------------------------------------------------*/
.faq {
	padding: 0 5px;						/* 上下、左右へのボックス内の余白*/
}
/* 質問 */
.faq dt {
	border-radius: 10px;				/* 枠を角丸にする指定*/
	margin-bottom: 20px;				/* 下に空けるスペース*/
	background: linear-gradient(#fff, #f7f7f7);	/* 背景グラデーション*/
	box-shadow: 0px 0px 5px rgba(0,0,0,0.2);	/* ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.2は色が20%出た状態の事。*/
	text-indent: -54px;					/* テキストのインデント。Qアイコンだけ左に飛び出るようにする指定。下のpaddingの一番最後の数字と合わせて下さい。※マイナスは取らないで。*/
	padding: 20px 20px 20px 54px;		/* 上、右、下、左への余白。最後の数字と上のtext-indentの数字と揃えておく。text-indentは必ずマイナスをつけた状態で。*/
}
/*アイコン（Font Awesome）*/
.faq dt::before {
	font-family: "Font Awesome 5 Free";
	content: "\f059";
	color: #389168;						/* アイコンの色*/
	padding: 0 20px;					/* 上下、左右への余白*/
}

/*回答*/
.faq dd {
	padding: 0 20px 20px;				/* 上、左右、下への余白*/
}

.faq h3 {
	padding: 3px;						/* ボックス内の余白 */
	margin-bottom: 10px;				/* 下に空けるスペース */
	letter-spacing: 0.1em;				/* 文字間隔を少しだけ広くとる設定 */
	border-bottom: 1px solid #ccc;		/* 下線の幅、線種、色 */
	color: #00b050;
}

/* opencloseを適用した要素のカーソル */
.openclose {
	cursor: pointer;					/* カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}


/* PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

.pagetop a {
	display: block;text-decoration: none;text-align: center;
	width: 50px;						/* 幅 */
	line-height: 50px;					/* 高さ */
	position: fixed;
	right: 30px;						/* 右からの配置場所指定 */
	bottom: 65px;						/* 下からの配置場所指定 */
	color: #fff;						/* 文字色 */
	background: rgba(0,0,0,0.4);		/* 背景色。0,0,0は黒色の指定で0.4は色が40%出た状態。*/
	border: 1px solid #fff;				/* 枠線の幅、線種、色 */
}

/* マウスオン時 */
.pagetop a:hover {
	background: rgba(0,0,0,0.8);		/* 背景色。0,0,0は黒色の指定で0.8は色が80%出た状態。*/
}

/* btnの設定
---------------------------------------------------------------------------*/
/* ボタンを囲むブロック */
.btn {
	text-align: center;					/* 内容をセンタリング */
	font-size: 1.2rem;					/* 文字サイズ */
}

/* ボタン */
.btn a,
.btn input {
	width: 100%;
	display: inline-block;
	text-decoration: none;
	border: none;
	background: #e46c0a;				/* 背景色 */
	color: #fff;						/* 文字色 */
	border-radius: 5px;					/* 角丸のサイズ。ほんの少しだけ角が丸くなります。*/
	padding: 5px 10px;					/* 上下、左右へのボタン内の余白 */
	box-shadow: 2px 2px 4px rgba(0,0,0,0.2);	/* ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒のことで0.2は色が20%ついた状態。*/
}

/* 右側の矢印アイコン（アイコンにはFont Awesomeを使用）*/
.btn i {
	padding-left: 10px;					/*アイコンとテキストの間に空ける余白*/
	transform: scale(1.5);				/*アイコン画像を1.5倍にする*/
}

/* ボタンのマウスオン時 */
.btn a:hover,
.btn input:hover {
	opacity: 0.9;						/*透明度。0.9は色が90%ついた状態のこと。*/
}

/* btnの設定（無効なボタン）
---------------------------------------------------------------------------*/
/* ボタンを囲むブロック */
.btn-disabled {
	text-align: center;					/* 内容をセンタリング */
	font-size: 1.2rem;					/* 文字サイズ */
}

/* ボタン */
.btn-disabled a,
.btn-disabled input {
	width: 100%;
	display: inline-block;
	text-decoration: none;
	border: none;
	background: #cfcfcf;				/* 背景色 */
	color: #fff;						/* 文字色 */
	border-radius: 5px;					/* 角丸のサイズ。ほんの少しだけ角が丸くなります。*/
	padding: 5px 10px;					/* 上下、左右へのボタン内の余白 */
}

/* 右側の矢印アイコン（アイコンにはFont Awesomeを使用）*/
.btn-disabled i {
	padding-left: 10px;					/*アイコンとテキストの間に空ける余白*/
	transform: scale(1.5);				/*アイコン画像を1.5倍にする*/
}

/* ボタンのマウスオン時 */
.btn-disabled a:hover,
.btn-disabled input:hover {
	opacity: 1.0;						/*透明度。0.9は色が90%ついた状態のこと。*/
}

/* btnの設定（新規会員登録）
---------------------------------------------------------------------------*/
/* ボタンを囲むブロック */
.btn-regist {
	text-align: center;					/* 内容をセンタリング */
	font-size: 0.8rem;					/* 文字サイズ */
	float: left;
	margin-left: 10px;
}

/* ボタン */
.btn-regist a,
.btn-regist input {
	width: 100%;
	display: inline-block;
	text-decoration: none;
	border: none;
	background: #e46c0a;				/* 背景色 */
	color: #fff;						/* 文字色 */
	border-radius: 5px;					/* 角丸のサイズ。ほんの少しだけ角が丸くなります。*/
	padding: 2px 6px;					/* 上下、左右へのボタン内の余白 */
	box-shadow: 2px 2px 4px rgba(0,0,0,0.2);	/* ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒のことで0.2は色が20%ついた状態。*/
}

/* 右側の矢印アイコン（アイコンにはFont Awesomeを使用）*/
.btn-regist i {
	padding-left: 10px;					/*アイコンとテキストの間に空ける余白*/
	transform: scale(1.5);				/*アイコン画像を1.5倍にする*/
}

/* ボタンのマウスオン時 */
.btn-regist a:hover,
.btn-regist input:hover {
	opacity: 0.9;						/*透明度。0.9は色が90%ついた状態のこと。*/
}

/* 新規系メニュー */
.btnNew {
	display: inline-block;
	padding: 0.2em 1em;
	text-decoration: none;
	color: #67c5ff;
	background-color:#32cd32;
	cursor: pointer;
	border-radius: 3px;
	transition: .4s;
	font-size: 0.8rem;
}
.btnNew:hover {
	opacity:0.8;
	cursor: pointer;
}
.btnNew:visited {
    color: #fff;
    text-decoration: none;
	cursor: pointer;
}
.btnNew:link {
    color: #fff;
    text-decoration: none;
	cursor: pointer;
}
.btnNew:active {
    color: #fff;
    text-decoration: none;
	cursor: pointer;
}
.btnNew:before {
	position: relative;
	margin-right: 10px;
	font-family: "Font Awesome 5 Free";
	content: "\f044";
}

/* 更新系メニュー */
.btnRegist {
	display: inline-block;
	padding: 0.2em 1em;
	text-decoration: none;
	color: #67c5ff;
	background-color:#0C88CA;
	border-radius: 3px;
	transition: .4s;
	font-size: 0.8rem;
}
.btnRegist:hover {
	opacity:0.8;
	cursor: pointer;
}
.btnRegist:visited {
    color: #fff;
    text-decoration: none;
}
.btnRegist:link {
    color: #fff;
    text-decoration: none;
}
.btnRegist:active {
    color: #fff;
    text-decoration: none;
}

.btnRegist:before {
	position: relative;
	margin-right: 10px;
	font-family: "Font Awesome 5 Free";
	content: "\f0c7";
}

/* 編集ボタン */
.btnEdit {
	display: inline-block;
	padding: 0.2em 0.5em;
	text-decoration: none;
	color: #67c5ff;
	background-color:#0C88CA;
	border-radius: 3px;
	transition: .4s;
	font-size: 0.8rem;
}
.btnEdit:hover {
	opacity:0.8;
	cursor: pointer;
}
.btnEdit:visited {
    color: #fff;
    text-decoration: none;
}
.btnEdit:link {
    color: #fff;
    text-decoration: none;
}
.btnEdit:active {
    color: #fff;
    text-decoration: none;
}
.btnEdit:before {
	position: relative;
	margin-right: 5px;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f044";
}

/* 削除系メニュー */
.btnDelete {
	display: inline-block;
	padding: 0.2em 0.5em;
	text-decoration: none;
	color: #67c5ff;
	background-color:#ff0000;
	border-radius: 3px;
	transition: .4s;
	font-size: 0.8rem;
}
.btnDelete:hover {
	opacity:0.8;
	cursor: pointer;
}
.btnDelete:visited {
    color: #fff;
    text-decoration: none;
}
.btnDelete:link {
    color: #fff;
    text-decoration: none;
}
.btnDelete:active {
    color: #fff;
    text-decoration: none;
}
.btnDelete:before {
	position: relative;
	margin-right: 5px;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f2ed";
}

/* 一覧メニュー */
.btnList {
	display: inline-block;
	padding: 0.2em 1em;
	text-decoration: none;
	color: #67c5ff;
	background-color:#008080;
	cursor: pointer;
	border-radius: 3px;
	transition: .4s;
	font-size: 0.8rem;
}
.btnList:hover {
	opacity:0.8;
	cursor: pointer;
}
.btnList:visited {
    color: #fff;
    text-decoration: none;
	cursor: pointer;
}
.btnList:link {
    color: #fff;
    text-decoration: none;
	cursor: pointer;
}
.btnList:active {
    color: #fff;
    text-decoration: none;
	cursor: pointer;
}
.btnList:before {
	position: relative;
/*	float: left;*/
	margin-right: 10px;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f03a";
}

/* 詳細ページの画像切り替え（imgchg_pack.js）※一般のhtmlテンプレートで利用。
---------------------------------------------------------------------------*/
/* 大きな画像のボックスと説明文を入れるボックス */
#item-image {
	position: relative;
	margin: 0 auto 20px;
	text-align: center;
	width: 60%;
}

/* 大きな画像の１行目 */
#item-image #item_image1 {
	z-index: 2;
	position: relative;
	overflow: hidden;
}

/* 大きな画像の２行目 */
#item-image #item_image2 {
	z-index: 1;
	position: absolute;
	left: 0px;
	top: 0px;
	overflow: hidden;
}

/*大きな画像のボックスの中の画像*/
#item-image img {
	width: 100%;
}

/*サムネイル画像*/
.thumbnail {
	width: 80px;	/*画像の幅*/
	border: 1px solid #dcdcdc;			/*枠線の幅、線種、色*/
	margin-bottom: 5px;
}

.thumbnail:hover {
	border: 1px solid #999;				/*マウスオン時の枠線の幅、線種、色*/
}

/*こだわりアイコンブロックの設定（※CMS用）
---------------------------------------------------------------------------*/
.specialbox {
	display: inline-block;
}
.specialbox img {
	padding: 2px 0;;
}

/*パノラマ画像のサイズ設定（※CMS用）
---------------------------------------------------------------------------*/
.panorama-img {
	width: 100% !important;
	height: 200px !important;
}

/*テーマカラーの背景色の「注目物件」ボックス
---------------------------------------------------------------------------*/
/*ボックスの設定*/
.bg1 {
	background: #389168;				/*ボックスの背景色*/
	padding: 12px;						/*ボックス内の余白*/
	border-radius: 5px;					/*ほんの少し角を丸くする指定*/
	color: #fff;						/*文字色*/
}

/*ボックス内のリンクテキスト*/
.bg1 > a {
	color: #fff;						/*文字色*/
}

/*ボックス内のh2タグ*/
.bg1 h2 {
	text-align: center;					/*テキストをセンタリング*/
	margin: 0 !important;
}

/*ボックス内のh2タグのbefor（下線のデフォルトの状態の設定）*/
.bg1 h2::before {
	background: transparent;			/*線となる背景の色。transparentは透明の事。*/
}

/*ボックス内のh2タグのafter（アニメーションの初期設定）*/
.bg1 h2::after {
	background: #fff;					/*線となる背景の色*/
	transform-origin: center top;		/*線の出現起点が中央からになるように。*/
}

/* pickupスライドショーコーナー（slickを使用）※今月の注目物件
---------------------------------------------------------------------------*/
/* スライドショー全体を囲むボックス */
.pickup {
	position: relative;
	display: flex;						/* flexボックスを使う指定*/
}

/*マウスオン時の設定。
マウスオンでスライドがストップしてしまうので、それがわかりやすいようにopacityを設定しました。
もしマウスオンでストップさせたくない場合は、slick.cssの「//pauseOnHover: false,」の行の冒頭の「//」を外して適用して下さい。*/
.pickup .list:hover figure {
	opacity: 0.8;						/* 透明度。色が80%出た状態。*/
}

/*１個あたりのボックス*/
.pickup .slick-slide {
	margin: 5px !important;
	width: auto;
}

/* ボックス内のh4タグ*/
.pickup .list h4 {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;				/* 表示させたい行数。変更する際は、下２行のIE対策も変更して下さい。*/
    line-height: 1.5em;					/* IE対策。行間。１行あたりの高さの事。1.5文字分。*/
    height: 1.5em;						/* IE対策。高さ。slick内で高さを統一できなかったので、応急措置でheightのみ指定。*/
}

/* ボックス内のpタグの最大の高さ。
max-heightにするとslick内で高さを統一できなかったので、応急措置でheightのみ指定。
3行分を確保したかったので、1.5emの3倍で本来なら「4.5em」なのですが、
なぜか画面幅によってほんの少しテキストのかけらが見えてしまったので「4.4em」にしました。*/
.pickup .list p {
    height: 4.4em;
}

/* ボックス内の画像*/
.pickup .list img {
	object-fit: cover;					/* トリミングのタイプ*/
	height: 70px;						/* 画像の高さ。下の方で数カ所再設定があります。*/
	width: 100%;						/* 画像の幅*/
	font-family: 'object-fit: cover;';	/* IE対策*/
}

/* 左右の三角矢印の共通設定*/
.slick-arrow {
	position: absolute;
	bottom: 45%;						/* 下からの配置場所*/
}

/* 左右の三角矢印の共通設定。マウスオン時。*/
.slick-arrow:hover {
	cursor: pointer;
	opacity: 0.8;
}

/* 左右の三角矢印の形、色、サイズ*/
.slick-prev::after,
.slick-next::after {
	display: block;
	content: "▼";						/* この形を出力する。このままだと下向き矢印になってしまうので、下の方の設定でそれぞれ90度回転させています。*/
	color: #fff;						/* 三角の色*/
	font-size: 0.8rem;					/* 三角のサイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
}

/* 左側の三角*/
.slick-prev {
	left: 5px;							/* 左からの配置場所*/
}

/* 左側の三角を回転させる指定*/
.slick-prev::after {
	transform: rotate(90deg);
}

/* 右側の三角*/
.slick-next {
	right: 5px;							/* 右からの配置場所*/
}

/* 右側の三角を回転させる指定*/
.slick-next::after {
	transform: rotate(-90deg);
}

/* スライドショー（slickを使用）※メインビジュアル
---------------------------------------------------------------------------*/
.mainimg {
	position: relative;
	padding: 0 !important;
}

/* メインビジュアル画像の高さを約300pxに調整 ★TBASE */
/*
.mainimg .slick-slide img {
	height: 40vw;
	width: 100%;
}
*/

/* マウスオン時の設定。
マウスオンでスライドがストップしてしまうので、それがわかりやすいようにopacityを設定しました。
もしマウスオンでストップさせたくない場合は、slick.cssの「//pauseOnHover: false,」の行の冒頭の「//」を外して適用して下さい。*/
.mainimg:hover {
	opacity: 0.8;	/*透明度。色が80%出た状態。*/
}

/* 丸いページナビボタン全体を囲むブロック*/
.slick-dots {
	text-align: center;
	width: 100%;
	margin:0;
	line-height: 1;
	position: absolute;
	bottom: 10px;						/*下からの配置場所指定*/
}

/* 丸いページナビボタン１個あたりの設定*/
.slick-dots li {
	display: inline-block;
	margin: 0 10px;
	cursor: pointer;
}

/* buttonタグ*/
.slick-dots li button {
	display: block;
	text-indent: -9999px;				/*デフォルトで文字が出るので画面の外に追い出す指定*/
	width: 12px;						/*ボタンの幅*/
	height: 12px;						/*ボタンの高さ*/
	border-radius: 50%;					/*丸くする指定*/
	cursor: pointer;					/*クリックで画像へジャンプするので、わかりやすいようhover時にpointerになるように。*/
	background: #fff;					/*背景色。白。*/
}

/* buttonのアクティブ時（現在表示されている画像を示すボタン）*/
.slick-dots li.slick-active button {
	background: #389168;				/*色*/
}

/*「お知らせ」ブロック(スマホ)
---------------------------------------------------------------------------*/
/* お知らせブロック */
#new {
	display: flex;						/* flexボックスを使う指定*/
	flex-wrap: wrap;					/* 折り返す指定*/
	padding: 0 5px;						/* 上下、左右へのボックス内の余白*/
}

/* 日付(dt)、記事(dd)共通設定 */
#new dt,
#new dd {
	/* border-bottom: 1px solid #ccc;		/* 下線の幅、線種、色*/
	padding: 5px 0;							/* 上下、左右へのボックス内の余白*/
}

/* 日付(dt)設定 */
#new dt {
/*TBASE	width: 8em;	/* 幅。8文字(em)分。※下の「800px以上」の端末用の設定に再設定があります。*/
	width: 100%;
}
/* 日付の横のマーク（共通設定）*/
#new dt span {
	display: inline-block;			/* 表示させる */
	width: 4em;						/* 幅。6文字(em)分 */
	background: #999;				/* 背景色 */
	color: #fff;					/* 文字色 */
/*	font-size: 0.9rem;				/* 文字サイズ */
	text-align: center;				/* 文字をセンタリング */
	border-radius: 3px;				/* 角を少しだけ丸くする */
	margin-left: 1.2em;			/* アイコンの右側に空けるスペース */
	margin-right: 1.2em;			/* アイコンの右側に空けるスペース */
	align-self: flex-start;			/* 高さを間延びさせない指定 */
	line-height: 1.5;				/* 行間を少し狭く */
/*	position: relative;top: 0.4em;	/* 上下の配置バランスの微調整 */
}

/* 日付の横のマーク（共通設定）*/
#new dt span {
/*TBASE	display: none;						/* 小さな端末では非表示にしておく。*/
}

/* bg1設定。サンプルテンプレートでは「賃貸物件」と書いてあるマーク*/
#new dt span.icon-bg1 {
	background: #ff0000;				/*背景色*/
}

/*bg2設定。サンプルテンプレートでは「売買物件」と書いてあるマーク*/
#new dt span.icon-bg2 {
	background: #91384d;				/*背景色*/
}

/* 記事(dd)設定 */
#new dd {
	/*width: calc(100% - 8em);			/*「8em」は上の「#new dt」のwidthの値です。※下の「800px以上」の端末用の設定に再設定があります。*/
}

/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-theme, .color-theme a {color: #389168 !important;}
.color-check, .color-check a {color: #f00 !important;}
.c {text-align: center !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.large {font-size: 2rem;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;border: 1px solid #ccc;padding: 5px 20px;background: rgba(0,0,0,0.03);border-radius: 5px;margin: 5px 0;}
.ofx {overflow-x: hidden;}


/*---------------------------------------------------------------------------
 カスタマイズ TBASE
---------------------------------------------------------------------------*/

/* 飼育に関する情報
---------------------------------------------------------------------------*/
#breeding {
	background-color: #FFFFFF;
	margin-bottom: 2px;
	padding: 10px;
	font-family: "メイリオ","Meiryo",arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	line-height: 100%;
	border-bottom: 1px #52e252 solid; 	/* 見出しエリアの下境界線 */
}

/* --- 見出しエリア --- */
#breeding .heading {
	width: 100%; 						/* 見出しエリアの幅 */
	margin-bottom: 0.5em;
	padding: 4px 0; 					/* 見出しエリアのパディング（上下、左右） */
}

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

#breeding 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;
}

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

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

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

/* --- 見出し --- */
#transfer .sub-title h4 {
	margin: 0;
	padding: 3px 3px 0 5px; 			/* 見出しのパディング（上右下左） */
	font-size: 100%; 					/* 見出しの文字サイズ */
	line-height: 100%;
	background: #fff;
	color: #01a750;
	border-bottom: none !important;
}

#transfer {
	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%;
}

#transfer 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;
}

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

/* プライバシーポリシー
---------------------------------------------------------------------------*/
#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 #52e252 solid; 	/* 見出しの左境界線 */
	font-size: 110%; 					/* 見出しの文字サイズ */
	line-height: 100%;
	background: #fff;
	border-bottom: none;
}

#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 #52e252 solid; 	/* 見出しの左境界線 */
	font-size: 110%; 					/* 見出しの文字サイズ */
	line-height: 100%;
	background: #fff;
	border-bottom: none;
}

#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;
}


/* サイトマップ
---------------------------------------------------------------------------*/
#sitemap {
	background-color: #FFFFFF;
	margin-bottom: 2px;
	padding: 2px;
	font-family: "メイリオ","Meiryo",arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	line-height: 220%;
}

#sitemap p {
	border-bottom: 1px #52e252 solid; 	/* 見出しエリアの下境界線 */
	font-size: 1rem;
}

/* -- 見出しエリア --- */
#sitemap .heading {
	width: 100%; 						/* 見出しエリアの幅 */
	margin-bottom: 0.5em;
	padding: 4px 0; 					/* 見出しエリアのパディング（上下、左右） */
}

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

#sitemap a:link,a:visited {
	text-decoration: none;
}

/* ページャー
---------------------------------------------------------------------------*/
ul.pager {
	margin: 0px;
	font-size: 0.8rem;
}
ul.pager li {
	float: left;
	margin-right: 5px;
	border: 1px #e88800 solid;
	font-weight: bold;
	list-style-type: none;
}
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 10px;
	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 --- */

/* 1カラムボタンの設定
---------------------------------------------------------------------------*/

.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: 1.0rem;
}

/* ボタン幅 */
ul.btn_area_1cl {
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}
ul.btn_area_1cl li.button02 {
	text-align: center;
}
ul.btn_area_1cl li.button03 {
	float: left;
	width: 45%;
	border-radius: 5px;							/* 角丸のサイズ。ほんの少しだけ角が丸くなります。*/
	box-shadow: 2px 2px 4px rgba(0,0,0,0.2);	/* ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒のことで0.2は色が20%ついた状態。*/
}
ul.btn_area_1cl li.button05 {
	float: left;								/* ボタン配置 */
	width: 100%;								/* ボタン幅の中でのボタン幅 */
	list-style-type: none;
	border-radius: 5px;							/* 角丸のサイズ。ほんの少しだけ角が丸くなります。*/
	box-shadow: 2px 2px 4px rgba(0,0,0,0.2);	/* ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒のことで0.2は色が20%ついた状態。*/
}
ul.btn_area_1cl li.button05Dis {
	float: right;
	width: 45%;
}
ul.btn_area_1cl li.buttonRegist {
	float: left;								/* ボタン配置 */
	width: 100%;								/* ボタン幅の中でのボタン幅 */
	list-style-type: none;
	border-radius: 5px;							/* 角丸のサイズ。ほんの少しだけ角が丸くなります。*/
	box-shadow: 2px 2px 4px rgba(0,0,0,0.2);	/* ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒のことで0.2は色が20%ついた状態。*/
}
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: right;
	width: 45%;
	border-radius: 5px;							/* 角丸のサイズ。ほんの少しだけ角が丸くなります。*/
	box-shadow: 2px 2px 4px rgba(0,0,0,0.2);	/* ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒のことで0.2は色が20%ついた状態。*/
}
ul.btn_area li.button05 {
	float: left;
	width: 45%;
	border-radius: 5px;							/* 角丸のサイズ。ほんの少しだけ角が丸くなります。*/
	box-shadow: 2px 2px 4px rgba(0,0,0,0.2);	/* ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒のことで0.2は色が20%ついた状態。*/
}
ul.btn_area li.button05Dis {
	float: left;
	width: 45%;
	border-radius: 5px;							/* 角丸のサイズ。ほんの少しだけ角が丸くなります。*/
	box-shadow: 2px 2px 4px rgba(0,0,0,0.2);	/* ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒のことで0.2は色が20%ついた状態。*/
}
ul.btn_area li.bt_left {
	float: left;
	width: 45%;
}
ul.btn_area li.bt_right {
	float: right;
}

ul.btn_area li.button03 {
	float: right;
	width: 45%;
	list-style-type: none;
}
ul.btn_area li.button05 {
	float: left;
	width: 45%;
	list-style-type: none;
}
ul.btn_area li.button05Dis {
	float: left;
	width: 45%;
	list-style-type: none;
}

/* 各種ボタンデザイン
---------------------------------------------------------------------------*/

/* 「戻る」ボタン */
.button03 {
	text-align: center;
	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 {
	text-align: center;
	background: #e46c0a;
	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;}

/* 「送信」ボタン */
.button05Dis {
	text-align: center;
	background: #d3d3d3;
	padding: 2px;
}

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

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

/* 「新規会員登録(無料)」ボタン */
.buttonRegist {
	text-align: left;
	background: #e46c0a;
	padding: 2px;
}
.buttonRegist:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
}

.buttonRegist a {
	padding: 0.6em 0 0.6em;
	display: block;
	color: #fff;
}
.buttonRegist button {
	background: none; border: none;
	padding: 0.6em 0 0.6em;
	color: #fff;
	cursor: pointer;
	width: 100%;
}
.buttonRegist a:link { text-decoration: none;}
.buttonRegist a:visited { text-decoration: none;}
.buttonRegist a:hover { text-decoration: none;}
.buttonRegist 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-block {
	padding: 10px;
	background-color: #fa8072;
	border-radius: 10px;			/* ボックスの四つ角を丸くする */
}

/* 警告メッセージ：「！」アイコン
---------------------------------------------------------------------------*/
.cautiontxt:before,
.cautiontxtb:before{
	content:"\f12a";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color:#1a6212;	
	padding-right:5px;
}
.cautiontxt,.cautiontxtb{
	color:#1a6212;
	font-size:0.9em!important;
	margin-bottom:0px!important;
}
.cautiontxtb{
	display:inline;
}

/* 入力エラーメッセージ
---------------------------------------------------------------------------*/
.error_msg {
	padding: 0 0 0 ;
	font-size: 1.0rem;
	font-weight: bold;
	color: #ff0000;
}

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

.youtube {
	/*float: left;*/
	margin: 0 auto;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.youtube iframe {
	width: 100%;
	height: 100%;
}


/* スマートフォン専用メニュー
---------------------------------------------------------------------------*/
.spMenu1 {
	display:block;
	position:fixed;
	bottom:0;
	left:0;
	overflow:hidden;
	/*background: #c8317a;*/
	/*background: #00aa6e;*/
	background: #fff;
	z-index:9998;
	width:100%;
}
.spMenu1 ul {
	margin: 0!important;				/*「main p」のマージンをリセットする*/

	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:#00aa6e;*/
	background: #fff;
}
.spMenu1 a {
	text-decoration:none;
	color:#00aa6e;
	padding:5px;
	display:block;
}
.spMenu1 a:hover {
	/*TBASEbackground:#c8317a;*/
	/*background:#00aa6e;*/
	background: #fff;
}
.spMenu1 ul li span {
	display:block;
	text-align:center;
	font-size:0.85em;
}
.spMenu1 ul li span[class*="fa"] {
	font-size:1.9em;
}

/* ヘッダの吹き出し
---------------------------------------------------------------------------*/
.balloon-count {
	position: relative;
	width:0px;
	height:0px;
	vertical-align:top;
}
.balloon-count span,
.balloon-count span:after {
	border-color: #E04646 transparent transparent;
	background-color: #E04646;
}
.balloon-count span{
	top: 3px;
	left: -22px;
	border:none;
	position: absolute;
	border-radius: 10px;
	color: #fff;
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-size: 11px;
	line-height:20px;
	font-weight: bold;
	text-align: center;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
	width: 20px;
	height: 18px;
	z-index: 1000;
	display:block;
	padding:0 1px 0 4px;
}
.balloon-count span:after {
	background:none;
	border-image: none;
	border-style: solid;
	border-width: 4px 4px 0;
	bottom: -3px;
	content: "";
	display: block;
	left: 8px;
	position: absolute;
	width: 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%;
}


/* テーブル（TEST）※モバイル
---------------------------------------------------------------------------*/
.last td:last-child {
	border-bottom: solid 1px #ccc;
	width: 100%;
}
.tbl-r02 {
	width: 80%;
}
.tbl-r02 th,
.tbl-r02 td {
	border-bottom: none;
	display: block;
	width: 100%;
}

/* ----------------------------------------------
    テーブル設定
-----------------------------------------------*/

/* テーブル（登録フォーム）
---------------------------------------------------------------------------*/
.tbl-regist {
	width: 100%;
	margin-bottom: 6px;
}
.tbl-regist, .tbl-regist td, .tbl-regist th {
	border: 1px solid #eee;
	padding: 4px;
	font-size: 1.0rem;
	word-break: break-all;
}
.tbl-regist th {
	width: 20%;
	text-align: center;
	background: #b5b5b6;
	color: #000;
	font-weight: normal;
	font-size: 1.0rem;
	white-space: nowrap;
}
.tbl-regist td {
    border: 1px solid #778899;
}
/*.tbl-regist td:nth-of-type(1) { width: 10%;}*/
/*.tbl-regist td:nth-of-type(2) { width: 30%;}*/

/*.tbl-regist td:nth-of-type(1) { text-align: left; background-color: #cfcfcf;}*/

/* テーブル（一覧）
---------------------------------------------------------------------------*/
.tbl-list {
	width: 100%;
	margin-bottom: 5px;
}
.tbl-list, .tbl-list td, .tbl-list th {
	border: 1px solid #ccc;
	padding: 4px;
	font-size: 0.9rem;
	word-break: break-all;
}
.tbl-list th {
	background: #b5b5b6;
	color: #000;
	font-weight: normal;
	font-size: 0.85rem;
	white-space: nowrap;				/* 自動で折り返さない */
	text-align: center;
}
.tbl-list td {
	text-align: left;
	font-size: 0.8rem;
}
/*.tbl-list tbody td:nth-child(1) { width: 4%; text-align: center;}		/* 1列目 */
.tbl-list .al-center {
	text-align: center;
}

/* テーブル（ログイン）※モバイル
---------------------------------------------------------------------------*/
.ta_login {
	width: 100%;
}

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

.ta_login th {
	padding: 4px;
	border-bottom: none;
	display: block;
	width: 99%;
	background: #f2f2f2;			/* 背景色 */
	color: #000;
	font-weight: normal;
	text-align: left;
}

.ta_login td {
	border-bottom: none;
	display: block;
	width: 99%;
	padding: 4px;
	border: 1px solid #ccc;			/* テーブルの枠線の幅、線種、色 */
}

.ta_login input {
	width: 100%;
}


/* テーブル（お問い合わせフォーム）※モバイル
---------------------------------------------------------------------------*/
.ta_contact {
	width: 100%;
}

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

.ta_contact th {
	padding: 4px;
	border-bottom: none;
	display: block;
	width: 99%;
	background: #f2f2f2;			/* 背景色 */
	color: #000;
	font-weight: normal;
	text-align: left;
}

.ta_contact td {
	border-bottom: none;
	display: block;
	width: 99%;
	padding: 4px;
	border: 1px solid #ccc;			/* テーブルの枠線の幅、線種、色 */
}

/* テーブル（検索枠）
---------------------------------------------------------------------------*/
.ta_search {
	width: 100%;
	border-spacing : 10px 4px;		/* テーブル：左右間隔、上下間隔 */
	border-collapse : separate ;	/* セル間隔指定有効 */
}

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

.ta_search th {
	padding: 4px;
	border-bottom: none;
	display: block;
	width: 99%;
	background: #f2f2f2;			/* 背景色 */
	color: #000;
	font-weight: normal;
	text-align: left;
}

.ta_search td {
	border-bottom: none;
	display: block;
	width: 99%;
	padding: 4px;
	/*border: 1px solid #ccc;			/* テーブルの枠線の幅、線種、色 */
}

/* テーブル（会社概要）
---------------------------------------------------------------------------*/
.ta_company {
	width: 100%;
}

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

.ta_company th {
	padding: 4px;
	border-bottom: none;
	display: block;
	width: 99%;
	background: #f2f2f2;			/* 背景色 */
	color: #000;
	font-weight: normal;
	text-align: left;
}

.ta_company td {
	border-bottom: none;
	display: block;
	width: 99%;
	padding: 4px;
	border: 1px solid #ccc;			/* テーブルの枠線の幅、線種、色 */
}

/* テーブル（会員情報変更）
---------------------------------------------------------------------------*/
.ta_regist {
	width: 100%;
}

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

.ta_regist th {
	padding: 4px;
	border-bottom: none;
	display: block;
	width: 99%;
	background: #f2f2f2;			/* 背景色 */
	color: #000;
	text-align: left;
}

.ta_regist td {
	border-bottom: none;
	display: block;
	width: 99%;
	padding: 4px;
	border: 1px solid #ccc;			/* テーブルの枠線の幅、線種、色 */
}

.ta_regist th.tamidashi {
	width: 96%;
	background: #f2f2f2;			/* 背景色 */
}

/* テーブル（掲示板）※モバイル
---------------------------------------------------------------------------*/
.ta_board {
	width: 100%;
}

.ta_board th {
	display: block;
	width: 100%;
	padding: 4px;
	background: #fff;
	color: #000;
	text-align: left;
	font-weight: bold;
	font-size: 1.2rem;
	border: none;
	border-bottom: 2px solid #52e252;			/* テーブルの枠線の幅、線種、色 */
}

.ta_board td {
	display: block;
	width: 100%;
	padding: 4px;
	border: none;
}

/* テーブル（申し込み履歴）※モバイル
---------------------------------------------------------------------------*/
.ta_history {
	width: 100%;
}

.ta_history th {
	display: block;
	width: 100%;
	padding: 6px;
	background: #fff;
	color: #000;
	text-align: left;
	font-weight: bold;
	font-size: 1.2rem;
	border: none;
	border-bottom: 2px solid #52e252;			/* テーブルの枠線の幅、線種、色 */
}

.ta_history td {
	display: block;
	width: 100%;
	padding: 6px;
	border: none;
}

/* テーブル（里親詳細）※モバイル
---------------------------------------------------------------------------*/
.ta_item {
	width: 100%;
}

.ta_item th {
	display: block;
	width: 100%;
	padding: 2px;
	background: #fff;
	color: #000;
	vertical-align: top;
	text-align: left;
	font-weight: bold;
	font-size: 1.2rem;
	border: none;
	line-height: 90%;
	/*border-bottom: 2px solid #52e252;			/* テーブルの枠線の幅、線種、色 */
}

.ta_item td {
	display: block;
	width: 100%;
	padding: 2px;
	/*border: none;*/
	border-bottom: 2px solid #52e252;			/* テーブルの枠線の幅、線種、色 */
	margin-bottom: 15px;
}

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

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

.petKindNav {
    border-collapse: collapse;
    margin: 0 0 8px;
    overflow: hidden;
}
.petKindNav ul {
    margin-left: 10px;
    float: left;
}


.petKindNavHdr {
    float: left;
    margin-top: 5px;
}
.petKindNav li.active {
    border: 1px solid #8eb4e3;
}
.petKindNav li:first-child {
    width: 95px;
    border-left-width: 1px;
}
.petKindNav li {
    border: 1px solid #8eb4e3;
    border-left-width: 0px;
    float: left;
    width: 88px;
}
.petKindNav .active a {
    background-color: #8eb4e3;
    color: #fff;
}
.petKindNav li a {
    color: #9b805d;
    background-color: #dce6f2;
    text-align: center;
    font-size: 12px;
}
.petKindNav li span, .petKindNav li a {
    display: block;
    padding: 6px 0;
}

/* TOPページの広告バナー領域の設定
---------------------------------------------------------------------------*/
.blk-banner-wrap {
	width: 100%;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 10px;
}

.blk-banner-contents {
	margin: 0 auto;
}

.blk-banner-contents .inner {
	float: left;
	width: 100%;
	margin-bottom: 10px;
}

/* 掲示板の設定
---------------------------------------------------------------------------*/

/* 「コメントする」 */
.button_comment {
	cursor: pointer;
	padding: 3px 20px;
	background: #FF7722;
	border: 1px solid #FF7322;
	color: #FFF;
}

/* 里親お申し込み履歴の設定
---------------------------------------------------------------------------*/
.blk-history {
	width: 100%;
}

.blk-history-appeal {
	width: 100%;
}

.blk-history-appeal {
	width: 100%;
	font-size: 1.2rem;
	color: #52e252;
}

.historyBlk {
	width: 98%;
	padding: 5px;
}

.historyLeft {
	width: 50%;
	margin-right: 0;
}

.historyRight {
	width: 100%;
	float: none;
}

/* btnの設定
---------------------------------------------------------------------------*/
/* ボタンを囲むブロック */
.btn-common {
	text-align: left;					/* 内容をセンタリング */
	font-size: 1.0rem;					/* 文字サイズ */
}

/* ボタン */
.btn-common a,
.btn-common input {
	display: inline-block;
	text-decoration: none;
	border: none;
	background: #e46c0a;				/* 背景色 */
	color: #fff;						/* 文字色 */
	border-radius: 5px;					/* 角丸のサイズ。ほんの少しだけ角が丸くなります。*/
	padding: 5px 20px;					/* 上下、左右へのボタン内の余白 */
	box-shadow: 2px 2px 4px rgba(0,0,0,0.2);	/* ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒のことで0.2は色が20%ついた状態。*/
}

/* 右側の矢印アイコン（アイコンにはFont Awesomeを使用）*/
.btn-common i {
	padding-left: 10px;					/* アイコンとテキストの間に空ける余白 */
	transform: scale(1.5);				/* アイコン画像を1.5倍にする */
}

/* ボタンのマウスオン時 */
.btn-common a:hover,
.btn-common input:hover {
	opacity: 0.9;						/* 透明度。0.9は色が90%ついた状態のこと。*/
}

/* btnの設定
---------------------------------------------------------------------------*/
/* ボタンを囲むブロック */
.btn-mypage {
	text-align: left;					/* 内容をセンタリング */
	font-size: 1.0rem;					/* 文字サイズ */
}

/* ボタン */
.btn-mypage a,
.btn-mypage input {
	display: inline-block;
	text-decoration: none;
	border: none;
	/*background: #92d050;				/* 背景色 */
	/*background: #52e252;				/* 背景色 */
	background: #ffc000;				/* 背景色 */
	color: #000;						/* 文字色 */
	border-radius: 5px;					/* 角丸のサイズ。ほんの少しだけ角が丸くなります。*/
	padding: 5px 40px;					/* 上下、左右へのボタン内の余白 */
	box-shadow: 2px 2px 4px rgba(0,0,0,0.2);	/* ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒のことで0.2は色が20%ついた状態。*/
}

/* 右側の矢印アイコン（アイコンにはFont Awesomeを使用）*/
.btn-mypage i {
	padding-right: 15px;					/* アイコンとテキストの間に空ける余白 */
	transform: scale(1.3);				/* アイコン画像を1.5倍にする */
}

/* ボタンのマウスオン時 */
.btn-mypage a:hover,
.btn-mypage input:hover {
	opacity: 0.9;						/* 透明度。0.9は色が90%ついた状態のこと。*/
}

/* btnの設定
---------------------------------------------------------------------------*/
/* ボタンを囲むブロック */
.btn-mypage-logout {
	text-align: left;					/* 内容をセンタリング */
	font-size: 1.0rem;					/* 文字サイズ */
}

/* ボタン */
.btn-mypage-logout a,
.btn-mypage-logout input {
	display: inline-block;
	text-decoration: none;
	border: none;
	/*background: #747474;				/* 背景色 */
	/*background: #52e252;				/* 背景色 */
	background: #ffc000;				/* 背景色 */
	color: #000;						/* 文字色 */
	border-radius: 5px;					/* 角丸のサイズ。ほんの少しだけ角が丸くなります。*/
	padding: 5px 40px;					/* 上下、左右へのボタン内の余白 */
	box-shadow: 2px 2px 4px rgba(0,0,0,0.2);	/* ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒のことで0.2は色が20%ついた状態。*/
}

/* 右側の矢印アイコン（アイコンにはFont Awesomeを使用）*/
.btn-mypage-logout i {
	padding-right: 15px;					/* アイコンとテキストの間に空ける余白 */
	transform: scale(1.3);				/* アイコン画像を1.5倍にする */
}

/* ボタンのマウスオン時 */
.btn-mypage-logout a:hover,
.btn-mypage-logout input:hover {
	opacity: 0.9;						/* 透明度。0.9は色が90%ついた状態のこと。*/
}

/* btnの設定
---------------------------------------------------------------------------*/
/* ボタンを囲むブロック */
.btn-back {
	text-align: left;					/* 内容をセンタリング */
	font-size: 1.0rem;					/* 文字サイズ */
}

/* ボタン */
.btn-back a,
.btn-back input {
	display: inline-block;
	text-decoration: none;
	border: none;
	background: #747474;				/* 背景色 */
	color: #fff;						/* 文字色 */
	border-radius: 5px;					/* 角丸のサイズ。ほんの少しだけ角が丸くなります。*/
	padding: 5px 20px;					/* 上下、左右へのボタン内の余白 */
	box-shadow: 2px 2px 4px rgba(0,0,0,0.2);	/* ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒のことで0.2は色が20%ついた状態。*/
}

/* 右側の矢印アイコン（アイコンにはFont Awesomeを使用）*/
.btn-back i {
	padding-left: 10px;					/* アイコンとテキストの間に空ける余白 */
	transform: scale(1.5);				/* アイコン画像を1.5倍にする */
}

/* ボタンのマウスオン時 */
.btn-back a:hover,
.btn-back input:hover {
	opacity: 0.9;						/* 透明度。0.9は色が90%ついた状態のこと。*/
}

/* 里親募集 詳細の設定
---------------------------------------------------------------------------*/
.blk-detail {
	width: 100%;
}

.blk-detail .appeal_point {
	/*color: #52e252;*/
	color: #00aa6e;
	font-size: 1.2rem;
	font-weight: bold;
	text-align: center;
}

.blk-detail .appeal_detail {
	width: 100%;
}

.blk-detail .blk-youtube {
	width: 100%;
}

.head_login {
	font-size: 1.0rem;
	margin: 0 auto;
}

.box26 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.box26 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #95ccff;
    font-weight: bold;
}
.box26 p {
    margin: 0; 
    padding: 0;
}


/*---------------------------------------------------------------------------
ここから下は画面幅480px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:480px) {

	/*ボックス内の画像*/
	.pickup .list img {
		height: 120px;		/*画像の高さ*/
	}

}


/*---------------------------------------------------------------------------
ここから下は画面幅600px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:600px) {

	/*ボックス内の画像*/
	.pickup .list img {
		height: 160px;		/*画像の高さ*/
	}

}


/*---------------------------------------------------------------------------
ここから下は画面幅800px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:800px) {


/* 全体の設定
---------------------------------------------------------------------------*/
html, body {
	font-size: 18px;	/*基準となるフォントサイズの上書き*/
}

/*section全般の設定*/
section + section {
	padding-top: 50px;	/*sectionの間に空けるスペース*/
}

/* フォームタグ全般の設定 */
input, textarea, select {
	font-size: 1.0rem;
}

/*header。ロゴなどが入った最上段のボックス。
---------------------------------------------------------------------------*/
header{
	justify-content: space-between;	/*並びかたの種類の指定*/
	align-items: center;			/*垂直揃えの指定。上下中央に配置されるように。*/
	/*padding: 10px;					/*ボックス内の余白*/
	padding: 2px 10px;
}

/*logo画像*/
header #logo {
	width: 350px;	/*画像の幅*/
	margin: 0;		/*中央から左に戻る為の設定*/
}

/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーブロック*/
#menubar_hdr {
	display: none;	/*非表示にする*/
}

/*大きな端末用のメインメニューの設定
---------------------------------------------------------------------------*/
/*ボックス全体の設定*/
#menubar {
	display: block;	/*表示させる*/
}
/*ul要素。メニュー１個１個を囲む親のボックス。*/
#menubar ul {
	margin: 0;
	list-style: none;
	display: flex;						/*flexボックスを使う指定*/
	justify-content: space-around;		/*並びかたの種類の指定*/
	border-top: 1px solid #dcdcdc;		/*上の線の幅、線種、色*/
	border-bottom: 1px solid #dcdcdc;	/*下の線の幅、線種、色*/
	line-height: 1.5;					/*行間を少しだけ狭く*/
}

/*メニュー１個あたりの設定*/
#menubar li {
	/* メニュ折り返しなくすため"flex 1"コメントアウト TBASE */
	/*flex: 1;			/* それぞれのメニューが幅一杯に広がるように */
	text-align: center;	/* テキストをセンタリング */
	position: relative;
}

/*ラインアニメーションの設定*/
#menubar li::before {
	content: "";
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 5px;
	background: #389168;			/*線となる背景の色*/
	transition: 0.3s;				/*アニメーションの実行時間は0.3秒。*/
	transform: scaleX(0);			/*幅。最初は0にして見えなくしておく。*/
	transform-origin: center top;	/*線の出現起点が左からになるように。中央からの出現がよければこの１行削除。*/
}

/*アニメーション結果。ライン幅が100%になる。*/
#menubar li:hover::before {
	transform: scaleX(1);
}

/*リンクテキスト*/
#menubar li a {
	text-decoration: none;
	display: block;
	color: #333;	/*文字色*/
	/*padding: 12px 0px 17px 0px;	/*上、右、下、左への余白*/
	padding: 8px 0px 8px 0px;	/* 上、右、下、左への余白 調整★TBASE*/
}

/*アイコン画像（アイコンにはFont Awesomeを使用）*/
#menubar i {
	display: block;			/* 改行が入るようにblock指定。もし横に並べたいならこの１行を削除し、下のpadding-bottomをpadding-rightに変更すればOK。*/
	padding-bottom: 5px;	/* アイコンの下に空ける余白*/
	color: #389168;			/* 文字色＝アイコン色になります。*/
}

/*アイコンのマウスオン時*/
#menubar li:hover i {
	transition: 0.3s;		/*アニメーション時間。0.3秒。*/
	transform: scale(1.15);	/*サイズを1.15倍にする。*/
}

/*spanタグ（装飾用のテキスト）*/
#menubar span {
	display: block;
	font-size: 0.5rem;	/*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
	opacity: 0.6;		/*透明度。0.6は60%色が出た状態。*/
	letter-spacing: 0.2em;	/*文字間隔を少しだけ広くとる指定*/
}

/*mainブロック設定
---------------------------------------------------------------------------*/
/*mainブロックの設定*/
main {
	/* ★TBASE 余白調整 */
	/*padding: 50px;	/*ボックス内の余白*/
	padding: 6px 10px;	/*ボックス内の余白*/
}

/*フッターメニュー設定
---------------------------------------------------------------------------*/
/*ボックス全体の設定*/
#footermenu {
	font-size: 0.8rem;	/* 文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
	padding: 20px 55px;	/* 上下、左右へのボックス内の余白 */
}
/*フッター右側の装飾画像*/
#footermenu .kazari {
	display: block;		/* 非表示から表示に。*/
	max-width: 200px;	/* 画像の最大幅。これ以上大きくならないように。*/
}

/*テーブル
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	padding: 20px 15px;		/*上下、左右へのボックス内の余白*/
}

/*th（左側）、td（右側）の共通設定*/
.ta1 th, .ta1 td {
	padding: 20px 15px;		/*上下、左右へのボックス内の余白*/
}

/*th（左側）のみの設定*/
.ta1 th {
	width: 20%;		/*幅*/
}

/*よく頂く質問
---------------------------------------------------------------------------*/
/*質問*/
.faq dt {
	text-indent: -58px;				/*テキストのインデントの調整*/
	padding: 20px 20px 20px 58px;	/*余白の調整*/
}

/*listブロック設定
---------------------------------------------------------------------------*/
/*１個あたりのボックス*/
.list {
	width: 23%;				/*ボックスの幅*/
	margin-bottom: 25px;	/*ボックス同士の上下間の余白*/
	margin-right: 2.66%;	/*（2022/09/22更新）*/
}
/*偶数のボックスの右側マージンを再指定。これがないと小さな端末のマージン0が引き継がれてレイアウトが崩れます。（2022/09/22更新）*/
.list:nth-of-type(even) {
	margin-right: 2.66%;	/*※下の指定より先に記載する*/
}
/*4の倍数のボックスの右側マージンをなくす（2022/09/22更新）*/
.list:nth-of-type(4n) {
	margin-right: 0;
}

/*「お知らせ」ブロック(PC)
---------------------------------------------------------------------------*/
/* 日付(dt)設定 */
#new dt {
	width: 14em;					/* 幅。14文字(em)分 */
	display: flex;					/* flexボックスを使う指定 */
	justify-content: space-between;	/* 日付とアイコンをそれぞれ端に寄せる */
}

/* 日付の横のマーク（共通設定）*/
#new dt span {
	display: inline-block;			/* 表示させる */
	width: 6em;						/* 幅。6文字(em)分 */
	background: #999;				/* 背景色 */
	color: #fff;					/* 文字色 */
	font-size: 0.9rem;				/* 文字サイズ */
	text-align: center;				/* 文字をセンタリング */
	border-radius: 3px;				/* 角を少しだけ丸くする */
	margin-right: 1.2em;			/* アイコンの右側に空けるスペース */
	align-self: flex-start;			/* 高さを間延びさせない指定 */
	line-height: 1.5;				/* 行間を少し狭く */
	position: relative;top: 0.4em;	/* 上下の配置バランスの微調整 */
}

/* 記事(dd)設定 */
#new dd {
	width: calc(100% - 14em);		/*「14em」は上の「#new dt」のwidthの値です。*/
}

/* btnの設定
---------------------------------------------------------------------------*/
/*ボタン*/
.btn a {
	padding: 15px 40px;		/*上下、左右へのボタン内の余白*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
}

/*右側の矢印アイコン（アイコンにはFont Awesomeを使用）*/
.btn i {
	padding-left: 20px;		/*アイコンとテキストの間に空ける余白*/
}

.btn-disabled a {
	padding: 15px 40px;		/*上下、左右へのボタン内の余白*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
}

/*右側の矢印アイコン（アイコンにはFont Awesomeを使用）*/
.btn-disabled i {
	padding-left: 20px;		/*アイコンとテキストの間に空ける余白*/
}

/* 詳細ページの画像切り替え（imgchg_pack.js）※一般のhtmlテンプレートで利用。
---------------------------------------------------------------------------*/
/* 大きな画像のボックスと説明文を入れるボックス */
#item-image {
	/*TBASE width: 80%;*/
	width: 35%;
}

/*パノラマ画像のサイズ設定（※CMS用）
---------------------------------------------------------------------------*/
.panorama-img {
	height: 500px !important;
}

/*pickupスライドショーコーナー（slickを使用）
---------------------------------------------------------------------------*/
/*スライドショー全体を囲むボックス*/
.pickup {
	padding: 20px;		/*ボックス内の余白*/
}

/*１個あたりのボックス*/
.pickup .slick-slide {
	margin: 10px !important;
}

/*ボックス内の画像*/
.pickup .list img {
	height: 100px;		/*画像の高さ*/
}

/* その他
---------------------------------------------------------------------------*/
.ws {width: 45%;display: inline-block;}


/* テーブル（TEST）
---------------------------------------------------------------------------*/
table {
  margin: 20px auto;
}
.tbl-r02 th {
  background: #e9727e;
  border: solid 1px #ccc;
  color: #fff;
  padding: 10px;
}
.tbl-r02 td {
	border: solid 1px #ccc;
	padding: 10px;
	display: table-cell;
}

/* テーブル（ログイン）
---------------------------------------------------------------------------*/
.ta_login {
	width: 100%;
	margin-bottom: 15px;
	border-spacing : 2px 4px;		/* テーブル：左右間隔、上下間隔 */
	border-collapse : separate ;	/* セル間隔指定有効 */
}

/* テーブル１行目に入った見出し部分 */
.ta_login th {
	width: 25%;
	text-align: left;				/* 左よせ */
	background: #f2f2f2;			/* 背景色 */
	color: #000;
	font-weight: normal;			/* 太字に */
	font-size: 1rem;
	text-align: left;				/* センタリング */
	border: 1px solid #ccc;			/* テーブルの枠線の幅、線種、色 */
	padding: 6px;					/* ボックス内の余白 */
	word-break: break-all;
	display: table-cell;
}

.ta_login td {
	width: 100%;
	border: 1px solid #ccc;			/* テーブルの枠線の幅、線種、色 */
	padding: 6px;					/* ボックス内の余白 */
}

.ta_login input {
	width: 80%;
}

/* テーブル（お問い合わせフォーム）
---------------------------------------------------------------------------*/
.ta_contact {
	width: 100%;
	margin-bottom: 15px;
	border-spacing : 2px 2px;		/* テーブル：左右間隔、上下間隔 */
	border-collapse : separate ;	/* セル間隔指定有効 */
}

/* テーブル１行目に入った見出し部分 */
.ta_contact th {
	width: 25%;
	text-align: left;				/* 左よせ */
	background: #f2f2f2;			/* 背景色 */
	color: #000;
	font-weight: normal;			/* 太字に */
	font-size: 1rem;
	text-align: left;				/* センタリング */
	border: 1px solid #ccc;			/* テーブルの枠線の幅、線種、色 */
	padding: 6px;					/* ボックス内の余白 */
	word-break: break-all;
	display: table-cell;
}

.ta_contact td {
	display: table-cell;
	width: 100%;
	border: 1px solid #ccc;			/* テーブルの枠線の幅、線種、色 */
	padding: 6px;					/* ボックス内の余白 */
}

/* 検索枠
---------------------------------------------------------------------------*/
.ta_search {
	width: 100%;
	margin-bottom: 15px;
}

/* テーブル１行目に入った見出し部分 */
.ta_search th {
	width: 15%;
	text-align: left;				/* 左よせ */
	background: #f2f2f2;			/* 背景色 */
	color: #000;
	font-weight: normal;			/* 太字に */
	font-size: 1rem;
	text-align: left;				/* センタリング */
	/*border: 1px solid #ccc;			/* テーブルの枠線の幅、線種、色 */
	padding: 6px;					/* ボックス内の余白 */
	word-break: break-all;
	display: table-cell;
}

.ta_search td {
	display: table-cell;
	width: 35%;
	/*border: 1px solid #ccc;			/* テーブルの枠線の幅、線種、色 */
	padding: 6px;					/* ボックス内の余白 */
}

/* 会社概要
---------------------------------------------------------------------------*/
.ta_company {
	width: 100%;
	margin-bottom: 15px;
}

/* テーブル１行目に入った見出し部分 */
.ta_company th {
	width: 20%;
	text-align: left;				/* 左よせ */
	background: #f2f2f2;			/* 背景色 */
	color: #000;
	font-weight: normal;				/* 太字に */
	font-size: 1rem;
	text-align: left;				/* センタリング */

	border: 1px solid #ccc;			/* テーブルの枠線の幅、線種、色 */
	padding: 6px;					/* ボックス内の余白 */
	word-break: break-all;
	display: table-cell;
}

.ta_company td {
	display: table-cell;
	width: 100%;
	border: 1px solid #ccc;			/* テーブルの枠線の幅、線種、色 */
	padding: 6px;					/* ボックス内の余白 */
}

/* 会員情報変更
---------------------------------------------------------------------------*/
.ta_regist {
	width: 100%;
	margin-bottom: 15px;
	border-spacing : 2px 2px;		/* テーブル：左右間隔、上下間隔 */
	border-collapse : separate ;	/* セル間隔指定有効 */
}

/* テーブル１行目に入った見出し部分 */
.ta_regist th {
	width: 30%;
	text-align: left;				/* 左よせ */
	background: #f2f2f2;			/* 背景色 */
	color: #000;
	font-weight: normal;			/* 太字に */
	font-size: 1rem;
	text-align: left;				/* センタリング */
	border: 1px solid #ccc;			/* テーブルの枠線の幅、線種、色 */
	padding: 6px;					/* ボックス内の余白 */
	word-break: break-all;
	display: table-cell;
}

.ta_regist td {
	display: table-cell;
	width: 100%;
	border: 1px solid #ccc;			/* テーブルの枠線の幅、線種、色 */
	padding: 6px;					/* ボックス内の余白 */
}

/* 掲示板 ※PC
---------------------------------------------------------------------------*/
.ta_board {
	width: 100%;
	margin-bottom: 15px;
}

/* テーブル１行目に入った見出し部分 */
.ta_board th {
	width: 30%;
	padding: 4px;					/* ボックス内の余白 */
	text-align: left;				/* 左よせ */
	/*background: #f2f2f2;			/* 背景色 */
	background: #fff;				/* 背景色 */
	color: #000;
	font-weight: bold;
	font-size: 1.0rem;
	word-break: break-all;
	display: table-cell;
	border: none;
	border-bottom: 2px solid #52e252;			/* テーブルの枠線の幅、線種、色 */
}

.ta_board td {
	display: table-cell;
	padding: 4px;					/* ボックス内の余白 */
	border: none;
	border-bottom: 2px solid #52e252;			/* テーブルの枠線の幅、線種、色 */
}

/* 里親お申込み履歴 ※PC
---------------------------------------------------------------------------*/
.ta_history {
	width: 100%;
	margin-bottom: 15px;
}

/* テーブル１行目に入った見出し部分 */
.ta_history th {
	width: 30%;
	padding: 6px;					/* ボックス内の余白 */
	text-align: left;				/* 左よせ */
	/*background: #f2f2f2;			/* 背景色 */
	background: #fff;				/* 背景色 */
	color: #000;
	font-weight: bold;
	font-size: 1.0rem;
	word-break: break-all;
	display: table-cell;
	border: none;
	border-bottom: 2px solid #52e252;			/* テーブルの枠線の幅、線種、色 */
}

.ta_history td {
	display: table-cell;
	padding: 6px;					/* ボックス内の余白 */
	border: none;
	border-bottom: 2px solid #52e252;			/* テーブルの枠線の幅、線種、色 */
}

/* 里親詳細 ※PC
---------------------------------------------------------------------------*/
.ta_item {
	width: 100%;
	margin-bottom: 15px;
}

/* テーブル１行目に入った見出し部分 */
.ta_item th {
	width: 25%;
	padding: 6px;					/* ボックス内の余白 */
	vertical-align: top;
	text-align: left;				/* 左よせ */
	/*background: #f2f2f2;			/* 背景色 */
	background: #fff;				/* 背景色 */
	color: #000;
	font-weight: bold;
	font-size: 1.0rem;
	word-break: break-all;
	display: table-cell;
	border-bottom: 2px solid #52e252;			/* テーブルの枠線の幅、線種、色 */
	line-height: 2;
}

.ta_item td {
	display: table-cell;
	padding: 6px;								/* ボックス内の余白 */
	border: none;
	border-bottom: 2px solid #52e252;			/* テーブルの枠線の幅、線種、色 */
}

/* 里親お申し込み履歴の設定
---------------------------------------------------------------------------*/
.blk-history {
	width: 100%;
}

.blk-history-appeal {
	width: 100%;
}

.blk-history-appeal {
	width: 100%;
}

.historyBlk {
	width: 98%;
	padding: 5px;
}

.historyLeft {
	width: 20%;
	float: left;
	margin-right: 20px;
}

.historyRight {
	width: 78%;
	float: left;
}

.head_login {
	font-size: 1.0rem;
}

.youtube {
	width: 50%;
}

.head_login {
	font-size: 1.0rem;
	margin: 0;
}

/* ボタンの設定
---------------------------------------------------------------------------*/

/* 1カラムボタン幅 */
ul.btn_area_1cl {
	width: 35%;
}
ul.btn_area_1cl li span {
	font-size: 1.2rem;
}

/* ボタン */
.btn a,
.btn input {
	width: fit-content;
}

.btn-disabled a,
.btn-disabled input {
	width: fit-content;
}

footer {
	margin: 0;
}

/* TOPページの広告バナー領域の設定 ※PC
---------------------------------------------------------------------------*/
.blk-banner-wrap {
	width: 100%;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 10px;
}

.blk-banner-contents {
	margin: 0 auto;
}

.blk-banner-contents .inner {
	float: left;
	width: 32%;
	text-align: center;
	margin-right: 6px;
}

/* スマートフォン専用メニュー
---------------------------------------------------------------------------*/
.spMenu1 {
	display: none;					/* スマホ下部メニュー非表示 */
}


}


/*---------------------------------------------------------------------------
ここから下は画面幅1000px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:1000px) {

	/* ボックス内の画像 */
	.pickup .list img {
		height: 150px;		/* 画像の高さ */
	}

}