@charset "utf-8";


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

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

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


/* --------------------------------------------------
 レスポンシブ
--------------------------------------------------　*/
@media only screen and (min-width: 768px) {
	.pc { display: block !important; }
	.sp { display: none !important; }
}
@media only screen and (max-width: 767px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}

@media only screen and (max-width: 767px) {
    .spcenter { display: block !important;text-align: center; }
}



/*全体の設定
---------------------------------------------------------------------------*/
html,body {
	margin: 0;padding: 0;
	height: 100%;
	font-size: 16px;	/*基準となるフォントサイズ。下の方にある「画面幅900px以上」で基準を大きなサイズに再設定しています。*/
}

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

/*リセット*/
figure {margin: 0;}
dd {
	margin: 0;
	padding-left: 20px;
}
nav {margin: 0;padding: 0;}

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

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

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

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

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


@media only screen and (min-width: 768px) {
.videobox {
  width:700px;
  	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
}
@media only screen and (max-width: 767px) {
.videobox {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
}

.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}

.movies {
  width: 100%;
}

@media (min-width: 768px) {
  .movies {
    width: calc(50% - 16.18px / 2);
  }
}

.maru01{
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: 16px;
	text-align: left;
}

.textred{color: #FF1F65;}
.textredl{color: #FF1F65;text-decoration: underline;}
.textredb{color: #FF1F65;font-weight: bold;}
.textredbl{color: #FF1F65;font-weight: bold;text-decoration: underline;}

.textblue{color: #0065D0;}
.textbluel{color: #0065D0;text-decoration: underline;}
.textblueb{color: #0065D0;font-weight: bold;}
.textbluebl{color: #0065D0;font-weight: bold;text-decoration: underline;}

.textgreen{color: #009F2A;}
.textgreenl{color: #009F2A;text-decoration: underline;}
.textgreenb{color: #009F2A;font-weight: bold;}
.textgreenbl{color: #009F2A;font-weight: bold;text-decoration: underline;}

.textorenj{color:#FF5F00;}
.textorenjl{color: #FF5F00;text-decoration: underline;}
.textorenjb{color: #FF5F00;font-weight: bold;}
.textorenjbl{color: #FF5F00;font-weight: bold;text-decoration: underline;}

.textgray{color: #6E6E6E;}
.textgrayl{color: #6E6E6E;text-decoration: underline;}
.textgrayb{color: #6E6E6E;font-weight: bold;}
.textgraybl{color: #6E6E6E;font-weight: bold;text-decoration: underline;}

.textline01{border-bottom: 2px dotted #E8191D;}
.textline01b{border-bottom: 3px dotted #E8191D;font-weight: bold;}

.redbox{
	border: 2px double #FF467F;
	padding: 7px;
	margin-bottom: 5px 0 8px 0;
	line-height: 1.5em;
	color: #68053A;
	width: 96%;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFF1F5;
}

.yorisotta p{
	width: 100%;
}

span.del {
	color: #ABABAB;
	text-decoration-line: line-through;
	text-decoration-style: double;/*-----solid;-----*/
	text-decoration-color: #FD7334;
}
.ttbox{
	width: 96%;
	margin: 0 auto;
	padding-bottom: 10px;
}

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


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

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


/*container（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
	max-width: 1500px;				/*最大幅。これ以上広がらないように。後半の大きな端末用の「#menubar > ul」と数字を揃える。*/
	margin: 0 auto;
	height: 100%;
	display: flex;					/*flexボックスを使う指定*/
	flex-direction: column;			/*子要素を縦並びにする*/
	justify-content: space-between;	/*並びかたの種類の指定*/
}


/*header（ロゴなどが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/

header {
	display: flex;					/*flexボックスを使う指定*/
	justify-content: space-between;	/*並びかたの種類の指定*/
/*--	align-items: center;			/*垂直揃えの指定。上下中央に配置されるように。*/
	flex: 0 0 auto;
	height:125px; /*-----------------------------------------------------------------------------115px;--*/				/*ヘッダーの高さ*/
	padding: 5px;					/*---------------20px;----------ヘッダー内の余白*/
	position: fixed;/*--------------------*/
	z-index: 8000;/*--------------------*/
	background-color: #fff;
	width: 100%;
	max-width: 1500px;	/*-----------------------------------------------------------------------------------------------------------*/
}

@media screen and (min-width:768px) {
header {
	height: 95px;
	text-align: left;
	padding:0 auto 0 0;
	margin:0 auto 0 0;
	}
}

/*ロゴ画像*/
header #logo {
	line-height: 0;
	margin: 0;
	width: 300px;		/*ロゴ画像の幅*/
}
@media screen and (max-width:768px) {
header #logo {
	position: relative;
	}
#logo .sp{
	text-align: left;
	margin-right: auto;
	}	
}
margin-right: auto;
/*電話番号ブロック*/
header address {
	font-style: normal;	/*addressがデフォルトで斜体になってしまうのを標準にする*/
/*--	margin-right: 100px;--*//*--80px;	/*右側に空けるスペース。ハンバーガーメニューに重ならないようにする為です。*/
}

address .pc{
	max-width: 1500px;
	text-align: right;
	padding-right: 0;
}
address .sp{
	padding-top: 5px;
	margin:0 auto;
	width:350px;
	
}


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



/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーブロック*/
#menubar_hdr {
	display: block;
	position: fixed;
	z-index: 10000;/*-------------------------100;---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
	top: 10px;		/*上からの配置場所指定*/
	right: 10px;	/*右からの配置場所指定*/
	width: 40px;	/*幅*/
	height: 40px;	/*高さ*/
	cursor: pointer;
	background: #713a9c/*--rgba(77,175,255,1.0)--*/ url(../images/ham4.png) no-repeat center top/50px;/*背景色、ハンバーガメニュー画像の読み込み、50pxは幅の指定77, 175, 255, 1*/
}
/*×印が出ている状態の設定。*/
#menubar_hdr.ham {
	background: #713a9c url(../images/ham4.png) no-repeat center bottom/50px;
}


/*メニュー設定（全端末サイズ共通の設定）
---------------------------------------------------------------------------*/
#menubar ul {
padding-top: 111px;/*---------96px;----100px----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
	list-style: none;margin: 0;padding: 0;
	background: #1d95f1;	/*背景色。諸事情あって、下のbackgroundのグラデーションのどちらかの色を抜いて下さい。*/
}

@media screen and (min-width:768px) {
#menubar ul {
	padding-top: 150px;
	list-style: none;margin: 0;padding: 0;
	background: #1d95f1;	/*背景色。諸事情あって、下のbackgroundのグラデーションのどちらかの色を抜いて下さい。*/
	}
}

/*メニュー1個あたりの設定*/
#menubar ul a {
	display: block;text-decoration: none;
	background: linear-gradient(#54adf1, #1d95f1);/*背景グラデーション*/
	color: #fff;		/*文字色*/
	padding: 10px 10px;	/*-------15px 20px;---------上下、左右へのメニュー内の余白*/
}


/*マウスオン時のメニュー色*/
#menubar > ul > li > a:hover {
	filter: brightness(1.2);	/*少しだけ明るくする*/
}

/*ドロップダウンメニューのリンクタグ*/
#menubar .ddmenu {
	cursor: default;	/*リンク要素のカーソルを矢印に変更しておく*/
}

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


/*メニューの設定
---------------------------------------------------------------------------*/
#menubar {height: 0px;overflow: hidden;}

/*小さな端末用のメニューブロック*/
#menubar.db {
	position: fixed;
	overflow: auto;
	z-index: 99;
	left: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding: 125px 20px; /*---------110px 20px; /*--------------90px 20px;----------------------------------------------------------------------------------------------------------------------------------------------------------------------------上下、左右へのメニューブロック内の余白*/
	background: rgba(0,0,0,0.8);	/*背景色。0,0,0は黒の事で0.8は色が80%出た状態。*/
}


/*ドロップダウンメニュー
---------------------------------------------------------------------------*/
#menubar .ddmenu_parent ul {display: none;}

/*ドロップダウンメニュー1個あたりの設定*/
#menubar .ddmenu_parent ul a {
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
}

/*マウスオン時*/
#menubar .ddmenu_parent ul a:hover {
	background: #fafafa;	/*背景色*/
	color: #54adf1;			/*文字色*/
}



/*----------------------------------------------------------------------------------------------- コンテンツ TT---------------------*/
@media screen and (min-width:768px) {
#cont-tt-img{
	max-width: 1500px;
	width:100%;
}
}

@media screen and (max-width:767px) {
#cont-tt-img{
	position: relative;
	padding:110px 0 0 0;/*--124px 0 0 0--*/
	margin:100px 0 0 0;
}
}


/*---------------------------------------------------------------------------------------左右２つ分け　レスポンシブ------------------*/
@media screen and (min-width:768px) {
.two-col{
display: flex;
}
.two-col-left{
  width: 50%;
  height:120px;
  background-color: #e3e3e3;
  text-align: center;
}

.two-col-right{
  width: 50%;
  height:120px;
  background-color: #e3e3e3;
  text-align: center;
}
}

@media screen and (max-width:767px) {
.two-col-left{
  width: 100%;
  height:120px;
  background-color: #fff;
  text-align: center;
  margin-bottom: 10px;
}

.two-col-right{
  width: 100%;
  height:120px;
  background-color: #fff;
  text-align: center;
  margin-bottom: 10px;
}
}








/*contentsブロック
---------------------------------------------------------------------------*/
#contents {
width:90%;
margin: 0 auto;
	min-height: 0%;		/*IE対策*/
	flex: 1 0 auto;
}
@media screen and (max-width:767px) {
#contents {
width:98%;
	min-height: 0%;		/*IE対策*/
	flex: 1 0 auto;
	}
}

/*mainブロック設定
---------------------------------------------------------------------------*/
/*mainブロックの設定*/
main {
	display: block;	/*上、左右、下へのブロックの外側にとるスペース*/
	margin-top: 5px;
	margin-right: 3;
	margin-bottom: 100px;
	margin-left: 3;
}

/*mainブロック内のh2タグ*/
main h2 {
	border-bottom: 4px solid #eee;	/*下線の幅、線種、色。ベースカラーです。下のspanのborder-bottomと数字を合わせておく。*/
}

/*mainブロック内のh2タグに下線を引くための指定。*/
main h2 span.uline {
	display: inline-block;
	border-bottom: 4px solid #54adf1;	/*下線の幅、線種、色。アクセントカラーです。上のmain h2と数字を合わせておく。*/
	position: relative;
	bottom: -4px;		/*下からの配置場所指定。上にある２つのborder-bottomと重ねる為の指定なので、数字を合わせてから冒頭にマイナスをつけて下さい。*/
	padding: 0 20px;	/*上下、左右への余白。テキストの両脇に少し余裕をもって線を引くためです。*/
}

h2.content-tt {
/*--text-indent: 100%;
white-space: nowrap;
overflow: hidden;
--*/
  color: #06347C;
  text-align: center;
line-height: 1.25em;
  padding: 0.25em;
  border-top: solid 3px #88C9FF;
  background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
  background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);

}


/*mainブロック内のh3タグ*/
main h3 {
	border-bottom: 4px solid #eee;	/*下線の幅、線種、色*/
	padding: 0px 0px 0 10px;			/*上、左右、下への余白*/
	color: #6A377B;
	font-size: large;
	margin:0;
}

main h4 {
	padding: 0;			/*上、左右、下への余白*/
	margin:0;
}


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


@media only screen and (min-width: 768px) {
.plan-a-box{
	width:80%;
	margin: 10px auto 10px auto;
	background-color: #E0F3FF;
	border:1px solid #399AE9;
		padding: 10px;
}
dd.plan-a-box {padding-left: 20px;}
.plan-b-box{
	width:80%;
	margin: 10px auto 10px auto;
	background-color:#FBE5FF;
}
.plan-c-box{
	width:80%;
	margin: 10px auto 10px auto;
	background-color:#E1FFF6;
}
}
@media only screen and (max-width: 767px) {
.plan-a-box{
	width: 96%;
	margin: 5px auto 10px auto;
	background-color: #EDF8FF;
	padding: 10px;
	text-align: center;
}
.plan-b-box{
	width: 100%;
	background-color: #FDF2FF;
	margin-bottom: 10px;
}
.plan-c-box{
	width: 100%;
	background-color: #EFFFFA;
	margin-bottom: 10px;
}
}




/*フッターメニュー設定
---------------------------------------------------------------------------*/
/*ボックス全体の設定*/
#footermenu {
	color: #FFFFFF;		/*文字色*/
	font-size: 1rem;	/*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
	padding: 20px;		/*ボックス内の余白*/
	display: flex;		/*flexボックスを使う指定*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	align-items: flex-start;		/*垂直揃えの指定。上に配置されるように。*/
	background-color: #937599;
	background-image: url(../images/ft_bg.jpg);
	background-position: right bottom;
	background-repeat: no-repeat;
}

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

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

/*ulタグ（メニューの列単位）*/
#footermenu ul {
	margin: 0;
	padding: 0 2px;
	flex: 1;
	list-style: none;
}

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


/*フッター設定
---------------------------------------------------------------------------*/
footer small {
	font-size: 100%;
	color: #1064AF;
}

footer {
	font-size: 1rem;	/*背景色*/
	color: #2070BC;			/*文字色*/
	text-align: center;		/*内容をセンタリング*/
	padding: 20px;			/*ボックス内の余白*/
	background-color: #54adf1;
	background-image: url(../images/bgsky-ft2.jpg);
	background-position: center top;
}

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

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

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


.ftft{
	width:100%;
	background-color: #937599;
	background-image: url(../images/ft_bg.jpg);
	background-position: right bottom;
	background-repeat: no-repeat;
}
.fttext{
	color: #fff;
	line-height: 1.5em;
	padding: 10px;
	width: 90%;
	margin: 0 auto;
}
.ffmenu{color:#fff;}

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

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

/*ulタグ（メニューの列単位）*/
.ftft ul {
	margin: 0 0 0 50px;
	padding: 0 2px;
	flex: 1;
	list-style: none;
	}


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

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

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

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

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


/*サービスページ（listブロック）
---------------------------------------------------------------------------*/
/*listボックスを囲むボックス*/
.list-container {
	display: flex;					/*flexボックスを使う指定*/
	flex-wrap: wrap;				/*折り返す指定*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	flex-direction: column;			/*子要素を縦並びにする*/
}

/*listボックス。１個あたりのボックスの指定です。*/
.list {
	display: flex;					/*flexボックスを使う指定*/
	flex-direction: column;			/*子要素を縦並びにする*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	margin-bottom: 30px;				/*背景色。*/
	color: #592F5F;					/*文字色*/
	padding: 20px;					/*ボックス内の余白*/
	box-shadow: 2px 2px 5px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.1は色が10%出た状態。*/
	border-radius: 10px;			/*角を丸くする指定*/
	overflow: hidden;
	background-color: #E6D0E8;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/*listボックス内のfigure画像*/
.list figure {
	margin: -20px -20px 0;	/*上の余白部分を埋めて画像を大きくするような指定です*/
}

/*listボックス内のh4タグ*/
.list h4 {
	margin: 10px 0;			/*上下、左右へのh4の外側に空けるスペース*/
	font-size: 1.2em;		/*文字サイズを120%に*/
	font-weight: normal;	/*hタグのデフォルトの太字を標準にする。太字がいいならこの１行を削除。*/
}

/*listボックス内のpタグ*/
.list p {
	margin: 0;
	font-size: 0.7em;	/*文字サイズを70%に。*/
}

/*IE対策*/
.list div {
	min-height: 0%;
}


/*スライドショー（slickを使用）
---------------------------------------------------------------------------*/
.mainimg {
	position: relative;
	padding:0;margin:0;/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
}

@media screen and (max-width:768px) {
.mainimg {
	position: relative;
	padding:140px 0 0 0;/*------------123px 0 0 0;/*----------110px---------------------------------*/
	margin:0;/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
}
}

/*------------------------------------------------------- コンテンツ　TT　-----------------------*/
.cont-tt{
	margin:0;
	padding: 0;
}
.cont-tt h2{
	margin:0;
	line-height:1.0;
}
.cont-tt .sp{
	padding:128px 0 0 0;/*--130px----124px 0 0 0;----*/
	margin-top:0px;/*--------------100px;-----------*/
}

.cont-tt .pc{
	padding-top:1px;/*---------------------------------------------------*/
	width:100%;
	max-width: 1500px;
}



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

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

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

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


/*アイコン
---------------------------------------------------------------------------*/
/*アイコンの共通設定*/
.icon {
	display: inline-block;
	padding: 0 10px;	/*上下、左右へのアイコン内の余白*/
	background: #999;	/*背景色。iconクラスだけ適用した場合に出る色です。*/
	color: #fff;		/*文字色*/
	font-size: 0.7em;	/*文字サイズを70%に。*/
	border-radius: 3px;	/*角を丸くする指定*/
	margin-right: 3px;	/*アイコンが並んだ際に間にとるスペース*/
}

/*NEWアイコン*/
.newicon {
	background: #e82600;	/*背景色*/
}

/*option1アイコン*/
.option1 {
	background: #e80068;	/*背景色*/
}

/*option2アイコン*/
.option2 {
	background: #009def;	/*背景色*/
}


/*詳細ページ
---------------------------------------------------------------------------*/
/*大きな画像のボックスと説明文を入れるボックス*/
#item-image {
	position: relative;
	margin: 0 auto 20px;
	text-align: center;
	width: 100%;
}

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

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

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


/*btnの設定
---------------------------------------------------------------------------*/
/*ボタンを囲むブロック*/
.btn {
	text-align: center;	/*内容をセンタリング*/
}

/*ボタン*/
.btn a,
.btn input {
	display: inline-block;text-decoration: none;border: none;
	color: #fff;			/*文字色*/
	border-radius: 3px;		/*角丸のサイズ。ほんの少しだけ角が丸くなります。*/
	padding: 10px 20px;		/*上下、左右へのボタン内の余白*/
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.2は色が20%出た状態。*/
	background: linear-gradient(#54adf1,#1d95f1);/*背景グラデーション*/
	font-size: 1rem;	/*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
}

/*ボタンのマウスオン時*/
.btn a:hover,
.btn input:hover {
	filter: brightness(1.2);	/*少しだけ明るくする*/
	cursor: pointer;
}

/*listブロック内でのボタン*/
.list .btn a, .list .btn input {
	margin-top: 10px;	/*上にスペースを空ける*/
	display: block;		/*横幅いっぱいに広げる*/
}


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

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

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

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

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


/*製品FAQ
---------------------------------------------------------------------------*/
/*FAQボックス全体*/
.faq {
	padding: 0 5px;	/*上下、左右へのボックス内の余白*/
	width:96%;
}

/*質問*/
.faq dt {
	border-radius: 10px;	/*枠を角丸にする指定*/
	margin-bottom: 20px;	/*下に空けるスペース*/
	background: linear-gradient(#fff, #f7f7f7);	/*背景グラデーション*/
	box-shadow: 0px 0px 5px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.2は色が20%出た状態の事。*/
	text-indent: -2em;				/*テキストのインデント。質問が複数行になった際に、テキストの冒頭を揃える為に設定しています。*/
	padding: 5px 1em 5px 3em;		/*ボックス内の余白。ここを変更する場合、上のtext-indentも調整します。*/
}

/*アイコン（Font Awesome）*/
.faq dt::before {
	font-family: "Font Awesome 5 Free";	/*Font Awesomeを使う指定*/
	content: "\f059";		/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
	color: #54adf1;			/*アイコンの色*/
	padding-right: 1em;		/*アイコンとテキストの間の余白*/
}

/*回答*/
.faq dd {
	padding: 5px 1em 30px 3em;		/*ボックス内の余白**/
}

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

.faq dt span {text-indent: 0;}


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

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	color: #fff;		/*文字色*/
	font-size: 1.5rem;	/*文字サイズ*/
	background: rgba(0,0,0,0.3);	/*背景色。0,0,0は黒の事で0.3は色が30%出た状態。*/
	width: 2em;			/*幅*/
	line-height: 2em;	/*高さ*/
}

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


/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-theme, .color-theme a {color: #54adf1 !important;}
.color-check, .color-check a {color: #f00 !important;}
.c {text-align: center !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.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 (max-width:480px) {

/*header（ロゴなどが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	flex-direction: column;	/*ロゴと電話番号を縦並びにする*/
}

/*電話番号ブロック*/
header address {
	margin-right: 0px;
}


/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/

}





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


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


/*fixmenu。大きな端末で、メインメニューが画面上部についた時のスタイル。
---------------------------------------------------------------------------*/
.fixmenu{
	position: fixed !important;z-index: 100;
	left:0px;top:0px;
	width: 100%;
}

/*header（ロゴなどが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*電話番号ブロック*/
header address {
	margin-right: 0px;
}


/*menubar
---------------------------------------------------------------------------*/
/*ハンバーガーメニューを非表示にする*/
#menubar_hdr {display: none;}

/*メニューのボックス全体の設定（※変更不要）*/
#menubar {height: auto;overflow: visible;

padding-top: 95px;/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

}
#menubar.db {position: static;overflow: visible;height: auto;padding: 0;}

/*ドロップダウンに影響させない為。*/
#menubar > ul {
	display: flex;					/*flexボックスを使う指定*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	max-width: 1500px;				/*最大幅。これ以上広がらないように。前半の小さな端末用の「#container」と数字を揃える。*/
	margin: 0 auto;
}

/*メニュー１個あたりの設定*/
#menubar li {
	text-align: center;	/*テキストをセンタリング*/
	flex: 1;			/*個々のメニューを均等にし、幅いっぱいまで使う設定*/
	position: relative;	/*ddmenu ulの幅となる基準を作っておく*/
}


/*ドロップダウンメニュー
---------------------------------------------------------------------------*/
/*ドロップダウンメニューブロック全体*/
#menubar ul ul {
	position: absolute;z-index: 100;/*------------100;--------------------------------------------------------------*/
width: 100%;
}

/*メニュー１個ごとに入れる線*/
#menubar .ddmenu_parent ul li a {
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	border-top: none;		/*上の線だけ消す*/
}

/*最初のドロップダウンにのみ上の線を入れる*/
#menubar .ddmenu_parent ul li:first-of-type a {
	border-top: 1px solid #ccc;
}


/*フッターメニュー設定
---------------------------------------------------------------------------*/
/*ボックス全体の設定*/
#footermenu {
	font-size: 0.8rem;	/*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
	padding: 20px 50px;	/*上下、左右へのボックス内の余白*/
}


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

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

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

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


