@charset "UTF-8";

/* ===============================================
 * Box sizing rules 
 * =============================================== */
/* Box sizingの定義 */
*,
*::before,
*::after {
	box-sizing: border-box;
}
 
/* Remove default padding */
/* デフォルトのpaddingを削除 */
ul[class],
ol[class] {
	padding: 0;
}
 
/* Remove default margin */
/* デフォルトのmarginを削除 */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
	margin: 0;
}
 
/* Set core body defaults */
/* bodyのデフォルトを定義 */
body {
	min-height: 100vh;
	scroll-behavior: smooth;
	text-rendering: optimizeSpeed;
	line-height: 1.5;
	text-align: justify;
	text-justify: inter-ideograph;
}
 
/* Remove list styles on ul, ol elements with a class attribute */
/* class属性を持つul、ol要素のリストスタイルを削除 */
ul[class],
ol[class] {
	list-style: none;
}
 
/* A elements that don't have a class get default styles */
/* classを持たない要素はデフォルトのスタイルを取得 */
a:not([class]) {
	text-decoration-skip-ink: auto;
}
 
/* Make images easier to work with */
/* img要素の扱いを簡単にする */
img {
	max-width : 100%;
	display   : block;
}
 
/* Natural flow and rhythm in articles by default */
/* article要素内の要素に自然な流れとリズムを定義 */
article > * + * {
	margin-top : 1em;
}
 
/* Inherit fonts for inputs and buttons */
/* inputやbuttonなどのフォントは継承を定義 */
input,
button,
textarea,
select {
	font : inherit;
}
 
/* Remove all animations and transitions for people that prefer not to see them */
/* 見たくない人用に、すべてのアニメーションとトランジションを削除 */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}
/*
アイコン
「lib」フォルダ消さないで
------------------------------------
http://fontawesome.io/icons/
================================== */

/* ===============================================
 *  一般?共通設定
 * =============================================== */
body {
	font-size   : 100%;
	color       : #000;
	font-family : 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
	line-height         : 1.6;
	background-position : right 0 bottom 35px;
	background-repeat   : no-repeat;
	background-size     : 100% auto;
}
@media screen and (max-width:767px) {
	body {
		font-size   : 75%;
	}
}
html{
	min-width:380px;
}
table{
	border-collapse : collapse;
	border-spacing  : 0;
}
/* リンク
 * --------------------------- */ 
a {
	color           : blue;
	text-decoration : underline;
}
a:hover {
	color           : #4169e1;
	text-decoration : none;
}

p {
	margin         : 0 0.5em 1em 0.8em;
}

img {
	vertical-align : bottom;
}
b{
	font-weight : bold;
}
em {
	font-weight : bold;
}
strong {
	font-weight : bold;
	color       : #ff0000;
}
pre {
	margin  : 1em 0;
	padding : 1em;
}
blockquote {
	margin-bottom : 1em;
	padding       : 1em;
	border        : 1px dotted #ddd;
	border-left   : 5px solid #ddd;
}
ul,ol,dl {
	margin        : 0 0 1em 0;
}
ul li {
	list-style    : disc;
}
ol li {
	list-style    : decimal;
}
li {
	margin-left   : 0em;
	margin-bottom : 0.5em;
}
dt {
	margin-bottom : 0.5em;
}

/* ===============================================
 *  ヘッダー 
 * =============================================== */
header {
	box-sizing : border-box;
	position   : relative;
	width      : 100%;
	height     : 140px;
	padding    : 5px;
}
.inner {
	position   : relative;
	width      : 1024px;
	margin     : 0 auto;
}
.summary {
	position : absolute;
	top      : 0;
	right    : 10px;
	margin   : 0;
}
/* ご予約電話番号
 * --------------------------- */
.tel_ttl{
	font-size   : 1.6em;
	font-weight : bold;
}
/* ロゴ
 * --------------------------- */
header h1 img{
	margin-top  : 20px;
	max-width:700px;
}

/* ===============================================
 *  グローバルナビゲーション
 * =============================================== */
