@charset "UTF-8";
/* css reset
------------------------ */
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
body, html {
  line-height: 1;
  font-family: "Noto Sans Japanese","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo;
  background: #eef6fc;
  /* Old browsers */
  background: -moz-linear-gradient(left, #eef6fc 0%, #f9fbfe 50%, #eef6fc 100%);
  background: -webkit-linear-gradient(left, #eef6fc 0%, #f9fbfe 50%, #eef6fc 100%);
  background: linear-gradient(to right, #eef6fc 0%, #f9fbfe 50%, #eef6fc 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eef6fc', endColorstr='#eef6fc',GradientType=1 );
  letter-spacing: 1px; }

html, body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, figure {
  margin: 0;
  padding: 0;
  font-weight: normal; }

ul {
  list-style-type: none; }

p {
  line-height: 1.7; }

a {
  color: inherit;
  text-decoration: none; }

.wrap {
  width: 100%;
  margin: 0 auto;
  position: relative;
  overflow-x: hidden;
  position: relative; }
  @media screen and (min-width: 769px) {
    .wrap {
      min-width: 1100px; } }

img {
  width: 100%;
  height: auto;
  vertical-align: bottom; }
  @media screen and (max-width: 768px) {
    img {
      width: 100%; } }

section {
  overflow: hidden;
  width: 100%; }

.pc-only {
  display: block !important; }
  @media screen and (max-width: 768px) {
    .pc-only {
      display: none !important; } }

.sp-only {
  display: none !important; }
  @media screen and (max-width: 768px) {
    .sp-only {
      display: block !important; } }

/* fonts
-------------------------------------- */
/* header
-------------------------------------- */
@media screen and (min-width: 769px) {
  header {
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 99; } }

header .header-inner {
  max-width: 1100px;
  margin: 0 auto;
  overflow: hidden; }
  @media screen and (max-width: 768px) {
    header .header-inner {
      width: 94.0%; } }
  header .header-inner h1 {
    width: 205px;
    margin-top: 60px;
    float: left;
    margin-bottom: 25px; }
    @media screen and (max-width: 768px) {
      header .header-inner h1 {
        width: 150px;
        margin-top: 10px; } }
  header .header-inner nav {
    width: 871px;
    height: 73px;
    float: right;
    margin-top: 45px; }
    @media screen and (max-width: 768px) {
      header .header-inner nav {
        height: auto;
        width: 100%;
        position: absolute;
        top: 45px;
        left: 0;
        z-index: 99;
        margin-top: 0;
        display: none; } }
    header .header-inner nav ul {
      overflow: hidden;
      background: url("../img/bg_nav.png") no-repeat center top;
      background-size: 100% auto; }
      @media screen and (max-width: 768px) {
        header .header-inner nav ul {
          background: rgba(255, 255, 255, 0.95);
          padding: 10px 0 10px; } }
      header .header-inner nav ul li {
        float: left;
        padding: 28px 0; }
        @media screen and (max-width: 768px) {
          header .header-inner nav ul li {
            float: none;
            width: 100%;
            padding: 18px 0; } }
        header .header-inner nav ul li a {
          color: #13202f;
          font-size: 14px; }
          @media screen and (max-width: 768px) {
            header .header-inner nav ul li a {
              font-size: 14px;
              text-align: center;
              display: block; } }
        @media screen and (min-width: 769px) {
          header .header-inner nav ul li:nth-child(1) {
            margin-left: 55px; } }
        @media screen and (min-width: 769px) {
          header .header-inner nav ul li + li {
            margin-left: 60px; } }

/* navigation
-------------------------------------- */
.sp-menu {
  float: right; }

.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box; }

.menu-trigger {
  position: relative;
  width: 25px;
  height: 28px;
  margin: 12px 0 0 5px;
  float: left; }
  @media screen and (min-width: 769px) {
    .menu-trigger {
      display: none; } }

@media screen and (min-width: 769px) {
  .menu-trigger {
    height: 28px; } }

.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #000; }

.menu-trigger span:nth-of-type(1) {
  top: 0; }

.menu-trigger span:nth-of-type(2) {
  top: 9px; }

@media screen and (min-width: 769px) {
  .menu-trigger span:nth-of-type(2) {
    top: 12px; } }

.menu-trigger span:nth-of-type(3) {
  bottom: 8px; }

.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(8px) rotate(-45deg);
  transform: translateY(8px) rotate(-45deg); }

@media screen and (min-width: 769px) {
  .menu-trigger.active span:nth-of-type(1) {
    -webkit-transform: translateY(13px) rotate(-45deg);
    transform: translateY(13px) rotate(-45deg); } }

.menu-trigger.active span:nth-of-type(2) {
  left: 50%;
  opacity: 0;
  -webkit-animation: active-menu-bar02 .8s forwards;
  animation: active-menu-bar02 .8s forwards; }

@-webkit-keyframes active-menu-bar02 {
  100% {
    height: 0; } }

@keyframes active-menu-bar02 {
  100% {
    height: 0; } }

.menu-trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-10px) rotate(45deg);
  transform: translateY(-10px) rotate(45deg); }

/* main-area
-------------------------------------- */
.area-main {
  max-width: 1100px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  box-sizing: border-box; }

@media screen and (min-width: 769px) {
  .area-main {
    height: 100vh;
    min-height: 780px;
    padding-top: 139px; } }
  @media screen and (max-width: 768px) {
    .area-main {
      width: 94.0%; } }
  @media screen and (min-width: 769px) {
    .area-main .clm-inner {
      position: absolute;
      width: 100%;
      top: 390px;
      margin-top: 40px;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%); } }
  .area-main .btn-scroll {
    width: 68px;
    height: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    overflow: hidden;
    cursor: pointer; }
    @media screen and (max-width: 768px) {
      .area-main .btn-scroll {
        width: 16.0%;
        padding-top: 15%;
        height: auto;
        overflow: hidden; }
        .area-main .btn-scroll img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: auto; } }
.area-main .txt-inner {
	width: 486px;
	float: left;
    margin-top: 40px; }
    @media screen and (max-width: 768px) {
      .area-main .txt-inner {
        width: 100%;
        float: none;
        margin-top: -50px;
        padding-bottom: 50px; } }
    @media screen and (max-width: 768px) {
      .area-main .txt-inner .txt01 {
        width: 100%; } }
    .area-main .txt-inner .txt02 {
      font-size: 16px;
      color: #13202f;
      line-height: 2.0;
      margin-top: 35px; }
      @media screen and (max-width: 768px) {
        .area-main .txt-inner .txt02 {
          font-size: 3.73333vw;
          margin-top: 5.0%;
          margin-bottom: 10.0%; } }
