@charset "UTF-8";

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");
/*================================================
 *  CSSリセット
 ================================================*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

/*================================================
 *  一般・共通設定
 ================================================*/

html,body {
	height: 100%;
	font-size: 14px;	/*基準となるフォントサイズ。*/
}
	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {
	html, body {
		font-size: 16px;	/*基準となるフォントサイズ。*/
	}
	}/*追加指定ここまで*/

body {
    font-family: "YuGothic", "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium",
                 "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", 
                 "Meiryo", "メイリオ",
                 "sans-serif"; 
    -webkit-text-size-adjust: none;
    background: transparent;
    color: #333;
    line-height: 1.6; }

header {box-sizing:border-box; position:relative; width:100%; background: #fff;}

.inner { position:relative; width:980px; margin:0 auto; }

nav {   width:100%;
	background:#fff;
	box-shadow:0 1px 2px #d0d8dc;
}

nav:after { content:'';
	display:block;
	clear:both; }

#contents { overflow:hidden;
	width:980px;
	margin:20px auto;
	background:#fff; }

#main { box-sizing:border-box;
	overflow:hidden;
	padding: 5px 10px;	/*main内の余白。上下、左右への順番。*/
	float:right;
	width:68%; }


#sub {  box-sizing:border-box;
	overflow:hidden;
	float:left;
	width:28%; }

footer { box-sizing:border-box;
	width:100%;
	margin:0 auto; }

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

/* 画像の左寄せ */
img.picture {
    margin: 0 10px 10px 0;
    float: left;
}

/* 画像の右寄せ */
img.picture_r {
    margin: 0 5px 10px 10px;
    float: right;
}

/* 指定要素に対する回り込み解除 */
br.clear { /* br .clear となっていたので修正しました */
    display: block;
    clear: both;
}

/*---画像やFlash等のボーダー枠 余白無し---*/
.img_box{   
    margin: 8px 10px 15px 2px; /*上右下左*/
    padding: 0 10px 0 0;
    text-align: left;
    border-width: 1px;
    border-style: solid;
    border-color: #eee #444 #444 #eee;
    line-height: 1.5;
}

/*==============================================================
　各ページの画像指定
================================================================*/

/*-- トップページの４つの特長画像指定 --*/
.tokucho_img {   
   width:160px; 
   height:140px;	/*画像の表示サイズを指定*/
   margin: 0 10px 10px 0;
   float: left;        /* 画像の左寄せ */
}

/*-- アクセス写真の画像指定 --*/
.access_img {    
   width:290px; 	/*画像の表示サイズを指定*/
   height:217px;
   margin:0px 5px 10px 10px;	/*マージン*/
   border-radius: 4px;
   float:right;			/*画像を右寄せにする*/
}

img.center {display: block; /* 画像をブロック要素にする */margin: 0 auto; /* 左右のマージンを自動にして中央揃えにする */}

/*----table全般の設定----*/
table {
border-collapse:collapse;}	/*セル同士の間に隙間を空けない*/

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

/* ================================================
    リンクテキスト全般の設定
=================================================== */
a {
	color:#333;
	text-decoration:underline;
	transition: 0.3s;	/*hoverまでにかける時間。0.3秒。*/
}
a:hover {
	filter: brightness(1.1);	/*少しだけ明るくする*/
	color:#999;
	text-decoration:none;
}

/* ================================================
    h2,h3,h4,h5,h6
=================================================== */
h2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 1rem;		/*h2の外側にとるスペース。上、左右、下への順番。*/
	font-size: 1.3em;		/*文字サイズ*/
	font-weight: bold;
	position: relative;		/*ulineを配置する為に必要な指定*/
	font-weight: normal;	/*デフォルトの太字を標準に*/
	border-bottom: 2px solid #ddd;	/*薄い色の線の幅、線種、色*/
}

/*  h2 アクセントラインの設定
------------------------------ */
h2 .uline {
	display: inline-block;position: relative;
	padding: 5px 1rem;	/*h2内の余白。上下、左右への順番。*/
	bottom: -2px;		/*濃い線を薄い線に重ねる為の指定。枠線の幅と合わせます。*/
	border-bottom: 2px solid #337db8;	/*濃い色の線の幅、線種、色*/
}

