/* line 5, ../sass/mixins/_image_extend.scss */ .scale img { -moz-transition: -moz-transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); -o-transition: -o-transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); -ms-transition: -ms-transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); } /* line 12, ../sass/mixins/_image_extend.scss */ .scale img:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } /* line 11, ../sass/business.scss */ .businessIndex .businessWrap { width: 1040px; min-width: 1180px; margin: 0 auto; padding-bottom: 95px; } /* line 17, ../sass/business.scss */ .businessIndex .businessSec-navList { width: 1180px; margin: 40px auto 0; } /* line 2, ../sass/mixins/_clearfix.scss */ .businessIndex .businessSec-navList::after { content: " "; display: block; clear: both; visibility: hidden; line-height: 0 !important; height: 0 !important; } /* line 21, ../sass/business.scss */ .businessIndex .businessSec-navList li { width: 50%; margin-top: 20px; float: left; } /* line 25, ../sass/business.scss */ .businessIndex .businessSec-navList li:nth-child(2n+1) { padding-right: 10px; } /* line 28, ../sass/business.scss */ .businessIndex .businessSec-navList li:nth-child(2n) { padding-left: 10px; } /* line 31, ../sass/business.scss */ .businessIndex .businessSec-navList li a { width: 100%; height: 214px; padding: 0 50px; background: #ebebeb; display: table; position: relative; } /* line 38, ../sass/business.scss */ .businessIndex .businessSec-navList li a::before { content: ""; width: 240px; height: 214px; display: block; background-repeat: no-repeat; background-position: left top; position: absolute; top: 0; left: 0; } /* line 49, ../sass/business.scss */ .businessIndex .businessSec-navList li a i { width: 30px; height: 30px; margin: auto; position: absolute; top: 0; right: 26px; bottom: 0; background: #c53131; color: #fff; text-align: center; line-height: 35px; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } /* line 63, ../sass/business.scss */ .businessIndex .businessSec-navList li a:hover { background: #f4f4f4; text-decoration: none; color: inherit; } /* line 67, ../sass/business.scss */ .businessIndex .businessSec-navList li a:hover i { background: #921313; } /* line 72, ../sass/business.scss */ .businessIndex .businessSec-navList li .txt { position: relative; display: table-cell; vertical-align: middle; text-align: center; } /* line 78, ../sass/business.scss */ .businessIndex .businessSec-navList li .ttl { color: #c53131; font-style: italic; font-size: 35px; font-size: 3.5rem; line-height: 1.3; } /* line 84, ../sass/business.scss */ .businessIndex .businessSec-navList li .desc { margin-top: 15px; font-size: 15px; font-size: 1.5rem; } /* line 90, ../sass/business.scss */ .businessIndex .businessSec-navList li.business01 a::before { background-image: url(/assets/img/business/img_business_nav_list01.png); } /* line 97, ../sass/business.scss */ .businessIndex .businessSec-navList li.business02 a::before { background-image: url(/assets/img/business/img_business_nav_list02.png); } /* line 104, ../sass/business.scss */ .businessIndex .businessSec-navList li.business03 a::before { background-image: url(/assets/img/business/img_business_nav_list03.png); } /* line 111, ../sass/business.scss */ .businessIndex .businessSec-navList li.business04 a::before { background-image: url(/assets/img/business/img_business_nav_list04.png); } /* distribution */ .distribution #mainWrap{ opacity: 1; -webkit-transition: 0.44s; -moz-transition: 0.44s; -ms-transition: 0.44s; -o-transition: 0.44s; transition: 0.44s; } .distribution #mainWrap.show{ opacity: 1; } .distribution .fade{ opacity: 0; -webkit-transition: 0.44s; -moz-transition: 0.44s; -ms-transition: 0.44s; -o-transition: 0.44s; transition: 0.44s; } .distribution .fade.show{ opacity: 1; } .distribution .fade.slide{ opacity: 0; -webkit-transition: 0.44s; -moz-transition: 0.44s; -ms-transition: 0.44s; -o-transition: 0.44s; transition: 0.44s; transform: translateX(30px); } .distribution .fade.slide.show{ opacity: 1; transform: translateX(0px); } .distribution .fade.slide2{ opacity: 0; -webkit-transition: 0.44s; -moz-transition: 0.44s; -ms-transition: 0.44s; -o-transition: 0.44s; transition: 0.44s; transform: translateX(-30px); } .distribution .fade.slide2.show{ opacity: 1; transform: translateX(0px); } .distribution .contentsBox{ padding-top: 0px; } .distribution .ttl01{ background-image: url(../img/business/distribution/mian.jpg); background-position: center; background-size: cover; color: #fff; background-repeat: no-repeat; } .distribution .distributionSec { line-height: 2.6; padding-bottom: 55px; padding-top: 70px; } .distribution .distributionSec>p{ text-align: center; color: #333333; line-height: 2; margin-top: 55px; } .distribution .distributionSec>p.point{ width: 520px; margin: 0px auto; text-align: left; margin-top: 55px; } .distribution .distributionSec.nagare{ background-image: url(../img/business/distribution/bg_img01.png); background-position: left top; background-repeat: no-repeat; background-color: #f4f4f4; padding-bottom: 0px; } .distribution .distributionSec.nagare>p{ margin-bottom: 130px; } .distribution .distributionSec-stepSec{ position: relative; min-height: 200px; } .distribution .distributionSec-stepSec:before{ content: ""; display: block; width: 50%; height: 100%; background-color: #fff; position: absolute; left: 0px; top: 0px; } .distribution .distributionSec-stepSec-inner{ position :absolute; top: 0px; left: 50%; background-color: #fff;padding-top: 50px; padding-bottom: 50px; min-height: 200px; } .distribution .distributionSec-stepSec-txt{ position: relative; width: 1175px; margin: 0px auto; padding-left: 172px; box-sizing: border-box; text-align: left; } .distribution .distributionSec-stepSec-txt i{ width: 137px; height: 132px; display: block; position: absolute; left: 20px; top: calc(50% - 70px); overflow: hidden; } .distribution .distributionSec-stepSec-txt h3{ font-size: 30px; font-size: 3.0rem; line-height: 1.6; font-family: 'Noto Serif Japanese'; } .distribution .distributionSec-stepSec-txt p{ text-align: left; margin-top: 0px; line-height: 1.6; padding-left: 2px; } .distribution .distributionSec-stepSec-txt img{ position: absolute; right: -96px; top: calc(50% - 330px / 2); } .distribution #step01{ margin-bottom: 115px; } .distribution #step01 .distributionSec-stepSec-inner{ left: calc(50% - 590px); } .distribution #step01 .distributionSec-stepSec-txt i{ top: calc(50% - 60px); } .distribution #step01 .distributionSec-stepSec-txt i:before{ content: ""; width: 137px; height: 132px; display: block; background-image: url(../img/business/distribution/step1.png); background-repeat: no-repeat; } .distribution #step-wrap-02-03{ background-image: url(../img/business/distribution/bg_img02.jpg); background-repeat: no-repeat; background-size: cover; padding: 90px 0; } .distribution #step02{ margin-bottom: 75px; } .distribution #step02:before{ position: absolute; top: 0px; left: calc(50% - 210px); } .distribution #step02 .distributionSec-stepSec-inner{ left: calc(50% - 170px); } .distribution #step02 .distributionSec-stepSec-txt i{ top: calc(50% - 60px); } .distribution #step02 .distributionSec-stepSec-txt i:before{ content: ""; width: 137px; height: 132px; display: block; background-image: url(../img/business/distribution/step2.png); background-repeat: no-repeat; } .distribution #step03 .distributionSec-stepSec-inner{ left: calc(50% - 590px); width: 790px; } .distribution #step03 .distributionSec-stepSec-txt i{ top: calc(50% - 60px); } .distribution #step03 .distributionSec-stepSec-txt i:before{ content: ""; width: 137px; height: 132px; display: block; background-image: url(../img/business/distribution/step3.png); background-repeat: no-repeat; } .distribution #step-wrap-04-05{ background-repeat: no-repeat; background-size: cover; padding: 90px 0; } .distribution #step04{ margin-bottom: 175px; } .distribution #step04:before{ position: absolute; top: 0px; left: calc(50% - 210px); } .distribution #step04 .distributionSec-stepSec-inner{ left: calc(50% - 170px); } .distribution #step04 .distributionSec-stepSec-txt i:before{ content: ""; width: 137px; height: 132px; display: block; background-image: url(../img/business/distribution/step4.png); background-repeat: no-repeat; } .distribution #step04 .distributionSec-stepSec-txt img{ position: absolute; right: calc(100% + 10px); top: calc(50% - 330px / 2); } .distribution #step05 .distributionSec-stepSec-inner{ left: calc(50% - 590px); width: 790px; } .distribution #step05 .distributionSec-stepSec-txt i:before{ content: ""; width: 137px; height: 132px; display: block; background-image: url(../img/business/distribution/step5.png); background-repeat: no-repeat; } .distribution #step-wrap-06-07{ background-image: url(../img/business/distribution/bg_img03.jpg); background-repeat: no-repeat; background-size: cover; padding: 90px 0; } .distribution #step06{ margin-bottom: 175px; } .distribution #step06 .distributionSec-stepSec-inner{ left: calc(50% - 590px); width: 790px; } .distribution #step06 .distributionSec-stepSec-txt i:before{ content: ""; width: 137px; height: 132px; display: block; background-image: url(../img/business/distribution/step6.png); background-repeat: no-repeat; } .distribution #step07:before{ position: absolute; top: 0px; left: calc(50% - 210px); } .distribution #step07 .distributionSec-stepSec-inner{ left: calc(50% - 170px); } .distribution #step07 .distributionSec-stepSec-txt i:before{ content: ""; width: 137px; height: 132px; display: block; background-image: url(../img/business/distribution/step7.png); background-repeat: no-repeat; } .distribution #step07 .distributionSec-stepSec-txt img{ position: absolute; right: calc(100% + 10px); top: calc(50% - 330px / 2); } .distribution #step-wrap-08-09{ background-image: url(../img/business/distribution/bg_img04.jpg); background-repeat: no-repeat; background-size: cover; padding: 90px 0; } .distribution #step08{ margin-bottom: 175px; } .distribution #step08 .distributionSec-stepSec-inner{ left: calc(50% - 590px); width: 790px; } .distribution #step08 .distributionSec-stepSec-txt i{ top: calc(50% - 60px); } .distribution #step08 .distributionSec-stepSec-txt i:before{ content: ""; width: 137px; height: 132px; display: block; background-image: url(../img/business/distribution/step8.png); background-repeat: no-repeat; } .distribution #step08 .distributionSec-stepSec-txt img{ top: calc(50% - 344px / 2); } .distribution #step09:before{ position: absolute; top: 0px; left: calc(50% - 210px); } .distribution #step09 .distributionSec-stepSec-inner{ left: calc(50% - 170px); } .distribution #step09 .distributionSec-stepSec-txt i{ top: calc(50% - 60px); } .distribution #step09 .distributionSec-stepSec-txt i:before{ content: ""; width: 137px; height: 132px; display: block; background-image: url(../img/business/distribution/step9.png); background-repeat: no-repeat; } .distribution #step09 .distributionSec-stepSec-txt img{ position: absolute; right: calc(100% + 10px); top: calc(50% - 348px / 2); } .distribution #step10-wrap{ background-image: url(../img/business/distribution/bg_img05.png); background-position: right bottom; background-repeat: no-repeat; padding: 115px 0; } .distribution #step10{ margin-top: 0px; padding-bottom: 0px; } .distribution #step10 .distributionSec-stepSec-txt i{ top: calc(50% - 60px); } .distribution #step10 .distributionSec-stepSec-inner{ left: calc(50% - 590px); width: 790px; } .distribution #step10 .distributionSec-stepSec-txt i:before{ content: ""; width: 137px; height: 132px; display: block; background-image: url(../img/business/distribution/step10.png); background-repeat: no-repeat; } .distribution .distributionSec.option{ padding-bottom: 115px; padding-top: 115px; overflow: hidden; background-image: url(../img/business/distribution/option_bg.jpg); background-position: right bottom; background-repeat: no-repeat; } .distribution .distributionSec.option>p{ margin-bottom: 75px; } .distribution .distributionSec.option ul{ width: 1250px; margin: 0px auto; } .distribution .distributionSec.option ul li{ border: solid #f4f4f4 12px; padding: 22px; width: 366px; box-sizing: border-box; min-height: 500px; margin-left: 25px; margin-right: 25px; float: left; margin-bottom: 40px; background-color: #fff; } .distribution .distributionSec.option ul li h3{ font-size:24px; font-size: 2.4rem; color: #c53131; line-height: 1.6; font-family: 'Noto Serif Japanese'; margin-bottom: 15px; } .distribution .distributionSec.option ul li p{ line-height: 2.0; } .distribution .distributionSec.option ul li img{ margin-bottom: 20px; } .distribution .distributionSec.option ul:after{ content: ""; display: block; visibility:hidden; clear: both; height: 0px; overflow: hidden; } .distribution .distributionSec.other{ padding-bottom: 115px; padding-top: 115px; overflow: hidden; background-color: #ebebeb; } .distribution .distributionSec.other h2{ margin-bottom: 70px; } .distribution .distributionSec.other>p{ margin-bottom: 130px; } .distribution .distributionSec.other ul{ width: 1185px; margin: 0px auto; } .distribution .distributionSec.other ul li{ width: 360px; float: left; margin-right: 50px; } .distribution .distributionSec.other ul li:nth-child(3){ margin-right: 0px; } .distribution .distributionSec.other ul li h3{ font-size:24px; font-size: 2.4rem; color: #333333; line-height: 1.6; font-family: 'Noto Serif Japanese'; margin-bottom: 20px; position: relative; padding-left: 55px; text-align: left; } .distribution .distributionSec.other ul li h3:before{ content: ""; display: block; position: absolute; left: 0px; top: 50%; width: 30px; height: 2px; background-color: #ea303f; } .distribution .distributionSec.other ul li p{ line-height: 2.0; font-size: 15px; font-size: 1.5rem; } .distribution .distributionSec.other ul li img{ } .distribution .distributionSec.other ul li .thumb{ position: relative; margin-bottom: 30px; display: block; } .distribution .distributionSec.other ul li .thumb i{ display: block; width: 30px; height: 30px; background-color: #c53131; position: absolute; right: 1px; bottom: 1px; text-align: center; line-height: 35px; color: #fff; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } .distribution .distributionSec.other ul li .thumb:before{ content: ""; display: block; width: 360px; height: 176px; border-bottom: solid 1px #8a9095; border-right: solid 1px #8a9095; position: absolute; right: -8px; bottom: -8px; } .distribution .distributionSec.other ul:after{ content: ""; display: block; visibility:hidden; clear: both; height: 0px; overflow: hidden; } .distribution .distributionSec.other ul li a:hover{ text-decoration: none; } .distribution .distributionSec.other ul li a:hover .thumb i { background-color: #921313; } /* outsourcing */ .distribution.outsourcing .ttl01{ background-image: url(../img/business/outsourcing/mian.jpg); } .distribution.outsourcing .distributionSec h2{ margin-bottom: 20px; font-size: 34px; font-size: 3.4rem; } .distribution.outsourcing .distributionSec.nagare{ background-image: none; } .distribution.outsourcing .distributionSec.nagare h2{ margin-bottom: 95px; font-size: 45px; font-size: 4.5rem; } .distribution.outsourcing #step-wrap-02-03{ background-image: none; padding-bottom: 0px; } .distribution.outsourcing .distributionSec-stepSec{ min-height: 221px; } .distribution.outsourcing .distributionSec-stepSec-txt h3{ margin-bottom: 5px; } .distribution.outsourcing .distributionSec-stepSec-txt ul li{ line-height: 2; } .distribution.outsourcing .distributionSec-stepSec-txt ul li:before{ content: "●"; color: #999999; margin-right: .6rem; } .distribution.outsourcing #step01 .distributionSec-stepSec-txt i:before{ background-image: url(../img/business/outsourcing/step1.png); } .distribution.outsourcing #step02 .distributionSec-stepSec-txt i:before{ background-image: url(../img/business/outsourcing/step2.png); } .distribution.outsourcing #step03 .distributionSec-stepSec-txt i:before{ background-image: url(../img/business/outsourcing/step3.png); } .distribution.outsourcing #step04 .distributionSec-stepSec-txt i:before{ background-image: url(../img/business/outsourcing/step4.png); } .distribution.outsourcing #step05 .distributionSec-stepSec-txt i:before{ background-image: url(../img/business/outsourcing/step5.png); } .distribution.outsourcing #step02 .distributionSec-stepSec-txt img{ right: auto; left: -515px; } .distribution.outsourcing #step01{ margin-bottom: 90px; } .distribution.outsourcing #step02{ margin-bottom: 130px; } .distribution.outsourcing #step03{ min-height: 234px; } .distribution.outsourcing #step04{ min-height: 198px; margin-bottom: 0px; } .distribution.outsourcing #step04 .distributionSec-stepSec-inner{ min-height: inherit; padding:70px 0px; } .distribution.outsourcing #step04:before{ left: -60px; background-image: url(../img/business/outsourcing/step4_bg.jpg); background-repeat: no-repeat;} .distribution.outsourcing #step04 .distributionSec-stepSec-txt i{ top: calc(50% - 60px); } .distribution.outsourcing #step05{ min-height: 198px; background-color: #f4f4f4; } .distribution.outsourcing #step05 .distributionSec-stepSec-inner{ min-height: inherit; padding:70px 0px; background-color: transparent;} .distribution.outsourcing #step05:before{ left: -60px; background-color: #f4f4f4; } .distribution.outsourcing #step05 .distributionSec-stepSec-txt i{ top: calc(50% - 60px); } .distribution.outsourcing #step-wrap-04-05{ padding-bottom: 0px; } .distribution.outsourcing .distributionSec.option{ background-image: url(../img/business/outsourcing/one_stop.jpg); } .distribution.outsourcing .distributionSec.option h2{ font-size: 45px; font-size: 4.5rem; } /* mailing */ .distribution.mailing .ttl01{ background-image: url(../img/business/mailing/mian.jpg); } .distribution.mailing .distributionSec.nagare{ background-image: url(../img/business/mailing/bg_img01.png); } .distribution.mailing #step-wrap-01-02{ background-image: url(../img/business/mailing/bg_img02.jpg); padding-top: 115px; padding-bottom: 115px; } .distribution.mailing #step02{ margin-bottom: 0px; } .distribution.mailing #step02 .distributionSec-stepSec-txt img{ right: calc(100% + 10px); } .distribution.mailing #step-wrap-03{ padding-top: 115px; padding-bottom: 115px; } .distribution.mailing #step-wrap-04{ padding-top: 180px; padding-bottom: 180px; background-image: url(../img/business/mailing/step4_bg.jpg); background-size: cover; background-repeat: no-repeat; margin-bottom: 50px; overflow: hidden; position: relative; } .distribution.mailing #step04{ margin-bottom: 0px; min-height: 285px; background-color: transparent; position: relative; z-index: 130; } .distribution.mailing #step04:before{ display: none; } .distribution.mailing #step04 .distributionSec-stepSec-inner{ background-color:transparent; } .distribution.mailing #step04 .distributionSec-stepSec-inner h3{ color: #fff; } .distribution.mailing #step04 .distributionSec-stepSec-inner p{ color: #fff; } .distribution.mailing #step-wrap-05{ padding-top: 180px; padding-bottom: 180px; background-image: url(../img/business/mailing/step5_bg.jpg); background-size: cover; background-repeat: no-repeat; background-color: #fff; overflow: hidden; position: relative; } .distribution.mailing #step05{ margin-bottom: 0px; min-height: 256px; background-color: transparent; } .distribution.mailing #step05:before{ display: none; } .distribution.mailing #step05 .distributionSec-stepSec-inner{ background-color:transparent; } .distribution.mailing #step05 .distributionSec-stepSec-inner h3{ color: #fff; } .distribution.mailing #step05 .distributionSec-stepSec-inner p{ color: #fff; } .distribution.mailing #step-wrap-06{ background-color: #f4f4f4; padding: 90px 0; } .distribution.mailing #step06{ margin-bottom: 0px; left: calc(50% - 170px); } .distribution.mailing #step06:before{ display: none; } .distribution.mailing #step06 .distributionSec-stepSec-inner{ background-color:transparent; left:0px; } .distribution.mailing #step06 .distributionSec-stepSec-txt img{ top: calc(50% - 391px / 2); right: calc(100% + 10px); } .distribution.mailing #step-wrap-04 video{ width: 1366px; height: 666px; display: block; position: absolute; left: calc(50% - 1366px / 2); top: calc(50% - 666px / 2); z-index: 10; } .distribution.mailing #step-wrap-04:before{ content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; background-color: rgba(0,0,0,.5); z-index: 110; } .distribution.mailing #step-wrap-05 video{ width: 1920px; height: 1080px; display: block; position: absolute; left: calc(50% - 1920px / 2); top: calc(50% - 1080px / 2); } /* service */ .distribution.service .ttl01{ background-image: url(../img/business/outsourcing/mian.jpg); } .distribution.service .distributionSec h2{ margin-bottom: 20px; font-size: 34px; font-size: 3.4rem; } .distribution.service .distributionSec.other h2{ font-size: 45px; font-size: 4.5rem; margin-bottom: 30px; } .distribution.service .distributionSec.nagare{ background-image: none; } .distribution.service .distributionSec.nagare h2{ margin-bottom: 95px; font-size: 45px; font-size: 4.5rem; } .distribution.service #step-wrap-02-03{ background-image: none; padding-bottom: 0px; } .distribution.service .distributionSec-stepSec{ min-height: 221px; } .distribution.service .distributionSec-stepSec-txt h3{ margin-bottom: 5px; } .distribution.service .distributionSec-stepSec-txt ul li{ line-height: 2; } .distribution.service .distributionSec-stepSec-txt ul li:before{ content: "●"; color: #999999; margin-right: .6rem; } .distribution.service #step-wrap-01-03{ background-color: #f4f4f4; padding: 0px 0 20px 0; background-color: #fff; } .distribution.service #step01{ margin: 0px; min-height: 282px; } .distribution.service #step02{ margin: 0px; } .distribution.service #step02{ min-height: 213px; } .distribution.service #step02 .distributionSec-stepSec-inner{ min-height: inherit; padding: 80px 0; left: calc(50% - 440px); } .distribution.service #step03{ min-height: 213px; } .distribution.service #step03 .distributionSec-stepSec-inner{ min-height: inherit; padding: 80px 0; left: calc(50% - 290px); } .distribution.service .distributionSec-stepSec-txt i{ top: calc(50% - 60px); } .distribution.service #step01 .distributionSec-stepSec-txt i:before{ background-image: url(../img/business/service/step1.png); } .distribution.service #step02 .distributionSec-stepSec-txt i:before{ background-image: url(../img/business/service/step2.png); } .distribution.service #step03 .distributionSec-stepSec-txt i:before{ background-image: url(../img/business/service/step3.png); } .distribution.service #step04 .distributionSec-stepSec-txt i:before{ background-image: url(../img/business/service/step4.png); } .distribution.service #step05 .distributionSec-stepSec-txt i:before{ background-image: url(../img/business/service/step5.png); } .distribution.service #step-wrap-04-05{ background-color: #f4f4f4; padding: 0px; background-image: url(../img/business/service/step04-05_bg.png); background-position: left top; background-size: contain; } .distribution.service #step04{ min-height: 213px; margin: 0px; } .distribution.service #step04 .distributionSec-stepSec-inner{ min-height: inherit; padding: 80px 0; left: calc(50% - 290px); background-color:transparent; } .distribution.service #step04:before{ background-color:transparent; } .distribution.service #step05{ min-height: 213px; margin: 0px; } .distribution.service #step05 .distributionSec-stepSec-inner{ min-height: inherit; padding: 80px 0; left: calc(50% - 120px); background-color:transparent; } .distribution.service #step05:before{ background-color:transparent; } .distribution.service .distributionSec.option{ background-image: none; padding: 0px; } .distribution .distributionSec.option>p{ padding: 0px; margin-top:70px; margin-bottom:70px; } .distribution .distributionSec.other{ padding-top: 0px; } .distribution .distributionSec.other h2{ padding-top: 80px; margin-bottom: 65px; } @media screen and (max-width: 767px) { /* line 121, ../sass/business.scss */ .businessIndex .businessWrap { width: 100%; min-width: 100%; padding-bottom: 50px; } /* line 126, ../sass/business.scss */ .businessIndex .businessSec-navList { width: 100%; margin: 20px auto 0; } /* line 129, ../sass/business.scss */ .businessIndex .businessSec-navList li { width: 100%; margin-top: 20px; float: none; } /* line 133, ../sass/business.scss */ .businessIndex .businessSec-navList li:nth-child(2n+1) { padding-right: 0; } /* line 136, ../sass/business.scss */ .businessIndex .businessSec-navList li:nth-child(2n) { padding-left: 0; } /* line 139, ../sass/business.scss */ .businessIndex .businessSec-navList li a { width: 100%; height: auto; min-height: 107px; padding: 20px 45px; background: #ebebeb; } /* line 145, ../sass/business.scss */ .businessIndex .businessSec-navList li a::before { content: ""; width: 120px; height: 107px; background-size: 120px auto; } /* line 151, ../sass/business.scss */ .businessIndex .businessSec-navList li a i { width: 24px; height: 24px; right: 15px; line-height: 28px; } /* line 157, ../sass/business.scss */ .businessIndex .businessSec-navList li a:hover { background: #ebebeb; } /* line 159, ../sass/business.scss */ .businessIndex .businessSec-navList li a:hover i { background: #c53131; } /* line 163, ../sass/business.scss */ .businessIndex .businessSec-navList li a br { display: none; } /* line 167, ../sass/business.scss */ .businessIndex .businessSec-navList li .ttl { font-size: 20px; font-size: 2rem; } /* line 170, ../sass/business.scss */ .businessIndex .businessSec-navList li .desc { margin-top: 10px; font-size: 14px; font-size: 1.4rem; line-height: 1.5; } /* distribution */ .distribution{ } .distribution #mainWrap{ opacity: 1; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } .distribution #mainWrap.show{ opacity: 1; } .distribution .fade{ opacity: 1; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } .distribution .fade.show{ opacity: 1; } .distribution .fade.slide{ opacity: 1; -webkit-transition: 0.44s; -moz-transition: 0.44s; -ms-transition: 0.44s; -o-transition: 0.44s; transition: 0.44s; transform: translateX(0px); } .distribution .fade.slide.show{ opacity: 1; transform: translateX(0px); } .distribution .fade.slide2{ opacity: 1; -webkit-transition: 0.44s; -moz-transition: 0.44s; -ms-transition: 0.44s; -o-transition: 0.44s; transition: 0.44s; transform: translateX(0px); } .distribution .fade.slide2.show{ opacity: 1; transform: translateX(0px); } .distribution .contentsBox{ padding-top: 0px; } .distribution .ttl01{ background-image: url(../img/business/distribution/mian.jpg); background-position: center; background-size: cover; color: #fff; background-repeat: no-repeat; } .distribution .distributionSec { line-height: 2.6; padding-bottom: 25px; padding-top: 30px; } .distribution .distributionSec>h2{ font-size: 22px; font-size: 2.2rem; line-height: 1.4; } .distribution .distributionSec>h2 br{ display: none; } .distribution .distributionSec>p{ text-align: left; color: #333333; line-height: 2; margin-top: 35px; } .distribution .distributionSec>p.point{ width: auto; margin: 0px auto; text-align: left; margin-top: 55px; } .distribution .distributionSec.nagare{ background-image: none; background-position: left top; background-repeat: no-repeat; background-color: #f4f4f4; padding-bottom: 0px; padding-left: 20px; padding-right: 20px; } .distribution .distributionSec.nagare>p{ margin-bottom: 35px; margin-top: 20px; text-align: left; } .distribution .distributionSec-stepSec{ position: relative; min-height: 200px; } .distribution .distributionSec-stepSec:before{ content: ""; display: none; width: 50%; height: 100%; background-color: #fff; position: static; left: 0px; top: 0px; } .distribution .distributionSec-stepSec-inner{ position :static; top: auto; left: auto; background-color: transparent; padding-top: 0px; padding-bottom: 0px; min-height:inherit; } .distribution .distributionSec-stepSec-txt{ position: relative; width: auto; margin: 0px auto; padding-left: 80px; box-sizing: border-box; text-align: left; } .distribution .distributionSec-stepSec-txt i{ width: 60px; height: 60px; display: block; position: absolute; left: 0px; top: 5; overflow: hidden; } .distribution .distributionSec-stepSec-txt h3{ font-size: 20px; font-size: 2.0rem; line-height: 1.6; font-family: 'Noto Serif Japanese'; } .distribution .distributionSec-stepSec-txt p{ text-align: left; margin-top: 0px; line-height: 1.6; padding-left: 2px; margin-bottom: 20px; } .distribution .distributionSec-stepSec-txt p br{ display: none; } .distribution .distributionSec-stepSec-txt img{ position:static; right: auto; top: auto; width: 100%; height: auto; } .distribution #step01{ margin-bottom: 0; } .distribution #step01 .distributionSec-stepSec-inner{ left: auto; min-height: 0px; } .distribution #step01 .distributionSec-stepSec-txt i{ top: 0; } .distribution #step01 .distributionSec-stepSec-txt i:before{ content: ""; width: 60px; height: 60px; display: block; background-image: url(../img/business/distribution/step1.png); background-repeat: no-repeat; background-size: 100%; } .distribution #step-wrap-02-03{ background-image: none; background-repeat: no-repeat; background-size: cover; padding: 0px 0; padding-top: 20px; } .distribution #step02{ margin-bottom: 0; min-height: inherit; } .distribution #step02:before{ position: absolute; top: auto; left: auto; } .distribution #step02 .distributionSec-stepSec-inner{ left: auto; } .distribution #step02 .distributionSec-stepSec-txt i{ top: 0; } .distribution #step02 .distributionSec-stepSec-txt i:before{ content: ""; width: 60px; height: 60px; display: block; background-image: url(../img/business/distribution/step2.png); background-repeat: no-repeat; background-size: 100%; } .distribution #step03{ margin-bottom: 0; min-height: inherit; } .distribution #step03 .distributionSec-stepSec-inner{ left:auto; width: auto; } .distribution #step03 .distributionSec-stepSec-txt i{ top:0; } .distribution #step03 .distributionSec-stepSec-txt i:before{ content: ""; width: 60px; height: 60px; display: block; background-image: url(../img/business/distribution/step3.png); background-repeat: no-repeat; background-size: 100%; } .distribution #step-wrap-04-05{ background-repeat: no-repeat; background-size: cover; padding: 0px 0; } .distribution #step04{ margin-bottom: 20px; } .distribution #step04:before{ position: absolute; top: auto; left: auto; } .distribution #step04 .distributionSec-stepSec-inner{ left: 0; } .distribution #step04 .distributionSec-stepSec-txt i{ top: 0; } .distribution #step04 .distributionSec-stepSec-txt i:before{ content: ""; width: 60px; height: 60px; display: block; background-image: url(../img/business/distribution/step4.png); background-repeat: no-repeat; background-size: 100%; } .distribution #step04 .distributionSec-stepSec-txt img{ position:static; right: auto; top: auto; width: 100%; height: auto; } .distribution #step05 .distributionSec-stepSec-inner{ left: 0; width: auto; } .distribution #step05 .distributionSec-stepSec-txt i{ top: 0; } .distribution #step05 .distributionSec-stepSec-txt i:before{ content: ""; width: 60px; height: 60px; display: block; background-image: url(../img/business/distribution/step5.png); background-repeat: no-repeat; background-size: 100%; } .distribution #step-wrap-06-07{ background-image: none; background-repeat: no-repeat; background-size: cover; padding: 0px 0; padding-top: 20px; } .distribution #step06{ margin-bottom: 20px; } .distribution #step06 .distributionSec-stepSec-inner{ left: auto; width: auto; } .distribution #step06 .distributionSec-stepSec-txt i{ top: 0; } .distribution #step06 .distributionSec-stepSec-txt i:before{ content: ""; width: 60px; height: 60px; display: block; background-image: url(../img/business/distribution/step6.png); background-repeat: no-repeat; background-size: 100%; } .distribution #step07:before{ position: absolute; top: auto; left: auto; } .distribution #step07 .distributionSec-stepSec-inner{ left: 0; } .distribution #step07 .distributionSec-stepSec-txt i{ top: 0; } .distribution #step07 .distributionSec-stepSec-txt i:before{ content: ""; width: 60px; height: 60px; display: block; background-image: url(../img/business/distribution/step7.png); background-repeat: no-repeat; background-size: 100%; } .distribution #step07 .distributionSec-stepSec-txt img{ position:static; right: auto; top: auto; width: 100%; height: auto; } .distribution #step-wrap-08-09{ background-image: none; background-repeat: no-repeat; background-size: cover; padding: 0px 0; padding-top: 20px; } .distribution #step08{ margin-bottom: 20px; } .distribution #step08 .distributionSec-stepSec-inner{ left: 0; width: auto; } .distribution #step08 .distributionSec-stepSec-txt i{ top: 0; } .distribution #step08 .distributionSec-stepSec-txt i:before{ content: ""; width: 60px; height: 60px; display: block; background-image: url(../img/business/distribution/step8.png); background-repeat: no-repeat; background-size: 100%; } .distribution #step08 .distributionSec-stepSec-txt img{ position:static; right: auto; top: auto; width: 100%; height: auto; } .distribution #step09:before{ position: absolute; top: 0px; left: calc(50% - 210px); } .distribution #step09 .distributionSec-stepSec-inner{ left: 0; width: auto; } .distribution #step09 .distributionSec-stepSec-txt i{ top: 0; } .distribution #step09 .distributionSec-stepSec-txt i:before{ content: ""; width: 60px; height: 60px; display: block; background-image: url(../img/business/distribution/step9.png); background-repeat: no-repeat; background-size: 100%; } .distribution #step09 .distributionSec-stepSec-txt img{ position:static; right: auto; top: auto; width: 100%; height: auto; } .distribution #step10-wrap{ background-image: none; background-position: right bottom; background-repeat: no-repeat; padding: 0px 0; padding-top: 20px; } .distribution #step10{ margin-top: 0px; padding-bottom: 20px; min-height:inherit; } .distribution #step10 .distributionSec-stepSec-txt i{ top: 0; } .distribution #step10 .distributionSec-stepSec-inner{ left: 0; width: auto; } .distribution #step10 .distributionSec-stepSec-txt i:before{ content: ""; width: 60px; height: 60px; display: block; background-image: url(../img/business/distribution/step10.png); background-repeat: no-repeat; background-size: 100%; } .distribution .distributionSec.option{ padding-bottom: 25px; padding-top: 25px; overflow: hidden; background-image: none; background-position: right bottom; background-repeat: no-repeat; b } .distribution .distributionSec.option>p{ margin-bottom: 30px; margin-top: 0px; } .distribution .distributionSec.option ul{ width: auto; margin: 0px auto; } .distribution .distributionSec.option ul li{ border: solid #f4f4f4 6px; padding: 11px; width: auto; box-sizing: border-box; min-height:inherit; margin-left: 0px; margin-right: 0px; float: none; margin-bottom: 20px; background-color: #fff; } .distribution .distributionSec.option ul li h3{ font-size:20px; font-size: 2.0rem; color: #c53131; line-height: 1.6; font-family: 'Noto Serif Japanese'; margin-bottom: 5px; } .distribution .distributionSec.option ul li p{ line-height: 2.0; } .distribution .distributionSec.option ul li img{ margin-bottom: 10px; width: 100%; height: auto; } .distribution .distributionSec.option ul:after{ content: ""; display: block; visibility:hidden; clear: both; height: 0px; overflow: hidden; } .distribution .distributionSec.other{ padding-bottom: 25px; padding-top: 25px; overflow: hidden; background-color: #ebebeb; margin-bottom: 20px; } .distribution .distributionSec.other h2{ margin-bottom: 25px; padding-top: 0px; } .distribution .distributionSec.other>p{ margin-bottom: 30px; } .distribution .distributionSec.other ul{ width: auto; margin: 0px 20px; } .distribution .distributionSec.other ul li{ width: auto; float: none; margin-right: 0px; margin-bottom: 30px; } .distribution .distributionSec.other ul li:nth-child(3){ margin-right: 0px; margin-bottom: 0px; } .distribution .distributionSec.other ul li h3{ font-size:20px; font-size: 2.0rem; color: #333333; line-height: 1.6; font-family: 'Noto Serif Japanese'; margin-bottom: 20px; position: relative; padding-left: 25px; text-align: left; } .distribution .distributionSec.other ul li h3:before{ content: ""; display: block; position: absolute; left: 0px; top: 50%; width: 15px; height: 2px; background-color: #ea303f; } .distribution .distributionSec.other ul li p{ line-height: 2.0; font-size: 15px; font-size: 1.5rem; } .distribution .distributionSec.other ul li img{ width: 100%; height: auto; } .distribution .distributionSec.other ul li .thumb{ position: relative; margin-bottom: 20px; display: block; } .distribution .distributionSec.other ul li .thumb i{ display: block; width: 30px; height: 30px; background-color: #c53131; position: absolute; right: 1px; bottom: 1px; text-align: center; line-height: 35px; color: #fff; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } .distribution .distributionSec.other ul li .thumb:before{ content: ""; display: block; width: 100%; height: 100%; border-bottom: solid 1px #8a9095; border-right: solid 1px #8a9095; position: absolute; right: -8px; bottom: -8px; } .distribution .distributionSec.other ul:after{ content: ""; display: block; visibility:hidden; clear: both; height: 0px; overflow: hidden; } .distribution .distributionSec.other ul li a:hover{ text-decoration: none; } .distribution .distributionSec.other ul li a:hover .thumb i { background-color: #921313; } /* outsourcing */ .distribution.outsourcing .ttl01{ background-image: url(../img/business/outsourcing/mian.jpg); } .distribution.outsourcing .distributionSec h2{ margin-bottom: 20px; font-size: 24px; font-size: 2.4rem; } .distribution.outsourcing .distributionSec.nagare{ background-image: none; } .distribution.outsourcing .distributionSec.nagare h2{ margin-bottom: 25px; font-size: 24px; font-size: 2.4rem; } .distribution.outsourcing #step-wrap-02-03{ background-image: none; padding-bottom: 0px; } .distribution.outsourcing .distributionSec-stepSec{ min-height: 221px; } .distribution.outsourcing .distributionSec-stepSec-txt h3{ margin-bottom: 5px; } .distribution.outsourcing .distributionSec-stepSec-txt ul{ margin-bottom: 15px; } .distribution.outsourcing .distributionSec-stepSec-txt ul li{ line-height: 2; } .distribution.outsourcing .distributionSec-stepSec-txt ul li:before{ content: "●"; color: #999999; margin-right: .6rem; } .distribution.outsourcing #step01 .distributionSec-stepSec-txt i:before{ background-image: url(../img/business/outsourcing/step1.png); } .distribution.outsourcing #step02 .distributionSec-stepSec-txt i:before{ background-image: url(../img/business/outsourcing/step2.png); } .distribution.outsourcing #step03 .distributionSec-stepSec-txt i:before{ background-image: url(../img/business/outsourcing/step3.png); } .distribution.outsourcing #step04 .distributionSec-stepSec-txt i:before{ background-image: url(../img/business/outsourcing/step4.png); } .distribution.outsourcing #step05 .distributionSec-stepSec-txt i:before{ background-image: url(../img/business/outsourcing/step5.png); } .distribution.outsourcing #step02 .distributionSec-stepSec-txt img{ right: auto; left: -515px; } .distribution.outsourcing #step01{ margin-bottom: 0px; } .distribution.outsourcing #step02{ margin-bottom: 20px; } .distribution.outsourcing #step03{ min-height: 234px; margin-bottom: 20px; } .distribution.outsourcing #step04{ min-height:inherit; margin-bottom: 20px; } .distribution.outsourcing #step04 .distributionSec-stepSec-inner{ min-height: inherit; padding:0px 0px; } .distribution.outsourcing #step04:before{ left: -60px; background-image: url(../img/business/outsourcing/step4_bg.jpg); } .distribution.outsourcing #step04 .distributionSec-stepSec-txt i{ top: 5px; } .distribution.outsourcing #step05{ min-height: inherit; background-color: #f4f4f4; margin-bottom: 0px; } .distribution.outsourcing #step05 .distributionSec-stepSec-inner{ min-height: inherit; padding:0px 0px; background-color: transparent;} .distribution.outsourcing #step05:before{ left: -60px; background-color: #f4f4f4; } .distribution.outsourcing #step05 .distributionSec-stepSec-txt i{ top: 5px; } .distribution.outsourcing #step-wrap-04-05{ padding-bottom: 20px; } .distribution.outsourcing .distributionSec.option{ background-image: none; padding-top: 20px; padding-bottom: 20px; } .distribution.outsourcing .distributionSec.option h2{ font-size: 30px; font-size: 3.0rem; } .distribution.outsourcing .distributionSec.option p{ text-align: left; } /* mailing */ .distribution.mailing .ttl01{ background-image: url(../img/business/mailing/mian.jpg); } .distribution.mailing .distributionSec.nagare{ background-image:none; margin-bottom: 20px; } .distribution.mailing #step-wrap-01-02{ background-image: none; padding-top: 0px; padding-bottom: 0px; } .distribution.mailing #step01{ margin-bottom: 20px; } .distribution.mailing #step02{ margin-bottom: 20px; } .distribution.mailing #step02 .distributionSec-stepSec-txt img{ right: calc(100% + 10px); } .distribution.mailing #step-wrap-03{ padding-top: 0px; padding-bottom: 0px; } .distribution.mailing #step-wrap-04{ padding-top: 0px; padding-bottom: 0px; background-image: none; background-size: cover; background-repeat: no-repeat; margin-bottom: 20px; } .distribution.mailing #step04{ margin-bottom: 0px; min-height: 285px; background-color: transparent;} .distribution.mailing #step04:before{ display: none; } .distribution.mailing #step04 .distributionSec-stepSec-inner{ background-color:transparent; } .distribution.mailing #step04 .distributionSec-stepSec-inner h3{ color: #333; } .distribution.mailing #step04 .distributionSec-stepSec-inner p{ color: #333; } .distribution.mailing #step-wrap-05{ padding-top: 0px; padding-bottom: 0px; background-image: none; background-size: cover; background-repeat: no-repeat; background-color: transparent; } .distribution.mailing #step05{ margin-bottom: 20px; min-height: 256px; background-color: transparent; } .distribution.mailing #step05:before{ display: none; } .distribution.mailing #step05 .distributionSec-stepSec-inner{ background-color:transparent; } .distribution.mailing #step05 .distributionSec-stepSec-inner h3{ color: #333; } .distribution.mailing #step05 .distributionSec-stepSec-inner p{ color: #333; } .distribution.mailing #step-wrap-06{ background-color: #f4f4f4; padding: 0px 0; padding-bottom: 40px; } .distribution.mailing #step06{ margin-bottom: 0px; left: calc(50% - 170px); } .distribution.mailing #step06:before{ display: none; } .distribution.mailing #step06 .distributionSec-stepSec-inner{ background-color:transparent; left:0px; } .distribution.mailing #step06 .distributionSec-stepSec-txt img{ top: calc(50% - 391px / 2); right: calc(100% + 10px); } .distribution.mailing #step-wrap-04 video{ width: 1366px; height: 666px; display: none; position: absolute; left: calc(50% - 1366px / 2); top: calc(50% - 666px / 2); } .distribution.mailing #step-wrap-04:before{ background-color: rgba(0,0,0,0); z-index: 110; } .distribution.mailing #step-wrap-05 video{ width: 1920px; height: 1080px; display: none; position: absolute; left: calc(50% - 1920px / 2); top: calc(50% - 1080px / 2); } /* service */ .distribution.service .ttl01{ background-image: url(../img/business/outsourcing/mian.jpg); } .distribution.service .distributionSec h2{ margin-bottom: 20px; font-size: 24px; font-size: 2.4rem; } .distribution.service .distributionSec.other h2{ font-size: 30px; font-size: 24px; font-size: 2.4rem; } .distribution.service .distributionSec.nagare{ background-image: none; } .distribution.service .distributionSec.nagare h2{ margin-bottom: 25px; font-size: 24px; font-size: 2.4rem; } .distribution.service #step-wrap-02-03{ background-image: none; padding-bottom: 0px; } .distribution.service .distributionSec-stepSec{ min-height: 221px; } .distribution.service .distributionSec-stepSec-txt h3{ margin-bottom: 5px; } .distribution.service .distributionSec-stepSec-txt ul li{ line-height: 2; } .distribution.service .distributionSec-stepSec-txt ul li:before{ content: "●"; color: #999999; margin-right: .6rem; } .distribution.service #step-wrap-01-03{ padding: 0px 0 20px 0; background-color: transparent; } .distribution.service #step01{ margin: 0px; min-height:inherit; margin-bottom: 20px; } .distribution.service #step02{ margin: 0px; margin-bottom: 20px; } .distribution.service #step02{ min-height: inherit; } .distribution.service #step02 .distributionSec-stepSec-inner{ min-height: inherit; padding: 0px 0; left: 0; } .distribution.service #step03{ min-height: inherit; } .distribution.service #step03 .distributionSec-stepSec-txt i{ top: -10px; } .distribution.service #step03 .distributionSec-stepSec-inner{ min-height: inherit; padding: 0px 0; left: 0; } .distribution.service .distributionSec-stepSec-txt i{ top: calc(50% - 60px); } .distribution.service #step01 .distributionSec-stepSec-txt i:before{ background-image: url(../img/business/service/step1.png); } .distribution.service #step02 .distributionSec-stepSec-txt i:before{ background-image: url(../img/business/service/step2.png); } .distribution.service #step03 .distributionSec-stepSec-txt i:before{ background-image: url(../img/business/service/step3.png); } .distribution.service #step04 .distributionSec-stepSec-txt i:before{ background-image: url(../img/business/service/step4.png); } .distribution.service #step05 .distributionSec-stepSec-txt i:before{ background-image: url(../img/business/service/step5.png); } .distribution.service #step-wrap-04-05{ background-color: #f4f4f4; padding: 0px; background-image: none; background-position: left top; background-size: contain; padding-bottom: 20px; } .distribution.service #step04{ min-height: inherit; margin: 0px; margin-bottom: 20px; } .distribution.service #step04 .distributionSec-stepSec-inner{ min-height: inherit; padding: 0px 0; left: 0px; background-color:transparent; } .distribution.service #step04:before{ background-color:transparent; } .distribution.service #step05{ min-height: inherit; margin: 0px; margin-bottom: 0px; } .distribution.service #step05 .distributionSec-stepSec-inner{ min-height: inherit; padding: 0px 0; left: 0px; background-color:transparent; } .distribution.service #step05:before{ background-color:transparent; } .distribution.outsourcing .distributionSec.option, .distribution.mailing .distributionSec.option, .distribution.service .distributionSec.option{ background-image: none; padding: 0px; padding-top: 10px; } .distribution .distributionSec.option>p{ padding: 0px; margin-top:10px; margin-bottom:20px; } .distribution .distributionSec.other{ padding-top: 0px; } .distribution .distributionSec.other h2{ padding-top: 30px; margin-bottom: 25px; } } /*# sourceMappingURL=business.css.map */