/*----------------------------------------------------------------------------*/
/* 	UI パーツ　共通 CSS   ■button系				 					     */
/*----------------------------------------------------------------------------*/

	/* VIEW ALL すべて見る　Button :hover 「 □　→ ■  」  */

	.viewall {
		display:block;
		width:200px;
		height:45px;
		border:2px solid #E56E2C;		/* HD-orange02 */
		float:left;
		text-align:center;
		cursor:pointer;
		position:relative;
		box-sizing:border-box;
		overflow:hidden;
		margin:0 0 40px 0;
		background	: url("../images/icon/btn-sym01.png") no-repeat;
		background-size:8px 8px;
		background-position: 10px  15px;
		background-color:#E56E2C;		/* HD-orange02 */
	}
	.viewall  a{
		display:block;
		font-size:14px;
		color:#FFF;
		font-family: "Noto Sans JP", serif;
		font-optical-sizing: auto;
		font-weight: 500;
		font-style: normal;
		font-display: swap;
		text-decoration:none;
		line-height:40px;
		transition:all .5s ease;
		z-index:2;
		position:relative;
	}
	.eff-detail03 {
		width:200px;
		height:45px;
		left:-200px;
		top:0px;
		background	: url("../images/icon/btn-sym02.png") no-repeat;
		background-size:8px 8px;
		background-position: 170px 15px; 
		background-color:#FFF;
		position:absolute;
		transition:all .5s ease;
		z-index:1;
	}
	.viewall:hover .eff-detail03  {
		left:0;top:0;
	}
	.viewall:hover a{
		color:#E56E2C;		/* HD-orange02 */
	}

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

		.viewall {
			width:200px;
			height:45px;
			background-position:  left 0px  top 10px;
			background	: url("../images/icon/btn-sym01.png") no-repeat;
			background-size:8px 8px;
			background-position: 5px  8px; 
			background-color:#E56E2C;		/* HD-orange02 */
		}
		.viewall  a{
			font-size:12px;
			line-height:26px;
			font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "小塚ゴシック Pro","Kozuka Gothic Pro","メイリオ", 
						Meiryo, Osaka, helvetica, arial,
						"游ゴシック体", YuGothic,"ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
			font-display: swap;
		}
		.eff-detail03 {
			width:200px;
			height:45px;
			left:-200px;
			top:0px;
		}
	}
	/* Tablet Layout ◇ */
	@media only screen and (min-width: 768px) and (max-width: 992px) {

		.viewall {
			width:180px;
			height:40px;
			background-position:  left 10px  top 15px;
		}
		.viewall  a{
			font-size:14px;
			line-height:40px;
			font-family: "Noto Sans JP", serif;
			font-optical-sizing: auto;
			font-weight: 500;
			font-style: normal;
			font-display: swap;
		}
		.eff-detail03 {
			width:180px;
			height:40px;
			left:-180px;
			top:0px;
			background	: url("../images/icon/btn-sym02.png") no-repeat;
			background-size:8px 8px;
			background-position: 15px  10px; 
		}
	}

	/* お知らせ一覧を見る　Button :hover 「 □　→ ■  」  */

	.tpall {
		display:block;
		width:180px;
		height:40px;
		border:1px solid #E60021;		/* AF-red */
		float:left;
		text-align:center;
		cursor:pointer;
		position:relative;
		box-sizing:border-box;
		overflow:hidden;
		margin:0 0 40px 0;
		background	: url("../images/icon/btn-sym03.png") no-repeat;
		background-size:8px 8px;
		background-position: 10px  13px;
		background-color:#FFF;
	}
	.tpall  a{
		display:block;
		font-size:14px;
		color:#E60021;		/* AF-red */
		font-family: "Noto Sans JP", serif;
		font-optical-sizing: auto;
		font-weight: 500;
		font-style: normal;
		font-display: swap;
		text-decoration:none;
		line-height:2.5em;
		transition:all .5s ease;
		z-index:2;
		position:relative;
	}
	.eff-detail04 {
		width:180px;
		height:40px;
		left:-180px;
		top:0px;
		background	: url("../images/icon/btn-sym01.png") no-repeat;
		background-size:8px 8px;
		background-position: 155px 13px; 
		background-color:#E60021;		/* AF-red */
		position:absolute;
		transition:all .5s ease;
		z-index:1;
	}
	.tpall:hover .eff-detail04  {
		left:0;top:0;
	}
	.tpall:hover a{
		color:#FFF;
	}

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

		.tpall {
			width:160px;
			height:30px;
			background-position:  left 0px  top 10px;
			background	: url("../images/icon/btn-sym03.png") no-repeat;
			background-size:8px 8px;
			background-position: 7px  9px; 
			background-color:#FFF;
		}
		.tpall  a{
			font-size:12px;
			line-height:2.4em;
			font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "小塚ゴシック Pro","Kozuka Gothic Pro","メイリオ", 
						Meiryo, Osaka, helvetica, arial,
						"游ゴシック体", YuGothic,"ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
			font-display: swap;
		}
		.eff-detail04 {
			width:160px;
			height:30px;
			left:-180px;
			top:0px;
		}
	}
	/* Tablet Layout ◇ */
	@media only screen and (min-width: 768px) and (max-width: 992px) {

		.tpall {
			width:180px;
			height:40px;
			background-position:  left 10px  top 15px;
		}
		.tpall  a{
			font-size:14px;
			line-height:2.5em;
			font-family: "Noto Sans JP", serif;
			font-optical-sizing: auto;
			font-weight: 500;
			font-style: normal;
			font-display: swap;
		}
		.eff-detail04 {
			width:180px;
			height:40px;
			left:-180px;
			top:0px;
			background	: url("../images/icon/btn-sym01.png") no-repeat;
			background-size:8px 8px;
			background-position: 15px  10px; 
		}
	}


	/* 詳しくは　Button :hover 「 □　→ ■  」  */

	.detail-btn {
		display:block;
		width:150px;
		height:35px;
		border:1px solid #3CB400;		/* sec-green01 */
		float:left;
		text-align:center;
		cursor:pointer;
		position:relative;
		box-sizing:border-box;
		overflow:hidden;
		margin:0 0 40px 0;
		background	: url("../images/icon/btn-sym01.png") no-repeat;
		background-size:8px 8px;
		background-position: 8px  12px;
		background-color:#3CB400;		/* sec-green01 */
/*			box-shadow: 0px 1px 2px 1px #eee;
			-webkit-box-shadow: 0px 1px 2px 1px #eee;
			-moz-box-shadow: 0px 1px 2px 1px #eee;*/
	}
	.detail-btn  a{
		display:block;
		font-family: "Noto Sans JP", serif;
		font-optical-sizing: auto;
		font-weight: 400;
		font-style: normal;
		font-display: swap;
		font-size:13px;
		color:#FFF;
		text-decoration:none;
		line-height:2.5em;
		transition:all .5s ease;
		z-index:2;
		position:relative;
	}
	.eff-detail {
		width:150px;
		height:35px;
		left:-150px;
		top:0px;
		background	: url("../images/icon/btn-sym02.png") no-repeat;
		background-size:8px 8px;
		background-position: 130px 12px; 
		background-color:#FFF;
		position:absolute;
		transition:all .5s ease;
		z-index:1;
	}
	.detail-btn:hover .eff-detail  {
		left:0;top:0;
	}
	.detail-btn:hover a{
		color:#3CB400;		/* sec-green01 */
	}

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

		.detail-btn {
			width:120px;
			height:30px;
			background-position:  left 0px  top 10px;
			background	: url("../images/icon/btn-sym01.png") no-repeat;
			background-size:8px 8px;
			background-position: 7px  9px; 
			background-color:#3CB400;		/* sec-green01 */
		}
		.detail-btn  a{
			font-size:12px;
			line-height:2.2em;
			font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "小塚ゴシック Pro","Kozuka Gothic Pro","メイリオ", 
						Meiryo, Osaka, helvetica, arial,
						"游ゴシック体", YuGothic,"ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
			font-display: swap;
		}
		.eff-detail {
			width:120px;
			height:30px;
			left:-120px;
			top:0px;
		}
	}
	/* Tablet Layout ◇ */
	@media only screen and (min-width: 768px) and (max-width: 992px) {

		.detail-btn {
			width:150px;
			height:30px;
			background-position:  left 5px  top 11px;
		}
		.detail-btn  a{
			font-size:13px;
			line-height:2.5em;
			font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "小塚ゴシック Pro","Kozuka Gothic Pro","メイリオ", 
						Meiryo, Osaka, helvetica, arial,
						"游ゴシック体", YuGothic,"ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
			font-display: swap;
		}
		.eff-detail {
			width:150px;
			height:30px;
			left:-150px;
			top:0px;
			background	: url("../images/icon/btn-sym03.png") no-repeat;
			background-size:8px 8px;
			background-position: 5px  11px; 
		}
	}

	/* 詳しくは　Button :hover 「 □　→ ■  」  */

	.detail-btn02 {
		display:block;
		width:150px;
		height:30px;
		border:1px solid #2E9648;		/* AF-green01 */
		float:left;
		text-align:center;
		cursor:pointer;
		position:relative;
		box-sizing:border-box;
		overflow:hidden;
		margin:0 0 40px 0;
		background	: url("../images/icon/btn-sym01.png") no-repeat;
		background-size:8px 8px;
		background-position: 10px  10px;
		background-color:#2E9648;		/* AF-green01 */
	}
	.detail-btn02  a{
		display:block;
		font-family:arial;
		font-display: swap;
		font-size:13px;
		color:#FFF;
		text-decoration:none;
		line-height:28px;
		transition:all .5s ease;
		z-index:2;
		position:relative;
	}
	.eff-detail02 {
		width:150px;
		height:30px;
		left:-150px;
		top:0px;
		color:#2E9648;		/* AF-green01 */

		background	: url("../images/icon/btn-sym02.png") no-repeat;
		background-size:8px 8px;
		background-position: 130px 10px; 
		background-color:#FFF;
		position:absolute;
		transition:all .5s ease;
		z-index:1;
	}
	.detail-btn02:hover .eff-detail02  {
		left:0;top:0;
	}
	.detail-btn02:hover a{
		color:#2E9648;		/* AF-green01 */
	}

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

		.detail-btn02 {
			width:130px;
			height:30px;
			background-position:  left 0px  top 10px;
			background	: url("../images/icon/btn-sym01.png") no-repeat;
			background-size:8px 8px;
			background-position: 5px  9px; 
			background-color:#2E9648;		/* AF-green01 */
		}
		.detail-btn02  a{
			font-size:12px;
			line-height:26px;
		}
		.eff-detail02 {
			width:130px;
			height:30px;
			left:-130px;
			top:0px;
		}
	}
	/* Tablet Layout ◇ */
	@media only screen and (min-width: 768px) and (max-width: 992px) {

		.detail-btn02 {
			width:150px;
			height:30px;
			background-position:  left 10px  top 8px;
		}
		.detail-btn02  a{
			font-size:14px;
			line-height:26px;
		}
		.eff-detail02 {
			width:150px;
			height:30px;
			left:-150px;
			top:0px;
			background	: url("../images/icon/btn-sym02.png") no-repeat;
			background-size:8px 8px;
			background-position: 15px  0px; 
		}
	}

	/* お問い合わせへ Button :hover 「 □　→ ■  」  */

	.cont-btn {
		display:block;
		width:330px;
		height:50px;
		border:2px solid #2E9648;		/* AF-green01 */
		float:left;
		text-align:center;
		cursor:pointer;
		position:relative;
		box-sizing:border-box;
		overflow:hidden;
		margin:0 0 40px 0;
		background	: url("../images/icon/btn-sym01.png") no-repeat;
		background-size:11px 11px;
		background-position: 15px  18px;
		background-color:#2E9648;		/* AF-green01 */
	}
	.cont-btn  a{
		display:block;
		font-family: "Noto Sans JP", serif;
		font-optical-sizing: auto;
		font-weight: 500;
		font-style: normal;
		font-display: swap;
		font-size:15px;
		color:#2E9648;		/* AF-green01 */
		color:#FFF;
		text-decoration:none;
		line-height:47px;
		transition:all .5s ease;
		z-index:2;
		position:relative;
	}
	.eff-cont {
		width:330px;
		height:50px;
		left:-330px;
		top:0px;
		background	: url("../images/icon/btn-sym04.png") no-repeat;
		background-size:11px 11px;
		background-position: 200px 18px; 
		background-color:#FFF;
		position:absolute;
		transition:all .5s ease;
		z-index:1;
	}
	.cont-btn:hover .eff-cont {
		left:0;top:0;
	}
	.cont-btn:hover a{
		color:#FFF;
		color:#2E9648;		/* AF-green01 */
	}

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

		.cont-btn {
			width:280px;
			height:35px;
			background-position:  left 0px  top 10px;
			background	: url("../images/icon/btn-sym01.png") no-repeat;
			background-size:10px 10px;
			background-position: 10px  11px; 
			background-color:#2E9648;		/* AF-green01 */
		}
		.cont-btn  a{
			font-size:12px;
			line-height:32px;
		}
		.eff-cont {
			width:280px;
			height:35px;
			left:-280px;
			top:0px;
		}
	}
	/* Tablet Layout ◇ */
	@media only screen and (min-width: 768px) and (max-width: 992px) {

		.cont-btn {
			width:280px;
			height:40px;
			background	: url("../images/icon/btn-sym01.png") no-repeat;
			background-size:8px 8px;
			background-position:  left 5px  top 10px;
			background-color:#2E9648;		/* AF-green01 */
		}
		.cont-btn  a{
			font-size:14px;
			line-height:2.3em;
		}
		.eff-cont {
			width:280px;
			height:40px;
			left:-280px;
			top:0px;
			background	: url("../images/icon/btn-sym02.png") no-repeat;
			background-size:8px 8px;
			background-position: 5px  5px; 
		}
	}

	/* 一覧に戻る Button :hover 「 □　→ ■  」  */

	.return-btn {
		display:block;
		width:230px;
		height:50px;
		border:2px solid #2E9648;		/* AF-green01 */
		float:left;
		text-align:center;
		cursor:pointer;
		position:relative;
		box-sizing:border-box;
		overflow:hidden;
		margin:0 0 40px 0;
		background	: url("../images/icon/btn-sym01.png") no-repeat;
		background-size:11px 11px;
		background-position: 15px  18px;
		background-color:#2E9648;		/* AF-green01 */
	}
	.return-btn  a{
		display:block;
		font-size:15px;
		color:#2E9648;		/* AF-green01 */
		color:#FFF;
		text-decoration:none;
		line-height:2.9em;
		transition:all .5s ease;
		z-index:2;
		position:relative;
	}
	.eff-return {
		width:230px;
		height:50px;
		left:-230px;
		top:0px;
		background	: url("../images/icon/btn-sym04.png") no-repeat;
		background-size:11px 11px;
		background-position: 200px 18px; 
		background-color:#FFF;
		position:absolute;
		transition:all .5s ease;
		z-index:1;
	}
	.return-btn:hover .eff-return  {
		left:0;top:0;
	}
	.return-btn:hover a{
		color:#FFF;
		color:#2E9648;		/* AF-green01 */
	}

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

		.return-btn {
			width:180px;
			height:35px;
			background-position:  left 0px  top 10px;
			background	: url("../images/icon/btn-sym01.png") no-repeat;
			background-size:10px 10px;
			background-position: 10px  10px; 
			background-color:#2E9648;		/* AF-green01 */
		}
		.return-btn  a{
			font-size:12px;
			line-height:2.5em;
		}
		.eff-return {
			width:180px;
			height:35px;
			left:-180px;
			top:0px;
		}
	}
	/* Tablet Layout ◇ */
	@media only screen and (min-width: 768px) and (max-width: 992px) {

		.return-btn {
			width:200px;
			height:40px;
			background	: url("../images/icon/btn-sym01.png") no-repeat;
			background-size:8px 8px;
			background-position:  left 5px  top 10px;
			background-color:#2E9648;		/* AF-green01 */
		}
		.return-btn  a{
			font-size:14px;
			line-height:2.3em;
		}
		.eff-return {
			width:200px;
			height:40px;
			left:-200px;
			top:0px;
			background	: url("../images/icon/btn-sym02.png") no-repeat;
			background-size:8px 8px;
			background-position: 5px  5px; 
		}
	}

