@charset "shift_jis";
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:700');

/* --------------------------------------------------------------------
	common setting
--------------------------------------------------------------------- */
.clearfix:after{
    content: ".";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
}

.pc_only {display:block;}
.sp_only {display:none;}

#section4 p {padding: 0 20px 50px;
    font-size: 15px;
    text-align: center;}

#section4 a.box { float:left; margin-right: 2%;
    display: block;
    width: 32%;
	white-space:initial;
	box-shadow:0px 30px 30px -20px rgba(15, 31, 43, 0.15), 0px 5px 20px rgba(15, 31, 43, 0.07);
	transition: all .3s ease-out;
	position:relative;
}
#section4 a.box:hover { opacity:0.8;}

#section4 a.box.end {margin-right:0px;}
#section4 

#section4 a.box .inner{
	padding:0 0 20px 0;
}
#section4 a.box .photo img{
padding: 0 0 5%;width: 100%;}

#section4 a.box .logo img{
text-align:center;
height:38px;
	align-items:center;
	justify-content:center;
margin:20px auto;
width:auto;
}
/*
#section4 a.box.end .logo img{
height:20px;
}*/

#section4 a.box .logo {
text-align:center;
	align-items:center;
	justify-content:center;
margin:0px auto;
width:auto;
}


@media screen and (max-width: 640px){
#section4 a.box {
        margin-right: 0;
        width: 86%;
        margin-bottom: 20px;
    margin: 5% 7%;
    }
#section4 .titleWrap {
    margin-bottom: 50px !important;
}
}



.wrapper_ {
  min-width:inherit;
}
#mainVisual section .contents *,
#mainContents section .contents * {
  box-sizing:border-box;
}
#mainContents section .contents {
  width:80%;
  margin-right:auto;
  margin-left:auto;
  color:#202930;
  font-size:18px;
}
#mainContents section > * {
  font-size:18px;
}
.txt_gray {
  color:#4a535a;
}
.mainframe_ .en {
  font-family: 'Roboto Condensed', sans-serif;
	font-feature-settings: "palt";
}
.mainframe_ .lsn{
  font-size:60%;
	letter-spacing:-0.1em !important;
}

/* button common ---------- */

#mainContents section .btn {
	width:450px; margin: 50px auto;
}
#mainContents section .btn a,
#mainContents section .btn.nolink span {
	display:block;
  position:relative;
	border-radius:35px;
	text-align:center;
	font-size:18px;
	color:#fff;
	line-height:64px;
  transition: 0.3s;
  z-index:0;
}
#mainContents section .btn a::after,
#mainContents section .btn.nolink span::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  border-radius:35px;
  transition: 0.3s;
  z-index: -1;
  background: transparent;
}
#mainContents section .btn a:hover::after,
#mainContents section .btn.nolink span:hover::after {
  width: 100%;
}

/* edge */

#mainContents section .btn.edge a {
  background-color:transparent;
	border:solid 3px #ffffff;
}
#mainContents section .btn.edge a:hover::after {
  background-color:#ffffff;
}


/* blue */

#mainContents section .btn.blue a,
#mainContents section .btn.blue.nolink span {
  background-color:#3296eb; /* fall back */
  background-image: linear-gradient(to left, #3296eb 0%, #3889cd 99%);
}
#mainContents section .btn.blue a:hover::after,
#mainContents section .btn.blue.nolink span:hover::after{
  background-color:#2778bd;
}

/* green */

#mainContents section .btn.green a,
#mainContents section .btn.green.nolink span{
  background-color:#13b5b1; /* fall back */
  background-image: linear-gradient(to left, #13b5b1 0%, #13b5a0 99%);
}
#mainContents section .btn.green a:hover::after,
#mainContents section .btn.green.nolink span:hover::after{
  background-color:#00759b;
}

/* pink */

#mainContents section .btn.pink a,
#mainContents section .btn.pink.nolink span{
  background-color:#ff6458; /* fall back */
  background-image: linear-gradient(to left, #ff6458 0%, #ff585d 99%);
}
#mainContents section .btn.pink a:hover::after,
#mainContents section .btn.pink.nolink span:hover::after{
  background-color:#fd4239;
}

/* yellow */

