@charset "utf-8";


*{
	background-repeat:no-repeat;
	line-height:140%;
	font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
	margin:0;
	padding:0;
	outline: none
}

*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}/* Non count border size */
 
a {text-decoration:none; overflow:hidden; color:#333}
a:hover {color:#666}

img {border: none; line-height:0; vertical-align:bottom;max-width: 100%; width: auto; height: auto}

html,body { height:100%; }

.clear{clear:both; height:0; line-height:0; font-size:0}

.space10 {height: 10px}
.space20 {height: 20px}
.space30 {height: 30px}
.space40 {height: 40px}
.space50 {height: 50px}
.space100 {height: 100px}

.mt5{margin-top:5px}
.mt10{margin-top:10px}
.mt20{margin-top:20px}
.mt30{margin-top:30px}
.mt40{margin-top:40px}
.mt50{margin-top:50px}

.mb5{margin-bottom:5px}
.mb10{margin-bottom:10px}
.mb20{margin-bottom:20px}
.mb30{margin-bottom:30px}
.mb40{margin-bottom:40px}
.mb50{margin-bottom:50px}

.ml10{margin-left:5px}
.ml10{margin-left:10px}
.ml20{margin-left:20px}
.ml30{margin-left:30px}
.ml40{margin-left:40px}
.ml50{margin-left:50px}

.mr10{margin-right:5px}
.mr10{margin-right:10px}
.mr20{margin-right:20px}
.mr30{margin-right:30px}
.mr40{margin-right:40px}
.mr50{margin-right:50px}

.font10{font-size:10px}
.font12{font-size:12px}
.font14{font-size:14px}

.bold{font-weight:bold}

.txt-left{text-align:left}
.txt-center{text-align:center}
.txt-right{text-align:right}

.red{color:#C00}

p{line-height:160%}

li{list-style: none;}

.alpha{
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}

.alpha:hover{
	filter: alpha(opacity=70);
	-moz-opacity:0.75;
	opacity:0.75;
}

.transition-01{ 
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.transition-02{ 
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}
.transition-03{ 
	-webkit-transition: all 0.6s ease-out;
	-moz-transition: all 0.6s ease-out;
	-o-transition: all 0.6s ease-out;
	-ms-transition: all 0.6s ease-out;
	transition: all 0.6s ease-out;
}


.bd-01{background: linear-gradient(transparent 60%, #c9145a 0%); font-weight: bold}
.bd-02{background: linear-gradient(transparent 60%, rgba(228,0,3,.8) 0%); font-weight: bold}
.bd-03{background: linear-gradient(transparent 60%, rgba(168,0,2,.8)  0%); font-weight: bold}

.cursor{cursor:pointer; cursor:hand}

#pagetop {display: block; width: 100%; padding: 10px; text-align: center; color:#fff; font-size: 20px; background-color: #111;z-index: 1; position: relative}
#pagetop:hover {background-color: #222}



#window-size{position: fixed; bottom:10px; right: 10px; width: 200px; background-color: #fff; font-size: 16px; font-weight: bold; z-index: 9999; text-align: center;padding: 10px; display: none}

#ie-notice{background-color: #fff; padding: 10px; text-align: center; font-size: 16px; font-weight: bold; color:red}



.forsk{clip:rect(1px,1px,1px,1px);height:1px;margin:0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;z-index:-1000}

.mincho{font-family:'Hiragino Mincho ProN',  "游明朝体", "Yu Mincho", YuMincho, "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;}

.note{font-size: 14px;text-align: right;padding:50px;color:#ddd}
.note a{color:#ddd;text-decoration: underline;}
@media(max-width:500px){
	.note{font-size: 14px;text-align: left;padding:30px 20px;color:#ddd;line-height: 200%;}
}




/**  Slick Base  fadeする場合はslick.cssの読み込みが必要**/

.slick{overflow: hidden; width: 100%; position: relative;-webkit-backface-visibility: hidden}
.slick li.slick-slide{display: inline-block; vertical-align: middle;overflow: hidden}
.slick li.slick-slide img{width: 100%; height: auto}
/*
.slick-arrow{position: absolute; top:0; font-size: 50px; margin-top: 0; z-index: 2; height: 100%;width: 10%;padding-top: 28%;opacity: 0}
.slick-prev{left:0px; text-align: left;padding-left: 10px}
.slick-next{right:0px;text-align: right;padding-right: 10px}
*/

.slick:hover .slick-arrow{opacity: 1}

.slick-dots{text-align: center; position: absolute; bottom:-40px; left: 0 ;width: 100%}
.slick-dots li{display: inline-block; width: 10px; height: 10px; margin: 0 5px; background-color:none;border:solid 1px #333 ;border-radius: 100%; text-indent: -9999px; cursor: pointer}
.slick-dots li.slick-active{background-color:#fff;border:solid 1px #fff}

@media(max-width:500px){
	.slick-dots li{width: 6px; height: 6px; margin: 0 2px;}
}


/** ***********************************************

Common Style

*********************************************** **/

.col-flex{display: flex;}
.col-flex .col{width: 50%;}


.cols-2{font-size:0;}
.cols-2 .col{font-size:14px; display: inline-block; vertical-align: top; width :50%}

.cols-3{font-size:0;}
.cols-3 .col{font-size:14px; display: inline-block; vertical-align: top; width :33.33333%; width : -webkit-calc((100%) / 3) ; width : calc((100%) / 3)}

.cols-4{font-size:0;}
.cols-4 .col{font-size:14px; display: inline-block; vertical-align: top; width :25%}



.tr{display:table;table-layout: fixed;border-collapse: collapse;width: 100%}
.td{display: table-cell; vertical-align:top;word-wrap: break-word;overflow: hidden; word-break: break-all;}
.th{display: table-cell; vertical-align:top;word-wrap: break-word;overflow: hidden; word-break: break-all;font-weight:bold}

.reset{ font-size:0; letter-spacing:.5}
.reset li{font-size:14px; letter-spacing:normal}

.full{width:100%; height:auto}

.hr-list{letter-spacing: -0.5em}
.hr-list li{display:inline-block; vertical-align:top;letter-spacing: normal}

.table-style-01{width:100%}
.table-style-01 table{width:100%;border-collapse:separate;border-spacing:1px;}
.table-style-01 th{padding:10px; text-align:right;}
.table-style-01 td{padding:10px;}


.table-style-02{width:100%;background-color:#ccc}
.table-style-02 table{width:100%;border-collapse:separate;border-spacing:1px;}
.table-style-02 th{text-align:right; padding:8px 10px; vertical-align:top; white-space:nowrap;background:#eee}
.table-style-02 td{ padding:8px 10px; background-color:#fff}


/** Loader **/

#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #fff;
  z-index: 998;
}
#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 160px;
  height: 200px;
  margin-top: -80px;
  margin-left: -80px;
  text-align: center;
  z-index: 999;
}
#loader p{font-size:12px; margin-top:30px; letter-spacing: 1.5px}





body{-webkit-text-size-adjust: 100%; background-color: #000;}


#wrapper{overflow-x: hidden;margin: 0 auto;}

.inner{width:100%; max-width: 1000px; margin:0 auto; position:relative; padding: 50px 10px}

/** ***********************************************

MAIN VISUAL

*********************************************** **/


#cover{position: relative;background-position: center;margin: 0 auto; z-index: 1;height: 100vh;overflow: hidden;}
#logo-kenko{position: absolute; top:20px; left: 30px;z-index: 10}
.bg-img{position: absolute; top:0; left: 0; width: 100%; height: 100vh}
.bg-img li{width: 100%; height: 100vh;background-size: cover; background-position:  center}
.bg-img img{object-fit: cover;width: 100%; height: 100vh;}

.txts{width:100%;text-align: center; color:#fff; position: absolute; bottom:150px;z-index: 2}
.pd-name-s{font-size: 14px; text-align: center;color:#fff;font-weight: normal;margin-bottom: 10px;letter-spacing: 1px;}
.mv-txt{position: absolute;top:8%;right:10%; z-index:2}
.txt-scroll{font-size: 10px;position:absolute;bottom:50px;z-index: 2;color:#fff;width:100%; text-align: center;letter-spacing:2px;
transform:rotate(90deg);margin-left: 20px;}

.scroll{position: absolute;bottom:0;left:50%;margin-left:-1px;width: 1px; color:#fff;z-index: 10;letter-spacing: 4px;text-align: center;height: 50px;background-color: #666;}
.scroll::before{content:""; display: block; margin: 0 auto;height: 0px; width: 1px; background-color: #fff;
	-webkit-animation-name: flash;
  	-webkit-animation-duration: 1800ms;
  	-webkit-animation-iteration-count: infinite;
  
  	animation-name: flash;
  	animation-duration: 1800ms;
  	animation-iteration-count: infinite;
}

@-webkit-keyframes flash {
	0% {
		height: 0px;
		opacity: 0;
	}
	20% {
		height: 0px;
		
	}
	70% {
		height: 50px;
		opacity: 1;
		margin-top: 0px;
	}
	100% {
		height: 50px;
		opacity: 1;
		margin-top: 50px;
	}
}
@keyframes flash {
	0% {
		height: 0px;
		opacity: 0;
	}
	20% {
		height: 0px;
		
	}
	70% {
		height: 50px;
		opacity: 1;
		margin-top: 0px;
	}
	100% {
		height: 50px;
		opacity: 1;
		margin-top: 50px;
	}
}

@media(max-width:1400px){
	.txts{bottom:120px;}
	.txt-closeup{max-width: 80%;}
}
@media(max-width:500px){
	#logo-kenko{position: absolute; top:10px; left: 10px;z-index: 10; max-width: 50px;}
	.mv-txt{width:40px}
}

@media(max-width:400px){
	.mv-txt{width:30px}
	.txts{bottom:80px;}
	.txt-scroll{display:none}
}



/** ***********************************************

COMMON

*********************************************** **/

.sec-common{color:#fff; padding: 50px 0;position: relative;}
.pc{display: block}
.sp{display: none}
@media(max-width:800px){
.sec-common{padding: 30px 0}
}

@media screen and (max-width:500px){
.pc{display: none}
.sp{display: block}
.sec-common{padding: 20px 0}
}

.img{position:relative;margin: 30px auto; max-width: 100%}
.img.portrait{max-width: 500px}
.img img{width: 100%; height: auto}
.beforeafter{width:100%; min-height: 400px;}
.img.portrait .beforeafter{width:100%; min-height: 100%}
.img .item-01{position: absolute; bottom:-40px; left: 0; padding: 10px 0; display: block; color:#ddd; font-size: 12px; line-height: 180%; width: 48%}
.img .item-02{position: absolute;bottom:-40px; right: 0; padding: 10px 0; display: block; color:#ddd; text-align:right;font-size: 12px; line-height: 180%; width: 48%}

.img.portrait .item-01{position: absolute; bottom:-40px; left: 0; padding: 10px 0; display: block; color:#ddd; font-size: 12px; line-height: 180%; width: 48%}
.img.portrait .item-02{position: absolute;bottom:-40px; right: 0; padding: 10px 0; display: block; color:#ddd; text-align:right;font-size: 12px; line-height: 180%; width: 48%}

.img .copy{font-size: 10px; position: absolute;bottom:10px; right:10px}


@media screen and (max-width:800px){
.img.portrait{max-width: 70%}
}
@media screen and (max-width:500px){
.beforeafter{width:100%; min-height: 200px}
.img.portrait{max-width: 100%}
.divider img{width: 795px; max-width: 795px; margin-left:-215px}
.img .item-01{bottom:-50px;font-size: 10px}
.img .item-02{bottom:-50px;font-size: 10px}
}


/** ***********************************************

ブラックミストとは

*********************************************** **/

.sec-01{position: relative; margin-top: 100px;}
.about-1{width:100%;margin-bottom: 100px;}
.sec-01 .col{width:50%;position: relative}
.sec-01 .col img.retina{width:100%;position: relative;}
.sec-01 .layer{position: relative;display:block}
.sec-01 .layer-1::after{content:"";width: 100%; height: 100%;background-color: #111;position: absolute;top:0;left:0;z-index:2;transition: all .4s cubic-bezier(.455, .03, .515, .955) .5s;-webkit-transition: all .4s cubic-bezier(.455, .03, .515, .955) .5s}
.sec-01 .layer-2::after{content:"";width: 100%; height: 100%;background-color: #111;position: absolute;top:0;right:0;z-index:2;transition: all .4s cubic-bezier(.455, .03, .515, .955) .5s;-webkit-transition: all .4s cubic-bezier(.455, .03, .515, .955) .5s;}

.sec-01 .layer.on::after{width: 0;}

.sec-01 .col-title{font-size:34px; font-weight: bold;margin-bottom: 20px;letter-spacing: 2px;}
.sec-01 .col-title .sm{font-size: 24px;font-weight:normal}
.sec-01 .col-desc{font-size: 18px;line-height:240%}
.about-2 {flex-direction: row-reverse;}
.sec-01 .col-2{padding: 30px 50px;max-width: 800px; }
.sec-01 .bg{width: 0;height:70%;position: absolute;top:120px; right:0;background-color: #111;z-index: -1;transition: all .5s cubic-bezier(.455, .03, .515, .955);-webkit-transition: all .5s cubic-bezier(.455, .03, .515, .955)}
.sec-01 .bg.on{width: 95%}
.about-logo{margin-top: 160px;color:#898989}
.abut-logo__title{margin-bottom: 10px;}
.logo-gray{height:16px;width: auto;margin-right:10px;vertical-align: middle;}
.about-logo__p{font-size: 14px;}

@media(max-width:1400px){

.sec-01 .bg{height:60%;}
.about-logo{margin-top: 80px}

}
@media screen and (max-width:1024px){

.sec-01 .col-title{font-size:24px}
.sec-01 .col-title .sm{font-size: 16px}
.sec-01 .col-desc{font-size: 16px;line-height:200%}
.sec-01 .bg{height:50%;}

}
@media screen and (max-width:800px){

.sec-01 .col-flex{display: block;}
.sec-01 .col{width:100%}
.sec-01 .col-2{padding-left:100px}
.about-1{margin-bottom: 50px;}
.sec-01 .bg{height:80%;}

}
@media screen and (max-width:500px){
	.sec-01{margin-top: 50px;}
	.sec-01 .col-2{padding: 30px}
	.about-1{margin-bottom: 30px;}
	.sec-01 .col-title{font-size:20px}
	.sec-01 .col-title .sm{font-size: 14px}
	.sec-01 .col-desc{font-size: 14px;line-height:180%}
	.sec-01 .bg{height:70%;}
	.about-logo{margin-top: 50px}
}
/** ***********************************************

FEATURES

*********************************************** **/


.title-area{text-align: center;position: relative;margin-bottom: 30px;}
.title-h2{display:inline-block;border-bottom:solid 1px #fff; padding-bottom: 5px;letter-spacing: 1px;position: relative;z-index: 2;}
.title-en{position: absolute;top:-70px;left:0; width:100%; text-align: center;opacity: 0;transition: all .4s) }
.title-en.on{opacity:1;
	animation-name: blur;
	animation-duration: 1000ms;}

.title-desc{font-size: 18px;letter-spacing: 1px;line-height: 180%;max-width: 800px;margin: 30px auto 50px;text-align: left;}

@media screen and (max-width:1024px){
	.title-desc{font-size: 16px}
}
@media screen and (max-width:500px){
	.title-h2{font-size: 20px;}
	.title-desc{font-size: 14px}
}


.sec-02 .block{padding:50px 10px}
.ft-title{font-size: 24px;font-weight:bold;margin: 0 auto 40px;letter-spacing: 1px;text-align: center;max-width: 800px;}
.ft-title .ft{font-style:normal;background-color: #a40b5d;color:#fff; font-weight: normal;font-size: 14px;border-radius: 100px;display: inline-block;padding: 3px 10px;margin-right:10px}
.ft-p{font-size: 18px;letter-spacing: 1px;line-height: 180%;max-width: 800px;margin: 0 auto 50px;}

.ex-portrait .col{padding: 0 5px;}
.ex-portrait .cap{font-size: 12px; color:#ddd;display:block;margin-top: 5px}
.ex-portrait .col-2 .cap{text-align:right}

.ex-img .cap{font-size: 12px; color:#ddd;display:block;margin-top: 5px;text-align:right}

.ef-blur{opacity: 0;}
.ef-blur.on{opacity: 1;
	animation-name: ef-blur;
	animation-duration: 1000ms;}

@keyframes ef-blur{
	0% {
		-webkit-filter: blur(50px);
		filter: blur(50px);
	}
	100% {
		-webkit-filter: blur(0px);
		filter: blur(0px);
	}
}


@media screen and (max-width:1024px){
	.ft-p{font-size: 16px}
}
@media screen and (max-width:500px){
	.ft-title{font-size: 20px;}
	.ft-title .ft{font-size: 12px;}
	.ft-p{font-size: 14px}
	.ex-portrait .cap{font-size: 10px}
}

/** ***********************************************

その他の活用シーン

*********************************************** **/

.sec-03{background-color: #111;}
.sec-03 .block{padding: 50px 0;}

/** ***********************************************

比較

*********************************************** **/

.sec-04{background-color: #fff;color:#333}
.sec-04 .inner{max-width: 1740px;}
.title-comparison{text-align: center;letter-spacing: 2px;font-size: 20px;}
.title-comparison::after{content:"";display:block; width: 40px;margin-top: 10px;height: 2px;background-color: #000;margin: 10px auto 30px;}


.sec-04 .note{font-size: 13px;color:#666;text-align:right}

.wrap-compare{align-items: flex-end;}
.wrap-compare .col{padding: 0 5px;}
.wrap-compare .col img{width: 100%;}
.wrap-compare a{transition: all .3s;}
.wrap-compare a:hover{opacity: .8;}
.wrap-compare .col-1{width: 20%;}
.wrap-compare .col-2{width: 40%;}
.wrap-compare .col-3{width: 40%;}

.wrap-compare .cap{font-size: 14px;display: block;margin-top: 10px; text-align: center;margin-bottom: 10px;letter-spacing: 1px;font-weight: bold;}
.wrap-compare .desc{font-size: 14px;min-height:100px;padding:0 20px;line-height:160%}

.info{max-width: 800px; margin: 0 auto; }
.info-title{margin-bottom:10px;font-size: 14px;}
.list-on li{list-style-type: disc; list-style-position: outside;margin-left:20px;margin-bottom: 6px;font-size: 12px;}


@media screen and (max-width:500px){
.wrap-compare{display:block}
.wrap-compare .col-1{width: 80%;}
.wrap-compare .col-2{width: 100%;}
.wrap-compare .col-3{width: 100%;padding-bottom: 30px;}
.wrap-compare .desc{min-height:auto;padding:0 20px;line-height:160%;padding-bottom: 20px;}
.sec-04 .note{font-size: 12px;color:#666;text-align:left;display:block;margin-top:20px}
.info{padding-top: 30px;}
.info-title{text-align:center}
}


/** ***********************************************

Gallery

*********************************************** **/


#sec-gal{text-align: center;position: relative; color:#fff}
#sec-gal .inner{max-width: inherit}

#slider{margin: 50px 0 20px;}
#slider .slick{overflow: visible;}
#slider li.slick-slide{position: relative;text-align: center;transition:all .3s;}


#slider li.slick-slide img{display: block;margin:0 auto;width:auto}
/*
#slider li.slick-slide img{display: block;width:auto;height:850px;margin:0 auto; object-fit: cover;}
.ie #slider li.slick-slide img{height:auto}
*/


#slider .cap{font-size: 10px; color:#fff; position: absolute; bottom:8px; left:0;display: block;width: 100%; z-index: 10; text-align:right;padding-right:10px;text-shadow:0 0 3px #333}


.slick li.slick-slide{margin-right: 5px;opacity: .3;transition:all .3s;-webkit-filter: blur(5px);filter: blur(5px);}
.slick li.slick-slide:hover{opacity: 1}
.slick li.slick-current{opacity: 1;
	-webkit-filter: blur(0);
	filter: blur(0);
}



.gal-arrow{width:50px;height:50px;border-top:solid 1px #ddd;position: absolute;top:50%;margin-top:-25px;z-index: 10;}

.gal-prev{transform:rotate(-45deg);left:50px;border-left:solid 1px #ddd;}
.gal-next{transform:rotate(45deg);right:50px;border-right:solid 1px #ddd;}



#sec-gal .note{font-size: 12px;text-align: right; color:#999}


@media(max-width:1400px){
#slider .cap{text-align:center;}
}
@media(max-width:1100px){
.gal-prev{left:40px;}
.gal-next{right:40px}
}
@media screen and (max-width: 500px) {
#slider li.slick-slide img{height:234px}
#slider .cap{text-align:center;bottom:3px;padding-right: 0px;transform: scale(.8);}
}

.bn-review:hover{opacity: .8;}



/** ***********************************************

Lineup

*********************************************** **/

.sec-lineup{background-color: #fff;color:#333}
.wrap-title-img{text-align: center;padding-top:50px}
.wrap-pd-img{text-align: center;text-align: center;padding: 50px 0;}
.wrap-pd-img img{max-width: 500px;}

.wrap-table{margin-bottom: 80px;}
.wrap-table table{width:100%;margin:0 auto;border-spacing: 1px;background-color: #000;}
.wrap-table th{padding: 10px;background-color: #333; color:#fff;text-align: center;letter-spacing: 1px;}
.wrap-table td{background-color: #fff;text-align: center;letter-spacing: 1px;padding: 10px;}
.wrap-table caption{font-size: 14px;caption-side: bottom;text-align: right;color:#666; margin-top: 10px;}


.wrap-bts{text-align: center;}
.bt{width:300px;display: inline-block; text-align: center; padding: 20px; border:solid 1px #036eb8; color:#036eb8; font-weight:bold;position:relative;margin:0 10px;box-shadow:0 0 10px#ccc;transition: all .3s}
.bt i{font-style:normal;font-size: 12px;margin-right:10px}
.bt-orange{border:solid 1px #ea5514;color:#ea5514}
.bt:hover{color:#fff;padding: 20px 20px 20px 30px; background-color: #036eb8;box-shadow:0 0 0#ccc}
.bt-orange:hover{background-color:#ea5514}



@media(max-width:1400px){

.wrap-pd-img img{max-width: 400px;}
.wrap-table th{font-size:14px}
.wrap-table td{font-size:14px}
.wrap-table caption{font-size: 12px;}

}
@media(max-width:1100px){

.wrap-table table{width:80%}

}

@media screen and (max-width: 500px) {
.wrap-title-img{padding-top:30px;}
.wrap-title-img img{max-width: 80%;margin:0 auto;}
.wrap-pd-img{padding: 30px 0}
.wrap-pd-img img{max-width: 80%;margin:0 auto;}

.wrap-table{overflow-x: scroll; overflow-y:hidden; -webkit-overflow-scrolling: touch;overflow-scrolling: touch;margin-bottom: 50px;}

.bt{transition:none}
.bt-orange{margin-top: 10px;}
}


/** SNS 
#sec-sns{position: relative; z-index: 1;padding: 100px 50px;min-height: 300px;position: relative;overflow: hidden;}
#sec-sns::after{content:''; display: block; width: 110%; height: 110%; position: absolute;top:-5%; left: -5%;background-image: url(../images/5db1f8a3466ac.jpg); background-size:cover; background-position: center;opacity: .4; -ms-filter: blur(6px);filter: blur(6px);}
#sec-sns .inner{ text-align: center; background-color: #fff; max-width: 800px; border:solid 3px #fff; padding: 0; border-radius: 3px; z-index:2}
#sec-sns .bg-1{background-color: #0071bc; color:#fff; padding: 20px 20px 40px 20px}
#sec-sns h3{font-size: 24px; vertical-align: middle; margin-bottom: 20px}
#sec-sns h3 i{color:rgba(28,160,240,1.00); font-size: 40px; margin-right: 15px; background-color: #fff; line-height: 50%; text-align: center; padding: 0; word-spacing: 0; letter-spacing: 0; vertical-align: middle}
#sec-sns p.p1{font-size: 16px; font-weight: bold}
#sec-sns h4{font-size: 26px}
#sec-sns h4 span{color: #ffff00}


#sec-sns h4.sns-h4{line-height: 240%; font-size: 24px!important}
#sec-sns h4.sns-h4 span{font-size: 30px!important}

#sec-sns .texts .bt-1{display:inline-block;background-color:rgba(29,157,236,1.00); padding: 20px 40px; margin: 0 5px; color:#fff;}
#sec-sns .texts .bt-2{display:inline-block;padding: 20px 40px; margin: 0 5px;color:#fff;
background: #8A2387;
background: -webkit-linear-gradient(20deg, #f2a73b, #e41c24, #8A2387);
background: linear-gradient(20deg, #f2a73b, #e41c24, #8A2387);
}
#sec-sns .texts .bt i{font-size: 20px}
#sec-sns .texts .bt:hover{opacity: .8}



#sec-sns .texts{position: relative; padding: 50px}
#sec-sns p.p2{position: absolute; top:-15px; left: 0; width: 100%;}
#sec-sns p.p2 span{display: inline-block; background-color: #ffff00; margin: 0 auto; padding: 5px 50px; border-radius: 20px; font-weight: bold}

#sec-sns table{border:solid 1px #0071bc; border-spacing: 0; width: 100%; max-width: 500px; margin: 0 auto 30px}
#sec-sns th{background-color: #0071bc; color:#fff; font-size: 14px; padding: 10px}
#sec-sns td{background-color: #fff;font-size: 20px; font-weight: bold; padding: 10px; letter-spacing: 2px}

#sec-sns p.p3{text-align: left;font-weight: bold; font-size: 14px; max-width: 500px; margin: 0 auto 30px}

#sec-sns .bt-red{display: block;  color:#fff; background-color:rgba(200,0,3,1.00);color:#fff;  padding: 20px; border-radius: 3px;max-width: 300px; margin: 0 auto; font-size: 14px; font-weight: bold}
#sec-sns .bt-red:hover{opacity: .8}



@media screen and (max-width:600px){

#sec-sns{padding: 50px 10px}

#sec-sns .bg-1{padding: 20px 5px 40px 5px}

#sec-sns h3{font-size: 20px; margin-bottom: 10px}
#sec-sns h3 i{font-size: 30px}


#sec-sns p.p1{font-size: 16px; font-weight: bold}
#sec-sns h4{font-size: 20px;padding: 0 20px}

#sec-sns .texts{position: relative; padding: 50px 10px}

#sec-sns p.p2{position: absolute; top:-25px; left: 0; width: 100%;}
#sec-sns p.p2 span{display: inline-block; background-color: #ffff00; margin: 0 auto; padding: 5px 30px; border-radius: 20px; font-weight: bold}

#sec-sns table{border:solid 1px #0071bc; border-spacing: 0; width: 100%; max-width: 500px; margin: 0 auto 20px}
#sec-sns th{background-color: #0071bc; color:#fff; font-size: 12px; padding: 10px}
#sec-sns td{background-color: #fff;font-size: 14px; font-weight: bold; padding: 10px; letter-spacing: 1px}

#sec-sns p.p3{text-align: left;font-weight: bold; font-size: 12px; max-width: 500px; margin: 0 auto 10px}

#sec-sns .bt-red{color:#fff;  padding: 20px 10px; font-size: 12px;}


#sec-sns h4.sns-h4{line-height: 180%; font-size: 16px!important}
#sec-sns h4.sns-h4 span{font-size: 20px!important}
#sec-sns .texts .bt{display: block}

#sec-sns .texts .bt-1{background-color:rgba(29,157,236,1.00); padding: 20px 40px; margin: 0 5px 10px; color:#fff;}
#sec-sns .texts .bt-2{ padding: 20px 40px; margin: 0 5px;color:#fff;
background: #8A2387;
background: -webkit-linear-gradient(20deg, #f2a73b, #e41c24, #8A2387);
background: linear-gradient(20deg, #f2a73b, #e41c24, #8A2387);
}


#sec-sns .texts .bt i{font-size: 20px}
#sec-sns .texts .bt:hover{opacity: .8}


}





.social{text-align: center; width: 100%; padding: 50px 0 0; background-color: #000; position:relative; z-index: 1}
.bt-tw{display: inline-block; vertical-align: top}
.bt-fb{display: inline-block; vertical-align: top}


**/













footer{text-align: center;  padding: 20px; background-color: #000; z-index: 1; position: relative}
footer img{max-width: 250px}








/* Scroll Trigger */

.trigger{
	-webkit-transition: -webkit-transform 1.0s ease .2s, opacity 1.0s ease .2s;	
	transition: transform 1.0s ease .2s, opacity 1.0s ease .2s;		
}
.trigger-1{
	-webkit-transition: -webkit-transform 1.0s ease .2s, opacity 1.0s ease .2s;	
	transition: transform 1.0s ease .2s, opacity 1.0s ease .2s;	
}
.trigger-2{
	-webkit-transition: -webkit-transform 1.0s ease .3s, opacity 1.0s ease .3s;	
	transition: transform 1.0s ease .3s, opacity 1.0s ease .3s;	
}
.trigger-3{
	-webkit-transition: -webkit-transform 1.0s ease .4s, opacity 1.0s ease .4s;	
	transition: transform 1.0s ease .4s, opacity 1.0s ease .4s;		
}
.trigger-4{
	-webkit-transition: -webkit-transform 1.0s ease .4s, opacity 1.0s ease .4s;	
	transition: transform 1.0s ease .4s, opacity 1.0s ease .4s;	
}
.trigger-5{
	-webkit-transition: -webkit-transform 1.0s ease .5s, opacity 1.0s ease .5s;	
	transition: transform 1.0s ease .5s, opacity 1.0s ease .5s;	
}
.trigger-6{
	-webkit-transition: -webkit-transform 1.0s ease .6s, opacity 1.0s ease .6s;
	transition: transform 1.0s ease .6s, opacity 1.0s ease .6s;	
}
.trigger-7{
	-webkit-transition: -webkit-transform 1.0s ease .7s, opacity 1.0s ease .7s;
	transition: transform 1.0s ease .7s, opacity 1.0s ease .7s;	
}
.trigger-8{
	-webkit-transition: -webkit-transform 1.0s ease .8s, opacity 1.0s ease .8s;
	transition: transform 1.0s ease .8s, opacity 1.0s ease .8s;	
}
.trigger-9{
	-webkit-transition: -webkit-transform 1.0s ease .9s, opacity 1.0s ease .9s;
	transition: transform 1.0s ease .9s, opacity 1.0s ease .9s;	
}
.trigger-10{
	-webkit-transition: -webkit-transform 1.0s ease 1s, opacity 1.0s ease 1s;
	transition: transform 1.0s ease 1s, opacity 1.0s ease 1s;	
}
.trigger-11{
	-webkit-transition: -webkit-transform 1.0s ease 1.5s, opacity 1.0s ease 1.5s;
	transition: transform 2s ease 1.2s, opacity 2s ease 1.2s;	
}

.invisible {
	-webkit-transition: opacity .5s ease;
	-moz-transition: opacity .5s ease;
	-o-transition: opacity .5s ease;
	-ms-transition: opacity .5s ease;
	transition: opacity .5s ease;
	opacity: 0.0;
}

.visible {
	-webkit-transition: opacity 1.0s ease;
	-moz-transition: opacity 1.0s ease;
	-o-transition: opacity 1.0s ease;
	-ms-transition: opacity 1.0s ease;
	transition: opacity 1.0s ease;
	opacity: 1.0;
}

.fromTopIn{
	-webkit-transform: translate(0,0);	
	-moz-transform: translate(0,0);
	-o-transform: translate(0,0);
	-ms-transform: translate(0,0);
	transform: translate(0,0);
	opacity: 1.0;
	animation-name: blur;
  	animation-duration: 1800ms;
}

.fromTopOut{
	-webkit-transform: translate(0,-40px);	
	transform: translate(0,-40px);
	opacity: 0.0;
}

.fromBottomIn{
	-webkit-transform: translate(0,0);	
	-moz-transform: translate(0,0);
	-o-transform: translate(0,0);
	-ms-transform: translate(0,0);
	transform: translate(0,0);
	opacity: 1.0;
	
}

.fromBottomOut
{
	-webkit-transform: translate(0,20px);	
	-moz-transform: translate(0,20px);
	-o-transform: translate(0,20px);
	-ms-transform: translate(0,20px);
	transform: translate(0,20px);
	opacity: 0.0;
}

.fromLeftIn
{
	-webkit-transform: translate(0,0);	
	-moz-transform: translate(0,0);
	-o-transform: translate(0,0);
	-ms-transform: translate(0,0);
	transform: translate(0,0);
	opacity: 1.0;
}

.fromLeftOut
{
	-webkit-transform: translate(-20px,0);	
	-moz-transform: translate(-20px,0);
	-o-transform: translate(-20px,0);
	-ms-transform: translate(-20px,0);
	transform: translate(-20px,0);
	opacity: 0.0;
}

.fromRightIn
{
	-webkit-transform: translate(0,0);	
	-moz-transform: translate(0,0);
	-o-transform: translate(0,0);
	-ms-transform: translate(0,0);
	transform: translate(0,0);
	opacity: 1.0;
}

.fromRightOut
{
	-webkit-transform: translate(20px,0);	
	-moz-transform: translate(20px,0);
	-o-transform: translate(20px,0);
	-ms-transform: translate(20px,0);
	transform: translate(20px, 0);
	opacity: 0.0;
}

.scaleUpIn
{
	-webkit-transform: scale(1.0,1.0);
	-moz-transform: scale(1.0,1.0);
	-o-transform: scale(1.0,1.0);
	-ms-transform: scale(1.0,1.0);
	transform: scale(1.0,1.0);
	opacity: 1;
	
	animation-name: blur;
  	animation-duration: 1800ms;
}
@keyframes blur{
	0% {
		-webkit-filter: blur(100px);
		filter: blur(100px);
	}
	100% {
		-webkit-filter: blur(0px);
		filter: blur(0px);
	}

	
}
.scaleUpOut
{
	-webkit-transform: scale(1.2,1.2);
	-moz-transform: scale(1.2,1.2);
	-o-transform: scale(1.2,1.2);
	-ms-transform: scale(1.2,1.2);
	transform: scale(1.2,1.2);
	opacity: 0;
	
}

.scaleDownIn
{
	-webkit-transform: scale(1.0,1.0);	
	-moz-transform: scale(1.0,1.0);
	-o-transform: scale(1.0,1.0);
	-ms-transform: scale(1.0,1.0);
	transform: scale(1.0,1.0);
	opacity: 1.0;
}

.scaleDownOut
{
	-webkit-transform: scale(0.7,0.7);	
	-moz-transform: scale(0.7,0.7);
	-o-transform: scale(0.7,0.7);
	-ms-transform: scale(0.7,0.7);
	transform: scale(0.7,0.7);
	opacity: 0.0;
}



#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; font-size:12px}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;overflow:visible}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

#cboxOverlay{background:#000;}
#colorbox{outline:none}
#cboxContent{margin:0px;background:#fff}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxTitle{position:absolute; bottom:-30px; left:0; color:#fff; font-size:14px; font-weight: bold;text-align: center; width: 100%}
#cboxCurrent{position:absolute; bottom:-30px; left:0px; color:#ccc; font-size: 12px}
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:none;}
#cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}


#colorbox .slick-arrow{color:#fff; font-size: 60px;position: absolute;top:50%}
#cboxPrevious .slick-arrow{margin-top: -60px; left: -40px}
#cboxNext .slick-arrow{margin-top: -60px; right: -40px}


#cboxClose{font-size:40px; color:#fff; position: absolute; top:-40px; right: -50px}



@media screen and (max-width: 800px) {

#cboxClose{font-size:30px;top:-50px; right: -30px}
#colorbox .slick-arrow{font-size: 40px}
#cboxPrevious .slick-arrow{margin-top: -40px; left: -25px}
#cboxNext .slick-arrow{margin-top: -40px; right: -25px}

}
@media screen and (max-width: 500px) {

	#cboxClose{font-size:30px;top:-50px; right: -10px}
	#colorbox .slick-arrow{font-size: 40px}
	#cboxPrevious .slick-arrow{margin-top: -30px; left: -5px}
	#cboxNext .slick-arrow{margin-top: -30px; right: -5px}
	
	}