@charset "UTF-8";
/**
 * TOP
 */
/* ==========================================================================
   title
   ========================================================================== */
#main {
  margin-bottom: 70px;
  background-image: url(/img/bg_main01.jpg), url(/img/bg_main01_b.jpg);
  background-position: 50% 0,50% 0;
  background-position: center, center top\9;
  background-repeat: no-repeat, repeat-x;
  height: 990px; }
  #main h1 {
    margin-bottom: 50px;
    padding-top: 20px;
    text-align: center; }
  #main #txt-main01 span {
    font-size: 130.769230769%;
    display: block;
    text-align: center;
    line-height: 1.6; }
  #main #txt-main02 span {
    height: 80px;
    margin-bottom: 300px;
    background: url(/img/img_maintxt02.png) no-repeat center top;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    display: block; }

#three-points {
  margin-top: -455px;
  margin-bottom: 110px; }
  #three-points .three-points-in {
    width: 310px;
    float: left;
    margin-right: 25px;
    padding: 1px;
    background-color: #fff;
    box-shadow: rgba(158, 158, 158, 0.65) 0px 0px 4px 1px;
    -webkit-box-shadow: rgba(158, 158, 158, 0.65) 0px 0px 4px 1px;
    -moz-box-shadow: rgba(158, 158, 158, 0.65) 0px 0px 4px 1px;
    box-sizing: border-box; }
    #three-points .three-points-in a:hover {
      opacity: 0.7; }
    #three-points .three-points-in .point {
      width: 308px;
      padding-top: 176px; }
      #three-points .three-points-in .point dl {
        padding: 20px 25px 25px;
        background-color: rgba(60, 170, 185, 0.9);
        color: #fff; }
        #three-points .three-points-in .point dl dt {
          margin-bottom: 15px;
          font-size: 130.769230769%;
          line-height: 1.2;
          text-align: center; }
          #three-points .three-points-in .point dl dt span.line-break {
            display: block; }
        #three-points .three-points-in .point dl dd {
          font-size: 107.692307692%; }
      #three-points .three-points-in .point dl {
        background-color: #51bac9\9; }
    #three-points .three-points-in #point01 {
      background: url(/img/bg_point02.jpg) no-repeat center top #cdc9c5; }
    #three-points .three-points-in #point02 {
      background: url(/img/bg_point01.jpg) no-repeat center top #b6b6b2; }
    #three-points .three-points-in #point03 {
      background: url(/img/bg_point03.jpg) no-repeat center top #818276; }
  #three-points .three-points-in:last-child {
    margin-right: 0; }

#case {
  margin-bottom: 90px; }
  #case p.txt {
    text-align: center; }
    #case p.txt span {
      display: block; }
  #case p.img {
    text-align: center; }
  #case ul {
    margin-top: 60px;
    text-align: center; }
    #case ul li {
      width: 455px;
      margin-right: 20px;
      padding-right: 19px;
      display: inline-block;
      vertical-align: top;
      border-right: 1px solid #bebebe;
      text-align: center; }
      #case ul li dl dt {
        margin: 7px 0 13px;
        text-align: center;
        font-size: 138.461538462%; }
        #case ul li dl dt a {
          text-decoration: underline; }
        #case ul li dl dt a:hover {
          text-decoration: none; }
      #case ul li dl dd {
        padding-bottom: 15px;
        font-size: 111.538461538%;
        line-height: 1.4; }
        #case ul li dl dd span {
          font-size: 123.076923077%;
          color: #0f93a5; }
    #case ul li:last-child {
      margin-right: 0;
      padding-right: 0;
      border-right: none; }
  #case .icon-arrow01 {
    width: 600px;
    margin: 50px auto 0;
    background-color: #fff;
    border: 1px solid #bebebe;
    text-align: center; }
    #case .icon-arrow01 a {
      color: #363636; }
      #case .icon-arrow01 a span {
        padding-top: 20px;
        padding-bottom: 20px;
        display: block;
        font-size: 184.615384615%;
        letter-spacing: 5px; }

#seminar {
  margin-bottom: 70px;
  background-color: #51bac9; }
  #seminar .contents {
    background: url(/img/img_seminar01.jpg) no-repeat right center; }
    #seminar .contents #seminar-in01 {
      width: 420px;
      padding-top: 15px;
      padding-bottom: 15px;
      color: #fff; }
      #seminar .contents #seminar-in01 h2 {
        margin-bottom: 10px;
        font-size: 630.769230769%;
        letter-spacing: 5px;
        font-weight: normal;
        line-height: 1.0; }
      #seminar .contents #seminar-in01 h3 {
        margin-bottom: 15px;
        font-size: 138.461538462%;
        font-weight: normal; }
      #seminar .contents #seminar-in01 ul {
        margin-bottom: 20px; }
      #seminar .contents #seminar-in01 .icon-arrow01 {
        background-color: #fff;
        display: inline-block;
        width: 190px;
        margin-right: 10px;
        text-align: center;
        color: #0f93a5; }
        #seminar .contents #seminar-in01 .icon-arrow01 a span {
          font-size: 123.076923077%;
          display: block;
          padding: 10px 0; }

