@charset "UTF-8";

/*-------------------------------------------------
	Bootstrap Style
---------------------------------------------------*/
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.row {
  margin-right: -15px;
  margin-left: -15px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}
.col-xs-12 {
  width: 100%;
}
.col-xs-11 {
  width: 91.66666667%;
}
.col-xs-10 {
  width: 83.33333333%;
}
.col-xs-9 {
  width: 75%;
}
.col-xs-8 {
  width: 66.66666667%;
}
.col-xs-7 {
  width: 58.33333333%;
}
.col-xs-6 {
  width: 50%;
}
.col-xs-5 {
  width: 41.66666667%;
}
.col-xs-4 {
  width: 33.33333333%;
}
.col-xs-3 {
  width: 25%;
}
.col-xs-2 {
  width: 16.66666667%;
}
.col-xs-1 {
  width: 8.33333333%;
}
}
@media (min-width: 768px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-11 {
    width: 91.66666667%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-8 {
    width: 66.66666667%;
  }
  .col-sm-7 {
    width: 58.33333333%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.66666667%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
  .col-sm-1 {
    width: 8.33333333%;
  }
}
@media (min-width: 992px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
  .col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-1 {
    width: 8.33333333%;
  }
}
@media (min-width: 1200px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
  }
  .col-lg-12 {
    width: 100%;
  }
  .col-lg-11 {
    width: 91.66666667%;
  }
  .col-lg-10 {
    width: 83.33333333%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .col-lg-8 {
    width: 66.66666667%;
  }
  .col-lg-7 {
    width: 58.33333333%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-5 {
    width: 41.66666667%;
  }
  .col-lg-4 {
    width: 33.33333333%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-2 {
    width: 16.66666667%;
  }
  .col-lg-1 {
    width: 8.33333333%;
  }
}
#splp h1,
#splp h2 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 30px;
}

#splp * {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
#splp *:before,
#splp *:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
#splp h1,
#splp h2 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

/*-------------------------------------------------
	Basic style
---------------------------------------------------*/
/*body {
	-webkit-font-smoothing: antialiased !important;
	-webkit-text-size-adjust: 100%; 
	-ms-text-size-adjust: 100%;
}

html, body {
	height: 100%;
	margin:0;
	padding: 0;
	font-size: 100%; 
	color:#333;
}*/
#splp img {
	max-width:100%;
	height:auto;
}
#splp .img-full img {
	width: 100%;
}
#splp a, #splp a:hover,#splp a:focus, #splp .btn:focus{
	text-decoration: none;
	outline: none;
}
#splp p {
    margin: 0 0 10px;
	color: #333;
	font-size: 16px;
}
#splp a:hover, #splp input:hover {
	filter:alpha(opacity=80);
	opacity:0.8;
}
#splp a img:hover {
	filter:alpha(opacity=70);
	opacity:0.7;
	color: #777;
}
#splp ul,ol {
	padding: 0;
	margin: 0;
	list-style: none;
}
#splp u {
	text-decoration: underline;
}
#splp .breadcrumb li {
	font-size: 13px;
}
#splp em { font-style: normal; }
#splp .tr {
	text-align: right;
}
#splp .tc { text-align: center !important; }
#splp .tl { text-align: left !important; }
.pt10 { padding-top: 10px !important; }
.pt35 { padding-top: 35px !important; }
.pb0 {
	padding-bottom: 0 !important;
}
.mb0 {
	margin-bottom: 0 !important;
}
.ma20 {
	margin: 20px 0 !important;
}
.mb20 {
	margin-bottom: 20px !important;
}
.mb40 {
	margin-bottom: 40px !important;
}
.mr30 {
	margin-right: 30px;
}
.mt10 {
	margin-top: 10px;
}
.mt40 {
	margin-top: 40px;
}
.mb60 {
	margin-bottom: 60px;
}
.mb80 {
	margin-bottom: 80px;
}

.mt-5 {
	margin-top: -5px !important;
}
.mt-10 {
	margin-top: -10px !important;
}
.pa10 {
	padding: 10px;
}
#splp .fl {
	float: left;
}
#splp .fr {
	float: right;
}

#splp h1,#splp h2,#splp h3,#splp h4,#splp h5,#splp h6 {
	margin: 0;
	/*font-weight: bold;*/
}
i {
	margin-right: 5px;
}
.clearfix:after,
.cf:after {
    content:" ";
    display:block;
    clear:both;
}
.bold { font-weight: bold; }
i { font-style: normal;}