nav {
	width      : 100%;
	background : #fff;
	box-shadow : 0 1px 2px #d0d8dc;
	?zoom:1;
}
nav:after {
	content    : '';
	display    : block;
	clear      : both;
}
@media print, screen and (min-width:980px) {
	nav {
		background : #fff;
		box-shadow : 0 1px 3px #999;
		z-index    : 999;
	}
	/* 1段目 */
	nav ul {
		margin     : 0;
		padding    : 0;
	}

	nav ul li {
		position   : relative;
		width      : 16.6666%;
		float      : left;
		margin     : 0;
		padding    : 0;
		text-align : center;
		list-style : none;
	}
	nav ul li a {
		display         : block;
		margin          : 0;
		padding         : 24px 0;
		background      : #fff;
		color           : #000;
		font-size       : 16px;
		font-weight     : bold;
		line-height     : 1;
		text-decoration : none;
	}

	nav ul > li:hover > a {
		background      : #F6F3F3;
		font-weight     : bold;
		color           : #000;
		text-decoration : none;
	}

	nav ul .subnav > a:after {
		position         : absolute;
		content          : "";
		top              : 20px;
		width            : 0;
		height           : 0;
		margin-left      : 10px;
		border           : 5px solid transparent;
		border-top-color : #fff;
	}

	nav ul .subnav .subnav > a:after {
		content : "";
		border  : none;
	}
	.gnav img{
		width:40px;
		margin: 0 auto;

		margin-bottom : 10px;
		text-align:center;
	}
	/* ナビ選択時 */
	.gnav .active{
		background : #394AA3;
		color      : #fff;
	}
	/* 2段目 */
	nav ul li ul {
		list-style : none;
		position   : absolute;
		z-index    : 3;
		top        : 100%;
		left       : 0;
		width      : 100%;
		margin     : 0;
		padding    : 0;
	}

	nav ul li ul li {
		overflow   : hidden;
		width      : 150%;
		height     : 0;
		color      : #fff;
		transition : .2s;
	}

	nav ul li ul li:first-child {
		width      : 150%;
	}

	nav ul li ul li a {
		padding     : 13px 15px;
		text-align  : left;
/*		background  : #4F9AF7;*/
		font-weight : normal;
	}

	nav ul li:hover > ul > li {
		overflow      : visible;
		height        : 40px;
		border-bottom : 1px solid #eee;
	}

	nav ul li:hover ul li:last-child {
		border-bottom : none;
	}

	nav ul li:last-child ul {
		left : -50%;
	}

	nav ul li ul li ul:before {
		position          : absolute;
		content           : "";
		top               : 13px;
		left              : -20px;
		width             : 0;
		height            : 0;
		border            : 5px solid transparent;
		border-left-color : #fff;
	}

	nav ul li:last-child ul li ul:before {
		position           : absolute;
		content            : "";
		top                : 13px;
		left               : 200%;
		margin-left        : -20px;
		border             : 5px solid transparent;
		border-right-color : #fff;
	}

	/* 3段目 */
	nav ul li ul li ul {
		top  : 0;
		left : 100%;
	}

	nav ul li ul li ul li {
		width : 100%;
	}

	nav ul li ul li ul li:first-child {
		width : 100%;
	}

	nav ul li ul li:hover ul li {
		border-bottom : 1px solid #6d0c0c;
	}

	nav ul li:last-child ul li ul {
		left : -100%;
	}

	nav ul li ul li ul li a {
		background : #590000;
	}

	nav ul li ul li ul li a:hover {
		background : #420404;
	}

	.gnav {
		display : block !important;
	}

	#spMenu {
		display : none;
	}

	.fixed {
		position : fixed;
		top  : 0;
		left : 0;
	}
}

/* ===============================================
 *  トピックパス（パンくずリスト）
 * =============================================== */
.breadcrumb *, .breadcrumb *:after, .breadcrumb *:before {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.breadcrumb {
	margin: 10px auto 0 auto;
	padding: 0.5em;
	max-width:1040px;
	overflow   : hidden;
	background : #fff;
	color: #333;
}
.breadcrumb a {
	text-decoration: none;
	color: #333;
}
.breadcrumb .breadcrumbs {
	padding-left: 0;
	margin-top: 0;
	margin-bottom: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
}
.breadcrumb li {
	display: inline-block;
	position: relative;
	padding-right: calc(16px + 8px);
	margin-right: 8px;
	color: #333;
}
.breadcrumb li::before {
	content: '?';
	width: 1em;
	height: 1em;
	line-height: 1;
	text-align: center;
	font-size: 1em;
	color: inherit;
	position: absolute;
	top: 50%;
	right: 0;
	-webkit-transform: translateY(-50%);
	        transform: translateY(-50%);
}
.breadcrumb li:last-child {
	margin-right: 0;
	padding-right: 0;
}
.breadcrumb li:last-child::before {
	content: normal;
}

/* ===============================================
 * コンテンツ
 * =============================================== */
#contents {
	overflow   : hidden;
	width      : 100%;
	margin     : 0 auto;
}
#main {
	box-sizing:border-box;
	overflow  :hidden;
	max-width :1024px;
	width     :100%;
	margin     : 0 auto;
}
.main_inner{
	max-width:1180px;
	overflow   : hidden;
	margin     : 10px auto;
	padding    : 1em;
	background : #fff;
}
.cta_conrents{
	margin    : 0 auto;
	padding   : 15px 5px;
	background: rgb(227,247,244);
}
.cta_conrents p{
	dislay:block;
	max-width:1080px;
}

/* ===============================================
 *  フッター
 * =============================================== */
footer {
	box-sizing : border-box;
	position   : relative;
	margin     : 0 auto;
	clear:both;
	background : #C0CEE0;
}
footer p{
	display:block;
	max-width:1080px;
}

.footmenu_alt{
	text-align : center;
	width      : 100%;
	padding    : 10px 0;
	overflow   : hidden;
/*	background : #efede9;*/
}

