@charset "utf-8";

/* ------------------------------------------------------------ Index */
#fv{
  position: relative;
  background: url(../images/index/bg-01.jpg) no-repeat center bottom;
  background-size: cover;
  height: 100vh;
  color: #fff;
}
#fv .inner{margin-left: 20px;width: 100%;}
#fv h2{margin-bottom: 40px;}
.scroll-down{position: absolute;left:50%;bottom:0;font-family: 'Gotham';font-size: 12px;font-weight: 700;color: #fff!important;text-align: center;
margin-left: -25px;}
.scroll-down::after{content: '';width: 1px;height: 80px;background-color: #fff;display: block;margin:15px auto 0;}

.right-img{position: absolute;right:0;top:0;width: 67.7272%;}
.right-img::before, .card-article::before{position: absolute;content:'';left:30px;right:-30px;top:30px;bottom:-30px;background: url(../images/common/pattern.png) repeat left top;}
.right-img img{position: relative;z-index: 8;}
.left-text{position: relative;z-index: 10;padding-top: 80px;}

.bg-right, .bg-left, .bg-left-text, .bg-left-full, .bg-right-full, .bg-alt{position: relative;overflow: hidden;}
.bg-left-text::after{
  position: absolute;
  left:0;
  right:0;
  top:150px;
  content: 'NAKASHIMA SEISAKU';
  font-family: 'DIN 1451 Std';
  font-size: 210px;
  color: #f7f7eb;
  text-align: center;
  background-color: #fff;
  line-height: .4;
  white-space: nowrap;
}
.bg-left-text::before{
  position: absolute;
  content: '';
  height: 500px;
  left:0;
  right:calc(50% - 650px);
  bottom: 27px;
  background-color: #f7f7eb;
  z-index: -1;
}
.bg-right::before, .bg-left::before{
  position: absolute;
  content: '';
  height: 500px;
  right:0;
  left:calc(50% - 650px);
  bottom: 0;
  background-color: #f7f7eb;
  z-index: -1;
}
.bg-left::before{left:0;right:calc(50% - 650px);}
.bg-left-full::before, .bg-right-full::before{
  position: absolute;
  content: '';
  left:0;
  right:calc(50% - 650px);
  top:158px;
  bottom: 0;
  background-color: #f7f7eb;
  z-index: -1;
}
.bg-right-full::before{top:180px;bottom:70px;right:0;left:calc(50% - 300px);}
.bg-alt::before{position: absolute;content: '';height: 370px;top:220px;left:0;right:calc(50% - 650px);background-color: #f7f7eb;z-index: -1;}
.bg-alt:nth-of-type(2n+1)::before{right:0;left:calc(50% - 650px);}

.card-body{position: relative;padding:20px;}
.card-body h3{position: absolute;bottom:100%;left:0;width: 100%;margin-bottom: -58px;}
.card-body p{margin-top: 60px;}

.tag{background-color: #7ec8a7;color: #fff;display: inline-block;font-size: 14px;font-weight: 700;padding:11px 25px;position: relative;}
.tag::before{position: absolute;content:'';left:100%;top:0;border-bottom:18px solid transparent;border-left:14px solid #7ec8a7;}
.tag::after{position: absolute;content:'';left:100%;bottom:0;border-top:18px solid transparent;border-left:14px solid #7ec8a7;}

.card-article{display: block;position: relative;margin-bottom: 40px;}
.card-article:hover, .card-article:hover img{opacity: 1;}
.card-article::before{left:-10px;bottom:-10px;right:10px;top:10px;}
.card-article .img-fluid{width: 100%;position: relative;z-index: 10;}
.card-article-img{position: relative;}
.card-article-body{position: relative;z-index: 10;background-color: #fff;padding:40px 25px 30px;}
.card-article-body .tag{position: absolute;left:0;top:-18px;}
.no-deco::before{display: none;}

.ctr{background: url(../images/index/bg-02.jpg) no-repeat center center;background-size: cover;color: #fff;}


/* ------------------------------------------------------------ about */
.hero{position: relative;background-repeat: no-repeat;background-position: center center;background-size: cover;color: #fff;max-height: 50vw;}

.half-img{position: relative;}
.half-img::before{position: absolute;content:'';left:-20px;right:0;top:20px;bottom:-20px;background: url(../images/common/pattern.png) repeat left top;}
.half-img.left::before{left:0;right:-20px;}
.half-img img{position: relative;z-index: 10;}
.half-text{max-width: 565px;padding:40px 100px 0 15px;margin-left: auto;}
.half-text.right{padding:40px 15px 0 100px;margin-left: 0;margin-right: auto;}

/* ------------------------------------------------------------ business */
.img-n15{margin-right: -15px;}
.w-450{max-width: 450px;margin-left: auto;position: relative;}
.w-450::before{position: absolute;content: attr(data-text);top:10px;left:-55px;font-family: 'Myriad Pro';font-size: 150px;
  color: #f7f7eb;white-space: nowrap;z-index: -1;}
.w-450.deco-right::before{left:auto;right: -230px;}
.section-number{position: absolute;right:20px;top:-15px;}
.col-md-push-6 .img-n15{margin-left: -15px;margin-right: 0;}
.col-md-pull-6 .w-450{margin-left: 0;margin-right: auto;}

/* ------------------------------------------------------------ example */
.bg-img, .message-img{background-repeat: no-repeat;background-position: center center;background-size: cover;color: #fff;min-height: 37.5vw;}
.bgp-right{background-position: 90% center;}
.narrow{max-width: 930px;margin-left: auto;margin-right: auto;padding-top: 50px;padding-bottom: 60px;}
.example-item{background-color: #eee;text-align: center;margin-bottom: 30px;}
.w-420{max-width: 420px;}
.col-sm-offset-6 > .w-420{margin-left: auto;}

/* ------------------------------------------------------------ company */
.message{position: relative;}
.message-img{min-height: auto;}
/* .message-img::before{display:block;content: '';padding-top: 50%;} */
.message-img::before{display:block;content: '';padding-top: 30%;}
.message-caption{color: #fff;max-width: 900px;margin-left: auto;margin-right: auto;}
.message-caption1{max-width: 900px;margin-left: auto;margin-right: auto;}

.history{position: relative;}
.history::before{position: absolute;content: '';top:8px;bottom:8px;left:8px;border-left:1px solid #7ec8a7;}
.history dt{float: left;width:240px;margin-bottom: 0;padding-left: 40px;color: #7ec8a7;}
.history dt::before{width: 16px;height:16px;background-color: #fff;border:1px solid #7ec8a7;border-radius: 50%;}
.history dt::after{position: absolute;content:'';right:30px;top:12px;width: 40px;height:1px;background-color: rgb(191, 191, 191);}
.history dd{margin-top: 20px;padding-left: 240px;}
.history dd:first-child{margin-top: 0;}

/* ------------------------------------------------------------ company */
.contact-tel{font-size: 20px;display: inline-block;}
.contact-tel span{font-family: Helvetica, Arial, sans-serif;font-size: 33px;}
.badge{font-size: 17px;background-color: #7ec8a7;color: #fff;font-weight: 500;display: inline-block;padding:8px 24px;border-radius: 34px;}
.contact-inner{padding:80px 100px;background-color: #fff;}

/* ------------------------------------------------------------ blog */
.hero-blog{margin-left: 25px;margin-right: 25px;background-color: #e9efed;position: relative;padding-top: 50px;padding-bottom: 50px;}
.hero-blog::before{position: absolute;content:'';top:0;left:calc(50% + 300px);right:0;height: 100%;background-color: #7fc9a8;}
.hero-blog .container{position: relative;}
.hero-blog h2{position: absolute;left:15px;top:20px;z-index: 10;font-size: 23px;}
.hero-blog h2 span{line-height: 1;}
.headline-item{position: relative;display: block;}
/* .headline-item:hover,.headline-item:hover img{filter:alpha(opacity=100);-moz-opacity: 1;opacity: 1;} */
.headline-img{display: block;margin-left: auto;max-width: 76.363636%;}
.headline-body{position: absolute;left: 0;top:170px;background-color: #fff;padding:30px;width: 465px;}
.headline-body h3{font-size: 25px;line-height: 1.6;}
.headline-body h3 a{font-weight: 700;}
.headline-body time{font-size: 14px;color: #aaa;font-weight: 500;}
.slick-arrow{position: absolute;bottom:0;width: 44px;height: 44px;background-color: #7ec8a7;border-radius: 50%;font-size: 0;padding:0;z-index: 100;}
.slick-prev{left:0;}
.slick-next{left:180px;}
.slick-prev::before{position: absolute;content:'';width:12px;height: 18px;left:15px;top:13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10.5 16.5'%3E%3Cpath fill-rule='evenodd' stroke='%23fff' stroke-width='1' stroke-linecap='butt' stroke-linejoin='miter' fill='none' d='M8.500,15.228 L1.467,8.195 L8.500,1.163 '/%3E%3C/svg%3E") no-repeat;
  background-size: 12px 18px;}
.slick-next::before{position: absolute;content:'';width:12px;height: 20px;left:18px;top:12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10.5 18.5'%3E%3Cpath fill-rule='evenodd' stroke='%23fff' stroke-width='1' stroke-linecap='butt' stroke-linejoin='miter' fill='none' d='M0.500,16.228 L7.533,9.195 L0.500,2.163 '/%3E%3C/svg%3E") no-repeat;
  background-size: 12px 20px;}
.slick-dots{list-style: none;padding: 0;margin:10px 0 0;text-align: center;}
.slick-dots li{display: inline-block;margin:0 5px;}
.slick-dots li button{display: block;font-size: 0;height:10px;width:10px;padding: 0;border-radius: 50%;background-color: #ebefed;outline: none;}
.slick-dots li.slick-active button{background-color: #6b977f;}

.headline-number{position: absolute;bottom:14px;left: 60px;width: 135px;text-align: center;font-size: 14px;font-weight: 700;color: #7ec8a7;}
.headline-number span + span::before{content: '';width: 58px;height: 2px;background-color: #7ec8a7;display: inline-block;margin-left: 12px;margin-right: 15px;
vertical-align: middle;margin-top: -3px;}
.blog-category{background-color: #e9efed;margin-bottom: 50px;border-radius: 64px;padding-right: 10px; padding-bottom: 20px;}
.blog-category h3{padding:2px 0 2px 35px;float: left;}
.blog-category nav{float: right; width: 890px;}
.blog-category a{display: block;float: left;padding:20px 25px 0 25px;line-height: 1.5;font-weight: 500;}
.label{background-color: #f33914;color: #fff;font-size: 12px;padding:3px 6px;border-radius: 18px;font-weight: 400;}
.card-article-img .label{position: absolute;top:10px;left:10px;z-index: 10;}

.blog-ranking-wrap, .blog-ranking {overflow: hidden;zoom: 1;}
.media-rangking {width: 10000px;}
.blog-banner{width: 380px;background: url(../images/blog/img-07.jpg) no-repeat;background-size: cover;color: #fff;padding: 50px;}
.blog-banner, .blog-ranking {display: table-cell;vertical-align: top;}
.blog-banner h3{font-size: 14px;}
.blog-banner h3 span{font-size: 56px;}
.blog-ranking{padding-left: 65px;}
article.media{border-bottom: 1px solid #dcdcdc;margin-bottom: 24px;padding-bottom: 24px;}
article.media:last-child{margin-bottom: 0;}
article.media h4{font-size: 16px;line-height: 1.5;}
article.media h4 .label{display: inline-block;vertical-align: middle;margin-top: -3px;}
article.media h4 a{font-weight: 700;display: inline-block;line-height: 1.5;}
article.media .media-left{padding-right: 20px;position: relative; }
.tag-sm{font-size: 12px;padding:7px 10px 7px 14px;}
.ranking-number{font-size: 25px;font-weight: 700;font-style: italic;color: #fff;background-color: #000;width: 32px;height: 32px;
  position: absolute;top:0;left:0;text-align: center;line-height: 32px;padding-right: 5px;}

.hero-blog-detail{color: #fff;position: relative;}
.hero-blog-detail-img{background-repeat: no-repeat;background-position: center center;background-size: cover;}
.hero-blog-detail-img::before{display: block;content:'';padding-top: 45%;}
.hero-blog-detail-caption{position: absolute;left:0;bottom:0;width: 100%;background-color: rgba(27, 27, 27, .6);padding-top: 30px;padding-bottom: 30px;}
.hero-blog-detail-caption h2{font-size: 24px;}

#article{padding-top: 90px;}
#article .list{width: 770px;float: left;}
#article aside{width: 270px;float: right;}
.blog_heading{font-size: 28px;font-weight: 700;border-bottom:1px solid #dcdcdc;margin-bottom: 30px;padding-bottom: 15px;line-height: 1.5;}
.blog_image{margin-bottom: 30px;}
.blog_image img{width: 100%;height: auto;display: block;}
.blog_text{margin-bottom: 24px;}
.blog_twitter{margin-bottom: 40px;}
.sns_share2{list-style: none;margin:0 -2px 30px;}
.sns_share2 li{float: left;width: 33.33333%;padding-left: 2px;padding-right: 2px;margin-bottom: 4px;}
.sns_share2 li > a{display: block;}
.sns_share2 li > a > img{width: 100%;height: auto;display: block;}

aside article .media-left{min-width: 85px;}
.divide-y > :not([hidden]){border-bottom:1px solid #eee;margin-bottom: 15px;padding-bottom: 15px;}
.title-underline + .list-category{margin-top: -30px;}
.list-category a{display: block;border-bottom:1px solid #eee;padding:18px 60px 18px 0;line-height: 1.5;position: relative;font-weight: 700;}
.list-category a .number{border:1px solid #eee;border-radius: 30px;font-weight: 700;text-align: center;padding:7px 6px;width:60px;display: inline-block;
position: absolute;right:0;top:15px;font-size: 14px;}

.preparation{
  text-align: center;
}

/* ------------------------------------------------------------ mobile */
@media (max-width: 1199px) {
  #fv .inner{max-width: 940px;}

  .bg-left-text::before{height: 460px;}
  .bg-left-text::after{font-size: 150px;top:140px;}
  .left-text{padding-top: 48px;}
  .card-body h3{margin-bottom: -53px;}

  .half-text{max-width: 485px;padding-right: 50px;padding-top: 15px;}
  .half-text.right{padding-left:50px;padding-top: 15px;}

  .w-450::before{font-size: 124px;top:5px;left:-45px;}
  .w-450.deco-right::before{right: -160px;}

  .hero-blog{margin-left: 0;margin-right: 0;}
  .hero-blog::before{left:calc(50% + 260px);}
  .hero-blog h2{top:0;}
  .headline-body{top:120px;}
  .slick-next{left:160px;}
  .headline-number{width: 115px;}
  .headline-number span + span::before{width: 50px;}
  .blog-ranking{padding-left: 30px;}

  #article .list{width: 640px;}
}
@media (max-width: 991px) {
  #fv .inner{max-width: 730px;margin-left: 0;}
  .bg-left-text::before{height: 400px;}
  .bg-left-text::after{font-size: 110px;top:130px;}
  .bg-left-full::before{top:148px;}
  .card-body h3{margin-bottom: -47px;}
  .right-img{width: 62%;}
  .left-text{padding-top: 24px;}

  .half-img{margin-left: 15px;}
  .half-img::before, .half-img.left::before{left: -15px;right: 15px;top: 15px;bottom: -15px;}
  .half-text, .half-text.right{max-width: none;padding:50px 15px 0;}
  .bg-right-full::before{left:calc(50% - 200px);}

  .w-450{max-width: none;padding-left: 15px;padding:50px 15px 0;}
  .w-450::before{white-space: normal;line-height: .8;right:-20px;left: auto;top:0;text-align: right;word-break: normal;font-size: 134px;}
  .w-450.deco-right::before{right: -20px;}
  .section-number{top:15px;right:35px;}
  .bg-alt::before{top:100px;right:calc(50% - 300px);height: 48vw;}
  .bg-alt:nth-of-type(2n+1)::before{left:calc(50% - 300px);}
  .list-img{padding-left: 15px;padding-right: 15px;}

  .message-caption{max-width: 670px;}

  .contact-inner{padding:40px 50px 50px;}

  .hero-blog::before{left:0;top:52%;bottom:0;height: auto;}
  .headline-body{top:100px;}
  .headline-body h3{font-size: 24px;}
  .blog-category a{padding-left: 15px;padding-right: 15px;}
  .blog-banner{padding:30px;width: 260px;}
  .blog-banner h3 span{font-size: 40px;}
  .headline-number{display: none;}

  #article .list{width: 420px;}
  .blog_heading{font-size: 22px;}
}
@media (max-width: 767px) {
  #fv .inner{max-width: 510px;}
  .right-img{position: relative;right: auto;top:auto;width: auto;margin:0 15px 15px -15px;}
  .right-img::before{left: 15px;right: -15px;top: 15px;bottom: -15px;}
  .left-text{padding-left: 15px;padding-right: 15px;}
  .bg-left-text::before{bottom: auto;top:80px;height: 390px;}
  .bg-left-text::after{left:50%;right: auto;transform: translate(-50%, 0);top:65px;}
  .bg-right::before{display: none;}
  .bg-left-full::before{top:88px;}
  .card{margin-bottom: 50px;position: relative;}
  .card::before{
    position: absolute;
    content: '';
    left:50%;
    margin-left:-384px;
    width: 768px;
    top:20vw;height: 50.667vw;
    background-color: #f7f7eb;
  }
  .col-sm-4:last-child .card{margin-bottom: 0;}
  .card-img{margin-left: 30px;margin-right: -15px;position: relative;z-index: 10;height: 55.3333vw;overflow: hidden;}
  .card-img img{width: 100%;position: absolute;left:50%;top:50%;transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);}
  .card-body{padding:15px;position: relative;z-index: 10;}
  .card-body h3{position: relative;left: auto;bottom: auto;margin-bottom: 20px;margin-top: -50px;}
  .card-body p{margin-top: 16px;}
  .card-article{margin:0 -15px 1px;padding: 15px;background-color: #fff;}
  .card-article::before{display: none;}
  .card-article, .card-article-body {overflow: hidden;zoom: 1;}
  .card-article-img, .card-article-body {display: table-cell;vertical-align: top;}
  .card-article-body{width: 10000px;padding:0 0 0 15px;}
  .card-article-body.p-20px{padding:0 0 0 20px!important;}
  .card-article-body.px-0{padding:0 0 0 15px!important;}
  .card-article-img{min-width: 200px;}
  .card-article-body .tag{position: relative;left: auto;top:auto;margin-bottom: 10px;}
  .card-article-body p{display: none;}
  .col-sm-4:last-child .card-article{margin-bottom: 30px;}
  .ctr p{font-size: 15px;}

  .hero{height: 59vw!important;max-height: none;}

  .bg-right-full .card::before, .nobg-sm::before{display: none;}
  .card-middle-xs .card-img{margin-left: 0;margin-right: 0;}
  .card-middle-xs dt{float: left;width: 130px;margin-top: 0;margin-bottom: 10px;}
  .card-middle-xs dd.fz20{font-size: 14px;margin-bottom: 10px;}
  .bg-right-full::before{top:122px;left: calc(50% - 150px);}

  .w-450::before{font-size: 108px;}
  .bg-alt::before{top:50px;right:calc(50% - 220px);}
  .bg-alt:nth-of-type(2n+1)::before{left:calc(50% - 220px);}

  .bg-img{padding-top: 40px;padding-bottom: 40px;}
  .bgp-right{background-position: left center;background-size: 150vw;}
  .narrow{padding:20px 15px 40px;}
  .narrow > p{margin-bottom: 20px;}
  .example-item-body{font-size: 14px;}

  .message .middle{position: relative;top:auto;left:auto;transform: none;-ms-transform: none;}
  .message-caption{color: #000;margin-top: 20px;}
  .message-caption, .message-text{padding-left: 15px;padding-right: 15px;}

  .contact-inner{padding:30px 15px 40px;}

  .hero-blog h2{position: relative;top:auto;left:auto;margin-bottom: 20px;font-size: 16px;}
  .headline-img{max-width: none;margin-left: 15px;}
  .headline-body{position: relative;top:auto;left:auto;margin-top: -35px;}
  .blog-category{background-color: transparent;}
  .blog-category h3{float: none;padding:0;text-align: center;margin-bottom: 10px;}
  .blog-category nav{float: none;background-color: #d0e0d7; width: 100%;}
  .blog-category a{width: 50%;text-align: center;border:1px solid #fff; width: 100%;}

  .blog-banner, .blog-ranking{display: block;width: auto;}
  .blog-banner{background-image:url(../images/blog/img-07-sm.jpg);margin-bottom: 15px;text-align: center;}
  .blog-ranking{padding-left: 0;}
  article.media{padding-bottom: 15px;margin-bottom: 15px;}
  article.media .media-left{min-width: 215px;padding-right: 15px;}
  article.media .media-left img{width: 100%;height: auto;}
  .blog-listing{border-top:1px solid #dcdcdc; padding: 2em 0;}
  .blog-listing .card-article{border-bottom:1px solid #dcdcdc;margin: 0;padding-left: 0;padding-right: 0;}

  #article{padding-top: 20px;}
  #article .list, #article aside{width: auto;float: none;}
  .hero-blog-detail-img::before{padding-top: 66.66667%;}
  .hero-blog-detail-caption{background-color: #fff;color: #000;position: relative;bottom:auto;left: auto;width:auto;margin:-70px 15px 0;}
  .hero-blog-detail-caption time{color: #aaa;}
  .section.bg-left-full.pb-100px.mb-0.mb-sm-100px { padding-top: 0;}
 
}
@media (max-width: 575px) {
  #fv{background-position: 80% center;}
  #fv::before{position: absolute;content: '';background-color: rgba(0,0,0,.3);top:0;left:0;width: 100%;height:100%;}
  #fv .middle{z-index: 10;}

  .bg-left-text::before{height: 74vw;}
  .tag{font-size: 12px;padding:6px 8px 6px 12px;}

  .half-img{margin-right: -15px;}
  .bg-right-full::before{top:105px;left:calc(50% - 110px);}

  .card-article-img{min-width: 39vw;}

  .w-450{padding-top: 22px;}
  .w-450::before{font-size: 76px;}
  .section-number{top:10px;right: 15px;max-height: 80px;width: auto;}
  .bg-alt::before{top:55px;right:40px;}
  .bg-alt:nth-of-type(2n+1)::before{left:40px;}

  .bg-img .h4 span.fz20, .bg-img h4 span.fz20{font-size: 12px;}
  .narrow{padding-bottom: 30px;}
  .example-item-body{font-size: 11px;}

  .table th, .table td{padding: 20px 0;}
  .table tr > th{width: 110px;}
  .history::before{display: none;}
  .history dt{width: auto;float: none;padding-left: 0;margin-top: 20px;}
  .history dt::before, .history dt::after{display: none;}
  .history dd{padding-left: 0;margin-top: 4px;}

  .contact-inner{margin: 0 auto; border-bottom: 1px solid #e5e5e5;}

  .hero-blog{padding-top: 30px;padding-bottom: 30px;}
  .hero-blog h2{font-size: 14px;}
  .blog-category{margin-bottom: 40px;}
  .blog-category a{padding:14px 10px;}
  .headline-body{padding:15px;margin-right: 45px;}
  .headline-body h3{font-size: 20px;}
  .blog-listing .card-article{margin: 0 -15px;padding-left: 15px;padding-right: 15px;}
  .blog-ranking-wrap, .blog-ranking{overflow: visible;}
  .blog-banner{margin-left: -15px;margin-right: -15px;}
  .blog-banner h3 span{font-size: 30px;}
  article.media{margin-left: -15px;margin-right: -15px;padding-left: 15px;padding-right: 15px;}
  article.media .media-left{min-width: calc(39vw + 15px);}
  article.media time{display: block;margin-top: 8px;}
  article.media h4{font-size: 14px;}

  .hero-blog-detail-caption{padding-top: 15px;padding-bottom: 0;margin-top: -40px;}
  .hero-blog-detail-caption h2{font-size: 22px;}
  .blog_heading{font-size: 20px;}

  .hero-blog-detail + .container .breadcrumb{margin-left: 15px;margin-right: 15px;}
  #article{padding-top: 0;}
  #article .list, #article aside{padding-left: 15px;padding-right: 15px;}
  .sns_share2{max-width: 220px;margin-left: auto;margin-right: auto;}
  .sns_share2 li{width: 100%;}
}