@charset "utf-8";
/* CSS Document */

#promotion {
	background:#FFFFFF;
	line-height:1.6;
	padding-bottom:70px;
	font-size:25px;
}
 
#promotion p {
	color:#333;
}

#promotion p span{
	display:inline-block;
}

#promotion p.center {
	font-size:40px;
	margin-top:0;
	margin-bottom: 30px;
	border-top:1px solid #222;
	border-bottom:1px solid #222;
	padding: 0.5em 0 0.5em;
}

#promotion figure{
	margin:0 0 40px;
}

.promotion_inner {
	width:100%;
	max-width:950px;
	margin:0 auto;
}

.promotion_box1{
	justify-content:space-between;
	margin-bottom:70px;
}

.promotion_box1 p{
	margin:0;
	/*font-size:25px;*/
	width:60%;
}
.promotion_box1 p a{
	color: #222;
	display:inline;
}

.promotion_box2{
	width:500px;
	margin:0 auto;
}

.promotion_box2 p{
	/*font-size:25px;*/
	margin:0;
	width:50%;
}
.promotion_box2 div{
	width:50%;
}

/*塗りから線に変わる*/
.promotion_box1 .btnchangeline {
		
	/*font-size:25px;*/
  	display:flex;
	align-items:center;
	justify-content:center;
	width:35%;
	
    /*線の基点とするためrelativeを指定*/
  position:relative;
	
    /*ボタンの形状*/  
  color:#331907;
   
/*  display:inline-block;*/
	text-decoration: none;
    outline: none;
    /*アニメーションの指定*/   
  transition:all 0.3s ease-in-out;
}

/*線の設定*/
.promotion_box1 .btnchangeline::before {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    /*線の形状*/
    width: 100%;
    height: 100%;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
    /*はじめは透過0に*/
    opacity: 0;
    transform: scale(0, 1);
    /*アニメーションの指定*/   
    transition: all 0.3s;
}

/*背景の設定*/
.promotion_box1 .btnchangeline::after {
    content: '';
    /*絶対配置で背景の位置を決める*/
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    /*背景の形状*/
    width: 100%;
    height: 100%;
    background-color:#331907;
    /*アニメーションの指定*/ 
    transition: all 0.3s;
}

/*hoverした際の背景と線の形状*/
.promotion_box1 .btnchangeline:hover::before {
    opacity: 1;/*不透明に*/ 
    transform: scale(1, 1);/*X方向に線を伸ばす*/
}

.promotion_box1 .btnchangeline:hover::after {
    opacity: 0;/*透過0に*/
    transform: scale(0, 1);/*X方向に背景を縮小*/
}

/*テキストの設定*/
.promotion_box1 .btnchangeline span {
    /*テキストを前面に出すためz-indexの値を高く設定*/  
  position: relative;
  z-index: 2;
    /*テキストの形状*/
  color: #fff;
    /*アニメーションの指定*/   
    transition: all 0.3s;
}

/*hoverした際のテキストの形状*/
.promotion_box1 .btnchangeline:hover span {
    letter-spacing: 2px;
  color: #333;
}


@media screen and (max-width: 768px) {	
	#promotion{
		padding-top:70px;
		padding-bottom:10px;
		font-size:16px;
	}
		
	#promotion p.center {
		font-size:30px;
		padding: 0.7em 0 0.7em;
	}
	
	#promotion figure.br-sp{
		margin-bottom:50px;
	}
	
	.promotion_inner{
		width:78.125%;/*600/768*/
		/*width:90%;*/
		margin:0 auto;
	}
	
	.promotion_box1{
		margin-bottom:50px;
	}
	
	.promotion_box1 p{
		margin:0 0 30px;
		width:100%;
	}
	
	.promotion_box1 .btnchangeline{
		width:100%;
		height:100px;
		font-size:25px;
	}
	.promotion_box2{
		width:100%;
	}

	.promotion_box2 p{
		text-align:center;
		width:100%;
		margin-bottom:20px;
	}
	.promotion_box2 div{
		width:45%;
		margin:0 auto;
	}
	
}