@charset "utf-8";

/* タブレット (959px以下)-----------w700 */

@media only screen and (max-width:1023px) {

    /*タブレット以下では表示しない*/
    .pc {
        display: none;
    }

    /*タブレットのみ表示する*/
    .tab {
        display: block;
    }

    body {}
    address {}
    th img,
    td img {
        width: 100%;
        height: auto;
    }
    iframe {
        width: 460px !important;
    }
    .toppage iframe {
        width: 380px !important;
    }

    .description_txt p {
        width: 700px;
        padding: 5px 0;
        margin: 0 auto;
    }
    #header {
        width: 700px;
        margin: 0 auto;
        background-position: 350px bottom;
    }
    #header_in {
        width: 700px;
    }
    #header #hcontents {
        width: 255px;

    }
    #header #hcontents img {
        max-width: 220px !important;
        height: auto !important;
    }

    .gmenu {
        /*		margin-bottom: 10px;*/
    }
    .gmenu ul {
        width: 700px;
    }
    .gmenu ul li a span {
        width: 115px;
    }
    #wrap {
        width: 100%;
        margin: 0 auto;
    }
    .rowunit_2 {
        width: 100%;
        margin-left: auto;
        max-width: 920px;
        /*        margin: 0 auto;*/
    }
    #pankuzu {
        width: 700px;
        margin: 0 auto;
        padding-left: 15px;
        margin-top: 10px;
        margin-bottom: 15px;
    }
    #unit_a {
        max-width: 1008px;
        padding-right: 220px;
    }
    #unit_a img {
        /*        max-width: 460px;*/
        height: auto !important;
    }
    #unit_a table {
        width: 460px;
    }
    #unit_a_1 {
        max-width: 700px;

    }
    .toppage #unit_b {
        width: 310px;
        float: right;
    }
    #unit_b {
        width: 220px;
        float: right;
    }
    .menu_2 p,
    .menu_2 ul li {
        width: 220px;
    }
    .menu_2 p a,
    .menu_2 ul li a {
        width: 150px;
        background-position: 95% center;
    }
    #footer_in {
        width: 700px;
    }
    .rowunit_3 {

        width: 700px;

    }
    #banner_1 {

        width: 520px;
        margin: 0 auto;
    }
    #banner_3 {
        width: 520px;

    }

    /*トップページ*/
    #slides {
        width: 700px;
        height: 224px;
    }
    .slidesjs-previous,
    .slidesjs-next {
        top: 99px;
    }

    .contents_0,
    .contents_0 img {
/*
        width: 100% !important;
        min-width: 700px !important;
        height: auto !important;
*/
    }
    #contupper_1 {
        width: 700px;

    }
    #kikan {
        padding-left: 0px;

    }
    .twall,
    .fbwall {
        width: 46%;
/*
        min-width: 350px;
        min-height: 300px;
*/
        /*        background-color: #ccc;*/
        margin: 0 auto;
    }

    .twall,
    .fbwall {
        float: none;
        min-width: 350px;
        margin-bottom: 25px;

    }
