@charset "utf-8";
/*btn*/
.btnColum2 .btnOuter{
width: 49%;
}
@media screen and (max-width:767px){
.btnColum2 .btnOuter{
width: 100%;
}
.btnColum2 .btnOuter:first-child{
margin-bottom: 10px;
}
}
.btn a{
width: 100%;
max-width: 260px;
height: 60px;
line-height: 60px;
border:1px solid #004f86;
border-radius: 60px;
}
.btnWhite a{
border:1px solid #fff;
}
.btn-thin a{
height: 45px;
line-height: 45px;
}
.btn-short a{
max-width: 190px;
}
@media screen and (max-width:767px){
.btn a{
max-width: 100%;
}
}
.btn a:hover{
background: #004f86;
}
.btnWhite a:hover{
background: #fff;
}
.btn a .arrow{
top: 48%;
right:20px;
width: 4px;
height: 4px;
border-top:1px solid #004f86;
border-right:1px solid #004f86;
transform: rotate(45deg) translate(0,-50%);
transition: border 0.3s ease;
}
.btn a:hover .arrow{
border-top:1px solid #fff;
border-right:1px solid #fff;
}
.btnWhite a .arrow{
border-top:1px solid #fff;
border-right:1px solid #fff;
}
.btnWhite a:hover .arrow{
border-top:1px solid #004f86;
border-right:1px solid #004f86;
}
/*map*/
.map{
width: 100%;
height: 540px;
overflow: scroll;
}
@media screen and (max-width:767px){
.map{
height: 260px;
}
}
.map img{
width: 1575px;
max-width: 1575px;
}
@media screen and (max-width:767px){
.map img{
width: 1150px;
max-width: 1150px;
}
}
/*bgslide*/
.bgslide{
background-size:cover;
background-attachment:fixed;
background-position: center top;
background-repeat: no-repeat;
overflow: visible;
}
.spContent .bgslide,
.tabContent .bgslide{
background-attachment: inherit;
background-position: center !important;
}
/* breadcrumbs */
.breadcrumbs {
width:100%;
line-height:1;
border-top:1px solid #CCDCE7;
font-size:1.2rem;
color:#004f86;
padding:5px 0 8px;
}
@media screen and (max-width:767px){
.breadcrumbs {
height:auto;
font-size:1rem;
padding-bottom:6px;
}
}
@media print {
.breadcrumbs {
display: none;
}
}
.breadcrumbs ol{
width:90%;
margin:0 auto;
max-width:1050px;
}
.breadcrumbs li{
display:inline;
list-style:none;
vertical-align:middle;
color:#004f86;
}
.breadcrumbs li:after{
content:"";
display: inline-block;
width: 5px;
height: 5px;
color: #004f86;
border-top: 1px solid #004f86;
border-right: 1px solid #004f86;
transform: rotate(45deg);
margin:0 12px 0 10px;
position: relative;
top: -2px;
}
@media screen and (max-width:767px){
.breadcrumbs li:after{
margin:0 8px 0 6px;
width: 3px;
height: 3px;
top: -1px;
}
}
.breadcrumbs li:last-child:after{
display:none;
}
/* ページャー */
.pager{
text-align: center;
position:relative;
height:40px;
line-height:40px;
margin-top: 100px
}
@media screen and (max-width:767px){
.pager{
margin-top:50px;
font-size: 1.4rem;
}
}
.pager a {
border-bottom: 1px solid rgba(255,255,255,0);
padding: 0 20px 15px;
margin:0 5px;
transition: all 0.3s ease 0s;
}
@media screen and (max-width: 767px) {
.pager a {
padding: 0 10px 10px;
margin:0 3px;
}
}
.pager .current {
border-bottom: 1px solid #004f86;
color: #004f86;
padding: 0 20px 15px;
margin:0 5px;
}
@media screen and (max-width: 767px) {
.pager .current {
padding: 0 10px 10px;
margin:0 3px;
}
}
.pager .nextpostslink{
padding: 0 0 5px;
margin:0;
position: absolute;
top: 0;
right: 0;
}
.pager .previouspostslink{
padding: 0 0 5px;
margin:0;
position: absolute;
top: 0;
left: 0;
}
@media screen and (max-width: 767px) {
.pager .nextpostslink,
.pager .previouspostslink{
padding:0;
}
}
.pager .arrow{
margin:5px;
top:-1px;
}
/*Page共通*/
#page #container{
padding-top: 120px;
}
@media screen and (max-width:767px){
#page #container{
padding-top: 0;
}
}
/*topVisual*/
@media screen and (max-width:767px){
.topVisual .img{
margin-bottom: 50px;
}
}
.topVisual .lead .illu{
width: 47.5%;
}
@media screen and (max-width:767px){
.topVisual .lead .illu{
width: 100%;
margin-bottom: 30px;
}
}
.topVisual .lead .illu img{
max-width: 150px;
}
@media screen and (max-width:767px){
.topVisual .lead .illu img{
max-width: 120px;
}
}
.topVisual .lead .noteBox{
width: 50%;
padding-top: 85px;
}
@media screen and (max-width:767px){
.topVisual .lead .noteBox{
width: 100%;
padding-top: 0;
}
}
/*h1*/
#page .h1{
top: 10px;
right: 120px;
z-index: 999;
}
@media screen and (max-width:980px){
#page .h1{
right: 100px;
}
}
@media screen and (max-width:767px){
#page .h1{
position:static;
margin:8px 5% 35px;
}
}
/*about*/
.aboutimages{
width:100%;
height:350px;
background:url(../images/page/slide-aboutimages.jpg);
background-size:auto 350px;
animation: bgscrollabout 120s linear infinite;
}
@media screen and (max-width:767px){
.aboutimages{
height:262px;
background-size:auto 262px;
animation: bgscrollabouts 120s linear infinite;
}
}
@keyframes bgscrollabout {
0% {background-position: 0 0;}
100% {background-position:-2400px 0;}
}
@keyframes bgscrollabouts {
0% {background-position: 0 0;}
100% {background-position:-1796px 0;}
}
.factorySlide{
max-width: 610px;
padding-bottom: 55px;
}
.factorySlide .slick-list{
overflow: visible;
}
.factorySlide .slick-slide{
margin: 0 25px;
}
@media screen and (max-width:767px){
.factorySlide .slick-slide{
margin: 0 15px;
}
}
.factorySlide .slick-dots{
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 5px;
display: flex;
flex-wrap: wrap;
margin-left: auto;
margin-right: auto;
justify-content: center;
}
.factorySlide .slick-dots:after{
content:"";
display:block;
clear:both;
}
.factorySlide .slick-dots li{
display:block;
margin:0 12px;
position: relative;
width:5px;
height:5px;
}
.factorySlide .slick-dots li button{
position: absolute;
top: 0;
left: 0;
width:5px;
height:5px;
border-radius:50%;
background:#CCDCE7;
border:none;
font-size:0;
padding:0;
transition: all  0.6s ease;
cursor:pointer;
}
.factorySlide .slick-dots li:hover button,
.factorySlide .slick-dots li.slick-active button{
background:#004f86;
}
.message{
border-radius: 20px;
padding:75px 50px;
box-sizing: border-box;
}
@media screen and (max-width:980px){
.message{
padding: 50px 30px;
}
}
@media screen and (max-width:767px){
.message{
padding: 50px 20px;
}
}
.messageIn{
max-width: 800px
}
.message .imgBox{
width: 45%;
}
@media screen and (max-width:767px){
.message .imgBox{
width: 70%;
margin:0 15% 30px;
}
}
.message .noteBox{
width: 50%;
}
@media screen and (max-width:767px){
.message .noteBox{
width: 100%;
}
}
.company .ttl{
width: 180px;
margin-left: 25px;
}
@media screen and (max-width:767px){
.company .ttl{
width: 110px;
margin-left: 0;
}
}
.company .note{
width: calc(100% - 205px);
}
@media screen and (max-width:767px){
.company .note{
width: calc(100% - 110px);
}
}
.company .mapicon{
width: 10px;
margin: 0 8px 0 20px;
}
@media screen and (max-width:767px){
.company .mapicon{
margin: 0 8px 0 0;
}
}
.companyMap{
max-width: 1500px;
}
/*feature*/
.imgPallaContent .txtBox{
width: 50%;
}
@media screen and (max-width:980px){
.imgPallaContent .txtBox{
width: 100%;
margin-bottom: 30px;
}
}
.imgPallaContent .txtBox .txtBoxIn{
margin-left: calc(50vw - 490px);
margin-right: 5vw;
max-width: 380px;
}
@media screen and (max-width:1088px){
.imgPallaContent .txtBox .txtBoxIn{
margin-left: 5vw;
}
}
@media screen and (max-width:980px){
.imgPallaContent .txtBox .txtBoxIn{
max-width: 100%;
}
}
.imgPallaContent.l-row--re .txtBox .txtBoxIn{
margin-left: 5vw;
margin-right: calc(50vw - 490px);
}
@media screen and (max-width:1088px){
.imgPallaContent.l-row--re .txtBox .txtBoxIn{
margin-right: 5vw;
}
}
.imgPallaContent .imgPalla{
width: 50%;
min-height:540px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
@media screen and (max-width:980px){
.imgPallaContent .imgPalla{
width: 95%;
margin-left: 5%;
min-height:400px;
}
.imgPallaContent.l-row--re .imgPalla{
margin-left: 0;
margin-right: 5%;
}
}
@media screen and (max-width:767px){
.imgPallaContent .imgPalla{
min-height:250px;
}
}
.imgPallaContent.l-row--re .imgPalla{
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.imgPallaContent .imgPalla.feature01{
background-image: url("../images/page/bg-feature01.jpg");
}
.imgPallaContent .imgPalla.feature02{
background-image: url("../images/page/bg-feature02.jpg");
}
.imgPallaContent .imgPalla.feature03{
background-image: url("../images/page/bg-feature03.jpg");
}
@media screen and (max-width:980px){
  .imgPallaContent .imgPalla.feature01{
  background-image: url("../images/page/bg-feature01-s.jpg");
  }
  .imgPallaContent .imgPalla.feature02{
  background-image: url("../images/page/bg-feature02-s.jpg");
  }
  .imgPallaContent .imgPalla.feature03{
  background-image: url("../images/page/bg-feature03-s.jpg");
  }
}
.makerList .maker{
width: 23.5%;
margin-right: 2%;
}
@media screen and (max-width:980px){
.makerList .maker{
width: 32%;
}
}
@media screen and (max-width:767px){
.makerList .maker{
width: 49%;
}
.makerList .maker .note{
font-size: 1.2rem;
}
}
.makerList .maker:nth-child(4n){
margin-right: 0;
}
@media screen and (max-width:980px){
.makerList .maker:nth-child(4n){
margin-right: 2%;
}
.makerList .maker:nth-child(3n){
margin-right: 0;
}
}
@media screen and (max-width:767px){
.makerList .maker:nth-child(3n){
margin-right: 2%;
}
.makerList .maker:nth-child(2n){
margin-right: 0;
}
}
.featureimages{
width:100%;
height:220px;
}
@media screen and (max-width:767px){
.featureimages{
height:146px;
}
}
.featureimages01{
background:url(../images/page/slide-featureimages01.jpg);
background-size:auto 220px;
animation: bgscroll-l 120s linear infinite;
}
@media screen and (max-width:767px){
.featureimages01{
background-size:auto 146px;
animation: bgscroll-ls 120s linear infinite;
}
}
.featureimages02{
background:url(../images/page/slide-featureimages02.jpg);
background-size:auto 220px;
animation: bgscroll-r 120s linear infinite;
}
@media screen and (max-width:767px){
.featureimages02{
background-size:auto 146px;
animation: bgscroll-rs 120s linear infinite;
}
}
.feature02List  .feature02Content{
width: 32%;
margin-right: 2%;
}
@media screen and (max-width:980px){
.feature02List  .feature02Content{
width: 100%;
margin-right:0;
margin-bottom: 40px;
position: relative;
min-height: 165px;
}
.feature02List  .feature02Content:last-child{
  margin-bottom:0;
}
.feature02List  .feature02Content img{
position: absolute;
top: 0;
left:0;
width: 250px;
}
.feature02List  .feature02Content .txtBox{
margin-left: 280px;
width: calc(100% - 280px);
}
}
@media screen and (max-width:767px){
.feature02List  .feature02Content{
min-height: 0;
}
.feature02List  .feature02Content img{
position: static;
width: 100%;
}
.feature02List  .feature02Content .txtBox{
margin-left: 0;
width: 100%;
}
}
.feature02List  .feature02Content:nth-child(3n){
margin-right: 0;
}
.feature03List  .feature03Content{
width: 32%;
margin-right: 2%;
box-sizing: border-box;
padding: 40px 20px 30px;
border: 1px solid #004f86;
border-radius: 15px;
}
@media screen and (max-width:980px){
.feature03List  .feature03Content{
width: 100%;
margin-right:0;
margin-bottom: 40px;
position: relative;
min-height: 180px;
}
}
@media screen and (max-width:767px){
.feature03List  .feature03Content{
padding:50px 20px 30px;
}
.feature03List  .feature03Content:last-child{
  margin-bottom:0;
}
}
.feature03List  .feature03Content .num{
top: 0;
left: 50%;
transform: translate(-50%,-40%);
padding: 0 5px;
}
.feature03List  .feature03Content .num img{
width:auto;
height: 30px;
}
.feature03List  .feature03Content img{
max-width: 200px;
}
@media screen and (max-width:980px){
.feature03List  .feature03Content img{
position: absolute;
top: 20px;
left:20px;
width: 200px;
}
.feature03List  .feature03Content .txtBox{
margin-left: 230px;
width: calc(100% - 230px);
}
.feature03List  .feature03Content .txtBox .u-center{
text-align: left;
}
}
@media screen and (max-width:767px){
.feature03List  .feature03Content{
min-height: 0;
}
.feature03List  .feature03Content img{
position: static;
width: 100%;
}
.feature03List  .feature03Content .txtBox{
margin-left: 0;
width: 100%;
}
.feature03List  .feature03Content .txtBox .u-center{
text-align: center;
}
}
.feature03List  .feature03Content:nth-child(3n){
margin-right: 0;
}
/*.showroom*/
.showroomsliderOuter{
max-width: 800px;
}
.showroomSlider-thumb .thumb{
float: left;
width: 18%;
margin-right: 2.5%;
border: 3px solid rgba(255,255,255,0);
border-radius: 8px;
box-sizing: border-box;
transition: all 0.3s ease;
}
@media screen and (max-width:767px){
.showroomSlider-thumb .thumb{
border: 2px solid rgba(255,255,255,0);
border-radius: 4px;
}
}
.showroomSlider-thumb .thumb:last-child{
margin-right: 0;
}
.showroomSlider-thumb .thumb.thumbnail-current{
border: 3px solid #004f86;
}
@media screen and (max-width:767px){
.showroomSlider-thumb .thumb.thumbnail-current{
border: 2px solid #004f86;
}
}
.access.imgPallaContent .accessBg{
background: url("../images/page/img-aboutmap.gif") center no-repeat;
background-size: cover;
}
.access{
max-width: 1300px;
}
.access .txtBox{
width: 45%;
padding-left: calc(50% - 490px);
box-sizing: border-box;
}
@media screen and (max-width:980px){
.access .txtBox{
width: 100%;
padding-left:0;
margin-bottom: 30px;
}
}
.access .mapBox{
width: 50%;
}
@media screen and (max-width:980px){
.access .mapBox{
width: 100%;
}
}
.access .mapicon{
width: 10px;
margin: 0 8px 0 20px;
}
@media screen and (max-width:767px){
.access .mapicon{
margin: 0 8px 0 0;
}
}
/*shopContent*/
.shopContent{
padding-top: 50px;
}
@media screen and (max-width:767px){
.shopContent{
padding-top: 0;
}
}
@media screen and (max-width:980px){
.shopContent .img img{
margin-bottom: 20px;
width: 95vw;
max-width: 95vw;
}
}
.shopContent .name{
white-space: nowrap;
top: -50px;
right: 50px;
padding: 10px 5px;
line-height: 1.5;
letter-spacing: 0.2em;
}
@media screen and (max-width:980px){
.shopContent .name{
right: 0;
}
}
@media screen and (max-width:767px){
.shopContent .name{
writing-mode: horizontal-tb;
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: horizontal-tb;
position: static;
background: none;
padding: 0;
letter-spacing: normal;
}
}
.shopContent .name.line02{
transform: translate(calc(-100% - 5px),0);
}
@media screen and (max-width:767px){
.shopContent .name.line02{
transform: none;
}
}
.shopContent .logoBox{
width: 200px;
margin: 0 10% 0 10%;
}
@media screen and (max-width:980px){
.shopContent .logoBox{
width: 200px;
margin: 0 5% 0 0;
}
}
@media screen and (max-width:767px){
.shopContent .logoBox{
width: 200px;
margin: 0 calc(100% - 200px) 30px 0;
}
}
.shopContent .txtBox{
width: calc(70% - 200px);
margin-right: 10%;
max-width: 500px;
}
@media screen and (max-width:980px){
.shopContent .txtBox{
width: calc(95% - 200px);
margin-right: 0%;
}
}
@media screen and (max-width:767px){
.shopContent .txtBox{
width: 100%;
}
}
.shopContent .links .link{
margin: 0 2em 0 0;
}
@media screen and (max-width:767px){
.shopContent .links .link{
font-size: 1.3rem;
margin: 0 1em 0 0;
}
}
.shopContent .links .link .icon{
width: 12px;
margin-left: 7px;
}
/*news*/
.newsOuter{
border-top: 1px solid #CCDCE7;
}
.newsContent{
padding: 100px 0 150px;
}
@media screen and (max-width:767px){
.newsContent{
padding: 50px 0 120px;
}
}
.newsContent:before{
content: "";
position: absolute;
top: 0;
left: 71%;
width: 1px;
height: 100%;
background: #CCDCE7;
}
@media screen and (max-width:767px){
.newsContent:before{
display: none;
}
}
.newsContent .newsMain{
width:68%;
}
@media screen and (max-width:767px){
.newsContent .newsMain{
width:100%;
max-width:inherit;
margin-bottom:50px;
}
}
/* information一覧 */
.newspostList li{
min-height: 140px;
}
.newspostList li .img{
top: 0;
left: 0;
width: 210px;
height:140px;
background: #fff;
}
@media screen and (max-width:980px){
.newspostList li .img{
width:160px;
height:106px;
}
}
@media screen and (max-width:767px){
.newspostList li .img{
width:110px;
height:73px;
}
}
.newspostList li .img img{
position: absolute;
width: 100%;
height: auto;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transition: all 0.8s ease;
}
.newspostList li .img a:hover img{
opacity: 0.8;
}
.newspostList li .txt{
margin-left: 245px;
}
@media screen and (max-width:980px){
.newspostList li .txt{
margin-left:180px;
}
}
@media screen and (max-width:767px){
.newspostList li .txt{
margin-left:120px;
min-height:73px;
margin-bottom:10px;
}
}
@media screen and (max-width:767px){
.newspostList li .txt .ttl{
font-size:10pt;
padding-top: 10px;
}
}
.newspostList li .txt .info .date{
margin-right:2em;
}
@media screen and (max-width:767px){
.newspostList li .txt .info .date{
margin-right:1em;
}
}
.newspostList li .note{
height: 3.6em;
margin-left: 245px;
}
@media screen and (max-width:980px){
.newspostList li .note{
margin-left:180px;
}
}
@media screen and (max-width:767px){
.newspostList li .note{
margin-left:0;
}
}
.newspostList li .eventinfo .eventIcon{
width: 13px;
margin-right: 8px;
top: -2px;
margin-left: 245px;
}
@media screen and (max-width:980px){
.newspostList li .eventinfo .eventIcon{
margin-left:180px;
}
}
@media screen and (max-width:767px){
.newspostList li .eventinfo .eventIcon{
margin-left:0;
}
}
/* informationサイドナビ */
.newsSide{
width:24%;
}
@media screen and (max-width:980px){
.newsSide{
width:26%;
}
}
@media screen and (max-width:767px){
.newsSide{
width:100%;
}
}
.newsSide .sideBlock{
padding-left: 30px;
}
@media screen and (max-width:980px){
.newsSide .sideBlock{
padding-left: 0;
}
}
@media screen and (max-width:980px){
.newsSide .sideBlock .ttl{
padding-left: 30px;
}
}
@media screen and (max-width:767px){
.newsSide .sideBlock .ttl{
padding-bottom:10px;
margin-bottom:10px;
}
}
.newsSide .sideBlock .ttl:before{
content:"";
position: absolute;
top:14px;
left: -30px;
width: 20px;
height: 1px;
background:#004f86;
}
@media screen and (max-width:980px){
.newsSide .sideBlock .ttl:before{
left: 0;
}
}
@media screen and (max-width:767px){
.newsSide .sideBlock .ttl:before{
top: 12px;
}
}
.newsSide .sideBlock .sideList li{
height:35px;
line-height:35px;
position:relative;
}
@media screen and (max-width:767px){
.newsSide .sideBlock .sideList li{
float:left;
width:47.5%;
margin-right:5%;
}
.newsSide .sideBlock .sideList li:nth-child(2n){
margin-right:0;
}
}
.newsSide .sideBlock .sideList li:before{
content:" ・ ";
}
.newsSide .sideBlock .sideList li:after{
content:"";
position:absolute;
top:12px;
right:5px;
width:10px;
height:10px;
background:url(../images/page/side-arrow.gif) center no-repeat;
background-size:cover;
}
@media screen and (max-width:767px){
.newsSide .sideBlock  .recentryList{
display: flex;
flex-wrap: wrap;
margin-left: auto;
margin-right: auto;
}
.newsSide .sideBlock  .recentryList li{
width: 47.5%;
margin-right: 5%;
margin-bottom: 20px;
}
.newsSide .sideBlock  .recentryList li:nth-child(2n){
margin-right:0;
}
}
.newsSide .sideBlock  .recentryList li .img{
width:80px;
height: 53px;
background: #fff;
}
@media screen and (max-width:767px){
.newsSide .sideBlock  .recentryList li .img{
position: relative;
width: 100%;
padding-top: 66.25%;
height: 0;
}
}
.newsSide .sideBlock  .recentryList li .img img{
position: absolute;
width:100%;
height:auto;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transition: all 0.8s ease;
}
.newsSide .sideBlock  .recentryList li .img a:hover img,
.newsSide .sideBlock  .recentryList li.hover .img a img{
opacity: 0.8;
}
.newsSide .sideBlock  .recentryList li .info{
top:7px;
left:94px;
}
@media screen and (max-width:767px){
.newsSide .sideBlock  .recentryList li .info{
position: static;
}
.newsSide .sideBlock  .recentryList li .info .fs-11{
font-size: 1.2rem;
}
}
.newsSide .sideBlock  .recentryList li .informationTtl{
height:3em;
line-height: 1.5;
}
@media screen and (max-width:767px){
.newsSide .sideBlock  .recentryList li .informationTtl{
font-size: 1.3rem;
}
}
.newsBlock .info .date{
margin-right:2em;
}
@media screen and (max-width:767px){
.newsBlock .info .date{
margin-right:1em;
}
}
.newsBlock .note p{
margin-bottom: 3.6em;
}
.newsBlock img{
max-width: 100%;
height: auto;
}
.newsBlock .note pre{
white-space: pre-line;
}
.newsBlock .note .youtubeOuter{
position: relative;
width: 100%;
padding-top: 56.25%;
margin-bottom: 3em;
}
.newsBlock .note .youtubeOuter iframe{
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
.newsBlock .note .youtubeOuter p{
margin-bottom: 0;
}