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_pw{ display:flex; flex-flow:row wrap; margin:0 -15px; }
.sb01_pt{ width:25%; padding:0 15px 40px; display:flex; }

.sb01_pb{ width:100%; background-color:#f7f7f7; box-shadow:1px 1px 2px 0 rgba(0,0,0,.3); opacity:0; transform:translate(0, 100px); transition:0.4s box-shadow, 1s opacity, 1s transform; }
.sb01_pt.act > .sb01_pb{ opacity:1; transform:translate(0, 0); }
.sb01_pb:hover{ box-shadow:7px 7px 12px 0 rgba(0,0,0,.25); }

.sb01_pm{ width:100%; height:150px; overflow:hidden; }
.sb01_pm > img{ display:block; width:100%; height:100%; object-fit:cover; }

.sb01_pi{ position:relative; z-index:1; width:80px; height:80px; background-color :#c5a95b; border-radius:100%; padding:17px; margin:-40px auto; box-shadow:3px 3px 6px 0 rgba(0,0,0,.3); }
.sb01_pi > img{ display:block; width:100%; height:auto; }

.sb01_px{ padding:70px 15px 30px; word-break:keep-all; text-align:center; }
.sb01_px > h3{ font-family:'mt','pt','noto'; font-size:24px; font-weight:700; color:#1f1f1f; margin-bottom:10px; }
.sb01_px > p{ width:min(220px, 100%); margin:0 auto; font-family:'mt','pt','noto'; font-size:16px; font-weight:300; color:#1f1f1f; line-height:1.5em; }

@media(max-width:991px){
	.sb01_pw{ margin:0 -10px; }
	.sb01_pt{ width:33.33333333%; padding:0 10px 20px; }
}
@media(max-width:850px){
	#sb01{ padding:150px 20px; }
}
@media(max-width:700px){
	.sb01_tw{ display:none; }
	.sb01_se{ display:block; }
	.sb01_pt{ width:50%; }
}
@media(max-width:500px){
	.sb01_se > select{ font-size:30px; }
	.sb01_pt{ width:100%; }
}