.footmenu_alt ul {
	margin  : 0;
	padding : 0;
}
.footmenu_alt li {
	list-style : none;
	margin     : 0;
	padding    : 0 15px;
	text-align : center;
}
.footmenu_alt a {
	color           : #fff;
/*	background      : #55ACEE;*/
	font-size       : 16px;
	text-decoration : none;
	display         : inline-block;
	padding         : 5px;
	border-radius   : 5px;
}
.footmenu_alt a:hover {
/*	background      : #00a381;*/
	color           : #fff;
	text-decoration : none;
}
.footmenu {
	width      : 100%;
	margin     : 50px;
	padding    : 20px 0;
	overflow   : hidden;
/*	background : #efede9;*/
}
.footmenu ul {
	margin  : 0;
	padding : 0;
	display : block;
}
.footmenu li {
	display    : inline-block;
	list-style : none;
	margin     : 0;
	padding    : 0 15px;
	font-size  : 12px;
	text-align : center;
}
.footmenu a {
	text-decoration : none;
	padding         : 3px 20px;
	margin          : 5px;
}
.footmenu a:hover {
/*	background      : #00a381*/;
	color           : #fff;
	text-decoration : none;
}

.copyright {
	clear      : both;
	padding    : 10px 0;
	font-size  : 11px;
	text-align : center;
	color      : #fff;
/*	background : #d6051b;*/
	background : #394AA3;
}
.footer_main {
	box-sizing:border-box;
	overflow  :hidden;
	max-width :1024px;
	width     :100%;
	margin     : 0 auto;
	padding-top:1em;
}

/* ===============================================
 *  ページトップへ戻る
 * =============================================== */
.totop {
	z-index  : 4;
	position : fixed;
	bottom   : 15px;
	right    : 15px;
}
.totop a {
	display:block;
	text-decoration : none;
}
.totop img {
	background : #0075BA;
}
.totop img:hover {
	background : #f19500;
}


/* ===============================================
 *  Flexbox（レイアウト）
 * =============================================== */
.flex_container {
	display        : flex;
	flex-wrap      : wrap;
	flex-direction : row;
	justify-content: center;
}
.flex_item {
	flex-basis: 100%;
}
/* 幅 25%(1/4) 
 * --------------------------- */
.flex_item_4 {
	flex-basis: 25%;
}

.flex_item_4_3 {
	flex-basis: 75%;
}

@media screen and (max-width:767px) {
	.flex_item_4 {
		flex-basis : 100%;
		margin:0 auto;
		text-align:center;
	}
	.flex_item_4 img{
		display:block;
		margin:0 auto;
		text-align:center;
	}
	.flex_item_4_3 {
		flex-basis : 100%;
	}
}

/* 幅 32%(1/3) 
 * --------------------------- */
.flex_item_3 {
	flex-basis: 32%;
	padding:5px;
	margin:auto;
	text-align:center
}
.flex_item_3a {
	flex-basis: 32%;
	padding:5px;
}

/* 幅 66%(2/3)
 * --------------------------- */
.flex_item_3_2 {
	flex-basis: 66%;
	padding:5px;
/*	margin:auto;*/
}

/* 幅 50%(1/2)
 * --------------------------- */
.flex_item_2 {
	flex-basis: 49%;
	padding:0.5%;
}
@media screen and (max-width:1016px) {
	.flex_item_2{
		flex-basis : 100%;
	}
}
@media screen and (max-width:1016px) {
	.flex_item_w30{
		flex-basis : 28%;
		padding    : 2px ;

	}
}
.flex_item_w30 img{
	max-width : 100%;
}
/* 幅 29(30)%
 * --------------------------- */
.flex_item_w30 {
	flex-basis: 29%;
	padding:5px;
}

/* 幅 80%
 * --------------------------- */
.flex_item_w80 {
	flex-basis : 80%;
	padding    : 5px;
}

/* 幅 69(70)%
 * --------------------------- */
.flex_item_w70 {
	flex-basis : 69%;
	padding    : 5px 2px ;
}

/* 幅 60%
 * --------------------------- */
.flex_item_w60 {
	margin     : 0 auto;
	text-align : center;
	flex-basis : 60%;
	max-width  : 60%;
	padding    : 3px;
}
/*@media screen and (max-width:740px) {*/
@media screen and (max-width:979px) {
	.flex_item_w70,
	.flex_item_w30,
	.flex_item_3_2,
	.flex_item_3a,
	.flex_item_3 {
		flex-basis: 100%;
		max-width : 100%;
	}
	.wrap {
		margin    :  0!important;
	}
}
/* 幅 18(20)%
 * --------------------------- */
.flex_item_w20 {
	flex-basis : 20%;
	max-width  : 20%;
	padding    : 3px;
	margin         : 0 auto;
	text-align     : center;
}
/* 幅 28(30)%
 * --------------------------- */
.flex_item_w30 {
	flex-basis : 28%;
	padding    : 5px;
}
@media screen and (max-width:979px) {
	.flex_item_w60,
	.flex_item_w70,
	.flex_item_w80,
	.flex_item_w30,
	.flex_item_w20 {
		flex-basis : 100%;
		max-width : 100%;
	}
}
.flex_item_w20 p,
.flex_item_w60 p{
	margin-top  : 8px;
	font-weight : bold;
	font-size   : 1.2em;
}

