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; }
#sb01 > .sb_con{ max-width:1400px; }

.sb01_tw{ text-align:center; font-size:0; margin:0 auto 80px; }
.sb01_tw > li{ display:inline-block; padding:0 6px; }
.sb01_tw > li > a{ position:relative; z-index:1; display:block; width:100%; padding:13px 25px; min-width:260px; font-family:'mt','pt','noto'; font-size:40px; font-weight:900; color:#1f1f1f; line-height:1em; transition:0.4s color; }
.sb01_tw > li > a:before{ content:''; position:absolute; bottom:0; left:0; width:100%; height:3px; background-color:#1f1f1f; transition:0.4s height; }
.sb01_tw > li.on > a, .sb01_tw > li:hover > a{ color:#fff; }
.sb01_tw > li.on > a:before, .sb01_tw > li:hover > a:before{ height:100%; }
.sb01_tw > li > a > span{ position:relative; z-index:1; }

.sb01_se{ display:none; position:relative; z-index:1; width:min(100%, 500px); margin:0 auto 60px; }
.sb01_se:after{ content:"\f067"; position:absolute; z-index:1; top:50%; right:20px; font-family:'Line Awesome Free'; font-size:24px; font-weight:900; transform:translate(0, -50%); }
.sb01_se > select{ display:block; width:100%; padding:10px 60px 10px 15px; background-color:#ddd; border:none; font-family:'mt','pt','noto' !important; font-size:36px; font-weight:900; color:#1f1f1f; -o-appearance:none; -webkit-appearance:none; -moz-appearance:none; appearance:none; }
.sb01_se > select > option{ font-family:'mt','pt','noto' !important; font-size:20px; font-weight:300; color:#1f1f1f; }

.sb01_gw{ display:grid }
.sb01_gw{
	grid-template-columns:1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr;
	grid-template-rows:auto 15px auto 15px auto 15px auto 15px auto 15px auto 15px auto 15px auto 15px auto 15px auto 15px auto 15px auto 15px auto;
}
.sb01_gt.gt01{ grid-column:1/12; grid-row:1/12; clip-path:polygon(0 0, 0 0, 0 100%, 0 100%); transition:1s clip-path; }
.sb01_gt.gt02{ grid-column:13/18; grid-row:1/6; clip-path:polygon(0 0, 0 0, 0 100%, 0 100%); transition:1s clip-path; }
.sb01_gt.gt03{ grid-column:19/24; grid-row:1/6; clip-path:polygon(0 0, 0 0, 0 100%, 0 100%); transition:1s clip-path; }
.sb01_gt.gt04{ grid-column:13/24; grid-row:7/16; clip-path:polygon(0 0, 100% 0, 100% 0, 0 0); transition:1s clip-path; }
.sb01_gt.gt05{ grid-column:7/12; grid-row:13/20; clip-path:polygon(100% 0, 100% 0, 100% 100%, 100% 100%); transition:1s clip-path; }
.sb01_gt.gt06{ grid-column:1/6; grid-row:13/20; clip-path:polygon(0 0, 100% 0, 100% 0, 0 0); transition:1s clip-path; }
.sb01_gt.gt07{ grid-column:1/12; grid-row:21/26; clip-path:polygon(0 0, 0 0, 0 100%, 0 100%); transition:1s clip-path; }
.sb01_gt.gt08{ grid-column:13/24; grid-row:17/26; clip-path:polygon(0 0, 0 0, 0 100%, 0 100%); transition:1s clip-path; }
.sb01_gt.act{ clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.sb01_gb{ position:relative; z-index:1; overflow:hidden; }
.sb01_gm{ width:100%; background-color:#333; background-position:center; background-size:cover; background-repeat:no-repeat; }
.sb01_gx{ position:absolute; z-index:1; top:0; bottom:0; left:0; right:0; padding:30px; word-break:keep-all; background-color:rgba(0,0,0,.45); }
.sb01_gx > h4{ font-family:'mt','pt'; font-size:45px; font-weight:300; color:#efefef; line-height:0.8em; margin-bottom:10px; }
.sb01_gx > h3{ font-family:'mt','pt'; font-size:32px; font-weight:600; color:#fff; }

.sb01_gt.gt01 .sb01_gm{ padding-top:100%; min-height:360px; background-image:url(./img/01-01.jpg); }

.sb01_gt.gt02 .sb01_gm{ padding-top:100%; min-height:180px; background-image:url(./img/01-02.jpg); }

.sb01_gt.gt03 .sb01_gm{ padding-top:100%; min-height:180px; background-image:url(./img/01-03.jpg); }

.sb01_gt.gt04 .sb01_gm{ padding-top:82.5%; min-height:300px; background-image:url(./img/01-04.jpg); }

.sb01_gt.gt05 .sb01_gm{ padding-top:133.333333%; min-height:240px; background-image:url(./img/01-05.jpg); }

.sb01_gt.gt06 .sb01_gm{ padding-top:133.333333%; min-height:240px; background-image:url(./img/01-06.jpg); }

.sb01_gt.gt07 .sb01_gm{ padding-top:50%; min-height:180px; background-image:url(./img/01-07.jpg); }

.sb01_gt.gt08 .sb01_gm{ padding-top:83.6%; min-height:300px; background-image:url(./img/01-08.jpg); }

@media(max-width:1080px){
	.sb01_gx{ padding:20px; }
	.sb01_gx > h4{ font-size:40px; }
	.sb01_gx > h3{ font-size:24px; }
}
@media(max-width:850px){
	#sb01{ padding:150px 20px; }
}
@media(max-width:800px){
	.sb01_gw{
		grid-template-columns:1fr 15px 1fr;
		grid-template-rows:auto 15px auto 15px auto 15px auto 15px auto 15px auto;
	}
	.sb01_gt.gt01{ grid-column:1/4; grid-row:1/2; }
	.sb01_gt.gt02{ grid-column:1/2; grid-row:3/4; }
	.sb01_gt.gt03{ grid-column:3/4; grid-row:3/4; }
	.sb01_gt.gt04{ grid-column:1/4; grid-row:5/6; }
	.sb01_gt.gt05{ grid-column:1/2; grid-row:7/8; }
	.sb01_gt.gt06{ grid-column:3/4; grid-row:7/8; }
	.sb01_gt.gt07{ grid-column:1/4; grid-row:9/10; }
	.sb01_gt.gt08{ grid-column:1/4; grid-row:11/12; }

	.sb01_gt.gt01 .sb01_gm{ padding-top:66.66666667%; min-height:240px; }
	.sb01_gt.gt04 .sb01_gm{ padding-top:66.66666667%; min-height:240px; }
}
@media(max-width:700px){
	.sb01_tw{ display:none; }
	.sb01_se{ display:block; }
}
@media(max-width:500px){
	.sb01_gw{
		grid-template-columns:1fr;
		grid-template-rows:auto 15px auto 15px auto 15px auto 15px auto 15px auto 15px auto 15px auto;
	}
	.sb01_gt.gt01{ grid-column:1/2; grid-row:1/2; }
	.sb01_gt.gt02{ grid-column:1/2; grid-row:3/4; }
	.sb01_gt.gt03{ grid-column:1/2; grid-row:5/6; }
	.sb01_gt.gt04{ grid-column:1/2; grid-row:7/8; }
	.sb01_gt.gt05{ grid-column:1/2; grid-row:9/10; }
	.sb01_gt.gt06{ grid-column:1/2; grid-row:11/12; }
	.sb01_gt.gt07{ grid-column:1/2; grid-row:13/14; }
	.sb01_gt.gt08{ grid-column:1/2; grid-row:15/16; }

	.sb01_gt.gt01 .sb01_gm{ padding-top:100%; min-height:360px; }
	.sb01_gt.gt04 .sb01_gm{ padding-top:100%; min-height:360px; }
	.sb01_gt.gt05 .sb01_gm{ padding-top:100%; min-height:360px; }
	.sb01_gt.gt06 .sb01_gm{ padding-top:100%; min-height:360px; }
	.sb01_gt.gt07 .sb01_gm{ padding-top:100%; min-height:360px; }
	.sb01_gt.gt08 .sb01_gm{ padding-top:100%; min-height:360px; }
}