/*サービスページ（listブロック）
---------------------------------------------------------------------------*/
/*listボックスを囲むボックス*/
.list-container {
	flex-direction: row;	/*子要素を横並びにする*/
}

/*listボックス。１個あたりのボックスの指定です。*/
.list {
	width: 49%;	/*ボックスの幅*/
}


/*詳細ページ
---------------------------------------------------------------------------*/
/*大きな画像のボックスと説明文を入れるボックス*/
#item-image {
	width: 80%;
}


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

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

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


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


/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/

}


/*---------------- お知らせＢＯＸ -------------------------------------------------------------------------------------------------------------------------------*/
.noticebox{
	text-align: left;
	border: 1px solid #DD1C58;
	background-color: #FFF3F7;
	padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 10px;
	padding-left: 5px;
}
.moviebox {
     width: 100%;
     max-width: 1200px;
     margin: auto;
 }
 .moviebox img {
     width: 100%;
 }
 .text-center {
     text-align: center;
 }
 .flexbox {
     display: flex;
 }
 .box1 {
     width: 55%;
     margin: auto;
 }
 .box2 {
     width: 45%;
     margin: auto .5rem;
 }
 @media screen and (max-width: 767px) {
     .flexbox {
	display: block;
	margin-right: auto;
	margin-left: auto;
     }
     .flexbox .box1 {
         width: 100%;
         margin: 0 auto;
     }
     .flexbox .box2 {
         width: 100%;
         margin: 0 auto;
     }
 }
