@charset "UTF-8";
.fadein {
  opacity: 0;
  -webkit-transition: 1.5s cubic-bezier(0.5, 1, 0.89, 1);
  transition: 1.5s cubic-bezier(0.5, 1, 0.89, 1);
}

.fadein.showed {
  opacity: 1;
  -webkit-transition: 1.5s cubic-bezier(0.5, 1, 0.89, 1);
  transition: 1.5s cubic-bezier(0.5, 1, 0.89, 1);
}

.fadeup {
  opacity: 0;
  -webkit-transition: 1.5s cubic-bezier(0.5, 1, 0.89, 1);
  transition: 1.5s cubic-bezier(0.5, 1, 0.89, 1);
  -webkit-transform: translateY(60px);
          transform: translateY(60px);
}

.fadeup.showed {
  opacity: 1;
  -webkit-transition: 1.5s cubic-bezier(0.5, 1, 0.89, 1);
  transition: 1.5s cubic-bezier(0.5, 1, 0.89, 1);
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.fadedown {
  opacity: 0;
  -webkit-transition: 1.5s cubic-bezier(0.5, 1, 0.89, 1);
  transition: 1.5s cubic-bezier(0.5, 1, 0.89, 1);
  -webkit-transform: translateY(-60px);
          transform: translateY(-60px);
}

.fadedown.showed {
  opacity: 1;
  -webkit-transition: 1.5s cubic-bezier(0.5, 1, 0.89, 1);
  transition: 1.5s cubic-bezier(0.5, 1, 0.89, 1);
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.fadeleft {
  opacity: 0;
  -webkit-transition: 1.5s cubic-bezier(0.5, 1, 0.89, 1);
  transition: 1.5s cubic-bezier(0.5, 1, 0.89, 1);
  -webkit-transform: translateX(-120px);
          transform: translateX(-120px);
}

.fadeleft.showed {
  opacity: 1;
  -webkit-transition: 1.5s cubic-bezier(0.5, 1, 0.89, 1);
  transition: 1.5s cubic-bezier(0.5, 1, 0.89, 1);
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
}

.mainleft {
  opacity: 0;
  -webkit-transition: 1.5s cubic-bezier(0.5, 1, 0.89, 1);
  transition: 1.5s cubic-bezier(0.5, 1, 0.89, 1);
  -webkit-transform: translate(-50%, -120px);
          transform: translate(-50%, -120px);
}

.mainleft.showed {
  opacity: 1;
  -webkit-transition: 1.5s cubic-bezier(0.5, 1, 0.89, 1);
  transition: 1.5s cubic-bezier(0.5, 1, 0.89, 1);
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}

.faderight {
  opacity: 0;
  -webkit-transition: 1.5s cubic-bezier(0.5, 1, 0.89, 1);
  transition: 1.5s cubic-bezier(0.5, 1, 0.89, 1);
  -webkit-transform: translateX(120px);
          transform: translateX(120px);
}

.faderight.showed {
  opacity: 1;
  -webkit-transition: 1.5s cubic-bezier(0.5, 1, 0.89, 1);
  transition: 1.5s cubic-bezier(0.5, 1, 0.89, 1);
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
}

.l_fea {
  /*font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro",
 "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  font-weight: 400;
  font-style: normal;
  */
  font-family: source-han-serif-japanese, serif;
  font-weight: 300;
  font-style: normal;
  color: #000;
  text-align: left;
  overflow-x: hidden;
  font-size: 15px;
  line-height: 2.1;
  /*max-width: 1190px;*/
  margin: 0 auto;
  /* max-width: 1190px; */
}

.l_fea img:not(.popup-box__image){
	max-width:100%;
}

.l_fea a:hover {
  text-decoration: none;
  opacity: 0.8;
  cursor: pointer;
}

.l_fea a:link {
  color: #000;
}

.l_fea a {
  color: #5EAAD7 !important;
}

.l_fea .head {
  text-align: center;
  margin:20px auto;}

.l_fea .head img {
  width:128px;
}

.l_fea .main {
  text-align: center;
  height: auto;
  position: relative;
  margin: 0 auto;
  padding-bottom: 30px;
  width: 100%;
}

.l_fea .about {
  /* font-size: 22px; */
  /* line-height: 2.1; */
  margin: 90px auto;
  /* margin-bottom: 90px; */
}

.l_fea .product {
  text-align: center;
  padding: 90px auto !important;
  background-color: #F8F7F6;
  -moz-appearance: none;
  -webkit-appearance: none;
  padding: 5rem 3rem;
  /* width: auto; */
  /* margin: 0; */
}

.l_fea .product p {
  text-align: left;
}

.l_fea .text-left {
  text-align: left;
}

.l_fea .st {
  width: 1000px;
  margin: auto;
  margin-bottom: 190px;
}

.l_fea .st h2 {
  text-align: center;
}

.l_fea .st .image1 {
  text-align: left;
  margin-bottom: 24px;
}

.l_fea .st .credit {
  font-size: 24px;
  line-height: 1;
}

.l_fea .st .st_about1 {
  margin-top: 32px;
  width: 703px;
  font-size: 24px;
  line-height: 1.66;
  margin-bottom: 194px;
}

.l_fea .st .image2 {
  text-align: right;
  margin-bottom: 24px;
}

.l_fea .st .wrap2 .credit {
  text-align: right;
  display: table;
  margin-left: auto;
}

.l_fea .st .wrap2 .st_about1 {
  margin-left: auto;
}

.l_fea .st .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 246px;
}

.l_fea .st .flex .fleximage {
  margin-bottom: 34px;
}

.l_fea .st .flex a {
  font-size: 24px;
  line-height: 1.5;
}

.l_fea .st .flex p {
  font-size: 24px;
  line-height: 1.5;
}

.l_fea .st2 {
  width: 1000px;
  margin: auto;
  margin-bottom: 190px;
}

.l_fea .st2 h2 {
  text-align: center;
}

.l_fea .st2 .wrap3 {
  margin-bottom: 190px;
}

.l_fea .st2 .wrap3 .image1 {
  text-align: center;
  margin-bottom: 28px;
}

.l_fea .st2 .wrap3 .credit {
  font-size: 24px;
  line-height: 1;
  text-align: center;
  display: block;
}

.l_fea .st2 .wrap3 .st_about1 {
  width: 703px;
  font-size: 24px;
  line-height: 1.66;
  display: block;
  margin: auto;
  margin-top: 32px;
}

.l_fea .st2 .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 357px;
}

