@charset "utf-8";

/* ---------------------------------------------------------------------------
 * リセットCSS（ress.css）の読み込み
 * --------------------------------------------------------------------------- */

@import url("ress.min.css");

/* ---------------------------------------------------------------------------
 * Font Awesomeの読み込み
 * --------------------------------------------------------------------------- */


/*@import url("fontawesome/css/all.min.css");*/


/* ---------------------------------------------------------------------------
 * slick.cssの読み込み
 * --------------------------------------------------------------------------- */

@import url("slick.css");

/* ---------------------------------------------------------------------------
 * Googleフォント
 * --------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400&family=Varela+Round&display=swap');

/* ---------------------------------------------------------------------------
 * 全体の設定
 * --------------------------------------------------------------------------- */

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

html {
	scroll-behavior: smooth;
}

body {
	overflow-x: hidden;
	/*	font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-family: 'Noto Sans JP', sans-serif;
	/*フォント種類*/
	-webkit-text-size-adjust: none;
	/*background: #fff;	背景色*/
	background: #CCFFFF;
	/*背景色*/
	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;
}


/*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;
	/*上、右、下、左へ空けるスペース*/
}

@media screen and (max-width: 800px) {
	ul,
	ol {
		margin: 0 1em 1em 1em;
	}
}


/* ---------------------------------------------------------------------------
 * opa1（透明から着色状態に）
 * --------------------------------------------------------------------------- */

@keyframes opa1 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


/* ---------------------------------------------------------------------------
 * リンクテキスト全般の設定
 * --------------------------------------------------------------------------- */

a {
	color: #191970;
	/*文字色*/
	text-decoration: none;
}

a:hover {
	color: #ff4081;
	text-decoration: underline;
}


/* ---------------------------------------------------------------------------
 * container。サイト全体を囲むブロック。
 * --------------------------------------------------------------------------- */

#container {
	margin: 0 auto;
	padding: 0 0.5em 0 1em;
	max-width: 1200px;
	/*最大幅。これ以上幅が広がらないように。*/
	background-color: #fff;
}


/* ---------------------------------------------------------------------------
 * header。ロゴなどが入った最上段のボックス。
 * --------------------------------------------------------------------------- */

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


/* logo画像
 * --------------------------- */

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

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


/* 電話番号
 * --------------------------- */

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

header address a {
	font-style: normal;
	/*addressタグがデフォルトで斜体なので、通常にする。*/
	display: block;
	white-space: nowrap;
	min-width: 126px;
	background: #00a0e9;
	/*	background:#009944;*/
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	padding: 5px 20px;
	font-size: 14px;
	border-radius: 20px;
}

header address a:hover {
	/*background:#666;*/
	background: #4169e1;
	color: #fff;
	text-decoration: none;
}


/* 電話番号のアイコン（アイコンにはFont Awesomeを使用） */

header i {
	padding-right: 10px;
	/*右側に空ける余白*/
}


/* address内のspanタグ。受付時間などの行です。 */

header address span {
	display: block;
	font-size: 0.7rem;
	/*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
}


/* ---------------------------------------------------------------------------
 * ３本バー（ハンバーガー）アイコン設定
 * --------------------------------------------------------------------------- */


/* ３本バーブロック
 * --------------------------- */

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


/* 小さな端末用のメニューが開いた段階の３本バーの設定。×印が出ている状態の設定。*/

#menubar_hdr.close {
	background: #ff0000 url(images/icon_menu.png) no-repeat center bottom/50px;
	/*背景色、背景画像の読み込み、画像の下半分（×マーク）を表示。幅は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。*/
	font-size: 2em;
	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です*/
}


/* ---------------------------------------------------------------------------
 * mainブロック設定
 * --------------------------------------------------------------------------- */


/*mainブロックの設定*/

main {
	padding: 10px 20px;
	/*padding: 50px 20px 20px 20px;*/
	/*上、右、下、左へのボックス内の余白*/
}