/*
.twall iframe{
   max-height: 350px !important;
}
*/

    .toppage .rowunit_2 {

        max-width: 100%;
        margin-bottom: 50px;
    }

    .tabs {
        width: 100%;
        height: 110px;
        background-color: none;
    }

    .tabs ul li {
        background-color: #99E0E4;
        border-right: 0px solid #00B2BC;
        background-image: url(https://sagasoubun.jp/all_img/org/nt_li_bg.png);
        background-repeat: repeat-y;
        background-position: left;
        /*        margin-left: 1px;*/
        /*margin-bottom: 1px;*/
        border-bottom: 1px solid #00b2bc;
        width: 33%;

    }

    .tabs ul li a {
        width: auto;
        height: 54px;
    }
    #news_topics dl dd {
        font-size: 80%;
    }
    #news_topics dl dt {

        height: auto;

        min-height: 108px;
    }
    #news_title {
        height: 110px;
    }
    #news_title span {
        padding: 80px 0 0px 16px;
	}
	
    /*マーチングバンド・バトントワリング*/
    .bumon-13{
	    font-size: 90%;
	    padding: 2px 5px;
    }
	
	
    #footer_left {
        width: 320px;
        float: left;
    }
    #footer_right {
        width: 320px;
        float: right;
    }
    .menu_5,
    #offical_banner {
        float: none;
        padding-right: 0;
    }
    #offical_banner {
        width: 320px;
        float: right;
        padding-right: 0px;
    }
    .search input[type="text"] {
        width: 220px;
    }

    /*メールフォーム*/
    .mail_form .form_label {
        width: 137px;
    }
    .mail_form .form_input {
        width: 300px;
    }
    .mail_form .form_input textarea {
        width: 290px;
    }
    .mail_form .form_button input {
        margin: 0 0 10px 150px;
    }
/*------20180614 add-------------*/
	#music_player_tabsp{
		width: 700px;
		height: 100px;
		margin: 0 auto;
		background-image: url(https://sagasoubun.jp/all_img/org/asagi_chan_music_tab.png);
		background-repeat: no-repeat;
		position: relative;
	}
	#music_player_tabsp #music_player_tabsp_inner{
	position: absolute;
	width: 240px;
	bottom: 18px;
	right: 20px;
	}
	#music_player_tabsp #music_player_tabsp_inner p{
		font-size: 0.8rem;
		margin-bottom: 2px;
	}
	#music_player_tabsp #music_player_tabsp_inner audio{
		width: 240px;
		height: 32px;
	}	
/*------20180614 add-------------*/
}
div.scroll{
    width: 100%;
    overflow-y: hidden;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}
div.scroll::-webkit-scrollbar{　　/*tableにスクロールバーを追加*/
    height: 5px;
}
div.scroll::-webkit-scrollbar-track{　　/*tableにスクロールバーを追加*/
    background: #F1F1F1;
}
div.scroll::-webkit-scrollbar-thumb {　　/*tableにスクロールバーを追加*/
    background: #BCBCBC;
}

div.scroll th,div.scroll td {
display: table-cell;
}


















/* スマホ-----------w300 */

