@charset "UTF-8";


/*インデックスアニメーション*/
.top_anime_index span {
	display: inline-block;
	transform: translateX(0.3em);
	mask-image: url("../images/top/m_mask.png");
	mask-repeat: no-repeat;
	mask-size: 0% 100%;
	mask-position: top left;
	-webkit-mask-image: url("../images/top/m_mask.png");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 0% 100%;
	transition: all 1.2s cubic-bezier(0.5, 1, 0.89, 1);	/*消える時は早くする*/
}
.top_anime_index.minus5 span{
	margin-right: -0.5em;
}
.top_anime_index.minus4 span{
	margin-right: -0.4em;
}
.top_anime_index.minus35 span{
	margin-right: -0.35em;
}
.anime_on .top_anime_index span {
	transform: translateX(0em);
	mask-size: 100% 100%;
	-webkit-mask-size: 100% 100%;
}
.top_anime_index span strong{
	display: inline-block;
	width: .4em;
}



/*メインイメージ
---------------------------------------------------------*/
.m_img_area .m_img{
	position: relative;
}
.m_img_area .com_bglogo{
	z-index: 4;
}

/*メインイメージ*/
.m_img_area,
.m_img_area .slide_area,
.m_img_area .m_slider .swiper-slide{
	min-height: 600px!important;
}
.m_img_area .slide_area {
	position: relative;
	overflow: hidden;
}
.m_img_area .m_slider .swiper-slide {
	position: relative;
	overflow: hidden;
}
.m_img_area .m_slider .swiper-slide::before {
	content: "";
	position: absolute;
	width: 120%;
	height: 100%;
	left: 0%;
	top: 0;
	background: url("../images/top/m_img1@2x.jpg") no-repeat left center;
	background-size: cover;
	transition: transform 2.0s ease, left 20s linear;	/*transform：スライドショーの「speed」と揃える*/
}
.m_img_area .m_slider .swiper-slide.slide2::before {
	background-image: url("../images/top/m_img2@2x.jpg");}
.m_img_area .m_slider .swiper-slide.slide3::before {
	background-image: url("../images/top/m_img3@2x.jpg");}

.m_img_area .m_slider .swiper-slide[class*=-prev]::before {
	transform: translateX(70vw);
	left: 0%;
}
.m_img_area .m_slider .swiper-slide[class*=-active]::before {
	left: -20%;
}
.m_img_area .m_slider .swiper-slide[class*=-next]::before {
	transform: translateX(-70vw);
	left: -20%;
}
/*.m_img_area .m_slider .swiper-slide.slide1::before {
	background-image: url("../images/top/image1.jpg");
}
.m_img_area .m_slider .swiper-slide.slide2::before {
	background-image: url("../images/top/image2.jpg");
}
.m_img_area .m_slider .swiper-slide.slide3::before {
	background-image: url("../images/top/image3.jpg");
}*/