@media only screen and (max-width:991px) {
	main {
		padding: 5px 0;
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-weight: 700;
	transform: rotate(0.03deg);
}


/* h2タグ */

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

@media screen and (max-width: 800px) {
	h2 {
		font-size: 1.2em;
	}
}


/*h2タグのbefor（下線のデフォルトの状態の設定）*/

h2::before {
	background: #d9d9d9;
	/*線となる背景の色*/
}


/*h2タグのbefor,after 共通設定*/

h2::before,
h2::after {
	content: "";
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 3px;
	/*ラインの高さ*/
}


/*h2タグのafter（アニメーションの初期設定）*/

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


/*h2タグのアニメーション結果。ライン幅が100%になる。*/

h2.linestyle::after {
	transform: scaleX(1);
}


/*mainブロックのh3タグ*/

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

.h3_green {
	margin-top: 1em;
	padding-left: 0.5em;
	/*ボックス内の余白*/
	margin-bottom: 10px;
	/*margin-bottom: 30px;*/
	/*下に空けるスペース*/
	background: #aaddaa;
	/*背景の色*/
	/*border-bottom: 2px solid #90ce9c;*/
	/*下線の幅、線種、色*/
}

.h3_pink {
	background: #ffbbbb;
	padding-left: 0.5em;
	/*背景の色*/
	/*border-bottom: 2px solid #FF9999;*/
	/*下線の幅、線種、色*/
}

.h3_blue {
	background: #77cef7;
	/*背景の色*/
	/*border-bottom: 2px solid #FF9999;*/
	/*下線の幅、線種、色*/
}


/*mainブロックのpタグ*/

main p {
	margin: 0 5px 30px;
	/*上、左右、下へ空けるスペース*/
}

main h4 {
	padding: 5px;
	/*ボックス内の余白*/
	margin: 2em 0 0.5em 0.5em;
	letter-spacing: 0.1em;
	/*文字間隔を少しだけ広くとる設定*/
	/*font-size:1.15em;*/
	font-size: 1.4em;
}

.h4_pink {
	position: relative;
	padding: 0.25em 0;
}

.h4_pink:after {
	content: "";
	display: block;
	height: 4px;
	background: #ffbbbb;
}

.h4_green {
	position: relative;
	padding: 0.25em 0;
}

.h4_green:after {
	content: "";
	display: block;
	height: 4px;
	background: #aaddaa;
}


/* ---------------------------------------------------------------------------
 * listブロック設定
 * --------------------------------------------------------------------------- */


/*listボックスを囲むボックス*/

.list-container {
	display: flex;
	/*flexボックスを使う指定*/
	flex-wrap: wrap;
	/*折り返す指定*/
	padding: 0 5px;
	/*上下、左右へのボックス内の余白*/
}


/*１個あたりのボックス*/

.list {
	width: 32%;
	/*ボックスの幅*/
	margin-right: 2%;
	/* ---------------------------------------
	 * ボックス同士の左右間の余白。
	 * ボックスを２列並べるので、49%×2個=98%。
	 * 100%との差の2%がここに入ります。
	 * --------------------------------------- */
	margin-bottom: 15px;
	/*ボックス同士の上下間の余白*/
	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;
	/*背景色*/
}

.list img {
	width: 100%;
}


/*3の倍数(偶数番目)のボックスへの追加指定*/

@media screen and (max-width: 800px) {
	.list:nth-of-type(3n) {
		margin-right: 0;
		/*右側のスペースをなくす設定*/
	}
}


/*マウスオン時にボックスの影を少し濃くする*/

.list:hover {
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
}

.bg_green {
	background: #aaddaa;
	/*背景色*/
}

.bg_pink {
	background: #ffbbbb;
	/*背景色*/
}


/*リンクテキスト*/

.list a {
	text-decoration: none;
	color: #333;
	/*文字色*/
}

.list figure {
	padding: 0 10px;
}


/*ボックス内のh4タグ*/

.list h4 {
	line-height: 1.5;
	/*行間を少し狭くする*/
	color: #389168;
	/*文字色*/
	margin: 5px 0;
	/*上下、左右に空けるスペース*/
	padding: 5px;
}


/*ボックス内のpタグ。指定した行数までを表示。*/

.list p {
	margin: 0!important;
	/*「main p」のマージンをリセットする*/
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	/*表示させたい行数。変更する際は、下の「IE対策」の「height」も変更して下さい。*/
	font-size: 0.7rem;
	/*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
	line-height: 1.5em;
	/*IE対策。行間。１行あたりの高さの事。1.5文字分。*/
	max-height: 4.5em;
	/*IE対策。最大の高さ。1.5emの3倍の4.5emになっているので、3行分という事。*/
	padding: 5px;
}


/* ---------------------------------------------------------------------------
 * 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 {
	font-size: 0.7rem;
	/*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
	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 {
	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: #ccc;
	/*背景色*/
	color: #888;
	/*文字色*/
}


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


/*ボックス全体の設定*/

#footermenu {
	background: #222;
	/*背景色*/
	color: #999;
	/*文字色*/
	font-size: 0.7rem;
	/*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
	padding: 10px 25px;
	/*上下、左右へのボックス内の余白*/
	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;
	align-self: center;
	/*フッターメニューをブロックの上下中央に配置する。上によせたいならこの１行削除。*/
}


/*title*/

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


/*フッター右側の装飾画像*/

#footermenu .kazari {
	display: none;
	/*スペースが狭いので飾りを非表示にしておく*/
}


/* ---------------------------------------------------------------------------
 * フッター設定
 * --------------------------------------------------------------------------- */

footer small {
	font-size: 100%;
}

footer {
	color: #000;
	/*文字色*/
	text-align: center;
	/*内容をセンタリング*/
	padding: 20px;
	/*ボックス内の余白*/
}

footer b {
	font-size: 1.4em;
}


/*リンクテキスト*/

footer a {
	color: #fff;
	text-decoration: none;
}


/*リンクテキストのマウスオン時*/

footer a:hover {
	color: #fff;
}


/*著作部分*/

footer .pr {
	display: block;
}


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

table,
tr,
td,
th {
	padding: 5px;
}

th a,
td a {
	padding: 0;
	display: block!important;
}

th a:hover,
td a:hover {
	background: #fcfcaa!important;
}


/*テーブル１行目に入った見出し部分（※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 {
	text-align: left;
	/*左よせにする*/
}


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


/*テーブル１行目に入った見出し部分（※caption）*/

.ta2 {
	width: 100%;
}

.ta2 caption {
	padding: 5px;
	/*上下、左右へのボックス内の余白*/
}


/*th（左側）、td（右側）の共通設定*/

.ta2 th,
.ta2 td {
	padding: 5px;
	/*上下、左右へのボックス内の余白*/
	text-align: center;
}


/*th（左側）のみの設定*/

.ta2 th {
	background: #003355;
	color: #fff;
}

.ta2 td {
	font-size: .8em;
}

.ta2 tr:nth-child(2n+1) td {
	background: #eee;
}

@media screen and (max-width: 800px) {
	.scroll {
		overflow-x: auto;
	}
	.ta2 {
		min-width: 640px;
		margin: 0 10px 50px;
	}
	.ta2 td {
		border-top: solid 1px #ccc;
		border-bottom: solid 1px #ccc;
	}
}


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

.ta3 {
	min-width: 1080px;
	width: 100%;
	border: 1px solid #ccc;
	/*テーブルの線。幅、線種、色*/
	margin-bottom: 1em;
}

