@charset "utf-8";
/*--
中 font-size:96%;
小 font-size:88%;
--*/
/*-------------------------------------*/
/* topArea */
/*-------------------------------------*/
.bnSlide{
padding-bottom: 50px;
width: 100%;
overflow: hidden;
}
.bnSlide li .sp{
display: none;
}
@media screen and (max-width:640px){
.bnSlide li .tab-pc{
display: none;
}
.bnSlide li .sp{
display: block;
}
}
.bnSlide li img{
width: 100%;
height: auto;
}
/* Arrows/dot */
.bnSlide .slick-dots{
display:inline-block;
position: absolute;
left: 50%;
bottom:23px;
height: 8px;
transform: translate(-50%,0);
}
@media screen and (max-width:640px){
.bnSlide .slick-dots{
bottom:30px;
}
}
.bnSlide .slick-dots li{
display:inline-block;
margin:0 10px;
position: relative;
width: 9px;
}
@media screen and (max-width:640px){
.bnSlide .slick-dots li{
margin:0 6px;
}
}
.bnSlide .slick-dots li button{
position: absolute;
top: 0;
left: 0;
width: 9px;
height: 9px;
background:#666666;
border:none;
font-size:0;
padding:0;
transition: all  0.6s ease;
cursor:pointer;
-webkit-appearance: none;
border-radius: 50%;
}
.bnSlide .slick-dots li button:focus { outline: none; }
.bnSlide .slick-dots li:hover button,
.bnSlide .slick-dots li.slick-active button{
background:#f97c38;
}
.bnSlide .slick-arrow{
position: absolute;
top: calc(50% - 60px);
width: 30px;
height: 60px;
font-size: 0;
border: none;
z-index: 20;
cursor: pointer;
background:  rgba(36, 36, 36, 1);
display: none !important;
}
.bnSlide .slick-next{
right: calc(50% - 560px);
}
@media screen and (max-width:1160px){
.bnSlide .slick-next{
right:30px;
}
}
@media screen and (max-width:980px){
.bnSlide .slick-next{
right:15px;
}
}
@media screen and (max-width:640px){
.bnSlide .slick-next{
display: none !important;
}
}
.bnSlide .slick-next:after{
content: "";
position: absolute;
top: 24px;
left: 8px;
width: 8px;
height: 8px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
}
.bnSlide .slick-prev{
left:  calc(50% - 560px);
}
@media screen and (max-width:1160px){
.bnSlide .slick-prev{
left:30px;
}
}
@media screen and (max-width:980px){
.bnSlide .slick-prev{
left:15px;
}
}
@media screen and (max-width:640px){
.bnSlide  .slick-prev{
display: none !important;
}
}
.bnSlide .slick-prev:after{
content: "";
position: absolute;
top: 24px;
right: 8px;
width: 8px;
height: 8px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(-135deg);
}