h3 {
  background: url(../img/icon_midashi01.gif) no-repeat;
  /* アイコンを縦方向に5px下に移動 */
  background-position: left 5px; /* または 0 5px; */
  font-weight: bold;
  color: #000;
  padding-left: 28px;
  font-style: normal;
  font-size: 20px;
  margin-bottom: 15px; /* ここに余白の値を設定します */
}

h4 {
	margin-bottom: 0.25em;
	padding:8px;
	color: #fff;			/*文字色*/
	font-weight:bold;
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くとる*/
	background: #4d88ff;	/*背景色*/
}

h5 {
	margin: 0 0 1rem;				/*上、左右、下への順番。*/
	letter-spacing: 0.1em;			/*文字間隔を少しだけ広くとる*/
	font-size:16px;
	border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/
}

h5::before {
	content: "";
	border-left: 3px solid #4d88ff;		/*左側のアクセントラインの幅、線種、色*/
	padding-right: calc(1rem - 3px);	/*右側への余白。上の3pxの線幅を変更する場合は、ここの3pxも合わせて変更して下さい*/
}

h6 {
	margin-bottom:0.25em;
	font-size:16px;
	color:#1e2654;
	border-bottom:3px solid #337db8;
}

/*================================================
 * ヘッダー
 ================================================*/

/* headerの基本スタイル（PC向けを含む） */
header { padding:20px 10px; background: rgba(255,255,255,0.9); }
#logo { margin:0; width:470px; }
#logo-s { width:240px; clamp(13px, 2.083vw, 30px); }
#tel { position:absolute; top:14px; right:10px; margin:0; width:280px; }

/* .summary のPC向け配置 */
.summary { position:absolute; text-align : center; top:0; right:10px; margin:0; }

/*================================================
 *  PCディスプレイ　画面表示切り替え表示
 ================================================*/
.pc {display: block;}
.sp {display: none; }

/*================================================
 *  header下、トップ画像
 ================================================*/

#mainimg{
	padding-top: 5px;
	overflow: hidden;
	position: relative;
        text-align : center;
}

#mainimg img {
    margin: 0 auto; /* センター */
}

/* =========================================
   その他の装飾
============================================*/