.ta3 small {
	font-size: 6px;
}

.ta3 caption {
	padding: 5px;
	/*上下、左右へのボックス内の余白*/
}


/*th（左側）、td（右側）の共通設定*/

.ta3 th,
.ta3 td {
	padding: 18px 5px;
	/*上下、左右へのボックス内の余白*/
}


/*thの設定*/

.ta3 th {
	color: #fff;
	background: #389168;
	text-align: left;
	/*text-align:center;*/
}

.ta3 td {
	border-bottom: 1px solid #ccc;
	/*テーブルの下線。幅、線種、色*/
	font-size: .8em;
}

@media only screen and (max-width:991px) {
	.ta3 {
		min-width: 100%;
		margin: 0 0 1em 0;
	}
	.ta3 th,
	.ta3 td {
		display: block;
		width: 100%;
	}
}


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

.ta4 {
	min-width: 1080px;
	width: 100%;
	border-spacing: 0;
	/* ボーダーとボーダーの間隔を指定*/
	border: 1px solid #389168;
	/*テーブルの線。幅、線種、色*/
	margin-bottom: 1em;
	border-radius: 10px;
	overflow: hidden;
}

.ta4 small {
	font-size: 6px;
}

.ta4 caption {
	padding: 5px;
	/*上下、左右へのボックス内の余白*/
}


/*th（左側）、td（右側）の共通設定*/

.ta4 th,
.ta4 td {
	padding: 18px 5px;
	/*上下、左右へのボックス内の余白*/
}


/*thの設定*/

.ta4 th {
	color: #fff;
	background: #389168;
	font-size: 1.2em;
	padding: 10px 1em;
	text-align: left;
}

.ta4 td {
	/*border-bottom: 1px solid #389168;
	/*テーブルの下線。幅、線種、色*/
	background: #eee;
	padding: 10px 1em;
}

@media only screen and (max-width:991px) {
	.ta4 {
		min-width: 100%;
		margin: 0 0 1em 0;
	}
	.ta4 th,
	.ta4 td {
		display: block;
		width: 100%;
	}
}

.ta4 a {
	display: inline-flex;
	background: #fff;
	border: 1px solid #00a0e9;
	color: #00a0e9;
	text-decoration: none;
	margin: 5px;
	padding: 5px 20px;
	border-radius: 10px;
}

.ta4 a:hover {
	background: #ccc;
}


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

.ta5 {
	min-width: 1080px;
	width: 100%;
	border-spacing: 0;
	/*ボーダーとボーダーの間隔を指定*/
	border: 1px solid #389168;
	/*テーブルの線。幅、線種、色*/
	margin-bottom: 1em;
	border-radius: 10px;
	overflow: hidden;
}

.ta5 table {
	border: 1px solid #389168;
	/*テーブルの線。幅、線種、色*/
}

.ta5 small {
	font-size: 6px;
}

.ta5 caption {
	padding: 5px;
	/*上下、左右へのボックス内の余白*/
}

.ta5 tr {
	border-bottom: 1px solid #fff;
	/*テーブルの線。幅、線種、色*/
}


/* th（左側）、td（右側）の共通設定 */

.ta5 th,
.ta5 td {
	padding: 18px 5px;
	/*上下、左右へのボックス内の余白*/
}


/* thの設定 */

.ta5 th {
	color: #fff;
	background: #389168;
	font-size: 1.2em;
	padding: 10px 1em;
	text-align: center;
	border: 1px solid #fff;
	white-space: nowrap;
}

.ta5 td {
	background: #eee;
	padding: 10px 1em;
	border: 1px solid #fff;
}

@media only screen and (max-width:991px) {
	.ta5 {
		min-width: 100%;
		margin: 0 0 1em 0;
	}
}

.ta5 a {
	display: inline-flex;
	background: #fff;
	border: 1px solid #00a0e9;
	color: #00a0e9;
	text-decoration: none;
	margin: 5px;
	padding: 5px 20px;
	border-radius: 10px;
}

.ta5 a:hover {
	background: #ccc;
}


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

.ta6 {
	min-width: 1080px;
	width: 100%;
	border-spacing: 0;
	/* ボーダーとボーダーの間隔を指定 */
	border: 1px solid #389168;
	/*テーブルの線。幅、線種、色*/
	margin-bottom: 1em;
	border-radius: 10px;
	overflow: hidden;
}


/*th（左側）、td（右側）の共通設定*/

.ta6 th,
.ta6 td {
	padding: 18px 5px;
	/*上下、左右へのボックス内の余白*/
}


/*thの設定*/

.ta6 th {
	width: 33%;
	color: #fff;
	background: #389168;
	font-size: 1.2em;
	padding: 10px 1em;
	text-align: center;
}

.ta6 td {
	/*border-bottom: 1px solid #389168;*/
	/*テーブルの下線。幅、線種、色*/
	background: #eee;
	padding: 10px 1em;
}

@media only screen and (max-width:991px) {
	.ta6 {
		min-width: 100%;
		margin: 0 0 1em 0;
	}
	.ta6 th,
	.ta6 td {
		display: block;
		width: 100%;
	}
}

.ta6 a {
	/*width:150px;*/
	background: #fff;
	border: 1px solid #00a0e9;
	color: #00a0e9;
	text-decoration: none;
	margin: 5px;
	padding: 5px 20px;
	border-radius: 10px;
}

.ta6 a:hover {
	background: #ccc;
}

.ta6 img {}


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

.ta7 {
	padding: 5px 8px;
}

@media print {
	.ta7 {
		padding: 1px;
		white-space: nowrap;
	}
}

.ta7 th {
	background: #777;
	border: 1px solid #ccc;
	color: #fff;
	min-width: 40px;
}

