@charset "UTF-8";

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	     -o-box-sizing: border-box;
	    -ms-box-sizing: border-box;
	        box-sizing: border-box;
}
body{
	width: 100%;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	/*font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;*/
	-webkit-text-size-adjust: 100%;
}
a{text-decoration: none;}
a:not(.tab_item):link, a:not(.tab_item):visited{color: inherit; border-bottom: none;}
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
html,body,.container,#start-section {height:100%;}



#start-section{
	height: 100%;
	width:auto;
	display: block;
}
#start-section .start-wrapper{
	width: auto;
	height: 100%;
	margin: auto 0;
	background:#d2ecec;
}
#start-section .start-wrapper .imgbox{
	height: 100%;
	margin:0 auto;
	text-align: center;
}
#start-section .start-wrapper .imgbox img.start_img_pc{height: 100%;}
#start-section .start-wrapper .imgbox img.start_img_sp{display: none;}
#start-section a.start-arrow{
	position: absolute;
	bottom: 12%;
	left: 50%;
	display: inline-block;
	width: 180px;
	height: 180px;
	margin-left: -90px;/*サイズの半分指定*/
}
#start-section a.start-arrow:hover{}



header{
	width: 100%;
	border-top: 2px solid #141414;
	border-bottom: 2px solid #141414;
	position: fixed;
	background-color: #fff;
	height: 38px;
	z-index: 9999999;
}
.header-wrapper{
	width: 100%;
}
.header-fixed{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999999;
}
header .logo-area{
	text-align: center;
	padding: 0.6em 0;
	width: 100%;
}
.header-wrapper img.ntj_logo{
	padding-right: 2.8em;
}
.header-wrapper ul{
	padding:0.4em;
	text-align: right;
}
.header-wrapper ul li{
	display: inline-block;
	margin: 0 1.12em;
	vertical-align: middle;
	font-size: 12px;
	font-weight: normal;
}
.header-wrapper ul li.about-pc a{
	/*background: linear-gradient(rgba(0,0,0,0) 50%, #c3dec3 50%);
    background-position: 0 0;
    background-size: auto 200%;
    transition: .3s;
    border-radius: 18px;*/
	color: #01580a;
    padding: 0.6em;
}
.header-wrapper ul li.about-pc a:hover{
	background-position: 0 100%;
	/*color: #fff;*/
}
.header-wrapper ul li.about-pc img{
	height:12px;
	width: auto;
	padding-right: 0.2em;
}
.header-wrapper ul li.about-sp{display: none;}
.header-wrapper ul li.sns-tw{}



#topImage{color: #141414;}
#topImage.swiper-container{
	width: 100%;
}
#topImage .swiper-wrapper{}
#topImage .swiper-slide{
	width:100%;
	background-size:cover;
	padding:50px 0;
}

#topImage .blur-box{
	position: relative;
	z-index: 0;
	overflow: hidden;
}
#topImage .blur-box:before{
	content: '';
	background: inherit;/*.bgImageで設定した背景画像を継承する*/
	-webkit-filter: blur(40px);
	-moz-filter: blur(40px);
	-o-filter: blur(40px);
	-ms-filter: blur(40px);
	filter: blur(40px);
	position: absolute;
	top: -270px;
	left: -270px;
	right: -270px;
	bottom: -270px;
	z-index: -1;
}

.slide-area{
	width: 90%;
	max-width: 900px;
	margin:0 auto;
	display: table;
}
.slide-area .leftBox{
	display: table-cell;
	vertical-align: middle;
	width: 290px;
}
.leftBox .capt-area{
	background: url('../img02/android.svg') no-repeat 50% 50%;
	background-size: contain;
	text-align: center;
    padding:74px 32px 40px;
}
.leftBox img.capture{
	width: 100%;
}
.leftBox a.dl{
	letter-spacing: 0.04em;
	font-size: 1.16em;
	display: block;
	margin:-14px 6px 0;
	background-color:rgba(255, 255, 255, 0.6);
	border: 2px solid #141414;
}
.leftBox .dl-btn{
	padding: 0.8em 0.1em;
	text-align: center;
	font-size: 1.16em;
}
.leftBox a.dl:hover{
	background:rgba(255, 255, 255, 0.85);
	border:2px solid rgba(255, 255, 255, 0.85);
}
.leftBox a.dl:active{
	background:rgba(255, 255, 255, 0.85);
	border:2px solid rgba(255, 255, 255, 0.85);
}