p { margin:0 0 1em 0; }
em { font-weight:bold; color:#000; }
strong { font-weight:bold; color:#000; }
pre { margin:1em 0; padding:1em; }
blockquote { margin-bottom:1em; padding:1em; 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:0.5em; }
dt { margin-bottom:0.5em; border-bottom:1px dotted #ddd; }
dd { margin-bottom:1em; }
 /* ----赤字強調 ---*/
look{font-style: normal; color : red; font-weight: bold; background-color: #ffffa4; }
.top { margin-top: 40px; }
.bottom { margin-bottom: 43px; }
.wide { line-height: 6.0; }

/*================================================
 *  メニュー (nav)ナビゲーション設定
 ================================================*/

@media print, screen and (min-width:768px) {
nav {background:#4d88ff; border-bottom:2px solid #337db8; box-shadow:0 1px 3px #999; z-index:3; 
}

/* 共通 */
nav ul { margin:0; padding:0; font-family:"Font Awesome 5 Free";
}
nav ul li { position:relative; margin:0; padding:0; list-style:none; 
}
nav ul li a { display:block; margin:0; padding:16px 0; background:#4d88ff; color:#fff; font-size:16px; font-weight:bold; line-height:1; text-decoration:none; 
}
nav ul li:hover > a { color:#fff; background:#709fff; 
}

/* 1段目 
------------------------------*/
nav ul.gnav > li { position:relative; width:20%;/*defalt 17% */ float:left; margin:0; padding:0; text-align:center; list-style:none;
}
nav ul.gnav > li:first-child { width:20%;  /*defalt 15% */
}
nav ul.gnav > li.subnav a { padding-right:10px;
}

nav ul.gnav > li.subnav > a:before {	content: "\f078";	/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
	font-weight: bold;	/*この手の設定がないとアイコンが出ない場合があります*/
	margin-right: 1em;	/*アイコンとテキストとの間に空けるスペース*/
}

/* 2段目 
-----------------------*/
nav ul li ul { position:absolute; z-index:3; top:100%; left:0; width:100%; margin:0; padding:0;
}
nav ul li ul li { overflow:hidden; width:100%; height:0; color:#fff; transition:.3s;
}
nav ul li ul li a { padding:13px 15px; text-align:left; background: rgba(0,0,0,0.7); font-weight:normal;
}
nav ul li:hover > ul > li { overflow:visible; height:40px; border-bottom:1px solid #fff;
}
nav ul li:hover ul li:last-child { border-bottom:none;
}
nav ul.gnav > 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.gnav > 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:hover > ul > li { border-bottom:1px solid #fff;
}
nav ul.gnav > li:last-child > ul li ul { left:-100%;
}
nav ul li ul li ul li a { background: rgba(0,0,0,0.7);
}
nav ul li ul li ul li a:hover { background: #709fff;
}
.gnav { display:block !important;
}
#spMenu { display:none;
}
.fixed { position:fixed; top:0; left:0;
}
}  /* --@media print, screen and (min-width:768px) --*/

/*================================================
 *  トピックパス（パンくずリスト）
 ================================================*/
#topicpath {
	font-size:12px;
	margin-bottom:20px;
	padding:2px;
}
#topicpath a{
	text-decoration: none;
}

/*================================================
　テーブル contact
==================================================*/
table.contact{
	border-top: 1px solid #ccc;	/*テーブルの一番上の線。幅、線種、色*/
	table-layout: fixed;
	width: 100%;
	margin: 0 auto 30px;		/*最後の「30px」がテーブルの下に空けるスペースです*/
	background: rgba(255,255,255,0.5);	/*背景色。255,255,255は白のことで0.5は色が50%出た状態のこと。*/
}

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

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

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

@media screen and (max-width:767px) {

/*th（左側）、td（右側）の共通設定*/
table.contact td,table.contact th{
	width:auto;
	display:block;
        text-align: left;
	font-size: 16px;
}
}

/*===================================================================
　テーブル faq
=====================================================================*/
table.faq {
   width:100%;				/*テーブル全体の幅*/
}
table.faq th {
   width: 65px;
   height: 30px;				/*見出しセルの幅*/
   padding: 5px;				/*パディング*/
   text-align: center;				/*センター揃えにする*/
   white-space:nowrap;				/*セル内の改行を禁止する*/
   background-color:#337db8;			/*セルの背景色*/
   color: #fff;		                        /*フォントカラー*/
}
table.faq td {
   width: auto;
   height: 30px;				/*見出しセルの幅*/
   padding: 5px 5px 5px 18px;				/*パディング*/
   background-color: #efefef;			/*セルの背景色*/
}


/*================================================
 * ta twocolの案内テーブル
 ================================================*/

.ta {	border-collapse:collapse;
	width:100%;
	margin-bottom:1em;
	border-top:1px solid #ddd;
	background:#fff;
}
.ta th {
	padding:10px;
	text-align:center;
	vertical-align:middle;
	border-bottom:1px solid #ddd;
	background:#fcfcfc;
}
.ta td {
	padding:10px;
	text-align:left;
	border-bottom:1px solid #ddd;
}


/*================================================
 * ta1 テーブル sampleに記載
 ================================================*/

/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	font-weight: bold;		/*太字に*/
	padding: 10px 5px;		/*上下、左右へのボックス内の余白。基本的に数行下の「.ta1 th, .ta1 td」のpaddingと揃えておけばOKです。*/
	background: #4d88ff;		/*背景色*/
	margin-bottom: 1em;	/*下に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
	color: #fff;			/*文字色*/
}

/*ta1テーブルブロック設定*/
.ta1 {
	border-top: 1px solid #ddd;	/*テーブルの一番上の線。幅、線種、色*/
	width: 100%;
	margin: 0 auto 2em;		/*最後の「2em」がテーブルの下に空けるスペースです*/
}

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

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

/*th（左側）のみの設定*/
.ta1 th {
	width: 30%;			/*幅*/
	text-align: center;	/*左よせにする*/
	background: #fcfcfc;	/*背景色*/
}


/*================================================
 * ta2 footerの「営業時間の案内」
 ================================================*/

.ta2 {
	width: 100%;
	border-bottom: 1px solid #fff;	/*テーブルの下の枠線の幅、線種、色*/
}
/*td,th共通*/
.ta2 td, .ta2 th {
	border-top: 1px solid #fff;	/*td,thの上側の線の幅、線種、色*/
	padding: 5px 10px;	/*ボックス内の余白*/
	text-align: center;
}
/*th見出し*/
.ta2 th {
	background: rgba(0,0,0,0.2);	/*背景色*/
}