@media only screen and (max-width:700px) {

    /*スマホでは表示しない*/
    .rss,
    
    .pc,
    .tab,
    .pc_tab,
    .fmenu {
        display: none;
    }

    /*スマホのみ表示する*/
    .sp {
        display: block;
    }

    iframe,
    .toppage iframe {
        width: 300px !important;
        height: 200px !important;
    }

    #bg {
        padding-top: 0;
        margin-bottom: 50px;
    }
    #bg_in{
        min-width: 320px;
    }
	
    #unit_a .linef a{
		display: block;
		width:150px;
		margin:0 auto;
		padding:0;
    }

    #unit_a p {
        clear: both;
    }
    
	ul.bumon_icon li:nth-child(3n) img{
		margin: 0 0 10px 0;
	}
    
    #header {
        width: 100%;
        padding: 0;
    }
    #header_in {
        width: 100%;
        margin: 0 auto;
        background-image: none;
        padding: 5px 0 0 0;
    }
    #header #siteid {
        width: 320px;
        float: none;
        margin: 0 auto;
    }
    #header #siteid h1,
    #header #siteid p a {
        width: 320px;
        height: 75px;
        background-size: 320px auto;
        background-position: 5% bottom;
        float: none;
    }
    #header #siteid h1,
    #header #siteid p a {
        background-image: url('../all_img/org/sp_siteid.png');
    }
    #header #hcontents {
        width: 100%;
        float: none;
        background-color: #00b2bc;
        padding: 10px 0;
    }
    #header #hcontents p{
	    text-align: center;
    }
    #header #hcontents img{
	    max-width: 320px !important;
    }
    .search {
        width: 320px;
        margin: 0 auto;
    }
    .search input[type="text"] {
        width: 285px;
    }



    #kikan {

        width: 320px;
        padding-top: 10px;
        float: none;
        margin: 0 auto;
    }
    #news_title {
        background-color: #fff;
        color: #003770;
        font-size: 1.2em;
        text-align: center;

    }


    #wrap {
        width: 100%;
        /*		width: 320px;*/
        padding: 0;

    }
    #pankuzu {
        width: 320px;
        padding-left: 15px;
        background-color: #fff;

    }

    .toppage #unit_a {
        clear: both;
        float: none;
        padding-right: 0px;
        margin: 0 auto;

    }
    .toppage #unit_b {
        clear: both;
        float: none;
        width: 100%;
        margin-left: 0px;
        margin: 0 auto;


    }

    .top_right p a,
    .top_right ul li a {
        background-size: 13%;
        background-position: 8% center;

        text-align: left;
        overflow: hidden;
    }
    
        #news_title {
        height: 26px;
    }
    #news_title span {
        padding: 15px 0 0 0;

    }
    
    
    
    #top_menu_01,
    #top_menu_02,
    #top_menu_03{
        height: auto;
        width: 100%;
        
    
    }
    #top_menu_01 p,
    #top_menu_03 p 
    {
        width: 49.6%;

    }

    .top_right p a{
        height: 50px;
        height: auto;
        overflow: hidden;
    }
    #top_menu_02 ul li{
        width: 49.3%;
         
    }
    #top_menu_02 ul li a{
        height: 50px;
    }

        #top_menu_02 ul li{
/*            width: 49.4%;*/
                
    }
    #top_menu_02 ul li:nth-child(3n){
        margin-right: 2px;
    }
    #top_menu_02 ul li:nth-child(even){
        margin-right: 0px;
    }
    #top_menu_02 ul li:nth-child(odd){
        margin-right: 2px;
    }
    .top_right ul li a {}
    .top_right p a span,
    .top_right ul li a span {

        padding: 15px 0 15px 22%;
    }
.top_right h2 {
    padding: 15px 0;
    margin: 0;
    color: #fff;
    font-size: 1.4em;
    border-bottom: 0px;
    text-align: center;
}
.top_menu_in{
    height: auto;
    overflow: hidden;
}
    #tm9 {
        /*
        padding: 21px 0 2px 21%;
overflow: hidden;
height: 28px;
*/
    }

    #tm17 {
        /*
        font-size: 0.8em;
        padding: 19px 0 11px 21%;
*/
    }


    #top_menu_02 p a:nth-child(2n) {
        margin-left: 0px;
    }
    #top_menu_02 p a:nth-child(3n) {
        margin-left: 1px;
    }
    #top_menu_02 ul li:nth-child(3n) {
        margin-right: 2px;
        margin-left: 0px;
    }
    .toppage #header {
        width: 100%;
    }
    #topunit_a {

/*        height: 330px;*/

    }
    .contents_0,
    .contents_0 img {
        width: auto !important;
/*
        min-width: 320px !important;
        height: auto !important;
*/
        max-height: 138px;

    }
    .rowunit_2 {
        width: 100%;
        background-color: #fff;

    }
    #unit_a {
        float: none;
        width: 320px;
        padding-right: 0px;
        /*    box-sizing: border-box;*/
        margin: 0 auto;


        padding: 0px;
    }

    #unit_a_1{
        padding-left: 0px;
    }
    .toppage #unit_a img,
    #unit_a img {
        /*        max-width: 320px !important;*/
/*         height: auto !important; */
    }

