@charset "UTF-8";
/* CSS Document */
body{-webkit-font-smoothing: antialiased; font-size: 16px; font-weight: 400;}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

#beams{

	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "Lucida Sans Unicode", Arial, Verdana, sans-serif;}

#beams img{
	max-width: 100%;
	height: auto;
}
#beams p{
	margin-bottom: 0 !important;}

#beams ul,
#beams ol{padding: 0; margin: 0;}

a:hover img{
	opacity: .7;
	transition: .5s;
}

br.pc_br{display: block;}
br.tb_br{display: none;}
br.sp_br{display: none;}

.hidden-pc{display: none;}
.hidden-sp{display: block;}

h3.beams_sttl_line{
	background: url(../../images/beams/ttl_line.gif) no-repeat bottom center;
	background-size: 60px 3px;
	font-family: Abel, CmnYuGothicM, "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "Mairyo UI", "メイリオ", Meiryo, sans-serif;
	font-size: 50px;
	letter-spacing: 5px;
	text-align: center;
	margin-top: 100px;
	padding-bottom: 10px;
	margin-bottom: 30px;
	 font-weight: 400;
}



.beams_kv{
	position: relative;
	background: url(../../images/beams/kv.jpg) no-repeat top center;
	height: 0;
	padding-top: 35.5%;
	background-size: 100%;
	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}
}

.beams_kv h1{
	max-width: 1000px;
	position: absolute;
	top: 30%;
	left: 0;
	right: 0;
	margin: auto;
	padding-left: 40px;
}
.beams_kv h1 img{
	width: 280px;
	height: auto;
}

.beams_contents{
	max-width: 1000px;
	margin: auto;
}

.beams_lead{
	padding: 40px 0;
	color: #FFF;
	background: #5e6168;
}

.beams_logo{
	float: left;
	width: 33%;
	padding-top: 5%;
}
.beams_lead_text{
	float: right;
	line-height: 2;
	text-align: justify;
	text-justify: inter-ideograph;
	width: 63%;}

.beams_arrow_btn a{
	color: #FFF;
	letter-spacing: 1px;
	display: inline-block;
	border: 2px solid #FFF;
	padding: 15px 20px;
	line-height: 1;
	box-sizing: border-box;
	text-align: center;
	position:relative;}

.beams_arrow_btn img{
	width: 31px;
	height: auto;
	position: absolute;
	right: -20px;
	top: 15px;}

.beams_arrow_btn a:hover{
	opacity: .7;
	transition: 0.5s;
}

.beams_lead_text .beams_arrow_btn{margin-top: 20px;}

@media only screen and (max-width:1000px) {
	.beams_kv h1 img{width: 200px;}
	.beams_contents{padding:  0 10px; box-sizing: border-box;}
	}

@media only screen and (max-width:768px) {
	.beams_kv h1{top: 25%;}
	.beams_kv h1 img{width: 160px;}
	.beams_lead{padding: 30px 0;}
	br.tb_br{display: block;}
	br.pc_br{display: none;}
}
@media only screen and (max-width:599px) {

	br.sp_br{display: block;}
	.hidden-pc{display: block;}
	.hidden-sp{display: none;}

	#beams{font-size: 14px;}

	.beams_kv{
		background: url(../../images/beams/kv-sp.jpg) no-repeat top center;
		padding-top: 73.3333%;
		background-size: 100%;}

	.beams_kv h1{padding-left: 10px; top: 30%;}
	.beams_kv h1 img{width: 140px;}
	h3.beams_sttl_line{font-size: 36px; margin-top: 50px;}
	.beams_lead{padding: 20px 0;}
	.beams_logo,.beams_lead_text{
		float: none; width: 100%; box-sizing: border-box;}
	.beams_logo{margin-bottom: 20px; padding: 0 60px;}
	.beams_lead_text{line-height: 1.8;}
	.beams_arrow_btn{text-align: center;}
}

/*about_beams-solar*/
.about_beams-solar{
	padding: 80px 0 30px 0;
	background: url(../../images/beams/bg_beams-solar.gif) no-repeat top center;
	background-size: cover;
}


.about_beams-solar h2 img{max-width: 100%; height: auto;}