.ta7 td {
	border: 1px solid #ccc;
	text-align: center;
}

.ta7 input {
	margin: 5px 8px;
}


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

.ta8 th {
	background: #777;
	border: 1px solid #888;
	color: #fff;
	min-width: 150px;
}

.ta8 td {
	border: 1px solid #888;
	min-width: 400px;
}

.ta8 input {
	margin: 5px 8px;
}


/* tableScroll
 * ---------------------------- */

.tableScroll table {
	width: 100%;
}

.tableScroll th,
.tableScroll td {
	padding: 5px;
	border: 1px solid #eee;
}

.tableScroll th {
	background: #CCE4F1;
	color: #000;
}

.tableScroll a {
	font-weight: 700;
	color: #007CBC;
}

.tableScroll table tr:nth-child(odd) td {
	background: #eee;
}

.tableScroll table tr td {
	background: #fff;
}

.tableScroll {
	overflow: auto;
	white-space: nowrap;
	max-width: 1500px;
}


/* tableScroll2
 * --------------------------- */

.tableScroll2 table {
	width: 100%;
	text-align: center;
}

.tableScroll2 th,
.tableScroll2 td {
	padding: 5px;
	border: 1px solid #ccc;
}

.tableScroll2 th {
	background: #CCE4F1;
	font-size: 120%;
	color: #000;
}

.tableScroll2 a {
	font-weight: 700;
	color: #007CBC;
}


/*
.tableScroll2 table tr:nth-child(odd) td {
	background: #fafafa;
}
*/

.tableScroll2 table tr td table tr td {
	background: #fff;
	width: 25%;
}

.tableScroll2 {
	overflow: auto;
	white-space: nowrap;
	max-width: 1500px;
}


/*
@media ( min-width: 768px) {
	.tableScroll2 {
		max-width: 1500px;
	}
}
*/

.table_block {
	vertical-align: top;
}

@media only screen and (max-width:991px) {
	.table_block {
		display: block;
	}
}

@media print {
	.tableScroll2 {
		font-size: 70%;
	}
}


/* ---------------------------------------------------------------------------
 * よく頂く質問
 * --------------------------------------------------------------------------- */

.faq {
	padding: 0 5px;
	/*上下、左右へのボックス内の余白*/
}


/*質問*/

.faq dt {
	border-radius: 10px;
	/*枠を角丸にする指定*/
	margin-bottom: 20px;
	/*下に空けるスペース*/
	background: #00a0e9;
	color: #fff;
	/*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";
	/*Font Awesomeを使う指定*/
	/*content: "\f059";
	/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。*/
	/*color: #389168;
	/*アイコンの色*/
	/*padding: 0 20px;
	/*上下、左右への余白*/
/*}
*/


/* 回答
 * --------------------------- */

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


/*opencloseを適用した要素のカーソル*/

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


/* ---------------------------------------------------------------------------
 * PAGE TOP（↑）設定
 * --------------------------------------------------------------------------- */


/*通常時のボタンは非表示*/

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: 60px;
	/*幅*/
	line-height: 60px;
	/*高さ*/
	z-index: 100;
	position: fixed;
	bottom: 10px;
	/*下からの配置場所*/
	right: 10px;
	/*右からの配置場所*/
	/*	background: rgba(0,0,0,0.6);
	/*背景色。0,0,0は黒の事。0.6は60%色がついた状態。*/
	background: rgba(239, 63, 64, 0.6);
	color: #fff;
	/*文字色*/
	border: 1px solid #fff;
	/*枠線の幅、線種、色*/
	border-radius: 50%;
	/*円形にする*/
	animation-name: opa1;
	/*keyframes.cssで使う@keyframesの指定*/
	animation-duration: 1S;
	/*アニメーションの実行時間*/
	animation-fill-mode: both;
	/*アニメーションの待機中は最初のキーフレームを維持、終了後は最後のキーフレームを維持。*/
}


/*マウスオン時*/

body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {
	background: #999;
	/*背景色*/
}


/* ---------------------------------------------------------------------------
 * btnの設定
 * --------------------------------------------------------------------------- */


/*ボタンを囲むブロック*/

.btn,
.btn_green,
.btn_pink,
.btn_blue {
	text-align: center;
	/*内容をセンタリング*/
	font-size: 1.2rem;
	/*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
}

.btn {
	background: #70adec;
	/*背景色*/
	color: #fff;
}

.btn:hover {
	background: #ccc;
	/*背景色*/
}


/*ボタン*/

.btn a,
.btn input {
	display: inline-block;
	text-decoration: none;
	border: none;
	background: #00a0e9;
	/*背景色*/
	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%ついた状態。*/
}

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

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

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

