@charset 'utf-8';
/* ==========================================

  works

========================================== */
/* ------------side btn css------------ */
.section01_btn a{
	color: #fff;
	background: #036eb8;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	display: flex;
	align-items: center;
	width: 60px;
	padding: 40px 0;
	position: fixed;
	top: 260px;
	right: 0;
	z-index: 10;
  letter-spacing: 0.2em;
	-webkit-transition: all 0.6s;
	transition: all 0.6s;
}
.section01_btn a:hover{
	opacity: 0.6;
}
@media screen and (max-width: 760px){
	.section01_btn{
		display: none;
	}
}
.section03_btn a{
	color: #fff;
	background:#009fa5;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	display: flex;
	align-items: center;
	width: 60px;
	padding: 40px 0;
	position: fixed;
	top: 436px;
	right: 0;
	z-index: 10;
  letter-spacing: 0.2em;
	-webkit-transition: all 0.6s;
	transition: all 0.6s;
}
.section03_btn a:hover{
	opacity: 0.6;
}
@media screen and (max-width: 760px){
	.section03_btn{
		display: none;
	}
}
/* ------------content css------------ */
.works_wrap{
  width: 1000px;
  margin: 0 auto;
  margin-top: 102px;
}
.works_section01{
  padding-top: 166px;
	margin-top: -100px;
  background: url(/common/images/logomark.svg);
  background-color: rgba(255,255,255,0.7);
  background-blend-mode: lighten;
  background-size: 304px;
  background-position: top 166px right 64px;
  background-repeat: no-repeat;
}
.txt_content h2.works_ttl01{
  width: 134px;
  margin-bottom: 1em;
}
.txt_content h2.works_ttl02{
  width: 283px;
  margin-bottom: 1em;
}
.works_section02 {
  width: 850px;
  margin: 0 auto;
  margin-bottom: 140px;
}
.works_section02 .modal_list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.works_section02 .modal_list li{
  width: 385px;
  text-align: center;
  margin-bottom: 48px;
}
.works_section02 .modal_list .img_list{
  margin-bottom: 10px;
}
.works_section03{
  padding-top: 166px;
	margin-top: -100px;
}
.txt_content h2.works_ttl03{
  width: 193px;
  margin-bottom: 1em;
}
.works_section04 {
  width: 850px;
  margin: 0 auto;
  margin-bottom: 140px;
}
.works_section04 .modal_list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.works_section04 .modal_list li{
  width: 385px;
  text-align: center;
  margin-bottom: 48px;
}
.works_section04 .modal_list .img_list{
  margin-bottom: 10px;
}
/* ------------modal css------------ */
/*infoエリアをはじめは非表示*/
#works_section02_img01,
#works_section02_img02,
#works_section02_img03,
#works_section02_img04,
#works_section02_img05,
#works_section02_img06,
#works_section02_img07,
#works_section02_img08,
#works_section02_img09,
#works_section02_img10,
#works_section02_img11,
#works_section02_img12,
#works_section04_img01,
#works_section04_img02,
#works_section04_img03,
#works_section04_img04,
#works_section04_img05,
#works_section04_img06,
#works_section04_img07,
#works_section04_img08{
	display: none;
}

/*モーダルの横幅を変更したい場合*/
.modaal-container{
    max-width: 900px;
}

/*モーダルのボタンの色を変更したい場合*/
.modaal-close:after,
.modaal-close:before{
	background:#ccc;
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}
.img_content{
  margin-bottom: 20px;
}
.modal_list_p{
  text-align: center;
  font-weight: bold;
}
/* ------------sp css------------ */
@media screen and (max-width: 1000px){
	.works_wrap{
		width: 100%;
		margin-top: 10.2vw;
	}
	.works_section01{
		width: 90%;
		margin: 0 auto;
		padding-top: 16.6vw;
    background-size: 30.4vw;
    background-position: top 16.6vw right 6.4vw;
	}
	.works_section02{
		width: 90%;
    margin-bottom: 14vw;
	}
	.works_section02 .modal_list li{
		width: 42vw;
		margin-bottom: 4.8vw;
	}
	.works_section03{
		width: 90%;
		margin: 0 auto;
		padding-top: 16.6vw;
		margin-top: -10vw;
	}
	.works_section04{
		width: 90%;
		margin-bottom: 14vw;
	}
	.works_section04 .modal_list li{
		width: 42vw;
		margin-bottom: 4.8vw;
	}
	.modaal-content-container{
    padding: 3vw;
	}
	.img_content{
		margin-bottom: 2vw;
	}
}
@media screen and (max-width: 760px){
	.works_section01{
		background: none;
	}
	.works_section02 .modal_list li{
		width: 90%;
		margin: 0 auto;
    margin-bottom: 4.8vw;
	}
	.works_section04 .modal_list li{
		width: 90%;
		margin: 0 auto;
		margin-bottom: 4.8vw;
	}
}
@media screen and (max-width: 500px){
	.txt_content h2.works_ttl01{
    width: 26.8vw;
		min-width: 110px;
	}
	.txt_content h2.works_ttl02{
    width: 56.6vw;
		min-width: 240px;
	}
	.txt_content h2.works_ttl03{
		width: 38.6vw;
		min-width: 170px;
	}
}