.l_fea .st2 .flex .fleximage {
  margin-bottom: 34px;
}

.l_fea .st2 .flex a {
  font-size: 24px;
  line-height: 1.5;
}

.l_fea .st2 .flex p {
  font-size: 24px;
  line-height: 1.5;
}

.l_fea .st2 .wrap1 .image1 {
  text-align: left;
  margin-bottom: 24px;
}

.l_fea .st2 .wrap1 .credit {
  font-size: 24px;
  line-height: 1;
}

.l_fea .st2 .wrap1 .st_about1 {
  margin-top: 32px;
  width: 703px;
  font-size: 24px;
  line-height: 1.66;
  margin-bottom: 194px;
}

.l_fea .st2 .wrap2 .image2 {
  text-align: right;
  margin-bottom: 24px;
}

.l_fea .st2 .wrap2 .credit {
  font-size: 24px;
  line-height: 1;
  text-align: right;
  display: table;
  margin-left: auto;
}

.l_fea .st2 .wrap2 .st_about1 {
  margin-top: 32px;
  width: 703px;
  font-size: 24px;
  line-height: 1.66;
  margin-bottom: 194px;
  margin-left: auto;
}

.l_fea #flex2 {
  margin-bottom: 0;
}

.l_fea .btn1 {
  display: table;
  margin: auto;
  margin-bottom: 30px;
}

.l_fea .btn2 {
  display: table;
  margin: auto;
  margin-bottom: 90px;
}
/*# sourceMappingURL=style.css.map */

/*====== 9-1-1 縦線が動いてスクロールを促す =======*/

/*スクロールダウン全体の場所*/
.l_fea .main .scrolldown1{
    /*描画位置※位置は適宜調整してください*/
    position: absolute;
    left:50%;
    bottom:10px;
    /*全体の高さ*/
    height:50px;
    z-index: 20;
}

/*Scrollテキストの描写*/
.l_fea .main .scrolldown1 span{
    /*描画位置*/
    position: absolute;
    left:-15px;
    top: -20px;
    /*テキストの形状*/
    color: #222;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

/* 線の描写 */
.l_fea .main .scrolldown1::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 1px;
	height: 30px;
	background: #222;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:30px;
		opacity: 1;
	}
	100%{
		height:0;
		top:50px;
		opacity: 0;
	}
}

