.sb_sc, .sb_sc *{ box-sizing:border-box; }

.btnArea{ display:none; }



/*sc01*/

#sc01{ padding:0 0 200px; }
.sc01_pw{ display:grid; grid-template-columns:45% 1fr; }

.sc01_bw1{ margin:0 -5px; display:flex; flex-flow:row wrap; }

.sc01_b1{ width:50%; padding:0 5px; }
.sc01_b1 > div{ position:relative; z-index:1; width:0; padding-top:100%; background-color:#f7f7f7; overflow:hidden; transform-origin:left center; background-position:center; background-size:cover; background-repeat:no-repeat; }
.sc01_b1 .sc01_txt{ position:absolute; top:20px; left:20px; word-break:keep-all; color:#fff; transition:0.4s color; }
.sc01_b1 .sc01_txt > h3{ font-family:'pt'; font-size:30px; font-weight:700; line-height:1em; margin-bottom:5px; }
.sc01_b1 .sc01_txt > p{ font-family:'pt'; font-size:20px; font-weight:300; line-height:1.1em; }

.sc01_b1 > div.de01{ transition:0.4s width, 0.4s background-color; background-image:url(./img/01-01.jpg); }
.sc01_b1 > div.de02{ transition:0.4s width 0.2s, 0.4s background-color; background-image:url(./img/01-02.jpg); }

.sc01_b2{ width:100%; padding:0 5px; margin:10px 0 0; }
.sc01_b2 > div{ position:relative; z-index:1; width:0; padding-top:75%; background-color:#f7f7f7; overflow:hidden; transition:0.4s width, 0.4s background-color; transform-origin:left center; background-position:center; background-size:cover; background-repeat:no-repeat; }
.sc01_b2 .sc01_txt{ position:absolute; top:20px; left:20px; word-break:keep-all; color:#fff; transition:0.4s color; white-space:nowrap; }
.sc01_b2 .sc01_txt > h3{ font-family:'pt'; font-size:30px; font-weight:700; line-height:1em; margin-bottom:5px; }
.sc01_b2 .sc01_txt > p{ font-family:'pt'; font-size:20px; font-weight:300; line-height:1.1em; }

.sc01_b2 > div.de03{ transition:0.4s width 0.4s, 0.4s background-color; background-image:url(./img/01-03.jpg); }

.sc01_pt.rt{ padding-left:50px; display:flex; flex-direction:column; justify-content:space-between; }
.sc01_pb{ max-width:715px; width:100%; margin:0 0 0 auto; }
.sc01_tt{ width:100%; margin:0 0 max(14vw, 100px) auto; text-align:right; word-break:keep-all; }
.sc01_tt > h2{ margin-top:-8px; font-family:'nm'; font-size:80px; font-weight:600; color:#333; line-height:1em; margin-bottom:30px; transform:translate(100px, 0); opacity:0; transition:1s transform, 1s opacity; }
.sc01_tt > p{ font-size:17px; font-weight:300; color:#333; line-height:1.5em; transform:translate(100px, 0); opacity:0; transition:1s transform 0.2s, 1s opacity 0.2s; }

.sc01_tt.act > h2{ transform:translate(0, 0); opacity:1; }
.sc01_tt.act > p{ transform:translate(0, 0); opacity:1; }

.sc01_bw2{ margin:0 -5px; display:flex; flex-flow:row wrap; }
.sc01_b3{ width:33.33333333%; padding:0 5px; }
.sc01_b3 > div{ position:relative; z-index:1; margin:0 0 0 auto; width:0; padding-top:100%; background-color:#f7f7f7; overflow:hidden; transform-origin:right center; background-position:center; background-size:cover; background-repeat:no-repeat; }
.sc01_b3 > div.b1_2.de01{ transition:0.4s width 0s, 0.4s background-color; background-image:url(./img/01-04.jpg); }
.sc01_b3 > div.b1_2.de02{ transition:0.4s width 0.2s, 0.4s background-color; background-image:url(./img/01-05.jpg); }
.sc01_b3 > div.b1_2.de03{ transition:0.4s width 0.4s, 0.4s background-color; background-image:url(./img/01-06.jpg); }
.sc01_b3 .sc01_txt{ position:absolute; top:20px; right:20px; text-align:right; word-break:keep-all; color:#fff; transition:0.4s color; white-space:nowrap; }
.sc01_b3 .sc01_txt > h3{ font-family:'pt'; font-size:30px; font-weight:700; line-height:1em; margin-bottom:5px; }
.sc01_b3 .sc01_txt > p{ font-family:'pt'; font-size:20px; font-weight:300; line-height:1.1em; }

.sc01_b1 > div:after, .sc01_b2 > div:after, .sc01_b3 > div:after{ content:''; position:absolute; z-index:1; top:0; bottom:0; left:0; right:0; border:1px solid #333; }
/*.sc01_b1:hover > div, .sc01_b2:hover > div, .sc01_b3:hover > div{ background-color:#333; }
.sc01_b1:hover .sc01_txt, .sc01_b2:hover .sc01_txt, .sc01_b3:hover .sc01_txt{ color:#ccc; }*/
.sc01_b1.act > div, .sc01_b2.act > div, .sc01_b3.act > div{ width:100%; }

.sc01_b1 > div:before, .sc01_b2 > div:before, .sc01_b3 > div:before{ content:''; position:absolute; z-index:1; top:0; bottom:0; left:0; right:0; background-color:#333; }
.sc01_b1.act > div:before, .sc01_b2.act > div:before{ left:100%; }
.sc01_b3.act > div:before{ right:100%; }
.sc01_b1.act > div.de01:before{ transition:0.4s left 0.4s; }
.sc01_b1.act > div.de02:before{ transition:0.4s left 0.6s; }
.sc01_b2.act > div.de03:before{ transition:0.4s left 0.8s; }
.sc01_b3.act > div.de01:before{ transition:0.4s right 0.4s; }
.sc01_b3.act > div.de02:before{ transition:0.4s right 0.6s; }
.sc01_b3.act > div.de03:before{ transition:0.4s right 0.8s; }

@media(max-width:850px){
	.sc01_pw{ grid-template-columns:auto; }

	.sc01_bw1{ margin:0 -5px 80px; }

	.sc01_b1{ width:30%; }
	.sc01_b2{ width:40%; margin-top:0px; }

	.sc01_pt.rt{ padding:0; }
	.sc01_pb{ max-width:100%; }
	
	.sc01_tt{ text-align:left; margin:0 0 100px; }
	.sc01_tt > h2{ font-size:60px; }
	.sc01_tt > p{ font-size:16px; }
}
@media(max-width:650px){
	.sc01_b1{ width:50%; margin-bottom:10px; }
	.sc01_b2{ width:100%; }
}
@media(max-width:500px){

	.sc01_b3{ width:100%; }
	.sc01_b3:not(:last-child){ margin-bottom:10px; }
	.sc01_b3 > div{ padding-top:50%; }
}
@media(max-width:400px){
	.sc01_b1{ width:100%; }
	.sc01_b1 > div{ padding-top:50% }
	.sc01_b2{ max-width:100%; width:100%; }
	.sc01_tt > h2{ font-size:14.8vw; }
}




#sc02{ padding:0 0 0; }

.sc02_pw{ margin:0 -15px; display:flex; flex-flow:row wrap; }
.sc02_pt{ padding:0 15px; display:flex; }
.sc02_pt.lf, .sc02_pt.rt{ width:33%; }
.sc02_pt.ct{ width:34%; }

.sc02_img{ width:100%; padding-top:157.414449%; border-radius:500px 500px 0 0; background-color:#333; box-shadow:10px 10px 15px 0 rgba(0,0,0,.25); background-image:url(./img/02-01.jpg); background-position:center; background-size:cover; background-repeat:no-repeat; }
.sc02_pt.rt{ align-items:flex-end; }
.sc02_pt.rt > .sc02_txt{ text-align:right; }

.sc02_txt{ width:100%; word-break:keep-all; }
.sc02_txt > h3{ font-family:'pt'; font-size:20px; font-weight:400; color:#333; line-height:1.5em; margin-bottom:15px; }
.sc02_txt > h3 > .lt{ font-weight:200; }
.sc02_txt > h3 > .md{ font-weight:500; }
.sc02_txt > p{ font-size:18px; font-weight:300; color:#333; line-height:1.5em; }

.sc02_pt.lf > .sc02_txt > h3{ transform:translate(-100px, 0); opacity:0; transition:1s transform, 1s opacity; }
.sc02_pt.lf > .sc02_txt > p{ transform:translate(-100px, 0); opacity:0; transition:1s transform 0.2s, 1s opacity 0.2s; }
.sc02_pt.rt > .sc02_txt > h3{ transform:translate(100px, 0); opacity:0; transition:1s transform, 1s opacity; }
.sc02_pt.rt > .sc02_txt > p{ transform:translate(100px, 0); opacity:0; transition:1s transform 0.2s, 1s opacity 0.2s; }

.sc02_pt.lf > .sc02_txt.act > h3,
.sc02_pt.lf > .sc02_txt.act > p,
.sc02_pt.rt > .sc02_txt.act > h3,
.sc02_pt.rt > .sc02_txt.act > p{ transform:translate(0, 0); opacity:1; }

.de01{ transition-delay:0s; }
.de02{ transition-delay:0.2s; }
.de03{ transition-delay:0.4s; }

@media(max-width:800px){
	.sc02_pt.lf, .sc02_pt.rt{ width:50%; }
	.sc02_pt.ct{ width:100%; order:-1; padding:0 15px 40px; }
	.sc02_img{ padding-top:max(110%, 470px); }
}
@media(max-width:510px){
	.sc02_pt.lf, .sc02_pt.rt{ width:100%; }
	.sc02_pt.lf{ padding:0 15px 40px; }
}


#sc03{ padding:0; }
.sc03_tt{ word-break:keep-all; margin:0 0 80px; }
.sc03_tt > h2{ font-family:'nm'; font-size:80px; font-weight:600; color:#333; line-height:1em; }

#sc03Sli{ overflow:visible; }
.sc03Sli{ display:flex; height:auto; }
.sc03_sb{ width:100%; word-break:keep-all; display:grid; grid-template-columns:auto 1fr; }
.sc03_sb > h4{ font-family:'nm'; font-size:40px; font-weight:400; color:#333; line-height:0; writing-mode:vertical-lr; text-align:right; transform:rotate(180deg); border:2px solid #333; padding:20px 26px 20px 30px; }

.sc03_sc{ padding-left:30px; word-break:keep-all; }
.sc03_sc > h3{ font-family:'nm'; font-size:50px; font-weight:400; color:#333; line-height:1em; margin-bottom:10px; }

#sc03scr{ margin:40px 0 0; background-color:#ddd; height:4px; border-radius:10px; overflow:hidden; }
#sc03scr > .swiper-scrollbar-drag{ background-color:#b7a988; }