#news {
  margin-bottom: 70px; }
  #news .tab-wrap {
    width: 100%;
    margin-bottom: 30px;
    border-bottom: 1px solid #51bac9; }
    #news .tab-wrap .tab {
      overflow: hidden;
      text-align: center;
      width: 90%;
      margin: 0 auto -1px; }
      #news .tab-wrap .tab li {
        width: 48%;
        display: inline-block;
        float: left;
        background-color: #FFF;
        margin-right: 4%;
        margin-bottom: 0;
        padding: 20px 0;
        border: 1px solid #bebebe;
        border-bottom: 1px solid #51bac9;
        box-sizing: border-box;
        font-size: 138.461538462%;
        font-weight: normal;
        cursor: pointer; }
      #news .tab-wrap .tab li.select {
        border: 1px solid #51bac9;
        border-bottom: 1px solid #fff;
        color: #0f93a5; }
      #news .tab-wrap .tab li:last-child {
        margin-right: 0; }
  #news .tab-content div {
    width: 100%; }
    #news .tab-content div ul li {
      background-color: #f8f8f8;
      padding: 20px; }
      #news .tab-content div ul li span.date {
        font-size: 123.076923077%;
        font-weight: bold;
        margin-right: 3%;
        width: 11%;
        display: inline-block;
        vertical-align: top; }
      #news .tab-content div ul li span.cate {
        font-size: 92.3076923077%;
        color: #fff;
        background-color: #51bac9;
        padding: 6px 0;
        margin-right: 3%;
        width: 12%;
        display: inline-block;
        text-align: center;
        vertical-align: top; }
      #news .tab-content div ul li span.news-content {
        width: 71%;
        display: inline-block;
        vertical-align: top; }
      #news .tab-content div ul li a {
        color: #363636;
        text-decoration: underline; }
        #news .tab-content div ul li a span.news-content {
          text-decoration: underline; }
      #news .tab-content div ul li a:hover {
        text-decoration: none; }
      #news .tab-content div ul li .external span.news-content:after {
        text-decoration: none !important;
        display: inline-block;
        margin-left: 5px;
        font-size: 76.9230769231%;
        color: #0f93a5; }
    #news .tab-content div ul li.bg-white {
      background-color: #fff; }
  #news .tab-content .hide {
    display: none; }
  #news .icon-arrow01 {
    width: 350px;
    margin: 20px 0 0 630px;
    background-color: #fff;
    border: 1px solid #bebebe;
    box-sizing: border-box;
    text-align: center; }
    #news .icon-arrow01 a {
      color: #363636; }
      #news .icon-arrow01 a span {
        padding-top: 15px;
        padding-bottom: 15px;
        display: block;
        font-size: 115.384615385%;
        letter-spacing: 2px;
        text-align: center; }

#sns-wrap #fb {
  background-color: #fff;
  width: 48%;
  float: left;
  text-align: center;
  font-size: 230.769230769%; }

#sns-wrap #company {
  width: 48%;
  float: right; }
  #sns-wrap #company #company-in {
    background-color: #f8f8f8;
    padding: 20px 30px; }
    #sns-wrap #company #company-in .icon-arrow01 {
      background-color: #51bac9;
      display: inline-block;
      width: 100%;
      margin: 15px auto 0;
      text-align: center;
      color: #fff; }
      #sns-wrap #company #company-in .icon-arrow01 a span {
        padding: 10px 0;
        display: block;
        font-size: 115.384615385%;
        color: #fff; }