/*================================================
 * ta3 footermenu
 ================================================*/

.ta3 {
	width: 99%;
}
/*td,th共通*/
.ta3 td, .ta3 th {
	padding: 5px;	/*ボックス内の余白*/
}
/*th見出し*/
.ta3 th {
	background: rgba(0,0,0,0.2);	/*背景色*/
	border: 1px solid #fff;	/*テーブルの下の枠線の幅、線種、色*/
	border-top: none;	/*テーブルの下の枠線の幅、線種、色*/
	border-right: none;	/*テーブルの下の枠線の幅、線種、色*/
}
.ta3 td { padding: 8px 0 0 10px;
}

/*===========================================
 * iframe内の画像枠指定 
=============================================*/

.iframeWrap {
   position: relative;
   width: 96%;
   padding-top: 56.25%;
     height: 0;
     overflow: hidden;
}

.iframeWrap iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100% !important;
   height: 100% !important;
}

/*================================================
 *  サブコンテンツ
 ================================================*/
.submenu li {
	margin:0;
	padding:0 0 0 5px;
	list-style:none;
}
.submenu li a:before {
	content:"\0bb";  /* 0025b6 0025a0 03e*/
	color:#337db8;
}
.submenu li a {
	display:block;
	padding:10px 2px;
	color:#000;
	border-bottom:1px dotted #ddd;
	text-decoration:none;
}
.submenu li a:hover {
	filter: brightness(1.1);	/*少しだけ明るくする*/
	color:#999;
}

.bnr {
	overflow:hidden;
}
.bnr ul {
	overflow:hidden;
}
.bnr li {
	margin:0 0 10px 0;
	padding:0;
	list-style:none;
}
.bnr li a:hover {
	opacity:0.8;
	filter:sepia(opacity=80);
}
.bnr img {
	width:100%;
}



/*================================================
 *  フッター
 ================================================*/
footer {
	position: relative;
	clear: both;
	line-height: 1.5;	/*行間を基準より少し狭くする*/
	padding: 30px 0 0;	/*上、左右、下へのボックス内の余白*/
	font-size: 85%;		/*文字サイズ*/
	background: #709fff;	/*背景色*/
	color: #fff;	/*文字色*/
}
footer a {
	color: #fff;	/*リンクの文字色*/
}
footer a:hover {
	color: #fff;	/*マウスオン時のリンクの文字色*/
}

/*footer内の段落タグ*/
footer p {
	padding: 0;	/*上、左右、下への余白*/
}


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

.footermenu li {
	margin:0;
	padding:0;
	list-style:none;
}
.footermenu li a:before {
	content:"\0025b6";  /* 0025b6 0025a0 */
	color:#d6d6d6;
}


.copyright {
	clear:both;
	padding:10px 0;
	font-size:11px;
	text-align:center;
	color:#eee;
	background:#3d6ccc;
}

/*================================================
 *  ページトップへの戻り
 ================================================*/
.totop {
	position:fixed;
	bottom:90px;
	right:15px;
}
.totop a {
	display:block;
	text-decoration:none;
}
.totop img {
	background: rgba(0,0,0,0.2);	/*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
}
.totop img:hover {
	background: rgba(0,0,0,0.1);	/*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
}

/*================================================
 *  ネットボタン
 ================================================*/
/* ボタンコンテナの固定表示と基本設定 */

.netButton {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 9999;
    text-align: center;
    background: rgba(255,255,255,0.9); /* 背景透過で視認性UP */
    backdrop-filter: blur(6px); /* iOSでのガラス風半透明 */
    -webkit-backdrop-filter: blur(6px); /* Safari対策 */
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1); /* 上端に軽い影で浮き感を演出 */
}

/* リンクのブロック化と背景色 */
.netButton a {
    display: block;
    text-decoration: none;
    background-color: rgba(204,204,204,0.1);
}

/* ボタンの横並び設定 */
.net_banner {
    display: flex;
    justify-content: space-between;
}

/* 各ボタン（リンク）の幅設定 */
.net_banner a {
    width: 50%;
    display: block;
    padding: 0;
    text-decoration: none;
    background-color: rgba(204,204,204,0.1);
    box-sizing: border-box; /* パディングを含めて幅を計算 */
    transition: background 0.2s ease;
}