/*m_copy*/
.m_img_area .m_copy {
	position: absolute;
	left: 10.7%;
	top: 55%;
	transform: translateY(-50%);
	text-align: left;
	color: #fff;
	/*transition: 1s;*/
	z-index: 5;
}
/*
.m_img_area .swiper-slide.swiper-slide-next .m_copy,
.m_img_area .swiper-slide.swiper-slide-prev .m_copy{
	opacity: 0;
	transition: 1s 1.5s;
}
.m_img_area .swiper-slide.swiper-slide-active .m_copy{
	opacity: 1;
	transition: 1s 1.5s;
}*/
.m_img_area .m_copy dt{
	font-size: min(130%,2.5vw);
	line-height: 1.2em;
	margin-bottom: 1em;
}
.m_img_area .m_copy dd{
	font-size: min(405%,5vw);
	letter-spacing:normal;
	line-height: 1.2em;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
/*メインイメージ*/
.m_img_area,
.m_img_area .slide_area,
.m_img_area .m_slider .swiper-slide{
	height: 60vw!important;
	min-height: 60vw!important;
}

/*m_copy*/
.m_img_area .m_copy {
	left: 5%;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
/*メインイメージ*/
.m_img_area,
.m_img_area .slide_area,
.m_img_area .m_slider .swiper-slide{
	min-height: 8vw!important;
}
.m_img_area .m_slider .swiper-slide::before {
	background-image: url("../images/top/m_img1_sp@2x.jpg");
}
.m_img_area .m_slider .swiper-slide.slide2::before {
	background-image: url("../images/top/m_img2_sp@2x.jpg");}
.m_img_area .m_slider .swiper-slide.slide3::before {
	background-image: url("../images/top/m_img3_sp@2x.jpg");}
	
.m_img_area .com_bglogo{
	left: -35%;
	right: auto;
	width: 170%;
}
	
/*m_copy*/
.m_img_area .m_copy {
	left: 5%;
}
.m_img_area .m_copy dt{
	font-size: 4vw;
	margin-bottom: .6em
}
.m_img_area .m_copy dd{
	font-size: 7vw;
	line-height: 1.4em;
}
}
   





/* フォントサイズ
---------------------------------------------------------*/
#pagebody .fs51{
	font-size: min(300%,4.5vw);
	line-height: 1.5em;
}
#pagebody .fs37{
	font-size: min(220%,3.5vw);
	letter-spacing: 0.01em;
	line-height: 1.5em;
}
#pagebody .fs30{
	font-size: min(170%,3vw);
	line-height: 1.5em;
}
/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
#pagebody .fs51{
	font-size: 190%;
	line-height: 1.5em;
}
#pagebody .fs37{
	font-size: 150%;
}
#pagebody .fs30{
	font-size: 100%;
	line-height: 1.4em;
}
#chupol .fs30{
	font-size: 130%;
}
#achievements .fs30{
	font-size: 90%;
}
#news .fs30{
	font-size: 165%;
}	
#products .fs30{
	font-size: 105%;
}	
}





/* history
---------------------------------------------------------*/
#history {
	position: relative;
	z-index: 5;
}
#history .bg{
	padding-top: 120px;
	padding-bottom: 80px;
}
#history .w1200{
	position: relative;
}
#history h2{
	position: absolute;
	top:-20px;
	left: 47.5%;
}
#history .txtbox{
	width: 52.65%;
	padding-top: 90px;
}
#history .imgbox{
	position: relative;
	width: 41%;
	margin-left: -1%;
	text-align: center;
}
.his_slider {
	position: relative;
	width: 91%;
	margin: 0 auto;
	z-index: 0;
}
.his_slider .swiper-slide img {
	transform: rotate(-6deg);
	transition: transform 1.0s;
}
.his_slider .swiper-slide[class*=-active] img {
	transform: rotate(0deg);
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
#history .bg{
	padding-top: 8vw;
	padding-bottom: 6vw;
}
#history h2{
	top: -2vw;
	left: 45%;
}
#history .txtbox{
	width: 55%;
	padding-top: 6vw;
}
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
#history .bg{
	padding-top: 10vw;
	padding-bottom: 10vw;
}
#history .flexbox{
	display: block;
}
#history h2{
	position: static;
	text-align: center;
	margin-bottom: 7vw;
}
#history .txtbox{
	width: 100%;
	padding-top: 0;
}
#history .imgbox{
	width: 80%;
	margin: 0 auto 10%;
}
}






/* we
---------------------------------------------------------*/
#we,#we a{
	color: #fff;
}
#we .bg{
	position: relative;
	padding-top: 130px;
	background: #1A1A1A;
}
#we .txtbox{
	margin-bottom: 70px;
	text-align: center;
}
#we .txtbox p{
	margin-top:2em;
}
#we .menubox_index{
	position: relative;
	text-align: center;
	padding: 2em 0;
	color: #49ba6a;
	font-size:14px;
	line-height: 1.5em;
}
#we .menubox_index::before{
	position: absolute;
	display: block;
	content: "";
	background: #fff;
	background-size: 100% auto;
	width: 300%;
	height: 1px;
	left: -150%;
	top:0;
	opacity: .1;
}
#we .menubox_index::after{
	position: absolute;
	display: block;
	content: "";
	background: #fff;
	background-size: 100% auto;
	width: 300%;
	height: 1px;
	left: -150%;
	bottom:0;
	opacity: .1;
}

