@charset "UTF-8";
/* CSS Document */
@media screen and (max-width: 480px) {
.box-001 {
    position: relative;
    margin: 1em .5em;
    padding: calc(1em + 25px) 1.5em 1em;
    border: 2px solid #247294;
    border-radius: 5px;
    overflow: auto;
    float: left;
    width: 100%;
    min-width:310px;
	}
}

.parent {
display: flex;
justify-content: space-between;
align-items: center;
-webkit-justify-content: center;
-webkit-align-items: center;
}
.child {
 width: 20%;
}
@media screen and (max-width: 480px) {
.parent {
flex-wrap: wrap;
 }
.child {
 width: 100%;
 margin: 0.5em;
}
}

.parent2 {
display: flex;
justify-content: space-between;
align-items: center;
-webkit-justify-content: center;
-webkit-align-items: center;
}
.child2 {
 width: 48%;
 margin: 0.5em;
 padding:1em
}
.child3 {
 width: 30%;
 margin: 0.5em;
 padding:1em
}
.child2 img {
 width: 70%;
}
@media screen and (max-width: 480px) {
.parent2 {
flex-wrap: wrap;
 }
.child2 {
 width: 100%;
 margin: 0.5em;
 }
.child2 img {
 width: 100%;
 }
.child3 {
 width: 100%;
 margin: 0.5em;
 padding:1em
}
}

.boximg {
    display: flex;
    align-items: stretch;
}
.box-001 {
    position: relative;
    margin: 1em 0.6em;
    padding: calc(1em + 20px) 0.8em 0.8em;
    border: 2px solid #247294;
    border-radius: 5px;
    overflow: auto;
    float: left;
    width: 23%;
}

.box-001 svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 25px;
    background-color: #247294;
}

.box-001 p {
    margin: 0;
    padding: 0;
}


a.btn_02 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border: 1px solid #228bc8;
  box-sizing: border-box;
  width: 85%;
  height: 40px;
  padding: 0 6% 0 0%;
  color: #228bc8;
  font-size: 16px;
  text-align: left;
  text-decoration: none;
  position: relative;
  transition-duration: 0.2s;
  margin-top:0.8em;
}
a.btn_02:hover {
  background: #228bc8;
  color: #fff;
}
a.btn_02:before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 8px;
  border-color: transparent transparent transparent #228bc8;
  position: absolute;
  top: 50%;
  left: 6%;
  margin-top: -7px;
}
a.btn_02:hover:before {
  border-color: transparent transparent transparent #fff;
}





/*２列並びのバナー風ブロック
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.list-banner .list {
    display: grid;		/*gridを使う指定*/
    place-items: center;	/*天地左右の中央に中身を配置する*/
    position: relative;		/*h4を重ねる為の指定*/
    border-radius: 0px 50px 0px 50px;	/*角を丸くする指定。*/
    overflow: hidden;
    margin-bottom: 2rem;	/*ボックスの下に空けるスペース*/
}

/*画面幅700px以上の追加指定*/
@media screen and (min-width:700px) {
/*listブロックを囲む外側のボックス*/
.list-banner {
	display: grid;	/*gridを使う指定*/
	grid-template-columns: repeat(2, 1fr);	/*2列にする指定。3列にしたければrepeat(3, 1fr)とする。*/
	gap: 2rem;		/*マージン的な指定*/
}

/*ボックス１個あたりの設定*/
.list-banner .list {
	margin-bottom: 0;
}
}/*追加指定ここまで*/

/*ボックス内のh4*/
.list-banner .list h4 {
	position: absolute;z-index: 1;
	font-weight: normal;
	text-align: center;
	color: #fff;			/*文字色*/
	font-size: 2rem !important;		/*文字サイズ。２倍。*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くとる*/
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;

}

/*ボックス内のh4内のspan（小さな文字）*/
.list-banner .list h4 span {
	display: block;
	font-size: 0.4em;	/*文字サイズ。親要素の40%。*/
}

/*画像*/
.list-banner .list figure {
	transition: 0.5s;	/*マウスオン時にかける時間。0.5秒。*/
}

/*マウスオン時の画像*/
.list-banner .list:hover figure {
	transform: scale(1.1);	/*1.1倍に拡大*/
}


.tb01 th,
.tb01 td {
  padding: 1.5px;
  text-align:center;
  box-sizing:border-box;
}
.tb01 th {
  color: #fff;
  width: 40%;
}
@media screen and (max-width: 640px) {
  .tb01 {
    width: 100%;
  }
  table.tb01 th,
  table.tb01 td {
    display: block;
    width: 100%;
    border-bottom:none;
  }
}

.textuu {
   font-family:'ＭＳ 明朝','MS Mincho';
   font-weight:normal;
   font-size:2.8em;
   color:#f45608;
   line-height:100%;
}
.textus {
   font-size:0.8em;
   font-weight:bold;
   color:#000;
}
.textub {
   text-align:left;
   font-size:1.3em;
   line-height:150%;
}
.textum {
   font-family: sans-serif;
   font-weight:normal;
   font-size:1.6em;
   color:#f45608;
   line-height:120%;
}



.swiper-wrap {
  margin: 0 calc(50% - 50vw);
  max-width: 100vw;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

@keyframes zoom-in {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img{
  animation: zoom-in 10s linear 0s 1 normal both;  
}

.slide-text{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 3vw;
  font-family: serif;
  font-weight: bold;
  text-shadow: 2px 2px 8px #000;
  color: #fff;
  transform: translate(-50%,-50%);
}

.slide-img img{
  object-fit: cover;
  height: 600px;
  width: 100vw;
}

@media screen and (max-width: 640px) {
.slide-img img{
  object-fit: cover;
  height: 75vh;
  width: 100vw;
 }
}


ol.kiyakulist {
  counter-reset:list;
  list-style-type:none;
  position:relative;
  font: 14px/1.6 'Mv Boli', 'arial narrow', sans-serif;
  padding: 1.2em;
  background:#FFFFFF;
  -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  width:100%;
}
ol.kiyakulist:after{
  content:"Recycle One-peace";
  position: absolute;
  bottom: 8px;
  right: 1.2em;
  font-size:12px;
  color:#bbb;
}
ol.kiyakulist li{
  position:relative;
  padding: 7px 5px 7px 50px;
  margin: 7px 0 10px 0px;
  font-weight: normal;
  font-size:1.2em;
  border-bottom:dashed 1px #ccc;
  color:#333;
}
ol.kiyakulist li:first-child{
  margin-top:0;
}
ol.kiyakulist li:last-child{
  margin-bottom:20px;
}
ol.kiyakulist li:before{
  counter-increment: list;
  content: counter(list) ",";
  position: absolute;
  left: 15px;
  font-size:1.2em;
   top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.company table {
  width: 100%;
  border-collapse:collapse;
  text-align: center;
  font-size: 1.2em;
}
.company caption{
  font-weight: 600;
}
.company td ,th{
  border: solid 1px #d2d2d2;
padding:5px;
}
.company th {
  background: #C4A3BF;
  color: #000;
  border-bottom: solid 1px #d2d2d2;
}
.company th:m{
  background: #C4A3BF;
  color: #fff;
  border-bottom: solid 1px #fff;
}

@media screen and (max-width: 640px) {
.company table {
    width: 90%;
    margin: 0 auto;
  font-size: 1.3em;
  }
.company th, td {
    display: block;
  }
.company th{
    border-bottom: solid 1px #d2d2d2;
  }
.company td{
    border-top: solid 1px #fff;
  }
}