.slide-area .rightBox{
	width: auto;
	height: auto;
	display: table-cell;
	vertical-align: middle;
}
.rightBox-wrapper{
	background-color: rgba(255, 255, 255, 0.3);
	padding:0 4%;
	margin-left: 4%;
	min-height: 500px;
	/*box-shadow:0 0 30px -12px #6d6d6d;
	-moz-box-shadow:0 0 30px -12px #6d6d6d;
	-webkit-box-shadow:0 0 30px -12px #6d6d6d;*/
}
.right-above{
	font-size: 32px;
	padding:10% 0 4%;
	text-align: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.6);
	line-height: 1.2;
}
.right-above p{}
.right-bottom{
	text-align: center;
	font-size: 1em;
	padding: 0 0 10%;
	letter-spacing: 0.02em;
	line-height: 1;
	color:#2b2b2b;
}
.right-bottom p{margin-top:1.2em; line-height:1.26; font-size:0.88em;}
.right-bottom p.imgBox{width:90%; margin:0.1em auto 0;}
.right-bottom p img{width:100%;}



#contents-cat{
	width: 100%;
    margin: 0 auto;
    padding:2% 4% 5%;
    background:#fff url('../img02/bg_ptn.svg')0 0 repeat;
    background-size: 9px;
    border: 3px solid #141414;
}
.select-box-cat{
	width: 100%;
	margin:0 auto;
	border:3px solid #141414;
	text-align: center;
	padding:0;
	position: relative;
    z-index: 99999;
	box-shadow:0px 12px 12px -12px #3a3a3a;
	-moz-box-shadow:0px 12px 12px -12px #3a3a3a;
	-webkit-box-shadow:0px 12px 12px -12px #3a3a3a;
	background:#fff url('../img02/cat_arw.svg') 1.4% center no-repeat;
	background-size: 24px;
}
.select-box-cat select{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 0;
	border: 0;
	margin: 0 auto;
	padding: 10px 6%;
	background: none transparent;
	vertical-align: middle;
	font-size: inherit;
	color: inherit;
	overflow : hidden;
	outline : none;
}
.select-box-cat select.styled{
	width: 100%;
	font-size: 1.4em;
	color: #141414;
}
.icon-refer-container{
	width: 100%;
	margin:4% auto 0;
	/*border:1px solid #141414;*/
	text-align: left;
	background-color: #fff;
}
.icon-refer-inner{padding:1%;}
.icon-refer-box{display: inline-block; margin:0 0.4em 0.4em 0;}
.icon-refer-box span{
	display: inline-block;
	vertical-align: middle;
	font-size: 0.82em;
	color: #141414;
	line-height: 21px;
	/* ↑↓この２つ同じにする */
	padding-left: 21px;
}

#contents-cat .swiper-container{
	width: 100%;
	margin: 0 auto;
	background-color:#fff;
	padding: 0 2%;
	z-index: 0;
}
#contents-cat .cat-ttl-box{
	width: 100%;
	margin: 40px auto 0;
	border-bottom:3px solid #141414;
	/*padding-left: 2%;*/
	position: relative;
}
#contents-cat .cat-ttl{
	font-size: 1.4em;
	display: inline-block;
	border: 3px solid #141414;
	border-bottom: none;
	height: 50px;
	line-height: 46px;
	text-align: center;
