@charset "utf-8";

@import url(base.css);
@import url(common.css);

/*------------------------------*/
/* contents */
/*------------------------------*/

/* work */

@media screen and (min-width:416px) {
	
	.sb01_route {position:relative; top:20px; float:left; box-sizing:border-box; font-size:16px; font-family:"avenir"; color:#111111;}
	.sb01_route > span {display:inline-block; width:6px; height:10px; margin:0 10px; background:url("../img/sub01/route.png") 0 0 / cover no-repeat;}
	.sb01_route em {position:relative; font-family:"avenirN";}
	
	.sb01_select {float:left; width:100%; margin-bottom:20px; text-align:right;}
	.sb01_select button {width:26px; height:26px; margin-left:15px;}
	.sb01_select button:nth-child(1) {background:url("../img/sub01/btnBlock_off.png") no-repeat;}
	.sb01_select button:nth-child(1).on {background:url("../img/sub01/btnBlock_on.png") no-repeat;}
	.sb01_select button:nth-child(2) {background:url("../img/sub01/btnList_off.png") no-repeat;}
	.sb01_select button:nth-child(2).on {background:url("../img/sub01/btnList_on.png") no-repeat;}

	.sb01_list {float:left; width:100%;}
	.sb01_list li {float:left; width:50%; padding:0 20px 50px 0; box-sizing:border-box;}
	.sb01_list li:nth-child(even) {padding:0 0 50px 20px;}
	.sb01_list li a {display:block; width:100%;}
	.sb01_list li p {position:relative; width:100%;}
	.sb01_list li p:nth-child(1) {line-height:0;}
	.sb01_list li p img {width:100%; height:325px;}
	.sb01_list li p:nth-child(2) {overflow:hidden; height:22px; margin-top:20px; font-size:16px; white-space:nowrap; text-overflow:ellipsis; color:#111111;}

	.sb01_list.option {margin-bottom:40px; border-top:1px solid #e2e2e2;}
	.sb01_list.option li {position:relative; width:100% !important; padding:0 !important; border-bottom:1px solid #e2e2e2;}
	.sb01_list.option li a {height:185px; padding:55px 10px 0 300px; box-sizing:border-box;}
	.sb01_list.option li p:nth-child(1) {position:absolute; left:0; top:19px; width:262px;}
	.sb01_list.option li p:nth-child(1) img {height:150px;}
	.sb01_list.option li p:nth-child(2) {width:100%;}
	
	.sb01_paging {float:left; width:100%; text-align:center;}
	.sb01_paging .first {display:inline-block; width:12px; height:11px; background:url("../img/sub01/btnFirst_web.png") 0 0 / 100% 100% no-repeat;}
	.sb01_paging .prev {display:inline-block; width:6px; height:11px; margin-left:45px; background:url("../img/sub01/btnPrev_web.png") 0 0 / 100% 100% no-repeat;}
	.sb01_paging .next {display:inline-block; width:6px; height:11px; margin-right:45px; background:url("../img/sub01/btnNext_web.png") 0 0 / 100% 100% no-repeat;}
	.sb01_paging .last {display:inline-block; width:12px; height:11px; background:url("../img/sub01/btnLast_web.png") 0 0 / 100% 100% no-repeat;}
	.sb01_paging div {display:inline-block; margin:0 40px;}
	.sb01_paging div a {display:inline-block; margin:0 18px; font-size:18px; font-family:"notoLight"; color:#888888;}
	.sb01_paging div em {position:relative; display:inline-block; margin:0 18px; font-size:18px; font-family:"notoMedium"; color:#111111;}
	.sb01_paging div em span {position:absolute; left:0; top:12px; display:block; width:100%; height:1px; background:#00ea00;}
	
	.sb01_viewTop {float:left; width:100%; margin:30px 0 65px;}
	.sb01_viewTop div {float:left; width:50%; padding-right:100px; box-sizing:border-box;}
	.sb01_viewTop h2 {margin-bottom:50px; font-size:30px; font-family:"notoBold"; color:#111111;}
	.sb01_viewTop p {line-height:26px; font-family:"notoLight"; color:#666666;}
	.sb01_viewTop ul {float:left; width:50%; padding-top:98px; box-sizing:border-box;}
	.sb01_viewTop li {position:relative; float:left; width:100%; margin-top:15px; padding-left:70px; box-sizing:border-box; font-family:"notoLight"; color:#666666;}
	.sb01_viewTop li:first-child {margin-top:0;}
	.sb01_viewTop li em {position:absolute; left:0; top:-4px; font-size:16px; font-family:"notoMedium"; color:#111111;}
	.sb01_viewTop li span {display:inline-block; width:1px; height:12px; margin:0 15px; background:#d5d5d5;}
	
	.sb01_viewTop iframe {width:100% !important;}
	
	.sb01_viewMiddle {float:left; width:100%;}
	.sb01_viewMiddle img {width:100%;}
	
	.sb01_viewBottom {float:left; width:100%; height:100px; padding-top:40px; box-sizing:border-box; text-align:center; border-bottom:1px solid #e2e2e2;}
	.sb01_viewBottom .prev {float:left; margin-left:10px; padding-left:20px; background:url("../img/sub01/btnPrev_view.png") 0 4px / auto 11px no-repeat;}
	.sb01_viewBottom .list {}
	.sb01_viewBottom .next {float:right; margin-right:10px; padding-right:20px; background:url("../img/sub01/btnNext_view.png") 100% 4px / auto 11px no-repeat;}
	
}

@media screen and (max-width:415px) {
	
	.sb01_route {float:left; padding:10px 15px; box-sizing:border-box; font-size:16px; font-family:"notoLight"; color:#111111;}
	.sb01_route > span {display:inline-block; width:6px; height:10px; margin:0 10px; background:url("../img/sub01/route.png") 0 0 / cover no-repeat;}
	.sb01_route em {position:relative; font-family:"notoMedium";}

	.sb01_select {display:none;}

	.sb01_list {float:left; width:100%;}
	.sb01_list li {width:100%;}
	.sb01_list li a {display:block; width:100%;}
	.sb01_list li p {width:100%;}
	.sb01_list li p img {width:100%;}
	.sb01_list li p:nth-child(2) {overflow:hidden; height:50px; padding:5px 15px 0; box-sizing:border-box; font-family:"notoLight"; white-space:nowrap; text-overflow:ellipsis; color:#111111;}
	
	.sb01_paging {float:left; width:100%; box-sizing:border-box; text-align:center;}
	.sb01_paging .first {display:inline-block; width:9px; height:11px; background:url("../img/sub01/btnFirst_mobile.png") 0 0 / 100% 100% no-repeat;}
	.sb01_paging .prev {display:inline-block; width:6px; height:11px; margin-left:10px; background:url("../img/sub01/btnPrev_mobile.png") 0 0 / 100% 100% no-repeat;}
	.sb01_paging .next {display:inline-block; width:6px; height:11px; margin-right:10px; background:url("../img/sub01/btnNext_mobile.png") 0 0 / 100% 100% no-repeat;}
	.sb01_paging .last {display:inline-block; width:9px; height:11px; background:url("../img/sub01/btnLast_mobile.png") 0 0 / 100% 100% no-repeat;}
	.sb01_paging div {display:inline-block; margin:0 10px;}
	.sb01_paging div a {display:inline-block; margin:0 10px; font-size:16px; font-family:"notoLight"; color:#888888;}
	.sb01_paging div em {position:relative; display:inline-block; margin:0 10px; font-size:18px; font-family:"notoMedium"; color:#111111;}
	.sb01_paging div em span {position:absolute; left:0; top:12px; display:block; width:100%; height:1px; background:#00ea00;}
	
	.sb01_viewTop {float:left; width:100%; padding:30px 15px 20px; box-sizing:border-box;}
	.sb01_viewTop h2 {margin-bottom:15px; font-size:22px; font-family:"notoMedium"; color:#111111;}
	.sb01_viewTop p {margin-bottom:15px; font-family:"notoLight"; color:#666666;}
	.sb01_viewTop li {margin-bottom:15px; font-family:"notoLight"; color:#666666;}
	.sb01_viewTop li em {display:block; margin-bottom:2px; font-family:"notoRegular"; color:#111111;}
	.sb01_viewTop li span {display:inline-block; width:1px; height:12px; margin:0 15px; background:#d5d5d5;}
	
	.sb01_viewTop iframe {width:100% !important;}
	
	.sb01_viewMiddle {float:left; width:100%; padding:0 15px; box-sizing:border-box;}
	.sb01_viewMiddle img {width:100%;}
	
	.sb01_viewBottom {float:left; width:100%; height:50px; padding:12px 15px 0; box-sizing:border-box; text-align:center;}
	.sb01_viewBottom div {float:left; width:100%; height:100%; border-bottom:1px solid #e2e2e2;}
	.sb01_viewBottom .prev {float:left; margin-left:10px; padding-left:20px; font-family:"notoLight"; background:url("../img/sub01/btnPrev_view.png") 0 4px / auto 11px no-repeat;}
	.sb01_viewBottom .list {font-family:"notoLight";}
	.sb01_viewBottom .next {float:right; margin-right:10px; padding-right:20px; font-family:"notoLight"; background:url("../img/sub01/btnNext_view.png") 100% 4px / auto 11px no-repeat;}
	
}

/* about */

@media screen and (min-width:416px) {

	.sb02 {float:left; width:100%;}
	.sb02 h2 {margin-bottom:45px; font-size:36px; font-family:"avenirN";}
	.sb02 h2 span {color:#00ea00;}
	.sb02 p {margin-bottom:100px; font-size:16px; line-height:28px; font-family:"notoLight"; color:#666666;}
	.sb02 dl {width:50%; margin-bottom:30px; padding-bottom:30px; border-bottom:1px solid #e2e2e2;}
	.sb02 dt {margin-bottom:10px; font-size:18px; color:#555555;}
	.sb02 dt span {display:inline-block; margin-left:10px; font-size:14px; font-family:"notoLight";}
	.sb02 dd {font-size:16px; font-family:"notoLight"; color:#888888;}
	.sb02 dd span {display:inline-block; width:1px; height:12px; margin:0 20px; background:#d5d5d5;}
	
}

@media screen and (max-width:415px) {
	
	.sb02 {float:left; width:100%; padding:30px 15px 0; box-sizing:border-box;}
	.sb02 h2 {margin-bottom:15px; font-size:20px; font-family:"avenirN";}
	.sb02 h2 span {color:#00ea00;}
	.sb02 p {margin-bottom:50px; font-family:"notoLight"; color:#666666;}
	.sb02 dl {margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #e2e2e2;}
	.sb02 dt {margin-bottom:5px; color:#555555;}
	.sb02 dt span {display:inline-block; margin-left:10px; font-size:12px; font-family:"notoLight";}
	.sb02 dd {font-family:"notoLight"; color:#888888;}
	.sb02 dd span {display:inline-block; width:1px; height:10px; margin:0 10px; background:#d5d5d5;}
	
} 

/* contact */

@media screen and (min-width:416px) {

	.sb03 {float:left; width:100%;}
	.sb03 h2 {float:left; width:100%; margin-bottom:45px; font-size:36px; font-family:"avenirN";}
	.sb03 ul {float:left; width:100%; margin-bottom:50px;}
	.sb03 li {position:relative; margin-top:5px; padding-left:80px; box-sizing:border-box; font-size:16px; font-family:"notoLight"; color:#888888;}
	.sb03 li:first-child {margin-top:0;}
	.sb03 li em {position:absolute; left:0; top:0; font-family:"avenir"; color:#555555;}
	.sb03 > div {float:left; width:100%; height:650px;}
	.sb03 > div > div {height:100%;}
	
}

@media screen and (max-width:415px) {
	
	.sb03 {float:left; width:100%; padding:30px 15px 0; box-sizing:border-box;}
	.sb03 h2 {float:left; width:100%; margin-bottom:15px; font-size:20px; font-family:"notoMedium";}
	.sb03 ul {float:left; width:100%; margin-bottom:30px;}
	.sb03 li {position:relative; margin-top:15px; line-height:18px; font-family:"notoLight"; color:#888888;}
	.sb03 li:first-child {margin-top:5px;}
	.sb03 li em {display:block; margin-bottom:5px; font-family:"avenir"; color:#555555;}
	.sb03 > div {float:left; width:100%; height:300px;}
	.sb03 > div > div {height:100%;}
	
}



/*  catalog */

@media screen and (min-width:416px) {

	.catalogue_route {position:relative; top:20px; float:left; box-sizing:border-box; font-size:16px; font-family:"avenir"; color:#111111;}
	.catalogue_route > span {display:inline-block; width:6px; height:10px; margin:0 10px; background:url("../img/sub01/route.png") 0 0 / cover no-repeat;}
	.catalogue_route em {position:relative; font-family:"avenirN";}

	.catalogue {position: relative; width: 100%; margin-top:50px;}
	.catalogue .catalogue-list{position: relative; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
	.catalogue .catalogue-list .gal-list-item{position: relative; margin-bottom:5%;}
	.catalogue .catalogue-list .gal-list-item img {width:580px;}
	.catalogue .catalogue-list .gal-list-item p{margin-top: 10px; font-size: 16px; color: #111111;}

	.catalogue .catalogue-list .gal-list-item .title01 {display: flex; flex-direction: column; justify-content: center; flex-wrap: nowrap; line-height:1; position:absolute;  margin-left:50%; transform: translateX(-80px); top:40%;  transition:0.5s all}
	.catalogue .catalogue-list .gal-list-item .title02 {display: flex; flex-direction: column; justify-content: center; flex-wrap: nowrap; line-height:1; position:absolute;  margin-left:50%; transform: translateX(-80px); top:35%;  transition:0.5s all}
	.catalogue .catalogue-list .gal-list-item .title03 {display: flex; flex-direction: column; justify-content: center; flex-wrap: nowrap; line-height:1; position:absolute;  margin-left:50%; transform: translateX(-80px); top:26%;  transition:0.5s all}
	.catalogue .catalogue-list .gal-list-item .title04 {display: flex; flex-direction: column; justify-content: center; flex-wrap: nowrap; line-height:1; position:absolute;  margin-left:50%; transform: translateX(-80px); top:20%;  transition:0.5s all}
	.catalogue .catalogue-list .gal-list-item .more {display: inline-block;  font-family:"notoRegular"; font-size:18x; color:#ffffff; border: #ffffff solid 1px; padding:15px 40px;  margin-top:10px; opacity:0; transition:0.5s all; text-align: center; }

	.catalogue .catalogue-list .gal-list-item:hover img { filter: brightness(40%);  -webkit-transition: all 0.35s; transition: all 0.35s;}
	.catalogue .catalogue-list .gal-list-item:hover .more {opacity:1}

}

@media screen and (max-width:415px) {

	.catalogue {position: relative; width: 100%;}
	.catalogue .catalogue-list{display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
	.catalogue .catalogue-list .gal-list-item{position: relative; margin-bottom:15%;}
	.catalogue .catalogue-list .gal-list-item img {width:100%;}
	.catalogue .catalogue-list .gal-list-item p{box-sizing: border-box; padding: 5px 15px 0; font-size: 16px; color: #111111;}

	.catalogue .catalogue-list .gal-list-item .title01 {display: flex; flex-direction: column; justify-content: center; flex-wrap: nowrap; line-height:1;}
	.catalogue .catalogue-list .gal-list-item .title02 {display: flex; flex-direction: column; justify-content: center; flex-wrap: nowrap; line-height:1;}
	.catalogue .catalogue-list .gal-list-item .title03 {display: flex; flex-direction: column; justify-content: center; flex-wrap: nowrap; line-height:1;}
	.catalogue .catalogue-list .gal-list-item .title04 {display: flex; flex-direction: column; justify-content: center; flex-wrap: nowrap; line-height:1;}
	.catalogue .catalogue-list .gal-list-item .more {box-sizing: border-box; margin: 5px 15px 0;  font-family:"notoRegular"; font-size:18x; color:#000000; border: #000000 solid 1px; padding:15px 20px;  margin-top:10px; text-align: center; }


}