#we .com_menu5_area {
	max-width: 100%;
	border-right:rgba(255,255,255,0.1) 1px solid;
	border-left:rgba(255,255,255,0.1) 1px solid;
}
#we .com_menu5_area .inbox {
	width: 50%;
}
#we .com_menu5_area .inbox:first-child{
	border-right:rgba(255,255,255,0.1) 1px solid;
}
#we .com_menu5_index {
	text-align: center;
	font-size: min(124%,1.5vw);
	padding-top: 2.2em;
	padding-bottom: 1.8em;
	border-bottom: none;
	margin-bottom: 0;
}
#we .com_menu5_index > span {
	padding-left: 3.5em;
}
#we .com_menu5_index > span::before {
	width: 2.6em;
}

#we .com_menu5 li {
	width: 33.33333%;
	font-size: min(90%,1.2vw);
	border-left:rgba(255,255,255,0.1) 1px solid;
	transition: .8s;
}
#we .com_menu5 li:hover{
	background:rgba(255,255,255,0.05);
	transition: .4s;
}
#we .com_menu5 li:nth-child(1){
	border-left: none;
}
#we .com_menu5 li a{
	padding-bottom: 75px;
}
#we .com_menu5 a .txt {
	height: 4.2em;
	padding-top: 1.7em;
}
#we .com_menu5 a .txt::before {
	width: 2.6em;
	transition: .8s;
}
/*
#we .com_menu5 a:hover .txt::before{
	width: 5em;
	transition: .4s;
}*/

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
#we .bg{
	padding-top: 7vw;
}
#we .txtbox{
	margin-bottom: 5vw;
}
#we .txtbox p{
	margin-top: 1em;
}
#we .com_menu5_area {
	border-right:none;
	border-left:none;
}
#we .menubox_index{
	font-size:1.5vw;
	padding: 1.5em 0;
}
#we .com_menu5 li a{
	padding-bottom: 4vw;
}
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
#we .bg{
	padding-top: 10vw;
}
#we .txtbox{
	text-align: left;
	margin-bottom: 7vw;
}
#we .txtbox p{
	margin-top:1em;
}
#we .com_menu5_area {
	max-width: 100%;
	border-right:none;
	border-left:none;
}
#we .menubox_index{
	padding: 1.5em 0;
	line-height: 1em;
	font-size: 80%;
	font-weight: normal;
}
#we .menubox .flexbox .inbox:first-child{
	border-right:none;
}
#we .com_menu5 li a{
	padding-bottom: 0;
}
}
    






/* chupol
---------------------------------------------------------*/
#chupol .bg{
	padding: 90px 0 110px;
}
#chupol .w1200{
	text-align: center;
}
#chupol .fs30{
	margin-bottom: 1rem;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
#chupol .bg{
	padding: 7vw 0 8vw;
}
#chupol .fs30{
	margin-bottom: .8vw;
}
}
/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
#chupol .bg{
	padding: 10vw 0 11vw;
}
#chupol .fs30{
	margin-bottom: .7rem;
}
}






/* achievements
---------------------------------------------------------*/
#achievements .bg{
	background: url("../images/top/ac_bg@2x.jpg")no-repeat center center;
	background-size: cover;
	padding: 170px 0 130px;
}
#achievements,#achievements a{
	color: #fff;
}
#achievements .w1500{
	text-align: center;
}
#achievements .txt1{
	font-size: min(175%,2.5vw);
	margin: 1.5em auto 2.5em;
} 
#achievements .mail{
	display: inline-block;
	margin: 2em auto 0;
}
#achievements .mail a{
	position: relative;
	display: inline-block;
	width: 3em;
	height: 3em;
	text-align: center;
	font-size: min(140%,2.5vw);
	letter-spacing: 0;
}
#achievements .mail a::before{
	position: absolute;
	display: block;
	content: "";
	background: #49BA6A;
	background-size: 100% 100%;
	width: 0;
	height: 0;
	top:22%;
	transform: translateY(-50%); 
	left: 0;
	right: 0;
	margin: 0 auto;
	border-radius: 500px;
	transition: 0.4s;
}
#achievements .mail a:hover::before{
	width: 3em;
	height: 3em;
	transition: 0.4s;
}
#achievements .mail i{
	position: absolute;
	top:0;
	left: 18%;
	z-index: 2;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
