@charset "UTF-8";

body{
	padding-top: 0;
}


@media screen and (max-width: 768px) {
	body{
		padding-top: 15vw;
	}
}



/* ------------------------------
	.gnav
------------------------------ */
.gnav{
	position: fixed;
	background-color: transparent;
}

.gnav ul{
	background-color: transparent;
}

.gnav li a{
	background-color: transparent;
}

.gnav.fixed{
	background-color: #000;
}

.gnav.fixed li a{
	background-color: #000;
}

@media screen and (min-width: 769px) {
	.gnav{
		-webkit-transition: background .2s ease;
		transition: background .2s ease;
	}
	.gnav li a{
		-webkit-transition: background .15s ease,
							opacity .4s ease;
		transition: background .15s ease,
					opacity .4s ease;
	}
	.gnav.fixed li a{
		-webkit-transition: background .4s ease,
							opacity .4s ease;
		transition: background .4s ease,
					opacity .4s ease;
	}
	.gnav.fixed li a:hover{
		background-color: #333;
		opacity: 1;
	}
}


@media screen and (max-width: 768px) {
	.gnav{
		position: fixed;
		background-color: #000;
	}

	.gnav li a{
		background-color: #000;
	}
}

/* ------------------------------
	.fv
------------------------------ */
.fv{
	position: relative;
	min-height: 55vw;
	min-height: 45vw;
	background: url(../img/index/fv_bg.jpg) no-repeat center center;
	background-size: cover;
}

.fv iframe{
	width: 100%;
	height: 55.5vw;
	vertical-align: middle;
}

.fv video{
	width: 100%;
	vertical-align: middle;
}
.fv video:focus{
	outline: 0;
}
.fv > video{
	pointer-events: none;
}
.pv_archive{
	background: #9CCA43;
}
.pv_archive p{
	background: #fff;
	color: #9CCA43;
	font-size: 2.4rem;
	font-weight: bold;
	padding: 0.5em 0;
}
.pv_archive p span{
	max-width: 1800px;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 0 8vw;
}
.pv_archive .sliderWrap{
	position: relative;
	max-width: 1800px;
	box-sizing: border-box;
	padding: 20px 10vw;
	margin: 0 auto;
}
.slick-slider {
	margin:0 -15px;
}
.slick-slide {
	margin-right:15px;
	margin-left:15px;
}
.pv_archive .sliderWrap .slick-arrow{
	position: absolute;
	top: 50%;
	left: -4vw;
	width: 3vw;
	height: 3vw;
	max-width: 55px;
	max-height: 55px;
	background: url(../img/index/icon_pca_prev.png) 0 0 no-repeat;
	background-size: 100% auto;
	font-size: 0;
	padding: 0;
	cursor: pointer;
	z-index: 10;
	transform: translateY(-50%);
}
.pv_archive .sliderWrap .slick-next{
	right: -4vw;
	left: auto;
	background: url(../img/index/icon_pca_next.png) 0 0 no-repeat;
	background-size: 100% auto;
}
.pv_archive .sliderInner img{
	width: 100%;
	height: auto;
}

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

	.pv_archive p{
		font-size: 4vw;
	}
	.pv_archive p span{
		padding: 0 4vw;
	}
	.pv_archive .sliderWrap{
		padding: 3vw 12vw;
	}
	.pv_archive .sliderWrap .slick-arrow{
		width: 8vw;
		height: 8vw;
	}
	.pv_archive .sliderWrap .slick-arrow{
		left: -9vw;
	}
	.pv_archive .sliderWrap .slick-next{
		right: -9vw;
		left: auto;
	}
	.slick-slider {
		margin:0 -1.5vw;
	}
	.slick-slide {
		margin-right:1.5vw;
		margin-left:1.5vw;
	}

}

