@charset "UTF-8";


.fire_main_img{
	margin: 0px auto;
	padding-top: 30px;
}

.firepack_btn_sp{
	display: flex;
}

.firepack_btn_pc{
	display: none;
}

.firepack_btn_spt{
	width:100%;
	text-align: center
}

.firepack_btn_spt a:hover{
		opacity: 0.7;
		transition-property: all;
		transition: 0.3s linear;
		-webkit-transition: ease .3s;
		transition: ease .3s;
}

.firepack_btn_spt_one{
	width:50%;
	text-align: center
}

.firepack_btn_spt_one a:hover{
		opacity: 0.7;
		transition-property: all;
		transition: 0.3s linear;
		-webkit-transition: ease .3s;
		transition: ease .3s;
}

.dis_no{
	display:none;
}

/*===============


 見出しタイトル


===============*/

.firepack_h2{
  padding: 1rem 2rem;
  border-left: 6px double #000;
  background: #FFF;
}




/*===============


 ボタンアニメーション


===============*/


/* ボタン共通設定 */
.btn04 {
    /*線の基点とするためrelativeを指定*/
  position: relative;
    /*ボタンの形状*/
  display:inline-block;
    padding: 10px 30px;
  width: 100%;
  color:#333;
  border:1px solid #333;
    text-decoration: none;
    outline: none;
    /*はみ出す背景色を隠す*/
  overflow: hidden;
	font-size:1.3em;
	text-align: center;
	border-radius: 1rem;
}

/*hoverした際のボタンの形状*/
.btn04:hover {
  color:#FFF;
  border-color: transparent;
    /*色の変化を遅らせる*/
  transition-delay: .6s;
  /*border:1px solid #333;*/
}

/*線の設定*/
.btn04 span{
    display: block;
　　text-align: center;
    z-index: 2;
}

/*== 線から塗に変化（中央から外） */

/*線の設定*/
.bordercenter span::before,
.bordercenter span::after{
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    /*線の形状*/
    width: 100%;
    height:1px;
    background: #555;
    /*アニメーションの設定*/
  transition: all .3s;
    transform: scale(0,1);
    transform-origin: center;
}

/*上線*/
.bordercenter span::before {
    left:0;
    top:0;
}

/*下線*/
.bordercenter span::after {
    left:0;
    bottom:0;
}

/*hoverをすると線が伸びる*/
.bordercenter:hover span::before,
.bordercenter:hover span::after{
    transform: scale(1,1);
}

/*背景の設定*/
.bordercenter::before{
  content: '';
    /*絶対配置で線の位置を決める*/
  position: absolute;
  left: 0;
    top:0;
  z-index: -1;
    /*背景の形状*/
  height: 100%;
  width:100%;
  background:#555;
    /*アニメーションの設定*/
  transition: all .3s;
    transform: scale(0,1);
    transform-origin: center;
}

/*hoverをすると背景が伸びる*/
.bordercenter:hover::before{
  width: 100%;
    /*0.4秒遅れてアニメーション*/
  transition-delay: .4s;
    transform: scale(1,1);
}



.fire_pack_wrapp .btn04 a{

}



.fire_pack_wrapp .btn04 span{
	text-align: center;
	/*font-size: 1.3em;*/	
}


/*===============


 ボタン形状


===============*/

.btn--orange,
a.btn--orange {
  color: #fff;
  background-color: #eb6100;
}
.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #f56500;
}

.fa-position-left {
  position: absolute;
  top: calc(50% - .5em);
  left: 1rem;
}

.fire_pack_wrapp a{
	width:95%;
	margin: 0 auto;
}




/*===============


 ボタンアニメーション2


===============*/



	.drs_movie_size{
		width:920px;
		height:393px;
	}

	.drs_intermovie_size{
		width:480px;
		height:258px;
	}


/**印刷

SyntaxHighlighterについて*/
    /* デフォルト：479px以下用（スマートフォン用）の記述 */ 

@media screen and (max-width:480px){
	
	.btn04{
		font-size:1em;
	}

	.fire_pack_wrapp{
		width: 95%;
		margin: 20px auto;
	}
	
	.firepack_btn_spt{
		width:45%;
		text-align: center;
		margin: 0 auto;
	}
	
	.firepack_btn_spt_one{
		width:45%;
		text-align: right;
		/*margin: 0 auto;*/
	}	
	
	
/*============

MEGA DRS

============*/

	.drs_exp{
		width: 100%;
	}	
	
	.drs_voice_left{
		width: 40%;
		margin: 5px auto;
	}
	
	.drs_voice_right{
		width: 100%;
	}
	
	.drs_movie_size{
		width:100%;
		height:177px;
	}
	
	.drs_intermovie_size{
		width:100%;
		height:177px;
	}
	
}


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

	
	.fire_pack_wrapp{
		width: 95%;
		margin: 20px auto;
	}
	
	.firepack_btn_spt{
		width:45%;
		text-align: center;
		margin: 0 auto;
	}
	
	.firepack_btn_spt_one{
		width:50%;
		/*margin: 0 auto;*/
	}
	
	.firepack_btn_spt_one img{
		width:90%;
		margin: 0 auto;
	}
	
	
/*============

MEGA DRS

============*/

	.drs_exp{
		width: 100%;
	}
	
	.drs_voice_left{
		width: 15%;
		margin: auto 0px;
	}
	
	.drs_voice_right{
		width: 80%;
	}
	
	.comment-left{
		position: relative;
		  display: inline-block;
		  margin: 1.5em 0 1.5em 15px;
		  padding: 10px 10px;
		  min-width: 120px;
		  max-width: 100%;
		  color: #555;
		  font-size: 16px;
		  background: #FFF;
		  border: solid 3px #999;
		  box-sizing: border-box;
		border-radius: 15px;
	}
	
	.comment-left:before {
		content: "";
		  position: absolute;
		  top: 50%;
		  left: -24px;
		  margin-top: -12px;
		  border: 12px solid transparent;
		  border-right: 12px solid #FFF;
		  z-index: 2;
	}
	
	.comment-left:after {
		  content: "";
		  position: absolute;
		  top: 50%;
		  left: -30px;
		  margin-top: -14px;
		  border: 14px solid transparent;
		  border-right: 14px solid #999;
		  z-index: 1;
		}
	
		.drs_movie_size{
		width:920px;
		height:393px;
	}
	
} 



@media screen and (min-width:767px){ 
	
	.fire_pack_wrapp{
		width: 95%;
		max-width: 600px;
		margin: 20px auto;
	}
	
	

	
	.firepack_btn_sp{
		display: none;
	}

	.firepack_btn_pc{
		display: flex;
	}


/*============

MEGA DRS

============*/

	.drs_exp{
		width: 50%;
	}	

    /* 768px以上用（タブレット用）の記述 */ 
} 



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

    /* 980px以上用（PC用）の記述 */ 
} 

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




}