@charset "UTF-8";
/* ==================================================================

	index.html

=====================================================================*/
/*-----------------------------------------------------
Contents（PC 960px - 769px）
-------------------------------------------------------*/
@media all and (min-width: 769px) {
  body {
    overflow-x: hidden;
    background: url(../images/top/pct-mv.jpg) top center no-repeat;
    background-attachment: fixed;
    background-size: cover; }
  /* Header
-----------------------------------*/
  #Header {
    background: none;
    background: url(../images/common/header/bg-top.png) repeat-x; }
    #Header .inner {
      position: relative; }
      #Header .inner h1 a {
        width: 380px;
        height: 68px;
        background: url(../images/common/header/logo-top.png); }
      #Header .inner .menu span {
        background: url(../images/common/header/btn-menu-top.png); }
  /* .topSection
-----------------------------------*/
  .topSection {
    position: relative;
    height: 700px; }
    .topSection .lead {
      text-indent: -9999px;
      width: 821px;
      height: 407px;
      background: url(../images/top/title-mv.png);
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
    .topSection .arrow a {
      text-indent: -9999px;
      width: 74px;
      height: 63px;
      background: url(../images/top/title-mv-arrow.png);
      position: absolute;
      bottom: 10%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
      .topSection .arrow a:hover {
        opacity: 1; }
  /* .snapshotSection
-----------------------------------*/
  #pSnapshot {
    display: block;
    position: relative;
    top: 0px; }
  .snapshotSection {
    width: 100%;
    padding: 65px 0 40px;
    background-color: #fff; }
    .snapshotSection .title {
      width: 176px;
      font-size: 24px;
      line-height: 1.1;
      text-align: center;
      color: #0068b4;
      margin: 0 auto 48px;
      padding-bottom: 8px;
      border-bottom: 1px solid #00b2e8; }
    .snapshotSection .subtitle {
      height: 131px;
      text-indent: -9999px;
      margin: 0 auto 25px; }
      .snapshotSection .subtitle.t01 {
        width: 291px;
        background: url(../images/top/title-01.png); }
      .snapshotSection .subtitle.t02 {
        width: 687px;
        background: url(../images/top/title-02.png); }
      .snapshotSection .subtitle.t03 {
        width: 502px;
        height: 129px;
        background: url(../images/top/title-03.png); }
      .snapshotSection .subtitle.t04 {
        width: 570px;
        height: 140px;
        background: url(../images/top/title-04.png); }
      .snapshotSection .subtitle.t05 {
        width: 621px;
        height: 145px;
        background: url(../images/top/title-05.png); }
    .snapshotSection .text {
      width: 768px;
      text-align: center;
      font-size: 14px;
      line-height: 1.8;
      padding-bottom: 60px;
      background: url(../images/top/bg-snapshot.png) bottom center no-repeat;
      margin: 0 auto 10px; }
      .snapshotSection .text small {
        font-size: 12px; }
        .snapshotSection .text small:first-letter {
          color: #0068b4; }
  /* .contentsSection
-----------------------------------*/
  .contentsSection {
    width: 100%;
    padding: 75px 0 0;
    background-color: #f2f2f2; }
    .contentsSection .title {
      width: 176px;
      font-size: 24px;
      line-height: 1.1;
      text-align: center;
      color: #0068b4;
      margin: 0 auto 48px;
      padding-bottom: 8px;
      border-bottom: 1px solid #00b2e8; }
    .contentsSection .text {
      width: 600px;
      font-size: 14px;
      line-height: 1.8;
      color: #0068b4;
      margin: 0 auto 20px; }
    .contentsSection ul {
      width: 100%;
      overflow: hidden; }
      .contentsSection ul li {
        float: left;
        overflow: hidden; }
        .contentsSection ul li.w75 {
          width: 75%; }
        .contentsSection ul li.w50 {
          width: 50%; }
        .contentsSection ul li.w25 {
          width: 25%; }
        .contentsSection ul li .pct {
          display: block; }
          .contentsSection ul li .pct img {
            width: 100%;
            height: auto;
            -webkit-transition: all 0.25s ease;
            -moz-transition: all 0.25s ease;
            -ms-transition: all 0.25s ease; }
        .contentsSection ul li a {
          position: relative;
          display: block; }
          .contentsSection ul li a:hover {
            opacity: 0.8; }
          .contentsSection ul li a .cNumber {
            display: block;
            position: absolute;
            z-index: 10;
            top: 10px;
            left: 10px; }
          .contentsSection ul li a .cTitle {
            display: block;
            position: absolute;
            z-index: 20;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transition: .5s;
            transform: scale(0, 0);
            -webkit-transform: scale(0, 0); }
            .contentsSection ul li a .cTitle.appear {
              transform: scale(1, 1);
              -webkit-transform: scale(1, 1); }
            .contentsSection ul li a .cTitle img {
              position: relative;
              top: 50%;
              left: 50%;
              width: auto;
              height: auto;
              -webkit-transform: translate(-50%, -50%);
              -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%); }
          .contentsSection ul li a:after {
            content: "";
            position: absolute;
            bottom: 10px;
            right: 10px;
            width: 36px;
            height: 36px;
            background: url(../images/top/bg-link.png); }
          .contentsSection ul li a:hover .pct img {
            -moz-transform: scale(1.2);
            -o-transform: scale(1.2);
            -ms-transform: scale(1.2);
            transform: scale(1.2);
            -webkit-transition: all 0.25s ease;
            -moz-transition: all 0.25s ease;
            -ms-transition: all 0.25s ease; } }

@media all and (max-width: 1000px) and (min-width: 769px) {
  .topSection .lead {
    text-indent: -9999px;
    width: 80%;
    height: 70%;
    background: url(../images/top/title-mv.png) center top no-repeat;
    background-size: contain; }
  .contentsSection ul li a .cTitle img {
    zoom: 0.7; } }

/*-----------------------------------------------------
Contents（SP 768px - ）
-------------------------------------------------------*/
@media all and (max-width: 768px) {
  /* .topSection
-----------------------------------*/
  .topSection {
    position: relative;
    height: 322px;
    background: url(../images/sp/top/pct-mv.jpg) center top no-repeat;
    background-size: cover; }
    .topSection .lead {
      text-indent: -9999px;
      width: 320px;
      height: 170px;
      background: url(../images/sp/top/title-mv.png);
      background-size: 320px 170px;
      position: absolute;
      top: 60%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
    .topSection .arrow a {
      text-indent: -9999px;
      width: 37px;
      height: 32px;
      background: url(../images/sp/top/title-mv-arrow.png);
      background-size: 37px 32px;
      position: absolute;
      bottom: 5%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
  /* .snapshotSection
-----------------------------------*/
  #pSnapshot {
    display: block;
    position: relative;
    top: -50px; }
  .snapshotSection {
    width: 100%;
    padding: 28px 0 40px;
    background-color: #fff; }
    .snapshotSection .title {
      width: 132px;
      font-size: 1.8rem;
      line-height: 1.1;
      text-align: center;
      color: #0068b4;
      margin: 0 auto 17px;
      padding-bottom: 5px;
      border-bottom: 1px solid #00b2e8; }
    .snapshotSection .subtitle {
      height: 131px;
      text-indent: -9999px;
      margin: 0 auto 25px; }
      .snapshotSection .subtitle.t01 {
        width: 129px;
        height: 75px;
        background: url(../images/sp/top/title-01.png);
        background-size: 129px 75px; }
      .snapshotSection .subtitle.t02 {
        width: 286px;
        height: 76px;
        background: url(../images/sp/top/title-02.png);
        background-size: 286px 76px; }
      .snapshotSection .subtitle.t03 {
        width: 220px;
        height: 75px;
        background: url(../images/sp/top/title-03.png);
        background-size: 220px 75px; }
      .snapshotSection .subtitle.t04 {
        width: 252px;
        height: 81px;
        background: url(../images/sp/top/title-04.png);
        background-size: 252px 81px; }
      .snapshotSection .subtitle.t05 {
        width: 259px;
        height: 82px;
        background: url(../images/sp/top/title-05.png);
        background-size: 259px 82px; }
    .snapshotSection .text {
      text-align: left;
      font-size: 1.3rem;
      line-height: 1.76;
      padding: 0 20px 30px;
      background: url(../images/top/bg-snapshot.png) bottom center repeat-x;
      background-size: 5px 20px; }
      .snapshotSection .text small {
        display: block;
        padding-top: 5px;
        font-size: 1.2rem; }
        .snapshotSection .text small:first-letter {
          color: #0068b4; }
      .snapshotSection .text br {
        display: none; }
  /* .contentsSection
-----------------------------------*/
  .contentsSection {
    width: 100%;
    padding: 25px 0 0;
    background-color: #f2f2f2; }
    .contentsSection .title {
      width: 130px;
      font-size: 1.8rem;
      line-height: 1.1;
      text-align: center;
      color: #0068b4;
      margin: 0 auto 20px;
      padding-bottom: 2px;
      border-bottom: 1px solid #00b2e8; }
    .contentsSection .text {
      font-size: 1.3rem;
      line-height: 1.76;
      color: #0068b4;
      margin: 0 20px 13px; }
    .contentsSection ul {
      width: 100%;
      overflow: hidden; }
      .contentsSection ul li {
        float: left;
        overflow: hidden;
        width: 29.68%; }
        .contentsSection ul li.link {
          width: 70.31%; }
        .contentsSection ul li .pct {
          display: block; }
          .contentsSection ul li .pct img {
            width: 100%;
            height: auto;
            -webkit-transition: all 0.25s ease;
            -moz-transition: all 0.25s ease;
            -ms-transition: all 0.25s ease; }
        .contentsSection ul li a {
          position: relative;
          display: block; }
          .contentsSection ul li a .cTitle {
            display: block;
            position: absolute;
            z-index: 20;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transition: .5s;
            transform: scale(0, 0);
            -webkit-transform: scale(0, 0); }
            .contentsSection ul li a .cTitle.appear {
              transform: scale(1, 1);
              -webkit-transform: scale(1, 1); }
            .contentsSection ul li a .cTitle img {
              position: relative;
              width: 100%;
              height: 100%; } }