#mainContents section .btn.yellow a,
#mainContents section .btn.yellow.nolink span{
  background-color:#f4a815; /* fall back */
  background-image: linear-gradient(to left, #f4a815 0%, #f4b815 99%);
}
#mainContents section .btn.yellow a:hover::after,
#mainContents section .btn.yellow.nolink span:hover::after{
  background-color:#e29500;
}

/* purple */

#mainContents section .btn.purple a,
#mainContents section .btn.purple.nolink span{
  background-color:#6b4e9c; /* fall back */
  background-image: linear-gradient(to left, #6b4e9c 0%, #5d59ac 99%);
}
#mainContents section .btn.purple a:hover::after,
#mainContents section .btn.purple.nolink span:hover::after{
  background-color:#4238c8;
}


/* checklist */

#mainContents ul.check li{
	line-height:1;
}
#mainContents ul.check {
  letter-spacing: -.4em;/* for children inline-block */
}
#mainContents ul.check li{
  position:relative;
  display:block;
  margin-bottom:25px;
	padding-left:35px;
  letter-spacing:0.025em; /* for inline-bloxk */
  vertical-align:top;
}
#mainContents ul.check li:before {
  position:absolute;
  top:-5px;
  left:5px;
  content:"L";
  display: inline-block;
  transform: scale(1,-1) rotate(135deg);
  color:#13b5b1;
  font-size:26px;
}

/* --------------------------------------------------------------------
	#topicPath
--------------------------------------------------------------------- */

#topicPath {
	padding-bottom:15px;
	margin-top: 108px;
}

/* --------------------------------------------------------------------
	#mainVisual
--------------------------------------------------------------------- */

#mainVisual {
	width:100%;
	background-color:#ffffff;
	color:#202930;
}
#mainVisual .contents {
/*	display:flex;
	margin-left:10%;
	margin-right:27%;
	padding-top:60px;
	white-space:nowrap;*/
}
#mainVisual .contents > div{
	white-space:initial;
}
#mainVisual .contents > div:first-of-type{
	width:60%;
}
#mainVisual .contents > div:last-of-type{
	margin-left:auto;
	width:30%;
}
#mainVisual .pageTitle {
  font-size:23px;
	letter-spacing:0.05em;
	margin-top:48px;
}
#mainVisual .pageTitle span {
	display:inline-block;
	border:solid 1px #fff;
  line-height:1em;
	padding:10px 25px;
	margin:0 30px 0 0;
}
#mainVisual .pageTitle span img {padding-right: 15px;width: 120px;}
#mainVisual h1 {
  margin-top:30px;
  font-size:34px;
  font-weight:bold;
	letter-spacing:0.05em;
line-height: 1.7em;
}
#mainVisual h1 .en{
    font-size: 50px;
    font-weight: bold;
}
#mainVisual h1 sub{
	font-size:12px;
	vertical-align:baseline;
}
#mainVisual .note{
	margin-top:30px;
	font-size:12px;
	color:#fff;
	letter-spacing:0;
}

/* --------------------------------------------------------------------
	#mainContents
--------------------------------------------------------------------- */

#mainContents{
	margin:120px 0 0 0;
}

/* --------------------------------------------------------------------
	.title
--------------------------------------------------------------------- */

#mainContents .titleWrap {
	width:100%;
	height:277px;
	background-size:cover;
	text-align:center;
	display:table;
}
#mainContents .titleWrap .title{
	height:277px;
	color:white;
	display:table-cell;
	vertical-align:middle;
	padding:0 10%;

}
#mainContents .titleWrap .title h2{
	font-size:40px;
	font-weight:bold;
}
#mainContents .titleWrap .title h2:before{
	content:"";
	display:block;
	margin:0 auto 25px auto;
  background-repeat:no-repeat;
}
#mainContents .titleWrap .title p{
	margin-top:40px;
	letter-spacing:0.065em;
}

/* --------------------------------------------------------------------
	#section1
--------------------------------------------------------------------- */
#section0 h2{
	font-size:40px;
	font-weight:bold;
	text-align:center;
	margin-bottom:60px;
}
#section0 ul.logo {display: flex;
    justify-content: space-between;
    white-space: nowrap; width:1200px;margin: 0 auto 70px;}
