@charset "utf-8";

/*　中之島紹介　*/

.img-frame-box {
    display: flex;
	flex-flow: wrap;
    justify-content: center;
    width: 100%;
    margin:0 auto;
}

.img-frame {
	position: relative;
	font-weight: bold;
	padding:70px 15px;
}

.img-frame .photo {
	display: block;
}

.img-frame .img1 {
	width:90%;
	max-width:270px;
	height:auto;
	padding:10px;
	background:#ffffff;
	box-shadow:0 4px 10px #333333;
	-webkit-transform:rotate(8deg);
	-moz-transform:rotate(8deg);
	-ms-transform:rotate(8deg);
	transform:rotate(8deg);
}

.img-frame .pin1 {
	position:absolute;
	top:35px;
	left:-20px;
	margin:0;
	padding:9px;
	background:rgba(255, 255, 245, 0.8);
	box-shadow:0 2px 4px #555555;
	-webkit-transform:rotate(-17deg);
	-moz-transform:rotate(-17deg);
	-ms-transform:rotate(-17deg);
	transform:rotate(-17deg);
	z-index:5;
}

.img-frame .img2 {
	width:90%;
	max-width:270px;
	height:auto;
	padding:10px;
	background:#ffffff;
	box-shadow:0 4px 10px #333333;
	-webkit-transform:rotate(-10deg);
	-moz-transform:rotate(-10deg);
	-ms-transform:rotate(-10deg);
	transform:rotate(-10deg);
}

.img-frame .pin2 {
	position:absolute;
	top:35px;
	left:180px;
	margin:0;
	padding:9px;
	background:rgba(255, 255, 245, 0.8);
	box-shadow:0 2px 4px #555555;
	-webkit-transform:rotate(20deg);
	-moz-transform:rotate(20deg);
	-ms-transform:rotate(20deg);
	transform:rotate(20deg);
	z-index:5;
}

.img-frame .img3 {
	width:80%;
	max-width:270px;
	height:auto;
	padding:10px;
	background:#ffffff;
	box-shadow:0 4px 10px #333333;
	-webkit-transform:rotate(30deg);
	-moz-transform:rotate(30deg);
	-ms-transform:rotate(30deg);
	transform:rotate(30deg);
}

.img-frame .pin3 {
	position:absolute;
	top:65px;
	left:120px;
	margin:0;
	padding:9px;
	background:rgba(255, 255, 245, 0.8);
	box-shadow:0 2px 4px #555555;
	-webkit-transform:rotate(30deg);
	-moz-transform:rotate(30deg);
	-ms-transform:rotate(30deg);
	transform:rotate(30deg);
	z-index:5;
}

.img-frame img {
    width: 100%;
    max-width: 300px;
    height: auto;
}

.frex_list{
	display:flex; 
	flex-wrap: wrap;
	width: 100%;  
  }
  .frex_list .fl1{
	width:80px;
  }
  
  .frex_list .fl2{
	width: calc(100% - 80px);
  }
 
  .info_link_flex .info_link img{
	max-width:90%;
	height:auto;
}

@media screen and (max-width: 850px) {
	.frex_list{
		display: flex;
		flex-direction: column;
		width: 100%;
	  }

	  .award-txt01,
	  .maincompany-txt01{
		width: 100%;
		font-size: 14px;
	  }
	  .award-txt02,
	  .maincompany-txt02{
		padding-left: 1em;
		width: 100%;
		font-size: 14px;
	  }	
	  .info_link_flex{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    .info_link_flex .info_link{
        text-align: center;
        width: 100%;
        margin: 10px 0;
    }
}

@media screen and (min-width: 851px) {
	.award-txt01{
		width: 250px;
	  }
	.award-txt02,
	.maincompany-txt02{
		flex-basis: auto;
	  }
	.maincompany-txt01{
		width: 100px;
	  }
	  .info_link_flex{
		display: flex;
		flex-flow: wrap;
		justify-content: space-around;
		margin:0 auto;
	}
	.info_link_flex .info_link{
			text-align: center;
			width: 50%;
	}
}