/* ■ 申し込み enter Button  */

	/* Button :hover □　→ ■  */

	.ent-btn {
		display:block;
		width:300px;
		height:50px;
		border:3px solid #3A69BA;		/* sec-blue03 */
		float:left;
		text-align:center;
		cursor:pointer;
		position:relative;
		box-sizing:border-box;
		overflow:hidden;
		margin:0 0 40px 0;
		background	: url("../images/icon/btn-arrow01.png") no-repeat;
		background-size:29px 8px;
		background-position:  left -10px  top 17px;
		background-color:#E56E2C;		/* WA-orange01 */
		background-color:#3A69BA;		/* sec-blue03 */
	}
	.ent-btn  a{
		display:block;
		font-size:15px;
		font-weight:600;
		color:#FFF;
		text-decoration:none;
		line-height:2.9em;
		transition:all .5s ease;
		z-index:2;
		position:relative;
	}
	.eff-ent {
		width:300px;
		height:50px;
		left:-300px;
		top:0px;
		position:absolute;
		transition:all .5s ease;
		background	: url("../images/icon/btn-arrow01.png") no-repeat;
		background-size:29px 8px;
		background-position:  left 250px  top 17px;
		background-color:#FFF;
		z-index:1;
	}
	.ent-btn:hover .eff-ent  {
		left:0;top:0;
	}
	.ent-btn:hover a{
		color:#3A69BA;		/* sec-blue03 */
	}

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

		.ent-btn {
			width:220px;
			height:35px;
			background-position:  left -10px  top 8px;
		}
		.ent-btn  a{
			font-size:12px;
			line-height:2.4em;
		}
		.eff-ent {
			width:220px;
			height:35px;
			left:-220px;
			top:0px;
		}
	}
	/* Tablet Layout ◇ */
	@media only screen and (min-width: 768px) and (max-width: 992px) {

		.ent-btn {
			width:300px;
			height:50px;
			background-position:  left -2px  top 18px;
		}
		.ent-btn  a{
			font-size:13px;
			line-height:42px;
		}
		.eff-ent {
			width:300px;
			height:50px;
			left:-300px;
			top:0px;
		}
	}