#section0 ul.logo li , #section0 ul.logo li img{width:575px;}
/*#section0 ul.logo li:last-child{margin:30px 0 0 50px;}*/

@media screen and (max-width: 640px){
#section0 ul.logo {display:block;
    justify-content: space-between;
    white-space: nowrap; width:100%;margin: 0 auto 40px; padding: 0%}
#section0 ul.logo li , #section0 ul.logo li img{width:100%;}
#section0 ul.logo li:last-child{margin:30px 0 0 0;} 
#section0 h2 { margin-bottom: 30px;}
}

#section1 { margin: 80px 0;}

#section1 .boxWrap{
	display:flex;
	justify-content:space-between;
	white-space:nowrap;
}
#section1 .boxWrap .box{
	display:block;
	width:18%;
	white-space:initial;
	box-shadow:0px 30px 30px -20px rgba(15, 31, 43, 0.15), 0px 5px 20px rgba(15, 31, 43, 0.07);
	transition: all .3s ease-out;
}
#section1 .boxWrap .box:hover{
  transform:translateY(-10px);
}
#section1 .boxWrap .box .inner{
	padding:30px 25px;
}
#section1 .boxWrap .box .icon{
	text-align:center;
}
#section1 .boxWrap .box .icon figure{
	margin:0;
	height:106px;
}
#section1 .boxWrap .box .icon figure img{
	max-width:100%;
	height:auto;
}
#section1 .boxWrap .box.package .icon figure{
	padding-top:20px;
}
/*
#section1 .boxWrap .box.trend .icon figure{
	padding-top:17px;
}
#section1 .boxWrap .box.resource .icon figure{
	padding-top:13px;
}
#section1 .boxWrap .box.tool .icon figure{
	padding-top:6px;
}
#section1 .boxWrap .box.results .icon figure{
	padding-top:0;
}*/
#section1 .boxWrap .box h3{
	font-weight:bold;
	letter-spacing:0;
        margin-top: 30px;
font-size:20px;
}
#section1 .boxWrap .box.package h3{
	color:#ff6458;
}
#section1 .boxWrap .box.trend h3{
	color:#f4a815;
}
#section1 .boxWrap .box.resource h3{
	color:#13b5b1;
}
#section1 .boxWrap .box.tool h3{
	color:#3296eb;
}
#section1 .boxWrap .box.results h3{
	color:#6b4e9c;
}
#section1 .boxWrap .box p{
	margin-top:15px;
	text-align:center;
	letter-spacing:0.05em;
	color:#202930;
    font-size: 14px;
line-height: initial;
}
#section1 .boxWrap .box .btn{
	width:auto;
	max-width:100%;
	margin-top:30px;
}
#section1 .boxWrap .box .btn span{
	line-height:40px;
	font-size:16px;
	display:block;
}