/*------------------------------------------- コンテンツ01 ---------------------------------*/
#contarea1 {
	width: 100%;
	margin: 10px auto 10px auto;
	display: flex;
	justify-content: space-evenly;
	padding: 15px;
	border:1px solid #ccc;
}
.contbox1 {
	width: 35%;
text-align: center;
	padding: 10px;
}
.contbox2 {
	width: 65%;
	background-color:#EEF5F2;
	padding: 10px;
}
.contbox2 p{
	line-height: 1.8em;
}

@media screen and (max-width: 767px) {
.contbox3{	width: 96%;
margin:0 auto 0 auto;
}
}
@media screen and (min-width: 768px) {
.contbox3{	width: 96%;
margin:0 auto 0 auto;
}
}

.contboxtt{	
	width: 96%;
	margin:0 auto 0 auto;
}

@media screen and (max-width: 767px) {
  #contarea1 {
	width: 100;
	display: block;
	padding: 15px;
	margin-top: 10px;
	margin-bottom: 10px;
	border:1px solid #ccc;
  }
  .contbox1 {
	width: 100%;
	padding: 10px;
	margin-top: 5px;
	margin-bottom: 10px;
	text-align: center;
  }
  .contbox2 {
	width: 100%;
	padding: 10px;
	margin-top: 10px;
	margin-bottom: 5px;
  }
}