/* ■ 申し込み enter Button  */

	/* Button :hover ■ → □  */

	.ent-btn02 {
		width:400px;
		height:65px;
		border:3px solid #D35400;		/* LD-red01 */
		float:left;
		text-align:center;
		cursor:pointer;
		position:relative;
		box-sizing:border-box;
		overflow:hidden;
		margin:0 0 40px 0;
		background-color:#FFF;
		background	: url("../images/icon/btn-arrow01.png") no-repeat;
		background-size:29px 8px;
		background-position:  left -4px  top 22px;
		background-color:#D35400;		/* LD-red01 */
	}
	.ent-btn02  a{
		font-size:18px;
		font-family: "Noto Sans JP", serif;
		font-optical-sizing: auto;
		font-weight: 500;
		font-style: normal;
		font-display: swap;
		color:#D35400;		/* LD-red01 */
		color:#FFF;
		text-decoration:none;
		line-height:58px;
		transition:all .5s ease;
		z-index:2;
		position:relative;
	}
	.eff-ent02 {
		width:400px;
		height:65px;
		left:-400px;
		top:0px;
		background-color:#D35400;		/* LD-red01 */
		background-color:rgba( 255,255,255,0.95 ); 	/*  White  透過95% */
		position:absolute;
		transition:all .5s ease;
		z-index:1;
	}
	.ent-btn02:hover .eff-ent02  {
		left:0;top:0;
	}
	.ent-btn02:hover a{
		color:#fff;
		color:#D35400;		/* LD-red01 */
	}

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

		.ent-btn02 {
			width:80%;
			height:40px;
			background-position:  left 0px  top 13px;
		}
		.ent-btn02  a{
			font-size:12px;
			line-height:32px;
		}
		.eff-ent02 {
			width:80%;
			height:40px;
			left:-80%;
			top:0px;
		}
	}
	/* Tablet Layout ◇ */
	@media only screen and (min-width: 768px) and (max-width: 992px) {

		.ent-btn02 {
			width:300px;
			height:50px;
			background-position:  left -2px  top 18px;
		}
		.ent-btn02  a{
			font-size:13px;
			line-height:42px;
		}
		.eff-ent02 {
			width:300px;
			height:50px;
			left:-300px;
			top:0px;
		}
	}

	/* 一覧に戻る　Button :hover 「 □　→ ■  」  */

	.listbk {
		display:block;
		width:200px;
		height:45px;
		border:2px solid #0F1419;		/* cacielo-base-blk */
		float:left;
		text-align:center;
		cursor:pointer;
		position:relative;
		box-sizing:border-box;
		overflow:hidden;
		margin:0 0 40px 0;
		background	: url("../images/icon/btn-sym01.png") no-repeat;
		background-size:8px 8px;
		background-position: 10px  15px;
		background-color:#0F1419;		/* cacielo-base-blk */
	}
	.listbk  a{
		display:block;
		font-size:15px;
		color:#FFF;
		font-family: "Noto Sans JP", serif;
		font-optical-sizing: auto;
		font-weight: 400;
		font-style: normal;
		font-display: swap;
		text-decoration:none;
		line-height:39px;
		transition:all .5s ease;
		z-index:2;
		position:relative;
	}
	.eff-listbk {
		width:200px;
		height:45px;
		left:-200px;
		top:0px;
		background	: url("../images/icon/btn-sym02.png") no-repeat;
		background-size:8px 8px;
		background-position: 170px 15px; 
		background-color:#FFF;
		position:absolute;
		transition:all .5s ease;
		z-index:1;
	}
	.listbk:hover .eff-listbk  {
		left:0;top:0;
	}
	.listbk:hover a{
		color:#0F1419;		/* cacielo-base-blk */
	}

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

		.listbk {
			width:180px;
			height:30px;
			background-position:  left 0px  top 10px;
			background	: url("../images/icon/btn-sym01.png") no-repeat;
			background-size:8px 8px;
			background-position: 5px  8px; 
			background-color:#0F1419;		/* cacielo-base-blk */
		}
		.listbk  a{
			font-size:12px;
			line-height:26px;
		}
		.eff-listbk {
			width:180px;
			height:30px;
			left:-180px;
			top:0px;
		}
	}
	/* Tablet Layout ◇ */
	@media only screen and (min-width: 768px) and (max-width: 992px) {

		.listbk {
			width:180px;
			height:40px;
			background-position:  left 15px  top 13px;
		}
		.listbk  a{
			font-size:14px;
			line-height:36px;
			font-family: "Noto Sans JP", serif;
			font-optical-sizing: auto;
			font-weight: 500;
			font-style: normal;
			font-display: swap;
		}
		.eff-listbk {
			width:180px;
			height:40px;
			left:-180px;
			top:0px;
			background	: url("../images/icon/btn-sym02.png") no-repeat;
			background-size:8px 8px;
			background-position: 15px  13px; 
		}
	}