/*----------------------------
	Font
------------------------------*/
#splp h1, #splp h2, #splp h3, #splp h4,
#splp p {
	@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/*	font-family: 'YuGothic', 'Yu Gothic', '游ゴシック', '游ゴシック体', 'Noto Sans Japanese', 'ヒラギノ角ゴ Pro W3',"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro","メイリオ", "Meiryo",'sans-serif';*/
	font-family:"Lucida Grande", "segoe UI", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif;
}
.red {
	color: #ff0000;
	font-weight:bold;
}
.appeal {
	color:#70b8ca;
}
.u {
	text-decoration: underline;
}
.large {
	font-size: 120%;
}
.l {
	font-size: 16px;
}
.m {
	font-size: 14px;
}
.s {
	font-size: 13px;
}
span.b {
	font-weight: bold;
}

/*-------------------------------------------------
	Bootstrap Style
---------------------------------------------------*/
#splp .container {
	/*max-width: 1030px;*/
	text-align: center;
	width: 100%;
}
a {
	color: #333;
}
a:focus, a:hover {
    color: #333;
}
body #splp {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    line-height:1.5;
    color: #000;
}

/*----------------------------
	ttl_style
------------------------------*/
#splp h1 {
/*	color: #8be2f8;*/
	color: #fff;
	font-size: 66px;
	margin-bottom: 15px;
	letter-spacing: 0.05em;
}
#splp p {
	line-height: 2;
	font-weight: 600;
	letter-spacing: 0.1em;
}
#splp .shadow {
	text-shadow: 1px 2px 5px rgba(0,0,0,1);
}

/*----------------------------
	index
------------------------------*/
#splp {
	background: #fff;
}
#splp #main {
	margin: 0 auto;
	width: 100%;
	text-align: center;
	position: relative;
}
.slide {
	display: -webkit-flex; /* Safari用 */
	display: flex;
	-webkit-justify-content: center; /* Safari用 */
	justify-content: center;
	-webkit-align-items: center; /* Safari用 */
	align-items: center;
	background: no-repeat;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding:0;
	height: 796px;
	position: relative;
}
#main h2 {
	color: #fff;
	margin-bottom: 50px;
}
#main p {
	color:#fff;
}
#main h1 {
	/*margin-top: -50px;*/
}
#main p {
	font-size:26px;
	font-weight:500;
	letter-spacing: 0.02em;
	line-height: 1.4;
}
#main .main1 {
padding-top: 20px; font-size: 20px; letter-spacing:0;
}
#main h1.main2 {
letter-spacing:0; line-height:1.2; margin-bottom: 10px; font-size: 68px;
}
#main .main3 {
font-size: 68px; color: #fff; padding-left:80px;
}
#main .main4 {
font-size: 66px; margin-bottom: 20px; font-weight: normal;
}
#main .main5 {
margin-bottom: 120px;
}

#splp .back{
	width:100%;
	position:relative;
	background:#aaa;
	}
#splp .back:before{
	width:50%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background:#ddd;
	z-index:0;
	}
#splp .table{
	width:100%;
	margin:0 auto;
	display:table;
	position:relative;
	z-index:1;
	}
#splp .cell{
	width:50%;
	display:table-cell;
	height: 796px;
	vertical-align: middle;
	}

#splp .white, #splp .white p {
	color: #fff;
}
#splp .cell h2 {
	color: #fff;
	margin-bottom: 40px;
	text-align: center;
	font-weight:500;
	font-size: 32px;
	letter-spacing: 0.03em;
}
#splp .cell p {
	font-size: 16px;
	line-height: 2.5;
	color:#fff;
}
#splp .mat {
	background: #8be2f8;
	max-width: 600px;
	height: 400px;
	padding: 120px 20px 0;
}
#splp .mat.wmax {
	max-width: 100%;
}
.wtc {
	max-width: 980px;
	margin: 0 auto;
}

#sec1 {
	background-image: url(../img/2.jpg);
}
#sec2 {
	background-image: url(../img/3.jpg);
}
#splp h2.z10 {
    z-index: 10;
    color: #fff;
}
#sec3 {
	background-image: url(../img/4.jpg);
	background-position: center top;
}
#sec4 {
	background-image: url(../img/5.jpg);
	background-position: center top;
}
#splp #sec4 h2 {
	color: #fff;
}