.wi1200{width: 1200px; margin: 0 auto;display: flex;justify-content: space-between;}
.g1010 { background:#F5F5F5; padding:80px 0;}
.w1010 { background:#ffffff; padding:80px 0;}
.wi1200 .image {width: 50%;padding-right: 2%;}
.wi1200 .txt { width: 50%;padding-left: 8%; position: relative;}
/*.g1010 .wi1200 .image img { width:100%;}*/
.g1010 .wi1200 .image { margin-right: -6%;padding-right: 0;padding-left: 2%;}
.g1010 .wi1200 .txt {padding-right: 2%;padding-left: 0;}
.g1010 .wi1200 {flex-direction: row-reverse;}
.wi1200 .txt .mini { border:1px solid #000; padding:5px; font-size:15px;display: inline-block; margin-bottom: 30px;}
.wi1200 .txt h3 { font-size:28px; font-weight:bold; padding-left: 20px; margin-bottom: 30px;}
.wi1200 .txt .sum { padding-left: 20px; font-size:18px;margin-bottom: 30px;}
#mainContents .wi1200 .txt ul.check { padding-left: 20px;}
#section_1 .wi1200 .txt h3,#mainContents #section_1 ul.check li:before {color: #ff6458;}
#section_2 .wi1200 .txt h3,#mainContents #section_2 ul.check li:before {color: #f4a815;}
#section_3 .wi1200 .txt h3,#mainContents #section_3 ul.check li:before {color: #13b5b1;}
#section_4 .wi1200 .txt h3,#mainContents #section_4 ul.check li:before {color: #3296eb;}
#section_5 .wi1200 .txt h3,#mainContents #section_5 ul.check li:before {color: #6b4e9c;}
#mainContents #section_2 ul.check.end {position: absolute;top: 216px;left: 300px;}
#mainContents #section_3 ul.check.end {position: absolute;top: 220px;left: 275px;}
#mainContents #section_5 ul.check.end {position: absolute;top: 194px;left: 290px;}

@media screen and (max-width: 640px){
.wi1200 {margin-top: 20px;flex-wrap: wrap; width: 100%;}
.wi1200 .image {width: 90%;padding: 5% !important;margin-right: 0 !important;}
.wi1200 .txt {width: 100%;padding-left: 0%;}
#mainContents ul.check li { text-align: left;font-size: 15px;}
.wi1200 .txt h3 {font-size: 17px; line-height: initial; padding-left: 0; text-align: center; margin-bottom:0;}
#mainContents #section_2 ul.check.end { position: initial;}
#mainContents #section_3 ul.check.end { position: initial;}
#mainContents #section_5 ul.check.end { position: initial;}
.wi1200 .txt .sum {font-size: 15px; line-height: initial; margin-bottom: 20px;}
}

#section3:before {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    border-bottom: solid 2px #FF6258;
    padding: 19px 0 0 0;
    margin: 0 0 80px 0;
}
#section3:after {
    content: "";
    width: 104px;
    height: 44px;
    background-image: url(https://www.ecbeing.net/cms/images/industry/apparelaccessory/new/arrow.png);
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    margin: auto;
    background-color: #fff;
    padding: 0 2px;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
}
#section3 {
    position: relative;
    margin-top: 100px;
	width:100%;
}
#section3 .contents{
	display:flex;
	justify-content:space-between;
}
#section3 .box{
	width:47%;
	max-width:610px;
}
#section3 .box.tool{
	width:48%;
	max-width:620px;
}
#section3 .box h3{
	font-size:2.6vw;
	line-height:50px;
	font-weight:bold;
	letter-spacing:0.01em;
	color:#202930;
	margin:0 0 35px 0;
	background-repeat:no-repeat;
}
@media (max-width: 960px) {
  #section3 .box h3{
    font-size: 26px;
  }
}
@media (min-width: 1360px) {
  #section3 .box h3{
    font-size: 34px;
  }
}
#section3 .box h3 span{
	display:block;
	color:#4a535a;
	font-size:18px;
  font-weight:normal;
	line-height:1;
	margin:0 0 20px 0;
}
#section3 .box h3{
  display:flex;
  justify-content:space-between;
  width:100%;
}
#section3 .box h3 p{
  width:76%;
}
#section3 .box h3 .image {
  width:20%;
}
#section3 .box h3 .image img {
  width:100%;
  height:auto;
  max-width:122px;
}
#section3 .box.marketing h3 .image img {
  max-width:122px;
}
#section3 .box.tool h3 .image img {
  padding-top:10px;
  max-width:113px;
}

/* checklist */

#section3 .marketing ul.check li{
  width:30%;
  margin-right:2%;
}
#section3 .marketing ul.check li:nth-of-type(3) {
  margin-right:0;
}
#section3 .tool ul.check li{
  position:relative;
	padding-left:40px;
	margin-bottom:25px;
}
#section3 .tool ul.check li:before {
  color:#3889cd;
}
#section3 .tool ul.check li:last-child{
  margin-bottom:0;
}
#section3 .tool ul.check li p {
  padding-left:160px;
  background-position:left top;
  background-repeat:no-repeat;
}
#section3 .tool ul.check li:nth-of-type(1) p {
  line-height:22px;
  background-image:url(https://www.ecbeing.net/cms/images/service3/logo_visumo.png);
}
#section3 .tool ul.check li:nth-of-type(2) p {
  background-image:url(https://www.ecbeing.net/cms/images/service3/logo_revico.png);
}
#section3 .tool ul.check li:nth-of-type(3) p {
  background-image:url(https://www.ecbeing.net/cms/images/service3/logo_sechstant.png);
}
#section3 .tool ul.check li:nth-of-type(4) p {
  background-image:url(https://www.ecbeing.net/cms/images/service3/logo_omni_s.png);
  background-position:left center;
}