@media screen and (max-width: 767px) {
  #main {
    margin-bottom: 10px;
    background: url(/img/bg_main01_sp.jpg) no-repeat center top;
    background-size: cover;
    height: 380px;
    /* #txt-main02  {
		} */ }
    #main h1 {
      width: 26%;
      margin: 0 auto 30px;
      padding-top: 10px; }
    #main #txt-main01 span {
      font-size: 100%; }
    #main #txt-main02 span {
      width: 95%;
      margin: 0 auto;
      background-size: contain;
      height: 60px; }
  #txt-main03 span {
    width: 85%;
    height: 45px;
    margin: 0 auto;
    background: url(/img/img_maintxt01.png) no-repeat center top;
    background-size: contain;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    display: block; }
  #txt-main04 span {
    width: 85%;
    height: 50px;
    margin: 0 auto;
    background: url(/img/img_maintxt02.png) no-repeat center top;
    background-size: contain;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    display: block; }
  #three-points {
    margin-top: 0;
    margin-bottom: 50px; }
    #three-points .three-points-in {
      width: 100%;
      margin-bottom: 10px;
      float: none; }
      #three-points .three-points-in .point {
        width: 100%;
        padding-top: 0; }
        #three-points .three-points-in .point dl {
          padding: 15px;
          margin-left: 35%; }
          #three-points .three-points-in .point dl dt {
            margin-bottom: 5px;
            font-size: 100%;
            line-height: 1.2;
            text-align: left; }
          #three-points .three-points-in .point dl dd {
            font-size: 84.6153846154%;
            line-height: 1.3; }
      #three-points .three-points-in #point01 {
        background: url(/img/bg_point02_sp.jpg) no-repeat left center #cdc9c5;
        background-size: cover; }
      #three-points .three-points-in #point02 {
        background: url(/img/bg_point01_sp.jpg) no-repeat left top #fff;
        background-size: cover; }
      #three-points .three-points-in #point03 {
        background: url(/img/bg_point03_sp.jpg) no-repeat left center #fff;
        background-size: cover; }
  #case {
    margin-bottom: 30px; }
    #case p.txt {
      text-align: left; }
      #case p.txt span {
        display: inline; }
    #case p.img {
      width: 20%;
      margin-right: 2%;
      display: inline-block; }
    #case ul {
      margin-top: 20px;
      text-align: left; }
      #case ul li {
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
        padding-right: 0;
        padding-bottom: 20px;
        display: block;
        vertical-align: top;
        border-right: none;
        border-bottom: 1px solid #bebebe;
        text-align: left; }
        #case ul li dl {
          width: 75%;
          display: inline-block;
          vertical-align: top; }
          #case ul li dl dt {
            margin: 0;
            text-align: left;
            font-size: 107.692307692%; }
          #case ul li dl dd {
            padding-bottom: 0;
            font-size: 92.3076923077%; }
            #case ul li dl dd span {
              font-size: 107.692307692%; }
    #case .icon-arrow01 {
      width: 100%;
      margin: 30px auto 70px;
      background-color: #fff;
      border: 1px solid #bebebe;
      text-align: center; }
      #case .icon-arrow01 a {
        color: #363636; }
        #case .icon-arrow01 a span {
          font-size: 115.384615385%;
          letter-spacing: 2spx; }
  #seminar .contents {
    background: none; }
    #seminar .contents #seminar-in01 {
      width: 100%; }
      #seminar .contents #seminar-in01 h2 {
        margin-bottom: 5px;
        font-size: 346.153846154%; }
      #seminar .contents #seminar-in01 h3 {
        margin-bottom: 5px;
        font-size: 100%; }
      #seminar .contents #seminar-in01 ul {
        margin-bottom: 10px; }
      #seminar .contents #seminar-in01 .icon-arrow01 {
        background-color: #fff;
        display: block;
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
        text-align: center;
        color: #0f93a5; }
        #seminar .contents #seminar-in01 .icon-arrow01 a span {
          padding: 15px 0;
          font-size: 115.384615385%; }
  #news .tab-wrap {
    margin-bottom: 15px; }
    #news .tab-wrap .tab li {
      padding: 9px 0;
      font-size: 84.6153846154%; }
  #news .tab-content div ul li {
    padding: 15px; }
    #news .tab-content div ul li span.date {
      font-size: 92.3076923077%;
      margin-right: 15px;
      width: 23%; }
    #news .tab-content div ul li span.cate {
      font-size: 76.9230769231%;
      margin-right: 0;
      padding: 3px 0;
      width: 30%;
      text-align: center; }
    #news .tab-content div ul li span.news-content {
      width: 100%;
      margin-top: 5px;
      display: block;
      line-height: 1.4; }
  #news .icon-arrow01 {
    width: 100%;
    margin: 20px 0 0; }
    #news .icon-arrow01 a span {
      font-size: 115.384615385%;
      letter-spacing: 2px; }
  #sns-wrap #fb {
    height: 310px;
    margin-bottom: 15px;
    width: 100%;
    float: none; }
    #sns-wrap #fb .fb_iframe_widget,
    #sns-wrap #fb .fb_iframe_widget span,
    #sns-wrap #fb .fb_iframe_widget iframe[style] {
      width: 100% !important; }
  #sns-wrap #company {
    width: 100%;
    float: none; }
    #sns-wrap #company #company-in {
      padding: 20px;
      font-size: 92.3076923077%;
      line-height: 1.4; }
      #sns-wrap #company #company-in .icon-arrow01 a span {
        font-size: 100%; } }