/* ===============================================
 *  メイン画像
 * =============================================== */
.mainvisual{
	margin-top : 10px;
}
.mainvisual img{
	margin:0 auto;
	max-width : 1600px;
	width : 100%;
	height :auto;
}

/* ===============================================
 *  タブレット向けデザイン
 * =============================================== */
/* スクロールバーを考慮して20px大きいサイズで切り替え */
@media screen and (max-width:979px) {
	.inner {
		width   : 100%;
	}

	#contents {
		box-sizing:border-box;
		width   : 100%;
		padding : 0;
/*		padding : 0 10px;*/
	}

	footer {
		width   : 100%;
	}
}

/* ===============================================
 *  スマートフォン向けデザイン
 * =============================================== */
/*@media screen and (max-width:767px) {*/
@media screen and (max-width:979px) {

/*	.lock {
		overflow:hidden;
	}
*/
	header {
		z-index:10;
		box-sizing : border-box;
		position   : fixed;
		top        : 0;
		left       : 0;
		width      : 100%;
		height     : 90px;
		background : #fff;
	}

	header h1 img{
		vertical-align : middle;
		margin         : auto 10px ;
		padding-right  :10px;
		width          : calc(100% - 80px);
	}
	.summary {
		display : none;
	}
	.sp_off {
		display : none!important;
	}
	#main {
		float       : none;
		width       : 100%;
	}
	/* スマホ：上メニュー */
	nav {
/*		background : #0075BA;
		background : #710000;*/
	}
	nav ul {
		margin  : 0;
		padding : 0;
		}

	nav .inner > ul {
		z-index  : 10;
		overflow : auto;
		position : fixed;
		top      : 90px;
		right    : 0;
		width    : 100%;
		height   : 88%;
		height   : -webkit-calc(100% - 53px);
		height   : calc(100% - 53px);
		z-index:1001;

	}
	nav li {
		position      : relative;
		width         : 100%;
		float         : none;
		margin        : 0;
		text-align    : left;
		list-style    : none;
		font-weight   : bold;
		border-bottom : 1px solid #444;
		background    : #fafafa;
	}

	nav li:first-child {
		border-top : 0;
	}
	nav li:last-child {
		border-bottom : 0;
	}

	nav li a {
		display         : block;
		padding         : 10px 30px;
		color           : #000;
		text-decoration : none;
	}
	nav li a:hover {
		background : #eee;
		color      : #000;
	}
	nav ul ul {
		display  : none;
		position : relative;
	}
	nav li li a {
		box-sizing : border-box;
		width      : 100%;
		padding    : 10px 30px 10px 50px;
		text-align : left;
	}

	nav li li li a {
		padding : 10px 30px 10px 70px;
	}
	.gnav img{
		width:25px;
		display: inline;
		margin-right:30px;
	}
	.subnav > a:before {
		display    : block;
		content    : "";
		position   : absolute;
		-webkit-transform:rotate(45deg);
		transform:rotate(45deg);
		top        : 20px;
		right      : 30px;
		width      : 10px;
		height     : 10px;
		margin-top : -5px;
		background : #f1f1f1;
	}
	.subnav > a:after {
		display    : block;
		content    : "";
		position   : absolute;
		-webkit-transform:rotate(45deg);
		transform:rotate(45deg);
		top        : 20px;
		right      : 30px;
		width      : 10px;
		height     : 10px;
		margin-top : -10px;
		background : #9b0f0f;
	}
	.subnav a:hover:after {
		background : #710000;
	}

	.active > a:before {
		margin-top : 0;
	}
	.active > a:after {
		margin-top:5px;
	}
	.active{
		background : #394AA3;
		color:#fff;
	}
	.gnav {
		display : none;
	}
	.gnav a{
		text-decoration : none;;
	}
	.gnav a:hover{
		text-decoration : none;;
	}

	#spMenu {
		display  : block;
		z-index  : 10;
		position : fixed;
		top      : 10px;
		right    : 10px;
		z-index  : 1000;

	}
	#spMenu:hover {
		cursor : pointer;
	}
	#navBtn {
		display       : inline-block;
		position      : relative;
		width         : 60px;
		height        : 70px;
		border-radius : 5%;
		background    : #394AA3;
	}
	#navBtnIcon {
		display    : block;
		content    : '';
		color      : #fff;
		position   : absolute;
		top        : 50%;
		left       : 50%;
		width      : 14px;
		height     : 2px;
		transition : .2s;
		font-weight   : bold;
	}
	#navBtnIcon:before {
		display     : block;
		content     : 'Menu';
		font-size   : 16px;
		position    : absolute;
		top         : 50%;
		left        : -50%;
		width       : 40px;
/*		width       : 80px;*/
	}
	#navBtnIcon:before {
		margin-top  : -12px;
		margin-left : -16px;
	}
}


@media screen and (max-width:550px) {
	header {
		height:75px;
		z-index:999;
	}
	header h1 img{
		vertical-align : middle;
		margin     : auto 0 ;
		padding-right  :10px;
		max-width      : 300px;
		width          : calc(100% - 80px);
/*		max-height     : 75px;
		height         : auto;*/
	}
	#navBtn {
		width: 60px;
		height: 55px;
	}
	nav .inner > ul {
		top      : 75px;
	}
}