/*	box-shadow:0px -11px 14px -7px #a7a7a7;
	-moz-box-shadow:0px -11px 14px -7px #a7a7a7;
	-webkit-box-shadow:0px -11px 14px -7px #a7a7a7;
*/}
#contents-cat .cat-ttl span{padding: 0 2em;}
#contents-cat .cssarrow{
	display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 50px 0 0 35px;
	border-color: transparent transparent transparent #141414;
	position: absolute;
	/*margin-left: -6px;
	margin-bottom: -15px;*/
}
#contents-cat .swiper-wrapper{
	width: 100%;
	margin:4% auto;
	/*swiper 使用しないver
	overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;*/
}
#contents-cat .swiper-slide{}
#contents-cat .dress-card-block{
	display: inline-block;
	text-align: center;
	/*width: 20%;*/
	color: #141414;
}

#contents-cat .dress-card-block .feature-box{
	letter-spacing: -.40em;
	display: block;
	width: 100%;
	height: 20px;
	margin:0.4em 0 0.3em;
}
#contents-cat .feature-box span{
	letter-spacing: normal;
	display: inline-block;
	width: 20px;
	height: 20px;
	margin:0 1%;
}
#contents-cat .icon-refer-box span.new , 
#contents-cat .feature-box span.new{
	background: url('../img02/icon/icon_new.svg') 0 center no-repeat;
	background-size: 20px;
}
#contents-cat .icon-refer-box span.sound , 
#contents-cat .feature-box span.sound{
	background: url('../img02/icon/icon_sound.svg') 0 center no-repeat;
	background-size: 20px;
}
#contents-cat .icon-refer-box span.cutin , 
#contents-cat .feature-box span.cutin{
	background: url('../img02/icon/icon_cutin.svg') 0 center no-repeat;
	background-size: 20px;
}
#contents-cat .icon-refer-box span.cinema , 
#contents-cat .feature-box span.cinema{
	background: url('../img02/icon/icon_cinema.svg') 0 center no-repeat;
	background-size: 20px;
}
#contents-cat .icon-refer-box span.search , 
#contents-cat .feature-box span.search{
	background: url('../img02/icon/icon_search.svg') 0 center no-repeat;
	background-size: 20px;
}
#contents-cat .icon-refer-box span.spot , 
#contents-cat .feature-box span.spot{
	background: url('../img02/icon/icon_spot.svg') 0 center no-repeat;
	background-size: 20px;
}
#contents-cat .icon-refer-box span.tablet , 
#contents-cat .feature-box span.tablet{
	background: url('../img02/icon/icon_tablet.svg') 0 center no-repeat;
	background-size: 20px;
}

.contents-cat-body {
	background: #FFFFFF;
}

#contents-cat .dress-card-block img{
	width:auto;
	height:260px;
	display: block;
	margin: 0 auto;
	box-shadow:6px 6px 8px -4px #9a9a9a;
	-moz-box-shadow:6px 6px 8px -4px #9a9a9a;
	-webkit-box-shadow:6px 6px 8px -4px #9a9a9a;
}
#contents-cat .dress-dl{
	border: 2px solid #9c9c9c;
	/* border-bottom: 4px solid #7d7d7d; */
	padding: 0.6em 0;
	margin-bottom: 0.4em;
	text-align: center;
	border-radius: 2px;
	display: block;
	background-color: #f7f7f7;
}
#contents-cat .dress-ttl{
	font-size: 0.94em;
	padding:0.5em 0.1em 0;
	font-weight: bold;
	display: block;
	word-break: break-all;
	line-height: 1.1;
	/*border:1px solid;*/
}
#contents-cat .copyright{
	font-size: 12px;
	padding: 0.24em 0 0;
	word-break: break-all;
	/*text-align: left;*/
	color: #777;
	letter-spacing: -0.02em
}
#contents-cat .dress-price{
	display:block;
	padding:0.6em 0.2em 0;
	text-align: right;
}
#contents-cat .dress-price span{
	font-size: 0.82em;
	color: #cea504;
	letter-spacing: 0.08em;
	font-weight: bold;
}



#contents-last{}
#contents-last .app-introduce{
	width: 100%;
	margin: 0 auto;
	display: table;
	/*border-top: 3px solid #141414;
	border-bottom: 3px solid #141414;*/
}

