article{ padding:0; }
.sb_wrap, .sb_wrap *{ box-sizing:border-box; }
section{ overflow:hidden; }
.sb_con{ width:100%; margin:0 auto; }
.btnArea{ display:none; }


/* sb01 */
#sb01{ padding:200px 40px; background-color:#333; background-image:url(./img/01-00.jpg); background-position:50% 0; background-size:cover; background-repeat:no-repeat; background-attachment:fixed; }
#sb01 > .sb_con{ max-width:1500px; }
.sb01_gw{
	display:grid;
	grid-template-columns:5.97826087% 37.5% 2.7173913% 20.9239130435% 2.7173913% 30.1630434783%;
	grid-template-rows:auto 100px max(19.53125vw, 250px) max(19.53125vw, 250px) max(19.53125vw, 250px) auto max(10.4166667vw, 100px) auto 100px auto;
}
.sb01_gt.gt01{ grid-column:1/7; grid-row:1/2; }
.sb01_gt.gt02{ grid-column:4/7; grid-row:3/5; }
.sb01_gt.gt03{ grid-column:2/3; grid-row:4/7; }
.sb01_gt.gt04{ grid-column:6/7; grid-row:6/9; display:flex; }
.sb01_gt.gt05{ grid-column:2/6; grid-row:8/9; }
.sb01_gt.gt06{ grid-column:2/7; grid-row:10/11; }
.sb01_pm{ position:relative; z-index:1; width:100%; background-color:#333; background-position:50% 100%; background-size:cover; background-repeat:no-repeat; box-shadow:7px 7px 12px 0 rgba(0,0,0,.4); transition:1s -webkit-clip-path; }
.sb01_pm.act{ -webkit-clip-path:polygon(0 0, 110% 0%, 110% 110%, 0 110%); }
/*.sb01_pm:after{ content:''; position:absolute; z-index:1; top:0; bottom:0; left:0; right:0; background-color:#333; transition:1s all; }*/
.sb01_px{ width:100%; word-break:keep-all; }
.sb01_px > h3{ font-family:'mt','pt','noto'; font-size:70px; font-weight:800; color:#fff; line-height:1em; margin-bottom:30px; }
.sb01_px > h3 > span{ position:relative; z-index:1; opacity:0; transition:1s opacity; }
.sb01_px.act > h3 > span{ opacity:1; }
.sb01_px > p{ font-family:'pt','noto'; font-size:20px; font-weight:100; color:#efefef; line-height:1.5em; opacity:0; transition:1s transform, 1s opacity; }
.sb01_px.act > p{ transform:translate(0, 0); opacity:1; }

.sb01_pb{ width:100%; }
.sb01_pw{ display:flex; flex-flow:row wrap; }

.pw1 > .sb01_pt.lf{ width:50%; }
.pw1 > .sb01_pt.rt{ width:50%; display:flex; align-items:center; padding-left:50px; }
.pm01{ padding-top:max(52.5%, 300px); background-image:url(./img/01-01.jpg); -webkit-clip-path:polygon(0 0, 0 0, 0 110%, 0 110%); }
/*.pm01.act:after{ right:100%; }*/
.px01{ max-width:535px; }
.px01 > p{ transform:translate(100px, 0); }

.pw2 > .sb01_pt.lf{ width:50%; }
.pw2 > .sb01_pt.rt{ width:50%; padding-left:50px; }
.pm02{ padding-top:max(150%, 400px); background-image:url(./img/01-02.jpg); -webkit-clip-path:polygon(0 0, 110% 0, 110% 0, 0 0); }
/*.pm02.act:after{ top:100%; }*/
.px02{ max-width:430px; }
.px02 > p{ transform:translate(100px, 0); }

.pm03{ padding-top:max(108.695652%, 400px); background-image:url(./img/01-06.jpg); margin-bottom:50px; -webkit-clip-path:polygon(110% 0, 110% 0, 110% 110%, 110% 110%); }
/*.pm03.act:after{ right:100%; }*/
.px03{ margin:0 0 0 auto; max-width:600px; text-align:right; }
.px03 > p{ transform:translate(-100px, 0); }

.pm04{ padding-top:max(145.454545%, 500px); height:100%; background-image:url(./img/01-04.jpg); -webkit-clip-path:polygon(0 0, 110% 0, 110% 0, 0 0); }
/*.pm04.act:after{ top:100%; }*/
.px04{ margin:0 0 0 auto; max-width:660px; text-align:right; padding-right:50px; }
.px04 > p{ transform:translate(-100px, 0); }

.pw3 > .sb01_pt.lf{ width:39.8843930636%; }
.pw3 > .sb01_pt.rt{ width:60.1156069364%; display:flex; align-items:flex-end; padding-left:50px; }
.pm05{ padding-top:max(86.9565217%, 300px); background-image:url(./img/01-05.jpg); -webkit-clip-path:polygon(110% 0, 110% 0, 110% 110%, 110% 110%); }
/*.pm05.act:after{ left:100%; }*/
.px05{ max-width:660px; }
.px05 > p{ transform:translate(100px, 0); }

@media(max-width:1080px){
	.sb01_gw{
		display:grid;
		grid-template-columns:5.97826087% 37.5% 2.7173913% 20.9239130435% 2.7173913% 30.1630434783%;
		grid-template-rows:auto 100px auto 100px auto 100px auto 30px auto 100px auto;
	}
	.sb01_gt.gt01{ grid-column:1/7; grid-row:1/2; }
	.sb01_gt.gt02{ grid-column:1/7; grid-row:3/4; }
	.sb01_gt.gt03{ grid-column:1/7; grid-row:5/6; display:flex; flex-direction:column; align-items:flex-end; }
	.sb01_gt.gt04{ grid-column:1/7; grid-row:7/8; display:flex; flex-direction:column; align-items:flex-start; }
	.sb01_gt.gt05{ grid-column:1/7; grid-row:9/10; }
	.sb01_gt.gt06{ grid-column:1/7; grid-row:11/12; }
	.sb01_pb{ max-width:540px; width:75%; }

	.sb01_px > h3{ font-size:50px; margin-bottom:20px; }
	.sb01_px > p{ font-size:18px; }

	.pw1 > .sb01_pt.lf{ width:50%; }
	.pw1 > .sb01_pt.rt{ width:50%; padding-left:30px; }
	.pw2 > .sb01_pt.lf{ width:55%; }
	.pw2 > .sb01_pt.rt{ width:45%; padding-left:30px; display:flex; align-items:flex-end; }
	.pm02{ padding-top:max(120%, 300px); }
	.pm03{ margin-bottom:30px; }
	.pm04{ padding-top:max(120%, 300px); }
	.px04{ padding-right:0; }
	.pw3 > .sb01_pt.lf{ width:50%; }
	.pw3 > .sb01_pt.rt{ width:50%; padding-left:30px; }
}
@media(max-width:850px){
	#sb01{ padding:150px 20px; }

	.sb01_gw{ display:block; }
	.sb01_gt.gt01{ margin-bottom:100px; }
	.sb01_gt.gt02{ margin-bottom:100px; }
	.sb01_gt.gt03{ margin-bottom:100px; }
	.sb01_gt.gt05{ margin-bottom:100px; }

	.pw1 > .sb01_pt.lf{ width:100%; }
	.pw1 > .sb01_pt.rt{ width:100%; padding-left:0; }
	.px01{ padding-top:30px; }
	.pw3 > .sb01_pt.lf{ width:100%; }
	.pw3 > .sb01_pt.rt{ width:100%; padding-left:0; }
	.px04{ padding-top:30px; }
	.px05{ padding-top:30px; }
}
@media(max-width:600px){
	.sb01_pb{ width:100%; }
	.sb01_px > h3{ font-size:40px; }
	.sb01_px > p{ font-size:16px; }

	.pw2 > .sb01_pt.lf{ width:100%; }
	.pw2 > .sb01_pt.rt{ width:100%; padding-left:0; }
	.px02{ padding-top:30px; }

}