#unit_a .linef a{
    display: block;
    width:150px;
    margin:0 auto;
    padding:0;
}

    #unit_b {}

    #banner_1 {
        width: 320px;
    }
    #banner_1 p {
        display: block;
        width: 250px;
        float: none;
        padding-bottom: 8px;
        margin-right: 0px;
        margin: 0 auto;
    }

    #banner_1 p:last-child {
        margin-right: 35px;
        margin-bottom: 25px;
    }
    .menu_2 {}
    .menu_2 p a,
    .menu_2 ul li a {
        width: 263px;
        /*
		display: block;
		width: 265px;
		padding: 5px 20px 5px 7px;
		text-align: left;
*/
    }
    .menu_2 ul li:first-child a {}


    address strong {
        font-size: 100%;
    }

    #copy {
        font-size: 0.9em;
    }

    #slides {
        width: 300px;
        height: 100px;
    }
    .slidesjs-previous,
    .slidesjs-next {
        display: none;
    }

    .top_main img {
        max-width: 300px;
        height: auto;
    }








    .sp #banner_1 {
        background-color: #fff;
        margin-top: 10px;


    }
    .sp #banner_1 p {
        float: none;
        width: 250px;
        padding-bottom: 8px;
        margin: 0 auto;
    }
    .sp_title {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 1.2em;
        margin: 0 auto;
        color: #003770;
        padding: 20px 0 15px 0;
        background-image: url(../all_img/org/sp_h2bg.png);
        background-repeat: repeat-x;
        background-position: top;
        border-bottom: 0px;
    }
    .rowunit_3 {
        width: 100%;
    }



    .sp #offical_banner {
        width: 320px;
        float: none;

        background-color: #fff;
        margin: 0 auto;
        padding-bottom: 25px;
    }
    .sp #offical_banner h2 {
        display: none;
    }
    .sp #offical_banner p img {
