@charset "utf-8";
@media screen and (max-width : 640px) {
    #tmp_wrap_content{
        margin-bottom:0;
    }
    #tmp_pankuzu{
        padding: 0 15px;
    }
    #tmp_wrap_content .container{
        padding: 0 10px;
    }
    #tmp_main_visual{
        padding-bottom: 14px;
    }
    #tmp_main_visual::after{
        background: url(/shared/templates/sabo_top/images/af_gnavi_mv_sp.png) center top no-repeat;
        min-width: inherit;
        background-size: 697px auto;
        bottom: 8px;
        background-position: center top;
        height: 76px;
    }
    #tmp_main_visual .main_visual_logo{
        top: 0;
        width: 409px;
        height: 120px;
        left: -41px;
        padding: 27px 0 0 140px;
        background-image: url(/shared/templates/sabo_top/images/logo/bg_logo_sp.png);
        background-size: 408px auto;
        background-position: right bottom;
    }
    #tmp_main_visual .main_visual_logo h1 {
        width: 203px;
        height: 77px;
        background-size: 100% auto;
    }
    #tmp_main_visual .splide__arrow{
        width: 28px;
        height: 28px;
    }
    #tmp_main_visual .splide__arrow::before{
        width: 9px;
        height: 10px;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        top: 8px;
    }
    #tmp_main_visual .splide__arrow--prev::before{
        border-right: 8px solid #ffffff;
        left: 8px;
    }
    #tmp_main_visual .splide__arrow--next::before{
        border-left: 8px solid #ffffff;
        right: 8px;
    }
    #tmp_main_visual .splide__toggle .splide__toggle__pause, 
    #tmp_main_visual .splide__toggle .splide__toggle__play{
        top: 17px;
        left: 21px;
    }
    #tmp_main_visual .splide__toggle .splide__toggle__pause:before, 
    #tmp_main_visual .splide__toggle .splide__toggle__pause:after{
        width: 3px;
        height: 9px;
    }
    #tmp_main_visual .splide__toggle .splide__toggle__pause:after {
        left: 5px;
    }
    #tmp_main_visual .splide__toggle .splide__toggle__play:before{
        border-width: 5px 0 5px 8px;
    }
    #tmp_main_visual .splide__controls{
        left: auto;
        right: 10px;
        transform: none;
        margin: 0;
        top: auto;
        bottom: 31px;
        width: 210px;
    }
    #tmp_main_visual .splide__toggle{
        background-size: 100% auto;
        width: 47px;
        height: 35px;
    }
    #tmp_main_visual .splide__pagination li {
        margin: 0 3px;
    }
    #tmp_main_visual .splide__pagination li button{
        width: 12px;
        height: 12px;
    }
    #tmp_main_visual .main_visual_slider img{
        height: 425px;
        width: auto;
        max-width: inherit;
        position: relative;
        left: 50%;
        transform: translate(-50%, 0);
    }
    #tmp_main_visual .main_visual_gnavi::before{
        top: -23px;
        background-size: auto 30px;
        background-position: calc(50% - 35px) 0 ;
    }
    #tmp_main_visual .main_visual_gnavi{
        padding: 20px 0 50px;
    }
    #tmp_main_visual .main_visual_gnavi::after{
        display: none;
    }
    #tmp_main_visual .main_visual_gnavi .container {
        max-width: 360px;
        margin: 0 auto;
    }
    #tmp_main_visual .main_visual_gnavi ul{
        flex-wrap: wrap;
        margin: 0 -10px;
        width: auto;
    }
    #tmp_main_visual .main_visual_gnavi ul li{
        margin-bottom: 27px;
    }
    #tmp_main_visual .main_visual_gnavi ul li:nth-child(2),
    #tmp_main_visual .main_visual_gnavi ul li:first-child{
        width: 50%;
        padding: 0;
    }
    #tmp_main_visual .main_visual_gnavi ul li:nth-child(3){
        width: 25.5%;
        text-align: left;
        padding: 0;
    }
    #tmp_main_visual .main_visual_gnavi ul li:nth-child(4){
        width: 41.5%;
        padding: 0;
    }
    #tmp_main_visual .main_visual_gnavi ul li:nth-child(5){
        width: 33%;
        padding: 0;
        text-align: right;
    }
    #tmp_main_visual .main_visual_gnavi ul li:first-child{
        text-align: right;
    }
    #tmp_main_visual .main_visual_gnavi ul li:nth-child(2){
        text-align: left;
    }
    #tmp_main_visual .main_visual_gnavi ul li::after{
        height: 20px;
    }
    #tmp_main_visual .main_visual_gnavi ul li:nth-child(2)::after{
        display: none;
    }
    #tmp_main_visual .main_visual_gnavi ul li a{
        display: inline-block;
        font-size: 100%;
        padding: 1px 10px 0;
        line-height: 1.2;
    }
    #tmp_main_visual .main_visual_gnavi ul li:first-child a,
    #tmp_main_visual .main_visual_gnavi ul li:nth-child(2) a{
        padding: 0 20px;
    }
    #tmp_sabo_heritage{
        position: relative;
        margin-top: 4px;
        background: url(/shared/templates/sabo_top/images/heritage_bg_sp_top.png),
        url(/shared/templates/sabo_top/images/heritage_bg_sp1.jpg),
        url(/shared/templates/sabo_top/images/bf_sabo_heritage_sp.png),
        url(/shared/templates/sabo_top/images/bg_bird_sp.png);
        background-repeat: no-repeat, no-repeat, no-repeat,no-repeat;
        background-position: left top, left 43px, center bottom, right 14px top -4px;
        background-size: 86px auto, 47px auto, 100% auto, auto 43px;
        padding-bottom: 100%;
        overflow: hidden;
        min-height: auto;
    }
    #tmp_sabo_heritage:before {
        content: "";
        width: 50%;
        height: 50%;
        position: absolute;
        bottom: 0;
        left: 0;
        top: auto;
        z-index: -1;
        background: #3680ae;
    }
    .fsize_big #tmp_sabo_heritage:before {
        height: 65%;
    }
    .fsize_big2 #tmp_sabo_heritage:before {
        height: 75%;
    }
    #tmp_sabo_heritage:after {
        content: none;
    }
    #tmp_sabo_heritage .sabo_heritage_wrap{
        padding:55px 0 0 37px;
        margin-right: -10px;
    }
    #tmp_sabo_heritage .sabo_heritage_wrap::before {
        content: none;
    }
    #tmp_sabo_heritage .sabo_heritage_wrap::after{
        content: none;
    }
    #tmp_sabo_heritage .sabo_heritage_wrap .sabo_heritage_ttl{
        margin-bottom: 13px;
    }
    #tmp_sabo_heritage .sabo_heritage_wrap .sabo_heritage_ttl h2{
        text-align: center;
        font-size: 164.2%;
    }
    #tmp_sabo_heritage .sabo_heritage_wrap .sabo_heritage_ttl h2 span {
        padding: 0 4px;
        background-image: url(/shared/templates/sabo_top/images/bg_line_head.png);
        background-size: 100% 12px;
    }
    #tmp_sabo_heritage .sabo_heritage_wrap .sabo_heritage_body{
        position: relative;
        width: 100%;
        border-radius: 0;
        min-height: 445px;
        background-color: #d1e9f0;
        padding: 19px 32px 40px 22px;
        background-image: url(/shared/templates/sabo_top/images/heritage_bg_lft_sp.png);
        background-repeat: no-repeat;
        background-position: left top;
        background-size: 38px auto;
    }
    #tmp_sabo_heritage .sabo_heritage_wrap .sabo_heritage_body:before {
        content: '';
        width: 13px;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        background-color: #9ed7dd;
        background-image: url(/shared/templates/sabo_top/images/heritage_bg_rgt_sp.png);
        background-repeat: no-repeat;
        background-position: right top;
        background-size: 13px auto;
    }
    #tmp_sabo_heritage .sabo_heritage_wrap .sabo_heritage_body:after {
        content: '';
        padding-top: 10%;
        position: absolute;
        right: 0;
        left: -18px;
        bottom: -9px;
        background-image: url(/shared/templates/sabo_top/images/bg_cloud.png);
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 100% auto;
    }
    #tmp_sabo_heritage .sabo_heritage_wrap .sabo_heritage_cnt{
        font-size: 114.3%;
        padding: 0;
        line-height: 1.7;
    }
    #tmp_animation_video{
        margin-top: 0;
    }
    #tmp_animation_video .animation_video_wrap {
        padding-top: 8px;
        padding-bottom: 15px;
    }
    #tmp_animation_video .animation_video_inner{
        padding: 0;
        margin-bottom: 33px;
        min-height: auto;
    }
    #tmp_animation_video .animation_video_ttl h2{
        font-size: 164.2%;
        padding: 0 40px;
        background-size: 30px auto;
    }
    #tmp_animation_video .animation_video_ttl {
        margin-bottom: 13px;
    }
    #tmp_animation_video .animation_video_cnt{
        font-size: 114.3%;
        padding: 0 10px;
        text-align: left;
        line-height: 1.7;
        margin-bottom: 30px;
    }
    #tmp_animation_video .animation_video_production{
        font-size: 107.1%;
    }
    #tmp_animation_video .animation_video_inner::after,
    #tmp_animation_video .animation_video_inner::before{
        display: none;
    }
    #tmp_animation_video::before{
        top: -39px;
        background: url(/shared/templates/sabo_top/images/bg_animation_video_sp.png) no-repeat left top;
        background-size: 100% 112px;
        height: 112px;
    }
    #tmp_animation_video .animation_video_row ul li{
        width: 100%;
        margin: 0 0 35px;
    }
    #tmp_animation_video .animation_video_row ul li:nth-child(odd) .title_wrap{
        background: url(/shared/templates/sabo_top/images/icon_video.png),
        url(/shared/templates/sabo_top/images/icon_flower.png);
        background-repeat: no-repeat;
        background-position: left center, right center;
        background-size: 60px auto;
    }
    #tmp_animation_video .animation_video_row ul li:nth-child(even) .title_wrap{
        
        background: url(/shared/templates/sabo_top/images/icon_flower_two.png), url(/shared/templates/sabo_top/images/icon_human.png);
        background-repeat: no-repeat;
        background-position: left center, right center;
        background-size: 60px auto;
    }
    #tmp_animation_video .animation_video_row ul li .title_wrap{
        padding: 15px 67px;
        min-height: 80px;
        margin-bottom: 0;
    }
    #tmp_animation_video .animation_video_row ul li .video_title{
        font-size: 121.4%;
        line-height: 1.6;
        margin-bottom: 2px;
    }
    #tmp_animation_video .animation_video_row ul li .video_subtitle{
        font-size: 114.3%;
    }
    #tmp_notice{
        margin-top: -10px;
        background-position: calc(50% + 10px) 0;
        background-size: auto 46px;
        padding-bottom: 63px;
        padding-top: 45px;
    }
    #tmp_sabo_heritage + #tmp_notice {
        margin-top: 0;
    }
    #tmp_notice::before{
        top: -18px;
        width: 100px;
        height: 75px;
        left: -9px;
        transform: none;
        margin-left: 0;
        background-image: url(/shared/templates/sabo_top/images/bf_notice.png);
        background-size: 100% auto;
    }
    #tmp_notice::after{
        width: 62px;
        height: 100px;
        background-size: 100% auto;
        background-position: left center;
        bottom: auto;
        top: 310px;
        right: 7px;
    }
    #tmp_notice .notice_content_list{
        padding-left: 0;
        padding-top: 301px;
    }
    #tmp_notice .notice_content_list::before {
        width: 287px;
        height: 264px;
        left: 50%;
        top: 14px;
        margin-left: -149px;
        background-image: url(/shared/templates/sabo_top/images/bg_image_notice_sp.png);
    }
    #tmp_notice .notice_content_list .notice_content_ttl h2{
        font-size: 157.1%;
        background-size: 22px auto;
        padding: 19px 30px 0;
        background-position: 0 20px;
    }
    #tmp_notice .notice_content_list .notice_content_cnt ul{
        padding-bottom: 4px;
    }
    #tmp_notice .notice_content_list .notice_content_cnt ul li{
        display: block;
        font-size: 114.3%;
        margin-bottom: 20px;
    }
    #tmp_notice .notice_content_list .notice_content_cnt .txt_date{
        padding: 0;
        margin-bottom: 3px;
    }
    #tmp_notice .notice_content_list .notice_content_cnt .txt_link{
        line-height: 1.7;
    }
    #tmp_notice .notice_content_list .notice_content_cnt .btn_notice{
        text-align: center;
        padding: 0;
    }
    #tmp_notice .notice_content_list .notice_content_cnt .btn_notice a{
        font-size: 114.3%;
        min-width: 168px;
        padding: 14px 27px 12px 38px;
        background-image: url(/shared/templates/sabo_top/images/arrow_black.png);
        background-size: 7px auto;
    }
    #tmp_link_button{
        padding-top: 0;
    }
    #tmp_link_button .link_button_wrap{
        padding-bottom: 63px;
        background-image: url(/shared/templates/sabo_top/images/mountain_sp.png);
        background-size: auto 18px;
        background-position: right bottom;
    }
    #tmp_link_button ul {
        margin: 0;
        padding-right: 4px;
    }
    #tmp_link_button ul li{
        width: 100%;
        padding: 0;
        margin-bottom: 19px;
    }
    #tmp_link_button ul li a{
        border: 1px solid #5db674;
        border-radius: 8px;
        min-height: 75px;
        font-size: 114.2%;
        padding: 27px 15px 23px 76px;
        background-position: right -12px bottom -23px, 26px center;
    }
    #tmp_inquiry_sabo .inquiry_wrap{
        display: block;
        padding-bottom: 19px;
        border-color: #000000;
    }
    #tmp_inquiry_sabo .inquiry_wrap .inquiry_cnt,
    #tmp_inquiry_sabo .inquiry_wrap .inquiry_ttl{
        width: 100%;
    }
    #tmp_inquiry_sabo .inquiry_wrap .inquiry_ttl{
        padding: 24px 10px 15px 114px;
        font-size:157.1%;
        background-position: 49px 14px;
        background-size: 54px auto;
        margin-bottom: 9px;
    }
    #tmp_inquiry_sabo .inquiry_wrap .inquiry_cnt{
        padding: 0;
        font-size: 114.2%;
        line-height: 1.7;
    }
    #tmp_inquiry_sabo .inquiry_inner{
        padding-bottom: 97px;
        background-size: auto 51px;
        background-position: left bottom -4px;
    }
    .color_black  #tmp_animation_video .animation_video_row ul li .title_wrap,
    .color_blue  #tmp_animation_video .animation_video_row ul li .title_wrap,
    .color_yellow  #tmp_animation_video .animation_video_row ul li .title_wrap,
    .color_black  #tmp_sabo_heritage .sabo_heritage_wrap,
    .color_blue  #tmp_sabo_heritage .sabo_heritage_wrap,
    .color_yellow  #tmp_sabo_heritage .sabo_heritage_wrap,
    .color_black  #tmp_inquiry_sabo .inquiry_wrap .inquiry_ttl,
    .color_blue  #tmp_inquiry_sabo .inquiry_wrap .inquiry_ttl,
    .color_yellow  #tmp_inquiry_sabo .inquiry_wrap .inquiry_ttl,
    .color_black  #tmp_main_visual .main_visual_logo,
    .color_blue  #tmp_main_visual .main_visual_logo,
    .color_yellow  #tmp_main_visual .main_visual_logo{
      width: 100%;
      padding: 10px;
    }
    .color_black #tmp_main_visual .main_visual_logo, 
    .color_blue #tmp_main_visual .main_visual_logo, 
    .color_yellow #tmp_main_visual .main_visual_logo {
        max-width: 90%;
        left: 0;
    }
    .color_black #tmp_main_visual .main_visual_logo span, 
    .color_blue #tmp_main_visual .main_visual_logo span, 
    .color_yellow #tmp_main_visual .main_visual_logo span{
        font-size: 1.7rem;
    }
    .color_black #tmp_sabo_heritage, 
    .color_blue #tmp_sabo_heritage, 
    .color_yellow #tmp_sabo_heritage{
        height: auto;
    }
    .color_black #tmp_sabo_heritage::before, 
    .color_blue #tmp_sabo_heritage::before, 
    .color_yellow #tmp_sabo_heritage::before,
    .color_black #tmp_sabo_heritage .sabo_heritage_wrap::after, 
    .color_blue #tmp_sabo_heritage .sabo_heritage_wrap::after, 
    .color_yellow #tmp_sabo_heritage .sabo_heritage_wrap::after{
        display: none;
    }
    .color_black #tmp_main_visual .splide__toggle, 
    .color_yellow #tmp_main_visual .splide__toggle, 
    .color_blue #tmp_main_visual .splide__toggle {
        height: 35px;
    }
}