@charset "UTF-8";

/*********コンテンツMadeinjapan記事********/

.madeinjapan_copy_ttl{
    position: absolute;
	-ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    color:#fff;
    z-index: 100;
	top: 30%;
    left: 13%;
    font-size: 30px;
    letter-spacing: 8px;
}

@media only screen and (max-width: 1024px) {
	.madeinjapan_copy_ttl{
	    position: absolute;
		-ms-writing-mode: tb-rl;
	    writing-mode: vertical-rl;
	    color:#fff;
	    z-index: 100;
	    left: 12%;
	      transform: translateX(-50%);
	    font-size: 130%;
	    letter-spacing: 8px;
	}
}

@media only screen and (max-width: 599px) {
	.madeinjapan_copy_ttl{
	    position: absolute;
		-ms-writing-mode: tb-rl;
	    writing-mode: vertical-rl;
	    color:#fff;
	    z-index: 100;
		top: 5%;
	    left: 50%;
	      transform: translateX(-50%);
	font-size: 100%;
    letter-spacing: 5px;
	}

}


/*********2枚目********/

.overlay_ttl {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    color: #ffffff;
    text-align: center;
    z-index: 1;
    height: 100%;
}

.overlay_ttl img {
    width: 100%!important;
    object-fit: contain!important;
    height: auto!important;
    bottom: 0;
}

.overlay_centerarea{
    position: absolute;
    left: 0;
    bottom: 20%;
    width: 100%;
    color: #ffffff;
    text-align: center;
    z-index: 1;
}

@media screen and (max-height:800px) {
.overlay_centerarea{
    position: absolute;
    left: 0;
    bottom: 10%;
    width: 100%;
    color: #ffffff;
    text-align: center;
    z-index: 1;
}
}

.contents_icon{
    object-fit: contain!important;
	width: 20%!important;
	position: relative!important;
	margin: 0 auto!important;
}

.contents_subttl {
    font-size: 170%;
         text-shadow: 0px 0px 15px rgba(0,0,0,0.6);

}

.overlay_centerarea p{
	width: 80%;
    color: #ffffff;
    margin: 0 10%;
    text-align: center;
    z-index: 1;
    font-weight: 500;
    line-height: 190%;
     text-shadow: 0px 0px 15px rgba(0,0,0,0.6);
}

@media only screen and (max-width: 1024px) {
	.overlay_centerarea{
		bottom: 30%;
		}
	
}


@media only screen and (max-width: 599px) {
	.overlay_centerarea{
	    position: absolute;
	    left: 0;
		top: 40%;
		transform: translateY(-40%);
	    width: 100%;
	    color: #ffffff;
	    text-align: center;
	    z-index: 1;
	}
	.contents_icon{
	    object-fit: contain!important;
		width: 40%!important;
		position: relative!important;
		margin: 0 auto!important;
		height: 30%!important;
	}
	.contents_subttl {
    font-size: 130%;
	}
	.overlay_centerarea p{
    width: 85%;
    color: #ffffff;
    margin: 0 auto;
    text-align: center;
    z-index: 1;
    font-weight: 500;
    line-height: 190%;
    font-size: 12px;
    letter-spacing: 0px;
	}	
}


/*********3枚目********/
.box_inner_1{
    height: 100%;
    position: relative;
}

.center_2img{
width: 100%;
    text-align: center;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
}

.tabioscottonpc{
	position: relative;
    top: -23%!important;
}

.tabioscottonpc img{
    object-fit: contain!important;
	width: 75%!important;
	position: relative!important;	
	margin:0 auto;
}
.tabioscotton_txtpc{
    object-fit: contain!important;
	width: 75%!important;
	position: relative!important;	
	margin:0 auto;
	top: -23%!important;
}

.center_2img ul{
	
}

.center_2img ul li{
	width: 35%;
	list-style: none;
	display: inline-block;
}

.center_2img ul li img{
    object-fit: contain!important;
	width: 100%!important;
	position: relative!important;	
}