@media only screen and (max-device-width: 480px) and (orientation: landscape) {
  #three-points .three-points-in #point01 {
    background: url(/img/bg_point01_sp.jpg) no-repeat left top #cdc9c5;
    background-size: contain; }
  #three-points .three-points-in #point02 {
    background: url(/img/bg_point02_sp.jpg) no-repeat left center #fff;
    background-size: contain; }
  #three-points .three-points-in #point03 {
    background: url(/img/bg_point03_sp.jpg) no-repeat left center #fff;
    background-size: contain; } }

/* ==========================================================================
   撮影ディレクション
   ========================================================================== */
.btn-shooting {
  text-align: center; }
  .btn-shooting a:hover {
    opacity: 0.7; }

.btn-shooting-area {
  margin-bottom: 90px; }

@media screen and (max-width: 767px) {
  .btn-shooting-area {
    margin-bottom: 30px; }
  #case .icon-arrow01 {
    margin-bottom: 30px; } }

/* ==========================================================================
   セミナー・スクール
   ========================================================================== */
#semi-school-wrap {
  margin-bottom: 90px; }
  #semi-school-wrap .sem-area {
    width: 50%;
    min-height: 380px;
    background-color: #51bac9;
    position: relative;
    float: left;
    padding-bottom: 30px; }
  #semi-school-wrap .school-area {
    width: 50%;
    min-height: 380px;
    background-color: #ffa533;
    position: relative;
    float: right;
    padding-bottom: 30px; }
  #semi-school-wrap .semi-school-inner {
    width: 420px;
    position: absolute;
    right: 60px;
    top: 0; }
    #semi-school-wrap .semi-school-inner h2 {
      margin-bottom: 20px;
      padding-top: 20px;
      font-size: 461.538461538%;
      letter-spacing: 0;
      font-weight: normal;
      line-height: 1.0;
      text-align: center;
      color: #fff; }
    #semi-school-wrap .semi-school-inner .icon-arrow01 {
      background-color: #fff;
      display: inline-block;
      width: 270px;
      margin: 20px 85px 0 85px;
      text-align: center;
      color: #0f93a5; }
      #semi-school-wrap .semi-school-inner .icon-arrow01 a span {
        font-size: 115.384615385%;
        display: block;
        padding: 15px 0; }
    #semi-school-wrap .semi-school-inner.school-inner {
      left: 60px; }
      #semi-school-wrap .semi-school-inner.school-inner .icon-arrow01 a {
        color: #ffa533 !important; }

@media screen and (max-width: 767px) {
  #semi-school-wrap {
    margin-bottom: 40px; }
    #semi-school-wrap .sem-area {
      width: 50%;
      min-height: inherit;
      position: inherit;
      padding-bottom: 15px; }
    #semi-school-wrap .school-area {
      width: 50%;
      min-height: inherit;
      position: inherit;
      padding-bottom: 15px; }
    #semi-school-wrap .semi-school-inner {
      width: 100%;
      margin: 0 auto;
      position: inherit;
      right: inherit;
      top: inherit; }
      #semi-school-wrap .semi-school-inner h2 {
        font-size: 153.846153846%;
        padding-top: 10px;
        margin-bottom: 7px; }
      #semi-school-wrap .semi-school-inner img {
        width: 78%;
        height: auto;
        margin-right: 11%;
        margin-left: 11%; }
      #semi-school-wrap .semi-school-inner .icon-arrow01 {
        width: 80%;
        margin: 7px 10% 0 10%; }
        #semi-school-wrap .semi-school-inner .icon-arrow01 a span {
          font-size: 70%;
          padding: 4px 0; } }

.lead-svg {
  text-align: center; }
  .lead-svg svg {
    width: 630px;
    height: 54px;
    margin: 5px auto 20px; }

path {
  fill: none;
  stroke: #0bbfd8;
  /*線の色を指定する*/
  stroke-dasharray: 2000;
  /*線の間隔を指定する*/
  stroke-dashoffset: 0;
  /*線の位置を指定する(IEは効かない属性)*/
  stroke-width: 1;
  /*線の太さを指定する*/
  -webkit-animation: hello 3s ease-in forwards;
  animation: hello 3s ease-in forwards; }

@-webkit-keyframes hello {
  0% {
    stroke-dashoffset: 2000;
    fill: transparent;
    /*透過*/ }
  50% {
    fill: transparent;
    /*透過*/ }
  100% {
    stroke-dashoffset: 0;
    fill: #333; } }

@keyframes hello {
  0% {
    stroke-dashoffset: 2000;
    fill: transparent;
    /*透過*/ }
  50% {
    fill: transparent;
    /*透過*/ }
  100% {
    stroke-dashoffset: 0;
    fill: #0bbfd8; } }

@media screen and (max-width: 767px) {
  .lead-svg svg {
    width: 90%;
    height: auto;
    margin: 5px auto 10px; } }