.beams-solar_lead{
	font-size: 20px;
	padding: 20px 0;
	line-height: 2;
	text-align: center;
}
.beams-solar_lead span{
	font-size: 22px;
	font-family: Abel, CmnYuGothicM, "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "Mairyo UI", "メイリオ", Meiryo, sans-serif;}

.beams-solar_img{
	float: left;
	width: 100%;
	box-sizing: border-box;
	padding-right: 560px;
	margin-right: -560px;
}

.beams-solar_outline{
	float: right;
	padding-top: 30px;
	position: relative;
	width: 560px;
	font-family: Abel, CmnYuGothicM, "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "Mairyo UI", "メイリオ", Meiryo, sans-serif;
}

.beams-solar_name{
	display: inline-block;
	font-size: 42px;
	line-height: 1.2;
	padding-bottom: 10px;
	border-bottom: 2px solid #CCC;
}

.beams-solar_number{font-size: 28px; margin: 10px 0;}

.beams-solar_buy{margin-top: -20px;}
.beams-solar_caution{font-size: 12px; padding-bottom: 20px;}

.detail_comments{font-size: 12px;}

.beams-solar_buy span.first_flight{
	border: 1px solid #CCC;
	padding: 1px 8px
}
.beams-solar_price{font-size: 40px; padding-left: 15px;}

.beams-solar_reserve{
	width: 170px;
	position: absolute;
	right: 0;
	top: 30px;
}

ul.beams-solar_online{display: block;}

ul.beams-solar_online li{
	display: block;
	width: 32%;
	margin-right: 2%;
	background: #FFF;
	box-sizing: border-box;
	border: 1px solid #DDD;
	float: left;
	margin-bottom: 2%;
	}

ul.beams-solar_online li:first-child{margin-left: 17%}
ul.beams-solar_online li:last-child{margin-right: 0;}
ul.beams-solar_online li:first-child,ul.beams-solar_online li:nth-child(2){padding: 5px 0;}

	@media only screen and (max-width:960px) {
		.beams-solar_lead{font-size: 18px;}
		.beams-solar_name{font-size: 36px;}
		.beams-solar_outline{width: 480px;}
		.beams-solar_img{margin-right: -480px; padding-right: 480px; padding-top: 30px;}
		.beams-solar_reserve{width: 140px;}
		.about_beams-solar{padding: 60px 0 20px 0;}
		}
	@media only screen and (max-width:768px) {
		.beams-solar_lead{font-size: 16px;}
		.beams-solar_name{display: block; font-size: 32px;}
		.beams-solar_number{font-size: 26px;}
		.beams-solar_outline{width: 55%;}
		.beams-solar_img{margin-right: 0; padding-right: 0; padding-top: 50px; width: 45%;}
		.beams-solar_reserve{width: 120px; top: 35%;}
		.beams-solar_buy{margin-top: 10px;}
		}


	@media only screen and (max-width:599px) {
		.beams-solar_lead{font-size: 14px; text-align: left; line-height: 1.5; padding: 10px 0}
		.beams-solar_lead span{font-size: 16px;}
		.beams-solar_img,.beams-solar_outline{
			padding: 0; margin: 0; width: 100%; float: none;}
		.beams-solar_img{padding: 0 30px 0 60px;}
		.beams-solar_reserve{
			right: 10px;
			top: 100px;
			width: 100px;
			height: 100px;
		}
		.beams-solar_name{font-size: 30px; margin-top: 10px;}
		.beams-solar_number{font-size: 24px;}
	}

/*slider*/
.flexslider{
	position:relative;}

ul.slides{display: none;}

ul.slides li{
	position:relative;}

ul.slides li img{
	width:100%;
	height: auto;}


ul.flex-direction-nav li a{
	z-index:8;
	text-indent:-9999px;
	width:41px;
	height:18px;
	position:absolute;
	top: 50%;
	background-repeat: no-repeat;
	background-size: 41px 18px;}

ul.flex-direction-nav li a.flex-prev{
	background-image:url(../../images/beams/slide/prev.png);
	left:10px;}

ul.flex-direction-nav li a.flex-next{
	background-image:url(../../images/beams/slide/next.png);
	right:10px;}

ol.flex-control-nav{
	list-style: none;
	position: absolute;
	bottom: 10px;
	left: 0;
	width: 100%;
	text-align: center;
}

ol.flex-control-nav li{
	display: inline-block;
}
ol.flex-control-nav li a{
	background: url(../../images/beams/slide/slide_icon.png) no-repeat 0 -14px;
	background-size: 14px 28px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	width: 14px;
	height: 14px;
	margin: 0 5px;
}

ol.flex-control-nav li a.flex-active{
	background-position: 0 0;
}
	@media only screen and (max-width:599px) {
		ul.flex-direction-nav li a{
			width:24px;
			height:10px;
			background-size: 24px 10px;}
		ol.flex-control-nav li a{margin: 0 2px;}
		ol.flex-control-nav{bottom: 0;}
	}

/*beams_campaign*/
.beams_campaign{
	padding: 40px 0 30px 0;
	background: url(../../images/beams/bg_camaign.jpg) no-repeat top center;
	background-size: cover;
}
.beams_campaign_outline{
	padding-left: 36%;
	color: #FFF;
}
.beams_campaign_txt{
	padding: 20px 0;
	position: relative;
	line-height: 2;
	letter-spacing: -1px;
}
.beams_campaign_txt_wrap{
	float: left;
	width: 55%;}
.beams_campaign_item{
	width: 45%;
	float: right;
	padding-top: 20px;

}
.beams_campaign_outline .beams_arrow_btn a{min-width: 240px;}

	@media only screen and (max-width:768px) {
		.beams_campaign{
			background: url(../../images/beams/bg_camaign-sp.jpg) no-repeat 0 0;}
		.beams_campaign_outline{padding-left: 30%;}
		.beams_campaign_outline h2{width: 100%;}
		br.sp_clear{display: none;}
		.beams_campaign_txt{font-size: 14px;}
		.beams_campaign_txt_wrap{width: 60%;}
		.beams_campaign_item{width: 40%;}
	}

	@media only screen and (max-width:599px) {
		.beams_campaign{padding: 0; background: none;}
		.beams_campaign .beams_contents{
			padding: 0;
		}
		.beams_campaign_txt{padding: 0 0 10px 0;}
		.beams_campaign_outline h2{
			margin: 0;
			width: 100%;
			padding: 30px 10px 30px 25%;
			box-sizing: border-box;
			background: url(../../images/beams/bg_camaign-sp.jpg) no-repeat top right;
			background-size: cover;}

		.beams_campaign_sp_bg{
			background: #595b6b;
			padding: 10px;
		}
		.beams_campaign_outline{padding: 0;}
		.beams_campaign_txt_wrap,
		.beams_campaign_item{
			width: 100%;
			float: none;
			padding: 0;
		}
		.beams_campaign_item{text-align: center;}
		.beams_campaign_outline .beams_arrow_btn{text-align: center;}
	}

/*beams_detail*/
.beams_detail p{margin-top: 10px;}
.beams_detail_l,.beams_detail_r{
	width: 47%;
}
.beams_detail img{width: 100%;}
.beams_detail_l{float: left;}
.beams_detail_r{float: right;}

.clearfix + .clearfix{padding-top: 50px;}

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

		.beams_detail_l,.beams_detail_r{
			float: none;
			width: 100%;
			padding-bottom: 30px;
		}
		.clearfix + .clearfix{padding-top: 0px;}
	}
