@charset "UTF-8";
html { height: 100%; font-size: 10px; background-color: #FDFDFD; }

html body { color: #2F2F2F; font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Noto Sans Japanese', sans-serif; font-weight: 600; height: 100%; word-break: normal; }

html a { color: #2F2F2F; text-decoration: none; }

html a :hover { color: #2F2F2F; text-decoration: none; }

html img { border: 0; vertical-align: top; font-size: 0; line-height: 0; }

html ol, html ul { list-style: none !important; }

html * { margin: 0; padding: 0; }

html .din2014 { font-family: din-2014, sans-serif; font-style: normal; font-weight: 200; }

html .din2014--bold { font-family: din-2014, sans-serif; font-weight: 800; }

html .din2014--italic_bold { font-family: din-2014, sans-serif; font-weight: 800; font-style: italic; }

.header { z-index: 9999; }

@media only screen and (max-width: 768px) { .header { position: fixed; left: 0; top: 0; width: 100%; height: 60px; background: #F9511E; } }

.header--title { position: fixed; left: 0; top: 0; height: 60px; width: 252px; background: #F9511E; z-index: 9999; }

.header--title a { display: block; height: 40px; margin-top: 12px; background: url(../img/nav/logo.png) center center no-repeat; -ms-background-size: contain; background-size: contain; text-indent: -9999px; }

@media only screen and (min-width: 769px) { .header--title a { width: 250px; } }

@media only screen and (max-width: 768px) { .header--title a { width: 150px; } }

@media only screen and (max-width: 768px) { .header--toggle { position: fixed; right: 0; top: 0; width: 60px; height: 60px; }
  .header--toggle span { position: absolute; left: 21px; background: #fff; display: block; width: 18px; height: 2px; -webkit-transition: all 0.25s linear; transition: all 0.25s linear; }
  .header--toggle span:nth-of-type(1) { top: 23px; }
  .header--toggle span:nth-of-type(2) { top: 29px; }
  .header--toggle span:nth-of-type(3) { top: 35px; }
  .header--toggle.active span:nth-of-type(1) { top: 29px; -webkit-transform: rotate(135deg); transform: rotate(135deg); }
  .header--toggle.active span:nth-of-type(2) { width: 0; }
  .header--toggle.active span:nth-of-type(3) { top: 29px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } }

.gnav { position: fixed; right: 0; top: 0; width: 100%; z-index: 9998; }

@media only screen and (min-width: 769px) { .gnav { left: 250px; height: 60px; max-width: 1920px; min-width: 1024px; padding-right: 60px; background: #FDFDFD; } }

@media only screen and (max-width: 768px) { .gnav { display: none; left: 0; height: 100%; background-color: #2a2a2a; } }

.gnav ul { width: 100%; overflow: hidden; }

@media only screen and (max-width: 768px) { .gnav ul { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 2.4rem; text-align: center; } }

@media only screen and (min-width: 769px) { .gnav ul li { float: left; display: table; width: 19%; } }

@media only screen and (max-width: 768px) { .gnav ul li { line-height: 2; } }

.gnav ul li a { -webkit-transition: all 0.25s linear; transition: all 0.25s linear; }

@media only screen and (min-width: 769px) { .gnav ul li a { display: table-cell; width: 100%; height: 60px; text-align: center; vertical-align: middle; color: #2F2F2F; font-size: 1.5rem; background: #FDFDFD; } }

@media only screen and (max-width: 768px) { .gnav ul li a { color: #FFFFFF; }
  .gnav ul li a:hover { color: #F9511E; } }

@media only screen and (min-width: 769px) { .gnav ul li a:hover, .gnav ul li a.current { color: #FFFFFF; background: #F9511E; } }

@media only screen and (max-width: 768px) { .gnav ul li a:hover, .gnav ul li a.current { color: #F9511E; } }

@media only screen and (min-width: 769px) { .wrapper { max-width: 1920px; min-width: 1024px; } }

.wrapper--inner { height: 100%; }

@media only screen and (max-width: 768px) { .wrapper { height: 100%; }
  .wrapper--inner { height: 100%; } }

.top { margin-top: 60px; position: relative; }

@media only screen and (min-width: 769px) { .top { overflow: hidden; } }

.top--image { background: url(../img/top/top.jpg) center center no-repeat; -ms-background-size: cover; background-size: cover; padding-top: 50%; }

@media only screen and (max-width: 640px) { .top--image { padding-top: 60%; } }

.top--scroll { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #FFFFFF; background: url(../img/top/arrow_down.png) center bottom no-repeat; }

@media only screen and (min-width: 769px) { .top--scroll { font-size: 2.3rem; bottom: 50px; padding-bottom: 20px; -ms-background-size: 20px auto; background-size: 20px auto; } }

@media only screen and (max-width: 768px) { .top--scroll { font-size: 1.1rem; bottom: 20px; padding-bottom: 10px; -ms-background-size: 10px auto; background-size: 10px auto; } }

@media only screen and (min-width: 769px) { .aboutus { padding-top: 30px; } }

@media only screen and (max-width: 768px) { .aboutus { padding: 30px 17px 30px; } }

.aboutus--title { color: #2F2F2F; text-align: center; margin-bottom: 20px; }

@media only screen and (min-width: 769px) { .aboutus--title { font-size: 4rem; } }

@media only screen and (max-width: 768px) { .aboutus--title { font-size: 2.5rem; } }

@media only screen and (min-width: 769px) { .aboutus--inner { width: 96%; max-width: 1920px; min-width: 1024px; margin: 0 auto; position: relative; overflow: hidden; } }

.aboutus--image--logo { background: url(../img/aboutus/circle_logo.png) center center no-repeat; -ms-background-size: contain; background-size: contain; }

@media only screen and (min-width: 769px) { .aboutus--image--logo { height: 280px; } }

@media only screen and (max-width: 768px) { .aboutus--image--logo { height: 150px; } }

@media only screen and (max-width: 640px) { .aboutus--image--logo { display: none; } }

.aboutus--image--left { width: 28%; float: left; }

@media only screen and (max-width: 640px) { .aboutus--image--left { width: 0%; } }

.aboutus--info--right { width: 72%; float: left; display: table; }

@media only screen and (max-width: 640px) { .aboutus--info--right { width: 100%; } }

.aboutus:after { content: ""; display: block; clear: both; }

.aboutus--text { font-weight: 600; display: table-cell; vertical-align: middle; line-height: 250%; }

@media only screen and (min-width: 769px) { .aboutus--text { height: 280px; font-size: 2.2rem; padding-left: 20px; width: 90%; } }

@media only screen and (max-width: 768px) { .aboutus--text { height: 150px; font-size: 1.5rem; padding-left: 10px; } }

@media only screen and (max-width: 640px) { .aboutus--text { height: 150px; font-size: 1.5rem; text-align: center; font-weight: 900; background: url(../img/aboutus/circle_logo_10.png) center center no-repeat; -ms-background-size: contain; background-size: contain; } }

@media only screen and (min-width: 769px) { .service { padding-top: 20px; } }

@media only screen and (max-width: 768px) { .service { padding: 10px 0; } }

.service--title { color: #2F2F2F; text-align: center; }

@media only screen and (min-width: 769px) { .service--title { margin-bottom: 30px; font-size: 4rem; } }

@media only screen and (max-width: 768px) { .service--title { margin-bottom: 10px; font-size: 2.5rem; } }

@media only screen and (min-width: 769px) { .service--inner { width: 100%; max-width: 1920px; min-width: 1024px; margin: 0 auto; position: relative; overflow: hidden; } }

@media only screen and (min-width: 769px) { .service--text { font-size: 1.5rem; line-height: 2; } }

@media only screen and (max-width: 768px) { .service--text { font-size: 1.1rem; line-height: 2; } }

@media only screen and (max-width: 640px) { .service--text { font-size: 1.2rem; line-height: 2; } }

.service--eng { font-size: 1.4rem; }

@media only screen and (min-width: 769px) { .service--eng { margin-bottom: 40px; } }

@media only screen and (max-width: 768px) { .service--eng { margin-bottom: 30px; } }

.service--list li { overflow: hidden; }

@media only screen and (min-width: 769px) { .service--info { padding-top: 60px; } }

@media only screen and (max-width: 768px) { .service--info { padding-top: 20px; padding-bottom: 20px; } }

.service--info h3 { position: relative; }

@media only screen and (max-width: 768px) { .service--info h3 { font-size: 1.8rem; padding-bottom: 14px; margin-bottom: 16px; } }

@media only screen and (min-width: 769px) { .service--info h3 { font-size: 2.4rem; padding-bottom: 16px; margin-bottom: 20px; } }

.service--info h3:after { display: block; content: ""; position: absolute; left: 0; bottom: 0; width: 60px; height: 1px; background-color: #2F2F2F; }

@media only screen and (max-width: 768px) { .service--info--left { width: 92%; padding-left: 4%; } }

@media only screen and (min-width: 769px) { .service--info--left { float: left; width: 42%; padding-left: 4%; } }

@media only screen and (max-width: 768px) { .service--info--right { width: 92%; padding-left: 4%; } }

@media only screen and (min-width: 769px) { .service--info--right { float: right; width: 42%; padding-right: 4%; } }

@media only screen and (max-width: 768px) { .service--images--left { width: 100%; height: 300px; } }

@media only screen and (min-width: 769px) { .service--images--left { float: left; width: 50%; height: 440px; } }

@media only screen and (max-width: 768px) { .service--images--right { width: 100%; height: 300px; } }

@media only screen and (min-width: 769px) { .service--images--right { float: right; width: 50%; height: 440px; } }

.service--images--entertainment { background: url(../img/services/entiertainment.jpg) center center no-repeat; -ms-background-size: cover; background-size: cover; height: 100%; }

.service--images--sales_promotion { background: url(../img/services/sales-promotion.jpg) center center no-repeat; -ms-background-size: cover; background-size: cover; height: 100%; }

.service--images--reuse { background: url(../img/services/reuse.jpg) center center no-repeat; -ms-background-size: cover; background-size: cover; height: 100%; }

@media only screen and (min-width: 769px) { .company { padding-top: 30px; padding-bottom: 30px; } }

@media only screen and (max-width: 768px) { .company { padding: 30px 0; } }

.company--title { color: #2F2F2F; text-align: center; margin-bottom: 20px; }

@media only screen and (min-width: 769px) { .company--title { font-size: 4rem; } }

@media only screen and (max-width: 768px) { .company--title { font-size: 2.5rem; } }

@media only screen and (min-width: 769px) { .company--inner { width: 96%; max-width: 1920px; min-width: 1024px; margin: 0 auto; position: relative; overflow: hidden; } }

@media only screen and (min-width: 769px) { .company--info { padding: 20px 11% 40px; } }

@media only screen and (max-width: 768px) { .company--info { padding: 0 4.55% 10px; } }

.company--info ul { line-height: 2; }

@media only screen and (min-width: 769px) { .company--info ul { font-size: 1.5rem; } }

@media only screen and (max-width: 768px) { .company--info ul { font-size: 1.3rem; } }

.company--info ul li { overflow: hidden; border-bottom: 1px solid #d3d3d3; }

.company--info ul li span:nth-of-type(1) { float: left; width: 20%; -webkit-box-sizing: content-box; -ms-box-sizing: content-box; -o-box-sizing: content-box; box-sizing: content-box; }

@media only screen and (min-width: 769px) { .company--info ul li span:nth-of-type(1) { padding: 20px 2.301075268817204%; } }

@media only screen and (max-width: 768px) { .company--info ul li span:nth-of-type(1) { padding: 15px 2.301075268817204%; } }

.company--info ul li span:nth-of-type(2) { float: left; width: 70%; -webkit-box-sizing: content-box; -ms-box-sizing: content-box; -o-box-sizing: content-box; box-sizing: content-box; }

@media only screen and (min-width: 769px) { .company--info ul li span:nth-of-type(2) { padding: 20px 2.301075268817204%; } }

@media only screen and (max-width: 768px) { .company--info ul li span:nth-of-type(2) { padding: 15px 2.301075268817204%; } }

.company .map-area { margin: 0 11%; }

@media only screen and (min-width: 769px) { .company .map-area { height: 600px; } }

@media only screen and (max-width: 768px) { .company .map-area { height: 400px; } }

.footer { background: #2a2a2a; color: #FDFDFD; }

@media only screen and (min-width: 769px) { .footer { padding: 40px 0 45px; } }

@media only screen and (max-width: 768px) { .footer { padding: 25px 0 25px; } }

.footer a { color: #FDFDFD; -webkit-transition: all 0.25s linear; transition: all 0.25s linear; }

.footer a:hover { color: #F9511E; }

@media only screen and (min-width: 769px) { .footer div { font-size: 1.4rem; position: relative; overflow: hidden; }
  .footer div ul { position: relative; float: left; left: 50%; }
  .footer div ul li { position: relative; left: -50%; float: left; padding: 0 20px; line-height: 1.5; position: relative; }
  .footer div ul li span { display: block; content: ""; position: absolute; right: 0; top: 4px; width: 1px; height: 14px; background: #686868; } }

@media only screen and (max-width: 768px) { .footer div { display: none; } }

.footer p { text-align: center; }

@media only screen and (min-width: 769px) { .footer p { font-size: 1.4rem; margin-top: 17px; } }

@media only screen and (max-width: 768px) { .footer p { font-size: 1.2rem; } }