/*---------------------------------------*/
/* draqueBn */
/*---------------------------------------*/
.draqueBn .img{
margin-bottom: 60px;
}
@media screen and (max-width:767px){
.draqueBn .img{
margin-bottom: 40px;
}
}
.draqueBn .img img{
width: 100%;
height: auto;
}
.draqueBn .ttl{
font-size: 171%;
font-weight: bold;
text-align: center;
color: #f97c38;
line-height: 1.7;
margin-bottom: 40px;
letter-spacing: 0.07em;
}
@media screen and (max-width:767px){
.draqueBn .ttl{
font-size: 16pt;
margin-bottom: 30px;
letter-spacing: normal;
}
}
.draqueBn .note{
text-align: center;
margin-bottom: 25px;
}
.draqueBn .attention{
text-align: center;
font-size: 86%;
}
@media screen and (max-width:767px){
.draqueBn .attention{
font-size: 7pt;
}
}
/*---------------------------------------*/
/* productArea */
/*---------------------------------------*/
#productArea.areaBase{
margin-bottom:240px;
}
@media screen and (max-width:767px){
#productArea.areaBase{
margin-bottom:90px;
}
#productArea .btn a{
margin-top:0;
}
}
/*---------------------------------------*/
/* companyArea */
/*---------------------------------------*/
#companyArea .blockLeft.companyBlock{
width:45%;
}
@media screen and (max-width:767px){
#companyArea .blockLeft.companyBlock{
width:100%;
margin-bottom:20px;
}
}
#companyArea a{
display:block;
}
#companyArea .blockLeft .img{
display:block;
margin-bottom:25px;
}
@media screen and (max-width:767px){
#companyArea .blockLeft .img{
margin-bottom:10px;
}
}
#companyArea .blockLeft .img img{
width:100%;
height:auto;
-webkit-transition: transform 0.3s ease,margin 1.2s ease 0.4s;
-moz-transition: transform 0.3s ease,margin 1.2s ease 0.4s;
-o-transition: transform 0.3s ease,margin 1.2s ease 0.4s;
transition: transform 0.3s ease,margin 1.2s ease 0.4s;
}
#companyArea .blockLeft a:hover .img img{
-moz-transform: scale(1.04,1.04);
-webkit-transform:scale(1.04,1.04);
-o-transform:scale(1.04,1.04);
-ms-transform:scale(1.04,1.04);
transform:scale(1.04,1.04);
}
#companyArea .blockLeft .img .cover{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.8);
opacity:0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#companyArea .blockLeft a:hover .img .cover{
opacity:1;
}
#companyArea .blockLeft .img .cover .more{
display:block;
width:100%;
color:#fff;
text-align:center;
font-size:143%;
letter-spacing:0.1em;
line-height: 1;
margin-top: -0.5em;
position: absolute;
top: 50%;
}
@media screen and (max-width:767px){
#companyArea .blockLeft .img .cover .more{
font-size:11pt;
}
}
#companyArea .blockRight.companyBlock{
width:51%;
}
@media screen and (max-width:767px){
#companyArea .blockRight.companyBlock{
width:100%;
}
}
#companyArea .blockRight li{
margin-bottom:8.1%;
}
@media screen and (max-width:767px){
#companyArea .blockRight li{
margin-bottom:30px;
position:relative;
}
}
#companyArea .blockRight li .blockLeft{
width:38.6%;
}
#companyArea .blockRight li .blockLeft.img{
display:block;
}
@media screen and (max-width:767px){
#companyArea .blockRight li .blockLeft.img{
width:100%;
margin-bottom:10px;
}
}
#companyArea .blockRight li .blockLeft.img img{
width:100%;
height:auto;
-webkit-transition: transform 0.3s ease,margin 1.2s ease 0.4s;
-moz-transition: transform 0.3s ease,margin 1.2s ease 0.4s;
-o-transition: transform 0.3s ease,margin 1.2s ease 0.4s;
transition: transform 0.3s ease,margin 1.2s ease 0.4s;
}
#companyArea .blockRight li a:hover .blockLeft.img img{
-moz-transform: scale(1.04,1.04);
-webkit-transform:scale(1.04,1.04);
-o-transform:scale(1.04,1.04);
-ms-transform:scale(1.04,1.04);
transform:scale(1.04,1.04);
}
#companyArea .blockRight li .blockLeft.img .cover{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.8);
opacity:0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#companyArea .blockRight li a:hover .blockLeft.img .cover{
opacity:1;
}
#companyArea .blockRight li .blockLeft.img .cover .more{
display:block;
width:100%;
color:#fff;
text-align:center;
font-size:128.5%;
letter-spacing:0.1em;
line-height: 1;
margin-top: -0.5em;
position: absolute;
top: 50%;
}
@media screen and (max-width:767px){
#companyArea .blockRight li .blockLeft.img .cover .more{
font-size:11pt;
}
}
#companyArea .blockRight li .blockRight{
width:55%;
}
@media screen and (max-width:767px){
#companyArea .blockRight li .blockRight{
width:100%;
}
}
#companyArea .ttl{
font-size:107%;
margin-top:-5px;
display:block;
}
@media screen and (max-width:767px){
#companyArea .ttl{
font-size:11pt;
margin-top:0;
}
}
#companyArea .line{
width:12px;
height:1px;
background:#1a1a1a;
margin:10px 0;
display:block;
}
@media screen and (max-width:767px){
#companyArea .line{
margin:5px 0;
}
}
#companyArea .note{
color:#4d4d4d;
display:block;
}
@media screen and (max-width:980px){
#companyArea .note{
font-size:81%;
}
}
@media screen and (max-width:767px){
#companyArea .note{
font-size:9pt;
}
}