/*beams_styling*/
.beams_styling_box{
	width: 33.33333%;
	float: left;
	padding: 10% 0;
	background-size: cover;
	text-align: center;
	background-position:center;
	font-family: Abel, CmnYuGothicM, "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "Mairyo UI", "メイリオ", Meiryo, sans-serif;
	font-size: 24px;
}
.beams_styling_1{background-image: url(../../images/beams/styling_1.jpg);}
.beams_styling_2{background-image: url(../../images/beams/styling_2.jpg);}
.beams_styling_3{background-image: url(../../images/beams/styling_3.jpg);}
.beams_styling_box .beams_arrow_btn a{min-width: 240px;}
.beams_styling_box .beams_arrow_btn img{top: 20px;}

	@media only screen and (max-width:960px) {
		.beams_styling_box{font-size: 20px;}
		.beams_styling_box .beams_arrow_btn a{min-width: auto;}
	}

	@media only screen and (max-width:767px) {
		.beams_styling_box{
			width: 100%;
			padding: 20% 0;}
		.beams_styling_box .beams_arrow_btn a{min-width: 240px;}
		.beams_styling_1{background-position: bottom center;}
		}



/*beams_special*/
.beams_special_sp-img1,.beams_special_sp-img2{display: none;}
.beams_special{
	background: #f8f7f5 url(../../images/beams/bg_special.jpg) no-repeat top center;}

.beams_special .beams_contents{
	position: relative;
	padding-top: 75px;
	min-height: 620px;
	box-sizing: border-box;
	}

.beams_special h3.beams_sttl_line{
	margin-top: 0;
}
.beams_special p{
	position: absolute;
	font-size: 20px;
	bottom: 40px;
	right: 0;
	line-height: 2;
	letter-spacing: 1px;
}
br.tb-s_br{display: none;}
	@media only screen and (max-width:1000px) {
		.beams_special{
			background-size: cover;}
		.beams_special .beams_contents{
			min-height: 400px;
			padding-top: 30px;
		}
		.beams_special p{font-size: 18px; letter-spacing: 0; right: 10px; bottom: 20px;}
	}
	@media only screen and (max-width:767px) {
		.beams_special_sp-img1,.beams_special_sp-img2{display: block;}
		.beams_special{
			padding-bottom: 20px;
			background: none #f8f7f5;}
		.beams_special h3.beams_sttl_line{margin-bottom: 10px;}
		.beams_special p{position: static; width: 50%; float: left; padding-top: 40px;}
		.beams_special_sp-img2{width: 50%; float: right;}
		br.tb-s_br{display: block;}

	}
	@media only screen and (max-width:599px) {
		.beams_special p{font-size: 14px; padding-top: 20px;}
		.beams_special p{width: 45%;}
		.beams_special_sp-img2{width: 55%;}
		br.tb-s_br{display: none;}
		}


/*beams_itemlist*/
.beams_itemlist h3.beams_sttl_line{
	font-size: 46px;
	margin-bottom: 80px;
}

.beams_itemlist h3.beams_sttl_line img{
	width: 480px;
	height: 45px;
	margin-right: 20px;
	vertical-align:-2px;
}

.beams_itemlist .beams-solar_caution{text-align: right; padding-bottom: 40px;}

.beams_itemlist ul li{
	width: 23%;
	font-family: Abel, CmnYuGothicM, "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "Mairyo UI", "メイリオ", Meiryo, sans-serif;
	float: left;
	margin-right: 2.6666%;
	margin-bottom: 50px;
	text-align: center;
}

.beams_item_img img{width: 100%;}

	@media only screen and (min-width:769px) {
		.beams_itemlist ul li:nth-child(4n){margin-right: 0;}
	}


p.beams_item_number{
	font-size: 26px;
	margin-top: 10px;
}
p.beams_item_name{
	font-size: 16px;
	line-height: 1.2;
	padding-bottom: 10px;
}

.beams_item_img img{
	max-width: 176px !important;
}


.beams_itemlist_shop{
	width: 90px;
	border: 1px solid #CCC;
	text-align: center;
	padding: 2px 0;
	display: inline-block;
	margin: 2px;
}
	@media only screen and (max-width:768px) {
		.beams_itemlist ul li{width: 31%; margin-right: 3.5%;}
		.beams_itemlist ul li:nth-child(3n){margin-right: 0;}
		.beams_itemlist h3.beams_sttl_line img{display: inline-block; padding-bottom: 20px;}
		.beams_itemlist h3.beams_sttl_line{font-size: 40px;}
		}

	@media only screen and (max-width:599px) {
		.beams_itemlist h3.beams_sttl_line{padding: 0 10px 10px 10px;}
		.beams_itemlist h3.beams_sttl_line{font-size: 32px;}
		.beams_itemlist ul li{width: 46%; margin-right: 8%;}
		.beams_itemlist ul li:nth-child(3n){margin-right: 8%;}
		.beams_itemlist ul li:nth-child(2n){margin-right: 0;}

		.beams_itemlist_shop{width: 45%;}}

/*inview/////////////////////////*/
.inview,
.inview-y{
    -webkit-transition: all 2.5s cubic-bezier(0.3, 0, 0, 1);
    -moz-transition: all 2.5s cubic-bezier(0.3, 0, 0, 1);
    -o-transition: all 2.5s cubic-bezier(0.3, 0, 0, 1);
    transition: all 2.5s cubic-bezier(0.3, 0, 0, 1);
}
.inview-y{
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);

}
.inview-y.active {
	visibility: visible;
    opacity: 1;
    z-index: 10;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
.inview{
     visibility: hidden;
    opacity: 0;
}
.inview.active {
     visibility: visible;
    opacity: 1;
}