/*------------------------------------------- コンテンツ02 ---------------------------------*/
#contarea2 {
	width: 100%;
	margin: 10px auto 10px auto;
	display: flex;
	justify-content: space-evenly;
	padding: 15px;
/*---	border:1px solid #ccc;--------------------*/
	background-color: #FBEAFA;
}
#contarea2 .contbox1 {
	width: 48%;
	background-color: #FFDCDD;
	padding: 10px;
}
#contarea2 .contbox2 {
	width: 48%;
	background-color: #DDFDFF;
	padding: 10px;
}

@media screen and (max-width: 767px) {
  #contarea2 {
	width: 100;
	display: block;
	padding: 15px;
	margin-top: 10px;
	margin-bottom: 10px;
	border: 1px solid #ccc;
	background-color: #FBEAFA;
  }
  #contarea2 .contbox1 {
	width: 100%;
	padding: 10px;
	margin-top: 5px;
	margin-bottom: 10px;
  }
  #contarea2 .contbox2 {
	width: 100%;
	padding: 10px;
	margin-top: 10px;
	margin-bottom: 5px;
  }
}

/*------------------------------------------- コンテンツ03 ---------------------------------*/
#contarea3 {
	width: 100%;
	margin: 10px auto 10px auto;
	display: flex;
	justify-content: space-evenly;
	padding: 15px;