.net_banner a:active {
    background: rgba(0,0,0,0.08);
}

/* 画像のレスポンシブ設定 */
.net_banner picture,
.net_banner a img {
    max-width: 100%; /* 親要素の幅に合わせて画像を縮小・拡大 */
    height: auto;    /* アスペクト比を維持するために必須 */
    display: block;  /* 画像の下に発生しがちな余白をなくす */
}

/* ★重要★ メインコンテンツの最下部にパディングを追加 */
/* ボタンの高さが73pxなので、少なくとも73px以上のパディングを設定します */
body {
    padding-bottom: 80px; /* または、メインコンテンツを囲む要素に設定 */
}

/*================================================
 *  クラス
 ================================================*/
.list {
	padding:0 0 0 0.5em;
}
.list li {
	margin:0;
	padding:0 0 0 25px;
	list-style:none;
	background:url(../img/check1.jpg) 0 5px no-repeat;
}

.info dt {
	border-bottom:none;
}
.info dd {
	padding-bottom:1em;
	border-bottom:1px solid #ddd;
}


.list2 {
	padding:0 0 0 0.5em;
}
.list2 li {
	margin:0;
	padding: 0 0 5px 25px;
	list-style:none;
	background:url(../img/check.gif) 0 5px no-repeat;
}


/* =========================================
   2カラムで並べる時用（スマートフォンでは1カラム)
============================================= */

.col_two_one {
	overflow:hidden;
}

.col_two_one ul {
	overflow:hidden;
	margin:2% -2% 0 0;
}
.col_two_one li {
	list-style:none;
	float:left;
	width:48%;
	margin:0 2% 2% 0;
}
.col_two_one li:nth-child(2n+1) {
	clear:both;
}
.col_two_one li img {
	width:100%;
	margin-bottom:2.5%;
}

/* =========================================
   2カラム（スマートフォンでは1カラム)
============================================= */
.twoCol {
	display: flex; /* これだけ残す */
	justify-content: space-between;
   	flex-wrap: wrap;
	position: relative;
	overflow: hidden;
	margin-bottom: 20px;
}

.twoCol .inner {
	position: relative;
	overflow:hidden;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: column;
	width: 48.98%;
	width: calc((470 / 980) *100%);
	height: auto;
	margin:0 0 20px 0;
}
.twoCol .inner h4 {
	width: 100%;
	margin-top: 0.5em;
	text-align: left;
}
.twoCol .inner p {
	width: 100%;
	margin-bottom: 0;
	text-align: justify;
}
.twoCol .inner > a {
	width: 100%;
	height: 100%;
}
.twoCol .inner .image {
	width: 100%;
	min-height: 0%;
}
.twoCol .inner img {
	width:auto;
}
.twoCol .inner .btn {
	margin-top: auto;
	padding-top: 20px;
}
.twoCol .inner .text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	text-align: center;
	vertical-align: middle;
	pointer-events: none;
}

@media screen and (max-width:767px) {
	.twoCol {
		display: block;
		margin-bottom:20px;
	}
	.twoCol .inner {
		width :100%;
		margin:0 0 10px 0;
	}
}/*--- .twoCol終了---*/


/* =======================================
   3カラム（スマートフォンでは1カラム)
========================================== */

.threeCol {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	position: relative;
	overflow: hidden;
	margin-bottom:20px;
}
.threeCol .inner {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: column;
	width: 32.14%;
	width: calc((315 / 980) *100%);
	margin: 0 0 20px 0;
}
.threeCol .inner h4 {
	width: 100%;
	margin-top: 0.5em;
	text-align: left;
}
.threeCol .inner p {
	width: 100%;
	margin-bottom: 0;
	text-align: justify;
}
.threeCol .inner > a {
	width: 100%;
	height: 100%;
}
.threeCol .inner .image {
	width: 100%;
	min-height: 0%;
}
.threeCol .inner img {
	width: 100%;
}
.threeCol .inner .btn {
	margin-top: auto;
	padding-top: 20px;
}
.threeCol .inner .text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	text-align: center;
	vertical-align: middle;
	pointer-events: none;
}