/*---------------------

FlexBox

----------------------*/
.l_fea *, .l_fea *:before,.l_fea *:after {
	box-sizing: border-box;
}

.l_fea .col_2{
	max-width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	margin-bottom: 20px;
	padding-bottom: 0px;
	justify-content: center;
}
.l_fea .col_2 > div{
	max-width: 50%;
	padding: 20px;
}
.l_fea .col_2 > div > div{
	position: relative;
	overflow: hidden
}


.l_fea .col_3{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */




	/* margin-bottom: 20px; */
	padding-bottom: 0px;
	margin: 0 auto 50px auto;
	justify-content: center;
	text-align: center;
}
.l_fea .col_3 > div{
	width: 33.33333333%;
	padding: 10px;
}
.l_fea .col_3 > div > div{
	position: relative;
	overflow: hidden
}



.l_fea .col_4{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	margin: 0 auto 80px auto;
	padding-bottom: 30px;
	justify-content: center;
}
.l_fea .col_4 > div{
	width: 25%;
	padding: 10px;
}
.l_fea .col_4 > div > div{
	position: relative;
	overflow: hidden
}


.l_fea .col_5{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	margin-bottom: 80px;
	padding-bottom: 30px;
}
.l_fea .col_5 > div{
	width: 20%;
	padding: 10px;
}
.l_fea .col_5 > div > div{
	position: relative;
	overflow: hidden
}

.l_fea .col_6{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	margin-bottom: 80px;
	padding-bottom: 30px;
}
.l_fea .col_6 > div{
	width: 16.666666%;
	padding: 10px;
}
.l_fea .col_6 > div > div{
	position: relative;
	overflow: hidden
}


.l_fea .col_7{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	margin-bottom: 80px;
	/*padding-bottom: 30px;*/
}
.l_fea .col_7 > div{
	width: 14.285714%;
	padding: 10px;
}
.l_fea .col_7 > div > div{
	position: relative;
	overflow: hidden
}
@media screen and (max-width: 960px) {
	.l_fea .col_6 > div{
		width: 25%;
	}
}
@media screen and (max-width: 480px) {
}

.l_fea h2 {
    font-weight: 400 !important;
    margin-bottom: 30px !important;
}

.l_fea h2.under {
  position: relative;
  display: inline-block;
  margin-bottom: 1em;
}
.l_fea h2.under:before {
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 52px;
  height: 0.5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #5EAAD7;
  border-radius: 2px;
}
.txt18{
    font-size: 18px;
    line-height: 32px;
}
.txt20{
    font-size: 20px;
    line-height: 28px;
}
.txt24{
    font-size: 24px;
    line-height: 38px;
}
.center{
    text-align: center !important;
    /* margin: 0 auto !important; */
}

.w300{
    max-width: 300px;
}

.l_fea .about .flex {
  display: -webkit-box;Ω
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  /* padding-left: 150px; */
	align-items: center;
}

.l_fea .about .flex > div {
	padding:60px;
}

.l_fea .about .flex > div img {
}
.l_fea .product .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  /* padding-left: 150px; */
	align-items: center;
}

.l_fea .product .flex > div {
	padding:60px;
}

.l_fea .product .flex2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    /* padding-left: 150px; */
    /* align-items: center; */
    margin: auto;
    max-width: 1150px;
}

.l_fea .product .flex2 > div.item03 {
	padding: 50px 80px 100px 20px;
	align-items: center;
	margin-bottom: 100px;
	margin-top: 0px;
}

.l_fea .product .flex2 > div.item02{
	padding: 60px 80px 140px 80px;
	align-items: center;
	/* align-items: center; */
	display: flex;
	justify-content: center;
}

.l_fea .flex2 .flex-item1 {
  width: 54%;
  margin-right: 70px;
}

.l_fea .flex2 .flex-item2 {
  width: 35%;
  /* padding-left: 50px; */
}

.l_fea .flex2 .flex-item3 {
  width: 35%;
}

.l_fea .flex2 .flex-item4 {
  width: 60%;
  margin-top: -100px;
}

.l_fea .flex2 .flex-item5 {
  width: 44%;
  margin-top: 210px;
}

.l_fea .flex2 .flex-item6 {
  width: 25%;
  margin-top: -120px;
  margin-left: 170px;
}

.l_fea .flex2 .flex-item7 {
  width: 20%;
  margin: 150px 60px 150px 30px;
}