.ttl_position_right{
position: relative;
    width: 200px;
    right: 4%;
    margin: 0 0 0 auto;
    top: 10%;
    z-index: 1;
}

.ttl_position_right2{
position: relative;
    width: 200px;
    right: 4%;
    margin: 0 0 0 auto;
    top: 10%;
    z-index: 1;
}

.vertical_text{
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;	
}

.text_position_left{
    margin: 0 auto 0 0;
    position: absolute;
    width: 30%;
    bottom: 7%;
    left: 5%;
    z-index: 1;
        }
 
@media only screen and (max-width: 1024px) {
	.text_position_left{
	    width: 60%;
		bottom: 13%;
		left: 15%;
	}
}
      
@media only screen and (max-width: 599px) {



	.center_2img{
	width: 100%;
	    text-align: center;
	top: 35%;
    transform: translateY(-35%);
	  position: absolute;
	}
	
	.center_2img ul{
	display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
   	}
	
	.center_2img ul li{
		width: 45%;
	}

	.center_2img li:nth-child(1){
		order: 2;
	}		
	.center_2img li:nth-child(2){
		order: 1;
	}	

	
	.center_2img ul li img{
	    object-fit: contain!important;
		width: 100%!important;
		position: relative!important;	
	}	

	.ttl_position_right{
	position: relative;
	    width: 20%;
	    right: 20%;
	    margin: 0 0 0 auto;
	    top: 6%;
	    z-index: 1;
	}

	.vertical_text{
	  font-size: 95%;
	}
	.text_position_left{
    margin: 0 auto 0 0;
    position: absolute;
    width: 90%;
    bottom: 1%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
	}	
	.text_position_left p{
    font-weight: 300;
    line-height: 190%;
    font-size: 12px;

	}

}        

/*********4枚目********/
#section4{
	background-color: #fff;
}

.box_inner_2{
	width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    background-color: #fff;
}

