@charset "UTF-8";


/*--------------------------------------------
▼目次
  01. 共通項目　(固定ナビ・端末別画像の表示)
  02. ヘッダー
  03. フッター
  04. メインビジュアル_TOP
  05. メインビジュアル_Page
  06. パンくず
  07. セクション
  08. 見出しボーダーの設定
  09. マージンの設定
  10. パディングの設定
  11. フォント色の設定
  12. フォント揃えの設定
  13. フォント下線の設定
  14. ボタンの設定
 --------------------------------------------*/


/*-----------------------------------------------------------------------------------------
　▼01.共通項目
-----------------------------------------------------------------------------------------*/

/* 固定ナビの表示設定*/
.icon_box_bk {position: fixed; top:200px; right: 0;}
.icon_box{margin-bottom:25px;}


/* 画像の表示設定*/
.sp{ display:block;}
.tb{ display:none;}
.pc{ display:none;}


@media screen and (min-width: 600px) {	
/* 画像の表示設定*/
.sp{ display:none;}
.tb{ display:block;}
.pc{ display:block;}
}
}



/*-----------------------------------------------------------------------------------------
　▼02.ヘッダー
-----------------------------------------------------------------------------------------*/
	header{ 
}



@media screen and (min-width: 640px) {    

}

/*-----------------------------------------------------------------------------------------
　▼03.フッター
-----------------------------------------------------------------------------------------*/
.foot_scroll{
	margin: 2em 5% 0 0;
	text-align: right;}
	
	footer{ 

    width: 100%;
	background:#1A1A1A;
	text-align: center;
    color: #FFFFFF;}

    footer p{
	padding: 2em 0;
    width: 100%;
	text-align: center;
    line-height: 1.8;}
	

@media screen and (min-width: 640px) {
	

	
}


@media only screen and (min-width: 1000px) {

}


/*-----------------------------------------------------------------------------------------
　▼04.メインビジュアル_TOP
-----------------------------------------------------------------------------------------*/
	


/*-----------------------------------------------------------------------------------------
　▼05.メインビジュアル_Page
-----------------------------------------------------------------------------------------*/	
.mv {
	width: 100%;
}



/*-----------------------------------------------------------------------------------------
　▼06.パンくず
-----------------------------------------------------------------------------------------*/
	.pankuzu{ 
	background: #000000;
	color: #FFFFFF;
	font-size: 0.8em;
	width: 100%;}


/*-----------------------------------------------------------------------------------------
　▼07.セクション
-----------------------------------------------------------------------------------------*/
	section.colum { 
	clear: both;
	display: block;
	width: 100%;}
		
		/*-----レウアウト設定------------*/
		div.grid {
width: 100%; height: auto;}
         
			/*-------インナー設定------------*/
            div.inner {/*均等*/
			width: 100%;}

            div.inner50 {/*均等*/
			width: 100%;}

			div.flex_inner {/*均等*/
			flex: 1;
}
		



@media screen and (min-width: 600px) {
	section.colum { 
	clear: both;
	display: block;
	padding: 0em;
	width: 100%;
	max-width: 2000px;}
		
		/*-----レウアウト設定------------*/
		div.grid {
		display: -webkit-flex;
		display: flex;
		margin: 0 auto;
		width: 1000px;
		flex-wrap: wrap;}
}



/*-----------------------------------------------------------------------------------------
　▼08.見出しボーダーの設定
-----------------------------------------------------------------------------------------*/

.boder_b_white{border-bottom: 1px solid #FFFFFF;}
.boder_t_white{border-top: 1px solid #FFFFFF;}

.boder_b_black{border-bottom: 1px solid #000000;}
.boder_top_gray {border-top: 1px solid #B3B3B3;}

.boder_b_gray5{border-bottom: 5px solid #777777;}
.boder_b_gold5{border-bottom: 5px solid #C3B40E;}




/*-----------------------------------------------------------------------------------------
　▼09.マージンの設定
-----------------------------------------------------------------------------------------*/
.mg_b01 {margin-bottom: 1em;}
.mg_b02 {margin-bottom: 2em;}
.mg_b03 {margin-bottom: 3em;}
.mg_b04 {margin-bottom: 4em;}
.mg_b05 {margin-bottom: 5em;}
.mg_b06 {margin-bottom: 6em;}
.mg_b07 {margin-bottom: 7em;}
.mg_b08 {margin-bottom: 8em;}
.mg_b09 {margin-bottom: 9em;}
.mg_b10 {margin-bottom: 10em;}

.mg_t01 {margin-top: 1em;}
.mg_t02 {margin-top: 2em;}
.mg_t03 {margin-top: 3em;}
.mg_t04 {margin-top: 4em;}
.mg_t05 {margin-top: 5em;}
.mg_t06 {margin-top: 6em;}
.mg_t07 {margin-top: 7em;}
.mg_t08 {margin-top: 8em;}
.mg_t09 {margin-top: 9em;}
.mg_t10 {margin-top: 10em;}


/*-----------------------------------------------------------------------------------------
　▼10.パディングの設定
-----------------------------------------------------------------------------------------*/
.pd_01 {padding: 1em;}
.pd_02 {padding: 2em;}
.pd_03 {padding: 3em;}
.pd_04 {padding: 4em;}
.pd_05 {padding: 5em;}
.pd_06 {padding: 6em;}
.pd_07 {padding: 7em;}
.pd_08 {padding: 8em;}
.pd_09 {padding: 9em;}
.pd_10 {padding: 10em;}

.pd_b01 {padding-bottom: 1em;}
.pd_b02 {padding-bottom: 2em;}
.pd_b03 {padding-bottom: 3em;}
.pd_b04 {padding-bottom: 4em;}
.pd_b05 {padding-bottom: 5em;}
.pd_b06 {padding-bottom: 6em;}
.pd_b07 {padding-bottom: 7em;}
.pd_b08 {padding-bottom: 8em;}
.pd_b09 {padding-bottom: 9em;}
.pd_b10 {padding-bottom: 10em;}

.pd_t01 {padding-top: 1em;}
.pd_t02 {padding-top: 2em;}
.pd_t03 {padding-top: 3em;}
.pd_t04 {padding-top: 4em;}
.pd_t05 {padding-top: 5em;}
.pd_t06 {padding-top: 6em;}
.pd_t07 {padding-top: 7em;}
.pd_t08 {padding-top: 8em;}
.pd_t09 {padding-top: 9em;}
.pd_t10 {padding-top: 10em;}

.pd_lr01 {padding-left: 1em; padding-right: 1em;}
.pd_lr02 {padding-left: 2em; padding-right: 2em;}
.pd_lr03 {padding-left: 3em; padding-right: 3em;}
.pd_lr04 {padding-left: 4em; padding-right: 4em;}
.pd_lr05 {padding-left: 5em; padding-right: 5em;}
.pd_lr06 {padding-left: 6em; padding-right: 6em;}
.pd_lr07 {padding-left: 7em; padding-right: 7em;}
.pd_lr08 {padding-left: 8em; padding-right: 8em;}
.pd_lr09 {padding-left: 9em; padding-right: 9em;}
.pd_lr10 {padding-left: 10em; padding-right: 10em;}

.pd_4040 {padding: 4em 0;}


/*-----------------------------------------------------------------------------------------
　▼11.フォント色の設定
-----------------------------------------------------------------------------------------*/
.txt_gold {color: #C3B40E;}
.txt_white {color: #FFFFFF;}
.txt_black {color: #000000;}
.txt_gray {color: #777777;}
.txt_blue {color: #29abe2;}
.txt_orange {color: #fbb03b;}
.txt_pink {color: #e05068;}
.txt_green {color: #39b54a;}
.txt_red {color: #c1272d;}
.txt_red2 {color: #f16969;}




/*-----------------------------------------------------------------------------------------
　▼12.フォント揃えの設定
-----------------------------------------------------------------------------------------*/
.txt_ll{text-align: left;}
.txt_lc{text-align: left;}
.txt_lr{text-align: left;}

.txt_cl{text-align: center;}
.txt_cc{text-align: center;}
.txt_cr{text-align: center;}

.txt_rl{text-align: right;}
.txt_rc{text-align: right;}
.txt_rr{text-align: right;}


@media screen and (min-width: 600px) {
.text_ll{text-align: left;}
.text_lc{text-align: center;}
.text_lr{text-align: right;}

.text_cl{text-align: left;}
.text_cc{text-align: center;}
.text_cr{text-align: right;}

.text_rl{text-align: left;}
.text_rc{text-align: center;}
.text_rr{text-align: right;}
}



/*-----------------------------------------------------------------------------------------
　▼13.フォント下線の設定
-----------------------------------------------------------------------------------------*/
.txtboder_yello{background: linear-gradient(transparent 50%, #fcee76 50%);}


/*-----------------------------------------------------------------------------------------
　▼14.ボタンの設定
-----------------------------------------------------------------------------------------*/
a.square_btn_blue {/* 四角のシンプルボタン */
	border: solid 2px #468db8;
	color: #468db8;
	display: inline-block;
	text-decoration: none;
	width:80%;
	margin: 0 10% 2em 10%;
	text-align: center;
	padding:0.8em;}

	a.square_btn_blue:hover {
	background: #468db8;
	color: #FFFFFF;}


a.square_btn_black {/* 四角のシンプルボタン */
	border: solid 1px #000000;
	color: #000000;
	display: inline-block;
	text-decoration: none;
	width:80%;
	margin: 0em 10% 2em 10%;
	text-align: center;
	padding: 0.8em;}

	a.square_btn_black:hover {
    border: solid 1px #CCCCCC;
	background: #CCCCCC;
	color: #FFFFFF;}


a.square_btn_yello {/* 四角のシンプルボタン */
	border: solid 1px #194122;
	background: #194122;
	color: #FFFFFF;
	display: inline-block;
	text-decoration: none;
	width:80%;
	margin: 0 10% 2em 10%;
	text-align: center;
	padding: 0.8em;}

	a.square_btn_yello:hover {
	background: #192b22;
	color: #FFFFFF;}


a.square_btn_orange {/* 四角のシンプルボタン */
	border: solid 1px #f7931e;;
	background: #f7931e;
	color: #FFFFFF;
	display: inline-block;
	text-decoration: none;
	width:90%;
	margin: 2em 5%;
	text-align: center;
	padding: 1.2em;}

	a.square_btn_orange:hover {
	background: #fbb03b;
	color: #FFFFFF;}


a.slide_btn_white { /* スライドボタン　白→黒 */
	position: relative;
	display: inline-block;
	padding: 1em 10em;
	border: 2px solid #333;
	color: #333333;
	text-align: center;
	text-decoration: none;
	transition: .3s;}

	a.slide_btn_white:hover {
  	color: #FFFFFF;}

	a.slide_btn_white::before {
 	position: absolute;
 	top: 0;
  	right: 0;
  	bottom: 0;
  	left: 0;
  	z-index: -1;
  	content: '';
  	background: #333333;
  	transform-origin: right top;
  	transform: scale(0, 1);
  	transition: transform .3s;}

	a.slide_btn_white:hover::before {
  	transform-origin: left top;
  	transform: scale(1, 1);}


a.slide_btn_orange { /* スライドボタン　白→オレンジ */
	position: relative;
	display: inline-block;
	padding: 1em 4em;
	border: 2px solid #fbb03b;
	color: #e0800a;
	text-align: center;
	text-decoration: none;
	transition: .3s;}

	a.slide_btn_orange:hover {
  	color: #FFFFFF;}

	a.slide_btn_orange::before {
 	position: absolute;
 	top: 0;
  	right: 0;
  	bottom: 0;
  	left: 0;
  	z-index: -1;
  	content: '';
  	background: #fbb03b;
  	transform-origin: right top;
  	transform: scale(0, 1);
  	transition: transform .3s;}

	a.slide_btn_orange:hover::before {
  	transform-origin: left top;
  	transform: scale(1, 1);}