/* btn */

#section3 .box .btn{
	margin:40px 0 0 0;
}
#section3 .box .btn a{
	width:340px;
  line-height:50px;
}


#mainContents #section3 ul.check li {display: inline-block;}


#section3 h2 {font-size: 40px;font-weight: bold; text-align: center; margin-bottom: 60px;}
#section3 h2 span {font-size: 15px;}

@media screen and (max-width: 640px){
#section3 {
        width: auto;
    }
#section3 .contents {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
#section3 .box {
width: 100% !important;
    max-width: inherit !important;
        margin-bottom: 40px;
    }
#section3 .box h3 {
        font-size: 18px;
        margin-top: 0;
        margin-bottom: 20px;
    }
#section3 .marketing ul.check li {
        width: 100%;
        margin-right: 0;
        padding-left: 25px;
        text-align: left;
    }
#section3 .box h3 span {
        font-size: 12px;
        margin-bottom: 10px;
    }
#section3 .box .btn {
        margin: 0;
        width: 100%;
    }
#section3 .box .btn a {
        width: 100%;
        line-height: 40px;
        font-size: 12px;
    }
#section3 ul.check {padding: 0 5%;}
#section3 .tool ul.check li {
        text-align: left;
        padding-left: 25px;
    }
#section3 .tool ul.check li:last-child {
        margin-bottom: 25px;
    }
#section3 .tool ul.check li p {
        padding-left: 135px;
        min-height: 20px;
    }
}


#section4 .titleWrap {
	background-image: url(https://www.ecbeing.net/cms/images/industry/apparelaccessory/new/obi_bk2.png);
margin-bottom: 100px;}

#section4 .titleWrap .title h2:before{
width: 68px !important;
    height: 57px !important;
	background-image:url(https://www.ecbeing.net/cms/images/industry/apparelaccessory/new/obi_icon2.png);
}
@media screen and (max-width: 640px){
body.sub-page.page-reason #section4 .titleWrap .title h2:before {
width: 68px !important;
    height: 57px !important;
    }}
/* --------------------------------------------------------------------
	#section2
--------------------------------------------------------------------- */
#section2{
	margin-top:100px;
}
#section2 .titleWrap {
	background-image:url(https://www.ecbeing.net/cms/images/industry/apparelaccessory/new/obi_bk1.png);
}
#section2 .titleWrap .title h2:before{
	width:56px;
	height:56px;
	background-image:url(https://www.ecbeing.net/cms/images/industry/apparelaccessory/new/obi_icon1.png);
}
@media screen and (max-width: 640px){
body.sub-page.page-reason .titleWrap .title h2:before {
    width: 56px !important;
    height: 56px !important;
}
}

/* --------------------------------------------------------------------
	#section3
--------------------------------------------------------------------- */
#section3{
	margin-top:120px;margin-bottom: 100px;
}
#section3 .titleWrap {
	background-image:url(/cms/images/reason2/sec3_title.jpg);
}
#section3 .titleWrap .title h2:before{
	width:87px;
	height:85px;
	background-image:url(/cms/images/reason2/sec3_title_icon.png);
}





.back20190522_1 {height:500px; }
.back20190522_2 { background:url(https://www.ecbeing.net/cms/images/industry/apparelaccessory/new/main_bk.png) no-repeat center center;
    height: 500px;
    padding: 1px 0 0px 175px;
    text-align: left;
    color: #fff;
    background-size: cover;}


@media screen and (max-width: 640px){
body.sub-page.page-reason #section1 .boxWrap .box h3 { font-size: 16px; line-height: initial;}
.g1010 { padding: 20px 0;}
.w1010 { padding: 20px 0;}
#mainContents ul.check li { margin-bottom: 18px;}
#section3 .box h3 p { line-height: initial;}
#mainContents section .btn { width: 90%;}
#section4 p { line-height: initial;}
#section1 { margin: 30px 0;}
#section3 h2 { margin-bottom: 30px;}
#section3 { margin-top: 30px; margin-bottom: 30px;}
.pc_only {display:none;}
.sp_only {display:block;}
}