/* ===============================================
 *  ボタン
 * =============================================== */
.btn {
	display         : inline-block;
	max-width       : 180px;
	text-align      : left;
	background      : #26A8FF;
	font-size       : 14px;
	color           : #FFF!important;
	text-decoration : none;
	font-weight     : bold;
	padding         : 8px 16px 8px 16px;
	border-radius   : 4px;
	position        : relative;
}

.btn_gra{
	display          : block;
	text-decoration  : none;
	text-align       : center;
	color            : #fff;
	font-size        : 1.4em;
	font-weight      : bold;
	margin           : 0 auto;
	margin           : 5px;
	width            : 100%;
	padding          : 1em 0.2em;
	border-radius    : 5px;
	border           : solid 2px #4373B3;
	background       : #4373B3;
}
.btn_orange,
.btn_blue,
.btn_green{
	display          : block;
	text-decoration  : none;
	text-align       : center;
	color            : #fff;
	font-size        : 1.4em;
	font-weight      : bold;
	margin           : 0 auto;
	margin           : 5px;
	width            : 100%;
	padding          : 1em 0.2em;
	border-radius    : 5px;
}
.btn_orange{
	border           : solid 2px #f6a743;
	background       : #f6a743;
}
.btn_blue{
	border           : solid 2px #4369a3;
	background       : #4369a3;
}
.btn_green{
	border           : solid 2px #0c9e3e;
	background       : #0c9e3e;
}
.btn_orange:hover,
.btn_blue:hover,
.btn_green:hover{
	border           : solid 2px #444;
	background       : #444;
	color            : #fff;
}
.btn:hover,
.btn_gra:hover {
	background : #00a381;
	color      : #FFF;
}

.btn2 {
	display         : inline-block;
	max-width       : 320px;
	text-align      : left;
	background      : #26A8FF;
	font-size       : 14px;
	color           : #FFF;
	text-decoration : none;
	font-weight     : bold;
	padding         : 8px 16px 8px 16px;
	border-radius   : 4px;
	position        : relative;
}