/*
        width: 320px!important;
        height: auto!important;
*/
    }
    .sp #sns_share {
        width: 100%;
        background-color: #fff;
        padding-bottom: 25px;
        margin-bottom: 0px;
    }
    
    
    .cont_sp {
        width: 320px;
        margin: 0 auto;
    }
    #banner_3 {
        /*        width: 155px;*/
        width: 320px;
    }
    #banner_3 p {

        width: 155px;
        margin-right: 4px;
        margin-bottom: 4px;
    }
    #banner_3 p img {
        width: 155px!important;
        height: auto!important;
    }
    #footer {
        background-color: #00b2bc;
    }
    #footer_in {
        text-align: center;
        width: 320px;
        padding-top: 20px;
        margin-bottom: 0px;
    }
    #footer_address {
        width: 320px;
        margin: 0 auto;
        background-color: #00b2bc;
        color: #fff;
        padding-right: 0px;
    }
    #news_topics {
        width: 320px;
        margin: 0 auto;
    }
    
	#news_topics dl dt img {
	    height: 70px !important;
	    width: 70px !important;
	}
    
	.topictitle {
	    padding-left: 80px;
	    padding-top: 0;
	    font-size: 0.9em;
	    line-height: 1.3em;
	}
    
	.topicbumon {
	    margin-left: 80px;
/* 	    position: absolute; */
	    bottom: 7px;
/*
	    margin-top: 10px;
	    font-size: 0.9em;
	    font-weight: 300;
*/
	}
    
    
    #news_topics dl dt {
        padding: 10px 0 20px 0;
        min-height: 60px;
    }
    .topictitle {

/*     margin-bottom: 30px; */

	}
    .bumon, .asagidiary {
    text-align: center;
    font-size: 90%;
	}
    /*マーチングバンド・バトントワリング*/
    .bumon-13{
	    font-size: 80%;
    }
    
    
    
    
    #news_topics dl dd {
        display: none;
    }
    #news_title {
        background-color: #fff;
        color: #003770;
        font-size: 1.2em;
        padding: 20px 0;
        text-align: center;

    }
    .tabs {

        background-color: #fff;
    }
    .tabs ul li {
        background-color: #99E0E4;
        background-image: none;
        border-right: 1px solid #fff;
        /*
    margin-left: 1px;
*/
        border-bottom: 0px solid #fff;
        width: 105px;
    }
    .tabs ul li a {
        /*        padding: 18 0;*/
        border-bottom: 1px solid #fff;
        font-size: 0.7em;
        height: 54px;
    }
    .tabs ul li a:hover,
    .tabs ul li .sel {
        background-color: #fff;
        background-image: url(https://sagasoubun.jp/all_img/org/sp_tab_bg.png);
        background-position: top;
        background-repeat: repeat-x;
        padding: 0 0 0 0;
    }
    .tabs ul li:hover {
        padding: 0 0 0 0;
    }
    .tabs ul li .sel a {
        padding: 17px 0 13px 0;
    }

    .mail_form {
        border: 1px solid #cccccc;
        padding: 4px;
    }
    .mail_form .form_label,
    .mail_form .form_input {
        float: none;
        margin: 0;
        padding: 3px;
        width: 284px;
        border: none;
    }
    .mail_form .form_label {
        border-top: 1px solid #ccc;
        background-color: #eee;
    }
    .mail_form .form_input input[type=text] {
        width: 274px;
    }
    .mail_form .form_input textarea {
        width: 274px;
    }
    .mail_form .form_button input {
        margin: 0 0 10px 67px;
    }
    #spmenu {
        width: 320px;
        margin: 0 auto;

    }
    #sp_bottommenu {
        padding-left: 15px;
        text-align: center;
    }
    #sp_bottommenu p {
        margin-right: 20px;
        float: left;
    }
    #sp_bottommenu p a:nth-child(3n) {
        margin-right: 0px;
    }
    #sp_bottommenu p a span {
        display: block;
        width: 80px;
        text-align: center;
        padding-top: 87px;
        font-size: 0.7em;
    }

    #sp_bottommenu p a span {
        background-position: center 2%;
        background-repeat: no-repeat;
    }
    #spbm_0 {
        background-image: url(../all_img/org/spbm0.png);
    }
    #spbm_1 {
        background-image: url(../all_img/org/spbm1.png);
    }
    #spbm_2 {
        background-image: url(../all_img/org/spbm2.png);
    }
    #spbm_3 {
        background-image: url(../all_img/org/spbm3.png);
    }
    #spbm_4 {
        background-image: url(../all_img/org/spbm4.png);
    }
    #spbm_5 {
        background-image: url(../all_img/org/spbm5.png);
    }
    .btm {
        width: 160px;
        font-size: 1em;
        padding: 10px 0;
        font-weight: normal;
        margin-bottom: 30px;
    }
    #spmenu .btm {
        background-color: #003770
    }
    .menu_2 p,
    .menu_2 ul li {
        width: 320px;
        margin-bottom: 1px;
    }
    .menu_2 p a,
    .menu_2 ul li a {
        padding: 20px 37px 20px 20px;
        background-position: 95% center;
    }
    .menu_4 {
        margin-bottom: 25px;
    }
    .menu_4 p a {
        display: none;
    }
    .menu_4 ul {
        width: 320px;
        list-style: none;
        margin: 0;
        padding: 0;
        border-top: 2px solid #ccc;
        margin-bottom: 25px;
    }
    .menu_4 ul li {
        margin: 0;
        border-right: 2px solid #ccc;
        border-left: 2px solid #ccc;
        border-bottom: 2px solid #ccc;
        float: left;


    }

    .menu_4 ul li:nth-child(2n) {
        border-left: 0px solid #ccc;
    }
    .menu_4 ul li a {
        display: block;
        width: 127px;
        padding: 15px;
        font-size: 0.9em;
    }

    #timebox {
        width: 290px;
        float: none;
        padding-top: 15px;
        color: #fff;
        font-weight: bold;
        font-size: 1em;
        margin: 0 auto;
