@charset "UTF-8" ;
/* ------------------------------------------------- */
/*   for smartphone tablet design  */
/* ------------------------------------------------- */

/*---tablet---*/
@media screen and (max-width:768px){
    #container{
       max-width: 768px;
       width: 100%;
       position: relative;
       box-sizing: border-box;
       padding:0 3%;
}
    #main{
       display: block;
       max-width: 768px;
       width:100%;
       background:#fff;
       margin-top:20px;
}
    #sidebar{
       max-width: 768px;
       width: 100%;
       display: block;
       margin-top: 0;
}
    #stage,.pic,#frame {
       max-width: 768px;
       width: 100%;
       height:auto;
       text-align: center;
}
/*-----------------------------------------------------
header detail
-----------------------------------------------------*/
    #header h1{
       background-position: right;
}
/*-------------------------------------*/
    #global-menu{
       display: none;
}

    #footer address{
       max-width:768px;
       width: 100%;
       white-space: nowrap;
       font-size: 10px;
}

/*--------------------------------------*/
    .sidemenu_sp {  display: none; }
	.pc_visible { display: none !important; }

/*------こ�?�クラスを、jQueryで付与�?�削除する-------*/
    .sidemenu_sp.active{
        display: block;
        z-index: 99;
        position: absolute;
        left: 2%;
        top: 120px;
        max-width: 768px;
        width: 96%;
        background: #fff;
        transition: .4s ease-in-out;
}
    /*------------ハンバ�?�ガーメニュ-------------*/
    .navToggle {
       display: block;
       position: absolute;
       /* left: 1%;
       bottom: 18%; */
       top: 0;
       left: 0;
       width: 50px;
       height: 50px;
       cursor: pointer;
       z-index: 3;
       text-align: center;
}
    .navToggle span {
       display: block;
       position: absolute;
       width: 40px;
       height: 5px;
       border-bottom: solid 2px var(--sub-color);
      -webkit-transition: .35s ease-in-out;
      -moz-transition: .35s ease-in-out;
       transition: .35s ease-in-out;
       left: 4px;
}
    .navToggle span:nth-child(1) {
       border: none;
       color: #333;
       font-size: 10px;
       font-weight: bold;
       bottom: 43px;
}
    .navToggle span:nth-child(2) {
       top: 18px;
}
    .navToggle span:nth-child(3) {
       top: 27px;
}
    .navToggle span:nth-child(4) {
       top: 36px;
}
/* --   ハンバ�?�ガメニュー閉じたと�?-------------------- */
    .navToggle.active span:nth-child(2) {
       top: 36px;
       left: 1px;
       -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
       transform: rotate(-45deg);
}
    .navToggle.active span:nth-child(3),
    .navToggle.active span:nth-child(4) {
       top: 36px;
       -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
       transform: rotate(45deg);
}
    h4{
       display: none;
    }
/*----------infoboxー---------------------------------*/
     #main .infobox{
       max-width: 768px;
       width: 100%;
       margin-right: 2%;
    }
/*----------バナー------------------------------------*/
    #sidebar dl.zyusyo{
       margin-left:0;
}
    .flex_1{
       display: flex;
       justify-content: center;
       max-width: 768px;
       width: 100%;
       padding: 0 ;
}
    .flex_2{
       display: flex;
}
    .sp_flex:last-child{
        margin: 0 1.5em;

}
    .sp_flex_2{
        margin-top: 1em;
}
/*-------�?ーブル-------------------------------------*/
     table.table01 {
        max-width: 768px;
        width: 100%;
}

/*--------------------------------------------*/
#main .article-body{
    max-width:780px;
    width: 100%;
    margin: 0;
}
/*--------------------------------------------------*/
/* 画像左�?せテキス�?(ロータリーの概�?) 480px以下�?�左�?せ�?�*/
    div.gaiyou img.hidariyose {
        margin-top: 20px;
       float: none;
    }
    div.gaiyou h3{
      padding:2%;
}
    div.gaiyou p {
       margin-left:0;
}
    div.gaiyou ul{
        margin-left: 0;
    }
    div.gaiyou dl {
       max-width: 768px;
       margin-left: 0;
}
    div.gaiyou dl dt {
      max-width: 768px;
      width: 100%;
}
/*--------------------------------------------------*/
}
/*---smartphone---*/
@media screen and (max-width:480px){
      #header h1{
           background-size: 70%;
}
    #sidebar .flex_1,.flex_2{
        display: block;
        max-width: 480px;
        width: 100%;
    }
    #sidebar .sp_flex dt,.sp_flex dd{
        text-align: center;
    }
    #sidebar dl.zyusyo dt{
        font-size:1.2em;
    }
    #sidebar dl.zyusyo dd {
        font-size:1em;
        margin:0 0 1.2em 0;
}
     .zyusyo img{
        width: 65%;
        height: auto;
    }
    #sidebar ul.banner img{
        width: 60%
    }
   #main .article-body dd {
        max-width: 480px;
        width: 100%;
        margin-left: 0;
    }
/*-------tableにスクロールバ�?�を追�?------------*/
    .scroll{
        overflow: auto;
        white-space: nowrap;
    }
    .scroll::-webkit-scrollbar{
        height: 10px;
}
    .scroll::-webkit-scrollbar-track{
/* スクロールバ�?�のスクロール�?囲の色 */
        background: #F6F6F6;
}
    .scroll::-webkit-scrollbar-thumb {
/* スクロールバ�?�の�?マミの色 */
        background: #C2C2C2;
}
    .scroll table{
        width:100%;
}



}

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

}
/*------スマ�?��?�タブレ�?ト追�?�?----------------------------*/
@media screen and (min-width:769px){
    #main .infobox ul li br{
        display: none;
    }
    #sidebar ul li:nth-child(1),#sidebar ul li:nth-child(2),#sidebar ul li:nth-child(3),#sidebar ul li:nth-child(4),#sidebar ul li:nth-child(5) {
        display: block;
    }
    .navToggle{
        display: none;
    }
}

@media screen and (min-width:769px){
.pc_visible { display: block !important;}
.sidemenu_sp { display: none !important;]
}