/*---	border:1px solid #ccc;--------------------*/
}
#contarea3 .contbox1 {
	width: 48%;
	background-color: #FFDCDD;
	padding: 10px;
}
#contarea3 .contbox2 {
	width: 48%;
	background-color: #DDFDFF;
	padding: 10px;
}

@media screen and (max-width: 767px) {
  #contarea3 {
	width: 100;
	display: block;
	padding: 15px;
	margin-top: 10px;
	margin-bottom: 10px;
/*--	border: 1px solid #ccc;--------------------------*/
  }
  #contarea3 .contbox1 {
	width: 100%;
	padding: 10px;
	margin-top: 5px;
	margin-bottom: 10px;
  }
  #contarea3 .contbox2 {
	width: 100%;
	padding: 10px;
	margin-top: 10px;
	margin-bottom: 5px;
  }
}

/*------------------------------------------- コンテンツ04 ------4box---------------------------*/
.contarea4 {
	display: flex; /* flexbox */
	flex-wrap: wrap; /* 折返し指定 */
	gap: 5px;/*------------------------------------1px------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
	margin-top: 5px;
	margin-right: auto;
	margin-bottom: 5px;
	margin-left: auto;
	text-align: center;
	width: 95%;
	justify-content: center;
}

.contarea4 div {
	width: calc(50% - 10px); /* 22px-----gap padding分を引く */
	padding: 4px;/*-----8px-----------------------------*/
/*--	color: #FFF;---------------------------------------*/
	background: #fff;
/*--	border:1px solid #ccc;---*/
}
.contarea4 p{
	text-align: left;
	line-height: 1.5em;
	width:85%;
}

@media (min-width: 768px) {
.contarea4 {
	width:100%;
}
	.contarea4 div {
		width: calc(25% - 10px);/*--22px----------------------------------*/
}
}



/*----------------------------------------------- テキスト装飾 ---------------------------------*/
.textore01{
	display: block;
	color: #FFEDE4;
	background-color:#fff;
	text-align: center;
}
.areabox{
	color: #333;
	border: 1px solid #ccc;
	width: 85%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 5px;
	padding: 10px;
}
.pic00{
	margin: 0px;
	padding: 0 0 0 10px;
	vertical-align: bottom;
}
.pic01{
	margin: 0px;
	padding: 0 0 5px 0;
/*--	vertical-align: bottom;----*/
}


@media only screen and (min-width: 768px) {
.procedure{width:80%;margin:0 auto 0 auto;}
}

@media only screen and (max-width: 767px) {
.procedure{width:90%;margin:0 auto 0 auto;}
}



/* お客様に寄り添ったサービス　4カラム */

/*--*, *:before, *:after {
	box-sizing: border-box;
}
--*/

.yorisotta{
	width: 95%;
	margin: 5px auto 10px auto;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	text-align: center; /* 内容は中央配置 */
	border:1px solid #008882;
}
.yorisotta > div{
	width: 25%;
	padding: 10px;
}
.yorisotta p{
	line-height: 1.5em;
	text-align: left;
	margin: 5px;
}
@media screen and (max-width: 1090px) {
	.yorisotta > div{
		width: 33.33333%;
	}
}
@media screen and (max-width: 480px) {
	.yorisotta > div{
		width: 50%;
	}
}