.btn_login a,
a .btn_login,
.btn_login input {
	display: block;
	font-weight: bold;
	text-decoration: none;
	font-size: 1.4em;
	border: none;
	background: #70adec;
	/*背景色*/
	color: #000;
	/*文字色*/
	border-radius: 5px;
	/*角丸のサイズ。ほんの少しだけ角が丸くなります。*/
	margin: 0 auto;
	padding: 10px 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,
.btn2 a:hover,
.btn3 a:hover,
.btn_green a:hover,
.btn_pink a:hover,
.btn_blue a:hover,
.btn_login a:hover,
a .btn_login:hover,
.btn_login:hover,
.btn input:hover {
	/*opacity: 0.9;*/
	/*透明度。0.9は色が90%ついた状態のこと。*/
	background: #4169e1;
	/*background:#666;*/
	color: #fff;
	transition: 0.6s;
}

.btn2 {
	/* text-align:center;*/
}

.btn2 a {
	padding: 5px 10px;
	/*上下、左右へのボタン内の余白*/
	letter-spacing: 0.1em;
	/*文字間隔を少しだけ広く*/
	color: #fff;
	text-decoration: none;
	border-radius: 5px;
	background: #00a0e9;
}


/*矢印アイコン（アイコンにはFont Awesomeを使用）*/

.btn2 i {
	padding-left: 20px;
	/*アイコンとテキストの間に空ける余白*/
}

.btn3 {
	text-align: center;
}

.btn3 a {
	padding: 5px 10px;
	/*上下、左右へのボタン内の余白*/
	letter-spacing: 0.1em;
	/*文字間隔を少しだけ広く*/
	color: #fff;
	text-decoration: none;
	border-radius: 5px;
	font-size: 18px;
	background: #00a0e9;
}

.btn_back,
a.btn_back {
	display: inline-block;
	padding: 5px 10px;
	background-image: linear-gradient(0deg, #a7d9f5, #eaf6fd);
	/* グラデーション */
	border: 1px solid #3c7fb1;
	/* 枠線 */
	border-radius: 0.3em;
	/* 角丸 */
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 16px;
}

.btn_back:hover,
a.btn_back:hover {
	color: #fff;
	background: #888;
	text-decoration: none;
}

a.btn_close {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 150px;
	margin: 1em auto;
	padding: 5px;
	font-weight: bold;
	border: 2px solid #27acd9;
	background: #27acd9;
	color: #fff;
	border-radius: 5px;
}

a.btn_close:hover {
	color: #27acd9;
	background: #fff;
}


/* ---------------------------------------------------------------------------
 * 詳細ページの画像切り替え（imgchg_pack.js）※一般のhtmlテンプレートで利用。
 * --------------------------------------------------------------------------- */


/*大きな画像のボックスと説明文を入れるボックス*/

#item-image {
	position: relative;
	margin: 0 auto 20px;
	text-align: center;
	width: 100%;
}


/*大きな画像の１行目*/

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


/* -----------------------------------------------
 * マウスオン時の設定。
 * マウスオンでスライドがストップしてしまうので、それがわかりやすいように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;
	/*上下、左右へのボックス内の余白*/
	/* height:280px; */
	line-height: 1.8;
	overflow: auto;
}


/*日付(dt)、記事(dd)共通設定*/

#new dt,
#new dd {
	border-bottom: 1px solid #ccc;
	/*下線の幅、線種、色*/
	padding: 5px 0;
	/*上下、左右へのボックス内の余白*/
}


/*日付(dt)設定*/

#new dt {
	width: 8em;
	/* 幅。8文字(em)分。
	 * ※下の「800px以上」の端末用の設定に再設定があります。*/
}


/*日付の横のマーク（共通設定）*/

#new dt span {
	display: none;
	/*小さな端末では非表示にしておく。*/
}


/*bg1設定。*/

#new dt span.icon-bg1 {
	background: #386091;
	/*背景色*/
}


/*bg2設定。 */

#new dt span.icon-bg2 {
	background: #91384d;
	/*背景色*/
}


/*記事(dd)設定*/

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


/*  リストの装飾（ピンク） */

ol.sankau1 {
	counter-reset: list;
	list-style-type: none;
	font: 18px/2.0 'arial narrow', sans-serif;
	padding: 0;
}

ol.sankau1 li {
	position: relative;
	padding: 0 0 0 20px;
	margin: 7px 0 7px 0px;
	/*font-weight: bold;*/
	font-size: 18px;
	line-height: 30px;
	border-bottom: dashed 1px #F6A38B;
}

ol.sankau1 li:before {
	counter-increment: list;
	content: "";
	display: block;
	position: absolute;
	left: 0px;
	height: 0;
	width: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 7px solid #F6A38B;
	top: 50%;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}


/* ---------------------------------------------------------------------------
 * フォントアイコン
 * --------------------------------------------------------------------------- */

a[href$=".pdf"]:after {
	font-family: "Font Awesome 5 Free";
	content: " \f1c1";
	color: #ff0000;
	text-decoration: none;
}

a[href$=".xlsx"]:after,
a[href$=".xls"]:after {
	font-family: "Font Awesome 5 Free";
	content: " \f1c3";
	color: #31A880;
}

a[href$=".docx"]:after,
a[href$=".doc"]:after {
	font-family: "Font Awesome 5 Free";
	content: " \f1c2";
	padding-left: 5px;
	color: #0071B0;
}

table a[target="_blank"] {
	display: inline-block;
	padding-right: 36px;
	background: url(icon_link.png) no-repeat right center;
}


/*  リストの装飾（緑）
 * --------------------------- */

ol.sankau2 {
	counter-reset: list;
	list-style-type: none;
	/*font: 15px/2.0 'arial narrow', sans-serif;*/
	margin-left: 0;
	padding: 0;
}

ol.sankau2 li {
	position: relative;
	padding: 0 0 0 20px;
	margin: 7px 0 7px 0px;
	/*font-weight: bold;*/
	font-size: 18px;
	line-height: 30px;
	border-bottom: dashed 1px #aaddaa;
}