#contents-last .left-box{
	width: 40%;
	height: 340px;
	display: table-cell;
	vertical-align:middle;
	background:#55de8f url('../img02/last_l_bg_pc.png') no-repeat;
	background-size:auto 340px;
	background-position: 100% 0;
}
#contents-last .left-box div{
	margin:0 auto;
	width: 100%;
	text-align: center;
	font-size: 0.9em;
}
#contents-last .left-box img{margin-right: 30px;}
#contents-last .left-box img.text-sns01{width: 80%; max-width: 653px;}
#contents-last .left-box img.text-sns02{width:60%; max-width: 562px;}
#contents-last .left-box p.btn-t-follow{
	width: 50%;
	max-width: 190px;
	display: inline-block;
	margin:10px 30px 0 0;
	border-bottom: 3px solid #1da1f2; 
	border-radius: 8px;
	background: #fbfffd url('../img02/twitter_logo.svg') 6px 50% no-repeat;
    background-size: 20px;
	padding: 0.8em 0 0.8em 18px;
	color: #141414;
}




#contents-last .right-box{
	width: auto;
	height: 340px; 
	display: table-cell;
	vertical-align:middle;
}
#contents-last .right-box .app-ttl{
	text-align: center;
	width: 60%;
	margin:10px auto;
}
#contents-last .right-box img.app-ttl-img{max-width: 400px;}
#contents-last .right-box img.dress-ba{display: none;}

#contents-last .right-box .app-batch{
	text-align: center;
	width: 70%;
	max-width: 600px;
	margin: 0 auto;
}
#contents-last .right-box .app-batch .app-batch-inner{display: inline-block; width: 40%;}
#contents-last .right-box p img.img-qr{width: 100px;}
#contents-last .right-box p.attention{
	text-align: center;
	margin-top: 16px;
	font-size: 0.86em;
	color: #006400;
}