.yorisotta2{
	width: 95%;
	margin: 5px auto 10px auto;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	text-align: center; /* 内容は中央配置 */
	border: 2px solid #FF7600;
	background-image: url(../images/bg_ore1.jpg);
	background-repeat: repeat;
}
.yorisotta2 p{
	line-height: 1.5em;
	text-align: left;
	margin: 5px;
}


/*流れの説明---------------------------------------------------------------------------------*/
.item img{padding-bottom: 10px;}
.nagarett{
	color: #8B5590;
	font-size: large;
	font-weight: bold;
	text-align: center;
	background-color: #EADDEB;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
}
.nagarep{
	line-height: 1.8em;
	padding: 0px;
	margin: 0px;
}
@media ( min-width : 768px ){
.nagarep{
	font-size:14px;
}
}


.item {
  border-radius: 10px;
  background: #fff;/*--------------------#edf;----------*/
  padding: 15px;
  margin: 5px;
  text-align: center;
  border:1px solid #B07CC7;
}
img {
  max-width: 100%;
  height: auto;
}
p {
  text-align: left;
}
 
/* Responsive */
@media ( min-width : 768px ){
    .flexbox {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
  .item {
    width: 31%;
	  border:1px solid #B07CC7;
  }
}
/*-------------------------------　流れの説明　＞　図解、動画での説明　---------------------------*/
.heading04 {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 26px;
	text-align: center;
	background-color: #EAFEFF;
}

.heading04::before,
.heading04::after {
	content: '';
	width: 3px;
	height: 40px;
	background-color: #3fc1c9;
}

.heading04::before {
	margin-right: 30px;
	transform: rotate(-35deg)
}
.heading04::after {
	margin-left: 30px;
	transform: rotate(35deg)
}
.commentary {
	position: relative;
	color: #158b2b;
	font-size: 20px;
	text-align: center;
	margin-top: 5px;
	margin-right: 0;
	margin-bottom: 0em;
	margin-left: 0;
	padding-top: 9px;
	padding-right: 0;
	padding-bottom: 20px;
	padding-left: 0;
}
.commentary:before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 150px;
  height: 70px;/*----------------58px;----*/
  border-radius: 50%;
  border: 5px solid #a6ddb0;
  border-left-color: transparent;
  border-right-color: transparent;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
/*-------------------------------------------------- 図解説明　流れ --------------*/
h4.example{
	color: #795A7F;
	font-size: 21px;
	text-align: center;
}
.examplebox{
	width: 90%;
	border: 1px solid #ccc;
	padding: 10px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
}
.example1{
	text-align: center;
	margin-bottom: 7px;
	margin-right: 5px;
	margin-left: 5px;
}
.example2{
	text-align: center;margin-bottom: 7px;
}
.example3{
	width: 85%;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	padding: 10px;
	background-color: beige;
	border: 1px solid #FFE8CE;
	color: #6C5270;
}
@media screen and (min-width: 768px) {
.example3{
	font-size:14px;
	}
}
.boxcenter70{
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding: 10px;
	border:2px solid #FF155E;
}


/* 4カラム > 2カラム */

/*--*, *:before, *:after {
	box-sizing: border-box;
}
--*/

.contbox4{
	width: 98%;
	margin: 5px auto 10px auto;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	text-align: center; /* 内容は中央配置 */
}
.contbox4 > div{
	width: 22%;
	padding: 10px;
	margin:5px;
	border:1px solid #C0C0C0;
}
.bgsky1{
	width: 22%;
	padding: 5px;
	margin:5px;
	background-image: url(../images/bgsky-2.jpg);
	background-position: center top;
	border:1px solid #C0C0C0;
}
.contbox4 tt{
	line-height: 1.5em;
	text-align: left;
	margin: 5px;
}
.contbox4 tt2{
	line-height: 1.5em;
	text-align: left;
	margin: 5px;
}
.contbox4 p{
	line-height: 1.5em;
	text-align: left;
	margin: 5px;
}
.contbox4 p2{
	line-height: 1.5em;
	text-align: left;
	margin: 5px;
}

@media screen and (max-width: 768px) {
	.contbox4 > div{
	width: 32%;
	}
	.divbgsky1{
		width: 32%;
		background-image: url(../images/bgsky-2.jpg);
		background-position: center top;
	}
}
@media screen and (max-width: 480px) {
	.contbox4 > div{
		width: 47%;
	}
	.divbgsky1{
		width: 47%;
		background-image: url(../images/bgsky-3.jpg);
		background-position: center top;
	}
}
/*-------------------------------------------------------　contbox4 > 料金　---------------------------------*/
.contbox4-weight{
	color: #1F5FC0;
	font-size: large;
	margin-bottom: 7px;
	font-weight: bold;
	text-align: center;
	line-height: 1.3em;
	border-bottom:1px solid #2464E5;
}
.contbox4-class{
	color: #255FE4;
	font-weight: bold;
	text-align: center;
	margin-bottom: 7px;
	line-height: 1.3em;
}
.contbox4-type{
	text-align: left;
	line-height: 1.2em;
	margin-bottom: 7px;
}
.contbox4-fee{
	color:#702EA2;
	font-size: large;
	font-weight: bold;
	background-color: #F2E9F7;
}
.contbox4-price {
	position: relative;
	padding-top: 1;
	padding-right: 0.5;
	padding-bottom: 0;
	padding-left: 1;
}
.contbox4-price:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 98%;
  height: 3px;
  content: '';
  background-image: -webkit-gradient(linear, left top, right top, from(#fa709a), to(#fee140));
  background-image: -webkit-linear-gradient(left, #fa709a 0%, #fee140 100%);
  background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
}

.announcebox{
	line-height: 1.3em;
	padding: 10px;
	width: 96%;
	margin: 5px auto 5px auto;
	border: 1px solid #CCBECA;
}
.announcebox2{
	line-height: 1.3em;
	padding: 10px;
	width: 96%;
	margin: 5px auto 5px auto;
}
.announcebox3{
	text-align: center;
	line-height: 1.3em;
	padding: 10px;
	width: 96%;
	margin: 5px auto 5px auto;
}
/*----------------------------------------　対応エリアTABLE　------------------------*/
table{
  border-collapse: collapse;
  width: 90%;
}
.areabox th,
.areabox td{
  padding: 10px;
  border: solid 1px #ccc;
  text-align:center;
  box-sizing:border-box;
}
.areabox th {
	color: #fff;
	background-color:#2F8DFF;
	width:150px;
}
.areabox td{
	text-align: left;
	line-height: 2em;
}
@media screen and (max-width: 768px) {
table{
  border-collapse: collapse;
  width: 100%;
}
.areabox {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
  }
  table.areabox th,
  table.areabox td {
    display: block;
    width: 100%;
    border-bottom:none;
  }
  .areabox tr:last-child{
    border-bottom: solid 1px #ccc;
  }
}

/*--------------------------------------------　FAQ　--------------------------------*/
.accordion {
/*--	max-width: 60vw;----*/
	width: 94%;
	margin-top: 3em;
	margin-right: auto;
	margin-bottom: 3em;
	margin-left: auto;
}
.toggle {
display: none;
}
.option {
position: relative;
margin-bottom: 1em;
}
.title,
.content {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.3s;
}
.title {
border: solid 1px #ccc;
padding: 1em;
display: block;
color:#4E6FD7;
font-weight: bold;
background-color: #EFF9FF;
}
.title::after,
.title::before {
content: "";
position: absolute;
right: 1.25em;
top: 1.25em;
width: 2px;
height: 0.75em;
background-color: #999;
transition: all 0.3s;
}
.title::after {
transform: rotate(90deg);
}
.content {
max-height: 0;
overflow: hidden;
}
.content p {
margin: 0;
padding: 0.5em 1em 1em;
font-size: 0.9em;
line-height: 1.5;
}
.toggle:checked + .title + .content {
max-height: 500px;
transition: all 1.5s;
}
.toggle:checked + .title::before {
transform: rotate(90deg) !important;
}

/*------------------------------- about --------------------------------------------------*/
#about table {
  margin: 10px auto;
  width:100%;
}
.tbl-r02 th {
	padding: 0 10px;
	width:250px;
}
.tbl-r02 td {
  padding: 10px;
  line-height: 1.5em;
}
 
@media screen and (max-width: 767px) {
  .tbl-r02 {
    width: 100%;
  }
  .tbl-r02 th,
  .tbl-r02 td {
    display: block;
    width: 100%;
  }
}

@media(max-width:767px) {
#company table {
    width: 100%;
    border-collapse: collapse;
}
    
#company th,#company td{
    display: block;
    width: 96%; 
    }
    
#company th {
    padding: 0.2em;
    margin: 0 auto;
    box-sizing: border-box;
    text-align: left;
	background-color: #F1DEE9;
}
    