ol.sankau2 li:before {
	counter-increment: list;
	content: "";
	display: block;
	position: absolute;
	left: 0px;
	height: 0;
	width: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 7px solid #aaddaa;
	top: 50%;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

ul.sankau2 {
	counter-reset: list;
	list-style-type: none;
	/*font: 18px/2.0 'arial narrow', sans-serif;*/
	padding: 0;
}

ul.sankau2 li {
	position: relative;
	padding: 0 0 0 20px;
	margin: 7px 0 7px 10px;
	/*font-weight: bold;
	font-size:18px;*/
	line-height: 30px;
	border-bottom: dashed 1px #aaddaa;
}

ul.sankau2 li:before {
	counter-increment: list;
	content: "";
	display: block;
	position: absolute;
	left: 0px;
	height: 0;
	width: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 7px solid #aaddaa;
	top: 50%;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}


/* 指さしアイコン付
 * --------------------------- */

ul.yubi {
	/*border: double 4px #21b384;*/
	border: double 4px #00a0e9;
	margin: 5px 0 1em 0;
	padding: 0em 1em 0.5em 3em;
	position: relative;
}

ul.yubi li {
	line-height: 1.5;
	padding: 0.5em 0;
	list-style-type: none!important;
	/*ポチ消す*/
}

ul.yubi li:before {
	font-family: "Font Awesome 5 Free";
	content: "\f0a4";
	position: absolute;
	left: 1em;
	/*左端からのアイコンまで*/
	/*color: #21b384;*/
	/*アイコン色 緑*/
	color: #00a0e9;
	/*アイコン色 水色*/
}


/* ---------------------------------------------------------------------------
 * その他
 * --------------------------------------------------------------------------- */

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


/*---------------------------------------------------------------------------
 * ここから下は画面幅480px以上の追加指定
 * -------------------------------------------------------------------------- */

@media screen and (min-width:480px) {
	/*ボックス内の画像*/
	.pickup .list img {
		height: 120px;
		/*画像の高さ*/
	}
	/*　※注意！　下の閉じカッコ　}　は480px以上の設定に必要なので、うっかり削除しないように。　*/
}


/* ---------------------------------------------------------------------------
 * ここから下は画面幅600px以上の追加指定
 * --------------------------------------------------------------------------- */

@media screen and (min-width:600px) {
	/*ボックス内の画像*/
	.pickup .list img {
		height: 160px;
		/*画像の高さ*/
	}
	/*　※注意！　下の閉じカッコ　}　は600px以上の設定に必要なので、うっかり削除しないように。　*/
}


/* ---------------------------------------------------------------------------
 * ここから下は画面幅799px以上の追加指定
 * --------------------------------------------------------------------------- */

@media screen and (max-width:799px) {
	header #logo img {
		padding-left: 5px;
	}
	header #logo::before,
	.pc {
		display: none;
	}
}


/* ---------------------------------------------------------------------------
 * ここから下は画面幅800px以下の追加指定
 * --------------------------------------------------------------------------- */

@media screen and (max-width: 800px) {
	html,
	body {
		font-size: 1em;
		/*基準となるフォントサイズの上書き*/
	}
	#new {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		margin-bottom: 2em;
	}
	#new dt {
		width: 100%;
		display: block;
		font-weight: bold;
		border-bottom: none;
	}
	#new dt span {
		width: 100%;
		display: block;
		/*表示させる、*/
	}
	#new dd {
		width: 100%;
		display: block;
		/*表示させる、*/
	}
	main h3 {
		font-size: 1em;
	}
	footer {
		font-size: 0.9em;
	}
	footer b {
		font-size: 1em;
	}
	.breadcrumbs {
		font-size: 0.8em;
	}
}


/* ---------------------------------------------------------------------------
 * ここから下は画面幅800px以上の追加指定
 * --------------------------------------------------------------------------- */