.modal_video{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.modal_video_wrap{
	z-index: 9999;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(92,92,92,0.7);
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity .4s ease;
	transition: opacity .4s ease;
}
.modal_video_wrap.open{
	visibility: visible;
	opacity: 1;
}

.modal_video video{
	position: absolute;
	top: calc(5vw + 4vh);
	left: 0;
	right: 0;
	margin: auto;
	width: 60vw;
}

.modal_video_btn{
	position: absolute;
	z-index: 2;
	right: 3vw;
	bottom: 3%;
	cursor: pointer;
	width: 11vw;
	-webkit-transition: opacity .4s ease;
	transition: opacity .4s ease;
}
@media screen and (min-width: 769px) {
	.modal_video_btn:hover{
		opacity: 0.8;
	}
}

.modal_video_btn img{
	width: 100%;
	vertical-align: middle;
}

.modal_video_btn p{
	text-transform: uppercase;
	color: #fff;
	font-size: 1.35vw;
	text-align: center;
}

.modal_video_btn p:last-child{
	padding: 0.3vw 2.2vw 0.3vw 0;
	margin-top: 0.8vw;
	background: url(../img/index/modal_video_play.png) no-repeat top right;
	background-size: 1.6vw;
	white-space: nowrap;
}

.modal_video_close_btn{
	z-index: 2;
	position: absolute;
	top: calc(5vw + 5vh);
	right: 15.5vw;
	display: block;
	width: 2vw;
	height: 2vw;
	overflow: hidden;
	cursor: pointer;
	-webkit-transition: opacity .4s ease;
	transition: opacity .4s ease;
}
@media screen and (min-width: 769px) {
	.modal_video_close_btn:hover{
		opacity: 0.8;
	}
}

.modal_video_close_btn span{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 2vw;
	height: 0.2vw;
	background-color: #fff;
}
.modal_video_close_btn span:nth-child(1){
	transform: rotate(45deg);
}
.modal_video_close_btn span:nth-child(2){
	transform: rotate(-45deg);
}

/*bnr*/
.fv .fv_bnr1{
	position: absolute;
	bottom: 20%;
	left: 1%;
}
.fv .fv_bnr1{
	width: 29vw;
}
.fv .fv_bnr1 .img img{
	width: 100%;
}

.fv .fv_bnr2{
	position: absolute;
	top: 30%;
	right: 1%;
}
.fv .fv_bnr2 .img{
	width: 28vw;
}
.fv .fv_bnr2 .img img{
	width: 100%;
}

.fv .btn{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16vw;
	height: 3vw;
	margin: 2vw auto 0;
	background: #231815;
	color: #fff;
	font-size: 1.1vw;
}
.fv .btn > div{
	width: 100%;
	height: 100%;
}

.fv{
	display: block;
}
a.fv:hover{
	opacity: 1;
}


@media screen and (max-width: 768px) {
	.fv iframe{
		height: 56.2vw;
	}

	.modal_video video{
		width: 90%;
		top: 0;
		bottom: 0;
	}

	.modal_video_btn{
		width: 22vw;
	}
	.modal_video_btn p:last-child{
		padding-right: 3.2vw;
		background-size: 3vw;
		font-size: 3vw;
	}

	.modal_video_close_btn{
		top: calc(50vh - 32.5vw);
		right: 7vw;
		width: 5vw;
		height: 5vw;
	}
	.modal_video_close_btn span{
		width: 5vw;
		height: 0.5vw;
	}


	.fv .fv_bnr1{
		position: absolute;
		bottom: 20%;
		left: 1%;
	}
	.fv .fv_bnr1{
		width: 38vw;
	}
	.fv .fv_bnr1 .img img{
		width: 100%;
	}

	.fv .fv_bnr2{
		position: absolute;
		top: 20%;
		right: 1%;
	}
	.fv .fv_bnr2 .img{
		width: 34vw;
	}
	.fv .fv_bnr2 .img img{
		width: 100%;
	}

	.fv .btn{
		width: 24vw;
		font-size: 3vw;
		height: 6vw;
		margin: 2vw auto 0;
	}
}



/* ------------------------------
	.feature_link
------------------------------ */
.feature_link{
	display: flex;
}

.feature_link_box{
	position: relative;
	width: 32.35%;
	height: 45.2vw;
}

.feature_link_box a{
	display: block;
	width: 100%;
	height: 100%;
	padding-top: 126.5%;
}

.feature_link_box.fit,
.feature_link_box.polo01{
	width: 35.32%;
}
.feature_link_box.fit a{
	background: url(../img/index/feature_link_img01.jpg) no-repeat center top;
	background-size: 100%;
	background-size: cover;
}

.feature_link_box.hyper a{
	background: url(../img/index/feature_link_img02.jpg) no-repeat center center;
	background-size: 100%;
	background-size: cover;
}

.feature_link_box.free a{
	background: url(../img/index/feature_link_img03.jpg) no-repeat center center;
	background-size: 100%;
	background-size: cover;
}

.feature_link_box .feature_btn{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50%;
	height: 3vw;
	margin: 0 auto;
	background-color: #231815;
	color: #fff;
	font-size: 1.1vw;
}

.feature_link_box.fit .feature_btn{
	background-color: #717071;
}

.feature_link_box.hyper .feature_btn{
	background-color: #E6004F;
}

.feature_link_box.free .feature_btn{
	background-color: #83BE09;
}

.feature_link_box.polo01 a{
	background: url(../img/index/feature_link_img04.jpg) no-repeat center top;
	background-size: 100%;
	background-size: cover;
}
.feature_link_box.polo02 a{
	background: url(../img/index/feature_link_img05.jpg) no-repeat center top;
	background-size: 100%;
	background-size: cover;
}
.feature_link_box.polo03 a{
	background: url(../img/index/feature_link_img06.jpg) no-repeat center top;
	background-size: 100%;
	background-size: cover;
}


@media screen and (max-width: 768px){
	.feature_link{
		flex-wrap: wrap;
	}

	.feature_link_box{
		width: 100%;
		height: 141vw;
	}

	.feature_link_box.fit,
	.feature_link_box.polo01{
		width: 100%;
		height: 129vw;
	}

	.feature_link_box .feature_btn{
		font-size: 4vw;
		height: 10vw;
	}
}



/* ------------------------------
	共通見出し
------------------------------ */
.cnt_ttl{
	position: relative;
	padding-left: 1.7em;
	color: #fff;
	font-weight: bold;
	font-size: 2.5vw;
	letter-spacing: 0.2em;
}

.cnt_ttl .ttl_num{
	position: absolute;
	top: -14%;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3vw;
	height: 3vw;
	border: 1px solid #fff;
	letter-spacing: 0;
	font-size: 1.5vw;
	text-align: center;
}

.en_ttl{
	display: inline-block;
	transform: rotate(-90deg);
	color: #fff;
	letter-spacing: 0.15em;
	font-size: 1.2vw;
	cursor: default;
}


@media screen and (max-width: 768px) {
	.cnt_ttl{
		font-size: 6vw;
		letter-spacing: 0.15em;
	}

	.cnt_ttl .ttl_num{
		top: -9%;
		width: 6.5vw;
		height: 6.5vw;
		font-size: 3vw;
	}

	.en_ttl{
		font-size: 3vw;
	}
}



/* ------------------------------
	.products
------------------------------ */
.products{
	padding: 1.4% 0 3%;
	background-color: #9CCA43;
}

.products .cnt_ttl{
	padding-left: 2em;
}

.products_wrap{
	position: relative;
	padding: 3% 0 3% 5%;
}

.products_wrap .en_ttl{
	position: absolute;
	top: 12vw;
	left: 3.3%;
}

.bnr_box{
	display: flex;
	flex-wrap: wrap;
	background-color: #333;
}

.bnr_box p{
	width: 50%;
}

.bnr_box img{
	width: 100%;
	vertical-align: middle;
}

.products_wrap .bnr_box{
	margin-left: 6%;
	margin-top: 2%;
}


@media screen and (max-width: 768px){
	.products{
		padding: 4% 0;
	}

	.products_wrap{
		padding: 5% 0 5% 5%;
	}

	.products_wrap .en_ttl{
		width: 10px;
		top: 34vw;
		left: 6.5%;
	}

	.bnr_box{
		flex-wrap: wrap;
	}

	.products_wrap .bnr_box{
		margin-left: 10%;
		margin-top: 4%;
	}

	.bnr_box p{
		width: 100%;
	}
}



/* ------------------------------
	.concept
------------------------------ */
.concept{
	background: #9CCA43 url(../img/index/concept_bg.png) no-repeat top right;
	background-size: 40%;
}

.concept_wrap{
	position: relative;
	width: 60%;
	height: 45vw;
	padding: 5% 0 0 5%;
	background-color: #000;
}

.concept .cnt_ttl{
	padding-left: 2em;
}

.concept_wrap .en_ttl{
	position: absolute;
	top: 48%;
	left: 5.5%;
}

.concept_wrap .txt_wrap{
	padding: 0 0 0 5.5vw;
}

.concept_wrap .txt_wrap h3{
	margin: 13% 0 12%;
	font-size: 2.8vw;
	color: #fff;
	font-weight: bold;
	letter-spacing: 0.3em;
}

.concept_wrap .txt_wrap p{
	font-size: 1.65vw;
	color: #fff;
	line-height: 2.1;
	color: #DBDCDC;
}


@media screen and (max-width: 768px){
	.concept{
		padding: 70% 0 0;
		background-size: 100%;
		background-position: center -7vw;
	}

	.concept_wrap{
		width: 100%;
		height: initial;
		padding: 10% 5%;
	}

	.concept_wrap .en_ttl{
		left: 0;
	}

	.concept_wrap .txt_wrap{
		padding-left: 12.5vw;
	}

	.concept_wrap .txt_wrap h3{
		font-size: 6.2vw;
		letter-spacing: 0.1em;
	}

	.concept_wrap .txt_wrap p{
		font-size: 3.8vw;
	}

	.concept_wrap .txt_wrap p span{
		white-space: nowrap;
	}
}



/* ------------------------------
	.life
------------------------------ */
.life{
	height: 49.9vw;
	padding-top: 6vw;
	background: url(../img/index/life_bg.png) no-repeat center center;
	background-size: 100%;
}

.life h2{
	margin: 7vw 0 7.5vw;
	font-size: 3vw;
	text-align: center;
	color: #fff;
	font-weight: bold;
	letter-spacing: 0.45em;
}

.life p{
	margin: 0 auto;
	text-align: center;
	color: #fff;
	font-size: 1.8vw;
	line-height: 2.1;
}

.life p + p{
	margin-top: 2.8%;
}


@media screen and (max-width: 768px){
	.life{
		height: initial;
		padding-bottom: 8vw;
		margin-top: -1px;
		background: url(../img/index/life_bg_sp.jpg) no-repeat center center;
		background-size: cover;
	}

	.life h2{
		font-size: 5vw;
		letter-spacing: 0.3em;
	}

	.life p{
		font-size: 3.8vw;
	}
}



/* ------------------------------
	.bnr_wrap
------------------------------ */
.bnr_wrap{
	padding-top: 38vw;
	background: url(../img/index/bnr_wrap_bg.jpg) no-repeat center top;
	background-size: 100%;
}

.bnr_wrap .bnr_box{
	border-top: 2vw solid #9CCA43;
}


@media screen and (max-width: 768px){
	.bnr_wrap{
		margin-top: -1px;
	}
}



/* ------------------------------
    .contact
------------------------------ */
.contact .cnt_ttl{
	width: 90%;
	padding-left: 2em;
	margin: 0 auto 2%;
	color: #717071;
}

.contact .cnt_ttl .ttl_num{
	border-color: #717071;
}

.contact .en_ttl{
	position: absolute;
	text-transform: uppercase;
	top: 50%;
	left: 1.4%;
	color: #717071;
	font-size: 1vw;
	letter-spacing: 0.3em;
}


@media screen and (max-width: 768px){
	.contact .cnt_ttl{
		width: 90%;
		margin: 0 auto 6%;
	}

	.contact .en_ttl{
		top: 28%;
		left: 6.5%;
		width: 10px;
		white-space: nowrap;
		font-size: 3vw;
	}
}



/* ------------------------------
    .business
------------------------------ */
.business{
	padding: 6% 0;
	position: relative;
	background-color: #C8C9CA;
}

.business .cnt_ttl .ttl_num{
	margin-left: 5%;
	color: #717071;
	border-color: #717071;
}

.business .en_ttl{
	position: absolute;
	top: 50%;
	left: -4.6%;
	color: #717071;
}

.business h2{
	margin-top: 1vw;
	text-align: center;
}

.business h2 img{
	width: 33%;
}

.business h2 + p{
	margin-top: 1.5vw;
	text-align: center;
	font-size: 1.8vw;
	color: #f7f7f7;
}

.business_box{
	display: flex;
	justify-content: space-between;
	width: 43%;
	margin: 7% auto 0;
}

.business_box .business_login{
	width: 100%;
}

.business_box a{
	display: block;
	padding: 3% 0;
	background-color: #9CCA43;
}

.business_box div h3{
	padding: 1.5% 0 1%;
	text-align: center;
	font-size: 2.3vw;
	font-weight: bold;
	letter-spacing: 1px;
}

.business_box div h3 span{
	margin: 0 0.05em;
	font-size: 1.5vw;
}

.business_box .business_login h3{
	background-color: #fff;
	color: #8DC21F;
}

.business_box .business_new h3{
	background-color: #717071;
	color: #fff;
}

.business_box div p{
	padding: 0 4%;
	margin: 4% auto 0;
	line-height: 1.3;
	color: #fff;
	font-size: 1.3vw;
}

.business_box div .notes{
	margin: 2% auto 0;
	color: #717071;
	font-size: 1vw;
	text-align: center;
}


@media screen and (max-width: 768px){
	.business{
		padding: 6% 0 10%;
	}

	.business h2 img{
		width: 65%;
	}

	.business h2 + p{
		font-size: 4vw;
	}

	.business .cnt_ttl .ttl_num{
		margin-left: 5%;
	}

	.business .en_ttl{
		top: 70%;
		left: 6.5%;
		width: 10px;
		white-space: nowrap;
	}

	.business_box{
		flex-wrap: wrap;
		width: 73%;
	}

	.business_box a{
		padding: 3% 0 4%;
	}

	.business_box .business_login{
		width: 100%;
	}

	.business_box div h3{
		font-size: 4.3vw;
		padding: 1% 0;
	}

	.android .business_box div h3{
		padding: 2.5% 0;
	}

	.business_box div h3 span{
		font-size: 3.6vw;
		margin: 0;
	}

	.business_box div p{
		font-size: 3.6vw;
		padding: 0;
	}

	.business_box div .notes{
		font-size: 3.2vw;
		padding: 0;
		text-align: left;
		padding-left: 1em;
		text-indent: -1em;
	}

	.business_box .business_login p{
		width: 90%;
	}
}


footer{
	margin-top: 0;
}