#splp .scene {
	display: -webkit-flex; /* Safari用 */
	display: flex;
	-webkit-justify-content: center; /* Safari用 */
	justify-content: center;
	-webkit-align-items: center; /* Safari用 */
	align-items: center;
	background: no-repeat;
	background-position: center top;
	background-size: 50%;
	padding:0;
	position: relative;
}
#splp .scene h2 {
	font-weight: 500;
	margin-bottom:30px;
	line-height: 2;
}
#splp .scene p {
	line-height: 2.5;
	font-size: 16px;
}
#splp .scene .white,
#splp .scene .white p {
	color: #fff;
}
#sec13 .bnr {
	background-image: url(../img/bnr1.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height:400px;
}
#sec13 .bnr.b1 {
	background-image: url(../img/bnr1.jpg);
}
#sec13 .bnr.b2 {
	background-image: url(../img/bnr2.jpg);
}
#sec13 .bnr.b3 {
	background-image: url(../img/bnr3.jpg);
}
#sec13 .bnr.b4 {
	background-image: url(../img/bnr4.jpg);
}
#sec13 .bnr.b5 {
	background-image: url(../img/bnr5.jpg);
}
#sec13 .bnr.b6 {
	background-image: url(../img/bnr6.jpg);
}

#sec13 .bnr .bnrMat {
	display: table;
	background: rgba(139,226,248, 0.7);
/*	background: #8be2f8;*/
	padding: 20px;
	width: 85%;
	height: 300px;
	margin: 50px auto;
	vertical-align:middle;

}
#sec13 .bnr p {
	color: #fff;
	font-size: 25px;
	display: table-cell;
	vertical-align:middle;
}

#sec13 a .bnrMat:hover {
	transition: 0.5s;
	background: rgba(139,226,248, 0.8);
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
 }
#splp #sec15 h2 {
	 margin-bottom: 10px;
 }
#sec15 p.txtend {
	font-style:italic;
	display: block;
	font-size:28px;
	font-weight: 300;
}

#sec15 .color {
	transition-delay: 0.7s !important;
	opacity: 0;
    animation: color 2s ease 0s 1 normal;
    -webkit-animation: color 2s ease 0s 1 normal;
}

@keyframes color {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes color {
    0% {opacity: 0}
    100% {opacity: 1}
}


/*
----------------------------
	sp navbar
------------------------------*/
#sticky {
	width: 100%;
	z-index: 10;
}
.pcNone{
	display:none;/*元none*/
}

.spFooter li:nth-child(2n) {    /* 偶数番目(2,4,6……番目) */
   background: #999;
}
.spFooter li:nth-child(2n+1) {  /* 奇数番目(1,3,5……番目) */
   background: #ccc;
}
.spFooter li a {
	display: block;
	width:100%;
	text-align:center;
}


/*----------------------------
	Animation
	http://www.north-geek.com/entry/js-scroll
------------------------------*/
/*フェードイン*/
.list-mv02{
	transition: 1s;
	opacity: 0;
}
.mv02{
	opacity: 1.0;
}

/*移動*/
.list-mv07{
	transition: .7s;
}
.list-mv07{
	opacity: 0;
	transform: translate(0,100px); 
	-webkit-transform: translate(0,100px); 
}
.mv07{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}

.with-delay {
  transition-delay: 0.3s;
}
.with-delay2 {
  transition-delay: 0.4s !important;
}
.with-delay3 {
  transition-delay: 0.5s !important;
}
.with-delay4 {
  transition-delay: 0.6s !important;
}
.with-delay5 {
  transition-delay: 0.7s !important;
}
.with-delay6 {
  transition-delay: 3s !important;
}


/*上から移動*/

.list-mv08{
	transition: 1s;
}
.list-mv08{
	opacity: 0;
	transform: translate(0,-200px); 
	-webkit-transform: translate(0,-200px); 
}
.mv08{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}

/* box拡大 */

.list{
	list-style-type: none;
	overflow: hidden;
}
.list .bnr {
	transition: .4s;
}

.list-mv01{
	opacity: 0;
	transform: scale(0.8,0.8);
	-webkit-transform: scale(0.8,0.8);
}
.mv01{
	opacity: 1;
	transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
}