#achievements .bg{
	padding: 10vw 0 7vw;
}
#achievements .txt1{
	margin: .8em auto 2em;
} 
#achievements .mail{
	margin: 1.5em auto 0;
}
#achievements .mail a::before{
	top:27%;
}
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
#achievements .bg{
	background-image: url("../images/top/ac_bg_sp@2x.jpg");
	padding: 22vw 0 20vw;
}
#achievements .txt1{
	font-size: 105%;
	line-height: 1.8em;
	margin: 2em auto 3em;
} 
#achievements .txt2{
	line-height: 1.5em;
}
#achievements .mail{
	margin: 1.5em auto 0;
}
#achievements .mail a{
	font-size: 160%;
	width:2.7em;
	height:2.7em;
}
#achievements .mail a::before{
	top:22%;
}
#achievements .mail a:hover::before{
	width: 2.7em;
	height: 2.7em;
}
#achievements .mail i{
	left: 15%;
}
}






/* news
---------------------------------------------------------*/
#news .bg{
	padding: 150px 0 160px;
	border-bottom: 1px solid #000;
}
#news .news_box1{
	align-items: center;	
}
#news .titlebox{
	width: 22.2%;
}
#news .contentbox{
	width: 77.8%;
}
#news .contentbox .news_box2{
	max-width: 870px;
}
#news .contentbox .news_box2 .con{
	width: 48%;
	max-width: 360px;
}
#news .contentbox .news_box2 .con p:nth-child(1){
	font-size:80%;
	letter-spacing: 0.01em;
	line-height: 1em;
}
#news .contentbox .news_box2 .con p:nth-child(2){
	font-size: min(130%,3vw);
	font-weight: 600;
	margin: 1.1rem 0 .7rem;
}
#news .contentbox .news_box2 .con p:nth-child(3){
	line-height: 1.5em;
}
#news .contentbox .news_box2 .con p a,
#news .contentbox .news_box2 .con p{
	transition: 0.4s;
}
#news .contentbox .news_box2 .con:hover p a,
#news .contentbox .news_box2 .con:hover p{
	color: #49BA6A;
	transition: 0.4s;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
#news .bg{
	padding: 9vw 0 10vw;
}
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
#news .bg{
	padding: 9vw 0 10vw;
}
#news .news_box1{
	position: relative;
	display: block;
	padding-bottom: 12vw;
}
#news .titlebox{
	width: 100%;
	text-align: center;
	margin-bottom: 4vw;
}
#news .titlebox .com_btn2{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
}
#news .contentbox{
	width: 100%;
}
#news .contentbox .news_box2{
	max-width: 100%;
	display: block;
	border-bottom:1px solid #B2B2B2;
}
#news .contentbox .news_box2 .con{
	width: 100%;
	max-width: 100%;
	border-top:1px solid #B2B2B2;
	padding: 8vw 7%;
	box-sizing: border-box;
}
#news .contentbox .news_box2 .con p:nth-child(2){
	font-size:125%;
	margin: .9rem 0 .6rem;
}
}




/* products
---------------------------------------------------------*/
#products .bg{
	padding: 120px 0 100px;
}
#products h2{
	text-align: center;
	margin-bottom: 2rem;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
#products .bg{
	padding: 7vw 0;
}
#products h2{
	margin-bottom: 2vw;
}
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
#products .bg{
	padding: 10vw 0 15vw;
}
#products h2{
	text-align: left;
	margin-bottom: 3vw;
}
}