@charset "UTF-8";

*                       { margin: 0; padding: 0;
                          -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
html                    { visibility: hidden; height: 100%; font-size: 10px;
                          -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html.wf-active          { visibility: visible; }
body                    { display: flex; flex-direction: column; min-width: 320px; min-height: 100vh; height: 100%; margin: 0 auto; padding: 0; color: #4e4e4e; line-height: 1.6; font-family: 'a-otf-ud-shin-go-pr6n', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', '游ゴシック', YuGothic, 'Meiryo','メイリオ', sans-serif; }
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
ol, ul                  { list-style: none; }
p                       { margin: 0; font-size: 1.2rem; }
p.white                 { color: #fff !important; }
b, strong               { font-weight: bold; }
abbr[title]             { border-bottom: 1px dotted; }
input,
textarea,
button,
select                  { margin: 0; font-size: 100%; line-height: normal; vertical-align: baseline; }
button,
input[type="button"],
input[type="reset"],
input[type="submit"]    { cursor: pointer;
                          -webkit-appearance: button; -moz-appearance: button; }
input[type="checkbox"]  { vertical-align: middle; margin-right: 5px; }
textarea                { overflow: auto; height: 128px; }
img                     { width: 100%; height: auto; vertical-align: top; border: 0; }
a, button, dt, dd, h1, h2, h3, h4, h5, label, li, p, span, th, td, textarea { word-break: break-word; }
dl:before,
dl:after                { content: ""; display: block; overflow: hidden; }
dl:after                { clear: both; }
dl                      { width: 100%; }
dt,
dd                      { float: left; height: auto; padding: 5px; text-align: left; font-size: 1.2rem; }
dt                      { width: 10%; clear: both; text-align: right; }
dd                      { width: 90%; margin-top: 0; }


/* Links
-----------------------------------------------------------------------------*/
a                       { color: #1e2854; }
a.white                 { color: #fff; }
a:link,
a:visited               { outline: none; text-decoration: none; }
a:hover,
a:active                { outline: none; color: #1e2854; text-decoration: underline; }
a:hover                 { cursor: pointer; }
a.img                   { padding: 0 !important; border: none !important; background: none !important; }


/* Contant
-----------------------------------------------------------------------------*/
h1                      { margin: 0; color: #1e2854; font-size: 5rem; text-align: center; font-family: 'myriad-pro', 'a-otf-ud-shin-go-pr6n', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', '游ゴシック', YuGothic, 'Meiryo','メイリオ', sans-serif; font-weight: normal; }
h2                      { margin: 40px 0; color: #1e2854; font-size: 1.6rem; font-weight: normal; text-align: center; }
h3                      { line-height: 1.6; vertical-align: middle; margin-bottom: 60px; padding: 0; color: #1e2854; text-align: center; font-size: 3.4rem; font-weight: bold; }
h3.tag                  { display: inline-block; margin-top: -34px; margin-left: -22px !important; padding: 0 10px; color: #fff; background: #95c51a; }
h3.blue                 { color: #54bdff; }
h1.white,
h2.white,
h3.white,
h5.white                { color: #fff; }
p.timestamp             { margin-bottom: 0; }
h1, h2, h3, p           { word-break: break-word; }
img.round               { width: 40px !important; line-height: 40px; vertical-align: middle; margin: 10px; border-radius: 50%; }
img.round.small         { width: 30px !important; margin-top: 0; margin-bottom: 0; }
ol                      { list-style-type: decimal; color: #4e4e4e; }
ol > li                 { margin: 0 0 0 2em; padding: 0 0 5px; font-size: 1.4rem; }
ol > li > p:first-child { margin-top: 10px; font-weight: bold; color: #4e4e4e; }
ol + p                  { margin-top: 10px; color: #999; }
video                   { position: fixed; top: 0; left: 50%; z-index: -2; min-width: 100%; margin-top:70px; background-size: cover;
                          -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); transform: translate(-50%, 0); }

.pc                     { display: inline-block; }
.tablet,
.sp                     { display: none !important; }

.main                   { position: initial; }
.wrapper                { position: relative; -webkit-flex: 1; flex: 1 0 auto; width: 100%; min-height: 0%; margin: 70px auto 0; overflow: hidden; -webkit-overflow-scrolling: touch; }
.content                { position: relative; z-index: 1; width: 80%; margin: 0 auto; padding: 0; }
.content:first-of-type  { padding-top: 60px; }
.content.center         { text-align: center; }
.content.left           { text-align: left; }
.content.right          { text-align: right; }
.content header         { padding-top: 120px; padding-bottom: 80px; }
.content p              { line-height: 2; margin-bottom: 15px; font-size: 1.6rem; }
.content a:hover        { text-decoration: none; }
/*.content:nth-of-type(n+2) { padding-top: 0; }*/
.logo                   { text-align: center; }
.read                   { margin-top: 60px; line-height: 2 !important; }

.animated               { -webkit-animation-duration: 2s; animation-duration: 2s;
                          -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.fade-in-down           { -webkit-animation-name: fade-in-down; animation-name: fade-in-down; }
@keyframes fade-in-down {
                            0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); -moz-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) }
                          100% { opacity: 1; -webkit-transform: none; -moz-transform: none; transform: none }
                        }

.scale-up               { -webkit-animation-name: scale-anim01; animation-name: scale-anim01; }
@keyframes scale-anim01 {
                           0% { opacity: 0; -webkit-transform: scale3d(0, 0, 0); -moz-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); }
                          100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
                        }

.delay                  { transform-origin: center top; animation: delay 1s both; }
.delay1                 { animation-delay: 1s; }
.delay2                 { animation-delay: 2s; }
.delay3                 { animation-delay: 3s; }
.delay4                 { animation-delay: 4s; }
.delay5                 { animation-delay: 5s; }
.delay6                 { animation-delay: 6s; }
.delay7                 { animation-delay: 7s; }
.delay8                 { animation-delay: 8s; }
.delay9                 { animation-delay: 9s; }
.delay10                { animation-delay: 10s; }
@keyframes delay        {
                            0% { opacity: 0; text-shadow: 0 0 0 #0f0; transform: translate(0,2em); }
                           50% { text-shadow: 0 0 0.5em #0f0; }
                          100% { opacity: 1; text-shadow: none; transform: translate(0,0); }
                        }

.hero                   { display: -webkit-flex; display: flex; height: 100vh; overflow: hidden; background: #111;
                          -webkit-justify-content: center; justify-content: center;
                          -webkit-align-items: center; align-items: center; }
.hero h1                { z-index: 1; }
.hero .fadein           { -webkit-animation-name: hero-fadein; -moz-animation-name: hero-fadein; -ms-animation-name: hero-fadein; animation-name: hero-fadein;
                          -webkit-animation-duration: 4s; -moz-animation-duration: 4s; -ms-animation-duration: 4s; animation-duration: 4s; }
@keyframes hero-fadein  {
                            0% { visibility: hidden; opacity: 0; }
                          100% { visibility: visible; opacity: 1; }
                        }
.copy                   { z-index: 1; width: 100%; }

.background             { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; }
.background.halftone    { background: url('../images/halftone.png') repeat; overflow: hidden; }
.background.dark-gray   { background: #252525; opacity: .1; }
.background.black       { background: #000; opacity: .5; }
.background.gradient1   { background-image: linear-gradient(to bottom, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .0) 40%); }
.background.gradient2   { background-image: -webkit-radial-gradient(at top center, rgba(0, 0, 0, .03) 0%, rgba(0, 0, 0, .03) 100%), -webkit-linear-gradient(bottom, rgba(0, 0, 0, .1) 0%, rgba(255, 255, 255, .05) 100%);
                          background-image: radial-gradient(at top center, rgba(0, 0, 0, .03) 0%, rgba(0, 0, 0, .03) 100%), linear-gradient(to top, rgba(0, 0, 0, .1) 0%, rgba(255, 255, 255, .05) 100%); }
.background.gradient3   { background-image: linear-gradient(to bottom, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .4) 100%); }
.background.ellipse-center { background: -webkit-radial-gradient(ellipse farthest-corner at center center, rgba(0, 0, 0, .3) 30%, rgba(0, 0, 0, .7) 100%) 0% 0%;
                          background: radial-gradient(ellipse farthest-corner at center center, rgba(0, 0, 0, .3) 30%, rgba(0, 0, 0, .7) 100%) 0% 0%; }
.background.ellipse-left { background: -webkit-radial-gradient(ellipse farthest-corner at left, rgba(0, 0, 0, .1) 40%, rgba(0, 0, 0, .5) 100%) 0% 0%;
                          background: radial-gradient(ellipse farthest-corner at left, rgba(0, 0, 0, .1) 40%, rgba(0, 0, 0, .7) 100%) 0% 0%; }
.background.ellipse-right { background: -webkit-radial-gradient(ellipse farthest-corner at right, rgba(0, 0, 0, .1) 40%, rgba(0, 0, 0, .7) 100%) 0% 0%;
                          background: radial-gradient(ellipse farthest-corner at right, rgba(0, 0, 0, .1)40%, rgba(0, 0, 0, .7) 100%) 0% 0%; }
.background.cover       { z-index: -2; display: inline-block;  background-position: center center; background-repeat: no-repeat; background-size: cover; }
.background.filter      { -webkit-filter: blur(2px); -ms-filter: blur(2px); filter: blur(2px); }
.background.overlay     { background-size: 100%; }
.background.fixed       { position: fixed; background-position: center 70px; }

.bg                     { position: absolute; top: 0; bottom: 0; background-size: contain; z-index: -2; width: auto; height: 100%; min-height: 100%; }

.particle-area          { position: fixed; top: 0; left: 0; }
.particle-area .block   { border-radius: 50%; }

.btn-box                { display: block; width: 100%; margin-top: 60px; margin-bottom: 40px; text-align: center; }

.ghost.more             { position: relative; display: inline-block; min-height: 41px; margin-top: 40px; font-size: 1.4rem; font-family: 'myriad-pro'; background: #fff;
                          -webkit-transition: background-color 300ms linear; -moz-transition: background-color 300ms linear; -ms-transition: background-color 300ms linear; transition: background-color 300ms linear; }
.ghost.more:hover       { color: #fff; background: #1e2854; }
.ghost                  { position: relative; display: inline-block; width: 100%; max-width: 200px; padding: 7px 20px; border: 1px solid #1e2854; text-decoration: none !important; color: #1e2854; font-size: 1.4rem; text-align: center; background: #fff; }
.ghost:hover            { color: #fff; background: #1e2854;
                         -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease-out; transition: all 0.6s ease-out; }
.ghost.white            { border-color: #fff; color: #fff; }
.ghost.white:hover      { background: rgba(255, 255, 255, .3); }
.ghost.more             {  width: 120px; }

.tag                    { display: inline-block; vertical-align: middle; margin-right: 3px; padding: 1px 5px; line-height: 15px; font-size: 1rem !important; color: #111; background: #f0f0f0; }
.tag.notice             { background: #30d561; }
.tag.pressrelease       { background: #4cd6ff; }
.tag.event              { background: #ff4a87; }
.tag.report             { background: #fcd812; }


/* Top
-----------------------------------------------------------------------------*/
body.top-body           { background-color: #000; }
.top h1                 { width: 100%; margin-top: 0; margin-bottom: 40px; color: #fff; font-size: 2rem; font-weight: bold; white-space: nowrap; }
.top h2                 { margin-top: 0; margin-bottom: 0; font-size: 1.8rem; font-weight: bold; }
.top h3                 { color: #fff; white-space: nowrap; }
.top h3.small           { font-size: 3rem; }
.top section:first-of-type { border-top: none; }
.top video              { height: 100%; }
.top p                  { margin-bottom: 0; font-size: 1.4rem; }
.top i                  { vertical-align: middle; position: absolute; top: 50%; left: 50%;
-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.top .hero h3           { margin: 0; font-size: 8rem; text-align: center; font-family: 'myriad-pro', 'a-otf-ud-shin-go-pr6n', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', '游ゴシック', YuGothic, 'Meiryo','メイリオ', sans-serif; font-weight: normal; font-weight: 600; }
.top .hero .background  { position: fixed !important; bottom: 0; }
.top .content           { width: 100%; margin-top: 0; margin-bottom: 0; padding: 0; }
.top .content p         { z-index: 2; color: #fff; }
.top .content:nth-of-type(2) a li { padding: 0; }
.top .content:nth-of-type(2) a p { color: #fff; }
.top .content:nth-of-type(2) a p.title { height: 46px; overflow: hidden; }
.top .content:nth-of-type(n+2) { padding-top: 30px; }
.top .content:nth-of-type(n+2) h3 { position: absolute; top: 40px; width: 100%; line-height: 1.4; color: #c5c5c5; text-align: left; }
.top .content:nth-of-type(n+2) li { position: relative; margin: 0; }
.top .content:nth-of-type(n+2) a .background.cover { filter: grayscale(100%); transition: .3s ease-in; }
.top .content:nth-of-type(n+2) a:hover .background.cover { filter: grayscale(0); }
.top .content:nth-of-type(n+2) > .flexbox > li { height: 460px; }
.top .content:nth-of-type(n+2) > .flexbox > li:first-child { padding: 40px; background: #fff; }
.top .content:nth-of-type(n+3) { position: relative; }
.top .content:nth-of-type(n+3) a { display: block; width: 100%; height: 100%; padding: 0 20px 20px; }
.top .content:nth-of-type(n+3) h3 { z-index: 2; }
.top .content:nth-of-type(n+3) p { position: absolute; z-index: 2; width: calc(100% - 80px); line-height: 1.6; bottom: 20px; text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); }
.top .content:nth-of-type(n+3) li:first-child { flex-basis: calc(100% / 4 * 1); }
.top .content:nth-of-type(n+3) li:last-child { flex-basis: calc(100% / 4 * 3); }
.top .content:nth-of-type(n+3) .background { width: 100%; }
.top .content:last-child { padding-bottom: 30px; }
.top .content .inner    { padding: 0 40px 60px; }
.top .content .background { position: absolute; }

.top .content.hero { position: static; }
.top .content.hero .copy { position: relative; z-index: 2; }
.top .content.hero .background.halftone { z-index: 1; }
.top .content.hero video                { z-index: 0; }

.top .content:nth-of-type(n+2) > .background { z-index: -3; background-color: rgba(255, 255, 255, .75); }

.top .top-news > .flexbox > li { flex-basis: calc(100% / 4); }
.top .top-news > .flexbox > li:nth-of-type(1) { background: #fff; }
.top .top-news > .flexbox > li:nth-of-type(n+2) { padding: 0; }
.top .top-news > .flexbox > li:last-of-type { margin-right: 0; }
.top .top-news li       { margin-left: 1px; margin-right: 1px;
                          -webkit-align-items: start; align-items: start; }
.top .top-news li:first-of-type { border: none !important; background: none; }
.top .top-news li:last-of-type { margin-right: 0; padding-right: 0; text-align: right; }
.top .top-news li li    { height: auto; }
.top .top-news li li p  { height: 36px; line-height: 36px; vertical-align: middle; padding-top: 0; padding-bottom: 0; }
.top .top-news p        { line-height: 1.6; padding: 2px 10px; color: #333; }
.top .top-news a:not(.more) { display: block; width: 100%; height: 100%; }
.top .top-news a:hover p:not(.tag) { text-decoration: underline; }
.top .top-news a:hover .date { text-decoration: none !important; }
.top .top-news .text    { display: block; position: absolute; left: 0; bottom: 0; width: 100%; background: rgba(22, 22, 22, .6); }
.top .top-news .title   { text-align: left; }
.top .top-news .tag     { display: inline-block; width: 8rem; text-align: center; background: #fff; }
.top .top-news .date    { text-align: left; font-size: 1.2rem; }
.top .top-news .more    { position: absolute; bottom: 40px; left: 40px; color: #c5c5c5; border-color: #c5c5c5; }
.top .top-news .more:hover { color: #fff; }
.top .top-cariot p      { width: 60% !important; }

.top .icon-cariot       { position: absolute; top: inherit; right: -20px; bottom: -20px; left: inherit; z-index: 1; }


/* News
-----------------------------------------------------------------------------*/
.news h3                { line-height: 1.5; margin: 80px 10px 10px; padding: 0; text-align: left; color: #1e2854; font-size: 1.4rem; }
.news p                 { margin: 20px 10px 0; }
.news .content          { padding-top: 0;}
.news .wrapper,
.news .columns          { width: 100%; margin: 0 auto; }
.news .columns          { height: 100%; padding-bottom: 40px; flex-flow: row wrap; }
.news .columns a        { display: block; width: 100%; height: 100%; }
.news .columns > li     { position: relative; margin: 20px .5%; padding: 0; border: 1px solid rgba(51, 51, 51, .2);
                          display: -webkit-flex; display: flex; flex: 0 0 49.5%; max-width: 49.5%; }
.news .columns > li:hover { border-color: #1e2854 !important; }
.news .columns > li:first-child { margin-bottom: 0; padding-bottom: 20px; }
.news .columns > li:first-child .cover { height: 400px; }
.news .columns > li:nth-of-type(2) { border: none; }
.news .columns > li:nth-of-type(-n+2) { flex-basis: 100%; max-width: 100%; margin-top: 0; margin-left: 0; margin-right: 0; }
.news .columns > li:nth-of-type(odd) { margin-left: 0; }
.news .columns > li:nth-of-type(even) { margin-right: 0; }

.news .tag              { display: inline-block; position: absolute; top: 10px; right: 0; min-width: 74px; margin-top: 0; margin-bottom: 0; text-align: center; }
.news .date             { position: absolute; top: 10px; left: 10px; z-index: 1; width: 6rem; padding: 0; color: #111; text-align: center; }
.news .date p           { line-height: 1.4; margin: 0; padding: 0 10px; }
.news p.year            { color: #1e2854; font-size: 1.4rem; }
.news p.month           { border: 1px solid #1e2854; border-bottom: none; color: #fff; font-size: 1.2rem; text-transform: uppercase; background: #1e2854; }
.news p.day             { line-height: 1.2; border: 1px solid #e5e5e5; border-top: none; font-size: 2.6rem; background: #fff; }
.news .columns > li:first-child .date { width: 8rem; }
.news .columns > li:first-child .year,
.news .columns > li:first-child .month { border-bottom: none; font-size: 1.6rem; }
.news .columns > li:first-child .day { line-height: 1.2; font-size: 3rem; }
.news .columns > li:nth-of-type(n+2) .year { display: none; }
.news .cover            { position: relative; transition: 0; width: 100%; height: 200px; }
.news .cover + h3       { margin-top: 10px; padding: 0; }
.news.detail h3         { width: auto; margin: 10px 0 0; font-size: 2.2rem; font-weight: bold; }
.news.detail a          { text-decoration: underline; }
.news.detail .title .flexbox { flex-flow: row nowrap; }
.news.detail .title li  { -webkit-display: flex; display: flex; -webkit-align-items: flex-end; align-items: flex-end; }
.news.detail .title li:first-child { -webkit-flex: 0 0 120px; flex: 0 0 120px; }
.news.detail .title li:last-child { flex-basis: auto; }
.news.detail .title .date { position: inherit; width: 90px; }
.news.detail .title p.year { border-bottom: none; font-size: 1.6rem; }
.news.detail .title p.month { font-size: 1.4rem; }
.news.detail .title p.day { border-top: none; font-size: 4rem; }
.news.detail .tag       { position: relative; top: inherit; right: inherit; margin-left: 0 }
.news.detail .timestamp { margin: 0; padding: 0; color: #999; }
.news.detail .main-body { display: block; width: 80%; margin: 60px auto 0; }
.news.detail .main-body p { margin-top: 10px; font-size: 1.4rem; }
.news.detail .main-body img { width: auto; max-width: 100%; }
.news.detail .cover     { height: 600px; margin-top: 30px; }


/* About
-----------------------------------------------------------------------------*/
.about p                { line-height: 1.6; }
.about p.en             { color: #999; }
.about .content         { padding-bottom: 60px; }
.about .content:last-of-type { padding-bottom: 80px; }

.message h1             { color: #fff; }
.message p              { line-height: 2; background: rgba(255, 255, 255, .9); }
.message .content       { width: 100%; padding-left: 5%; padding-right: 5%; }
.message .content > .flexbox    { margin-top: 40px; }
.message .content > .flexbox li { flex-basis: 50%; }
.message .content > .flexbox li:first-child { margin-left: 5%; }
.message .content > .flexbox li:last-child { margin-top: auto; margin-left: 5%; padding: 40px; border-radius: 5px; background: #fff; }

.outline h1             { color: #fff;}
.outline h1 + p.en      { text-align: center; color: #f0f0f0; }
.outline h3             { margin-top: 80px; margin-bottom: 0; color: #fff; }
.outline h3 + p.en      { margin-bottom: 40px; text-align: center; color: #f0f0f0; }
.outline p              { margin-bottom: 0; }
.outline p:not(.en)     { line-height: 28px; color: #111; }
.outline .content > .flexbox { flex-flow: row wrap; }
.outline .content > .flexbox li { margin-top: 0; padding-top: 20px; padding-bottom: 20px; }
.outline .content > .flexbox li:nth-of-type(odd) { flex-basis: 30%; max-width: 30%; padding-left: 40px; padding-right: 5px; background: #fff; }
.outline .content > .flexbox li:nth-of-type(odd) p:not(.en) { line-height: 28px; font-size: 1.8rem; color: #333; }
.outline .content > .flexbox li:nth-of-type(even) { flex-basis: 70%; max-width: 70%; padding-left: 40px; padding-right: 40px; border-bottom: 1px dotted #e5e5e5; background: rgba(255,255,255, .9); }
.outline .content > .flexbox li:nth-of-type(-n+2) { border-top: 1px dotted #fff; }
.outline .content > .flexbox li:last-child { border-bottom: none; }
.outline .mission    { padding-bottom: 0; }
.outline .mission p  { color: #eee; }
.outline .content .partners { padding-top: 20px; padding-bottom: 10px; -webkit-justify-content: center; justify-content: center; background: rgba(255, 255, 255, .9); }
.outline .content .partners li { position: relative; padding: 15px 0 !important; border: none !important; overflow: hidden;
                          display: -webkit-flex; display: flex; flex-basis: calc(99.8% / 3) !important; max-width: calc(99.8% / 3)!important; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.outline .content .partners li:nth-of-type(odd),
.outline .content .partners li:nth-of-type(even) { background: transparent; }
.outline .content .partners li i { width: 80%; }
.outline .content .partners li:nth-of-type(4),
.outline .content .partners li:nth-of-type(5) { padding-top: 10px; }
.outline .content .partners li:nth-of-type(1) i { position: absolute; width: 80%; top: calc(50% - 45px); left: calc(50% - 34%); }
.outline .content .partners li:nth-of-type(3) i { position: absolute; width: 80%; top: calc(50% - 45px); left: calc(50% - 33%); }
.outline .content .partners li:nth-of-type(5) i { width: 50%; }

.access .content        { width: 100%; }
.access .content > .flexbox   { width: 90%; margin: 0 auto; }
.access .content > .flexbox > li { padding: 20px; border-bottom: none; }
.access .content > .flexbox li li:nth-of-type(odd) { flex-basis: 30%; }
.access .content > .flexbox li li:nth-of-type(even) { padding-left: 0; padding-right: 0; flex-basis: 70%; }
.access .content > .flexbox li li:nth-of-type(odd) p { flex-basis: 35%; font-size: 1.8rem; }
.access .content > .flexbox li li:nth-of-type(even) p { flex-basis: 65%; line-height: 1.6; margin-bottom: 0; font-size: 1.4rem !important; }
.access .content > .flexbox li:nth-of-type(even) li:nth-of-type(even) p { padding-left: 20px; }
.access .content a      { text-decoration: underline; }
.access .content p      { position: relative; }
.access .content p .icon { position: absolute; top: 3px; left: 0; width: 16px; height: 16px; vertical-align: middle; margin-right: 5px; }

.mission             { position: relative; overflow: hidden; }
.mission .content header { padding-bottom: 80px; }
.mission .white-border-box { position: relative; display: inline-block; width: auto; text-align: left; }
.mission .mission-box { position: relative; left: 0; margin-top: 40px; margin-left: -33%; }
.mission .vision-box { position: relative; right: 0; margin-right: -42%; }
.mission .corevalue-box { margin-bottom: 80px; padding-left: 25px; text-align: left; }
.mission h2          { display: block; margin-top: 0; margin-bottom: 0; padding: 8px 0 14px; color: #fff; text-align: left; font-size: 1.3rem; font-style: italic; letter-spacing: .3rem; background: none; border-bottom: 1px solid rgba(255,255,255,.6); }
.mission h2 span     { font-size: 1.4rem; }
.mission h3          { margin-top: 25px; margin-bottom: 16px; font-size: 2.8rem; font-weight: bold; letter-spacing: .3rem; }
.mission h3 + p      { color: #fff; font-size: 1.4rem; font-size: 1.4rem; letter-spacing: .1rem; }
.mission h2,
.mission h3,
.mission h3 + p { text-align: left; }
.mission h1,
.mission h3,
.mission li,
.mission li p:first-of-type { color: #fff; }
.mission p           { color: #fff; }
.mission .corevalue-box ol { padding-top: 20px; }
.about.mission .content    { padding-bottom: 100px; text-align: center; }

.google-map             { width: 100%; height: 500px; margin-bottom: 60px; border: 1px solid #fff; }
.google-map #map_canvas { width: 100%; height: 100%; }

.sign                   { text-align: right; }
.sign p                 { text-align: right !important; }
.sign p:nth-last-child(2) { margin-top: 15px; margin-bottom: 0; font-size: 140%; }
.sign .date             { margin-bottom: 0; }

.message .sign         { float: right; }
.message .sign p       { text-align: left !important; }
.message .sign p:nth-last-child(2) { font-size: 130%; }

/* Service
-----------------------------------------------------------------------------*/
.services h1            { padding-left: 60px; padding-right: 60px; padding-bottom: 10px; color: #fff; }
.services h1 + p        { margin-top: 40px; padding-left: 10%; padding-right: 10%; text-align: center; color: #fff; }
.services h3            { font-weight: 600; }
.services h1 + p.small  { color: #ccc; }
.services.feature h3 + p { text-align: left; }
.services h5            { font-size: 2rem; text-align: left; }
.services video         { top: 50%; left: 50%; background-position: center center;
                          -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.services .main         { padding-bottom: 0; }
.services .hero         { position: relative; width: 100%; height: 730px; overflow: hidden; }
.services .hero .background.cover { background-position: center 40%; }
.services .content      { width: 100%; }
.services .content .inner { width: 84%; margin-left: auto; margin-right: auto; }
.services .content .flexbox.wrap li { flex-basis: 20%; }
.services:not(.feature) .content:not(.links):not(.contact):nth-of-type(n+2) { padding-top: 70px; }
.services .text         { text-align: center; }
.services .text img     { margin-top: 40px; }
.services .icons        { min-height: 96px; margin-top: 40px; text-align: center; }
.services .icon         { vertical-align: middle; margin-left: 10px; margin-right: 10px; }
.services .icon-salesforce { width: 120px; height: 86px; }
.services .ghost        { margin-top: 20px; }

.services .contact      { padding: 40px 0; border-bottom: 1px solid #f0f0f0; text-align: center; }
.services .contact h3   { margin-bottom: 0; text-align: left; }
.services .contact li   { -webkit-align-items: center; align-items: center; text-align: left; }
.services .contact p    { margin-bottom: 20px; text-align: left; }
.services .contact a    { font-size: 2rem; }
.services .contact a:hover { text-decoration: underline; }
.services .contact img  { width: auto; height: 24px; vertical-align: middle; }
.services .contact .icon { margin-top: -5px; margin-left: 0 !important; }

.services .logos        { margin-top: 40px; margin-bottom: 60px; text-align: center; }
.services .logos .flexbox { -webkit-justify-content: center; justify-content: center; }
.services .logos img    { height: 60px; }

.services .case         { padding-bottom: 70px; background: #f0f0f0; }
.services .case h3      { margin-bottom: 40px; }
.services .case h5      { margin-bottom: 20px; }
.services .case .inner  { padding: 40px; background: #fff; }
.services .case .inner:nth-of-type(n+2) { margin-top: 10px; }
.services .case .inner li { padding: 20px; text-align: right; flex-basis: 50%; }
.services .case p       { text-align: left; }
.services .case .title  { margin-bottom: 10px; color: #14a9ff; font-size: 1.8rem; font-weight: bold; text-align: right }

.services .cross span::before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.services .cross span::after { -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }

.services .semicircle   { position: relative; width: 100%; height: auto; margin-top: 100px; padding-top: 40px; padding-bottom: 80px; text-align: center; }
.services .semicircle.border { border-top: 10px solid #e5e5e5; border-radius: 100%; }
.services .semicircle > img { width: 60%; margin-top: 180px; }
.services .semicircle .column { position: absolute; width: 20%; height: 100px;  }
.services .semicircle .column:nth-of-type(1),
.services .semicircle .column:nth-of-type(5) { top: 110px; }
.services .semicircle .column:nth-of-type(2),
.services .semicircle .column:nth-of-type(4) { top: 0; }
.services .semicircle .column:nth-of-type(3) { top: -50px; }
.services .semicircle .column:nth-of-type(1) { left: -5%; }
.services .semicircle .column:nth-of-type(2) { left: 13%; }
.services .semicircle .column:nth-of-type(3) { left: 40%; }
.services .semicircle .column:nth-of-type(4) { left: 67%; }
.services .semicircle .column:nth-of-type(5) { left: 85%; }
.services .semicircle .column p { line-height: 1.2; font-size: 1.2rem; text-align: center; }
.services .semicircle .column img { height: 70px; }
.services .semicircle .column img + p { margin-top: 5px; }
.services .semicircle .text { padding-top: 200px; text-align: center; }
.services .semicircle .text h5 { margin-top: 40px; }
.services .semicircle .text p { margin-top: 10px; }
.services .semicircle .text p + p { margin-top: -10px; }
.services .semicircle .text a { text-decoration: underline; }
.services .semicircle .text a { text-align: left; }

.services .steps        { margin-top: 40px; margin-bottom: 40px;
                          -webkit-align-items: center; align-items: center; }
.services .steps h5     { position: relative; margin-top: 50px; margin-bottom: 25px; padding-left: 60px; padding-bottom: 10px; border-bottom: 1px solid #6cf; }
.services .steps h5 .icon { position: absolute; bottom: 10px; left: 0; }

.services .steps img    { width: auto; max-height: 600px; vertical-align: middle; text-align: center; }
.services .steps > li:nth-of-type(1) { flex-basis: 50%; padding-right: 30px; }
.services .steps > li:nth-of-type(2) { flex-basis: 50%; padding-top: 20px; padding-left: 30px; text-align: center; }
.services .steps > li li { min-height: 100px; }
.services .steps > li li p { margin-top: -10px; margin-left: 58px; }
.services .steps .icon  { margin-left: 0; margin-right: 20px; }

.services .icon-arrow-link { width: auto !important; height: 16px; vertical-align: middle; margin: 0 7px 0 0 !important; }

.services .configuration p.title { margin-top: 20px; font-size: 1.6rem; font-weight: bold; }
.services .configuration ul { width: 100%; }
.services .configuration li { position: relative; flex-basis: 33%; text-align: center; }
.services .configuration li:first-of-type { padding-right: 40px; }
.services .configuration li:last-of-type { padding-left: 40px; }
.services .configuration img.logo { display: block; width: auto; height: 50px; margin-top: 40px; margin-left: calc(50% - 100px); }
.services .configuration img.image { width: 100%; height: auto; margin-top: 30px; }
.services .configuration .flexbox.wrap { height: auto; }
.services .configuration .flexbox.wrap li { flex-basis: 50%; }

.services .strength     { padding-bottom: 70px; background: #1e2854; }
.services .strength h3  { color: #fff; }
.services .strength h5  { position: absolute; top: 50%; margin-bottom: 20px; color: #fff;
                          -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.services .strength a   { color: #fff; text-decoration: underline; }
.services .strength .flexbox.wrap > li:nth-of-type(odd) { border-left: none; }
.services .strength .flexbox.wrap li li:nth-of-type(1) { flex-basis: 60px; min-width: 60px; }
.services .strength .flexbox.wrap li li:nth-of-type(2) { position: relative; flex-basis: calc(100% - 60px); }
.services .strength .flexbox.wrap p { color: #fff; }
.services .strength .flexbox.wrap p:nth-of-type(1) { margin-top: 40px; }
.services .strength .no { position: relative; }
.services .strength .no img { width: auto; height: 45px; }
.services .strength .flexbox.wrap > li { padding: 20px 40px; }

.services .base h5      { margin-bottom: 20px; text-align: center; }
.services .base img     { height: 180px; margin-top: 40px; margin-bottom: 20px; }
.services .base .box    { margin-top: 80px; padding: 40px 13%; background: #ffeaa3; }
.services .base .inner  { width: 100%; }
.services .base .flexbox li { flex-basis: calc(100% / 3); margin-left: 10px; margin-right: 10px; padding: 10px 20px; background: #fff; }
.services .base .flexbox li:first-child { margin-left: 0; }
.services .base .flexbox li:last-child { margin-right: 0; }

.services .linear-gradient { padding-top: 60px; padding-bottom: 60px; }

.services.feature h1     { margin-bottom: 0; color: #1e2854; }
.services.feature h3     { margin-top: 80px; margin-bottom: 20px; white-space: nowrap; }
.services.feature header { padding-top: 140px; padding-bottom: 90px; }
.services.feature .content { overflow: hidden; width: 100%; padding: 0; }
.services.feature .content.salesforce-first { padding-top: 0; }
.services.feature .content.salesforce-first h3,
.services.feature .content h3,
.services.feature .content p { color: #fff; }
.services.feature .content h3 > span { font-size: 4rem; font-weight: 300; }
.services.feature .content h3 > span { display: inline-block; margin-right: 15px; }
.services.feature .content .read { margin-top: 0; color: #333; }
.services.feature .content .inner { position: relative; width: 100%; height: auto; padding: 0 !important; }
.services.feature .content .inner > .flexbox { z-index: 0; background-size: cover; }
.services.feature .content .inner > .flexbox > li { padding: 200px 10% 100px;
                          -webkit-display: -webkit-flex; display: flex; flex: 0 0 1; -webkit-align-items: center; align-items: center; }
.services.feature .content .inner > .flexbox > li:first-child { padding-right: 3%; }
.services.feature .content .inner > .flexbox > li:last-child { padding-left: 3%; }
.services.feature .content .text { position: relative; z-index: 2; max-width: 400px; }
.services.feature .content .box { position: absolute; top: 0; bottom: 0; z-index: 1; width: 240px; padding: 0 40px; text-align: center; background: #f0f0f0; }
.services.feature .content .step { font-size: 12rem; font-weight: 600; font-family: 'myriad-pro'; text-align: center; }
.services.feature .content:nth-of-type(odd) h3 { text-align: right; }
.services.feature .content:nth-of-type(even) h3 { text-align: left; }
.services.feature .content:nth-of-type(odd) .box { right: 40px; }
.services.feature .content:nth-of-type(even) .box { left: 40px; }
.services.feature .content:nth-of-type(1) .inner > .flexbox { background-image: url("../images/services1.jpg");  background-repeat: no-repeat; }
.services.feature .content:nth-of-type(2) .inner > .flexbox { background-image: url("../images/services2.jpg"); background-repeat: no-repeat; }
.services.feature .content:nth-of-type(2) .flexbox .flexbox { flex-flow: row nowrap; width: 100%; }
.services.feature .content:nth-of-type(2) .inner > .flexbox > li li { padding: 0;
                          display: -webkit-flex; display: flex; -webkit-flex: 1; flex: 1 0 auto; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.services.feature .content:nth-of-type(2) .inner > .flexbox > li li:nth-of-type(odd) { width: 100%; flex: 0 0 30%; }
.services.feature .content:nth-of-type(2) .inner > .flexbox > li li .col { width: 80%; height: inherit; }
.services.feature .content:nth-of-type(2) .inner > .flexbox > li li p { position: relative; width: 100%; text-align: center; }
.services.feature .content:nth-of-type(2) .inner > .flexbox > li li:nth-of-type(even) { padding: 0; flex: 0 0 5%; }
.services.feature .content:nth-of-type(3) .inner > .flexbox { background-image: url("../images/services3.jpg"); background-repeat: no-repeat; }
.services.feature .content:nth-of-type(4) .inner > .flexbox { background-image: url("../images/services4.jpg"); background-repeat: no-repeat; }
.services.feature .content:nth-of-type(1) .box { background: #aadc47; }
.services.feature .content:nth-of-type(2) .box { background: #ffcc66; }
.services.feature .content:nth-of-type(3) .box { background: #39c7ff; }
.services.feature .content:nth-of-type(4) .box { background: #ff83a3; }
.services.feature .content:nth-of-type(even) > .inner > .flexbox > li:first-child,
.services.feature .content:nth-of-type(odd) > .inner > .flexbox > li:last-child { -webkit-flex-basis: 45%; flex-basis: 45%; }
.services.feature .content:nth-of-type(even) > .inner > .flexbox > li:last-child,
.services.feature .content:nth-of-type(odd) > .inner > .flexbox > li:first-child { -webkit-flex-basis: 55%; flex-basis: 55%; }
.services.feature .content:nth-of-type(odd) > .inner > .flexbox > li:last-child { padding-right: 100px;
                          -webkit-justify-content: flex-end; justify-content: flex-end; }
.services.feature .content:nth-of-type(even) > .inner > .flexbox > li:first-child { padding-left: 100px;
                          -webkit-justify-content: flex-start; justify-content: flex-start; }
.services.feature .development .circle   { position: relative; top: inherit; left: inherit; vertical-align: middle; margin: 0; border: none; font-size: 1.6rem !important; text-align: center; white-space: nowrap; }
.services.feature .cross { position: relative; z-index: 2; display: block; width: inherit; height: inherit; margin: 0; }
.services.feature .cross img { vertical-align: middle; }

.services.iot h1        { line-height: 1; }
.services.iot h1 > span { display: inline-block; margin-top: -20px; color: #eee; font-size: 1.6rem; font-weight: normal; word-break: normal; }
.services.iot section:nth-of-type(2) ul { -webkit-align-items: center; align-items: center; }
.services.iot section:nth-of-type(2) li:nth-of-type(1) { flex-basis: 30%; padding-right: 30px; }
.services.iot section:nth-of-type(2) li:nth-of-type(2) { flex-basis: 40%; }
.services.iot section:nth-of-type(2) li:nth-of-type(3) { flex-basis: 30%; padding-left: 30px; }
.services.iot section:nth-of-type(2) i { margin-top: 20px; margin-bottom: 20px; }
.services.iot .linear-gradient { padding: 0 5% 70px; }
.services.iot .diagram  { min-height: 100px; margin-top: 70px; padding: 60px 0; background: #333; }
.services.iot .performance .upper { margin: 60px 0; text-align: center; }
.services.iot .performance .upper p { margin-bottom: 0; text-align: center; }
.services.iot .performance .upper p + p.trapezoid { width: 100%; height: 0; margin: 0 auto; padding: 0 0 70px; border-left: 20px solid transparent; display: inline-block; border-right: 20px solid transparent; border-bottom: 24px solid #f0f0f0; font-size: 1.4rem; }
.services.iot .performance .upper .box { width: 100%; height: 30px; margin: 0 auto 30px; background: #ccc; }
.services.iot .performance .lower { margin-top: 40px; }
.services.iot .performance .lower li { flex-basis: 50%; height: auto; }
.services.iot .performance .lower > li p { text-align: left; }
.services.iot .performance .lower > li li { margin: 20px; }
.services.iot .performance .lower > li li:nth-of-type(odd) { flex-basis: 150px; }
.services.iot .performance .lower > li li:nth-of-type(even) { flex-basis: calc(100% - 150px); }
.services.iot .performance .lower li img { width: 150px; height: 150px; border-radius: 100%; }

.services.salesforce .strength .flexbox.wrap > li { position: relative; flex-basis: 50%; max-width: 50%; }
.services.salesforce .strength .flexbox.wrap > li:nth-of-type(even) { border-left: 1px solid #ccc; }
.services.salesforce .strength .flexbox.wrap > li:nth-of-type(n+3) { padding-top: 40px; border-top: 1px solid #ccc; }

/*.services.marketing .background.cover.bg-pos-right-center { background-position: right 12% !important; }*/
.services.marketing li .icon { margin-top: 0; margin-left: 10px; margin-right: 10px; }
.services.marketing .onestop { margin-top: 80px; }
.services.marketing .onestop li li p { position: relative; margin-left: 84px; }
.services.marketing .onestop li li p .icon { position: absolute; top: 0; left: -30px; margin-top: 10px !important;  }
.services.marketing .strength .flexbox.wrap > li { flex-basis: calc(100% / 3); max-width: calc(100% / 3); }
.services.marketing .strength .flexbox.wrap > li:nth-of-type(n+2) { border-left: 1px solid #ccc; }
.services.marketing .steps img { width: 100%; }
.services.marketing .steps .logos { padding-top: 40px; }
.services.marketing .steps .logos li:nth-of-type(2) img { margin-left: -90px; }

.services.salesforce .linear-gradient {
                          background: -webkit-gradient(linear, left top, left bottom, from(#ffeaa3), to(#fff));
                          background: -webkit-linear-gradient(top, #fff, #ffeaa3);
                          background: linear-gradient(to bottom, #ffffff 0%, #ffeaa3 100%); }
.services.iot .linear-gradient {
                          background: -webkit-gradient(linear, left top, left bottom, from(#d8fabe), to(#fff));
                          background: -webkit-linear-gradient(top, #fff, #d8fabe);
                          background: linear-gradient(to bottom, #ffffff 0%, #d8fabe 100%); }
.services.marketing .linear-gradient {
                          background: -webkit-gradient(linear, left top, left bottom, from(#91d7ff), to(#fff));
                          background: -webkit-linear-gradient(top, #fff, #91d7ff);
                          background: linear-gradient(to bottom, #ffffff 0%, #91d7ff 100%); }


/* Showcase
-----------------------------------------------------------------------------*/
.showcase h5            { font-size: 1.8rem; }
.showcase img           { width: 430px; height: auto; flex-flow: column wrap; }
.showcase img + img     { margin-top: 40px; }
.showcase .content      { width: 100%; padding-bottom: 0; background: #fff; }
.showcase .content > .flexbox { flex-flow: row wrap; }
.showcase .content > .flexbox > li .background { position: absolute; top: 0; right:0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 1; display: block; }
.showcase .content > .flexbox > li:nth-of-type(even) .flexbox { -webkit-flex-direction: row-reverse; flex-direction: row-reverse; }
.showcase .read         { width: 70%; margin-left: auto; margin-right: auto; font-size: 1.4rem; }

.showcase.tokyucnst .customer { background: #53af3b; }
.showcase.tokyucnst .content.service > .flexbox > li:nth-of-type(1),
.showcase.tokyucnst .content.platform > .flexbox > li:nth-of-type(2) a { background: #53af3b; }

.showcase.stuffservice .customer { background: #1A3292; }
.showcase.stuffservice .content.service > .flexbox > li:nth-of-type(1),
.showcase.stuffservice .content.platform > .flexbox > li:nth-of-type(2) a { background: #1A3292; }

.showcase.aruhi .customer { background: #fee100; }
.showcase.aruhi .content.service > .flexbox > li:nth-of-type(1),
.showcase.aruhi .content.platform > .flexbox > li:nth-of-type(2) a { background: #fee100; }

.showcase.toshiba .customer { background: #379fc0; }
.showcase.toshiba .content.service> .flexbox > li:nth-of-type(1),
.showcase.toshiba .content.platform > .flexbox > li:nth-of-type(2) a { background: #379fc0; }

.showcase.detail a      { text-decoration: underline; }
.showcase.detail i      { vertical-align: middle; margin-top: -5px; margin-right: 7px; }
.showcase.detail i:nth-last-child(1) { margin-right: 0; }
.showcase.detail i.icon-recaius { margin-top: -2px; }
.showcase.detail header { margin-top: 330px; padding: 40px 0; }
.showcase.detail header p { font-size: 1.4rem; }
.showcase.detail header .logo i { width: 250px; margin: 0; }
.showcase.detail .customer { padding: 20px 0; }
.showcase.detail .customer h2 { width: 100%; margin-top: 0; margin-bottom: 20px; text-align: left; font-size: 1.6rem; font-weight: bold; }
.showcase.detail .customer h3 { margin-bottom: 10px; text-align: left; font-size: 2.2rem; font-weight: bold; }
.showcase.detail .customer i { margin-left: 15px; }
.showcase.detail .customer .name { flex: 0 0 1; flex-basis: calc(100% - 160px); }
.showcase.detail .customer .platform { -webkit-display: flex; display: flex; flex: 0 0 160px;  -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-end; justify-content: flex-end; }
.showcase.detail .customer > .flexbox > li { padding: 20px 40px 20px 20px; background: #fff; }
.showcase.detail .customer > .flexbox > li:first-of-type { padding: 0;
                          display: -webkit-flex; display: flex; flex: 0 0 300px; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.showcase.detail .content > .flexbox > li { padding: 60px; border: none; }
.showcase.detail .content:not(.more) > .flexbox:not(.customer) > li { min-height: 500px; }
.showcase.detail .content:not(.more) > .flexbox:not(.customer) > li:nth-of-type(1),
.showcase.detail .content:not(.more) > .flexbox:not(.customer) > li:nth-of-type(2) { flex: 0 0 50%; max-width: 50%; overflow: hidden;}
.showcase.detail .content { padding: 0; }
.showcase.detail .content h3 { margin-top: 0; margin-bottom: 40px; font-size: 3.4rem }
.showcase.detail .content h4 { margin-bottom: 40px; font-size: 2rem; }
.showcase.detail .content li { display: -webkit-flex; display: flex; -webkit-flex: 1; flex: 1 0 auto; }

.showcase.detail .content.project> .flexbox > li:nth-of-type(2) { background: #e5e5e5; }
.showcase.detail .content.project > .flexbox > li:nth-of-type(1),
.showcase.detail .content.service> .flexbox > li:nth-of-type(2) { display: block; background: #fff; }
.showcase.detail .content.project > .flexbox > li:nth-of-type(2),
.showcase.detail .content.service > .flexbox > li:nth-of-type(1) { -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-position: center !important; }
.showcase.detail .content.platform > .flexbox > li:nth-of-type(1) { display: block; background: #fff; }
.showcase.detail .content.platform > .flexbox > li:nth-of-type(2) { background: #e5e5e5;
                          -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-justify-content: flex-end; justify-content: flex-end; }
.showcase.detail .content.platform > .flexbox > li:nth-of-type(2) a { display: block; width: 90px; height: 90px;  line-height: 90px; color: #1A3292; text-align: center; text-decoration: none; font-size: 1.4rem; background: #f5f5f5; }
.showcase.detail .content.platform > .flexbox > li:nth-of-type(2) i { vertical-align: middle; }
.showcase.detail .content.platform > .flexbox > li .flexbox > li { flex: 0 0 1;  -webkit-justy-content: center; justify-content: center; }
.showcase.detail .content.platform li li { padding: 0 40px; }
.showcase.detail .customer .platform i { height: 35px; margin-top: 0; margin-left: 20px; margin-bottom: 20px; }
.showcase.detail .customer .platform i:first-child { margin-left: 0; margin-right: 0; }
.showcase.detail .customer .platform i.icon-salesforce { width: 51px; }
.showcase.detail .customer .platform i.icon-aws { width: 91px; }
.showcase.detail .customer .platform i.icon-heroku { width: 98px; }
.showcase.detail .background { position: fixed; top: 70px; height: 800px; }
.showcase.detail .content.project > .flexbox > li:nth-of-type(2) { position: relative; background-repeat: no-repeat; background-position: 50% 0;
                          -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-position: center; }
.showcase.detail .content.platform > .flexbox > li:nth-of-type(2) a:hover { background: #c5c5c5; }
.showcase.detail .small-tx { margin-top: 40px; font-size: 1.1rem; color: #999; }

.showcase .title        { margin-top: 40px; color: #333; font-weight: bold; font-size: 1.8rem; }
.showcase .copy p       { margin-top: 20px; color: #333; font-size: 1.6rem; }
.showcase .btn-box      { margin-top: 40px; }
.showcase .more         { margin-top: 0; background: #e5e5e5; }
.showcase.detail .more h3 { margin-bottom: 20px; padding-top: 20px; }
.showcase .more .flexbox { flex-flow: row nowrap; }
.showcase .more .flexbox a { display: block; width: 100%; color: #333; text-decoration: none; }
.showcase .more .flexbox a > p { position: relative; height: 4.2rem; line-height: 1.4; }
.showcase .more .flexbox a > p span { position: absolute; bottom: 4px; display: block; width: 100%; }
.showcase .more .flexbox p { vertical-align: middle; margin-bottom: 0; font-size: 1.4rem; text-align: center; }
.showcase .more .flexbox li { flex-basis: calc(100% / 3); max-width: calc(100% / 3); padding: 0 1% 40px !important; }
.showcase .more .flexbox li:first-child { padding-left: 2% !important; }
.showcase .more .flexbox li:last-child { padding-right: 2% !important; }
.showcase .more .flexbox li .box { position: relative; overflow: hidden; width: auto; min-height: 160px; padding: 10%; border-radius: 0; font-size: 1.2rem;
                          display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-position: center top; }
.showcase .more .flexbox li .box .inner { position: absolute; top: -100%; left: 10%; z-index: 2; width: 80%; height: 60%; opacity: 1; display: inline-block; padding: 20px 5px; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-weight: bold;
                          -webkit-transition: .5s; transition: .5s; }
.showcase .more .flexbox li a:hover .inner { top: 20%; left: 10%; }
.showcase .more .flexbox li .box.tokyucnst .inner { background: rgba(83, 176, 60, .8); }
.showcase .more .flexbox li .box.stuffservice .inner { background: rgba(27, 51, 145, .8); }
.showcase .more .flexbox li .box.aruhi .inner { color: #333; background: rgba(255, 225, 0, .8); }
.showcase .more .flexbox li .box.toshiba .inner { background: rgba(56, 160, 191, .9); }

.showcase .name         { min-width: 0; }
.showcase .name,
.showcase .solution     { white-space: nowrap; text-overflow: ellipsis; }
.showcase .name.name-jp,
.showcase .name.name-jp h2 { white-space: normal; }

.showcase.stuffservice .name.name-jp h2 { white-space: nowrap; }


/* Contact
-----------------------------------------------------------------------------*/
.content header         { height: auto; }
.contact span           { display: inline-block; }
.contact label          { display: block; width: 100%; color: #111; font-size: 1.6rem; }
.contact .content       { padding-bottom: 80px; }
.contact .content .flexbox { flex-flow: row wrap; }
.contact .content li    { line-height: 20px; padding-top: 20px; padding-bottom: 20px; border-bottom: 1px dotted #ddd;
                          display: -webkit-flex; display: flex; }
.contact .content li:nth-of-type(odd) { flex-basis: 30%; padding-left: 20px; padding-right: 40px;
                          -webkit-justify-content: flex-end; justify-content: flex-end; }
.contact .content li:nth-of-type(even) { flex-basis: 70%; padding-right: 20px; }
.contact .content li:nth-of-type(-n+2) { border-top: 1px dotted #ddd; }
.contact .content li .flexbox { width: 100%; flex-flow: row nowrap; }
.contact .content li li { margin-right: 0; padding: 0; border-bottom: none; }
.contact .content li li:nth-of-type(-n+2) { border-top: none;  }
.contact .content li li:nth-of-type(odd),
.contact .content li li:nth-of-type(even) { flex-basis: 50%; padding-left: 0; padding-right: 0; }
.contact .content li li:first-child{ margin-right: 0; padding-right: 5px; }
.contact .content li li:last-child { margin-right: 0; padding-left: 5px; }

.contact .notice        { margin-bottom: 10px; padding-left: 20px; padding-right: 20px; }
.contact .notice p      { font-size: 1.5rem; }
.contact .notice P:last-child { margin-top: 40px; text-align: right; font-size: 1.2rem; color: #999; }

.contact .required      { position: relative; }
.contact .required::after { content: "*"; position: absolute; top: 3px; right: -15px; color: #ff4545; }
.contact .required.left { display: inline-block; width: auto; line-height: 1; padding-right: 20px; }
.contact .required.left::after { top: -8px; left: 7px; right: inherit; }

.contact .btn-box       { text-align: center; }
.contact .btn-box p     { font-size: 1.3rem; color: #999; }
.contact .btn-box a:first-child { display: inline-block; margin-top: 20px; font-size: 1.4rem; text-decoration: underline; }
.contact .btn-box .ghost { margin-top: 30px; }

.contact .read          { width: calc(80% - 40px); margin-left: auto; margin-right: auto; text-align: center; }
.contact.contact2 .contact-list ul { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; }
.contact.contact2 .contact-list li { display: block; -webkit-flex-basis: calc(40% - 20px); flex-basis: calc(40% - 20px);  margin-right: 40px; margin-bottom: 40px; padding: 0; border: none; background-color: rgba(255,255,255,.9); }
.contact.contact2 .contact-list li:nth-of-type(2n+2) { margin-right: 0; }
.contact.contact2 .contact-list dl { padding: 20px 20px 32px; text-align: center; }
.contact.contact2 .contact-list dt,
.contact.contact2 .contact-list dd { float: none; width: 100%; color: #1e2854; text-align: center; line-height: 1.4; }
.contact.contact2 .contact-list dt { margin-bottom: 32px; padding: 8px 8px 20px; font-size: 1.6rem; font-weight: bold; border-bottom: 1px solid #ccc; }
.contact.contact2 .contact-list dd { font-size: 2.9rem; font-weight: bold; }
.contact.contact2 .contact-list li img { max-width: 100%; }
.contact.contact2 .contact-list li:nth-of-type(1) img { width: 225px; }
.contact.contact2 .contact-list li:nth-of-type(2) img { width: 300px; }
.contact.contact2 .contact-list li:nth-of-type(3) img { width: 276px; }
.contact.contact2 .contact-list li:nth-of-type(4) img { width: 284px; }
.contact.contact2 .contact-list li:nth-of-type(4) p { padding: 0 10px 10px; color: #777; font-size: 1.1rem; text-align: center; }
.contact.contact2 .contact-list .inner { width: calc(80% - 40px); margin-left: auto; margin-right: auto; padding: 25px 0; }
.contact.contact2 .contact-list .inner p { font-size: 1.3rem; text-align: center; }
.contact.contact2 .contact-list .inner p a { display: inline-block; margin-top: 20px; font-size: 1.4rem; text-decoration: underline; }


/* Standard
-----------------------------------------------------------------------------*/
.standard p             { margin-bottom: 5px; }
.standard .content      { padding-top: 0;}
.standard .content:nth-of-type(n+2) { border-top: none;}
.standard .box          { padding-top: 20px; padding-bottom: 20px; }


/* Privacy Policy
-----------------------------------------------------------------------------*/
.privacy h3             { margin-top: 30px; margin-bottom: 50px; }
.privacy .content:last-of-type { padding-bottom: 100px; }
.privacy header         { padding-bottom: 120px; }
.privacy .read          { margin-top: 120px; padding: 0 40px; }
.privacy .inner:last-child { padding-bottom: 0; }
.privacy .p-mark        { margin-top: 30px; margin-left: 30px; }
.privacy .p-mark a      { display: inline-block; }
.privacy .sign p:nth-last-child(2) { font-size: 1.6rem; }
.privacy .box           { margin-top: 20px; padding: 20px; background: rgba(0, 0, 0, .05); }
.privacy .small         { margin-top: 10px; font-size: 80%; }


/* CSR
-----------------------------------------------------------------------------*/
.csr h1,
.csr ol,
.csr ol > li > p:first-child,
.csr p                  { color: #fff; text-shadow: 0 0 5px rgba(0, 0, 0, .2); }
.csr ol             { margin: 0; }
.csr .content       { padding-left: 40px; padding-right: 40px; padding-bottom: 80px;}
.csr .background    { position: fixed; background-position: center bottom; }


/* Sitemap
-----------------------------------------------------------------------------*/
.sitemap                { background: #7fcae3; }
.sitemap h1             { color: #fff; }
.sitemap h3             { position: absolute; top: 110px; display: inline-block; margin-bottom: 10px; padding-bottom: 10px; padding-left: 40px; color: #fff; font-size: 1.8rem; text-align: left; }
.sitemap .content       { padding-bottom: 100px; }
.sitemap .content > ul > li { position: relative; z-index: 2; padding-top: 60px; }
.sitemap .content > ul > li:first-of-type { padding-top: 0; }
.sitemap .content > ul > li:first-of-type h3 { top: 50px; }
.sitemap .content .flexbox { flex-flow: row wrap; padding-left: 170px; }
.sitemap .content .flexbox > li { position: relative; z-index: 2; height: 120px; line-height: 100px; vertical-align: middle; padding: 10px;
                          display: -webkit-flex; display: flex; flex: 0 0 140px; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.sitemap .content .flexbox > li a { display: block; width: 100px; height: 100px; box-sizing: border-box; border: 1px solid #fff; border-radius: 10px; color: #fff; text-align: center; background: rgba(255,255,255,.08);
                          -webkit-box-shadow: 0 0 2px 2px rgba(255,255,255,.2) inset; -moz-box-shadow: 0 0 2px 2px rgba(255,255,255,.2) inset; box-shadow: 0 0 2px 2px rgba(255,255,255,.2) inset; }
.sitemap .content .flexbox > li a:hover { color: #7fcae3; background: #fff; }
.sitemap .content .flexbox > li img { vertical-align: bottom; }
.sitemap .content .flexbox > li a.no-borders { border: none !important; background: none;
                          -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
.sitemap .content .flexbox > li a .icon { vertical-align: middle; }
.sitemap .content .flexbox > li span { display: inline-block; line-height: 1.6;  vertical-align: middle; font-size: 1.4rem; }
.sitemap .trapezoid     { position: relative; width: 100%; height: 0; margin-top: -2px; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid #9cd5e8; }
.sitemap .box           { width: 100%; padding-bottom: 15px; background: #daeff6; }
.sitemap .small         { font-size: 1.1rem !important; }
.sitemap .content .flexbox > li a { display: inline-block; vertical-align: middle;
                          -webkit-transform: translateZ(0); transform: translateZ(0);
                          -webkit-backface-visibility: hidden; backface-visibility: hidden;
                          -webkit-transition-duration: 0.3s; transition-duration: 0.3s;
                          -webkit-transition-property: transform; transition-property: transform; }
.sitemap .content .flexbox > li a:hover::before,
.sitemap .content .flexbox > li a:focus::before,
.sitemap .content .flexbox > li a:active::before { opacity: 1; -webkit-transform: translateY(7px); transform: translateY(7px); }
.sitemap .content .flexbox > li a::before { content: ''; position: absolute; top: 100%; left: 50%; z-index: 1; width: 90px; height: 10px; margin-left: -45px; opacity: 0;
                          background: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 80%); background: radial-gradient(ellipse at center, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 80%);
                          -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform, opacity; transition-property: transform, opacity; }


/* Nav
-----------------------------------------------------------------------------*/
.global-nav             { position: fixed; top: 0; left: 0; z-index: 99; width: 100%; height: 70px; margin: 0 auto; padding: 0 40px; background: #fff; }
.global-nav > ul > li   { flex: inherit; }
.global-nav > ul > li:first-child { margin-right: auto; }
.global-nav > ul > li:first-child a { padding-bottom: 28px; padding-left: 0; padding-right: 0; }
.global-nav > ul > li:nth-last-child(3) { margin-left: auto; }
.global-nav > ul > li:nth-last-child(-n+3) a { padding: 22px 0; }
.global-nav > ul > li:nth-last-child(-n+3) a { padding-right: 15px; }
.global-nav > ul > li:nth-last-child(1) a { padding-right: 0; }
.global-nav a           { display: flex; display: -webkit-flex; width: 100%; height: 100%; line-height: 1; padding: 28px 15px 20px; color: #1e2854; font-size: 1.6rem; font-weight: 600; text-decoration: none; white-space: nowrap; font-family: 'myriad-pro', 'a-otf-ud-shin-go-pr6n', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', '游ゴシック', YuGothic, 'Meiryo','メイリオ', sans-serif; }
.global-nav a span i    { margin-left: 10px; }
.global-nav a:hover span { padding-bottom: 3px; border-bottom: 3px solid #1e2854; color: #1e2854;
                          -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; transition: all .5s ease-out; }
.global-nav a.active    { position: relative; }
.global-nav a.active::before { content: ""; position: absolute; top: 20px; right: 0; visibility: hidden; width: 10px; }

.global-nav a.active span { position: relative; /* border: none; */ color: #aaa; }
/* .global-nav a.active:hover { cursor: default; } */
.global-nav a.active:hover span { color: #1e2854; }

.global-nav .blog .icon { display: none; }
.global-nav .icon.active { display:inline-block; }

.global-nav .child      { display: none; }
.global-nav .child li   { background: #f0f0f0; }
.global-nav .child li span { font-size: 80%; }

.blog-nav               { position: fixed; top: 70px; bottom: 0; left: 0; z-index: 90; width: 100%; margin: 0 auto; background: rgba(16, 21, 44, .9); }
.blog-nav.pc            { display: none; }
.blog-nav h2            { margin-top: -40px; color: #fff; font-size: 3rem; }
.blog-nav a .caption    { position: absolute; top: -100%; left: 0; z-index: 2; opacity: 1; width: 100%; height: 100%; background: rgba(16, 21, 44, .6);
                          -webkit-transition: .3s; transition: .3s; }
.blog-nav a:hover .caption { top: 0; }
.blog-nav .overlay      { width: 100%; height: 100%; }
.blog-nav .inner        { position: absolute; top: 50%; left: 50%; width: 80%; height: 200px; margin-left: -40%; margin-top: -100px; }
.blog-nav .flexbox      { flex-flow: row nowrap; }
.blog-nav .flexbox li   { margin-left: 1%; margin-right: 1%; }
.blog-nav .flexbox li a { position: relative; overflow: hidden; display: block; width: 100%; height: 100%; border-radius: 60px; text-align: center; }
.blog-nav .flexbox li a:hover { border-color: #fff; }
.blog-nav .flexbox li p { margin-top: 35%; color: #fff; font-size: 2rem;
                          -webkit-transform: translateY(-50%);  -moz-transform: translateY(-50%); transform: translateY(-50%); }

.close-box              { position: absolute; top: 10px; right: 10px; display: block; width: 40px; height: 40px; background: rgba(255, 255, 255, .2); }
.close-box a            { display: block; width: 100%; height: 100%; padding: 10px; }
.close-box a:hover      { background: rgba(255, 255, 255, .4); }
.close-box a:hover span { padding-bottom: 0; border-bottom: none; }
.close-box span         { display: block; position: absolute; top: 50%; left: 50%; width: 40px; height: 1px; margin: 0 0 0 -20px; padding: 0; background: transparent; }
.close-box span::before,
.close-box span::after  { display: block; content: ""; position: absolute; top: 50%; left: 0; width: 40px; height: 1px; margin-top: 0; background: #fff; transition: .3s; }
.close-box span::before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.close-box span::after  { -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }

.local-nav              { position: fixed; top: 70px; left: 0; right: 0; z-index: 80; min-width: 320px; background: rgba(16, 21, 44, .85); }
.local-nav li           { flex: 85px !important; height: 60px; }
.local-nav a            { display: block; width: 100%; height: 100%; padding-top: 10px; padding-bottom: 10px; color: #aaa; font-weight: bold; text-align: center; text-decoration: none !important; }
.local-nav a:hover      { color: #fff; text-decoration: none; background: #545b6f; }
.local-nav a.active     { color: #fff; }
.local-nav a.active:hover { cursor: default; }
.local-nav .flexbox     { width: 340px; margin-left: auto; margin-right: auto; }
.local-nav .flexbox > li { position: relative; flex: 0 0 auto; }
.local-nav .flexbox > li:nth-first-child { margin-left: auto; }
.local-nav .flexbox > li:nth-last-child { margin-right: auto; }
.local-nav .border      { position: absolute; left: 50%; bottom: 16px; width: 248px; height: 3px; margin-left: 0; border-top: 1px solid #ccc;
                          -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.services .local-nav li:nth-of-type(1) { flex-basis: 25% !important; }
.services .local-nav li:nth-of-type(2) { flex-basis: 20% !important; }
.services .local-nav li:nth-of-type(3) { flex-basis: 30% !important; }
.services .local-nav li:nth-of-type(4) { flex-basis: 25% !important; }


/* Circle Animation */
.circle                 { position: absolute; top: 15px; left: 50%; z-index: 2; width: 50px; height: 50px; margin-left: -25px; }
.circle-inner           { position: absolute; top: 50%; left: 50%; border: 1px solid #fff; border-radius: 100%; }
.circle-inner01         { width: 10px; height: 10px; margin-left: -5px; margin-top: -5px; border-width: 2px; border-color: #999; background-color: rgba(16, 21, 44, .7); }
a:hover .circle-inner01 { border-color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 0.9); }
.active .circle-inner01 { border-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5); -webkit-animation: circle-anim01 1.2s infinite; animation: circle-anim01 1.2s infinite; }
@keyframes circle-anim01 {
                            0% { background-color: rgba(255, 255, 255, 0.5); }
                          100% { background-color: #fff; }
                        }
.active .circle-inner02 { width: 30px; height: 30px; margin-top: -15px; margin-left: -15px;
                          -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0);
                          -webkit-animation: circle-anim02 1.2s infinite; animation: circle-anim02 1.2s infinite; }
@keyframes circle-anim02 {
                           10% { border-color: #fff; transform: scale(0.6); }
                          100% { border-color: rgba(255, 255, 255, 0); transform: scale(1); }
                        }


/* Navigation Bar */
.navbar                 { position: fixed; top: 0; z-index: 110; width: 100%; min-width: 320px; height: 40px; line-height: 40px; vertical-align: middle; margin-top: 0; background: #fff;
                          -webkit-align-items: flex-end; -moz-align-items: flex-end; -ms-align-items: flex-end; align-items: flex-end; }
.navbar h1              { width: 224px; vertical-align: middle; margin: 0; text-align: center; color: #1e2854; font-size: 1.6rem; font-weight: 600; font-family: 'myriad-pro', 'a-otf-ud-shin-go-pr6n', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', '游ゴシック', YuGothic, 'Meiryo','メイリオ', sans-serif; white-space: nowrap; text-overflow: ellipsis; }
.navbar li              { display: -webkit-flex; display: flex; height: 40px;
                          -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.navbar li:nth-of-type(1) a { width: 10px; height: 24px; }
.navbar li:nth-of-type(2) { margin-top: 0; padding-right: 0; font-size: 1.8rem; }
.navbar li:nth-of-type(1),
.navbar li:nth-of-type(3) { flex: 0 0 48px; }
.navbar .flexbox        { width: 100%; }
.navbar .icon           { margin-top: -7px; }


/* Hamburger Menu */
.hamburger              { display: block; position: relative; overflow: hidden; margin: 2px 0 0; padding: 0; width: 38px; height: 23px; appearance: none; box-shadow: none; border-radius: none; border: none; cursor: pointer; font-size: 0; text-indent: -9999px; background: none;
                          -webkit-appearance: none; -moz-appearance: none; -webkit-transition: background 0.3s; transition: background 0.3s; }
.hamburger:focus        { outline: none; }
.hamburger span         { display: block; position: absolute; top: 9px; left: 5px; right: 5px; height: 2px; background: #1e2854;
                          -webkit-transition: background 0s 0.3s; -moz-transition: background 0s 0.3s; -ms-transition: background 0s 0.3s; transition: background 0s 0.3s; }
.hamburger span::before,
.hamburger span::after  { content: ""; position: absolute; display: block; left: 0; width: 100%; height: 2px; background: #1e2854;
                           -webkit-transition-duration: 0.3s, 0.3s; -moz-transition-duration: 0.3s, 0.3s; -ms-transition-duration: 0.3s, 0.3s; transition-duration: 0.3s, 0.3s;
                          -webkit-transition-delay: 0.3s, 0s; -moz-transition-delay: 0.3s, 0s; -ms-transition-delay: 0.3s, 0s; transition-delay: 0.3s, 0s; }
.hamburger span::before { top: -9px;
                          -webkit-transition-property: top, -webkit-transform; transition-property: top, transform; }
.hamburger span::after  { bottom: -9px; -webkit-transition-property: bottom, -webkit-transform; transition-property: bottom, transform; }

.hamburger.open span    { background: none; }
.hamburger.open span::before { top: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.hamburger.open span::after { bottom: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
.hamburger.open span::before,
.hamburger.open span::after { -webkit-transition-delay: 0s, 0.3s; transition-delay: 0s, 0.3s; }


/* Header
-----------------------------------------------------------------------------*/
header                  { position: relative; padding: 0; }
header .breadcrumbs     { padding-top: 90px; margin-left: 40px; }
header .breadcrumbs .flexbox li { height: 18px; line-height: 1; vertical-align: middle; margin: 0; padding: 0; font-size: 1rem; color: #1e2854; }
header .breadcrumbs a   { color: #1e2854; }
header .breadcrumbs a:hover { text-decoration: underline; }
header .breadcrumbs .flexbox { margin-top: 0; }
header .breadcrumbs .flexbox li { flex: inherit;  }
header .breadcrumbs .divider { padding-left: 5px !important; padding-right: 5px !important; color: #1e2854; }


/* Footer
-----------------------------------------------------------------------------*/
footer                  { z-index: 100; display: block; height: auto; padding: 15px 40px; font-family: 'myriad-pro', sans-serif; background: #fff; }
footer a,
footer small            { color: #1e2854; font-size: 1.2rem; font-weight: 400; }
footer a:hover          { text-decoration: underline; }
footer .flexbox li      { display: -webkit-flex; display: flex; flex: 0 0 auto; line-height: 1; padding: 0 5px; }
footer .flexbox li:first-child { padding-left: 0; }
footer .flexbox li:last-child { padding-right: 0; }
footer .flexbox li:nth-child(7) { margin-right: auto; }
footer .divider         { color: #999; }


/* Form
-----------------------------------------------------------------------------*/
input[type="text"],
input[type="password"],
textarea                { display: inline-block; padding: 4px 6px; font-size: 14px; line-height: 24px; color: #555; border: 1px solid #ccc; background: #fff; }
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus          { border-color: rgba(82,168,236,0.8); outline: 0; outline: thin dotted 9;
                          -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); }

.btn-box .btn           { width: 200px; height: 50px; font-size: 18px; }
.btn                    { position: relative; display: inline-block; overflow: hidden; line-height: 32px; vertical-align: middle; margin: 10px 5px; padding: 0 10px; border: 1px solid #f0f0f0; color: #fff !important; font-size: 14px; font-weight: bold; text-overflow: ellipsis; white-space: nowrap; background: #f0f0f0;
                          -webkit-appearance: none; }
.btn:hover              { border-color: #262626; color: #fff; background: #262626; }



/* Misc
-----------------------------------------------------------------------------*/
.clear-fix:before,
.clear-fix:after        { content: ""; display: block; overflow: hidden; }
.clear-fix:after        { clear: both; }
.clear-fix              { zoom: 1; }

.hidden                 { display: none; }
.overflow-hidden        { overflow: hidden; }

.flexbox                { display: -webkit-flex; display: flex; }
.flexbox.white          { background: #fff; }
.flexbox > li           { flex-basis: auto; flex-grow: 1; flex-shrink: 1; }
.flexbox.row            { -webkit-flex-direction: row; flex-direction: row; }
.flexbox.column         { -webkit-flex-direction: column; flex-direction: column; }
.flexbox.nowrap         { -webkit-flex-wrap: nowrap; flex-wrap: nowrap; }
.flexbox.wrap           { -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.flexbox.justify-start  { -webkit-justify-content: flex-start; justify-content: flex-start; }
.flexbox.justify-center { -webkit-justify-content: center; justify-content: center; }
.flexbox.justify-end    { -webkit-justify-content: flex-end; justify-content: flex-end; }
.flexbox.align-start    { -webkit-align-items: flex-start; align-items: flex-start; }
.flexbox.align-center   { -webkit-align-items: center; align-items: center; }
.flexbox.align-end      { -webkit-align-items: flex-end; align-items: flex-end; }
.flexbox.align-stretch  { -webkit-align-items: stretch; align-items: stretch; }
.flexbox .flex-none     { -webkit-flex: none; flex: none; }
.flexbox .flex-1        { -webkit-flex: 1;  flex: 1 0 auto; }
.flexbox .flex-2        { -webkit-flex: 2;  flex: 2; }

.flexbox.center li,
.flexbox .center        { display: flex; align-items: flex-end; justify-content: center; }

.block                  { display: block; }
.inline                 { display: inline-block; }
.inline > li,
.inline > li a          { float: left; display: inline-block; }
.inline-block           { display: inline-block; }

.list                   { display: block; }
.list li                { display: list-item; }

.grid                   { clear: both; }
.grid:before, .grid:after { content: ""; display: table; }
.grid-1                 { width: 100%; }
.grid-2                 { width: 50%; }
.grid-3                 { width: 33.3333%; }
.grid-4                 { width: 25%; }
.grid-5                 { width: 20%; }
/* .column                 { float: left; display: inline-block; } */

.input-block            { display: block; width: 100%; }
.input-block.search     { padding-right: 35px; }
.input-mini             { width: 40px; }
.input-small            { width: 90px; }
.input-middle           { width: 170px; }
.input-group            { position: relative; display: inline-block; }
.input-group.block      { display: block; }

.width-auto             { width: auto; }
.width-block            { width: 100%; }
.align-left             { text-align: left; }
.align-center           { text-align: center; }
.align-right            { text-align: right; }

.border-none            { border: none !important; }
.border-top-none        { border-top: none !important; }
.border-right-none      { border-right: none !important; }
.border-bottom-none     { border-bottom: none !important; }
.border-left-none       { border-left: none !important; }

.list-style-square      { list-style: square; }
.list-style-square li   { margin-left: 18px; }

.indent-5               { margin-left: 5em; }
.nowrap                 { white-space: nowrap; }

.badge                  { position: absolute; display: inline-block; min-width: 26px; vertical-align: middle; padding: 8px; text-align: center; border-radius: 50%; color: #fff; font-size: 1.2rem; font-weight: bold; background: #ff4a51; }

.full-size              { height: 100%; }
.scale:hover            { transform: scale(1.05); }

.box-shadow             { box-shadow: 0 0 15px rgba(0,0,0,.1); }

.text-shadow1           { text-shadow: 0 0 5px rgba(0, 0, 0, .1); }
.text-shadow2           { text-shadow: 0 0 5px rgba(0, 0, 0, .2); }
.text-shadow3           { text-shadow: 0 0 10px rgba(0, 0, 0, 1); }
.text-shadow9           { text-shadow: 0 1px 0 #000, 1px 0 0 #000, 0 -1px 0 #000, -1px 0 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
.text-shadow10          { text-shadow: 2px  2px 5px #fff, -2px  2px 5px #fff, 2px -2px 5px #fff, -2px -2px 5px #fff; }
.text-shadow-border     { text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff; }

.text-indent            { padding-left: 30px; text-indent: -30px; }

.bg-pos-center          { background-position: center center; }
.bg-pos-center-top      { background-position: center top !important; }
.bg-pos-left-top        { background-position: left top !important; }
.bg-pos-left-bottom     { background-position: left bottom !important; }
.bg-pos-right-center    { background-position: right center !important; }
.bg-pos-right-top       { background-position: right center !important; }



header + .white-bg-box  { margin-top: 0; }
.white-bg-box           { margin-top: 100px; padding: 40px; background-color: rgba(255,255,255,.9); }


/* Icons
-----------------------------------------------------------------------------*/
.icon                   { display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-color: none; }

.icon-logo              { width: 120px; height: 13px; background-image: url("../images/svg/icon-logo.svg"); }
.icon-logo.white        { width: 120px; height: 13px; background-image: url("../images/svg/icon-logo-white.svg"); }

.icon-twitter           { width: 22px; height: 22px; background-image: url("../images/svg/icon-twitter.svg"); }
a:hover .icon-twitter   { background-image: url("../images/svg/icon-twitter-hover.svg"); }
.icon-twitter-white     { width: 42px; height: 34px; background-image: url("../images/svg/icon-twitter-white.svg"); }
a:hover .icon-twitter-white { background-image: url("../images/svg/icon-twitter-white-hover.svg"); }
.icon-facebook          { width: 22px; height: 22px; background-image: url("../images/svg/icon-facebook.svg"); }
a:hover .icon-facebook  { background-image: url("../images/svg/icon-facebook-hover.svg"); }
.icon-facebook-white    { width: 17px; height: 34px; background-image: url("../images/svg/icon-facebook-white.svg"); }
a:hover .icon-facebook-white { background-image: url("../images/svg/icon-facebook-white-hover.svg"); }
.icon-github            { width: 22px; height: 22px; background-image: url("../images/svg/icon-github.svg"); }
a:hover .icon-github    { background-image: url("../images/svg/icon-github-hover.svg"); }
.icon-github-white      { width: 30px; height: 34px; background-image: url("../images/svg/icon-github-white.svg"); }
a:hover .icon-github-white { background-image: url("../images/svg/icon-github-white-hover.svg"); }

.icon-recaius           { width: 20px; height: 20px; background-image: url("../images/svg/icon-recaius.svg"); }

.icon-salesforce        { width: 70px; height: 50px; background-image: url("../images/svg/icon-salesforce.svg"); }
.icon-aws               { width: 130px; height: 50px; background-image: url("../images/svg/icon-aws.svg"); }
.icon-heroku            { width: 140px; height: 36px; background-image: url("../images/svg/icon-heroku.svg"); margin-top: 10px; }
.icon-cariot            { width: 104px; height: 80px; background-image: url("../images/svg/icon-cariot.svg"); }
.icon-kenkinavi         { width: 120px; height: 21px; background-image: url("../images/svg/icon-kenkinavi.svg"); }
.icon-privacy           { width: 100px; height: 100px; background-image: url("../images/svg/icon-privacy.svg"); }

.icon-award             { width: 100%; max-width: 225px; height: 130px; background-image: url("../images/svg/icon-award.svg"); }

.icon-arrow-left        { width: 24px; height: 24px; background-image: url("../images/svg/icon-arrow-left.svg"); }
a:hover .icon-arrow-left { background-image: url("../images/svg/icon-arrow-left-hover.svg"); }
.icon-arrow-left-white  { width: 24px; height: 24px; background-image: url("../images/svg/icon-arrow-left-white.svg"); }
a:hover .icon-arrow-left-white { background-image: url("../images/svg/icon-arrow-left-hover.svg"); }
.icon-arrow-right       { width: 9px; height: 20px; background-image: url("../images/svg/icon-arrow-right.svg"); }
a:hover .icon-arrow-right { background-image: url("../images/svg/icon-arrow-right-hover.svg"); }

.icon-triangle-right    { width: 6px; height: 8px; background-image: url("../images/svg/icon-triangle-right.svg"); }
.icon-triangle-down     { width: 8px; height: 6px; background-image: url("../images/svg/icon-triangle-down.svg"); }

.icon-more              { width: 30px; height: 5px; background-image: url("../images/svg/icon-more.svg"); }
a:hover .icon-more      { width: 24px; height: 24px; background-image: url("../images/svg/icon-arrow-more.svg"); }

.icon-arrow-next        { width: 55px; height: 60px; background-image: url("../images/svg/icon-arrow-next.svg"); }
.icon-arrow-effect      { width: 20px; height: 20px; background-image: url("../images/svg/icon-arrow-effect.svg"); }

.icon-mail              { width: 63px; height: 50px; background-image: url("../images/svg/icon-mail.svg"); }
.icon-mail2             { width: 48px; height: 40px; background-image: url("../images/svg/icon-mail2.svg"); }

.icon-sensor1           { width: 38px; height: 60px; background-image: url("../images/svg/icon-sensor1.svg"); }
.icon-sensor2           { width: 38px; height: 60px; background-image: url("../images/svg/icon-sensor2.svg"); }
.icon-sensor3           { width: 38px; height: 60px; background-image: url("../images/svg/icon-sensor3.svg"); }
.icon-sensor4           { width: 38px; height: 60px; background-image: url("../images/svg/icon-sensor4.svg"); }

.icon-smile1            { width: 38px; height: 60px; background-image: url("../images/svg/icon-smile1.svg"); }
.icon-smile2            { width: 38px; height: 60px; background-image: url("../images/svg/icon-smile2.svg"); }
.icon-smile3            { width: 38px; height: 60px; background-image: url("../images/svg/icon-smile3.svg"); }

.icon-strength1         { width: 84px; height: 60px; background-image: url("../images/svg/icon-strength01.svg"); }
.icon-strength2         { width: 84px; height: 60px; background-image: url("../images/svg/icon-strength02.svg"); }
.icon-strength3         { width: 84px; height: 60px; background-image: url("../images/svg/icon-strength03.svg"); }

.icon-dot               { width: 10px; height: 10px; background-image: url("../images/svg/icon-dot.svg"); }
.icon-dot-white         { width: 10px; height: 10px; background-image: url("../images/svg/icon-dot-white.svg"); }
.icon-dot-blue          { width: 10px; height: 10px; background-image: url("../images/svg/icon-dot-blue.svg"); }
.icon-dot-purple        { width: 10px; height: 10px; background-image: url("../images/svg/icon-dot-purple.svg"); }

.icon-cross             { width: 10px; height: 10px; background-image: url("../images/svg/icon-cross.svg"); }
.icon-cross-white       { width: 30px; height: 30px; background-image: url("../images/svg/icon-cross-white.svg"); }

a.active .txt-news      { background-image: url("../images/svg/txt-news-active.svg"); }
a.active .txt-about     { background-image: url("../images/svg/txt-about-active.svg"); }
a.active .txt-services  { background-image: url("../images/svg/txt-services-active.svg"); }
a.active .txt-showcase  { background-image: url("../images/svg/txt-showcase-active.svg"); }
a.active .txt-blog      { background-image: url("../images/svg/txt-blog-active.svg"); }
a.active .txt-recruit   { background-image: url("../images/svg/txt-recruit-active.svg"); }

.logo-ana               { width: 150px; height: 38px; background-image: url("../images/svg/logo-ana.svg"); }
.logo-aruhi             { width: 192px; height: 30px; background-image: url("../images/svg/logo-aruhi.svg"); }
.logo-sankei            { width: 120px; height: 93px; background-image: url("../images/svg/logo-sankei.svg"); }
.logo-stuffservice      { width: 275px; height: 22px; background-image: url("../images/svg/logo-stuffservice.svg"); }
.logo-yamaha            { width: 175px; height: 65px; background-image: url("../images/svg/logo-yamaha.svg"); margin-left: -15px; }
.logo-recruit-sumai     { width: 175px; height: 72px; background-image: url("../images/svg/logo-recruit-sumai.svg"); margin-left: -15px; }
.logo-recruit-lifestyle { width: 172px; height: 72px; background-image: url("../images/svg/logo-recruit-lifestyle.svg"); margin-left: -15px; }
.logo-toshiba           { width: 171px; height: 45px; background-image: url("../images/svg/logo-toshiba.svg"); }
.logo-tokyucnst         { width: 279px; height: 45px; background-image: url("../images/svg/logo-tokyucnst.svg"); }
.logo-dependon          { width: 99px;  height: 80px; background-image: url("../images/svg/logo-dependon.svg"); }
.logo-komatsu           { width: 194px; height: 37px; background-image: url("../images/svg/logo-komatsu.svg"); }
.logo-zwei              { width: 103px; height: 37px; background-image: url("../images/svg/logo-zwei.svg"); }

.logo-salesforce        { width: 129px; height: 90px; background-image: url("../images/svg/logo-salesforce.svg"); }
.logo-community-cloud   { width: 214px; height: 50px; background-image: url("../images/svg/logo-community-cloud.svg"); }
.logo-forcecom          { width: 155px; height: 50px; background-image: url("../images/svg/logo-forcecom.svg"); }
.logo-service-cloud     { width: 180px; height: 50px; background-image: url("../images/svg/logo-service-cloud.svg"); }
.logo-pardot            { width: 130px; height: 50px; background-image: url("../images/svg/logo-pardot.svg"); }
.logo-marketing-cloud   { width: 206px; height: 50px; background-image: url("../images/svg/logo-marketing-cloud.svg"); }
.logo-analytics-cloud   { width: 193px; height: 50px; background-image: url("../images/svg/logo-analytics-cloud.svg"); }
.logo-heroku            { width: 179px; height: 50px; background-image: url("../images/svg/logo-heroku.svg"); }
.logo-aws               { width: 237px; height: 50px; background-image: url("../images/svg/logo-aws.svg"); }

.logo-partner-salesforce { width: 314px; height: 90px; background-image: url("../images/svg/logo-partner-salesforce.svg"); }
.logo-partner-salesforce-isv { width: 314px; height: 90px; background-image: url("../images/svg/logo-partner-salesforce-isv.svg"); }
.logo-partner-salesforce-mc { width: 314px; height: 90px; background-image: url("../images/svg/logo-partner-salesforce-mc.svg"); }
.logo-partner-heroku    { width: 237px; height: 50px; background-image: url("../images/svg/logo-partner-heroku.svg"); }
.logo-partner-aws       { width: 237px; height: 100px; background-image: url("../images/svg/logo-partner-aws.svg"); }

.circle-cloud           { width: 180px; height: 180px; background-image: url("../images/svg/circle-cloud.svg"); }


/* Media Queries
-----------------------------------------------------------------------------*/
@media screen and (max-width: 1240px) {
    .services.feature .content:nth-of-type(2) .inner > .flexbox > li:first-child { -webkit-flex-basis: 50%; flex-basis: 50%;  }
    .services.feature .content:nth-of-type(2) .inner > .flexbox > li:last-child { -webkit-flex-basis: 50%; flex-basis: 50%; padding: 200px 40px 80px 0; }
}

@media screen and (max-width: 1024px) {
    .about.message > p { margin-bottom: 20px; }
    .message .content > .flexbox li:first-child { -webkit-flex-basis: 35%; flex-basis: 35%; }
    .message .content > .flexbox li:last-child { -webkit-flex-basis: 65%; flex-basis: 65%; padding: 30px; }
    .message .background.cover { background-position: center bottom; }
    .services.feature .content:nth-of-type(2) .inner > .flexbox > li:first-child { -webkit-flex-basis: 58%; flex-basis: 58%; }
    .services.feature .content:nth-of-type(2) .inner > .flexbox > li:last-child { -webkit-flex-basis: 42%; flex-basis: 42%;}
    .services.marketing .strength .flexbox.wrap > li { flex-basis: 50%; max-width: 50%; }
    .services.marketing .strength .flexbox.wrap > li:nth-of-type(3) { flex-basis: auto; max-width: 100%; }
    .services .strength .flexbox.wrap > li:nth-of-type(3) { padding-top: 40px; border-top: 1px solid #ccc; border-left: none !important; }
    .showcase.detail .content > .flexbox > li { padding: 60px 40px; }
    .showcase.detail .content h3 { white-space: nowrap; }
    .showcase.detail .more h3  { margin-bottom: 15px; }
    .showcase .more .flexbox li .box .inner { left: 5%; width: 90%; }
    .showcase .more .flexbox li a:hover .inner { left: 5%; }
    .showcase .more .flexbox li .box.tokyucnst .inner p:nth-child(1),
    .showcase .more .flexbox li .box.toshiba .inner p:nth-child(1) { font-size: 1.1rem; }
}

@media screen and (max-width: 830px) {
    .global-nav           { padding-left: 20px; padding-right: 20px; }
    .global-nav a         { padding-left: 10px; padding-right: 10px; }
    .services.feature h3  { font-size: 3rem; }
    .about.message h1 { font-size: 4.5rem; }
    .message .content > .flexbox li:first-child { -webkit-flex-basis: 30%; flex-basis: 30%; margin-left: 0; }
    .message .content > .flexbox li:last-child { -webkit-flex-basis: 70%; flex-basis: 70%; padding: 20px; }
}

@media screen and (max-width: 800px) {
    .global-nav > ul > li:nth-last-child(2) { padding-left: 0; }
    .contact.contact2 .contact-list dt { margin-bottom: 26px; font-size: 1.2rem; }
}

@media screen and (min-width: 769px) {
    .pc                 { display: block; }
    .tablet,
    .sp                 { display: none; }

    .global-nav         { display: block !important; }
    .global-nav .blog .icon,
    .global-nav li.child{ display: none !important; }
    .blog-nav           { display: none; }
    .showcase.detail .customer h3 .pc { display: inline-block; }
}

@media screen and (max-width: 768px) {
    body                { min-height: initial; }
    body.modal-open     { overflow: hidden; }

    h3                  { font-size: 2.4rem; }
    nav .logo           { display: none; }
    header .read        { margin-top: 0; margin-bottom: 40px; }
    footer              { padding-left: 20px; padding-right: 20px; }

    .pc                 { display: none !important; }
    .tablet             { display: inline-block !important; }

    .icon-logo          { width: 100px; height: 11px; }
    .global-nav         { display: none; overflow: auto; top: 40px; bottom: 0; left: 0; z-index: 109; height: inherit; padding-top: 20px; padding-left: 0; padding-right: 0; background: #fff; }
    .global-nav > ul    { flex-flow: column nowrap; }
    .global-nav > ul > li:nth-last-child(3) { margin-left: 0; }
    .global-nav > ul > li:nth-last-child(-n+3) a { padding-top: 15px; padding-bottom: 15px; padding-right: 0; }
    .global-nav li      { opacity: 0; padding: 0;
                          -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
    .global-nav a       { padding-top: 15px; padding-bottom: 15px; color: #1e2854; -webkit-justify-content: center; justify-content: center; }
    .global-nav a:hover span { padding-bottom: 0; border: none; }
    .global-nav a span .icon-triangle-right { display: inline-block;  }
    .global-nav.open li { opacity: 1; }
    .global-nav.open li:nth-of-type(1) { -webkit-transition-delay: 0.47s; -moz-transition-delay: 0.47s; transition-delay: 0.47s; }
    .global-nav.open li:nth-of-type(2) { -webkit-transition-delay: 0.54s; -moz-transition-delay: 0.54s; transition-delay: 0.54s; }
    .global-nav.open li:nth-of-type(3) { -webkit-transition-delay: 0.61s; -moz-transition-delay: 0.61s; transition-delay: 0.61s; }
    .global-nav.open li:nth-of-type(4) { -webkit-transition-delay: 0.68s; -moz-transition-delay: 0.68s; transition-delay: 0.68s; }
    .global-nav.open li:nth-of-type(5) { -webkit-transition-delay: 0.75s; -moz-transition-delay: 0.75s; transition-delay: 0.75s; }
    .global-nav.open li:nth-of-type(6) { -webkit-transition-delay: 0.82s; -moz-transition-delay: 0.82s; transition-delay: 0.82s; }
    .global-nav.open li:nth-of-type(7) { -webkit-transition-delay: 0.89s; -moz-transition-delay: 0.89s; transition-delay: 0.89s; }
    .global-nav.open li:nth-of-type(8) { -webkit-transition-delay: 0.96s; -moz-transition-delay: 0.96s; transition-delay: 0.96s; }
    .global-nav.open li:nth-of-type(9) { -webkit-transition-delay: 1.03s; -moz-transition-delay: 1.03s; transition-delay: 1.03s; }

    .blog-nav           { display: none !important; }
    .local-nav          { top: 40px; }

    .wrapper            { margin-top: 40px; }
    .content            { width: 100%; padding: 70px 20px 0; }
    .content:first-of-type { padding-top: 60px; }
    .content p          { font-size: 1.4rem; }
    .btn-box            { margin-top: 60px; margin-bottom: 40px; }
    .background.fixed   { transform: translate3d(0,0,0); }

    .top h1             { font-size: 1.8rem !important; }
    .top .hero h3       { font-size: 4rem !important; padding-top: 0; padding-bottom: 0; }
    .top video          { margin-top: 40px; }
    .top .content h2    { margin-top: 0; }
    .top .content:nth-of-type(n+2) p { font-size: 1.2rem; }
    .top .content:nth-of-type(n+2) > .flexbox > li:first-child { padding: 20px; }
    .top .content:nth-of-type(n+3) > .flexbox > li:first-child { flex-basis: calc(100% / 3); }
    .top .content:nth-of-type(n+3) > .flexbox > li:last-child { flex-basis: calc(100% / 3 * 2); }
    .top .top-news li:nth-of-type(n+4) { display: none; }
    .top .top-news > .flexbox > li { margin-right: 0; }
    .top .top-news .column .flexbox { -webkit-flex-direction: column; flex-direction: column; }
    .top .top-news .column .flexbox > li { flex-basis: auto; }
    .top .top-news .more { bottom: 20px; left: 20px; }

    .news.detail h3     { font-size: 2rem; }
    .news.detail .content { padding-top: 30px; }
    .news .content      { padding-top: 20px; }
    .news .date p       { text-align: center; }
    .news .columns > li { margin-top: 10px; margin-bottom: 10px; }

    .about.content { paddin-bottom: 40px; }
    .about.message .content { padding: 140px 20px 80px; }
    .about.message h1 { font-size: 2.8rem; text-align: center; margin-bottom: 30px; }
    .message .content > .flexbox { margin-top: 0; }
    .message .content > .flexbox li:last-child { padding: 30px 20px; }
    .message .background.cover { background-position: 56% bottom; background-size: auto 104%; }

    .services header    { margin-top: 0; }
    .services .hero .background.cover { background-position: center 20%; background-size: auto 105%; }
    .services.feature header { padding-top: 110px; padding-bottom: 40px; }
    .services.feature h3 { font-size: 2rem !important; }
    .services.feature .content .inner > .flexbox { -webkit-flex-direction: column; flex-direction: column; background-size: auto 100%; background-position: center; }
    .services.feature .content:nth-of-type(1) .inner > .flexbox { background-position: right center; }
    .services.feature .content:nth-of-type(4) .inner > .flexbox { background-position: left center; }
    .services.feature .content .inner > .flexbox > li { flex-basis: auto; }
    .services.feature .content .inner > .flexbox > li { padding-top: 120px; padding-bottom: 60px; -webkit-flex: 1; flex: 1 0 auto; }
    .services.feature .content .inner > .flexbox > li:last-child { padding-left: 10%; padding-right: 10%; }
    .services.feature .content:nth-of-type(even) .inner > .flexbox > li:last-child,
    .services.feature .content:nth-of-type(odd)  .inner > .flexbox > li:first-child { -webkit-flex-basis: inherit; flex-basis: inherit; padding-top: 0; }
    .services.feature .content:nth-of-type(even) .inner > .flexbox > li:first-child,
    .services.feature .content:nth-of-type(odd)  .inner > .flexbox > li:last-child { -webkit-flex-basis: inherit; flex-basis: inherit; }
    .services.feature .content:nth-of-type(2) .inner > .flexbox > li:first-child { -webkit-flex: 0 0 auto; flex: 0 0 auto; }
    .services.feature .content:nth-of-type(2) .inner > .flexbox > li:last-child { -webkit-flex: 0 0 auto; flex: 0 0 auto; padding: 0 10% 60px; }
    .services.feature .content:last-of-type .inner > .flexbox > li:last-child { padding-bottom: 0; }

    .services .case { padding-bottom: 20px; }

    .services.iot .logo-salesforce,
    .services.iot .logo-aws,
    .services.iot .logo-heroku,
    .services.iot .icon-award { width: 100%; }
    .services.iot .linear-gradient { padding-bottom: 20px; }
    .services.iot .performance .inner { padding: 0 10%; }
    .services.iot .performance .upper { margin-left: 0; margin-right: 0; }
    .services.iot .performance .upper li { padding-left: 10px; padding-right: 10px; }
    .services.iot .performance .upper .trapezoid,
    .services.iot .performance .upper .box { width: 100% !important; }
    .services.iot .performance .lower { padding-top: 0 !important; -webkit-flex-direction: column; flex-direction: column; }
    .services.iot .performance .lower > li { flex-basis: auto; }
    .services.iot .performance .lower li { position: relative; width: 100%; height: auto; margin-left: auto; margin-right: auto; flex-basis: auto; }
    .services.iot .performance .lower li li:nth-of-type(odd) { flex-basis: 100px; margin-left: 0; }
    .services.iot .performance .lower li li:nth-of-type(even) { flex-basis: calc(100% - 100px); margin-left: 0; margin-right: 0; }
    .services.iot .performance .lower li img { width: 100px; height: 100px; }
    .services.iot .performance .lower li .text h5 { font-size: 1.8rem; }
    .services.iot .performance .lower li .text p { margin-bottom: 0; padding-bottom: 0; font-size: 1.2rem; }
    .services.iot .performance .lower li .text-box { top: 0; left: 140px; }
    .services.iot .performance .lower li .text-box h5 { padding-top: 0; }
    .services.iot .performance .lower li .text-box h5,
    .services.iot .performance .lower li .text-box p { padding-right: 0; color: #333; text-align: left; }
    .services.iot .performance .lower li .text-box p.delay { display: block; animation: none; text-shadow: none; }
    .services.iot .performance .background.cover { width: 100px; height: 100px; margin-top: 10px; margin-left: 30px; }
    .services.iot .performance .background.ellipse-center { border-radius: 0; background: none; }
    .services.iot .jumpstart > .inner { padding-bottom: 0; }
    .services.iot .jumpstart > .inner li p { margin-left: 64px; }
    .services.iot .jumpstart .lower { margin-top: 20px; padding-left: 20px; padding-right: 20px; }
    .services.iot .jumpstart .lower li:nth-of-type(1) { flex-basis: 60%; }
    .services.iot .jumpstart .lower li:nth-of-type(2) { flex-basis: 40%; }
    .services.iot .jumpstart .lower img { width: 100%; height: auto; }

    .services.salesforce .linear-gradient { padding-left: 10%; padding-right: 10%; }
    .services.salesforce .strength .flexbox.wrap > li { flex-basis: auto; max-width: 100%; height: auto; border-top: 1px solid #ccc; }
    .services.salesforce .strength .flexbox.wrap > li:nth-of-type(even) { border-left: none; }

    .services .configuration li:first-of-type { padding-right: 20px; }
    .services .configuration li:last-of-type { padding-left: 20px; }

    .services.marketing .logos { margin-top: 0; margin-bottom: 0; -webkit-flex-direction: column; flex-direction: column; }
    .services.marketing .logos > li { flex-basis: auto; }
    .services.marketing .strength .flexbox.wrap > li { flex-basis: 100%; max-width: 100%; border-top: 1px solid #ccc; flex-basis: inherit; max-width: inherit; }
    .services.marketing .strength .flexbox.wrap > li:nth-of-type(n+2) { border-left: none; }
    .services.marketing .onestop li li p { margin-left: 44px; }

    .services .content  { padding-left: 0; padding-right: 0; }
    .services .content .inner { width: 100%; padding-left: 10%; padding-right: 10%; }
    .services .hero     { height: 760px; }

    .services .case .inner { width: auto; margin-left: 20px; margin-right: 20px; padding-left: 20px; padding-right: 20px; }
    .services .semicircle .text p { padding-top: 0;}
    .services .inner .logos { padding-top: 0 !important; }
    .services .inner .logos li { padding-left: 10px; padding-right: 10px; }
    .services .steps h5 { margin-top: 80px; }
    .services .strength h5 { padding-top: 0; }
    .services .strength img { width: auto; }
    .services .strength .inner { padding-left: 5%; padding-right: 5%; }
    .services .strength .flexbox + p { height: auto; color: #cecece; }
    .services .strength .flexbox .flexbox { flex-flow: column nowrap; }
    .services .strength .flexbox.wrap { -webkit-flex-direction: column; flex-direction: column; }
    .services .strength .flexbox.wrap > li { flex-basis: auto; }
    .services .strength .flexbox.wrap > li h5 { min-height: inherit; margin-bottom: 0; text-align: left; }
    .services .strength .flexbox.wrap > li ul { -webkit-flex-direction: row; flex-direction: row; }
    .services .strength .flexbox.wrap > li { padding-top: 40px; }
    .services .strength .flexbox.wrap > li li:nth-of-type(1) { flex-basis: 50px; min-width: 50px; }
    .services .strength .flexbox.wrap > li li:nth-of-type(2) { flex-basis: calc(100% - 50px); }
    .services .strength .wrap li li { padding-top: 0; }
    .services .strength .wrap li li:nth-of-type
    .services .strength .wrap li li:nth-of-type(2) { height: 140px; }
    .services .configuration li:nth-of-type(n+7) { height: 200px; }
    .services .base .inner { padding-left: 0; padding-right: 0; }
    .services .base .inner .text { width: 80%; margin-left: auto; margin-right: auto; }
    .services .base .box { padding-left: 20px; padding-right: 20px; }
    .services .steps    { width: 100%; margin-top: 70px; margin-bottom: 0; -webkit-flex-direction: column; flex-direction: column; }
    .services .steps img { width: 50%; padding-top: 40px; padding-bottom: 40px; }
    .services .steps > li { flex-basis: auto !important; width: 100%; min-height: 100%; }
    .services .steps > li:nth-of-type(1) { padding-right: 0; }
    .services .steps > li:nth-of-type(2) { padding: 40px 0 0; }
    .services .steps li li:first-child h5 { margin-top: 0; }

    .services .contact img { height: 16px; }

    .about h1           { margin-bottom: 20px; color: #111; font-size: 2.2rem; text-align: left; }
    .about .content     { padding-top: 80px; }

    .outline .content header { padding-bottom: 30px; }
    .outline .content .partners { padding-top: 12px; }
    .outline .content .partners li { padding: 5px 0 !important; }
    .outline .content .partners li i,
    .outline .content .partners li:nth-of-type(1) i,
    .outline .content .partners li:nth-of-type(3) i { width: 94%; }
    .outline .content .partners li:nth-of-type(5) i { width: 70%; }

    .access .google-map { margin-bottom: 30px; }
    .access .google-map + .flexbox { width: 100%; }

    .mission .content { padding-bottom: 80px; }
    .mission .content:first-of-type    { padding-top: 60px; }
    .mission .content header { padding-bottom: 0; }
    .mission .white-border-box { position: relative; width: 92%; padding: 30px 20px; text-align: left;  }
    .mission .mission-box { margin-left: 0; }
    .mission .vision-box { margin-right: 0; }
    .mission .corevalue-box { margin-bottom: 80px; }
    .mission .background.cover { background-position: 70% top; background-size: auto 100%; }

    .content header     { padding-top: 0; padding-bottom: 0; }
    .contact .btn-box   { padding-left: 20px; padding-right: 20px; }

    .showcase .content > p { padding: 0 0 20px; }
    .showcase .content h3.name { min-width: 200px; font-size: 1.4rem; }
    .showcase .content p.solution { min-width: 200px; font-size: 2rem !important; }
    .showcase .content .logo i { width: 150px; }
    .showcase .customer li .flexbox{ flex-flow: column wrap; }
    .showcase.stuffservice .name.name-jp h2 { white-space: normal; }
    .showcase .platform > .flexbox { flex-flow: column nowrap; }
    .showcase.detail header { margin-top: 360px; }
    .showcase.detail .customer .name { flex-basis: auto; }
    .showcase.detail .customer .platform { flex-basis: 60px; -webkit-justify-content: flex-start; justify-content: flex-start; }
    .showcase.detail .platform > .flexbox:not(.customer) > li:nth-of-type(1) { flex: 0 0 auto; }
    .showcase.detail .platform > .flexbox > li:nth-of-type(2) { display: none; }
    .showcase.detail .content h3 { margin-bottom: 15px; padding-left: 0; padding-right: 0; font-size: 2.6rem; }
    .showcase.detail .content.project > .flexbox > li:nth-of-type(2),
    .showcase.detail .content.service> .flexbox > li:nth-of-type(1) { background-size: contain; background-repeat: no-repeat;}
    .showcase.detail .background { top: 40px; }

    .showcase .more .flexbox li .box .inner { display: none; }

    .contact.contact2 .read { width: calc(90% - 40px); padding: 0 15px; text-align: left;  }
    .contact.contact2 .read br { display: none; }
    .contact.contact2 .contact-list ul { -webkit-flex-direction: column; flex-direction: column; align-items: center; }
    .contact.contact2 .contact-list li { -webkit-flex-basis: auto; flex-basis: auto; width: calc(90% - 40px); margin-right: 0; margin-bottom: 20px; }
    .contact.contact2 .contact-list dl { padding: 15px 15px 25px; }
    .contact.contact2 .btn-box { margin-top: 30px; }
    .contact.contact2 .contact-list .inner { width: calc(90% - 40px); padding-left: 15px; padding-right: 15px; }
    .contact.contact2 .contact-list .inner p:first-of-type { text-align: left; }

    .standard .content     { width: 100%; padding-top: 50px; padding-bottom: 60px; }
    .privacy .read         { margin-top: 0; padding: 0 20px; }
    .privacy .white-bg-box { margin-top: 50px;}
    .privacy .background   { height: 100vh; background-position: center top; }
    .privacy .p-mark .icon-privacy { width: 90px; height: 90px; }
    .privacy .sign p:nth-last-child(2) { font-size: 1.4rem; }
    .sitemap .content { padding-bottom: 80px; }
    .sitemap .content .flexbox > li { flex: 0 0 1; }
    .csr .background   { height: 100vh; }

    .icon-facebook      { background-image: url("../images/svg/icon-facebook.svg"); }
    a:hover .icon-facebook { background-image: url("../images/svg/icon-facebook-hover.svg"); }
    .icon-twitter       { background-image: url("../images/svg/icon-twitter.svg"); }
    a:hover .icon-twitter { background-image: url("../images/svg/icon-twitter-hover.svg"); }
}

@media screen and (max-width: 680px) {
    .showcase.detail .customer > .flexbox > li:first-of-type { flex-basis: auto; padding-left: 10px; }
    .showcase.detail .customer > .flexbox > li { padding-right: 10px; }
    .showcase.detail .customer > .flexbox .platform i { margin-bottom: 10px; }
}

@media screen and (max-width: 480px) {
    body, .wrapper      { overflow-x: hidden; }
    footer .flexbox li:nth-child(-n+7) { display: none; }
    footer .flexbox li:last-child{ margin-left: 0; padding-left: 0;
                          -webkit-flex: 1; flex: 1 0 auto; -webkit-justify-content: center; justify-content: center; }
    h1                  { color: #fff; font-size: 3rem; }
    h2                  { font-size: 2.2rem; }
    h3                  { margin-top: 0; margin-bottom: 20px; padding-left: 10px; padding-right: 10px; font-size: 2rem; }

    .pc,
    .tablet             { display: none !important; }
    .sp                 { display: inline-block !important; }

    .wrapper            { margin-top: 40px; padding: 0; }
    .main               { width: 100%; padding-top: 0; }
    .content            { width: 100%; padding-left: 10px; padding-right: 10px; }
    .content header p.read { width: 90%; margin-left: auto; margin-right: auto; }
    .hero               { height: 480px; }
    .copy h1 + p        { margin-top: 10px; }
    .local-nav .flexbox { width: 320px; }
    .local-nav li       { flex-basis: 25% !important; }
    .local-nav .border  { width: 240px; }

    .top                { background: #f0f0f0; }
    .top h1             { font-size: 1.4rem !important; }
    .top video,
    .top .hero .background { position: absolute !important; margin-top: 0;}
    .top .hero h3       { margin-top: 40px; margin-bottom: 10px; font-size: 3rem!important; }
    .top a.more         { margin-top: 40px; }

    .top.main           { padding-bottom: 0; }
    .top .content.hero  { position: relative; }
    .top .content.hero > .copy  {  background: transparent; }
    .top .content.hero > .copy.video-paused  { background-image: url("../images/svg/icon-videoplay.svg"); background-position: center center; background-repeat: no-repeat; }
    .top video::-webkit-media-controls-panel { display: none!important;  -webkit-appearance: none; }
    .top video::--webkit-media-controls-play-button  { display: none!important;  -webkit-appearance: none; }
    .top video::-webkit-media-controls-start-playback-button  { display: none!important;  -webkit-appearance: none; }

    .top .content:nth-of-type(2) { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0; padding-left: 0; padding-right: 0; }
    .top .content:nth-of-type(2) > .flexbox > li:nth-of-type(n+2) { border-top: 1px solid #e5e5e5; }
    .top .content:nth-of-type(2) > .flexbox > li:last-of-type { border-bottom: 1px solid #e5e5e5; }
    .top .content:nth-of-type(2) > .flexbox > li { height: auto; }
    .top .content:nth-of-type(2) h3 { text-align: center; }
    .top .content:nth-of-type(2) li .flexbox { margin-left: 100px; -webkit-flex-direction: row; flex-direction: row; }
    .top .content:nth-of-type(2) a p { color: #4e4e4e; background: none; }
    .top .content:nth-of-type(2) a p.title { height: 50px; }
    .top .content:nth-of-type(n+2) { width: 100%; margin: 0; }
    .top .content:nth-of-type(n+2) h3 { top: 30px; padding: 0; text-align: center; }
    .top .content:nth-of-type(n+2) a .background.cover { filter: grayscale(0); }
    .top .content:nth-of-type(n+2) > .flexbox { -webkit-flex-direction: column; flex-direction: column; }
    .top .content:nth-of-type(n+2) > .flexbox > li {flex-basis: auto; padding: 0; }
    .top .content:nth-of-type(n+3) { padding: 0; }
    .top .content:nth-of-type(n+3) h3 { color: #fff; }
    .top .content:nth-of-type(n+2) > .flexbox > li:first-child { max-height: 0; padding: 0; }
    .top .content:nth-of-type(n+4) { padding-top: 0; }
    .top .content:nth-of-type(n+3) > .flexbox > li:last-child { height: 300px; min-height: 300px; }
    .top .content:nth-of-type(n+3) p { width: calc(100% - 40px) !important; }
    .top .background.ellipse-right { background: -webkit-radial-gradient(ellipse farthest-corner at right, rgba(0, 0, 0, .3) 40%, rgba(0, 0, 0, .7) 100%) 0% 0%;
                          background: radial-gradient(ellipse farthest-corner at right, rgba(0, 0, 0, .3)40%, rgba(0, 0, 0, .7) 100%) 0% 0%; }
    .top .content:nth-of-type(4) .flexbox > li:first-child { max-height: 0; }
    .top .content:last-child { padding-bottom: 0; }

    .top .content.top-news { padding-top: 80px; padding-bottom: 80px; background: #fff; }
    .top .top-news h3   { display: inline-block; margin: 0; padding: 0; }
    .top .top-news li   { position: inherit !important; height: 100%; padding: 0; }
    .top .top-news li:nth-of-type(n+3) { display: list-item; }
    .top .top-news li li { text-align: left; }
    .top .top-news .background { position: relative; float: left; width: 80px; height: 80px; margin: 5px 0 5px 5px; }
    .top .top-news .text { position: inherit; background: none; }
    .top .top-news .title { padding: 10px 20px 10px; }
    .top .top-news .date { padding: 0; }
    .top .top-news .more { left: 50%; margin-left: -60px; }
    .top .top-news .tag { background: #f0f0f0; }
    .top .icon-cariot   { right: -40px; bottom: 50px; }

    .news .columns      { flex-flow: column wrap; }
    .news .columns > li { -webkit-flex: inherit; flex: inherit; max-width: none; margin-top: 10px; margin-bottom: 10px; }
    .news .columns > li:first-child { flex-basis: inherit; }
    .news.detail .title .flexbox { flex-flow: column wrap; }
    .news.detail .title li:first-child { -webkit-flex: 0 0 auto; flex: 0 0 auto;  -webkit-justify-content: center; justify-content: center; }
    .news.detail .title li:last-child { padding-top: 20px; }
    .news.detail .main-body { width: 100%; margin-top: 40px; }
    .news.detail .cover { height: 400px; }

    .about.message .content { margin-top: 80vw; padding-top: 0; padding-bottom: 20px; }
    .about.message h1 { font-size: 1.8rem; }
    .message .content > .flexbox { -webkit-flex-flow: column nowrap; flex-flow: column nowrap; }
    .message .content > .flexbox li:first-child { -webkit-flex-basis: auto; flex-basis: auto; }
    .message .content > .flexbox li:last-child  { -webkit-flex-basis: auto; flex-basis: auto; margin-left: 0; padding: 30px 0 0; background: transparent;  border-radius: 0; }
    .message .background { width: 100%; height: 80vw; }
    .message .background.cover { background-position: 56% top; background-size: 118% auto; }

    .outline h3         { margin-top: 40px; }
    .outline h3 + p.en  { margin-bottom: 20px; }
    .outline .content   { padding-top: 90px; padding-left: 10px; padding-right: 10px; }
    .outline .content header { padding-bottom: 20px; }
    .outline .content .flexbox { flex-flow: column nowrap; }
    .outline .content .flexbox li:nth-of-type(odd) { padding-top: 15px; padding-bottom: 10px; border-bottom: none; }
    .outline .content .flexbox li:nth-of-type(odd) p { display: inline-block; margin-right: 10px; }
    .outline .content .flexbox li:nth-of-type(even) { padding-top: 10px; padding-bottom: 15px; }
    .outline .content .flexbox li:nth-of-type(odd),
    .outline .content .flexbox li:nth-of-type(even) { flex-basis: auto; max-width: none; padding-left: 10px; padding-right: 10px; }
    .outline .content .flexbox li:nth-of-type(2) { border-top: none; }
    .outline .content .partners li { flex-basis: 120px!important; max-width: none!important; overflow: hidden; }
    .outline .content .partners li i { position: static!important; width: 80%!important; }

    .about.access .content    { padding-left: 10px; padding-right: 10px; padding-bottom: 40px; }
    .access .google-map { height: 300px; margin-bottom: 20px; }
    .access .google-map + .flexbox { flex-flow: column nowrap; margin-top: 0;  border-top: 1px solid #e5e5e5; }
    .access .google-map + .flexbox > li { border-top: 1px solid #e5e5e5; }
    .access .google-map + .flexbox > li:nth-of-type(odd),
    .access .google-map + .flexbox > li:nth-of-type(even) { flex-basis: auto; padding-bottom: 15px; border-bottom: 1px solid #e5e5e5; }
    .access .google-map + .flexbox > li:nth-of-type(even) { margin-top: 10px; }
    .access .google-map + .flexbox,
    .access .google-map + .flexbox > li { margin-top: 0; border-top: none; }
    .access .google-map + .flexbox > li:first-child { border-top: 1px solid #e5e5e5; }

    .about.mission .content { padding-bottom: 0; }
    .mission .content:first-of-type {padding-top: 80px; }
    .mission .white-border-box { width: 100%; margin-top: 0; padding: 20px 0 10px; }
    .mission h2,
    .mission h3,
    .mission p       { padding-left: 10px; padding-right: 10px; }
    .mission h2      { padding: 8px 10px; font-size: 1.3rem; font-weight: bold; }
    .mission h2 span { font-size: 1.2rem; }
    .mission h3      { padding: 0 10px; font-size: 2rem; }
    .mission h3 br   { display: none; }
    .mission .corevalue-box { padding-bottom: 0; }
    .mission .corevalue-box ol { padding-top: 25px; }
    .mission .white-border-box li p { padding-left: 4px; }

    .services.feature header { padding-top: 100px; padding-bottom: 0; }
    .services h1        { padding-left: 20px; padding-right: 20px; }
    .services h3        { margin-bottom: 40px; }
    .services.feature .content h3 { margin-top: 0; top: 20px; text-align: center !important; }
    .services.feature .content:nth-of-type(1) .inner > .flexbox,
    .services.feature .content:nth-of-type(4) .inner > .flexbox { background-position: center; }
    .services.feature .content .inner > .flexbox > li { padding-bottom: 40px; }
    .services.feature .content p.read { width: 100%; padding-top: 20px; }
    .services.feature .content .box { width: auto; height: 80px; padding: 8px 60px; }
    .services.feature .content .box { left: 50% !important; right: auto !important; width: auto; height: 70px; padding: 0 24px; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
    .services.feature .content .step { line-height: 1; font-size: 6rem; padding-bottom: 20px; }
    .services.feature .content .inner > .flexbox > li { padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 60px; }
    .services.feature .content:nth-of-type(2) .inner > .flexbox > li:last-child { padding-bottom: 0; }

    .services.iot section:nth-of-type(2) li:nth-of-type(n+1) { max-width: 100%; padding: 0 0 20px; }
    .services.iot section:nth-of-type(2) li:nth-of-type(2) { flex-basis: auto; max-width: 100%; }
    .services.iot section:nth-of-type(2) li:nth-of-type(2) img { max-height: 350px; }
    .services.iot .linear-gradient p { margin-bottom: 30px; }
    .services.iot .linear-gradient .flexbox { -webkit-flex-direction: column; flex-direction: column; }
    .services.iot .linear-gradient .flexbox > li { flex-basis: auto !important; }
    .services.iot .linear-gradient .icons { margin-top: 20px; }
    .services.iot .linear-gradient .icon { width: 50% !important; }
    .services.iot .linear-gradient p { width: 88%; margin-left: auto; margin-right: auto; text-align: center; }
    .services.iot .performance { padding-bottom: 0; }
    .services.iot .performance .upper { margin: 40px -10px 0; padding-top: 0 !important; }
    .services.iot .performance .upper li { padding-top: 40px !important; padding-left: 20px !important; padding-right: 20px !important; }
    .services.iot .performance .upper p:nth-of-type(n+2) { text-align: center; }
    .services.iot .performance .upper p + p.trapezoid .sp { display: inline!important; }
    .services.iot .jumpstart img { height: auto; }
    .services.iot .jumpstart p { margin-left: 0 !important; padding-right: 10px; }
    .services.iot .jumpstart .lower img { width: 50%; }
    .services.iot .jumpstart .lower { padding-top: 0 !important; padding-left: 10px; padding-right: 10px; }
    .services.iot .jumpstart > .inner li p { margin-left: 46px; }

    .services.marketing .linear-gradient { padding-top: 40px; }
    .services.marketing .steps li h5 { padding-left: 49px; }

    .services .hero     { height: 510px; padding-top: 60px; }

    .services.feature .content .text { width: 100%; }
    .services.feature .content .text p { margin: 0 10%; }

    .services .content:nth-of-type(2) .flexbox .flexbox { display: none; }
    .services .content:nth-of-type(n+2) { padding-top: 0; }
    .services .content:nth-of-type(2n+1) > .inner > .flexbox > li { padding-left: 0; padding-right: 0; }
    .services .content:nth-of-type(2n) > .inner > .flexbox > li:last-child,
    .services .content:nth-of-type(2n+1) > .inner > .flexbox > li:first-child { padding-bottom: 0; }

    .services .content .inner > .flexbox { -webkit-flex-direction: column; flex-direction: column; }
    .services .content .inner > .flexbox > li { flex-basis: auto; width: 100%; min-height: 100%; }
    .services .content.salesforce-first h3,
    .services .content h3 > span { font-size: 2.4rem; }

    .services .main     { padding-bottom: 0 !important; }

    .services .base .box .flexbox { -webkit-flex-direction: column; flex-direction: column; }
    .services .base .box .flexbox > li { flex-basis: auto; }
    .services .base .box li { margin: 20px 0; }
    .services .base .box li p { text-align: center; }

    .services .semicircle { height: auto; margin-top: 60px; padding-bottom: 0; }
    .services .semicircle .text { padding-top: 120px; }
    .services .semicircle .column:nth-of-type(3) { top: -40px; }
    .services .semicircle .column:nth-of-type(2), .services.salesforce .semicircle .column:nth-of-type(4) { top: -10px; }
    .services .semicircle .column:nth-of-type(1), .services.salesforce .semicircle .column:nth-of-type(5) { top: 60px; }
    .services .semicircle .column img { height: 50px; }
    .services .semicircle > img { width: 90%; height: auto; margin-top: 160px; }

    .services .strength h3 { margin-bottom: 60px; }
    .services .strength h5 { height: auto; min-height: inherit; }
    .services .strength .flexbox + p { height: auto; margin-top: 10px; margin-bottom: 10px; padding-right: 10px; }
    .services .strength .flexbox.wrap > li { padding: 30px 0 25px; }
    .services .strength .flexbox.wrap > li:last-of-type { padding-bottom: 0; }
    .services .strength .flexbox.wrap p:nth-of-type(1) { margin-top: 10px; }
    .services .strength .wrap li:nth-of-type(n+2) { border-left: none; }
    .services .strength .wrap li li { flex-basis: auto; }
    .services .strength .wrap li li:nth-of-type(1) { margin-top: 0; padding-top: 0; }
    .services .strength .wrap li li:nth-of-type(2) { height: auto; margin-top: 0; flex-basis: auto; }
    .services .strength .flexbox .flexbox { margin-bottom: 20px; }
    .services .strength .flexbox .flexbox li:nth-of-type(1) { height: auto; padding-right: 10px; padding-left: 10px; }
    .services .strength .flexbox .flexbox li:nth-of-type(2) { height: auto; }
    .services .strength .no { width: 50px; height: 50px; margin-top: 20px; border-radius: 0; }
    .services .strength .no img { height: 30px; }

    .services .steps li .icon { margin-left: 0; }
    .services .steps > li:nth-of-type(2) { padding: 0; }

    .services .configuration img.logo { height: 40px; margin-left: auto; margin-right: auto; }
    .services .configuration img.image { width: 90%; height: auto; margin-top: 30px; margin-bottom: 30px; }
    .services .configuration li { flex-basis: auto; }
    .services .configuration li:nth-of-type(n+2) { padding-top: 30px; }
    .services .configuration p.title { margin-top: 10px; }

    .services .logos img { height: 40px; margin-top: 30px; }
    .services .logos li { padding-left: 10px; padding-right: 10px; }

    .services .inner .logos li:nth-of-type(n+2) { margin-top: 20px; }
    .services .linear-gradient { padding-left: 10%; padding-right: 10%; }

    .services .case     { padding-top: 20px !important; padding-bottom: 20px; text-align: center; }
    .services .case h3  { margin-top: 30px; margin-bottom: 20px; }
    .services .case h5  { margin-top: 30px; margin-bottom: 10px; text-align: center; }
    .services .case .title { text-align: center; }
    .services .case .inner { margin-left: 10px; margin-right: 10px; }
    .services .case .inner li { text-align: center; }

    .services .contact  { padding-top: 40px !important; }
    .services .contact h3 { margin-bottom: 30px; }
    .services .contact li { padding-top: 0; }
    .services .contact h3,
    .services .contact li:last-of-type { text-align: center; }
    .services .contact p { text-align: center; font-size: 1.2rem; }

    .showcase.detail img.left,
    .showcase.detail img.right { float: none; width: 100%; margin-left: 0; margin-right: 0; }
    .showcase.detail header { margin-top: 300px; padding: 0 0 40px; }
    .showcase.detail .customer h2 { margin-bottom: 40px; font-size: 2rem; text-align: center; }
    .showcase.detail .customer h3 { margin-top: 40px; margin-bottom: 40px; padding-left: 0; padding-right: 0; font-size: 1.8rem; text-align: center; }
    .showcase.detail .customer > .flexbox > li { flex-basis: auto; padding: 20px; }
    .showcase.detail .customer > .flexbox > li:first-of-type { flex-basis: 100px; padding-left: 0; }
    .showcase.detail .customer .flexbox { flex-flow: column wrap; }
    .showcase.detail .customer .platform { flex: 0 0 auto; -webkit-justify-content: center; justify-content: center; }
    .showcase.detail .content { padding: 30px 10px; }
    .showcase.detail .content:not(.more) > .flexbox:not(.customer) > li { min-height: 400px; }
    .showcase.detail .content:not(.more) > .flexbox:not(.customer) > li:nth-of-type(1),
    .showcase.detail .content:not(.more) > .flexbox:not(.customer) > li:nth-of-type(2) { max-width: inherit; }
    .showcase.detail .content:first-of-type { padding-top: 60px; }
    .showcase.detail .content.project > .flexbox > li:nth-of-type(2),
    .showcase.detail .content.service> .flexbox > li:nth-of-type(1) { background-size: cover; }
    .showcase.detail .content p { margin-bottom: 0; padding-bottom: 0; }
    .showcase.detail .content > .flexbox > li { padding: 0 10px 40px; }
    .showcase.detail .content .customer { padding: 20px; }
    .showcase.detail .content .customer li { padding: 1px; }
    .showcase.detail .content .flexbox { flex-flow: column nowrap; }
    .showcase.detail .content .flexbox li { flex: 0 0 auto !important; max-width: 100%; }
    .showcase.detail .background { height: 600px; }
    .showcase.detail .service li:last-child { order: -1; }

    .showcase .more .flexbox a > p { height: auto; line-height: 2; }
    .showcase .more .flexbox a > p span { position: static; display: inline; }
    .showcase .more .flexbox li { padding: 10px 10px !important; }
    .showcase .more .flexbox li .case-more-title { display: block; height: auto; }
    .showcase .logo     { display: block;
                          -webkit-justify-content: center; justify-content: center; }
    .showcase .name     { height: auto; -webkit-justify-content: center; justify-content: center; }
    .showcase .panel    { width: 100%; height: auto; padding-top: 20px; padding-bottom: 20px; }

    .standard .content  { padding-top: 30px; }

    .contact li         { line-height: 1; }
    .contact li:nth-of-type(odd),
    .contact li:nth-of-type(even) { flex-basis: auto; }
    .contact li:nth-of-type(odd) { padding-top: 10px; padding-bottom: 0; border-bottom: none;
                          -webkit-justify-content: flex-start; justify-content: flex-start; }
    .contact li:nth-of-type(even) { padding-top: 10px; padding-right: 0; padding-bottom: 10px; }
    .contact li li:nth-of-type(odd) { padding: 0 5px 0 0; }
    .contact li li:nth-of-type(even) { padding: 0 0 0 5px; }
    .contact li:nth-child(2) { border-top: none; }
    .contact .content .flexbox { flex-flow: column nowrap; }
    .services .content .flexbox.wrap li { flex-basis: auto; }
    .contact .content li:nth-of-type(odd) { padding-left: 0; }
    .contact .content li:nth-of-type(odd),
    .contact .content li:nth-of-type(even) { flex-basis: auto; padding-right: 0; }
    .contact .content li:nth-of-type(2) { border-top: none; }
    .contact .required::after { right: 5px; }
    .contact .notice    { margin-bottom: 20px; }

    .contact.contact2 .contact-list li { width: 100%; }
    .contact.contact2 .contact-list dd { font-size: 2rem; }
    .contact.contact2 .contact-list li:nth-of-type(3) p br { display: inline; }
    .contact.contact2 .contact-list li img { max-width: 100%; }
    .contact.contact2 .contact-list li:nth-of-type(1) img { width: 180px; }
    .contact.contact2 .contact-list li:nth-of-type(2) img { width: 250px; }
    .contact.contact2 .contact-list li:nth-of-type(3) img { width: 227px; }
    .contact.contact2 .contact-list li:nth-of-type(4) img { width: 250px; }
    .contact.contact2 .read,
    .contact.contact2 .contact-list .inner { width: 100%; }

    .sitemap h3         { position: relative; top: 0; display: block; width: 100%; margin-top: 0; margin-bottom: 30px; padding: 0; }
    .sitemap .content > ul > li:first-of-type h3 { top: 0; }
    .sitemap .content > ul { margin-top: 20px; }
    .sitemap .content h3 { text-align: center; }
    .sitemap .content h3 span { padding-left: 10px; }
    .sitemap .content .flexbox { margin-top: 0; padding-top: 0; padding-left: 0; }
    .sitemap .content .flexbox li { flex: 0 0 50%; max-width: 50%; -webkit-justify-content: center; justify-content: center; }

    .privacy .read      { padding: 0; }
    .privacy .p-mark    { margin-left: 0; }
    .privacy .p-mark .icon-privacy { width: 80px; height: 80px; }

    .white-bg-box       { padding: 20px 15px; }
}