@charset "UTF-8";

/* More Work Style Design Solutions
-------------------------------------------- */
.moreWorkBlock { width: 100%; font-family: "Poppins", sans-serif; color: #fff; padding: 60px 0 54px; background: #34404f;}
.moreWorkBlock .moreWorkBlock__heading { font-size: 24px; font-size: 2.4rem; font-weight: 600; text-align: center; margin: 0;}
.moreWorkBlock .moreWorkPanel { width: 1000px; margin: 38px auto 0; padding-bottom: 70px; border-bottom: 1px solid #5c6571;}
.moreWorkBlock .moreWorkPanel__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; position: relative;}
.moreWorkBlock .moreWorkPanel__item { width: 48%; margin-left: 4%; overflow: hidden; position: relative; box-sizing: border-box;}
.moreWorkBlock .moreWorkPanel__item:first-child { margin-left: 0;}
.moreWorkBlock .moreWorkPanel__itemInner { color: #fff; display: block; position: relative;}
.moreWorkBlock .moreWorkPanel__itemInner:after { content: ""; width: 100%; height: 100%; border-width: 0; border-style: solid; border-color: rgba(0, 0, 0, 0.1); position: absolute; top: 0; left: 0; box-sizing: border-box; -webkit-transition: .2s; transition: .2s;}
.moreWorkBlock .panelItem__img { width: 100%; height: 300px; background-size: cover; background-repeat: no-repeat; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s;}

.moreWorkBlock .panelItem__text { position: absolute; top: 50%; left: 30px; z-index: 1; -webkit-transform: translateY(-65%); transform: translateY(-65%);}
.moreWorkBlock .panelItem__subHeading { font-size: 14px; font-size: 1.4rem; font-weight: 600; margin-bottom: 10px; line-height: 20px;}
.moreWorkBlock .panelItem__heading { font-size: 24px; font-weight: 600; margin: 0; line-height: 36px;}
.moreWorkBlock .panelItem__link { font-size: 16px; font-size: 1.6rem; font-weight: 400; line-height: 1; margin: 0; position: absolute; bottom: 27px; left: 30px; z-index: 1;}
.moreWorkBlock .panelItem__link:after { content: ">"; font-weight: 300; margin-left: 10px;}
.moreWorkBlock .moreWorkPanel__item:hover .panelItem__img { -webkit-transform: scale(1.03); transform: scale(1.03);}
.moreWorkBlock .moreWorkPanel__item:hover .moreWorkPanel__itemInner:after { border-width: 10px;}

.moreWorkBlock .moreWorkList { width: 1000px; margin: 43px auto 0;}
.moreWorkBlock .moreWorkList__inner { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex;}
.moreWorkBlock .moreWorkList__heading { font-size: 20px; font-size: 2.0rem; font-weight: 600; margin: 0;}
.moreWorkBlock .moreWorkList__heading > a { color: #fff;}
.moreWorkBlock .moreWorkList__heading > a:after { content: ""; width: 6px; height: 6px; vertical-align: middle; border-top: 2px solid #ccc; border-right: 2px solid #ccc; transform-origin: 50% 50%; transform: rotate(45deg); position: relative; left: 13px; display: inline-block;}
.moreWorkBlock .moreWorkList__contact { width: 314px; margin-right: 33px; padding-right: 20px; border-right: 1px solid #5c6571; box-sizing: border-box;}
.moreWorkBlock .contact__text { font-size: 14px; font-size: 1.4rem; margin: 14px 0 0; line-height: 20px;}
.moreWorkBlock .contact__button1 { margin-top: 15px;}
.moreWorkBlock .contact__button1 > a { width: 153px; border-color: rgba(255,255,255,0.6); background-color: transparent;}
.moreWorkBlock .contact__button1 > a:hover { background-color: #fff;}
.moreWorkBlock .contact__button2 { margin-top: 10px;}
.moreWorkBlock .contact__button2 > a { width: 153px; border-color: #ea5805; background-color: #ea5805;}
.moreWorkBlock .contact__button2 > a:hover { color: #fff; border-color: rgba(255,255,255,0.6); background-color: transparent;}
.moreWorkBlock .moreWorkList__solution {}
.moreWorkBlock .solution__inner { margin-top: 17px; display: -webkit-box; display: -ms-flexbox; display: flex;}
.moreWorkBlock .solution__heading { font-size: 18px; font-size: 1.8rem; font-weight: 300; margin: 0;}
.moreWorkBlock .solution__List { width: 274px;}
.moreWorkBlock .solution__List .listType1 { margin: 17px 0 0;}
.moreWorkBlock .solution__List .listType1 li { padding-left: 1.7em;}
.moreWorkBlock .solution__List .listType1 li a { font-family: "Poppins", sans-serif; color: #fff;}
.moreWorkBlock .solution__List .listType1 li a:after { content: ""; width: 5px; height: 5px; vertical-align: middle; border-top: 2px solid #ccc; border-right: 2px solid #ccc; transform-origin: 50% 50%; transform: rotate(45deg); position: relative; left: 9px; display: inline-block;}

/* Recommended Case Studies
-------------------------------------------- */
.recommendedBlock { width: 1000px; margin: 64px auto 74px; position: relative;}
.recommendedBlock .recommendedBlock_heading { font-size: 24px; font-size: 2.4rem; font-family: "Poppins", sans-serif; font-weight: 600; color: #141e28; text-align: center; margin: 0;}
.recommendedBlock .recommendedBlock__Link { position: absolute; top: 5px; right: 0;}
.recommendedBlock .recommendedBlock__Link > a { font-size: 14px; font-size: 1.4rem; font-family: "Poppins", sans-serif; color: #2b2c33;}
.recommendedBlock .recommendedBlock__Link > a:after { content: ""; width: 5px; height: 5px; margin-left: 10px; vertical-align: middle; border-top: 1px solid #2b2c33; border-right: 1px solid #2b2c33; transform-origin: 50% 50%; transform: rotate(45deg); position: relative; left: -3px; display: inline-block;}
.recommendedBlock .recommendedBlock__List { width: 100%; margin-top: 22px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.recommendedBlock .recommendedBlock__item { width: 31%; margin-left: 3.5%; overflow: hidden;}
.recommendedBlock .recommendedBlock__item:first-child { margin-left: 0;}
.recommendedBlock .recommendedBlock__item .item__inner { color: #fff; display: block; position: relative;}
.recommendedBlock .recommendedBlock__item .item__inner:after { content: ""; width: 100%; height: 100%; border-width: 0; border-style: solid; border-color: rgba(0, 0, 0, 0.1); position: absolute; top: 0; left: 0; box-sizing: border-box; -webkit-transition: .2s; transition: .2s;}
.recommendedBlock .recommendedBlock__item .item__img { width: 100%; height: 200px; background-size: cover; background-repeat: no-repeat; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s;}
.recommendedBlock .recommendedBlock__item .item__img:after { content: ""; width: 100%; height: 0; padding-top: 64.52%; background: linear-gradient(to bottom, rgba(0,0,0,0) 30%,rgba(0,0,0,0.8) 100%); position: absolute; top: 0; left: 0; z-index: 1; box-sizing: border-box;}
.recommendedBlock .recommendedBlock__item .item__text { font-size: 14px; font-size: 1.4rem; line-height: 20px; color: #fff; padding: 0 6%; position: absolute; bottom: 18px; left: 0; z-index: 10;}
.recommendedBlock .recommendedBlock__item.itemBlock1 .item__img { background-image: url(../images/solution/recommended_img01.jpg);}
.recommendedBlock .recommendedBlock__item.itemBlock2 .item__img { background-image: url(../images/solution/recommended_img02.jpg);}
.recommendedBlock .recommendedBlock__item.itemBlock3 .item__img { background-image: url(../images/solution/recommended_img03.jpg);}
.recommendedBlock .recommendedBlock__item:hover .item__img { -webkit-transform: scale(1.03); transform: scale(1.03);}
.recommendedBlock .recommendedBlock__item:hover .item__inner:after { border-width: 10px;}



@media screen and (max-width: 539px) {
  /* ---------------------------
  * SP
* --------------------------- */

/* More Work Style Design Solutions
-------------------------------------------- */
.moreWorkBlock { padding: 12.6% 0 16%;}
.moreWorkBlock .moreWorkBlock__heading { font-size: 21px; font-size: 2.1rem; line-height: 1.24;}
.moreWorkBlock .moreWorkPanel { width: 89.33%; margin-top: 5.6%; padding-bottom: 10.6%;}
.moreWorkBlock .moreWorkPanel__inner { flex-direction: column;}
.moreWorkBlock .moreWorkPanel__item { width: 100%; margin: 4.4% 0 0;}
.moreWorkBlock .moreWorkPanel__item:first-child { margin-top: 0;}
.moreWorkBlock .panelItem__img { height: 0; padding-top: calc(235 / 335 * 100%);}
.moreWorkBlock .panelItem__text { left: 6%; -webkit-transform: translateY(-48%); transform: translateY(-48%);}
.moreWorkBlock .panelItem__subHeading { font-size: 12px; font-size: 1.2rem; margin-bottom: 10px;}
.moreWorkBlock .panelItem__heading { font-size: 20px; font-size: 2.0rem; line-height: 1.5;}
.moreWorkBlock .panelItem__link { font-size: 14px; font-size: 1.4rem; bottom: 9%; left: 5.5%;}

.moreWorkBlock .moreWorkList { width: 89.33%; margin-top: 8.7%;}
.moreWorkBlock .moreWorkList__inner { flex-direction: column;}
.moreWorkBlock .moreWorkList__contact { width: 100%; margin: 12.2% 0 0; padding-right: 0; border: none; order: 2;}
.moreWorkBlock .contact__text { margin-top: 4.2%; line-height: 20px;}
.moreWorkBlock .contact__button1 { margin-top: 4.8%;}
.moreWorkBlock .contact__button2 { margin-top: 4.4%;}
.moreWorkBlock .contact__button1 > a,
.moreWorkBlock .contact__button2 > a { width: 176px; padding: 15px 14px;}
.moreWorkBlock .solution__inner { margin-top: 5%; flex-direction: column;}
.moreWorkBlock .solution__List { width: 100%; margin-top: 7%; }
.moreWorkBlock .solution__List:first-child { margin-top: 0; order: 0;}
.moreWorkBlock .solution__List .listType1 { margin: 17px 0 0;}
.moreWorkBlock .solution__List .listType1 li { padding-left: 1.7em;}

.moreWorkBlock .moreWorkList__heading { line-height: 30px; }

/* side nav (SP Only)
-------------------------------------------- */
.side { margin-top: 48px;}

/* Recommended Case Studies
-------------------------------------------- */
.recommendedBlock { width: 89.33%; margin: 14.6% auto 16%;}
.recommendedBlock .recommendedBlock_heading { font-size: 18px; font-size: 1.8rem;}
.recommendedBlock .recommendedBlock__Link { display: none;}
.recommendedBlock .recommendedBlock__List { margin-top: 5.8%;}
.recommendedBlock .recommendedBlock__item { width: 100%; margin: 6% 0 0;}
.recommendedBlock .recommendedBlock__item:first-child { margin-top: 0;}
.recommendedBlock .recommendedBlock__item .item__inner { overflow: hidden;}
.recommendedBlock .recommendedBlock__item .item__inner:after { content: none;}
.recommendedBlock .recommendedBlock__item .item__img { width: 34.33%; height: 0; float: left; padding-top: calc(75 / 335 * 100%);}
.recommendedBlock .recommendedBlock__item .item__img:after { content: none;}
.recommendedBlock .recommendedBlock__item .item__text { width: 62.69%; font-weight: 600; font-family: "Poppins", sans-serif; line-height: 20px; color: #0080cf; float: right; padding: 0; position: relative; top: 0px; bottom: auto;}
.recommendedBlock .recommendedBlock__item:hover .item__img { -webkit-transform: scale(1.0); transform: scale(1.0);}
}/*@media*/