/* ==========================================================================

LAYOUT WIDTH

========================================================================== */
/* ==========================================================================

COLOR

========================================================================== */
/* ==========================================================================

FONT

========================================================================== */
@import url("https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900");
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono:100,300,400,500,700");
/* ==========================================================================

SCREEN

========================================================================== */
/* ==========================================================================

MODULE

========================================================================== */
/* ==========================================================================
	
STYLE
	
========================================================================== */
.sectionCont .caption {
  margin-bottom: 80px; }

#mvSlideArea {
  position: relative;
  text-align: center; }
  #mvSlideArea ul li {
    width: 100%;
    height: 590px;
    background-size: cover;
    background-position: center center;
    background-attachment: scroll; }
    @media only screen and (max-width: 640px) {
      #mvSlideArea ul li {
        height: 260px; } }
  #mvSlideArea .mvOverCont {
    z-index: 1;
    color: #fff;
    width: 80%;
    text-align: center; }
    @media only screen and (max-width: 640px) {
      #mvSlideArea .mvOverCont {
        width: 100%; } }
    #mvSlideArea .mvOverCont p {
      text-align: center; }
    #mvSlideArea .mvOverCont .title {
      font-size: 4rem;
      font-weight: 900; }
      @media only screen and (max-width: 640px) {
        #mvSlideArea .mvOverCont .title {
          font-size: 2.4rem;
          line-height: 1.1em; } }
    #mvSlideArea .mvOverCont .sub {
      font-size: 1.5rem;
      font-weight: bold; }
      @media only screen and (max-width: 640px) {
        #mvSlideArea .mvOverCont .sub {
          font-size: 1rem; } }

#about {
  background: url("../images/top/bg-about.jpg") center center/cover no-repeat scroll; }
  #about p {
    font-size: 1.2em;
    line-height: 2.6em; }

#role .odyrole {
  margin: 50px 0;
  display: flex;
  justify-content: space-between; }
  #role .odyrole li {
    width: 20%; }
    #role .odyrole li img {
      height: 100px;
      margin-bottom: 20px; }
  @media only screen and (max-width: 640px) {
    #role .odyrole {
      flex-wrap: wrap;
      margin-bottom: 0; }
      #role .odyrole li {
        width: 100%;
        display: flex;
        margin-bottom: 30px; }
        #role .odyrole li img {
          width: 50%;
          height: 80px; }
        #role .odyrole li p {
          width: 50%;
          margin-top: auto;
          margin-bottom: auto;
          text-align: left; } }

#point .pointList {
  flex-flow: row wrap;
  justify-content: center; }
  #point .pointList li {
    flex: 0 0 30.3333333%;
    margin: 0 1.5% 20px;
    flex-flow: row nowrap;
    padding: 30px 20px;
    align-items: center; }
    @media only screen and (max-width: 1080px) {
      #point .pointList li {
        flex: 0 0 48%;
        margin: 0 4% 20px 0;
        border: 1px solid #111; }
        #point .pointList li:nth-child(2n) {
          margin-right: 0; } }
    @media only screen and (max-width: 640px) {
      #point .pointList li {
        flex: 0 0 100%;
        margin: 0 0 20px 0;
        border: 1px solid #111; } }
    #point .pointList li .thum {
      flex: 0 0 150px;
      padding: 0 20px; }
      #point .pointList li .thum img {
        display: inline-block;
        height: 80px;
        width: auto; }
    #point .pointList li .cont {
      flex: 1 1 100%; }
      #point .pointList li .cont .point {
        font-size: 7px;
        letter-spacing: 0; }
        #point .pointList li .cont .point .number {
          font-size: 23px;
          display: block;
          letter-spacing: 0.1em;
          font-weight: 600; }
      #point .pointList li .cont .pointTitle {
        margin: 10px 0 15px 0;
        padding: 10px 0;
        line-height: 1.5em;
        font-size: 1.15rem; }
      #point .pointList li .cont p {
        opacity: .8;
        margin-bottom: 20px; }
      #point .pointList li .cont a {
        text-align: center;
        font-size: 0.8rem;
        color: #FF9E3C; }

#productSlide li {
  margin: 0 30px; }
  @media only screen and (max-width: 640px) {
    #productSlide li {
      margin: 0 10px; } }
  #productSlide li h3 {
    padding: 0.6em; }

#plan #planList {
  flex-flow: row nowrap;
  justify-content: space-between;
  margin-bottom: 60px; }
  @media only screen and (max-width: 640px) {
    #plan #planList {
      margin-bottom: 0;
      flex-flow: column wrap;
      justify-content: flex-start; } }
  #plan #planList .eachPlan {
    flex: 0 0 47%;
    background-color: #111;
    color: #fff; }
    @media only screen and (max-width: 640px) {
      #plan #planList .eachPlan {
        flex: 0 0 100%;
        margin-bottom: 40px; } }
    #plan #planList .eachPlan:hover img {
      transform: scale(1.2); }
    #plan #planList .eachPlan .thum {
      width: 100%;
      height: 175px;
      overflow: hidden; }
      @media only screen and (max-width: 768px) {
        #plan #planList .eachPlan .thum {
          height: 125px; } }
      @media only screen and (max-width: 640px) {
        #plan #planList .eachPlan .thum {
          height: 130px; } }
      #plan #planList .eachPlan .thum img {
        -webkit-transition: 0.3s ease-out;
        -moz-transition: 0.3s ease-out;
        -ms-transition: 0.3s ease-out;
        -o-transition: 0.3s ease-out;
        transition: 0.3s ease-out; }
    #plan #planList .eachPlan .cont {
      padding: 30px; }
      #plan #planList .eachPlan .cont .planName .number {
        display: inline-block;
        font-weight: bold;
        font-size: 1.6rem;
        margin-right: 0.5em; }
      #plan #planList .eachPlan .cont .planName .en {
        display: inline-block;
        font-weight: 300; }
      #plan #planList .eachPlan .cont .planName .jp {
        display: block;
        border-top: 5px solid #fff;
        border-bottom: 2px solid #fff;
        margin: 10px auto 0;
        padding: 10px 0;
        font-weight: bold;
        font-size: 1.5rem; }
      #plan #planList .eachPlan .cont ul {
        border-bottom: 5px solid #fff;
        padding: 20px 30px; }
        @media only screen and (max-width: 768px) {
          #plan #planList .eachPlan .cont ul {
            padding: 20px 20px; } }
        #plan #planList .eachPlan .cont ul li {
          text-align: left;
          margin-bottom: 10px;
          font-size: 1rem; }
          @media only screen and (max-width: 768px) {
            #plan #planList .eachPlan .cont ul li {
              font-size: 0.8rem; } }
          #plan #planList .eachPlan .cont ul li:last-child {
            margin-bottom: 0; }
          #plan #planList .eachPlan .cont ul li:before {
            content: "\f096";
            font-family: FontAwesome;
            margin-right: 0.7em; }

#clientsList {
  flex-flow: row wrap;
  justify-content: space-between; }
  #clientsList li {
    flex: 0 0 17%;
    margin: 0 3% 50px; }
    @media only screen and (max-width: 640px) {
      #clientsList li {
        flex: 0 0 46%;
        margin: 0 2% 40px; } }

#voiceSlide li {
  background-color: #fff; }
  #voiceSlide li .thum {
    margin-bottom: 15px; }
  #voiceSlide li .cont .companyName {
    border-bottom: 2px solid #111;
    padding: 10px; }
  #voiceSlide li .cont p {
    padding: 15px;
    text-align: left;
    font-size: 0.9em; }