#company td {
    padding: 0.5em 1em;
    margin:0 auto 0.6em;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
}
}
/* PC用：768px以上の場合 */
@media(min-width:768px) {
#company table {
    max-width: 700px;
    margin: 0 auto;
    border: 1px solid #ccc;
}
#company th {
    display: table-cell;
    width: 20%;
    padding: 0.5em;
    border: 1px dashed #ccc;
    border-right: 1px solid #ccc;
	background-color: #F1DEE9;
}
#company td{
	display: table-cell;
    border: 1px dashed #ccc;
}
}

/*--------------------------------------------------------------
# Blog
--------------------------------------------------------------*/
/*--------------------------------------------------- 業務日誌 --------------------------*/
.carinfo{
	background-color: #F8F2EA;
	padding: 10px;
	width: 100%;
	text-align: center;
}
.carinfo-a{
	width: 80%;
	text-align: left;
	margin-right: auto;
	margin-left: auto;
}
@media (max-width: 768px) {
.carinfo{
	background-color:#F8F2EA;
	padding: 10px;
	width: 100%;
	text-align: center;
}
.carinfo-a{
	width: 100%;
	text-align: left;
}
}

.diarybox {
width:94%;
margin:0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.diarydata {
	width: 96%;
	margin:0 auto;
}
.diarydata img {
	text-align: center;
     display: block;
     margin:auto;

}
@media (min-width: 1024px) {
.diarybox {
width:98%;
margin:0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
  .diarydata {
    width: calc(50% - 16.18px / 2);
/*------width: calc(50% - 16.18px / 2);-----------*/
font-size:16px;
  }
  .diarydata img {
	text-align: center;
     display: block;
     margin:auto;
}
}

.blog .sidebar {
width:90%;
  padding: 30px;
  margin: 0 0 60px 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.blog .sidebar .sidebar-title {
  font-size: 20px;
  font-weight: 700;
  padding: 0 0 0 0;
  margin: 0 0 15px 0;
  color: #111;
  position: relative;
}
.blog .sidebar .sidebar-item {
  margin-bottom: 30px;
}
.blog .sidebar .search-form form {
  background: #fff;
  border: 1px solid #ddd;
  padding: 3px 10px;
  position: relative;
}
.blog .sidebar .search-form form input[type=text] {
  border: 0;
  padding: 4px;
  border-radius: 4px;
  width: calc(100% - 40px);
}
.blog .sidebar .search-form form button {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  background: none;
  font-size: 16px;
  padding: 0 15px;
  margin: -1px;
  background: #1bbd36;
  color: #fff;
  transition: 0.3s;
  border-radius: 0 4px 4px 0;
  line-height: 0;
}
.blog .sidebar .search-form form button i {
  line-height: 0;
}
.blog .sidebar .search-form form button:hover {
  background: #1ecf3b;
}
.blog .sidebar .categories ul {
  list-style: none;
  padding: 0;
}
.blog .sidebar .categories ul li + li {
  padding-top: 10px;
}
.blog .sidebar .categories ul a {
  color: #111;
  transition: 0.3s;
}
.blog .sidebar .categories ul a:hover {
  color: #1bbd36;
}
.blog .sidebar .categories ul a span {
  padding-left: 5px;
  color: #b4aca8;
  font-size: 14px;
}
.blog .sidebar .recent-posts .post-item + .post-item {
  margin-top: 15px;
}
.blog .sidebar .recent-posts img {
  width: 80px;
  float: left;
}
.blog .sidebar .recent-posts h4 {
  font-size: 15px;
  margin-left: 95px;
  font-weight: bold;
}
.blog .sidebar .recent-posts h4 a {
  color: #111;
  transition: 0.3s;
}
.blog .sidebar .recent-posts h4 a:hover {
  color: #1bbd36;
}
.blog .sidebar .recent-posts time {
  display: block;
  margin-left: 95px;
  font-style: italic;
  font-size: 14px;
  color: #b4aca8;
}
.blog .sidebar .tags {
  margin-bottom: -10px;
}
.blog .sidebar .tags ul {
  list-style: none;
  padding: 0;
}
.blog .sidebar .tags ul li {
  display: inline-block;
}
.blog .sidebar .tags ul a {
  color: #515151;
  font-size: 14px;
  padding: 6px 14px;
  margin: 0 6px 8px 0;
  border: 1px solid #c4c4c4;
  display: inline-block;
  transition: 0.3s;
}
.blog .sidebar .tags ul a:hover {
  color: #fff;
  border: 1px solid #1bbd36;
  background: #1bbd36;
}
.blog .sidebar .tags ul a span {
  padding-left: 5px;
  color: #aaaaaa;
  font-size: 14px;
}

/*--------------------------------------------- LINK ---------------------------------------------------*/
.linkbox{border-collapse:  collapse;}
.linkbox th{
	background-color: #EDF4FF;
}
.linkbox th,.linkbox td{
    border: solid 1px;  /* 枠線指定 */
    padding: 10px;      /* 余白指定 */
}
@media only screen and (max-width: 767px) {
.linkbox{width: 90%;}
.linkbox th,.linkbox td{
    width:100%;
	display: block;
}
}

/*-------------------------------------------------　diary　--------------------------------------------*/
h4.diary {
	position: relative;
	width:90%;
	color: #fff;
	border-radius: 10px;
	background:#4589E4;
	font-size: large;
	padding-top: 0.3em;
	padding-right: 1em;
	padding-bottom: 0.3em;
	padding-left: 1em;
	margin: 0 auto 1.5em auto;
}

h4.diary:after {
  position: absolute;
  bottom: -17px;/*------------------------------------ -9px -----*/
  left: 20%;
/*--  left: 1em;-------------------*/
  width: 0;
  height: 0;
  content: '';
  border-width: 30px 20px 0 20px;
/*----border-width: 10px 10px 0 10px;----- ▼の大きさ--------*/
  border-style: solid;
  border-color: #4589E4 transparent transparent transparent;
}
/*--
  border-top: 173px solid #000;
  border-left: 100px solid transparent; 
  border-right: 100px solid transparent; 
  height: 0;
  width: 0;
--*/


@media only screen and (max-width: 767px) {
h4.diary {
	text-align: center;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
}
}

#diarydetail table{
  width: 100%;
  border-collapse: collapse;
}

#diarydetail table tr{
  border-bottom: solid 2px white;
}

#diarydetail table tr:last-child{
  border-bottom: none;
}