.btn2_gra{
	display          : block;
	text-decoration  : none;
	color            : #FFF;
	font-weight      : bold;
	margin           : 0 auto;
	margin           : 5px;
	width            : 90%;
	padding          : 0.5em 1em;
	border-radius    : 5px;
	background-image : linear-gradient(45deg, #98b8f7 0%, #142c5b 100%);
	box-shadow       : 0px 2px 2px rgba(0, 0, 0, 0.3);
	border-bottom    : solid 3px #142c5b;
}
.btn2:hover,
.btn2_gra:hover {
	background :  #00a381;
	color : #fff;
}

.btn_green2{
	display          : block;
	text-decoration  : none;
	text-align       : center;
	color            : #fff;
	font-weight      : bold;
	margin           : 5px auto;
	width            : 90%;
	padding          : 0.2em;
	border-radius    : 5px;
	border           : solid 2px #0c9e3e;
	background       : #0c9e3e;
}

.btn_green3{
	display          : inline-block;
	text-decoration  : none;
	text-align       : center;
	color            : #fff;
	margin           : 1em auto;
	padding          : 0.2em 1em;
	border-radius    : 5px;
	border           : solid 2px #0c9e3e;
	background       : #0c9e3e;
}

.btn_green3:hover{
	color:#fff;
	background:#888;
	border    : solid 2px #888;
}


/* ===============================================
 *  リンクアイコン
 * =============================================== */
a::after{
	font-family:'FontAwesome';
	margin-left: .5em;
}
a[href$=".pdf"]::after{
	content:'\f1c1';
	color: red;
}
a[href$=".zip"]::after{
	content:'\f1c6';
}
a[href$=".doc"]::after,
a[href$=".docx"]::after{
	content:'\f1c2';
}
a[href$=".xls"]::after,
a[href$=".xlsx"]::after{
	content:'\f1c3';
}
a[href$=".ppt"]::after,
a[href$=".pptx"]::after{
	content:'\f1c4';
}
a[href$=".txt"]::after{
	content:'\f0f6';
}
a[href$=".png"]::after,
a[href$=".jpg"]::after,
a[href$=".gif"]::after{
	content:'\f03e';
}
/*
a[href^="mailto:"]::after{
	content:'\f003';
}
*/
a[href^="mailto:"]{
	 text-decoration: none;
}
/* ===============================================
 * ご予約電話番号
 * =============================================== */
.waku_tel {
	display         : inline-block;
	background      : #41bd9d;
	color           : #fff;
	text-decoration : none;
	font-size:1.2em;
	font-weight     : bold;
	padding         : 8px 16px 8px 16px;
	border: 2px solid #ddd;
	border-radius   : 4px;
	height          : 80px;
	line-height     : 30px;
	position        : relative;
}

/* ===============================================
 * 枠
 * =============================================== */
.waku01 {
	margin: 1em 0.5em;
	background: ＃F7F7F7;
	border:2px solid #41bd9d;
}
.waku01 .box-title {
	font-size: 1.2em;
	background: #41bd9d;
	padding: 4px;
	text-align: center;
	color: #FFF;
	font-weight: bold;
	letter-spacing: 0.05em;
}
.waku01 p {
	padding: 15px 20px;
	margin: 0;
}
.waku02 {
	margin: 0.5em 0;
	background: ＃F7F7F7;
	border:3px solid #c0504d;
	padding:10px 5px 0 5px;
	border-radius: 10px;/*角の丸み*/
}
.waku03 {
	margin: 0.5em 0;
	background: #E3F7F4;
	border:3px solid #394AA3;
	padding:10px 5px 0 5px;
	border-radius: 10px;/*角の丸み*/
}

/* ===============================================
 * カードレイアウト
 * =============================================== */
/* カードレイアウト部分をラッピングし、
 * Flexboxを指定"space-between"で各アイテムを均等に配置し、
 * 最初と最後のアイテムを端に寄せます。*/
.cardlayout-wrap {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: justify;
	margin: 0 auto;
	max-width: 1080px;
	width: 100%;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	justify-content: space-between;
}

/* リンクテキストの下線を非表示 */
a.card-link {
    text-decoration: none;
}

.card-list:hover{
	opacity: 0.7;
}


/* カードレイアウト内の画像を幅いっぱいに表示 */
.cardlayout-wrap img {
	display: block;
	max-width: 100%;
	height: auto;
}

.card-figure {
	margin: 0;
	padding: 0;
}

/* カードレイアウトのタイトル部分 */
.card-title {
	margin: 5px;
/*	margin: 0.6em 0 0;*/
	color: #333;
	text-align: center;
	font-size: 1.3em;
	font-weight:bold;
}

/* カードレイアウトの説明文部分 */
.card-text-tax {
	margin: 0;
	padding: 1em;
	color: #000;
	min-height:9em;
}

/* カードレイアウトを1カラムで配置 */
.card-list {
	margin: 0.5em auto;
	padding: 0;
	width: 96%;
	background: #ccfeb6;
/*	background: #f0f0f0;*/
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

/* 画面幅768px以上の場合カードレイアウトを2カラムで配置 */
@media all and (min-width: 442px) {
	.card-list {
		margin: 0.5em 0;
		width: calc(96% / 2); /* 96%幅を2で割るという指定 */
	}
}

/* 画面幅992px以上の場合カードレイアウトを3カラムで配置 */
@media all and (min-width: 880px) {
	.card-list {
		width: calc(96% / 3); /* 96%幅を3で割るという指定 */
	}
	/* 最後の行が3列より少ない場合左寄せにレイアウトさせる */
	.cardlayout-wrap::after{
		content: "";
		display: block;
		width: calc(96% / 3);
	}
}

/* ===============================================
 * Listタグ
 * =============================================== */
.list-pref li,
.list-arr li{
	list-style: none;
}
.list-pref li:before {
	content:'● ';
	color: #e40017;
}
.list-arr li:before {
	content:'? ';
	color: #009fe7;
}
.listmark-num > li{
list-style:  none;      /* デフォルトのアイコンを消す */
	padding-left: 40px;
	padding-top: 5px;
	padding-bottom: 5px;
	background:#ccfeb6;
}
.listmark-num > li:before {
	content: counter(my-counter); /* カウンター「my-counter」を呼び出す */
	counter-increment: my-counter; /* この要素が現れる度にカウンター「my-counter」が加算されていく、 */
	background-color: #E3F7F4;
	display: block;
	float: left;
	margin-top:3px;
	color: #2F3D99;
	font-size: 65%;
	font-weight: bold;
	letter-spacing: -0.5pt;
	text-indent: -0.5pt;
	line-height: 20px; /* 行間を高さと同じにすることで、上下中央に配置させる */
	margin-left: -30px;
	text-align: center;
	height: 20px;
	width: 20px; /* width、heightを同じ数値にして、正方形にする */
	border-radius: 50%; /* 要素を丸にする（正方形なので、正円となる） */
}
.listmark-num > li:after{
	content: "";
	display: block;
	height: 0;
	font-size: 0;
	clear: both;
}
.listmark-num{
	counter-reset: my-counter; /* ol本体でカウンターをリセット – このクラスが呼び出される度に1からカウントされるようにする */
	padding: 0;
}

/* ===============================================
 *  見出し
 * =============================================== */
/* Hタグ
 * ---------------------------*/
h2{
	margin-top:12px;
	padding : 20px 14px;
	font-size:1.8em;
	color:#fff;
	background : #41bd9d;
}
h3{
	font-size:1.4em;
	padding: 0.25em 0.5em;/*上下 左右の余白*/
	color: #494949;/*文字色*/
	background: transparent;/*背景透明に*/
	border-left: solid 5px #394AA3;/*左線*/
	margin-bottom:12px;
}


/* 文字の右に罫線
 * ---------------------------*/
.migisen {
	margin:20px 0;
	display:flex;
	align-items:center;
}
.migisen:after {
	margin-left:5px;
	border-top:1px solid #ccc;
	content:"";
	flex-grow:1;
}

.ttl {
	position    : relative;
	margin      : 20px 0;
	padding     : .5em;
	font-size   : 1.6em;
	font-weight : bold;
	text-align  : center;
}
.ttl:before,
.ttl:after {
	position   : absolute;
	left       : 0;
	content    : '';
	width      : 100%;
	height     : 8px;
	box-sizing : border-box;
}
.ttl:before {
	top           : 0;
	border-top    : 4px solid #394AA3;
	border-bottom : 1px solid #eee;
}
.ttl:after {
	bottom        : 0;
	border-top    : 1px solid #394AA3;
	border-bottom : 4px solid #394AA3;
}

/* -----------------------------------------------
 *  文字 指定
 * ----------------------------------------------- */
/* 文字　中央
 * --------------------------- */
.txt-center{
	text-align:center;
	margin-left : auto;
	margin-right: auto;
}

/* 文字　右寄せ
 * --------------------------- */
.txt-right{
	text-align  : right;
}

/* 文字　小さく
 * --------------------------- */
.font-mini{
	font-size:.7em;
}

/* 文字　太く
 * --------------------------- */
.strong{
	font-weight:bold;
	font-weight:700;
}

/* 赤
 * --------------------------- */
.font-red{
	color:#c5001e;
}
/* 紫
 * --------------------------- */
.font-murasaki{
	color:#6e2686;
}

/* 青
 * --------------------------- */
.font-blue{
	color:#009fe6;
}

/* 緑
 * --------------------------- */
.font-green{
	color:#64aa44;
}

/* オレンジ
 * --------------------------- */
.font-orange{
	color:#dd960f;
}

.ttl_tel{
	font-size:1.8em;
	font-weight:bold;
	line-height:1;
}

/* -----------------------------------------------
 *  背景色
 * ----------------------------------------------- */
/* 赤
 * --------------------------- */
.bg-red{
	background:#c5001e;
}

/* 紫
 * --------------------------- */
.bg-murasaki{
	background:#6e2686!important;
}
.bg-murasaki2{
	background:#e0dfeb!important;
}

/* 黄
 * --------------------------- */
.bg-yellow{
	background:#c5001e;
}

/* 青
 * --------------------------- */
.bg-blue{
	background:#009fe6;
}

/* 緑
 * --------------------------- */
.bg-green{
	background:#64aa44;
}

/* オレンジ
 * --------------------------- */
.bg-orange{
	background:#dd960f;
}

/* -----------------------------------------------
 * 背景色/文字色 
 * ----------------------------------------------- */

/* 背景 オレンジ / 文字 白
 * --------------------------- */
.bg_orange{
	background : #f6a743;
	color      : #fff;
}

/* 背景 青 / 文字 白
 * --------------------------- */
.bg_blue{
	background:#009cd4;
	color      : #fff;
}

/* 背景 緑 / 文字 白
 * --------------------------- */
.bg_green{ 
	background :#ccfeb6;
	color      : #000!important;
}

/* 背景 紫 / 文字 白
 * --------------------------- */
.bg_murasaki{
	background :#FFCCFF!important;
	color      : #000!important;
}

/* 背景 黄 / 文字 白
 * --------------------------- */
.bg_yellow{
	background :#FFFF66!important;
	color      : #000!important;
}


/* プラチナプラン
 * --------------------------- */
.bg_mediumorchid{
	background :#ba55d3!important;
	color      : #000!important;
}

/* ゴールドプラン
 * --------------------------- */
.bg_gold{
	background : #ffd700!important;
	color      : #000!important;
}

/* シルバープラン
 * --------------------------- */
.bg_limegreen{
	background : #32cd32!important;
	color      : #000!important;
}


/* -----------------------------------------------
 *  ボーダー色
 * ----------------------------------------------- */
/* 赤
 * --------------------------- */
.border-red{
	border-color:#c5001e;
}

/* 紫
 * --------------------------- */
.border-murasaki{
	border-color:#6e2686;
}

/* 青
 * --------------------------- */
.border-blue{
	border-color:#009fe6;
}

/* 緑
 * --------------------------- */
.border-green{
	border-color:#64aa44;
}

/* オレンジ
 * --------------------------- */
.border-orange{
	border-color:#dd960f;
}

/* -----------------------------------------------
 * 画像の位置
 * ----------------------------------------------- */
/* 画像　左寄せ
 * --------------------------- */
.img_left{
	float  : left;
	margin : 5px 20px 10px 0 ;
}

/* 文字の下にマーカ線
 * --------------------------- */
.kasen{
	background:linear-gradient(transparent 60%, #6cf 60%);
}

/* ===============================================
 * パソコンやスマホで見たときの表示/非表示
 * =============================================== */

/* -----------------------------------------------
 * パソコンで見たときは"pc"のclassがついた画像が表示される
 * ----------------------------------------------- */
.pc { display: block !important; }
.sp { display: none !important; }
/* -----------------------------------------------
 * スマートフォンで見たときは"sp"のclassがついた画像が表示される
 * ----------------------------------------------- */
@media only screen and (max-width: 550px) {
	.pc { display: none !important; }
	.sp { display: block !important; }
}

.img_print{
	display:none;
}

/* -----------------------------------------------
 * table
 * ----------------------------------------------- */
.js-scrollable {
	width: 100%;
	overflow-x: scroll;
	width: 100%;
}
.js-scrollable table {
	width: 992px;
	background:#eee;
}
.js-scrollable th {
	font-size: 16px;
	font-weight: bold;
	padding: 10px;
/*	background:#41bd9d;*/
	border:2px solid #fff;
	color:#fff;
}
.js-scrollable td {
	font-size: 14px;
	padding: 10px;
	line-height: 1.4;
	border:2px solid #fff;
}


.js-scrollable2 {
	width: 100%;
	overflow-x: scroll;
	width: 100%;
}
.js-scrollable2 table {
	width: 420px;
	background:#eee;
}
.js-scrollable2 th {
	font-size: 16px;
	font-weight: bold;
	padding: 10px;
	background:#41bd9d;
	border:2px solid #fff;
	color:#fff;
}
.js-scrollable2 td {
	font-size: 14px;
	padding: 10px;
	line-height: 1.4;
	border:2px solid #fff;
}

/* -----------------------------------------------
 * フロー図
 * ----------------------------------------------- */
ul.flow_list{
	list-style: none;
	padding: 0;
	margin: 0;
}
ul.flow_list li{
	list-style: none;
	background:#F7F7F7;
	border: 5px solid #eee;
	border-radius: 10px;
	margin-bottom: 35px;
	padding: 8px 20px;
	position: relative;
}
ul.flow_list li::after{bottom: -34px;
	color:#eee;
	content: "▼";
	font-size: 26px !important;
	left: 48%;
	position: absolute;
}
ul.flow_list li.last::after{/*最後の▼を外す*/
	content: "";
}
/*1文字めを大きく*/
/*
ul.flow_list li h3::first-letter{
	font-family: garamond,times;
	font-size: 2rem;
	font-style: italic;
	letter-spacing: 0.15em;
}
*/
ul.flow_list li h3{
/*	font-size:1.4em;*/
	padding: 0.25em 0em;/*上下 左右の余白*/
/*	color: #494949;/*文字色*/
/*	background: transparent;/*背景透明に*/
	border-left: 0px;/*左線*/
	margin-bottom:0;
}


/* -----------------------------------------------
 * Q&A
 * ----------------------------------------------- */
.cp_qa *, .cp_qa *:after, .cp_qa *:before {
	font-family: 'FontAwesome', sans-serif;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_qa dt,.cp_qa dd {
	position: relative;
	padding: 0.5em;
	box-shadow: 0px 1px 1px rgba(0,0,0,0.2);
	border-radius: 0.3em;
}
.cp_qa dt {
	margin: 0 0 1em 3em;
	background: #ffe0b2;
}
.cp_qa dd {
	margin: 0 0 3em 3em;
	background: #b2ebf2;
}
/* 吹き出し?? */
.cp_qa dt::before,.cp_qa dd::before{
	z-index:1;
	position: absolute;
	z-index: 99;
	top: 0.5em;
	display: inline-block;
	width: 0;
	height: 0;
	content: '';
	border-style: solid;
}
/* 質問吹き出し?? */
.cp_qa dt::before {
	left: -0.5em;
	border-width: 5px 8.7px 5px 0;
	border-color: transparent #ffe0b2 transparent transparent;
}
/* 答え吹き出し?? */
.cp_qa dd::before {
	left: -0.5em;
	border-width: 5px 8.7px 5px 0;
	border-color: transparent #b2ebf2 transparent transparent;
}
/* QAアイコン */
.cp_qa dt::after,.cp_qa dd::after {
	font-size: 1.2em;
	position: absolute;
	top: 0;
	color: #ffffff;
	border-radius: 50%;
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	line-height: 1.2em;
}
/* Qアイコン */
.cp_qa dt::after {
	left: -2.5em;
	margin: 0 0.5em 0 0;
	padding: 0.2em 0.4em;
	content: 'Q';
	background: #f57c00;
}
/* Aアイコン */
.cp_qa dd::after {
	left: -2.5em;
	margin: 0 0.5em 0 0;
	padding: 0.2em 0.4em;
	content: 'A';
	background: #0097a7;
}


/* ===============================================
 * 印刷用CSSの定義を指定する
 * =============================================== */
#printer{
	display: none;
}

.center_slide{
	z-index:5;
}


@media print{
	body{
		overflow-y : visible;
		overflow-x : visible;
	}
	.inner,#contents,#main{
		width:100%;
	}
	.img_print{
		z-index:100;
	}

	h1 img {
		width:700px;
	}
	.img_print img{
		position: absolute;
	}
	#printer{
		display: block;width:100%;
	}
	.totop{
		display : none!important;
	}
	header,.keyvisual,#contents,footer,flex_container{	/* IE6,7 以外 */
		display: table;
		width:1080px;
	}
	.fb-root{
		width:33%!important;
	}
	.img_info img{
		position: relative;
		width:100%;
	}
	.card-list{
		width:320px;
	}
}