/* フェードイン */
.ani01 {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

.animv01{
 opacity:1;
}

/* 文字拡大から通常 */

.ani02 {
    -moz-transition: -moz-transform 3s ease-out;
    -webkit-transition: -webkit-transform 0.5s ease-out;
    -o-transition: -o-transform 0.5s ease-out;
    -ms-transition: -ms-transform 0.5s ease-out;
    transition: transform 0.5s ease-out;
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
 }

.animv02{
	transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
}


/* animation3 */
.text-progress {
    position: relative;
    width: 300px;
    height: 100px;
    line-height: 100px;
    margin: 0 auto;
    text-align: center;
}

.text-progress::after {
    content: attr(data-txt);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    line-height: 100px;
    clip: rect(0,0,100px,0);
    transition: clip 1.5s linear;
}

/*.text-progress:hover::after {
    clip: rect(0,300px,100px,0);
}*/
.text-progress {
	animation: progress 3s linear;
	-webkit-animation: progress 3s linear;
}
@keyframes progress {
	(0,300px,100px,0)
	100% {clip: rect(100px,0)}
}

@-webkit-keyframes progress {
	0% {clip: rect(0,300px)}
	100% {clip: rect(100px,0)}
}

#main #anitxt1 {
	font-size: 68px;
	width: 5em;
	margin: 0 auto;
	height: 1.5em;
    position: relative;
}
.rw-wrapper {
}
.rw-words-2 span {
    -webkit-animation: rotateWordsSecond 18s linear infinite 0s;
    -ms-animation: rotateWordsSecond 18s linear infinite 0s;
    animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span {
    position: absolute;
    opacity: 0;
    overflow: hidden;
    width: 5em;
    margin-left: -150px;
    
}
.rw-sentence span {
    white-space: nowrap;
}
.rw-words span:nth-child(2) {
    -webkit-animation-delay: 3s;
    -ms-animation-delay: 3s;
    animation-delay: 3s;
}

@-webkit-keyframes rotateWordsSecond {
    0% { opacity: 1; -webkit-animation-timing-function: ease-in; width: 0px; white-space: nowrap; }
    10% { opacity: 0.3; width: 0px; }
	20% { opacity: 1; width: 100%; }
    27% { opacity: 0; width: 100%; }
    100% { opacity: 0; }
}
@keyframes rotateWordsSecond {
    0% { opacity: 1; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; width: 0px; white-space: nowrap;}
    10% { opacity: 0.3; width: 0px; }
	20% { opacity: 1; width: 100%; }
    27% { opacity: 0; width: 100%; }
    100% { opacity: 0; }
}

@keyframes rotateWordsSecond::after:.txton {
100% { opacity:1;}
}
@-webkit-keyframes rotateWordsSecond::after:.txton {
100% { opacity:1;}
}

/**/
.words {
	font-style: normal;
	position: relative;
}
.words span {
	position: absolute;
	width: 5em;
}
.words span {
    animation: words 2s ease 0s 1 normal;
    -webkit-animation: words 2s ease 0s 1 normal;
}
.words span.sp1 {
    -webkit-animation-delay: 0.5s;
    -ms-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

.words span.sp2 {
    -webkit-animation-delay:5s;
    -ms-animation-delay:5s;
    animation-delay: 5s;
}

@keyframes words {
    0% {opacity: 0; width:100%;}
    50% {opacity: 0.5; width:50%;}
    100% {opacity: 1; width: 100%;}
}

@-webkit-keyframes words {
    0% {opacity: 0; width:100%;}
    50% {opacity: 0.5; width:50%;}
    100% {opacity: 1; width: 100%;}
}






/*----------------------------
	test animation
------------------------------*/
.aniWrap {
	background: url(../img/img_pc_smartphone.png) no-repeat;
	background-size: contain;
	position: relative;
	height: 660px;
	width: 380px;
}
.ani {
position: absolute;
    width: 260px;
    height: 457px;
    left: 60px;
    top: 78px;
/*    background: url(../img/1-1.gif) no-repeat;*/
    background-size: contain;
}
.ani.gif1 {
    background: url(../img/1.gif) no-repeat;
    background-size: contain;
}
.ani.gif2 {
    background: url(../img/2.gif) no-repeat;
    background-size: contain;
}
.ani.gif3 {
    background: url(../img/3.gif) no-repeat;
    background-size: contain;
}
.ani.gif4 {
    background: url(../img/4.gif) no-repeat;
    background-size: contain;
}
.ani.gif5 {
    background: url(../img/5.gif) no-repeat;
    background-size: contain;
}

.ani.gif6 {
    background: url(../img/6.gif) no-repeat;
    background-size: contain;
}

.ani.gif7 {
    background: url(../img/7.gif) no-repeat;
    background-size: contain;
}

.ani.gif8 {
    background: url(../img/8.gif) no-repeat;
    background-size: contain;
}

.ani.afi {
    background: url(../img/afi.gif) no-repeat;
    background-size: cover;
}
.ani.hakkousha {
    background: url(../img/hakkousha.gif) no-repeat;
    background-size: cover;
}

.aniWrap.ac {
	margin: 0 auto;
	text-align:center;
}

.trigger, .trigger2 {
	width:1px;
	align-self:stretch;
	margin-top:400px;
}