/* ■ Button slide animation  */

	/* CONTACT お問い合わせ  */ 
	/*　左の動き　*/
		#toCont.LeftMove{
			animation: LeftAnime 0.5s forwards;
		}

		@keyframes LeftAnime{
		  from {
		    opacity: 0;
			transform: translateX(100px);
		  }
		  to {
		    opacity: 1;
			transform: translateX(0);
		  }
		}

	/*　右の動き　*/
		#toCont.RightMove{
			animation: RightAnime 0.5s forwards;
		}
		@keyframes RightAnime{
		  from {
		  	opacity: 1;
			transform: translateX(0);
		  }
		  to {
		  	opacity: 1;
			transform: translateX(100px);
		  }
		}

	/* ◆BUTTON 枠線：左上と右下から枠線が伸びて塗り  7-1-26 P.359 */ 

		/* button 共通設定  - ●線から塗り系 - */

		.btn01 {
			/*線の基点とするためrelativeを指定*/
			position: relative;
			/*ボタンの形状*/
			display: inline-block;
			color:#E7370D;		/* HD-orange01 */
/*			padding: 10px 20px;*/
			background:#eee;
			background:#F5F5F5;
			text-decoration: none;
			outline: none;
			/*アニメーションの指定*/
			transition: all .3s;
			transition-delay: .7s;/*0.7秒遅れてアニメーション*/
		}
		/*hoverした際の、ボタンの背景とテキスト色の変更*/
		.btn01:hover{
			background:#333;
			background:#E7370D;		/* HD-orange01 */
			color: #fff;
		}
		/*線の設定*/
		.btn01 span{
			display: block;
		}
		/*横線の設定*/
		.btn01::before,
		.btn01::after{
			content:"";
			/*絶対配置で線の位置を決める*/   
			position: absolute;
			/*線の形状*/   
			width: 0;
			height: 2px;
			background: #333;
			background: #E7370D;		/* HD-orange01 */
			/*アニメーションの指定*/
			transition: all 0.2s linear;
		}
		/*縦線の設定*/
		.btn01 span::before,
		.btn01 span::after{
			content:"";
			/*絶対配置で線の位置を決める*/   
			position: absolute;
			/*線の形状*/
			width:1px;
			width:2px;
			height:0;
			background: #333;
			background: #E7370D;		/* HD-orange01 */
			/*アニメーションの指定*/
			transition: all 0.2s linear;
		}
		/*hoverした際、線が縦横100%伸びる*/
		.btn01:hover::before,
		.btn01:hover::after {
		 	width: 100%;
		}
		.btn01:hover span::before,
		.btn01:hover span::after {
			height: 100%;
		}

			/*== 左上と右下から枠線が伸びて塗りに */

			/*横線が0.2秒送れて出現*/
			.bordercircle1::before{
				right: 0;
				top: 0;
				transition-delay: 0.2s;
			}
			.bordercircle1::after{
				left: 0;
				bottom: 0;
				transition-delay: 0.2s;
			}

			/*縦線が出現*/
			.bordercircle1 span::before{
				left: 0;
				top: 0;
			}
			.bordercircle1 span::after{
				right: 0;
				bottom: 0;
			}

		/*== 左上と右下から枠線が伸びて塗りに */

		/*横線が0.2秒送れて出現*/
		.bordercircle1::before{
			 right: 0;
			 top: 0;
			 transition-delay: 0.2s;
		}
		.bordercircle1::after{
			left: 0;
			bottom: 0;
			transition-delay: 0.2s;
		}

		/*縦線が出現*/
		.bordercircle1 span::before{
			left: 0;
			top: 0;
		}
		.bordercircle1 span::after{
			right: 0;
			bottom: 0;
		}

	/* ◆BUTTON 枠線：背景が流れる（斜め） */ 

		.btn02 {
			/*アニメーションの起点とするためrelativeを指定*/
				position: relative;
				overflow: hidden;
			/*ボタンの形状*/
				text-decoration: none;
				display: inline-block;
				border: 1px solid #0F1419;	/* ボーダーの色( cacielo-base-blk ) ,太さ */
				padding: 10px 30px;
				text-align: center;
				outline: none;
			/*アニメーションの指定*/  
				transition: ease .2s;
			background-color:#FFF;
		}
		/*ボタン内spanの形状*/
		.btn02 span {
			position: relative;
			z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
			color: #0F1419;		/* cacielo-base-blk */
		}
		.btn02:hover span {
			color:#fff;
		}
		/*== 背景が流れる（斜め） */
		.bgskew::before {
			content: '';
			/*絶対配置で位置を指定*/
			position: absolute;
			top: 0;
			left: -130%;
			/*色や形状*/
			background-color:#0F1419;		/* cacielo-base-blk */
			width:120%;
			height: 100%;
			transform: skewX(-25deg);	/* 水平方向斜めにゆがめる変換 */
		}
		/*hoverした時のアニメーション*/
		.bgskew:hover::before {
			animation: skewanime .5s forwards;/*アニメーションの名前と速度を定義*/
		}

		.btn03 {
			/*アニメーションの起点とするためrelativeを指定*/
				position: relative;
				overflow: hidden;
			/*ボタンの形状*/
				text-decoration: none;
				display: inline-block;
				border: 1px solid #FFF;	/* ボーダーの色 ,太さ */
				padding: 10px 30px;
				text-align: center;
				outline: none;
			/*アニメーションの指定*/  
				transition: ease .2s;
			background:#FFF;
		}
		/*ボタン内spanの形状*/
		.btn03 span {
			position: relative;
			z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
			color: #FFF;
		}
		.btn03:hover span {
			color: #221815;		/* fujico-blk */
		}
		/*== 背景が流れる（斜め） */
		.bgskew03::before {
			content: '';
			/*絶対配置で位置を指定*/
			position: absolute;
			top: 0;
			left: -130%;
			/*色や形状*/
			background-color:#0F1419;		/* cacielo-base-blk */
			width:120%;
			height: 100%;
			transform: skewX(-25deg);	/* 水平方向斜めにゆがめる変換 */
		}

		/*hoverした時のアニメーション*/
		.bgskew03:hover::before {
			background-color:#FFF;
			animation: skewanime .5s forwards;/*アニメーションの名前と速度を定義*/
		}

		@keyframes skewanime {
			100% {
				left:-10%;/*画面の見えていない左から右へ移動する終了地点*/
			}
		}
		.btn04 {
			/*アニメーションの起点とするためrelativeを指定*/
				position: relative;
				overflow: hidden;
			/*ボタンの形状*/
				text-decoration: none;
				display: inline-block;
				padding: 15px 30px;
				text-align: center;
				outline: none;
			/*アニメーションの指定*/  
				transition: ease .2s;
			background-color:#0F1419;
		}
		/*ボタン内spanの形状*/
		.btn04 span {
			position: relative;
			z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
			color: #0F1419;		/* cacielo-base-blk */
			color:#fff;
		}
		.btn04:hover span {
			color:#fff;
			color: #221815;		/* fujico-blk */
		}
		/*== 背景が流れる（斜め） */
		.bgskew04::before {
			content: '';
			/*絶対配置で位置を指定*/
			position: absolute;
			top: 0;
			left: -130%;
			/*色や形状*/
			background-color:#FFF;
			width:120%;
			height: 100%;
			transform: skewX(-25deg);	/* 水平方向斜めにゆがめる変換 */
		}
		/*hoverした時のアニメーション*/
		.bgskew04:hover::before {
			animation: skewanime .5s forwards;/*アニメーションの名前と速度を定義*/
		}


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

			.btn02 {
				padding: 7px 20px;
			}
			.btn03 {
				padding: 7px 20px;
			}
			.btn04 {
				padding: 7px 20px;
			}
		}