.l_fea .flex2 .flex-item8 {
  width: 60%;
  margin-top: 100px;
}

.icon01 {
  display: inline-flex;
  align-items: flex-start;
  margin-left: -25px; /* アイコンをはみ出す量に合わせる */
  padding-left: 25px; /* 元の位置に戻す */
}

.icon01::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 0.5em;
  background-image: url('../img/251017/icon_worldloop.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  margin-top: 10px;
}

.icon02 {
  display: inline-flex;
  align-items: flex-start;
  margin-left: -25px; /* アイコンをはみ出す量に合わせる */
  padding-left: 25px; /* 元の位置に戻す */
}

.icon02::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 0.5em;
  background-image: url('../img/251017/icon_recycle.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  margin-top: 10px;
}

.icon03 {
  display: inline-flex;
  align-items: flex-start;
  margin-left: -25px; /* アイコンをはみ出す量に合わせる */
  padding-left: 25px; /* 元の位置に戻す */
  text-align: left;
}

.icon03::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 0.5em;
  background-image: url('../img/251017/icon_theearth.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  margin-top: 10px;
}



.l_fea .flex2 .item01 {
  order: 1;
}

.l_fea .flex2 .item02 {
  order: 2;
}
.l_fea .flex2 .item03 {
  order: 3;
}
.l_fea .flex2 .item04 {
  order: 4;
}
/*.l_fea .product .flex2 .mb-100 {
    margin-top: -180px;
}*/

.l_fea .product .flex3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    /* padding-left: 150px; */
    /* align-items: center; */
    margin-top: 100px;
    margin: 100px auto 100px auto;
    max-width: 1000px;
}

.l_fea .product .flex3 > div {
    width: 25%;
    padding: 0 30px;
}
.l_fea .mokuhyo {
  /* font-size: 22px; */
  /* line-height: 2.1; */
  margin: 90px auto;
  /* margin-bottom: 90px; */
  text-align: center;
}

.l_fea .mokuhyo .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  /* padding-left: 150px; */
	align-items: center;
}

.l_fea .mokuhyo .flex > div {
	padding:60px;
	width: 40%;
	text-align: left;
}

.l_fea .mokuhyo .flex > div:first-child {
	padding-right:30px !important;
	width: 30%;
	text-align: left;
}

.l_fea .mokuhyo .list_search-result {
  margin: 20px auto;
  text-align: center;
}

.l_fea .contact {
  text-align: center;
  padding: 90px auto !important;
  background-color: #F8F7F6;
  -moz-appearance: none;
  -webkit-appearance: none;
  padding: 5rem 3rem;
  /* width: auto; */
  /* margin: 0; */
}

.l_fea .contact .box{
    max-width:650px;
    background-color: #fff;
    padding: 50px 20px;
    margin: 40px auto 0 auto;
}

.l_fea .sp {
    display: none;
}

.l_fea .mb10{
    margin-bottom: 10px;
}

.l_fea .mb20{
    margin-bottom: 20px;
}

.l_fea .mb30{
    margin-bottom: 30px;
}

.l_fea .mb50{
    margin-bottom: 50px;
}

.l_fea .mb80{
    margin-bottom: 80px;
}

.l_fea .mb100{
    margin-bottom: 100px;
}

.l_fea .fotter {
  text-align: center;
  padding: 90px auto !important;
  -moz-appearance: none;
  -webkit-appearance: none;
  padding: 5rem 3rem;
  /* width: auto; */
  /* margin: 0; */
}
.l_fea #point2{
    display: inline;
    padding: 0;
	margin: 10px auto 50px auto;
}


.l_fea #point2 a {
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    display: block;
    border: 1px solid #333;
    padding: 10px;
    text-decoration: none;
    color: #222 !important;
    width: 40%;
    text-align: center;
    font-size: 18px;
    line-height:30px;
    margin: 10px auto 100px auto;
}

.l_fea #point2 a:hover{
background-color: #222;
color:#fff !important;
}

.l_fea .bold{
	font-weight: 600 !important;
}

.l_fea .blue{
	color: #5EAAD7;
}

.l_fea .pb30 {
    line-height: 3.0em;
}

.l_fea br.sp {
    display: none;
}

@media screen and (max-width: 520px) {
    /* 520px以下用（スマートフォン用）の記述 */
 img.img-responsive{
        max-width: 100%;
    }  
.l_fea .head img {
    max-width: 100%;
}
    
    
}/*SP end*/