@charset "UTF-8";

/*------------------------------------------------------------
    基本設定 コンテンツ幅
------------------------------------------------------------*/
.content {
    margin-bottom: 60px;
}
.content_area {
	position:relative;
	padding: 0 20px;
	margin: 0 auto;
}
.content_area.nopadding_sp {
	padding:0px;
}
@media screen and (min-width: 768px) {
    .content_area, .content_area.nopadding_sp {
        padding: 0 30px;
        max-width: 1320px;
    }
		.nl_lp2023 .content_area{max-width:1160px;}
}
@media screen and (min-width: 992px) {
    .content {
        margin-bottom: 120px;
    }
    .content_area, .content_area.nopadding_sp {
        padding: 0 60px;
    }
}
/*------------------------------------------------------------
    基本設定　カラー
------------------------------------------------------------*/
.bg_lightgray{background-color:#F0F0F0;}
.bg_ivory{background-color:#F4F0E9;}
.bg_gray{background-color:#E7EAEB;}
.bg_gray2{background-color:#CACECE;}
.bg_brown{background-color:#A0967E;}
.bg_lightgreen{background-color:#D7ECE6;}
.bg_darkgreen{background-color:#0C706E;}
.bg_white{background-color:#fff;}
.text_white{color:#ffffff;}
.text_red{color:var(--color-red);}
.text_nicolessgreen{color:var(--color-nicolessgreen);}


/*------------------------------------------------------------
    基本設定　テキスト
------------------------------------------------------------*/
.text_center{text-align:center;}
.text_right{text-align:right;}
.tategaki{writing-mode: vertical-rl;}
.indent{padding-left:1em;text-indent: -1em;}

/*------------------------------------------------------------
    切り替え
------------------------------------------------------------*/
.visibility--s,
.visibility--m,
.visibility--l {
    display: none !important;
}
@media screen and (min-width: 768px) {
    .hidden--s {
        display: none !important;
    }
    .visibility--s {
        display: block !important;
    }
}
/* ----- media END ----- */
@media screen and (min-width: 992px) {
    .hidden--m {
        display: none !important;
    }
    .visibility--m {
        display: block !important;
    }
}
/* ----- media END ----- */
@media screen and (min-width: 1200px) {
    .hidden--l {
        display: none !important;
    }
    .visibility--l {
        display: block !important;
    }
}

/*------------------------------------------------------------
  コンテンツ
------------------------------------------------------------*/
	/*共通*/
ul.basic{
	font-size:1.4rem;
	list-style-type:disc;
	line-height:1.5;
	margin-bottom:1em;
}
ul.basic li{
	margin-left:1.5em;
}


@media screen and (min-width: 768px) {
}
@media screen and (min-width: 960px) {
}
@media screen and (min-width: 1200px) {
}

/*------------------------------------------------------------
  INDEX
------------------------------------------------------------*/
.section_title{
	font-size:6vw;
	text-align:center;
	font-weight:bold;
	margin:2em 0 1em;
	line-height:1.5;
	color:var(--color-darkgreen);
}
.section_title.underline{
	padding-bottom:0.5em;
	border-bottom:1px solid var(--color-darkgreen);
}
.section_title.scene{
	font-weight:normal;
	color:#fff;
	border-top:1px solid #fff;
	border-bottom:1px solid #fff;
	padding:0.5em 0 0.5em;
}
.section_title.comment{
	font-weight:normal;
	color:#333;
	position: relative;
}
.section_title.comment:before,
.section_title.comment:after{
  border-top: 1px solid;
  content: "";
  position: absolute;
  top: 50%;
  width: 15%;
}
.section_title.comment:before{
  left: 0;
}
.section_title.comment:after{
  right: 0;
}

@media screen and (min-width: 768px) {
	.section_title{font-size:3rem;}
	.section_title.comment:before,
	.section_title.comment:after{
		width:30%;
	}
}
@media screen and (min-width: 960px) {
}
@media screen and (min-width: 1200px) {
}


	/* mv */
#nl_mv{
	padding-top:65px;
	background: linear-gradient(180deg, #0C706E 0%, #0C706E 50%, #134045 50%, #134045 100%);
}
#nl_mv_202407{
	margin-top:65px;
	background: linear-gradient(180deg, #087370 0%, #087370 74.1%, #023E3E 74.1%, #023E3E 100%);
}
#nl_mv_202409{
	margin-top:65px;
	background: linear-gradient(180deg, #086F6E 0%, #086F6E 75.9%, #133F45 75.9%, #133F45 100%);
}
#nl_mv_202409_chaba{
	padding-top:65px;
}
.mv_copy{
	text-align:center;
	padding:50px 0% 50px;
	position:relative;
}
.mv_copy_202407{
	text-align:center;
	padding:2% 0% 4%;
	position:relative;
}
.mv_copy_202409_chaba{
	text-align:center;
	position:relative;
}

@media screen and (min-width: 768px) {
	.mv_copy{
		padding:50px 20% 0px;
	}
	.mv_copy_202407{
		padding:2% 15% 4%;
	}
}
@media screen and (min-width: 960px) {
}
@media screen and (min-width: 1200px) {
}


	/*intoro*/
#nl_intro{
	padding:40px 0 40px;
}

@media screen and (min-width: 768px) {
}
@media screen and (min-width: 960px) {
}
@media screen and (min-width: 1200px) {
}


	/*lineup*/
#nl_lineup{
	padding:0px 0 40px;
}

.lineup_box{
	padding-bottom:0px;
}
.lineup_box_title{
	text-align:center;
	margin:3% 0 3%;
	font-size:4vw;
	font-weight:bold;
	line-height:1.8;
}
.charactor_box_text{
	display: flex;
	flex-direction: row;
}

@media screen and (min-width: 768px) {
	.lineup_box_title{
		margin:1em 0 1em;
		font-size:1.4rem;
	}
}
@media screen and (min-width: 960px) {
}
@media screen and (min-width: 1200px) {
}

	/*scene*/
ul.list_star{
	font-size:1.5rem;
	line-height:1.5;
	margin-bottom:1em;
}
ul.list_star li{
	position:relative;
	padding-left:2em;
	background-image:url(../images/vape/icon_stars.png);
	background-position:0 center;
	background-repeat:no-repeat;
	background-size:1.5em;
	margin-bottom:2em;
}
ul.list_star li::after{
	content:'';
	background-position:center center;
	background-repeat:no-repeat;
	background-size:3em;
	width:3em;
	height:3em;
	position:absolute;
	display:block;
	top:50%;right:0;
	transform:translateY(-50%);
}
ul.list_star li.car::after{
	background-image:url(../images/vape/icon_car.png);
}
ul.list_star li.cat::after{
	background-image:url(../images/vape/icon_cat.png);
}
ul.list_star li.house::after{
	background-image:url(../images/vape/icon_house.png);
}
ul.list_star li.child::after{
	background-image:url(../images/vape/icon_kids.png);
}

@media screen and (min-width: 768px) {
	ul.list_star{
		font-size:2rem;
	}
}
@media screen and (min-width: 960px) {
}
@media screen and (min-width: 1200px) {
}

	/*comment*/
.bg_line_diagonal{
  background-image: url(../images/vape/comment_bg_top.png), url(../images/vape/comment_bg_bottom.png);
  background-repeat: no-repeat, no-repeat;
  background-position:top right, bottom left;
	background-size:contain, contain;
}

	/*store*/
#nl_store{
	color:var(--color-darkgreen);
}
.shop_box h3{
	font-size:1.6rem;
}
.shop_box h3 .logo{
	height:2.5em;
	width:auto;
	margin-right:0.75em;
	vertical-align:middle;
}


	/*voice*/
#nl_voice{
	padding:0px 0 80px;
}


	/*caution*/
#nl_caution{
	color:var(--color-darkgreen);
}
#nl_caution h3{
	font-size:1.6rem;
	margin:2em 0 1em;
}
@media screen and (min-width: 768px) {
	#nl_caution h3{
		font-size:1.6rem;
	}
}
@media screen and (min-width: 960px) {
}
@media screen and (min-width: 1200px) {
}

	/*faq*/
.faq_box{
	padding-bottom:10px;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.faq_box h3{
	color:var(--color-darkgreen);
	font-size:1.6rem;
	padding-left:2.5em;
	padding-bottom:0.75em;
	margin-bottom:0.75em;
	border-bottom:1px solid #ACACAC;
}
.faq_box h3 span {
  display: inline-block;
  background: var(--color-darkgreen);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  color: #fff;
  font-size: 24px;
  text-align: center;
  line-height: 40px;
	margin-left:-2em;
	margin-right:0.5em;
}
.faq_box p{
	background:#D2E3EA;
	padding:1em;
	margin-bottom:0;
	height: 100%;
}
@media screen and (min-width: 768px) {

}
@media screen and (min-width: 960px) {
}
@media screen and (min-width: 1200px) {
}


	/*inquiry*/
#nl_inquiry{
	padding:0px 0 40px;
	color:var(--color-darkgreen);
}
#nl_inquiry .lineup_box_title{
	font-size:4.5vw;
}
.inquiry_phone{
	border-top:2px solid var(--color-darkgreen);
	border-bottom:2px solid var(--color-darkgreen);
	padding:0.5em 0;
	font-weight:bold;
	font-size:8vw;
}
.btn{
	background-color:var(--color-darkgreen);
	border:2px solid var(--color-darkgreen);
	border-radius:.5em;
	color:#fff;
	transition:.4s;
	font-size:4vw;
}
.btn a{
	display:block;
	padding:1em;
}
.btn:hover{
	transition:.4s;
	background-color:#fff;
	color:var(--color-darkgreen);
}

@media screen and (min-width: 768px) {
	#nl_inquiry .lineup_box_title{
		font-size:2rem;
	}
	.inquiry_phone{
		font-size:4rem;
	}
	.btn{
		font-size:1.8rem;
	}
}


/* LP 202311 */
#nl_lp2023_mv{
	padding-top:65px;
	padding-bottom:20px;
	background: linear-gradient(90deg, #134045 0%, #134045 50%, #0C706E 50%, #0C706E 100%);
}
#nl_lp2023_mv h1{
	padding:20px 0 30px;
}
#nl_lp2023_mv h1 img{
	width:100%;
	max-width:600px;
}

.box_bgwhite{
	background:#fff;
	padding:20px;
	border-radius:10px;
}
#nl_lp2023_mv .box_bgwhite p{font-size:3.5vw;}
.mv_annotetion{font-size:3.5vw;}

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

}
@media screen and (min-width: 960px) {
	#nl_lp2023_mv h1{
		padding:50px 0 60px;
	}
	#nl_lp2023_mv .box_bgwhite p{font-size:1.4rem;}
	.mv_annotetion{font-size:1.6rem;}
}
@media screen and (min-width: 1200px) {
	
}