@media screen and (max-width:767px) {
	.threeCol {
		display: block;
		margin-bottom: 20px;
}
	.threeCol .inner {
		width : 100%;
		margin: 0 0 10px 0;
	}
}/*--- .threeCol終了---*/

/*================================================
 *  タブレット向けデザイン
 ================================================*/
/* スクロールバーを考慮して20px大きいサイズで切り替え */
@media screen and (max-width:979px) {
	.inner {
		width:100%;
	}

	#contents {
		box-sizing:border-box;
		width:100%;
		padding:0 10px;
	}

	footer {
		width:100%;
	}
}

/* --- レスポンシブ対応 --- */

/* 画面幅が799px以下の場合の調整 (タブレット・スマホ向け) */
@media screen and (max-width: 799px) {
    /* #tel を非表示にする */
    #tel {
        display: none;
    }
}

/*================================================
 * スマートフォン向けデザイン
 ================================================*/
@media screen and (max-width:767px) {
    .lock {position: fixed; z-index: -1; width: 100%; height: 100%; top: 0; right: 0; }
     header { z-index:2;  position:fixed; top:0; left:0; width:100%; padding:15px 10px;
}

    /* .summary のスマートフォン向け上書き */
    .summary { position:relative; top:auto; right:auto; margin-top:15px; }

    #main { float:none; width:100%; font-size: 1.2rem; }
    #sub { float:none; width:100%; }

/*================================================
 *  メニュー (nav)ナビゲーション設定
 ================================================*/
nav { background: #4d88ff;
}
nav ul { margin:0; padding:0; font-family: "Font Awesome 5 Free";
}
nav .inner > ul { z-index:2; overflow:auto; position:fixed; top:75px; right:5%; width:90%; height:calc(100% - 60px);
}
nav li { position:relative; width:100%; float:none; margin:0; text-align:left; list-style:none; border-bottom:1px solid #fff ;
}
nav li:first-child { border-top:0;
}
nav li:last-child { border-bottom:0;
}
nav li a { display:block; padding:10px 30px; color:#fff; text-decoration:none; background: #4d88ff; 
}
nav li a:hover { color: #fff; background:rgba(112,159,255,0.9);
}
/*二段目*/
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; background: rgba(0,0,0,0.7);
}
nav li li li a { padding:10px 30px 10px 70px;background: rgba(0,0,0,0.7);
}
.subnav > a:before { content: "\f055"; font-weight: bold; margin-right: 1em;
}
.subnav a:hover:after { background: rgba(0,0,0,0.9);
}
.active > a:before { margin-top:0;
}
.active > a:after { margin-top:5px;
}
.gnav { display:none;
}
#spMenu { display:block; z-index:2; position:fixed; top:10px; right:10px;
}
#spMenu:hover { cursor:pointer;
}

/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
#navBtn {
	position: fixed;
	z-index: 101;
	cursor: pointer;
	right: 5px;
	top: 12px; 
	width:45px;
	height:45px;
	border-radius:5%;
	display: flex;
	flex-direction: column;	
	justify-content: space-between;	
	background: #4d88ff;
	color: #fff;
}
#navBtnIcon {
	display:block;
	position:absolute;
	top:47%;
	left:25%; 
	width:24px; 
	height:3px;
	background:#fff;
	transition:0.3s;
}
	#navBtnIcon:before,
	#navBtnIcon:after {
		display:flex;
		content:'';
		position:absolute;
		top:40%;
		left:0%;
		width:24px; 
		height:3px;
		background:#fff;
		transition:0.3s;
	}
	#navBtnIcon:before {
		margin-top:-8px;
	}
	#navBtnIcon:after {
		margin-top:6px;
	}
	#navBtn .close {
		background:transparent;
	}
	#navBtn .close:before,
	#navBtn .close:after {
		margin-top:0;
	}
	#navBtn .close:before {
		transform:rotate(-45deg);
	}
	#navBtn .close:after {
		transform:rotate(-135deg);
	}

	.col_two_one ul {
		margin-right:0;
	}
	.col_two_one li {
		width:100%;
	}
	.col_two_one li:nth-child(2n+1) {
		clear:both;
	}
/*====================================================================
 テンプレートより小さくなった場合に適用
====================================================================== */
@media screen and (max-width:572px) {
   /*== *  ディスプレイ表示 ===*/
.pc{display:none; }
.sp{display:block; }
}