.box_inner_2 img{
display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.box_inner_2 .rightbox{
width: 100%;
    height: 100%;
    min-height: 0%;
    flex: 1 1 auto;
    position: relative;
    }

.box_inner_2 .leftbox{
width: 100%;
    height: 100%;
    min-height: 0%;
    flex: 1 1 auto;
    position: relative;
    }

.box_inner_2 .centerbox{
	width: 100%;
    height: 100%;
    min-height: 0%;
    flex: 1 1 auto;
    position: relative;
    }

.centerbox .vertical_text{
position: relative;
    margin: 7% 8% 0 auto;	
}

.centerbox p{
    margin: 7%;
    position: absolute;
    bottom: 0;
	font-size: 80%;
    line-height: 180%;
    text-align: justify;
}
@media only screen and (max-width: 1024px) {
	.box_inner_2{
		height: 50%;
		top:50%;
		transform: translateY(-50%);		
	}
.centerbox .vertical_text{
		font-size:120%;
}	
}


@media only screen and (max-width: 599px) {
	.box_inner_2{
	width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: block;
    background-color: #fff;
	}
	.box_inner_2 .rightbox_sp{
	position: relative;
	margin-top: 44px;
    }
	.box_inner_2 .rightbox_sp img{
	object-fit: contain!important;
    position: absolute;
    top: 10%;
    height: auto;
	}
.box_inner_2 .centerbox{
	width: 100%;
    height: 100%;
    min-height: 0%;
    flex: 1 1 auto;
    position: absolute;
    }
  	.centerbox .vertical_text{
	position: relative;
	margin: -3% auto 0 8%;
	font-size:95%;
	}
	
	.centerbox p{
	font-weight: 300;
    line-height: 190%;
    font-size: 12px;
    bottom: 6%;
    position: absolute;
	}	   
}

/*********5枚目********/
.box_inner_3{
width: 100%;
    height: 72%;
    overflow: hidden;
    position: relative;
    display: flex;
    background-color: #fff;
	top: 50%;
    transform: translateY(-50%);
}

.box_inner_3 img{
display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.box_inner_3 .rightbox{
width: 100%;
    height: 100%;
    min-height: 0%;
    flex: 1 1 auto;
    position: relative;
        order:3;
    }

.box_inner_3 .centerbox{
width: 100%;
    height: 100%;
    min-height: 0%;
    flex: 1 1 auto;
    position: relative;
        order:2;
    }

.box_inner_3 .leftbox{
	width: 100%;
    height: 100%;
    min-height: 0%;
    flex: 1 1 auto;
    position: relative;
    order:1;
    }

.leftbox .vertical_text{
position: relative;
    margin: 7% 8% 0 auto;	
}

.leftbox p{
    margin: 7% 7% 0%;
    position: absolute;
    bottom: 0;
	font-size: 80%;
    line-height: 180%;
    text-align: justify;
}

@media only screen and (max-width: 1024px) {
	.box_inner_3{
		height: 50%;
		top:50%;
		transform: translateY(-50%);		
	}
	.leftbox .vertical_text{
	font-size: 120%;
	}	
	
}


@media only screen and (max-width: 599px) {
	.box_inner_3{
	width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-flow: column;
    background-color: #fff;
    padding-top:3%;
	}
.box_inner_3 img{
display: block;
    position: absolute;
    width: 100%;
    height: auto;
    object-fit: contain;
    top: 50%;
    transform: translateY(-50%);
}
	
	.box_inner_3 .rightbox{
	width: auto;
	    height: 100%;
	    min-height: 0%;
	    flex: 1 1 auto;
	    position: relative;
	        order:1;
	        margin: 5%;
	        overflow: hidden;
	    }
	
	.box_inner_3 .centerbox{
	width: auto;
	    height: 100%;
	    min-height: 0%;
	    flex: 1 1 auto;
	    position: relative;
	        order:3;
	        margin: 5%;
	        bottom: -3%;
	    }
	
	.box_inner_3 .leftbox{
		width: 100%;
	    height: 100%;
	    min-height: 0%;
	    flex: 1 1 auto;
	    position: relative;
	    order:2;
	    
	    }
	.leftbox .vertical_text{
		position: relative;
	    margin-top: 3%!important;
		margin-right: 5%!important;
			font-size:95%!important;	
	}
	.leftbox p{
		font-weight: 300;
	    line-height: 190%;
	    font-size: 12px;
	    width: 60%;
	    margin: 5%;
    position: absolute;
    top: -10%;
	}


}


/*********コンテンツregional記事********/

/*********1枚目********/
.regional_copy_ttl{
    position: absolute;
	-ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    color:#fff;
    z-index: 100;
	top: 30%;
    left: 13%;
    font-size: 130%;
    letter-spacing: 8px;
     text-shadow: 0px 0px 15px rgba(0,0,0,0.6);

}

@media only screen and (max-width: 599px) {
	.regional_copy_ttl{
	    position: absolute;
		-ms-writing-mode: tb-rl;
	    writing-mode: vertical-rl;
		color: #fff;
	    z-index: 100;
		top: 44%;
	    left: 13%;
	    transform: translateX(-17%);
	    font-size: 100%;
	    letter-spacing: 5px;
	}	
}


/*********2枚目********/
@media only screen and (max-width: 599px) {
	.tp30{
		top:30%;		
	}
}


/*********3枚目********/
.tabioscottonsp{
	position: relative;
    top: 5%!important;
}

.tabioscottonsp img{
    object-fit: contain;
	width: 90%;
	position: relative;	
	margin:0 auto;
}
.tabioscotton_txt{
    object-fit: contain;
	width: 65%;
    position: relative;
	top: 5%!important;	
}

.tabioscottonsptxt{
    object-fit: contain;
	width: 90%;
    position: relative;
	top: 5%;
	margin: 0 auto;	
	display: flex;
}

.tabioscottonsptxt p{
    font-size: 80%;
    line-height: 180%;
    font-weight: 300;
    text-align: justify;
    width: 70%;
    float: left;
}

.tabioscottonsptxt h2{
margin-top: 4%;
    float: right;
}

.tabioscottonsptxt h2 span{
letter-spacing: -0.1em;
}

.center_wideimg{
width: 100%;
    text-align: center;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
}

.center_wideimg ul{
	
}

.center_wideimg ul li{
	width: 70%;
	list-style: none;
	display: inline-block;
}

.center_wideimg ul li img{
    object-fit: contain!important;
	width: 100%!important;
	position: relative!important;	
}

.top10line{
	top: 10%;
}
@media only screen and (max-width: 1024px) {
	.top10line{
	top: unset;
	}
}

@media only screen and (max-width: 599px) {
	.top10line{
	top: unset;
	}
	.center_wideimg ul li{
	width: 55%;
	}
}

/*********4枚目********/
.white_ttl{
	color:#000;
}
@media only screen and (max-width: 599px) {
.white_ttl{
	color:#fff;
	padding-top: 10%;
}
}

/*********コンテンツrecycle記事********/
/*********1枚目********/
.recycle_copy_ttl{
    position: absolute;
	-ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    color:#000;
    z-index: 100;
	bottom: 10%;
    left: 13%;
    font-size: 130%;
    letter-spacing: 8px;
     text-shadow: 0px 0px 15px rgba(255,255,255,0.6);

}

@media only screen and (max-width: 599px) {
	.recycle_copy_ttl{
	    position: absolute;
		-ms-writing-mode: tb-rl;
	    writing-mode: vertical-rl;
		color: #000;
	    z-index: 100;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%,-50%);
	    font-size: 100%;
	    letter-spacing: 5px;
	}	
}

/*********2枚目********/
.shadowplus{
     text-shadow: 0px 0px 6px rgba(0,0,0,0.8)!important;	
}

.text-combine {
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
  text-combine-upright: all;
}

/*********3枚目********/
@media only screen and (max-width: 599px) {
.spwhite{
	color:#fff;
	margin: 15% auto 0 3%!important;
}
.top0{
	margin-top:0px!important;
}

.bottom0{
	bottom: 0!important;
    margin: 12px!important;
    line-height: 180%!important;
}
}

@media only screen and (max-width: 1024px) {
.bottom0{
    line-height: 170%!important;
    margin-bottom: 0;
}

}

/*********4枚目********/

.box_inner_4{
width: 100%;
    height: 72%;
    overflow: hidden;
    position: relative;
    display: flex;
    background-color: #fff;
	top: 50%;
    transform: translateY(-50%);
}

.box_inner_4 img{
display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.box_inner_4 .rightbox{
width: 100%;
    height: 100%;
    min-height: 0%;
    flex: 1 1 auto;
    position: relative;
        order:3;
    }



.box_inner_4 .leftbox{
	width: 100%;
    height: 100%;
    min-height: 0%;
    flex: 1 1 auto;
    position: relative;
    order:1;
    }

.leftbox .vertical_text{
position: relative;
    margin: 7% 8% 0 auto;	
}

.leftbox p{
    margin: 7% 7% 0%;
    position: absolute;
    bottom: 0;
	font-size: 80%;
    line-height: 180%;
    text-align: justify;
}


.box_inner_5{
width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    background-color: #fff;
	top: 50%;
    transform: translateY(-50%);	
}
.box_inner_5 img{
object-fit: cover!important;
    height: 100%!important;
    position: relative!important;
    left: 50%;
    transform: translateX(-50%);	
}

.box_inner_5 .innermargin{
position: absolute;
    z-index: 10;
    width: 40%;
    height: 100vh;
    padding: 5%;
}

.box_inner_5 .square_left{
    flex: 1 1 auto;	
    overflow: hidden;
}

.box_inner_5 .square_left h3{
	right: 5%;
    position: absolute;
    bottom: 20%;	
}

.box_inner_5 .square_left p{
	position: absolute;
    bottom: 18%;
    width: 60%;
}


.box_inner_5 .square_right{
	flex: 1 1 auto;
	overflow: hidden;
}

.box_inner_5 .square_right h3{
	right: 5%;
    position: absolute;
    bottom: 20%;	
}

.box_inner_5 .square_right p{
	position: absolute;
    bottom: 18%;
    width: 60%;
}


@media only screen and (max-width: 1024px) {
	.box_inner_4{
		height: 50%;
		top:50%;
		transform: translateY(-50%);		
	}
	.box_inner_5{
	width: 100%;
	    height: 60%;
	    overflow: hidden;
	    position: relative;
	    display: flex;
	    background-color: #fff;
		top: 50%;
	    transform: translateY(-50%);		
	}
	.box_inner_5 img{
	object-fit: cover!important;
	    width: 100%!important;
	    position: relative!important;
	    left: 50%;
	    transform: translateX(-50%);	
	}		
	.leftbox .vertical_text{
	font-size: 120%;
	}
	.box_inner_5 .innermargin {
	    height: 85%;
	}

	.box_inner_5 .square_left h3{
position: relative;
    left: -1%;
    top: 4%;		
	}
	
	.box_inner_5 .square_left p{
	position: absolute;
    bottom: 3%;
    width: 85%;
	}
	
	.box_inner_5 .square_right h3{
position: relative;
    left: -1%;
    top: 4%;		
	}
	
	.box_inner_5 .square_right p{
	position: absolute;
    bottom: 3%;
    width: 85%;
	}	
}


@media only screen and (max-width: 599px) {
	.box_inner_5{
	width: 100%;
	    height: 100%;
	    overflow: hidden;
	    position: relative;
	    display: flex;
	    flex-direction:column;
	    background-color: #fff;
		top: 50%;
	    transform: translateY(-50%);	
	}
	
	
	.box_inner_5 img{
	object-fit: cover!important;
	        width: 100%!important;
	    position: relative!important;
	    left: 50%;
	    transform: translateX(-50%);	
	}
	
	.box_inner_5 .innermargin{
	position: absolute;
    z-index: 10;
    width: 90%;
    height: 50%;
    padding: 5%;
	}
	
	.box_inner_5 .square_left{
	    flex: 1 1 auto;	
	    overflow: hidden;
	}
	
	.box_inner_5 .square_left h3{
position: relative;
    left: -1%;
    top: 14%;
	}
	
	.box_inner_5 .square_left p{
position: absolute;
    bottom: 10%;
    width: 85%;
    font-size: 80%;
	}
	
	
	.box_inner_5 .square_right{
		flex: 1 1 auto;
		overflow: hidden;
	}
	
	.box_inner_5 .square_right h3{
position: relative;
    left: -1%;
    top: 4%;	
	}
	
	.box_inner_5 .square_right p{
position: absolute;
    bottom: 10%;
    width: 85%;
    font-size: 80%;
	}


	.top30{
		top: 30%;
	}
	
	.box_inner_4{
	width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-flow: column;
    background-color: #fff;
    padding-top:3%;
	}
.box_inner_4 img{
display: block;
    position: absolute;
    width: 100%;
    height: auto;
    object-fit: contain;
    top: 50%;
    transform: translateY(-50%);
}
	
	.box_inner_4 .rightbox{
	width: auto;
	    height: 100%;
	    min-height: 0%;
	    flex: 1 1 auto;
	    position: relative;
	        order:1;
	        margin: 5%;
	        overflow: hidden;
	        top: 5%;
	    }
	

	
	.box_inner_4 .leftbox{
		width: 100%;
	    height: 100%;
	    min-height: 0%;
	    flex: 1 1 auto;
	    position: relative;
	    order:2;
	    
	    }
	.box_inner_4 .vertical_text{
	    position: absolute;
	    margin-top: 0%;
	    margin-right: 5%;
	    font-size: 95%;
	    right: 2%;
	    top: -100%;
	}
	.box_inner_4 .leftbox p{
font-weight: 300;
    line-height: 190%;
    font-size: 12px;
    width: 90%;
    margin: 5%;
    position: relative;
    top: 20px;
	}


}