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


.interview_read{
  width: 790px;
 height: 100px;
 margin: 0px auto;
 padding: 0px 0px;
 display: flex;
 align-items: center;
 justify-content: center;
}

.interview_read p{
 font-size: 16px;
 color: #000;
 text-align: left;
 line-height: 1.5em;
}

.interview{
 width: 990px;
 height: 570px;
 margin: 0px auto;
 padding: 0px 0px;
 display: flex;
 flex-wrap: wrap;
}

.interview02{
 width: 660px;
 height: 570px;
 margin: 0px auto;
 padding: 0px 0px;
}

.interview_box{
width: 300px;
height: 560px;
background: #000;
background: #B02822;
margin: 10px;
padding: 1px 0px 0px 0px;
float: left;
}


.interview_box h3{
width: 300px;
height: 50px;
margin: 20px auto 0px;
font-size: 20px;
text-align: center;
color: #fff;
font-weight: normal;
line-height: 1.3em;
 display: flex;
 justify-content: center;
  align-items: center;
}

.interview_box h4{
width: 300px;
height: auto;
margin: 24px auto 0px;
font-size: 30px;
text-align: center;
color: #fff;
font-weight: normal;
line-height: 1em;
}

.small{
font-size: 24px;
}


.interview_box h5{
width: 300px;
height: auto;
margin: 22px auto 0px;
font-size: 21px;
text-align: center;
color: #fff;
font-weight: normal;
line-height: 1.2em;
}

.interview_photo{
width: 222px;
height: 241px;
margin: 24px auto 20px;
text-align: center;
}

.interview_photo img{
width: 100%;
height: auto;
margin: 0px 0px;
text-align: center;
}


/*== ボタン共通設定 */
.btn_movie{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
	   overflow: hidden;
    /*ボタンの形状*/
	   text-decoration: none;
	   display: inline-block;
    width: 260px;
    height: 41px;
   	border: 1px solid #B02822;/* ボーダーの色と太さ */
    margin: 0px auto;
    background-color: #B02822;
    background-color: #000;
    padding: 9px 0px 0px 0px;
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
    left: 20px;
}

/*ボタン内spanの形状*/
.btn_movie span {
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color: #fff;
 font-size: 25px;
 text-align: center;
 font-weight: bold;
 background-image: url("../img/outline/play-circle.svg");
 width: 230px;
 height: 35px;
 display: block;
 margin: 0px auto;
 background-repeat: no-repeat;
 background-position: right 0px top 0px;
 padding: 2px 0px 0px 0px;
}

.btn_movie:hover span{
	color:#B02822;
 background-image: url("../img/outline/play-circle_over.svg"); 
  width: 230px;
 height: 35px;
 display: block;
 background-repeat: no-repeat;
 background-position: right 0px top 0px;
}

/*== 背景が流れる（右から左） */
.bgright:before {
 	content: '';
    /*絶対配置で位置を指定*/
 	position: absolute;
 	top: 0;
 	left: 0;
 	z-index: 2;
    /*色や形状*/
 	background:  #fff;/*背景色*/
 	width: 100%;
	height: 100%;
    /*アニメーション*/
 	transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
 	transform: scale(0, 1);
	transform-origin: right top;
}

/*hoverした際の形状*/
.bgright:hover:before{
	transform-origin:right top;
	transform:scale(1, 1);
}

/*comingsoon*/
.btn_coming{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
	   overflow: hidden;
    /*ボタンの形状*/
	   text-decoration: none;
	   display: inline-block;
    width: 260px;
    height: 41px;
   	border: 1px solid #B02822;/* ボーダーの色と太さ */
    margin: 0px auto;
    background-color: #B02822;
    background-color: #000;
    padding: 9px 0px 0px 0px;
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
    left: 20px;
    color: #fff;
    font-size: 25px;
}

 
 /*ここからスマホ-----------------------------------------------*/
 
 @media screen and (max-width: 767px) {
  
  
 .interview_read{
  width: 90%;
 height: auto;
 margin: 0px auto;
 padding: 5% 0px;
 display: flex;
 align-items: center;
 justify-content: center;
}

.interview_read p{
 font-size: 18px;
 color: #000;
 text-align: left;
 line-height: 1.5em;
}
  

  .interview{
 width: 90%;
 height: auto;
 margin: 0px auto;
 padding: 0px 0px;
}
  
 .interview02{
 width: 90%;
 height: auto;
 margin: 0px auto;
 padding: 0px 0px;
}

.interview_box{
width: 80%;
height: auto;
background: #000;
background: #B02822;
margin: 10px auto;
padding: 1px 0px 5% 0px;
float: none;
}


.interview_box h3{
width: 100%;
height: auto;
margin: 20px auto 0px;
font-size: 20px;
text-align: center;
color: #fff;
font-weight: normal;
line-height: 1.3em;
}

.interview_box h4{
width: 100%;
height: auto;
margin: 24px auto 0px;
font-size: 30px;
text-align: center;
color: #fff;
font-weight: normal;
line-height: 1em;
}

.interview_box h5{
width: 100%;
height: auto;
margin: 22px auto 0px;
font-size: 21px;
text-align: center;
color: #fff;
font-weight: normal;
line-height: 1.3em;
}

.interview_photo{
width: 70%;
height: auto;
margin: 24px auto 20px;
text-align: center;
}

.interview_photo img{
width: 100%;
height: auto;
margin: 0px 0px;
text-align: center;
}

/*== ボタン共通設定 */
.btn_movie{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
	   overflow: hidden;
    /*ボタンの形状*/
	   text-decoration: none;
	   display: inline-block;
    width: 90%;
    height: 41px;
   	border: 1px solid #B02822;/* ボーダーの色と太さ */
    margin: 0px auto;
    background-color: #B02822;
    background: #000;
    padding: 9px 0px 0px 0px;
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
    left: 5%;
}

/*ボタン内spanの形状*/
.btn_movie span {
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color: #fff;
 font-size: 25px;
 text-align: center;
 font-weight: bold;
 background-image: url("../img/outline/play-circle.svg");
 width: 90%;
 height: 35px;
 display: block;
 margin: 0px auto;
 background-repeat: no-repeat;
 background-position: right 0px top 0px;
 padding: 2px 0px 0px 0px;
}

.btn_movie:hover span{
	color:#B02822;
 background-image: url("../img/outline/play-circle_over.svg"); 
 width: 90%;
 height: 35px;
 display: block;
 background-repeat: no-repeat;
 background-position: right 0px top 0px;
}

/*== 背景が流れる（右から左） */
.bgright:before {
 	content: '';
    /*絶対配置で位置を指定*/
 	position: absolute;
 	top: 0;
 	left: 0;
 	z-index: 2;
    /*色や形状*/
 	background:  #fff;/*背景色*/
 	width: 100%;
	height: 100%;
    /*アニメーション*/
 	transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
 	transform: scale(0, 1);
	transform-origin: right top;
}

/*hoverした際の形状*/
.bgright:hover:before{
	transform-origin:right top;
	transform:scale(1, 1);
}

/*comingsoon*/
.btn_coming{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
	   overflow: hidden;
    /*ボタンの形状*/
	   text-decoration: none;
	   display: inline-block;
    width: 90%;
    height: 41px;
   	border: 1px solid #B02822;/* ボーダーの色と太さ */
    margin: 0px auto;
    background-color: #B02822;
    background-color: #000;
    padding: 9px 0px 0px 0px;
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
    left: 5%;
}  
  
}