.sb_wrap{ overflow:hidden; }

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

.sb01_pt_wrap{ position:relative; z-index:1; margin:0 -20px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:horizontal; -ms-flex-direction:row; flex-direction:row; -webkit-box-lines:multiple; -ms-flex-wrap:wrap; flex-wrap:wrap; }
.sb01_cir{ position:absolute; top:50%; left:50%; width:max(30%, 250px); transform:translate(-50%, -50%) rotate(0deg); border-radius:100%; border-top:10px solid #ffcf00; border-right:10px solid #e3b906; border-bottom:10px solid #bb9a10; border-left:10px solid #cfb54b; box-shadow:3px 0 5px 0 rgba(0,0,0,0.3), inset 3px 0 5px 0 rgba(0,0,0,0.3); -webkit-animation:10s revolve infinite linear; -moz-animation:10s revolve infinite linear; -o-animation:10s revolve infinite linear; animation:10s revolve infinite linear; }
.sb01_cir > div{ padding-top:100%; }

.sb01_pt{ position:relative; z-index:1; width:50%; padding:20px; display:-webkit-box; display:-ms-flexbox; display:flex; }
.sb01_box{ width:100%; background-color:#f5f5f5; border-radius:10px; overflow:hidden; box-shadow:3px 3px 8px 0 rgba(0,0,0,0.2); }
.sb01_img{ width:100%; padding-top:56.25%; /*min-height:250px;*/ background-color:#333; background-position:center; background-size:cover; background-repeat:no-repeat; }
.sb01_img.img_01{ background-image:url(./img/01-01.png); }
.sb01_img.img_02{ background-image:url(./img/01-02.png); }
.sb01_img.img_03{ background-image:url(./img/01-03.png); }
.sb01_img.img_04{ background-image:url(./img/01-04.png); }
.sb01_txt{ text-align:center; word-break:keep-all; padding:20px 10px; }
.sb01_txt > h3{ font-size:30px; font-weight:700; color:#333; line-height:1em; margin-bottom:10px; }
.sb01_txt > p{ font-size:16px; font-weight:300; color:#666; }

@media(max-width:700px){
	.sb01_pt_wrap{ margin:0 -10px; }
	.sb01_pt{ padding:10px; }
	.sb01_txt > h3{ font-size:24px; }
	.sb01_txt > p{ font-size:14px; }
}
@media(max-width:450px){
	.sb01_cir{ display:none; }
	.sb01_pt{ width:100%; padding:0 10px 10px; }
}

@-webkit-keyframes revolve{ 0%{ transform:translate(-50%, -50%) rotate(0deg); } 100%{ transform:translate(-50%, -50%) rotate(360deg); } }
@-moz-keyframes revolve{ 0%{ transform:translate(-50%, -50%) rotate(0deg); } 100%{ transform:translate(-50%, -50%) rotate(360deg); } }
@-o-keyframes revolve{ 0%{ transform:translate(-50%, -50%) rotate(0deg); } 100%{ transform:translate(-50%, -50%) rotate(360deg); } }
@keyframes revolve{ 0%{ transform:translate(-50%, -50%) rotate(0deg); } 100%{ transform:translate(-50%, -50%) rotate(360deg); } }






#sb02{ padding:120px 0 0; }

.sb02_tt{ text-align:center; margin:0 auto 60px; word-break:keep-all; }
.sb02_tt > h2{ font-family:'score' ,'noto'; font-size:30px; font-weight:700; color:#333; line-height:1em; margin-bottom:10px; }
.sb02_tt > p{ font-size:16px; font-weight:300; color:#666; }

#sb02_sli > .swiper-wrapper{ transition-timing-function:linear; }
.sb02_sli{ display:-webkit-box; display:-ms-flexbox; display:flex; height:auto; }
.sb02_box{ display:-webkit-box; display:-ms-flexbox; display:flex; padding:10px; }
.sb02_in{ width:100%; background-color:#f5f5f5; border-radius:10px; box-shadow:3px 3px 8px 0 rgba(0,0,0,0.3); overflow:hidden; }
.sb02_img img{ width:100%; height:auto; display:block; }
.sb02_txt{ padding:15px 10px 20px; text-align:center; word-break:keep-all; font-size:14px; font-weight:300; color:#333; }
@media(max-width:600px){
	#sb02_sli{ overflow:visible; }
}









#sb03{ padding:120px 0 0; }
.sb03_his{ position:relative; z-index:1; }
.sb03_his:before{ content:''; position:absolute; z-index:1; top:50px; bottom:0; left:50%; width:1px; background-color:#ddd; }
.sb03_his > li{ position:relative; z-index:1; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:horizontal; -ms-flex-direction:row; flex-direction:row; -webkit-box-lines:multiple; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-align:top; -ms-flex-align:top; align-items:flex-start; }
.sb03_his > li:not(:last-child){ margin-bottom:80px; }
.sb03_his > li > h3{ position:relative; z-index:1; width:50%; font-family:'score'; font-size:70px; font-weight:700; color:#ffcf00; text-shadow:2px 2px 2px rgba(0,0,0,0.2); }
.sb03_his > li > h3:before{ content:''; position:absolute; z-index:1; top:50%; width:80px; height:1px; background-color:#ddd; }
.sb03_his > li > h3:after{ content:''; position:absolute; z-index:1; top:50%; width:15px; height:15px; background-color:#fff; border:1px solid #ddd; border-radius:100%; }
.sb03_his > li > .sb03_if{ position:relative; z-index:1; width:50%; padding-top:32px; }
.sb03_his > li > .sb03_if > li{ overflow:hidden; }
.sb03_his > li > .sb03_if > li:not(:last-child){ margin-bottom:20px; }
.sb03_his > li > .sb03_if > li > h4{ font-family:'score'; font-size:26px; font-weight:700; color:#ffcf00; }
.sb03_his > li > .sb03_if > li > p{ font-size:20px; font-weight:400; color:#666; }

.sb03_his > li:nth-child(2n-1) > h3{ text-align:right; padding-right:100px; }
.sb03_his > li:nth-child(2n-1) > h3:before{ right:0; }
.sb03_his > li:nth-child(2n-1) > h3:after{ right:0; margin:-8px -8px 0 0; }
.sb03_his > li:nth-child(2n-1) > .sb03_if{ padding-left:40px; }
.sb03_his > li:nth-child(2n-1) > .sb03_if > li{ text-align:left; }

.sb03_his > li:nth-child(2n) > h3{ order:1; padding-left:100px; }
.sb03_his > li:nth-child(2n) > h3:before{ left:0; }
.sb03_his > li:nth-child(2n) > h3:after{ left:0; margin:-8px 0 0 -8px; }
.sb03_his > li:nth-child(2n) > .sb03_if{ padding-right:40px; }
.sb03_his > li:nth-child(2n) > .sb03_if > li{ text-align:right; }


@media(max-width:600px){
	.sb03_his:before{ top:35px; left:8px; }
	.sb03_his > li > h3{ width:100%; font-size:50px; }
	.sb03_his > li > h3:before{ width:30px; }
	.sb03_his > li > .sb03_if{ width:100%; padding-top:20px; }

	.sb03_his > li:nth-child(2n-1) > h3{ text-align:left; padding-right:0; padding-left:40px; }
	.sb03_his > li:nth-child(2n-1) > h3:before{ right:auto; left:0; }
	.sb03_his > li:nth-child(2n-1) > h3:after{ right:auto; left:0; margin:-8px -8px 0 0; }

	.sb03_his > li:nth-child(2n) > h3{ order:-1; padding-left:40px; }
	.sb03_his > li:nth-child(2n) > h3:after{ margin:-8px 0 0 0; }
	.sb03_his > li:nth-child(2n) > .sb03_if > li{ text-align:left; }
	.sb03_his > li:nth-child(2n) > .sb03_if{ padding-right:0; padding-left:40px; }
}