@media screen and (min-width: 601px) {
.top_content { position:relative; width:100%; max-width: 1200px; margin: 0 auto;}

.top_story_comm01 { position: absolute; top:30px; left: 50%; width: 800px; height:165px; text-align: center; margin:0 0 0 -400px; background: url(../images/story/story_line01.png) no-repeat center center; background-size:100% auto; z-index:3; }
.top_story_comm02 { position: absolute; top:195px; left: 50%; width: 800px; height:221px; text-align: center; margin:0 0 0 -400px; background: url(../images/story/story_line02.png) no-repeat center center; background-size:100% auto; z-index:3; }
.top_story_comm03 { position: absolute; top:426px; left: 50%; width: 800px; height:174px; text-align: center; margin:0 0 0 -400px; background: url(../images/story/story_line03.png) no-repeat center center; background-size:100% auto; z-index:3; }

.hg_posi01 { height: 770px; }
.hg_posi02 { height: 850px; }

.story_sp { padding: 40px 0; width:810px; margin: 0 auto; height: 530px; color:#FFF; }
.story_sp .st_title { position:relative; font-size:30px; font-weight: 600; text-align: center; padding:20px 0; margin:0 0 20px 0; background: url(../images/story/st_tit_bg.png) center repeat-y; }
.story_sp .st_title .st_frm01 { position:absolute; top:-10px; left:0; width:810px; height:23px; background: url(../images/story/st_tit_fl01.png) center center; background-size:100% auto; }
.story_sp .st_title .st_frm02 { position:absolute; bottom:-10px; left:0; width:810px; height:23px; background: url(../images/story/st_tit_fl02.png) center center; background-size:100% auto; }
.story_sp .staff_list { font-size:14px; font-weight: 600; margin:0 0 20px 0; line-height:28px; }
.story_sp .story_comm { font-size:16px; font-weight: 400; margin:0 0 20px 0; line-height:32px; }
}

@media screen and (max-width: 600px) {
.top_content { position:relative; width:600px; margin: 0 auto;}

.top_story_comm01 { position: absolute; top:30px; left: 50%; width: 540px; height:120px; text-align: center; margin:0 0 0 -270px; background: url(../images/story/story_line01.png) no-repeat center center; background-size:100% auto; z-index:3; }
.top_story_comm02 { position: absolute; top:175px; left: 50%; width: 540px; height:155px; text-align: center; margin:0 0 0 -270px; background: url(../images/story/story_line02.png) no-repeat center center; background-size:100% auto; z-index:3; }
.top_story_comm03 { position: absolute; top:366px; left: 50%; width: 540px; height:125px; text-align: center; margin:0 0 0 -270px; background: url(../images/story/story_line03.png) no-repeat center center; background-size:100% auto; z-index:3; }

.sp-slide.hg_posi01 { min-height:850px; }
.sp-slide.hg_posi02 { min-height:1100px; }

.story_sp { padding:40px 0; width:480px; max-width:480px; margin: 0 auto; height:900px; color:#FFF; }
.story_sp .st_title { position:relative; font-size:30px; font-weight: 600; text-align: center; padding:20px 0; margin:0 0 20px 0; background: url(../images/story/st_mtit_bg.png) center repeat-y; }
.story_sp .st_title .st_frm01 { position:absolute; top:-10px; left:0; width:480px; height:23px; background: url(../images/story/st_mtit_fl01.png) center center; background-size:100% auto; }
.story_sp .st_title .st_frm02 { position:absolute; bottom:-10px; left:0; width:480px; height:23px; background: url(../images/story/st_mtit_fl02.png) center center; background-size:100% auto; }
.story_sp .staff_list { font-size:16px; font-weight: 600; margin:0 0 20px 0; line-height:32px; }
.story_sp .story_comm { font-size:18px; font-weight: 400; margin:0 0 20px 0; line-height:36px; }
}

.st_title ruby rt { font-size:10px; margin: 0; }

@media screen and (min-width: 601px) {
#story_cgbox { position: absolute; bottom:100px; left: 50%; width: 810px;  margin:0 0 0 -405px; z-index: 6; }
#story_cgbox .btm { float: left; width: 155px; padding:10px 0; margin: 0 5px 5px 0; font-size:15px; letter-spacing: 2px; font-weight:500; text-align: center; transform: skewX(-30deg); }
#story_cgbox a .btm { color: #FFF; transition-duration: 0.3s; background:linear-gradient(90deg, #0E344E, #185A87); }
#story_cgbox a:hover .btm { text-shadow: rgba(196,201,135,1.00) 0 0 15px, rgba(196,201,135,1.00) 0 0 10px, rgba(196,201,135,1.00) 0 0 5px; background: linear-gradient(90deg, #DE4F0D, #E29714); }
#story_cgbox .btm p { transform: skewX(30deg); }

}

@media screen and (max-width: 600px) {
#story_cgbox { position: absolute; bottom:150px; left: 50%; width: 480px;  margin:0 0 0 -240px; z-index: 6; transform: skewX(-30deg); }
#story_cgbox .btm { float: left; width: 155px; padding:12px 0; margin: 0 5px 5px 0; font-size:16px; letter-spacing: 2px; font-weight:500; text-align: center; }
#story_cgbox a .btm { color: #FFF; background:linear-gradient(90deg, #0E344E, #185A87); }
#story_cgbox .btm p { transform: skewX(30deg); }

}

[data-ruby] { position: relative; }
[data-ruby]::before { content: attr(data-ruby); position: absolute; top: -0.8em; left: 0; right: 0; margin: auto; font-size: 0.4em; letter-spacing: 0.2em; }

/* sliderPro */
@media screen and (min-width: 601px) {
#story { min-width:100%; max-width: 1200px; }
.sp_block { position: relative; width:100%; max-width: 1200px; margin: 0 auto; }
.sliderPro {width:100%; }
.sp-slide { min-height:870px; }
#story img { width:100%;}
}

@media screen and (max-width: 600px) {
#story { min-width:600px; max-width:600px; }
.sp_block { position: relative; width:540px; margin: 0 auto;  }
.sliderPro {width:540px; }
.sp-slide { /* min-height:1100px; */}
#story img { width:540px;}
}

/* swiper */
@media screen and (min-width: 601px) {
.mb60 { margin-bottom: 60px; }
.st_block { padding: 60px 0 0 0; }
.swiper-container .swiper-slide img{ max-width: 720px; }
.swiper-container { text-align: center; max-width: 720px; height: auto; margin: 0 auto; }
.swiper-container2 .swiper-slide img{ max-width: 720px; }
.swiper-container2 { text-align: center; max-width: 720px; height: auto; margin: 0 auto; }
.swiper-container3 .swiper-slide img{ max-width: 720px; }
.swiper-container3 { text-align: center; max-width: 720px; height: auto; margin: 0 auto; }
.swiper-container4 .swiper-slide img{ max-width: 720px; }
.swiper-container4 { text-align: center; max-width: 720px; height: auto; margin: 0 auto; }
.swiper-container5 .swiper-slide img{ max-width: 720px; }
.swiper-container5 { text-align: center; max-width: 720px; height: auto; margin: 0 auto; }
.swiper-container6 .swiper-slide img{ max-width: 720px; }
.swiper-container6 { text-align: center; max-width: 720px; height: auto; margin: 0 auto; }
.swiper-container7 .swiper-slide img{ max-width: 720px; }
.swiper-container7 { text-align: center; max-width: 720px; height: auto; margin: 0 auto; }
.swiper-container8 .swiper-slide img{ max-width: 720px; }
.swiper-container8 { text-align: center; max-width: 720px; height: auto; margin: 0 auto; }
.swiper-container9 .swiper-slide img{ max-width: 720px; }
.swiper-container9 { text-align: center; max-width: 720px; height: auto; margin: 0 auto; }
.swiper-container10 .swiper-slide img{ max-width: 720px; }
.swiper-container10 { text-align: center; max-width: 720px; height: auto; margin: 0 auto; }
.swiper-container11 .swiper-slide img{ max-width: 720px; }
.swiper-container11 { text-align: center; max-width: 720px; height: auto; margin: 0 auto; }
.swiper-container12 .swiper-slide img{ max-width: 720px; }
.swiper-container12 { text-align: center; max-width: 720px; height: auto; margin: 0 auto; }
.swiper-container13 .swiper-slide img{ max-width: 720px; }
.swiper-container13 { text-align: center; max-width: 720px; height: auto; margin: 0 auto; }
.prettyprint{ border: none; color: #697d86; }
}
@media screen and (max-width: 600px) {
.mb60 { margin-bottom: 60px; }
.st_block { padding: 30px 0 0 0; }
.swiper-container { height: 300px; text-align: center; max-width: 480px; height: auto; margin: 0 auto; }
.swiper-container .swiper-slide { height: 300px; }
.swiper-container2 { height: 300px; text-align: center; max-width: 480px; height: auto; margin: 0 auto; }
.swiper-container2 .swiper-slide { height: 300px; }
.swiper-container3 { height: 300px; text-align: center; max-width: 480px; height: auto; margin: 0 auto; }
.swiper-container3 .swiper-slide { height: 300px; }
.swiper-container4 { height: 300px; text-align: center; max-width: 480px; height: auto; margin: 0 auto; }
.swiper-container4 .swiper-slide { height: 300px; }
.swiper-container5 { height: 300px; text-align: center; max-width: 480px; height: auto; margin: 0 auto; }
.swiper-container5 .swiper-slide { height: 300px; }
.swiper-container6 { height: 300px; text-align: center; max-width: 480px; height: auto; margin: 0 auto; }
.swiper-container6 .swiper-slide { height: 300px; }
.swiper-container7 { height: 300px; text-align: center; max-width: 480px; height: auto; margin: 0 auto; }
.swiper-container7 .swiper-slide { height: 300px; }
.swiper-container8 { height: 300px; text-align: center; max-width: 480px; height: auto; margin: 0 auto; }
.swiper-container8 .swiper-slide { height: 300px; }
.swiper-container9 { height: 300px; text-align: center; max-width: 480px; height: auto; margin: 0 auto; }
.swiper-container9 .swiper-slide { height: 300px; }
.swiper-container10 { height: 300px; text-align: center; max-width: 480px; height: auto; margin: 0 auto; }
.swiper-container10 .swiper-slide { height: 300px; }
.swiper-container11 { height: 300px; text-align: center; max-width: 480px; height: auto; margin: 0 auto; }
.swiper-container11 .swiper-slide { height: 300px; }
.swiper-container12 { height: 300px; text-align: center; max-width: 480px; height: auto; margin: 0 auto; }
.swiper-container12 .swiper-slide { height: 300px; }
.swiper-container13 { height: 300px; text-align: center; max-width: 480px; height: auto; margin: 0 auto; }
.swiper-container13 .swiper-slide { height: 300px; }
.prettyprint{ border: none; color: #697d86; }
}