#diarydetail table th{
	position: relative;
	text-align: left;
	width: 30;
	background-color: #05AF9C;
	color: white;
	text-align: center;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 5px;
	padding-left: 0;
}

#diarydetail table th:after{
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top:calc(50% - 10px);
  right:-10px;
  border-left: 10px solid #05AF9C;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

#diarydetail td{
	/*--#diarydetail table td{--*/
	text-align: left;
	width: 70%;
	text-align: center;
	background-color: #F0F1F3;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 5px;
	padding-left: 0;
}

/*-------------------------------------------------------- お問い合わせ ------------------------------------------------*/
.contact-form{
	width: 80%;
	margin: 0 auto;
	padding: 0;
}
table {
  border-collapse: collapse;
}
 
p {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin: 60px auto 40px;
}
 
input[type="submit"],
input[type="reset"]
{
	padding:8px;
}

input[type="text"],
select,
textarea,
button {
  -moz-appearance: none;
  -webkit-appearance: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none;
  border: none;
}
 
 
input[type="text"],
textarea {
  background: #f8f8f8;
  display: block;
  font-size: 16px;
  padding: 10px;
  width: 360px;
  transition: 0.8s;
  border-radius: 0;
}
 
input[type="text"]:focus,
textarea:focus {
  background: #e9f5fb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
 
textarea[name="content"] {
  display: inline-block;
  width: 80%;
  height: 200px;
}
 
input::placeholder,
textarea::placeholder {
  color: #ccc;
}
 
::-webkit-input-placeholder {
  color: #ccc;
  opacity: 1;
}
 
::-moz-placeholder {
  color: #ccc;
  opacity: 1;
}
 
:-ms-input-placeholder {
  color: #ccc;
  opacity: 1;
}
 
.form-table {
  width: 90%;
}
 
.form-table th,
.form-table td {
  border-top: 1px solid #d7d7d7;
  border-bottom: 1px solid #d7d7d7;
  padding: 10px;
}
 
.form-table th {
  background: #F1DFF3;
  padding-left: 10px;
  position: relative;
  text-align: left;
  width: 300px;
}
@media only screen and (max-width: 767px) {
.contact-form{
	width: 90%;
	margin: 0 auto;
}
.form-table th,
.form-table td {
  display: block;
  width: 94%;
  border-bottom: none;
}
input[type="text"],
textarea {
  padding: 10px;
  width: 320px;
}
}

/*---------------------------------------------- 業務日誌メッセージbox -----------------------------*/
.diary2msg{
	width:85%;
	margin: 0 auto;
	padding: 10px;
	border:1px solid #0B9474;
	text-align: left;
	line-height: 1.5em;
}