@charset "utf-8";
	body{
		margin: 0;
		Padding: 0;
	}
	.header_image {
		top: 200px;
		width: 100%;
	}
	.header_image img{
		width: 100%;
		height: 200px;
		scale: 100%;
		text-align: center;
		object-fit: cover;
		position: relative;
	}
	.header_text{
		position: absolute;
		top: 220px;
		left: 120px;
		width: 700px;
	}
	.header_span_text{
		color: #fff;
		font-size: 40px;
		font-weight: bold;
		font-family: YuGothic,'Yu Gothic',sans-serif;;
	}  
	.stepBar {
		display: flex;
		max-width: 400px;
		position: relative;
		margin: 20px auto;
		text-align: center;
	}
	.stepBar li {
		font-size: 12px;
		list-style: none;
		position: relative;
		width: 33.333%;
	}
	.stepBar li:after {
		background: #D0E1F9;
		content: "";
		width: calc(100% - 24px);
		height: 4px;
		position: absolute;
		left: calc(-50% + 12px);
		top: 10px;
	}
	.stepBar li:first-child:after {
		display: none;
	}
	.stepBar li span {
		background: #D0E1F9;
		color: #ffffff;
		display: inline-block;
		height: 24px;
		margin-bottom: 5px;
		line-height: 24px;
		width: 24px;
		-moz-border-radius: 50%;
		-webkit-border-radius: 50%;
		border-radius: 50%;
	}
	.stepBar .visited:after {
		background:  rgb(0, 124, 240);
	}
	.stepBar .visited span {
		background:  rgb(0, 124, 240);
	}

	.btn_trial a {
		position: relative;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 0 auto;
		max-width: 200px;
		padding: 10px 30px;
		margin: 10px 30px;
		color: #000000;
		transition: 0.3s ease-in-out;
		font-weight: 600;
		text-decoration: none;
	}
	.btn_trial a:before,
	.btn_trial a:after {
		content: '';
		width: 18px;
		height: 18px;
		border-color: #af0336;
		box-sizing: border-box;
		border-style :solid;
		display: inline-block;
		position: absolute;
		transition: all 0.3s ease-in-out;
	}
	.btn_trial a:before {
		top: -6px;
		left: -6px;
		border-width: 2px 0 0 2px;
		z-index: 5;
	}
	.btn_trial a:after {
		bottom: -6px;
		right: -6px;
		border-width: 0 2px 2px 0;
	}
	.btn_trial a:hover:before,
	.btn_trial a:hover:after {
		width: calc(100% + 12px);
		height: calc(100% + 12px);
		border-color: #af0336;
	}
	.btn_trial a:hover {
		color: #fff;
		background-color: #af0336;
		border-color: #ffffff;
	}
	/* ラベル */
	.alertdisplabel {
		padding: 0;
		margin-top: -25px;
		margin-left: 18px;
	}
	.alertdisplabel label {
		display: inline-block;
		color: rgb(0, 124, 240);;
		text-align: center;
		text-decoration: none;
		cursor: pointer;
		
		font-family: YuGothic,'Yu Gothic',sans-serif;
	}
	.alertdisplabel label:hover {
		color: #9c55a5;
	}
	.alertdisplabel input[type="checkbox"] {
		display: none;
	}
	.adis {
		border-bottom: #CCC;
		border-bottom-width: 1em;
		border-left: #CCC;
		border-left-width: 1em;
	}
	.adis img{
		width: 600px;
		margin-left: 18px;
		height: auto;
		cursor: pointer;
	}
	#adis{display: none;}
	/*デザインcss↓*/
	.box_con {
		max-width: 900px;
		margin: 0  auto;
	}
	.box_con form {
		width: 100%;
	}
	.box_con form table {
		width: 100%;
	}
	.box_con form table tr {
		position: relative;
	}
	.box_con form table tr:first-child td:before {
		content: "";
		position: absolute;
		width: 100%;
		left: 0;
		top: 0;
		height: 1px;
		border-bottom: solid 1px rgba(28, 46, 83, 0.5);
	}
	.box_con form table tr th {
		width: 30%;
		font-weight: normal;
		padding: 1em .5em;
		background: rgb(0, 124, 240);
		color: #fff;
		position: relative;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.box_con form table tr th span {
		background: #ff4d1c;
		padding: 0 .3em;
		color: #fff;
		margin-left: .5em;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		font-family: YuGothic,'Yu Gothic',sans-serif;
	}
	.box_con form table tr th:after {
		content: "";
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 0;
		height: 1px;
		border-bottom: solid 1px #fff;
	}
	.box_con form table tr td {
		position: relative;
		padding: 1em .5em;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		font-family: YuGothic,'Yu Gothic',sans-serif;
	}
	.box_con form table tr td:after {
		content: "";
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 0;
		height: 1px;
		border-bottom: solid 1px rgba(28, 46, 83, 0.5);
	}
	.box_con form table tr .box_br {
		display: block;
	}
	.box_con form table tr select, .box_con form table tr textarea, .box_con form table tr .wide {
		width: 100%;
		height: 3em;
		padding: .5em;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.box_con th td p,.box_br label{
		font-family: YuGothic,'Yu Gothic',sans-serif;
	}
	.box_con form table tr select, .box_con form table tr textarea, .box_con form table tr .short {
		width: 50%;
		height: 3em;
		padding: .5em;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.box_con form table tr textarea {
		height: 10em;
	}
	
	/*プライバシーのデザインcss↓*/
	.con_pri {
		max-width: 960px;
		margin: 0  auto;
	}
	.con_pri .box_pri {
		height: auto;
		border: 1px solid #cdcdcd;
		background: #d6d6d6;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.button_pri {
		height: auto;
		background: #d6d6d6;
		text-align: center;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.boxpri p {
		color: black;
		font-family: YuGothic,'Yu Gothic',sans-serif;
	}
	.button1 {
		text-align: center;
		display: inline-block;
		color: white;
		padding: 10px 30px;
		background-color: rgb(0, 124, 240);
		text-decoration: none;
		cursor: pointer;
		border: none;
		-moz-transition: all 0.4s;
		-o-transition: all 0.4s;
		-webkit-transition: all 0.4s;
		transition: all 0.4s;
		border-radius: 5px;
		font-family: YuGothic,'Yu Gothic',sans-serif;
	}
	.button2 {
		text-align: center;
		display: inline-block;
		color: rgb(0, 124, 240);
		padding: 10px 30px;
		background-color: #d6d6d6;
		text-decoration: none;
		cursor: pointer;
		border: none;
		-moz-transition: all 0.4s;
		-o-transition: all 0.4s;
		-webkit-transition: all 0.4s;
		transition: all 0.4s;
		border-radius: 5px;
		font-family: YuGothic,'Yu Gothic',sans-serif;
	}
	.button1:hover {
		background-color: rgb(0, 95, 184);
	}
	.button2:hover {
		color:rgb(2, 52, 99);
	}

	/* スマホ用メニュー表示制御 */
	#menubar-s {display: none;}
	/* スマホ用アイコン表示制御*/
	#menubar_hdr {display: none;}

	/* イメージ */
	.image {
		margin: 0 auto;
		display: flex;
		margin: 0 auto;
		padding: 0 3%;
	}
	.image img{
		position: relative;
		z-index: 1;
		width: 94%;
		max-width: 960px;
		list-style-type: none; 
    	height: auto;
	}

	/* コンテンツ */
	---------------------------------------------------------------------------*/
	#contents {
		clear: both;overflow: hidden;
		background: #fff;	/*背景色*/
		padding: 3%;	/*ボックス内の余白*/
		box-shadow: 0px 0px 50px rgba(0,0,0,0.5);
	}

	/*mainコンテンツ
	---------------------------------------------------------------------------*/
	#main {
		float: center;
		width: 100%;
	}
	/*１カラム利用時の設定*/
	.c1 #main {
		float: none;
		width: auto;
	}
	img {
		width: 98%;
		/*max-width: 960px;*/
		/*padding: .5rem;*/
		display: flex; 
		align-items:center;
		position: relative;
		display: inline-block;
	}
	/*h2タグの設定*/
	#main h2 {
		clear: both;
		margin-bottom: 20px;
		font-size: 18px;
		letter-spacing: 0.1em;
		color: rgb(0, 124, 240);
		background: #ffffff;
		background: linear-gradient(#ffffff, #ffffff); /* グラデーション */
		padding: 5px 15px;
		border-bottom: 4px solid #000000;	/* 下線 */
	}
	/*h3タグの設定*/
	#main h3 {
		clear: both;
		margin-bottom: 20px;
		font-size: 18px;
		letter-spacing: 0.1em;
		color: #e06a8d;
		background: #ffffff;
		background: linear-gradient(#ffffff, #ffffff); /* グラデーション */
		padding: 5px 15px;
		border-bottom: 4px solid #000000;	/* 下線 */
	}
	/*段落タグ設定*/
	#main p {
		padding: 0px 20px 15px;	/*上、左右、下への余白*/
	}
	#main h2 + p,
	#main h3 + p {
		margin-top: -10px;
	}
	#main section+section {
		margin-top: 50px;
	}

	/*SERVICEページの各ブロック
	---------------------------------------------------------------------------*/
	/*各ボックスの設定*/
	#main .list {
		position: relative;overflow: hidden;
		margin-bottom: 20px;	/*上下ボックス間の余白*/
		padding: 20px;		/*ボックス内の余白。ここを変更する際は、下の「#main .list a」のpaddingとmarginの数字も合わせる。*/
		border: 1px solid #dcdcdc;	/*枠線の幅、線種、色*/
		background: #fff;	/*背景色（古いブラウザ用）*/
		background: linear-gradient(#FFF, #e3e3e3);	/*背景グラデーション*/
		box-shadow: 0px 0px 0px 1px #fff inset;	/*内側の影。右へ・下へ・ぼかし幅・距離・色を設定*/
		color: #333;	/*文字色*/
	}
	#main .list a {
		text-decoration: none;display: block;overflow: hidden;
		padding: 20px;	/*ボックス内の余白。ここを変更する際は、上の「#main .list」のpaddingの数字も合わせる。*/
		margin: -20px;	/*ボックス内の余白。ここを変更する際は、上の「#main .list」のpaddingの数字も合わせる。マイナス記号は外さないように。*/
		color: #333;	/*文字色*/
	}
	/*マウスオン時の背景色*/
	#main .list a:hover {
		background: #fff;	/*背景色*/
	}
	/*リンクを貼った際に出る「→」マーク*/
	#main .list a::before {
		content: "→";	/*出力する文字。変更しても構いませんが機種依存文字は化けるので使わないで下さい。*/
		font-size: 12px;	/*文字サイズ*/
		display: block;
		position: absolute;
		right: 10px;	/*ボックスの右から10pxの場所に配置*/
		bottom: 10px;	/*ボックスの下から10pxの場所に配置*/
		width: 30px;	/*幅*/
		line-height: 30px;	/*高さ*/
		text-align: center;
		background: #ccc;	/*背景色（古いブラウザ用）*/
		background: rgba(0,0,0,0.2);	/*背景グラデーション。0,0,0は黒の事で、0.3は透明度30%の事。*/
		color: #fff;	/*文字色*/
	}
	/*マウスオン時の「→」マーク*/
	#main .list a:hover::before {
		background: #49b1cb;	/*背景色*/
	}
	/*ボックス内のh4タグ設定*/
	#main .list h4 {
		padding-left: 10px;	/*枠線とテキストとの間の余白*/
		border-bottom: 1px solid #CCC;	/*下側の線の幅、線種、色*/
		border-left: 3px solid #49b1cb;	/*左側の線の幅、線種、色*/
		margin-bottom: 0.5em;
		color: #49b1cb;	/*文字色*/
	}
	/*ボックス内のp(段落)タグ設定*/
	#main .list p {
		padding: 0px;
	}
	/*ボックス内の画像*/
	#main .list figure {
		float: left;	/*左に回り込み*/
		width: 30%;		/*画像幅*/
		background: #FFF;	/*画像の背景色。ここでは枠線と画像の間の色になります。*/
		padding: 1%;			/*余白。ここに上の行で設定した背景色が出ます。*/
		border: 1px solid #CCC;	/*枠線の幅、線種、色*/
		margin-right: 10px;		/*画像右側に空ける余白*/
	}
	/*マウスオン時のボックス内の写真設定。ボックスにoption2スタイルが指定された場合の画像の設定。*/
	.list.option2 a:hover figure img,
	.list.option2 figure img {
		opacity: 0.3 !important;	/*半透明にする設定*/
	}

	@media only screen and (max-width: 768px) {
		.box_con {
			width: 95%;
		}
		.stepBar li {
			font-size: 9px;
			list-style: none;
			position: relative;
			width: 33.333%;
		}
		.box_con form table tr:first-child td:before {
			display: none;
		}
		.con_pri {
			width: 95%;
		}
		.box_con form table tr td {
			padding: 1.5em .5em;
			display: block;
			width: 100%;
		}
		.box_con form table tr th {
			text-align: center;
			width: 100%;
			display: block;
			padding: .8em .2em;
		}
		.header_image img{
			width: 100%;
			height: 100px;
			scale: 100%;
			text-align: center;
			object-fit: cover;
			position: relative;
		}
		.header_text{
			position: absolute;
			max-width: 300px;
			width: 100%;
			top: 95px;
			left: 40px;
		}
		.header_span_text{
			color: #fff;
			font-size: 20px;
			font-weight: bold;
			font-family: YuGothic,'Yu Gothic',sans-serif;;
		}
	}
	/*ページの上部へ「↑」ボタン
---------------------------------------------------------------------------*/
@keyframes scroll {
	0% {opacity: 0;}
	100% {opacity: 1;}
	}
	body .nav-fix-pos-pagetop a {display: none;}
	body.is-fixed-pagetop .nav-fix-pos-pagetop a {
		display: block;text-decoration: none;
		z-index: 100;
		text-align: center;
		width: 50px;	/*幅*/
		line-height: 50px;	/*高さ*/
		position: fixed;
		bottom: 100px;	/*下から１００pxの場所に配置*/
		right: 5%;		/*右から5%の場所に配置*/
		background: #000;	/*背景色（古いブラウザ用）*/
		background: rgba(0,0,0,0.6);	/*背景色。0,0,0は黒の事で0.6は透明度60%の事。*/
		color: #fff;	/*文字色*/
		border: 1px solid #fff;	/*枠線の幅、線種、色*/
		animation-name: scroll;	/*上のアニメーションで指定しているkeyframesの名前（scroll）*/
		animation-duration: 1S;	/*アニメーションの実行時間*/
		animation-fill-mode: forwards;	/*アニメーションの完了後、最後のキーフレームを維持する*/
	}
	/*マウスオン時*/
	body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {
		background: #999;	/*背景色*/
	}