/*        padding-left: 30px;*/
    }
    #timebox p {
        display: inline;
        padding: 7px 0px 0 0;
        float: left;
    }
    .yycountdown-box {
        text-align: left;
        width: auto;
        float: none;

    }
    .yycountdown-box br{
        display: none;
    }
    .yycountdown-box .yyc-day {
        font-size: 1.8em;
        line-height: 1em;
        padding: 0 0 0 5px;
    }

    .yycountdown-box .yyc-day-text {
        font-size: 1em;
        padding-right: 10px;
    }


    .yycountdown-box .yyc-hou,
    .yycountdown-box .yyc-min,
    .yycountdown-box .yyc-sec,
    .yycountdown-box .yyc-hou-text,
    .yycountdown-box .yyc-min-text,
    .yycountdown-box .yyc-sec-text {
        font-size: 1em;
        padding-left: 2px;

    }
    .yycountdown-box .yyc-hou,
    .yycountdown-box .yyc-min,
    .yycountdown-box .yyc-sec {
        padding-left: 5px;
    }

    .spm {
        width: 100%;
        background-color: #4DC9D0;
        position: fixed;
        bottom: 0;
        z-index: 20;
    }
    .spm ul {
        width: 100%;
        margin: 0 auto;
        padding: 0;
        list-style: none;
    }
    .spm ul li {
        /*        display: inline;*/
        margin: 0;
        padding: 0;
        /*        float: left;*/
    }
    .spm ul li a {
        display: block;
        width: 60px;
        height: 50px;
        /*        float: left;*/
        text-indent: -55555em;
        background-repeat: no-repeat;
    }
    .spm ul li a {
        background-position: center;
    }
    .spm ul li.spm_00 a {
        background-image: url("../all_img/org/spm_00.png");
    }
    .spm ul li.spm_01 a {
        background-image: url("../all_img/org/spm_01.png");
    }
    .spm ul li.spm_02 a {
        background-image: url("../all_img/org/spm_02.png");
    }
    .spm ul li.spm_03 a {
        background-image: url("../all_img/org/spm_03.png");
    }
    .spm ul li.spm_04 a {
        background-image: url("../all_img/org/spm_04.png");
    }
    .spm_box {
        display: flex;
        justify-content: space-between;
    }
/*------20180614 add-------------*/
	#music_player_tabsp{
		width: 320px;
		height: 120px;
		background-image: url(../all_img/org/asagi_chan_music_sp.png);
	}
	#music_player_tabsp #music_player_tabsp_inner{
	position: absolute;
	width: 180px;
	bottom: 6px;
	right: 14px;
	}
	#music_player_tabsp #music_player_tabsp_inner p{
		font-size: 0.8rem;
		margin-bottom: 2px;
	}
	#music_player_tabsp #music_player_tabsp_inner audio{
		width: 180px;
		height: 32px;
	}	
/*------20180614 add-------------*/
	
	
}
div.scroll{
    width: 100%;
    overflow-y: hidden;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}
div.scroll::-webkit-scrollbar{　　/*tableにスクロールバーを追加*/
    height: 5px;
}
div.scroll::-webkit-scrollbar-track{　　/*tableにスクロールバーを追加*/
    background: #F1F1F1;
}
div.scroll::-webkit-scrollbar-thumb {　　/*tableにスクロールバーを追加*/
    background: #BCBCBC;
}
div.scroll{
    width: 100%;
    overflow-y: hidden;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}
div.scroll::-webkit-scrollbar{　　/*tableにスクロールバーを追加*/
    height: 5px;
}
div.scroll::-webkit-scrollbar-track{　　/*tableにスクロールバーを追加*/
    background: #F1F1F1;
}
div.scroll::-webkit-scrollbar-thumb {　　/*tableにスクロールバーを追加*/
    background: #BCBCBC;
}

div.scroll th,div.scroll td {
display: table-cell;
}
/* iPhone 4 ----------- */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {}