/*スライドショー（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;	/*色*/
}

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

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

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