.area-main .items-inner {
	width: 550px;
    float: right;
    margin-top: 55px;
    margin-bottom: 150px; 
    height: 400px;
    background: url("../img/main_img01.jpg") no-repeat center top;
    background-size: 550px; }
    @media screen and (max-width: 768px) {
      .area-main .items-inner {
        width: 100%;
        height: 100%;
        float: none;
        margin-top: 0;
        margin-bottom: 0;
        background-size: 100% !important; } }

.area-main .items-inner .img01 {
	width: 547px; }
	@media screen and (max-width: 768px) {
		.area-main .items-inner .img01 {
          width: 100%; } }
 .area-main .items-inner .txt03 {
	 width: 100%;
	 margin-top: 12px; }
	@media screen and (max-width: 768px) {
		.area-main .items-inner .txt03 {
          margin-top: 3.0%;
          margin-bottom: 13.0%; } }

/* area-cnv
-------------------------------------- */
.area-cnv {
  overflow: hidden;
  padding: 0; }
	@media screen and (max-width: 768px) {
		.area-cnv {
			padding-top: 20px !important; 
			padding-bottom: 10px !important; } }
.area-cnv .btn01 {
    width: 100%;
    height: 100%;
    margin: 260px 0 0 0;
    overflow: hidden; 
    padding: 20px 0 5px 0;}
    @media screen and (min-width: 769px) {
		.area-cnv .btn01 {
			position: relative; } }
    @media screen and (max-width: 768px) {
		.area-cnv .btn01 {
			width: 100%;
			height: auto;
			margin: 0 10px 0 0; 
			background: #FFF0;
      padding-top: 20%; } }
    @media screen and (max-width: 600px){
      .area-cnv .btn01{
        padding-top: 17%;
      } }

.area-cnv .form-inner{
	width: 100%;
	padding: 20px 0 10px;
	margin: 10px 0;
	height: 80px;
	background-color: #1a2f48;
	opacity: 0.9; }
    @media screen and (max-width: 768px) {
			.area-cnv .form-inner {
			width: 90%;
			padding: 3% 5% 0% 5%;
			margin: 29% auto 1%;
			height: 100%;
      opacity: 1; }}
.area-cnv .btn01 .btn-txt01 {
	color: #fff;
	text-align: center;
	margin-top: 0;
	margin-bottom: 2%;
	position: relative;
	pointer-events: none;
	z-index: 2;
	line-height: 1.6;
	font-size: 16px;}
    @media (orientation: landscape) and (max-width: 767px){
		.area-cnv .btn01 .btn-txt01 {
			margin-left: 0;
			margin-top: 4%;
			font-size: 3.26667vw;
			margin-bottom: 4%; } }
    @media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) {
		.area-cnv .btn01 .btn-txt01 {
			background-size: 70%; } }
.area-cnv .btn01 form {
	text-align: center; }
	@media screen and (max-width: 768px) {
		.area-cnv .btn01 form {
			padding-top: 2.0%;
			padding-bottom: 3.0%;
			position: relative; } }
    @media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) {
		.area-cnv .btn01 form {
			margin-top: 7%;}}
.area-cnv .btn01 form label {
	color: #fff;
	position: relative;
	z-index: 2;
	pointer-events: none;
	margin-right: 10px; }
	@media screen and (max-width: 768px) {
		.area-cnv .btn01 form label {
			display: block;
            font-size: 16px;
            font-size: 4.26667vw;
            margin: 2.0% auto 3.0%;
            vertical-align: middle; } }
.area-cnv .btn01 form label span {
	background: #4cabe5;
	color: #fff;
	font-size: 13px;
	padding: 0 3px;
	margin-left: 10px;
	margin-right: 5px;
	vertical-align: baseline; }
	@media screen and (max-width: 768px) {
		.area-cnv .btn01 form label span {
			font-size: 14px;
			font-size: 3.73333vw; } }        

.area-cnv .btn01 form input:not(.btn-success) {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-size: 15px;
	box-shadow: 0;
	outline: none;
	box-sizing: border-box;
	vertical-align: middle; 
	width: 250px;}
	@media screen and (max-width: 768px) {
		.area-cnv .btn01 form input:not(.btn-success) {
			width: 80%;
            font-size: 14px;
            font-size: 3.73333vw;
            margin-bottom: 2.0%;
            margin-right: 2%;
            padding: 1.5% 2.0%; } }
	@media screen and (max-width: 768px) {
		.area-cnv .btn01 form .npro_itemvalue {
			width: 100% !important; } }
.area-cnv .btn01 form .form-control {
	width: 283px;
	border: solid 1px #e6e6e6;
	box-sizing: border-box;
	padding: 3px 5px;
	border-radius: 3px; }
	@media screen and (max-width: 768px) {
		.area-cnv .btn01 form .form-control {
			width: 70% !important;
            font-size: 14px;
            font-size: 3.73333vw;
            margin-bottom: 2.0%;
            padding: 1.5% 2.0%;
            vertical-align: middle;
            display: inline-block;
            margin-top: 1.5%; } }
.area-cnv .btn01 form .btn-success {
	width: 70px;
	padding: 4px 0 6px;
	font-weight: bold;
	letter-spacing: 3px;
	display: inline-block;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: #ffdf62;
	color: #13202f;
	border: 0;
	font-size: 13px;
	cursor: pointer;
	border-radius: 3px; }
.area-cnv .btn01 form .btn-success:active {
    background: #ffcf16;
}
	@media screen and (max-width: 768px) {
		.area-cnv .btn01 form .btn-success {
			font-size: 12px;
            font-size: 3.2vw;
            width: 15.0%;
            text-align: center;
            letter-spacing: 1px;
            vertical-align: middle;
            padding: 3px 0; }}

/* area-contact
-------------------------------------- */
.area-contact {
    background: #13202f;
    overflow: hidden;
    padding: 50px 0 0;
}
.contact-inner {
    max-width: 1100px;
    margin: 70px auto 0;
    position: relative; }
    @media screen and (max-width: 768px) {
      .contact-inner {
        margin-top: 10.0%; }}