@media screen and (min-width:800px) {
	.sp {
		display: none;
	}
	/*全体の設定
 * --------------------------------------------------------------------------- */
	html,
	body {
		/*font-size: 18px;*/
		/*基準となるフォントサイズの上書き*/
	}
	/*section全般の設定*/
	section+section {
		padding-top: 50px;
		/*sectionの間に空けるスペース*/
	}
	/* header。ロゴなどが入った最上段のボックス。
	 * --------------------------------------------------------------------------- */
	header {
		flex-direction: row;
		/*子要素を横並びにする*/
		justify-content: space-between;
		/*並びかたの種類の指定*/
		align-items: center;
		/*垂直揃えの指定。上下中央に配置されるように。*/
		/*padding: 20px;
		/*ボックス内の余白*/
		padding: 0;
	}
	/*logo画像*/
	header #logo {
		/*max-width: 1000px;
		/*画像の幅*/
		/*margin: 0;
		/*中央から左に戻る為の設定*/
	}
	/* ３本バー（ハンバーガー）アイコン設定
 * --------------------------------------------------------------------------- */
	/*３本バーブロック*/
	#menubar_hdr {
		display: none;
		/*非表示にする*/
	}
	/* 大きな端末用のメインメニューの設定
 * --------------------------------------------------------------------------- */
	/*ボックス全体の設定*/
	#menubar {
		display: block;
		/*表示させる*/
		margin-left: 210px;
		margin-bottom: 1.5em;
	}
	/*ul要素。メニュー１個１個を囲む親のボックス。*/
	#menubar ul {
		margin: 0;
		list-style: none;
		display: flex;
		/*flexボックスを使う指定*/
		justify-content: space-around;
		/*並びかたの種類の指定*/
		border-top: 1px solid #eee;
		/*上の線の幅、線種、色*/
		border-bottom: 3px solid #ff9900;
		/*下の線の幅、線種、色*/
		line-height: 1.5;
		/*行間を少しだけ狭く*/
	}
	/*メニュー１個あたりの設定*/
	#menubar li {
		flex: 1;
		/*それぞれのメニューが幅一杯に広がるように*/
		text-align: center;
		/*テキストをセンタリング*/
		position: relative;
		/*font-size: 1.15rem;
		font-size: 1rem;
		/*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
		font-weight: bold;
		background: #fdd0a5;
		/*背景の色*/
	}
	/*ラインアニメーションの設定*/
	#menubar li::before {
		content: "";
		position: absolute;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 5px;
		/*background: #389168;*/
		background: #fc6222;
		/*線となる背景の色*/
		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;
		/*上、右、下、左への余白*/
	}
	/*アイコン画像（アイコンにはFont Awesomeを使用）*/
	#menubar i {
		display: block;
		/*改行が入るようにblock指定。もし横に並べたいならこの１行を削除し、下のpadding-bottomをpadding-rightに変更すればOK。*/
		padding-bottom: 10px;
		/*アイコンの下に空ける余白*/
		font-size: 2em;
		color: #333;
		/*文字色＝アイコン色になります。*/
	}
	/*アイコンのマウスオン時*/
	#menubar li:hover i {
		transition: 0.3s;
		/*アニメーション時間。0.3秒。*/
		transform: scale(1.15);
		/*サイズを1.15倍にする。*/
	}
	/*spanタグ（装飾用のテキスト）*/
	#menubar span {
		display: block;
		/*font-size: 0.8rem;*/
		font-size: 0.6rem;
		/*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
		letter-spacing: 0.2em;
		/*文字間隔を少しだけ広くとる指定*/
	}
	/* mainブロック設定
 * --------------------------------------------------------------------------- */
	/*mainブロックの設定*/
	main {
		/*padding: 50px;*/
		/*ボックス内の余白*/
	}
	/* フッターメニュー設定
 * --------------------------------------------------------------------------- */
	/*ボックス全体の設定*/
	#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 {
		background: #003355;
		color: #fff;
		/*width:150px!important;
		width: 20%;
		/*幅*/
	}
	/* よく頂く質問
 * --------------------------------------------------------------------------- */
	/*質問*/
	.faq dt {
		/*text-indent: -58px;*/
		/*テキストのインデントの調整*/
		padding: 20px 20px 20px 58px;
		/*余白の調整*/
		font-weight: bold;
		font-size: 1.2em;
		text-align: center;
	}
	/* listブロック設定
 * --------------------------------------------------------------------------- */
	/*１個あたりのボックス*/
	.list {
		width: 30%;
		/*ボックスの幅*/
		margin-right: 1.33%;
		/* -------------------------------
		 * ボックス同士の左右間の余白。
		 * ボックスを4列並べるので、23%×4個=92%。
		 * 100%との差の8%分をボックス間にある余白3個分で割った数字がここに入ります。
		 * ※下の「.list:nth-of-type(2n)」の数字と合わせる。
		 * ------------------------------- */
		margin-bottom: 25px;
		/*ボックス同士の上下間の余白*/
	}
	.list-container .list {
		/*width: 22%; */
		width: 15.3333333333%;
		/*ボックスの幅*/
	}
	.list2 {
		width: 60%;
		/*ボックスの幅*/
		margin-right: 2.66%;
		/* -------------------------------
		 * ボックス同士の左右間の余白。
		 * ボックスを4列並べるので、23%×4個=92%。
		 * 100%との差の8%分をボックス間にある余白3個分で割った数字がここに入ります。
		 * ※下の「.list:nth-of-type(2n)」の数字と合わせる。
		 * ------------------------------- */
		margin-bottom: 25px;
		/*ボックス同士の上下間の余白*/
	}
	/*2の倍数(偶数番目)のボックスへの追加指定*/
	.list:nth-of-type(2n) {
		margin-right: 1.3%;
		/* 上のlistのmargin-rightと数字を合わせる。
		 * 小さな端末向けで0になっているのを上書きしています。*/
	}
	/*4の倍数のボックスへの追加指定*/
	.list:nth-of-type(4n) {
		/*margin-right: 0;
		/*右側のスペースをなくす設定*/
	}
	/*「お知らせ」ブロック
 * --------------------------------------------------------------------------- */
	/*日付(dt)設定*/
	#new dt {
		width: 8em;
		/*幅。8文字(em)分。*/
	}
	/*日付の横のマーク（共通設定）*/
	#new dt span {
		display: inline-block;
		/*表示させる、*/
		width: 6em;
		/*幅。6文字(em)分。*/
		line-height: 1.6;
		/*行間*/
		background: #999;
		/*背景色*/
		color: #fff;
		/*文字色*/
		font-size: 0.9rem;
		/*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
		text-align: center;
		/*文字をセンタリング*/
		border-radius: 3px;
		/*角を少しだけ丸くする*/
		margin-left: 1.2em;
		/*日付との間のスペース*/
	}
	/*記事(dd)設定*/
	#new dd {
		width: calc(100% - 8em);
		/*「8em」は上の「#new dt」のwidthの値です。*/
	}
	/* btnの設定
 * --------------------------------------------------------------------------- */
	/*ボタン*/
	.btn a {
		padding: 15px 40px;
		/*上下、左右へのボタン内の余白*/
		letter-spacing: 0.1em;
		/*文字間隔を少しだけ広く*/
	}
	/*右側の矢印アイコン（アイコンにはFont Awesomeを使用）*/
	.btn i {
		padding-left: 20px;
		/*アイコンとテキストの間に空ける余白*/
	}
	/* 詳細ページの画像切り替え（imgchg_pack.js）※一般のhtmlテンプレートで利用。
 * --------------------------------------------------------------------------- */
	/*大きな画像のボックスと説明文を入れるボックス*/
	#item-image {
		width: 80%;
	}
	/* パノラマ画像のサイズ設定（※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;
	}
	/*　※注意！　下の閉じカッコ　}　は800px以上の設定に必要なので、うっかり削除しないように。　*/
}


/* ---------------------------------------------------------------------------
 * ここから下は画面幅1000px以上の追加指定
 * --------------------------------------------------------------------------- */

@media screen and (min-width:1000px) {
	/*ボックス内の画像*/
	.pickup .list img {
		height: 150px;
		/*画像の高さ*/
	}
	/*　※注意！　下の閉じカッコ　}　は1000px以上の設定に必要なので、うっかり削除しないように。　*/
}