footer{width: 100%;	background-color: #e0e0e0; position: absolute;}
footer .contact{
	color: #737373;
	padding: 3em 0 1em;
	text-align: center;
}
footer .contact .logo-area{width: 160px;margin:0 auto;}
footer .contact .text-area{margin-top: 2.4%;}
footer .contact p{
	font-size: 14px;
	margin-bottom: 1.6em;
}
footer .contact p span{display: none;}
footer .contact p.credit{
	width: 100%;
	margin:3em auto 0;
	border-top:1px solid #a7a7a7;
	padding-top: 1.4%;
}
footer .contact .sns-box{width:100%; text-align: center;}
footer .contact .sns-box .sns-ico{margin:0 0.3em;}



.swiper-pagination{
	position: relative;
}
.swiper-pagination-bullet{
	border-radius: 0;
	margin: 2% 1%; 
}

/********** common END **********/






@media screen and (max-width: 1200px) and (orientation: portrait){

	#start-section .start-wrapper .imgbox{
		width: 90%;
		margin:0 auto;
		padding-top:20px; 
	}
	#start-section .start-wrapper .imgbox img.start_img_pc{display: none;}
	#start-section .start-wrapper .imgbox img.start_img_sp{
		width:100%;
		max-width: 750px;
		margin:0 auto;
		display: block;
	}
	#start-section a.start-arrow{bottom: 4%;}

}

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

	.right-bottom{font-size: 0.89em;}
	.select-box-cat{
		background: #fff url('../img02/cat_arw.svg') 2% center no-repeat;
		background-size: 18px;
	}

	#contents-last .app-introduce{}
	#contents-last .left-box{
		width: 46%;
		height: 400px;
		background-position: 100% 0;
		background-size: auto 400px;
	}
	#contents-last .left-box div{
		font-size: 0.8em;
	}
	#contents-last .left-box p.btn-t-follow{
		width: 60%;
		padding: 1em 0 1em 18px;
	}
	#contents-last .right-box{height: 400px;}
	#contents-last .right-box .app-ttl{width: 80%; margin-bottom: 20px;}
	#contents-last .right-box img.dress-ba{
		display:block;
		margin:10px auto;
		width: 130px;
	}
	#contents-last .right-box .app-batch{
		width: 90%;
	}

	footer .contact{padding: 3em 0 1em;}
	footer .contact .text-area{margin-top: 3%;}
	footer .contact p{line-height: 1.3;}
	footer .contact p.credit{margin:3em auto 0;}

	.swiper-pagination-bullet{margin: 2% 12px;}



}
/********** タブレット END **********/



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

	#start-section .start-wrapper .imgbox{width:94%; padding-top: 10%;}
	#start-section .start-wrapper .imgbox img.start_img_pc{display: none;}
	#start-section .start-wrapper .imgbox img.start_img_sp{
		width:100%;
		display: block;
	}
	#start-section a.start-arrow{
		bottom: 6%;
		width: 120px;
		height: 120px;
		margin-left:-60px;/*サイズの半分指定*/
	}
	.header-wrapper ul{
		background-size: auto 20px;
		border-top:none;
		border-bottom:none;
		padding:0.2em 0.4em;
	}
	.header-wrapper ul li{
		display: inline-block;
		margin: 0;
	}
	.header-wrapper ul li.about-pc{display: none;}
	.header-wrapper ul li.about-sp{display: inline-block;margin:0.2em;}
	.header-wrapper ul li.sns-tw{margin:0.4em;}
	.header-wrapper img{
		height:22px;
		width: auto;
		vertical-align: bottom;
	}
	.header-wrapper img.ntj_logo{
		padding:0;
		padding-right:1.2em;
	}


	#topImage .swiper-slide{padding:8% 0;}
	.slide-area{
		display: block;
		max-width:initial;
	}
	.slide-area .leftBox{
		display: block;
		width: 100%;
		margin:0 auto;
		text-align: center;
	}
	.slide-area .leftBox .capt-area{
		display: block;
		height: 360px;
		width: auto;
		margin:0 auto;
		padding:52px 0 28px;
		margin-bottom: -4%;
	}
	.slide-area .leftBox img.capture{
		height: 100%;
		width: auto;
	}
	.leftBox a.dl{
		width: 100%;
		margin: 4px auto 10px;
		background-color: #f7f7f7;
	}
	.leftBox a.dl:hover{
	background-color:rgba(255, 255, 255, 0.6);
	border:2px solid #141414;
	}
	.slide-area .leftBox .dl-btn{
		padding:5% 0;
		box-shadow:0px 7px 7px -3px rgba(0, 0, 0, 0.3);
		-moz-box-shadow:0px 7px 7px -3px rgba(0, 0, 0, 0.3);
		-webkit-box-shadow:0px 7px 7px -3px rgba(0, 0, 0, 0.3);
	}	
	.slide-area .rightBox{
		width: 100%;
		height: auto;
		display: block;
	}
	.right-above{
		font-size: 1.34em;
		padding:4% 0;
	}
	.rightBox-wrapper{
		margin:0;
		min-height:initial;
	}
	.right-bottom{
		font-size: 0.86em;
	}


	#contents-cat{
		border: 3px solid #141414;
		padding:2% 2%;
		background-size: 8px;
	}
	.select-box-cat{}
	.select-box-cat select{padding-left:10%;}
	.select-box-cat select.styled{font-size: 1.1em;}

	.icon-refer-container{}
	.icon-refer-inner{padding:16px 3% 0;}
	.icon-refer-box{margin:0.14em 0; min-width: 45%;}
	.icon-refer-box span{font-size: 12px;}

	#contents-cat .dress-card-block{width: 33.333333333333333%;}
	#contents-cat .dress-dl{padding:0.4 0;}
	#contents-cat .cat-ttl{
		height: 44px;
		line-height: 42px;
		border: 2px solid #141414;
		border-bottom: none;
		font-size:1.28em; 
	}
	#contents-cat .cat-ttl-box{border-bottom: 2px solid #141414;margin: 20px auto 0;}
	#contents-cat .swiper-container div.cat-ttl-box:first-of-type{margin-top: 6%;}
	#contents-cat .cat-ttl span{padding: 0 1em;}
	#contents-cat .cssarrow{border-width: 46px 0 0 24px;}
	#contents-cat .swiper-wrapper{margin: 30px auto 10px;}
	#contents-cat .feature-box span{
		width: 22px;
		height: 22px;
	}
	#contents-cat .dress-card-block img{
		width:auto;
		height:180px;
	}
	.contents-cat-body > .dress-card-block {
		width: 32%
	}


	#contents-last .app-introduce{display: block;}
	#contents-last .left-box{
		width:100%;
		/*width: 320px;*/
		height:310px;
		margin:0 auto;
		display: block;
		background: #55de8f;
		/*background:#fff url('../img02/last_l_bg_sp.png') no-repeat;
		background-size:90% auto;
		background-position:50% 70%;*/
		position: relative;
	}
	#contents-last .left-box div{position: absolute;}
	#contents-last .left-box div.left-box-ttl{top:96px;}
	#contents-last .left-box div.left-box-content{top:140px;}
	#contents-last .left-box img{margin:0;}
	#contents-last .left-box img.text-sns01{width:230px; max-width:initial;}
	#contents-last .left-box img.text-sns02{width:192px; max-width:initial;}
	#contents-last .left-box p.btn-t-follow{
		width:54%;
		display:block;
		margin:10px auto 30px;
		padding:1em 0;
		padding-left: 14px;
	}
	#contents-last .right-box{
		width: 100%;
		margin:0 auto;
		height: auto;
		display: block;
		/*border:3px solid #141414;*/
		padding:20px 4%;
	}
	#contents-last .right-box .app-ttl{
		width: 100%;
		margin:0 auto;
	}
	#contents-last .right-box img.app-ttl-img{width:100%; max-width: 400px;}
	#contents-last .right-box img.dress-ba{width: 50%; max-width: 400px; margin:10% auto 0;}
	#contents-last .right-box .app-batch{width:100%; margin-top: 2%;}
	#contents-last .right-box .app-batch .app-batch-inner{width:60%; display:block; margin:0 auto;}
	#contents-last .right-box p img.img-qr{display: none;}


	footer .contact .logo-area{margin-bottom: 2em;}


	.swiper-button-prev,.swiper-button-next{top: 250px;} 
	.swiper-button-next,.swiper-container-rtl .swiper-button-prev {
	background-image: url("../img02/arw_next.svg");
	background-size: 32px auto;
	right: 0px;}
	.swiper-button-prev,.swiper-container-rtl .swiper-button-next {
	background-image: url("../img02/arw_prev.svg");
	background-size: 32px auto;
	left: 0px;}
	.swiper-pagination-bullet{margin: 2% 4%;}


}
/********** モバイル END **********/




/********** 便利class **********/
.bold{font-weight: bold !important;}
.u_line{border-bottom: 1px solid #fff !important;}
.taL{text-align: left !important;}
.taC{text-align: center !important;}
.mt0{margin-top: 0px !important;}
.mt10{margin-top: 10px !important;}
.mt20{margin-top: 20px !important;}
.mt30{margin-top: 30px !important;}
.mt40{margin-top: 40px !important;}
.mt50{margin-top: 50px !important;}
.mb0{margin-bottom: 0px !important;}
.mb10{margin-bottom: 10px !important;}
.mb20{margin-bottom: 20px !important;}
.mb30{margin-bottom: 30px !important;}
.mb40{margin-bottom: 40px !important;}
.mb50{margin-bottom: 50px !important;}
.pt0{padding-top: 0px !important;}
.pt10{padding-top: 10px !important;}
.pt20{padding-top: 20px !important;}
.pt30{padding-top: 30px !important;}
.pb0{padding-bottom: 0px !important;}
.pb10{padding-bottom: 10px !important;}
.pb20{padding-bottom: 20px !important;}
.pb30{padding-bottom: 30px !important;}
/********** 便利class END **********/