.contact-items {
  display: flex;
  justify-content: space-between;
  margin:40px 0 0 30px;
  padding-top: 30px;}
	@media screen and (max-width: 768px) {
      .contact-items {
        flex-direction: column;
        padding-top: 2%;
        padding-bottom: 30px;
        width: 96%;
        margin-left: 3%; }}
.contact-inner h2.ttl3 {
    margin: -40px auto 0;
    text-align: center;
    color:#FFF;
    font-size: 25px;
    letter-spacing: 3px; }
    @media screen and (max-width: 768px) {
      .contact-inner h2.ttl3 {
        font-size: 20px;
        font-size: 5.33333vw; } }
.contact-inner h2.ttl3:after {
        content: "Contact"; }  
.contact-inner h2.ttl3:after {
    color: #abd8f4;
    font-weight: bold;
    font-size: 15px;
    margin-left: 15px;
    vertical-align: bottom;
    display: block;
    margin-top: 1em;
    letter-spacing: 0.1em; }
    @media screen and (max-width: 768px) {
        .contact-inner h2.ttl3:after {
          font-size: 12px;
          font-size: 3.2vw;
          margin-left: 3.0%; } }
.contact-items .item2 {
  width: 27%;
  background:#FFF;
  padding: 20px;
  margin-right: 20px;
  margin-bottom: 50px;
  border-radius: 0;
}
.contact-items .item-img {
  padding: 0;
  width: 30%;
  text-align: center;
  margin: 20px auto;
}
.contact-items .tem-body {
  padding: 0;
  margin-top: 1em;
}
.contact-items .item-title {
  font-size: 4.8vw;
  font-weight: 700;
  margin-bottom: 1em;
  line-height: 1.5em;
  text-align: center;
  float: left;
  width: 83%;}
  @media screen and (max-width: 768px) {
    .contact-items .item-title {
        margin: 0 0 8px; }}