/* ---------------------------------------------------------------------------
 * Web Grid
 * --------------------------------------------------------------------------- */

.r {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: 10px
}

[class*="c-"] {
	grid-column: span 12;
	/*padding: 10px*/
}


/* 600px */

@media only screen and (min-width: 600px) {
	.c-50 {
		grid-column: span 6;
	}
	.c-25 {
		grid-column: span 3;
	}
	.c-75 {
		grid-column: span 9;
	}
	.c-100 {
		grid-column: span 12;
	}
	.c-1 {
		grid-column: span 1;
	}
	.c-2 {
		grid-column: span 2;
	}
	.c-3 {
		grid-column: span 3;
	}
	.c-4 {
		grid-column: span 4;
	}
	.c-5 {
		grid-column: span 5;
	}
	.c-6 {
		grid-column: span 6;
	}
	.c-7 {
		grid-column: span 7;
	}
	.c-8 {
		grid-column: span 8;
	}
	.c-9 {
		grid-column: span 9;
	}
	.c-10 {
		grid-column: span 10;
	}
	.c-11 {
		grid-column: span 11;
	}
	.c-12 {
		grid-column: span 12;
	}
}


/* 600px - 800px */

@media only screen and (max-width: 800px) and (min-width: 600px) {
	.c-25 {
		grid-column: span 3;
	}
	.c-50 {
		grid-column: span 6;
	}
	.c-75 {
		grid-column: span 9;
	}
	.c-100 {
		grid-column: span 12;
	}
}


/* ---------------------------------------------------------------------------
 * パンくず
 * --------------------------------------------------------------------------- */

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

.breadcrumb li {
	display: inline;
	/*横に並ぶように*/
	list-style: none;
	font-weight: bold;
	/*太字*/
}

.breadcrumb li:after {
	/* >を表示*/
	content: '>';
	padding: 0 0.2em;
	color: #555;
}

.breadcrumb li:last-child:after {
	content: '';
}

.breadcrumb li a {
	text-decoration: none;
	color: #52b5ee;
	/*色*/
}

.breadcrumb li a:hover {
	text-decoration: underline;
}


/* 文字色
 * ----------------------------------------------- */

.font_red {
	color: #FF0000;
}


/* 文字サイズ
 * ----------------------------------------------- */

.font_l {
	font-size: 120%;
}

.font_center {
	text-align: center;
}


/* スマホの時だけ改行
 * ----------------------------------------------- */

@media screen and (min-width: 768px) {
	.br-sp {
		display: none;
	}
}


/* ===============================================
 * フォーム用
 * =============================================== */

input[type="text"],
input[type="password"],
textarea {
	padding: 0.4em;
	outline: none;
	border: 1px solid #DDD;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	font-size: 16px;
}

textarea {
	width: 100%;
}

select {
	padding: 0.4em;
	border: 1px solid #DDD;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	font-size: 16px;
}

input[type='button'],
input[type='submit'] {
	/* input要素のうちtype属性値がbuttonのものに対して装飾 */
	min-width: 100px;
	background-image: linear-gradient(0deg, #a7d9f5, #eaf6fd);
	/* グラデーション */
	height: 40px;
	border: 1px solid #3c7fb1;
	/* 枠線 */
	border-radius: 0.3em;
	/* 角丸 */
	font-size: 16px;
}

@media print {
	.sp {
		display: none;
	}
}


/* ===============================================
 * システム用ボタン（input[type='submit']に対応）
 * =============================================== */
.submit_btn,
.submit_btn_red,
.submit_btn_blue,
.submit_btn_green,
.submit_btn_orange{
	min-width: 100px;
	display: inline-block;
	border-radius: 5%;
	/* 角丸       */
	font-size: 16px;
	text-align: center;
	/* 文字位置   */
	cursor: pointer;
	/* カーソル   */
	padding: 12px 12px;
	/* 余白       */
	line-height: 1em;
	/* 1行の高さ  */
	transition: .3s;
	/* なめらか変化 */
}

.submit_btn {
	font-weight: bold;
	background-image: linear-gradient(0deg, #a7d9f5, #eaf6fd);
	/* グラデーション */
	color: #000;
	/* 文字色     */
	border: 1px solid #3c7fb1;
	/* 枠の指定 */
}

.submit_btn_red {
	background: #EF4154!important;
	/* 背景色     */
	color: #ffffff;
	/* 文字色     */
	border: 2px solid #6666ff;
	/* 枠の指定 */
}

.submit_btn_blue {
	background: #1CA5F2;
	/* 背景色     */
	color: #000;
	/* 文字色     */
	border: 2px solid #6666ff;
	/* 枠の指定 */
}

.submit_btn_green {
	background: #22B573;
	/* 背景色     */
	color: #ffffff;
	/* 文字色     */
	border: 2px solid #6666ff;
	/* 枠の指定 */
}

.submit_btn_orange {
	background: #F7931E;
	/* 背景色     */
	color: #ffffff;
	/* 文字色     */
	border: 2px solid #6666ff;
	/* 枠の指定 */
}


/* ホバー時（統一）
 * ----------------------------------------------- */

.submit_btn:hover,
.submit_btn_red:hover,
.submit_btn_blue:hover,
.submit_btn_green:hover,
.submit_btn_orange:hover,
input[type='button']:hover,
input[type='submit']:hover {
	color: #6666ff!important;
	/* 背景色     */
	background: #ffffff!important;
	/* 文字色     */
	text-decoration: none!important;
}

input[type=checkbox] {
	margin: 5px 20px 5px 5px;
	width: 18px;
	height: 18px;
	-moz-transform: scale(1.4);
	-webkit-transform: scale(1.4);
	transform: scale(1.4);
}