/*---------------------------------------------------------------------
parallax
---------------------------------------------------------------------*/


.mainvisual{
	width:100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	position:relative;
	z-index:1;
	background-color:#000;
}
.mainvisual-scroll{
	position: absolute;
	bottom:1%;
	left:0;
	width:100%;
	text-align:center;
	z-index:3;
}
.top-read{
	position: absolute;
	bottom:5%;
	right:5%;
	color:#fff;
	text-align:right;
	z-index:3;
}
#main-copy{
	display:block;
	z-index:100;
	position: absolute;
	top:35%;
	left:6%;
	width: 90%;
}

/*---------------------------------------------------------------------
谷口が追加した第2FVスライダー
---------------------------------------------------------------------*/
#vegas {
    width: auto;
    height: auto;
}

#vegas保存 {
    width: 100vw;
    height: 100vh;;
}

.vegas img {
width:100%;
min-height: 300px;
height: auto;
}

#vegas3 {
    width: 1439px;
    height: 720px;
}

#vegas2 {
    width: 100vw;
    height: 100vh;
}


.bg-slider {
	width: 1439px;
	height: 720px;
	background-position:center center;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bg-slider__title{
	color: #fff;
	font-size: 48px;
	line-height: 1.5;
	font-weight: bold;
	text-align:center;
	text-shadow: 1px 1px 1px #000;
}

/*---------------------------------------------------------------------
白い余白ブロック
---------------------------------------------------------------------*/
.scroll{
text-align:center;padding:8% 5%;
position:relative;
}
.scroll-tit{
position:absolute;
right:1%;
bottom:1%;
font-size:1rem;
}
.scroll img{
    max-width:100%;
    height:auto;
}
@media screen and (max-width:599px){
.scroll-icon{
    width:80px !important;
}
}

/*---------------------------------------------------------------------
１番目のコピーのマーク
---------------------------------------------------------------------*/
.attention-icn{
 color:#DB0200;font-size:4rem;margin-bottom:1em;
}
/*---------------------------------------------------------------------
ブロック2
---------------------------------------------------------------------*/
.u-copy,
.u-copy a{
	color:#fff;
	font-size:2rem;
	text-shadow: 0 0 4px rgba(0,0,0,0.7);
}
.u-copy-sub{
	color:#fff;
	font-size:2.1rem;
	text-shadow: 0 0 4px rgba(0,0,0,0.7);
	margin-bottom:2em;
    	margin:9% 3% 4% 3%;
}
.u-txt{
	color:#fff;
	font-size:1.7rem;
	text-shadow: 0 0 4px rgba(0,0,0,0.7);
	background-color:rgba(0,0,0,0.3);
	padding:3%;
	line-height:1.8;
	
}
.u-num{
	background-color:#DB0200;
	width:7rem;
	height:5.9rem;
	font-size:1.4rem;
	line-height:2.6rem;
	margin-bottom:3%;
	text-align:center;
	margin-right:2%;
}
.u-num span{
	display:block;
	font-size:3.3rem;
}
.u-tit{
	font-size:3.8rem;
	margin-bottom:3%;
}

.u-wrap:after{
	content:"";
	display:block;
	clear:both;
}
.u-bg-sub{
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
    text-align:left;
    float:left;
    width:100%;
    min-height:350px;
    border:1px solid #000;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}
.u-bg{
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
    padding:9% 3%;
    text-align:left;
    float:left;
    width:50%;
    min-height:350px;
    border:1px solid #000;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}

@media screen and (max-width:768px){
.u-tit{
	font-size:3rem;
}
.u-bg{
    width:100%;
    min-height:150px;
}
}
.u-01{
    background-image:url(../images/top/u-01.jpg);
}
.u-01:hover{
    background-image:url(../images/top/u-01_over.jpg);

}
.u-01-ov{
    background-image:url(../images/top/u-01_over.jpg);

}

.u-02{
    background-image:url(../images/top/u-02.jpg);
}
.u-02:hover{
    background-image:url(../images/top/u-02_over.jpg);
}
.u-02-ov{
    background-image:url(../images/top/u-02_over.jpg);
}
.u-03{
    background-image:url(../images/top/u-03.jpg);
}
.u-03:hover{
    background-image:url(../images/top/u-03_over.jpg);
}
.u-03-ov{
    background-image:url(../images/top/u-03_over.jpg);
}
.u-04{
    background-image:url(../images/top/u-04.jpg);
}
.u-04:hover{
    background-image:url(../images/top/u-04_over.jpg);
}
.u-04-ov{
    background-image:url(../images/top/u-04_over.jpg);
}
.u-05{
    background-image:url(../images/top/u-05.jpg);
}
.u-05:hover{
    background-image:url(../images/top/u-05_over.jpg);
}
.u-05-ov{
    background-image:url(../images/top/u-05_over.jpg);
}
.u-06{
    background-image:url(../images/top/u-06.jpg);
}
.u-06:hover{
    background-image:url(../images/top/u-06_over.jpg);
}
.u-06-ov{
    background-image:url(../images/top/u-06_over.jpg);
}
/*---------------------------------------------------------------------
bloc 3
---------------------------------------------------------------------*/
.b3{
    padding:0 0 6% 0;
    background-color:#fff;

}

.b3-copy{
  z-index:100;
  box-sizing:border-box;
  text-align:left;
   width: 30%;
   background-color:#BA0004;
   padding:2%;
}

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

.b3-copy{
   width: 60%;
}
}
.b3-copy .tit{
  margin-bottom:1em;
  color:#fff;
}
.b3-copy .tit h3,
.b3-copy .tit p{
  font-size: 2.2rem;
  display:block;
 }

.b3-copy p{
  font-size: 1.6rem;
  color:#fff;
}
.b3-copy p a{
  color:#fff;
}
.jirei_prev,.jirei_next{
position:absolute;top:48%;left:10px;width:40px;height:40px;margin:-20px 0 0 0;padding:0;font-size:50px;font-weight:100;line-height:28px;color:white;text-align:center;background:#222;border-radius:23px;opacity:0.5
} 
.jirei_prev:hover,.jirei_next:hover{
color:white;text-decoration:none;opacity:0.9
} 
.jirei_next{
left:auto;right:10px
}

/*---------------------------------------------------------------------
お客様メッセージ
---------------------------------------------------------------------*/
.b4{
    padding:6% 0;
    background-color:#efefef;
}

.film_roll_wrapper .film_roll_child .b4-img,
.film_roll_wrapper .film_roll_child .b4-txt{
	opacity:0.3;
}
.film_roll_wrapper .active .b4-img,
.film_roll_wrapper .active .b4-txt{
	opacity:1;
}
.b4-box img{
    max-width:100%;
    height:auto;
}

.b4-box{
	color:#fff;
	font-size:1.4rem;
	box-sizing:border-box;
	width:600px;
}
@media screen and (max-width:599px){
.b4-box{
	float:left;
	width:80%;
}
}

.b4-img{
	position:relative;
	text-align:center;
	width:100%;
	margin:0 auto;
	display:table;
	table-layout:fixed;
}
.b4-img p{
	display:table-cell;
	vertical-align:middle;
}
.b4-icon{
	position:absolute;
	left:1%;
	top:1%;
}
.b4-txt{
	padding:2% 3%;
	width:100%;
	margin:0 auto;
	background-color:#333;
}
.film_roll_wrapper .active .b4-txt{
	background-color:#BA0004;
}
.b4-eng{
	margin-bottom:2%;
	color:#fff;
	font-size:2rem;
	height:3em;
}
@media screen and (max-width:499px){
.b4-eng{
	height:4em;
}
}
.b4-btn a{
	margin:3% auto 0 auto;
	padding:1% 5%;
	border:2px solid #333;
	color:#333;
   	background-color:#fff;
	font-size:1.4rem;
	display:inline-block;
	
}
.b4-btn a:hover{
   	background-color:#333;
	color:#fff;
}

@media screen and (max-width:768px){
.b4-btn a{
	padding: 2% 15%;
	margin: 3% auto;
	font-size:1.8rem;
}

}
.b4-copy{
   text-align:center;
}

@media screen and (max-width:768px){
.b4-copy img{
   max-width:80%;
    padding-left:0%;
}
}
@media screen and (max-width:599px){
.b4-copy img{
   max-width:60%;
    padding-left:0%;
}
}



/*===================================================================================*/
/* ニュース                                                    */ 
/*===================================================================================*/
.news-area{
	padding:6% 0;
}

.news-date{
 	color:#fff;
	display:block;
	font-size:90%;
	float:left;
	margin-right:2%;
	width:120px;
	background-color:#999;
	text-align:center;
	
}


.news-list{
	margin:0;	
}

.news-list li{
	padding:2%;
	line-height:1.4em !important;
	border-bottom:1px dotted #ccc;
	font-size:1.4rem;
	
}

.news-list li:after{
	content:"";
	display:block;
	clear:both;
	
}
.news-title{
	font-size:2.4rem;
	margin-bottom:2%;
}
.news-list li a:hover{
	text-decoration:underline;
}
@media screen and (max-width:768px){ 
.news-date{
	float:auto;
	margin-bottom:2%;
	padding:1%;
	width:120px;
	
}

.news-list li{
	font-size:1.8rem;
}
.news-txt{
	width:100%;
	float:left;
	display:block;
}
}