.contact-items .item-body p {
  font-size: 16px;
  font-weight: 400;
  color: #13202f;
  line-height: 1.75em;
  text-align: center;
}
.contact-items .caption { font-size: 80%; color:#999;}

.contact-items .form-inner {
        width: 100%;
        padding: 15px 0 5px 0;
        margin: 20px 0 0 0;
        height: 110px;
        background-color: #1a2f48;
        opacity: 0.9;
        border-radius: 18px; }
        @media screen and (max-width: 768px) {
            .contact-items .form-inner {
                padding: 10px 0 5%;
                background-size: 95%;
                height: 100%;
                width: 95%;
                margin: 0 auto; }}
.contact-items .form-control {
        width: 260px;
        font-size: 90%;
        border: solid 1px #e6e6e6;
        box-sizing: border-box;
        padding: 3px 5px;
        border-radius: 3px; }
.contact-items form {
      text-align: center; }
      @media screen and (max-width: 768px) {
   .contact-items form {
          padding-top: 3.0%;
          padding-bottom: 0;
          position: relative; } }
      
  .contact-items form label {
        color: #fff;
        position: relative;
        z-index: 2;
        pointer-events: none;
        margin-right: 10px; }	
        @media screen and (max-width: 768px) {
      .contact-items form label {
            display: block;
            font-size: 4.6875vw;
            margin: 1.0% auto 1.0%;
            vertical-align: middle; } }
            
    .contact-items form label span {
          background: #4cabe5;
          color: #fff;
          font-size: 13px;
          padding: 0 3px;
          margin-left: 10px;
          margin-right: 5px;
          vertical-align: baseline; }
          @media screen and (max-width: 768px) {
            .contact-items form label span {
              font-size: 14px;
              font-size: 3.73333vw; } }
          @media screen and (max-width: 768px) {
            .contact-items .item2 {
                width: 100%;
                background:#FFF;
                padding: 20px 0px 30px;
                margin: 0 0 20px 0;}
            .contact-items .item-img {
                padding: 0;
                margin-bottom: 1em;}
            .contact-items .item-body {
                padding: 0;}
            .contact-items .item-title {
                margin: 0 0 8px;
                font-weight: 700;
                margin-bottom: 1em;
                line-height: 1.5em;
                text-align: center;}
            .contact-items .item-body p {
                font-size: 3.73333vw;
                font-weight: 400;
                color: #13202f;
                line-height: 1.75em;
                margin-bottom: 3%;}}
.contact-items .btn-area {
     margin: 3em auto 0;
     text-align: center;}
     @media screen and (max-width: 768px) {
        .contact-items .btn-area {
            margin: 1em auto 0; }}
            
.contact-items .btn-area .btn-square-pop {
  position: relative;
  display: inline-block;
  padding: 1.5em 2.5em;
  text-decoration: none;
  color: #FFF;
  background: #4dabe5;
  border-bottom: solid 5px #375F8E8F;
  border-radius: 18px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-size: 120%;
  letter-spacing: .15em;}
  @media screen and (max-width: 768px) {
    .contact-items .btn-area .btn-square-pop {
          font-size: 4.21875vw; }}
.contact-items .btn-area .btn-square-pop:active {
  background: #104b71;
  border-bottom: solid 5px #4dabe5;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

/* area-cnv
-------------------------------------- */
.contact-items {
  overflow: hidden;
  padding: 0; }
  
  @media screen and (max-width: 768px) {
    .contact-items {
      padding-top: 10px; 
      margin-left: 2%;
      padding-bottom: 10px !important; } }

.contact-items .btn01 {
    width: 100%;
    height: 100%;
    margin: 230px 0 0 0;
    /*background-size: 550px 160px;*/
    overflow: hidden; 
    padding: 15px 0 0 0;
    background: #FFFFFF94;}
    @media screen and (min-width: 769px) {
      .contact-items .btn01 {
        position: relative; } }
    @media screen and (max-width: 768px) {
      .contact-items .btn01 {
        width: 100%;
        height: auto;
        margin: 0 10px 0 0; 
        background: #FFF0; } }
    .contact-items .btn01 .btn-txt01 {
      color: #fff0;
      text-align: center;
      margin-top: 10px;
      margin-bottom: 15px;
      position: relative;
      pointer-events: none;
      z-index: 2;
      line-height: 1.6;
      font-size: 17px;
      background-image: url(../img/main_txt01-1.png);
      background-size: 60%;
      background-repeat: no-repeat;
      background-position: center center;}
      @media screen and (max-width: 768px) {
        .contact-items .btn01 .btn-txt01 {
          margin-left: 0;
          margin-top: 4.0%;
          background-image: url(../img/main_txt01-2.png);
          background-size: 80%; } }
          

.contact-items form label span {
	background: #4cabe5;
	color: #fff;
	font-size: 13px;
	padding: 0 3px;
	margin-left: 10px;
	margin-right: 5px;
	vertical-align: baseline; }
	@media screen and (max-width: 768px) {
		.contact-items form label span {
			font-size: 14px;
			font-size: 3.73333vw; } }
.contact-items form input:not(.btn-success) {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-size: 15px;
	box-shadow: 0;
	outline: none;
	box-sizing: border-box;
	vertical-align: middle; 
	width: 250px;}
	@media screen and (max-width: 768px) {
		.contact-items form input:not(.btn-success) {
			width: 86% !important;
            font-size: 3.73333vw;
            margin-bottom: 3.0%;
            padding: 1.5% 2.0%;
            margin-top: 2%; } }
	@media screen and (max-width: 768px) {
		.contact-items form .npro_itemvalue {
			width: 100% !important; } }
.contact-items  .form-control {
	width: 283px;
	border: solid 1px #e6e6e6;
	box-sizing: border-box;
	padding: 3px 5px;
	border-radius: 3px;
	margin-top: 5%; }
	@media screen and (max-width: 768px) {
		.contact-items .form-control {
			width: 70% !important;
            font-size: 3.73333vw;
            margin-bottom: 2.0%;
            padding: 1.5% 2.0%;
            vertical-align: middle;
            display: inline-block;
            margin-top: 0%; } }

.contact-items form .btn-success {
    padding: 2% 8%;
    font-weight: bold;
    letter-spacing: 0.15em;
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #ffdf62;
    color: #13202f;
    border: 0;
    font-size: 13px;
    cursor: pointer;
    border-radius: 6px; 
    margin-top: 1em;
    text-align: center;
    border-bottom: solid 3px #6D63298F;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19); }
.contact-items form .btn-success:active {
    background: #ffcf16;
    border-bottom: solid 3px #6D63298F;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}
    @media screen and (max-width: 768px) {
		.contact-items form .btn-success {
			font-size: 4.2vw;
			text-align: center;
			letter-spacing: 1px;
			vertical-align: middle;
			padding: 1% 7%;
			margin-top: 1%;
			letter-spacing: 0.15em; } }

/* works after */
.area-cnv.bg-white {
	background: #fff;}
	@media screen and (max-width: 768px) {
		.area-cnv.bg-white {
			margin-top: 0%; } }
	@media screen and (max-width: 768px) {
    .area-cnv.bg-white .btn-txt01 {
      color: #13202f; } }

/* case after */
.area-cnv.bg-grad {
  background: inherit;
  margin-top: 30px; }
  @media screen and (max-width: 768px) {
    .area-cnv.bg-grad {
      margin-top: 4.0%; } }
  @media screen and (max-width: 768px) {
    .area-cnv.bg-grad .btn-txt01 {
      color: #13202f; } }

/* performance after */
.area-cnv.bg-performance {
  background: inherit;
  padding-top: 70px; }
  @media screen and (max-width: 768px) {
    .area-cnv.bg-performance {
      margin-top: 4.0%;
      padding-top: 0; } }
  @media screen and (max-width: 768px) {
    .area-cnv.bg-performance .btn-txt01 {
      color: #13202f; } }
  .area-cnv.bg-performance .btn01 {
    margin-bottom: 90px; }
    @media screen and (max-width: 768px) {
      .area-cnv.bg-performance .btn01 {
        margin-bottom: 10.0%; } }

/* area[common]
-------------------------------------- */
.area {
	overflow: hidden; }
.area .area-inner {
    position: relative; }
.area h2.ttl, .area h2.ttl2 {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: -40px auto 0;
    text-align: center; }
    @media screen and (max-width: 768px) {
      .area h2.ttl, area h2.ttl2 {
        height: auto;
        padding: 4.6% 0 6.6%;
        margin: -10.0% auto 0; } }
.area h2.ttl span {
	color: #fff;
	font-size: 25px;
	margin-top: 25px;
	display: inline-block;
	vertical-align: middle;
	letter-spacing: 3px; }
.area h2.ttl2 span {
	color: #fff;
	font-size: 25px;
	margin-top: 25px;
	display: inline-block;
	vertical-align: middle;
	letter-spacing: 3px; }
.area h2.ttl3 span {
	color: #fff;
	font-size: 25px;
	display: inline-block;
	vertical-align: middle;
	letter-spacing: 3px; }
	@media screen and (max-width: 768px) {
        .area h2.ttl span {
          font-size: 20px;
          font-size: 5.33333vw;
          margin: 0; } }
.area h2.ttl:after {
    color: #abd8f4;
    font-weight: bold;
    font-size: 15px;
    margin-left: 15px;
    vertical-align: bottom;
    display: inline-block; }
    @media screen and (max-width: 768px) {
        .area h2.ttl:after {
          font-size: 12px;
          font-size: 3.2vw;
          margin-left: 3.0%; } }

/* area[strategy]
-------------------------------------- */
.area-strategy {
	overflow: hidden; }
.area-strategy .area-inner {
    max-width: 1100px;
    margin: 105px auto 90px;
    background: #fff; }
    @media screen and (max-width: 768px) {
      .area-strategy .area-inner {
        margin-top: 18.0%;
        margin-bottom: 18.0%; } }
.area-strategy .area-inner:before {
	content: "";
	display: block;
	background: url("../img/strategy_bg01.png") no-repeat center top;
	background-size: 100% auto;
	width: 309px;
	height: 225px;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	margin-right: 65px; }
	@media screen and (max-width: 768px) {
		.area-strategy .area-inner:before {
          width: 60.0%;
          padding-top: 44.0%;
          height: auto;
          margin: 16.0% auto 0;
          left: 0; } }
.area-strategy .area-inner h2 {
	background: url("../img/strategy_bg_ttl.png") no-repeat center top;
	background-size: 100% auto;
	width: 479px;
	height: 81px; }
	@media screen and (max-width: 768px) {
		.area-strategy .area-inner h2 {
          width: 94.0%;
          height: auto;
          background-size: 100% 100%; } }
	@media screen and (max-width: 768px) {
        .area-strategy .area-inner h2 span {
          font-size: 18px;
          font-size: 4.8vw; } }
.area-strategy .area-inner h2:after {
	content: "Strategy time"; }
.area-strategy .area-inner .txt-inner {
	padding-top: 95px;
	margin-left: 110px;
	padding-bottom: 80px; }
	@media screen and (max-width: 768px) {
        .area-strategy .area-inner .txt-inner {
          width: 94.0%;
          margin: 0 auto;
          padding-top: 68.0%;
          padding-bottom: 8.0%; } }
.area-strategy .area-inner .txt-inner p {
	font-size: 15px;
	line-height: 2.2; }
	@media screen and (max-width: 768px) {
          .area-strategy .area-inner .txt-inner p {
            font-size: 14px;
            font-size: 3.73333vw;
            line-height: 1.8; } }

/* area[step][comparison]
    common styles
-------------------------------------- */
.area-step .area-inner, .area-feature .area-inner {
    max-width: 1100px;
    margin: 70px auto 0;
    background: #eef6fc;
    /* Old browsers */
    background: -moz-linear-gradient(left, #eef6fc 0%, #f9fbfe 50%, #eef6fc 100%);
    background: -webkit-linear-gradient(left, #eef6fc 0%, #f9fbfe 50%, #eef6fc 100%);
    background: linear-gradient(to right, #eef6fc 0%, #f9fbfe 50%, #eef6fc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eef6fc', endColorstr='#eef6fc',GradientType=1 ); }
    @media screen and (max-width: 768px) {
      .area-step .area-inner, .area-feature .area-inner {
        margin-top: 18.0%; } }
    @media screen and (max-width: 768px) {
      .area-step .area-inner h2, .area-feature .area-inner h2 {
        height: auto;
        background-size: 100% 100%; } }
.area-step .area-inner ol, .area-feature .area-inner ol {
	width: 920px;
	padding: 70px 0;
	margin: 0 auto;
	counter-reset: num 0; }
	@media screen and (max-width: 768px) {
        .area-step .area-inner ol, .area-feature .area-inner ol {
          width: 94.0%;
          margin: 0 auto; } }
.area-step .area-inner ol li, .area-feature .area-inner ol li {
	height: 168px;
	list-style-type: none;
	background: #fff;
	padding-left: 130px;
	box-sizing: border-box;
	overflow: hidden;
	position: relative; }
	@media screen and (max-width: 768px) {
		.area-step .area-inner ol li, .area-feature .area-inner ol li {
            height: auto;
            padding: 0 4.0% 6.0% 4.0%; } }
        .area-step .area-inner ol li:before, .area-feature .area-inner ol li:before {
          counter-increment: num 1;
          content: counter(num);
          position: absolute;
          left: 0;
          top: 50%;
          background: #000;
          width: 40px;
          color: #fff;
          font-size: 19px;
          text-align: center;
          border-radius: 50%;
          padding: 10px 0;
          line-height: 1;
          font-weight: bold;
          margin-left: 50px;
          transform: translateY(-50%);
          -webkit-transform: translateY(-50%); }
          @media screen and (max-width: 768px) {
            .area-step .area-inner ol li:before, .area-feature .area-inner ol li:before {
              width: 12.0%;
              padding: 3.2% 0;
              font-size: 18px;
              font-size: 4.8vw;
              margin: auto;
              right: 0;
              top: 0;
              transform: translateY(0);
              -webkit-transform: translateY(0);
              margin-top: 6.0%; } }
.area-step .area-inner ol li:after, .area-feature .area-inner ol li:after {
	content: "";
	display: block;
	margin-right: 55px;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	position: absolute; }
	@media screen and (max-width: 768px) {
		.area-step .area-inner ol li:after, .area-feature .area-inner ol li:after {
			transform: translate(0);
			-webkit-transform: translate(0);
			left: 0;
			top: 0;
			margin: auto;
			margin-top: 25%; } }
.area-step .area-inner ol li + li, .area-feature .area-inner ol li + li {
	margin-top: 13px; }
	@media screen and (max-width: 768px) {
		.area-step .area-inner ol li + li, .area-feature .area-inner ol li + li {
			margin-top: 8.0%; } }
        .area-step .area-inner ol li h3, .area-feature .area-inner ol li h3 {
			color: #13202f;
			line-height: 2.0; }
	@media screen and (max-width: 768px) {
		.area-step .area-inner ol li h3, .area-feature .area-inner ol li h3 {
			width: 76%;
			font-size: 18px;
			font-size: 4.8vw;
			margin-top: 24.0%;
			text-align: center;
			width: 100%;
			margin-top: 55.0% !important; } }
.area-step .area-inner ol li p, .area-feature .area-inner ol li p {
	font-size: 12px;
	color: #333333;
	line-height: 1.6;
	margin-top: 5px; }
	@media screen and (max-width: 768px) {
		.area-step .area-inner ol li p, .area-feature .area-inner ol li p {
			font-size: 12px;
			font-size: 3.2vw; } }
        .area-step .area-inner ol li .txt01, .area-feature .area-inner ol li .txt01 {
			font-size: 15px;
			margin-right: 126px; }
	@media screen and (max-width: 768px) {
        .area-step .area-inner ol li .txt01, .area-feature .area-inner ol li .txt01 {
			font-size: 14px;
			font-size: 3.73333vw;
			margin-right: 0;
			margin-top: 30px;  } }

/* area[step]
-------------------------------------- */
.area-step {
    background: #fff;
	padding: 50px 0; }
	@media screen and (max-width: 768px) {
	    .area-step {
	        padding: 0; }}
.area-step .area-inner h2.ttl2 {
  background: url("../img/step_bg_ttl.png") no-repeat center top;
  background-size: 100% auto;
  width: 750px;
  height: 81px; }
  @media screen and (max-width: 768px) {
    .area-step .area-inner h2.ttl2 {
      width: 85.0%;
      height: auto;
      background: url("../img/step_bg_ttl2.png") no-repeat center top;
      background-size: 95% 100%; } }
  @media screen and (max-width: 768px) {
    .area-step .area-inner h2.ttl2 span {
      font-size: 4.21875vw;
      line-height: 1.2em;
      margin-top: 20px;
      margin-bottom: 20px; }
    .area-step .area-inner h2.ttl2:after {
      margin-bottom: 22px;
      font-size: 3.2vw !important; } }
.area-step .area-inner h2.ttl2:after {
  content: "Step";
  color: #abd8f4;
  font-weight: bold;
  font-size: 15px;
  margin-left: 1%;
  vertical-align: bottom;
  display: inline-block; }
.area-step .area-inner ol {
	padding-bottom: 40px; }
	@media screen and (max-width: 768px) {
		.area-step .area-inner ol {
			padding-bottom: 10.0%; } }
.area-step .area-inner ol li:nth-child(1):after {
    background: url("../img/step_icon01.png") no-repeat center top;
    background-size: 100% auto;
    width: 71px;
    height: 71px; }
    @media screen and (max-width: 768px) {
      .area-step .area-inner ol li:nth-child(1):after {
			 width: 20.0%;
			 height: auto;
			 padding-top: 18%;
			 background-size: 100% 100%; } }
.area-step .area-inner ol li:nth-child(2):after {
    background: url("../img/step_icon02.png") no-repeat center top;
    background-size: 100% auto;
    width: 72px;
    height: 72px; }
    @media screen and (max-width: 768px) {
      .area-step .area-inner ol li:nth-child(2):after {
        width: 20.0%;
			 height: auto;
			 padding-top: 20%;
			 background-size: 100% 100%; } }
  	@media screen and (min-width: 769px) {
		.area-step .area-inner ol li:nth-child(3) {
			 height: 200px; } }
 .area-step .area-inner ol li:nth-child(3):after {
	 background: url("../img/step_icon03.png") no-repeat center top;
	 background-size: 100% auto;
	 width: 71px;
	 height: 71px; }
	 @media screen and (max-width: 768px) {
		 .area-step .area-inner ol li:nth-child(3):after {
			 width: 20.0%;
			 height: auto;
			 padding-top: 20%;
			 background-size: 100% 100%; } }
.area-step .area-inner h3 {
	margin-top: 20px; }
	@media screen and (min-width: 769px) {
		.area-step .area-inner h3 {
			font-size: 23px;
			letter-spacing: 2px; } }
.area-step .area-inner .txt02 {
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	color: #333333;
	padding-bottom: 50px; }
	@media screen and (max-width: 768px) {
		.area-step .area-inner .txt02 {
			font-size: 18px;
			font-size: 4.8vw;
			line-height: 1.8;
			padding-bottom: 10.0%; } }
.area-step .txt {
    margin: 5em 3em 0;
    padding-top: 80px;}
    @media screen and (max-width: 768px) {
        .area-step .txt {
            margin: 5em 1em 0;
            padding-top: 20%;
            font-size: 3.73333vw; }}
.area-step .items {
  display: flex;
  justify-content: space-between;
  margin: 40px 0 0 30px;
  padding-top: 0;}
    @media screen and (max-width: 768px) {
        .area-step .items {
            display: flex;
            flex-direction: column;
            margin: 0 0 0 10px;
            padding-top: 30px;}}  
.area-step .items .item {
  background:#FFF;
  padding: 20px;
  margin-right: 30px;
  margin-bottom: 30px;}
    @media screen and (max-width: 768px) {
        .area-step .items .item { 
        width: 97%;
        padding: 20px 0;
        margin: 0 0 30px 0;}}


/* area[feature]
-------------------------------------- */
.area-feature {
  background: #fff;
  padding: 50px 0; }
  @media screen and (max-width: 768px) {
    .area-feature {
      padding-top: 5%;
      padding-bottom: 0%; } }
  .area-feature .area-inner ol li:nth-child(1):after {
    background: url("../img/feature_icon02.png") no-repeat center top;
    background-size: 100% auto;
    width: 77px;
    height: 77px; }
    @media screen and (max-width: 768px) {
      .area-feature .area-inner ol li:nth-child(1):after {
        width: 20.0%;
        padding-top: 20.0%;
        height: auto;
        background-size: 100% 100%; } }
  .area-feature .area-inner ol li:nth-child(2):after {
    background: url("../img/feature_icon03.png") no-repeat center top;
    background-size: 100% auto;
    width: 77px;
    height: 77px; }
    @media screen and (max-width: 768px) {
      .area-feature .area-inner ol li:nth-child(2):after {
        width: 20.0%;
        padding-top: 20.0%;
        height: auto;
        background-size: 100% 100%; } }
  @media screen and (min-width: 769px) {
    .area-feature .area-inner ol li:nth-child(3) {
      height: 140px; } }
  .area-feature .area-inner ol li:nth-child(3):after {
    background: url("../img/feature_icon04.png") no-repeat center top;
    background-size: 100% auto;
    width: 77px;
    height: 77px; }
    @media screen and (max-width: 768px) {
      .area-feature .area-inner ol li:nth-child(3):after {
        width: 20.0%;
        padding-top: 20.0%;
        height: auto;
        background-size: 100% 100%; } }
  .area-feature .area-inner h2 {
    background: url("../img/feature_bg_ttl.png") no-repeat center top;
    background-size: 100% auto;
    width: 499px;
    height: 81px; }
    @media screen and (max-width: 768px) {
      .area-feature .area-inner h2 {
        width: 94.0%;
        background: url("../img/strategy_bg_ttl.png") no-repeat center top;
        height: auto;
        background-size: 100% 100%; } }
    @media screen and (max-width: 768px) {
      .area-feature .area-inner h2 span {
        font-size: 18px;
        font-size: 4.8vw; } }
    .area-feature .area-inner h2:after {
      content: "Feature"; }
  .area-feature .area-inner .txt01 {
    margin-top: 10px; }
    @media screen and (max-width: 768px) {
      .area-feature .area-inner .txt01 {
        margin-top: 55.0%; } }
  .area-feature .area-inner h3 {
    margin-top: 25px;
    font-size: 23px; }
    @media screen and (max-width: 768px) {
      .area-feature .area-inner h3 {
        margin-top: 4.0% !important;
        line-height: 1.6 !important; } }
    .area-feature .area-inner h3:before {
      content: "";
      display: inline-block;
      background: url("../img/feature_icon01.png") no-repeat center top;
      background-size: 100% 100%;
      width: 26px;
      height: 26px;
      vertical-align: middle;
      margin-right: 10px; }
      @media screen and (max-width: 768px) {
        .area-feature .area-inner h3:before {
          width: 8.0%;
          padding-top: 8.0%;
          height: auto; } }
    .area-feature .area-inner h3 span {
      font-size: 12px; }
      @media screen and (max-width: 768px) {
        .area-feature .area-inner h3 span {
          font-size: 12px;
          font-size: 3.2vw;
          display: block;
          margin-top: 2.0%; } }

/* area[case]
-------------------------------------- */
.area-case {
  overflow: hidden; }
.area-case .area-inner {
    max-width: 1100px;
    margin: 70px auto 0;
    padding-bottom: 100px; }
    @media screen and (max-width: 768px) {
      .area-case .area-inner {
        margin-top: 14.0%;
        padding-bottom: 18.0%; } }
.area-case .area-inner h2 {
      background: url("../img/case_bg_ttl.png") no-repeat center top;
      background-size: 100% auto;
      width: 400px;
      height: 81px;
      margin-top: 85px;
      position: initial; }
      @media screen and (max-width: 768px) {
        .area-case .area-inner h2 {
          width: 84.53%;
          height: auto;
          background-size: 100% 100%;
          margin-top: 0%; } }
.area-case .area-inner h2:after {
    content: "Case"; }
.area-case .area-inner figure {
    padding-top: 30px; }
.area-case p {
    margin: 2em 1em 0;}
    @media screen and (max-width: 768px) {
        .area-case p {
            font-size: 3.73333vw;}}

/* area[performance]
-------------------------------------- */
.performance {
  background: #fff;
  padding: 70px 0; }
.area-performance {
  background: #fff;
  padding: 70px 0; }
  @media screen and (max-width: 768px) {
    .area-performance {
      padding: 30px 0 0; } }
  .area-performance .area-inner {
    max-width: 1100px;
    margin: 40px auto 0;
    background: #eef6fc;
    padding-bottom: 30px; 
    /* Old browsers */
    background: -moz-linear-gradient(left, #eef6fc 0%, #f9fbfe 50%, #eef6fc 100%);
    background: -webkit-linear-gradient(left, #eef6fc 0%, #f9fbfe 50%, #eef6fc 100%);
    background: linear-gradient(to right, #eef6fc 0%, #f9fbfe 50%, #eef6fc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eef6fc', endColorstr='#eef6fc',GradientType=1 ); }
    @media screen and (max-width: 768px) {
      .area-performance .area-inner {
        width: 100%;
        margin-top: 18.0%; } }
    .area-performance .area-inner h2 {
      background: url("../img/performance_bg_ttl.png") no-repeat center top;
      background-size: 100% auto;
      width: 300px;
      height: 81px; }
      @media screen and (max-width: 768px) {
        .area-performance .area-inner h2 {
          width: 66.12%;
          height: auto;
          background-size: 100% 100%; } }
.area-performance .area-inner h2:after {
    content: "Performance"; }
.area-performance .area-inner ul {
    width: 100%;
    margin: 0 auto;
    padding-top: 90px;
    overflow: hidden; }
      @media screen and (max-width: 768px) {
        .area-performance .area-inner ul {
          width: 94.0%;
          padding-top: 18.0%; } }
.area-performance .area-inner ul li {
    width: 23.5%;
    background: #fff;
    float: left;
    margin-left: 13px;
    height: 350px; }      
        @media screen and (max-width: 768px) {
          .area-performance .area-inner ul li {
            width: 100%;
            float: none;
            margin: 0;
            height: 100%; } }
        .area-performance .area-inner ul li h3 {
          font-size: 21px;
          margin-left: 25px;
          margin-top: 25px;
          margin-bottom: 10px;
          font-weight: bold;
          letter-spacing: 2px; }
          @media screen and (max-width: 768px) {
            .area-performance .area-inner ul li h3 {
              margin-left: 5.0%;
              font-size: 18px;
              font-size: 4.8vw;
              margin-bottom: 3.0%;
              margin-top: 6.0%; } }
        .area-performance .area-inner ul li .txt01 {
          margin-left: 25px;
          font-size: 14px;
          line-height: 1.8;
          margin-right: 25px;
          padding-bottom: 30px; }
          @media screen and (max-width: 768px) {
            .area-performance .area-inner ul li .txt01 {
              margin-left: 5.0%;
              margin-right: 5.0%;
              font-size: 14px;
              font-size: 3.73333vw;
              padding-bottom: 6.0%; } }
        @media screen and (max-width: 768px) {
          .area-performance .area-inner ul li + li {
            margin-top: 6.0%; } }
        .area-performance .area-inner ul li:nth-child(even) {}
          @media screen and (max-width: 768px) {
            .area-performance .area-inner ul li:nth-child(even) {}
             }
        .area-performance .area-inner ul li:nth-child(n+3) {}
          @media screen and (max-width: 768px) {
            .area-performance .area-inner ul li:nth-child(n+3) {} }

  .area-performance .area-inner .img01 {
	width: 100%; }
	@media screen and (max-width: 768px) {
		.area-main .items-inner .img01 {
          width: 100%; } }
          
            
/* area[data]
-------------------------------------- */
.area-data {
  background: #b9dbf2;
  /* Old browsers */
  background: -moz-linear-gradient(left, #b9dbf2 0%, #c9e6f7 50%, #b9dbf2 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #b9dbf2 0%, #c9e6f7 50%, #b9dbf2 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #b9dbf2 0%, #c9e6f7 50%, #b9dbf2 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b9dbf2', endColorstr='#b9dbf2',GradientType=1 );
  /* IE6-9 */ }
  .area-data .area-inner {
    max-width: 1100px;
    margin: 0 auto;
    overflow: hidden;
    padding: 30px 0; }
    @media screen and (max-width: 768px) {
      .area-data .area-inner {
        width: 94.0%;
        padding: 30px 0 0 0; } }
  .area-data h2 {
    background: url("../img/data_bg_ttl.png") no-repeat center top;
    background-size: 100% auto;
    width: 428px;
    height: 81px;
    text-align: center;
    margin: 80px auto 60px; }
    @media screen and (max-width: 768px) {
      .area-data h2 {
        width: 100%;
        height: auto;
        padding: 4.6% 0 6.6%;
        background-size: 100% 100%;
        margin: 12.0% auto 10.0%; } }
    .area-data h2 span {
      color: #fff;
      font-size: 25px;
      margin-top: 25px;
      display: inline-block;
      vertical-align: middle;
      letter-spacing: 3px; }
      @media screen and (max-width: 768px) {
        .area-data h2 span {
          font-size: 20px;
          font-size: 5.33333vw;
          margin: 0; } }
    .area-data h2:after {
      content: "Data";
      color: #abd8f4;
      font-weight: bold;
      font-size: 15px;
      margin-left: 15px;
      vertical-align: bottom;
      display: inline-block; }
      @media screen and (max-width: 768px) {
        .area-data h2:after {
          font-size: 12px;
          font-size: 3.2vw;
          margin-left: 3.0%; } }
  .area-data ul {
    overflow: hidden;
    margin-bottom: 0px; }
    @media screen and (max-width: 768px) {
      .area-data ul {
        width: 100%;
        margin-bottom: 18.0%; } }
    .area-data ul li {
      width: 354px;
      float: left; }
      @media screen and (max-width: 768px) {
        .area-data ul li {
          width: 100%; } }
      .area-data ul li + li {
        margin-left: 19px; }
        @media screen and (max-width: 768px) {
          .area-data ul li + li {
            float: right;
            margin-left: 0; } }
      @media screen and (max-width: 768px) {
        .area-data ul li:nth-child(3) {
          float: left; } }
      @media screen and (max-width: 768px) {
        .area-data ul li:nth-child(n+2) {
          margin-top: 4.0%; } }

/* items
-------------------------------------- */
.items {
  display: flex;
  justify-content: space-between;
  margin: 40px 0 0 30px;
  padding-top: 80px;}
  @media screen and (max-width: 768px) {
    .items {
        display: flex;
        flex-direction: column;
        margin: 30px 0 0 10px;
        padding-top: 60px;}}
.items .item {
  width: 30%;
  background:#FFF;
  padding: 20px;
  margin-right: 30px;
  margin-bottom: 30px;}
  @media screen and (max-width: 768px) {
    .items .item {
         width: 97%;
         background:#FFF;
         padding: 20px 0;
         margin: 0 0 30px 0;}
    .items p {
        margin: 0 5%;
        font-size: 3.73333vw;
        clear: both;}}
.item-img {
  padding: 0;
  width: 30%;
  text-align: center;
  margin: 20px auto;
}
.item-body {
  padding: 0;
  margin-top: 1em;}
  @media screen and (max-width: 768px) {  
  .item-body {
    padding-top: 1em; }}
.item-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 1em;
  line-height: 1.5em;
  text-align: center;}
  @media screen and (max-width: 768px) {
    .item-title {
        font-size: 4.8vw;}}
.item-title2 {
  margin: .7em 0 1.2em 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5em;
  text-align: center;
  float: left;
  width: 83%;}
  @media screen and (max-width: 768px) {
    .item-title2 {
        font-size: 4.8vw;}}
.item-title3 {
  margin: .0 0 1.2em 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5em;
  text-align: center;
  float: left;
  width: 100%;
  height: 60px; }
  @media screen and (max-width: 768px) {
    .item-title3 {
          height: auto;
          font-size: 4.8vw; }}
.num {
	background: #000;
	width: 13%;
	color: #fff;
	font-size: 19px;
	text-align: center;
	border-radius: 50%;
	padding: 10px 0;
	line-height: 1;
	font-weight: bold;
	float: left;
	margin: 1.5em .5em 0 0;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%); }
	@media screen and (max-width: 768px) {
	.num {
	    width: 11%;
	    font-size: 4.8vw;
	    padding: 3% 0;
	    margin: 1.5em -30px 0 2em;}}

.caption { font-size: 80%; color:#999;}

@media screen and (max-width: 768px) {
.item-img {
  padding: 0;
  margin-bottom: 1em;}}


/* footer
-------------------------------------- */
footer {
	background: #666666;
	color: #fff; }
footer .footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    overflow: hidden;
    position: relative; }
    @media screen and (max-width: 768px) {
		footer .footer-inner {
			width: 94.0%; } }
footer .footer-inner .footer-link {
	margin: 35px 0;
	font-size: 0;
	float: left; }
	@media screen and (max-width: 768px) {
        footer .footer-inner .footer-link {
			float: none;
			margin: 10.0% 0; } }
footer .footer-inner .footer-link li {
	display: inline-block; }
	@media screen and (max-width: 768px) {
		footer .footer-inner .footer-link li {
			display: block; } }
footer .footer-inner .footer-link li a {
	font-size: 14px; }
	@media screen and (max-width: 768px) {
		footer .footer-inner .footer-link li a {
			font-size: 14px;
			font-size: 3.73333vw; } }
footer .footer-inner .footer-link li + li {
	margin-left: 20px; }
	@media screen and (max-width: 768px) {
		footer .footer-inner .footer-link li + li {
			margin-left: 0;
			margin-top: 6.0%; } }
footer .footer-inner .pagetop {
	width: 60px;
	position: absolute;
	right: 0;
	top: 0; }
	@media screen and (max-width: 768px) {
		footer .footer-inner .pagetop {
			width: 16.0%; } }
footer .footer-inner .copy {
	font-size: 12px;
	color: #b3b3b3;
	float: right;
	margin-top: 35px;
	margin-right: 100px; }
	@media screen and (max-width: 768px) {
		footer .footer-inner .copy {
			font-size: 12px;
			font-size: 3.2vw;
			text-align: left;
			margin: 3% 0 8.0%;
			float: none; } }

/* animation
------------------------------- */
.animation {
	opacity: 0; }

/* ie9 */
.animation:not(:target) {
	opacity: 1\9; }
	@media screen and (max-width: 768px) {
		.animation:not(:target) {
			opacity: 1\9; } }

/*ie10*/
	@media all and (-ms-high-contrast: none) {
		.animation:not(:target) {
			opacity: 0; } }

/* fade top
------------------------------- */
.ani-fade-top {
	-webkit-animation: ani-fade-top 2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
	animation: ani-fade-top 2s cubic-bezier(0.39, 0.575, 0.565, 1) both; }

@-webkit-keyframes ani-fade-top {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    opacity: 0; }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1; } }

@keyframes ani-fade-top {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    opacity: 0; }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1; } }

/* form
------------------------------- */
@media screen and (max-width: 767px) {
  .npro_itemname {
    text-align: left !important; } }

/*# sourceMappingURL=index.css.map */